/* ═══════════════════════════════════════════════════════════════════════════
   Rechtstexte im Design der Startseite.

   WARUM ES DIESE DATEI GIBT (Befund Robert, 2026-08-28: "sie unterscheiden
   sich, sollen aber analog designt sein"):
   Die Startseite ist bewusst auf die Welt der APP gewechselt -- alle Werte 1:1
   aus android/.../ui/theme/Theme.kt ("Warm Precision v2.0"), mit der
   ausdruecklichen Begruendung, die Website habe sonst anders ausgesehen als
   das Produkt, das sie bewirbt. Die dreizehn Rechtstextseiten sind bei diesem
   Wechsel zurueckgeblieben und trugen weiter das warme Anthrazit #252830 aus
   dem Marketing-Handbuch.

   VORGEHEN, und warum so:
   Die Rechtstexte benennen ihre Farben --surface00/01/02, --primary, --accent.
   Diese Namen werden NICHT umbenannt, sondern UMGEHAENGT: jede vorhandene Regel
   greift damit sofort die neuen Werte ab, ohne dass 13 Dateien im Detail
   umgeschrieben werden muessten. Zusaetzlich stehen hier die Namen der
   Startseite, damit die geteilten Bauteile (brand-lockup.css, components.css)
   auf beiden Seitenarten dieselbe Grundlage vorfinden.

   Diese Datei wird NACH dem inline <style> der Seite geladen. Das ist kein
   Zufall, sondern die Bedingung: bei gleicher Spezifitaet gewinnt die spaetere
   Regel.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Die Namen der Startseite, 1:1 aus Theme.kt ───────────────────────── */
  --ground:     #0d1520;   /* NavyBase     */
  --surface:    #131e2e;   /* NavyCard     */
  --raised:     #1a2840;   /* NavyRaised   */
  --line:       #1e3050;   /* NavyBorder   */
  --line-soft:  #16253c;   /* NavyBorderSub */
  --action:     #9ea832;   /* OlivePrimary — Handlung */
  --brand:      #c49a6c;   /* GoldBrand    — Marke */
  --fg:         #eef1f6;   /* TextPrimary  — 15,9:1 auf --ground */
  --fg-muted:   #8a9bb5;   /* TextSecondary — 6,49:1 auf --ground */
  --measure:    66ch;

  /* ── Die vorhandenen Namen der Rechtstexte, umgehaengt ─────────────────
     Alt: #252830 / #2e3038 / #3a3840 / #f4ede4 / #a29990 (Handbuch-Palette). */
  --surface00:   var(--ground);
  --surface01:   var(--surface);
  --surface02:   var(--raised);
  --primary:     var(--brand);
  --primary-dim: #a07c52;

  /* ── --accent, und warum es hier NICHT mehr auf --brand zeigt ────────────
     Bis zum 02.09.2026 stand hier `--accent: var(--brand)` -- derselbe Wert wie
     `--primary` direkt darueber. Die einzige Regel im ganzen Bestand, die
     `var(--accent)` benutzt, ist `.callout.warn { border-left-color: ... }` auf
     den beiden Nutzungsbedingungen-Seiten. Sie war damit ein No-Op: neun
     Hinweiskaesten, vier davon als Warnung gemeint, sahen pixelgleich aus.
     ⭐ Dass die tote Regel monatelang niemandem auffiel, ist selbst der Beleg
     dafuer, dass sie nichts bewirkt hat (MIA-474).

     `--warn` ist AlertCoral aus `android/.../ui/theme/Theme.kt` -- der Warnton,
     den die App selbst benutzt. Bewusst NICHT das Olive `--action`: Olive heisst
     in dieser Welt "hier ist etwas zu tun", nicht "hier ist etwas zu beachten".
     Kontrast auf --surface01 (#131e2e): 6,11:1, also AA auch fuer Fliesstext. */
  --warn:        #ff7043;
  --accent:      var(--warn);
  /* --radius bleibt, wie die Seiten es gesetzt haben. */
}

body {
  background: var(--ground);
  color: var(--fg);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  /* Derselbe fluide Grad wie auf der Startseite -- Rechtstexte sind Fliesstext,
     sie duerfen nicht kleiner gesetzt sein als der Rest der Seite. */
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Ueberschriften: NUR das Gewicht der grossen Ueberschrift wird angeglichen.
   Die Startseite setzt grosse Ueberschriften auf 500 -- leicht und eng, nicht
   fett. Die Rechtstexte standen auf 700.

   ⚠ Bewusst NICHT pauschal ueber h1/h2/h3:
   `section h2` ist auf diesen Seiten KEIN Ueberschriftengrad, sondern ein
   kleines Versalien-Label (0,75rem, uppercase, gedaempft) -- dasselbe Muster,
   das die Startseite fuer ihre Eyebrows benutzt. Eine pauschale Regel haette
   genau dieses funktionierende Muster plattgemacht. Gleiche Sprache heisst
   nicht gleiche Groesse an jeder Stelle. */
.page-header h1 {
  font-weight: 500;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--fg);
}

/* Zeilenlaenge. Ein Rechtstext ueber die volle Fensterbreite ist unlesbar --
   und wird deshalb nicht gelesen, was bei genau diesen Texten der Punkt ist. */
p, li { max-width: var(--measure); }

a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand); }

/* Trennlinien und Flaechen auf die Navy-Werte ziehen -- die Regeln der Seiten
   zeigen teils auf harte Farben statt auf ihre eigenen Namen. */
hr, .rule { border-color: var(--line); }


/* ═══════════════════════════════════════════════════════════════════════════
   HINWEISKAESTEN -- drei Arten, die sich unterscheiden (MIA-474)

   ⚠️ Die Unterscheidung laeuft ueber TEXT, nicht ueber Farbe. Das ist keine
   Feinheit, sondern WCAG 1.4.1: Farbe darf nie das einzige Mittel sein, das
   eine Information traegt. Wer die Kaesten nur einfaerbt, hat die Verwechslung
   verschoben statt behoben -- und auf einer Seite, die Haftung und
   Tierarztvorbehalt regelt, ist eine verwechselte Warnung kein Schoenheitsfehler.

   Die Farbe bleibt trotzdem: sie ist die REDUNDANTE zweite Spur, die den
   Unterschied auf einen Blick lesbar macht, statt ihn erst beim Lesen.

     .callout           Hinweis      Gold   --primary
     .callout.notice    Aenderungen  Olive  --action   (Handlung: erneut zustimmen)
     .callout.warn      Wichtig      Coral  --warn

   Warum `notice` ueberhaupt existiert: die beiden Kaesten im Seitenkopf sind
   inhaltlich Vergangenheit und Zukunft -- "so liegt der Text vor" und "so wird
   er sich aendern". Zwei Kaesten mit demselben Label waeren wieder ununter-
   scheidbar gewesen; ein Label, das beide gleich benennt, verschiebt das
   Problem nur eine Ebene weiter nach innen.
   ═══════════════════════════════════════════════════════════════════════════ */

.callout > .callout__label {
  /* Dasselbe Versalien-Muster, das diese Seiten fuer `section h2` benutzen --
     der Kasten bekommt kein neues Vokabular, sondern das vorhandene. */
  margin: 0 0 0.4rem;
  max-width: none;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
}

.callout.notice {
  border-left-color: var(--action);
  /* 6 % Deckkraft -- gerade genug, dass die Kastenart als Flaeche mitspricht,
     zu wenig, um den Fliesstextkontrast anzutasten. */
  background: color-mix(in srgb, var(--action) 6%, var(--surface01));
}
.callout.notice > .callout__label { color: var(--action); }

.callout.warn {
  border-left-color: var(--warn);
  /* ⚠️ Gold und Coral liegen in der HELLIGKEIT nur 1,07:1 auseinander -- in
     Graustufen waeren die beiden Kanten praktisch identisch. Das Label traegt
     die Unterscheidung ohnehin (WCAG 1.4.1); die breitere Kante ist die zweite
     farbfreie Spur, damit der wichtigste Kasten auch beim Ueberfliegen als
     anderer Kasten auffaellt. */
  border-left-width: 5px;
  background: color-mix(in srgb, var(--warn) 6%, var(--surface01));
}
.callout.warn > .callout__label { color: var(--warn); }

/* Aeltere Browser ohne color-mix() bekommen die Grundflaeche und die farbige
   Kante -- die Kastenart bleibt an Label und Kante ablesbar. */
@supports not (background: color-mix(in srgb, red 6%, blue)) {
  .callout.notice, .callout.warn { background: var(--surface01); }
}