/* ==========================================================================
   LIA'S KITCHEN – Textseiten: /impressum/, /datenschutz/, englisch /en/legal-notice/ und /en/privacy/, und die
   404-Seite (nach css/stil.css, gleiche ?v=)
   Rechtstexte: nur Rahmen und Gestaltung. Der Wortlaut in <div class="rechtstext"> bleibt unverändert
   (texte/ hat dieselbe Fassung, werkzeuge/pruefen.py vergleicht). Grundstil der Textseiten: css/stil.css
   Abschnitt 10.
   Bewegung: nur transform, opacity und clip-path; der Endzustand ist der Grundstil (ohne Skript sichtbar);
   der Ken Burns der 404-Seite ruht ausser Sicht (seit 14.10.2026 ohne Knopf «Bewegung anhalten», Lia).
   ========================================================================== */


/* --- Gemeinsame Breite für Seiten-Kopf und Karte: Titel und Text beginnen auf derselben Linie --- */

.huelle-text { max-width: calc(60rem + 2 * var(--rand)); }
.textseite-kopf { padding-bottom: clamp(28px, 4vw, 48px); }
.textseite-kopf h1 { font-size: clamp(40px, 6.4vw, 76px); }

/* Lesbreite: 36em sind bei Montserrat etwa 65–72 Zeichen je Zeile */
.textseite .rechtstext { max-width: 36em; }
.textseite .hinweis-pruefen { max-width: 46rem; }

/* Englisch (Lia 14.10.2026, 1a): Hinweis im Seiten-Kopf von Legal notice und Privacy, dass die deutsche Fassung
   massgebend ist, mit Link zum deutschen Original (die einzige Ausnahme von «englische Seiten verlinken nur englische»,
   werkzeuge/pruefen.py). Ruhig wie eine Fussnote; der Link hat oben und unten Luft zum Antippen (wie .knopf-hinweis a) */
.sprache-massgebend { max-width: 36rem; margin: 18px 0 0; color: var(--gedaempft); font-size: 15px; line-height: 1.6; }
.sprache-massgebend a {
  padding-block: 14px; color: var(--gold); font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: .2em;
}

@media (hover: hover) {
  .sprache-massgebend a:hover { color: var(--text); }
}

/* Sprung zu einem Abschnitt (#anfrage usw.): eine feine Goldlinie über dem Titel zeigt, wo man gelandet ist */
.rechtstext section:target > h2::before {
  content: ""; display: block; width: 48px; height: 2px; margin-bottom: 14px; background: var(--gold);
  transform-origin: 0 50%;
}


/* --- Impressum: ab 900 px Titel links, Text rechts (wie eine Visitenkarte) --- */

@media (min-width: 900px) {
  .textseite-impressum .rechtstext { max-width: none; }

  .textseite-impressum .rechtstext section {
    display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 36em); column-gap: clamp(32px, 4vw, 64px);
    align-items: baseline;
  }

  .textseite-impressum .rechtstext section > h2 { grid-column: 1; grid-row: 1 / span 20; margin: 0; font-size: 1.375rem; }
  .textseite-impressum .rechtstext section > :not(h2) { grid-column: 2; margin-top: 0; }
  .textseite-impressum .rechtstext section > :last-child { margin-bottom: 0; }
}


/* --- Datenschutz: Liste der Abschnitte mit Sprunglinks (ab 1100 px links und beim Lesen stehend) --- */

.verzeichnis { margin: 0 0 40px; padding: 18px 24px 12px; border-radius: 20px; background: var(--sand); }

.hell .verzeichnis-titel { /* stärker als «.hell h2» */
  margin: 0 0 6px; color: var(--gold-dunkel); font-family: var(--sans); font-size: 12px; font-weight: 600;
  line-height: 1.6; letter-spacing: .2em; text-transform: uppercase;
}

.verzeichnis ol { margin: 0; padding: 0; list-style: none; counter-reset: abschnitt; }
.verzeichnis li { counter-increment: abschnitt; break-inside: avoid; border-top: 1px solid var(--linie-hell); }

.hell .verzeichnis .textlink {
  display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 44px; padding: 11px 0 10px;
  color: var(--tinte); font-size: 15px; font-weight: 500; line-height: 1.4; text-decoration-line: none;
}

.hell .verzeichnis .textlink::before {
  content: counter(abschnitt, decimal-leading-zero); flex: none; min-width: 2.2em; color: var(--gold-dunkel);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .hell .verzeichnis .textlink:hover { color: var(--gold-dunkel); text-decoration-line: underline; }
}
.textseite-ende { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--linie-hell); }

@media (min-width: 600px) and (max-width: 1099px) {
  .verzeichnis ol { columns: 2; column-gap: 40px; }
}

@media (min-width: 1100px) {
  .textseite-raster {
    display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 36em); column-gap: clamp(48px, 5vw, 80px);
    align-items: start;
  }

  .verzeichnis {
    position: sticky; top: calc(112px + var(--band)); max-height: calc(100vh - 136px - var(--band));
    max-height: calc(100svh - 136px - var(--band)); margin: 0; overflow-y: auto; overscroll-behavior: contain;
  }

  .textseite-ende { display: none; }
}


/* --- 404: dunkel, Text links, ein Foto mit Ken Burns rechts (auf dem Handy darunter) --- */

.fehlt { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; }
.fehlt-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.fehlt h1 { max-width: 9em; }
.fehlt .einleitung { color: var(--text); }
.fehlt .seite-fehlt-liste { max-width: 28rem; } /* Abstand oben aus css/stil.css (28 px) */
.fehlt-englisch { margin: 20px 0 0; color: var(--gedaempft); font-size: 15px; } /* englischer Satz mit Link zu /en/ */

.fehlt-bild { width: 100%; max-width: 440px; }
.fehlt-rahmen { aspect-ratio: 1 / 1; }
.fehlt-rahmen picture { height: 100%; transform-origin: 58% 44%; }

@media (min-width: 900px) {
  .fehlt-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 112px); }
  .fehlt-bild { justify-self: end; }
  .fehlt-rahmen { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Einstieg: das Foto öffnet sich von unten (Endzustand = Grundstil, ohne Scrollen) */
  .fehlt-rahmen { animation: lk-fehlt-auf 1400ms var(--aus) 250ms backwards; }

  /* Ken Burns nur mit Skript (html[data-bewegt]); bewusst nur Einzelwerte, damit die Ruhe-Regel darunter gilt
     (siehe css/stil.css Abschnitt 3) */
  html[data-bewegt] .fehlt-kamera {
    animation-name: lk-kamera; animation-duration: 18s; animation-timing-function: cubic-bezier(.37, 0, .63, 1);
    animation-delay: -3s; animation-iteration-count: infinite; animation-direction: alternate;
  }

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

  .rechtstext section:target > h2::before { animation: lk-ziel 900ms var(--aus) 150ms backwards; }
}

@keyframes lk-fehlt-auf { from { clip-path: inset(16% 0 0 0 round 24px); } }
@keyframes lk-ziel { from { transform: scaleX(0); } }


/* --- Druck: nur der Text (ohne Liste der Abschnitte und ohne Foto) --- */

@media print {
  .verzeichnis, .textseite-ende, .fehlt-bild { display: none !important; }
  .textseite .rechtstext { max-width: none; color: #000; }
  .textseite-impressum .rechtstext section { display: block; }
}