/* ============ Dunkel-Theme (Testlauf, Vorschlag 1) ============
   Trägt die Farbsprache der Startseite (vgl. --home-bg-deep/--home-accent in
   home.css) auf einzelne Unterseiten weiter. Aktiviert wird das ausschließlich
   über die Body-Klasse "theme-dark-page" im Frontmatter (bodyClass) — ohne
   diese Klasse ist diese Datei komplett wirkungslos. Sie überschreibt nur die
   Custom Properties aus tokens.css, die styles.css/article.css/[seite].css
   ohnehin schon fast überall verwenden, deshalb reicht dieser eine Block, um
   Nav, Footer, Sections und Karten auf einer Seite dunkel zu färben.

   .read-panel kehrt genau diese Tokens innerhalb eines Blocks wieder auf Hell
   um — für Fließtext-Abschnitte (lange Artikel, Tabellen, Listen), die auf
   Navy schwer lesbar würden. Sitzt bereits als zweite Klasse auf .article-wrap
   in _includes/article.njk und wird dadurch automatisch wirksam, sobald eine
   Artikelseite die theme-dark-page-Klasse trägt. */

body.theme-dark-page{
  --bg:#071a1d;
  --bg-soft:#0b2226;
  --surface:#10333a;
  --surface-soft:#164047;
  --ink:#f4f0e8;
  --ink-soft:rgba(244,240,232,.74);
  --line:rgba(244,240,232,.14);
  --accent:#ef7d3a;
  --accent-deep:#ff9f66;
  --accent-glow:rgba(239,125,58,.16);
}
body.theme-dark-page .nav::before{background:rgba(7,26,29,.82)}
body.theme-dark-page .nav-links a.nav-cta{color:#062023}

/* Logo-Punkt: der volle Petrol→Gold-Verlauf wirkt auf Navy wie ein
   Fremdkörper. Petrol bleibt die Markenfarbe (auf hellen wie dunklen Seiten
   wiederzuerkennen), aber nur noch als feiner Ring statt Verlaufsfläche. */
body.theme-dark-page .brand-dot{background:var(--bg-soft);border:1.5px solid var(--brand);color:var(--brand)}

body.theme-dark-page .read-panel{
  --bg:#e8e4dc;
  --bg-soft:#ddd8ce;
  --surface:#fbfaf7;
  --surface-soft:#f2eee7;
  --ink:#241f1a;
  --ink-soft:#6b6259;
  --line:rgba(36,31,26,.12);
  --accent:#16a3a3;
  --accent-deep:#0e7a7a;
  --accent-glow:rgba(22,163,163,.16);
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(28px,4vw,48px);
  box-shadow:0 30px 70px -40px rgba(7,26,29,.55);
}
@media(max-width:600px){
  body.theme-dark-page .read-panel{padding:28px 22px;border-radius:var(--radius-sm)}
}