/* =========================================================================
   Komponenten: Symbole, Überzeilen, Titel, Knöpfe, Pills, Karten
   ========================================================================= */

/* --- Gezeichnete Symbole aus dem Logo ------------------------------------- */

.symbol {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	overflow: visible;
}

.symbol--blau { color: var(--logo-blau); }
.symbol--gruen { color: var(--logo-gruen); }
.symbol--gelb { color: var(--logo-gelb); }

/* Die Symbole sind unterschiedlich proportioniert (Dreieck breiter). */
.symbol--dreieck { width: 1.03em; }

.symbole {
	display: inline-flex;
	align-items: center;
	gap: 0.32em;
}

.symbole--klein {
	font-size: 14px;
}

/* --- Überzeile + Sektionstitel (Entwurf B) -------------------------------- */

.ueberzeile {
	font-family: var(--schrift-text);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.ueberzeile--blau { color: var(--blau-text); }
.ueberzeile--gruen { color: var(--gruen-text); }
.ueberzeile--gelb { color: var(--gelb-text); }

.sektion-kopf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.sektion-titel {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* --- Knöpfe ---------------------------------------------------------------- */

.knoepfe {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.knopf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	padding: 13px 24px;
	font-family: var(--schrift-text);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.knopf--voll {
	background: var(--blau);
	color: var(--weiss);
	border: 0;
}

.knopf--voll:hover {
	color: var(--weiss);
	background: #286aa6;
	transform: translateY(-1px);
	box-shadow: var(--schatten-knopf);
}

.knopf--rand {
	background: transparent;
	color: var(--tinte);
	border: 1.5px solid var(--tinte);
	padding: 12px 22px;
}

.knopf--rand:hover {
	color: var(--tinte);
	background: rgba(37, 50, 58, 0.06);
}

.knopf--klein {
	padding: 9px 16px;
	font-size: 14px;
}

/* --- Textlink mit Pfeil ------------------------------------------------- */

.textlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 800;
	font-size: 15px;
	color: var(--tinte);
	text-decoration: none;
	border-bottom: 2px solid var(--gelb);
	padding-bottom: 2px;
}

.textlink::after {
	content: '→';
	transition: transform 0.15s ease;
}

.textlink:hover {
	color: var(--blau-text);
}

.textlink:hover::after {
	transform: translateX(3px);
}

.textlink--zurueck::after {
	content: none;
}

.textlink--zurueck::before {
	content: '←';
}

/* --- Pills (Kategorien, Unternavigation, Filter) --------------------------- */

.pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 999px;
	text-decoration: none;
	line-height: 1.4;
}

.pill--blau { background: var(--blau); color: var(--weiss); }
.pill--gruen { background: var(--gruen-text); color: var(--weiss); }
.pill--gelb { background: var(--gelb); color: var(--tinte); }

a.pill--blau:hover,
a.pill--gruen:hover { color: var(--weiss); }

/* Navigations-Pills: gleiche Form wie die Hauptnavigation */
.unternav .pill,
.filter .pill {
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	padding: 8px 15px;
	color: #223333;
	background: rgba(255, 255, 255, 0.7);
	border: 2px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.unternav .pill:hover,
.filter .pill:hover {
	background: var(--weiss);
	transform: translateY(-1px);
	color: var(--tinte);
}

.unternav .pill.ist-aktiv,
.filter .pill.ist-aktiv {
	background: var(--blau);
	color: var(--weiss);
	border-color: rgba(255, 255, 255, 0.9);
	box-shadow: var(--schatten-knopf);
}

/* --- Punkte (Termine, Datum) ----------------------------------------------- */

.punkt {
	display: inline-block;
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.punkt--blau { background: var(--blau); }
.punkt--gruen { background: var(--gruen); }
.punkt--gelb { background: var(--gelb); }

/* --- Karte (weisse Fläche mit warmem Rand) -------------------------------- */

.karte {
	background: var(--weiss);
	border: 1px solid var(--rahmen);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
}

/* --- Bildrahmen (abgerundet, warmer Rand) --------------------------------- */

.bildrahmen {
	border-radius: var(--radius-gross);
	overflow: hidden;
	border: 1px solid var(--rahmen);
	box-shadow: var(--schatten);
	background: var(--gruen-flaeche);
}

.bildrahmen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--grau);
}

.leer {
	color: var(--grau);
	padding: 18px 22px;
}