/* Manrope (SIL Open Font License), lokal eingebunden: keine Anfrage an Google */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(../schrift/manrope-latin-ext.woff2?v=f0f3d418) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(../schrift/manrope-latin.woff2?v=c8eafee8) 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}
/* «Manrope Knopf»: dieselbe Datei, aber oben und unten gleich viel Luft um die Grossbuchstaben (Versalhöhe 0.72).
   So steht Text in Knöpfen genau in der Mitte, auf jedem Gerät gleich (Safari und Chrome lesen sonst andere Werte aus der Schrift). */
@font-face{font-family:"Manrope Knopf";font-style:normal;font-weight:400 800;font-display:swap;src:url(../schrift/manrope-latin-ext.woff2?v=f0f3d418) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;ascent-override:104.3%;descent-override:32.3%;line-gap-override:0%}
@font-face{font-family:"Manrope Knopf";font-style:normal;font-weight:400 800;font-display:swap;src:url(../schrift/manrope-latin.woff2?v=c8eafee8) 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;ascent-override:104.3%;descent-override:32.3%;line-gap-override:0%}

/* Thomas Spinnler · Portfolio v3
   Basis: portfolio-chat 2. Die Arbeiten tragen die Seite, das Interface bleibt schwarz-weiss.
   Ein 3D-Handy begleitet durch die Seite. Schrift Manrope wie im CV.
   Radius: Bilder 16px, Klickbares als Pill. Farbe nur für Projekte und die KI. */
:root{
  --bg:#FFFFFF; --soft:#F3F4F5; --ink:#161C22; --muted:#5A646E; --line:rgba(22,28,34,.12);
  --f:"Manrope","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,calc(5vw / var(--vz, 1)),72px); --max:1240px; --text:680px; --nav:68px;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-haus:cubic-bezier(.16,1,.3,1);
  --ai1:#1B3FD8; --ai2:#5B7CFF; --ai3:#22C7E6;
  /* Projektfarben: nur als Punkt, Linie und Akzent */
  --c-stele:#2E8B4F; --c-waerme:#D2452E; --c-ebl:#E8762D; --c-villiger:#A9853F; --c-bs:#3456F0; --c-jet:#C8102E; --c-bank:#00965E; --c-weitere:#8A949E;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-color:rgba(22,28,34,.28) var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--f);color:var(--ink);background:var(--bg);font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--ink);color:#fff}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
img,video,canvas{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.mark{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--ink);padding:7px 12px;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;line-height:1}
.mark i{width:6px;height:6px;border-radius:50%;background:var(--ink)}
/* Alle Knöpfe und Pillen: Schrift mit gleicher Luft oben und unten, Text steht genau mittig */
.btn,.filter button,.msg .acts a,.msg .acts button,.ai .chips-ai button,.kap-direkt,.cs-buehne .zurueck,.chips li,.meth li{font-family:"Manrope Knopf",var(--f);line-height:1}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,filter 200ms ease}
.btn:active{transform:scale(.97)}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{border:1px solid var(--line)}
.btn.grad{background:linear-gradient(120deg,var(--ai1),var(--ai2));color:#fff}
.btn svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){ .btn.dark:hover{background:#2A333C} .btn.ghost:hover{border-color:var(--ink)} .btn.grad:hover{filter:brightness(1.08)} }

.ph{background:var(--soft);border-radius:16px;overflow:hidden;position:relative}
.ph img,.ph video{width:100%;height:100%;object-fit:cover}
figcaption{margin-top:12px;font-size:15px;color:var(--muted)}

/* ================= Navigation ================= */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color 240ms ease}
.nav.solid{border-color:var(--line)}
.nav .wrap{height:var(--nav);display:flex;justify-content:space-between;align-items:center}
.nav ul{list-style:none;display:flex;align-items:center;gap:clamp(14px,calc(2.2vw / var(--vz, 1)),28px);font-size:15px;font-weight:600}
.nav ul a:not(.btn){text-decoration:none;color:var(--muted);transition:color 200ms ease}
.nav ul a:not(.btn):hover,.nav ul a[aria-current="true"]{color:var(--ink)}
.nav .btn{height:38px;padding:0 16px}
.nav{display:none} /* kein Logo oben: Die Überzeile im Einstieg nennt den Namen, unten steht er im Rahmen */
@media (max-width:860px){ .nav ul li.opt{display:none} }

/* ================= Das 3D-Handy: eine Leinwand über allem, klickt nicht ================= */
.handy3d{position:fixed;inset:0;width:calc(100vw / var(--vz, 1));height:calc(100vh / var(--vz, 1));z-index:30;pointer-events:none;opacity:0;transition:opacity 300ms ease}
.dock{display:block;position:relative}

/* ================= Einstieg ================= */
.hero{position:relative;overflow:hidden;isolation:isolate}
/* Verlauf im Hero: zwei weiche Lichtflecken, die sich langsam bewegen */
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;will-change:transform}
.hero::before{inset:-15% -10% -5% 20%;background:radial-gradient(50% 55% at 70% 38%,rgba(78,108,240,.3),rgba(78,108,240,.08) 55%,transparent 72%);-webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 94%);mask-image:linear-gradient(to bottom,#000 68%,transparent 94%);animation:heroFleckA 19s ease-in-out infinite alternate}
.hero::after{inset:30% -10% -20% 25%;background:radial-gradient(45% 50% at 55% 55%,rgba(28,176,214,.22),rgba(28,176,214,.06) 55%,transparent 72%);-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 76%);mask-image:linear-gradient(to bottom,#000 50%,transparent 76%);animation:heroFleckB 24s ease-in-out infinite alternate}
@keyframes heroFleckA{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6%,4%,0) scale(1.08)}100%{transform:translate3d(3%,-3%,0) scale(.97)}}
@keyframes heroFleckB{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5%,-5%,0) scale(1.1)}100%{transform:translate3d(-4%,3%,0) scale(1)}}
@media (prefers-reduced-motion: reduce){ .hero::before,.hero::after{animation:none} }
.hero .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,calc(5.5vw / var(--vz, 1)),96px);align-items:center;min-height:calc(100svh / var(--vz, 1));padding-top:clamp(24px,calc(5vh / var(--vz, 1)),56px);padding-bottom:clamp(40px,calc(7vh / var(--vz, 1)),80px)} /* ohne Logo oben braucht es keinen Platz mehr für die Leiste */
.hero h1{font-size:clamp(40px,calc(4.9vw / var(--vz, 1)),78px)}
.hero h1 .wort{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px);transition:opacity 700ms var(--ease-haus),transform 900ms var(--ease-haus),filter 700ms ease;transition-delay:calc(120ms + var(--i) * 70ms)}
.hero h1.los .wort{opacity:1;transform:none;filter:none}
/* Persönlicher Link (gruss.php): Anrede im Blauverlauf vor dem Titel. Bis die Begrüssung da ist, wartet der Titel unsichtbar */
.gruss-wartet .hero h1{visibility:hidden}
.vorschau-modus #keks{display:none!important} /* Vorschau im CMS: ohne Cookie-Hinweis */
.hero h1 .anrede.eigene-zeile{display:block;padding-bottom:.14em;margin-bottom:-.14em} /* Platz für Unterlängen (g, j, p), sonst schneidet der Verlauf sie ab */
.hero h1 .anrede{background:linear-gradient(120deg,var(--ai1),var(--ai2) 55%,var(--ai3));-webkit-background-clip:text;background-clip:text;color:transparent;animation:anredeRein .6s .1s cubic-bezier(.16,1,.3,1) both}
@keyframes anredeRein{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){ .hero h1 .anrede{animation:none} .hero h1 .wort{transition:none;opacity:1;transform:none;filter:none} }
.hero .eyebrow .gruss-zusatz{color:var(--ai1);white-space:nowrap}
.hero .eyebrow .gruss-zusatz::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 2px 10px;border-radius:50%;background:currentColor;vertical-align:middle}
@media (max-width:560px){
  .hero .eyebrow.mit-zusatz{display:flex;flex-wrap:wrap}
  .hero .eyebrow .gruss-zusatz{order:-1;flex-basis:100%;margin-bottom:8px}
  .hero .eyebrow .gruss-zusatz::before{margin-left:0}
}
.hero .sub{margin-top:24px;font-size:clamp(19px,calc(1.5vw / var(--vz, 1)),22px);line-height:1.5;color:var(--muted);max-width:44ch}
.hero .sub b{color:var(--ink);font-weight:700}
.hero .ctas{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:560px){ .hero .ctas .btn{flex:1 1 100%;justify-content:center} } /* Handy: beide gleich breit */
.hero .eyebrow{margin-bottom:22px}
.hero .facts-mini{margin-top:clamp(36px,calc(6vh / var(--vz, 1)),64px);display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px;color:var(--muted);font-weight:600}
.hero .facts-mini b{color:var(--ink)}
.dock-hero{width:100%;height:min(calc(76svh / var(--vz, 1)),760px);cursor:pointer;border-radius:40px}
@media (min-width:901px){ .dock-hero{translate:0 calc(-4vh / var(--vz, 1))} } /* gleich hoch wie das 3D-Handy (geraete.js: kHero y 0.04) */
.dock-hero .tipp{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);width:max-content;max-width:min(calc(calc(100vw / var(--vz, 1)) - 40px), 460px);font-size:13px;font-weight:700;line-height:1.4;color:var(--muted);text-align:center;text-wrap:balance} /* langer Hinweis (persönliche Links): bricht auf dem Handy mittig um, statt aus dem Bild zu laufen */
.dock-hero .tipp i{display:inline-block;vertical-align:1px;margin-right:8px;width:8px;height:8px;border-radius:50%;background:linear-gradient(120deg,var(--ai1),var(--ai3));box-shadow:0 0 0 0 rgba(91,124,255,.5);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(91,124,255,.45)}70%{box-shadow:0 0 0 10px rgba(91,124,255,0)}100%{box-shadow:0 0 0 0 rgba(91,124,255,0)}}
.scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding-left:.14em;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue span{width:1px;height:28px;background:var(--muted);transform-origin:top;animation:linie 2.2s var(--ease-out) infinite}
@keyframes linie{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:900px){
  .hero .grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:8px} /* minmax: ein langes Wort darf die Spalte nicht verbreitern */
  .hero h1{font-size:clamp(38px,calc(10vw / var(--vz, 1)),56px)}
  .dock-hero{height:min(calc(62svh / var(--vz, 1)),560px)}
  .scrollcue{display:none}
}

/* ================= Arbeiten: links Text, rechts die Bühne mit dem Handy ================= */
.arbeiten{padding-top:clamp(80px,calc(12vh / var(--vz, 1)),130px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,calc(4vw / var(--vz, 1)),64px);align-items:end;margin-bottom:clamp(24px,calc(5vh / var(--vz, 1)),56px)}
.sec-head h2{font-size:clamp(34px,calc(4vw / var(--vz, 1)),60px);margin-top:14px}
.sec-head p{color:var(--muted);max-width:44ch}
@media (max-width:820px){ .sec-head{grid-template-columns:1fr} }

.buehnen-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,calc(5vw / var(--vz, 1)),80px);align-items:start}
.buehne{grid-column:2;grid-row:1;position:sticky;top:var(--nav);height:calc(calc(100svh / var(--vz, 1)) - var(--nav));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:2}
.spalte{grid-column:1;grid-row:1}
.dock-arbeit{width:100%;height:min(calc(74svh / var(--vz, 1)),740px)}
.buehne-info{width:min(100%,440px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;font-size:14px}
.buehne-info .punkt{width:10px;height:10px;border-radius:50%;background:var(--acc,var(--ink));transition:background-color 400ms ease}
.buehne-info b{font-weight:800}
.buehne-info span{color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playhead{grid-column:1 / -1;height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:6px}
.playhead i{display:block;height:100%;background:var(--acc,var(--ink));transform-origin:0 50%;transform:scaleX(0);transition:background-color 400ms ease}

.fall{--acc:var(--ink);padding:clamp(40px,calc(8vh / var(--vz, 1)),80px) 0 clamp(60px,calc(12vh / var(--vz, 1)),140px);border-top:1px solid var(--line)}
.fall:first-child{border-top:0;padding-top:0}
.fall-kopf .meta{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--muted)}
.fall-kopf .meta i{width:10px;height:10px;border-radius:50%;background:var(--acc);flex:none}
.fall-kopf h3{margin-top:12px;font-size:clamp(38px,calc(4.4vw / var(--vz, 1)),68px)}
.frage{margin-top:22px;font-size:clamp(22px,calc(2vw / var(--vz, 1)),30px);font-weight:700;line-height:1.3;letter-spacing:-.015em;max-width:26ch;padding-left:18px;border-left:3px solid var(--acc)}
.fall-kopf .intro{margin-top:22px;color:var(--muted);max-width:52ch}

.beats{margin-top:clamp(24px,calc(5vh / var(--vz, 1)),56px)}
.beat{min-height:calc(62svh / var(--vz, 1));display:flex;align-items:center}
.beat > div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;opacity:.28;transform:translateY(0);transition:opacity 500ms ease}
.beat.an > div{opacity:1}
.beat .n{width:34px;height:34px;border-radius:50%;border:2px solid var(--acc);color:var(--acc);display:grid;place-items:center;font-size:13px;font-weight:800;transition:background-color 400ms ease,color 400ms ease}
.beat.an .n{background:var(--acc);color:#fff}
.beat p{font-size:clamp(22px,calc(2.1vw / var(--vz, 1)),31px);line-height:1.28;font-weight:700;letter-spacing:-.02em;max-width:24ch}
.beat p small{display:block;margin-top:10px;font-size:16px;font-weight:600;letter-spacing:0;color:var(--muted);line-height:1.5}

.fall-info{margin-top:clamp(8px,calc(3vh / var(--vz, 1)),32px);display:grid;gap:28px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;border-top:1px solid var(--line);padding-top:22px}
.facts dt{font-size:14px;color:var(--muted);font-weight:600}
.facts dd{margin-top:2px;font-weight:700;font-size:16px;line-height:1.4}
.beitrag summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:16px;color:var(--ink)}
.beitrag summary::-webkit-details-marker{display:none}
.beitrag summary .plus{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--acc);color:var(--acc);display:grid;place-items:center;font-size:17px;line-height:1;transition:transform 240ms var(--ease-out)}
.beitrag[open] summary .plus{transform:rotate(45deg)}
.beitrag ul{margin-top:14px;list-style:none;display:grid;gap:10px}
.beitrag li{position:relative;padding-left:22px;color:var(--muted);font-size:16.5px;line-height:1.55}
.beitrag li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--acc)}

/* Angewandt: die fünf Schritte als Leiste, darunter die Methoden */
.angewandt .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;font-weight:700;color:var(--muted)}
.angewandt .lbl a{color:var(--ink);text-decoration:none;font-weight:800}
.angewandt .lbl a:hover{text-decoration:underline}
.leiste{margin-top:10px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.leiste span{display:block;font-size:12px;font-weight:700;color:var(--muted);padding-top:8px;border-top:3px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leiste span.an{border-color:var(--acc);color:var(--ink)}
.chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.chips li{border:1px solid var(--line);border-radius:99px;padding:6px 13px;font-size:14px;font-weight:600;line-height:1.3}
.fall-links{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:960px){
  .buehnen-grid{display:block}
  .buehne{position:sticky;top:var(--nav);height:calc(46svh / var(--vz, 1));margin:0 calc(var(--pad) * -1);padding:8px var(--pad) 10px;background:#fff;gap:6px}
  .buehne::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(#fff,rgba(255,255,255,0));pointer-events:none}
  .dock-arbeit{height:calc(calc(46svh / var(--vz, 1)) - 56px)}
  .buehne-info{width:100%;font-size:13px}
  .beat{min-height:calc(44svh / var(--vz, 1));align-items:flex-start;padding-top:calc(4vh / var(--vz, 1))}
  .beat p{font-size:clamp(20px,calc(5.4vw / var(--vz, 1)),26px)}
  .facts{grid-template-columns:1fr 1fr}
  .fall{padding-bottom:clamp(40px,calc(8vh / var(--vz, 1)),80px)}
}

/* Villiger: Röntgenblick als Mini-Demo */
.roentgen{position:relative;aspect-ratio:1600/1066;border-radius:16px;overflow:hidden;cursor:crosshair;background:#1a130e;touch-action:pan-y;--x:50%;--y:50%;--r:0%}
.roentgen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.roentgen .zu{-webkit-mask-image:radial-gradient(ellipse var(--r) calc(var(--r) * 1.5) at var(--x) var(--y),transparent 0%,transparent 58%,#000 100%);mask-image:radial-gradient(ellipse var(--r) calc(var(--r) * 1.5) at var(--x) var(--y),transparent 0%,transparent 58%,#000 100%)}
.roentgen .ring{position:absolute;left:var(--x);top:var(--y);width:calc(var(--r) * 2);aspect-ratio:1;border-radius:50%;border:1px solid rgba(190,160,84,.7);transform:translate(-50%,-50%);pointer-events:none;transition:opacity 300ms ease}
.roentgen .hinweis{position:absolute;left:16px;bottom:14px;right:16px;display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:#f5f5f3;text-shadow:0 1px 8px rgba(0,0,0,.6);pointer-events:none}
.roentgen .hinweis span:last-child{color:#cfb268;font-family:ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}
.demo-lbl{font-size:14px;font-weight:700;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.demo-lbl i{width:8px;height:8px;border-radius:50%;background:var(--acc)}

/* ================= KI-Chat als eigenes Projekt ================= */
.ki{padding:clamp(90px,calc(14vh / var(--vz, 1)),150px) 0;background:linear-gradient(180deg,#fff,#F5F7FF 30%,#F5F7FF 70%,#fff)}
.ki .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,calc(5vw / var(--vz, 1)),80px);align-items:center}
.ki h2{font-size:clamp(34px,calc(4vw / var(--vz, 1)),60px);margin-top:14px}
.ki .lead{margin-top:18px;color:var(--muted);max-width:46ch}
.fluss{margin-top:clamp(28px,calc(5vh / var(--vz, 1)),44px);list-style:none;display:grid;gap:0;counter-reset:f}
.fluss li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.fluss li:last-child{border-bottom:1px solid var(--line)}
.fluss .n{width:32px;height:32px;border-radius:50%;background:linear-gradient(120deg,var(--ai1),var(--ai2));color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.fluss b{display:block;font-size:17px;line-height:1.35}
.fluss span{display:block;margin-top:2px;font-size:15.5px;color:var(--muted);line-height:1.5}
.tech{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.tech li{font-size:13px;font-weight:700;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid rgba(27,63,216,.18);color:#26356F}
.ki .ctas{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.dock-ki{width:100%;height:min(calc(72svh / var(--vz, 1)),700px);cursor:pointer}
@media (max-width:900px){ .ki .grid{grid-template-columns:1fr} .dock-ki{height:min(calc(58svh / var(--vz, 1)),520px);order:-1} }

/* ================= Arbeitsweise: dunkel, interaktiv ================= */
.weise{background:#0E1216;color:#fff;padding:clamp(90px,calc(14vh / var(--vz, 1)),150px) 0;position:relative;overflow:hidden}
.weise .eyebrow{color:rgba(255,255,255,.6)}
.weise-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,calc(5vw / var(--vz, 1)),80px);align-items:end}
.weise h2{font-size:clamp(34px,calc(4.2vw / var(--vz, 1)),62px);margin-top:14px}
.weise-kopf p{color:rgba(255,255,255,.66);max-width:46ch}
@media (max-width:860px){ .weise-kopf{grid-template-columns:1fr} }
.filter{margin-top:clamp(32px,calc(6vh / var(--vz, 1)),56px);display:flex;flex-wrap:wrap;gap:8px}
.filter button{height:40px;padding:0 16px;border-radius:99px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.filter button i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.filter button[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
@media (hover:hover) and (pointer:fine){ .filter button:hover{border-color:rgba(255,255,255,.5)} }
.filter-note{margin-top:14px;font-size:14px;color:rgba(255,255,255,.55);min-height:1.6em}

.phasen{margin-top:clamp(24px,calc(4vh / var(--vz, 1)),40px);list-style:none;position:relative}
.phasen::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:rgba(255,255,255,.1)}
.phasen .faden{position:absolute;left:27px;top:28px;width:2px;height:calc(100% - 56px);background:linear-gradient(var(--ai2),var(--ai3));transform-origin:top;transform:scaleY(var(--p,0))}
.phase{display:grid;grid-template-columns:56px minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(14px,calc(3vw / var(--vz, 1)),40px);padding:clamp(22px,calc(4vh / var(--vz, 1)),34px) 0;border-top:1px solid rgba(255,255,255,.08);position:relative}
.phase:first-child{border-top:0}
.phase .nr{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:#0E1216;display:grid;place-items:center;font-weight:800;font-size:15px;position:relative;z-index:1;transition:border-color 400ms ease,background-color 400ms ease,color 400ms ease}
.phase.an .nr{border-color:#fff;background:#fff;color:var(--ink)}
.phase h3{font-size:clamp(24px,calc(2.2vw / var(--vz, 1)),32px)}
.phase p{margin-top:8px;color:rgba(255,255,255,.66);font-size:16.5px;max-width:34ch}
.phase .zahl{margin-top:12px;font-size:13px;font-weight:700;color:rgba(255,255,255,.5)}
.meth{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.meth li{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.16);font-size:14.5px;font-weight:700;line-height:1.25;transition:opacity 300ms ease,background-color 300ms ease,border-color 300ms ease,color 300ms ease}
.meth .dots{display:inline-flex;gap:3px}
.meth .dots i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.meth li.aus{opacity:.22}
.meth li.hell{background:var(--c-sel);border-color:var(--c-sel);color:#fff}
.meth li.hell .dots i{background:#fff}
/* Punkte je Methode: ohne (Standard), schieferblau oder farbig. Testbar mit ?farben */
.punkte-ohne .meth .dots,.punkte-ohne .filter button i{display:none}
.punkte-navy .meth .dots i,.punkte-navy .filter button i{background:var(--akzent,#33404c)}
.punkte-navy .meth li.hell .dots i{background:#fff}
.punkte-ohne .meth li.hell,.punkte-navy .meth li.hell{background:var(--akzent,#33404c);border-color:var(--akzent,#33404c);color:#fff}
@media (max-width:860px){
  .phase{grid-template-columns:56px minmax(0,1fr)}
  .meth{grid-column:2}
}

/* ================= Über mich ================= */
.about{padding:clamp(90px,calc(14vh / var(--vz, 1)),150px) 0}
.about .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,calc(6vw / var(--vz, 1)),90px);align-items:start}
.about .por{width:clamp(150px,calc(17vw / var(--vz, 1)),240px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--soft)}
.about .por img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:clamp(34px,calc(4vw / var(--vz, 1)),60px)}
.about p{margin-top:18px;max-width:60ch}
.about .trait{font-weight:700}
.about dl{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;max-width:680px}
.about dt{font-size:14px;color:var(--muted);font-weight:600}
.about dd{font-weight:700}
.about .btns{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:820px){ .about .wrap{grid-template-columns:1fr} }

/* ================= Kontakt ================= */
.contact{background:var(--ink);color:#fff;padding:clamp(80px,calc(13vh / var(--vz, 1)),150px) 0 calc(110px + env(safe-area-inset-bottom,0px))}
.contact h2{font-size:clamp(34px,calc(4vw / var(--vz, 1)),60px)}
.contact .mail{display:inline-block;margin-top:20px;font-size:clamp(26px,calc(4vw / var(--vz, 1)),54px);font-weight:800;letter-spacing:-.03em;text-decoration:none;overflow-wrap:anywhere;border-bottom:2px solid rgba(255,255,255,.3);transition:border-color 200ms ease}
.contact .mail:hover{border-color:#fff}
.contact .rest{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;font-weight:600;color:rgba(255,255,255,.8)}
.contact .foot{margin-top:clamp(60px,calc(10vh / var(--vz, 1)),110px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.6)}
.contact .mark{border-color:#fff;color:#fff}.contact .mark i{background:#fff}

/* ================= Case-Seiten ================= */
.cs{--acc:var(--ink)}
.cs-head{padding:clamp(44px,calc(8vh / var(--vz, 1)),88px) 0 clamp(28px,calc(5vh / var(--vz, 1)),48px)}
.back{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}
.cs-head .kicker{margin-top:28px;font-size:15px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:10px}
.cs-head .kicker i{width:10px;height:10px;border-radius:50%;background:var(--acc)}
.cs-head h1{margin-top:8px;font-size:clamp(40px,calc(5.4vw / var(--vz, 1)),84px)}
/* Schmale Handys: lange Namen wie «BewerbungsStudio» passen ganz in die Zeile */
@media (max-width:440px){ .cs-head h1{font-size:min(40px,calc(9.6vw / var(--vz, 1)))} }
.cs-head .lead{margin-top:20px;font-size:clamp(19px,calc(1.6vw / var(--vz, 1)),23px);line-height:1.5;color:var(--muted);max-width:50ch}
.cs .facts{margin-top:clamp(28px,calc(5vh / var(--vz, 1)),44px);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){ .cs .facts{grid-template-columns:1fr 1fr} }
.cs-hero{aspect-ratio:16/9}
.blk{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(20px,calc(5vw / var(--vz, 1)),80px);padding:clamp(64px,calc(10vh / var(--vz, 1)),110px) 0 0}
.blk > h2{font-size:clamp(20px,calc(1.6vw / var(--vz, 1)),24px);letter-spacing:-.02em;padding-top:5px}
.blk .body > p{max-width:var(--text)}
.blk .body > p + p{margin-top:16px}
.big{font-size:clamp(22px,calc(2vw / var(--vz, 1)),30px);font-weight:700;line-height:1.35;letter-spacing:-.015em;max-width:32ch}
@media (max-width:820px){ .blk{grid-template-columns:1fr} }
.reqs{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* Steht nichts davor, beginnt der Inhalt bündig mit der Überschrift links */
.blk .body > :first-child{margin-top:0}
.blk .body > .reqs:first-child{margin-top:2px}
.reqs div{border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.reqs b{display:block;font-size:17px;line-height:1.3}
.reqs span{display:block;margin-top:6px;font-size:15.5px;color:var(--muted);line-height:1.5}
@media (max-width:620px){ .reqs{grid-template-columns:1fr} }
.full{margin-top:clamp(56px,calc(9vh / var(--vz, 1)),96px)}
.pair{margin-top:clamp(56px,calc(9vh / var(--vz, 1)),96px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,calc(1.6vw / var(--vz, 1)),20px)}
.pair .ph{aspect-ratio:4/3}
@media (max-width:700px){ .pair{grid-template-columns:1fr} }
/* Hochformat (Stele): vier in einer Reihe; ein einzelnes Paar gleich gross wie zwei davon, mittig. So bleiben sie scharf und ganz im Bild */
.vier{margin-top:clamp(56px,calc(9vh / var(--vz, 1)),96px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,calc(1.6vw / var(--vz, 1)),20px)}
.pair.hoch{max-width:calc(50% - 10px);margin-left:auto;margin-right:auto}
/* Bildunterschrift unter dem Bild (sonst schneidet der Rahmen sie ab): «Vorher: …», «Nachher: …» */
.vier .ph,.pair.hoch .ph{aspect-ratio:auto!important;overflow:visible;background:none;border-radius:0}
.vier .ph img,.pair.hoch .ph img{display:block;aspect-ratio:9/16;height:auto;border-radius:16px;background:var(--soft)}
.vier figcaption,.pair.hoch figcaption{margin-top:10px;font-size:14px;line-height:1.45}
@media (max-width:700px){ .vier figcaption,.pair.hoch figcaption{margin-top:8px;font-size:12.5px;line-height:1.4} }
@media (max-width:700px){ .vier,.pair.hoch{grid-template-columns:1fr 1fr;max-width:none} }
.trio{margin-top:clamp(56px,calc(9vh / var(--vz, 1)),96px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,calc(1.4vw / var(--vz, 1)),18px)}
.trio .ph{aspect-ratio:9/16}
@media (max-width:700px){ .trio{grid-template-columns:1fr 1fr} .trio .ph:last-child{display:none} }
.dec{margin-top:8px;border-top:1px solid var(--line)}
.dec > div{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(0,1.25fr);gap:clamp(12px,calc(3vw / var(--vz, 1)),40px);padding:22px 0;border-bottom:1px solid var(--line)}
.dec .n{width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.dec b{font-size:clamp(18px,calc(1.4vw / var(--vz, 1)),21px);line-height:1.3}
.dec p{color:var(--muted)}
@media (max-width:760px){ .dec > div{grid-template-columns:36px minmax(0,1fr)} .dec p{grid-column:2} }
.stepper{margin-top:clamp(56px,calc(9vh / var(--vz, 1)),96px)}
.stepper .screen{aspect-ratio:4/3;max-width:min(860px,calc((calc(100svh / var(--vz, 1)) - 190px) * 4 / 3));margin:0 auto;position:relative;background:#2B2F36}
.stepper .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 420ms ease}
.stepper .screen img.on{opacity:1}
.steps{max-width:min(860px,calc((calc(100svh / var(--vz, 1)) - 190px) * 4 / 3));margin:18px auto 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.steps button{text-align:left;border-top:3px solid var(--line);padding:12px 4px 0;transition:border-color 240ms ease}
.steps button b{display:block;font-size:14px;font-weight:800;color:var(--muted);transition:color 240ms ease}
.steps button span{display:block;margin-top:2px;font-size:14px;color:var(--muted);line-height:1.35}
.steps button[aria-selected="true"]{border-color:var(--acc)}
.steps button[aria-selected="true"] b{color:var(--ink)}
.steps button b i{font-style:normal}
@media (max-width:620px){
  .steps button span{display:none}
  /* Auf dem Handy: Nummer über dem Namen, Spalten so breit wie ihr Wort (sonst wird «Konfigurator» abgeschnitten) */
  .steps{grid-template-columns:repeat(5,auto);gap:6px}
  .steps button b{white-space:nowrap}
  .steps button b i{display:block}
}
@media (max-width:360px){ .steps button b{font-size:13px} }
.zahl-gross{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(20px,calc(3vw / var(--vz, 1)),40px);margin-top:28px;max-width:780px}
@media (max-width:560px){ .zahl-gross{grid-template-columns:1fr} }
.zahl-gross div b{display:block;font-size:clamp(40px,calc(5vw / var(--vz, 1)),72px);letter-spacing:-.04em;line-height:1;color:var(--acc)}
.zahl-gross div span{display:block;margin-top:8px;font-size:15px;color:var(--muted);max-width:24ch;text-wrap:balance}
.result{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.next{margin-top:clamp(80px,calc(12vh / var(--vz, 1)),130px);border-top:1px solid var(--line);padding:clamp(40px,calc(7vh / var(--vz, 1)),72px) 0 clamp(64px,calc(10vh / var(--vz, 1)),110px)}
.next a{text-decoration:none;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:center}
.next small{font-size:14px;font-weight:700;color:var(--muted)}
.next b{display:block;margin-top:8px;font-size:clamp(30px,calc(4vw / var(--vz, 1)),56px);letter-spacing:-.03em;line-height:1.08}
.next .ph{aspect-ratio:16/10}
@media (max-width:700px){ .next a{grid-template-columns:1fr} }

/* Villiger: Scroll-Sequenz mit Hotspots */
.sequenz{position:relative;height:calc(260vh / var(--vz, 1));margin-top:clamp(56px,calc(9vh / var(--vz, 1)),96px)}
.sequenz .kasten{position:sticky;top:calc(var(--nav) + 16px);height:calc(calc(100svh / var(--vz, 1)) - var(--nav) - 32px);border-radius:16px;overflow:hidden;background:#0b0907;display:grid;place-items:center}
.sequenz canvas{width:100%;height:100%;object-fit:cover}
.sequenz .titel{position:absolute;left:clamp(18px,calc(3vw / var(--vz, 1)),36px);top:clamp(18px,calc(3vw / var(--vz, 1)),32px);color:#f5f5f3;max-width:30ch}
.sequenz .titel small{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.12em;color:#cfb268;text-transform:uppercase}
.sequenz .titel b{display:block;margin-top:8px;font-family:Georgia,"PT Serif",serif;font-weight:300;font-size:clamp(26px,calc(3vw / var(--vz, 1)),44px);line-height:1.1;letter-spacing:-.01em}
/* Computer: Kasten so hoch wie das Bild (etwa 2:1) statt bildschirmhoch, kürzere Scroll-Strecke */
@media (min-width:761px){
  .sequenz{height:calc(190vh / var(--vz, 1))}
  .sequenz .kasten{height:auto;aspect-ratio:960/492;max-height:calc(calc(100svh / var(--vz, 1)) - var(--nav) - 32px)}
}
.hot{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;color:#f5f5f3;font-size:14px;font-weight:700;transition:opacity 400ms ease}
.hot i{position:relative;width:14px;height:14px;border-radius:50%;background:#bea054;flex:none}
.hot i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#bea054;animation:puls 2.2s ease-out infinite}
@keyframes puls{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
.hot span{white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.hot em{display:block;font-style:normal;font-weight:600;font-size:12.5px;color:#c8bfa8}

/* ================= Chat-Knopf unten in der Mitte ================= */
.orb{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 6px;border-radius:999px;background:#fff;color:var(--ink);font-weight:800;font-size:15px;white-space:nowrap;box-shadow:0 18px 40px -16px rgba(26,33,40,.45);isolation:isolate;transition:transform 200ms var(--ease-out),opacity 200ms ease}
.orb::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--a,0deg),var(--ai1),var(--ai2),var(--ai3),var(--ai1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1;animation:spin 6s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.orb .pimg{width:44px;height:44px;border-radius:50%;flex:none}
.orb:active{transform:translateX(-50%) scale(.97)}
.orb.hide,.orb.weg{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(12px)}
@media (hover:hover) and (pointer:fine){ .orb:hover{transform:translateX(-50%) translateY(-2px)} }
.pimg{display:block;background:var(--portrait,#dde) center/cover no-repeat}

/* ================= Chat: auf dem Desktop im 3D-Handy, auf dem Handy bildschirmfüllend ================= */
.ai{position:fixed;z-index:95;display:flex;flex-direction:column;background:#F6F7F8;color:var(--ink);opacity:0;visibility:hidden;transition:opacity 260ms ease,visibility 0s linear 260ms;overflow:hidden}
.ai.open{opacity:1;visibility:visible;transition:opacity 320ms ease}
.ai.voll{inset:0}
.ai.im-handy{border-radius:var(--ai-r,40px)}
.ai-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-bottom:1px solid var(--line);padding:calc(14px + env(safe-area-inset-top,0px)) 16px 12px}
.ai.im-handy .ai-top{padding-top:calc(var(--ai-w,360px) * .14)}
.ai-top .who{display:flex;align-items:center;gap:10px;min-width:0}
.ai-top .who .pimg{width:38px;height:38px;border-radius:50%;flex:none}
.ai-top b{display:block;font-size:15px;line-height:1.2}
.ai-top small{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.ai-top .x{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-size:20px;line-height:1;color:var(--ink)}
.ai .log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px;display:flex;flex-direction:column;gap:8px;scrollbar-width:none}
.ai .log::-webkit-scrollbar{display:none}
.msg{max-width:86%;padding:10px 13px;border-radius:18px;font-size:14.5px;line-height:1.5;animation:pop 320ms var(--ease-out)}
.msg.bot{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px;box-shadow:0 1px 0 rgba(22,28,34,.05)}
.msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.msg a{font-weight:700;color:var(--ai1)}
.msg .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.msg .acts a,.msg .acts button{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:99px;background:var(--soft);font-size:13px;font-weight:700;text-decoration:none;color:var(--ink)}
.typing{display:inline-flex;gap:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.ai .chips-ai{flex:none;display:flex;gap:6px;overflow-x:auto;padding:8px 12px;scrollbar-width:none}
.ai .chips-ai::-webkit-scrollbar{display:none}
.ai .chips-ai button{flex:none;height:34px;padding:0 13px;border-radius:99px;background:#fff;border:1px solid rgba(27,63,216,.22);color:#1f2f7a;font-size:13px;font-weight:700;white-space:nowrap;transition:background-color 200ms ease,transform 160ms var(--ease-out)}
.ai .chips-ai button:active{transform:scale(.97)}
.ai-bottom{flex:none;background:#fff;border-top:1px solid var(--line);padding:10px 0 calc(8px + env(safe-area-inset-bottom,0px))}
.ai.im-handy .ai-bottom{padding-bottom:calc(var(--ai-w,360px) * .07)}
.ai .msg.persoenlich + .msg.gruss-msg{margin-top:-5px;border-top-left-radius:6px} /* KI schliesst direkt an die persönliche Nachricht an */
.ai .msg.persoenlich{border-bottom-left-radius:6px}
.ai .msg .marke{display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ai1)}
.ai .ask{display:flex;align-items:center;gap:6px;padding:0 10px}
.ai .ask input{flex:1;min-width:0;height:42px;border-radius:99px;border:1px solid var(--line);background:var(--soft);padding:0 15px;font:inherit;font-size:16px;color:var(--ink)}
.ai .ask input:focus{outline:none;border-color:var(--ai1);background:#fff}
.ai .ask button{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;transition:transform 160ms var(--ease-out)}
.ai .ask button:active{transform:scale(.95)}
.ai .send{background:linear-gradient(120deg,var(--ai1),var(--ai2));color:#fff}
.ai .ask svg{width:19px;height:19px}
.ai .fine{margin:7px 12px 0;text-align:center;font-size:11px;color:var(--muted);line-height:1.4}
.ai.voll .log,.ai.voll .chips-ai,.ai.voll .ask,.ai.voll .fine{max-width:760px;margin-left:auto;margin-right:auto;width:100%}
.ai.voll .ai-top{padding-left:max(16px,calc(50% - 380px));padding-right:max(16px,calc(50% - 380px))}
body.lock{overflow:hidden}
/* Chat-Handy: Schliessknopf ausserhalb des Handys */
.ai-zu{position:fixed;z-index:96;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 10px 30px -12px rgba(26,33,40,.45);display:grid;place-items:center;font-size:22px;line-height:1;opacity:0;visibility:hidden;transition:opacity 260ms ease}
.ai-zu.an{opacity:1;visibility:visible}

h1[tabindex="-1"]:focus{outline:none}
.flash{animation:flash 1.4s var(--ease-out)}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(27,63,216,0)}20%{box-shadow:0 0 0 6px rgba(27,63,216,.25)}100%{box-shadow:0 0 0 0 rgba(27,63,216,0)}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 700ms var(--ease-haus),transform 700ms var(--ease-haus)}
.reveal.da{opacity:1;transform:none}

/* Ohne WebGL: das Handy als flache Fläche mit Rahmen */
.ohne-3d .dock .flach{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:92%;aspect-ratio:9/19.3;border-radius:42px;background:#1b1e23;padding:10px;box-shadow:0 30px 60px -30px rgba(26,33,40,.5)}
.ohne-3d .dock .flach canvas{width:100%;height:100%;border-radius:32px}

@media (prefers-reduced-motion: reduce){
  .btn,.stepper .screen img,.steps button,.beat > div,.reveal{transition:none}
  .reveal{opacity:1;transform:none}
  .msg,.typing i,.orb::before,.hot i::after,.dock-hero .tipp i,.scrollcue span{animation:none}
}

/* =====================================================================
   v4: Das Kino. Ein Film in vier Kapiteln, jedes Projekt auf seinem Gerät.
   Die Bühne bleibt stehen, das Scrollen ist der Abspielkopf.
   ===================================================================== */
.kino{background:#fff;color:#fff}
.kino-intro{padding:clamp(90px,calc(14vh / var(--vz, 1)),150px) var(--pad) clamp(40px,calc(7vh / var(--vz, 1)),80px)}
.kino-intro{color:var(--ink)}
.kino-intro .eyebrow{color:var(--muted)}
.kino-intro h2{margin-top:14px;font-size:clamp(36px,calc(4.6vw / var(--vz, 1)),72px);max-width:16ch}
.kino-intro .lead{margin-top:20px;color:var(--muted);font-size:clamp(18px,calc(1.4vw / var(--vz, 1)),21px);max-width:48ch}
.kino-strecke{position:relative;height:calc(var(--kap-n,4) * calc(440vh / var(--vz, 1)))}
.kino-buehne{position:sticky;top:0;height:calc(100vh / var(--vz, 1));height:calc(100dvh / var(--vz, 1));overflow:hidden;background:radial-gradient(70% 70% at var(--bgx,64%) 46%,color-mix(in srgb,var(--kino-bg,#0c2314) 100%,#fff 7%),var(--kino-bg,#0c2314) 55%,color-mix(in srgb,var(--kino-bg,#0c2314) 72%,#000) 100%);transition:none}
.kino3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.kino-flach{position:absolute;right:8%;top:50%;transform:translateY(-50%);max-height:70%;max-width:44%;border-radius:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.kino-scrim{position:absolute;inset:0;pointer-events:none;--sc:var(--kino-bg,#33404c);background:linear-gradient(90deg,color-mix(in srgb,var(--sc) 78%,transparent) 0%,color-mix(in srgb,var(--sc) 40%,transparent) 32%,transparent 56%),linear-gradient(0deg,color-mix(in srgb,var(--sc) 70%,transparent) 0%,transparent 17%);opacity:var(--scrim,.6)}
.kap{position:absolute;inset:0;pointer-events:none}
.kap .geraet{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.kap .geraet i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent)}
.kap-titel{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);max-width:min(560px,calc(46vw / var(--vz, 1)));opacity:0;visibility:hidden}
.kap-titel h3{margin-top:18px;font-size:clamp(44px,calc(5.6vw / var(--vz, 1)),96px);letter-spacing:-.045em;line-height:.98}
.kap-titel h3.lang{font-size:clamp(38px,calc(4.6vw / var(--vz, 1)),78px)}
.kap-titel .frage{margin-top:22px;font-size:clamp(20px,calc(1.8vw / var(--vz, 1)),27px);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:rgba(255,255,255,.92);padding-left:16px;border-left:3px solid var(--acc);max-width:28ch}
.kap-titel .meta{margin-top:20px;font-size:14px;font-weight:600;color:rgba(255,255,255,.55)}
.kap-direkt{margin-top:26px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:99px;border:1px solid rgba(255,255,255,.28);color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:background-color 200ms ease,border-color 200ms ease}
.kap-direkt span{transition:transform 200ms var(--ease-out,ease)}
@media (hover:hover) and (pointer:fine){ .kap-direkt:hover{background:rgba(255,255,255,.1);border-color:#fff} .kap-direkt:hover span{transform:translateX(3px)} }
.kino-hell .kap-direkt{border-color:rgba(22,28,34,.25);color:var(--ink)}
@media (max-width:860px){ .kap-direkt{margin-top:14px;height:36px;font-size:13px} }
.kap .beat{position:absolute;left:var(--pad);bottom:clamp(96px,calc(15vh / var(--vz, 1)),150px);max-width:min(520px,calc(40vw / var(--vz, 1)));opacity:0;visibility:hidden;min-height:0;display:block}
.kap .beat p{font-size:clamp(26px,calc(2.9vw / var(--vz, 1)),46px);line-height:1.12;letter-spacing:-.03em;font-weight:700;color:#fff;max-width:none;text-wrap:balance}
.kap .beat small{display:block;margin-top:14px;font-size:clamp(16px,calc(1.2vw / var(--vz, 1)),18px);line-height:1.5;color:rgba(255,255,255,.72);font-weight:500;max-width:44ch}
.kap-info{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);width:min(540px,calc(44vw / var(--vz, 1)));opacity:0;visibility:hidden;pointer-events:auto;display:grid;gap:22px}
.kap-info .facts{grid-template-columns:1fr;gap:12px;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.kap-info .facts div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px}
.kap-info .facts dt{color:rgba(255,255,255,.5)}
.kap-info .facts dd{margin:0;color:#fff;font-size:15.5px}
.kap .angewandt .lbl{color:rgba(255,255,255,.5)}
.kap .angewandt .lbl a{color:#fff}
.kap .leiste span{color:rgba(255,255,255,.45);border-color:rgba(255,255,255,.14)}
.kap .leiste span.an{border-color:var(--acc);color:#fff}
.kap .chips li{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.88);font-size:13px;padding:5px 11px}
.kap-links{display:flex;flex-wrap:wrap;gap:10px}
.btn.hell{background:#fff;color:var(--ink)}
.btn.umriss{border:1px solid rgba(255,255,255,.3);color:#fff}
@media (hover:hover) and (pointer:fine){ .btn.hell:hover{background:#e9ecef} .btn.umriss:hover{border-color:#fff} }
.kino-fuss{position:absolute;left:var(--pad);right:calc(var(--pad) + 64px);bottom:clamp(22px,calc(4vh / var(--vz, 1)),40px);display:grid;grid-template-columns:repeat(var(--kap-n,4),minmax(0,1fr));gap:12px;z-index:3}
.kino-fuss button{text-align:left;color:rgba(255,255,255,.5);font-size:13px;font-weight:700;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:center;transition:color 300ms ease}
.kino-fuss button i{width:7px;height:7px;border-radius:50%;background:currentColor}
.kino-fuss .lauf{grid-column:1 / -1;display:block;height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.kino-fuss .lauf em{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.kino-fuss button.an{color:#fff}
.kino-fuss button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Schmal: ohne Punkt, und nur der Name des aktuellen Projekts steht da (er darf über die Nachbarn laufen) */
@media (max-width:560px){
  .kino-fuss button{grid-template-columns:minmax(0,1fr)}
  .kino-fuss button i{display:none}
  .kino-fuss button span{font-size:11px}
  .kino-fuss button:not(.an) span{visibility:hidden}
  .kino-fuss button.an span{overflow:visible;text-overflow:clip}
}
@media (hover:hover) and (pointer:fine){ .kino-fuss button:hover{color:#fff} }

/* Navigation über dem Kino: dunkel */
.nav.dunkel{background:rgba(8,9,11,.62);border-color:rgba(255,255,255,.06)}
.nav.dunkel .mark{border-color:#fff;color:#fff}.nav.dunkel .mark i{background:#fff}
.nav.dunkel ul a:not(.btn){color:rgba(255,255,255,.66)}
.nav.dunkel ul a:not(.btn):hover{color:#fff}
.nav.dunkel .btn.dark{background:#fff;color:var(--ink)}

@media (max-width:860px){
  .kino-strecke{height:calc(var(--kap-n,4) * calc(400vh / var(--vz, 1)))}
  .kino-scrim{background:linear-gradient(0deg,color-mix(in srgb,var(--sc) 94%,transparent) 0%,color-mix(in srgb,var(--sc) 62%,transparent) 34%,transparent 56%)}
  .kap-titel{top:auto;bottom:clamp(84px,calc(13vh / var(--vz, 1)),120px);transform:none;right:var(--pad);max-width:none}
  .kap-titel h3{font-size:clamp(40px,calc(11vw / var(--vz, 1)),60px);margin-top:12px}
  .kap-titel .frage{font-size:19px;margin-top:14px}
  .kap-titel .meta{margin-top:12px;font-size:13px}
  .kap .beat{right:var(--pad);max-width:none;bottom:clamp(80px,calc(12vh / var(--vz, 1)),110px)}
  .kap .beat p{font-size:clamp(23px,calc(6.4vw / var(--vz, 1)),30px)}
  .kap .beat small{font-size:15px;margin-top:10px}
  .kap-info{top:auto;bottom:clamp(72px,calc(11vh / var(--vz, 1)),100px);transform:none;right:var(--pad);width:auto;gap:14px}
  .kap-info .facts{gap:8px;padding-top:12px}
  .kap-info .facts div{grid-template-columns:86px minmax(0,1fr);gap:10px}
  .kap-info .facts dd{font-size:14px}
  .kap-info .angewandt .chips{display:none}
  .kap-info .facts div:nth-child(4){display:none} /* Kontext steht schon am Kapitelanfang */
  .kino-fuss{gap:8px;right:calc(var(--pad) + 60px)}
  .kino-fuss button{font-size:11.5px}
  .kino-flach{right:auto;left:50%;top:10%;transform:translateX(-50%);max-width:70%;max-height:44%}
}
@media (prefers-reduced-motion: reduce){ .kap .beat,.kap-titel,.kap-info{filter:none!important} }

/* Im Kino rückt der Chat-Knopf nach unten rechts, damit die Kapitelleiste frei bleibt */
.orb.rechts{left:auto;right:max(20px,var(--pad));transform:none}
.orb.rechts:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .orb.rechts:hover{transform:translateY(-2px)} }
.orb.rechts.hide,.orb.rechts.weg{transform:translateY(12px)}
@media (max-width:860px){ .orb.rechts{padding:0 6px;gap:0;font-size:0;height:52px} }

/* Kapitel-Infos: drei Punkte «Mein Beitrag» statt der Arbeitsweise */
.kap-info .kurz{list-style:none;display:grid;gap:9px}
.kap-info .kurz li{position:relative;padding-left:20px;color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.5}
.kap-info .kurz li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--acc)}
@media (max-width:860px){ .kap-info .kurz{gap:6px} .kap-info .kurz li{font-size:14px} .kap-info .kurz li:nth-child(3){display:none} }

/* =====================================================================
   Case-Seiten: weiss, oben das Projekt als Film über die ganze Breite
   ===================================================================== */
.cs-buehne{position:relative;margin:0;height:min(calc(82svh / var(--vz, 1)),calc(62vw / var(--vz, 1)));min-height:420px;overflow:hidden;background:var(--cs-bg,#0b0c0e);display:grid;place-items:center;container-type:size}
.cs-buehne .unscharf{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(38px) saturate(1.2) brightness(.62);transform:scale(1.05)}
.cs-buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.35));pointer-events:none}
.cs-buehne .medium{position:relative;z-index:1;aspect-ratio:var(--ar);height:min(84cqh,calc(92cqw / (var(--ar))));width:auto;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.cs-buehne .medium img,.cs-buehne .medium video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-buehne video{opacity:0;transition:opacity 400ms ease}
.cs-buehne video.an{opacity:1}
.cs-buehne .unscharf.an{opacity:1}
.cs-buehne .zurueck{position:absolute;z-index:2;left:var(--pad);top:22px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:99px;background:rgba(10,12,14,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:14px;font-weight:700;text-decoration:none;border:1px solid rgba(255,255,255,.18);transition:background-color 200ms ease}
.cs-buehne .zurueck:hover{background:rgba(10,12,14,.75)}
.cs .cs-head{padding-top:clamp(36px,calc(6vh / var(--vz, 1)),64px)}
/* Fixes Schliessen oben rechts */
.case-zu{position:fixed;z-index:60;right:max(16px,var(--pad));top:16px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);box-shadow:0 10px 30px -10px rgba(26,33,40,.45),0 0 0 1px var(--line);transition:transform 160ms var(--ease-out),opacity 200ms ease}
.case-zu svg{width:20px;height:20px}
/* Nach einem Sprung aus dem Chat: direkt zurück zum Chat im Hero */
.zum-chat{position:fixed;z-index:62;left:50%;top:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px 0 5px;border-radius:99px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;box-shadow:0 14px 34px -14px rgba(26,33,40,.55),0 0 0 1px var(--line);animation:zumChatRein 420ms var(--ease-out,ease) both}
.zum-chat .pimg{width:34px;height:34px;border-radius:50%}
.zum-chat[hidden]{display:none}
@media (hover:hover) and (pointer:fine){ .zum-chat:hover{box-shadow:0 16px 36px -14px rgba(26,33,40,.65),0 0 0 1px var(--ink)} }
@keyframes zumChatRein{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion: reduce){ .zum-chat{animation:none} }
.case-zu:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){ .case-zu:hover{transform:rotate(90deg)} }
/* Auftritt: die Bühne zoomt leicht zurück, als Fortsetzung der Kamerafahrt ins Gerät */
.cs.rein .cs-buehne .medium{animation:bühneZoom 1000ms cubic-bezier(.16,1,.3,1) both}
.cs.rein .cs-buehne .unscharf{animation:bühneZoomHg 1200ms cubic-bezier(.16,1,.3,1) both}
@keyframes bühneZoom{from{transform:scale(1.18);opacity:.2}to{transform:none;opacity:1}}
@keyframes bühneZoomHg{from{transform:scale(1.3)}to{transform:scale(1.05)}}
.cs.rein .cs-head > *{animation:rein 800ms var(--ease-haus) both;animation-delay:250ms}
.cs.rein .cs-head > *:nth-child(2){animation-delay:310ms}.cs.rein .cs-head > *:nth-child(3){animation-delay:370ms}.cs.rein .cs-head > *:nth-child(4){animation-delay:430ms}
@keyframes rein{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.schleier{position:fixed;inset:0;z-index:110;pointer-events:none;opacity:0;background:#fff}
@media (max-width:760px){ .cs-buehne{height:calc(72svh / var(--vz, 1));min-height:0} .cs-buehne .zurueck{top:14px;height:36px;font-size:13px} .case-zu{width:42px;height:42px;top:12px} }
@media (prefers-reduced-motion: reduce){ .cs.rein .cs-head > *,.cs.rein .cs-buehne .medium,.cs.rein .cs-buehne .unscharf{animation:none} }

/* =====================================================================
   Navigation ohne Menü: Name + Kontakt, Kapitel-Linie rechts, Chat als Wegweiser
   ===================================================================== */
.nav{transition:border-color 240ms ease,transform 420ms var(--ease-haus),background-color 300ms ease}
.nav.weg{transform:translateY(-100%)}
.kapitel-linie{position:fixed;z-index:35;right:max(14px,calc(var(--pad) * .45));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px;color:var(--ink);transition:color 300ms ease,opacity 300ms ease}
.kapitel-linie::before{content:"";position:absolute;right:4px;top:6px;bottom:6px;width:1px;background:currentColor;opacity:.2}
.kapitel-linie a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:10px;text-decoration:none;color:inherit}
.kapitel-linie i{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;background:var(--linie-bg,#fff);opacity:.55;transition:transform 300ms var(--ease-out),opacity 300ms ease,background-color 300ms ease}
.kapitel-linie a.an i{background:currentColor;opacity:1;transform:scale(1.25)}
.kapitel-linie span{font-size:12.5px;font-weight:700;white-space:nowrap;opacity:0;transform:translateX(6px);transition:opacity 220ms ease,transform 220ms var(--ease-out);padding:3px 9px;border-radius:99px;background:var(--linie-bg,#fff);box-shadow:0 4px 14px -6px rgba(0,0,0,.3)}
.kapitel-linie a:hover span,.kapitel-linie a:focus-visible span{opacity:1;transform:none}
.kapitel-linie.dunkel{color:#fff;--linie-bg:#16181c}
.kapitel-linie.weg{opacity:0;pointer-events:none}
@media (max-width:860px){ .kapitel-linie{display:none} }
.orb .kurz{display:none}
@media (max-width:560px){ .orb .lang{display:none} .orb .kurz{display:inline} }

/* «Licht aus»: Der Saal ist hell, solange das Kino hereinfährt, und wird dunkel, sobald der Film läuft */
.kino-licht{position:absolute;inset:0;background:#fff;opacity:var(--licht,0);pointer-events:none}
.kap,.kino-fuss{opacity:calc((1 - var(--licht,0)) * (1 - var(--reihe,0)))}
.kino-scrim{opacity:calc(var(--scrim,.6) * (1 - var(--licht,0)) * (1 - var(--reihe,0)))}
.kino-buehne.aufstellung .kap *,.kino-buehne.aufstellung .kino-fuss{pointer-events:none!important}
/* Im Kino die Kurzform, damit die Kapitelleiste frei bleibt */
.orb.rechts .lang{display:none}
.orb.rechts .kurz{display:inline}

/* KI-Abschnitt ohne zweites Handy: der Text steht allein */
.ki .grid{grid-template-columns:minmax(0,760px);justify-content:start}
.orb[hidden]{display:none!important}

/* Arbeitsweise hell: weiss wie die übrige Seite */
.weise{background:#fff;color:var(--ink)}
.weise .eyebrow{color:var(--muted)}
.weise-kopf p{color:var(--muted)}
.filter button{border:1px solid var(--line);color:var(--muted)}
.filter button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .filter button:hover{border-color:var(--ink);color:var(--ink)} .filter button[aria-pressed="true"]:hover{color:#fff} }
.filter-note{color:var(--muted)}
.phasen::before{background:var(--line)}
.phase{border-top-color:var(--line)}
.phase .nr{border-color:rgba(22,28,34,.18);background:#fff;color:var(--ink)}
.phase.an .nr{border-color:var(--ink);background:var(--ink);color:#fff}
.phase p{color:var(--muted)}
.phase .zahl{color:var(--muted)}
.meth li{border-color:var(--line);color:var(--ink)}
.meth li.aus{opacity:.3}

/* =====================================================================
   Testvariante «hell» (Adresse mit ?hell): Projekte auf leichtem Grauverlauf statt Kino-Dunkel
   ===================================================================== */
.kino-hell .kino-buehne{background:radial-gradient(75% 70% at 64% 44%,#ffffff 0%,#f1f2f4 45%,#dfe2e6 100%)}
.kino-hell .kino-licht{display:none}
.kino-hell .kino-scrim{background:linear-gradient(90deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.35) 34%,transparent 52%),linear-gradient(0deg,rgba(255,255,255,.7) 0%,transparent 22%)}
.kino-hell .kap,.kino-hell .kino-fuss{opacity:calc(1 - var(--reihe,0))}
.kino-hell .kap{color:var(--ink)}
.kino-hell .kap .geraet{color:color-mix(in srgb,var(--acc) 70%,#000)}
.kino-hell .kap-titel .frage{color:var(--ink)}
.kino-hell .kap-titel .meta{color:var(--muted)}
.kino-hell .kap .beat p{color:var(--ink)}
.kino-hell .kap .beat small{color:var(--muted)}
.kino-hell .kap-info .facts{border-top-color:var(--line)}
.kino-hell .kap-info .facts dt{color:var(--muted)}
.kino-hell .kap-info .facts dd{color:var(--ink)}
.kino-hell .kap-info .kurz li{color:#3d4650}
.kino-hell .btn.hell{background:var(--ink);color:#fff}
.kino-hell .btn.umriss{border-color:rgba(22,28,34,.25);color:var(--ink)}
.kino-hell .kino-fuss button{color:rgba(22,28,34,.45)}
.kino-hell .kino-fuss button.an{color:var(--ink)}
.kino-hell .kino-fuss .lauf{background:rgba(22,28,34,.12)}
.kino-hell .kino-fuss .lauf em{background:var(--ink)}

/* Testvariante «beige» (Adresse mit ?beige): das Beige und das Schiefergrau aus dem Lebenslauf */
.kino-beige .kino-buehne{background:radial-gradient(75% 70% at 64% 44%,#fdfbf7 0%,#f6f2ea 45%,#e9e1d2 100%)}
.kino-beige .kino-scrim{background:linear-gradient(90deg,rgba(246,242,234,.85) 0%,rgba(246,242,234,.4) 34%,transparent 52%),linear-gradient(0deg,rgba(246,242,234,.75) 0%,transparent 22%)}
.kino-beige .kap,.kino-beige .kap-titel .frage,.kino-beige .kap .beat p,.kino-beige .kap-info .facts dd{color:#33404c}
.kino-beige .kap-titel .meta,.kino-beige .kap .beat small,.kino-beige .kap-info .facts dt{color:#6b7480}
.kino-beige .kap-info .kurz li{color:#46525e}
.kino-beige .btn.hell{background:#33404c;color:#fff}
.kino-beige .kino-fuss button.an{color:#33404c}
.kino-beige .kino-fuss .lauf em{background:#33404c}

/* =====================================================================
   Schieferblau (#33404c, aus dem Lebenslauf) als Markenfarbe der ganzen Seite
   ===================================================================== */
:root{--navy:#33404c;--navy-2:#4a5a6c}
.btn.dark{background:var(--navy)}
@media (hover:hover) and (pointer:fine){ .btn.dark:hover{background:#283440} }
.contact{background:radial-gradient(80% 90% at 80% 0%,#46566a 0%,var(--navy) 60%)}
.filter button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy)}
.phase.an .nr{border-color:var(--navy);background:var(--navy)}
.cs-buehne{background:radial-gradient(70% 80% at 50% 40%,#46566a 0%,var(--navy) 70%)}
.case-zu{color:var(--navy)}

/* =====================================================================
   Farben als Variablen (für den Farbtester): helle Flächen und Akzent
   ===================================================================== */
:root{--flaeche:#ffffff;--akzent:var(--navy)}
body{background:var(--flaeche)}
.kino,.weise{background:var(--flaeche)}
.nav{background:color-mix(in srgb,var(--flaeche) 94%,transparent)}
.kino-licht,.schleier{background:var(--flaeche)}
.btn.dark{background:var(--akzent)}
@media (hover:hover) and (pointer:fine){ .btn.dark:hover{background:color-mix(in srgb,var(--akzent) 82%,#fff)} }
.contact{background:radial-gradient(80% 90% at 80% 0%,color-mix(in srgb,var(--akzent) 78%,#fff 10%) 0%,var(--akzent) 60%)}
.filter button[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent)}
.phase.an .nr{border-color:var(--akzent);background:var(--akzent)}
.case-zu{color:var(--akzent)}
.kapitel-linie{--linie-bg:var(--flaeche)}

/* Das Feld des Farbtesters */
.farbtester{position:fixed;left:16px;bottom:16px;z-index:140;width:292px;padding:14px 14px 12px;border-radius:18px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 60px -24px rgba(26,33,40,.45),0 0 0 1px rgba(22,28,34,.08);color:var(--ink);font-size:12.5px}
.ft-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ft-kopf b{font-size:13.5px}
.ft-kopf button{width:28px;height:28px;border-radius:50%;font-size:18px;line-height:1;color:var(--muted)}
.ft-lbl{margin:10px 0 6px;font-weight:700;color:var(--muted);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.ft-reihe{display:flex;flex-wrap:wrap;gap:6px}
.ft-reihe button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 6px;border-radius:99px;border:1px solid var(--line);font-size:12px;font-weight:700;background:#fff}
.ft-reihe button i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ft-reihe button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ft-reset{font-size:12px;font-weight:700;color:var(--muted);text-decoration:underline}
.ft-fuss{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ft-kopie{height:30px;padding:0 12px;border-radius:99px;background:var(--ink);color:#fff;font-size:12px;font-weight:700}
.ft-frei{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 6px;border-radius:99px;border:1px solid var(--line);background:#fff}
.ft-frei.an{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ft-frei label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;cursor:pointer}
.ft-frei input[type=color]{width:20px;height:20px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.ft-frei input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.ft-frei input[type=color]::-webkit-color-swatch{border:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.ft-frei input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
.ft-frei input[type=text]{width:70px;height:22px;padding:0 6px;border-radius:6px;border:1px solid var(--line);font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);background:#f6f7f8}
.ft-auf{display:none;align-items:center;gap:8px;height:36px;padding:0 14px 0 8px;font-size:12.5px;font-weight:700}
.ft-auf i{width:20px;height:20px;border-radius:50%;background:conic-gradient(#33404c 0 25%,#f6f2ea 0 50%,#123a24 0 75%,#e4e7ea 0)}
.farbtester.zu{width:auto;padding:0;border-radius:99px}
.farbtester.zu .ft-innen{display:none}
.farbtester.zu .ft-auf{display:inline-flex}
.farbtester{max-height:calc(calc(100svh / var(--vz, 1)) - 32px);overflow:auto}
/* Eigene Kinofarbe: heller Hintergrund braucht die helle Bühne in dieser Farbe */
.kino-frei.kino-hell .kino-buehne{background:radial-gradient(75% 70% at var(--bgx,64%) 44%,color-mix(in srgb,var(--kino-farbe) 55%,#fff) 0%,var(--kino-farbe) 55%,color-mix(in srgb,var(--kino-farbe) 88%,#000) 100%)}
.kino-frei.kino-hell .kino-scrim{background:linear-gradient(90deg,color-mix(in srgb,var(--kino-farbe) 85%,transparent) 0%,color-mix(in srgb,var(--kino-farbe) 40%,transparent) 34%,transparent 52%),linear-gradient(0deg,color-mix(in srgb,var(--kino-farbe) 75%,transparent) 0%,transparent 22%)}

/* Aufstellung im Kopf der Case-Seite: dieselbe Bühne wie im Kino, die Leinwand wandert hierher */
.cs-buehne.mit-reihe{--kf:var(--kino-farbe,var(--navy));background:radial-gradient(70% 70% at 50% 46%,color-mix(in srgb,var(--kf) 100%,#fff 7%),var(--kf) 55%,color-mix(in srgb,var(--kf) 72%,#000) 100%)}
.kino-hell .cs-buehne.mit-reihe{background:radial-gradient(70% 70% at 50% 44%,color-mix(in srgb,var(--kf) 55%,#fff) 0%,var(--kf) 55%,color-mix(in srgb,var(--kf) 88%,#000) 100%)}
/* Projektfarben: der Case-Kopf trägt die Farbe seines Projekts, wie das Kapitel im Kino */
.kino-projekt .cs-buehne.mit-reihe{--kf:var(--cs-bg)}
.kino-projekt .cs-buehne:not(.mit-reihe){background:radial-gradient(70% 80% at 50% 40%,color-mix(in srgb,var(--cs-bg) 100%,#fff 8%) 0%,var(--cs-bg) 70%)}
.ft-projekte{display:grid;grid-template-columns:1fr;gap:6px}
.ft-projekt{justify-content:space-between}
.kapitel-linie[hidden]{display:none!important}
.cs-buehne.mit-reihe .medium,.cs-buehne.mit-reihe .unscharf{display:none}
.cs-buehne.mit-reihe::after{display:none}
/* Im Case-Kopf bleibt die 3D-Fläche so gross wie im Kino (bildschirmhoch, unten abgeschnitten): gleiche Perspektive, kein Sprung beim Wechsel */
.cs-buehne.mit-reihe .kino3d{z-index:1;bottom:auto;height:calc(100vh / var(--vz, 1));height:calc(100dvh / var(--vz, 1))}
.cs-buehne.mit-reihe{transition:height 900ms cubic-bezier(.22,.8,.2,1)}
.cs-buehne.mit-reihe.voll{height:calc(100vh / var(--vz, 1));height:calc(100dvh / var(--vz, 1));transition:none}
/* Bedienelemente der Case-Seite blenden nach dem Wechsel sanft ein */
.cs.rein .cs-buehne .zurueck{animation:rein 600ms var(--ease-haus,ease) 350ms both}
.case-zu:not([hidden]){animation:caseZuRein 420ms var(--ease-out,ease) 350ms both}
@keyframes caseZuRein{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .cs-buehne.mit-reihe{transition:none} .cs.rein .cs-buehne .zurueck,.case-zu:not([hidden]){animation:none} }

/* Chat direkt im 3D-Handy (Desktop): das echte Feld liegt unsichtbar über dem gezeichneten, Knöpfe und Vorleser nur für Tastatur und Screenreader */
.schirm-sr{position:absolute;left:0;top:0;width:1px;height:1px}
.schirm-sr[hidden]{display:none}
.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.schirm-eingabe{position:fixed;left:0;top:0;width:240px;height:40px;margin:0;padding:0 14px;border:0;background:transparent;color:transparent;caret-color:transparent;font:500 16px/1 var(--f);opacity:0;pointer-events:none}
.schirm-eingabe:focus,.schirm-eingabe:focus-visible{outline:none}
/* Treffer beim Tippen (Vollbild-Chat): leicht blau hinterlegt, der mit den Pfeiltasten gewählte mit Ring */
.ai .chips-ai button.treffer{background:#EEF2FE;border-color:rgba(27,63,216,.42)}
.ai .chips-ai button.an{box-shadow:0 0 0 2px var(--ink)}

/* =====================================================================
   Ohne Leiste oben: der Name steht nur im Kopf und scrollt mit weg.
   Kontakt schwebt ab dem Kino unten rechts (Foto, ein Klick öffnet die Karte)
   ===================================================================== */
.nav,.nav.dunkel{position:absolute;top:0;left:0;right:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.nav.weg{transform:none}
.nav.solid{border-color:transparent}
/* In den Case-Seiten stehen oben «Zurück» und ✕, der Name fällt dort weg */
.im-case .nav{display:none}
.nav.dunkel .mark{border-color:var(--ink);color:var(--ink)}
.kontakt-knopf{position:fixed;right:max(16px,calc(var(--pad) * .4));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:66;animation:kkRein 380ms var(--ease-out,ease) both}
.kontakt-knopf[hidden]{display:none}
.kk-karte{position:absolute;right:0;bottom:72px;width:min(300px,calc(calc(100vw / var(--vz, 1)) - 32px));padding:12px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 26px 60px -22px rgba(26,33,40,.55),0 0 0 1px var(--line);display:grid;gap:4px;transform-origin:bottom right;animation:kkKarte 260ms var(--ease-out,ease) both}
.kk-karte[hidden]{display:none}
.kk-kopf{display:flex;align-items:center;gap:10px;padding:4px 6px 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.kk-kopf .pimg{width:40px;height:40px;border-radius:50%;flex:none}
.kk-kopf b{display:block;font-size:15px;line-height:1.2}
.kk-kopf small{display:block;font-size:12.5px;color:var(--muted);line-height:1.3}
.kk-zeile{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:600;transition:background-color 160ms ease}
.kk-zeile svg{width:18px;height:18px;flex:none;color:var(--akzent,#33404c)}
.kk-zeile.haupt{background:var(--akzent,#33404c);color:#fff}
.kk-zeile.haupt svg{color:#fff}
@media (hover:hover) and (pointer:fine){ .kk-zeile:not(.haupt):hover{background:#f1f3f5} .kk-zeile.haupt:hover{background:color-mix(in srgb,var(--akzent,#33404c) 85%,#fff)} }
@keyframes kkRein{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes kkKarte{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .kontakt-knopf,.kk-karte{animation:none} }

/* Hinweis unter dem Handy verschwindet im Gespräch (das Handy ist dann grösser) */
.dock-hero .tipp{transition:opacity 260ms ease}
.dock-hero.im-gespraech .tipp{opacity:0}
/* Lichtschein hinter dem Handy: weich, atmet langsam, gibt dem Handy Tiefe */
.dock-hero::before{content:"";position:absolute;left:50%;top:48%;width:78%;height:82%;border-radius:50%;background:radial-gradient(closest-side,rgba(91,124,255,.24),rgba(34,199,230,.1) 58%,transparent);filter:blur(28px);transform:translate(-50%,-50%);pointer-events:none;z-index:-1;animation:handySchein 7s ease-in-out infinite}
@keyframes handySchein{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(.95)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
@media (prefers-reduced-motion: reduce){ .dock-hero::before{animation:none} }


/* Kontakt als kompakter Kreis mit Foto; darüber die Sprechblase «Frag mich etwas» (führt zum Chat) */
@media (max-width:860px){ .im-kino .kontakt-knopf{bottom:calc(74px + env(safe-area-inset-bottom,0px))} }
.kk-knopf{position:relative;display:block;width:58px;height:58px;padding:3px;border-radius:50%;background:#fff;box-shadow:0 14px 34px -12px rgba(26,33,40,.55),0 0 0 1px var(--line);transition:transform 160ms var(--ease-out,ease)}
.kk-knopf:active{transform:scale(.95)}
.kk-knopf .pimg{width:100%;height:100%;border-radius:50%}
.kk-knopf i{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;background:var(--akzent,#33404c);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.kk-knopf i svg{width:13px;height:13px}
.kk-knopf[aria-expanded="true"]{box-shadow:0 14px 34px -12px rgba(26,33,40,.55),0 0 0 2px var(--akzent,#33404c)}
.kk-blase{position:absolute;right:0;bottom:72px;display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 16px;border-radius:18px 18px 6px 18px;background:var(--akzent,#33404c);color:#fff;font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 16px 34px -14px rgba(26,33,40,.55);opacity:0;transform:translateY(8px) scale(.94);transform-origin:right bottom;pointer-events:none;transition:opacity 260ms ease,transform 320ms var(--ease-out,ease)}
.kk-blase::after{content:"";position:absolute;right:23px;bottom:-5px;width:12px;height:12px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.kk-blase b{position:relative;z-index:1;display:inline-flex;gap:3px}
.kk-blase b i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.35;animation:tippPunkt 1.3s ease-in-out infinite}
.kk-blase b i:nth-child(2){animation-delay:.18s}.kk-blase b i:nth-child(3){animation-delay:.36s}
.kontakt-knopf.mit-blase .kk-blase{opacity:1;transform:none;pointer-events:auto}
.kontakt-knopf:has(.kk-karte:not([hidden])) .kk-blase{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){ .kk-blase:hover{background:color-mix(in srgb,var(--akzent,#33404c) 85%,#fff)} }
@keyframes tippPunkt{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.kk-chatzeile{width:100%;font:inherit;font-size:14.5px;font-weight:700;text-align:left;cursor:pointer}
.kk-chatzeile i{margin-left:auto;width:8px;height:8px;border-radius:50%;background:linear-gradient(120deg,var(--ai1,#5b7cff),var(--ai3,#22c7e6));animation:ping 2s infinite}
@media (prefers-reduced-motion: reduce){ .kk-blase b i,.kk-chatzeile i{animation:none} .kk-blase{transition:opacity 200ms ease} }
/* Zeitleiste der Arbeitsweise: ruhige Linie in der Akzentfarbe; die Querlinien beginnen erst nach der Zeitleiste */
.phase{border-top:0}
.phase + .phase::before{content:"";position:absolute;top:0;right:0;left:calc(56px + clamp(14px,calc(3vw / var(--vz, 1)),40px));border-top:1px solid var(--line)}
.phasen .faden{background:var(--akzent,#33404c)}

/* Schmal im Kino: nur der Kreis (die Blase läge sonst über den Texten); Chat geht über die Karte */
@media (max-width:760px){ .im-kino .kontakt-knopf .kk-blase{opacity:0;pointer-events:none} }

/* =====================================================================
   Schluss «Über mich»: freigestelltes Foto, Namensrahmen, Unterzeile, Text, Kontakt. Beige wie im Lebenslauf.
   Desktop: Foto steht ganz links unten auf der Kante, der Text beginnt direkt daneben und läuft breiter, vertikal mittig.
   Handy: zuerst der Text, darunter das Foto bündig links
   ===================================================================== */
.about{position:relative;padding:0;background:#efebe3;overflow:hidden}
.about .wrap{max-width:none;padding-left:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,calc(4.5vw / var(--vz, 1)),80px);align-items:end}
.about-foto{display:flex;align-items:flex-end;align-self:stretch}
.about-foto img{display:block;width:auto;height:min(540px,calc(38vw / var(--vz, 1)));object-fit:contain;object-position:left bottom}
.about-text{align-self:center;padding:clamp(56px,calc(9vh / var(--vz, 1)),96px) 0;max-width:760px}
/* Name im dünnen Rahmen, Titel zentriert darunter: wie im Lebenslauf */
.about .namenblock{display:inline-flex;flex-direction:column;align-items:center;max-width:100%}
.about .namenrahmen{display:block;border:2px solid #33404c;padding:.42em 1.4em .38em;font-size:clamp(24px,calc(2.3vw / var(--vz, 1)),34px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#33404c;line-height:1;white-space:nowrap}
.about .unterzeile{margin-top:18px;font-size:clamp(13px,calc(1.05vw / var(--vz, 1)),16px);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#33404c;text-align:center}
.about .about-text > p:not(.unterzeile):not(.copy):not(.profil-links){margin-top:14px;max-width:66ch;color:#3a4550;font-size:clamp(16px,calc(1.15vw / var(--vz, 1)),18px);line-height:1.6}
.about .namenblock + p{margin-top:30px!important}
.about .btns{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.about .btns .btn{height:42px;padding:0 16px;font-size:14px}
.about .btn.ghost{background:transparent;border-color:rgba(51,64,76,.28)}
.about .copy{margin-top:30px;font-size:12.5px;color:#7a838c}
@media (max-width:820px){
  .about .wrap{grid-template-columns:1fr;gap:0;padding-left:var(--pad)}
  .about-text{order:1;padding:48px 0 8px}
  .about .namenrahmen{padding:.42em .9em .38em;font-size:clamp(22px,calc(6.6vw / var(--vz, 1)),28px)}
  .about-foto{order:2;justify-content:flex-start;margin-left:calc(-1 * var(--pad))}
  .about-foto img{width:min(64%,260px);height:auto;max-width:none;margin-top:16px}
}

/* Kontakt im Schluss: zwei Knöpfe (E-Mail, Telefon), darunter ruhige Links (Lebenslauf, Profile) */
.about .btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Profile mit Icon im Kreis: Desktop nebeneinander, Handy drei gleich breite Kacheln */
.about .profil-links{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14px;font-weight:700;max-width:none}
.about .profil-links a{display:inline-flex;align-items:center;gap:10px;color:#33404c;text-decoration:none;transition:color 160ms ease}
.about .profil-links i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(51,64,76,.28);transition:border-color 160ms ease,background-color 160ms ease,color 160ms ease}
.about .profil-links svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){ .about .profil-links a:hover i{background:#33404c;border-color:#33404c;color:#fff} }
@media (max-width:560px){
  .about .btns .btn{flex:1 1 100%;justify-content:center}
  .about .profil-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:13px}
  .about .profil-links a{flex-direction:column;gap:8px;padding:14px 4px 12px;border:1px solid rgba(51,64,76,.18);border-radius:16px}
  .about .profil-links i{border:0;width:auto;height:auto}
  .about .profil-links svg{width:22px;height:22px}
}
.about .copy a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.about .copy a:hover{color:#33404c}
/* Impressum und Datenschutz: ruhige Einblendung */
.rechtlich{width:min(680px,calc(calc(100vw / var(--vz, 1)) - 32px));max-height:min(calc(86svh / var(--vz, 1)),860px);margin:auto;padding:0;border:0;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 40px 100px -30px rgba(26,33,40,.6);overflow:auto;overscroll-behavior:contain}
.rechtlich::backdrop{background:rgba(22,28,34,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rechtlich[open]{animation:rtRein 280ms var(--ease-out,ease) both}
.rt{position:relative;padding:clamp(28px,calc(5vw / var(--vz, 1)),48px)}
.rt h2{font-size:clamp(26px,calc(3vw / var(--vz, 1)),36px)}
.rt h3{margin-top:24px;font-size:15px;font-weight:800;letter-spacing:.01em}
.rt p{margin-top:8px;font-size:15.5px;line-height:1.6;color:#3a4550}
.rt a{color:inherit}
.rt .rt-stand{margin-top:26px;font-size:13px;color:var(--muted)}
.rt-zu{position:sticky;top:0;float:right;margin:-12px -12px 0 0;width:40px;height:40px;border-radius:50%;background:#f1f3f5;font-size:22px;line-height:1;color:var(--ink)}
@keyframes rtRein{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .rechtlich[open]{animation:none} }

/* Hinweis «Keine Cookies»: klein, unten links, einmal pro Browser */
.keks{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:64;display:flex;align-items:center;gap:12px;max-width:390px;padding:10px 10px 10px 12px;background:#fff;color:var(--ink);border:1px solid rgba(22,28,34,.08);border-radius:18px;box-shadow:0 14px 40px -14px rgba(15,23,42,.32);font-size:13px;line-height:1.45;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
.keks.da{opacity:1;transform:none}
.keks[hidden]{display:none}
.keks-bild{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#f4ece1;color:#8a5a2b}
.keks-bild svg{width:20px;height:20px}
.keks p{margin:0}
.keks a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.keks button{flex:none;border:0;border-radius:99px;background:var(--ink);color:#fff;font:inherit;font-weight:700;padding:9px 14px;cursor:pointer}
.keks button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
@media (max-width:760px){.keks{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:none}}
@media (prefers-reduced-motion:reduce){.keks{transition:none}}


/* Bewerten: Daumen unter der jüngsten Antwort, ältere zeigen nur die gewählte Bewertung */
.msg .bewerten{display:none;gap:2px;margin:6px 0 -4px -7px}
.msg.bot.jung .bewerten,.msg .bewerten.bewertet{display:flex}
.msg.bot:not(.jung) .bewerten button:not(.an){display:none}
.msg .bewerten button{width:30px;height:30px;display:grid;place-items:center;border:0;background:none;border-radius:50%;color:#8A939C;cursor:pointer;transition:background-color 160ms ease,color 160ms ease}
.msg .bewerten button:hover{background:var(--soft);color:var(--ink)}
.msg .bewerten button.an{color:#1B3FD8}
.msg .bewerten svg{width:16px;height:16px}

/* Smartphone: Chat als Fenster von unten, die Seite bleibt oben sichtbar (abgedunkelt) */
.ai-schleier{position:fixed;inset:0;z-index:94;background:rgba(15,23,42,.4);opacity:0;visibility:hidden;transition:opacity 260ms ease,visibility 0s linear 260ms}
.ai-schleier.an{opacity:1;visibility:visible;transition:opacity 260ms ease}
@media (max-width:760px),(pointer:coarse) and (max-width:1023px){
  /* Smartphone: Chat bildschirmfüllend, fährt von unten hoch, ohne dass die Seite scrollt */
  .ai.voll{inset:0 0 var(--tastatur,0px) 0;transform:translateY(40px);transition:opacity 220ms ease,transform 340ms cubic-bezier(.2,.8,.2,1),visibility 0s linear 340ms}
  .ai.voll.open{transform:none;transition:opacity 220ms ease,transform 400ms cubic-bezier(.2,.8,.2,1)}
  .ai.voll .ai-top{position:relative;padding-top:calc(20px + env(safe-area-inset-top,0px))}
  .ai.voll .ai-top::before{content:"";position:absolute;left:50%;top:calc(7px + env(safe-area-inset-top,0px));width:40px;height:4px;border-radius:99px;background:rgba(22,28,34,.16);transform:translateX(-50%)}
  /* Vorschläge untereinander und grösser, gut zu treffen */
  .ai .chips-ai{flex-direction:column;align-items:flex-start;gap:8px;overflow:visible;padding:10px 12px 12px}
  .ai .chips-ai button{height:auto;min-height:44px;padding:11px 16px 9px;font-size:15px;line-height:1.3;white-space:normal;text-align:left;max-width:100%}
  /* Weniger Dauer-Animation im Einstieg: schont Akku und Grafikchip */
  .hero::before,.hero::after,.dock-hero::before{animation:none}
}
@media (prefers-reduced-motion:reduce){.ai.voll{transform:none!important}}

.ai .fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}



/* JetCreator: animierte Navigationsleiste unter den fünf Schritten */
.nav-film{max-width:min(860px,calc((calc(100svh / var(--vz, 1)) - 190px) * 4 / 3),calc(100% - 2 * var(--pad)));margin:22px auto 0}
.nav-film figcaption{margin-top:0;font-size:14px;line-height:1.5;color:var(--muted);text-align:center}

/* Direkt auf einer Unterseite geöffnet (/jetcreator): die Startseite bis zum ersten Umschalten nicht zeigen */
.start-case [data-view="home"],.start-case .nav,.start-case .handy3d{visibility:hidden}

/* Tour «Das Wichtigste in 90 Sekunden» (mit ?tour oder per persönlichem Link) */
.hero .ctas.mit-tour .tour-start{order:-1}
.hero .ctas.mit-tour [data-cms-ziel="start-10"]{background:transparent;color:var(--ink);border:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){ .hero .ctas.mit-tour [data-cms-ziel="start-10"]:hover{background:transparent;border-color:var(--ink)} }
.hero .ctas.mit-tour [data-cms-ziel="start-12"]{display:none}
.tour-play{flex:none;display:grid;place-items:center;width:22px;height:22px;margin:-1px 2px 0 -6px;border-radius:50%;background:linear-gradient(120deg,var(--ai1),var(--ai3))}
.tour-play svg{width:12px;height:12px;margin-left:1px;color:#fff}
.tour-leiste{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:90;transform:translate(-50%,16px);opacity:0;transition:opacity .3s ease,transform .4s var(--ease-out);display:flex;align-items:center;gap:10px;width:min(460px,calc(calc(100vw / var(--vz, 1)) - 32px));padding:8px 8px 8px 18px;border-radius:999px;background:rgba(22,28,34,.92);color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden}
.tour-leiste.da{opacity:1;transform:translate(-50%,0)}
.tour-balken{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.tour-balken i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ai2),var(--ai3))}
.tour-text{flex:1;min-width:0;font-family:"Manrope Knopf",var(--f);font-size:14px;font-weight:700;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tour-leiste button{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:background-color .2s ease}
.tour-leiste button:hover{background:rgba(255,255,255,.22)}
.tour-leiste button svg{width:16px;height:16px}
.tour-pause.an svg{display:none}
.tour-pause.an::before{content:"";width:0;height:0;margin-left:3px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.tour-an .orb,.tour-an #kontaktKnopf,.tour-an .kino-fuss,.tour-an .kapitel-linie{opacity:0!important;pointer-events:none;transition:opacity .3s ease}

/* ---------- Case: Vorher/nachher mit Regler ---------- */
.vorher-nachher{position:relative;margin-top:clamp(28px,calc(4vh / var(--vz, 1)),44px);border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:#eceef1;box-shadow:0 30px 60px -40px rgba(16,24,40,.45);touch-action:pan-y}
.vorher-nachher img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.vorher-nachher .vn-vor{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.vorher-nachher .vn-griff{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);pointer-events:none}
.vorher-nachher .vn-griff::after{content:"‹ ›";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--ink);font:800 15px/44px var(--f);text-align:center;letter-spacing:2px;box-shadow:0 6px 18px rgba(16,24,40,.25)}
.vorher-nachher input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.vorher-nachher input:focus-visible~.vn-griff::after{outline:3px solid var(--acc);outline-offset:3px}
.vorher-nachher .vn-lbl{position:absolute;top:14px;padding:5px 11px;border-radius:99px;background:rgba(22,28,34,.72);color:#fff;font-size:13px;font-weight:700;pointer-events:none}
.vorher-nachher .vn-lbl.links{left:14px}.vorher-nachher .vn-lbl.rechts{right:14px}
.vorher-nachher figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(transparent,rgba(0,0,0,.45));color:#fff;font-size:13px;pointer-events:none}
@media (max-width:700px){ .vorher-nachher figcaption{display:none} .vorher-nachher .vn-lbl{top:10px;padding:3px 9px;font-size:11.5px} .vorher-nachher .vn-lbl.links{left:10px} .vorher-nachher .vn-lbl.rechts{right:10px} .vorher-nachher .vn-griff::after{width:36px;height:36px;margin:-18px 0 0 -18px;line-height:36px;font-size:13px} }
/* ---------- Case: Vom Papier zur Seite (drei Spalten, oben bündig) ---------- */
.vom-papier{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,calc(2vw / var(--vz, 1)),28px);align-items:start;margin-top:clamp(20px,calc(3vh / var(--vz, 1)),32px)}
/* Bilder mit Unterschrift darunter (der Rahmen schneidet sie sonst ab) */
.vom-papier .ph,.trio.unten .ph,.ph.unten{aspect-ratio:auto!important;overflow:visible;background:none;border-radius:0}
.vom-papier .ph img,.ph.unten img{display:block;width:100%;height:auto;border-radius:16px;background:var(--soft);box-shadow:0 18px 40px -30px rgba(16,24,40,.5)}
.trio.unten .ph img{display:block;aspect-ratio:4/5;height:auto;border-radius:16px;background:var(--soft)}
.vom-papier figcaption,.trio.unten figcaption,.ph.unten figcaption{margin-top:10px;font-size:14px;line-height:1.45}
@media (max-width:700px){ .trio.unten{grid-template-columns:1fr 1fr} .trio.unten .ph:first-child{grid-column:1/-1} .trio.unten .ph:first-child img{aspect-ratio:4/3} }
@media (max-width:620px){ .vom-papier{grid-template-columns:1fr} }
.reqs.personas b{color:var(--ink)}

/* ---------- Case: Ablauf in Schritten (wärmecheck.ch) ---------- */
.ablauf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,calc(2.4vw / var(--vz, 1)),32px) clamp(14px,calc(2vw / var(--vz, 1)),24px);margin-top:clamp(20px,calc(3vh / var(--vz, 1)),32px)}
.ablauf .schritt{position:relative;margin:0}
.ablauf .schritt .nr{position:absolute;top:-10px;left:-8px;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;font-size:14px;font-weight:800;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.ablauf .ph{aspect-ratio:1200/804;border-radius:14px;box-shadow:0 18px 40px -30px rgba(16,24,40,.5)}
.ablauf .ph img{object-position:top}
.ablauf figcaption{margin-top:10px;font-size:14px;line-height:1.45}
.ablauf figcaption b{color:var(--ink)}
@media (max-width:700px){ .ablauf{grid-template-columns:1fr 1fr} }
/* Kette der Systeme */
.kette{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-top:22px;padding:0;list-style:none}
.kette li{display:flex;align-items:center;padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:14.5px;font-weight:650}
.kette li:not(:last-child){margin-right:22px}
.kette li:not(:last-child)::after{content:"→";margin:0 -6px 0 14px;color:var(--acc);font-weight:800}
.kette li:first-child,.kette li:last-child{background:var(--acc);border-color:var(--acc);color:#fff}
.kette li:first-child::after{color:#fff}
/* Erkenntnis */
.lernen{margin:32px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--acc);font-size:clamp(18px,calc(1.6vw / var(--vz, 1)),22px);line-height:1.45;font-weight:600;color:var(--ink);max-width:46ch}
.ph.unten video{display:block;width:100%;height:auto;border-radius:16px;background:var(--soft)}
/* BCV Banking: zwei Screens nebeneinander mit Beschriftung, Hinweis, Chat-Skizze, Rückmeldung */
.zwei-screens{margin-top:clamp(56px,calc(9vh / var(--vz, 1)),96px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,calc(3vw / var(--vz, 1)),40px)}
.zwei-screens figure{margin:0}
.zwei-screens .ph{aspect-ratio:16/10;box-shadow:0 18px 40px -30px rgba(16,24,40,.5)}
.zwei-screens figcaption{margin-top:16px;display:grid;gap:4px;font-size:15px;line-height:1.5;color:var(--muted);max-width:52ch}
.zwei-screens figcaption .nr{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.zwei-screens figcaption b{font-size:clamp(17px,calc(1.4vw / var(--vz, 1)),20px);line-height:1.35;font-weight:700;color:var(--ink);letter-spacing:-.01em}
@media (max-width:700px){ .zwei-screens{grid-template-columns:1fr} }
.cs-notiz{margin-top:clamp(20px,calc(3vh / var(--vz, 1)),32px);font-size:13px;line-height:1.5;color:var(--muted);max-width:60ch}
.chat-skizze{margin:28px 0 0;padding:20px;border-radius:20px;background:var(--soft);max-width:440px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45}
.chat-skizze p{max-width:85%;padding:10px 14px;border-radius:16px}
.chat-skizze .ich{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.chat-skizze .ki{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.chat-skizze .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chat-skizze .chips span{padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600}
.chat-skizze figcaption{margin-top:6px;font-size:13px;color:var(--muted)}
.stimme{margin:0;padding:4px 0 4px 20px;border-left:3px solid var(--acc);max-width:52ch}
.stimme p{font-size:clamp(19px,calc(1.7vw / var(--vz, 1)),24px);line-height:1.45;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.stimme footer{margin-top:12px;font-size:14px;color:var(--muted)}
.handy-video{margin:clamp(40px,calc(7vh / var(--vz, 1)),72px) auto 0;max-width:300px;text-align:center}
.handy-video video{display:block;width:100%;aspect-ratio:702/1520;border-radius:34px;border:9px solid #16191d;background:#16191d;box-shadow:0 30px 60px -36px rgba(16,24,40,.55)}
.handy-video figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted)}
/* Streifen im Kino-Hintergrund (Desktop): Die halbdurchsichtige Abdunklung hinter dem Text (.kino-scrim) erzeugte über dem
   Farbverlauf sichtbare senkrechte Streifen. Auf grossen Bildschirmen liegen Text und Gerät nebeneinander, die Abdunklung kommt
   darum unter das Gerät (das bleibt so auch ohne Tönung), darüber ein farbneutrales Korn (overlay, Mittelwert 50 % Grau).
   Auf dem Handy liegt der Text über dem Gerät: dort bleibt die Abdunklung darüber wie bisher */
@media (min-width:861px){
  .kino-scrim{z-index:-1}
  .kino-buehne::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:overlay;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAAUgklEQVR42iXaCYIVNwwE0H/t9r6fm6chgQSG+d22VKrF5lde2bvdNfy/trVHmu8r+Z6772unp5nX129tafU9e86z9+W3o+2Xak01n2+kOm+5KXnGeeOudPp57Tv7jl/t5eWXveeeUXPZ+da0znd6LjWvlM7Y5+y+9621tLPPure/Wk77SqmrfZ83jNHGumX1r/S7k+8oX5/p1vyb/bVe0mk1fXNl6681773T2e/Ul0+ft/Z5vl7bzLdnj463fekNWy/1y2VY8nqzz5dXPe/uY1n5G3vM+TutpHLWymfHc7rv9Y552/h6q7uUogI7jXJqbnnk3dZoZVjm561KOm69tczveWfq61wPufcWK34r1d+c47u35f2V6pO9qcAZZY5xVktzPs9+e6lxnU1damtvzK0xr91v5pdOevv72o4mtJFP7d+Xemmr1bHeL9tcq7nu9VZbaWvxt67l1LfznGecqbQlH3W2mJS+vr8zurWo0r3v6MTX013evsbqbbyR8vdeT+em/htfmqvPNraVt7efKq88Ttp91PnNWlcs5tXvzns1e341v5JafM/38lWlU8+XaoGoenK5Kj4fELWq4780b1/5vlTeS565p9W+OT81HlOx15z5q23n+oHy2MvP8rXpNeD22vSvjczvpDHKOrmqQfGAr2dd+ZUONWXd3fr4nh+a/mWIU6x9WgLjPnctO9WkjPvmc5oG3tF7vXmUPW4C6M/Hx1x3jnoBMKV97rd7+XkPwL034vkNxNq0UpjPMx55XkC0gtZJ9ytjZqCw1tl60tkYlQk8EJPy9qXzvtx37tbRkrk6v1ENnFqoTCnGCN6qwkTZmynYbR8YzNvKvtX7nEvTb9vXJCXvGneklu58q7/vbi/U3FXLgq357vrp7JyatFO7qfXqCTeNtczQmSoATtlr12ee+1ctJtvlzjDx7dsNfUIinmrgVGSnZV+3t9vSO/ekX3SkmdgAgmq3g0Ssdp61P+Pgn5HxzreU1Y4hsk4frx8Km2bL9+5307X8avRuHw3elPJ9c0LQ75mYL93T7RUXfGpsyuqYVtVSKUCDAcq52WyNU1BBt4LjGR5SfDaVNMwuVnqqcrDa7EEgAbT2gWnfQV9L9VM2kwMTen0pOMqaUlWup7az1GZIWkEW8813Wv5m6f2aBVC3jQzCEFvLl0c98D0s8qc0AxZmUHR+5jKwWfopOT/UFhwE9rMiaYyDXPFlrD7hbUzhQV/XS7CDtl1PMqgQMOtNGQbub0Hllz+4zzZqnlcHoYSHsmr7VNfUYKFvef9TC9wwY9Pmq30GE/MWYALmqmimcGGLL8YLMeRfOjbTiYHt6MaH1r8QlIpu1jAguO2+fo6aDsNgfkfPaoKvRvbSecCrmeTkjbU3YKQp+qdQev/r3woax74JglrFfZSiPrO2FVjjykjFs9BIaxbRlKrVu1ZTxrI+/ejaYEQuMdE/4tN22mWGgpXfAtNyg3ALoiCRSTleOf5wl3dnQv0jLZqwpmlbKCnXiYp3C2KlcR2HXkV5a8Ff7hSsRf16KqPvH4WgZ5f+LLjwFaKQ6jivtpL7LA18d4x4y8djcEL9Kv2o4wvgZGrohRi1BynDHgKC8UGjWqDjh3jNDEkF0JbVJoQwflKaihN0+Y3816kxtBn5e8sYBPoFdScU92gMwtfpDdIZV/fhEwj59V97+CRgA0CGE+NTXcPxMD60hBH4FlFLPhV6liZAxbjCqFWscdroVjwXonjxHTCwY5BL29ULglqMk1mYuxHUHSYBEd3odKaPQKjASEmn05qEj2BuCmgyLRc271ZMzFVyQoGFXo6Xgq1Ky/0HDJnJwYglP+sDwrPUHb9gLQqW8DWKLqjZI4Z9bE1JPVn/DkOhqNVMekkAtgRlrXOWAmG+80sr1hJTVdRfF6zX6EwVq9M6aBRcWeBFRfbQOyBAFLF4uxlw3MaZ0PPwZ48bQTDGolaNR0+/FUI12TSuwADxASOIwqrMJSV8b9nMTC8jSY6lWguWid1V7Tr4MH9/TNE/rI4abY0idpSKvc8PDD/FrIU92neWtFblsYxE6RprZryIQFUN6rinG0G/fGxhvdTJA3WWFnGEfqe9p7YwjxVB6t/vhe1rDYGp5zu9ntYfpkn7CwUihdarBRkf8a62CQebpzKe/Ef/MBcVhyYPNCTeOtBpibFNJu+X9dbAk2Kmk4AXrgklNgt9DckOw5tu414W68MDUHjeqbHBkBofDiBwmTOGEE/gEhZlFCj1p/XXGTPMSp3uAOXmTdiBiR7htxnhHiyXQ0FbIufIksULm3NIreGs4SU6jTdtmPZgUMs7z6qMwPyFdcI8mcVEdKq7LObiipWIEt5RGUPCiXimB2gDbmjdCKJZvMhxDZiELiJtYvmkV3O26Gb3FI0tboFgJW2hvYQF25/wDDC6dRS96gmNPVaEZMy+EZUSOEtfIPaphwA3cHxBCbUHxAHwy2AqVKAjzmqdqAJjTlB8vF2+XE1TyC4x/sITAjK78zFRVd/oZ27LTCkUrZ4xqCi1R7P0Ijg8/6KM+J2YLhIEhY3h2RIGMURdizVl+tl+9vGEIdKJw1w90UcCQkpAV5kNxpU4yRjEVKHzRBWW/iO952MSOZsNgV29sZbZqGfwvolN5KzGarSxLxzE7YA6DMoRyV5DS7jCO7EEVVy8ADcTEOXACI4M4bN/vU1ey6FxhoypOtQTAs7VVhZr8iWI4Ys0sbJ2sicZKwEczYHKINFCyQceGuzfZ9ioxg+XLM9nafao4VTuDFhsANKEHgrw9S8Ch+5hUW7AgN+gKTGgRuAplrOfPw9JpS++KYe5tLQm4WRWPHLeolTWNTCwBMRCRhxiXdD0paF2qWAKk5WcMQvPpB05bWWj6W1a2aMecAC/X+SgVFb+2Tt+xwTSGMBPIgiIlFVb1cNo+62GWbdpxAQsD0sEz2wEa/7MUH9/YgWGIzwgNEm4xo7Nq78azQg17+G0ZE9OnzlYOJ1HMhE6J0vgw2+XWv/MrgSAPSNQ9eAxiI//mhfOwXipAM/i+YJw+UW6CnszREKq8VCETQZ/tbrCCMxgPRSzXkiadLb8yCWSH/c8PFTf+HLwRgYyxgxBj5Fckbh/RkoqZ3eFRGGItKC1ell9O04QqfV0nQli+VQ5QF2wj18k079e+JegIipsnEtYNGtmKr6AkiZ3VjK+t9K8x7F1yv3u0Rp8xVeNjFiOhIPVjP4X6qPDwFuDikYjaH5mWRg4bo6sAwh0xnZO+0UiZ7k7lRFnNDiqhdiEfUmLHTITZmi2L+AdQRmdVQxicLk7n70h4CLc7nRMnUIjYzftKOL8od6dIy0s5lgJZtY0tfYVG/ooHPNmYCQC0uY9PRqLx4A3B/PhdJgfoblykORF2VMMq9ANQT9ZEweXUJptBvwjAKBVdcKJTJ/ZLCTOJvGQYhZ9bJGbLqTrXN34fVvBh+ZV/gqCAeb+dxSQf3pmwLD+DIfkxcH2LRKo5Bxa8XfkcRKZhosdVBNHEZF4rdYa5SoEb8mS7UDxnxgobqEgufD2H/v0eUfna8LWhryviMX8vUFjHDwoRIcjkevGEz+nwNiZC4Y1TBJt5THYmyANKaisWGtEc4MaZxWizcf8goxGGRBdhoLOnYxkJb4h/ISShnCyTJFbZ4yCHbMq5B8z8dbYQ7CC4GgR/kOMS4lmHHe1HtiP5NkhnWKhXZSr5SuJoHGq9YUFAACbyOTsJaDXpRdRPEf4xZot4gtIQwdNljUI549n7srNhLA/I5x7yG74EaNLY1A6aeIcsQ3TIN17TA+3H2DX6BIC+govZZNH+0EWEqCm+q0XQDPbT+ODn04Pn4W0pa4543AF0tnDQ0pfGH/iHj/MA/2KyDqgZAKmxkeRepz4QFkk7xsW8RfuBNuFozBNOrxE4x5BnpPGuuido49J5UmNwVvM8hECuDYy9zAts6/CzBlmvCkcum82HhB3xq9GTl5xvgc2kj2fx9ecd9ApycGgTVIzqG3F8YS26ft8O86zwqAqnpm8Z3Gyd5zKJhwGkhOHL6n4Z14YCjP5OI3FJFBSFPMtmrf24O3sO9kBA4bTxRK6yrlZxVe54/EFK4eCR3i3G0nbPJBXmXO09/NZm5rBAfHviMOY2NIJ4/62ssaRKeZPcWIyTMqK6WoRqHl4iTlDzQrBVfgUtIJh7Q3QcNX9Ga0p3MpcEwwCPCM3RiWbCjIXCrrJlq/y2Jj/5C9GKLyliCcqSqz0ndrxWzs8wTw2EKosiqf9e8EqNWwBVsHFTFEwDcLouiac8lG8AgY1tojRkAge6MdIxnlJjtSFHrjsGYE7YmkJGyF+VBHndxKySTqqQAPSxOW/ZBe83m+cMljHn1e2Ov9DFyPOeXKwjX7H2aHRC3XI58XQxvEo8UeqIby/OHXZOAQfJGuRQ6zOvKrqPCfOcKFQN08cmZWiSSxqif3hJFohWdDVJnfhHDVmkKB3H9JDFOgBKnxB1Jzz/TtcwDWzphKUFuI8IlNzOxtDtak34/G8QYrex2uaF5W0HHJTaJ/iQ7LXC6pr1OYFK94uTf/tILKA6BSHN1REvRrhoTdifv2L57FxvnTJXGFBljYVmSFCoKFAqFcjCK8MFvmt/3o4bnRFJfEnghNkkPSMBt0e59Zagpc0kCcW7f9OgeWlhwUJ0ENMCBBC+QlEERXneOafTSVIv6jIiz/LaV7Y8pgz/87B662B/wh7Ft2DpTznLULQI+Bg1zDrforLZcaRo43MK20od4uT/0ZwOOsaNw743TNIMhhzUO9vAFKcRBsHNMr4xLCa05A0GoE9qnUxHnGEFf57kCjcGFODMgS9CJG/1iKb4Ps4lib/N4xgiGyKw2ZxyNznEOMVBu4rcZ4n+hdtJq9wxNYatmhvP6yKaNjj8DKOhWl7ocnm5DbenkPYcZpnUVYeeRrKjFT1wohWwJuoGFi+uOWY/29YFm/6YrnAYn9FhfUDIuKYiQv4Ee4rVQbaeeRi5LBs5JG1dTIOeL44S+YtJJqt5JHrMSj/KFt6JYUZdpgi1URAwNRa9jGQO4jyd8N5ZozZtXbEAV2curbQH7k/x/3F3wxBSSzri5ubOIILRoF5RGtnMBHV41uCleMWJfyerPfQdVwahBRgu/TBi3ZFxHiWqRgvrpWC2IbWvcVdyRhfjP2jm9g7HdLgF7RdGf9udO5V7hBQM/f9wiyIfCLFaR+G6gxCnTj4hKrH+TFNjSHiEvC4jvBHBa9qipdHJ9XWxMmGeEXq0hfqm+kjmkLXKEvVye0XVquJjej8BDWc8EpHyeNQssb5LKhzBeFBcxxcsRZAy3i+OKblsrW1moOtO14yPHP/vi/ubcJV1BPd5R3j+OsWMZ3bFIJEtTjhP5Jwbi8sbeYY80xXsu24zEdOnKMQrsXtN9oTdsN8i4k/sNzaFHdoRt8uXxwxNzUBOwjtemfC4ngbXqay9Mg//KvxwpNoME7vcMMOWQkBPJuqSTA9TtBpsoE93NnCoThm+rMNw3a+e/vz6ztIk+qev9hlBcJScGwkEeqOcONeZoY5GZzljnRqCXG7QHAUnLCbkBtH0NRXLo1zbn4rMkwcVahJ0GcghoFDIiK48L3+DsFRfRzk1pg7Qr4V6u/OkwRRolN/XQ9oDIZnbZreljjgJnOGkheJCzDTZCSlcXaHP/2zrxGoeUGeeIqdWFZJYSRpZZyXLVb5Q0Bn/8LSBZx8paoS9ie3ocThLjibcoLq/sa4iAKoTYIYEieVMKKNys1wzUGJ+rHs3vyffCrIyRs/fi4CLMiY+zBVGOvv+ubvDmUuhIWQY9Yl2CctxVmD8MURwiOwszYI7O/8AcfafBxgGt/SqjZ/P+arR8H5xDKQpJ2/OEBmfRl3wVDe3nFy3NYX77jB6HFWf+MeeYBQAAGcAVH3tTs6uv8uNWyv/XYcvk3fiFVjuYXmLMLw6h/ghM04Bwt+gPVwbxzJJiHhYA/8pjhoGnF9Eee0L2z+/bsq3XGfmdrPEH3dn7U48YyTwRYXpBfbK3iLVF4pU5jaOFmjDnFRs4OZ9gtq3uPwvFidBYXEOBS4/w/g81+7wTROD8aOpF5TXAMzZlIKYfeNHN03BeNwM6BPaTdbHGNDQHIgua84wwE3MqgBvEHMWZj5/qdBP/nrAR5/rdP4jB2gzPL83wFjpFK7ZTIMhZygIigrzhb97gbK5Dis8sIhceBx0ysfCEtBu3FK8WOp/86ax9f/4rJq/J28+WocgCNuIMFLeCbgc74cJ4sSS0g8t3rWn/xHoonblQhsAuWufwqq1r9aaGGTnZiV+DsFJw7iqK2kfOLSOeBKqykKs1PejNNXjBw33x//xwt8IyQdSFkcz2GxVoRUoYtAvx9d8Ev6hoZR9d9BVgTwuCHDKGy+SVw5Lve+IM44uvAST+th/MlGnioSF8g3HPjGBeh4FkAG9vrziBkuL2J+3OzlOLme3hk0zTn7VHTEDmhC+BqoI15xyfJFrOlxRJTj6MichfprpAHwrVRc5v/5YiA75cd3gSEwF7jkjHiWE8db++/MGPRuhHIyJeR8cdVuERQkrryqQWov2LMHxRCSE+fL0AqmaKbEX40QmkwBZMb9RIrrUkyJxHMkMSkjrtes8YvroTirWXGCIK8gwRFH0IbxTz7jeFP6rJAQ/fvRf9IenGqVSZtunGn6YDisultsNIQ5/vaFpZBE0xs3Rjcu/aUTuG79xTFOXKqieu3Wnr++abUXzPj7IjGbOhTHP3SXsCjzCUwoFHMdszPjbi9ucvofv5u9oJZmn3lmi487Y1JsB3GWIxcmKFk/Dwq7WSLAw5Fa77hVKQW39ZBSgeiZm68MY4qC4k62RAbB8krAVhFBwMCmL+xiiHcJNl8zKOpHv/SMVJw346/oZOGH6AXOgzWYixKS/OL0+sRRuxjY/FeaqD0urwfxpcwk58YpYWFOY0rjbDcuyX6sv5yKR+IY7oYlgWy/IE24KdtL/NUJvMdwKFP7u0uMb51wIWKNuEyPOM5onDA4MpVniCH6+Y33Dy3+7uxVx/CQAAAAAElFTkSuQmCC) 0 0/96px 96px repeat}
}
/* Hinweis nur für Thomas: eigener Browser auf einem persönlichen Link */
.ich-hinweis{position:fixed;left:12px;bottom:12px;z-index:2147483000;display:flex;align-items:center;gap:8px;max-width:calc(calc(100vw / var(--vz, 1)) - 24px);padding:8px 8px 8px 14px;border-radius:14px;background:rgba(22,28,34,.92);color:#fff;font-size:13px;line-height:1.35;box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.ich-hinweis button{flex:none;height:30px;padding:0 12px;border-radius:99px;font-size:12.5px;font-weight:700}
.ich-hinweis .ja{background:#fff;color:#161C22}
.ich-hinweis .zu{width:30px;padding:0;color:#fff;font-size:18px}


/* ================= Smartphone: kein 3D-Handy im Einstieg (Okt. 2026) =================
   Gleiche Grenze wie istMobil() in seite.js. Der Chat läuft über den Button unten (.orb). */
@media (max-width:760px), (pointer:coarse) and (max-width:1023px){
  .dock-hero,.handy3d{display:none!important}
}
/* Kein Hinweis «Psst, das Smartphone antwortet.» mehr: Der runde Knopf führt zum Chat */
.dock-hero .tipp{display:none}

/* Zeitleiste: Die Linie beginnt in der Mitte des ersten Kreises (sonst schaut sie oben heraus).
   Abstand oben = Innenabstand der Schritte + halber Kreis (28px) */
.phasen{--faden-start:calc(clamp(22px,calc(4vh / var(--vz, 1)),34px) + 28px)}
.phasen::before{top:var(--faden-start)}
.phasen .faden{top:var(--faden-start);height:calc(100% - var(--faden-start) - 28px)}

/* Chat: Projektzeile unter einer Antwort zu genau einem Projekt (Bild, Name, Gerät) */
.msg .acts .projekt-zeile{display:flex;align-items:center;gap:11px;width:100%;height:auto;padding:7px 12px 7px 7px;border-radius:14px;background:var(--soft);text-align:left;font-family:var(--f);line-height:1.3;transition:background-color 160ms ease}
.msg .acts .projekt-zeile img{width:52px;height:52px;flex:none;border-radius:10px;object-fit:cover;background:#E3E6EA}
.msg .acts .projekt-zeile span{flex:1;min-width:0}
.msg .acts .projekt-zeile b{display:block;overflow:hidden;font-size:14px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.msg .acts .projekt-zeile small{display:block;overflow:hidden;margin-top:2px;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.msg .acts .projekt-zeile i{flex:none;font-style:normal;font-size:18px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){ .msg .acts .projekt-zeile:hover{background:#E6EAFB} }
.msg .acts .projekt-zeile:active{transform:scale(.99)}
/* Chat: grosse Projektkarte beim ersten Projekt im Gespräch (danach die schmale Zeile) */
.msg .acts .projekt-karte{display:block;width:100%;height:auto;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;text-align:left;font-family:var(--f);line-height:1.3;transition:border-color 160ms ease}
.msg .acts .projekt-karte img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#E3E6EA}
.msg .acts .projekt-karte .pk-text{display:block;padding:11px 12px 12px 14px}
.msg .acts .projekt-karte .pk-geraet{display:flex;align-items:center;gap:7px;overflow:hidden;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.msg .acts .projekt-karte .pk-geraet i{width:6px;height:6px;flex:none;border-radius:50%}
.msg .acts .projekt-karte .pk-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.msg .acts .projekt-karte b{overflow:hidden;font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.msg .acts .projekt-karte .pk-los{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;background:var(--soft);font-size:12.5px;font-weight:700;transition:background-color 160ms ease}
@media (hover:hover) and (pointer:fine){ .msg .acts .projekt-karte:hover{border-color:rgba(22,28,34,.28)} .msg .acts .projekt-karte:hover .pk-los{background:#E6EAFB} }
.msg .acts .projekt-karte:active{transform:scale(.99)}
/* Blase «Zurück zum Chat» (nach einem Sprung aus dem Chat zu einem Projekt): auch im Kino auf dem Smartphone sichtbar */
.kk-blase svg{flex:none;margin-left:-2px}
@media (max-width:760px){ .im-kino .kontakt-knopf.zurueck .kk-blase{opacity:1;pointer-events:auto} }
/* Der runde Knopf bleibt auch im Fuss: auf dem Smartphone unten Platz lassen, damit Links und Impressum nicht darunter liegen */
/* Mobile: Das Foto schliesst die Seite unten ab, kein Leerraum darunter (der runde Button steht rechts neben dem Foto) */

/* Mobile im Kino: Der runde Button bleibt an seinem Platz (sonst schneidet er Text ab), dafür enden die Projektstriche vor ihm */
@media (max-width:860px){
  .im-kino .kontakt-knopf{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .kino-fuss{right:calc(max(16px,calc(var(--pad) * .4)) + 72px)}
}