/* Ergänzungen für die Mehrseiten-Struktur.
   main.css bleibt unverändert die Design-Quelle aus ProcessWire — hier steht
   nur, was der One-Pager noch nicht brauchte. */

/* --- Trenner-Hintergründe -------------------------------------------------
   Die Zickzack-PNGs sind transparent. Der Hintergrund des Trenner-Divs ist
   die Farbe der Gegenseite; die Form im PNG die Farbe des Bandes, das der
   Trenner einführt bzw. abschließt. Selektoren mit `.section-image` davor,
   damit sie das `.top.sie`-Rot aus main.css überschreiben können. */
/* Beige kommt aus der Seite selbst: `body` trägt die Textur. Ein eigener
   Hintergrund wäre dort sogar schädlich — eine zweite gekachelte Textur läuft
   phasenverschoben zur Body-Kachel und erzeugt eine sichtbare Naht.
   Weiß dagegen wird gesetzt: siehe Header-Korrektur weiter unten.
   Der `!important`-freie Vorrang vor `.top.sie` (main.css, #B10023) ergibt
   sich aus gleicher Spezifität und späterer Position. */
.section-image.dvbg-white  { background: #fff; }
.section-image.dvbg-beige  { background: transparent; }
.section-image.dvbg-red    { background: #B10023; }
.section-image.dvbg-dark   { background: #591631; }
.section-image.dvbg-grey   { background: #3F4445; }

/* --- Navigation -----------------------------------------------------------
   Der One-Pager hatte vier Anker. Mit echten Seiten und Unterpunkten braucht
   es Aufklappmenüs und ein mobiles Menü. */
.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	color: #591631;
	font: 300 20px/1 "urbana", Arial, sans-serif;
}

nav ul li { position: relative; }

nav ul ul {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 100;
	min-width: 220px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #591631;
	border-radius: 0 0 6px 6px;
}

nav ul li:hover > ul,
nav ul li:focus-within > ul { display: block; }

nav ul ul li { display: block; border: 0; padding: 0; }

nav ul ul a {
	display: block;
	padding: 6px 16px;
	color: #fff;
	white-space: nowrap;
}

nav a[aria-current="page"] { text-decoration: underline; }

@media (max-width: 767px) {
	.nav-toggle { display: block; }
	nav { width: 100%; }
	nav ul { display: none; }
	nav.open ul { display: block; }
	nav ul ul { position: static; display: block; background: none; padding: 0 0 0 16px; }
	nav ul ul a { color: inherit; padding: 4px 0; }
}

/* --- Blättern -------------------------------------------------------------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px 10px 0 10px;
	list-style: none;
}

.pagination a,
.pagination span {
	display: block;
	min-width: 38px;
	padding: 6px 10px;
	text-align: center;
	border-radius: 6px;
	background: #fff;
	color: #591631;
}

.pagination .current { background: #591631; color: #fff; }
.pagination .gap { background: none; color: inherit; min-width: 0; padding: 6px 2px; }

/* --- Suche ----------------------------------------------------------------- */
.searchbox {
	display: flex;
	gap: 8px;
	width: 100%;
	padding: 0 10px 16px 10px;
}

.searchbox input[type="search"] {
	flex: 1 1 auto;
	width: auto;
	padding: 6px 10px;
	border: 1px solid #E4003E;
	border-radius: 5px;
	font: 18px/26px Neuton, Georgia, Times, serif;
}

.searchbox button { margin: 0; padding: 6px 20px; }

/* Jahresfilter über dem Andachten-Archiv. */
.yearfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
	padding: 0 10px 16px 10px;
}

.yearfilter a {
	padding: 4px 12px;
	border-radius: 6px;
	background: #fff;
	color: #591631;
}

.yearfilter a.current { background: #591631; color: #fff; }

/* --- Audio ----------------------------------------------------------------- */
.item-audio audio {
	display: block;
	width: 100%;
	margin-top: 8px;
}

.hinweis { width: 100%; padding: 0 10px; font-style: italic; }

/* --- „Sie können …"-Band ---------------------------------------------------
   Im One-Pager folgte dieses Band auf den dunklen Referenten-Block und wurde
   per margin:-200px darübergezogen (main.css). In der neuen Struktur folgt
   es auf den roten Einstiegs-Trenner — dort gilt derselbe Versatz wie beim
   „wirsind"-Band, sonst schiebt es sich über den Kopfbereich. */
div#sie {
	margin-top: -82px;
	padding-top: 90px;
}

/* --- Dachform der Trenner ---------------------------------------------------
   Die PNGs liefern nur die Silhouette; gefüllt wird sie per CSS-Maske mit der
   Farbe des Bandes, zu dem der Trenner gehört. Dadurch passen Dach und Band
   auf jeder Seite zusammen — dieselbe Grafik trägt auf „Mitmachen" #B10023
   und auf der Startseite #E4003E. */
.dv-shape {
	display: block;
	width: 100%;
	/* Oberhalb 1024px streckt das Original die Grafik auf ihre Pixelhöhe
	   (`.top img` hat nur width:100%, die Höhe kommt aus dem height-Attribut).
	   Darunter greifen in main.css `height: 75%` bzw. `50%` an einem Elternteil
	   ohne feste Höhe — das wirkt wie `auto`, die Form skaliert also
	   proportional. Beides hier nachgebildet. */
	height: var(--dv-h);
	background-color: var(--dv-color);
	-webkit-mask-image: var(--dv-src);
	mask-image: var(--dv-src);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Stapelreihenfolge wie zuvor bei den <img> (main.css: .top img / .bottom img). */
.top > .dv-shape { position: relative; z-index: 10; }
.bottom > .dv-shape { position: relative; z-index: 20; }

/* Das Dach soll vollständig sichtbar sein.
   `div#wirsind` bleibt bei seinem margin:-82px aus main.css — dort gehört der
   Versatz mit `background-position: 0 81px` zusammen: das Band wird hochgezogen,
   sein Hintergrund gleichzeitig nach unten geschoben, sodass die Dachform frei
   bleibt. Nimmt man den Margin weg, klafft ein weißer Streifen.
   `div#sie` hat dagegen einen flachen Hintergrund ohne Versatz; sein
   margin:-200px war auf den dunklen Referenten-Block kalibriert und würde das
   Dach (und den Kopfbereich) überdecken. */
div#sie {
	margin-top: 0;
	padding-top: 20px;
}

@media screen and (max-width: 1024px) {
	.dv-shape {
		height: auto;
		aspect-ratio: var(--dv-ratio);
	}
}

/* --- Schlagworte an den Predigten ------------------------------------------ */
.tags {
	margin: 4px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tags .tag {
	padding: 2px 10px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.08);
	color: inherit;
	font-size: 15px;
	line-height: 22px;
}

.tags .tag:hover { background: rgba(0, 0, 0, 0.16); }

/* Zähler in der Filterleiste dezent halten. */
.yearfilter a small { opacity: 0.6; font-size: 0.8em; }

/* Jahrgangs-Zwischentitel im Freundesbrief-Archiv. */
h3.jahrgang {
	width: 100%;
	margin: 24px 0 6px 0;
}

h3.jahrgang:first-of-type { margin-top: 8px; }

/* --- Weiß hinter dem ersten Trenner ----------------------------------------
   main.css deckt den Bereich hinter dem ersten Trenner über einen 200px hohen
   Innenabstand des Headers weiß ab (`padding-bottom: 200px` + `margin-bottom:
   -180px`). Das reicht bis y≈322 — bei einem kurzen roten Band (z. B. nur eine
   Überschrift) ragt es in den zweiten Trenner hinein und blitzt dort durch
   dessen durchsichtigen Teil weiß hervor.

   Deshalb endet das Weiß jetzt dort, wo der Inhalt beginnt, und der erste
   Trenner bringt es selbst mit (`dvbg-white`). Die Position der folgenden
   Elemente bleibt exakt gleich: 200px Innenabstand minus 180px Außenabstand
   ergibt denselben Versatz wie 20px Innenabstand ohne Außenabstand. */
header.main {
	padding-bottom: 20px;
	margin-bottom: 0;
}