/* ==========================================================================
   LIA'S KITCHEN – nur /ueber-mich/ (lädt nach css/stil.css, gleiche ?v=)
   Ablauf der Seite (dunkel / hell im Wechsel):
     1 Bühne (dunkel)       Titel «Wer ist Lia?», Lia-Foto im Zeitungslook mit ruhigem Ken Burns
     2 Zitat (dunkel)       Lias Satz gross
     3 Text (hell)          «Wer ist Lia?» im Wortlaut, Foto mit «fresh food for fresh people»
     4 Moment (dunkel)      breites Foto mit Parallax: «Fusion-Küche aus der ganzen Welt.»
     5 Grundsätze (hell)    sieben Grundsätze aus Lias eigenen Sätzen, Kochkurse auf Anfrage, Knopf «Anlass anfragen»
                            («Eigene Events» stand von ?v=60 bis ?v=63 als 6 hier, seit ?v=64 auf /angebot/,
                            css/angebot.css «4 Eigene Events», Lia 15.10.2026 «1a»)

   Bewegung (README «Bewegung»): Grundstil = sichtbarer Endzustand; nur transform, opacity, clip-path.
   Ken Burns läuft nur mit Skript (html[data-bewegt]) und hält ausser Sicht (.seiten-kopf.ruht, js/seite.js
   «ruhe») an; seit 14.10.2026 ohne Knopf «Bewegung anhalten» (Lia). Einblenden über [data-zeigen] (js/seite.js
   «zeigen»).
   ========================================================================== */

/* --- 1 Bühne --- */

.lia-buehne { overflow: hidden; }
.lia-buehne-raster { display: grid; gap: 32px; align-items: center; }
.lia-buehne .einleitung { max-width: 30em; }
.lia-buehne .aktionen { margin-top: 24px; }

.lia-portraet { position: relative; width: min(100%, 420px); margin: 0; }

/* Licht hinter dem Bild (Kino-Bühne): ruhiger goldener Schein, nur Dekor */
.lia-portraet::before {
  content: ""; position: absolute; inset: -18% -22%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(212,175,55,.16), rgba(212,175,55,0));
}

.lia-rahmen { z-index: 1; aspect-ratio: 4 / 5; }
.lia-parallax, .lia-kamera, .lia-kamera picture { height: 100%; }

/* Parallax (js/seite.js setzt --v) und Ken Burns liegen auf zwei Ebenen, damit sie sich nicht stören */
.lia-parallax { transform: translate3d(0, calc(var(--v, 0) * -3%), 0) scale(1.06); }
.lia-kamera { transform-origin: 30% 32%; } /* Lias Gesicht */

.lia-bildzeile {
  position: relative; z-index: 1; margin-top: 16px; color: var(--gedaempft); font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
}

.lia-bildzeile::before { content: ""; display: inline-block; width: 24px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--gold); }

@media (min-width: 900px) {
  .lia-buehne-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 112px); }
  .lia-portraet { justify-self: end; width: min(100%, 456px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Einstieg ohne Skript, sofort beim Laden: das Bild öffnet sich von unten (Endzustand = Grundstil) */
  .lia-rahmen { animation: lk-lia-auf 1400ms var(--aus) 280ms backwards; }
  .lia-bildzeile { animation: lk-hoch 900ms var(--aus) 900ms backwards; }

  /* Ken Burns in Schleife – startet schon in Bewegung (negativer Versatz). Nur Einzelwerte: der Kurzwert
     «animation:» würde animation-play-state zurücksetzen und die Ruhe ausser Sicht überstimmen. */
  html[data-bewegt] .lia-kamera {
    animation-name: lk-lia; animation-duration: 18s; animation-timing-function: cubic-bezier(.37, 0, .63, 1);
    animation-delay: -5s; animation-iteration-count: infinite; animation-direction: alternate;
  }

  html[data-bewegt] .seiten-kopf.ruht .lia-kamera { animation-play-state: paused; }
}

/* 8 % Zoom in 18 s zu Lias Gesicht; die Parallax-Ebene (1,06) hält die Ränder bedeckt */
@keyframes lk-lia {
  from { transform: scale(1.02); }
  to { transform: scale(1.1) translate3d(1%, 1.2%, 0); }
}

@keyframes lk-lia-auf { from { clip-path: inset(18% 0 0 0 round 24px); } }

/* --- 2 Zitat --- */

.lia-zitat { padding-block: clamp(48px, 6vw, 100px); text-align: center; }
/* direkt nach dem dunklen Seiten-Kopf (ohne Kante dazwischen): oben weniger, sonst addiert sich die Luft beider
   Abschnitte zu einer leeren Fläche (Lia 14.10.2026 «leere fläche»); gleiche Formel wie .band + .ablauf in css/stil.css */
.lia-buehne + .lia-zitat { padding-top: calc(var(--abstand) * .4); }
.lia-zitat-figur { max-width: 58rem; margin: 0 auto; }

.lia-zitat-figur::before { /* feine Goldlinie über dem Zitat */
  content: ""; display: block; width: 64px; height: 1px; margin: 0 auto 28px; background: var(--gold);
}

.lia-zitat blockquote p {
  margin: 0 auto; color: var(--text); font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(28px, 4.2vw, 58px); font-weight: 300; line-height: 1.22; letter-spacing: -.015em; text-wrap: balance;
  /* «Verantwortungsgefühl.» ist auf 320 px breiten Handys (28 px) breiter als die Zeile: im HTML steht dort ein
     weiches Trennzeichen (­), sonst wird nichts getrennt (automatisch trennte Safari «Mes-serspitzen») */
  -webkit-hyphens: manual; hyphens: manual;
}

.lia-zitat figcaption {
  margin-top: 24px; color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}

.lia-zitat .zitat-rolle { color: var(--gedaempft); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  html[data-zeigen-an] .lia-zitat-figur::before { transition: transform 1400ms cubic-bezier(.65, 0, .35, 1) 200ms; }
  html[data-zeigen-an] .lia-zitat-figur:not(.ist-da)::before { transform: scaleX(0); }
}

/* --- 3 Text (Creme-Karte, Raster aus css/stil.css «Über Lia») --- */

.lia-text .ueber-text > .ueberzeile { margin-bottom: 20px; }

.lia-lead {
  max-width: 30em; color: var(--tinte); font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(21px, 1.9vw, 27px); font-weight: 300; line-height: 1.5; text-wrap: pretty;
}

.lia-text .ueber-absatz { margin-top: 22px; }
.lia-text .ueber-absatz + .ueber-absatz { margin-top: 18px; }

/* Leitsatz aus Lias Logo (genau so, klein geschrieben) */
.lia-leitsatz { color: var(--tinte); font-family: var(--serif); font-size: 17px; font-style: italic; font-weight: 300; letter-spacing: .01em; }

@media (prefers-reduced-motion: no-preference) {
  .lia-text .ueber-text > :nth-child(4) { --verz: 320ms; }
}

/* --- 4 Moment: breites Foto mit Parallax, darüber «Fusion-Küche aus der ganzen Welt.» --- */

.lia-moment-buehne { position: relative; }
.lia-moment-rahmen { aspect-ratio: 4 / 3; }
.lia-moment-rahmen picture { height: 100%; transform: translate3d(0, calc(var(--v, 0) * -5%), 0) scale(1.12); }
.lia-moment-text { margin-top: 24px; }
.lia-moment-text .ueberzeile { margin-bottom: 14px; }
.lia-moment-text h2 { font-size: clamp(34px, 5vw, 76px); line-height: 1.05; letter-spacing: -.025em; }

@media (min-width: 900px) {
  .lia-moment-rahmen { aspect-ratio: 2 / 1; }

  /* Verlauf für die Schrift (Creme ≥ 7:1, Gold ≥ 4,5:1 an der Textstelle, mit sharp nachgemessen) */
  .lia-moment-rahmen::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(to top, rgba(27,24,20,.92) 0%, rgba(27,24,20,.86) 34%, rgba(27,24,20,.55) 56%, rgba(27,24,20,0) 78%),
      linear-gradient(to right, rgba(27,24,20,.6) 0%, rgba(27,24,20,0) 62%);
  }

  .lia-moment-text {
    position: absolute; bottom: 0; left: 0; z-index: 2; max-width: 46rem; margin: 0;
    padding: 0 32px clamp(36px, 4.4vw, 64px) clamp(36px, 4.4vw, 72px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-zeigen-an] [data-zeigen="moment"] .lia-moment-rahmen { transition: clip-path 1500ms var(--aus); }
  html[data-zeigen-an] [data-zeigen="moment"] .lia-moment-text { transition: opacity 1000ms var(--aus) 350ms, transform 1200ms var(--aus) 350ms; }
  html[data-zeigen-an] [data-zeigen="moment"]:not(.ist-da) .lia-moment-rahmen { clip-path: inset(8% 5% 8% 5% round 24px); }
  html[data-zeigen-an] [data-zeigen="moment"]:not(.ist-da) .lia-moment-text { opacity: 0; transform: translate3d(0, 24px, 0); }
}

/* --- 5 Grundsätze (Creme-Karte) --- */

.lia-liste { display: grid; gap: 0 48px; margin: 0; padding: 0; list-style: none; }
.lia-liste li { padding: 20px 0 24px; border-top: 1px solid var(--linie-hell); }
.lia-nr { display: block; color: var(--gold-dunkel); font-size: 12px; font-weight: 600; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.lia-liste h3 { margin-top: 12px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.2; }
.lia-liste p { max-width: 30em; margin-top: 12px; color: var(--tinte-leise); }

.lia-kochkurse {
  margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--linie-hell); color: var(--tinte-leise);
  font-family: var(--serif); font-size: 17px; font-style: italic; font-weight: 300;
}

@media (min-width: 900px) {
  .lia-liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Ungerade Zahl (heute 7, seit «Getränke aus Zürich», Lia 14.10.2026): der letzte Eintrag steht über beide Spalten,
     links Nummer und Titel, rechts der Satz, bündig mit den Spalten darüber (sonst stünde er allein in der linken Spalte).
     Der Satz steht in der Zeile des Titels, erste Zeile auf dessen Grundlinie: bricht er um (seit «vorzugsweise», Lia
     15.10.2026, am Computer immer zwei Zeilen; vorher nur 900 bis rund 1100 px), geht er nach unten weiter und klettert
     nicht zur Nummer hoch */
  .lia-liste > li:last-child:nth-child(odd) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px;
  }

  .lia-liste > li:last-child:nth-child(odd) :is(h3, p) { grid-row: 2; align-self: baseline; }
  .lia-liste > li:last-child:nth-child(odd) h3 { grid-column: 1; }
  .lia-liste > li:last-child:nth-child(odd) p { grid-column: 2; }
}

@media (prefers-reduced-motion: no-preference) {
  .lia-liste > :nth-child(2n) { --verz: 120ms; }
}

/* --- Bewegung reduzieren · Druck --- */

@media (prefers-reduced-motion: reduce) {
  .lia-parallax { transform: scale(1.06); }
  .lia-moment-rahmen picture { transform: scale(1.12); }
}

@media print {
  .lia-portraet::before, .lia-moment-rahmen::before { display: none; }
  .lia-moment-text { position: static; padding: 0; }
}