/* Themes. base.css nutzt nur die Variablen; hier kommen Farben, Schriften
   und ein paar Theme-spezifische Extras dazu.
   Aktives Design: Heraldik (überschreibt den neutralen Fallback). */
/* Schriften selbst gehostet (keine Verbindung zu Google, DSGVO). Quelle: Fontsource, Lizenz: SIL OFL 1.1 (site/fonts/LIZENZ-OFL.txt).
   Cinzel und EB Garamond sind variable Schriften und decken alle Strichstärken ab. Nur lateinische Zeichen (inkl. Umlaute). */
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "UnifrakturMaguntia"; src: url("../fonts/unifrakturmaguntia.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* Neutraler Fallback */
:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #ece8df;
  --text: #1f1d1a;
  --muted: #6b665d;
  --border: #d8d2c6;
  --accent: #8a1c1c;
  --accent-text: #ffffff;
  --accent-2: #b8902c;
  --danger: #b3261e;
  --ok: #2e7d32;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: Georgia, "Times New Roman", serif;
  --font-display: var(--font-head);

  --radius: 8px;
  --shadow: 0 2px 10px rgba(0, 0, 0, .08);
  --max: 1080px;
}
.hero h1 { font-family: var(--font-display); }

/* ===== A · Heraldik ===== */
:root {
  --bg: #efe3c8;
  --surface: #f8efd9;
  --surface-2: #eadbb8;
  --text: #2b1d12;
  --muted: #6b5640;
  --border: #c9a227;
  --accent: #6e1414;
  --accent-text: #f3e2b3;
  --accent-2: #c9a227;
  --danger: #8f1515;
  --ok: #3d6b2a;
  --font-body: "EB Garamond", Georgia, serif;
  --font-head: "Cinzel", Georgia, serif;
  --font-display: "UnifrakturMaguntia", "Cinzel", serif;
  --radius: 2px;
  --shadow: 0 4px 14px rgba(70, 40, 10, .18);
}
/* „:root“ davor, damit diese Regeln base.css (wird danach geladen) überschreiben */
:root body {
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  font-size: 1.08rem;
}
:root #site-header { background: var(--accent); border-bottom: 4px solid var(--accent-2); }
:root .brand { color: var(--accent-2); font-family: "Cinzel", serif; letter-spacing: .08em; }
:root .nav-liste > li > a, :root .nav-gruppe-knopf { color: var(--accent-text); font-family: "Cinzel", serif; font-size: .9rem; letter-spacing: .05em; }
:root .nav-liste > li > a:hover, :root .nav-gruppe-knopf:hover, :root .nav-gruppe.offen .nav-gruppe-knopf { background: rgba(0, 0, 0, .2); }
:root .nav-liste > li > a[aria-current="page"] { background: rgba(0, 0, 0, .25); color: var(--accent-2); }
:root .nav-liste > li > a.nav-cta { background: var(--accent-2); color: var(--accent); }
:root .nav-menu b { font-family: "Cinzel", serif; font-size: .9rem; }
@media (max-width: 720px) {
  :root .nav-menu a { color: var(--accent-text); }
  :root .nav-menu a:hover { background: rgba(0, 0, 0, .2); }
  :root .nav-menu a[aria-current="page"] { background: rgba(0, 0, 0, .25); color: var(--accent-2); }
}
:root .nav-toggle { background: transparent; color: var(--accent-text); border-color: var(--accent-2); }
:root h1, :root h2 { color: var(--accent); }
:root .hero h1 { font-weight: 400; font-size: clamp(3rem, 10vw, 5.5rem); }
:root .hero .wappen { width: 190px; height: 225px; padding: 28px; background: var(--accent); border: 6px solid var(--accent-2); border-radius: 0 0 50% 50% / 0 0 40% 40%; box-shadow: var(--shadow); }
:root .card { border-width: 2px; }
:root .tor { border-style: double; border-width: 4px; }
:root .tor-label { font-family: "Cinzel", serif; }
:root #site-footer { background: var(--accent); color: var(--accent-text); border-top: 4px solid var(--accent-2); }
:root #site-footer a { color: var(--accent-2); }
:root #site-footer .muted { color: #d9c08a; }