/* Lokal gehostet statt über Google Fonts nachgeladen (vorher uneinheitlich:
   nur voelker.css hatte diese Deklaration lokal) - läuft so auch bei
   geblocktem fonts.googleapis.com zuverlässig, auf jeder Seite gleich,
   da site-nav.css überall eingebunden ist. */
@font-face {
  font-family:'Jim Nightshade';
  src:url('../fonts/JimNightshade-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* ─── Zentrale Header-/Mega-Menü-/Such-/Cross-Link-Komponente ────────────
   Eigener, vollständiger Token-Satz (--nav-*), damit diese Komponente
   unabhängig davon funktioniert, welche Variablen die jeweilige Seite
   selbst definiert (nicht alle Seiten-Stylesheets führen z.B. --shadow). */
:root {
  --nav-ink:#090807; --nav-bone:#eee6d8; --nav-muted:#a99b89; --nav-gold:#c49a50;
  --nav-line:#463328; --nav-shadow:rgba(0,0,0,.58);
  --nav-bg:rgba(9,8,7,.96); --nav-panel-bg:#14100c;
}

/* ─── Topbar / Hauptlinks ─────────────────────────────────────────────── */
/* :where() hält diese Basis-Regeln bei Specificity 0: Seiten, die (wie
   index.html mit seinem schrumpfenden Header) selbst schon .topbar/.nav/
   .brand-logo definieren, behalten ihr eigenes Verhalten unverändert bei -
   diese Regeln greifen nur als Fallback für Seiten ohne eigene Definition
   (z.B. archiv.html). */
:where(.topbar) { border-bottom:1px solid var(--nav-line); background:var(--nav-bg); position:sticky; top:0; z-index:100; }
/* 1200px statt 1280px: praktisch jede Seite mit eigenem Topbar/.nav
   (sanctuary/hoelle/himmel-v2/welt/voelker/archiv/klassen/... ) definiert
   .nav lokal mit 1200px - dieser Fallback zieht mit dem Bestand gleich,
   statt umgekehrt auf allen anderen Seiten eine zweite Nav-Breite zu
   erzeugen (siehe Breiten-System-Audit). */
:where(.nav) { max-width:1200px; margin:auto; min-height:85px; padding:0 24px; display:flex; align-items:center; gap:8px; }
.nav { position:relative; } /* wird von keiner Seite selbst gesetzt, daher gefahrlos additiv */
:where(.brand) { display:flex; align-items:center; margin-right:20px; text-decoration:none; flex:none; }
:where(.brand-logo) { display:block; height:50px; width:auto; }

.nav-links { display:flex; align-items:stretch; gap:2px; flex:1; }
.nav-item { position:relative; display:flex; align-items:center; }
.nav-item > a {
  display:flex; align-items:center; height:100%; padding:0 14px;
  color:var(--nav-muted); text-decoration:none;
  font:650 .8rem/1 system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase;
  transition:color .2s ease;
}
.nav-item > a:hover, .nav-item > a:focus-visible { color:var(--nav-bone); }
.nav-item.is-active > a { color:var(--nav-gold); }

.nav-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-left:-8px; padding:0;
  color:var(--nav-muted); background:none; border:0; cursor:pointer;
}
.nav-toggle svg { width:10px; height:10px; transition:transform .2s ease, color .2s ease; }
.nav-item:hover .nav-toggle svg,
.nav-item:focus-within .nav-toggle svg,
.nav-item.is-open .nav-toggle svg { transform:rotate(180deg); color:var(--nav-gold); }

/* ─── Mega-Menü-Panel ──────────────────────────────────────────────────
   Trigger + Panel liegen im selben .nav-item ohne Lücke dazwischen, damit
   :hover beim Übergang von Link zu Panel nicht abreißt (kein JS-Timer nötig). */
.nav-panel {
  position:absolute; top:100%; left:0; margin-top:0;
  width:min(560px,86vw); padding:24px 28px;
  background:var(--nav-panel-bg); border:1px solid var(--nav-line);
  box-shadow:0 24px 48px var(--nav-shadow);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, visibility .16s ease;
  z-index:5;
}
.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel,
.nav-item.is-open .nav-panel { opacity:1; visibility:visible; pointer-events:auto; }
/* Die Menüpunkte 4 und 5 (Archiv, Wissen) sitzen rechts: ihr 560px-
   Panel ragte bei Breiten unter ~1250px rechts über den Viewport hinaus und
   erzeugte (auch im geschlossenen Zustand) seitliches Scrollen. Rechtsbündig
   öffnet es stattdessen nach links. */
.nav-item:nth-child(n+4) .nav-panel { left:auto; right:0; }

.nav-panel-title {
  display:block; margin-bottom:16px; color:var(--nav-gold);
  font:700 .7rem/1 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase;
}
.nav-panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.nav-panel-entry {
  display:block; padding:12px 6px; text-decoration:none;
  border-top:1px solid rgba(70,51,40,.55);
}
.nav-panel-grid > :nth-child(1), .nav-panel-grid > :nth-child(2) { border-top:0; }
.nav-panel-entry-title {
  display:block; color:var(--nav-bone);
  font:400 1rem/1.15 'Marcellus',Georgia,serif; letter-spacing:.02em;
}
.nav-panel-entry-desc {
  display:block; margin-top:5px; color:var(--nav-muted);
  font:400 .8rem/1.4 'Spectral',Georgia,serif;
}
a.nav-panel-entry:hover .nav-panel-entry-title,
a.nav-panel-entry:focus-visible .nav-panel-entry-title { color:var(--nav-gold); }
.nav-panel-entry.is-disabled { cursor:default; opacity:.5; }
.nav-panel-badge {
  display:inline-block; margin-left:8px; padding:1px 6px;
  color:var(--nav-muted); font:700 .58rem/1.5 system-ui,sans-serif;
  letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--nav-line);
  vertical-align:middle;
}

/* ─── Suche (prominent statt Lupen-Icon) ───────────────────────────────── */
.nav-search-btn {
  display:inline-flex; align-items:center; gap:9px; margin-left:auto;
  padding:10px 18px; color:var(--nav-bone); background:rgba(255,255,255,.03);
  border:1px solid var(--nav-line); font:650 .74rem/1 system-ui,sans-serif;
  letter-spacing:.07em; text-transform:uppercase; cursor:pointer; flex:none;
  transition:border-color .2s ease, color .2s ease;
}
.nav-search-btn:hover, .nav-search-btn:focus-visible { border-color:var(--nav-gold); color:var(--nav-gold); }
.nav-search-btn svg { width:15px; height:15px; flex:none; color:inherit; }

.menu-btn { display:none; color:var(--nav-bone); background:none; border:1px solid var(--nav-line); padding:7px 10px; margin-left:14px; cursor:pointer; }

@media (max-width:860px) {
  :where(.nav) { min-height:70px; padding:0 18px; gap:10px; }
  :where(.brand) { margin-right:auto; }
  :where(.brand-logo) { height:38px; }
  .menu-btn { display:block; margin-left:0; }

  .nav-links {
    display:none; position:fixed; top:70px; left:0; right:0; bottom:0;
    height:calc(100vh - 70px); align-self:stretch; overflow-y:auto;
    flex-direction:column; align-items:stretch; gap:0; padding:14px 18px 100px;
    background:#0d0b0a; border-top:1px solid var(--nav-line); z-index:99;
  }
  .nav-links.open { display:flex; }
  .nav-links .nav-search-btn { order:-1; width:100%; justify-content:center; margin:0 0 18px; padding:15px; font-size:.84rem; }

  .nav-item { flex-direction:column; align-items:stretch; border-bottom:1px solid var(--nav-line); }
  .nav-item > a { height:auto; padding:17px 30px 17px 2px; }
  .nav-toggle { position:absolute; right:0; top:6px; width:44px; height:44px; margin:0; }

  .nav-panel {
    position:static; width:auto; margin:0 0 14px; padding:0 2px 16px;
    background:none; border:0; box-shadow:none; display:none;
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .nav-item.is-open .nav-panel { display:block; }
  .nav-panel-grid { grid-template-columns:1fr; gap:0; }
  .nav-panel-entry { padding:13px 6px; min-height:44px; }
}

/* ─── Such-Overlay ──────────────────────────────────────────────────────
   Volle dunkle Fläche im Bestehenden-Look statt eines modernen Such-Panels. */
.search-overlay { position:fixed; inset:0; z-index:300; display:none; }
.search-overlay.is-open { display:block; }
.search-overlay__scrim { position:absolute; inset:0; background:rgba(4,3,2,.86); border:0; padding:0; cursor:default; }
.search-overlay__panel { position:relative; max-width:720px; margin:9vh auto 0; padding:0 20px; }
.search-box { background:#100d0a; border:1px solid var(--nav-line); box-shadow:0 34px 80px rgba(0,0,0,.6); }
.search-box__input-row { display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--nav-line); }
.search-box__input-row svg { width:18px; height:18px; color:var(--nav-muted); flex:none; }
.search-box input[type="search"] {
  flex:1; min-width:0; background:none; border:0; color:var(--nav-bone);
  font:400 1.15rem/1.2 'Spectral',Georgia,serif; outline:none;
}
.search-box input[type="search"]::placeholder { color:var(--nav-muted); }
.search-box input[type="search"]::-webkit-search-cancel-button { display:none; }
.search-box__close { flex:none; color:var(--nav-muted); background:none; border:0; cursor:pointer; padding:6px; }
.search-box__close svg { width:16px; height:16px; }
.search-box__close:hover { color:var(--nav-gold); }

.search-results { max-height:60vh; overflow-y:auto; padding:6px 0; }
.search-results__group + .search-results__group { border-top:1px solid var(--nav-line); }
.search-results__group-label {
  display:block; margin:16px 22px 6px; color:var(--nav-gold);
  font:700 .66rem/1 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase;
}
.search-result { display:block; padding:11px 22px; color:var(--nav-bone); text-decoration:none; }
.search-result span { display:block; margin-top:2px; color:var(--nav-muted); font-size:.8rem; }
.search-result:hover, .search-result.is-active { background:rgba(196,154,80,.08); color:var(--nav-gold); }
.search-empty { padding:34px 22px; text-align:center; color:var(--nav-muted); font-style:italic; }
.search-hint { padding:14px 22px; color:var(--nav-muted); font-size:.78rem; }

@media (max-width:680px) {
  .search-overlay__panel { margin-top:0; padding:0; max-width:none; }
  .search-box { min-height:100vh; border:0; }
}

/* ─── "Weiterführend im Codex": wiederverwendbares Cross-Link-Modul ──── */
.codex-related { max-width:1200px; margin:0 auto; padding:56px 24px 72px; border-top:1px solid var(--nav-line); }
.codex-related__title {
  display:block; margin-bottom:20px; color:var(--nav-gold);
  font:700 .72rem/1 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase;
}
.codex-related__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.codex-related__card {
  display:block; padding:18px 20px; text-decoration:none;
  background:rgba(255,255,255,.02); border:1px solid var(--nav-line);
  transition:border-color .2s ease;
}
.codex-related__card:hover, .codex-related__card:focus-visible { border-color:var(--nav-gold); }
.codex-related__card small {
  display:block; margin-bottom:7px; color:var(--nav-muted);
  font:700 .64rem/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase;
}
.codex-related__card strong { display:block; color:var(--nav-bone); font:400 1.05rem/1.25 'Marcellus',Georgia,serif; }

@media (max-width:680px) {
  .codex-related { padding:40px 18px 48px; }
}

/* ─── Footer mit Kerzen-Szene ──────────────────────────────────────────
   footer-abbinder.webp (2046x768) ist der Footer selbst, auf jeder Seite
   (von js/site-footer.js erzeugt): oben vollständig transparent, unten
   ein Holztisch mit Kerzen/Schriftrollen links und Kompass/Laterne rechts.
   "center bottom" + cover verankert das Bild an seiner Unterkante - ein
   Zuschnitt frisst sich also immer nur von oben in die ohnehin
   transparente Zone, nie in den Tisch.
   Footer-Höhe (--ft-h) schneidet knapp oberhalb des Kerzenscheins ab
   (~63% der Bildhöhe bei Breiten-Skalierung); --ft-wood ist die dabei
   sichtbare Tischhöhe (~16.8% der Bildhöhe, bei Breiten-Skalierung 6.3vw).
   Der Inhalt steht im freien Mittelstück des Tischs (zwischen den Requisiten:
   ca. 18.5%-72.5% der Bildbreite), nicht über Kerzen oder Kompass. */
/* Der transparente obere Bildteil lappt per negativem Top-Rand über den
   vorherigen Content (Kerzen/Requisiten stehen davor): die Tisch-Hinterkante
   schließt so bündig mit dem Ende des Contents ab, statt dass darüber ein
   leerer Streifen entsteht. pointer-events:none, damit der überlappte
   Content klickbar bleibt - nur der Footer-Text selbst fängt Klicks. */
footer.site-footer {
  --ft-h: clamp(250px,23.6vw,540px);
  --ft-wood: max(6.3vw, calc(var(--ft-h) * .168));
  position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:var(--ft-h); margin:calc(var(--ft-wood) - var(--ft-h)) 0 0; padding:0; border:0;
  pointer-events:none;
}
/* Bild als eigene Ebene hinter dem Text: so wirkt der Drop-Shadow nur auf
   die Szene (Tisch, Kerzen, Requisiten) und nicht zusätzlich auf den Text.
   Der Schatten fällt nach oben/außen auf den Seiteninhalt - die Szene
   hebt sich dadurch plastisch vom Content ab. */
footer.site-footer::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('../img/footer/footer-abbinder.webp') center bottom/cover no-repeat;
  filter:drop-shadow(0 -24px 21px rgba(0,0,0,.8)) drop-shadow(0 -10px 18px rgba(0,0,0,.65));
}
footer.site-footer .footer-inner, footer.site-footer .footer-rune { pointer-events:auto; }
/* Die Sprungmarken-Leiste (falls vorhanden) steht direkt über der
   Tisch-Hinterkante, vor dem Bild: transparent und auf das freie
   Mittelstück begrenzt, damit sie nicht über Kerzen/Kompass läuft. */
@media (min-width:861px) {
  /* margin-bottom: bei schmaleren Breiten ist der Tisch niedriger als der
     Footer-Text und dieser ragt nach oben über die Tischkante - der Rand
     (addiert sich mit dem negativen Footer-Rand) schafft genau diese Höhe
     frei, damit Leiste und Text nicht ineinanderlaufen. */
  .subnav { position:relative; z-index:2; background:transparent; border-top:0; margin-bottom:max(0px, calc(80px - 6.3vw)); }
  .subnav-inner { box-sizing:border-box; width:54%; max-width:none; margin:0 0 0 19%; padding:0; justify-content:safe center; gap:clamp(14px,1.8vw,30px); }
}
@media (max-width:860px) { .subnav { position:relative; z-index:2; } }
footer.site-footer .footer-inner {
  box-sizing:border-box; width:54%; max-width:none; margin:0 0 0 19%;
  min-height:var(--ft-wood); padding:0 0 .9vw;
  flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:center; gap:5px;
  color:#c9b89d; font:500 clamp(10px,.82vw,11.5px)/1.38 system-ui,sans-serif; text-align:center;
  text-shadow:0 1px 2px #000, 0 0 6px rgba(0,0,0,.85);
}
footer.site-footer .footer-notice { max-width:none; gap:2px; align-items:center; }
footer.site-footer .footer-inner a { color:#e3cfa8; }
footer.site-footer .footer-meta { flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 18px; }
footer.site-footer .footer-links { flex-wrap:wrap; justify-content:center; gap:4px 16px; }
footer.site-footer .footer-links a, footer.site-footer .backtop { font-size:clamp(9.5px,.8vw,11px); }

/* Schmale Viewports: die Kerzen-Szene entfällt komplett - auf Handybreite
   ist sie nur ein kleiner, kaum erkennbarer Streifen. Der Footer ist hier
   ein schlichter dunkler Block unter dem Content; Footer-Links bekommen
   Tippflächen von ~40px Höhe. */
@media (max-width:860px) {
  footer.site-footer { display:block; min-height:0; margin-top:0; padding-top:0; border-top:1px solid #2a1c12; background:#0c0805; }
  footer.site-footer::before { display:none; }
  footer.site-footer .footer-inner {
    position:relative; width:100%; margin:0; min-height:0; padding:22px 18px 28px; gap:12px;
    background:none; font-size:12.5px; line-height:1.5; text-shadow:none;
  }
  footer.site-footer .footer-links { gap:0 10px; }
  footer.site-footer .footer-links a, footer.site-footer .backtop { display:inline-block; padding:12px 4px; font-size:12.5px; }
  footer.site-footer .footer-notice a { padding:4px 0; }
}

/* Sicherheitsnetz für schmale Viewports: ein überlanges einzelnes Wort in
   einer Überschrift bricht um, statt die Seite seitlich aufzuweiten oder vom
   overflow:hidden des Heros abgeschnitten zu werden (:where = Specificity 0,
   seitenspezifische Regeln behalten Vorrang). */
:where(h1,h2,h3,h4) { overflow-wrap:break-word; }

/* 100vw schließt die Breite der vertikalen Scrollleiste mit ein (Windows):
   zentrierte Ornament-Linien mit width:100vw (z.B. .codex-divider::before)
   ragten dadurch über den Viewport und erzeugten seitliches Scrollen.
   Bewusst body mit overflow-x:clip und NICHT html mit hidden: ein gesetztes
   overflow auf html verhindert, dass das overflow-x:hidden des body (z.B.
   Startseite) an den Viewport durchgereicht wird - der body wird dann selbst
   zum Scroll-Container und position:sticky (Header) greift nicht mehr. */
body { overflow-x:clip; }

@media (max-width:760px) { .codex-related__title { font-size:12px; } }

/* Mobil: die seitliche Randabdunklung (body::after, fixed, bis 24% Breite je Seite) liegt über dem Text und macht ihn dort dunkler. Auf schmalen Viewports entfällt sie. */
@media (max-width:860px) { body::after { display:none; } }