/* Schritt Hero 6 (Tim, 29.10.2026 spät: „Mach die ganze Animation weg, es soll gar keinen Scroll-Effekt haben.“)
   Der Hero ist ein Bildschirm hoch und scrollt ganz normal: keine Leertaste, kein Näherkommen, kein Eintauchen. Tims Film läuft im
   Laptop-Bildschirm (hero-geschichte.js). „Keine Lust …“, „Power mit KI.“ und der Diamant-Satz stehen darunter in einem eigenen
   Abschnitt (#power), am Handy eigens gestaltet: kurz, gut lesbar, ruhig erscheinend. */

/* ---------- Hero: die Bühne steht im ersten Bildschirm und scrollt mit (vorher klebte sie eine Bildschirmhöhe über das Hero-Ende) ---------- */
body[data-intro] #hero-zone .hn-buehne {
  position: absolute; inset: 0 0 auto; height: 100svh; margin: 0;
  /* unten weich in das Wasser darunter auslaufen (die Tinte der Seite liegt dahinter) */
  -webkit-mask-image: linear-gradient(#000 80%, #0000); mask-image: linear-gradient(#000 80%, #0000);
}
/* Steht die 3D-Szene, blendet sie selbst unten aus (hero-szene.js, ein Durchgang in ihrer eigenen Auflösung). Die Maske über der ganzen
   Bühne müsste der Browser sonst in jedem Bild über den ganzen Schirm rechnen, am Handy mit dreifacher Pixeldichte. Das Vorschaubild, das
   darunter noch eine Sekunde steht, bekommt die Maske dann selbst. */
body[data-intro] #hero-zone.hn-3d-bereit .hn-buehne { -webkit-mask-image: none; mask-image: none; }
body[data-intro] #hero-zone.hn-3d-bereit .hn-poster { -webkit-mask-image: linear-gradient(#000 80%, #0000); mask-image: linear-gradient(#000 80%, #0000); }
#hero-zone .hn-erster { will-change: auto; }

/* ---------- Abschnitt „Power mit KI.“ ---------- */
.hn-power { position: relative; z-index: 2; color: var(--hn-papier); }
.hn-power .hn-ankunft { padding-top: clamp(84px, 13svh, 150px); padding-bottom: clamp(36px, 6svh, 72px); }
/* ruhig erscheinen: der Block hebt sich einmal weich ein, wenn er ins Bild kommt (kein Buchstaben- oder Pixeleffekt) */
.hn-js body[data-intro="motion"] .hn-power:not(.ist-da) .hn-ankunft > * { opacity: 0; transform: translate3d(0, 22px, 0); }
.hn-power .hn-ankunft > * { transition: opacity .9s var(--hn-ease), transform 1s var(--hn-ease); }
.hn-power .hn-ankunft > :nth-child(2) { transition-delay: .08s; }
.hn-power .hn-ankunft > :nth-child(3) { transition-delay: .18s; }
.hn-power .hn-ankunft > :nth-child(4) { transition-delay: .28s; }
.hn-power .hn-ankunft > :nth-child(5) { transition-delay: .34s; }
/* der Diamant schleift sich selbst (hero-diamant.js); seine Hülle soll beim Einheben nicht noch einmal aufblenden */
.hn-power .hn-stein canvas { transition: none; }

/* ---------- Handy: kurz und gut lesbar, Satz und Diamant nebeneinander ---------- */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .hn-power .hn-ankunft {
    grid-template-columns: minmax(0, 1fr) 92px; column-gap: 14px; align-items: center;
    padding: 64px 20px 26px;
  }
  .hn-power .hn-frage {
    grid-column: 1 / -1; margin: 0 0 14px; max-width: 26ch;
    font: 500 19px/1.32 'Familjen Grotesk', sans-serif; letter-spacing: -.01em; color: #cdd8ee;
  }
  .hn-power .hn-kraft-huelle { grid-column: 1 / -1; }
  .hn-power .hn-kraft { font-size: clamp(50px, 14.6vw, 66px); line-height: .94; letter-spacing: -.05em; }
  .hn-power .hn-kraft-text { grid-column: 1 / -1; margin: 18px 0 0; max-width: 32ch; font-size: 16px; line-height: 1.5; color: #dde5f3; }
  .hn-power .hn-diamant { grid-column: 1 / 2; margin: 26px 0 0; font-size: clamp(22px, 6.4vw, 27px); line-height: 1.12; }
  .hn-power .hn-stein { grid-column: 2 / 3; width: 92px; margin: 26px 0 0; justify-self: end; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hn-power .hn-ankunft > * { transition: none; }
  .hn-js body[data-intro] .hn-power .hn-ankunft > * { opacity: 1; transform: none; }
}

/* ---------- Vorschaubild der Bühne (Tim: „es kommt ewig nichts“) ----------
   Liegt unter der 3D-Szene. Steht sie nach 1,2 s noch nicht (langsames Netz, schwaches Handy), blendet das Bild ein; kommt die Szene,
   blendet sie darüber ein und übernimmt genau diesen Zustand (hero-szene.js), danach ist das Bild weg. */
.hn-poster { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; animation: hn-poster-ein .5s ease 1.2s forwards; }
/* Schritt Hero 7: am Handy früher (die 3D-Szene steht dort rund 1 s später als am Desktop) */
@media (max-width: 900px) { .hn-poster { animation-delay: .45s; } }
.hn-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hn-szene { position: absolute; z-index: 1; }
@keyframes hn-poster-ein { to { opacity: 1; } }
.hn-3d-bereit .hn-poster { visibility: hidden; transition: visibility 0s 1s; }
.hn-ohne-3d .hn-poster { display: none; }
/* Schritt Hero 6 (Leistung, Handy): die zwei Schatten unter dem Schuh ohne Echtzeit-Weichzeichner. Vorher blur(4px) bzw. blur(6px) – der
   Schatten wird beim Schweben in jedem Bild bewegt, der Filter darum in jedem Bild neu gerechnet. Jetzt ein Verlauf im etwas größeren Kasten,
   angepasst an das Original (werkzeug/schatten6.mjs: mittlere Abweichung unter 1 %, höchstens 3 % Deckkraft). */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .web-produkt .wp-boden { filter: none; left: calc(22% - 10px); right: calc(16% - 10px); bottom: calc(10% - 6px); height: calc(18% + 12px);
    background: radial-gradient(closest-side, #00081870 0%, #0008186b 10%, #00081860 20%, #00081852 30%, #00081842 40%, #00081831 50%,
      #00081821 60%, #00081814 70%, #0008180a 80%, #00081804 90%, #00081800 100%); }
  .schuh-schatten { filter: none; left: calc(22% - 15px); right: calc(18% - 15px); bottom: calc(6% - 9px); height: calc(16% + 18px);
    background: radial-gradient(closest-side, #000818a0 0%, #00081898 10%, #00081889 20%, #00081874 30%, #0008185c 40%, #00081844 50%,
      #0008182e 60%, #0008181b 70%, #0008180c 80%, #00081804 90%, #00081800 100%); }
}