/*
Theme Name: BGV Baden
Theme URI: https://badischer-grillsportverein.de/
Author: Badischer Grillsportverein
Description: Vereins-Theme des Badischen Grillsportvereins in den badischen Landesfarben Gelb-Rot-Gelb – mit Terminverwaltung, Mitgliedsanträgen und geschütztem Mitgliederbereich. Lädt keine externen Schriften und setzt keine Tracking-Cookies.
Version: 2.5.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: bgv
*/

/* ==========================================================
   1. Design-Tokens – badische Farben (Gelb · Rot · Gelb)
   ========================================================== */
:root {
	--bgv-rot: #c8102e;
	--bgv-rot-dunkel: #9b0c23;
	--bgv-rot-hell: #e2001a;
	--bgv-gelb: #ffd200;
	--bgv-gelb-dunkel: #e6b800;
	--bgv-gelb-zart: #fff5c7;
	--bgv-kohle: #171311;
	--bgv-kohle-2: #231c18;
	--bgv-kohle-3: #2f2621;
	--bgv-creme: #fbf7ee;
	--bgv-weiss: #ffffff;
	--bgv-text: #2a2320;
	--bgv-muted: #6b615a;
	--bgv-linie: #e8dfcf;
	--bgv-gruen: #1f7a4d;

	--bgv-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
	--bgv-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--bgv-radius: 14px;
	--bgv-radius-gross: 22px;
	--bgv-schatten: 0 1px 2px rgba(23, 19, 17, .06), 0 8px 28px rgba(23, 19, 17, .08);
	--bgv-schatten-hoch: 0 2px 4px rgba(23, 19, 17, .08), 0 18px 48px rgba(23, 19, 17, .16);
	--bgv-breite: 1180px;
	--bgv-schmal: 780px;
	--bgv-glut: radial-gradient(1200px 520px at 85% 0%, rgba(200, 16, 46, .38), transparent 60%),
		radial-gradient(900px 420px at 0% 100%, rgba(255, 210, 0, .14), transparent 60%);
}

/* ==========================================================
   2. Basis
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
	margin: 0;
	font-family: var(--bgv-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--bgv-text);
	background: var(--bgv-creme);
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--bgv-rot); text-underline-offset: .18em; }
a:hover { color: var(--bgv-rot-dunkel); }
h1, h2, h3, h4 { font-family: var(--bgv-serif); line-height: 1.15; color: var(--bgv-kohle); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }
em { font-style: italic; }
:focus-visible { outline: 3px solid var(--bgv-gelb); outline-offset: 2px; border-radius: 4px; }
.screen-reader-text, .bgv-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 10px; left: 10px; z-index: 1000; width: auto; height: auto; clip: auto;
	background: var(--bgv-gelb); color: var(--bgv-kohle); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.wrap { width: 100%; max-width: var(--bgv-breite); margin: 0 auto; padding: 0 22px; }
.wrap--schmal { max-width: var(--bgv-schmal); }

/* Badische Flagge als Zierstreifen */
.baden-streifen {
	height: 6px;
	background: linear-gradient(to bottom, var(--bgv-gelb) 0 33.33%, var(--bgv-rot) 33.33% 66.66%, var(--bgv-gelb) 66.66% 100%);
}
.baden-band {
	display: inline-flex; width: 46px; height: 6px; border-radius: 3px; overflow: hidden; vertical-align: middle;
	background: linear-gradient(to right, var(--bgv-gelb) 0 33.33%, var(--bgv-rot) 33.33% 66.66%, var(--bgv-gelb) 66.66%);
}

/* ==========================================================
   3. Buttons, Kicker, Badges
   ========================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: .85em 1.5em; border-radius: 999px; border: 2px solid transparent;
	font: 700 .98rem/1.2 var(--bgv-sans); text-decoration: none; cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--gelb { background: var(--bgv-gelb); color: var(--bgv-kohle); box-shadow: 0 6px 20px rgba(255, 210, 0, .28); }
.btn--gelb:hover { background: #ffdc33; color: var(--bgv-kohle); }
.btn--rot { background: var(--bgv-rot); color: #fff; box-shadow: 0 6px 20px rgba(200, 16, 46, .25); }
.btn--rot:hover { background: var(--bgv-rot-dunkel); color: #fff; }
.btn--linie { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn--linie:hover { border-color: var(--bgv-gelb); color: var(--bgv-gelb); }
.btn--linie-dunkel { border-color: var(--bgv-linie); color: var(--bgv-kohle); background: #fff; }
.btn--linie-dunkel:hover { border-color: var(--bgv-rot); color: var(--bgv-rot); }
.btn--klein { padding: .55em 1.05em; font-size: .88rem; }
.btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; }

.kicker {
	display: inline-flex; align-items: center; gap: 12px;
	font: 700 .78rem/1.2 var(--bgv-sans); letter-spacing: .16em; text-transform: uppercase;
	color: var(--bgv-rot); margin-bottom: 18px;
}
.kicker--hell { color: var(--bgv-gelb); }
.badge {
	display: inline-block; padding: .25em .7em; border-radius: 999px;
	font: 700 .72rem/1.4 var(--bgv-sans); letter-spacing: .06em; text-transform: uppercase;
	background: var(--bgv-gelb-zart); color: #6b5300;
}
.badge--rot { background: rgba(200, 16, 46, .1); color: var(--bgv-rot); }
.badge--gruen { background: rgba(31, 122, 77, .12); color: var(--bgv-gruen); }

/* ==========================================================
   4. Header & Navigation
   ========================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(23, 19, 17, .96);
	backdrop-filter: saturate(1.3) blur(10px);
	-webkit-backdrop-filter: saturate(1.3) blur(10px);
	transition: box-shadow .2s ease;
}
.site-header.ist-gescrollt { box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; margin-right: auto; }
.marke:hover { color: #fff; }
.marke__logo {
	width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background: #fff;
	box-shadow: 0 0 0 2px var(--bgv-gelb), 0 0 0 4px var(--bgv-rot);
}
.marke__text { display: flex; flex-direction: column; line-height: 1.1; }
.marke__name { font: 700 1.02rem/1.15 var(--bgv-serif); letter-spacing: .02em; }
.marke__claim { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bgv-gelb); margin-top: 3px; }

.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.hauptnav a {
	display: block; padding: 10px 13px; border-radius: 10px;
	color: rgba(255, 255, 255, .86); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.hauptnav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.hauptnav .current-menu-item > a, .hauptnav .current_page_item > a, .hauptnav a[aria-current="page"] {
	color: var(--bgv-gelb);
	box-shadow: inset 0 -2px 0 var(--bgv-rot);
	border-radius: 10px 10px 0 0;
}
.header-aktion { display: flex; gap: 10px; align-items: center; }
.header-aktion .btn { padding: .65em 1.15em; font-size: .9rem; }

.nav-toggle {
	display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2);
	background: transparent; color: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle__balken, .nav-toggle__balken::before, .nav-toggle__balken::after {
	display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s ease;
}
.nav-toggle__balken::before, .nav-toggle__balken::after { content: ""; position: absolute; left: 0; }
.nav-toggle__balken::before { top: -6px; }
.nav-toggle__balken::after { top: 6px; }
.nav-offen .nav-toggle__balken { background: transparent; }
.nav-offen .nav-toggle__balken::before { transform: translateY(6px) rotate(45deg); }
.nav-offen .nav-toggle__balken::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1120px) {
	.nav-toggle { display: inline-flex; }
	.hauptnav {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--bgv-kohle); border-top: 1px solid rgba(255, 255, 255, .08);
		padding: 10px 22px 22px; display: none; box-shadow: 0 18px 30px rgba(0, 0, 0, .35);
	}
	.nav-offen .hauptnav { display: block; }
	.hauptnav ul { flex-direction: column; align-items: stretch; }
	.hauptnav a { padding: 13px 10px; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .06); border-radius: 0; }
	.hauptnav .current-menu-item > a, .hauptnav .current_page_item > a, .hauptnav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--bgv-rot); border-radius: 0; padding-left: 14px; }
	.header-aktion .btn--linie { display: none; }
}
@media (max-width: 560px) {
	.marke__claim { display: none; }
	.marke__name { font-size: .92rem; }
	.header-aktion .btn { padding: .6em .95em; font-size: .82rem; }
}

/* ==========================================================
   5. Startseite – Hero
   ========================================================== */
.hero {
	position: relative; overflow: hidden; color: #fff;
	background: var(--bgv-glut), var(--bgv-kohle);
	padding: clamp(70px, 10vw, 130px) 0 clamp(80px, 10vw, 140px);
}
.hero::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 140px;
	background: linear-gradient(to top, rgba(23, 19, 17, .6), transparent);
	pointer-events: none;
}
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 60px; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 6.4vw, 5rem); margin-bottom: 24px; }
.hero h1 em { color: var(--bgv-gelb); font-style: italic; }
.hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, .82); max-width: 36em; margin-bottom: 34px; }
.hero__siegel { position: relative; justify-self: center; width: min(360px, 100%); aspect-ratio: 1; }
.hero__siegel::before {
	content: ""; position: absolute; inset: -12%; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 140, 0, .35), rgba(200, 16, 46, .15) 45%, transparent 70%);
	filter: blur(6px); animation: glimmen 5s ease-in-out infinite;
}
.hero__siegel img {
	position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #fff;
	box-shadow: 0 0 0 6px var(--bgv-gelb), 0 0 0 12px var(--bgv-rot), 0 0 0 18px var(--bgv-gelb), 0 30px 80px rgba(0, 0, 0, .55);
}
.hero__seit {
	position: absolute; right: -6px; bottom: 8%; z-index: 2;
	background: var(--bgv-rot); color: #fff; border-radius: 16px; padding: 12px 18px; text-align: center;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .4); border: 2px solid var(--bgv-gelb);
}
.hero__seit strong { display: block; font: 700 1.6rem/1 var(--bgv-serif); }
.hero__seit span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
@keyframes glimmen { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hero__siegel::before { animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 860px) {
	.hero__grid { grid-template-columns: 1fr; gap: 50px; }
	.hero__siegel { width: min(260px, 70%); order: -1; }
}

/* ==========================================================
   6. Seitenkopf der Unterseiten (gleiche Bildsprache wie Start)
   ========================================================== */
.seitenkopf {
	position: relative; overflow: hidden; color: #fff;
	background: var(--bgv-glut), var(--bgv-kohle);
	padding: clamp(56px, 8vw, 96px) 0 clamp(60px, 8vw, 100px);
}
.seitenkopf h1 { color: #fff; margin-bottom: 14px; }
.seitenkopf h1 em { color: var(--bgv-gelb); }
.seitenkopf__lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: rgba(255, 255, 255, .8); max-width: 40em; margin: 0; }


/* ==========================================================
   7. Sektionen & Karten
   ========================================================== */
.sektion { padding: clamp(64px, 9vw, 110px) 0; }
.sektion--weiss { background: #fff; }
.sektion--dunkel { background: var(--bgv-kohle-2); color: rgba(255, 255, 255, .85); }
.sektion--dunkel h2, .sektion--dunkel h3 { color: #fff; }
.sektion--eng { padding: clamp(44px, 6vw, 70px) 0; }
.sektion__kopf { max-width: 720px; margin-bottom: 48px; }
.sektion__kopf--mitte { margin-left: auto; margin-right: auto; text-align: center; }
.sektion__kopf--mitte .kicker { justify-content: center; }
.sektion__kopf p { font-size: 1.12rem; color: var(--bgv-muted); }
.sektion--dunkel .sektion__kopf p { color: rgba(255, 255, 255, .7); }
.ueberlappt { margin-top: -56px; position: relative; z-index: 2; }

.raster { display: grid; gap: 24px; }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .raster--3, .raster--2, .raster--4 { grid-template-columns: 1fr; } }

.karte {
	background: #fff; border-radius: var(--bgv-radius-gross); padding: 32px; box-shadow: var(--bgv-schatten);
	border: 1px solid rgba(232, 223, 207, .7); position: relative;
}
.karte--wert { border-top: 4px solid var(--bgv-rot); transition: transform .2s ease, box-shadow .2s ease; }
.karte--wert:hover { transform: translateY(-3px); box-shadow: var(--bgv-schatten-hoch); }
.karte__nummer { font: 700 .78rem/1 var(--bgv-sans); letter-spacing: .16em; color: var(--bgv-rot); margin-bottom: 16px; display: block; }
.karte__nummer span { color: var(--bgv-muted); }
.karte h3 { margin-bottom: .45em; }
.karte p:last-child { margin-bottom: 0; }
.karte p { color: var(--bgv-muted); }
.icon-kreis {
	width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px;
	background: linear-gradient(135deg, var(--bgv-gelb), #ffb400); color: var(--bgv-kohle);
}
.icon-kreis svg { width: 26px; height: 26px; }

.zweispaltig { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.zweispaltig--umgekehrt { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 880px) { .zweispaltig, .zweispaltig--umgekehrt { grid-template-columns: 1fr; gap: 36px; } }

.jahr-karte {
	background: var(--bgv-kohle); color: #fff; border-radius: var(--bgv-radius-gross); padding: 44px;
	position: relative; overflow: hidden; box-shadow: var(--bgv-schatten-hoch);
}
.jahr-karte::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
	background: linear-gradient(to bottom, var(--bgv-gelb) 0 33.33%, var(--bgv-rot) 33.33% 66.66%, var(--bgv-gelb) 66.66%);
}
.jahr-karte__jahr { font: 700 clamp(4rem, 9vw, 6.5rem)/1 var(--bgv-serif); color: var(--bgv-gelb); display: block; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.jahr-karte h3 { margin-bottom: .6em; }
.jahr-karte h3 { color: #fff; font-size: 1.6rem; }
.jahr-karte p { color: rgba(255, 255, 255, .75); margin: 0; }

.cta-band {
	background: linear-gradient(120deg, var(--bgv-rot) 0%, var(--bgv-rot-dunkel) 100%); color: #fff;
	border-radius: var(--bgv-radius-gross); padding: clamp(34px, 5vw, 56px); position: relative; overflow: hidden;
	display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
}
.cta-band::after {
	content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 210, 0, .35), transparent 70%);
}
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.08rem; }
.cta-band .btn-reihe { position: relative; z-index: 1; }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } }

/* Fließtext (Unterseiten, Rechtstexte) */
.prose { font-size: 1.04rem; }
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin-top: 1.8em; padding-top: .2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.5em 0; padding: 1em 1.4em; border-left: 4px solid var(--bgv-rot); background: var(--bgv-gelb-zart); border-radius: 0 12px 12px 0; }
.prose img { border-radius: var(--bgv-radius); }
.inhalt-karte { background: #fff; border-radius: var(--bgv-radius-gross); padding: clamp(28px, 5vw, 56px); box-shadow: var(--bgv-schatten); border: 1px solid rgba(232, 223, 207, .7); }

/* ==========================================================
   8. Werte-Liste, Zeitstrahl
   ========================================================== */
.werte-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.werte-liste li {
	display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 16px 18px;
	border: 1px solid var(--bgv-linie); font-weight: 600;
}
.werte-liste li::before {
	content: ""; flex: 0 0 10px; height: 10px; margin-top: .5em; border-radius: 50%;
	background: var(--bgv-rot); box-shadow: 0 0 0 4px var(--bgv-gelb-zart);
}
@media (max-width: 560px) { .werte-liste { grid-template-columns: 1fr; } }

.zeitstrahl { position: relative; list-style: none; margin: 0; padding: 0 0 0 42px; }
.zeitstrahl::before {
	content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px;
	background: linear-gradient(to bottom, var(--bgv-gelb), var(--bgv-rot) 50%, var(--bgv-gelb));
}
.zeitstrahl__eintrag { position: relative; margin-bottom: 30px; }
.zeitstrahl__eintrag:last-child { margin-bottom: 0; }
.zeitstrahl__eintrag::before {
	content: ""; position: absolute; left: -38px; top: 26px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--bgv-rot); border: 4px solid var(--bgv-gelb); box-shadow: 0 0 0 4px var(--bgv-creme);
}
.zeitstrahl__jahr { font: 700 .82rem/1 var(--bgv-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bgv-rot); display: inline-block; margin-bottom: 16px; padding: 6px 10px; border-radius: 8px; background: rgba(200, 16, 46, .08); }
.zeitstrahl .karte h3 { margin-bottom: .5em; }
.zeitstrahl .karte { padding: 26px 30px; }

/* ==========================================================
   9. Termine
   ========================================================== */
.termin-liste { display: grid; gap: 18px; }
.termin {
	display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center;
	background: #fff; border-radius: var(--bgv-radius-gross); padding: 22px 26px; box-shadow: var(--bgv-schatten);
	border: 1px solid rgba(232, 223, 207, .7); transition: transform .2s ease, box-shadow .2s ease;
}
.termin:hover { transform: translateY(-2px); box-shadow: var(--bgv-schatten-hoch); }
.termin__datum {
	text-align: center; border-radius: 16px; overflow: hidden; background: var(--bgv-creme); border: 1px solid var(--bgv-linie);
}
.termin__monat { display: block; background: var(--bgv-rot); color: #fff; font: 700 .72rem/1 var(--bgv-sans); letter-spacing: .14em; text-transform: uppercase; padding: 7px 0; }
.termin__tag { display: block; font: 700 2.1rem/1 var(--bgv-serif); color: var(--bgv-kohle); padding: 10px 0 4px; }
.termin__wtag { display: block; font-size: .72rem; color: var(--bgv-muted); padding-bottom: 8px; text-transform: uppercase; letter-spacing: .08em; }
.termin h3 { margin: 0 0 6px; font-size: 1.3rem; }
.termin h3 a { color: inherit; text-decoration: none; }
.termin h3 a:hover { color: var(--bgv-rot); }
.termin__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--bgv-muted); font-size: .93rem; margin-bottom: 6px; }
.termin__meta span { display: inline-flex; align-items: center; gap: 6px; }
.termin__meta svg { width: 16px; height: 16px; color: var(--bgv-rot); }
.termin__text { color: var(--bgv-muted); margin: 0; font-size: .97rem; }
.termin__aktion { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
@media (max-width: 720px) {
	.termin { grid-template-columns: 74px 1fr; gap: 16px; padding: 18px; }
	.termin__aktion { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
	.termin__tag { font-size: 1.7rem; }
}
.termin--klein { grid-template-columns: 74px 1fr; }
.termin--klein .termin__tag { font-size: 1.7rem; }
.rueckblick { margin-top: 56px; }
.rueckblick summary { cursor: pointer; font: 700 1.1rem/1.3 var(--bgv-serif); color: var(--bgv-kohle); list-style: none; display: flex; align-items: center; gap: 10px; }
.rueckblick summary::-webkit-details-marker { display: none; }
.rueckblick summary::before { content: "+"; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bgv-gelb); color: var(--bgv-kohle); font-family: var(--bgv-sans); }
.rueckblick[open] summary::before { content: "–"; }
.rueckblick .termin-liste { margin-top: 20px; opacity: .85; }

.leer {
	text-align: center; background: #fff; border-radius: var(--bgv-radius-gross); padding: clamp(40px, 6vw, 64px) 28px;
	border: 2px dashed var(--bgv-linie);
}
.leer__icon { width: 64px; height: 64px; margin: 0 auto 18px; color: var(--bgv-rot); }
.leer h3 { margin-bottom: .35em; }
.leer p { color: var(--bgv-muted); max-width: 32em; margin: 0 auto 1.2em; }
.leer p:last-child { margin-bottom: 0; }

.termin-detail { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.termin-detail__info { position: sticky; top: 100px; }
.info-liste { list-style: none; margin: 0 0 20px; padding: 0; }
.info-liste li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--bgv-linie); }
.info-liste li:last-child { border-bottom: 0; }
.info-liste svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--bgv-rot); margin-top: 3px; }
.info-liste strong { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bgv-muted); }
@media (max-width: 880px) { .termin-detail { grid-template-columns: 1fr; } .termin-detail__info { position: static; } }

/* ==========================================================
   10. Formulare
   ========================================================== */
.formular { display: grid; gap: 18px; }
.formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formular__reihe--plz { grid-template-columns: 140px 1fr; }
@media (max-width: 600px) { .formular__reihe, .formular__reihe--plz { grid-template-columns: 1fr; } }
.feld label, .formular label.feld__label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 7px; color: var(--bgv-kohle); }
.feld .pflicht { color: var(--bgv-rot); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld input[type="password"], .feld input[type="date"], .feld textarea, .feld select,
.login-karte input[type="text"], .login-karte input[type="password"] {
	width: 100%; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--bgv-linie); background: #fff;
	font: inherit; color: var(--bgv-text); transition: border-color .15s ease, box-shadow .15s ease;
}
.feld input:focus, .feld textarea:focus, .feld select:focus, .login-karte input:focus {
	outline: none; border-color: var(--bgv-rot); box-shadow: 0 0 0 4px rgba(200, 16, 46, .12);
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld__hilfe { font-size: .85rem; color: var(--bgv-muted); margin-top: 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--bgv-rot); flex: 0 0 20px; }
.honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.formular__fuss { font-size: .88rem; color: var(--bgv-muted); margin: 0; }

.meldung { border-radius: 14px; padding: 16px 20px; margin-bottom: 24px; font-weight: 600; border: 1px solid; }
.meldung--ok { background: #eaf7f0; border-color: #b9e2cc; color: #145236; }
.meldung--fehler { background: #fdecee; border-color: #f4c0c7; color: #8a0a1e; }
.meldung--info { background: var(--bgv-gelb-zart); border-color: #f1df8f; color: #5d4800; }

.login-karte { max-width: 460px; margin: 0 auto; }
.login-karte form p { margin-bottom: 16px; }
.login-karte label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 7px; }
.login-karte .login-remember label { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.login-karte .login-remember input { width: 18px; height: 18px; accent-color: var(--bgv-rot); }
.login-karte input[type="submit"] {
	width: 100%; padding: 14px; border-radius: 999px; border: 0; background: var(--bgv-rot); color: #fff;
	font: 700 1rem var(--bgv-sans); cursor: pointer; box-shadow: 0 6px 20px rgba(200, 16, 46, .25);
}
.login-karte input[type="submit"]:hover { background: var(--bgv-rot-dunkel); }
.login-karte__links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .92rem; margin-top: 8px; }

/* Ablauf "So wirst du Mitglied" */
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 16px; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.schritte li::before {
	content: counter(schritt); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	background: var(--bgv-gelb); color: var(--bgv-kohle); font: 700 1.1rem var(--bgv-serif); box-shadow: 0 0 0 4px rgba(255, 210, 0, .2);
}
.schritte strong { display: block; color: var(--bgv-kohle); }
.schritte span { color: var(--bgv-muted); font-size: .96rem; }
.sektion--dunkel .schritte strong { color: #fff; }
.sektion--dunkel .schritte span { color: rgba(255, 255, 255, .7); }

.antrag-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
@media (max-width: 920px) { .antrag-layout { grid-template-columns: 1fr; } }

/* ==========================================================
   11. Satzung
   ========================================================== */
.satzung-layout { display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: start; }
.satzung-nav { position: sticky; top: 100px; background: #fff; border-radius: var(--bgv-radius); padding: 18px; border: 1px solid var(--bgv-linie); }
.satzung-nav strong { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bgv-muted); margin: 0 0 10px 8px; }
.satzung-nav ol { list-style: none; margin: 0; padding: 0; }
.satzung-nav a { display: block; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--bgv-text); font-size: .92rem; }
.satzung-nav a:hover { background: var(--bgv-gelb-zart); color: var(--bgv-kohle); }
.paragraf { background: #fff; border-radius: var(--bgv-radius-gross); padding: 30px 34px; margin-bottom: 18px; border: 1px solid rgba(232, 223, 207, .8); box-shadow: var(--bgv-schatten); }
.paragraf h2 { font-size: 1.35rem; display: flex; gap: 14px; align-items: baseline; margin-bottom: .8em; }
.paragraf h2 span { color: var(--bgv-rot); font-family: var(--bgv-sans); font-size: .95rem; font-weight: 800; letter-spacing: .04em; flex: 0 0 auto; }
.paragraf ol { margin: 0; padding-left: 1.5em; }
.paragraf li { margin-bottom: .55em; }
.paragraf li:last-child, .paragraf p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .satzung-layout { grid-template-columns: 1fr; } .satzung-nav { position: static; } }

/* ==========================================================
   12. Mitgliederbereich
   ========================================================== */
.mb-layout { display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: start; }
.mb-nav { position: sticky; top: 100px; background: #fff; border-radius: var(--bgv-radius-gross); padding: 14px; border: 1px solid var(--bgv-linie); box-shadow: var(--bgv-schatten); }
.mb-nav a {
	display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; text-decoration: none;
	color: var(--bgv-text); font-weight: 600;
}
.mb-nav a:hover { background: var(--bgv-gelb-zart); color: var(--bgv-kohle); }
.mb-nav svg { width: 19px; height: 19px; color: var(--bgv-rot); }
.mb-nav hr { border: 0; border-top: 1px solid var(--bgv-linie); margin: 8px 0; }
.mb-sektion { margin-bottom: 34px; }
.mb-sektion > h2 { font-size: 1.6rem; display: flex; align-items: center; gap: 12px; }
.mb-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 34px; }
.mb-kachel { background: #fff; border-radius: var(--bgv-radius); padding: 20px 22px; border: 1px solid var(--bgv-linie); }
.mb-kachel strong { display: block; font: 700 2rem/1.1 var(--bgv-serif); color: var(--bgv-kohle); }
.mb-kachel span { font-size: .86rem; color: var(--bgv-muted); }
.mb-kachel--rot { background: var(--bgv-rot); border-color: var(--bgv-rot); }
.mb-kachel--rot strong, .mb-kachel--rot span { color: #fff; }
.mitteilung { background: #fff; border-radius: var(--bgv-radius); border: 1px solid var(--bgv-linie); margin-bottom: 12px; overflow: hidden; }
.mitteilung summary { cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; gap: 16px; align-items: center; list-style: none; }
.mitteilung summary::-webkit-details-marker { display: none; }
.mitteilung summary strong { font-family: var(--bgv-serif); font-size: 1.12rem; color: var(--bgv-kohle); }
.mitteilung summary time { font-size: .85rem; color: var(--bgv-muted); white-space: nowrap; }
.mitteilung[open] summary { border-bottom: 1px solid var(--bgv-linie); background: var(--bgv-creme); }
.mitteilung__inhalt { padding: 20px 22px; }
.dokumente { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dokumente li { background: #fff; border: 1px solid var(--bgv-linie); border-radius: var(--bgv-radius); padding: 16px 20px; }
.dokumente strong { font-family: var(--bgv-serif); font-size: 1.08rem; }
.zusage-zahl { font-size: .85rem; color: var(--bgv-muted); }
@media (max-width: 900px) {
	.mb-layout { grid-template-columns: 1fr; }
	.mb-nav { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
	.mb-nav a { white-space: nowrap; padding: 9px 12px; }
	.mb-nav hr { display: none; }
	.mb-kacheln { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .mb-kacheln { grid-template-columns: 1fr; } }

/* ==========================================================
   13. Footer
   ========================================================== */
.site-footer { background: var(--bgv-kohle); color: rgba(255, 255, 255, .72); font-size: .95rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0 48px; }
.site-footer h4 { color: var(--bgv-gelb); font: 700 .78rem/1.2 var(--bgv-sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: var(--bgv-gelb); }
.site-footer .marke { margin-bottom: 16px; }
.site-footer__claim { max-width: 22em; }
.site-footer__unten { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .86rem; }
.site-footer__unten nav { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; gap: 30px; } }

/* WordPress-Standardklassen */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .wp-element-caption { font-size: .88rem; color: var(--bgv-muted); }
.wp-block-button__link { background: var(--bgv-rot); color: #fff; border-radius: 999px; }
.pagination, .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.page-numbers { padding: 8px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--bgv-linie); text-decoration: none; }
.page-numbers.current { background: var(--bgv-rot); color: #fff; border-color: var(--bgv-rot); }
.beitrag-liste { display: grid; gap: 20px; }

/* Icons in Buttons */
.btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.site-footer__unten ul { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer__unten li { margin: 0; }

/* Druck (z. B. Satzung als PDF) */
@media print {
	.site-header, .site-footer, .baden-streifen, .satzung-nav, .btn, .mb-nav, .funken, .flammenrand { display: none !important; }
	.js .reveal { opacity: 1 !important; translate: none !important; }
	body { background: #fff; font-size: 11pt; }
	.seitenkopf { background: none; color: #000; padding: 0 0 12pt; }
	.seitenkopf::before { display: none; }
	.seitenkopf h1, .seitenkopf h1 em { color: #000; }
	.seitenkopf__lead { color: #333; }
	.satzung-layout { display: block; }
	.paragraf, .inhalt-karte, .karte { box-shadow: none; border: 0; padding: 0 0 10pt; }
	.ueberlappt { margin-top: 0; }
}

/* ==========================================================
   14. Glut-Effekte: Funken, Flammenrand, Countdown, Einblenden
   ========================================================== */
.hero, .seitenkopf { isolation: isolate; }
.hero > .wrap, .seitenkopf > .wrap { position: relative; z-index: 2; }
.seitenkopf { padding-bottom: clamp(80px, 9vw, 120px); }
.hero::before, .seitenkopf::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .07;
	background-image: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 28px);
	-webkit-mask: radial-gradient(70% 90% at 80% 40%, #000, transparent 70%); mask: radial-gradient(70% 90% at 80% 40%, #000, transparent 70%);
}
.funken { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.funken span {
	position: absolute; bottom: 20px; width: 5px; height: 5px; border-radius: 50%;
	background: #ffb400; box-shadow: 0 0 8px 2px rgba(255, 140, 0, .8), 0 0 18px 4px rgba(200, 16, 46, .45);
	opacity: 0; animation: funke 7s linear infinite;
}
.funken span:nth-child(1) { left: 52%; animation-delay: 0s; animation-duration: 6.5s; width: 5px; height: 5px; }
.funken span:nth-child(2) { left: 61%; animation-delay: 1.2s; animation-duration: 8s; width: 3px; height: 3px; }
.funken span:nth-child(3) { left: 70%; animation-delay: 2.4s; animation-duration: 7s; width: 5px; height: 5px; }
.funken span:nth-child(4) { left: 78%; animation-delay: 0.6s; animation-duration: 9s; width: 4px; height: 4px; }
.funken span:nth-child(5) { left: 86%; animation-delay: 3.1s; animation-duration: 6s; width: 3px; height: 3px; }
.funken span:nth-child(6) { left: 93%; animation-delay: 4.2s; animation-duration: 8.5s; width: 5px; height: 5px; }
.funken span:nth-child(7) { left: 66%; animation-delay: 5s; animation-duration: 7.5s; width: 2px; height: 2px; }
.funken span:nth-child(8) { left: 74%; animation-delay: 3.8s; animation-duration: 6.8s; width: 3px; height: 3px; }
.funken span:nth-child(9) { left: 82%; animation-delay: 1.8s; animation-duration: 7.8s; width: 2px; height: 2px; }
.funken span:nth-child(10) { left: 57%; animation-delay: 6s; animation-duration: 9.5s; width: 3px; height: 3px; }
.funken span:nth-child(11) { left: 89%; animation-delay: 2s; animation-duration: 6.2s; width: 2px; height: 2px; }
.funken span:nth-child(12) { left: 45%; animation-delay: 4.6s; animation-duration: 8.8s; width: 2px; height: 2px; }
.funken span:nth-child(13) { left: 97%; animation-delay: 0.3s; animation-duration: 7.2s; width: 3px; height: 3px; }
.funken span:nth-child(14) { left: 35%; animation-delay: 5.5s; animation-duration: 10s; width: 2px; height: 2px; }
.funken--wenig span:nth-child(n+8) { display: none; }
@keyframes funke {
	0%   { transform: translate(0, 0) scale(1); opacity: 0; }
	8%   { opacity: 1; }
	50%  { transform: translate(-18px, -45vh) scale(.8); }
	75%  { opacity: .7; }
	100% { transform: translate(14px, -95vh) scale(.3); opacity: 0; }
}
.flammenrand { position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; z-index: 3; pointer-events: none; }
.flammenrand::before, .flammenrand::after { content: ""; position: absolute; inset: 0; }
.flammenrand::before {
	background: linear-gradient(to top, var(--bgv-rot) 20%, #ff7a00 55%, var(--bgv-gelb));
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20240%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2048L0%2042%20C4.5%2042%2010.5%2028.5%2015.0%2018.0%20C18.6%2030.0%2025.5%2042%2030.0%2042%20C34.5%2042%2040.5%2019.4%2045.0%204.0%20C48.6%2021.6%2055.5%2042%2060.0%2042%20C64.5%2042%2070.5%2031.1%2075.0%2022.0%20C78.6%2032.4%2085.5%2042%2090.0%2042%20C94.5%2042%20100.5%2023.3%20105.0%2010.0%20C108.6%2025.2%20115.5%2042%20120.0%2042%20C124.5%2042%20130.5%2018.1%20135.0%202.0%20C138.6%2020.4%20145.5%2042%20150.0%2042%20C154.5%2042%20160.5%2029.8%20165.0%2020.0%20C168.6%2031.2%20175.5%2042%20180.0%2042%20C184.5%2042%20190.5%2022.0%20195.0%208.0%20C198.6%2024.0%20205.5%2042%20210.0%2042%20C214.5%2042%20220.5%2025.9%20225.0%2014.0%20C228.6%2027.6%20235.5%2042%20240.0%2042%20L240%2048Z%27/%3E%3C/svg%3E") bottom / 240px 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20240%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2048L0%2042%20C4.5%2042%2010.5%2028.5%2015.0%2018.0%20C18.6%2030.0%2025.5%2042%2030.0%2042%20C34.5%2042%2040.5%2019.4%2045.0%204.0%20C48.6%2021.6%2055.5%2042%2060.0%2042%20C64.5%2042%2070.5%2031.1%2075.0%2022.0%20C78.6%2032.4%2085.5%2042%2090.0%2042%20C94.5%2042%20100.5%2023.3%20105.0%2010.0%20C108.6%2025.2%20115.5%2042%20120.0%2042%20C124.5%2042%20130.5%2018.1%20135.0%202.0%20C138.6%2020.4%20145.5%2042%20150.0%2042%20C154.5%2042%20160.5%2029.8%20165.0%2020.0%20C168.6%2031.2%20175.5%2042%20180.0%2042%20C184.5%2042%20190.5%2022.0%20195.0%208.0%20C198.6%2024.0%20205.5%2042%20210.0%2042%20C214.5%2042%20220.5%2025.9%20225.0%2014.0%20C228.6%2027.6%20235.5%2042%20240.0%2042%20L240%2048Z%27/%3E%3C/svg%3E") bottom / 240px 100% repeat-x;
	opacity: .9; animation: flackern 3s ease-in-out infinite alternate;
}
.flammenrand::after {
	background: var(--bgv-creme);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20240%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2048L0%2030%20C30%2022%2050%2022%2080%2028%20C110%2034%20130%2034%20160%2028%20C190%2022%20210%2022%20240%2030%20L240%2048Z%27/%3E%3C/svg%3E") bottom / 240px 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20240%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2048L0%2030%20C30%2022%2050%2022%2080%2028%20C110%2034%20130%2034%20160%2028%20C190%2022%20210%2022%20240%2030%20L240%2048Z%27/%3E%3C/svg%3E") bottom / 240px 100% repeat-x;
}
.flammenrand--weiss::after { background: #fff; }
@keyframes flackern { from { transform: scaleY(1); transform-origin: bottom; } to { transform: scaleY(1.12); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) { .flammenrand::before { animation: none; } }
.hero::after { display: none; }

.naechster {
	display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 30px; padding: 12px 18px 12px 14px;
	border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
	color: #fff; text-decoration: none; transition: background .2s ease, border-color .2s ease;
}
.naechster:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: var(--bgv-gelb); }
.naechster__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--bgv-gelb); box-shadow: 0 0 0 0 rgba(255, 210, 0, .6); animation: puls 2s infinite; }
.naechster__label { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bgv-gelb); }
.naechster__titel { font-weight: 600; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 0, .55); } 70% { box-shadow: 0 0 0 10px rgba(255, 210, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 0, 0); } }

/* Überschriften-Akzent */
.sektion h2 em, .cta-band h2 em { font-style: italic; color: var(--bgv-rot); }
.icon-kreis { box-shadow: 0 6px 16px rgba(255, 180, 0, .3); }
.karte--wert::after {
	content: ""; position: absolute; inset: auto 24px -1px 24px; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, var(--bgv-gelb), var(--bgv-rot), var(--bgv-gelb));
	transform: scaleX(0); transition: transform .3s ease;
}
.karte--wert:hover::after { transform: scaleX(1); }

/* Sanftes Einblenden beim Scrollen (nur mit JavaScript) */
.js .reveal { opacity: 0; translate: 0 22px; transition: opacity .6s ease, translate .6s ease; }
.js .reveal.sichtbar { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
	.funken, .naechster__punkt { animation: none; }
	.funken { display: none; }
	.js .reveal { opacity: 1; translate: none; transition: none; }
}

/* Beiträge */
.beitraege { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.beitraege li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--bgv-creme); border: 1px solid var(--bgv-linie); }
.beitraege span { color: var(--bgv-text); font-size: .95rem; }
.beitraege strong { font: 700 1.25rem/1 var(--bgv-serif); color: var(--bgv-rot); white-space: nowrap; }
.beitrag-anzeige { padding: 13px 15px; border-radius: 12px; background: var(--bgv-gelb-zart); border: 1.5px solid #f1df8f; color: #5d4800; min-height: 50px; }
.beitrag-anzeige strong { font: 700 1.2rem var(--bgv-serif); color: var(--bgv-kohle); }
.eltern { padding: 18px; border-radius: 14px; border: 1.5px dashed var(--bgv-rot); background: rgba(200, 16, 46, .03); }
.eltern[hidden] { display: none; }
.beitrag-tabelle { width: 100%; border-collapse: collapse; margin: 6px 0 18px; }
.beitrag-tabelle th, .beitrag-tabelle td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--bgv-linie); }
.beitrag-tabelle th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bgv-muted); }
.beitrag-tabelle td:last-child, .beitrag-tabelle th:last-child { text-align: right; }
.beitrag-tabelle strong { color: var(--bgv-rot); font-size: 1.1rem; }
.paragraf--beitrag { border-top: 4px solid var(--bgv-gelb); }

/* ==========================================================
   15. Anmeldung zu Terminen, Stundenkonto
   ========================================================== */
.zusage-knopf { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.zusage-knopf .badge { white-space: nowrap; }
@media (max-width: 720px) { .zusage-knopf { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.zusage-dialog {
	width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--bgv-radius-gross);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45); background: #fff; color: var(--bgv-text); overflow: auto;
}
.zusage-dialog::backdrop { background: rgba(23, 19, 17, .7); backdrop-filter: blur(3px); }
.zusage-dialog[open] { animation: dialog-rein .25s ease; }
@keyframes dialog-rein { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.dialog-offen { overflow: hidden; }
.zusage-form { padding: 28px 30px 30px; gap: 20px; }
.zusage-dialog .zusage-form { border-top: 6px solid; border-image: linear-gradient(to right, var(--bgv-gelb) 0 33.33%, var(--bgv-rot) 33.33% 66.66%, var(--bgv-gelb) 66.66%) 1; }
.zusage-form__kopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.zusage-form__kopf h3 { font-size: 1.5rem; margin: 0 0 4px; }
.zusage-form__kopf .formular__fuss { margin: 0; }
.zusage-schliessen { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 1px solid var(--bgv-linie); background: #fff; font-size: 24px; line-height: 1; cursor: pointer; color: var(--bgv-muted); }
.zusage-schliessen:hover { color: var(--bgv-rot); border-color: var(--bgv-rot); }
.zusage-gruppe { border: 0; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--bgv-linie); display: grid; gap: 14px; }
.zusage-gruppe legend { font: 700 1.05rem var(--bgv-serif); color: var(--bgv-kohle); padding: 0 0 4px; float: left; width: 100%; }
.zusage-gruppe legend + * { clear: both; }
.feld__label { font-weight: 700; font-size: .92rem; margin: 4px 0 8px; color: var(--bgv-kohle); }
.wahl-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wahl-karte { position: relative; cursor: pointer; }
.wahl-karte input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-karte > span { display: block; height: 100%; padding: 14px 16px 14px 48px; border-radius: 14px; border: 2px solid var(--bgv-linie); background: #fff; transition: border-color .15s ease, background .15s ease; position: relative; }
.wahl-karte > span::before { content: ""; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bgv-linie); background: #fff; }
.wahl-karte strong { display: block; color: var(--bgv-kohle); }
.wahl-karte small { color: var(--bgv-muted); font-size: .86rem; }
.wahl-karte input:checked + span { border-color: var(--bgv-rot); background: rgba(200, 16, 46, .04); }
.wahl-karte input:checked + span::before { border-color: var(--bgv-rot); background: radial-gradient(circle, var(--bgv-rot) 45%, #fff 50%); }
.wahl-karte input:focus-visible + span { outline: 3px solid var(--bgv-gelb); outline-offset: 2px; }
@media (max-width: 560px) { .wahl-karten { grid-template-columns: 1fr; } .zusage-form { padding: 22px 18px 24px; } }
.zusage-form[data-mitwirkung="passiv"] .nur-aktiv, .zusage-form[data-mitwirkung=""] .nur-aktiv { display: none; }
.nur-aktiv { padding: 14px 16px; border-radius: 14px; background: var(--bgv-creme); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--bgv-linie); background: #fff; font-size: .9rem; font-weight: 600; transition: all .15s ease; }
.chip span:hover { border-color: var(--bgv-rot); }
.chip input:checked + span { background: var(--bgv-rot); border-color: var(--bgv-rot); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--bgv-gelb); outline-offset: 2px; }
.feld input[type="number"] { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--bgv-linie); font: inherit; background: #fff; }
.zusage-inline { margin-top: 32px; border-top: 4px solid var(--bgv-gelb); border-radius: 18px; background: var(--bgv-creme); }
.zusage-inline .zusage-form { padding: 24px; }
.termin--arbeit { border-left: 5px solid var(--bgv-rot); }
.nur-mitglieder-hinweis { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; margin: 0 0 22px; border-radius: 16px; background: var(--bgv-gelb-zart); border: 1px solid #f1df8f; color: #4a3a00; }
.nur-mitglieder-hinweis svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--bgv-rot); margin-top: 2px; }
.nur-mitglieder-hinweis p { margin: 0; }
.nur-mitglieder-hinweis--klein { padding: 12px 14px; font-size: .92rem; margin: 6px 0 0; }
.mb-kachel--link { text-decoration: none; color: inherit; display: block; }
.mb-kachel--link:hover { border-color: var(--bgv-rot); }
.mb-kachel strong small { font-size: .9rem; color: var(--bgv-muted); font-family: var(--bgv-sans); font-weight: 600; }
.stunden-balken { height: 8px; border-radius: 4px; background: var(--bgv-linie); overflow: hidden; margin-top: 10px; }
.stunden-balken i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--bgv-gelb), #ff8a00, var(--bgv-rot)); transition: width .6s ease; }
.stunden-balken--gross { height: 14px; border-radius: 7px; margin: 14px 0 6px; }
.stundenkonto__kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.stundenkonto__kopf strong { font: 700 1.6rem var(--bgv-serif); color: var(--bgv-rot); }
.stundenkonto__rest { font-weight: 600; color: var(--bgv-muted); }
.stunden-liste { list-style: none; margin: 16px 0 0; padding: 0; }
.stunden-liste li { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bgv-linie); font-size: .95rem; }
.stunden-liste li:last-child { border-bottom: 0; }
.stunden-liste li.ist-geplant { color: var(--bgv-muted); font-style: italic; }
@media (max-width: 520px) { .stunden-liste li { grid-template-columns: 1fr auto; } .stunden-liste li span:first-child { grid-column: 1 / -1; font-size: .8rem; color: var(--bgv-muted); } }

.header-aktion .btn { white-space: nowrap; }
@media (max-width: 400px) { .header-aktion .btn span { display: none; } .header-aktion .btn { padding: .6em .8em; } }

/* Schutz vor Adress-Sammlern */
.bgv-x { display: none !important; }
.bgv-schutz { unicode-bidi: isolate; }

/* Team / Ansprechpartner */
.team-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.team-raster--oeffentlich { max-width: 980px; margin: 0 auto; }
.team-karte { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--bgv-linie); border-radius: var(--bgv-radius); padding: 18px; box-shadow: var(--bgv-schatten); }
.team-karte__initial { flex: 0 0 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 700 1.3rem var(--bgv-serif); color: var(--bgv-kohle); background: var(--bgv-gelb); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bgv-rot); }
.team-karte strong { display: block; font-family: var(--bgv-serif); font-size: 1.1rem; color: var(--bgv-kohle); }
.team-karte__funktion { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bgv-rot); margin: 2px 0 6px; }
.team-karte a { display: block; font-size: .9rem; word-break: break-all; }

/* ==========================================================
   Impressionen (Berichte & Bilder) und Social Media
   ========================================================== */
.impressionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.impression {
	background: #fff; border-radius: var(--bgv-radius-gross); overflow: hidden; box-shadow: var(--bgv-schatten);
	border: 1px solid rgba(232, 223, 207, .7); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.impression:hover { transform: translateY(-3px); box-shadow: var(--bgv-schatten-hoch); }
.impression__bild { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--bgv-kohle-2); overflow: hidden; }
.impression__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.impression:hover .impression__bild img { transform: scale(1.04); }
.impression__platz { position: absolute; inset: 0; display: grid; place-items: center; color: var(--bgv-gelb); background: var(--bgv-glut), var(--bgv-kohle); }
.impression__platz svg { width: 54px; height: 54px; opacity: .85; }
.impression__zahl {
	position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
	border-radius: 99px; background: rgba(23, 19, 17, .72); color: #fff; font: 700 .8rem/1 var(--bgv-sans); backdrop-filter: blur(4px);
}
.impression__zahl svg { width: 15px; height: 15px; }
.impression__text { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.impression__text h3 { font-size: 1.28rem; margin: 0 0 .45em; }
.impression__text h3 a { color: var(--bgv-kohle); text-decoration: none; }
.impression__text h3 a::after { content: ""; position: absolute; inset: 0; }
.impression { position: relative; }
.impression__text h3 a:hover, .impression:hover h3 a { color: var(--bgv-rot); }
.impression__text p { color: var(--bgv-muted); margin: 0; }
.impression__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 600 .82rem/1.2 var(--bgv-sans); color: var(--bgv-muted); margin: 0 0 10px !important; }
.impression__thema { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--bgv-gelb-zart); color: var(--bgv-rot-dunkel); font-weight: 700; text-decoration: none; position: relative; z-index: 1; }
.impression__meta--hell { color: rgba(255, 255, 255, .75); }
.impression__meta--hell .impression__thema { background: var(--bgv-gelb); color: var(--bgv-kohle); }
.impression--gross { grid-column: 1 / -1; flex-direction: row; }
.impression--gross .impression__bild { flex: 1.35; aspect-ratio: auto; min-height: 340px; }
.impression--gross .impression__text { flex: 1; padding: clamp(28px, 4vw, 48px); justify-content: center; }
.impression--gross h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.impression--gross .impression__text p:last-child { font-size: 1.05rem; }
@media (max-width: 960px) { .impressionen { grid-template-columns: repeat(2, 1fr); } .impressionen--drei .impression:nth-child(3) { display: none; } }
@media (max-width: 760px) { .impression--gross { flex-direction: column; } .impression--gross .impression__bild { min-height: 0; aspect-ratio: 3 / 2; } }
@media (max-width: 640px) { .impressionen { grid-template-columns: 1fr; } .impressionen--drei .impression:nth-child(3) { display: flex; } }

.themen-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; padding: 12px; background: #fff; border-radius: 99px; box-shadow: var(--bgv-schatten); width: fit-content; max-width: 100%; }
.themen-filter a { padding: 8px 16px; border-radius: 99px; text-decoration: none; color: var(--bgv-text); font-weight: 600; font-size: .92rem; }
.themen-filter a:hover { background: var(--bgv-creme); color: var(--bgv-rot); }
.themen-filter a[aria-current="page"] { background: var(--bgv-rot); color: #fff; }
@media (max-width: 640px) { .themen-filter { border-radius: var(--bgv-radius); } }

.seiten-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.seiten-nav .page-numbers { min-width: 44px; padding: 10px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--bgv-linie); text-align: center; text-decoration: none; color: var(--bgv-text); font-weight: 600; }
.seiten-nav .page-numbers.current { background: var(--bgv-kohle); border-color: var(--bgv-kohle); color: #fff; }
.seiten-nav a.page-numbers:hover { border-color: var(--bgv-rot); color: var(--bgv-rot); }

.sektion__kopf--zeile { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.sektion__kopf--zeile h2 { margin-bottom: 0; }

/* Einzelbericht */
.seitenkopf--bericht h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.zurueck { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .75); text-decoration: none; font-weight: 600; font-size: .92rem; margin-bottom: 22px; }
.zurueck:hover { color: var(--bgv-gelb); }
.zurueck svg { width: 18px; height: 18px; }
.bericht__titelbild { margin: calc(-1 * clamp(28px, 5vw, 56px)) calc(-1 * clamp(28px, 5vw, 56px)) 32px; }
.bericht__titelbild img { width: 100%; height: auto; max-height: 560px; object-fit: cover; display: block; border-radius: var(--bgv-radius-gross) var(--bgv-radius-gross) 0 0 !important; }
.bericht .wp-block-gallery, .bericht .gallery { margin: 1.8em 0; }
.bericht .wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 10px; }
.bericht figure { margin: 1.6em 0; }
.bericht figcaption { font-size: .88rem; color: var(--bgv-muted); text-align: center; margin-top: 8px; }
.bericht a img { cursor: zoom-in; }
.bericht-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.bericht-nav__link { display: block; padding: 18px 22px; border-radius: var(--bgv-radius); background: #fff; border: 1px solid var(--bgv-linie); text-decoration: none; color: var(--bgv-text); }
.bericht-nav__link span { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bgv-rot); margin-bottom: 4px; }
.bericht-nav__link strong { font-family: var(--bgv-serif); font-size: 1.08rem; }
.bericht-nav__link:hover { border-color: var(--bgv-rot); }
.bericht-nav__link--rechts { text-align: right; }
@media (max-width: 600px) { .bericht-nav { grid-template-columns: 1fr; } .bericht-nav__link--rechts { text-align: left; } }

/* Bildansicht (Lightbox) */
.bildansicht { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.bildansicht::backdrop { background: rgba(12, 10, 9, .92); }
.bildansicht__buehne { position: absolute; inset: 0; display: grid; place-items: center; padding: 64px 70px; }
.bildansicht img { max-width: 100%; max-height: calc(100vh - 128px); object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.bildansicht__text { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgba(255, 255, 255, .8); font-size: .9rem; padding: 0 70px; }
.bildansicht button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.bildansicht button:hover, .bildansicht button:focus-visible { background: var(--bgv-gelb); color: var(--bgv-kohle); }
.bildansicht__zu { top: 14px; right: 14px; }
.bildansicht__zurueck { left: 12px; top: 50%; transform: translateY(-50%); }
.bildansicht__vor { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .bildansicht__buehne { padding: 64px 10px; } .bildansicht__zurueck, .bildansicht__vor { top: auto; bottom: 12px; transform: none; } .bildansicht__text { bottom: 70px; } }

/* Social Media */
.social { display: flex; gap: 10px; align-items: center; }
.social__link { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.social__link svg { width: 20px; height: 20px; }
.social__link:hover { transform: translateY(-2px); }
.social .social__link { background: var(--bgv-kohle); color: #fff; }
.social .social__link:hover { background: var(--bgv-rot); color: #fff; }
.social--kopf .social__link, .social--fuss .social__link, .social--mobil .social__link { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); }
.social--kopf .social__link:hover, .social--fuss .social__link:hover, .social--mobil .social__link:hover { background: var(--bgv-gelb); color: var(--bgv-kohle); }
.social--kopf { gap: 6px; margin-right: 4px; }
.social--kopf .social__link { width: 38px; height: 38px; }
.social--kopf .social__link svg { width: 18px; height: 18px; }
.social--fuss { margin-top: 18px; }
.social--mobil { display: none; }
.social--gross .social__link { width: 52px; height: 52px; }
.social--gross .social__link svg { width: 24px; height: 24px; }
@media (max-width: 1180px) { .social--kopf { display: none; } }
@media (max-width: 1120px) { .nav-offen .social--mobil { display: flex; padding: 18px 10px 6px; } }
.social-band {
	margin-top: clamp(48px, 7vw, 80px); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
	padding: clamp(26px, 4vw, 40px); border-radius: var(--bgv-radius-gross); background: #fff; border: 1px solid var(--bgv-linie); box-shadow: var(--bgv-schatten);
	border-left: 6px solid var(--bgv-gelb);
}
.social-band h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 6px; }
.social-band p { margin: 0; color: var(--bgv-muted); }
.social-band--klein { margin-top: 28px; padding: 20px 24px; }

/* Hauptmenü: Einträge nicht umbrechen, bei knappem Platz enger setzen */
.hauptnav a { white-space: nowrap; }
@media (min-width: 1121px) and (max-width: 1260px) {
	.hauptnav a { padding: 10px 9px; font-size: .9rem; }
	.marke__claim { display: none; }
}
.bericht > :last-child { margin-bottom: 0; }
.hauptnav .social__link { padding: 0; border-radius: 50%; border-bottom: 0; width: 44px; height: 44px; display: grid; }

/* Social Media auf der Startseite */
.hero__rechts { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.social-pillen { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; z-index: 2; }
.social-pillen__label { font: 700 .74rem/1 var(--bgv-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bgv-gelb); }
.social-pillen__reihe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.social-pille {
	display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 12px; border-radius: 99px;
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; text-decoration: none;
	font-weight: 700; font-size: .92rem; backdrop-filter: blur(6px); transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.social-pille svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--bgv-gelb); color: var(--bgv-kohle); }
.social-pille--facebook svg { background: var(--bgv-rot); color: #fff; }
.social-pille:hover, .social-pille:focus-visible { background: var(--bgv-gelb); border-color: var(--bgv-gelb); color: var(--bgv-kohle); transform: translateY(-2px); }
.social-pille:hover svg { background: var(--bgv-kohle); color: var(--bgv-gelb); }
@media (max-width: 860px) { .hero__rechts { gap: 30px; } }

.sektion--social { position: relative; overflow: hidden; color: rgba(255, 255, 255, .82); background: var(--bgv-glut), var(--bgv-kohle); isolation: isolate; }
.sektion--social > .wrap { position: relative; z-index: 2; }
.sektion--social h2 { color: #fff; }
.social-sektion { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.social-sektion__text p { font-size: 1.1rem; max-width: 30em; margin: 0; }
.social-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.social-karte {
	position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: var(--bgv-radius-gross);
	text-decoration: none; color: #fff; overflow: hidden; min-height: 280px;
	background: linear-gradient(150deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.social-karte::before {
	content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -90px; border-radius: 50%; z-index: -1;
	background: radial-gradient(circle, rgba(255, 210, 0, .38), transparent 68%); transition: transform .4s ease;
}
.social-karte--facebook::before { background: radial-gradient(circle, rgba(226, 0, 26, .45), transparent 68%); }
.social-karte:hover, .social-karte:focus-visible { transform: translateY(-4px); border-color: var(--bgv-gelb); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); color: #fff; }
.social-karte:hover::before { transform: scale(1.25); }
.social-karte__icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 14px; background: linear-gradient(135deg, var(--bgv-gelb), #ff9a00); color: var(--bgv-kohle); }
.social-karte--facebook .social-karte__icon { background: linear-gradient(135deg, var(--bgv-rot-hell), var(--bgv-rot-dunkel)); color: #fff; }
.social-karte__icon svg { width: 30px; height: 30px; }
.social-karte__netz { font: 700 .74rem/1 var(--bgv-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bgv-gelb); }
.social-karte__handle { font-family: var(--bgv-serif); font-size: 1.35rem; line-height: 1.2; word-break: break-word; }
.social-karte__text { color: rgba(255, 255, 255, .72); font-size: .97rem; flex: 1; }
.social-karte__knopf { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; align-self: flex-start; padding: 10px 18px; border-radius: 99px; background: #fff; color: var(--bgv-kohle); font-weight: 700; font-size: .92rem; transition: background .2s ease; }
.social-karte__knopf svg { width: 17px; height: 17px; transition: transform .2s ease; }
.social-karte:hover .social-karte__knopf { background: var(--bgv-gelb); }
.social-karte:hover .social-karte__knopf svg { transform: translateX(3px); }
@media (max-width: 900px) { .social-sektion { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .social-karte { min-height: 0; padding: 24px; } }
.social-sektion { grid-template-columns: .8fr 1.2fr; }
.social-karte--instagram .social-karte__handle { font-size: 1.14rem; }
@media (max-width: 900px) { .social-sektion { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
	.hero__rechts { order: -1; gap: 22px; }
	.hero__rechts .hero__siegel { width: min(220px, 62%); order: 0; }
}
@media (max-width: 1100px) { .social-sektion { grid-template-columns: 1fr; } }
.social-karte__knopf { white-space: nowrap; }