/* Cardo Design „Klar bis Kino“: Grundlage für alle Seiten. Schrift, Tokens, Reset, Kopf, Fuß, Rechtsseiten.
   Quelle aller Werte: DESIGN-BRIEF.md (Abschnitte 2, 6, 8). Keine externen Verbindungen, Schrift liegt in fonts/. */

/* ---------- Schrift: nur Outfit (variabel 100 bis 900, OFL, Fontsource 5.3.0), die Schrift des Logos ---------- */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/outfit-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/outfit-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/outfit-latin-ext-wght-normal.woff2') format('woff2-variations'), url('../fonts/outfit-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Tokens (Brief 2 und 6) ---------- */
:root {
  --papier: #F5F1EA;
  --graphit: #2F2C28;
  --grau: #5E5A54;                       /* zweitrangiger Text, 6,1:1 auf Papierweiß */
  --kino: #161513;                       /* nur im Filmabschnitt */
  --kino-text: #F5F1EA;
  --kino-grau: #B9B2A6;                  /* 8,7:1 auf Kinoraum */
  --rahmen: rgba(47, 44, 40, .14);
  --rahmen-stark: rgba(47, 44, 40, .32);
  --flaeche: rgba(47, 44, 40, .05);      /* ruhige Platzhalterfläche (Foto folgt) */
  --radius-karte: 14px;
  --radius-taste: 999px;
  --kopf-hoehe: 56px;
  --rand: clamp(20px, 4vw, 56px);        /* Seitenrand */
  --breite: 1240px;                      /* Inhaltsbreite */
  --fs-text: 1.0625rem;                  /* 17 px am Handy */
  --fs-klein: .9375rem;                  /* 15 px */
  --schrift: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease-regler: cubic-bezier(.65, 0, .35, 1); --dur-regler: 2400ms;
  --ease-licht: cubic-bezier(.2, .7, .2, 1);   --dur-licht: 800ms;
  --ease-tipp: cubic-bezier(.2, .7, .2, 1);    --dur-tipp: 140ms;
  /* Einstieg, Runde 2 (Brief 4): Kugel je Fahrt, Takt 1 „Film in der Schrift“, Takt 2 „durch das o“, Auge des o, Zeilenaufbau, Atmen der Lampe */
  --dur-kugel: 600ms; --dur-takt1: 900ms; --dur-takt2: 1300ms; --dur-auge: 350ms; --dur-zeile: 700ms; --dur-atmen: 3500ms;
  --dur-blende: 200ms;   /* Runde 3: Text blendet vor dem Flug weg, nur die Maske fliegt */
  /* Runde 5, Lebendig („Abendlicht im Café“): Aufbau Wort für Wort, warmer Grund, Birne (zwei unregelmäßige Flacker-Muster), Lichter, kleine Eigenbewegung */
  --dur-wort: 640ms; --takt-wort: 105ms; --dur-warm: 1100ms;
  --dur-flackern: 4.7s; --dur-flackern-2: 3.1s; --dur-glimmen: 6.5s; --dur-schimmern: 7s; --dur-schweben: 3.6s;
  /* Marke (Cardo Design, 09.10.2026, Logo von Riccardo): Schriftfarben des Logos und der Verlauf seines Goldstrichs (Knopf des Reglers) */
  --logo-dunkel: #2F2C28; --logo-hell: #F9F5EF;
  --gold-verlauf: linear-gradient(90deg, #C99866 0%, #C19262 50%, #CB9E6F 100%);
}
@media (min-width: 761px) { :root { --fs-text: 1.125rem; } }   /* 18 px am Rechner */

/* ---------- Reset und Grundtypografie ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papier); color: var(--graphit); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100svh; padding-top: var(--kopf-hoehe); font: 400 var(--fs-text)/1.55 var(--schrift); color: var(--graphit); background: var(--papier);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
[hidden] { display: none !important; }
::selection { background: rgba(47, 44, 40, .18); }
:focus-visible { outline: 2px solid var(--graphit); outline-offset: 3px; border-radius: 4px; }
[data-kopf="dunkel"] .kopf :focus-visible, .filme :focus-visible { outline-color: var(--kino-text); }

.visuell-versteckt { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

/* Sprunglink (nur bei Tastatur sichtbar) */
.sprung { position: fixed; left: var(--rand); top: -200px; z-index: 40; padding: .6em 1.1em; background: var(--graphit); color: var(--papier); border-radius: var(--radius-taste); text-decoration: none; }
.sprung:focus-visible { top: calc(var(--kopf-hoehe) + 12px); outline-color: var(--graphit); }

/* ---------- Kopf: fest oben, eigener Hintergrund, nie über Text (Brief 3.0) ---------- */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--kopf-hoehe); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-inline: var(--rand); background: rgba(245, 241, 234, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(47, 44, 40, .08); color: var(--graphit); transition: background var(--dur-tipp) var(--ease-tipp), color var(--dur-tipp) var(--ease-tipp); }
[data-kopf="dunkel"] .kopf { background: rgba(22, 21, 19, .92); color: var(--kino-text); border-bottom-color: rgba(245, 241, 234, .1); }
.marke { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 2px; color: var(--logo-dunkel); text-decoration: none; border-radius: 6px;
  transition: color var(--dur-tipp) var(--ease-tipp); }   /* Tippfläche ≥ 32 px */
[data-kopf="dunkel"] .marke { color: var(--logo-hell); }   /* Kino: helle Fassung des Logos */
/* Kopf-Logo (Cardo, 09.10.2026): nur der Schriftzug „cardo“ (marke/cardo-zug.svg, ohne DESIGN, das bei dieser Höhe unlesbar wäre), 34 px hoch.
   Das d ragt weit nach oben, die Buchstaben sitzen im unteren Teil: 4 px angehoben, damit sie mit „Schreib mir“ auf einer Höhe stehen. */
.logo { height: 34px; width: auto; fill: currentColor; color: inherit; overflow: visible; transform: translateY(-4px); }
.fuss__logo { display: block; height: clamp(72px, 50px + 2.6vw, 88px); width: auto; }   /* volles Logo: DESIGN mit gut 7,5 bis 9 px Versalhöhe */
.kopf__knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 1.15em; border-radius: var(--radius-taste);
  background: var(--graphit); color: var(--papier); font-weight: 500; font-size: var(--fs-klein); line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-tipp) var(--ease-tipp), color var(--dur-tipp) var(--ease-tipp), transform var(--dur-tipp) var(--ease-tipp); }
[data-kopf="dunkel"] .kopf__knopf { background: var(--kino-text); color: var(--kino); }
.kopf__knopf:active { transform: translateY(1px); }
@media (hover: hover) {
  .kopf__knopf:hover { background: #1F1D1A; }
  [data-kopf="dunkel"] .kopf__knopf:hover { background: #FFFFFF; }
}
/* Sprunglinks (Cardo-Runde, 09.10.2026): rechts vor „Schreib mir“, ruhig in Graphit 70 % (5:1 auf Papier); der Abschnitt unter dem Kopf
   (aria-current aus js/main.js) steht voll, mit feinem Goldstrich aus dem Logo darunter. Am Handy keine, 761 bis 1023 px ohne „Filme“. */
.kopf__nav { display: none; }
@media (min-width: 761px) {
  .kopf__nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2rem); margin-left: auto; margin-right: clamp(.75rem, 1.6vw, 1.5rem); }
  .kopf__nav a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding-inline: 2px; font-size: var(--fs-klein); line-height: 1;
    white-space: nowrap; color: rgba(47, 44, 40, .7); text-decoration: none; transition: color var(--dur-tipp) var(--ease-tipp); }
  .kopf__nav a::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--gold-verlauf);
    opacity: 0; transform: scaleX(.4); transition: opacity 220ms var(--ease-licht), transform 220ms var(--ease-licht); }
  .kopf__nav a[aria-current="true"] { color: var(--graphit); }
  .kopf__nav a[aria-current="true"]::after { opacity: 1; transform: none; }
  [data-kopf="dunkel"] .kopf__nav a { color: rgba(245, 241, 234, .72); }
  [data-kopf="dunkel"] .kopf__nav a[aria-current="true"] { color: var(--kino-text); }
}
@media (min-width: 761px) and (max-width: 1023px) { .kopf__nav .kopf__nav-breit { display: none; } }
@media (min-width: 761px) and (hover: hover) {
  .kopf__nav a:hover { color: var(--graphit); }
  [data-kopf="dunkel"] .kopf__nav a:hover { color: var(--kino-text); }
}

/* ---------- Gemeinsame Typografie der Abschnitte ---------- */
.titel { font-weight: 300; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.unter { max-width: 56ch; color: var(--grau); text-wrap: pretty; }
.klein { font-size: var(--fs-klein); color: var(--grau); }
.taste { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 1.4em; border: 1px solid var(--graphit); border-radius: var(--radius-taste);
  background: var(--graphit); color: var(--papier); font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-tipp) var(--ease-tipp), border-color var(--dur-tipp) var(--ease-tipp), color var(--dur-tipp) var(--ease-tipp), transform var(--dur-tipp) var(--ease-tipp); }
.taste:active { transform: translateY(1px); }
.taste--leise { background: transparent; color: inherit; border-color: var(--rahmen-stark); }
@media (hover: hover) {
  .taste:hover { background: #1F1D1A; border-color: #1F1D1A; }
  .taste--leise:hover { background: rgba(47, 44, 40, .07); border-color: var(--graphit); color: inherit; }
}

/* ---------- Fuß (Brief 3.8) ---------- */
.fuss { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--rahmen); }
.fuss__innen { display: grid; gap: 1.5rem; }
.fuss__marke { display: grid; gap: .6rem; }
.fuss__zeile { color: var(--grau); }
.fuss__links { display: flex; flex-wrap: wrap; gap: 0 1.6rem; font-size: var(--fs-klein); }
.fuss__links a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; white-space: nowrap; }   /* Runde 6: Tippfläche ≥ 44 px, Nummer bricht nicht um */
.fuss__copy { font-size: var(--fs-klein); color: var(--grau); }
@media (min-width: 761px) {
  .fuss__innen { grid-template-columns: 1fr auto; align-items: end; }
  .fuss__copy { grid-column: 1 / -1; }
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.rechts { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 6rem); }
.rechts__innen { max-width: 70ch; }
.rechts h1 { font-weight: 300; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 1.5rem; }
.rechts h2 { font-weight: 500; font-size: 1.2rem; line-height: 1.3; margin: 2.2rem 0 .6rem; }
.rechts p, .rechts address { margin: 0 0 .9rem; max-width: 70ch; }
.rechts p em { color: var(--grau); font-style: normal; }
.rechts__fuss { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rahmen); font-size: var(--fs-klein); }
.rechts__fuss a { display: inline-flex; align-items: center; min-height: 44px; }   /* Runde 6: Tippfläche ≥ 44 px */
.rechts__fuss a[aria-current] { color: var(--grau); text-decoration: none; }

/* ---------- Bewegung reduzieren: keine Übergänge am Rahmen ---------- */
@media (prefers-reduced-motion: reduce) {
  .kopf, .kopf__knopf, .taste, .marke, .kopf__nav a, .kopf__nav a::after { transition: none; }
}