/* WebRise Studio v3 · Designsystem
   Greige, Ink, ein einziger Akzentpunkt. Geräte als Bühne, Bedienelemente wie Hardware. */

/* Schriften liegen selbst gehostet in assets/fonts, keine Verbindung zu Google */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root{
  --bg:#E9E8E4;
  --bg2:#DCDBD6;
  --card:#F6F5F2;
  --white:#FFFFFF;
  --ink:#111111;
  --ink2:#3A3A38;
  --mute:#8C8B86;
  --faint:#B9B8B3;
  --line:rgba(17,17,17,.12);
  --acc:#F05A28;
  --night:#121212;
  --night2:#1C1C1B;
  --d:"Inter Tight",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --m:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --g:clamp(16px,3.2vw,44px);
  --r:28px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 40px 80px -30px rgba(17,17,17,.35),0 12px 24px -12px rgba(17,17,17,.18);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--d);font-size:17px;line-height:1.5;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
html{overflow-x:hidden;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}

/* ---------- Typo ---------- */
.m{font-family:var(--m);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:400}
.m.ink{color:var(--ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);vertical-align:middle}
.h1{font-size:clamp(3rem,8.4vw,9.6rem);line-height:.9;letter-spacing:-.045em;font-weight:500}
.h2{font-size:clamp(2.4rem,5.6vw,6rem);line-height:.95;letter-spacing:-.04em;font-weight:500}
.h3{font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.grau{color:var(--faint)}
.lead{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.45;color:var(--ink2);max-width:36ch}
.text{color:var(--ink2);max-width:52ch}
.zahl{font-size:clamp(4rem,11vw,12rem);line-height:.85;letter-spacing:-.06em;font-weight:400;font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
.sec{padding:clamp(80px,12vw,180px) var(--g)}
.sec.eng{padding-top:clamp(48px,6vw,90px);padding-bottom:clamp(48px,6vw,90px)}
.kopf{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.kopf .rechts{justify-self:end;text-align:right}
@media (max-width:820px){.kopf{grid-template-columns:1fr}.kopf .rechts{justify-self:start;text-align:left}}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 26px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:500;font-size:1rem;transition:transform .3s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px)}
.btn.hell{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.hell:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn .pf{width:18px;height:18px}
.go{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--bg);flex:none;transition:transform .4s var(--ease)}
.go svg{width:18px;height:18px}
a:hover .go,.go:hover{transform:rotate(45deg)}
.go.hell{background:var(--white);color:var(--ink);box-shadow:0 1px 0 var(--line)}

/* ---------- Kopfleiste ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:16px var(--g);transition:transform .45s var(--ease),background .3s}
.nav.weg{transform:translateY(-110%)}
.nav.fest{background:rgba(233,232,228,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.marke{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:1.05rem}
.marke img{width:34px;height:34px}
.nav ul{display:flex;gap:6px;list-style:none;padding:5px;border-radius:99px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--line)}
.nav ul a{display:block;padding:9px 16px;border-radius:99px;font-size:.92rem;color:var(--ink2);transition:background .25s,color .25s}
.nav ul a:hover{color:var(--ink)}
.nav ul a[aria-current]{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.nav .rechts{justify-self:end;display:flex;gap:10px;align-items:center}
.nav .btn{height:44px;padding:0 20px;font-size:.92rem}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);place-items:center}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
@media (max-width:900px){
  .nav{grid-template-columns:1fr auto}
  .nav > nav,.nav .rechts .btn{display:none}
  .burger{display:grid}
}
.menue{position:fixed;inset:0;z-index:60;background:var(--bg);padding:88px var(--g) 32px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menue.offen{opacity:1;visibility:visible}
.menue nav a{display:flex;justify-content:space-between;align-items:baseline;font-size:clamp(2.4rem,11vw,4rem);letter-spacing:-.04em;line-height:1.15;border-bottom:1px solid var(--line);padding:8px 0}
.menue nav a small{font-family:var(--m);font-size:.7rem;color:var(--mute);letter-spacing:.08em}
.menue .zu{position:absolute;top:16px;right:var(--g);width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:1.4rem;line-height:1}

/* ---------- Geräte ---------- */
/* iPhone 17 Pro: offizieller Apple-Rahmen (Apple Design Resources) über dem Bildschirm.
   Bildschirm im Rahmenbild: x 72 bis 1278, y 69 bis 2691 von 1350 × 2760 */
.phone{--w:300px;position:relative;width:var(--w);aspect-ratio:1350/2760;flex:none;isolation:isolate}
/* Schatten als eigene Ebene statt CSS-Filter: ein Filter würde bei jedem Videobild neu gerechnet */
.phone::before{content:"";position:absolute;z-index:-1;left:4%;right:4%;top:2%;bottom:1%;border-radius:calc(var(--w)*.17);box-shadow:0 30px 50px -10px rgba(17,17,17,.32),0 8px 14px -4px rgba(17,17,17,.16)}
.phone .screen video{will-change:transform}
.phone::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:url(bilder/geraet/iphone-17-pro-silber.webp) center/100% 100% no-repeat}
.phone.blau::after{background-image:url(bilder/geraet/iphone-17-pro-blau.webp)}
.phone .screen{position:absolute;left:5.33%;top:2.5%;width:89.34%;height:95%;border-radius:calc(var(--w)*.14);overflow:hidden;background:var(--card);isolation:isolate}
.buehne.nacht .phone::before{box-shadow:0 30px 60px -6px rgba(0,0,0,.75)}
.phone .screen img,.phone .screen video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* Web-Aufnahmen ohne eigene Statusleiste bekommen eine echte */
.phone .screen img.web,.phone .screen video.web{position:absolute;left:0;right:0;bottom:0;top:calc(var(--w)*.118);width:100%;height:calc(100% - var(--w)*.118);box-shadow:0 calc(var(--w)*-.118) 0 0 var(--sbc,#fff)}
.phone .screen .ab.web{inset:auto 0 0 0;top:calc(var(--w)*.118)}
.status{position:absolute;z-index:4;top:0;left:0;right:0;height:calc(var(--w)*.118);display:flex;align-items:center;justify-content:space-between;padding:calc(var(--w)*.006) calc(var(--w)*.075) 0 calc(var(--w)*.1);font-family:-apple-system,"SF Pro Text","Inter Tight",sans-serif;font-weight:600;font-size:calc(var(--w)*.05);letter-spacing:-.01em;color:#111;pointer-events:none}
.screen:has(.web.dunkel:not(.ab)) .status,.screen:has(.web.dunkel.an) .status{color:#fff}
.screen:has(.ab.an:not(.web)) .status{opacity:0}
.status svg{height:calc(var(--w)*.04);width:auto;fill:currentColor}
.status .ic{display:flex;gap:calc(var(--w)*.016);align-items:center}
.phone .screen .ab{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.phone .screen .ab.an{opacity:1}

.win{position:relative;border-radius:14px;background:var(--white);box-shadow:var(--shadow);overflow:hidden}
.win .bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#F1F0ED;border-bottom:1px solid var(--line)}
.win .bar i{width:11px;height:11px;border-radius:50%;background:#D3D2CD}
.win .bar .url{margin-left:12px;flex:1;max-width:340px;height:22px;border-radius:7px;background:var(--white);font-family:var(--m);font-size:.62rem;color:var(--mute);display:flex;align-items:center;padding:0 10px;letter-spacing:.04em}
.win .inhalt{position:relative;overflow:hidden}
.win .inhalt img{width:100%;height:auto}

.karte{background:var(--white);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}

/* ---------- Bühne ---------- */
.buehne{position:relative;border-radius:var(--r);background:var(--bg2);overflow:hidden;display:grid;place-items:center}
.buehne.raster{background-color:var(--bg2);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;background-position:-1px -1px}
.buehne.nacht{background:var(--night2)}
.buehne .ecke,.wort-buehne .ecke{position:absolute;font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.buehne .ecke.ol,.wort-buehne .ecke.ol{top:20px;left:22px}.buehne .ecke.or,.wort-buehne .ecke.or{top:20px;right:22px}
.buehne .ecke.ul{bottom:20px;left:22px}.buehne .ecke.ur{bottom:20px;right:22px}

/* ---------- Schalter (Hardware) ---------- */
.schalter{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:6px;border-radius:99px;background:linear-gradient(#D6D5D0,#E4E3DF);box-shadow:inset 0 2px 5px rgba(0,0,0,.16),inset 0 -1px 0 rgba(255,255,255,.7)}
.schalter .knauf{position:absolute;top:6px;bottom:6px;left:6px;border-radius:99px;background:linear-gradient(#FFFFFF,#F1F0EC);box-shadow:0 6px 14px -4px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.9) inset,0 -2px 0 rgba(0,0,0,.05) inset;transition:transform .55s var(--ease),width .55s var(--ease)}
.schalter button{position:relative;z-index:1;height:48px;padding:0 22px;border-radius:99px;font-family:var(--m);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);transition:color .3s;white-space:nowrap}
.schalter button[aria-pressed="true"]{color:var(--ink)}
.schalter button[aria-pressed="true"]::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--acc);vertical-align:middle;transform:translateY(-1px)}

.kipp{display:inline-flex;align-items:center;gap:14px;font-family:var(--m);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.kipp .bahn{position:relative;width:76px;height:42px;border-radius:99px;background:linear-gradient(#D3D2CD,#E3E2DE);box-shadow:inset 0 2px 5px rgba(0,0,0,.18)}
.kipp .bahn::after{content:"";position:absolute;top:4px;left:4px;width:34px;height:34px;border-radius:50%;background:linear-gradient(#fff,#EEEDE9);box-shadow:0 5px 10px -3px rgba(0,0,0,.3);transition:transform .45s var(--ease)}
.kipp[aria-checked="true"] .bahn{background:var(--ink)}
.kipp[aria-checked="true"] .bahn::after{transform:translateX(34px)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:1.1fr 1fr;gap:var(--g);padding:110px var(--g) var(--g);align-items:stretch}
.hero .links{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:clamp(10px,3vw,40px) 0}
.hero .knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.hero .unten{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-top:1px solid var(--line);padding-top:18px}
.hero .buehne{min-height:calc(100svh - 130px);grid-template-rows:1fr auto;padding:52px 24px 26px;gap:22px}
.hero .phone{--w:clamp(210px,min(21vw,calc((100svh - 330px) / 2.2)),320px)}
.hero .titel-ab{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;max-width:520px}
.hero .titel-ab a{display:none;align-items:center;gap:12px}
.hero .titel-ab a.an{display:flex}
.hero .titel-ab b{font-weight:500;font-size:1.05rem;letter-spacing:-.01em;display:block}
@media (max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:92px}
  .hero .buehne{min-height:0}
}
@media (max-width:520px){
  .schalter button{padding:0 14px;height:44px;font-size:.66rem}
  .hero .phone{--w:54vw}
}

/* ---------- Wortliste ---------- */
.wortliste{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--g);align-items:start}
.wortliste ol{list-style:none}
.wortliste li{font-size:clamp(2.6rem,7.2vw,8rem);line-height:1.02;letter-spacing:-.05em;font-weight:500;color:var(--faint);transition:color .45s var(--ease);cursor:default}
.wortliste li.an{color:var(--ink)}
.wortliste li sup{font-family:var(--m);font-size:.7rem;letter-spacing:.06em;font-weight:400;vertical-align:top;margin-left:10px;position:relative;top:1.2em;color:var(--mute)}
.wortliste .info{position:sticky;top:30vh;display:grid;gap:18px}
.wortliste .info .tafel{min-height:150px}
.wortliste .info p{font-size:1.15rem;color:var(--ink2);max-width:40ch;transition:opacity .3s}
@media (max-width:820px){.wortliste{grid-template-columns:1fr}.wortliste .info{position:static}}

/* ---------- Projekt-Bühnen ---------- */
.projekt{display:grid;gap:22px;padding-bottom:clamp(70px,9vw,140px)}
.projekt .zeile{display:grid;grid-template-columns:auto 1fr auto;gap:var(--g);align-items:end}
.projekt .nr{font-family:var(--m);font-size:.8rem;color:var(--mute);padding-bottom:12px}
.projekt .name{font-size:clamp(2.6rem,6.4vw,7rem);line-height:.9;letter-spacing:-.05em;font-weight:500}
.projekt .chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;padding-bottom:10px}
.chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;font-family:var(--m);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.4)}
.projekt .buehne{height:clamp(460px,52vw,780px)}
.projekt .fuss{display:grid;grid-template-columns:1fr auto;gap:var(--g);align-items:center}
.projekt .fuss p{font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--ink2);max-width:58ch}
.projekt .fuss a{display:flex;align-items:center;gap:14px;font-weight:500}
@media (max-width:820px){
  .projekt .zeile{grid-template-columns:auto 1fr}
  .projekt .chips{grid-column:1/-1;justify-content:flex-start}
  .projekt .fuss{grid-template-columns:1fr}
  .projekt .buehne{height:auto;min-height:440px;padding:48px 0}
}

/* Kompositionen */
.trio{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:clamp(14px,2.4vw,40px)}
.trio .phone{--w:clamp(150px,17vw,280px)}
.trio .phone:nth-child(2){transform:translateY(-6%)}
.trio .phone:nth-child(1),.trio .phone:nth-child(3){transform:translateY(5%)}
@media (max-width:820px){.trio .phone{--w:38vw}.trio .phone:nth-child(3){display:none}}

.duo{position:relative;width:min(88%,1100px);aspect-ratio:16/9}
.duo .win{position:absolute;left:0;top:6%;width:80%}
.duo .phone{position:absolute;right:2%;bottom:-2%;--w:clamp(130px,15vw,250px)}
@media (max-width:820px){.duo{width:92%;aspect-ratio:4/4}.duo .win{width:96%;top:4%}.duo .phone{--w:40vw;right:0;bottom:0}}

.mitkarte{position:relative;width:min(88%,1100px);height:86%;display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,70px)}
.mitkarte .phone{--w:clamp(170px,18vw,290px)}
.mitkarte .karte{width:clamp(260px,34vw,520px)}
.mitkarte .karte img{width:100%;height:auto}
.mitkarte .karte .unter{padding:16px 20px;display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line)}
@media (max-width:820px){.mitkarte{flex-direction:column;height:auto;gap:28px}.mitkarte .phone{--w:52vw}.mitkarte .karte{width:86vw}}

.fenster{position:relative;width:min(84%,62vw,1000px)}
.fenster .win{width:100%}
.fenster .klein{position:absolute;right:-6%;bottom:-8%;width:30%}
@media (max-width:820px){.fenster{width:92%}.fenster .klein{width:46%;right:-2%;bottom:-14%}}

/* ---------- Typo-Liste ---------- */
.liste{border-top:1px solid var(--line)}
.liste a{display:grid;grid-template-columns:70px 1fr auto auto;gap:var(--g);align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease)}
.liste a:hover{padding-left:12px}
.liste b{font-size:clamp(1.6rem,3.4vw,3.2rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.liste .go{width:42px;height:42px}
@media (max-width:700px){.liste a{grid-template-columns:44px 1fr auto}.liste a .m.kat{display:none}}

/* ---------- Bogen (Ablauf) ---------- */
.bogen{position:relative;height:420vh}
.bogen .halt{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--g);padding:0 var(--g);overflow:hidden}
.bogen .kreis{position:relative;width:min(70vh,560px);aspect-ratio:1;justify-self:start;margin-left:calc(min(70vh,560px) * -.5)}
.bogen .kreis::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.bogen .ziffer{position:absolute;left:50%;top:50%;font-family:var(--m);font-size:clamp(1.1rem,1.6vw,1.5rem);color:var(--faint);transition:color .4s,font-size .4s;white-space:nowrap}
.bogen .ziffer.an{color:var(--ink);font-size:clamp(3rem,6vw,5.6rem);font-family:var(--d);letter-spacing:-.05em;font-weight:500}
.bogen .ziffer.an::before{content:"";position:absolute;left:-26px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--acc);transform:translateY(-50%)}
.bogen .schritte{position:relative;min-height:300px}
.bogen .schritt{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);display:grid;align-content:center;gap:18px}
.bogen .schritt.an{opacity:1}
.bogen .schritt h3{font-size:clamp(2.2rem,4.6vw,4.6rem);letter-spacing:-.045em;line-height:.95;font-weight:500}
.bogen .schritt p{font-size:1.15rem;color:var(--ink2);max-width:40ch}
@media (max-width:820px){
  .bogen{height:auto}
  .bogen .halt{position:static;height:auto;display:block;padding:clamp(60px,14vw,100px) var(--g)}
  .bogen .kreis{display:none}
  .bogen .schritte{min-height:0}
  .bogen .schritt{position:static;opacity:1;padding:26px 0;border-top:1px solid var(--line);gap:12px}
}

/* ---------- Zahlenfeld ---------- */
.feld{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feld > div{background:var(--card);border-radius:var(--r);padding:28px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.feld > div.dunkel{background:var(--night);color:var(--bg)}
.feld > div.dunkel .m{color:#77766f}
.feld .zahl{font-size:clamp(4rem,8vw,8.4rem)}
.feld p{color:inherit;opacity:.8;max-width:30ch}
@media (max-width:900px){.feld{grid-template-columns:1fr}.feld > div{min-height:220px}}

/* ---------- Punkte-Kalender ---------- */
.termin{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.termin .karte-k{background:var(--card);border-radius:var(--r);padding:clamp(24px,3vw,44px);display:grid;gap:26px;align-content:space-between}
.termin .tag{font-size:clamp(5rem,10vw,10rem);line-height:.8;letter-spacing:-.06em;font-weight:600}
.punkte{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(6px,1vw,12px);max-width:460px}
.punkte span{aspect-ratio:1;border-radius:50%;background:var(--ink)}
.punkte span.leer{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}
.punkte span.frei{background:var(--acc)}
.punkte span.aus{visibility:hidden}
.termin .rechts{background:var(--night);color:var(--bg);border-radius:var(--r);padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.termin .rechts .btn{background:var(--bg);color:var(--ink)}
.termin .rechts .btn.hell{background:transparent;color:var(--bg);box-shadow:inset 0 0 0 1px #3a3a39}
.termin .rechts .m{color:#77766f}
@media (max-width:900px){.termin{grid-template-columns:1fr}}

/* ---------- Projektseite ---------- */
.p-hero{padding:120px var(--g) 0;display:grid;gap:clamp(30px,4vw,56px)}
.p-hero .oben{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--g);align-items:end}
.p-hero .name{font-size:clamp(4rem,13vw,15rem);line-height:.82;letter-spacing:-.06em;font-weight:500}
.meta{display:grid;gap:0;border-top:1px solid var(--line)}
.meta div{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.meta div::after{content:"";order:2;flex:1;border-bottom:1px dotted var(--faint);transform:translateY(-4px)}
.meta dt{order:1}
.meta dd{order:3;font-weight:500}
.p-hero .buehne{height:clamp(520px,60vw,880px)}
@media (max-width:820px){.p-hero .oben{grid-template-columns:1fr}.p-hero .buehne{height:auto;min-height:480px;padding:48px 0}}

.auftrag{display:grid;grid-template-columns:1fr 2fr;gap:var(--g)}
.auftrag p.gross{font-size:clamp(1.7rem,3.2vw,3.2rem);line-height:1.12;letter-spacing:-.035em;font-weight:500}
.auftrag p.gross .grau{color:var(--faint)}
@media (max-width:820px){.auftrag{grid-template-columns:1fr}}

.leiste{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.leiste > div{padding:22px 20px 0 0;display:grid;gap:10px}
.leiste .zahl{font-size:clamp(3rem,6vw,6.4rem)}
@media (max-width:820px){.leiste{grid-template-columns:1fr 1fr;row-gap:30px}}

.schiene{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:10px var(--g) 60px;margin:0 calc(var(--g) * -1);scrollbar-width:none}
.schiene::-webkit-scrollbar{display:none}
.schiene figure{scroll-snap-align:start;flex:none;display:grid;gap:16px;scroll-margin-left:var(--g)}
.schiene figure .buehne{width:clamp(300px,34vw,520px);height:clamp(480px,46vw,700px)}
.schiene figure .buehne.breit{width:clamp(320px,62vw,980px)}
.schiene figure .phone{--w:clamp(200px,20vw,300px)}
.schiene figure .win{width:88%}
.schiene figcaption{display:flex;gap:14px;align-items:baseline;max-width:420px}
.schiene figcaption p{color:var(--ink2)}
.schiene-tasten{display:flex;gap:8px}
.schiene-tasten button{width:52px;height:52px;border-radius:50%;background:linear-gradient(#FFFFFF,#EFEEEA);box-shadow:0 6px 14px -6px rgba(0,0,0,.3),inset 0 -2px 0 rgba(0,0,0,.05);display:grid;place-items:center}
.schiene-tasten button:active{transform:translateY(1px);box-shadow:0 2px 6px -3px rgba(0,0,0,.3)}
.schiene-tasten svg{width:18px;height:18px}

.geliefert{display:grid;grid-template-columns:1fr 2fr;gap:var(--g)}
.geliefert ul{list-style:none;border-top:1px solid var(--line)}
.geliefert li{display:flex;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(1.05rem,1.4vw,1.3rem)}
.geliefert li .m{flex:none;width:34px}
@media (max-width:820px){.geliefert{grid-template-columns:1fr}}

.weiter{display:block;background:var(--night);color:var(--bg);border-radius:var(--r);padding:clamp(28px,4vw,56px);margin:0 var(--g) var(--g)}
.weiter .zeile{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.weiter .name{font-size:clamp(3rem,10vw,10rem);line-height:.85;letter-spacing:-.06em;font-weight:500}
.weiter .m{color:#77766f}
.weiter .go{background:var(--bg);color:var(--ink);width:72px;height:72px}

/* ---------- Fuss ---------- */
.fuss-seite{background:var(--night);color:var(--bg);padding:clamp(60px,8vw,110px) var(--g) 28px;display:grid;gap:clamp(60px,8vw,120px)}
.fuss-seite .oben{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--g)}
.fuss-seite .gross{font-size:clamp(2rem,4vw,3.8rem);letter-spacing:-.04em;line-height:1;font-weight:500}
.fuss-seite .gross a{border-bottom:1px solid #444}
.fuss-seite .gross a:hover{border-color:var(--bg)}
.fuss-seite ul{list-style:none;display:grid;gap:8px;margin-top:14px;color:#B8B7B1}
.fuss-seite ul a:hover{color:var(--bg)}
.fuss-seite .m{color:#77766f}
.fuss-seite .unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid #2c2c2b;padding-top:22px}
.fuss-seite .marke img{filter:invert(1) brightness(2)}
@media (max-width:900px){.fuss-seite .oben{grid-template-columns:1fr 1fr}.fuss-seite .oben > div:first-child{grid-column:1/-1}}

/* ---------- Einblenden (nur Deckkraft, keine Slide-ups) ---------- */
.ein{opacity:0;transition:opacity 1s var(--ease)}
.ein.da{opacity:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .ein{opacity:1}
}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.s-kopf{padding:130px var(--g) clamp(40px,5vw,70px);display:grid;grid-template-columns:1.4fr 1fr;gap:var(--g);align-items:end}
.s-kopf .h1{margin-top:22px}
@media (max-width:820px){.s-kopf{grid-template-columns:1fr;padding-top:110px}}

/* ---------- Projektreihen ---------- */
.filter{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.reihen{border-top:1px solid var(--line)}
.reihe{display:grid;grid-template-columns:60px 1.2fr 1fr 280px;gap:var(--g);align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.reihe[hidden]{display:none}
.reihe .name{font-size:clamp(2rem,4.4vw,4.4rem);font-weight:500;letter-spacing:-.045em;line-height:.95}
.reihe p{color:var(--ink2);max-width:42ch}
.reihe .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.reihe .mini{height:190px;border-radius:20px}
.reihe .mini .phone{--w:76px}
.reihe .mini img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reihe .go{margin-top:16px}
a.reihe{transition:background .3s}
a.reihe:hover .name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
@media (max-width:900px){.reihe{grid-template-columns:40px 1fr}.reihe > p,.reihe .mini{grid-column:2}}

/* ---------- Leistungen ---------- */
.leistung{display:grid;grid-template-columns:60px 1.1fr 1.2fr 1fr;gap:var(--g);padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
.leistung:first-child{border-top:1px solid var(--ink)}
.leistung h2{font-size:clamp(2.2rem,4.6vw,4.6rem);font-weight:500;letter-spacing:-.045em;line-height:.95}
.leistung p{color:var(--ink2);font-size:1.08rem;max-width:46ch}
.leistung .meta div{padding:10px 0}
@media (max-width:900px){.leistung{grid-template-columns:40px 1fr}.leistung > p,.leistung .meta{grid-column:2}}

/* ---------- Studio-Tafel ---------- */
.tafel-g{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(240px,auto);gap:14px}
.tafel-g > div{background:var(--card);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.tafel-g .portrait{grid-row:span 2;padding:0;overflow:hidden;position:relative;background:var(--bg2)}
.tafel-g .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.tafel-g .portrait .unter{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(246,245,242,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:14px 16px}
.tafel-g .breit2{grid-column:span 2}
.tafel-g .dunkel{background:var(--night);color:var(--bg)}
.tafel-g .dunkel .m{color:#77766f}
.tafel-g .zahl{font-size:clamp(3.6rem,6vw,6rem)}
.leds{display:grid;gap:10px}
.leds span{display:flex;align-items:center;gap:10px;font-size:1rem}
.leds span::before{content:"";width:9px;height:9px;border-radius:50%;background:#58B368;box-shadow:0 0 0 3px rgba(88,179,104,.18)}
@media (max-width:1000px){.tafel-g{grid-template-columns:1fr 1fr}.tafel-g .portrait{grid-row:span 2}}
@media (max-width:600px){.tafel-g{grid-template-columns:1fr}.tafel-g .breit2{grid-column:auto}.tafel-g .portrait{min-height:460px}}

/* ---------- Kontakt-Planer ---------- */
.planer{display:grid;grid-template-columns:1.1fr 1fr;gap:14px}
.planer > div{background:var(--card);border-radius:var(--r);padding:clamp(22px,3vw,40px);display:grid;gap:26px;align-content:start}
.planer .gross-tag{display:flex;align-items:flex-end;gap:22px}
.planer .gross-tag b{font-size:clamp(5rem,9vw,9rem);line-height:.78;letter-spacing:-.06em;font-weight:500;font-variant-numeric:tabular-nums}
.planer .kal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;gap:clamp(10px,1.4vw,18px) 8px;width:100%}
.planer .kal .wt{font-family:var(--m);font-size:.64rem;letter-spacing:.08em;color:var(--mute);text-align:center;text-transform:uppercase}
.planer .kal button{width:min(100%,68px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:rgba(246,245,242,.55);font-family:var(--m);font-size:.7rem;transition:transform .3s var(--ease),background .3s,box-shadow .3s,color .3s}
.planer .kal button:hover{transform:scale(1.08);color:var(--bg)}
.planer .kal button:disabled{visibility:hidden}
.planer .kal button[aria-pressed="true"]{background:var(--acc);color:#fff;box-shadow:0 0 0 4px var(--card),0 0 0 5.5px var(--acc)}
.planer .schalter{max-width:100%}
.planer .schalter button{padding:0 clamp(10px,1.4vw,20px)}
.zeiten{display:flex;flex-wrap:wrap;gap:8px}
.zeiten button,.themen button{height:44px;padding:0 18px;border-radius:99px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:.95rem}
.zeiten button[aria-pressed="true"],.themen button[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.themen{display:flex;flex-wrap:wrap;gap:8px}
.feldx{display:grid;gap:8px}
.feldx input,.feldx textarea{font:inherit;font-size:1.05rem;padding:15px 18px;border-radius:16px;border:0;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);width:100%}
.feldx input:focus,.feldx textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.feldx textarea{min-height:130px;resize:vertical}
.planer .zusammen{background:var(--night);color:var(--bg);border-radius:20px;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.planer .zusammen .m{color:#77766f}
.planer .zusammen .btn{background:var(--bg);color:var(--ink)}
@media (max-width:900px){.planer{grid-template-columns:1fr}}

/* ---------- Text (Rechtliches) ---------- */
.rtext{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rtext > div{background:var(--card);border-radius:var(--r);padding:clamp(24px,3vw,40px);display:grid;gap:14px;align-content:start}
.rtext p{color:var(--ink2);max-width:56ch}
.rtext a{border-bottom:1px solid var(--ink)}
@media (max-width:820px){.rtext{grid-template-columns:1fr}}

/* ---------- Leuchten-Wechsel (SEYA) ---------- */
#lampen{grid-template-rows:1fr auto;padding:40px 20px 28px;gap:18px}
.lampen{position:relative;width:min(520px,80%);height:100%;min-height:360px}
.lampen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .7s var(--ease);filter:drop-shadow(0 40px 40px rgba(17,17,17,.18))}
.lampen img.an{opacity:1}
.lampen-schalter{justify-self:center}
.duo-foto{position:relative;width:100%;height:100%;display:grid;place-items:center}
.duo-foto img{height:88%;width:auto;object-fit:contain;filter:drop-shadow(0 40px 40px rgba(17,17,17,.18))}
.lampenreihe{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,4vw,70px);height:78%;width:92%}
.lampenreihe img{height:100%;width:auto;max-width:31%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 40px 40px rgba(17,17,17,.18))}
.lampenreihe img:nth-child(2){height:112%}

/* ---------- Filme (Hochformat-Clips) ---------- */
.film{position:relative;flex:none;width:var(--fw,260px);aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:var(--bg2);box-shadow:0 30px 60px -30px rgba(17,17,17,.35)}
.film video,.film img{width:100%;height:100%;object-fit:cover;display:block}
.film .titel{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:rgba(246,245,242,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.film .titel b{font-weight:500;font-size:.95rem}
.filmreihe{display:flex;gap:clamp(12px,1.6vw,22px);align-items:center;justify-content:center;width:100%;height:100%;padding:0 20px}
.filmreihe .film{--fw:clamp(150px,15vw,250px)}
.filmreihe .film:nth-child(even){transform:translateY(-5%)}
@media (max-width:820px){.filmreihe .film{--fw:40vw}.filmreihe .film:nth-child(n+3){display:none}}
.win .inhalt video{width:100%;height:auto;display:block}

/* ---------- Wortliste mit Bühne ---------- */
.wortliste .info{position:sticky;top:12vh;display:grid;gap:18px}
.wort-buehne{position:relative;height:min(68vh,640px);border-radius:var(--r);background:var(--bg2);overflow:hidden}
.wort-buehne{display:grid;place-items:center}
.matrix{width:min(78%,440px);height:auto;overflow:visible}
.matrix circle{transition:r .55s var(--ease),fill .55s var(--ease),stroke .55s var(--ease);transition-delay:var(--v,0s)}
.matrix circle.voll{fill:var(--ink);stroke:transparent}
.matrix circle.akz{fill:var(--acc);stroke:transparent}
.matrix circle.leer{fill:transparent;stroke:#C4C3BE}
.matrix circle.akz{animation:puls 2.4s ease-in-out infinite}
@keyframes puls{50%{opacity:.35}}
.wort-buehne .ecke{z-index:2}
@media (max-width:820px){.wort-buehne{height:520px}.wortliste li{font-size:clamp(2.4rem,12vw,4rem)}}

/* ---------- Instrumente (Kennzahlen) ---------- */
.leiste{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border-top:0}
.leiste > div{background:var(--card);border-radius:var(--r);padding:24px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.leiste > div:nth-child(4){background:var(--night);color:var(--bg)}
.leiste > div:nth-child(4) .m{color:#77766f}
.leiste .zahl{font-size:clamp(3.2rem,5.4vw,5.6rem);font-variant-numeric:tabular-nums}
.leiste .viz{height:120px;display:flex;align-items:center}
.leiste .viz svg{height:120px;width:auto;max-width:100%;overflow:visible}
@media (max-width:1000px){.leiste{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.leiste{grid-template-columns:1fr}.leiste > div{min-height:250px}}

/* Bildwechsel in Fenstern (on.studio) */
.wechsel{position:relative}
.wechsel img{transition:opacity .8s var(--ease)}
.wechsel img:not(:first-child){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.wechsel img:not(.an){opacity:0}
.schiene.filme figure .film{--fw:clamp(220px,22vw,320px)}

/* ---------- Gefächerte Seiten (Branding-Kit) ---------- */
.kit-buehne{height:clamp(560px,58vw,820px);grid-template-rows:1fr auto;padding:60px 20px 28px}
.faecher{position:absolute;inset:60px 0 110px;display:grid;place-items:center;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.faecher.an{opacity:1}
.faecher img{grid-area:1/1;border-radius:10px;box-shadow:0 30px 60px -24px rgba(17,17,17,.4),0 2px 6px rgba(17,17,17,.08);transition:transform .9s var(--ease)}
.faecher.quer img{width:min(52%,620px);height:auto}
.faecher.hoch img{height:92%;width:auto}
.faecher img:nth-child(1){transform:translate(-34%,6%) rotate(-7deg)}
.faecher img:nth-child(2){transform:translate(34%,4%) rotate(6deg)}
.faecher img:nth-child(3){transform:translateY(-2%)}
.faecher:not(.an) img:nth-child(1),.faecher:not(.an) img:nth-child(2){transform:translate(0,4%) rotate(0)}
.kit-buehne .schalter{grid-row:2;justify-self:center;z-index:2}
@media (max-width:820px){.kit-buehne{height:520px}.faecher.quer img{width:72%}.faecher.hoch img{height:84%}}
.mitkarte .win{width:clamp(320px,46vw,660px)}
@media (max-width:820px){.mitkarte .win{width:90vw}}

/* ---------- Foto-Wechsel (NQ68) ---------- */
#merch{grid-template-rows:1fr auto;padding:44px 20px 28px;gap:18px;height:clamp(560px,60vw,880px)}
.fotos{position:relative;width:min(640px,86%);height:100%}
.fotos img{position:absolute;left:50%;top:50%;max-width:100%;max-height:100%;width:auto;height:auto;transform:translate(-50%,-50%) scale(.97);border-radius:18px;box-shadow:var(--shadow);opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.fotos img.an{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (max-width:820px){#merch{height:560px}}

/* ---------- Monatskalender (Kontakt), wie die Punktmatrix der Startseite ---------- */
.planer .kal.monat{grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.2vw,14px) 6px}
.planer .kal.monat button{width:min(100%,58px);background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint);color:var(--ink2)}
.planer .kal.monat button.vorbei{background:var(--ink);box-shadow:none;color:transparent;cursor:default}
.planer .kal.monat button.zu{background:transparent;box-shadow:none;color:var(--faint);cursor:default;transform:scale(.45);background:var(--faint)}
.planer .kal.monat button.aus{visibility:hidden}
.planer .kal.monat button:not(.vorbei):not(.zu):not(.aus):hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:scale(1.06)}
.planer .kal.monat button[aria-pressed="true"]{background:var(--acc);color:#fff;box-shadow:0 0 0 4px var(--card),0 0 0 5.5px var(--acc)}
.monat-wahl{display:flex;align-items:center;gap:10px}
.monat-wahl button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#fff,#EFEEEA);box-shadow:0 4px 10px -5px rgba(0,0,0,.3)}
.monat-wahl button:disabled{opacity:.3;cursor:default}
.monat-wahl svg{width:16px;height:16px}
.planer .kal.monat button:disabled:not(.aus){visibility:visible}

/* ---------- Wechselnde Panele (NOYRO: unsere Arbeit) ---------- */
#arbeit{height:clamp(560px,58vw,860px);grid-template-rows:1fr auto;padding:52px 20px 28px;gap:18px}
.panele{position:relative;width:100%;height:100%}
.panele > div{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.panele > div.an{opacity:1;pointer-events:auto}
#arbeit .schalter{z-index:3}

/* ---------- Befund · Analyse · Lösung ---------- */
.befunde{border-top:1px solid var(--ink)}
.befunde .kopfzeile{display:grid;grid-template-columns:70px 1fr 1fr 1.2fr;gap:var(--g);padding:16px 0;border-bottom:1px solid var(--line)}
.befund{display:grid;grid-template-columns:70px 1fr 1fr 1.2fr;gap:var(--g);padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.befund .nr{font-family:var(--m);font-size:.8rem;color:var(--mute);padding-top:6px}
.befund .problem{font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink2)}
.befund .problem::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--acc);margin-right:10px;vertical-align:middle;transform:translateY(-2px)}
.befund .analyse{font-family:var(--m);font-size:.8rem;line-height:1.6;color:var(--mute);letter-spacing:.01em}
.befund .loesung{font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.25;letter-spacing:-.02em;font-weight:500;color:var(--ink);position:relative;padding-left:34px}
.befund .loesung::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:50%;background:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9E8E4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}
@media (max-width:900px){
  .befunde .kopfzeile{display:none}
  .befund{grid-template-columns:40px 1fr;row-gap:14px}
  .befund .analyse,.befund .loesung{grid-column:2}
}

/* ---------- Ergebnis: vorher, nachher ---------- */
.ergebnis{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.erg{background:var(--card);border-radius:var(--r);padding:clamp(22px,2.6vw,34px);min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.erg.dunkel{background:var(--night);color:var(--bg)}
.erg.dunkel .m{color:#77766f}
.erg .vorher{display:flex;align-items:baseline;gap:12px;font-size:clamp(1.4rem,2.2vw,2.2rem);letter-spacing:-.03em;color:var(--faint)}
.erg.dunkel .vorher{color:#5d5c58}
.erg .vorher s{text-decoration-thickness:2px}
.erg .nachher{font-size:clamp(3.6rem,7.4vw,8rem);line-height:.85;letter-spacing:-.06em;font-weight:400;font-variant-numeric:tabular-nums}
.erg .nachher em{font-style:normal;color:var(--acc)}
.erg .nachher small{font-size:.32em;letter-spacing:-.02em;margin-left:.12em}
.erg p.text{max-width:34ch;opacity:.85}
.erg .pfeil{display:inline-block;width:22px;height:2px;background:currentColor;position:relative;transform:translateY(-6px)}
.erg .pfeil::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid currentColor;border-right:0}
@media (max-width:900px){.ergebnis{grid-template-columns:1fr}.erg{min-height:0}}
.erg.dunkel p.text{color:#B8B7B1;opacity:1}

/* ---------- Was wir bauen · Option A: Drehregler mit Display ---------- */
.wb-regler{display:grid;grid-template-rows:1fr auto;place-items:center;padding:56px 28px 28px;gap:24px}
.regler{position:relative;width:min(78%,380px);aspect-ratio:1}
.regler .skala{position:absolute;inset:0}
.regler .skala span{position:absolute;left:50%;top:50%;font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap;transition:color .4s}
.regler .skala span.an{color:var(--ink)}
.regler .skala i{position:absolute;left:50%;top:50%;width:2px;height:10px;margin-left:-1px;background:var(--faint);border-radius:2px}
.regler .knopf{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF 0%,#F2F1ED 38%,#D9D8D3 100%);box-shadow:0 30px 50px -20px rgba(17,17,17,.45),0 6px 12px -4px rgba(17,17,17,.2),inset 0 -6px 12px rgba(0,0,0,.08),inset 0 2px 0 rgba(255,255,255,.9);transition:transform 1s cubic-bezier(.3,1.4,.4,1)}
.regler .knopf::before{content:"";position:absolute;inset:14%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(0,0,0,.035) 0 2deg,transparent 2deg 6deg);box-shadow:inset 0 2px 6px rgba(0,0,0,.08)}
.regler .knopf::after{content:"";position:absolute;left:50%;top:8%;width:6px;height:22%;margin-left:-3px;border-radius:3px;background:var(--acc)}
.display{width:min(100%,520px);border-radius:18px;background:#141413;color:#E9E8E4;padding:18px 20px;box-shadow:inset 0 2px 10px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.6)}
.display .kopf-d{display:flex;justify-content:space-between;font-family:var(--m);font-size:.62rem;letter-spacing:.1em;color:#77766f;text-transform:uppercase;margin-bottom:10px}
.display .stack{display:flex;flex-wrap:wrap;gap:8px;min-height:64px;align-content:flex-start}
.display .stack span{font-family:var(--m);font-size:.78rem;letter-spacing:.04em;padding:6px 10px;border-radius:8px;background:#232322;color:#E9E8E4;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.display .stack span.da{opacity:1;transform:none}
.display .stack span:first-child{background:var(--acc);color:#fff}

/* ---------- Was wir bauen · Option B: Tastatur ---------- */
.wb-tasten{display:grid;place-items:center;padding:56px 22px 26px}
.tastatur{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px);width:min(100%,560px);padding:clamp(14px,1.6vw,22px);border-radius:26px;background:linear-gradient(#CFCEC9,#D9D8D3);box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.7)}
.taste{position:relative;aspect-ratio:1.6;border-radius:14px;background:linear-gradient(#FFFFFF,#EEEDE9);box-shadow:0 7px 0 #BEBDB8,0 9px 14px -4px rgba(0,0,0,.28),inset 0 1px 0 #fff;display:flex;align-items:flex-end;padding:9px 10px;font-family:var(--m);font-size:clamp(.56rem,.8vw,.7rem);letter-spacing:.03em;color:var(--mute);transition:transform .25s var(--ease),box-shadow .25s var(--ease),color .25s,background .25s}
.taste::after{content:"";position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:#D3D2CD;transition:background .25s,box-shadow .25s}
.taste.an{transform:translateY(5px);box-shadow:0 2px 0 #BEBDB8,0 3px 6px -2px rgba(0,0,0,.25),inset 0 1px 0 #fff;color:var(--ink)}
.taste.an::after{background:var(--acc);box-shadow:0 0 0 3px rgba(240,90,40,.18)}
.taste.dunkel{background:linear-gradient(#2A2A29,#1A1A19);color:#8f8e88;box-shadow:0 7px 0 #0b0b0b,0 9px 14px -4px rgba(0,0,0,.35),inset 0 1px 0 #3a3a39}
.taste.dunkel.an{color:#fff;box-shadow:0 2px 0 #0b0b0b,0 3px 6px -2px rgba(0,0,0,.3),inset 0 1px 0 #3a3a39}

/* ---------- SATZ Duo ---------- */
.duo-feld{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:stretch}
.duo-weiss{background:#fff;min-height:clamp(320px,38vw,620px)}
.duo-weiss video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.duo-film{--fw:clamp(220px,22vw,340px);height:auto}
.duo-text{display:grid;grid-template-columns:2fr 1fr;gap:var(--g);margin-top:clamp(26px,3vw,44px);align-items:end}
@media (max-width:900px){.duo-feld,.duo-text{grid-template-columns:1fr}.duo-film{--fw:62vw;justify-self:center}.duo-weiss{min-height:56vw}}

/* ---------- Was wir bauen · Option C: Code-Editor ---------- */
.wb-code{display:grid;place-items:center;padding:56px 20px 24px}
.editor{width:min(100%,600px);border-radius:16px;background:#151514;box-shadow:var(--shadow);overflow:hidden}
.editor .leiste-e{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#1E1E1D;border-bottom:1px solid #2a2a29}
.editor .leiste-e i{width:11px;height:11px;border-radius:50%;background:#3a3a39}
.editor .leiste-e span{margin-left:10px;font-family:var(--m);font-size:.66rem;letter-spacing:.06em;color:#8f8e88}
.editor pre{margin:0;padding:20px 18px 22px;min-height:250px;font-family:var(--m);font-size:clamp(.7rem,.95vw,.84rem);line-height:1.75;color:#D8D7D2;white-space:pre-wrap;word-break:break-word;counter-reset:z}
.editor pre .z{display:block;padding-left:2.6em;position:relative}
.editor pre .z::before{counter-increment:z;content:counter(z);position:absolute;left:0;width:1.6em;text-align:right;color:#4a4a48}
.editor .k{color:#F05A28}.editor .s{color:#A9C5A0}.editor .c{color:#6f6e69}.editor .t{color:#E9E8E4;font-weight:500}
.editor .cursor{display:inline-block;width:.6em;height:1.1em;background:#F05A28;vertical-align:-2px;animation:blinken 1s steps(1) infinite}
@keyframes blinken{50%{opacity:0}}

/* ---------- Option D: Bauplan ---------- */
.wb-plan{display:grid;place-items:center;padding:56px 20px 24px;background-color:#DCDBD6;background-image:linear-gradient(rgba(17,17,17,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.07) 1px,transparent 1px);background-size:24px 24px}
.wb-plan svg{width:min(92%,560px);height:auto;overflow:visible}
.wb-plan svg .linie{fill:none;stroke:#111;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.wb-plan svg .linie.akz{stroke:#F05A28;stroke-width:2}
.wb-plan svg .linie.fein{stroke:rgba(17,17,17,.35);stroke-width:1}
.wb-plan svg .linie.da{stroke-dashoffset:0}
.wb-plan svg text{font-family:var(--m);font-size:9px;letter-spacing:.08em;fill:#8C8B86;opacity:0;transition:opacity .6s .8s}
.wb-plan svg text.da{opacity:1}

/* ---------- Option E: Fallblattanzeige ---------- */
.wb-fall{display:grid;place-items:center;padding:56px 18px 24px}
.tafel-f{width:min(100%,600px);border-radius:20px;background:#121211;padding:clamp(16px,2vw,26px);box-shadow:var(--shadow);display:grid;gap:12px}
.tafel-f .kopf-f{display:flex;justify-content:space-between;font-family:var(--m);font-size:.62rem;letter-spacing:.1em;color:#77766f;text-transform:uppercase}
.tafel-f .reihe-f{display:grid;grid-template-columns:repeat(18,1fr);gap:3px}
.klappe{position:relative;aspect-ratio:.72;border-radius:4px;background:linear-gradient(#262625 0 49.4%,#0d0d0c 49.4% 50.6%,#1f1f1e 50.6%);display:grid;place-items:center;font-family:var(--m);font-weight:500;font-size:clamp(.72rem,1.6vw,1.25rem);color:#ECEBE6;overflow:hidden}
.klappe.akz{color:#F05A28}
.klappe.flip{animation:flip .09s linear}
@keyframes flip{0%{transform:scaleY(1)}50%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.tafel-f .fuss-f{display:flex;gap:6px;flex-wrap:wrap}
.tafel-f .fuss-f span{font-family:var(--m);font-size:.62rem;letter-spacing:.08em;color:#5d5c58;padding:4px 8px;border-radius:6px;background:#1c1c1b}
.tafel-f .fuss-f span.an{color:#fff;background:#F05A28}
@media (max-width:640px){.wb-tasten{padding:50px 12px 20px}.tastatur{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:12px}.taste{font-size:.56rem;padding:7px;border-radius:11px}}

/* ===== Was wir bauen · Fassung 1: Werkbank ===== */
.was-werkbank{background:var(--night);color:var(--bg);border-radius:var(--r);margin:0 var(--g) clamp(70px,10vw,150px);padding-bottom:clamp(36px,4.5vw,64px)}
.was-werkbank .kopf .m{color:#77766f}
.was-werkbank .h2 .grau{color:#55544f}
.werkbank{display:grid;grid-template-columns:240px 1.25fr 1fr;border-radius:18px;overflow:hidden;background:#151514;box-shadow:inset 0 0 0 1px #262625;min-height:440px}
.wb-dateien{border-right:1px solid #262625;padding:14px 10px;display:grid;align-content:start;gap:4px}
.wb-dateien .m{color:#5d5c58;padding:4px 10px 10px}
.wb-dateien button{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;text-align:left;padding:10px;border-radius:10px;color:#9a9993;transition:background .25s,color .25s}
.wb-dateien button i{grid-row:span 2;width:8px;height:8px;border-radius:50%;background:#3a3a39}
.wb-dateien button b{font-weight:500;font-size:1rem;color:inherit}
.wb-dateien button small{font-family:var(--m);font-size:.64rem;letter-spacing:.04em;color:#5d5c58}
.wb-dateien button.an{background:#21211F;color:#fff}
.wb-dateien button.an i{background:var(--acc)}
.wb-mitte{border-right:1px solid #262625;display:flex;flex-direction:column}
.wb-mitte .leiste-e{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-bottom:1px solid #262625}
.wb-mitte .leiste-e i{width:11px;height:11px;border-radius:50%;background:#3a3a39}
.wb-mitte .leiste-e span{margin-left:10px;font-family:var(--m);font-size:.68rem;color:#9a9993;padding:5px 10px;border-radius:7px;background:#21211F}
.wb-mitte pre{flex:1;margin:0;padding:22px 20px;font-family:var(--m);font-size:clamp(.72rem,.95vw,.86rem);line-height:1.8;color:#D8D7D2;white-space:pre-wrap;word-break:break-word;counter-reset:z}
.wb-mitte pre .z{display:block;padding-left:2.6em;position:relative}
.wb-mitte pre .z::before{counter-increment:z;content:counter(z);position:absolute;left:0;width:1.6em;text-align:right;color:#4a4a48}
.wb-mitte .k{color:#F05A28}.wb-mitte .s{color:#A9C5A0}.wb-mitte .c{color:#6f6e69}.wb-mitte .t{color:#fff;font-weight:500}
.wb-mitte .cursor{display:inline-block;width:.6em;height:1.1em;background:#F05A28;vertical-align:-2px;animation:blinken 1s steps(1) infinite}
.wb-mitte .status-e{display:flex;justify-content:space-between;padding:10px 16px;border-top:1px solid #262625;font-family:var(--m);font-size:.62rem;letter-spacing:.06em;color:#5d5c58}
.wb-rechts{padding:18px;display:grid;grid-template-rows:auto 1fr auto;gap:14px}
.wb-rechts .m{color:#5d5c58}
.wb-ergebnis{border-radius:14px;background:var(--bg);color:var(--ink);display:grid;place-items:center;padding:18px;min-height:240px;position:relative;overflow:hidden}
.wb-stack{display:flex;flex-wrap:wrap;gap:6px}
.wb-stack span{font-family:var(--m);font-size:.66rem;padding:5px 9px;border-radius:7px;background:#21211F;color:#C9C8C3}
/* Ergebnisse */
.erg-tab{width:100%;font-size:.86rem;border-collapse:collapse}
.erg-tab td{padding:7px 4px;border-bottom:1px solid var(--line)}
.erg-tab td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.erg-sorte{display:flex;gap:6px;margin-bottom:10px}
.erg-sorte span{font-family:var(--m);font-size:.62rem;padding:5px 9px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);transition:all .3s}
.erg-sorte span.an{background:var(--ink);color:var(--bg)}
.erg-ring{width:150px;height:150px;position:relative;display:grid;place-items:center}
.erg-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.erg-ring b{font-size:2.3rem;font-weight:400;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.erg-json{font-family:var(--m);font-size:.78rem;line-height:1.7;width:100%}
.erg-json .s{color:#5f7f57}.erg-json .k{color:var(--acc)}
.erg-farben{display:grid;gap:12px;width:100%}
.erg-farben .reihe-c{display:flex;gap:10px}
.erg-farben .reihe-c span{flex:1;height:64px;border-radius:12px;display:flex;align-items:flex-end;padding:8px;font-family:var(--m);font-size:.58rem}
.erg-farben b{font-size:2.6rem;font-weight:500;letter-spacing:-.04em}
.erg-video{width:100%;aspect-ratio:16/10;border-radius:12px;background:#d9d8d3;display:grid;place-items:center;position:relative}
.erg-video .knopf-v{width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:1rem}
.erg-video .lade{position:absolute;left:12px;right:12px;bottom:12px;height:4px;border-radius:2px;background:rgba(17,17,17,.12);overflow:hidden}
.erg-video .lade i{display:block;height:100%;width:0;background:var(--acc);transition:width 1.6s var(--ease)}
.erg-video .info{position:absolute;top:12px;left:12px;font-family:var(--m);font-size:.62rem;color:var(--ink2)}
@media (max-width:1000px){.werkbank{grid-template-columns:1fr}.wb-dateien{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;border-right:0;border-bottom:1px solid #262625}.wb-dateien .m{display:none}.wb-mitte{border-right:0}.wb-mitte pre{min-height:230px}}

/* ===== Fassung 2: Module ===== */
.module{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:12px;border-radius:30px;background:linear-gradient(#D6D5D0,#DEDDD8);box-shadow:inset 0 2px 8px rgba(0,0,0,.12),0 1px 0 rgba(255,255,255,.7)}
.modul{position:relative;border-radius:20px;background:linear-gradient(#F8F7F4,#EFEEEA);box-shadow:0 10px 0 #CFCEC9,0 14px 24px -10px rgba(0,0,0,.3),inset 0 1px 0 #fff;padding:20px 18px 18px;display:flex;flex-direction:column;gap:16px;min-height:440px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s}
.modul .kopf-mod{display:flex;justify-content:space-between;align-items:center}
.modul .led{width:10px;height:10px;border-radius:50%;background:#CFCEC9;box-shadow:inset 0 1px 2px rgba(0,0,0,.2);transition:background .3s,box-shadow .3s}
.modul h3{font-size:clamp(1.6rem,2.3vw,2.4rem);font-weight:500;letter-spacing:-.045em;line-height:1}
.modul .lcd{border-radius:12px;background:var(--night);box-shadow:inset 0 2px 8px rgba(0,0,0,.5),0 1px 0 #fff;padding:12px 14px 14px;display:grid;gap:18px;min-height:104px;align-content:space-between}
.modul .lcd span{font-family:var(--m);font-size:.62rem;letter-spacing:.04em;color:#77766f;display:flex;align-items:center;gap:3px}
.modul .lcd em{display:inline-block;width:6px;height:11px;background:#77766f;opacity:0}
.modul .lcd b{font-size:clamp(1.25rem,1.7vw,1.7rem);font-weight:500;letter-spacing:-.03em;line-height:1;color:#5d5c58;transition:color .4s}
.modul .chips-m{display:flex;flex-wrap:wrap;gap:5px}
.modul .chips-m span{font-family:var(--m);font-size:.6rem;padding:4px 8px;border-radius:6px;background:#E6E5E1;color:var(--ink2)}
.modul .beleg{margin-top:auto;border-top:1px dashed var(--faint);padding-top:12px;display:grid;gap:4px}
.modul .beleg b{font-size:1.3rem;font-weight:500;letter-spacing:-.03em}
.modul.an{transform:translateY(8px);box-shadow:0 2px 0 #CFCEC9,0 6px 14px -8px rgba(0,0,0,.3),inset 0 1px 0 #fff;background:#fff}
.modul.an .led{background:var(--acc);box-shadow:0 0 0 4px rgba(240,90,40,.18)}
.modul.an .lcd b{color:var(--acc)}.modul.an .lcd em{animation:blinken 1s steps(1) infinite}
@media (max-width:1000px){.module{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.modul{scroll-snap-align:center;min-height:400px}}

/* ===== Fassung 3: Datenblatt ===== */
.datenblatt{border-top:2px solid var(--ink)}
.datenblatt .kz{display:grid;grid-template-columns:60px 1.1fr 1.2fr 1.2fr 1fr;gap:var(--g);padding:14px 0;border-bottom:1px solid var(--ink)}
.dbz{display:grid;grid-template-columns:60px 1.1fr 1.2fr 1.2fr 1fr;gap:var(--g);padding:26px 0;border-bottom:1px solid var(--line);align-items:center;position:relative;transition:background .35s,padding .35s var(--ease);cursor:default}
.dbz::before{content:"";position:absolute;left:-26px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--acc);transform:translateY(-50%) scale(0);transition:transform .35s var(--ease)}
.dbz .nr{font-family:var(--m);font-size:.78rem;color:var(--mute)}
.dbz h3{font-size:clamp(2rem,4.4vw,4.6rem);font-weight:500;letter-spacing:-.05em;line-height:.95;color:var(--faint);transition:color .35s}
.dbz .stk{font-family:var(--m);font-size:.74rem;line-height:1.7;color:var(--ink2)}
.dbz .lie{font-size:1.05rem;color:var(--ink2)}
.dbz .dbe{display:grid;gap:4px;justify-items:end;text-align:right}
.dbz .dbe b{font-size:clamp(1.5rem,2.4vw,2.4rem);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--faint);transition:color .35s}
.dbz .dbe a{font-family:var(--m);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.dbz{isolation:isolate}.dbz::after{content:"";position:absolute;inset:-1px -14px 0;border-radius:14px;background:var(--card);z-index:-1;opacity:0;transition:opacity .35s}.dbz.an::after{opacity:1}
.dbz.an::before{transform:translateY(-50%) scale(1)}
.dbz.an h3{color:var(--ink)}
.dbz.an .dbe b{color:var(--acc)}
.dbz .zeile-mini{grid-column:2/-1;height:0;overflow:hidden;transition:height .45s var(--ease)}
@media (max-width:900px){.datenblatt .kz{display:none}.dbz{grid-template-columns:36px 1fr;row-gap:10px}.dbz .stk,.dbz .lie,.dbz .dbe{grid-column:2}.dbz .dbe{justify-items:start;text-align:left}.dbz h3{color:var(--ink)}}

/* Bedienung der Hero-Bühne (Startseite: Schieberegler) */
.bd{width:100%;max-width:540px;justify-self:center;position:relative}
.bd [data-stufe]:not(.an){display:none}
.bd button{cursor:pointer}
.bd-cap{display:flex;align-items:center;gap:12px;min-width:0}
.bd-cap b{font-weight:500;font-size:1.05rem;letter-spacing:-.01em;display:block}
.bd .fort{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(0)}
.bd.lauf .fort{animation:fort 4.2s linear both}
@keyframes fort{to{transform:scaleX(1)}}
@keyframes tippen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* 1 Drehregler */
.bd-dreh{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:22px}
.dreh{position:relative;width:200px;height:150px}
.dreh svg{position:absolute;inset:0;width:100%;height:100%}
.dreh svg line{stroke:#A3A29D;stroke-width:1.2;stroke-linecap:round}
.dreh svg line.gross{stroke:var(--ink);stroke-width:1.8}
.dreh .marke-w{position:absolute;left:50%;top:97px;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-84px) rotate(calc(var(--a) * -1));font-family:var(--m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:4px 6px;white-space:nowrap;transition:color .3s}
.dreh .marke-w.an{color:var(--ink)}
.drehknopf{position:absolute;left:50%;top:97px;width:98px;height:98px;margin:-49px 0 0 -49px;border-radius:50%;background:repeating-conic-gradient(#EFEEEA 0 3deg,#CFCEC9 3deg 6deg);box-shadow:0 16px 26px -10px rgba(0,0,0,.4),0 3px 0 #BDBCB7,inset 0 1px 0 #fff;transform:rotate(calc((var(--i, 0) - 1) * 52deg));transition:transform .75s cubic-bezier(.34,1.56,.64,1)}
.drehknopf::before{content:"";position:absolute;inset:12px;border-radius:50%;background:linear-gradient(160deg,#FFFFFF,#E5E4E0);box-shadow:inset 0 -3px 6px rgba(0,0,0,.08),0 2px 3px rgba(0,0,0,.18)}
.drehknopf i{position:absolute;left:50%;top:17px;width:3px;height:24px;margin-left:-1.5px;border-radius:2px;background:var(--acc);box-shadow:0 0 8px rgba(240,90,40,.5)}
.bd-dreh .unter{display:grid;gap:16px;border-left:1px solid var(--line);padding-left:22px}
@media (max-width:560px){.bd-dreh{grid-template-columns:1fr;justify-items:center;gap:8px}.bd-dreh .unter{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px;width:100%}}

/* 2 Tasten */
.bd-tasten{display:grid;gap:12px;max-width:500px}
.bd-tasten .tray{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px 10px 16px;border-radius:24px;background:linear-gradient(#D6D5D0,#E2E1DD);box-shadow:inset 0 2px 6px rgba(0,0,0,.16),0 1px 0 rgba(255,255,255,.7)}
.bd-taste{height:86px;border-radius:14px;padding:11px 12px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;background:linear-gradient(#FFFFFF,#F0EFEB);box-shadow:0 6px 0 #C9C8C3,0 10px 16px -8px rgba(0,0,0,.35),inset 0 1px 0 #fff;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.bd-taste .kopf-t{display:flex;justify-content:space-between;align-items:center;font-family:var(--m);font-size:.58rem;color:var(--mute)}
.bd-taste .led{width:8px;height:8px;border-radius:50%;background:#CFCEC9;box-shadow:inset 0 1px 2px rgba(0,0,0,.2);transition:background .2s,box-shadow .2s}
.bd-taste b{font-family:var(--m);font-weight:400;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);transition:color .2s}
.bd-taste.an{transform:translateY(5px);box-shadow:0 1px 0 #C9C8C3,0 3px 6px -3px rgba(0,0,0,.3),inset 0 1px 0 #fff}
.bd-taste.an .led{background:var(--acc);box-shadow:0 0 0 3px rgba(240,90,40,.2),0 0 10px rgba(240,90,40,.6)}
.bd-taste.an b{color:var(--ink)}
.bd-tasten .anzeige{position:relative;background:var(--night);color:var(--bg);border-radius:16px;padding:12px 16px 16px;box-shadow:inset 0 2px 8px rgba(0,0,0,.5),0 1px 0 #fff;overflow:hidden;display:grid;gap:10px}
.bd-tasten .anzeige .zeile{display:flex;justify-content:space-between;font-family:var(--m);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:#6f6e69}
.bd-tasten .anzeige a{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bd-tasten .anzeige b{font-weight:500;font-size:1.15rem;letter-spacing:-.01em;display:block;animation:tippen .6s steps(14) both}
.bd-tasten .anzeige a .m{color:#8a8984;display:block;margin-top:4px;animation:tippen .6s .35s steps(20) both}
.bd-tasten .pfeil{flex:none;width:38px;height:38px;border-radius:50%;background:#262625;display:grid;place-items:center;color:var(--bg);transition:background .3s}
.bd-tasten .pfeil svg{width:15px;height:15px}
.bd-tasten .anzeige a:hover .pfeil{background:var(--acc)}

/* 3 Schieberegler */
.bd-fader{display:grid;gap:14px;max-width:520px}
.fader{position:relative;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:grab;padding-top:4px}
.fader.zieht{cursor:grabbing}
.fader .skala{height:10px;margin:0 2px 10px;background:repeating-linear-gradient(90deg,#A9A8A3 0 1px,transparent 1px 12px);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fader .spur{position:relative;height:16px;border-radius:99px;background:linear-gradient(#0d0d0d,#232322);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 1px 0 #fff}
.fader .spur::before{content:"";position:absolute;left:8px;top:7px;height:2px;border-radius:2px;width:calc((var(--i, 0) * 2 + 1) / 6 * 100% - 8px);background:var(--acc);box-shadow:0 0 8px rgba(240,90,40,.6);transition:width .6s var(--ease)}
.fader .kappe{position:absolute;top:50%;left:calc((var(--i, 0) * 2 + 1) / 6 * 100%);width:60px;height:42px;transform:translate(-50%,-50%);border-radius:11px;background:linear-gradient(90deg,transparent 28px,var(--acc) 28px 32px,transparent 32px),repeating-linear-gradient(90deg,#F8F7F4 0 3px,#D8D7D2 3px 5px);box-shadow:0 10px 16px -6px rgba(0,0,0,.45),0 3px 0 #B9B8B3,inset 0 1px 0 #fff;transition:left .6s var(--ease)}
.fader .marken{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px}
.fader .marken button{font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);display:grid;justify-items:center;gap:8px;transition:color .3s}
.fader .marken button::before{content:"";width:1px;height:10px;background:var(--ink2)}
.fader .marken button.an{color:var(--ink)}
.bd-fader .unter{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:14px}

/* 4 Senderwahl */
.bd-sender{display:grid;gap:14px;max-width:540px}
.sender-reihe{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.rund{width:46px;height:46px;border-radius:50%;background:linear-gradient(#FFFFFF,#ECEBE7);box-shadow:0 5px 0 #C9C8C3,0 9px 14px -6px rgba(0,0,0,.35),inset 0 1px 0 #fff;display:grid;place-items:center;color:var(--ink);transition:transform .15s,box-shadow .15s}
.rund:active{transform:translateY(4px);box-shadow:0 1px 0 #C9C8C3,inset 0 1px 0 #fff}
.rund svg{width:16px;height:16px}
.sender-fenster{position:relative;height:108px;border-radius:16px;background:linear-gradient(#1b1b1a,#111);box-shadow:inset 0 2px 10px rgba(0,0,0,.7),0 1px 0 #fff;overflow:hidden;color:var(--bg)}
.sender-fenster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%);pointer-events:none}
.sender-fenster .skala{position:absolute;left:12px;right:12px;top:16px;height:30px;background:linear-gradient(transparent 0 16px,#0000 16px),repeating-linear-gradient(90deg,#4a4a47 0 1px,transparent 1px 9px);-webkit-mask:linear-gradient(#000 0 14px,transparent 14px);mask:linear-gradient(#000 0 14px,transparent 14px)}
.sender-fenster .marken{position:absolute;left:0;right:0;top:40px;display:grid;grid-template-columns:repeat(3,1fr)}
.sender-fenster .marken button{font-family:var(--m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#6a6964;display:grid;justify-items:center;gap:6px;padding:4px 0;transition:color .3s}
.sender-fenster .marken button small{font-size:1.15rem;letter-spacing:-.02em;font-family:var(--s, inherit);color:#4d4c48;transition:color .3s}
.sender-fenster .marken button.an,.sender-fenster .marken button.an small{color:var(--bg)}
.nadel{position:absolute;top:10px;height:30px;width:2px;margin-left:-1px;left:calc((var(--i, 0) * 2 + 1) / 6 * 100%);background:var(--acc);border-radius:2px;box-shadow:0 0 12px 2px rgba(240,90,40,.55);transition:left .85s cubic-bezier(.34,1.3,.64,1);z-index:1}
.bd-sender .unter{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:14px}
.bd-sender .kanal{font-family:var(--m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:right;white-space:nowrap}
@media (max-width:560px){.rund{width:40px;height:40px}.sender-reihe{gap:8px}.bd-sender .kanal,.bd-fader .unter>.m{display:none}}

/* Studio-Seite */
.st-portrait{display:block;padding:0!important;background:#2b2926}
.st-portrait > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 24%;transform-origin:50% 30%;animation:st-zoom 24s ease-in-out infinite alternate}
@keyframes st-zoom{to{transform:scale(1.07)}}
.st-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.28),transparent 22%,transparent 60%,rgba(0,0,0,.35));pointer-events:none}
.st-portrait .ecke{z-index:2;color:rgba(255,255,255,.72)!important}
.st-glas{position:absolute;z-index:3;left:16px;right:16px;bottom:16px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:16px 16px 16px 22px;border-radius:22px;background:rgba(246,245,242,.82);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 20px 40px -20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.7)}
.st-name{font-size:clamp(1.3rem,1.8vw,1.7rem);font-weight:500;letter-spacing:-.035em;line-height:1;margin-bottom:8px}
.st-anzeige{display:grid;gap:8px;justify-items:end;background:var(--night);color:var(--bg);border-radius:14px;padding:12px 16px;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.st-uhr{font-family:var(--m);font-size:clamp(1.1rem,1.5vw,1.45rem);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--bg)}
.st-status{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#a9a8a3}
.st-led{width:8px;height:8px;border-radius:50%;background:#58B368;box-shadow:0 0 0 3px rgba(88,179,104,.2),0 0 10px rgba(88,179,104,.6);flex:none;animation:st-puls 2.4s ease-in-out infinite}
.st-led.aus{background:var(--acc);box-shadow:0 0 0 3px rgba(240,90,40,.2);animation:none}
@keyframes st-puls{50%{box-shadow:0 0 0 6px rgba(88,179,104,.06),0 0 4px rgba(88,179,104,.3)}}

.st-wahl{display:grid;gap:14px;justify-items:end}
.st-ablauf{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:30px}
.st-spur{position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px;background:var(--bg2);box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.st-spur i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--s,0) * 25%);border-radius:4px;background:var(--acc);box-shadow:0 0 10px rgba(240,90,40,.5);transition:width .9s var(--ease)}
.st-schritt{background:var(--card);border-radius:var(--r);padding:24px;min-height:340px;display:flex;flex-direction:column;gap:26px;transform:translateY(10px);transition:transform .6s var(--ease),background .6s,box-shadow .6s}
.st-schritt > *{transition:opacity .6s}.st-schritt:not(.an) > *{opacity:.3}
.st-schritt.an{opacity:1;transform:none;background:#fff;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.st-schritt .st-kopf{display:flex;justify-content:space-between;align-items:center}
.st-schritt .st-led{animation:none;background:#CFCEC9;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.st-schritt.an .st-led{background:var(--acc);box-shadow:0 0 0 3px rgba(240,90,40,.2),0 0 10px rgba(240,90,40,.6)}
.st-schritt p:not(.m){font-size:clamp(1.1rem,1.5vw,1.45rem);line-height:1.25;letter-spacing:-.02em}
.st-schritt p.st-mono{font-family:var(--m);font-size:.82rem;line-height:1.65;letter-spacing:.01em;color:var(--ink2)}
.st-schritt.st-ziel{background:var(--night);color:var(--bg);justify-content:space-between}
.st-schritt.st-ziel.an{background:var(--night)}
.st-schritt.st-ziel .m{color:#77766f}
.st-erg{font-size:clamp(2.1rem,3.3vw,3.5rem)!important;line-height:.95!important;letter-spacing:-.05em!important;font-weight:500;color:var(--acc);margin-bottom:12px}
.st-link{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.95rem}
.st-tippe{animation:st-auf .8s var(--ease) both}
@keyframes st-auf{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

.st-kette{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.st-glied{display:grid;gap:6px;align-content:start}
.st-feld{aspect-ratio:.72;margin-bottom:12px;container-type:size;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.st-glied:hover .st-feld{transform:translateY(-6px);box-shadow:0 24px 40px -26px rgba(0,0,0,.4)}
.st-feld .phone{--w:min(56cqw,40cqh);margin-top:6%}
.st-feld .ecke{z-index:2}
.st-lampe{position:absolute;top:22px;right:22px;width:8px;height:8px;border-radius:50%;background:#C9C8C3;box-shadow:inset 0 1px 2px rgba(0,0,0,.2);transition:background .4s,box-shadow .4s;z-index:2}
.st-glied.an .st-lampe{background:var(--acc);box-shadow:0 0 0 3px rgba(240,90,40,.2),0 0 10px rgba(240,90,40,.6)}
.st-tag{position:relative;width:52cqw;aspect-ratio:.58;margin-top:4%;border-radius:12px;background:linear-gradient(160deg,#F7F4EC,#ECE7DB);box-shadow:0 26px 40px -18px rgba(0,0,0,.35),inset 0 1px 0 #fff;display:grid;place-items:center;padding:22% 14% 16%;transform-origin:50% 7%;animation:st-pendel 5s ease-in-out infinite}
.st-tag i{position:absolute;top:5%;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--bg2);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.st-tag i::before{content:"";position:absolute;left:5px;bottom:10px;width:2px;height:28cqh;background:linear-gradient(#8b867a,#b8b2a4);border-radius:2px}
.st-tag img{width:100%;height:auto}
.st-tag span{position:absolute;bottom:7%;font-family:var(--m);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:#8d887c}
@keyframes st-pendel{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.st-win{position:absolute;left:12%;top:20%;width:200%;transition:transform .8s var(--ease)}
.st-glied:hover .st-win{transform:translateX(-10%)}
.st-glied b{font-weight:500;font-size:1.2rem;letter-spacing:-.02em}

.st-haltung span{color:var(--faint);transition:color .35s}
.st-haltung span.da{color:var(--ink)}

.st-termin{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--g);align-items:end;background:var(--bg2);border-radius:var(--r);padding:clamp(26px,3.4vw,48px)}
.st-termin-rechts{display:grid;gap:18px;justify-items:end}
.st-termin .st-status{border:0;padding:0;color:var(--ink2)}

@media (max-width:1000px){
  .st-ablauf{grid-template-columns:1fr 1fr}
  .st-kette{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--g) * -1);padding:0 var(--g) 20px}
  .st-glied{scroll-snap-align:start}
}
@media (max-width:820px){
  .st-hero .st-portrait{min-height:560px}.st-hero .unten{flex-direction:column;align-items:flex-start}.st-hero .unten .m{text-align:left!important}.st-glas{grid-template-columns:1fr}.st-anzeige{grid-auto-flow:column;justify-content:space-between;align-items:center}
  .st-wahl{justify-items:start}
  .st-ablauf{grid-template-columns:1fr}
  .st-schritt{min-height:0}
  .st-termin{grid-template-columns:1fr;align-items:start}.st-termin-rechts{justify-items:start}
}
.kopf .st-wahl{justify-self:end}@media (max-width:820px){.kopf .st-wahl{justify-self:start}}

/* Studio: KI */
.st-ki-sec{background:var(--night);color:var(--bg);border-radius:var(--r);margin:0 var(--g) clamp(70px,10vw,150px)}
.st-ki-sec .h2 .grau{color:#55544f}.st-ki-sec .kopf .m{color:#77766f}
.st-ki{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,3vw,48px);align-items:stretch}
.st-ki-demo{background:#191918;border-radius:20px;box-shadow:inset 0 0 0 1px #2a2a29;padding:18px;display:grid;gap:16px;grid-template-rows:auto auto 1fr}
.st-ki-kopf{display:flex;justify-content:space-between}.st-ki-kopf .m{color:#6f6e69}
.st-ki-band{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.st-ki-band span{position:relative;font-family:var(--m);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#6a6964;padding:10px 10px 10px 24px;border-radius:10px;background:#212120;transition:color .4s,background .4s}
.st-ki-band span::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#3a3a38;transition:background .4s,box-shadow .4s}
.st-ki-band span.an{color:var(--bg);background:#2a2a28}
.st-ki-band span.an::before{background:var(--acc);box-shadow:0 0 8px rgba(240,90,40,.8)}
.st-ki-flaeche{display:grid;grid-template-columns:.9fr 1fr;gap:16px;align-items:center}
.st-etikett{position:relative;overflow:hidden;background:#FBFAF6;color:#111;border-radius:6px;padding:16px 16px 14px;box-shadow:0 20px 40px -20px #000;transform:rotate(-2.5deg);font-family:Arial,Helvetica,sans-serif}
.st-etikett b{display:block;font-size:1.35rem;font-weight:900;letter-spacing:-.01em;border-bottom:6px solid #111;padding-bottom:4px}
.st-etikett p{font-size:.72rem;padding:5px 0;border-bottom:2px solid #111}
.st-et-z{display:flex;justify-content:space-between;font-size:.8rem;padding:7px 0;border-bottom:1px solid #111}
.st-et-z span:last-child{font-weight:700}
.st-etikett .st-et-fuss{border:0;padding-top:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.62rem}
.st-scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc);box-shadow:0 0 14px 4px rgba(240,90,40,.45);opacity:0}
.st-ki-demo.scannt .st-scan{opacity:1;animation:st-scan 1.6s ease-in-out infinite alternate}
@keyframes st-scan{from{top:4%}to{top:94%}}
.st-ki-felder{display:grid;gap:8px}
.st-kf{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#212120;box-shadow:inset 0 0 0 1px #2a2a29;transition:box-shadow .4s,background .4s}
.st-kf .m{color:#77766f}
.st-kf b{font-family:var(--m);font-weight:400;font-size:.82rem;color:var(--bg);min-height:1.2em}
.st-kf em{font-style:normal;font-family:var(--m);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase}
.st-kf.ok em{color:#58B368}.st-kf.ok em::before{content:"✓ sicher"}
.st-kf.rot{box-shadow:inset 0 0 0 1px rgba(240,90,40,.7);background:rgba(240,90,40,.08)}
.st-kf.rot em{color:var(--acc)}.st-kf.rot em::before{content:"prüfen"}
.st-kf.best em{color:#58B368}.st-kf.best em::before{content:"✓ bestätigt"}
.st-ki-live{display:flex;align-items:center;gap:10px;margin-top:6px;font-family:var(--m);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#55544f;transition:color .4s}
.st-ki-live .st-led{background:#3a3a38;box-shadow:none;animation:none}
.st-ki-demo.live .st-ki-live{color:var(--bg)}
.st-ki-demo.live .st-ki-live .st-led{background:#58B368;box-shadow:0 0 0 3px rgba(88,179,104,.2),0 0 10px rgba(88,179,104,.6);animation:st-puls 2.4s ease-in-out infinite}
.st-ki-punkte{display:grid;gap:0;align-content:space-between}
.st-ki-punkte > div:not(.st-ki-chips){display:grid;gap:10px;padding:20px 0;border-top:1px solid #2a2a29}
.st-ki-punkte .m{color:#77766f}
.st-ki-punkte p{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.3;letter-spacing:-.015em;color:#d9d8d3}
.st-ki-chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:14px;border-top:1px solid #2a2a29}
.st-ki-chips span{font-family:var(--m);font-size:.62rem;letter-spacing:.04em;padding:6px 10px;border-radius:7px;background:#232322;color:#bdbcb7}
@media (max-width:1000px){.st-ki{grid-template-columns:1fr}}
@media (max-width:640px){.st-ki-flaeche{grid-template-columns:1fr}.st-etikett{width:100%;max-width:280px;justify-self:center}.st-ki-band{grid-template-columns:1fr 1fr}.st-ki-sec{margin-left:0;margin-right:0;border-radius:0}}

/* KI-Seite */
.ki-buehne{padding:70px 22px 60px!important}
.ki-buehne .ecke{color:#6f6e69}
.ki-buehne .ecke.or{display:flex;align-items:center;gap:8px}
.ki-led{width:7px;height:7px;border-radius:50%;background:#58B368;box-shadow:0 0 8px rgba(88,179,104,.8);animation:st-puls 1.6s ease-in-out infinite}
.ki-term{width:min(100%,560px);border-radius:16px;background:#0c0c0c;box-shadow:0 30px 60px -20px #000,inset 0 0 0 1px #262625;overflow:hidden}
.ki-term-kopf{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid #222}
.ki-term-kopf i{width:10px;height:10px;border-radius:50%;background:#2c2c2b}
.ki-term-kopf span{margin-left:10px;font-family:var(--m);font-size:.62rem;color:#6a6964}
.ki-log{margin:0;padding:18px 20px 22px;min-height:330px;font-family:var(--m);font-size:clamp(.66rem,.9vw,.8rem);line-height:1.95;color:#bdbcb7;white-space:pre-wrap}
.ki-log .p{color:var(--acc)}.ki-log .g{color:#58B368}.ki-log .r{color:#F05A28}.ki-log .d{color:#5d5c58}.ki-log .w{color:#F6F5F2}
.ki-log .cur{display:inline-block;width:7px;height:1.05em;background:#F6F5F2;vertical-align:text-bottom;animation:blinken 1s steps(1) infinite}

.ki-felder{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ki-karte{background:var(--card);border-radius:var(--r);padding:14px 14px 24px;display:flex;flex-direction:column;gap:12px}
.ki-karte > .m,.ki-karte > p{padding:0 10px}
.ki-karte .ki-titel{font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.15;letter-spacing:-.025em;font-weight:500}
.ki-karte.ki-dunkel{background:var(--night);color:var(--bg)}.ki-karte.ki-dunkel .m{color:#77766f}.ki-karte.ki-dunkel .text{color:#a9a8a3}
.ki-mini{position:relative;height:170px;border-radius:14px;background:var(--bg2);overflow:hidden;margin-bottom:8px;box-shadow:inset 0 2px 6px rgba(0,0,0,.08)}
.ki-dunkel .ki-mini{background:#1b1b1a;box-shadow:inset 0 0 0 1px #2a2a29}
.ki-blatt{position:absolute;left:50%;top:18px;bottom:-10px;width:44%;margin-left:-22%;background:#fff;border-radius:6px;box-shadow:0 10px 20px -10px rgba(0,0,0,.3);padding:16px 12px;display:grid;gap:9px;align-content:start;transform:rotate(-3deg)}
.ki-blatt i{height:5px;border-radius:3px;background:#DDDCD7}.ki-blatt i:nth-child(1){width:60%;background:#111;height:7px}.ki-blatt i:nth-child(2n){width:80%}
.ki-strahl{position:absolute;left:18%;right:18%;height:2px;top:20px;background:var(--acc);box-shadow:0 0 12px 3px rgba(240,90,40,.45);animation:ki-strahl 2.4s ease-in-out infinite alternate}
@keyframes ki-strahl{to{top:150px}}
.ki-schreiben{padding:26px 22px;display:grid;gap:12px;align-content:start}
.ki-schreiben i{height:7px;border-radius:4px;background:#C9C8C3;width:0;animation:ki-zeile 6s var(--ease) infinite}
.ki-schreiben i:nth-child(1){--z:92%;background:var(--ink);height:10px}.ki-schreiben i:nth-child(2){--z:84%;animation-delay:.6s}.ki-schreiben i:nth-child(3){--z:96%;animation-delay:1.2s}.ki-schreiben i:nth-child(4){--z:58%;animation-delay:1.8s}
.ki-schreiben b{position:absolute;right:20px;bottom:18px;width:8px;height:16px;background:var(--acc);animation:blinken 1s steps(1) infinite}
@keyframes ki-zeile{0%{width:0}18%,85%{width:var(--z)}100%{width:var(--z);opacity:0}}
.ki-zuordnen svg{position:absolute;inset:18px 10px;width:calc(100% - 20px);height:calc(100% - 36px)}
.ki-zuordnen circle{fill:var(--ink)}
.ki-zuordnen path{fill:none;stroke:var(--acc);stroke-width:2;stroke-dasharray:200;stroke-dashoffset:200;animation:ki-linie 5s var(--ease) infinite}
.ki-zuordnen path:nth-child(2){animation-delay:.5s}.ki-zuordnen path:nth-child(3){animation-delay:1s}
@keyframes ki-linie{0%{stroke-dashoffset:200}30%,80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.ki-code{padding:26px 22px;display:grid;gap:12px;align-content:start}
.ki-code i{height:7px;border-radius:4px;width:var(--b);background:#3a3a38;animation:ki-glimm 3s ease-in-out infinite}
.ki-code i:nth-child(2){margin-left:18px;animation-delay:.4s}.ki-code i:nth-child(3){margin-left:18px;animation-delay:.8s}.ki-code i:nth-child(4){animation-delay:1.2s}
@keyframes ki-glimm{50%{background:#77766f}}
.ki-code b{position:absolute;left:22px;bottom:18px;font-family:var(--m);font-weight:400;font-size:.66rem;letter-spacing:.06em;color:#58B368;animation:ki-ok 3s ease-in-out infinite}
@keyframes ki-ok{0%,40%{opacity:0;transform:translateY(4px)}55%,100%{opacity:1;transform:none}}

.ki-regeln{border-top:1px solid var(--ink)}
.ki-regel{display:grid;grid-template-columns:70px 1fr 1.4fr auto;gap:var(--g);align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.ki-regel .nr{font-family:var(--m);font-size:.8rem;color:var(--mute)}
.ki-r-titel{font-size:clamp(1.4rem,2.2vw,2.2rem);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.ki-r-text{color:var(--ink2);font-size:1rem;line-height:1.5}
.ki-regel .kipp{cursor:default;color:var(--ink)}
@media (max-width:1000px){.ki-felder{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.ki-regel{grid-template-columns:36px 1fr;row-gap:10px}.ki-regel .ki-r-text,.ki-regel .kipp{grid-column:2}.ki-hero .unten{flex-direction:column;align-items:flex-start}.ki-hero .unten .m{text-align:left!important}.ki-hero .ki-buehne{min-height:520px}}
@media (max-width:560px){.ki-felder{grid-template-columns:1fr}.ki-log{min-height:300px}}

/* Footer-Varianten (Vorschau) */
.fu-uhr{display:inline-flex;align-items:center;gap:8px;font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.fu-uhr b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:4px}
.fu-led{width:8px;height:8px;border-radius:50%;background:#58B368;box-shadow:0 0 0 3px rgba(88,179,104,.2),0 0 10px rgba(88,179,104,.6);animation:st-puls 2.4s ease-in-out infinite;flex:none}
.fu-led.aus{background:var(--acc);box-shadow:0 0 0 3px rgba(240,90,40,.2);animation:none}

/* 1 Kontakt-App auf der Bühne */
.fa{padding:clamp(40px,6vw,80px) var(--g) 22px;display:grid;gap:18px}
.fa-buehne{grid-template-columns:1fr auto 1fr;gap:clamp(24px,4vw,60px);padding:90px clamp(24px,4vw,56px) 80px;align-items:center;place-items:center stretch}
.fa-buehne .ecke{z-index:2}
.fa-text{display:grid;gap:28px;align-content:center}
.fa-gross{font-size:clamp(2.2rem,4vw,4.2rem);letter-spacing:-.05em;line-height:.95;font-weight:500}.fa-gross span{color:var(--faint)}
.fa-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.fa-phone{--w:clamp(250px,22vw,310px)}
.fa-app{text-align:left;background:#F4F3F0!important;display:flex;flex-direction:column;padding-top:calc(var(--w) * .15)}
.fa-kopf{display:flex;align-items:center;gap:10px;padding:0 6% 12px;border-bottom:1px solid var(--line)}
.phone .fa-app .fa-kopf img{width:30px;height:30px;flex:none;object-fit:contain;padding:6px;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.fa-kopf b{display:block;font-size:.86rem;font-weight:500;letter-spacing:-.01em}
.fa-kopf span{display:flex;align-items:center;gap:5px;font-size:.62rem;color:var(--mute)}
.fa-kopf span i{width:6px;height:6px;border-radius:50%;background:#58B368}
.fa-verlauf{flex:1;padding:10px 6%;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.fa-datum{align-self:center;font-family:var(--m);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.fa-zeile{display:flex;gap:8px;align-items:flex-end}
.phone .fa-app .fa-zeile > img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:none}
.fa-blasen{display:grid;gap:6px;justify-items:start}
.fa-blase{background:#fff;border-radius:16px 16px 16px 5px;padding:9px 12px;font-size:.78rem;line-height:1.35;box-shadow:0 1px 2px rgba(0,0,0,.06);opacity:0;transform:translateY(6px) scale(.96);transform-origin:left bottom;max-height:0;padding-block:0;overflow:hidden;transition:opacity .4s,transform .45s var(--ease),max-height .4s,padding .4s}
.fa-tippt{display:none;gap:3px;background:#fff;border-radius:14px;padding:9px 11px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.fa-tippt i{width:5px;height:5px;border-radius:50%;background:#B5B4AF;animation:fa-punkt 1s ease-in-out infinite}
.fa-tippt i:nth-child(2){animation-delay:.15s}.fa-tippt i:nth-child(3){animation-delay:.3s}
@keyframes fa-punkt{50%{transform:translateY(-3px);background:#77766f}}
.fa-app[data-s="1"] .t1,.fa-app[data-s="3"] .t2{display:inline-flex}
.fa-app:is([data-s="2"],[data-s="3"],[data-s="4"],[data-s="5"]) .b1,.fa-app:is([data-s="4"],[data-s="5"]) .b2{opacity:1;transform:none;max-height:120px;padding-block:9px}
.fa-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-top:auto}
.fa-chips a{font-size:.72rem;padding:7px 12px;border-radius:99px;background:var(--ink);color:var(--bg);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .45s var(--ease),background .3s}
.fa-chips a:nth-child(2){transition-delay:.08s}.fa-chips a:nth-child(3){transition-delay:.16s}.fa-chips a:nth-child(4){transition-delay:.24s}
.fa-chips a:hover{background:var(--acc)}
.fa-app[data-s="5"] .fa-chips a{opacity:1;transform:none}
.fa-eingabe{display:flex;align-items:center;justify-content:space-between;margin:8px 5% calc(var(--w) * .07);padding:6px 6px 6px 14px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:.74rem;color:var(--mute)}
.fa-eingabe i{width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center}
.fa-eingabe i svg{width:13px;height:13px}
.fa-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;justify-self:end}
.fa-nav ul,.fc ul{list-style:none;display:grid;gap:7px;margin-top:12px}
.fa-nav ul{color:var(--ink2)}.fa-nav a:hover{color:var(--acc)}
.fa-unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:6px 4px 0}

/* 2 Typenschild */
.fb{background:var(--bg2);padding:clamp(50px,7vw,100px) var(--g) clamp(30px,4vw,50px)}
.fb-schild{--gx:30%;position:relative;border-radius:22px;padding:clamp(28px,4vw,56px) clamp(28px,4.5vw,64px);color:#3d3c38;background:radial-gradient(120% 80% at var(--gx) 0%,rgba(255,255,255,.55),transparent 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.025) 1px 2px,transparent 2px 4px),linear-gradient(180deg,#DCDBD6,#C5C4BF);box-shadow:0 30px 60px -30px rgba(0,0,0,.45),0 2px 0 rgba(255,255,255,.8) inset,0 -2px 0 rgba(0,0,0,.08) inset,0 0 0 1px rgba(0,0,0,.08);display:grid;gap:clamp(24px,3vw,40px);text-shadow:0 1px 0 rgba(255,255,255,.55)}
.fb-schraube{position:absolute;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4f3ef,#a9a8a3 70%);box-shadow:inset 0 -1px 2px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.7)}
.fb-schraube::after{content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;background:#8b8a85;transform:rotate(var(--r,40deg))}
.fb-schraube.s1{top:16px;left:16px}.fb-schraube.s2{top:16px;right:16px;--r:-20deg}.fb-schraube.s3{bottom:16px;left:16px;--r:75deg}.fb-schraube.s4{bottom:16px;right:16px;--r:10deg}
.fb-kopf{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:2px solid rgba(0,0,0,.18);box-shadow:0 1px 0 rgba(255,255,255,.6);padding-bottom:clamp(20px,2.4vw,30px)}
.fb-marke{display:flex;align-items:center;gap:18px}
.fb-marke img{width:56px;height:56px;opacity:.75}
.fb-marke b{display:block;font-size:clamp(2rem,4.4vw,4.4rem);font-weight:600;letter-spacing:-.05em;line-height:.9;color:#2f2e2b}
.fb-marke span{display:block;margin-top:8px;font-family:var(--m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.fb-siegel{flex:none;width:104px;height:104px;border-radius:50%;border:2px solid rgba(0,0,0,.25);box-shadow:inset 0 0 0 5px rgba(255,255,255,.25),inset 0 0 0 7px rgba(0,0,0,.15);display:grid;place-items:center;align-content:center;gap:2px;text-align:center;font-family:var(--m);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-8deg)}
.fb-siegel b{font-family:var(--s,inherit);font-size:1.6rem;letter-spacing:-.02em;line-height:1;color:#2f2e2b}
.fb-mitte{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,60px);align-items:center}
.fb-daten{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,3vw,48px)}
.fb-daten div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid rgba(0,0,0,.14);box-shadow:0 1px 0 rgba(255,255,255,.5)}
.fb-daten dt{font-family:var(--m);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#6a6964;padding-top:3px}
.fb-daten dd{font-size:.98rem}
.fb-daten a{border-bottom:1px solid rgba(0,0,0,.3)}.fb-daten a:hover{color:var(--acc);border-color:var(--acc)}
.fb .fu-uhr{color:#55544f}.fb .fu-uhr b{color:#2f2e2b}
.fb-qr{display:grid;justify-items:center;gap:10px;padding:14px;border-radius:14px;box-shadow:inset 0 1px 3px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.6)}
.fb-qr img{width:118px;height:118px;opacity:.85}
.fb-qr span{font-family:var(--m);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:#6a6964}
.fb-gravur{font-family:var(--m);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;line-height:2;color:#55544f}
.fb-gravur a:hover{color:var(--acc)}
.fb-fuss{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--m);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#6a6964;border-top:2px solid rgba(0,0,0,.14);padding-top:18px}

/* 3 Direkter Draht */
.fc{background:var(--night);color:var(--bg);padding:clamp(40px,6vw,80px) var(--g) 22px;display:grid;gap:clamp(40px,5vw,70px)}
.fc .m{color:#77766f}
.fc-haupt{display:grid;grid-template-columns:minmax(260px,.8fr) 1.5fr;gap:clamp(28px,5vw,80px);align-items:stretch}
.fc-bild{position:relative;border-radius:var(--r);overflow:hidden;min-height:520px;background:#2b2926}
.fc-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform 1.2s var(--ease)}
.fc-bild:hover img{transform:scale(1.04)}
.fc-pille{position:absolute;left:14px;bottom:14px;padding:10px 14px;border-radius:99px;background:rgba(17,17,17,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fc .fu-uhr{color:#bdbcb7}.fc .fu-uhr b{color:var(--bg)}
.fc-rechts{display:flex;flex-direction:column;gap:22px;justify-content:center}
.fc-gross{font-size:clamp(2.2rem,4.4vw,4.6rem);letter-spacing:-.05em;line-height:.95;font-weight:500}.fc-gross span{color:#55544f}
.fc-mail{align-self:flex-start;font-size:clamp(1.4rem,2.4vw,2.3rem);letter-spacing:-.03em;font-weight:500;background:linear-gradient(var(--acc),var(--acc)) left bottom/0 2px no-repeat;padding-bottom:4px;transition:background-size .5s var(--ease),color .3s}
.fc-mail:hover{background-size:100% 2px;color:var(--acc)}
.fc-name{font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#77766f;margin-top:-10px}
.fc-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.fc-hell{background:transparent;color:var(--bg);box-shadow:inset 0 0 0 1px #3a3a38}
.fc-spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid #2c2c2b;padding-top:24px;margin-top:10px}
.fc ul{color:#B8B7B1}.fc ul a:hover{color:var(--bg)}
.fc-unten{display:flex;justify-content:space-between;border-top:1px solid #2c2c2b;padding-top:20px}

@media (max-width:1000px){
  .fa-buehne{grid-template-columns:1fr;justify-items:center;text-align:center;padding:70px 20px 70px}.fa-text{justify-items:center}.fa-knoepfe{justify-content:center}.fa-nav{justify-self:center;text-align:left}
  .fb-mitte{grid-template-columns:1fr}.fb-daten{grid-template-columns:1fr}.fb-qr{justify-self:start}
  .fc-haupt{grid-template-columns:1fr}.fc-bild{min-height:420px}
}
@media (max-width:560px){.fb-kopf{flex-direction:column;align-items:flex-start}.fb-siegel{position:absolute;right:20px;top:24px;width:76px;height:76px}.fb-marke{padding-right:80px}.fb-daten div{grid-template-columns:1fr;gap:4px}.fc-spalten{grid-template-columns:1fr 1fr}.fa-unten{flex-direction:column}}

/* UI/UX und Schnittstellen */
.us{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.us-karte{background:var(--card);border-radius:var(--r);padding:14px 14px 28px;display:flex;flex-direction:column;gap:14px}
.us-karte > .m,.us-karte > p,.us-karte > .us-metriken{margin:0 14px}
.us-dunkel{background:var(--night);color:var(--bg)}.us-dunkel .m{color:#77766f}
.us-buehne{position:relative;height:clamp(300px,27vw,400px);border-radius:16px;background:var(--bg2);overflow:hidden;margin-bottom:10px;display:grid;place-items:center}
.us-buehne.raster{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px}
.us-ecke{position:absolute;top:16px;left:18px;z-index:2;font-family:var(--m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.us-titel{font-size:clamp(1.6rem,2.6vw,2.5rem);font-weight:500;letter-spacing:-.045em;line-height:1.02}
.us-duo{position:relative;width:88%;height:84%;margin-top:6%}
.us-duo .win{position:absolute;left:0;top:4%;width:78%;box-shadow:0 30px 60px -30px rgba(17,17,17,.45)}
.us-duo .phone{position:absolute;right:2%;top:0;--w:clamp(110px,10.5vw,160px)}
.us-metriken{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.us-metriken div{display:grid;gap:8px;align-content:start;padding:16px 16px 0 0}
.us-metriken div + div{padding-left:16px;border-left:1px solid var(--line)}
.us-metriken b{font-size:clamp(1.5rem,2.3vw,2.2rem);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--acc)}
.us-metriken span{font-size:.9rem;line-height:1.45;color:var(--ink2)}
.us-vier{grid-template-columns:repeat(4,1fr);border-color:#2a2a29}
.us-vier div + div{border-color:#2a2a29}
.us-vier b{font-size:clamp(1.1rem,1.5vw,1.4rem);color:var(--bg)}
.us-vier span{color:#a9a8a3}
.us-dunkel .us-buehne{background:radial-gradient(120% 90% at 50% 0%,#232322,#121212);box-shadow:inset 0 0 0 1px #262625}
.us-patch{width:94%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.us-patch .pl{fill:#1d1d1c;stroke:#2e2e2d}
.us-patch .pl-glanz{fill:none;stroke:rgba(255,255,255,.05);stroke-width:1;transform:translate(0,1px)}
.us-patch .schraube circle{fill:#3a3a38}.us-patch .schraube line{stroke:#1d1d1c;stroke-width:1.6}
.us-patch text{font-family:var(--m);fill:#8a8984;text-anchor:middle;letter-spacing:.12em}
.us-patch .pl-titel{font-size:9px;fill:#55544f}
.us-patch .pl-name{font-size:10.5px;fill:#d9d8d3}
.us-patch .pl-klein{font-size:8px;fill:#6a6964}
.us-patch .links{text-anchor:start}.us-patch .rechts{text-anchor:end}
.us-patch .ring{fill:#2c2c2b;stroke:#4a4a47;stroke-width:1.5}
.us-patch .ring.akz{stroke:var(--acc);stroke-width:2}
.us-patch .mutter{fill:#5a5955}
.us-patch .loch{fill:#0a0a0a}
.us-patch .stecker{stroke:#0a0a0a;stroke-width:2}
.us-patch .kabel{fill:none;stroke-width:6;stroke-linecap:round;opacity:.92}
.us-patch .daten{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:2 26;opacity:.75;animation:us-daten 1.8s linear infinite}
@keyframes us-daten{to{stroke-dashoffset:-28}}
.us-patch .led{fill:#2f4a33;animation:us-led 1.4s steps(2) infinite}
.us-patch .led.an{fill:#58B368;animation:none;filter:drop-shadow(0 0 4px rgba(88,179,104,.9))}
@keyframes us-led{50%{fill:#58B368}}
@media (max-width:900px){.us{grid-template-columns:1fr}.us-vier{grid-template-columns:1fr 1fr}.us-vier div:nth-child(3){border-left:0;padding-left:0}.us-vier div:nth-child(n+3){border-top:1px solid #2a2a29;margin-top:14px}}
@media (max-width:560px){.us-metriken{grid-template-columns:1fr}.us-metriken div + div{border-left:0;padding-left:0;border-top:1px solid var(--line)}.us-metriken div{padding:14px 0}.us-vier{grid-template-columns:1fr}.us-vier div + div{border-top:1px solid #2a2a29;margin-top:0}}
@media (prefers-reduced-motion:reduce){.us-patch .daten,.us-patch .led{animation:none}}

/* Rechtliches */
.recht{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.recht-k{background:var(--card);border-radius:var(--r);padding:clamp(22px,2.6vw,34px);display:grid;gap:12px;align-content:start}
.recht-k h3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:500;letter-spacing:-.025em;line-height:1.15;margin-bottom:4px}
.recht-k p{color:var(--ink2);line-height:1.6;max-width:62ch}
.recht-k a{border-bottom:1px solid var(--ink)}
@media (max-width:820px){.recht{grid-template-columns:1fr}}

/* Hero-Varianten (Vorschau) */
.hv-hell{background:var(--bg);color:var(--ink)}
.hv-rand{background:transparent;color:var(--bg);box-shadow:inset 0 0 0 1px #3a3a38}
.hv1{margin:96px var(--g) 0;border-radius:var(--r);background:var(--night);color:var(--bg);overflow:hidden;display:grid;gap:clamp(30px,4vw,56px);padding:clamp(28px,4vw,56px) 0 0}
.hv1 .m{color:#77766f}.hv1 .grau{color:#55544f}.hv1 .lead{color:#b8b7b1}
.hv1 .h1{font-size:clamp(2.8rem,6.2vw,6.8rem)}
.hv1-kopf{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--g);align-items:end;padding:0 clamp(24px,4vw,56px)}
.hv1-rechts{display:grid;gap:24px;justify-items:start}
.hv1 .knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.hv1-wand{position:relative;height:clamp(300px,30vw,420px);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hv1-band{position:absolute;left:0;bottom:0;display:flex;align-items:flex-end;gap:clamp(18px,2vw,30px);padding:0 15px;width:max-content;animation:hv1-lauf 70s linear infinite}
.hv1-wand:hover .hv1-band{animation-play-state:paused}
@keyframes hv1-lauf{to{transform:translateX(-50%)}}
.hv1-w{width:clamp(380px,36vw,560px);margin-bottom:-2px;border-radius:14px 14px 0 0}
.hv1-p{--w:clamp(150px,13vw,210px);margin-bottom:calc(var(--w) * -.55)}
.hv1 .phone::before{box-shadow:0 30px 60px -6px rgba(0,0,0,.75)}
.hv1-leiste{display:grid;grid-template-columns:repeat(4,1fr);background:#0b0b0b;border-top:1px solid #222}
.hv1-leiste div{display:grid;gap:4px;padding:22px clamp(18px,2.4vw,32px);border-right:1px solid #222}
.hv1-leiste div:last-child{border-right:0}
.hv1-leiste b{font-size:clamp(1.6rem,2.6vw,2.6rem);font-weight:500;letter-spacing:-.04em;color:var(--acc);line-height:1}
.hv1-leiste span{color:#b8b7b1;font-size:.95rem}
@media (max-width:900px){.hv1{margin-top:84px}.hv1-kopf{grid-template-columns:1fr}.hv1-leiste{grid-template-columns:1fr 1fr}.hv1-leiste div:nth-child(2){border-right:0}.hv1-leiste div:nth-child(-n+2){border-bottom:1px solid #222}.hv1-w{width:300px}.hv1-p{--w:120px}}

.hv2-feld{display:flex;align-items:center;gap:4px;margin-top:34px;padding:10px 10px 10px 24px;min-height:74px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 18px 36px -24px rgba(0,0,0,.35);font-size:clamp(1.1rem,1.7vw,1.5rem);letter-spacing:-.02em;max-width:640px}
.hv2-text{white-space:nowrap;overflow:hidden}
.hv2-cur{width:2px;height:1.2em;background:var(--acc);animation:blinken 1s steps(1) infinite;flex:none}
.hv2-senden{margin-left:auto;flex:none;width:52px;height:52px;border-radius:16px;background:var(--ink);color:var(--bg);display:grid;place-items:center;transition:background .3s,transform .3s var(--ease)}
.hv2-senden svg{width:18px;height:18px}
.hv2.sendet .hv2-senden,.hv4.sendet .hv2-senden{background:var(--acc);transform:scale(.92)}
.hv2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hv2-chips button{font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink2);cursor:pointer;transition:background .3s,color .3s}
.hv2-chips button.an{background:var(--ink);color:var(--bg);box-shadow:none}
.hv2-geraet{position:relative;display:grid;place-items:center;width:100%;height:100%}
.hv2-phone{transition:opacity .5s,transform .6s var(--ease)}
.hv2[data-k="3"] .hv2-phone{opacity:0;transform:scale(.94)}
.hv2-fenster{position:absolute;width:min(92%,640px);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s var(--ease)}
.hv2-fenster.an{opacity:1;transform:none}
.hv2-caps{width:100%;max-width:520px}
.hv2-cap{display:none;align-items:center;gap:14px}
.hv2-cap.an{display:flex}
.hv2-cap b{display:block;font-weight:500;font-size:1.1rem;margin-top:3px}
.hv2-erg{display:block;color:var(--acc);font-size:.95rem;margin-top:2px}

.hv3{padding:clamp(120px,14vw,190px) var(--g) clamp(40px,5vw,70px);display:grid;gap:clamp(30px,4vw,60px)}
.hv3-satz{font-size:clamp(2.8rem,7.4vw,8.4rem);line-height:1.02;letter-spacing:-.05em;font-weight:500;max-width:16ch}
.hv3-satz .w{display:inline-block;opacity:0;transform:translateY(.25em);animation:hv3-wort .9s var(--ease) forwards}
.hv3-satz .grau{color:var(--faint)}.hv3-satz .akz{color:var(--ink);background:linear-gradient(var(--acc),var(--acc)) left 92%/100% .08em no-repeat}
@keyframes hv3-wort{to{opacity:1;transform:none}}
.hv3-pille{display:inline-block;position:relative;height:.78em;width:1.35em;border-radius:99px;overflow:hidden;vertical-align:-.04em;background:var(--bg2);box-shadow:0 10px 24px -12px rgba(0,0,0,.4);transition:width .6s var(--ease);opacity:0;animation:hv3-wort .9s var(--ease) forwards}
.hv3-pille.breit{width:1.9em}
.hv3-pille:hover{width:2.4em}
.hv3-pille video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv3-pille.hoch video{object-position:center 30%}
.hv3-unten{display:grid;grid-template-columns:1fr auto auto;gap:clamp(20px,4vw,60px);align-items:end;border-top:1px solid var(--line);padding-top:24px}
.hv3-zahlen{display:flex;gap:clamp(18px,3vw,40px)}
.hv3-zahlen div{display:grid;gap:4px}
.hv3-zahlen b{font-size:clamp(1.4rem,2vw,2rem);font-weight:500;letter-spacing:-.04em;color:var(--acc);line-height:1}
.hv3 .knoepfe{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:1000px){.hv3-unten{grid-template-columns:1fr}.hv3-zahlen{flex-wrap:wrap}}
/* Hero 4: Gerätewand mit Eingabefeld */
.hv4 .hv1-kopf{align-items:end}
.hv4-feld{margin-top:0;width:100%;background:#1d1d1c;color:var(--bg);box-shadow:inset 0 0 0 1px #2e2e2d,0 20px 40px -24px #000}
.hv4-feld .hv2-senden{background:var(--acc);color:#fff}
.hv4-chips{margin-top:-10px}
.hv4-chips button{color:#a9a8a3;box-shadow:inset 0 0 0 1px #3a3a38}
.hv4-chips button.an{background:var(--bg);color:var(--ink)}
.hv4 .lead{max-width:44ch}
.hv4-band{position:absolute;left:0;bottom:0;display:flex;align-items:flex-end;gap:clamp(18px,2vw,30px);padding:0 50vw;width:max-content;transition:transform 1.2s var(--ease)}
.hv4-g{transition:opacity .7s,filter .7s,transform .9s var(--ease)}
.hv4-g:not(.an){opacity:.32;filter:saturate(.4)}
.hv4-g.an{transform:translateY(-10px)}
.hv4-leiste a{display:grid;gap:4px;padding:22px clamp(18px,2.4vw,32px);border-right:1px solid #222;transition:background .5s}
.hv4-leiste a:last-child{border-right:0}
.hv4-leiste a:not(.an) b{color:#5d5c58}
.hv4-leiste a.an{background:#141413}
.hv4-leiste b{font-size:clamp(1.6rem,2.6vw,2.6rem);font-weight:500;letter-spacing:-.04em;color:var(--acc);line-height:1;transition:color .5s}
.hv4-leiste span{color:#b8b7b1;font-size:.95rem}
@media (max-width:900px){.hv4-leiste a:nth-child(2){border-right:0}.hv4-leiste a:nth-child(-n+2){border-bottom:1px solid #222}.hv4-chips{margin-top:0}}
.hv1-wand + .hv1-leiste{margin-top:calc(clamp(30px,4vw,56px) * -1)}
.hv2-text{min-width:0;flex:0 1 auto;text-overflow:clip}@media (max-width:560px){.hv2-feld{font-size:1rem;min-height:62px;padding-left:18px}.hv2-senden{width:44px;height:44px;border-radius:13px}}
@media (max-width:560px){.hv2-text{white-space:normal;line-height:1.25}}
/* Hero 4 hell */
.hv4{background-color:var(--bg2);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;color:var(--ink)}
.hv4 .m{color:var(--mute)}.hv4 .grau{color:var(--faint)}.hv4 .lead{color:var(--ink2)}
.hv4-feld{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 18px 36px -24px rgba(0,0,0,.35)}
.hv4-chips button{color:var(--ink2);box-shadow:inset 0 0 0 1px var(--faint)}
.hv4-chips button.an{background:var(--ink);color:var(--bg)}
.hv4 .phone::before{box-shadow:0 30px 50px -10px rgba(17,17,17,.32),0 8px 14px -4px rgba(17,17,17,.18)}
.hv4 .win{box-shadow:0 30px 60px -30px rgba(17,17,17,.4)}
.hv4-g:not(.an){opacity:.45;filter:saturate(.3)}
.hv4-leiste{background:var(--card);border-top:1px solid var(--line)}
.hv4-leiste a{border-right:1px solid var(--line)}
.hv4-leiste a.an{background:#fff}
.hv4-leiste a:not(.an) b{color:var(--faint)}
.hv4-leiste span{color:var(--ink2)}
@media (max-width:900px){.hv4-leiste a:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.hv4 .hv4-g:not(.an){opacity:.62;filter:saturate(.5) brightness(1.02)}

/* KI-Block poliert */
.st-ki-sec{padding-top:clamp(56px,6.5vw,100px);padding-bottom:clamp(40px,5vw,72px)}
.st-ki-sec .kopf{margin-bottom:clamp(30px,4vw,56px)}
.st-ki{align-items:start}
.st-ki-demo{background:linear-gradient(#1c1c1b,#161615);box-shadow:inset 0 0 0 1px #2c2c2b,0 40px 80px -40px rgba(240,90,40,.25)}
.st-ki-punkte{align-content:start}
.st-ki-punkte > .st-ki-punkt{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:22px 0;border-top:1px solid #2a2a29}
.st-ki-punkt .nr{font-family:var(--m);font-size:.8rem;color:var(--acc);padding-top:5px}
.st-ki-punkt b{display:block;font-weight:500;font-size:clamp(1.25rem,1.7vw,1.6rem);letter-spacing:-.03em;color:var(--bg);margin-bottom:6px}
.st-ki-punkte .st-ki-punkt p{font-size:1rem;line-height:1.5;letter-spacing:0;color:#a9a8a3}
.st-ki-chips{align-items:center;padding-top:20px}
.st-ki-chips span{padding:7px 11px}
@media (max-width:560px){.us-vier div:nth-child(n){margin-top:0}}

/* Prozess- und Systemanalyse */
.pz{display:grid;gap:14px}
.pz-buehne{position:relative;border-radius:var(--r);background-color:var(--bg2);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;padding:clamp(80px,8vw,120px) clamp(20px,4vw,60px) clamp(70px,7vw,100px);display:grid;gap:clamp(60px,7vw,96px);overflow:hidden}
.pz-buehne .ecke{position:absolute;font-family:var(--m);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pz-buehne .ecke.ol{top:20px;left:22px}.pz-buehne .ecke.or{top:20px;right:22px;color:var(--acc)}
.pz-buehne .ecke.ul{bottom:20px;left:22px}.pz-buehne .ecke.ur{bottom:20px;right:22px}
.pz-zeile{display:grid;grid-template-columns:90px 1fr 150px;gap:20px;align-items:center}
.pz-label{font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pz-zeit{white-space:nowrap;font-size:clamp(1.6rem,2.8vw,2.8rem);font-weight:500;letter-spacing:-.045em;text-align:right;transition:color .6s,opacity .6s}
.pz-spur{position:relative;height:64px}
.pz-balken{display:flex;height:100%;gap:0;transition:gap .9s var(--ease)}
.pz-seg{position:relative;flex:0 1 var(--b);min-width:0;height:100%;background:linear-gradient(#cfceca,#c3c2bd);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:flex-basis .9s var(--ease),background .6s,border-radius .9s var(--ease)}
.pz-seg:first-child{border-radius:12px 0 0 12px}.pz-seg:last-child{border-radius:0 12px 12px 0}
.pz-seg:nth-child(2){background:linear-gradient(#c6c5c0,#bab9b4)}.pz-seg:nth-child(3){background:linear-gradient(#d3d2cd,#c8c7c2)}.pz-seg:nth-child(4){background:linear-gradient(#bfbeb9,#b3b2ad)}
.pz-was,.pz-wie{position:absolute;left:12px;white-space:nowrap;font-size:.92rem;letter-spacing:-.01em;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s var(--ease)}
.pz-was{bottom:calc(100% + 12px);color:var(--ink)}
.pz-wie{top:calc(100% + 12px);font-family:var(--m);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.pz[data-phase="1"] .pz-vorher .pz-balken,.pz[data-phase="2"] .pz-vorher .pz-balken,.pz[data-phase="3"] .pz-vorher .pz-balken{gap:10px}
.pz:is([data-phase="1"],[data-phase="2"],[data-phase="3"]) .pz-vorher .pz-seg{border-radius:12px}
.pz:is([data-phase="1"],[data-phase="2"],[data-phase="3"]) .pz-was{opacity:1;transform:none}
.pz:is([data-phase="2"],[data-phase="3"]) .pz-vorher .pz-wie{opacity:1;transform:none}
.pz:is([data-phase="2"],[data-phase="3"]) .pz-vorher .pz-seg{background:linear-gradient(#f2a487,#ec8f6c)}
.pz[data-phase="3"] .pz-vorher{opacity:.45}
.pz-nachher .pz-zeit{opacity:0}
.pz-nachher .pz-seg.neu{flex-basis:0;border-radius:12px;background:var(--acc);box-shadow:0 12px 24px -10px rgba(240,90,40,.6)}
.pz[data-phase="3"] .pz-nachher .pz-seg.neu{flex-basis:11.1%}
.pz[data-phase="3"] .pz-nachher .pz-wie{opacity:1;transform:none;color:var(--ink)}
.pz[data-phase="3"] .pz-nachher .pz-zeit{opacity:1;color:var(--acc)}
.pz-vorher{transition:opacity .6s}
.pz-schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pz-schritt{position:relative;overflow:hidden;background:var(--card);border-radius:var(--r);padding:24px 24px 28px;display:grid;gap:10px;align-content:start;transition:background .5s,box-shadow .5s}
.pz-schritt .nr{font-family:var(--m);font-size:.74rem;color:var(--mute)}
.pz-schritt b{font-size:clamp(1.3rem,1.8vw,1.7rem);font-weight:500;letter-spacing:-.035em}
.pz-schritt p{color:var(--ink2);line-height:1.5}
.pz-schritt i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--acc)}
.pz-schritt.an{background:#fff;box-shadow:0 20px 40px -26px rgba(0,0,0,.35)}
.pz-schritt.an .nr{color:var(--acc)}
.pz-schritt.an i{animation:rd-lauf 1.5s linear forwards}
@keyframes rd-lauf{to{width:100%}}
@media (max-width:900px){.pz-schritte{grid-template-columns:1fr 1fr}.pz-zeile{grid-template-columns:1fr;gap:10px}.pz-zeit{text-align:left}.pz-was{font-size:.7rem}.pz-wie{font-size:.52rem}.pz-buehne{gap:90px}}
@media (max-width:560px){.pz-was,.pz-vorher .pz-wie{display:none}.pz-buehne{gap:60px}.pz-schritte{grid-template-columns:1fr}}
@media (max-width:560px){.pz-buehne .ecke.ol,.pz-buehne .ecke.ul{display:none}}

/* Footer 4: Orange Wand */
.fd{background:var(--acc);color:var(--ink);padding:clamp(28px,3vw,40px) var(--g) 24px;display:grid;gap:clamp(40px,6vw,90px);min-height:min(100svh,900px);align-content:space-between}
.fd .m{color:rgba(17,17,17,.62)}.fd .fu-uhr b{color:var(--ink)}.fd .fu-led{background:var(--ink);box-shadow:none;animation:none}
.fd-oben{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fd-gross{display:grid;font-size:clamp(3.4rem,11.6vw,14rem);line-height:.86;letter-spacing:-.065em;font-weight:500}
.fd-gross span:last-child{display:flex;align-items:center;gap:.12em}
.fd-pfeil{display:inline-grid;place-items:center;flex:none;width:.78em;height:.78em;border-radius:50%;background:var(--ink);color:var(--acc);transition:transform .6s var(--ease)}
.fd-pfeil svg{width:38%;height:38%}
.fd-gross:hover .fd-pfeil{transform:rotate(45deg) scale(1.06)}
.fd-unten{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;border-top:2px solid var(--ink);padding-top:20px}
.fd-mail{font-size:clamp(1.2rem,1.8vw,1.6rem);font-weight:500;letter-spacing:-.02em}
.fd nav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.fd nav a{font-weight:500}.fd nav a:hover,.fd-mail:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.fd-unten{grid-template-columns:1fr}.fd nav{justify-content:flex-start}}

/* Footer 5: Monolith */
.fe{--mx:50%;--my:40%;position:relative;overflow:hidden;background:#0c0c0c;color:var(--bg);padding:clamp(40px,5vw,70px) var(--g) 24px;display:grid;gap:clamp(30px,4vw,60px);isolation:isolate}
.fe::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#2a2a29 1px,transparent 1px),linear-gradient(90deg,#2a2a29 1px,transparent 1px);background-size:44px 44px;-webkit-mask:radial-gradient(circle 260px at var(--mx) var(--my),#000,transparent 75%);mask:radial-gradient(circle 260px at var(--mx) var(--my),#000,transparent 75%)}
.fe::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle 320px at var(--mx) var(--my),rgba(240,90,40,.16),transparent 70%)}
.fe .m{color:#77766f}.fe .fu-uhr{color:#a9a8a3}.fe .fu-uhr b{color:var(--bg)}
.fe-oben,.fe-unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fe-mail{display:inline-block;justify-self:start;white-space:nowrap;font-weight:500;letter-spacing:-.06em;line-height:.9;font-size:10vw;transition:color .4s}
.fe-mail:hover{color:var(--acc)}
.fe-spalten{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:var(--g);border-top:1px solid #262625;padding-top:26px}
.fe ul{list-style:none;display:grid;gap:7px;margin-top:12px;color:#b8b7b1}.fe ul a:hover{color:var(--bg)}
.fe-knopf{align-self:start}
.fe-unten{border-top:1px solid #262625;padding-top:18px}
@media (max-width:900px){.fe-spalten{grid-template-columns:1fr 1fr}.fe-knopf{grid-column:1/-1}}

/* Footer 6: Tastatur */
.fk{background:var(--bg2);padding:clamp(40px,6vw,90px) var(--g) 24px;display:grid;gap:clamp(36px,5vw,70px)}
.fk-pult{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(6px,1vw,14px);padding:clamp(10px,1.2vw,18px) clamp(10px,1.2vw,18px) clamp(16px,1.8vw,26px);border-radius:clamp(18px,2.4vw,34px);background:linear-gradient(#cfceca,#d9d8d4);box-shadow:inset 0 3px 10px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.7)}
.fk-taste{position:relative;aspect-ratio:1;border-radius:clamp(12px,1.6vw,24px);background:linear-gradient(#FFFFFF,#EEEDE9);box-shadow:0 clamp(5px,.8vw,11px) 0 #BDBCB7,0 clamp(10px,1.4vw,20px) clamp(14px,2vw,28px) -10px rgba(0,0,0,.35),inset 0 2px 0 #fff;display:grid;place-items:center;cursor:pointer;transition:transform .14s var(--ease),box-shadow .14s var(--ease);animation:fk-druck 4.2s var(--ease) infinite;animation-delay:calc(var(--i) * .16s)}
.fk-taste b{font-size:clamp(2.4rem,9vw,11rem);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.fk-taste i{position:absolute;top:12%;right:12%;width:clamp(5px,.6vw,9px);height:clamp(5px,.6vw,9px);border-radius:50%;background:#D3D2CD;transition:background .2s,box-shadow .2s}
.fk-taste:hover,.fk-taste.gedrueckt{transform:translateY(clamp(4px,.6vw,9px));box-shadow:0 1px 0 #BDBCB7,0 4px 8px -4px rgba(0,0,0,.3),inset 0 2px 0 #fff;animation:none}
.fk-taste:hover i,.fk-taste.gedrueckt i{background:var(--acc);box-shadow:0 0 10px rgba(240,90,40,.8)}
@keyframes fk-druck{0%,8%,100%{transform:none}3%{transform:translateY(clamp(4px,.6vw,9px));box-shadow:0 1px 0 #BDBCB7,inset 0 2px 0 #fff}}
.fk-mitte{display:grid;grid-template-columns:1.4fr auto;gap:var(--g);align-items:end}
.fk-gross{font-size:clamp(2rem,4.4vw,4.6rem);letter-spacing:-.05em;line-height:.95;font-weight:500}.fk-gross span{color:var(--faint)}
.fk-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.fk-spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);border-top:1px solid var(--faint);padding-top:24px}
.fk ul{list-style:none;display:grid;gap:7px;margin-top:12px;color:var(--ink2)}.fk ul a:hover{color:var(--acc)}
.fk-unten{display:flex;justify-content:space-between;border-top:1px solid var(--faint);padding-top:18px}
@media (max-width:900px){.fk-mitte{grid-template-columns:1fr}.fk-spalten{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.fk-taste{animation:none}}
.fd .fu-uhr{color:rgba(17,17,17,.7)}

/* Footer 4 in der WebRise-Hausfarbe */
.fd{--gruen:#1C3829;background:var(--gruen);color:var(--bg)}
.fd .m,.fd .fu-uhr{color:rgba(233,232,228,.62)}.fd .fu-uhr b{color:var(--bg)}
.fd .fu-led{background:#58B368;box-shadow:0 0 0 3px rgba(88,179,104,.25);animation:st-puls 2.4s ease-in-out infinite}
.fd-pfeil{background:var(--bg);color:var(--gruen)}
.fd-gross:hover .fd-pfeil{background:var(--acc);color:#fff}
.fd-unten{border-top-color:rgba(233,232,228,.35)}
.fd .fu-led{display:none}

/* Schnittstellen-Animationen (Vorschau) */
.usv{width:94%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.usv .t{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;fill:#d9d8d3;text-anchor:middle}
.usv .t.klein{font-size:8px;fill:#6a6964}.usv .t.links{text-anchor:start}.usv .t.rechts{text-anchor:end}.usv .t.akz{fill:var(--acc)}
/* 1 Kabel stecken */
.sv1 .pl{fill:#1d1d1c;stroke:#2e2e2d}.sv1 .schraube circle{fill:#3a3a38}.sv1 .schraube line{stroke:#1d1d1c;stroke-width:1.6}
.sv1 .ring{fill:#2c2c2b;stroke:#4a4a47;stroke-width:1.5}.sv1 .ring.akz{stroke:var(--acc);stroke-width:2}.sv1 .mutter{fill:#5a5955}.sv1 .loch{fill:#0a0a0a}
.sv1 .kabel{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:sv1-kabel 7s var(--ease) infinite;animation-delay:var(--d)}
@keyframes sv1-kabel{0%{stroke-dashoffset:100}14%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:100}}
.sv1 .stecker{stroke:#0a0a0a;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:sv1-stecker 7s var(--ease) infinite;animation-delay:var(--d)}
@keyframes sv1-stecker{0%,12%{opacity:0;transform:scale(1.6)}16%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
.sv1 .led{fill:#2f4a33;animation:sv1-led 7s steps(1) infinite;animation-delay:var(--d)}
@keyframes sv1-led{0%,15%{fill:#2f4a33}16%,90%{fill:#58B368}100%{fill:#2f4a33}}
.sv1 .daten{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:1.5 9;opacity:0;animation:sv1-daten 7s linear infinite;animation-delay:var(--d)}
@keyframes sv1-daten{0%,40%{opacity:0;stroke-dashoffset:0}45%{opacity:.8}85%{opacity:.8;stroke-dashoffset:-42}90%,100%{opacity:0;stroke-dashoffset:-48}}
/* 2 Oszilloskop */
.sv2 .geh{fill:#1b1b1a;stroke:#2e2e2d}.sv2 .schirm{fill:#0b0f0c}.sv2 .gitter{stroke:#18241b;stroke-width:1}
.sv2 .sig{fill:none;stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 3px currentColor)}
.sv2 .sig.sum{stroke:var(--acc);stroke-width:3;filter:drop-shadow(0 0 6px rgba(240,90,40,.8))}
.sv2 .spur{animation:sv2-lauf 3s linear infinite}
@keyframes sv2-lauf{to{transform:translateX(calc(var(--p) * -1))}}
.sv2 .glas{fill:rgba(255,255,255,.03);stroke:#2e2e2d}
.sv2 .kn{fill:#2c2c2b;stroke:#4a4a47;stroke-width:1.5}.sv2 .zeiger{stroke:#e9e8e4;stroke-width:2.5;stroke-linecap:round}
/* 3 Leiterplatte */
.sv3 .platine{fill:#1C3829;stroke:#2A5340}.sv3 .bohr{fill:#0f1f17;stroke:#c9a86a;stroke-width:2}
.sv3 .bahn{fill:none;stroke:#c9a86a;stroke-width:3;stroke-linejoin:round;opacity:.55}
.sv3 .puls{fill:none;stroke:#ffd9a0;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:14 460;animation:sv3-puls 2.2s linear infinite;filter:drop-shadow(0 0 5px #ffb45c)}
@keyframes sv3-puls{from{stroke-dashoffset:474}to{stroke-dashoffset:0}}
.sv3 .via{fill:#0f1f17;stroke:#c9a86a;stroke-width:2}
.sv3 .pad{fill:#c9a86a}.sv3 .loet{fill:#e8e2d4}
.sv3 .pin{fill:#c9a86a}
.sv3 .sv3-chip{fill:#121212;stroke:#3a3a38}.sv3 .kerbe{fill:#2c2c2b}
.sv3 .t{fill:#e9e8e4}.sv3 .t.klein{fill:#8fb39c}.sv3 .chipt{font-size:11px}.sv3 .chipk{fill:#6a6964}
.sv3 .led{fill:#58B368;animation:sv3-led 1.2s ease-in-out infinite;filter:drop-shadow(0 0 4px #58B368)}
@keyframes sv3-led{50%{opacity:.35}}
/* 4 Server-Rack */
.sv4 .rahmen{fill:#151514;stroke:#2c2c2b}
.sv4 .front{fill:#232322;stroke:#333331}.sv4 .haupt .front{fill:#2a2a28;stroke:var(--acc)}
.sv4 .schr{fill:#3a3a38}
.sv4 .blink{fill:#2f4a33;animation:sv4-blink 1s steps(1) infinite}
.sv4 .haupt .blink{fill:#4a2a1d;animation-name:sv4-blink-o}
@keyframes sv4-blink{50%{fill:#58B368}}
@keyframes sv4-blink-o{50%{fill:var(--acc)}}
.sv4 .spur{fill:#151514}
.sv4 .last{transform-box:fill-box;transform-origin:left;animation:sv4-last 2.6s ease-in-out infinite alternate}
@keyframes sv4-last{0%{transform:scaleX(.25)}100%{transform:scaleX(.95)}}
.sv4 .port{fill:#0a0a0a;stroke:#4a4a47}.sv4 .status{fill:#58B368}
@media (prefers-reduced-motion:reduce){.usv *{animation:none!important}}

/* Footer 7: ruhig, zentriert, in der Hausfarbe */
.fn{background:#1C3829;color:var(--bg);padding:clamp(80px,9vw,130px) clamp(24px,5vw,80px) clamp(36px,4vw,56px);display:grid;gap:clamp(70px,8vw,110px)}
.fn-mitte{display:grid;justify-items:center;text-align:center;gap:22px}
.fn-marke{display:grid;justify-items:center;gap:12px}
.fn-marke img{width:44px;height:44px;filter:brightness(0) invert(1);opacity:.95}
.fn-marke span{font-family:var(--m);font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em}
.fn-kicker{font-family:var(--m);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,232,228,.55);margin-top:18px}
.fn-gross{font-size:clamp(2.8rem,7vw,7rem);font-weight:400;letter-spacing:-.045em;line-height:1}
.fn-knopf{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 26px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(233,232,228,.7);transition:background .3s,color .3s}
.fn-knopf span{transition:transform .3s var(--ease)}
.fn-knopf:hover{background:var(--bg);color:#1C3829}.fn-knopf:hover span{transform:translateX(4px)}
.fn-spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);border-top:1px solid rgba(233,232,228,.18);padding-top:28px}
.fn-spalten p{line-height:1.9}
.fn-k{font-family:var(--m);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,232,228,.55);margin-bottom:8px}
.fn-leise{color:rgba(233,232,228,.55)}
.fn-spalten a:hover{text-decoration:underline;text-underline-offset:4px}
.fn-rechts{text-align:right}
@media (max-width:820px){.fn-spalten{grid-template-columns:1fr;gap:28px}.fn-rechts{text-align:left}}

/* Test: Hero dunkel, Werkbank hell */
.hv4.nacht{background:var(--night);background-image:none;color:var(--bg)}
.hv4.nacht .m{color:#77766f}.hv4.nacht .grau{color:#55544f}.hv4.nacht .lead{color:#b8b7b1}
.hv4.nacht .hv4-feld{background:#1d1d1c;color:var(--bg);box-shadow:inset 0 0 0 1px #2e2e2d,0 20px 40px -24px #000}
.hv4.nacht .hv4-chips button{color:#a9a8a3;box-shadow:inset 0 0 0 1px #3a3a38}
.hv4.nacht .hv4-chips button.an{background:var(--bg);color:var(--ink)}
.hv4.nacht .hv4-g:not(.an){opacity:.32;filter:saturate(.4)}
.hv4.nacht .phone::before{box-shadow:0 30px 60px -6px rgba(0,0,0,.75)}
.hv4.nacht .hv4-leiste{background:#0b0b0b;border-top:1px solid #222}
.hv4.nacht .hv4-leiste a{border-right-color:#222}.hv4.nacht .hv4-leiste a.an{background:#141413}
.hv4.nacht .hv4-leiste a:not(.an) b{color:#5d5c58}.hv4.nacht .hv4-leiste span{color:#b8b7b1}
.was-werkbank.hell{background:transparent;color:var(--ink);margin:0;border-radius:0}
.was-werkbank.hell .kopf .m{color:var(--mute)}.was-werkbank.hell .h2 .grau{color:var(--faint)}
.was-werkbank.hell .werkbank{box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.was-werkbank.hell .btn{background:var(--ink)!important;color:var(--bg)!important}
/* Footer 7 weiss */
.fn{background:#FFFFFF;color:var(--ink);border-top:1px solid var(--line)}
.fn-marke img{filter:none;opacity:1}
.fn-kicker,.fn-k,.fn-leise{color:var(--mute)}
.fn-knopf{box-shadow:inset 0 0 0 1px var(--ink)}
.fn-knopf:hover{background:var(--ink);color:#fff}
.fn-spalten{border-top-color:var(--line)}
/* Footer 7 in Seitenfarbe, Logo grösser */
.fn{background:var(--bg)}
.fn-marke{gap:16px}
.fn-marke img{width:clamp(64px,6vw,88px);height:auto}
.fn-marke span{font-size:.76rem}

/* KI-Block neu: Foto rein, Produkt raus */
.kx{display:grid;gap:clamp(30px,4vw,56px)}
.kx-buehne{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,4vw,70px);padding:clamp(70px,7vw,100px) clamp(24px,5vw,80px) clamp(50px,5vw,80px);border-radius:var(--r);background:radial-gradient(70% 90% at 50% 40%,#232322,#121212 70%);box-shadow:inset 0 0 0 1px #262625;overflow:hidden}
.kx-ecke{position:absolute;top:20px;font-family:var(--m);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#6f6e69}
.kx-ecke.ol{left:22px}.kx-ecke.or{right:22px}
.kx-etikett{position:relative;justify-self:end;width:min(100%,330px);background:#FBFAF6;color:#111;border-radius:6px;padding:22px 22px 18px;box-shadow:0 40px 60px -24px #000,0 2px 0 #fff inset;transform:rotate(-4deg);font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.kx-etikett b{display:block;font-size:1.7rem;font-weight:900;border-bottom:8px solid #111;padding-bottom:4px}
.kx-etikett p{font-size:.82rem;padding:6px 0;border-bottom:2px solid #111}
.kx-ez{display:flex;justify-content:space-between;font-size:.92rem;padding:9px 0;border-bottom:1px solid #111}
.kx-ez span:last-child{font-weight:700}
.kx-etikett .kx-sorte{border:0;padding-top:12px;font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.kx-scan{position:absolute;left:-10%;right:-10%;top:0;height:3px;background:var(--acc);box-shadow:0 0 18px 6px rgba(240,90,40,.45);opacity:0}
.kx[data-k="1"] .kx-scan,.kx[data-k="2"] .kx-scan{opacity:1;animation:kx-scan 1.3s ease-in-out infinite alternate}
@keyframes kx-scan{from{top:4%}to{top:94%}}
.kx-schritte{list-style:none;display:grid;gap:10px}
.kx-schritte li{display:grid;grid-template-columns:10px auto 1fr;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:12px;background:#1b1b1a;box-shadow:inset 0 0 0 1px #2a2a29;transition:background .4s,box-shadow .4s}
.kx-schritte i{width:8px;height:8px;border-radius:50%;background:#3a3a38;transition:background .4s,box-shadow .4s}
.kx-schritte .m{color:#55544f}
.kx-schritte b{font-weight:500;font-size:1rem;color:#6f6e69;white-space:nowrap;transition:color .4s}
.kx-schritte li.an{background:#222221;box-shadow:inset 0 0 0 1px #3a3a38}
.kx-schritte li.an i{background:var(--acc);box-shadow:0 0 10px rgba(240,90,40,.8)}
.kx-schritte li.an b{color:var(--bg)}
.kx-schritte li.fertig i{background:#58B368;box-shadow:none}
.kx-schritte li.fertig b{color:#a9a8a3}
.kx-phone{--w:clamp(220px,19vw,280px);justify-self:start}
.kx-phone::before{box-shadow:0 40px 70px -10px rgba(0,0,0,.8)}
.phone .screen.kx-shop{background:#fff;padding:calc(var(--w) * .15) 7% 0;display:flex;flex-direction:column;gap:9px;text-align:left}
.kx-kopf{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;font-weight:600;color:#111}
.kx-live{font-family:var(--m);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:#eee;color:#999;transition:background .4s,color .4s}
.kx[data-k="5"] .kx-live,.kx[data-k="6"] .kx-live,.kx[data-k="7"] .kx-live,.kx[data-k="8"] .kx-live{background:#58B368;color:#fff}
.kx-bild{height:calc(var(--w) * .58);border-radius:12px;background:linear-gradient(160deg,#f3f1ec,#e3e0d8);display:grid;place-items:center}
.kx-dose{position:relative;width:38%;height:72%;border-radius:10px 10px 12px 12px;background:linear-gradient(90deg,#d9d6cf,#fafaf8 45%,#cfccc4);box-shadow:0 14px 20px -12px rgba(0,0,0,.4);display:grid;place-items:center}
.kx-dose i{position:absolute;top:-8%;left:-4%;right:-4%;height:16%;border-radius:6px;background:#1C3829}
.kx-dose b{font-family:var(--m);font-size:.6rem;letter-spacing:.14em;color:#1C3829}
.kx-titel{font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:#111;min-height:1.3em}
.kx-titel span::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--acc);animation:blinken 1s steps(1) infinite}
.kx-preis{font-size:.8rem;color:#555;opacity:0;transition:opacity .4s}
.kx:not([data-k="0"]):not([data-k="1"]) .kx-preis{opacity:1}
.kx-tab{display:grid;border-top:1px solid #eee}
.kx-z{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:.72rem;padding:6px 6px;border-bottom:1px solid #eee;color:#333;opacity:0;transform:translateX(10px);transition:opacity .4s,transform .5s var(--ease),background .4s}
.kx-z b{font-weight:600}
.kx-z em{position:absolute;right:46px;font-style:normal;font-family:var(--m);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase}
.kx:is([data-k="3"],[data-k="4"],[data-k="5"],[data-k="6"],[data-k="7"],[data-k="8"]) .kx-z{opacity:1;transform:none}
.kx-z:nth-child(2){transition-delay:.15s}.kx-z:nth-child(3){transition-delay:.3s}
.kx[data-k="3"] .kx-unsicher{background:rgba(240,90,40,.1);box-shadow:inset 2px 0 0 var(--acc)}
.kx[data-k="3"] .kx-unsicher em{color:var(--acc)}.kx[data-k="3"] .kx-unsicher em::before{content:"prüfen"}
.kx:is([data-k="4"],[data-k="5"],[data-k="6"],[data-k="7"],[data-k="8"]) .kx-unsicher em{color:#58B368}
.kx:is([data-k="4"],[data-k="5"],[data-k="6"],[data-k="7"],[data-k="8"]) .kx-unsicher em::before{content:"✓ bestätigt"}
.kx-text{display:grid;gap:5px;margin-top:2px}
.kx-text i{height:5px;border-radius:3px;background:#e4e2dd;width:0;transition:width .8s var(--ease)}
.kx:is([data-k="5"],[data-k="6"],[data-k="7"],[data-k="8"]) .kx-text i:nth-child(1){width:96%}
.kx:is([data-k="5"],[data-k="6"],[data-k="7"],[data-k="8"]) .kx-text i:nth-child(2){width:88%;transition-delay:.2s}
.kx:is([data-k="5"],[data-k="6"],[data-k="7"],[data-k="8"]) .kx-text i:nth-child(3){width:60%;transition-delay:.4s}
.kx-kaufen{margin-top:auto;margin-bottom:calc(var(--w) * .08);align-self:stretch;text-align:center;font-size:.72rem;font-weight:600;padding:10px;border-radius:99px;background:#111;color:#fff}
.kx-punkte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.kx-punkte .st-ki-punkt{display:grid;grid-template-columns:40px 1fr;gap:10px;padding-top:20px;border-top:1px solid #2a2a29}
.kx-punkte .st-ki-punkt .nr{font-family:var(--m);font-size:.8rem;color:var(--acc);padding-top:5px}
.kx-punkte .st-ki-punkt b{display:block;font-weight:500;font-size:clamp(1.2rem,1.6vw,1.5rem);letter-spacing:-.03em;margin-bottom:6px}
.kx-punkte .st-ki-punkt p{color:#a9a8a3;line-height:1.5}
.kx .st-ki-chips{border-top:1px solid #2a2a29}
@media (max-width:1000px){.kx-buehne{grid-template-columns:1fr;justify-items:center}.kx-etikett{justify-self:center}.kx-schritte{grid-template-columns:1fr 1fr;width:100%}.kx-phone{justify-self:center}.kx-punkte{grid-template-columns:1fr}}
/* Schnittstelle 5: echte Geräte, synchron */
.sv-buehne-5{height:clamp(320px,30vw,440px)}
.sv5{position:relative;width:100%;height:100%;container-type:size}
.sv5-win{position:absolute;left:4%;top:50%;width:46cqw;transform:translateY(-50%);box-shadow:0 40px 70px -30px #000}
.sv5-win .inhalt video{width:100%;display:block}
.sv5-phone{position:absolute;right:8%;top:50%;transform:translateY(-50%);--w:min(17cqw,40cqh)}
.sv5-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sv5-linie{fill:none;stroke:#3a3a38;stroke-width:2;stroke-dasharray:3 5}
.sv5-glanz{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:30 400;animation:sv5-glanz 2s linear infinite;filter:drop-shadow(0 0 6px rgba(240,90,40,.9))}
@keyframes sv5-glanz{from{stroke-dashoffset:430}to{stroke-dashoffset:0}}
.sv5-paket rect{fill:#F6F5F2;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.sv5-paket circle{fill:var(--acc)}
.sv5-paket text{font-family:var(--s,inherit);font-size:7.6px;font-weight:500;fill:#111;text-anchor:middle}
.sv5-status{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:rgba(30,30,29,.85);box-shadow:inset 0 0 0 1px #2e2e2d;font-family:var(--m);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#bdbcb7;white-space:nowrap}
.sv5-led{width:7px;height:7px;border-radius:50%;background:#58B368;box-shadow:0 0 8px rgba(88,179,104,.8)}

/* KI-Block 2: drei Kacheln */
.kk{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kk-kachel{background:var(--card);border-radius:var(--r);padding:14px 14px 30px;display:flex;flex-direction:column;gap:12px}
.kk-buehne{position:relative;height:clamp(260px,24vw,340px);border-radius:16px;background:var(--bg2);overflow:hidden;display:grid;place-items:center;margin-bottom:12px}
.kk-titel{margin:0 14px;font-size:clamp(2rem,3.4vw,3.4rem);font-weight:500;letter-spacing:-.05em;line-height:1}
.kk-text{margin:0 14px;color:var(--ink2);line-height:1.5;max-width:34ch}
.kk-etikett{width:56%;background:#fff;border-radius:6px;padding:16px 14px;display:grid;gap:9px;box-shadow:0 20px 30px -18px rgba(0,0,0,.4);transform:rotate(-4deg);font-family:Arial,sans-serif}
.kk-etikett b{font-size:1rem;font-weight:900;border-bottom:5px solid #111;padding-bottom:3px}
.kk-etikett i{height:6px;border-radius:2px;background:#e1e0db}.kk-etikett i:nth-child(odd){width:70%}
.kk-scan{position:absolute;left:12%;right:12%;height:2px;top:20%;background:var(--acc);box-shadow:0 0 14px 4px rgba(240,90,40,.45);animation:kk-scan 2.4s ease-in-out infinite alternate}
@keyframes kk-scan{to{top:78%}}
.kk-chip{position:absolute;right:8%;padding:7px 12px;border-radius:99px;background:var(--ink);color:var(--bg);font-family:var(--m);font-size:.66rem;opacity:0;animation:kk-chip 4.8s var(--ease) infinite}
.kk-chip.c1{top:28%}.kk-chip.c2{top:46%;animation-delay:.8s}
@keyframes kk-chip{0%,20%{opacity:0;transform:translateX(-20px)}30%,80%{opacity:1;transform:none}100%{opacity:0}}
.kk-blatt{width:70%;background:#fff;border-radius:12px;padding:18px;display:grid;gap:9px;box-shadow:0 20px 30px -18px rgba(0,0,0,.35)}
.kk-blatt b{font-size:.9rem;font-weight:600;margin-bottom:4px}
.kk-blatt i{height:6px;border-radius:3px;background:#e4e2dd;width:0;animation:ki-zeile 5s var(--ease) infinite}
.kk-blatt i:nth-of-type(1){--z:96%}.kk-blatt i:nth-of-type(2){--z:88%;animation-delay:.5s}.kk-blatt i:nth-of-type(3){--z:94%;animation-delay:1s}.kk-blatt i:nth-of-type(4){--z:56%;animation-delay:1.5s}
.kk-cur{width:2px;height:14px;background:var(--acc);animation:blinken 1s steps(1) infinite}
.kk-liste{width:76%;background:#fff;border-radius:12px;padding:8px 14px;box-shadow:0 20px 30px -18px rgba(0,0,0,.35)}
.kk-liste div{display:grid;grid-template-columns:1fr auto 70px;gap:10px;align-items:center;padding:11px 4px;border-bottom:1px solid #eee;font-size:.82rem}
.kk-liste div:last-child{border-bottom:0}
.kk-liste em{font-style:normal;font-family:var(--m);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;text-align:right}
.kk-liste em.ok{color:#58B368}
.kk-rot{border-radius:8px;animation:kk-rot 5s steps(1) infinite}
.kk-rot em::before{content:"prüfen";color:var(--acc);animation:kk-rot-t 5s steps(1) infinite}
@keyframes kk-rot{0%,55%{background:rgba(240,90,40,.1);box-shadow:inset 2px 0 0 var(--acc)}56%,100%{background:transparent;box-shadow:none}}
@keyframes kk-rot-t{0%,55%{content:"prüfen";color:var(--acc)}56%,100%{content:"✓ bestätigt";color:#58B368}}
.kk-fuss{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
@media (max-width:1000px){.kk{grid-template-columns:1fr}}

/* KI-Block 3: Vorher und Nachher */
.vn{--x:50%;position:relative;height:clamp(380px,36vw,520px);border-radius:var(--r);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;margin-bottom:clamp(30px,4vw,56px)}
.vn-seite{position:absolute;inset:0;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(40px,5vw,70px)}
.vn-vorher{background:#1b1b1a}
.vn-nachher{background:radial-gradient(80% 100% at 70% 30%,#2a2a28,#161615);clip-path:inset(0 0 0 var(--x))}
.vn-fenster{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 40px 70px -30px #000}
.vn-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#f1f0ed;border-bottom:1px solid #e6e5e1}
.vn-bar i{width:9px;height:9px;border-radius:50%;background:#d3d2cd}
.vn-bar span{margin-left:10px;font-family:var(--m);font-size:.6rem;color:#8a8984}
.vn-form{padding:10px 18px 16px}
.vn-z{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #eee;font-size:.88rem;color:#555}
.vn-z b{height:30px;border-radius:7px;background:#f4f3f0;box-shadow:inset 0 0 0 1px #e6e5e1;display:flex;align-items:center;padding:0 12px;font-weight:500;color:#111}
.vn-vorher .vn-z:first-child b::after{content:"";width:1.5px;height:14px;background:#111;animation:blinken 1s steps(1) infinite}
.vn-nachher .vn-z b{background:#fff;box-shadow:inset 0 0 0 1px #d8e9dc}
.vn-z em{font-style:normal;font-family:var(--m);font-size:.56rem;letter-spacing:.06em;padding:3px 7px;border-radius:5px;background:rgba(88,179,104,.14);color:#3d8a4e}
.vn-uhr{display:grid;gap:6px;color:var(--bg)}
.vn-uhr .m{color:#77766f}
.vn-uhr b{font-family:var(--m);font-weight:400;font-size:clamp(3rem,6vw,6rem);letter-spacing:-.02em;line-height:1}
.vn-nachher .vn-uhr b{color:var(--acc)}
.vn-label{position:absolute;top:18px;font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#a9a8a3}
.vn-vorher .vn-label{left:22px}.vn-nachher .vn-label{right:22px;color:var(--acc)}
.vn-griff{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--bg);box-shadow:0 0 20px rgba(0,0,0,.6)}
.vn-griff span{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;font-size:1.2rem;box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.vn-sec .kopf{color:var(--bg)}
@media (max-width:820px){.vn{height:auto;aspect-ratio:.72}.vn-seite{grid-template-columns:1fr;padding:56px 18px 24px;align-content:center}.vn-z{grid-template-columns:80px 1fr auto;font-size:.76rem}}
/* KI-Block 3 nachgebessert */
.vn-seite{grid-template-columns:1fr;justify-items:center;padding:clamp(56px,6vw,80px) clamp(18px,4vw,60px)}
.vn-fenster{width:min(100%,620px)}
.vn-z b{justify-content:flex-end}
.vn-uhr{position:absolute;bottom:clamp(18px,2.4vw,30px)}
.vn-vorher .vn-uhr{left:clamp(18px,2.4vw,30px)}
.vn-nachher .vn-uhr{right:clamp(18px,2.4vw,30px);text-align:right}
.vn-uhr b{font-size:clamp(2.2rem,4vw,4rem)}
.vn-vorher .vn-z:first-child b::after{margin-left:auto}
@media (max-width:820px){.vn{aspect-ratio:.62}.vn-seite{align-content:start;padding-top:56px}}
/* Schnittstelle 6: Sync-Protokoll */
.sv-buehne-6,.sv-buehne-7,.sv-buehne-8{height:clamp(340px,30vw,440px)}
.sv6{width:min(92%,560px);background:rgba(28,28,27,.9);border-radius:16px;box-shadow:inset 0 0 0 1px #2e2e2d,0 40px 70px -30px #000;overflow:hidden}
.sv6-kopf{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #2a2a29}
.sv6-kopf b{font-weight:500;font-size:.95rem;color:var(--bg)}.sv6-kopf .m{margin-left:auto;color:#6f6e69}
.sv6-led{width:8px;height:8px;border-radius:50%;background:#58B368;box-shadow:0 0 0 3px rgba(88,179,104,.2);animation:st-puls 2s ease-in-out infinite;flex:none}
.sv6-liste{list-style:none;height:260px;overflow:hidden;position:relative}
.sv6-liste li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:11px 18px;border-bottom:1px solid #232322;animation:sv6-rein .6s var(--ease) both}
.sv6-liste li:first-child{background:linear-gradient(90deg,rgba(240,90,40,.08),transparent)}
@keyframes sv6-rein{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.sv6-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:var(--m);font-size:.62rem;font-weight:500;color:#fff}
.sv6-text b{display:block;font-weight:500;font-size:.86rem;color:var(--bg)}
.sv6-text span{font-size:.76rem;color:#8a8984}
.sv6-meta{display:grid;justify-items:end;gap:4px;font-family:var(--m);font-size:.58rem;color:#6f6e69}
.sv6-meta em{font-style:normal;padding:3px 7px;border-radius:5px;background:rgba(88,179,104,.14);color:#58B368;letter-spacing:.06em;text-transform:uppercase}
.sv6-meta em.warn{background:rgba(240,90,40,.14);color:var(--acc)}
/* Schnittstelle 7: API-Aufruf */
.sv7{display:grid;grid-template-columns:1.15fr 60px 1fr;align-items:center;gap:10px;width:92%}
.sv7-code{background:#0d0d0d;border-radius:14px;box-shadow:inset 0 0 0 1px #2a2a29,0 30px 60px -30px #000;overflow:hidden}
.sv7-bar{display:flex;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid #222;font-family:var(--m);font-size:.66rem;color:#a9a8a3}
.sv7-meth{padding:3px 7px;border-radius:5px;background:rgba(240,90,40,.16);color:var(--acc)}
.sv7-code pre{margin:0;padding:14px 16px 18px;min-height:190px;font-family:var(--m);font-size:clamp(.62rem,.85vw,.76rem);line-height:1.75;color:#d9d8d3;white-space:pre-wrap}
.sv7-code pre .k{color:#8fb39c}.sv7-code pre .s{color:#f2a487}.sv7-code pre .n{color:#e9e8e4}
.sv7-pfeil{position:relative;height:2px;background:#2e2e2d}
.sv7-pfeil i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px rgba(240,90,40,.9);opacity:0}
.sv7.sendet .sv7-pfeil i{animation:sv7-flug .7s var(--ease) forwards}
@keyframes sv7-flug{0%{opacity:1;left:0}100%{opacity:1;left:calc(100% - 8px)}}
.sv7-rechts{display:grid;gap:12px}
.sv7-antwort,.sv7-produkt{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--ease)}
.sv7.antwort .sv7-antwort,.sv7.produkt .sv7-produkt{opacity:1;transform:none}
.sv7-antwort{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#1b1b1a;box-shadow:inset 0 0 0 1px #2e2e2d}
.sv7-code201{font-family:var(--m);font-size:.7rem;padding:3px 7px;border-radius:5px;background:rgba(88,179,104,.16);color:#58B368}
.sv7-antwort b{font-weight:500;color:var(--bg)}.sv7-antwort .m{margin-left:auto;color:#6f6e69}
.sv7-produkt{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center;padding:14px;border-radius:14px;background:#fff;box-shadow:0 30px 50px -24px #000}
.sv7-produkt .kx-dose{width:54px;height:66px;margin:auto}
.sv7-produkt b{display:block;font-weight:600;font-size:.95rem;color:#111}
.sv7-produkt span{display:block;font-size:.78rem;color:#777}
.sv7-produkt em{display:inline-block;margin-top:8px;font-style:normal;font-family:var(--m);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:#58B368;color:#fff}
/* Schnittstelle 8: einmal ändern, überall aktuell */
.sv8{display:grid;grid-template-columns:1.2fr 70px auto;align-items:center;gap:6px;width:92%}
.sv8-admin{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 40px 70px -30px #000}
.sv8-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#f1f0ed;border-bottom:1px solid #e6e5e1}
.sv8-bar i{width:9px;height:9px;border-radius:50%;background:#d3d2cd}
.sv8-bar span{margin-left:8px;font-family:var(--m);font-size:.58rem;color:#8a8984}
.sv8-zeile{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid #eee}
.sv8-zeile.leise{opacity:.45}
.sv8-zeile b{display:block;font-weight:600;font-size:.85rem;color:#111}.sv8-zeile span{font-size:.72rem;color:#777}
.kx-dose.klein{width:30px;height:36px;border-radius:6px;margin:auto}
.sv8-stepper{display:flex;align-items:center;gap:4px;padding:3px;border-radius:10px;background:#f4f3f0;box-shadow:inset 0 0 0 1px #e6e5e1}
.sv8-stepper button{width:26px;height:26px;border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12);font-size:.9rem;color:#111;transition:transform .12s,background .2s}
.sv8-stepper button.druck{transform:scale(.88);background:var(--acc);color:#fff}
.sv8-stepper b{min-width:30px;text-align:center;font-family:var(--m);font-weight:500;font-size:.82rem;color:#111}
.sv8-status{display:flex;align-items:center;gap:8px;padding:10px 14px;font-family:var(--m);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:#777}
.sv8-linie{width:100%;height:20px}
.sv8-linie path{fill:none;stroke:#3a3a38;stroke-width:2;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.sv8-linie .sv8-puls{stroke:var(--acc);stroke-dasharray:24 200;stroke-dashoffset:224;stroke-width:3}
.sv8.sync .sv8-puls{animation:sv8-puls .5s linear}
@keyframes sv8-puls{to{stroke-dashoffset:0}}
.sv8-phone{--w:clamp(150px,13vw,200px)}
.sv8-lager{display:flex;align-items:center;gap:6px;font-size:.7rem;color:#333;padding:4px 8px;border-radius:8px;transition:background .4s}
.sv8-lager.neu{background:rgba(240,90,40,.12)}
.sv8-punkt{width:6px;height:6px;border-radius:50%;background:#58B368}
@media (max-width:900px){.sv7{grid-template-columns:1fr;gap:16px}.sv7-pfeil{display:none}.sv8{grid-template-columns:1fr;justify-items:center}.sv8-linie{display:none}.sv-buehne-7,.sv-buehne-8{height:auto;padding:30px 0}}

.vn-wahl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.vn-wahl button{font-family:var(--m);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border-radius:99px;color:#a9a8a3;box-shadow:inset 0 0 0 1px #3a3a38;cursor:pointer;transition:background .3s,color .3s}
.vn-wahl button.an{background:var(--bg);color:var(--ink);box-shadow:none}
.vn-form,.vn-uhr{transition:opacity .35s}
.vn.wechsel .vn-form,.vn.wechsel .vn-uhr{opacity:0}
.vn-hinweis{margin-left:auto;align-self:center;color:#6f6e69}
.sv7-produkt .kx-dose b{font-size:.42rem;letter-spacing:.1em}

/* Kontakt 1: Gespräch */
.kc1{display:grid;grid-template-columns:minmax(300px,.8fr) 1.4fr;gap:14px;padding:100px var(--g) clamp(60px,8vw,110px);align-items:start}
.kc1-person{position:sticky;top:100px;background:var(--card);border-radius:var(--r);overflow:hidden}
.kc1-foto{aspect-ratio:4/4.4;overflow:hidden}.kc1-foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.kc1-daten{padding:24px 26px 28px;display:grid;gap:6px}
.kc1-name{font-size:1.7rem;font-weight:500;letter-spacing:-.035em;margin-top:6px}
.kc1-rolle{color:var(--ink2)}
.kc1-daten ul{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.kc1-daten li{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.kc1-daten a{border-bottom:1px solid var(--ink)}
.kc1-chat{background:var(--card);border-radius:var(--r);padding:clamp(24px,3vw,40px);min-height:620px;display:grid;align-content:start;gap:18px}
.kc1-verlauf{display:grid;gap:14px}
.kc1-b{max-width:78%;padding:16px 20px;border-radius:22px 22px 22px 6px;background:#fff;font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:-.02em;line-height:1.3;box-shadow:0 10px 24px -18px rgba(0,0,0,.35);animation:kc1-rein .5s var(--ease) both}
.kc1-b.ich{justify-self:end;background:var(--ink);color:var(--bg);border-radius:22px 22px 6px 22px}
.kc1-tippt{display:inline-flex;gap:4px;padding:16px 18px;border-radius:22px;background:#fff;width:max-content}
.kc1-tippt i{width:6px;height:6px;border-radius:50%;background:#b5b4af;animation:fa-punkt 1s ease-in-out infinite}.kc1-tippt i:nth-child(2){animation-delay:.15s}.kc1-tippt i:nth-child(3){animation-delay:.3s}
@keyframes kc1-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kc1-wahl{display:flex;flex-wrap:wrap;gap:8px;animation:kc1-rein .5s var(--ease) both}
.kc1-wahl button{padding:12px 18px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--ink);font-size:1rem;cursor:pointer;transition:background .25s,color .25s}
.kc1-wahl button:hover{background:var(--ink);color:var(--bg)}
.kc1-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;animation:kc1-rein .5s var(--ease) both}
.kc1-form input{height:54px;border-radius:16px;border:0;padding:0 18px;background:#fff;font:inherit;box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:900px){.kc1{grid-template-columns:1fr}.kc1-person{position:static}.kc1-form{grid-template-columns:1fr}}
/* Kontakt 2: Drei Wege */
.kc2{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:14px;align-items:stretch}
.kc2-karte{background:var(--card);border-radius:var(--r);padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column;gap:18px}
.kc2-karte.dunkel{background:var(--night);color:var(--bg)}.kc2-karte.dunkel .m{color:#77766f}
.kc2-karte.hell{background:#fff}
.kc2-titel{font-size:clamp(1.8rem,2.8vw,2.8rem);font-weight:500;letter-spacing:-.045em;line-height:1}
.kc2-titel span{color:var(--faint)}.dunkel .kc2-titel span{color:#55544f}
.kc2-tage{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.kc2-tage button{display:grid;gap:2px;justify-items:center;padding:12px 4px;border-radius:12px;background:#1d1d1c;box-shadow:inset 0 0 0 1px #2e2e2d;color:#a9a8a3;cursor:pointer;transition:background .25s,color .25s}
.kc2-tage button b{font-size:1.4rem;font-weight:500;color:var(--bg)}
.kc2-tage button small{font-family:var(--m);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase}
.kc2-tage button.an{background:var(--bg);color:var(--ink)}.kc2-tage button.an b{color:var(--ink)}
.kc2-zeiten,.kc2-art{display:flex;flex-wrap:wrap;gap:6px}
.kc2-zeiten button,.kc2-art button{padding:9px 14px;border-radius:99px;box-shadow:inset 0 0 0 1px #3a3a38;color:#bdbcb7;font-family:var(--m);font-size:.7rem;cursor:pointer}
.kc2-zeiten button.an,.kc2-art button.an{background:var(--acc);color:#fff;box-shadow:none}
.kc2-los{margin-top:auto;background:var(--bg);color:var(--ink);justify-content:center}
.kc2-feld{display:grid;gap:8px}
.kc2-feld input,.kc2-feld textarea{width:100%;border:0;border-radius:14px;padding:14px 16px;background:#fff;font:inherit;box-shadow:inset 0 0 0 1px var(--line)}
.kc2-feld textarea{min-height:120px;resize:vertical}
.kc2-karte .btn{margin-top:auto;justify-content:center}
.kc2-person{display:flex;align-items:center;gap:14px}
.kc2-person img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:center 20%}
.kc2-person b{display:block;font-weight:500}.kc2-person span{font-size:.9rem;color:var(--ink2)}
.kc2-mail{font-size:clamp(1.2rem,1.8vw,1.6rem);font-weight:500;letter-spacing:-.03em;border-bottom:2px solid var(--acc);align-self:flex-start;padding-bottom:3px}
@media (max-width:1000px){.kc2{grid-template-columns:1fr}}
/* Kontakt 3: Briefing-Pult */
.kc3{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.kc3-pult{background:linear-gradient(#D9D8D3,#E4E3DF);border-radius:28px;padding:clamp(22px,3vw,38px);box-shadow:inset 0 2px 8px rgba(0,0,0,.12),0 1px 0 #fff;display:grid;gap:clamp(24px,3vw,36px)}
.kc3-reihe{display:grid;gap:12px}
.kc3-tasten{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kc3-taste{height:100px;border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;background:linear-gradient(#FFFFFF,#F0EFEB);box-shadow:0 7px 0 #C2C1BC,0 12px 18px -10px rgba(0,0,0,.35),inset 0 1px 0 #fff;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.kc3-taste .kopf-t{display:flex;justify-content:space-between;align-items:center;font-family:var(--m);font-size:.6rem;color:var(--mute)}
.kc3-taste .led{width:8px;height:8px;border-radius:50%;background:#CFCEC9;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.kc3-taste b{font-size:1.15rem;font-weight:500;letter-spacing:-.02em}
.kc3-taste.an{transform:translateY(6px);box-shadow:0 1px 0 #C2C1BC,inset 0 1px 0 #fff}
.kc3-taste.an .led{background:var(--acc);box-shadow:0 0 0 3px rgba(240,90,40,.2),0 0 10px rgba(240,90,40,.7)}
.kc3-fader{display:grid;gap:10px}
.kc3-fader input{-webkit-appearance:none;appearance:none;width:100%;height:16px;border-radius:99px;background:linear-gradient(#0d0d0d,#232322);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 1px 0 #fff;outline:none}
.kc3-fader input::-webkit-slider-thumb{-webkit-appearance:none;width:64px;height:44px;border-radius:11px;cursor:grab;background:linear-gradient(90deg,transparent 30px,var(--acc) 30px 34px,transparent 34px),repeating-linear-gradient(90deg,#F8F7F4 0 3px,#D8D7D2 3px 5px);box-shadow:0 10px 16px -6px rgba(0,0,0,.45),0 3px 0 #B9B8B3}
.kc3-fader input::-moz-range-thumb{width:64px;height:44px;border-radius:11px;border:0;background:#F8F7F4;box-shadow:0 3px 0 #B9B8B3}
.kc3-skala{display:flex;justify-content:space-between;font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.kc3-start{display:flex;flex-wrap:wrap;gap:8px}
.kc3-start button{padding:12px 18px;border-radius:99px;background:linear-gradient(#fff,#f0efeb);box-shadow:0 4px 0 #C2C1BC;cursor:pointer;transition:transform .15s,box-shadow .15s}
.kc3-start button.an{transform:translateY(3px);box-shadow:0 1px 0 #C2C1BC;color:var(--acc)}
.kc3-rechts{background:var(--card);border-radius:var(--r);padding:clamp(22px,2.8vw,34px);display:grid;gap:14px;align-content:start}
.kc3-display{background:#0c0c0c;border-radius:16px;padding:16px 18px 18px;box-shadow:inset 0 2px 10px #000;color:var(--bg)}
.kc3-dkopf{display:flex;justify-content:space-between;align-items:center;font-family:var(--m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#6f6e69}
.kc3-led{width:7px;height:7px;border-radius:50%;background:#58B368;box-shadow:0 0 8px rgba(88,179,104,.8)}
.kc3-zeile{font-family:var(--m);font-size:clamp(1.2rem,1.9vw,1.7rem);letter-spacing:.04em;color:var(--acc);margin-top:14px;text-shadow:0 0 14px rgba(240,90,40,.5);min-height:1.3em}
.kc3-unter{font-size:.92rem;color:#a9a8a3;margin-top:6px}
.kc3-senden{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 10px 0 24px;border-radius:18px;background:var(--acc);color:#fff;font-weight:500;font-size:1.05rem;box-shadow:0 7px 0 #b8421b;transition:transform .15s,box-shadow .15s}
.kc3-senden:active{transform:translateY(5px);box-shadow:0 2px 0 #b8421b}
.kc3-senden i{width:44px;height:44px;border-radius:12px;background:rgba(0,0,0,.18);display:grid;place-items:center}.kc3-senden i svg{width:16px;height:16px}
@media (max-width:1000px){.kc3{grid-template-columns:1fr}.kc3-tasten{grid-template-columns:1fr 1fr}}
/* Schnittstelle 9: Bestellung bis Versand */
.sv-buehne-9{height:clamp(360px,32vw,460px)}
.sv9{--t:7s;display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:0;width:94%}
.sv9-phone{--w:clamp(130px,11vw,170px)}
.sv9-shop{background:#f4f3f0!important;padding:calc(var(--w) * .16) 8% 0;display:flex;flex-direction:column;gap:8px;text-align:left}
.sv9-app b{display:block;font-size:.66rem;font-weight:600;color:#111}.sv9-app span{font-size:.52rem;color:#888}
.sv9-toast{display:flex;gap:6px;align-items:center;padding:7px 8px;border-radius:10px;background:#fff;box-shadow:0 6px 14px -8px rgba(0,0,0,.35);animation:sv9-toast var(--t) var(--ease) infinite}
.sv9-toast b{display:block;font-size:.56rem;font-weight:600;color:#111}.sv9-toast span{font-size:.46rem;color:#777}
.sv9-ok{width:16px;height:16px;flex:none;border-radius:50%;background:#58B368;color:#fff!important;display:grid;place-items:center;font-size:.5rem!important}
@keyframes sv9-toast{0%{opacity:0;transform:translateY(-12px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-12px)}}
.sv9-liste{display:grid;gap:6px}.sv9-liste i{height:24px;border-radius:7px;background:#fff;opacity:.7}
.sv9-weg{position:relative;height:2px;margin:0 10px;background:repeating-linear-gradient(90deg,#3a3a38 0 4px,transparent 4px 9px)}
.sv9-weg i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px rgba(240,90,40,.9);opacity:0}
.sv9-weg.w1 i{animation:sv9-flug1 var(--t) linear infinite}.sv9-weg.w2 i{animation:sv9-flug2 var(--t) linear infinite}
@keyframes sv9-flug1{0%,8%{left:0;opacity:0}9%{opacity:1}20%{left:calc(100% - 10px);opacity:1}21%,100%{opacity:0;left:calc(100% - 10px)}}
@keyframes sv9-flug2{0%,52%{left:0;opacity:0}53%{opacity:1}64%{left:calc(100% - 10px);opacity:1}65%,100%{opacity:0;left:calc(100% - 10px)}}
.sv9-drucker{position:relative;width:clamp(150px,13vw,190px);display:grid;justify-items:center}
.sv9-gehaeuse{position:relative;z-index:2;width:100%;height:110px;border-radius:22px 22px 16px 16px;background:linear-gradient(#ecebe7,#d6d5d0);box-shadow:0 30px 40px -20px #000,inset 0 2px 0 #fff,inset 0 -6px 0 rgba(0,0,0,.08)}
.sv9-led{position:absolute;top:16px;right:18px;width:8px;height:8px;border-radius:50%;background:#58B368;animation:sv9-led var(--t) steps(1) infinite}
@keyframes sv9-led{0%,20%{background:#58B368;box-shadow:none}21%,48%{background:var(--acc);box-shadow:0 0 10px rgba(240,90,40,.9)}49%,100%{background:#58B368;box-shadow:none}}
.sv9-name{position:absolute;top:13px;left:18px;font-family:var(--m);font-size:.5rem;letter-spacing:.12em;color:#8a8984}
.sv9-schlitz{position:absolute;left:14%;right:14%;bottom:16px;height:6px;border-radius:3px;background:#2a2a28;box-shadow:inset 0 2px 3px #000}
.sv9-papier{position:relative;z-index:1;width:72%;height:150px;margin-top:-22px;overflow:hidden}
.sv9-etikett{position:absolute;left:0;right:0;top:0;padding:26px 10px 10px;background:#fbfaf6;border-radius:0 0 4px 4px;box-shadow:0 14px 20px -12px #000;display:grid;gap:3px;color:#111;transform:translateY(-100%);animation:sv9-druck var(--t) cubic-bezier(.4,0,.6,1) infinite}
@keyframes sv9-druck{0%,22%{transform:translateY(-100%)}46%,86%{transform:translateY(0)}94%,100%{transform:translateY(-100%)}}
.sv9-etikett b{font-size:.72rem;font-weight:700}.sv9-etikett span{font-size:.56rem}.sv9-etikett .m{font-size:.46rem;color:#777}
.sv9-code{display:flex;gap:1px;height:24px;margin:5px 0 3px}.sv9-code i{background:#111;height:100%}
.sv9-lager{width:clamp(150px,13vw,190px);padding:16px 16px 14px;border-radius:16px;background:#fff;box-shadow:0 30px 40px -20px #000;display:grid;gap:3px}
.sv9-lager .m{color:#8a8984}.sv9-lager b{font-size:.92rem;font-weight:600;color:#111}.sv9-lager > span{font-size:.72rem;color:#777}
.sv9-zahl{position:relative;height:56px;overflow:hidden;margin-top:6px}
.sv9-zahl span{position:absolute;left:0;font-family:var(--m);font-size:2.6rem;line-height:56px;color:#111;animation:sv9-alt var(--t) var(--ease) infinite}
.sv9-zahl .neu{color:var(--acc);animation-name:sv9-neu}
@keyframes sv9-alt{0%,64%{transform:none;opacity:1}70%,92%{transform:translateY(-100%);opacity:0}100%{transform:none;opacity:1}}
@keyframes sv9-neu{0%,64%{transform:translateY(100%);opacity:0}70%,92%{transform:none;opacity:1}100%{transform:translateY(100%);opacity:0}}
@media (max-width:900px){.sv9{grid-template-columns:1fr;justify-items:center;gap:18px}.sv9-weg{width:2px;height:28px;background:repeating-linear-gradient(#3a3a38 0 4px,transparent 4px 9px)}.sv9-weg i{display:none}.sv-buehne-9{height:auto;padding:30px 0}}
@media (prefers-reduced-motion:reduce){.sv9 *{animation:none!important}.sv9-etikett{transform:none}}
.sv9{grid-template-columns:auto minmax(56px,1fr) auto minmax(56px,1fr) auto}.sv9-drucker,.sv9-lager{width:clamp(140px,11.5vw,176px)}.sv9-phone{--w:clamp(120px,10vw,160px)}

/* echtes Produktfoto statt gezeichneter Dose */
.kx-bild{background:linear-gradient(160deg,#f6f5f1,#ebe8e1)!important}
.phone .screen .kx-foto,.kx-foto{width:auto!important;height:84%!important;object-fit:contain!important;filter:drop-shadow(0 12px 14px rgba(0,0,0,.18))}
.sv7-produkt .kx-foto{height:84px!important;margin:auto}
.sv8-foto{width:34px;height:44px;object-fit:contain;margin:auto}
.kx-bild{position:relative;overflow:hidden}.phone .screen .kx-bild .kx-foto,.kx-bild .kx-foto{position:absolute;inset:7%;width:86%!important;height:86%!important;object-fit:contain!important}
.fn-marke img{filter:brightness(0)!important}
/* Porträt ohne Glasleiste */
.st-glas{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:#fff;left:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);bottom:clamp(20px,2.4vw,30px);padding:0;grid-template-columns:1fr}
.st-glas .st-name{font-size:clamp(1.6rem,2.4vw,2.3rem);color:#fff}
.st-glas .m{color:rgba(255,255,255,.72)}
.st-anzeige{display:none!important}
.st-portrait::after{background:linear-gradient(rgba(0,0,0,.22),transparent 20%,transparent 58%,rgba(0,0,0,.55))!important}

/* Karussell-Pause */
.schiene-tasten .schiene-pause{color:var(--ink);position:relative}
.schiene-pause .ring{position:absolute;inset:0;width:100%!important;height:100%!important;transform:rotate(-90deg);pointer-events:none}
.schiene-pause .ring circle{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-dasharray:0 100}
.schiene-tasten.steht .schiene-pause .ring{display:none}
.schiene-tasten .schiene-pause svg{width:16px;height:16px}
.schiene-tasten.steht .schiene-pause{background:var(--ink);color:var(--bg)}

.kit-blatt{background:#F2EFE9;padding:2.6% 2.6% 2%}
.kit-blatt img{border-radius:0}

/* Leistungen-Entwürfe: gemeinsame Teile */
.lk-ziel{font-size:clamp(1.15rem,1.5vw,1.4rem);letter-spacing:-.02em;color:var(--ink);font-weight:500}
.lk-meta{display:grid;border-top:1px solid var(--line);margin-top:6px}
.lk-meta div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.lk-meta dd{text-align:right}
.lk-meta a{border-bottom:1px solid var(--ink)}
.lk-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 1 Bento */
.lk1{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.lk1-karte{background:var(--card);border-radius:var(--r);padding:12px;display:grid;grid-template-rows:auto 1fr;gap:16px}
.lk1-gross{grid-column:span 4}.lk1-klein{grid-column:span 2}.lk1-breit{grid-column:span 6;grid-template-columns:1.5fr 1fr;grid-template-rows:none}
.lk1-buehne{position:relative;height:clamp(320px,30vw,440px);border-radius:16px;overflow:hidden;display:grid;place-items:center;background-color:var(--bg2)}
.lk1-buehne .phone{--w:clamp(160px,13vw,210px);margin-top:18%}
.lk1-buehne .win{width:90%;margin-top:8%}
.lk1-breit .lk1-buehne{height:100%;min-height:420px}
.lk1-text{display:grid;gap:10px;align-content:start;padding:4px 12px 14px}
.lk1-text h2{font-size:clamp(2.2rem,4vw,4rem);font-weight:500;letter-spacing:-.05em;line-height:1}
.lk1-text p:not(.lk-ziel){color:var(--ink2);line-height:1.5}
@media (max-width:1000px){.lk1-gross,.lk1-klein,.lk1-breit{grid-column:span 6}.lk1-breit{grid-template-columns:1fr}.lk1-breit .lk1-buehne{min-height:340px}}
/* 2 Umschalter */
.lk2{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,4vw,60px);align-items:start}
.lk2-woerter{display:grid;border-top:1px solid var(--ink)}
.lk2-woerter button{display:flex;align-items:flex-start;gap:16px;text-align:left;padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(2.6rem,6vw,6rem);font-weight:500;letter-spacing:-.055em;line-height:.95;color:var(--faint);cursor:pointer;transition:color .35s,padding .45s var(--ease)}
.lk2-woerter sup{font-family:var(--m);font-size:.7rem;letter-spacing:.06em;color:var(--mute);margin-top:.6em}
.lk2-woerter button.an{color:var(--ink);padding-left:18px}
.lk2-woerter button.an sup{color:var(--acc)}
.lk2-rechts{position:sticky;top:100px;display:grid}
.lk2-panel{grid-area:1/1;display:grid;gap:18px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s var(--ease);pointer-events:none}
.lk2-panel.an{opacity:1;transform:none;pointer-events:auto}
.lk2-buehne{position:relative;height:clamp(360px,34vw,500px);border-radius:var(--r);overflow:hidden;display:grid;place-items:center;background-color:var(--bg2)}
.lk2-buehne .phone{--w:clamp(180px,14vw,230px);margin-top:16%}
.lk2-buehne .win{width:88%}
.lk2-info{display:grid;gap:10px}
.lk2-info p:not(.lk-ziel){color:var(--ink2);line-height:1.5;max-width:56ch}
@media (max-width:900px){.lk2{grid-template-columns:1fr}.lk2-rechts{position:static}}
/* 3 Akkordeon */
.lk3{display:flex;gap:10px;height:clamp(600px,50vw,720px)}
.lk3-panel{position:relative;flex:1;min-width:0;border-radius:var(--r);background:var(--card);overflow:hidden;cursor:pointer;transition:flex .7s var(--ease),background .4s}
.lk3-panel:hover{background:#fff}
.lk3-panel.an{flex:6;cursor:default;background:#fff}
.lk3-zu{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:22px 18px;transition:opacity .3s}
.lk3-zu b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(1.6rem,2.4vw,2.4rem);font-weight:500;letter-spacing:-.04em}
.lk3-panel.an .lk3-zu{opacity:0;pointer-events:none}
.lk3-auf{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;gap:16px;padding:12px;opacity:0;transition:opacity .4s}
.lk3-panel.an .lk3-auf{opacity:1;transition-delay:.25s}
.lk3-buehne{position:relative;border-radius:16px;overflow:hidden;display:grid;place-items:center;min-height:0;background-color:var(--bg2)}
.lk3-buehne .phone{--w:clamp(150px,12vw,200px);margin-top:16%}
.lk3-buehne .win{width:78%;margin-top:4%}
.lk3-info{display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr);gap:6px 24px;align-items:start;padding:0 10px 10px;min-width:560px}
.lk3-info .m{grid-row:span 3}
.lk3-info h2{font-size:clamp(2rem,3.4vw,3.4rem);font-weight:500;letter-spacing:-.05em;line-height:1;grid-column:2}
.lk3-info .lk-ziel{grid-column:2}
.lk3-info p:not(.lk-ziel){grid-column:2;color:var(--ink2);line-height:1.5}
.lk3-info .lk-meta{grid-column:3;grid-row:1/span 3}
@media (max-width:900px){.lk3{flex-direction:column;height:auto}.lk3-panel{flex:none;height:72px}.lk3-panel.an{height:auto}.lk3-zu{flex-direction:row;align-items:center}.lk3-zu b{writing-mode:horizontal-tb;transform:none}.lk3-panel.an .lk3-auf{position:static}.lk3-buehne{height:360px}.lk3-info{grid-template-columns:1fr;min-width:0}.lk3-info > *{grid-column:1!important;grid-row:auto!important}}

/* KI-Seite: Fähigkeiten-Atlas */
.kz{display:grid;grid-template-columns:1fr minmax(0,1.05fr);gap:clamp(16px,2.4vw,36px);align-items:start}
.kz-liste{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kz-gruppe{background:var(--card);border-radius:var(--r);padding:18px 14px 12px;display:grid;gap:2px;align-content:start}
.kz-bereich{display:flex;gap:10px;align-items:baseline;font-size:1.25rem;font-weight:500;letter-spacing:-.03em;padding:0 6px 10px}
.kz-bereich .m{color:var(--acc)}
.kz-f{position:relative;display:flex;gap:10px;align-items:baseline;text-align:left;padding:9px 10px;border-radius:10px;font-size:.98rem;color:var(--ink2);cursor:pointer;overflow:hidden;transition:background .25s,color .25s}
.kz-f .m{color:var(--faint);font-size:.68rem}
.kz-f:hover{background:var(--bg)}
.kz-f.an{background:var(--ink);color:var(--bg)}
.kz-f.an .m{color:var(--acc)}
.kz-zeit{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--acc)}
.kz-f.an .kz-zeit{width:calc(var(--z,0) * 100%)}
.kz-buehne{position:sticky;top:96px;min-height:clamp(560px,46vw,660px);display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start;gap:22px;padding:64px clamp(22px,3vw,44px) 60px;place-items:stretch}
.kz-kopf{display:grid;gap:8px}
.kz-titel{font-size:clamp(2rem,3.4vw,3.2rem);font-weight:500;letter-spacing:-.05em;line-height:1;color:#F4F2EE}
.kz-text{color:rgba(244,242,238,.62);max-width:46ch;line-height:1.45}
.kz-ein{display:grid;gap:8px}
.kz-ein .m,.kz-ok{color:rgba(244,242,238,.45)}
.kz-datei{position:relative;display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);overflow:hidden;font-family:var(--m);font-size:.82rem;color:#F4F2EE}
.kz-datei i{width:22px;height:26px;border-radius:4px;border:1.5px solid rgba(244,242,238,.6);flex:none;position:relative}
.kz-datei i::after{content:"";position:absolute;left:4px;right:4px;top:7px;height:1.5px;background:rgba(244,242,238,.6);box-shadow:0 5px 0 rgba(244,242,238,.6),0 10px 0 rgba(244,242,238,.6)}
.kz-datei::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-30%;background:linear-gradient(90deg,transparent,rgba(240,90,40,.35),transparent)}
.kz-buehne.lauf .kz-datei::after{animation:kz-scan 1.1s var(--ease) .1s 1}
@keyframes kz-scan{to{left:100%}}
.kz-fluss{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kz-fluss span{font-family:var(--m);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,242,238,.35);padding-top:10px;border-top:2px solid rgba(255,255,255,.1);transition:color .3s,border-color .3s}
.kz-fluss span.an{color:#F4F2EE;border-color:var(--acc)}
.kz-aus{display:grid;align-content:start}
.kz-aus div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ease)}
.kz-aus div.da{opacity:1;transform:none}
.kz-aus dt{font-family:var(--m);font-size:.74rem;letter-spacing:.04em;color:rgba(244,242,238,.5)}
.kz-aus dd{color:#F4F2EE;text-align:right}
.kz-ok{opacity:0;transition:opacity .4s}
.kz-ok.da{opacity:1;color:#8FD3A8}
@media (max-width:1000px){.kz{grid-template-columns:1fr}.kz-buehne{position:relative;top:0;order:-1;min-height:560px}}
@media (max-width:560px){.kz-liste{grid-template-columns:1fr}.kz-fluss span{font-size:.56rem}}
.lk2-panel:not(.an){transition-duration:.18s}

/* Einblicke: Bild bestimmt die Breite, Text bricht darunter um */
.schiene figure{grid-template-columns:min-content}
@media (max-width:700px){
  .schiene{gap:14px}
  .schiene figure .buehne{width:78vw;height:min(112vw,560px)}
  .schiene figure .buehne.breit{width:86vw;height:min(74vw,420px)}
  .schiene figure .phone{--w:min(52vw,230px)}
  .schiene figcaption{gap:10px}
  .schiene-tasten button{width:46px;height:46px}
}

/* ===== Handy: Luft statt voll ===== */
@media (max-width:700px){
  :root{--g:22px}
  .sec{padding-top:92px;padding-bottom:92px}
  .kopf{margin-bottom:30px;gap:14px}
  .kopf p.m.rechts{display:none}
  .h2{font-size:clamp(2.1rem,9.4vw,2.6rem)}
  /* Instrumente: vier kleine Kacheln statt vier Bildschirmhöhen */
  .leiste,.leiste.leiste{grid-template-columns:1fr 1fr;gap:10px}
  .leiste > div:only-child,.leiste > div:nth-child(odd):last-child{grid-column:1/-1}
  .leiste > div{min-height:0;padding:16px 16px 14px;gap:10px;border-radius:18px}
  .leiste .m{font-size:.58rem;line-height:1.45}
  .leiste .viz{height:54px}
  .leiste .viz svg{height:54px}
  .leiste .zahl{font-size:2.5rem}
  /* kleine Beschriftungen auf Bühnen und Schlagwort-Reihen nur am Desktop */
  .buehne .ecke,.wort-buehne .ecke{display:none}
  .projekt .chips,.reihe .chips{display:none}
  /* Werkbank: kürzerer Code */
  .wb-mitte pre{min-height:0;max-height:170px;overflow:hidden}
  /* KI-Atlas: Bereiche wischen statt 24 Zeilen untereinander */
  .kz-liste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--g) * -1);padding:0 var(--g) 4px;gap:10px;scrollbar-width:none}
  .kz-liste::-webkit-scrollbar{display:none}
  .kz-gruppe{flex:none;width:74vw;scroll-snap-align:center}
  .kz-buehne{min-height:0;padding:44px 22px 40px;gap:18px}
  .kz-titel{font-size:2.1rem}
}