/* Grundlage — Zurücksetzung, Typografie, Seitenrahmen.
   Jede Farbe, Schrift und jedes Maß steht als Variable. Der Bauschritt füllt
   sie aus projekt.json. Im Layout stehen keine festen Farbwerte. */

:root {
  /* Zwei Farben kommen aus projekt.json, alles Weitere leitet sich daraus ab.
     Ein neuer Kunde ändert deshalb genau zwei Werte, nicht zwanzig. */
  --marke-primaer: #1a1a1a;
  --marke-akzent: #444444;
  --marke-akzent-dunkel: color-mix(in srgb, var(--marke-akzent) 87%, #000);
  /* Diese fünf rechnet der Bauschritt aus den beiden Markenfarben aus und
     überschreibt sie in marke.css. Was hier steht, gilt nur, wenn die Datei
     fehlt — dann lieber ein sicherer Wert als unlesbare Schrift. Damit das
     stimmt, lädt die Seite marke.css nach dieser Datei; in umgekehrter
     Reihenfolge gewännen bei gleicher Spezifität die Rückfallwerte und jeder
     Kunde sähe grau aus. */
  --marke-primaer-text: var(--marke-primaer);
  --marke-akzent-text: var(--marke-akzent-dunkel);
  --marke-akzent-auf-dunkel: var(--marke-akzent);
  --marke-primaer-flaeche: var(--marke-primaer);
  --marke-akzent-flaeche: var(--marke-akzent);
  --auf-primaer: #fff;
  --auf-primaer-weich: #e8e8e8;
  --auf-primaer-leise: #c4c4c4;
  --auf-primaer-linie: #5a5a5a;
  --auf-primaer-flaeche-leise: #333333;
  --marke-fokus: var(--marke-akzent);
  --auf-akzent: #111;
  --schrift: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* ── Die Paletten ─────────────────────────────────────────────────────
     Eine Seite hat drei Gründe: hell, leise abgesetzt und die Markenfläche.
     Jede Textfarbe existiert deshalb für jeden davon. Welcher Satz gilt, entscheidet
     nicht das Gewicht eines Selektors, sondern das Element selbst über
     data-grund — und weil Variablen den Baum hinunter vererbt werden, kann
     eine helle Karte innerhalb einer dunklen Fläche ihre eigene Palette
     setzen, ohne dass ein Abschnittsselektor sie überstimmt. Genau daran
     ist die frühere Fassung gescheitert: dort standen weiße Überschriften
     auf weißen Karten, weil der Abschnitt weiter außen mehr Gewicht hatte. */
  --hell-flaeche: #fff;
  --hell-text: #111;
  --hell-text-weich: #333;
  --hell-text-leise: #555;
  --hell-linie: #e5e5e5;
  --hell-flaeche-erhoben: #fff;
  --hell-flaeche-leise: #f8f9fa;
  --hell-akzent-schrift: var(--marke-akzent-text);
  --hell-primaer-schrift: var(--marke-primaer-text);
  --hell-fokus: var(--marke-fokus);
  /* Eine Fläche, die einen Hauch Markenfarbe trägt: die Marke an einer Karte,
     der Status an einer Quelle. Sie steht hier und nicht verstreut in den
     Regeln, weil die Schriftfarbe darauf gerechnet wird — zwei Orte für
     dieselbe Zahl laufen auseinander, und dann fällt der Kontrast. */
  --hell-flaeche-akzent: color-mix(in srgb, var(--marke-akzent-text) 10%, #f8f9fa);
  --hell-flaeche-primaer: color-mix(in srgb, var(--marke-primaer-text) 10%, #f8f9fa);
  --hell-schatten: rgba(0, 0, 0, 0.16);

  /* Der leise Satz ist der helle mit vertauschten Flächen: der Abschnitt wird
     grau, und was darauf liegt — Kasten, Belegblock — wird weiß. Ohne diese
     dritte Fassung bräuchte jeder Baustein eine Sonderregel für den leisen
     Abschnitt, und genau solche Sonderregeln greifen später in fremde
     Bausteine hinein. */
  --leise-flaeche: #f8f9fa;
  --leise-flaeche-leise: #fff;

  --dunkel-flaeche: var(--marke-primaer-flaeche);
  --dunkel-text: var(--auf-primaer);
  --dunkel-text-weich: var(--auf-primaer-weich);
  --dunkel-text-leise: var(--auf-primaer-leise);
  --dunkel-linie: var(--auf-primaer-linie);
  --dunkel-flaeche-erhoben: var(--auf-primaer-flaeche-leise);
  --dunkel-flaeche-leise: var(--auf-primaer-flaeche-leise);
  --dunkel-akzent-schrift: var(--marke-akzent-auf-dunkel);
  --dunkel-primaer-schrift: var(--auf-primaer);
  --dunkel-fokus: var(--marke-akzent-auf-dunkel);
  /* Auf dunklem Grund bleibt die getönte Fläche die Fläche der Karte. Mit der
     Schriftfarbe aufgehellt müsste der Akzent so weit nachgeben, dass von der
     Marke nichts übrig bliebe; ihr Rahmen setzt sie ohnehin ab. */
  --dunkel-flaeche-akzent: var(--auf-primaer-flaeche-leise);
  --dunkel-flaeche-primaer: var(--auf-primaer-flaeche-leise);
  --dunkel-schatten: rgba(0, 0, 0, 0.32);

  /* Maße. Der Rand wächst mit dem Fenster: knapp auf dem Telefon, großzügig
     am Schreibtisch. Kopf, Aufmacher, Abschnitt und Fuß ziehen ihn aus
     derselben Variablen, damit jede Überschrift und jeder Absatz der Seite
     auf einer senkrechten Achse beginnen. */
  --rand: clamp(20px, 4.5vw, 44px);
  --seitenbreite: 1120px;
  --textbreite: 760px;
  --raum-flaeche: clamp(48px, 7vw, 88px);
  --raum-block: 32px;
  --aufmacher-hoehe: clamp(240px, 40vw, 520px);
  --kopf-hoehe: 72px;
}

/* ── Grund wechseln ───────────────────────────────────────────────────── */
/* Ein Element mit data-grund setzt die gesamte Palette für sich und alles
   darunter neu. Mehr braucht es nicht: kein Abschnittsselektor, der in
   fremde Bausteine hineingreift, und keine Sonderregel je Baustein. */
:root, [data-grund="hell"], [data-grund="leise"] {
  --flaeche: var(--hell-flaeche);
  --text: var(--hell-text);
  --text-weich: var(--hell-text-weich);
  --text-leise: var(--hell-text-leise);
  --linie: var(--hell-linie);
  --flaeche-erhoben: var(--hell-flaeche-erhoben);
  --flaeche-leise: var(--hell-flaeche-leise);
  --akzent-schrift: var(--hell-akzent-schrift);
  --primaer-schrift: var(--hell-primaer-schrift);
  --fokus: var(--hell-fokus);
  --flaeche-akzent: var(--hell-flaeche-akzent);
  --flaeche-primaer: var(--hell-flaeche-primaer);
  --schatten: var(--hell-schatten);
}

/* Der leise Satz weicht in genau zwei Werten ab; alles andere bleibt hell. */
[data-grund="leise"] {
  --flaeche: var(--leise-flaeche);
  --flaeche-leise: var(--leise-flaeche-leise);
}

[data-grund="dunkel"] {
  --flaeche: var(--dunkel-flaeche);
  --text: var(--dunkel-text);
  --text-weich: var(--dunkel-text-weich);
  --text-leise: var(--dunkel-text-leise);
  --linie: var(--dunkel-linie);
  --flaeche-erhoben: var(--dunkel-flaeche-erhoben);
  --flaeche-leise: var(--dunkel-flaeche-leise);
  --akzent-schrift: var(--dunkel-akzent-schrift);
  --primaer-schrift: var(--dunkel-primaer-schrift);
  --fokus: var(--dunkel-fokus);
  --flaeche-akzent: var(--dunkel-flaeche-akzent);
  --flaeche-primaer: var(--dunkel-flaeche-primaer);
  --schatten: var(--dunkel-schatten);
}

/* Wer eine Palette setzt, trägt auch ihre Farben — sonst bliebe die
   Umschaltung eine Absichtserklärung, die erst der nächste Baustein einlöst. */
[data-grund] { background: var(--flaeche); color: var(--text); }

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

/* Die Kopfleiste klebt oben. Ohne diese Zeile verschwindet jedes Sprungziel
   darunter, sobald jemand einem Link im Text folgt. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
  /* Deutsche Wortungetüme sprengen sonst schmale Spalten. */
  overflow-wrap: break-word;
}

/* Überschriften brechen nicht mit einem einzelnen Wort in der letzten Zeile,
   Absätze lassen keine Schusterjungen stehen. Wo ein Browser das nicht kennt,
   bleibt der gewöhnliche Umbruch — nichts geht verloren. */
h1, h2, h3, h4, .p-hero-zeile, .artikel-lead { text-wrap: balance; }
/* Auf schmalen Geräten bleibt sonst ein Funktionswort allein auf der Zeile
   stehen. Trennen ist dort das kleinere Übel als ein früher Umbruch. */
@media (max-width: 480px) { h1, h2, h3, h4 { hyphens: auto; } }
p, li { text-wrap: pretty; }

img { max-width: 100%; }

/* Sichtbar nur für Tastatur und Vorlesewerkzeuge */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Der Fokusring ist keine Schrift, sondern ein Bedienhinweis: gefordert sind
   3 zu 1 gegen den Grund. Ein Markenton wie Costas Gelb erreicht auf Weiß nur
   2,1 — der Ring bekommt deshalb seine eigene, nachgerechnete Fassung. */
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* ── Seitenkopf ───────────────────────────────────────────────────────── */
/* Derselbe Einzug wie Aufmacher und Abschnitt: sobald das Fenster breiter
   ist als die Spalte, wächst der Rand beidseitig — sonst stünde die Wortmarke
   bei 44 Pixeln und der Text bei mehreren hundert. */
.seite-kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 100;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: max(var(--rand), calc((100% - var(--seitenbreite)) / 2));
  padding-right: max(var(--rand), calc((100% - var(--seitenbreite)) / 2));
  display: flex; align-items: center; gap: 16px;
  height: var(--kopf-hoehe);
}
.seite-logo {
  font-size: clamp(1.1rem, 1rem + 0.8vw, 1.5rem); font-weight: 700;
  /* Die Wortmarke ist Schrift, also gilt die gerechnete Schriftfassung des
     Markentons. Der rohe Ton stand hier 2,1 zu 1 auf Weiß. */
  color: var(--akzent-schrift);
  text-decoration: none; letter-spacing: -0.01em;
  /* Ein langer Betriebsname darf die Navigation nicht aus der Leiste drücken. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seite-logo span { color: var(--primaer-schrift); }

/* ── Hinweisleiste ────────────────────────────────────────────────────── */
.hinweisleiste {
  background: var(--flaeche); color: var(--text);
  text-align: center; margin: 0; padding: 8px var(--rand);
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.5;
}

/* ── Seitenfuß ────────────────────────────────────────────────────────── */
/* Der Fuß trägt Quellen und offene Punkte: Listen, die auf derselben Achse
   beginnen wie der Text darüber. Zentriert gesetzte Quellenangaben mit
   Nummern davor kann niemand lesen. */
.seite-fuss {
  background: var(--flaeche); color: var(--text);
  padding: var(--raum-flaeche) var(--rand) 48px; font-size: 0.8rem; margin-top: 80px;
}
.seite-fuss > * { max-width: var(--seitenbreite); margin-left: auto; margin-right: auto; }
.seite-fuss a { color: var(--akzent-schrift); text-decoration: underline; }
.seite-fuss .bildnachweis {
  margin-top: 24px;
  font-size: 0.72rem; line-height: 1.7; color: var(--text-leise);
}

/* ── Seitennavigation ─────────────────────────────────────────────────── */
.seite-nav { margin-left: auto; display: flex; gap: 12px; flex-shrink: 0; }
.seite-nav a {
  /* Auch hier gilt die gerechnete Schriftfassung, nicht der rohe Markenton:
     ein heller Markenton stünde sonst auf der weißen Leiste unter 4,5 zu 1. */
  color: var(--primaer-schrift);
  text-decoration: none;
  font-size: 0.875rem; font-weight: 700;
  padding: 6px 14px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  white-space: nowrap;
}
.seite-nav a:hover { border-color: var(--primaer-schrift); background: var(--flaeche-primaer); }

/* ── Offene Punkte im Seitenfuß ───────────────────────────────────────── */
.klaerfelder { margin-bottom: 28px; }
.klaerfelder h2 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--akzent-schrift); margin: 0 0 8px; }
.klaerfelder ul { margin: 0; padding-left: 20px; color: var(--text-weich); font-size: 0.875rem; line-height: 1.7; }
.klaerfelder li { margin-bottom: 4px; }

.seite-fuss-absender {
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
  font-size: 0.8125rem; color: var(--text-leise);
}

/* ── Schmale Fenster ──────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Auf dem Telefon wird diese Leiste angetippt, nicht angeklickt. Ihre Fläche
     war hier zuletzt kleiner als am Schreibtisch — genau verkehrt herum; mit 30
     Pixeln Höhe traf man sie mit dem Daumen nur mit Absicht. Der Kopf ist 72
     Pixel hoch, der Platz war also die ganze Zeit da. */
  .seite-nav a { padding: 11px 14px; font-size: 0.8rem; }
  /* Zwei Zeilen Versalien liest man, sechs nicht mehr. Auf dieser Breite bricht
     der Hinweis in fünf bis sechs Zeilen um, und gesperrte Großbuchstaben
     nehmen dem Auge dabei jede Wortform — ausgerechnet bei dem Satz, der sagt,
     dass die Seite ein Entwurf ist. Farbe und Platz bleiben, die Versalien
     gehen. */
  .hinweisleiste {
    text-transform: none; letter-spacing: 0.01em; text-align: left;
    font-size: 0.8rem; line-height: 1.55;
  }
}

/* ── Druck ────────────────────────────────────────────────────────────── */
/* Ein Pitch wird verschickt, und verschickt heißt meistens: als PDF. Was auf
   Papier nichts tut, kommt weg; die Sprungmarken der Kopfleiste zeigen im
   PDF ins Leere, und eine klebende Leiste wiederholt sich auf jeder Seite. */
/* Wer Bewegung im System abgestellt hat, hat einen Grund dafür. Die Übergänge
   sind Beiwerk; die Seite funktioniert ohne sie unverändert. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@page { margin: 16mm; }

@media print {
  body { background: #fff; }
  /* Eine dunkle Fläche behält ihre Farbe. Spart der Treiber sie weg, stünde
     sonst helle Schrift auf weißem Papier — deshalb die ausdrückliche Bitte,
     den Grund zu drucken, statt die Palette halb umzuschalten. */
  [data-grund="dunkel"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .seite-nav { display: none; }
  .seite-kopf { position: static; padding: 0; height: auto; margin-bottom: 16px; }
  .seite-fuss { page-break-inside: avoid; margin-top: 40px; }
  .hinweisleiste { border: 1px solid var(--linie); }
}