/* ============================================================================
   KIDZ.ME — Startseite
   Ein durchgehender Sandton, Buch zentriert, Marke oben links, drei Karten
   unten. Kein Scrollen auf Desktop.

   ► Die Buchanimation ist ein freigestelltes Video (video/buch.webm). Hier
     wird nur die Bühne positioniert und skaliert — der Inhalt kommt aus dem
     Render und lässt sich hier nicht beeinflussen.

   ► Stellschrauben:
        --brand-inset   Abstand der Marke von oben und links
        --cards-bottom  Abstand der Kartenreihe vom unteren Rand
        --cards-width   Breite der Kartenreihe
        --book-w/--book-h  Bühnengröße des Videos (16:9, --book-h folgt
                           automatisch aus --book-w)
   ============================================================================ */

/* Farben und Schriften: siehe tokens.css (wird in index.html eingebunden).
   Hier nur, was ausschließlich diese Seite betrifft: die Maße des Layouts. */
:root {
  --brand-inset:  70px;   /* Abstand der Marke von oben und links */
  --cards-bottom: 24px;   /* Abstand der Kartenreihe vom unteren Rand */
  --marke-breite: 24rem;  /* Spaltenbreite der Marke = Breite des Logos */
  --cards-width:  1620px; /* Breite der Kartenreihe (50 % breiter als zuvor) */


  /* Das Video ist 4:3 und rundherum transparent; das Buch selbst füllt die
     mittleren 73,5 % der Breite und 89,7 % der Höhe (gemessen, siehe INHALT
     in loader.js). Der Überstand ist durchsichtig. Die Höhendeckelung sorgt
     dafür, dass das Buch auf flachen Fenstern nicht in die Karten läuft. */
  /* Nicht an vh allein: die Kartenreihe ist rund 226 px hoch, ganz gleich wie
     hoch das Fenster ist. Eine reine vh-Größe wächst deshalb auf flachen
     Fenstern ins Kartenfeld hinein (bei 900 px Höhe war es bereits 3 px zu
     viel). --platz-unten reserviert Karten + Abstand; der Rest geht ans Buch.
     0.6724 = Anteil des Buchs an der Rahmenbreite (0,8965 Höhe × 3/4). */
  /* Reserviert für Kartenreihe plus Luft. Der Kartenblock schrumpft auf
     flachen Fenstern NICHT proportional (die Schriftgrößen haben Untergrenzen),
     deshalb kein reines vh: gemessen sind es rund 88px + 14,5vh, plus 24px
     Rand oben und gut 20px Luft zum Buch. Bei einer reinen vh-Angabe lief das
     Buch auf 720p in die Karten. */
  --platz-unten: calc(46px + 14.8vh);
  --book-w: min(
      calc((50vw - (var(--brand-inset) + var(--marke-breite)) / 2 - 36px) / 0.367),
      calc((100vh - var(--platz-unten)) / 0.6724));
  --book-h: calc(var(--book-w) * 3 / 4);   /* Video ist 1920x1440 = 4:3 */
}

*, *::before, *::after { box-sizing: border-box; }

/* ============================================================================
   AQUARELL-HINTERGRUND — entfernt 2026-10-09 (Maurice)
   Die Seite steht jetzt auf Papier mit großen, blassen Federzeichnungen
   (motive.css, motive.js); die Wäsche um das Buch passt nicht mehr dazu.
   Das Bild img/hintergrund.webp bleibt liegen, falls sie zurückkommen soll.
   ============================================================================ */
html, body { height: 100%; }
body {
  margin: 0;
  /* KEIN overflow: hidden mehr. Die Seite war genau einen Bildschirm hoch und
     trug damit 204 Wörter — zu wenig, um für irgendetwas gefunden zu werden.
     Der erste Bildschirm ist unverändert; er liegt jetzt in .hero-schirm, und
     darunter folgt Fließtext. */
  background: var(--sand);
  isolation: isolate;   /* eigener Stapelkontext, damit ::before sicher hinten liegt */
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1 { margin: 0; font-weight: 400; font-family: var(--display); line-height: 1.06; }
p  { margin: 0; }
svg { display: block; }
a  { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ============================================================================
   MARKE — oben links
   ============================================================================ */
/* Die Marke ist jetzt eine Spalte: Logo, Unterzeile, Fließtext. Die Breite
   richtet sich nach dem Logo (--marke-breite) — der Text darunter ist genau so
   breit wie „Kidz.me".

   Wichtig für die Slogans: loader.js misst .brand und hält diesen Bereich frei.
   Weil der Kasten jetzt bis zur Kartenreihe reicht, fällt die linke Slogan-Zone
   automatisch weg — dort ist kein Platz mehr. Kein Eingriff in loader.js nötig. */
.brand {
  position: absolute;
  top: var(--brand-inset);
  left: var(--brand-inset);
  z-index: 10;
  width: var(--marke-breite);
}
.brand-lockup { display: flex; align-items: center; gap: .8rem; }
.brand-mark {
  width: clamp(40px, 5vh, 60px); aspect-ratio: 1;
  fill: var(--pink); flex: none;
  animation: twinkle 4.5s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { transform: rotate(0deg)   scale(1);    opacity: 1; }
  50%      { transform: rotate(-10deg) scale(1.09); opacity: .85; }
}
.brand-word { font-size: clamp(4rem, 8vh, 5rem); letter-spacing: -.025em; }
.brand-me   { color: var(--pink-deep); font-style: italic; }

.brand-claim {
  font-family: var(--sans);
  font-size: clamp(1.15rem, 2.3vh, 1.45rem);
  color: var(--blue);
  margin: clamp(.7rem, 1.6vh, 1.1rem) 0 0;
  line-height: 1.32;
}

/* Fließtext unter der Unterzeile, grau, in derselben Spaltenbreite */
.brand-text {
  margin-top: clamp(.9rem, 2vh, 1.4rem);
  font-size: clamp(.82rem, 1.68vh, 1.06rem);
  line-height: 1.72;
  color: var(--ink-faint);
}
.brand-text p { margin: 0 0 1em; }
.brand-text p:last-child { margin-bottom: 0; }

/* ============================================================================
   BÜHNE — Buch zentriert
   ============================================================================ */
.stage {
  /* absolute statt fixed: sonst würde das Buch beim Scrollen stehen bleiben
     und über dem Text darunter hängen. Der Bezug ist .hero-schirm, und der
     ist genau 100vh hoch — top: -10% bedeutet damit dasselbe wie vorher. */
  position: absolute;
  /* top: -10% zieht das Buch bewusst über den oberen Fensterrand hinaus.
     Das sieht auf dem Papier nach Beschnitt aus, ist aber keiner: der Inhalt
     beginnt im Median erst bei 34,6 % der Rahmenhöhe (über alle 720 Bilder
     gemessen). Nur die Federspitze reicht höher, und das in rund 1 % der
     Bilder — ein Sekundenbruchteil im 30-s-Lauf.

     Unten läuft das Buch absichtlich hinter die Kartenreihe: .cards hat einen
     Sanduntergrund mit weichem Verlauf und verdeckt es (z-index 10 gegen 2).
     Deshalb darf --book-w größer sein als die reine Fensterhöhe erlauben
     würde. Nach einem neuen Render neu beurteilen. */
  top: -10%;
  left: 50%;
  width: var(--book-w); height: var(--book-h);
  transform: translateX(-50%);
  z-index: 2;              /* über den Slogans — das Buch verdeckt sie */
  pointer-events: none;          /* Karten darunter bleiben klickbar */
}
.book-video {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;     /* Bühne ist bereits 16:9 — hier nur zur Sicherheit */
  background: transparent;
  /* KEIN opacity: 0 mehr. Vorher war das Videoelement bis „canplay" ganz
     durchsichtig — und damit auch das poster-Bild, das der Browser von sich
     aus zeigt. Sichtbar blieben drei blinkende Punkte in einer sonst leeren
     Seitenmitte, und das Buch erschien erst nach dem Laden von 3,7 MB.

     Jetzt trägt das Element von Anfang an das Standbild: video/buch-poster.webp
     ist 51 kB, hat einen echten Alphakanal und IST das erste Bild des Videos.
     Der Wechsel vom poster auf Bild 1 ist deshalb ein Tausch zweier gleicher
     Bilder — es gibt nichts zu überblenden, und es gibt keine leere Mitte.

     Nebenwirkung, die willkommen ist: schlägt das Video fehl, bleibt das
     Standbild stehen statt eines Lochs. */
  opacity: 1;
}

/* Ladeanzeige. Liegt jetzt UNTER dem Buch statt in seiner Mitte: das Buch ist
   sofort da, die Punkte sagen nur noch „es kommt noch Bewegung". Mit dem
   Standbild in der Mitte wären Punkte darüber nur Krach. */
.stage-spinner {
  position: absolute; left: 50%; bottom: 8%;
  transform: translateX(-50%);
  display: flex; gap: 9px;
  transition: opacity .5s ease;
}
.stage-spinner span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pink-deep); opacity: .35;
  animation: blink 1.2s ease-in-out infinite;
}
.stage-spinner span:nth-child(2) { animation-delay: .18s }
.stage-spinner span:nth-child(3) { animation-delay: .36s }
@keyframes blink { 0%,100% { opacity:.22; transform:scale(.8) } 50% { opacity:.9; transform:scale(1) } }
.is-ready .stage-spinner { opacity: 0; }


/* ============================================================================
   SLOGANS — blenden während der Animation an wechselnden Stellen ein
   Position, Schrift, Farbe und Zeitpunkt stehen in loader.js (SLOGANS-Array).
   Liegt über dem Buch (z-index 5), aber unter Marke und Karten (10).
   ============================================================================ */
.slogans {
  position: fixed; inset: 0;
  z-index: 1;              /* UNTER der Bühne (z-index 2): nie vor der Animation */
  pointer-events: none;
}
.slogan {
  position: absolute;
  /* Breite, Position und Schriftgröße setzt loader.js in px — abhängig davon,
     wie viel Platz neben dem Buch tatsächlich frei ist. Hier nur Startwerte. */
  max-width: 20ch;
  font-size: clamp(1.35rem, 3.4vh, 2.5rem);
  line-height: 1.22;
  hyphens: auto;
  overflow-wrap: break-word;
  opacity: 0;
  transform: translateY(18px) rotate(var(--rot, 0deg)) scale(.94);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2,.7,.3,1);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  will-change: opacity, transform;
}
.slogan.is-on {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg)) scale(1);
}

@media (max-width: 900px) { .slogans { display: none; } }

/* ============================================================================
   DREI KARTEN — unten, nebeneinander
   ============================================================================ */
.cards {
  /* Bezug ist jetzt .hero-schirm statt des Fensters. Weil der genau 100vh
     hoch ist, sitzt die Reihe unverändert am unteren Rand des ersten
     Bildschirms. */
  position: absolute;
  bottom: var(--cards-bottom);
  left: 50%; transform: translateX(-50%);
  z-index: 10;
  width: min(var(--cards-width), calc(100% - 5rem));
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  /* Der Sandton verdeckt das Buch, das jetzt bewusst dahinter läuft. Oben
     ausgeblendet, damit die Kante nicht als Rechteck sichtbar wird. */
  padding-top: 58px;
  background: linear-gradient(to bottom,
              rgba(250,249,253,0) 0, var(--sand) 52px);
}

/* Keine Pillen: kein Hintergrund, kein Rahmen, kein Schatten. Die Karte ist
   eine Textsäule mit Zierlinie darunter. Mittig gesetzt, weil die Zierlinie
   sonst nichts hätte, worauf sie sich bezieht. */
.card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: .28rem;
  padding: .4rem .6rem 0;
  height: 100%;
  color: inherit;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
a.card:hover { transform: translateY(-3px); }
a.card:hover .card-title { text-decoration: underline; text-underline-offset: .18em; }
a.card:hover .card-zier  { opacity: 1; }
a.card:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: var(--radius-sm); }

/* Überschrift: Young Serif wie das Logo, --pink-deep (4,9:1 auf Papier) */
.card-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 3.3vh, 2.05rem); line-height: 1.12;
  color: var(--pink-deep);
}
/* Untertitel: normale Schrift, Blau (4,64:1 — knapp über der Grenze, nicht
   weiter aufhellen) */
.card-sub {
  font-family: var(--sans);
  font-size: clamp(1rem, 2.56vh, 1.6rem); line-height: 1.3;
  color: var(--blue);
  max-width: 52ch;
}
/* Bester Anwendungsfall: normale Schrift, Grau (5,00:1) */
.card-use {
  font-family: var(--sans);
  font-size: clamp(.78rem, 1.52vh, .95rem); line-height: 1.45;
  color: var(--ink-faint);
  max-width: 52ch;
}

/* Preis: --pink-deep wie die Überschrift (5,33:1 auf Sand), aber in der
   Grundschrift und halbfett, damit er als Angabe gelesen wird und nicht mit
   der Handschrift der Überschrift konkurriert. Steht bewusst VOR der
   Zierlinie: die trägt margin-top:auto und schließt die Karte ab. */
.card-preis {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(.86rem, 1.8vh, 1.1rem); line-height: 1.35;
  color: var(--pink-deep);
  margin-top: .1rem;
}

/* Zierlinie — Farbe je Karte über --zier, Form kommt aus dem <symbol>.
   margin-top:auto schiebt sie ans untere Ende der Karte; weil die Karten im
   Raster ohnehin gleich hoch sind, liegen alle drei Zierlinien damit auf einer
   Linie — sonst rutscht die dritte durch „(In Vorbereitung)" nach unten. */
.card-zier {
  width: clamp(108px, 19vh, 190px); aspect-ratio: 240 / 60; height: auto;
  margin-top: auto; padding-top: .2rem;
  color: var(--zier, var(--line-strong));
  opacity: 1;
  transition: opacity .22s ease;
}
.card-eins { --zier: var(--himmel-tief); }   /* Logofarben, je ≥4,8:1 */
.card-zwei { --zier: var(--salbei-tief); }
.card-drei { --zier: var(--flieder-tief); }

/* Karte ohne Ziel — sichtbar, aber tot. */
.card-aus { cursor: default; }
.card-aus .card-title { color: var(--ink-soft); }
.card-aus .card-zier  { opacity: .5; }

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-height: 780px) {
  :root { --brand-inset: 44px; }
}

/* ============================================================================
   ERSTER BILDSCHIRM
   ============================================================================ */
.hero-schirm {
  position: relative;
  min-height: 100vh;
  /* Bezugsrahmen für .brand, .stage, .slogans und .cards. Ohne das würden
     alle vier weiter am Fenster hängen und beim Scrollen mitwandern. */
}

/* Hinweis, dass es weitergeht. Liegt über der Kartenreihe, weil die den
   unteren Rand belegt — deshalb unten rechts statt mittig. */
.runter {
  position: absolute; right: 1.4rem; bottom: .5rem; z-index: 11;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--paper-card); border: 1px solid var(--line);
  color: var(--pink-deep);
  animation: runterWinken 2.4s ease-in-out infinite;
}
.runter svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.runter:hover { border-color: var(--pink); }
@keyframes runterWinken { 0%,100% { transform: translateY(0) } 50% { transform: translateY(4px) } }
@media (prefers-reduced-motion: reduce) { .runter { animation: none; } }

/* ============================================================================
   INHALT UNTER DEM ERSTEN BILDSCHIRM
   ============================================================================ */
.weiter {
  position: relative; z-index: 12;   /* über dem Buch, das hinter die Kartenreihe läuft */
  background: var(--sand);
  border-top: 1px solid var(--line);
  padding: clamp(2.6rem, 6vh, 4.5rem) 0 1rem;
}
.wrap-s { width: min(720px, calc(100% - 2.6rem)); margin-inline: auto; }
.wrap-breit { width: min(1080px, calc(100% - 2.6rem)); margin-inline: auto; }
.weiter > .zwei, .weiter > .abschnitt-breit, .weiter > .weiter-schritt { margin-top: clamp(3.4rem, 8vw, 6rem); }
.weiter > :first-child { margin-top: 0; }
.weiter .einleitung { max-width: 62ch; }
.weiter .textseite h2::after { content: ""; display: block; width: 38px; height: 3px; margin-top: .65rem; background: var(--ton-mitte, var(--pink)); border-radius: var(--radius-xs); }
.weiter .bildplatz .turm { width: 70%; height: auto; }

.weiter h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  line-height: 1.2; margin: 0 0 .9rem;
}
.weiter p { margin: 0 0 1rem; color: var(--ink-soft); }   /* 4,63:1 auf Sand */
.weiter p:last-child { margin-bottom: 0; }
.mehr { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mehr:hover { color: var(--blue-deep); }

.kachelliste { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .7rem; }
.kachelliste a {
  display: block; padding: .85rem 1.1rem;
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .16s ease, transform .16s ease;
}
.kachelliste a:hover { border-color: var(--pink); transform: translateY(-2px); }
.kachelliste strong { display: block; color: var(--blue); font-weight: 650; }
.kachelliste span { font-size: .93rem; color: var(--ink-soft); }

.fuss {
  position: relative; z-index: 12;
  background: var(--sand);
  border-top: 1px solid var(--line); padding: 1rem 1.4rem;
  text-align: center; font-size: .85rem; color: var(--ink-faint);
}
.fuss a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.fuss p + p { margin-top: .4rem; }

@media (max-width: 900px) {
  body { overflow: auto; }
  .hero-schirm { min-height: 0; }
  .runter { display: none; }   /* auf schmalen Fenstern scrollt es ohnehin */
  :root { --book-w: 100vw; --book-h: calc(100vw * 3 / 4); }
  .brand { position: static; padding: 2rem 1.5rem 0; }
  .stage {
    position: static; transform: none;
    width: 100%; height: var(--book-h); margin-top: 1rem;
  }
  .cards {
    position: static; transform: none; width: auto;
    grid-template-columns: 1fr; gap: .7rem;
    margin: 1.5rem auto 2.5rem; padding: 0 1.5rem;
  }
}

@media (max-width: 560px) {
  .card-sub { display: none; }
  .brand-word { font-size: clamp(2.4rem, 10vw, 3.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark { animation: none; }
  .slogans { display: none; }
  .stage-spinner span { animation: none; }
  /* Das Video wird von loader.js pausiert; sichtbar bleibt das Standbild. */
}