/* =========================================================================
 * Zwischen Alb und Bodensee auf GeneratePress (29.10.2026)
 *
 * Eigenes Geruest, Muster aus sachsen-portale/design/LAYOUT-REGISTER.md ("noch nicht vergeben"):
 *   Kopf       schmale Zeile (56 px): Wortmarke, der Weg Alb > Donau > See, Termine, Einsenden, "Mehr"
 *   Block 1    geteilte erste Ansicht 50/50: links stehen fuenf Schlagzeilen (sticky, ohne Skript),
 *              oben der Albtrauf, unten die Wasserlinie; rechts laeuft der Bildstrom
 *   Raster     Kapitel Alb, Donau, See, Termine in derselben Teilung; Themen ueber "Mehr"
 *   Unterseiten geteilt: links steht der Titel, rechts der Inhalt
 *   Anzeigen   Half-Page im Bildstrom, Rechtecke in der rechten Haelfte; Platzhalter als Wasserflaeche
 *   Fuss       Seeufer mit Wellenkante, Kreise von Nord nach Sued
 *   Schrift    Schibsted Grotesk, Akzent Instrument Serif kursiv
 *   Farbe      Weiss, Kalk; je Abschnitt eine Farbe: Alb ocker, Donau gruen, See blau
 *
 * 1. Tokens  2. Grundgeruest  3. Kopf  4. Teilung  5. Bausteine  6. Startseite  7. Beitrag und Seiten
 * 8. Archive  9. Veranstaltungen  10. Werbeplaetze  11. Fuss  12. Mobil
 * ====================================================================== */

/* 1. Tokens ------------------------------------------------------------ */
:root {
	--zab-tinte: #1b201e;
	--zab-text: #262b29;
	--zab-grau: #575d5a;
	--zab-linie: #dcd8cc;
	--zab-papier: #ffffff;
	--zab-kalk: #f3f0e7;          /* Albkalk: Flaeche der stehenden Haelfte */
	--zab-kalk-dunkel: #e7e2d4;

	--zab-alb: #6b5512;           /* Ocker der Albhochflaeche */
	--zab-donau: #2c6449;         /* Donaugruen */
	--zab-see: #1b5a84;           /* Bodenseeblau */
	--zab-see-hell: #e2edf3;
	--zab-see-mittel: #a9c6d8;
	--zab-donau-hell: #e9efe9;
	--zab-lage: var(--zab-tinte); /* wird je Abschnitt gesetzt */

	--zab-sans: "Schibsted Grotesk", "Schibsted Ersatz", Arial, Helvetica, sans-serif;
	--zab-kursiv: "Instrument Serif", "Instrument Ersatz", Georgia, serif;

	--zab-kopf: 56px;
	--zab-rand: 16px;
	--zab-innen: 28px;            /* Innenabstand einer Haelfte */

	--pw-grund: var(--zab-see-hell);
	--pw-rand: transparent;
	--pw-text: var(--zab-tinte);
	--pw-akzent: var(--zab-see);
	--pw-kennung: var(--zab-grau);
}
@media (min-width: 900px) {
	:root { --zab-rand: 28px; --zab-innen: clamp(28px, 3.4vw, 56px); }
}
.zab-lage--alb { --zab-lage: var(--zab-alb); --zab-flaeche: var(--zab-kalk); }
.zab-lage--donau { --zab-lage: var(--zab-donau); --zab-flaeche: var(--zab-donau-hell); }
.zab-lage--see { --zab-lage: var(--zab-see); --zab-flaeche: var(--zab-see-hell); }
.zab-lage--land { --zab-lage: var(--zab-tinte); --zab-flaeche: var(--zab-kalk); }

/* 2. Grundgeruest ------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--zab-papier);
	color: var(--zab-text);
	font-family: var(--zab-sans);
	font-size: 17px;
	line-height: 1.6;
	overflow-wrap: break-word;
}
a { color: var(--zab-see); }
a:hover, a:focus { color: var(--zab-tinte); }
:focus-visible { outline: 2px solid var(--zab-see); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--zab-sans); color: var(--zab-tinte); font-weight: 700; letter-spacing: -.015em; }
h1 a, h2 a, h3 a, h4 a { color: inherit; text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--zab-lage); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* GP-Huellen neutralisieren (keine overflow-Sperren, sonst steht nichts) */
.site.grid-container, .site-content, .one-container .site-content, .grid-container { max-width: none; margin: 0; padding: 0; background: transparent; }
.one-container .container, .separate-containers .site-main { background: transparent; }
.site-main { margin: 0; padding: 0; }
.content-area { width: 100%; }
.site-footer { background: transparent; }
#page, .site, .site-content, .content-area, .site-main { overflow: visible; }

/* 3. Kopf --------------------------------------------------------------- */
/* Ganz oben nur die Wegzeile (Desktop sticky), linksbuendig an der Inhaltskante der linken Haelfte, "Mehr" rechts aussen.
   Die Wortmarke steht auf dem Desktop in der linken Haelfte (siehe 4. und 6.), mobil versetzt unter der Wegzeile. */
.zab-kopf { position: relative; z-index: 30; background: var(--zab-papier); }
.zab-kopf-zeile {
	display: flex; align-items: center;
	padding: 0 var(--zab-rand);
	border-bottom: 1px solid var(--zab-linie);
	background: var(--zab-papier);
	box-sizing: border-box;
}
.zab-marke { margin: 0; font-family: var(--zab-sans); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.zab-marke a { text-decoration: none; }
.zab-marke-a { color: var(--zab-tinte); }
.zab-marke-b { color: var(--zab-see); }
.zab-marke-und { font-family: var(--zab-kursiv); font-style: italic; font-weight: 400; letter-spacing: 0; font-size: 1.12em; color: var(--zab-see); padding-right: .08em; }
@media (min-width: 900px) {
	:root { --zab-kopf: 54px; }
	.zab-kopf { position: sticky; top: 0; }
	.admin-bar .zab-kopf { top: 32px; }
	.zab-kopf-zeile { height: var(--zab-kopf); padding: 0 var(--zab-innen); }
	.zab-marke--mobil { display: none; }
}

/* Wortmarke in der linken Haelfte (Desktop) */
.zab-name { margin: 0; font-family: var(--zab-sans); font-weight: 800; letter-spacing: -.035em; line-height: .95; }
.zab-name a { color: var(--zab-tinte); text-decoration: none; }
.zab-name a:hover { color: var(--zab-tinte); text-decoration: none; }
.zab-name--unten, .zab-name--unten a { color: var(--zab-see); }
.zab-name .zab-marke-und { font-size: 1.1em; }
@media (max-width: 899px) {
	/* mobil steht die Wortmarke im Kopf; die H1 der Startseite bleibt fuer Screenreader */
	.zab-name--oben { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
	.zab-name--unten, .zab-name--klein { display: none; }
}
@media (min-width: 900px) {
	.zab-name--oben { padding: 24px var(--zab-innen) 0; font-size: clamp(48px, 4.6vw, 70px); background: var(--zab-papier); }
	.zab-doppel .zab-trauf { height: clamp(40px, 6vh, 64px); }
	.zab-name--unten:not(.zab-name--klein) { padding: 6px var(--zab-innen) 4px; font-size: clamp(40px, 3.8vw, 58px); text-align: left; }
	.zab-name--klein { font-size: 26px; margin-bottom: 14px; }
	.zab-name--klein.zab-name--unten { margin: 18px 0 0; }
}
.zab-nav { display: flex; align-items: center; gap: 30px; flex: 1; }
.zab-nav ul { list-style: none; margin: 0; padding: 0; }
.zab-weg { display: flex; align-items: center; gap: 0; }
.zab-weg-punkt { position: relative; }
.zab-weg-link {
	display: flex; align-items: center;
	min-height: 44px;
	padding: 0 4px;
	font-size: 16px; font-weight: 700;
	color: var(--zab-lage);
	text-decoration: none;
}
.zab-weg-punkt--hier .zab-weg-link, .zab-weg-link[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.zab-weg-link:hover { color: var(--zab-lage); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
/* Der Pfeil faellt von links oben nach rechts unten: von der Alb hinunter an den See */
.zab-weg-pfeil { width: 26px; height: 16px; flex: none; }
.zab-weg-pfeil::before {
	content: ""; display: block; width: 100%; height: 100%;
	background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--zab-grau) calc(50% - 1px), var(--zab-grau) calc(50% + 0.5px), transparent calc(50% + 0.5px));
	opacity: .7;
}
.zab-weg-kreise {
	position: absolute; left: -12px; top: 100%;
	display: none;
	min-width: 180px;
	padding: 10px 0 !important;
	background: var(--zab-papier);
	border: 1px solid var(--zab-linie);
	border-top: 3px solid var(--zab-lage);
}
.zab-weg-kreise a { display: block; padding: 7px 16px; font-size: 15px; color: var(--zab-tinte); text-decoration: none; }
.zab-weg-kreise a:hover, .zab-weg-kreise a[aria-current] { color: var(--zab-lage); text-decoration: underline; }
@media (min-width: 900px) and (hover: hover) {
	.zab-weg-punkt:hover .zab-weg-kreise { display: block; }
}
@media (min-width: 900px) {
	.zab-weg-punkt:focus-within .zab-weg-kreise { display: block; }
}
.zab-nav-rest { display: flex; align-items: center; gap: 20px; }
.zab-nav-rest a { font-size: 15px; font-weight: 600; color: var(--zab-tinte); text-decoration: none; }
.zab-nav-rest a:hover, .zab-nav-rest a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }

/* Wegweiser: Oeffner als Wort mit kleinem Wegweiser-Zeichen, Feld mit Wegleiste, Themen und Suche */
.zab-wegweiser-oeffner {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px;
	font-size: 15px; font-weight: 700; color: var(--zab-tinte);
}
.zab-wegweiser-oeffner::before {
	/* Pfeilschild: nach rechts zeigendes Fuenfeck in der Seefarbe */
	content: ""; width: 18px; height: 11px; flex: none;
	background: var(--zab-see);
	clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
}
.zab-wegweiser[open] .zab-wegweiser-oeffner { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.zab-wegweiser[open] .zab-wegweiser-oeffner::before { transform: rotate(90deg); }
.zab-wegweiser-feld {
	position: absolute; left: 0; right: 0; top: 100%;
	padding: 22px var(--zab-rand) 26px;
	background: var(--zab-papier);
	border-bottom: 1px solid var(--zab-linie);
	box-shadow: 0 18px 30px -24px rgba(27, 32, 30, .45);
	max-height: calc(100vh - var(--zab-kopf));
	overflow-y: auto;
	box-sizing: border-box;
	text-align: left;
}
.zab-wegweiser-dienst { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.zab-wegweiser-dienst a { color: var(--zab-tinte); }
.zab-wegweiser-teile { display: grid; gap: 22px 48px; }
.zab-wegweiser-titel { margin: 0 0 4px; font-family: var(--zab-kursiv); font-style: italic; font-size: 22px; line-height: 1.15; color: var(--zab-tinte); }
.zab-wegweiser-themen ul { list-style: none; margin: 0; padding: 0; }
.zab-wegweiser-themen a { display: inline-block; padding: 4px 0; font-size: 16px; color: var(--zab-tinte); text-decoration: none; }
.zab-wegweiser-themen a:hover, .zab-wegweiser-themen a[aria-current] { text-decoration: underline; }
.zab-wegweiser-feld .zab-wegleiste { margin-top: 0; }
.zab-wegweiser-feld .zab-suche { margin-top: 22px; }
.zab-wl-land .zab-wl-abschnitt, .zab-wl-land { margin-top: 4px; }
.zab-wl-land a { font-weight: 700; }
@media (min-width: 900px) {
	.zab-wegweiser { margin-left: auto; }
	.zab-wegweiser-feld { padding: 28px var(--zab-innen) 30px; }
	.zab-wegweiser-dienst { display: none; }
	.zab-wegweiser-teile { grid-template-columns: minmax(220px, 300px) 1fr; }
	.zab-wegweiser-themen ul { columns: 2; column-gap: 40px; max-width: 520px; }
}

.zab-suche { display: flex; max-width: 560px; }
.zab-suche input[type="search"] {
	flex: 1; min-width: 0;
	height: 46px; padding: 0 14px;
	font: inherit; font-size: 16px; color: var(--zab-tinte);
	background: var(--zab-papier);
	border: 0; border-bottom: 1.5px solid var(--zab-tinte);
	border-radius: 0;
}
.zab-suche button {
	height: 46px; padding: 0 4px 0 16px;
	font: inherit; font-size: 16px; font-weight: 700;
	color: var(--zab-see); background: transparent;
	border: 0; border-bottom: 1.5px solid var(--zab-tinte); border-radius: 0; cursor: pointer;
	text-decoration: underline; text-underline-offset: 5px;
}
.zab-suche button:hover { color: var(--zab-tinte); }


/* 4. Teilung (das Geruest jeder Seite) ---------------------------------- */
.zab-teilung { display: block; }
.zab-links { background: var(--zab-flaeche, var(--zab-kalk)); }
.zab-steht { padding: 28px var(--zab-rand) 30px; }
.zab-rechts { min-width: 0; padding: 28px var(--zab-rand) 40px; }
@media (min-width: 900px) {
	.zab-teilung { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
	.zab-links { position: relative; }
	.zab-steht { position: sticky; top: var(--zab-kopf); padding: 44px var(--zab-innen) 44px; box-sizing: border-box; }
	.zab-rechts { padding: 44px var(--zab-innen) 64px; }
	.admin-bar .zab-steht { top: calc(var(--zab-kopf) + 32px); }
}
@media (min-width: 1600px) {
	/* sehr breite Fenster: die Teilung bleibt 50/50, der Inhalt rueckt zur Mitte */
	.zab-teilung { grid-template-columns: 1fr 1fr; }
	.zab-steht { padding-left: calc(50vw - 720px + var(--zab-innen)); }
	.zab-rechts { padding-right: calc(50vw - 720px + var(--zab-innen)); }
}

/* 5. Bausteine ---------------------------------------------------------- */
.zab-ortszeile {
	display: flex; flex-wrap: wrap; align-items: center;
	margin: 0 0 6px;
	font-size: 14px; font-weight: 500; line-height: 1.35;
	color: var(--zab-grau);
}
.zab-ort { color: var(--zab-lage); font-weight: 700; }
.zab-trenner { display: inline-block; width: 4px; height: 4px; margin: 0 9px; border-radius: 50%; background: currentColor; opacity: .55; }
.zab-anriss { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--zab-text); }
.zab-leer { color: var(--zab-grau); font-size: 16px; }
.zab-weiter { margin: 22px 0 0; font-size: 16px; font-weight: 700; }
.zab-weiter a { color: var(--zab-tinte); text-decoration: underline; text-decoration-color: var(--zab-lage); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.zab-weiter a::after { content: " \2192"; }
.zab-zwischentitel { margin: 0 0 14px; font-size: 22px; line-height: 1.25; }

/* Eintrag: Meldung in Kapiteln und Listen */
.zab-liste { display: flex; flex-direction: column; }
.zab-eintrag { padding: 20px 0 22px; border-bottom: 1px solid var(--zab-linie); }
.zab-eintrag:first-child { padding-top: 0; }
.zab-eintrag-titel { margin: 0; font-size: 22px; line-height: 1.22; font-weight: 700; }
.zab-eintrag-bild { display: block; margin: 0 0 16px; }
.zab-eintrag-bild img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.zab-eintrag--bild .zab-eintrag-titel { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; }
.zab-liste--knapp .zab-eintrag { padding: 14px 0 16px; }
.zab-liste--knapp .zab-eintrag:first-child { padding-top: 0; }
.zab-liste--knapp .zab-eintrag-titel { font-size: 19px; }

/* Albtrauf und Wasserlinie (SVG) */
.zab-trauf, .zab-wasser { display: block; width: 100%; }
.zab-trauf { height: 64px; }
.zab-trauf-himmel { fill: var(--zab-papier); }
.zab-trauf-linie { fill: none; stroke: var(--zab-alb); stroke-width: 2px; stroke-linejoin: round; }
.zab-wasser { height: 56px; }
.zab-wasser-flaeche { fill: var(--zab-see-hell); }
.zab-ufer { fill: none; stroke: var(--zab-see); stroke-width: 2px; }
.zab-welle { fill: none; stroke: var(--zab-see-mittel); stroke-width: 1.25px; }

/* 6. Startseite --------------------------------------------------------- */
/* Erste Ansicht: links der Schlagzeilenstapel zwischen Albtrauf und Wasserlinie */
.zab-doppel .zab-links { background: var(--zab-kalk); }
.zab-doppel .zab-steht { display: flex; flex-direction: column; padding: 0; }
.zab-stapel { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 6px var(--zab-rand) 18px; }
.zab-stapel-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: 0 0 8px; }
.zab-stapel-titel { margin: 0; font-family: var(--zab-kursiv); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: 0; color: var(--zab-alb); }
.zab-stand { margin: 0; font-size: 14px; color: var(--zab-grau); }
.zab-stapel-liste { list-style: none; margin: 0; padding: 0; }
.zab-zeile { padding: 14px 0 15px; border-top: 1px solid var(--zab-kalk-dunkel); }
.zab-zeile:first-child { border-top: 0; }
.zab-zeile .zab-ortszeile { margin-bottom: 4px; }
.zab-zeile-titel { margin: 0; font-size: 24px; line-height: 1.14; font-weight: 750; letter-spacing: -.02em; text-wrap: balance; }
.zab-zeile:first-child .zab-zeile-titel { font-size: 30px; line-height: 1.08; }

@media (min-width: 900px) {
	/* erste Ansicht: Stapel genau bis zum unteren Fensterrand; beim Scrollen steht er unter der Wegzeile,
	   darunter setzt sich der See fort */
	.zab-doppel .zab-steht { height: calc(100vh - var(--zab-kopf)); height: calc(100svh - var(--zab-kopf)); background: var(--zab-kalk); }
	.zab-doppel .zab-links { background: var(--zab-see-hell); }
	.zab-stapel { padding: 4px var(--zab-innen) 12px; min-height: 0; }
	.zab-zeile { padding: clamp(8px, 1.5vh, 16px) 0; }
	.zab-zeile-titel { font-size: clamp(20px, min(1.9vw, 3.3vh), 34px); }
	.zab-zeile:first-child .zab-zeile-titel { font-size: clamp(24px, min(2.6vw, 4.6vh), 46px); }
	.zab-stapel-titel { font-size: clamp(22px, 2vw, 30px); }
	.zab-trauf { height: clamp(48px, 9vh, 92px); flex: none; }
	.zab-wasser { height: clamp(40px, 7vh, 72px); flex: none; }
}
/* Zu niedrige Fenster: die Haelfte steht nicht, sondern laeuft mit */
@media (min-width: 900px) and (max-height: 640px) {
	.zab-doppel .zab-steht { position: static; height: auto; }
}

/* Bildstrom rechts */
.zab-doppel .zab-rechts { padding: 0; }
.zab-strom { display: flex; flex-direction: column; gap: 0; }
.zab-strombild { position: relative; padding-bottom: 30px; }
.zab-strombild-bild { display: block; }
.zab-strombild-bild img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.zab-strombild--hoch .zab-strombild-bild img { aspect-ratio: 4 / 5; }
.zab-strombild-text { padding: 14px var(--zab-rand) 0; }
.zab-strombild-titel { margin: 0; font-size: 21px; line-height: 1.22; font-weight: 700; max-width: 34em; }
@media (min-width: 900px) {
	.zab-strombild { padding-bottom: 34px; }
	.zab-strombild-text { padding: 18px var(--zab-innen) 0; }
	.zab-strombild-titel { font-size: clamp(20px, 1.6vw, 25px); }
	/* jedes zweite Querbild rueckt nach rechts ein, damit der Strom nicht zur Kachelreihe wird */
	.zab-strombild--quer:nth-of-type(2n) .zab-strombild-bild { margin-left: 18%; }
	.zab-strombild--quer:nth-of-type(2n) .zab-strombild-text { padding-left: calc(18% + var(--zab-innen)); }
	.zab-strombild--hoch .zab-strombild-bild { width: 62%; }
}

/* Kapitel Alb, Donau, See, Termine */
.zab-kapitel { border-top: 1px solid var(--zab-linie); }
.zab-kapitel-titel { margin: 0; line-height: .9; font-weight: 400; letter-spacing: 0; }
.zab-kapitel-auf { display: block; margin-bottom: 6px; font-family: var(--zab-sans); font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--zab-grau); }
.zab-kapitel-wort { display: block; font-family: var(--zab-kursiv); font-style: italic; font-size: 92px; line-height: .92; color: var(--zab-lage); }
.zab-kapitel-unter { margin: 14px 0 0; max-width: 26em; font-size: 17px; line-height: 1.5; color: var(--zab-text); }
.zab-kapitel-kreise { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.zab-kapitel-kreise a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
	font-size: 16px; font-weight: 700; color: var(--zab-lage); text-decoration: none;
	background: var(--zab-papier); border-radius: 20px;
}
.zab-kapitel-kreise a:hover { background: var(--zab-lage); color: var(--zab-papier); }
@media (min-width: 900px) {
	.zab-kapitel .zab-steht { padding-top: 48px; }
	.zab-kapitel .zab-rechts { padding-top: 48px; padding-bottom: 44px; }
	.zab-kapitel-wort { font-size: clamp(110px, 12vw, 190px); }
}
.zab-kapitel--termine .zab-kapitel-wort { font-size: 64px; }
@media (min-width: 900px) { .zab-kapitel--termine .zab-kapitel-wort { font-size: clamp(80px, 8vw, 128px); } }

/* 7. Beitrag und Seiten ------------------------------------------------- */
.zab-brotkrumen p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--zab-grau); }
.zab-brotkrumen a { color: var(--zab-grau); }
.zab-brotkrumen .separator { margin: 0 4px; }
.zab-dach { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--zab-lage); }
.zab-dach a { color: var(--zab-lage); text-decoration: none; }
.zab-dach a:hover { text-decoration: underline; }
.zab-titel { margin: 0; font-size: clamp(30px, 3.1vw, 50px); line-height: 1.06; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.zab-vorspann { margin: 20px 0 0; font-size: 19px; line-height: 1.5; color: var(--zab-text); max-width: 34em; }
.zab-beitrag-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 22px 0 0; font-size: 14px; color: var(--zab-grau); }
.zab-beitrag .zab-steht::after {
	/* kleine Wasserlinie unter dem Kopf: der Beitrag liegt zwischen Alb und See */
	content: ""; display: block; height: 10px; margin-top: 28px; max-width: 120px;
	background: repeating-linear-gradient(to bottom, var(--zab-lage) 0 2px, transparent 2px 4px);
	opacity: .55;
}
.zab-beitragsbild { margin: 0 0 28px; }
.zab-beitragsbild img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.zab-beitragsbild figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--zab-grau); }
.zab-beitragsbild figcaption a { color: var(--zab-grau); }
.zab-text { max-width: 640px; font-size: 18px; line-height: 1.68; }
.zab-text h2 { margin: 1.6em 0 .4em; font-size: 23px; line-height: 1.25; }
.zab-text h3 { margin: 1.4em 0 .3em; font-size: 20px; }
.zab-text p { margin: 0 0 1.1em; }
.zab-text .pw-platz { margin: 6px 0 30px; }
.zab-beitrag-fuss { max-width: 640px; margin-top: 26px; }
.zab-beitrag-orte { font-size: 16px; color: var(--zab-grau); }
.zab-beitrag-orte a { font-weight: 700; color: var(--zab-lage); }
.zab-ebenfalls { margin-top: 44px; padding-top: 26px; border-top: 3px solid var(--zab-lage); max-width: 640px; }
.zab-ebenfalls .zab-zwischentitel a { color: var(--zab-tinte); }
@media (min-width: 900px) {
	.zab-beitrag .zab-steht { padding-top: 30px; padding-bottom: 28px; }
	.zab-beitrag .zab-rechts { padding-top: 52px; }
	.zab-beitrag--ohne-bild .zab-rechts { padding-top: 60px; }
}
/* Seiten (Impressum usw.) */
.zab-seite .zab-titel { font-size: clamp(30px, 3vw, 46px); }
.zab-seite .zab-steht::after { display: none; }

/* Wegleiste: Kreise als Haltepunkte von der Alb an den See */
.zab-wegleiste { margin-top: 22px; }
.zab-wegleiste ol { list-style: none; margin: 0; padding: 0; }
.zab-wegleiste > ol { position: relative; padding-left: 26px; }
.zab-wegleiste > ol::before {
	content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px;
	background: linear-gradient(to bottom, var(--zab-alb), var(--zab-donau) 50%, var(--zab-see));
}
.zab-wl-abschnitt { margin: 0 0 6px; }
.zab-wl-wort { display: block; margin: 0 0 2px; font-family: var(--zab-kursiv); font-style: italic; font-size: 22px; line-height: 1.15; color: var(--zab-lage); }
.zab-wl-abschnitt li { position: relative; }
.zab-wl-abschnitt li::before {
	content: ""; position: absolute; left: -24px; top: 50%; width: 9px; height: 9px; margin-top: -5.5px;
	border-radius: 50%; background: var(--zab-papier); border: 2px solid var(--zab-lage);
}
.zab-wl-abschnitt a { display: inline-block; padding: 2px 0; font-size: 15px; font-weight: 600; color: var(--zab-tinte); text-decoration: none; }
.zab-wl-abschnitt a:hover { color: var(--zab-lage); text-decoration: underline; }
.zab-wl-hier::before { background: var(--zab-lage) !important; transform: scale(1.35); }
.zab-wl-hier a { color: var(--zab-lage); font-weight: 800; }
@media (max-width: 899px) {
	/* mobil waagrecht in drei Zeilen, die Linie entfaellt */
	.zab-links .zab-wegleiste > ol { padding-left: 0; }
	.zab-links .zab-wegleiste > ol::before, .zab-links .zab-wl-abschnitt li::before { display: none; }
	.zab-links .zab-wl-abschnitt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin: 0; padding: 4px 0; border-top: 1px solid var(--zab-kalk-dunkel); }
	.zab-links .zab-wl-wort { width: 62px; font-size: 20px; }
	.zab-links .zab-wl-abschnitt ol { display: flex; flex-wrap: wrap; gap: 0 14px; }
	.zab-wl-abschnitt a { padding: 8px 0; }
}

/* 8. Archive, Suche, 404 ------------------------------------------------ */
.zab-beschreibung { margin-top: 18px; max-width: 32em; font-size: 17px; line-height: 1.55; }
.zab-beschreibung p { margin: 0 0 .8em; }
.zab-gemeinden { margin: 24px 0 0; max-width: 34em; font-size: 15px; line-height: 1.75; color: var(--zab-grau); }
.zab-gemeinden-titel { display: block; margin-bottom: 4px; font-family: var(--zab-kursiv); font-style: italic; font-size: 24px; line-height: 1.2; color: var(--zab-lage); }
.zab-gemeinden a { color: var(--zab-tinte); text-decoration: none; }
.zab-gemeinden a:hover { color: var(--zab-lage); text-decoration: underline; }
.zab-archivteilung .zab-titel { font-size: clamp(30px, 3.2vw, 50px); }
.zab-archivteilung .zab-suche { margin-top: 22px; }
.zab-archiv .zab-liste { max-width: 640px; }
.zab-archiv .zab-eintrag--bild { max-width: none; }
.nav-links, .pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; font-size: 16px; }
.nav-links a, .nav-links span { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; box-sizing: border-box; justify-content: center; text-decoration: none; color: var(--zab-tinte); border: 1px solid var(--zab-linie); }
.nav-links .current { background: var(--zab-tinte); color: var(--zab-papier); border-color: var(--zab-tinte); }
@media (min-width: 900px) {
	.zab-archivteilung .zab-steht { padding-top: 34px; padding-bottom: 30px; }
	.zab-archivteilung .zab-rechts { padding-top: 52px; }
}

/* 9. Veranstaltungen ---------------------------------------------------- */
.zab-termin--abgesagt .zab-eintrag-titel a { text-decoration: line-through; }
.zab-termin .zab-ortszeile strong { margin-left: 8px; color: #8a1c1c; }
.zab-filter { margin-top: 24px; }
.zab-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.zab-filter-oben { margin-bottom: 14px !important; }
.zab-filter-gruppe { display: grid; grid-template-columns: 74px 1fr; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--zab-kalk-dunkel); }
.zab-filter-titel { margin: 0; font-family: var(--zab-kursiv); font-style: italic; font-size: 24px; line-height: 1.1; color: var(--zab-lage); }
.zab-filter a { display: inline-block; padding: 6px 0; font-size: 16px; font-weight: 600; color: var(--zab-tinte); text-decoration: none; }
.zab-filter a:hover { text-decoration: underline; }
.zab-filter a[aria-current] { color: var(--zab-lage); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.zab-filter-oben a { font-weight: 700; }
.zab-pv-tag { margin-bottom: 34px; }
.zab-pv-tag .zab-zwischentitel { padding-bottom: 8px; border-bottom: 3px solid var(--zab-tinte); }
.zab-pv-einsenden { max-width: 640px; margin: 30px 0 0; padding: 18px 20px; font-size: 16px; line-height: 1.55; background: var(--zab-see-hell); }
.zab-eckdaten { margin: 28px 0 0; display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 0; font-size: 16px; line-height: 1.5; }
.zab-eckdaten dt, .zab-eckdaten dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--zab-kalk-dunkel); }
.zab-eckdaten dt { padding-right: 16px; font-weight: 700; color: var(--zab-lage); }
.zab-eckdaten dd { color: var(--zab-tinte); }
.zab-pv-einzel .pv-hinweis, .zab-pv-einzel .pv-hinweise { margin-top: 14px; }

/* 10. Werbeplaetze ------------------------------------------------------ */
.zab-anzeige { margin: 26px 0; }
.zab-anzeige .pw-platz { margin: 0; text-align: left; }
.zab-anzeige--strom { margin: 0 0 44px; padding: 6px var(--zab-rand) 0; }
.zab-anzeige--strom .pw-platz { margin: 0 auto; }
.zab-anzeige--liste { margin: 22px 0; padding-bottom: 22px; border-bottom: 1px solid var(--zab-linie); }
.zab-anzeige--ende { margin-top: 36px; }
.pw-platz .pw-kennung { height: 20px; line-height: 20px; font-family: var(--zab-sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--zab-grau); }
/* Platzhalter als Wasserflaeche: helle Seeflaeche mit flachen Wellenlinien */
.pw-platzhalter {
	border: 0 !important;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22'%3E%3Cpath d='M0 15 q30 -5 60 0 t60 0' fill='none' stroke='%231b5a84' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 120px 22px repeat,
		var(--zab-see-hell) !important;
	align-items: flex-start !important;
	text-align: left;
	padding: 18px 20px !important;
}
.pw-platzhalter .pw-titel { display: none; }
.pw-platzhalter::before { content: "Ihr Motiv an dieser Stelle"; font-family: var(--zab-sans); font-style: normal; font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; color: var(--zab-tinte); }
.pw-platzhalter .pw-mail { font-family: var(--zab-sans); font-size: 15px; font-weight: 700; color: var(--zab-see); overflow-wrap: anywhere; }
.pw-platzhalter .pw-format { font-size: 13px; opacity: 1; color: var(--zab-grau); font-variant-numeric: tabular-nums; }
.pw-platzhalter:hover::before { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pw-platz--strom .pw-platzhalter { justify-content: flex-end !important; }
.pw-platz--strom .pw-platzhalter::before { margin-bottom: auto; font-size: 32px; }

/* 11. Fuss: das Seeufer ------------------------------------------------- */
.zab-fuss { margin-top: 0; background: var(--zab-see-hell); color: var(--zab-tinte); }
.zab-wasser--fuss { height: 44px; background: var(--zab-papier); }
.zab-fuss-innen { display: grid; gap: 26px; padding: 18px var(--zab-rand) 28px; }
.zab-fuss-name { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.zab-fuss-name span { font-family: var(--zab-kursiv); font-style: italic; font-weight: 400; color: var(--zab-see); }
.zab-fuss-satz { margin: 8px 0 0; font-size: 16px; color: var(--zab-text); }
.zab-fuss-titel { margin: 0 0 8px; font-family: var(--zab-kursiv); font-style: italic; font-size: 22px; color: var(--zab-see); }
.zab-fuss-weg ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 16px; line-height: 1.8; }
.zab-fuss-weg li:not(:last-child)::after { content: "\203A"; margin: 0 .55em; color: var(--zab-grau); }
.zab-fuss-weg a { font-weight: 700; color: var(--zab-lage); text-decoration: none; }
.zab-fuss-weg a:hover { text-decoration: underline; }
.zab-fuss-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding: 14px var(--zab-rand) 22px; border-top: 1px solid var(--zab-see-mittel); font-size: 14px; }
.zab-fuss-copy { margin: 0; color: var(--zab-text); }
.zab-fuss-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.zab-fuss-links a { display: inline-block; padding: 6px 0; color: var(--zab-tinte); }
@media (min-width: 900px) {
	.zab-wasser--fuss { height: 64px; }
	.zab-fuss-innen { grid-template-columns: 1fr 1fr; padding: 22px var(--zab-innen) 34px; align-items: end; }
	.zab-fuss-zeile { padding: 16px var(--zab-innen) 26px; }
	.zab-fuss-name { font-size: 34px; }
}

/* 12. Mobil ------------------------------------------------------------- */
@media (max-width: 899px) {
	/* Kopf als Figur im Kalkblock: Wortmarke oben links, der Weg schraeg hinunter, unten rechts "und Bodensee",
	   unten links der Wegweiser. Wegzeile, Nav und Marke geben ihre Kinder an das Raster des Kopfs ab. */
	.zab-kopf { display: grid; grid-template-columns: auto 1fr; align-items: end; padding: 16px var(--zab-rand) 14px; background: var(--zab-kalk); border-bottom: 1px solid var(--zab-kalk-dunkel); }
	.zab-marke--mobil, .zab-kopf-zeile, .zab-nav { display: contents; }
	.zab-marke-a { grid-column: 1 / -1; grid-row: 1; font-size: 34px; }
	.zab-weg { grid-column: 1 / -1; grid-row: 2; position: relative; display: block; height: 96px; margin: 2px 0 0 !important; }
	.zab-weg::before {
		/* die schraege Verbindung von links oben nach rechts unten */
		content: ""; position: absolute; left: 20px; width: calc(62% - 6px); top: 18px; height: 60px;
		background: linear-gradient(to top right, transparent calc(50% - 1px), var(--zab-grau) calc(50% - 1px), var(--zab-grau) calc(50% + .5px), transparent calc(50% + .5px));
		opacity: .55;
	}
	.zab-weg-pfeil { display: none; }
	.zab-weg-punkt { position: absolute; }
	.zab-weg-punkt--alb { left: 0; top: 0; }
	.zab-weg-punkt--donau { left: 30%; top: 30px; }
	.zab-weg-punkt--see { left: 58%; top: 60px; }
	.zab-weg-link { min-height: 36px; padding: 0 8px; font-size: 18px; background: var(--zab-kalk); }
	.zab-weg-kreise { display: none !important; }
	.zab-nav-rest { display: none; }
	.zab-wegweiser { grid-column: 1; grid-row: 3; align-self: end; }
	.zab-wegweiser-oeffner { min-height: 44px; font-size: 14px; padding-right: 12px; }
	.zab-marke-b { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; padding-bottom: 6px; font-size: 34px; }
	.zab-stapel { padding-top: 0; }
	.zab-trauf { height: 46px; }
	.zab-wasser { height: 40px; }
	.zab-zeile-titel { font-size: 21px; }
	.zab-zeile:first-child .zab-zeile-titel { font-size: 27px; }
	.zab-strom { padding-top: 24px; }
	.zab-kapitel-wort { font-size: 84px; }
	.zab-text { font-size: 17.5px; }
	.zab-beitrag .zab-steht::after { margin-top: 20px; }
	.zab-ebenfalls { margin-top: 36px; }
}
@media (max-width: 380px) {
	.zab-marke-a, .zab-marke-b { font-size: 30px; }
	.zab-weg-link { font-size: 16px; }
}

/* Quelle unter Terminen (MU-Plugin portale-veranstaltungen): jede Angabe in eigener Zeile */
.pv-quelle { margin-top: 30px; padding-top: 16px; border-top: 2px solid var(--zab-tinte); font-size: 15px; line-height: 1.55; color: var(--zab-text); }
.pv-quelle > * { display: block; margin: 0 0 .7em; }
.pv-ki-hinweis { font-style: italic; }

/* Kapitel: Aufmacherbild flacher als in den Listen, damit die Startseite kurz bleibt */
.zab-kapitel .zab-eintrag-bild img { aspect-ratio: 16 / 9; }