/*!
 * Dölau Theme – assets/css/main.css
 *
 * Hauptstylesheet, 1:1 portiert aus der HTML-Vorschau v26
 * (doelau-theme-preview-v26.html). Enthält zusätzlich @font-face-Regeln
 * für die drei lokal eingebundenen Schriften.
 *
 * Reihenfolge:
 *   1. @font-face (Source Serif 4, Inter, JetBrains Mono)
 *   2. CSS-Variablen, Schriftgrößen-Skala, Dark Mode
 *   3. Reset
 *   4. Header / Nav / Hero
 *   5. Buttons, Sektionen, Teaser, Blog, CTA, Karte
 *   6. Sights / Persons / Page-Content / Sidebar / Footer
 *   7. Mega-Menu, Responsive
 *
 * Variante 0.1.0
 */

/* ===========================================================
 * 1. SCHRIFTEN — lokal aus assets/fonts/
 * Falls eine Datei (noch) fehlt, fallen Browser sauber auf
 * Georgia / system-ui / ui-monospace zurück.
 * Quellen und Bauanleitung siehe inc/fonts-stub.php.
 *
 * v1.0.3: Die vorherigen Dateien waren „latin-ext"-Teilmengen ohne
 * Kleinbuchstaben, Ziffern und Umlaute — die Seite lief faktisch in
 * Georgia/Segoe UI/Consolas. Ersetzt durch reduzierte Vollschnitte
 * (Latein + Latein-Erweitert + Typografie/Währung/Pfeile).
 *
 * Source Serif 4 und Inter kommen als variable Schnitte: Source Serif
 * hat keinen statischen Medium-Schnitt, den das Theme aber für alle
 * Überschriften braucht (font-weight:500, main.css h1–h4). Ein
 * variabler Schnitt deckt 400/500/600 aus einer Datei ab.
 * =========================================================== */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4/SourceSerif4-Variable.woff2') format('woff2-variations'),
       url('../fonts/source-serif-4/SourceSerif4-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4/SourceSerif4-It.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/Inter-Variable.woff2') format('woff2-variations'),
       url('../fonts/inter/Inter-Variable.woff2') format('woff2');
}
/* v1.0.3: Inter-Kursive ergänzt — Beitrags- und Editorial-Fließtext erbt
 * den Sans-Stack, jedes <em> wurde vorher vom Browser künstlich geschert. */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter/Inter-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
}
/* v1.0.3: Halbfetter Mono-Schnitt ergänzt — chronik.css fordert 600 an
 * (Jahreszahlen der Zeitstrahl-Leiste), was vorher synthetisiert wurde. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2');
}

/* ===========================================================
 * 2.–7. CORE STYLES (1:1 aus v26)
 * =========================================================== */

:root{
  --font-serif:'Source Serif 4',Georgia,serif;
  --font-sans:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --bg:#f6f3ed;
  --bg-soft:#efeae0;
  --bg-card:#fbf9f4;

  --ink:#1c2322;
  --ink-soft:#4b5553;
  /* v1.0.3: von #6b7370 angehoben. Der alte Wert verfehlte WCAG AA an rund
   * 40 Stellen (4,06–4,40:1 statt 4,5) — Breadcrumbs, Metazeilen, Jahres-
   * angaben, Quellen. Das Problem war bekannt, wurde bisher aber nur an
   * .logo-text span per Sonderfarbe geflickt. Jetzt: 4,85–5,53:1. */
  --ink-mute:#5f6764;

  /* v1.0.3: --rule war mit 1,36:1 gegen den Seitengrund praktisch unsicht-
   * bar, trägt aber die gesamte Abgrenzung der Karten (deren Fläche selbst
   * nur 1,05:1 hat). Moderat angehoben auf 1,74:1. Für Formularfelder
   * reicht das nicht — die brauchen nach WCAG 1.4.11 volle 3:1, dafür
   * --rule-strong (3,15–3,32:1). */
  --rule:#c4baa4;
  --rule-strong:#948871;
  --rule-soft:#e6e0d1;

  --accent:#2e6b6a;
  --accent-ink:#1f4e4d;
  --accent-soft:#cfe0df;
  /* v1.0.3: Beschriftung auf Akzentflächen. Vorher stand überall hart #fff,
   * was im Dunkelmodus auf dem dann hellen Akzent nur noch 2,40:1 ergab
   * (beim Hover 1,69:1) — Buttons, "Neu"-Label, aktive Seitenzahl, Suchen-
   * Button und der Dark-Mode-Umschalter selbst waren unlesbar. */
  --on-accent:#ffffff;
  /* v1.0.3: Akzent für dauerhaft dunkle Flächen (Nav, Footer, CTA). Die
   * sind in BEIDEN Modi dunkel, deshalb ein fester Wert statt eines
   * mitschaltenden Tokens — --accent ergab dort nur 2,61:1. */
  --accent-on-dark:#7fc0be;
  --focus-on-dark:#cfe0df;
  /* v0.6.43: Warmer Akzent für Hover-States (z.B. Map-Pins). */
  --accent-warm:#c87b3a;
  --accent-warm-ink:#a35f24;

  --stone:#a89a82;
  --ochre:#9a7a3b;
  --danger:#8b3a2e;

  --gap:24px;
  --pad-y:96px;
  --pad-x:28px;
  --max:1240px;
  --max-narrow:960px;
  --radius:4px;
  --radius-lg:6px;
  --shadow:0 1px 0 rgba(28,35,34,.04),0 8px 28px -20px rgba(28,35,34,.25);

  --fs-base:17px;
}
html[data-fs="S"]{--fs-base:16px;}
html[data-fs="M"]{--fs-base:17px;}
html[data-fs="L"]{--fs-base:19.5px;}
html[data-fs="XL"]{--fs-base:22px;}

html[data-dark="true"]{
  --bg:#141817;--bg-soft:#1a1f1e;--bg-card:#1d2322;
  /* v1.0.3: --ink-mute von #848079 angehoben (war 4,06–4,56:1) → 4,97–5,57:1. */
  --ink:#ece7db;--ink-soft:#b7b2a6;--ink-mute:#948f87;
  /* v1.0.3: Ränder analog zum Light-Modus angehoben. */
  --rule:#3d4645;--rule-strong:#646e6d;--rule-soft:#232928;
  --accent:#6fb3b1;--accent-ink:#9cd1cf;--accent-soft:#1f3534;
  /* v1.0.3: Der Akzent ist im Dunkelmodus hell — die Beschriftung darauf
   * muss also dunkel werden, sonst 2,40:1. Jetzt 7,44:1 (Hover 10,56:1). */
  --on-accent:#0c1a19;
  /* --accent-on-dark und --focus-on-dark bleiben absichtlich unverändert:
   * Nav, Footer und CTA sind in beiden Modi dunkel. */
  /* v0.6.43: Warmer Akzent — Dark-Variante. */
  --accent-warm:#e09b5e;--accent-warm-ink:#f0b07a;
  --stone:#8a7f6c;
  /* v1.0.3: --danger hatte keinen Dark-Wert und lag mit 2,34:1 unter dem
   * Fließtext — eine Warnfarbe, die schwächer wirkt als normaler Text.
   * Jetzt 6,89:1. --shadow ebenfalls ergänzt: der dunkle Schatten war auf
   * dunklem Grund wirkungslos, Karten und Popover hatten keine Elevation. */
  --danger:#e08a78;
  --shadow:0 1px 0 rgba(0,0,0,.30),0 8px 28px -18px rgba(0,0,0,.75);
}

/* v1.0.3: Systemvorgabe respektieren. Bisher hing der Dunkelmodus allein an
 * localStorage — wer sein Betriebssystem dunkel gestellt hatte, bekam die
 * Seite trotzdem hell und musste den Schalter jedes Mal suchen.
 *
 * Drei Zustände: data-dark="true" (ausdrücklich dunkel), data-dark="false"
 * (ausdrücklich hell), kein Attribut (der Nutzer hat nie gewählt → System
 * entscheidet). Deshalb :not([data-dark]) — eine getroffene Wahl trägt das
 * Attribut und gewinnt in beide Richtungen. */
@media (prefers-color-scheme: dark) {
  html:not([data-dark]){
    --bg:#141817;--bg-soft:#1a1f1e;--bg-card:#1d2322;
    --ink:#ece7db;--ink-soft:#b7b2a6;--ink-mute:#948f87;
    --rule:#3d4645;--rule-strong:#646e6d;--rule-soft:#232928;
    --accent:#6fb3b1;--accent-ink:#9cd1cf;--accent-soft:#1f3534;
    --on-accent:#0c1a19;
    --accent-warm:#e09b5e;--accent-warm-ink:#f0b07a;
    --stone:#8a7f6c;
    --danger:#e08a78;
    --shadow:0 1px 0 rgba(0,0,0,.30),0 8px 28px -18px rgba(0,0,0,.75);
  }
}

html[data-density="compact"]{--pad-y:64px;--gap:18px;}

/* Reduced padding utilities */
.section.section-compact,.section-alt-wrap.section-compact .section{padding-top:calc(var(--pad-y) * 0.7);padding-bottom:calc(var(--pad-y) * 0.7);}
.section-top-tight{padding-top:36px;}
/* v0.6.23: oberer Whitespace halbiert (48px statt 96px). Für Pages, wo der
 * Titel weiter oben sitzen soll, ohne den unteren Padding zu reduzieren. */
.section.section-top-half{padding-top:calc(var(--pad-y) * 0.5);}
/* v0.6.23: zentraler Anstrich-Wrapper. Margin-Bottom kontrolliert den
 * Abstand zwischen Title-Block und Hauptinhalt der Seite. */
.section-header{margin:0 0 36px;}
.section-header .section-title{margin-bottom:10px;}
.section-header .section-lede{margin-bottom:0;}
.section-alt-wrap.section-compact{padding-top:0;padding-bottom:0;}

*{margin:0;padding:0;box-sizing:border-box;}
html{font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
/* v0.9.9: Sticky-Footer-Pattern. Body wird Flex-Column, Footer wird per
 * margin-top:auto immer ans untere Ende geschoben. Verhindert, dass der
 * Footer bei kurzem Content hochrutscht (404, leere Archive, Aktuelles
 * ohne Posts). Reihenfolge der min-height-Deklarationen:
 * 100vh-Fallback fuer aeltere Browser, dann 100dvh fuer moderne Mobile-
 * Browser. body.menu-open: Scroll waehrend Mobile-Hamburger blockieren.
 *
 * v0.9.12: Pattern auf margin-top:auto umgestellt. Vorher wurde #main mit
 * flex:1 nach oben gestreckt — funktioniert aber nur, wenn #main direkter
 * body-Child ist. Manche WP-Hooks/Plugins koennen Wrapper einfuegen, dann
 * greift `body > #main` nicht mehr. Mit margin-top:auto auf .site-footer
 * ist die Struktur dazwischen egal; der Footer wird unabhaengig davon ans
 * untere Ende des Flex-Containers gezogen. */
body{
  background:var(--bg);
  color:var(--ink-soft);
  font-family:var(--font-sans);
  min-height:100vh;
  min-height:100dvh;
  /* v0.9.16: !important nachgeruestet — Felix' Browser zeigte computed
   * display:block trotz dieser Regel, obwohl min-height:100dvh aus dem
   * gleichen Block greift. Quelle der Ueberschreibung ist nicht in unseren
   * Stylesheets nachweisbar; verdacht auf Browser-Extension oder Plugin-
   * CSS. !important macht das Sticky-Pattern robust dagegen. */
  display:flex !important;
  flex-direction:column !important;
}
.site-footer{margin-top:auto !important;flex-shrink:0;}

/* v1.0.5: Umbruchschutz für lange deutsche Komposita. overflow-wrap,
 * word-break und hyphens kamen im ganzen Theme nicht vor — bei 320 px
 * Breite und XL-Schrift laufen Wörter wie „Steinkohlebergbaus" oder
 * „Gefallenendenkmal" über die Kartenkante. `anywhere` statt `break-word`,
 * weil nur ersteres die intrinsische Mindestbreite des Containers
 * mitreduziert und damit auch Grid-/Flex-Spalten am Aufblähen hindert.
 * Silbentrennung greift über lang="de" aus header.php. */
h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,th,figcaption,blockquote,
.sight-row-body,.blog-body,.teaser-card,.person-info,.termin-card-body,
.mega-col a,.section-lede{
  overflow-wrap:anywhere;
  hyphens:auto;
}
/* Ausgenommen: Mono-Labels und Bedienelemente, wo ein Trennstrich stört. */
.eyebrow,.hero-eyebrow,.nav-link,.btn,.mega-col h5,code,pre,kbd{
  overflow-wrap:normal;
  hyphens:none;
}

body.admin-bar{min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px);}
@media(max-width:782px){body.admin-bar{min-height:calc(100vh - 46px);min-height:calc(100dvh - 46px);}}
/* v1.0.5: `touch-action:none` gestrichen. Die Eigenschaft vererbt zwar nicht,
 * der Browser bildet aber die Schnittmenge über alle Vorfahren — damit war
 * Wischen für JEDEN Nachfahren von body gesperrt, also auch für das
 * scrollbare Hamburger-Menü selbst. Genau das Scrollen, das v0.9.14 für
 * kleine Geräte eingeführt hat, ging per Finger nicht (nur mit Maus).
 * Zusätzlich blockierte es das Aufziehen der Seite — WCAG 1.4.4.
 * Für die Scroll-Sperre des Hintergrunds genügt overflow:hidden. */
body.menu-open{overflow:hidden;}

h1,h2,h3,h4{font-family:var(--font-serif);font-weight:500;letter-spacing:-0.005em;text-wrap:balance;color:var(--ink);line-height:1.2;}
p{text-wrap:pretty;}
a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--accent-soft);transition:color .2s,border-color .2s;}
a:hover{color:var(--accent);border-color:var(--accent);}

img{max-width:100%;height:auto;display:block;}
button{font-family:inherit;cursor:pointer;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
/* v1.0.3: Auf den dauerhaft dunklen Flächen — Hauptnavigation, Footer, CTA-
 * Banner, Hero — ergab der Petrolton nur 2,61:1 gegen den Grund (Soll 3:1).
 * Beim Tabben durch die Navigation war schlicht nicht erkennbar, wo der
 * Fokus steht. Heller Ring: 11,72:1 (hell) bzw. 13,92:1 (dunkel). */
.main-nav :focus-visible,
.site-footer :focus-visible,
.cta :focus-visible,
.hero :focus-visible{outline-color:var(--focus-on-dark);}

/* Skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bg);padding:12px 20px;}
.skip:focus{left:0;}

/* === HEADER === */
.site-header{background:var(--bg);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:100;}
/* v1.0.5: Die WordPress-Adminleiste liegt fixiert über allem. Das Theme hat
 * sie bisher nur bei min-height und beim Chronik-Sprungziel berücksichtigt,
 * nicht beim Sticky-Offset — für eingeloggte Redakteure rastete der Header
 * bei top:0 ein und verschwand zu 32 px (mobil 46 px) darunter. Betrifft
 * genau die Person, die die Inhalte pflegt. */
body.admin-bar .site-header{top:32px;}
@media(max-width:782px){
  body.admin-bar .site-header{top:46px;}
}
/* Der Höhendeckel des Mega-Menüs muss die Leiste mitrechnen, sonst ragt das
 * Panel bei Scroll-Position 0 um dieselben 32 px unter den Viewport. */
body.admin-bar .mega{max-height:calc(100vh - var(--header-h, 148px) - 48px);}
.header-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;gap:24px;}
.logo{display:flex;align-items:center;gap:14px;cursor:pointer;border:none;background:transparent;padding:0;color:inherit;font-family:inherit;text-align:left;}
.logo img{height:52px;width:auto;}
.logo-text h1{font-size:1.35rem;font-weight:500;color:var(--accent-ink);line-height:1.15;margin:0;}
html[data-dark="true"] .logo-text h1{color:var(--accent-ink);}
/* v0.9.17: eigener, leicht dunklerer Farbwert statt --ink-mute (#6b7370).
 * Der Untertitel ist sehr kleine Mono-Schrift auf warmem Beige; mit --ink-mute
 * lag der WCAG-Kontrast bei 4.39 (AA verlangt 4.5). Der globale --ink-mute
 * bleibt fuer alle anderen Verwendungen unveraendert. */
.logo-text span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#5a6260;font-family:var(--font-mono);display:block;margin-top:4px;}
html[data-dark="true"] .logo-text span{color:var(--ink-mute);}

.header-tools{display:flex;align-items:center;gap:6px;}
.tool-btn{background:none;border:1px solid var(--rule);border-radius:var(--radius);padding:7px 13px;font-family:var(--font-sans);font-size:.85rem;color:var(--ink-soft);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;line-height:1;}
.tool-btn:hover{border-color:var(--ink-soft);color:var(--ink);}
.tool-btn.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.aa-icon{display:inline-flex;align-items:baseline;gap:1px;font-family:var(--font-serif);line-height:1;}
.aa-icon .aa-small{font-size:.85rem;font-weight:500;}
.aa-icon .aa-large{font-size:1.05rem;font-weight:500;}
.aa-chevron{opacity:.55;}

/* === Prefs popover === */
.header-tools{position:relative;}
.prefs-popover{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  background:var(--bg-card);
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:20px;
  min-width:300px;
  z-index:300;
}
.prefs-popover.open{display:block;}
/* v0.9.5: Arrow zeigt mittig auf den auslösenden Button. Jeder Popover
 * sitzt in einer eigenen .header-tools-Wrapper. Da der Aa-Button breiter
 * ist als der Such-Button, kommt das mittige Right-Offset pro ID. */
.prefs-popover::before{
  content:"";
  position:absolute;
  top:-7px;
  right:22px;
  width:12px;
  height:12px;
  background:var(--bg-card);
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
  transform:rotate(45deg);
}
#prefsPopover::before{right:28px;}   /* Aa-Button ist breiter (Icon + Chevron) */
#searchPopover::before{right:16px;}  /* ⌕-Button ist schmaler */
.prefs-section{margin-bottom:18px;}
.prefs-section-last{margin-bottom:0;padding-top:14px;border-top:1px solid var(--rule-soft);}
.prefs-label{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:10px;
}
.prefs-row{display:grid;gap:6px;}
.prefs-fs{grid-template-columns:repeat(4,1fr);}
.prefs-theme{grid-template-columns:1fr 1fr;}
.prefs-btn{
  background:var(--bg);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:10px 12px;
  font-family:var(--font-sans);
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .15s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:.9rem;
  line-height:1;
  min-height:42px;
}
.prefs-btn:hover{border-color:var(--ink-soft);color:var(--ink);}
.prefs-btn.active{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
}
.prefs-fs .prefs-btn span{font-family:var(--font-serif);font-weight:500;line-height:1;}
.prefs-icon{font-size:.95rem;line-height:1;display:inline-block;}
.prefs-theme .prefs-btn{font-weight:500;}
.prefs-link{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:.88rem;
  color:var(--accent-ink);
  border:none;
  font-weight:500;
}
.prefs-link:hover{color:var(--accent);}

html[data-dark="true"] .prefs-popover::before{background:var(--bg-card);}

@media(max-width:640px){
  .prefs-popover{
    position:fixed;
    top:auto;
    bottom:20px;
    right:20px;
    left:20px;
    min-width:0;
  }
  .prefs-popover::before{display:none;}
}
.mobile-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:var(--radius);padding:8px 14px;font-family:var(--font-sans);font-size:.9rem;color:var(--ink);cursor:pointer;}

/* === NAV === */
.main-nav{background:var(--ink);}
html[data-dark="true"] .main-nav{background:#0d1110;}
.nav-inner{max-width:var(--max);margin:0 auto;display:flex;padding:0 28px;}
.nav-item{position:relative;}
.nav-link{display:block;padding:14px 22px;font-size:.95rem;font-weight:500;color:rgba(236,231,219,.75);cursor:pointer;white-space:nowrap;transition:all .15s;border:none;background:none;border-bottom:2px solid transparent;font-family:var(--font-sans);}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.04);}
.nav-link.active{color:#fff;border-bottom-color:var(--accent-on-dark);background:rgba(255,255,255,.04);}
.dropdown{display:none;position:absolute;top:100%;left:0;background:var(--bg-card);border:1px solid var(--rule);border-radius:0 0 var(--radius-lg) var(--radius-lg);min-width:260px;z-index:200;box-shadow:var(--shadow);}
.nav-item.menu-open .dropdown{display:block;}
.dropdown a{display:block;padding:12px 22px;font-family:var(--font-serif);font-size:.95rem;color:var(--ink);border:none;border-bottom:1px solid var(--rule-soft);background:none;}
.dropdown a:last-child{border:none;}
.dropdown a:hover{background:var(--accent-soft);color:var(--accent-ink);}

/* === HERO === */
.hero{position:relative;min-height:clamp(352px,50vh,544px);overflow:hidden;display:flex;align-items:center;}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(95deg,rgba(20,24,23,.82) 0%,rgba(20,24,23,.55) 40%,rgba(20,24,23,.15) 70%,rgba(20,24,23,0) 100%);}
.hero-content{position:relative;max-width:var(--max);margin:0 auto;padding:0 28px;width:100%;z-index:2;}
.hero-eyebrow{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(207,224,223,.75);display:block;margin-bottom:28px;}
.hero h2{font-family:var(--font-serif);font-size:clamp(1.9rem,4.5vw,3.8rem);font-weight:400;color:#fff;margin-bottom:20px;letter-spacing:-.015em;line-height:1.1;max-width:720px;}
.hero h2 em{font-style:italic;color:var(--stone);font-weight:400;display:block;}
.hero p{font-family:var(--font-sans);font-size:clamp(.95rem,1.1vw,1.05rem);color:rgba(236,231,219,.72);max-width:540px;margin-bottom:0;line-height:1.65;font-weight:400;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}

@media(max-width:900px){
  /* v0.8.7: padding-top:32px hinzugefügt, damit der Eyebrow „HALLE
   * (SAALE) · STADTTEILPORTAL" gleich viel Abstand vom oberen Hero-
   * Rand bekommt wie die Buttons vom unteren — vorher klebte er
   * direkt am Übergang vom Header zum Hero-Bild. */
  .hero{min-height:336px;align-items:flex-end;padding-top:32px;padding-bottom:32px;}
  .hero-overlay{background:linear-gradient(180deg,rgba(20,24,23,0) 20%,rgba(20,24,23,.65) 65%,rgba(20,24,23,.9) 100%);}
  .hero-photo{object-position:right bottom;}
}

/* === BUTTONS === */
.btn{display:inline-block;padding:11px 22px;background:var(--accent);color:var(--on-accent);font-family:var(--font-sans);font-size:.95rem;font-weight:500;border-radius:var(--radius);border:1px solid var(--accent);transition:all .15s;cursor:pointer;text-decoration:none;}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--on-accent);}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff;}
.btn-inline{background:transparent;color:var(--accent-ink);border:1px solid var(--accent);padding:9px 18px;font-size:.88rem;}
.btn-inline:hover{background:var(--accent);color:var(--on-accent);}
.btn-sm{padding:8px 16px;font-size:.85rem;}

/* === SECTIONS === */
.section{max-width:var(--max);margin:0 auto;padding:var(--pad-y) var(--pad-x);}
.section-narrow{max-width:var(--max-narrow);}
.section-alt{background:var(--bg-soft);}
.section-alt-wrap{background:var(--bg-soft);}

.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);}

.section-title{font-family:var(--font-serif);font-size:clamp(1.8rem,2.6vw,2.6rem);font-weight:500;color:var(--ink);margin-bottom:10px;letter-spacing:-.01em;}
/* v0.6.42: max-width:640px entfernt — Lede nutzt die volle
 * Container-Breite (1240px), genau wie normaler Fließtext auf der
 * Seite. Quetschungen bei längeren Lede-Texten (z. B. Persönlichkeiten,
 * Sehenswürdigkeiten) sind damit weg. */
.section-lede{font-size:clamp(1.05rem,1.2vw,1.1rem);color:var(--ink-soft);margin-bottom:40px;line-height:1.55;}

/* === TEASER CARDS === */
.teaser-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);}
/* v0.6.16: 3-Spalten-Variante + Flex-Layout (von WP-Group mit flexWrap:nowrap)
 * sorgen für drei gleich breite Karten. flex:1 0 0 macht alle Kinder gleich
 * breit unabhängig vom Inhalt. */
.teaser-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.wp-block-group.teaser-grid{display:flex;gap:var(--gap);align-items:stretch;}
.wp-block-group.teaser-grid > .teaser-card,
.wp-block-group.teaser-grid > .wp-block-group{flex:1 1 0;min-width:0;}
@media(max-width:780px){
  .wp-block-group.teaser-grid{flex-wrap:wrap;}
  .wp-block-group.teaser-grid > .teaser-card,
  .wp-block-group.teaser-grid > .wp-block-group{flex:1 1 100%;}
}
/* v0.9.8: Einheitlicher Card-Hover (Variante A) — teal Akzent als 4 px
 * dicker Links-Strich via box-shadow:inset (kein Layout-Shift). Warm ist
 * reserviert fuer Aktiv-/Selected-States (z.B. .sight-row.is-active).
 * Heading-Color-Wechsel auf Hover entfaellt — der Strich genuegt visuell. */
.teaser-card{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--radius);padding:28px 24px 24px;transition:border-color .2s,box-shadow .2s,transform .2s;text-decoration:none;color:inherit;display:block;}
/* v0.6.30: Cursor und Hover-Effekt nur wenn die Karte einen Heading-Link hat. */
.teaser-card:has(h2 a, h3 a, h4 a){cursor:pointer;}
.teaser-card:hover{border-color:var(--accent-warm);box-shadow:-4px 0 0 0 var(--accent-warm);transform:translateY(-2px);}
.teaser-card h3{font-size:1.3rem;margin-bottom:8px;font-weight:500;color:var(--ink);}
.teaser-card h3 a{color:inherit;text-decoration:none;}
.teaser-card p{font-size:.95rem;color:var(--ink-soft);line-height:1.55;margin:0;}

/* === BLOG === */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.blog-card{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;text-decoration:none;color:inherit;border-left:none;display:flex;flex-direction:column;}
.blog-card:hover{border-color:var(--accent-warm);box-shadow:-4px 0 0 0 var(--accent-warm);transform:translateY(-2px);}
.blog-img{height:180px;flex:0 0 180px;background:linear-gradient(135deg,var(--stone) 0%,var(--rule) 100%);display:flex;align-items:center;justify-content:center;color:var(--ink-mute);font-size:.85rem;position:relative;font-family:var(--font-mono);}
.blog-tag{position:absolute;top:12px;left:12px;background:var(--accent);color:var(--on-accent);font-size:.7rem;font-weight:500;padding:3px 10px;border-radius:2px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-mono);}
.blog-body{padding:20px 22px;display:flex;flex-direction:column;flex:1 1 auto;}
.blog-body h3{font-size:1.2rem;font-weight:500;color:var(--ink);margin-bottom:8px;line-height:1.3;}
.blog-body p{font-size:.95rem;color:var(--ink-soft);line-height:1.55;}
/* Datum klebt unten — bündig in Card-Reihen, unabhängig von Excerpt-Länge */
.blog-date{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:auto;padding-top:14px;font-weight:400;display:block;}

/* === CTA === */
.cta{background:var(--ink);color:var(--bg);border-radius:var(--radius-lg);padding:40px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:var(--max);margin:0 auto;}
html[data-dark="true"] .cta{background:var(--accent-soft);color:var(--ink);}
.cta-text h3{font-family:var(--font-serif);font-size:1.5rem;font-weight:500;color:var(--bg);margin-bottom:6px;}
html[data-dark="true"] .cta-text h3{color:var(--ink);}
.cta-text p{font-size:.98rem;color:rgba(236,231,219,.75);max-width:480px;}
html[data-dark="true"] .cta-text p{color:var(--ink-soft);}
.cta .btn{background:var(--accent);border-color:var(--accent);}
.cta .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);}

/* === MAP === */
.map-placeholder{height:340px;background:linear-gradient(135deg,var(--bg-soft),var(--stone));border-radius:var(--radius);border:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--accent-ink);margin-bottom:32px;}
.map-placeholder svg{margin-bottom:10px;}
.map-placeholder p{font-size:.9rem;color:var(--ink-soft);}

/* === SIGHT GRID === */
.sight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);}
.sight-card{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;text-decoration:none;color:inherit;display:block;}
.sight-card:hover{border-color:var(--accent-warm);box-shadow:-4px 0 0 0 var(--accent-warm);transform:translateY(-2px);}
.sight-img{height:140px;background:linear-gradient(135deg,var(--stone),var(--bg-soft));display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--ink-mute);font-family:var(--font-mono);letter-spacing:.08em;}
.sight-body{padding:16px 18px;}
.sight-body h3{font-size:1.05rem;font-weight:500;color:var(--ink);margin-bottom:4px;line-height:1.3;}
.sight-body p{font-size:.85rem;color:var(--ink-soft);line-height:1.45;}

/* === PERSON GRID === */
.person-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);}
.person-card{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;text-align:center;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;text-decoration:none;color:inherit;display:block;}
.person-card:hover{border-color:var(--accent-warm);box-shadow:-4px 0 0 0 var(--accent-warm);transform:translateY(-2px);}
.person-avatar{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(145deg,var(--bg-soft),var(--stone));display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--accent-ink);font-family:var(--font-serif);font-weight:500;}
/* Unscharfer Foto-Hintergrund: fuellt die Raender, da das Vordergrund-Bild
 * vollstaendig & unbeschnitten gezeigt wird. --photo wird inline gesetzt;
 * ohne Foto bleibt es 'none' -> Verlauf + Initialen. */
.person-avatar::before{content:"";position:absolute;inset:0;background-image:var(--photo,none);background-size:cover;background-position:center;filter:blur(16px) saturate(1.15);transform:scale(1.2);opacity:.55;z-index:0;}
/* Vordergrund: ganzes Foto sichtbar, nichts abgeschnitten, Hochkant + Quer ok. */
.person-avatar img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;}
.person-info{padding:16px 18px;}
.person-info h3{font-family:var(--font-serif);font-size:1.1rem;font-weight:500;color:var(--ink);margin-bottom:3px;}
.person-info .role{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:2px;}
.person-info .years{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-mute);}

/* === PAGE CONTENT (with sidebar) === */
/* v0.6.26: .page-content sitzt jetzt INNERHALB einer .section, deshalb kein
 * eigenes Padding/Max-Width mehr — das macht der äußere Section-Wrapper.
 * Grid bleibt für künftige 2-Spalten-Pages mit Sidebar. */
.page-content{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;}
.page-content.no-sidebar{grid-template-columns:minmax(0,1fr);}
/* v0.6.26: section-top-half ersetzt den alten :first-child-Override.
 * Templates entscheiden explizit welche Section halben Top-Padding bekommt. */
/* page-main: Typo für Inhalts-Bereich. v0.6.26 — `:first-of-type`-Magie
 * raus, die den ersten Inhalts-Paragraph fälschlich vergrößerte (alte
 * „Lead"-Logik vor Helper-Refactor). */
.page-main h2{font-family:var(--font-serif);font-size:clamp(1.6rem,2vw,2rem);font-weight:500;margin:32px 0 14px;color:var(--ink);letter-spacing:-.01em;}
.page-main h3{font-family:var(--font-serif);font-size:1.4rem;font-weight:500;margin:28px 0 12px;color:var(--ink);}
.page-main p{font-family:var(--font-serif);font-size:1.05rem;line-height:1.7;margin-bottom:14px;color:var(--ink-soft);}

/* Breadcrumbs in content */
.breadcrumbs{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:20px;}
.breadcrumbs a{color:var(--accent);font-weight:400;border:none;}
.breadcrumbs a:hover{color:var(--accent-ink);}
.bc-sep{margin:0 10px;color:var(--rule);}

/* Portrait header */
.portrait-header{display:flex;gap:28px;margin-bottom:32px;align-items:flex-start;padding-bottom:28px;border-bottom:1px solid var(--rule);}
.portrait-photo{position:relative;overflow:hidden;width:180px;height:230px;flex-shrink:0;border-radius:var(--radius);background:linear-gradient(145deg,var(--bg-soft),var(--stone));display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--accent-ink);font-family:var(--font-serif);font-weight:500;}
.portrait-photo::before{content:"";position:absolute;inset:0;background-image:var(--photo,none);background-size:cover;background-position:center;filter:blur(16px) saturate(1.15);transform:scale(1.2);opacity:.55;z-index:0;}
.portrait-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:var(--radius);}
.portrait-info{flex:1;}
.portrait-info h1,
.portrait-info h2,
.portrait-name{margin-bottom:14px;font-size:1.8rem;line-height:1.2;}
.portrait-meta{display:flex;flex-direction:column;gap:8px;}
.portrait-meta-row{display:flex;gap:16px;font-size:.95rem;font-family:var(--font-sans);}
.portrait-meta-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);min-width:90px;padding-top:3px;}
.portrait-meta-value{color:var(--ink);font-weight:500;}

/* Sidebar */
.sidebar-box{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--radius);padding:24px;margin-bottom:16px;}
.sidebar-box h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:400;}
.sidebar-box p,.sidebar-box li{font-size:.9rem;color:var(--ink-soft);line-height:1.7;font-family:var(--font-sans);}
.sidebar-box ul{list-style:none;padding:0;}
.sidebar-box li{padding:6px 0;border-bottom:1px solid var(--rule-soft);}
.sidebar-box li:last-child{border:none;}
.sidebar-box a{color:var(--accent-ink);border:none;font-weight:500;}
.sidebar-box a:hover{color:var(--accent);}

/* Prev/Next */
.prevnext{display:flex;justify-content:space-between;margin-top:48px;padding-top:32px;border-top:1px solid var(--rule);gap:16px;}
.pn-link{display:flex;flex-direction:column;gap:4px;padding:16px 22px;border:1px solid var(--rule);border-radius:var(--radius);transition:border-color .2s,background .2s;cursor:pointer;text-decoration:none;color:var(--ink);background:var(--bg-card);min-width:200px;}
.pn-link:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);}
.pn-dir{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:400;}
.pn-title{font-family:var(--font-serif);font-size:1.05rem;font-weight:500;}
.pn-right{text-align:right;margin-left:auto;}

/* Contact box */
.contact-box{background:var(--bg-card);border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:var(--radius);padding:28px 32px;margin:24px 0;}
.contact-box h3{font-family:var(--font-serif);font-size:1.3rem;margin-bottom:14px;color:var(--ink);margin-top:0;}
.contact-box p{margin-bottom:6px;font-family:var(--font-sans);font-size:.95rem;}

/* Timeline */
.timeline{position:relative;padding-left:36px;margin:28px 0;border-left:1px solid var(--rule);}
.tl-item{position:relative;margin-bottom:28px;padding-left:8px;}
/* v0.6.14: Kugel-Mitte exakt auf Linien-Mitte (0.5px Sub-Pixel-Korrektur).
 * Berechnung: padding-left 36px + halbe Border-Breite 0.5px = 36.5px Linien-Mitte
 *             ab .tl-item, minus halbe Kugel-Width 7px = -43.5px linker Kugel-Rand. */
/* v0.8.4: alle Punkte einheitlich gefüllt — milestone-Unterscheidung
 * wirkte subtil und unklar. Jeder Punkt steht für sich.
 * v0.8.5: top:0 → top:4px, damit der Mittelpunkt mit der Mittellinie
 * der Jahreszahl fluchtet (vorher hing der Punkt oben am Item-Rand). */
.tl-item::before{content:'';position:absolute;left:-43.5px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--accent);box-sizing:border-box;}
/* Backwards-Compat: .milestone-Klasse bleibt erkannt, hat aber keinen
 * visuellen Unterschied mehr — kann in Bestand-Content drinbleiben. */
.tl-item.milestone::before{background:var(--accent);}
/* v0.8.4: Jahreszahl etwas größer und in normaler Schreibung.
 * Vorher: text-transform:uppercase verkrümmte „v. Chr." → „V. CHR."
 * und „1920er Jahre" → „1920ER JAHRE".
 * Doppelte Selektor-Spezifität (.tl-item .tl-*), damit die generischen
 * Content-Container-Regeln (.editorial-main p, .post-content p) die
 * Timeline-Margins nicht überschreiben. */
.tl-item .tl-year,
.tl-year{font-family:var(--font-mono);font-size:.92rem;letter-spacing:.04em;color:var(--accent);font-weight:500;margin:0 0 4px;display:block;line-height:1.3;}
.tl-item .tl-text,
.tl-text{font-family:var(--font-serif);font-size:1rem;line-height:1.65;color:var(--ink-soft);margin:0;}

/* ============================================================
 * Story-Liste — v0.6.38 KOMPLETT-NEU
 * ============================================================
 * Mockup-Variante 1 als verbindliche Vorlage:
 *   - Flaches PDF-Badge 36×48 mit "PDF" in Mono
 *   - Karten 2-spaltig ab 900px, gleich hoch (min-height 168px)
 *   - Strikte Slot-Höhen für Titel (2 Zeilen) und Beschreibung (2 Zeilen)
 *   - Truncate mit "…" bei zu langen Texten
 *   - Meta linksbündig, klebt unten
 *
 * !important wird hier durchgängig gesetzt, weil v0.6.35–37 gezeigt
 * haben, dass WordPress' Block-Layout-Defaults (is-layout-flex,
 * has-global-padding, theme.json-Schriften) sonst bei Bernds Setup
 * Teile des Patches überschreiben. Konsequenz: Optik verlässlich,
 * dafür ist der Block für Spätere "edits per Customizer" hier nicht
 * mehr offen.
 *
 * Mobile (<900px): 1 Spalte, keine Höhen-Synchronisierung.
 * Architektur-Constraint: .story-list / .story-card / .story-pdf-badge
 *   / .story-content / .story-meta sind Klassen aus den Patterns
 *   (geschichten-doelau.php, zeitung-doelau.php) — NICHT umbenennen.
 * ============================================================ */

/* Container der Story-Liste */
.story-list,
.story-list.is-layout-flex,
.wp-block-group.story-list{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}
@media(min-width:900px){
  .story-list,
  .story-list.is-layout-flex,
  .wp-block-group.story-list{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
    align-items:stretch !important;
  }
}

/* Karte */
.story-card,
.story-card.is-layout-flex,
.wp-block-group.story-card{
  background:var(--bg-card) !important;
  border:1px solid var(--rule) !important;
  border-radius:var(--radius) !important;
  padding:18px 20px !important;
  display:flex !important;
  flex-direction:row !important;
  gap:14px !important;
  align-items:stretch !important;
  box-sizing:border-box !important;
  transition:border-color .2s,box-shadow .2s !important;
}
@media(min-width:900px){
  .story-card,
  .story-card.is-layout-flex,
  .wp-block-group.story-card{
    min-height:168px !important;
  }
}
/* v0.9.8: gleicher Hover wie alle anderen Cards (4 px Links-Strich).
 * v0.9.11: Farbe von teal auf warm umgestellt — einheitlich ueber alle Cards. */
.story-card:has(h3 a:hover){border-color:var(--accent-warm) !important;box-shadow:-4px 0 0 0 var(--accent-warm) !important;}

/* PDF-Badge — flach, klein, Mono */
.story-pdf-badge,
.story-pdf-badge.is-layout-constrained,
.wp-block-group.story-pdf-badge{
  flex:0 0 36px !important;
  width:36px !important;
  height:48px !important;
  background:var(--accent) !important;
  border-radius:2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:flex-start !important;
  margin:2px 0 0 0 !important;
  padding:0 !important;
  position:relative !important;
  cursor:pointer !important;
  transition:background .2s !important;
}
.story-pdf-badge::before,
.story-pdf-badge::after{content:none !important;}
.story-pdf-badge p{
  margin:0 !important;
  padding:0 !important;
  color:var(--bg-card) !important;
  font-family:var(--font-mono) !important;
  font-size:9.5px !important;
  font-weight:400 !important;
  letter-spacing:.1em !important;
  line-height:1 !important;
  text-align:center !important;
}
.story-card:has(h3 a:hover) .story-pdf-badge,
.story-pdf-badge:hover{background:var(--accent-ink) !important;}

/* Content-Spalte */
.story-content,
.story-content.is-layout-constrained,
.wp-block-group.story-content{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  padding:0 !important;
  margin:0 !important;
}

/* Titel — strikter 2-Zeilen-Slot */
.story-content h3,
.story-content h3.wp-block-heading{
  font-family:var(--font-serif) !important;
  font-size:.94rem !important;
  font-weight:500 !important;
  color:var(--ink) !important;
  margin:0 0 4px 0 !important;
  padding:0 !important;
  line-height:1.3 !important;
  text-align:left !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
@media(min-width:900px){
  .story-content h3,
  .story-content h3.wp-block-heading{
    min-height:calc(.94rem * 1.3 * 2) !important;
  }
}
.story-content h3 a{
  color:inherit !important;
  text-decoration:none !important;
  transition:color .15s !important;
}
.story-content h3 a:hover{color:var(--accent) !important;}

/* Beschreibung — strikter 2-Zeilen-Slot */
.story-content p:not(.story-meta){
  font-family:var(--font-serif) !important;
  font-size:.83rem !important;
  font-weight:400 !important;
  color:var(--ink-soft) !important;
  line-height:1.55 !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  text-align:left !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
@media(min-width:900px){
  .story-content p:not(.story-meta){
    min-height:calc(.83rem * 1.55 * 2) !important;
  }
}

/* Meta — unten, linksbündig, Mono */
.story-meta{
  font-family:var(--font-mono) !important;
  font-size:.72rem !important;
  font-weight:400 !important;
  letter-spacing:.08em !important;
  color:var(--ink-mute) !important;
  margin:0 !important;
  margin-top:auto !important;
  padding:0 !important;
  text-align:left !important;
  text-transform:uppercase !important;
  line-height:1.4 !important;
}
.story-meta strong{
  color:var(--accent) !important;
  font-weight:400 !important;
}

/* === FOOTER === */
/* v0.8.0: Footer-Kontrast erhöht — vorher .72/.70/.40 (knapp/zu wenig).
 * v0.9.15: margin-top:80px aus dieser Definition entfernt — sie kam im
 * Stylesheet NACH dem Sticky-Footer-Pattern (.site-footer{margin-top:auto})
 * und hat es ueberschrieben. Folge: Footer hing wieder im Content statt
 * unten zu kleben. Visueller Abstand zum Content kommt jetzt aus dem
 * padding-bottom der vorangehenden .section. */
.site-footer{background:var(--ink);color:rgba(236,231,219,.85);padding:56px 28px 28px;}
html[data-dark="true"] .site-footer{background:#0d1110;}
.footer-inner{max-width:var(--max);margin:0 auto;}
.footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-bottom:32px;}
/* v0.9.17: Selektor von h4 auf h2 umgestellt — semantisch korrekt nach
 * der Heading-Order (Page hat h1, Footer-Spalten sind oberste neue Ebene
 * darunter). Visuell unveraendert: gleiche Mono-Caps-Optik wie zuvor. */
.site-footer h2{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px;font-weight:400;}
.site-footer p,.site-footer a{font-size:.92rem;line-height:1.85;color:rgba(236,231,219,.82);font-family:var(--font-sans);}
.site-footer a{border:none;}
.site-footer a:hover{color:var(--accent-on-dark);}
/* v0.9.13: Footer-Menue-Liste ohne Bullets, gleiche Optik wie die freien
 * Text-Spalten (Kontakt, Links & Vereine). */
.site-footer .footer-list{list-style:none;padding:0;margin:0;}
.site-footer .footer-list li{margin:0;}
.site-footer .footer-list a{display:block;line-height:1.85;}
.footer-bottom{border-top:1px solid rgba(236,231,219,.18);padding-top:18px;text-align:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:rgba(236,231,219,.6);}

.page{display:none;}.page.active{display:block;}


/* === SIGHTS SPLIT LAYOUT === */
.sights-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;}
/* v0.6.44: position:sticky muss auf der GRID-SPALTE sitzen, nicht auf
 * dem inneren Map-Element. Sonst füllt das Sticky-Element die Spalte
 * komplett aus und es bleibt kein Scroll-Spielraum für den Sticky-Effekt.
 * Mobile (<900px): wir kippen das Sticky aus, weil dort nur eine Spalte
 * untereinander steht. */
/* v0.6.49: top nutzt die zur Laufzeit gemessene Header-Höhe (siehe
 * main.js → updateHeaderOffset). Fallback 80px falls JS noch nicht
 * gelaufen ist. +16px Puffer zwischen Header-Unterkante und Karte. */
.sights-map-col{position:sticky;top:calc(var(--header-h, 80px) + 16px);align-self:start;}
.map-sticky{height:min(580px,calc(100vh - 60px));margin-bottom:0;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;}
.sights-list-col{display:flex;flex-direction:column;gap:12px;}
.sight-row{display:flex;gap:16px;background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--radius);padding:14px;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s;align-items:flex-start;}
.sight-row:hover{border-color:var(--accent-warm);box-shadow:-4px 0 0 0 var(--accent-warm);transform:translateX(2px);}
/* v0.6.43: Aktiv-State (gesetzt von JS bei Pin-Hover über die Map). */
/* v0.9.11: Hover und Active beide warm — alte Trennung (teal/warm) aufgehoben.
 * Markiert die aktuell ausgewaehlte Sehenswuerdigkeit (Map-Pin-Hover). */
.sight-row.is-active{border-color:var(--accent-warm);box-shadow:-4px 0 0 0 var(--accent-warm);}

/* v0.6.43: Pin-Aktiv-State — warmer Akzent, leicht vergrößert.
 * Der Petrol-Pin ist als data-URI/Inline-SVG nicht von außen umfärbbar;
 * stattdessen legen wir ein zweites SVG via ::before drüber, das nur
 * im Aktiv-State sichtbar wird. So bleibt der Standard-Pin unverändert. */
.leaflet-marker-icon.doelau-pin{transition:transform .2s;}
/* v1.0.5: Die Skalierung lag auf .leaflet-marker-icon selbst — dort setzt
 * Leaflet aber die Position als Inline-Style (transform:translate3d), und
 * inline schlägt Stylesheet. scale(1.15) kam nie an, nur der Farbwechsel
 * wirkte. Skalierung deshalb auf das SVG-Kind, das Leaflet nicht anfasst. */
.leaflet-marker-icon.doelau-pin.is-active{z-index:1000 !important;}
.leaflet-marker-icon.doelau-pin svg{transition:transform .2s;transform-origin:50% 100%;}
.leaflet-marker-icon.doelau-pin.is-active svg{transform:scale(1.15);}
.leaflet-marker-icon.doelau-pin.is-active svg path{fill:var(--accent-warm);stroke:var(--accent-warm-ink);}

.sight-row-img{width:96px;height:72px;flex-shrink:0;background:linear-gradient(135deg,var(--stone),var(--bg-soft));border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--ink-mute);font-family:var(--font-mono);letter-spacing:.08em;}
.sight-row-body{flex:1;min-width:0;}
.sight-row-body h3{font-family:var(--font-serif);font-size:1.05rem;font-weight:500;color:var(--ink);margin-bottom:3px;line-height:1.3;}
.sight-row-body p{font-size:.88rem;color:var(--ink-soft);line-height:1.4;margin:0;}

/* === SIGHT DETAIL === */
.sight-detail-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start;margin-bottom:72px;}
/* v0.6.11: Cards (Suche, Archive, Sight-Grid) brauchen feste Bild-Höhe für
 * Layout-Konsistenz. Mit `width:100%;height:auto` (v0.6.10) rendete ein
 * hochkantes Foto z.B. 360×640px, sprengte das Card-Grid und überlappte mit
 * Title/Body. Card-UIs croppen Vorschau-Bilder konventionell — das ist hier
 * akzeptabel. DETAILSEITE und MINI-LISTE bleiben flexibel (v0.6.9).
 *
 * === Detailseite: Container nimmt Bildhöhe an (flexibel) === */
.sight-detail-img{position:relative;background:var(--bg-card);border-radius:var(--radius);overflow:hidden;}
.sight-detail-img:not(:has(img)){aspect-ratio:4/5;border:1px solid var(--rule);background-image:repeating-linear-gradient(45deg,transparent 0 12px,var(--rule-soft) 12px 13px);}
.sight-detail-img img{display:block;width:100%;height:auto;}

/* === Cards (Suche, Archive): feste Höhe 200px + cover === */
/* v1.0.5: flex-basis mitgesetzt. .blog-card ist Flex-Column, dort ersetzt
 * flex-basis die height-Angabe — die 180px aus Zeile 500 blieben deshalb
 * bestehen und die hier dokumentierten 200px kamen nie an. */
.blog-img{background:var(--bg-card);height:200px;flex-basis:200px;position:relative;overflow:hidden;}
/* v0.8.0: leerer Image-Bereich = ruhige Fläche statt "Foto"-Platzhalter.
 * Vorher: harter Stein/Rule-Gradient mit Text → wirkte wie fehlendes Bild.
 * Jetzt: subtiler diagonaler Verlauf in bg-soft, ohne Text. */
.blog-img:not(:has(img)){
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-soft) 92%, var(--accent) 8%) 0%, var(--bg-soft) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.blog-img img{display:block;width:100%;height:100%;object-fit:cover;}

/* === Sight-Card-Grid (.sight-img): feste Höhe 140px + cover === */
.sight-img{background:var(--bg-card);height:140px;overflow:hidden;}
.sight-img:not(:has(img)){background:linear-gradient(135deg,var(--stone),var(--bg-soft));display:flex;align-items:center;justify-content:center;color:var(--ink-mute);font-size:.75rem;font-family:var(--font-mono);letter-spacing:.08em;}
.sight-img img{display:block;width:100%;height:100%;object-fit:cover;}

/* === Mini-Liste (.sight-row-img): 96 wide, height flexibel (Bild bestimmt) === */
.sight-row-img{width:96px;flex-shrink:0;background:var(--bg-card);border-radius:var(--radius);overflow:hidden;}
.sight-row-img:not(:has(img)){height:72px;background:linear-gradient(135deg,var(--stone),var(--bg-soft));display:flex;align-items:center;justify-content:center;color:var(--ink-mute);font-size:.72rem;font-family:var(--font-mono);letter-spacing:.08em;}
.sight-row-img img{display:block;width:100%;height:auto;}
.sight-img-caption{position:absolute;left:20px;bottom:20px;background:var(--bg-card);border:1px solid var(--rule);padding:10px 14px;font-family:var(--font-mono);font-size:.72rem;line-height:1.6;color:var(--ink-mute);border-radius:var(--radius);}
.sight-detail-content{padding-top:40px;}
.sight-detail-title{font-family:var(--font-serif);font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:400;color:var(--ink);line-height:1.15;margin-bottom:22px;letter-spacing:-.015em;text-wrap:balance;}
.sight-detail-title em{font-style:italic;color:var(--accent);font-weight:400;}
.sight-detail-lede{font-family:var(--font-sans);font-size:1.02rem;line-height:1.65;color:var(--ink-soft);margin-bottom:34px;max-width:540px;}
.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule);padding-top:22px;margin-bottom:28px;}
.fact-item{padding-right:24px;}
.fact-item:first-child{border-right:1px solid var(--rule);}
.fact-item:last-child{padding-left:24px;padding-right:0;}
.fact-value{font-family:var(--font-serif);font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:400;color:var(--ink);line-height:1.2;margin-bottom:6px;}
.fact-label{font-family:var(--font-sans);font-size:.88rem;color:var(--ink-soft);line-height:1.4;}
.sight-detail-body{max-width:var(--max-narrow);margin:0 auto 60px;}
.sight-detail-body h3{font-family:var(--font-serif);font-size:1.4rem;font-weight:500;margin:40px 0 14px;color:var(--ink);}
.sight-detail-body h3:first-child{margin-top:0;}
/* v0.8.8: alle Body-Absätze einheitlich dunkel (--ink). Vorher war der
 * ERSTE Paragraph als Pseudo-Lede dunkel gesetzt und alle nachfolgenden
 * grau — wirkte mit H2-Struktur visuell wie eine Hierarchie, die so
 * nicht gemeint ist (Sektionen nach dem zweiten H2 erschienen leiser). */
.sight-detail-body p{font-family:var(--font-serif);font-size:1.05rem;line-height:1.75;margin-bottom:14px;color:var(--ink);}
.sight-detail-body .prevnext{max-width:100%;}

/* Sights responsive */
@media(max-width:900px){
  .sights-split{grid-template-columns:1fr;gap:24px;}
  /* v0.6.44: Sticky aus, da auf Mobile nur eine Spalte. */
  .sights-map-col{position:static;}
  /* v0.7.7: vorher fest 360px — auf 700px-Phones zu viel, auf großen
   * Tablets zu wenig. clamp(240, 50vh, 360) skaliert mit Viewport-Höhe.
   * Beide Selektor-Stufen abdecken: vor und nach JS-Init. */
  .map-sticky,
  .map-sticky.doelau-map-init,
  .map-sticky[data-doelau-map]{
    height:clamp(240px,50vh,360px);
  }
  .sight-detail-hero{grid-template-columns:1fr;gap:28px;margin-bottom:48px;}
  .sight-detail-img{max-width:520px;margin:0 auto;}
  .sight-detail-content{padding-top:0;}
  .fact-grid{grid-template-columns:1fr;gap:18px;}
  .fact-item,.fact-item:first-child,.fact-item:last-child{padding:0;border:none;}
  .fact-item:first-child{border-bottom:1px solid var(--rule);padding-bottom:18px;}
}
@media(max-width:640px){
  .sight-row{padding:10px;gap:12px;}
  /* v0.7.7: vorher 72x60 — zu klein. Aspect 4:3 statt fixer Höhe, Breite
   * fluid mit Untergrenze 84px für Erkennbarkeit. */
  .sight-row-img{width:clamp(84px,24vw,108px);}
  .sight-row-img:not(:has(img)){aspect-ratio:4/3;height:auto;}
  .sight-detail-hero{margin-bottom:36px;}
}




/* Sidebar current item */
.sidebar-box li.is-current{background:var(--accent-soft);border-radius:var(--radius);padding-left:10px;padding-right:10px;margin-left:-10px;margin-right:-10px;border-bottom:1px solid var(--accent-soft);}
.sidebar-box li.is-current span{color:var(--accent-ink);font-weight:500;font-family:var(--font-sans);font-size:.9rem;display:block;padding:6px 0;}


/* Mobile overview shortcut - visible only on mobile */
.mega .mega-overview-link,.dropdown .mobile-overview{display:none;}
@media(max-width:900px){
  .mega .mega-overview-link,.dropdown .mobile-overview{display:block;font-family:var(--font-sans);font-weight:500;font-size:.92rem;color:var(--accent-soft)!important;padding:10px 0!important;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.12)!important;}
  .mega-overview-link:hover,.mobile-overview:hover{color:#fff!important;}
  .mobile-overview{margin:0 42px 6px;padding:10px 0!important;}
}
/* === SIGHT MINI MAP === */
.sight-mini-map{max-width:var(--max-narrow);margin:40px auto 60px;}
.sight-mini-map-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px;}
.map-mini{position:relative;aspect-ratio:2/1;background:linear-gradient(135deg,var(--bg-soft),var(--stone));border:1px solid var(--rule);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--accent-ink);overflow:hidden;}
.map-mini::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0 40px,rgba(28,35,34,.03) 40px 41px),repeating-linear-gradient(90deg,transparent 0 40px,rgba(28,35,34,.03) 40px 41px);pointer-events:none;}
.map-mini-pin{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;}
.map-mini-pin svg{filter:drop-shadow(0 2px 4px rgba(28,35,34,.15));}
.map-mini-caption{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);text-align:center;line-height:1.5;}
.map-mini-coords{font-size:.7rem;color:var(--ink-mute);margin-top:2px;}

/* === MEGA MENU === */
.nav-item.has-mega{position:static;}
/* v0.8.2: Toggle-Button für Submenus — auf Desktop unsichtbar (Hover öffnet),
 * auf Mobile sichtbar (siehe @media unten). */
.nav-submenu-toggle{display:none;}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg-card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);box-shadow:0 10px 30px -20px rgba(28,35,34,.25);z-index:200;}
/* v1.0.2: Höhen-Deckel. Das Theme war auf 8 Sehenswürdigkeiten ausgelegt;
 * inzwischen sind es 30+, wodurch das Panel unten aus dem Viewport lief und
 * abgeschnitten wurde. --header-h setzt main.js (Header inkl. Nav-Leiste),
 * der Fallback deckt den Moment vor dem JS-Init ab. */
.mega{max-height:calc(100vh - var(--header-h, 148px) - 16px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.nav-item.has-mega.menu-open > .mega{display:block;}
/* v1.0.2: Sehenswürdigkeiten-Spalte breiter gewichtet — sie trägt jetzt zwei
 * Textspalten (siehe .mega-col-sight ul). minmax(0,…) verhindert, dass lange
 * Titel die fr-Spalten aufblähen. */
/* v1.0.5: erste Spalte von fest 170px auf minmax(9rem,11rem). Absolut gesetzt
 * skalierte sie nicht mit dem Schriftgrößen-Schalter — bei XL brauchen
 * Einträge wie „Sehenswürdigkeiten" rund 180 px und brachen um. */
.mega-inner{max-width:var(--max);margin:0 auto;padding:28px 28px 32px;display:grid;grid-template-columns:minmax(9rem,11rem) minmax(0,2fr) minmax(0,1.6fr);gap:36px;}
.mega-col h5{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:400;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--rule-soft);}
.mega-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;}
.mega-col li{margin:0;}
/* v0.6.4: zurück zum v26-Charakter — Source Serif 4, kompakt, ohne Trennlinien.
 * Mega-Lead verliert seine Pille — alle Items einheitlich. */
.mega-col a{display:block;font-family:var(--font-serif);font-weight:400;font-size:.95rem;color:var(--ink);padding:5px 0;border:none;line-height:1.4;border-radius:0;margin:0;background:none;}
.mega-col a:hover{color:var(--accent);background:none;}
.mega-col a.mega-lead{font-family:var(--font-serif);font-weight:400;font-size:.95rem;padding:5px 0;border-radius:0;margin:0;background:none;}
.mega-col a.mega-lead:hover{color:var(--accent);background:none;}
/* Personen: Years drunter (column-flex), Name in Serif */
.mega-col-person a{display:flex;flex-direction:column;gap:0;padding:5px 0;margin:0;}
.mega-col-person .mega-name{font-family:var(--font-serif);font-size:.95rem;color:var(--ink);line-height:1.3;}
.mega-col-person .mega-years{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-mute);letter-spacing:.06em;line-height:1.3;}
.mega-col-person a:hover .mega-name{color:var(--accent);}
.mega-col-person a:hover .mega-years{color:var(--accent);}

/* Split persons into 2 columns within col */
.mega-persons-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}

/* v1.0.2: Sehenswürdigkeiten fließen mehrspaltig — bei 30+ Einträgen war die
 * einspaltige Liste ~1100px hoch. column-width statt column-count, damit die
 * Spaltenzahl sich an die verfügbare Breite anpasst statt die Titel zu quetschen.
 * display:block hebt das flex-column aus `.mega-col ul` auf (Multicol braucht
 * einen Block-Container). */
/* v1.0.5: column-width von 200px auf 150px. Bei 200 entstand die zweite
 * Spalte rechnerisch erst ab rund 1068 px Viewport — zwischen 901 und 1068
 * blieb die 30+-Einträge-Liste einspaltig und lief in den Höhendeckel, also
 * genau in den Zustand, den v1.0.2 vermeiden sollte. */
.mega-col-sight ul{display:block;column-width:150px;column-gap:24px;}
.mega-col-sight li{break-inside:avoid;}

/* Fußzeilen-Link „Alle … →" — Einstieg in die vollständige Übersichtsseite,
 * falls die Liste im Menü gescrollt werden müsste. */
.mega-col .mega-all-link{display:inline-block;margin-top:14px;padding-top:10px;border-top:1px solid var(--rule-soft);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-mute);width:100%;}
.mega-col .mega-all-link:hover{color:var(--accent);}

@media(max-width:900px){
  .mega,.dropdown{position:static;border:none;box-shadow:none;background:rgba(0,0,0,.2);max-height:0;overflow:hidden;transition:max-height .3s ease;display:block;padding:0;}
  .nav-item.menu-open > .mega,.nav-item.menu-open > .dropdown{max-height:2400px;}
  .mega-inner{grid-template-columns:1fr;padding:8px 0;gap:0;}
  /* v0.9.17: .mega-col-Spalten-Padding raus — die Sub-Items haben jetzt
   * dasselbe Padding/Border-Pattern wie .dropdown a (Top-Level-Sub-Style).
   * Vorher fielen die Mega-Col-Items als kompakte Liste aus dem Rest des
   * Mobile-Menus heraus (Desktop-Mega-Artefakt). */
  .mega-col{padding:0;}
  /* v0.8.2: dynamische CPT-Listen (Sehenswürdigkeiten + Persönlichkeiten)
   * verstecken — füllten 23+ Zeilen im Hamburger-Menü, das nicht scrollbar
   * ist. Nutzer erreichen sie über die Übersichtsseiten der CPTs.
   * v1.0.5: Die Spalte bleibt versteckt, ihr „Alle … →"-Fußlink aber nicht.
   * In v1.0.2 hatte ich ihn INNERHALB der dynamischen Spalte gerendert —
   * damit verschwand auf Mobilgeräten genau der Ausweg, der aus der
   * gedeckelten Liste herausführen sollte. */
  .mega-col-dynamic > h5,
  .mega-col-dynamic > ul,
  .mega-col-dynamic > .mega-persons-grid{display:none;}
  .mega-col .mega-all-link{
    display:block;
    width:auto;
    margin:0;
    padding:12px 42px;
    border-top:none;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:rgba(255,255,255,.75);
    font-size:.95rem;
    font-family:var(--font-serif);
    letter-spacing:0;
    text-transform:none;
  }
  .mega-col .mega-all-link:hover{background:rgba(0,0,0,.3);color:#fff;}
  /* v0.9.11: "Übersicht"-Label im Mobile-Menü versteckt — Mega-Menu-Artefakt
   * aus Desktop. Auf Mobile gibt es keine Spalten, also auch keine
   * Spalten-Überschrift; war zudem auf dunklem Hintergrund schlecht lesbar. */
  .mega-col h5{display:none;}
  .mega-col a{
    color:rgba(255,255,255,.75);
    padding:12px 42px;
    font-size:.95rem;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .mega-col a:last-child{border-bottom:none;}
  .mega-col a:hover{background:rgba(0,0,0,.3);color:#fff;}
  .mega-col-person .mega-name{color:rgba(255,255,255,.85);font-size:.92rem;}
  .mega-col-person .mega-years{color:rgba(255,255,255,.45);font-size:.68rem;}
  .mega-persons-grid{grid-template-columns:1fr 1fr;gap:0 16px;}
  /* v0.9.18: Padding hier explizit setzen — die Sub-Items unter "Über Dölau"
   * sind <a class="mega-lead">; .mega-col a.mega-lead aus dem Desktop-Block
   * (padding:5px 0) hat hoehere Spezifitaet als .mega-col a, ueberschrieb
   * also mein Mobile-Padding 12 42 → Items waren links buendig ohne Indent.
   * v0.9.19: Color/font-weight-Override entfernt — auf Mobile sollen die
   * mega-lead-Items genau wie .dropdown a aussehen (gleiche Helligkeit,
   * gleiche Stärke). Hervorhebung war Desktop-Pattern (Mega-Menu-Lead). */
  .mega-col a.mega-lead{padding:12px 42px;}
  .dropdown a{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.06);padding:12px 42px;font-size:.95rem;}
  .dropdown a:hover{background:rgba(0,0,0,.3);color:#fff;}
  /* v0.8.2: Chevron-Pseudo am Link-Ende entfernt — gibt jetzt eigenen
   * Toggle-Button (.nav-submenu-toggle), damit der Link selbst klickbar
   * bleibt und auf die Eltern-Seite navigiert (z.B. „Chronik" → /chronik/).
   * Chevron sitzt rechts neben dem Link, gleiches visuelles Pattern wie
   * vorher. */
  .main-nav .nav-item{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;}
  .main-nav .nav-item > .nav-link{flex:1 1 auto;}
  .nav-submenu-toggle{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    background:none;
    border:none;
    border-left:1px solid rgba(255,255,255,.06);
    color:rgba(236,231,219,.6);
    cursor:pointer;
    transition:color .2s, background .15s;
  }
  .nav-submenu-toggle svg{transition:transform .25s;}
  .nav-item.menu-open .nav-submenu-toggle svg{transform:rotate(180deg);}
  .nav-submenu-toggle:hover{background:rgba(0,0,0,.2);color:#fff;}
  .nav-item > .mega,
  .nav-item > .dropdown{flex:0 0 100%;}
}

/* === RESPONSIVE === */
@media(max-width:1100px){
  .teaser-grid,.sight-grid,.person-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:900px){
  .teaser-grid,.sight-grid,.person-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-content{grid-template-columns:1fr;gap:40px;}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cta{flex-direction:column;gap:20px;text-align:center;padding:32px 28px;}
  .cta-text p{margin:0 auto;}
  .portrait-header{flex-direction:column;align-items:center;text-align:center;}
  .portrait-meta{align-items:flex-start;}
  :root{--pad-y:64px;}
}
@media(max-width:640px){
  .teaser-grid,.sight-grid,.person-grid,.blog-grid{grid-template-columns:1fr;}
  /* Portrait-Steckbrief auf Mobile column-Layout: Label oben, Wert unten,
   * sonst quetscht sich der Wert auf <320px in 1-2-Wort-Spalten. */
  .portrait-meta-row{flex-direction:column;gap:2px;}
  .portrait-meta-label{min-width:0;padding-top:0;}
  /* v0.8.6: rechts Padding reduziert, damit der Menü-Button näher am
   * Bildschirmrand sitzt (vorher 20px → 12px), Logo behält sein Atem-
   * Padding links (16px). Vertikal: 14/12 für kompakteren Header. */
  .header-inner{padding:14px 12px 12px 16px;align-items:center;}
  .mobile-toggle{margin-right:0;}
  .logo img{height:44px;}
  .logo-text h1{font-size:1.15rem;}
  .logo-text span{font-size:.64rem;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .prevnext{flex-direction:column;}
  .pn-right{text-align:left;margin-left:0;}
  /* v1.0.5: .nav-inner und .nav-link sind in den 900er-Block gewandert —
   * sie gehören zur Hamburger-Umschaltung, nicht zum Handy-Breakpoint. */
  /* v0.9.17: .nav-link.active-Border-Indikator auf Mobile entfernt.
   * Auf dem Handy stand er immer in der obersten sichtbaren Zeile und
   * sah aus wie ein abweichender Top-Eintrag — redundant, da der User
   * eh weiss, wo er gerade ist. Active-Highlight bleibt nur Desktop. */
  .dropdown{position:static;box-shadow:none;border-radius:0;border:none;background:rgba(0,0,0,.25);}
  .dropdown a{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.06);padding:12px 42px;}
  .dropdown a:hover{background:rgba(0,0,0,.3);color:#fff;}
  /* v0.7.7: pad-x als CSS-Variable — chronik-zeitstrahl und alle anderen
   * edge-to-edge-Elemente passen sich automatisch an. */
  :root{--pad-x:20px;--pad-y:48px;}
  .page-content{padding:24px 20px;}
  .portrait-photo{width:140px;height:180px;}
  .cta{padding:28px 24px;}
  /* v0.6.37: .story-card und .story-pdf-badge haben jetzt durchgängige
   * Werte (Desktop = Mobile), separater Mobile-Override unnötig. */
}
/* v1.0.5: von 768 auf 900 gezogen — siehe Sammelkommentar unten.
 * Zwischen 769 und 900 px war die Navigationsleiste noch als waagerechte
 * Desktop-Leiste sichtbar, bekam aber schon die 48-px-Chevrons des
 * Klappmenüs. Gemessen lief sie dadurch um 506 bis 617 px aus dem
 * Viewport. Ab 901 px passen die Links mit 768 px bequem. */
@media(max-width:900px){
  .mobile-toggle{display:flex;align-items:center;gap:6px;}
  .main-nav{display:none;}
  /* v1.0.5: .nav-inner muss ab derselben Grenze senkrecht stapeln. Die Regel
   * stand vorher im 640er-Block — zwischen 641 und 768 px lagen die
   * Menüpunkte im geöffneten Hamburger deshalb nebeneinander, und das Menü
   * scrollte seitlich statt zu listen. */
  .nav-inner{flex-direction:column;padding:0;}
  .nav-link{padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.08);}
  /* v1.0.5: Header-Werkzeuge ab derselben Grenze ausblenden. Sonst stünden
   * Aa-Popover und Suche gleichzeitig im Header UND im Hamburger — zwei
   * Suchfelder, zwei Schriftgrößen-Umschalter. */
  .header-tools{display:none;}
  /* v0.9.14: Mobile-Hamburger ist intern scrollbar — auf kleinen Geraeten
   * (z.B. iPhone SE) ist das gesamte Menue laenger als der Viewport, mit
   * Einstellungen + Suche unten haengt sonst der Untermenue-Inhalt unter
   * dem sichtbaren Bereich. body.menu-open blockiert weiterhin den
   * Hintergrund-Scroll; overscroll-behavior verhindert, dass der Scroll
   * am Ende auf den Body uebergeht.
   * v1.0.5: --header-h statt fest verdrahteter 72 px. Die echte Header-Höhe
   * liegt je nach Breite und Schriftgröße bei 84 px und mehr, das Menü ragte
   * also unter den Viewport. main.js pflegt die Variable per ResizeObserver. */
  .main-nav.open{
    display:block;
    max-height:calc(100vh - var(--header-h, 72px));
    max-height:calc(100dvh - var(--header-h, 72px));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* v0.9.7: Mobile-only Tools (Suche + Schrift + Theme) am Ende des
 * Hamburger-Menus. Auf Desktop unsichtbar — dort gibt es Aa-Popover
 * und Such-Button im Header.
 * v0.9.12: Schriftgroesse + Ansicht stecken jetzt im klappbaren
 * Pseudo-Nav-Item .mobile-settings — sieht aus und verhaelt sich
 * wie die anderen Top-Level-Items, nur ohne Linkziel. */
.mobile-tools{display:none;}
@media(max-width:900px){ /* v1.0.5: an die Hamburger-Grenze angeglichen */
  .main-nav .mobile-tools{
    display:block;
    border-top:1px solid rgba(255,255,255,.08);
  }
  /* Such-Block hat eigenen Padding (frueher Teil des mobile-tools-Wrappers). */
  .main-nav .mobile-tools-search{padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.08);}
  .main-nav .mobile-tools-search .search-form{margin:0;max-width:none;}

  /* Einstellungen-Item: Klappverhalten analog zu .mega/.dropdown. */
  .main-nav .mobile-settings > .nav-link{cursor:pointer;user-select:none;}
  .main-nav .nav-item > .mobile-settings-body{flex:0 0 100%;}
  .main-nav .mobile-settings-body{
    background:rgba(0,0,0,.2);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .main-nav .mobile-settings.menu-open > .mobile-settings-body{max-height:600px;}
  .main-nav .mobile-settings-body .mobile-tools-section{padding:16px 42px;}
  .main-nav .mobile-settings-body .mobile-tools-section + .mobile-tools-section{
    border-top:1px solid rgba(255,255,255,.06);
  }

  .main-nav .mobile-tools .prefs-label{
    color:rgba(255,255,255,.65);
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-bottom:8px;
  }
  .main-nav .mobile-tools .prefs-row{display:grid;gap:6px;}
  .main-nav .mobile-tools .prefs-row.prefs-fs{grid-template-columns:repeat(4,1fr);}
  .main-nav .mobile-tools .prefs-row.prefs-theme{grid-template-columns:1fr 1fr;}
}

/* Fade in */
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease;}
.fade-in.in{opacity:1;transform:none;}

/* ===========================================================
 * 8. WordPress-Anpassungen
 * Notwendige Ergänzungen, da im v26-Demo SPA-Pages benutzt werden,
 * im echten Theme aber jede Seite ein eigenes Dokument ist.
 * =========================================================== */

.page { display: block; }   /* In WP gibt es keine SPA-Tabs */

/* WP-Standard-Klassen */
.alignleft   { float: left; margin: 0 1.5em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption  { max-width: 100%; }
.wp-caption-text {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink-mute);
  margin-top: 6px;
}
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%);
  clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--shadow); clip: auto !important;
  -webkit-clip-path: none; clip-path: none; color: var(--ink);
  display: block; font-size: 1rem; font-weight: 600;
  height: auto; left: 5px; line-height: normal;
  padding: 15px 23px 14px; text-decoration: none; top: 5px;
  width: auto; z-index: 100000;
}

/* Such-Form */
.search-form {
  display: flex; gap: 8px; max-width: 480px; margin: 24px 0;
}
.search-form .search-field {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: .95rem;
}
.search-form .search-submit {
  padding: 10px 18px;
  background: var(--accent);
  color:var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  cursor: pointer;
}

/* Pagination */
.pagination, .nav-links {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 32px 0; font-family: var(--font-mono);
  font-size: .85rem;
}
.pagination a, .pagination span,
.nav-links a, .nav-links span {
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-soft);
}
.pagination a:hover, .nav-links a:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.pagination .current, .nav-links .current {
  background: var(--accent);
  color:var(--on-accent);
  border-color: var(--accent);
}

/* WP-Block-Editor: einige Standard-Blöcke an unsere Tokens binden */
.wp-block-quote {
  border-left: 3px solid var(--accent);
  padding: 12px 20px;
  background: var(--bg-card);
  margin: 24px 0;
}
.wp-block-quote cite {
  display: block; margin-top: 8px;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--ink-mute);
}
.wp-block-image figcaption {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink-mute);
  text-align: center;
}

/* v0.6.52/53: Literatur-Tabelle — bibliographische Liste mit fünf Spalten.
 * Mono-Akzente für Reihen-Nr. (Spalte 1) und ISBN (Spalte 4), kursive
 * Autoren (Spalte 3), dezentes Etikett für „Vergriffen" (als Inline-Span
 * <span class="lit-vergriffen"> in Spalte 5).
 *
 * v0.6.53: Spalten-CSS nutzt jetzt :nth-child() statt eigene <td>-Klassen,
 * damit WordPress' Block-Validator nicht meckert. Bernd kann Zeilen ganz
 * normal über die Block-Toolbar einfügen — kein Klassen-Fummeln nötig. */
.wp-block-table.literatur-table{margin:32px 0;}
.wp-block-table.literatur-table table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-serif);
  font-size:.93rem;
}
.wp-block-table.literatur-table td{
  padding:11px 12px 11px 0;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:top;
  color:var(--ink);
  border-top:0;
  border-left:0;
  border-right:0;
}
.wp-block-table.literatur-table tr:last-child td{border-bottom:0;}
/* Spalte 1: Reihen-Nummer (Mono, Petrol) */
.wp-block-table.literatur-table td:nth-child(1){
  font-family:var(--font-mono);
  color:var(--accent);
  font-size:.82rem;
  width:64px;
  white-space:nowrap;
}
/* Spalte 2: Titel (Serif) — Default greift schon */
.wp-block-table.literatur-table td:nth-child(2){
  font-family:var(--font-serif);
}
/* Spalte 3: Autor (kursiv, dezent) */
.wp-block-table.literatur-table td:nth-child(3){
  font-style:italic;
  color:var(--ink-soft);
  font-size:.88rem;
  width:30%;
}
/* Spalte 4: ISBN (Mono, dezent) */
.wp-block-table.literatur-table td:nth-child(4){
  font-family:var(--font-mono);
  font-size:.76rem;
  color:var(--ink-mute);
  white-space:nowrap;
  width:22%;
}
/* Spalte 5: Status */
.wp-block-table.literatur-table td:nth-child(5){
  width:90px;
  text-align:right;
}
.wp-block-table.literatur-table .lit-vergriffen{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  /* v1.0.3: war hart #993c1d ohne Dark-Pendant und wurde im Dunkelmodus zum
   * braunen Schemen (2,57:1). --danger hat jetzt einen Dark-Wert. */
  color:var(--danger);
  border:1px solid var(--danger);
  padding:1px 6px;
  border-radius:2px;
}
@media(max-width:720px){
  .wp-block-table.literatur-table td{
    display:block;
    width:100% !important;
    padding:2px 0;
    border-bottom:0;
  }
  .wp-block-table.literatur-table tr{
    display:block;
    padding:12px 0;
    border-bottom:1px solid var(--rule-soft);
  }
  .wp-block-table.literatur-table tr:last-child{border-bottom:0;}
  .wp-block-table.literatur-table td:nth-child(1){
    margin-bottom:2px;
    width:auto !important;
  }
}

/* v0.6.51: WordPress-Separator-Block — bisher ungestylt, mit
 * Browser-Default-Margins zu eng. Mit vernünftigen Top/Bottom-Margins,
 * dezenter Linienfarbe (Theme-Rule) und Mittenausrichtung der Standard-
 * Variante. Wirkt überall, wo Bernd einen Separator einfügt. */
.wp-block-separator{
  border:0;
  border-top:1px solid var(--rule);
  margin:48px auto;
  width:120px;
  opacity:.8;
}
.wp-block-separator.is-style-wide{
  width:100%;
}
.wp-block-separator.is-style-dots{
  border-top:0;
  background:none;
  width:auto;
  height:auto;
  text-align:center;
  line-height:1;
  letter-spacing:1em;
  color:var(--rule);
}
.wp-block-separator.is-style-dots::before{
  content:"\00b7\00b7\00b7";
  font-size:1.5em;
}


/* === Block 3 — Map-Popups, Info-Box ====================================== */
/* Frontend-Styles für Karten-Popups und das Info-Box-Pattern. */

.info-box{
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:18px 22px;
  margin:24px 0;
}
.info-box p{
  color:var(--ink);
  margin:0 0 6px;
  font-size:.95rem;
  line-height:1.6;
}
.info-box p:last-child{margin-bottom:0;}
.info-box .has-mono-font-family{
  display:block;
  margin-bottom:8px;
  color:var(--accent-ink);
}
html[data-dark="true"] .info-box{
  background:var(--accent-soft);
  color:var(--ink);
}

/* Steckbrief-Pattern (frontend) */
.steckbrief{margin:24px 0;}
.steckbrief-portrait img{
  border-radius:var(--radius);
  border:1px solid var(--rule);
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
}
.steckbrief-table table{
  border-collapse:collapse;
  width:100%;
  font-size:.92rem;
}
.steckbrief-table td{
  padding:8px 12px;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:top;
  font-family:var(--font-sans);
}
.steckbrief-table td:first-child{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--ink-mute);
  text-transform:uppercase;
  width:32%;
}

/* === Leaflet-Map: Container-Reset + Popup-Styling ======================== */
/* v0.6.0: harter Container-Reset für alle Karten. Verhindert das Über-den-
 * Header-Lecken, das in v0.5.4 beobachtet wurde. Leaflet positioniert Tiles
 * mit absoluten Transformationen — ohne overflow:hidden quellen sie raus,
 * sobald keepBuffer oder Webfont-Layout-Shift den Container minimal verändert. */

[data-doelau-map]{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--bg-soft);
  border-radius:var(--radius);
}

.map-placeholder.doelau-map-init,
.map-mini.doelau-map-init{
  display:block;
  background:var(--bg-card);
  color:inherit;
}
.map-placeholder.doelau-map-init,
[data-doelau-map="sights"]{
  height:480px;
  padding:0;
}
/* v0.6.48/49: Karten-Maximalgröße bleibt 580px. Höhe berücksichtigt
 * Header (sticky) + 16px Top-Puffer + 24px Bottom-Reserve.
 * Fallback 80px Header falls JS noch nicht gelaufen ist.
 *
 * v1.0.5: In einen min-width-Block gehoben. Diese Regel und die Mobile-Regel
 * weiter oben haben dieselbe Spezifität (0,2,0) — Media Queries erhöhen die
 * nicht —, also gewann bisher die spätere bei ALLEN Breiten. Der v0.7.7-Fix
 * („auf 700px-Phones zu viel") war damit wirkungslos: auf einem iPhone stand
 * eine 580 px hohe Karte vor der Liste, rund 70 % der Bildschirmhöhe.
 * Zusätzlich problematisch, weil --header-h beim Öffnen des Hamburgers auf
 * Header + Menühöhe springt — die Rechnung wurde dann sehr klein. */
@media(min-width:901px){
  .map-sticky.doelau-map-init,
  .map-sticky[data-doelau-map]{
    height:min(580px, calc(100vh - var(--header-h, 80px) - 40px));
  }
}
#home-map-teaser.doelau-map-init,
#home-map-teaser[data-doelau-map]{
  height:340px;
  min-height:0;
}
.map-mini.doelau-map-init,
.map-mini[data-doelau-map]{
  aspect-ratio:auto;
  height:280px;
}
.map-mini[data-doelau-map]::before{display:none;}

/* Leaflet überschreibt einige Defaults — wir setzen ein paar an unsere Tokens. */
.leaflet-container{
  font-family:var(--font-sans);
  font-size:.92rem;
  background:var(--bg-soft);
  border-radius:var(--radius);
}
/* v0.6.0: Leaflet-interne z-indizes deckeln, damit die Karte den Header
 * nicht überlagert (Site-Header hat z.B. z-index 100). */
.leaflet-pane,
.leaflet-top,
.leaflet-bottom{ z-index:auto !important; }
.leaflet-tile-pane     { z-index:1 !important; }
.leaflet-overlay-pane  { z-index:2 !important; }
.leaflet-shadow-pane   { z-index:3 !important; }
.leaflet-marker-pane   { z-index:4 !important; }
.leaflet-tooltip-pane  { z-index:5 !important; }
.leaflet-popup-pane    { z-index:6 !important; }
.leaflet-control       { z-index:7 !important; }
/* v1.0.3: Der Hintergrund war hart hell, die Schriftfarbe schaltete aber mit —
 * im Dunkelmodus blieb 2,81:1, der Link darin 1,21:1. Die Urheberrechtszeile
 * von OpenStreetMap verschwand damit praktisch, was nicht nur kosmetisch,
 * sondern lizenzrechtlich relevant ist.
 *
 * v1.0.4: Deckend statt halbtransparent. Ein dunkler Grund mit 88 % Deckung
 * über hellen Kartenkacheln kam nur auf 3,64:1 — die Kacheln schlugen durch.
 * Deckend sind es 4,97:1 (dunkel) bzw. 5,53:1 (hell). Bewusst ohne
 * color-mix(), das ältere Browser nicht kennen; ein ungültiger Wert würde
 * die Zeile ganz ohne Hintergrund auf die Karte setzen. */
.leaflet-control-attribution{
  font-family:var(--font-mono);
  font-size:.62rem !important;
  background:var(--bg-card) !important;
  color:var(--ink-mute) !important;
}
/* v1.0.7: !important nachgezogen. leaflet.css setzt `.leaflet-container a`
 * auf sein Standardblau #0078a8 — gleiche Spezifität wie diese Regel, und
 * leaflet.css lädt als Abhängigkeit NACH main.css, gewann also. Gemessen
 * blieben dadurch 3,23:1 im Dunkelmodus. Die übrigen Attribution-Regeln
 * arbeiten aus demselben Grund bereits mit !important. */
.leaflet-control-attribution a{color:var(--accent-ink) !important;}
.leaflet-popup-content-wrapper{
  border-radius:var(--radius);
  background:var(--bg-card);
  color:var(--ink-soft);
  box-shadow:0 8px 28px -12px rgba(28,35,34,.25);
}
.leaflet-popup-tip{background:var(--bg-card);}
.leaflet-popup-content{margin:0;padding:0;font-family:var(--font-sans);width:auto !important;}

/* Eigene Popup-Box: Bild + Text + Link */
.doelau-popup{
  display:flex;
  flex-direction:column;
  width:240px;
}
.doelau-popup-img{
  height:120px;
  background:var(--bg-soft);
  overflow:hidden;
}
.doelau-popup-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.doelau-popup-body{padding:14px 16px 16px;}
.doelau-popup-body h4{
  font-family:var(--font-serif);
  font-size:1.02rem;
  font-weight:500;
  color:var(--ink);
  margin:0 0 6px;
  line-height:1.25;
}
.doelau-popup-body p{
  font-size:.86rem;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.doelau-popup-link{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid var(--accent-soft);
  padding-bottom:1px;
}
.doelau-popup-link:hover{color:var(--accent-ink);border-color:var(--accent);}

/* Marker-DivIcon — entfernt das Default-Hintergrundbild */
.doelau-pin{
  background:none !important;
  border:none !important;
}

/* === v0.5.0 patches ====================================================== */

/* ARCH-2: Lead-Subline unter Page-Titel */
.lead{
  font-family:var(--font-serif);
  font-size:1.15rem;
  line-height:1.55;
  color:var(--ink-soft);
  margin:8px 0 24px;
  max-width:62ch;
}

/* THE-13: PDF-Marker als Inline-Link gerendert */
.pdf-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  background:var(--bg-card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  color:var(--accent-ink);
  text-decoration:none;
  font-family:var(--font-sans);
  font-size:.92em;
  line-height:1.4;
  transition:border-color .15s,background .15s;
}
.pdf-link:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.pdf-link-icon{
  flex-shrink:0;
  color:var(--accent);
}

/* THE-8: Sidebar-Box „Dölau in Zahlen" — Faktenliste */
.sidebar-box .facts-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.sidebar-box .facts-list li{
  font-family:var(--font-sans);
  font-size:.88rem;
  color:var(--ink-soft);
  line-height:1.4;
  padding:0;
}
.sidebar-box .facts-list li strong{
  font-family:var(--font-serif);
  font-size:1.25rem;
  font-weight:600;
  color:var(--accent);
  display:block;
  margin-bottom:2px;
}

/* THE-8: Sidebar-Box „Weiterlesen" — Linkliste */
.sidebar-box .links-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.sidebar-box .links-list li{
  padding:0;
  border-bottom:1px solid var(--rule-soft);
}
.sidebar-box .links-list li:last-child{
  border-bottom:none;
}
.sidebar-box .links-list a{
  display:block;
  padding:10px 0;
  font-family:var(--font-sans);
  font-size:.92rem;
  color:var(--ink);
  text-decoration:none;
  transition:color .15s;
}
.sidebar-box .links-list a:hover{
  color:var(--accent);
}

/* ==========================================================================
 * v0.6.12 — Visual Polish (Briefing vom 02.05.2026)
 *
 * Token-Mapping vom Briefing zu unseren bestehenden Variablen:
 *   --color-cream-warm   → var(--stone)        (#a89a82)
 *   --color-teal         → var(--accent)
 *   --color-anthracite   → var(--ink)
 *   --color-text-muted   → var(--ink-mute)
 *   --color-cream        → var(--bg)
 *   --color-teal-tint-08 → mit rgba aus accent gemischt
 *
 * Wir bauen NICHT das Briefing-Token-System um — das würde alle bestehenden
 * Stile brechen. Stattdessen referenzieren die Snippets unsere Tokens.
 * ========================================================================== */

/* === 1.1 Outlined-CTA auf dunklem Hero lesbarer === */
.btn-ghost{
  background:rgba(15,18,18,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.85);
  color:#fff;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
/* v1.0.3: Der Hintergrund ist hier fest hell — die Textfarbe muss es also
 * ebenso sein. Vorher stand hier var(--ink), das im Dunkelmodus zu #ece7db
 * wurde: 1,10:1, eine leere weiße Pille. Das ist zugleich der Fokuszustand,
 * ein Tastaturnutzer verlor also seinen Platz komplett. */
.btn-ghost:hover,
.btn-ghost:focus-visible{
  background:rgba(252,250,244,.96);
  border-color:transparent;
  color:#1c2322;
}

/* v1.0.3: .btn-ghost war für den dunklen Hero gebaut, wird aber auch auf
 * hellem Seitengrund eingesetzt (single-doelau_termin.php, „In meinen
 * Kalender"). Dort ergab die halbtransparente dunkle Fläche mit weißer
 * Schrift 3,29:1 und ein Rahmen mit 1,05:1 — ein grauer Klecks mit blasser
 * Schrift auf beigem Papier. Auf hellem Grund deshalb wie ein normaler
 * Sekundär-Button behandeln. */
.btn-ghost.btn-on-light{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid var(--rule-strong);
  color:var(--ink);
}
.btn-ghost.btn-on-light:hover,
.btn-ghost.btn-on-light:focus-visible{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-ink);
}

/* === 1.2 + 1.5 + 1.7 — Hero-Typo-Hierarchie & Rhythmus & Orphan-Schutz === */
.hero-eyebrow{
  margin-bottom:24px;
}
.hero h2{
  margin-bottom:4px;          /* eng zum Italic */
  text-wrap:balance;
}
.hero h2 em{
  font-size:clamp(1.4rem,3.2vw,2.7rem);   /* ~72% des Roman-Titels */
  letter-spacing:-.01em;
  line-height:1.05;
  margin-top:8px;
  text-wrap:balance;          /* verhindert Witwen wie „Engagement" allein */
}
.hero p{
  margin-top:24px;
  margin-bottom:36px;
}
.hero-content > .hero-eyebrow + h2{margin-top:0;}

/* === 1.3 Hero-Eyebrow auf warmen Stone-Ton (statt teal-tint) === */
/* v1.0.3: fester Wert statt --stone. Das Hero-Overlay ist hartkodiert und in
 * beiden Modi gleich dunkel, --stone schaltete aber mit und fiel im
 * Dunkelmodus auf 3,30:1. Jetzt 9,13:1 in beiden Modi — derselbe warme
 * Stone-Charakter, nur modusunabhängig. */
.hero-eyebrow{
  color:#c3b8a3;
  opacity:.92;
}
.hero h2 em{
  color:#c9bfa9;
}

/* === 2.1 Logo-Glyph etwas größer (52 → 56px Desktop) === */
.logo img{height:56px;}
@media(max-width:599px){
  .logo img{height:44px;}
}

/* === 2.3 Tagline auf Mobile ausblenden === */
@media(max-width:767px){
  .logo-text span{display:none;}
}

/* === 2.4 Active-Nav-Indicator mit Teal-Glow stärken === */
/* v1.0.3: Der Unterstrich lief mit --accent auf 2,61:1 gegen die dunkle
 * Navigationsleiste — der aktive Menüpunkt war nicht als aktiv erkennbar.
 * --accent-on-dark ist für genau diese dauerhaft dunklen Flächen gedacht. */
.nav-link.active{
  box-shadow:inset 0 -2px 0 var(--accent-on-dark),0 4px 12px -6px rgba(46,107,106,.45);
}

/* === 3.5 Persönlichkeiten-Liste auf Mobile einspaltig === */
@media(max-width:599px){
  .mega-persons-grid{grid-template-columns:1fr !important;}
}

/* === 5.2 H2 → Liste Spacing in Content-Bereichen === */
.page-main h2 + ul,
.page-main h2 + ol,
.sight-detail-body h2 + ul,
.sight-detail-body h2 + ol{
  margin-top:18px;
}

/* v0.8.2: Listen in Content-Bereichen einheitlich einrücken — Bullets
 * sollen visuell mit dem linken Rand der Absätze fluchten (Bullet hängt
 * leicht heraus, Text rückt 1.4em ein). Vorher hingen die Bullets noch
 * weiter links als der normale Text. */
.sight-detail-body ul,
.sight-detail-body ol,
.page-main ul,
.page-main ol,
.post-content ul,
.post-content ol,
.page-intro-content ul,
.page-intro-content ol,
.editorial-main ul,
.editorial-main ol,
.termin-detail-content ul,
.termin-detail-content ol{
  padding-left:1.4em;
  margin:0 0 18px;
}
.sight-detail-body li,
.page-main li,
.post-content li,
.page-intro-content li,
.editorial-main li,
.termin-detail-content li{
  margin-bottom:6px;
  line-height:1.65;
}
.sight-detail-body li > p,
.page-main li > p,
.post-content li > p{
  margin-bottom:0;
}

/* === 6 Editorial Drop-Cap (italic Source-Serif-„E") ===
 * Per Block-Editor als zusätzliche CSS-Klasse "editorial-intro" auf
 * den ersten Absatz setzen, dann greift dieser Stil. */
.editorial-intro::first-letter{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:5em;
  line-height:.85;
  float:left;
  margin:.05em .12em -.05em 0;
  color:var(--accent);
}

/* === 7 Page-Load-Animation für Hero (CSS-only, einmalig, gestaffelt) === */
@keyframes doelau-fade-rise{
  from{opacity:0;transform:translateY(12px);}
  to  {opacity:1;transform:translateY(0);}
}
.hero-eyebrow,
.hero h2,
.hero p,
.hero-btns{
  opacity:0;
  animation:doelau-fade-rise 700ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-eyebrow{animation-delay:50ms;}
.hero h2     {animation-delay:150ms;}
.hero p      {animation-delay:350ms;}
.hero-btns   {animation-delay:500ms;}

@media(prefers-reduced-motion:reduce){
  .hero-eyebrow,
  .hero h2,
  .hero p,
  .hero-btns{
    opacity:1;
    animation:none;
  }
}

/* === v0.6.15 — Editorial-Page-Layout (Two-Column mit Sidebar)
 *
 * Greift auf Pages mit Page-Template `template-editorial.php`. Layout
 * wird vom Template gesetzt (volle Section-Breite 1240px), nicht mehr
 * vom Block-Editor-Default-Container. */
.editorial-split{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 280px;
  gap:64px;
  margin-top:0;
  align-items:start;
}
.editorial-main{
  min-width:0; /* fix: erlaubt overflow-Schutz im Grid-Item */
}
/* v0.6.40: Wenn beide Sidebar-Boxen leer sind, nutzt der Hauptinhalt
 * die volle Container-Breite (Template-Variante editorial-main--full). */
.editorial-main--full{
  min-width:0;
  width:100%;
}
/* v1.0.5: top rechnet jetzt mit der Header-Höhe. Alle anderen Sticky-Elemente
 * tun das (.sights-map-col, .chronik-zeitstrahl), diese Sidebar nicht — der
 * Header ist rund 148 px hoch und liegt mit z-index:100 darüber, also
 * verschwanden beim Scrollen die oberen ~124 px der Box dahinter. */
.editorial-aside{
  position:sticky;
  top:calc(var(--header-h, 80px) + 24px);
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media(max-width:900px){
  .editorial-split{
    grid-template-columns:1fr;
    gap:36px;
  }
  .editorial-aside{
    position:static;
  }
}

/* Timeline endet mit Pfeilspitze nach unten (zeigt: Zeit läuft weiter) */
.timeline{
  padding-bottom:6px; /* Atemluft vor der Pfeilspitze */
}
.timeline::after{
  content:'';
  position:absolute;
  left:-4.5px;          /* Mitte der 1px-Border */
  bottom:-9px;
  width:8px;
  height:8px;
  border-bottom:1.5px solid var(--rule);
  border-right:1.5px solid var(--rule);
  transform:rotate(45deg);
  transform-origin:center;
}

/* Card-Image-Platzhalter (für Karten ohne Featured Image — wird auf
 * Aktuelles, Chronik, Front-Page, Search verwendet, bleibt deshalb in
 * main.css statt in chronik.css). */
.blog-img-placeholder{
  display:block;
  width:100%;height:100%;
  color:transparent;
  font-size:0;
  background:var(--bg-soft);
}

/* v0.8.0: Chronik-Zeitstrahl-spezifische Styles wandern nach
 * `assets/css/chronik.css` und werden nur auf der Chronik-Seite per
 * inc/enqueue.php geladen — alle anderen Seiten sparen ~5 KB CSS. */

/* Editor-Content auf Page-Templates (the_content() zwischen Header und
 * dynamischem Block). Gibt Block-Editor-Inhalte ein bisschen Atem; wenn der
 * Editor leer ist, wird der Wrapper nicht gerendert. */
.page-intro-content{
  margin:0 0 44px;
  max-width:var(--max-narrow);
}
.page-intro-content > *:first-child{margin-top:0;}
.page-intro-content > *:last-child{margin-bottom:0;}

/* v0.8.3: Typografie für Block-Editor-Content in Content-Containern.
 * Vorher: globales `* { margin: 0 }` resettete Browser-Defaults, und
 * .page-intro-content / .post-content / .termin-detail-content hatten
 * keine eigenen Paragraph-/Heading-Margins — alles klebte zusammen.
 *
 * (.sight-detail-body hatte schon eigene p-Regeln. Bleibt unangetastet.) */
.page-intro-content p,
.post-content p,
.termin-detail-content p,
.editorial-main p{
  margin:0 0 16px;
  line-height:1.7;
}
.page-intro-content h2,
.post-content h2,
.termin-detail-content h2,
.editorial-main h2{
  font-family:var(--font-serif);
  font-size:1.6rem;
  font-weight:500;
  line-height:1.25;
  color:var(--ink);
  margin:40px 0 14px;
}
.page-intro-content h3,
.post-content h3,
.termin-detail-content h3,
.editorial-main h3{
  font-family:var(--font-serif);
  font-size:1.3rem;
  font-weight:500;
  line-height:1.3;
  color:var(--ink);
  margin:32px 0 10px;
}
.page-intro-content h4,
.post-content h4,
.termin-detail-content h4,
.editorial-main h4{
  font-family:var(--font-serif);
  font-size:1.1rem;
  font-weight:500;
  color:var(--ink);
  margin:24px 0 8px;
}
.page-intro-content > h2:first-child,
.page-intro-content > h3:first-child,
.page-intro-content > h4:first-child,
.post-content > h2:first-child,
.post-content > h3:first-child,
.post-content > h4:first-child,
.termin-detail-content > h2:first-child,
.termin-detail-content > h3:first-child,
.editorial-main > h2:first-child,
.editorial-main > h3:first-child{margin-top:0;}
.page-intro-content figure,
.post-content figure,
.termin-detail-content figure,
.editorial-main figure{margin:24px 0;}
.page-intro-content blockquote,
.post-content blockquote,
.termin-detail-content blockquote,
.editorial-main blockquote{
  margin:24px 0;
  padding-left:18px;
  border-left:3px solid var(--accent);
  font-family:var(--font-serif);
  font-style:italic;
  color:var(--ink);
}

/* Single-Post-Header (single.php v0.8.0): vorher Inline-Styles für
 * margin/h2. Jetzt sauber per Klassen. */
.post-header{margin-bottom:36px;}
.post-title{
  font-family:var(--font-serif);
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:8px 0 12px;
  text-wrap:balance;
}
.post-date{
  display:block;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-top:6px;
}

/* Aktuelles: dezenter Hinweis-Text unter dem Card-Grid */
.aktuelles-chronik-hint{
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid var(--rule-soft);
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--ink-mute);
  letter-spacing:.02em;
}
.aktuelles-chronik-hint a{color:var(--accent);}

/* ============================================================
 * v0.9.3 — Easter Egg: Steinerne Jungfrau spricht
 *
 * 7× Klick auf das Menhir-Foto. Die Animation läuft IN-PLACE im
 * Foto-Container (kein Vollbild-Takeover):
 *
 *   1. Foto wird per CSS-Filter zur Schwarz-Weiß-„Zeichnung"
 *      (grayscale + Kontrast-Boost + leichter Sepia-Hauch)
 *   2. JS erzeugt einen <span> pro Zeichen der Inschrift, misst
 *      ihre Ziel-Positionen, platziert sie ÜBER dem Container
 *   3. Buchstaben fallen physikalisch (cubic-bezier mit Gravity-
 *      Acceleration) staffel-versetzt nach unten, landen zufällig
 *   4. Nach kurzer Pause gleiten alle Buchstaben gleichzeitig zu
 *      ihren Ziel-Positionen → bilden die Inschrift
 *   5. Glückwunsch-Text fadet darunter ein
 *   6. Alles fadet aus, Foto wird wieder farbig (Filter weg)
 *
 * Animation komplett JS-gesteuert, CSS liefert Filter, Layout
 * und Übergangs-Tweaks. Re-triggerbar nach Ablauf.
 * ============================================================ */
.menhir-easter{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:5;
  opacity:0;
  /* Papier-Tönung über der „Zeichnung" für Lesbarkeit der Buchstaben
   * gegen variable Foto-Bereiche.
   * v1.0: von .25 auf .42 angehoben — die Schrift hebt sich jetzt
   * deutlich vom darunterliegenden Foto ab. */
  background:rgba(246, 241, 230, .42);
  transition:opacity 600ms ease-out;
}
.menhir-easter.is-revealed{
  opacity:1;
}
/* Zeichnung-Filter auf das Original-Foto wenn Easter aktiv */
.sight-detail-img.is-easter > img{
  filter:grayscale(1) contrast(1.55) brightness(1.08) sepia(.08);
  transition:filter 700ms ease;
}

/* Container für die Buchstaben — sitzt auf voller Container-Fläche */
.menhir-easter-letters{
  position:absolute;
  inset:0;
  padding:5% 5%;
  display:flex;
  align-items:center;
  justify-content:center;
  /* v1.0: align-content:center (default war stretch) — vorher haben die
   * drei umbrochenen Zeilen "Ich stand schon hier," / "als noch keiner" /
   * "schrieb." sich über die volle Container-Höhe verteilt. Sie gehören
   * zusammen, sollen also kompakt zentriert stehen. */
  align-content:center;
  flex-wrap:wrap;
  /* v0.9.4: alle Schriften ~doppelt so groß */
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.7rem, 3.8vw, 2.7rem);
  /* v0.9.9: line-height enger (1.35 -> 1.1), damit mehrzeiliger Text
   * nicht zerreisst und kompakter wirkt. */
  line-height:1.1;
  letter-spacing:.01em;
  color:#1a1812;
  /* v0.9.6: Lücke zwischen Wörtern (Worte sind nun ein flex-item pro Wort,
   * damit „als" nicht zwischen „a" und „ls" umbricht). */
  gap:0 .45em;
}
/* v0.9.6: jedes Wort ist ein flex-item; white-space:nowrap haelt die
 * Buchstaben des Worts beim natuerlichen Layout zusammen, sodass beim
 * Messen der Ziel-Positionen kein Wort umbrochen wird. */
.menhir-easter-word{
  display:inline-block;
  white-space:nowrap;
}
.menhir-easter-letter{
  display:inline-block;
  white-space:pre;
  transform-origin:center center;
  /* v0.9.6: groesserer weisser Backdrop fuer besseren Kontrast auf jedem
   * Foto-Bereich — mehrere Glow-Layer kompensieren dunkle Stellen.
   * v1.0: zwei zusaetzliche enge Voll-Opacity-Layer (3px/10px) fuer einen
   * dichteren weissen Halo direkt am Buchstaben. Die weiteren Layer
   * decken weiterhin den Streulicht-Bereich ab. */
  text-shadow:
    0 0 3px  rgba(248, 244, 232, 1),
    0 0 10px rgba(248, 244, 232, 1),
    0 0 22px rgba(248, 244, 232, .98),
    0 0 44px rgba(248, 244, 232, .85),
    0 0 72px rgba(248, 244, 232, .60),
    0 1px 0  rgba(0, 0, 0, .25);
  /* JS setzt position:absolute + transform für Physik + Ziel-Position */
}

/* Glückwunsch-Text — verdoppelt + erscheint erst gegen Ende */
.menhir-easter-congrats{
  position:absolute;
  left:0;
  right:0;
  bottom:6%;
  text-align:center;
  font-family:var(--font-mono);
  font-size:clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#1a1812;
  opacity:0;
  text-shadow:0 0 12px rgba(248, 244, 232, .95);
  transition:opacity 1.2s ease;
}
.menhir-easter.is-revealed.is-settled .menhir-easter-congrats{
  opacity:.85;
}

/* Barrierefreiheit: bei prefers-reduced-motion einfacher Effekt */
@media (prefers-reduced-motion:reduce){
  .menhir-easter.is-revealed{
    transition:opacity 1s ease;
  }
  /* JS-Fallback: keine Fall-Animation, Text fadet einfach ein */
}

/* Alte .menhir-veil/.menhir-stage-Klassen entfernt mit v0.9.3 —
 * neuer Easter-Egg-Mechanismus oben. */

/* v0.8.2: Floating „Nach oben"-Button rechts unten.
 * Standard versteckt; JS in main.js zeigt ihn ab scroll > 400 px. */
.back-to-top{
  position:fixed;
  right:18px;
  /* v0.9.12: eine Button-Hoehe weiter nach oben (18 + 44 = 62), damit
   * der Button nicht mehr die Footer-Copyright-Zeile ueberdeckt. */
  bottom:62px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--rule);
  background:var(--bg-card);
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px -8px rgba(28,35,34,.4);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s, transform .2s, background .15s, color .15s, border-color .15s;
  z-index:90;
}
.back-to-top:not([hidden]){opacity:1;transform:translateY(0);}
/* v0.9.7: Hover nur auf Geraeten mit echtem Pointer. Auf Touch bleibt
 * sonst :hover nach dem Tap "kleben" — Button blieb gruen, bis man
 * woandershin tippte. */
@media (hover:hover) and (pointer:fine){
  .back-to-top:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
}
.back-to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.back-to-top[hidden]{display:flex !important;visibility:hidden;pointer-events:none;}
@media (max-width:640px){
  /* v0.9.9: groesser (48 px statt 40), weiter aus der Ecke.
   * v0.9.12: bottom auf 72 px (24 + 48) angehoben — Button steht jetzt
   * eine Button-Hoehe ueber dem unteren Rand, deckt den Footer-Text
   * nicht mehr ab. */
  .back-to-top{right:24px;bottom:72px;width:48px;height:48px;}
}

/* Kontextabhängiger Zurück-Link unten am Single-Post (über .prevnext).
 * Wird per JS in main.js befüllt, wenn der Nutzer von Chronik oder Aktuelles
 * kommt. Sonst bleibt das Element leer und versteckt. */
.post-back-nav{
  margin:40px 0 16px;
  text-align:center;
}
.post-back-nav[hidden]{display:none;}
.back-to-source{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border:1px solid var(--rule);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--ink-mute);
  text-decoration:none;
  background:var(--bg-soft);
  transition:color .15s, border-color .15s, background .15s, transform .15s;
}
.back-to-source:hover,
.back-to-source:focus-visible{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
  transform:translateY(-1px);
}

/* ============================================================
 * YouTube Click-to-Load (Shortcode: [doelau-youtube id="..."])
 * ============================================================ */
.doelau-youtube{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  margin:32px 0;
  background:#000;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  border:none;
  padding:0;
}
.doelau-youtube img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.85;
  transition:opacity .2s, transform .3s;
}
.doelau-youtube:hover img,
.doelau-youtube:focus-visible img{opacity:1;transform:scale(1.02);}
.doelau-youtube-play{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:72px;height:72px;
  border-radius:50%;
  background:rgba(0,0,0,.7);
  border:2px solid #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:background .2s, transform .2s;
}
.doelau-youtube:hover .doelau-youtube-play,
.doelau-youtube:focus-visible .doelau-youtube-play{
  background:var(--accent);
  transform:translate(-50%,-50%) scale(1.06);
}
.doelau-youtube-play::before{
  content:'';
  display:block;
  width:0;height:0;
  border-left:18px solid #fff;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  margin-left:5px;
}
.doelau-youtube-hint{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:14px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.03em;
}
.doelau-youtube[data-loaded="true"]{cursor:default;}
.doelau-youtube[data-loaded="true"] .doelau-youtube-play,
.doelau-youtube[data-loaded="true"] .doelau-youtube-hint,
.doelau-youtube[data-loaded="true"] img{display:none;}
.doelau-youtube iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}

/* ============================================================
 * Kommentare (single.php — falls aktiviert)
 * v0.8.0: vorher ungestyled (Standard-WP). Jetzt im Theme-Look.
 * ============================================================ */
.comments-area{margin-top:48px;padding-top:32px;border-top:1px solid var(--rule);}
.comments-title{
  font-family:var(--font-serif);
  font-size:1.5rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:24px;
}
.comment-list{list-style:none;padding:0;margin:0 0 40px;}
.comment-list .comment,
.comment-list .pingback,
.comment-list .trackback{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--rule-soft);}
.comment-list .children{list-style:none;padding-left:24px;margin-top:24px;border-left:2px solid var(--rule-soft);}
.comment-body{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 22px;}
.comment-author{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.comment-author .avatar{border-radius:50%;}
.comment-author cite{font-style:normal;font-weight:500;color:var(--ink);}
.comment-meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-mute);margin-bottom:12px;}
.comment-meta a{color:var(--ink-mute);}
.comment-meta a:hover{color:var(--accent);}
.comment-content{font-size:.95rem;line-height:1.65;color:var(--ink-soft);}
.comment-content p:last-child{margin-bottom:0;}
.comment-reply-link,
.comment-edit-link{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--accent);
  text-decoration:none;
  margin-right:12px;
}
.comment-reply-link:hover,
.comment-edit-link:hover{text-decoration:underline;}

/* Kommentar-Formular */
.comment-respond{margin-top:32px;}
.comment-reply-title{
  font-family:var(--font-serif);
  font-size:1.25rem;
  font-weight:500;
  margin-bottom:16px;
}
.comment-notes,.logged-in-as{font-size:.85rem;color:var(--ink-mute);margin-bottom:18px;}
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label{
  display:block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;
  box-sizing:border-box;
  background:var(--bg-card);
  border:1px solid var(--rule-strong);
  border-radius:var(--radius);
  padding:10px 14px;
  font-family:var(--font-sans);
  font-size:.95rem;
  color:var(--ink);
  line-height:1.5;
  transition:border-color .15s;
}
/* v1.0.3: `outline:none` gestrichen. Die Regel hatte höhere Spezifität als
 * die globale :focus-visible-Regel und griff damit auch für Tastaturnutzer;
 * als Ersatz blieb nur ein 1px-Rahmenwechsel. */
.comment-form input:focus,
.comment-form textarea:focus{
  border-color:var(--accent);
}
.comment-form textarea{min-height:120px;resize:vertical;}
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment{margin-bottom:16px;}
.comment-form-cookies-consent{display:flex;align-items:flex-start;gap:8px;margin-bottom:18px;font-size:.85rem;color:var(--ink-soft);}
.comment-form .submit,
.form-submit input[type="submit"]{
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  padding:10px 22px;
  font-family:var(--font-sans);
  font-size:.95rem;
  font-weight:500;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.comment-form .submit:hover,
.form-submit input[type="submit"]:hover{
  background:var(--accent-ink);
  border-color:var(--accent-ink);
}
.no-comments{font-style:italic;color:var(--ink-mute);}