/* ═══════════════════════════════════════════════════════════════════════════
   Farbschicht (18.10.2026, Abnahme „mehr Farbe, ansonsten passt alles sehr gut“)

   Nur Farbe – Aufbau, Abstände, Texte und Funktion bleiben wie in app.css/hero.css/bericht.css.
   Wird in base.html NACH allen Seiten-Stylesheets geladen und überschreibt nur Farben.

   System:
   - Kupfer (--accent) bleibt die Handlungsfarbe: Knöpfe, Pfeile, Nummern der Reihenfolge.
   - Petrol ist die zweite Markenfarbe für Flächen: Hero-Band, Kopf der Beispielkarte,
     „Kurz gesagt“, Agentur-Band, Person-Band. Kupfer und Petrol sind Gegenfarben.
   - Ampelfarben (--ok/--warn/--crit) nur dort, wo ein Ergebnis steht.
   - Grund warm statt grau (Papier), damit die Seite nicht mehr „grau“ wirkt.
   Kontraste (hell): Petrol #0F4C5C auf weiß 9,6:1, auf --petrol-soft 8,4:1; weiß auf --petrol-ink 12:1.
   Keine Verläufe, keine Bewegung (Bewegung bleibt in hero.css/grafik.css).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #F6F3EE;            /* warmes Papier statt Grau */
  --line: #D6D0C6;
  --line-2: #A9A399;
  --surface-2: #EFEAE2;
  --ring-track: #E6E0D6;

  --petrol: #0F4C5C;        /* Text/Linien in Petrol – 9,6:1 auf weiß */
  --petrol-hover: #0A3743;
  --petrol-soft: #E3EEEF;   /* Flächen: Hero, Bericht-Kopf, Check-Kopf */
  --petrol-line: #A8C8CD;
  --petrol-ink: #0C3A46;    /* dunkle Bänder */
  --on-petrol-ink: #FFFFFF;
  --on-petrol-ink-2: #C9DEE1;
  --petrol-ink-label: #8FC6CF;
  --kupfer-hell: #F0A877;   /* Kupfer auf dunklem Petrol (Hover, Akzent) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121416; --line: #34393D; --line-2: #4A5055; --surface-2: #22262A; --ring-track: #2C3236;
    --petrol: #86CBD6; --petrol-hover: #A6DCE4; --petrol-soft: #132A30; --petrol-line: #2E5560;
    --petrol-ink: #0E2F37; --on-petrol-ink: #F2F6F7; --on-petrol-ink-2: #B9CFD3; --petrol-ink-label: #86CBD6;
    --kupfer-hell: #E8A06F;
  }
}
:root[data-theme="dark"] {
  --bg: #121416; --line: #34393D; --line-2: #4A5055; --surface-2: #22262A; --ring-track: #2C3236;
  --petrol: #86CBD6; --petrol-hover: #A6DCE4; --petrol-soft: #132A30; --petrol-line: #2E5560;
  --petrol-ink: #0E2F37; --on-petrol-ink: #F2F6F7; --on-petrol-ink-2: #B9CFD3; --petrol-ink-label: #86CBD6;
  --kupfer-hell: #E8A06F;
}

/* ── Überall ─────────────────────────────────────────────────────────────── */
.label { color: var(--petrol); }
.site-header { border-top: 3px solid var(--signet); }
.brand-name span { color: var(--accent); }
.nav-main a[aria-current="page"] { color: var(--petrol); box-shadow: inset 0 -2px 0 var(--accent); }

/* Zweiter Knopf: Petrol statt Grau */
.btn-secondary { color: var(--petrol); border-color: var(--petrol); }
.btn-secondary:hover { color: var(--petrol-hover); border-color: var(--petrol-hover); background: var(--petrol-soft); }


/* ── Startseite: Hero ────────────────────────────────────────────────────── */
.hero-v2 { background: var(--petrol-soft); border-bottom: 1px solid var(--petrol-line); }
.hero-wege li::before { background: var(--petrol); border-color: var(--petrol); color: var(--surface); }
.hero-wege li.is-aktiv::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hero-v2 .hero-agentur { border-top-color: var(--petrol-line); }
.hero-agentur a { color: var(--petrol); }

/* Prüfstand („So sieht Ihr Ergebnis aus“): Farben in hero.css, weil die Fläche selbst Petrol ist (22.10.2026). */

/* Bereichsliste: Nummern in Petrol, Pfeil bleibt Kupfer */
.areas-num { color: var(--petrol); font-weight: 600; }
.areas-list { border-top-color: var(--petrol); }

/* ── Ablauf-Grafik und Prüfgrafiken (Start- und Check-Seiten) ───────────── */
.gr-nr { color: var(--accent); font-weight: 600; }
.gr-strich-dick { stroke: var(--petrol); }
.gr-knoten { stroke: var(--petrol); }
.gr-knoten-wurzel { fill: var(--petrol); stroke: var(--petrol); }
.gr-punkt { fill: var(--accent); }
.gr-gw-fg { fill: var(--petrol); }
.gr-start { background: var(--petrol-ink); color: var(--on-petrol-ink); }
.gr-stufe { border-top: 3px solid var(--petrol); }
.steps li { border-top-color: var(--petrol); }
.steps li::before { color: var(--accent); }

/* „So läuft der Check“: Bilder auf Petrol-Grund, Verbinder in Petrol, Nummern in Kupfer,
   Maßnahmenplan als Ampel nach Dringlichkeit (rot → orange → gelb → grün) */
.gr-schritt .gr-nr { color: var(--accent); }
.gr-ablauf .gr-bild { background: var(--petrol-soft); border-color: var(--petrol-line); }
.gr-schritt:not(:last-child)::after { background: var(--petrol); }
.gr-schritt:not(:first-child)::before { border-color: var(--petrol); }
.gr-ablauf .gr-schritt:nth-child(5) rect:nth-of-type(1) { fill: var(--crit); }
.gr-ablauf .gr-schritt:nth-child(5) rect:nth-of-type(2) { fill: var(--high); stroke: none; }
.gr-ablauf .gr-schritt:nth-child(5) rect:nth-of-type(3) { fill: var(--warn); stroke: none; }
.gr-ablauf .gr-schritt:nth-child(5) rect:nth-of-type(4) { fill: var(--ok); stroke: none; }

/* ── Dunkles Band „Gebaut von einem …“: Petrol statt Schwarz ─────────────── */
.band-dark { background: var(--petrol-ink); color: var(--on-petrol-ink); }
.band-dark .label { color: var(--petrol-ink-label); }
.band-dark h2 { color: var(--on-petrol-ink); }
.band-dark p { color: var(--on-petrol-ink-2); }
.band-dark a { color: var(--on-petrol-ink); }
.band-dark a:hover { color: var(--kupfer-hell); }

/* ── Schluss-Aufruf der Startseite: Kupfer-Fläche ────────────────────────── */
.closing { background: var(--accent-soft); border-top: 3px solid var(--signet); }

/* ── Agentur-Band über dem Fuß: Petrol-Fläche ────────────────────────────── */
.agentur-band { background: var(--petrol-ink); border-top: 3px solid var(--signet); color: var(--on-petrol-ink); }
.agentur-band .label { color: var(--petrol-ink-label); }
.agentur-band h2 { color: var(--on-petrol-ink); }
.agentur-band p:not(.label):not(.btn-row) { color: var(--on-petrol-ink-2); }
.agentur-band .btn-secondary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.agentur-band .btn-secondary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.agentur-band .link-more { color: var(--on-petrol-ink); }
.agentur-band .link-more:hover { color: var(--kupfer-hell); }

/* ── Check-Seiten ────────────────────────────────────────────────────────── */
.check-head { background: var(--petrol-soft); border-bottom-color: var(--petrol-line); }
.check-head .crumbs a { color: var(--petrol); }
.check-head .check-einfach { border-left: 3px solid var(--accent); padding-left: var(--s-4); }
.check-facts { border-color: var(--petrol-line); border-top: 4px solid var(--petrol); }
.check-facts > p:not(.label) { color: var(--text); }
.check-facts dd { color: var(--petrol); }

/* ── Bericht ─────────────────────────────────────────────────────────────── */
.report-head { background: var(--petrol-soft); border-bottom-color: var(--petrol-line); }
.zf-title { color: var(--petrol); }
.zf-urteil { color: var(--text); border-left-width: 4px; }
.zf-urteil.tone-good { background: var(--ok-bg); }
.zf-urteil.tone-mid { background: var(--warn-bg); }
.zf-urteil.tone-bad { background: var(--crit-bg); }
.zf-urteil.tone-good strong { color: var(--ok); }
.zf-urteil.tone-mid strong { color: var(--warn); }
.zf-urteil.tone-bad strong { color: var(--crit); }
.zf-todo li::before { color: var(--accent); }
.zf-cov meter::-webkit-meter-optimum-value, .zf-cov meter::-webkit-meter-suboptimum-value, .zf-cov meter::-webkit-meter-even-less-good-value { background: var(--petrol); }
.zf-cov meter:-moz-meter-optimum::-moz-meter-bar, .zf-cov meter:-moz-meter-sub-optimum::-moz-meter-bar, .zf-cov meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--petrol); }
.zf-agentur a { color: var(--petrol); }

/* Druck: Flächen weiß, Farbe nur im Text */
@media print {
  :root, :root[data-theme="dark"] { --bg: #fff; --line: #ccc; --line-2: #999; --surface-2: #f2f2f2; --petrol: #000; --petrol-soft: #fff; --petrol-line: #ccc; --signet: #000; }
  .hero-v2, .check-head, .report-head, .closing, .band-dark, .agentur-band, .demo-kopf { background: #fff !important; color: #000 !important; }
  .band-dark h2, .band-dark p, .agentur-band h2, .agentur-band p, .demo-title, .demo-quelle { color: #000 !important; }
  .site-header { border-top: 0; }
}