:root {
--ink:        #0B1420;
--ink-soft:   #14263A;
--ink-line:   #16293C;
--signal:     #2BA8C9;
--signal-lo:  #4FC0DC;
--signal-hi:  #5CD3F0;
--paper:      #0B1420;
--paper-2:    #101C2B;
--paper-3:    #23394F;
--text:       #E9EFF5;
--text-2:     #AABCCE;
--muted:      #7C90A5;
--line:       #22394E;
--card:       #16273A;
--card-hover: #34597A;
--feld:       #0C1826;
--kopf-bg:    rgba(11, 20, 32, .82);
--schatten:   0 20px 44px -28px rgba(0, 0, 0, .66);
--schatten-l: 0 26px 56px -38px rgba(0, 0, 0, .74);
--naht:       #16293C;
--font-display: "Archivo", system-ui, sans-serif;
--font-body:    "Archivo", system-ui, sans-serif;
--font-mono:    "IBM Plex Mono", ui-monospace, monospace;
--shell:      1180px;
--radius:     14px;
--ease:       cubic-bezier(.22, .61, .36, 1);
}
@media (min-width: 1500px) {
:root { --shell: 1340px; }
}
@media (min-width: 1800px) {
:root { --shell: 1420px; }
}
*,
*::before,
*::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; }
p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { margin-top: 0; margin-bottom: 1rem; }
img, svg { vertical-align: middle; }
button,
input,
select,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button { text-transform: none; }
textarea { resize: vertical; }
label { display: inline-block; }
.d-none { display: none !important; }
.mb-3 { margin-bottom: 1rem; }
.form-label { display: block; }
.form-control {
display: block;
width: 100%;
}
.alert {
padding: 12px 16px;
border: 1px solid transparent;
border-radius: 9px;
font-size: 0.9375rem;
line-height: 1.5;
}
.alert-success {
background: rgba(46, 158, 91, .13);
border-color: rgba(46, 158, 91, .42);
color: #74E3A6;
}
.alert-danger {
background: rgba(220, 62, 82, .13);
border-color: rgba(220, 62, 82, .42);
color: #FF9DAA;
}
body.sdi-home {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--text);
background: var(--paper);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.sdi-home h1,
.sdi-home h2,
.sdi-home h3 {
font-family: var(--font-display);
font-variation-settings: "wdth" 112;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.12;
color: var(--text);
}
.sdi-shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: 24px;
}
.sdi-section {
padding-block: clamp(72px, 9vw, 128px);
}
.sdi-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--signal-lo);
margin-bottom: 18px;
}
.sdi-eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: currentColor;
opacity: .55;
}
.sdi-eyebrow--onDark { color: var(--signal-hi); }
.sdi-lead {
font-size: 1.1875rem;
line-height: 1.6;
color: var(--text-2);
max-width: 62ch;
text-wrap: pretty;
}
.sdi-home h1,
.sdi-home h2 { text-wrap: balance; }
.sdi-card p,
.sdi-step p { text-wrap: pretty; }
.sdi-head {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
padding-block: 14px;
transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.sdi-head__row {
display: flex;
align-items: center;
gap: 32px;
}
.sdi-head__logo img {
height: 46px;
width: auto;
display: block;
transition: height .35s var(--ease);
}
.sdi-head__logo img { filter: brightness(0) invert(1); }
.sdi-head.is-stuck {
background: var(--kopf-bg);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 1px 0 var(--line), 0 8px 28px -22px rgba(11, 20, 32, .5);
padding-block: 9px;
}
.sdi-head.is-stuck .sdi-head__logo img { height: 38px; }
.sdi-nav {
display: flex;
align-items: center;
gap: 28px;
margin-left: auto;
}
.sdi-nav a:not(.sdi-btn) {
font-size: 0.9375rem;
font-weight: 500;
color: rgba(255, 255, 255, .82);
text-decoration: none;
position: relative;
padding-block: 4px;
transition: color .2s var(--ease);
}
.sdi-nav a:not(.sdi-btn)::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--signal);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s var(--ease);
}
.sdi-nav a:not(.sdi-btn):hover { color: #fff; }
.sdi-nav a:not(.sdi-btn):hover::after { transform: scaleX(1); }
.sdi-head.is-stuck .sdi-nav a:not(.sdi-btn) { color: var(--text-2); }
.sdi-head.is-stuck .sdi-nav a:not(.sdi-btn):hover { color: var(--text); }
.sdi-nav__cta { margin-left: 4px; }
@media (max-width: 800px) {
.sdi-nav a:not(.sdi-nav__cta) { display: none; }
.sdi-nav__cta {
padding: 10px 17px;
font-size: 0.875rem;
white-space: nowrap;
}
.sdi-head__logo img { height: 38px; }
.sdi-head.is-stuck .sdi-head__logo img { height: 34px; }
}
.sdi-btn {
--btn-bg: var(--signal);
--btn-fg: #04141B;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 24px;
border: 0;
border-radius: 10px;
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: transform .18s var(--ease), box-shadow .28s var(--ease), background .2s var(--ease);
}
.sdi-btn:hover {
background: var(--signal-hi);
color: #04141B;
transform: translateY(-1px);
box-shadow: 0 12px 30px -14px rgba(43, 168, 201, .75);
}
.sdi-btn:active { transform: translateY(0); }
.sdi-btn--ghost {
--btn-bg: transparent;
--btn-fg: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
}
.sdi-btn--ghost:hover {
background: rgba(255, 255, 255, .07);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.sdi-btn__arrow { transition: transform .25s var(--ease); }
.sdi-btn:hover .sdi-btn__arrow { transform: translateX(3px); }
.sdi-stage {
position: relative;
color: #fff;
overflow: hidden;
padding-top: clamp(140px, 17vw, 200px);
padding-bottom: clamp(96px, 12vw, 150px);
}
.sdi-wolken {
position: fixed;
inset: 0;
z-index: -2;
overflow: hidden;
pointer-events: none;
}
.sdi-wolken i {
position: absolute;
display: block;
border-radius: 50%;
will-change: transform;
}
.sdi-wolken i:nth-child(1) {
top: -30%;
right: -16%;
width: 68%;
height: 96%;
background: radial-gradient(closest-side, rgba(43, 168, 201, .26), transparent 72%);
animation: driftA 52s ease-in-out infinite alternate;
}
.sdi-wolken i:nth-child(2) {
bottom: -34%;
left: -20%;
width: 64%;
height: 92%;
background: radial-gradient(closest-side, rgba(23, 121, 143, .26), transparent 74%);
animation: driftB 67s ease-in-out infinite alternate;
}
.sdi-wolken i:nth-child(3) {
top: 22%;
left: 30%;
width: 48%;
height: 62%;
background: radial-gradient(closest-side, rgba(92, 211, 240, .11), transparent 70%);
animation: driftC 43s ease-in-out infinite alternate;
}
@keyframes driftA {
0%   { transform: translate3d(0, 0, 0)        scale(1); }
50%  { transform: translate3d(-7%, 5%, 0)     scale(1.14); }
100% { transform: translate3d(4%, -4%, 0)     scale(1.03); }
}
@keyframes driftB {
0%   { transform: translate3d(0, 0, 0)        scale(1.06); }
50%  { transform: translate3d(9%, -6%, 0)     scale(1); }
100% { transform: translate3d(-4%, 3%, 0)     scale(1.12); }
}
@keyframes driftC {
0%   { transform: translate3d(0, 0, 0)        scale(.94); }
50%  { transform: translate3d(6%, 8%, 0)      scale(1.18); }
100% { transform: translate3d(-8%, -5%, 0)    scale(1); }
}
.sdi-stage__grid {
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
}
.sdi-stage__grid svg { width: 100%; height: 100%; display: block; }
.sdi-stage__inner { position: relative; max-width: 840px; }
.sdi-stage h1 {
color: #fff;
font-size: clamp(2.4rem, 6vw, 4.1rem);
font-variation-settings: "wdth" 108;
letter-spacing: -0.03em;
margin-bottom: 22px;
}
.sdi-stage h1 em {
font-style: normal;
color: var(--signal-hi);
white-space: nowrap;
}
.sdi-stage__lead {
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
line-height: 1.6;
color: rgba(255, 255, 255, .74);
max-width: 56ch;
margin-bottom: 36px;
}
.sdi-stage__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.trace-base {
fill: none;
stroke: var(--ink-line);
stroke-width: 1;
}
.trace-node {
fill: var(--ink);
stroke: var(--ink-line);
stroke-width: 1;
}
.trace-live {
fill: none;
stroke: var(--signal-hi);
stroke-width: 1.1;
stroke-linecap: round;
opacity: .72;
filter: drop-shadow(0 0 4px rgba(92, 211, 240, .6));
stroke-dasharray: 20 480;
stroke-dashoffset: 500;
animation: traceRun 7s linear infinite;
}
.trace-live--b { animation-duration: 9.5s;  animation-delay: -3.4s; }
.trace-live--c { animation-duration: 8.2s;  animation-delay: -6.1s; }
.trace-live--d { animation-duration: 11s;   animation-delay: -1.8s; }
@keyframes traceRun {
to { stroke-dashoffset: 0; }
}
.sdi-naht {
position: relative;
height: 7px;
pointer-events: none;
}
.sdi-naht__linie {
position: absolute;
top: 3px;
left: 0;
right: 0;
height: 1px;
background: var(--naht);
overflow: hidden;
}
.sdi-naht__linie::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--signal-hi), transparent);
box-shadow: 0 0 7px rgba(92, 211, 240, .55);
animation: nahtLauf 11s linear infinite;
will-change: transform;
}
.sdi-naht--b .sdi-naht__linie::after { animation-duration: 14s; animation-delay: -5s; }
.sdi-naht--c .sdi-naht__linie::after { animation-duration: 9.5s; animation-delay: -2.5s; }
@keyframes nahtLauf {
from { transform: translateX(-190px); }
to   { transform: translateX(calc(100vw + 190px)); }
}
.sdi-naht i {
position: absolute;
top: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--signal);
opacity: .42;
}
.sdi-naht i:nth-child(2) { left: 17%; }
.sdi-naht i:nth-child(3) { left: 49%; }
.sdi-naht i:nth-child(4) { left: 81%; }
.sdi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
gap: 20px;
margin-top: 46px;
}
.sdi-card {
position: relative;
padding: 32px 26px 36px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sdi-card::after {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--signal), transparent);
transform: scaleX(0);
transition: transform .5s var(--ease);
}
.sdi-card:hover {
border-color: var(--card-hover);
transform: translateY(-3px);
box-shadow: var(--schatten);
}
.sdi-card:hover::after { transform: scaleX(1); }
.sdi-card__icon {
width: 54px;
height: 54px;
margin-bottom: 26px;
color: var(--signal-lo);
}
.sdi-card__icon svg { width: 100%; height: 100%; display: block; }
.sdi-card h3 {
font-size: 1.0625rem;
font-variation-settings: "wdth" 106;
letter-spacing: -0.01em;
margin-bottom: 9px;
}
.sdi-card p {
font-size: 0.9375rem;
line-height: 1.62;
color: var(--text-2);
margin: 0;
}
.sdi-flow { position: relative; margin-top: 52px; }
.sdi-flow__rail {
position: absolute;
top: 26px;
left: 27px;
width: calc(75% + 22.5px);
height: 2px;
background: var(--paper-3);
pointer-events: none;
display: none;
}
.sdi-flow__rail span {
display: block;
height: 100%;
background: var(--signal);
transform-origin: left;
transition: transform 1.5s var(--ease);
}
.js .sdi-flow__rail span { transform: scaleX(0); }
.js .sdi-flow.is-visible .sdi-flow__rail span { transform: scaleX(1); }
.sdi-flow__steps {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 30px;
}
@media (min-width: 1000px) {
.sdi-flow__steps { grid-template-columns: repeat(4, 1fr); }
.sdi-flow__rail { display: block; }
}
.sdi-step__dot {
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--card);
border: 2px solid var(--signal);
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
color: var(--signal-lo);
margin-bottom: 20px;
transition: border-color .45s var(--ease), color .45s var(--ease), background .45s var(--ease);
}
.js .sdi-step__dot {
background: var(--paper-2);
border-color: var(--paper-3);
color: var(--muted);
}
.js .sdi-flow.is-visible .sdi-step__dot {
border-color: var(--signal);
color: var(--signal-lo);
background: var(--card);
}
.sdi-step:nth-child(2) .sdi-step__dot { transition-delay: .18s; }
.sdi-step:nth-child(3) .sdi-step__dot { transition-delay: .36s; }
.sdi-step:nth-child(4) .sdi-step__dot { transition-delay: .54s; }
.sdi-step h3 {
font-size: 1.0625rem;
font-variation-settings: "wdth" 106;
margin-bottom: 8px;
}
.sdi-step p {
font-size: 0.9375rem;
line-height: 1.62;
color: var(--text-2);
margin: 0;
}
.sdi-contact { max-width: 720px; }
.sdi-contact .sdi-form { margin-top: 42px; }
.sdi-form {
padding: clamp(26px, 3.4vw, 40px);
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--schatten-l);
}
.sdi-form .form-label {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 7px;
}
.sdi-form .form-control {
padding: 12px 15px;
font-family: var(--font-body);
font-size: 0.9375rem;
color: var(--text);
background: var(--feld);
border: 1px solid var(--line);
border-radius: 9px;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.sdi-form .form-control:focus {
background: var(--feld);
border-color: var(--signal);
box-shadow: 0 0 0 3px rgba(43, 168, 201, .17);
}
.sdi-form .form-control::placeholder { color: #9AA9B8; }
.sdi-form__fehler {
display: flex;
align-items: flex-start;
gap: 7px;
margin: 8px 0 0;
font-size: 0.8125rem;
line-height: 1.5;
color: #FF9DAA;
}
.sdi-form__fehler[hidden] { display: none; }
.sdi-form__fehler::before {
content: "!";
flex: none;
width: 16px;
height: 16px;
margin-top: 2px;
border-radius: 50%;
background: #FF9DAA;
color: #2B0A11;
font-size: 11px;
font-weight: 700;
line-height: 16px;
text-align: center;
}
.sdi-form .form-control[aria-invalid="true"] {
border-color: #C4425A;
background: rgba(196, 66, 90, .07);
}
.sdi-form .form-control[aria-invalid="true"]:focus {
border-color: #E0637A;
box-shadow: 0 0 0 3px rgba(196, 66, 90, .18);
}
.sdi-form button[disabled] {
opacity: .55;
cursor: default;
transform: none;
box-shadow: none;
}
.sdi-form__note {
font-size: 0.8125rem;
line-height: 1.55;
color: var(--muted);
}
.sdi-form__note a { color: var(--signal-lo); }
.sdi-doc {
max-width: 74ch;
padding-top: clamp(112px, 13vw, 156px);
padding-bottom: clamp(72px, 9vw, 116px);
}
.sdi-doc h1 {
font-size: clamp(1.9rem, 4vw, 2.6rem);
margin-bottom: 10px;
}
.sdi-doc__stand {
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 44px;
}
.sdi-doc h2 {
font-size: 1.0625rem;
font-variation-settings: "wdth" 106;
letter-spacing: -0.005em;
margin: 40px 0 12px;
padding-top: 22px;
border-top: 1px solid var(--line);
}
.sdi-doc h2:first-of-type { margin-top: 0; }
.sdi-doc--nummeriert { counter-reset: abschnitt; }
.sdi-doc--nummeriert h2::before {
counter-increment: abschnitt;
content: counter(abschnitt, decimal-leading-zero);
display: block;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--signal-lo);
margin-bottom: 8px;
}
.sdi-doc p {
color: var(--text-2);
line-height: 1.72;
margin-bottom: 14px;
text-wrap: pretty;
}
.sdi-doc ul {
color: var(--text-2);
line-height: 1.72;
padding-left: 20px;
margin-bottom: 16px;
}
.sdi-doc li { margin-bottom: 5px; }
.sdi-doc strong { color: var(--text); font-weight: 600; }
.sdi-doc a:not(.sdi-doc__zurueck) { color: var(--signal-lo); text-decoration: underline; }
.sdi-doc a:not(.sdi-doc__zurueck):hover { color: var(--signal-hi); }
.sdi-doc address {
font-style: normal;
color: var(--text-2);
line-height: 1.72;
padding: 18px 20px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 16px;
}
.sdi-doc__zurueck {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 46px;
font-size: 0.9375rem;
font-weight: 500;
color: var(--signal-lo);
text-decoration: none;
}
.sdi-doc__zurueck:hover { color: var(--signal-hi); }
.sdi-doc__zurueck svg { transition: transform .25s var(--ease); }
.sdi-doc__zurueck:hover svg { transform: translateX(-3px); }
.sdi-foot {
position: relative;
background: #060D14;
border-top: 1px solid var(--line);
color: rgba(255, 255, 255, .58);
padding-block: 46px;
font-size: 0.875rem;
}
.sdi-foot__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
}
.sdi-foot img {
height: 34px;
filter: brightness(0) invert(1);
opacity: .82;
}
.sdi-foot nav { margin-left: auto; display: flex; gap: 22px; }
.sdi-foot a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.sdi-foot a:hover { color: #fff; text-decoration: underline; }
.js .reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .09s; }
.js .reveal[data-delay="2"] { transition-delay: .18s; }
.js .reveal[data-delay="3"] { transition-delay: .27s; }
.sdi-home :focus-visible {
outline: 2px solid var(--signal);
outline-offset: 3px;
border-radius: 4px;
}
.sdi-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 12px 20px;
background: #fff;
color: var(--text);
font-weight: 600;
border-radius: 0 0 8px 0;
}
.sdi-skip:focus { left: 0; }