/* Erzeugt aus marke.css, grund.css, kino.css, kapitel.css, ordination.css, start.css — bitte die Quellen bearbeiten, nicht diese Datei. */
@font-face{
font-family:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap;
src:url(../assets/schriften/outfit-var-latin.woff2) format("woff2-variations");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap;
src:url(../assets/schriften/outfit-var-latin-ext.woff2) format("woff2-variations");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:"Space Grotesk"; font-style:normal; font-weight:300 700; font-display:swap;
src:url(../assets/schriften/grotesk-var-latin.woff2) format("woff2-variations");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
:root{
--n-0:#ffffff;   --n-50:#f6f7f9;  --n-100:#eceef1; --n-150:#e3e6ea;
--n-200:#d7dbe0; --n-300:#c2c8cf; --n-400:#98a1ab; --n-500:#656d79;
--n-600:#4c535d; --n-700:#353b43; --n-800:#22262c; --n-900:#0f1216;
--tinte:#000617;
--blau-50:#f0f8ff;  --blau-100:#deefff; --blau-200:#c2e3ff; --blau-300:#a0d2fe;
--blau-400:#6dbeff; --blau-500:#00a4ff; --blau-600:#078bd9; --blau-700:#0771b1;
--blau-800:#00578a; --blau-900:#00385c; --blau-950:#002037;
--violett-50:#f3f7ff;  --violett-100:#e5edff; --violett-200:#cfdeff;
--violett-300:#b5ccff; --violett-400:#95b5ff; --violett-500:#729afb;
--violett-600:#5b7fdc; --violett-700:#4666bb; --violett-750:#4f22e6;
--violett-800:#334e94; --violett-900:#1f3265; --violett-950:#0f1c3e;
--magenta-50:#fff3fa;  --magenta-100:#ffe4f3; --magenta-200:#ffcdea;
--magenta-300:#ffb0df; --magenta-400:#ff9ad8; --magenta-500:#e66cba;
--magenta-600:#c7539f; --magenta-700:#a73c84; --magenta-800:#832a66;
--magenta-900:#581844; --magenta-950:#350a27;
--gut-400:#7ee0a0; --gut-700:#2f7e46;
--warn-400:#ffd08a; --warn-700:#906108;
--fehl-400:#ffb1ae; --fehl-700:#b33e3c;
--r1:.25rem; --r2:.5rem; --r3:.75rem; --r4:1rem; --r5:1.5rem; --r6:2rem;
--r7:3rem;   --r8:4rem;  --r9:6rem;   --r10:8rem; --r11:11rem; --r12:15rem;
--t-11:.6875rem; --t-12:.75rem; --t-13:.8125rem; --t-14:.875rem;
--t-16:1rem; --t-18:1.125rem; --t-21:1.3125rem;
--t-26:clamp(1.375rem,1.2rem + .7vw,1.625rem);
--t-33:clamp(1.625rem,1.35rem + 1.1vw,2.0625rem);
--t-42:clamp(1.9rem,1.4rem + 2.1vw,2.625rem);
--t-54:clamp(2.25rem,1.5rem + 3.2vw,3.375rem);
--t-72:clamp(2.6rem,1.4rem + 5.2vw,4.5rem);
--t-96:clamp(3rem,1.2rem + 7.6vw,6rem);
--t-128:clamp(3.4rem,.6rem + 11vw,8rem);
--breite-eng:44rem;
--breite-text:60rem;
--breite:82rem;
--breite-weit:96rem;
--rand:clamp(1.25rem,4vw,4rem);
--rad-2:.375rem; --rad-3:.625rem; --rad-4:1rem; --rad-5:1.5rem;
--rad-6:2rem;    --rad-voll:999px;
--z-schnell:.18s; --z-mittel:.34s; --z-ruhig:.6s; --z-lang:1.1s;
--k-aus:cubic-bezier(.22,1,.36,1);
--k-weich:cubic-bezier(.4,0,.2,1);
--k-feder:cubic-bezier(.34,1.56,.64,1);
}
:root{
--bg:#020617;
--bg-tief:#01030e;
--flaeche:#0f172a;
--flaeche-2:#131c31;
--glas:rgba(15,23,42,.55);
--glas-hell:rgba(255,255,255,.045);
--rand-glas:rgba(255,255,255,.085);
--rand-glas-stark:rgba(255,255,255,.16);
--text:#f8fafc;
--text-2:#c2c8cf;
--text-3:#98a1ab;
--marke:var(--violett-400);
--marke-text:var(--violett-300);
--auf-marke:var(--tinte);
--stimme:var(--magenta-400);
--stimme-text:var(--magenta-300);
--stimme-tief:var(--magenta-950);
--schrift-f:var(--blau-500);
--schrift-text:var(--blau-300);
--schrift-tief:var(--blau-950);
--system:var(--violett-400);
--system-text:var(--violett-300);
--system-tief:var(--violett-950);
--licht-a:0,164,255;
--licht-b:149,181,255;
--licht-c:255,154,216;
--licht-stark:.44; --licht-mittel:.30; --licht-leise:.16;
--schatten-1:0 1px 2px rgba(0,0,0,.4);
--schatten-2:0 4px 14px rgba(0,0,0,.42);
--schatten-3:0 12px 34px rgba(0,0,0,.5);
--schatten-4:0 28px 80px rgba(0,0,0,.6);
--schein-stimme:0 0 0 1px rgba(255,154,216,.22), 0 18px 60px rgba(255,154,216,.14);
--schein-schrift:0 0 0 1px rgba(0,164,255,.22), 0 18px 60px rgba(0,164,255,.14);
--schein-system:0 0 0 1px rgba(149,181,255,.22), 0 18px 60px rgba(149,181,255,.14);
}
[data-dienst="carmen-stimme"]{
--carmen:var(--stimme); --carmen-text:var(--stimme-text); --carmen-tief:var(--stimme-tief);
--carmen-schein:var(--schein-stimme); --carmen-licht:var(--licht-c);
--carlos:var(--schrift-f); --carlos-text:var(--schrift-text); --carlos-tief:var(--schrift-tief);
--carlos-schein:var(--schein-schrift); --carlos-licht:var(--licht-a);
}
[data-dienst="carlos-stimme"]{
--carlos:var(--stimme); --carlos-text:var(--stimme-text); --carlos-tief:var(--stimme-tief);
--carlos-schein:var(--schein-stimme); --carlos-licht:var(--licht-c);
--carmen:var(--schrift-f); --carmen-text:var(--schrift-text); --carmen-tief:var(--schrift-tief);
--carmen-schein:var(--schein-schrift); --carmen-licht:var(--licht-a);
}
[data-modus="hell"]{
--bg:#f6f7f9; --bg-tief:#eceef1; --flaeche:#ffffff; --flaeche-2:#f6f7f9;
--glas:rgba(255,255,255,.72); --glas-hell:rgba(0,6,23,.03);
--rand-glas:rgba(0,6,23,.09); --rand-glas-stark:rgba(0,6,23,.18);
--text:#0f1216; --text-2:#4c535d; --text-3:#656d79;
--marke:var(--violett-750); --marke-text:var(--violett-800); --auf-marke:#ffffff;
--stimme:var(--magenta-700); --stimme-text:var(--magenta-800); --stimme-tief:var(--magenta-50);
--schrift-f:var(--blau-700); --schrift-text:var(--blau-800); --schrift-tief:var(--blau-50);
--system:var(--violett-750); --system-text:var(--violett-800); --system-tief:var(--violett-50);
--gut-400:var(--gut-700); --warn-400:var(--warn-700); --fehl-400:var(--fehl-700);
--licht-stark:.20; --licht-mittel:.13; --licht-leise:.07;
--schatten-1:0 1px 2px rgba(0,6,23,.06),0 1px 1px rgba(0,6,23,.04);
--schatten-2:0 2px 4px rgba(0,6,23,.06),0 4px 8px rgba(0,6,23,.06);
--schatten-3:0 4px 8px rgba(0,6,23,.08),0 12px 24px rgba(0,6,23,.10);
--schatten-4:0 8px 16px rgba(31,10,60,.10),0 24px 48px rgba(31,10,60,.14);
--schein-stimme:0 0 0 1px rgba(167,60,132,.2),0 12px 36px rgba(167,60,132,.12);
--schein-schrift:0 0 0 1px rgba(7,113,177,.2),0 12px 36px rgba(7,113,177,.12);
--schein-system:0 0 0 1px rgba(79,34,230,.2),0 12px 36px rgba(79,34,230,.12);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
:where(a):focus-visible,:where(button):focus-visible,
:where(summary):focus-visible,:where([tabindex]):focus-visible{
outline:2px solid var(--marke); outline-offset:3px; border-radius:var(--rad-2);
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{background:var(--bg-tief)}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:var(--t-18);
line-height:1.6;
font-weight:350;
letter-spacing:.002em;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
overflow-wrap:break-word;
}
h1,h2,h3,h4,.gross,.riesig{
font-weight:560; line-height:1.04; letter-spacing:-.028em; text-wrap:balance;
}
.riesig{font-size:var(--t-128);font-weight:600;letter-spacing:-.04em}
h1,.h1{font-size:var(--t-96)}
h2,.h2{font-size:var(--t-72)}
h3,.h3{font-size:var(--t-42);letter-spacing:-.02em}
h4,.h4{font-size:var(--t-26);letter-spacing:-.014em;line-height:1.2}
.fuehrung{font-size:var(--t-26);line-height:1.42;color:var(--text-2);font-weight:330;letter-spacing:-.008em;text-wrap:pretty}
p{text-wrap:pretty}
.leise{color:var(--text-3)}
.zweit{color:var(--text-2)}
strong,b{font-weight:600;color:var(--text)}
.technisch{
font-family:"Space Grotesk",ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:var(--t-12); font-weight:500;
letter-spacing:.16em; text-transform:uppercase;
}
.zahl{font-family:"Space Grotesk",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.verlauf{
background:linear-gradient(102deg,var(--blau-300) 0%,var(--violett-300) 44%,var(--magenta-300) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
[data-modus="hell"] .verlauf{
background:linear-gradient(102deg,var(--blau-800),var(--violett-800) 46%,var(--magenta-800));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.bahn{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.bahn-weit{max-width:var(--breite-weit)}
.bahn-text{max-width:var(--breite-text)}
.bahn-eng{max-width:var(--breite-eng)}
.mitte{text-align:center;margin-inline:auto}
section{position:relative}
.kapitel{padding-block:clamp(5rem,11vh,9rem)}
.kapitel-hoch{padding-block:clamp(6rem,15vh,12rem)}
.stapel>*+*{margin-top:var(--r4)}
.stapel-5>*+*{margin-top:var(--r5)}
.stapel-6>*+*{margin-top:var(--r6)}
.stapel-7>*+*{margin-top:var(--r7)}
.gitter{display:grid;gap:var(--r5)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(12.5rem,100%),1fr))}
.marke-kapitel{
display:flex;align-items:center;gap:var(--r3);
color:var(--text-3);margin-bottom:var(--r5);
}
.marke-kapitel .nr{
font-family:"Space Grotesk",monospace;font-size:var(--t-12);font-weight:600;
letter-spacing:.18em;color:var(--marke-text);
}
.marke-kapitel .strich{
height:1px;flex:0 0 3.5rem;
background:linear-gradient(90deg,var(--marke),transparent);
}
.marke-kapitel .titel{font-size:var(--t-12);letter-spacing:.16em;text-transform:uppercase;
font-family:"Space Grotesk",monospace}
.glas{
position:relative;
background:var(--glas);
border:1px solid var(--rand-glas);
border-radius:var(--rad-5);
box-shadow:var(--schatten-3);
backdrop-filter:blur(20px) saturate(135%);
-webkit-backdrop-filter:blur(20px) saturate(135%);
}
.glas::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(158deg,rgba(255,255,255,.09),rgba(255,255,255,0) 42%);
}
[data-modus="hell"] .glas::before{
background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(255,255,255,0) 45%);
}
.glas>*{position:relative}
.karte{padding:var(--r5)}
.karte-gross{padding:clamp(1.25rem,3vw,2.25rem)}
@media (hover:hover) and (pointer:fine){
.hebt{transition:transform var(--z-mittel) var(--k-aus),box-shadow var(--z-mittel) var(--k-aus),border-color var(--z-mittel)}
.hebt:hover{transform:translateY(-4px);box-shadow:var(--schatten-4);border-color:var(--rand-glas-stark)}
}
.etikett{
display:inline-flex;align-items:center;gap:.5em;
padding:.34em .8em;border-radius:var(--rad-voll);
font-family:"Space Grotesk",monospace;font-size:var(--t-12);font-weight:500;
letter-spacing:.1em;text-transform:uppercase;
border:1px solid var(--rand-glas);background:var(--glas-hell);color:var(--text-2);
}
.etikett .punkt{width:.42em;height:.42em;border-radius:50%;background:currentColor;flex:none}
.etikett-stimme{color:var(--stimme-text);border-color:color-mix(in oklab,var(--stimme) 34%,transparent);
background:color-mix(in oklab,var(--stimme) 12%,transparent)}
.etikett-schrift{color:var(--schrift-text);border-color:color-mix(in oklab,var(--schrift-f) 34%,transparent);
background:color-mix(in oklab,var(--schrift-f) 12%,transparent)}
.etikett-system{color:var(--system-text);border-color:color-mix(in oklab,var(--system) 34%,transparent);
background:color-mix(in oklab,var(--system) 12%,transparent)}
.etikett-marke{color:var(--marke-text);border-color:color-mix(in oklab,var(--marke) 34%,transparent);
background:color-mix(in oklab,var(--marke) 12%,transparent)}
.etikett-gut{color:var(--gut-400);border-color:color-mix(in oklab,var(--gut-400) 34%,transparent);
background:color-mix(in oklab,var(--gut-400) 12%,transparent)}
.knopf{
--kf:var(--marke);
position:relative;display:inline-flex;align-items:center;justify-content:center;
gap:.6em;padding:.95em 1.6em;border-radius:var(--rad-voll);
font-size:var(--t-16);font-weight:520;letter-spacing:-.005em;
text-decoration:none;white-space:nowrap;
transition:transform var(--z-schnell) var(--k-aus),box-shadow var(--z-mittel) var(--k-aus),
background-color var(--z-mittel),border-color var(--z-mittel),color var(--z-mittel);
will-change:transform;
}
.knopf-voll{
background:var(--kf);color:var(--auf-marke);
box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 30px color-mix(in oklab,var(--kf) 32%,transparent);
}
.knopf-voll:hover{box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 16px 44px color-mix(in oklab,var(--kf) 44%,transparent)}
.knopf-rand{border:1px solid var(--rand-glas-stark);color:var(--text);background:var(--glas-hell)}
.knopf-rand:hover{border-color:var(--marke);background:color-mix(in oklab,var(--marke) 10%,transparent)}
.knopf-leise{color:var(--text-2);padding:.7em 1em}
.knopf-leise:hover{color:var(--text)}
.knopf-gross{padding:1.15em 2.1em;font-size:var(--t-18)}
.knopf:active{transform:scale(.975)}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.knopf-stimme{--kf:var(--stimme)}
.knopf-schrift{--kf:var(--schrift-f)}
.chip{
padding:.5em 1em;border-radius:var(--rad-voll);border:1px solid var(--rand-glas);
background:var(--glas-hell);color:var(--text-2);font-size:var(--t-14);
transition:all var(--z-schnell) var(--k-weich);
}
.chip:hover{color:var(--text);border-color:var(--rand-glas-stark)}
.chip[aria-pressed="true"],.chip[aria-selected="true"]{
background:var(--marke);color:var(--auf-marke);border-color:transparent;font-weight:500;
}
.kopf{
position:fixed;inset:0 0 auto 0;z-index:60;
transition:background-color var(--z-ruhig),backdrop-filter var(--z-ruhig),border-color var(--z-ruhig);
border-bottom:1px solid transparent;
}
.kopf[data-fest="ja"]{
background:color-mix(in oklab,var(--bg) 78%,transparent);
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
border-bottom-color:var(--rand-glas);
}
.kopf-innen{
max-width:var(--breite-weit);margin-inline:auto;padding:var(--r3) var(--rand);
display:flex;align-items:center;gap:var(--r5);
}
.zeichen{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:600;letter-spacing:-.02em}
.zeichen .glyph{
width:1.85rem;height:1.85rem;border-radius:.6rem;flex:none;position:relative;
background:conic-gradient(from 210deg,var(--blau-500),var(--violett-400),var(--magenta-400),var(--blau-500));
box-shadow:0 0 22px rgba(var(--licht-b),.35);
}
.zeichen .glyph::after{
content:"";position:absolute;inset:5px;border-radius:.3rem;background:var(--bg);
}
.kopf-nav{display:none;gap:var(--r2);margin-left:auto;align-items:center}
.kopf-nav a{
text-decoration:none;font-size:var(--t-14);color:var(--text-2);padding:.5em .8em;
white-space:nowrap;
border-radius:var(--rad-voll);transition:color var(--z-schnell),background-color var(--z-schnell);
}
.kopf-nav a:hover{color:var(--text);background:var(--glas-hell)}
.kopf-innen{flex-wrap:wrap}
.kopf-tat{margin-left:auto;display:flex;align-items:center;gap:var(--r2);min-width:0;
flex-wrap:wrap;justify-content:flex-end}
.kopf-tat .knopf{padding:.7em 1.15em;font-size:var(--t-14)}
.nur-weit{display:none}
@media (min-width:34rem){
.nur-eng{display:none}
.nur-weit{display:inline}
.kopf-tat .knopf{padding:.85em 1.4em;font-size:var(--t-16)}
}
@media (max-width:34rem){
#modus{padding:.5em .7em; font-size:var(--t-13,.82rem)}
#modus .modus-text{display:inline}
}
@media (min-width:72rem){
.kopf-nav{display:flex}
.kopf-tat{margin-left:0}
}
@media (min-width:72rem) and (max-width:80rem){
.kopf-innen{gap:var(--r3)}
.kopf-nav{gap:0}
.kopf-nav a{padding:.5em .55em}
}
.fortschritt{
position:fixed;top:0;left:0;height:2px;z-index:61;width:100%;
transform-origin:0 50%;transform:scaleX(0);
background:linear-gradient(90deg,var(--blau-500),var(--violett-400),var(--magenta-400));
box-shadow:0 0 14px rgba(var(--licht-b),.5);
}
.sprung{
position:absolute;left:var(--rand);top:.5rem;z-index:80;
transform:translateY(-160%);transition:transform var(--z-mittel) var(--k-aus);
background:var(--marke);color:var(--auf-marke);padding:.7em 1.2em;border-radius:var(--rad-voll);
text-decoration:none;font-weight:520;
}
.sprung:focus{transform:translateY(0)}
.fuss{border-top:1px solid var(--rand-glas);padding-block:var(--r8) var(--r6);color:var(--text-3)}
.fuss a{text-decoration:none;color:var(--text-2)}
.fuss a:hover{color:var(--text);text-decoration:underline;text-underline-offset:.25em}
.fuss-gitter{display:grid;gap:var(--r6);grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss .fuss-titel{font-size:var(--t-13);letter-spacing:.14em;text-transform:uppercase;
font-family:"Space Grotesk",monospace;color:var(--text-3);font-weight:500;margin-bottom:var(--r3)}
.fuss li+li{margin-top:.55rem}
.fuss-unten{
margin-top:var(--r7);padding-top:var(--r5);border-top:1px solid var(--rand-glas);
display:flex;flex-wrap:wrap;gap:var(--r4);justify-content:space-between;font-size:var(--t-13);
}
.nur-vorlesen{
position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
hr.linie{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--rand-glas) 18%,var(--rand-glas) 82%,transparent);margin:0}
.kein-umbruch{white-space:nowrap}
.buehne{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.buehne-feld{position:absolute;inset:-20%;filter:blur(0px)}
.buehne-feld::before,.buehne-feld::after,.buehne-feld i{
content:"";position:absolute;border-radius:50%;
filter:blur(70px);opacity:var(--licht-mittel);
will-change:transform;
}
.buehne-feld::before{
width:62vmax;height:62vmax;left:-14vmax;top:-16vmax;
background:radial-gradient(circle at 50% 50%,rgba(var(--licht-a),.85),transparent 68%);
animation:treiben-a 34s var(--k-weich) infinite alternate;
}
.buehne-feld::after{
width:54vmax;height:54vmax;right:-12vmax;top:8vmax;
background:radial-gradient(circle at 50% 50%,rgba(var(--licht-c),.8),transparent 68%);
animation:treiben-b 42s var(--k-weich) infinite alternate;
}
.buehne-feld i{
display:block;width:70vmax;height:70vmax;left:22vmax;bottom:-34vmax;
background:radial-gradient(circle at 50% 50%,rgba(var(--licht-b),.75),transparent 66%);
animation:treiben-c 50s var(--k-weich) infinite alternate;
}
@keyframes treiben-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,6vh,0) scale(1.16)}}
@keyframes treiben-b{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-8vw,9vh,0) scale(1)}}
@keyframes treiben-c{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-11vw,-7vh,0) scale(1.2)}}
.strahl{
position:absolute;top:-30vh;left:50%;width:120vmax;height:150vh;
transform:translateX(-50%) rotate(14deg);transform-origin:50% 0;
background:
linear-gradient(96deg,transparent 42%,rgba(var(--licht-b),.10) 47%,rgba(255,255,255,.05) 50%,rgba(var(--licht-c),.09) 53%,transparent 58%);
filter:blur(26px);opacity:.9;mix-blend-mode:screen;
animation:strahl-wandern 26s ease-in-out infinite alternate;
}
[data-modus="hell"] .strahl{mix-blend-mode:multiply;opacity:.5}
@keyframes strahl-wandern{from{transform:translateX(-52%) rotate(11deg)}to{transform:translateX(-46%) rotate(18deg)}}
.korn{
position:absolute;inset:0;opacity:.035;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.partikel{position:absolute;inset:0;width:100%;height:100%}
.vignette{
position:absolute;inset:0;
background:radial-gradient(120% 90% at 50% 42%,transparent 40%,color-mix(in oklab,var(--bg-tief) 80%,transparent) 100%);
}
.inhalt{position:relative;z-index:1}
.js .zeig{opacity:0;transform:translate3d(0,26px,0);
transition:opacity .85s var(--k-aus),transform .85s var(--k-aus);will-change:transform,opacity}
.js .zeig.da{opacity:1;transform:none}
.js .zeig-links{transform:translate3d(-34px,0,0)}
.js .zeig-rechts{transform:translate3d(34px,0,0)}
.js .zeig-nah{transform:scale(.955);opacity:0}
.js .zeig-nah.da{transform:none}
.zeig[data-verzug="1"]{transition-delay:.09s}
.zeig[data-verzug="2"]{transition-delay:.18s}
.zeig[data-verzug="3"]{transition-delay:.27s}
.zeig[data-verzug="4"]{transition-delay:.36s}
.zeig[data-verzug="5"]{transition-delay:.45s}
.zeig[data-verzug="6"]{transition-delay:.54s}
.aufzieh span{display:inline-block;overflow:hidden;vertical-align:top}
.aufzieh span>i{display:inline-block;font-style:normal}
.js .aufzieh span>i{
transform:translateY(105%);
transition:transform 1.05s var(--k-aus);
}
.js .aufzieh.da span>i{transform:none}
.aufzieh.da span:nth-child(2)>i{transition-delay:.1s}
.aufzieh.da span:nth-child(3)>i{transition-delay:.2s}
.aufzieh.da span:nth-child(4)>i{transition-delay:.3s}
.figur{
--gr:8rem; --licht:var(--licht-b);
position:relative;width:var(--gr);aspect-ratio:1;flex:none;isolation:isolate;
}
.figur-scheibe{
position:absolute;inset:0;border-radius:50%;overflow:hidden;
background:radial-gradient(circle at 50% 34%,#fff,#eef2f8 78%,#dfe6f0 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.16),0 14px 40px rgba(0,0,0,.45);
}
.figur img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .17s var(--k-weich);
}
.figur img.an{opacity:1;transition:opacity .3s var(--k-weich) .15s}
.figur::after{
content:"";position:absolute;inset:-14%;border-radius:50%;z-index:-1;
background:radial-gradient(circle at 50% 50%,rgba(var(--licht),.42),transparent 66%);
filter:blur(14px);opacity:.9;
}
.figur-ring{
position:absolute;inset:-5%;border-radius:50%;
border:1px solid color-mix(in oklab,rgb(var(--licht)) 46%,transparent);
opacity:.75;
}
.figur-atmet{animation:atmen 5.4s ease-in-out infinite}
@keyframes atmen{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-.28%) scale(1.008)}
}
.figur[data-person="carlos"]{--licht:var(--carlos-licht)}
.figur[data-person="carmen"]{--licht:var(--carmen-licht)}
.figur-xs{--gr:2.75rem}
.figur-s{--gr:4rem}
.figur-m{--gr:6rem}
.figur-l{--gr:9rem}
.figur-xl{--gr:min(15rem,38vw)}
.figur-schild{display:flex;align-items:center;gap:var(--r3);min-width:0}
.figur-schild>div{min-width:0}
.figur-schild .name{font-weight:560;letter-spacing:-.015em;line-height:1.15}
.figur-schild .posten{font-size:var(--t-13);color:var(--text-3);display:block;font-weight:350}
.buehnen-figur{
--licht:var(--licht-b);
position:relative;width:min(30rem,86vw);aspect-ratio:356/580;
filter:drop-shadow(0 40px 70px rgba(0,0,0,.55));
}
.buehnen-figur img{
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;
opacity:0;transition:opacity .19s var(--k-weich);
}
.buehnen-figur img.an{opacity:1;transition:opacity .34s var(--k-weich) .17s}
.buehnen-figur::before{
content:"";position:absolute;left:50%;top:6%;width:78%;aspect-ratio:1;
transform:translateX(-50%);border-radius:50%;z-index:-1;
background:radial-gradient(circle at 50% 45%,rgba(var(--licht),.5),transparent 64%);
filter:blur(30px);
}
.buehnen-figur[data-person="carlos"]{--licht:var(--carlos-licht)}
.buehnen-figur[data-person="carmen"]{--licht:var(--carmen-licht)}
.lebt{animation:leben 6.2s ease-in-out infinite;transform-origin:50% 92%}
@keyframes leben{
0%,100%{transform:translateY(0) scale(1) rotate(0deg)}
38%{transform:translateY(-.55%) scale(1.006) rotate(.12deg)}
70%{transform:translateY(-.2%) scale(1.003) rotate(-.1deg)}
}
.blickt{transition:transform .5s var(--k-weich)}
.ansage{
position:relative;max-width:34rem;padding:var(--r4) var(--r5);
border-radius:var(--rad-5) var(--rad-5) var(--rad-5) var(--rad-2);
background:var(--glas);border:1px solid var(--rand-glas);
backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
box-shadow:var(--schatten-3);
font-size:var(--t-21);line-height:1.42;letter-spacing:-.01em;
}
.ansage[hidden]{display:none}
.ansage .wer{
display:block;font-family:"Space Grotesk",monospace;font-size:var(--t-11);
letter-spacing:.18em;text-transform:uppercase;margin-bottom:.5em;
}
.ansage-stimme{box-shadow:var(--schein-stimme),var(--schatten-3)}
.ansage-stimme .wer{color:var(--stimme-text)}
.ansage-schrift{box-shadow:var(--schein-schrift),var(--schatten-3)}
.ansage-schrift .wer{color:var(--schrift-text)}
.tippt::after{
content:"";display:inline-block;width:.09em;height:1.05em;margin-left:.08em;
background:currentColor;vertical-align:-.16em;animation:balken 1.05s steps(2,start) infinite;
}
@keyframes balken{0%,49%{opacity:1}50%,100%{opacity:0}}
.welle{display:flex;align-items:center;gap:3px;height:2.75rem}
.welle span{
flex:1 1 0;min-width:3px;max-width:6px;border-radius:var(--rad-voll);
background:linear-gradient(180deg,var(--stimme),color-mix(in oklab,var(--stimme) 45%,transparent));
height:18%;transform-origin:50% 50%;
transition:height .09s linear;
}
.welle-schrift span{background:linear-gradient(180deg,var(--schrift-f),color-mix(in oklab,var(--schrift-f) 45%,transparent))}
.denkt-punkte{display:inline-flex;gap:.28em;align-items:center}
.denkt-punkte i{width:.4em;height:.4em;border-radius:50%;background:currentColor;opacity:.35;
animation:denken 1.25s ease-in-out infinite}
.denkt-punkte i:nth-child(2){animation-delay:.16s}
.denkt-punkte i:nth-child(3){animation-delay:.32s}
@keyframes denken{0%,100%{opacity:.28;transform:translateY(0)}45%{opacity:1;transform:translateY(-.22em)}}
.klingelt{position:relative}
.klingelt::before,.klingelt::after{
content:"";position:absolute;inset:0;border-radius:50%;
border:1px solid var(--stimme);opacity:0;
animation:klingeln 2.3s var(--k-weich) infinite;
}
.klingelt::after{animation-delay:.8s}
@keyframes klingeln{
0%{transform:scale(1);opacity:.7}
100%{transform:scale(1.85);opacity:0}
}
.schwebt{animation:schweben 9s ease-in-out infinite;will-change:transform}
.schwebt-2{animation-duration:11.5s;animation-delay:-2.4s}
.schwebt-3{animation-duration:13s;animation-delay:-5.1s}
@keyframes schweben{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-11px,0)}
}
.magnet{will-change:transform}
[data-parallaxe]{will-change:transform}
.spot{position:relative;overflow:hidden}
.spot::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
transition:opacity var(--z-mittel);
background:radial-gradient(18rem 18rem at var(--mx,50%) var(--my,50%),
color-mix(in oklab,var(--marke) 16%,transparent),transparent 70%);
}
@media (hover:hover) and (pointer:fine){.spot:hover::after{opacity:1}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important;
}
.zeig{opacity:1!important;transform:none!important}
.aufzieh span>i{transform:none!important}
.partikel,.strahl,.korn{display:none}
.figur img.an,.buehnen-figur img.an{opacity:1}
}
.start{
min-height:100svh;display:grid;align-items:center;
padding-block:clamp(6rem,14vh,9rem) clamp(3rem,8vh,6rem);
}
.start-gitter{
display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
grid-template-columns:1fr;
}
@media (min-width:60rem){
.start-gitter{grid-template-columns:minmax(0,1fr) minmax(0,1.14fr)}
}
@media (max-width:60rem){
.start{padding-block:clamp(4.5rem,10vh,7rem) clamp(2rem,6vh,4rem)}
.start-buehne{order:-1}
.start-figuren .buehnen-figur{width:min(15rem,52vw)}
.start-figuren .zweite{width:min(11rem,38vw);right:-3%}
.start-figuren.beide .erste{transform:translateX(-15%) scale(.94)}
.start-ansage{max-width:min(28rem,92vw);min-height:13rem}
.start h1{font-size:var(--t-54)}
.start .fuehrung{font-size:var(--t-18)}
.weiter{display:none}
}
.start h1{font-size:var(--t-72);margin-bottom:var(--r5)}
.start .fuehrung{max-width:31rem;font-size:var(--t-21)}
.start-tat{display:flex;flex-wrap:wrap;gap:var(--r3);margin-top:var(--r5);align-items:center}
.start-belege{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r4) var(--r5);
margin-top:var(--r6);padding-top:var(--r5);border-top:1px solid var(--rand-glas);
}
@media (min-width:34rem){.start-belege{grid-template-columns:repeat(4,minmax(0,1fr))}}
.start-belege div{min-width:0}
.start-belege .wert{font-size:var(--t-26);font-weight:600;letter-spacing:-.03em;line-height:1;
font-family:"Space Grotesk",monospace;font-variant-numeric:tabular-nums}
.start-belege .was{font-size:var(--t-13);color:var(--text-3);margin-top:.35rem;display:block}
.start-buehne{position:relative;display:grid;grid-template-rows:auto auto;
align-content:center;justify-items:center;gap:var(--r4)}
.start-figuren{position:relative;display:flex;align-items:flex-end;justify-content:center;
width:100%;padding-inline:clamp(1rem,10vw,8.5rem)}
.start-figuren .buehnen-figur{width:min(17.5rem,62vw)}
.start-figuren .zweite{
position:absolute;right:0;bottom:-3%;width:min(10rem,30vw);
opacity:0;transform:translateX(24px) scale(.94);
transition:opacity 1s var(--k-aus),transform 1s var(--k-aus);
}
.start-figuren.beide .zweite{opacity:1;transform:none}
.start-figuren.beide .erste{transform:translateX(-6%) scale(.97);transition:transform 1s var(--k-aus)}
.start-ansage{position:relative;z-index:3;max-width:30rem;text-align:left;
min-height:11.5rem;display:flex;flex-direction:column;justify-content:flex-start}
.umlauf{position:absolute;inset:0;pointer-events:none}
.umlauf .plakette{
position:absolute;pointer-events:auto;z-index:2;
display:flex;align-items:center;gap:.8rem;
width:13.25rem;padding:.9rem 1rem;
border-radius:1.05rem;
background:var(--glas);border:1px solid var(--rand-glas);
backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 44px rgba(0,0,0,.42);
}
.umlauf .plakette::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,0) 46%);
}
.umlauf .p-zeichen{
position:relative;flex:none;width:2.15rem;height:2.15rem;border-radius:.72rem;
display:grid;place-items:center;color:var(--akz);
background:color-mix(in oklab,var(--akz) 15%,transparent);
box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--akz) 26%,transparent);
}
.umlauf .p-zeichen svg{width:1.15rem;height:1.15rem}
.umlauf .p-feld{position:relative;display:flex;flex-direction:column;min-width:0;gap:.1rem}
.umlauf .p-titel{
font-family:"Space Grotesk",monospace;font-size:.6875rem;font-weight:500;
letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);line-height:1.2;
}
.umlauf .plakette b{
font-size:.9375rem;font-weight:560;letter-spacing:-.012em;line-height:1.25;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.umlauf .p-zusatz{font-size:.75rem;line-height:1.3;color:var(--text-3)}
.umlauf .welle{height:1.15rem;margin-block:.12rem}
.umlauf .punkt-live{position:absolute;top:.7rem;right:.75rem}
.umlauf [data-rolle="stimme"]{--akz:var(--stimme)}
.umlauf [data-rolle="schrift"]{--akz:var(--schrift-f)}
.umlauf [data-rolle="system"]{--akz:var(--system)}
.umlauf .p-anruf  {left:0;  top:6%}
.umlauf .p-wissen {left:0;  top:38%}
.umlauf .p-api    {left:0;  top:70%}
.umlauf .p-welle  {right:0; top:6%}
.umlauf .p-crm    {right:0; top:26%}
@media (max-width:90rem){
.umlauf .plakette{width:11.75rem;padding:.8rem .9rem;gap:.65rem}
.umlauf .p-zeichen{width:1.95rem;height:1.95rem}
.umlauf .plakette b{font-size:.875rem}
.start-figuren .buehnen-figur{width:min(15.5rem,58vw)}
.start-figuren .zweite{width:min(9rem,28vw)}
}
@media (max-width:78rem){
.umlauf{display:none}
}
.punkt-live{width:.5rem;height:.5rem;border-radius:50%;background:var(--gut-400);flex:none;
box-shadow:0 0 0 0 color-mix(in oklab,var(--gut-400) 60%,transparent);animation:leuchtpuls 2s ease-out infinite}
@keyframes leuchtpuls{
0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--gut-400) 55%,transparent)}
70%{box-shadow:0 0 0 .5rem transparent}
100%{box-shadow:0 0 0 0 transparent}
}
.weiter{
position:absolute;left:50%;bottom:1.25rem;translate:-50% 0;
display:flex;flex-direction:column;align-items:center;gap:.6rem;
color:var(--text-3);font-size:var(--t-12);letter-spacing:.16em;text-transform:uppercase;
font-family:"Space Grotesk",monospace;
}
.weiter .maus{width:1px;height:2.6rem;background:linear-gradient(180deg,var(--text-3),transparent);
animation:rutsch 2.4s ease-in-out infinite}
@keyframes rutsch{0%,100%{transform:scaleY(.4);transform-origin:50% 0}50%{transform:scaleY(1);transform-origin:50% 0}}
.warum-zahlen{display:grid;gap:var(--r5);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.zahlkarte{padding:var(--r6) var(--r5)}
.zahlkarte .wert{
font-size:var(--t-72);font-weight:600;letter-spacing:-.045em;line-height:.95;
font-family:"Space Grotesk",monospace;font-variant-numeric:tabular-nums;
}
.zahlkarte .einheit{font-size:.42em;font-weight:500;margin-left:.08em;letter-spacing:-.02em}
.zahlkarte p{margin-top:var(--r3);color:var(--text-2);font-size:var(--t-16)}
.zahlkarte .quelle{margin-top:var(--r3);font-size:var(--t-12);color:var(--text-3)}
.zahlkarte-a .wert{color:var(--stimme-text)}
.zahlkarte-b .wert{color:var(--schrift-text)}
.zahlkarte-c .wert{color:var(--system-text)}
.tagesbalken{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;align-items:end;height:9rem;margin-top:var(--r5)}
.tagesbalken .stunde{position:relative;border-radius:3px 3px 0 0;background:var(--rand-glas);
transition:height .9s var(--k-aus),background-color .3s}
.tagesbalken .stunde[data-zu="ja"]{background:linear-gradient(180deg,var(--stimme),color-mix(in oklab,var(--stimme) 30%,transparent))}
.tagesbalken .stunde:hover{background:var(--text)}
.tagesachse{display:flex;justify-content:space-between;margin-top:.5rem;font-size:var(--t-12);color:var(--text-3);
font-family:"Space Grotesk",monospace}
.szene{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--r6);align-items:start}
@media (min-width:64rem){
.szene{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:var(--r8)}
.szene-gedreht{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.szene-gedreht .szene-text{order:2}
}
.szene-text{position:sticky;top:6.5rem}
@media (max-width:64rem){.szene-text{position:static}}
.geraet{
position:relative;border-radius:var(--rad-6);overflow:hidden;
background:linear-gradient(180deg,color-mix(in oklab,var(--flaeche) 92%,transparent),var(--bg-tief));
border:1px solid var(--rand-glas);box-shadow:var(--schatten-4);
}
.geraet-leiste{
display:flex;align-items:center;gap:var(--r3);padding:var(--r3) var(--r4);
border-bottom:1px solid var(--rand-glas);background:var(--glas-hell);
font-family:"Space Grotesk",monospace;font-size:var(--t-12);letter-spacing:.1em;
text-transform:uppercase;color:var(--text-3);
}
.geraet-leiste .lampen{display:flex;gap:.35rem;margin-right:.35rem}
.geraet-leiste .lampen i{width:.5rem;height:.5rem;border-radius:50%;background:var(--rand-glas-stark)}
.geraet-koerper{padding:clamp(1rem,2.4vw,1.75rem)}
.geraet-fuss{
display:flex;flex-wrap:wrap;gap:var(--r3);align-items:center;justify-content:space-between;
padding:var(--r3) var(--r4);border-top:1px solid var(--rand-glas);background:var(--glas-hell);
font-size:var(--t-13);color:var(--text-3);
}
.zug{display:flex;gap:var(--r3);align-items:flex-start;opacity:0;transform:translateY(12px);
transition:opacity .5s var(--k-aus),transform .5s var(--k-aus)}
.zug.da{opacity:1;transform:none}
.zug+.zug{margin-top:var(--r4)}
.zug .blase{
padding:.7rem 1rem;border-radius:var(--rad-4);background:var(--glas-hell);
border:1px solid var(--rand-glas);max-width:34rem;font-size:var(--t-16);line-height:1.5;
}
.zug .zeit{font-family:"Space Grotesk",monospace;font-size:var(--t-11);color:var(--text-3);
letter-spacing:.08em;margin-top:.4rem;display:block}
.zug-kunde .blase{background:color-mix(in oklab,var(--n-0) 7%,transparent)}
.zug-carmen .blase{border-color:color-mix(in oklab,var(--carmen) 30%,transparent);
background:color-mix(in oklab,var(--carmen) 9%,transparent)}
.zug-carlos .blase{border-color:color-mix(in oklab,var(--carlos) 30%,transparent);
background:color-mix(in oklab,var(--carlos) 9%,transparent)}
.zug-rechts{flex-direction:row-reverse}
.zug-rechts .zeit{text-align:right}
.systemzeile{
display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;margin-top:var(--r3);
border-radius:var(--rad-3);border:1px dashed color-mix(in oklab,var(--system) 34%,transparent);
background:color-mix(in oklab,var(--system) 7%,transparent);
font-family:"Space Grotesk",monospace;font-size:var(--t-12);color:var(--system-text);
letter-spacing:.04em;opacity:0;transform:translateY(8px);
transition:opacity .45s var(--k-aus),transform .45s var(--k-aus);
}
.systemzeile.da{opacity:1;transform:none}
.systemzeile .haken{color:var(--gut-400)}
.systemzeile b{color:var(--text);font-weight:520}
.ablauf{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--r4)}
.ablauf .schritt{
display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;
border-radius:var(--rad-voll);border:1px solid var(--rand-glas);
font-size:var(--t-12);color:var(--text-3);font-family:"Space Grotesk",monospace;
letter-spacing:.06em;transition:all var(--z-mittel) var(--k-weich);
}
.ablauf .schritt[data-stand="laeuft"]{border-color:var(--carmen);color:var(--carmen-text);
background:color-mix(in oklab,var(--carmen) 12%,transparent)}
.ablauf .schritt[data-stand="fertig"]{color:var(--gut-400);border-color:color-mix(in oklab,var(--gut-400) 40%,transparent)}
.ablauf .schritt i{font-style:normal}
.merkmale{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--r5)}
@media (min-width:64rem){.merkmale{grid-template-columns:minmax(0,1fr) minmax(0,22rem)}}
.merkmal-liste{display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start}
.merkmal{
display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;
border-radius:var(--rad-voll);border:1px solid var(--rand-glas);background:var(--glas-hell);
font-size:var(--t-14);color:var(--text-2);text-align:left;
transition:all var(--z-schnell) var(--k-weich);
}
.merkmal:hover{color:var(--text);border-color:var(--rand-glas-stark);transform:translateY(-1px)}
.merkmal[aria-pressed="true"]{
color:var(--auf-marke);background:var(--akz,var(--marke));border-color:transparent;font-weight:500;
}
.merkmal .nr{font-family:"Space Grotesk",monospace;font-size:var(--t-11);opacity:.55}
.merkmal-tafel{align-self:start;position:sticky;top:6.5rem;min-height:16rem}
@media (max-width:64rem){.merkmal-tafel{position:static}}
.merkmal-tafel h4{margin-bottom:var(--r3)}
.merkmal-tafel .beispiel{
margin-top:var(--r4);padding-top:var(--r4);border-top:1px solid var(--rand-glas);
font-size:var(--t-14);color:var(--text-2);
}
.merkmal-tafel .beispiel .wer{
display:block;font-family:"Space Grotesk",monospace;font-size:var(--t-11);
letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:.3rem;
}
.netz{position:relative;aspect-ratio:1/1;max-width:44rem;margin-inline:auto;width:100%}
.netz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.netz-linie{fill:none;stroke:var(--rand-glas-stark);stroke-width:1;
stroke-dasharray:4 6;opacity:.5;transition:stroke .3s,opacity .3s}
.netz-puls{fill:none;stroke:var(--system);stroke-width:1.6;stroke-linecap:round;
stroke-dasharray:14 300;opacity:.9;filter:drop-shadow(0 0 6px rgba(var(--licht-b),.6))}
.netz-knoten{
position:absolute;translate:-50% -50%;
display:flex;align-items:center;gap:.45rem;padding:.5rem .8rem;
border-radius:var(--rad-voll);background:var(--glas);border:1px solid var(--rand-glas);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
font-size:var(--t-13);white-space:nowrap;box-shadow:var(--schatten-2);
transition:all var(--z-mittel) var(--k-aus);cursor:default;
}
.netz-knoten:hover,.netz-knoten[data-an="ja"]{
border-color:var(--system);color:var(--text);box-shadow:var(--schein-system),var(--schatten-3);
scale:1.07;
}
.netz-knoten .fleck{width:.45rem;height:.45rem;border-radius:50%;background:var(--system);flex:none;opacity:.8}
.netz-mitte{
position:absolute;left:50%;top:50%;translate:-50% -50%;
display:flex;align-items:center;
}
.netz-mitte .figur{margin-inline:-.9rem}
@media (max-width:64rem){
.netz{aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
max-width:34rem}
.netz svg{display:none}
.netz-mitte{position:static;translate:none;width:100%;justify-content:center;
margin-bottom:var(--r5)}
.netz-knoten{position:static;translate:none;font-size:var(--t-12);padding:.45rem .7rem}
}
.reise{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--r6)}
@media (min-width:64rem){.reise{grid-template-columns:minmax(0,1fr) minmax(0,20rem);align-items:start}}
.reise-bahn{position:relative;padding-left:2.6rem}
.reise-bahn::before{
content:"";position:absolute;left:.85rem;top:.6rem;bottom:.6rem;width:1px;
background:linear-gradient(180deg,var(--rand-glas),var(--gut-400));opacity:.55;
}
.reise-schritt{position:relative;padding-block:.7rem}
.reise-schritt::before{
content:"";position:absolute;left:-2.6rem;top:1.1rem;width:1.7rem;height:1.7rem;
border-radius:50%;border:1px solid var(--rand-glas);background:var(--bg);
transform:translateX(.85rem) translateX(-50%);
transition:all var(--z-mittel) var(--k-aus);
}
.reise-schritt::after{
content:"";position:absolute;left:-2.6rem;top:1.1rem;width:1.7rem;height:1.7rem;
transform:translateX(.85rem) translateX(-50%);
display:grid;place-items:center;font-size:.7rem;color:var(--tinte);
}
.reise-schritt[data-stand="da"]::before{background:var(--gut-400);border-color:var(--gut-400)}
.reise-schritt[data-stand="da"]::after{content:"✓";font-weight:700}
.reise-schritt[data-stand="laeuft"]::before{
border-color:var(--gut-400);box-shadow:0 0 0 4px color-mix(in oklab,var(--gut-400) 18%,transparent);
}
.reise-schritt h4{font-size:var(--t-18);letter-spacing:-.01em}
.reise-schritt p{font-size:var(--t-14);color:var(--text-3);margin-top:.2rem}
.reise-schritt .system{
display:inline-block;margin-top:.45rem;font-family:"Space Grotesk",monospace;
font-size:var(--t-11);letter-spacing:.08em;color:var(--system-text);
padding:.2rem .5rem;border-radius:var(--rad-2);
background:color-mix(in oklab,var(--system) 10%,transparent);
}
.handy{
width:min(19rem,80vw);margin-inline:auto;border-radius:2.2rem;padding:.55rem;
background:linear-gradient(160deg,#1a2338,#0a1020);
border:1px solid var(--rand-glas-stark);box-shadow:var(--schatten-4);
}
.handy-schirm{
border-radius:1.75rem;overflow:hidden;background:#0b1220;min-height:24rem;
display:flex;flex-direction:column;
}
.handy-kopf{
display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;
background:#111c2e;border-bottom:1px solid var(--rand-glas);
}
.handy-kopf .wer{font-size:var(--t-14);font-weight:520;line-height:1.15}
.handy-kopf .wer small{display:block;font-size:var(--t-11);color:var(--gut-400);font-weight:400}
.handy-verlauf{flex:1;padding:.85rem;display:flex;flex-direction:column;gap:.5rem;overflow:hidden}
.wa{
max-width:84%;padding:.55rem .75rem;border-radius:.9rem;font-size:var(--t-14);line-height:1.42;
opacity:0;transform:translateY(10px);transition:all .45s var(--k-aus);
}
.wa.da{opacity:1;transform:none}
.wa-aus{align-self:flex-end;background:#0e5c4a;border-bottom-right-radius:.25rem}
.wa-ein{align-self:flex-start;background:#1b2740;border-bottom-left-radius:.25rem}
.wa .zeit{display:block;font-size:.62rem;color:rgba(255,255,255,.5);text-align:right;margin-top:.2rem}
.wa-knoepfe{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.wa-knoepfe span{
padding:.3rem .55rem;border-radius:var(--rad-voll);font-size:.72rem;
border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);
}
.leitstand{display:grid;gap:var(--r4);grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}
.kachel{padding:var(--r5);display:flex;flex-direction:column;gap:var(--r3);min-height:9.5rem}
.kachel .titel{font-family:"Space Grotesk",monospace;font-size:var(--t-11);letter-spacing:.14em;
text-transform:uppercase;color:var(--text-3)}
.kachel .wert{font-size:var(--t-42);font-weight:600;letter-spacing:-.04em;line-height:1;
font-family:"Space Grotesk",monospace;font-variant-numeric:tabular-nums}
.kachel .zusatz{font-size:var(--t-13);color:var(--text-3);margin-top:auto}
.kachel .trend{font-size:var(--t-13);color:var(--gut-400);font-variant-numeric:tabular-nums}
.kachel-breit{grid-column:span 2}
@media (max-width:52rem){.kachel-breit{grid-column:auto}}
.funke{width:100%;flex:1 1 auto;min-height:3rem;max-height:7rem;overflow:visible}
.funke path{fill:none;stroke:var(--system);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.funke .flaeche{fill:color-mix(in oklab,var(--system) 14%,transparent);stroke:none}
.balkenreihe{display:flex;flex-direction:column;gap:.55rem}
.balkenreihe .zeile{display:grid;grid-template-columns:6.5rem 1fr auto;gap:.6rem;align-items:center;font-size:var(--t-13)}
.balkenreihe .spur{display:block;height:.5rem;border-radius:var(--rad-voll);background:var(--rand-glas);overflow:hidden}
.balkenreihe .fuellung{display:block;height:100%;border-radius:var(--rad-voll);
background:var(--system);transition:width 1.2s var(--k-aus)}
.balkenreihe .zahl{color:var(--text-3);font-variant-numeric:tabular-nums;font-family:"Space Grotesk",monospace}
.gespraechsliste{display:flex;flex-direction:column;gap:.55rem}
.gespraechszeile{
display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;
padding:.6rem .75rem;border-radius:var(--rad-3);border:1px solid var(--rand-glas);
background:var(--glas-hell);font-size:var(--t-13);
}
.gespraechszeile .kanal{font-family:"Space Grotesk",monospace;font-size:var(--t-11);
letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.gespraechszeile .dauer{font-variant-numeric:tabular-nums;color:var(--text-3);font-family:"Space Grotesk",monospace}
.kette{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch;justify-content:center}
.kette-glied{
display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border-radius:var(--rad-4);
border:1px solid var(--rand-glas);background:var(--glas-hell);font-size:var(--t-14);
opacity:.45;transition:all var(--z-mittel) var(--k-aus);
}
.kette-glied[data-an="ja"]{opacity:1;border-color:var(--akz,var(--system));
background:color-mix(in oklab,var(--akz,var(--system)) 12%,transparent);
box-shadow:0 0 0 1px color-mix(in oklab,var(--akz,var(--system)) 30%,transparent)}
.kette-glied .sinn{display:block;font-size:var(--t-11);color:var(--text-3);
font-family:"Space Grotesk",monospace;letter-spacing:.08em}
.kette-pfeil{align-self:center;color:var(--text-3);opacity:.5}
.dienstplan{
display:flex;flex-wrap:wrap;gap:var(--r4);align-items:center;justify-content:center;
padding:var(--r4) var(--r5);border-radius:var(--rad-voll);
border:1px solid var(--rand-glas);background:var(--glas-hell);
}
.dienstplan .paar{display:flex;align-items:center;gap:.6rem;font-size:var(--t-14)}
.dienstplan b{font-weight:560}
.branchen{display:grid;gap:var(--r4);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.branche{
position:relative;padding:var(--r5);overflow:hidden;min-height:11.5rem;
display:flex;flex-direction:column;justify-content:space-between;gap:var(--r4);
}
.branche h4{font-size:var(--t-21);letter-spacing:-.015em}
.branche p{font-size:var(--t-14);color:var(--text-3)}
.branche .zeichnung{width:3.2rem;height:3.2rem;color:var(--akz,var(--system))}
.branche .zeichnung *{vector-effect:non-scaling-stroke}
.branche-satz{
font-size:var(--t-13);color:var(--text-2);
padding-top:var(--r3);border-top:1px solid var(--rand-glas);
}
.sicher{display:grid;gap:var(--r4);grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.sicher-karte{padding:var(--r5);display:flex;gap:var(--r4);align-items:flex-start}
.sicher-karte .zeichnung{width:1.85rem;height:1.85rem;flex:none;color:var(--system);margin-top:.15rem}
.sicher-karte h4{font-size:var(--t-18);margin-bottom:.35rem}
.sicher-karte p{font-size:var(--t-14);color:var(--text-3)}
.siegel{display:flex;flex-wrap:wrap;gap:var(--r3);justify-content:center;margin-top:var(--r6)}
.vergleich{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--r5)}
@media (min-width:56rem){.vergleich{grid-template-columns:1fr 1fr}}
.spalte{padding:clamp(1.25rem,3vw,2rem)}
.spalte h3{font-size:var(--t-33);margin-bottom:var(--r2)}
.spalte>.fuehrung{font-size:var(--t-16);margin-bottom:var(--r5)}
.spalte ul{display:flex;flex-direction:column;gap:.7rem}
.spalte li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-16)}
.spalte li .mal{color:var(--text-3);flex:none;width:1.1rem;text-align:center}
.spalte li .haken{color:var(--gut-400);flex:none;width:1.1rem;text-align:center}
.spalte-mensch{background:var(--glas-hell)}
.spalte-ki{box-shadow:var(--schein-system),var(--schatten-3);
border-color:color-mix(in oklab,var(--system) 32%,transparent)}
.vergleich-fuss{
margin-top:var(--r6);padding:var(--r5);text-align:center;font-size:var(--t-21);
color:var(--text-2);line-height:1.45;
}
.vergleich-fuss strong{color:var(--text)}
.abschluss{
min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);
align-content:center;justify-items:center;
text-align:center;padding-block:clamp(5rem,12vh,9rem);overflow:clip;
}
.abschluss>.bahn{width:100%}
.abschluss-figuren{
display:flex;align-items:flex-end;justify-content:center;gap:clamp(-2rem,-2vw,0rem);
margin-bottom:var(--r6);
}
.abschluss-figuren .buehnen-figur{width:min(19rem,42vw)}
.abschluss-figuren .buehnen-figur:first-child{margin-right:-3.5rem;z-index:2}
.abschluss h2{font-size:var(--t-96);margin-bottom:var(--r5)}
.abschluss .saetze{display:flex;flex-direction:column;gap:var(--r3);align-items:center;margin-bottom:var(--r7)}
.abschluss .ansage{text-align:left}
.helles-licht{
position:absolute;left:50%;top:38%;width:min(64rem,96vw);aspect-ratio:1;
transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;
background:radial-gradient(circle at 50% 50%,rgba(var(--licht-b),.30),rgba(var(--licht-c),.14) 42%,transparent 70%);
filter:blur(40px);opacity:.9;
}
.abschluss.da .helles-licht{opacity:1}
.band{
border-radius:var(--rad-6);padding:clamp(1.75rem,4vw,3.5rem);text-align:center;
background:
radial-gradient(120% 140% at 50% 0%,color-mix(in oklab,var(--violett-950) 90%,transparent),transparent 70%),
var(--glas);
border:1px solid var(--rand-glas);box-shadow:var(--schatten-4);
}
[data-modus="hell"] .band{
background:radial-gradient(120% 140% at 50% 0%,var(--violett-50),transparent 70%),var(--flaeche);
}
.band h2{font-size:var(--t-54);margin-bottom:var(--r4)}
.band .tat{display:flex;flex-wrap:wrap;gap:var(--r3);justify-content:center;margin-top:var(--r6)}
.band .klein{margin-top:var(--r4);font-size:var(--t-13);color:var(--text-3)}
#anruf-verlauf,#chat-verlauf{min-height:19rem;max-height:min(60vh,26rem);overflow-y:auto;scrollbar-width:thin;
scrollbar-color:var(--rand-glas-stark) transparent;padding-right:.25rem}
#anruf-verlauf::-webkit-scrollbar,#chat-verlauf::-webkit-scrollbar{width:6px}
#anruf-verlauf::-webkit-scrollbar-thumb,#chat-verlauf::-webkit-scrollbar-thumb{
background:var(--rand-glas-stark);border-radius:99px}
.zug .blase .technisch{display:block;margin-bottom:.25rem;letter-spacing:.14em}
@media (max-width:48rem){
.glas,.ansage,.umlauf .plakette,.netz-knoten{
backdrop-filter:none;-webkit-backdrop-filter:none;
background:color-mix(in oklab,var(--flaeche) 92%,var(--bg));
}
[data-modus="hell"] .glas,[data-modus="hell"] .ansage{
background:color-mix(in oklab,var(--flaeche) 96%,var(--bg));
}
.strahl,.korn{display:none}
.buehne-feld::before,.buehne-feld::after,.buehne-feld i{filter:blur(48px)}
}
[data-dienst="carmen-stimme"] .paar-stimme .figur[data-person="carlos"],
[data-dienst="carmen-stimme"] .paar-schrift .figur[data-person="carmen"],
[data-dienst="carmen-stimme"] .wenn-b,
[data-dienst="carlos-stimme"] .paar-stimme .figur[data-person="carmen"],
[data-dienst="carlos-stimme"] .paar-schrift .figur[data-person="carlos"],
[data-dienst="carlos-stimme"] .wenn-a{display:none}
.dienstplan .paar .figur{transition:none}
.fragen{display:flex;flex-direction:column;gap:.75rem;margin-inline:auto}
.frage{padding:0;overflow:hidden}
.frage summary{
display:flex;align-items:center;gap:var(--r4);justify-content:space-between;
padding:clamp(1rem,2.4vw,1.35rem) clamp(1.1rem,2.6vw,1.6rem);
cursor:pointer;list-style:none;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary h3{margin:0;font-size:var(--t-21);letter-spacing:-.014em}
.frage summary:hover h3{color:var(--marke-text)}
.frage .pfeil{
flex:none;width:1.6rem;height:1.6rem;border-radius:50%;position:relative;
border:1px solid var(--rand-glas);transition:all var(--z-mittel) var(--k-aus);
}
.frage .pfeil::before,.frage .pfeil::after{
content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
background:var(--text-2);border-radius:2px;
}
.frage .pfeil::before{width:.7rem;height:1.5px}
.frage .pfeil::after{width:1.5px;height:.7rem;transition:opacity var(--z-mittel)}
.frage[open] .pfeil{border-color:var(--marke);rotate:180deg}
.frage[open] .pfeil::after{opacity:0}
.frage>p{
padding:0 clamp(1.1rem,2.6vw,1.6rem) clamp(1.1rem,2.6vw,1.5rem);
margin:0;color:var(--text-2);max-width:52rem;
}
.frage summary:focus-visible{outline:2px solid var(--marke);outline-offset:-2px;
border-radius:var(--rad-5)}
.merkmal-lang{margin-top:var(--r5)}
.merkmal-lexikon{
display:grid;gap:var(--r4) var(--r6);
grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
padding:0 clamp(1.1rem,2.6vw,1.6rem) clamp(1.2rem,2.6vw,1.6rem);margin:0;
}
.merkmal-lexikon dt{font-size:var(--t-16);font-weight:560;letter-spacing:-.01em;
color:var(--text);margin-bottom:.15rem}
.merkmal-lexikon dt::before{
content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:50%;
background:var(--akz);margin-right:.55rem;vertical-align:.18em;
}
.merkmal-lexikon[data-rolle="stimme"]{--akz:var(--stimme)}
.merkmal-lexikon[data-rolle="schrift"]{--akz:var(--schrift-f)}
.merkmal-lexikon dd{margin:0;font-size:var(--t-14);color:var(--text-3);line-height:1.5}
.plattform{
margin-top:var(--r6);display:grid;gap:var(--r5);align-items:center;
grid-template-columns:minmax(0,1fr);
}
@media (min-width:56rem){
.plattform{grid-template-columns:minmax(0,1fr) auto;gap:var(--r7)}
}
.plattform h3{max-width:34rem}
.plattform p{max-width:46rem;font-size:var(--t-16)}
.plattform-links{display:flex;flex-wrap:wrap;gap:var(--r3)}
@media (min-width:56rem){.plattform-links{flex-direction:column}}
.plattform-links .knopf{justify-content:space-between;min-width:14rem}
.nur-mit-js{display:none}
.js .nur-mit-js{display:inline-flex}
.probe{
margin-top:var(--r6);display:grid;gap:var(--r5);align-items:center;
grid-template-columns:minmax(0,1fr);
}
@media (min-width:60rem){
.probe{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--r6)}
}
.probe-figur{display:flex;justify-content:center}
.probe-text h3{max-width:30rem}
.probe-text p{max-width:44rem;font-size:var(--t-16)}
.probe-tat{display:flex;flex-direction:column;gap:var(--r3);align-items:stretch;min-width:0}
@media (min-width:60rem){.probe-tat{min-width:15rem}}
.probe-tat .knopf{justify-content:center;gap:.7em}
.probe-tat .knopf svg{width:1.15rem;height:1.15rem;flex:none}
.probe-tat .knopf .nummer{
font-family:"Space Grotesk",monospace;font-variant-numeric:tabular-nums;
letter-spacing:-.01em;white-space:nowrap;
}
.probe-zeiten{font-size:var(--t-13);color:var(--text-3);text-align:center;margin:0}
.probe-halter:empty{display:none}
.probe-halter{font-size:var(--t-13);color:var(--text-2);margin-top:var(--r2)}
.probe-stimme{box-shadow:var(--schein-stimme),var(--schatten-3)}
.probe-schrift{box-shadow:var(--schein-schrift),var(--schatten-3)}
.probe [aria-disabled="true"]{cursor:default;opacity:.6}
.start-nebentat{margin-top:var(--r4);font-size:var(--t-14)}
.start-nebentat a{color:var(--text-3);text-decoration:none}
.start-nebentat a:hover{color:var(--text);text-decoration:underline;text-underline-offset:.25em}
.start-tat .knopf svg{width:1.1rem;height:1.1rem;flex:none}
.hinweis-chat{display:flex;gap:.6rem;align-items:flex-start;max-width:42rem}
.hinweis-chat svg{width:1.2rem;height:1.2rem;flex:none;margin-top:.22em;color:var(--carlos)}
.start-nebentat.hinweis-chat{color:var(--text-3);align-items:center}
.start-nebentat.hinweis-chat svg{margin-top:0}
.szene-text h2{font-size:var(--t-54)}
.band-chat{justify-content:center;margin-top:var(--r4);color:var(--text-2);
font-size:var(--t-16);text-align:left}
.band .tat .knopf{gap:.7em}
.band .tat .knopf svg{width:1.15rem;height:1.15rem;flex:none}
.band .tat .knopf .nummer{
font-family:"Space Grotesk",monospace;font-variant-numeric:tabular-nums;
letter-spacing:-.01em;white-space:nowrap;
padding-left:.7em;margin-left:.1em;
border-left:1px solid color-mix(in oklab,currentColor 30%,transparent);
}
.haus{padding-top:0}
.haus .band{text-align:left}
.haus .band .etikett{margin-inline:0}
.haus .band h2{font-size:var(--t-42)}
.haus .band .fuehrung{margin-top:var(--r3)}
.haus .band .tat{justify-content:flex-start;margin-top:var(--r5)}
.ki-klar{padding-top:0}
.ki-klar h2{font-size:var(--t-42)}
.ki-liste{
display:grid;gap:var(--r5) var(--r6);margin-top:var(--r6);
grid-template-columns:minmax(0,1fr);max-width:62rem;margin-inline:auto;
}
@media (min-width:52rem){.ki-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ki-liste dt{font-weight:560;color:var(--text);margin-bottom:.3rem}
.ki-liste dd{margin:0;color:var(--text-2);font-size:var(--t-16);max-width:34rem}
@media (max-width:34rem){
.band .tat{width:100%}
.band .tat .knopf{width:100%;flex-wrap:wrap;padding-inline:1rem}
.band .tat .knopf .nummer{
flex-basis:100%;text-align:center;border-left:0;padding-left:0;margin-left:0;
padding-top:.35em;font-size:var(--t-16);
}
}
.einwilligung{
background:var(--flaeche);border:1px solid var(--rand-glas-stark);
position:fixed;left:var(--rand);bottom:var(--rand);z-index:60;
max-width:min(30rem,calc(100vw - 2*var(--rand)));
padding:1.15rem 1.3rem;border-radius:var(--rad-4);
display:flex;flex-direction:column;gap:.9rem;
box-shadow:var(--schatten-4);
animation:einwilligung-auf var(--z-ruhig) var(--k-aus) both;
}
.einwilligung[hidden]{display:none}
.einwilligung-text p{margin:0}
.einwilligung-text p+p{margin-top:.45rem;color:var(--text-2)}
.einwilligung-text a{color:var(--marke-text)}
.einwilligung-tat{display:flex;gap:.6rem;flex-wrap:wrap}
.einwilligung-tat .knopf{padding:.7em 1.3em;font-size:var(--t-14)}
@keyframes einwilligung-auf{
from{opacity:0;transform:translateY(1rem)}
to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.einwilligung{animation:none}}
@media (max-width:34rem){
.einwilligung{left:.75rem;right:.75rem;bottom:.75rem;max-width:none;
padding-right:4.75rem}
}
.sprachen{display:flex;gap:.15rem;align-items:center;margin-left:auto}
.sprachen a{
font-size:var(--t-13);font-weight:520;letter-spacing:.04em;
color:var(--text-3);text-decoration:none;padding:.45em .6em;
border-radius:var(--rad-voll);transition:color var(--z-schnell),background-color var(--z-schnell);
}
.sprachen a:hover{color:var(--text);background:var(--glas-hell)}
.sprachen a[aria-current="page"]{color:var(--text);background:var(--glas-hell)}
.kopf-nav{margin-left:0}
@media (max-width:34rem){.sprachen a{padding:.4em .45em}}
.ord, .st{
--bg:#020617; --bg-alt:#050a21; --fg:#f8fafc;
--card:rgba(15,23,42,.5); --card-hi:rgba(15,23,42,.8);
--line:rgba(255,255,255,.07); --line-hi:rgba(255,255,255,.14);
--muted:#94a3b8; --muted-2:#cbd5e1;
--blau:#4f22e6; --blau-tief:#3001c9; --blau-soft:#b0a0ff;
--pink:#fe3fb5; --pink-soft:#ff9ad8; --cyan:#06b6d4;
--ok:#34d399; --ok-bg:rgba(52,211,153,.12);
--warn:#fbbf24; --warn-bg:rgba(251,191,36,.12);
--err:#fb7185; --err-bg:rgba(251,113,133,.12);
--sans:"Outfit",ui-sans-serif,system-ui,-apple-system,sans-serif;
--disp:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
--breit:78rem;
--r:18px;
}
html[data-modus="hell"] .ord, html[data-modus="hell"] .st{
--bg:#f6f7f9; --bg-alt:#eceef1; --fg:#0f1216;
--card:rgba(255,255,255,.78); --card-hi:#ffffff;
--line:rgba(0,6,23,.09); --line-hi:rgba(0,6,23,.18);
--muted:#656d79; --muted-2:#4c535d;
--blau:#4f22e6; --blau-tief:#3001c9; --blau-soft:#4666bb;
--pink:#c7539f; --pink-soft:#a73c84; --cyan:#0e7490;
--ok:#2f7e46; --ok-bg:rgba(47,126,70,.1);
--warn:#906108; --warn-bg:rgba(144,97,8,.1);
--err:#b33e3c; --err-bg:rgba(179,62,60,.1);
}
html[data-modus="hell"] .ord .o-glow,
html[data-modus="hell"] .st .s-glow{opacity:.12; filter:blur(140px)}
html[data-modus="hell"] .ord .o-figur img,
html[data-modus="hell"] .st .s-kachel img{
filter:drop-shadow(0 14px 26px rgba(0,6,23,.18))}
html[data-modus="hell"] .ord .o-kopf,
html[data-modus="hell"] .st .s-kopf{background:rgba(246,247,249,.78)}
html[data-modus="hell"] .st .s-kachel[aria-pressed="true"] img,
html[data-modus="hell"] .st .s-kachel:hover img{
filter:drop-shadow(0 18px 32px rgba(0,6,23,.22))}
html[data-modus="hell"] .ord .o-schalter button[aria-current="true"],
html[data-modus="hell"] .st .s-sprachwahl a[aria-current="page"]{
background:rgba(0,6,23,.08); color:var(--fg)}
.ord *, .ord *::before, .ord *::after{box-sizing:border-box}.ord-body, .st-body{
margin:0; background:var(--bg); color:var(--fg);
font-family:var(--sans); font-size:16px; line-height:1.62;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}.ord .o-huelle{max-width:var(--breit); margin:0 auto; padding-left:20px; padding-right:20px}.ord h1, .ord h2, .ord h3, .ord h4{margin:0; line-height:1.05; text-wrap:balance; letter-spacing:-.03em; font-weight:700}.ord h1{font-size:clamp(2.3rem,5.6vw,4.1rem); font-weight:800; letter-spacing:-.045em}.ord h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}.ord h3{font-size:clamp(1.1rem,1.7vw,1.35rem); letter-spacing:-.02em}.ord p{margin:0}.ord a{color:var(--blau-soft); text-decoration:none}.ord img{max-width:100%}.ord :focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:4px}.ord .o-kicker{
font-family:var(--disp); font-size:.7rem; font-weight:500; letter-spacing:.2em;
text-transform:uppercase; color:var(--pink-soft);
}.ord .o-kicker.o-blau{color:var(--blau-soft)}.ord .o-lauf{color:var(--muted-2); font-size:clamp(1rem,1.25vw,1.15rem); max-width:58ch}.ord .o-leise{color:var(--muted); font-size:.9rem}.ord .o-wert{font-family:var(--disp); font-variant-numeric:tabular-nums}.ord .o-pink{color:var(--pink-soft)}.ord .o-blau{color:var(--blau-soft)}.ord .o-glow{position:absolute; border-radius:50%; filter:blur(120px); opacity:.5; pointer-events:none; z-index:0}.ord .o-glow.o-a{background:var(--blau-tief)}.ord .o-glow.o-b{background:var(--pink)}.ord .o-glow.o-c{background:var(--cyan)}.ord section{position:relative; overflow:hidden; padding-block:clamp(56px,8vw,116px); z-index:1}.ord section>.o-huelle{position:relative; z-index:2}.ord .o-kopf{
position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line);
background:rgba(2,6,23,.72); backdrop-filter:blur(14px) saturate(1.4);
}.ord .o-kopf-in{display:flex; align-items:center; gap:14px; min-height:64px; flex-wrap:wrap}.ord .o-marke{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.02em; color:var(--fg); margin-right:auto}.ord .o-marke b{font-weight:600}.ord .o-marke .o-leise{color:var(--muted); font-weight:400}.ord .o-marke .o-knoten{
width:29.6px; height:29.6px; border-radius:9.6px; flex:none; position:relative;
background:conic-gradient(from 210deg,#00a4ff,#95b5ff,#ff9ad8,#00a4ff);
box-shadow:0 0 22px rgba(149,181,255,.35);
}.ord .o-marke .o-knoten::after{content:""; position:absolute; inset:5px; border-radius:4.8px;
background:var(--bg)}
.ord .o-schalter{display:flex; gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--line)}.ord .o-schalter button{
font:inherit; font-size:.86rem; font-weight:500; border:0; cursor:pointer; color:var(--muted-2);
background:transparent; padding:7px 15px; border-radius:999px; transition:.18s;
}.ord .o-schalter button[aria-current="true"]{background:var(--fg); color:#020617}.ord .o-schalter button:hover{color:var(--fg)}.ord .o-schalter button[aria-current="true"]:hover{color:#020617}.ord .o-knopf{
display:inline-flex; align-items:center; gap:10px; font:inherit; font-weight:600; font-size:1rem;
border:0; border-radius:14px; padding:15px 26px; cursor:pointer; position:relative;
color:#fff; background:linear-gradient(135deg,var(--blau) 0%,#d01a8c 100%);
box-shadow:0 10px 34px rgba(79,34,230,.42); transition:transform .16s, box-shadow .16s;
}.ord .o-knopf:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(254,63,181,.42)}.ord .o-knopf.o-geist{background:rgba(255,255,255,.05); border:1px solid var(--line-hi); box-shadow:none; color:var(--fg)}.ord .o-knopf.o-geist:hover{background:rgba(255,255,255,.1); box-shadow:none}.ord .o-knopf[aria-disabled="true"]{opacity:.55; cursor:default; transform:none; box-shadow:none}.ord .o-start{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; max-width:58ch; margin:0 auto}.ord .o-start .o-lauf{max-width:54ch}.ord .o-start h1 em{font-style:normal; background:linear-gradient(105deg,var(--pink-soft),var(--blau-soft) 70%); -webkit-background-clip:text; background-clip:text; color:transparent}.ord .o-knoepfe{display:flex; flex-wrap:wrap; gap:12px}.ord .o-beweis{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(18px,4vw,54px); margin-top:clamp(22px,3vw,34px)}.ord .o-beweis div{display:flex; flex-direction:column; align-items:center}.ord .o-mitte{margin:16px auto 0; text-align:center; max-width:52ch}
.ord .o-verm-block{margin-bottom:clamp(44px,6vw,78px)}.ord .o-beweis b{font-family:var(--disp); font-size:1.5rem; font-weight:700; letter-spacing:-.02em}.ord .o-beweis span{font-size:.78rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}.ord .o-vermittlung{
background:var(--card); border:1px solid var(--line); border-radius:24px;
padding:clamp(16px,2.4vw,26px); backdrop-filter:blur(12px);
box-shadow:0 30px 80px rgba(0,0,0,.45);
}.ord .o-verm-kopf{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px}.ord .o-verm-titel{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}.ord .o-puls{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:ord-puls 2s infinite}@keyframes ord-puls{70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}.ord .o-leitungs-schalter{display:flex; gap:4px; padding:4px; border-radius:12px; background:rgba(0,0,0,.35); border:1px solid var(--line)}.ord .o-leitungs-schalter button{
font:inherit; font-size:.8rem; font-weight:600; border:0; cursor:pointer; color:var(--muted);
background:transparent; padding:8px 14px; border-radius:9px; transition:.18s; white-space:nowrap;
}.ord .o-leitungs-schalter button[aria-pressed="true"]{background:rgba(255,255,255,.1); color:var(--fg)}.ord .o-leitungs-schalter button[data-modus="cloud"][aria-pressed="true"]{background:linear-gradient(135deg,var(--blau),#d01a8c); color:#fff}.ord .o-verm-buehne{position:relative}.ord .o-verm-buehne svg{display:block; width:100%; height:auto}.ord .o-spur{stroke-width:2.4; fill:none; stroke-linecap:round}.ord .o-spur.o-durch{stroke:url(#ordDurch); stroke-dasharray:7 9; animation:ord-fliess 1.1s linear infinite}.ord .o-spur.o-besetzt{stroke:var(--err); stroke-dasharray:5 7; opacity:.85}@keyframes ord-fliess{to{stroke-dashoffset:-32}}@media (prefers-reduced-motion:reduce){.ord .o-spur.o-durch{animation:none; stroke-dasharray:none}.ord .o-puls{animation:none}}.ord .o-ruf circle{transition:fill .35s, opacity .35s}.ord .o-ruf text{font-family:"Space Grotesk",monospace; font-size:11px; fill:var(--muted)}.ord .o-marke-besetzt{font-family:"Space Grotesk",monospace; font-size:10.5px; fill:var(--err); letter-spacing:.06em}.ord .o-verm-fuss{display:flex; align-items:baseline; gap:10px; margin-top:14px; flex-wrap:wrap}.ord .o-zaehler{font-family:var(--disp); font-size:2rem; font-weight:700; letter-spacing:-.02em; line-height:1}.ord .o-zaehler.o-gut{color:var(--ok)}.ord .o-zaehler.o-schlecht{color:var(--err)}.ord .o-verm-satz{font-size:.94rem; color:var(--muted-2); flex:1 1 16ch; min-width:14ch}.ord .o-paar{display:flex; align-items:flex-end; justify-content:center; gap:clamp(8px,3vw,44px); margin-top:clamp(14px,2vw,26px)}.ord .o-figur{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px}.ord .o-figur img{width:auto; height:clamp(178px,26vh,300px); max-width:100%; display:block; filter:drop-shadow(0 24px 46px rgba(0,0,0,.6))}.ord .o-figur::before{
content:""; position:absolute; inset:auto 8% 26% 8%; height:58%; border-radius:50%;
filter:blur(34px); opacity:.42; z-index:-1;
}.ord .o-figur[data-posten="stimme"]::before{background:var(--pink)}.ord .o-figur[data-posten="schrift"]::before{background:var(--blau)}.ord .o-figur figcaption{text-align:center}.ord .o-figur .o-name{font-weight:600; font-size:clamp(1rem,1.5vw,1.2rem); display:block}.ord .o-figur .o-posten{font-family:var(--disp); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}.ord .o-figur[data-posten="stimme"] .o-posten{color:var(--pink-soft)}.ord .o-figur[data-posten="schrift"] .o-posten{color:var(--blau-soft)}.ord figure{margin:0}.ord .o-ursachen{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px}.ord .o-ursache{
background:var(--card); border:1px solid var(--line); border-radius:var(--r);
padding:22px; display:flex; flex-direction:column; gap:9px; position:relative; overflow:hidden;
}.ord .o-ursache b{font-family:var(--disp); font-size:2.6rem; font-weight:700; line-height:.9; color:rgba(255,255,255,.13); letter-spacing:-.04em}.ord .o-ursache h3{font-size:1.06rem}.ord .o-ursache p{font-size:.92rem; color:var(--muted)}.ord .o-ursache[data-kern]{border-color:rgba(254,63,181,.4); background:linear-gradient(160deg,rgba(254,63,181,.09),var(--card) 60%)}.ord .o-ursache[data-kern] b{color:rgba(254,63,181,.35)}.ord .o-sim{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(20px,3vw,40px); align-items:start}.ord .o-sim-links{display:flex; flex-direction:column; gap:20px}.ord .o-kanaele{display:flex; gap:6px; padding:5px; border-radius:14px; background:rgba(0,0,0,.35); border:1px solid var(--line); flex-wrap:wrap}.ord .o-kanaele button{
font:inherit; font-size:.86rem; font-weight:600; border:0; cursor:pointer; color:var(--muted);
background:transparent; padding:9px 15px; border-radius:10px; transition:.18s; display:flex; align-items:center; gap:8px;
}.ord .o-kanaele button[aria-current="true"]{background:rgba(255,255,255,.1); color:var(--fg)}.ord .o-kanaele svg{width:15px; height:15px}.ord .o-fenster{
background:var(--card-hi); border:1px solid var(--line); border-radius:22px; overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.5); backdrop-filter:blur(12px);
}.ord .o-fenster-kopf{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.25)}.ord .o-fenster-kopf .o-avatar{width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none; background:rgba(255,255,255,.06); border:1px solid var(--line-hi)}.ord .o-fenster-kopf .o-avatar img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity .18s}.ord .o-fenster-kopf .o-wer{display:flex; flex-direction:column; line-height:1.25}.ord .o-fenster-kopf .o-wer strong{font-size:.95rem; font-weight:600}.ord .o-fenster-kopf .o-wer span{font-family:var(--disp); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}.ord .o-fenster-kopf .o-zustand{margin-left:auto; font-family:var(--disp); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:999px}.ord .o-zustand[data-z="ruht"]{background:rgba(255,255,255,.06); color:var(--muted)}.ord .o-zustand[data-z="laeuft"]{background:var(--ok-bg); color:var(--ok)}.ord .o-zustand[data-z="fertig"]{background:rgba(79,34,230,.22); color:var(--blau-soft)}.ord .o-welle{height:34px; display:flex; align-items:center; gap:3px; padding:0 18px; margin-top:12px}.ord .o-welle i{display:block; width:3px; border-radius:2px; background:var(--pink); opacity:.5; height:20%}.ord .o-welle.o-aktiv i{animation:ord-welle 1s ease-in-out infinite}@keyframes ord-welle{0%,100%{height:16%}50%{height:100%}}@media (prefers-reduced-motion:reduce){.ord .o-welle.o-aktiv i{animation:none; height:45%}}.ord .o-verlauf{padding:14px 18px 18px; min-height:288px; display:flex; flex-direction:column; gap:11px}.ord .o-verlauf .o-leer{color:var(--muted); font-size:.94rem; margin:auto; text-align:center; max-width:32ch}.ord .o-zug{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; animation:ord-rein .34s ease both}@keyframes ord-rein{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}@media (prefers-reduced-motion:reduce){.ord .o-zug{animation:none}}.ord .o-zug .o-t{font-family:var(--disp); font-size:.72rem; color:var(--muted); padding-top:5px; white-space:nowrap}.ord .o-zug .o-b{
border-radius:13px; padding:10px 14px; font-size:.94rem; border:1px solid var(--line);
background:rgba(255,255,255,.045);
}.ord .o-zug[data-von="agent"] .o-b{background:linear-gradient(150deg,rgba(254,63,181,.16),rgba(79,34,230,.13)); border-color:rgba(254,63,181,.26)}.ord .o-zug[data-von="system"] .o-b{background:transparent; border:0; padding:3px 0; color:var(--muted); font-size:.86rem; font-family:var(--disp)}.ord .o-zug[data-von="system"] .o-b::before{content:"› "; color:var(--blau-soft)}.ord .o-zug .o-b b{color:var(--fg)}.ord .o-filter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}.ord .o-filter button{
font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; padding:8px 15px; border-radius:999px;
background:rgba(255,255,255,.045); border:1px solid var(--line); color:var(--muted-2); transition:.18s;
}.ord .o-filter button[aria-pressed="true"]{background:var(--fg); color:#020617; border-color:var(--fg)}.ord .o-bereiche{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:14px}.ord .o-bereich{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:13px}.ord .o-bereich h3{display:flex; align-items:center; gap:10px; font-size:1rem}.ord .o-bereich h3 svg{width:18px; height:18px; color:var(--pink-soft); flex:none}.ord .o-faelle{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}.ord .o-fall{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:baseline; font-size:.92rem; color:var(--muted-2)}.ord .o-fall[hidden]{display:none}.ord .o-stufe{
font-family:var(--disp); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
padding:3px 8px; border-radius:6px; white-space:nowrap;
}.ord .o-stufe[data-s="heute"]{background:var(--ok-bg); color:var(--ok)}.ord .o-stufe[data-s="moeglich"]{background:rgba(79,34,230,.2); color:var(--blau-soft)}.ord .o-stufe[data-s="schalter"]{background:var(--warn-bg); color:var(--warn)}.ord .o-stufe[data-s="grenze"]{background:var(--err-bg); color:var(--err)}.ord .o-grenze{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}.ord .o-gsp{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}.ord .o-gsp-kopf{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; font-weight:600}.ord .o-gsp-kopf .o-zeichen{width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex:none; font-family:var(--disp); font-weight:700; font-size:.8rem}.ord .o-gsp[data-art="ja"] .o-zeichen{background:var(--ok-bg); color:var(--ok)}.ord .o-gsp[data-art="nein"] .o-zeichen{background:var(--err-bg); color:var(--err)}.ord .o-gsp ul{margin:0; padding:14px 20px 18px; list-style:none; display:flex; flex-direction:column; gap:11px; font-size:.93rem; color:var(--muted-2)}.ord .o-gsp li{position:relative; padding-left:16px}.ord .o-gsp li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%}.ord .o-gsp[data-art="ja"] li::before{background:var(--ok)}.ord .o-gsp[data-art="nein"] li::before{background:var(--err)}.ord .o-pakete{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:14px}.ord .o-paket{
background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px;
display:flex; flex-direction:column; gap:13px; position:relative; transition:.2s;
}.ord .o-paket:hover{border-color:var(--line-hi); transform:translateY(-3px)}.ord .o-paket .o-nr{font-family:var(--disp); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}.ord .o-paket h3{font-size:1.14rem}.ord .o-paket ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--muted)}.ord .o-paket li{position:relative; padding-left:15px}.ord .o-paket li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--blau-soft); opacity:.7}.ord .o-paket .o-kern{margin-top:auto; padding-top:13px; border-top:1px solid var(--line); font-size:.92rem; color:var(--fg)}.ord .o-paket[data-hebel]{
border-color:rgba(254,63,181,.42);
background:linear-gradient(165deg,rgba(254,63,181,.12),rgba(79,34,230,.08) 45%,var(--card) 100%);
box-shadow:0 24px 60px rgba(254,63,181,.16);
}.ord .o-paket[data-hebel] .o-nr{color:var(--pink-soft)}.ord .o-paket[data-hebel] li::before{background:var(--pink)}.ord .o-hebel-band{
position:absolute; top:-1px; right:18px; font-family:var(--disp); font-size:.6rem; letter-spacing:.12em;
text-transform:uppercase; padding:5px 11px; border-radius:0 0 8px 8px; color:#fff;
background:linear-gradient(135deg,var(--blau),#d01a8c);
}.ord .o-stufen{border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--card)}.ord .o-anb{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:19px 22px; border-bottom:1px solid var(--line)}.ord .o-anb:last-child{border-bottom:0}.ord .o-anb .o-n{
width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none;
font-family:var(--disp); font-weight:700; background:rgba(255,255,255,.05); color:var(--muted-2);
}.ord .o-anb[data-jetzt] .o-n{background:linear-gradient(135deg,var(--blau),#d01a8c); color:#fff; box-shadow:0 8px 24px rgba(79,34,230,.4)}.ord .o-anb strong{display:block; font-weight:600; margin-bottom:2px}.ord .o-anb span{font-size:.92rem; color:var(--muted)}.ord .o-ampel{font-family:var(--disp); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:7px; white-space:nowrap}.ord .o-ampel[data-a="jetzt"]{background:var(--ok-bg); color:var(--ok)}.ord .o-ampel[data-a="kunde"]{background:rgba(79,34,230,.2); color:var(--blau-soft)}.ord .o-ampel[data-a="offen"]{background:var(--warn-bg); color:var(--warn)}.ord .o-gruppe{margin-bottom:44px}.ord .o-gruppe-kopf{display:flex; flex-direction:column; gap:7px; max-width:62ch; margin-bottom:18px}.ord .o-teams{display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:16px}.ord .o-team{
text-align:left; font:inherit; color:inherit; cursor:pointer; position:relative; overflow:hidden;
background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px;
display:flex; flex-direction:column; gap:16px; transition:.22s;
}.ord .o-team:hover{transform:translateY(-4px); border-color:rgba(254,63,181,.45); box-shadow:0 26px 64px rgba(0,0,0,.5)}.ord .o-team[data-bau]{cursor:default; border-style:dashed}.ord .o-team[data-bau]:hover{transform:none; border-color:rgba(79,34,230,.5); box-shadow:none}.ord .o-team-zeichen{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; flex:none; background:rgba(254,63,181,.12); color:var(--pink-soft)}.ord .o-team[data-bau] .o-team-zeichen{background:rgba(79,34,230,.16); color:var(--blau-soft)}.ord .o-team-namen{font-size:1.4rem; font-weight:700; letter-spacing:-.025em}.ord .o-team-rolle{color:var(--muted); font-size:.94rem}.ord .o-gesichter{display:flex; gap:-8px}.ord .o-gesichter img{
width:46px; height:46px; border-radius:50%; object-fit:cover; background:rgba(255,255,255,.06);
border:2px solid rgba(2,6,23,.9);
}.ord .o-gesichter img+img{margin-left:-12px}.ord .o-team-fuss{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px; font-size:.9rem; font-weight:600; color:var(--pink-soft)}.ord .o-stand{font-family:var(--disp); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; padding:5px 10px; border-radius:7px; font-weight:500}.ord .o-stand[data-s="aktiv"]{background:var(--ok-bg); color:var(--ok)}.ord .o-stand[data-s="neu"]{background:rgba(254,63,181,.18); color:var(--pink-soft)}.ord .o-stand[data-s="bau"]{background:rgba(79,34,230,.2); color:var(--blau-soft)}.ord .o-abschluss{
border:1px solid var(--line); border-radius:28px; padding:clamp(30px,5vw,64px);
background:linear-gradient(150deg,rgba(79,34,230,.2),rgba(254,63,181,.14) 55%,var(--card) 100%);
display:flex; flex-direction:column; gap:20px; align-items:flex-start; position:relative; overflow:hidden;
}.ord .o-hinweis{border-top:1px solid var(--line); padding-block:34px}.ord .o-hp{display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:18px; margin-top:16px}.ord .o-hp div{font-size:.88rem; color:var(--muted)}.ord .o-hp b{display:block; color:var(--muted-2); font-weight:600; margin-bottom:3px; font-size:.93rem}.ord .o-fuss{border-top:1px solid var(--line); padding-block:26px; display:flex; flex-wrap:wrap; gap:12px 26px; font-size:.84rem; color:var(--muted)}.ord .o-band{
background:linear-gradient(90deg,rgba(79,34,230,.22),rgba(254,63,181,.18));
border-bottom:1px solid var(--line); font-size:.82rem; padding:9px 0; text-align:center; color:var(--muted-2);
}.ord .o-band b{color:var(--fg); font-weight:600}.ord .o-kap{display:flex; flex-direction:column; gap:14px; max-width:64ch; margin-bottom:32px}@media (max-width:64rem){.ord .o-sim{grid-template-columns:1fr}
}@media (max-width:34rem){.ord .o-anb{grid-template-columns:auto minmax(0,1fr); gap:13px}.ord .o-anb .o-ampel{grid-column:2; white-space:normal}.ord .o-beweis{gap:16px}.ord .o-verlauf{min-height:230px}
}
.ord .o-paket-quer{
display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr);
gap:clamp(16px,3vw,38px); align-items:start; margin-top:14px;
border-style:dashed;
}
.ord .o-paket-quer .o-quer-kopf{display:flex; flex-direction:column; gap:10px}
.ord .o-paket-quer .o-kern{margin-top:0; padding-top:0; border-top:0}
.ord .o-paket-quer ul{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:9px 22px}
@media (max-width:52rem){
.ord .o-paket-quer{grid-template-columns:1fr}
}
.ord .o-zeichen.o-warn{background:var(--warn-bg); color:var(--warn)}
.ord .ord-schalter{margin-top:16px; border-color:rgba(251,191,36,.3);
background:linear-gradient(150deg,rgba(251,191,36,.09),var(--card) 60%)}
.ord .ord-breit{list-style:none}
.ord .ord-breit li{grid-template-columns:1fr}
.ord .ord-breit li::before{display:none}
.ord .ord-nav{display:none; gap:18px; font-size:.9rem}
.ord .ord-nav a{color:var(--muted-2); font-weight:500}
.ord .ord-nav a:hover{color:var(--fg)}
@media (min-width:72rem){.ord .ord-nav{display:flex}}
.ord .ord-sprung{position:absolute; left:-9999px; top:0; z-index:99;
background:var(--fg); color:#020617; padding:10px 16px; border-radius:0 0 10px 0}
.ord .ord-sprung:focus{left:0}
.ord .ord-start-abschnitt{padding-top:clamp(20px,2.6vw,36px); padding-bottom:clamp(36px,4vw,60px)}
.ord .o-knopf.o-anruf{display:inline-flex; align-items:center; gap:8px}
.ord .o-hoerer{width:17px; height:17px; flex:none}
.ord .o-hd-figur img{height:clamp(230px,40vh,440px)}
.ord .o-hd-filter{display:flex; flex-direction:column; gap:10px; margin-bottom:26px}
.ord .o-hd-filter .o-filter{margin-bottom:0}
.ord .o-hd-bereich[hidden]{display:none}
.ord .o-hd-fall{display:flex; flex-direction:column; gap:5px; padding:14px 0;
border-top:1px solid var(--line)}
.ord .o-faelle>.o-hd-fall:first-child{border-top:0; padding-top:4px}
.ord .o-hd-kopf{display:flex; justify-content:space-between; align-items:baseline;
gap:12px}
.ord .o-hd-kopf b{color:var(--fg); font-weight:600; font-size:.97rem;
letter-spacing:-.01em}
.ord .o-hd-text{color:var(--muted); font-size:.87rem; line-height:1.55}
.ord .o-hd-wer{align-self:flex-start; font-family:var(--disp); font-size:.58rem;
letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border-radius:999px;
border:1px solid var(--line-hi); color:var(--muted)}
.ord .o-hd-wer[data-wer="alex"]{color:var(--pink-soft); border-color:rgba(254,63,181,.35)}
.ord .o-hd-wer[data-wer="thomas"]{color:var(--blau-soft); border-color:rgba(79,34,230,.45)}
.ord .o-hd-nach{margin-top:20px; max-width:66ch}
.ord .o-hd-legende{display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:28px;
font-size:.84rem; color:var(--muted)}
.ord .o-hd-legende>span{display:flex; align-items:center; gap:9px}
.ord .o-hd-zettel li{font-family:var(--disp); font-size:.84rem; line-height:1.5}
.ord .o-hd-zeile{font-family:var(--disp); font-size:.62rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted); margin:-4px 0 2px}
.ord .o-kern.o-hd-warn{color:var(--warn)}
@media (max-width:34rem){
.ord .o-hd-kopf{flex-direction:column; gap:6px}
}
.ord .o-fuss a{color:var(--muted); text-decoration:underline;
text-underline-offset:3px; text-decoration-color:var(--line-hi)}
.ord .o-fuss a:hover{color:var(--fg)}
.ord .o-nur-vorlesen{position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.ord .o-modus{padding:9px 16px; font-size:.88rem; border-radius:10px; box-shadow:none}
.ord section[id]{scroll-margin-top:96px}
.st-body{background:var(--bg); color:var(--fg); font-family:var(--sans);
font-size:16px; line-height:1.62; margin:0; overflow-x:hidden;
-webkit-font-smoothing:antialiased}
.st *,.st *::before,.st *::after{box-sizing:border-box}
.st h1,.st h2,.st h3{margin:0; line-height:1.05; text-wrap:balance;
letter-spacing:-.03em; font-weight:700}
.st h1{font-size:clamp(2.3rem,5.6vw,4.1rem); font-weight:800; letter-spacing:-.045em}
.st h2{font-size:clamp(1.9rem,4.2vw,3.2rem)}
.st h3{font-size:clamp(1.05rem,1.6vw,1.25rem); letter-spacing:-.02em}
.st p{margin:0}
.st [hidden]{display:none !important}
.st img{max-width:100%}
.st a{color:var(--blau-soft); text-decoration:none}
.st :focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:4px}
.st .s-huelle{max-width:78rem; margin:0 auto; padding-left:20px; padding-right:20px;
position:relative; z-index:2}
.st section{position:relative; overflow:hidden; padding-block:clamp(56px,8vw,116px); z-index:1}
.st .s-glow{position:absolute; border-radius:50%; filter:blur(120px); opacity:.5;
pointer-events:none; z-index:0}
.st .s-glow.s-a{background:var(--blau-tief)}
.st .s-glow.s-b{background:var(--pink)}
.st .s-glow.s-c{background:var(--cyan)}
.st .s-kicker{font-family:var(--disp); font-size:.7rem; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--pink-soft)}
.st .s-kicker.s-blau{color:var(--blau-soft)}
.st .s-lauf{color:var(--muted-2); font-size:clamp(.98rem,1.15vw,1.1rem); max-width:58ch}
.st .s-leise{color:var(--muted); font-size:.9rem}
.st .s-mitte{text-align:center}
.st .s-wert{font-family:var(--disp); font-variant-numeric:tabular-nums}
.st .s-pink{color:var(--pink-soft)}
.st .s-kap{display:flex; flex-direction:column; gap:14px; max-width:64ch; margin-bottom:32px}
.st .s-band{background:linear-gradient(90deg,rgba(79,34,230,.22),rgba(254,63,181,.18));
border-bottom:1px solid var(--line); font-size:.82rem; padding:9px 0; text-align:center;
color:var(--muted-2)}
.st .s-band b{color:var(--fg); font-weight:600}
.st .s-kopf{position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line);
background:rgba(2,6,23,.72); backdrop-filter:blur(14px) saturate(1.4)}
.st .s-kopf-in{display:flex; align-items:center; gap:14px; min-height:64px; flex-wrap:wrap}
.st .s-kopf-rechts{display:flex; flex-wrap:wrap; justify-content:flex-end;
align-items:center; gap:10px; margin-left:auto; min-width:0}
.st .s-marke{display:flex; align-items:center; gap:10px; font-weight:600;
letter-spacing:-.02em; color:var(--fg)}
.st .s-knoten{
width:29.6px; height:29.6px; border-radius:9.6px; flex:none; position:relative;
background:conic-gradient(from 210deg,#00a4ff,#95b5ff,#ff9ad8,#00a4ff);
box-shadow:0 0 22px rgba(149,181,255,.35);
}.st .s-knoten::after{content:""; position:absolute; inset:5px; border-radius:4.8px;
background:var(--bg)}
.st .s-marke .s-leise{color:var(--muted); font-weight:400}
.st .st-nav{display:none; gap:18px; font-size:.9rem}
.st .st-nav a{color:var(--muted-2); font-weight:500}
.st .st-nav a:hover{color:var(--fg)}
@media (min-width:72rem){.st .st-nav{display:flex}}
.st .st-sprung{position:absolute; left:-9999px; top:0; z-index:99; background:var(--fg);
color:#020617; padding:10px 16px; border-radius:0 0 10px 0}
.st .st-sprung:focus{left:0}
.st .s-knopf{display:inline-flex; align-items:center; gap:10px; font:inherit;
font-weight:600; font-size:1rem; border:0; border-radius:14px; padding:15px 26px;
cursor:pointer; color:#fff; text-decoration:none;
background:linear-gradient(135deg,var(--blau) 0%,#d01a8c 100%);
box-shadow:0 10px 34px rgba(79,34,230,.42); transition:transform .16s, box-shadow .16s}
.st .s-knopf:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(254,63,181,.42)}
.st .s-knopf.s-geist{background:rgba(255,255,255,.05); border:1px solid var(--line-hi);
box-shadow:none; color:var(--fg)}
.st .s-knopf.s-geist:hover{background:rgba(255,255,255,.1); box-shadow:none}
.st .s-knopf.s-klein{padding:9px 16px; font-size:.88rem; border-radius:10px;
box-shadow:none}
.st .s-knopf[aria-disabled="true"]{opacity:.55; cursor:default; transform:none;
box-shadow:none}
.st .s-knoepfe{display:flex; flex-wrap:wrap; gap:12px}
.st .st-start-abschnitt{padding-top:clamp(24px,3vw,40px); padding-bottom:clamp(36px,4vw,60px)}
.st .s-start{display:flex; flex-direction:column; gap:16px; align-items:center;
text-align:center; max-width:56ch; margin:0 auto}
.st .s-start h1 em{font-style:normal;
background:linear-gradient(105deg,var(--pink-soft),var(--blau-soft) 70%);
-webkit-background-clip:text; background-clip:text; color:transparent}
.st .s-reihe{display:grid; grid-template-columns:repeat(6,1fr);
gap:clamp(4px,1.1vw,16px); margin-top:clamp(16px,2.4vw,30px); align-items:end}
.st .s-kachel{appearance:none; border:0; background:transparent; cursor:pointer;
padding:0; display:flex; flex-direction:column; align-items:center; gap:10px;
position:relative; transition:transform .22s}
.st .s-kachel img{height:clamp(124px,19vh,228px); width:auto; max-width:100%;
margin:0 auto; display:block;
filter:drop-shadow(0 18px 34px rgba(0,0,0,.55)) grayscale(.15) brightness(.93);
transition:filter .25s, transform .25s}
.st .s-kachel::before{content:""; position:absolute; inset:auto 6% 22% 6%; height:52%;
border-radius:50%; filter:blur(38px); opacity:0; transition:opacity .25s; z-index:-1}
.st .s-kachel[data-team="agents"]::before{background:var(--blau)}
.st .s-kachel[data-team="ordination"]::before{background:var(--pink)}
.st .s-kachel:hover img,.st .s-kachel:focus-visible img,
.st .s-kachel[aria-pressed="true"] img{filter:drop-shadow(0 22px 40px rgba(0,0,0,.6));
transform:translateY(-6px)}
.st .s-kachel:hover::before,.st .s-kachel:focus-visible::before,
.st .s-kachel[aria-pressed="true"]::before{opacity:.5}
.st .s-kachel-text{display:flex; flex-direction:column; gap:2px}
.st .s-name{font-weight:600; font-size:clamp(.85rem,1.4vw,1.05rem)}
.st .s-posten{font-family:var(--disp); font-size:clamp(.52rem,.72vw,.64rem);
letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.st .s-kachel[data-team="agents"] .s-posten{color:var(--blau-soft)}
.st .s-kachel[data-team="ordination"] .s-posten{color:var(--pink-soft)}
.st .s-antwort{min-height:90px; margin-top:22px; padding:18px 22px; border-radius:18px;
border:1px solid var(--line); background:var(--card); display:flex;
flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px;
text-align:center; transition:border-color .25s, background .25s}
.st .s-antwort strong{font-weight:700; letter-spacing:-.01em}
.st .s-antwort span{color:var(--muted-2); max-width:62ch; text-wrap:balance}
.st .s-antwort[data-team="agents"]{border-color:rgba(79,34,230,.45)}
.st .s-antwort[data-team="ordination"]{border-color:rgba(254,63,181,.45)}
.st .s-antwort .s-knopf{margin-left:4px}
.st .s-belege{display:flex; flex-wrap:wrap; gap:clamp(18px,4vw,54px);
justify-content:center; margin-top:30px}
.st .s-belege div{display:flex; flex-direction:column; align-items:center}
.st .s-belege b{font-family:var(--disp); font-size:clamp(1.5rem,3vw,2.1rem);
font-weight:700; letter-spacing:-.02em}
.st .s-belege span{font-size:.74rem; color:var(--muted); letter-spacing:.06em;
text-transform:uppercase}
.st .s-punkte{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:16px}
.st .s-punkt{background:var(--card); border:1px solid var(--line); border-radius:18px;
padding:24px; display:flex; flex-direction:column; gap:10px}
.st .s-punkt p{color:var(--muted); font-size:.94rem}
.st .s-teams{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
gap:clamp(26px,4vw,46px)}
@media (max-width:76rem){.st .s-teams{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:46rem){.st .s-teams{grid-template-columns:1fr}}
.st .s-team{display:flex; flex-direction:column; gap:12px; padding:0;
border:0; background:none; border-radius:0;
color:inherit; transition:.22s; position:relative}
.st a.s-team:hover{transform:none; box-shadow:none}
.st .s-team.s-bau{opacity:.78}
.st .s-gesichter{display:flex}
.st .s-gesichter img{width:60px; height:60px; border-radius:50%; object-fit:cover;
background:rgba(255,255,255,.05); border:2px solid rgba(2,6,23,.9)}
.st .s-gesichter img+img{margin-left:-16px}
.st .s-gesichter.s-leer span{width:60px; height:60px; border-radius:50%;
display:grid; place-items:center; font-family:var(--disp); color:var(--muted);
background:rgba(255,255,255,.04); border:1px dashed var(--line-hi)}
.st .s-gesichter.s-leer span+span{margin-left:-16px}
.st .s-team .s-gesichter.s-leer{height:clamp(120px,15vw,180px);
align-items:flex-end; margin-bottom:4px}
.st .s-team .s-gesichter.s-leer span{width:74px; height:74px; font-size:1.3rem}
.st .s-team-namen{font-size:1.5rem; font-weight:700; letter-spacing:-.025em}
.st .s-team-zeile{font-family:var(--disp); font-size:.68rem; letter-spacing:.12em;
text-transform:uppercase; color:var(--muted)}
.st .s-team[data-team="agents"] .s-team-zeile{color:var(--blau-soft)}
.st .s-team[data-team="ordination"] .s-team-zeile{color:var(--pink-soft)}
.st .s-team-text{color:var(--muted-2); font-size:.96rem}
.st .s-marken{display:flex; flex-wrap:wrap; gap:7px}
.st .s-marken span{font-size:.76rem; padding:5px 11px; border-radius:999px;
background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--muted-2)}
.st .s-team-fuss{display:flex; align-items:center; justify-content:space-between;
gap:10px; margin-top:auto; padding-top:6px; font-weight:600; font-size:.92rem}
.st .s-team[data-team="agents"] .s-team-fuss{color:var(--blau-soft)}
.st .s-team[data-team="ordination"] .s-team-fuss{color:var(--pink-soft)}
.st .s-stand{font-family:var(--disp); font-size:.6rem; letter-spacing:.11em;
text-transform:uppercase; padding:5px 10px; border-radius:7px; font-weight:500}
.st .s-stand[data-s="agents"]{background:rgba(52,211,153,.12); color:var(--ok)}
.st .s-stand[data-s="ordination"]{background:rgba(254,63,181,.18); color:var(--pink-soft)}
.st .s-stand[data-s="bau"]{background:rgba(79,34,230,.2); color:var(--blau-soft)}
.st .s-beweis{display:flex; flex-direction:column; gap:16px; max-width:64ch}
.st .s-abschluss{border:1px solid var(--line); border-radius:28px;
padding:clamp(30px,5vw,64px); position:relative; overflow:hidden;
background:linear-gradient(150deg,rgba(79,34,230,.2),rgba(254,63,181,.14) 55%,var(--card) 100%);
display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.st .s-hinweis{border-top:1px solid var(--line); padding-block:34px}
.st .s-hp{display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
gap:18px; margin-top:16px}
.st .s-hp div{font-size:.88rem; color:var(--muted)}
.st .s-hp b{display:block; color:var(--muted-2); font-weight:600; margin-bottom:3px;
font-size:.93rem}
.st .s-fuss{border-top:1px solid var(--line); padding-block:26px; display:flex;
flex-wrap:wrap; gap:12px 26px; font-size:.84rem; color:var(--muted)}
@media (max-width:48rem){
.st .s-reihe{grid-template-columns:repeat(2,1fr); gap:16px}
.st .s-kachel img{height:clamp(132px,21vh,200px)}
.st .s-antwort{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
.st *{transition:none !important; animation:none !important}
.st .s-kachel:hover img{transform:none}
}
.st .s-knopf.s-anruf{display:inline-flex; align-items:center; gap:8px}
.st .s-hoerer{width:17px; height:17px; flex:none}
.st .s-sprachen{margin-top:clamp(26px,4vw,44px); padding:clamp(20px,3vw,30px);
border:1px solid var(--line); border-radius:22px; background:var(--card);
display:flex; flex-direction:column; gap:clamp(18px,2.6vw,26px)}
.st .s-sprachen-kopf{display:flex; flex-direction:column; gap:9px}
.st .s-sprachen-kopf h3{font-size:clamp(1.1rem,1.9vw,1.45rem); letter-spacing:-.02em}
.st .s-sprachen-kopf p{color:var(--muted-2); font-size:.97rem; line-height:1.6;
max-width:62ch}
.st .s-kanaele{display:grid; grid-template-columns:1fr 1fr;
gap:clamp(16px,2.4vw,28px)}
.st .s-kanal{display:flex; flex-direction:column; gap:9px; padding-left:16px;
border-left:2px solid var(--line-hi)}
.st .s-kanal[data-k="chat"]{border-left-color:var(--blau-soft)}
.st .s-kanal[data-k="stimme"]{border-left-color:var(--pink-soft)}
.st .s-kanal>b{font-size:1rem; font-weight:600}
.st .s-kanal p{margin:0; color:var(--muted); font-size:.9rem; line-height:1.6;
max-width:52ch}
.st .s-stand-klein{font-family:var(--disp); font-size:.6rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted)}
.st .s-kanal[data-k="chat"] .s-stand-klein{color:var(--blau-soft)}
.st .s-kanal[data-k="stimme"] .s-stand-klein{color:var(--pink-soft)}
.st .s-fahnen{list-style:none; margin:4px 0 0; padding:0; display:flex;
flex-wrap:wrap; gap:9px}
.st .s-fahnen li{display:flex; align-items:baseline; gap:7px; padding:7px 12px;
border-radius:11px; border:1px solid var(--line-hi); background:rgba(255,255,255,.04)}
.st .s-fahnen b{font-family:var(--disp); font-size:.7rem; letter-spacing:.12em;
color:var(--blau-soft)}
.st .s-fahnen span{font-size:.84rem; color:var(--muted-2)}
.st .s-schritte{list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(14px,2vw,22px);
counter-reset:none}
.st .s-schritte li{display:flex; flex-direction:column; gap:8px; padding:24px 26px;
border-radius:18px; border:1px solid var(--line); background:var(--card)}
.st .s-schritte b{font-family:var(--disp); font-size:.72rem; letter-spacing:.16em;
color:var(--blau-soft)}
.st .s-schritte strong{font-size:1.08rem; font-weight:600; letter-spacing:-.015em}
.st .s-schritte span{color:var(--muted); font-size:.94rem; line-height:1.6}
.st .s-nach{margin-top:18px; max-width:66ch}
@media (max-width:56rem){.st .s-kanaele{grid-template-columns:1fr}}
@media (max-width:72rem) and (min-width:48rem){.st .s-reihe{grid-template-columns:repeat(3,1fr); gap:14px}}
.st .s-kachel[data-team="helpdesk"]::before{background:var(--cyan)}
.st .s-kachel[data-team="helpdesk"] .s-posten{color:var(--cyan)}
.st .s-antwort[data-team="helpdesk"]{border-color:rgba(6,182,212,.45)}
.st .s-team[data-team="helpdesk"] .s-team-zeile{color:var(--cyan)}
.st .s-team[data-team="helpdesk"] .s-team-fuss{color:var(--cyan)}
.st .s-stand[data-s="helpdesk"]{background:rgba(6,182,212,.16); color:var(--cyan)}
@media (min-width:64rem){
}
.st .s-portal{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
margin-top:clamp(18px,2.4vw,26px); padding:20px clamp(18px,2.6vw,26px);
border-radius:18px; border:1px solid rgba(79,34,230,.45);
background:linear-gradient(120deg,rgba(79,34,230,.16),rgba(254,63,181,.08));
text-decoration:none; color:inherit; transition:border-color .2s, background .2s}
.st .s-portal:hover{border-color:var(--blau-soft)}
.st .s-portal-text{display:flex; flex-direction:column; gap:4px; flex:1 1 32ch}
.st .s-portal-text b{font-size:1.02rem; font-weight:600}
.st .s-portal-text span{color:var(--muted-2); font-size:.93rem; line-height:1.55}
.st .s-portal-ziel{font-family:var(--disp); font-size:.86rem; color:var(--blau-soft);
white-space:nowrap}
.st .s-wa-unten{display:grid; grid-template-columns:1.6fr 1fr;
gap:clamp(16px,2.6vw,28px); margin-top:clamp(20px,3vw,30px); align-items:start}
.st .s-klaeren{padding:22px 26px; border-radius:18px; border:1px solid var(--line);
background:var(--card)}
.st .s-klaeren b{display:block; font-family:var(--disp); font-size:.62rem;
letter-spacing:.15em; text-transform:uppercase; color:var(--warn); margin-bottom:12px}
.st .s-klaeren ul{list-style:none; margin:0; padding:0; display:flex;
flex-direction:column; gap:9px}
.st .s-klaeren li{position:relative; padding-left:20px; color:var(--muted-2);
font-size:.92rem; line-height:1.55}
.st .s-klaeren li::before{content:""; position:absolute; left:2px; top:.62em;
width:6px; height:6px; border-radius:50%; background:var(--warn)}
.st .s-wa-probe{padding:22px 26px; border-radius:18px; border:1px solid var(--line);
background:var(--card); display:flex; flex-direction:column; gap:12px;
align-items:flex-start}
.st .s-wa-probe b{font-family:var(--disp); font-size:.62rem; letter-spacing:.15em;
text-transform:uppercase; color:var(--muted)}
.st .s-preise{display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
gap:clamp(14px,2vw,20px); align-items:start}
.st .s-preis{padding:26px clamp(20px,2.4vw,26px); border-radius:20px;
border:1px solid var(--line); background:var(--card); display:flex;
flex-direction:column; gap:18px}
.st .s-preis[data-kern]{border-color:rgba(254,63,181,.42);
background:linear-gradient(150deg,rgba(254,63,181,.1),var(--card) 62%)}
.st .s-preis-kopf{display:flex; flex-direction:column; gap:5px}
.st .s-preis-kopf h3{font-size:1.2rem; font-weight:700; letter-spacing:-.02em}
.st .s-preis-zeile{font-family:var(--disp); font-size:.6rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted)}
.st .s-betrag{display:flex; align-items:baseline; gap:7px; margin-top:8px;
flex-wrap:wrap}
.st .s-betrag b{font-family:var(--disp); font-size:2.1rem; font-weight:700;
letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.st .s-betrag span{font-size:.82rem; color:var(--muted)}
.st .s-preis[data-kern] .s-betrag b{color:var(--pink-soft)}
.st .s-pl{display:flex; flex-direction:column; gap:8px}
.st .s-pl b{font-family:var(--disp); font-size:.58rem; letter-spacing:.15em;
text-transform:uppercase}
.st .s-pl[data-art="drin"] b{color:var(--ok)}
.st .s-pl[data-art="nicht"] b{color:var(--err)}
.st .s-pl[data-art="aendert"] b{color:var(--muted)}
.st .s-pl ul{list-style:none; margin:0; padding:0; display:flex;
flex-direction:column; gap:6px}
.st .s-pl li{position:relative; padding-left:18px; font-size:.9rem; line-height:1.5;
color:var(--muted-2)}
.st .s-pl li::before{position:absolute; left:0; top:0; font-size:.8rem}
.st .s-pl[data-art="drin"] li::before{content:"\2713"; color:var(--ok)}
.st .s-pl[data-art="nicht"] li::before{content:"\2717"; color:var(--err)}
.st .s-pl[data-art="aendert"] li::before{content:"\00B7"; color:var(--muted);
font-size:1.2rem; line-height:1}
.st .s-pl[data-art="aendert"] li{color:var(--muted)}
.st .s-preis-nach{display:flex; flex-direction:column; gap:12px;
margin-top:clamp(22px,3vw,30px); max-width:74ch}
@media (max-width:56rem){.st .s-wa-unten{grid-template-columns:1fr}}
.st .s-wgrenze{margin-top:clamp(18px,2.6vw,26px); padding:18px 22px;
border-radius:16px; border:1px solid var(--line);
border-left:3px solid var(--pink); background:var(--card);
color:var(--muted-2); font-size:.95rem; line-height:1.6; max-width:76ch}
.st #daten{border-top:1px solid var(--line)}
.st .s-daten{display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
gap:16px}
.st .s-dat{background:var(--card); border:1px solid var(--line); border-radius:18px;
padding:24px; display:flex; flex-direction:column; gap:12px}
.st .s-dat p{color:var(--muted); font-size:.94rem; line-height:1.6}
.st .s-dat-zeichen{width:36px; height:36px; border-radius:11px; display:grid;
place-items:center; border:1px solid var(--line); flex:none}
.st .s-dat-zeichen::after{font-family:var(--disp); font-weight:600; font-size:.78rem;
letter-spacing:.02em}
.st .s-dat[data-art="de"] .s-dat-zeichen{background:rgba(79,34,230,.2);
border-color:rgba(176,160,255,.45)}
.st .s-dat[data-art="de"] .s-dat-zeichen::after{content:"DE"; color:var(--blau-soft)}
.st .s-dat[data-art="dsgvo"] .s-dat-zeichen{background:rgba(254,63,181,.14);
border-color:rgba(255,154,216,.45)}
.st .s-dat[data-art="dsgvo"] .s-dat-zeichen::after{content:"\00A7";
color:var(--pink-soft); font-size:1.08rem}
.st .s-dat[data-art="onprem"] .s-dat-zeichen{background:rgba(6,182,212,.14);
border-color:rgba(6,182,212,.45)}
.st .s-dat[data-art="onprem"] .s-dat-zeichen::after{content:"\2302";
color:var(--cyan); font-size:1.15rem}
.st .s-fuss a{color:var(--muted); text-decoration:underline;
text-underline-offset:3px; text-decoration-color:var(--line-hi)}
.st .s-fuss a:hover{color:var(--fg)}
.st .s-nur-vorlesen{position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.st .s-kopf .s-knopf{padding:9px 15px; font-size:.86rem; border-radius:10px}
.st .s-kopf .s-knopf.s-geist{box-shadow:none}
.st .s-kopf .s-anruf{box-shadow:0 6px 20px rgba(79,34,230,.32)}
.st .s-kopf .s-hoerer{width:15px; height:15px}
.st .s-modus{box-shadow:none}
.st .s-figpaar{display:flex; align-items:flex-end; justify-content:flex-start;
gap:0; margin-bottom:4px; position:relative}
.st .s-figpaar img{height:clamp(120px,15vw,180px); width:auto; max-width:none;
filter:drop-shadow(0 14px 26px rgba(0,0,0,.55));
transition:transform .28s, filter .28s}
.st .s-figpaar img+img{margin-left:-18px}
.st .s-figpaar-gross img{height:clamp(180px,21vw,300px);
filter:drop-shadow(0 22px 40px rgba(0,0,0,.6))}
.st .s-figpaar-gross img+img{margin-left:-26px}
.st a.s-team:hover .s-figpaar img:first-child,
.st a.s-grundlage:hover .s-figpaar img:first-child{transform:translateY(-5px)}
.st a.s-team:hover .s-figpaar img+img,
.st a.s-grundlage:hover .s-figpaar img+img{transform:translateY(-9px)}
.st .s-figpaar::before{content:""; position:absolute; z-index:-1;
left:-6%; right:-6%; bottom:6%; height:56%; border-radius:50%;
filter:blur(34px); opacity:.34}
.st .s-team[data-team="ordination"] .s-figpaar::before{background:var(--pink)}
.st .s-team[data-team="helpdesk"] .s-figpaar::before{background:var(--cyan)}
.st .s-grundlage .s-figpaar::before{background:var(--blau); opacity:.42}
.st .s-grundlage{
display:grid; grid-template-columns:minmax(0,23rem) minmax(0,1fr);
gap:clamp(20px,3.5vw,52px); align-items:end; color:inherit;
padding:0 0 clamp(30px,4vw,46px); border:0; background:none;
border-bottom:1px solid var(--line);
}
.st a.s-grundlage:hover{transform:none; box-shadow:none}
.st .s-gr-bild{display:flex; align-items:flex-end; justify-content:center}
.st .s-gr-text{display:flex; flex-direction:column; gap:10px}
.st .s-gr-zeile{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.st .s-gr-text strong{margin-top:8px; font-family:var(--sans);
font-size:clamp(1.15rem,2vw,1.5rem); font-weight:700; letter-spacing:-.025em;
line-height:1.2; text-wrap:balance}
.st .s-gr-lauf{color:var(--muted-2); font-size:.98rem; line-height:1.6; max-width:62ch}
.st .s-grundlage .s-marken{margin-top:4px}
.st .s-grundlage .s-gr-knopf{margin-top:6px}
.st .s-gr-knopf{font-weight:600; color:var(--blau-soft); font-size:.95rem}
.st .s-grundlage .s-team-namen{font-size:clamp(1.2rem,2vw,1.5rem)}
@media (max-width:56rem){
.st .s-grundlage{grid-template-columns:1fr}
}
.st .s-unter-kap{display:flex; flex-direction:column; gap:8px;
margin:clamp(30px,4vw,48px) 0 20px}
.st .s-team-technik{font-size:.85rem; color:var(--muted); line-height:1.5}
.st .s-anlage-satz{
margin-top:clamp(24px,3.4vw,36px); max-width:24ch;
font-family:var(--sans); font-weight:700; letter-spacing:-.03em;
font-size:clamp(1.35rem,2.8vw,2.05rem); line-height:1.14; text-wrap:balance;
background:linear-gradient(105deg,var(--pink-soft),var(--blau-soft) 75%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.st .s-sprachwahl{display:flex; gap:2px; align-items:center; flex:none}
.st .s-sprachwahl a{
font-family:var(--disp); font-size:.74rem; font-weight:500; letter-spacing:.06em;
color:var(--muted); padding:6px 8px; border-radius:8px; line-height:1;
transition:color .18s, background .18s;
}
.st .s-sprachwahl a:hover{color:var(--fg); background:rgba(255,255,255,.06)}
.st .s-sprachwahl a[aria-current="page"]{color:var(--fg); background:rgba(255,255,255,.08)}
@media (max-width:46rem){
.st .s-sprachwahl a{padding:6px 6px; font-size:.7rem}
}
@font-face{
font-family:"Noto Sans SC"; font-style:normal; font-weight:100 500;
font-display:swap; src:url(../assets/schriften/noto-sc-400.woff2) format("woff2");
unicode-range:U+2E80-2EFF,U+3000-303F,U+3200-33FF,U+4E00-9FFF,U+F900-FAFF,
U+FE30-FE4F,U+FF00-FFEF,U+2190-21FF,U+221E,U+20AC;
}
@font-face{
font-family:"Noto Sans SC"; font-style:normal; font-weight:501 900;
font-display:swap; src:url(../assets/schriften/noto-sc-700.woff2) format("woff2");
unicode-range:U+2E80-2EFF,U+3000-303F,U+3200-33FF,U+4E00-9FFF,U+F900-FAFF,
U+FE30-FE4F,U+FF00-FFEF,U+2190-21FF,U+221E,U+20AC;
}
html[lang="zh-Hans"] .st, html[lang="zh-Hans"] .ord{
--sans:"Outfit","Noto Sans SC",ui-sans-serif,system-ui,-apple-system,sans-serif;
--disp:"Space Grotesk","Noto Sans SC",ui-sans-serif,system-ui,sans-serif;
}
html[lang="zh-Hans"] .st{line-break:strict; word-break:normal; overflow-wrap:break-word}
html[lang="zh-Hans"] .st h1, html[lang="zh-Hans"] .st h2,
html[lang="zh-Hans"] .st h3{letter-spacing:0; text-wrap:balance}
.st section[id]{scroll-margin-top:96px}