/* D14 Werrewerk · Station 1: Zeitraffer, dann Kamerafahrt auf derselben Bühne · hook.css v0.14 · Stand 2026-10-11
   v0.14: Absenderzeile, Überschrift, Satz und Knopf stehen ab dem ersten Bild über dem laufenden Zeitraffer (eigener, kräftigerer Schleier).
   Davor (v0.11, Stand 2026-10-10):
   Schichten der Bildfläche von unten: Mini-Vorschau (CSS, sofort da) · Fläche der Kamerafahrt · Rohbau-Bild · Video.
   Am Ende des Videos blenden Video und Rohbau-Bild aus; darunter steht deckungsgleich Bild 1 der Fahrt.
   Zeiger und Fahrt-Mechanik: Kopie aus bogen/probe/index.html. */

.hook {
  --hook-bild-x: 50%;                    /* waagerechter Ausschnitt; hook.js rechnet ihn aus der Lage der Insel */
  --hook-dauer-naht: 520ms;              /* Überblendung Video → Kamerafahrt */
  --hook-dauer-text: 480ms;
  position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--grund);
}
.hook__bild { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; outline: none;
  /* 32 × 18 Punkte des Rohbau-Bildes: steht ab dem ersten gemalten Bild, noch bevor eine Datei geladen ist */
  background: #6f6252 url("data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAADwBACdASogABIAPtFgqU+oJaOiKAgBABoJYwCw7AaqpgpoyJ4MEYuIywmVFNgjmBgA+QuoTvYP7vogWRoK8mZLZcy4Cm5oDEIQVV/JC/UajHLXLmrJnbEH42nbKJtwxvrhtVxcJqiYFldYUSBtCydHymGi0fb1j9fdtz2Y5NUM7MLiUP7qmRbvnL3wPTJUrexDgNYThXxq5iJ3d+Lb/oAA") var(--hook-bild-x) 50% / cover no-repeat; }
.hook__bild:focus-visible { box-shadow: inset 0 0 0 3px var(--messing); }
.hook__fahrt, .hook__poster, .hook__film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.hook__poster, .hook__film { object-fit: cover; object-position: var(--hook-bild-x) 50%; transition: opacity var(--hook-dauer-naht) ease; }
.hook[data-phase="kueche"] .hook__poster, .hook[data-phase="kueche"] .hook__film { opacity: 0; pointer-events: none; }
.hook[data-fahrt="fehlt"] .hook__film { opacity: 1; }          /* Bilder der Fahrt nicht ladbar: das letzte Videobild bleibt stehen */

/* Schleier hinter dem Text: nur oben links, die Insel (untere Bildhälfte) bleibt frei */
.hook__schleier { position: absolute; inset: 0; pointer-events: none; opacity: 1; transition: opacity var(--hook-dauer-text) ease;
  background: radial-gradient(58% 60% at 0% 4%, rgba(20, 16, 12, .9) 0%, rgba(20, 16, 12, .8) 48%, rgba(20, 16, 12, .32) 78%, rgba(20, 16, 12, 0) 100%); }
/* Während des Zeitraffers liegt ein zweiter, kräftigerer Schleier darüber: der Rohbau ist heller als die fertige Küche.
   Er liegt links oben hinter dem Text und endet bei 55 % der Höhe: die Insel und die untere Bildhälfte bleiben frei (Naht-Prüfung in pruef.mjs). Am Filmende blendet er aus. */
.hook__schleier::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--hook-dauer-text) ease;
  background: linear-gradient(90deg, rgba(20, 16, 12, .93) 0%, rgba(20, 16, 12, .9) 46%, rgba(20, 16, 12, .7) 58%, rgba(20, 16, 12, 0) 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 56%); mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 56%); }
.hook[data-phase="film"] .hook__schleier::before { opacity: 1; }

/* Hero-Rollen: stehen oben links über Fenster und Rückwand, enden über der Insel (Oberkante bei rund 50 % der Höhe) */
.hook__text { position: absolute; left: var(--rand); top: calc(var(--kopf) + clamp(8px, calc(11svh - 62px), 110px)); z-index: 3; max-width: 92vw;
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 2svh, 28px);
  transition: opacity var(--hook-dauer-text) ease, transform var(--hook-dauer-text) ease; }
/* Absenderzeile über der Überschrift: klein, in Messing-Gold wie die Wortmarke */
.hook__absender { margin: 0 0 calc(clamp(12px, 2svh, 28px) * -.45); font: 600 clamp(13px, min(.95vw, 1.9svh), 22px)/1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--messing); text-shadow: 0 1px 12px rgba(20, 16, 12, .8); }
/* 3,7 vw: die zweite Zeile endet links vor der Pendelleuchte (liegt bei 41,7 % der Bildbreite), geprüft bei 1280 bis 1600 */
.hook__titel { margin: 0; font: 700 clamp(34px, min(3.7vw, 8svh), 124px)/1.02 Archivo, sans-serif; letter-spacing: -.02em; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(20, 16, 12, .55); }
.hook__titel span { display: block; }
@media (min-width: 900px) { .hook__titel span { white-space: nowrap; }
  /* Vertrauenszeile mit eigenem dunklem Grund: lesbar auch ueber Blaettern und Fenster, ohne den Schleier bis zur Insel zu ziehen */
  .hook__vertrauen { padding: .38em .9em; margin-left: -.9em; border-radius: 999px; background: rgba(20, 16, 12, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }
.hook__satz { margin: 0; font-size: clamp(16px, min(1.25vw, 2.4svh), 30px); color: var(--text); text-shadow: 0 1px 12px rgba(20, 16, 12, .7); }
.hook__weiter { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.2svh, 16px); }   /* Vertrauenszeile UNTER dem Knopf: neben ihm lag sie auf den Blaettern der Pflanze */
.hook__vertrauen { margin: 0; font-size: clamp(16px, min(1vw, 2svh), 22px); font-weight: 500; color: var(--text); text-shadow: 0 1px 12px rgba(20, 16, 12, .8); }
.nur-finger { display: none; }
@media (pointer: coarse) { .nur-maus { display: none; } .nur-finger { display: inline; } }

/* Der Satz unter der Überschrift: während des Zeitraffers sagt er, wer hier baut; steht die Küche, lädt er zur Kamerafahrt ein */
.hook[data-phase="film"] .hook__satz .nur-maus, .hook[data-phase="film"] .hook__satz .nur-finger { display: none; }
.hook[data-phase="kueche"] .hook__satz .satz-film { display: none; }
/* Beim Bewegen tritt der Text zurück (Rechner-Anordnung, in der er über dem Bild liegt) */
@media (min-width: 900px) { .hook--bewegt .hook__text { opacity: .14; } .hook--bewegt .hook__schleier { opacity: .2; } }

/* Ecke unten rechts: „Überspringen“, danach „Zeitraffer noch einmal“ */
.hook__ecke { position: absolute; right: var(--rand); bottom: clamp(14px, 3svh, 32px); z-index: 4; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: rgba(20, 16, 12, .55); color: var(--text); border: 1px solid rgba(243, 236, 226, .28); font: 500 13px/1 Inter, sans-serif; letter-spacing: .04em;
  cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hook__ecke:hover, .hook__ecke:focus-visible { border-color: var(--messing); color: var(--messing); outline: none; }
html:not(.js) .hook__ecke { display: none; }

/* Großer Zeiger mit Richtungspfeilen (nur Maus, nur über dem Bild der fertigen Küche) */
@media (pointer: fine) { .hook[data-phase="kueche"] .hook__bild { cursor: none; } }
.hook__zeiger { position: fixed; left: 0; top: 0; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; z-index: 5;
  background: rgba(20, 16, 12, .42); border: 2px solid var(--messing); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .25s, width .2s, height .2s, margin .2s; }
.hook__zeiger.ist-da { opacity: 1; }
.hook__zeiger svg { width: 26px; height: 26px; stroke: var(--messing); stroke-width: 2.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .2s, transform .2s; }
.hook__zeiger [data-pfeil] { opacity: .35; }
.hook__zeiger[data-richtung="rechts"] [data-pfeil="rechts"], .hook__zeiger[data-richtung="links"] [data-pfeil="links"] { opacity: 1; transform: scale(1.25); }
.hook__zeiger[data-richtung="rechts"] [data-pfeil="rechts"] { transform: translateX(3px) scale(1.25); }
.hook__zeiger[data-richtung="links"] [data-pfeil="links"] { transform: translateX(-3px) scale(1.25); }
.hook__zeiger[data-rand="anfang"] [data-pfeil="links"], .hook__zeiger[data-rand="ende"] [data-pfeil="rechts"] { opacity: 0; width: 0; }
@media (pointer: coarse) { .hook__zeiger { display: none; } }

.hook__diag { position: fixed; top: calc(var(--kopf) + 8px); left: 8px; margin: 0; font: 12px/1.4 ui-monospace, monospace; background: rgba(0, 0, 0, .7); padding: 6px 8px; z-index: 25; }

/* ---- Handy und schmale Fenster: Bild oben (so viel Insel wie möglich), Text darunter auf dem Grund ---- */
@media (max-width: 899px) {
  .hook { --hook-bild-x: 69%; --hook-bild-hoehe: max(240px, min(60svh, calc(100svh - 336px))); display: flex; flex-direction: column; }
  /* v0.14: Das Bild liegt hinter dem Text (absolut), der Text steht von Anfang an an seinem Platz unter dem späteren Bildrand.
     So verschiebt sich am Filmende nichts, nur das Bild fährt zusammen. */
  .hook__bild { position: absolute; inset: 0 0 auto 0; height: var(--hook-bild-hoehe);
    transition: height 760ms cubic-bezier(.2, .7, .2, 1); }
  /* Waehrend des Zeitraffers fuellt das Bild den ganzen Schirm (keine leere Flaeche); am Ende faehrt es nach oben zusammen
     und gibt den Text frei. Video und Kamerafahrt schneiden nach derselben Regel zu, die Naht bleibt deckungsgleich. */
  .js .hook[data-phase="film"] .hook__bild { height: 100vh; height: 100svh; }
  .js .hook[data-phase="film"] { --hook-bild-x: 0%; }   /* Start des Schwenks: Fensterfront mit Abendsonne (hook.js faehrt von hier zur Insel) */
  .hook__bild::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22%; pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 16, 12, 0), var(--grund)); }
  /* Während des Zeitraffers: dunkler Verlauf über dem unteren Teil des Films, darauf der Text. Oben bleibt der Film frei. */
  .js .hook[data-phase="film"] .hook__bild::after { top: calc(var(--hook-bild-hoehe) - 110px); bottom: 0; height: auto;
    background: linear-gradient(180deg, rgba(20, 16, 12, 0) 0, rgba(20, 16, 12, .84) 110px, rgba(20, 16, 12, .9) 100%); }
  .hook__schleier { display: none; }
  .hook__text { position: relative; left: auto; top: auto; margin-top: var(--hook-bild-hoehe); flex: 1 1 auto; justify-content: center; max-width: none; padding: 0 var(--rand) 64px; gap: 12px; }
  .hook__absender { margin-bottom: -4px; font-size: 13px; letter-spacing: .12em; text-shadow: none; }
  .hook__satz { min-height: 3em; }
  .hook__titel { font-size: clamp(30px, 8.6vw, 44px); text-shadow: none; }
  .hook__satz, .hook__vertrauen { text-shadow: none; }
  .hook__satz { font-size: 16px; }
  .hook__vertrauen { font-size: 16px; color: var(--leise); }
  .hook__weiter { align-self: stretch; align-items: stretch; }
  .hook__ecke { bottom: 12px; }
}
@media (max-width: 899px) and (max-height: 620px) { .hook__satz { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hook__poster, .hook__film, .hook__text, .hook__schleier, .hook__schleier::before, .hook__zeiger, .hook__bild { transition: none; }
  .hook__satz { display: none; }          /* ohne Bewegung fährt die Kamera nicht: der Satz würde etwas versprechen, das nicht passiert */
  .hook[data-phase="kueche"] .hook__bild { cursor: auto; }
}