/*
Theme Name: JRK Ettlingen
Theme URI: https://github.com/fsprogramming-de/jrk-ettlingen
Author: FSProgramming (Dominik Lehnen)
Author URI: https://fsprogramming.de
Description: Eigenes WordPress-Theme für das Jugendrotkreuz Ettlingen. Umsetzung des in DESIGN.md eingefrorenen Design-Systems. Keine externen Ressourcen, kein Page Builder, kein Build-Schritt. Selbst gehostete Quicksand-Schrift (SIL OFL 1.1).
Version: 0.4.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jrk-ettlingen
Tags: custom-menu, sticky-header, translation-ready
*/

/* =========================================================================
   1 · Farben (alle Werte aus DESIGN.md, Abschnitt 1)
   ========================================================================= */
:root {
	/* Grundpalette */
	--jrk-tuerkis:        #00a0aa; /* Primär: Links, Buttons, Überschriften-Akzent, Footer, Datumsblock */
	--jrk-tuerkis-dark:   #007c86; /* Hover Buttons/Menü, Menü-Schließen-Button */
	--jrk-tuerkis-light:  #cdebf0; /* Sektionsfläche, Menü-/Zeilen-Hover, Login-Hintergrund */
	--jrk-beige:          #e0ddd6; /* Trennlinien, Rahmen, Badges, inaktive Datumsblöcke */
	--jrk-beige-light:    #efeeea; /* Untermenü-Fläche, Hinweisboxen, Logo-Platzhalter */
	--jrk-text:           #3d3d3f; /* Fließtext, Überschriften */
	--jrk-text-warm:      #554f4a; /* Sekundärtext: Datum, Ort, Meta */
	--jrk-weiss:          #ffffff;
	--jrk-rot:            #e60005; /* nur Logo */
	--jrk-blau:           #94ccee; /* seltener Akzent, aktuell ungenutzt */
	--jrk-lachs:          #e3644f; /* seltener Akzent, aktuell ungenutzt */

	/* Zusätzlich in Gebrauch (DESIGN.md, Abschnitt 1) */
	--jrk-overlay:        rgba(61, 61, 63, .45);  /* Abdunklung hinter dem Navigationspanel */
	--jrk-footer-line:    rgba(255, 255, 255, .35); /* Trennlinie im Footer */
	--jrk-panel-schatten: rgba(61, 61, 63, .18);  /* Schatten Navigationspanel */
	--jrk-platzhalter-a:  #d8d6d1; /* Streifenmuster der Bildplatzhalter */
	--jrk-platzhalter-b:  #d0cec9;
	--jrk-platzhalter-txt:#6f6a63; /* Platzhalter-Beschriftung */
	--jrk-strich:         #b9b4a9; /* gestrichelter Rand Logo-Platzhalter, Breadcrumb-Trenner */
	--jrk-logo-txt:       #8b857a; /* Logo-Platzhalter-Text */

	/* Layout-Konstanten (DESIGN.md, Abschnitt 4) */
	--jrk-max:            1180px;  /* Inhaltsbreite */
	--jrk-lesespalte:     760px;   /* Lesespalte Fließtext */
	--jrk-seiteninhalt:   860px;   /* Startseiten-Intro */

	/* Bewegung (DESIGN.md, Abschnitt 5: alle Zustände all .2s ease-in-out) */
	--jrk-transition:     all .2s ease-in-out;
}

/* =========================================================================
   2 · Reset und Grundlagen
   ========================================================================= */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
	margin: 0;
	font-family: "Quicksand", "Trebuchet MS", sans-serif;
	font-size: 16px; /* 1rem = 16px */
	line-height: 1.7;
	color: var(--jrk-text);
	background: var(--jrk-weiss);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--jrk-tuerkis); text-decoration: none; }
a:hover { color: var(--jrk-tuerkis-dark); text-decoration: none; }
em { color: var(--jrk-tuerkis); font-style: normal; }
img { max-width: 100%; height: auto; display: block; }
input, textarea, select, button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--jrk-tuerkis); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* =========================================================================
   3 · Typografie (DESIGN.md, Abschnitt 2)
   ========================================================================= */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.26; text-wrap: pretty; color: var(--jrk-text); }
h1 { font-size: 2em;     margin: .67em 0; }
h2 { font-size: 1.4rem;  margin: 0 0 .5em; }
h3 { font-size: 1.2rem;  margin: .735rem 0 .368rem; }
h4 { font-size: 1.14rem; margin: .735rem 0 .368rem; }
p  { text-wrap: pretty; }

/* =========================================================================
   4 · Grundlayout / Sticky Footer
   ========================================================================= */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-footer { margin-top: auto; } /* schiebt den Footer bei kurzem Inhalt nach unten */

.container { max-width: var(--jrk-max); margin: 0 auto; padding: 0 18px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 100;
	width: auto; height: auto; margin: 0; clip: auto; clip-path: none;
	padding: 10px 18px;
	background: var(--jrk-tuerkis); color: var(--jrk-weiss);
	font-weight: 700; font-size: .82rem;
}

/* =========================================================================
   5 · Header (DESIGN.md, Abschnitt 3 · Header)
   ========================================================================= */
.site-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--jrk-weiss);
	border-bottom: 1px solid var(--jrk-beige);
}
.site-header__inner {
	max-width: var(--jrk-max); margin: 0 auto;
	padding: 12px 18px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-logo {
	width: 54px; height: 54px; flex: none;
	background: var(--jrk-beige-light);
	border: 1px dashed var(--jrk-strich);
	border-radius: 50%; /* einzige erlaubte Rundung, DESIGN.md Abschnitt 5 */
	display: flex; align-items: center; justify-content: center;
	font: 400 8px/1.2 ui-monospace, Menlo, monospace;
	color: var(--jrk-logo-txt); text-align: center; letter-spacing: .02em;
}
.site-brand .custom-logo { height: 54px; width: auto; max-width: 160px; } /* echtes Logo nicht rund erzwingen */
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text__main { font-weight: 700; font-size: .95rem; color: var(--jrk-text); }
.brand-text__sub  { font-weight: 400; font-size: .8rem;  color: var(--jrk-text-warm); }

.site-header__actions { display: flex; align-items: center; gap: 16px; }
.site-header__logout { font-size: .78rem; font-weight: 700; color: var(--jrk-tuerkis); }
.site-header__logout:hover { color: var(--jrk-tuerkis-dark); }

.menu-toggle {
	display: flex; align-items: center; gap: 10px;
	border: 0; background: transparent; padding: 0; cursor: pointer;
}
.menu-toggle__label {
	font-weight: 700; font-size: .78rem; letter-spacing: .08em;
	color: var(--jrk-text); text-transform: uppercase;
}
.menu-toggle__burger {
	width: 2.353rem; height: 2.353rem; flex: none;
	background: var(--jrk-tuerkis);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	transition: var(--jrk-transition);
}
.menu-toggle:hover .menu-toggle__burger { background: var(--jrk-tuerkis-dark); }
.menu-toggle__burger span { display: block; width: 19px; height: 2px; background: var(--jrk-weiss); }

/* =========================================================================
   6 · Navigations-Overlay (DESIGN.md, Abschnitt 3 · Navigations-Overlay)
   Verhalten übernommen aus design/startseite.html
   ========================================================================= */
.nav-backdrop {
	position: fixed; inset: 0; z-index: 70;
	background: var(--jrk-overlay);
	opacity: 0; pointer-events: none;
	transition: opacity .2s ease-in-out;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

.nav-panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
	width: min(340px, 88vw);
	background: var(--jrk-weiss);
	border-left: 1px solid var(--jrk-beige);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .28s ease-in-out;
}
.nav-panel.is-open { transform: translateX(0); box-shadow: 0 0 26px var(--jrk-panel-schatten); }

.nav-panel__head {
	display: flex; justify-content: flex-end;
	padding: 12px 14px; border-bottom: 1px solid var(--jrk-beige);
}
.nav-close {
	width: 2.353rem; height: 2.353rem; border: 0;
	background: var(--jrk-tuerkis-dark); color: var(--jrk-weiss);
	font-size: 1.15rem; line-height: 1; cursor: pointer;
}

.main-nav__list, .sub-menu { list-style: none; margin: 0; padding: 0; }
.menu-item { border-bottom: 1px solid var(--jrk-beige); }
.menu-item__row { display: flex; align-items: stretch; }
.menu-item__link {
	flex: 1; padding: 14px 18px;
	font-weight: 700; font-size: .95rem;
	color: var(--jrk-tuerkis);
	transition: var(--jrk-transition);
}
.menu-item__link:hover { background-color: var(--jrk-tuerkis-light); color: var(--jrk-tuerkis); }
.menu-item.current-menu-item > .menu-item__row > .menu-item__link { background-color: var(--jrk-tuerkis-light); }

.menu-item__toggle, .menu-item__sign {
	width: 52px; flex: none;
	border: 0; border-left: 1px solid var(--jrk-beige);
	background: transparent; color: var(--jrk-tuerkis);
	font-size: 1.2rem; font-weight: 700; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.menu-item__toggle { cursor: pointer; transition: var(--jrk-transition); }
.menu-item__toggle:hover { background-color: var(--jrk-tuerkis-light); }

.sub-menu { padding: 4px 0 10px; background: var(--jrk-beige-light); display: none; }
.menu-item.is-open > .sub-menu { display: block; }
.sub-menu a {
	display: block; padding: 9px 18px 9px 32px;
	font-size: .88rem; color: var(--jrk-text);
	transition: var(--jrk-transition);
}
.sub-menu a:hover { background-color: var(--jrk-tuerkis-light); color: var(--jrk-tuerkis); }

.nav-panel__foot { padding: 18px; font-size: .78rem; color: var(--jrk-text-warm); line-height: 1.6; }

/* =========================================================================
   7 · Buttons und Links (DESIGN.md, Abschnitt 3 · Buttons / Links)
   ========================================================================= */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 2.353rem; padding: 0 20px;
	background: var(--jrk-tuerkis); color: var(--jrk-weiss);
	border: 1px solid var(--jrk-tuerkis); border-radius: 0;
	font-weight: 700; font-size: .88rem; line-height: 1;
	cursor: pointer; text-decoration: none;
	transition: var(--jrk-transition);
}
.btn:hover { background: var(--jrk-tuerkis-dark); border-color: var(--jrk-tuerkis-dark); color: var(--jrk-weiss); }
.btn--sekundaer {
	background: var(--jrk-weiss); color: var(--jrk-tuerkis);
	border-color: var(--jrk-beige); font-size: .82rem;
}
.btn--sekundaer:hover { background: var(--jrk-tuerkis); color: var(--jrk-weiss); border-color: var(--jrk-tuerkis); }

.weiterlesen { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--jrk-tuerkis); }
.weiterlesen:hover { color: var(--jrk-tuerkis-dark); }
.weiterlesen::before { content: "\203A"; font-size: 1rem; line-height: 1; } /* › */

/* =========================================================================
   8 · Formularfelder (DESIGN.md, Abschnitt 3 · Formularfeld)
   ========================================================================= */
.feld-label { display: block; font-size: .82rem; font-weight: 700; color: var(--jrk-text); margin-bottom: 6px; }
.feld, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], textarea {
	height: 2.353rem; padding: 0 12px; font-size: .88rem;
	color: var(--jrk-text); background: var(--jrk-weiss);
	border: 1px solid var(--jrk-beige); border-radius: 0;
	width: 100%; max-width: 100%;
}
textarea { height: auto; padding: 10px 12px; line-height: 1.6; }
input:focus, textarea:focus { outline: 2px solid var(--jrk-tuerkis); outline-offset: 1px; }

/* =========================================================================
   9 · Bildplatzhalter (DESIGN.md, Abschnitt 3 · Bildplatzhalter)
   ========================================================================= */
.platzhalter {
	width: 100%;
	background: var(--jrk-platzhalter-a);
	background-image: repeating-linear-gradient(135deg, var(--jrk-platzhalter-a) 0 12px, var(--jrk-platzhalter-b) 12px 24px);
	display: flex; align-items: center; justify-content: center;
	font: 400 11px/1.5 ui-monospace, Menlo, monospace;
	color: var(--jrk-platzhalter-txt); text-align: center; padding: 0 12px;
}
.platzhalter--hero {
	background-image: repeating-linear-gradient(135deg, var(--jrk-platzhalter-a) 0 14px, var(--jrk-platzhalter-b) 14px 28px);
	font-size: 12px; line-height: 1.6;
}
.ratio-hero { aspect-ratio: 1920 / 560; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }

/* =========================================================================
   10 · Hero (DESIGN.md, Abschnitt 3 · Hero)
   ========================================================================= */
.hero__band { height: 34px; background: var(--jrk-tuerkis); }
.hero__media { position: relative; }
.hero__credit {
	position: absolute; right: 6px; top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-size: 9px; color: var(--jrk-platzhalter-txt); letter-spacing: .04em;
}

/* =========================================================================
   11 · Sektionen (DESIGN.md, Abschnitt 3 · Sektionsfläche)
   ========================================================================= */
.section { }
.section--flaeche { background: var(--jrk-tuerkis-light); padding: 48px 0 54px; }
.section--flaeche-eng { background: var(--jrk-tuerkis-light); padding: 30px 22px 34px; }
.section-titel { margin: 0 0 22px; font-size: 1.4rem; font-weight: 700; line-height: 1.26; color: var(--jrk-text); }
/* „Aktuelles" steht laut design/startseite.html mit 28px etwas luftiger als „Nächste Termine" (22px). */
.section--flaeche .section-titel { margin-bottom: 28px; }

.startintro { max-width: var(--jrk-seiteninhalt); margin: 0 auto; padding: 44px 0 12px; }
.startintro h1 { margin: 0 0 .5em; }
.startintro p  { margin: 0; font-size: .88rem; line-height: 1.75; }
.themen { padding: 34px 0 46px; }
.naechste-termine { max-width: var(--jrk-max); margin: 0 auto; padding: 52px 18px 58px; }

/* =========================================================================
   12 · Teaser (Startseite) (DESIGN.md, Abschnitt 3 · Teaser)
   ========================================================================= */
.teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.teaser { display: flex; flex-direction: column; gap: 12px; }
.teaser__title { margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.26; color: var(--jrk-tuerkis); }
.teaser__text  { margin: 0; font-size: .88rem; line-height: 1.7; color: var(--jrk-text); }

/* =========================================================================
   13 · News-Karte (DESIGN.md, Abschnitt 3 · News-Karte)
   ========================================================================= */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.news-card { display: flex; flex-direction: column; gap: 10px; background: var(--jrk-weiss); padding: 16px; }
.news-card__date  { font-size: .78rem; color: var(--jrk-text-warm); }
.news-card__title { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.26; color: var(--jrk-tuerkis); }
.news-card__text  { margin: 0; font-size: .88rem; line-height: 1.7; color: var(--jrk-text); }
.news-card .weiterlesen { margin-top: auto; padding-top: 6px; }

/* =========================================================================
   14 · Termin-Liste kompakt (DESIGN.md, Abschnitt 3 · Listenzeile)
   ========================================================================= */
.termin-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--jrk-beige); }
.termin-liste__item { border-bottom: 1px solid var(--jrk-beige); }
.termin-liste__link {
	display: grid; grid-template-columns: 120px 1fr auto; gap: 6px 22px; align-items: baseline;
	padding: 16px 4px; color: var(--jrk-text); transition: var(--jrk-transition);
}
.termin-liste__link:hover { background-color: var(--jrk-tuerkis-light); }
.termin-liste__date { font-weight: 700; font-size: .88rem; color: var(--jrk-tuerkis); white-space: nowrap; }
.termin-liste__body { display: flex; flex-direction: column; gap: 3px; }
.termin-liste__title { font-weight: 700; font-size: .95rem; }
.termin-liste__meta { font-size: .82rem; color: var(--jrk-text-warm); }
.termin-liste__chevron { font-size: 1rem; color: var(--jrk-tuerkis); }

/* =========================================================================
   15 · Termin-Karte (DESIGN.md, Abschnitt 3 · Termin-Karte) – für spätere Sessions
   ========================================================================= */
.termin-karten { display: flex; flex-direction: column; gap: 14px; }
.termin-karte {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start;
	border: 1px solid var(--jrk-beige); background: var(--jrk-weiss);
	padding: 16px 18px; transition: var(--jrk-transition);
}
.termin-karte:hover { background-color: var(--jrk-tuerkis-light); }
.termin-karte__datum {
	width: 74px; flex: none; background: var(--jrk-tuerkis); color: var(--jrk-weiss);
	text-align: center; padding: 10px 6px;
}
.termin-karte__tag { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.termin-karte__monat { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.termin-karte__jahr { font-size: .7rem; opacity: .85; }
.termin-karte__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.termin-karte__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.termin-karte__titel { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.26; color: var(--jrk-tuerkis); }
.termin-karte__meta { font-size: .82rem; color: var(--jrk-text-warm); line-height: 1.6; }
.termin-badge { font-size: .72rem; font-weight: 700; color: var(--jrk-text); background: var(--jrk-beige); padding: 3px 9px; white-space: nowrap; }
.termin-karte--vergangen { opacity: .85; }
.termin-karte--vergangen:hover { background-color: var(--jrk-weiss); }
.termin-karte--vergangen .termin-karte__datum { background: var(--jrk-beige); color: var(--jrk-text-warm); }
.termin-karte--vergangen .termin-karte__titel { color: var(--jrk-text-warm); }
.termin-badge--vergangen { color: var(--jrk-text-warm); background: var(--jrk-beige-light); }

/* Filterleiste (Sekundär-Buttons) */
.filterleiste { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 0 30px; border-bottom: 1px solid var(--jrk-beige); margin-bottom: 34px; }

/* =========================================================================
   16 · Kachel (Interner Bereich) (DESIGN.md, Abschnitt 3 · Kachel) – für spätere Sessions
   ========================================================================= */
.kachel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.kachel {
	display: flex; flex-direction: column; gap: 8px;
	border: 1px solid var(--jrk-beige); background: var(--jrk-weiss);
	padding: 22px 20px 20px; color: var(--jrk-text); transition: var(--jrk-transition);
}
.kachel:hover { background-color: var(--jrk-tuerkis-light); }
.kachel__icon {
	width: 2.353rem; height: 2.353rem; background: var(--jrk-tuerkis); color: var(--jrk-weiss);
	display: flex; align-items: center; justify-content: center;
	font-size: 1rem; font-weight: 700; margin-bottom: 6px;
}
.kachel__titel { font-size: 1.2rem; font-weight: 700; line-height: 1.26; color: var(--jrk-tuerkis); }
.kachel__text { font-size: .82rem; line-height: 1.65; color: var(--jrk-text-warm); }

/* =========================================================================
   17 · Unterseite / Inhalt (DESIGN.md, Abschnitt 3 + 4)
   ========================================================================= */
.breadcrumb {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
	padding: 18px 0 0; font-size: .78rem; color: var(--jrk-text-warm);
}
.breadcrumb__sep { color: var(--jrk-strich); }

.page-title { margin: .67em 0; font-size: 2em; font-weight: 700; line-height: 1.26; color: var(--jrk-text); }

.seiten-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 900px) {
	.seiten-grid { grid-template-columns: 280px minmax(0, 1fr); }
}
.seiten-aside { display: flex; flex-direction: column; gap: 26px; max-width: 280px; }
.seiten-aside__block { }
.seiten-aside__block + .seiten-aside__block { border-top: 1px solid var(--jrk-beige); padding-top: 20px; }
.seiten-aside h2 { margin: 0 0 12px; font-size: 1.2rem; color: var(--jrk-text); }
.teilen-liste { display: flex; gap: 8px; }
.teilen-liste a {
	width: 2.353rem; height: 2.353rem; background: var(--jrk-tuerkis); color: var(--jrk-weiss);
	display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700;
	transition: var(--jrk-transition);
}
.teilen-liste a:hover { background: var(--jrk-tuerkis-dark); color: var(--jrk-weiss); }

.inhalt { max-width: var(--jrk-lesespalte); }
.inhalt p { margin: 0 0 20px; font-size: .88rem; line-height: 1.75; }
.inhalt h2 { margin: 0 0 14px; font-size: 1.4rem; color: var(--jrk-text); }
.inhalt h3 { margin: .735rem 0 .368rem; font-size: 1.2rem; color: var(--jrk-text); }
.inhalt ul, .inhalt ol { margin: 0 0 20px; padding-left: 22px; font-size: .88rem; line-height: 1.75; }
.inhalt li { margin: 0 0 6px; }
.inhalt img { margin: 0 0 8px; }
.inhalt a { text-decoration: underline; text-decoration-color: var(--jrk-beige); text-underline-offset: 2px; }
.inhalt blockquote {
	margin: 0 0 20px; padding: 4px 0 4px 18px;
	border-left: 3px solid var(--jrk-tuerkis); color: var(--jrk-text-warm);
}
.bildnachweis { margin: 0 0 30px; font-size: .75rem; color: var(--jrk-text-warm); }
.inhalt-fuss {
	border-top: 1px solid var(--jrk-beige); margin-top: 34px; padding-top: 14px;
	display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--jrk-text-warm);
}

/* WordPress-Standardklassen für Inhalte */
.alignleft  { float: left;  margin: 0 20px 12px 0; }
.alignright { float: right; margin: 0 0 12px 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .75rem; color: var(--jrk-text-warm); margin: 6px 0 0; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* Beitragsliste (index.php / Archive) */
.beitragsliste { display: flex; flex-direction: column; gap: 30px; max-width: var(--jrk-max); }
.beitrag { display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--jrk-beige); padding-bottom: 26px; }
.beitrag:last-child { border-bottom: 0; }
.beitrag__meta { font-size: .78rem; color: var(--jrk-text-warm); }
.beitrag__title { margin: 0; font-size: 1.4rem; }
.beitrag__title a { color: var(--jrk-tuerkis); }
.beitrag__title a:hover { color: var(--jrk-tuerkis-dark); }
.beitrag__text { margin: 0; font-size: .88rem; line-height: 1.75; }

.hinweisbox { margin: 0; padding: 16px 18px; background: var(--jrk-beige-light); border: 1px solid var(--jrk-beige); font-size: .88rem; line-height: 1.7; color: var(--jrk-text-warm); }

/* Seiten-Blättern */
.blaettern { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.blaettern .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.353rem; height: 2.353rem; padding: 0 10px;
	border: 1px solid var(--jrk-beige); background: var(--jrk-weiss); color: var(--jrk-tuerkis);
	font-size: .82rem; font-weight: 700; transition: var(--jrk-transition);
}
.blaettern .page-numbers:hover, .blaettern .page-numbers.current {
	background: var(--jrk-tuerkis); color: var(--jrk-weiss); border-color: var(--jrk-tuerkis);
}

/* =========================================================================
   18 · 404 / Fehlerseite (kein eigener Design-Screen – konsistent aus Tokens)
   ========================================================================= */
.fehler { max-width: var(--jrk-lesespalte); margin: 0 auto; padding: 56px 0 68px; }
.fehler__code { margin: 0; font-size: 4rem; font-weight: 700; line-height: 1; color: var(--jrk-tuerkis); }
.fehler h1 { margin: .3em 0 .4em; }
.fehler p { font-size: .88rem; line-height: 1.75; margin: 0 0 26px; }
.fehler__suche { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; max-width: 460px; }
.fehler__suche input[type="search"] { flex: 1; min-width: 200px; }

/* =========================================================================
   19 · Footer (DESIGN.md, Abschnitt 3 · Footer)
   ========================================================================= */
.site-footer { background: var(--jrk-tuerkis); color: var(--jrk-weiss); padding: 46px 0 30px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.footer-col__title { margin: 0 0 12px; font-size: .95rem; font-weight: 700; line-height: 1.26; color: var(--jrk-weiss); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: .82rem; color: var(--jrk-weiss); line-height: 1.4; }
.footer-col a:hover { color: var(--jrk-tuerkis-light); }
.footer-bottom {
	margin-top: 38px; padding-top: 18px;
	border-top: 1px solid var(--jrk-footer-line);
	font-size: .75rem; color: var(--jrk-weiss); opacity: .9;
}

/* Kompakte Footer-Variante (Login-Seite, DESIGN.md Abschnitt 3 · Footer) */
.site-footer--kompakt { padding: 30px 0 26px; }
.site-footer--kompakt .container {
	display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: center;
}
.site-footer--kompakt .footer-bottom { margin: 0; padding: 0; border: 0; }
.site-footer--kompakt nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer--kompakt nav a { font-size: .82rem; color: var(--jrk-weiss); }
.site-footer--kompakt nav a:hover { color: var(--jrk-tuerkis-light); }

/* =========================================================================
   20 · Inhaltstypen (Session 2) – Archive und Detailseiten
   Alle Bausteine folgen dem Design-System (Abschnitt 3) und der Terminliste
   aus design/terminliste.html.
   ========================================================================= */

/* Unterer Abstand der Archiv-/Detailseiten (nicht auf der Startseite). */
body:not(.home) .site-main { padding-bottom: 56px; }

/* Archiv-Einleitung unter dem Seitentitel. */
.archiv-intro { max-width: var(--jrk-lesespalte); margin: 0 0 28px; font-size: .88rem; line-height: 1.75; }

/* Aktiver Filterknopf = Primärvariante (DESIGN.md: aktiv = Primär-Button). */
.filterleiste .is-aktiv,
.filterleiste .is-aktiv:hover {
	background: var(--jrk-tuerkis); color: var(--jrk-weiss); border-color: var(--jrk-tuerkis);
}

/* „Alle …"-Verweis unter einem Startseiten-Block. */
.section-mehr { margin: 22px 0 0; }

/* Termin-Karten: verlinkter Titel und Kurztext (ergänzt Abschnitt 15). */
.termin-abschnitt { margin-bottom: 52px; }
.termin-karte__titel a { color: inherit; }
.termin-karte__titel a:hover { color: var(--jrk-tuerkis-dark); }
.termin-karte__text { margin: 2px 0 0; font-size: .88rem; line-height: 1.7; color: var(--jrk-text); }

/* Vollbreiter Block „Vergangene Termine" (design/terminliste.html). */
.section--flaeche-breit { background: var(--jrk-tuerkis-light); margin: 8px -18px 0; padding: 30px 22px 34px; }
.section--flaeche-breit__inner { max-width: 1144px; margin: 0 auto; }

/* News-Karten: Bild und verlinkter Titel (ergänzt Abschnitt 13). */
.news-card__bild { display: block; }
.news-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.news-card__title a { color: var(--jrk-tuerkis); }
.news-card__title a:hover { color: var(--jrk-tuerkis-dark); }
/* Im Archiv stehen die Karten auf Weiß und brauchen eine Rahmung. */
.news-grid--archiv .news-card { border: 1px solid var(--jrk-beige); }

/* Dokumentliste (Listenzeile aus DESIGN.md, Abschnitt 3). */
.dok-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--jrk-beige); }
.dok-liste__item { border-bottom: 1px solid var(--jrk-beige); }
.dok-liste__link {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 18px; align-items: center;
	padding: 14px 4px; color: var(--jrk-text); transition: var(--jrk-transition);
}
.dok-liste__link:hover { background-color: var(--jrk-tuerkis-light); }
.dok-liste__link--leer { cursor: default; }
.dok-liste__link--leer:hover { background-color: transparent; }
.dok-liste__icon {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 3rem; height: 2.353rem; padding: 0 8px;
	background: var(--jrk-beige); color: var(--jrk-text-warm);
	font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}
.dok-liste__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dok-liste__titel { font-weight: 700; font-size: .95rem; color: var(--jrk-text); }
.dok-liste__meta { font-size: .82rem; color: var(--jrk-text-warm); }
.dok-liste__chevron { font-size: 1rem; color: var(--jrk-tuerkis); }

/* Termin-Detail. */
.termin-detail__kopf { display: flex; gap: 18px; align-items: flex-start; margin: .3em 0 6px; }
.termin-detail__datum { margin-top: 6px; }
.termin-detail__titelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.termin-detail__titelzeile .page-title { margin: 0; }
.termin-detail__text { margin-top: 24px; }

/* Definitionsliste für Termin-/Dokument-Detail. */
.termin-detail__meta { margin: 22px 0; display: grid; gap: 10px; max-width: var(--jrk-lesespalte); }
.termin-detail__meta > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 16px; }
.termin-detail__meta dt { margin: 0; font-weight: 700; font-size: .82rem; color: var(--jrk-text); }
.termin-detail__meta dd { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--jrk-text-warm); }

.termin-detail__zurueck,
.news-detail__zurueck,
.dok-detail__zurueck,
.galerie-detail__zurueck { margin: 30px 0 0; }

/* News-Detail. */
.beitragsbild { margin: 0 0 24px; }
.beitragsbild img { width: 100%; }
.news-detail__meta { font-size: .82rem; color: var(--jrk-text-warm); margin: 0 0 18px; }
.news-detail__teaser { max-width: var(--jrk-lesespalte); margin: 0 0 18px; font-size: .95rem; font-weight: 700; line-height: 1.6; color: var(--jrk-text); }

/* Galerie-Detail. */
.galerie-detail__datum { margin: 0 0 8px; font-size: .82rem; color: var(--jrk-text-warm); }
.galerie-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 20px 0 0; }
.galerie-raster__item { margin: 0; }
.galerie-raster__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* =========================================================================
   21 · Interner Bereich, Anmeldung, Rückmeldung (Session 3)
   Alle Bausteine folgen dem Design-System (Abschnitt 3) sowie den Screens
   design/login.html und design/intern.html. Keine neuen Farben.
   ========================================================================= */

/* Abmelden-Link im Header: siehe Abschnitt 5 (.site-header__logout). */

/* -- Anmeldeseite (design/login.html) -- */
.login-main {
	flex: 1; background: var(--jrk-tuerkis-light);
	display: flex; align-items: center; justify-content: center;
	padding: 56px 18px 68px;
}
.login-wrap { width: 100%; max-width: 430px; }
.login-card { background: var(--jrk-weiss); border: 1px solid var(--jrk-beige); padding: 34px 30px 30px; }
.login-card__titel { margin: 0 0 6px; font-size: 1.4rem; color: var(--jrk-text); }
.login-card__text { margin: 0 0 26px; font-size: .88rem; line-height: 1.7; color: var(--jrk-text-warm); }
.login-form { display: flex; flex-direction: column; gap: 18px; }
.login-form__feld { display: flex; flex-direction: column; gap: 6px; }
.login-form__remember { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--jrk-text-warm); }
.login-card__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--jrk-beige); font-size: .82rem; }
.login-fehler {
	margin: 0 0 20px; padding: 12px 14px;
	background: var(--jrk-beige-light); border: 1px solid var(--jrk-lachs);
	font-size: .82rem; line-height: 1.6; color: var(--jrk-text);
}
.login-hinweis {
	margin: 20px 0 0; padding: 16px 18px;
	background: var(--jrk-beige-light); border: 1px solid var(--jrk-beige);
	font-size: .82rem; line-height: 1.7; color: var(--jrk-text-warm);
}
.login-zurueck { margin: 22px 0 0; text-align: center; font-size: .82rem; }

/* -- Übersicht und Blöcke -- */
.intern-intro { max-width: var(--jrk-lesespalte); margin: 0 0 34px; font-size: .88rem; line-height: 1.75; color: var(--jrk-text-warm); }
.intern-block { margin-bottom: 38px; }
.intern-block--flaeche { background: var(--jrk-tuerkis-light); padding: 26px 22px 30px; }
.intern-block__kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.intern-block__kopf .section-titel { margin: 0; }
.intern-hinweis { margin: 14px 0 0; font-size: .82rem; color: var(--jrk-text-warm); }

/* Hinweis-/Statusmeldungen im internen Bereich. */
.intern-notice { margin: 0 0 24px; padding: 12px 16px; font-size: .85rem; line-height: 1.6; border: 1px solid var(--jrk-beige); }
.intern-notice--ok { background: var(--jrk-tuerkis-light); border-color: var(--jrk-tuerkis); color: var(--jrk-text); }
.intern-notice--fehler { background: var(--jrk-beige-light); border-color: var(--jrk-lachs); color: var(--jrk-text); }

/* -- Rückmeldung -- */
.rsvp-block { margin-top: 10px; }
.rsvp-kind { padding-top: 10px; }
.rsvp-kind + .rsvp-kind { margin-top: 10px; border-top: 1px solid var(--jrk-beige); }
.rsvp-kind__name { margin: 0 0 6px; font-size: .82rem; font-weight: 700; color: var(--jrk-text); }
.rsvp { margin: 0; }
.rsvp__status { margin: 0 0 8px; font-size: .82rem; color: var(--jrk-text-warm); }
.rsvp__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.rsvp__buttons .btn { font-size: .78rem; padding: 0 14px; }
.rsvp__buttons .is-aktiv,
.rsvp__buttons .is-aktiv:hover { background: var(--jrk-tuerkis); color: var(--jrk-weiss); border-color: var(--jrk-tuerkis); }
.rsvp .feld { margin-bottom: 10px; }
.rsvp__hinweis { margin: 6px 0 0; font-size: .82rem; color: var(--jrk-text-warm); }
.rsvp__zu { margin: 6px 0 0; font-size: .82rem; color: var(--jrk-text-warm); }
.rueckmeldung { margin-top: 34px; }
.rueckmeldung__export { margin: 18px 0 0; }

/* -- Tabelle (Leitungsübersicht) -- */
.tabelle-wrap { overflow-x: auto; }
.intern-tabelle { width: 100%; border-collapse: collapse; font-size: .82rem; }
.intern-tabelle th, .intern-tabelle td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--jrk-beige); vertical-align: top; }
.intern-tabelle thead th { font-weight: 700; color: var(--jrk-text); border-bottom: 2px solid var(--jrk-beige); white-space: nowrap; }
.intern-tabelle td { color: var(--jrk-text-warm); }

/* -- Profil-Formular -- */
.profil-form { display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.profil-form__feld { display: flex; flex-direction: column; gap: 6px; margin: 0; }

/* =========================================================================
   22 · Pflegbare Startseite/Footer (Session 4)
   Nur der Mechanismus für reale Bilder und den optionalen Kontaktblock –
   Farben, Abstände und Typografie stammen unverändert aus dem Design-System.
   ========================================================================= */
/* Reale Bilder füllen die vorhandenen Seitenverhältnisse der Platzhalter. */
.hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.teaser__bild { width: 100%; }
.teaser__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Kontaktblock im Footer (gleiche Typografie/Farbe wie die Linkspalten). */
.footer-kontakt { margin-top: 32px; }
.footer-kontakt__body { font-style: normal; display: flex; flex-direction: column; gap: 8px; }
.footer-kontakt__zeile { font-size: .82rem; color: var(--jrk-weiss); line-height: 1.4; }
.footer-kontakt__zeile a { color: var(--jrk-weiss); }
.footer-kontakt__zeile a:hover { color: var(--jrk-tuerkis-light); }