/* hilfmirmal v11 · „Wir schenken dir Zeit“
   Helle Fassung: oben Greige und Taubenblau, nach unten immer heller bis ins zarteste Hellblau.
   Serifen für Aussagen, Inter für Lesetext. Der digitale Mitarbeiter läuft als Leiste mit. */

/* Logo: Playfair 600 (SIL Open Font License), nur die Zeichen von „hilfmirmal...“, optische Größe 28 */
@font-face{font-family:'Playfair Logo';font-style:normal;font-weight:600;font-display:block;src:url('../../fonts/Playfair-600-Regular-logo.woff2?v=e5acacb8') format('woff2')}
@font-face{font-family:'Playfair Logo';font-style:italic;font-weight:600;font-display:block;src:url('../../fonts/Playfair-600-Italic-logo.woff2?v=f528f0bb') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../../fonts/InstrumentSerif-Regular.woff2?v=60c06664') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../../fonts/InstrumentSerif-Italic.woff2?v=6ee678c3') format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../../fonts/Inter-400.woff2?v=48a0c250') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('../../fonts/Inter-500.woff2?v=a1eab7f4') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../../fonts/Inter-600.woff2?v=9a3d22c4') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('../../fonts/Inter-700.woff2?v=ea906309') format('woff2')}
@font-face{font-family:'Caveat';font-weight:600;font-display:swap;src:url('../../fonts/Caveat-600.woff2?v=1c591acd') format('woff2')}

:root{
  --greige:#e7e4e0;
  --sand:#f1efec;
  --cream:#f7f6f4;
  --paper:#fdfdfc;
  --sky:#cfe7f8;
  --sky-2:#9fcdee;
  --sky-pale:#e8f4fd;
  --sky-air:#f3f9fe;
  --ink:#1d2b36;
  --ink-2:#3e4f5b;
  --ink-3:#5f6e79;
  --blue:#3f6f8f;
  --blue-deep:#2f5a76;
  --xray:#9fd8ef;
  --night:#1c2a35;
  --on-dark:#f7f5f2;
  --on-dark-2:rgba(247,245,242,.74);
  --line:rgba(29,43,54,.12);
  --card-shadow:0 40px 90px -50px rgba(29,43,54,.38);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gutter:clamp(20px,6vw,110px);
  --rail:0px;
  --mega:clamp(3.6rem,1.2rem + 8vw,10.5rem);
  --big:clamp(2.6rem,1.1rem + 4.6vw,6.6rem);
  --say:clamp(1.2rem,1rem + .8vw,1.8rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (min-width:1100px){:root{--rail:170px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--greige)}
html.lenis,html.lenis body{height:auto}
body{margin:0;background:var(--greige);color:var(--ink);font-family:var(--sans);font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
em{font-style:italic;color:var(--blue)}
::selection{background:var(--sky);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
/* Auf dunklem Grund (dunkle Szenen, Kopfzeile darüber) ist der Tastaturrahmen hellblau, Blau wäre dort zu schwach;
   helle Karten darin behalten Blau. */
.dark :focus-visible,.hdr.on-dark :focus-visible{outline-color:var(--sky-2)}
.dark .check-result :focus-visible{outline-color:var(--blue)}
/* Sprungziele ohne eigenen Fokus (core.js): Der Fokus liegt dort nur, damit die Tastatur weitergeht, ohne Rahmen. */
.is-target:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;z-index:100;background:var(--paper);color:var(--ink);padding:.6rem 1rem;border-radius:10px}

/* ---------- Kopf mit Uhr ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1rem var(--gutter);color:var(--ink)}
.hdr::before{content:"";position:absolute;inset:0 0 -34px;z-index:-1;pointer-events:none;background-color:var(--hdr-bg,var(--greige));-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent);opacity:.9;transition:background-color .7s ease}
.wm{font-family:'Playfair Logo',var(--serif);font-weight:600;letter-spacing:0;font-size:1.75rem;line-height:1;text-decoration:none;white-space:nowrap}   /* Schriftzug „hilfmirmal“ in Playfair, „mir“ kursiv */
.wm em{font-style:italic;color:inherit;padding-right:.03em}
/* Slogan klein unter dem Schriftzug, gesperrt auf dessen Breite (wie im Brand-Paket) */
.wm-txt{display:flex;flex-direction:column;align-items:flex-start;gap:.16em}
.wm-dots{color:var(--blue)}
.wm-claim{font:500 .36em/1 var(--sans);letter-spacing:0;color:var(--blue)}   /* der Slogan setzt den Satz fort: hilf mir mal... Arbeit abgeben. Digitale Mitarbeiter entlasten dich. */
.hdr.on-dark .wm-claim,.hdr.on-dark .wm-dots{color:var(--sky-2)}
.clock{display:flex;flex-direction:column;align-items:center;line-height:1}
.clock-t{font-family:var(--serif);font-size:clamp(1.6rem,1.2rem + .9vw,2.3rem);font-variant-numeric:tabular-nums}
/* Die Stimme des digitalen Mitarbeiters sitzt direkt unter der Uhr: kleines Zeichen, ein Satz, beim Wechsel tippt er kurz. */
.clock-say{position:relative;display:flex;align-items:center;gap:.45rem;margin-top:.4rem;max-width:min(46vw,560px)}
.clock-say .dm-face{font-size:20px;animation:none;filter:none}
.clock-l{font-weight:500;font-size:.86rem;letter-spacing:0;text-transform:none;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock-say.typing .clock-l{opacity:0}
.clock-say.typing::after{content:"• • •";position:absolute;left:28px;top:50%;transform:translateY(-50%);font-size:.8rem;letter-spacing:.12em;color:var(--blue);animation:typing 1s ease-in-out infinite}
.clock-say.swap .clock-l{animation:swap .6s var(--ease)}
.crew-bubble{display:none!important}
/* Rechts im Kopf: [Erstgespräch][Menü], wie auf allen Unterseiten. Der Menüknopf (.hmm-menueknopf, schale.css)
   steht ganz außen, genau dort, wo im offenen Menü „Schließen“ sitzt. Beide mindestens 44 px hoch. */
.hdr-rechts{justify-self:end;display:flex;align-items:center;gap:.5rem}
.hdr-cta{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:.92rem;text-decoration:none;border:1.5px solid currentColor;border-radius:999px;padding:.55rem 1.15rem;transition:background-color .25s,color .25s}
.hdr-cta:hover{background:var(--ink);color:var(--paper)}
.wm{min-height:44px;justify-self:start}   /* nur so breit wie der Schriftzug, sonst reicht der Link bis an die Uhr */
.hero-sound .wave{display:none}
.hero-sound[aria-pressed="true"] .wave{display:inline}
.hero-sound[aria-pressed="true"] .mute{display:none}
.hdr{transition:color .6s}
.hdr.on-dark{color:var(--on-dark)}
.hdr.on-dark .clock-l{color:var(--on-dark)}
.hdr.on-dark .hdr-cta:hover,.hdr.on-dark .hmm-menueknopf:hover{background:var(--on-dark);color:var(--ink)}

/* ---------- Die Mitarbeiter-Leiste ---------- */
.crew{position:fixed;left:clamp(44px,4.4vw,76px);top:108px;bottom:44px;width:32px;z-index:50;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:16px}
.crew-track{position:relative;flex:1;width:32px}
.crew-line,.crew-fill{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-50%)}
.crew-fill{width:2px;background:linear-gradient(var(--sky-2),var(--blue));transform-origin:top;transform:translateX(-50%) scaleY(var(--p,0));transition:transform .8s var(--ease)}
.crew-me{position:absolute;left:50%;top:calc(var(--p,0) * 100%);transform:translateY(-50%);z-index:2;transition:top .8s var(--ease)}
.crew-bubble{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:max-content;max-width:132px;background:rgba(253,253,252,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:.45rem .7rem .5rem;box-shadow:0 18px 40px -24px rgba(29,43,54,.5)}
.crew-bubble small{display:block;font-size:.62rem;font-weight:600;letter-spacing:.05em;color:var(--blue-deep);font-variant-numeric:tabular-nums}
.crew-bubble b{display:block;font-size:.8rem;font-weight:500;line-height:1.3;color:var(--ink)}
.crew-bubble.swap b{animation:swap .7s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.crew.on-dark .crew-line{background:rgba(247,245,242,.2)}

/* Schmaler als 1100 px: dieselbe Leiste, nur schlanker; die Sprechblase steht dann unter der Uhr. */
@media (min-width:761px) and (max-width:1099px){
  :root{--rail:44px}
  .crew{left:24px;width:24px;top:104px;bottom:36px}
  .crew-bubble{display:none}
}
/* Handy: feine Linie mit wanderndem Punkt am linken Rand. */
@media (max-width:760px){
  :root{--rail:10px}
  .crew{left:6px;width:12px;top:92px;bottom:24px;gap:0}
  .crew-count,.crew-bubble{display:none}
}

/* Die Leiste tippt, bevor sie spricht */
.crew-bubble.typing b{opacity:0}
.crew-bubble.typing::after{content:"• • •";position:absolute;left:.75rem;bottom:.55rem;font-size:.8rem;letter-spacing:.1em;color:var(--blue);animation:typing 1s ease-in-out infinite}
@keyframes typing{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- Der digitale Mitarbeiter spricht ---------- */
.dm{display:flex;align-items:flex-end;gap:.75rem;margin-top:2rem;max-width:32rem}
.dm-bubble{position:relative;display:block;background:var(--paper);color:var(--ink);border-radius:20px 20px 20px 6px;padding:.8rem 1.15rem;font-size:clamp(1rem,.95rem + .3vw,1.18rem);font-weight:500;line-height:1.4;text-align:left;box-shadow:0 18px 40px -24px rgba(29,43,54,.5)}
.dm-text{display:block;transition:opacity .45s}
.motion .dm{opacity:0;transform:translateY(12px) scale(.98);transform-origin:left bottom;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.motion .dm.typing,.motion .dm.said{opacity:1;transform:none}
.motion .dm:not(.said) .dm-text{opacity:0}
.dm.typing .dm-bubble::after{content:"• • •";position:absolute;left:1.15rem;top:50%;transform:translateY(-50%);font-size:.95rem;letter-spacing:.12em;color:var(--blue);animation:typing 1s ease-in-out infinite}
.dm-center{justify-content:center;margin-inline:auto}
.s-chaos .dm{position:relative;margin-top:2.4rem}
.dm-night{margin-top:1.6rem}
/* Zweite Blase direkt darunter, ohne zweites Gesicht (wie im Chat) */
.night-says .dm-night:first-child{margin-top:1.1rem}
.dm-night.dm-follow{margin-top:.5rem}
.dm-follow .dm-face{visibility:hidden}
.s-scan .dm .dm-bubble{background:rgba(253,253,252,.95)}
.dm-greet:empty{display:none}

/* Namensfrage am Ausweis */
.dm-ask{margin-top:2.4rem}
.dm-ask .dm{margin-top:0}
.name-form{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:.9rem 0 0 calc(38px + .75rem)}
.name-form input{font:inherit;font-size:1rem;padding:.55rem .95rem;border-radius:999px;border:1.5px solid rgba(29,43,54,.18);background:var(--paper);color:var(--ink);width:11.5rem}
.name-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(63,111,143,.15)}
.name-form .chip{min-width:0;padding:.5rem .85rem}
.name-form .go{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.name-form .go:hover{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.name-ideas{display:flex;gap:.35rem}
.dm-ask.named .name-form{display:none}
html:not(.js) .name-form{display:none}
#badgeName.flash{animation:nameflash 1.4s var(--ease)}
@keyframes nameflash{0%{color:var(--blue);transform:translateX(0)}30%{color:var(--blue);transform:translateX(4px)}100%{color:var(--ink);transform:none}}

/* ---------- Szenen ---------- */
.scene{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:18vh 0;background:var(--bg,transparent);isolation:isolate;overflow:clip}
.inner{width:100%;padding-inline:calc(var(--gutter) + var(--rail)) var(--gutter)}
.bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.bg img{width:100%;height:100%;object-fit:cover}
/* Fließende Übergänge: Bildszenen laufen oben und unten weich in die Seitenfarbe aus, nirgends eine harte Kante. */
/* Bildszenen blenden oben und unten in weichen Stufen ein und aus, nie mit sichtbarer Kante. */
/* Beim Aufräumen liegt die Maske direkt auf Bild und Video. Chrome blendet das Video trotzdem nicht immer aus:
   deshalb deckt .unravel .shade unten deckend ab (siehe dort). */
.s-morning .bg,.s-closing .bg,.night .bg,.scan-frame,.scan-shade,.unravel .frame img,.unravel .frame video{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.04) 4%,rgba(0,0,0,.14) 9%,rgba(0,0,0,.32) 14%,rgba(0,0,0,.55) 19%,rgba(0,0,0,.76) 24%,rgba(0,0,0,.91) 29%,#000 35%,#000 66%,rgba(0,0,0,.91) 71%,rgba(0,0,0,.76) 76%,rgba(0,0,0,.55) 81%,rgba(0,0,0,.32) 86%,rgba(0,0,0,.14) 91%,rgba(0,0,0,.04) 96%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.04) 4%,rgba(0,0,0,.14) 9%,rgba(0,0,0,.32) 14%,rgba(0,0,0,.55) 19%,rgba(0,0,0,.76) 24%,rgba(0,0,0,.91) 29%,#000 35%,#000 66%,rgba(0,0,0,.91) 71%,rgba(0,0,0,.76) 76%,rgba(0,0,0,.55) 81%,rgba(0,0,0,.32) 86%,rgba(0,0,0,.14) 91%,rgba(0,0,0,.04) 96%,transparent 100%)}
.s-hero .bg{-webkit-mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.9) 63%,rgba(0,0,0,.72) 70%,rgba(0,0,0,.5) 77%,rgba(0,0,0,.29) 84%,rgba(0,0,0,.12) 91%,rgba(0,0,0,.03) 96%,transparent 100%);mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.9) 63%,rgba(0,0,0,.72) 70%,rgba(0,0,0,.5) 77%,rgba(0,0,0,.29) 84%,rgba(0,0,0,.12) 91%,rgba(0,0,0,.03) 96%,transparent 100%)}
.mega{font-family:var(--serif);font-size:var(--mega);letter-spacing:-.015em;line-height:.95}
.big{font-family:var(--serif);font-size:var(--big);letter-spacing:-.01em;line-height:1.02}
.say{font-size:var(--say);line-height:1.45;max-width:22em;color:var(--ink-2);margin-top:2rem}
.say strong{color:var(--ink);font-weight:600}
.say.soft{font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);color:var(--ink-3);margin-top:1.2rem}
.tag,.kicker{display:block;font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:1.6rem}
.fine{font-size:.92rem;line-height:1.55;color:var(--ink-3);max-width:40em;margin-top:1.2rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.6rem}

/* Dunkle Szenen: Abend und Nacht, wie in v10. Sie tragen ihren eigenen Hintergrund, der oben und unten weich in die helle Seite ausläuft. */
.scene.dark{color:var(--on-dark)}
.s-voices{--dk:#1c2a35}.s-scan{--dk:#16222b}.s-unravel{--dk:#1c2a35}.s-night{--dk:#141f28}
/* Ein Pixel Überlappung an Hell-Dunkel-Grenzen, damit beim Runden keine helle Linie durchscheint. */
.scene.seam{margin-top:-1px}
/* Helle Szenen neben dunklen laufen weich ins Dunkel (die Farben setzt core.js). */
.scene.fade-top::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--fade-h,34vh);z-index:-2;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--prev) 100%,transparent) 0%,color-mix(in srgb,var(--prev) 96%,transparent) 10%,color-mix(in srgb,var(--prev) 86%,transparent) 20%,color-mix(in srgb,var(--prev) 72%,transparent) 30%,color-mix(in srgb,var(--prev) 56%,transparent) 40%,color-mix(in srgb,var(--prev) 41%,transparent) 50%,color-mix(in srgb,var(--prev) 28%,transparent) 60%,color-mix(in srgb,var(--prev) 17%,transparent) 70%,color-mix(in srgb,var(--prev) 8%,transparent) 80%,color-mix(in srgb,var(--prev) 3%,transparent) 90%,color-mix(in srgb,var(--prev) 0%,transparent) 100%)}
/* Nach dunklen Szenen: langsam ins Helle auftauchen. Das Dunkel läuft über fast eine Bildschirmhöhe
   in weichen Stufen aus, das Bild blendet erst spät ein, oben gibt es mehr Raum zum Eintauchen. */
.scene.after-dark{padding-top:62vh}
.scene.after-dark::before{height:100vh;background:linear-gradient(180deg,
  var(--prev) 0%,
  color-mix(in srgb,var(--prev) 94%,transparent) 12%,
  color-mix(in srgb,var(--prev) 82%,transparent) 24%,
  color-mix(in srgb,var(--prev) 64%,transparent) 37%,
  color-mix(in srgb,var(--prev) 44%,transparent) 50%,
  color-mix(in srgb,var(--prev) 26%,transparent) 63%,
  color-mix(in srgb,var(--prev) 12%,transparent) 76%,
  color-mix(in srgb,var(--prev) 4%,transparent) 89%,
  transparent 100%)}
.scene.after-dark .bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 34%,rgba(0,0,0,.18) 44%,rgba(0,0,0,.5) 54%,rgba(0,0,0,.82) 64%,#000 74%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,transparent 34%,rgba(0,0,0,.18) 44%,rgba(0,0,0,.5) 54%,rgba(0,0,0,.82) 64%,#000 74%,#000 88%,transparent 100%)}
@media (max-width:760px){.scene.after-dark{padding-top:44vh}.scene.after-dark::before{height:80vh}}
/* Zeit-Check → Röntgenblick: mehr Luft unter der Liste, der Übergang ins Dunkle beginnt erst unter Liste und Karte */
.s-check.dark{padding-bottom:7vh}   /* die Frage „Und wo genau bleibt die Zeit?“ folgt direkt */
.s-check.before-dark{padding-bottom:38vh}.s-check.before-dark::after{height:54vh}
@media (max-width:760px){.s-check.before-dark{padding-bottom:26vh}.s-check.before-dark::after{height:42vh}}
.scene.before-dark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44vh;z-index:-2;pointer-events:none;background:linear-gradient(0deg,color-mix(in srgb,var(--dk-next) 100%,transparent) 0%,color-mix(in srgb,var(--dk-next) 96%,transparent) 10%,color-mix(in srgb,var(--dk-next) 86%,transparent) 20%,color-mix(in srgb,var(--dk-next) 72%,transparent) 30%,color-mix(in srgb,var(--dk-next) 56%,transparent) 40%,color-mix(in srgb,var(--dk-next) 41%,transparent) 50%,color-mix(in srgb,var(--dk-next) 28%,transparent) 60%,color-mix(in srgb,var(--dk-next) 17%,transparent) 70%,color-mix(in srgb,var(--dk-next) 8%,transparent) 80%,color-mix(in srgb,var(--dk-next) 3%,transparent) 90%,color-mix(in srgb,var(--dk-next) 0%,transparent) 100%)}
.dark em{color:var(--sky-2)}
.dark .tag{color:var(--sky-2)}
.dark .say{color:var(--on-dark-2)}
.dark .say strong{color:var(--on-dark)}
.dark .fine{color:rgba(247,245,242,.6)}

.btn{display:inline-flex;align-items:center;gap:.7rem;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:1rem 1.6rem;font:inherit;font-weight:600;font-size:1.02rem;cursor:pointer;text-decoration:none;transition:background-color .3s,border-color .3s,color .3s,transform .3s var(--ease)}
.btn::after{content:"";width:.42rem;height:.42rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.btn:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost::after{display:none}
.btn.ghost:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* Einblendungen: langsam und weich */
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln>span{display:inline-block}
.motion .rise .ln>span{transform:translateY(105%);transition:transform .9s var(--ease)}
.motion .rise.in .ln>span{transform:none}
.motion .rise.in .ln:nth-child(2)>span{transition-delay:.08s}.motion .rise.in .ln:nth-child(3)>span{transition-delay:.16s}
.motion .fade{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.motion .fade.in{opacity:1;transform:none}
.motion .fade[data-d="1"]{transition-delay:.1s}.motion .fade[data-d="2"]{transition-delay:.2s}.motion .fade[data-d="3"]{transition-delay:.3s}

/* ---------- 18:47 Start ---------- */
/* Der Film zum Anfang: Ein Arm klappt den Laptop auf, die anderen tippen, auf dem Bildschirm fliegt alles zusammen.
   Er füllt den ganzen Hintergrund, der Laptop steht rechts, links bleibt Ruhe für die Überschrift. Das erste Bild ist
   zugleich das Standbild, darum springt beim Öffnen nichts. */
.s-hero .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;background:#e4ebf1}
/* Das Bild steht still: Es hat immer genau Bildschirmhöhe, damit es sich beim Öffnen nicht verschiebt, wenn Schrift
   oder Inhalt der Szene nachladen und die Szene dadurch ein paar Pixel höher wird. */
@media (min-width:761px){.s-hero .bg{bottom:auto;height:100vh;height:100svh}}
/* Farben wie der Übergang von 15:30 zu 17:00: oben zartes Hellblau, nach unten warmes Weiß */
.s-hero{background:linear-gradient(180deg,var(--bg) 0%,#e4edf5 24%,#eff1f2 44%,#f4f3f1 62%)}
.s-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(214,234,250,.2),rgba(214,234,250,.2)),linear-gradient(0deg,#f4f3f1 0%,rgba(244,243,241,.7) 10%,rgba(244,243,241,.32) 22%,rgba(244,243,241,0) 34%),linear-gradient(180deg,rgba(220,235,247,.6) 0%,rgba(220,235,247,.22) 10%,rgba(220,235,247,0) 20%)}
.s-hero .mega{font-size:clamp(3rem,1rem + 5.1vw,7rem)}
@media (min-width:761px) and (max-width:1320px){
  .s-hero .say{max-width:18em}
}
.s-hero .say{max-width:23em}
.s-hero .hero-erik{margin-top:2.2rem;max-width:42rem}

@media (min-width:761px){.s-hero{align-items:flex-start;padding-top:15vh}}   /* die erste Zeile sitzt höher, gleich unter der Uhr */
/* Der Text unter der Überschrift kleiner und mit Abstand, damit das Bild atmet */
.s-hero .mega+.say{margin-top:2.2rem;max-width:20.5em;font-size:clamp(1rem,.92rem + .38vw,1.22rem);line-height:1.6}
.s-hero .actions{margin-top:2.8rem}
/* Erik steht tiefer: im ersten Bild schaut nur seine obere Zeile hervor, der Rest kommt beim Scrollen */
@media (min-width:761px){.s-hero .hero-erik{margin-top:10.6rem}}   /* breit genug für zwei Zeilen, damit die Blase im ersten Bild bleibt */
.s-hero .cue{position:absolute;left:calc(var(--gutter) + var(--rail));bottom:5vh;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:.8rem}
.s-hero .cue i{width:1px;height:40px;background:linear-gradient(var(--blue),transparent)}   /* ruhig, ohne Bewegung */
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* Ton gibt es nur auf Wunsch: Browser spielen Filme beim Öffnen nur stumm ab. Der Knopf startet ihn mit Ton von vorn,
   am Ende läuft der Ton langsam aus. */
.hero-sound{position:absolute;right:var(--gutter);top:calc(15vh - 12px);z-index:2;display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem .6rem .8rem;border:1px solid rgba(29,43,54,.16);border-radius:999px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink-2);font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .3s,border-color .3s}
.hero-sound:hover{background:rgba(255,255,255,.85);border-color:rgba(29,43,54,.3)}
.hero-sound:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.hero-sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-sound svg path:first-child{fill:currentColor;stroke:none}
/* Ab 761 px steht der Knopf (191 px, knapp 12 rem breit) oben rechts auf Höhe des Kickers. Damit er ihn nicht
   verdeckt, endet der Kicker 12,5 rem vor dem rechten Rand, also mindestens 8 px vor dem Knopf. Wo es dafür zu eng
   ist (761 bis etwa 1220 px), bricht er in zwei Zeilen um, und zwar nur zwischen den beiden Teilen (.kicker-teil):
   „… rund um die Uhr ·“ / „auf einem sicheren deutschen Server“. Breiter bleibt er einzeilig wie bisher, auf dem
   Handy bricht er frei um. */
@media (min-width:761px){
  .s-hero .kicker{max-width:calc(100% - 12.5rem)}
  .s-hero .kicker-teil{white-space:nowrap}
}
/* Kurze Fenster und Handys im Querformat (ab 761 px Breite, unter etwa 720 bis 750 px Höhe): Dort reichen 15vh nicht
   bis unter den festen Kopf, Kopf und Satz unter der Uhr lägen über Kicker und „Mit Ton ansehen“. Dann rücken beide so
   weit nach unten, dass nichts verdeckt ist: der Knopf mindestens 8 px, der Kicker 20 px unter dem Kopf. In höheren
   Fenstern bleibt es bei 15vh wie bisher. --kopf-h ist die Höhe des Kopfs nach den Regeln oben und unten: ab 901 px
   2 × 1rem Innenabstand plus Uhr (Ziffern, .4rem, Satz 20 px), bis 900 px .5rem + 44 px Zeile + 34 px für den Satz. */
@media (min-width:761px){
  .s-hero{--kopf-h:calc(2.4rem + 20px + clamp(1.6rem,1.2rem + .9vw,2.3rem));padding-top:max(15vh,calc(var(--kopf-h) + 20px))}
  .hero-sound{top:max(calc(15vh - 12px),calc(var(--kopf-h) + 8px))}
}
@media (min-width:761px) and (max-width:900px){.s-hero{--kopf-h:calc(.5rem + 78px)}}

/* ---------- 21:30 Durcheinander ---------- */
.s-chaos{justify-content:center;text-align:center}
.s-chaos .inner{padding-inline:var(--gutter)}
.pings{position:absolute;inset:0 0 0 var(--rail);pointer-events:none}
.ping{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;background:var(--paper);border-radius:16px;padding:.8rem 1.05rem .85rem;box-shadow:0 22px 50px -26px rgba(29,43,54,.45);max-width:19rem;rotate:var(--r,0deg)}
.ping b{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep);display:flex;align-items:center;gap:.45rem}
.ping b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.ping span{font-size:clamp(.92rem,.8rem + .3vw,1.06rem);font-weight:500;line-height:1.35}
.s-chaos .big{position:relative;max-width:11em;margin-inline:auto;text-shadow:0 0 40px rgba(28,42,53,.6),0 0 80px rgba(28,42,53,.45)}
/* Abendmodus 21:30: Draußen ist Feierabend, drinnen ist der Laptop noch an. Vom warmen Grau des Anfangs geht es
   weich ins Nachtblau der Seite (nur ihre eigenen Töne), in der Mitte liegt ein sanfter Bildschirmschein, ein paar
   erste Sterne. Die Nachrichten leuchten darin wie Bildschirme. */
.s-chaos{background:linear-gradient(180deg,var(--bg) 0%,#3f4f5c 22%,#2f3e4a 48%,#24323e 70%,#1c2a35 88%,#1c2a35 100%)}
.s-chaos .dusk{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 52% 40% at 50% 52%,rgba(191,225,247,.14) 0%,rgba(191,225,247,.05) 50%,transparent 75%)}
.s-chaos .dawn-stars{top:16%;opacity:.45;-webkit-mask-image:none;mask-image:none}   /* ohne Maske: sonst zeigt sich unten eine feine Kante */
.s-hero.before-dark .cue{color:var(--on-dark-2)}
.s-hero.before-dark::after{height:30vh}   /* die Dämmerung setzt erst ganz unten ein, der Anfang bleibt hell */
.s-chaos .chaos-sub{margin:1.3rem auto 0;max-width:22em;font-size:var(--say);color:var(--on-dark);text-shadow:0 0 24px rgba(28,42,53,.7)}
.s-chaos .chaos-pre{margin:0 auto 1.2rem}   /* steht jetzt über der Überschrift: „Eigentlich … aber …“ */
.s-chaos .ping{color:var(--ink);box-shadow:0 24px 60px -24px rgba(0,0,0,.6),0 0 42px -8px rgba(191,225,247,.34)}
/* ---------- 22:14 Stimmen ---------- */
.voice-stage{position:relative;min-height:60vh;display:grid;align-items:center}
.quote{margin:0 0 14vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);column-gap:clamp(28px,5vw,90px);align-items:center}
.quote>p{grid-column:1;font-family:var(--serif);font-size:clamp(2.4rem,1rem + 4.4vw,6rem);line-height:1.04;letter-spacing:-.01em;max-width:14em}
.quote>span{grid-column:1;align-self:start;display:block;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-top:1.6rem}
.dark .quote>span{color:var(--sky-2)}
.pinned .quote{grid-area:1/1;margin:0}
.motion .pinned .quote+.quote{opacity:0}
/* Neben jedem Satz: was ein digitaler Mitarbeiter daraus macht (baut sich mit dem Scrollen auf, story.js voices) */
.quote>p{margin:0}
.qa{grid-column:2;grid-row:1/span 2;display:grid;gap:.7rem;padding:1.2rem 1.3rem 1rem;border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 34px 80px -40px rgba(0,0,0,.7);font-size:.92rem;line-height:1.35;overflow:hidden}
.qa p{margin:0}
.qa-head{display:flex;align-items:center;gap:.5rem;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)}
.qa-face{flex:none;width:22px;height:22px;background:url(../brand/emblem-oktopus-128.webp?v=e51106d3) center/contain no-repeat}
.qa-title{font-family:var(--serif);font-size:1.45rem;line-height:1.1}
.qa-title b{font-weight:400;color:var(--blue)}
.qa-foot{font-size:.68rem;color:var(--ink-3);padding-top:.5rem;border-top:1px solid var(--line)}
.qa-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.qa-list li{position:relative;display:flex;align-items:center;gap:.6rem}
.qa-list li::before{content:"";flex:none;width:1.1rem;height:1.1rem;border-radius:50%;transform:scale(calc(.4 + .6 * var(--tick,1)));opacity:calc(.3 + .7 * var(--tick,1));background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fdfbf7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.qa-list .qa-wait{font-weight:600}
.qa-list .qa-wait::before{background:var(--sky-pale);box-shadow:inset 0 0 0 1.5px var(--blue)}
.qa-flow .qa-list li+li::after{content:"";position:absolute;left:.52rem;top:-.55rem;width:1.5px;height:.55rem;background:var(--sky-2)}
.qa-chips{position:relative;display:flex;flex-wrap:wrap;gap:.35rem}
.qa-chips i{font-style:normal;font-size:.72rem;font-weight:600;padding:.28rem .6rem;border-radius:999px;background:var(--sky-pale);color:var(--blue-deep)}
.qa-ask{align-self:start;justify-self:end;max-width:92%;padding:.5rem .75rem;border-radius:14px 14px 4px 14px;background:var(--ink);color:var(--paper);font-size:.86rem}
.qa-ask span{display:inline-block;clip-path:inset(0 calc((1 - var(--type,1)) * 100%) 0 0)}
.qa-answer{max-width:92%;padding:.55rem .75rem;border-radius:14px 14px 14px 4px;background:#eef1f3;font-size:.86rem}
.qa-answer small{display:block;margin-top:.3rem;font-size:.7rem;font-weight:600;color:var(--blue)}
/* Mit Bewegung steuert story.js voices() die Karte über das Scrollen: --tick (Haken) und --type (Frage tippt sich). */
@media (max-width:760px){.quote{grid-template-columns:1fr}.qa{grid-column:1;grid-row:auto;margin-top:2rem;max-width:380px}}

/* ---------- 00:30 Nachts in deinen Programmen: vom Schreibtisch in die digitale Tiefe ----------
   Feines Lichtraster blendet von oben ein, gläserne Blasen mit den Programmen steigen langsam auf (kleine = weiter weg)
   und bekommen auf halber Höhe ihren leuchtenden Haken: erledigt (story.js toolsSea). */
.s-tools{text-align:center;overflow:clip;background:linear-gradient(180deg,#1c2a35 0%,var(--bg) 38%,var(--bg) 68%,#141f28 100%)}   /* oben im Blau des Schreibtischs, dann tiefer, unten im Blau der Nachtschicht */
.s-tools .inner{position:relative;display:grid;justify-items:center;padding-inline:calc(var(--gutter) + var(--rail))}   /* beidseitig gleich: Mitte = Uhr */
.s-tools .inner::before{content:"";position:absolute;left:50%;top:50%;width:min(1400px,100vw);height:150%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,color-mix(in srgb,var(--bg) 90%,transparent) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 55%,color-mix(in srgb,var(--bg) 40%,transparent) 80%,transparent 100%)}
.s-tools .ln>span{text-wrap:balance}
.s-tools .big{max-width:15em;text-shadow:0 0 34px var(--bg),0 0 70px var(--bg)}
.s-tools .say{max-width:27em;margin-inline:auto;text-shadow:0 0 20px var(--bg)}
/* Blasen tauchen unten sanft auf und oben sanft ab (keine harte Kante am Rand des Abschnitts) */
.tools-sea{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 62%,rgba(34,66,92,.5) 0%,rgba(34,66,92,0) 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 9%,#000 24%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 9%,#000 24%,#000 84%,transparent 100%)}
.tools-sea::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(159,216,239,.16) 1px,transparent 1.6px) 0 0/30px 30px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 30%,#000 55%,rgba(0,0,0,.5) 85%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 30%,#000 55%,rgba(0,0,0,.5) 85%,transparent 100%)}
.tb{--S:calc(var(--s) * var(--k,1));position:absolute;left:var(--x);bottom:calc(var(--S) * -1.2);width:var(--S);height:var(--S);margin-left:calc(var(--S) / -2);border-radius:50%;display:grid;place-content:center;justify-items:center;gap:7%;
  opacity:var(--o,1);filter:blur(var(--bl,0));
  border:1px solid rgba(159,216,239,.24);
  box-shadow:0 0 34px -10px rgba(159,216,239,.35),inset 0 0 20px rgba(159,216,239,.08);
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.26) 0 7%,rgba(255,255,255,.08) 28%,rgba(159,216,239,.05) 68%,rgba(255,255,255,.02) 100%)}
.tb i{width:calc(var(--S) * .34);height:calc(var(--S) * .34);border-radius:28%;display:grid;place-items:center;background:var(--c);color:var(--on,#fff);font-style:normal;font-weight:700;font-size:calc(var(--S) * .15);opacity:.92;box-shadow:0 4px 14px -6px rgba(0,0,0,.6)}
.tb i img{width:62%;height:62%;object-fit:contain}
.tb b{font-size:calc(var(--S) * .13);font-weight:500;line-height:1.05;color:var(--on-dark-2);max-width:88%;text-align:center}
/* Haken: erledigt */
.tb::after{content:"";position:absolute;right:2%;top:2%;width:26%;height:26%;border-radius:50%;
  background:var(--sky-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23142029' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/64% no-repeat;
  box-shadow:0 0 14px rgba(159,216,239,.7)}
.motion .tb{opacity:0;animation:tb-rise var(--t) linear var(--d) infinite,bubble-sway calc(var(--t) / 3) ease-in-out var(--d) infinite alternate}
.motion .tb::after{opacity:0;transform:scale(.3);animation:tb-done var(--t) var(--ease) var(--d) infinite}
.motion .s-tools:not(.live) .tb,.motion .s-tools:not(.live) .tb::after{animation-play-state:paused}
@keyframes tb-rise{0%{transform:translateY(0);opacity:0}6%{opacity:var(--o,1)}86%{opacity:var(--o,1)}100%{transform:translateY(calc(-100vh - var(--S) * 2.6));opacity:0}}
@keyframes tb-done{0%,44%{opacity:0;transform:scale(.3)}49%,100%{opacity:1;transform:none}}
.no-motion .tb{bottom:auto;top:var(--y)}
/* Darunter: „+ und noch viele mehr“ als eigene Blase, die sanft schwebt */
.tools-more{margin:1.8rem 0 0;display:grid;justify-items:center;gap:.55rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-2)}
.tools-more-bubble{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:2.2rem;font-weight:200;line-height:1;color:var(--on-dark);
  border:1px solid rgba(159,216,239,.3);box-shadow:0 0 34px -8px rgba(159,216,239,.4),inset 0 0 20px rgba(159,216,239,.1);
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.26) 0 7%,rgba(255,255,255,.08) 28%,rgba(159,216,239,.05) 68%,rgba(255,255,255,.02) 100%)}
.motion .tools-more-bubble{animation:hover-geist 4.5s ease-in-out infinite}
@media (max-width:760px){.tools-sea{--k:.7}.tb:nth-child(n+15){display:none}}

/* ---------- 22:15 Diagnose ---------- */
/* Mittig gesetzte Abschnitte: Innenabstand beidseitig gleich (links sonst Platz für die Leiste), damit die Mitte genau unter der Uhr liegt */
/* Mittig ausgerichtete Abschnitte: beidseitig gleicher Rand, damit die Mitte genau unter der Uhr liegt */
.s-hands .inner,.s-recall .inner,.s-gift .gift-main .inner{padding-inline:calc(var(--gutter) + var(--rail))}

/* ---------- 22:30 Der neue Kollege ---------- */
.s-meet .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:center}
.badge{background:var(--paper);border-radius:26px;box-shadow:var(--card-shadow),0 1px 0 rgba(255,255,255,.8) inset;overflow:hidden;max-width:540px;width:100%;justify-self:center;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.badge-top{display:flex;justify-content:space-between;padding:1rem 1.5rem;background:linear-gradient(115deg,var(--sky) 0%,var(--sky-2) 100%);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.badge-body{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:1.6rem 1.5rem 1.5rem}
.badge-rows{margin:0;display:grid;gap:.7rem}
.badge-rows div{display:grid;gap:.1rem;padding-bottom:.7rem;border-bottom:1px dashed var(--line)}
.badge-rows div:last-child{border-bottom:0}
.badge-rows dt{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
.badge-rows dd{margin:0;font-size:1.02rem;font-weight:500;line-height:1.35}
.badge-rows .no dd{color:var(--ink)}
.badge-rows .no dt{color:#8a4b3c}
.motion .badge-rows div{opacity:0;transform:translateX(-12px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.motion .badge.in .badge-rows div{opacity:1;transform:none}

/* ---------- 23:00 Zeit-Check ---------- */
/* Der Oktopus als ganz seichtes Wasserzeichen rechts im Zeit-Check, ohne Scheibe und Ring.
   Graustufen-Maske (weiß = Tinte), eingefärbt in Tintenblau. Ohne Masken-Unterstützung bleibt es weg.
   Die Maske lädt erst, wenn der Zeit-Check näher kommt (core.js setzt .near), ohne JS gleich. */
.check-mark{display:none}
@supports (mask-mode:luminance){
  .check-mark{position:absolute;z-index:-1;pointer-events:none;right:-2vw;top:5vh;width:min(52vw,860px);aspect-ratio:820/730;background:#24407a;opacity:.035}
  html:not(.js) .check-mark,.check-mark.near{display:block;mask:url(../brand/emblem-oktopus-wasserzeichen-maske.jpg?v=610dd1bd) center/contain no-repeat luminance}
}
@media (max-width:760px){.check-mark{right:-30vw;top:2vh;width:96vw;opacity:.028}}
.check-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);margin-top:3rem;align-items:start}
.check-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.ci{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding:.35rem 0;transition:background-color .4s}
.ci-toggle{display:flex;align-items:center;gap:.9rem;flex:1;min-width:0;background:none;border:0;padding:.85rem 0;font:inherit;font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);font-weight:500;color:var(--ink);text-align:left;cursor:pointer}
.ci-box{flex:none;width:1.35em;height:1.35em;border-radius:50%;border:1.5px solid rgba(29,43,54,.32);transition:background-color .35s,border-color .35s,transform .35s var(--ease)}
.ci.on .ci-box{background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fdfbf7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;border-color:var(--blue);transform:scale(1.08)}
.ci-hours{display:flex;gap:.35rem;flex:none}
.chip{min-width:3.1rem;padding:.45rem .6rem;border-radius:999px;border:1.5px solid var(--line);background:transparent;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-3);cursor:pointer;font-variant-numeric:tabular-nums;transition:background-color .3s,color .3s,border-color .3s}
.ci-hours .chip{min-height:44px}   /* nur die Stunden im Zeit-Check (Tap-Fläche wie auf /zeitcheck/), die Namensknöpfe um 22:30 bleiben wie gehabt */
.chip:hover{border-color:var(--blue);color:var(--ink)}
.chip[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.check-result{position:sticky;top:14vh;background:var(--paper);border-radius:28px;padding:clamp(1.4rem,2.6vw,2.2rem);box-shadow:var(--card-shadow)}
.cr-label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.cr-hours{display:flex;align-items:flex-end;gap:1rem;margin-top:.8rem}
.cr-hours strong{font-family:var(--serif);font-weight:400;font-size:clamp(5rem,3rem + 5vw,8.5rem);line-height:.8;color:var(--blue);font-variant-numeric:tabular-nums}
.cr-hours span{font-size:1.05rem;font-weight:500;line-height:1.2;padding-bottom:.5rem}
.cr-days{font-size:1.1rem;line-height:1.45;color:var(--ink-2);margin-top:1rem;min-height:2.9em}
.cr-days b{color:var(--ink)}
.cr-does{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;margin:1.4rem 0 1.6rem;padding:1.1rem 1.2rem;border-radius:18px;background:var(--sky-pale);min-height:10.5rem}
.cr-does small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:.4rem}
.cr-does p{font-size:1.02rem;line-height:1.45}
.cr-does.swap p{animation:swap .7s var(--ease)}
html:not(.js) .check-result{display:none}
.cr-mini{display:none}
/* Der Zeit-Check auch als eigene Seite (zeitcheck/): ein leiser Link unter dem Ergebnis, Tap-Fläche 44 px */
.cr-seite{margin-top:.6rem;font-size:.92rem}
.cr-seite a{display:inline-block;min-height:44px;padding:calc((44px - 1.45em) / 2) 0;line-height:1.45;color:var(--blue-deep);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;transition:color .25s}
.cr-seite-ende{white-space:nowrap}   /* der Pfeil bleibt beim letzten Wort, auch wenn der Link umbricht */
.cr-seite-ende::after{content:"";display:inline-block;width:.38rem;height:.38rem;margin-left:.55rem;vertical-align:.1em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.cr-seite a:hover{color:var(--blue)}

/* ---------- 23:40 Hinschauen ---------- */
.s-scan{padding:0;display:block}
.scan{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden}
.scan-frame{position:absolute;left:50%;top:50%;width:max(100vw,calc(100svh * 1.5));height:max(100svh,calc(100vw / 1.5));transform:translate(-50%,-50%)}
.scan-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,34,43,.7) 0%,rgba(22,34,43,.35) 30%,rgba(22,34,43,0) 55%)}
/* Über dem Bild liegt nur noch die Sprechblase (unten links); Überschrift und Text stehen darüber in .scan-answer. */
.scan-copy{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:flex-end;padding-bottom:9vh;width:100%}
.unravel-copy .big{max-width:11em}
.scan-answer em{color:var(--xray)}
.scan-xray{clip-path:inset(0 0 100% 0)}
.beam{position:absolute;left:0;right:0;top:0;height:2px;background:var(--xray);box-shadow:0 0 14px 3px var(--xray),0 0 60px 12px rgba(159,216,239,.3);opacity:0}
.xtag{position:absolute;transform:translate(-50%,-50%) scale(.9);opacity:0;transition:opacity .6s,transform .7s var(--ease);font-weight:600;font-size:clamp(.78rem,.65rem + .35vw,1.02rem);color:var(--ink);background:var(--xray);padding:.4rem .8rem;border-radius:999px;white-space:nowrap;box-shadow:0 0 30px rgba(159,216,239,.5)}
.xtag.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Brücke vom Zeit-Check: erst die Frage im Dunkel, dann taucht der Schreibtisch auf. */
.scan-lead{padding-block:2vh 9vh;text-align:center;padding-inline:calc(var(--gutter) + var(--rail))}   /* mittig, an der Uhr oben ausgerichtet */
/* Die Frage in der Textschrift, damit nicht zwei gleiche Überschriften direkt hintereinander stehen; die Antwort
   „Wir schauen durch deinen Tag.“ bleibt die große Überschrift in der Serifenschrift. */
/* Der Übergang direkt unter dem Zeit-Check: die Frage in der Serifenschrift, darunter eine Brücke zu „Wir schauen durch deinen Tag.“ */
#h-scan-lead{margin:0 auto;max-width:16em;font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,1.2rem + 2.6vw,3.9rem);line-height:1.05;letter-spacing:-.01em;color:var(--on-dark);text-wrap:balance}
#h-scan-lead em{color:var(--sky-2)}
.scan-bridge{margin:1.3rem auto 0;max-width:30em;font-size:clamp(1rem,.92rem + .38vw,1.22rem);line-height:1.6;color:var(--on-dark-2);text-wrap:balance}
.scan-lead .say{margin:0 auto 1.4rem}
/* Die Antwort auf die Frage steht über dem Bild, eine Spur kleiner als die Frage */
.scan-answer{margin-top:clamp(3rem,8vh,5.5rem)}
.scan-answer .big{font-size:calc(var(--big) * .82)}
.scan-lead .scan-answer .say{margin:1.1rem auto 0;max-width:24em;text-wrap:balance;font-family:var(--serif);font-size:clamp(1.3rem,.9rem + 1vw,1.95rem);line-height:1.22;color:var(--on-dark-2)}   /* Erzählzeile in der Serifenschrift wie 22:17 und 15:30 */
.scan-lead .say b{color:var(--on-dark);font-weight:600}
/* Das Bild ist größer als der Bildschirm, damit es ihn füllt; dabei wird seine Maske oben abgeschnitten.
   Der Schleier liegt deshalb am sichtbaren oberen Rand und hebt sich, sobald der Scan beginnt (story.js). */
/* Direkt unter der Frage taucht der Schreibtisch auf: oben kürzer einblenden als die anderen Bildszenen. */
.s-scan .scan-frame{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 5%,rgba(0,0,0,.75) 11%,#000 18%,#000 66%,rgba(0,0,0,.76) 76%,rgba(0,0,0,.32) 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 5%,rgba(0,0,0,.75) 11%,#000 18%,#000 66%,rgba(0,0,0,.76) 76%,rgba(0,0,0,.32) 86%,transparent 100%)}
.scan-veil{position:absolute;left:0;right:0;top:calc(50% - 50vh);top:calc(50% - 50svh);height:30vh;height:30svh;pointer-events:none;background:linear-gradient(180deg,var(--dk) 0%,color-mix(in srgb,var(--dk) 94%,transparent) 12%,color-mix(in srgb,var(--dk) 80%,transparent) 24%,color-mix(in srgb,var(--dk) 60%,transparent) 36%,color-mix(in srgb,var(--dk) 40%,transparent) 48%,color-mix(in srgb,var(--dk) 23%,transparent) 60%,color-mix(in srgb,var(--dk) 10%,transparent) 72%,color-mix(in srgb,var(--dk) 3%,transparent) 86%,transparent 100%)}

/* ---------- 23:59 Aufräumen (Video wird mit dem Scrollen gespult) ---------- */
.s-unravel{padding:0;display:block}
.unravel{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden}
.unravel .frame{position:absolute;left:50%;top:50%;width:max(100vw,calc(100svh * 1.7778));height:max(100svh,calc(100vw / 1.7778));transform:translate(-50%,-50%)}
.unravel .frame img,.unravel .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.unravel video{opacity:0;transition:opacity .6s}
.unravel video.is-ready{opacity:1}
.unravel .shade{position:absolute;inset:0;background:linear-gradient(0deg,#1c2a35 0%,rgba(28,42,53,.94) 7%,rgba(28,42,53,.7) 18%,rgba(28,42,53,.3) 40%,rgba(28,42,53,0) 60%),linear-gradient(180deg,#1c2a35 0%,rgba(28,42,53,.92) 6%,rgba(28,42,53,.6) 22%,rgba(28,42,53,0) 42%)}
.unravel-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16vh 0 9vh}
/* Die drei Takte als kleiner Chat: Etwas kommt rein, der digitale Mitarbeiter antwortet, du entscheidest (rechts, wie eigene Nachrichten). */
.beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,16px);max-width:min(100%,30rem)}
.beats li{font-family:var(--sans);font-size:clamp(1rem,.95rem + .3vw,1.18rem);font-weight:500;line-height:1.4;display:flex;align-items:flex-end;gap:.75rem}   /* Schrift und Größe wie alle Blasen */
.beats .dm-avatar{width:52px;height:52px}   /* hier spricht Erik: Er hat alles eingerichtet und wartet auf dein Go */
.beats .chat-bubble{padding:.8rem 1.15rem;border-radius:20px 20px 20px 6px}
.beats .chat-note{font-size:.88em;padding:.5rem .95rem .55rem}
.beats .dm-more .dm-avatar{visibility:hidden}   /* zweite Blase von Erik, ohne zweites Bild */
.chat-bubble{display:block;padding:.3em .62em .38em;border-radius:.62em .62em .62em .18em;background:var(--paper);color:var(--ink);box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
.beats li.du{justify-content:flex-end}
.beats li.du .chat-bubble{background:var(--sky-2);border-radius:20px 20px 6px 20px}
.chat-note{display:inline-flex;align-items:center;gap:.4em;font-size:.78em;padding:.28em .66em .32em;border-radius:999px;color:var(--on-dark);background:rgba(247,245,242,.1);border:1px solid rgba(247,245,242,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chat-note .bell{width:.72em;height:.72em;flex:none;fill:none;stroke:var(--sky-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.motion .pinned .beats li{opacity:0;transform:translateY(24px)}

/* ---------- 02:13 Nachtschicht ---------- */
.s-night{padding:0;display:block}
.night-after{display:flex;justify-content:center;padding:6vh calc(var(--gutter) + var(--rail)) 12vh}   /* zweite Blase mittig im Übergang zum Morgen */
.night-after .dm{margin:0}
.night{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:14vh 0 8vh}
/* Nachtschicht: Hintergrundbild nur noch zart, damit Überschrift und Liste ruhig lesbar sind */
.night .bg img{filter:saturate(.55) blur(1.5px);opacity:.55}
.night .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,31,40,.94) 0%,rgba(20,31,40,.86) 42%,rgba(20,31,40,.8) 100%)}
.dark .log li{border-top-color:rgba(247,245,242,.14)}
.dark .log li:last-child{border-bottom-color:rgba(247,245,242,.14)}
.dark .log time{color:var(--sky-2)}
.dark .log b{background:rgba(247,245,242,.14);color:var(--on-dark)}
.dark .log li[data-s="done"] b{background:var(--sky-2);color:var(--ink)}
.dark .log li[data-s="ask"] b{background:var(--on-dark);color:var(--ink)}
.night .inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,90px);align-items:center}
/* Überschrift oben an der Liste: ohne Namen („dein digitaler Mitarbeiter“) wird sie länger und darf nicht unten herausragen */
.night .night-head{align-self:start;padding-top:1.4rem}
.log{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:4.2em minmax(0,1fr) auto;align-items:baseline;gap:1rem;padding:.95rem 0;border-top:1px solid var(--line);font-size:clamp(1rem,.9rem + .35vw,1.2rem)}
.log li:last-child{border-bottom:1px solid var(--line)}
/* Flache Fenster: acht Einträge passen ganz ins Bild */
@media (max-height:900px){.log li{padding:.6rem 0}}
.log time{font-family:var(--serif);font-size:1.35em;color:var(--blue);font-variant-numeric:tabular-nums}
.log b{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding:.3rem .6rem;border-radius:999px;background:var(--paper);color:var(--ink-2)}
.log li[data-s="done"] b{background:var(--blue);color:var(--paper)}
.log li[data-s="ask"] b{background:var(--ink);color:var(--paper)}
.motion .log li{opacity:.14;transition:opacity .8s var(--ease)}
.motion .log li.in{opacity:1}
.night .fine{grid-column:2}

/* ---------- 07:00 Guten Morgen ---------- */
/* Sonnenaufgang: Der Himmel läuft vom Nachtblau über die blaue Stunde ins Morgenhell. Darüber blüht beim Scrollen
   ein warmes Band auf, und die Sonne steigt über den Horizont (story.js). Ohne Bewegung ist sie schon aufgegangen.
   Ersetzt hier den allgemeinen Übergang nach dunklen Szenen (.after-dark::before). */
.s-morning.after-dark::before{display:none}
.dawn{position:absolute;left:0;right:0;top:0;height:130vh;z-index:-2;pointer-events:none;background:linear-gradient(180deg,var(--prev) 0%,#18253a 12%,#243452 24%,#3f5070 36%,#7d8fae 50%,#b9c9dc 64%,#dde7f0 80%,transparent 100%)}
/* Sterne im Nachthimmel über dem Sonnenaufgang: funkeln leise und verblassen, während die Sonne steigt (story.js). */
.dawn-stars{position:absolute;inset:0 0 auto;height:52vh;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.dawn-stars::before,.dawn-stars::after{content:"";position:absolute;left:0;top:0;border-radius:50%}
.dawn-stars::before{width:1.9px;height:1.9px;animation:twinkle 5s ease-in-out infinite;box-shadow:91.6vw 41.8vh rgba(255,255,255,.55),59vw 19.2vh rgba(255,255,255,.85),72.1vw 12.5vh rgba(255,255,255,.55),61.8vw 39.8vh rgba(255,255,255,.55),97.2vw 22.4vh rgba(255,240,222,.55),36.2vw 3.5vh rgba(214,232,255,.55),65.5vw 27.7vh rgba(214,232,255,.85),95.9vw 13.1vh rgba(255,255,255,.85),80.8vw 8.6vh rgba(255,240,222,1),67.2vw 8vh rgba(214,232,255,.7),67vw 23.4vh rgba(255,255,255,.55),10.7vw 2.7vh rgba(214,232,255,.85),81.4vw 15.2vh rgba(214,232,255,.85),54.1vw 39.5vh rgba(255,255,255,1),26.3vw 5.6vh rgba(255,240,222,.55),24.3vw 24.5vh rgba(255,240,222,.55),17.4vw 42.9vh rgba(255,240,222,.55),39.6vw 8vh rgba(255,255,255,.7),96.4vw 35.6vh rgba(255,240,222,.55),74.4vw 15.9vh rgba(255,240,222,1),19.9vw 4.3vh rgba(255,255,255,1),75vw 20.7vh rgba(255,255,255,.85),10vw 24.9vh rgba(255,255,255,.7),25.8vw 19.1vh rgba(255,240,222,.55),75.7vw 29.2vh rgba(255,255,255,1),88.7vw 30.6vh rgba(255,255,255,1),68.9vw 36.7vh rgba(214,232,255,.7),42.7vw 13.9vh rgba(214,232,255,.55),11.6vw 28.1vh rgba(255,240,222,.85),25.3vw 41.9vh rgba(214,232,255,.55),56.1vw 24.3vh rgba(255,240,222,.7),79.4vw 43.5vh rgba(255,255,255,.85),34.1vw 2vh rgba(255,240,222,.7),21vw 30.3vh rgba(255,240,222,.7),74.1vw 42.1vh rgba(214,232,255,1),48.1vw 30.6vh rgba(214,232,255,.7),27vw 43.7vh rgba(255,255,255,.7),85.6vw 22.4vh rgba(255,240,222,.55),60.3vw 13.5vh rgba(255,240,222,.85),35.2vw 14vh rgba(255,255,255,.85),39vw 19vh rgba(214,232,255,1),53.8vw 30.7vh rgba(255,255,255,1),88.5vw 43.5vh rgba(214,232,255,.7),11.8vw 20.9vh rgba(214,232,255,.55),56.5vw 20vh rgba(214,232,255,.55),77.7vw 5.8vh rgba(255,255,255,1)}
.dawn-stars::after{width:2.8px;height:2.8px;animation:twinkle 3.6s ease-in-out -1.8s infinite;box-shadow:40.9vw 3.8vh rgba(214,232,255,.7),56.4vw 22.8vh rgba(255,255,255,.55),73.4vw 14.9vh rgba(214,232,255,.85),97.6vw 22.9vh rgba(255,255,255,.7),96.7vw 32.9vh rgba(255,255,255,.7),14.3vw 24.9vh rgba(255,240,222,.85),88.9vw 11.3vh rgba(255,255,255,.55),60.1vw 21.7vh rgba(255,255,255,.85),14.1vw 4.2vh rgba(255,255,255,.7),95.8vw 35.7vh rgba(255,240,222,.7),66vw 19.6vh rgba(214,232,255,.7),45.7vw 24.1vh rgba(214,232,255,.7),38.3vw 28.1vh rgba(255,240,222,.55),39.7vw 26.3vh rgba(255,255,255,.7),32vw 15.8vh rgba(214,232,255,.55),73.1vw 17.5vh rgba(255,240,222,.7),36.9vw 34.4vh rgba(214,232,255,.55),44.7vw 7.1vh rgba(255,240,222,.85),95.8vw 19.8vh rgba(255,255,255,1),91vw 35.3vh rgba(255,255,255,1),45.7vw 1.1vh rgba(214,232,255,1),6.6vw 2.2vh rgba(214,232,255,1)}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.dawn-stars::before,.dawn-stars::after{animation:none}}
.dawn-warm{position:absolute;inset:0;background:linear-gradient(180deg,transparent 26%,rgba(111,96,134,.5) 38%,rgba(184,138,152,.72) 48%,rgba(228,170,150,.78) 57%,rgba(244,203,172,.66) 66%,rgba(248,224,200,.36) 78%,transparent 94%)}
.dawn-sun{position:absolute;left:70%;top:54vh;width:min(90vmin,760px);aspect-ratio:1;z-index:-1;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,250,238,.98) 0%,rgba(255,238,210,.9) 6%,rgba(253,216,178,.55) 17%,rgba(249,196,166,.24) 34%,rgba(249,196,166,0) 60%)}
.dawn-sun::after{content:"";position:absolute;left:50%;top:50%;width:260%;height:34%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,228,196,.5) 0%,rgba(255,228,196,.18) 40%,rgba(255,228,196,0) 70%)}
.s-morning .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(232,241,249,.86) 0%,rgba(232,241,249,.55) 32%,rgba(232,241,249,0) 54%),linear-gradient(0deg,rgba(232,241,249,.8) 0%,rgba(232,241,249,0) 26%)}
.report{margin-top:3rem;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:1.3rem 1.6rem 1.5rem;max-width:620px;box-shadow:var(--card-shadow)}
.report-h{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.report ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.report li{display:grid;gap:.3rem}
.report strong{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,2rem + 2.4vw,4.6rem);line-height:.9;color:var(--blue)}
.report li:nth-child(3) strong{color:var(--ink)}
.report span{font-size:.92rem;font-weight:500;line-height:1.3;color:var(--ink-2)}

/* ---------- 09:00 Zeit geschenkt ---------- */
/* Zwischen Morgenbild und Fenster erst der Atemzug (.breath), dann blendet das Fenster ein (.gift-main). */
.s-gift{display:block;padding:0}
/* Durchatmen: ein Atemzug zum Mitmachen. „Lehn dich zurück.“, dann mittig im Kreis nacheinander einatmen (Ring wächst),
   ausatmen (Ring zieht sich zusammen), aufatmen (Ring öffnet sich, „auf“ in Blau). Desktop: beim Scrollen mit Pin
   (story.js, .live). Ohne Pin (Handy): derselbe Atemzug als ruhige Schleife von 12 s. */
/* Kein Beschnitt: das Licht darf weich in den nächsten Abschnitt auslaufen (seitlich beschneidet .scene). */
.breath{--cw:min(36vmin,340px);-webkit-user-select:none;user-select:none;position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding-block:14vh}
.breath-stage{position:relative;display:grid;justify-items:center;gap:clamp(18px,3vh,32px);padding-inline:var(--gutter)}
.breath-pre{margin:0;display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
.breath-pre::before{content:"";width:1rem;height:1rem;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fdfbf7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.breath-swap{display:grid;justify-items:center;gap:clamp(12px,3vh,28px)}
.breath-lean{margin:0;font-family:var(--serif);font-size:var(--big);line-height:1;color:var(--ink-2);position:relative;z-index:1}
.breath-cues{position:relative;width:var(--cw);aspect-ratio:1;display:grid;place-items:center}
.cue{grid-area:1/1;position:relative;z-index:1;font-size:.8rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);opacity:0}
.cue-auf b{font-weight:600;color:var(--blue);display:inline-block}
.breath-orb{position:absolute;left:50%;top:50%;width:min(96vmin,980px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,251,242,.98) 0%,rgba(255,241,220,.78) 20%,rgba(246,240,236,.58) 36%,rgba(214,234,249,.4) 52%,rgba(207,231,248,.14) 64%,rgba(207,231,248,0) 72%)}
.breath-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;border:1.5px solid rgba(63,111,143,.32);box-shadow:0 0 0 10px rgba(207,231,248,.18),inset 0 0 40px rgba(255,255,255,.35);transform:scale(.45);opacity:0}
/* Schleife ohne Pin: 12 s, je 4 s ein, aus, auf */
.motion .breath:not(.live) .breath-ring{animation:ring-breathe 12s ease-in-out infinite}
.motion .breath:not(.live) .breath-orb{animation:orb-breathe 12s ease-in-out infinite}
.motion .breath:not(.live) .cue{animation:cue-show 12s ease-in-out infinite}
.motion .breath:not(.live) .cue-aus{animation-delay:4s}
.motion .breath:not(.live) .cue-auf{animation-delay:8s}
@keyframes ring-breathe{0%{transform:scale(.45);opacity:0}6%{opacity:.9}33%{transform:scale(1);opacity:.9}66%{transform:scale(.62);opacity:.9}94%{transform:scale(1.5);opacity:0}100%{transform:scale(.45);opacity:0}}
@keyframes orb-breathe{0%,100%{transform:translate(-50%,-50%) scale(.6);opacity:.6}33%{transform:translate(-50%,-50%) scale(1);opacity:1}66%{transform:translate(-50%,-50%) scale(.75);opacity:.8}90%{transform:translate(-50%,-50%) scale(1.25);opacity:1}}
@keyframes cue-show{0%{opacity:0}4%,29%{opacity:1}33%,100%{opacity:0}}
.no-motion .breath-cues{width:auto;aspect-ratio:auto;display:flex;gap:1.4em}
.no-motion .cue{opacity:1}
.no-motion .breath-ring{display:none}
/* Pin-Modus: „Lehn dich zurück.“ liegt über dem Kreis und macht ihm Platz */
.breath.live .breath-swap>*{grid-area:1/1;align-self:center}
.breath.live .breath-stage{gap:clamp(30px,7vh,70px)}
/* Der Ring wächst beim Aufatmen bis auf das 1,57-Fache (story.js) und ragt dann 0,29 × Kreisbreite über den Kreis hinaus:
   so viel Abstand bekommt die Zeile darüber zusätzlich, damit der Ring nie in den Text läuft. */
.breath.live .breath-pre{margin-bottom:calc(var(--cw) * .3)}
.motion .breath:not(.live) .breath-cues{margin-block:calc(var(--cw) * .26)}
.gift-main{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:12vh 0 14vh}
/* Aufschwung nach dem Atmen: der Himmel wird frischer und heller, ein Hauch Sonne oben rechts,
   zarte Bläschen steigen auf, groß im Hintergrund schwebt der Oktopus (ohne Kreis). */
.gift-sky{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 78% 22%,rgba(255,244,222,.7) 0%,rgba(255,244,222,0) 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 0%,transparent) 0%,#d9eefc 22%,#c9e5fa 48%,#d4ebfb 74%,var(--bg) 100%)}
.gift-sky i{position:absolute;left:var(--x);bottom:-40px;width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  border:1.5px solid rgba(63,111,143,.3);
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 16%,rgba(255,255,255,.35) 38%,rgba(207,231,248,.18) 70%,rgba(255,255,255,.05) 100%)}
.motion .gift-sky i{animation:bubble-rise var(--t) linear var(--d) infinite,bubble-sway calc(var(--t) / 3) ease-in-out var(--d) infinite alternate}
@keyframes bubble-rise{0%{transform:translateY(0);opacity:0}8%{opacity:.85}80%{opacity:.7}100%{transform:translateY(-118vh);opacity:0}}
@keyframes bubble-sway{from{translate:calc(var(--w) * -1) 0}to{translate:var(--w) 0}}
/* Mittig wie der Atemzug davor. Groß und zart im Hintergrund schwebt der Oktopus im Wasser (okto.js, WebGL):
   Kopf über der Zusage, die Tentakel wiegen sich hinter dem Text. Ohne WebGL steht das Bild still. */
/* --ow: Breite des Oktopus. Der Abschnitt ist so hoch wie der Oktopus, damit unten kein Tentakel abgeschnitten wird;
   die Zusage beginnt auf Höhe der Fliege. */
.s-gift .gift-main{--ow:min(86vw,1020px);display:block;padding:0;min-height:max(100vh,calc(var(--ow) * .89 + 4vh))}
.s-gift .gift-main .inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:calc(var(--ow) * .89 * .4)}
/* Der Kopf sitzt im Bild bei 51 % der Breite: um 1 % nach links, damit er genau unter dem Atemkreis und der Überschrift steht. */
.gift-okto-bg{position:absolute;z-index:-1;left:50%;top:0;width:var(--ow);transform:translateX(-51%);opacity:.16;pointer-events:none}
.okto-rise{position:relative;width:100%;aspect-ratio:1100/979}
.okto-rise canvas,.okto-rise img{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Das Bild füllt die Leinwand mit 7 % Rand (wie im Shader), damit beide gleich groß erscheinen */
.okto-rise img{inset:7%;width:86%;height:86%}
.okto-rise:not(.gl) canvas{display:none}
.okto-rise.gl img{visibility:hidden}
.motion .okto-rise{animation:okto-float 11s ease-in-out infinite}
@keyframes okto-float{0%,100%{translate:0 0}50%{translate:0 -1.5%}}
.s-gift h2.mega{font-size:clamp(3rem,1.3rem + 5.2vw,7rem);display:flex;flex-wrap:wrap;justify-content:center;column-gap:.24em}
.s-gift .gift-for{margin-top:1.4rem}
.s-gift .say.soft{margin-top:.6rem}
.s-gift .gift-main .dm{margin-inline:auto}
/* Wofür die Zeit? Das Wort tippt sich immer wieder neu, denn das ist bei jedem anders (story.js). */
.gift-for{margin:2.4rem 0 0;font-family:var(--serif);font-size:clamp(1.8rem,1.1rem + 2vw,3.2rem);line-height:1.1;color:var(--ink)}
.gift-rot{white-space:nowrap}
.gift-rot.typing::after{content:"";display:inline-block;width:.06em;height:.82em;margin-left:.06em;vertical-align:-.06em;background:var(--blue);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.gift-own{margin-top:2.2rem;display:inline-block;background:var(--paper);border-radius:999px;padding:.75rem 1.3rem;font-weight:500;box-shadow:0 18px 40px -26px rgba(29,43,54,.45)}
.gift-own b{color:var(--blue)}
.gift-own[hidden]{display:none}
/* Das Zeit-Check-Ergebnis steht unter dem Oktopus, nicht auf den Tentakeln (Oktopus ist --ow × .89 hoch; beim Hereinscrollen
   steht er bis zu 8 % tiefer, die Tentakelspitzen dann bei --ow × .9). */
.s-gift .gift-main .inner:has(.gift-own:not([hidden])){min-height:calc(var(--ow) * .9 + 5rem + 8vh);padding-bottom:8vh}
.s-gift .gift-own{margin-top:auto}
.s-gift .gift-main .dm{margin-bottom:2.2rem}

.voices-mini cite{display:block;font-family:var(--sans);font-style:normal;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-top:1rem}

/* ---------- 12:15 Geschenkte Zeit: Beispiele als waagerechte Galerie (wie v10) ---------- */
.s-stories{display:block;padding:0}
.stories-pin{min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:12vh 0 8vh}
@media (min-width:901px){
  .stories-pin{-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--rail) * .75),#000 calc(var(--rail) + var(--gutter) * .7));mask-image:linear-gradient(90deg,transparent calc(var(--rail) * .75),#000 calc(var(--rail) + var(--gutter) * .7))}
}
.stories-track{display:flex;align-items:stretch;gap:clamp(18px,2vw,32px);padding-inline:calc(var(--gutter) + var(--rail)) var(--gutter);width:max-content}
.stories-intro{flex:none;width:clamp(300px,34vw,540px);align-self:center}
.stories-intro .say{max-width:19em}
.stories-intro .stories-lead{font-family:var(--serif);font-size:clamp(1.3rem,.9rem + 1vw,1.95rem);line-height:1.22;color:var(--ink-2);max-width:17em}   /* Erzählzeile in der Serifenschrift wie 22:17, 23:40 und 15:30 */
.story{flex:none;width:clamp(320px,31vw,440px);display:flex;flex-direction:column;background:var(--paper);border-radius:26px;overflow:hidden;box-shadow:0 34px 80px -50px rgba(29,43,54,.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.story:hover{transform:translateY(-6px);box-shadow:0 44px 90px -46px rgba(29,43,54,.55)}
.story .ph{aspect-ratio:16/10;overflow:hidden;background:var(--sky-pale)}
.story .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.story:hover .ph img{transform:scale(1.04)}
.story-body{display:flex;flex-direction:column;gap:.75rem;padding:1.3rem 1.4rem 1.5rem;flex:1}
/* Karten ohne Fotos: oben ein zarter hellblauer Streifen, mehr Luft, die Überschrift trägt. */
.story.story{align-self:center;border-top:6px solid var(--sky-2)}
.story-body{padding:1.9rem 1.6rem 1.6rem;gap:.9rem}
.story .story-before{font-size:clamp(1.8rem,1.25rem + 1.1vw,2.5rem);line-height:1.08}
.story .story-now{margin-top:1.4rem}
.story-who{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.story-before{font-family:var(--serif);font-size:clamp(1.4rem,1.05rem + .8vw,1.9rem);line-height:1.12}
.story-now{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);font-size:.98rem;line-height:1.45;color:var(--ink-2)}
.story-now b{display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:.3rem}
.story-win{font-size:1.15rem!important}
/* Flache Fenster: Karten kompakter, damit sie ganz ins Bild passen */
@media (max-height:820px){
  .story-body{padding:1.4rem 1.4rem 1.2rem;gap:.6rem}
  .story .story-before{font-size:clamp(1.45rem,1.05rem + 1vw,2rem)}
  .story .story-now{margin-top:.6rem;font-size:.92rem;line-height:1.4}
    .story-gift{font-size:.84rem}
}
.story-win{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1rem + .5vw,1.5rem);line-height:1.2;color:var(--blue)}
.story-gift{display:flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:600;color:var(--ink)}
.story .fine{font-size:.78rem;margin-top:0}
/* Nach der Galerie, mittig unter der Uhr: Sprechblase und Knopf stehen ruhig, statt mit der Galerie wegzuscrollen */
.stories-end{display:grid;justify-content:center;padding:2vh calc(var(--gutter) + var(--rail)) 14vh}
.stories-end .dm{margin-top:0;max-width:30rem}
/* Knopf bündig unter der Sprechblase (Gesicht plus Abstand eingerückt) */
#h-check .ln>span{text-wrap:balance}
.stories-end .actions{margin-top:1.4rem;padding-left:calc(var(--face,46px) + .75rem)}

/* 12:15 Handy-Szene: Sprachnachricht an den digitalen Mitarbeiter (story.js phoneScene schaltet .rec und die Nachrichten) */
.story-phone{flex:none;align-self:center;margin:0;display:grid;justify-items:center;gap:.8rem}
.phone{height:min(540px,70vh);aspect-ratio:9/18.5;padding:9px;border-radius:40px;background:var(--ink);box-shadow:0 40px 80px -46px rgba(29,43,54,.7),inset 0 0 0 1.5px rgba(255,255,255,.12);container-type:inline-size}
.phone-screen{position:relative;height:100%;display:flex;flex-direction:column;border-radius:32px;overflow:hidden;background:#eef1f3}
.phone-screen::before{content:"";position:absolute;left:50%;top:7px;width:28%;height:4.5%;max-height:18px;border-radius:999px;background:var(--ink);transform:translateX(-50%);z-index:2}
.phone-top{display:flex;align-items:center;gap:3.5cqw;padding:15cqw 4.5cqw 3.5cqw;background:var(--paper);border-bottom:1px solid var(--line)}
.phone-face{flex:none;width:12cqw;height:12cqw;border-radius:50%;background:#fff url(../brand/emblem-oktopus-128.webp?v=e51106d3) center/88% no-repeat;box-shadow:0 0 0 1px var(--line)}
.phone-name{display:grid;line-height:1.15;min-width:0}
.phone-name b{font-size:6.4cqw;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-name small{font-size:4.8cqw;color:var(--blue)}
.phone-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2.4cqw;padding:4cqw 4cqw 3cqw;overflow:hidden}
.pm{margin:0;max-width:86%;padding:2.8cqw 3.8cqw;border-radius:5cqw;font-size:5.9cqw;line-height:1.35;color:var(--ink);box-shadow:0 2px 6px -3px rgba(29,43,54,.25)}
.pm-in{align-self:flex-start;background:#fff;border-bottom-left-radius:1.6cqw}
.pm-out{align-self:flex-end;background:var(--sky-pale);border-bottom-right-radius:1.6cqw}
.pm-voice{display:grid;gap:1.6cqw;width:82%}
.pm-voice-row{display:flex;align-items:center;gap:2.4cqw}
.pm-voice small{font-size:4.6cqw;color:var(--ink-3)}
.pm-voice em{font-size:5cqw;line-height:1.3;color:var(--ink-3)}
.pm-play{flex:none;width:0;height:0;border-left:3.4cqw solid var(--blue);border-top:2.2cqw solid transparent;border-bottom:2.2cqw solid transparent}
.pm-wave{flex:1;display:flex;align-items:center;gap:.9cqw;height:6cqw}
.pm-wave i{flex:1;height:var(--h);border-radius:2px;background:var(--blue);opacity:.75}
.pm-typing{display:flex;gap:1.4cqw;padding-block:3.4cqw}
.pm-typing i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--ink-3);animation:phone-dots 1s ease-in-out infinite}
.pm-typing i:nth-child(2){animation-delay:.15s}.pm-typing i:nth-child(3){animation-delay:.3s}
@keyframes phone-dots{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-30%)}}
.phone-bar{display:flex;align-items:center;gap:2.4cqw;padding:2.6cqw 3.4cqw 7cqw;background:var(--paper)}
.phone-input{position:relative;flex:1;height:11cqw;display:flex;align-items:center;padding:0 4cqw;border-radius:999px;background:#eef1f3;font-size:5.2cqw;color:var(--ink-3);overflow:hidden}
.phone-rec{position:absolute;inset:0 4cqw;display:flex;align-items:center;gap:2.4cqw;opacity:0;transition:opacity .3s}
.phone-dot{flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#d0463b;animation:phone-blink 1s ease-in-out infinite}
@keyframes phone-blink{50%{opacity:.25}}
.phone-t{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.pm-wave.live i{background:#d0463b;opacity:.7;transform-origin:center;animation:phone-wave .7s ease-in-out var(--d) infinite alternate}
@keyframes phone-wave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.phone-mic{position:relative;flex:none;width:11cqw;height:11cqw;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;transition:transform .35s var(--ease),background .35s}
.phone-mic svg{width:55%;height:55%}
.phone-mic::after{content:"";position:absolute;inset:0;border-radius:50%;background:#d0463b;opacity:0}
.phone.rec .phone-mic{transform:scale(1.3);background:#d0463b}
.phone.rec .phone-mic::after{animation:phone-pulse 1.2s ease-out infinite}
@keyframes phone-pulse{from{transform:scale(1);opacity:.45}to{transform:scale(1.9);opacity:0}}
.phone.rec .phone-rec{opacity:1}
.phone.rec .phone-hint{opacity:0}
.phone-cap{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
/* Nachrichten erscheinen nacheinander (nur mit Bewegung; ohne stehen alle da) */
.motion .pm:not(.on){max-height:0;padding-block:0;margin-top:-2.4cqw;opacity:0;transform:translateY(6px);box-shadow:none}
.motion .pm{max-height:40cqw;transition:max-height .45s var(--ease),padding .45s var(--ease),margin .45s var(--ease),opacity .4s,transform .45s var(--ease)}
@media (max-width:760px){.story-phone{justify-self:center}.phone{height:min(520px,120vw)}}

/* ---------- 15:30 Kontrolle ---------- */
.s-trust{display:block}
/* Wasserzeichen: der Oktopus behütet die Truhe mit deinen Daten. Rechts groß und zart, die Tentakel schweben (okto.js),
   das Schloss glänzt ab und zu auf. Auf schmalen Bildschirmen hinter dem Text, noch zarter. */
/* Die Truhe schließt unten bündig mit Punkt 04 ab (story.js trustAlign setzt --below; das Bild hat rundum 7 % Rand
   für die schwebenden Arme, den gleicht bottom aus) */
.trust-okto{--w:min(52vw,820px);position:absolute;z-index:-1;right:max(1vw,calc(50% - 720px));bottom:calc(var(--below,0px) + var(--w) * -.07);width:var(--w);opacity:.2;pointer-events:none}
.trust-okto .okto-rise{aspect-ratio:1000/836}
.trust-glint{position:absolute;left:calc(7% + 86% * .497);top:calc(7% + 86% * .8);width:9%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.4);border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(255,255,255,.6) 18%,rgba(255,255,255,0) 60%)}
.trust-glint::before,.trust-glint::after{content:"";position:absolute;left:50%;top:50%;width:140%;height:3%;border-radius:2px;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translate(-50%,-50%)}
.trust-glint::after{transform:translate(-50%,-50%) rotate(90deg)}
.motion .trust-glint{animation:glint 7s ease-in-out 2s infinite}
@keyframes glint{0%,82%,100%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}88%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}94%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.trust-glint{display:none}}
/* Die vier Versprechen untereinander: Nummer links, Satz und Erklärung rechts. */
.trust-life{margin:1.2rem 0 0;font-family:var(--serif);font-size:clamp(1.8rem,1.1rem + 2vw,3.2rem);line-height:1.1;color:var(--ink)}   /* wie „Jeden Tag. Für …“ um 09:00 */
.promises{list-style:none;margin:clamp(36px,6vh,72px) 0 0;padding:0;display:grid;gap:0;max-width:min(100%,46rem);counter-reset:p}
.promises li{position:relative;counter-increment:p;display:grid;grid-template-columns:3.4rem minmax(0,1fr);column-gap:.4rem;row-gap:.35rem;padding:1.5rem 0}
/* Versprechen ohne Trennstriche und ohne Arme, nur mit Luft dazwischen */
.promises li::before{content:"0" counter(p);grid-row:1/3;padding-top:.7rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--blue-deep)}
.promises b{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,1.1rem + 1.2vw,2.4rem);line-height:1.08}
.promises li>span{font-size:1.05rem;color:var(--ink-2);max-width:32em}

/* ---------- 17:00 So fängt es an ---------- */
.steps{--gap:clamp(20px,3vw,48px);list-style:none;margin:clamp(40px,7vh,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);counter-reset:s}
.steps li{counter-increment:s;display:grid;align-content:start;gap:.7rem;position:relative}
.steps li::before{content:counter(s);width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--paper);box-shadow:0 0 0 6px rgba(159,205,238,.35);font-family:var(--serif);font-size:1.5rem;color:var(--blue);margin-bottom:.6rem}
/* Drei Atemzüge (story.js setzt .on nacheinander): der Kreis atmet ein und aus, ein Ring verklingt, dann erscheinen
   Satz und Text, und eine feine Linie zieht sich zum nächsten Schritt. Danach steht alles fest zum Lesen. */
.steps li:not(:last-child)::after{content:"";position:absolute;top:calc(1.3rem - .75px);left:calc(2.6rem + 14px);width:calc(100% + var(--gap) - 2.6rem - 28px);height:1.5px;border-radius:2px;background:linear-gradient(90deg,rgba(63,111,143,.5),rgba(159,205,238,.7));transform-origin:left center}
.motion .steps li::before{opacity:0;transform:scale(.55)}
.motion .steps li.on::before{animation:step-breath 1.3s var(--ease) forwards}
@keyframes step-breath{0%{opacity:0;transform:scale(.55);box-shadow:0 0 0 0 rgba(159,205,238,.55)}35%{opacity:1;transform:scale(1.24);box-shadow:0 0 0 14px rgba(159,205,238,.4)}70%{opacity:1;transform:scale(.95);box-shadow:0 0 0 34px rgba(159,205,238,0)}100%{opacity:1;transform:scale(1);box-shadow:0 0 0 6px rgba(159,205,238,.35)}}
.motion .steps li b,.motion .steps li>span{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .3s,transform .9s var(--ease) .3s}
.motion .steps li>span{transition-delay:.45s}
.motion .steps li.on b,.motion .steps li.on>span{opacity:1;transform:none}
.motion .steps li:not(:last-child)::after{transform:scaleX(0);transition:transform .7s var(--ease) .35s}
.motion .steps li.on:not(:last-child)::after{transform:scaleX(1)}
.steps b{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.2rem + 1.8vw,3.3rem);line-height:1;text-wrap:balance}
.steps li>span{font-size:1.08rem;color:var(--ink-2);max-width:22em}

/* ---------- 17:00 Erik ---------- */
/* 17:00 Erik: oben groß das Zitat, darunter Foto mit Blase und Fakten */
.s-erik{padding-top:7vh;padding-bottom:4vh}   /* das Zitat schließt direkt an die drei Schritte an, unten geht es gleich in den Abend */
.s-erik .inner{display:block}
/* 17:00 Übergabe: Der Oktopus fragt „Und wer steckt hinter mir?“, Erik antwortet mit Foto. Wie ein kleiner Chat,
   groß genug, dass man hängen bleibt; danach kommt Eriks Zitat. */
.erik-handover{display:grid;gap:1.4rem;max-width:48rem;margin:0 auto clamp(80px,17vh,180px);padding-top:0}
.s-trust{padding-bottom:4vh}
.s-erik{padding-top:2vh}
.dm-hand{margin:0}
.dm-hand .dm-bubble{max-width:30rem}   /* gleiche Schrift und Größe wie die anderen Blasen */
.dm-hand .dm-face{font-size:52px}
.dm-hand-erik{justify-self:end;flex-direction:row-reverse}
.dm-hand-erik .dm-col{align-items:flex-end}
.dm-hand-erik .dm-name{padding:0 .5rem 0 0}
.dm-hand-erik .dm-bubble{border-radius:22px 22px 6px 22px}
.dm-hand-erik .dm-avatar{width:60px;height:60px}
.motion .dm-hand-erik{transform-origin:right bottom}
.erik-quote{margin:0 0 clamp(36px,7vh,80px)}
.erik-quote .big{font-size:clamp(2.2rem,1rem + 3.3vw,4.6rem);line-height:1.06;max-width:17em}
.erik-quote .ln>span{text-wrap:balance}
.erik-quote figcaption{margin-top:1.2rem;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.erik-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,110px);align-items:center}
.erik-lead{margin:0 0 .9rem;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.2rem + 1.9vw,3.4rem);line-height:1.05}
.erik-lead em{color:var(--blue)}
.erik-turn{margin-top:1rem}
.erik-turn b{font-weight:600;color:var(--ink)}
/* Fakten als ruhiges Band über die ganze Breite */
.erik-facts{list-style:none;margin:clamp(56px,10vh,120px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem clamp(24px,3vw,48px)}
.erik-facts li{display:grid;align-content:start;gap:.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.erik-facts b{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,1rem + .9vw,2rem);line-height:1.08;color:var(--ink)}
@media (max-width:1100px){.erik-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.erik-facts span{font-size:.98rem;line-height:1.45;color:var(--ink-2)}
/* Eriks Foto (896 x 1200) steht ganz im Rahmen: gleiches Seitenverhältnis, kein Parallax, nichts abgeschnitten.
   Rahmen (Rundung, Schatten) sitzt am Bild selbst, damit der Hinweis „Foto KI-bearbeitet“ als Bildunterschrift
   darunter stehen kann, nicht auf dem Foto. */
.erik-photo{margin:0;max-width:520px}
.erik-photo img{display:block;width:100%;height:auto;aspect-ratio:896/1200;object-fit:cover;object-position:50% 0;border-radius:28px;box-shadow:var(--card-shadow)}
/* Kleiner, leiser Hinweis rechtsbündig unter dem Foto (Eriks Entscheidung vom 04.10.2026). ink-2 auf dem hellen
   Grund der Szene 17:00 (#f4f3f1) 7,6:1; rechts, damit er nicht mit „Erik“ über der Blase darunter verschmilzt. */
.foto-hinweis{margin-top:.7rem;font-size:.76rem;font-weight:500;line-height:1.4;letter-spacing:.04em;color:var(--ink-2);text-align:right}
/* Erik spricht selbst, nur wo er wirklich handelt: sein gezeichneter Avatar (rund), Name über der Blase.
   Am großen Foto steht die Blase unter dem Bild, damit sie nichts verdeckt. Tippen und Einblenden wie beim
   digitalen Mitarbeiter (dm.js). */
.dm-avatar{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--paper),0 10px 24px -12px rgba(29,43,54,.5)}
.dm-col{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;min-width:0}
.dm-name{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink-3);padding-left:.5rem}
.dark .dm-name{color:var(--on-dark-2)}
.s-start .dm-erik{margin-top:clamp(36px,6vh,64px)}
/* „Drei Schritte bis zu deinem digitalen Mitarbeiter.“ Die Worte stehen erst verschwommen da und werden mit jedem Schritt scharf,
   nach Schritt 3 taucht der Oktopus am Ende auf (story.js stepsBreath). */
#h-start .ln>span{text-wrap:balance}
.start-face{display:inline-block;width:.78em;height:.78em;margin-left:.14em;vertical-align:-.04em;background:url(../brand/emblem-oktopus-128.webp?v=e51106d3) center/contain no-repeat}
.motion .start-goal .gw{opacity:.16;filter:blur(.08em);transition:opacity .7s var(--ease),filter .9s var(--ease)}
.motion .start-goal .gw.on{opacity:1;filter:none}
.motion .start-face{opacity:0;transform:scale(.3) rotate(-24deg);transition:opacity .5s,transform .9s cubic-bezier(.34,1.56,.64,1)}
.motion .s-start.arrived .start-face{opacity:1;transform:none}
.erik-side{position:relative;max-width:520px}
.erik-side .erik-photo{max-width:none}
.dm-photo{margin:1.4rem 0 0;max-width:30rem}
.voices-mini{display:grid;gap:1.6rem;margin-top:2.6rem}
.voices-mini blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + .9vw,2.1rem);line-height:1.15;max-width:20em}

/* ---------- 19:00 Feierabend. Wirklich. ---------- */
/* Ohne Foto, in den Farben vom Anfang: aus dem warmen Weiß von 18:30 in zartes Hellblau hinter der Überschrift und
   unten wieder warm in den Abschied. Ein paar Blasen steigen leicht auf. Alles mittig, an der Uhr oben ausgerichtet. */
.s-closing{justify-content:flex-start;text-align:center;padding-top:clamp(96px,12vh,140px)}   /* kurzer Übergang, oben gerade Platz für Octos erste Blase */
.s-closing.fade-top::before{height:10vh}
.s-closing .closing-sky{background:linear-gradient(180deg,var(--prev,#f6f0e9) 0%,#eef0f1 14%,#e6eef5 30%,#e0ebf5 46%,#e6edf2 62%,#f0efed 80%,var(--bg) 100%)}
.s-closing .inner{padding-inline:calc(var(--gutter) + var(--rail))}
/* Der Laptop als gestochener Film: er schwebt leicht, die Ränder blenden weich in den Hintergrund aus */
/* Am Ende nur der Laptop, groß; die beiden Blasen des Oktopus stehen links und rechts daneben, die Spitzen zum Laptop */
.lap-stage{--lw:min(118vh,76vw,1180px);position:relative;left:calc(var(--lw) * .045);width:var(--lw);margin:0 auto .4rem}   /* der Laptop so groß wie am Anfang; im Film sitzt er etwas links, darum ein Stück nach rechts: mittig unter der Uhr */
.lap-stage .dm-reply{right:auto;bottom:auto;white-space:nowrap;width:max-content;max-width:none;text-align:left}   /* einzeilig */
/* Schrift, Größe und Form wie alle Blasen auf der Seite; Octos Gesicht links daneben */
.lap-stage .dm-reply .dm-bubble{border-radius:20px 20px 20px 6px;font-family:var(--sans);font-size:clamp(1rem,.95rem + .3vw,1.18rem);font-weight:500;line-height:1.4;padding:.8rem 1.15rem}
.motion .lap-stage .dm-reply{transform-origin:left bottom}
.lap-stage #ftrSay{left:-2%;top:-11%}   /* oben im Übergang, links */
.lap-stage .dm-bye{left:auto;right:-3%;top:1%}   /* rechts, etwas über dem Laptop */
.lap-film{position:relative;width:100%;aspect-ratio:16/10;   /* breit: oben und unten nur leerer Grund, der wegfällt */
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.lap-film video{display:block;width:100%;height:100%;object-fit:cover;background:#e8eef3}
/* Das Standbild setzt story.js aus data-poster, kurz bevor der Laptop ins Bild kommt. Ohne JS steht es hier,
   der Film selbst (ohne Quelle, mit Bedienleiste) tritt zurück. */
html:not(.js) .lap-film video{visibility:hidden}
html:not(.js) .lap-film::before{content:"";position:absolute;inset:0;background:#e8eef3 url(../img/v11/laptop-okto.webp?v=0fe96458) center/cover no-repeat}
@media (max-width:760px){html:not(.js) .lap-film::before{transform:scale(1.3);transform-origin:46% 50%}}
.motion .lap-film{animation:lap-float 7s ease-in-out infinite}
/* „Feierabend.“ erscheint in dem Moment, in dem der Deckel zufällt */
.motion .s-closing #h-closing{opacity:0;transform:translateY(12px);transition:opacity .45s ease-out,transform .7s var(--ease)}   /* taucht beim Zuschlagen auf, zügig */
.motion .s-closing.lap-shut #h-closing{opacity:1;transform:none}
@keyframes lap-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (max-width:760px){
  /* Handy: so breit wie zwischen den Leisten möglich, mittig unter der Uhr; der Film etwas näher herangeholt */
  .lap-stage{--lw:min(calc(100vw - 52px),460px);left:0;margin-inline:calc(50% - var(--lw) / 2)}
  .lap-film{overflow:hidden}
  .lap-film video{transform:scale(1.3);transform-origin:46% 50%}
  .lap-stage .dm-reply{position:relative;inset:auto;max-width:82vw;white-space:normal}   /* auf dem Handy darf die lange Blase umbrechen */
  .lap-stage #ftrSay{inset:auto;margin:0 auto .7rem 0}
  .lap-stage .dm-bye{margin:0 0 .2rem auto}
}
.closing-copy{margin-inline:auto}
.s-closing .mega{font-size:clamp(3.4rem,1rem + 6.4vw,8.6rem)}
.s-closing .say{margin-inline:auto;max-width:25em;text-wrap:balance}
.s-closing .mega{margin:0}

/* ---------- Jetzt: Kontakt ---------- */
.s-cta .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:center}
/* 18:30 Die letzte Aufgabe: ruhig in unseren Farben, aus dem warmen Weiß von 17:30 in zartes Hellblau und unten
   wieder warm in den Feierabend. Viele Zwischenstufen, damit nirgends eine Kante entsteht. Das Formular ist das
   letzte Kästchen des Tages. */
.s-last{padding-block:14vh 6vh}   /* dicht an Eriks „Erzähl mir, was dich auffrisst“, die Antwort folgt direkt */
.s-last .inner{align-items:start}   /* Text oben neben dem Formular beginnen, kein Leerraum über der Überschrift */
/* Wer noch nicht so weit ist: klein unter dem Formular der Hinweis auf den Brief, nicht gleichrangig zum Gespräch */
.form-alt{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin:1.4rem 0 0;padding:1.1rem 1.4rem;border-radius:20px;background:rgba(253,253,252,.6);border:1px solid var(--line)}
.form-alt p{flex:1 1 16rem;margin:0;font-size:.98rem;line-height:1.45;color:var(--ink-2)}
.form-alt b{color:var(--ink);font-weight:600}
.form-alt .btn{flex:none}
/* Nach dem Brief verabschiedet sich der Oktopus (über beide Spalten, mittig): „Ich arbeite schon mal vor.“ /
   „Und du machst jetzt aber wirklich Schluss.“ Danach klappt sein Arm um 19:00 den Laptop zu. */
.s-last .sky{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,var(--prev,#f4f3f1) 0%,#f2f2f1 8%,#eef0f2 16%,#e9eff4 25%,#e5edf5 34%,#e3ecf5 42%,#e4ecf4 52%,#e8edf1 62%,#eeeeed 72%,#f2efea 82%,#f5efe7 91%,var(--bg) 100%)}
.last-task{display:flex;align-items:center;gap:.8rem;margin:0 0 1.4rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:clamp(1.4rem,1rem + 1vw,1.9rem);line-height:1.15}
.last-box{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--blue);background:var(--paper);box-shadow:0 0 0 5px rgba(159,205,238,.35)}
.s-last .say{max-width:30em}
.s-last .big{font-size:clamp(2.6rem,1rem + 4vw,5.6rem)}
@media (max-width:760px){.s-last{padding-block:10vh 6vh}}
.form{background:var(--paper);border-radius:28px;padding:clamp(1.4rem,3vw,2.6rem);box-shadow:var(--card-shadow)}
.field{display:grid;gap:.45rem;margin-bottom:1.1rem}
.field label{font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)}
.field input,.field textarea,.field select{width:100%;background:#fff;border:1.5px solid rgba(29,43,54,.14);border-radius:12px;padding:.95rem 1rem;font:inherit;font-size:1.05rem;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(63,111,143,.15)}
.field textarea{min-height:6rem;resize:vertical}
.consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;line-height:1.5;color:var(--ink-2);margin:.3rem 0 1.4rem}
.consent input{margin-top:.25rem;accent-color:var(--blue);width:18px;height:18px;flex:none}
.form-meta{font-size:.8rem;letter-spacing:.06em;color:var(--ink-3);margin-top:1rem}
/* Hat das Absenden nicht geklappt (send-mail.php leitet mit ?error=1 zurück), steht über den Feldern ein ruhiger
   Hinweis in Form der Felder, Rand und Link im Rotbraun der „Nein“-Zeilen am Ausweis. core.js zeigt ihn und setzt
   den Fokus darauf; einen Rahmen braucht er dafür nicht. */
.form-error{margin:0 0 1.3rem;padding:.85rem 1.05rem;border-radius:12px;border:1.5px solid #8a4b3c;background:var(--sand);color:var(--ink);font-size:.95rem;line-height:1.5}
.form-error a{color:#8a4b3c;font-weight:600;text-underline-offset:.15em}
.form-error[hidden]{display:none}
.form-error:focus{outline:none}
.hp{position:absolute;left:-9999px}

/* ---------- Fuß ---------- */
/* Markup aus dem Generator (Marker seiten:fuss in index.html), Grundstil in schale.css wie auf allen Unterseiten.
   Hier nur, was die Startseite braucht: Abstand zur Leiste links wie die Szenen und der weiche Übergang. */
.hmm-fuss{position:relative;z-index:1;padding:clamp(80px,10vh,140px) calc(var(--gutter) + var(--rail)) 2.2rem;border-top:0}
/* Weicher Übergang vom Feierabend in den Schluss: oben noch die warme Farbe des Feierabends, dann das helle Blau */
.hmm-fuss::before{content:"";position:absolute;left:0;right:0;top:-1px;height:32vh;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#f7f1e9 0%,rgba(247,241,233,.6) 45%,rgba(247,241,233,0) 100%)}
/* Die Blase im Feierabend im selben Stil wie die beiden ganz unten (groß, mit Serifen) */
.dm-closing .dm-bubble{font-family:var(--serif);font-size:clamp(1.5rem,1rem + 1.4vw,2.4rem);font-weight:400;line-height:1.1;padding:.55rem 1.2rem .65rem;border-radius:22px 22px 22px 6px}
.dm-closing .dm-face{font-size:54px}
.ftr-mega{font-family:var(--serif);font-size:clamp(4rem,1rem + 11vw,15rem);line-height:.85;color:rgba(29,43,54,.08);white-space:nowrap}
.ftr-mega span{color:var(--sky-2)}
/* Zum Schluss: groß in der Mitte der schwebende Oktopus (okto.js), er sagt „Ich helfe dir.“ */
.dm-reply{position:absolute;right:76%;bottom:98%;margin:0;z-index:1;white-space:nowrap}
.dm-reply .dm-bubble{border-radius:22px 22px 6px 22px;font-family:var(--serif);font-size:clamp(1.5rem,1rem + 1.4vw,2.4rem);font-weight:400;padding:.55rem 1.2rem .65rem}
.motion .dm-reply{transform-origin:right bottom}
/* „Ich helfe dir gerne!“ oben links, danach „Bis bald!“ rechts etwas tiefer; die Spitzen zeigen zum Oktopus */
.dm-bye{right:auto;left:72%;bottom:84%}
.dm-bye .dm-bubble{border-radius:22px 22px 22px 6px}
.motion .dm-bye{transform-origin:left bottom}

/* ---------- Mittel ---------- */
@media (max-width:1099px){
  .hdr{grid-template-columns:auto 1fr auto;gap:.8rem}
}
@media (max-width:900px){
  .hdr{padding:.8rem 16px}
  .inner{padding-inline:calc(22px + var(--rail)) 20px}
  .s-meet .inner,.check-grid,.night .inner,.proof-top,.erik-grid,.s-cta .inner{grid-template-columns:1fr}
  .erik-facts{grid-template-columns:1fr}
  .check-result{position:relative;top:0}
  .js .cr-mini{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:sticky;bottom:12px;z-index:5;margin:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:.75rem .8rem .75rem 1.2rem;box-shadow:0 18px 40px -18px rgba(29,43,54,.6);font-size:.95rem}
  .cr-mini b{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1;margin-right:.3rem}
  .cr-mini a{background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600;font-size:.82rem;border-radius:999px;padding:.45rem .9rem;text-align:center;line-height:1.25;text-wrap:balance;min-width:0;max-width:62%}
  .cr-mini b{white-space:nowrap}
  .night .fine{grid-column:auto}
  /* Handy: Blasen erst nach der Liste */
  .night-head{display:contents}
  .night .log{order:1}
  .night-says{order:2}
  .night .fine{order:3}
  .steps{grid-template-columns:1fr}
  .dm-reply{right:auto;left:-6vw;bottom:calc(92% + 4.2rem)}
  .dm-reply .dm-bubble{border-radius:22px 22px 22px 6px}
  .motion .dm-reply{transform-origin:left bottom}
  .dm-bye{left:auto;right:-4vw;bottom:92%}
  .dm-bye .dm-bubble{border-radius:22px 22px 6px 22px}
  .motion .dm-bye{transform-origin:right bottom}
  .steps li:not(:last-child)::after{top:calc(2.6rem + 14px);left:calc(1.3rem - .75px);width:1.5px;height:calc(100% + var(--gap) - 2.6rem - 28px);transform-origin:center top}
  .motion .steps li:not(:last-child)::after{transform:scaleY(0)}
  .motion .steps li.on:not(:last-child)::after{transform:scaleY(1)}
  .trust-okto{--w:110vw;right:-30vw;opacity:.12}
  .promises li{grid-template-columns:2.4rem minmax(0,1fr)}
  .stories-pin{min-height:0;padding:14vh 0 8vh}
  .stories-track{flex-direction:column;width:auto;padding-inline:calc(22px + var(--rail)) 20px}
  .stories-intro,.story{width:auto}
  .stories-end{padding:0 20px 10vh calc(22px + var(--rail))}
  .erik-photo,.erik-side{max-width:420px}
  .ping{max-width:13rem;padding:.6rem .8rem}}
@media (max-width:760px){
  .scene{padding:14vh 0}
  .s-hero{align-items:flex-end;padding-bottom:16vh}
  /* Handy: Der Film steht als Band oben, Überschrift und Text folgen darunter auf ruhigem Grund */
  .s-hero{padding-top:calc(56px + 74vw)}
  .s-hero .bg{bottom:auto;height:calc(56px + 74vw + 1.5rem);-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
  .s-hero .bg video{object-position:93% 60%}
  .s-hero .bg::after{background:linear-gradient(180deg,rgba(220,235,247,.5) 0%,rgba(220,235,247,0) 14%)}
  .hero-sound{top:calc(56px + 74vw - 3.2rem);right:16px;padding:.5rem .8rem .5rem .65rem;font-size:.66rem}
  .s-morning .bg::after{background:linear-gradient(0deg,rgba(232,241,249,.96) 0%,rgba(232,241,249,.86) 50%,rgba(232,241,249,.25) 100%)}
  .dawn{height:105vh}
  .dawn-sun{left:66%;top:40vh;width:110vw}
  .gift-main{align-items:flex-start;padding:12vh 0 14vh}
  .s-gift .gift-main{--ow:170vw;min-height:calc(var(--ow) * .89 + 6vh);padding-bottom:12vh}
  .gift-okto-bg{opacity:.14}
  .s-gift .gift-main .inner{padding-top:62vw}
  .breath{padding-block:12vh 4vh;min-height:auto}
  .breath-orb{width:130vw}
  .breath{--cw:58vw}
  .breath-stage{padding-inline:30px 16px}
  .breath-pre{font-size:.64rem;letter-spacing:.1em}
  .gift-rot{white-space:normal}
  .scan,.unravel{height:auto;padding-bottom:12vh}
  .scan-frame,.unravel .frame{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;aspect-ratio:3/2}
  .unravel .frame{aspect-ratio:16/9}
  .scan-shade,.unravel .shade,.scan-veil{display:none}
  .scan-lead{padding-block:10vh 6vh}
  .scan-copy,.unravel-copy{position:relative;padding:3rem 0 0}
  .scan-copy .dm{margin-top:0}
  .unravel-copy{gap:2rem}
  .scan-xray{clip-path:inset(0 0 45% 0)}
  .xtag{font-size:.64rem;padding:.25rem .5rem}
  .hdr-cta{padding:.45rem .8rem;font-size:.82rem}
  .ping:nth-child(n+7){display:none}
  .ping:nth-child(2),.ping:nth-child(4),.ping:nth-child(6){left:auto!important;right:4%}
  .ping{max-width:11.5rem}
  .ci{flex-direction:column;align-items:stretch;gap:0;padding-bottom:.9rem}
  .ci-hours{padding-left:2.25em}
  .chip{min-width:0;flex:1}
  .log li{grid-template-columns:3.6em minmax(0,1fr)}
  .log b{grid-column:2;justify-self:start}
  .report ul{gap:.6rem}
  .report span{font-size:.8rem}
  .wm{font-size:1.32rem}
  .wm-claim{display:none}   /* auf dem Handy ist die Kopfzeile zu eng für den Slogan */
  .wm-zeichen{width:1.25em;height:1.25em}
  .clock{position:relative}
  .clock-t{font-size:1.5rem}
  .clock-say{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.3rem;max-width:64vw}.clock-say .dm-face{font-size:16px}.clock-l{font-size:.72rem}
}
/* Ganz schmal (bis 400 px) wie auf /zeitcheck/: Stunden-Chips unter das Kästchen, damit jeder mindestens 44 px breit bleibt */
@media (max-width:400px){.ci-hours{padding-left:0;gap:.3rem}}
/* Kopf bis 900 px: Mit dem Menüknopf ist die Zeile voll (Schriftzug, ab 761 px mit Slogan, Uhr, „Erstgespräch“,
   Menü). Der Satz unter der Uhr steht deshalb unter der ganzen Zeile, gut 8 px unter den 44-px-Knöpfen und dem
   Slogan, und überdeckt so nichts. Der Kopf ist dafür etwas höher, sein Grund bleibt bis zum Satz dicht.
   901 bis 1099 px: alles in einer Zeile wie bisher, der Menüknopf nur als Symbol (Name „Menü“ bleibt für
   Screenreader). Ab 1100 px mit Wort. */
@media (max-width:900px){
  .hdr{padding:.5rem 16px 34px}
  .hmm-menue-kopf{padding-top:.5rem}   /* „Schließen“ im offenen Menü genau dort, wo der Menüknopf sitzt */
  .hdr::before{-webkit-mask-image:linear-gradient(var(--ink) 55%,transparent);mask-image:linear-gradient(var(--ink) 55%,transparent)}
  .clock{position:relative;align-self:stretch;justify-content:center}
  .clock-say{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:10px;max-width:64vw}
}
@media (min-width:901px) and (max-width:1099px){
  .hdr .hmm-menueknopf{width:44px;height:44px;padding:0}
  .hdr .hmm-menueknopf-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
/* ---------- Das Zeichen des digitalen Mitarbeiters: Emblem-Oktopus ----------
   Oktopus im Kupferstich mit Fliege (assets/brand/emblem-oktopus-*.webp).
   Schwebt sanft, beim Tippen etwas lebhafter. Größe über font-size. */
.dm-face,.badge-face{position:relative;display:block;flex:none;width:1em;height:1em;background:url(../brand/emblem-oktopus-128.webp?v=e51106d3) center/contain no-repeat;filter:drop-shadow(0 .08em .12em rgba(29,43,54,.18));animation:hover-geist 4.5s ease-in-out infinite}
@keyframes hover-geist{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
@keyframes bob-geist{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9%) rotate(-4deg)}}
.dm-face{font-size:46px}
.badge-face{font-size:112px;background-image:url(../brand/emblem-oktopus-256.webp?v=f84d8221)}
.cr-does .dm-face{font-size:34px}
.dm.typing .dm-face{animation:bob-geist .9s ease-in-out infinite}
.dm-night .dm-face,.scene.dark .dm-face{filter:drop-shadow(0 0 .18em rgba(191,225,247,.4))}
.wm-zeichen{width:1.55em;height:1.55em;margin:-.3em .34em -.3em 0;vertical-align:middle}
.wm{display:inline-flex;align-items:center}
@media (prefers-reduced-motion:reduce){.dm-face,.badge-face,.dm.typing .dm-face{animation:none}}
/* Variante A (Empfehlung, Isabell entscheidet): unter 480 px zeigt der Kopf nur das Emblem (Fläche 44 px,
   aria-label bleibt), damit „Erstgespräch“ und der Menüknopf neben der Uhr Platz haben. Wie auf den Unterseiten.
   Steht nach den Grundregeln von .wm und .wm-zeichen, damit es sie überschreibt. */
@media (max-width:479px){
  .wm{justify-content:center;min-width:44px}
  .wm-zeichen{width:36px;height:36px;margin:0}
  .wm-txt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

/* ---------- Die Leiste als To-do-Liste ---------- */
.crew-count{display:flex;align-items:center;gap:.4rem;align-self:flex-start;margin:0 0 0 -2px;padding:.32rem .6rem .32rem .4rem;border-radius:999px;background:rgba(253,253,252,.92);border:1px solid var(--line);box-shadow:0 10px 24px -18px rgba(29,43,54,.5);font-size:.72rem;font-weight:500;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.crew-count::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fdfbf7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.crew-count b{font-weight:700;color:var(--ink)}
.crew-line{width:1.5px;background:rgba(29,43,54,.13);transition:background-color .6s}
.crew-stop{position:absolute;left:50%;width:22px;height:22px;border-radius:6px;background:var(--paper);border:1.5px solid rgba(29,43,54,.28);transform:translate(-50%,-50%);transition:border-color .4s,box-shadow .4s,transform .25s}
.crew-stop::after{content:"";position:absolute;inset:-1.5px;border-radius:6px;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease) var(--td,0s)}
.crew-stop.done{border-color:var(--blue)}
/* Kästchen sind Sprungknöpfe: klickbar trotz durchlässiger Leiste, großzügige Trefferfläche */
button.crew-stop{padding:0;margin:0;font:inherit;cursor:pointer;pointer-events:auto;appearance:none;-webkit-appearance:none}
button.crew-stop::before{content:"";position:absolute;inset:-9px -12px}
button.crew-stop:hover{border-color:var(--blue);transform:translate(-50%,-50%) scale(1.18)}
button.crew-stop:focus-visible{outline:2px solid var(--sky-2);outline-offset:3px}
.crew.on-dark .crew-line{background:rgba(247,245,242,.2)}
.crew.on-dark .crew-stop{background:var(--night);border-color:rgba(247,245,242,.5)}
.crew.on-dark .crew-stop::after{background-color:#5a9fd6}
.crew.on-dark .crew-count{background:rgba(28,42,53,.85);color:var(--on-dark-2);border-color:rgba(247,245,242,.18)}
.crew.on-dark .crew-count b{color:var(--on-dark)}
@media (min-width:761px) and (max-width:1099px){
  .crew-stop{width:18px;height:18px;border-radius:5px}
}
@media (max-width:760px){
  .crew-stop{width:10px;height:10px;border-width:1px;border-radius:3px}
  .crew-stop::after{inset:-1px;border-radius:3px;background-size:86%}
}

/* Häkchen im selben Stil: Beispiele */
.story-gift::before{content:"";flex:none;width:1rem;height:1rem;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fdfbf7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
@media (max-width:1099px){.crew-count{display:none}}
/* Das aktuelle Kästchen ist „in Arbeit“: blauer Rand und ein sanftes Leuchten. */
.crew-stop.now{border-color:var(--blue);box-shadow:0 0 0 4px rgba(159,205,238,.45);animation:nowpulse 2.4s ease-in-out infinite}
@keyframes nowpulse{0%,100%{box-shadow:0 0 0 3px rgba(159,205,238,.35)}50%{box-shadow:0 0 0 6px rgba(159,205,238,.5)}}
.crew.on-dark .crew-stop.now{border-color:var(--sky-2)}
@media (min-width:901px) and (max-width:1099px){
  .check-grid{grid-template-columns:1fr}
  .check-result{position:relative;top:0}
  .js .cr-mini{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:sticky;bottom:12px;z-index:5;margin:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:.75rem .8rem .75rem 1.2rem;box-shadow:0 18px 40px -18px rgba(29,43,54,.6);font-size:.95rem}
  .cr-mini b{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1;margin-right:.3rem}
  .cr-mini a{background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600;font-size:.82rem;border-radius:999px;padding:.45rem .9rem;text-align:center;line-height:1.25;text-wrap:balance;min-width:0;max-width:62%}
  .cr-mini b{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Weit weg vom Bild ruhen die endlosen Animationen einer Szene (core.js setzt .far, mit einer Bildschirmhöhe Abstand). */
.motion .scene.far *,.motion .scene.far *::before,.motion .scene.far *::after{animation-play-state:paused!important}


/* ---------- Tentakel: gestochen wie der Oktopus (assets/brand/tentakel/), eher im Hintergrund und in Bewegung ---------- */
/* Wasser-Bewegung über okto.js: canvas und Bild wie beim großen Oktopus (7 % Rand für schwebende Spitzen) */
.tools-arm canvas,.tools-arm img,.night-arm canvas,.night-arm img{position:absolute;inset:0;width:100%;height:100%;display:block}
.tools-arm img,.night-arm img{inset:7%;width:86%;height:86%}
.tools-arm:not(.gl) canvas,.night-arm:not(.gl) canvas{display:none}
.tools-arm.gl img,.night-arm.gl img{visibility:hidden}

/* Leiste: schlichte runde Punkte, klein und zurückhaltend. Ist ein Abschnitt erledigt, füllt sich der Punkt sanft
   blau mit einem kleinen Haken. */
.crew-stop{z-index:2;width:14px;height:14px;border-radius:50%;background:var(--paper);border:1.5px solid rgba(29,43,54,.2)}
.crew-stop::after{border-radius:50%;background-size:66%;clip-path:none;opacity:0;transition:opacity .5s var(--ease) var(--td,0s)}
.crew-stop.done{border-color:transparent}
.crew-stop.done::after{opacity:.9}
.crew-stop.now{box-shadow:0 0 0 3px rgba(159,205,238,.35);animation:none}
.crew.on-dark .crew-stop{background:var(--night);border-color:rgba(247,245,242,.3)}
.crew.on-dark .crew-stop.done{border-color:transparent}
@media (min-width:761px) and (max-width:1099px){.crew-stop{width:12px;height:12px}}
@media (max-width:760px){.crew-stop{width:8px;height:8px;border-width:1px}.crew-stop.done::after{background-image:none}}
/* Der Punkt bleibt klein, die Trefferfläche (::before) ist auf dem Handy etwa 28 × 30 px groß. */
@media (max-width:760px){button.crew-stop::before{inset:-11px -12px}}
/* Tastaturrahmen der Punkte: auf hellen Szenen Blau, auf dunklen bleibt das Hellblau. */
.crew:not(.on-dark) button.crew-stop:focus-visible{outline-color:var(--blue)}

/* 22:17 Eine Szene: „Musst du nicht mehr.“ antwortet auf den letzten Satz. Hinter dem Satz schweben acht Arme wie ein
   Wasserzeichen, in der Mitte erzählt der Satz vom Oktopus, links und rechts verwandeln sich die Aufgaben. Dann sammeln
   sich die Arme, die Zettel steigen auf, und er selbst taucht auf: „Darf ich mich vorstellen?“ (story.js handsScene).
   Danach kommt sein Ausweis (22:30). */
.s-hands{display:block;padding:0;overflow:clip visible;z-index:1;
  background:radial-gradient(ellipse 55% 40% at 50% 62%,rgba(120,172,212,.14) 0%,rgba(120,172,212,.04) 50%,transparent 75%),var(--bg)}
.s-hands .hands-stage{display:block}
.s-hands .hello-text{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-inline:calc(var(--gutter) + var(--rail));pointer-events:none}
.s-hands .hello-text .big{max-width:none;font-size:clamp(2.3rem,1rem + 3.4vw,4.8rem)}
.s-hands .hello-sub{max-width:24em;margin:1.3rem auto 0;font-family:var(--serif);font-size:clamp(1.3rem,.9rem + 1vw,1.95rem);line-height:1.22;color:var(--on-dark-2);text-wrap:balance;text-shadow:0 0 24px var(--bg),0 0 48px var(--bg)}   /* in der Serifenschrift wie „Jeden Tag. Für …“ um 09:00 */
/* Die Blase, in die alle erledigten Zettel hineinfliegen (story.js handsScene) */
.hands-done{margin:2rem 0 0;display:flex;justify-content:center}
.hands-done span{display:inline-flex;align-items:center;gap:.65rem;background:var(--paper);color:var(--ink);border-radius:22px 22px 22px 6px;padding:.8rem 1.4rem .8rem 1rem;font-size:clamp(1.1rem,1rem + .4vw,1.35rem);font-weight:600;line-height:1.2;box-shadow:0 22px 50px -24px rgba(0,0,0,.65),0 0 38px -10px rgba(255,214,170,.38)}
.hands-done span::before{content:"";flex:none;width:1.35em;height:1.35em;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fdfbf7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat}
.stage-okto{--w:min(74vh,54vw);position:absolute;left:50%;top:17vh;width:var(--w);margin-left:calc(var(--w) / -2);z-index:4}
.stage-okto::before{content:"";position:absolute;inset:-10% -4% 22%;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(255,214,170,.22) 0%,rgba(255,214,170,.08) 36%,rgba(255,214,170,0) 64%)}
.stage-okto .okto-rise{aspect-ratio:1100/979;-webkit-mask-image:linear-gradient(180deg,#000 48%,rgba(0,0,0,.5) 70%,transparent 90%);mask-image:linear-gradient(180deg,#000 48%,rgba(0,0,0,.5) 70%,transparent 90%)}
.stage-okto .dm-hello{right:auto;left:58%;bottom:80%;z-index:4;white-space:normal;width:max-content;max-width:min(19rem,26vw)}
.stage-okto .dm-hello .dm-bubble{font-size:clamp(1.2rem,.9rem + .9vw,1.8rem)}
.stage-okto .dm-hello .dm-bubble{border-radius:22px 22px 22px 6px}
.motion .stage-okto .dm-hello{transform-origin:left bottom}
.s-hands .hands-tasks{z-index:2}
/* Ohne Bewegung steht alles untereinander: Satz, darunter er mit seiner Blase */
.no-motion .s-hands .hands-stage{height:auto;padding-block:34vh 6vh}
.no-motion .s-hands .hello-text{position:relative;inset:auto}
.no-motion .s-hands .stage-okto{position:relative;left:auto;top:auto;margin:16vh auto 0}
@media (max-width:760px){
  .stage-okto{--w:66vw;top:22%}
  .stage-okto .dm-hello{left:auto;right:30%;bottom:92%}
  .stage-okto .dm-hello .dm-bubble{border-radius:22px 22px 6px 22px}
  .motion .stage-okto .dm-hello{transform-origin:right bottom}}
.hello-sea{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.stage-sea{z-index:0}
/* Ohne Pinnen (Handy): erst eine Bildschirmhöhe mit Zetteln und Satz, darunter taucht er auf */
@media (max-width:760px),(max-height:560px){
  .motion .s-hands .hands-stage{height:auto;padding-bottom:6vh}
  .motion .s-hands .hands-stage::before{content:"";display:block;height:100vh;height:100svh}
  .motion .s-hands .hands-tasks,.motion .s-hands .hello-text{bottom:auto;height:100vh;height:100svh}
  .motion .s-hands .stage-okto{position:relative;left:auto;top:auto;margin:2vh auto 0}}
.hello-sea i{position:absolute;left:var(--x);bottom:-40px;width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  border:1.5px solid rgba(191,225,247,.35);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.7) 0 14%,rgba(191,225,247,.16) 45%,rgba(191,225,247,.04) 100%)}
.motion .hello-sea i{animation:bubble-rise var(--t) linear var(--d) infinite,bubble-sway calc(var(--t) / 3) ease-in-out var(--d) infinite alternate}
/* 22:17: glänzende Glaskugeln, die leise schweben, und ein bisschen Glitzer wie auf der Visitenkarte */
.hello-glanz{position:absolute;inset:0;z-index:0;pointer-events:none}
.hello-glanz i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;
  border:1px solid rgba(207,231,248,.42);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 11%,rgba(255,255,255,.4) 26%,rgba(207,231,248,.14) 58%,rgba(207,231,248,.05) 100%);
  box-shadow:inset -2px -3px 6px rgba(142,198,239,.2),0 0 12px rgba(191,225,247,.14)}
.hello-glanz i::after{content:"";position:absolute;right:19%;bottom:15%;width:26%;height:12%;border-radius:50%;background:rgba(255,255,255,.38);transform:rotate(-35deg)}
.motion .hello-glanz i{animation:kugel-schweben var(--t) ease-in-out var(--d) infinite alternate}
@keyframes kugel-schweben{from{transform:translate(0,0)}to{transform:translate(var(--w),-14px)}}
.hello-glanz b{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);transform:translate(-50%,-50%);opacity:.6;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 7%,rgba(207,231,248,.35) 16%,transparent 36%)}
.hello-glanz b::before,.hello-glanz b::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.hello-glanz b::before{width:100%;height:1.6px;background:linear-gradient(90deg,transparent,#fff,transparent)}
.hello-glanz b::after{width:1.6px;height:100%;background:linear-gradient(180deg,transparent,#fff,transparent)}
.motion .hello-glanz b{opacity:0;animation:funkeln var(--t) ease-in-out var(--d) infinite}
@keyframes funkeln{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg)}45%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(25deg)}62%{opacity:.8;transform:translate(-50%,-50%) scale(.85) rotate(32deg)}}
/* Kurzer Übergang aus den Sätzen: die Arme tauchen gleich aus dem Dunkel auf, keine leere Strecke */
.s-voices:not(.s-recall){padding-bottom:4vh}
/* Nacht mit Lampenschein (22:20 und 22:30): dunkel, in der Mitte warmes Licht; Zettel, Ausweis und Blasen leuchten
   darin wie Papier unter der Lampe. Von 21:30 bis 02:13 bleibt es so durchgehend Nacht. */
.s-hands .hands-stage{background:radial-gradient(ellipse 58% 54% at 50% 48%,rgba(255,204,150,.13) 0%,rgba(255,204,150,.05) 45%,transparent 72%)}
.s-hands .hands-tasks li{color:var(--ink);box-shadow:0 22px 50px -24px rgba(0,0,0,.65),0 0 38px -10px rgba(255,214,170,.38)}
/* 23:00 Zeit-Check in der Nacht: dunkel mit Lampenschein, die Ergebniskarte bleibt hell wie Papier unter der Lampe */
.s-check.dark{background:radial-gradient(ellipse 60% 46% at 50% 42%,rgba(255,204,150,.09) 0%,transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--bg) 84%,#16222b 100%)}
.s-check.dark .check-list,.s-check.dark .ci{border-color:rgba(247,245,242,.14)}
.s-check.dark .ci-toggle{color:var(--on-dark)}
.s-check.dark .ci-box{border-color:rgba(247,245,242,.42)}
.s-check.dark .ci.on{background:rgba(191,225,247,.06)}
.s-check.dark .chip{color:var(--on-dark-2);border-color:rgba(247,245,242,.24)}
.s-check.dark .chip:hover{color:var(--on-dark);border-color:var(--sky-2)}
.s-check.dark .chip[aria-checked="true"]{background:var(--sky-2);border-color:var(--sky-2);color:var(--ink)}
.s-check.dark .check-result{color:var(--ink);box-shadow:0 34px 80px -36px rgba(0,0,0,.7),0 0 60px -14px rgba(255,214,170,.3)}
.s-check.dark .check-mark{background:#bfe1f7;opacity:.05}
.s-check .big .dots{color:var(--sky-2);margin-left:.04em}   /* „Hilf mir mal…“ mit den blauen Punkten wie im Logo; die Aufgaben vervollständigen den Satz */
.s-check.dark .check-result .fine,.s-check.dark .check-result .say{color:var(--ink-3)}
.s-check.dark .cr-mini{box-shadow:0 0 0 1px rgba(247,245,242,.16)}
.meet-hello{display:flex;justify-content:center;padding:0 calc(var(--gutter) + var(--rail))}
.meet-okto{position:relative;width:clamp(260px,34vw,480px)}
.meet-okto::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(255,214,170,.3) 0%,rgba(255,214,170,.12) 34%,rgba(255,214,170,0) 64%)}   /* Lampenschein hinter ihm */
.meet-okto .okto-rise{aspect-ratio:1100/979}
.meet-okto .dm-hello{right:auto;left:74%;bottom:80%}
.meet-okto .dm-hello .dm-bubble{border-radius:22px 22px 22px 6px}
.motion .meet-okto .dm-hello{transform-origin:left bottom}
.s-meet .badge{color:var(--ink);box-shadow:0 34px 80px -36px rgba(0,0,0,.7),0 0 60px -14px rgba(255,214,170,.3)}
.s-meet .name-form .chip:not(.go){color:var(--on-dark-2);border-color:rgba(247,245,242,.3)}
.s-meet .name-form .chip:not(.go):hover{color:var(--on-dark);border-color:var(--sky-2)}
.s-meet .name-form .go{background:var(--sky-2);border-color:var(--sky-2);color:var(--ink)}
@media (max-width:760px){.meet-okto{width:62vw;margin-top:4.4rem}.meet-okto .dm-hello{left:auto;right:-6vw;bottom:96%}.meet-okto .dm-hello .dm-bubble{border-radius:22px 22px 6px 22px}.motion .meet-okto .dm-hello{transform-origin:right bottom}}
.hands-stage{position:relative;height:100vh;height:100svh;display:flex;align-items:center}
.hands-tasks{position:absolute;inset:0 0 0 var(--rail);margin:0;padding:0;list-style:none;pointer-events:none}
.hands-tasks li{position:absolute;display:flex;align-items:center;gap:.6rem;background:var(--paper);border-radius:12px;padding:.62rem .95rem;box-shadow:0 18px 40px -24px rgba(29,43,54,.5);font-size:clamp(.9rem,.8rem + .25vw,1.04rem);font-weight:500;line-height:1.2;white-space:nowrap;rotate:var(--r,0deg)}
.hands-tasks li::before{content:"";flex:none;width:.95em;height:.95em;border:1.5px solid var(--blue);border-radius:50%}
/* Die Ebene für die Arme reicht 28vh über die Bühne hinaus und blendet dort weich aus, so enden sie nirgends an einer Kante. */
.hands-sea{position:absolute;left:0;right:0;top:-28vh;bottom:-28vh;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
/* Acht Arme sternförmig um die Mitte (tools/acht-arme.swift), zart wie ein Wasserzeichen hinter dem Satz. Der Wasser-
   Shader lässt sie ständig wogen, beim Scrollen drehen sie sich langsam und werden etwas deutlicher. */
.hands-octo{--s:max(112vw,150vh);position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);opacity:.1;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,transparent 0,transparent 9%,#000 24%);mask-image:radial-gradient(circle,transparent 0,transparent 9%,#000 24%)}
.hands-octo canvas,.hands-octo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.hands-octo img{inset:7%;width:86%;height:86%}
.hands-octo:not(.gl) canvas{display:none}
.hands-octo.gl img{visibility:hidden}
/* Eine Aufgabe verwandelt sich (story.js setzt --d von 0 bis 1): ein Lichtschimmer läuft über den Zettel, das Kästchen
   füllt sich mit dem Haken, aus „Rechnung versenden“ wird „Rechnung erstellt“. */
.hands-tasks li{display:grid;grid-template-columns:auto auto;justify-content:start;
  background:linear-gradient(100deg,transparent calc(var(--d,0) * 150% - 50%),rgba(159,205,238,.5) calc(var(--d,0) * 150% - 25%),transparent calc(var(--d,0) * 150%)),
    color-mix(in srgb,var(--paper),#b9daf3 calc(var(--d,0) * 100%))}
.hands-tasks li::before{grid-row:1;grid-column:1}
.hands-tasks li::after{content:"";grid-row:1;grid-column:1;width:.95em;height:.95em;border-radius:50%;opacity:var(--d,0);scale:calc(.5 + .5 * var(--d,0));
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/90% no-repeat}
.hands-tasks li>span{grid-row:1;grid-column:2}
.hands-tasks .t-open{opacity:calc(1 - var(--d,0))}
.hands-tasks .t-done{opacity:var(--d,0);color:var(--ink);font-weight:600}
.s-hands .inner{position:relative;z-index:3;text-align:center}
.s-hands .big{max-width:8.6em;margin-inline:auto;font-size:clamp(2.6rem,1rem + 4.4vw,6.2rem);text-shadow:0 0 30px var(--bg),0 0 60px var(--bg),0 0 90px var(--bg)}
.s-hands .big>span{display:block}
@media (max-width:760px){
  .hands-tasks{inset:0}
  .hands-tasks li{font-size:.84rem;padding:.48rem .7rem}
  .hands-tasks li:nth-child(n+9){display:none}
  .hands-tasks li:nth-child(1){left:3%!important;top:4%!important}
  .hands-tasks li:nth-child(2){right:3%!important;top:9%!important}
  .hands-tasks li:nth-child(3){left:7%!important;top:14%!important}
  .hands-tasks li:nth-child(4){right:5%!important;top:19%!important}
  .hands-tasks li:nth-child(5){left:3%!important;top:72%!important}
  .hands-tasks li:nth-child(6){right:3%!important;top:77%!important}
  .hands-tasks li:nth-child(7){left:8%!important;top:82%!important}
  .hands-tasks li:nth-child(8){right:6%!important;top:87%!important}
  .s-hands .inner{padding-inline:var(--gutter)}}

/* 22:45 Weißt du noch: die drei Sätze vom Anfang, kleiner oben; darunter groß und mittig die Karte, was dein
   digitaler Mitarbeiter daraus macht. */
.s-recall .inner{text-align:center}
.s-recall .quote{grid-template-columns:minmax(0,1fr);justify-items:center}
.s-recall .quote>p{font-size:clamp(1.7rem,1rem + 2vw,3.2rem);max-width:20em}
.s-recall .quote>span{margin-top:.9rem}
.s-recall .qa{grid-column:1;grid-row:auto;width:min(600px,100%);margin-top:2.2rem;text-align:left;padding:1.6rem 1.8rem 1.25rem;gap:.9rem;font-size:1.06rem}
.s-recall .qa-head{font-size:.74rem}
.s-recall .qa-face{width:26px;height:26px}
.s-recall .qa-title{font-size:1.9rem}
.s-recall .qa-list{gap:.6rem}
.s-recall .qa-list li::before{width:1.25rem;height:1.25rem}
.s-recall .qa-flow .qa-list li+li::after{left:.6rem;top:-.65rem;height:.65rem}
.s-recall .qa-chips i{font-size:.82rem;padding:.34rem .75rem}
.s-recall .qa-ask,.s-recall .qa-answer{font-size:1rem}
.s-recall .qa-foot{font-size:.74rem}
@media (max-width:760px){.s-recall .qa{padding:1.2rem 1.25rem 1rem;font-size:.96rem}.s-recall .qa-title{font-size:1.5rem}}

/* 00:30 Programme: zwei große Arme ragen zart aus der Tiefe zwischen den Blasen auf */
.tools-arm{position:absolute;bottom:-6%;width:min(24vw,320px);aspect-ratio:360/781;opacity:.2}
.tools-arm-l{left:7%;scale:-1 1}
.tools-arm-r{right:7%}
@media (max-width:760px){.tools-arm{width:34vw;opacity:.14}.tools-arm-l{left:-6%}.tools-arm-r{right:-6%}}

/* 02:13 Nachtschicht: großer Arm zart im Hintergrund */
.night-arm{position:absolute;z-index:-1;left:-8%;bottom:4%;width:min(92vw,1500px);aspect-ratio:1325/286;opacity:.1;rotate:-6deg;pointer-events:none}
.night .inner{position:relative}