/* schlafohr Website 2026-10. Gemeinsame Gestaltung für Startseite und Richtungen.
   Werte aus DESIGN.md (Lichtfeld, Runde 5 und 9): Lavendel, Pfirsich, Navy, Young Serif für Überschriften,
   SF Pro für Text, ein Radius (16), eine Kurve. Komponenten reagieren auf ihren Container (cqi),
   damit dieselben Regeln in der Seite und in festen Rahmen (1440, 390) gelten. */

:root{
  --cream:#FBF9F4; --cloud:#FDFCFE;
  --lav050:#F4F2FE; --lav200:#DBCEFD; --lav300:#C6BAFC; --lav400:#ADAEF8; --lav600:#6E64FA; --lav700:#4F46D4;
  --pe200:#FEEEE4; --pe300:#FED5BF; --pe600:#F89757; --pe700:#F08A4F;
  --navy:#0E225D; --navy7:#1A2F70; --night:#02092D; --nightdim:#01041A; --nighttext:#C7BEF2;
  --ok:#5BD89D; --grey:#8B8FB0;
  --serif:"Young Serif", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --r:16px; --ease:cubic-bezier(.32,.72,0,1); --hair:1.5px;
  interpolate-size:allow-keywords;
}
@property --lv{syntax:'<percentage>';inherits:false;initial-value:6%}
@property --sa{syntax:'<angle>';inherits:false;initial-value:0deg}

/* Grundlagen */
.site{container-type:inline-size;container-name:site;position:relative;font-family:var(--sans);color:var(--navy);background:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.site *,.site *::before,.site *::after{box-sizing:border-box}
:where(.site) a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:4px}
:where(.site) a:hover{color:var(--lav700)}
.site img{display:block;max-width:100%}
/* Reset ohne Gewicht: Abstände an Klassen (.proof, .steps, .nicht) gewinnen immer */
:where(.site) :where(h1,h2,h3,p,ol,ul,figure){margin:0;padding:0}
:where(.site) :where(ol,ul){list-style:none}
.wrap{--gx:clamp(20px,5cqi,72px);width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gx);position:relative;z-index:2}

/* Schrift: Young Serif nur für Überschriften, jede endet mit dem Pfirsichpunkt */
.h-hero{font:400 clamp(40px,4.7cqi,70px)/1.04 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.h-sec{font:400 clamp(34px,4.1cqi,60px)/1.05 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.h-word{font:400 clamp(64px,9.6cqi,148px)/.95 var(--serif);letter-spacing:-.03em}
.h-tile{font:400 clamp(30px,2.8cqi,40px)/1.05 var(--serif);letter-spacing:-.025em}
.pt{color:var(--pe600)}
.lead{font:400 clamp(18px,1.45cqi,21px)/1.45 var(--sans);letter-spacing:-.012em;text-wrap:pretty}
.body{font:400 17px/1.5 var(--sans);letter-spacing:-.006em;text-wrap:pretty}
.small{font:500 14px/1.4 var(--sans);font-variant-numeric:tabular-nums}
.mute{opacity:.78}

/* Knöpfe und Store-Abzeichen */
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 24px;border-radius:var(--r);font:600 17px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;transition:background-color .12s var(--ease),color .12s var(--ease),transform .12s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-navy{background:var(--navy);color:var(--cloud)}
.btn-navy:hover{background:var(--lav700);color:var(--cloud)}
.btn-ol{box-shadow:inset 0 0 0 1.5px rgba(14,34,93,.32);color:var(--navy)}
.btn-ol:hover{background:var(--navy);color:var(--cloud)}
.store{display:inline-block;line-height:0;border-radius:12px;text-decoration:none}
.store img{height:54px;width:auto}
.store:hover{opacity:.88}
.store.nobadge{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 18px;border-radius:12px;background:#000;color:#fff;font:600 13px/1.2 var(--sans);line-height:1.2;box-shadow:inset 0 0 0 1px #A6A6A6}
.store.nobadge small{display:block;font-weight:400;font-size:11px;opacity:.7}
.tlink{font:600 16px/1 var(--sans);letter-spacing:-.01em;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}

/* Navigation als Statusbox */
.nav{position:sticky;top:12px;z-index:50;height:56px;margin:12px 0 -68px}
.nav .wrap{height:56px}
.nav-bar{display:flex;align-items:center;gap:28px;height:56px;padding:0 8px 0 14px;border-radius:var(--r);background:rgba(253,252,254,.74);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);box-shadow:inset 0 0 0 1px rgba(14,34,93,.06)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.brand img{width:32px;height:32px}
.brand span{font:400 23px/1 var(--serif);letter-spacing:-.02em;transform:translateY(-1px)}
.nav-links{display:flex;gap:26px;margin-left:auto;font:500 15px/1 var(--sans);letter-spacing:-.005em}
.nav-links a{text-decoration:none;color:rgba(14,34,93,.8)}
.nav-links a:hover{color:var(--lav700)}
.nav-cta{height:40px;padding:0 16px;font-size:15px}
@container site (max-width:900px){.nav-links{display:none}.nav-cta{margin-left:auto}}

/* Lichtfeld: die zwei Kreise des Zeichens als ziehende Farbflächen, darüber Papierkorn */
.lf{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lf .o{position:absolute;border-radius:50%;filter:blur(64px);will-change:transform;transition:background-color .9s var(--ease),opacity .9s var(--ease),filter .9s var(--ease)}
.lf .o1{animation:lfA 19s linear infinite}
.lf .o2{animation:lfB 24s linear infinite;animation-delay:-9s}
.lf .o3{animation:lfC 31s linear infinite;animation-delay:-17s}
.lf .spot{position:absolute;width:64cqi;aspect-ratio:1;left:18cqi;top:-14cqi;border-radius:50%;background:radial-gradient(closest-side,var(--spot,rgba(253,252,254,.4)),transparent);animation:lfS 21s linear infinite;transition:background .9s var(--ease)}
.lf .atem{position:absolute;inset:0;background:radial-gradient(70% 42% at 50% 28%,rgba(244,242,254,.28),rgba(244,242,254,0) 72%);mix-blend-mode:soft-light;animation:atem 10s cubic-bezier(.37,0,.63,1) infinite}
.grain,.mottle{position:absolute;inset:0;pointer-events:none;z-index:1}
.grain{opacity:.5;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .47  0 0 0 0 .42  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.mottle{opacity:.3;mix-blend-mode:soft-light;background-size:100% 100%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='390' height='844' preserveAspectRatio='none'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.5'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>")}
/* In breiten Flächen: dieselbe Wolkenstruktur als nahtlose Kachel, nicht gestreckt */
.site>section>.mottle{opacity:.22;background-size:960px 960px;background-repeat:repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='960' height='960'><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.00625 .00833' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.5'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>")}
@keyframes lfA{0%{transform:translate3d(0,0,0) scale(1);border-radius:50%;animation-timing-function:cubic-bezier(.45,0,.55,1)}22%{transform:translate3d(14%,-10%,0) scale(1.06);border-radius:46% 54% 41% 59%/50% 53% 47% 50%;animation-timing-function:cubic-bezier(.45,0,.55,1)}47%{transform:translate3d(-8%,12%,0) scale(.93);border-radius:53% 47% 38% 62%/58% 59% 41% 42%;animation-timing-function:cubic-bezier(.45,0,.55,1)}73%{transform:translate3d(10%,16%,0) scale(1.04);border-radius:39% 61% 51% 49%/53% 62% 38% 47%;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translate3d(0,0,0) scale(1);border-radius:50%}}
@keyframes lfB{0%{transform:translate3d(0,0,0) scale(1);border-radius:50%;animation-timing-function:cubic-bezier(.45,0,.55,1)}26%{transform:translate3d(-16%,8%,0) scale(1.08);border-radius:40% 60% 51% 49%/60% 43% 57% 40%;animation-timing-function:cubic-bezier(.45,0,.55,1)}51%{transform:translate3d(-4%,-14%,0) scale(.92);border-radius:58% 42% 49% 51%/39% 62% 38% 61%;animation-timing-function:cubic-bezier(.45,0,.55,1)}77%{transform:translate3d(12%,6%,0) scale(1.03);border-radius:47% 53% 57% 43%/53% 51% 49% 47%;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translate3d(0,0,0) scale(1);border-radius:50%}}
@keyframes lfC{0%{transform:translate3d(0,0,0) scale(1);border-radius:50%;animation-timing-function:cubic-bezier(.45,0,.55,1)}30%{transform:translate3d(18%,-12%,0) scale(1.1);border-radius:46% 54% 60% 40%/55% 51% 49% 45%;animation-timing-function:cubic-bezier(.45,0,.55,1)}62%{transform:translate3d(-14%,-6%,0) scale(.9);border-radius:56% 44% 43% 57%/52% 46% 54% 48%;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translate3d(0,0,0) scale(1);border-radius:50%}}
@keyframes lfS{0%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.45,0,.55,1)}25%{transform:translate3d(-20%,30%,0);animation-timing-function:cubic-bezier(.45,0,.55,1)}55%{transform:translate3d(24%,8%,0);animation-timing-function:cubic-bezier(.45,0,.55,1)}80%{transform:translate3d(-6%,-12%,0);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translate3d(0,0,0)}}
@keyframes atem{0%{opacity:0}40%{opacity:1}100%{opacity:0}}

/* Telefon: echte App-Zustände auf dem Raster aus DESIGN.md (390 x 844), skaliert über --s.
   Klassen und --s gehören an einen umgebenden div, so-phone selbst trägt nur state. */
so-phone{display:block;position:relative;flex:none;width:calc(390px*var(--s,1));height:calc(844px*var(--s,1));--dur:.32s}
so-phone .ph{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--s,1));transform-origin:0 0;border-radius:56px;box-shadow:0 0 0 9px #16182A,0 0 0 10px #2A2C40,0 50px 90px -30px rgba(2,9,45,.5)}
so-phone .scr{position:absolute;inset:0;border-radius:56px;overflow:hidden;clip-path:inset(0 round 56px);isolation:isolate;background:var(--lav700);color:var(--cloud);font-family:var(--sans);-webkit-font-smoothing:antialiased;transition:background-color var(--dur) var(--ease);--spc:rgba(219,206,253,.14)}
so-phone[state="wach"] .scr{background:var(--pe300);--spc:rgba(253,252,254,.5)}
so-phone[state="getrennt"] .scr,so-phone[state="baby"] .scr{background:var(--navy);--spc:rgba(198,186,252,.14)}
so-phone[state="dim"] .scr{background:var(--nightdim);--spc:transparent}
so-phone .L{opacity:0;transition:opacity var(--dur) var(--ease)}
so-phone[state="ruhig"] .L.ruhig,so-phone[state="geraeusch"] .L.geraeusch,so-phone[state="wach"] .L.wach,so-phone[state="getrennt"] .L.getrennt,so-phone[state="baby"] .L.baby,so-phone[state="dim"] .L.dim{opacity:1}
so-phone .og{position:absolute;inset:0;z-index:0}
so-phone .po{position:absolute;border-radius:50%;filter:blur(46px);will-change:transform}
so-phone .pd1{animation:pd1 19s linear infinite}
so-phone .pd2{animation:pd2 24s linear infinite;animation-delay:-8s}
so-phone .pd3{animation:pd3 31s linear infinite;animation-delay:-15s}
so-phone .warm{animation:pd2 24s linear infinite,warm 5.6s cubic-bezier(.37,0,.63,1) infinite}
so-phone .glim{animation:glim 12s cubic-bezier(.37,0,.63,1) infinite}
so-phone .pspot{position:absolute;width:640px;height:640px;left:-125px;top:102px;border-radius:50%;z-index:1;background:radial-gradient(closest-side,var(--spc),transparent);animation:pspot 19s linear infinite}
so-phone .grain{opacity:.55}
so-phone .mottle{opacity:.32}
so-phone .z{position:absolute;z-index:3}
so-phone .bar{position:absolute;top:0;left:0;right:0;height:54px;padding:0 34px 0 42px;display:flex;align-items:center;justify-content:space-between;font:600 16px/1 var(--sans);letter-spacing:-.01em;z-index:5;color:var(--cloud)}
so-phone[state="wach"] .bar{color:var(--navy)}
so-phone[state="dim"] .bar{opacity:.16}
so-phone .bar .t{position:relative;display:block;width:60px;height:16px}
so-phone .bar .t span{position:absolute;left:0;top:0}
so-phone .bt{width:25px;height:12px;border-radius:4px;border:1.2px solid currentColor;opacity:.85;position:relative}
so-phone .bt::after{content:"";position:absolute;left:2px;top:2px;bottom:2px;width:15px;border-radius:2px;background:currentColor}
so-phone .isl{position:absolute;top:11px;left:133px;width:124px;height:36px;border-radius:20px;background:#000;z-index:6}
so-phone .hm{position:absolute;bottom:8px;left:128px;width:134px;height:5px;border-radius:3px;background:var(--cloud);opacity:.8;z-index:6;transition:background-color var(--dur),opacity var(--dur)}
so-phone[state="wach"] .hm{background:var(--navy);opacity:1}
so-phone[state="dim"] .hm{opacity:.1}
so-phone .top{position:absolute;left:0;right:0;top:63px;height:40px;z-index:4}
so-phone .tag{position:absolute;left:50%;top:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:16px;background:rgba(2,9,45,.32);color:var(--cloud);font:500 14px/1 var(--sans);letter-spacing:-.003em;white-space:nowrap}
so-phone .tag.lt{background:rgba(14,34,93,.1);color:var(--navy)}
so-phone .dt{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;position:relative}
so-phone .dt::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:hof 2.4s cubic-bezier(.22,.61,.36,1) infinite}
so-phone .dt.off::after{display:none}
so-phone .dt.nv{background:var(--navy)}
so-phone .dt.gr{background:var(--grey)}
so-phone .dt.lv{background:var(--lav300)}
so-phone .dt.pe{background:var(--pe600)}
so-phone .port{position:absolute;left:70px;top:118px;width:250px;height:250px;border-radius:50%;z-index:3}
so-phone .img{position:absolute;inset:0;border-radius:50%;background-size:cover;background-position:center 50%;box-shadow:inset 0 0 0 1.5px rgba(253,252,254,.35)}
so-phone .img.s{background-image:url(assets/cam-schlaeft.webp)}
so-phone .img.w{background-image:url(assets/cam-wach.webp)}
so-phone .img.fz{filter:grayscale(1) brightness(.78) contrast(.9)}
so-phone .ring{position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from -90deg,var(--rc) 0 var(--lv),var(--rt) var(--lv) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw)),#000 calc(100% - var(--rw)));mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw)),#000 calc(100% - var(--rw)))}
so-phone .ring.r1{--rc:var(--cloud);--rt:rgba(253,252,254,.16);--rw:2px;animation:lvR 9.6s linear infinite}
so-phone .ring.r2{--rc:var(--cloud);--rt:rgba(253,252,254,.16);--rw:3.5px;animation:lvG 4s linear infinite}
so-phone .ring.r3{--rc:var(--navy);--rt:rgba(14,34,93,.14);--rw:5px;animation:lvA 2.8s linear infinite}
so-phone .welle{position:absolute;inset:-14px;border-radius:50%;box-shadow:inset 0 0 0 12px rgba(253,252,254,.78);filter:blur(6px);opacity:0;animation:welle 5.6s cubic-bezier(.22,.61,.36,1) infinite}
so-phone .welle.b{animation-delay:2.8s}
so-phone .dring{position:absolute;inset:-14px;border-radius:50%;background:rgba(199,190,242,.32);-webkit-mask:repeating-conic-gradient(#000 0 1.4deg,transparent 1.4deg 4.5deg),radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));-webkit-mask-composite:source-in;mask:repeating-conic-gradient(#000 0 1.4deg,transparent 1.4deg 4.5deg),radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));mask-composite:intersect}
so-phone .dring.such{background:conic-gradient(from var(--sa),rgba(219,206,253,0) 0 62%,rgba(219,206,253,.95) 96%,rgba(219,206,253,0) 100%);animation:such 4.8s linear infinite}
so-phone .stamp{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);height:26px;padding:0 11px;border-radius:16px;background:rgba(2,9,45,.6);color:var(--cloud);font:500 12px/26px var(--sans);white-space:nowrap}
so-phone .nlicht{position:absolute;inset:-70px;border-radius:50%;background:radial-gradient(closest-side,rgba(198,186,252,.38),rgba(198,186,252,0))}
so-phone .mark{position:absolute;left:105px;top:153px;width:180px;height:180px;opacity:.16}
so-phone .clock{position:absolute;left:0;right:0;top:440px;text-align:center;font:400 17px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--cloud);opacity:.3}
so-phone .word{position:absolute;left:28px;right:28px;top:440px;z-index:3;text-align:center;font:400 56px/1 var(--serif);letter-spacing:-.025em;white-space:nowrap}
so-phone .word .pt{color:var(--pe600)}
so-phone .sub{position:absolute;left:28px;right:28px;top:510px;z-index:3;text-align:center;font:400 17px/1.35 var(--sans);letter-spacing:-.006em;text-wrap:balance}
so-phone .hint{position:absolute;left:20px;right:20px;bottom:108px;height:56px;border-radius:16px;background:rgba(2,9,45,.32);overflow:hidden;clip-path:inset(0 round 16px);z-index:3;color:var(--cloud)}
so-phone .hint.lt{background:rgba(14,34,93,.08);color:var(--navy)}
so-phone .hint .h{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 16px;font:500 14px/1.3 var(--sans);white-space:nowrap}
so-phone .hint .h b{font-weight:600;margin-left:auto;color:rgba(253,252,254,.72)}
so-phone .hint.n3 .h{padding-right:34px;animation:h3 13.5s cubic-bezier(.65,0,.35,1) infinite}
so-phone .hint.n3 .k1{animation-delay:-9s}
so-phone .hint.n3 .k2{animation-delay:-4.5s}
so-phone .hint .pg{position:absolute;right:13px;top:50%;display:flex;flex-direction:column;gap:4px;transform:translateY(-50%)}
so-phone .hint .pg i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.28;animation:p3 13.5s cubic-bezier(.65,0,.35,1) infinite}
so-phone .hint .pg i:nth-child(2){animation-delay:-9s}
so-phone .hint .pg i:nth-child(3){animation-delay:-4.5s}
so-phone .acts{position:absolute;left:20px;right:20px;bottom:44px;height:56px;display:flex;gap:8px;z-index:3}
so-phone .pb{height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font:600 17px/1 var(--sans);letter-spacing:-.01em;flex:1}
so-phone .pb.cl{background:var(--cloud);color:var(--navy)}
so-phone .pb.nv{background:var(--navy);color:var(--cloud)}
so-phone .pb.ol{box-shadow:inset 0 0 0 1.5px rgba(253,252,254,.42);color:var(--cloud)}
so-phone .pb.oln{box-shadow:inset 0 0 0 1.5px rgba(14,34,93,.32);color:var(--navy)}
so-phone .more{width:56px;height:56px;flex:none;border-radius:16px;box-shadow:inset 0 0 0 1.5px rgba(253,252,254,.42);display:flex;align-items:center;justify-content:center;gap:3px}
so-phone .more i{width:3.5px;height:3.5px;border-radius:50%;background:var(--cloud)}
@keyframes pd1{0%{transform:translate3d(0,0,0) scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}25%{transform:translate3d(60px,-70px,0) scale(.94);animation-timing-function:cubic-bezier(.45,0,.55,1)}55%{transform:translate3d(-40px,60px,0) scale(1.07);animation-timing-function:cubic-bezier(.45,0,.55,1)}80%{transform:translate3d(30px,30px,0) scale(.97);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes pd2{0%{transform:translate3d(0,0,0) scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}30%{transform:translate3d(-60px,-50px,0) scale(1.06);animation-timing-function:cubic-bezier(.45,0,.55,1)}60%{transform:translate3d(50px,-90px,0) scale(.93);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes pd3{0%{transform:translate3d(0,0,0) scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}35%{transform:translate3d(-70px,-40px,0) scale(1.1);animation-timing-function:cubic-bezier(.45,0,.55,1)}70%{transform:translate3d(40px,-80px,0) scale(.92);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes pspot{0%{transform:translate3d(95px,-246px,0);animation-timing-function:cubic-bezier(.45,0,.55,1)}30%{transform:translate3d(-119px,169px,0);animation-timing-function:cubic-bezier(.45,0,.55,1)}62%{transform:translate3d(-156px,-141px,0);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translate3d(95px,-246px,0)}}
@keyframes warm{0%,100%{opacity:.86}35%{opacity:1}}
@keyframes glim{0%,100%{opacity:.22}50%{opacity:.38}}
@keyframes hof{0%{transform:scale(1);opacity:.55}100%{transform:scale(3);opacity:0}}
@keyframes lvR{0%{--lv:4%}12%{--lv:8%}25%{--lv:6.5%}40%{--lv:5.6%}55%{--lv:8.4%}70%{--lv:6%}85%{--lv:9.6%}100%{--lv:4%}}
@keyframes lvG{0%{--lv:42%}15%{--lv:56%}30%{--lv:62%}45%{--lv:48%}60%{--lv:36%}75%{--lv:58%}90%{--lv:52%}100%{--lv:42%}}
@keyframes lvA{0%{--lv:85%}15%{--lv:92%}30%{--lv:88%}45%{--lv:95%}60%{--lv:84%}75%{--lv:90%}90%{--lv:96%}100%{--lv:85%}}
@keyframes welle{0%{transform:scale(.98) rotate(0deg);border-radius:50%;opacity:0}18%{opacity:.95}50%{border-radius:47% 53% 52% 48%/53% 47% 53% 47%}100%{transform:scale(1.24) rotate(40deg);border-radius:52% 48% 47% 53%/48% 52% 48% 52%;opacity:0}}
@keyframes such{to{--sa:360deg}}
@keyframes h3{0%,28.1%{transform:translateY(0);opacity:1;filter:blur(0)}33.3%{transform:translateY(-100%);opacity:0;filter:blur(3px)}33.31%,94.8%{transform:translateY(100%);opacity:0;filter:blur(3px)}100%{transform:translateY(0);opacity:1;filter:blur(0)}}
@keyframes p3{0%,30%{opacity:.95}34%,96%{opacity:.28}100%{opacity:.95}}

/* 1 Einstieg */
.hero{position:relative;overflow:hidden;background:var(--lav300);color:var(--navy);padding:calc(68px + clamp(32px,4cqi,72px)) 0 0}
.hero .lf .o1{width:64cqi;height:64cqi;left:-14cqi;top:-24cqi;background:var(--lav050);opacity:.95}
.hero .lf .o2{width:44cqi;height:44cqi;left:60cqi;top:22%;background:var(--lav400);opacity:.85}
.hero .lf .o3{width:20cqi;height:20cqi;left:42cqi;top:62%;background:var(--pe300);opacity:.75}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,4cqi,72px);align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px;max-width:640px}
.kicker{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:var(--r);background:rgba(14,34,93,.09);font:500 14px/1 var(--sans);white-space:nowrap}
.kicker i{width:7px;height:7px;border-radius:50%;background:var(--lav700);flex:none}
.cta-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:4px}
.fine{font:500 14px/1.45 var(--sans);color:rgba(14,34,93,.76);text-wrap:pretty}
/* Zwei Telefone: Babystation hinten mit Etikett oben, Eltern-iPhone vorn mit Etikett unten */
.duo{--s:.58;position:relative;width:calc(390px*var(--s)*1.62);height:calc(844px*var(--s)*1.12 + 92px);justify-self:center}
.duo .back{position:absolute;left:0;top:46px}
.duo .front{position:absolute;right:0;top:calc(46px + 844px*var(--s)*.12)}
.duo .lbl{position:absolute;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--r);background:rgba(253,252,254,.6);font:500 13px/1 var(--sans);white-space:nowrap}
.duo .lbl i{width:6px;height:6px;border-radius:50%;flex:none}
.duo .back .lbl{left:0;top:-46px}
.duo .front .lbl{right:0;top:calc(844px*var(--s) + 14px)}
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin-top:clamp(40px,4cqi,64px);border-top:var(--hair) solid rgba(14,34,93,.16)}
.proof li{padding:22px 0 30px;display:flex;flex-direction:column;gap:6px}
.proof b{font:600 17px/1.3 var(--sans);letter-spacing:-.01em}
.proof span{font:400 14px/1.45 var(--sans);color:rgba(14,34,93,.76)}
@container site (max-width:1180px){.duo{--s:.52}}
@container site (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}.duo{--s:.5;margin-top:8px}.proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container site (max-width:520px){.duo{--s:.42}.proof{grid-template-columns:minmax(0,1fr)}.proof li{padding:16px 0 18px}.store img,.store.nobadge{height:48px}}

/* Abschnitte allgemein */
.sec{position:relative;padding:clamp(80px,9cqi,152px) 0;overflow:hidden}
.sec-head{display:flex;flex-direction:column;gap:20px;max-width:760px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6cqi,112px);align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pic{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--pe200)}
.pic img{width:100%;height:100%;object-fit:cover}
@container site (max-width:900px){.split,.split.rev{grid-template-columns:minmax(0,1fr)}.split .pic{max-width:440px}.split.rev .pic{order:-1}}

/* 2 Einrichten */
.setup{background:var(--cream)}
.steps{display:flex;flex-direction:column;margin-top:40px}
.steps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:24px 0 26px;border-top:var(--hair) solid rgba(14,34,93,.12)}
.steps li:last-child{border-bottom:var(--hair) solid rgba(14,34,93,.12)}
.steps .n{font:500 14px/1.6 var(--sans);font-variant-numeric:tabular-nums;color:rgba(14,34,93,.6)}
.steps h3{font:600 17px/1.35 var(--sans);letter-spacing:-.01em;margin-bottom:6px}
.steps p{font:400 17px/1.5 var(--sans);color:rgba(14,34,93,.8);text-wrap:pretty}

/* 3 Eine Nacht: Feld und Telefon wechseln mit dem Kapitel */
.nacht{position:relative;overflow:clip;background:var(--lav700);color:var(--cloud);transition:background-color .9s var(--ease),color .9s var(--ease)}
.nacht .lf .o1{width:58cqi;height:58cqi;left:-16cqi;top:4%;background:var(--lav400);opacity:.7}
.nacht .lf .o2{width:50cqi;height:50cqi;left:52cqi;top:38%;background:var(--navy7);opacity:.9}
.nacht .lf .o3{width:24cqi;height:24cqi;left:30cqi;top:74%;background:var(--pe600);opacity:.28}
.nacht[data-ch="geraeusch"] .lf .o3{opacity:.5}
.nacht[data-ch="wach"]{background:var(--pe300);color:var(--navy)}
.nacht[data-ch="wach"] .lf .o1{background:var(--pe200);opacity:.9}
.nacht[data-ch="wach"] .lf .o2{background:var(--pe600);opacity:.85}
.nacht[data-ch="wach"] .lf .o3{background:var(--lav400);opacity:.6}
.nacht[data-ch="getrennt"]{background:var(--navy)}
.nacht[data-ch="getrennt"] .lf .o1{background:var(--lav600);opacity:.4;filter:blur(64px) saturate(.4)}
.nacht[data-ch="getrennt"] .lf .o2{background:var(--navy7);opacity:.7}
.nacht[data-ch="getrennt"] .lf .o3{background:var(--pe600);opacity:.22;filter:blur(64px) saturate(.3)}
.nacht[data-ch="dim"]{background:var(--nightdim);color:var(--nighttext)}
.nacht[data-ch="dim"] .lf .o1{background:var(--lav700);opacity:.22}
.nacht[data-ch="dim"] .lf .o2{background:var(--night);opacity:.9}
.nacht[data-ch="dim"] .lf .o3{background:var(--pe600);opacity:.1}
.nacht[data-ch="dim"]>.grain{opacity:.25}
.nacht[data-ch="dim"]>.mottle{opacity:.08}
.nacht-head{padding:clamp(88px,9cqi,152px) 0 clamp(24px,3cqi,48px);display:flex;flex-direction:column;gap:20px;max-width:720px}
.nacht-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6cqi,120px)}
.chapters{display:flex;flex-direction:column}
.ch{min-height:86svh;display:flex;flex-direction:column;justify-content:center;gap:24px;max-width:600px;opacity:.3;transition:opacity .6s var(--ease)}
.nacht[data-ch="ruhig"] .ch[data-chapter="ruhig"],.nacht[data-ch="geraeusch"] .ch[data-chapter="geraeusch"],.nacht[data-ch="wach"] .ch[data-chapter="wach"],.nacht[data-ch="getrennt"] .ch[data-chapter="getrennt"],.nacht[data-ch="dim"] .ch[data-chapter="dim"]{opacity:1}
.ch-time{display:inline-flex;align-items:center;gap:10px;width:fit-content;height:40px;padding:0 16px;border-radius:var(--r);background:rgba(2,9,45,.28);font:500 14px/1 var(--sans);font-variant-numeric:tabular-nums}
.nacht[data-ch="wach"] .ch-time{background:rgba(14,34,93,.1)}
.ch-time i{width:7px;height:7px;border-radius:50%;flex:none}
.ch .lead{max-width:540px}
.nacht[data-ch="getrennt"] .h-word{color:var(--lav200)}
.ch-phone{display:none}
.stick-col{position:relative}
.stick{--s:.62;position:sticky;top:calc(50svh - 844px*.62/2);padding-bottom:12svh}
.stick so-phone{--dur:.6s}
.nacht-end{height:14svh}
@container site (max-width:900px){.nacht-grid{grid-template-columns:minmax(0,1fr)}.stick-col{display:none}.ch{min-height:auto;padding:56px 0;opacity:1}.ch-phone{display:block;--s:.52;margin-top:8px}}

/* 4 Morgen und Privatsphäre */
.dawn{height:clamp(160px,22cqi,320px);background:linear-gradient(180deg,var(--nightdim) 0%,var(--navy7) 28%,var(--lav300) 62%,var(--pe200) 84%,var(--cream) 100%);position:relative}
.morgen{background:var(--cream);padding-top:clamp(40px,4cqi,72px)}
.nicht{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:16px}
.nicht li{padding:20px 0 22px;border-top:var(--hair) solid rgba(14,34,93,.12);display:flex;flex-direction:column;gap:6px}
.nicht b{font:600 17px/1.3 var(--sans);letter-spacing:-.01em}
.nicht span{font:400 15px/1.45 var(--sans);color:rgba(14,34,93,.78);text-wrap:pretty}
@container site (max-width:520px){.nicht{grid-template-columns:minmax(0,1fr)}}

/* 5 Preis */
.preis{background:var(--lav050)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:48px}
.tile{border-radius:var(--r);padding:clamp(28px,3cqi,44px);display:flex;flex-direction:column;gap:18px;background:var(--cloud);min-height:340px}
.tile.full{background:var(--lav700);color:var(--cloud)}
.tile .price{font:600 clamp(40px,4cqi,56px)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile .price small{font:500 17px/1 var(--sans);letter-spacing:-.01em;opacity:.8;margin-left:6px}
.tile .body{opacity:.86;max-width:460px}
.tile .tf{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
@container site (max-width:760px){.tiles{grid-template-columns:minmax(0,1fr)}.tile{min-height:0}}

/* 6 Fragen */
.faq{background:var(--cream)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6cqi,112px);align-items:start}
.faq-side{position:sticky;top:100px;display:flex;flex-direction:column;gap:32px}
.faq-side .pic{max-width:340px}
.qa{border-top:var(--hair) solid rgba(14,34,93,.12)}
.qa:last-child{border-bottom:var(--hair) solid rgba(14,34,93,.12)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font:600 17px/1.35 var(--sans);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--lav700)}
.qa summary .pm{position:relative;width:16px;height:16px;flex:none}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .32s var(--ease)}
.qa summary .pm::after{transform:rotate(90deg)}
.qa[open] summary .pm::after{transform:rotate(0deg)}
.qa .ans{padding:0 48px 24px 0;font:400 17px/1.5 var(--sans);color:rgba(14,34,93,.8);text-wrap:pretty}
.qa::details-content{block-size:0;overflow:hidden;transition:block-size .32s var(--ease),content-visibility .32s allow-discrete}
.qa[open]::details-content{block-size:auto}
@container site (max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr)}.faq-side{position:static}.faq-side .pic{display:none}}

/* 7 Gute Nacht und Fuss */
.gn{position:relative;overflow:hidden;background:var(--navy);color:var(--cloud);text-align:center;padding:clamp(96px,10cqi,168px) 0 clamp(80px,8cqi,128px)}
.gn .lf .o1{width:46cqi;height:46cqi;left:-10cqi;top:-12cqi;background:var(--lav700);opacity:.95}
.gn .lf .o2{width:42cqi;height:42cqi;left:62cqi;top:30%;background:var(--navy7);opacity:.9}
.gn .lf .o3{width:22cqi;height:22cqi;left:44cqi;top:64%;background:var(--pe600);opacity:.3}
.gn .wrap{display:flex;flex-direction:column;align-items:center;gap:28px}
.gn .lead{max-width:560px;color:rgba(253,252,254,.9)}
.umlauf{width:clamp(120px,12cqi,168px);height:auto;overflow:visible}
.umlauf .big{transform-box:view-box;transform-origin:117.13px 115.13px;animation:uBig .7s var(--ease) both}
.umlauf .small{transform-box:view-box;transform-origin:117.13px 115.13px;animation:uOrbit 2.7s cubic-bezier(.3,0,.12,1) both}
.umlauf .lens{animation:uFade .5s 2.45s both}
.umlauf .lid{animation:uFade .5s 2.7s both}
.umlauf .lash{animation:uLash .3s both}
.umlauf .lash:nth-of-type(1){animation-delay:3s}.umlauf .lash:nth-of-type(2){animation-delay:3.07s}.umlauf .lash:nth-of-type(3){animation-delay:3.14s}.umlauf .lash:nth-of-type(4){animation-delay:3.21s}.umlauf .lash:nth-of-type(5){animation-delay:3.28s}
.umlauf:not(.play) *{animation-play-state:paused}
@keyframes uBig{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes uOrbit{from{transform:rotate(-250deg)}to{transform:none}}
@keyframes uFade{from{opacity:0}to{opacity:1}}
@keyframes uLash{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.sfoot{background:var(--night);color:rgba(253,252,254,.72);padding:40px 0 48px}
.sfoot .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.sfoot .brand{color:var(--cloud)}
.sfoot nav{display:flex;gap:24px;flex-wrap:wrap;font:500 14px/1 var(--sans)}
.sfoot nav a{text-decoration:none}
.sfoot nav a:hover{color:var(--cloud)}

/* Bewegung beim Scrollen, nur wo der Browser es kann und Bewegung erwünscht ist */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
    .pic.rv img{animation:pz linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes rv{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pz{from{transform:scale(1.08)}to{transform:scale(1)}}

/* Bewegung reduzieren: jedes Bild endet in seinem fertigen Zustand */
@media (prefers-reduced-motion:reduce){
  .site *,.site *::before,.site *::after{animation:none!important;transition-duration:.01s!important}
  so-phone .hint.n3 .h:not(.k0),so-phone .hint .pg{display:none}
}

/* Ergänzungen für die echte Seite, nicht im Claude-Design-Entwurf: eigene Schrift statt Google Fonts,
   Marke als Lockup aus dem Kit, Hinweis bis zum Store-Start, Textseiten (Datenschutz, Impressum, Support).
   build.py hängt diese Datei an site.css an. Nur Tokens aus site.css, keine eigenen Farbwerte. */

@font-face{font-family:"Young Serif";src:url(fonts/young-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

html{scroll-behavior:smooth}
body{margin:0;background:var(--cream)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Marke: ein Bild aus dem Kit, nie Zeichen plus Text */
.brand img.lockup{width:auto;height:34px;display:block}

/* Bis zum Store-Start steht statt des Badges ein ruhiger Hinweis, kein Link */
.soon{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 20px;border-radius:var(--r);box-shadow:inset 0 0 0 var(--hair) rgba(14,34,93,.32);font:600 16px/1 var(--sans);letter-spacing:-.01em;color:var(--navy);white-space:nowrap}
.soon i{width:8px;height:8px;border-radius:50%;background:var(--pe600);flex:none}
.gn .soon{color:var(--cloud);box-shadow:inset 0 0 0 var(--hair) rgba(253,252,254,.4)}
.tile.full .soon{color:var(--cloud);box-shadow:inset 0 0 0 var(--hair) rgba(253,252,254,.4)}
@container site (max-width:520px){.soon{height:48px}}

/* Sichtbarer Fokus für Tastatur */
.site a:focus-visible,.site summary:focus-visible{outline:2px solid var(--lav700);outline-offset:3px;border-radius:6px}
.sfoot a:focus-visible{outline-color:var(--lav300)}

/* Textseiten */
.doc{position:relative;padding:clamp(132px,12cqi,184px) 0 clamp(88px,8cqi,136px);background:var(--cream)}
.doc .wrap{max-width:860px}
.doc .h-sec{margin-bottom:16px}
.doc .stand{font:500 14px/1.4 var(--sans);color:rgba(14,34,93,.7)}
.doc .intro{margin-top:28px}
.doc h2{font:600 21px/1.3 var(--sans);letter-spacing:-.012em;margin:52px 0 14px}
.doc h3{font:600 17px/1.35 var(--sans);letter-spacing:-.01em;margin:28px 0 8px}
.doc p,.doc li{font:400 17px/1.55 var(--sans);letter-spacing:-.006em;color:rgba(14,34,93,.86);text-wrap:pretty}
.doc p+p{margin-top:12px}
.doc ul{margin-top:12px}
.doc ul+p{margin-top:12px}
.doc li{position:relative;padding-left:22px}
.doc li+li{margin-top:8px}
.doc li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--lav700)}
.doc a{color:var(--lav700)}
.doc a:hover{color:var(--navy)}
.doc b{font-weight:600;color:var(--navy)}
.doc .kurz{margin-top:32px;padding:clamp(22px,3cqi,32px);border-radius:var(--r);background:var(--lav050)}
.doc .kurz h2{margin-top:0}
.doc .sprache{margin-top:80px;padding-top:44px;border-top:var(--hair) solid rgba(14,34,93,.12)}
.doc .ende{margin-top:40px}