/* ═══════════════════════════════════════════════════════════════
   tokens.css — Gemeinsame Design-Tokens für alle Seiten
   Wird NACH dem seitenspezifischen CSS geladen und überschreibt
   dessen :root-Werte. Eine Quelle für Farbe, Schrift, Fokus.
   Identität: ruhig · souverän · würdevoll (siehe DESIGN.md)
═══════════════════════════════════════════════════════════════ */

:root {
  /* Markenfarbe: tiefes Tannengrün — Ruhe & Sicherheit statt Behörden-Navy */
  --brand:        #14584A;
  --brand-hover:  #0E4237;
  --brand-deep:   #0F3A30;
  --brand-pale:   #EAF4F0;
  --brand-border: #BFDCD2;

  /* Neutrale, minimal zur Markenfarbe getönt */
  --ink:          #16211D;
  --bg:           #FBFCFB;
  --surface-alt:  #F2F6F4;

  /* Signalfarben: Rot NUR für Notruf/Gefahr, Amber NUR für Warnhinweise */
  --red:          #A7352A;
  --red-mid:      #B8463B;
  --amber-mid:    #8A5514;   /* dunkler als das Alt-Amber: 5,7:1 auch auf getönten Flächen */

  /* Alias-Auflösung: beide Altsysteme nutzten --blue/--navy */
  --blue:         var(--brand);
  --blue-hover:   var(--brand-hover);
  --blue-pale:    var(--brand-pale);
  --blue-border:  var(--brand-border);
  --navy:         var(--brand-deep);
  --navy-mid:     #1C4A3E;

  /* Typografie */
  --font:         'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --font-head:    'Bitter', Georgia, 'Times New Roman', serif;
}

/* ── Überschriften & Marke in Bitter ── */
h1, h2, h3, h4,
.section-title,
.logo-name,
.brand {
  font-family: var(--font-head);
}

h1, h2, .section-title {
  letter-spacing: -0.015em;
}

h1, h2, h3 {
  text-wrap: balance;
}

/* ── Fokus site-weit identisch ── */
:focus-visible {
  outline: 3px solid #B45309;
  outline-offset: 3px;
}

/* ── Schriftgrößen-Umschalter: aktiver Zustand in Markenfarbe ── */
.fs-switch button[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ── Markenfarbe an hartkodierten Stellen der Altsysteme ── */
.logo-badge,
.brand-mark {
  background: var(--brand);
  color: #fff;
}

.notruf-section {
  background: var(--brand-deep);
}

footer,
.site-footer {
  background: #10201B;
}

/* Das Logo-Markup wird auch im dunklen Footer verwendet — dort helle Schrift.
   (Ohne diese Regel erbt es die Ink-Farbe des hellen Headers = unsichtbar.) */
footer .logo-name,
.site-footer .logo-name {
  color: #fff;
}

footer .logo-domain,
.site-footer .logo-domain {
  color: #C9E5DB;
}

.mobile-nav {
  background: var(--brand-deep);
}

@media (max-width: 768px) {
  .mobile-nav {
    background: var(--brand-deep);
  }
}

/* Startseite: Primär-Button vom Ink-Schwarz auf Markenfarbe */
.btn-primary {
  background: var(--brand);
}

.btn-primary:hover {
  background: var(--brand-hover);
}

/* Regel-Nummern, Schritt-Nummern: Markenfarbe (statt Navy/Ink) */
.hr-num,
.steps li::before {
  background: var(--brand);
}

/* Sektions-Wechselflächen minimal grün getönt */
section.alt,
.section.alt {
  background: var(--surface-alt);
}