/* GBV Termine: Schaukasten-Zettel (17.10.2026, Webprojekt Donauwörth)
   Farben aus dem Design-Konzept: Erdbraun #603c0c, Creme #fbf4dc, Grün #4f7f2d, Dunkelgrün #3f6f25 und #184824,
   Hellgrün #f3f8f1, Gelb #e4c00c, Text #2e2e2e. Schriften kommen aus den Theme-Optionen (Bitter, Lexend). */

.gbv-tm {
	--gbv-tm-braun: #603c0c;
	--gbv-tm-creme: #fbf4dc;
	--gbv-tm-gruen: #4f7f2d;
	--gbv-tm-gruen-dunkel: #3f6f25;
	--gbv-tm-gruen-tief: #184824;
	--gbv-tm-hellgruen: #f3f8f1;
	--gbv-tm-gelb: #e4c00c;
	--gbv-tm-text: #2e2e2e;
	--gbv-tm-grau: #555555;
	--gbv-tm-schatten: 0 6px 14px rgba(96, 60, 12, .22), 0 1px 2px rgba(96, 60, 12, .2);
	color: var(--gbv-tm-text);
}

/* Nur für Vorleseprogramme */
.gbv-tm .gbv-tm-sr {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Schaukasten: brauner Rahmen, Pinnwand in Creme mit feiner Körnung */
.gbv-tm-kasten {
	background: var(--gbv-tm-braun);
	border-radius: 10px;
	padding: 14px;
	box-shadow: inset 0 0 0 2px rgba(251, 244, 220, .18);
}
.gbv-tm-kork {
	background-color: var(--gbv-tm-creme);
	background-image: radial-gradient(rgba(96, 60, 12, .12) 1px, transparent 1.4px), radial-gradient(rgba(96, 60, 12, .08) 1px, transparent 1.4px);
	background-size: 14px 14px, 22px 22px;
	background-position: 0 0, 7px 9px;
	border-radius: 6px;
	padding: 48px 32px 36px;
}

/* Liste der Zettel */
#top .gbv-tm .gbv-tm-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 44px 30px;
}
#top .gbv-tm--start .gbv-tm-liste {
	grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
	justify-content: center;
	padding-top: 12px;
}
#top .gbv-tm .gbv-tm-liste > li { margin: 0; }

/* Ein Zettel, leicht schräg angepinnt. Beim Überfahren oder per Tastatur gerade gerückt. */
#top .gbv-tm .gbv-tm-zettel {
	position: relative;
	background: #fff;
	padding: 30px 32px 22px;
	box-shadow: var(--gbv-tm-schatten);
	transform: rotate(var(--gbv-tm-dreh, -1deg));
	transition: transform .2s;
}
.gbv-tm .gbv-tm-zettel:nth-child(3n+2) { --gbv-tm-dreh: 1.2deg; }
.gbv-tm .gbv-tm-zettel:nth-child(3n+3) { --gbv-tm-dreh: -.4deg; }
#top .gbv-tm .gbv-tm-zettel:hover,
#top .gbv-tm .gbv-tm-zettel:focus-within { transform: rotate(0) translateY(-2px); }

/* Pinnnadel, Farbe nach Art des Termins */
.gbv-tm .gbv-tm-zettel::before {
	content: '';
	position: absolute;
	top: -10px; left: 50%;
	width: 20px; height: 20px;
	margin-left: -10px;
	border-radius: 50%;
	background: var(--gbv-tm-pin, var(--gbv-tm-gelb));
	box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .18), 0 3px 4px rgba(0, 0, 0, .35);
}
.gbv-tm .gbv-tm-zettel[data-art="versammlung"] { --gbv-tm-pin: var(--gbv-tm-braun); }
.gbv-tm .gbv-tm-zettel[data-art="kurs"],
.gbv-tm .gbv-tm-zettel[data-art="vortrag"] { --gbv-tm-pin: var(--gbv-tm-gruen); }
.gbv-tm .gbv-tm-zettel[data-art="ausflug"] { --gbv-tm-pin: var(--gbv-tm-gruen-tief); }

/* Kopf: Datums-Kachel, Art, Titel */
.gbv-tm .gbv-tm-kopf { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.gbv-tm .gbv-tm-datum {
	flex: 0 0 auto;
	width: 68px;
	text-align: center;
	border: 2px solid var(--gbv-tm-braun);
	border-radius: 6px;
	overflow: hidden;
	color: var(--gbv-tm-braun);
	background: #fff;
	line-height: 1.2;
}
.gbv-tm .gbv-tm-datum > span[aria-hidden] { display: block; }
.gbv-tm .gbv-tm-mon {
	display: block;
	background: var(--gbv-tm-braun);
	color: var(--gbv-tm-creme);
	font-size: 13px; font-weight: 600;
	padding: 5px 0;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.gbv-tm .gbv-tm-tag {
	display: block;
	font-family: var(--enfold-font-family-heading, Georgia, serif);
	font-size: 28px; font-weight: 700;
	padding: 4px 0 0;
}
.gbv-tm .gbv-tm-wt { display: block; font-size: 12px; padding: 0 0 5px; }
.gbv-tm .gbv-tm-jahr { display: block; font-size: 12px; font-weight: 600; padding: 0 0 5px; margin-top: -3px; }
#top .gbv-tm .gbv-tm-art {
	margin: 0 0 4px;
	font-size: 12px; font-weight: 600;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gbv-tm-gruen-dunkel);
}
#top .gbv-tm .gbv-tm-titel {
	margin: 0;
	padding: 0;
	font-family: var(--enfold-font-family-heading, Georgia, serif);
	font-size: 21px; font-weight: 700;
	line-height: 1.25;
	color: var(--gbv-tm-braun);
	text-transform: none;
}

/* Uhrzeit, Ort, Hinweise */
#top .gbv-tm .gbv-tm-info { list-style: none; margin: 0 0 14px; padding: 0; font-size: 16px; line-height: 1.5; }
#top .gbv-tm .gbv-tm-info li { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; padding: 0; }
.gbv-tm .gbv-tm-info .gbv-tm-icon { flex: 0 0 18px; margin-top: 3px; color: var(--gbv-tm-gruen); }

/* Links: Einladung, In meinen Kalender */
#top .gbv-tm .gbv-tm-links {
	display: flex; flex-wrap: wrap; gap: 8px 18px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px dashed rgba(96, 60, 12, .3);
	font-size: 15px; font-weight: 500;
}
#top .gbv-tm .gbv-tm-links a { display: inline-flex; gap: 6px; align-items: center; color: var(--gbv-tm-gruen-dunkel); }
#top .gbv-tm .gbv-tm-links a:hover { color: var(--gbv-tm-gruen-tief); }
.gbv-tm .gbv-tm-links .gbv-tm-icon { flex: 0 0 16px; width: 16px; height: 16px; }

/* Abgesagt: Stempel und durchgestrichener Titel */
.gbv-tm .gbv-tm-zettel--abgesagt .gbv-tm-titel { text-decoration: line-through; text-decoration-thickness: 2px; }
.gbv-tm .gbv-tm-stempel {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 8px;
	border: 2px solid var(--gbv-tm-braun);
	border-radius: 4px;
	color: var(--gbv-tm-braun);
	font-size: 13px; font-weight: 700; line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	transform: rotate(-4deg);
}

/* Abstand zum Inhalt darunter, auf der Startseite zum Button „Alle Termine“ */
.gbv-tm--schaukasten { margin-bottom: 48px; }
.gbv-tm--start { margin-bottom: 36px; }

/* Leerer Schaukasten */
.gbv-tm .gbv-tm-leer { max-width: 460px; margin: 0 auto; text-align: center; }
#top .gbv-tm .gbv-tm-leer p { margin: 8px 0 0; }

/* Abo-Knopf wie der zweite Button des Design-Konzepts: weiß mit grünem Rand */
.gbv-tm .gbv-tm-abo { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 28px; }
#top .gbv-tm .gbv-tm-abo p { margin: 0; flex: 1 1 320px; font-size: 15px; color: var(--gbv-tm-grau); }
#top .gbv-tm a.gbv-tm-abo-knopf {
	display: inline-flex; gap: 8px; align-items: center;
	padding: 11px 22px;
	border: 2px solid var(--gbv-tm-gruen);
	border-radius: 6px;
	background: #fff;
	color: var(--gbv-tm-gruen-dunkel);
	font-size: 18px; font-weight: 600;
	text-decoration: none;
	transition: background-color .2s, transform .2s;
}
#top .gbv-tm a.gbv-tm-abo-knopf:hover { background: var(--gbv-tm-hellgruen); transform: translateY(-1px); }
.gbv-tm .gbv-tm-adresse { word-break: break-all; }

/* Rückblick auf das laufende Jahr: schlichte Liste unter dem Schaukasten */
#top .gbv-tm--rueckblick h2 { margin: 0 0 6px; }
#top .gbv-tm--rueckblick .gbv-tm-unter { margin: 0 0 18px; color: var(--gbv-tm-grau); }
#top .gbv-tm--rueckblick ol.gbv-tm-vergangen { list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.5; border-bottom: 1px solid rgba(96, 60, 12, .2); }
#top .gbv-tm--rueckblick ol.gbv-tm-vergangen li {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: 16px;
	align-items: baseline;
	margin: 0;
	padding: 10px 4px;
	border-top: 1px solid rgba(96, 60, 12, .2);
}
.gbv-tm--rueckblick time { font-size: 15px; color: var(--gbv-tm-grau); white-space: nowrap; }
#top .gbv-tm--rueckblick li a { font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--gbv-tm-gruen-dunkel); }
.gbv-tm--rueckblick .gbv-tm-abgesagt { color: var(--gbv-tm-grau); }

@media only screen and (max-width: 767px) {
	.gbv-tm-kork { padding: 40px 16px 28px; }
	#top .gbv-tm .gbv-tm-liste { grid-template-columns: 1fr; gap: 40px; }
	#top .gbv-tm--start .gbv-tm-liste { grid-template-columns: minmax(0, 340px); }
	#top .gbv-tm .gbv-tm-zettel { padding: 28px 24px 20px; }
	#top .gbv-tm--rueckblick ol.gbv-tm-vergangen li { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	#top .gbv-tm .gbv-tm-zettel,
	#top .gbv-tm a.gbv-tm-abo-knopf { transition: none; }
}