/*
Theme Name: Links vom Holstentor
Theme URI: https://dkp-lübeck.de
Author: hafenstudios
Author URI: https://hafenstudios.com
Description: Zeitungsartiges Theme für die DKP Lübeck - Ostholstein. Drei Rubriken mit eigener Farbe, Blocksatz wie im Zeitungssatz, Medaillen mit Porträt und Zitat am Ende der Artikel.
Version: 1.0.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: links-vom-holstentor
Tags: news, three-columns, custom-colors, accessibility-ready
*/

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #141414;
  --meta: #6B6B6B;
  --rule: #d9d9d9;
  --rule-strong: #141414;
  --paper: #ffffff;
  --paper-2: #f6f5f2;
  --brand: #FF0000;
  --brand-text: #C80000;
  /* Ressort-Farbcodes, klar unterscheidbar, alle mindestens 4,5:1 auf Weiß
     und weiße Schrift darauf ebenfalls: Rot (Heimat) / Blau (Inland) / Petrol (Welt) */
  --regional: #FF0000;
  --regional-text: #C80000;
  --deutschland: #1E5FA8;
  --deutschland-text: #1E5FA8;
  --international: #00786B;
  --international-text: #00786B;
  --gold: #c9a23a;
  --gold-light: #f6e7a8;
  --gold-dark: #6f4f10;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", Georgia, "Times New Roman", Times, serif;
  --content: 780px;
  --wide: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-text); }
:focus-visible { outline: 3px solid var(--international); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; }
p { margin: 0 0 1em; }

/* Blocksatz wie im Zeitungssatz: nur Fließtext, immer mit Silbentrennung,
   damit im Deutschen keine Löcher entstehen. Überschriften, Meta- und
   Navigationszeilen bleiben linksbündig. */
.teaser,
.vorspann,
.artikel-body p,
.artikel-body li,
.meldung__text,
.stufe > p,
.ortsblock p,
.rubrik__intro,
.lesezirkel p,
.wilfried__text p,
.mitmachen__kopf p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
}
/* In den schmalen Spalten (Randspalte, Dreierreihe) trennt Chrome früher,
   sonst reißt der Blocksatz im Deutschen Löcher. */
.randspalte .teaser,
.randspalte p,
.dreier .teaser,
.kurz .meldung__text { hyphenate-limit-chars: 5 2 2; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

.wide { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.content { max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; font-weight: 600;
}
.skip-link:focus { top: 8px; }

/* =========================================================================
   Kopf: Schriftteil links, Emblem rechts (Wunsch Christian, Überarbeitung I)
   Der Kopf ist echter Text, keine Grafik. Dadurch ist er lesbar, mitwachsend
   und die Zeile "Website der" ließ sich streichen, ohne die Grafik zu ändern.
   ========================================================================= */
.site-header { background: var(--brand); color: #fff; }
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 4vw, 48px);
  padding-block: clamp(18px, 3vw, 30px);
}
.kopf__text { flex: 1 1 auto; min-width: 0; }
.kopf__spruch {
  font-size: clamp(14px, 1.6vw, 21px); font-weight: 700; letter-spacing: .01em;
  margin: 0 0 clamp(6px, 1vw, 14px);
}
.kopf__titel {
  font-size: clamp(34px, 7.2vw, 88px); line-height: .98; font-weight: 800; letter-spacing: -.02em;
  margin: 0;
}
.kopf__titel a { color: #fff; text-decoration: none; }
.kopf__unter {
  font-size: clamp(15px, 2vw, 30px); font-weight: 700; margin: clamp(8px, 1.4vw, 18px) 0 0;
}
.kopf__emblem { flex: 0 0 auto; width: clamp(110px, 20vw, 240px); height: auto; }
@media (max-width: 560px) {
  .kopf { gap: 14px; }
  .kopf__emblem { width: 84px; align-self: flex-start; }
  .kopf__spruch { font-size: 13px; }
}

/* Ressortleiste */
.ressortleiste { border-bottom: 1px solid var(--rule-strong); background: var(--paper); position: relative; }
/* Umbruch erlaubt: Mit den drei Knöpfen rechts wird die Zeile sonst breiter als
   der Bildschirm. Passt alles nebeneinander, bleibt es nebeneinander, sonst
   rutschen die Knöpfe in eine zweite Zeile. */
.ressortleiste .wide {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; min-height: 52px; padding-block: 6px;
}
.menu { flex-wrap: wrap; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--ink); border-radius: 2px;
  padding: 6px 12px; font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
}
.nav-toggle[aria-expanded="true"] { background: var(--ink); color: #fff; }
.menu { display: flex; align-items: stretch; gap: 0; }
.menu a {
  display: block; white-space: nowrap; padding: 15px 8px; text-decoration: none; font-weight: 600; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; border-bottom: 4px solid transparent; margin-bottom: -1px;
}
.menu a:hover, .menu a:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.menu li.menu__ressort a { color: var(--ink); font-size: 15px; letter-spacing: .1em; padding-inline: 14px; }
.menu li.menu__ressort--regional a { border-bottom-color: var(--regional); }
.menu li.menu__ressort--deutschland a { border-bottom-color: var(--deutschland); }
.menu li.menu__ressort--international a { border-bottom-color: var(--international); }
.menu li.menu__ressort a:hover, .menu li.menu__ressort a:focus-visible { background: var(--paper-2); }
/* aktive Rubrik: Farbfläche statt nur Balken */
.menu li.menu__ressort--regional a[aria-current="page"] { background: var(--regional); color: #fff; }
.menu li.menu__ressort--deutschland a[aria-current="page"] { background: var(--deutschland); color: #fff; }
.menu li.menu__ressort--international a[aria-current="page"] { background: var(--international); color: #fff; }
.menu li.menu__ressort a[aria-current="page"]:hover { color: #fff; }
.menu li.trenner { width: 1px; background: var(--rule); margin: 14px 6px; }
.menu li.nebenpunkt a { font-weight: 500; text-transform: none; font-size: 14px; padding-inline: 8px; letter-spacing: 0; }
.cta-pair { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.btn {
  display: inline-block; padding: 9px 10px; border-radius: 2px; font-weight: 600; font-size: 13px;
  text-decoration: none; border: 1.5px solid var(--brand); color: var(--brand-text); background: #fff; line-height: 1.2;
  transition: background .15s, color .15s;
}
.btn:hover, .btn:focus-visible { background: #fbeaea; color: var(--brand-text); }
.btn--solid { background: var(--brand); color: #fff; border-color: var(--brand); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: 14px; }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--brand-text); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--dark:hover, .btn--dark:focus-visible { background: #000; color: #fff; }

/* Knopf Karl-Liebknecht-Schule, ganz außen rechts, mit Zeichen */
.btn--kls {
  display: inline-flex; align-items: center; gap: 7px; border-color: var(--ink); color: var(--ink);
  text-transform: none; letter-spacing: 0; font-size: 13px;
}
.btn--kls:hover, .btn--kls:focus-visible { background: var(--ink); color: #fff; }
.btn--kls .kls__zeichen {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: 0; flex: 0 0 auto;
}
.btn--kls:hover .kls__zeichen, .btn--kls:focus-visible .kls__zeichen { background: #fff; color: var(--ink); }

@media (max-width: 1199px) {
  .nav-toggle { display: inline-block; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--rule-strong);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  .menu.is-open { display: flex; }
  .menu a { padding: 12px var(--gutter); border-bottom: 1px solid var(--rule); border-left: 4px solid transparent; margin: 0; }
  .menu li.menu__ressort--regional a { border-left-color: var(--regional); border-bottom-color: var(--rule); }
  .menu li.menu__ressort--deutschland a { border-left-color: var(--deutschland); border-bottom-color: var(--rule); }
  .menu li.menu__ressort--international a { border-left-color: var(--international); border-bottom-color: var(--rule); }
  .menu li.trenner { display: none; }
}
@media (max-width: 720px) {
  .ressortleiste .wide { flex-wrap: wrap; padding-block: 8px; row-gap: 8px; }
  .cta-pair { width: 100%; flex-wrap: wrap; }
  .cta-pair .btn { flex: 1; text-align: center; font-size: 13px; padding: 9px 8px; }
  .btn--kls { justify-content: center; }
}

/* Stempelzeile + Meldungsleiste */
.stand { border-bottom: 1px solid var(--rule-strong); }
.stempel {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 0; font-size: 12px; color: var(--meta);
}
.stempel__mark {
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  border: 1.5px solid var(--ink); padding: 3px 8px; font-size: 11px;
}
.stempel__kw { letter-spacing: .1em; text-transform: uppercase; }
.stempel__nr { margin-left: auto; letter-spacing: .1em; text-transform: uppercase; }
.stempel__sprung { font-weight: 600; text-decoration: none; color: var(--ink); }
.stempel__sprung::after { content: " ↓"; }
.stempel__sprung:hover, .stempel__sprung:focus-visible { text-decoration: underline; color: var(--brand-text); }
@media (max-width: 560px) { .stempel__nr { display: none; } }
.stand__h { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--meta); margin: 12px 0 0; }
.meldungsleiste .meldung__titel { display: block; margin-top: 2px; font-family: var(--serif); font-size: 16px; }
.meldungsleiste .meldung__stichwort::after { content: none; }
.meldungsleiste { display: grid; grid-template-columns: repeat(3, 1fr); }
.meldungsleiste > li { padding: 16px 20px 16px 0; border-right: 1px solid var(--rule); }
.meldungsleiste > li + li { padding-left: 20px; }
.meldungsleiste > li:last-child { border-right: 0; padding-right: 0; }
@media (max-width: 760px) {
  .meldungsleiste { grid-template-columns: 1fr; }
  .meldungsleiste > li { border-right: 0; border-bottom: 1px solid var(--rule); padding: 12px 0; }
  .meldungsleiste > li + li { padding-left: 0; }
  .meldungsleiste > li:last-child { border-bottom: 0; }
}

/* Meldung als bildlose Zeile */
.meldung { font-size: 14px; line-height: 1.5; }
.meldung__stichwort { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.meldung__stichwort::after { content: " · "; color: var(--meta); font-weight: 400; }
.meldung a { text-decoration: none; }
.meldung a:hover .meldung__titel, .meldung a:focus-visible .meldung__titel { text-decoration: underline; color: var(--brand-text); }
.meldung__titel { font-weight: 600; }
.meldung__text { color: var(--ink); display: block; margin-top: 2px; }
.meldung__datum { display: block; color: var(--meta); font-size: 12px; margin-top: 4px; }
.meldung.is-regional .meldung__stichwort { color: var(--regional-text); }
.meldung.is-deutschland .meldung__stichwort { color: var(--deutschland-text); }
.meldung.is-international .meldung__stichwort { color: var(--international-text); }
.meldung.is-regional { border-left: 3px solid var(--regional); padding-left: 10px; }
.meldung.is-deutschland { border-left: 3px solid var(--deutschland); padding-left: 10px; }
.meldung.is-international { border-left: 3px solid var(--international); padding-left: 10px; }

/* Layout Haupt/Rand */
.layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding-top: 28px; padding-bottom: 40px; }
@media (min-width: 960px) {
  .layout { grid-template-columns: 8fr 4fr; gap: 0; }
  .hauptspalte { padding-right: 32px; border-right: 1px solid var(--rule); }
  .randspalte { padding-left: 32px; }
}

/* Ressortblock */
.ressort { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--rule-strong); }
.ressort:last-child { border-bottom: 0; margin-bottom: 0; }
.ressort__kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-top: 4px solid var(--ink); padding-top: 10px; margin-bottom: 20px;
}
.ressort__kopf h2 { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; }
.ressort__kopf h2::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; background: currentColor; vertical-align: -1px; }
.ressort__sub { color: var(--meta); font-size: 13px; }
.ressort__alle { margin-left: auto; font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: .02em; }
.ressort__alle::after { content: " →"; }
.ressort__alle:hover, .ressort__alle:focus-visible { text-decoration: underline; }
.ressort.is-regional .ressort__kopf { border-top-color: var(--regional); }
.ressort.is-regional .ressort__kopf h2 { color: var(--regional-text); }
.ressort.is-deutschland .ressort__kopf { border-top-color: var(--deutschland); }
.ressort.is-deutschland .ressort__kopf h2 { color: var(--deutschland-text); }
.ressort.is-international .ressort__kopf { border-top-color: var(--international); }
.ressort.is-international .ressort__kopf h2 { color: var(--international-text); }

/* Bildflächen */
.bild { position: relative; overflow: hidden; background: #ddd; }
.bild--169 { aspect-ratio: 16 / 9; }
.bild--11 { aspect-ratio: 1 / 1; }
.bild--43 { aspect-ratio: 4 / 3; }
.bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Farbkante in der Rubrikfarbe, damit die Zuordnung auch beim Foto sichtbar bleibt */
.bild { border-bottom: 4px solid var(--regional); }
.is-deutschland .bild { border-bottom-color: var(--deutschland); }
.is-international .bild { border-bottom-color: var(--international); }
.bildzeile { font-size: 12px; color: var(--meta); margin: 6px 0 0; display: flex; justify-content: space-between; gap: 12px; }
.bildzeile span:first-child { flex: 1; }

/* Teaser-Einheit */
.kicker {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--regional-text); margin-bottom: 6px;
}
.kicker::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px;
  background: var(--regional); vertical-align: 0;
}
.is-deutschland .kicker { color: var(--deutschland-text); }
.is-deutschland .kicker::before { background: var(--deutschland); }
.is-international .kicker { color: var(--international-text); }
.is-international .kicker::before { background: var(--international); }
.titel { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }
.titel a { text-decoration: none; }
.titel a:hover, .titel a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; color: var(--ink); }
.teaser { margin: 8px 0 8px; font-size: 16px; line-height: 1.55; }
.meta { font-size: 13px; color: var(--meta); margin: 0; }
.meta .autor { color: var(--ink); font-weight: 500; }
.meta span + span::before { content: "·"; margin: 0 6px; }

.aufmacher { margin-bottom: 24px; }
.aufmacher__text { padding-top: 16px; }
.aufmacher .titel { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; }
.aufmacher .teaser { font-size: 17px; max-width: 62ch; }

.ressort__unten { display: grid; grid-template-columns: 1fr; gap: 24px; border-top: 1px solid var(--rule); padding-top: 20px; }
@media (min-width: 640px) { .ressort__unten { grid-template-columns: 7fr 5fr; gap: 28px; } }
.karte { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; }
.karte .titel { font-size: 20px; }
.karte .teaser { font-size: 14px; }
@media (max-width: 420px) { .karte { grid-template-columns: 88px 1fr; gap: 12px; } .karte .titel { font-size: 18px; } }
.kurz { border-left: 1px solid var(--rule); padding-left: 20px; }
@media (max-width: 639px) { .kurz { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 16px; } }
.kurz__kopf { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--meta); margin-bottom: 8px; }
.kurz .meldung { font-size: 15px; }
.kurz .meldung + .meldung { margin-top: 10px; padding-top: 10px; border-top: 1px dotted var(--rule); }

/* Randspalte */
.rand { margin-bottom: 32px; }
.rand__kopf {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800;
  border-top: 4px solid var(--ink); padding-top: 8px; margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px;
}
.rand__kopf a { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; text-decoration: none; }
.rand__kopf a::after { content: " →"; }
.rand__kopf a:hover, .rand__kopf a:focus-visible { text-decoration: underline; }

/* Angebot Lesezirkel: steht über den Terminen, weil die Termine nach unten
   rücken sollen (Wunsch Christian, Überarbeitung I, Punkt "Rechte Spalte") */
.lesezirkel {
  border: 1.5px solid var(--ink); padding: 16px 18px 18px; background: var(--paper-2);
}
.lesezirkel h2 { font-family: var(--serif); font-size: 21px; margin-bottom: 6px; }
.lesezirkel p { font-size: 14px; margin-bottom: 12px; }
.lesezirkel .btn { width: 100%; text-align: center; }

/* Kachel "Wilfried meint": Bild, Name, Kommentar. Einsetzbar in jeder Rubrik. */
.wilfried { border-top: 4px solid var(--ink); padding-top: 14px; }
.wilfried__kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.wilfried__bild {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--paper-2); border: 2px solid var(--ink);
}
.wilfried__bild img { width: 100%; height: 100%; object-fit: cover; }
.wilfried__bild--leer { display: grid; place-items: center; font-size: 24px; font-weight: 800; color: var(--meta); }
.wilfried__titel { font-family: var(--serif); font-size: 24px; }
.wilfried__rolle { font-size: 12px; color: var(--meta); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.wilfried__text { font-size: 16px; }
.wilfried__text p:last-child { margin-bottom: 0; }
.wilfried--klein .wilfried__titel { font-size: 20px; }
.wilfried--klein .wilfried__bild { width: 56px; height: 56px; }
.wilfried--klein .wilfried__text { font-size: 14px; }

/* Termine */
.termin { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.termin:last-child { border-bottom: 0; }
.datum {
  text-align: center; border: 1.5px solid var(--brand); border-radius: 2px; line-height: 1; background: #fff; overflow: hidden; align-self: start;
}
.datum__tag { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; background: var(--brand); color: #fff; padding: 7px 0 6px; }
.datum__monat { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 0 3px; font-weight: 700; color: var(--ink); }
/* Christian unterscheidet laufende Termine (blau) und historische Daten (grün) */
.termin.is-laufend .datum { border-color: var(--deutschland); }
.termin.is-laufend .datum__tag { background: var(--deutschland); }
.termin.is-historisch .datum { border-color: var(--international); }
.termin.is-historisch .datum__tag { background: var(--international); }
.termin__art {
  display: inline-block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 2px 6px; border: 1px solid var(--rule-strong); border-radius: 2px; margin-bottom: 6px;
}
.termin__titel { font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.2; }
.termin__titel a { text-decoration: none; }
.termin__titel a:hover, .termin__titel a:focus-visible { text-decoration: underline; }
.termin__meta { font-size: 13px; color: var(--meta); margin: 4px 0 0; }
.termin__meta .ort { color: var(--ink); }
.termin--kompakt { grid-template-columns: 40px 1fr; gap: 10px; padding: 8px 0; }
.termin--kompakt .datum__tag { font-size: 17px; padding: 5px 0 4px; }
.termin--kompakt .datum__monat { font-size: 9px; padding: 3px 0 2px; }
.termin--kompakt .termin__titel { font-size: 15px; }
.termin--kompakt .termin__meta { font-size: 12px; margin-top: 2px; }

/* =========================================================================
   Medaillen: Vorderseite Porträt, Rückseite Zitat.
   Sie stehen jetzt am Ende einzelner Artikel, nicht mehr in der Randspalte.
   Schlanker als im Entwurf: weniger Luft unten und an den Seiten.
   ========================================================================= */
.muenze {
  --size: 150px;
  width: var(--size); height: var(--size); aspect-ratio: 1; max-width: 100%;
  border: 0; padding: 0; background: none; border-radius: 50%;
  perspective: 900px; cursor: pointer; margin-inline: auto; margin-bottom: 10px; display: block;
}
.muenze__inner {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 50%;
  transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .75, .2, 1);
}
.muenze:hover .muenze__inner,
.muenze:focus-visible .muenze__inner,
.muenze.is-flipped .muenze__inner { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .muenze__inner { transition: none; } }
.muenze__face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: conic-gradient(from 200deg,
    #8A6A14 0%, #F1D67A 10%, #C9A227 22%, #7A5C12 36%, #E9CB63 50%, #C9A227 62%, #6D5010 76%, #F1D67A 88%, #8A6A14 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 240, 190, .7),
    inset 0 0 0 6px #7A5C12,
    inset 0 0 0 8px rgba(241, 214, 122, .75),
    inset 0 8px 16px rgba(0, 0, 0, .35),
    inset 0 -6px 14px rgba(255, 240, 190, .3),
    0 6px 16px rgba(80, 55, 0, .3),
    0 0 0 1px rgba(90, 65, 10, .55);
}
.muenze__riffel {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(60, 40, 5, .85) 0 1.6deg, rgba(241, 214, 122, .95) 1.6deg 3.2deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 93%, #000 93.5%);
  mask: radial-gradient(circle closest-side, transparent 0 93%, #000 93.5%);
}
.muenze__face::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.34) 0, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.24) 100%);
}
.muenze__portrait {
  display: block; width: 76%; height: 76%; border-radius: 50%; overflow: hidden; position: relative; isolation: isolate;
  background: linear-gradient(160deg, #E4C15A 0%, #B8901F 45%, #5C4410 100%);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.5), inset 0 -2px 6px rgba(255,240,190,.35), 0 0 0 2px #7A5C12, 0 0 0 3px rgba(241,214,122,.6);
}
.muenze__portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  filter: grayscale(1) contrast(1.15) brightness(1.02);
  mix-blend-mode: luminosity;
}
.muenze__revers {
  transform: rotateY(180deg);
  background: conic-gradient(from 200deg,
    #C9A227 0%, #F1D67A 10%, #D9B43A 22%, #B8901F 36%, #E9CB63 50%, #D9B43A 62%, #B8901F 76%, #F1D67A 88%, #C9A227 100%);
}
.muenze__zitat {
  display: block; width: 78%; padding: 4px; color: #2A1F05; font-family: var(--serif); font-style: italic;
  font-size: 13.5px; line-height: 1.3; text-align: center; text-shadow: 0 1px 0 rgba(255,240,190,.5); hyphens: auto;
}
.muenze__revers--lang .muenze__zitat { font-size: 11.5px; line-height: 1.25; width: 84%; }
.muenze__revers--sehrlang .muenze__zitat { font-size: 9px; line-height: 1.2; width: 88%; }
.muenze--klein { --size: 120px; }
.muenze--klein .muenze__zitat { font-size: 11px; line-height: 1.25; }

.person__name { font-size: 15px; font-weight: 700; }
.person__daten { font-size: 12px; color: var(--meta); letter-spacing: .04em; margin-bottom: 8px; }
.person__zitat { font-family: var(--serif); font-size: 15.5px; line-height: 1.4; margin: 0; font-style: italic; quotes: "„" "“"; }
.person__zitat p { margin: 0; }
.person__zitat p::before { content: open-quote; }
.person__zitat p::after { content: close-quote; }
.person__quelle { font-size: 11px; color: var(--meta); margin-top: 6px; font-style: normal; }

/* Medaille am Ende eines Artikels: ohne Überschrift, ohne Verweispfeil,
   schlank gesetzt (Wunsch Christian, Überarbeitung I, Punkt "Medaillen") */
.artikel-medaille {
  max-width: var(--content); margin: 28px auto 0; padding: 18px 0 4px;
  border-top: 1px solid var(--rule-strong);
  display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center;
}
.artikel-medaille .muenze { margin: 0; }
.artikel-medaille .person__zitat { font-size: 17px; }
@media (max-width: 560px) {
  .artikel-medaille { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .artikel-medaille .muenze { margin-inline: auto; }
}

.muenzen { background: var(--paper-2); border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); padding: 32px 0 34px; }
.muenzen__kopf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.muenzen__kopf h2 { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; }
.muenzen__kopf h2::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; background: conic-gradient(#f3dc8a, #8a6612, #f3dc8a); }
.muenzen__sub { color: var(--meta); font-size: 13px; }
.muenzen__hint { color: var(--meta); font-size: 12px; margin-left: auto; }
.muenzband {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 0 12px;
  scrollbar-color: var(--gold-dark) transparent; -webkit-overflow-scrolling: touch;
}
.muenzband > li { scroll-snap-align: center; flex: 0 0 240px; text-align: center; }
.muenzband .muenze { margin-bottom: 12px; }
@media (min-width: 900px) {
  .muenzband { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 20px; overflow: visible; }
  .muenzband > li { flex: none; }
  .muenzen__hint { display: none; }
}
.muenzgalerie { display: grid; grid-template-columns: 1fr; gap: 32px 24px; padding-top: 24px; }
@media (min-width: 560px) { .muenzgalerie { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .muenzgalerie { grid-template-columns: repeat(3, 1fr); } }
.muenzgalerie__item { text-align: center; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.muenzgalerie__item .muenze { --size: 175px; }
.muenzgalerie .person__zitat { text-align: left; }
.person__beleg { font-size: 12px; margin: 8px 0 0; }
.person__beleg a { color: var(--meta); }

/* Mitmach-Band */
.mitmachen { padding: 40px 0 48px; border-bottom: 1px solid var(--rule-strong); }
.mitmachen__kopf { margin-bottom: 20px; }
.mitmachen__kopf h2 { font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); }
.mitmachen__kopf p { color: var(--meta); margin: 6px 0 0; }
.stufen { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule-strong); }
@media (min-width: 800px) { .stufen { grid-template-columns: repeat(3, 1fr); } }
.stufe { padding: 20px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 800px) {
  .stufe { padding: 24px 24px 24px 0; border-right: 1px solid var(--rule); border-bottom: 0; }
  .stufe + .stufe { padding-left: 24px; }
  .stufe:last-child { border-right: 0; padding-right: 0; }
}
.stufe__nr { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-text); font-weight: 700; }
.stufe h3 { font-family: var(--serif); font-size: 22px; margin: 6px 0 8px; }
.stufe p { font-size: 15px; }
.feld { display: block; margin-bottom: 10px; }
.feld > span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 4px; }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 9px 10px; border: 1px solid #999; border-radius: 2px; font: inherit; font-size: 15px; background: #fff; color: var(--ink);
}
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { border-color: var(--international); }
.feld--pflicht > span::after { content: " *"; color: var(--brand-text); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-bottom: 10px; }
.check input { margin-top: 3px; }
.form-row, .feld > .form-row { display: flex; gap: 8px; font-size: 16px; font-weight: 400; letter-spacing: 0; margin: 0; }
.form-row input { flex: 1; min-width: 0; }
.iban {
  border: 1.5px solid var(--ink); padding: 12px 14px; margin: 10px 0 12px; font-size: 14px; background: var(--paper-2);
}
.iban dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.iban dt { font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--meta); }
.iban dd { margin: 0; font-variant-numeric: tabular-nums; }
.steuer { font-size: 13px; color: var(--meta); }

/* Auswahl der Rubriken für die Kurznachricht (Stufe 2) */
.rubrikwahl { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; }
.rubrikwahl label { display: flex; gap: 6px; align-items: center; font-size: 14px; }

/* Spam-Abfrage im Mitgliedsformular: ein Symbol aus vier anklicken */
.symbolwahl { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.symbolwahl label {
  display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid #999; border-radius: 2px;
  font-size: 24px; cursor: pointer; background: #fff;
}
.symbolwahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.symbolwahl label:has(input:checked) { border-color: var(--ink); border-width: 3px; background: var(--paper-2); }
.symbolwahl label:has(input:focus-visible) { outline: 3px solid var(--international); outline-offset: 2px; }

/* Rückmeldung der Formulare */
.hinweis { border-left: 4px solid var(--international); background: #eef6f4; padding: 12px 14px; margin-bottom: 16px; font-size: 15px; }
.hinweis--fehler { border-left-color: var(--brand); background: #fdeeee; }

/* Footer */
.site-footer { background: var(--paper-2); border-top: 4px solid var(--brand); padding: 36px 0 28px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }
.site-footer .extern::after { content: " ↗"; font-size: 11px; color: var(--meta); }
.footer-marke { font-family: var(--serif); font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.footer-marke small { display: block; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--meta); }
.footer-adresse { color: var(--meta); font-style: normal; line-height: 1.5; }
.footer-unten { border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: var(--meta); }
.footer-unten .stempel__mark { font-size: 10px; }

/* Artikelseite */
.artikel-seite { padding-top: 32px; padding-bottom: 48px; }
.artikel-kopf { max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); }
.artikel-kopf .titel { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08; margin-bottom: 14px; }
.artikel-kopf .vorspann { font-size: 19px; line-height: 1.5; margin-bottom: 14px; }
.artikel-kopf .meta { padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong); }
.artikel-bild { margin: 24px auto 0; }
.artikel-body { max-width: var(--content); margin: 28px auto 0; padding-inline: var(--gutter); font-size: 17px; line-height: 1.65; }
.artikel-body p { margin-bottom: 1.2em; }
.artikel-body > p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 3.4em; float: left; line-height: .85; padding: 4px 8px 0 0; color: var(--brand-text);
}
.artikel-body h2 { font-family: var(--serif); font-size: 26px; margin: 1.6em 0 .5em; }
.artikel-body h3 { font-family: var(--serif); font-size: 21px; margin: 1.4em 0 .4em; }
.artikel-body ul { list-style: none; padding-left: 0; margin: 0 0 1.2em; }
.artikel-body ul li { padding-left: 20px; position: relative; margin-bottom: 6px; }
.artikel-body ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--brand); }
.artikel-body ol { padding-left: 22px; margin: 0 0 1.2em; }
.artikel-body blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--brand); font-family: var(--serif); font-size: 22px; line-height: 1.35; font-style: italic;
}
.artikel-body blockquote p { margin: 0 0 6px; }
.artikel-body blockquote cite, .artikel-body blockquote footer {
  font-family: var(--sans); font-style: normal; font-size: 13px; color: var(--meta); display: block;
}
.artikel-body figure { margin: 1.6em 0; }
.artikel-body figcaption { font-size: 12px; color: var(--meta); margin-top: 6px; }
.artikel-body a { color: var(--brand-text); }

/* Weiterlesen-Hinweis bei Beiträgen, die auf eine Quelle verweisen */
.weiterlesen {
  max-width: var(--content); margin: 24px auto 0; padding: 14px 16px;
  border: 1.5px solid var(--ink); background: var(--paper-2); font-size: 15px;
}
.weiterlesen a { font-weight: 700; }

.tags { max-width: var(--content); margin: 16px auto 0; padding-inline: var(--gutter); font-size: 13px; color: var(--meta); }
.tags a { text-decoration: none; border: 1px solid var(--rule); padding: 2px 8px; border-radius: 2px; margin-right: 4px; color: var(--ink); }
.tags a:hover, .tags a:focus-visible { border-color: var(--ink); }

.weitere { border-top: 1px solid var(--rule-strong); padding: 32px 0 40px; }
.weitere__grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 16px; }
@media (min-width: 700px) { .weitere__grid { grid-template-columns: 1fr 1fr; } }
.weitere .karte { grid-template-columns: 1fr; }
.weitere .karte .titel { font-size: 24px; }
.weitere .karte .teaser { font-size: 15px; }
.zurueck { font-size: 13px; text-decoration: none; display: inline-block; margin-bottom: 16px; color: var(--meta); }
.zurueck:hover, .zurueck:focus-visible { text-decoration: underline; color: var(--brand-text); }

@media print { .ressortleiste, .mitmachen { display: none; } }

/* Ortsblock "Über uns" (Randspalte) */
.ortsblock dl { margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.ortsblock dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--meta); padding-top: 2px; }
.ortsblock dd { margin: 0; }
.ortsblock p { font-size: 14px; }

/* =========================================================================
   Gemischte Titelseite (Zeitungsaufmachung: alle Rubriken durcheinander)
   ========================================================================= */
.titelseite > * + * { margin-top: 26px; }
.block-linie { border-top: 1px solid var(--rule-strong); padding-top: 22px; }
.block-kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--meta);
}
.block-kopf .block-kopf__hinweis { margin-left: auto; letter-spacing: .02em; text-transform: none; font-weight: 500; font-size: 12px; }

.aufmacher--gross .titel { font-size: clamp(30px, 4.2vw, 44px); }
.aufmacher--gross .teaser { font-size: 18px; }
.aufmacher__marke {
  display: inline-block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800;
  color: #fff; background: var(--ink); padding: 3px 8px; margin-bottom: 10px;
}

.zweier { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) {
  .zweier { grid-template-columns: 1fr 1fr; gap: 28px; }
  .zweier > article + article { border-left: 1px solid var(--rule); padding-left: 28px; }
}
.zweier .titel { font-size: clamp(20px, 2.4vw, 25px); }
.zweier .teaser { font-size: 15px; }
.zweier .bild { margin-bottom: 12px; }

.dreier { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 560px) { .dreier { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 900px) { .dreier { grid-template-columns: repeat(3, 1fr); } }
.dreier > article { padding-top: 0; }
@media (min-width: 560px) {
  .dreier > article + article { border-left: 1px solid var(--rule); padding-left: 24px; }
  .dreier > article:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 900px) { .dreier > article + article { border-left: 1px solid var(--rule); padding-left: 24px; } }
.dreier .titel { font-size: 19px; }
.dreier .teaser { font-size: 14px; }
.dreier .bild { margin-bottom: 10px; }

.rubrikkacheln { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 700px) { .rubrikkacheln { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.rubrikkachel { border-top: 4px solid var(--regional); padding-top: 12px; }
.rubrikkachel.is-deutschland { border-top-color: var(--deutschland); }
.rubrikkachel.is-international { border-top-color: var(--international); }
.rubrikkachel h3 {
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--regional-text); margin-bottom: 4px;
}
.rubrikkachel.is-deutschland h3 { color: var(--deutschland-text); }
.rubrikkachel.is-international h3 { color: var(--international-text); }
.rubrikkachel h3 a { text-decoration: none; }
.rubrikkachel h3 a:hover, .rubrikkachel h3 a:focus-visible { text-decoration: underline; }
.rubrikkachel__sub { font-size: 12px; color: var(--meta); display: block; margin-bottom: 10px; }
.rubrikkachel .meldung { border-left: 0; padding-left: 0; }
.rubrikkachel__link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; text-decoration: none; }
.rubrikkachel__link::after { content: " →"; }
.rubrikkachel__link:hover, .rubrikkachel__link:focus-visible { text-decoration: underline; }

/* =========================================================================
   Rubrikseiten (Regional, Deutschland, International)
   ========================================================================= */
.rubrik-kopf { border-bottom: 1px solid var(--rule-strong); }
.rubrik-kopf .wide { padding-block: 22px 18px; }
.rubrik-kopf__zeile { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rubrik-kopf h1 {
  font-family: var(--serif); font-size: clamp(30px, 4.4vw, 46px); line-height: 1; letter-spacing: -.01em; color: var(--regional-text);
}
.rubrik-kopf h1::before {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 12px; background: var(--regional); vertical-align: 1px;
}
.is-deutschland .rubrik-kopf h1 { color: var(--deutschland-text); }
.is-deutschland .rubrik-kopf h1::before { background: var(--deutschland); }
.is-international .rubrik-kopf h1 { color: var(--international-text); }
.is-international .rubrik-kopf h1::before { background: var(--international); }
.rubrik-kopf__sub { font-size: 15px; color: var(--meta); }
.rubrik-kopf__pfad { margin-left: auto; font-size: 12px; color: var(--meta); }
.rubrik-kopf__pfad a { text-decoration: none; }
.rubrik-kopf__pfad a:hover, .rubrik-kopf__pfad a:focus-visible { text-decoration: underline; }
.rubrik__intro { font-size: 16px; max-width: 70ch; margin: 10px 0 0; color: var(--ink); }
.rubrik-liste > * + * { margin-top: 26px; }
.rubrik-band { height: 6px; background: var(--regional); }
.is-deutschland .rubrik-band { background: var(--deutschland); }
.is-international .rubrik-band { background: var(--international); }

/* Seitenweiterschaltung */
.blaettern { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule-strong); padding-top: 16px; margin-top: 26px; font-size: 14px; font-weight: 600; }
.blaettern a { text-decoration: none; }
.blaettern a:hover, .blaettern a:focus-visible { text-decoration: underline; }

/* Termine als Block unter den Beiträgen */
.rubrik-termine { border-top: 1px solid var(--rule-strong); padding-top: 20px; }
.rubrik-termine ul { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px) { .rubrik-termine ul { grid-template-columns: 1fr 1fr; gap: 0 28px; } }

/* Seite "Köpfe der Bewegung": goldene Marke statt Rubrikfarbe */
.is-koepfe .rubrik-kopf h1 { color: var(--gold-dark); }
.is-koepfe .rubrik-kopf h1::before {
  border-radius: 50%; background: conic-gradient(from 200deg, #8A6A14, #F1D67A 25%, #C9A227 50%, #F1D67A 75%, #8A6A14);
}

/* Inhaltsseiten (Impressum, Datenschutz, Mitglied werden, Lesezirkel ...) */
.seite { padding-block: 32px 48px; }
.seite__kopf { max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); margin-bottom: 20px; }
.seite__kopf h1 { font-family: var(--serif); font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.seite__inhalt { max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); font-size: 17px; line-height: 1.65; }
.seite__inhalt h2 { font-family: var(--serif); font-size: 26px; margin: 1.6em 0 .5em; }
.seite__inhalt h3 { font-family: var(--serif); font-size: 21px; margin: 1.4em 0 .4em; }
.seite__inhalt ul { list-style: none; padding-left: 0; margin: 0 0 1.2em; }
.seite__inhalt ul li { padding-left: 20px; position: relative; margin-bottom: 6px; }
.seite__inhalt ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--brand); }
.seite__inhalt a { color: var(--brand-text); }
.seite__inhalt dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 1.2em; }
.seite__inhalt dt { font-weight: 700; }
.seite__inhalt dd { margin: 0; }

/* Externe Ziele im Menü und in Buttons kennzeichnen */
.menu .extern::after, .btn.extern::after { content: " ↗"; font-size: 11px; }