/* Oberer Bereich (Matteo 03.11.2026): Blender-Gerät mit echtem App-Bildschirm, Intro, Hell/Dunkel per Umschalter, Start hell.
   Bilder aus Stunden-App/Konzept/Bilder_2026-11-04_Werbeseite_Animation/blender (geraet.py). */
.hero .marke-text,.hero .ring{display:none}
.hero{min-height:900px;padding-top:140px}
.hero::after{content:'';position:absolute;left:0;right:0;top:91%;height:1px}
.hero .lead{font-size:clamp(19px,1.7vw,24px)}
.hero .vertrauen{gap:22px;font-size:14px;margin-top:48px}
.hero h1 .zeile{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .zeile>span{display:inline-block}
.hero h1 .schimmer{background:linear-gradient(100deg,currentColor 38%,var(--schimmer,#5cc394) 50%,currentColor 62%) no-repeat;background-size:320% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Knöpfe: schwarzer Hauptknopf mit Pfeil im Kreis, „So läuft ein Tag“ als Textlink */
/* Knöpfe in klarem Glas (Matteo 03.11.2026: „richtig, richtig cleanen Glas-Look“), je Thema eigene Glasfarbe */
.hero{--glas:linear-gradient(180deg,#ffffffc4,#ffffff59);--glas-rand:#ffffffe6;--glas-schatten:0 0 0 1px #16191a0f,inset 0 1px 0 #fff,0 12px 32px -14px #14181c40;--glas-hover:#ffffffd9}
.hero .knopf.haupt{min-height:60px;padding:8px 8px 8px 28px;gap:18px;font-size:17px}
.hero :is(.knopf.haupt,.play){color:var(--ink);background:var(--glas);border:1px solid var(--glas-rand);box-shadow:var(--glas-schatten);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);transition:background .2s,transform .2s}
.hero .knopf.haupt:hover,.tag-link:hover .play{background:var(--glas-hover)}
.pfeil{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--akzent);color:#fff}
.pfeil svg{width:20px;height:20px;stroke-width:2}
.tag-link{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 6px;font:600 17px Plex,sans-serif;color:inherit;text-decoration:none}
.play{display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.play svg{width:18px;height:18px;fill:currentColor;stroke:none;margin-left:2px}

/* iPhone-Statusleiste mit Insel (Matteo 03.11.2026: „aussieht wie ein iPhone“); Maße in Bildschirm-px (375 breit),
   Ecke 52,5 px = 47 px bei 336 px Breite wie im Blender-Gerät */
.app-ui .ios-leiste{flex:none;position:relative;height:50px;display:flex;align-items:center;justify-content:space-between;padding:4px 24px 0 36px;
  font:600 16px/1 Plex,sans-serif;letter-spacing:-.01em;background:var(--glas)}
.app-ui .ios-insel{position:absolute;left:50%;top:11px;width:120px;height:35px;margin-left:-60px;border-radius:18px;background:#000}
.app-ui .ios-symbole{width:68px;height:12px;flex:none}
.app-ui .ios-leiste+.app-kopf{padding-top:.35rem}
.app-ui .ios-leiste~.app-mobile-nav{position:relative;padding-bottom:22px}
.app-ui .ios-leiste~.app-mobile-nav::after{content:'';position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:currentColor;opacity:.9}

/* Gerät: Blender-Endbild als Rahmen, echter App-Bildschirm darin (Bildschirm 336×708 CSS-px, Ecke 28,7 px).
   Rahmen und Intro-Canvas teilen dieselbe Box: 199,14 % × 132,73 % der Gerätebox, mittig (laut Blender-Bildschirmrechteck). */
.product-stage{height:800px;zoom:.9}
.phone{width:385.4px;padding:31.4px 24.7px;border-radius:0;background:url('assets/hero/rahmen.webp') center/199.14% 132.73% no-repeat;box-shadow:none;top:-30px;filter:drop-shadow(0 40px 40px rgb(20 24 28 / calc(.25 * var(--schatten,1))))}
.phone::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.phone::after{content:'';position:absolute;inset:31.4px 24.7px;z-index:3;border-radius:47px;pointer-events:none;
  background:linear-gradient(118deg,#ffffff1c 0%,#ffffff08 26%,transparent 38%)}
.phone-screen{position:relative;z-index:2;border-radius:52.5px}
.product-stage::before{content:'';position:absolute;left:50%;top:770px;width:385px;height:160px;transform:translateX(-50%) scaleY(-1);
  background:url('assets/hero/geraet.webp') center top/100% auto no-repeat;opacity:.08;filter:blur(2px);
  -webkit-mask:linear-gradient(transparent 55%,#000);mask:linear-gradient(transparent 55%,#000)}
/* Demo-Leiste (Demozeit, Funkloch testen) weg (Matteo 03.11.2026); bleibt im DOM, weil app.js sie anspricht */
.hero :is(.demo-controls,.demo-feedback){display:none}
/* Intro: Bildfolge auf Canvas; Lage laut Blender-Bildschirmrechteck, in Prozent der Gerätebox */
.intro-canvas{position:absolute;left:-49.57%;top:-16.36%;width:199.14%;height:132.73%;z-index:0;pointer-events:none}
.intro-laeuft .phone{background:none}
/* Uhr und Datum im Flug (07.11.2026): gleiche Fläche wie .intro-canvas, darin der Bildschirm 375×790 per matrix3d (hero.js) */
.intro-text{position:absolute;left:-49.57%;top:-16.36%;width:199.14%;height:132.73%;z-index:1;pointer-events:none;overflow:hidden}
.intro-text-schirm{position:absolute;left:0;top:0;width:375px;height:790px;transform-origin:0 0;background:none!important;box-shadow:none!important}
.intro-text .sperr{display:flex;background:none}
.intro-text .sperr>:not(.sperr-datum,.sperr-uhr){visibility:hidden}
.intro-laeuft .phone::after{opacity:var(--glanz,1)}
.product-stage.intro-laeuft::before{opacity:calc(.08 * var(--glanz,1))}
/* Bis hero.js übernimmt, bleibt der Bereich leer; fällt das Skript aus, erscheint er nach 4 s trotzdem */
@keyframes hero-notfall{to{opacity:1}}
.intro .hero-copy>*,.intro .hero .phone{opacity:0;animation:hero-notfall .5s 4s forwards}

/* Umschalter Hell/Dunkel */
.thema-knopf{display:grid;place-items:center;width:44px;height:44px;flex:none;margin-right:-14px;border-radius:50%;border:1px solid #ffffff2a;background:none;color:inherit}
.thema-knopf svg{width:20px;height:20px}
.thema-knopf:hover{background:#ffffff10}
[data-theme=light] .thema-knopf .sonne,[data-theme=dark] .thema-knopf .mond{display:none}

/* Hell (Start) */
[data-theme=light] .header,[data-theme=light] .header.is-compact{background:#f6f6f4ef;color:var(--ink)}
[data-theme=light] .header.is-compact{border-color:var(--linie)}
[data-theme=light] .header .brand{color:var(--ink)}
[data-theme=light] .header nav a{color:#4a5052}
[data-theme=light] .header nav a:hover{color:var(--ink)}
[data-theme=light] .thema-knopf{border-color:#16191a26}
[data-theme=light] .thema-knopf:hover{background:#16191a0d}
[data-theme=light] .hero{--ink:#16191a;--muted:#4a5052;--akzent-text:#1f6f54;color:var(--ink);background:
  radial-gradient(40% 60% at 74% -8%,#fff,transparent 70%),
  radial-gradient(24% 6% at 74% 93%,#14181c2e,transparent 72%),
  linear-gradient(#f3f3f0 0 91%,#ebebe7 91% 100%)}
[data-theme=light] .hero::after{background:linear-gradient(90deg,transparent,#16191a1a 50%,transparent)}
[data-theme=light] .hero :is(.kicker,.gruen){color:var(--akzent)}
[data-theme=light] .hero :is(.lead,.vertrauen){color:#4a5052}
[data-theme=light] .hero .vertrauen i{background:var(--akzent);box-shadow:none}

/* Dunkel: Lichthof hinter dem Gerät, Gegenlicht-Schicht additiv auf den Kanten, Lichtfleck am Boden */
[data-theme=dark]{--schimmer:#e6fff3}
[data-theme=dark] .hero{background:
  radial-gradient(40% 62% at 73% 46%,#3a504a 0%,#1f2b28 34%,#121817 56%,transparent 78%),
  radial-gradient(14% 75% at 73% -6%,#e6fff31f,transparent 74%),
  radial-gradient(24% 6% at 74% 93%,#93d5b64d,transparent 72%),
  linear-gradient(#080a0b 0 91%,#0e1213 91% 100%)}
[data-theme=dark] .hero::after{background:linear-gradient(90deg,transparent,#ffffff14 50%,transparent)}
[data-theme=dark] .phone{filter:drop-shadow(0 40px 60px rgb(0 0 0 / var(--schatten,1)))}
[data-theme=dark] .phone::before{background:url('assets/hero/rahmen-gegenlicht.webp') center/199.14% 132.73% no-repeat;mix-blend-mode:screen;opacity:var(--kante,1)}
[data-theme=dark] .product-stage::before{opacity:.22}
[data-theme=dark] .product-stage.intro-laeuft::before{opacity:calc(.22 * var(--glanz,1))}
[data-theme=dark] .hero{--glas:linear-gradient(180deg,#ffffff1f,#ffffff08);--glas-rand:#ffffff29;--glas-schatten:inset 0 1px 0 #ffffff2e,0 12px 32px -14px #000c;--glas-hover:#ffffff24}

/* Handy im Arbeitstag: gleicher Blender-Rahmen (dunkler Abschnitt, daher mit Gegenlicht). Nur am Rechner, weil der
   Bildschirm dort fest 375×790 ist; app.js setzt --z = Zoom des Bildschirms. Schmale Fassung folgt mit der Handy-Seite. */
@media(min-width:901px){
  .day-phone{--z:.82;position:relative;width:calc(430.1px * var(--z));padding:calc(35.04px * var(--z)) calc(27.57px * var(--z));border-radius:0;
    background:url('assets/hero/rahmen.webp') center/199.14% 132.73% no-repeat;box-shadow:none;filter:drop-shadow(0 40px 60px #000)}
  .day-phone::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
    background:url('assets/hero/rahmen-gegenlicht.webp') center/199.14% 132.73% no-repeat}
  .day-phone::after{content:'';position:absolute;inset:calc(35.04px * var(--z)) calc(27.57px * var(--z));z-index:3;border-radius:calc(52.5px * var(--z));pointer-events:none;
    background:linear-gradient(118deg,#ffffff1c 0%,#ffffff08 26%,transparent 38%)}
  .day-phone>.day-screen{position:relative;z-index:2;border-radius:52.5px}
}
@media(max-width:760px){
  .hero{min-height:0;padding-top:104px}
  .hero .lead{font-size:18px}
  .hero .knoepfe{align-items:flex-start}
  .product-stage{zoom:1}
  .phone{width:351px;padding:28.6px 22.5px;top:20px}
  .phone::after{inset:28.6px 22.5px;border-radius:42.8px}
  .phone-screen{border-radius:52.5px}
  .product-stage::before{top:770px;width:351px}
}
@media(prefers-reduced-motion:reduce){.intro .hero-copy>*,.intro .hero .phone{opacity:1;animation:none}}

/* Sperrbildschirm (Matteo 06.11.2026: „das Handy muss sich entsperren“; Hintergrund selbst in Blender gerendert, blender/sperrbild.py,
   weil Grün „gar nicht“ geht und das Bild aus dem Modell nicht unseres ist).
   Uhr und Datum setzt app.js live. Sichtbar nur, solange hero.js entsperrt; ohne Skript bleibt die App sichtbar. */
.sperr{display:none;position:absolute;inset:0;z-index:20;flex-direction:column;align-items:center;color:#fff;text-align:center;
  background:#000 url('assets/hero/sperr-baender.webp') center/cover no-repeat;will-change:transform}
.entsperren .sperr{display:flex}
.sperr-leiste{position:absolute;top:0;left:0;right:0;background:none!important;color:#fff}
.sperr-schloss{position:absolute;top:20.5px;left:50%;z-index:3;width:15px;height:15px;margin-left:-7.5px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
/* Schloss in der Insel wie am echten iPhone, Bänder in Kalstro-Grün, großer Schriftzug (Matteo 06.11.: „das Schloss muss oben in der Island sitzen“,
   „mehr nach Kalstro“, dann: „nur die grünen Linien“, „Kalstro soll auf dem Sperrbildschirm auch nicht stehen“) */
.sperr{background-color:#fff;background-image:linear-gradient(165deg,#c9f0dc 0%,#93d5b6 35%,#1f6f54 100%),url('assets/hero/sperr-baender.webp');background-size:cover;background-blend-mode:multiply}
.sperr-schloss rect{fill:#fff;stroke:none}
.sperr-schloss .buegel{transition:transform .25s cubic-bezier(.3,1.4,.5,1);transform-origin:16px 11px}
.sperr.auf .buegel{transform:translate(4.5px,-1.6px) rotate(18deg)}
.sperr-datum{margin:78px 0 0;font:600 19px/1.2 Plex,sans-serif;letter-spacing:.005em;opacity:.92}
.sperr-uhr{margin:-2px 0 0;font:600 104px/1 Plex,sans-serif;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.sperr-fuss{margin-top:auto;width:100%;display:flex;justify-content:space-between;padding:0 46px 52px}
.sperr-knopf{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#ffffff2b;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sperr-knopf svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}
.sperr-strich{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:#fff}
/* Abzug für Blender (Textur im Flug): ohne Uhr und Datum, die gibt es nur live */
.schirmbild .sperr :is(.sperr-uhr,.sperr-datum){visibility:hidden}
.app-ui .sperr :is(.sperr-datum,.sperr-uhr){color:#fff}
.schirmbild .phone::after{display:none}
/* Entsperren wie am iPhone (Matteo 06.11.2026: „muss schon im Bildschirm entsperrt werden“): alles bleibt im abgerundeten
   Bildschirm; nach Face ID erscheint der Hinweis, dann gleitet der Sperrbildschirm hoch und die App wird hell (hero.js setzt --auf). */
.entsperren .phone-screen{clip-path:inset(0 round 52.5px)}
.entsperren .phone-screen>:not(.sperr){filter:brightness(calc(.45 + .55 * var(--auf,0)))}
.sperr-hinweis{position:absolute;left:0;right:0;bottom:30px;margin:0;font:500 15px/1.2 Plex,sans-serif;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}
.sperr.wisch .sperr-hinweis{opacity:.85;transform:none}
.app-ui .sperr .sperr-hinweis{color:#fff}