/* AnimaContent – Entwurf 2 "Uhrwerk", 05.10.2026
   Alpinweiss, gebürstetes Aluminium, Graphit. Ein Bernstein-Licht, das auch
   in den Filmen leuchtet. Drei Filme laufen beim Scrollen mit. */

@font-face{font-family:"Archivo";src:url(/fonts/animacontent/uhrwerk/schrift/archivo-latin-standard-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(/fonts/animacontent/uhrwerk/schrift/archivo-latin-ext-standard-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Inter";src:url(/fonts/animacontent/uhrwerk/schrift/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(/fonts/animacontent/uhrwerk/schrift/inter-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --alpin:#F3F5F6;          /* Studioboden */
  --alpin-2:#E7EBED;
  --weiss:#FFFFFF;
  --silber:#C8CED3;
  --stahl:#686F74;          /* 11.10.2026: Text-Grau, dunkler für Kontrast 4,5:1 auf hellen Flächen (vorher #8B949B) */
  --stahl-deko:#8B949B;     /* altes Stahlgrau, nur noch für Linien und Punkte */
  --graphit:#16191C;
  --graphit-2:#24292E;
  --text:#1D2226;
  --grau:#5E676E;
  --linie:#DDE2E5;
  --licht:#2B4FB0;          /* entschieden 06.10.2026: Blau */
  --licht-tief:#1E3A8A;
  --auf-licht:#FFFFFF;
  --metall:linear-gradient(135deg,#FDFDFD 0%,#E3E7EA 38%,#F7F8F9 52%,#D5DADE 100%);
  --metall-dunkel:linear-gradient(135deg,#2A3036 0%,#16191C 45%,#23282D 70%,#121417 100%);
  --pille:999px;
  --breite:1280px;
  --kopf:76px;
  --titel:"Archivo",system-ui,sans-serif;
  --lauf:"Inter",system-ui,sans-serif;
  /* Farbrollen (12.10.2026, Dunkelmodus D1): hell = heutige Werte. Neue Regeln nutzen die Rolle, nicht den Rohwert. */
  --grund:var(--alpin);              /* Seitengrund */
  --flaeche-1:var(--weiss);          /* Karten, heute #fff */
  --flaeche-2:var(--alpin-2);        /* abgesetzte Flächen */
  --flaeche-blau:#EEF2FD;            /* Hinweiskasten */
  --flaeche-logo:var(--alpin);       /* Plakette unter Kundenlogos */
  --rand-linie:var(--linie);               /* Deko-Linien */
  --rand-feld:var(--linie);          /* Formularfelder, Schalter-Umriss */
  --tinte:var(--graphit);
  --tinte-2:var(--graphit-2);        /* zweite Schriftstufe */            /* Überschriften, starke Schrift */
  --akzent-text:var(--licht);        /* Links, blaue Wörter */
  --akzent-flaeche:var(--licht);
  --akzent-tief:var(--licht-tief);   /* dunkleres Blau für Schrift */     /* blaue Knöpfe */
  --auf-akzent:var(--auf-licht);     /* Schrift auf blauen Knöpfen */
  --dunkelflaeche:var(--metall-dunkel);
  --tinte-rgb:22 25 28;              /* für rgb(var(--tinte-rgb) / a) statt rgba(22,25,28,a) */
  --schatten-rgb:22 25 28;           /* Schatten, bleiben im Dunkeln schwarz */
  --flaeche-1-rgb:255 255 255;
  --grund-rgb:243 245 246;
  --studio-start:rgb(237 238 240);   /* Startbild-Kulisse, liest app.js */
  --studio-ende:rgb(250 251 251);
}
:root[data-licht="wayyoo"]{--licht:#FFB12D;--licht-tief:#FF7219;--graphit:#1A1214;--graphit-2:#2B1D20;--text:#231A1C;--grau:#6A5A5D;--stahl:#94797D;--silber:#D8C4C7;--linie:#E8DCDE;--alpin:#F7F2F2;--alpin-2:#EFE5E6;--metall:linear-gradient(135deg,#FFFFFF 0%,#F0E6E7 38%,#FFFFFF 52%,#DDBFC3 100%);--metall-dunkel:linear-gradient(135deg,#5A4145 0%,#1A1214 45%,#4A3336 72%,#120C0D 100%)}
:root[data-licht="kupfer"]{--licht:#D9774A;--licht-tief:#BC5F35}
:root[data-licht="eis"]{--licht:#5AA9D6;--licht-tief:#3E8DBA}
:root[data-licht="smaragd"]{--licht:#3FAE8C;--licht-tief:#2C9172}

/* Dunkelmodus (12.10.2026, D3): Werte aus den dunklen Mails. Eine Stelle je Wert. */
:root[data-theme="dunkel"]{
  color-scheme:dark;
  --grund:#0E1012; --flaeche-1:#1A1E22; --flaeche-2:#23282D; --flaeche-blau:#1B2540; --flaeche-logo:#F3F5F6;
  --rand-linie:#2E343A; --rand-feld:#737D85;
  --tinte:#F3F5F6; --tinte-2:#C8CED3; --text:#D5DADE; --grau:#9AA3AA; --stahl:#9AA3AA; --stahl-deko:#5A646C; --silber:#3A4148;
  --akzent-text:#9DB3F2; --akzent-tief:#B4C5F5; --akzent-flaeche:#9DB3F2; --auf-akzent:#0E1012;
  --dunkelflaeche:linear-gradient(135deg,#2A3036 0%,#16191C 45%,#23282D 70%,#121417 100%);
  --metall:linear-gradient(135deg,#3A4148 0%,#23282D 45%,#2E343A 60%,#1A1E22 100%);
  --tinte-rgb:243 245 246; --schatten-rgb:0 0 0; --flaeche-1-rgb:26 30 34; --grund-rgb:14 16 18;
  --studio-start:#1A1E22; --studio-ende:#1A1E22; --graphit:#272C32; --graphit-2:#353C44;
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  color-scheme:dark;
  --grund:#0E1012; --flaeche-1:#1A1E22; --flaeche-2:#23282D; --flaeche-blau:#1B2540; --flaeche-logo:#F3F5F6;
  --rand-linie:#2E343A; --rand-feld:#737D85;
  --tinte:#F3F5F6; --tinte-2:#C8CED3; --text:#D5DADE; --grau:#9AA3AA; --stahl:#9AA3AA; --stahl-deko:#5A646C; --silber:#3A4148;
  --akzent-text:#9DB3F2; --akzent-tief:#B4C5F5; --akzent-flaeche:#9DB3F2; --auf-akzent:#0E1012;
  --dunkelflaeche:linear-gradient(135deg,#2A3036 0%,#16191C 45%,#23282D 70%,#121417 100%);
  --metall:linear-gradient(135deg,#3A4148 0%,#23282D 45%,#2E343A 60%,#1A1E22 100%);
  --tinte-rgb:243 245 246; --schatten-rgb:0 0 0; --flaeche-1-rgb:26 30 34; --grund-rgb:14 16 18;
  --studio-start:#1A1E22; --studio-ende:#1A1E22; --graphit:#272C32; --graphit-2:#353C44;
}}
@media print{:root{color-scheme:light}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf) + 16px)}
body{margin:0;background:var(--grund);color:var(--text);font:400 16.5px/1.6 var(--lauf);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--titel);color:var(--tinte);margin:0;text-wrap:balance}
h2{font-weight:760;font-stretch:108%;font-size:clamp(2rem,4vw,3.6rem);line-height:1.02;letter-spacing:-.025em}
h3{font-weight:700;font-size:1.12rem;line-height:1.25}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--licht);outline-offset:3px}
.rahmen{width:min(100% - 40px,var(--breite));margin-inline:auto}
.marke-zeile{font:600 .76rem/1 var(--lauf);letter-spacing:.16em;text-transform:uppercase;color:var(--stahl);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.marke-zeile::before{content:"";width:28px;height:1px;background:currentColor}
.lead{font-size:1.15rem;color:var(--grau);max-width:52ch;margin-top:20px}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border-radius:var(--pille);font:650 .98rem/1 var(--lauf);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap}
.knopf.licht{background:var(--graphit);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px rgb(var(--schatten-rgb) / .18)}
.knopf.licht i{width:8px;height:8px;border-radius:50%;background:var(--akzent-flaeche);box-shadow:0 0 12px var(--licht)}
.knopf.metall{background:var(--metall);color:var(--tinte);border-color:#fff;box-shadow:0 1px 0 #fff inset,0 8px 24px rgb(var(--schatten-rgb) / .10)}
@media(hover:hover){.knopf:hover{transform:translateY(-2px)}}

/* Kopf: Glas über Alpinweiss */
.kopf{position:fixed;inset:env(safe-area-inset-top,0px) 0 auto 0;z-index:50;height:var(--kopf);display:flex;align-items:center;transition:background .3s,box-shadow .3s}
.kopf.gerollt{background:rgb(var(--grund-rgb) / .78);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 1px 0 rgb(var(--schatten-rgb) / .06)}
.kopf .rahmen{display:flex;align-items:center;gap:40px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;font:780 1.1rem var(--titel);font-stretch:110%;letter-spacing:-.02em;color:var(--tinte)}
.marke b{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--metall-dunkel);color:var(--akzent-text);font:800 .9rem var(--titel);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.haupt{display:flex;gap:30px;margin-right:auto}
.haupt a{font:500 .94rem var(--lauf);text-decoration:none;color:var(--text);opacity:.8}
.haupt a:hover{opacity:1}
.kopf .knopf{min-height:44px;padding:0 22px;font-size:.9rem}
@media(max-width:980px){.haupt{display:none}.kopf .rahmen{justify-content:space-between}}

/* Film-Bühnen */
.film{position:relative;height:var(--laenge,400vh);background:var(--grund)}
.film-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.film-bild,.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-video{opacity:0;transition:opacity .5s}
.film-video.bereit{opacity:1}
.film-schleier{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(var(--grund-rgb) / .92) 0%,rgb(var(--grund-rgb) / .6) 32%,rgb(var(--grund-rgb) / 0) 58%)}
.film-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);will-change:opacity,transform}
.film-text .innen{max-width:640px}
.held-titel{font:800 clamp(2.9rem,7vw,6.6rem)/.92 var(--titel);font-stretch:112%;letter-spacing:-.04em;color:var(--tinte);margin:0}
.held-titel em{font-style:normal;background:linear-gradient(180deg,#9AA3AA,#5B646B);-webkit-background-clip:text;background-clip:text;color:transparent}
.film-gross{font:760 clamp(2.2rem,5vw,4.6rem)/1 var(--titel);font-stretch:108%;letter-spacing:-.03em;color:var(--tinte)}
.film-gross em{font-style:normal;color:var(--stahl)}
.held-reihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.held-zeile{display:flex;gap:28px;margin-top:40px;font:500 .86rem var(--lauf);color:var(--grau)}
.held-zeile b{display:block;font:700 1.5rem var(--titel);color:var(--tinte);letter-spacing:-.02em}
.rollen{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font:600 .7rem var(--lauf);letter-spacing:.18em;text-transform:uppercase;color:var(--stahl);display:flex;flex-direction:column;align-items:center;gap:10px}
.rollen::after{content:"";width:1px;height:42px;background:linear-gradient(var(--stahl-deko),transparent);animation:faden 2s infinite}
@keyframes faden{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.zeitleiste{position:absolute;right:max(20px,calc((100vw - var(--breite))/2));bottom:34px;display:flex;align-items:center;gap:14px;font:600 .72rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
.zeitleiste span{width:120px;height:2px;background:rgba(139,148,155,.3);position:relative;overflow:hidden;border-radius:2px}
.zeitleiste span::after{content:"";position:absolute;inset:0;background:var(--akzent-flaeche);transform:scaleX(var(--p,0));transform-origin:left}
@media(max-width:760px){
  .film-video,.film-bild{object-position:68% 50%}
  .film-schleier{background:linear-gradient(180deg,rgb(var(--grund-rgb) / .95) 0%,rgb(var(--grund-rgb) / .75) 40%,rgb(var(--grund-rgb) / 0) 64%)}
  .film-text{top:calc(var(--kopf) + 20px);transform:none}
  .held-zeile{gap:18px}.zeitleiste{display:none}
}

/* Check auf Metall */
.check{padding:120px 0 40px}
.check-tafel{position:relative;border-radius:32px;background:var(--metall-dunkel);color:#E8ECEF;padding:clamp(32px,6vw,80px);overflow:hidden;box-shadow:0 40px 80px -30px rgb(var(--schatten-rgb) / .45),inset 0 1px 0 rgba(255,255,255,.08)}
.check-tafel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);pointer-events:none}
.check-tafel::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:140%;background:radial-gradient(closest-side,color-mix(in srgb,var(--licht) 30%,transparent),transparent);opacity:.6;pointer-events:none}
.check-tafel>*{position:relative;z-index:1}
.check-tafel .marke-zeile{color:var(--akzent-text)}
.check-tafel h2{color:#fff;max-width:18ch}
.check-tafel h2 em{font-style:normal;color:#8E989F}
.check-form{display:flex;gap:8px;margin-top:36px;max-width:760px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--pille);padding:7px}
.check-form input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:500 1.05rem var(--lauf);padding:0 20px;outline:none}
.check-form input::placeholder{color:#7E878E;color:light-dark(#7E878E,#9AA3AA)}
.check-form .knopf{background:var(--akzent-flaeche);color:var(--auf-akzent);min-height:52px}
.check-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px;max-width:900px;list-style:none;padding:0}
.check-schritte li{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;font-size:.95rem;color:#B5BDC3}
.check-schritte b{display:block;font:600 .72rem var(--lauf);letter-spacing:.16em;color:var(--akzent-text);margin-bottom:6px}
.check-hinweis{margin-top:26px;font-size:.92rem;color:#8E989F;max-width:62ch}
.check-meldung{margin-top:14px;color:var(--akzent-text);font-size:.92rem}
.check-meldung:empty{display:none}
@media(max-width:700px){.check-form{flex-direction:column;border-radius:22px}.check-form input{min-height:50px}.check-schritte{grid-template-columns:1fr}}

/* Wege: grosse Schrift */
.wege{position:relative;height:340vh}
.wege-kulisse{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.wege-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center}
.wege-woerter{list-style:none;margin:0;padding:0}
.wege-woerter li{display:flex;align-items:baseline;gap:22px;font:800 clamp(2.6rem,7.4vw,7rem)/1.02 var(--titel);font-stretch:112%;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px var(--silber);transition:color .45s,-webkit-text-stroke-color .45s,transform .45s;transform:translateX(0)}
.wege-woerter li small{font:600 .8rem var(--lauf);letter-spacing:.14em;-webkit-text-stroke:0;color:var(--stahl);min-width:2.4em}
.wege-woerter li.an{color:var(--tinte);-webkit-text-stroke-color:var(--tinte);transform:translateX(12px)}
.wege-woerter li.an small{color:var(--akzent-text)}
.wege-satz{min-height:5.2em;font-size:1.12rem;color:var(--grau);max-width:40ch;margin-top:20px}
@media(max-width:860px){.wege-raster{grid-template-columns:1fr;gap:20px}.wege-woerter li{font-size:clamp(2.4rem,12vw,4rem)}}

/* Kontakt-Bühne */
.kontakt{position:relative;height:360vh;background:var(--flaeche-1)}
.kontakt-kulisse{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.kontakt-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center}
.zeilen{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--rand-linie)}
.zeilen li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--rand-linie);opacity:.35;transition:opacity .35s}
.zeilen li span{font:600 .76rem var(--lauf);letter-spacing:.14em;color:var(--stahl);padding-top:4px}
.zeilen li p{color:var(--grau);font-size:.98rem;margin-top:4px}
.zeilen li.an{opacity:1}
.zeilen li.jetzt span{color:var(--akzent-text)}
.buehne-bild{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:5/4;max-height:calc(100svh - 160px);width:100%;background:var(--flaeche-2);box-shadow:0 50px 90px -40px rgb(var(--schatten-rgb) / .35);container-type:size}
.schritt{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.schritt.an{opacity:1}
.schritt>img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.06 - var(--t,0) * .06))}
.telefon-rahmen{position:absolute;left:50%;top:42%;height:max(112cqh,124.3cqw);aspect-ratio:900/1118;transform:translate(-50%,-50%) scale(calc(1.05 - var(--t,0) * .05))}
.telefon-rahmen img{width:100%;height:100%}
.anruf{position:absolute;left:40.3%;top:28.9%;width:20%;height:28.5%;background:linear-gradient(180deg,#22282d,#111417);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12% 0 10%;color:#fff;font:600 clamp(7px,1.1vw,11px)/1.3 var(--lauf);text-align:center}
.anruf b{display:block;font-size:1.25em}
.anruf-knopf{width:34%;aspect-ratio:1;border-radius:50%;background:#2fbf71;position:relative}
.anruf-knopf::before,.anruf-knopf::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #2fbf71;animation:klingeln 1.6s infinite}
.anruf-knopf::after{animation-delay:.8s}
@keyframes klingeln{to{transform:scale(2.6);opacity:0}}
.glas{position:absolute;background:rgb(var(--flaeche-1-rgb) / .82);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 24px 60px rgb(var(--schatten-rgb) / .16);padding:16px 18px;font-size:.88rem}
.glas b{display:block;font-family:var(--titel);color:var(--tinte)}
.glas small{display:block;color:var(--grau)}
.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2fbf71;margin-right:8px;box-shadow:0 0 10px #2fbf71}
.g-anruf{right:5%;top:8%;width:min(46%,250px)}
.g-seite{left:5%;top:7%;width:min(60%,370px);padding:0;overflow:hidden}
.leiste{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--rand-linie);font-size:.72rem;color:var(--grau)}
.leiste i{width:8px;height:8px;border-radius:50%;background:var(--silber)}
.leiste span{margin-left:8px;background:var(--grund);border-radius:6px;padding:2px 10px;flex:1}
.seite{padding:16px}
.seite h4{margin:0 0 6px;font:800 1.1rem/1.02 var(--titel);font-stretch:110%;color:var(--tinte)}
.seite p{font-size:.78rem;color:var(--grau)}
.seite .mini{display:inline-block;margin-top:10px;background:var(--graphit);color:#fff;font:600 .72rem var(--lauf);padding:7px 14px;border-radius:99px}
.g-form{right:5%;top:7%;width:min(54%,320px)}
.feld{border:1px solid var(--rand-linie);border-radius:10px;padding:7px 10px;margin-top:8px;font-size:.8rem;min-height:34px;background:var(--flaeche-1)}
.feld small{font-size:.66rem}
.feld.gross{min-height:76px}
.cursor::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--graphit);vertical-align:-2px;margin-left:1px;animation:blinken 1s steps(2) infinite}
@keyframes blinken{50%{opacity:0}}
.g-form .mini{display:block;text-align:center;margin-top:10px;background:var(--graphit);color:#fff;font:600 .8rem var(--lauf);padding:9px;border-radius:10px}
.gesendet{margin-top:8px;font-weight:600;color:#1c8a4d;color:light-dark(#1c8a4d,#9DB3F2);font-size:.82rem;opacity:var(--ok,0)}
@media(max-width:860px){
  .kontakt-raster{grid-template-columns:1fr;gap:16px}
  .kontakt-kulisse{align-items:flex-start;padding-top:calc(var(--kopf) + 8px)}
  .kontakt h2{font-size:1.7rem}
  .zeilen{margin-top:12px}.zeilen li{display:none;padding:10px 0}.zeilen li.jetzt{display:grid}
  .buehne-bild{aspect-ratio:auto;height:52svh}
}

/* Explosion und Werk: Text-Leisten über dem Film */
.schichten{position:absolute;left:max(20px,calc((100vw - var(--breite))/2));top:50%;transform:translateY(-50%);width:min(380px,36vw);list-style:none;margin:0;padding:0}
.schichten-kopf{margin-bottom:22px}
.schichten-kopf .film-gross{font-size:clamp(1.9rem,3.4vw,3rem)}
.schichten li{display:grid;grid-template-columns:40px 1fr;padding:11px 0;border-top:1px solid rgba(139,148,155,.28);opacity:.32;transition:opacity .35s,padding .35s}
.schichten li:last-child{border-bottom:1px solid rgba(139,148,155,.28)}
.schichten li span{font:600 .74rem var(--lauf);letter-spacing:.1em;color:var(--stahl);padding-top:3px}
.schichten li b{font:700 1.02rem var(--titel);color:var(--tinte)}
.schichten li p{font-size:.86rem;color:var(--grau);max-height:0;overflow:hidden;transition:max-height .4s}
.schichten li.an{opacity:1}
.schichten li.jetzt span{color:var(--akzent-text)}
.schichten li.jetzt p{max-height:4em}
.zaehler{position:absolute;right:max(20px,calc((100vw - var(--breite))/2));top:calc(var(--kopf) + 24px);text-align:right;font:600 .72rem var(--lauf);letter-spacing:.16em;text-transform:uppercase;color:var(--stahl)}
.zaehler b{display:block;font:800 clamp(3rem,6vw,5.4rem)/1 var(--titel);font-stretch:112%;color:var(--tinte);letter-spacing:-.04em}
.zaehler b i{font-style:normal;color:var(--silber)}
.kette{position:absolute;left:0;right:0;bottom:34px}
.kette ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kette li{background:rgb(var(--flaeche-1-rgb) / .7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.95);border-radius:16px;padding:14px 16px;opacity:.4;transform:translateY(10px);transition:opacity .4s,transform .4s,box-shadow .4s}
.kette li span{display:block;font:600 .68rem var(--lauf);letter-spacing:.14em;color:var(--stahl);margin-bottom:4px}
.kette li b{font:700 .98rem var(--titel);color:var(--tinte)}
.kette li p{font-size:.8rem;color:var(--grau);margin-top:2px}
.kette li.an{opacity:1;transform:none;box-shadow:0 18px 40px rgb(var(--schatten-rgb) / .10)}
.kette li.an span{color:var(--akzent-text)}
.werk-kopf{position:absolute;left:0;right:0;top:calc(var(--kopf) + 30px)}
.werk-kopf .innen{max-width:520px}
.werk-video{object-position:50% 70%}
@media(max-width:860px){
  .schichten{left:20px;right:20px;width:auto;top:calc(var(--kopf) + 16px);transform:none}
  .schichten li{display:none}.schichten li.jetzt{display:grid}
  .schichten-kopf{margin-bottom:10px}
  .zaehler{top:auto;bottom:28px}
  .explode-video,.explode-bild{object-position:62% 50%}
  .kette ol{grid-template-columns:1fr}
  .kette li{display:none}.kette li.jetzt{display:block}
}

/* Normale Abschnitte */
.abschnitt{padding:clamp(90px,12vw,150px) 0}
.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:56px}

/* Draussen: Register statt Diagramm */
.register{border-top:1px solid var(--rand-linie)}
.register-zeile{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:24px;padding:26px 0;border-bottom:1px solid var(--rand-linie);align-items:baseline}
.register-zeile h3{font:760 clamp(1.4rem,2.4vw,2rem)/1.05 var(--titel);font-stretch:110%;letter-spacing:-.025em}
.register-zeile p{color:var(--grau)}
.register-zeile ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.register-zeile li{background:var(--metall);border:1px solid #fff;box-shadow:0 2px 8px rgb(var(--schatten-rgb) / .06);border-radius:99px;padding:6px 14px;font:600 .82rem var(--lauf);color:var(--tinte)}
.register-zeile li.extra{background:transparent;border:1px dashed var(--silber);box-shadow:none;color:var(--grau)}
.legende{margin-top:18px;font-size:.88rem;color:var(--grau)}
@media(max-width:860px){.register-zeile{grid-template-columns:1fr;gap:10px}}

/* Pakete auf Metall */
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.paket{border-radius:28px;padding:clamp(28px,3.4vw,44px);background:var(--metall);border:1px solid #fff;box-shadow:0 30px 60px -36px rgb(var(--schatten-rgb) / .35),inset 0 1px 0 #fff;display:flex;flex-direction:column}
.paket.mitte{background:var(--metall-dunkel);border-color:#2D3339;color:#C6CDD2}
.paket.mitte h3,.paket.mitte .preis{color:#fff}
.paket .name{font:600 .74rem var(--lauf);letter-spacing:.16em;text-transform:uppercase;color:var(--stahl)}
.paket.mitte .name{color:var(--akzent-text)}
.paket h3{font:740 1.55rem/1.1 var(--titel);font-stretch:108%;margin-top:10px;letter-spacing:-.02em}
.preis{font:780 2.6rem/1 var(--titel);font-stretch:108%;letter-spacing:-.03em;color:var(--tinte);margin:24px 0 4px}
.preis small{font:500 .86rem var(--lauf);color:var(--stahl);letter-spacing:0;margin-left:6px}
.paket ul{list-style:none;margin:22px 0 30px;padding:0;display:grid;gap:11px;font-size:.96rem}
.paket li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.paket li::before{content:"";width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--akzent-flaeche)}
.paket .knopf{margin-top:auto;align-self:flex-start}
.paket.mitte .knopf{background:var(--akzent-flaeche);color:var(--auf-akzent)}
.pakete-fuss{margin-top:22px;font-size:.92rem;color:var(--grau)}
@media(max-width:900px){.pakete{grid-template-columns:1fr}}

/* Referenzen als Index */
.index{border-top:1px solid var(--rand-linie)}
.index a{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rand-linie);text-decoration:none;transition:padding .3s}
.index span{font:600 .74rem var(--lauf);letter-spacing:.12em;color:var(--stahl)}
.index b{font:740 clamp(1.3rem,2.6vw,2.2rem)/1.05 var(--titel);font-stretch:110%;letter-spacing:-.025em;color:var(--tinte)}
.index i{font-style:normal;color:var(--grau);font-size:.92rem}
@media(hover:hover){.index a:hover{padding-left:14px}.index a:hover b{color:var(--akzent-tief)}}

/* Fragen */
.fragen{max-width:880px}
.fragen details{border-top:1px solid var(--rand-linie);padding:22px 0}
.fragen details:last-child{border-bottom:1px solid var(--rand-linie)}
.fragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font:700 1.15rem var(--titel);color:var(--tinte)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";color:var(--stahl);font-weight:400;font-size:1.5rem;line-height:1}
.fragen details[open] summary::after{content:"–"}
.fragen p{color:var(--grau);margin-top:12px;max-width:66ch}

/* Schluss */
.schluss{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;background:var(--grund)}
.schluss img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 75%;transform:scale(calc(1.12 - var(--sicht,0) * .12))}
.schluss .film-schleier{background:linear-gradient(90deg,rgb(var(--grund-rgb) / .95) 0%,rgb(var(--grund-rgb) / .7) 40%,rgb(var(--grund-rgb) / 0) 70%)}
.schluss .rahmen{position:relative}
.schluss .innen{max-width:620px}
@media(max-width:760px){.schluss{align-items:flex-start;padding-top:80px}.schluss .film-schleier{background:linear-gradient(180deg,rgb(var(--grund-rgb) / .96) 0%,rgb(var(--grund-rgb) / .8) 50%,rgb(var(--grund-rgb) / .1) 80%)}}

/* Lichtwahl */
.lichtwahl{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 16px;border-radius:99px;background:rgb(var(--flaeche-1-rgb) / .82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #fff;box-shadow:0 14px 40px rgb(var(--schatten-rgb) / .16);font:600 .76rem var(--lauf);letter-spacing:.06em;color:var(--tinte)}
.lichtwahl button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;outline:1px solid var(--silber);background:var(--f);box-shadow:0 0 10px var(--f);cursor:pointer;padding:0}
.lichtwahl button[aria-pressed="true"]{outline:2px solid var(--graphit);outline-offset:2px}
.lichtwahl output{color:var(--grau);font-weight:500;min-width:62px}
@media(max-width:560px){.lichtwahl span,.lichtwahl output{display:none}}

.auf{opacity:1;transform:none;transition:opacity .8s,transform .8s}
.js .auf:not(.da){opacity:0;transform:translateY(28px)}
@media(prefers-reduced-motion:reduce){.js .auf:not(.da){opacity:1;transform:none}.rollen::after,.anruf-knopf::before,.anruf-knopf::after{animation:none}}

/* Nachschliff */
.wege-woerter li{font-size:clamp(2.4rem,6.2vw,6rem)}
.wege-woerter li.an{transform:none}
.werk-video{transform:scale(1.12);transform-origin:50% 62%}
.werk-kopf .innen{max-width:430px;background:rgb(var(--grund-rgb) / .72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.9);border-radius:24px;padding:26px 28px;box-shadow:0 24px 60px rgb(var(--schatten-rgb) / .10)}
.werk-kopf .film-gross{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.werk-kopf .marke-zeile{margin-bottom:14px}
.kette{bottom:96px}
[data-film="werk"] .zeitleiste{display:none}
.zaehler{color:var(--grau)}
.explode-bild,.explode-video{object-position:62% 50%}
.film-schleier.stark{background:linear-gradient(90deg,rgb(var(--grund-rgb) / .95) 0%,rgb(var(--grund-rgb) / .75) 30%,rgb(var(--grund-rgb) / 0) 50%)}
@media(max-width:860px){.kette{bottom:84px}.werk-kopf .innen{padding:18px 20px}}
@media(max-width:520px){.marke{font-size:0;gap:0}.kopf .knopf{padding:0 16px;font-size:.84rem}}

/* ===================== Ganze Website ===================== */
.marke img{height:46px;width:auto}
.kopf .rahmen{gap:28px}
.kopf-knopf{margin-left:auto}
.kopf.auf-film:not(.gerollt){background:transparent}
.unterseite .kopf{background:rgb(var(--grund-rgb) / .86);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 1px 0 rgb(var(--schatten-rgb) / .06)}
.unterseite main{padding-top:var(--kopf)}
.haupt{align-items:center;margin-right:0}
.haupt>a,.nav-knopf{font:500 .94rem var(--lauf);color:var(--text);opacity:.82;text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer}
.haupt>a:hover,.nav-knopf:hover,.nav-knopf[aria-expanded="true"]{opacity:1}
.nav-knopf::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s}
.nav-knopf[aria-expanded="true"]::after{transform:translateY(0) rotate(-135deg)}
.mega{position:fixed;left:0;right:0;top:var(--kopf);background:rgba(250,251,251,.97);background:light-dark(rgba(250,251,251,.97),rgba(14,16,18,.97));background:light-dark(rgba(250,251,251,.97),rgba(26,30,34,.97));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--rand-linie);box-shadow:0 40px 80px -30px rgb(var(--schatten-rgb) / .22);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s,visibility .3s}
.mega.offen{opacity:1;visibility:visible;transform:none}
.mega-gitter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 40px;padding:36px 0 28px}
.mega-gitter a{display:block;padding:7px 0;font:500 .98rem var(--lauf);color:var(--tinte);text-decoration:none}
.mega-gitter a:hover{color:var(--akzent-tief)}
.mega-titel{font:600 .72rem var(--lauf);letter-spacing:.16em;text-transform:uppercase;color:var(--stahl);margin:0 0 10px}
.mega-fuss{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 28px;border-top:1px solid var(--rand-linie);padding-top:18px}
.mega-fuss a{font-weight:600}
.menue-auf{display:none;margin-left:12px;background:var(--metall);border:1px solid #fff;border-radius:99px;padding:10px 16px;font:600 .88rem var(--lauf);color:var(--tinte);box-shadow:0 6px 18px rgb(var(--schatten-rgb) / .10)}
.menue{position:fixed;inset:0;z-index:80;background:var(--grund);overflow-y:auto;padding:16px 0 40px}
.menue-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.menue-kopf img{height:42px;width:auto}
.menue-kopf button{background:var(--graphit);color:#fff;border:0;border-radius:99px;padding:10px 16px;font:600 .88rem var(--lauf)}
.menue .knopf{width:100%;margin-bottom:26px}
.menue .mega-titel{margin-top:22px}
.menue-liste{display:grid;border-top:1px solid var(--rand-linie)}
.menue-liste a{padding:13px 0;border-bottom:1px solid var(--rand-linie);font:650 1.18rem var(--titel);color:var(--tinte);text-decoration:none}
@media(max-width:1100px){.haupt{display:none}.menue-auf{display:inline-flex}}
@media(max-width:620px){.kopf-knopf{display:none}.marke img{height:38px}.menue-auf{margin-left:auto}}

/* Startseite: Leistungen */
.leistungen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.leistung{position:relative;display:block;border-radius:26px;overflow:hidden;background:var(--flaeche-2);aspect-ratio:4/3.4;text-decoration:none;box-shadow:0 30px 60px -40px rgb(var(--schatten-rgb) / .4)}
.leistung img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.leistung::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(var(--grund-rgb) / .97) 18%,rgb(var(--grund-rgb) / 0) 58%)}
.leistung-text{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;display:grid;gap:4px}
.leistung-text span{font:600 .72rem var(--lauf);letter-spacing:.14em;color:var(--akzent-tief)}
.leistung-text b{font:760 1.5rem/1.1 var(--titel);font-stretch:108%;color:var(--tinte);letter-spacing:-.02em}
.leistung-text em{font-style:normal;color:var(--grau);font-size:.94rem}
@media(hover:hover){.leistung:hover img{transform:scale(1.06)}}
@media(max-width:900px){.leistungen{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.leistungen{grid-template-columns:1fr}}

/* Startseite: Galerie quer */
.galerie{position:relative;height:420vh;background:var(--metall-dunkel)}
.galerie-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.galerie-kulisse::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px);pointer-events:none}
.galerie-spur{display:flex;gap:24px;padding-inline:max(20px,calc((100vw - var(--breite))/2));will-change:transform;align-items:stretch}
.galerie-start{flex:0 0 min(460px,82vw);display:flex;flex-direction:column;justify-content:center;padding-right:30px}
.galerie-start .marke-zeile{color:var(--akzent-text)}
.galerie-start h2{color:#fff}
.galerie-start .lead{color:#A9B2B8}
.galerie-hinweis{margin-top:28px;font:600 .74rem var(--lauf);letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-text)}
.raum{flex:0 0 min(560px,82vw);border-radius:30px;overflow:hidden;background:var(--metall);border:1px solid rgba(255,255,255,.9);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);display:flex;flex-direction:column}
.raum-bild{aspect-ratio:4/2.6;overflow:hidden}
.raum-bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.raum-text{padding:24px 28px 30px}
.raum-text span{font:600 .72rem var(--lauf);letter-spacing:.14em;color:var(--akzent-tief)}
.raum-text h3{font:770 clamp(1.6rem,2.6vw,2.2rem)/1.05 var(--titel);font-stretch:110%;letter-spacing:-.025em;margin:6px 0 8px}
.raum-text p{color:var(--grau)}
.raum-text ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.raum-text li{background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:99px;padding:6px 13px;font:600 .8rem var(--lauf);color:var(--tinte)}
.galerie-leiste{position:absolute;left:max(20px,calc((100vw - var(--breite))/2));right:max(20px,calc((100vw - var(--breite))/2));bottom:40px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.galerie-leiste span{display:block;height:100%;background:var(--akzent-flaeche);transform:scaleX(var(--p,0));transform-origin:left}
@media(max-width:700px){.raum-text{padding:18px 20px 22px}.raum-bild{aspect-ratio:4/2.4}.galerie-start h2{font-size:2rem}}

/* Fragen: Aufklapper */
.frage{border-radius:20px;background:var(--metall);border:1px solid #fff;box-shadow:0 14px 34px -24px rgb(var(--schatten-rgb) / .35);margin-bottom:10px;overflow:hidden}
.frage button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;cursor:pointer;font:700 1.08rem/1.3 var(--titel);color:var(--tinte)}
.frage button:focus-visible{outline:2px solid var(--licht);outline-offset:-2px}
.frage button small{display:block;font:600 .7rem var(--lauf);letter-spacing:.14em;color:var(--akzent-tief);margin-bottom:4px}
.frage i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--graphit);position:relative;transition:transform .35s,background .35s}
.frage i::before,.frage i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:var(--flaeche-1);transform:translate(-50%,-50%)}
.frage i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s}
.frage.offen i{background:var(--akzent-flaeche)}
.frage.offen i::after{transform:translate(-50%,-50%) rotate(0)}
.antwort{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.antwort>div{overflow:hidden;padding:0 24px}
.frage.offen .antwort{grid-template-rows:1fr}
.frage.offen .antwort>div{padding-bottom:22px}
.antwort p{color:var(--grau);margin-top:10px;max-width:68ch}
.antwort p:first-child{margin-top:0}
.fragen-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.fragen-seite{position:sticky;top:calc(var(--kopf) + 30px)}
.fragen-seite figure{margin:28px 0;border-radius:24px;overflow:hidden;aspect-ratio:16/10}
.fragen-seite img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
@media(max-width:900px){.fragen-raster{grid-template-columns:1fr}.fragen-seite{position:static}.fragen-seite figure{display:none}}

/* Unterseiten */
.brot{display:flex;flex-wrap:wrap;gap:8px;font:500 .84rem var(--lauf);color:var(--stahl);margin-bottom:26px}
.brot a{text-decoration:none}
.brot a:hover{color:var(--tinte)}
.brot b{color:var(--tinte);font-weight:600}
.s-held{padding:clamp(40px,6vw,90px) 0 clamp(50px,6vw,90px);background:linear-gradient(180deg,var(--grund) 0%,var(--flaeche-1) 100%);overflow:hidden}
.s-held-raster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.s-titel{font:800 clamp(2.4rem,5.4vw,5rem)/.98 var(--titel);font-stretch:110%;letter-spacing:-.035em;color:var(--tinte);margin:0;hyphens:auto;overflow-wrap:break-word}
.s-titel em{font-style:normal;color:var(--stahl)}
.s-held .lead{font-size:1.18rem}
.s-held-bild{margin:0;border-radius:32px;overflow:hidden;aspect-ratio:4/3.3;box-shadow:0 50px 100px -50px rgb(var(--schatten-rgb) / .45)}
.s-held-bild img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - var(--sicht,0) * .1))}
.s-held.schlicht .s-titel{max-width:18ch}
@media(max-width:900px){.s-held-raster{grid-template-columns:1fr}.s-held-bild{order:-1;aspect-ratio:16/10}}
.kapitel{padding:clamp(54px,7vw,100px) 0;border-top:1px solid var(--rand-linie);background:var(--flaeche-1)}
.kapitel:nth-of-type(even){background:var(--grund)}
.kapitel.einleitung{border-top:0;padding-top:0}
.k-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.k-kopf{position:sticky;top:calc(var(--kopf) + 28px)}
.k-nr{display:block;font:800 clamp(3rem,5vw,4.6rem)/1 var(--titel);font-stretch:112%;letter-spacing:-.04em;background:linear-gradient(180deg,#C9CFD4,#8B949B);background:linear-gradient(180deg,light-dark(#C9CFD4,#23282D),#8B949B);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.k-kopf h2{font-size:clamp(1.7rem,2.8vw,2.6rem);hyphens:auto;overflow-wrap:break-word}
.k-kopf h2 em{font-style:normal;color:var(--stahl)}
.k-inhalt{max-width:760px}
.einleitung .k-inhalt{max-width:820px}
.k-inhalt>p{font-size:1.06rem;color:var(--text);margin-top:16px}
.k-inhalt>p:first-child{margin-top:0}
.k-inhalt a{color:var(--tinte);text-decoration-color:var(--licht);text-decoration-thickness:2px;text-underline-offset:3px}
.k-inhalt a:hover{color:var(--akzent-tief)}
.reihen{list-style:none;padding:0;margin:20px 0;border-top:1px solid var(--rand-linie)}
.reihen li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--rand-linie);color:var(--text)}
.reihen li::before{content:"";position:absolute;left:4px;top:1.4em;width:8px;height:8px;border-radius:50%;background:var(--akzent-flaeche);box-shadow:0 0 10px var(--licht)}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin:22px 0}
.karten.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.karten.zwei{grid-template-columns:1fr}}
.karte{border-radius:22px;padding:24px;background:var(--metall);border:1px solid #fff;box-shadow:0 20px 40px -30px rgb(var(--schatten-rgb) / .35)}
.karte-nr{font:600 .7rem var(--lauf);letter-spacing:.14em;color:var(--akzent-tief)}
.karte h3{font:720 1.18rem/1.2 var(--titel);margin:8px 0 8px;letter-spacing:-.01em}
.karte p{color:var(--grau);font-size:.96rem;margin-top:8px}
.karte p.domain{font:600 .8rem var(--lauf);color:var(--stahl);letter-spacing:.04em;margin-top:0}
.karte p.punkt,.antwort p.punkt{padding-left:16px;position:relative}
.karte p.punkt::before,.antwort p.punkt::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--akzent-flaeche)}
.zitat{margin:26px 0;padding:26px 30px;border-radius:24px;background:var(--metall-dunkel);color:#E8ECEF;font:600 1.2rem/1.45 var(--titel)}
.k-inhalt .frage{margin-top:10px}
@media(max-width:900px){.k-raster{grid-template-columns:1fr}.k-kopf{position:static}}
.band{padding:30px 0;background:var(--flaeche-1)}
.band-tafel{border-radius:28px;background:var(--metall-dunkel);padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 40px;align-items:center;position:relative;overflow:hidden}
.band-tafel .marke-zeile{color:var(--akzent-text);margin-bottom:10px}
.band-titel{font:760 clamp(1.5rem,2.6vw,2.3rem)/1.05 var(--titel);font-stretch:108%;color:#fff;letter-spacing:-.02em}
.band-titel em{font-style:normal;color:#8E989F}
.check-form.klein{margin:0}
.band .check-meldung{grid-column:1/-1}
@media(max-width:800px){.band-tafel{grid-template-columns:1fr}}
.verwandt{background:var(--grund);border-top:1px solid var(--rand-linie)}
.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kachel{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--metall);border:1px solid #fff;box-shadow:0 26px 50px -36px rgb(var(--schatten-rgb) / .4);text-decoration:none;transition:transform .35s}
.kachel-bild{aspect-ratio:16/10;overflow:hidden;display:block}
.kachel-bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform .8s}
.kachel-text{display:grid;gap:6px;padding:20px 22px 24px}
.kachel-marke{font:600 .7rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-tief)}
.kachel-text b{font:720 1.2rem/1.2 var(--titel);color:var(--tinte)}
.kachel-text span:last-child{font-size:.9rem;color:var(--grau)}
@media(hover:hover){.kachel:hover{transform:translateY(-4px)}.kachel:hover img{transform:scale(1.16)}}
@media(max-width:900px){.kacheln{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.kacheln{grid-template-columns:1fr}}

/* Fuss */
.fuss{background:var(--metall-dunkel);color:#9AA3AA;padding:70px 0 30px}
.fuss-gitter{display:grid;grid-template-columns:1.3fr repeat(5,minmax(0,1fr));gap:30px}
.fuss-marke img{height:64px;width:auto;margin-bottom:18px}
.fuss-marke p{font-size:.9rem;margin-top:8px}
.fuss-kontakt{color:#E8ECEF;user-select:all}
.fuss-titel{font:600 .7rem var(--lauf);letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-text);margin-bottom:12px}
.fuss-gitter a{display:block;padding:4px 0;font-size:.9rem;text-decoration:none;color:#C5CCD1}
.fuss-gitter a:hover{color:#fff}
.fuss-ende{margin-top:50px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.84rem}
.fuss-ende a{margin-left:16px;text-decoration:none;color:#C5CCD1}
@media(max-width:1000px){.fuss-gitter{grid-template-columns:1fr 1fr 1fr}.fuss-marke{grid-column:1/-1}}
@media(max-width:600px){.fuss-gitter{grid-template-columns:1fr 1fr}.fuss-ende a{margin:0 14px 0 0}}

.lichtwahl button[data-licht="wayyoo"]{background:linear-gradient(135deg,var(--r) 50%,var(--f) 50%)}
.kopf .mega-gitter{display:grid;align-items:start;gap:24px 40px}
.marke img{height:58px}
.kopf{--kopf:84px;height:84px}
:root{--kopf:84px}
.s-titel{hyphens:manual;font-size:clamp(2.3rem,4.6vw,4.4rem)}
.karten{align-items:start}
.zwischen-titel{font:720 1.25rem/1.25 var(--titel);color:var(--tinte);margin:34px 0 4px}
@media(max-width:620px){.marke img{height:46px}}
.mega{background:#FAFBFB;background:light-dark(#FAFBFB,#0E1012)}

/* ===== Teil 4: Ablauf als echte Oberfläche ===== */
.ablauf{position:relative;height:460vh;background:var(--metall-dunkel)}
.ablauf-kulisse{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.ablauf-kulisse::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),radial-gradient(60% 50% at 70% 50%,color-mix(in srgb,var(--licht) 14%,transparent),transparent 70%);pointer-events:none}
.ablauf-raster{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:center;padding-top:calc(var(--kopf) - 20px)}
.ablauf-text .marke-zeile{color:var(--akzent-text)}
.ablauf-text h2{color:#fff;font-size:clamp(1.9rem,3vw,2.9rem)}
.ablauf-text h2 em{font-style:normal;color:#8E989F}
.ablauf-schritte{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.1)}
.ablauf-schritte li{display:grid;grid-template-columns:44px 1fr;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);opacity:.35;transition:opacity .4s}
.ablauf-schritte span{font:600 .72rem var(--lauf);letter-spacing:.14em;color:#8E989F;padding-top:4px}
.ablauf-schritte b{font:700 1.05rem var(--titel);color:#fff}
.ablauf-schritte p{color:#A9B2B8;font-size:.9rem;max-height:0;overflow:hidden;transition:max-height .45s}
.ablauf-schritte li.an{opacity:1}
.ablauf-schritte li.jetzt span{color:var(--akzent-text)}
.ablauf-schritte li.jetzt p{max-height:4em;margin-top:4px}
.ablauf-leiste{position:absolute;left:max(20px,calc((100vw - var(--breite))/2));right:max(20px,calc((100vw - var(--breite))/2));bottom:34px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.ablauf-leiste span{display:block;height:100%;background:var(--akzent-flaeche);transform:scaleX(var(--p,0));transform-origin:left}

.ui-buehne{position:relative;padding:30px 60px 70px 0}
.ui-fenster{border-radius:18px;overflow:hidden;background:#F7F8F9;background:light-dark(#F7F8F9,#0E1012);border:1px solid rgba(255,255,255,.6);box-shadow:0 60px 120px -40px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.2);font-size:13px;color:#1D2226;color:light-dark(#1D2226,#D5DADE);transform:perspective(1800px) rotateY(-4deg) rotateX(2deg);transform-origin:left center}
.ui-leiste{display:flex;align-items:center;gap:6px;padding:9px 14px;background:linear-gradient(#EDEFF1,#E3E6E9);background:linear-gradient(light-dark(#EDEFF1,#0E1012),light-dark(#E3E6E9,#23282D));border-bottom:1px solid #D5DADE;border-bottom-color:light-dark(#D5DADE,#2E343A);font-size:11px;color:#6B747B;color:light-dark(#6B747B,#9AA3AA)}
.ui-leiste i{width:10px;height:10px;border-radius:50%;background:#C9CED3;background:light-dark(#C9CED3,#23282D)}
.ui-leiste i:nth-child(1){background:#F0726A}.ui-leiste i:nth-child(2){background:#F5C04E}.ui-leiste i:nth-child(3){background:#5CC46B}
.ui-leiste span{margin-left:10px;background:var(--flaeche-1);border-radius:6px;padding:3px 12px;flex:1;max-width:320px}
.ui-innen{display:grid;grid-template-columns:150px 1fr;min-height:clamp(300px,42vh,420px)}
.ui-seite{background:#1E2328;color:#AEB6BC;padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.ui-logo{color:#fff;font:700 13px var(--titel);margin:0 6px 14px;display:flex;align-items:center;gap:8px}
.ui-logo::before{content:"";width:18px;height:18px;border-radius:6px;background:var(--akzent-flaeche)}
.ui-seite span{padding:7px 8px;border-radius:8px;display:flex;justify-content:space-between}
.ui-seite span.an{background:rgba(255,255,255,.08);color:#fff}
.ui-seite em{font-style:normal;background:var(--akzent-flaeche);color:#16191C;color:light-dark(#16191C,#F3F5F6);border-radius:99px;padding:0 7px;font-weight:700;font-size:11px}
.ui-haupt{position:relative;padding:16px 18px;overflow:hidden}
.ui-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ui-kopf b{font:700 16px var(--titel)}
.ui-suche{background:var(--flaeche-1);border:1px solid #E1E5E8;border-color:light-dark(#E1E5E8,#2E343A);border-radius:8px;padding:5px 12px;color:#9AA3AA;font-size:12px;min-width:140px}
.ui-liste{display:grid;gap:6px}
.ui-zeile{display:grid;grid-template-columns:30px 1fr auto 52px;gap:10px;align-items:center;background:var(--flaeche-1);border:1px solid #E6E9EC;border-color:light-dark(#E6E9EC,#2E343A);border-radius:10px;padding:9px 12px;transition:transform .5s,opacity .5s,box-shadow .5s,border-color .5s}
.ui-zeile b{font-weight:650;font-size:13px}
.ui-zeile small{display:block;color:#7B848B;color:light-dark(#7B848B,#9AA3AA);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-zeile time{color:#9AA3AA;font-size:11px;text-align:right}
.ui-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--lauf);font-style:normal;background:#FDE9C8;background:light-dark(#FDE9C8,#2E2618);color:#9A5F06;color:light-dark(#9A5F06,#9AA3AA)}
.ui-avatar.b{background:#DCEBFA;background:light-dark(#DCEBFA,#23282D);color:#2D6A9F;color:light-dark(#2D6A9F,#9DB3F2)}.ui-avatar.c{background:#E3F4EA;background:light-dark(#E3F4EA,#0E1012);color:#2E7D4F;color:light-dark(#2E7D4F,#9DB3F2)}.ui-avatar.d{background:#EEE6F7;background:light-dark(#EEE6F7,#23282D);color:#6A4A93;color:light-dark(#6A4A93,#9DB3F2)}
.ui-status{font-size:11px;font-weight:650;padding:3px 9px;border-radius:99px;background:#FFF1D6;background:light-dark(#FFF1D6,#2E2618);color:#9A5F06;color:light-dark(#9A5F06,#9AA3AA);white-space:nowrap}
.ui-status.fertig{background:#E6F4EC;background:light-dark(#E6F4EC,#0E1012);color:#2E7D4F;color:light-dark(#2E7D4F,#9DB3F2)}.ui-status.termin{background:#E3EEF9;background:light-dark(#E3EEF9,#23282D);color:#2D6A9F;color:light-dark(#2D6A9F,#9DB3F2)}
.ui-zeile.neu{opacity:0;transform:translateY(-14px)}
.ab-1 .ui-zeile.neu{opacity:1;transform:none;border-color:var(--licht);box-shadow:0 0 0 3px color-mix(in srgb,var(--licht) 22%,transparent)}
.ui-detail{position:absolute;top:56px;right:18px;bottom:16px;width:min(46%,250px);background:var(--flaeche-1);border:1px solid #E1E5E8;border-color:light-dark(#E1E5E8,#2E343A);border-radius:12px;padding:14px;box-shadow:-20px 0 40px -20px rgb(var(--schatten-rgb) / .25);transform:translateX(115%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ab-2 .ui-detail{transform:none}
.ui-detail-kopf{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.ui-detail-kopf small{display:block;color:#7B848B;color:light-dark(#7B848B,#9AA3AA);font-size:11.5px}
.ui-detail dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0 0 12px;font-size:11.5px}
.ui-detail dt{color:#9AA3AA}.ui-detail dd{margin:0}
.ui-verlauf{display:grid;gap:6px;border-top:1px solid #EEF1F3;border-top-color:light-dark(#EEF1F3,#2E343A);padding-top:10px}
.ui-verlauf span{font-size:11.5px;color:#B7BEC4;padding-left:20px;position:relative;transition:color .4s}
.ui-verlauf span::before{content:"";position:absolute;left:0;top:2px;width:12px;height:12px;border-radius:50%;border:1.5px solid #D5DADE;border-color:light-dark(#D5DADE,#2E343A);transition:background .4s,border-color .4s}
.ab-2 .v1,.ab-3 .v2,.ab-4 .v3,.ab-5 .v4{color:#1D2226;color:light-dark(#1D2226,#D5DADE)}
.ab-2 .v1::before,.ab-3 .v2::before,.ab-4 .v3::before,.ab-5 .v4::before{background:var(--akzent-flaeche);border-color:var(--licht)}
.ui-toast{position:absolute;top:0;right:30px;display:flex;gap:12px;align-items:center;background:rgb(var(--flaeche-1-rgb) / .92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:14px;padding:12px 16px;box-shadow:0 20px 50px rgba(0,0,0,.35);font-size:13px;opacity:0;transform:translateY(-14px);transition:opacity .45s,transform .45s}
.ui-toast i{width:10px;height:10px;border-radius:50%;background:var(--akzent-flaeche);box-shadow:0 0 12px var(--licht)}
.ui-toast small{display:block;color:#6B747B;color:light-dark(#6B747B,#9AA3AA);font-size:12px}
.ab-1:not(.ab-2) .ui-toast{opacity:1;transform:none}
.ui-handy{position:absolute;right:0;bottom:0;width:clamp(170px,22%,230px);aspect-ratio:9/18.5;border-radius:34px;padding:9px;background:linear-gradient(145deg,#3A4046,#16191C);box-shadow:0 50px 90px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.15);transform:translateY(60px) rotate(4deg);opacity:0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s}
.ab-3 .ui-handy{transform:rotate(4deg);opacity:1}
.ui-handy-innen{height:100%;border-radius:26px;background:#F3F5F6;background:light-dark(#F3F5F6,#0E1012);overflow:hidden;padding:26px 10px 10px;font-size:11px}
.ui-mail-kopf{padding:0 4px 8px;border-bottom:1px solid #E1E5E8;border-bottom-color:light-dark(#E1E5E8,#2E343A)}
.ui-mail-kopf small{display:block;color:#7B848B;color:light-dark(#7B848B,#9AA3AA);font-size:10px}
.ui-mail{margin-top:8px;background:var(--flaeche-1);border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgb(var(--schatten-rgb) / .08);padding-bottom:10px}
.ui-mail-band{height:46px;background:var(--metall-dunkel);position:relative}
.ui-mail-band::after{content:"";position:absolute;left:12px;top:14px;width:18px;height:18px;border-radius:6px;background:var(--akzent-flaeche)}
.ui-mail p{padding:0 12px;margin-top:8px;color:#4A535A;color:light-dark(#4A535A,#9AA3AA);line-height:1.45}
.ui-mail .ui-mail-titel{font:750 15px var(--titel);color:#16191C;color:light-dark(#16191C,#F3F5F6);margin-top:12px}
.ui-mail-knopf{display:block;margin:12px 12px 10px;text-align:center;background:var(--akzent-flaeche);color:#16191C;color:light-dark(#16191C,#F3F5F6);font-weight:700;border-radius:99px;padding:7px}
.ui-mail small{display:block;padding:0 12px;color:#9AA3AA;font-size:9.5px}
.ui-kalender{position:absolute;left:-30px;bottom:6px;width:clamp(220px,34%,290px);background:var(--flaeche-1);border-radius:16px;padding:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);font-size:12px;opacity:0;transform:translateY(40px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.ab-4 .ui-kalender{opacity:1;transform:none}
.ui-kal-kopf{display:flex;justify-content:space-between;margin-bottom:10px}
.ui-kal-kopf small{color:#9AA3AA}
.ui-woche{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;text-align:center}
.ui-woche span{font-size:10.5px;color:#7B848B;color:light-dark(#7B848B,#9AA3AA)}
.ui-woche i{height:30px;border-radius:7px;background:#F1F3F5;background:light-dark(#F1F3F5,#0E1012);font-style:normal}
.ui-woche i.belegt{background:#E3E7EA;background:light-dark(#E3E7EA,#23282D)}
.ui-woche i.ziel{height:auto;grid-row:span 1;background:#FFF1D6;background:light-dark(#FFF1D6,#2E2618);border:1.5px dashed var(--licht);display:grid;place-content:center;padding:4px 2px;transition:background .4s}
.ui-woche i.ziel b,.ui-woche i.ziel small{opacity:0;transition:opacity .4s;font-size:9.5px;line-height:1.2;display:block}
.ab-4 .ui-woche i.ziel{background:var(--akzent-flaeche);border-style:solid}
.ab-4 .ui-woche i.ziel b,.ab-4 .ui-woche i.ziel small{opacity:1;color:#16191C;color:light-dark(#16191C,#F3F5F6)}
.ui-liste-chip{position:absolute;left:38%;top:-6px;display:flex;align-items:baseline;gap:8px;background:var(--flaeche-1);border-radius:99px;padding:9px 18px;box-shadow:0 20px 50px rgba(0,0,0,.35);font-size:12px;opacity:0;transform:translateY(-12px);transition:opacity .45s,transform .45s}
.ui-liste-chip b{font:800 18px var(--titel)}
.ui-liste-chip small{color:#7B848B;color:light-dark(#7B848B,#9AA3AA)}
.ab-5 .ui-liste-chip{opacity:1;transform:none}
@media(max-width:980px){
  .ablauf-raster{grid-template-columns:1fr;gap:14px;padding-top:calc(var(--kopf) + 4px);align-items:start}
  .ablauf-kulisse{align-items:flex-start}
  .ablauf-text h2{font-size:1.5rem}
  .ablauf-schritte{margin-top:10px}.ablauf-schritte li{display:none;padding:8px 0}.ablauf-schritte li.jetzt{display:grid}
  .ui-buehne{padding:20px 20px 40px 0}
  .ui-fenster{transform:none;font-size:11px}
  .ui-innen{grid-template-columns:1fr;min-height:250px}.ui-seite{display:none}
  .ui-zeile{grid-template-columns:26px 1fr auto}.ui-zeile time{display:none}
  .ui-detail{width:62%}
  .ui-handy{width:120px;right:-6px}
  .ui-kalender{left:0;width:200px}
  .ui-liste-chip{left:auto;right:30px;top:auto;bottom:-10px}
}
.ui-handy{right:-56px;bottom:-34px;width:clamp(160px,19%,205px)}
.ui-detail{right:18px;width:min(40%,230px)}
@media(max-width:980px){.ui-handy{right:-10px;bottom:-20px;width:110px}.ui-detail{width:58%}}
@media(max-width:980px){
  .ab-3 .ui-detail{transform:translateX(115%)}
  .ab-4 .ui-handy{opacity:0;transform:translateY(60px) rotate(4deg)}
  .ab-5 .ui-kalender{opacity:0;transform:translateY(40px)}
  .ui-handy{width:150px;right:6px}
  .ui-kalender{width:230px;left:10px}
}

/* Teil 5 ruhig: kein Festhalten, hell, Raster */
.ruhe{background:var(--grund)}
.ruhe .kopfzeile{align-items:flex-end}
.ruhe-lead{max-width:40ch;margin:0}
.ruhe-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ruhe-karte{border-radius:24px;overflow:hidden;background:var(--metall);border:1px solid #fff;box-shadow:0 26px 50px -36px rgb(var(--schatten-rgb) / .35);display:flex;flex-direction:column}
.ruhe-bild{aspect-ratio:4/3;overflow:hidden}
.ruhe-bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.ruhe-text{padding:20px 22px 24px}
.ruhe-text span{font:600 .7rem var(--lauf);letter-spacing:.14em;color:var(--akzent-tief)}
.ruhe-text h3{font:740 1.35rem/1.1 var(--titel);font-stretch:108%;letter-spacing:-.02em;margin:6px 0 6px}
.ruhe-text p{color:var(--grau);font-size:.93rem}
.ruhe-text ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px}
.ruhe-text li{font:500 .86rem var(--lauf);color:var(--tinte);padding-left:16px;position:relative}
.ruhe-text li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--akzent-flaeche)}
.ruhe-text li.extra{color:var(--grau)}
.ruhe-text li.extra::before{background:transparent;border:1.5px dashed var(--stahl-deko);width:5px;height:5px}
.ruhe-karte:nth-child(2){transition-delay:.08s}.ruhe-karte:nth-child(3){transition-delay:.16s}.ruhe-karte:nth-child(4){transition-delay:.24s}
@media(max-width:1000px){.ruhe-raster{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ruhe-raster{grid-template-columns:1fr}.ruhe-bild{aspect-ratio:16/9}}

/* ===== Held: echtes Foto, Bildschirm in Code ===== */
.held-buehne .film-kulisse{background:#E9ECEE;background:light-dark(#E9ECEE,#23282D)}
.held-stage{position:absolute;left:50%;top:50%;aspect-ratio:1920/1072;height:max(100%,calc(100vw / 1.791));transform:translate(-50%,-50%) scale(calc(1 + var(--p,0) * .1));transform-origin:68% 50%}
.held-stage>img{position:absolute;inset:0;width:100%;height:100%}
.held-screen{position:absolute;left:50.4%;top:26.6%;width:35.5%;height:42.6%;overflow:hidden;background:#050607;border-radius:.3% / .5%;container-type:size}
.hs-seite{position:absolute;inset:0 0 auto 0;background:#F4F5F6;background:light-dark(#F4F5F6,#0E1012);opacity:var(--an,0);transform:translateY(calc(var(--roll,0) * -1%));font:400 2.4cqw/1.35 var(--lauf);color:#1D2226;color:light-dark(#1D2226,#D5DADE)}
.hs-glanz{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 38%,transparent 39%);pointer-events:none}
.hs-kopf{display:flex;align-items:center;gap:4cqw;padding:3cqw 5cqw;background:var(--flaeche-1);border-bottom:1px solid #E3E6E9;border-bottom-color:light-dark(#E3E6E9,#2E343A)}
.hs-kopf b{font:800 3cqw var(--titel);margin-right:auto;display:flex;align-items:center;gap:1.5cqw}
.hs-kopf b::before{content:"";width:3cqw;height:3cqw;border-radius:.8cqw;background:var(--akzent-flaeche)}
.hs-kopf span{color:#5E676E;color:light-dark(#5E676E,#9AA3AA)}
.hs-kopf i,.hs-held i,.hs-form i{font-style:normal;background:#16191C;color:#fff;border-radius:99px;padding:1.2cqw 3cqw;font-weight:600}
.hs-held{display:grid;grid-template-columns:1.1fr 1fr;gap:4cqw;padding:7cqw 5cqw 6cqw;align-items:center}
.hs-held small{color:var(--akzent-tief);font-weight:600;font-size:2.1cqw}
.hs-held h4{margin:1.5cqw 0 2cqw;font:800 5.4cqw/1 var(--titel);letter-spacing:-.03em;color:#16191C;color:light-dark(#16191C,#F3F5F6)}
.hs-held h4 em{font-style:normal;color:#8B949B}
.hs-held p{color:#5E676E;color:light-dark(#5E676E,#9AA3AA);margin-bottom:3.5cqw}
.hs-held i{background:var(--akzent-flaeche);color:#16191C;color:light-dark(#16191C,#F3F5F6)}
.hs-foto{aspect-ratio:4/4.4;border-radius:3cqw;background:radial-gradient(60% 50% at 60% 40%,#fff 0%,#DDE2E6 60%,#C8CED3 100%);background:radial-gradient(60% 50% at 60% 40%,light-dark(#fff,#1A1E22) 0%,light-dark(#DDE2E6,#23282D) 60%,light-dark(#C8CED3,#23282D) 100%);position:relative;overflow:hidden}
.hs-foto::after{content:"";position:absolute;left:24%;right:24%;bottom:0;height:62%;border-radius:40% 40% 0 0;background:linear-gradient(#9AA3AA,#7B848B)}
.hs-foto::before{content:"";position:absolute;left:37%;top:14%;width:26%;aspect-ratio:1;border-radius:50%;background:#A9B2B8;z-index:1}
.hs-zahlen{display:flex;justify-content:space-around;padding:3cqw 5cqw;background:var(--flaeche-1);border-block:1px solid #E3E6E9;color:#5E676E;color:light-dark(#5E676E,#9AA3AA)}
.hs-zahlen b{font:800 3.6cqw var(--titel);color:#16191C;color:light-dark(#16191C,#F3F5F6);margin-right:1cqw}
.hs-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5cqw;padding:6cqw 5cqw}
.hs-karten div{background:var(--flaeche-1);border:1px solid #E3E6E9;border-color:light-dark(#E3E6E9,#2E343A);border-radius:2cqw;padding:3cqw}
.hs-karten i{display:block;width:5cqw;height:5cqw;border-radius:1.4cqw;background:color-mix(in srgb,var(--licht) 30%,#fff);background:color-mix(in srgb,var(--licht) 30%,light-dark(#fff,#1A1E22));margin-bottom:2cqw}
.hs-karten b{font:700 2.6cqw var(--titel)}
.hs-karten p{color:#7B848B;color:light-dark(#7B848B,#9AA3AA);font-size:2cqw}
.hs-bewertung{margin:0 5cqw;background:#16191C;color:#fff;border-radius:3cqw;padding:4cqw 5cqw}
.hs-bewertung b{color:var(--akzent-text);letter-spacing:.3em}
.hs-bewertung p{font:600 3cqw/1.3 var(--titel);margin:1.5cqw 0}
.hs-bewertung small{color:#8E989F}
.hs-form{display:grid;gap:2cqw;padding:6cqw 5cqw 8cqw}
.hs-form b{font:800 3.6cqw var(--titel)}
.hs-form span{background:var(--flaeche-1);border:1px solid #DDE2E5;border-color:light-dark(#DDE2E5,#2E343A);border-radius:1.5cqw;padding:2cqw 3cqw;color:#9AA3AA}
.hs-form i{justify-self:start}
@media(max-width:760px){
  .held-stage{height:56svh;top:auto;bottom:0;transform:translate(-68%,0) scale(1.25);transform-origin:68% 60%}
}
.hs-foto{aspect-ratio:auto;background:var(--flaeche-1);border:1px solid #E3E6E9;border-color:light-dark(#E3E6E9,#2E343A);border-radius:3cqw;padding:4cqw;display:grid;gap:1.4cqw;box-shadow:0 3cqw 6cqw -3cqw rgb(var(--schatten-rgb) / .18)}
.hs-foto::before,.hs-foto::after{display:none}
.hs-foto small{color:#7B848B;color:light-dark(#7B848B,#9AA3AA);font-size:2cqw}
.hs-foto b{font:800 4.6cqw var(--titel);color:#16191C;color:light-dark(#16191C,#F3F5F6)}
.hs-foto span{color:#5E676E;color:light-dark(#5E676E,#9AA3AA);font-size:2.1cqw}
.hs-foto i{font-style:normal;background:#16191C;color:#fff;border-radius:99px;padding:1.4cqw;text-align:center;font-weight:600;margin:1cqw 0}
.hs-foto em{font-style:normal;border:1px solid #E3E6E9;border-color:light-dark(#E3E6E9,#2E343A);border-radius:1.4cqw;padding:1.2cqw 2cqw;color:#5E676E;color:light-dark(#5E676E,#9AA3AA);font-size:2cqw}
@media(max-width:760px){.held-stage{transform:translate(-66%,0) scale(1.08)}}

/* ===================== Hero: drei Geräte ===================== */
.geraete{position:relative;height:520vh;background:var(--grund)}
.g-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(90% 70% at 50% 75%,#FFFFFF 0%,var(--grund) 55%,var(--flaeche-2) 100%);background:radial-gradient(90% 70% at 50% 75%,light-dark(#FFFFFF,#1A1E22) 0%,var(--grund) 55%,var(--flaeche-2) 100%)}
.g-text{position:absolute;left:0;right:0;top:calc(var(--kopf) + 3.5vh);text-align:center;padding:0 20px;z-index:3;will-change:opacity,transform}
.g-text .marke-zeile{justify-content:center}
.g-text .marke-zeile::before{display:none}
.g-titel{font:800 clamp(2.4rem,5.4vw,5.2rem)/.95 var(--titel);font-stretch:112%;letter-spacing:-.04em;color:var(--tinte);margin:0 auto;max-width:16ch}
.g-titel em,.g-gross em{font-style:normal;color:var(--stahl)}
.g-lead{color:var(--grau);font-size:1.12rem;max-width:46ch;margin:16px auto 0}
.g-reihe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.g-gross{font:760 clamp(2rem,4.4vw,4.2rem)/1 var(--titel);font-stretch:108%;letter-spacing:-.03em;color:var(--tinte);max-width:20ch;margin:0 auto}
.g-szene{position:absolute;inset:0;perspective:1800px;perspective-origin:50% 60%;z-index:2}
.g-geraet{position:absolute;left:0;top:0;margin:0;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 40px 50px rgba(22,25,28,.22))}
.g-rahmen{position:relative;display:block;width:100%;height:auto;z-index:2;pointer-events:none}
.g-schirm{position:absolute;overflow:hidden;background:#06070A;z-index:1}
.g-laptop .g-schirm{left:4.9%;top:1.9%;width:84.2%;height:84.6%;z-index:3;border-radius:.4%}
.g-tablet .g-schirm{left:4.2%;top:3%;width:91.6%;height:94%;border-radius:2.4%/1.7%;z-index:3}
.g-handy .g-schirm{left:5%;top:2.4%;width:90%;height:95.2%;border-radius:11%/5.2%;z-index:3}
.g-schirm img{display:block;width:100%;height:auto;opacity:var(--an,0);transform:translateY(var(--y,0px));will-change:transform}
.g-schirm::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 34%,transparent 35%);pointer-events:none}
.g-blende{position:absolute;inset:0;background:var(--grund);opacity:0;pointer-events:none;z-index:4}
.geraete .rollen{z-index:5}

/* ===================== Teil 3: So entsteht Sichtbarkeit ===================== */
.sicht{position:relative;height:560vh;background:var(--flaeche-1)}
.sicht-kulisse{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(180deg,var(--flaeche-1),var(--grund))}
.sicht-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:center;padding-top:calc(var(--kopf) - 30px)}
.sicht-text h2{font-size:clamp(1.9rem,3vw,3rem)}
.sicht-text h2 em{font-style:normal;color:var(--stahl)}
.sicht-schritte{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--rand-linie)}
.sicht-schritte li{display:grid;grid-template-columns:44px 1fr;padding:13px 0;border-bottom:1px solid var(--rand-linie);opacity:.32;transition:opacity .4s}
.sicht-schritte span{font:600 .72rem var(--lauf);letter-spacing:.14em;color:var(--stahl);padding-top:4px}
.sicht-schritte b{font:700 1.05rem var(--titel);color:var(--tinte)}
.sicht-schritte p{color:var(--grau);font-size:.92rem;max-height:0;overflow:hidden;transition:max-height .45s}
.sicht-schritte li.an{opacity:1}
.sicht-schritte li.jetzt span{color:var(--akzent-tief)}
.sicht-schritte li.jetzt p{max-height:5em;margin-top:4px}
.sicht-buehne{position:relative;height:min(64vh,560px)}
.s-fenster{position:absolute;left:50%;top:50%;width:min(100%,720px);height:min(100%,470px);border-radius:16px;overflow:hidden;background:#FBFBFC;background:light-dark(#FBFBFC,#0E1012);border:1px solid #DDE2E5;border-color:light-dark(#DDE2E5,#2E343A);box-shadow:0 50px 100px -40px rgb(var(--schatten-rgb) / .35);transform:translate(-50%,-50%) scale(var(--fs,1));transition:none;z-index:2}
.s-leiste{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#F0F2F4;background:light-dark(#F0F2F4,#0E1012);border-bottom:1px solid #E1E5E8;border-bottom-color:light-dark(#E1E5E8,#2E343A);font:500 12px var(--lauf);color:#6B747B;color:light-dark(#6B747B,#9AA3AA)}
.s-leiste i{width:10px;height:10px;border-radius:50%;background:#F0726A}.s-leiste i:nth-child(2){background:#F5C04E}.s-leiste i:nth-child(3){background:#5CC46B}
.s-leiste span{margin-left:10px}
.s-editor{position:absolute;inset:39px 0 0 0;background:#FBFBFC;background:light-dark(#FBFBFC,#0E1012);opacity:calc(1 - var(--app,0))}
.s-code{padding:14px 0;font:500 12.5px/1.62 ui-monospace,"SF Mono",Menlo,monospace;color:#2B3238;color:light-dark(#2B3238,#D5DADE)}
.s-code .z{display:flex;gap:16px;white-space:pre;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.s-code .z.da{opacity:1;transform:none}
.s-code b{width:28px;text-align:right;color:#B4BBC1;font-weight:400;flex:none}
.s-code code{font:inherit}
.c-w{font-style:normal;color:#A0398B;color:light-dark(#A0398B,#9AA3AA)}.c-s{font-style:normal;color:#1F7A4C;color:light-dark(#1F7A4C,#9DB3F2)}.c-t{font-style:normal;color:#2F63B8;color:light-dark(#2F63B8,#9DB3F2)}.c-k{font-style:normal;color:#9AA3AA}
.s-terminal{position:absolute;left:14px;right:14px;bottom:14px;background:#16191C;border-radius:10px;padding:12px 16px;font:500 12px/1.7 ui-monospace,Menlo,monospace;color:#C5CCD1;opacity:var(--term,0);transform:translateY(calc((1 - var(--term,0)) * 16px))}
.s-terminal .t1,.s-terminal .t2,.s-terminal .t3{color:#6FD39A;opacity:0}
.s-terminal.b1 .t1,.s-terminal.b2 .t2,.s-terminal.b3 .t3{opacity:1}
.s-app{position:absolute;inset:39px 0 0 0;overflow:hidden;opacity:var(--app,0)}
.s-app img{width:100%;transform:translateY(calc(var(--appy,0) * -1%))}
.s-pixel{position:absolute;inset:-10% -6%;width:112%;height:120%;z-index:1;pointer-events:none}
.s-knoten{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:rgb(var(--flaeche-1-rgb) / .92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #fff;border-radius:16px;padding:12px 16px 12px 40px;box-shadow:0 20px 40px -20px rgb(var(--schatten-rgb) / .35);opacity:0;transform:scale(.85);transition:opacity .45s,transform .45s}
.s-knoten i{position:absolute;left:14px;top:16px;width:14px;height:14px;border-radius:50%;border:2px solid var(--silber);transition:background .4s,border-color .4s}
.s-knoten b{font:700 .95rem var(--titel);color:var(--tinte)}
.s-knoten small{font-size:.76rem;color:var(--grau)}
.s-knoten.da{opacity:1;transform:none}
.s-knoten.ok i{background:var(--akzent-flaeche);border-color:var(--licht);box-shadow:0 0 12px var(--licht)}
.k-google{left:-2%;top:2%}.k-profil{left:-4%;top:42%}.k-bing{left:4%;bottom:0}.k-social{right:-2%;top:6%}.k-ki{right:-3%;bottom:10%}
.s-kurve{position:absolute;left:50%;bottom:-2%;width:min(100%,640px);transform:translate(-50%,calc((1 - var(--kv,0)) * 40px));opacity:var(--kv,0);background:var(--flaeche-1);border:1px solid #E1E5E8;border-color:light-dark(#E1E5E8,#2E343A);border-radius:20px;padding:18px 20px 16px;box-shadow:0 40px 80px -40px rgb(var(--schatten-rgb) / .4);z-index:4}
.s-kurve-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.s-kurve-kopf b{font:720 1.1rem var(--titel)}
.s-kurve-kopf small{color:var(--stahl);font-size:.74rem}
.s-kurve svg{width:100%;height:150px;display:block}
.s-gitter line{stroke:#EEF1F3;stroke-width:1;vector-effect:non-scaling-stroke}
.s-kurve path{fill:none;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 1}
.s-organisch{stroke:var(--stahl-deko);stroke-dashoffset:calc(1 - var(--ko,0))}
.s-ads{stroke:#5AA9D6;stroke-dashoffset:calc(1 - var(--ka,0))}
.s-beides{stroke:var(--licht);stroke-width:4!important;stroke-dashoffset:calc(1 - var(--kb,0))}
.s-achse{display:flex;justify-content:space-between;font-size:.72rem;color:var(--stahl);margin-top:4px}
.s-legende{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem;color:var(--grau)}
.s-legende li{display:flex;align-items:center;gap:7px}
.s-legende li::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--stahl-deko)}
.s-legende .l-a::before{background:#5AA9D6}.s-legende .l-b::before{background:var(--akzent-flaeche);height:4px}
@media(max-width:980px){
  .sicht-raster{grid-template-columns:1fr;gap:10px;padding-top:calc(var(--kopf) + 6px);align-self:flex-start}
  .sicht-kulisse{align-items:flex-start}
  .sicht-text h2{font-size:1.45rem}
  .sicht-schritte{margin-top:8px}.sicht-schritte li{display:none;padding:6px 0}.sicht-schritte li.jetzt{display:grid}
  .sicht-buehne{height:56svh}
  .s-fenster{height:78%}
  .s-code{font-size:9.5px}
  .s-knoten{padding:8px 10px 8px 30px;border-radius:12px}.s-knoten i{left:10px;top:12px;width:11px;height:11px}.s-knoten b{font-size:.78rem}.s-knoten small{display:none}
  .s-kurve{padding:12px}.s-kurve svg{height:100px}.s-kurve-kopf small{display:none}
}
.geraete .rollen{display:none}
.g-gross{font-size:clamp(1.9rem,3.6vw,3.4rem);max-width:24ch}
.g-titel{font-size:clamp(2.3rem,4.8vw,4.6rem)}
.s-knoten.da{opacity:calc(1 - var(--kv,0))}
.s-fenster{opacity:calc(1 - var(--kv,0) * .8)}
.s-pixel{opacity:calc(1 - var(--kv,0))}
.s-kurve{top:50%;bottom:auto;transform:translate(-50%,calc(-50% + (1 - var(--kv,0)) * 40px))}

/* ===================== Was wir machen ===================== */
.bereiche{background:var(--flaeche-1)}
.bereiche h2 em{font-style:normal;color:var(--stahl)}
.bereiche-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bereich{display:flex;flex-direction:column;border-radius:30px;overflow:hidden;background:var(--grund);border:1px solid var(--rand-linie);text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.bereich-bild{position:relative;aspect-ratio:4/3.1;overflow:hidden;background:radial-gradient(80% 70% at 50% 70%,#fff,var(--flaeche-2));background:radial-gradient(80% 70% at 50% 70%,light-dark(#fff,#1A1E22),var(--flaeche-2));display:grid;place-items:center}
.bereich-text{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.bereich-text span{font:600 .72rem var(--lauf);letter-spacing:.14em;color:var(--akzent-tief)}
.bereich-text h3{font:780 clamp(1.7rem,2.4vw,2.2rem)/1.05 var(--titel);font-stretch:110%;letter-spacing:-.03em;margin:6px 0 8px}
.bereich-text p{color:var(--grau)}
.bereich-text ul{list-style:none;padding:0;margin:16px 0 22px;display:flex;flex-wrap:wrap;gap:7px}
.bereich-text li{background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:99px;padding:6px 13px;font:600 .8rem var(--lauf);color:var(--tinte)}
.bereich-mehr{margin-top:auto;font:600 .95rem var(--lauf);color:var(--tinte)}
.bereich-mehr::after{content:" →";transition:margin .3s}
@media(hover:hover){.bereich:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgb(var(--schatten-rgb) / .4)}.bereich:hover .bereich-mehr::after{margin-left:6px}.bereich:hover .mini-laptop,.bereich:hover .mini-handy,.bereich:hover .mini-anzeigen{transform:scale(1.04) translateY(-4px)}}
.mini-laptop,.mini-handy,.mini-anzeigen{position:relative;transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 26px 30px rgba(22,25,28,.2))}
.mini-laptop{width:84%}
.mini-handy{width:30%}
.mini-schirm{position:absolute;overflow:hidden;z-index:3;background:#06070A}
.mini-schirm img{width:100%;display:block}
.mini-laptop .mini-schirm{left:4.9%;top:1.9%;width:84.2%;height:84.6%}
.mini-handy .mini-schirm{left:5%;top:2.4%;width:90%;height:95.2%;border-radius:11%/5.2%}
.mini-laptop .g-rahmen{position:relative;z-index:2}
.mini-handy .g-rahmen{position:relative;z-index:4;pointer-events:none}
.mini-anzeigen{width:82%;height:78%;position:relative}
.ma{position:absolute;display:grid;gap:6px;background:var(--flaeche-1);border:1px solid #E1E5E8;border-color:light-dark(#E1E5E8,#2E343A);border-radius:14px;padding:12px 14px;box-shadow:0 20px 40px -24px rgb(var(--schatten-rgb) / .35);font-size:.72rem}
.ma small{font-weight:700;color:var(--tinte);font-size:.66rem}
.ma b{font:700 .82rem var(--titel);color:#2F63B8;color:light-dark(#2F63B8,#9DB3F2)}
.ma i{display:block;height:6px;border-radius:3px;background:#E7EAED;background:light-dark(#E7EAED,#23282D)}
.ma i+i{width:70%}
.ma-g{left:0;top:4%;width:62%}
.ma-m{right:0;top:18%;width:42%}.ma-m em{display:block;aspect-ratio:1;border-radius:8px;background:linear-gradient(140deg,var(--metall-dunkel)),var(--graphit);background:linear-gradient(140deg,#2A3036,#16191C)}.ma-m b{color:var(--tinte);background:var(--akzent-flaeche);border-radius:99px;padding:4px 8px;text-align:center;font:600 .66rem var(--lauf)}
.ma-c{left:10%;bottom:2%;width:60%;border-color:color-mix(in srgb,var(--licht) 50%,#fff)}.ma-c b{color:var(--tinte)}
@media(max-width:980px){.bereiche-raster{grid-template-columns:1fr}.bereich-bild{aspect-ratio:16/10}}

/* ===================== Teil 5: Werbung ===================== */
.werbe{position:relative;height:440vh;background:var(--grund)}
.werbe-kulisse{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(70% 60% at 70% 55%,#fff,var(--grund) 70%);background:radial-gradient(70% 60% at 70% 55%,light-dark(#fff,#1A1E22),var(--grund) 70%)}
.werbe-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center;padding-top:calc(var(--kopf) - 30px)}
.werbe-text h2{font-size:clamp(1.9rem,3vw,3rem)}
.werbe-text h2 em{font-style:normal;color:var(--stahl)}
.werbe-schritte{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--rand-linie)}
.werbe-schritte li{display:grid;grid-template-columns:44px 1fr;padding:13px 0;border-bottom:1px solid var(--rand-linie);opacity:.32;transition:opacity .4s}
.werbe-schritte span{font:600 .72rem var(--lauf);letter-spacing:.14em;color:var(--stahl);padding-top:4px}
.werbe-schritte b{font:700 1.05rem var(--titel);color:var(--tinte)}
.werbe-schritte p{color:var(--grau);font-size:.92rem;max-height:0;overflow:hidden;transition:max-height .45s}
.werbe-schritte li.an{opacity:1}
.werbe-schritte li.jetzt span{color:var(--akzent-tief)}
.werbe-schritte li.jetzt p{max-height:5em;margin-top:4px}
.werbe-buehne{position:relative;height:min(64vh,540px)}
.wb-szene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(30px) scale(.96);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.wb-szene.an{opacity:1;transform:none}
.wb-szene.weg{opacity:0;transform:translateY(-30px) scale(.96)}
.wb-fenster{width:min(100%,640px);border-radius:16px;overflow:hidden;background:var(--flaeche-1);border:1px solid #DDE2E5;border-color:light-dark(#DDE2E5,#2E343A);box-shadow:0 50px 100px -40px rgb(var(--schatten-rgb) / .35)}
.wb-g-innen{padding:22px 26px 26px;display:grid;gap:14px}
.wb-suche{border:1px solid #DDE2E5;border-color:light-dark(#DDE2E5,#2E343A);border-radius:99px;padding:11px 20px;font:500 .95rem var(--lauf);color:var(--tinte);box-shadow:0 2px 8px rgb(var(--schatten-rgb) / .06);min-height:44px}
.wb-suche span::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--graphit);vertical-align:-2px;margin-left:1px;animation:blinken 1s steps(2) infinite}
.wb-treffer{padding:4px 2px;opacity:.55;font-size:.86rem}
.wb-treffer small{color:#5E676E;color:light-dark(#5E676E,#9AA3AA);font-size:.76rem}
.wb-treffer h5{margin:3px 0 3px;font:500 1.12rem var(--lauf);color:#1A4FA0;color:light-dark(#1A4FA0,#9DB3F2)}
.wb-treffer p{color:#5E676E;color:light-dark(#5E676E,#9AA3AA)}
.wb-treffer.anzeige{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;background:color-mix(in srgb,var(--licht) 7%,#fff);background:color-mix(in srgb,var(--licht) 7%,light-dark(#fff,#1A1E22));border:1px solid color-mix(in srgb,var(--licht) 35%,#fff);border-radius:14px;padding:14px 16px}
.wb-google.voll .wb-treffer.anzeige{opacity:1;transform:none}
.wb-links{display:flex;gap:16px;margin-top:8px;color:#1A4FA0;color:light-dark(#1A4FA0,#9DB3F2);font-size:.8rem}
.wb-telefon{width:min(300px,62%);aspect-ratio:9/18.5;border-radius:42px;padding:10px;background:linear-gradient(145deg,#C9CED3,#8B949B);background:linear-gradient(145deg,light-dark(#C9CED3,#23282D),#8B949B);box-shadow:0 60px 100px -40px rgb(var(--schatten-rgb) / .5),inset 0 0 0 1px rgba(255,255,255,.6)}
.wb-tel-innen{height:100%;border-radius:33px;background:var(--flaeche-1);overflow:hidden;display:flex;flex-direction:column;padding-top:34px}
.wb-post-kopf{display:flex;gap:10px;align-items:center;padding:8px 12px}
.wb-post-kopf i{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--licht),var(--licht-tief))}
.wb-post-kopf b{font:700 .82rem var(--lauf);display:block}.wb-post-kopf small{font-size:.7rem;color:#7B848B;color:light-dark(#7B848B,#9AA3AA)}
.wb-post-bild{aspect-ratio:4/5;background:var(--metall-dunkel);display:flex;align-items:flex-end;padding:18px;color:#fff;font:780 1.6rem/1 var(--titel);letter-spacing:-.02em}
.wb-post-bild em{font-style:normal;color:var(--akzent-text)}
.wb-post-knopf{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #EEF1F3;border-bottom-color:light-dark(#EEF1F3,#2E343A);font:600 .82rem var(--lauf);color:var(--tinte);background:color-mix(in srgb,var(--licht) 12%,#fff);background:color-mix(in srgb,var(--licht) 12%,light-dark(#fff,#1A1E22))}
.wb-post-text{padding:8px 12px;font-size:.78rem;color:#2B3238;color:light-dark(#2B3238,#D5DADE)}
.wb-c-innen{padding:22px 26px 26px;display:grid;gap:14px;background:#FBFBFC;background:light-dark(#FBFBFC,#0E1012)}
.wb-frage{justify-self:end;max-width:78%;background:#ECEFF2;background:light-dark(#ECEFF2,#0E1012);border-radius:18px 18px 4px 18px;padding:11px 16px;font-size:.92rem}
.wb-antwort{font-size:.92rem;color:#2B3238;color:light-dark(#2B3238,#D5DADE);line-height:1.6;min-height:4.8em}
.wb-sponsor{border:1px solid color-mix(in srgb,var(--licht) 45%,#fff);background:var(--flaeche-1);border-radius:14px;padding:14px 16px;display:grid;gap:3px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.wb-chat.voll .wb-sponsor{opacity:1;transform:none}
.wb-sponsor small{font-weight:700;font-size:.7rem;color:var(--stahl)}
.wb-sponsor b{font:700 1rem var(--titel)}.wb-sponsor p{color:#5E676E;color:light-dark(#5E676E,#9AA3AA);font-size:.86rem}
.wb-sponsor span{justify-self:start;margin-top:6px;background:var(--graphit);color:#fff;border-radius:99px;padding:6px 14px;font:600 .78rem var(--lauf)}
.wb-ziel{position:absolute;left:50%;top:50%;display:flex;gap:14px;align-items:center;background:var(--flaeche-1);border-radius:20px;padding:20px 26px;box-shadow:0 40px 80px -30px rgb(var(--schatten-rgb) / .45);opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.wb-ziel.an{opacity:1;transform:translate(-50%,-50%)}
.wb-ziel i{width:14px;height:14px;border-radius:50%;background:var(--akzent-flaeche);box-shadow:0 0 16px var(--licht)}
.wb-ziel b{font:780 1.4rem var(--titel);display:block}.wb-ziel small{color:var(--grau)}
@media(max-width:980px){
  .werbe-raster{grid-template-columns:1fr;gap:10px;padding-top:calc(var(--kopf) + 6px);align-self:flex-start}
  .werbe-kulisse{align-items:flex-start}
  .werbe-text h2{font-size:1.45rem}
  .werbe-schritte{margin-top:8px}.werbe-schritte li{display:none;padding:6px 0}.werbe-schritte li.jetzt{display:grid}
  .werbe-buehne{height:58svh}
  .wb-g-innen,.wb-c-innen{padding:14px}.wb-treffer h5{font-size:.95rem}.wb-telefon{width:58%}
}
.mini-handy .g-rahmen{z-index:2}.mini-handy .mini-schirm{z-index:3}

/* ===== Fuss: grosse Pille von rechts, Halbkreis links ===== */
.fuss{background:var(--grund);color:var(--grau);padding:90px 0 34px}
.fuss-pille{margin-left:max(20px,calc((100vw - var(--breite)) / 2));background:var(--metall-dunkel);color:#9AA3AA;border-radius:9999px 0 0 9999px;padding:80px max(20px,calc((100vw - var(--breite)) / 2)) 80px clamp(110px,11vw,170px);box-shadow:0 50px 100px -50px rgb(var(--schatten-rgb) / .6);position:relative;overflow:hidden}
.fuss-pille::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),radial-gradient(40% 70% at 12% 50%,color-mix(in srgb,var(--licht) 16%,transparent),transparent 70%);pointer-events:none}
.fuss-pille .fuss-gitter{position:relative;grid-template-columns:1.25fr repeat(5,minmax(0,1fr));gap:28px}
.fuss-ende{margin-top:26px;padding-top:0;border-top:0;color:var(--grau)}
.fuss-ende a{color:var(--grau)}
.fuss-ende a:hover{color:var(--tinte)}
@media(max-width:1100px){.fuss-pille .fuss-gitter{grid-template-columns:1fr 1fr 1fr}.fuss-pille .fuss-marke{grid-column:1/-1}}
@media(max-width:700px){.fuss-pille{border-radius:120px 0 0 120px;padding:56px 20px 56px 48px}.fuss-pille .fuss-gitter{grid-template-columns:1fr 1fr}}

/* ===== Kopf: dunkle Pille vom linken Rand, Halbkreis rechts ===== */
.kopf,.kopf.gerollt,.unterseite .kopf,.kopf.auf-film:not(.gerollt){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.kopf::before{content:"";position:absolute;left:0;top:10px;bottom:10px;right:calc(max(20px,(100vw - var(--breite)) / 2) - 22px);background:var(--metall-dunkel);border-radius:0 9999px 9999px 0;box-shadow:0 24px 50px -24px rgb(var(--schatten-rgb) / .55);z-index:-1}
.kopf::after{content:"";position:absolute;left:0;top:10px;bottom:10px;right:calc(max(20px,(100vw - var(--breite)) / 2) - 22px);border-radius:0 9999px 9999px 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),radial-gradient(30% 120% at 92% 50%,color-mix(in srgb,var(--licht) 18%,transparent),transparent 70%);pointer-events:none;z-index:-1}
.kopf .rahmen{position:relative;z-index:1}
.marke img{height:46px}
.haupt>a,.nav-knopf{color:#E8ECEF;opacity:.86}
.haupt>a:hover,.nav-knopf:hover,.nav-knopf[aria-expanded="true"]{opacity:1;color:#fff}
.kopf .kopf-knopf{background:var(--akzent-flaeche);color:var(--auf-akzent);box-shadow:none}
.kopf .kopf-knopf i{background:var(--auf-licht);box-shadow:none}
.menue-auf{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.mega{top:calc(var(--kopf) - 4px)}
@media(max-width:620px){.kopf::before,.kopf::after{right:8px}.marke img{height:38px}}

/* ===== Kopf hell, erst am Fuss dunkel ===== */
.kopf::before{background:var(--metall);border:1px solid #fff;border-left:0;transition:opacity .45s}
.kopf::after{background:var(--metall-dunkel);opacity:0;transition:opacity .45s;border-radius:0 9999px 9999px 0}
.kopf.dunkel::after{opacity:1}
.kopf .logo-dunkel{display:none}
.kopf.dunkel .logo-hell{display:none}.kopf.dunkel .logo-dunkel{display:block}
.haupt>a,.nav-knopf{color:var(--text);transition:color .45s}
.kopf.dunkel .haupt>a,.kopf.dunkel .nav-knopf{color:#E8ECEF}
.kopf .kopf-knopf{background:var(--graphit);color:#fff;transition:background .45s,color .45s}
.kopf .kopf-knopf i{background:var(--akzent-flaeche);box-shadow:0 0 10px var(--licht)}
.kopf.dunkel .kopf-knopf{background:var(--akzent-flaeche);color:var(--auf-akzent)}
.kopf.dunkel .kopf-knopf i{background:var(--auf-licht);box-shadow:none}
.menue-auf{background:var(--graphit);color:#fff;border-color:transparent}
.kopf.dunkel .menue-auf{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}

/* ===== Fuss breiter, Logo in die Mitte des Halbkreises ===== */
.fuss-pille{margin-left:max(12px,calc((100vw - var(--breite)) / 2 - 140px));padding-left:clamp(120px,13vw,220px)}
.fuss-pille .fuss-gitter{grid-template-columns:1.4fr repeat(5,minmax(0,1fr));align-items:start}
.fuss-pille .fuss-marke{display:flex;flex-direction:column;align-items:center;text-align:center;align-self:center}
.fuss-pille .fuss-marke img{height:96px;margin-bottom:22px}
@media(max-width:1100px){.fuss-pille .fuss-marke{align-items:flex-start;text-align:left}}
@media(max-width:700px){.fuss-pille{margin-left:8px;padding-left:40px}.fuss-pille .fuss-marke img{height:72px}}

/* ===== Handy zeigt WAYYOO ===== */
.g-app{display:flex}
.g-app img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:top;transform:translateX(var(--wx,0%))!important}
.bereiche-lead{max-width:44ch;margin:0}
.bereiche .kopfzeile{align-items:flex-end}
.g-tablet .g-schirm img{height:100%;object-fit:cover;object-position:top}
/* Laptop-Bildschirm genau in den Rahmen (gemessen: Display x 42-782, y 10-505 von 876x580) */
.g-laptop .g-schirm,.mini-laptop .mini-schirm{left:5.6%;top:2.9%;width:82.9%;height:83%;border-radius:1.1% / 1.7%}

/* ===== Eine Geschichte, erzählt vom Maskottchen ===== */
.sicht{height:820vh}
.erzaehler{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:end;margin-top:26px}
.robo{position:relative;width:clamp(130px,12vw,190px);aspect-ratio:1/1.12}
.robo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 22px 22px rgba(14,42,90,.25))}
.robo img.an{opacity:1;transform:none;animation:schweben 3.2s ease-in-out infinite}
@keyframes schweben{50%{transform:translateY(-6px)}}
.blase{position:relative;align-self:center;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:20px 20px 20px 6px;padding:16px 18px;box-shadow:0 24px 50px -30px rgb(var(--schatten-rgb) / .35);min-height:96px;display:flex;align-items:center}
.blase::before{content:"";position:absolute;left:-7px;bottom:16px;width:14px;height:14px;background:var(--flaeche-1);border-left:1px solid var(--rand-linie);border-bottom:1px solid var(--rand-linie);transform:rotate(45deg)}
.blase p{font:500 1.02rem/1.45 var(--lauf);color:var(--tinte)}
.blase p b{color:var(--akzent-tief)}
.sicht-schritte.punkte{display:flex;gap:8px;border:0;margin-top:22px}
.sicht-schritte.punkte li{display:block;width:26px;height:4px;padding:0;border:0;border-radius:2px;background:var(--rand-linie);opacity:1}
.sicht-schritte.punkte li.an{background:var(--stahl-deko)}
.sicht-schritte.punkte li.jetzt{background:var(--akzent-flaeche);width:44px}
.s-anzeigen{position:absolute;inset:0;display:grid;grid-template-columns:1.25fr 1fr 1.15fr;gap:14px;align-items:center;z-index:4;pointer-events:none}
.sa{position:relative;background:var(--flaeche-1);border:1px solid #E1E5E8;border-color:light-dark(#E1E5E8,#2E343A);border-radius:18px;padding:16px;box-shadow:0 40px 70px -40px rgb(var(--schatten-rgb) / .45);font-size:.82rem;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.sa.an{opacity:1;transform:none}
.sa-ort{position:absolute;left:16px;top:-12px;background:var(--graphit);color:#fff;font:600 .68rem var(--lauf);letter-spacing:.06em;border-radius:99px;padding:4px 10px}
.sa small{color:#5E676E;color:light-dark(#5E676E,#9AA3AA);font-size:.72rem}
.sa h5{margin:6px 0 4px;font:500 1rem var(--lauf);color:#1A4FA0;color:light-dark(#1A4FA0,#9DB3F2)}
.sa p{color:#5E676E;color:light-dark(#5E676E,#9AA3AA)}
.sa-g{border-color:color-mix(in srgb,var(--licht) 40%,#fff)}
.sa-m{padding:0;overflow:hidden}
.sa-m-kopf{display:flex;align-items:center;gap:8px;padding:10px 12px}
.sa-m-kopf i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--licht),var(--licht-tief))}
.sa-m-kopf small{margin-left:auto}
.sa-m-bild{aspect-ratio:1;background:var(--metall-dunkel);display:flex;align-items:flex-end;padding:14px;color:#fff;font:780 1.15rem/1 var(--titel)}
.sa-m-bild em{font-style:normal;color:var(--akzent-text);margin-left:4px}
.sa-m-knopf{padding:9px 12px;font-weight:600;background:color-mix(in srgb,var(--licht) 12%,#fff);background:color-mix(in srgb,var(--licht) 12%,light-dark(#fff,#1A1E22))}
.sa-m .sa-ort{top:auto;bottom:-12px}
.sa-frage{justify-self:end;background:#ECEFF2;background:light-dark(#ECEFF2,#0E1012);border-radius:14px 14px 4px 14px;padding:9px 12px;color:#2B3238!important;color:light-dark(#2B3238,#D5DADE)!important;margin-bottom:10px}
.sa-spons{border:1px solid color-mix(in srgb,var(--licht) 45%,#fff);border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.sa-spons b{font:700 .92rem var(--titel)}
@media(max-width:980px){
  .erzaehler{margin-top:8px;gap:10px}.robo{width:92px}.blase{min-height:0;padding:10px 12px}.blase p{font-size:.86rem}
  .sicht-schritte.punkte{margin-top:10px}
  .s-anzeigen{grid-template-columns:1fr;gap:16px;align-content:center}.sa{padding:10px 12px}.sa-m{display:none}
}
.s-fenster{opacity:calc(1 - var(--weg,0))}
.s-knoten.da{opacity:calc(1 - var(--weg,0))}
.s-pixel{opacity:calc(1 - var(--weg,0))}
.s-kurve{z-index:5}

/* ===== Chat-Assistent ===== */
.chat-knopf{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:99px;border:1px solid rgba(255,255,255,.7);background:linear-gradient(135deg,#1E3A8A,#0F1E4A);color:#fff;box-shadow:0 20px 40px -14px rgba(15,30,74,.6);cursor:pointer;font:inherit;text-align:left}
.chat-knopf img{width:46px;height:46px;object-fit:contain;border-radius:50%;background:rgba(255,255,255,.12)}
.chat-knopf b{display:block;font:650 .9rem var(--lauf)}.chat-knopf small{display:block;font-size:.72rem;opacity:.75}
@media(hover:hover){.chat-knopf:hover{transform:translateY(-2px)}}
@media(max-width:640px){.chat-knopf span{display:none}.chat-knopf{padding:6px}}
.chat{position:fixed;right:16px;bottom:16px;z-index:80;width:min(400px,calc(100vw - 32px));height:min(620px,calc(100svh - 32px));display:flex;flex-direction:column;background:var(--flaeche-1);border-radius:26px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(15,30,74,.55);border:1px solid var(--rand-linie)}
.chat[hidden]{display:none}
.chat-kopf{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#1E3A8A,#0F1E4A);color:#fff}
.chat-kopf img{width:44px;height:44px;object-fit:contain}
.chat-kopf b{display:block;font:650 .95rem var(--lauf)}.chat-kopf small{font-size:.74rem;opacity:.75}
.chat-kopf button{margin-left:auto;background:rgba(255,255,255,.14);border:0;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.3rem;cursor:pointer}
.chat-verlauf{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--grund)}
.cm{max-width:88%;padding:11px 14px;border-radius:18px;font-size:.92rem;line-height:1.5}
.cm p+p{margin-top:8px}
.cm.bot{background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:18px 18px 18px 6px;color:var(--text)}
.cm.ich{align-self:flex-end;background:#1E3A8A;color:#fff;border-radius:18px 18px 6px 18px}
.cm.warte p::after{content:"…";animation:blinken 1s steps(2) infinite}
.cm a{color:#1E3A8A;color:light-dark(#1E3A8A,#9DB3F2);font-weight:600}
.chat-vorschlaege{display:flex;flex-wrap:wrap;gap:6px}
.chat-vorschlaege button{background:var(--flaeche-1);border:1px solid #C9D6EE;border-color:light-dark(#C9D6EE,#33405F);color:#1E3A8A;color:light-dark(#1E3A8A,#9DB3F2);border-radius:99px;padding:7px 12px;font:600 .8rem var(--lauf);cursor:pointer}
.chat-eingabe{display:flex;gap:8px;padding:12px;border-top:1px solid var(--rand-linie)}
.chat-eingabe input{flex:1;min-width:0;border:1px solid var(--rand-linie);border-radius:99px;padding:11px 16px;font:500 .95rem var(--lauf);outline:none}
.chat-eingabe input:focus{border-color:#1E3A8A}
.chat-eingabe button{width:44px;height:44px;border-radius:50%;border:0;background:#1E3A8A;color:#fff;font-size:1.1rem;cursor:pointer}
.chat-hinweis{font-size:.7rem;color:var(--stahl);text-align:center;padding:0 12px 10px}
.sa-m{overflow:visible}.sa-m-bild{border-radius:0}.sa-m-knopf{border-radius:0 0 18px 18px}
/* Play in der Sprechblase */
.blase{flex-direction:column;align-items:flex-start;gap:10px}
.abspielen{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0;font:600 .8rem var(--lauf);color:#1E3A8A;color:light-dark(#1E3A8A,#9DB3F2);cursor:pointer}
.abspielen i{position:relative;width:28px;height:28px;border-radius:50%;background:#1E3A8A;box-shadow:0 0 0 4px rgba(30,58,138,.12);transition:box-shadow .3s}
.abspielen i::before{content:"";position:absolute;left:11px;top:8px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.abspielen.laeuft i::before{left:9px;top:9px;width:3px;height:10px;border:0;background:var(--flaeche-1);box-shadow:6px 0 0 #fff}
@media(hover:hover){.abspielen:hover i{box-shadow:0 0 0 7px rgba(30,58,138,.16)}}
.sicht.spricht .robo img.an{animation:sprechen .32s ease-in-out infinite alternate}
@keyframes sprechen{to{transform:translateY(-3px) scale(1.012)}}
.entwurf-link{margin-top:14px;font-size:.8rem}.entwurf-link a{color:#1E3A8A;color:light-dark(#1E3A8A,#9DB3F2);font-weight:600}
.sicht{height:1000vh}
.s-legende .l-a::before,.s-ads{stroke:#16191C}.s-legende .l-a::before{background:#16191C}
.s-kurve{opacity:calc(var(--kv,0) * (1 - var(--pr,0)))}

/* ===== Bühne neu (06.10.2026): flach, Haarlinien, keine Schlagschatten ===== */
.s-fenster,.s-knoten,.sa,.s-kurve,.s-preis{box-shadow:none!important}
.s-fenster{border:1px solid #D9DEE2;border-color:light-dark(#D9DEE2,#2E343A);background:var(--flaeche-1)}
.s-knoten{background:var(--flaeche-1);border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);backdrop-filter:none;-webkit-backdrop-filter:none}
.s-knoten.ok i{box-shadow:none}
.sa{border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A)}
.sa-ort{background:var(--flaeche-1);color:var(--tinte);border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A)}

/* Sichtbarkeit: Linien direkt beschriftet, kein Kasten-Schatten */
.s-kurve{background:var(--flaeche-1);border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);border-radius:28px;padding:26px 28px 22px}
.s-kurve-kopf{margin-bottom:18px}
.s-kurve-kopf b{font:760 1.5rem/1 var(--titel);letter-spacing:-.02em}
.s-kurve-kopf small{font-size:.74rem}
.s-flaeche{position:relative;padding-right:118px}
.s-kurve svg{height:190px}
.s-gitter line{stroke:#EDF0F2}
.s-kurve path{stroke-width:2.5}
.s-organisch{stroke:#A9B2B9}
.s-beides{stroke-width:3.5!important}
.ke{position:absolute;right:0;font:650 .78rem/1 var(--lauf);white-space:nowrap;transform:translateY(-50%);opacity:0;transition:opacity .4s}
.ke::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;background:currentColor}
.ke-b{top:calc(22 / 260 * 190px);color:var(--akzent-tief);opacity:calc((var(--kb,0) - .9) * 10)}
.ke-a{top:calc(130 / 260 * 190px);color:#16191C;color:light-dark(#16191C,#F3F5F6);opacity:calc((var(--ka,0) - .9) * 10)}
.ke-o{top:calc(70 / 260 * 190px + 14px);color:#7C868E;color:light-dark(#7C868E,#9AA3AA);opacity:calc((var(--ko,0) - .9) * 10)}
.s-achse{padding-right:118px;margin-top:8px}
.s-legende{border-top:1px solid #EDF0F2;border-top-color:light-dark(#EDF0F2,#2E343A);padding-top:12px;margin-top:14px;font-size:.76rem}
.s-legende li::before{height:2px}

/* Preisvergleich: drei ruhige Felder, große Zahlen */
.s-preis{position:absolute;left:50%;top:50%;width:min(100%,700px);transform:translate(-50%,-50%);opacity:var(--pr,0);z-index:6;background:none;border:0;padding:0}
.sp-marke{font:600 .72rem var(--lauf);letter-spacing:.16em;text-transform:uppercase;color:var(--stahl);margin:0 0 14px}
.sp-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sp-feld{--z:clamp(0,calc((var(--pr,0) - var(--i) * .18) / .64),1);display:flex;flex-direction:column;gap:6px;background:var(--flaeche-1);border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);border-radius:24px;padding:20px 20px 18px;opacity:var(--z);transform:translateY(calc((1 - var(--z)) * 18px))}
.sp-name{font:600 .82rem var(--lauf);color:var(--grau)}
.sp-wir{font:800 clamp(1.7rem,2.6vw,2.3rem)/1 var(--titel);letter-spacing:-.035em;color:var(--tinte);margin-top:4px}
.sp-pz{align-self:flex-start;font:700 .8rem var(--lauf);color:var(--akzent-tief);background:color-mix(in srgb,var(--licht) 14%,#fff);background:color-mix(in srgb,var(--licht) 14%,light-dark(#fff,#1A1E22));border-radius:99px;padding:5px 10px;margin:4px 0 8px}
.sp-skala{display:grid;gap:5px;margin-top:auto}
.sp-skala i{display:block;height:4px;border-radius:4px;width:calc(var(--w) * var(--z))}
.sp-skala i.m{background:#DCE1E5;background:light-dark(#DCE1E5,#23282D)}.sp-skala i.a{background:var(--akzent-flaeche)}
.sp-liste{font-size:.8rem;color:var(--tinte);margin-top:auto;line-height:1.35}
.sp-markt{font-size:.74rem;color:var(--stahl);padding-top:10px;border-top:1px solid #EDF0F2;border-top-color:light-dark(#EDF0F2,#2E343A);margin-top:8px}
.sp-voll{background:var(--graphit);border-color:var(--graphit)}
.sp-voll .sp-name,.sp-voll .sp-markt{color:#9AA3AA}.sp-voll .sp-markt{border-color:rgba(255,255,255,.12)}
.sp-voll .sp-wir,.sp-voll .sp-liste{color:#fff}
.sp-voll .sp-pz{background:var(--akzent-flaeche);color:#16191C;color:light-dark(#16191C,#F3F5F6)}
.sp-invest{margin:22px 0 0;font:780 clamp(1.4rem,2.4vw,2rem)/1.1 var(--titel);letter-spacing:-.025em;color:var(--tinte);opacity:var(--inv,0);transform:translateY(calc((1 - var(--inv,0)) * 12px))}
.sp-invest em{font-style:normal;color:var(--akzent-tief);display:block}
.sp-quelle{font-size:.68rem;color:var(--stahl);margin-top:12px;opacity:var(--inv,0)}
@media(max-width:980px){
  .s-kurve{padding:14px 14px 12px;border-radius:20px}.s-kurve-kopf b{font-size:1.1rem}.s-flaeche,.s-achse{padding-right:84px}.s-kurve svg{height:120px}
  .ke{font-size:.66rem}.ke::before{width:6px;height:6px;margin-right:5px}
  .ke-b{top:calc(22 / 260 * 120px)}.ke-a{top:calc(130 / 260 * 120px)}.ke-o{top:calc(70 / 260 * 120px + 12px)}
  .s-legende{display:none}
  .sp-reihe{grid-template-columns:1fr;gap:8px}
  .sp-feld{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:12px 14px;border-radius:16px}
  .sp-name{grid-column:1}.sp-wir{grid-column:1;font-size:1.35rem;margin:0}.sp-pz{grid-column:2;grid-row:1/3;align-self:center;margin:0}
  .sp-skala,.sp-liste{display:none}.sp-markt{grid-column:1/-1;margin-top:6px;padding-top:6px}
  .sp-invest{margin-top:12px;font-size:1.2rem}
}

/* Referenzen: „Mehr sehen“ auf der Startseite */
.ref-weiter{display:flex;align-items:center;gap:22px;margin-top:22px;padding:18px 22px;border:1px solid var(--rand-linie);border-radius:99px;text-decoration:none;color:var(--tinte);background:var(--flaeche-1);transition:border-color .3s}
.ref-stapel{display:flex;flex:none}
.ref-stapel img{width:76px;height:48px;object-fit:cover;object-position:top;border-radius:10px;border:2px solid #fff;margin-left:-22px;outline:1px solid #DCE1E5}
.ref-stapel img:first-child{margin-left:0}
.ref-weiter-text{display:grid;gap:2px;flex:1}
.ref-weiter-text b{font:760 1.3rem/1 var(--titel);letter-spacing:-.02em}
.ref-weiter-text em{font-style:normal;color:var(--grau);font-size:.86rem}
.ref-weiter>i{font-style:normal;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--graphit);color:#fff;font-size:1.1rem;flex:none;transition:transform .3s}
@media(hover:hover){.ref-weiter:hover{border-color:var(--graphit)}.ref-weiter:hover>i{transform:translateX(4px)}}
@media(max-width:600px){.ref-weiter{gap:12px;padding:12px 14px;border-radius:22px}.ref-stapel img{width:54px;height:36px;margin-left:-18px}.ref-weiter-text b{font-size:1.05rem}.ref-weiter>i{width:38px;height:38px}}

/* Referenzen: Unterseite mit allen Kunden */
.ref-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.ref-filter button{font:600 .82rem var(--lauf);color:var(--tinte);background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:99px;padding:9px 16px;cursor:pointer}
.ref-filter button.aktiv{background:var(--graphit);border-color:var(--graphit);color:#fff}
.ref-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ref-karte{display:flex;flex-direction:column;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:24px;overflow:hidden;text-decoration:none;color:var(--tinte);transition:border-color .3s}
.ref-karte[hidden]{display:none}
.ref-bild{display:block;aspect-ratio:16/10;overflow:hidden;background:#EEF1F3;background:light-dark(#EEF1F3,#0E1012);border-bottom:1px solid var(--rand-linie)}
.ref-bild img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ref-text{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.ref-kopf{display:flex;justify-content:space-between;font:600 .7rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--stahl)}
.ref-kopf em{font-style:normal}
.ref-text b{font:760 1.3rem/1.1 var(--titel);letter-spacing:-.02em;margin-top:4px}
.ref-unter{font-size:.84rem;color:var(--grau)}
.ref-beschr{font-size:.88rem;line-height:1.5;color:#3A4248;color:light-dark(#3A4248,#D5DADE);margin-top:4px}
.ref-mehr{margin-top:auto;padding-top:12px;font:600 .82rem var(--lauf);color:var(--akzent-tief);display:flex;gap:6px}
.ref-mehr i{font-style:normal;transition:transform .3s}
@media(hover:hover){.ref-karte:hover{border-color:var(--graphit)}.ref-karte:hover .ref-bild img{transform:scale(1.03)}.ref-karte:hover .ref-mehr i{transform:translateX(4px)}}
@media(max-width:1000px){.ref-raster{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ref-raster{grid-template-columns:1fr}}
.abschnitt.ref-alle{padding-top:28px}

/* ===== Hero neu (06.10.2026): Entwürfe stehen im Raum ===== */
.schau{position:relative;height:560vh;background:var(--grund)}
.ga-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,var(--grund) 60%,var(--flaeche-2) 100%);background:linear-gradient(180deg,light-dark(#FFFFFF,#1A1E22) 0%,var(--grund) 60%,var(--flaeche-2) 100%)}
.ga-text{top:calc(var(--kopf) + 4vh)}
.ga-raum{position:absolute;inset:0;perspective:1700px;perspective-origin:50% 40%;z-index:1}
.ga-deck{position:absolute;left:50%;top:69%;width:0;height:0;transform-style:preserve-3d}
.ga-karte{position:absolute;left:0;top:0;margin:0;width:var(--kw,560px);aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--flaeche-1);outline:1px solid rgb(var(--tinte-rgb) / .10);transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;cursor:pointer}
.ga-karte img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.ga-karte[data-k="6"] img{object-position:50% var(--oy,0%)}
.ga-karte::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.0) 40%,rgba(255,255,255,.18));pointer-events:none;opacity:var(--glanz,1)}
.ga-schild{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;margin:0;font:600 .72rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgb(var(--tinte-rgb) / .72);border-radius:99px;padding:8px 14px;opacity:0;white-space:nowrap}
@media(max-width:760px){.ga-deck{top:68%}.schau{height:480vh}}
.ga-karte[data-k="6"]{will-change:auto}
/* Weg zu den Paketen, erscheint beim Preisvergleich */
.zu-paketen{display:inline-flex;align-items:center;gap:12px;margin:18px 0 6px;padding:10px 12px 10px 18px;border-radius:99px;background:var(--graphit);color:#fff;text-decoration:none;font:600 .9rem var(--lauf);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .45s,transform .45s}
.zu-paketen i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--akzent-flaeche);color:#16191C;color:light-dark(#16191C,#F3F5F6)}
.sicht.preiszeit .zu-paketen{opacity:1;transform:none;pointer-events:auto}
@media(hover:hover){.zu-paketen:hover i{transform:translateY(2px)}}
@media(max-width:980px){.zu-paketen{margin:10px 0 4px;font-size:.82rem;padding:7px 8px 7px 14px}}

/* ===================== Apple-Bauprinzipien (06.10.2026) ===================== */
:root{--flaeche:#F5F5F7}
:root[data-theme="dunkel"]{--flaeche:#1A1E22}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--flaeche:#1A1E22}}
.ga-preis{margin:14px 0 0;font-size:.86rem;color:var(--grau)}.ga-preis a{color:var(--akzent-tief);text-decoration:none;font-weight:600}
.ex-titel{font:780 clamp(2rem,4.2vw,3.4rem)/1.02 var(--titel);letter-spacing:-.035em;color:var(--tinte);margin:0 0 28px}
.ex-titel em{font-style:normal;color:var(--stahl)}

/* Sieh dir an, was wir machen */
.explorer{background:var(--flaeche-1)}
.ex-flaeche{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:28px;align-items:center;background:var(--flaeche);border-radius:32px;padding:clamp(18px,3vw,40px);min-height:560px}
.ex-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:center}
.ex-pille{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;background:var(--flaeche-1);color:var(--tinte);font:600 .95rem var(--lauf);border-radius:99px;padding:12px 20px 12px 12px;transition:background .3s,color .3s}
.ex-pille i{width:26px;height:26px;border-radius:50%;border:1.5px solid #C9CED3;position:relative;flex:none;transition:transform .3s,border-color .3s}
.ex-pille i::before,.ex-pille i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.ex-pille i::after{transform:translate(-50%,-50%) rotate(90deg)}
.ex-pille.an{background:var(--graphit);color:#fff}.ex-pille.an i{transform:rotate(45deg);border-color:rgba(255,255,255,.4)}
.ex-mehr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.ex-mehr>p{overflow:hidden;margin:0;padding:0 8px 0 20px;font-size:.9rem;line-height:1.5;color:#3A4248;color:light-dark(#3A4248,#D5DADE)}
.ex-mehr a{color:var(--akzent-tief);font-weight:600;text-decoration:none;white-space:nowrap}
.ex-pille.an+.ex-mehr{grid-template-rows:1fr}.ex-pille.an+.ex-mehr>p{padding-top:10px;padding-bottom:6px}
.ex-buehne{position:relative;height:100%;min-height:480px}
.ex-bild{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ex-bild.an{opacity:1;transform:none}
.mk-browser{width:min(100%,640px);border-radius:14px;overflow:hidden;background:var(--flaeche-1);outline:1px solid #DCE1E5}
.mk-leiste{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#FAFAFB;background:light-dark(#FAFAFB,#0E1012);border-bottom:1px solid #ECEEF0;border-bottom-color:light-dark(#ECEEF0,#2E343A);font-size:.72rem;color:var(--stahl)}
.mk-leiste i{width:9px;height:9px;border-radius:50%;background:#DADDE0;background:light-dark(#DADDE0,#23282D)}.mk-leiste span{margin-left:10px}
.mk-browser img{display:block;width:100%}
.mk-karte{background:var(--flaeche-1);border-radius:20px;padding:20px 22px;outline:1px solid #E4E7EA;width:min(100%,480px);font-size:.88rem;color:#3A4248;color:light-dark(#3A4248,#D5DADE)}
.mk-karte small{color:var(--stahl);font-size:.74rem}.mk-karte b{display:block;color:var(--tinte);font:700 1.05rem/1.3 var(--titel);margin:4px 0}
.mk-feld{border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);border-radius:99px;padding:10px 16px;margin-bottom:14px;color:var(--tinte)}
.mk-treffer{padding:12px 0;border-top:1px solid #EEF0F2;border-top-color:light-dark(#EEF0F2,#2E343A)}.mk-treffer.an b{color:#1A4FA0;color:light-dark(#1A4FA0,#9DB3F2)}
.mk-treffer i{display:block;height:8px;border-radius:4px;background:#EEF0F2;background:light-dark(#EEF0F2,#0E1012);margin:6px 0;width:80%}.mk-treffer i+i{width:55%}
.mk-sterne{color:#E8A317;font-size:.8rem}.mk-sterne em{font-style:normal;color:var(--stahl)}
.mk-frage{justify-self:end;margin:0 0 14px auto;width:fit-content;max-width:85%;background:#ECEFF2;background:light-dark(#ECEFF2,#0E1012);border-radius:16px 16px 4px 16px;padding:10px 14px;color:var(--tinte)}
.mk-chat{display:grid}.mk-antwort p{margin:0 0 10px}.mk-quelle{display:inline-block;font-size:.72rem;border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);border-radius:99px;padding:4px 10px;color:var(--stahl)}
.mk-anzeigen{display:grid;gap:12px;width:min(100%,460px)}.mk-anzeigen .mk-karte{width:auto;padding:14px 18px}
.mk-blau{color:#1A4FA0!important;color:light-dark(#1A4FA0,#9DB3F2)!important}
.mk-feed{padding:0!important;overflow:hidden}.mk-bild{background:var(--metall-dunkel);color:#fff;font:780 1.3rem/1 var(--titel);padding:34px 18px 18px}.mk-bild em{font-style:normal;color:var(--akzent-text)}
.mk-feed span{display:block;padding:10px 18px;font-weight:600;color:var(--tinte)}
.mk-handy{width:250px;border-radius:38px;background:var(--flaeche-1);outline:9px solid #16191C;padding:16px 10px 12px}
.mk-profil{display:flex;align-items:center;gap:8px;padding:0 6px 10px;font-size:.8rem}.mk-profil i{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--licht),var(--licht-tief))}
.mk-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.mk-gitter img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.mk-film{position:relative;width:min(100%,600px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#1E3A8A,#0B1A44);display:grid;place-items:center}
.mk-film img{height:86%;position:absolute;bottom:0;right:10%}
.mk-play{position:relative;width:64px;height:64px;border-radius:50%;background:rgb(var(--flaeche-1-rgb) / .95);display:grid;place-items:center;margin-right:30%}
.mk-play i,.film-play i{width:0;height:0;border-left:16px solid #16191C;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.mk-zeit{position:absolute;left:18px;right:18px;bottom:16px;height:3px;border-radius:2px;background:rgb(var(--flaeche-1-rgb) / .25)}.mk-zeit i{display:block;width:34%;height:100%;background:var(--flaeche-1);border-radius:2px}
.mk-film p{position:absolute;left:18px;bottom:26px;margin:0;color:#fff;font-size:.78rem;opacity:.85}
.mk-job ul{margin:10px 0 14px;padding-left:18px}.mk-knopf{display:inline-block;background:#0071E3;background:var(--graphit);color:#fff;border-radius:99px;padding:9px 16px;font-weight:600}
@media(max-width:860px){.ex-flaeche{grid-template-columns:1fr;min-height:0}.ex-buehne{min-height:380px;order:-1}.ex-liste{grid-auto-flow:row}.mk-handy{width:200px}}

/* Film */
.film-start{background:var(--flaeche)}
.film-start h2 em{font-style:normal;color:var(--stahl)}
.film-raster{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:center}
.filmrahmen{margin:0}
.film-flaeche{position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:radial-gradient(120% 90% at 70% 100%,#2B4FB0 0%,#1E3A8A 40%,#0B1A44 100%);display:grid;place-items:center}
.film-flaeche::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 34px)}
.film-flaeche img{position:absolute;bottom:0;right:8%;height:92%}
.film-play{position:relative;width:84px;height:84px;border-radius:50%;background:var(--flaeche-1);display:grid;place-items:center;margin-right:26%}
.film-play i{border-left-width:22px;border-top-width:13px;border-bottom-width:13px}
.film-dauer{position:absolute;left:22px;bottom:18px;color:#fff;font:600 .8rem var(--lauf);background:rgba(255,255,255,.14);border-radius:99px;padding:6px 12px}
.filmrahmen figcaption{font-size:.78rem;color:var(--stahl);margin-top:10px}
.film-kapitel{list-style:none;margin:0;padding:0;border-top:1px solid var(--rand-linie)}
.film-kapitel a{display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:auto auto;column-gap:10px;padding:14px 4px;border-bottom:1px solid var(--rand-linie);text-decoration:none;color:var(--tinte)}
.film-kapitel small{grid-row:1/3;font:600 .72rem var(--lauf);color:var(--stahl);padding-top:4px}
.film-kapitel b{font:720 1.08rem var(--titel)}.film-kapitel em{grid-column:2;font-style:normal;font-size:.84rem;color:var(--grau)}
.film-kapitel i{grid-row:1/3;grid-column:3;align-self:center;font-style:normal;color:var(--stahl);transition:transform .3s}
@media(hover:hover){.film-kapitel a:hover i{transform:translateX(4px);color:var(--tinte)}}
@media(max-width:900px){.film-raster{grid-template-columns:1fr}}

/* Pakete wie Produktvergleich */
.pakete-neu{background:var(--flaeche-1)}
.pk-kopf{text-align:center;max-width:680px;margin:0 auto 40px}
.pk-kopf .marke-zeile{justify-content:center}.pk-kopf .marke-zeile::before{display:none}
.pk-kopf h2{font:800 clamp(2.2rem,5vw,4rem)/1 var(--titel);letter-spacing:-.04em;margin:0}.pk-kopf h2 em{font-style:normal;color:var(--stahl)}
.pk-kopf .lead{margin:14px auto 0}
.pk-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pk{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--flaeche);border-radius:30px;padding:28px 26px 30px}
.pk-bild{margin:0 0 6px;height:190px;display:grid;place-items:end center}.pk-bild img{height:100%;width:auto}
.pk header{display:flex;flex-direction:column;align-items:center;gap:4px}
.pk-name{font:780 1.5rem var(--titel);letter-spacing:-.02em;color:var(--tinte);margin:0}
.pk h3{font:500 .95rem var(--lauf);color:var(--grau);margin:0}
.pk-tipp{order:-1;font:700 .7rem var(--lauf);letter-spacing:.08em;text-transform:uppercase;color:var(--akzent-tief);margin-bottom:2px}
.pk-preis{margin:18px 0 16px;display:grid;gap:2px}.pk-preis b{font:800 2.4rem/1 var(--titel);letter-spacing:-.035em;color:var(--tinte)}.pk-preis span{font-size:.78rem;color:var(--stahl)}
.pk .knopf{margin-bottom:22px}
.pk ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid #E2E5E8;border-top-color:light-dark(#E2E5E8,#2E343A);display:grid;gap:10px;text-align:left;width:100%;font-size:.9rem;color:#3A4248;color:light-dark(#3A4248,#D5DADE)}
.pk li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.pk svg{width:16px;height:16px;fill:none;stroke:var(--licht-tief);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.pk-mitte{background:var(--graphit)}.pk-mitte .pk-name,.pk-mitte .pk-preis b{color:#fff}.pk-mitte h3,.pk-mitte .pk-preis span{color:#9AA3AA}.pk-mitte ul{color:#D9DDE0;border-color:rgba(255,255,255,.12)}.pk-mitte .pk-tipp{color:var(--akzent-text)}
.pk-extra{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:20px;align-items:center;margin-top:18px;background:var(--flaeche);border-radius:22px;padding:20px 26px}
.pk-extra div{display:grid;gap:2px}.pk-extra b{font:740 1.05rem var(--titel);color:var(--tinte)}.pk-extra span{font-size:.8rem;color:var(--grau)}
.pk-extra-link{color:var(--akzent-tief);font-weight:600;text-decoration:none;font-size:.9rem}
@media(max-width:900px){.pk-raster{grid-template-columns:1fr}.pk-extra{grid-template-columns:1fr 1fr}.pk-bild{height:150px}}

/* Warum mit uns */
.warum{background:var(--flaeche-1);padding:clamp(80px,9vw,120px) 0}
.warum-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wk{background:var(--flaeche);border-radius:24px;padding:24px 22px;display:grid;gap:6px;align-content:start}
.wk small{font:600 .72rem var(--lauf);color:var(--stahl)}.wk b{font:760 1.2rem/1.15 var(--titel);color:var(--tinte)}.wk p{margin:0;font-size:.9rem;color:var(--grau);line-height:1.5}
@media(max-width:900px){.warum-reihe{grid-template-columns:1fr 1fr}}@media(max-width:520px){.warum-reihe{grid-template-columns:1fr}}

/* Fragen neu */
.fragen-neu{background:var(--flaeche)}
.fn-raster{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:clamp(24px,5vw,70px);align-items:start}
.fn-seite{position:sticky;top:calc(var(--kopf) + 30px)}
.fn-seite h2{font:800 clamp(2.2rem,4.6vw,3.8rem)/1 var(--titel);letter-spacing:-.04em;margin:0 0 14px}.fn-seite h2 em{font-style:normal;color:var(--stahl)}
.fn-robo{margin:18px 0 12px;height:220px}.fn-robo img{height:100%;width:auto}
.fn-knoepfe{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.fn-link{color:var(--akzent-tief);font-weight:600;text-decoration:none}
.fn-liste{display:grid;gap:10px}
.fn-liste .frage{background:var(--flaeche-1);border-radius:20px;border:0;overflow:hidden}
.fn-liste .frage button{width:100%;display:flex;justify-content:space-between;gap:16px;align-items:center;text-align:left;padding:20px 22px;background:none;border:0;cursor:pointer;font:650 1.02rem/1.35 var(--lauf);color:var(--tinte)}
.fn-liste .frage button small{display:none}
.fn-liste .frage button i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--flaeche);position:relative;transition:transform .35s,background .3s}
.fn-liste .frage button i::before,.fn-liste .frage button i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;background:var(--graphit);transform:translate(-50%,-50%)}
.fn-liste .frage button i::after{transform:translate(-50%,-50%) rotate(90deg)}
.fn-liste .frage button[aria-expanded="true"] i{transform:rotate(45deg);background:var(--graphit)}
.fn-liste .frage button[aria-expanded="true"] i::before,.fn-liste .frage button[aria-expanded="true"] i::after{background:var(--flaeche-1)}
.fn-liste .antwort>div{padding:0 22px 20px;color:#3A4248;color:light-dark(#3A4248,#D5DADE);font-size:.95rem;line-height:1.6}
@media(max-width:900px){.fn-raster{grid-template-columns:1fr}.fn-seite{position:static}.fn-robo{height:150px}}

/* Schluss im Roboter-Look */
.schluss-robo{padding:clamp(40px,6vw,90px) 0}
.sr-tafel{position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;align-items:end;border-radius:36px;background:radial-gradient(110% 120% at 85% 110%,#2F57C2 0%,#1E3A8A 38%,#0B1A44 100%);color:#fff;min-height:440px}
.sr-linien{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 44px);mask-image:linear-gradient(90deg,transparent,#000 60%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%)}
.sr-text{position:relative;padding:clamp(28px,5vw,64px);align-self:center}
.sr-text .marke-zeile{color:#9DB4F0}.sr-text .marke-zeile::before{background:#9DB4F0}
.sr-text h2{font:800 clamp(2.2rem,5vw,4.2rem)/1 var(--titel);letter-spacing:-.04em;color:#fff;margin:6px 0 14px}.sr-text h2 em{font-style:normal;color:var(--akzent-text)}
.sr-text .lead{color:#C9D4F2;max-width:42ch}
.sr-hell{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.sr-robo{position:relative;margin:0;height:400px;display:flex;justify-content:center;align-items:flex-end}
.sr-robo img{height:100%;width:auto;filter:none}
.sr-blase{position:absolute;top:12px;left:0;background:var(--flaeche-1);color:var(--tinte);font:600 .86rem var(--lauf);border-radius:18px 18px 18px 4px;padding:10px 14px;max-width:200px}
@media(max-width:860px){.sr-tafel{grid-template-columns:1fr}.sr-robo{height:260px}.sr-blase{left:12px}}
.pk-bild img{height:190px}
.fn-liste .antwort>div{overflow:hidden;min-height:0}
@media(max-width:900px){.pk-bild img{height:150px}}
.fn-liste .antwort>div{padding:0}
.fn-liste .antwort p{margin:0;padding:0 22px 12px}.fn-liste .antwort p:last-child{padding-bottom:20px}
.fn-liste .frage{box-shadow:none;border:0;background:var(--flaeche-1);margin:0}
.fn-liste .frage.offen button i{transform:rotate(45deg);background:var(--graphit)}
.fn-liste .frage.offen button i::before,.fn-liste .frage.offen button i::after{background:var(--flaeche-1)}
.fn-liste .frage button i::after{transform:translate(-50%,-50%) rotate(90deg)!important}

/* ===== Hero Vitrine (06.10.2026): drei Geräte, fünf Beispiel-Designs ===== */
.vitrine{position:relative;height:520vh;background:var(--flaeche-1)}
.vt-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--flaeche) 100%);background:linear-gradient(180deg,light-dark(#fff,#1A1E22) 0%,light-dark(#fff,#1A1E22) 55%,var(--flaeche) 100%)}
.vt-oben{position:absolute;left:0;right:0;top:calc(var(--kopf) + 3vh);text-align:center;padding:0 20px;z-index:5}
.vt-intro,.vt-kapitel-box,.vt-ende{position:absolute;left:0;right:0;top:0;padding:0 20px;will-change:opacity,transform}
.vt-intro .marke-zeile{justify-content:center}.vt-intro .marke-zeile::before{display:none}
.vt-intro .g-lead{margin-top:12px}
.vt-tabs{position:relative;display:inline-flex;gap:2px;background:#ECEEF0;background:light-dark(#ECEEF0,#0E1012);border-radius:99px;padding:4px;margin-bottom:22px}
.vt-tabs button{position:relative;z-index:1;border:0;background:none;cursor:pointer;font:600 .9rem var(--lauf);color:#5E676E;color:light-dark(#5E676E,#9AA3AA);padding:10px 18px;border-radius:99px;transition:color .3s}
.vt-tabs button.an{color:var(--tinte)}
.vt-schieber{position:absolute;top:4px;bottom:4px;left:4px;width:0;background:var(--flaeche-1);border-radius:99px;box-shadow:0 1px 2px rgb(var(--schatten-rgb) / .12);transition:left .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.vt-texte{position:relative;height:9rem}
.vt-kapitel{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.vt-kapitel.an{opacity:1;transform:none}
.vt-kapitel h2{font:800 clamp(2rem,4.4vw,3.8rem)/1 var(--titel);font-stretch:108%;letter-spacing:-.04em;color:var(--tinte);margin:0 0 12px}
.vt-kapitel h2 em{font-style:normal;color:var(--stahl)}
.vt-kapitel p{color:var(--grau);font-size:1.05rem;max-width:44ch;margin:0 auto}
.vt-ende{padding-top:4vh}
.vt-geraete{--lw:min(50vw,880px,calc(54vh * 1.51));--lh:calc(var(--lw) / 1.51);position:absolute;left:50%;bottom:7vh;width:var(--lw);height:var(--lh);transform:translateX(-50%) translateY(var(--hebe,0px)) scale(var(--sk,1));transform-origin:50% 100%;z-index:2}
.vg{position:absolute;margin:0}
.vg-rahmen{position:relative;display:block;width:100%;height:100%;z-index:2;pointer-events:none}
.vg-laptop{inset:0;z-index:1}
.vg-tablet{height:calc(var(--lh) * .86);aspect-ratio:700/978;left:calc(var(--lw) * -.24);bottom:-3%;z-index:3}
.vg-handy{height:calc(var(--lh) * .74);aspect-ratio:816/1684;right:calc(var(--lw) * -.13);bottom:-3%;z-index:4}
.vg-schirm{position:absolute;overflow:hidden;background:#0B0C0E;z-index:1}
.vg-laptop .vg-schirm{left:5.6%;top:2.9%;width:82.9%;height:83%;border-radius:1.1%/1.7%;z-index:3}
.vg-tablet .vg-schirm{left:4.2%;top:3%;width:91.6%;height:94%;border-radius:4%/2.8%;z-index:1}
.vg-handy .vg-schirm{left:5%;top:2.4%;width:90%;height:95.2%;border-radius:12%/5.6%;z-index:1}
.vg-schirm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transform:scale(1.02);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.vg-schirm img.an{opacity:1;transform:none}
.vt-hinweis{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;font-size:.72rem;color:var(--stahl);white-space:nowrap;z-index:5}
@media(max-width:980px){.vt-geraete{--lw:min(74vw,calc(40vh * 1.51))}.vt-tabs button{padding:8px 11px;font-size:.78rem}.vt-texte{height:8rem}.vt-kapitel p{font-size:.95rem}}
@media(max-width:600px){.vt-geraete{--lw:min(80vw,calc(34vh * 1.51));bottom:9vh}.vg-tablet{display:none}.vg-handy{right:calc(var(--lw) * -.06)}.vt-tabs{max-width:100%;overflow-x:auto}.vt-kapitel h2{font-size:1.7rem}.vt-intro .g-titel{font-size:2.3rem}}
.vg-tablet .vg-schirm,.vg-handy .vg-schirm{z-index:3}
.vg-tablet{left:calc(var(--lw) * -.36);bottom:-4%}
.vg-handy{right:calc(var(--lw) * -.2);bottom:-4%}
@media(max-width:600px){.vg-handy{right:calc(var(--lw) * -.08)}}
.film-echt::before{display:none}.film-echt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0B1A44}
.mk-handy-bild{padding:0;overflow:hidden;border-radius:34px;height:520px}.mk-handy-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}@media(max-width:860px){.mk-handy-bild{height:400px}}

/* ===================== Navigation, Footer, Unterseiten neu (06.10.2026, Apple-Prinzipien) ===================== */
:root{--kopf:64px}
.kopf,.kopf.gerollt,.kopf.dunkel,.unterseite .kopf,.kopf.auf-film:not(.gerollt){--kopf:64px;height:64px;background:rgb(var(--flaeche-1-rgb) / .82);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid rgb(var(--tinte-rgb) / .08);box-shadow:none}
.kopf::before,.kopf::after{display:none!important}
.kopf .marke img{height:34px}
.kopf .logo-dunkel,.kopf.dunkel .logo-dunkel{display:none}.kopf.dunkel .logo-hell{display:block}
.kopf .haupt>a,.kopf .nav-knopf,.kopf.dunkel .haupt>a,.kopf.dunkel .nav-knopf{font:500 .88rem var(--lauf);color:#2B3035;color:light-dark(#2B3035,#D5DADE)}
.kopf .haupt>a:hover,.kopf .nav-knopf:hover{color:#000;color:light-dark(#000,#F3F5F6)}
.kopf .kopf-knopf,.kopf.dunkel .kopf-knopf{min-height:36px;padding:0 16px;font-size:.84rem;background:var(--graphit);color:#fff;box-shadow:none}
.kopf .kopf-knopf i,.kopf.dunkel .kopf-knopf i{background:var(--akzent-flaeche);box-shadow:none}
.kopf .menue-auf,.kopf.dunkel .menue-auf{background:var(--flaeche-1);border:1px solid #DCE1E5;color:var(--tinte)}
.kopf .mega{background:rgb(var(--flaeche-1-rgb) / .97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgb(var(--tinte-rgb) / .08);box-shadow:none}

/* Footer hell, ruhig */
.fuss.fuss-neu{background:var(--flaeche);color:#686F74;color:light-dark(#686F74,#9AA3AA);padding:56px 0 28px;margin:0;border-radius:0}
.fuss-neu .fn-oben{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid #DFE2E5;border-bottom-color:light-dark(#DFE2E5,#2E343A);margin-bottom:34px}
.fuss-neu .fuss-marke img{height:52px;width:auto;margin:0 0 10px}
.fuss-neu .fuss-marke p{font-size:.9rem;color:#686F74;color:light-dark(#686F74,#9AA3AA);margin:0}
.fn-cta{display:flex;align-items:center;gap:16px;background:var(--flaeche-1);border-radius:22px;padding:12px 20px 12px 12px}
.fn-cta img{height:74px;width:auto}.fn-cta b{display:block;font:720 1rem var(--titel);color:var(--tinte);margin-bottom:8px}
.fn-cta .knopf{min-height:38px;padding:0 16px;font-size:.84rem}
.fuss-neu .fuss-gitter{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.fuss-neu .fuss-titel{font:650 .78rem var(--lauf);letter-spacing:0;text-transform:none;color:var(--tinte);margin-bottom:10px}
.fuss-neu .fuss-gitter a{font-size:.8rem;color:#686F74;color:light-dark(#686F74,#9AA3AA);padding:3px 0}.fuss-neu .fuss-gitter a:hover{color:var(--tinte)}
.fuss-adresse{font-size:.8rem;line-height:1.5;margin:0 0 6px}
.fuss-neu .fuss-ende{margin-top:34px;padding-top:18px;border-top:1px solid #DFE2E5;border-top-color:light-dark(#DFE2E5,#2E343A);font-size:.76rem;color:#686F74;color:light-dark(#686F74,#9AA3AA)}
.fuss-neu .fuss-ende a{color:#686F74;color:light-dark(#686F74,#9AA3AA);font-size:.76rem}
@media(max-width:1000px){.fuss-neu .fuss-gitter{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.fuss-neu .fuss-gitter{grid-template-columns:1fr 1fr}.fn-cta{width:100%}}

/* Unterseiten flach */
.s-held{background:var(--flaeche-1)}
.s-held-bild{box-shadow:none;background:var(--flaeche);border-radius:32px}
.s-held-bild img{transform:none}
.kapitel{background:var(--flaeche-1);border-top:0}
.kapitel:nth-of-type(even){background:var(--flaeche)}
.k-nr{background:none;-webkit-text-fill-color:#C3C9CE;color:#C3C9CE}
.karte{background:var(--flaeche);border:0;box-shadow:none;border-radius:24px;padding:26px}
.kapitel:nth-of-type(even) .karte{background:var(--flaeche-1)}
.karte-nr{color:var(--akzent-tief)}
.reihen li::before{box-shadow:none}
.kachel{background:var(--flaeche);border:0;box-shadow:none;border-radius:26px}
.kachel-bild{background:#ECEEF0;background:light-dark(#ECEEF0,#0E1012)}
.unterseite .frage,.kapitel .frage{background:var(--flaeche);border:0;box-shadow:none;border-radius:20px}
.kapitel:nth-of-type(even) .frage{background:var(--flaeche-1)}
.kapitel .frage i{background:var(--graphit)}
.band-tafel{background:radial-gradient(110% 120% at 85% 110%,#2F57C2 0%,#1E3A8A 38%,#0B1A44 100%);box-shadow:none;border:0}
.band-tafel::before,.band-tafel::after{display:none}
.band-tafel .marke-zeile{color:#9DB4F0}.band-tafel .band-titel{color:#fff}.band-tafel .band-titel em{color:var(--akzent-text)}
.zitat{background:var(--flaeche);border-radius:22px;border:0;box-shadow:none}

/* ===== Konfigurator (06.10.2026) ===== */
.kf-held,.uu-held{padding:calc(var(--kopf) + 50px) 0 30px;background:var(--flaeche-1)}
.kf-titel{font:800 clamp(2.4rem,5.4vw,4.6rem)/1 var(--titel);font-stretch:108%;letter-spacing:-.045em;color:var(--tinte);margin:14px 0 16px}
.kf-titel em{font-style:normal;color:var(--stahl)}
.kf-held .lead,.uu-held .lead{max-width:56ch}
.kf{background:var(--flaeche-1);padding:10px 0 90px}
.kf-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.kf-schritte{list-style:none;margin:0 0 22px;padding:5px;display:flex;gap:4px;background:var(--flaeche);border-radius:99px;overflow-x:auto}
.kf-schritte li{flex:1;min-width:max-content;text-align:center;padding:10px 14px;border-radius:99px;font:600 .86rem var(--lauf);color:#686F74;color:light-dark(#686F74,#9AA3AA);cursor:pointer;white-space:nowrap}
.kf-schritte li span{font-size:.72rem;color:var(--stahl);margin-right:6px}
.kf-schritte li.fertig{color:var(--tinte)}
.kf-schritte li.an{background:var(--flaeche-1);color:var(--tinte);box-shadow:0 1px 2px rgb(var(--schatten-rgb) / .12)}
.kf-schritt{display:none;border:0;margin:0;padding:clamp(22px,3vw,36px);background:var(--flaeche);border-radius:30px}
.kf-schritt.an{display:block}
.kf-schritt legend{float:left;width:100%;font:800 clamp(1.6rem,3vw,2.4rem)/1.05 var(--titel);letter-spacing:-.035em;color:var(--tinte);margin-bottom:8px}
.kf-schritt legend small{display:block;font:600 .74rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--stahl);margin-bottom:10px}
.kf-hilfe{clear:both;color:var(--grau);margin:0 0 20px}
.kf-wahl{display:grid;gap:10px}.kf-zwei{grid-template-columns:1fr 1fr}
.kf-karte{position:relative;display:grid;gap:4px;background:var(--flaeche-1);border-radius:20px;padding:18px 20px 18px 54px;cursor:pointer;border:1.5px solid transparent;transition:border-color .2s}
.kf-karte input{position:absolute;left:20px;top:20px;width:20px;height:20px;accent-color:var(--graphit)}
.kf-karte b{font:700 1rem var(--titel);color:var(--tinte)}.kf-karte span{font-size:.88rem;color:var(--grau);line-height:1.45}
.kf-karte:has(input:checked){border-color:var(--graphit)}
.kf-pakete{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 20.10.2026: vier Abschnitte, Trennstrich in der Leiste, wo ein neuer Abschnitt beginnt */
.kf-kapitel{margin:0 0 10px 6px;font:600 .74rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
.kf-schritte li.kf-kapitel-start{position:relative;margin-left:9px}
.kf-schritte li.kf-kapitel-start::before{content:"";position:absolute;left:-7px;top:22%;bottom:22%;width:1.5px;border-radius:2px;background:var(--stahl);opacity:.45}
.kf-paket{padding:18px 16px 18px;text-align:center;justify-items:center}
.kf-paket input{left:14px;top:14px}
.kf-paket img{height:110px;width:auto;margin-bottom:6px}
.kf-paket em{font:800 1.4rem var(--titel);font-style:normal;color:var(--tinte)}
.kf-paket.tipp::after{content:"Vorschlag";position:absolute;top:12px;right:12px;font:700 .66rem var(--lauf);letter-spacing:.08em;text-transform:uppercase;color:var(--akzent-tief)}
.kf-unter{font:700 1rem var(--titel);color:var(--tinte);margin:24px 0 10px}
.kf-chips{display:flex;flex-wrap:wrap;gap:8px}
.kf-chips label{cursor:pointer}.kf-chips input{position:absolute;opacity:0;pointer-events:none}
.kf-chips span{display:inline-block;background:var(--flaeche-1);border:1.5px solid #E2E5E8;border-color:light-dark(#E2E5E8,#2E343A);border-radius:99px;padding:10px 16px;font:600 .88rem var(--lauf);color:var(--tinte)}
.kf-chips input:checked+span{background:var(--graphit);border-color:var(--graphit);color:#fff}
.kf-chips input:focus-visible+span{outline:2px solid var(--licht);outline-offset:2px}
.kf-klein{font-size:.8rem;color:var(--stahl);margin:10px 0 0}
.kf-bestand{display:grid;gap:8px}
.kf-zeile{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:var(--flaeche-1);border-radius:16px;padding:12px 14px 12px 18px}
.kf-zeile b{display:block;font:700 .95rem var(--titel);color:var(--tinte)}.kf-zeile span{font-size:.8rem;color:var(--grau)}
.kf-drei{display:flex;gap:4px;background:var(--flaeche);border-radius:99px;padding:3px}
.kf-drei label{cursor:pointer}.kf-drei input{position:absolute;opacity:0;pointer-events:none}
.kf-drei span{display:block;padding:7px 12px;border-radius:99px;font:600 .78rem var(--lauf);color:#686F74;color:light-dark(#686F74,#9AA3AA);white-space:nowrap}
.kf-drei input:checked+span{background:var(--graphit);color:#fff}
.kf-feld{display:grid;gap:6px;margin-top:16px}.kf-feld span{font:600 .84rem var(--lauf);color:var(--tinte)}
.kf-feld input,.kf-feld textarea,.kf-feld select{font:inherit;border:1.5px solid #E2E5E8;border-color:light-dark(#E2E5E8,#2E343A);border-radius:14px;padding:13px 15px;background:var(--flaeche-1);color:var(--tinte);width:100%}
.kf-feld input:focus,.kf-feld textarea:focus,.kf-feld select:focus{outline:none;border-color:var(--graphit)}
.kf-felder{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.kf-haken{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.9rem;color:#3A4248;color:light-dark(#3A4248,#D5DADE)}.kf-haken input{margin-top:3px;accent-color:var(--graphit)}
.kf-regler{background:var(--flaeche-1);border-radius:22px;padding:22px}
.kf-regler-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.kf-regler-kopf b{font:800 1.8rem var(--titel);letter-spacing:-.03em;color:var(--tinte)}.kf-regler-kopf span{font:600 .9rem var(--lauf);color:var(--akzent-tief)}
.kf-regler input{width:100%;accent-color:var(--graphit)}
.kf-skala{display:flex;justify-content:space-between;font-size:.72rem;color:var(--stahl);margin-top:6px}
.kf-nav{display:flex;justify-content:space-between;margin-top:18px}
.kf-danke{display:flex;gap:24px;align-items:center;background:var(--flaeche);border-radius:30px;padding:30px}.kf-danke img{height:160px;width:auto}
.kf-danke h2{font:800 2rem var(--titel);letter-spacing:-.03em;margin:0 0 8px}
.kf-zettel{position:sticky;top:calc(var(--kopf) + 20px);background:var(--graphit);color:#D9DDE0;border-radius:28px;padding:24px}
.kf-zettel-kopf{font:700 .74rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:#9AA3AA;margin:0 0 12px}
.kf-zettel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-height:60px}
.kf-zettel li{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:9px}
.kf-zettel li b{color:#fff;text-align:right;white-space:nowrap}.kf-zettel li.leer{color:#8A9298;border:0}
.kf-summe{display:grid;gap:10px;margin:18px 0 6px}.kf-summe div{display:flex;justify-content:space-between;align-items:baseline}
.kf-summe span{font-size:.84rem;color:#9AA3AA}.kf-summe b{font:800 1.5rem var(--titel);color:#fff;letter-spacing:-.02em}
.kf-summe div+div b{font-size:1.1rem;color:var(--akzent-text)}
.kf-zettel .kf-klein{color:#8A9298}
.pk-konfig{display:flex;align-items:center;gap:18px;margin-top:18px;padding:22px 26px;border-radius:22px;background:var(--graphit);color:#fff;text-decoration:none}
.pk-konfig span{flex:1;display:grid;gap:3px}.pk-konfig b{font:760 1.2rem var(--titel)}.pk-konfig em{font-style:normal;color:#9AA3AA;font-size:.88rem}
.pk-konfig i{font-style:normal;width:42px;height:42px;border-radius:50%;background:var(--akzent-flaeche);color:#16191C;color:light-dark(#16191C,#F3F5F6);display:grid;place-items:center;transition:transform .3s}
@media(hover:hover){.pk-konfig:hover i{transform:translateX(4px)}}
@media(max-width:1000px){.kf-raster{grid-template-columns:1fr}.kf-zettel{position:static}.kf-pakete{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.kf-zwei,.kf-felder{grid-template-columns:1fr}.kf-zeile{grid-template-columns:1fr}.kf-drei{justify-self:start}.kf-danke{flex-direction:column;text-align:center}}

/* ===== Über uns (06.10.2026) ===== */
.uu-lead{max-width:60ch;margin:-12px 0 30px}
.uu-team,.uu-produkte{background:var(--flaeche-1)}.uu-warum,.uu-stimmen{background:var(--flaeche)}
.uu-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.uu-person{background:var(--flaeche);border-radius:28px;padding:0 0 24px;overflow:hidden;display:grid;gap:6px}
.uu-person figure{margin:0 0 10px;aspect-ratio:4/4.4;overflow:hidden;background:#ECEEF0;background:light-dark(#ECEEF0,#0E1012)}
.uu-person img{width:100%;height:100%;object-fit:cover;object-position:top}
.uu-person small,.uu-person b,.uu-person q,.uu-person p{margin:0 24px}
.uu-person small{font:600 .74rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--stahl)}
.uu-person b{font:760 1.4rem var(--titel);color:var(--tinte)}
.uu-person q{font:600 1rem/1.4 var(--titel);color:var(--akzent-tief);quotes:"„" "“"}
.uu-person p{font-size:.92rem;color:var(--grau);line-height:1.55}
.uu-zwei{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,70px)}
.uu-text p{font-size:1.05rem;line-height:1.7;color:#3A4248;color:light-dark(#3A4248,#D5DADE);margin:0 0 16px}
.uu-produkt-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.uu-produkt{background:var(--flaeche);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.uu-produkt figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:#ECEEF0;background:light-dark(#ECEEF0,#0E1012)}
.uu-produkt img{width:100%;height:100%;object-fit:cover;object-position:top}
.uu-produkt>div{padding:20px 22px 24px;display:grid;gap:6px}
.uu-produkt small{font:600 .74rem var(--lauf);letter-spacing:.1em;text-transform:uppercase;color:var(--stahl)}
.uu-produkt b{font:780 1.5rem var(--titel);letter-spacing:-.02em;color:var(--tinte)}
.uu-produkt p{margin:0;font-size:.92rem;line-height:1.55;color:var(--grau)}
.uu-produkt a{color:var(--akzent-tief);font-weight:600;text-decoration:none;margin-top:4px}
.uu-gross{grid-column:span 2;flex-direction:row}.uu-gross figure{flex:1.3;aspect-ratio:auto}.uu-gross>div{flex:1;align-content:center}
.uu-ohne{justify-content:flex-end;min-height:220px;background:radial-gradient(110% 120% at 85% 110%,#2F57C2 0%,#1E3A8A 40%,#0B1A44 100%)}
.uu-ohne small{color:#9DB4F0}.uu-ohne b{color:#fff}.uu-ohne p{color:#C9D4F2}
.uu-mehr{background:var(--graphit)}
.uu-stimmen-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.uu-stimme{margin:0;background:var(--flaeche-1);border-radius:26px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.uu-stimme p{margin:0;font-size:.98rem;line-height:1.6;color:#2B3035;color:light-dark(#2B3035,#D5DADE)}
.uu-stimme cite{font:700 .9rem var(--titel);font-style:normal;color:var(--tinte)}
.uu-stimme cite::before{content:"★★★★★  ";color:#E8A317;letter-spacing:.05em}
@media(max-width:1000px){.uu-raster,.uu-stimmen-raster{grid-template-columns:1fr 1fr}.uu-produkt-raster{grid-template-columns:1fr 1fr}.uu-zwei{grid-template-columns:1fr}}
@media(max-width:640px){.uu-raster,.uu-stimmen-raster,.uu-produkt-raster{grid-template-columns:1fr}.uu-gross{grid-column:auto;flex-direction:column}.uu-gross figure{aspect-ratio:16/10}}
.uu-gross img{object-position:0 0}

/* ===== Über uns, Runde 2 (06.10.2026) ===== */
.uu-held .kf-titel em{color:#2B4FB0;color:light-dark(#2B4FB0,#9DB3F2)}
.uu-person{padding:0;background:linear-gradient(180deg,#F5F5F7 0%,#E8EBEE 100%);background:linear-gradient(180deg,light-dark(#F5F5F7,#0E1012) 0%,light-dark(#E8EBEE,#23282D) 100%);border-radius:30px;gap:0;display:flex;flex-direction:column}
.uu-person figure{margin:0;aspect-ratio:auto;height:clamp(300px,30vw,420px);display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(60% 55% at 50% 70%,#fff 0%,rgba(255,255,255,0) 70%);background:radial-gradient(60% 55% at 50% 70%,light-dark(#fff,#1A1E22) 0%,rgba(255,255,255,0) 70%);overflow:hidden}
.uu-person figure img{width:auto;height:96%;object-fit:contain;object-position:bottom;filter:grayscale(1) contrast(1.04)}
.uu-person-text{background:var(--flaeche-1);padding:22px 24px 26px;display:grid;gap:6px;flex:1}
.uu-person-text small,.uu-person-text b,.uu-person-text q,.uu-person-text p{margin:0}
.uu-person-text b{font-size:1.6rem;letter-spacing:-.02em}
@media(hover:hover){.uu-person figure img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.uu-person:hover figure img{transform:scale(1.03)}}
/* Produkte als große Schaufenster */
.pr-liste{display:grid;gap:22px}
.pr{--pr-grund:#16191C;--pr-akzent:var(--licht);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,4vw,56px);align-items:center;border-radius:36px;padding:clamp(26px,4vw,56px);background:var(--pr-grund);color:#D9DDE0;overflow:hidden}
.pr:nth-child(even){grid-template-columns:1.15fr .85fr}.pr:nth-child(even) .pr-text{order:2}
.pr-mpu{--pr-grund:radial-gradient(120% 120% at 100% 0%,#3A2A12 0%,#17140F 55%);--pr-akzent:#F3A93B}
.pr-noogo{--pr-grund:radial-gradient(120% 120% at 0% 100%,#22301F 0%,#0E1714 60%);--pr-akzent:#E9A94B}
.pr-kompass{--pr-grund:radial-gradient(120% 120% at 100% 100%,#26285A 0%,#0D1020 60%);--pr-akzent:#A9A9FF}
.pr-wayyoo{--pr-grund:radial-gradient(120% 120% at 0% 0%,#4A1A22 0%,#1B0A0C 60%);--pr-akzent:#FFC247}
.pr-status{display:inline-block;font:700 .72rem var(--lauf);letter-spacing:.1em;text-transform:uppercase;color:var(--pr-akzent);border:1px solid color-mix(in srgb,var(--pr-akzent) 45%,transparent);border-radius:99px;padding:6px 12px}
.pr h3{font:800 clamp(2.4rem,4.4vw,3.8rem)/1 var(--titel);letter-spacing:-.04em;color:#fff;margin:16px 0 8px}
.pr-claim{font:650 1.25rem/1.3 var(--titel);color:var(--pr-akzent);margin:0 0 12px}
.pr-text>p{margin:0 0 14px;line-height:1.6}
.pr ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.pr li{padding-left:20px;position:relative;font-size:.95rem}.pr li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--pr-akzent)}
.pr-link{color:var(--pr-akzent);font-weight:700;text-decoration:none}
.pr-bild{position:relative;padding:0 8% 6% 0}
.pr-browser{border-radius:14px;overflow:hidden;background:var(--flaeche-1);outline:1px solid rgba(255,255,255,.12)}
.pr-browser .mk-leiste{background:#F4F5F7;background:light-dark(#F4F5F7,#0E1012)}
.pr-browser img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pr-handy{position:absolute;right:0;bottom:0;width:26%;aspect-ratio:390/844;border-radius:24px;overflow:hidden;outline:6px solid #0B0C0E;background:#000}
.pr-handy img{width:100%;height:100%;object-fit:cover;object-position:top}
@media(max-width:900px){.pr,.pr:nth-child(even){grid-template-columns:1fr}.pr:nth-child(even) .pr-text{order:0}.pr-handy{width:30%}}

/* ===================== Team-Bühne (06.10.2026) ===================== */
.tb{position:relative;height:340vh;background:var(--flaeche-1)}
.tb-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(70% 60% at 50% 72%,#E8EEFB 0%,#F5F5F7 55%,#fff 100%);background:radial-gradient(70% 60% at 50% 72%,light-dark(#E8EEFB,#0E1012) 0%,light-dark(#F5F5F7,#0E1012) 55%,light-dark(#fff,#1A1E22) 100%)}
.tb-wort{position:absolute;left:0;right:0;top:32%;display:grid;gap:0;transform:translateY(-50%);pointer-events:none}
.tb-wort span{white-space:nowrap;font:900 clamp(6rem,16vw,15rem)/.9 var(--titel);font-stretch:118%;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(30,58,138,.16);transform:translateX(calc(var(--p,0) * -60vw))}
.tb-wort span+span{transform:translateX(calc(-80vw + var(--p,0) * 60vw));-webkit-text-stroke-color:rgba(30,58,138,.08)}
.tb-ring{position:absolute;left:50%;bottom:-18vh;width:min(78vh,820px);aspect-ratio:1;transform:translateX(-50%)}
.tb-ring i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,#2F57C2 0%,#1E3A8A 45%,#0B1A44 70%,transparent 71%);opacity:.95}
.tb-ring i+i{inset:-4%;background:none;border:1.5px dashed rgba(43,79,176,.4);animation:tb-dreh 40s linear infinite}
@keyframes tb-dreh{to{transform:rotate(360deg)}}
.tb-kopf{position:relative;z-index:20;padding-top:calc(var(--kopf) + 28px)}
.tb-kopf h2{font:800 clamp(2rem,4.2vw,3.6rem)/1 var(--titel);letter-spacing:-.04em;margin:0;color:var(--tinte)}.tb-kopf h2 em{font-style:normal;color:var(--stahl)}
.tb-leute{position:absolute;inset:0;pointer-events:none}
.tb-person{position:absolute;left:50%;bottom:0;margin:0;height:min(74vh,720px);transform-origin:50% 100%;will-change:transform,opacity;transition:filter .3s}
.tb-person img{height:100%;width:auto;display:block}
.tb-unten{position:absolute;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:5vh;pointer-events:none}
.tb-texte{position:relative;width:min(420px,40vw);min-height:240px}
.tb-info{position:absolute;left:0;bottom:0;display:grid;gap:6px;background:rgb(var(--flaeche-1-rgb) / .86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:26px;padding:22px 24px;opacity:0;transform:translateY(16px);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1)}
.tb-info.an{opacity:1;transform:none}
.tb-nr{font:700 .74rem var(--lauf);letter-spacing:.14em;color:#2B4FB0;color:light-dark(#2B4FB0,#9DB3F2)}
.tb-info small{font:600 .74rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--stahl)}
.tb-info b{font:800 clamp(1.8rem,3vw,2.6rem)/1 var(--titel);letter-spacing:-.035em;color:var(--tinte)}
.tb-info q{font:650 1.05rem/1.35 var(--titel);color:#2B4FB0;color:light-dark(#2B4FB0,#9DB3F2);quotes:"„" "“"}
.tb-info p{margin:0;font-size:.92rem;line-height:1.55;color:var(--grau)}
.tb-balken{width:min(220px,30vw);height:3px;border-radius:2px;background:rgba(30,58,138,.15);overflow:hidden;margin-bottom:12px}
.tb-balken i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:#2B4FB0}
@media(max-width:760px){.tb{height:300vh}.tb-person{height:52vh}.tb-texte{width:100%;min-height:200px}.tb-unten{flex-direction:column;align-items:stretch;gap:10px}.tb-balken{width:100%}.tb-info{padding:16px 18px}.tb-info p{display:none}}

/* ===================== Signatur-Bühnen der Unterseiten ===================== */
.bn{position:relative;height:var(--hoehe,300vh);background:var(--flaeche-1)}
.bn-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;background:linear-gradient(180deg,#fff 0%,var(--flaeche) 100%);background:linear-gradient(180deg,light-dark(#fff,#1A1E22) 0%,var(--flaeche) 100%)}
.bn-raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,70px);align-items:center;padding-top:var(--kopf);width:min(100% - 40px,var(--breite))}
.bn-text h2{font:800 clamp(2rem,4vw,3.4rem)/1 var(--titel);letter-spacing:-.04em;margin:0 0 22px;color:var(--tinte)}
.bn-punkte{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:bn}
.bn-punkte li{counter-increment:bn;display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding:12px 14px;border-radius:18px;transition:background .35s,opacity .35s;opacity:.45}
.bn-punkte li::before{content:counter(bn,decimal-leading-zero);grid-row:1/3;font:700 .78rem var(--lauf);color:var(--stahl);padding-top:3px}
.bn-punkte li b{font:720 1.05rem var(--titel);color:var(--tinte)}
.bn-punkte li span{grid-column:2;font-size:.9rem;line-height:1.5;color:var(--grau);max-height:0;overflow:hidden;transition:max-height .45s}
.bn-punkte li.fertig{opacity:.7}
.bn-punkte li.an{opacity:1;background:var(--flaeche)}.bn-punkte li.an span{max-height:6em}
.bn-punkte li.an::before{color:#2B4FB0;color:light-dark(#2B4FB0,#9DB3F2)}
.bn-stage{position:relative;height:min(66vh,620px);display:grid;place-items:center}

/* A Schichten */
.bn-iso{position:relative;width:min(100%,460px);aspect-ratio:1;transform:rotateX(58deg) rotateZ(-38deg);transform-style:preserve-3d}
.bn-lage{position:absolute;inset:12%;border-radius:18px;background:var(--flaeche-1);outline:1px solid #DCE1E5;transform:translateZ(calc(var(--i) * var(--p,0) * 70px));transition:background .4s;display:grid;grid-template-rows:auto 1fr 1fr;gap:8px;padding:16px}
.bn-lage span{font:700 .82rem var(--lauf);color:var(--tinte);transform:rotateZ(38deg) translate(10px,-6px);transform-origin:left top;white-space:nowrap;opacity:calc(var(--p,0) * 2)}
.bn-lage i{display:block;border-radius:8px;background:var(--flaeche)}
.bn-lage:nth-child(1){background:#F7F8FA;background:light-dark(#F7F8FA,#0E1012)}
.bn-lage:nth-child(2) i:first-of-type{background:#DCE3F5;background:light-dark(#DCE3F5,#23282D)}
.bn-lage:nth-child(3) i{background:#E8EBEE;background:light-dark(#E8EBEE,#23282D)}.bn-lage:nth-child(4){background:#EEF2FC;background:light-dark(#EEF2FC,#0E1012)}
.bn-lage:nth-child(5) i:nth-of-type(2){background:linear-gradient(90deg,#2B4FB0 0 60%,#DCE3F5 60%);background:linear-gradient(90deg,#2B4FB0 0 60%,light-dark(#DCE3F5,#23282D) 60%)}
.bn-lage:nth-child(6){background:#1E3A8A;outline-color:#1E3A8A}.bn-lage:nth-child(6) span{color:#fff}.bn-lage:nth-child(6) i{background:rgba(255,255,255,.14)}
.bn-art-schichten[style*="--i-akt"] .bn-lage{opacity:1}

/* B Aufstieg */
.bn-suche{width:min(100%,520px);background:var(--flaeche-1);border-radius:26px;padding:20px;outline:1px solid #E4E7EA;position:relative}
.bn-feld{border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);border-radius:99px;padding:11px 16px;margin-bottom:14px;color:var(--tinte)}
.bn-liste{position:relative;height:calc(6 * 62px)}
.bn-treffer{position:absolute;left:0;right:0;top:0;height:54px;border-radius:14px;background:var(--flaeche);padding:8px 14px;transition:transform .5s cubic-bezier(.2,.7,.2,1);display:grid;align-content:center;gap:2px}
.bn-treffer small{display:block;height:7px;width:30%;border-radius:4px;background:#E3E6EA;background:light-dark(#E3E6EA,#23282D)}.bn-treffer b{display:block;height:9px;width:70%;border-radius:4px;background:#D8DCE0;background:light-dark(#D8DCE0,#23282D)}
.bn-du{background:#EEF2FC;background:light-dark(#EEF2FC,#0E1012);outline:1.5px solid #2B4FB0;z-index:2}.bn-du small,.bn-du b{height:auto;width:auto;background:none}
.bn-du small{font-size:.72rem;color:var(--stahl)}.bn-du b{font:700 .92rem var(--titel);color:#1A4FA0;color:light-dark(#1A4FA0,#9DB3F2)}.bn-du span{font-size:.72rem;color:#E8A317}
.bn-ki{position:absolute;right:-6%;bottom:-8%;width:62%;background:var(--graphit);color:#fff;border-radius:18px 18px 4px 18px;padding:14px 16px;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.bn-ki p{margin:0 0 6px;font-size:.9rem}.bn-ki b{color:#9DB3F2}.bn-ki small{font-size:.72rem;color:#9AA3AA}
.ki-an .bn-ki{opacity:1;transform:none}

/* C Weg */
.bn-strecke{position:relative;width:min(100%,560px);height:100%;display:grid;align-content:center;gap:0}
.bn-linie{position:absolute;left:28px;top:12%;bottom:12%;width:3px;border-radius:2px;background:#E2E5E8;background:light-dark(#E2E5E8,#23282D)}
.bn-linie::after{content:"";position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);background:#2B4FB0;border-radius:2px}
.bn-punkt{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#2B4FB0;outline:6px solid rgba(43,79,176,.18)}
.bn-stopp{position:relative;display:flex;align-items:center;gap:22px;padding:4vh 0 4vh 0}
.bn-stopp i{position:relative;z-index:1;flex:none;width:58px;height:58px;border-radius:18px;background:var(--flaeche-1);outline:1px solid #DCE1E5;transition:background .4s,outline-color .4s}
.bn-stopp b{font:780 clamp(1.4rem,2.6vw,2.2rem) var(--titel);letter-spacing:-.03em;color:#C3C9CE;transition:color .4s}
.bn-art-weg .bn-stopp:nth-child(2) i{transition-delay:0s}
.bn-art-weg[style] .bn-stopp{--an:clamp(0,calc((var(--p,0) * var(--n,4) - var(--i)) * 4),1)}
.bn-stopp{--x:calc(var(--p,0) * 4 - var(--i))}
.bn-art-weg .bn-stopp i{background:color-mix(in srgb,#2B4FB0 calc(clamp(0,var(--x) * 100,100) * 1%),#fff);background:color-mix(in srgb,#2B4FB0 calc(clamp(0,var(--x) * 100,100) * 1%),light-dark(#fff,#1A1E22))}
.bn-art-weg .bn-stopp b{color:color-mix(in srgb,var(--graphit) calc(clamp(0,var(--x) * 100,100) * 1%),#C3C9CE)}

/* D Raster */
.bn-handy{width:min(300px,70vw);border-radius:42px;background:var(--flaeche-1);outline:10px solid #16191C;padding:20px 12px 14px}
.bn-profil{display:flex;align-items:center;gap:10px;padding:0 6px 14px;font-size:.86rem}.bn-profil span{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#2B4FB0,#0B1A44)}
.bn-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.bn-gitter i{aspect-ratio:3/4;border-radius:4px;opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.3,1.3)}
.bn-gitter i.da{opacity:1;transform:none}

/* E Streifen */
.bn-band{width:100%;overflow:hidden;border-radius:22px;background:#0B1A44;padding:14px 0 18px}
.bn-band-spur{display:flex;gap:10px;padding:0 14px;width:max-content;will-change:transform}
.bn-band-spur figure{margin:0;width:min(36vw,380px);aspect-ratio:16/9;border-radius:10px;overflow:hidden;outline:3px solid rgba(255,255,255,.08)}
.bn-band-spur img{width:100%;height:100%;object-fit:cover}
.bn-zeit{margin:14px 14px 0;height:3px;border-radius:2px;background:rgba(255,255,255,.18)}.bn-zeit i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--akzent-flaeche);border-radius:2px}

/* F Prüfung */
.bn-scan{width:min(100%,560px);display:grid;gap:14px}
.bn-scan-seite{position:relative;border-radius:16px;overflow:hidden;outline:1px solid #DCE1E5;aspect-ratio:16/10;background:var(--flaeche-1)}
.bn-scan-seite img{width:100%;height:100%;object-fit:cover;object-position:top}
.bn-scan-linie{position:absolute;left:0;right:0;top:calc(var(--p,0) * 100%);height:3px;background:#2B4FB0;outline:10px solid rgba(43,79,176,.15)}
.bn-scan-seite::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--p,0) * 100%);background:rgba(43,79,176,.06)}
.bn-haken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bn-haken li{--x:clamp(0,calc((var(--p,0) * 4 - var(--i)) * 3),1);display:flex;align-items:center;gap:10px;background:var(--flaeche-1);border-radius:14px;padding:10px 12px;font:600 .88rem var(--lauf);color:var(--tinte);opacity:calc(.35 + var(--x) * .65)}
.bn-haken i{width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,#2B4FB0 calc(var(--x) * 100%),#E2E5E8);background:color-mix(in srgb,#2B4FB0 calc(var(--x) * 100%),light-dark(#E2E5E8,#23282D));position:relative}
.bn-haken i::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* G Mail */
.bn-mailhandy{width:min(310px,72vw);border-radius:42px;background:#F2F3F5;background:light-dark(#F2F3F5,#0E1012);outline:10px solid #16191C;padding:22px 14px}
.bn-mailkarte{background:var(--flaeche-1);border-radius:16px;overflow:hidden;display:grid}
.bm-teil{--x:clamp(0,calc((var(--p,0) * 5.5 - var(--i)) * 2.5),1);opacity:var(--x);transform:translateY(calc((1 - var(--x)) * 26px))}
.bm-kopf{display:flex;align-items:center;gap:8px;padding:14px;font-size:.86rem;border-bottom:1px solid #EEF0F2;border-bottom-color:light-dark(#EEF0F2,#2E343A)}.bm-kopf span{width:26px;height:26px;border-radius:8px;background:#1E3A8A}
.bm-bild{background:linear-gradient(150deg,#2B4FB0,#0B1A44);color:#fff;font:780 1.3rem/1.1 var(--titel);padding:44px 16px 16px}
.bm-text{display:grid;gap:7px;padding:16px}.bm-text i{height:8px;border-radius:4px;background:#E8EBEE;background:light-dark(#E8EBEE,#23282D)}.bm-text i:nth-child(2){width:85%}.bm-text i:nth-child(3){width:60%}
.bm-knopf{margin:0 16px 16px;background:var(--akzent-flaeche);color:#16191C;color:light-dark(#16191C,#F3F5F6);font-weight:700;text-align:center;border-radius:12px;padding:12px}
.bm-fuss{display:grid;gap:6px;padding:12px 16px;background:#F7F8FA;background:light-dark(#F7F8FA,#0E1012)}.bm-fuss i{height:6px;border-radius:3px;background:#E3E6EA;background:light-dark(#E3E6EA,#23282D);width:70%}.bm-fuss i+i{width:45%}

/* Paket-Erklärer */
.pe{background:var(--flaeche-1)}.pe-lead{max-width:62ch;margin:-12px 0 30px}
.pe-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:6px}
.pe-paket{background:var(--flaeche);border-radius:28px;padding:26px}
.pe-paket header{display:grid;gap:2px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid #DFE2E5;border-bottom-color:light-dark(#DFE2E5,#2E343A)}
.pe-paket header b{font:780 1.5rem var(--titel);color:var(--tinte)}.pe-paket header em{font:800 1.9rem var(--titel);font-style:normal;letter-spacing:-.03em;color:var(--tinte)}.pe-paket header span{font-size:.88rem;color:var(--grau)}
.pe-paket ul{list-style:none;margin:0;padding:0;display:grid}
.pe-paket li{padding:12px 0;border-bottom:1px solid #E7EAEC;border-bottom-color:light-dark(#E7EAEC,#2E343A);display:grid;gap:3px}.pe-paket li:last-child{border:0}
.pe-paket li b{font:700 .95rem var(--titel);color:var(--tinte)}.pe-paket li span{font-size:.86rem;line-height:1.5;color:var(--grau)}
.pe-mitte{background:var(--graphit)}.pe-mitte header{border-color:rgba(255,255,255,.12)}.pe-mitte header b,.pe-mitte header em,.pe-mitte li b{color:#fff}.pe-mitte header span,.pe-mitte li span{color:#9AA3AA}.pe-mitte li{border-color:rgba(255,255,255,.08)}

@media(max-width:900px){
  .bn-raster{grid-template-columns:1fr;gap:14px;align-content:start;padding-top:calc(var(--kopf) + 14px)}
  .bn-kulisse{align-items:flex-start}.bn-text h2{font-size:1.7rem;margin-bottom:10px}
  .bn-punkte li{padding:8px 10px}.bn-punkte li:not(.an){height:0;padding:0;overflow:hidden;opacity:0;margin:0}
  .bn-stage{height:52vh}.bn-iso{width:min(80vw,360px)}
  .pe-raster{grid-template-columns:1fr}
}

/* Kundenstimmen auf Referenzseiten (nur belegte Inhalte) */
.zitat,.zitat *{color:var(--tinte)}
.kb{background:var(--flaeche)}
.kb-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;align-items:stretch}
.kb-einzeln{grid-template-columns:minmax(0,1fr);max-width:760px}
.kb-video,.kb-foto{position:relative;display:block;margin:0;border-radius:28px;overflow:hidden;background:#0B1A44;min-height:320px;text-decoration:none}
.kb-video img,.kb-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kb-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--flaeche-1);display:grid;place-items:center;transition:transform .3s}
.kb-play i{width:0;height:0;border-left:22px solid #16191C;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px}
.kb-video small{position:absolute;left:18px;bottom:16px;color:#fff;font:600 .78rem var(--lauf);background:rgba(11,26,68,.6);border-radius:99px;padding:7px 12px}
@media(hover:hover){.kb-video:hover .kb-play{transform:scale(1.08)}}
.kb-foto figcaption{position:absolute;left:18px;bottom:16px;color:#fff;font:600 .82rem var(--lauf);background:rgba(11,26,68,.6);border-radius:99px;padding:7px 12px}
.kb-stimme{margin:0;background:var(--flaeche-1);border-radius:28px;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.kb-stimme p{margin:0;font:500 clamp(1.05rem,1.6vw,1.3rem)/1.55 var(--lauf);color:#2B3035;color:light-dark(#2B3035,#D5DADE)}
.kb-sterne{color:#E8A317!important;font-size:1rem!important;letter-spacing:.06em}.kb-sterne span{color:var(--stahl);font:600 .74rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;margin-left:8px}
.kb-stimme footer{display:flex;align-items:center;gap:12px}
.kb-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top}
.kb-stimme footer b{display:block;font:740 1.05rem var(--titel);color:var(--tinte)}.kb-stimme footer small{color:var(--grau);font-size:.85rem}
@media(max-width:860px){.kb-raster{grid-template-columns:1fr}.kb-video,.kb-foto{min-height:260px}}

/* ===== Website-Check neu (06.10.2026) ===== */
.ck{background:var(--flaeche-1);padding:clamp(40px,6vw,90px) 0}
.ck-tafel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;background:var(--flaeche);border-radius:40px;padding:clamp(26px,5vw,64px);overflow:hidden;box-shadow:none;border:0;color:var(--tinte)}
.ck-tafel::before,.ck-tafel::after{display:none}
.ck .marke-zeile{color:#2B4FB0;color:light-dark(#2B4FB0,#9DB3F2)}.ck .marke-zeile::before{background:#2B4FB0}
.ck h2{font:800 clamp(2.2rem,4.6vw,4rem)/1 var(--titel);letter-spacing:-.045em;color:var(--tinte);margin:6px 0 14px}.ck h2 em{font-style:normal;color:#2B4FB0;color:light-dark(#2B4FB0,#9DB3F2)}
.ck-lead{color:var(--grau);font-size:1.05rem;max-width:44ch;margin:0 0 22px}
.ck-form{display:flex;align-items:center;gap:6px;background:var(--flaeche-1);border-radius:99px;padding:6px 6px 6px 20px;border:1.5px solid #E2E5E8;border-color:light-dark(#E2E5E8,#2E343A);max-width:560px;transition:border-color .2s}
.ck-form:focus-within{border-color:#2B4FB0}
.ck-https{color:var(--stahl);font-size:.95rem}
.ck-form input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:1rem;color:var(--tinte);padding:12px 0}
.ck-form .knopf{min-height:48px;white-space:nowrap}
.ck-schritte{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ck-schritte li{background:var(--flaeche-1);border-radius:18px;padding:14px 16px;display:grid;gap:4px}
.ck-schritte b{font:700 .74rem var(--lauf);color:#2B4FB0;color:light-dark(#2B4FB0,#9DB3F2);letter-spacing:.1em}.ck-schritte span{font-size:.88rem;color:var(--tinte);line-height:1.4}
.ck-klein{font-size:.8rem;color:var(--stahl);margin:14px 0 0}
.ck-rechts{position:relative;padding:0 0 40px}
.ck-schirm{border-radius:18px;overflow:hidden;background:var(--flaeche-1);outline:1px solid #DCE1E5}
.ck-seite{position:relative;aspect-ratio:16/10;overflow:hidden}.ck-seite img{width:100%;height:100%;object-fit:cover;object-position:top}
.ck-linie{position:absolute;left:0;right:0;top:0;height:3px;background:#2B4FB0;outline:12px solid rgba(43,79,176,.14);animation:ck-scan 4.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes ck-scan{0%{top:0}50%{top:calc(100% - 3px)}100%{top:0}}
.ck-befunde{position:absolute;left:-6%;bottom:0;list-style:none;margin:0;padding:14px;display:grid;gap:8px;background:var(--flaeche-1);border-radius:20px;outline:1px solid #E4E7EA;min-width:220px}
.ck-befunde li{display:flex;align-items:center;gap:10px;font:600 .86rem var(--lauf);color:var(--tinte);animation:ck-an 4.8s var(--d) infinite both}
.ck-befunde i{width:20px;height:20px;border-radius:50%;background:#2B4FB0;position:relative;flex:none}
.ck-befunde i::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes ck-an{0%,8%{opacity:.25}16%,92%{opacity:1}100%{opacity:.25}}
.ck-robo{position:absolute;right:-4%;bottom:-6%;height:min(260px,40%);width:auto;pointer-events:none}
@media(max-width:900px){.ck-tafel{grid-template-columns:1fr}.ck-schritte{grid-template-columns:1fr}.ck-befunde{left:0}.ck-robo{height:150px}}
@media(max-width:520px){.ck-https{display:none}.ck-form{padding-left:16px}.ck-form .knopf{padding:0 14px}}

/* ===== Startklar: Laptop klappt auf wie bei einem Produktfilm (06.10.2026) ===== */
.lt-sek{position:relative;height:420vh;background:#05070C}
.lt-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(80% 60% at 50% 100%,#13244F 0%,#070B16 55%,#05070C 100%);color:#fff}
.lt-sterne{position:absolute;inset:-10%;background-image:radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 72% 12%,#fff6,transparent),radial-gradient(1.5px 1.5px at 38% 34%,#fff7,transparent),radial-gradient(1px 1px at 86% 46%,#fff5,transparent),radial-gradient(1px 1px at 22% 62%,#fff5,transparent),radial-gradient(1.5px 1.5px at 58% 70%,#fff6,transparent),radial-gradient(1px 1px at 92% 82%,#fff4,transparent),radial-gradient(1px 1px at 6% 88%,#fff5,transparent);background-size:600px 600px;transform:translateY(calc(var(--p,0) * -120px)) scale(calc(1 + var(--zoom,0) * .4));opacity:.9}
.lt-texte{position:absolute;left:0;right:0;top:calc(var(--kopf) + 4vh);text-align:center;z-index:5;padding:0 20px}
.lt-t{position:absolute;left:0;right:0;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.lt-t.an{opacity:1;transform:none}
.lt-t .marke-zeile{justify-content:center;color:#9DB4F0}.lt-t .marke-zeile::before{display:none}
.lt-t h2{font:800 clamp(2.2rem,5vw,4.4rem)/1 var(--titel);letter-spacing:-.045em;margin:0 0 12px;color:#fff}.lt-t h2 em{font-style:normal;color:#7F9BE6}
.lt-t p{color:#AEB8CC;font-size:1.05rem;margin:0 auto;max-width:46ch}
.lt-raum{position:absolute;left:0;right:0;bottom:6vh;display:flex;justify-content:center;perspective:1800px;perspective-origin:50% 20%}
.lt{--w:min(64vw,880px,calc(56vh * 1.54));position:relative;width:var(--w);transform:translateY(calc(var(--zoom,0) * -14vh)) scale(calc(1 + var(--zoom,0) * .55 - var(--fan,0) * .5));transform-origin:50% 60%;transform-style:preserve-3d}
.lt-deckel{position:relative;aspect-ratio:16/10.3;transform-origin:50% 100%;transform:rotateX(calc((1 - var(--open,0)) * 86deg));transform-style:preserve-3d;z-index:3}
.lt-glas,.lt-ruecken{position:absolute;inset:0;border-radius:18px 18px 4px 4px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lt-glas{background:#0B0C0E;padding:2.1% 2.1% 3%;outline:1.5px solid #3A3F45}
.lt-glas img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:8px;filter:brightness(calc(.15 + var(--open,0) * .85))}
.lt-ruecken{transform:rotateY(180deg) rotateZ(180deg);background:linear-gradient(160deg,#E4E7EA,#AEB4BA);background:linear-gradient(160deg,light-dark(#E4E7EA,#23282D),#AEB4BA);display:grid;place-items:center}
.lt-ruecken img{width:18%;opacity:.55;filter:grayscale(1) brightness(.6)}
.lt-basis{position:relative;height:clamp(10px,1.6vw,18px);margin:0 -7%;background:linear-gradient(180deg,#E9ECEF 0%,#B9C0C6 60%,#8D959C 100%);background:linear-gradient(180deg,light-dark(#E9ECEF,#23282D) 0%,#B9C0C6 60%,#8D959C 100%);border-radius:2px 2px 16px 16px;z-index:4}
.lt-basis i{position:absolute;left:50%;top:0;width:16%;height:40%;transform:translateX(-50%);background:#9CA3AA;border-radius:0 0 8px 8px}
.lt-fan{position:absolute;left:0;right:0;bottom:clamp(10px,1.6vw,18px);aspect-ratio:16/10.3;transform-origin:50% 100%;opacity:var(--fan,0);transform:translateX(calc(var(--k) * var(--fan,0) * 58%)) translateZ(calc(-1 * var(--fan,0) * 120px)) rotateY(calc(var(--k) * var(--fan,0) * -14deg)) scale(calc(1 - var(--fan,0) * .06));z-index:calc(2 - (var(--k) * var(--k)))}
.lt-fan .lt-glas img{filter:none}
@media(max-width:760px){.lt{--w:86vw}.lt-fan{transform:translateX(calc(var(--k) * var(--fan,0) * 34%)) translateZ(calc(-1 * var(--fan,0) * 120px)) rotateY(calc(var(--k) * var(--fan,0) * -14deg))}}
/* Vitrine: welches echte Projekt gerade läuft */
.vt-projekt{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--stahl)}
.vt-projekt::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent)}
/* ===== Explorer neu (06.10.2026): echte Szenen mit Branchenfotos ===== */
.ex-flaeche{grid-template-columns:minmax(240px,320px) 1fr}
.ex-buehne{min-height:540px}
.ex-bild{place-items:stretch}
.xb{position:relative;width:100%;height:100%;min-height:540px;border-radius:24px;overflow:hidden;display:grid;place-items:center;padding:28px}
.xb-foto{background:#111 var(--bg) center/cover}
.xb-foto::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,12,14,.25),rgba(10,12,14,.72))}
.xb-foto>*{position:relative}
/* Webseiten: drei Geräte übereinander */
.xb-geraete{background:radial-gradient(120% 90% at 70% 20%,#FFFFFF 0%,#E9ECEF 60%,#DCE1E5 100%);background:radial-gradient(120% 90% at 70% 20%,light-dark(#FFFFFF,#1A1E22) 0%,light-dark(#E9ECEF,#23282D) 60%,light-dark(#DCE1E5,#23282D) 100%)}
.xb-laptop{position:absolute;left:5%;top:9%;width:72%;border-radius:12px;overflow:hidden;background:var(--flaeche-1);box-shadow:0 30px 60px -20px rgb(var(--schatten-rgb) / .35);outline:1px solid rgb(var(--tinte-rgb) / .08)}
.xb-laptop img{display:block;width:100%}
.xb-tablet{position:absolute;right:5%;top:20%;width:30%;border-radius:18px;overflow:hidden;outline:7px solid #16191C;box-shadow:0 30px 60px -20px rgb(var(--schatten-rgb) / .45)}
.xb-tel{position:absolute;left:44%;bottom:6%;width:19%;border-radius:22px;overflow:hidden;outline:6px solid #16191C;box-shadow:0 30px 60px -18px rgb(var(--schatten-rgb) / .5)}
.xb-tablet img,.xb-tel img{display:block;width:100%}
.xb-notiz{position:absolute;left:5%;bottom:4%;margin:0;font-size:.72rem;color:var(--stahl);max-width:34%}
.ex-bild.an .xb-laptop{animation:xbAuf .8s cubic-bezier(.2,.7,.2,1) both}.ex-bild.an .xb-tablet{animation:xbAuf .8s .12s cubic-bezier(.2,.7,.2,1) both}.ex-bild.an .xb-tel{animation:xbAuf .8s .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes xbAuf{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* SEO */
.xb-google{width:min(100%,520px);background:var(--flaeche-1);border-radius:20px;padding:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.xb-feld{display:flex;align-items:center;gap:10px;border:1px solid #DFE1E5;border-color:light-dark(#DFE1E5,#2E343A);border-radius:99px;padding:11px 16px;color:#202124;color:light-dark(#202124,#D5DADE);font-size:.92rem}
.xb-feld i{width:13px;height:13px;border:2px solid #9AA0A6;border-radius:50%;position:relative}.xb-feld i::after{content:"";position:absolute;width:6px;height:2px;background:#9AA0A6;right:-6px;bottom:-3px;transform:rotate(45deg)}
.xb-treffer{display:grid;grid-template-columns:96px 1fr;gap:14px;margin-top:16px;padding:14px;border-radius:14px;background:#F8F9FA;background:light-dark(#F8F9FA,#0E1012)}
.xb-treffer img{width:96px;height:96px;object-fit:cover;border-radius:10px}
.xb-treffer small{color:#4D5156;color:light-dark(#4D5156,#9AA3AA);font-size:.74rem}.xb-treffer b{display:block;color:#1A0DAB;color:light-dark(#1A0DAB,#9DB3F2);font:500 1.02rem/1.3 var(--lauf);margin:3px 0}.xb-treffer p{margin:0;color:#4D5156;color:light-dark(#4D5156,#9AA3AA);font-size:.84rem}
.xb-sterne{color:#E8A317;font-size:.8rem}.xb-sterne em{font-style:normal;color:#70757A;color:light-dark(#70757A,#9AA3AA)}
.xb-platz{display:flex;gap:8px;margin-top:14px}.xb-platz span{font-size:.74rem;font-weight:600;color:#1E6B3A;color:light-dark(#1E6B3A,#9AA3AA);background:#E6F4EA;background:light-dark(#E6F4EA,#0E1012);border-radius:99px;padding:5px 11px}
.ex-bild.an .xb-treffer{animation:xbAuf .7s .2s cubic-bezier(.2,.7,.2,1) both}
/* GEO */
.xb-chat{width:min(100%,520px);display:grid;gap:14px}
.xb-frage{justify-self:end;margin:0;max-width:82%;background:rgb(var(--flaeche-1-rgb) / .92);color:#16191C;color:light-dark(#16191C,#F3F5F6);border-radius:18px 18px 4px 18px;padding:12px 16px;font-size:.92rem}
.xb-antwort{background:rgb(var(--tinte-rgb) / .82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#EEF0F2;border-radius:20px;padding:18px 20px;border:1px solid rgba(255,255,255,.12)}
.xb-ki{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#9FB4FF}.xb-ki i{width:8px;height:8px;border-radius:50%;background:#9FB4FF;box-shadow:0 0 12px #9FB4FF}
.xb-antwort p{margin:10px 0 14px;line-height:1.55;font-size:.95rem}.xb-antwort b{color:#fff}
.xb-quellen{display:flex;gap:8px}.xb-quellen span{font-size:.72rem;border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:4px 10px}
.ex-bild.an .xb-antwort{animation:xbAuf .7s .25s cubic-bezier(.2,.7,.2,1) both}
/* Werbung */
.xb-werbung{background:linear-gradient(150deg,#1A1D21,#2B3036);grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.xb-feed{grid-row:span 2;background:var(--flaeche-1);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.xb-feedkopf{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:.78rem}.xb-feedkopf i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#E8B04B,#8A5A12)}.xb-feedkopf b{color:#16191C;color:light-dark(#16191C,#F3F5F6)}.xb-feedkopf small{color:#8A9096;margin-left:auto}
.xb-feedbild{position:relative;aspect-ratio:4/5;overflow:hidden}.xb-feedbild img{width:100%;height:100%;object-fit:cover;object-position:68% 40%}
.xb-feedbild p{position:absolute;left:14px;bottom:14px;margin:0;color:#fff;font:900 1.6rem/.95 var(--titel);font-stretch:80%;text-transform:uppercase}.xb-feedbild em{font-style:normal;color:#E8B04B}
.xb-feedfuss{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;font-size:.78rem;color:#3A4248;color:light-dark(#3A4248,#D5DADE)}.xb-feedfuss b{background:#16191C;color:#fff;border-radius:8px;padding:7px 10px;font-size:.74rem;white-space:nowrap}
.xb-anzeige{background:var(--flaeche-1);border-radius:16px;padding:14px 16px;font-size:.82rem;color:#4D5156;color:light-dark(#4D5156,#9AA3AA)}.xb-anzeige small{color:#16191C;color:light-dark(#16191C,#F3F5F6);font-weight:600;font-size:.72rem}.xb-anzeige b{display:block;color:#1A0DAB;color:light-dark(#1A0DAB,#9DB3F2);font:500 1rem/1.3 var(--lauf);margin:4px 0}.xb-anzeige p{margin:0}
.xb-anzeige-ki{background:#16191C;color:#C9CED3;border:1px solid rgba(255,255,255,.12)}.xb-anzeige-ki small{color:#9FB4FF}.xb-anzeige-ki b{color:#fff}
.ex-bild.an .xb-feed{animation:xbAuf .7s cubic-bezier(.2,.7,.2,1) both}.ex-bild.an .xb-anzeige{animation:xbAuf .7s .15s cubic-bezier(.2,.7,.2,1) both}.ex-bild.an .xb-anzeige-ki{animation-delay:.3s}
/* Social */
.xb-social{background:radial-gradient(90% 80% at 50% 30%,#3A2E1C,#120F0A)}
.xb-handy{width:270px;border-radius:40px;background:var(--flaeche-1);outline:9px solid #0E0D0B;padding:16px 8px 10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.xb-profil{display:flex;align-items:center;gap:10px;padding:0 8px 12px;font-size:.8rem;color:#16191C;color:light-dark(#16191C,#F3F5F6)}.xb-profil i{width:40px;height:40px;border-radius:50%;background:#0E0D0B;outline:2px solid #E8B04B;outline-offset:2px}.xb-profil small{display:block;color:#8A9096}
.xb-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.xb-gitter>*{aspect-ratio:3/4;width:100%}.xb-gitter img{object-fit:cover}
.xb-gitter span{display:grid;place-content:center;text-align:center;background:#0E0D0B;color:#F4EFE6;font:900 .9rem/1 var(--titel);font-stretch:80%;text-transform:uppercase;padding:4px}.xb-gitter span em{font-style:normal;color:#E8B04B}.xb-gitter small{font:500 .55rem var(--lauf);text-transform:none;color:#CFC6B6}
.xb-k2{background:#E8B04B!important;color:#17130B!important;color:light-dark(#17130B,#F3F5F6)!important}.xb-k2 small{color:#3B2C10!important;color:light-dark(#3B2C10,#D5DADE)!important}.xb-k3{background:#F4EFE6!important;background:light-dark(#F4EFE6,#0E1012)!important;color:#0E0D0B!important;color:light-dark(#0E0D0B,#F3F5F6)!important;font-size:.72rem!important}
.ex-bild.an .xb-handy{animation:xbAuf .8s cubic-bezier(.2,.7,.2,1) both}
/* Film */
.xb-film{padding:0;background:#000}.xb-film>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 40%;transform:scale(1.04)}
.ex-bild.an .xb-film>img{animation:xbZoom 9s ease-out both}@keyframes xbZoom{from{transform:scale(1.12)}to{transform:scale(1.02)}}
.xb-film::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 45%),linear-gradient(90deg,rgba(0,0,0,.4),transparent 50%)}
.xb-titel{position:absolute;left:26px;bottom:62px;z-index:1;color:#fff}.xb-titel small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#E8B04B}.xb-titel b{display:block;font:900 2rem/1 var(--titel);font-stretch:80%;text-transform:uppercase;margin-top:6px}
.xb-play{position:relative;z-index:1;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.4)}.xb-play i{border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.xb-spur{position:absolute;left:26px;right:26px;bottom:24px;z-index:1;height:3px;border-radius:2px;background:rgb(var(--flaeche-1-rgb) / .25);display:flex;justify-content:space-between}.xb-spur i{position:absolute;left:0;top:0;height:100%;width:40%;background:#E8B04B;border-radius:2px}.xb-spur span{position:relative;top:9px;font-size:.68rem;color:rgba(255,255,255,.8)}
.ex-bild.an .xb-spur i{animation:xbSpur 6s linear infinite}@keyframes xbSpur{from{width:0}to{width:100%}}
/* Recruiting */
.xb-job{width:min(100%,440px);background:rgb(var(--flaeche-1-rgb) / .95);border-radius:22px;padding:22px 24px;color:#3A4248;color:light-dark(#3A4248,#D5DADE);font-size:.9rem;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.xb-job small{color:#1F6FEB;color:light-dark(#1F6FEB,#9DB3F2);font-weight:600;font-size:.74rem}.xb-job b{display:block;color:#0B1B33;color:light-dark(#0B1B33,#9DB3F2);font:700 1.25rem/1.25 var(--titel);margin:6px 0 4px}
.xb-job ul{margin:10px 0 18px;padding-left:18px;line-height:1.7}.xb-knopf{display:inline-block;background:#0B1B33;color:#fff;border-radius:99px;padding:11px 20px;font-weight:600}
.ex-bild.an .xb-job{animation:xbAuf .7s .2s cubic-bezier(.2,.7,.2,1) both}
@media(max-width:860px){.ex-buehne{min-height:420px}.xb{min-height:420px;padding:18px}.xb-werbung{grid-template-columns:1fr;grid-auto-rows:auto}.xb-anzeige{display:none}.xb-feed{width:min(100%,280px);justify-self:center}.xb-feedbild{aspect-ratio:1}.xb-handy{width:230px}.xb-tel{width:24%;left:52%}.xb-tablet{width:34%}.xb-laptop{width:80%}.xb-notiz{display:none}.xb-treffer{grid-template-columns:72px 1fr}.xb-treffer img{width:72px;height:72px}.xb-titel b{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.ex-bild.an *{animation:none!important}}
.xb-notiz{top:4%;bottom:auto;max-width:none}.xb-laptop{top:13%}
.xb-werbung{grid-template-columns:.85fr 1fr;align-content:center}.xb-feed{grid-row:span 2;align-self:center}.xb-feedbild{aspect-ratio:1/1}
.xb-play{margin-right:42%;margin-bottom:6%}
/* Handy: nichts darf breiter als der Bildschirm sein */
.kf-raster>*{min-width:0}.kf-haupt{min-width:0}
@media(max-width:700px){.kf-schritte{overflow-x:auto;scrollbar-width:none}.kf-schritte::-webkit-scrollbar{display:none}.karten .karte{min-width:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}}
.lt-notiz{font-size:.74rem!important;opacity:.6;margin-top:10px}

.lichtwahl{display:none!important}
/* ===== Paketvergleich zum Aufklappen (Vorbild crayo.ai/pricing) ===== */
.pv{margin:28px 0 8px}
.pv-knopf{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;border:1px solid var(--rand-linie);background:var(--flaeche-1);border-radius:18px;padding:18px 22px;font:600 1rem var(--lauf);color:var(--tinte);cursor:pointer;transition:background .25s,border-color .25s}
.pv-knopf:hover{border-color:#C5CCD2}
.pv-knopf i{width:28px;height:28px;border-radius:50%;background:var(--akzent-flaeche);position:relative;flex:none;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pv-knopf i::before{content:"";position:absolute;left:50%;top:44%;width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-50%) rotate(45deg)}
.pv-knopf[aria-expanded="true"] i{transform:rotate(180deg)}
.pv-knopf[aria-expanded="true"]{border-radius:18px 18px 0 0;border-bottom-color:transparent}
.pv-klappe{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1)}
.pv-klappe>.pv-innen{overflow:hidden}
.pv.pv-offen .pv-klappe{grid-template-rows:1fr}
.pv-innen{background:var(--flaeche-1);border:1px solid var(--rand-linie);border-top:0;border-radius:0 0 18px 18px}
.pv:not(.pv-offen) .pv-innen{border-color:transparent}
.pv-rolle{overflow-x:auto;padding:4px 22px 0}
.pv-tabelle{width:100%;border-collapse:collapse;min-width:620px}
.pv-tabelle thead th{position:sticky;top:0;background:var(--flaeche-1);padding:18px 10px 14px;font:700 1rem var(--titel);color:var(--tinte);text-align:center;border-bottom:1px solid var(--rand-linie)}
.pv-tabelle thead th small{display:block;font:500 .82rem var(--lauf);color:var(--grau);margin-top:4px}
.pv-tabelle thead th.pv-mitte{color:var(--akzent-text)}
.pv-gruppe th{text-align:left;padding:26px 10px 10px;font:600 .78rem var(--lauf);letter-spacing:.08em;text-transform:uppercase;color:var(--stahl)}
.pv-tabelle tbody tr:not(.pv-gruppe){border-top:1px solid #EEF0F2;border-top-color:light-dark(#EEF0F2,#2E343A)}
.pv-tabelle tbody th[scope="row"]{text-align:left;padding:14px 10px;font:500 .95rem var(--lauf);color:var(--tinte);width:40%}
.pv-tabelle tbody th small{display:block;font-size:.78rem;color:var(--grau);font-weight:400;margin-top:3px}
.pv-tabelle td{text-align:center;padding:14px 10px;width:20%}
.pv-tabelle td:nth-child(3){background:color-mix(in srgb,var(--licht) 5%,transparent)}
.pv-ja{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--akzent-flaeche);position:relative}
.pv-ja::after{content:"";position:absolute;left:50%;top:45%;width:5px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-50%) rotate(45deg)}
.pv-nein{display:inline-block;width:12px;height:2px;border-radius:2px;background:#C9CED3;background:light-dark(#C9CED3,#23282D);vertical-align:middle}
.pv-wert{font-size:.86rem;font-weight:600;color:var(--tinte)}
.pv-fuss{margin:0;padding:18px 32px 22px;font-size:.82rem;color:var(--grau);border-top:1px solid #EEF0F2;border-top-color:light-dark(#EEF0F2,#2E343A)}
.pv.pv-offen .pv-tabelle tbody tr{animation:pvZeile .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes pvZeile{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:700px){.pv-rolle{padding:0 6px}.pv-tabelle{min-width:540px}.pv-tabelle tbody th[scope="row"]{font-size:.86rem}.pv-fuss{padding:16px 18px}}
@media(prefers-reduced-motion:reduce){.pv-klappe,.pv-knopf i{transition:none}.pv.pv-offen .pv-tabelle tbody tr{animation:none}}
/* ===== Hero: Kartenwand aus echten Kundenseiten (06.10.2026) ===== */
.wand{position:relative;height:230vh;background:#F5F5F7;background:light-dark(#F5F5F7,#0E1012)}
.wand-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--p:0}
.wand-raum{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 20%;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 75%,#000 45%,transparent 85%);mask-image:radial-gradient(120% 90% at 50% 75%,#000 45%,transparent 85%)}
.wand-ebene{position:absolute;left:50%;top:58%;width:2600px;display:grid;gap:22px;transform-style:preserve-3d;
  transform:translate(-50%,-30%) rotateX(calc(54deg - 22deg * var(--p))) rotateZ(calc(-16deg + 6deg * var(--p))) scale(calc(1 + .25 * var(--p)));
  opacity:calc(1 - var(--p) * .55);will-change:transform}
.wand-reihe{overflow:visible}
.wand-spur{display:flex;gap:22px;width:max-content;animation:wandLauf 70s linear infinite}
.wand-reihe:nth-child(even) .wand-spur{animation-direction:reverse;animation-duration:85s;margin-left:-180px}
@keyframes wandLauf{to{transform:translateX(-50%)}}
.wkarte{margin:0;flex:none;width:340px;border-radius:14px;overflow:hidden;background:var(--flaeche-1);outline:1px solid rgb(var(--tinte-rgb) / .08);
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wkarte img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.wk-leiste{display:flex;gap:5px;align-items:center;padding:7px 10px;background:#FAFAFB;background:light-dark(#FAFAFB,#0E1012);border-bottom:1px solid #EEF0F2;border-bottom-color:light-dark(#EEF0F2,#2E343A)}
.wk-leiste i{width:7px;height:7px;border-radius:50%;background:#DADDE0;background:light-dark(#DADDE0,#23282D)}
.wand-text{position:relative;z-index:2;text-align:center;max-width:900px;margin:0 auto;padding:calc(var(--kopf) + 7vh) 20px 0;
  opacity:clamp(0,calc(1 - var(--p) * 2.6),1);transform:translateY(calc(var(--p) * -60px))}
.wand-text::before{content:"";position:absolute;inset:-40px -160px -80px;z-index:-1;background:radial-gradient(closest-side,#F5F5F7 55%,rgba(245,245,247,0));background:radial-gradient(closest-side,light-dark(#F5F5F7,#0E1012) 55%,rgba(245,245,247,0))}
.wand-text .g-titel{margin-inline:auto}.wand-text .g-lead{margin-inline:auto}.wand-text .g-reihe{justify-content:center}
.wand-vorn{position:absolute;z-index:3;left:50%;top:54%;width:min(1000px,86vw);margin:0;border-radius:18px;overflow:hidden;background:var(--flaeche-1);outline:1px solid rgb(var(--tinte-rgb) / .1);
  --q:clamp(0,calc((var(--p) - .42) / .4),1);
  transform:translate(-50%,-50%) perspective(1400px) rotateX(calc(38deg - 38deg * var(--q))) translateY(calc(220px - 220px * var(--q))) scale(calc(.62 + .38 * var(--q)));
  opacity:var(--q);pointer-events:none}
.wand-vorn .wk-leiste{padding:10px 14px}.wand-vorn .wk-leiste i{width:10px;height:10px}.wand-vorn .wk-leiste b{margin-left:12px;font:500 .74rem var(--lauf);color:var(--stahl)}
.wand-vorn img{display:block;width:100%}
.wand-vorn figcaption{position:absolute;left:18px;bottom:16px;display:inline-flex;align-items:center;gap:8px;background:rgb(var(--flaeche-1-rgb) / .92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:99px;padding:8px 14px;font:600 .8rem var(--lauf);color:var(--tinte)}
.wand-vorn figcaption::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--akzent-flaeche)}
@media(max-width:800px){.wand{height:200vh}.wand-ebene{width:1500px;gap:14px;top:66%}.wand-spur{gap:14px}.wkarte{width:210px;border-radius:10px}.wk-leiste{padding:5px 8px}.wand-text{padding-top:calc(var(--kopf) + 4vh)}.wand-text .g-titel{font-size:2.4rem}.wand-vorn{width:92vw;top:58%}}
@media(prefers-reduced-motion:reduce){.wand-spur{animation:none}}
.wand-raum{perspective:2600px;perspective-origin:50% 0%}
.wand-ebene{top:52%;width:3000px;gap:26px;transform:translate(-50%,-18%) rotateX(calc(46deg - 16deg * var(--p))) rotateZ(calc(-11deg + 5deg * var(--p))) scale(calc(.74 + .18 * var(--p)));opacity:calc(1 - var(--p) * .35)}
.wand-spur{gap:26px}.wkarte{width:300px}
.wand-vorn{--q:clamp(0,calc((var(--p) - .48) / .32),1)}
@media(max-width:800px){.wand-ebene{width:1700px;gap:14px;top:62%}.wand-spur{gap:14px}.wkarte{width:200px}}
.wand-raum{perspective:none}
.wand-ebene{top:50%;width:3400px;transform:translate(-50%,-50%) translateY(calc(140px - 40px * var(--p))) rotateX(calc(52deg - 14deg * var(--p))) rotateZ(calc(-34deg + 10deg * var(--p))) scale(calc(.95 + .15 * var(--p)));opacity:calc(1 - var(--p) * .5)}
.wand-ebene{gap:28px}.wand-spur{gap:28px}.wkarte{width:360px}
.wand-vorn{--q:clamp(0,calc((var(--p) - .5) / .26),1)}
@media(max-width:800px){.wand-ebene{width:2000px;gap:14px;transform:translate(-50%,-50%) translateY(calc(230px - 40px * var(--p))) rotateX(52deg) rotateZ(-34deg) scale(.9)}.wand-spur{gap:14px}.wkarte{width:220px}}
.wand-vorn{opacity:clamp(0,calc(var(--q) * 4),1)}
@media(max-width:860px){.vt-hinweis{left:16px!important;right:16px!important;transform:none!important;white-space:normal!important;text-align:center;max-width:none}.ex-flaeche{min-width:0}.ex-liste{min-width:0;max-width:100%}.ex-pille{max-width:100%}.lt-sterne{max-width:100vw}}
html,body{overflow-x:clip}
@media(max-width:860px){.ex-flaeche{grid-template-columns:1fr!important}.ex-buehne{min-height:360px}.xb{min-height:360px}.xb-geraete .xb-laptop{left:4%;top:12%;width:76%}.xb-geraete .xb-tablet{top:30%;width:32%}.xb-geraete .xb-tel{left:50%;bottom:4%;width:22%}}
/* Referenzen: aufrechte Kartenwand, kommt beim Scrollen nach vorne, nichts wird hervorgehoben */
.wand-ref{height:170vh}
.wand-ref .wand-raum{perspective:1800px;perspective-origin:50% 30%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 88%,transparent 100%)}
.wand-ref .wand-ebene{top:auto;bottom:-6vh;left:50%;width:auto;gap:24px;
  transform:translateX(-50%) rotateX(calc(34deg - 30deg * var(--p))) translateY(calc(-30px * var(--p))) scale(calc(.82 + .18 * var(--p)));transform-origin:50% 100%;opacity:1}
.wand-ref .wand-spur{gap:24px}
.wand-ref .wkarte{width:340px;border-radius:12px}
.wand-ref .wkarte img{aspect-ratio:900/563;object-fit:contain;background:var(--flaeche-1)}
.wand-ref .wand-text{padding-top:calc(var(--kopf) + 6vh);opacity:clamp(0,calc(1 - var(--p) * 2.2),1)}
.wand-ref .wand-text .brot{justify-content:center}
@media(max-width:800px){.wand-ref{height:150vh}.wand-ref .wkarte{width:210px}.wand-ref .wand-ebene,.wand-ref .wand-spur{gap:12px}.wand-ref .wand-ebene{transform:translateX(-50%) rotateX(calc(30deg - 26deg * var(--p))) scale(calc(.9 + .1 * var(--p)))}}
.wand-ref .wand-ebene{height:auto;grid-auto-rows:max-content;align-content:start}.wand-ref .wand-spur{align-items:flex-start}.wand-ref .wkarte{height:auto}
.wkarte img{height:auto!important;aspect-ratio:900/563}
.wand-ref .wand-raum{top:38vh}
.wand-ref .wand-ebene{bottom:auto;top:0;transform-origin:50% 0%;transform:translateX(-50%) rotateX(calc(30deg - 30deg * var(--p))) translateY(calc(-26vh * var(--p))) scale(calc(.84 + .16 * var(--p)))}
.wand-ref .wand-raum{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 85%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 85%,transparent 100%)}
@media(max-width:800px){.wand-ref .wand-raum{top:46vh}.wand-ref .wand-ebene{transform:translateX(-50%) rotateX(calc(26deg - 26deg * var(--p))) translateY(calc(-20vh * var(--p))) scale(calc(.9 + .1 * var(--p)))}}
.wand-ref .wand-ebene{left:-12vw;transform-origin:20% 0%;transform:rotateX(calc(30deg - 30deg * var(--p))) translateY(calc(-26vh * var(--p))) scale(calc(.84 + .16 * var(--p)))}
@media(max-width:800px){.wand-ref .wand-ebene{transform:rotateX(calc(26deg - 26deg * var(--p))) translateY(calc(-20vh * var(--p))) scale(calc(.9 + .1 * var(--p)))}}
.pr-workspace{--pr-grund:radial-gradient(120% 120% at 100% 0%,#2A2C3A 0%,#16171C 60%);--pr-akzent:#A7B4FF}
.xb-echt{margin:12px 0 0;font-size:.72rem;color:#5E676E;color:light-dark(#5E676E,#9AA3AA)}
/* ===== KI-Website-Check (06.10.2026): Maskottchen mit Brille analysiert ===== */
.kc{padding:clamp(48px,8vw,110px) 0}
.kc-tafel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);border-radius:36px;padding:clamp(22px,4.5vw,60px);color:#E9EEFF;
  background:radial-gradient(90% 120% at 100% 0%,#24418F 0%,rgba(36,65,143,0) 55%),radial-gradient(70% 90% at 0% 100%,#132A66 0%,rgba(19,42,102,0) 60%),#07112E}
.kc-gitter{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(140,170,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(140,170,255,.07) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(80% 80% at 60% 40%,#000,transparent);mask-image:radial-gradient(80% 80% at 60% 40%,#000,transparent)}
.kc-links,.kc-rechts{position:relative;min-width:0}
.kc-marke{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font:600 .74rem var(--lauf);letter-spacing:.16em;text-transform:uppercase;color:#9DB4F0}
.kc-marke i{width:8px;height:8px;border-radius:50%;background:#6E8DFF;box-shadow:0 0 0 0 rgba(110,141,255,.6);animation:kcPuls 2s infinite}
@keyframes kcPuls{70%{box-shadow:0 0 0 10px rgba(110,141,255,0)}100%{box-shadow:0 0 0 0 rgba(110,141,255,0)}}
.kc h2{font:800 clamp(2rem,4vw,3.3rem)/1.02 var(--titel);letter-spacing:-.035em;color:#fff;margin:0 0 22px}.kc h2 em{font-style:normal;color:#8EA8FF}
.kc-dialog{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:end;margin-bottom:22px}
.kc-robo{width:120px;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));animation:kcSchweben 5s ease-in-out infinite}
@keyframes kcSchweben{50%{transform:translateY(-6px)}}
.kc-blase{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(160,185,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px 20px 20px 6px;padding:16px 18px 12px}
.kc-blase p{margin:0 0 10px;font-size:.95rem;line-height:1.55;color:#E9EEFF;min-height:3.1em}
.kc-play{display:inline-flex;align-items:center;gap:8px;border:0;background:rgba(142,168,255,.16);color:#CFDAFF;border-radius:99px;padding:6px 12px 6px 8px;font:600 .78rem var(--lauf);cursor:pointer}
.kc-play i{width:22px;height:22px;border-radius:50%;background:#8EA8FF;position:relative}.kc-play i::after{content:"";position:absolute;left:8px;top:6px;border-left:8px solid #07112E;border-top:5px solid transparent;border-bottom:5px solid transparent}
.kc-play.laeuft i::after{left:7px;top:7px;width:8px;height:8px;border:0;background:#07112E;border-radius:1px}
.kc-form{display:grid;gap:10px}
.kc-feld{position:relative;display:block;background:rgba(255,255,255,.06);border:1px solid rgba(160,185,255,.22);border-radius:16px;padding:10px 16px 10px}
.kc-feld:focus-within{border-color:#8EA8FF;box-shadow:0 0 0 4px rgba(142,168,255,.15)}
.kc-feld span{display:block;font-size:.7rem;color:#9DB4F0;letter-spacing:.04em;margin-bottom:2px}
.kc-feld input{width:100%;border:0;background:none;color:#fff;font:500 1rem var(--lauf);outline:none;padding:2px 0}
.kc-feld input::placeholder{color:rgba(233,238,255,.4)}
.kc-url input{padding-left:62px}.kc-url b{position:absolute;left:16px;bottom:12px;font:500 1rem var(--lauf);color:rgba(233,238,255,.45)}
.kc-start{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:16px;padding:16px;background:linear-gradient(135deg,#3C64E0,#2B4FB0);color:#fff;font:700 1rem var(--lauf);cursor:pointer}
.kc-start i{width:9px;height:9px;border-radius:50%;background:var(--flaeche-1);box-shadow:0 0 12px #fff}
.kc-start::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);animation:kcGlanz 3.2s infinite}
@keyframes kcGlanz{60%,100%{transform:translateX(100%)}}
.kc-klein{margin:12px 0 0;font-size:.74rem;color:rgba(233,238,255,.5)}
.kc-schirm{border-radius:16px;overflow:hidden;background:#0D1A44;border:1px solid rgba(160,185,255,.2)}
.kc-leiste{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(160,185,255,.14);font-size:.74rem;color:#9DB4F0}
.kc-leiste i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}.kc-leiste span{margin-left:10px;color:#E9EEFF}.kc-leiste em{margin-left:auto;font-style:normal;font-weight:600;color:#8EA8FF}
.kc-seite{position:relative;aspect-ratio:1100/640;overflow:hidden}
.kc-seite img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s}
.kc[data-zustand="laeuft"] .kc-seite img,.kc[data-zustand="fertig"] .kc-seite img{opacity:1}
.kc-leer{position:absolute;inset:0;display:grid;place-items:center;color:rgba(233,238,255,.45);font-size:.9rem;transition:opacity .4s}
.kc[data-zustand="laeuft"] .kc-leer,.kc[data-zustand="fertig"] .kc-leer{opacity:0}
.kc-scan{position:absolute;left:0;right:0;top:0;height:90px;background:linear-gradient(180deg,rgba(110,141,255,0),rgba(110,141,255,.35));border-bottom:2px solid #8EA8FF;box-shadow:0 6px 24px rgba(110,141,255,.6);opacity:0}
.kc[data-zustand="laeuft"] .kc-scan{opacity:1;animation:kcScan 1.6s ease-in-out infinite alternate}
@keyframes kcScan{from{transform:translateY(-90px)}to{transform:translateY(calc(var(--kc-h,360px)))}}
.kc-pruef{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.kc-pruef li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.04);font-size:.86rem}
.kc-pruef li i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(160,185,255,.35);position:relative}
.kc-pruef li em{font-style:normal;font-size:.74rem;color:rgba(233,238,255,.5)}
.kc-pruef li.laeuft i{border-color:#8EA8FF;border-top-color:transparent;animation:kcDreh .8s linear infinite}
.kc-pruef li.ok i{border-color:#8EA8FF;background:#8EA8FF}.kc-pruef li.ok i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border-right:2px solid #07112E;border-bottom:2px solid #07112E;transform:rotate(45deg)}
.kc-pruef li.ok em{color:#8EA8FF}
@keyframes kcDreh{to{transform:rotate(360deg)}}
.kc-ergebnis{margin-top:14px;animation:xbAuf .7s cubic-bezier(.2,.7,.2,1) both}
.kc-ergebnis[hidden]{display:none}
.kc-beispiel{margin:0 0 8px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#9DB4F0}
.kc-funde{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.kc-funde li{padding:10px 14px 10px 30px;border-radius:12px;background:rgba(255,255,255,.05);position:relative;font-size:.86rem}
.kc-funde li::before{content:"";position:absolute;left:12px;top:15px;width:9px;height:9px;border-radius:50%}
.kc-funde li.rot::before{background:#FF6B6B}.kc-funde li.gelb::before{background:#FFC24B}.kc-funde li.gruen::before{background:#4BD18A}
.kc-funde b{display:block;color:#fff;font-weight:600}.kc-funde span{color:rgba(233,238,255,.65);font-size:.8rem}
.kc-aktionen{display:grid;gap:8px}
.kc-a{display:block;text-decoration:none;border-radius:14px;padding:12px 16px;border:1px solid rgba(160,185,255,.22);background:rgba(255,255,255,.04);color:#E9EEFF;transition:background .25s,border-color .25s}
.kc-a:hover{background:rgba(255,255,255,.08);border-color:#8EA8FF}
.kc-a b{display:block;font-weight:600}.kc-a span{font-size:.8rem;color:rgba(233,238,255,.6)}
.kc-a-haupt{background:var(--flaeche-1);color:#07112E;color:light-dark(#07112E,#9DB3F2);border-color:#fff}.kc-a-haupt span{color:#4A5574;color:light-dark(#4A5574,#9DB3F2)}.kc-a-haupt:hover{background:#EEF2FF;background:light-dark(#EEF2FF,#0E1012)}
@media(max-width:900px){.kc-tafel{grid-template-columns:1fr;border-radius:26px}.kc-dialog{grid-template-columns:86px 1fr}.kc-robo{width:86px}}
@media(max-width:480px){.kc-tafel{padding:20px 16px;border-radius:22px}.kc-blase p{font-size:.88rem}.kc-pruef li{font-size:.8rem;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.kc *{animation:none!important}}
/* GEO: Chat-App wie man sie kennt, ohne Logo und Markennamen */
.xc-app{display:grid;grid-template-columns:180px 1fr;width:min(100%,640px);height:min(100%,420px);border-radius:16px;overflow:hidden;background:#212121;color:#ECECEC;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);font-size:.84rem}
.xc-seite{background:#171717;padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.xc-seite span{padding:7px 10px;border-radius:8px;color:#C9C9C9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xc-seite span.an{background:#2A2A2A;color:#fff}
.xc-neu{border:1px solid #333;margin-bottom:8px;color:#fff!important}
.xc-seite small{padding:10px 10px 2px;color:#8A8A8A;color:light-dark(#8A8A8A,#9AA3AA);font-size:.7rem}
.xc-haupt{display:flex;flex-direction:column;min-width:0}
.xc-kopf{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:#B4B4B4}.xc-kopf b{color:#ECECEC;font-weight:600}
.xc-verlauf{flex:1;padding:6px 22px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.xc-frage{align-self:flex-end;margin:0;max-width:80%;background:#2F2F2F;border-radius:18px;padding:10px 14px}
.xc-antwort{display:grid;grid-template-columns:26px 1fr;gap:10px}.xc-av{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9AA3B5);background:radial-gradient(circle at 35% 35%,light-dark(#fff,#1A1E22),#9AA3B5);display:block}
.xc-antwort p{margin:0 0 10px;line-height:1.6}.xc-antwort b{color:#fff}
.xc-quellen{display:flex;gap:6px;flex-wrap:wrap}.xc-quellen span{font-size:.7rem;background:#2F2F2F;border-radius:99px;padding:4px 10px;color:#C9C9C9}
.xc-eingabe{margin:10px 18px 16px;display:flex;justify-content:space-between;align-items:center;background:#2F2F2F;border-radius:26px;padding:12px 12px 12px 18px;color:#9A9A9A}
.xc-eingabe i{width:28px;height:28px;border-radius:50%;background:#ECECEC;background:light-dark(#ECECEC,#23282D);position:relative}.xc-eingabe i::after{content:"";position:absolute;left:9px;top:8px;width:9px;height:9px;border-left:2px solid #212121;border-top:2px solid #212121;transform:rotate(45deg);top:11px}
.ex-bild.an .xc-antwort{animation:xbAuf .7s .3s cubic-bezier(.2,.7,.2,1) both}
@media(max-width:860px){.xc-app{grid-template-columns:1fr;height:auto}.xc-seite{display:none}.xc-verlauf{padding:6px 14px}}
.kc-skelett{position:absolute;inset:0;padding:18px;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto 1fr;gap:12px;opacity:0;transition:opacity .5s;background:#0F1E4C}
.kc-skelett i{grid-column:1/-1;height:10px;border-radius:5px;background:rgba(160,185,255,.18)}.kc-skelett i:nth-child(2){width:60%;height:26px}.kc-skelett i:nth-child(3){width:40%}
.kc-skelett b{border-radius:12px;background:rgba(160,185,255,.1)}
.kc[data-zustand="laeuft"]:not(.kc-hat-bild) .kc-skelett,.kc[data-zustand="fertig"]:not(.kc-hat-bild) .kc-skelett{opacity:1}
.kc:not(.kc-hat-bild) .kc-seite img{opacity:0!important}
@media(max-width:760px){.lt-raum{bottom:auto;top:max(40svh,calc(var(--kopf) + 220px))}.lt{--w:80vw;transform:translateY(calc(var(--zoom,0) * -6vh)) scale(calc(1 + var(--zoom,0) * .1 - var(--fan,0) * .18))}.lt-fan{transform:translateX(calc(var(--k) * var(--fan,0) * 26%)) translateZ(calc(-1 * var(--fan,0) * 100px)) rotateY(calc(var(--k) * var(--fan,0) * -12deg))}}
/* ===== Explorer neu: AnimaContent erklärt seine Leistungen (06.10.2026) ===== */
.ex-neu{grid-template-columns:220px minmax(0,1fr)!important;align-items:start;padding:clamp(14px,2vw,26px)!important}
.ex-neu .ex-liste{gap:6px;position:sticky;top:calc(var(--kopf) + 20px)}
.ex-neu .ex-pille{width:100%;justify-content:flex-start;padding:12px 16px;font-size:.95rem}
.ex-neu .ex-buehne{display:grid;min-height:0;height:auto}
.ex-neu .ex-bild{position:relative;inset:auto;grid-area:1/1;display:grid;grid-template-rows:auto auto;gap:14px;place-items:stretch;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
.ex-neu .ex-bild.an{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s}
.ex-neu .xb{min-height:440px;height:440px;border-radius:22px}
.ex-neu .xb-geraete{background:radial-gradient(90% 120% at 80% 0%,#3D63D6 0%,#1E3A8A 45%,#0B1A44 100%)}
.ex-neu .xb-geraete .mk-leiste{background:#F4F6FA;background:light-dark(#F4F6FA,#0E1012)}
.ex-info{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:6px 28px;align-items:start;background:var(--flaeche-1);border-radius:22px;padding:22px 26px;outline:1px solid #E4E7EA}
.ex-info small{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;font:600 .74rem var(--lauf);color:var(--akzent-text)}
.ex-info small::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ex-info h3{grid-column:1;margin:4px 0 6px;font:800 clamp(1.4rem,2.2vw,1.9rem)/1.1 var(--titel);letter-spacing:-.025em;color:var(--tinte)}
.ex-info p{grid-column:1;margin:0;color:#3A4248;color:light-dark(#3A4248,#D5DADE);line-height:1.6;font-size:.98rem}
.ex-info ul{grid-column:2;grid-row:2/4;list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.ex-info li{position:relative;padding:10px 12px 10px 36px;border-radius:12px;background:#F5F7FA;background:light-dark(#F5F7FA,#0E1012);font-size:.88rem;color:var(--tinte)}
.ex-info li::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--akzent-flaeche)}
.ex-info li::after{content:"";position:absolute;left:17.5px;top:50%;width:4px;height:7px;margin-top:-5px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.ex-info a{grid-column:1;justify-self:start;margin-top:12px;font-weight:600;color:var(--akzent-text);text-decoration:none}
@media(max-width:900px){
  .ex-neu{grid-template-columns:1fr!important}
  .ex-neu .ex-liste{position:static;display:flex!important;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none;margin:0 -4px}
  .ex-neu .ex-liste::-webkit-scrollbar{display:none}
  .ex-neu .ex-liste li{flex:none}.ex-neu .ex-pille{width:auto;white-space:nowrap;padding:10px 14px;font-size:.88rem}
  .ex-neu .xb{min-height:300px;height:300px}
  .ex-info{grid-template-columns:1fr;padding:18px}
  .ex-info ul{grid-column:1;grid-row:auto}
}
@media(max-width:480px){.ex-neu .xb{min-height:250px;height:250px;padding:10px}.xb-google,.xb-job{font-size:.8rem}.xc-app{font-size:.74rem}}
.ex-neu .xb-werbung .xb-feed{width:min(100%,250px);justify-self:center}.ex-neu .xb-feedbild{aspect-ratio:1/1}
.xb-hinweis{display:block;margin-top:10px;font-style:normal;font-size:.74rem;color:#5E676E;color:light-dark(#5E676E,#9AA3AA)}

/* ===== KI-Check hell, clean, technisch (06.10.2026, ersetzt den dunklen Look) ===== */
.kc-tafel{color:var(--tinte);background:
  radial-gradient(60% 80% at 100% 0%,rgba(61,99,214,.16) 0%,rgba(61,99,214,0) 60%),
  radial-gradient(50% 70% at 0% 100%,rgba(110,141,255,.12) 0%,rgba(110,141,255,0) 60%),
  linear-gradient(180deg,#FFFFFF 0%,#F4F7FD 100%);background:
  radial-gradient(60% 80% at 100% 0%,rgba(61,99,214,.16) 0%,rgba(61,99,214,0) 60%),
  radial-gradient(50% 70% at 0% 100%,rgba(110,141,255,.12) 0%,rgba(110,141,255,0) 60%),
  linear-gradient(180deg,light-dark(#FFFFFF,#1A1E22) 0%,light-dark(#F4F7FD,#0E1012) 100%);outline:1px solid #E1E7F2}
.kc-gitter{opacity:1;background-image:linear-gradient(rgba(43,79,176,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(43,79,176,.06) 1px,transparent 1px);background-size:32px 32px}
.kc-marke{color:var(--akzent-text)}.kc-marke i{background:var(--akzent-flaeche)}
.kc h2{color:var(--tinte)}.kc h2 em{color:var(--akzent-text)}
.kc-robo{filter:drop-shadow(0 16px 24px rgba(30,58,138,.25))}
.kc-blase{background:var(--flaeche-1);border:1px solid #E1E7F2;border-color:light-dark(#E1E7F2,#33405F);box-shadow:0 10px 30px -18px rgba(30,58,138,.35);backdrop-filter:none}
.kc-blase p{color:var(--tinte)}
.kc-play{background:#EEF2FD;background:light-dark(#EEF2FD,#0E1012);color:var(--akzent-text)}.kc-play i{background:var(--akzent-flaeche)}.kc-play i::after{border-left-color:#fff}.kc-play.laeuft i::after{background:var(--flaeche-1)}
.kc-feld{background:var(--flaeche-1);border:1px solid #DCE3F0;border-color:light-dark(#DCE3F0,#33405F)}.kc-feld:focus-within{border-color:var(--licht);box-shadow:0 0 0 4px rgba(43,79,176,.12)}
.kc-feld span{color:#6A7488;color:light-dark(#6A7488,#9AA3AA)}.kc-feld input{color:var(--tinte)}.kc-feld input::placeholder{color:#A5ADBD}.kc-url b{color:#6F7580;color:light-dark(#6F7580,#9AA3AA)}
.kc-start{background:linear-gradient(135deg,#3C64E0,#1E3A8A);box-shadow:0 12px 28px -14px rgba(30,58,138,.7)}
.kc-klein{color:#7B848B;color:light-dark(#7B848B,#9AA3AA)}
.kc-schirm{background:var(--flaeche-1);border:1px solid #DCE3F0;border-color:light-dark(#DCE3F0,#33405F);box-shadow:0 30px 60px -36px rgba(30,58,138,.45)}
.kc-leiste{background:#F6F8FC;background:light-dark(#F6F8FC,#0E1012);border-bottom:1px solid #E6EBF4;border-bottom-color:light-dark(#E6EBF4,#33405F);color:#6A7488;color:light-dark(#6A7488,#9AA3AA)}.kc-leiste i{background:#D6DCE8;background:light-dark(#D6DCE8,#23282D)}.kc-leiste span{color:var(--tinte)}.kc-leiste em{color:var(--akzent-text)}
.kc-leer{color:#6F7582;color:light-dark(#6F7582,#9AA3AA)}
.kc-scan{background:linear-gradient(180deg,rgba(43,79,176,0),rgba(43,79,176,.18));border-bottom-color:var(--licht);box-shadow:0 6px 20px rgba(43,79,176,.35)}
.kc-skelett{background:#F6F8FC;background:light-dark(#F6F8FC,#0E1012)}.kc-skelett i{background:#E3E8F2;background:light-dark(#E3E8F2,#23282D)}.kc-skelett b{background:#EDF1F8;background:light-dark(#EDF1F8,#0E1012)}
.kc-pruef li{background:var(--flaeche-1);border:1px solid #E6EBF4;border-color:light-dark(#E6EBF4,#33405F);color:var(--tinte)}
.kc-pruef li i{border-color:#C9D2E4;border-color:light-dark(#C9D2E4,#33405F)}.kc-pruef li em{color:#6F7582;color:light-dark(#6F7582,#9AA3AA)}
.kc-pruef li.laeuft i{border-color:var(--licht);border-top-color:transparent}
.kc-pruef li.ok i{border-color:var(--licht);background:var(--akzent-flaeche)}.kc-pruef li.ok i::after{border-color:#fff}.kc-pruef li.ok em{color:var(--akzent-text)}
.kc-beispiel{color:var(--akzent-text)}
.kc-funde li{background:var(--flaeche-1);border:1px solid #E6EBF4;border-color:light-dark(#E6EBF4,#33405F)}.kc-funde b{color:var(--tinte)}.kc-funde span{color:#5E676E;color:light-dark(#5E676E,#9AA3AA)}
.kc-a{background:var(--flaeche-1);border:1px solid #DCE3F0;border-color:light-dark(#DCE3F0,#33405F);color:var(--tinte)}.kc-a:hover{background:#F4F7FD;background:light-dark(#F4F7FD,#0E1012);border-color:var(--licht)}.kc-a span{color:#6A7488;color:light-dark(#6A7488,#9AA3AA)}
.kc-a-haupt{background:var(--akzent-flaeche);border-color:var(--licht);color:var(--auf-akzent)}.kc-a-haupt span{color:rgba(255,255,255,.8)}.kc-a-haupt:hover{background:#1E3A8A}
.ex-neu .ex-bild.an{pointer-events:auto}.ex-neu .ex-bild:not(.an){pointer-events:none}
p.punkt,li.punkt,div.punkt{display:block;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;margin:0 0 6px}
.s-held-raster>*{min-width:0}h1,h2,.s-titel{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
/* Mitarbeiter-Zugang und vollständiger Bericht */
.kc-team{margin-top:14px;border-top:1px dashed #DCE3F0;border-top-color:light-dark(#DCE3F0,#33405F);padding-top:10px;font-size:.82rem}
.kc-team summary{cursor:pointer;color:#6A7488;color:light-dark(#6A7488,#9AA3AA);list-style:none}.kc-team summary::-webkit-details-marker{display:none}
.kc-team summary::before{content:"🔒";margin-right:6px;filter:grayscale(1);opacity:.6}
.kc-team-form{display:flex;gap:8px;margin-top:10px}
.kc-team-form input{flex:1;min-width:0;border:1px solid #DCE3F0;border-color:light-dark(#DCE3F0,#33405F);border-radius:10px;padding:10px 12px;font:500 .9rem var(--lauf)}
.kc-team-form button{border:0;border-radius:10px;padding:10px 14px;background:var(--graphit);color:#fff;font:600 .85rem var(--lauf);cursor:pointer}
.kc-team-meldung{margin:8px 0 0;color:var(--akzent-text);font-weight:600;min-height:1em}
.kc-voll{margin-top:16px;background:var(--flaeche-1);border:1px solid #DCE3F0;border-color:light-dark(#DCE3F0,#33405F);border-radius:18px;padding:18px 20px}
.kc-voll[hidden]{display:none}
.kc-voll-kopf{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:8px}
.kc-voll-kopf small{display:block;font-size:.7rem;color:var(--akzent-text);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.kc-voll-kopf b{display:block;font:800 1.25rem var(--titel);color:var(--tinte)}.kc-voll-kopf span{font-size:.78rem;color:#6A7488;color:light-dark(#6A7488,#9AA3AA)}
.kc-pdf{flex:none;border:0;border-radius:10px;padding:10px 14px;background:var(--akzent-flaeche);color:var(--auf-akzent);font:600 .85rem var(--lauf);cursor:pointer}
.kc-voll-liste{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.kc-voll-liste>li{border:1px solid #E6EBF4;border-color:light-dark(#E6EBF4,#33405F);border-radius:14px;padding:12px 14px 12px 32px;position:relative;color:var(--tinte)}
.kc-voll-liste>li::before{content:"";position:absolute;left:13px;top:18px;width:9px;height:9px;border-radius:50%}
.kc-voll-liste>li.rot::before{background:#FF6B6B}.kc-voll-liste>li.gelb::before{background:#FFC24B}.kc-voll-liste>li.gruen::before{background:#4BD18A}
.kc-voll-liste dl{display:grid;grid-template-columns:90px 1fr;gap:4px 12px;margin:8px 0 0;font-size:.84rem}
.kc-voll-liste dt{color:#6A7488;color:light-dark(#6A7488,#9AA3AA);font-weight:600}.kc-voll-liste dd{margin:0;color:#3A4248;color:light-dark(#3A4248,#D5DADE);line-height:1.5}
@media(max-width:480px){.kc-voll-liste dl{grid-template-columns:1fr}.kc-voll-kopf{flex-direction:column}}
/* PDF: nur der Bericht wird gedruckt */
/* 22.10.2026: eine eigene helle Kopie des Berichts, alles andere fällt aus dem Druck (vorher 26 leere Seiten quer) */
.kc-druckblatt{display:none}
.kc-aktionen[hidden],.kc-funde[hidden]{display:none}
@media print{
  @page{size:A4 portrait;margin:14mm 14mm 16mm}
  html.kc-druck,html.kc-druck body{background:#fff!important}
  html.kc-druck body>*:not(.kc-druckblatt){display:none!important}
  html.kc-druck .kc-druckblatt{display:block;color:#16191C;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .kc-druckblatt .kc-druck-marke{margin:0 0 10px;font:600 9pt var(--text,Inter,Arial);color:#6A7488;letter-spacing:.04em;text-transform:uppercase}
  .kc-druckblatt .kc-voll{margin:0;border:0;padding:0;background:#fff}
  .kc-druckblatt .kc-voll-liste>li{break-inside:avoid}
}
.kc-team summary::before{content:none}
.vt-ende-text{max-width:56ch;margin:16px auto 0;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.55;color:var(--grau);text-align:center}
[hidden]{display:none!important}
.kf-info{background:#EEF2FD;background:light-dark(#EEF2FD,#0E1012);border-radius:14px;padding:12px 16px;font-size:.88rem;color:#2A3350;color:light-dark(#2A3350,#9DB3F2);margin:0 0 14px}.kf-info b{color:var(--akzent-text)}

/* ---------- Teil 3: Was alles an deiner Website hängt (07.10.2026) ---------- */
.vb{background:var(--grund)}
.vb-intro{max-width:760px}
.vb-intro h2 em{font-style:normal;color:var(--akzent-text)}
.vb-schalter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:34px 0 18px}
.vb-schalter button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:150px;padding:12px 20px;border-radius:16px;border:1px solid var(--rand-linie);background:var(--flaeche-1);color:var(--tinte);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.vb-schalter button b{font:700 1rem var(--titel)}
.vb-schalter button small{font-size:.8rem;color:var(--grau)}
.vb-schalter button[aria-checked="true"]{background:var(--graphit);border-color:var(--graphit);color:#fff}
.vb-schalter button[aria-checked="true"] small{color:#C9D3EA}
.vb-zaehler{margin-left:auto;font-size:.92rem;color:var(--grau)}
.vb-zaehler b{color:var(--akzent-text);font-size:1.1rem}
.vb-weg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:12px;position:relative}
.vb-weg::before{content:"";position:absolute;left:10px;right:10px;top:7px;height:2px;background:linear-gradient(90deg,var(--licht),rgba(43,79,176,.15))}
.vb-weg span{position:relative;padding-top:22px;font-size:.8rem;line-height:1.4;color:var(--grau)}
.vb-weg span::before{content:"";position:absolute;left:0;top:1px;width:14px;height:14px;border-radius:50%;background:var(--flaeche-1);border:3px solid var(--licht)}
.vb-gitter{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.vb-stufe{background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:22px;padding:20px 16px 12px;display:flex;flex-direction:column}
.vb-kopf small{font:700 .72rem var(--titel);letter-spacing:.14em;color:var(--akzent-text)}
.vb-kopf h3{font:700 1.12rem/1.2 var(--titel);margin:6px 0 4px;color:var(--tinte)}
.vb-kopf p{font-size:.85rem;color:var(--grau);margin:0 0 12px;line-height:1.45}
.vb-stufe ul{list-style:none;margin:0;padding:0}
.vb-stufe li{border-top:1px solid var(--rand-linie);padding:0;margin:0}
.vb-stufe li::before{display:none}
.vb-punkt{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:14px 1fr;column-gap:10px;align-items:start;padding:10px 2px;cursor:pointer}
.vb-punkt i{width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--akzent-flaeche);box-shadow:0 0 0 4px rgba(43,79,176,.14);transition:background .3s,box-shadow .3s}
.vb-punkt span{font-size:.9rem;font-weight:600;line-height:1.35;color:var(--tinte);hyphens:auto;-webkit-hyphens:auto}
.vb-punkt em{grid-column:2;font-style:normal;font-size:.72rem;color:var(--stahl);margin-top:2px}
.vb-punkt:focus-visible{outline:2px solid var(--licht);outline-offset:2px;border-radius:8px}
.vb-stufe li p{display:none;margin:0 0 10px 24px;font-size:.84rem;line-height:1.5;color:var(--grau)}
.vb-stufe li.offen p{display:block}
.vb-stufe li.aus .vb-punkt span{color:var(--stahl)}
.vb-stufe li.aus .vb-punkt i{background:var(--silber);box-shadow:none}
.vb-stufe li[data-ab="+"] .vb-punkt i{background:var(--flaeche-1);border:2px solid var(--licht);width:6px;height:6px;box-shadow:none}
.vb-technik{margin-top:12px;display:flex;align-items:center;gap:24px;background:var(--graphit);color:#fff;border-radius:22px;padding:18px 24px}
.vb-technik small{display:block;font:700 .72rem var(--titel);letter-spacing:.14em;text-transform:uppercase;color:#9DB4F0}
.vb-technik b{font:700 1rem var(--titel);white-space:nowrap}
.vb-technik ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.vb-technik li{margin:0;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.08);font-size:.82rem}
.vb-technik li::before{display:none}
.vb-hinweis{margin:16px 0 0;font-size:.82rem;color:var(--grau);max-width:90ch}
@media(max-width:1100px){
  .vb-gitter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vb-weg{display:none}
  .vb-technik{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  .vb-gitter{grid-template-columns:1fr}
  .vb-schalter button{min-width:0;flex:1 1 0;padding:10px 12px}
  .vb-zaehler{width:100%;margin:6px 0 0}
  .vb-technik b{white-space:normal}
}
.s-knoten small{max-width:26ch;line-height:1.35}

/* ---------- Explorer: ruhige Erklärgrafik mit Roboter (07.10.2026) ---------- */
.xe{position:relative;width:100%;height:100%;min-height:540px;border-radius:24px;overflow:hidden;padding:30px 30px 26px;display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 85% 0%,rgba(43,79,176,.10),transparent 60%),linear-gradient(180deg,#fff,#F3F5F8);background:radial-gradient(120% 90% at 85% 0%,rgba(43,79,176,.10),transparent 60%),linear-gradient(180deg,light-dark(#fff,#1A1E22),light-dark(#F3F5F8,#0E1012));border:1px solid var(--rand-linie)}
.xe-titel{margin:0;font:700 .74rem var(--titel);letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-text)}
.xe-weg{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative;counter-reset:none}
.xe-weg::before{content:"";position:absolute;left:12%;right:12%;top:86px;height:2px;background:repeating-linear-gradient(90deg,var(--silber) 0 6px,transparent 6px 12px)}
.xe-schritt{position:relative;margin:0;padding:0;text-align:center;opacity:.45;transition:opacity .5s}
.xe-schritt::before{display:none}
.xe-schritt small{display:inline-grid;place-items:center;width:26px;height:26px;margin-top:14px;border-radius:50%;background:var(--flaeche-1);border:1px solid var(--silber);font:700 .78rem var(--titel);color:var(--grau);transition:background .4s,color .4s,border-color .4s}
.xe-schritt b{display:block;margin-top:8px;font:700 1rem var(--titel);color:var(--tinte)}
.xe-schritt p{margin:6px auto 0;max-width:24ch;font-size:.84rem;line-height:1.45;color:var(--grau)}
.xe-zeichnung{position:relative;z-index:1;height:172px;display:grid;place-items:center;align-content:center;gap:8px;transition:transform .5s}
.xe-schritt.an{opacity:1}
.xe-schritt.an small{background:var(--akzent-flaeche);border-color:var(--licht);color:var(--auf-akzent)}
.xe-schritt.an .xe-zeichnung{transform:translateY(-4px)}
.xe-robo{margin-top:auto;display:flex;align-items:flex-end;gap:14px;padding-top:12px}
.xe-robo img{width:92px;height:auto;filter:drop-shadow(0 16px 20px rgba(22,25,28,.18))}
.xe-robo p{margin:0 0 18px;position:relative;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:16px 16px 16px 4px;padding:12px 16px;font:600 .98rem var(--titel);color:var(--tinte);box-shadow:0 14px 30px -22px rgb(var(--schatten-rgb) / .4)}
/* Mini-Zeichnungen */
.mz{background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:12px;box-shadow:0 14px 26px -20px rgb(var(--schatten-rgb) / .35);padding:10px 12px;width:150px;display:flex;flex-direction:column;gap:6px;text-align:left}
.mz .l{display:block;height:6px;border-radius:4px;background:#E3E7EC;background:light-dark(#E3E7EC,#23282D)}
.mz .l.dick{height:10px;background:#C9D2DE;background:light-dark(#C9D2DE,#23282D)}.mz .l.b{background:#B9C8EC}
.mz .w5{width:50%}.mz .w6{width:60%}.mz .w7{width:70%}.mz .w8{width:85%}
.mz small{font-size:.62rem;color:var(--stahl);font-weight:600}
.mz-klein{width:130px;padding:8px 10px}
.mz-du{border-color:var(--licht);box-shadow:0 0 0 3px rgba(43,79,176,.12)}
.mz-leiste{display:block;height:8px;border-radius:4px;background:var(--flaeche-2);margin-bottom:2px}
.mz-knopf{align-self:flex-start;margin-top:2px;padding:4px 10px;border-radius:99px;background:var(--akzent-flaeche);color:var(--auf-akzent);font-size:.62rem;font-weight:700}
.mz-feld{display:block;height:14px;border-radius:6px;border:1px solid var(--silber);background:var(--flaeche-1)}
.mz-form{position:relative}
.mz-ok{position:absolute;right:-10px;top:-10px;width:24px;height:24px;border-radius:50%;background:var(--akzent-flaeche);color:var(--auf-akzent);font-style:normal;font-size:.75rem;display:grid;place-items:center}
.mz-suche{flex-direction:row;align-items:center;border-radius:99px;padding:8px 12px;width:160px}
.mz-lupe{width:10px;height:10px;border-radius:50%;border:2px solid var(--licht);flex:none}
.mz-stapel{background:none;border:0;box-shadow:none;padding:0;position:relative;height:120px;width:170px;display:block}
.mz-stapel .mz{position:absolute;width:120px}
.mz-stapel .mz:nth-child(1){left:0;top:20px;transform:rotate(-5deg)}.mz-stapel .mz:nth-child(2){left:24px;top:6px}.mz-stapel .mz:nth-child(3){left:48px;top:24px;transform:rotate(5deg)}
.mz-liste p{margin:0;display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--flaeche-2)}
.mz-liste p:last-child{border:0}
.mz-neu{font-size:.58rem;font-weight:700;color:var(--auf-akzent);background:var(--akzent-flaeche);border-radius:99px;padding:2px 6px}
.mz-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#B9C8EC,var(--licht));align-self:center}
.mz-app{flex-direction:row;width:170px;height:110px;padding:8px}
.mz-seitenleiste{width:22px;border-radius:6px;background:var(--graphit);flex:none}
.mz-app div{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mz-kachel{border-radius:6px;background:var(--flaeche-2)}.mz-kachel.an{background:var(--akzent-flaeche)}
.mz-geraete{background:none;border:0;box-shadow:none;flex-direction:row;align-items:flex-end;gap:8px;width:auto}
.mz-geraete span{display:block;border:3px solid var(--graphit);border-radius:6px;background:linear-gradient(180deg,#fff 30%,#DCE4F5);background:linear-gradient(180deg,light-dark(#fff,#1A1E22) 30%,light-dark(#DCE4F5,#23282D))}
.g-laptop{width:96px;height:62px}.g-tablet{width:48px;height:62px}.g-handy{width:26px;height:48px;border-radius:7px!important}
.mz-code{background:var(--graphit);border-color:var(--graphit)}
.mz-code .l{background:#3A4148}.mz-code .l.b{background:#6E8FE0}
.mz-code em{font-style:normal;font-size:.62rem;color:#9DB4F0;font-weight:700}
.mz-skript small{color:#9DB4F0}
.mz-frage{margin:0;font-size:.66rem;font-weight:700;color:var(--akzent-text)}
.mz-chat{width:170px;background:var(--grund)}
.mz-chat p{margin:0;font-size:.7rem;line-height:1.35;padding:8px 10px;border-radius:12px}
.mz-chat .du{align-self:flex-end;background:var(--graphit);color:#fff;border-bottom-right-radius:4px}
.mz-chat .ki{background:var(--flaeche-1);border:1px solid var(--rand-linie);color:var(--text)}
.mz-chat .ki b{color:var(--akzent-text)}
.mz-scan{position:relative;overflow:hidden}
.mz-strahl{position:absolute;left:0;right:0;height:22px;top:0;background:linear-gradient(180deg,transparent,rgba(43,79,176,.22),transparent);animation:mzScan 2.4s ease-in-out infinite}
@keyframes mzScan{0%,100%{top:-10px}50%{top:70%}}
.mz-kanaele{flex-direction:column;gap:6px;width:130px}
.mz-kanaele span{font-size:.7rem;font-weight:700;padding:6px 10px;border-radius:8px;background:var(--grund);color:var(--tinte)}
.mz-kurve{flex-direction:row;align-items:flex-end;gap:6px;height:110px;position:relative;padding-bottom:22px}
.mz-kurve i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--licht),#9DB4F0)}
.mz-kurve small{position:absolute;left:12px;bottom:6px}
.mz-beitrag{padding:8px;width:130px}
.mz-bild{display:block;height:80px;border-radius:8px;background:linear-gradient(135deg,#DCE4F5,var(--licht));background:linear-gradient(135deg,light-dark(#DCE4F5,#23282D),var(--licht))}
.mz-profil{align-items:center;width:140px}
.mz-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:100%}
.mz-raster i{aspect-ratio:3/4;border-radius:3px;background:#DCE4F5;background:light-dark(#DCE4F5,#23282D)}.mz-raster i:nth-child(2n){background:#B9C8EC}
.mz-welle{flex-direction:row;align-items:center;gap:4px;height:90px}
.mz-welle i{flex:1;height:var(--h);border-radius:3px;background:var(--akzent-flaeche);opacity:.75}
.mz-film{background:var(--graphit);border-color:var(--graphit);height:100px;width:170px;justify-content:flex-end;position:relative}
.mz-play{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:var(--flaeche-1)}
.mz-play::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid var(--licht);border-top:7px solid transparent;border-bottom:7px solid transparent}
.mz-spur{display:block;height:4px;border-radius:2px;background:#3A4148}.mz-spur i{display:block;width:40%;height:100%;border-radius:2px;background:#9DB4F0}
.mz-film small{color:#9DB4F0}
@media(max-width:860px){
  .xe{min-height:0;padding:22px 18px}
  .xe-weg{grid-template-columns:1fr;gap:10px;margin-top:14px}
  .xe-weg::before{display:none}
  .xe-schritt{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto auto;column-gap:14px;text-align:left;opacity:1;align-items:start}
  .xe-zeichnung{grid-row:1/4;height:auto;transform:scale(.72);transform-origin:left top;width:150px;margin-bottom:-36px}
  .xe-schritt.an .xe-zeichnung{transform:scale(.72)}
  .xe-schritt small{margin-top:0}
  .xe-schritt p{margin:4px 0 0;max-width:none}
  .xe-robo img{width:64px}.xe-robo p{font-size:.9rem;margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){.mz-strahl{animation:none}.xe-schritt{opacity:1}}
.xe .mz small{all:unset;display:block;font-size:.62rem;font-weight:600;color:var(--stahl);font-family:var(--text-font,inherit)}
.xe .mz-film small,.xe .mz-skript small{color:#9DB4F0}
.mz-chat b{display:inline}
.xe-schritt{opacity:.62}

/* Zurück-Knopf nach einem Sprung innerhalb der Seite */
.zurueck-knopf{position:fixed;left:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:10px;padding:12px 20px 12px 14px;border-radius:99px;border:1px solid var(--rand-linie);background:rgb(var(--flaeche-1-rgb) / .94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--tinte);font:600 .95rem var(--titel);box-shadow:0 18px 40px -20px rgb(var(--schatten-rgb) / .45);cursor:pointer;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
.zurueck-knopf.da{opacity:1;transform:none}
.zurueck-knopf i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--akzent-flaeche);color:var(--auf-akzent);font-style:normal}
.zurueck-knopf:focus-visible{outline:2px solid var(--licht);outline-offset:3px}
@media(max-width:640px){.zurueck-knopf{left:12px;bottom:14px;padding:10px 16px 10px 10px;font-size:.88rem}}
.vb-auf,.vb-zu{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:13px 22px;border-radius:99px;border:1px solid var(--graphit);background:var(--graphit);color:#fff;font:600 .95rem var(--titel);cursor:pointer}
.vb-auf i,.vb-zu i{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .3s}
.vb-auf[aria-expanded="true"]{background:var(--flaeche-1);color:var(--tinte)}
.vb-auf[aria-expanded="true"] i,.vb-zu i{transform:rotate(-135deg) translate(-2px,-1px)}
.vb-zu{background:var(--flaeche-1);color:var(--tinte);border-color:var(--rand-linie)}
.vb-auf:focus-visible,.vb-zu:focus-visible{outline:2px solid var(--licht);outline-offset:3px}

/* Konfigurator: Werbung je Plattform, Recruiting-Pakete (07.10.2026) */
.kf-werbung{display:grid;gap:10px;margin:10px 0}
.kf-wz{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;background:var(--flaeche-1);border-radius:18px;padding:14px 18px}
.kf-wz-haupt{display:flex;align-items:center;gap:12px;cursor:pointer;flex:1 1 220px}
.kf-wz-haupt input,.kf-wz-konto input{width:20px;height:20px;accent-color:var(--graphit);flex:none}
.kf-wz-haupt b{font:700 1rem var(--titel)}
.kf-wz-haupt em{font-style:normal;font-size:.85rem;color:var(--grau);margin-left:auto}
.kf-wz-konto{display:flex;align-items:center;gap:8px;font-size:.86rem;color:#3A4248;color:light-dark(#3A4248,#D5DADE);cursor:pointer;padding:6px 12px;border-radius:99px;background:var(--grund)}
.kf-wz-konto input{width:16px;height:16px}
.kf-drei-spalten{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.kf-drei-spalten{grid-template-columns:1fr}.kf-wz-haupt em{margin-left:0}}

/* Schichten-Bühne: lesbare Schilder statt schräger Schrift auf den Ebenen (07.10.2026) */
.bn-stage{position:relative}
.bn-ecke{position:absolute;width:1px;height:1px;pointer-events:none}
.bn-schilder{position:absolute;inset:0;pointer-events:none;z-index:5}
.bn-schild{position:absolute;transform:translate(-50%,10px);white-space:nowrap;padding:6px 12px 6px 22px;border-radius:99px;background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 10px 24px -14px rgb(var(--schatten-rgb) / .45);font:700 .8rem var(--titel);color:var(--tinte);opacity:clamp(0,calc((var(--p,0) - .18) * 4),1);transition:background .3s,color .3s,border-color .3s}
.bn-schild::before{content:"";position:absolute;left:50%;top:-10px;width:1px;height:10px;background:var(--stahl-deko)}
.bn-schild::after{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--silber)}
.bn-schild.jetzt{background:var(--graphit);color:#fff;border-color:var(--graphit)}
.bn-schild.jetzt::after{background:var(--akzent-flaeche);box-shadow:0 0 8px var(--licht)}
@media(max-width:640px){.bn-schild{font-size:.7rem;padding:4px 9px 4px 18px}.bn-schild::after{left:7px;width:6px;height:6px;margin-top:-3px}}
@media(max-width:860px){
  .bn-art-schichten .bn-stage{height:58vh;padding-top:12vh;align-items:start}
  .bn-art-schichten .bn-iso{width:min(62vw,290px)}
  .bn-art-schichten .bn-lage{transform:translateZ(calc(var(--i) * var(--p,0) * 40px))}
}
.karten-mehr{margin:18px 0 0}.karten-mehr a{font-weight:600;color:var(--akzent-text)}

/* Abschluss-Tafel: Programmcode statt Linien im Hintergrund (07.10.2026) */
.sr-linien{background:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:28px 34px;overflow:hidden;
  mask-image:linear-gradient(100deg,rgba(0,0,0,.15) 0%,#000 55%);-webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.15) 0%,#000 55%)}
.sr-code{margin:0;font:500 12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(190,208,255,.16);white-space:pre;overflow:hidden}
.sr-code-1{margin-top:60px}.sr-code-2{margin-top:-20px}
.sr-preiszeile{margin:10px 0 22px;color:#fff;font-size:.98rem}
.sr-preiszeile b{color:#9DB4F0;font-weight:700}
@media(max-width:860px){.sr-linien{grid-template-columns:1fr;padding:18px}.sr-code-1,.sr-code-2{display:none}}

/* Eigene Referenzseiten (07.10.2026) */
.er-links{margin-top:22px;flex-wrap:wrap}
.er-bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.er-bild{margin:0;border-radius:18px;overflow:hidden;background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 30px 60px -40px rgb(var(--schatten-rgb) / .45)}
.er-bild img{display:block;width:100%;height:auto}
.er-was{margin-top:40px}
.er-liste{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.er-liste li{margin:0;padding:20px 22px;border-radius:20px;background:var(--flaeche-1);border:1px solid var(--rand-linie);display:grid;gap:6px}
.er-liste li::before{display:none}
.er-liste b{font:700 1.05rem var(--titel);color:var(--tinte)}
.er-liste span{color:var(--grau);font-size:.94rem;line-height:1.5}
@media(max-width:760px){.er-bilder,.er-liste{grid-template-columns:1fr}}
.kachel-logo{display:grid;place-items:center;background:var(--flaeche-1)}.kachel-logo img{width:auto!important;height:auto!important;max-width:62%;max-height:52%;object-fit:contain}

/* Erstgespräch (07.10.2026) */
.tm-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:none}
.tm-schritte li,.tm-liste li{margin:0;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:22px;padding:22px;display:grid;gap:8px;align-content:start}
.tm-schritte li::before,.tm-liste li::before{display:none}
.tm-schritte small{font:700 .74rem var(--titel);letter-spacing:.14em;color:var(--akzent-text)}
.tm-schritte b,.tm-liste b{font:700 1.05rem var(--titel);color:var(--tinte)}
.tm-schritte span,.tm-liste span{color:var(--grau);font-size:.93rem;line-height:1.5}
.tm-raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,70px);align-items:start}
.tm-raster h2 em,.tm-ablauf h2 em{font-style:normal;color:var(--akzent-text)}
.tm-robo{margin:24px 0 0}.tm-robo img{width:min(220px,50%);height:auto}
.tm-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tm-vorbereiten{margin-top:18px;padding:16px 18px;border-radius:16px;background:#EEF2FB;background:light-dark(#EEF2FB,#0E1012);color:var(--text);font-size:.94rem}
.tm-kalender{background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:26px;padding:24px;display:grid;gap:14px;box-shadow:0 30px 60px -44px rgb(var(--schatten-rgb) / .45)}
.tm-monat{margin:0;font:700 .8rem var(--titel);letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.tm-tage{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tm-tag,.tm-zeit{border:1px solid var(--rand-linie);background:var(--grund);border-radius:14px;padding:10px 6px;cursor:pointer;color:var(--tinte);font:600 .92rem var(--titel)}
.tm-tag{display:grid;gap:2px}.tm-tag small{font-size:.72rem;color:var(--grau)}
.tm-tag.an,.tm-zeit.an{background:var(--graphit);border-color:var(--graphit);color:#fff}.tm-tag.an small{color:#C9D3EA}
.tm-zeiten{display:flex;flex-wrap:wrap;gap:8px}.tm-zeit{padding:9px 14px}
.tm-kalender .knopf{justify-self:start}
@media(max-width:900px){.tm-schritte{grid-template-columns:1fr 1fr}.tm-raster{grid-template-columns:1fr}}
@media(max-width:560px){.tm-schritte,.tm-liste{grid-template-columns:1fr}}
.tm-raster h2,.tm-ablauf h2{hyphens:manual;-webkit-hyphens:manual}
.kachel-logo.dunkel{background:var(--graphit)}

/* Konfigurator: Stil-Vorschau (07.10.2026) */
.kf-stile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.kf-stil{position:relative;display:grid;gap:4px;background:var(--flaeche-1);border:1.5px solid transparent;border-radius:20px;padding:12px 12px 14px;cursor:pointer;transition:border-color .2s,transform .2s}
.kf-stil input{position:absolute;opacity:0;pointer-events:none}
.kf-stil:has(input:checked){border-color:var(--graphit);transform:translateY(-2px)}
.kf-stil:has(input:focus-visible){outline:2px solid var(--licht);outline-offset:2px}
.kf-stil b{font:700 .95rem var(--titel);color:var(--tinte);margin-top:6px}
.kf-stil small{font-size:.8rem;color:var(--grau);line-height:1.4}
.st-mini{position:relative;display:block;height:120px;border-radius:12px;overflow:hidden;padding:12px}
.st-mini i,.st-mini b{display:block}
.st-nav{height:5px;width:40%;border-radius:3px;margin-bottom:12px}
.st-titel{font-size:.95rem;line-height:1;margin-bottom:8px;white-space:nowrap}
.st-zeile{height:5px;width:60%;border-radius:3px;margin-bottom:5px}.st-zeile.kurz{width:42%}
.st-knopf{height:14px;width:58px;margin-top:9px}
.st-bild{position:absolute;right:12px;top:28px;width:34%;height:62%}
.st-edel{background:#121212}.st-edel .st-nav,.st-edel .st-zeile{background:#3a3428}.st-edel .st-titel{color:#D4B26A;font-family:Georgia,serif;font-weight:400;letter-spacing:.06em}.st-edel .st-knopf{background:none;border:1px solid #D4B26A}.st-edel .st-bild{background:linear-gradient(160deg,#2b2620,#0b0b0b);border:1px solid #3a3428}
.st-hell{background:#FFF8F3;background:light-dark(#FFF8F3,#0E1012)}.st-hell .st-nav,.st-hell .st-zeile{background:#F4D9CC;background:light-dark(#F4D9CC,#2E2618)}.st-hell .st-titel{color:#E26D5A;color:light-dark(#E26D5A,#9AA3AA);font-weight:800}.st-hell .st-knopf{background:#E26D5A;border-radius:99px}.st-hell .st-bild{background:#FBE3D6;background:light-dark(#FBE3D6,#2E2618);border-radius:50%;height:auto;aspect-ratio:1}
.st-klar{background:#F6F8FA;background:light-dark(#F6F8FA,#0E1012)}.st-klar .st-nav,.st-klar .st-zeile{background:#D8DEE5;background:light-dark(#D8DEE5,#23282D)}.st-klar .st-titel{color:#1F3A5F;color:light-dark(#1F3A5F,#9DB3F2);font-weight:700}.st-klar .st-knopf{background:#1F3A5F;border-radius:3px}.st-klar .st-bild{background:var(--flaeche-1);border:1px solid #D8DEE5;border-color:light-dark(#D8DEE5,#2E343A);border-radius:4px}
.st-bunt{background:#FFE14D;background:light-dark(#FFE14D,#2E2618)}.st-bunt .st-nav,.st-bunt .st-zeile{background:#1A1A1A}.st-bunt .st-titel{color:#E4007C;color:light-dark(#E4007C,#D5DADE);font-weight:900;font-size:1.1rem;text-transform:uppercase}.st-bunt .st-knopf{background:#00A3FF;border-radius:99px}.st-bunt .st-bild{background:#E4007C;border-radius:18px;transform:rotate(-6deg)}
.st-natur{background:#EFE7DA;background:light-dark(#EFE7DA,#23282D)}.st-natur .st-nav,.st-natur .st-zeile{background:#CFC2AA}.st-natur .st-titel{color:#3F5A3C;color:light-dark(#3F5A3C,#9AA3AA);font-family:Georgia,serif;font-style:italic}.st-natur .st-knopf{background:#3F5A3C;border-radius:99px}.st-natur .st-bild{background:#C9D3B8;background:light-dark(#C9D3B8,#23282D);border-radius:60px 60px 12px 12px}
.st-rat{background:#EEF2FB;background:light-dark(#EEF2FB,#0E1012);display:grid;place-items:center}.st-rat img{height:100px;width:auto}
.kf-inspo{margin-top:18px}
@media(max-width:700px){.kf-stile{grid-template-columns:repeat(2,minmax(0,1fr))}.st-mini{height:96px}}
.kf-gross{background:var(--flaeche-1);border-radius:16px;padding:14px 16px;margin-top:8px}.kf-gross b{color:var(--tinte)}.kf-beitraege{margin-top:10px}

/* Website-Check: Einwilligung und Datenschutz-Info (07.10.2026) */
.kc-haken{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:.84rem;line-height:1.5;color:var(--text)}
.kc-haken input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--licht)}
.kc-haken a{color:var(--akzent-text);text-decoration:underline}
.kc-frei{flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:rgba(43,79,176,.06)}
.kc-frei>span{flex:1 1 100%}.kc-frei i{font-style:normal;color:var(--grau)}
.kc-frei label{display:inline-flex;gap:6px;align-items:center;margin-right:16px;font-weight:600}
.kc-frei label input{margin:0;width:16px;height:16px}
.kc-frei small{flex:1 1 100%;color:var(--grau);font-size:.78rem}
.kc-start[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.kc-info{margin-top:12px;font-size:.8rem;color:var(--grau)}
.kc-info summary{cursor:pointer;font-weight:600;color:var(--tinte)}
.kc-info p{margin:8px 0 0;line-height:1.55}.kc-info a{color:var(--akzent-text)}
.kc-quellen{margin:0 0 12px;font-size:.74rem;line-height:1.5;color:var(--grau)}
.kc-frei .kc-tel{flex:1 1 100%;margin:4px 0 0;display:grid}.kc-frei .kc-tel[hidden]{display:none}

/* Preisseite: ehrlicher Marktvergleich (07.10.2026) */
.mv h2 em{font-style:normal;color:var(--akzent-text)}
.mv-rolle{overflow-x:auto;margin-top:22px;border-radius:22px;border:1px solid var(--rand-linie);background:var(--flaeche-1)}
.mv-tabelle{width:100%;border-collapse:collapse;min-width:720px;font-size:.92rem}
.mv-tabelle th,.mv-tabelle td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--rand-linie);vertical-align:top}
.mv-tabelle thead th{font:700 .82rem var(--titel);color:var(--grau);background:var(--grund)}
.mv-tabelle tbody th{font-weight:600;color:var(--tinte)}
.mv-tabelle td{color:var(--grau)}
.mv-tabelle .mv-wir{background:#EEF2FB;background:light-dark(#EEF2FB,#0E1012);color:var(--tinte);font-weight:600}
.mv-tabelle thead .mv-wir{color:var(--akzent-text)}
.mv-unten{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.mv-rechner,.mv-ehrlich{border-radius:22px;padding:22px;display:grid;gap:6px}
.mv-rechner{background:var(--graphit);color:#fff}.mv-rechner p{margin:0;color:#C9D3EA}.mv-rechner .mv-summe{font:800 1.5rem var(--titel);color:#fff}.mv-rechner small{color:#9DB4F0}
.mv-ehrlich{background:var(--flaeche-1);border:1px solid var(--rand-linie)}.mv-ehrlich p{margin:0;color:var(--grau)}
.mv-stand{margin-top:14px;font-size:.78rem;color:var(--grau);max-width:100ch}
@media(max-width:760px){.mv-unten{grid-template-columns:1fr}}
/* Zettel lesbar (07.10.2026) */
.kf-zettel li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 14px}
.kf-zettel li span{min-width:0;overflow-wrap:anywhere}
.kf-zettel li b{white-space:normal;max-width:12ch;text-align:right}
.kf-zettel li.kf-gruppe{display:block;border:0;padding:8px 0 0;font:700 .7rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:#9DB4F0}
.kf-zettel li.kf-gruppe:first-child{padding-top:0}
.kf-summe div[hidden]{display:none}
/* Pakete: 12 Monate Service (07.10.2026) */
.pk-service{margin-top:16px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr);gap:20px 28px;align-items:center;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:24px;padding:24px 28px}
.pk-service-kopf small{display:block;font:700 .72rem var(--titel);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-text)}
.pk-service-kopf b{display:block;margin-top:4px;font:800 1.35rem/1.15 var(--titel);color:var(--tinte)}
.pk-service p{margin:0;color:var(--grau);font-size:.95rem;line-height:1.55}
.pk-service ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pk-service li{margin:0;padding:12px 14px;border-radius:14px;background:var(--grund);display:grid;gap:2px}
.pk-service li::before{display:none}
.pk-service li b{font:700 .9rem var(--titel);color:var(--tinte)}.pk-service li span{font-size:.84rem;color:var(--grau)}
@media(max-width:900px){.pk-service{grid-template-columns:1fr}}
/* Prüfliste 07.10.2026: Zettel passt immer in den Bildschirm, Summe bleibt sichtbar; Konto-Haken erst bei gewählter Plattform */
@media(min-width:1001px){.kf-zettel{max-height:calc(100vh - var(--kopf) - 40px);overflow:auto;overscroll-behavior:contain}
.kf-zettel .kf-summe{position:sticky;bottom:-24px;background:var(--graphit);padding:12px 0 18px;margin-bottom:-6px;box-shadow:0 -14px 18px -8px var(--graphit)}}
body:has([data-konfig]) .chat-knopf{right:auto;left:16px}
.kf-wz-konto{display:none}.kf-wz:has(.kf-wz-haupt input:checked) .kf-wz-konto{display:flex}
@media(max-width:1000px){.kf-zettel .kf-summe{position:sticky;bottom:0;background:var(--graphit);padding:10px 0}}
@media(max-width:600px){.pv-tabelle{position:relative}.pv-tabelle tbody th[scope="row"]{min-width:150px;position:sticky;left:0;background:var(--flaeche-1);z-index:1}}
/* Konfigurator 07.10.2026 abends: nach 12 Monaten, Social Media erklärt */
.kf-danach{background:var(--flaeche-1);border-radius:22px;padding:20px;margin:18px 0}
.kf-danach-kopf{margin:0 0 14px;font-size:.95rem;color:#3A4248;color:light-dark(#3A4248,#D5DADE)}.kf-danach-kopf b{color:var(--tinte)}
.kf-danach-zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kf-danach-zwei div{display:grid;gap:4px;background:var(--grund);border-radius:16px;padding:14px 16px}
.kf-danach-zwei small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.kf-danach-zwei b{font:700 1rem var(--titel);color:var(--tinte)}.kf-danach-zwei span{font-size:.86rem;color:var(--grau);line-height:1.45}
.kf-danach-zwei em{font-style:normal;font-weight:700;color:var(--akzent-text);margin-top:4px}
.kf-danach .kf-klein{margin:12px 0 0}
.kf-sm-erkl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kf-sm-erkl>div{display:grid;gap:6px;align-content:start;background:var(--flaeche-1);border-radius:20px;padding:16px}
.kf-sm-erkl b{font:700 .98rem var(--titel);color:var(--tinte)}.kf-sm-erkl small{font-size:.84rem;color:var(--grau);line-height:1.45}
.sm-bild{display:grid;height:74px;margin-bottom:6px;border-radius:12px;background:#EEF2FD;background:light-dark(#EEF2FD,#0E1012);padding:8px;place-content:center}
.sm-raster{grid-template-columns:repeat(3,18px);gap:2px}.sm-raster i{height:18px;background:linear-gradient(135deg,#3B6CF6,#1E3A8A);background-size:58px 58px}
.sm-raster i:nth-child(3n+2){background-position:-20px 0}.sm-raster i:nth-child(3n){background-position:-40px 0}
.sm-kreise{grid-auto-flow:column;gap:8px;align-items:center}.sm-kreise i{width:30px;height:30px;border-radius:50%;border:2px solid #3B6CF6;background:var(--flaeche-1);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 30px #C9D6FB}
.sm-beitrag{grid-template-columns:44px;gap:4px;justify-content:center}.sm-beitrag i{height:34px;border-radius:6px;background:#3B6CF6}.sm-beitrag em{height:5px;border-radius:3px;background:#9DB4F7}.sm-beitrag em.kurz{width:60%}
.kf-tipp{border-color:#C9D6FB;border-color:light-dark(#C9D6FB,#33405F)}
.kf-einzeln{margin-top:10px;padding:4px 0}
.kf-posten{margin-top:14px}.kf-posten .kf-klein b{color:var(--tinte)}
@media(max-width:700px){.kf-sm-erkl,.kf-danach-zwei{grid-template-columns:1fr}}
.kf-sm-wahl{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:900px){.kf-sm-wahl{grid-template-columns:1fr}}
/* Konfigurator: drei Wege am Ende (07.10.2026) */
.kf-wege{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:880px;counter-reset:w}
.kf-wege li{counter-increment:w;display:grid;gap:2px;background:var(--flaeche-1);border:1px solid #E4E7EA;border-color:light-dark(#E4E7EA,#2E343A);border-radius:18px;padding:14px 16px 14px 52px;position:relative}
.kf-wege li::before{content:counter(w);position:absolute;left:16px;top:14px;width:24px;height:24px;border-radius:50%;background:var(--graphit);color:#fff;font:700 .78rem/24px var(--titel);text-align:center}
.kf-wege b{font:700 .95rem var(--titel);color:var(--tinte)}.kf-wege span{font-size:.84rem;color:var(--grau)}
.kf-weg{margin-bottom:14px}.kf-karte:has(input:disabled){opacity:.45;cursor:not-allowed}
@media(max-width:760px){.kf-wege{grid-template-columns:1fr}}
/* Vergleich: Paketnamen bleiben beim Runterscrollen oben sichtbar (Ervin 07.10.2026) */
.pv.pv-fertig .pv-klappe>.pv-innen,.pv.pv-fertig .pv-rolle{overflow:visible}
.pv-tabelle thead th{top:var(--kopf);z-index:3;box-shadow:0 1px 0 var(--rand-linie)}
.pv.pv-fertig .pv-tabelle thead th:first-child{background:var(--flaeche-1)}
@media(max-width:700px){
  .pv-tabelle{min-width:0;table-layout:fixed}
  .pv-rolle{padding:4px 10px 0}
  .pv-tabelle tbody th[scope="row"]{width:44%;font-size:.84rem;padding:12px 6px;position:static;min-width:0}
  .pv-tabelle tbody th small{display:none}
  .pv-tabelle thead th{font-size:.78rem;padding:12px 2px 10px}.pv-tabelle thead th small{font-size:.7rem}
  .pv-tabelle td{font-size:.74rem;padding:10px 2px;word-break:break-word}
}
/* Gründer und B2B-Hinweis (07.10.2026) */
.pk-gruender{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;padding:22px 26px;border-radius:22px;background:linear-gradient(135deg,#EEF2FD,#fff);background:linear-gradient(135deg,light-dark(#EEF2FD,#0E1012),light-dark(#fff,#1A1E22));border:1px solid #C9D6FB;border-color:light-dark(#C9D6FB,#33405F);color:var(--tinte);text-decoration:none}
.pk-gruender span{display:grid;gap:4px}.pk-gruender small{font:600 .72rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-text)}
.pk-gruender b{font:700 1.15rem var(--titel)}.pk-gruender em{font-style:normal;color:var(--grau);font-size:.92rem}
.pk-gruender i{flex:none;width:44px;height:44px;border-radius:50%;background:var(--akzent-flaeche);color:var(--auf-akzent);display:grid;place-items:center;font-style:normal}
.pk-b2b{margin:14px 0 0;text-align:center;font-size:.84rem;color:var(--grau)}
.kf-b2b{margin:18px 0 0;font-size:.92rem;color:var(--grau)}.kf-b2b a{color:var(--akzent-text);font-weight:600}
.gr-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gr-raster article{display:grid;gap:6px;align-content:start;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:20px;padding:20px}
.gr-raster small{font:600 .74rem var(--lauf);color:var(--akzent-text)}.gr-raster b{font:700 1.02rem var(--titel);color:var(--tinte)}.gr-raster span{font-size:.88rem;color:var(--grau);line-height:1.5}
.gr-form textarea{width:100%;font:inherit;border:1px solid var(--rand-linie);border-radius:14px;padding:12px 14px;resize:vertical}
@media(max-width:1000px){.gr-raster{grid-template-columns:1fr 1fr}}@media(max-width:560px){.gr-raster{grid-template-columns:1fr}.pk-gruender{padding:18px}}
.kf-beitraege label span small{display:block;font-size:.72rem;font-weight:500;opacity:.7;margin-top:2px}
.kf-beitraege label span{text-align:center;line-height:1.25}
.kf-anzahl{max-width:280px;margin-top:10px}
/* Gründer-Seite v2 (07.10.2026): laienverständlich mit Zeichnungen */
.gr-held-raster{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:end}
.gr-robo{margin:0;justify-self:center}.gr-robo img{width:100%;max-width:300px;height:auto}
.gr-punkte{list-style:none;padding:0;margin:26px 0;display:flex;flex-wrap:wrap;gap:10px}
.gr-punkte li{display:grid;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:16px;padding:12px 16px}
.gr-punkte b{font:700 .95rem var(--titel);color:var(--tinte)}.gr-punkte span{font-size:.82rem;color:var(--grau)}
.gr-weg{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:gw}
.gr-weg li{position:relative;display:grid;gap:4px;align-content:start;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:20px;padding:20px 18px}
.gr-weg li:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--akzent-flaeche);color:var(--auf-akzent);font-size:.8rem;display:grid;place-items:center;z-index:1}
.gr-weg small{width:30px;height:30px;border-radius:50%;background:#EEF2FD;background:light-dark(#EEF2FD,#0E1012);color:var(--akzent-text);font:700 .9rem/30px var(--titel);text-align:center;margin-bottom:6px}
.gr-weg li:last-child{background:var(--graphit);border-color:var(--graphit)}.gr-weg li:last-child b{color:#fff}.gr-weg li:last-child span{color:#B8C0C6}
.gr-weg b{font:700 1rem var(--titel);color:var(--tinte)}.gr-weg span{font-size:.86rem;color:var(--grau);line-height:1.45}
.gr-raster{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.gr-raster article{gap:8px!important;padding:22px!important}
.gr-raster article>b{font:700 1.08rem var(--titel);color:var(--tinte)}
.gr-raster article p{margin:0;font-size:.9rem;color:#3A4248;color:light-dark(#3A4248,#D5DADE);line-height:1.5}
.gr-raster article p small{display:block;font:600 .7rem var(--lauf);letter-spacing:.1em;text-transform:uppercase;color:var(--akzent-text);margin-bottom:2px}
.gr-raster article>em{font-style:normal;font-size:.82rem;color:var(--grau);border-top:1px solid #EEF0F2;border-top-color:light-dark(#EEF0F2,#2E343A);padding-top:8px;margin-top:2px}
/* kleine Zeichnungen */
.gz{display:grid;place-content:center;height:96px;border-radius:14px;background:#EEF2FD;background:light-dark(#EEF2FD,#0E1012);margin-bottom:6px;position:relative;overflow:hidden}
.gz-marke{grid-template-columns:auto auto auto auto;gap:8px;align-items:center}.gz-marke i{width:46px;height:46px;border-radius:50%;background:var(--akzent-flaeche);color:var(--auf-akzent);font:800 1rem/46px var(--titel);font-style:normal;text-align:center}
.gz-marke em{width:16px;height:16px;border-radius:50%;background:#1E3A8A}.gz-marke em+em{background:#9DB4F7}.gz-marke em+em+em{background:var(--flaeche-1);border:1px solid #C9D6FB;border-color:light-dark(#C9D6FB,#33405F)}
.gz-adresse{gap:8px;justify-items:center}.gz-adresse i{font:600 .8rem var(--lauf);font-style:normal;background:var(--flaeche-1);border-radius:99px;padding:6px 14px;color:var(--tinte);border:1px solid #C9D6FB;border-color:light-dark(#C9D6FB,#33405F)}
.gz-adresse em{font-style:normal;font-size:.74rem;color:#1E3A8A;color:light-dark(#1E3A8A,#9DB3F2)}
.gz-website{grid-template-columns:120px;gap:4px;padding:10px;place-content:center}.gz-website i{height:8px;border-radius:4px;background:#C9D6FB;background:light-dark(#C9D6FB,#1B2540)}.gz-website b{height:28px;border-radius:6px;background:var(--akzent-flaeche)}
.gz-website em{height:5px;border-radius:3px;background:#9DB4F7}.gz-website em.k{width:60%}.gz-website u{height:12px;width:40%;border-radius:99px;background:#1E3A8A;text-decoration:none}
.gz-google{background:linear-gradient(90deg,#E3EAFB 1px,transparent 1px) 0 0/18px 18px,linear-gradient(#E3EAFB 1px,transparent 1px) 0 0/18px 18px,#F5F8FF;background:linear-gradient(90deg,light-dark(#E3EAFB,#23282D) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(light-dark(#E3EAFB,#23282D) 1px,transparent 1px) 0 0/18px 18px,light-dark(#F5F8FF,#0E1012)}
.gz-google i{width:30px;height:30px;border-radius:50% 50% 50% 0;background:var(--akzent-flaeche);transform:rotate(-45deg);box-shadow:inset 0 0 0 9px var(--licht),inset 0 0 0 15px #fff}
.gz-google b{position:absolute;bottom:22px;left:50%;width:14px;height:4px;border-radius:50%;background:rgba(30,58,138,.25);transform:translateX(-50%)}
.gz-gefunden{grid-template-columns:150px;gap:5px}.gz-gefunden i{font:500 .7rem var(--lauf);font-style:normal;background:var(--flaeche-1);border-radius:99px;padding:5px 10px;color:var(--tinte);border:1px solid #C9D6FB;border-color:light-dark(#C9D6FB,#33405F)}
.gz-gefunden b{height:10px;border-radius:4px;background:var(--akzent-flaeche);box-shadow:0 0 0 3px #fff}.gz-gefunden em{height:6px;border-radius:3px;background:#C9D6FB;background:light-dark(#C9D6FB,#1B2540)}
.gz-social{grid-template-columns:repeat(3,20px);gap:3px}.gz-social i{height:20px;border-radius:3px;background:linear-gradient(135deg,#3B6CF6,#1E3A8A)}.gz-social i:nth-child(2n){background:#9DB4F7}
.gz-film i{width:96px;height:58px;border-radius:10px;background:var(--graphit);position:relative}.gz-film i::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.gz-werbung{grid-template-columns:150px;gap:5px;background:var(--flaeche-1);border:1px solid #E3EAFB;border-color:light-dark(#E3EAFB,#33405F)}.gz-werbung small{font:700 .62rem var(--lauf);color:var(--akzent-text);letter-spacing:.08em;text-transform:uppercase}.gz-werbung b{height:10px;border-radius:4px;background:#1E3A8A}.gz-werbung em{height:6px;border-radius:3px;background:#C9D6FB;background:light-dark(#C9D6FB,#1B2540)}
.gz-pflege{grid-template-columns:130px;gap:6px}.gz-pflege em{height:7px;border-radius:4px;background:#9DB4F7}.gz-pflege em.k{width:55%}.gz-pflege i{position:absolute;right:28%;bottom:18px;font-style:normal;font-size:1.6rem;color:var(--akzent-text);transform:rotate(-10deg)}
@media(max-width:1000px){.gr-weg{grid-template-columns:1fr 1fr}.gr-weg li::after{display:none}.gr-raster{grid-template-columns:1fr 1fr!important}.gr-held-raster{grid-template-columns:1fr}.gr-robo img{max-width:200px}}
@media(max-width:600px){.gr-weg,.gr-raster{grid-template-columns:1fr!important}.gr-robo{display:none}}
.gr-teile{padding-top:0}
.pk-kopf .pk-lead{max-width:none;width:max-content;max-width:100%}.pk-kopf .pk-lead span{white-space:nowrap}
@media(min-width:900px){.pk-kopf{max-width:860px}}
@media(max-width:700px){.pk-kopf .pk-lead{width:auto}.pk-kopf .pk-lead span{white-space:normal;display:block;margin-top:6px}}
.kf-danach-eins>div{display:grid;gap:4px;background:var(--grund);border-radius:16px;padding:16px 18px}.kf-danach-eins small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}.kf-danach-eins b{font:700 1.05rem var(--titel);color:var(--tinte)}.kf-danach-eins span{font-size:.88rem;color:#3A4248;color:light-dark(#3A4248,#D5DADE);line-height:1.5}
/* Preise: alle Zusätze an einer Stelle (07.10.2026) */
.zs{background:var(--grund)}
.zs-raster{display:grid;grid-template-columns:1.25fr 1fr .9fr;gap:14px;align-items:start;margin-bottom:20px}
.zs-kasten{background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:22px;padding:22px}
.zs-kopf{display:grid;gap:2px;margin:0 0 12px}.zs-kopf b{font:800 1.2rem var(--titel);color:var(--tinte)}.zs-kopf span{font-size:.85rem;color:var(--grau)}
.zs-kasten ul{list-style:none;margin:0;padding:0}
.zs-kasten li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:11px 0;border-top:1px solid #EEF0F2;border-top-color:light-dark(#EEF0F2,#2E343A)}
.zs-kasten li>span{display:grid;gap:2px}.zs-kasten li b{font:600 .95rem var(--lauf);color:var(--tinte)}.zs-kasten li small{font-size:.8rem;color:var(--grau);line-height:1.4}
.zs-kasten li em{font-style:normal;font-weight:700;color:var(--akzent-text);white-space:nowrap}
@media(max-width:1000px){.zs-raster{grid-template-columns:1fr}}
.pk-zusatz{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;padding:20px 26px;border-radius:22px;background:var(--flaeche-1);border:1px solid var(--rand-linie);color:var(--tinte);text-decoration:none}
.pk-zusatz span{display:grid;gap:3px}.pk-zusatz b{font:700 1.05rem var(--titel)}.pk-zusatz em{font-style:normal;color:var(--grau);font-size:.9rem}
.pk-zusatz i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--graphit);color:#fff;display:grid;place-items:center;font-style:normal}

/* Prüfung 07.10.2026: Knöpfe am Handy untereinander, fehlende Pflichtangabe markieren */
@media (max-width:640px){.kf-nav{flex-direction:column-reverse;gap:10px}.kf-nav .knopf{width:100%;justify-content:center}}
.kf-fehlt input{outline:2px solid #c2410c;outline-offset:2px}
.kf-fehler{color:#c2410c;font-weight:600;margin:0 0 12px}



/* ===================== Erster Bildschirm „Zug für Zug“ (Konzept C, gewählt 07.10.2026) ===================== */
@font-face{font-family:"Bodoni Moda";src:url(/fonts/animacontent/uhrwerk/schrift/bodoni-moda-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap;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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";src:url(/fonts/animacontent/uhrwerk/schrift/bodoni-moda-latin-ext-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
.zz{--graphit-0:#0F1114;--graphit-1:#16191C;--zz-linie:rgba(200,206,211,.14);--zz-silber:#C8CED3;--silber-2:#8B939A;--weiss:#F4F6F7;--licht-hell:#6F86D6;--rand:clamp(16px,4vw,56px);--p:0;color:var(--zz-silber)}
.zz *{box-sizing:border-box}
.zz-danach strong{color:var(--weiss);font-weight:600}
/* ---------- Bühne ---------- */
.zz{position:relative;height:240vh;background:var(--graphit-0)}
.zz-rahmen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 40%,var(--graphit-1) 0%,var(--graphit-0) 70%)}

/* Filmkorn */
.zz-korn{position:absolute;inset:-50%;pointer-events:none;opacity:.07;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:zzKorn .9s steps(6) infinite}
@keyframes zzKorn{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* Unsichtbares Raster: nur Kreuzmarken an den Schnittpunkten, Koordinaten am Rand */
.zz-raster{position:absolute;inset:0;z-index:0;pointer-events:none;
  transform:translate3d(0,calc(var(--p) * -6vh),0) scale(calc(1 + var(--p) * .08));transform-origin:30% 45%}
.zz-raster .zz-kreuze{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
.zz-raster .zz-kreuze i{position:relative}
.zz-raster .zz-kreuze i::after{content:"";position:absolute;right:-6px;bottom:-6px;width:11px;height:11px;
  background:linear-gradient(var(--zz-linie),var(--zz-linie)) center/1px 100% no-repeat,linear-gradient(var(--zz-linie),var(--zz-linie)) center/100% 1px no-repeat}
.zz-koord{position:absolute;z-index:2;font:500 10px/1 "Inter",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.14em;color:rgba(200,206,211,.32);text-transform:lowercase;pointer-events:none}
.zz-koord-x{left:0;right:0;bottom:14px;opacity:calc(1 - var(--p) * 3);display:grid;grid-template-columns:repeat(8,1fr)}
.zz-koord-x span{padding-left:12px}
.zz-koord-y{top:0;bottom:0;right:12px;display:grid;grid-template-rows:repeat(8,1fr);align-items:start}
.zz-koord-y span{padding-top:10px}

/* Inhalt */
.zz-inhalt{position:absolute;inset:0;z-index:5;display:grid;
  grid-template-columns:200px minmax(0,1fr);
  grid-template-rows:var(--kopf) auto 1fr auto auto;
  column-gap:clamp(24px,3vw,56px);padding:0 var(--rand) 0}

/* Notation */
.zz-notation{grid-column:1;grid-row:2 / 5;align-self:center;margin:0;padding:0;list-style:none;
  font:500 12px/1 "Inter",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.04em;position:relative;padding-left:18px}
.zz-notation::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--zz-linie)}
.zz-notation .zz-lauf{position:absolute;left:0;top:2px;width:1px;height:calc(100% - 4px);background:var(--zz-silber);transform-origin:top;transform:scaleY(var(--zug-anteil,0));transition:transform .45s cubic-bezier(.7,0,.2,1)}
.zz-notation ol{margin:0;padding:0;list-style:none}
.zz-notation li{display:grid;grid-template-columns:2.4em 4.6em 1fr;gap:4px;padding:11px 0;color:rgba(200,206,211,.28);transition:color .25s steps(2)}
.zz-notation li b{font-weight:600}
.zz-notation li.ist-gezogen{color:rgba(200,206,211,.55)}
.zz-notation li.ist-aktiv{color:var(--weiss)}
.zz-notation li.ist-aktiv .zz-feld{color:var(--licht-hell)}
.zz-notation .zz-ntitel{display:block;margin:0 0 18px;font:600 10px/1 "Inter",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(200,206,211,.42)}

.zz-kicker{grid-column:2;grid-row:2;margin:clamp(18px,4vh,44px) 0 0;display:flex;align-items:center;gap:14px;
  font:600 12px/1.3 "Inter",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--silber-2)}
.zz-kicker::before{content:"";width:40px;height:1px;background:var(--silber-2);flex:none}
.zz-kicker .zz-live{margin-left:auto;display:none;color:var(--weiss);letter-spacing:.06em;font-variant-numeric:tabular-nums;text-transform:none}

/* Titel – Kamera */
.zz-kamera{grid-column:2;grid-row:3;align-self:end;margin-bottom:clamp(20px,5vh,56px);transform-origin:0% 50%;
  transform:translate3d(var(--kx,0),var(--ky,0),0) scale(var(--ks,1));will-change:transform}
.zz-titel{margin:0;font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112%;color:var(--weiss);
  font-size:clamp(54px,10vw,168px);line-height:.88;letter-spacing:-.045em}
.zz-titel .reihe{display:block;white-space:nowrap}
.zz-titel .reihe-2{padding-left:2.06em}
.zz-titel .wort{display:inline-block;position:relative;margin-right:.18em}
.zz-titel .wort:last-child{margin-right:0}
.zz-titel .tag{position:absolute;left:.06em;top:-.04em;transform:translateY(-100%);
  font:500 max(10px,.085em)/1 "Inter",sans-serif;letter-spacing:.12em;color:var(--licht-hell);font-stretch:100%}
.zz-titel .zz-feldrahmen{position:absolute;inset:-.06em -.08em -.1em -.08em;border:1px solid rgba(111,134,214,.55);pointer-events:none;opacity:0}
.zz-titel .zwei{display:block;margin-top:.14em;padding-left:.04em;font-family:"Bodoni Moda",serif;font-style:italic;font-weight:600;font-stretch:100%;
  font-size:.62em;line-height:1;letter-spacing:-.01em;color:var(--zz-silber)}
.zz-titel .zwei em{font-style:italic;color:var(--licht-hell)}

/* Danach: Text, Knöpfe, Leiste */
.zz-danach{grid-column:2;grid-row:4;display:grid;grid-template-columns:minmax(0,560px) auto;align-items:end;justify-content:space-between;gap:24px 48px;
  padding-bottom:clamp(20px,3.4vh,36px)}
.zz-danach p{margin:0;font-size:clamp(16px,1.22vw,18.5px);line-height:1.6;color:var(--zz-silber);max-width:560px}
.zz-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.zz-knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;
  font:600 15px/1 "Inter",sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.zz-knopf-voll{background:var(--flaeche-1);color:var(--graphit-0);border:1px solid var(--weiss)}
.zz-knopf-voll:hover{background:var(--licht-hell);border-color:var(--licht-hell);color:var(--graphit-0)}
.zz-knopf-rand{border:1px solid rgba(200,206,211,.4);color:var(--weiss)}
.zz-knopf-rand:hover{border-color:var(--weiss)}
.zz-leiste{grid-column:1 / -1;grid-row:5;margin:0 calc(var(--rand) * -1);padding:0 var(--rand);border-top:1px solid var(--zz-linie);
  display:grid;grid-template-columns:200px repeat(4,1fr);column-gap:clamp(24px,3vw,56px)}
.zz-leiste .zz-zaehler{font:500 11px/1 "Inter",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(200,206,211,.42);align-self:center;font-variant-numeric:tabular-nums}
.zz-leiste div{padding:18px 0 22px;display:flex;align-items:baseline;gap:10px;border-left:1px solid var(--zz-linie);padding-left:16px}
.zz-leiste strong{font-family:"Archivo",sans-serif;font-weight:700;font-stretch:110%;font-size:clamp(22px,2vw,30px);color:var(--weiss);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.zz-leiste span{font-size:13px;color:var(--silber-2)}

/* Aufdecken der Schlussteile per Scroll: --a ist 0..1 */
.zz-auf{opacity:var(--a,0);transform:translate3d(0,calc((1 - var(--a,0)) * 28px),0)}
.zz-leiste.zz-auf{transform:translate3d(0,calc((1 - var(--a,0)) * 100%),0)}

/* Scherenschnitt-König */
.zz-koenig{position:absolute;z-index:3;right:clamp(-40px,4vw,120px);bottom:0;height:min(86svh,820px);width:auto;pointer-events:none;
  filter:brightness(0) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000);opacity:1;
  transform:translate3d(calc((1 - var(--k,0)) * 120%),0,0)}
.zz-koenig-licht{position:absolute;z-index:2;right:0;bottom:0;width:42vw;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(43,79,176,.0) 30%,rgba(43,79,176,.10));opacity:var(--k,0)}

/* Scroll-Hinweis */
.zz-hinweis{position:absolute;z-index:6;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  font:500 11px/1 "Inter",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(200,206,211,.55);opacity:calc(1 - var(--p) * 8)}
.zz-hinweis i{display:block;width:1px;height:28px;background:rgba(200,206,211,.5);transform-origin:top;animation:zzFall 1.6s cubic-bezier(.7,0,.2,1) infinite}
@keyframes zzFall{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Intro: harte, präzise Züge ---------- */
.js .zz-titel .wort{opacity:0;transform:translate3d(0,-.16em,0)}
.js .zz-titel .tag{opacity:0}
.js .zz-titel .zwei{opacity:0;transform:translate3d(-.6em,0,0)}
.js .zz-kicker,.js .zz-notation{opacity:0}
.zz.gestartet .zz-titel .wort{animation:zzSetzen .34s cubic-bezier(.85,0,.15,1) forwards;animation-delay:var(--t)}
.zz.gestartet .zz-titel .tag{animation:zzBlitz .01s linear forwards;animation-delay:calc(var(--t) + .3s)}
.zz.gestartet .zz-titel .zz-feldrahmen{animation:zzFeld .9s steps(1) forwards;animation-delay:calc(var(--t) + .28s)}
.zz.gestartet .zz-titel .zwei{animation:zzGleiten .7s cubic-bezier(.16,1,.3,1) forwards;animation-delay:1.55s}
.zz.gestartet .zz-kicker{animation:zzBlitz .01s linear .05s forwards}
.zz.gestartet .zz-notation{animation:zzBlitz .01s linear 1.3s forwards}
@keyframes zzSetzen{0%{opacity:0;transform:translate3d(0,-.16em,0)}55%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes zzBlitz{to{opacity:1}}
@keyframes zzFeld{0%{opacity:1}35%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes zzGleiten{to{opacity:1;transform:translate3d(0,0,0)}}

/* ---------- Tablet ---------- */
@media (max-width:1180px){
  .zz-inhalt{grid-template-columns:150px minmax(0,1fr)}
  .zz-leiste{grid-template-columns:150px repeat(4,1fr)}
  .zz-notation li{grid-template-columns:2em 1fr;}
  .zz-notation li .zz-was{grid-column:2}
  .zz-danach{grid-template-columns:1fr}
  .zz-leiste div{flex-direction:column;align-items:flex-start;gap:4px}
}
/* ---------- Handy ---------- */
@media (max-width:760px){
  
  
  
  .zz{height:220vh}
  .zz-inhalt{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--kopf) auto 1fr auto auto;column-gap:0}
  .zz-notation{display:none}
  .zz-kicker,.zz-kamera,.zz-danach{grid-column:1}
  .zz-kicker{flex-wrap:wrap;gap:8px 12px;font-size:10.5px;letter-spacing:.16em;margin-top:18px}
  .zz-kicker::before{width:24px}
  .zz-kicker .zz-live{display:block;flex-basis:100%;margin-left:36px;font-size:12px;color:var(--licht-hell);letter-spacing:.04em}
  .zz-titel{font-size:clamp(46px,20.5vw,96px);line-height:.9}
  .zz-titel .reihe .wort{display:block;margin-right:0;width:max-content}
  .zz-titel .reihe .wort + .wort{margin-left:1.02em}
  .zz-titel .reihe-2{padding-left:.12em}
  .zz-titel .tag{font-size:10px}
  .zz-titel .zwei{font-size:.6em;margin-top:.22em}
  .zz-danach{gap:18px;padding-bottom:16px}
  .zz-danach p{font-size:15.5px;line-height:1.55}
  .zz-knoepfe{flex-direction:column;align-items:stretch}
  .zz-knopf{min-height:50px;font-size:15px}
  .zz-leiste{grid-template-columns:repeat(4,1fr);column-gap:0}
  .zz-leiste .zz-zaehler{display:none}
  .zz-leiste div{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0 14px 10px}
  .zz-leiste div:first-of-type{border-left:0;padding-left:0}
  .zz-leiste strong{font-size:20px}
  .zz-leiste span{font-size:11px;line-height:1.25}
  .zz-koenig{height:56svh;right:-34px;opacity:.85}
  .zz-koord-x span{padding-left:6px}
  .zz-koord-y{display:none}
}
@media (max-width:760px) and (max-height:760px){
  .zz-titel{font-size:clamp(40px,16vw,72px)}
  .zz-danach p{font-size:14.5px}
}

/* ---------- Ruhig ---------- */
@media (prefers-reduced-motion:reduce){
  .zz-korn,.zz-hinweis i{animation:none}
  .zz-hinweis,.zz-koord-x{display:none}
  .zz{height:auto}
  .zz-rahmen{position:relative;height:auto;min-height:100svh}
  .zz-inhalt{position:relative;min-height:100svh}
  .zz-raster,.zz-kamera{transform:none!important}
  .zz-auf,.zz-leiste.zz-auf{opacity:1!important;transform:none!important}
  .zz-koenig{transform:none!important}
  .zz-koenig-licht{opacity:1}
  .js .zz-titel .wort,.js .zz-titel .tag,.js .zz-titel .zwei,.js .zz-kicker,.js .zz-notation{opacity:1;transform:none;animation:none}
  .zz-notation li{transition:none}
}

/* Feinschliff im Einbau: Handy-Endbild passt unter die Kopfleiste */
@media (max-width:760px){.zz-titel{font-size:clamp(40px,15.5vw,72px)}.zz-danach p{font-size:15px}.zz-kicker{margin-top:10px}}
@media (max-width:760px) and (max-height:760px){.zz-titel{font-size:clamp(36px,13vw,60px)}}

/* ===================== Referenzen wie die Produkte (07.10.2026) ===================== */
.ref-liste .pr:nth-child(even){grid-template-columns:.85fr 1.15fr}.ref-liste .pr:nth-child(even) .pr-text{order:0}
.ref-liste .pr.gegen{grid-template-columns:1.15fr .85fr}.ref-liste .pr.gegen .pr-text{order:2}
.ref-ton-0{--pr-grund:radial-gradient(120% 120% at 100% 0%,#1F2A4A 0%,#0E1220 60%);--pr-akzent:#8FA6F0}
.ref-ton-1{--pr-grund:radial-gradient(120% 120% at 0% 100%,#22301F 0%,#0E1714 60%);--pr-akzent:#9BD08A}
.ref-ton-2{--pr-grund:radial-gradient(120% 120% at 100% 100%,#3A2A12 0%,#17140F 60%);--pr-akzent:#F3A93B}
.ref-ton-3{--pr-grund:radial-gradient(120% 120% at 0% 0%,#2A2C3A 0%,#16171C 60%);--pr-akzent:#C8CED3}
.ref-ton-4{--pr-grund:radial-gradient(120% 120% at 100% 0%,#3D1D2A 0%,#170C11 60%);--pr-akzent:#F29BB8}
.ref-ton-5{--pr-grund:radial-gradient(120% 120% at 0% 100%,#123335 0%,#0A1617 60%);--pr-akzent:#6FD3C8}
.ref-pr h3{font-size:clamp(2rem,3.6vw,3.2rem)}
.pr-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:6px}
.pr-link-leise{color:#AEB5BB;font-weight:600}
.pr-bild.ohne-handy{padding:0}
.ref-pr .mk-leiste span{margin-left:10px;font-size:.72rem;color:#686F74;color:light-dark(#686F74,#9AA3AA)}
@media(max-width:900px){.ref-liste .pr.gegen{grid-template-columns:1fr}.ref-liste .pr.gegen .pr-text{order:0}}
.ref-pr .pr-browser img{height:auto;aspect-ratio:16/10}

/* ===================== Preise: neuer Hero (07.10.2026) ===================== */
.ph{position:relative;overflow:hidden;padding:calc(var(--kopf) + clamp(40px,7vh,90px)) 0 clamp(60px,9vh,110px);background:radial-gradient(70% 80% at 85% 40%,color-mix(in srgb,var(--licht) 10%,#fff) 0%,#fff 55%),#fff;background:radial-gradient(70% 80% at 85% 40%,color-mix(in srgb,var(--licht) 10%,light-dark(#fff,#1A1E22)) 0%,light-dark(#fff,#1A1E22) 55%),light-dark(#fff,#1A1E22)}
.ph-raster{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
.ph-titel{font:800 clamp(2.6rem,5.2vw,4.8rem)/.98 var(--titel);font-stretch:110%;letter-spacing:-.045em;color:var(--tinte);margin:18px 0 20px}
.ph-titel em{font-style:normal;color:var(--akzent-text)}
.ph-lead{font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6;color:var(--grau);max-width:46ch;margin:0 0 26px}
.ph-punkte{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ph-punkte li{position:relative;padding:14px 16px 14px 44px;border:1px solid var(--rand-linie);border-radius:16px;background:rgb(var(--flaeche-1-rgb) / .8)}
.ph-punkte li::before{content:"";position:absolute;left:16px;top:17px;width:16px;height:16px;border-radius:50%;background:var(--akzent-flaeche) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.3l2.4 2.4L12 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}
.ph-punkte b{display:block;font:700 .98rem var(--titel);color:var(--tinte)}
.ph-punkte span{display:block;font-size:.86rem;color:var(--grau);margin-top:2px}
.ph-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.ph-buehne{position:relative;height:clamp(380px,46vw,520px);perspective:1400px}
.ph-karte{position:absolute;width:clamp(200px,19vw,270px);padding:24px 24px 22px;border-radius:26px;text-decoration:none;color:var(--tinte);background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 30px 60px -30px rgb(var(--schatten-rgb) / .35);display:flex;flex-direction:column;gap:6px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ph-karte small{font:700 .78rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
.ph-karte b{font:800 clamp(2.2rem,3.4vw,3rem)/1 var(--titel);letter-spacing:-.04em}
.ph-karte span{font-size:.95rem;color:var(--grau)}
.ph-karte i{font-style:normal;font-size:.78rem;color:var(--stahl);margin-top:10px;padding-top:12px;border-top:1px solid var(--rand-linie)}
.ph-karte em{position:absolute;top:-12px;right:18px;font:700 .7rem var(--lauf);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--auf-akzent);background:var(--akzent-flaeche);padding:6px 11px;border-radius:99px}
.ph-k1{left:0;top:22%;transform:rotate(-7deg)}
.ph-k3{right:0;top:30%;transform:rotate(6deg)}
.ph-k2{left:50%;top:6%;z-index:2;transform:translateX(-50%);background:var(--graphit);color:#fff;border-color:var(--graphit);box-shadow:0 40px 80px -30px rgb(var(--schatten-rgb) / .6)}
.ph-k2 small{color:#9AA3AA}.ph-k2 span{color:#C8CED3}.ph-k2 i{color:#9AA3AA;border-color:rgba(255,255,255,.14)}
.ph-unter{position:absolute;left:0;right:0;bottom:0;text-align:center;margin:0;font-size:.85rem;color:var(--stahl)}
@media(hover:hover) and (min-width:1024px){.ph-buehne:hover .ph-k1{transform:rotate(-10deg) translate(-14px,6px)}.ph-buehne:hover .ph-k3{transform:rotate(9deg) translate(14px,6px)}.ph-buehne:hover .ph-k2{transform:translateX(-50%) translateY(-8px)}}
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){.ph-karte{animation:phRein .9s cubic-bezier(.16,1,.3,1) both}.ph-k1{animation-delay:.15s}.ph-k2{animation-delay:.3s}.ph-k3{animation-delay:.45s}}
@keyframes phRein{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@media(max-width:900px){.ph-raster{grid-template-columns:1fr}.ph-buehne{height:400px;max-width:520px;width:100%;margin:0 auto}}
@media(max-width:600px){.ph-punkte{grid-template-columns:1fr}.ph-buehne{height:360px}.ph-karte{width:190px;padding:18px}.ph-karte b{font-size:2rem}.ph-k1{top:30%}.ph-k3{top:38%}.ph-knoepfe .knopf{width:100%;justify-content:center}}
/* Vergleich: Umschalter Wachstum | Dominanz */
.mv-schalter{display:inline-flex;gap:4px;background:#ECEEF0;background:light-dark(#ECEEF0,#0E1012);border-radius:99px;padding:5px;margin:0 0 22px}
.mv-schalter button{border:0;background:none;cursor:pointer;font:650 1rem var(--lauf);color:#5E676E;color:light-dark(#5E676E,#9AA3AA);padding:11px 22px;border-radius:99px;display:flex;align-items:baseline;gap:8px}
.mv-schalter button small{font-size:.8rem;color:var(--stahl);font-weight:600}
.mv-schalter button.an{background:var(--flaeche-1);color:var(--tinte);box-shadow:0 1px 3px rgb(var(--schatten-rgb) / .14)}
.ph{padding-top:calc(var(--kopf) + clamp(16px,4vh,48px))}
.ph-karte{width:clamp(170px,13.4vw,205px);padding:20px 18px 18px}
.ph-karte b{font-size:clamp(1.9rem,2.6vw,2.5rem)}
.ph-k1{left:0;top:30%}.ph-k3{right:0;top:36%}.ph-k2{top:8%}
@media(max-width:600px){.ph-buehne{height:330px}.ph-karte{width:31vw;padding:14px 12px}.ph-karte b{font-size:1.45rem}.ph-karte span{font-size:.78rem}.ph-karte small{font-size:.62rem}.ph-karte em{font-size:.58rem;right:8px}.ph-k1{top:26%}.ph-k3{top:32%}}

/* ===================== Leistungen als eine Seite mit Reitern (07.10.2026) ===================== */
.lz-held{padding:calc(var(--kopf) + clamp(30px,6vh,70px)) 0 clamp(20px,3vh,36px);text-align:center}
.lz-held .brot{justify-content:center}
.lz-titel{font:800 clamp(2.4rem,5vw,4.6rem)/.98 var(--titel);font-stretch:110%;letter-spacing:-.045em;color:var(--tinte);margin:16px auto 16px;max-width:18ch}
.lz-titel em{font-style:normal;color:var(--stahl)}
.lz-held .lead{margin:0 auto;max-width:52ch}
.lz-reiter{position:sticky;top:calc(var(--kopf) + 6px);z-index:30;padding:10px 0}
.lz-reiter-band{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:rgba(236,238,240,.92);background:light-dark(rgba(236,238,240,.92),rgba(14,16,18,.92));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:99px;padding:5px;width:max-content;max-width:100%;margin:0 auto;box-shadow:0 10px 30px -18px rgb(var(--schatten-rgb) / .35)}
.lz-reiter-band::-webkit-scrollbar{display:none}
.lz-reiter a{flex:none;font:600 .9rem var(--lauf);color:#5E676E;color:light-dark(#5E676E,#9AA3AA);text-decoration:none;padding:10px 16px;border-radius:99px;white-space:nowrap;transition:background .25s,color .25s}
.lz-reiter a.an{background:var(--flaeche-1);color:var(--tinte);box-shadow:0 1px 3px rgb(var(--schatten-rgb) / .14)}
.lz-gruppe{padding-top:clamp(40px,6vh,70px)}
.lz-gtitel{margin-bottom:18px}
.lz-karte{scroll-margin-top:calc(var(--kopf) + 90px)}
.lz-gruppe{scroll-margin-top:calc(var(--kopf) + 70px)}
.pr-liste .pr.gegen{grid-template-columns:1.15fr .85fr}.pr-liste .pr.gegen .pr-text{order:2}
.pr-liste .lz-karte:nth-child(even):not(.gegen){grid-template-columns:.85fr 1.15fr}.pr-liste .lz-karte:nth-child(even):not(.gegen) .pr-text{order:0}
.lz-ton-bauen{--pr-grund:radial-gradient(120% 120% at 100% 0%,#1F2A4A 0%,#0E1220 60%);--pr-akzent:#8FA6F0}
.lz-ton-gefunden{--pr-grund:radial-gradient(120% 120% at 0% 100%,#22301F 0%,#0E1714 60%);--pr-akzent:#9BD08A}
.lz-ton-werbung{--pr-grund:radial-gradient(120% 120% at 100% 100%,#3A2A12 0%,#17140F 60%);--pr-akzent:#F3A93B}
.lz-ton-inhalte{--pr-grund:radial-gradient(120% 120% at 0% 0%,#3D1D2A 0%,#170C11 60%);--pr-akzent:#F29BB8}
.lz-bild{margin:0;border-radius:24px;overflow:hidden;background:#F3F5F6;background:light-dark(#F3F5F6,#0E1012)}
.lz-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.lz-projekt{margin:14px 0 0;font-size:.8rem;color:#8B949B}
@media(max-width:900px){.pr-liste .pr.gegen{grid-template-columns:1fr}.pr-liste .pr.gegen .pr-text{order:0}.lz-reiter{top:calc(var(--kopf) + 2px)}.lz-reiter-band{border-radius:18px}}
.mega-gitter{grid-template-columns:repeat(5,minmax(0,1fr))}
.mega-titel a{color:inherit;text-decoration:none}
.pr-browser img{height:auto;aspect-ratio:16/10}

/* ===================== Fallstudien: Logo im Kopf (07.10.2026) ===================== */
.logo-buehne{position:relative;margin:0;aspect-ratio:4/3;border-radius:32px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(90% 90% at 30% 25%,#fff 0%,color-mix(in srgb,var(--lb-akzent) 10%,#fff) 55%,color-mix(in srgb,var(--lb-akzent) 22%,#F3F5F6) 100%);background:radial-gradient(90% 90% at 30% 25%,light-dark(#fff,#1A1E22) 0%,color-mix(in srgb,var(--lb-akzent) 10%,light-dark(#fff,#1A1E22)) 55%,color-mix(in srgb,var(--lb-akzent) 22%,light-dark(#F3F5F6,#0E1012)) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lb-akzent) 18%,transparent)}
.logo-buehne.lb-dunkel{background:radial-gradient(90% 90% at 30% 25%,color-mix(in srgb,var(--lb-akzent) 34%,#1B1F24) 0%,#121418 70%)}
.lb-logo{max-width:62%;max-height:46%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(22,25,28,.10));margin-right:14%}
.lb-name{font:800 clamp(2rem,4vw,3.4rem)/1 var(--titel);letter-spacing:-.04em;color:var(--lb-akzent);margin-right:14%;text-align:center}
.lb-dunkel .lb-name{color:#fff}
.lb-handy{position:absolute;right:7%;bottom:-8%;width:24%;aspect-ratio:390/844;border-radius:22px;overflow:hidden;outline:5px solid #0B0C0E;box-shadow:0 30px 50px -20px rgba(0,0,0,.45);transform:rotate(4deg)}
.lb-handy img{width:100%;height:100%;object-fit:cover;object-position:top}
.fs-raster{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center}
.fs-text h2{font:800 clamp(2rem,3.6vw,3.2rem)/1 var(--titel);letter-spacing:-.04em;margin:10px 0 16px}
.fs-text h2 em{font-style:normal;color:var(--stahl)}
.fs-liste{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.fs-liste li{position:relative;padding:14px 16px 14px 44px;border:1px solid var(--rand-linie);border-radius:16px;background:var(--flaeche-1)}
.fs-liste li::before{content:"";position:absolute;left:16px;top:16px;width:16px;height:16px;border-radius:50%;background:var(--akzent-flaeche) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.3l2.4 2.4L12 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}
.fs-liste b{font-weight:600;color:var(--tinte)}
@media(max-width:900px){.fs-raster{grid-template-columns:1fr}.lb-handy{width:28%}}
/* Logo-Bühne: Logo nie beschneiden, links vom Handy halten */
.s-held-bild.logo-buehne{padding:9% 36% 9% 8%;place-items:center}
.s-held-bild.logo-buehne:not(:has(.lb-handy)){padding:10% 12%}
.s-held-bild.logo-buehne .lb-logo{position:static;width:auto;height:auto;max-width:100%;max-height:62%;object-fit:contain;aspect-ratio:auto;margin:0;border-radius:0;transform:none}
.s-held-bild.logo-buehne .lb-name{margin:0;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05}
.s-held-bild.logo-buehne .lb-handy img{position:static;width:100%;height:100%;object-fit:cover;border-radius:0}
.fs-text h2,.s-titel{hyphens:manual;-webkit-hyphens:manual}

/* ===================== Videos direkt auf der Seite (07.10.2026) ===================== */
.vid{margin:0}
.vid-start,.vid video{display:block;width:100%;height:auto;border-radius:28px;overflow:hidden;background:#0B1A44;border:0;padding:0;position:relative;cursor:pointer}
.vid-start img{display:block;width:100%;height:100%;object-fit:cover}
.vid-hoch{max-width:360px;width:100%}
.vid-hoch .vid-start,.vid-hoch video{aspect-ratio:9/16;object-fit:cover}
.vid-quer .vid-start,.vid-quer video{aspect-ratio:16/9;object-fit:cover}
.vid .kb-play{position:absolute;left:50%;top:50%}
.vid-start small{position:absolute;left:14px;bottom:14px;color:#fff;font:600 .78rem var(--lauf);background:rgba(11,26,68,.6);border-radius:99px;padding:6px 11px}
.vid figcaption{margin-top:10px;font-size:.85rem;color:var(--grau)}
.vid-probe .vid-quer{max-width:960px;margin-top:24px}
.kb-raster .vid-hoch{justify-self:center}
.kachel-lb{display:grid;place-items:center;aspect-ratio:16/10;padding:12% 18%;background:radial-gradient(90% 90% at 30% 25%,#fff 0%,color-mix(in srgb,var(--lb-akzent) 10%,#fff) 55%,color-mix(in srgb,var(--lb-akzent) 22%,#F3F5F6) 100%);background:radial-gradient(90% 90% at 30% 25%,light-dark(#fff,#1A1E22) 0%,color-mix(in srgb,var(--lb-akzent) 10%,light-dark(#fff,#1A1E22)) 55%,color-mix(in srgb,var(--lb-akzent) 22%,light-dark(#F3F5F6,#0E1012)) 100%)}
.kachel-lb.lb-dunkel{background:radial-gradient(90% 90% at 30% 25%,color-mix(in srgb,var(--lb-akzent) 34%,#1B1F24) 0%,#121418 70%)}
.kachel-bild.kachel-lb img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;aspect-ratio:auto;transform:none}
.fs-ansicht .fs-bild{max-width:1080px;margin:18px auto 0}
.kachel-bild.kachel-lb img{width:100%;height:100%;max-height:none;object-fit:contain}

/* Schachkürzel nur grafisch, damit die h1 für Suchmaschinen sauber „Jeder Zug zählt.“ lautet */
.zz-titel .tag::before{content:attr(data-tag)}
/* Journal: sichtbares Datum (07.10.2026) */
.artikel-datum{margin:.6rem 0 0;font-size:.9rem;color:var(--grau,#5b6070);color:var(--grau,light-dark(#5b6070,#9AA3AA));letter-spacing:.01em}

/* ===== Eigene Leistungsseiten: gemeinsamer Rahmen (07.10.2026) ===== */
.ls-held{padding:calc(var(--kopf) + clamp(40px,6vw,80px)) 0 clamp(40px,6vw,70px)}
.ls-held-raster{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.ls-held .s-titel em{font-style:normal;color:var(--akzent-text)}
.ls-antwort{max-width:58ch}
.ls-held-bild{margin:0;border-radius:28px;overflow:hidden;background:var(--flaeche-1);box-shadow:0 30px 80px rgb(var(--schatten-rgb) / .10)}
.ls-held-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ls-fakten-band{padding:0 0 clamp(40px,6vw,70px)}
.ls-fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;background:var(--rand-linie);border:1px solid var(--rand-linie);border-radius:22px;overflow:hidden}
.ls-fakten>div{background:var(--flaeche-1);padding:20px 22px}
.ls-fakten dt{font:600 .72rem/1.2 var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--stahl);margin-bottom:8px}
.ls-fakten dd{margin:0;color:var(--text);font-size:.98rem}
.ls-fakten a{color:var(--akzent-text)}
.ls-fragen-raster{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px)}
.ls-fragen h2 em,.ls-schluss h2 em{font-style:normal;color:var(--akzent-text)}
.ls-schluss-raster{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding:clamp(36px,5vw,64px);border-radius:32px;background:var(--metall-dunkel);color:#fff}
.ls-schluss h2{color:#fff}.ls-schluss .lead{color:#C8CED3}
.ls-schluss .knopf.licht{background:var(--flaeche-1);color:var(--tinte)}
.ls-klein{margin-top:14px;font-size:.88rem;color:var(--grau)}
.ls-stand{font-size:.82rem;color:var(--stahl);padding:0 0 40px}
@media (max-width:900px){.ls-held-raster,.ls-fragen-raster{grid-template-columns:1fr}.ls-fakten{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ls-fakten{grid-template-columns:1fr}}

/* ===== SEO und GEO: Signature „Röntgenblick“ ===== */
.sg-raster{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center}
.sg-roentgen h2 em,.sg-was h2 em,.sg-werkzeuge h2 em,.sg-tabelle h2 em,.sg-selbst h2 em,.sg-ablauf h2 em{font-style:normal;color:var(--akzent-text)}
.sg-schritte{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.sg-schritte li{display:grid;gap:4px;padding:16px 18px;border-radius:16px;border:1px solid var(--rand-linie);background:var(--flaeche-1);transition:opacity .35s,border-color .35s,box-shadow .35s}
.sg-schritte b{font-family:var(--titel);font-size:1.05rem;color:var(--tinte)}
.sg-schritte span{color:var(--grau);font-size:.97rem}
.sg-fenster{position:relative;border-radius:22px;background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 30px 80px rgb(var(--schatten-rgb) / .12);overflow:hidden}
.sg-leiste{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--rand-linie);background:var(--grund)}
.sg-leiste i{width:9px;height:9px;border-radius:50%;background:var(--silber)}
.sg-leiste span{margin-left:10px;font-size:.8rem;color:var(--grau)}
.sg-lagen{position:relative;min-height:340px}
.sg-lage{padding:28px}
.sg-mensch .sg-m-bild{height:120px;border-radius:14px;background:linear-gradient(120deg,#dfe6ee,#f6f8fa 60%,#e4e9ee);background:linear-gradient(120deg,light-dark(#dfe6ee,#23282D),light-dark(#f6f8fa,#0E1012) 60%,light-dark(#e4e9ee,#23282D))}
.sg-m-titel{margin-top:18px;font:760 1.6rem/1.1 var(--titel);color:var(--tinte)}
.sg-m-text{margin-top:8px;color:var(--grau)}
.sg-m-knopf{display:inline-block;margin-top:16px;padding:10px 18px;border-radius:999px;background:var(--graphit);color:#fff;font-size:.88rem}
.sg-google{background:#101418;color:#B9C3CC;display:grid;gap:10px;align-content:start}
.sg-google code{font:500 .9rem/1.45 ui-monospace,Menlo,monospace;white-space:pre-wrap}
.sg-google b{color:#7FA4FF;font-weight:600}
.sg-ki{background:linear-gradient(160deg,#fff,#F3F6FC);background:linear-gradient(160deg,light-dark(#fff,#1A1E22),light-dark(#F3F6FC,#0E1012));display:grid;gap:14px;align-content:start}
.sg-frage{justify-self:end;max-width:85%;padding:12px 16px;border-radius:16px 16px 4px 16px;background:var(--graphit);color:#fff;font-size:.95rem}
.sg-antwort{max-width:90%;padding:14px 16px;border-radius:16px 16px 16px 4px;background:var(--flaeche-1);border:1px solid var(--rand-linie);color:var(--text)}
.sg-antwort sup,.sg-quelle sup{color:var(--akzent-text);font-weight:700}
.sg-quelle{font-size:.82rem;color:var(--akzent-text)}
.sg-hinweis{padding:10px 16px;font-size:.75rem;color:var(--stahl);border-top:1px solid var(--rand-linie)}
/* Ohne Effekt (Handy, reduzierte Bewegung): die drei Lesarten stehen untereinander */
.sg-lage+.sg-lage{border-top:1px solid var(--rand-linie)}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .js .sg-roentgen{height:260vh;padding:0}
  .js .sg-buehne{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
  .js .sg-lagen{height:380px}
  .js .sg-lage{position:absolute;inset:0;border:0!important}
  .js .sg-google{clip-path:inset(0 calc((1 - var(--p1,0)) * 100%) 0 0)}
  .js .sg-ki{clip-path:inset(0 calc((1 - var(--p2,0)) * 100%) 0 0)}
  .js .sg-lagen::after{content:"";position:absolute;top:0;bottom:0;width:2px;left:calc(var(--scan,0) * 100%);background:var(--akzent-flaeche);box-shadow:0 0 18px 4px rgba(43,79,176,.45);opacity:var(--scan-an,0);pointer-events:none}
  .js .sg-schritte li{opacity:.38}
  .js .sg-schritte li.an{opacity:1;border-color:var(--licht);box-shadow:0 12px 30px rgba(43,79,176,.12)}
}
.sg-was-kopf{max-width:760px}.sg-zweit{margin-top:clamp(56px,7vw,90px)}
.sg-kacheln{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sg-kacheln.sg-drei{grid-template-columns:repeat(3,1fr)}
.sg-kacheln li{display:grid;gap:8px;align-content:start;padding:24px;border-radius:20px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.sg-kacheln b{font-family:var(--titel);font-size:1.08rem;color:var(--tinte)}
.sg-kacheln span{color:var(--grau);font-size:.96rem}
.sg-wz-raster{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.sg-wz{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--rand-linie)}
.sg-wz li{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--rand-linie)}
.sg-wz b{font-family:var(--titel);color:var(--tinte)}.sg-wz span{color:var(--grau)}.sg-wz a{color:var(--akzent-text)}
.sg-tab-huelle{margin-top:28px;overflow-x:auto;border-radius:20px;border:1px solid var(--rand-linie);background:var(--flaeche-1)}
.sg-tabelle table{width:100%;border-collapse:collapse;min-width:560px}
.sg-tabelle th,.sg-tabelle td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--rand-linie)}
.sg-tabelle thead th{font:700 .95rem/1.2 var(--titel);color:var(--tinte);background:var(--grund)}
.sg-tabelle thead small{font:500 .82rem var(--lauf);color:var(--grau)}
.sg-tabelle tbody th{font-weight:500;color:var(--text)}
.sg-tabelle tbody tr:last-child>*{border-bottom:0}
.sg-ja{color:var(--akzent-text);font-weight:700}.sg-nein{color:var(--stahl)}
.sg-selbst-raster{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:end}
.sg-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sg-zahlen div{padding:24px;border-radius:20px;background:var(--flaeche-1);border:1px solid var(--rand-linie);display:grid;gap:10px}
.sg-zahlen b{font:760 clamp(2.4rem,4vw,3.4rem)/1 var(--titel);color:var(--akzent-text)}
.sg-zahlen span{color:var(--grau);font-size:.94rem}
.sg-folge{grid-column:1/-1;font:600 1.1rem/1.4 var(--titel);color:var(--tinte)}
.sg-ablauf-liste{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:sg}
.sg-ablauf-liste li{position:relative;padding:56px 22px 24px;border-radius:20px;background:var(--flaeche-1);border:1px solid var(--rand-linie);display:grid;gap:8px;counter-increment:sg}
.sg-ablauf-liste li::before{content:counter(sg,decimal-leading-zero);position:absolute;top:20px;left:22px;font:700 .8rem var(--lauf);letter-spacing:.12em;color:var(--akzent-text)}
.sg-ablauf-liste b{font-family:var(--titel);color:var(--tinte)}.sg-ablauf-liste span{color:var(--grau);font-size:.95rem}
@media (max-width:1023px){.sg-raster,.sg-wz-raster,.sg-selbst-raster{grid-template-columns:1fr}.sg-kacheln,.sg-kacheln.sg-drei,.sg-ablauf-liste{grid-template-columns:1fr 1fr}.sg-zahlen{grid-template-columns:1fr}}
@media (max-width:560px){.sg-kacheln,.sg-kacheln.sg-drei,.sg-ablauf-liste{grid-template-columns:1fr}.sg-wz li{grid-template-columns:1fr;gap:6px}}
.sg-was,.sg-tabelle,.sg-ablauf{background:var(--flaeche-1)}
.sg-was .sg-kacheln li,.sg-ablauf-liste li{background:var(--grund)}
.sg-was,.sg-werkzeuge,.sg-tabelle,.sg-selbst,.sg-ablauf{padding:clamp(70px,9vw,120px) 0}

/* ===== Ervin 07.10.2026: nichts, was nach KI-Vorlage aussieht ===== */
/* keine Aufzählungsnummern */
.bn-punkte li::before,.sg-ablauf-liste li::before{content:none!important}
.sg-ablauf-liste li{padding-top:24px}
.kf-wege li::before{content:none!important}.kf-wege li{padding-left:18px}
.film-kapitel a{grid-template-columns:1fr auto!important}
/* keine Großbuchstaben-Zeile mit Strich über jeder Überschrift */
.marke-zeile:has(+ h1),.marke-zeile:has(+ h2),.marke-zeile:has(+ .s-titel){display:none}
.marke-zeile{text-transform:none;letter-spacing:.01em;font-size:.9rem;font-weight:600}
.marke-zeile::before{display:none!important}
/* keine zweifarbigen Überschriften */
h1 em,h2 em,h3 em,.s-titel em,.zz-titel em{color:inherit!important;-webkit-text-fill-color:currentColor!important;background:none!important;font-style:normal}
/* kein leuchtender Punkt in Knöpfen und Etiketten */
.knopf i,.kopf-knopf i{display:none!important}
.kc-marke i{display:none}
.kc-marke{text-transform:none;letter-spacing:.01em}
/* keine Kennzahlen-Leiste im Startbild */
.zz-leiste{display:none!important}
.bn-punkte li{grid-template-columns:1fr!important}

/* ===== Startbild: Laptop klappt beim Scrollen auf (Ervin 07.10.2026, Film mit Higgsfield) ===== */
.lh{position:relative;height:340vh;background:#E9EBEF;background:light-dark(#E9EBEF,#23282D)}
.lh-buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.lh-film{position:absolute;left:50%;top:50%;width:max(100vw,179.18vh);aspect-ratio:1928/1076;transform:translate(-50%,-50%)}
.lh-poster,.lh-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lh-video{opacity:0;transition:opacity .4s}.lh-video.bereit{opacity:1}
/* Bildschirm im letzten Filmbild: links 16,8 %, oben 13,5 %, Breite 69,3 %, Höhe 78,5 % */
.lh-schirm{position:absolute;overflow:hidden;opacity:0;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.lh-schirm img{width:100%;height:100%;object-fit:fill}
.lh-text{position:absolute;left:0;right:0;top:calc(var(--kopf) + clamp(28px,6vh,72px));text-align:center;will-change:opacity,transform}
.lh-titel{font:800 clamp(2.6rem,6.4vw,6.2rem)/.98 var(--titel);letter-spacing:-.04em;color:var(--tinte)}
.lh-titel span{display:block;font:italic 600 clamp(2rem,4.6vw,4.4rem)/1.05 "Bodoni Moda",Georgia,serif;letter-spacing:-.01em;margin-top:.12em;color:var(--tinte-2)}
.lh-lead{max-width:56ch;margin:22px auto 0;color:var(--grau);font-size:1.08rem}
.lh-knoepfe{justify-content:center;margin-top:26px}
.lh-schirmtext{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:.85rem;color:var(--grau);opacity:0;background:rgb(var(--flaeche-1-rgb) / .8);padding:6px 14px;border-radius:999px}
@media (max-width:767px){
  .lh{height:280vh}
  .lh-film{width:165vw;top:auto;bottom:4vh;transform:translateX(-50%)}
  .lh-text{top:calc(var(--kopf) + 20px)}
  .lh-lead{font-size:1rem;padding:0 4px}
}
@media (prefers-reduced-motion:reduce){.lh{height:auto}.lh-buehne{position:relative;height:auto;min-height:100svh}}
@media (max-width:767px){
  .lh-film{bottom:0}
  .lh-film::after{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(#E9EBEF,rgba(233,235,239,0));background:linear-gradient(light-dark(#E9EBEF,#23282D),rgba(233,235,239,0));pointer-events:none}
  .lh-schirm{z-index:1}
}

/* Startseite: Referenzen als Karten mit echtem Screenshot (07.10.2026) */
.rs-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.rs-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rs-karte{display:grid;gap:14px;text-decoration:none;color:inherit}
.rs-bild{display:block;border-radius:16px;overflow:hidden;background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 18px 50px rgb(var(--schatten-rgb) / .08);transition:transform .35s,box-shadow .35s}
.rs-bild .mk-leiste{display:flex;align-items:center;gap:5px;padding:9px 12px;background:var(--grund);border-bottom:1px solid var(--rand-linie)}
.rs-bild .mk-leiste i{width:7px;height:7px;border-radius:50%;background:var(--silber)}
.rs-bild .mk-leiste span{margin-left:8px;font-size:.74rem;color:var(--grau)}
.rs-bild img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.rs-text{display:grid;gap:2px;padding:0 2px}
.rs-text b{font:700 1.08rem/1.25 var(--titel);color:var(--tinte)}
.rs-text em{font-style:normal;color:var(--grau);font-size:.92rem}
@media (min-width:1024px){.rs-karte:hover .rs-bild{transform:translateY(-4px);box-shadow:0 26px 60px rgb(var(--schatten-rgb) / .14)}}
@media (max-width:900px){.rs-raster{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rs-raster{grid-template-columns:1fr}}
/* Bildschirm im Startbild: echte Knöpfe der Live-Seite klickbar, Lichtreflex wandert beim Scrollen */
.lh-schirm{pointer-events:none;box-shadow:0 0 60px rgba(47,107,255,.18),inset 0 0 0 1px rgba(0,0,0,.4)}
.lh-schirm img{image-rendering:auto}
.lh-hot{position:absolute;border-radius:10px;font-size:0;color:transparent;transition:box-shadow .3s,background .3s}
.lh-hot:hover,.lh-hot:focus-visible{background:rgba(255,255,255,.06);box-shadow:0 0 0 2px rgba(160,170,255,.7),0 0 28px rgba(140,150,255,.55)}
.lh-glanz{position:absolute;inset:-20%;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.10) 48%,rgba(255,255,255,.02) 54%,transparent 62%);transform:translateX(calc((var(--glanz,0) * 80% - 40%)));mix-blend-mode:screen}

/* ===== Startbild v3: Laptop im Code gebaut, echte 3D-Bewegung, gestochen scharf (07.10.2026) ===== */
.lh{height:360vh;background:#F4F5F7;background:light-dark(#F4F5F7,#0E1012)}
.lh-buehne{background:radial-gradient(120% 80% at 50% 38%,#FFFFFF 0%,#F6F7F9 46%,#E8EBEF 100%);background:radial-gradient(120% 80% at 50% 38%,light-dark(#FFFFFF,#1A1E22) 0%,light-dark(#F6F7F9,#0E1012) 46%,light-dark(#E8EBEF,#23282D) 100%)}
.lh-film,.lh-schirmtext{display:none}
.lh-studio{position:absolute;inset:0;pointer-events:none}
.lh-linie{position:absolute;left:0;right:0;top:71%;height:1px;background:#2F6BFF;box-shadow:0 0 10px 1px rgba(47,107,255,.45);opacity:.55}
.lh-raum{position:absolute;inset:0;perspective:2400px;perspective-origin:50% 22%;pointer-events:none}
.lh-geraet{--b:min(62vw,960px);--deckel:-90deg;--neigung:24deg;--zoom:1;--hoch:0;
  position:absolute;left:50%;top:calc(70% - var(--hoch) * 20%);width:var(--b);aspect-ratio:1.52;
  transform-style:preserve-3d;transform-origin:50% 49.7%;
  transform:translate(-50%,-49.7%) scale(var(--zoom)) rotateX(var(--neigung));will-change:transform}
.lh-deckel{position:absolute;inset:0;transform-origin:50% 100%;transform:rotateX(var(--deckel));transform-style:preserve-3d}
.lh-vorne,.lh-hinten{position:absolute;inset:0;border-radius:2.4% / 3.6%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lh-vorne{background:linear-gradient(180deg,#121417,#0A0B0D);box-shadow:inset 0 0 0 1.5px #3A3F45,inset 0 0 0 3px #0A0B0D}
.lh-kamera{position:absolute;left:50%;top:1.6%;width:.55%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 40% 40%,#3B4652,#0E1114 70%)}
.lh-schirm{position:absolute;left:2.5%;top:4.56%;width:95%;height:90.3%;overflow:hidden;opacity:1;border-radius:.6%;background:#0B1020;pointer-events:none;box-shadow:none}
.lh-schirm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lh-aus{position:absolute;inset:0;background:#07080A;opacity:calc(1 - var(--an,0));pointer-events:none}
.lh-hinten{transform:rotateY(180deg);background:
  linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 30%),
  linear-gradient(90deg,#C9CED3 0%,#E3E6E9 22%,#D6DADE 50%,#E6E9EC 78%,#C6CBD0 100%);background:
  linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 30%),
  linear-gradient(90deg,light-dark(#C9CED3,#23282D) 0%,light-dark(#E3E6E9,#23282D) 22%,light-dark(#D6DADE,#23282D) 50%,light-dark(#E6E9EC,#23282D) 78%,#C6CBD0 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -2px 6px rgba(0,0,0,.08)}
.lh-logo{position:absolute;left:50%;top:50%;width:8.5%;aspect-ratio:852/900;transform:translate(-50%,-50%);
  -webkit-mask:url(/images/animacontent/uhrwerk/bilder/marke-tinte.webp) center/contain no-repeat;mask:url(/images/animacontent/uhrwerk/bilder/marke-tinte.webp) center/contain no-repeat;
  background:linear-gradient(135deg,#F9FAFB 0%,#9AA3AB 38%,#FFFFFF 52%,#8E979F 70%,#E9ECEF 100%);background:linear-gradient(135deg,light-dark(#F9FAFB,#0E1012) 0%,#9AA3AB 38%,light-dark(#FFFFFF,#1A1E22) 52%,#8E979F 70%,light-dark(#E9ECEF,#23282D) 100%)}
.lh-deck{position:absolute;left:0;width:100%;top:100%;height:100%;transform-origin:50% 0;transform:rotateX(90deg) translateZ(-2px);
  border-radius:0 0 3.4% 3.4% / 0 0 5% 5%;transform-style:preserve-3d;
  background:linear-gradient(180deg,#D2D6DA 0%,#E2E5E8 40%,#D9DDE1 100%);background:linear-gradient(180deg,light-dark(#D2D6DA,#23282D) 0%,light-dark(#E2E5E8,#23282D) 40%,light-dark(#D9DDE1,#23282D) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 40px 90px rgb(var(--schatten-rgb) / .22),0 8px 22px rgb(var(--schatten-rgb) / .14)}
.lh-tasten{position:absolute;left:12%;right:12%;top:7%;height:44%;border-radius:1.6%;
  background:
   repeating-linear-gradient(90deg,transparent 0 calc(6.25% - 2px),#C5CAD0 calc(6.25% - 2px) 6.25%),
   repeating-linear-gradient(180deg,transparent 0 calc(16.66% - 2px),#C5CAD0 calc(16.66% - 2px) 16.66%),
   linear-gradient(#202326,#16181B);
  box-shadow:inset 0 0 0 2px #C5CAD0}
.lh-pad{position:absolute;left:33%;right:33%;top:58%;height:34%;border-radius:4%;background:linear-gradient(180deg,#D9DCE0,#CFD3D7);background:linear-gradient(180deg,light-dark(#D9DCE0,#23282D),light-dark(#CFD3D7,#23282D));box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.lh-kante{position:absolute;left:0;right:0;top:100%;height:3.2%;transform-origin:50% 0;transform:rotateX(-90deg);
  background:linear-gradient(180deg,#BFC4C9,#9EA4AA);border-radius:0 0 40% 40% / 0 0 100% 100%}
.lh-kante::after{content:"";position:absolute;left:44%;right:44%;top:0;height:55%;border-radius:0 0 40% 40%;background:#8D9399}
@media (max-width:767px){
  .lh{height:300vh}
  .lh-geraet{--b:86vw;top:calc(74% - var(--hoch) * 24%)}
  .lh-linie{top:76%}
}
.lh-geraet{--b:min(50vw,780px);top:calc((76% - var(--b) * .331) * (1 - var(--hoch)) + 50% * var(--hoch))}
.lh-linie{top:76%}
@media (max-width:767px){.lh-geraet{--b:84vw;top:calc((70% - var(--b) * .331) * (1 - var(--hoch)) + 50% * var(--hoch))}.lh-linie{top:70%}}
.lh-hinten{transform:rotateX(180deg)}
.lh-geraet{--b:min(44vw,700px);top:calc((60% - var(--b) * .331) * (1 - var(--hoch)) + 50% * var(--hoch))}
.lh-linie{top:60%}
.lh-tasten{left:10%;right:10%;top:6%;height:46%;border-radius:1.2%;box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
  background:#B7BCC2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='2.5' y='2.5' width='35' height='35' rx='5' fill='%231c1f22'/%3E%3Crect x='2.5' y='2.5' width='35' height='14' rx='5' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E") 0 0/6.25% 16.666% repeat}
@media (max-width:767px){.lh-geraet{--b:80vw;top:calc((58% - var(--b) * .331) * (1 - var(--hoch)) + 50% * var(--hoch))}.lh-linie{top:58%}}
.lh-geraet{will-change:auto}

/* ===== Startbild nach Doc-Market-Muster: ein MacBook, Kamerafahrt beim Scrollen (08.10.2026) ===== */
.lh,.lh-buehne{display:none}
.mbh{position:relative;height:340vh;background:#E3E4E7;background:light-dark(#E3E4E7,#23282D)}
.mbh-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(180deg,#F1F2F4 0%,#E8E9EC 55%,#E0E1E4 100%);background:linear-gradient(180deg,light-dark(#F1F2F4,#0E1012) 0%,light-dark(#E8E9EC,#23282D) 55%,light-dark(#E0E1E4,#23282D) 100%)}
.mbh-film{position:absolute;inset:0}
.mbh-poster,.mbh-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mbh-video{opacity:0;transition:opacity .35s}.mbh-video.bereit{opacity:1}
.mbh-schirm{position:absolute;overflow:hidden;opacity:0;border-radius:4px 4px 1px 1px;pointer-events:none;background:#0B1020}
.mbh-schirm > img{width:100%;height:100%;object-fit:cover;object-position:top}
.mbh-text{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;width:min(30vw,420px);pointer-events:none;will-change:opacity,transform}
.mbh-a{right:max(32px,calc((100vw - var(--breite)) / 2));pointer-events:auto}
.mbh-b{left:max(32px,calc((100vw - var(--breite)) / 2));opacity:0}
.mbh-c{right:max(32px,calc((100vw - var(--breite)) / 2));opacity:0}
.mbh-ueber{font:600 .9rem var(--lauf);color:var(--grau);margin-bottom:16px}
.mbh-titel{font:800 clamp(2.4rem,4.2vw,4.4rem)/.98 var(--titel);letter-spacing:-.04em;color:var(--tinte)}
.mbh-titel span{display:block;margin-top:.14em;font:italic 600 .78em/1.05 "Bodoni Moda",Georgia,serif;letter-spacing:-.01em;color:var(--tinte-2)}
.mbh-lead{margin-top:18px;color:#4B535B;color:light-dark(#4B535B,#9AA3AA);font-size:1.02rem;max-width:38ch}
.mbh-a .held-reihe{margin-top:24px;flex-wrap:wrap}
.mbh-gross{font:760 clamp(2rem,3.4vw,3.6rem)/1.02 var(--titel);letter-spacing:-.035em;color:var(--tinte)}
.mbh-hinweis{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);transition:opacity .3s}
.mbh-hinweis span{display:block;width:24px;height:38px;border:2px solid #A9AEB3;border-radius:14px;position:relative}
.mbh-hinweis span::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--graphit);animation:mbh-rad 1.6s infinite}
@keyframes mbh-rad{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (max-width:767px){
  .mbh{height:290vh}
  .mbh-film{top:auto;bottom:6vh;height:auto;aspect-ratio:1600/893}
  .mbh-poster,.mbh-video{object-fit:contain}
  .mbh-text{left:20px;right:20px;width:auto;justify-content:flex-start;padding-top:calc(var(--kopf) + 22px)}
  .mbh-titel{font-size:clamp(2rem,9.6vw,2.8rem)}
  .mbh-gross{font-size:clamp(1.9rem,8.6vw,2.6rem)}
}
@media (prefers-reduced-motion:reduce){.mbh{height:auto}.mbh-kulisse{position:relative;min-height:100svh}}
@media (min-width:768px){
  .mbh-kulisse{background:linear-gradient(180deg,#F1F2F4 0%,#E8E9EC 55%,#E0E1E4 100%);background:linear-gradient(180deg,light-dark(#F1F2F4,#0E1012) 0%,light-dark(#E8E9EC,#23282D) 55%,light-dark(#E0E1E4,#23282D) 100%)}
  .mbh-film{transform:translateX(var(--vx,0));-webkit-mask-image:linear-gradient(to left,transparent 0,#000 9%);mask-image:linear-gradient(to left,transparent 0,#000 9%)}
  .mbh-a{width:min(28vw,400px)}
  .mbh-b,.mbh-c{left:max(28px,calc((100vw - var(--breite)) / 2));right:auto;width:calc(18vw - 20px)}
  .mbh-gross{font-size:clamp(1.5rem,2vw,2.3rem)}
}
@media (max-width:767px){
  .mbh-kulisse{background:#D6D9E1;background:light-dark(#D6D9E1,#23282D)}
  .mbh-film{left:-12.5%;right:auto;width:125%;bottom:4vh;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
}

/* ===== Display: echter Startbereich der Live-Seite (Code aus AnimaContentHeroSSR.tsx), 1440×900, aufs Display gespannt ===== */
@font-face{font-family:"Manrope";font-weight:300;font-display:swap;src:url(/fonts/animacontent/uhrwerk/schrift/manrope-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url(/fonts/animacontent/uhrwerk/schrift/manrope-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(/fonts/animacontent/uhrwerk/schrift/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
.mbh-schirm{background:#070A12}
.ld{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;overflow:hidden;background:linear-gradient(to bottom right,#070A12,#0a0d15,#070A12);color:#fff;font-family:"Manrope",system-ui,sans-serif}
.ld-blob{position:absolute;border-radius:40% 60% 70% 30%/40% 50% 60% 50%;filter:blur(60px);opacity:.4;mix-blend-mode:screen}
.ld-b1{width:600px;height:600px;top:-10%;left:-10%;background:radial-gradient(circle at 30% 50%,rgba(142,142,208,.4) 0%,rgba(167,180,255,.3) 30%,rgba(142,142,208,.2) 60%,transparent 100%);animation:ldB1 40s ease-in-out infinite}
.ld-b2{width:700px;height:700px;top:-5%;right:-10%;background:radial-gradient(circle at 70% 50%,rgba(167,180,255,.35) 0%,rgba(142,142,208,.25) 30%,rgba(167,180,255,.15) 60%,transparent 100%);animation:ldB2 50s ease-in-out infinite}
.ld-b3{width:500px;height:500px;bottom:-5%;left:10%;background:radial-gradient(circle,rgba(142,142,208,.35) 0%,rgba(167,180,255,.2) 40%,transparent 100%);animation:ldB3 45s ease-in-out infinite}
.ld-b4{width:550px;height:550px;bottom:10%;right:5%;background:radial-gradient(circle at 60% 40%,rgba(167,180,255,.3) 0%,rgba(142,142,208,.18) 50%,transparent 100%);animation:ldB4 55s ease-in-out infinite}
@keyframes ldB1{0%,100%{transform:translate(0,0) scale(1) rotate(0)}50%{transform:translate(20px,-15px) scale(1.04) rotate(45deg)}}
@keyframes ldB2{0%,100%{transform:translate(0,0) scale(1) rotate(0)}50%{transform:translate(-15px,20px) scale(1.06) rotate(-30deg)}}
@keyframes ldB3{0%,100%{transform:translate(0,0) scale(1) rotate(0)}50%{transform:translate(15px,15px) scale(.96) rotate(25deg)}}
@keyframes ldB4{0%,100%{transform:translate(0,0) scale(1) rotate(0)}50%{transform:translate(-20px,10px) scale(1.03) rotate(-20deg)}}
.ld-schach{position:absolute;inset:0;opacity:.32}
.ld-schach img{position:absolute;height:auto}
.ld-schach .king{width:173px;top:8%;left:4%;transform:rotate(10deg)}
.ld-schach .bishop{width:130px;top:44%;left:1%;transform:rotate(-5deg)}
.ld-schach .rook{width:187px;bottom:18%;left:6%;transform:rotate(-12deg)}
.ld-schach .queen{width:173px;top:8%;right:4%;transform:rotate(-10deg)}
.ld-schach .knight-l{width:140px;top:38%;right:8%;transform:rotate(5deg)}
.ld-schach .knight-r{width:266px;bottom:18%;right:-5.5%;transform:rotate(5deg)}
.ld-dunkel{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(7,10,18,.5),#070A12)}
.ld-kopf{position:absolute;left:0;right:0;top:0;height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 104px}
.ld-logo{height:48px;width:auto}
.ld-icons{display:flex;gap:12px}.ld-icons i{width:44px;height:44px;display:grid;place-items:center;border-radius:8px}.ld-icons svg{width:20px;height:20px}
.ld-inhalt{position:absolute;left:0;right:0;top:50%;transform:translateY(-46%);text-align:center;padding:0 40px}
.ld-kicker{font:400 10.4px "JetBrains Mono",monospace;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 28px}
.ld-h1{font:300 95px/.95 "Manrope",sans-serif;letter-spacing:-.02em;margin:0 0 28px}
.ld-verlauf{display:inline-block;margin-top:.25em;font:italic 600 1.05em "Bodoni Moda",Georgia,serif;padding:0 .1em 0 .15em;background:linear-gradient(92deg,#8E8ED0,#A7B4FF,#8E8ED0,#A7B4FF);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ldVerlauf 4s ease-in-out infinite}
@keyframes ldVerlauf{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.ld-linie{width:480px;height:1px;margin:0 auto 28px;background:linear-gradient(to right,transparent,rgba(167,180,255,.9),transparent)}
.ld-sub{max-width:736px;margin:0 auto 36px;font-size:17.6px;line-height:1.7;color:rgba(255,255,255,.65)}
.ld-sub strong{color:#fff;font-weight:600}
.ld-ctas{display:flex;justify-content:center;gap:18px;margin-bottom:52px}
.ld-ghost,.ld-primary{height:52px;padding:0 36px;display:inline-flex;align-items:center;border-radius:8px;font:600 15.2px "Manrope",sans-serif;text-decoration:none;position:relative;overflow:hidden;isolation:isolate}
.ld-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(167,180,255,.15);color:#fff}
.ld-primary{background:linear-gradient(to bottom right,#A7B4FF,#8E8ED0);color:#070A12;color:light-dark(#070A12,#F3F5F6)}
.ld-ghost span,.ld-primary span{position:relative;z-index:1}
.ld-ghost::after,.ld-primary::after{content:"";position:absolute;top:0;left:0;height:100%;width:36%;transform:translateX(-220%);opacity:0;background:linear-gradient(90deg,transparent,rgba(167,180,255,.25),transparent);animation:ldSweep 5.5s cubic-bezier(.4,0,.2,1) 1.8s infinite}
.ld-primary::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation-delay:4.2s}
@keyframes ldSweep{0%{transform:translateX(-220%);opacity:0}5%{opacity:.85}30%{opacity:.85}40%{transform:translateX(320%);opacity:0}100%{transform:translateX(-220%);opacity:0}}
.ld-ghost:hover,.ld-primary:hover{box-shadow:0 0 0 1px rgba(167,180,255,.6),0 0 30px rgba(167,180,255,.45)}
.ld-stats{display:flex;justify-content:center;gap:32px;font:400 10.4px "JetBrains Mono",monospace;letter-spacing:.44em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.ld-stats b{color:#fff;font-weight:600}
.ld-glas{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.04) 100%)}
.ld .ld-logo{width:auto;height:48px}
.ld-inhalt{transform:translateY(-54%)}
.ld-verlauf{margin-top:.08em}
.ld-seo{max-width:540px;margin:-20px auto 32px;font-size:12.8px;line-height:1.8;color:rgba(255,255,255,.5)}
.ld-stats span{position:relative}
.ld-stats span:not(:last-child)::after{content:"";position:absolute;right:-18px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:linear-gradient(135deg,#A7B4FF,#8E8ED0);box-shadow:0 0 8px rgba(167,180,255,.7)}

/* Terminseite: Buchen sofort sichtbar (Ervin 08.10.2026) */
.tm-held{padding:calc(var(--kopf) + clamp(28px,4vw,56px)) 0 clamp(48px,6vw,80px);scroll-margin-top:0}
.tm-held-raster{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,72px);align-items:start}
.tm-held .kf-titel{font-size:clamp(2.4rem,4.6vw,4.4rem)}
.tm-frage{margin-top:26px;padding:22px 24px;border-radius:20px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.tm-f{font:700 1.08rem/1.3 var(--titel);color:var(--tinte)}
.tm-a{margin-top:8px;color:var(--grau)}
.tm-wege-info{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.tm-wege-info li{color:var(--grau);padding-left:18px;position:relative}
.tm-wege-info li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--akzent-flaeche)}
.tm-wege-info b{color:var(--tinte)}
.tm-tel{margin-top:22px;color:var(--grau)}.tm-tel a{color:var(--tinte);font-weight:600}
.tm-oben{position:sticky;top:calc(var(--kopf) + 16px)}
.tm-schritt{font:700 .95rem var(--titel);color:var(--tinte);margin:18px 0 10px}.tm-schritt:first-child{margin-top:0}
.tm-wege{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tm-weg{position:relative;cursor:pointer}
.tm-weg input{position:absolute;opacity:0}
.tm-weg span{display:grid;gap:4px;height:100%;padding:14px;border-radius:14px;border:1px solid var(--rand-linie);background:var(--flaeche-1);transition:border-color .2s,box-shadow .2s}
.tm-weg b{font-size:.92rem;color:var(--tinte)}.tm-weg small{font-size:.78rem;color:var(--grau);line-height:1.35}
.tm-weg input:checked+span{border-color:var(--licht);box-shadow:0 0 0 2px rgba(43,79,176,.18)}
.tm-weg input:focus-visible+span{outline:2px solid var(--licht);outline-offset:2px}
@media (max-width:900px){.tm-held-raster{grid-template-columns:1fr}.tm-oben{position:static;order:-1}.tm-held-text{order:-2}.tm-wege-info,.tm-tel{display:none}}
@media (max-width:560px){.tm-wege{grid-template-columns:1fr}}
/* Karten ohne Bild (Städte, und wenn ein Bild in der Reihe schon vorkommt) */
.kachel-ohne{background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:22px;padding:28px 26px;min-height:220px;display:flex}
.kachel-ohne .kachel-text{padding:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.kachel-ohne b{font-size:1.45rem}
/* 4K-Film: Seitenverhältnis 2560×1426; Aussparung der Kamera wie beim echten MacBook (vermessen: 10,4 % breit, 2,9 % hoch) */
@media (max-width:767px){.mbh-film{aspect-ratio:2560/1426}}
.ld-notch{position:absolute;left:50%;top:0;width:10.4%;height:2.9%;transform:translateX(-50%);background:#050506;border-radius:0 0 12px 12px;z-index:5}
.mbh-schirm{border-radius:0;background:#05070D;transition:none}
/* Startbild: Studio-Verlauf über dem Film (folgt dem MacBook), Startlage ohne Sprung */
.mbh-nebel{position:absolute;inset:0;pointer-events:none}
@media (min-width:768px){.mbh-film{--vx:-24vw}}
.mbh-kulisse{background:#D6D9E1;background:light-dark(#D6D9E1,#23282D)}

/* ===== Startbild leicht gemacht (08.10.2026, Blinken): keine Unschärfe-Filter und Mischmodi auf dem Display ===== */
.mbh-schirm{will-change:transform;backface-visibility:hidden;contain:strict}
.ld-blob{filter:none!important;mix-blend-mode:normal!important;animation:none!important;opacity:.55}
.ld-b1{background:radial-gradient(circle at 50% 50%,rgba(142,142,208,.28),transparent 70%)}
.ld-b2{background:radial-gradient(circle at 50% 50%,rgba(167,180,255,.24),transparent 70%)}
.ld-b3{background:radial-gradient(circle at 50% 50%,rgba(142,142,208,.22),transparent 70%)}
.ld-b4{background:radial-gradient(circle at 50% 50%,rgba(167,180,255,.2),transparent 70%)}
.ld-ghost::after,.ld-primary::after{will-change:transform}
/* Hintergrund: ruhiges Studio statt wandernder Schatten, dazu weiches Tageslicht durch ein Fenster */
.mbh-nebel{background:radial-gradient(ellipse 34% 46% at var(--mx,50%) var(--my,58%),rgba(214,217,225,0) 62%,rgba(214,217,225,.85) 86%,#D6D9E1 100%);background:radial-gradient(ellipse 34% 46% at var(--mx,50%) var(--my,58%),rgba(214,217,225,0) 62%,rgba(214,217,225,.85) 86%,light-dark(#D6D9E1,#23282D) 100%)}
.mbh-licht{position:absolute;top:-10%;bottom:-10%;left:-10%;width:130%;pointer-events:none;will-change:transform;opacity:.75;
  background:
    linear-gradient(115deg,transparent 0 14%,rgba(255,250,238,.55) 16%,rgba(255,250,238,.0) 24%,transparent 30%,rgba(255,250,238,.42) 33%,rgba(255,250,238,0) 41%,transparent 47%,rgba(255,250,238,.34) 50%,rgba(255,250,238,0) 57%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 30% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 80% at 30% 40%,#000 30%,transparent 80%);mix-blend-mode:normal}
@media (max-width:767px){.mbh-licht{opacity:.5}}
.mbh-nebel{background:radial-gradient(ellipse var(--mw,34%) var(--mh,46%) at var(--mx,50%) var(--my,58%),rgba(214,217,225,0) 58%,rgba(214,217,225,.9) 82%,#D6D9E1 96%);background:radial-gradient(ellipse var(--mw,34%) var(--mh,46%) at var(--mx,50%) var(--my,58%),rgba(214,217,225,0) 58%,rgba(214,217,225,.9) 82%,light-dark(#D6D9E1,#23282D) 96%)}
/* 08.10.2026: Die Seite ist jetzt direkt in den Film eingesetzt (Bild für Bild). Die HTML-Ebene darüber ist unsichtbar
   und liefert nur noch die klickbaren Knöpfe an der richtigen Stelle. */
.mbh-schirm{background:transparent!important;box-shadow:none!important}
.mbh-schirm .ld{opacity:var(--ldsicht,0)}
.mbh-schirm .ld-ctas{opacity:1}

/* Schachfiguren im Studio (Ervin 08.10.2026, statt Schatteneffekt). Aluminium-Figuren aus bilder/schach, Bauer mit Higgsfield ergänzt. */
.mbh-figuren{position:absolute;inset:0;pointer-events:none}
.fg{position:absolute;margin:0;transform-origin:50% 100%;will-change:transform}
.fg img{display:block;height:100%;width:auto;position:relative;filter:drop-shadow(0 18px 18px rgba(30,34,48,.18))}
.fg-schatten{position:absolute;left:8%;right:8%;bottom:-3%;height:9%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(40,44,60,.42) 0%,rgba(40,44,60,.18) 45%,transparent 72%)}
.fg-dame{height:31vh;left:4%;bottom:5vh}
.fg-koenig{height:24vh;left:13%;bottom:15vh;opacity:.92}
.fg-pferd{height:29vh;right:5%;bottom:6vh}
.fg-bauer{height:19vh;right:15%;bottom:16vh;opacity:.94}
.fg-koenig img,.fg-bauer img{filter:drop-shadow(0 14px 14px rgba(30,34,48,.14)) blur(.4px)}
@media (max-width:767px){.mbh-figuren{display:none}}
.fg{opacity:0}
.fg-dame{height:28vh;left:3%;bottom:4vh}
.fg-koenig{height:21vh;left:11%;bottom:12vh}
.fg-pferd{height:26vh;right:11%;bottom:4vh}
.fg-bauer{height:16vh;right:4%;bottom:13vh}
.mbh-figuren{display:none!important}

/* 08.10.2026: MacBook rechts, Text links; längerer Scrollweg für Kamerafahrt + Zuklappen */
.mbh{height:700vh}
@media (max-width:767px){.mbh{height:560vh}}
@media (min-width:768px){
  .mbh-film{--vx:17vw;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%);mask-image:linear-gradient(to right,transparent 0,#000 9%)}
  .mbh-kulisse{background:linear-gradient(180deg,#F4F5F6 0%,#EDEEF0 50%,#E6E7EA 100%);background:linear-gradient(180deg,light-dark(#F4F5F6,#0E1012) 0%,light-dark(#EDEEF0,#0E1012) 50%,light-dark(#E6E7EA,#23282D) 100%)}
  .mbh-a{left:max(32px,calc((100vw - var(--breite)) / 2));right:auto}
  .mbh-b{right:max(28px,calc((100vw - var(--breite)) / 2));left:auto;text-align:right;align-items:flex-end}
}
.mbh{background:#EDEEF0!important;background:light-dark(#EDEEF0,#0E1012)!important}

/* ===== Sechs Leistungsseiten (08.10.2026): Scroll-Film im Kopf + eigener Effekt je Seite ===== */
.lf-held{padding:calc(var(--kopf) + clamp(36px,5vw,70px)) 0 clamp(36px,5vw,64px)}
.lf-raster{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.lf-links .lf-text{order:2}.lf-links .lf-raster{grid-template-columns:1.1fr .9fr}
.lf-voll .lf-raster{grid-template-columns:1fr}.lf-voll .lf-film{order:-1}
.lf-voll .lf-text{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,5vw,72px);align-items:end}
.lf-voll .lf-text .brot,.lf-voll .lf-text .marke-zeile{grid-column:1/-1}
.lf-voll .lf-text .s-titel{grid-column:1}.lf-voll .lf-text .ls-antwort,.lf-voll .lf-text .held-reihe{grid-column:2}
.lf-held .s-titel em{font-style:normal;color:var(--akzent-text)}
.lf-film{position:relative;margin:0;aspect-ratio:16/9;border-radius:30px;overflow:hidden;background:#F1F1F3;background:light-dark(#F1F1F3,#0E1012);box-shadow:0 40px 90px rgb(var(--schatten-rgb) / .10),0 0 0 1px rgb(var(--schatten-rgb) / .04)}
.lf-film img,.lf-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lf-film video{opacity:0;transition:opacity .4s}.lf-film video.bereit{opacity:1}
.lf-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lf-kacheln h2 em,.lf-bild h2 em,.lse h2 em,.lf-schluss h2 em{font-style:normal;color:var(--akzent-text)}
.lf-kachel-liste{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lf-vier .lf-kachel-liste{grid-template-columns:repeat(4,1fr)}
.lf-kachel-liste li{background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:24px;padding:28px 26px 30px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px rgb(var(--schatten-rgb) / .05)}
.lf-kachel-liste b{font:700 1.12rem/1.25 var(--titel);color:var(--tinte);letter-spacing:-.01em}
.lf-kachel-liste span{color:var(--grau);font-size:.98rem}
.lf-kachel-liste a{color:var(--akzent-text)}
.lf-kachel-liste li::before{content:"";width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,#F2A24A,#E8892B);margin-bottom:6px}
.lf-bild-raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.lf-geraet{margin:0;border-radius:18px;overflow:hidden;background:var(--flaeche-1);box-shadow:0 40px 90px rgb(var(--schatten-rgb) / .14),0 0 0 1px rgb(var(--schatten-rgb) / .06)}
.lf-geraet .mk-leiste{display:flex;gap:7px;padding:12px 14px;background:#F2F4F5;background:light-dark(#F2F4F5,#0E1012);border-bottom:1px solid var(--rand-linie)}
.lf-geraet .mk-leiste i{width:10px;height:10px;border-radius:50%;background:#D5DADE;background:light-dark(#D5DADE,#23282D)}
.lf-geraet img{display:block;width:100%;height:auto}
.lf-unter{margin:0;padding:10px 16px;font-size:.8rem;color:var(--stahl);background:#FAFBFB;background:light-dark(#FAFBFB,#0E1012);border-top:1px solid var(--rand-linie)}
.lpe-hinweis{margin:12px 0 0;font-size:.74rem;color:var(--stahl);text-align:center}
@media (max-width:1000px){.lf-vier .lf-kachel-liste{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.lf-raster,.lf-links .lf-raster,.lf-bild-raster{grid-template-columns:1fr}.lf-links .lf-text{order:0}.lf-film{order:-1}
  .lf-voll .lf-text{display:block}.lf-kachel-liste{grid-template-columns:1fr}.lf-vier .lf-kachel-liste{grid-template-columns:1fr}}

/* Effekt-Bühne: klebt beim Scrollen, Schritte links, Bild rechts */
.lse{padding:clamp(70px,9vw,120px) 0}
.lse-raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.lse-schritte{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.lse-schritte li{padding:4px 0 4px 20px;border-left:2px solid var(--rand-linie);transition:opacity .4s,border-color .4s;opacity:.38}
.lse-schritte li b{display:block;font:700 1.05rem/1.3 var(--titel);color:var(--tinte)}
.lse-schritte li span{color:var(--grau);font-size:.97rem}
.lse-schritte li span a{color:var(--akzent-text)}
.lse-schritte li.an{opacity:1;border-color:#E8892B;border-color:light-dark(#E8892B,#2E343A)}
.lse-bild{position:relative}
@media (min-width:901px){
  .js .lse{height:330vh;padding:0}
  .js .lse-buehne{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:var(--kopf)}
}
@media (max-width:900px){.lse-raster{grid-template-columns:1fr}.lse-schritte li{opacity:1}}

/* Landingpage: Ablenkung fällt weg */
.lpe-seite{background:var(--flaeche-1);border-radius:18px;box-shadow:0 40px 90px rgb(var(--schatten-rgb) / .14),0 0 0 1px rgb(var(--schatten-rgb) / .06);overflow:hidden;position:relative;padding-bottom:18px}
.lpe-leiste{display:flex;align-items:center;gap:7px;padding:12px 14px;background:#F2F4F5;background:light-dark(#F2F4F5,#0E1012);border-bottom:1px solid var(--rand-linie)}
.lpe-leiste i{width:10px;height:10px;border-radius:50%;background:#D5DADE;background:light-dark(#D5DADE,#23282D)}
.lpe-leiste span{margin-left:10px;font-size:.78rem;color:var(--stahl)}
.lse-weg{transition:opacity .55s ease,transform .55s ease,max-height .55s ease;transition-delay:calc(var(--n)*90ms)}
.lpe-menue{display:flex;gap:12px;align-items:center;padding:14px 20px;max-height:60px}
.lpe-menue b{width:70px;height:14px;border-radius:4px;background:#C9CED4;background:light-dark(#C9CED4,#23282D)}
.lpe-menue span{width:46px;height:8px;border-radius:4px;background:#E2E6E9;background:light-dark(#E2E6E9,#23282D)}
.lpe-banner{margin:0 20px;height:46px;max-height:46px;border-radius:10px;background:repeating-linear-gradient(135deg,#FFE6C7 0 14px,#FFF1DF 14px 28px);background:repeating-linear-gradient(135deg,light-dark(#FFE6C7,#2E2618) 0 14px,light-dark(#FFF1DF,#2E2618) 14px 28px)}
.lpe-mitte{display:grid;grid-template-columns:.6fr 2fr .7fr;gap:14px;padding:16px 20px;transition:grid-template-columns .6s ease}
.lpe-seitenleiste,.lpe-kasten{display:grid;gap:8px;align-content:start}
.lpe-seitenleiste span,.lpe-kasten span{height:34px;border-radius:8px;background:#EEF1F3;background:light-dark(#EEF1F3,#0E1012)}
.lpe-kern{padding:22px;border-radius:14px;background:linear-gradient(160deg,#F7F8F9,#EEF1F4);background:linear-gradient(160deg,light-dark(#F7F8F9,#0E1012),light-dark(#EEF1F4,#0E1012));text-align:center;transition:transform .6s ease,box-shadow .6s ease}
.lpe-titel{margin:0;font:800 1.35rem/1.15 var(--titel);color:var(--tinte)}
.lpe-satz{margin:8px 0 14px;color:var(--grau);font-size:.92rem}
.lpe-form{display:grid;gap:8px;max-width:260px;margin:0 auto}
.lpe-form span{display:block;text-align:left;padding:9px 12px;border-radius:9px;background:var(--flaeche-1);border:1px solid var(--rand-linie);font-size:.82rem;color:var(--stahl)}
.lpe-form b{padding:11px;border-radius:999px;background:var(--graphit);color:#fff;font-size:.86rem;transition:background .5s,box-shadow .5s}
.lpe-popup{position:absolute;right:22px;bottom:56px;padding:12px 16px;border-radius:12px;background:var(--graphit);color:#fff;font-size:.82rem;box-shadow:0 14px 30px rgba(0,0,0,.25)}
.lpe-popup b{margin-left:10px;opacity:.6}
.lse-lp.ab-2 .lse-weg{opacity:0;transform:translateY(-10px) scale(.96)}
.lse-lp.ab-2 .lpe-menue,.lse-lp.ab-2 .lpe-banner{max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}
.lse-lp.ab-2 .lpe-mitte{grid-template-columns:0fr 1fr 0fr;gap:0}
.lse-lp.ab-2 .lpe-kern{transform:scale(1.03);box-shadow:0 20px 50px rgba(232,137,43,.18)}
.lse-lp.ab-3 .lpe-form b{background:#E8892B;color:#16191C;box-shadow:0 0 0 6px rgba(232,137,43,.18)}
.lse-lp .lpe-kern::after{content:"Anfrage eingegangen: Name, Telefon, Anzeige „Küche Mülheim“";display:block;margin:14px auto 0;max-width:280px;padding:10px 12px;border-radius:10px;background:var(--flaeche-1);border:1px solid var(--rand-linie);font-size:.76rem;color:var(--grau);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.lse-lp.ab-4 .lpe-kern::after{opacity:1;transform:none}

/* Web-App: Handy, Bildschirm für Bildschirm */
.lse-wa{background:linear-gradient(180deg,var(--grund),#E9ECEF);background:linear-gradient(180deg,var(--grund),light-dark(#E9ECEF,#23282D))}
.wae-handy{position:relative;width:min(300px,70vw);aspect-ratio:9/19;margin:0 auto;border-radius:46px;background:#111;padding:12px;box-shadow:0 50px 100px rgb(var(--schatten-rgb) / .25),inset 0 0 0 2px #2a2d31}
.wae-insel{position:absolute;top:22px;left:50%;width:90px;height:24px;margin-left:-45px;border-radius:20px;background:#000;z-index:2}
.wae-band{height:100%;border-radius:36px;overflow:hidden;background:#F7F8FA;background:light-dark(#F7F8FA,#0E1012)}
.wae-schirm{height:100%;padding:64px 22px 26px;display:flex;flex-direction:column;gap:12px;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform:translateY(calc(var(--s,0) * -100%))}
.wae-kopf{margin:0 0 6px;font:800 1.3rem/1.1 var(--titel);color:var(--tinte)}
.wae-zeilen{display:grid;gap:10px}
.wae-zeilen span{padding:14px;border-radius:14px;background:var(--flaeche-1);border:1px solid var(--rand-linie);font-size:.88rem;color:var(--text)}
.wae-schirm b{margin-top:auto;padding:14px;border-radius:999px;background:#E8892B;color:#16191C;text-align:center;font-size:.9rem}

/* CRM: eine Karte wandert durch die Spalten */
.cre-tafel{position:relative;padding:18px;border-radius:22px;background:var(--flaeche-1);box-shadow:0 40px 90px rgb(var(--schatten-rgb) / .12),0 0 0 1px rgb(var(--schatten-rgb) / .05)}
.cre-spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;min-height:320px}
.cre-spalte{border-radius:14px;background:#F3F5F6;background:light-dark(#F3F5F6,#0E1012);padding:12px;display:flex;flex-direction:column;gap:8px}
.cre-spalte p{margin:0 0 6px;font:700 .78rem/1 var(--lauf);letter-spacing:.08em;text-transform:uppercase;color:var(--stahl)}
.cre-spalte span{height:46px;border-radius:10px;background:#E6EAED;background:light-dark(#E6EAED,#23282D)}
.cre-karte{position:absolute;top:52px;left:30px;width:calc((100% - 36px - 36px)/4);padding:12px;border-radius:12px;background:var(--flaeche-1);border:1px solid #F0C08A;border-color:light-dark(#F0C08A,#2E343A);box-shadow:0 16px 34px rgba(232,137,43,.22);transition:transform .7s cubic-bezier(.2,.7,.2,1);transform:translateX(calc(var(--s,0) * (100% + 12px)))}
.cre-karte p{margin:0;font-size:.74rem;color:var(--grau);line-height:1.35}
.cre-karte .cre-name{font:700 .86rem/1.2 var(--titel);color:var(--tinte);margin-bottom:4px}
.cre-herkunft{margin-top:6px!important;color:#9A5414!important;color:light-dark(#9A5414,#9AA3AA)!important;font-weight:600}
.cre-frist{margin-top:4px!important}

/* CMS: ein Satz wird live geändert */
.lse-cms{background:var(--graphit);color:#fff}
.lse-cms h2{color:#fff}.lse-cms .marke-zeile{color:#9AA3AA}
.lse-cms .lse-schritte li{border-color:#3A4047}.lse-cms .lse-schritte li b{color:#fff}.lse-cms .lse-schritte li span{color:#AEB6BC}
.cme-seite{position:relative;background:var(--flaeche-1);border-radius:18px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.35)}
.cme-inhalt{padding:42px 34px 40px;background:linear-gradient(160deg,#FBFBFC,#EEF1F4);background:linear-gradient(160deg,light-dark(#FBFBFC,#0E1012),light-dark(#EEF1F4,#0E1012))}
.cme-marke{margin:0 0 18px;font:700 .8rem/1 var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--stahl)}
.cme-titel{margin:0;font:800 clamp(1.5rem,2.6vw,2.2rem)/1.1 var(--titel);color:var(--tinte);min-height:2.3em}
.cme-titel span{background:linear-gradient(transparent 62%,rgba(232,137,43,0) 62%);transition:background .3s}
.lse-cms.ab-1 .cme-titel span{background:linear-gradient(transparent 62%,rgba(232,137,43,.28) 62%)}
.cme-zeiger{display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.12em;background:#E8892B;animation:cme-blink 1s steps(2) infinite}
@keyframes cme-blink{50%{opacity:0}}
.cme-satz{color:var(--grau);margin:12px 0 22px}
.cme-knopf{display:inline-block;padding:12px 22px;border-radius:999px;background:var(--graphit);color:#fff;font-size:.9rem}
.cme-werkzeug{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:#16191C;color:#AEB6BC;font-size:.8rem}
.cme-werkzeug b{padding:8px 16px;border-radius:999px;background:#2A3036;color:#fff;transition:background .4s}
.lse-cms.ab-3 .cme-werkzeug b{background:#E8892B;color:#16191C}
.cme-gespeichert{position:absolute;right:18px;top:62px;margin:0;padding:10px 14px;border-radius:10px;background:#16191C;color:#fff;font-size:.8rem;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s}
.cme-gespeichert::before{content:"✓ ";color:#F2A24A}
.lse-cms.ab-3 .cme-gespeichert{opacity:1;transform:none}
.lse-cms .lpe-hinweis{color:#7D868D;color:light-dark(#7D868D,#9AA3AA)}

/* Google-Profil: Nadel fällt, Felder füllen sich */
.lse-gp .lse-bild{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.gpe-karte{position:relative;border-radius:22px;overflow:hidden;min-height:360px;background:#EEF1F3;background:light-dark(#EEF1F3,#0E1012);box-shadow:0 30px 70px rgb(var(--schatten-rgb) / .10)}
.gpe-stadt{position:absolute;inset:0;background:
  linear-gradient(90deg,transparent 47%,#fff 47% 53%,transparent 53%),
  linear-gradient(0deg,transparent 58%,#fff 58% 63%,transparent 63%),
  linear-gradient(90deg,transparent 18%,#fff 18% 21%,transparent 21% 78%,#fff 78% 81%,transparent 81%),
  linear-gradient(0deg,transparent 24%,#fff 24% 27%,transparent 27% 84%,#fff 84% 87%,transparent 87%),
  repeating-linear-gradient(90deg,#E3E7EA 0 34px,#EEF1F3 34px 40px);background:
  linear-gradient(90deg,transparent 47%,light-dark(#fff,#1A1E22) 47% 53%,transparent 53%),
  linear-gradient(0deg,transparent 58%,light-dark(#fff,#1A1E22) 58% 63%,transparent 63%),
  linear-gradient(90deg,transparent 18%,light-dark(#fff,#1A1E22) 18% 21%,transparent 21% 78%,light-dark(#fff,#1A1E22) 78% 81%,transparent 81%),
  linear-gradient(0deg,transparent 24%,light-dark(#fff,#1A1E22) 24% 27%,transparent 27% 84%,light-dark(#fff,#1A1E22) 84% 87%,transparent 87%),
  repeating-linear-gradient(90deg,light-dark(#E3E7EA,#23282D) 0 34px,light-dark(#EEF1F3,#0E1012) 34px 40px)}
.gpe-nadel{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-46px 0 0 -17px;border-radius:50% 50% 50% 0;transform:rotate(-45deg) translate(40px,-140px);opacity:0;background:linear-gradient(135deg,#F2A24A,#E8892B);box-shadow:0 10px 24px rgba(232,137,43,.45);transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.gpe-nadel::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--flaeche-1)}
.lse-gp.ab-0 .gpe-nadel{transform:rotate(-45deg);opacity:1}
.gpe-profil{border-radius:22px;background:var(--flaeche-1);padding:22px;box-shadow:0 30px 70px rgb(var(--schatten-rgb) / .10),0 0 0 1px rgb(var(--schatten-rgb) / .05)}
.gpe-name{margin:0;font:800 1.15rem/1.2 var(--titel);color:var(--tinte)}
.gpe-sterne{margin:4px 0 14px;font-size:.8rem;color:var(--stahl)}
.gpe-profil ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gpe-profil li{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:#F5F6F7;background:light-dark(#F5F6F7,#0E1012);font-size:.8rem;color:var(--stahl);transition:background .4s}
.gpe-profil li b{font-weight:600;color:transparent;transition:color .4s}
.gpe-profil li.an{background:#FFF4E8;background:light-dark(#FFF4E8,#0E1012)}.gpe-profil li.an b{color:var(--tinte)}
.gpe-profil li.an span::before{content:"✓ ";color:#E8892B;font-weight:700}
.lse-gp .lpe-hinweis{grid-column:1/-1}
@media (max-width:560px){.lse-gp .lse-bild{grid-template-columns:1fr}.gpe-karte{min-height:240px}}

/* Google und Meta: Suche und Feed */
.lse-gm{background:linear-gradient(180deg,#F6F7F8,#ECEFF1);background:linear-gradient(180deg,light-dark(#F6F7F8,#0E1012),light-dark(#ECEFF1,#0E1012))}
.lse-gm .lse-bild{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.gme-suche,.gme-feed{border-radius:20px;background:var(--flaeche-1);padding:16px;box-shadow:0 30px 70px rgb(var(--schatten-rgb) / .10),0 0 0 1px rgb(var(--schatten-rgb) / .05);display:flex;flex-direction:column;gap:10px;overflow:hidden}
.gme-leiste{padding:11px 16px;border-radius:999px;border:1px solid var(--rand-linie);font-size:.84rem;color:var(--text)}
.gme-treffer{padding:12px;border-radius:12px;display:grid;gap:6px}
.gme-treffer b{font:700 .9rem/1.2 var(--titel);color:var(--akzent-text);min-height:10px}
.gme-treffer span{font-size:.8rem;color:var(--grau);min-height:8px}
.gme-treffer:not(.gme-anzeige) b,.gme-treffer:not(.gme-anzeige) span{background:#EEF1F3;background:light-dark(#EEF1F3,#0E1012);border-radius:5px}
.gme-anzeige small{font-size:.68rem;font-weight:700;color:var(--tinte)}
.gme-suche .gme-anzeige{opacity:.35;transform:translateY(-6px);transition:opacity .5s,transform .5s,box-shadow .5s,background .5s}
.lse-gm.ab-0 .gme-suche .gme-anzeige{opacity:1;transform:none;background:#FFF7EE;background:light-dark(#FFF7EE,#0E1012);box-shadow:0 0 0 1px #F0C08A}
.gme-feed{max-height:360px}
.gme-post{border-radius:14px;background:#F3F5F6;background:light-dark(#F3F5F6,#0E1012);padding:10px;display:grid;gap:8px;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gme-post i{display:block;height:90px;border-radius:10px;background:#E2E6E9;background:light-dark(#E2E6E9,#23282D)}
.gme-post span{height:8px;border-radius:4px;background:#E2E6E9;background:light-dark(#E2E6E9,#23282D)}
.gme-post b{font:700 .82rem/1.25 var(--titel);color:var(--tinte)}
.gme-feed .gme-anzeige i{background:linear-gradient(135deg,#FCE3C4,#F2A24A);background:linear-gradient(135deg,light-dark(#FCE3C4,#2E2618),#F2A24A)}
.lse-gm.ab-1 .gme-post{transform:translateY(-110px)}
.lse-gm.ab-1 .gme-feed .gme-anzeige{box-shadow:0 0 0 1px #F0C08A;background:#FFF7EE;background:light-dark(#FFF7EE,#0E1012)}
.gme-weg{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:999px;background:var(--flaeche-1);box-shadow:0 0 0 1px var(--rand-linie);opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.gme-weg span{font:600 .84rem/1 var(--lauf);color:var(--grau)}
.gme-weg i{width:40px;height:2px;background:linear-gradient(90deg,#D5DADE,#E8892B);background:linear-gradient(90deg,light-dark(#D5DADE,#23282D),#E8892B)}
.lse-gm.ab-2 .gme-weg{opacity:1;transform:none}
.lse-gm.ab-3 .gme-weg span:last-child{color:#16191C;background:#E8892B;padding:8px 14px;border-radius:999px}
.lse-gm .lpe-hinweis{grid-column:1/-1}
@media (max-width:560px){.lse-gm .lse-bild{grid-template-columns:1fr}}
.lf-held .s-titel{font-size:clamp(2.2rem,3.6vw,3.6rem);line-height:1.02}
.lf-voll .lf-film{aspect-ratio:auto;height:min(52vh,560px)}
.lf-voll .lf-held,.lf-held.lf-voll{padding-top:calc(var(--kopf) + 28px)}
.lf-voll .lf-text{margin-top:8px}
@media (max-width:900px){.lf-voll .lf-film{height:auto;aspect-ratio:16/9}}
.lf-voll .lf-film{order:2}.lf-voll .lf-text{margin:0 0 28px}

/* ===== Navigation neu (08.10.2026): einfach, hell, ruhig ===== */
.nk{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--kopf);display:flex;align-items:center;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.nk.gerollt,.nk.offen{background:rgba(250,251,251,.86);background:light-dark(rgba(250,251,251,.86),rgba(14,16,18,.86));background:light-dark(rgba(250,251,251,.86),rgba(26,30,34,.86));backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 1px 0 rgb(var(--schatten-rgb) / .07)}
.nk-zeile{display:flex;align-items:center;gap:20px;width:min(var(--breite),calc(100% - 48px));margin:0 auto;padding:0}
.nk-marke{display:block;flex:none}.nk-marke img{display:block;height:40px;width:auto}
.nk-nav{display:flex;align-items:center;gap:6px;margin:0 auto}
.nk-nav>a,.nk-auf>button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:0;background:none;font:550 .95rem/1 var(--lauf);color:var(--tinte);text-decoration:none;cursor:pointer;transition:background .2s}
.nk-nav>a:hover,.nk-auf>button:hover,.nk-auf>button[aria-expanded="true"]{background:rgb(var(--tinte-rgb) / .06)}
.nk-auf>button i{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.nk-auf>button[aria-expanded="true"] i{transform:translateY(2px) rotate(-135deg)}
.nk-nav>a[aria-current="page"]{background:rgb(var(--tinte-rgb) / .06)}
.nk-cta{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--graphit);color:#fff;font:650 .92rem/1 var(--lauf);text-decoration:none;transition:transform .2s,box-shadow .2s}
.nk-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgb(var(--schatten-rgb) / .22)}
.nk-auf{position:relative}
.nk-tafel{position:fixed;top:calc(var(--kopf) - 2px);left:50%;width:min(1100px,calc(100vw - 48px));transform:translate(-50%,8px);display:grid;grid-template-columns:1fr 280px;gap:0;background:var(--flaeche-1);border-radius:26px;box-shadow:0 40px 90px -20px rgb(var(--schatten-rgb) / .28),0 0 0 1px rgb(var(--schatten-rgb) / .06);opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;overflow:hidden}
.nk-auf.offen .nk-tafel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nk-tafel::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.nk-spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 18px;padding:28px 26px 22px}
.nk-gruppe p{margin:0 0 8px 12px;font:650 .7rem/1 var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
.nk-gruppe a{display:block;padding:9px 12px;border-radius:12px;text-decoration:none;transition:background .15s}
.nk-gruppe a:hover{background:#F3F5F6;background:light-dark(#F3F5F6,#0E1012)}
.nk-gruppe b{display:block;font:650 .95rem/1.25 var(--lauf);color:var(--tinte)}
.nk-gruppe span{display:block;margin-top:2px;font-size:.8rem;line-height:1.3;color:var(--grau)}
.nk-seite{grid-row:span 2;padding:30px 26px;background:linear-gradient(170deg,#F5F6F8,#ECEFF2);background:linear-gradient(170deg,light-dark(#F5F6F8,#0E1012),light-dark(#ECEFF2,#0E1012));display:flex;flex-direction:column;gap:10px}
.nk-frage{margin:0;font:750 1.1rem/1.25 var(--titel);color:var(--tinte)}
.nk-seite p{margin:0;font-size:.88rem;color:var(--grau)}
.nk-knopf-hell{margin-top:6px;display:inline-flex;justify-content:center;padding:12px 16px;border-radius:999px;background:var(--graphit);color:#fff;font:650 .88rem/1 var(--lauf);text-decoration:none}
.nk-mehr{margin-top:auto;display:grid;gap:2px;padding-top:16px;border-top:1px solid rgb(var(--tinte-rgb) / .08)}
.nk-mehr a{padding:7px 0;font:550 .88rem var(--lauf);color:var(--tinte);text-decoration:none}
.nk-mehr a:hover{color:var(--akzent-text)}
.nk-branchen{margin:0;padding:14px 38px 18px;border-top:1px solid var(--rand-linie);font-size:.84rem;color:var(--grau);display:flex;flex-wrap:wrap;gap:6px 16px}
.nk-branchen span{font-weight:650;color:var(--tinte)}
.nk-branchen a{color:var(--grau);text-decoration:none}.nk-branchen a:hover{color:var(--akzent-text)}
.nk-burger{display:none;flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgb(var(--tinte-rgb) / .10);background:var(--flaeche-1);box-shadow:0 6px 18px rgb(var(--schatten-rgb) / .08);cursor:pointer;position:relative}
.nk-burger i,.nm-zu i{position:absolute;left:14px;right:14px;height:1.8px;border-radius:2px;background:var(--tinte)}
.nk-burger i:first-child{top:18px}.nk-burger i:last-child{top:26px}
/* Handy-Menü */
.nm{position:fixed;inset:0;z-index:90;overscroll-behavior:contain;background:#FAFBFB;background:light-dark(#FAFBFB,#0E1012);display:flex;flex-direction:column;padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px));overflow-y:auto;animation:nm-rein .28s ease}
.nm[hidden]{display:none}
@keyframes nm-rein{from{opacity:0;transform:translateY(-8px)}}
.nm-kopf{display:flex;justify-content:space-between;align-items:center;min-height:56px}
.nm-zu{width:46px;height:46px;border-radius:50%;border:1px solid rgb(var(--tinte-rgb) / .10);background:var(--flaeche-1);position:relative;cursor:pointer}
.nm-zu i{top:22px}.nm-zu i:first-child{transform:rotate(45deg)}.nm-zu i:last-child{transform:rotate(-45deg)}
.nm-haupt{display:flex;flex-direction:column;margin-top:18px}
.nm-haupt>a,.nm-klapp{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;border:0;border-bottom:1px solid var(--rand-linie);background:none;font:750 1.55rem/1.1 var(--titel);letter-spacing:-.02em;color:var(--tinte);text-decoration:none;text-align:left;cursor:pointer}
.nm-klapp i{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.nm-klapp[aria-expanded="true"] i{transform:translateY(3px) rotate(-135deg)}
.nm-leistungen{display:none}
.nm-leistungen.offen{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;padding:14px 4px 20px;border-bottom:1px solid var(--rand-linie)}
.nm-gruppe p{margin:0 0 6px;font:650 .68rem/1 var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
.nm-gruppe a{display:block;padding:6px 0;font:600 1rem/1.25 var(--lauf);color:var(--tinte);text-decoration:none}
.nm-alle{grid-column:1/-1;font:650 .95rem var(--lauf);color:var(--akzent-text);text-decoration:none}
.nm-klein{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 24px}
.nm-klein a{padding:8px 12px;border-radius:999px;background:#EEF1F3;background:light-dark(#EEF1F3,#0E1012);font:550 .82rem/1 var(--lauf);color:var(--tinte);text-decoration:none}
.nm-unten{margin-top:auto;position:sticky;bottom:0;display:grid;grid-template-columns:1.6fr 1fr;gap:10px;padding-top:12px;background:linear-gradient(transparent,#FAFBFB 30%);background:linear-gradient(transparent,light-dark(#FAFBFB,#0E1012) 30%)}
.nm-cta,.nm-ruf{display:flex;justify-content:center;align-items:center;min-height:54px;border-radius:999px;font:650 1rem/1 var(--lauf);text-decoration:none}
.nm-cta{background:var(--graphit);color:#fff}.nm-ruf{background:var(--flaeche-1);color:var(--tinte);border:1px solid var(--rand-linie)}
@media (max-width:1100px){.nk-nav>a[href="journal.html"]{display:none}}
@media (max-width:980px){.nk-nav{display:none}.nk-burger{display:block}.nk-cta{margin-left:auto}}
@media (max-width:520px){.nk-cta{display:none}.nk-burger{margin-left:auto}.nk-marke img{height:36px}}
/* Assistent: am Rechner nur noch eine runde Figur, Text beim Überfahren */
@media (min-width:641px){.chat-knopf{padding:5px}.chat-knopf span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s ease,padding .35s}.chat-knopf:hover span,.chat-knopf:focus-visible span{max-width:260px;padding-right:12px}}
.lf-foto{overflow:hidden;background:#E9E6E1;background:light-dark(#E9E6E1,#23282D)}
.lf-foto img{transform:scale(var(--z,1.04));transform-origin:50% 60%;will-change:transform;transition:none}
@media (prefers-reduced-motion:reduce){.lf-foto img{transform:none}}
/* 09.10.2026 Ervin: kein Flieder mehr im Startbild. Film neutral umgefärbt (macbook-weiss*), Studio jetzt Weiß mit kühlem Aluminium-Schimmer */
.mbh-kulisse{background:#EDEEF0;background:light-dark(#EDEEF0,#0E1012)}
@media (min-width:768px){.mbh-kulisse{background:linear-gradient(180deg,#F4F5F6 0%,#EDEEF0 50%,#E6E7EA 100%);background:linear-gradient(180deg,light-dark(#F4F5F6,#0E1012) 0%,light-dark(#EDEEF0,#0E1012) 50%,light-dark(#E6E7EA,#23282D) 100%)}}
.mbh-nebel{background:radial-gradient(ellipse var(--mw,34%) var(--mh,46%) at var(--mx,50%) var(--my,58%),rgba(237,238,240,0) 58%,rgba(237,238,240,.9) 82%,#EDEEF0 96%);background:radial-gradient(ellipse var(--mw,34%) var(--mh,46%) at var(--mx,50%) var(--my,58%),rgba(237,238,240,0) 58%,rgba(237,238,240,.9) 82%,light-dark(#EDEEF0,#0E1012) 96%)}
.mbh-licht{background:linear-gradient(115deg,transparent 0 14%,rgba(255,255,255,.6) 16%,rgba(255,255,255,0) 24%,transparent 30%,rgba(255,255,255,.45) 33%,rgba(255,255,255,0) 41%,transparent 47%,rgba(248,250,252,.38) 50%,rgba(255,255,255,0) 57%,transparent 100%)}
/* Studiofarbe folgt dem Film (app.js setzt --studio und --hell) */
.mbh-kulisse{background:var(--studio,#EDEEF0)!important;background:var(--studio,light-dark(#EDEEF0,#0E1012))!important}
.mbh-nebel{background:radial-gradient(ellipse var(--mw,34%) var(--mh,46%) at var(--mx,50%) var(--my,58%),transparent 58%,color-mix(in srgb,var(--studio,#EDEEF0) 90%,transparent) 82%,var(--studio,#EDEEF0) 96%);background:radial-gradient(ellipse var(--mw,34%) var(--mh,46%) at var(--mx,50%) var(--my,58%),transparent 58%,color-mix(in srgb,var(--studio,light-dark(#EDEEF0,#0E1012)) 90%,transparent) 82%,var(--studio,light-dark(#EDEEF0,#0E1012)) 96%)}
.mbh-kulisse::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16vh;pointer-events:none;background:linear-gradient(180deg,transparent,var(--grund));opacity:var(--hell,0)}
@media (max-width:767px){.mbh-film{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}}
/* 10.10.2026 Ervin: rechte Spalte des Checks (Bildschirm, Prüfpunkte, Ergebnis) bleibt beim Scrollen stehen */
@media(min-width:901px){.kc-tafel{overflow:clip}.kc-rechts{position:sticky;top:calc(var(--kopf,72px) + 24px);align-self:start}}
/* 10.10.2026: Einwilligungen erst nach Eingabe von Website oder E-Mail aufklappen */
.kc-zu{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),opacity .35s}
.kc-zu>div{overflow:hidden;min-height:0}
.kc-zu.offen{grid-template-rows:1fr;opacity:1}
@media(prefers-reduced-motion:reduce){.kc-zu{transition:none}}
/* 10.10.2026 Ervin: auch die linke Spalte (Roboter, Formular) bleibt stehen. Die jeweils kürzere Spalte hält, die längere läuft */
@media(min-width:901px){.kc-links{position:sticky;top:calc(var(--kopf,72px) + 24px);align-self:start}}
/* 10.10.2026 Ervin: Text zu nah am Rand. Breiterer Seitenrand ab Tablet, Einleitung bekommt oben Luft (sie lag auf 42 Seiten ohne Abstand auf grauer Fläche) */
.rahmen{width:min(100% - 2 * clamp(20px,5vw,72px),var(--breite))}
.kapitel.einleitung{padding-top:clamp(44px,5.5vw,80px)}
/* 10.10.2026: Ablauf-Abschnitt ragte auf dem Handy rechts aus dem Bild (Spalte wuchs auf Inhaltsbreite) */
.lse-raster{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.lse-raster>*{min-width:0}
@media (max-width:900px){.lse-raster{grid-template-columns:minmax(0,1fr)}}
/* 10.10.2026: Texte über dem Plattform-Film (Über uns) standen am Handy 4 px vom Rand */
.lt-t{padding-inline:clamp(20px,5vw,72px);box-sizing:border-box}
/* 11.10.2026: ausgebaute Referenzen: Erklärsatz unter dem Leistungstitel, Abstand der Einleitung */
.fs-liste li span{display:block;margin-top:4px;font-weight:400;color:var(--grau);font-size:.95rem;line-height:1.5}
.fs-text .lead + p{margin-top:14px;color:var(--text)}
/* 11.10.2026 Handy-/Tablet-Check: Tippflächen, Mindestschrift, CRM-Spalten */
.cre-spalten{grid-template-columns:repeat(4,minmax(0,1fr))}
.cre-spalte>*{min-width:0;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:600px){
  .cre-tafel{padding:12px}.cre-spalten{gap:6px}.cre-spalte{padding:8px 6px}.cre-spalte p{font-size:.72rem}
  .cre-was,.cre-herkunft,.cre-frist,.lpe-hinweis,.kachel-marke,.kc-feld>span,.tb-info small,.gr-form small,.kf-chips small,.kc-klein{font-size:12.5px}
}
@media (pointer:coarse){
  .pr-link,.fn-link,.karte h3 a,.ex-flaeche ul+a,.abspielen,.ex-link{display:inline-flex;align-items:center;min-height:44px}
  .karte h3 a{min-height:0;padding:10px 0}
  .kc-feld input,.kc-form input[type=text],.kc-form input[type=email],.kc-tel input{min-height:44px}
  .kc-haken input[type=checkbox],.kf-haken input,.kf-chips input,.kf-karte input,.kc-frei label input{width:22px;height:22px}
  .kf-chips label,.kc-frei label,.kf-haken{min-height:44px;align-items:center}
  .kc-haken a,.kf-haken a{display:inline-block;padding:6px 0}
}
/* Mindestschrift auf allen Touch-Geräten (Handy und Tablet) */
@media (pointer:coarse){
  .pr-status,.xe-titel,.ex-info small,main p small,.kc-feld>span,.kc-klein,.kc-beispiel,.kc-quellen,.tb-info small,.kachel-marke,.cre-was,.cre-herkunft,.cre-frist,.lpe-hinweis{font-size:max(12.5px,1em)}
  .kc-info summary{min-height:44px;display:flex;align-items:center}
}
@media (pointer:coarse){.gr-raster small{font-size:12.5px}.kf-haken input,.kc-haken input{flex:none}}
@media (pointer:coarse){.gr-raster article p small{font-size:12px}}
/* 11.10.2026: Preiskarten fliegen auch auf Handy und Tablet ein (gleiche Animation, nur ohne Hover) */
@media(max-width:1023px) and (prefers-reduced-motion:no-preference){.ph-karte{animation:phRein .9s cubic-bezier(.16,1,.3,1) both}.ph-k1{animation-delay:.15s}.ph-k2{animation-delay:.3s}.ph-k3{animation-delay:.45s}}
/* Konfigurator: Werbebudget je Plattform (Ervin 11.10.2026) */
.kf-wz-budget{display:none;align-items:center;gap:8px;font-size:.86rem;color:#3A4248;color:light-dark(#3A4248,#D5DADE);padding:4px 6px 4px 12px;border-radius:99px;background:var(--grund);flex:1 1 100%}
.kf-wz:has(.kf-wz-haupt input:checked) .kf-wz-budget{display:flex}
.kf-wz-budget input{width:110px;min-height:40px;border:1.5px solid #E2E5E8;border-color:light-dark(#E2E5E8,#2E343A);border-radius:99px;padding:6px 14px;font:600 .95rem var(--lauf);color:var(--tinte);background:var(--flaeche-1);margin-left:auto}
.kf-wz-budget input:focus{outline:2px solid var(--blau,#2A4FB8);outline-offset:1px}
.kf-wz-budget em{font-style:normal;color:var(--grau);white-space:nowrap}

/* ===== Barrierefreiheit (11.10.2026): Kontrast und Tippflächen, Optik sonst unverändert ===== */
.pk-mitte .pk-tipp{color:#8EA6FF}
.kf-summe div+div b{color:#8EA6FF}
.bm-knopf{color:var(--auf-akzent)}
/* Kleine Fußzeilen-Links: Tippfläche mindestens 24 px hoch (Zeilenabstand der Rechtszeile minimal größer) */
.fuss-neu .fuss-ende a{display:inline-block;line-height:24px}
.mv-schalter button small{color:#656B70;color:light-dark(#656B70,#9AA3AA)}
/* Paketkarten: Titel + Nutzen je Punkt (Ervin 11.10.2026) */
.pk li span{display:grid;gap:2px}
.pk li b{font-weight:700;color:var(--tinte);font-size:.92rem;line-height:1.3}
.pk li small{font-size:.84rem;line-height:1.4;color:#5E676E;color:light-dark(#5E676E,#9AA3AA)}
.pk-mitte li b{color:#fff}
.pk-mitte li small{color:#C8CED3}
.pk ul{gap:13px}

/* Schalter hell/dunkel (12.10.2026, neu gestaltet): Schiebeschalter wie eine Uhren-Komplikation.
   Aluminium-Griff auf einer versenkten Bahn, Sonne (Bernstein) links, Mond (Blau) rechts. Icons: Lucide 1.18 (ISC), im Markup. */
.thema-knopf{display:none;flex:none;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 2px;border:0;background:none;cursor:pointer;border-radius:999px;-webkit-tap-highlight-color:transparent}
.js .thema-knopf{display:inline-flex}
.thema-knopf:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
.thema-bahn{position:relative;flex:none;width:62px;height:32px;border-radius:999px;border:1px solid #C3CAD0;background:linear-gradient(180deg,#D9DEE3 0%,#EEF1F3 100%);box-shadow:inset 0 2px 5px rgba(20,24,28,.16),0 1px 0 rgba(255,255,255,.9)}
.thema-bahn::before,.thema-bahn::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#A9B2BA}
.thema-bahn::before{left:11px;opacity:0}.thema-bahn::after{right:11px}
.thema-griff{position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#FFFFFF 0%,#E6EAED 55%,#D2D8DD 100%);box-shadow:0 1px 2px rgba(20,24,28,.28),0 4px 10px rgba(20,24,28,.16),inset 0 1px 0 #fff}
.thema-griff .ti{grid-area:1/1;display:block}
.ti-sonne{color:#A5690A}
.ti-mond{color:#C4D1FA;opacity:0;transform:rotate(-70deg) scale(.5)}
.thema-knopf:hover .thema-griff{box-shadow:0 1px 2px rgba(20,24,28,.3),0 6px 14px rgba(20,24,28,.22),inset 0 1px 0 #fff}
:root[data-theme="dunkel"] .thema-bahn{border-color:#414A53;background:linear-gradient(180deg,#07080A 0%,#171B1F 100%);box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.07)}
:root[data-theme="dunkel"] .thema-bahn::before{opacity:1;background:#59636D}
:root[data-theme="dunkel"] .thema-bahn::after{opacity:0}
:root[data-theme="dunkel"] .thema-griff{transform:translateX(30px);background:linear-gradient(145deg,#4A535C 0%,#2B3138 55%,#1C2025 100%);box-shadow:0 1px 2px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(157,179,242,.22)}
:root[data-theme="dunkel"] .ti-sonne{opacity:0;transform:rotate(70deg) scale(.5)}
:root[data-theme="dunkel"] .ti-mond{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .thema-griff{transition:transform .34s cubic-bezier(.16,1,.3,1),background .3s,box-shadow .3s}
  .thema-griff .ti{transition:opacity .22s,transform .34s cubic-bezier(.16,1,.3,1)}
  .thema-bahn{transition:background .3s,border-color .3s}
}
.thema-wechsel *,.thema-wechsel *::before,.thema-wechsel *::after{transition:none!important}
.thema-im-menue{margin-left:auto;margin-right:8px}

/* Startbild im Dunkeln (12.10.2026, neu): eigene Filmfassung, Laptop steht in einem schwarzen Raum (Boden, Wandfuge, Spiegelung).
   Kein Lichtkegel, kein Weiß. Die Raumfarbe am Filmrand ist --studio-start. */
.mbh-poster-dunkel{display:none}
:root[data-theme="dunkel"] .mbh-poster:not(.mbh-poster-dunkel){display:none}
:root[data-theme="dunkel"] .mbh-poster-dunkel{display:block}
:root[data-theme="dunkel"] .mbh-kulisse{background:var(--studio,#1A1E22)!important}
:root[data-theme="dunkel"] .mbh-nebel,:root[data-theme="dunkel"] .mbh-licht{display:none!important}
@media (max-width:980px){.nk .thema-knopf:not(.thema-im-menue){margin-left:auto}.nk .nk-cta{margin-left:6px}}
@media (max-width:520px){.nk .nk-burger{margin-left:6px}}

/* Dunkelmodus D7 (12.10.2026): Logos, Kundenlogos, Formulare, Häkchen */
:root[data-theme="dunkel"] img[src*="logo-tinte"]{filter:invert(1) sepia(.18) brightness(.97)}
:root[data-theme="dunkel"] img[src*="bilder/logos/"]{background:var(--flaeche-logo);border-radius:6px;box-shadow:0 0 0 6px var(--flaeche-logo)}
:root[data-theme="dunkel"] :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){border-color:var(--rand-feld)}
:root[data-theme="dunkel"] :is(input,textarea)::placeholder{color:#9AA3AA}
:root[data-theme="dunkel"] .ph-punkte li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.3l2.4 2.4L12 5' fill='none' stroke='%230E1012' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
:root[data-theme="dunkel"] .fs-liste li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.3l2.4 2.4L12 5' fill='none' stroke='%230E1012' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}

/* H1 als kleine Zeile über dem Slogan (12.10.2026, K1.2 / Plan A5.3). Der Slogan ist ein Absatz und sieht aus wie vorher die H1. */
h1.h1-zeile{margin-top:0;text-wrap:initial;hyphens:manual;-webkit-hyphens:manual}
h1.marke-zeile.h1-zeile{display:flex!important;font:600 .76rem/1 var(--lauf);letter-spacing:.16em;color:var(--akzent-text)}
h1.mbh-ueber.h1-zeile{font:600 .9rem var(--lauf);color:var(--grau);letter-spacing:0}
p.mbh-titel,p.lz-titel,p.s-titel{font-family:var(--titel);color:var(--tinte);text-wrap:balance;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
p.lz-titel em,p.mbh-titel em{color:inherit!important;-webkit-text-fill-color:currentColor!important;background:none!important;font-style:normal}
.lz-held h1.marke-zeile.h1-zeile{justify-content:center;margin-bottom:14px}

/* Konfigurator K1.3 (12.10.2026): Direktkauf-Karte ausblendbar, Rechtstexte-Block */
.kf-karte[hidden]{display:none!important}
.kf-weg:has([data-weg-kauf][hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.kf-weg:has([data-weg-kauf][hidden]){grid-template-columns:1fr}}
[data-recht] .kf-karte{align-content:start}

/* Dunkelmodus, zweite Runde (12.10.2026): Flächen heben sich im Dunkeln über Helligkeit + Haarlinie ab, nicht über Schatten.
   Auswahl und Fokus tragen die Akzentfarbe, weil Graphit auf Dunkel nicht zu sehen ist. */
:root[data-theme="dunkel"] input[type="checkbox"],:root[data-theme="dunkel"] input[type="radio"],:root[data-theme="dunkel"] input[type="range"]{accent-color:var(--akzent-flaeche)}
:root[data-theme="dunkel"] .nk-cta{background:#F3F5F6;color:#0E1012;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.5)}
:root[data-theme="dunkel"] .nk-cta:hover{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 12px 28px rgba(0,0,0,.6)}
:root[data-theme="dunkel"] .kf-karte,:root[data-theme="dunkel"] .kf-stil,:root[data-theme="dunkel"] .kf-regler,:root[data-theme="dunkel"] .kf-wz,:root[data-theme="dunkel"] .kf-danach,:root[data-theme="dunkel"] .kf-wege li{background:#20252A;border:1.5px solid #343B43;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 26px rgba(0,0,0,.28)}
:root[data-theme="dunkel"] .kf-karte:hover,:root[data-theme="dunkel"] .kf-stil:hover{border-color:#4A535C}
:root[data-theme="dunkel"] .kf-karte:has(input:checked),:root[data-theme="dunkel"] .kf-stil:has(input:checked){border-color:var(--akzent-flaeche);background:#1E2740;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px rgba(157,179,242,.14),0 12px 28px rgba(0,0,0,.34)}
:root[data-theme="dunkel"] .kf-danach-zwei div,:root[data-theme="dunkel"] .kf-danach-eins>div{background:#15181C;border:1px solid #2E343A}
:root[data-theme="dunkel"] .kf-schritte{background:#0E1012;border:1px solid #2E343A;box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
:root[data-theme="dunkel"] .kf-schritte li.an{background:#2E343A;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.45)}
:root[data-theme="dunkel"] .kf-schritte li:not(.an):hover{color:var(--tinte)}
:root[data-theme="dunkel"] .kf-chips span{background:#20252A;border-color:#414A53}
:root[data-theme="dunkel"] .kf-chips input:checked+span{background:var(--akzent-flaeche);border-color:var(--akzent-flaeche);color:var(--auf-akzent)}
:root[data-theme="dunkel"] .kf-feld input,:root[data-theme="dunkel"] .kf-feld textarea,:root[data-theme="dunkel"] .kf-feld select,:root[data-theme="dunkel"] .kf-wz-budget input{background:#121518;box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
:root[data-theme="dunkel"] .kf-feld input:focus,:root[data-theme="dunkel"] .kf-feld textarea:focus{border-color:var(--akzent-flaeche);box-shadow:inset 0 2px 4px rgba(0,0,0,.4),0 0 0 3px rgba(157,179,242,.18)}
:root[data-theme="dunkel"] .kf-wz-konto,:root[data-theme="dunkel"] .kf-wz-budget{background:#15181C;border:1px solid #2E343A}
:root[data-theme="dunkel"] .kf-zettel{border:1px solid #2E343A;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 44px rgba(0,0,0,.45)}
:root[data-theme="dunkel"] .knopf.licht{background:#F3F5F6;color:#0E1012;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.5)}
:root[data-theme="dunkel"] .knopf.licht:hover{background:#fff}
:root[data-theme="dunkel"] .knopf.metall{border-color:#4A535C;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 24px rgba(0,0,0,.4)}
:root[data-theme="dunkel"] .knopf.metall:hover{border-color:#6A747D}

/* Auswahl, Fokus und kleine Zeichen im Dunkeln: Akzent statt Graphit/Dunkelblau (sonst unsichtbar) */
:root[data-theme="dunkel"] :focus-visible,:root[data-theme="dunkel"] .kf-stil:has(input:focus-visible),:root[data-theme="dunkel"] .kf-chips input:focus-visible+span,:root[data-theme="dunkel"] .tm-weg input:focus-visible+span{outline-color:var(--akzent-text)!important}
:root[data-theme="dunkel"] .pk svg{stroke:var(--akzent-text)}
:root[data-theme="dunkel"] .ref-filter button.aktiv,:root[data-theme="dunkel"] .ref-karte:hover,:root[data-theme="dunkel"] .ref-weiter:hover,:root[data-theme="dunkel"] .sp-voll,:root[data-theme="dunkel"] .vb-schalter button[aria-checked="true"],:root[data-theme="dunkel"] .tm-tag.an,:root[data-theme="dunkel"] .tm-zeit.an,:root[data-theme="dunkel"] .bn-schild.jetzt,:root[data-theme="dunkel"] .gr-weg li:last-child,:root[data-theme="dunkel"] .tm-weg input:checked+span,:root[data-theme="dunkel"] .js .sg-schritte li.an,:root[data-theme="dunkel"] .kc-feld:focus-within,:root[data-theme="dunkel"] .kc-a:hover,:root[data-theme="dunkel"] .kc-a-haupt,:root[data-theme="dunkel"] .xe-schritt.an small,:root[data-theme="dunkel"] .lichtwahl button[aria-pressed="true"]{border-color:var(--akzent-flaeche);outline-color:var(--akzent-flaeche)}
:root[data-theme="dunkel"] .vb-auf,:root[data-theme="dunkel"] .vb-zu{border-color:#4A535C}
:root[data-theme="dunkel"] .kf-zettel li.leer,:root[data-theme="dunkel"] .kf-zettel .kf-klein,:root[data-theme="dunkel"] .kf-zettel-kopf{color:#A3ACB3}

/* Karten im Dunkeln (12.10.2026, dritte Runde): Was im Hellen als Karte abgesetzt ist, bekommt im Dunkeln eine Haarlinie
   und eine leicht gehobene Fläche. Liste kommt aus tests/karten-rahmen.mjs (19 Kartenarten auf 100 Seiten verschmolzen). */
:root[data-theme="dunkel"] .fn-cta,:root[data-theme="dunkel"] .frage,:root[data-theme="dunkel"] .karte,:root[data-theme="dunkel"] .s-held-bild,:root[data-theme="dunkel"] .pr-handy,:root[data-theme="dunkel"] .pe-paket,:root[data-theme="dunkel"] .vid-start,:root[data-theme="dunkel"] .zitat,:root[data-theme="dunkel"] .kb-stimme,:root[data-theme="dunkel"] .kb-foto,:root[data-theme="dunkel"] .pk,:root[data-theme="dunkel"] .gpe-karte,:root[data-theme="dunkel"] .kf-schritt,:root[data-theme="dunkel"] .ex-flaeche,:root[data-theme="dunkel"] .ex-info,:root[data-theme="dunkel"] .wk,:root[data-theme="dunkel"] .uu-stimme,:root[data-theme="dunkel"] .wae-band{outline:1px solid #363D45;outline-offset:-1px}
:root[data-theme="dunkel"] .fn-cta,:root[data-theme="dunkel"] .kb-stimme,:root[data-theme="dunkel"] .uu-stimme,:root[data-theme="dunkel"] .ex-info,:root[data-theme="dunkel"] .frage,:root[data-theme="dunkel"] .karte,:root[data-theme="dunkel"] .zitat,:root[data-theme="dunkel"] .pk:not(.pk-mitte),:root[data-theme="dunkel"] .wk,:root[data-theme="dunkel"] .pe-paket,:root[data-theme="dunkel"] .kf-schritt{background:#21262B}

/* Play-Knopf auf Videos (13.10.2026): liegt immer auf einem Bild, deshalb in hell UND dunkel hell mit dunklem Dreieck.
   Vorher: Fläche folgte dem Modus (dunkel auf dunkel) und saß bei .vid doppelt versetzt (margin + translate). */
.kb-play{background:rgba(255,255,255,.94);box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 0 10px rgba(255,255,255,.16),0 14px 34px rgba(0,0,0,.38)}
.kb-play i{border-left-color:#16191C}
@media(hover:hover){.vid-start:hover .kb-play{transform:scale(1.08)}}
.vid-start:focus-visible{outline:3px solid var(--akzent-text);outline-offset:3px}

/* Startbild: in den Bildschirm fahren + Video im Laptop (13.10.2026) */
.mbh-buehne{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.ld-kino{position:absolute;left:0;top:0;width:1440px;height:900px;opacity:0;display:grid;place-items:center}
.ld-kino-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#05070D;opacity:0;pointer-events:none;transition:opacity .35s}
.ld-kino.laeuft .ld-kino-film{opacity:1;pointer-events:auto}
.ld-kino::before{content:"";position:absolute;inset:0;background:rgba(5,7,13,.86);transition:opacity .3s}
.ld-kino.laeuft::before{opacity:0}
.ld-play{position:relative;display:grid;justify-items:center;gap:14px;padding:24px 34px;border:0;background:none;color:#fff;cursor:pointer;font-family:var(--lauf)}
.ld-play-knopf{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.96);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 24px 60px rgba(0,0,0,.55)}
.ld-play-knopf i{width:0;height:0;border-left:36px solid #16191C;border-top:22px solid transparent;border-bottom:22px solid transparent;margin-left:9px}
.ld-play-knopf::before,.ld-play-knopf::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(167,180,255,.75)}
.ld-play b{font:760 2.1rem/1.1 var(--titel);letter-spacing:-.02em}
.ld-play small{font:500 1.15rem/1.3 var(--lauf);color:#C9D2F5}
.ld-play:focus-visible{outline:3px solid #A7B4FF;outline-offset:6px;border-radius:24px}
.ld-kino.laeuft .ld-play{display:none}
.ld-weiter{position:absolute;right:28px;top:26px;min-height:52px;padding:0 24px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(5,7,13,.72);color:#fff;font:600 1.15rem var(--lauf);cursor:pointer}
.ld-weiter:hover{background:rgba(5,7,13,.9);border-color:#fff}
.ld-platzhalter{position:absolute;left:28px;top:26px;padding:8px 14px;border-radius:999px;background:#C98A12;color:#16191C;font:700 1rem var(--lauf)}
@media (prefers-reduced-motion:no-preference){
  .ld-play-knopf{transition:transform .25s}
  .ld-play:hover .ld-play-knopf{transform:scale(1.06)}
  .ld-play-knopf::before{animation:ld-puls 2.2s cubic-bezier(.2,.6,.3,1) infinite}
  .ld-play-knopf::after{animation:ld-puls 2.2s cubic-bezier(.2,.6,.3,1) 1.1s infinite}
}
@keyframes ld-puls{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.75);opacity:0}}
.ld-kino:not([inert]) .ld-play,.ld-kino:not([inert]) .ld-weiter{pointer-events:auto}
@media (max-width:767px){
  .ld-play{gap:30px}
  .ld-play-knopf{width:270px;height:270px}
  .ld-play-knopf i{border-left-width:74px;border-top-width:46px;border-bottom-width:46px;margin-left:18px}
  .ld-play b{font-size:5rem}.ld-play small{font-size:2.9rem;max-width:22ch;text-align:center}
  .ld-weiter{min-height:190px;padding:0 70px;font-size:3.2rem;right:40px;top:40px;border-width:3px}
  .ld-platzhalter{font-size:2.6rem;padding:20px 34px;left:40px;top:40px}
}
/* Display-Inhalt neu (14.10.2026, Ervin): statt des alten Live-Heros steht der Roboter mit drei Wünschen und Play-Knopf auf dem Laptop.
   Derselbe Inhalt ist Bild für Bild in den Film eingebrannt (film/macbook-blau3*). Wer hier etwas ändert, muss den Film neu einbrennen:
   _bau/film_dunkel/display_film.py. Der klickbare Knopf im Kino liegt deckungsgleich über dem gezeichneten (gleiche Regeln, Text davor unsichtbar). */
.ld.ld-neu{font-family:var(--lauf);background:radial-gradient(ellipse 62% 70% at 27% 58%,#1B2540 0%,rgba(27,37,64,0) 70%),linear-gradient(135deg,#0B0E16,#070A12 55%,#0A0D15)}
.ld-logo2{position:absolute;left:72px;top:44px;height:54px;width:auto}
.ld-boden{position:absolute;left:120px;bottom:70px;width:520px;height:54px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,0,0,0) 70%)}
.ld-figur{position:absolute;left:150px;bottom:92px;height:600px;width:auto;filter:drop-shadow(0 34px 44px rgba(0,0,0,.55))}
.ld-text{position:absolute;left:690px;right:84px;top:50%;transform:translateY(-50%);color:#fff;text-align:left}
.ld-titel{margin:0;font:800 68px/1.1 var(--titel);font-stretch:112%;letter-spacing:-.03em;white-space:nowrap;color:#fff}
.ld-satz{margin:26px 0 0;font:400 31px/1.35 var(--lauf);color:#C8CED3;max-width:19em}
.ld-start{display:flex;align-items:center;gap:26px;margin-top:44px;text-align:left}
.ld-start .ld-play-knopf{flex:none}
.ld-start-text b{display:block;font:760 34px/1.1 var(--titel);letter-spacing:-.02em;color:#fff}
.ld-start-text small{display:block;margin-top:8px;font:500 21px/1.3 var(--lauf);color:#C9D2F5}
.ld-neu .ld-play-knopf::before{animation:none;inset:-16px;border-color:rgba(167,180,255,.55)}
.ld-neu .ld-play-knopf::after{display:none}
.ld-geist{visibility:hidden}
@media (min-width:768px){
  .ld-kino{display:block}
  .ld-kino::before{background:transparent}
  .ld-kino .ld-play{padding:0;justify-items:normal}
  .ld-kino .ld-play .ld-start-text b{font:760 34px/1.1 var(--titel)}
  .ld-kino .ld-play .ld-start-text small{font:500 21px/1.3 var(--lauf)}
  .ld-platzhalter{left:auto;right:28px;top:auto;bottom:26px}   /* oben links steht jetzt das Logo */
}
@media (max-width:767px){
  /* Handy: der Bildschirm ist zu klein für den gezeichneten Knopf. Inhalt abdunkeln, großer Knopf in der Mitte (wie seit R19). */
  .ld-kino::before{background:rgba(5,7,13,.94)}
  .ld-kino .ld-text{position:relative;left:auto;right:auto;top:auto;transform:none}
  .ld-geist{display:none}
  .ld-kino .ld-play{display:grid;justify-items:center;text-align:center;margin-top:0;gap:30px}
  .ld-kino .ld-play .ld-start-text b{font-size:5rem}
  .ld-kino .ld-play .ld-start-text small{font-size:2.9rem;max-width:22ch;margin:14px auto 0}
}

/* Konfigurator neu geordnet (14.10.2026, Ervin): ein Thema je Schritt, Unterfragen in Kästen, Zahlung als eigener Schritt mit vier Karten. */
.kf-schritte{scrollbar-width:none}.kf-schritte::-webkit-scrollbar{display:none}
.kf-schritte li{flex:0 0 auto;padding:10px 15px}
.kf-kasten{clear:both;border:1px solid light-dark(#E2E5E8,#2E343A);border-radius:22px;padding:20px 22px 22px;margin-top:14px}
.kf-kasten:first-of-type{margin-top:0}
.kf-kasten-titel{margin:0 0 12px;font:700 1.05rem var(--titel);letter-spacing:-.01em;color:var(--tinte)}
.kf-kasten>.kf-feld{margin-top:0}
.kf-zahlarten{grid-template-columns:1fr 1fr}
.kf-zahl em{font-style:normal;font:600 .9rem var(--lauf);color:var(--akzent-text);margin-top:6px;font-variant-numeric:tabular-nums}
.kf-karte.kf-aus{opacity:.55;cursor:not-allowed}
.kf-karte.kf-aus em{color:var(--grau)}
@media (max-width:720px){.kf-zahlarten{grid-template-columns:1fr}.kf-kasten{padding:16px 16px 18px;border-radius:18px}}

/* Ervin 16.10.2026: zuletzt Angeklicktes leuchtet auf dem Zettel auf; am Handy kurzer Hinweis unten */
.kf-zettel li.kf-neu{--kfn:rgba(157,180,240,.14);background:var(--kfn);box-shadow:-10px 0 0 var(--kfn),10px 0 0 var(--kfn),-13px 0 0 #9DB4F0;border-radius:2px;animation:kfNeu 1.6s ease-out}
.kf-zettel li.kf-neu b{color:#C9D7FA}
@keyframes kfNeu{0%,25%{--kfn:rgba(157,180,240,.42)}100%{--kfn:rgba(157,180,240,.14)}}
@property --kfn{syntax:'<color>';inherits:false;initial-value:transparent}
.kf-zettel-hinweis{position:fixed;left:16px;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:60;margin:0;padding:12px 16px;border-radius:14px;background:#16191C;color:#F3F5F6;border:1px solid #2E343A;box-shadow:0 12px 30px rgba(0,0,0,.35);font-size:.88rem;line-height:1.35;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s}
.kf-zettel-hinweis.kf-zeigt{opacity:1;transform:none}
@media(min-width:1001px){.kf-zettel-hinweis{display:none}}
@media(prefers-reduced-motion:reduce){.kf-zettel li.kf-neu{animation:none}.kf-zettel-hinweis{transition:none;transform:none}}

/* K1.5 Bewegung reduziert (17.10.2026): Die Laptop-Bühne hat bei reduziert keine Kamerafahrt. Spätere Höhenregeln (.mbh 700vh/560vh)
   überschrieben die alte Reduziert-Regel, es blieben rund 5.500 px leere Fläche. Jetzt: Bühne so hoch wie ihr Inhalt, Video per Knopf. */
@media (prefers-reduced-motion:reduce){
  .mbh{height:auto!important}
  .mbh-kulisse{position:relative!important;height:100svh;min-height:620px}
  .mbh-ruhig{margin-top:18px;display:grid;gap:14px;justify-items:start}
  .mbh-ruhig-play{display:inline-flex;align-items:center;gap:10px}
  .mbh-ruhig-play .ld-play-knopf{width:30px;height:30px;flex:none;background:currentColor;box-shadow:none}
  .mbh-ruhig-play .ld-play-knopf::before,.mbh-ruhig-play .ld-play-knopf::after{display:none}
  /* .knopf i ist global ausgeblendet (Zeile ~2984), deshalb mit !important wieder an */
  .knopf.mbh-ruhig-play .ld-play-knopf i{display:block!important;width:0;height:0;border-left:10px solid #fff;border-left-color:light-dark(#fff,#16191C);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
  .mbh-ruhig-film{width:100%;max-width:640px;border-radius:18px;background:#000}
}
.mbh-ruhig[hidden],.mbh-ruhig-film[hidden],.mbh-ruhig-play[hidden]{display:none!important}
/* K1.5 Unterseiten (17.10.2026): Bühnen .bn, .lh, .lse kleben bei „reduziert" nicht mehr fest. Vorher stand das Endbild
   rund 2.000 px lang still (spätere Höhenregeln schlugen die alte Reduziert-Regel). Endlose Schwebe-Animationen aus. */
@media (prefers-reduced-motion:reduce){
  .bn,.lh,.lse{height:auto!important}
  .bn-kulisse,.lh-buehne,.lse-buehne{position:relative!important;height:auto!important;min-height:100svh}
  .robo img.an{animation:none}
  [style*="kcSchweben"],.kc-robo{animation:none!important}
}

/* Ervin 17.10.2026: Roboter-Abschnitt jetzt auf der Startseite. Bei "Bewegung reduziert" kein 560-1000vh-Scrollweg, ein Bildschirm mit der Schlussszene. */
@media (prefers-reduced-motion:reduce){.sicht{height:auto}.sicht-kulisse{position:relative;min-height:100svh}}
/* 17.10.2026: Roboter-Abschnitt, letzte Szene wechselt von den Zusatzleistungen zu den drei Paketen */
.s-preis .sp-b{display:none}.sicht.paketzeit .s-preis .sp-a{display:none}.sicht.paketzeit .s-preis span.sp-b{display:inline}.sicht.paketzeit .s-preis .sp-reihe.sp-b{display:grid}
.sp-reihe.sp-b .sp-wir{font-size:clamp(1.45rem,2.1vw,1.95rem)}
/* 18.10.2026: drei echte Kundenstimmen unter der Referenz-Überschrift der Startseite */
.rs-kopf{flex-direction:column;align-items:stretch}.rs-kopf>.knopf{align-self:flex-start}
.rs-stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;order:2}
.rs-stimme{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:22px;border-radius:18px;background:var(--flaeche-1);border:1px solid var(--linie,rgba(0,0,0,.08))}
.rs-stimme blockquote{margin:0;font-size:1rem;line-height:1.5;color:var(--tinte)}
.rs-stimme figcaption{display:flex;flex-direction:column;gap:2px;font-size:.85rem;color:var(--grau)}
.rs-stimme figcaption b{color:var(--tinte);font-weight:600}
.rs-stimme a{color:var(--akzent-tief,var(--akzent));text-decoration:underline;text-underline-offset:2px}
@media(max-width:860px){.rs-stimmen{grid-template-columns:1fr}}
.rs-kopf>.knopf{order:3}
/* 18.10.2026: Kundenlogo rechts neben Name und Firma (MEHR ist weiß, braucht eine dunkle Fläche) */
.rs-stimme figcaption{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
.rs-stimme figcaption>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.rs-logo{flex:none;height:44px;width:auto;max-width:120px;object-fit:contain;border-radius:8px}
.rs-logo-flaeche{background:#14171A;padding:8px 10px;box-sizing:content-box;height:28px}
:root[data-theme="dunkel"] img.rs-logo{background:none;box-shadow:none}
:root[data-theme="dunkel"] img.rs-logo.rs-logo-flaeche{background:#0B0D0F}
.rs-logo-hell,:root[data-theme="dunkel"] img.rs-logo.rs-logo-hell{background:#fff;padding:3px;box-sizing:content-box;height:38px}
/* 18.10.2026 (Ervin): Begleitung als Zeitstrahl statt vier Kästen, mit Umzug auf eigenes Hosting */
.pk-zeit-rahmen{display:grid;gap:14px}
.pk-zeit{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.pk-zeit li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:0 0 18px;margin:0;background:none;border-radius:0}
.pk-zeit li::before{content:"";display:block;position:absolute;left:16px;top:34px;bottom:2px;width:2px;background:linear-gradient(var(--akzent-flaeche),color-mix(in srgb,var(--akzent-flaeche) 20%,transparent));border-radius:2px}
.pk-zeit li:last-child{padding-bottom:0}.pk-zeit li:last-child::before{display:none}
.pk-zeit li>i{font:800 .85rem/34px var(--titel);font-style:normal;text-align:center;width:34px;height:34px;border-radius:50%;background:var(--akzent-flaeche);color:var(--grund);box-shadow:0 0 0 5px color-mix(in srgb,var(--akzent-flaeche) 16%,transparent)}
.pk-zeit li>div{display:grid;gap:3px;padding-top:6px;min-width:0}
.pk-zeit b{font:700 .98rem var(--titel);color:var(--tinte)}
.pk-zeit span{font-size:.86rem;line-height:1.45;color:var(--grau)}
.pk-wahl{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.pk-wahl em{font-style:normal;font:600 .76rem var(--lauf);padding:5px 10px;border-radius:999px;background:var(--grund);border:1px solid color-mix(in srgb,var(--akzent-flaeche) 35%,transparent);color:var(--tinte)}
.pk-zeit-fuss{margin:0;padding:12px 14px;border-radius:14px;background:var(--grund);font-size:.82rem !important;line-height:1.45;color:var(--grau)}
.pk-zeit-fuss b{color:var(--tinte);font-weight:700}

/* 18.10.2026 Stand-Prüfung: „So arbeiten wir“ bei reduzierter Bewegung ohne 340vh leere Bühne, alle Begriffe gleich sichtbar */
@media (prefers-reduced-motion:reduce){.wege{height:auto}.wege-kulisse{position:relative;height:auto;min-height:0;padding:clamp(48px,10vh,120px) 0}.wege-woerter li{color:var(--tinte);-webkit-text-stroke-color:var(--tinte);transform:none}.wege-woerter li small{color:var(--akzent-text)}}

/* ---------- Newsletter-Seite (18.10.2026) ---------- */
.nl-held-raster{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.nl-held .nl-form{margin-top:22px;max-width:560px}
.nl-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nl-bild{margin:0;border-radius:26px;overflow:hidden;border:1px solid var(--rand-linie);background:var(--flaeche-1);box-shadow:0 30px 60px -44px rgb(var(--schatten-rgb) / .45)}
.nl-bild img{display:block;width:100%;height:auto}
.nl-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:center}
.nl-zwei h2 em,.nl-held h1 em{font-style:normal;color:var(--akzent-text)}
.nl-zwei p{color:var(--grau);line-height:1.6}
.nl-themen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nl-thema{display:flex;flex-direction:column;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:22px;overflow:hidden}
.nl-thema img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
.nl-thema>div{display:grid;gap:10px;padding:20px;align-content:start;flex:1}
.nl-thema small,.nl-aufgabe small{font:700 .72rem var(--titel);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-text)}
.nl-thema h3{margin:0;font:700 1.05rem/1.3 var(--titel);color:var(--tinte)}
.nl-thema p{margin:0;font-size:.9rem;line-height:1.55;color:var(--grau)}
.nl-einordnung{background:#EEF2FD;background:light-dark(#EEF2FD,#161B24);border-left:3px solid var(--akzent-text);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.nl-einordnung b{font:700 .84rem var(--titel);color:var(--tinte)}
.nl-thema .nl-offen,.nl-thema .nl-quelle{font-size:.8rem}
.nl-quelle a{color:var(--akzent-text)}
.nl-aufgabe{margin-top:14px;display:grid;gap:6px;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-top:3px solid var(--akzent-text);border-radius:22px;padding:22px}
.nl-aufgabe b{font:700 1.1rem var(--titel);color:var(--tinte)}.nl-aufgabe p{margin:0;color:var(--grau);line-height:1.6}
.nl-hinweis{max-width:760px;margin:0 auto;display:grid;gap:6px;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:22px;padding:22px 24px}
.nl-hinweis b{font:700 1.05rem var(--titel);color:var(--tinte)}.nl-hinweis p{margin:0;color:var(--grau);line-height:1.6}
.nl-teilen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:20px 0 10px}
.nl-teilen span{font:600 .84rem var(--lauf);color:var(--grau);margin-right:4px}
.nl-teilen a{font:600 .84rem var(--lauf);color:var(--tinte);text-decoration:none;border:1px solid var(--rand-linie);border-radius:999px;padding:7px 14px;background:var(--flaeche-1)}
@media(max-width:860px){.nl-held-raster,.nl-zwei{grid-template-columns:1fr}.nl-themen{grid-template-columns:1fr}.nl-vorteil .nl-bild{order:-1}}

/* ---------- Erstgespräch: Buchung in Schritten (18.10.2026) ---------- */
.tm-buchung{gap:0}
.tm-stufe{display:grid;gap:12px}.tm-stufe[hidden]{display:none}
.tm-stufe>.knopf{justify-self:start;margin-top:6px}
.tm-fortschritt{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tm-fortschritt li{display:grid;gap:7px;font:600 .74rem var(--lauf);color:var(--grau)}
.tm-fortschritt li::before{content:"";height:4px;border-radius:4px;background:var(--rand-linie);transition:background .3s}
.tm-fortschritt li.an::before{background:var(--licht)}.tm-fortschritt li.jetzt{color:var(--tinte)}
.tm-kal-kopf{display:flex;align-items:center;justify-content:space-between}
.tm-kal-kopf b{font:700 1.02rem var(--titel);color:var(--tinte)}
.tm-kal-kopf button{width:38px;height:38px;border-radius:50%;border:1px solid var(--rand-linie);background:var(--grund);color:var(--tinte);font:600 1.2rem/1 var(--titel);cursor:pointer}
.tm-kal-kopf button:disabled{opacity:.3;cursor:default}
.tm-kal-woche,.tm-kal-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center}
.tm-kal-woche span{font:600 .72rem var(--lauf);color:var(--grau);padding:2px 0}
.tm-kal-tage button{height:44px;border:1px solid var(--rand-linie);border-radius:12px;background:var(--grund);color:var(--tinte);font:600 .92rem var(--titel);cursor:pointer;transition:background .2s,color .2s}
.tm-kal-tage button:disabled{opacity:.32;cursor:default;background:transparent;border-color:transparent}
.tm-kal-tage button.heute{box-shadow:inset 0 0 0 1.5px var(--akzent-text)}
.tm-kal-tage button.an,.tm-kal-tage button:not(:disabled):hover{background:var(--graphit);border-color:var(--graphit);color:#fff}
.tm-tageszeit{display:inline-flex;justify-self:start;gap:4px;border:1px solid var(--rand-linie);border-radius:999px;padding:4px;background:var(--grund)}
.tm-tageszeit button{border:0;background:none;padding:8px 16px;border-radius:999px;font:600 .86rem var(--lauf);color:var(--grau);cursor:pointer}
.tm-tageszeit button.an{background:var(--graphit);color:#fff}
.tm-buchung .tm-zeiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.tm-zeit:not(.an):hover{border-color:var(--graphit)}
.tm-zurueck{justify-self:start;background:none;border:0;padding:0;margin-top:4px;color:var(--grau);font:600 .86rem var(--lauf);cursor:pointer}
.tm-zurueck:hover{color:var(--tinte)}
.tm-zusammen{margin:0;background:#EEF2FD;background:light-dark(#EEF2FD,#161B24);border-radius:14px;padding:12px 14px;font:600 .95rem var(--titel);color:var(--tinte)}
.tm-fertig{justify-items:center;text-align:center;padding:18px 0 6px}
.tm-fertig b{font:700 1.3rem var(--titel);color:var(--tinte)}.tm-fertig p{margin:0;color:var(--grau);max-width:42ch}
.tm-haken{width:58px;height:58px;border-radius:50%;background:var(--graphit);color:#fff;display:grid;place-items:center;font-size:1.6rem}
@media(max-width:560px){.tm-wege{grid-template-columns:1fr}.tm-kal-tage button{border-radius:10px}}
/* Teilen-Leiste über dem Fuß, jede Seite außer Rechtstexten (18.10.2026) */
.fuss-neu .teilen-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:30px;margin-bottom:34px;border-bottom:1px solid var(--rand-linie)}
.teilen-leiste span{font:600 .84rem var(--lauf);color:var(--grau);margin-right:6px}
.teilen-leiste a,.teilen-leiste button{font:600 .84rem var(--lauf);color:var(--tinte);text-decoration:none;border:1px solid var(--rand-linie);border-radius:999px;padding:8px 15px;background:var(--flaeche-1);cursor:pointer;min-height:38px;display:inline-flex;align-items:center}
.teilen-leiste a:hover,.teilen-leiste button:hover{border-color:var(--akzent-text);color:var(--akzent-text)}
.teilen-leiste a:focus-visible,.teilen-leiste button:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
.teilen-leiste button[hidden]{display:none}
/* Einwilligung (Cookie-Hinweis), 18.10.2026: unten, nicht verdeckend, Ablehnen gleichwertig */
.einw{position:fixed;inset:0;margin:auto;height:fit-content;z-index:90;width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:var(--flaeche-1);color:var(--tinte);border:1px solid var(--rand-linie);border-radius:18px;padding:20px 22px;box-shadow:0 18px 50px rgba(var(--schatten-rgb),.22)}
.einw[hidden],.einw [hidden]{display:none}
/* Mitte der Fläche (Ervin 25.10.2026): Hinweis mittig, Seite dahinter leicht abgedunkelt */
.einw:not([hidden]){box-shadow:0 0 0 100vmax rgba(0,0,0,.4),0 18px 50px rgba(0,0,0,.25)}
.einw-titel{font:700 1.02rem var(--lauf);margin:0 0 8px}
.einw-text{font:400 .9rem/1.55 var(--lauf);color:var(--grau);margin:0 0 14px}
.einw-text a,.einw small a{color:var(--akzent-text)}
.einw-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.einw-k{flex:1 1 150px;min-height:44px;font:600 .9rem var(--lauf);border-radius:999px;padding:10px 16px;cursor:pointer;border:1px solid var(--tinte);background:var(--tinte);color:var(--flaeche-1)}
.einw-k-leise{background:transparent;color:var(--tinte);border-color:var(--rand-linie)}
.einw-k:focus-visible,.fuss-einw:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
.einw-liste{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.einw-schalter{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--rand-linie);border-radius:12px;cursor:pointer}
.einw-schalter input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--akzent-flaeche)}
.einw-schalter b{display:block;font:600 .92rem var(--lauf)}
.einw-schalter small{display:block;font:400 .82rem/1.5 var(--lauf);color:var(--grau);margin-top:3px}
.fuss-einw{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;margin-left:14px}
@media(max-width:560px){.einw{width:calc(100vw - 16px);padding:14px 16px}.einw-titel{margin-bottom:4px}.einw-text{font-size:.84rem;line-height:1.45;margin-bottom:10px}.einw-k{flex:1 1 40%;padding:10px 12px}.einw-k-leise{flex-basis:100%;order:3}} /* kompakter: Ablehnen und Akzeptieren nebeneinander, gleich groß (Mobil-Prüfung 21.10.2026) */
/* Website-Check, echtes Ergebnis (19.10.2026): Gesamtnote und Ampel je Prüfpunkt */
.kc-note{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:8px;margin:0 0 12px;padding:14px 16px;border-radius:14px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.kc-note b{font:800 2.4rem/1 var(--titel,inherit);color:var(--tinte);letter-spacing:-.02em}
.kc-note>span{font-size:.82rem;color:var(--grau)}
.kc-note p{grid-column:1/-1;margin:6px 0 0;font-size:.9rem;color:var(--tinte)}
.kc-note[data-ampel="rot"] b{color:#D64545;color:light-dark(#C73838,#FF7A7A)}
.kc-note[data-ampel="gelb"] b{color:#B07A00;color:light-dark(#A06E00,#FFC24B)}
.kc-note[data-ampel="gruen"] b{color:#1E8A55;color:light-dark(#1E8A55,#4BD18A)}
.kc-pruef li.ok.rot i{background:#D64545;border-color:#D64545}
.kc-pruef li.ok.gelb i{background:#E3A008;border-color:#E3A008}
.kc-pruef li.ok.gruen i{background:#1E9E5F;border-color:#1E9E5F}
.kc-pruef li.ok.rot em{color:#C73838;color:light-dark(#C73838,#FF7A7A)}
.kc-pruef li.ok.gelb em{color:#A06E00;color:light-dark(#A06E00,#FFC24B)}
.kc-pruef li.ok.gruen em{color:#1E8A55;color:light-dark(#1E8A55,#4BD18A)}
.kc-pruef li.offen i{border-style:dashed}
.kc-pruef li.offen em{color:var(--grau)}
/* Hauptknopf im Check: Unterzeile folgt der Schriftfarbe auf der Akzentfläche (dunkel war sie weiß auf Hellblau) */
.kc-a-haupt b{color:var(--auf-akzent)}
.kc-a-haupt span{color:var(--auf-akzent);opacity:.82}
/* Vergleich „Dieselbe Seite, zweimal angesehen“ (/ki-werbung), 19.10.2026: wiederhergestellt aus der Live-Seite */
.vg-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 10px}
.vg-seite{margin:0;display:grid;gap:8px}
.vg-seite figcaption{font:600 .78rem var(--lauf);color:var(--grau)}
.vg-bild{aspect-ratio:260/168;border-radius:10px;background:var(--graphit);padding:9% 6%;display:flex;flex-direction:column;gap:6%;overflow:hidden}
.vg-bild i{display:block;border-radius:99px;background:rgba(255,255,255,.3);height:4%}
.vg-bild .vg-kopf{width:22%;background:var(--licht)}
.vg-bild .vg-titel{width:68%;height:7%;background:rgba(242,244,248,.9);border-radius:4px}
.vg-bild .vg-titel.kurz{width:48%}
.vg-bild .vg-flaeche{height:24%;border-radius:6px;background:rgba(157,179,242,.22)}
.vg-bild .vg-zeile.kurz{width:62%}
.vg-bild .vg-zeile.leer{width:40%;background:rgba(255,255,255,.26)}
.vg-zahl{font:800 1.15rem var(--titel,inherit);color:var(--tinte)}
.vg-zahl.mager{color:#C73838;color:light-dark(#C73838,#FF7A7A)}
.vg-quelle{font-size:.86rem;color:var(--grau);margin:0}
.vg-seite{grid-template-rows:auto 1fr auto}
.vg-seite figcaption{min-height:2.6em;display:flex;align-items:flex-end}
.vg-bild{border:1px solid var(--rand-linie)}
/* Website-Check, Etappe 2 (19.10.2026): freischalten per Termin oder Kauf */
.kc-panel{margin:14px 0 0;padding:18px;border-radius:18px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.kc-panel[hidden],.kc-frei[hidden],.kc-panel-form[hidden]{display:none}
.kc-panel h3{margin:0 0 6px;font:700 1.1rem var(--titel,inherit);color:var(--tinte);outline:none}
.kc-panel>p{margin:0 0 12px;font-size:.88rem;color:var(--grau)}
.kc-schritt{margin:20px 0 8px;font:700 .78rem var(--lauf);letter-spacing:.04em;text-transform:uppercase;color:var(--grau)}
.kc-schritt[hidden]{display:none}
.kc-tage,.kc-zeiten{display:flex;flex-wrap:wrap;gap:8px}
.kc-tag{min-height:42px;padding:8px 14px;border-radius:999px;border:1px solid var(--rand-linie);background:var(--flaeche);color:var(--tinte);font:600 .86rem var(--lauf);cursor:pointer}
.kc-tag:hover{border-color:var(--akzent-text);color:var(--akzent-text)}
.kc-tag.an{background:var(--akzent-flaeche);border-color:var(--akzent-flaeche);color:var(--auf-akzent)}
.kc-tag:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
.kc-zeit{min-width:76px;justify-content:center}
.kc-laedt{font-size:.86rem;color:var(--grau)}
.kc-panel-form{display:grid;gap:10px;margin-top:6px}
.kc-panel-form .kc-start{margin-top:4px}
.kc-meldung{margin:10px 0 0;font-size:.88rem;color:var(--tinte)}
.kc-meldung:empty{display:none}
.kc-preis{margin:0 0 12px;font-size:.9rem;color:var(--tinte)}
.kc-preis>b{font:800 1.5rem var(--titel,inherit)}
.kc-preis span{display:block;font-size:.82rem;color:var(--grau);margin-top:2px}
.kc-links{margin:0;font-size:.82rem}.kc-links a{color:var(--akzent-text)}
.kc-hinweis{margin:0;font-size:.76rem;line-height:1.5;color:var(--grau)}
.kc-frei{margin:14px 0 0;padding:14px 16px;border-radius:14px;border:1px solid #1E9E5F;background:rgba(30,158,95,.08);font-size:.9rem;color:var(--tinte)}
.kc-frei b{color:#1E8A55;color:light-dark(#1E8A55,#4BD18A)}

/* Etappe 2: Tage am Handy zweispaltig, Platzhalter erkennbar blass (19.10.2026) */
@media (max-width:560px){.kc-tage{display:grid;grid-template-columns:1fr 1fr}.kc-tag{padding:8px 10px}}
.kc-panel input::placeholder{color:#A5ADBD;opacity:1}
:root[data-theme="dunkel"] .kc-panel input::placeholder{color:#6E7681}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .kc-panel input::placeholder{color:#6E7681}}
.kc-panel p.kc-schritt{margin:22px 0 8px}
/* Etappe 3: vollständiger Bericht (19.10.2026) */
.kc-voll-satz{margin:2px 0 4px;font-weight:600;color:var(--tinte)}
.kc-voll-liste>li>b{display:block;margin-top:2px}
.kc-voll-marke{display:block;font:600 .72rem var(--lauf);letter-spacing:.04em;text-transform:uppercase;color:#6A7488;color:light-dark(#6A7488,#9AA3AA)}
.kc-voll-liste dd ol{margin:0;padding-left:1.2em;display:grid;gap:4px}
.kc-voll-mehr{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--rand-linie);background:var(--flaeche)}
.kc-voll-mehr[hidden]{display:none}
.kc-voll-mehr p{margin:0 0 10px;font-size:.9rem;color:var(--tinte)}
.kc-voll-hinweis{margin:12px 0 0;font-size:.88rem;color:var(--tinte)}
.kc-voll-hinweis:empty{display:none}
.zurueck-knopf.weg{opacity:0;pointer-events:none}
@media print{html.kc-druck .kc-voll-mehr{display:none}}

/* 20.10.2026 Szene 3: CMS und CRM zeigen, was Anima sagt */
.s-fenster{opacity:calc((1 - var(--weg,0)) * (1 - var(--cms,0)))}
.s-werk{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--cms,0)}
.sw-karte{position:absolute;left:50%;width:min(96%,640px);background:var(--flaeche-1);border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);border-radius:18px;box-shadow:0 40px 80px -40px rgb(var(--schatten-rgb) / .4);padding:14px 16px}
.sw-cms{top:0;transform:translate(-50%,calc((1 - var(--cms,0)) * 20px))}
.sw-crm{bottom:0;width:min(90%,600px);opacity:var(--crm,0);transform:translate(-50%,calc((1 - var(--crm,0)) * 30px))}
.sw-kopf{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sw-kopf i{width:9px;height:9px;border-radius:50%;background:var(--akzent-flaeche);flex:none}
.sw-kopf b{font:700 .95rem var(--titel);color:var(--tinte)}
.sw-kopf small{color:var(--grau);font-size:.78rem}
.sw-kopf em{margin-left:auto;font-style:normal;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:99px}
.sw-ok{background:#E3F5EA;background:light-dark(#E3F5EA,#16301F);color:#1F7A4C;color:light-dark(#1F7A4C,#6FD39A);opacity:var(--c2,0)}
.sw-neu{background:var(--akzent-flaeche);color:#16191C;opacity:var(--lead,0)}
.sw-cms-raster{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.sw-feld{margin-bottom:10px}
.sw-feld>span{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stahl);margin-bottom:4px}
.sw-feld p{display:grid;margin:0;border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);border-radius:10px;padding:8px 10px;font-size:.85rem;color:var(--tinte)}
.sw-feld p>*,.sw-v-titel>*{grid-area:1/1;text-decoration:none}
.sw-feld s,.sw-v-titel s{opacity:calc(1 - var(--c1,0))}
.sw-feld ins,.sw-v-titel ins{opacity:var(--c1,0)}
.sw-feld u{display:none}
.sw-bilder{display:flex;gap:8px}
.sw-bilder img{width:64px;height:44px;object-fit:cover;border-radius:7px}
.sw-bilder img:first-child{opacity:calc(1 - var(--c1,0) * .55)}
.sw-bilder img:last-child{box-shadow:0 0 0 calc(var(--c1,0) * 2px) var(--licht)}
.sw-knopf{display:inline-block;font-size:.78rem;font-weight:600;padding:7px 14px;border-radius:99px;background:var(--tinte);color:var(--flaeche-1);transform:scale(calc(1 - var(--c2,0) * .06 + var(--c2,0) * .06))}
.sw-vorschau{border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);border-radius:12px;overflow:hidden;background:light-dark(#FBFBFC,#0E1012)}
.sw-v-leiste{display:flex;align-items:center;gap:4px;padding:6px 8px;background:light-dark(#F0F2F4,#16191C);font-size:.62rem;color:var(--stahl)}
.sw-v-leiste i{width:6px;height:6px;border-radius:50%;background:#F0726A}.sw-v-leiste i:nth-child(2){background:#F5C04E}.sw-v-leiste i:nth-child(3){background:#5CC46B}
.sw-v-leiste span{margin-left:6px}
.sw-v-bild{display:grid;grid-template-rows:96px;height:96px;overflow:hidden}
.sw-v-bild img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
.sw-v-bild img:last-child{opacity:var(--c1,0)}
.sw-v-titel{display:grid;margin:10px 12px 6px;font:700 .98rem/1.2 var(--titel);color:var(--tinte)}
.sw-v-knopf{display:inline-block;margin:0 12px 12px;font-size:.66rem;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--akzent-flaeche);color:#16191C}
.sw-spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sw-spalte{background:#F3F5F6;background:light-dark(#F3F5F6,#16191C);border-radius:12px;padding:8px;min-height:84px}
.sw-spalte>span{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stahl);margin:0 0 6px 2px}
.sw-lead{display:flex;flex-direction:column;gap:1px;background:var(--flaeche-1);border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);border-radius:10px;padding:7px 9px}
.sw-lead b{font-size:.8rem;color:var(--tinte)}
.sw-lead small{font-size:.72rem;color:var(--grau);line-height:1.3}
.sw-lead em{font-style:normal;font-size:.66rem;color:var(--stahl)}
.sw-lead-neu{opacity:var(--lead,0);transform:translateY(calc((1 - var(--lead,0)) * -14px));border-color:var(--licht)}
/* Szene 4: das echte Google-Profil als Karte */
.k-bild{width:236px;padding:8px 10px 10px 30px}
.k-bild img{display:block;width:100%;height:auto;border-radius:10px;margin:0 0 6px -20px;width:calc(100% + 20px);order:-1}
.k-bild i{top:auto;bottom:16px;left:10px;width:12px;height:12px}
.k-google.k-bild{left:-4%;top:-2%}
.k-profil{top:56%}
/* Szene 7: kleine Abläufe statt nur Text */
.sp-ablauf{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;grid-column:1/-1}
.sp-ablauf li{position:relative;font-size:.74rem;line-height:1.3;padding:4px 8px 4px 22px;border-radius:8px;background:#F3F5F6;background:light-dark(#F3F5F6,#16191C);color:var(--grau)}
.sp-ablauf li::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--akzent-flaeche)}
.sp-ablauf li+li::after{content:"";position:absolute;left:11px;top:-5px;width:1px;height:6px;background:var(--silber)}
.sp-voll .sp-ablauf li{background:rgba(255,255,255,.08);color:#D5DADE}
@media(max-width:980px){
  .sw-karte{padding:10px 11px;border-radius:14px}
  .sw-cms-raster{grid-template-columns:1fr}
  .sw-felder .sw-feld:nth-child(2),.sw-knopf{display:none}
  .sw-feld{margin-bottom:6px}
  .sw-v-bild{height:64px;grid-template-rows:64px}
  .sw-spalten{gap:5px}.sw-spalte{padding:5px;min-height:0}
  .sw-lead small,.sw-lead em{display:none}
  .sw-kopf small{display:none}
  .k-bild{width:120px;padding:6px 8px 8px 24px}
  .k-bild img{margin-left:-16px;width:calc(100% + 16px)}
  .sp-ablauf{flex-direction:row;flex-wrap:wrap;margin-top:4px}
  .sp-ablauf li{font-size:.64rem;padding:2px 6px 2px 16px}.sp-ablauf li::before{left:6px;width:5px;height:5px;margin-top:-2.5px}.sp-ablauf li+li::after{display:none}
}

/* 20.10.2026 Audit: Tabellen aus den Rechtstexten (Datenschutz, AVV) */
.tabelle-rahmen{overflow-x:auto;margin:18px 0;border:1px solid #DCE1E5;border-color:light-dark(#DCE1E5,#2E343A);border-radius:14px;-webkit-overflow-scrolling:touch}
.tabelle{width:100%;min-width:560px;border-collapse:collapse;font-size:.9rem;line-height:1.45}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid #E6EAED;border-bottom-color:light-dark(#E6EAED,#2A3036)}
.tabelle th{font-weight:700;color:var(--tinte);background:#F3F5F6;background:light-dark(#F3F5F6,#16191C)}
.tabelle td{color:var(--grau)}
.tabelle td:first-child{color:var(--tinte);font-weight:600}
.tabelle tbody tr:last-child td{border-bottom:0}

/* ===== Mobil-Prüfung 21.10.2026: Tippziele mindestens 44 px, Chat-Knopf verdeckt den Fuß nicht ===== */
@media (pointer:coarse){
  .nm-gruppe a,.fuss-ende a,.fuss-einw,.nk-marke{display:inline-flex;align-items:center;min-height:44px}
  .nm-gruppe a{display:flex}
  .ref-filter button,.kc-play,.br-weissnicht,[role="tab"]{min-height:44px}
}
@media (max-width:1023px){.fuss{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
@media (min-width:700px) and (max-width:1023px) and (orientation:portrait){.sicht-buehne{height:70svh}} /* Tablet hochkant: kein leeres unteres Drittel (Mobil-Prüfung 21.10.2026) */
/* Röntgenblick auf Handy und Tablet (21.10.2026, Ervin: jede Animation auch mobil hochwertig).
   Bühne klebt, Maske fährt wie am Rechner; die drei Erklärungen liegen übereinander, sichtbar ist die aktuelle. */
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  .js .sg-roentgen{height:300vh;padding:0}
  .js .sg-buehne{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:var(--kopf);box-sizing:border-box}
  .js .sg-raster{gap:14px}
  .js .sg-text h2{font-size:clamp(1.7rem,7vw,2.4rem);margin-bottom:0}
  .js .sg-schritte{margin-top:12px;display:grid}
  .js .sg-schritte li{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s,border-color .35s}
  .js .sg-schritte li.an{opacity:1;transform:none;border-color:var(--licht);box-shadow:0 12px 30px rgba(43,79,176,.12)}
  .js .sg-lagen{height:clamp(210px,34svh,300px);min-height:0}
  .js .sg-lage{position:absolute;inset:0;border:0!important;padding:18px}
  .js .sg-google{clip-path:inset(0 calc((1 - var(--p1,0)) * 100%) 0 0)}
  .js .sg-ki{clip-path:inset(0 calc((1 - var(--p2,0)) * 100%) 0 0)}
  .js .sg-lagen::after{content:"";position:absolute;top:0;bottom:0;width:2px;left:calc(var(--scan,0) * 100%);background:var(--akzent-flaeche);box-shadow:0 0 14px 3px rgba(43,79,176,.45);opacity:var(--scan-an,0);pointer-events:none}
  .js .sg-google code{font-size:.74rem}
  .js .sg-m-bild{height:72px}
  .js .sg-m-titel{font-size:1.3rem;margin-top:12px}
}
/* Website-Check: KI-Einschätzung und Keyword-Ranking im vollen Bericht (21.10.2026) */
.kc-zusatz{margin-top:18px;padding-top:16px;border-top:1px solid #DCE3F0;border-top-color:light-dark(#DCE3F0,#33405F)}
.kc-zusatz h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:760 1.05rem var(--titel);color:var(--tinte);margin:0 0 8px}
.kc-zusatz p{margin:0 0 8px;font-size:.9rem;color:#3A4248;color:light-dark(#3A4248,#D5DADE);line-height:1.55}
.kc-ki-marke{font:600 .66rem var(--lauf);letter-spacing:.05em;text-transform:uppercase;color:var(--akzent-text);border:1px solid currentColor;border-radius:999px;padding:2px 8px}
.kc-ki-text{white-space:pre-line}
.kc-zusatz-klein{font-size:.76rem!important;color:#6A7488!important;color:light-dark(#6A7488,#9AA3AA)!important}
.kc-rank-form{display:flex;gap:8px;margin:10px 0 6px}
.kc-rank-form input{flex:1;min-width:0;min-height:44px;border:1px solid #DCE3F0;border-color:light-dark(#DCE3F0,#33405F);border-radius:10px;padding:10px 12px;font:500 .9rem var(--lauf);background:var(--flaeche-1);color:var(--tinte)}
.kc-rank-form button{min-height:44px;border:0;border-radius:10px;padding:10px 16px;background:var(--graphit);color:#fff;font:600 .88rem var(--lauf);cursor:pointer}
.kc-rank-form button:disabled{opacity:.6;cursor:wait}
.kc-rank-liste{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:8px}
.kc-rank-liste li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:10px 14px;border-radius:12px;border:1px solid #DCE3F0;border-color:light-dark(#DCE3F0,#33405F);border-left-width:4px}
.kc-rank-liste li.gruen{border-left-color:#1F9D57}.kc-rank-liste li.gelb{border-left-color:#C98A12}.kc-rank-liste li.rot{border-left-color:#C8372D}
.kc-rank-liste b{color:var(--tinte);font-weight:650}.kc-rank-platz{font:700 .88rem var(--lauf);color:var(--tinte)}
.kc-rank-liste small{grid-column:1/-1;font-size:.78rem;color:#6A7488;color:light-dark(#6A7488,#9AA3AA)}
@media(max-width:480px){.kc-rank-form{flex-direction:column}}
html.kc-druck .kc-rank-form{display:none}

/* 22.10.2026: Bestätigung nach dem Freischalten gut sichtbar */
.kc-frei{font-size:1rem;line-height:1.5;padding:16px 18px;scroll-margin-top:96px}
.kc-frei>b{display:block;font:800 1.1rem var(--titel);margin-bottom:4px}
/* Testversion: deutlicher Hinweis, nur ohne data-betrieb="echt" (setzt app.js) */
.test-hinweis{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;max-width:min(560px,calc(100% - 32px));display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:14px;background:#FFF4D6;color:#4A3500;border:1px solid #E8B93C;font-size:.85rem;line-height:1.4;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.test-hinweis b{white-space:nowrap}
.test-hinweis button{margin-left:auto;background:none;border:0;color:inherit;font-size:1.1rem;line-height:1;cursor:pointer;padding:2px 4px;min-width:32px;min-height:32px}
@media print{.test-hinweis{display:none!important}}
@media(max-width:640px){.test-hinweis{left:12px;right:12px;transform:none;max-width:none;bottom:84px}}
/* Lesefortschritt unter der Kopfzeile (22.10.2026) */
.lesefortschritt{position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none;overflow:hidden}
.lesefortschritt i{display:block;height:100%;background:var(--akzent-flaeche);transform:scaleX(0);transform-origin:0 50%;border-radius:0 3px 3px 0;will-change:transform}
@media print{.lesefortschritt{display:none}}
/* Handy-Hero (Ervin 22.10.2026: „überladen“): beide Knöpfe in einer Zeile, damit der Laptop nicht auf „Erstgespräch“ liegt.
   Wird es zu schmal (unter rund 370 px), brechen sie wie bisher um. */
@media(max-width:480px){
  .mbh-a .held-reihe{gap:8px;margin-top:20px}
  .mbh-a .held-reihe .knopf{height:46px;padding:0 14px;font-size:14px}
}
/* Kleine Handys (iPhone SE und ähnlich): Knöpfe passen in eine Zeile, Text etwas knapper, Laptop bleibt frei */
@media(max-width:380px){.mbh-a .held-reihe .knopf{padding:0 11px;font-size:13.5px}}
@media(max-width:480px) and (max-height:700px){
  .mbh-a .mbh-lead{font-size:14.5px;line-height:1.5;margin-top:10px}
  .mbh-a .mbh-titel{font-size:clamp(28px,8.4vw,34px)}
  .mbh-a .held-reihe{margin-top:14px}
}
/* Filme (22.10.2026): Erklär- und Animationsfilme für Kunden */
.fm-held .lead{max-width:62ch}
.fm-sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.fm-sprung a{padding:9px 14px;border-radius:999px;border:1px solid var(--linie);background:var(--flaeche-1);color:var(--tinte);font-size:.88rem;font-weight:600;text-decoration:none}
.fm-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:20px;margin-top:28px;align-items:start}
.fm-karte{background:var(--flaeche-1);border:1px solid var(--linie);border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -28px rgb(var(--schatten-rgb,0 0 0) / .35)}
.fm-film{background:#0E1012;display:flex;justify-content:center}
.fm-film video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0E1012}
.fm-hoch .fm-film video{width:auto;height:min(520px,70svh);aspect-ratio:9/16;object-fit:contain}
.fm-text{padding:16px 18px 20px}
.fm-kunde{margin:0 0 6px;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:var(--akzent-text)}
.fm-text h3{margin:0 0 6px;font:800 1.18rem/1.25 var(--titel);color:var(--tinte)}
.fm-text p:last-child{margin:0;color:var(--text);font-size:.95rem;line-height:1.55}
.fm-hinweis{margin:14px 0 0;font-size:.82rem;color:var(--grau)}
.fm-schluss .held-reihe{margin-top:18px}
@media(min-width:1024px){.fm-sprung a{transition:background .2s,border-color .2s}.fm-sprung a:hover{border-color:var(--akzent-text)}}
/* Chat am Handy (22.10.2026): Vollbild statt schwebendem Kasten, folgt der Tastatur, kein Zoom beim Tippen */
.chat-direkt{display:flex;gap:8px;justify-content:center;margin:0;padding:0 12px 6px}
.chat-direkt a{padding:7px 12px;border-radius:99px;border:1px solid var(--rand-linie);color:var(--tinte);font:600 .8rem var(--lauf);text-decoration:none;background:var(--flaeche-1)}
@media(max-width:640px){
  html.chat-offen,html.chat-offen body{overflow:hidden;overscroll-behavior:none}
  .chat{left:0;right:0;top:var(--chat-y,0px);bottom:auto;width:100%;height:var(--chat-h,100dvh);max-height:none;border-radius:0;border:0;z-index:95}
  .chat-kopf{padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px}
  .chat-kopf button{width:44px;height:44px}
  .chat-verlauf{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .chat-eingabe input{font-size:16px}
  .chat-vorschlaege button{min-height:40px}
  .chat-hinweis{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
/* Filme (22.10.2026): Bildsprachen, kinoartig. Bühne und Band bleiben in beiden Themen dunkel, wie ein Kinosaal. */
.fm-buehne{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#0B0D10;color:#F3F5F6;padding:calc(var(--kopf,64px) + 40px) 0 clamp(40px,8vh,90px)}
.fm-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-schleier{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,16,.55) 0%,rgba(11,13,16,.1) 35%,rgba(11,13,16,.55) 70%,rgba(11,13,16,.92) 100%),linear-gradient(90deg,rgba(11,13,16,.75) 0%,rgba(11,13,16,0) 60%)}
.fm-buehne-text{position:relative;z-index:1}
.fm-buehne .brot,.fm-buehne .brot a,.fm-buehne .brot b{color:rgba(243,245,246,.75)}
.fm-buehne .marke-zeile{color:#9DB3F2}
.fm-titel{font:800 clamp(3rem,8.5vw,8.4rem)/.92 var(--titel);font-stretch:108%;letter-spacing:-.05em;margin:14px 0 18px;max-width:11ch;color:#fff}
.fm-titel em{display:block;font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.92)}
.fm-lead{max-width:46ch;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.55;color:rgba(243,245,246,.86);margin:0}
.fm-buehne .held-reihe{margin-top:26px}
.fm-reel-stile{position:absolute;z-index:1;right:clamp(16px,4vw,56px);bottom:clamp(40px,8vh,90px);list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:right}
.fm-reel-stile li{font:600 .82rem var(--lauf);letter-spacing:.08em;text-transform:uppercase;color:rgba(243,245,246,.38);transition:color .4s}
.fm-reel-stile li.an{color:#fff}
.fm-reel-stile li.an::before{content:"";display:inline-block;width:22px;height:2px;margin-right:10px;vertical-align:middle;background:#9DB3F2}
.fm-band{position:relative;background:#0B0D10;color:#F3F5F6}
.fm-band-kulisse{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;gap:clamp(18px,3vh,34px)}
.fm-band-kopf h2{font:800 clamp(2rem,4.4vw,4rem)/1 var(--titel);letter-spacing:-.04em;margin:8px 0 0;color:#fff}
.fm-band-kopf h2 em{font-style:normal;color:#9DB3F2}
.fm-band .marke-zeile{color:#9DB3F2}
.fm-spur{display:flex;gap:clamp(18px,2.4vw,32px);padding:0 max(16px,calc((100vw - var(--breite,1200px)) / 2));will-change:transform}
.fm-stil{flex:0 0 min(64vw,780px)}
.fm-stil-bild{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#15181C;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.fm-stil-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-stil-name{position:absolute;left:clamp(14px,2vw,26px);bottom:clamp(6px,1.2vw,14px);font:800 clamp(2.4rem,6vw,5.6rem)/1 var(--titel);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.95);text-shadow:0 6px 30px rgba(0,0,0,.35);pointer-events:none}
.fm-stil-text{display:flex;gap:18px;align-items:baseline;padding:16px 4px 0}
.fm-stil-text h3{margin:0;font:700 1.05rem var(--lauf);color:#fff;white-space:nowrap}
.fm-stil-text p{margin:0;color:rgba(243,245,246,.72);font-size:.95rem;line-height:1.5}
.fm-band-leiste{margin:0 max(16px,calc((100vw - var(--breite,1200px)) / 2));height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.fm-band-leiste i{display:block;height:100%;background:#9DB3F2;transform:scaleX(var(--p,0));transform-origin:0 50%}
.fm-liste{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px}
.fm-liste li,.fm-schritte li{position:relative;padding:22px 20px 22px;border-radius:20px;background:var(--flaeche-1);border:1px solid var(--linie)}
.fm-liste li::before,.fm-schritte li::before{content:"";position:absolute;left:20px;top:0;width:36px;height:3px;border-radius:0 0 3px 3px;background:var(--akzent-flaeche)}
.fm-liste b,.fm-schritte b{display:block;font:700 1.05rem/1.3 var(--titel);color:var(--tinte);margin-bottom:6px}
.fm-liste span,.fm-schritte span{color:var(--text);font-size:.95rem;line-height:1.55}
.fm-schritte{list-style:none;margin:28px 0 26px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
/* Handy und Tablet: keine klebende Bühne, die Bildsprachen wischt man seitlich */
@media(max-width:899px){
  .fm-band{height:auto!important;padding:56px 0 48px}
  .fm-band-kulisse{position:static;height:auto}
  .fm-spur{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;transform:none!important;padding-bottom:6px;scrollbar-width:none}
  .fm-spur::-webkit-scrollbar{display:none}
  .fm-stil{flex-basis:84vw;scroll-snap-align:center}
  .fm-stil-text{flex-direction:column;gap:4px}
  .fm-band-leiste{display:none}
  .fm-reel-stile{left:16px;right:auto;top:calc(var(--kopf,64px) + 18px);bottom:auto;text-align:left;grid-auto-flow:column;gap:12px}
  .fm-reel-stile li:not(.an){display:none}
  .fm-titel{max-width:none}
}
@media(prefers-reduced-motion:reduce){.fm-reel-stile li{transition:none}}
/* Filme-Bühne lesbar auf hellen Zeichnungen */
.fm-schleier{background:linear-gradient(90deg,rgba(11,13,16,.9) 0%,rgba(11,13,16,.68) 42%,rgba(11,13,16,.2) 78%,rgba(11,13,16,.1) 100%),linear-gradient(180deg,rgba(11,13,16,.5) 0%,rgba(11,13,16,0) 30%,rgba(11,13,16,.35) 70%,rgba(11,13,16,.9) 100%)}
.fm-buehne .marke-zeile,.fm-buehne h1.marke-zeile{color:#C9D6FA;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.fm-titel,.fm-lead{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.fm-titel em{-webkit-text-stroke:2px #fff}
.fm-buehne .knopf.licht{background:#fff;color:#0E1012}
.fm-buehne .knopf.metall{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
@media(max-width:899px){.fm-schleier{background:linear-gradient(180deg,rgba(11,13,16,.55) 0%,rgba(11,13,16,.55) 40%,rgba(11,13,16,.88) 100%)}}
@media(min-width:900px){.fm-reel-stile{bottom:calc(clamp(40px,8vh,90px) + 72px)}}

/* ---------- Filme-Kopf (Ervin 23.10.2026): Scroll-Reise durch elf Bildsprachen ---------- */
.fm-reise{position:relative;height:720svh;background:#0B0D10;color:#F3F5F6}
.fm-reise-kulisse{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:flex-end;padding:calc(var(--kopf,64px) + 40px) 0 clamp(40px,8vh,90px)}
.fm-reise-bild,.fm-reise-bild img,.fm-reise-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-reise-film{opacity:0;transition:opacity .5s}
.fm-reise.bereit .fm-reise-film{opacity:1}
.fm-reise .fm-schleier{background:linear-gradient(90deg,rgba(11,13,16,.82) 0%,rgba(11,13,16,.45) 38%,rgba(11,13,16,0) 70%),linear-gradient(180deg,rgba(11,13,16,.45) 0%,rgba(11,13,16,0) 28%,rgba(11,13,16,0) 72%,rgba(11,13,16,.7) 100%)}
.fm-reise .fm-buehne-text{will-change:opacity,transform}
.fm-reise .brot,.fm-reise .brot a,.fm-reise .brot b{color:rgba(243,245,246,.75)}
.fm-reise .marke-zeile,.fm-reise h1.marke-zeile{color:#C9D6FA;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.fm-reise .held-reihe{margin-top:26px}
.fm-reise .knopf.licht{background:#fff;color:#0E1012}
.fm-reise .knopf.metall{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.fm-reise-hinweis{position:absolute;z-index:1;left:50%;bottom:22px;transform:translateX(-50%);margin:0;font:600 .72rem var(--lauf);letter-spacing:.2em;text-transform:uppercase;color:rgba(243,245,246,.7)}
.fm-reise-hinweis::after{content:"";display:block;width:1px;height:28px;margin:8px auto 0;background:linear-gradient(rgba(243,245,246,.7),rgba(243,245,246,0))}
.fm-reise-anzeige{position:absolute;z-index:1;left:max(clamp(20px,5vw,72px),calc((100vw - var(--breite)) / 2));top:50%;transform:translateY(-50%);display:grid;justify-items:start;gap:14px;text-align:left;opacity:0}
.fm-reise-nr{margin:0;font:800 clamp(2.4rem,4vw,3.6rem)/1 var(--titel);letter-spacing:-.04em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.fm-reise-nr span{font-size:.36em;font-weight:600;letter-spacing:.06em;margin-left:8px;color:rgba(243,245,246,.6)}
.fm-reise-stile{list-style:none;margin:0;padding:10px 14px;display:grid;gap:7px;border-radius:14px;background:rgba(11,13,16,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.fm-reise-stile li{font:600 .8rem var(--lauf);letter-spacing:.08em;text-transform:uppercase;color:rgba(243,245,246,.42);transition:color .3s}
.fm-reise-stile li.an{color:#fff}
.fm-reise-stile li.an::before{content:"";display:inline-block;width:22px;height:2px;margin-right:10px;vertical-align:middle;background:#9DB3F2}
.fm-reise-leiste{width:160px;height:2px;background:rgba(243,245,246,.2);border-radius:2px;overflow:hidden}
.fm-reise-leiste i{display:block;height:100%;background:#9DB3F2;transform-origin:left;transform:scaleX(var(--p,0))}
@media(max-width:899px){
  .fm-reise{height:640svh}
  .fm-reise .fm-schleier{background:linear-gradient(180deg,rgba(11,13,16,.55) 0%,rgba(11,13,16,0) 30%,rgba(11,13,16,.25) 58%,rgba(11,13,16,.9) 100%)}
  .fm-reise .fm-titel{max-width:none}
  .fm-reise-anzeige{top:auto;bottom:22px;left:16px;right:16px;transform:none;grid-template-columns:auto 1fr;align-items:center;justify-items:start;text-align:left;gap:12px}
  .fm-reise-nr{font-size:2rem}
  .fm-reise-stile{padding:8px 14px;border-radius:999px}
  .fm-reise-stile li:not(.an){display:none}
  .fm-reise-leiste{grid-column:1/-1;width:100%}
  .fm-reise-hinweis{display:none}
}
@media(prefers-reduced-motion:reduce){.fm-reise{height:auto}.fm-reise-kulisse{position:relative}.fm-reise-anzeige{display:none}}

/* ---------- E-Mail-Marketing (Ervin 23.10.2026, zweite Fassung) ---------- */
/* Mail-Bilder hell/dunkel folgen dem Seitenthema */
/* Mit !important, weil Bauteile ihre Bilder auf display:block setzen */
:root[data-theme="hell"] img.em-dk{display:none!important}
:root[data-theme="dunkel"] img.em-hl{display:none!important}
@media (prefers-color-scheme:light){:root:not([data-theme]) img.em-dk{display:none!important}}
@media (prefers-color-scheme:dark){:root:not([data-theme]) img.em-hl{display:none!important}}
.em-hl,.em-dk{max-width:100%;height:auto}
/* Farben der nachgebauten Mailprogramme (nur Aufbau, keine fremden Logos) */
:root{--em-app:#F6F8FC;--em-app-2:#FFFFFF;--em-app-linie:#E3E7EC;--em-app-text:#1F1F1F;--em-app-grau:#5F6368;--em-pill:#D3E3FD;--em-suche:#E9EEF6;--em-schreiben:#C2E7FF;--em-o-blau:#0F6CBD;--em-o-flaeche:#F5F5F5;--em-o-wahl:#CFE4FA}
:root[data-theme="dunkel"]{--em-app:#1B1C1E;--em-app-2:#232427;--em-app-linie:#34363A;--em-app-text:#E8EAED;--em-app-grau:#9AA0A6;--em-pill:#3A4A63;--em-suche:#2C2E31;--em-schreiben:#2E4A63;--em-o-blau:#1B3A5C;--em-o-flaeche:#202124;--em-o-wahl:#2A3F57}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--em-app:#1B1C1E;--em-app-2:#232427;--em-app-linie:#34363A;--em-app-text:#E8EAED;--em-app-grau:#9AA0A6;--em-pill:#3A4A63;--em-suche:#2C2E31;--em-schreiben:#2E4A63;--em-o-blau:#1B3A5C;--em-o-flaeche:#202124;--em-o-wahl:#2A3F57}}

/* Gemeinsame Bauteile */
.em-kopf-mitte{text-align:center;max-width:780px;margin:0 auto clamp(28px,4vw,48px)}
.em-kopf-mitte h2{font:800 clamp(2.2rem,4.6vw,4rem)/1 var(--titel);font-stretch:106%;letter-spacing:-.045em;margin:10px 0 16px;color:var(--tinte)}
.em-kopf-mitte h2 em{font-style:normal;color:var(--akzent-text)}
.em-kopf-mitte .lead{margin:0 auto;max-width:58ch}
.em-mitte{justify-content:center}
.em-fenster{border-radius:16px;overflow:hidden;background:var(--em-app);border:1px solid var(--em-app-linie);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 50px 100px -40px rgb(var(--schatten-rgb) / .45),0 20px 40px -24px rgb(var(--schatten-rgb) / .3);color:var(--em-app-text);font:13px/1.4 var(--lauf);text-align:left}
.em-titelleiste{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:var(--em-app);border-bottom:1px solid var(--em-app-linie)}
.em-titelleiste i{width:12px;height:12px;border-radius:50%;background:#D5D8DC}
.em-titelleiste i:nth-child(1){background:#FF5F57}.em-titelleiste i:nth-child(2){background:#FEBC2E}.em-titelleiste i:nth-child(3){background:#28C840}
.em-titelleiste span{margin-left:auto;margin-right:auto;transform:translateX(-24px);font-weight:600;color:var(--em-app-grau)}
/* Gmail-Aufbau */
.em-g-kopf{display:flex;align-items:center;gap:16px;padding:10px 16px}
.em-g-menue{width:18px;height:12px;border-top:2px solid var(--em-app-grau);border-bottom:2px solid var(--em-app-grau);position:relative}
.em-g-menue::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid var(--em-app-grau)}
.em-g-marke{font:600 20px var(--lauf);color:var(--em-app-grau);width:150px}
.em-g-suche{flex:1;max-width:620px;padding:11px 18px;border-radius:999px;background:var(--em-suche);color:var(--em-app-grau)}
.em-g-ich{margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#7B5CC4;color:#fff;font-weight:700}
.em-g-rumpf{display:grid;grid-template-columns:200px 1fr;min-height:0}
.em-g-nav{display:grid;align-content:start;gap:2px;padding:6px 8px 16px}
.em-g-nav span{display:flex;justify-content:space-between;padding:7px 14px;border-radius:999px;color:var(--em-app-text)}
.em-g-nav span.an{background:var(--em-pill);font-weight:700}
.em-g-nav .em-g-schreiben{display:inline-block;justify-self:start;margin:0 0 12px;padding:14px 22px;border-radius:16px;background:var(--em-schreiben);font-weight:600}
.em-g-inhalt{margin:0 14px 14px 0;border-radius:16px;background:var(--em-app-2);overflow:hidden}
.em-liste{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--em-app-linie)}
.em-liste li{display:grid;grid-template-columns:150px 1fr auto;gap:12px;padding:9px 18px;border-top:1px solid var(--em-app-linie);color:var(--em-app-grau);white-space:nowrap}
.em-liste li:first-child{border-top:0}
.em-liste li span{overflow:hidden;text-overflow:ellipsis}
.em-liste li em{font-style:normal;color:var(--em-app-text)}
.em-liste li.neu{background:var(--em-app-2);color:var(--em-app-text);font-weight:700;box-shadow:inset 3px 0 0 var(--akzent-flaeche)}
.em-liste li.neu em{font-weight:700}
.em-lesen{padding:18px 22px 0;position:relative}
.em-lese-kopf{padding:0 0 12px}
.em-betreff{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:400 21px/1.3 var(--lauf);color:var(--em-app-text)}
.em-etikett{font-size:11px;padding:2px 8px;border-radius:4px;background:var(--em-suche);color:var(--em-app-grau)}
.em-von{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:0;color:var(--em-app-text)}
.em-von i{font-style:normal;color:var(--em-app-grau)}
.em-von small,.em-von time{color:var(--em-app-grau);font-size:12px}
.em-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--em-app-2);border:1px solid var(--em-app-linie);overflow:hidden}
.em-av img{width:30px;height:auto}
.em-av-leer{background:#9AA0A6;color:#fff;font-weight:700;border:0}
.em-mailbild{height:440px;overflow:hidden;margin:0 -22px;padding:0 22px;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.em-mailbild img{width:100%;max-width:560px;display:block;margin:0 auto;border-radius:10px}
.em-nurtext{padding:8px 0 40px 52px;font:14px/1.6 Arial,Helvetica,sans-serif;color:var(--em-app-text);min-height:260px}
.em-nurtext p{margin:0 0 14px;max-width:46ch}
/* Outlook-Aufbau */
.em-o-leiste{background:var(--em-o-blau);border:0}
.em-o-suche{margin:0 auto;transform:none!important;width:min(380px,40%);padding:4px 12px;border-radius:6px;background:rgba(255,255,255,.18);color:rgba(255,255,255,.85)!important;font-weight:400!important;text-align:left}
.em-o-band{display:flex;gap:18px;align-items:center;padding:8px 16px;background:var(--em-o-flaeche);border-bottom:1px solid var(--em-app-linie);color:var(--em-app-grau)}
.em-o-neu{margin-left:8px;padding:5px 12px;border-radius:5px;background:var(--em-o-blau);color:#fff}
.em-o-rumpf{display:grid;grid-template-columns:180px 300px 1fr;background:var(--em-app-2)}
.em-o-ordner{display:grid;align-content:start;gap:2px;padding:12px 8px;background:var(--em-o-flaeche);border-right:1px solid var(--em-app-linie)}
.em-o-ordner b{padding:4px 10px;font-size:12px;color:var(--em-app-grau)}
.em-o-ordner span{display:flex;justify-content:space-between;padding:6px 10px;border-radius:4px}
.em-o-ordner span.an{background:var(--em-o-wahl);font-weight:700}
.em-o-ordner i{font-style:normal;color:var(--em-o-blau)}
:root[data-theme="dunkel"] .em-o-ordner i{color:#9DB3F2}
.em-o-liste{list-style:none;margin:0;padding:0;border-right:1px solid var(--em-app-linie)}
.em-o-liste li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 14px;border-bottom:1px solid var(--em-app-linie)}
.em-o-liste li span{grid-column:1/-1;color:var(--em-app-grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-o-liste li time{color:var(--em-app-grau);font-size:12px}
.em-o-liste li.an{background:var(--em-o-wahl);box-shadow:inset 3px 0 0 var(--em-o-blau)}
.em-o-liste li.an b,.em-o-liste li.an span{font-weight:700;color:var(--em-app-text)}
.em-o-reiter{display:flex!important;gap:16px;padding:8px 14px!important}
.em-o-reiter span{grid-column:auto!important;color:var(--em-app-grau)}
.em-o-reiter span.an{color:var(--em-app-text)!important;font-weight:700;box-shadow:0 2px 0 var(--em-o-blau)}
.em-outlook .em-etikett{display:none}
/* Handy */
.em-handy{position:relative;width:300px;aspect-ratio:780/1688;padding:11px;border-radius:54px;background:linear-gradient(145deg,#4A5056,#16191C 40%,#2A2F34 70%,#0E1012);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 50px 90px -30px rgb(var(--schatten-rgb) / .55),0 18px 30px -18px rgb(var(--schatten-rgb) / .4)}
.em-schirm{position:relative;width:100%;height:100%;border-radius:43px;overflow:hidden;background:#fff}
.em-schirm>img,.em-schirm iframe{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border:0}
.em-insel{position:absolute;z-index:3;top:20px;left:50%;width:30%;height:25px;transform:translateX(-50%);border-radius:20px;background:#0B0D10}
.em-gross{width:min(330px,74vw)}

.em-titel{font:800 clamp(2.8rem,6vw,5.6rem)/.94 var(--titel);font-stretch:108%;letter-spacing:-.055em;margin:16px auto 20px;max-width:15ch;color:var(--tinte)}
.em-titel em{display:block;font-style:normal;background:linear-gradient(90deg,var(--akzent-tief),var(--akzent-text) 60%,#8AA6F0);-webkit-background-clip:text;background-clip:text;color:transparent}
.em-sperr,.em-sz-sperr{height:100%;padding:58px 12px 0;background:radial-gradient(120% 70% at 30% 10%,#3B5BB8 0%,#1B2440 45%,#0B0D12 100%);color:#fff;text-align:center}
.em-sz-sperr .em-sperr-zeit,.em-sperr-zeit{margin:0;font:600 64px/1 var(--lauf);letter-spacing:-.03em}
.em-sperr-datum{margin:6px 0 26px;font:500 15px var(--lauf);opacity:.85}
.em-push{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:12px;border-radius:20px;background:rgba(245,245,247,.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#111;text-align:left;font:12.5px/1.35 var(--lauf)}
.em-push small{float:right;color:#666}
.em-push-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(180deg,#5AA6FF,#1E6FE8);position:relative}
.em-push-icon::after{content:"";position:absolute;inset:10px 7px;border:2px solid #fff;border-radius:3px;background:linear-gradient(to bottom right,transparent 46%,#fff 47%,#fff 53%,transparent 54%),linear-gradient(to bottom left,transparent 46%,#fff 47%,#fff 53%,transparent 54%);background-size:100% 100%}
@keyframes em-auf{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes em-push{from{opacity:0;transform:translateY(-30px) scale(.96)}to{opacity:1;transform:none}}

/* 2 · Postfach mit Umschalter */
.em-postfach{background:var(--flaeche-2)}
.em-reiter{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.em-reiter button{padding:9px 16px;border-radius:999px;border:0;background:none;color:var(--grau);font:600 .9rem var(--lauf);cursor:pointer}
.em-reiter button.an{background:var(--tinte);color:var(--grund)}
.em-reiter-gross{display:flex;width:max-content;margin:0 auto 28px}
.em-reiter-gross button{padding:11px 26px;font-size:1rem}
.em-programm{display:none}
.em-programm.an{display:block;animation:em-auf .5s cubic-bezier(.2,.8,.2,1)}
.em-programm .em-fenster{max-width:1100px;margin:0 auto}
.em-mit-liste .em-mailbild{height:360px}
.em-unter{text-align:center;color:var(--grau);margin:18px 0 0;font-size:.95rem}
.em-iphone-paar{display:flex;justify-content:center;gap:clamp(16px,4vw,48px)}

/* 3 · Vergleich */
.em-vergleich-paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px)}
.em-v-seite{margin:0;display:grid;gap:20px}
.em-klein .em-g-kopf,.em-klein .em-g-nav{display:none}
.em-klein .em-g-rumpf{grid-template-columns:1fr}
.em-klein .em-g-inhalt{margin:12px}
.em-klein .em-mailbild{height:330px}
.em-v-seite:first-child .em-fenster{filter:saturate(.7)}
.em-v-seite figcaption{display:grid;gap:8px}
.em-v-seite figcaption b{font:700 1.2rem var(--titel);color:var(--tinte)}
.em-v-seite ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;color:var(--text)}
.em-v-seite li::before{content:"–";margin-right:10px;color:var(--grau)}
.em-v-gut li::before{content:"✓";color:var(--akzent-text)}

/* 4 · Bento */
.em-nutzen{background:var(--flaeche-2)}
.em-bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.em-kachel{display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:28px;background:var(--flaeche-1);border:1px solid var(--rand-linie);min-height:300px}
.em-kachel.gross{grid-column:span 2;grid-row:span 1}
.em-kachel.breit{grid-column:span 2}
.em-kachel b{font:700 1.3rem/1.2 var(--titel);color:var(--tinte);margin-top:auto}
.em-kachel span{color:var(--text);line-height:1.55}
.em-kachel-bild{flex:1;display:grid;place-items:center;min-height:120px;margin-bottom:12px}
.em-mini-push{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;width:min(100%,380px);padding:14px 16px;border-radius:20px;background:var(--flaeche-2);box-shadow:0 18px 40px -20px rgb(var(--schatten-rgb) / .35);font-size:.92rem;color:var(--tinte)}
.em-mini-logo{width:42px;height:42px;padding:6px;border-radius:11px;background:var(--flaeche-1);display:grid;place-items:center}
.em-mini-logo img{width:30px;height:auto}
.em-mini-push small{float:right;color:var(--grau)}
.em-mini-kal{display:grid;justify-items:center;width:150px;padding:14px 10px 16px;border-radius:22px;background:var(--flaeche-2)}
.em-mini-kal span{font:700 .8rem var(--lauf);letter-spacing:.1em;text-transform:uppercase;color:#C2312F}
.em-mini-kal b{font:800 3.6rem/1 var(--titel);color:var(--tinte)}
.em-mini-kal small{color:var(--grau);font-size:.8rem}
.em-mini-zeit{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px;font:600 .82rem var(--lauf);color:var(--grau)}
.em-mini-zeit li{padding:8px 12px;border-radius:999px;border:1px dashed var(--rand-feld)}
.em-mini-zeit li.an{border:0;background:var(--akzent-flaeche);color:var(--auf-akzent)}
.em-mini-fragen{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:min(100%,240px)}
.em-mini-fragen li{padding:9px 14px;border-radius:16px 16px 16px 4px;background:var(--flaeche-2);color:var(--tinte);font-size:.88rem;text-decoration:line-through;text-decoration-color:var(--akzent-text);text-decoration-thickness:2px}
.em-mini-sterne{margin:0;font-size:2.4rem;letter-spacing:.08em;color:#F5B400}
.em-mini-stapel{width:100%;height:150px;overflow:hidden;border-radius:16px 16px 0 0;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.em-mini-stapel img{width:70%;margin:0 auto;display:block;border-radius:14px;box-shadow:0 10px 30px -10px rgb(var(--schatten-rgb) / .3)}

/* 5 · Ablauf, dunkle Bühne */
.em-ablauf{padding:clamp(72px,10vw,140px) 0;background:#0B0D10;color:#F3F5F6}
.em-ablauf .marke-zeile{color:#9DB3F2}
.em-ablauf h2{font:800 clamp(2.2rem,4.6vw,4rem)/1 var(--titel);letter-spacing:-.045em;margin:10px 0 0;color:#fff}
.em-ablauf h2 em{font-style:normal;color:#9DB3F2}
.em-ablauf-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px)}
.em-schritte{list-style:none;margin:24px 0 0;padding:0}
.em-schritt{min-height:62vh;display:flex;flex-direction:column;justify-content:center;--em-s:#7D868E}
.em-schritt.an{--em-s:#fff}
.em-schritt h3,.em-schritt p,.em-schritt .em-nr{transition:color .45s}
.em-schritt h3{font:700 clamp(1.6rem,2.6vw,2.3rem)/1.12 var(--titel);margin:8px 0 12px;color:var(--em-s)}
.em-schritt p{max-width:40ch;line-height:1.6;color:var(--em-s);margin:0}
.em-schritt.an p{color:#C8CED3}
.em-nr{font:600 .8rem var(--lauf);letter-spacing:.16em;color:var(--em-s)}
.em-schritt.an .em-nr{color:#9DB3F2}
.em-ablauf-buehne{position:sticky;top:calc(var(--kopf,64px) + 4vh);height:calc(100svh - var(--kopf,64px) - 8vh);display:flex;align-items:center;justify-content:center}
.em-ablauf-buehne::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#2B4FB0 0%,transparent 65%);opacity:.5;filter:blur(40px)}
.em-folie{position:absolute;inset:0;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.em-folie.an{opacity:1;transform:none}
.em-folie img{width:100%;height:100%;object-fit:cover;object-position:top}
.em-schritt-bild{display:none}

/* 6 · CRM */
.em-crm-fenster{border-radius:18px;overflow:hidden;border:1px solid var(--rand-linie);background:var(--flaeche-1);box-shadow:0 50px 100px -50px rgb(var(--schatten-rgb) / .4)}
.em-crm-fenster .em-titelleiste{background:var(--flaeche-2);border-color:var(--rand-linie)}
.em-crm-inhalt{display:grid;grid-template-columns:1fr 300px}
.em-crm-brett{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px}
.em-spalte{display:grid;align-content:start;gap:10px}
.em-spalte h3{display:flex;justify-content:space-between;margin:0 0 4px;font:600 .78rem var(--lauf);letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
.em-karte{display:grid;gap:3px;padding:12px 14px;border-radius:14px;background:var(--flaeche-2);border:1px solid var(--rand-linie);font-size:.88rem}
.em-karte b{color:var(--tinte)}
.em-karte span{color:var(--text)}
.em-karte em{font-style:normal;font-size:.78rem;color:var(--grau)}
.em-karte.an{border-color:var(--akzent-text);box-shadow:0 0 0 3px rgb(43 79 176 / .16)}
.em-crm-detail{padding:20px;border-left:1px solid var(--rand-linie);background:var(--flaeche-2)}
.em-crm-name{display:grid;margin:0 0 16px}
.em-crm-name b{font:700 1.1rem var(--titel);color:var(--tinte)}
.em-crm-name span{color:var(--grau);font-size:.88rem}
.em-verlauf{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--rand-linie);display:grid;gap:14px}
.em-verlauf li{position:relative;display:grid;gap:1px;font-size:.86rem}
.em-verlauf li::before{content:"";position:absolute;left:-21px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--flaeche-1);border:2px solid var(--grau)}
.em-verlauf li.auto::before{border-color:var(--akzent-text);background:var(--akzent-text)}
.em-verlauf time{font:600 .74rem var(--lauf);color:var(--grau)}
.em-verlauf b{color:var(--tinte)}
.em-verlauf span{color:var(--text)}
.em-crm-link{margin:18px 0 0;text-align:center}

/* 7 · Baukasten mit Anfrage */
.em-bk{background:var(--flaeche-2)}
.em-schloss{margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:26px 30px;border-radius:28px;background:var(--flaeche-1);border:1px solid var(--rand-linie);max-width:760px}
.em-schloss img{width:84px;height:auto}
.em-schloss label{font:600 .8rem var(--lauf);letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.em-schloss-reihe{display:flex;gap:10px;margin:8px 0}
.em-schloss input{flex:1;min-width:0;height:50px;padding:0 16px;border-radius:14px;border:1px solid var(--rand-feld);background:var(--flaeche-2);color:var(--tinte);font:600 16px var(--lauf);letter-spacing:.06em}
.em-schloss-hinweis{margin:0;color:var(--text);font-size:.92rem}
.em-schloss-hinweis.fehler{color:#C2372B}
.em-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,3vw,40px);align-items:start;padding:clamp(16px,2.4vw,28px);border-radius:32px;background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 50px 100px -60px rgb(var(--schatten-rgb) / .4)}
.em-studio[hidden]{display:none}
.em-felder{display:grid;gap:14px}
.em-felder fieldset{margin:0;padding:18px;border:1px solid var(--rand-linie);border-radius:20px;display:grid;gap:12px;background:var(--flaeche-2)}
.em-felder legend{display:flex;align-items:center;gap:10px;padding:0 6px;font:700 1rem var(--titel);color:var(--tinte)}
.em-felder legend span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--tinte);color:var(--grund);font:700 .78rem var(--lauf)}
.em-felder label,.em-anfrage label{display:grid;gap:6px;font:600 .74rem var(--lauf);letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.em-felder input:not([type=file]):not([type=color]),.em-felder select,.em-felder textarea,.em-anfrage input:not([type=checkbox]),.em-anfrage textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:400 16px/1.45 var(--lauf);letter-spacing:0;text-transform:none}
.em-felder input[type=color]{width:100%;height:48px;padding:4px;border-radius:12px;border:1px solid var(--rand-feld);background:var(--flaeche-1)}
.em-zeile2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.em-dateien{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.em-datei{position:relative;cursor:pointer}
.em-datei input{position:absolute;inset:0;opacity:0;cursor:pointer}
.em-datei span{display:block;padding:13px;border-radius:12px;border:1px dashed var(--rand-feld);background:var(--flaeche-1);text-align:center;color:var(--tinte);font-size:.85rem;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-datei.voll span{border-style:solid;border-color:var(--akzent-text)}
.em-robo{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 6px;border-radius:999px;border:0;background:var(--akzent-flaeche);color:var(--auf-akzent);font:600 .9rem var(--lauf);cursor:pointer}
.em-robo img{width:30px;height:auto}
.em-privat{margin:0;font-size:.85rem;color:var(--grau)}
.em-datei-hinweis{margin:0;font-size:.8rem;line-height:1.45;color:var(--grau);text-transform:none;letter-spacing:0;font-weight:400}
small.em-datei-hinweis{display:block;margin-top:6px}
.em-vorschau{display:grid;justify-items:center;gap:16px;position:sticky;top:calc(var(--kopf,64px) + 20px)}
.em-v-rahmen{width:100%;display:flex;justify-content:center}
.em-v-rahmen[hidden],.em-code[hidden]{display:none}
.em-bk-gmail{width:100%}
.em-bk-gmail .em-lese-kopf{padding:16px 20px 10px}
.em-bk-gmail iframe{display:block;width:100%;height:520px;border:0;background:var(--em-app-2)}
.em-code{width:100%}
.em-code pre{max-height:520px;overflow:auto;margin:0 0 12px;padding:16px;border-radius:16px;background:#0E1012;color:#C9D6FA;font:12px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
.em-will{width:100%;padding:22px;border-radius:22px;background:linear-gradient(135deg,var(--flaeche-blau),var(--flaeche-2));border:1px solid var(--rand-linie);display:grid;gap:14px;text-align:left}
.em-will>p{margin:0;color:var(--text);line-height:1.5}
.em-will>p b{color:var(--tinte)}
.em-will>.knopf{justify-self:start}
.em-anfrage{display:grid;gap:12px}
.em-anfrage[hidden]{display:none}
.em-ok{display:flex!important;gap:10px;align-items:flex-start;text-transform:none!important;letter-spacing:0!important;font:400 .88rem/1.45 var(--lauf)!important;color:var(--text)!important}
.em-ok input{margin-top:3px;width:18px;height:18px;flex:none}
.em-falle{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.em-anfrage-hinweis{margin:0;color:var(--text)}
.em-anfrage-hinweis.gut{color:var(--akzent-text);font-weight:600}

/* 8 · Fragen */
.em-faq{display:grid;gap:10px;margin:0 auto 28px;max-width:820px}
.em-faq details{padding:18px 22px;border-radius:18px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.em-faq summary{cursor:pointer;font:700 1.05rem var(--titel);color:var(--tinte)}
.em-faq p{margin:10px 0 0;line-height:1.6;color:var(--text)}

@media(max-width:1100px){.em-o-rumpf{grid-template-columns:150px 240px 1fr}.em-g-rumpf{grid-template-columns:160px 1fr}}
@media(max-width:899px){
  .em-programm .em-fenster{overflow-x:auto}
  .em-g-nav,.em-g-marke,.em-o-ordner{display:none}
  .em-g-rumpf{grid-template-columns:1fr}
  .em-g-inhalt{margin:0 8px 8px}
  .em-liste li{grid-template-columns:96px 1fr auto}
  .em-o-rumpf{grid-template-columns:1fr}
  .em-o-liste{display:none}
  .em-o-band span:not(.em-o-neu){display:none}
  .em-mailbild{height:380px}
  .em-iphone-paar .em-handy{width:44vw}
  .em-vergleich-paar{grid-template-columns:1fr}
  .em-bento{grid-template-columns:1fr}
  .em-kachel.gross,.em-kachel.breit{grid-column:auto}
  .em-kachel{min-height:0}
  .em-ablauf-raster{grid-template-columns:1fr}
  .em-ablauf-buehne{display:none}
  .em-schritt{min-height:auto;--em-s:#fff;padding:26px 0;border-top:1px solid #2E343A}
  .em-schritt p{color:#C8CED3}
  .em-schritt .em-nr{color:#9DB3F2}
  .em-schritt-bild{display:block;margin-top:20px}
  .em-schritt-bild .em-handy{width:min(250px,64vw)}
  .em-crm-inhalt{grid-template-columns:1fr}
  .em-crm-brett{grid-template-columns:repeat(4,78%);overflow-x:auto;scroll-snap-type:x mandatory}
  .em-spalte{scroll-snap-align:start}
  .em-crm-detail{border-left:0;border-top:1px solid var(--rand-linie)}
  .em-schloss{grid-template-columns:1fr}
  .em-schloss img{display:none}
  .em-schloss-reihe{flex-direction:column}
  .em-studio{grid-template-columns:1fr;padding:12px}
  .em-vorschau{position:static}
  .em-zeile2,.em-dateien{grid-template-columns:1fr}
  .em-bk-gmail iframe{height:460px}
}
@media(prefers-reduced-motion:reduce){.em-folie,.em-schritt h3,.em-schritt p{transition:none}.em-programm.an{animation:none}}
:root[data-theme="dunkel"] .em-mini-kal span{color:#FF8A84}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .em-mini-kal span{color:#FF8A84}}

/* ---------- E-Mail-Marketing, dritte Fassung (Ervin 23.10.2026 abends) ---------- */
.em-unsichtbar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 1 · Kopf als Geschichte */
.em-story{position:relative;height:640svh;background:radial-gradient(60% 50% at 75% 45%,var(--flaeche-blau) 0%,transparent 70%),var(--grund)}
.em-story-kulisse{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;padding-top:var(--kopf,64px)}
.em-story-raster{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,6vw,96px);align-items:center}
.em-story-links .em-titel{text-align:left;margin:14px 0 0;max-width:13ch;font-size:clamp(2.6rem,5.2vw,5rem)}
.em-st-texte{position:relative;list-style:none;margin:30px 0 0;padding:0;min-height:190px;max-width:34rem}
.em-st-text{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.em-st-text.an{opacity:1;transform:none;pointer-events:auto}
.em-st-text .em-nr{color:var(--akzent-text)}
.em-st-text h2{font:700 clamp(1.5rem,2.4vw,2.2rem)/1.15 var(--titel);letter-spacing:-.02em;margin:8px 0 10px;color:var(--tinte)}
.em-st-text p{margin:0;line-height:1.6;color:var(--text);font-size:1.05rem}
.em-st-fortschritt{width:220px;height:3px;border-radius:3px;background:var(--rand-linie);overflow:hidden}
.em-st-fortschritt i{display:block;height:100%;background:var(--akzent-flaeche);transform-origin:left;transform:scaleX(var(--p,0))}
.em-st-hinweis{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);margin:0;font:600 .72rem var(--lauf);letter-spacing:.2em;text-transform:uppercase;color:var(--grau)}
.em-story-handy{width:min(360px,calc((100svh - var(--kopf,64px) - 70px) * .462))}
.em-sz{position:absolute;inset:0;opacity:0;transition:opacity .55s}
.em-sz.an{opacity:1}
/* Szene Website */
.em-sz-web{background:#FBF6EF;color:#2B211B;font:13px/1.4 var(--lauf);padding:48px 0 0}
.em-web-leiste{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-bottom:1px solid #EADFD2}
.em-web-leiste b{font:800 15px var(--titel);color:#7A3F22}
.em-web-held{padding:18px 18px 10px}
.em-web-held small{color:#6A5344;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.em-web-held p{margin:6px 0 0;font:800 26px/1.05 var(--titel);letter-spacing:-.03em}
.em-web-form{margin:10px 14px;padding:16px;border-radius:18px;background:#fff;box-shadow:0 10px 30px -14px rgba(60,30,10,.3);display:grid;gap:10px}
.em-web-titel{margin:0;font-weight:700}
.em-web-feld{margin:0;display:grid;gap:4px}
.em-web-feld small{color:#6A5344;font-size:11px}
.em-web-feld span{display:block;min-height:34px;padding:8px 10px;border-radius:9px;border:1px solid #E3D6C8;background:#FFFDF9;font-size:12.5px}
.em-web-feld.lang span{min-height:52px}
.em-web-feld span.tippt::after{content:"";display:inline-block;width:1px;height:14px;margin-left:1px;vertical-align:-2px;background:#7A3F22;animation:em-blink 1s steps(1) infinite}
@keyframes em-blink{50%{opacity:0}}
.em-web-knopf{display:block;text-align:center;padding:11px;border-radius:999px;background:#7A3F22;color:#fff;font-weight:700;transition:background .3s,transform .2s}
.em-web-knopf.gedrueckt{transform:scale(.96)}
.em-web-knopf.fertig{background:#2F7A4A}
/* Szene Mail, baut sich auf */
.em-sz-mail{background:#fff;overflow:hidden}
.em-mm{height:100%;padding:52px 14px 14px;display:flex;flex-direction:column;gap:10px;color:#1E1A17;font:12.5px/1.45 var(--lauf)}
.em-mm-kopf{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:3px solid #7A3F22}
.em-mm-kopf b{font:800 15px var(--titel);color:#7A3F22}
.em-mm-kopf small{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#6A5344}
.em-mm-h{margin:0;font:800 19px/1.15 var(--titel);letter-spacing:-.02em}
.em-mm-p{margin:4px 0 0;color:#4A3F37}
.em-mm-bild{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:12px}
.em-mm-person{display:flex;gap:10px;align-items:center}
.em-mm-person span{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#7A3F22;color:#fff;font-weight:700;font-size:12px}
.em-mm-person p{margin:0;font-size:11.5px;color:#4A3F37}
.em-mm-person b{color:#1E1A17;font-size:12.5px}
.em-mm-video{position:relative;border-radius:12px;overflow:hidden;background:#000}
.em-mm-video img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block;opacity:.85}
.em-mm-video i,.em-mini-video i{position:absolute;left:50%;top:42%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(255,255,255,.95)}
.em-mm-video i::after,.em-mini-video i::after{content:"";position:absolute;left:15px;top:11px;border-left:14px solid #16191C;border-top:9px solid transparent;border-bottom:9px solid transparent}
.em-mm-video p{position:absolute;left:0;right:0;bottom:0;margin:0;padding:18px 10px 7px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:11px;font-weight:600}
.em-mm-termin{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:#F6EEE4}
.em-mm-termin small{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#6A5344}
.em-mm-termin b{font-size:14px}
.em-mm-termin span{color:#4A3F37;font-size:11.5px}
.em-mm-knopf{align-self:flex-start;padding:10px 16px;border-radius:999px;background:#7A3F22;color:#fff;font-weight:700}
.em-mm-teil{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.em-mm-teil.zu{opacity:1;transform:none}
/* Mail öffnen */
.em-oeffnen{display:inline-flex;align-items:center;gap:8px;margin:14px auto 18px;padding:9px 16px;border-radius:999px;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:600 .88rem var(--lauf);cursor:pointer;transition:background .2s,transform .2s}
.em-oeffnen:hover{background:var(--flaeche-2);transform:translateY(-1px)}
.em-oeffnen span{color:var(--akzent-text)}
.em-lesen>.em-oeffnen{display:flex;width:max-content}
.em-oeffnen-dunkel{position:absolute;bottom:2vh;left:50%;transform:translateX(-50%);margin:0;background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
.em-oeffnen-dunkel span{color:#9DB3F2}
.em-oeffnen-dunkel:hover{background:rgba(255,255,255,.18);transform:translateX(-50%)}
.em-ablauf-buehne{flex-direction:column}
.em-dialog{width:min(980px,94vw);height:min(92svh,1100px);padding:0;border:0;border-radius:24px;background:var(--flaeche-1);color:var(--tinte);box-shadow:0 60px 120px -40px rgba(0,0,0,.6);overflow:hidden}
.em-dialog[open]{display:flex;flex-direction:column}
.em-dialog::backdrop{background:rgba(11,13,16,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.em-dialog-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--rand-linie)}
.em-dialog-zu{width:40px;height:40px;border-radius:50%;border:1px solid var(--rand-linie);background:var(--flaeche-2);color:var(--tinte);font-size:16px;cursor:pointer}
.em-dialog-rumpf{flex:1;overflow:auto;padding:24px 16px;background:var(--flaeche-2);display:flex;justify-content:center;align-items:flex-start}
.em-dialog-rumpf img{display:block;width:100%;max-width:680px;height:auto;border-radius:14px;box-shadow:0 20px 50px -30px rgb(var(--schatten-rgb) / .4)}
.em-dialog-rumpf.handy img{max-width:390px}
/* 2 · Nutzen-Minis */
.em-mini-video{position:relative;width:min(100%,280px);border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -20px rgb(var(--schatten-rgb) / .4)}
.em-mini-video img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.em-mini-schritte{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:8px;width:min(100%,220px)}
.em-mini-schritte li{counter-increment:s;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--flaeche-2);color:var(--tinte);font-weight:600;font-size:.9rem}
.em-mini-schritte li::before{content:counter(s);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--tinte);color:var(--grund);font-size:.75rem}
.em-mini-tage{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:min(100%,230px)}
.em-mini-tage li{padding:9px 14px;border-radius:12px;border:1px dashed var(--rand-feld);color:var(--grau);font-size:.88rem}
.em-mini-tage li.an{border:0;background:var(--flaeche-2);color:var(--tinte);font-weight:600}
.em-mini-tage li.an::after{content:" ✓";color:var(--akzent-text)}
/* 3 · Newsletter-Jahr */
.em-jahr{list-style:none;margin:0 calc(50% - 50vw);padding:6px max(16px,calc(50vw - 640px)) 22px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,210px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.em-jahr li{scroll-snap-align:start;display:grid;gap:10px}
.em-j-monat{font:600 .75rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.em-j-mail{display:grid;gap:7px;padding:0 0 14px;border-radius:18px;overflow:hidden;background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 18px 40px -26px rgb(var(--schatten-rgb) / .4);aspect-ratio:3/4;align-content:start}
.em-j-mail i{height:72px;background:linear-gradient(135deg,var(--em-f),color-mix(in srgb,var(--em-f) 55%,#fff))}
.em-j-mail b{margin:4px 14px 0;font:800 1.05rem/1.15 var(--titel);color:var(--tinte)}
.em-j-mail span{height:7px;margin:0 14px;border-radius:4px;background:var(--rand-linie)}
.em-j-mail span+span{width:60%}
.em-j-mail em{justify-self:start;margin:6px 14px 0;width:84px;height:24px;border-radius:999px;background:var(--em-f)}
.em-jahr p{margin:0;font:700 1rem var(--titel);color:var(--tinte)}
.em-nl-zwei{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.em-nl-karte{padding:24px;border-radius:24px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.em-nl-karte b{font:700 1.2rem var(--titel);color:var(--tinte)}
.em-nl-karte p{margin:8px 0 0;line-height:1.55;color:var(--text)}
.em-nl-ok{background:var(--flaeche-blau)}
.em-nl-ok .em-oeffnen{margin:14px 0 0}
/* 4 · iPhone-Ansicht mit Bühne */
.em-iphone-buehne{max-width:1100px;margin:0 auto;padding:clamp(28px,5vw,64px) 16px;border-radius:32px;background:radial-gradient(70% 80% at 50% 0%,#3B5BB8 0%,#16213F 55%,#0B0D12 100%)}
.em-iphone-paar{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,5vw,64px)}
.em-iphone-paar figure{margin:0;display:grid;justify-items:center}
.em-iphone-paar .em-oeffnen{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3);margin-bottom:0}
.em-iphone-paar .em-oeffnen span{color:#9DB3F2}
.em-programm[data-em-ansicht="iphone"] .em-unter{margin-top:22px}
/* 7 · Tor und Studio */
.em-tor{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;max-width:1040px;margin:0 auto}
.em-tor-anruf{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:28px;border-radius:28px;background:var(--dunkelflaeche);color:#fff}
.em-tor-anruf img{width:96px;height:auto}
.em-tor-klein{margin:0;font:600 .78rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:#9DB3F2}
.em-tor-gross{margin:6px 0 16px;font:800 clamp(1.4rem,2.4vw,2rem)/1.1 var(--titel);letter-spacing:-.02em}
.em-tor-anruf .knopf.licht{background:#fff;color:#0E1012}
.em-tor-anruf .knopf.metall{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.em-tor .em-schloss{margin:0;display:grid;grid-template-columns:1fr;align-content:center;max-width:none}
.em-tor[hidden]{display:none}
.em-studio-links{display:grid;gap:16px;align-content:start}
.em-anima{padding:20px;border-radius:24px;background:var(--flaeche-blau);border:1px solid var(--rand-linie);display:grid;gap:14px}
.em-anima-sagt{display:flex;gap:12px;align-items:flex-start;margin:0}
.em-anima-sagt img{width:44px;height:auto;flex:none}
.em-anima-sagt span{padding:12px 16px;border-radius:4px 18px 18px 18px;background:var(--flaeche-1);color:var(--tinte);line-height:1.5;box-shadow:0 8px 20px -14px rgb(var(--schatten-rgb) / .3)}
.em-anima-form{display:grid;gap:10px}
.em-anima-form textarea{width:100%;padding:14px;border-radius:16px;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:400 16px/1.5 var(--lauf);resize:vertical}
.em-anima-form .knopf{justify-self:start}
.em-fein{border-radius:20px;border:1px solid var(--rand-linie);background:var(--flaeche-1)}
.em-fein summary{cursor:pointer;padding:16px 20px;font:700 1rem var(--titel);color:var(--tinte)}
.em-fein .em-felder{padding:0 14px 14px}
.em-schutz{position:relative;width:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.em-schutz iframe{pointer-events:none}
.em-wasser{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) rotate(-24deg);font:800 clamp(1.4rem,3vw,2.4rem) var(--titel);letter-spacing:.06em;color:rgba(120,130,140,.18);white-space:nowrap;pointer-events:none;text-transform:uppercase}
.em-v-scroll{max-height:560px;overflow:auto;overscroll-behavior:contain;background:var(--em-app-2)}
.em-bk-outlook .em-lese-kopf,.em-bk-gmail .em-lese-kopf{padding:16px 20px 10px}
.em-bk-gmail iframe,.em-bk-outlook iframe{display:block;width:100%;height:560px;border:0;background:var(--em-app-2)}
.em-schirm.em-scroll{overflow:auto;overscroll-behavior:contain}
.em-schirm iframe{height:100%}
@media(max-width:899px){
  .em-story{height:560svh}
  .em-story-raster{grid-template-columns:1fr;grid-template-rows:auto auto;gap:14px;justify-items:center}
  .em-story-links{order:2;width:100%}
  .em-story-links .brot,.em-story-links .em-titel{display:none}
  .em-story-links .h1-zeile{font-size:.68rem}
  .em-st-texte{margin-top:6px;min-height:150px}
  .em-st-text h2{font-size:1.3rem}
  .em-st-text p{font-size:.95rem}
  .em-story-buehne{order:1}
  .em-story-handy{width:min(250px,calc((100svh - var(--kopf,64px) - 250px) * .462))}
  .em-st-hinweis{display:none}
  .em-nl-zwei,.em-tor{grid-template-columns:1fr}
  .em-tor-anruf{grid-template-columns:1fr}
  .em-tor-anruf img{display:none}
  .em-iphone-paar .em-handy{width:40vw}
  .em-dialog{width:100vw;height:100svh;max-width:none;max-height:none;border-radius:0}
  .em-ablauf-buehne .em-oeffnen-dunkel{display:none}
  .em-schritt-bild .em-oeffnen{margin:14px 0 0;background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
}
@media(prefers-reduced-motion:reduce){.em-st-text,.em-sz,.em-mm-teil{transition:none}.em-story{height:auto}.em-story-kulisse{position:relative;height:auto;padding:calc(var(--kopf,64px) + 30px) 0 50px}}
/* Szenen im Geschichten-Handy: fest auf 330 × 714 gebaut und auf die echte Handybreite skaliert (--em-s setzt app.js) */
.em-story-handy .em-sz{width:330px;height:var(--em-hz,714px);inset:auto;left:0;top:0;transform:scale(var(--em-s,1));transform-origin:top left}
@media(max-width:899px){.em-story-handy{width:min(260px,calc((100svh - var(--kopf,64px) - 210px) * .462))}.em-story-links .h1-zeile{margin:0}}
.em-mini-video{align-self:center}
.em-mini-video img{height:auto!important;aspect-ratio:16/9;object-fit:cover}
.em-bk-outlook,.em-bk-gmail{width:100%}
/* Code per Mail anfordern: unter Anruf und Code-Feld, über die ganze Breite */
@media (min-width:821px){.em-tor{grid-template-columns:1.3fr 1fr}}
.em-code-anfrage{grid-column:1/-1;display:grid;gap:12px;padding:26px 30px;border-radius:28px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.em-code-anfrage label{display:grid;gap:6px;font:600 .74rem var(--lauf);letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.em-code-anfrage input:not([type=checkbox]){width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--rand-feld);background:var(--flaeche-2);color:var(--tinte);font:400 16px/1.45 var(--lauf);letter-spacing:0;text-transform:none}
.em-code-anfrage>.knopf{justify-self:start}
.em-tor-klein-hell{color:var(--akzent-text)}
.em-code-titel{margin:0;font:800 1.5rem/1.1 var(--titel);color:var(--tinte)}
.em-tor .em-schloss label{font:600 .8rem var(--lauf);letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}

/* ---------- Responsiv-Runde (Ervin 23.10.2026): Kopftext der Startseite nie unter die Kopfzeile ----------
   Gemessen: bei Fensterhöhen unter ~720 px lag die SEO-Zeile unter Logo und Navigation (Screenshot eines Mitarbeiters).
   Der Block war über die volle Höhe zentriert und lief nach oben über. Jetzt: fester Abstand unter der Kopfzeile,
   zentriert nur im Rest („safe“), und auf niedrigen Fenstern etwas kleinere Schrift. */
@media (min-width:768px){
  .mbh-text{box-sizing:border-box;padding:calc(var(--kopf,64px) + 18px) 0 26px;justify-content:safe center}
}
@media (min-width:768px) and (max-height:820px){
  .mbh-ueber{margin-bottom:10px}
  .mbh-titel{font-size:clamp(2.1rem,min(4vw,6.6vh),4rem)}
  .mbh-lead{margin-top:12px;font-size:.95rem;line-height:1.5}
  .mbh-a .held-reihe{margin-top:16px}
}
/* „Unter der Oberfläche“-Liste (14 Seiten, Ervin 23.10.2026): Die Beschreibung zeigte noch auf Spalte 2,
   obwohl die Liste einspaltig ist. Der Browser legte dafür eine Zusatzspalte an und quetschte die Titel auf Wortbreite. */
.bn-punkte{gap:4px}
.bn-punkte li{grid-template-columns:1fr!important;padding:14px 18px 14px 20px;border-radius:0 18px 18px 0;border-left:2px solid var(--rand-linie);opacity:.5}
.bn-punkte li span{grid-column:1!important;margin-top:0;transition:max-height .45s,margin .3s}
.bn-punkte li b{font:720 clamp(1.05rem,1.3vw,1.25rem)/1.25 var(--titel)}
.bn-punkte li.fertig{opacity:.62}
.bn-punkte li.an{opacity:1;border-left-color:var(--akzent-flaeche);background:var(--flaeche-1);box-shadow:0 18px 40px -26px rgb(var(--schatten-rgb) / .35)}
.bn-punkte li.an span{margin-top:6px}
/* Laptop ↔ Handy in der Automatik-Bühne (Ervin 23.10.2026): dieselbe Mail, das Gerät verwandelt sich */
.em-morph{--mw:min(600px,40vw);--mh:calc(var(--mw) * .625);--mr:18px 18px 6px 6px;--mp:12px 12px 16px;position:relative;display:grid;justify-items:center}
.em-morph[data-form="handy"]{--mh:min(628px,calc(100svh - var(--kopf,64px) - 150px));--mw:calc(var(--mh) * .462);--mr:50px;--mp:11px}
.em-morph-geraet{position:relative;width:var(--mw);height:var(--mh);padding:var(--mp);border-radius:var(--mr);background:linear-gradient(145deg,#4A5056,#16191C 40%,#2A2F34 70%,#0E1012);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 60px 100px -40px rgba(0,0,0,.7);transition:width .8s cubic-bezier(.65,0,.35,1),height .8s cubic-bezier(.65,0,.35,1),border-radius .8s,padding .8s}
.em-morph-schirm{position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px;background:#fff;transition:border-radius .8s}
.em-morph[data-form="handy"] .em-morph-schirm{border-radius:40px}
.em-morph .em-insel{opacity:0;transition:opacity .4s}
.em-morph[data-form="handy"] .em-insel{opacity:1;transition-delay:.5s}
.em-morph-sockel{width:calc(var(--mw) * 1.16);height:14px;margin-top:-1px;border-radius:2px 2px 16px 16px;background:linear-gradient(180deg,#C9CED3,#8E959C 60%,#5E656C);box-shadow:0 20px 40px -18px rgba(0,0,0,.7);transition:opacity .4s,transform .6s cubic-bezier(.65,0,.35,1)}
.em-morph[data-form="handy"] .em-morph-sockel{opacity:0;transform:scaleX(.3)}
.em-morph-label{margin:18px 0 0;font:600 .78rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:#9DB3F2;position:relative;height:1.2em;width:12em;text-align:center}
.em-morph-label span{position:absolute;inset:0;transition:opacity .4s}
.em-morph[data-form="laptop"] [data-l="handy"],.em-morph[data-form="handy"] [data-l="laptop"]{opacity:0}
.em-morph .em-folie{position:absolute;inset:0}
.em-morph .em-folie span{position:absolute;inset:0;transition:opacity .45s}
.em-morph .em-folie img{width:100%;height:100%;object-fit:cover;object-position:top}
.em-morph[data-form="laptop"] .em-f-mobil,.em-morph[data-form="handy"] .em-f-breit{opacity:0}
.em-ablauf-buehne::before{width:80%}
.em-team{display:flex;gap:14px;align-items:center;max-width:620px;margin:22px auto 0;padding:14px 18px;border-radius:20px;background:var(--flaeche-1);border:1px solid var(--rand-linie);text-align:left;color:var(--text);line-height:1.5}
.em-team img{width:40px;height:auto;flex:none}
.em-team b{color:var(--tinte)}
@media(prefers-reduced-motion:reduce){.em-morph-geraet,.em-morph-schirm,.em-morph-sockel,.em-morph .em-folie span{transition:none}}
.em-ablauf-buehne .em-oeffnen-dunkel{position:static;transform:none;margin:14px 0 0}
.em-ablauf-buehne .em-oeffnen-dunkel:hover{transform:translateY(-1px)}
.em-ablauf-buehne{gap:0}
/* Responsiv-Runde (23.10.2026), gefunden auf 320 px: Tabellen der Rechtstexte bekommen einen Wischrahmen,
   lange Knöpfe dürfen auf schmalen Handys umbrechen statt über den Rand zu laufen. */
.tabelle-rahmen{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tabelle-rahmen .tabelle{min-width:540px}
@media(max-width:600px){.knopf{white-space:normal;text-align:center;max-width:100%;line-height:1.25}}
.em-betreff{flex-wrap:wrap;row-gap:4px}
@media(max-width:600px){.em-betreff{font-size:17px}}

/* Ervin 24.10.2026: Anzeigen-Linie und Anzeigen-Knopf folgen dem Hell/Dunkel-Schalter (light-dark() kannte den Schalter nicht) */
.s-legende .l-a::before{background:var(--tinte)}.s-ads{stroke:var(--tinte)}
.ke-a{color:var(--tinte)}
.sa-m-knopf{background:var(--flaeche-2);color:var(--tinte)}

/* Ervin 24.10.2026: Vorspann im Browserfenster – unser Kopfbereich, Über uns, Referenz Herne, svherne.de bis zum Crash */
.sicht{height:1430vh}
.s-intro{position:absolute;inset:39px 0 0 0;z-index:2;overflow:hidden;pointer-events:none;background:#111316;opacity:calc(1 - var(--crash,0));transform:translate(calc(var(--wack,0) * 1px),calc(var(--wack,0) * -.6px))}
.s-intro .si{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;display:block}
.si-held{opacity:var(--i-held,0)!important}
.si-u0{opacity:var(--i-u0,0)!important}.si-u1{opacity:var(--i-u1,0)!important}.si-u2{opacity:var(--i-u2,0)!important}.si-u3{opacity:var(--i-u3,0)!important}.si-u4{opacity:var(--i-u4,0)!important}
.si-ref{opacity:var(--i-ref,0)!important;transform:scale(calc(1 + var(--i-zoom,0) * .35));transform-origin:30% 55%}
.si-herne{opacity:var(--i-herne,0)!important;transform:scale(calc(1 + var(--crash,0) * .12));filter:brightness(calc(1 + var(--crash,0) * 1.4)) blur(calc(var(--crash,0) * 6px))}
.si-blitz{position:absolute;inset:0;background:#fff;opacity:var(--blitz,0)}
.s-leiste,.s-editor{background:var(--flaeche-1)}
.k-crm{right:-3%;top:40%}.k-auto{left:30%;bottom:-6%}
@media (max-width:767px){.k-crm{right:-2%;top:44%}.k-auto{left:26%;bottom:-8%}}

/* Ervin 24.10.2026: fünf Bereiche, jeder mit eigenem Satz und eigenem Bild im Fenster */
.s-fokus{position:absolute;inset:39px 0 0 0;z-index:3;overflow:hidden;pointer-events:none;background:var(--flaeche-1);opacity:var(--zf,0)}
.fz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4%;padding:5% 6%;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .45s,transform .45s}
.fz.an{opacity:1;transform:none}
.fz-marken{display:flex;flex-wrap:wrap;gap:8px}
.fz-marken span,.fz-ziel span{padding:6px 12px;border-radius:999px;border:1px solid var(--rand-linie);background:var(--flaeche-2);color:var(--tinte);font:600 .82rem var(--text,inherit)}
.fz-bsp{position:absolute;right:16px;bottom:12px;font-size:.7rem;color:var(--grau);letter-spacing:.06em;text-transform:uppercase}
.fz-profil img{width:46%;border-radius:14px;box-shadow:0 20px 50px -20px rgb(0 0 0 / .45)}
.fz-profil .fz-marken{flex-direction:column;width:34%}
.fz-ki{flex-direction:column;align-items:stretch;justify-content:center;gap:14px}
.fz-frage{align-self:flex-end;max-width:72%;margin:0;padding:12px 16px;border-radius:18px 18px 4px 18px;background:var(--akzent-flaeche);color:var(--auf-akzent);font-size:.95rem;line-height:1.4}
.fz-antwort{max-width:86%;padding:14px 16px;border-radius:18px 18px 18px 4px;background:var(--flaeche-2);border:1px solid var(--rand-linie);color:var(--tinte);font-size:.92rem;line-height:1.5}
.fz-antwort b{color:var(--tinte)}
.fz-quelle{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--flaeche-1);border:1px solid var(--rand-linie);font-size:.72rem;color:var(--akzent-text)}
.fz-post{width:50%;border-radius:16px;overflow:hidden;background:var(--flaeche-2);border:1px solid var(--rand-linie)}
.fz-post img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.fz-post p{margin:0;padding:10px 12px 14px;font-size:.85rem;color:var(--tinte);line-height:1.4}
.fz-post-kopf{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:.8rem;color:var(--tinte)}
.fz-post-kopf i{width:22px;height:22px;border-radius:50%;background:var(--akzent-flaeche)}
.fz-post-kopf small{margin-left:auto;color:var(--grau)}
.fz-ziel{display:flex;flex-direction:column;gap:8px;width:34%}
.fz-ziel small,.fz-liste small{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.fz-film{flex-direction:column;gap:12px}
.fz-film img{width:82%;border-radius:14px;box-shadow:0 20px 50px -20px rgb(0 0 0 / .45)}
.fz-film p{margin:0;font-weight:600;color:var(--tinte)}
.fz-play{position:absolute;left:50%;top:44%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgb(255 255 255 / .92);box-shadow:0 10px 30px rgb(0 0 0 / .35)}
.fz-play::after{content:"";position:absolute;left:26px;top:20px;border-left:18px solid #16191C;border-top:12px solid transparent;border-bottom:12px solid transparent}
.fz-crm img{width:34%;border-radius:14px;box-shadow:0 20px 50px -20px rgb(0 0 0 / .45)}
.fz-liste{display:flex;flex-direction:column;gap:8px;width:42%}
.fz-liste p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:10px 12px;border-radius:12px;background:var(--flaeche-2);border:1px solid var(--rand-linie);font-size:.82rem;color:var(--grau)}
.fz-liste p b{color:var(--tinte)}
:root[data-theme="hell"] .fz-crm img.em-dk,:root[data-theme="dunkel"] .fz-crm img.em-hl{display:none!important}
:root:not([data-theme]) .fz-crm img.em-dk{display:none}
/* Karten: die aktive steht vorn und leuchtet, die schon besprochenen bleiben ruhig stehen */
.sicht.zwischen .s-knoten{opacity:.5!important;transform:none;transition:opacity .4s,transform .4s,border-color .4s,box-shadow .4s}
.sicht.zwischen .s-knoten.fokus{opacity:1!important;transform:scale(1.07);border-color:var(--akzent-flaeche);box-shadow:0 0 0 1px var(--akzent-flaeche),0 18px 40px -18px rgb(var(--schatten-rgb,0 0 0) / .5)}
.sicht.zwischen .s-knoten.fokus small{color:var(--tinte)}
.sicht.zwischen .s-knoten.weg{opacity:0!important}
@media (max-width:767px){.fz{padding:4%;gap:3%}.fz-frage,.fz-antwort{font-size:.72rem}.fz-marken span,.fz-ziel span{font-size:.66rem;padding:4px 8px}.fz-post p,.fz-liste p{font-size:.66rem}.fz-play{width:44px;height:44px;margin:-22px 0 0 -22px}.fz-play::after{left:18px;top:13px;border-left-width:12px;border-top-width:9px;border-bottom-width:9px}}
.sicht{height:1980vh}
/* Bereiche: Karten als Liste links, das Fenster rechts daneben und größer */
.sicht.zwischen .s-knoten:not(.da){opacity:0!important}
.s-fenster{transition:left .5s cubic-bezier(.2,.8,.2,1),top .5s cubic-bezier(.2,.8,.2,1)}
@media (min-width:768px){
  .sicht.zwischen .s-fenster{left:66%;transform:translate(-50%,-50%) scale(.8)}
  .sicht.zwischen .s-knoten{left:0!important;right:auto!important;bottom:auto!important;width:31%;transition:opacity .4s,transform .4s,border-color .4s,box-shadow .4s,top .5s,left .5s}
  .sicht.zwischen .k-google{top:1%!important}.sicht.zwischen .k-profil{top:20.5%!important}.sicht.zwischen .k-bing{top:40%!important}.sicht.zwischen .k-social{top:59.5%!important}.sicht.zwischen .k-ki{top:79%!important}
  .sicht.zwischen .s-knoten.fokus{transform:translateX(10px) scale(1.04)}
}
@media (max-width:767px){
  .sicht.zwischen .s-fenster{top:57%;transform:translate(-50%,-50%) scale(.94)}
  .sicht.zwischen .s-knoten:not(.fokus){opacity:0!important}
  .sicht.zwischen .s-knoten.fokus{left:50%!important;right:auto!important;top:0!important;bottom:auto!important;transform:translateX(-50%)!important;width:max-content;max-width:92%}
  .sicht.zwischen .s-knoten.fokus small{display:block}
}
.sicht-schritte.punkte{gap:6px;max-width:100%}.sicht-schritte.punkte li{flex:1 1 0;min-width:0;max-width:44px}
.sicht-raster>*,.sicht-text,.sicht-buehne{min-width:0}.s-editor,.s-code{overflow:hidden}
@media (max-width:767px){.s-intro .si{object-fit:contain;object-position:center top}}
.sp-dazu{margin:16px 0 0;font-size:.95rem;color:var(--grau);opacity:var(--inv,0)}

/* Anima erklärt auf Unterseiten (Ervin 24.10.2026) */
.ek-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:center}
.ek-text-seite{min-width:0}
.ek .erzaehler{margin-top:22px}
.ek-punkte li{cursor:pointer}
.ek.spricht .robo img.an{animation:sprechen .32s ease-in-out infinite alternate}
.ek-buehne{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:var(--flaeche-2);border:1px solid var(--rand-linie)}
.ek-karte{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:6%;opacity:0;transform:scale(.98);transition:opacity .5s,transform .5s}
.ek-karte.an{opacity:1;transform:none}
.ek-karte figcaption{font-size:.92rem;color:var(--grau);text-align:center}
.ek-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ek-bild figcaption{position:absolute;left:16px;bottom:14px;padding:7px 14px;border-radius:999px;background:var(--flaeche-1);color:var(--tinte);font-weight:600;font-size:.85rem}
.ek-mail{padding:5% 6% 4%}
.ek-mail img{height:82%;width:auto;max-width:100%;object-fit:contain;border-radius:16px;box-shadow:0 24px 50px -24px rgb(0 0 0 / .45)}
.ek-gross{font:780 clamp(1.7rem,3.6vw,3rem)/1.08 var(--titel);letter-spacing:-.025em;color:var(--tinte);text-align:center}
.ek-text{background:radial-gradient(120% 90% at 50% 0%,var(--flaeche-1),transparent)}
:root[data-theme="hell"] .ek img.ek-dk,:root[data-theme="dunkel"] .ek img.ek-hl{display:none!important}
:root:not([data-theme]) .ek img.ek-dk{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .ek img.ek-dk{display:block}:root:not([data-theme]) .ek img.ek-hl{display:none}}
@media (max-width:860px){.ek-raster{grid-template-columns:1fr}.ek-buehne{aspect-ratio:4/3.4}}
.ek-paket{align-items:flex-start;padding:7% 8%;gap:10px}
.ek-paket .ek-gross{text-align:left}
.ek-rolle{font:600 .78rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-text)}
.ek-preis{font:700 1.3rem var(--titel);color:var(--tinte)}.ek-preis small{font:500 .8rem var(--text,inherit);color:var(--grau)}
.ek-paket ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;width:100%}
.ek-paket li{padding:10px 14px 10px 36px;border-radius:12px;background:var(--flaeche-1);border:1px solid var(--rand-linie);color:var(--tinte);font-size:.92rem;position:relative}
.ek-paket li::before{content:"";position:absolute;left:14px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--akzent-flaeche)}
@media (max-width:767px){.ek-paket li{font-size:.8rem;padding:8px 10px 8px 30px}.ek-paket li::before{left:11px}.ek-preis{font-size:1.1rem}}
.ek-film{padding:0}
.ek-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111316}
.ek-film figcaption{position:absolute;left:16px;bottom:14px;padding:7px 14px;border-radius:999px;background:var(--flaeche-1);color:var(--tinte);font-weight:600;font-size:.85rem;text-align:left}
.ek-handy{background:radial-gradient(120% 90% at 50% 0%,var(--flaeche-1),var(--flaeche-2))}
.ek-handy video{position:relative;inset:auto;width:auto;height:84%;aspect-ratio:9/16;border-radius:26px;border:6px solid #16191C;box-shadow:0 24px 50px -22px rgb(0 0 0 / .55);margin-right:28%}
.ek-chips{position:absolute;top:16px;right:16px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:60%}
.ek-handy .ek-chips{top:auto;bottom:auto;right:6%;flex-direction:column;align-items:flex-start;max-width:34%}
.ek-chips span{padding:6px 12px;border-radius:999px;background:var(--flaeche-1);border:1px solid var(--rand-linie);color:var(--tinte);font-weight:600;font-size:.8rem}
@media (max-width:767px){.ek-chips span{font-size:.68rem;padding:4px 9px}.ek-handy video{margin-right:30%}}
.ek-film:not(.ek-handy) video{object-fit:contain}.ek-buehne:has(.ek-film){background:#0E1012}
.ek-knopf{margin-top:22px}
.ek-ablauf ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;width:100%}
.ek-ablauf ol li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:var(--flaeche-1);border:1px solid var(--rand-linie);color:var(--tinte);font-size:.95rem}
.ek-ablauf ol li b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--akzent-flaeche);color:var(--auf-akzent);font:700 .85rem var(--titel)}
.ek-ablauf ol li:last-child{border-color:var(--akzent-flaeche)}
@media (max-width:767px){.ek-ablauf ol li{font-size:.8rem;padding:9px 12px}.ek-ablauf ol li b{width:24px;height:24px}}
.fz-profil{padding:0}
.fz-profil img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.fz-profil .fz-marken{position:absolute;right:14px;bottom:14px;width:auto;flex-direction:row}
.fz-profil .fz-marken span{background:rgb(255 255 255 / .94);color:#16191C;border-color:#DCE1E5}
.ek-buehne:has(.ek-film){background:var(--flaeche-2)}.ek-film:not(.ek-handy){background:#0E1012}
.sicht{height:auto}.sicht-kulisse{position:relative}
/* Zurück- und vorspulen neben „Erklär es mir“ */
.blase .abspielen{margin-right:auto}
.blase{flex-wrap:wrap}
.spulen{display:inline-flex;gap:8px;margin-left:auto}
.spulen button{width:34px;height:34px;border-radius:50%;border:1px solid var(--rand-linie);background:var(--flaeche-2);color:var(--tinte);font:600 1.2rem/1 var(--titel);cursor:pointer;display:grid;place-items:center;padding:0 0 2px}
@media (hover:hover){.spulen button:hover{border-color:var(--akzent-flaeche)}}
@media (max-width:767px){.spulen button{width:40px;height:40px}}
.blase-steuer{display:flex;align-items:center;gap:12px;width:100%}
.fz-profil .fz-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:var(--gv,0);background:#1f1f1f}

/* Ervin 24.10.2026: Steuerung unter der Sprechblase neu gestaltet – Pille statt Kreis mit Umbruch, ruhige Pfeile */
.blase-steuer{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px}
.blase .abspielen{display:inline-flex;align-items:center;gap:10px;margin:0;padding:5px 18px 5px 5px;min-height:40px;border-radius:999px;background:var(--akzent-flaeche);color:var(--auf-akzent);font:650 .9rem/1 var(--titel);letter-spacing:-.005em;white-space:nowrap;box-shadow:0 10px 24px -14px var(--akzent-flaeche);transition:transform .2s,box-shadow .2s,filter .2s}
.blase .abspielen i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--auf-akzent);box-shadow:none}
.blase .abspielen i::before{left:12px;top:9px;border-left:9px solid var(--akzent-flaeche);border-top:6px solid transparent;border-bottom:6px solid transparent;width:0;height:0;background:none;box-shadow:none}
.blase .abspielen.laeuft i::before{left:10px;top:9px;width:3px;height:12px;border:0;background:var(--akzent-flaeche);box-shadow:7px 0 0 var(--akzent-flaeche)}
@media (hover:hover){.blase .abspielen:hover{transform:translateY(-1px);filter:brightness(1.08)}.blase .abspielen:hover i{box-shadow:none}}
.blase .abspielen:focus{outline:none}.blase .abspielen:focus-visible,.spulen button:focus-visible{outline:2px solid var(--akzent-flaeche);outline-offset:3px}
.spulen{display:inline-flex;gap:6px;margin-left:auto}
.spulen button{position:relative;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--rand-linie);background:transparent;font-size:0;color:var(--tinte);cursor:pointer;transition:border-color .2s,background .2s}
.spulen button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-30%,-50%) rotate(45deg)}
.spulen button[data-vor]::before{transform:translate(-70%,-50%) rotate(-135deg)}
.spulen button:focus{outline:none}
@media (hover:hover){.spulen button:hover{border-color:var(--akzent-flaeche);background:var(--flaeche-2)}}
@media (max-width:767px){.blase .abspielen{min-height:44px;font-size:.88rem}.spulen button{width:44px;height:44px}}
/* Bereich 6: Werbung an drei Orten */
.k-ads{left:34%;bottom:-8%}
@media (min-width:768px){
  .sicht.zwischen .k-google{top:0!important}.sicht.zwischen .k-profil{top:16.6%!important}.sicht.zwischen .k-bing{top:33.2%!important}.sicht.zwischen .k-social{top:49.8%!important}.sicht.zwischen .k-ki{top:66.4%!important}.sicht.zwischen .k-ads{top:83%!important;bottom:auto!important}
  .sicht.zwischen .s-knoten{padding-top:9px;padding-bottom:9px}
}
.fz-ads{gap:3%;padding:5% 4%;align-items:stretch}
.fz-ad{position:relative;flex:1;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:var(--flaeche-2);border:1px solid var(--rand-linie);font-size:.74rem;color:var(--grau);min-width:0}
.fz-ad>small{font:600 .62rem var(--lauf);letter-spacing:.1em;text-transform:uppercase;color:var(--akzent-text)}
.fz-ad h5{margin:0;font:600 .86rem/1.3 var(--titel);color:#3B6FE0}
.fz-ad p{margin:0;line-height:1.4}
.fz-ad-kopf b{color:var(--tinte)}
.fz-ad-m img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.fz-ad-m p b,.fz-spons b{color:var(--tinte)}
.fz-ad-m span{margin-top:auto;padding:6px 10px;border-radius:8px;background:var(--flaeche-1);color:var(--tinte);font-weight:600}
.fz-frage-k{align-self:flex-end;padding:8px 10px;border-radius:12px 12px 4px 12px;background:var(--akzent-flaeche);color:var(--auf-akzent)}
.fz-spons{display:flex;flex-direction:column;gap:3px;padding:10px;border-radius:12px;background:var(--flaeche-1);border:1px dashed var(--rand-linie)}
@media (max-width:767px){.fz-ads{flex-direction:column;padding:3%;gap:6px}.fz-ad{padding:7px;font-size:.6rem;gap:3px}.fz-ad-m img{display:none}.fz-ad h5{font-size:.68rem}}
/* Animas Mund: deckt den gemalten Mund ab und öffnet sich mit der Stimme */
.mund{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .12s}
.mund-an .mund{opacity:1}
.mund::before{content:"";position:absolute;inset:-35% -22%;border-radius:50%;background:radial-gradient(closest-side,var(--deck,#232c38) 62%,transparent 100%)}
.mund i{position:absolute;left:8%;right:8%;top:50%;height:calc(10% + var(--auf,0) * 90%);min-height:3px;transform:translateY(-50%);background:#eef8ff;border-radius:40% 40% 50% 50% / 30% 30% 70% 70%;box-shadow:0 0 5px rgb(170 215 255 / .95),0 0 14px rgb(120 185 255 / .65)}
.mund.klein i{left:22%;right:22%;border-radius:50%}
.sicht.spricht .mund,.ek.spricht .mund{animation:sprechen .32s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.mund{display:none}}
.mund{transform:none}
/* Ervin 24.10.2026: Pakete bleiben in ihrer Spalte und rücken nicht an die Sprechblase */
.s-preis{left:0;width:100%;max-width:700px;transform:translateY(-50%);padding-left:clamp(8px,1.5vw,24px)}
@media (max-width:767px){.s-preis{padding-left:0}}
/* Sprechblase bleibt in ihrer Spalte, Steuerung bricht bei Bedarf um */
.erzaehler{grid-template-columns:auto minmax(0,1fr)}
.blase{min-width:0}
.blase-steuer{flex-wrap:wrap;row-gap:8px}
@media (min-width:768px) and (max-width:1200px){.sicht .robo{width:clamp(96px,10vw,150px)}.sicht .blase p{font-size:.9rem}}
/* Navigation: nie umbrechen; zwischen 980 und 1180 px etwas enger */
.nk-nav>a,.nk-auf>button{white-space:nowrap}
@media (min-width:981px) and (max-width:1180px){.nk-nav{gap:2px}.nk-nav>a,.nk-auf>button{padding:10px 11px;font-size:.9rem}}
/* Bereiche: Kartenliste und Fenster mit Luft dazwischen */
@media (min-width:768px){.sicht.zwischen .s-knoten{width:28%}.sicht.zwischen .s-fenster{left:67%;transform:translate(-50%,-50%) scale(.78)}}
@media (min-width:768px) and (max-width:1240px){.sicht.zwischen .s-knoten:not(.fokus) small{display:none}.sicht.zwischen .s-knoten b{font-size:.82rem}}
@media (min-width:768px) and (max-width:1023px){
  .sicht.zwischen .s-fenster{left:50%!important;top:58%;transform:translate(-50%,-50%) scale(.92)!important}
  .sicht.zwischen .s-knoten:not(.fokus){opacity:0!important}
  .sicht.zwischen .s-knoten.fokus{left:50%!important;right:auto!important;top:0!important;bottom:auto!important;transform:translateX(-50%)!important;width:max-content!important;max-width:80%}
  .sicht.zwischen .s-knoten.fokus small{display:block}
}
.ek-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.ek-knoepfe .ek-knopf{margin-top:0}
.blase .abspielen:focus-visible{outline:none;box-shadow:0 0 0 3px var(--flaeche-1),0 0 0 5px color-mix(in srgb,var(--akzent-flaeche) 45%,transparent)}
.ek-hoch img{height:86%;border-radius:18px;box-shadow:0 24px 50px -24px rgb(0 0 0 / .45)}
/* Mails groß und lesbar: wie ein Handy, das unten aus der Karte läuft */
.ek-mail{justify-content:flex-start;padding:6% 0 0;overflow:hidden}
.ek-mail img,.ek-hoch img{width:min(58%,360px);height:auto;max-height:none;border-radius:18px 18px 0 0;box-shadow:0 24px 50px -24px rgb(0 0 0 / .45)}
.ek-mail figcaption{position:absolute;left:16px;bottom:14px;padding:7px 14px;border-radius:999px;background:var(--flaeche-1);color:var(--tinte);font-weight:600;font-size:.85rem;box-shadow:0 8px 20px -10px rgb(0 0 0 / .3)}
@media (max-width:767px){.ek-mail img,.ek-hoch img{width:66%}}
/* Good Vibes im MacBook wie im Kopfbereich: schwebt beim Wechsel ein und atmet ruhig weiter */
.ek-laptop{padding:0;background:#E9ECEF}
:root[data-theme="dunkel"] .ek-laptop{background:#121417}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .ek-laptop{background:#121417}}
.ek-laptop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 50%;transform:scale(1.04) translateY(10px);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.ek-karte.an.ek-laptop img{transform:none;animation:laptopAtmen 7s ease-in-out 1.1s infinite}
@keyframes laptopAtmen{0%,100%{transform:none}50%{transform:translateY(-6px) scale(1.012)}}
.ek-laptop figcaption{position:absolute;left:16px;bottom:14px;padding:7px 14px;border-radius:999px;background:var(--flaeche-1);color:var(--tinte);font-weight:600;font-size:.85rem;box-shadow:0 8px 20px -10px rgb(0 0 0 / .3);z-index:2}
@media (prefers-reduced-motion:reduce){.ek-karte.an.ek-laptop img{animation:none}}

/* Mail-Baukasten: Stilwahl und Farbtupfer (24.10.2026) */
.em-stilwahl{display:grid;gap:10px;margin:18px 0;padding:18px;border:1px solid var(--rand-linie);border-radius:20px;background:var(--flaeche-1)}
.em-stil-titel{margin:0;font:600 .74rem var(--lauf);letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.em-stile{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.em-stile button{display:grid;gap:8px;justify-items:center;padding:10px 8px 12px;border-radius:16px;border:1.5px solid var(--rand-linie);background:var(--flaeche-2);color:var(--tinte);font:600 .9rem var(--lauf);cursor:pointer;transition:border-color .2s,transform .2s}
.em-stile button.an{border-color:var(--tinte);box-shadow:0 0 0 3px color-mix(in srgb,var(--tinte) 12%,transparent)}
.em-stil-bild{display:block;width:100%;max-width:120px;aspect-ratio:4/3;border-radius:8px;background:#fff;border:1px solid #e1e5e9;position:relative;overflow:hidden}
.em-stil-bild::before,.em-stil-bild::after{content:"";position:absolute;left:12%;border-radius:3px}
.em-stil-bild.klar::before{top:18%;width:40%;height:9%;background:#1a1e22}
.em-stil-bild.klar::after{top:56%;width:34%;height:14%;border-radius:20px;background:#2b4fb0}
.em-stil-bild.kraeftig{background:linear-gradient(#2b4fb0 0 48%,#fff 48%)}
.em-stil-bild.kraeftig::before{top:20%;width:56%;height:10%;background:#fff}
.em-stil-bild.kraeftig::after{top:64%;width:34%;height:13%;background:#2b4fb0}
.em-stil-bild.elegant::before{top:20%;width:14%;height:3%;background:#2b4fb0}
.em-stil-bild.elegant::after{top:36%;width:60%;height:9%;background:#3a4249;border-radius:1px;box-shadow:0 22px 0 -2px #fff,0 30px 0 0 transparent;outline:1.5px solid transparent}
.em-tupfer{display:flex;flex-wrap:wrap;gap:10px}
.em-tupfer button{width:34px;height:34px;border-radius:50%;border:2px solid var(--flaeche-1);background:var(--t);box-shadow:0 0 0 1px var(--rand-linie);cursor:pointer;transition:transform .2s}
.em-tupfer button.an{box-shadow:0 0 0 2px var(--tinte);transform:scale(1.08)}
@media (hover:hover){.em-stile button:hover{transform:translateY(-2px)}.em-tupfer button:hover{transform:scale(1.1)}}

/* Handy: Rechtstexte mit Tabellen nicht still abschneiden (Nutzertest 24.10.2026) */
.k-inhalt{min-width:0}
.k-inhalt>*{max-width:100%}
.k-inhalt .tabelle-rahmen{max-width:100%;overflow-x:auto}

/* 24.10.2026: „Erklär es mir“ am Handy. Die Bühne bekommt den Platz, der unter der Sprechblase bleibt (app.js setzt --sb-h) */
@media (max-width:980px){.sicht .sicht-buehne{height:var(--sb-h,56svh)}}
.spulen button:disabled{opacity:.35;cursor:default;pointer-events:none}
/* 24.10.2026: Sterne auf hellem Grund mit mindestens 3:1 Kontrast, im Dunkeln wie bisher */
.kb-sterne{color:#A86C00!important;color:light-dark(#A86C00,#E8A317)!important}
:root[data-theme="dunkel"] .kb-sterne{color:#E8A317!important}
/* 24.10.2026: Handy, die Knöpfe in der Sprechblase stehen immer in zwei Reihen, damit die Blase beim Wechsel von
   „Erklär es mir“ zu „Stopp“ und „Weiter erklären“ nicht springt */
@media (max-width:980px){.sicht .blase-steuer{flex-wrap:wrap}.sicht .spulen{flex:1 0 100%;justify-content:flex-end;margin-left:0}.sp-invest{overflow-wrap:anywhere}}
/* 24.10.2026: die unsichtbare Preis-Ebene der Bühne darf keine Tipps abfangen (überdeckte am Handy den ›-Knopf) */
.s-preis{pointer-events:none}
@media (max-width:980px){
  .sicht .s-preis{width:calc(100% / var(--sp-skala,1));max-width:none;transform:translateY(-50%) scale(var(--sp-skala,1));transform-origin:0 50%}
  .sicht .sp-invest{font-size:1.1rem}.sicht .sp-invest em{white-space:normal}
}
/* 24.10.2026: „Zurück, wo du warst“ verdeckt keine Einwilligung und keinen Datenschutz-Link */
.zurueck-knopf.ueber-form{opacity:0!important;pointer-events:none}
.em-ok{display:block!important;position:relative;padding-left:28px}
.em-ok input{position:absolute;left:0;top:0;margin-top:2px}

/* Video folgt (Ervin 25.10.2026): Platzhalter statt Leistungsfilm, nicht anklickbar */
.ld-folgt{cursor:default;pointer-events:none}
.film-folgt{position:absolute;inset:0;margin:0;display:grid;place-content:center;gap:6px;text-align:center;color:#fff}
.film-folgt b{font:700 clamp(1.3rem,3vw,2rem) var(--lauf)}
.film-folgt span{font:400 .95rem var(--lauf);color:rgba(255,255,255,.78)}
/* E-Mail-Baukasten Lite (Ervin 25.10.2026): frei gestalten, Export mit Code gegen Newsletter-Abo, Beratung an vier Stellen */
.em-schloss-zeichen{display:inline-block;width:.8em;height:.95em;flex:none;vertical-align:-.1em;margin-right:.45em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 19'%3E%3Cpath d='M8 0a5 5 0 0 0-5 5v3H2a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-1V5a5 5 0 0 0-5-5Zm-3 5a3 3 0 1 1 6 0v3H5Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 19'%3E%3Cpath d='M8 0a5 5 0 0 0-5 5v3H2a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-1V5a5 5 0 0 0-5-5Zm-3 5a3 3 0 1 1 6 0v3H5Z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.75}
.em-ist-frei .em-schloss-zeichen{display:none}
.em-ist-frei .em-wasser{display:none}
.em-lite-zeile{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin:18px 0 0}
.em-lite-zeile span{display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--pille);font:600 .82rem var(--lauf);border:1px solid var(--rand-linie);background:var(--flaeche-1);color:var(--tinte)}
.em-lite-zeile .em-lite-zu{color:var(--grau)}
/* Beratung */
.em-berat{margin:0}
.em-berat-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 6px;color:var(--text);font-size:.95rem}
.em-berat-kopf span{flex-basis:100%;font-weight:600;color:var(--tinte)}
.em-berat-kopf .knopf{min-height:44px;padding:0 20px;font-size:.9rem}
.em-berat-link{color:var(--akzent-text);font-weight:600;font-size:.9rem}
.em-berat-karte{width:100%;display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center;padding:18px 20px;border-radius:22px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.em-berat-karte img{width:40px;height:auto;grid-row:span 2}
.em-berat-karte p{margin:0;color:var(--text);line-height:1.5;font-size:.95rem}
.em-berat-karte p b{color:var(--tinte);display:block}
.em-berat-karte .knopf{justify-self:start;min-height:46px;padding:0 22px}
.em-berat-tor{display:grid;gap:12px;padding:20px 22px;border-radius:22px;background:var(--flaeche-2);border:1px solid var(--rand-linie)}
.em-berat-tor p{margin:0;color:var(--text);line-height:1.5}
.em-berat-tor p b{color:var(--tinte)}
.em-berat-tor .knopf{justify-self:start;min-height:46px;padding:0 22px}
/* Export */
.em-export{width:100%;display:grid;gap:12px;padding:18px 20px;border-radius:22px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.em-export-titel{margin:0;display:flex;align-items:center;font:700 .95rem var(--titel);color:var(--tinte)}
.em-export-reihe{display:flex;flex-wrap:wrap;gap:8px}
.em-export-knopf{min-height:44px;padding:0 18px;font-size:.88rem;gap:0}
.em-export:not(.em-ist-frei *) .em-export-knopf{opacity:.78}
.em-ist-frei .em-export-knopf{opacity:1}
.em-export-hinweis{margin:0;font-size:.9rem;color:var(--text);min-height:0}
.em-export-hinweis:empty{display:none}
.em-export-hinweis.gut{color:var(--akzent-text);font-weight:600}
.em-pro span{color:var(--grau)}
.em-ist-frei .em-pro span{color:var(--tinte)}
/* Tor */
.em-bk .em-tor{margin-top:clamp(20px,3vw,32px);max-width:none;grid-template-columns:1.35fr 1fr;align-items:stretch}
.em-tor-nl{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:28px;border-radius:28px;background:linear-gradient(135deg,var(--flaeche-blau),var(--flaeche-1));border:1px solid var(--rand-linie)}
.em-tor-nl img{width:90px;height:auto}
.em-tor-nl-rumpf{display:grid;gap:12px}
.em-tor-nl .em-tor-klein{display:flex;align-items:center;color:var(--akzent-text)}
.em-tor-nl .em-tor-gross{margin:0;color:var(--tinte)}
.em-tor-text{margin:0;color:var(--text);line-height:1.5}
.em-tor-nl label{display:grid;gap:6px;font:600 .74rem var(--lauf);letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.em-tor-nl input:not([type=checkbox]){width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:400 16px/1.45 var(--lauf);letter-spacing:0;text-transform:none}
.em-tor-nl .knopf{justify-self:start;white-space:normal;text-align:left;line-height:1.2}
.em-tor-seite{display:grid;gap:14px;align-content:start}
.em-tor-seite .em-schloss{margin:0;display:grid;grid-template-columns:1fr;max-width:none}
.em-tor-satz{margin:0;padding:0 6px;color:var(--grau);font-size:.9rem;line-height:1.5}
.em-frei{margin-top:clamp(20px,3vw,32px);padding:28px;border-radius:28px;background:linear-gradient(135deg,var(--flaeche-blau),var(--flaeche-1));border:1px solid var(--rand-linie);display:grid;gap:10px;text-align:center;justify-items:center}
.em-frei[hidden]{display:none}
.em-frei .em-tor-klein{color:var(--akzent-text)}
.em-frei-gross{margin:0;font:800 clamp(1.3rem,2.2vw,1.8rem)/1.15 var(--titel);letter-spacing:-.02em;color:var(--tinte);max-width:34ch}
.em-frei-text{margin:0;color:var(--text);max-width:56ch;line-height:1.5}
@media(max-width:899px){
  .em-bk .em-tor{grid-template-columns:1fr}
  .em-tor-nl{grid-template-columns:1fr;padding:22px}
  .em-tor-nl img{display:none}
  .em-berat-karte{grid-template-columns:1fr}
  .em-berat-karte img{display:none}
  .em-export-knopf{flex:1 1 100%}
  .em-berat-kopf{font-size:.88rem;margin:10px 0 4px}
}
/* Tor neu, Uhrwerk-Branding + Basic/Fortgeschritten (Ervin 25.10.2026, zweite Runde) */
.em-bk .em-tor{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:18px;align-items:stretch}
.em-tor-karte{position:relative;display:grid;gap:18px;padding:clamp(22px,3vw,40px);border-radius:32px;background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 30px 60px -40px rgb(var(--schatten-rgb) / .35);overflow:hidden}
.em-tor-oben{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:center}
.em-tor-text{display:grid;gap:14px;align-content:start}
.em-tor-text .marke-zeile{display:flex;align-items:center;margin:0;color:var(--akzent-text)}
.em-tor-titel{margin:0;font:800 clamp(2rem,3.4vw,3rem)/1.02 var(--titel);font-stretch:106%;letter-spacing:-.04em;color:var(--tinte)}
.em-tor-titel em{display:block;margin-top:.08em;font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-weight:600;font-stretch:100%;letter-spacing:-.01em;color:var(--akzent-text)}
.em-tor-nutzen{margin:0;color:var(--text);font-size:1.02rem;line-height:1.55;max-width:46ch}
.em-tor-vorteile{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:9px}
.em-tor-vorteile li{position:relative;padding-left:32px;color:var(--tinte);font-weight:600;line-height:1.4}
.em-tor-vorteile li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--flaeche-blau);border:1px solid var(--rand-linie)}
.em-tor-vorteile li::after{content:"";position:absolute;left:7px;top:6px;width:8px;height:5px;border-left:2px solid var(--akzent-text);border-bottom:2px solid var(--akzent-text);transform:rotate(-45deg)}
.em-tor-bild{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:0;min-height:260px}
.em-tor-robo{width:clamp(120px,12vw,170px);height:auto;margin-right:-26px;position:relative;z-index:1;filter:drop-shadow(0 22px 26px rgb(var(--schatten-rgb) / .28))}
.em-tor-mail{align-self:center;padding:18px 20px 16px;border-radius:22px;background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 24px 48px -26px rgb(var(--schatten-rgb) / .38);display:grid;gap:8px;transform:rotate(2deg)}
.em-tor-mail p{margin:0}
.em-tor-mail-kopf{display:flex;gap:10px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--rand-linie)}
.em-tor-mail-kopf b{display:block;font:700 .9rem var(--titel);color:var(--tinte)}
.em-tor-mail-kopf small{color:var(--grau);font-size:.78rem}
.em-tor-mail-av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--flaeche-2);border:1px solid var(--rand-linie)}
.em-tor-mail-av img{width:24px;height:auto}
.em-tor-mail-klein{font:600 .7rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.em-tor-mail-code{display:flex;gap:5px}
.em-tor-mail-code span{flex:1;min-width:0;display:grid;place-items:center;height:38px;border-radius:9px;background:var(--flaeche-2);border:1px solid var(--rand-linie);font:800 1.05rem ui-monospace,Menlo,monospace;color:var(--tinte)}
.em-tor-mail-code span:nth-child(-n+4){background:var(--flaeche-blau);color:var(--akzent-text)}
.em-tor-mail-fuss{font-size:.78rem;color:var(--grau)}
.em-tor-mail-fuss::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#C98A1B;vertical-align:1px}
.em-tor-form{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) auto;gap:10px;align-items:end;padding:14px;border-radius:22px;background:var(--flaeche-2);border:1px solid var(--rand-linie)}
.em-tor-form label{display:grid;gap:6px;font:600 .72rem var(--lauf);letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.em-tor-form label small{font-size:inherit;font-weight:500;letter-spacing:.04em;text-transform:none;opacity:.8}
.em-tor-form input{width:100%;height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:400 16px var(--lauf);letter-spacing:0;text-transform:none}
.em-tor-form .knopf{min-height:50px}
.em-einw{display:grid;gap:4px}
.em-einw .em-ok{font-size:.8rem!important;line-height:1.45!important;color:var(--grau)!important}
.em-einw-mehr{padding-left:28px;font-size:.8rem;color:var(--grau)}
.em-einw-mehr summary{cursor:pointer;color:var(--akzent-text);font-weight:600;width:max-content}
.em-einw-mehr p{margin:6px 0 0;line-height:1.5}
.em-tor-karte .em-anfrage-hinweis:empty{display:none}
.em-tor-seite{display:grid;gap:14px;align-content:start}
.em-schloss-klein{padding:20px 22px!important;border-radius:24px!important;gap:6px!important}
.em-schloss-klein .em-schloss-reihe{margin:4px 0 0}
.em-schloss-klein input{height:46px}
.em-schloss-klein .knopf{min-height:46px;padding:0 20px}
.em-schloss-klein .em-schloss-hinweis:empty{display:none}
.em-berat-tor{display:grid!important;grid-template-columns:96px 1fr;gap:14px;align-items:end;padding:22px 22px 0 14px!important;border-radius:24px!important;background:linear-gradient(160deg,var(--flaeche-blau),var(--flaeche-1))!important;overflow:hidden}
.em-berat-tor img{width:96px;height:auto;align-self:end;display:block}
.em-berat-tor>div{display:grid;gap:8px;padding-bottom:22px}
.em-berat-tor .em-berat-titel{margin:0;font:800 1.15rem/1.15 var(--titel);letter-spacing:-.02em;color:var(--tinte)}
.em-berat-tor p{margin:0}
.em-berat-tor .knopf{justify-self:start;min-height:46px;padding:0 20px;font-size:.9rem}
.em-tor-satz{font-size:.82rem}
.em-frei-gross em{font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-weight:600;color:var(--akzent-text)}
/* Bedienung */
.em-bedienung{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:6px 6px 2px}
.em-bedienung-schalter{display:inline-flex;padding:5px;border-radius:var(--pille);background:var(--flaeche-2);border:1px solid var(--rand-linie)}
.em-bedienung-schalter button{min-height:42px;padding:0 22px;border:0;border-radius:var(--pille);background:none;color:var(--grau);font:700 .95rem var(--titel);cursor:pointer}
.em-bedienung-schalter button.an{background:var(--flaeche-1);color:var(--tinte);box-shadow:0 6px 16px -10px rgb(var(--schatten-rgb) / .45)}
.em-bedienung-schalter button[data-em-bedienung-wahl="profi"].an{color:var(--akzent-text)}
.em-bedienung-text{margin:0;color:var(--grau);font-size:.92rem}
/* Fortgeschritten */
.em-profi{display:grid;gap:14px;padding:20px;border-radius:24px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
.em-profi[hidden]{display:none}
.em-profi-kopf{margin:0;display:grid;gap:2px}
.em-profi-kopf b{font:800 1.05rem var(--titel);color:var(--akzent-text)}
.em-profi-kopf span{color:var(--grau);font-size:.88rem}
.em-profi label,.em-seg legend{font:600 .72rem var(--lauf);letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.em-profi .em-zeile2>label{display:grid;gap:6px}
.em-profi select{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:400 15px var(--lauf);text-transform:none;letter-spacing:0}
.em-farben{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.em-farbe{display:grid;gap:6px}
.em-farbe-reihe{display:flex;align-items:center;gap:6px;padding:4px;border-radius:12px;border:1px solid var(--rand-feld);background:var(--flaeche-1)}
.em-farbe-reihe input[type=color]{width:36px;height:34px;padding:0;border:0;border-radius:9px;background:none;cursor:pointer;flex:none}
.em-farbe-reihe input[type=text]{flex:1;min-width:0;width:100%;padding:6px 4px;border:0;background:none;color:var(--tinte);font:600 14px ui-monospace,Menlo,monospace;text-transform:lowercase;letter-spacing:0}
.em-farbe-reihe input.falsch{color:#C2372B}
.em-kontrast{margin:0;padding:10px 14px;border-radius:12px;background:rgba(201,138,27,.12);border:1px solid rgba(201,138,27,.4);color:var(--tinte);font-size:.86rem;line-height:1.45}
.em-kontrast[hidden]{display:none}
.em-regler output{float:right;text-transform:none;letter-spacing:0;color:var(--tinte)}
.em-regler input[type=range]{width:100%;accent-color:var(--licht);margin:8px 0 6px}
.em-segs{display:grid;gap:12px}
.em-seg{margin:0;padding:0;border:0;display:grid;gap:6px;min-width:0}
.em-seg>div{display:flex;flex-wrap:wrap;gap:6px}
.em-seg label{position:relative;text-transform:none;letter-spacing:0}
.em-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.em-seg span{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:var(--pille);border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:600 .88rem var(--lauf)}
.em-seg input:checked+span{background:var(--tinte);color:var(--flaeche-1);border-color:var(--tinte)}
.em-seg input:focus-visible+span{outline:2px solid var(--akzent-text);outline-offset:2px}
.em-profi-zurueck{justify-self:start;padding:0;border:0;background:none;color:var(--akzent-text);font:600 .88rem var(--lauf);text-decoration:underline;cursor:pointer}
@media(max-width:1100px){.em-tor-oben{grid-template-columns:1fr}.em-tor-bild{max-width:440px;min-height:0}}
@media(max-width:899px){
  .em-bk .em-tor{grid-template-columns:1fr}
  .em-tor-form{grid-template-columns:1fr}
  .em-tor-form .knopf{width:100%}
  .em-tor-robo{width:110px;margin-right:-18px}
  .em-tor-mail{transform:none;padding:14px}
  .em-tor-mail-code span{height:32px;font-size:.92rem}
  .em-berat-tor{grid-template-columns:78px 1fr}
  .em-berat-tor img{width:78px}
  .em-bedienung{padding:2px 2px 0}
  .em-bedienung-schalter{width:100%}
  .em-bedienung-schalter button{flex:1;padding:0 10px}
}
.em-tor-bild{grid-template-columns:clamp(120px,11vw,168px) minmax(0,1fr)}
.em-tor-robo{width:100%;margin-right:-30px}
.em-tor-mail{min-width:0}
@media(min-width:1101px){.em-bk .em-tor{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.em-tor-oben{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:900px) and (max-width:1100px){.em-bk .em-tor{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
@media(max-width:899px){.em-tor-bild{grid-template-columns:96px minmax(0,1fr)}.em-schloss-klein input{flex:none;height:48px}}
/* Erklärer E-Mail (Ervin 25.10.2026): Laptop ganz zeigen + Ablauf-Grafik der Automatik */
.ek-laptop{background:linear-gradient(180deg,#fbfcfd 0%,#f4f6f7 45%,#e6e8ea 100%)}
:root[data-theme="dunkel"] .ek-laptop{background:linear-gradient(180deg,#22282c 0%,#1d2326 55%,#1a1e21 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .ek-laptop{background:linear-gradient(180deg,#22282c 0%,#1d2326 55%,#1a1e21 100%)}}
.ek-laptop img{inset:auto;left:8%;top:0;width:90%;height:100%;object-fit:contain;object-position:100% 46%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%),linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 11%),linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
.ek-rechts{display:grid;gap:14px;min-width:0}
.ek-auto{position:relative;padding:16px 18px 14px;border-radius:22px;background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 18px 40px -30px rgb(var(--schatten-rgb) / .35)}
.ek-auto-kopf{margin:0 0 12px;display:flex;align-items:center;gap:9px;font:600 .72rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.ek-auto-live{width:8px;height:8px;border-radius:50%;background:var(--licht);box-shadow:0 0 0 0 rgb(43 79 176 / .45)}
.ek-auto-strecke{position:relative}
.ek-auto-schiene{position:absolute;left:10%;right:10%;top:21px;height:2px;border-radius:2px;background:var(--rand-linie)}
.ek-auto-fuell{position:absolute;inset:0;border-radius:2px;background:var(--licht);transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ek-auto-laeufer{position:absolute;inset:0;transform:translateX(-100%);transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ek-auto-laeufer i{position:absolute;right:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--licht);box-shadow:0 0 0 4px rgb(43 79 176 / .16)}
.ek-auto-knoten{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.ek-k{display:grid;justify-items:center;text-align:center;gap:3px;opacity:.55;transition:opacity .5s}
.ek-k.aktiv,.ek-k.fertig{opacity:1}
.ek-k-punkt{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--flaeche-1);border:1px solid var(--rand-feld);color:var(--grau);transition:border-color .5s,color .5s,box-shadow .5s}
.ek-k-punkt svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ek-k.aktiv .ek-k-punkt{border-color:var(--licht);color:var(--akzent-text);box-shadow:0 0 0 5px rgb(43 79 176 / .12)}
.ek-k.fertig .ek-k-punkt{border-color:var(--licht);color:var(--akzent-text)}
.ek-k-haken{position:absolute;right:-3px;top:-3px;width:16px;height:16px;border-radius:50%;background:var(--licht);opacity:0;transform:scale(.4);transition:opacity .35s,transform .35s}
.ek-k-haken::after{content:"";position:absolute;left:5px;top:4px;width:5px;height:3px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
.ek-k.fertig .ek-k-haken{opacity:1;transform:none}
.ek-k b{font:700 .84rem/1.2 var(--titel);color:var(--tinte);margin-top:4px}
.ek-k small{font-size:.72rem;line-height:1.3;color:var(--grau)}
.ek-brief{position:absolute;left:50%;top:-6px;width:26px;height:18px;margin-left:-13px;border-radius:4px;background:var(--flaeche-1);border:1px solid var(--rand-feld);box-shadow:0 6px 14px -6px rgb(var(--schatten-rgb) / .4);opacity:0;pointer-events:none}
.ek-brief::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:3px 3px 0 0;background:var(--licht)}
.ek-brief i{position:absolute;left:5px;right:7px;top:9px;height:2px;border-radius:2px;background:var(--rand-feld);box-shadow:0 4px 0 var(--rand-feld)}
.ek-auto-status{position:relative;margin:12px 0 0;min-height:1.45em;font-size:.88rem;line-height:1.45;color:var(--text)}
.ek-auto-status span{display:none}
[data-schritt="1"] [data-ek-status="1"],[data-schritt="2"] [data-ek-status="2"],[data-schritt="3"] [data-ek-status="3"],[data-schritt="4"] [data-ek-status="4"],[data-schritt="5"] [data-ek-status="5"],[data-schritt="6"] [data-ek-status="6"],[data-schritt="7"] [data-ek-status="7"]{display:inline;animation:ekStatus .5s ease both}
@keyframes ekStatus{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Stand je Schritt: Füllung und Läufer (Knoten bei 10 · 30 · 50 · 70 · 90 Prozent) */
[data-schritt="3"] .ek-auto-fuell{transform:scaleX(.25)}[data-schritt="3"] .ek-auto-laeufer{transform:translateX(-75%)}
[data-schritt="4"] .ek-auto-fuell{transform:scaleX(.5)}[data-schritt="4"] .ek-auto-laeufer{transform:translateX(-50%)}
[data-schritt="5"] .ek-auto-fuell{transform:scaleX(.75)}[data-schritt="5"] .ek-auto-laeufer{transform:translateX(-25%)}
[data-schritt="6"] .ek-auto-fuell,[data-schritt="7"] .ek-auto-fuell{transform:scaleX(1)}[data-schritt="6"] .ek-auto-laeufer,[data-schritt="7"] .ek-auto-laeufer{transform:translateX(0)}
/* Ab 1024 px: ruhige Bewegung. Mail-Karten fliegen aus dem aktiven Knoten, der Live-Punkt atmet */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .ek-auto-live{animation:ekLive 2.4s ease-out infinite}
  .ek-k.aktiv .ek-brief{animation:ekBrief 2.8s cubic-bezier(.3,.7,.3,1) .5s infinite}
  .ek-k.aktiv .ek-k-punkt{animation:ekPuls 2.8s ease-in-out infinite}
}
@keyframes ekLive{0%{box-shadow:0 0 0 0 rgb(43 79 176 / .45)}70%,100%{box-shadow:0 0 0 9px rgb(43 79 176 / 0)}}
@keyframes ekBrief{0%{opacity:0;transform:translate(0,6px) scale(.8)}18%{opacity:1;transform:translate(0,-14px) scale(1)}70%{opacity:1;transform:translate(22px,-40px) scale(.95)}100%{opacity:0;transform:translate(34px,-54px) scale(.9)}}
@keyframes ekPuls{0%,100%{transform:none}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.ek-auto-fuell,.ek-auto-laeufer,.ek-k,.ek-k-punkt,.ek-k-haken{transition:none}.ek-auto-status span{animation:none!important}}
/* Handy: senkrechte Liste ohne Flug, Läufer aus */
@media (max-width:699px){
  .ek-auto{padding:14px 14px 12px}
  .ek-auto-schiene{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
  .ek-auto-fuell{transform-origin:50% 0;transform:scaleY(0)!important}
  [data-schritt="3"] .ek-auto-fuell{transform:scaleY(.25)!important}[data-schritt="4"] .ek-auto-fuell{transform:scaleY(.5)!important}[data-schritt="5"] .ek-auto-fuell{transform:scaleY(.75)!important}
  [data-schritt="6"] .ek-auto-fuell,[data-schritt="7"] .ek-auto-fuell{transform:scaleY(1)!important}
  .ek-auto-laeufer{display:none}
  .ek-auto-knoten{grid-template-columns:1fr;gap:8px}
  .ek-k{grid-template-columns:44px 1fr;grid-template-rows:auto auto;justify-items:start;text-align:left;column-gap:12px;row-gap:0}
  .ek-k-punkt{grid-row:1/3}
  .ek-k b{margin-top:5px;align-self:end}
  .ek-k small{align-self:start}
  .ek-brief{display:none}
}
.ek-laptop{background:linear-gradient(100deg,#fafcfd 0%,#f3f5f6 55%,#e4e6e8 100%)}
:root[data-theme="dunkel"] .ek-laptop{background:linear-gradient(100deg,#22282c 0%,#1d2326 55%,#191d20 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .ek-laptop{background:linear-gradient(100deg,#22282c 0%,#1d2326 55%,#191d20 100%)}}
.ek-laptop img{left:5%;top:2%;width:95%;height:96%;object-position:100% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.ek-rechts .ek-buehne{aspect-ratio:16/10.5}
@keyframes ekBrief{0%{opacity:0;transform:translate(0,4px) scale(.8)}20%{opacity:1;transform:translate(6px,-10px) scale(1)}75%{opacity:1;transform:translate(34px,-20px) scale(.95)}100%{opacity:0;transform:translate(46px,-22px) scale(.9)}}
@media (max-width:860px){.ek-rechts .ek-buehne{aspect-ratio:4/3.1}}
.ek-laptop{background:radial-gradient(ellipse 75% 70% at 52% 38%,#ffffff 0%,#f7f9fa 50%,#e6e8ea 100%)}
:root[data-theme="dunkel"] .ek-laptop{background:radial-gradient(ellipse 75% 70% at 52% 38%,#262c30 0%,#1f2427 55%,#191d20 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .ek-laptop{background:radial-gradient(ellipse 75% 70% at 52% 38%,#262c30 0%,#1f2427 55%,#191d20 100%)}}
.ek-laptop img{-webkit-mask-image:radial-gradient(ellipse 62% 60% at 58% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 58% 50%,#000 72%,transparent 100%)}
.ek-rechts .ek-mail{align-items:flex-start;padding-left:8%}
.ek-rechts .ek-mail img{width:min(50%,330px)}
.ek-rechts .ek-mail figcaption{left:auto;right:16px}
@keyframes ekBrief{0%{opacity:0;transform:translate(0,2px) scale(.8)}20%{opacity:1;transform:translate(8px,-6px) scale(1)}75%{opacity:1;transform:translate(40px,-9px) scale(.95)}100%{opacity:0;transform:translate(54px,-9px) scale(.9)}}
.ek-auto-kopf{margin-bottom:22px}

/* Laptop vollständig (Ervin 25.10.2026): neue Bilder mit freigestelltem, ganzem Laptop – keine Maske, kein Anschnitt */
.ek-laptop img{-webkit-mask-image:none;mask-image:none;inset:auto;left:0;top:1%;width:100%;height:82%;object-fit:contain;object-position:50% 50%}
/* Baukasten: Video in der Vorschau abspielen (25.10.2026) */
.em-schutz.em-ueber-video{cursor:pointer}
.em-video-buehne{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:clamp(12px,3vw,28px);border-radius:inherit;background:rgb(14 16 18 / .82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.em-video-buehne[hidden]{display:none}
.em-video-buehne video{display:block;width:100%;max-height:100%;border-radius:16px;background:#000;box-shadow:0 30px 60px -30px rgb(0 0 0 / .7)}
.em-video-zu{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;font-size:1rem;cursor:pointer}
.em-video-hinweis{width:100%;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:.86rem;line-height:1.45;color:var(--grau)}
.em-video-hinweis[hidden]{display:none}
.em-video-start{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--pille);border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:650 .88rem var(--lauf);cursor:pointer}
.em-video-start span{color:var(--akzent-text);font-size:.8em}

/* ===== Chat-Assistent Anima (25.10.2026): seitliches Panel am Rechner, Vollbild am Handy, Antworten als Karten.
   Farben nur über die Tokens (hell + dunkel), Bewegung nur transform/opacity, prefers-reduced-motion schaltet sie ab. ===== */
.chat-knopf{background:var(--metall-dunkel);border-color:rgba(255,255,255,.22);box-shadow:0 20px 44px -16px rgb(var(--schatten-rgb) / .6)}
.chat-knopf img{background:linear-gradient(160deg,#EEF2FD,#C9D3EC)}
.chat{--chat-r:26px;position:fixed;z-index:80;right:12px;top:12px;bottom:12px;left:auto;width:min(468px,calc(100vw - 24px));height:auto;max-height:none;display:flex;flex-direction:column;
  background:var(--grund);border:1px solid var(--rand-linie);border-radius:var(--chat-r);overflow:hidden;box-shadow:0 50px 120px -30px rgb(var(--schatten-rgb) / .55),0 0 0 1px rgb(var(--schatten-rgb) / .04);
  opacity:0;transform:translateX(28px) scale(.985);transform-origin:100% 100%}
.chat.chat-da{opacity:1;transform:none;transition:opacity .28s ease,transform .42s cubic-bezier(.16,1,.3,1)}
.chat[hidden]{display:none}
.chat-kopf{position:relative;display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:var(--metall-dunkel);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.chat-kopf::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(157,179,242,.55),transparent)}
.chat-avatar{position:relative;flex:none;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#F7F8FA,#C9D0D8 70%,#9AA3AA);box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(0,0,0,.35);overflow:hidden}
.chat-avatar img{position:absolute;left:50%;top:6px;width:34px;height:auto;transform:translateX(-50%)}
.chat-punkt{position:absolute;right:1px;bottom:3px;width:11px;height:11px;border-radius:50%;background:#1F9D57;border:2px solid #16191C}
.chat-punkt::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #1F9D57;animation:chatPuls 2.4s ease-out infinite}
@keyframes chatPuls{0%{transform:scale(.8);opacity:.9}80%,100%{transform:scale(2.1);opacity:0}}
.chat-wer{min-width:0;flex:1}
.chat-wer b{display:block;font:italic 600 1.45rem/1 "Bodoni Moda",Georgia,serif;letter-spacing:-.01em}
.chat-wer small{display:block;margin-top:4px;font:500 .74rem var(--lauf);color:#AEB6BD;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-kopf button{flex:none;margin:0;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font:400 1.15rem/1 var(--lauf);cursor:pointer;display:grid;place-items:center}
.chat-kopf .chat-zu{font-size:1.45rem}
.chat-kopf button:focus-visible,.chat button:focus-visible,.chat a:focus-visible,.chat input:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
.chat-verlauf{position:relative;flex:1;overflow-y:auto;padding:18px 16px 12px;display:flex;flex-direction:column;gap:12px;background:var(--grund);scroll-behavior:auto;overscroll-behavior:contain}
.chat-verlauf>*{flex:none}
/* Begrüßung */
.chat-hallo{position:relative;padding:20px 120px 20px 20px;border-radius:22px;background:var(--flaeche-1);border:1px solid var(--rand-linie);overflow:hidden;min-height:150px}
.chat-hallo::before{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgb(43 79 176 / .16),transparent 70%)}
.chat-hallo-bild{position:absolute;right:6px;bottom:-14px;width:112px;height:auto}
.chat-hallo-titel{position:relative;margin:0 0 8px;font:800 1.55rem/1.08 var(--titel);letter-spacing:-.02em;color:var(--tinte)}
.chat-hallo-titel em{font:italic 600 1.12em "Bodoni Moda",Georgia,serif;color:var(--akzent-text)}
.chat-hallo-text{position:relative;margin:0;font-size:.9rem;line-height:1.5;color:var(--text)}
.chat-start-titel{margin:6px 2px 0;font:700 .72rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--stahl)}
.chat-start{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chat-start button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:104px;padding:12px 12px 14px;border-radius:18px;border:1px solid var(--rand-linie);background:var(--flaeche-1);color:var(--tinte);text-align:left;cursor:pointer;font:inherit}
.chat-start .nr{font:700 .7rem var(--lauf);color:var(--akzent-text);letter-spacing:.08em}
.chat-start b{font:700 .92rem/1.25 var(--titel);letter-spacing:-.005em}
.chat-start small{font-size:.74rem;line-height:1.35;color:var(--grau)}
.chat-start .pfeil{position:absolute;right:12px;top:10px;color:var(--stahl);font-size:.9rem}
/* Nachrichten */
.cz{display:flex;gap:8px;align-items:flex-end}
.cz.ich{justify-content:flex-end}
.cz-avatar{flex:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#F7F8FA,#C9D0D8 70%,#9AA3AA);overflow:hidden;position:relative;align-self:flex-start;margin-top:2px}
.cz-avatar img{position:absolute;left:50%;top:3px;width:20px;height:auto;transform:translateX(-50%)}
.cm{max-width:100%;margin:0;padding:0;border-radius:0;font-size:.92rem;line-height:1.55}
.cm.ich{max-width:84%;padding:10px 14px;border-radius:18px 18px 6px 18px;background:var(--graphit);color:#fff;font-weight:500}
.cm.bot{flex:1;min-width:0;padding:14px 16px;border-radius:6px 20px 20px 20px;background:var(--flaeche-1);border:1px solid var(--rand-linie);color:var(--text)}
.cm.bot:focus{outline:none}.cm.bot:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
.cm-text{margin:0}
.cm.bot>*+*{margin-top:10px}
.cm.bot b{color:var(--tinte);font-weight:700}
.cm .w{opacity:0;transition:opacity .2s ease}
.cm .w.da{opacity:1}
.cm .spaet{opacity:0;transform:translateY(6px)}
.cm .spaet.da{opacity:1;transform:none;transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.cm-tippt{flex:none !important;display:inline-flex;gap:5px;align-items:center;padding:14px 16px !important}
.cm-tippt i{width:7px;height:7px;border-radius:50%;background:var(--stahl-deko);animation:chatTippt 1s ease-in-out infinite}
.cm-tippt i:nth-child(2){animation-delay:.15s}.cm-tippt i:nth-child(3){animation-delay:.3s}
@keyframes chatTippt{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
/* Karten in der Antwort */
.ck-pakete{display:grid;gap:8px}
.ck-paket{position:relative;display:block;width:100%;padding:12px 14px;border-radius:16px;border:1px solid var(--rand-linie);background:var(--grund);color:var(--tinte);text-align:left;font:inherit;cursor:pointer}
.ck-paket.empf{border-color:var(--akzent-text);background:var(--flaeche-blau)}
.ck-marke{position:absolute;right:12px;top:-9px;padding:2px 9px;border-radius:99px;background:#C98A12;color:#16191C;font:700 .66rem var(--lauf);letter-spacing:.06em;text-transform:uppercase}
.ck-paket-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ck-paket-name{font:italic 600 1.2rem "Bodoni Moda",Georgia,serif}
.ck-paket-preis{font:800 1.25rem var(--titel);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ck-paket-was{display:block;margin-top:1px;font-size:.74rem;color:var(--grau)}
.ck-paket-punkte{display:grid;gap:3px;margin-top:8px}
.ck-paket-punkte span{position:relative;padding-left:14px;font-size:.82rem;line-height:1.4;color:var(--text)}
.ck-paket-punkte span::before{content:"";position:absolute;left:2px;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--akzent-text)}
.ck-paket-mehr{display:block;margin-top:8px;font:650 .78rem var(--lauf);color:var(--akzent-text)}
.ck-liste,.ck-schritte{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.ck-liste li{position:relative;padding-left:18px;line-height:1.45}
.ck-liste li::before{content:"";position:absolute;left:3px;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--akzent-text);transform:rotate(45deg)}
.ck-schritte{counter-reset:s}
.ck-schritte li{counter-increment:s;position:relative;padding:2px 0 2px 34px;line-height:1.45;min-height:24px}
.ck-schritte li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--akzent-flaeche);color:var(--auf-akzent);font:700 .74rem var(--lauf)}
.ck-schritte li:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:26px;bottom:-7px;width:1px;background:var(--rand-feld)}
.ck-preise{margin:0;border-radius:14px;border:1px solid var(--rand-linie);overflow:hidden}
.ck-preise div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 12px;background:var(--grund)}
.ck-preise div+div{border-top:1px solid var(--rand-linie)}
.ck-preise dt{font-size:.82rem;line-height:1.4;color:var(--text)}
.ck-preise dd{margin:0;flex:none;max-width:48%;text-align:right;font:750 .86rem/1.3 var(--titel);color:var(--tinte);font-variant-numeric:tabular-nums}
.ck-hinweis{padding:10px 12px 11px 14px;border-radius:12px;background:var(--flaeche-blau);border-left:3px solid #C98A12}
.ck-hinweis b{display:block;font:700 .68rem var(--lauf);letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2)}
.ck-hinweis p{margin:3px 0 0;font-size:.84rem;line-height:1.45}
.ck-links{display:flex;flex-wrap:wrap;gap:6px}
.ck-knopf{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:650 .82rem var(--lauf);text-decoration:none}
.ck-knopf::after{content:"→";font-size:.85em;color:var(--akzent-text)}
.ck-knopf.ck-haupt{background:var(--akzent-flaeche);border-color:var(--akzent-flaeche);color:var(--auf-akzent)}
.ck-knopf.ck-haupt::after{color:inherit}
.ck-quelle{font-size:.7rem !important;color:var(--stahl);line-height:1.4}
.ck-quelle a{color:var(--stahl);text-decoration:underline;text-underline-offset:2px}
.ck-ausweg{display:flex;align-items:center;gap:12px}
.ck-ausweg-bild{flex:none;width:54px;height:auto}
/* Folgefragen */
.chat-weiter{padding-left:36px}
.chat-weiter-titel{margin:0 0 6px;font:700 .68rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--stahl)}
.chat-weiter-reihe{display:flex;flex-wrap:wrap;gap:6px}
.chat .chip{min-height:38px;padding:7px 13px;border-radius:99px;border:1px solid var(--akzent-text);background:var(--flaeche-1);color:var(--akzent-tief);font:650 .82rem/1.25 var(--lauf);text-align:left;cursor:pointer}
.chat .chip.leise{border-color:var(--rand-feld);color:var(--grau)}
.chat-weiter{animation:chatRein .35s cubic-bezier(.16,1,.3,1) both}
@keyframes chatRein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Immer sichtbar: Gespräch buchen, Direkt anrufen */
.chat-cta{display:grid;grid-template-columns:1.15fr 1fr;gap:8px;padding:10px 12px 0;background:var(--grund);border-top:1px solid var(--rand-linie)}
.chat-cta a{display:flex;flex-direction:column;justify-content:center;min-height:50px;padding:6px 14px;border-radius:16px;text-decoration:none;line-height:1.2}
.chat-cta b{font:700 .9rem var(--titel)}
.chat-cta small{font:500 .7rem var(--lauf);opacity:.8;margin-top:2px}
.chat-cta-termin{background:var(--akzent-flaeche);color:var(--auf-akzent)}
.chat-cta-tel{background:var(--flaeche-1);color:var(--tinte);border:1px solid var(--rand-feld)}
.chat-eingabe{display:flex;gap:8px;padding:10px 12px 8px;border-top:0;background:var(--grund)}
.chat-eingabe input{flex:1;min-width:0;height:46px;border:1px solid var(--rand-feld);border-radius:99px;padding:0 16px;background:var(--flaeche-1);color:var(--tinte);font:500 .95rem var(--lauf);outline:none}
.chat-eingabe input::placeholder{color:var(--stahl)}
.chat-eingabe input:focus{border-color:var(--akzent-text)}
.chat-eingabe button{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--graphit);color:#fff;font-size:1.1rem;cursor:pointer}
.chat-hinweis{margin:0;padding:0 12px 10px;background:var(--grund);font-size:.68rem;color:var(--stahl);text-align:center}
@media(hover:hover) and (min-width:641px){
  .chat-start button{transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s}
  .chat-start button:hover{transform:translateY(-2px);border-color:var(--akzent-text)}
  .chat-start button:hover .pfeil{color:var(--akzent-text)}
  .ck-paket{transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s}
  .ck-paket:hover{transform:translateY(-2px);border-color:var(--akzent-text)}
  .chat .chip{transition:background .2s,color .2s}
  .chat .chip:hover{background:var(--akzent-flaeche);color:var(--auf-akzent)}
  .chat-cta a{transition:transform .2s}.chat-cta a:hover{transform:translateY(-1px)}
}
@media(max-width:640px){
  .chat{--chat-r:0;left:0;right:0;top:var(--chat-y,0px);bottom:auto;width:100%;height:var(--chat-h,100dvh);border:0;border-radius:0;z-index:95;transform:translateY(16px);transform-origin:50% 100%}
  .chat-kopf{padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px 14px}
  .chat-wer-zusatz{display:none}
  .chat-kopf button{width:44px;height:44px}
  .chat-verlauf{padding:14px 12px 10px}
  .chat-hallo{padding:16px 104px 16px 16px;min-height:136px}
  .chat-hallo-bild{width:96px}
  .chat-hallo-titel{font-size:1.4rem}
  .chat-start button{min-height:96px}
  .chat-weiter{padding-left:0}
  .chat-eingabe input{font-size:16px}
  .chat-hinweis{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){.chat-start{grid-template-columns:1fr}.chat-start button{min-height:0}.chat-hallo{padding-right:16px}.chat-hallo-bild{display:none}}
@media(prefers-reduced-motion:reduce){
  .chat,.chat.chat-da{transition:none;transform:none}
  .chat-punkt::after,.cm-tippt i,.chat-weiter{animation:none}
  .cm .w,.cm .spaet{opacity:1;transform:none;transition:none}
}

/* ===== Website-Check: neuer Ergebnisbereich (Ervin 25.10.2026) =====
   Note im Ring, Anima-Satz, Ampel-Karten, passendes Paket, Erstgespräch mit Kalender als Hauptweg,
   Rückruf klein darunter, Entwickler-Bericht als Nebenweg. Animationen nur transform/opacity. */
.kc2{grid-column:1/-1;position:relative;margin-top:clamp(8px,2vw,20px);--rot:#D64545;--gelb:#D99A00;--gruen:#1E9E5F;--bernstein:#E8A33D;
  --rot-t:light-dark(#B73232,#FF8A8A);--gelb-t:light-dark(#8F6400,#FFC24B);--gruen-t:light-dark(#17784A,#5BD99A)}
.kc2>*{min-width:0}
.kc2-kopf{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:clamp(18px,3.5vw,44px);align-items:center;padding:clamp(18px,3vw,34px);border-radius:28px;
  background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 40px 80px -50px rgba(30,58,138,.55)}
.kc2-ring{--wert:0;--f:var(--gelb);position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--f) calc(var(--wert) * 1%),light-dark(#E8ECF4,#2A3036) 0)}
.kc2-ring[data-ampel="rot"]{--f:var(--rot)}.kc2-ring[data-ampel="gruen"]{--f:var(--gruen)}
.kc2-ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px dashed light-dark(rgba(43,79,176,.25),rgba(157,179,242,.25))}
.kc2-ring-innen{width:78%;aspect-ratio:1;border-radius:50%;background:var(--flaeche-1);display:grid;place-content:center;text-align:center;box-shadow:inset 0 2px 10px rgba(0,0,0,.06)}
.kc2-ring b{font:800 clamp(3rem,7vw,4.8rem)/.9 var(--titel);font-stretch:112%;letter-spacing:-.05em;color:var(--tinte)}
.kc2-ring span{font:600 .74rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--grau);margin-top:6px}
.kc2-klein{font:600 .74rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin:0 0 8px;overflow-wrap:anywhere}
.kc2-klein span{color:var(--akzent-text)}
.kc2-titel{font:800 clamp(1.6rem,3.4vw,2.7rem)/1.04 var(--titel);font-stretch:108%;letter-spacing:-.03em;color:var(--tinte);margin:0 0 16px}
.kc2-anima{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:end;margin:0 0 16px}
.kc2-anima img{width:56px;height:auto}
.kc2-anima p{margin:0;padding:12px 16px;border-radius:18px 18px 18px 6px;background:var(--flaeche-blau);color:var(--tinte);font-size:.95rem;line-height:1.5}
.kc2-anima p b{color:var(--akzent-text)}
.kc2-zaehler{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.kc2-zaehler span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--rand-linie);font-size:.84rem;color:var(--grau)}
.kc2-zaehler i{width:10px;height:10px;border-radius:50%}.kc2-zaehler b{color:var(--tinte);font:800 1rem var(--titel)}
.kc2-zaehler .rot i{background:var(--rot)}.kc2-zaehler .gelb i{background:var(--gelb)}.kc2-zaehler .gruen i{background:var(--gruen)}
.kc2-karten{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.kc2-karten li{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:20px;background:var(--flaeche-1);border:1px solid var(--rand-linie);overflow:hidden}
.kc2-karten li::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--c)}
.kc2-karten li.rot{--c:var(--rot);--t:var(--rot-t)}.kc2-karten li.gelb{--c:var(--gelb);--t:var(--gelb-t)}.kc2-karten li.gruen{--c:var(--gruen);--t:var(--gruen-t)}
.kc2-ampel{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:700 .7rem var(--lauf);letter-spacing:.1em;text-transform:uppercase;color:var(--t)}
.kc2-ampel::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
.kc2-karten b{font:750 1.02rem/1.25 var(--titel);color:var(--tinte);padding-right:56px}
.kc2-karten p{margin:0;font-size:.88rem;line-height:1.5;color:var(--text)}
.kc2-karten small{font-size:.78rem;line-height:1.45;color:var(--grau)}
.kc2-karten em{position:absolute;right:16px;top:16px;font:800 1.5rem/1 var(--titel);font-style:normal;color:var(--t)}
.kc2-karten em span{font-size:.7rem;font-weight:600;color:var(--grau)}
/* Passt dazu: dunkle Graphit-Karte mit einem Bernstein-Licht */
.kc2-paket{margin-top:14px;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:clamp(14px,2.5vw,28px);align-items:center;padding:clamp(16px,2.6vw,26px);border-radius:24px;
  background:radial-gradient(60% 120% at 0% 0%,rgba(232,163,61,.22),transparent 60%),linear-gradient(135deg,#1F2429 0%,#16191C 55%,#0F1114 100%);color:#E7EBED}
.kc2-paket img{width:96px;height:96px;object-fit:contain}
.kc2-paket .kc2-marke{color:var(--bernstein)}.kc2-paket .kc2-marke i{background:var(--bernstein)}
.kc2-paket h4{margin:4px 0 6px;font:800 clamp(1.3rem,2.4vw,1.8rem)/1.1 var(--titel);color:#fff}.kc2-paket h4 span{font-weight:500;color:#AEB6BC}
.kc2-paket p{margin:0 0 8px;font-size:.9rem;color:#C9CFD3;line-height:1.5}
.kc2-paket ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.kc2-paket li{font-size:.78rem;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.07);color:#DDE2E5}
.kc2-paket-preis{display:grid;justify-items:end;gap:2px;text-align:right}
.kc2-paket-preis b{font:800 1.9rem/1 var(--titel);color:#fff}.kc2-paket-preis span{font-size:.76rem;color:#AEB6BC}
.kc2-paket-preis a{margin-top:10px;display:inline-flex;padding:10px 16px;border-radius:999px;background:var(--bernstein);color:#16191C;font:700 .86rem var(--lauf);text-decoration:none}
.kc2-paket-preis a:hover{background:#F2B65A}
.kc2-marke{display:inline-flex;align-items:center;gap:8px;margin:0;font:700 .72rem var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-text)}
.kc2-marke i{width:8px;height:8px;border-radius:50%;background:var(--akzent-flaeche)}
.kc2-marke-leise{color:var(--grau)}
/* Die zwei Wege: Erstgespräch groß, Entwickler-Bericht leise daneben */
.kc2-wege{margin-top:14px;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:14px;align-items:start}
.kc2-termin{position:relative;padding:clamp(20px,3vw,34px);border-radius:28px;background:var(--flaeche-1);border:2px solid var(--akzent-flaeche);
  box-shadow:0 40px 80px -46px rgba(43,79,176,.65)}
.kc2-termin h3{margin:10px 0 8px;font:800 clamp(1.5rem,3vw,2.3rem)/1.05 var(--titel);font-stretch:106%;letter-spacing:-.03em;color:var(--tinte);outline:none}
.kc2-termin h3 em,.kc2-entwickler h3 em{font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-weight:600;font-stretch:100%;letter-spacing:-.01em;color:var(--akzent-text)}
.kc2-text{margin:0 0 4px;font-size:.92rem;line-height:1.55;color:var(--grau)}
.kc2-tage{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(82px,1fr);gap:10px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.kc2-tage .kc-laedt{grid-column:1/-1}
.kc2-tag{scroll-snap-align:start;display:grid;justify-items:center;gap:2px;padding:12px 6px 10px;border-radius:18px;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);cursor:pointer;font-family:var(--lauf);transition:transform .2s,border-color .2s}
.kc2-tag small{font:700 .74rem var(--lauf);letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.kc2-tag b{font:800 1.9rem/1 var(--titel);font-stretch:110%;color:var(--tinte)}
.kc2-tag span{font-size:.78rem;color:var(--grau)}
.kc2-tag em{margin-top:4px;font-style:normal;font-size:.7rem;font-weight:700;color:light-dark(#9A5C00,#F2B65A)}
.kc2-tag:hover{border-color:var(--akzent-text);transform:translateY(-2px)}
.kc2-tag.an{background:var(--akzent-flaeche);border-color:var(--akzent-flaeche);transform:translateY(-3px)}
.kc2-tag.an small,.kc2-tag.an b,.kc2-tag.an span,.kc2-tag.an em{color:var(--auf-akzent)}
.kc2-zeiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.kc2-zeit{min-height:46px;border-radius:14px;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:700 1rem var(--lauf);font-variant-numeric:tabular-nums;cursor:pointer;transition:transform .2s,border-color .2s}
.kc2-zeit:hover{border-color:var(--akzent-text);transform:translateY(-1px)}
.kc2-zeit.an{background:var(--graphit);border-color:var(--graphit);color:#fff}
:root[data-theme="dunkel"] .kc2-zeit.an{background:#F3F5F6;color:#0E1012}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .kc2-zeit.an{background:#F3F5F6;color:#0E1012}}
.kc2-tag:focus-visible,.kc2-zeit:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
.kc2-form{margin-top:4px}
.kc2-steht{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center;margin-top:16px;padding:18px;border-radius:20px;background:light-dark(#EAF7F0,#15291F);outline:none}
.kc2-steht img{width:84px;height:auto}
.kc2-steht b{display:block;font:800 1.5rem/1.1 var(--titel);color:var(--tinte);margin-bottom:6px}
.kc2-steht p{margin:0;font-size:.92rem;line-height:1.55;color:var(--text)}
.kc2-rueckruf{margin-top:18px;border-top:1px dashed var(--rand-linie);padding-top:14px}
.kc2-rueckruf summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:44px;padding:4px 0}
.kc2-rueckruf summary::-webkit-details-marker{display:none}
.kc2-rueckruf summary span{font:700 .98rem var(--lauf);color:var(--akzent-text);text-decoration:underline;text-underline-offset:3px}
.kc2-rueckruf summary small{font-size:.82rem;color:var(--grau)}
.kc2-rueckruf[open] summary span{text-decoration:none}
.kc2-leise{background:var(--graphit)!important;box-shadow:none!important}
.kc2-entwickler{padding:clamp(18px,2.6vw,26px);border-radius:24px;background:var(--flaeche-2);border:1px solid var(--rand-linie)}
.kc2-entwickler h3{margin:8px 0 8px;font:800 1.25rem/1.2 var(--titel);color:var(--tinte)}
.kc2-inhalt{list-style:none;margin:10px 0 14px;padding:0;display:grid;gap:6px}
.kc2-inhalt li{position:relative;padding:8px 12px 8px 34px;border-radius:12px;background:var(--flaeche-1);font-size:.86rem;color:var(--tinte)}
.kc2-inhalt li::before{counter-increment:kc2t;content:counter(kc2t);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;background:var(--graphit);color:#fff;font:700 .7rem/18px var(--lauf);text-align:center}
.kc2-inhalt{counter-reset:kc2t}
.kc2-knopf-leise{width:100%;min-height:46px;border-radius:14px;border:1px solid var(--tinte);background:transparent;color:var(--tinte);font:700 .92rem var(--lauf);cursor:pointer}
.kc2-knopf-leise:hover{background:var(--flaeche-1)}
.kc2-kauf{margin-top:14px;padding:16px;background:var(--flaeche-1)}
.kc2 .kc-quellen{margin-top:14px}
/* Wie genau sind die Ergebnisse? (Ervin 25.10.2026): aufklappbarer Kasten unter dem Ergebnis, Etiketten an den Karten */
.kc2-genau{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:3px 9px;border-radius:999px;border:1px solid var(--g-rand);background:var(--g-grund);
  color:var(--g-text);font:700 .68rem/1.4 var(--lauf);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;font-family:var(--lauf)}
.kc2-genau::before{content:"";width:7px;height:7px;flex:none;background:currentColor}
.kc2-genau.exakt{--g-text:light-dark(#17784A,#5BD99A);--g-rand:light-dark(rgba(23,120,74,.35),rgba(91,217,154,.35));--g-grund:light-dark(#EAF7F0,rgba(91,217,154,.08))}
.kc2-genau.exakt::before{border-radius:2px;transform:rotate(45deg)}
.kc2-genau.schwankt{--g-text:light-dark(#8F5A00,#F2B65A);--g-rand:light-dark(rgba(160,110,0,.4),rgba(242,182,90,.4));--g-grund:light-dark(#FDF4E4,rgba(242,182,90,.08))}
.kc2-genau.schwankt::before{border-radius:50%}
button.kc2-genau:hover{border-color:var(--g-text)}
button.kc2-genau:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
h4 .kc2-genau{cursor:default;margin:0}
.kc-genau{margin-top:14px;border-radius:22px;background:var(--flaeche-1);border:1px solid var(--rand-linie);overflow:hidden;scroll-margin-top:90px}
.kc-genau summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:36px minmax(0,1fr) 24px;gap:14px;align-items:center;padding:16px clamp(16px,2.4vw,24px);min-height:44px}
.kc-genau summary::-webkit-details-marker{display:none}
.kc-genau summary:focus-visible{outline:2px solid var(--akzent-text);outline-offset:-4px;border-radius:22px}
.kc-genau-i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--flaeche-blau);color:var(--akzent-text);font:italic 700 1.1rem/1 "Bodoni Moda",Georgia,serif}
.kc-genau-kopf b{display:block;font:800 1.08rem/1.25 var(--titel);color:var(--tinte)}
.kc-genau-kopf small{display:block;margin-top:2px;font-size:.86rem;line-height:1.45;color:var(--grau)}
.kc-genau-pfeil{width:24px;height:24px;border-radius:50%;border:1px solid var(--rand-linie);position:relative}
.kc-genau-pfeil::before{content:"";position:absolute;left:50%;top:45%;width:7px;height:7px;border-right:2px solid var(--tinte);border-bottom:2px solid var(--tinte);transform:translate(-50%,-50%) rotate(45deg)}
.kc-genau[open] .kc-genau-pfeil::before{top:58%;transform:translate(-50%,-50%) rotate(-135deg)}
.kc-genau-inhalt{padding:0 clamp(16px,2.4vw,24px) clamp(16px,2.4vw,22px);border-top:1px dashed var(--rand-linie)}
.kc-genau-inhalt p{margin:14px 0 0;font-size:.92rem;line-height:1.6;color:var(--text);max-width:72ch}
.kc-genau-lead{color:var(--tinte)!important}
.kc-genau-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.kc-genau-teil{padding:16px;border-radius:16px;background:var(--flaeche-2);border:1px solid var(--rand-linie)}
.kc-genau-teil h4{margin:0}
.kc-genau-teil p{margin-top:10px!important;font-size:.88rem!important}
.kc-genau-teil ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.kc-genau-teil li{position:relative;padding-left:18px;font-size:.86rem;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
.kc-genau-teil li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:2px}
.kc-genau-teil.exakt li::before{background:light-dark(#17784A,#5BD99A);transform:rotate(45deg)}
.kc-genau-teil.schwankt li::before{background:light-dark(#A06E00,#F2B65A);border-radius:50%}
.kc-genau-merk{padding:12px 14px;border-radius:14px;border-left:3px solid var(--bernstein);background:light-dark(#FDF6EA,rgba(232,163,61,.08))}
.kc-genau-merk b{color:var(--tinte)}
.kc-genau-klein{font-size:.8rem!important;color:var(--grau)!important}
@media (max-width:640px){.kc-genau-spalten{grid-template-columns:minmax(0,1fr)}.kc-genau summary{grid-template-columns:30px minmax(0,1fr) 22px;gap:10px}.kc-genau-i{width:30px;height:30px}}
@media (max-width:900px){.kc2-wege{grid-template-columns:1fr}.kc2-paket{grid-template-columns:72px minmax(0,1fr)}.kc2-paket img{width:72px;height:72px}.kc2-paket-preis{grid-column:1/-1;grid-auto-flow:column;justify-content:space-between;align-items:center;justify-items:start;text-align:left}.kc2-paket-preis a{margin-top:0}}
@media (max-width:560px){
  .kc2-kopf{grid-template-columns:1fr;justify-items:start;border-radius:22px;padding:18px}
  .kc2-ring{width:150px}
  .kc2-karten{grid-template-columns:1fr}
  .kc2-termin{border-radius:22px;padding:18px}
  .kc2-tage{grid-auto-columns:76px}
  .kc2-zeiten{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kc2-paket-preis{grid-auto-flow:row;justify-content:start}
}
/* Auftritt: nur transform und opacity, ohne Bewegung bei reduzierter Bewegung */
@media (prefers-reduced-motion:no-preference){
  .kc2:not([hidden]) .kc2-ring{animation:kc2Ring .9s cubic-bezier(.2,.7,.2,1) both}
  .kc2:not([hidden]) .kc2-urteil{animation:kc2Auf .7s .12s cubic-bezier(.2,.7,.2,1) both}
  .kc2:not([hidden]) .kc2-karten li{animation:kc2Auf .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.25s + var(--i,0) * 70ms)}
  .kc2:not([hidden]) .kc2-paket:not([hidden]),.kc2:not([hidden]) .kc2-wege{animation:kc2Auf .7s .5s cubic-bezier(.2,.7,.2,1) both}
  .kc2-tag,.kc2-zeit{animation:kc2Auf .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 40ms)}
  .kc2-steht:not([hidden]){animation:kc2Ring .6s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes kc2Auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kc2Ring{from{opacity:0;transform:scale(.86) rotate(-8deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kc2-tag,.kc2-zeit{transition:none}.kc2-tag:hover,.kc2-tag.an,.kc2-zeit:hover{transform:none}}
/* Das Ergebnis steht jetzt unter beiden Spalten: dann kleben die Spalten nicht mehr über dem Ergebnis */
@media(min-width:901px){.kc-tafel:has(.kc2:not([hidden]))>.kc-links,.kc-tafel:has(.kc2:not([hidden]))>.kc-rechts{position:relative;top:auto}}
.kc-tafel>.kc2{min-width:0;max-width:100%}
@media(max-width:900px){.kc-tafel{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.kc2-wege{grid-template-columns:minmax(0,1fr)}.kc2-termin,.kc2-entwickler{min-width:0}}
/* ===================== APP-HANDY (Ervin 25.10.2026) =====================
   „Bau die Handyansicht wie eine App.“ Alles Handy-Spezifische steht unter max-width:767px,
   Tablet-Korrekturen unter max-width:1023px. Ab 1024px gilt hier nur, was Ervin ausdrücklich
   für alle Breiten wollte: Dunkelmodus-Symbole (Nr. 5), Kontrast im blauen Kasten (Nr. 6/8),
   Programmcode nur neben der Schrift (Nr. 6), Karussell der Kundenstimmen (Nr. 4).
   Animationen nur transform/opacity, reduzierte Bewegung wird beachtet. */

/* ---------- alle Breiten: was es am Rechner nicht gibt ---------- */
.app-leiste,.nk-titel,.wisch-hinweis,.nk-rund{display:none}

/* Nr. 5: Plus- und Schließen-Symbole im Dunkelmodus hell (Kontrast mindestens 3:1) */
:root[data-theme="dunkel"] .frage i{background:#3A4652}
:root[data-theme="dunkel"] .frage i::before,:root[data-theme="dunkel"] .frage i::after{background:#F3F5F6}
:root[data-theme="dunkel"] .frage.offen i{background:#9DB3F2}
:root[data-theme="dunkel"] .frage.offen i::before,:root[data-theme="dunkel"] .frage.offen i::after{background:#0E1012}
:root[data-theme="dunkel"] .fn-liste .frage button i{background:#3A4652}
:root[data-theme="dunkel"] .fn-liste .frage button i::before,:root[data-theme="dunkel"] .fn-liste .frage button i::after{background:#F3F5F6}
:root[data-theme="dunkel"] .fragen summary::after{color:#F3F5F6}
:root[data-theme="dunkel"] :is(.chat-zu,.chat-neu){color:#fff}
:root[data-theme="dunkel"] .nm-zu i,:root[data-theme="dunkel"] .nk-burger i{background:#F3F5F6}
:root[data-theme="dunkel"] .nm-zu{background:#2A3138;border-color:#4A545D}
:root[data-theme="dunkel"] .nk-burger{background:#2A3138;border-color:#4A545D}

/* Nr. 8: weitere Kontrastfunde aus der Pixelmessung (25.10.2026), alle Breiten */
.band-tafel .band-titel em{color:#B9CBFA}                 /* Check-Band: war Blau auf Blau, 1,8:1 */
.band-tafel .marke-zeile{color:#C3D2F7}.band-tafel .marke-zeile::before{background:#C3D2F7}
:root[data-theme="hell"] .brot,:root[data-theme="hell"] .brot a{color:#4B5359}   /* Brotkrumen 4,2:1 auf Verläufen */
:root[data-theme="hell"] .kb-sterne{color:#8F5B00!important}
.kc-klein{color:var(--grau)}
:root :is(.fm-buehne,.fm-reise) .brot,:root :is(.fm-buehne,.fm-reise) .h1-zeile{width:fit-content;max-width:100%;padding:5px 12px;border-radius:999px;background:rgba(11,13,16,.84)}  /* Filme: Schrift auf dem Film braucht ruhigen Grund */
:root :is(.fm-buehne,.fm-reise) :is(.brot,.brot a,.brot b,.brot span){color:#F3F5F6}
:root :is(.fm-buehne,.fm-reise) .h1-zeile{color:#DCE4FA}
:root[data-theme="hell"] .lz-reiter-band a:not([aria-current]):not(.an){color:#4B5359}
:root[data-theme="hell"] .ph-karte:not(.ph-k2) :is(span,i,small),:root[data-theme="hell"] .pk-preis span,:root[data-theme="hell"] .ek-preis small{color:#4B5359!important}
:root[data-theme="hell"] h1.h1-zeile.marke-zeile:not(:is(.fm-buehne,.fm-reise) *){color:#1E3A8A}
:root[data-theme="hell"] :is(.em-unter,.em-datei-hinweis){color:#4B5359}
:root[data-theme="dunkel"] .lb-name:not(.lb-dunkel .lb-name){color:color-mix(in srgb,var(--lb-akzent,#2B4FB0) 45%,#fff)}

/* Nr. 10: das Filmbild im Startseiten-Erklärer wurde in der Höhe gestaucht (Rechner 9 %, Handy 35 %). Jetzt im echten Seitenverhältnis */
.fz-film img{width:auto;height:auto;max-width:82%;max-height:76%;flex:none;min-height:0}

/* Nr. 6 und 8: blauer Roboter-Kasten. Schrift immer auf ruhigem Grund, Programmcode nur rechts hinter dem Roboter */
.sr-linien{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 52%,rgba(0,0,0,.55) 68%,#000 88%);mask-image:linear-gradient(90deg,transparent 0,transparent 52%,rgba(0,0,0,.55) 68%,#000 88%)}
.sr-code{color:rgba(190,208,255,.13)}
.sr-text{z-index:1}
.sr-text h2 em{color:#B9CBFA}
.sr-text .marke-zeile{color:#C3D2F7}.sr-text .marke-zeile::before{background:#C3D2F7}
.sr-preiszeile{color:#DCE4FA}
.sr-preiszeile b{color:#fff}
.sr-text .lead{color:#D5DEF6}
.sr-hell{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.sr-text .knopf.licht{background:#fff;color:#16191C}
.sr-text .knopf.licht i{background:#2B4FB0}


/* Nr. 4: Kundenstimmen und Projekte als Karussell (alle Breiten, ersetzt das Sechser-Raster) */
.rk{position:relative;margin-top:8px}
.rk-steuer{display:flex;justify-content:flex-end;gap:10px;margin:0 0 14px}
@media (min-width:1024px){.rs .rk{margin-top:-84px}.rs .rk-steuer{margin:0 0 22px;min-height:48px}}
.rk-pfeil{width:48px;height:48px;border-radius:50%;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);font:500 1.6rem/1 var(--lauf);cursor:pointer;display:grid;place-items:center;padding:0 0 3px;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s}
.rk-pfeil:disabled{opacity:.35;cursor:default}
.rk-pfeil:focus-visible,.rk-spur:focus-visible,.rk-punkte button:focus-visible{outline:2px solid var(--akzent-text);outline-offset:3px}
.rk-spur{list-style:none;margin:0;padding:4px 2px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px) / 3);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;border-radius:18px}
.rk-spur::-webkit-scrollbar{display:none}
.rk-spur.zieht{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rk-spur.zieht a{pointer-events:none}
.rk-folie{scroll-snap-align:start;min-width:0}
.rk-folie img{-webkit-user-drag:none;user-select:none}
.rk-punkte{display:flex;justify-content:center;gap:2px;margin-top:4px}
.rk-punkte button{width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.rk-punkte button i{display:block;width:8px;height:8px;border-radius:4px;background:rgb(var(--tinte-rgb) / .28);transition:width .25s cubic-bezier(.2,.8,.2,1),background .25s}
.rk-punkte button[aria-current="true"] i{width:22px;background:var(--akzent-text)}
@media (prefers-reduced-motion:reduce){.rk-pfeil,.rk-punkte button i{transition:none}}
@media (max-width:1023px){.rk-spur{grid-auto-columns:calc((100% - 22px) / 2)}}

/* ---------- Tablet und Handy ---------- */
@media (max-width:1023px){
  h1,h2,h3,.s-titel,.band-titel,.pk h3,.kachel b,.knopf{text-wrap:balance}
  p,li,.lead,dd,blockquote,figcaption,small{text-wrap:pretty}
  /* lange Wörter (Rechtstexte, Tabellen) dürfen nicht aus ihrem Kasten laufen */
  main :is(td,th,dd),.kapitel :is(p,li){overflow-wrap:anywhere}
  /* Nr. 10: Teambilder dürfen nicht gestaucht werden */
  .tb-person{width:max-content}
  .tb-person img{max-width:none}
  /* Nr. 11: Preis im Paket-Schalter bricht nie um */
  .mv-schalter small,.pv-tabelle th small,.pk-preis b{white-space:nowrap}
}

/* ---------- Handy: die App ---------- */
@media (max-width:767px){
  :root{--app-leiste:78px;--app-unten:calc(var(--app-leiste) + env(safe-area-inset-bottom,0px));--app-kurve:cubic-bezier(.2,.8,.2,1)}
  body{padding-bottom:var(--app-unten)}
  html{scroll-padding-bottom:calc(var(--app-unten) + 12px)}

  /* Untere Leiste (Tab-Bar) als schwebende Glas-Pille wie in aktuellen iOS-Apps (Vorbilder: Trainline, Waymo, Ro auf Mobbin) */
  .app-leiste{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:65;
    height:62px;padding:5px;border-radius:999px;
    background:rgb(var(--flaeche-1-rgb) / .97);border:1px solid rgb(var(--tinte-rgb) / .10);
    box-shadow:0 18px 40px -16px rgb(var(--schatten-rgb) / .45),0 2px 6px rgb(var(--schatten-rgb) / .08)}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .app-leiste{background:rgb(var(--flaeche-1-rgb) / .78);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
  }
  .app-leiste a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;min-width:44px;
    font:600 .66rem/1.1 var(--lauf);letter-spacing:.01em;color:var(--tinte-2);text-decoration:none;border-radius:999px;
    -webkit-tap-highlight-color:transparent;transition:transform .2s var(--app-kurve),background .2s}
  .app-leiste svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .app-leiste a[aria-current="page"]{color:var(--akzent-tief);background:none}
  :root[data-theme="dunkel"] .app-leiste a[aria-current="page"]:not(.app-haupt){color:#9DB3F2}
  .app-leiste a[aria-current="page"]:not(.app-haupt)::after{content:"";position:absolute;top:3px;left:50%;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:currentColor}
  .app-leiste a{position:relative}
  .app-leiste a[aria-current="page"] svg{stroke-width:2.2}
  .app-leiste a[aria-current="page"] span{font-weight:750}
  /* GENIE 26.10.2026: Mitte wie bei Anima Kompass, ein erhöhter runder Knopf. Aus ihm wird beim Erklären Animas Gesicht. */
  .app-leiste a.app-haupt{justify-content:flex-end;padding-bottom:5px;background:none;box-shadow:none;color:var(--tinte-2)}
  .app-leiste a.app-haupt svg{position:absolute;left:50%;top:-24px;width:58px;height:58px;margin-left:-29px;padding:16px;border-radius:50%;box-sizing:border-box;
    background:linear-gradient(160deg,#3A63D0 0%,#2B4FB0 45%,#1E3A8A 100%);stroke:#fff;stroke-width:2.1;
    box-shadow:0 0 0 4px rgb(var(--flaeche-1-rgb)),0 0 0 9px rgb(43 79 176 / .18),0 14px 26px -10px rgb(30 58 138 / .75);transition:opacity .25s,transform .3s var(--app-kurve)}
  .app-leiste a.app-haupt span{color:inherit;font-weight:700}
  .app-leiste a.app-haupt[aria-current="page"] svg{box-shadow:0 0 0 4px rgb(var(--flaeche-1-rgb)),0 0 0 9px rgb(43 79 176 / .34),0 14px 26px -10px rgb(30 58 138 / .75)}
  .app-leiste a.app-haupt .genie-gesicht{position:absolute;left:50%;top:-24px;margin-left:-29px}
  .app-leiste a.app-haupt.genie-gesicht-an svg{opacity:0;transform:scale(.5)}
  .app-leiste a.app-haupt.genie-gesicht-an span{color:var(--akzent-tief)}
  :root[data-theme="dunkel"] .app-leiste a.app-haupt.genie-gesicht-an span{color:#9DB3F2}
  .app-leiste a:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}

  /* Anima sitzt am Handy oben in der Kopfzeile (kein schwebender Knopf über dem Inhalt) */
  .chat-knopf{display:none!important}
  .test-hinweis{bottom:calc(var(--app-unten) + 10px);left:12px;right:12px}
  .nk-rund{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgb(var(--tinte-rgb) / .12);background:var(--flaeche-1);color:var(--tinte);padding:0;cursor:pointer;text-decoration:none}
  .nk-ruf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
  .nk-anima{overflow:hidden;background:linear-gradient(160deg,#EEF2FD,#C9D3EC);border-color:rgba(43,79,176,.35)}
  .nk-anima img{width:30px;height:auto;margin-top:8px}
  .nk-ruf{margin-left:auto}
  .nk-zeile>.thema-knopf{display:none}
  .nk-burger{margin-left:0!important}
  :root[data-theme="dunkel"] .nk-rund:not(.nk-anima){background:#2A3138;border-color:#4A545D}

  /* Kopfzeile: kompakt, klebend, Glas */
  .nk{height:58px;background:rgb(var(--flaeche-1-rgb) / .9);border-bottom:1px solid rgb(var(--tinte-rgb) / .06);transition:height .25s var(--app-kurve),box-shadow .25s}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .nk{background:rgb(var(--flaeche-1-rgb) / .74);-webkit-backdrop-filter:saturate(1.7) blur(18px);backdrop-filter:saturate(1.7) blur(18px)}
  }
  .nk.gerollt{height:50px;box-shadow:0 8px 24px -18px rgb(var(--schatten-rgb) / .5)}
  .nk-zeile{width:calc(100% - 24px);gap:10px;position:relative}
  .nk-marke img{height:32px;transition:transform .25s var(--app-kurve);transform-origin:0 50%}
  .nk.gerollt .nk-marke img{transform:scale(.86)}
  .nk-burger{width:44px;height:44px}
  .nk-burger i{left:13px;right:13px}.nk-burger i:first-child{top:17px}.nk-burger i:last-child{top:25px}
  /* großer Titel wandert in die Kopfzeile */
  .nk-titel{display:block;position:absolute;left:4px;right:150px;top:50%;font:750 .95rem/1.2 var(--titel);letter-spacing:-.01em;color:var(--tinte);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;opacity:0;transform:translateY(-30%);transition:opacity .25s,transform .25s var(--app-kurve);pointer-events:none}
  .nk.titel-oben .nk-titel{opacity:1;transform:translateY(-50%)}
  .nk-marke{transition:opacity .25s,visibility .25s}
  .nk.titel-oben .nk-marke{opacity:0;visibility:hidden}

  /* Menü als Blatt von unten (Bottom-Sheet) */
  .nm{inset:auto 0 0 0;max-height:min(88vh,88svh);border-radius:28px 28px 0 0;padding:8px 18px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:0 0 0 100vmax rgb(0 0 0 / .45),0 -20px 60px -20px rgb(0 0 0 / .4);animation:app-blatt .32s var(--app-kurve)}
  .nm::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:rgb(var(--tinte-rgb) / .22);margin:2px auto 4px;flex:none}
  .nm-kopf{min-height:48px}
  .nm-kopf .nk-marke img{height:30px}
  .nm-haupt{margin-top:6px}
  .nm-haupt>a,.nm-klapp{font-size:1.25rem;padding:14px 4px;min-height:52px}
  .nm-leistungen.offen{grid-template-columns:1fr}
  .nm-gruppe a{padding:10px 0;min-height:44px}
  .nm-klein a{padding:12px 14px;min-height:44px;display:inline-flex;align-items:center}
  @keyframes app-blatt{from{transform:translateY(40px);opacity:0}}

  /* Typo wie in Apps: großer Titel, ruhiger Text */
  .s-titel,main h1:not(.h1-zeile){font-size:clamp(1.85rem,8.4vw,2.3rem)!important;line-height:1.05;letter-spacing:-.035em}
  main :is(h1,h2,h3),.s-titel{-webkit-hyphens:manual;hyphens:manual}
  main h2{letter-spacing:-.03em}
  .lead{font-size:1.04rem;line-height:1.55}
  .marke-zeile{font-size:.72rem}
  .brot{font-size:.8rem}
  .brot a,.brot span{color:var(--grau)}
  .kc-klein{color:var(--grau)!important}

  /* Knöpfe: groß, volle Breite, fühlbar */
  .knopf,.nk-cta,.nm-cta,.nm-ruf,.ek-knopf{min-height:50px}
  .held-reihe{display:grid!important;grid-template-columns:minmax(0,1fr);gap:10px;width:100%}
  .held-reihe>.knopf,.held-reihe>a{width:100%;justify-content:center;text-align:center}
  :is(.knopf,a.kachel,.ref-karte,.rs-karte,.frage button,.pk,.app-leiste a,.nm-cta,.nm-ruf,.chat-knopf,.mv-schalter button,.abspielen,.pv-knopf):active{transform:scale(.97)}
  :is(.knopf,a.kachel,.ref-karte,.rs-karte,.pk,.mv-schalter button,.abspielen,.pv-knopf){transition:transform .2s var(--app-kurve)}

  /* Karten: großzügige Rundung, weiche Schatten */
  .kachel,.ref-karte,.frage,.pk,.band-tafel,.kb-stimme,.rs-stimme,.ls-schluss-raster,.sr-tafel{border-radius:24px}
  .frage button{padding:18px 18px;min-height:56px;font-size:1rem}
  .frage i{width:30px;height:30px}

  /* Wisch-Leisten statt langer Stapel */
  .kacheln,.ref-raster,.pk-raster{display:flex!important;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:-16px;padding:4px 16px 14px;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kacheln::-webkit-scrollbar,.ref-raster::-webkit-scrollbar,.pk-raster::-webkit-scrollbar{display:none}
  .kacheln>*,.ref-raster>*{flex:0 0 82%;scroll-snap-align:start;min-width:0}
  .pk-raster>*{flex:0 0 86%;scroll-snap-align:center;min-width:0}
  /* Übersichten (Journal, Städte, KI-Blog) bleiben Listen zum Blättern, keine Wisch-Leiste */
  .kacheln:has(>:nth-child(5)){display:grid!important;grid-template-columns:minmax(0,1fr);overflow:visible;margin-inline:0;padding:0;gap:12px}
  .kacheln:has(>:nth-child(5))>*{flex:none}
  .wisch-hinweis{display:flex;justify-content:center;gap:6px;margin:2px 0 6px}
  .wisch-hinweis i{width:6px;height:6px;border-radius:3px;background:rgb(var(--tinte-rgb) / .2);transition:width .25s var(--app-kurve),background .25s}
  .wisch-hinweis i.an{width:18px;background:var(--akzent-text)}

  /* Platzhalterfläche, solange Fotos laden (nur Fotos, nie freigestellte Figuren) */
  .rs-bild img,.kachel img,.ref-karte img,.pr-browser img,.fs-bild img{background:var(--flaeche-2)}

  /* Formulare wie native Bildschirme */
  main input:not([type=checkbox]):not([type=radio]):not([type=range]),main select,main textarea,.chat-eingabe input{font-size:16px!important}
  main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),main select{min-height:50px;border-radius:14px}
  main textarea{border-radius:14px}
  main label{line-height:1.35}

  /* Tabellen werden zu Karten: Merkmal oben, Werte darunter mit Spaltennamen */
  main table.app-karten{display:block;width:100%!important;min-width:0!important;border:0;background:none}
  main table.app-karten thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  main table.app-karten tbody{display:grid;gap:10px}
  main table.app-karten tr{display:grid;gap:6px;padding:14px 16px;border-radius:18px;background:var(--flaeche-1);border:1px solid var(--rand-linie)}
  main table.app-karten tr>*{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px;align-items:baseline;padding:0!important;border:0!important;background:none!important;text-align:left!important;width:auto!important}
  main table.app-karten tr>th:first-child,main table.app-karten tr>td:only-child{display:block;font:700 1rem/1.3 var(--titel);color:var(--tinte);margin-bottom:2px}
  main table.app-karten tr>[data-spalte]::before{content:attr(data-spalte);font:600 .78rem/1.3 var(--lauf);color:var(--grau)}
  main table.app-karten tr>[data-spalte].mv-wir,main table.app-karten tr>[data-spalte].pv-mitte{color:var(--akzent-tief);font-weight:650}
  main table.app-karten tr.pv-gruppe{background:none;border:0;padding:12px 4px 0}
  main table.app-karten tr.pv-gruppe>*{display:block;font:700 .74rem/1 var(--lauf);letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
  main .app-karten-huelle{overflow:visible!important;max-width:100%!important;border:0!important;box-shadow:none!important;background:none!important;padding:0!important}

  /* Nr. 11: Paket-Schalter der Preisseite als Segment-Schalter */
  .mv-schalter{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;width:100%}
  .mv-schalter button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 4px;border-radius:12px;font-size:.88rem;line-height:1.15}
  .mv-schalter small{display:block;margin:0;font-size:.74rem}

  /* Nr. 10: Team auf „Über uns“ als ruhige Karten statt Scroll-Bühne */
  .tb{height:auto!important;padding-bottom:28px}
  .tb-kulisse{position:static;height:auto;overflow:visible;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;padding:0 16px;background:var(--flaeche-1)}
  .tb-wort,.tb-ring,.tb-balken{display:none}
  .tb-kopf{grid-column:1/-1;padding:calc(58px + 26px) 0 18px;width:auto}
  .tb-kopf h2{font-size:clamp(1.9rem,8.6vw,2.4rem)}
  .tb-leute,.tb-unten,.tb-texte{display:contents}
  .tb-person{position:relative!important;left:auto!important;bottom:auto!important;width:auto;height:auto!important;transform:none!important;opacity:1!important;filter:none!important;
    aspect-ratio:4/5;margin:0 0 14px;border-radius:22px 0 0 22px;overflow:hidden;background:radial-gradient(90% 80% at 50% 100%,#2F57C2 0%,#1E3A8A 55%,#0B1A44 100%);will-change:auto}
  .tb-person img{width:100%;height:100%;max-width:100%;object-fit:cover;object-position:50% 8%}
  .tb-info{position:relative!important;left:auto;bottom:auto;opacity:1!important;transform:none!important;margin:0 0 14px;border-radius:0 22px 22px 0;padding:14px 14px!important;
    background:var(--flaeche-2);-webkit-backdrop-filter:none;backdrop-filter:none;align-content:center;gap:4px}
  .tb-info b{font-size:clamp(1.05rem,5vw,1.3rem);overflow-wrap:anywhere}
  .tb-info small{font-size:.66rem;letter-spacing:.08em;color:var(--tinte-2)}
  .tb-info q{font-size:.92rem}
  .tb-info p{display:none}
  .tb-person:nth-child(1){grid-row:2}.tb-info:nth-child(1){grid-row:2;grid-column:2}
  .tb-person:nth-child(2){grid-row:3}.tb-info:nth-child(2){grid-row:3;grid-column:2}
  .tb-person:nth-child(3){grid-row:4}.tb-info:nth-child(3){grid-row:4;grid-column:2}

  /* Nr. 6: im blauen Kasten am Handy nur ein ruhiger Rest Code hinter dem Roboter */
  .sr-tafel{grid-template-columns:minmax(0,1fr)}
  .sr-linien{top:auto;height:300px;padding:18px;-webkit-mask-image:radial-gradient(120% 90% at 85% 100%,#000 20%,transparent 70%);mask-image:radial-gradient(120% 90% at 85% 100%,#000 20%,transparent 70%)}
  .sr-code{color:rgba(190,208,255,.09)}
  .sr-text{padding:28px 22px 6px}
  .sr-text h2{font-size:clamp(2rem,9vw,2.6rem)}
  .sr-robo{height:230px}
  .sr-blase{max-width:170px;font-size:.82rem}

  /* Footer kurz wie in einer App: Linklisten klappbar */
  .fuss-gitter>div[data-klapp]>.fuss-titel{display:flex;justify-content:space-between;align-items:center;min-height:48px;margin:0;cursor:pointer;border-bottom:1px solid var(--rand-linie)}
  .fuss-gitter>div[data-klapp]>.fuss-titel::after{content:"";width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
  .fuss-gitter>div[data-klapp].offen>.fuss-titel::after{transform:translateY(2px) rotate(-135deg)}
  .fuss-gitter>div[data-klapp]:not(.offen)>:not(.fuss-titel){display:none}
  .fuss-gitter>div[data-klapp].offen>a{display:flex;align-items:center;min-height:44px}
  .fuss-neu .fuss-gitter,.fuss-gitter{grid-template-columns:minmax(0,1fr)!important;gap:0}
  .fuss-ende a,.fuss-ende button{display:inline-flex;align-items:center;min-height:44px}

  /* Erklärer: Anima kleiner, die Sprechblase bekommt die Breite (vorher bei 320 px nur rund 170 px) */
  .erzaehler{grid-template-columns:68px minmax(0,1fr)!important;gap:8px!important}
  .erzaehler .robo{width:68px!important}
  .erzaehler .blase{padding:12px 14px}
  .erzaehler .blase p{font-size:.95rem;line-height:1.45}
  .sicht .spulen,.ek .spulen{flex:0 0 auto!important;margin-left:auto!important}

  /* Raster dürfen nie breiter werden als der Bildschirm (1fr wuchs mit dem breitesten Inhalt) */
  :is(.fn-raster,.zs-raster,.tm-raster,.em-bento,.em-studio,.k-raster,.s-held-raster,.fragen-raster,.kf-raster){grid-template-columns:minmax(0,1fr)!important}
  :is(.fn-raster,.zs-raster,.tm-raster,.em-bento,.em-studio,.k-raster,.kopfzeile,.kf-raster)>*{min-width:0;max-width:100%}

  .zs-kasten li{flex-wrap:wrap;row-gap:4px}
  .zs-kasten li>span{flex:1 1 60%;min-width:0}
  .zs-kasten li em{flex:0 0 auto;margin-left:auto}
  :is(.em-vorschau,.em-studio-links){grid-template-columns:minmax(0,1fr)!important}
  :is(.em-vorschau,.em-studio-links)>*{min-width:0;max-width:100%}
  .em-reiter{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .em-reiter::-webkit-scrollbar{display:none}
  .em-reiter>*{flex:none}

  /* Scroll-Bühnen am Handy kürzer: weniger leere Fläche, gleiche Geschichte */
  .bn{height:calc(var(--hoehe,300vh) * .72)!important}

  /* Nr. 4: Kundenstimmen-Karussell am Handy: eine Karte, die nächste schaut hervor */
  .rk-spur{grid-auto-columns:84%;gap:12px;margin-inline:-16px;padding:4px 16px 16px;scroll-padding-inline:16px;border-radius:0}
  .rk-steuer{display:none}
  .rs-kopf{display:block!important}
  .rs-kopf>h2{margin-bottom:16px}
  .rs-kopf>.knopf{margin-top:6px}
  .rs-stimmen{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:2px 16px 10px;scroll-padding-inline:16px;scrollbar-width:none}
  .rs-stimmen::-webkit-scrollbar{display:none}
  .rs-stimme{flex:0 0 84%;scroll-snap-align:start}
}
@media (max-width:360px){
  .fm-titel{font-size:clamp(1.9rem,10vw,2.4rem)!important}
  main h2:not(.marke-zeile){font-size:min(1.7rem,8.2vw)!important}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .app-leiste a,.nk,.nk-titel,.nk-marke img,.wisch-hinweis i{transition:none}
  .nm{animation:none}
  :is(.knopf,a.kachel,.ref-karte,.rs-karte,.frage button,.pk,.app-leiste a,.nm-cta,.nm-ruf,.chat-knopf,.mv-schalter button,.abspielen,.pv-knopf):active{transform:none}
}
/* ===================== /APP-HANDY ===================== */
/* GS-KARTEN (26.10.2026): Google-Bewertungen als Wischleiste statt Fließtext */
.gs-leiste{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.gs-leiste:focus-visible{outline:2px solid var(--akzent-text);outline-offset:4px;border-radius:12px}
.gs-karte{flex:0 0 min(85%,380px);scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:22px}
.gs-sterne{color:#B7791F;letter-spacing:2px;font-size:15px}
.gs-karte blockquote{margin:0;flex:1}
.gs-karte blockquote p{margin:0;font-size:15.5px;line-height:1.6}
.gs-karte figcaption{font-weight:700;font-size:15px;display:flex;flex-direction:column;gap:2px}
.gs-karte figcaption span{font-weight:400;font-size:13px;color:var(--grau)}
@media (prefers-reduced-motion:no-preference){.gs-leiste{scroll-behavior:smooth}}
/* /GS-KARTEN */
/* REF-NEU */
/* Suchleiste mit Filter-Chips: Referenzen und Journal (26.10.2026) */
.such{margin:0 0 30px}
.such-leiste{display:flex;align-items:center;gap:12px;padding:8px;background:var(--flaeche-1);border:1px solid var(--rand-linie);border-radius:22px;box-shadow:0 10px 30px rgb(var(--schatten-rgb) / .06)}
.such-feld{position:relative;flex:0 0 min(340px,42%);display:flex;align-items:center;min-width:0}
.such-feld svg{position:absolute;left:14px;color:var(--grau);pointer-events:none}
.such-feld input{width:100%;min-height:48px;padding:0 14px 0 44px;font:500 1rem var(--lauf);color:var(--tinte);background:var(--grund);border:1px solid var(--rand-feld);border-radius:15px;-webkit-appearance:none;appearance:none}
.such-feld input::placeholder{color:var(--grau);opacity:1}
.such-feld input:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
.such-unsichtbar{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.such-chips{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.such-chips::-webkit-scrollbar{display:none}
.such-chip{flex:0 0 auto;scroll-snap-align:start;min-height:44px;font:600 .86rem var(--lauf);color:var(--tinte);background:transparent;border:1px solid var(--rand-linie);border-radius:99px;padding:0 16px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.such-chip[aria-pressed="true"]{background:var(--graphit);border-color:var(--graphit);color:#fff}
.such-chip:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
@media (min-width:1024px){.such-chip:hover:not([aria-pressed="true"]){border-color:var(--tinte)}}
.such-zahl{margin:12px 4px 0;font-size:.9rem;color:var(--grau)}
.such-leer{display:grid;justify-items:start;gap:6px;margin-top:18px;padding:24px;border:1px dashed var(--rand-feld);border-radius:20px;background:var(--flaeche-1)}
.such-leer[hidden]{display:none}
.such-leer b{font:700 1.15rem var(--titel);color:var(--tinte)}
.such-leer span{color:var(--grau)}
.such-leer .knopf{margin-top:8px}
:root[data-theme="dunkel"] .such-chip[aria-pressed="true"]{background:var(--tinte);border-color:var(--tinte);color:var(--grund)}
.journal-suche{padding-top:clamp(40px,6vw,64px)}
.journal-suche .kopfzeile{margin-bottom:18px}
@media (max-width:767px){
  .such-leiste{flex-direction:column;align-items:stretch;gap:8px;padding:8px;border-radius:20px}
  .such-feld{flex:none}
  .such-chips{margin:0 -8px;padding:2px 8px 4px}
}
@media (prefers-reduced-motion:reduce){.such-chip{transition:none}}
.s-held .such{margin:24px 0 0;max-width:620px}
.s-held .such-leiste{flex-direction:column;align-items:stretch;gap:8px}
.s-held .such-feld{flex:none}
.s-held .such-chips{margin:0 -8px;padding:2px 8px 4px}
.s-held .such-leer{margin-top:12px}
/* Startseite und Termin: Knopf „Alle Referenzen ansehen“ unter den Projektkarten (26.10.2026) */
.rs-alle{display:flex;justify-content:center;margin-top:22px}
.tm-projekte{padding-top:clamp(24px,4vw,48px)}
.tm-projekte .rk{margin-top:0}
@media (min-width:1024px){.tm-projekte .rk-steuer{margin-top:-70px}}
/* /REF-NEU */

/* SEITEN-NEU */
/* 1 · Kopfleiste am Handy (Ervin 26.10.2026: „passt nicht zum Design"): dieselbe schwebende Glas-Pille wie die untere Leiste,
   Knöpfe ohne harte Ränder, Seitentitel sauber gekürzt (erster Satz, weich ausgeblendet statt „…"). */
@media (max-width:767px){
  html body .nk,html body .nk.gerollt{height:calc(64px + env(safe-area-inset-top,0px));padding-top:calc(8px + env(safe-area-inset-top,0px));align-items:flex-start;
    background:transparent!important;border-bottom:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html body .nk .nk-zeile{width:calc(100% - 20px);height:54px;margin:0 auto;padding:0 5px 0 14px;gap:6px;border-radius:999px;
    background:rgb(var(--flaeche-1-rgb) / .97);border:1px solid rgb(var(--tinte-rgb) / .10);
    box-shadow:0 14px 34px -18px rgb(var(--schatten-rgb) / .5),0 2px 6px rgb(var(--schatten-rgb) / .06)}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    html body .nk .nk-zeile{background:rgb(var(--flaeche-1-rgb) / .8);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
  }
  html body .nk .nk-marke img{height:28px;transform:none!important}
  html body .nk .nk-rund,html body .nk .nk-burger{width:42px;height:42px;border:0;background:rgb(var(--tinte-rgb) / .06);box-shadow:none}
  html body .nk .nk-anima{background:linear-gradient(160deg,#EEF2FD,#C9D3EC);box-shadow:inset 0 0 0 1px rgba(43,79,176,.28)}
  html body .nk .nk-anima img{width:28px;margin-top:9px}
  html body .nk .nk-burger i{left:12px;right:12px}html body .nk .nk-burger i:first-child{top:16px}html body .nk .nk-burger i:last-child{top:24px}
  :root[data-theme="dunkel"] body .nk .nk-rund:not(.nk-anima),:root[data-theme="dunkel"] body .nk .nk-burger{background:rgb(255 255 255 / .08);border:0}
  html body .nk .nk-titel{left:16px;right:146px;font:750 .92rem/1.2 var(--titel);text-overflow:clip;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  html body .nk .nk-titel.passt{-webkit-mask-image:none;mask-image:none}
  html body .nk .lesefortschritt{left:36px;right:36px;bottom:3px;height:2px;border-radius:2px}
}
/* 3 · Seite teilen: alle Knöpfe in EINER Zeile, seitlich wischbar (Ervin 26.10.2026). Weiche Kante zeigt, dass es weitergeht. */
html body .teilen-leiste{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-width:0}
html body .teilen-leiste>span{flex:none;margin-right:0;white-space:nowrap}
.teilen-spur{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:3px 2px;margin:-3px 0;scroll-padding-inline:2px}
.teilen-spur::-webkit-scrollbar{display:none}
.teilen-spur>a,.teilen-spur>button{flex:none;white-space:nowrap;scroll-snap-align:start}
.teilen-spur>button[hidden]{display:none}
.teilen-spur.rechts-mehr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.teilen-spur.links-mehr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.teilen-spur.links-mehr.rechts-mehr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 44px),transparent)}
@media (max-width:767px){html body .teilen-leiste{gap:8px;margin-inline:-4px}html body .teilen-leiste>span{font-size:.8rem}}
/* 2 · Filme, auch am Rechner: der zweite Titelteil als gefüllte Schrift statt Umriss, sonst geht er auf dem Film unter */
html body .fm-reise .fm-titel em{color:#AFC3F7;-webkit-text-stroke:0}
/* 2 · Filme am Handy (Ervin 26.10.2026): Titel liest sich klar auf dem Film, alles sitzt über der unteren Leiste,
   die Stil-Anzeige („04 / 11 Comic") ist eine ruhige Glas-Karte statt zwei lose Teile. */
@media (max-width:767px){
  html body .fm-reise .fm-reise-kulisse{padding:calc(64px + 24px) 0 calc(var(--app-unten,86px) + 22px)}
  html body .fm-reise .fm-schleier{background:linear-gradient(180deg,rgba(11,13,16,.5) 0%,rgba(11,13,16,.05) 22%,rgba(11,13,16,.2) 40%,rgba(11,13,16,.82) 62%,rgba(11,13,16,.95) 100%)}
  html body .fm-reise .h1-zeile{font-size:.66rem;letter-spacing:.08em;line-height:1.35;padding:6px 12px;border-radius:12px}
  html body .fm-reise .fm-titel{font-size:clamp(2.2rem,11vw,2.9rem)!important;line-height:.98;margin:12px 0 14px;text-shadow:0 2px 30px rgba(0,0,0,.6)}
  html body .fm-reise .fm-titel em{display:block;color:#AFC3F7;-webkit-text-stroke:0}
  html body .fm-reise .fm-lead{font-size:1rem;line-height:1.5;color:#E7ECF5;max-width:34ch}
  html body .fm-reise .held-reihe{margin-top:18px;gap:8px}
  html body .fm-reise-anzeige{bottom:calc(var(--app-unten,86px) + 16px);left:12px;right:12px;padding:12px 16px 14px;gap:8px 12px;border-radius:20px;
    background:rgba(11,13,16,.62);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 18px 40px -20px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
  html body .fm-reise-nr{font-size:1.7rem;text-shadow:none}
  html body .fm-reise-nr span{font-size:.45em}
  html body .fm-reise-stile{padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;justify-self:end}
  html body .fm-reise-stile li.an{font-size:.86rem;letter-spacing:.1em;color:#fff}
  html body .fm-reise-stile li.an::before{width:16px;margin-right:8px}
  html body .fm-reise-leiste{height:3px}
}
/* 7 · Über uns, eigene Plattformen am Handy (Ervin 26.10.2026): kein Fächer mehr, der seitlich abgeschnitten wird.
   Der Laptop klappt auf, zeigt die fünf Plattformen nacheinander, und jede wandert danach ins Regal darunter. Am Ende stehen alle fünf. */
.lt-schirme,.lt-folge{display:none}
@media (max-width:767px){
  html body .lt-sek{height:560svh}
  html body .lt-texte{top:calc(64px + 3svh)}
  html body .lt-t,html body .lt-t.an{opacity:0;transform:translateY(14px)}
  html body .lt-sek[data-ltk="0"] .lt-t[data-lt="0"],html body .lt-sek[data-ltk="1"] .lt-t[data-lt="1"],html body .lt-sek[data-ltk="2"] .lt-t[data-lt="2"]{opacity:1;transform:none}
  html body .lt-t h2{font-size:clamp(1.85rem,8.6vw,2.3rem);margin-bottom:8px}
  html body .lt-t p{font-size:.95rem;line-height:1.45;max-width:32ch}
  html body .lt-raum{top:calc(64px + 3svh + 160px);bottom:auto;perspective:1400px}
  html body .lt{--w:min(84vw,460px);transform:none!important}
  html body .lt-fan{display:none}
  html body .lt-deckel{transform:rotateX(calc((1 - var(--mopen,0)) * 86deg))}
  html body .lt-deckel>.lt-glas>img{filter:brightness(calc(.15 + var(--mopen,0) * .85))}
  .lt-schirme{display:block;position:absolute;inset:2.1% 2.1% 3%;border-radius:8px;overflow:hidden;filter:brightness(calc(.15 + var(--mopen,0) * .85))}
  html body .lt-schirme img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:0;filter:none;opacity:0;transform:scale(1.04);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
  html body .lt-schirme img.an{opacity:1;transform:none}
  .lt-folge{display:grid;gap:18px;position:absolute;z-index:6;left:16px;right:16px;top:calc(64px + 3svh + 160px + min(84vw,460px) * .644 + 40px);opacity:var(--mopen,0)}
  .lt-namen{position:relative;height:46px;text-align:center}
  .lt-namen p{position:absolute;inset:0;margin:0;display:grid;justify-items:center;gap:3px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
  .lt-namen p.an{opacity:1;transform:none}
  .lt-namen b{font:800 1.12rem/1.1 var(--titel);letter-spacing:-.02em;color:#fff;display:flex;align-items:baseline;gap:10px}
  .lt-namen b span{font:700 .68rem var(--lauf);letter-spacing:.14em;color:#9DB4F0}
  .lt-namen small{font-size:.86rem;color:#AEB8CC}
  .lt-regal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .lt-regal li{margin:0;display:grid;gap:6px;justify-items:center;opacity:.28;transform:translateY(6px) scale(.94);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1)}
  .lt-regal li::before{display:none}
  .lt-regal li.da{opacity:1;transform:none}
  .lt-regal i{display:block;width:100%;aspect-ratio:16/10.3;border-radius:7px;overflow:hidden;background:#0B0C0E;outline:1px solid #3A3F45;box-shadow:0 10px 22px -12px rgba(0,0,0,.8)}
  .lt-regal li.jetzt i{outline:2px solid #7F9BE6}
  .lt-regal img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
  .lt-regal span{font:600 .64rem/1.1 var(--lauf);letter-spacing:.02em;color:#C9D3EA;white-space:nowrap}
}
@media (max-width:767px) and (max-height:700px){
  html body .lt-raum{top:calc(64px + 3svh + 132px)}
  html body .lt{--w:min(70vw,420px)}
  .lt-folge{top:calc(64px + 3svh + 132px + min(70vw,420px) * .644 + 26px);gap:10px}
}
/* 7b · Team auf „Über uns" am Handy wieder als Bühne wie am Rechner (Ervin 26.10.2026), nur kleiner gesetzt.
   Fotos behalten ihr Seitenverhältnis: feste Höhe, Breite automatisch, nie gestaucht. Bewegung kommt aus app.js (--tb-t, --tb-o, --tb-f). */
@media (max-width:767px){
  html body .tb{height:300svh!important;padding-bottom:0}
  html body .tb .tb-kulisse{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:block;padding:0;
    background:radial-gradient(90% 60% at 50% 74%,#E8EEFB 0%,#F5F5F7 55%,#fff 100%);background:radial-gradient(90% 60% at 50% 74%,light-dark(#E8EEFB,#0E1012) 0%,light-dark(#F5F5F7,#0E1012) 55%,light-dark(#fff,#1A1E22) 100%)}
  html body .tb .tb-wort{display:grid;top:34%}
  html body .tb .tb-wort span{font-size:clamp(4.6rem,24vw,7rem)}
  html body .tb .tb-ring{display:block;width:min(96vw,520px);bottom:calc(var(--app-unten,86px) + 160px);transform:translate(-50%,22%)}
  html body .tb .tb-kopf{padding:calc(64px + 22px) 16px 0;width:auto;position:relative;z-index:20}
  html body .tb .tb-kopf h2{font-size:clamp(1.85rem,8.6vw,2.3rem)}
  html body .tb .tb-leute{display:block;position:absolute;inset:0}
  html body .tb .tb-person{position:absolute!important;left:50%!important;bottom:calc(var(--app-unten,86px) + 112px)!important;height:min(46svh,420px)!important;width:max-content;
    aspect-ratio:auto;margin:0;border-radius:0;overflow:visible;background:none;transform:var(--tb-t,translate(-50%,0))!important;opacity:var(--tb-o,1)!important;filter:var(--tb-f,none)!important;will-change:transform,opacity}
  html body .tb .tb-person img{width:auto;height:100%;max-width:none;object-fit:fill;display:block}
  html body .tb .tb-unten{display:flex;flex-direction:column;align-items:stretch;gap:10px;position:absolute;left:16px;right:16px;bottom:calc(var(--app-unten,86px) + 14px);padding:0;z-index:30;width:auto}
  html body .tb .tb-texte{display:grid;width:100%;min-height:0}
  html body .tb .tb-info{grid-area:1/1;position:relative!important;margin:0;border-radius:22px;padding:15px 18px!important;gap:5px;align-content:start;
    background:rgb(var(--flaeche-1-rgb) / .9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 40px -22px rgb(var(--schatten-rgb) / .55);
    opacity:0!important;transform:translateY(14px)!important;transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
  html body .tb .tb-info.an{opacity:1!important;transform:none!important}
  html body .tb .tb-info b{font-size:1.5rem}
  html body .tb .tb-info small{font-size:.68rem;letter-spacing:.1em;color:var(--stahl)}
  html body .tb .tb-info q{font-size:.98rem}
  html body .tb .tb-info p{display:block;font-size:.86rem;line-height:1.5}
  html body .tb .tb-balken{display:block;order:-1;width:100%;margin:0}
}
@media (max-width:767px) and (max-height:700px){html body .tb .tb-info p{display:none}html body .tb .tb-person{height:min(40svh,420px)!important;bottom:calc(var(--app-unten,86px) + 84px)!important}}
@media (max-width:767px) and (prefers-reduced-motion:reduce){html body .tb{height:auto!important}html body .tb .tb-kulisse{position:relative}}
/* 5 · Saisonale Anlässe mit Bild (Ervin 26.10.2026): Anima zeigt jeden Anlass, Higgsfield, bilder/anlaesse/ */
.em-jahr .em-j-mail{aspect-ratio:auto;padding-bottom:16px}
.em-jahr .em-j-mail i.em-j-bild{display:block;height:auto;aspect-ratio:4/3;background:#ECEEF1;border-bottom:4px solid var(--em-f);overflow:hidden}
.em-jahr .em-j-bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.em-jahr li:hover .em-j-bild img{transform:scale(1.04)}}
.em-jahr{grid-auto-columns:204px}
.em-jahr li{grid-template-rows:auto 1fr auto}
.em-jahr .em-j-mail b{font-size:.98rem}
.em-jahr .em-j-mail{height:100%;box-sizing:border-box}
.em-jahr .em-j-mail b{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal}
@media (max-width:767px){
  html body .em-jahr{grid-auto-columns:min(66vw,270px);gap:12px;padding:6px 16px 20px;scroll-padding-inline:16px;scrollbar-width:none}
  html body .em-jahr::-webkit-scrollbar{display:none}
  html body .em-jahr .em-j-mail b{font-size:1.1rem}
  html body .em-jahr p{font-size:1.02rem}
}
/* 4 · E-Mail-Marketing nur am Handy (Ervin 26.10.2026: „Da darfst du alles verändern. Aber nur für die Mobilansicht.") */
@media (max-width:767px){
  /* Kopf-Geschichte: Handy oben ganz sichtbar, Text darunter, beides über der unteren Leiste */
  html body .em-story{height:600svh}
  html body .em-story-kulisse{align-items:stretch;padding:calc(64px + 10px) 0 calc(var(--app-unten,86px) + 10px)}
  html body .em-story-raster{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:100%;width:100%;max-width:none;margin:0;padding:0 18px;box-sizing:border-box}
  html body .em-story-buehne{order:1;flex:none}
  html body .em-story-handy{width:max(150px,min(230px,calc((100svh - 64px - var(--app-unten,86px) - 250px) * .462)));padding:7px;border-radius:34px}
  html body .em-story-handy .em-schirm{border-radius:28px}
  html body .em-story-handy .em-insel{top:12px;height:16px}
  html body .em-story-links{order:2;width:100%;display:grid;gap:8px}
  html body .em-story-links .h1-zeile,html body .em-story-links .em-berat-kopf{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}
  html body .em-st-texte{margin:0;min-height:148px}
  html body .em-st-text .em-nr{font:700 .72rem var(--lauf);letter-spacing:.14em}
  html body .em-st-text h2{font-size:1.32rem;line-height:1.15;margin:6px 0 6px}
  html body .em-st-text p{font-size:.94rem;line-height:1.5}
  html body .em-st-fortschritt{width:100%}
}
@media (max-width:767px){
  /* Anfragen-Übersicht: Spalten untereinander statt seitlich abgeschnitten */
  html body .em-crm-brett{grid-template-columns:minmax(0,1fr);overflow:visible;padding:16px;gap:18px}
  html body .em-spalte{gap:8px}
  html body .em-spalte h3{margin:0}
  html body .em-crm-fenster .em-titelleiste span{transform:none}
  html body .em-liste li{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 10px;padding:9px 14px;font-size:.84rem}
  html body .em-liste li>*:first-child{grid-column:1;grid-row:1;overflow:hidden;text-overflow:ellipsis}
  html body .em-liste li>*:last-child{grid-column:2;grid-row:1}
  html body .em-liste li>span{grid-column:1/-1;grid-row:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 6 · Baukasten: Annas Gespräch mit Anima, nichts überlagert, nichts abgeschnitten */
  html body .em-anima{padding:16px;gap:12px}
  html body .em-anima-sagt{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:end}
  html body .em-anima-sagt img{width:44px;position:static}
  html body .em-anima-sagt span{display:block;min-width:0;padding:12px 14px;border-radius:18px 18px 18px 4px;font-size:.95rem;overflow-wrap:break-word}
  html body .em-anima-form textarea{min-height:132px;font-size:16px;line-height:1.45}
  html body .em-anima-form .knopf{justify-self:stretch;justify-content:center}
}
@media (max-width:767px) and (max-height:700px){html body .em-st-text p{font-size:.88rem}html body .em-st-texte{min-height:128px}}
@media (max-width:360px){html body .em-st-texte{min-height:172px}html body .em-st-text h2{font-size:1.18rem}html body .em-st-text p{font-size:.88rem}}
/* /SEITEN-NEU */
/* GENIE (Ervin 26.10.2026): „Erklär es mir“ als Flaschengeist, Sprechblase neben dem Kopf, Check-Bereich aufgeräumt.
   Nur transform und opacity werden animiert, reduzierte Bewegung = einfache Überblendung. */

/* 1. Sprechblase „Ich schaue mir deine Seite gern an.“: über dem Kopf, nie über dem Gesicht */
.sr-robo{flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;height:auto;min-height:0}
.sr-robo img{height:300px;width:auto}
.sr-blase{position:relative;top:auto;left:auto;order:-1;align-self:center;margin:0 0 0 18%;max-width:220px;border-radius:18px;box-shadow:0 14px 30px -18px rgb(0 0 0 / .45)}
.sr-blase::after{content:"";position:absolute;left:30%;bottom:-9px;width:18px;height:18px;background:inherit;transform:rotate(45deg);border-radius:0 0 5px 0}
@media (max-width:860px){.sr-robo img{height:220px}.sr-blase{margin-left:22%}}
@media (max-width:767px){.sr-robo{height:auto}.sr-robo img{height:190px}.sr-blase{max-width:200px;margin:0 0 0 24%}}

/* 2. Check-Bereich: „https://“ steht in einer Zeile mit dem Eingabefeld */
.kc-url{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:2px}
.kc-url>span{grid-column:1/-1}
.kc-url b{position:static;white-space:nowrap;line-height:1.2}
.kc-url input{padding-left:0;min-height:40px!important;line-height:1.2}
/* Handy: das leere Vorschaufenster schwebte vor der Prüfung ohne Inhalt. Es erscheint, sobald geprüft wird. */
@media (max-width:900px){
  [data-kicheck]:is(:not([data-zustand]),[data-zustand="start"]) .kc-schirm{display:none}
}

/* 3. Startseite: die Knöpfe im ersten Bild entfallen (die Leiste und der Kopf führen zu Check und Termin) */
.mbh-a .held-reihe{display:none!important}

/* 4. Play statt „Erklär es mir“-Link */
.blase .abspielen{padding:5px 20px 5px 5px;min-height:46px;font-size:.95rem}
.blase .abspielen i{width:36px;height:36px}
.blase .abspielen i::before{left:14px;top:11px;border-left-width:11px;border-top-width:7px;border-bottom-width:7px}
.blase .abspielen.laeuft i::before{left:12px;top:11px;height:14px}

/* Großer Play-Knopf auf der ruhenden Bühne */
.genie-poster{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;padding:0 18px 18px 0;margin:0;padding:0;border:0;border-radius:inherit;cursor:pointer;
  background:none;color:#fff;font:650 .95rem var(--titel);-webkit-tap-highlight-color:transparent}
.genie-poster-knopf{position:relative;order:2;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 0 0 8px rgb(255 255 255 / .22),0 18px 40px -12px rgb(0 0 0 / .55);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.genie-poster-knopf i{width:0;height:0;margin-left:5px;border-left:19px solid #1E3A8A;border-top:12px solid transparent;border-bottom:12px solid transparent}
.genie-poster-text{align-self:center;padding:7px 14px;border-radius:999px;background:rgb(14 16 18 / .62);color:#fff}
@media (hover:hover){.genie-poster:hover .genie-poster-knopf{transform:scale(1.06)}}
.ek.spricht .genie-poster,.sicht.spricht .genie-poster,.genie-an .genie-poster{opacity:0;pointer-events:none}
.genie-poster{transition:opacity .3s}
/* Handy: die Startseiten-Bühne wartet, bis Play gedrückt wird (vorher stand ein halb leeres Fenster in der Seite) */
@media (max-width:767px){
  .sicht .sicht-buehne:not(.genie-buehne){display:none}
  .sicht .sicht-kulisse{height:auto;min-height:0;padding-bottom:28px}
  .sicht .sicht-schritte.punkte{margin-top:16px}
}

/* 5. Der Auftritt: Hintergrund, Bühne, Untertitel, Steuerung */
html.genie-modus{overflow:hidden}
.genie-grund{position:fixed;inset:0;z-index:91;background:radial-gradient(120% 80% at 50% 0%,rgb(43 79 176 / .10),transparent 60%),var(--grund)}
.genie{position:fixed;inset:0;z-index:94;pointer-events:none;color:var(--tinte)}
.genie>*{pointer-events:auto}
.genie-hebt{z-index:92!important}
.genie-an,.genie-an *{visibility:hidden}
.genie-an .genie-buehne,.genie-an .genie-buehne *{visibility:visible}
.genie-an .genie-buehne .genie-poster{visibility:hidden}
.genie-buehne{display:block!important;z-index:92;border-radius:22px;transform-origin:50% 50%;will-change:transform;transition:transform 7s cubic-bezier(.33,.08,.25,1)}
.genie-buehne.ek-buehne{box-shadow:0 40px 90px -40px rgb(var(--schatten-rgb) / .55)}
.genie-modus .app-leiste{z-index:96}
.genie-modus :is(.chat-knopf,.lichtwahl,.zurueck-knopf,.test-hinweis){opacity:0;pointer-events:none}
.genie-weg .robo{opacity:0}
.genie-flieger{position:fixed;z-index:97;pointer-events:none;object-fit:contain;transform-origin:50% 50%;will-change:transform,opacity;filter:drop-shadow(0 18px 24px rgb(0 0 0 / .25))}

.genie-oben{position:absolute;left:40px;right:40px;top:calc(18px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:18px}
.genie-titel{margin:0;display:flex;align-items:center;gap:10px;font:650 .82rem var(--lauf);letter-spacing:.06em;text-transform:uppercase;color:var(--grau);white-space:nowrap}
.genie-live{width:9px;height:9px;border-radius:50%;background:var(--akzent-flaeche);box-shadow:0 0 0 4px rgb(43 79 176 / .18)}
.genie-fort{flex:1;display:flex;gap:4px;margin:0;padding:0;list-style:none;min-width:0}
.genie-fort li{flex:1;height:4px;border-radius:2px;background:rgb(var(--tinte-rgb) / .14);overflow:hidden}
.genie-fort li i{display:block;height:100%;background:var(--akzent-flaeche);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.genie-fort li.fertig i,.genie-fort li.jetzt i{transform:scaleX(1)}
.genie-fort li.jetzt i{opacity:.7}
.genie-unten{position:absolute;left:24px;right:24px;bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:14px}
.genie-text{margin:0;max-width:820px;min-height:3.1em;padding:12px 20px;border-radius:18px;background:rgb(var(--flaeche-1-rgb) / .92);border:1px solid var(--rand-linie);box-shadow:0 18px 40px -26px rgb(var(--schatten-rgb) / .45);
  font:500 clamp(1rem,1.5vw,1.2rem)/1.45 var(--lauf);color:var(--tinte);text-align:center;text-wrap:balance}
.genie-text b{color:var(--akzent-text);font-weight:700}
.genie-steuer{display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;background:rgb(var(--flaeche-1-rgb) / .94);border:1px solid var(--rand-linie);box-shadow:0 20px 44px -22px rgb(var(--schatten-rgb) / .5)}
.genie-knopf{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--rand-linie);background:var(--flaeche-1);color:var(--tinte);cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s}
.genie-knopf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.genie-knopf svg .voll{fill:currentColor;stroke-width:1.5}
.genie-knopf:disabled{opacity:.35;cursor:default}
.genie-knopf:focus-visible{outline:2px solid var(--akzent-text);outline-offset:3px}
.genie-knopf:active:not(:disabled){transform:scale(.94)}
.genie-haupt{width:54px;height:54px;background:var(--akzent-flaeche);border-color:transparent;color:var(--auf-akzent)}
.genie-zu{flex:none;margin-left:auto}
.genie-platz{display:grid;place-items:center;width:58px;height:58px;margin-right:4px}

/* Das Gesicht: Kopf der Figur im Kreis, Mund geht mit der Stimme auf */
.genie-gesicht{position:relative;display:block;width:58px;height:58px;flex:none}
.genie-kopf{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#1B2330;box-shadow:0 0 0 3px rgb(var(--flaeche-1-rgb)),0 0 0 7px rgb(43 79 176 / .28),0 12px 26px -10px rgb(30 58 138 / .75)}
.genie-kopf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transform-origin:46% 52%}
.genie-mund{position:absolute;left:41.9%;top:62.6%;width:25%;height:14%;transform:translate(-50%,-50%);display:block}
.genie-mund::before{content:"";position:absolute;inset:-40% -24%;border-radius:50%;background:radial-gradient(closest-side,#20252b 64%,transparent 100%);opacity:calc(min(1, var(--auf,0) * 8))}
.genie-mund b{position:absolute;left:6%;right:6%;top:50%;height:calc(14% + var(--auf,0) * 120%);min-height:2px;transform:translateY(-50%);border-radius:40% 40% 50% 50% / 30% 30% 70% 70%;background:#eef8ff;box-shadow:0 0 4px rgb(170 215 255 / .95),0 0 10px rgb(120 185 255 / .6);opacity:calc(min(1, var(--auf,0) * 8))}
.genie-ring{position:absolute;inset:-9px;border-radius:50%;border:2px solid rgb(43 79 176 / .55);opacity:0}
.genie-gesicht.spricht .genie-ring{animation:genie-puls 1.1s ease-in-out infinite}
@keyframes genie-puls{0%{transform:scale(.92);opacity:.0}40%{opacity:.9}100%{transform:scale(1.18);opacity:0}}

/* Kamerafahrt auf den Karten der Unterseiten */
.genie-an .ek-karte.an{animation:genie-fahrt-a 11s cubic-bezier(.3,.1,.3,1) both}
.genie-an .ek-karte{transition:opacity .22s}
.genie-an .ek-karte.an{transition:opacity .45s .18s}  /* erst geht die alte Karte, dann kommt die neue: kein Doppelbild */
.genie-poster-text{display:none}
.genie-an .ek-karte.an:nth-child(even){animation-name:genie-fahrt-b}
@keyframes genie-fahrt-a{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.6%,-1%)}}
@keyframes genie-fahrt-b{from{transform:scale(1.07) translate(1.4%,1%)}to{transform:scale(1)}}

/* Handy: Steuerung über der Leiste, das Gesicht sitzt in der Leiste */
@media (max-width:767px){
  .genie-oben{left:12px;right:12px;top:calc(12px + env(safe-area-inset-top,0px));gap:10px}
  .genie-titel{font-size:.7rem;letter-spacing:.04em}
  .genie-titel [data-genie-titel]{max-width:44vw;overflow:hidden;text-overflow:ellipsis}
  .genie-unten{left:12px;right:12px;bottom:calc(var(--app-unten,78px) + 26px);gap:10px}
  .genie-text{font-size:.98rem;padding:10px 14px;min-height:4.6em}
  .genie-platz{display:none}
  .genie-steuer{gap:12px;padding:6px 10px}
  .genie-buehne{border-radius:18px;overflow:clip}
}

/* reduzierte Bewegung: keine Fahrten, kein Pulsieren */
@media (prefers-reduced-motion:reduce){
  .genie-buehne{transition:none}
  .genie-an .ek-karte.an{animation:none}
  .genie-gesicht.spricht .genie-ring{animation:none;opacity:.6}
  .genie-poster-knopf,.genie-knopf,.genie-fort li i{transition:none}
}

/* 6. Sprechblase mit Live-Untertitel (Ervin 26.10.2026): nur die Wörter, die Anima gerade sagt.
   Der große Textkasten weicht einer kleinen Blase neben dem Kopf, die Steuerung steht frei darunter.
   Der ganze Satz bleibt für Vorleser im versteckten Absatz (.ut-sr). */
.ut-sr{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0!important}
.ut-an .erzaehler{align-items:center}
.ut-an .erzaehler .blase{align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.ut-an .erzaehler .blase::before{content:none}
.ut{position:relative;box-sizing:border-box;display:flex;align-items:center;width:100%;max-width:340px;min-height:calc(2.8em + 26px);padding:13px 18px;border-radius:22px 22px 22px 8px;
  background:var(--flaeche-1);border:1px solid var(--rand-linie);box-shadow:0 22px 44px -30px rgb(var(--schatten-rgb) / .45);
  font:500 1.06rem/1.4 var(--lauf);letter-spacing:-.003em;color:var(--tinte);text-align:left}
.ut::before{content:"";position:absolute;left:-7px;bottom:18px;width:13px;height:13px;background:inherit;border-left:1px solid var(--rand-linie);border-bottom:1px solid var(--rand-linie);border-radius:0 0 0 3px;transform:rotate(45deg)}
.ut-zeile{display:block;min-width:0;overflow-wrap:anywhere}
.ut-w{opacity:0;border-radius:6px;padding:0 .1em;margin:0 -.1em;transition:opacity .2s ease,color .2s ease,background-color .2s ease}
.ut-w.da{opacity:1}
.ut-w.alt{opacity:.48}
.ut-w b{font-weight:700;color:var(--akzent-tief)}
.ut-w.jetzt{color:var(--akzent-tief);background:color-mix(in srgb,var(--akzent-flaeche) 14%,transparent)}
.ut-zeile[data-ut="ganz"] .ut-w{opacity:1}
@media (max-width:767px){
  .ut{max-width:none;min-height:calc(2.8em + 22px);padding:11px 14px;font-size:.98rem}
  .ut::before{bottom:14px}
  .ut-an .erzaehler .blase{gap:10px}
}
/* Zurück und Weiter stehen rechts neben den Fortschrittspunkten */
.ut-reihe{display:flex;align-items:center;gap:14px;margin-top:18px}
.ut-reihe>ol{flex:1;min-width:0;margin:0!important}
.ut-reihe .spulen{flex:none;margin:0!important}
/* Im Vollbild: kleine Blase, so breit wie die Phrase, mit dem Zipfel am Kopf (app.js setzt --fx) */
.genie .ut-genie{width:auto;min-width:min(240px,100%);max-width:min(600px,100%);min-height:0;padding:12px 20px;border-radius:22px;align-self:center;
  background:rgb(var(--flaeche-1-rgb) / .97);font:500 clamp(1.05rem,1.3vw,1.18rem)/1.4 var(--lauf);text-align:left;text-wrap:wrap}
.genie .ut-genie::before{left:50%;bottom:-7px;border-left:0;border-right:1px solid var(--rand-linie);border-radius:0 0 3px 0;transform:translateX(-50%) rotate(45deg)}
.genie .ut-genie.am-kopf{align-self:flex-start;margin-left:max(0px,calc(var(--fx) - 44px));max-width:min(600px,calc(100% - max(0px,calc(var(--fx) - 44px))))}
.genie .ut-genie.am-kopf::before{left:44px}
.genie .ut-genie .ut-zeile{width:100%}
.genie-unten{justify-content:flex-end;min-height:170px}
@media (max-width:767px){
  .genie-unten{flex-direction:column-reverse;justify-content:space-between;min-height:140px}
  .genie .ut-genie{padding:10px 16px;font-size:1rem;min-width:min(200px,100%)}
}
@media (prefers-reduced-motion:reduce){.ut-w{transition:none}}

/* 7. Vollbild am Handy (Ervin 26.10.2026): in den ersten Szenen ist das Fenster so hoch wie das Website-Bild,
   kein dunkles Feld mehr darunter. Mit dem Übergang (--crash) wächst es zurück auf die volle Höhe. */
.genie-an .genie-buehne.g-zuschnitt .s-fenster{height:calc(var(--g-fh) + (var(--g-fn) - var(--g-fh)) * var(--crash,0))}

/* 8. Auftakt (Ervin 26.10.2026): beim Hineinscrollen wird Anima groß und steht mittig, vor einem ruhigen Zifferblatt.
   app.js setzt --g (Wachsen), --b (Sprechblase und Play), --e (Flug an den Platz) und --dreh (Zifferblatt). */
.auftakt{position:relative;z-index:3;height:calc(100vh + 70vh);height:calc(100svh + 70vh);background:linear-gradient(180deg,var(--grund) 0%,var(--flaeche-1) 100%)}
.auftakt-buehne{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center}
.auftakt-inhalt{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4svh,26px);width:100%;max-width:680px;padding:calc(var(--kopf) + 6px) 16px 28px;box-sizing:border-box;text-align:center}
.auftakt-blase{position:relative;z-index:3;max-width:min(540px,100%);margin:0;padding:16px 24px;border-radius:24px;box-sizing:border-box;
  background:rgb(var(--flaeche-1-rgb) / .94);border:1px solid var(--rand-linie);box-shadow:0 26px 54px -32px rgb(var(--schatten-rgb) / .55);
  font:500 clamp(1.02rem,1.25vw,1.2rem)/1.45 var(--lauf);letter-spacing:-.004em;color:var(--tinte);text-wrap:balance;
  opacity:calc(var(--b,0) * (1 - var(--e,0) * 3));transform:translateY(calc((1 - var(--b,0)) * 14px))}
.auftakt-blase b{color:var(--akzent-text);font-weight:700}
.auftakt-blase::after{content:"";position:absolute;left:50%;bottom:-8px;width:15px;height:15px;background:inherit;border-right:1px solid var(--rand-linie);border-bottom:1px solid var(--rand-linie);border-radius:0 0 4px 0;transform:translateX(-50%) rotate(45deg)}
.auftakt-figur{position:relative;z-index:2;height:clamp(220px,42svh,430px);aspect-ratio:532/700;display:grid;place-items:center}
.auftakt-figur img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;will-change:transform,opacity;opacity:0;
  filter:drop-shadow(0 30px 30px rgb(14 42 90 / .26))}
/* Licht und Zifferblatt hinter der Figur: aluminiumfarbene Striche wie auf einer Uhr, dreht sich kaum merklich mit dem Scrollen */
.auftakt-licht{position:absolute;left:50%;top:50%;z-index:0;width:min(96vw,980px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--akzent-flaeche) 17%,transparent) 0%,color-mix(in srgb,var(--akzent-flaeche) 6%,transparent) 46%,transparent 72%);
  opacity:calc(var(--g,0) * (1 - var(--e,0)));transform:translate(-50%,-50%) scale(calc(.7 + .3 * var(--g,0)))}
.auftakt-ring{position:absolute;left:50%;top:50%;z-index:1;width:min(88vw,64svh,640px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:1px solid rgb(var(--tinte-rgb) / .10);
  opacity:calc(var(--g,0) * (1 - var(--e,0) * 1.6));transform:translate(-50%,-50%) rotate(var(--dreh,0deg)) scale(calc(.86 + .14 * var(--g,0)))}
.auftakt-ring::before,.auftakt-ring::after{content:"";position:absolute;inset:0;border-radius:50%}
.auftakt-ring::before{background:repeating-conic-gradient(from -.25deg,rgb(var(--tinte-rgb) / .20) 0 .5deg,transparent .5deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 12px),#000 calc(100% - 11px),#000 calc(100% - 3px),transparent calc(100% - 2px));
  mask:radial-gradient(closest-side,transparent calc(100% - 12px),#000 calc(100% - 11px),#000 calc(100% - 3px),transparent calc(100% - 2px))}
.auftakt-ring::after{inset:-1px;background:repeating-conic-gradient(from -.6deg,var(--akzent-flaeche) 0 1.2deg,transparent 1.2deg 30deg);opacity:.55;
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 24px),#000 calc(100% - 23px),#000 calc(100% - 3px),transparent calc(100% - 2px));
  mask:radial-gradient(closest-side,transparent calc(100% - 24px),#000 calc(100% - 23px),#000 calc(100% - 3px),transparent calc(100% - 2px))}
.auftakt-boden{position:absolute;left:50%;bottom:1%;z-index:1;width:74%;height:8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--schatten-rgb) / .30),transparent);opacity:calc(var(--g,0) * (1 - var(--e,0) * 2));transform:translateX(-50%) scale(calc(.5 + .5 * var(--g,0)))}
.auftakt-play{position:relative;z-index:3;display:inline-flex;align-items:center;gap:14px;min-height:68px;padding:8px 30px 8px 8px;border:0;border-radius:999px;cursor:pointer;
  background:var(--akzent-flaeche);color:var(--auf-akzent);font:700 1.18rem/1 var(--titel);letter-spacing:.01em;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 7px color-mix(in srgb,var(--akzent-flaeche) 14%,transparent),0 22px 44px -18px color-mix(in srgb,var(--akzent-flaeche) 80%,transparent);
  opacity:calc(var(--b,0) * (1 - var(--e,0) * 3));transform:translateY(calc((1 - var(--b,0)) * 18px));transition:box-shadow .25s,filter .25s}
.auftakt-play-kreis{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--auf-akzent)}
.auftakt-play-kreis i{width:0;height:0;margin-left:5px;border-left:17px solid var(--akzent-flaeche);border-top:11px solid transparent;border-bottom:11px solid transparent}
.auftakt-play:focus-visible{outline:2px solid var(--akzent-text);outline-offset:5px}
@media (hover:hover){.auftakt-play:hover{filter:brightness(1.07);box-shadow:0 0 0 10px color-mix(in srgb,var(--akzent-flaeche) 18%,transparent),0 24px 48px -18px color-mix(in srgb,var(--akzent-flaeche) 85%,transparent)}}
.auftakt:not(.steht) .auftakt-play{pointer-events:none}
.auftakt.genie-weg .auftakt-figur img{opacity:0!important}
/* während des Flugs steht die kleine Figur im Abschnitt noch nicht da */
.sicht .robo{transition:opacity .25s}
.sicht.auftakt-flug .robo{opacity:0}
@media (max-width:767px){
  .auftakt-inhalt{padding:calc(var(--kopf) + 4px) 16px calc(var(--app-unten,78px) + 18px);gap:14px}
  .auftakt-blase{padding:12px 16px;font-size:1rem;border-radius:20px}
  .auftakt-figur{height:clamp(190px,34svh,320px)}
  .auftakt-play{min-height:60px;font-size:1.08rem;padding:7px 26px 7px 7px}
  .auftakt-play-kreis{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .auftakt{height:auto;min-height:100svh}
  .auftakt-buehne{position:relative;min-height:100svh;height:auto}
  .auftakt-play,.sicht .robo{transition:none}
}
/* /GENIE */
/* PREISE-NEU (Ervin 26.10.2026): Monatsgebühr je Paket, eine klare Paket-Section, Zusätze zugeklappt, Vergleich am Handy */
/* Kopf der Preise-Seite ohne Kartenfächer: Text über die volle Breite */
.ph-raster:not(:has(.ph-buehne)){grid-template-columns:minmax(0,1fr)}
.ph-raster:not(:has(.ph-buehne)) .ph-lead{max-width:62ch}
@media(min-width:1000px){.ph-raster:not(:has(.ph-buehne)) .ph-punkte{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Monatsgebühr unter dem Paketpreis */
.pk-monat{margin:-8px 0 16px;font-size:.86rem;color:var(--grau)}
.pk-monat b{font:750 1.05rem var(--titel);color:var(--tinte);letter-spacing:-.01em}
.pk-mitte .pk-monat{color:#9AA3AA}.pk-mitte .pk-monat b{color:#fff}
/* Paketkarten der Preise-Seite (Ervin 26.10.2026): am Rechner drei nebeneinander, am Handy Wisch-Karten mit Umschalter */
.pk-preisseite{scroll-margin-top:var(--kopf)}
.pn{--pn-karte:var(--flaeche);--pn-rand:rgb(var(--tinte-rgb) / .07);--pn-bild:radial-gradient(120% 90% at 50% 100%,#DCE3F5 0%,#EEF1F7 45%,#F7F8FA 100%);margin:0 0 30px}
:root[data-theme="dunkel"] .pn{--pn-karte:#20252A;--pn-rand:rgb(255 255 255 / .07);--pn-bild:radial-gradient(120% 90% at 50% 100%,#22314F 0%,#1B2027 55%,#191D22 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .pn{--pn-karte:#20252A;--pn-rand:rgb(255 255 255 / .07);--pn-bild:radial-gradient(120% 90% at 50% 100%,#22314F 0%,#1B2027 55%,#191D22 100%)}}
.pn-spur{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);gap:0 20px;align-items:stretch}
.pn-spur:focus-visible{outline:2px solid var(--akzent-text);outline-offset:4px;border-radius:30px}
.pn-karte{display:grid;grid-row:span 7;grid-template-rows:subgrid;min-width:0;position:relative;background:var(--pn-karte);border:1px solid var(--pn-rand);border-radius:30px;padding:14px 14px 26px;scroll-margin-top:calc(var(--kopf) + 12px);box-shadow:0 1px 2px rgb(var(--schatten-rgb) / .05)}
.pn-karte>*:not(.pn-bild){margin-inline:14px}
.pn-mitte{border:1.5px solid var(--akzent-text);box-shadow:0 0 0 5px rgb(43 79 176 / .07),0 26px 50px -30px rgb(30 58 138 / .5)}
:root[data-theme="dunkel"] .pn-mitte{box-shadow:0 0 0 5px rgb(157 179 242 / .08),0 26px 50px -30px rgb(0 0 0 / .8)}
.pn-bild{position:relative;margin:0;height:168px;border-radius:20px;background:var(--pn-bild);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.pn-bild img{height:150px;width:auto;object-fit:contain;margin-bottom:-4px;filter:drop-shadow(0 14px 16px rgb(20 40 100 / .25))}
.pn-tipp-zeichen{position:absolute;top:12px;left:12px;padding:6px 11px;border-radius:999px;background:var(--akzent-flaeche);color:var(--auf-akzent);font:700 .7rem/1 var(--lauf);letter-spacing:.06em;text-transform:uppercase}
.pn-kopf{margin-top:20px}
.pn-name{font:800 1.65rem/1.1 var(--titel);letter-spacing:-.025em;color:var(--tinte);margin:0}
.pn-unter{margin:6px 0 0;font-size:.95rem;line-height:1.4;color:var(--grau)}
.pn-preis{margin-top:18px;padding-top:18px;border-top:1px solid var(--pn-rand)}
.pn-betrag{margin:0;font:500 1.05rem/1 var(--titel);color:var(--tinte);letter-spacing:-.01em}
.pn-betrag b{font:820 2.6rem/1 var(--titel);letter-spacing:-.045em;margin-right:2px}
.pn-art{margin:6px 0 0;font-size:.82rem;color:var(--grau)}
.pn-monat{display:inline-block;justify-self:start;margin:14px 0 0;padding:7px 12px;border-radius:12px;background:rgb(var(--tinte-rgb) / .05);font-size:.86rem;color:var(--grau)}
.pn-monat b{font:750 .98rem var(--titel);color:var(--tinte);white-space:nowrap;margin-right:4px}
.pn-knopf{margin-top:20px;width:auto;justify-self:stretch}
.pn-mitte .pn-knopf{background:var(--akzent-flaeche);color:var(--auf-akzent);border-color:transparent}
.pn-drin{margin-top:24px;margin-bottom:12px;font:700 .72rem var(--lauf);letter-spacing:.12em;text-transform:uppercase;color:var(--stahl)}
.pn-liste{list-style:none;margin-top:0;margin-bottom:0;padding:0;display:grid;gap:14px;align-content:start}
.pn-liste li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.pn-liste svg{width:20px;height:20px;padding:3px;border-radius:50%;background:rgb(43 79 176 / .1);fill:none;stroke:var(--akzent-text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
:root[data-theme="dunkel"] .pn-liste svg{background:rgb(157 179 242 / .14)}
.pn-liste b{display:block;font:650 .96rem/1.3 var(--lauf);color:var(--tinte)}
.pn-liste small{display:block;margin-top:2px;font-size:.86rem;line-height:1.45;color:var(--grau)}
.pn-fuss{margin-top:20px;margin-bottom:0;padding:12px 14px;border-radius:14px;background:rgb(var(--tinte-rgb) / .04);font-size:.82rem;line-height:1.45;color:var(--grau);align-self:end}
.pn-wahl{display:none}
.pn-hinweis{margin:18px 0 0;font-size:.84rem;color:var(--grau);text-align:center}
/* Handy und Tablet: Wisch-Karten, die nächste schaut hervor; darüber der Umschalter mit Namen und Preis */
@media (max-width:1023px){
  .pn-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;margin:0 0 14px;border-radius:18px;background:color-mix(in srgb,var(--tinte) 7%,var(--flaeche-1));border:1px solid rgb(var(--tinte-rgb) / .06);box-shadow:0 10px 24px -14px rgb(var(--schatten-rgb) / .35);position:sticky;top:calc(var(--kopf) + 10px);z-index:3}
  .pn-tab{display:grid;gap:2px;justify-items:center;min-height:52px;padding:7px 4px;border:0;border-radius:14px;background:none;font:inherit;color:var(--grau);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
  .pn-tab b{font:750 .92rem/1.1 var(--titel);color:inherit}
  .pn-tab small{font-size:.74rem;white-space:nowrap}
  .pn-tab[aria-pressed="true"]{background:var(--flaeche-1);color:var(--tinte);box-shadow:0 1px 2px rgb(var(--schatten-rgb) / .12),0 6px 16px -8px rgb(var(--schatten-rgb) / .3)}
  :root[data-theme="dunkel"] .pn-tab[aria-pressed="true"]{background:#2C333A}
  .pn-tab:focus-visible{outline:2px solid var(--akzent-text);outline-offset:1px}
  .pn-spur{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-20px;padding:4px 10vw 18px;scroll-padding-inline:10vw}
  .pn-spur::-webkit-scrollbar{display:none}
  .pn-karte{display:flex;flex-direction:column;flex:0 0 80vw;max-width:440px;scroll-snap-align:center;scroll-snap-stop:always}
  .pn-fuss{margin-top:auto}
  .pn-liste{margin-bottom:20px}
  .pn-bild{height:150px}.pn-bild img{height:134px}
}
@media (min-width:600px) and (max-width:1023px){.pn-karte{flex-basis:56vw}.pn-spur{padding-inline:22vw;scroll-padding-inline:22vw}}
@media (prefers-reduced-motion:reduce){.pn-tab{transition:none}}
/* Zusätze: zugeklappt, Preise erst nach dem Aufklappen */
.zs-klappe{padding:0}
.zs-klappe>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center;margin:0;padding:20px 22px;border-radius:22px}
.zs-klappe>summary::-webkit-details-marker{display:none}
.zs-klappe>summary>b,.zs-klappe>summary>span,.zs-klappe>summary>small{grid-column:1}
.zs-klappe>summary .zs-zahl{font-size:.78rem;color:var(--akzent-text);font-weight:600;margin-top:4px}
.zs-klappe>summary>i{grid-column:2;grid-row:1/span 3;width:30px;height:30px;border-radius:50%;background:var(--akzent-flaeche);position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.zs-klappe>summary>i::before{content:"";position:absolute;left:50%;top:44%;width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-50%) rotate(45deg)}
.zs-klappe[open]>summary>i{transform:rotate(180deg)}
.zs-klappe>summary:focus-visible{outline:2px solid var(--akzent-text);outline-offset:3px}
.zs-klappe>ul{padding:0 22px 12px}
.zs-raster:has(.zs-klappe){align-items:start}
.preis-euro{margin:4px 0 0;font-size:.82rem;color:var(--grau);text-align:center}
@media(prefers-reduced-motion:reduce){.zs-klappe>summary>i{transition:none}}
/* Vergleichstabelle am Handy: je Merkmal eine Karte, darin drei Spalten mit Paketnamen */
@media(max-width:767px){
  main table.app-karten.pv-tabelle tr:not(.pv-gruppe){grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 6px}
  main table.app-karten.pv-tabelle tr:not(.pv-gruppe)>th:first-child{grid-column:1/-1}
  main table.app-karten.pv-tabelle tr:not(.pv-gruppe)>th:first-child small{display:block;font:400 .8rem/1.4 var(--lauf);color:var(--grau);margin-top:4px;white-space:normal!important;overflow-wrap:anywhere}
  main table.app-karten.pv-tabelle tr:not(.pv-gruppe)>th:first-child{white-space:normal;min-width:0}
  main table.app-karten.pv-tabelle tr:not(.pv-gruppe)>td{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;text-align:center!important;padding:8px 4px!important;border-radius:12px;background:color-mix(in srgb,var(--tinte) 4%,transparent)!important;min-height:58px}
  main table.app-karten.pv-tabelle tr>td[data-spalte]::before{font-size:.72rem;letter-spacing:.01em}
  main table.app-karten.pv-tabelle tr>td:nth-child(3){background:color-mix(in srgb,var(--akzent-text) 10%,transparent)!important}
  main table.app-karten.pv-tabelle .pv-wert{font-size:.8rem;line-height:1.3;overflow-wrap:anywhere}
}
/* /PREISE-NEU */
/* BF-DUNKEL (26.10.2026): Black-Friday-Knopf ist fast schwarz, im Dunkelmodus hell umranden */
:root[data-theme="dunkel"] li[style*="#16191C"] .em-j-mail em{box-shadow:0 0 0 1.5px #C9D1D9;background:#2A3036}
@media (prefers-color-scheme:dark){:root:not([data-theme]) li[style*="#16191C"] .em-j-mail em{box-shadow:0 0 0 1.5px #C9D1D9;background:#2A3036}}
/* /BF-DUNKEL */
/* ===================== LEISTE-NEU (Ervin 26.10.2026, 04:45) =====================
   Untere Leiste neu im AnimaContent-Look: Aluminium-Glas, ruhige Kanten, keine ragenden Kreise.
   Die Mitte ist ein abgerundetes Quadrat wie Animas Bildschirmkopf. Beim Erklären wird genau
   dieses Quadrat zu seinem Gesicht. „Check“ steht immer lesbar unter dem Quadrat, nichts überdeckt es. */
@media (max-width:767px){
  :root{--app-leiste:84px}
  .app-leiste{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:68px;padding:6px 6px 7px;border-radius:26px;align-items:end;
    background:linear-gradient(180deg,rgb(var(--flaeche-1-rgb) / .96),rgb(var(--flaeche-1-rgb) / .9));
    border:1px solid rgb(var(--tinte-rgb) / .08);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),0 22px 44px -22px rgb(var(--schatten-rgb) / .55),0 3px 10px rgb(var(--schatten-rgb) / .07)}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .app-leiste{background:linear-gradient(180deg,rgb(var(--flaeche-1-rgb) / .86),rgb(var(--flaeche-1-rgb) / .74));-webkit-backdrop-filter:saturate(1.8) blur(22px);backdrop-filter:saturate(1.8) blur(22px)}
  }
  .app-leiste a{min-height:54px;border-radius:18px;gap:4px;justify-content:flex-end;padding-bottom:4px;font-size:.64rem}
  .app-leiste a svg{width:22px;height:22px}
  /* aktive Seite: kleine blaue Bildschirm-Kachel hinter dem Symbol statt Strich */
  .app-leiste a[aria-current="page"]:not(.app-haupt)::after{display:none}
  .app-leiste a:not(.app-haupt) svg{padding:5px 13px;border-radius:12px;box-sizing:content-box;transition:background .25s}
  .app-leiste a[aria-current="page"]:not(.app-haupt) svg{background:rgb(43 79 176 / .12)}
  .app-leiste a:not(.app-haupt):active{transform:scale(.94)}

  /* Mitte: Check als Bildschirm-Kachel, leicht erhöht, ohne weißen Ring */
  .app-leiste a.app-haupt{padding-bottom:4px;justify-content:flex-end}
  .app-leiste a.app-haupt svg{top:-16px;width:50px;height:46px;margin-left:-25px;padding:12px 13px;border-radius:15px;
    background:radial-gradient(120% 90% at 30% 15%,#2C3443 0%,#151A22 55%,#0D1117 100%);
    stroke:#BFE0FF;stroke-width:2;filter:drop-shadow(0 0 3px rgb(150 205 255 / .55));
    box-shadow:0 0 0 2.5px #2B4FB0,0 0 0 3.5px rgb(255 255 255 / .55),0 12px 22px -10px rgb(20 40 100 / .7)}
  .app-leiste a.app-haupt[aria-current="page"] svg{box-shadow:0 0 0 2.5px #3D66D6,0 0 0 6px rgb(61 102 214 / .22),0 12px 22px -10px rgb(20 40 100 / .7)}
  .app-leiste a.app-haupt > span:not(.genie-gesicht){position:relative;z-index:1;font-weight:750;color:var(--tinte)}
  .app-leiste a.app-haupt .genie-gesicht{top:-16px;margin-left:-25px}
  .app-leiste a.app-haupt:active svg{transform:scale(.94)}
}
/* Gesicht überall als Bildschirmkopf (Leiste, Kapsel am Rechner, Flug) */
.genie-gesicht{width:50px;height:46px}
.genie-kopf{border-radius:15px;background:#0D1117;box-shadow:0 0 0 2.5px #2B4FB0,0 0 0 3.5px rgb(255 255 255 / .55),0 12px 22px -10px rgb(20 40 100 / .7)}
.genie-kopf img{object-fit:cover;transform:none}
.genie-mund{left:42%;top:69%;width:26%;height:15%}
.genie-ring{inset:-7px;border-radius:20px}
@media (max-width:767px){
  :root[data-theme="dunkel"] .app-leiste{background:linear-gradient(180deg,rgb(34 39 45 / .9),rgb(24 28 33 / .86));border-color:rgb(255 255 255 / .08);box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),0 22px 44px -22px rgb(0 0 0 / .8)}
  :root[data-theme="dunkel"] .app-leiste a[aria-current="page"]:not(.app-haupt) svg{background:rgb(157 179 242 / .16)}
  :root[data-theme="dunkel"] .app-leiste a.app-haupt > span:not(.genie-gesicht){color:#E6EAEE}
}
@media (max-width:767px) and (prefers-color-scheme:dark){
  :root:not([data-theme]) .app-leiste{background:linear-gradient(180deg,rgb(34 39 45 / .9),rgb(24 28 33 / .86));border-color:rgb(255 255 255 / .08);box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),0 22px 44px -22px rgb(0 0 0 / .8)}
  :root:not([data-theme]) .app-leiste a[aria-current="page"]:not(.app-haupt) svg{background:rgb(157 179 242 / .16)}
  :root:not([data-theme]) .app-leiste a.app-haupt > span:not(.genie-gesicht){color:#E6EAEE}
}
/* ===================== /LEISTE-NEU ===================== */
/* KARUSSELL-UU */
/* Über uns, Team-Bühne (Ervin 26.10.2026: „unter Maurice eine Linie, zu viel Fläche“).
   1) Gleich große Köpfe: die Fotos sind verschieden geschnitten (Kopf = 35 / 30 / 38 Prozent der Bildhöhe).
      Jedes Bild wird um --tb-zoom (in ueber_inhalt.html je Person) größer gesetzt und unten abgeschnitten, nie gestaucht.
   2) Handy: der Fortschrittsbalken lief als Linie quer durchs Foto, und jede Textkarte war so hoch wie die längste. */
.tb-person{overflow:hidden}
.tb-person img{height:calc(100% * var(--tb-zoom,1))}
@media (max-width:767px){
  html body .tb .tb-person{overflow:hidden;bottom:calc(var(--app-unten,86px) + 14px)!important;height:min(50svh,450px)!important;
    -webkit-mask-image:linear-gradient(#000 74%,transparent 96%);mask-image:linear-gradient(#000 74%,transparent 96%)}
  html body .tb .tb-person img{height:calc(100% * var(--tb-zoom,1))}
  html body .tb .tb-info{align-self:end}
  html body .tb .tb-balken{display:none}
}
@media (max-width:767px) and (max-height:700px){html body .tb .tb-person{height:min(52svh,420px)!important;bottom:calc(var(--app-unten,86px) + 14px)!important}}

/* Startseite, Karussell „Einblicke in die Projekte“ (Ervin 26.10.2026): 18 Kundenwebsites, jede Karte mit Zeile,
   kurzer Aussage, wo vorhanden einem wörtlichen Zitat und dem Weg zur Fallstudie. Karten einer Reihe gleich hoch. */
/* Der Knopf „Alle Referenzen ansehen“ steht jetzt unter dem Karussell. Die Pfeile rutschten mit -84px in die dritte Kundenstimme. */
@media (min-width:1024px){.rs .rk.rk-uu{margin-top:0}.rs .rk-uu .rk-steuer{margin:0 0 16px}}
.rk-uu .rk-folie{display:flex;align-self:start}
.rk-uu .rs-karte{flex:1;grid-template-rows:auto 1fr;align-content:start}
.rk-uu .rs-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.rk-uu .rk-aussage{margin-top:6px;font-size:.92rem;line-height:1.5;color:var(--tinte-2,var(--grau))}
.rk-uu .rk-zitat{display:grid;gap:4px;margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--flaeche-1);border:1px solid var(--rand-linie);font-size:.88rem;line-height:1.45;color:var(--tinte)}
.rk-uu .rk-zitat small{font-size:.76rem;color:var(--grau)}
.rk-uu .rk-mehr{padding-top:12px;font:600 .9rem/1.2 var(--lauf);color:var(--akzent-text,var(--akzent))}
.rk-uu .rk-mehr i{font-style:normal;display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@media (min-width:1024px){.rk-uu .rs-karte:hover .rk-mehr i,.rk-uu .rs-karte:focus-visible .rk-mehr i{transform:translateX(4px)}}
.rk-uu .rs-karte:focus-visible{outline:2px solid var(--akzent-text);outline-offset:4px;border-radius:16px}
.rk-fuss-uu{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.rk-fuss-uu .rk-punkte{margin-top:0;flex-wrap:wrap;max-width:100%}
.rk-pause-uu{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--rand-feld);background:var(--flaeche-1);color:var(--tinte);cursor:pointer;display:grid;place-items:center;padding:0}
.rk-pause-uu i{display:block;width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.rk-pause-uu[aria-pressed="true"] i{width:0;height:0;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent currentColor;margin-left:2px}
.rk-pause-uu:focus-visible{outline:2px solid var(--akzent-text);outline-offset:3px}
@media (max-width:767px){
  .rk-uu .rk-punkte{gap:0}
  .rk-uu .rk-punkte button{width:16px;height:28px}
  .rk-uu .rk-punkte button i{width:6px;height:6px}
  .rk-uu .rk-punkte button[aria-current="true"] i{width:14px}
}
/* /KARUSSELL-UU */

/* TEXTE-0526 */
/* Leistungen-Reiter (Ervin 26.10.2026): am Handy Bild oben in voller Breite, Text darunter. Die Regel für gerade Karten
   (.lz-karte:nth-child(even):not(.gegen)) hielt sonst zwei Spalten fest und quetschte den Text. */
@media(max-width:900px){
  .pr-liste .lz-karte,.pr-liste .lz-karte.gegen,.pr-liste .lz-karte:nth-child(even):not(.gegen){grid-template-columns:1fr}
  .pr-liste .lz-karte>.pr-text,.pr-liste .lz-karte.gegen>.pr-text,.pr-liste .lz-karte:nth-child(even):not(.gegen)>.pr-text{order:2}
  .pr-liste .lz-karte>.lz-bild,.pr-liste .lz-karte>.pr-bild{order:1;width:100%}
}
/* /TEXTE-0526 */

/* INFO-FENSTER (Ervin 26.10.2026): runder Info-Knopf an Begriffen, ein Fenster für alle Erklärungen.
   Am Rechner ein Popover am Knopf, am Handy ein Blatt von unten. Farben nur über Token, damit hell und dunkel stimmen. */
.info-knopf{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;margin:0 0 0 .35em;padding:0;vertical-align:.08em;flex:none;
  border:1.5px solid currentColor;border-radius:50%;background:transparent;color:var(--akzent-text);font:italic 700 11px/1 Georgia,"Times New Roman",serif;cursor:pointer;opacity:.85;text-transform:none;letter-spacing:0}
.info-knopf::before{content:"";position:absolute;inset:-12px}
.info-knopf:hover,.info-knopf[aria-expanded="true"]{opacity:1;background:var(--akzent-text);color:var(--flaeche-1)}
.info-knopf:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px;opacity:1}
.br-fazit .info-knopf,.br-leiste .info-knopf{color:#C9D6FF}
.info-schleier{position:fixed;inset:0;z-index:998;background:rgb(0 0 0 / .38)}
.info-schleier[hidden],.info-fenster[hidden]{display:none}
.info-fenster{position:fixed;z-index:999;width:min(360px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;padding:18px 20px 20px;border-radius:18px;
  background:var(--flaeche-1);color:var(--text,var(--tinte));border:1px solid rgb(var(--tinte-rgb) / .12);
  box-shadow:0 2px 6px rgb(var(--schatten-rgb,0 0 0) / .08),0 24px 60px -18px rgb(var(--schatten-rgb,0 0 0) / .45);text-align:left}
.info-fenster h2{margin:0 36px 10px 0;font:800 1.08rem/1.25 var(--titel);letter-spacing:-.01em;color:var(--tinte)}
.info-fenster p{margin:0 0 10px;font:400 .93rem/1.55 var(--lauf);color:var(--text,var(--tinte))}
.info-fenster p:last-child{margin-bottom:0}
.info-zu{position:absolute;top:10px;right:10px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:rgb(var(--tinte-rgb) / .06);color:var(--tinte);font:400 1.3rem/1 var(--lauf);cursor:pointer}
.info-zu:hover{background:rgb(var(--tinte-rgb) / .12)}
.info-zu:focus-visible{outline:2px solid var(--akzent-text);outline-offset:2px}
@media(max-width:767px){
  .info-fenster{left:0!important;right:0;top:auto!important;bottom:0;width:100%;max-height:78vh;border-radius:22px 22px 0 0;padding:26px 20px calc(22px + env(safe-area-inset-bottom,0px));
    border-width:1px 0 0;animation:info-hoch .22s ease-out}
  .info-fenster::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgb(var(--tinte-rgb) / .2)}
}
@media(min-width:768px){.info-schleier{background:transparent}}
@keyframes info-hoch{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.info-fenster{animation:none}}
/* /INFO-FENSTER */
/* SMS-AUS (26.10.2026): SMS-Erinnerung ist noch nicht freigeschaltet (PR #890 offen, Schalter aus).
   Bis dahin kein Häkchen anbieten, das nichts auslöst. Zum Freischalten diesen Block löschen. */
.kc-haken:has(input[name="sms"]),label:has(> input[name="sms"]){display:none!important}
/* /SMS-AUS */
/* BILDER-0526 (Ervin 26.10.2026): Anima-Motive in der linken Kapitelspalte, gegen zu viel Text und zu wenig Bild */
.b0526{margin:24px 0 0;max-width:400px;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:var(--flaeche);box-shadow:0 30px 60px -40px rgb(var(--schatten-rgb) / .45)}
.b0526 img{display:block;width:100%;height:100%;object-fit:cover}
:root[data-theme="dunkel"] .b0526{box-shadow:0 0 0 1px rgb(255 255 255 / .07)}
:root[data-theme="dunkel"] .b0526 img{filter:brightness(.86) contrast(1.03)}
@media(max-width:900px){.b0526{max-width:520px;margin:18px 0 6px;border-radius:20px}}
@media(max-height:760px) and (min-width:901px){.b0526{max-width:300px}}
/* /BILDER-0526 */