/* Gesangverein Taunusliebe – Grundlayout */

:root {
	--rot: #c4161c;
	--gruen: #1e7d34;
	--text: #222;
	--text-leise: #5c5c5c;
	--linie: #ddd;
	--creme: #fffaed; /* Seitenhintergrund wie auf der alten Seite */
	--breite: 1100px;
	--textbreite: 46rem; /* ca. 70 Zeichen pro Zeile – angenehm lesbar */
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font: 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--text);
	background: var(--creme);
}

a { color: var(--gruen); }
a:hover { color: var(--rot); }
img { max-width: 100%; height: auto; }

/* Kopf mit Logo-Grafik und Hauptnavigation */

.kopf { border-top: 6px solid var(--rot); }
.kopf-inner { max-width: var(--breite); margin: 0 auto; padding: 1rem; }

/* Wappen + Vereinsname in Kursiv wie die Überschrift der alten Seite */
.kopf-logo {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: #333;
	text-decoration: none;
}
.kopf-logo:hover { color: #333; }
.kopf-logo img { width: auto; height: 64px; }
.kopf-logo span { font: italic 1.75rem/1.2 "Times New Roman", Georgia, serif; }

@media (max-width: 600px) {
	.kopf-logo img { height: 48px; }
	.kopf-logo span { font-size: 1.2rem; }
}

/* Startseite: großes Foto oben in der Inhaltskarte */
.startbild { display: block; width: 100%; height: auto; margin-bottom: 1.5rem; border-radius: 6px; }

/* Hauptnavigation
 *
 * Die neun Punkte brauchen in einer Zeile gut 860 px – darunter klappen sie
 * hinter dem Menü-Knopf weg. Den Knopf schaltet erst scripts/main.js scharf
 * (Klasse „mit-knopf“), ohne JavaScript bleibt das Menü also sichtbar.
 */

.hauptnavi { background: var(--gruen); }

.navi-knopf {
	display: none;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.navi-striche, .navi-striche::before, .navi-striche::after {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
}
.navi-striche { position: relative; }
.navi-striche::before, .navi-striche::after { position: absolute; content: ""; }
.navi-striche::before { top: -7px; }
.navi-striche::after { top: 7px; }

@media (max-width: 880px) {
	.hauptnavi.mit-knopf .navi-knopf { display: flex; }
	.hauptnavi.mit-knopf ul { display: none; }
	.hauptnavi.mit-knopf ul.offen { display: block; padding-bottom: 0.5rem; }
	.hauptnavi.mit-knopf ul.offen a { padding: 0.6rem 1rem; }
}

.hauptnavi ul {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--breite);
	margin: 0 auto;
	padding: 0 0.5rem;
	list-style: none;
}
.hauptnavi a {
	display: block;
	padding: 0.6rem 0.85rem;
	color: #fff;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
}
.hauptnavi a:hover,
.hauptnavi a[aria-current] { background: rgba(0, 0, 0, 0.2); color: #fff; }

/* Inhalt */

/* Inhalt als weiße Karte auf cremefarbenem Grund */
.inhalt {
	max-width: var(--breite);
	margin: 1.5rem auto 0;
	padding: 2rem 2rem 3rem;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.12);
}
@media (max-width: 1132px) {
	.inhalt { margin: 1.5rem 1rem 0; }
}
@media (max-width: 600px) {
	.inhalt { margin: 0; padding: 1.5rem 1rem 2.5rem; border-radius: 0; box-shadow: none; }
}
.inhalt h1 { margin: 0 0 1rem; color: var(--rot); font-size: 1.75rem; font-weight: 600; line-height: 1.25; }
.inhalt h2 { font-size: 1.3rem; line-height: 1.3; }
.bearbeiten { margin-top: 3rem; font-size: 0.9rem; }

.fuss {
	padding: 1.25rem 1rem 1.5rem;
	color: var(--text-leise);
	font-size: 0.95rem;
	text-align: center;
}

/* Galerie-Übersicht */

.alben {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.album-kachel a {
	display: block;
	height: 100%;
	border: 1px solid var(--linie);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	color: var(--text);
	text-decoration: none;
	transition: box-shadow 0.15s;
}
.album-kachel a:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
.album-kachel img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.album-titel { display: block; padding: 0.75rem 1rem 0; font-weight: 600; }
.album-info { display: block; padding: 0 1rem 0.75rem; color: var(--text-leise); font-size: 0.95rem; }

/* Einzelnes Album */

.album-meta { color: var(--text-leise); }
.album-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.5rem;
}
.album-raster a { display: block; border-radius: 4px; overflow: hidden; }
.album-raster img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.2s; }
.album-raster a:hover img { transform: scale(1.04); }

/* Bildunterschrift in der Lightbox */

.pswp__bildunterschrift {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	transform: translateX(-50%);
	max-width: 90%;
	padding: 0.4rem 0.8rem;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 1rem;
	text-align: center;
}
.pswp__bildunterschrift:empty { display: none; }

/* Hilfsklassen */

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

/* Fließtext aus dem Editor */

/* Fließtext, Termine und Beitragslisten auf Lesebreite begrenzen; Bildraster dürfen breiter sein */
.text, .termine, .vergangene-termine, .beitraege, .album-meta, .album-beschreibung, .dateien, .formular { max-width: var(--textbreite); }

.text img { display: block; height: auto; margin: 1.25rem 0; border-radius: 4px; }
.text h2 { color: var(--rot); font-weight: 600; }
.text table { border-collapse: collapse; }
.text td, .text th { padding: 0.3rem 0.6rem; border: 1px solid var(--linie); vertical-align: top; }

.datum { color: var(--text-leise); font-size: 0.95rem; }

.bild-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.5rem;
	margin: 1.5rem 0;
}
.bild-raster a { display: block; border-radius: 4px; overflow: hidden; }
.bild-raster img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.dateien { padding-left: 1.2rem; }
.dateien li { margin-bottom: 0.4rem; }
.datei-info { color: var(--text-leise); font-size: 0.9rem; }

/* Termine */

.termine { margin: 0 0 1rem; padding: 0; list-style: none; }
.termine li {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	column-gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--linie);
}
.termin-datum { grid-row: span 3; font-weight: 600; color: var(--gruen); }
.termin-titel { grid-column: 2; grid-row: 1; }
.termin-zeit, .termin-ort { grid-column: 2; color: var(--text-leise); font-size: 0.95rem; }
.termin-zeit { grid-row: 2; }
.termin-ort { grid-row: 3; }
.vergangene-termine { margin-top: 2rem; }
.vergangene-termine summary { cursor: pointer; color: var(--gruen); font-weight: 600; }
.vergangene-termine .termin-datum { color: var(--text-leise); }

@media (max-width: 480px) {
	.termine li { grid-template-columns: 1fr; }
	.termin-datum, .termin-titel, .termin-zeit, .termin-ort { grid-column: 1; grid-row: auto; }
}

/* Startseite */

.start-spalten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0 3rem;
}
.beitraege-kurz { padding-left: 1.2rem; }
.beitraege-kurz li { margin-bottom: 0.5rem; }

/* Beitragslisten */

.beitraege { margin: 0; padding: 0; list-style: none; }
.beitrag-kurz {
	display: flex;
	gap: 1.25rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--linie);
}
.beitrag-kurz h2 { margin: 0.1rem 0 0.4rem; font-size: 1.15rem; }
.beitrag-kurz h2 a { color: var(--text); text-decoration: none; }
.beitrag-kurz h2 a:hover { color: var(--rot); }
.beitrag-kurz p { margin: 0; }
.beitrag-bild { flex: 0 0 160px; }
.beitrag-bild img { display: block; width: 160px; height: 120px; object-fit: cover; border-radius: 4px; }

@media (max-width: 480px) {
	.beitrag-kurz { flex-direction: column; }
	.beitrag-bild, .beitrag-bild img { width: 100%; height: auto; }
}

.seitennavi { display: flex; gap: 0.5rem; padding: 0; list-style: none; flex-wrap: wrap; }
.seitennavi a, .seitennavi span { display: block; padding: 0.4rem 0.8rem; border: 1px solid var(--linie); border-radius: 4px; }
.seitennavi .MarkupPagerNavOn a { background: var(--gruen); color: #fff; border-color: var(--gruen); }

/* Formulare und Hinweise */

.formular { display: grid; gap: 0.4rem; max-width: 22rem; }
.formular input {
	padding: 0.6rem;
	border: 1px solid #aaa;
	border-radius: 4px;
	font: inherit;
}
.formular button {
	margin-top: 0.8rem;
	padding: 0.7rem;
	border: 0;
	border-radius: 4px;
	background: var(--gruen);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.formular label { margin-top: 0.6rem; font-weight: 600; }
.fehler { padding: 0.75rem 1rem; border-left: 4px solid var(--rot); background: #fdecec; }
.hinweis { padding: 0.75rem 1rem; border-left: 4px solid var(--gruen); background: #eaf5ec; }
.angemeldet { color: var(--text-leise); font-size: 0.95rem; }

.fuss-links a { color: var(--text-leise); }