/* 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;
  --gold-rot: var(--accent-2); /* Gold auf rotem Grund (Kopf, Fuß, Spruchband) */
  --danger: #b3261e;
  --ok: #2e7d32;
  --wappen-gruen: #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: #6d1713;
  --accent-text: #f3e2b3;
  --accent-2: #c9a227;
  --gold-rot: #e8c45c; /* heller als --accent-2, das auf Rot zu senfig wirkt. Nur für Flächen und Linien, nie für Schrift */
  --danger: #8f1515;
  --ok: #295425;
  --wappen-gruen: #14551e; /* Grün aus dem Wappen (img/wappen.png) */
  --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;
}
/* Alte Landkarte mit Vignette als Hintergrund. Eigene fixierte Ebene statt background-attachment: fixed,
   das ignorieren iPhones. */
:root body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(90, 50, 10, .30) 100%), url("../img/landkarte.svg") center / cover no-repeat;
}
@media print { :root body::before { display: none; } }

/* Text direkt auf der Landkarte: Überschriften bekommen einen Pergament-Schein, Fließtext liegt auf einem Zettel (die Rangliste der Academy hat ihre eigenen Karten)
   (Pergament mit ausgefranstem Rand), damit die Ortsnamen der Karte nicht mit dem Text konkurrieren */
:root main.container > :is(h2, h3), :root main.container > section > h2 { text-shadow: 0 0 2px var(--bg), 0 0 6px var(--bg), 0 0 12px var(--bg); }
:root :is(main.container > p:not(:empty), main.container > ol:not(.ranks), main.container > ul, .sticker-galerie > p, .hero .slogan, .tor-info, .intro) { position: relative; isolation: isolate; padding: 16px 22px; }
:root :is(.hero .slogan, .tor-info) { width: fit-content; max-width: 100%; margin-inline: auto; padding: 10px 22px; }
:root .sticker-galerie > p { grid-column: 1 / -1; width: fit-content; max-width: 100%; margin: 0; } /* Hinweis in der leeren Galerie: über alle Spalten, Zettel nur so breit wie der Text */
:root main.container > :is(ol:not(.ranks), ul) { padding-left: 2.6em; }
:root :is(main.container > p:not(:empty), main.container > ol:not(.ranks), main.container > ul, .sticker-galerie > p, .hero .slogan, .tor-info, .intro)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface);
  clip-path: polygon(0% 6%, 6% 0%, 14% 4%, 25% 0%, 38% 5%, 50% 1%, 63% 5%, 75% 0%, 88% 4%, 100% 0%, 99% 20%, 100% 40%, 98% 60%, 100% 80%, 98% 100%, 86% 95%, 72% 100%, 60% 96%, 47% 100%, 33% 95%, 20% 100%, 8% 95%, 0% 100%, 1% 80%, 0% 60%, 2% 40%, 0% 20%); }
@media print {
  :root main.container > :is(p, ol:not(.ranks), ul) { padding: 0; }
  :root :is(main.container > p:not(:empty), main.container > ol:not(.ranks), main.container > ul, .sticker-galerie > p, .hero .slogan, .tor-info, .intro)::before { display: none; }
}

/* Bewegung: Spruchband entrollt sich beim Laden, Mitgliederkarten heben sich, die Krone wackelt */
:root main.container > h1:first-child { animation: entrollen .9s .1s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes entrollen { from { clip-path: inset(-30% 50% -60% 50%); } to { clip-path: inset(-30% -2em -60% -2em); } }
:root .card.member { transition: transform .25s, box-shadow .25s; }
:root .card.member:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(70, 40, 10, .3); }
:root .card.member:hover .krone { animation: krone-wackeln .6s ease-in-out; }
@keyframes krone-wackeln { 25% { transform: translateX(-50%) rotate(-16deg); } 75% { transform: translateX(-50%) rotate(4deg); } }
:root #site-header { background: var(--accent); border-bottom: 4px solid var(--gold-rot); }
:root .brand { color: var(--accent-text); 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-text); }
:root .nav-liste > li > a.nav-cta { background: var(--gold-rot); color: var(--accent); }
:root .nav-menu b { font-family: "Cinzel", serif; font-size: .9rem; }
@media (max-width: 1060px) {
  :root #site-nav { background: var(--accent); border-bottom: 4px solid var(--gold-rot); }
  :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-text); }
}
:root .nav-toggle { background: transparent; color: var(--accent-text); border-color: var(--gold-rot); }
:root h1, :root h2 { color: var(--accent); }
:root .hero h1 { font-weight: 400; font-size: clamp(3rem, 10vw, 5.5rem); }
:root .hero .wappen { width: 210px; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
: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(--gold-rot); }
:root #site-footer a { color: var(--accent-text); }
:root #site-footer .muted { color: rgba(243, 226, 179, .75); }

/* Seitenkopf der Unterseiten: Titel als Spruchband, Einleitung mit Fraktur-Initiale */
:root main.container > h1:first-child { position: relative; isolation: isolate; width: fit-content; max-width: calc(100% - 2.6em); margin: 8px auto .7em; padding: .32em 1.1em .23em; /* oben mehr: Cinzel hat nur Großbuchstaben, der Platz für Unterlängen bleibt sonst unten leer */ text-align: center; text-wrap: balance; background: var(--accent); color: var(--accent-text); font-size: clamp(1.25rem, 5.6vw, 2.6rem); box-shadow: 0 3px 0 #4a0c0c; }
@media (max-width: 480px) { :root main.container > h1:first-child { padding: .32em .7em .23em; letter-spacing: 0; } }
:root main.container > h1:first-child::before, :root main.container > h1:first-child::after { content: ""; position: absolute; z-index: -1; top: .35em; width: 1.6em; height: 100%; background: #4f0e0e; }
:root main.container > h1:first-child::before { left: -1.2em; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .55em 50%); }
:root main.container > h1:first-child::after { right: -1.2em; clip-path: polygon(0 0, 100% 0, calc(100% - .55em) 50%, 100% 100%, 0 100%); }
/* Druck: helle Schrift auf Rot, ohne Hintergrund wäre das Spruchband auf Papier unsichtbar */
@media print {
  :root main.container > h1:first-child { animation: none; box-shadow: none; }
  :root main.container > h1:first-child, :root main.container > h1:first-child::before, :root main.container > h1:first-child::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* flow-root: bei einzeiliger Einleitung ragt die Initiale sonst in das nächste Element */
:root main.container > h1:first-child + .lead { display: flow-root; }
:root main.container > h1:first-child + .lead::first-letter { float: left; font-family: "UnifrakturMaguntia", serif; font-size: 3em; line-height: .8; margin: .08em .12em 0 0; padding: .14em .12em 0; color: var(--accent); border: 2px solid var(--accent-2); background: var(--surface); }

/* Mitgliederkarten und Hall of Fame: doppelter Goldrahmen, Nieten in den Ecken, zweiter Ring ums Foto. Führungsspitze zusätzlich mit Krone */
:root .card.member, :root .hof-karte, :root .hof-garde { border: 4px double var(--accent-2); }
:root .card.member::after, :root .hof-karte::after, :root .hof-garde::after { content: ""; position: absolute; inset: 6px; pointer-events: none; border: 1px solid rgba(201, 162, 39, .55);
  background:
    radial-gradient(circle, var(--accent-2) 3px, transparent 3.5px) 0 0 / 14px 14px no-repeat,
    radial-gradient(circle, var(--accent-2) 3px, transparent 3.5px) 100% 0 / 14px 14px no-repeat,
    radial-gradient(circle, var(--accent-2) 3px, transparent 3.5px) 0 100% / 14px 14px no-repeat,
    radial-gradient(circle, var(--accent-2) 3px, transparent 3.5px) 100% 100% / 14px 14px no-repeat; }
:root .card.member .avatar { position: relative; overflow: visible; border-width: 4px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
:root .card.member .avatar img { border-radius: 50%; }
:root .card.member.spitze { padding-top: 34px; }
/* Hall of Fame: Band über dem Innenrahmen, Name dunkel (Untertitel ist rot), Ring wie bei den Mitgliedern */
:root .hof-band { z-index: 1; }
:root .hof-karte h2 { color: var(--text); }
:root .hof-bild { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
:root .hof-bild.klein { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
:root .hof-karte.gedenken .hof-bild { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent), 0 0 26px 8px rgba(199, 210, 230, .9); }
.member .krone { position: absolute; top: -30px; left: 50%; width: 58px; transform: translateX(-50%) rotate(-6deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); z-index: 2; }