/*
 * Hochspessartfreunde Rothenbuch 1897 e.V.
 * Design 1:1 vom bisherigen WordPress-Theme „hochspessartfreunde“ (made in, 2015) übernommen,
 * technisch neu aufgebaut (Flexbox/Grid statt Floats, keine Plugin-Styles mehr).
 */

/* ---------------------------------------------------------------
   Schriften (lokal statt Google Fonts – DSGVO)
   --------------------------------------------------------------- */
@font-face {
	font-family: "PT Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/pt-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "PT Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/pt-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
	font-family: "PT Serif";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/pt-serif-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "PT Serif";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/pt-serif-latin-700-italic.woff2") format("woff2");
}

/* ---------------------------------------------------------------
   Grundwerte
   --------------------------------------------------------------- */
:root {
	--gruen: #00a937;
	--gruen-text: #00802a;    /* Grün für Text und Links: 4,9 : 1 auf Weiß (WCAG AA) */
	--gruen-hell: #eef8f1;    /* zarte Flächen (Hinweis, Termin-Fakten, Etikett) */
	--text: #403f3f;
	--text-absatz: #525150;
	--grau-linie: #ccc;
	--grau-leise: #767676;
	--schatten: 0 0 7px 0 rgba(0, 0, 0, .1);
	--schatten-hover: 0 0 30px 0 rgba(0, 0, 0, .1);
	--breite: 1200px;
	--rand: 20px;
	--groesse-text: 19px;     /* Fließtext und alles, was dazugehört */
	--groesse-klein: 15px;    /* Etiketten, Nebeninfos */
	--schrift: "PT Serif", Georgia, "Times New Roman", serif;
}

/* schmaler Seitenrand für Tablet und Handy; Kopf, Inhalt und Fuß fluchten */
@media (max-width: 1023px) {
	:root {
		--rand: 16px;
	}
}

@media (max-width: 767px) {
	:root {
		--groesse-text: 16px;
		--groesse-klein: 14px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #fff;
	color: var(--text);
	font-family: var(--schrift);
	font-size: 16px;
	line-height: 1.5;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--gruen-text);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	text-underline-offset: .15em;
}

:focus-visible {
	outline: 2px solid var(--gruen);
	outline-offset: 3px;
}

/* Kein blauer Browser-Rahmen beim Klicken/Tippen; die Tastatur bekommt weiterhin den grünen */
:focus:not(:focus-visible) {
	outline: none;
}

a,
button {
	-webkit-tap-highlight-color: transparent;
}

.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 16px;
	background: #fff;
	box-shadow: var(--schatten-hover);
}

/* ---------------------------------------------------------------
   Kopf: Logo links, „Mitglied werden“ und Menü rechts
   --------------------------------------------------------------- */
.site-header {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 30px var(--rand) 20px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"logo knopf"
		"logo menue";
	align-items: start;
	column-gap: 30px;
}

.logo {
	grid-area: logo;
	margin-top: 40px;
	width: 341px;
}

.mitglied-werden {
	grid-area: knopf;
	justify-self: end;
}

.main-navigation {
	grid-area: menue;
	justify-self: end;
	margin-top: 4px;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: 19px;
}

.main-navigation .menu-item {
	font-size: 1.2em;
}

.main-navigation .menu-item a:not(.action-button) {
	color: #000;
	border-bottom: 3px solid transparent;
	text-decoration: none;
	transition: border-color .15s ease;
}

.main-navigation .menu-item a:not(.action-button):hover,
.main-navigation .menu-item a:not(.action-button):active,
.main-navigation .current-menu-item > a:not(.action-button) {
	border-bottom-color: var(--gruen);
}

.main-navigation .menu-item-mitglied,
.menu-toggle {
	display: none;
}

@media (max-width: 1100px) {
	.main-navigation .menu-item {
		font-size: 17px;
	}
}

/* Knopf mit grünem Rahmen */
.action-button {
	display: inline-block;
	padding: 12px;
	border: 2px solid var(--gruen-text);
	color: var(--gruen-text);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.action-button:hover,
.action-button[aria-current] {
	background: var(--gruen-text);
	color: #fff;
	text-decoration: none;
}

/* Mobiles Menü (statt des alten „Responsive Menu“-Plugins) */
@media (max-width: 1023px) {
	.site-header {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"logo toggle"
			"menue menue";
		align-items: center;
		column-gap: 12px;
		padding: 10px var(--rand);
	}

	.logo {
		margin-top: 0;
		width: min(250px, 100%);
	}

	.mitglied-werden {
		display: none;
	}

	.menu-toggle {
		grid-area: toggle;
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 10px 12px;
		border: 2px solid var(--gruen-text);
		background: #fff;
		color: var(--gruen-text);
		font: 700 16px/1 var(--schrift);
		cursor: pointer;
	}

	.menu-toggle-icon,
	.menu-toggle-icon::before,
	.menu-toggle-icon::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		transition: transform .2s ease-in-out, background-color .2s;
	}

	.menu-toggle-icon {
		position: relative;
	}

	.menu-toggle-icon::before,
	.menu-toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.menu-toggle-icon::before { top: -6px; }
	.menu-toggle-icon::after { top: 6px; }

	.menu-toggle[aria-expanded="true"] .menu-toggle-icon { background: transparent; }
	.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

	/* Das Menü legt sich über den Inhalt, statt ihn nach unten zu schieben */
	.site-header {
		position: sticky;
		top: 0;
		z-index: 30;
		background: #fff;
		transition: box-shadow .2s ease;
	}

	/* Sprungziele (Termin-Links von der Startseite) nicht unter dem stehenden Kopf verstecken;
	   --kopf-hoehe setzt main.js aus der echten Höhe */
	html {
		scroll-padding-top: calc(var(--kopf-hoehe, 80px) + 16px);
	}

	/* beim Scrollen bleibt der Kopf oben stehen und hebt sich leicht ab */
	.site-header.gescrollt {
		box-shadow: 0 1px 0 var(--grau-linie), 0 6px 16px -10px rgba(0, 0, 0, .25);
	}

	.main-navigation {
		grid-area: auto;
		justify-self: stretch;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		padding: 0 var(--rand) 24px;
		background: #fff;
		box-shadow: 0 16px 24px -12px rgba(0, 0, 0, .18);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
	}

	.main-navigation.offen {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .2s ease, transform .25s ease, visibility 0s;
	}

	/* Menüpunkte rutschen nacheinander herein */
	.main-navigation .menu-item {
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity .2s ease, transform .2s ease;
	}

	.main-navigation.offen .menu-item {
		opacity: 1;
		transform: none;
	}

	.main-navigation.offen .menu-item:nth-child(2) { transition-delay: .03s; }
	.main-navigation.offen .menu-item:nth-child(3) { transition-delay: .06s; }
	.main-navigation.offen .menu-item:nth-child(4) { transition-delay: .09s; }
	.main-navigation.offen .menu-item:nth-child(5) { transition-delay: .12s; }
	.main-navigation.offen .menu-item:nth-child(6) { transition-delay: .15s; }
	.main-navigation.offen .menu-item:nth-child(7) { transition-delay: .18s; }

	/* Abgedunkelter Hintergrund; ein Tipp darauf schließt das Menü (main.js) */
	.menue-schleier {
		position: fixed;
		inset: 0;
		z-index: 20;
		background: rgba(30, 30, 30, .35);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility 0s linear .25s;
	}

	.menue-offen .menue-schleier {
		opacity: 1;
		visibility: visible;
		transition: opacity .25s ease, visibility 0s;
	}

	.menue-offen {
		overflow: hidden;
	}

	.main-navigation ul {
		flex-direction: column;
	}

	.main-navigation .menu-item {
		font-size: 19px;
		border-bottom: 1px solid var(--grau-linie);
	}

	.main-navigation .menu-item a:not(.action-button) {
		display: block;
		padding: 12px 0;
		border-bottom: 0;
	}

	.main-navigation .current-menu-item > a,
	.main-navigation .menu-item a:not(.action-button):active {
		color: var(--gruen-text);
	}

	.main-navigation .menu-item-mitglied {
		display: block;
		border-bottom: 0;
		padding: 20px 0 10px;
	}

	.main-navigation .menu-item-mitglied .action-button {
		padding: 14px 16px;
	}

	/* Wenn JavaScript fehlt, bleibt das Menü sichtbar */
	.no-js .main-navigation { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; padding: 0; }
	.no-js .main-navigation .menu-item { opacity: 1; transform: none; }
	.no-js .menu-toggle { display: none; }
}

/* ---------------------------------------------------------------
   Inhaltsbereich
   --------------------------------------------------------------- */
.content-area {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 0 var(--rand);
}

/* Textseiten: weiße Box links, Bild rechts oben dahinter */
.layout-text {
	--hintergrund: url("../images/bg_default.webp");
	padding-top: 40px;
	background-image: var(--hintergrund);
	background-size: 800px;
	background-position: top right;
	background-repeat: no-repeat;
}

.layout-text .site-main {
	max-width: 800px;
	min-height: 550px;
	padding: 20px 30px 30px 20px;
	background: rgba(255, 255, 255, .95);
}

.layout-breit .site-main {
	padding: 60px 0 0 20px;
}

@media (max-width: 1023px) {
	.layout-text {
		background-size: 500px;
	}

	.layout-text .site-main {
		max-width: 600px;
		padding-top: 30px;
	}
}

@media (max-width: 767px) {
	.layout-text {
		background-image: none;
		padding-top: 10px;
	}

	.layout-text .site-main,
	.layout-breit .site-main {
		max-width: none;
		min-height: 0;
		padding: 0;
		background: #fff;
	}

	.layout-breit .site-main {
		padding-top: 20px;
	}
}

/* ---------------------------------------------------------------
   Typografie im Inhalt
   --------------------------------------------------------------- */
.site-main h1,
.site-main h2,
.site-main h3 {
	font-family: var(--schrift);
	color: var(--text);
}

/* Große Überschrift mit grüner Unterstreichung je Zeile */
.seitentitel {
	margin: 24px 0 30px;
	font-size: 38px;
	font-weight: 400;
	line-height: 1.4;
}

.seitentitel span {
	border-bottom: 3px solid var(--gruen);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* :where() hält die Grundregeln schwach, damit Bausteine sie ohne !important überschreiben */
:where(.site-main) h2 {
	margin: 30px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.untertitel {
	margin: -10px 0 20px;
	font-weight: 700;
}

:where(.site-main) h3 {
	margin: 24px 0 4px;
	font-size: var(--groesse-text);
	font-weight: 700;
	line-height: 1.3;
}

:where(.site-main) :is(p, li, table) {
	font-size: var(--groesse-text);
	line-height: 1.5;
	color: var(--text-absatz);
}

:where(.site-main) p {
	margin: 0 0 8px;
}

/* Links im Fließtext: nicht nur an der Farbe erkennbar, sondern dezent unterstrichen.
   Lange Adressen (z. B. in der Datenschutzerklärung) dürfen umbrechen. */
.text a,
.termin-fakten dd a {
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: .18em;
	transition: text-decoration-color .15s ease;
}

.text a:hover,
.termin-fakten dd a:hover {
	text-decoration-color: currentColor;
}

.text > h2 + p {
	margin-top: 4px;
}

.text p + p {
	margin-top: 16px;
}

/* Listen mit grünem Plus */
.site-main ul:not([class]) {
	list-style: none;
	margin: 20px 0;
	padding-left: 1.4em;
}

.site-main ul:not([class]) li {
	position: relative;
	margin-bottom: 15px;
}

.site-main ul:not([class]) li::before {
	content: "+";
	position: absolute;
	left: -1.4em;
	color: var(--gruen);
	font-weight: 700;
}

.site-main li p {
	margin: 0;
	font-size: inherit;
}

@media (max-width: 767px) {
	.seitentitel {
		font-size: 30px;
	}

	:where(.site-main) h2 {
		font-size: 17px;
	}

}

.zurueck {
	margin-bottom: 20px;
}

/* ---------------------------------------------------------------
   Startseite
   --------------------------------------------------------------- */
.seite-home .seitentitel {
	margin-bottom: 40px;
}

.hinweis {
	margin-bottom: 30px;
	padding: 16px 20px;
	border-left: 3px solid var(--gruen);
	background: var(--gruen-hell);
}

/* Knöpfe unter einer Terminliste */
.weiter-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.weiter-links .action-button {
	padding: 14px 18px;
	font-size: var(--groesse-text);
}

.action-button-voll {
	background: var(--gruen-text);
	color: #fff;
}

.action-button-voll:hover {
	background: #006b23;
	border-color: #006b23;
}

/* ---------------------------------------------------------------
   Termine – eine Darstellung für alle Seiten (termin/liste.php):
   Kasten mit feinen Linien, je Termin Kalenderblatt, Kicker, Titel.
   Startseite: Zeile ist ein Link. „Aktuelles“: Infos offen.
   Jahresplan/Angebote: Infos klappen auf.
   --------------------------------------------------------------- */
.abschnitt {
	margin-top: 50px;
}

.mitteilungen {
	margin-top: 60px;
}

.leer,
.termin-folgt {
	font-style: italic;
}

/* Überschriften über den Listen („Die nächsten Termine“, „Kommende …“, „Vergangene …“) */
.site-main .plan-titel {
	margin: 30px 0 0;
	font-size: var(--groesse-text);
	font-weight: 700;
}

.site-main .plan-titel-vergangen {
	margin-top: 50px;
	color: var(--grau-leise);
}

.plan-notiz {
	margin-top: 12px;
	font-style: italic;
}

/* Kalender-Abo unter dem Jahresplan */
.kalender-abo .plan-titel {
	margin-bottom: 6px;
}

.kalender-abo .weiter-links {
	margin: 16px 0 12px;
}

.kalender-abo-adresse {
	color: var(--grau-leise);
	font-size: var(--groesse-klein);
}

/* Kalenderblatt (termin/kalenderblatt.php) */
.kalenderblatt {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--gruen-text);
	color: #fff;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.kalenderblatt-tag {
	font-size: 24px;
	font-weight: 700;
}

/* Zeitraum („16.–21.“) passt so in dieselbe Breite – alle Titel fluchten */
.kalenderblatt-tag.kalenderblatt-spanne {
	font-size: 14px;
}

.kalenderblatt-monat {
	font-size: var(--groesse-klein);
}

/* über das Monatsende („Dez.–Jan.“) */
.kalenderblatt-monat.kalenderblatt-spanne {
	font-size: 12px;
}

/* kleine Zeile über dem Titel: „Donnerstag · Seniorenwanderungen · mit RMV“ */
.termin-kicker {
	display: block;
	margin: 0 0 2px;
	font-size: var(--groesse-klein);
	font-weight: 400;
	line-height: 1.4;
	color: var(--grau-leise);
}

/* Liste */
.terminliste {
	--innen: 20px;
	--blatt: 64px;
	--abstand: 18px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	border: 1px solid var(--grau-linie);
	font-size: var(--groesse-text);
	line-height: 1.4;
}

.terminliste > li {
	background: #fff;
}

.terminliste > li + li {
	border-top: 1px solid var(--grau-linie);
}

/* Jahreswechsel in der Terminliste: schmale Zeile mit der Jahreszahl */
.terminliste > .terminliste-jahr {
	padding: 6px var(--innen);
	background: #f5f5f4;
	color: var(--grau-leise);
	font-size: var(--groesse-klein);
	font-weight: 700;
}

.terminliste-zeile {
	display: grid;
	grid-template-columns: auto 1fr 28px;
	column-gap: var(--abstand);
	align-items: center;
	padding: 14px var(--innen);
	color: var(--text);
	transition: background-color .2s ease;
}

a.terminliste-zeile {
	text-decoration: none;
}

.terminliste-text {
	min-width: 0;
}

.terminliste-titel {
	display: block;
	font-weight: 700;
	line-height: 1.3; /* fett und mehrzeilig wirkt 1,4 wie vom Fließtext zu locker */
	transition: color .2s ease;
}

/* Infos fluchten mit dem Titel */
.terminliste-details-innen {
	padding: 0 calc(var(--innen) + 28px + var(--abstand)) 20px calc(var(--innen) + var(--blatt) + var(--abstand));
}

.terminliste-details-innen > :last-child,
.terminliste-details-innen .termin-text > :last-child {
	margin-bottom: 0;
}

.terminliste-details-innen .termin-fakten {
	margin-bottom: 12px;
}

.terminliste-details-innen .termin-text p {
	margin-bottom: 8px;
}

/* Aufklappen: main.js animiert die Höhe; der Rand sitzt innen, damit es bis auf 0 zusammenklappt */
.terminliste summary {
	cursor: pointer;
	list-style: none;
}

.terminliste summary::-webkit-details-marker {
	display: none;
}

.terminliste-details {
	overflow: hidden;
}

/* aufgeklappt: der ganze Termin hellgrün hinterlegt – dieselbe Fläche wie beim Überfahren der Zeile */
.terminliste details {
	transition: background-color .25s ease;
}

.terminliste details[open]:not([data-schliesst]) {
	background: var(--gruen-hell);
}

.terminliste details[open]:not([data-schliesst]) .terminliste-titel {
	color: var(--gruen-text);
}

/* Symbol aufgeklappt wie beim Überfahren: grüner Kreis, weißes Minus */
.terminliste details[open]:not([data-schliesst]) .terminliste-icon {
	background: var(--gruen-text);
}

.terminliste details[open]:not([data-schliesst]) .terminliste-icon::before,
.terminliste details[open]:not([data-schliesst]) .terminliste-icon::after {
	background: #fff;
}

/* Symbol rechts: Plus im Kreis (wird beim Aufklappen zum Minus) bzw. Pfeil bei Links */
.terminliste-icon {
	grid-column: -2;
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--gruen-hell);
	transition: background-color .25s ease;
}

.terminliste-icon::before,
.terminliste-icon::after {
	content: "";
	position: absolute;
	top: 13px;
	left: 8px;
	width: 12px;
	height: 2px;
	border-radius: 1px;
	background: var(--gruen-text);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .25s ease;
}

.terminliste-icon::after {
	transform: rotate(90deg);
}

.terminliste details[open]:not([data-schliesst]) .terminliste-icon::after {
	transform: rotate(0deg);
}

.terminliste-icon-pfeil::before {
	top: 10px;
	left: 9px;
	width: 7px;
	height: 7px;
	border-radius: 0;
	background: none;
	border-top: 2px solid var(--gruen-text);
	border-right: 2px solid var(--gruen-text);
	transform: rotate(45deg);
	transition: border-color .25s ease;
}

.terminliste-icon-pfeil::after {
	display: none;
}

/* Hover nur mit Maus – auf dem Handy bliebe er nach dem Antippen hängen */
@media (hover: hover) {
	.terminliste summary:hover,
	a.terminliste-zeile:hover {
		background: var(--gruen-hell);
	}

	.terminliste summary:hover .terminliste-titel,
	a.terminliste-zeile:hover .terminliste-titel {
		color: var(--gruen-text);
	}

	.terminliste summary:hover .terminliste-icon,
	a.terminliste-zeile:hover .terminliste-icon {
		background: var(--gruen-text);
	}

	.terminliste summary:hover .terminliste-icon::before,
	.terminliste summary:hover .terminliste-icon::after {
		background: #fff;
	}

	a.terminliste-zeile:hover .terminliste-icon-pfeil::before {
		border-color: #fff;
	}
}

/* Telefonnummer hinter Knopf (main.js): sieht aus wie ein Link mit Telefon-Symbol */
.nummer-zeigen {
	display: inline-flex;
	align-items: baseline;
	gap: .3em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--gruen-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: .18em;
	white-space: nowrap;
	cursor: pointer;
}

.nummer-zeigen::before {
	content: "";
	align-self: center;
	width: .85em;
	height: .85em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
	text-decoration: none;
}

.nummer-zeigen:hover {
	text-decoration-color: currentColor;
}

/* Steckbrief: Treffpunkt, Wanderzeit, Kosten, Anmeldung – Beschriftung fett davor. Zwischen den Angaben
   keine Linien; nur je eine unter dem Titel und vor der Beschreibung gliedert den Termin */
.terminliste-details-innen > :first-child,
.termin-fakten + .termin-text {
	padding-top: 12px;
	border-top: 1px solid var(--grau-linie);
}

.termin-fakten {
	display: grid;
	grid-template-columns: max-content 1fr;
	row-gap: 6px;
	margin: 0 0 16px;
	font-size: var(--groesse-text);
	line-height: 1.5;
}

.termin-fakten > div {
	display: contents;
}



.termin-fakten dt {
	padding-right: 20px;
	font-weight: 700;
	color: var(--text);
}

.termin-fakten dd {
	margin: 0;
	color: var(--text-absatz);
}

/* schmal: kleineres Kalenderblatt, Infos ohne Einzug, Steckbrief untereinander */
@media (max-width: 600px) {
	.terminliste {
		--innen: 14px;
		--blatt: 56px;
		--abstand: 14px;
	}

	.terminliste-zeile {
		padding: 12px var(--innen);
	}

	.kalenderblatt {
		width: 56px;
		height: 56px;
	}

	.kalenderblatt-tag.kalenderblatt-spanne {
		font-size: 13px;
	}

	.kalenderblatt-tag {
		font-size: 21px;
	}

	.terminliste-details-innen {
		padding: 0 var(--innen) 16px;
	}

	/* untereinander: Beschriftung über dem Wert, Abstand zwischen den Paaren */
	.termin-fakten {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.termin-fakten dd + dt,
	.termin-fakten > div + div dt {
		margin-top: 10px;
	}
}

/* ---------------------------------------------------------------
   Download-Knopf (Wanderprogramm, Mitgliedsantrag)
   --------------------------------------------------------------- */
.download {
	margin: 10px 0 30px;
}

.download-button {
	position: relative;
	display: inline-block;
	padding: 30px 30px 30px 100px;
	background: #fff;
	box-shadow: var(--schatten);
	transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
	font-size: var(--groesse-text);
}

.download-button small {
	display: block;
	margin-top: 4px;
	color: var(--grau-leise);
	font-size: var(--groesse-klein);
}

.download-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--schatten-hover);
	text-decoration: none;
}

/* Dokument-Symbol links, senkrecht mittig (download.php) */
.download-symbol {
	position: absolute;
	left: 24px;
	top: 50%;
	width: 52px;
	height: 60px;
	transform: translateY(-50%);
	color: #9a9a9a;
}

@media (max-width: 500px) {
	.download-button {
		display: block;
		padding: 20px 20px 20px 80px;
	}

	.download-symbol {
		left: 18px;
		width: 42px;
		height: 48px;
	}
}

/* ---------------------------------------------------------------
   Wanderangebote: Kacheln mit Symbol
   --------------------------------------------------------------- */
.wanderangebote {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.wanderangebot {
	display: block;
	min-height: 180px;
	padding-bottom: 16px;
	hyphens: auto;
	-webkit-hyphens: auto;
	padding-top: 110px;
	text-align: center;
	font-size: var(--groesse-text);
	background: #fff var(--icon) no-repeat center 30px / 120px;
	box-shadow: var(--schatten);
}

.wanderangebot:hover {
	box-shadow: var(--schatten-hover);
	text-decoration: none;
}

.wanderangebot small {
	display: block;
	color: var(--grau-leise);
	font-size: var(--groesse-klein);
}

@media (max-width: 900px) {
	.wanderangebote {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.wanderangebote {
		gap: 12px;
	}

	.wanderangebot {
		min-height: 120px;
		padding-top: 80px;
		background-position: center 10px;
	}

	.wanderangebot small {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Fotos
   --------------------------------------------------------------- */
.fotojahr-titel {
	margin: 50px 0 0;
	font-size: 20px;
}

.album {
	position: relative;
	padding-top: 40px;
}

/* der kurze graue Strich als Trenner zwischen den Alben */
.album::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 14px;
	background: var(--grau-linie);
}

.album-titel {
	margin: 0 0 14px;
	font-size: var(--groesse-text);
	font-weight: 400;
}

.album-titel a {
	color: var(--text-absatz);
}

.fotoalbum {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	padding-bottom: 40px;
}

.einzelnes-foto {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #eee;
}

.einzelnes-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .95;
	transition: opacity .2s ease-in-out;
}

.einzelnes-foto:hover img {
	opacity: 1;
}

@media (max-width: 767px) {
	.fotoalbum {
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
	}
}

/* ---------------------------------------------------------------
   Fuß
   --------------------------------------------------------------- */
.site-footer {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 50px var(--rand);
}

#footer-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 20px;
	display: flex;
	gap: 20px;
}

#footer-menu a {
	display: inline-block;
	padding: 12px 0;
	color: var(--grau-leise);
	font-size: var(--groesse-klein);
}

/* schmal: Fußzeile fluchtet mit dem Inhalt */
@media (max-width: 1023px) {
	.site-footer {
		padding-top: 30px;
	}

	#footer-menu {
		padding-left: 0;
	}
}

/* Druck: z. B. den Jahresplan zum Mitnehmen – alle Termine aufgeklappt (main.js), ohne Menü und Bilder */
@media print {
	@page {
		margin: 15mm 15mm 18mm;
	}

	html {
		font-size: 11pt;
	}

	.site-header nav,
	.menu-toggle,
	.mitglied-werden,
	.site-footer,
	.skip-link,
	.download,
	.weiter-links,
	.zurueck,
	.terminliste-icon,
	.menue-schleier {
		display: none !important;
	}

	.site-header {
		position: static;
		box-shadow: none !important;
		padding: 0 0 8mm;
	}

	.layout-text,
	.layout-text .site-main {
		background: none !important;
		padding: 0;
		max-width: none;
	}

	:where(.site-main) :is(p, li, table),
	.terminliste,
	.termin-fakten {
		font-size: 11pt;
	}

	.seitentitel {
		font-size: 22pt;
		margin: 0 0 6mm;
	}

	/* Termine nicht über den Seitenumbruch zerreißen, Effekte weg */
	.terminliste > li {
		break-inside: avoid;
	}

	.terminliste-details {
		height: auto !important;
	}

	.terminliste-details-innen {
		opacity: 1 !important;
		transform: none !important;
	}

	.kalenderblatt {
		background: none;
		color: inherit;
		border: 1px solid #999;
		border-top: 3px solid #000;
	}

	a,
	.terminliste-titel {
		color: inherit !important;
		text-decoration: none !important;
	}

	/* auf Papier zählt, was kommt */
	.kalender-abo,
	.plan-titel-vergangen,
	.plan-titel-vergangen + .terminliste {
		display: none !important;
	}

	h1,
	h2,
	h3,
	.plan-titel {
		break-after: avoid;
	}

	.reveal-bereit {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------------------------------------------------------------
   Bewegung: Inhalte gleiten beim Scrollen sanft herein (main.js)
   --------------------------------------------------------------- */
.reveal-bereit {
	opacity: 0;
	transform: translateY(14px);
}

.reveal-bereit.sichtbar {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .6s cubic-bezier(.25, .8, .3, 1);
}

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