/*
Theme Name: FFW Mörtitz – D · Tradition & Erbe
Theme URI: https://ffw-moertitz.de
Author: Förderverein FF Mörtitz e.V.
Description: Blockfähiges Theme für Richtung D. Gleiche Struktur, gleiche Kurzbefehle und gleiche Seitencodes wie Richtung C — nur Farben, Schriften und Formensprache unterscheiden sich (Tintenblau, Oxblood, Messing, eckige Kanten). Farben und Schriften werden ausschließlich hier definiert, nicht in theme.json.
Version: 1.0
Requires at least: 6.5
Tested up to: 6.8
Text Domain: ffw-d
*/

/* ============================================================
   1 · TOKENS  —  wörtlich aus dem Mockup (styles.css)
   ============================================================ */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --content:1200px; --content-narrow:820px;
  --radius-s:0px; --radius-m:2px; --radius-l:2px;
  --fs-base:17px;
}

/* Richtung D · Hell */
[data-dir="D"][data-mode="light"]{
  --bg:#f1ead9; --bg-alt:#e4dac1; --surface:#faf4e2;
  --ink:#14202e; --ink-soft:#2e3c4d; --ink-mute:#6c7489;
  --line:#c7b892; --line-soft:#d9ccab;
  --accent:#9a2a2a; --accent-ink:#f1ead9; --accent-soft:#e3cec4;
  --fv:#4a5b3c; --fv-soft:#d7ddc4;
  --focus:#14202e; --brass:#b28644;
  --font-display:"EB Garamond","Playfair Display",Georgia,serif;
  --font-body:"Libre Franklin","IBM Plex Sans",system-ui,sans-serif;
  --font-hand:"EB Garamond",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --shadow-s:0 1px 2px rgba(20,32,46,.08);
  --shadow-m:0 4px 14px rgba(20,32,46,.10),0 1px 3px rgba(20,32,46,.06);
}

/* Richtung D · Dunkel */
[data-dir="D"][data-mode="dark"]{
  --bg:#0f1822; --bg-alt:#162234; --surface:#1c2a3c;
  --ink:#eee3c9; --ink-soft:#cfc3a5; --ink-mute:#8c9ab0;
  --line:#2a3a4e; --line-soft:#213045;
  --accent:#c14a44; --accent-ink:#0f1822; --accent-soft:#352524;
  --fv:#8ea180; --fv-soft:#222c1e;
  --focus:#eee3c9; --brass:#cfa25c;
  --font-display:"EB Garamond","Playfair Display",Georgia,serif;
  --font-body:"Libre Franklin","IBM Plex Sans",system-ui,sans-serif;
  --font-hand:"EB Garamond",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --shadow-s:0 1px 2px rgba(0,0,0,.45);
  --shadow-m:0 4px 14px rgba(0,0,0,.55);
}

/* ============================================================
   2 · WORDPRESS NEUTRALISIEREN
   Ohne diesen Block kämpft das Theme gegen das Mockup:
   Blockthemes setzen eigene Breiten, Abstände und Randabstände.
   ============================================================ */
/* Template-Part-Wrapper auflösen. Ohne das kann der Kopf nicht kleben:
   sein Wrapper ist nur so hoch wie er selbst. */
.wp-block-template-part{display:contents}
.wp-site-blocks,.wp-site-blocks>*{margin-block-start:0;margin-block-end:0}
main>*,main.wp-block-group>*{margin-block-start:0;margin-block-end:0}
/* Leere Absätze, die WordPress aus HTML-Kommentaren erzeugt, unschädlich machen.
   Achtung: Ein <p> mit Zeilenumbruch darin ist für CSS NICHT :empty — den Rest
   räumt assets/js/ffw.js beim Laden weg. */
.entry-content>p:empty,.wp-block-post-content>p:empty,main p:empty{display:none;margin:0}
.wp-site-blocks{padding:0!important;max-width:none!important}
.entry-content,.wp-block-post-content{max-width:none!important;padding:0!important;margin:0!important}
/* Breite aufheben – aber nicht bei .wrap/.wrap-narrow, die genau dafür da sind */
.entry-content>*:not(.wrap):not(.wrap-narrow),.wp-block-post-content>*:not(.wrap):not(.wrap-narrow){max-width:none!important;margin-left:0;margin-right:0}
.wp-block-group.has-global-padding{padding-left:0;padding-right:0}
.wp-block-html{margin:0}
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}

/* ============================================================
   3 · BASIS
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  font-size:var(--fs-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .25s ease,color .25s ease;
}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--accent);color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:500;letter-spacing:-.01em;margin:0;text-wrap:balance}
/* WordPress schreibt in seinen Global-Styles :root :where(h1…h6){margin-block-start:2rem}.
   Diese Gewichtung schlägt einen einfachen Elementnamen — deshalb hatte jede
   Überschrift 32 px unsichtbaren Abstand nach oben. Gleiche Gewichtung, später
   geladen: gewinnt. Eigene Regeln mit Klasse (z. B. .beitrag h3) bleiben wirksam. */
:root :where(h1,h2,h3,h4,h5,h6){margin-block-start:0;margin-block-end:0}
h1{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.08}
h2{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.15}
h3{font-size:1.25rem;line-height:1.25}
h4{font-size:1.05rem;line-height:1.3}
p{margin:0 0 1em 0;color:var(--ink-soft);text-wrap:pretty}
p.lead{font-size:1.2em;color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-7) 0}

/* ============================================================
   4 · LAYOUT  —  .wrap ist die Ursache für „läuft randlos durch"
   ============================================================ */
/* Höhe der Abschnitte zentral steuerbar. Siehe README-Abstaende.md.
   --section-y wirkt auf alle Abschnitte, einzelne lassen sich per id übersteuern. */
:root{--section-y:var(--s-8);--section-y-tight:var(--s-7)}
.wrap{max-width:var(--content);margin:0 auto;padding:0 var(--s-5)}
.wrap-narrow{max-width:var(--content-narrow);margin:0 auto;padding:0 var(--s-5)}
.section{padding:var(--section-y) 0}
.section-tight{padding:var(--section-y-tight) 0}
.grid{display:grid;gap:var(--s-5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column}
.stack-s>*+*{margin-top:var(--s-3)}
.stack-m>*+*{margin-top:var(--s-4)}
.stack-l>*+*{margin-top:var(--s-6)}
.row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.row-tight{display:flex;align-items:center;gap:var(--s-2)}
.eyebrow{font-family:var(--font-display);font-style:italic;font-size:1rem;letter-spacing:.04em;text-transform:none;color:var(--brass);font-weight:500}
.muted{color:var(--ink-mute)}
.section--alt{background:var(--bg-alt)}
.section--ink{background:var(--ink);color:var(--bg)}
.section--ink *{color:var(--bg)}
.section--ink .eyebrow,.section--ink .muted{color:color-mix(in srgb,var(--bg) 70%,transparent)}

/* ============================================================
   5 · NOTRUF-LEISTE  —  in allen Vorversionen verloren gegangen
   ============================================================ */
.announce{background:var(--ink);color:var(--bg);font-size:.88rem;padding:8px 0;text-align:center;letter-spacing:.04em}
.announce a{color:var(--bg)}
.announce strong{font-family:var(--font-display)}

/* ============================================================
   6 · KOPFBEREICH
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line-soft)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-5);max-width:var(--content);margin:0 auto;gap:var(--s-5)}
/* Markenbereich: Wappen FFW · Zweizeiler · Wappen Förderverein.
   Beide Wappen sind gleich groß. Der Zweizeiler darf nicht umbrechen —
   sonst wächst der Kopfbereich von 84 px auf drei oder vier Zeilen. */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand:hover{color:var(--ink)}
.brand__crest{width:44px;height:52px;flex:0 0 44px;display:block}
.brand__crest--fv{width:44px;height:52px;flex:0 0 44px;margin-left:10px}
@media (max-width:480px){.brand__crest--fv{display:none}}
.brand__crest img,.brand__crest svg{width:100%;height:100%;object-fit:contain;display:block}
.brand__text{line-height:1.15;flex:0 0 auto;white-space:nowrap}
.brand__name{display:block;white-space:nowrap;font-family:var(--font-display);font-size:1.08rem;font-weight:500;color:var(--ink)}
.brand__sub{display:block;white-space:nowrap;font-size:.78rem;color:var(--ink-mute);letter-spacing:.06em;text-transform:uppercase}
.nav{display:flex;gap:var(--s-5);align-items:center;flex-wrap:nowrap}
.nav__group{position:relative}
.nav__link{text-decoration:none;color:var(--ink-soft);padding:var(--s-2) 0;font-weight:500;font-size:.98rem;display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:0;font-family:inherit}
.nav__link:hover{color:var(--accent)}
.nav__link--active{color:var(--ink);position:relative}
.nav__link--active::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent)}
.nav__menu{position:absolute;top:calc(100% + 8px);left:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:var(--s-2);min-width:240px;box-shadow:var(--shadow-m);display:none;z-index:60}
/* Unsichtbare Brücke über den 8px-Spalt zwischen Schaltfläche und Klappmenü.
   Ohne sie verlässt der Zeiger die Gruppe und das Menü schließt sofort wieder. */
.nav__menu::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
.nav__group:hover .nav__menu,.nav__group:focus-within .nav__menu,.nav__group[data-open="true"] .nav__menu{display:block}
.nav__menu a{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 12px;border-radius:var(--radius-s);color:var(--ink-soft);font:inherit;cursor:pointer;text-decoration:none}
.nav__menu a:hover{background:var(--bg-alt);color:var(--ink)}
/* Die nicht klickbare Überschrift im Aufklappmenü */
.nav__menu__label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding:8px 12px 2px}

/* Mobiler Umschalter */
.nav__toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius-m);padding:10px 12px;color:var(--ink);cursor:pointer;min-height:44px}
@media (max-width:980px){
  .nav__toggle{display:inline-flex;align-items:center;gap:8px}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:var(--s-3);display:none}
  .site-header[data-nav-open="true"] .nav{display:flex}
  .nav__group{width:100%}
  .nav__menu{position:static;display:block;box-shadow:none;border:0;padding:0 0 var(--s-3) var(--s-4);min-width:0;background:none}
  .nav__link{width:100%;justify-content:space-between;padding:var(--s-3) var(--s-2);min-height:44px}
  .site-header__inner{flex-wrap:wrap;position:relative}
}

/* Einstellungen im Kopf: Dunkelmodus + Schriftgröße */
.ffw-prefs{display:flex;align-items:center;gap:4px;margin-left:var(--s-3)}
.ffw-prefs button{background:none;border:1px solid var(--line);border-radius:var(--radius-s);color:var(--ink-soft);cursor:pointer;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:.8rem;padding:0}
.ffw-prefs button:hover{border-color:var(--accent);color:var(--accent)}
.ffw-prefs .ico{width:15px;height:15px;flex:0 0 15px}

/* ============================================================
   7 · SCHALTFLÄCHEN  —  Rahmen, Radius und Höhe exakt
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:14px 22px;border-radius:var(--radius-m);border:1px solid transparent;font:inherit;font-family:var(--font-body);font-weight:600;cursor:pointer;text-decoration:none;line-height:1;min-height:48px;transition:background .15s,color .15s,border-color .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn--primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000);color:var(--accent-ink)}
.btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn--secondary:hover{background:var(--bg-alt);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--bg-alt)}
.btn--fv{background:var(--fv);color:#fff;border-color:var(--fv)}
.btn--fv:hover{background:color-mix(in srgb,var(--fv) 85%,#000);color:#fff}
.btn--sm{min-height:40px;padding:10px 16px;font-size:.92rem}
/* Glasige Variante im Hero */
.btn--glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px)}
.btn--glass:hover{background:rgba(255,255,255,.2);color:#fff}
/* WordPress-Buttons dem Mockup anpassen, falls Blockeditor-Buttons genutzt werden */
.wp-block-button__link{border-radius:var(--radius-m);min-height:48px;padding:14px 22px;font-weight:600;font-family:var(--font-body);display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent)}
.wp-block-button.is-style-outline .wp-block-button__link{background:var(--surface);color:var(--ink);border-color:var(--line)}

/* ============================================================
   8 · KARTEN
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:2px;overflow:hidden;display:flex;flex-direction:column}
.card__body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.card__meta{font-size:.85rem;color:var(--ink-mute);letter-spacing:.04em}
.card h3{margin:0}

/* ============================================================
   9 · FOTO-PLATZHALTER  —  inkl. Diagonalmuster und Label
   ============================================================ */
.photo{background:var(--bg-alt);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-mute);font-family:var(--font-mono);font-size:.82rem;letter-spacing:.05em;text-align:center;padding:var(--s-4);position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:var(--radius-m)}
.photo::before{content:'';position:absolute;inset:0;background-image:linear-gradient(135deg,transparent 46%,var(--line) 46%,var(--line) 54%,transparent 54%),linear-gradient(45deg,transparent 46%,var(--line) 46%,var(--line) 54%,transparent 54%);opacity:.28}
.photo__label{position:relative;z-index:1;background:var(--surface);padding:6px 10px;border-radius:var(--radius-s);border:1px solid var(--line);max-width:85%}
.photo--wide{aspect-ratio:16/9}
.photo--square{aspect-ratio:1/1}
.photo--tall{aspect-ratio:3/4}
.photo--hero{aspect-ratio:21/9}
/* Echte Fotos an Stelle der Platzhalter: gleiche Form, gleicher Zuschnitt */
.photo-echt{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--radius-m);aspect-ratio:4/3}
.photo-echt.photo--wide{aspect-ratio:16/9}
.photo-echt.photo--square{aspect-ratio:1/1}
.photo-echt.photo--tall{aspect-ratio:3/4}
.photo-echt.photo--hero{aspect-ratio:21/9}

/* ============================================================
   10 · BADGES
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line);color:var(--ink-soft);font-size:.78rem;letter-spacing:.04em;font-weight:500}
.badge--fw{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.badge--fv{background:var(--fv-soft);color:var(--fv);border-color:transparent}
[data-mode="dark"] .badge--fw{color:#fff}
[data-mode="dark"] .badge--fv{color:var(--fv)}

/* ============================================================
   11 · TERMINE UND BEITRÄGE
   ============================================================ */
.datebox{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:72px;padding:var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);text-align:center;flex:0 0 72px}
.datebox__day{font-family:var(--font-display);font-size:1.6rem;line-height:1;color:var(--ink)}
.datebox__month{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-top:4px}
.event-row{display:flex;gap:var(--s-4);padding:var(--s-5) 0;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.event-row:last-child{border-bottom:0}
.news-row{display:grid;grid-template-columns:220px 1fr auto;gap:var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--line-soft);align-items:center}
.news-row:last-child{border-bottom:0}
@media (max-width:720px){.news-row{grid-template-columns:1fr}.news-row .photo{aspect-ratio:16/9}}

/* ============================================================
   12 · FUSSBEREICH
   ============================================================ */
.site-footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:var(--s-7) 0 var(--s-5);margin-top:var(--s-9);color:var(--ink-soft)}
.site-footer a{color:var(--ink-soft)}
.site-footer h4{margin-bottom:var(--s-3)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding-top:var(--s-5);margin-top:var(--s-6);border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-mute);flex-wrap:wrap}
.footer-emergency{display:inline-flex;align-items:center;gap:var(--s-2);padding:4px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface)}
.footer-emergency strong{color:var(--accent);font-family:var(--font-display);font-size:1.02rem}

/* ============================================================
   13 · FORMULARE UND TABELLEN
   ============================================================ */
input[type="text"],input[type="email"],input[type="tel"],textarea,select{width:100%;padding:12px 14px;font:inherit;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);color:var(--ink);min-height:48px}
textarea{min-height:140px;resize:vertical}
label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
.form-hint{font-size:.85rem;color:var(--ink-mute);margin-top:4px}
.stat-table{width:100%;border-collapse:collapse}
.stat-table td,.stat-table th{padding:var(--s-3) 0;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.stat-table th{color:var(--ink-mute);font-weight:500;width:38%;font-size:.95rem}

/* ============================================================
   14 · HERO MIT FOTO
   Negative z-index-Ebenen brauchen isolation:isolate am Elternteil,
   sonst schneidet WordPress sie weg.
   ============================================================ */
/* Höhe des Hero. Kleinerer Wert = mehr vom Foto sichtbar, weniger Beschnitt.
   Im Zusätzlichen CSS übersteuerbar:  :root{ --hero-hoehe: 42vw }  */
:root{--hero-hoehe:clamp(480px,44vw,700px)}
.hero-photo{position:relative;min-height:var(--hero-hoehe);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-photo__bg{position:absolute;inset:0;background-color:var(--bg-alt);background-image:var(--hero-foto,none),linear-gradient(135deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 40%),linear-gradient(45deg,transparent 48%,rgba(255,255,255,.08) 48% 52%,transparent 52%),linear-gradient(135deg,transparent 48%,rgba(255,255,255,.08) 48% 52%,transparent 52%);background-size:100% 100%,60px 60px,60px 60px;background-size:cover,100% 100%,60px 60px,60px 60px;background-position:var(--hero-foto-position,center 40%),0 0,0 0,0 0;background-repeat:no-repeat,repeat,repeat,repeat;z-index:-2}
/* Echtes Hero-Foto einsetzen: unter Design → Editor → Stile → ⋮ → Zusätzliches CSS
   nur diese eine Regel eintragen, ohne !important:
     :root{ --hero-foto: url("https://…/hero.jpg") }
   Optional der Bildausschnitt:  --hero-foto-position: center 30%;
   Solange die Variable nicht gesetzt ist, bleibt das Platzhaltermuster stehen.
   Der Grund für diesen Umweg: eine Regel .hero-photo__bg{background-image:…} im
   Zusätzlichen CSS hat dieselbe Gewichtung wie die Theme-Regel. Im Editor wird
   sie danach geladen und gewinnt, im Frontend davor — deshalb war das Foto nur
   im Editor zu sehen. Eine Variable kennt dieses Problem nicht. */
.hero-photo__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,46,.12) 0%,rgba(20,32,46,.34) 45%,rgba(20,32,46,.72) 100%),linear-gradient(90deg,rgba(20,32,46,.78) 0%,rgba(20,32,46,.42) 42%,rgba(20,32,46,0) 72%);z-index:-1}
/* Der Verlauf liegt zweifach übereinander: von oben nach unten für die Knopfzeile,
   von links nach rechts für die Textspalte. Dadurch bleibt die Schrift auch über
   hellen Bildstellen lesbar, während die rechte Bildhälfte offen bleibt.
   Deckkraft anpassen: die drei Werte im jeweiligen Verlauf. */
.hero-photo__label{position:absolute;top:20px;right:20px;background:rgba(0,0,0,.45);color:#fff;font-family:var(--font-mono);font-size:.72rem;padding:6px 10px;border-radius:4px;letter-spacing:.05em;z-index:1}
.hero-photo__inner{position:relative;z-index:1;width:100%;padding:var(--s-10) var(--s-5) var(--s-8);color:#fff}
.hero-photo__inner .wrap{max-width:var(--content)}
.hero-photo h1,.hero-photo p,.hero-photo .eyebrow{color:#fff}
.hero-photo .eyebrow{color:rgba(255,255,255,.82)}
.hero-photo p.lead{color:rgba(255,255,255,.92)}
.hero-photo__meta{display:flex;gap:var(--s-4);color:rgba(255,255,255,.85);font-size:.92rem;margin-bottom:var(--s-4);align-items:center;flex-wrap:wrap}
.hero-photo__meta span{display:inline-flex;align-items:center;gap:6px}
.hero-photo__h1{font-size:clamp(2.4rem,5vw,4rem);line-height:1.05}
.hero-quiet{padding:var(--s-8) 0 var(--s-7);background:radial-gradient(ellipse at top,color-mix(in srgb,var(--accent-soft) 40%,transparent),transparent 60%)}

/* Handschrift-Akzent */
.hand{font-family:var(--font-display);font-style:italic;font-size:1.15em;line-height:1.2;color:var(--brass)}
.hero-photo__hand{font-family:var(--font-display);font-style:italic;color:var(--brass);display:block;font-size:.42em;margin-bottom:10px;line-height:1.1;letter-spacing:.02em}

/* ============================================================
   15 · KLEINTEILE
   ============================================================ */
.rule{display:flex;align-items:center;gap:var(--s-3);color:var(--ink-mute);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
.rule::before,.rule::after{content:'';flex:1;height:1px;background:var(--line)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.section-head .eyebrow{margin-bottom:6px}
.section-head__link{display:flex;align-items:center;gap:var(--s-2);text-decoration:none;color:var(--ink-soft);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.divider-dot::before{content:'·';margin:0 8px;color:var(--ink-mute)}
.ico{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.6}
.ico-lg{width:28px;height:28px;flex:0 0 28px}
ul.clean{list-style:none;padding:0;margin:0}
ul.check{list-style:none;padding:0;margin:0}
ul.check li{position:relative;padding-left:28px;margin-bottom:var(--s-3);color:var(--ink-soft)}
ul.check li::before{content:'';position:absolute;left:0;top:10px;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.pullquote{font-family:var(--font-display);font-size:1.4rem;line-height:1.35;color:var(--ink);border-left:3px solid var(--accent);padding:6px 0 6px var(--s-5);margin:var(--s-6) 0}
/* Fließtext eines Beitrags: Abstände wie im Mockup, ohne dass du etwas formatieren musst.
   WICHTIG: nur direkte Kinder (>) des Beitragsinhalts. Ohne das > traf
   .wp-block-post-content h2 auch jede Überschrift in den Seitenabschnitten und
   gab ihr 32 px Abstand nach oben — das war die Ursache der verschobenen Karten
   bei s-wer und s-platz und der weiten Label-Abstände auf allen Seiten. */
.wp-block-post-content>h2{margin-top:var(--s-6);margin-bottom:var(--s-3)}
.wp-block-post-content>h3{margin-top:var(--s-5);margin-bottom:var(--s-2)}
.wp-block-post-content>p{margin-bottom:1em}
.wp-block-post-content>ul,.wp-block-post-content>ol{margin-bottom:1em;color:var(--ink-soft)}
.wp-block-post-content>ul li,.wp-block-post-content>ol li{margin-bottom:6px}
.wp-block-post-content>figure img,.wp-block-post-content>img{border-radius:var(--radius-m);height:auto}
.wp-block-post-content>figure{margin:var(--s-6) 0}
.wp-block-post-content>figure figcaption{font-size:.85rem;color:var(--ink-mute);margin-top:8px}
.wp-block-post-content>blockquote,.wp-block-post-content>.wp-block-quote{font-family:var(--font-display);font-size:1.4rem;line-height:1.35;color:var(--ink);border-left:3px solid var(--accent);padding:6px 0 6px var(--s-5);margin:var(--s-6) 0}
.wp-block-post-content>blockquote p{margin:0;color:var(--ink);font-size:inherit}
.wp-block-post-content>blockquote cite{display:block;font-family:var(--font-body);font-size:.9rem;font-style:normal;color:var(--ink-mute);margin-top:var(--s-3)}
.quote-hand{font-family:var(--font-display);font-style:italic;font-size:1.35rem;color:var(--ink);line-height:1.4}
.avatar{width:44px;height:44px;border-radius:2px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);flex:0 0 44px}
.stat{display:flex;flex-direction:column;gap:4px}
.stat__num{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--ink)}
.stat__label{font-size:.85rem;color:var(--ink-mute);letter-spacing:.06em;text-transform:uppercase}
.crumbs{font-size:.88rem;color:var(--ink-mute);padding:var(--s-5) 0 0}
.crumbs a{color:var(--ink-mute);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.qr{width:140px;height:140px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);padding:10px;gap:2px}
.qr>span{background:var(--ink);border-radius:1px}
/* Echter QR-Code an Stelle des gezeichneten Platzhalters. Siehe Anleitung, Kapitel 20. */
.qr-bild{width:var(--qr-groesse,220px);height:var(--qr-groesse,220px);max-width:100%;display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:10px;box-sizing:border-box}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ============================================================
   16 · KALENDER, FILTER UND SEITENZAHLEN
   ============================================================ */
.kalender{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--s-5)}
.kalender__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.kalender__monat{font-family:var(--font-display);font-size:1.3rem;color:var(--ink)}
.kalender__nav{background:none;border:1px solid var(--line);border-radius:var(--radius-s);width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer}
.kalender__nav:hover{border-color:var(--accent);color:var(--accent)}
.kalender__wochentage{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.kalender__wochentage span{text-align:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding:4px 0}
.kalender__gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kalender__tag{min-height:92px;border:1px solid var(--line-soft);border-radius:var(--radius-s);padding:6px;display:flex;flex-direction:column;gap:4px;background:var(--bg)}
.kalender__tag--leer{background:transparent;border-color:transparent}
.kalender__tag--heute{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.kalender__tag--belegt{background:var(--surface)}
.kalender__zahl{font-size:.8rem;color:var(--ink-mute);font-weight:600}
.kalender__tag--heute .kalender__zahl{color:var(--accent)}
.kalender__eintrag{border:0;border-radius:4px;padding:4px 6px;font:inherit;font-size:.72rem;line-height:1.25;text-align:left;cursor:pointer;background:var(--accent-soft);color:var(--accent);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kalender__eintrag.badge--fv{background:var(--fv-soft);color:var(--fv)}
.kalender__eintrag:hover{filter:brightness(.95)}
.kalender__fuss{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line-soft)}
@media (max-width:720px){.kalender__tag{min-height:64px}.kalender__eintrag{font-size:.66rem}}

.kalender-popup{position:fixed;inset:0;z-index:200;background:rgba(20,32,46,.6);display:flex;align-items:center;justify-content:center;padding:var(--s-5)}
.kalender-popup[hidden]{display:none}
.kalender-popup__box{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-m);padding:var(--s-6);max-width:460px;width:100%}
.kalender-popup__zu{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--ink-mute);cursor:pointer;padding:6px;border-radius:var(--radius-s)}
.kalender-popup__zu:hover{background:var(--bg-alt);color:var(--ink)}

.filter-zeile{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-5)}
.chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:.88rem;font-weight:600;text-decoration:none;min-height:40px}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip--aktiv{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip--aktiv:hover{color:var(--bg)}
.pagination{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-6);justify-content:center}
/* Sichtbarer Hinweis im Seitencode, der nach dem Einrichten gelöscht wird */
.ffw-marker{background:var(--accent-soft);color:var(--accent);border:1px dashed var(--accent);border-radius:var(--radius-m);padding:12px 14px;font-size:.88rem;margin:0}

/* Fluent Forms an das Design angleichen */
.fluentform .ff-el-input--label label{font-weight:600;font-size:.95rem;color:var(--ink)}
.fluentform .ff-el-form-control{border:1px solid var(--line)!important;border-radius:var(--radius-m)!important;background:var(--surface)!important;color:var(--ink)!important;min-height:48px;font:inherit!important;padding:12px 14px!important}
.fluentform .ff-btn-submit{background:var(--accent)!important;color:var(--accent-ink)!important;border:1px solid var(--accent)!important;border-radius:var(--radius-m)!important;min-height:48px;padding:14px 22px!important;font-weight:600!important;font-family:var(--font-body)!important}
.fluentform .ff-btn-submit:hover{background:color-mix(in srgb,var(--accent) 88%,#000)!important}

/* ============================================================
   17 · CHRONIK  (gemeinsamer Abschnitt in C und D)
   Reihenfolge Startseite: Hero · Organisationen · Chronik ·
   Neubau · Termine · Aktuelles · Unterstützen
   ============================================================ */
.ornament-rule{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--brass);margin:0 0 var(--s-4);font-family:var(--font-display);font-size:1rem}
.ornament-rule::before,.ornament-rule::after{content:'';width:60px;height:1px;background:var(--brass);opacity:.6}
/* Zeilenabstand: erster Wert = zwischen den Zeilen, zweiter = zwischen den Spalten */
.chronik{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4) var(--s-5)}
.chronik__item{border-top:2px solid var(--brass);padding-top:var(--s-2)}
.chronik__jahr{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1.15;color:var(--ink)}
.chronik__text{font-size:.88rem;line-height:1.45;color:var(--ink-mute);margin-top:4px}
/* Überschrift → Ornament etwas näher */
#s-chronik .section-head{margin-bottom:var(--s-4)}
@media (max-width:900px){.chronik{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.chronik{grid-template-columns:1fr}}

/* ============================================================
   18 · AKTUELLES-KARTEN AUF DER STARTSEITE
   Erzeugt von [ffw_aktuelles_section]. Bildhöhe und Textabstände hier.
   ============================================================ */
.news-card__bild{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.news-card .card__body{gap:var(--s-2);padding:var(--s-5)}
.news-card h3{font-size:1.15rem}
.news-card p{margin:0;font-size:.94rem}
/* Archiv- und Blogtemplate: dieselben Karten, aber aus Blöcken gebaut. */
.news-card__bild img,.news-card .wp-block-post-featured-image img{display:block;width:100%;height:auto;object-fit:cover}
.news-card .wp-block-post-featured-image{margin:0}
.news-card .wp-block-post-title{font-family:var(--font-display);font-size:1.15rem;line-height:1.25;margin:0}
.news-card .wp-block-post-title a{text-decoration:none}
.news-card .wp-block-post-excerpt{margin:0}
.news-card .wp-block-post-excerpt__excerpt{margin:0;color:var(--ink-soft);font-size:.94rem}
.news-card .wp-block-post-date{font-size:.85rem;color:var(--ink-mute);letter-spacing:.04em}
.pagination .wp-block-query-pagination-numbers a,.pagination a,.pagination .page-numbers{text-decoration:none}

/* ============================================================
   19 · FEINABSTIMMUNG  (siehe README-Abstaende.md)
   Diese Regeln bringen die Abschnittshöhen auf das Maß des Mockups.
   Jede Zeile ist einzeln abschaltbar.
   ============================================================ */
/* Zwei gleichfarbige Abschnitte direkt hintereinander: oberer Abstand halbiert. */
.section + .section:not(.section--alt):not(.section--ink){padding-top:var(--s-6)}
/* Letzter Absatz in einer Karte trägt keinen zusätzlichen Fußabstand. */
.card__body>p:last-child,.card__body>ul:last-child{margin-bottom:0}
/* Knopfzeile am Kartenfuß sitzt direkt unter der Liste, nicht mit doppeltem Abstand. */
.card__body>.row:last-child{margin-top:var(--s-2)}
/* Überschrift → Inhalt innerhalb eines Abschnitts (24 → 16 px, Runde 2). */
.section-head{margin-bottom:var(--s-4)}
/* Karten „Zwei Organisationen" auf Mockup-Höhe bringen (rund 45 px kompakter).
   Jede Zeile einzeln abschaltbar — Wirkung in Klammern. */
#s-orgs .card__body{gap:var(--s-2)}                 /* Abstand zwischen allen Kartenzeilen 12 → 8 px (−16 px) */
#s-orgs .card__body h3+p{margin-top:0}              /* kein Zusatzabstand nach der Überschrift (−12 px) */
#s-orgs .card__body p{margin-bottom:0}              /* Absatz-Fußabstand entfällt, der gap regelt (−17 px) */
#s-orgs .card__body>.row:last-child{margin-top:var(--s-3)}   /* Knopfzeile: 12 px Abstand nach oben */

/* Terminzeilen etwas kompakter als der Mockup-Standard von 24px. */
#s-termine .event-row{padding:var(--s-4) 0}
/* Bildunterschrift/Kennzahlen-Raster im Aufruf nicht auseinanderfallen lassen. */
#s-unterstuetzen .stat__num{margin-bottom:2px}

/* ============================================================
   20 · AUSRICHTUNG UND HÖHEN  ·  Runde 2 (Abgleich mit dem Mockup)
   Jede Zeile ist einzeln abschaltbar.
   ============================================================ */
/* Überschrift → Text: im Mockup sitzt der Text direkt unter der Überschrift.
   Die frühere Regel h2+p{margin-top:12px} ist deshalb entfallen — sie hat in
   zweispaltigen Abschnitten den Text gegen Foto bzw. Tabelle verschoben
   (s-wer, s-platz, s-was) und alle Karten um 12 px verlängert. */

/* Kartenraster leicht enger, −16 px (Rundgang, Vorstand). */
#s-rundgang .grid-3,#s-vorstand .grid-3{gap:var(--s-4)}

/* Spenden · beide Karten immer gleich hoch, egal wie viel drinsteht. */
#s-wege>.wrap>.grid{align-items:stretch!important}
#s-wege>.wrap>.grid>.card{height:100%}

/* --- Nachtrag Runde 2b -------------------------------------------------- */
/* Label über der Überschrift (6 → 4 px). */
.section-head .eyebrow{margin-bottom:4px}
/* Überschriftenblock → Inhalt: 16 → 12 px (Rundgang, Aktuelles, Fuhrpark, Termine …). */
.section-head{margin-bottom:var(--s-3)}

/* --- Nachtrag Runde 2c ---------------------------------------------------- */
/* WordPress setzt in Custom-HTML-Blöcken gelegentlich ein <br> oder einen
   leeren Absatz an den Anfang einer Rasterspalte. Das erzeugt eine unsichtbare
   Leerzeile — und genau dadurch stand die Textspalte tiefer als das Foto daneben. */
main .grid>div>br,main .grid>div>p:empty,main .card__body>br{display:none}
/* Foto und Überschrift auf einer Linie (Feuerwehr · Überblick, Gerätehaus). */
#s-wer>.wrap>.grid,#s-platz>.wrap>.grid{align-items:start!important}
/* Foto mittig zum Text (Förderverein · Über uns). */
#s-was>.wrap>.grid{align-items:center!important}

/* Spendenbeträge · Runde 2d
   Auf der Website gewinnt für diesen Container irgendeine andere Datei mit
   zwei Spalten. Deshalb wird hier nicht mehr über grid-template-columns
   gestritten, sondern das Raster ganz verlassen: eine Flex-Reihe ohne Umbruch.
   Das lässt sich durch keine Spaltenangabe mehr überstimmen. */
#s-wege .card__body>.grid,
#s-wege .card__body>div:has(>.btn+.btn),
#s-wege .card__body>.wp-block-buttons{
  display:flex!important;flex-wrap:nowrap!important;flex-direction:row!important;gap:var(--s-2)!important
}
#s-wege .card__body>.grid>*,
#s-wege .card__body>div:has(>.btn+.btn)>*,
#s-wege .card__body>.wp-block-buttons>*{
  flex:1 1 0!important;width:auto!important;min-width:0!important;margin:0!important
}
#s-wege .card__body>.grid>.btn{padding-left:var(--s-2)!important;padding-right:var(--s-2)!important;white-space:nowrap}

/* Voll breite Knöpfe in Karten (im Mockup läuft „Jetzt via PayPal spenden“
   über die ganze Kartenbreite). */
.card__body>.btn{align-self:stretch!important;justify-content:center}

/* ============================================================
   20 · FORMENSPRACHE RICHTUNG D
   Kantig, klassisch, Messing-Akzente. Alles, was D von C trennt,
   steht ausschließlich in diesem Abschnitt — hier lässt sich der
   Charakter des Themes gezielt nachjustieren.
   ============================================================ */
/* Überschriften: Renaissance-Antiqua, ruhige Strichstärke */
h1,h2,h3,h4{font-weight:400;letter-spacing:-.005em}

/* Trennlinien und Ornamente in Messing statt in Weizenbraun */
.rule{color:var(--brass);letter-spacing:.18em;font-size:.8rem;font-weight:600}
.rule::before,.rule::after{background:var(--brass);opacity:.5}
.ornament-rule{color:var(--brass);font-size:1.2rem}
.ornament-rule::before,.ornament-rule::after{background:var(--brass);opacity:.55;width:80px}

/* Karten: keine Rundungen, dafür eine Messing-Oberkante als Abschluss */
.card{border-radius:2px}
.card--brass{border-top:2px solid var(--brass)}

/* Chronik: Jahreszahlen kursiv, wie in einer Vereinschronik */
.chronik__item{border-top:2px solid var(--brass)}
.chronik__jahr{font-style:italic}

/* Kopfbereich: Kapitälchen im Zweizeiler, eckige Wappenfassung */
.brand__name{letter-spacing:.01em}
.brand__sub{letter-spacing:.08em}
.nav__menu{border-radius:2px}
.nav__link--active::after{background:var(--brass)}

/* Datumskarten und Abzeichen eckig */
.datebox{border-radius:2px}
.datebox__day{font-style:italic}
.datebox__month{letter-spacing:.16em}
.badge{border-radius:2px;letter-spacing:.06em}
.chip{border-radius:2px}
.kalender,.kalender-popup__box{border-radius:2px}
.kalender__tag,.kalender__nav,.kalender__eintrag{border-radius:0}

/* Schaltflächen: kantig, mit ruhigem Kontrast */
.btn{border-radius:2px;letter-spacing:.02em}
.btn--glass{border-color:rgba(238,227,201,.45)}
.wp-block-button__link{border-radius:2px}

/* Zitate und Merklisten im klassischen Duktus */
.pullquote,.wp-block-post-content blockquote{border-left:2px solid var(--brass);font-style:italic}
ul.check li::before{border-color:var(--brass)}
.stat__num{font-style:italic}
.footer-emergency{border-radius:0}
.footer-emergency strong{color:var(--accent)}
.announce{letter-spacing:.06em}

/* ============================================================
   21 · BILDUNTERSCHRIFTEN AN ECHTEN FOTOS
   Muster:
     <figure class="foto"><img class="photo-echt photo--wide" src="…" alt="…">
       <figcaption>Spatenstich, Juni 2023</figcaption></figure>
   Der span.photo__label gehört ausschließlich in den Platzhalter — außerhalb
   wird er zu einem losen Kästchen und macht die Rasterzelle höher.
   ============================================================ */
figure.foto{margin:0;display:flex;flex-direction:column;gap:var(--s-2)}
figure.foto figcaption{font-size:.85rem;line-height:1.4;color:var(--ink-mute);text-wrap:pretty}
/* In Bildrastern die Zeilen oben ausrichten, damit eine Unterschrift die
   Nachbarbilder nicht mit nach unten zieht. */
#s-rundgang .grid-3,#s-galerie .grid-3{align-items:start}

@media print{.site-header,.site-footer,.announce,.ffw-prefs{display:none}}