/* Drift-Schutz: recht.css (Impressum, Datenschutz) baut Logo, Fuß und --kante nach. Änderungen an .logo,
   .fuss, --kante hier auch dort nachziehen.
   Coming-soon und 404 (spec.md §7.1, design.md §17.8): die Titelkarte des Films.
   Tintenschwarz, Hauptlogo in Knochen linksbündig, Unterkante bei 62 % der Höhe, darunter die Zeile. */
.dunkel { background: var(--tintenschwarz); color: var(--knochen); }

/* Seitenrahmen: Außenrand links/rechts für Inhalt und Fuß gemeinsam, damit alle Prozentwerte
   unten dieselbe Satzbreite meinen. Der Block (Logo, Zeile) steht unten wie eine Titelkarte vor
   der ersten Szene; darüber bleibt die Leere, nie vertikal zentriert (Fix Runde 1). */
.titelkarte { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 0 var(--rand);
  /* Abstand Unterkante Zeile → Oberkante Fuß. Desktop: Zeile endet bei 78 % der Höhe
     (Fuß = 7 × 8 px hoch); nie unter 6 × 8 px. */
  --luft: max(calc(22svh - var(--zeile) * 7 - var(--extra, 0px)), calc(var(--zeile) * 6));
  /* Logobreite: 7 von 12 Spalten, höchstens 1100 px (design.md §17.8, spec.md §7.1). Nur wenn der
     Viewport dafür zu niedrig ist, schrumpft das Logo über die Höhe (Logo + 4 × 8 px + zwei
     Zeilen à 1,5 rem × 1,4 passen über die 78-%-Linie); nie unter 480 px (design.md §10.3), außer
     die Satzbreite ist schmaler oder der Bildschirm zu niedrig (Handy quer, Eike 30.09.2026: die
     Titelkarte passt auf einen Bildschirm). Unter ≈ 470 px Höhe zählt statt der 78-%-Linie der Platz
     über Fuß (7 × 8 px) und Mindestluft (6 × 8 px); die 404 zieht ihre Zusatzzeile nur dort ab. */
  --logo-h: calc((min(78svh, 100svh - var(--zeile) * 13 - var(--extra, 0px)) - var(--zeile) * 4 - 4.2rem) * 4495 / 3601);
  --logo-b: min(1100px, max(min(100%, 480px, var(--logo-h)),
            min(calc(100% * 7 / 12 - var(--gutter) * 5 / 12), var(--logo-h))));
  /* Sichtbare linke Kante der Wortmarke (Haarlinie unter „THE LAST PIRATES“, 176/2880 der Maske):
     daran stehen Zeile und Fuß. */
  --kante: calc(var(--logo-b) * .0611); }
/* 404: der Link „Zur Startseite“ ist eine dritte Zeile mit eigenem Abstand. Sie geht vom Luftraum unten
   ab, nicht vom Logo – das Logo steht auf beiden Seiten gleich (Review T06 Runde 3, Nr. 10). */
.titelkarte:has(.zeile--weiter) { --extra: calc(2.1rem + var(--zeile) * 2); }
@media (max-width: 640px) { .titelkarte { --logo-b: 100%; --luft: calc(var(--zeile) * 6); } }

.start { display: grid; align-content: end; padding-bottom: var(--luft); }

/* Logo: zwei Ebenen desselben Maskenbilds (design.md §10.1: mask-image, Farbe per Token).
   Stufe nach tatsächlicher Logobreite × Pixeldichte: mobil höchstens 608 px, Desktop höchstens
   1100 px; 1440 bzw. 2880 erst, wenn das Logo breiter als 960 px werden kann (7 Spalten > 960 px erst
   ab ≈ 2060 px Viewportbreite, Höhe ≥ ≈ 1110 px; Schwelle 1800 px mit Reserve). Die Stufe bleibt
   bewusst knapp über der Logobreite: Wird eine Maske um mehr als Faktor 2 verkleinert, rechnet der
   Browser mit einer gröberen Zwischenstufe, und die Kratztextur der Logo-Datei verschwimmt. */
.logo { align-self: end; position: relative; width: var(--logo-b); aspect-ratio: 4495 / 3601;
  --maske: url(/media/logo/haupt-960.7d0230f3.webp); }
@media (max-width: 640px) and (min-resolution: 2dppx), (min-width: 1800px) { .logo { --maske: url(/media/logo/haupt-1440.293841d6.webp); } }
@media (min-width: 641px) and (min-resolution: 2dppx) { .logo { --maske: url(/media/logo/haupt-1920.a8d9d64c.webp); } }
@media (min-width: 1800px) and (min-resolution: 2dppx) { .logo { --maske: url(/media/logo/haupt-2880.3a41b4e2.webp); } }
/* Handy quer: das Logo ist über die Höhe begrenzt (≤ ≈ 370 px breit), bei 2×/3× reicht die 1440er. */
@media (min-width: 641px) and (max-height: 500px) and (min-resolution: 2dppx) { .logo { --maske: url(/media/logo/haupt-1440.293841d6.webp); } }
.logo span { position: absolute; inset: 0; background: var(--knochen);
  -webkit-mask-image: var(--maske); mask-image: var(--maske);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* Ebene A: Logo ∩ Körnung – das „Einkratzen“ (spec.md §7.1). Die Körnung ist ein 512-px-Ausschnitt
   der 1024er-Ableitung in 100 % (= 50 % der 2048er, design.md §11.1: nie kleiner, sonst werden
   die Kratzer Rauschen), wiederholt; sie läuft einmal um eine Kachelhöhe von oben nach unten.
   Ausschnitt statt ganzer Kachel wegen des Budgets (spec.md §14, Fix Runde 1). */
.logo .logo__kratz {
  -webkit-mask-image: var(--maske), url(/media/textur/koernung-alpha-kachel-512.fc51e4e9.webp);
  mask-image: var(--maske), url(/media/textur/koernung-alpha-kachel-512.fc51e4e9.webp);
  -webkit-mask-size: 100% 100%, 512px 512px; mask-size: 100% 100%, 512px 512px;
  -webkit-mask-repeat: no-repeat, repeat; mask-repeat: no-repeat, repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: kratzen .9s cubic-bezier(.2, .7, .2, 1) both, aus .4s .9s ease-out forwards; }
@keyframes kratzen {
  from { -webkit-mask-position: 0 0, 0 -512px; mask-position: 0 0, 0 -512px; }
  to   { -webkit-mask-position: 0 0, 0 0;      mask-position: 0 0, 0 0; } }
/* Ebene B: das volle Logo mit der Kratztextur der Logo-Datei blendet danach in 0,4 s auf, Ebene A
   gleichzeitig aus (sonst füllt die Körnung die Kratzer der Datei zufällig auf) – dann steht alles
   still, im texturierten Logo (Freigabe Eike, Task 6 A1). */
.logo__voll { opacity: 0; animation: voll .4s .9s ease-out forwards; }
@keyframes voll { to { opacity: 1; } }
@keyframes aus { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .logo__kratz { display: none; } .logo__voll { opacity: 1; animation: none; } }

/* Die Zeile: Source Serif 1,5 rem, DE aufrecht, EN kursiv, an der Logokante, 4 × 8 px unter
   dem Logo (die Maske hat unter dem Untertitel selbst 7,7 % ihrer Höhe Leerraum). */
.zeile { margin: calc(var(--zeile) * 4) 0 0 var(--kante); font-size: 1.5rem; line-height: 1.4; max-width: 32ch; }
.zeile + .zeile { margin-top: 0; }
.zeile + .zeile--weiter { margin-top: calc(var(--zeile) * 2); } /* 404: Link mit Abstand, s. o. */
.zeile[lang="en"] { font-style: italic; }

/* Fuß: Source Serif klein (kein Werkschild, also kein Code), unten links an derselben Kante,
   7 × 8 px hoch: Zeile 24 px + 2 × 4 px Trefferfläche + 3 × 8 px Abstand zum unteren Rand. */
.fuss { display: flex; flex-wrap: wrap; gap: 0 calc(var(--zeile) * 3); font-size: .875rem; line-height: 1.5rem;
  padding: 0 0 calc(var(--zeile) * 3) var(--kante); }
.fuss a { color: var(--knochen); padding-block: calc(var(--zeile) / 2); }

/* Unterstreichung auf diesen Seiten ausdrücklich: 1 px, bei hover/Fokus 2 px, keine Farbänderung,
   kein Übergang. */
.titelkarte a { text-decoration-thickness: 1px; text-underline-offset: .22em; }
.titelkarte a:hover, .titelkarte a:focus-visible { text-decoration-thickness: 2px; }