/* ==========================================================================
   teaser.css — Scroll-Teaser auf der Gast-Startseite einbinden
   ==========================================================================
   Nutzer 2026-10-18 (scroll-teaser.zip, ersetzt das frühere Scroll-Video).
   Nur app.html im Gast-Zweig lädt diese Datei, und zwar NACH
   static/scroll-teaser/teaser.css (dem Teaser selbst, aus der Vorlage
   unverändert übernommen). Hier steht nur, wie der Teaser in die Seite
   passt; Werte kommen aus tokens.css.

   Aufbau von #lock-section:
     .lock-inner         Startbereich, erster Bildschirm, scrollt normal weg;
                         unten darin „Teaser ansehen“ (#teaserPlay)
     .nct-scroll         der Teaser (#teaserStart): hoher Abschnitt (Länge
                         setzt teaser.js aus data-vh-per-second), darin
                         klebt die Bühne
     .teaser-autoscroll  Steuerung der automatischen Fahrt, sticky, 0 px hoch
   danach #teaserEnd (Knopf „Nach oben“) und die Fußzeile im normalen Fluss.

   Hintergrund: die Vorlage malt ein eigenes Kachelraster auf deckendem
   Grund. Die Seite hat aber schon eines (tile-background.js: #bgTileStatic
   scrollt mit, #bgCanvas trägt das Cursorlicht), und das reicht über
   #lock-section, also über die ganze Teaser-Strecke. Darum: kein eigenes
   Canvas im Markup (_scroll_teaser.html) und der Grund hier durchsichtig.
   Das Raster bleibt eins, das Cursorlicht wirkt auch unter der Bühne, und
   „Transparenz reduzieren“/„Mehr Kontrast“ schalten es wie überall ab.

   Fußzeile: die Bühne ist sticky IM Teaser-Abschnitt und endet mit ihm;
   nichts hier ist fixed, und die Bühne nimmt keine Zeigerereignisse an
   (.nct-stage-wrap pointer-events:none in der Vorlage). Knopf und
   Fußzeile stehen danach frei und bedienbar.
   ========================================================================== */

/* Die Bühne soll randlos in der Inhaltsspalte stehen. .main trägt ringsum
   Innenabstand (40px, unter 900px 20px); die Gastseite nimmt ihn oben und
   seitlich weg und gibt ihn den Inhalten selbst. Unten bleibt er: das ist
   der Abstand unter der Fußzeile. */
.main:has(> .lock-screen.has-teaser) {
  padding-top: 0;
  padding-inline: 0;
}
.main:has(> .lock-screen.has-teaser) > .form-message {
  margin-inline: var(--page-pad-x);
}
.main:has(> .lock-screen.has-teaser) > .app-footer {
  width: min(860px, 100% - 2 * var(--page-pad-x));
}

/* Ein einziger Abschnitt für Gäste: das Raster an Abschnittsanfängen
   (style.css, scroll-snap proximity) würde kurze Scrollwege zurück an den
   Anfang ziehen und das Abspielen stören. */
html:has(.lock-screen.has-teaser) { scroll-snap-type: none; }

.lock-screen.has-teaser {
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  overflow-x: clip;
}

.lock-screen.has-teaser .lock-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--content-max-narrow) + 2 * var(--page-pad-x));
  min-height: 100vh;
  min-height: 100svh;  /* stabil auf Mobilgeräten, springt nicht mit der Adressleiste */
  margin-inline: auto;
  justify-content: center;
  padding: var(--space-12) var(--page-pad-x);
}

/* Teaser: durchsichtiger Grund (siehe Kopf). Die Selektoren sind bewusst
   spezifischer als die der Vorlage, damit die Reihenfolge der Dateien nicht
   allein entscheidet. */
.lock-screen .nct-scroll,
.lock-screen .nct-sticky {
  background: transparent;
}
.lock-screen .nct-scroll {
  width: 100%;
  flex-shrink: 0;
}

/* Ohne JavaScript gäbe es nur eine leere, viele Bildschirme hohe Fläche
   (die Szenen erzeugt erst teaser.js). Dann lieber gar kein Teaser: der
   Startbereich steht allein, die Fußzeile folgt direkt. Den Textinhalt
   des Teasers trägt der Startbereich ohnehin. */
html.no-js .nct-scroll { display: none; }

/* Knopf „Nach oben“ am Ende der Strecke (Nutzerwunsch 2026-10-18).
   Im Fluss zwischen Abschnitt und Fußzeile statt schwebend: er verdeckt
   weder Teaser noch Fußzeile und braucht auf 390px keine Sonderregel.
   Optik ist die der Anmelde-Knöpfe oben (.btn-secondary.lock-cta), damit
   Anfang und Ende der Seite zusammengehören. Sichtbar schaltet ihn
   teaser_scroll.js nur, wenn die Seite mindestens drei Fensterhöhen hat. */
.teaser-end {
  display: flex;
  justify-content: center;
  padding: var(--space-8) var(--page-pad-x) 0;
}
.teaser-end[hidden] { display: none; }
.teaser-to-top svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* Sprungziel von „Teaser ansehen“ (#teaserStart, tabindex="-1"): bekommt bei
   reduzierter Bewegung den Fokus. Es ist kein Bedienelement; ein Ring um
   die viele Bildschirme hohe Strecke hülfe niemandem. */
.lock-screen .nct-scroll:focus { outline: none; }

/* Steuerung der automatischen Fahrt (#teaserAutoScroll, Nutzer 2026-10-19).
   Letztes Kind von #lock-section und sticky statt fixed: so klebt sie unten
   im Bild, solange der Abschnitt zu sehen ist, und endet mit ihm, ragt also
   nie über Knopf „Nach oben“ oder die Fußzeile. Die Hülle ist 0 px hoch und
   nimmt keinen Platz ein; der Knopf steht nach oben aus ihr heraus
   (align-items: flex-end). Deckende Fläche wie Menüs (--panel-elevated),
   weil darunter die Teaser-Bühne läuft. */
.teaser-autoscroll {
  position: sticky;
  bottom: var(--space-6);
  z-index: 2;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
.teaser-autoscroll[hidden] { display: none; }
.teaser-autoscroll-btn {
  pointer-events: auto;
  min-height: var(--control-h-l);
  padding: 0 var(--space-5);
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-m);
  font-size: var(--size-body);
}
.teaser-autoscroll-btn:hover { background: var(--surface-3); }
.teaser-autoscroll-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.teaser-autoscroll .icon-play { display: none; }
.teaser-autoscroll[data-state="paused"] .icon-pause { display: none; }
.teaser-autoscroll[data-state="paused"] .icon-play { display: block; }