/* =========================================================================
   VBC Ludwigshafen — Designsystem
   =========================================================================
   Aufbau:
   1. Farbtoken und Abteilungs-Umschaltung
   2. Schrift
   3. Abteilungs-Umschalter
   4. Bausteine für Spieldaten
   5. Anschluss an Kadence
   ====================================================================== */


/* -------------------------------------------------------------------------
   1. Farbtoken
   Nichts weiter unten kennt eine feste Farbe. Wer die Abteilungsfarbe
   ändern will, ändert sie hier — einmal.
   ---------------------------------------------------------------------- */

:root {
	/* Marine und Rot direkt aus dem Vereinslogo abgenommen
	   (wp-content/uploads/2021/09/vbc2.jpg): #051536 füllt dort 42 883 Pixel,
	   #e9322c den Schwung. Das Marine ist zugleich die Flächenfarbe des
	   Verlaufs — deshalb steht es nur einmal. */
	--vbc-navy: #051536;
	--vbc-navy-hell: #123a5e;

	/* Die beiden Abteilungsfarben stehen genau hier — überall sonst nur noch
	   als Token.

	   Die „hell"-Fassung ist kein zweiter Markenwert, sondern die technische
	   Notlösung für dunkle Untergründe: Ein Marine von #051536 verschwindet
	   auf dem Verlauf der Bühne und im navyfarbenen Menü. Dort steht die
	   aufgehellte Variante derselben Farbfamilie. */
	--vbc-volleyball: #051536;
	--vbc-volleyball-hell: #1e5590;
	--vbc-volleyball-weich: #e8ebf3;
	--vbc-floorball: #e9322c;
	--vbc-floorball-hell: #f4665f;
	--vbc-floorball-weich: #fdecec;

	/* Voreinstellung ist Volleyball. */
	--vbc-akzent: var(--vbc-volleyball);
	--vbc-akzent-hell: var(--vbc-volleyball-hell);
	--vbc-akzent-weich: var(--vbc-volleyball-weich);
	--vbc-akzent-kontrast: #ffffff;

	--vbc-flaeche: #ffffff;
	--vbc-flaeche-2: #edf1f6;
	--vbc-grund: #f4f6f9;
	--vbc-linie: #d7dee8;
	--vbc-linie-zart: #e6ebf2;

	--vbc-text: #0c1723;
	--vbc-text-2: #5a6779;
	/* text-3 ist die Farbe der Nebentexte: Datumszeilen, Spielorte, Zähler.
	   Bei #8a94a6 lag sie auf Weiß nur bei 3,1:1 und damit unter den 4,5:1,
	   die kleine Schrift nach WCAG AA braucht. Etwas dunkler löst das an
	   allen Stellen gleichzeitig, ohne die Zurückhaltung aufzugeben. */
	--vbc-text-3: #69748a;

	--vbc-sieg: #1e8e5a;

	--vbc-radius: 4px;
	--vbc-schatten: 0 1px 2px rgba(3, 28, 55, .06), 0 8px 24px -12px rgba(3, 28, 55, .18);
}

body.abteilung-floorball {
	--vbc-akzent: var(--vbc-floorball);
	--vbc-akzent-hell: var(--vbc-floorball-hell);
	--vbc-akzent-weich: var(--vbc-floorball-weich);
}

/* Seiten, die beiden Abteilungen gehören (Verein, Shop, Kontakt), laufen
   neutral: Weiß als Fläche, das Vereinsnavy für Schrift und Linien. Weiß
   allein trägt keine Schrift — als Akzent bleibt darum Navy. */
body.abteilung-dach {
	--vbc-akzent: var(--vbc-navy);
	--vbc-akzent-hell: var(--vbc-navy-hell);
	--vbc-akzent-weich: #e9eef4;
}


/* -------------------------------------------------------------------------
   2. Schrift
   Vorerst Systemschriften. Sobald Barlow Condensed, Inter und IBM Plex Mono
   als Dateien unter assets/fonts/ liegen, hier die @font-face-Regeln
   ergänzen und die drei Stapel austauschen — sonst ändert sich nichts.
   ---------------------------------------------------------------------- */

:root {
	--vbc-schrift-display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--vbc-schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--vbc-schrift-daten: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

.vbc-spiel__liga,
.vbc-umschalter__ziel,
.vbc-tabelle th {
	font-family: var(--vbc-schrift-display);
}

.vbc-spiel__wann,
.vbc-ergebnis__stand,
.vbc-ergebnis__saetze,
.vbc-tabelle .ist-zahl {
	font-family: var(--vbc-schrift-daten);
	font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------------------------
   3. Abteilungs-Umschalter
   Sitzt direkt unter dem Kopfbereich, volle Breite, zwei gleich große
   Hälften. Auf dem Handy die wichtigste Navigation der Seite.
   ---------------------------------------------------------------------- */

.vbc-umschalter {
	display: flex;
	width: 100%;
}

.vbc-umschalter__ziel {
	flex: 1;
	padding: .7rem .5rem;
	text-align: center;
	text-decoration: none;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	background: var(--vbc-flaeche-2);
	color: var(--vbc-text-3);
	transition: background-color .15s ease, color .15s ease;
}

.vbc-umschalter__ziel:hover,
.vbc-umschalter__ziel:focus-visible {
	color: var(--vbc-text);
}

.vbc-umschalter__ziel:focus-visible {
	outline: 2px solid var(--vbc-navy);
	outline-offset: -4px;
}

/* Die aktive Hälfte trägt ihre eigene Abteilungsfarbe — nicht die des
   umgebenden Kontexts. Sonst wären auf Vereinsseiten beide Hälften navy. */
.vbc-umschalter__ziel--volleyball.is-aktiv {
	background: var(--vbc-volleyball);
	color: #fff;
}

.vbc-umschalter__ziel--floorball.is-aktiv {
	background: var(--vbc-floorball);
	color: #fff;
}

@media (min-width: 720px) {
	.vbc-umschalter {
		justify-content: flex-end;
		background: var(--vbc-flaeche-2);
	}

	.vbc-umschalter__ziel {
		flex: 0 0 auto;
		min-width: 170px;
	}
}


/* -------------------------------------------------------------------------
   4. Bausteine für Spieldaten
   Markup und Klassen sind endgültig. Wenn SAMS angebunden ist, liefert die
   Schnittstelle den Inhalt — an diesen Regeln ändert sich nichts.
   ---------------------------------------------------------------------- */

/* Kadence setzt Absatzabstände über `.entry-content p` (Spezifität 0,1,1).
   Eine einzelne Klasse (0,1,0) verliert dagegen — deshalb tragen die
   Innereien der Bausteine durchgehend zwei Klassen. */
.vbc-spiel .vbc-spiel__team,
.vbc-spiel .vbc-spiel__wann,
.vbc-ergebnisse .vbc-ergebnis p,
.vbc-tabelle-rahmen .vbc-tabelle p {
	margin: 0;
}


/* 4.1 Kommende Spiele — auf dem Handy seitlich wischbar. */

.vbc-spiele {
	display: flex;
	gap: .6rem;
	overflow-x: auto;
	padding-bottom: .5rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.vbc-spiel {
	flex: 0 0 min(15rem, 78%);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: .7rem .8rem;
	background: var(--vbc-flaeche);
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
}

.vbc-spiel__liga {
	align-self: flex-start;
	padding: .15rem .4rem;
	border-radius: 2px;
	background: var(--vbc-akzent);
	color: var(--vbc-akzent-kontrast);
	font-size: .62rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vbc-spiel__team {
	font-size: .84rem;
	font-weight: 650;
	line-height: 1.3;
}

/* Die eigene Mannschaft hebt sich ab. */
.vbc-spiel__team:last-of-type {
	color: var(--vbc-akzent);
}

/* Abstände macht die Flex-Lücke der Karte, nicht die Absätze. */
.vbc-spiel__wann {
	font-size: .72rem;
	color: var(--vbc-text-3);
}


/* 4.2 Ergebnisse */

.vbc-ergebnis {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .6rem;
	align-items: center;
	padding: .55rem 0;
	border-bottom: 1px solid var(--vbc-linie-zart);
}

.vbc-ergebnis:last-child {
	border-bottom: 0;
}

.vbc-ergebnis__wer {
	font-size: .84rem;
	line-height: 1.35;
}

.vbc-ergebnis__saetze {
	display: block;
	margin-top: .15rem;
	font-size: .68rem;
	color: var(--vbc-text-3);
}

.vbc-ergebnis__stand {
	font-size: .95rem;
	font-weight: 700;
}

.vbc-ergebnis__stand.is-sieg {
	color: var(--vbc-sieg);
}

.vbc-ergebnis__stand.is-niederlage {
	color: var(--vbc-text-3);
}


/* 4.3 Ligatabelle */

.vbc-tabelle-rahmen {
	overflow-x: auto;
}

.vbc-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: .84rem;
}

.vbc-tabelle th {
	padding: .4rem .3rem;
	text-align: left;
	border-bottom: 1px solid var(--vbc-linie);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.vbc-tabelle td {
	padding: .45rem .3rem;
	border-bottom: 1px solid var(--vbc-linie-zart);
}

.vbc-tabelle .ist-zahl {
	color: var(--vbc-text-2);
}

.vbc-tabelle tr.is-eigenes-team td {
	background: var(--vbc-akzent-weich);
	font-weight: 650;
	color: var(--vbc-text);
}

.vbc-tabelle tr.is-eigenes-team td:first-child {
	box-shadow: inset 2px 0 0 var(--vbc-akzent);
}


/* 4.4 Berichte */

.vbc-berichte {
	display: flex;
	flex-direction: column;
}

.vbc-bericht {
	display: flex;
	gap: .8rem;
	align-items: center;
	padding: .7rem 0;
	border-bottom: 1px solid var(--vbc-linie-zart);
	text-decoration: none;
	color: inherit;
}

.vbc-bericht:last-child {
	border-bottom: 0;
}

.vbc-bericht__bild {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	overflow: hidden;
	border-radius: var(--vbc-radius);
	background: var(--vbc-flaeche-2);
}

.vbc-bericht__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vbc-bericht__text {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.vbc-bericht__titel {
	font-weight: 650;
	font-size: .92rem;
	line-height: 1.3;
}

.vbc-bericht:hover .vbc-bericht__titel,
.vbc-bericht:focus-visible .vbc-bericht__titel {
	color: var(--vbc-akzent);
}

.vbc-bericht__datum {
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}


/* 4.5 Hinweiskasten für alles, was noch auf SAMS wartet */

.vbc-hinweis {
	border-left: 3px solid var(--vbc-akzent);
	background: var(--vbc-akzent-weich);
	padding: .8rem 1rem;
	border-radius: 0 var(--vbc-radius) var(--vbc-radius) 0;
	font-size: .88rem;
	line-height: 1.5;
}

/* :last-child zählt wie eine Klasse — damit 0,2,1 gegen Kadences 0,1,1. */
.vbc-hinweis p:last-child {
	margin-bottom: 0;
}


/* -------------------------------------------------------------------------
   5. Anschluss an Kadence

   Kadence steuert seine gesamte Gestaltung über --global-palette1..9.
   Wir biegen diese Palette auf die Vereinsfarben um — dann färben sich
   Verweise, Schaltflächen und Hervorhebungen im ganzen Theme mit, ohne
   dass wir jede Stelle einzeln anfassen.

   Zwei Fallstricke:

   1. Kadence schreibt seine Palette selbst auf :root, und zwar in einem
      <style>-Block, der nach unserer Datei stehen kann. Bei gleicher
      Spezifität gewinnt der spätere. Deshalb :root:root (0,2,0).

   2. Die Werte stehen hier ausgeschrieben und nicht als var(--vbc-akzent).
      Eigenschaften werden dort aufgelöst, wo sie deklariert sind — ein
      var(--vbc-akzent) auf :root wäre auf Floorball-Seiten trotzdem rot,
      weil die Umschaltung erst am <body> greift.
   ---------------------------------------------------------------------- */

:root:root {
	--global-palette1: #051536;   /* Akzent — Volleyball ist die Voreinstellung */
	--global-palette2: #1e5590;   /* zweiter Akzent, Schwebezustände */
	--global-palette3: #0c1723;   /* Überschriften */
	--global-palette4: #24344a;
	--global-palette5: #5a6779;   /* Fließtext */
	--global-palette6: #8a94a6;   /* Nebentext */
	--global-palette7: #edf1f6;   /* helle Fläche */
	--global-palette8: #f4f6f9;   /* Seitengrund */
	--global-palette9: #ffffff;
}

body.abteilung-floorball {
	--global-palette1: #e9322c;
}

body.abteilung-dach {
	--global-palette1: #051536;
}


/* 5.1 Kopfbereich in Weiß
   Weiß ist die dritte Vereinsfarbe und gehört den vereinsübergreifenden
   Elementen: Der Kopf sieht in jeder Abteilung gleich aus, die Farbe kommt
   ausschließlich aus dem Umschalter direkt darunter. */

#masthead {
	background: #fff;
	border-bottom: 1px solid var(--vbc-linie);
}

#masthead .site-title,
#masthead .site-description,
#masthead a,
#masthead .site-header-item a {
	color: var(--vbc-text);
}

#masthead a:hover,
#masthead a:focus-visible {
	color: var(--vbc-akzent);
}

/* Ausklappmenüs

   Kadence stellt sie dunkel (Palette 3) mit heller Schrift. Seit der
   Kopfbereich weiß ist, färbt die Regel darüber jeden Link im Kopf dunkel —
   auch die im Ausklappmenü, und die standen dann dunkel auf dunkel.

   Statt eine Ausnahme zu bauen, sind die Ausklappmenüs jetzt selbst hell:
   Sie gehören sichtbar zum weißen Kopfbereich, und der Fall
   „dunkel auf dunkel" kann gar nicht mehr auftreten. */

#masthead .header-menu-container ul ul.sub-menu,
#masthead .header-menu-container ul ul.submenu,
#masthead .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul {
	background: #fff;
	border: 1px solid var(--vbc-linie);
	box-shadow: var(--vbc-schatten);
}

#masthead .header-menu-container ul ul li.menu-item > a {
	color: var(--vbc-text);
	border-bottom-color: var(--vbc-linie-zart);
}

#masthead .header-menu-container ul ul li.menu-item:last-child > a {
	border-bottom: 0;
}

#masthead .header-menu-container ul ul li.menu-item > a:hover,
#masthead .header-menu-container ul ul li.menu-item > a:focus-visible {
	color: var(--vbc-akzent);
	background: var(--vbc-akzent-weich);
}

#masthead .header-menu-container ul ul li.menu-item.current-menu-item > a {
	color: var(--vbc-akzent);
	background: var(--vbc-akzent-weich);
	box-shadow: inset 3px 0 0 var(--vbc-akzent);
}

/* Menüband: aktiver Punkt trägt die Abteilungsfarbe als Unterkante. */
#masthead .primary-menu-container > ul > li.current-menu-item > a,
#masthead .primary-menu-container > ul > li.current-menu-ancestor > a,
#masthead .primary-menu-container > ul > li.current_page_item > a {
	box-shadow: inset 0 -3px 0 var(--vbc-akzent);
}

/* Kadence zeichnet das Menüsymbol als SVG mit currentColor. */
#masthead .menu-toggle-icon,
#masthead .kadence-svg-icon,
#masthead .kadence-svg-icon svg {
	color: var(--vbc-text);
	fill: currentColor;
}


/* 5.2 Titelband in der Abteilungsfarbe
   Ersetzt Kadences graues Titelfeld. Markup kommt aus functions.php. */

.vbc-band {
	background: var(--vbc-akzent);
	color: #fff;
	padding: 1.4rem 0 1.5rem;
}

.vbc-band__innen {
	max-width: var(--vbc-breite, 1290px);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.vbc-band__oben {
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .85;
}

.vbc-band__titel {
	margin: .25rem 0 0;
	font-family: var(--vbc-schrift-display);
	font-size: clamp(1.5rem, 5vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}


/* 5.3 Fußbereich in Weiß
   Wie der Kopf: vereinsübergreifend, deshalb ohne Abteilungsfarbe. Die
   Abgrenzung zum Seitengrund macht die Linie in der Abteilungsfarbe. */

#colophon {
	background: #fff;
	color: var(--vbc-text-2);
	border-top: 4px solid var(--vbc-akzent);
}

#colophon a {
	color: var(--vbc-text);
}


/* 5.4 Überschriften im Inhalt bekommen eine farbige Kante */

.entry-content > h2,
.entry-content > .wp-block-heading:where(h2),
/* Die Kante hängt am Kindselektor — Überschriften, die ein Baustein in eine
   eigene Section setzt, bekämen sie sonst nicht. Auf der Ansprechpartner-
   seite stand die eine Überschrift aus dem Seiteninhalt deshalb mit Kante
   neben dreien ohne. Wer hier einen Baustein ergänzt, der seine Überschrift
   einpackt, trägt ihn am besten gleich mit ein. */
.entry-content .vbc-funktionen > h2 {
	padding-left: .7rem;
	border-left: 4px solid var(--vbc-akzent);
	line-height: 1.15;
}


/* 5.5 Aufrufkasten „Mitspielen“ */

.vbc-cta {
	background: var(--vbc-navy);
	color: rgba(255, 255, 255, .82);
	border-radius: var(--vbc-radius);
	padding: 1.4rem 1.5rem 1.6rem;
}

.vbc-cta h2,
.vbc-cta h3 {
	color: #fff;
	margin-top: 0;
	padding-left: 0;
	border-left: 0;
}

.vbc-cta .wp-block-button__link {
	background: var(--vbc-akzent);
	border-color: var(--vbc-akzent);
	color: #fff;
}

.vbc-cta .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--vbc-navy);
}


/* 5.6 Tabellenkopf mit zarter Akzenttönung */

.vbc-tabelle thead th {
	background: var(--vbc-akzent-weich);
	color: var(--vbc-text-2);
}


/* 5.7 Restanschluss

.wp-block-button__link,
.button,
input[type="submit"] {
	background-color: var(--vbc-akzent);
	border-color: var(--vbc-akzent);
	color: var(--vbc-akzent-kontrast);
}

.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
	background-color: var(--vbc-navy);
	border-color: var(--vbc-navy);
}

.entry-content a:not(.wp-block-button__link):not(.button) {
	text-decoration-color: var(--vbc-akzent);
	text-underline-offset: .18em;
}

/* Aktiver Menüpunkt in der Abteilungsfarbe statt im Kadence-Blau. */
.primary-navigation .menu-item.current-menu-item > a,
.primary-navigation .menu-item.current-menu-ancestor > a {
	box-shadow: inset 0 -3px 0 var(--vbc-akzent);
}

/* Sichtbarer Tastaturfokus überall — Kadence macht das nicht durchgängig. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-umschalter__ziel {
		transition: none;
	}
}


/* -------------------------------------------------------------------------
   6. Bild
   Ein Sportverein lebt vom Foto. Die Regel überall hier: Bild groß, darüber
   ein Schleier in der Abteilungsfarbe, damit weiße Schrift lesbar bleibt —
   statt Text neben Briefmarken zu setzen.
   ---------------------------------------------------------------------- */

/* 6.1 Die beiden Abteilungen als Einstieg */

.vbc-bereiche {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.vbc-bereiche {
		grid-template-columns: 1fr 1fr;
	}
}

.vbc-bereich {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--vbc-radius);
	/* Auf die Höhe der Mitgliedskarten darunter abgestimmt — die beiden
	   Reihen sollen als gleich große Blöcke untereinander stehen. */
	min-height: 18.5rem;
	text-decoration: none;
	color: #fff;
	isolation: isolate;
}

.vbc-bereich__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.vbc-bereich__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Der Schleier trägt die Abteilungsfarbe — nicht die des Kontexts, sonst
   wären auf Vereinsseiten beide Kacheln navy. */
.vbc-bereich::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: opacity .25s ease;
}

.vbc-bereich--volleyball::after {
	background: linear-gradient(200deg, color-mix(in srgb, var(--vbc-volleyball-hell) 58%, transparent), rgba(5, 21, 54, .88));
}

.vbc-bereich--floorball::after {
	background: linear-gradient(200deg, color-mix(in srgb, var(--vbc-floorball) 58%, transparent), rgba(5, 21, 54, .88));
}

.vbc-bereich:hover::after,
.vbc-bereich:focus-visible::after {
	opacity: .82;
}

.vbc-bereich__inhalt {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	height: 100%;
	padding: 1.4rem 1.5rem 1.5rem;
	justify-content: flex-end;
}

.vbc-bereich__titel {
	font-family: var(--vbc-schrift-display);
	font-size: clamp(1.6rem, 5vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
	text-transform: uppercase;
}

.vbc-bereich__text {
	font-size: .92rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, .88);
	max-width: 34ch;
}

.vbc-bereich__mehr {
	font-family: var(--vbc-schrift-daten);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding-top: .2rem;
}

.vbc-bereich__mehr::after {
	content: " →";
}


/* 6.2 Beiträge als Karten mit großem Bild */

.vbc-karten {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.vbc-karten {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.vbc-karten {
		grid-template-columns: repeat(3, 1fr);
	}
}

.vbc-karte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	background: var(--vbc-flaeche);
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s ease, transform .2s ease;
}

.vbc-karte:hover,
.vbc-karte:focus-visible {
	box-shadow: var(--vbc-schatten);
	transform: translateY(-2px);
}

.vbc-karte__bild {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--vbc-flaeche-2);
	overflow: hidden;
}

.vbc-karte__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Beiträge ohne Beitragsbild werden zur Textkarte mit farbiger Oberkante —
   statt eines leeren Blocks im Bildformat. */
.vbc-karte--ohne-bild {
	border-top: 4px solid var(--vbc-akzent);
}

.vbc-karte--ohne-bild .vbc-karte__text {
	padding-top: 1.1rem;
	gap: .4rem;
}

.vbc-karte--ohne-bild .vbc-karte__titel {
	font-size: 1.05rem;
}

.vbc-karte__text {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: .9rem 1rem 1.1rem;
}

.vbc-karte__titel {
	font-weight: 650;
	font-size: 1rem;
	line-height: 1.3;
}

.vbc-karte:hover .vbc-karte__titel {
	color: var(--vbc-akzent);
}

.vbc-karte__datum {
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}


/* 6.3 Bilder im Fließtext dürfen atmen */

.entry-content img {
	border-radius: var(--vbc-radius);
	height: auto;
}


/* 6.4 Automatische SAMS-Auswertung auf den Mannschaftsseiten */

.vbc-auswertung {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 3px solid var(--vbc-akzent);
}

.vbc-auswertung > h2:first-child {
	margin-top: 0;
}

.vbc-quelle {
	margin-top: 1rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}


@media (prefers-reduced-motion: reduce) {
	.vbc-karte,
	.vbc-bereich::after {
		transition: none;
	}

	.vbc-karte:hover {
		transform: none;
	}
}

/* 6.5 Vorspann der Startseite */

.entry-content .vbc-vorspann {
	font-size: clamp(1.05rem, 2.4vw, 1.3rem);
	line-height: 1.5;
	color: var(--vbc-text-2);
	max-width: 58ch;
}


/* -------------------------------------------------------------------------
   7. Suche
   ---------------------------------------------------------------------- */

/* 7.1 Leiste unter dem Kopfbereich: Abteilungswahl und Suchknopf */

.vbc-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: var(--vbc-flaeche-2);
}

.vbc-leiste .vbc-umschalter {
	flex: 1 1 auto;
	width: auto;
}

.vbc-suchknopf {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .7rem 1rem;
	border: 0;
	background: transparent;
	color: var(--vbc-text-2);
	font-family: var(--vbc-schrift-display);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	cursor: pointer;
}

.vbc-suchknopf:hover,
.vbc-suchknopf[aria-expanded="true"] {
	color: var(--vbc-akzent);
}

.vbc-suchknopf__symbol {
	font-size: 1.15rem;
	line-height: 1;
}

/* Das Feld bekommt immer eine eigene Zeile über die volle Breite. */
.vbc-suchbereich {
	flex: 1 0 100%;
	padding: .8rem 1rem 1rem;
	background: var(--vbc-flaeche);
	border-top: 1px solid var(--vbc-linie);
}

@media (max-width: 480px) {
	.vbc-suchknopf__wort {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}


/* 7.2 Das Feld selbst */

.vbc-suchform {
	display: flex;
	gap: .5rem;
	max-width: 40rem;
	margin: 0 auto;
}

.vbc-suchform__feld {
	flex: 1 1 auto;
	min-width: 0;
	padding: .6rem .8rem;
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	background: var(--vbc-flaeche);
	color: var(--vbc-text);
	font-size: 1rem;
}

.vbc-suchform__feld:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 1px;
	border-color: var(--vbc-akzent);
}

.vbc-suchform__knopf {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .6rem 1.1rem;
	border: 0;
	border-radius: var(--vbc-radius);
	background: var(--vbc-akzent);
	color: #fff;
	font-weight: 650;
	cursor: pointer;
}

.vbc-suchform__lupe {
	flex: 0 0 auto;
	display: block;
}

.vbc-suchform__knopf:hover {
	background: var(--vbc-navy);
}


/* 7.3 Trefferseite */

.vbc-suchergebnis {
	padding: 2rem 0 3rem;
}

.vbc-suchkopf {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 3px solid var(--vbc-akzent);
}

.vbc-suchkopf__oben {
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
	margin: 0;
}

.vbc-suchkopf__titel {
	font-family: var(--vbc-schrift-display);
	font-size: clamp(1.6rem, 5vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: .2rem 0 0;
	text-wrap: balance;
}

.vbc-suchkopf__anzahl {
	margin: .35rem 0 0;
	font-size: .9rem;
	color: var(--vbc-text-2);
}

.vbc-suchkopf__feld {
	margin-top: 1.1rem;
}

.vbc-suchkopf__feld .vbc-suchform {
	margin-left: 0;
}

.vbc-suchfilter {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: 1rem;
}

.vbc-suchfilter__ziel {
	padding: .35rem .8rem;
	border: 1px solid var(--vbc-linie);
	border-radius: 2rem;
	font-size: .82rem;
	text-decoration: none;
	color: var(--vbc-text-2);
}

.vbc-suchfilter__ziel:hover {
	border-color: var(--vbc-akzent);
	color: var(--vbc-akzent);
}

.vbc-suchfilter__ziel.is-aktiv {
	background: var(--vbc-akzent);
	border-color: var(--vbc-akzent);
	color: #fff;
}


/* 7.4 Ein Treffer */

.vbc-treffer-liste {
	display: flex;
	flex-direction: column;
}

.vbc-treffer {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--vbc-linie-zart);
}

.vbc-treffer:last-child {
	border-bottom: 0;
}

.vbc-treffer__bild {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	overflow: hidden;
	border-radius: var(--vbc-radius);
	background: var(--vbc-flaeche-2);
}

.vbc-treffer__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vbc-treffer__text {
	min-width: 0;
}

.vbc-treffer__oben {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin: 0 0 .25rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .66rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

/* Die Abteilung trägt ihre eigene Farbe, unabhängig vom Umfeld — die
   Trefferliste mischt schließlich beide. */
.vbc-treffer__abteilung {
	padding: .15rem .45rem;
	border-radius: 2px;
	color: #fff;
	background: var(--vbc-navy);
}

.vbc-treffer--volleyball .vbc-treffer__abteilung {
	background: var(--vbc-volleyball);
}

.vbc-treffer--floorball .vbc-treffer__abteilung {
	background: var(--vbc-floorball);
}

.vbc-suchergebnis .vbc-treffer__titel {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 650;
	line-height: 1.3;
	padding-left: 0;
	border-left: 0;
}

.vbc-treffer__titel a {
	text-decoration: none;
	color: inherit;
}

.vbc-treffer__titel a:hover {
	color: var(--vbc-akzent);
}

.vbc-suchergebnis .vbc-treffer__auszug {
	margin: .3rem 0 0;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--vbc-text-2);
	max-width: 65ch;
}


/* 7.5 Nichts gefunden */

.vbc-leer {
	padding: 1.5rem 0;
	font-size: 1rem;
	line-height: 1.6;
}

.vbc-leer__rat {
	color: var(--vbc-text-2);
}


/* -------------------------------------------------------------------------
   8. Nachträge
   ---------------------------------------------------------------------- */

/* 8.1 Logo statt Schriftzug */

#masthead .site-branding img,
#masthead .custom-logo {
	max-height: 3rem;
	width: auto;
	border-radius: 3px;
}

#masthead .site-title {
	font-size: 1.05rem;
	letter-spacing: -.01em;
}

@media (max-width: 600px) {
	#masthead .site-title {
		font-size: .95rem;
	}
}



/* 8.3 Suche im Menü */

.vbc-menue-suche {
	display: flex;
	align-items: center;
}

.vbc-menue-suche .vbc-suchform {
	max-width: 15rem;
	gap: .3rem;
	margin: 0;
}

/* Nur Größe und Schriftgrad — die Farben kommen aus der Grundregel
   (dunkler Text auf hellem Feld) beziehungsweise für die marineblaue
   Handy-Navigation aus 11.1. */
.vbc-menue-suche .vbc-suchform__feld {
	padding: .35rem .6rem;
	font-size: .85rem;
}

.vbc-menue-suche .vbc-suchform__knopf {
	padding: .35rem .7rem;
	font-size: .82rem;
}

/* Alles in eine Zeile.

   Der volle Vereinsname oben links ist rund hundert Pixel breiter als das
   frühere „VBC Ludwigshafen“. Zusammen mit sechs Menüpunkten und dem
   Suchfeld reichte die Breite darunter nicht mehr — das Feld rutschte in die
   zweite Zeile, und der Kopfbereich wurde breiter als der Inhalt darunter.

   Den größten Teil davon löst die Lupe: Der Knopf trägt im Kopfbereich nur
   noch das Symbol statt des Wortes „Suchen“. Der Rest sind zwei kleine
   Abstriche kurz oberhalb der Handy-Schwelle. */
@media (min-width: 1025px) {
	/* Das Suchfeld ist ein Menüpunkt, kein eigener Kopfbereich — der Umbruch
	   entstand deshalb in der Menüliste. Sie darf nicht umbrechen;
	   stattdessen gibt das Suchfeld nach, das als einziges Element dort
	   schmaler werden kann, ohne unlesbar zu werden. */
	#masthead .main-navigation .primary-menu-container > ul {
		flex-wrap: nowrap;
	}

	#masthead .main-navigation .primary-menu-container > ul > li.vbc-menue-suche {
		flex: 0 1 auto;
	}

	#masthead .vbc-menue-suche,
	#masthead .vbc-menue-suche .vbc-suchform {
		min-width: 0;
	}

	#masthead .vbc-menue-suche .vbc-suchform__feld {
		min-width: 5rem;
		flex: 1 1 auto;
	}

	/* Das Feld klappt auf: im Ruhezustand steht nur die Lupe, beim Klick
	   fährt das Feld nach links auf — über die Menüpunkte, nicht zwischen
	   sie. So bleibt die Navigation stehen und nichts springt.

	   Die Klasse „--klappbar“ setzt erst das Skript. Ohne JavaScript bleibt
	   das Feld sichtbar wie bisher, statt unerreichbar zu sein. */
	#masthead .vbc-menue-suche .vbc-suchform--klappbar {
		position: relative;
		max-width: none;
	}

	#masthead .vbc-suchform--klappbar .vbc-suchform__feld {
		position: absolute;
		right: 100%;
		top: 0;
		bottom: 0;
		margin: auto .35rem auto 0;
		height: 2.1rem;
		width: min(15rem, 40vw);
		/* Das Theme gibt jedem Eingabefeld max-width: 100 %. Bei einem absolut
		   gesetzten Feld bezieht sich das auf den Formularkasten — und der ist
		   im eingeklappten Zustand nur so breit wie die Lupe. Ohne diese Zeile
		   bleibt das Feld beim Aufklappen daumenbreit. */
		max-width: none;
		z-index: 5;
		background: #fff;
		box-shadow: 0 2px 12px -4px rgba(5, 21, 54, .35);
		transition: width .18s ease, opacity .18s ease;
	}

	#masthead .vbc-suchform--klappbar.is-zu .vbc-suchform__feld {
		width: 0;
		padding-left: 0;
		padding-right: 0;
		border-width: 0;
		opacity: 0;
		box-shadow: none;
		pointer-events: none;
	}

	/* Nur die Lupe. Das Wort bleibt im Markup und damit für Screenreader
	   lesbar — screen-reader-text bringt Kadence mit. */
	#masthead .vbc-menue-suche .vbc-suchform__wort {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	#masthead .vbc-menue-suche .vbc-suchform__knopf {
		flex: 0 0 auto;
		gap: 0;
		padding: .42rem .55rem;
	}

	#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
		white-space: nowrap;
	}

	/* Der Vereinsname bleibt ungebrochen — sonst steht er zweizeilig neben
	   einer einzeiligen Navigation. */
	#masthead .site-branding .site-title {
		white-space: nowrap;
		font-size: 1.2rem;
	}

	/* Mindestabstand zwischen Name und erstem Menüpunkt — ohne ihn stoßen
	   beide auf breiten Bildschirmen direkt aneinander. */
	#masthead .site-branding {
		padding-right: 1.4rem;
	}

	/* Der Kopfbereich rechnet mit 1 rem Seitenrand, die Inhaltsspalte
	   darunter mit 1,5 rem — deshalb ragte der Suchknopf rechts über die
	   Kante des Inhalts hinaus. Sichtbar wird das nur, solange das Fenster
	   schmaler ist als die Höchstbreite des Inhalts; darüber sind beide
	   ohnehin zentriert und bündig.

	   Der Wert steht hier fest und nicht als var(--global-content-edge-padding):
	   Diese Variable trägt innerhalb des Kopfbereichs einen anderen Wert und
	   hätte genau nichts geändert. */
	#masthead .site-header-row-container-inner > .site-container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* Unterhalb von etwa 1160 px reicht der Platz auch mit eingeklapptem Feld
   nicht ganz: Vereinsname und sechs Menüpunkte allein brauchen dort mehr,
   als zwischen den Rändern übrig ist. Ein kleiner Abstrich genügt — von den
   früheren drei Stufen ist damit eine geblieben. */
@media (min-width: 1025px) and (max-width: 1160px) {
	#masthead .site-branding .site-title {
		font-size: 1.05rem;
	}

	#masthead .site-branding {
		padding-right: .8rem;
	}

	#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
		padding-left: .3em;
		padding-right: .3em;
		font-size: .94rem;
	}
}

/* In der aufgeklappten Handy-Navigation steht das Feld auf hellem Grund. */
.mobile-navigation .vbc-menue-suche,
#mobile-drawer .vbc-menue-suche {
	padding: .8rem 0 0;
}

.mobile-navigation .vbc-menue-suche .vbc-suchform,
#mobile-drawer .vbc-menue-suche .vbc-suchform {
	max-width: none;
	width: 100%;
}


/* 8.4 Anklickbare Spielkarten */

.vbc-spiel--klickbar {
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.vbc-spiel--klickbar:hover,
.vbc-spiel--klickbar:focus-visible {
	border-color: var(--vbc-akzent);
	box-shadow: var(--vbc-schatten);
}

.vbc-spiel__mehr {
	margin-top: .1rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .64rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vbc-akzent);
}

.vbc-spiel__mehr::after {
	content: " →";
}


/* 8.5 Trainingszeiten-Tabellen */

.vbc-zeiten table {
	width: 100%;
	border-collapse: collapse;
}

.vbc-zeiten th {
	text-align: left;
	font-family: var(--vbc-schrift-daten);
	font-size: .66rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
	border-bottom: 1px solid var(--vbc-linie);
	padding: .4rem .3rem;
}

.vbc-zeiten td {
	padding: .5rem .3rem;
	border-bottom: 1px solid var(--vbc-linie-zart);
	font-size: .92rem;
}

.vbc-zeiten td:first-child {
	font-weight: 650;
	white-space: nowrap;
}

.vbc-zeiten figcaption {
	margin-top: .5rem;
	font-size: .82rem;
	color: var(--vbc-text-3);
}

@media (prefers-reduced-motion: reduce) {
	.vbc-spiel--klickbar { transition: none; }
}

/* 8.6 Offene Stellen im Impressum sichtbar markieren */

.vbc-pruefen {
	background: #fff3cd;
	color: #7a5200;
	padding: .1em .4em;
	border-radius: 2px;
	font-weight: 650;
}


/* -------------------------------------------------------------------------
   9. Korrekturen
   ---------------------------------------------------------------------- */

/* 9.1 Bilder in Karten wieder beschneiden statt stauchen

   Regel 6.3 (.entry-content img { height: auto }) hatte dieselbe Spezifität
   wie .vbc-karte__bild img (beide 0,1,1) und stand später — damit gewann sie
   und hebelte object-fit aus: Die Bilder wurden in das Kartenformat gequetscht
   statt beschnitten. Zwei Klassen heben das wieder auf. */

.vbc-karten .vbc-karte__bild img,
.vbc-treffer .vbc-treffer__bild img,
.vbc-berichte .vbc-bericht__bild img,
.vbc-bereiche .vbc-bereich__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* Das Vereinslogo als Ersatzbild ist quadratisch und randlos — es soll
   nicht formatfüllend beschnitten, sondern eingepasst werden. */
.vbc-karte__bild img[src*="vbc2"],
.vbc-treffer__bild img[src*="vbc2"],
.vbc-bericht__bild img[src*="vbc2"] {
	object-fit: contain;
	padding: .6rem;
	background: var(--vbc-flaeche-2);
}


/* 9.2 Umschalter sitzt bündig am Kopfbereich

   Die Leiste war navy, solange der Kopfbereich navy war. Jetzt ist beides
   weiß beziehungsweise hell — und die gewählte Abteilung ist damit die
   einzige Farbe im Streifen. Genau so soll es sein: Der Kopf gehört dem
   Verein, die Farbe der Abteilung. */

.vbc-umschalter,
.vbc-leiste {
	background: var(--vbc-flaeche-2);
}

.vbc-umschalter__ziel {
	background: transparent;
	color: var(--vbc-text-2);
}

.vbc-umschalter__ziel:hover,
.vbc-umschalter__ziel:focus-visible {
	color: var(--vbc-text);
	background: rgba(3, 28, 55, .05);
}

.vbc-umschalter__ziel:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: -3px;
}

@media (min-width: 720px) {
	.vbc-umschalter {
		justify-content: flex-end;
	}

	.vbc-umschalter__ziel {
		min-width: 150px;
	}
}


/* 9.3 Kontrast in Kopfbereich und Handy-Navigation

   Kadence färbt Menü und Bedienelemente über die Palette ein. Der Kopfbereich
   ist weiß und braucht dunkle Schrift; die aufgeklappte Handy-Navigation
   bleibt navy und braucht weiterhin helle. */

#masthead .menu-toggle-open,
#masthead .menu-toggle-open .kadence-svg-icon,
#masthead .menu-toggle-open .menu-label {
	color: var(--vbc-text);
}

#mobile-drawer,
#mobile-drawer .drawer-inner {
	background: var(--vbc-navy);
}

#mobile-drawer a,
#mobile-drawer .menu-item > a,
#mobile-drawer button {
	color: #fff;
}

#mobile-drawer .menu-item.current-menu-item > a {
	color: #fff;
	/* Die Navigation ist marineblau — der Akzent muss hier aufgehellt sein. */
	box-shadow: inset 3px 0 0 var(--vbc-akzent-hell);
}

/* Fußbereich: Kadence setzt im Fußtext eigene Absatzfarben. */
#colophon .footer-html,
#colophon .footer-html p,
#colophon .site-info {
	color: var(--vbc-text-2);
}

#colophon .vbc-fussleiste a {
	color: var(--vbc-text);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Der Aufrufkasten trägt Navy — Kadence würde die Absätze darin dunkel
   einfärben. */
.vbc-cta p,
.vbc-cta li {
	color: rgba(255, 255, 255, .85);
}


/* -------------------------------------------------------------------------
   10. Mannschaftsseite
   ---------------------------------------------------------------------- */

.vbc-mannschaft__kopf {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--vbc-radius);
	min-height: 16rem;
	margin-bottom: 1.2rem;
	isolation: isolate;
	color: #fff;
}

.vbc-mannschaft__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
}

/* Der weichgezeichnete Grund füllt das Band, das Foto selbst liegt darüber. */
.vbc-mannschaft__grund {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(30px) saturate(.6) brightness(.5);
	/* Weichzeichnen holt Farbe von außerhalb des Kastens herein und hellt die
	   Ränder auf. Ein wenig übergroß skaliert schiebt die Kante aus dem Bild. */
	transform: scale(1.2);
}

.vbc-mannschaft__bild img {
	position: relative;
	width: 100%;
	height: 100%;
	/* Nicht „cover“: Bei einem Mannschaftsfoto zählt, dass alle drauf sind. */
	object-fit: contain;
	display: block;
	border-radius: 0;
}

.vbc-mannschaft__kopf::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Nur so viel Schleier, dass die weiße Schrift trägt — das Foto soll
	   erkennbar bleiben. Der Verlauf ist unten links am dichtesten, genau
	   dort steht der Text. */
	background: linear-gradient(15deg, rgba(5, 21, 54, .88) 0%, rgba(5, 21, 54, .45) 45%, color-mix(in srgb, var(--vbc-akzent-hell) 22%, transparent) 100%);
}

.vbc-mannschaft__inhalt {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	height: 100%;
	padding: 1.4rem 1.5rem 1.5rem;
	justify-content: flex-end;
}

.vbc-mannschaft__liga {
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.vbc-mannschaft__name {
	font-family: var(--vbc-schrift-display);
	font-size: clamp(1.8rem, 6vw, 2.8rem);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1;
	text-transform: uppercase;
}

/* Kennzahlen */

.vbc-kennzahlen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .6rem;
	margin: 0 0 1.4rem;
}

.vbc-kennzahl {
	padding: .8rem 1rem;
	border: 1px solid var(--vbc-linie);
	border-top: 3px solid var(--vbc-akzent);
	border-radius: var(--vbc-radius);
	background: var(--vbc-flaeche);
	text-align: center;
}

.vbc-kennzahl dt {
	font-family: var(--vbc-schrift-daten);
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.vbc-kennzahl dd {
	margin: .15rem 0 0;
	font-family: var(--vbc-schrift-display);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--vbc-text);
}

.entry-content .vbc-mannschaft__text {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--vbc-text-2);
	/* Ausdrücklich ohne Zeilenbreitenbegrenzung: Der Absatz soll die volle
	   Seitenbreite nutzen wie der Rest der Mannschaftsseite. */
	max-width: none;
	margin-bottom: 1.6rem;
}

/* Zweispaltig ab Tablet */

.vbc-mannschaft__spalten {
	display: grid;
	gap: 1.6rem;
	/* minmax(0, …) statt 1fr: sonst erbt die Spalte min-width:auto und die
	   breiten Tabellen (Saisonplan, Ligatabelle) sprengen sie am Handy. */
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
	.vbc-mannschaft__spalten {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
		align-items: start;
	}
}

.vbc-mannschaft__rand {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.vbc-block {
	padding: 1rem 1.1rem 1.2rem;
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	background: var(--vbc-flaeche);
}

.entry-content .vbc-block h2 {
	margin: 0 0 .6rem;
	padding-left: 0;
	border-left: 0;
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.vbc-zeitenliste {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--vbc-schrift-daten);
	font-size: .88rem;
	line-height: 1.9;
}

.vbc-block__zusatz {
	margin: .5rem 0 0;
	font-size: .85rem;
	color: var(--vbc-text-3);
}

/* Erfolge als Zeitleiste */

.vbc-erfolge {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.vbc-erfolge li {
	display: grid;
	grid-template-columns: 3.2rem 1fr;
	gap: .6rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--vbc-linie-zart);
}

.vbc-erfolge li:last-child {
	border-bottom: 0;
}

.vbc-erfolge__jahr {
	font-family: var(--vbc-schrift-daten);
	font-weight: 700;
	font-size: .85rem;
	color: var(--vbc-akzent);
	font-variant-numeric: tabular-nums;
}

.vbc-erfolge__was {
	font-size: .9rem;
	line-height: 1.4;
}


/* 10.1 Kopfbild kleiner und mittig

   Vorher füllte das Foto einen sehr hohen Streifen und wurde dabei stark
   beschnitten. Jetzt ein ruhiges Seitenverhältnis, mittiger Ausschnitt und
   der Text in einem Farbverlauf nur am unteren Rand. */

/* Ein 3:2-Mannschaftsfoto verliert in einem breiten Streifen sehr viel Höhe:
   bei 16:7 und 22rem Deckel waren es 58 % — da fallen zwangsläufig Köpfe weg.
   Flacheres Verhältnis und höherer Deckel senken den Verlust auf gut ein
   Drittel, der Ausschnitt sitzt zusätzlich weit oben. */
/* 16:9 statt 2:1 mit engem Deckel: Die Fotos sind 3:2, der frühere Kasten
   wirkte effektiv 2,77:1 und schnitt 46 % der Bildhöhe weg — bei Damen I
   die komplette kniende Reihe. Bei 16:9 bleiben rund 16 % Beschnitt, und
   mittig gesetzt ist von 8 % bis 92 % der Bildhöhe alles zu sehen.

   width: 100% ist nötig: Mit aspect-ratio allein schrumpft der Browser bei
   erreichtem max-height auch die Breite mit. */
.vbc-mannschaft__kopf {
	min-height: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 44rem;
}

@media (max-width: 700px) {
	.vbc-mannschaft__kopf {
		aspect-ratio: 3 / 2;
		max-height: none;
	}
}



/* Der Verlauf deckt nur das untere Drittel — darüber bleibt das Foto klar. */
.vbc-mannschaft__kopf::after {
	background: linear-gradient(to top, rgba(3, 28, 55, .92) 0%, rgba(3, 28, 55, .55) 28%, rgba(3, 28, 55, 0) 62%);
}


/* 10.2 Mehr anzeigen */

.vbc-mehr {
	margin: 1.1rem 0 0;
	text-align: center;
}

.vbc-mehr__knopf {
	padding: .6rem 1.4rem;
	border: 1px solid var(--vbc-akzent);
	border-radius: 2rem;
	background: transparent;
	color: var(--vbc-akzent);
	font-weight: 650;
	font-size: .92rem;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.vbc-mehr__knopf:hover:not([disabled]),
.vbc-mehr__knopf:focus-visible {
	background: var(--vbc-akzent);
	color: #fff;
}

.vbc-mehr__knopf[disabled] {
	opacity: .6;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-mehr__knopf { transition: none; }
}


/* -------------------------------------------------------------------------
   11. Kader, Übersicht, Kontrastnachträge
   ---------------------------------------------------------------------- */

/* 11.1 Suchfeld

   Kadence färbt Formularfelder über die Palette ein und liegt mit
   .site-header input (0,1,1) über einer einzelnen Klasse — deshalb müssen
   die Farben hier ausdrücklich gesetzt werden.

   Zwei Umgebungen, zwei Fassungen: Der Kopfbereich ist weiß, dort braucht
   das Feld dunkle Schrift und einen sichtbaren Rahmen. Die aufgeklappte
   Handy-Navigation ist weiterhin marineblau und behält die helle Fassung.
   Vorher galt "hell auf dunkel" für beides — im weißen Kopf war das Feld
   damit unsichtbar. */

#masthead .vbc-suchform__feld {
	color: var(--vbc-text);
	background: var(--vbc-flaeche);
	border-color: var(--vbc-linie);
	-webkit-text-fill-color: var(--vbc-text);
}

#masthead .vbc-suchform__feld::placeholder {
	color: var(--vbc-text-3);
	-webkit-text-fill-color: var(--vbc-text-3);
}

#masthead .vbc-suchform__feld:focus {
	background: var(--vbc-flaeche);
	border-color: var(--vbc-akzent);
}

#mobile-drawer .vbc-suchform__feld {
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .3);
	-webkit-text-fill-color: #fff;
}

#mobile-drawer .vbc-suchform__feld::placeholder {
	color: rgba(255, 255, 255, .6);
	-webkit-text-fill-color: rgba(255, 255, 255, .6);
}

#mobile-drawer .vbc-suchform__feld:focus {
	background: rgba(255, 255, 255, .18);
	border-color: #fff;
}


/* 11.2 Formulare auf dunklen Flächen

   Die Beach- und Buchungsseiten setzen über den Baukasten dunkle Kästen mit
   hellen Beschriftungen — die Eingabefelder darin blieben aber dunkel auf
   dunkel. */

.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content input[type="date"],
.entry-content input[type="number"],
.entry-content select,
.entry-content textarea {
	background: #fff;
	color: var(--vbc-text);
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	padding: .5rem .7rem;
}

.entry-content input::placeholder,
.entry-content textarea::placeholder {
	color: var(--vbc-text-3);
}

.entry-content input[type="text"]:focus-visible,
.entry-content input[type="email"]:focus-visible,
.entry-content select:focus-visible,
.entry-content textarea:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 1px;
}

/* Beschriftungen in dunklen Kästen des Baukastens hell halten. */
.panel-grid[data-style*="background"] label,
.panel-row-style label,
.su-box-content label {
	color: inherit;
}


/* 11.3 Mannschaftsübersicht */

.vbc-uebersicht__team a {
	font-weight: 650;
	text-decoration: none;
	color: var(--vbc-text);
}

.vbc-uebersicht__team a:hover,
.vbc-uebersicht__team a:focus-visible {
	color: var(--vbc-akzent);
	text-decoration: underline;
}

.vbc-uebersicht td:nth-child(2) {
	color: var(--vbc-text-2);
	font-size: .82rem;
}


/* 11.4 Ansprechpartnerin mit Bild */

.vbc-person {
	display: flex;
	gap: .8rem;
	align-items: center;
}

.vbc-person__bild {
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--vbc-flaeche-2);
}

.vbc-person__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Die Porträts sind Ganzkörperaufnahmen im Hochformat. Im Kreis blieb das
	   Gesicht dadurch briefmarkengroß. „scale“ vergrößert den Ausschnitt,
	   der Ursprung liegt oben, damit dabei der Kopf stehen bleibt und nicht
	   der Bauch. */
	object-position: center 18%;
	transform: scale(1.7);
	transform-origin: center 18%;
	display: block;
	border-radius: 0;
}

/* Das Ersatzwappen ist bereits formatfüllend und darf nicht mitwachsen. */
.vbc-person__bild--ersatz img {
	transform: none;
}

.vbc-person__text {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
	font-size: .9rem;
}

.vbc-person__name {
	font-weight: 650;
}

.vbc-person__rolle {
	font-family: var(--vbc-schrift-daten);
	font-size: .66rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}


/* 11.5 Kader

   Porträt vollflächig, Name darauf statt darunter — dieselbe Sprache wie die
   Abteilungskacheln und das Mannschaftsbild. Der Verlauf liegt nur über dem
   unteren Drittel, damit die Gesichter frei bleiben. */

.vbc-kader {
	margin-top: 2.4rem;
}

.vbc-kader__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .8rem;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 560px) {
	.vbc-kader__liste { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.vbc-kader__liste { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1150px) {
	.vbc-kader__liste { grid-template-columns: repeat(6, 1fr); }
}

/* Die Porträts liegen als 1707x2560 vor, also genau 2:3. Bei 3:4 wurde
   knapp ein Zehntel der Höhe weggeschnitten — mit 2:3 passt der Kasten aufs
   Bild und es wird gar nichts beschnitten. */
.vbc-spielerin {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: var(--vbc-radius);
	background: var(--vbc-navy);
	isolation: isolate;
}

.vbc-spielerin__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.vbc-spielerin__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 12%;
	display: block;
	border-radius: 0;
	transition: transform .35s ease;
}

.vbc-spielerin::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(3, 28, 55, .92) 0%, rgba(3, 28, 55, .5) 26%, rgba(3, 28, 55, 0) 55%);
}

.vbc-spielerin__text {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: .7rem .8rem .8rem;
	color: #fff;
}

.vbc-spielerin__position {
	font-family: var(--vbc-schrift-daten);
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

.vbc-spielerin__name {
	font-family: var(--vbc-schrift-display);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.05;
	text-transform: uppercase;
}

/* Beim Überfahren rückt das Bild leicht heran und die Vereinsfarbe legt sich
   darüber — genug, um Leben hineinzubringen, wenig genug, um nicht zu stören. */
.vbc-spielerin:hover .vbc-spielerin__bild img {
	transform: scale(1.04);
}

.vbc-spielerin:hover::after {
	background: linear-gradient(to top, color-mix(in srgb, var(--vbc-akzent-hell) 85%, transparent) 0%, rgba(5, 21, 54, .5) 30%, rgba(5, 21, 54, 0) 58%);
}

@media (prefers-reduced-motion: reduce) {
	.vbc-spielerin__bild img { transition: none; }
	.vbc-spielerin:hover .vbc-spielerin__bild img { transform: none; }
}


/* 11.6 Luft vor "Mehr anzeigen" */

.vbc-mehr {
	margin-top: 1.8rem;
}


/* -------------------------------------------------------------------------
   12. Sponsoren
   Zurückhaltend gehalten: Die Logos sollen erkennbar sein, aber nicht mit
   dem Inhalt konkurrieren. Deshalb Graustufen im Ruhezustand.
   ---------------------------------------------------------------------- */

.vbc-sponsorenband {
	background: var(--vbc-flaeche);
	border-top: 1px solid var(--vbc-linie);
	padding: 1.8rem 0 2rem;
}

.vbc-sponsoren__titel {
	margin: 0 0 1.1rem;
	text-align: center;
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.vbc-sponsoren__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.6rem 2.6rem;
}

.vbc-sponsor img {
	display: block;
	max-height: 3rem;
	width: auto;
	max-width: 11rem;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .68;
	transition: filter .2s ease, opacity .2s ease;
}

.vbc-sponsor a:hover img,
.vbc-sponsor a:focus-visible img {
	filter: none;
	opacity: 1;
}

.vbc-sponsor a:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-sponsor img { transition: none; }
}


/* -------------------------------------------------------------------------
   13. Nachbesserungen
   ---------------------------------------------------------------------- */

/* 13.1 Mannschaftsfoto: Köpfe nicht abschneiden

   Bei 16:7 wird aus einem 3:2-Foto viel oben und unten weggeschnitten.
   Mittig (50 %) traf die Körpermitte — der Ausschnitt muss nach oben. */

/* Kein Ausschnitt mehr: Das Foto wird vollständig ins Band eingepasst
   (siehe object-fit: contain oben), den Rest übernimmt der weiche Grund. */


/* 13.2 Abstand vor "Mehr anzeigen"

   .vbc-mehr ist ein <p>. Kadence setzt dessen Abstände über .entry-content p
   (Spezifität 0,1,1) und schlug damit die einzelne Klasse — der Abstand kam
   nie an. Zwei Klassen heben das auf. Dieselbe Falle wie schon bei den
   Spielkarten und den Kartenbildern. */

.entry-content .vbc-mehr,
.vbc-mannschaft .vbc-mehr {
	margin-top: 2.2rem;
	margin-bottom: 0;
}


/* 13.3 Porträt in groß */

.vbc-spielerin__link,
.vbc-mannschaft__link {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
	color: inherit;
}

.vbc-grossbild-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

.vbc-grossbild {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(3, 28, 55, .93);
}

.vbc-grossbild__figur {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .8rem;
	align-items: center;
	max-height: 100%;
	max-width: 100%;
}

/* Der frühere Deckel von 34rem war auf die hochkanten Porträts gemünzt und
   ließ ein Mannschaftsfoto im Querformat winzig erscheinen. Jetzt begrenzt
   die Höhe das Hochformat und die Breite das Querformat — jedes Bild wird so
   groß, wie der Bildschirm es hergibt. */
.vbc-grossbild__figur img {
	display: block;
	max-width: min(100%, 78rem);
	max-height: calc(100vh - 9rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--vbc-radius);
}

.vbc-grossbild__figur figcaption {
	font-family: var(--vbc-schrift-display);
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #fff;
}

.vbc-grossbild__zu {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}

.vbc-grossbild__zu:hover,
.vbc-grossbild__zu:focus-visible {
	background: var(--vbc-akzent);
}

.vbc-grossbild__zu:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   14. Bühne, Spielorte, Blättern
   ---------------------------------------------------------------------- */

/* 14.1 Bühne der Startseite */

.vbc-buehne {
	position: relative;
	overflow: hidden;
	border-radius: var(--vbc-radius);
	min-height: 24rem;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	color: var(--vbc-text);
	margin-bottom: 2rem;
}

@media (min-width: 900px) {
	.vbc-buehne {
		min-height: 30rem;
		align-items: center;
	}
}

.vbc-buehne__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.vbc-buehne__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	display: block;
	border-radius: 0;
}

/* Heller Schleier statt eines dunklen.
   Vorher lag über dem Foto ein Verlauf im Marineblau der Volleyballabteilung.
   Darauf konnte der Volleyball-Knopf nicht in derselben Farbe stehen — er
   wäre unsichtbar gewesen. Jetzt ist der Grund weiß, und beide Knöpfe tragen
   ihre echte Abteilungsfarbe.
   Schmal: von unten aufgehellt, der Text steht unten.
   Breit: von links aufgehellt, damit rechts das Foto sichtbar bleibt. */
.vbc-buehne::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Schmal steht der Text über fast der ganzen Fläche — der Schleier muss
	   deshalb bis weit nach oben decken, sonst steht die Vorzeile auf dem
	   Foto und ist kaum zu lesen. */
	background: linear-gradient(
		to top,
		rgba(255, 255, 255, .97) 0%,
		rgba(255, 255, 255, .96) 62%,
		rgba(255, 255, 255, .84) 82%,
		rgba(255, 255, 255, .4) 100%
	);
}

@media (min-width: 900px) {
	/* Der deckende Teil endet an der Textbreite (33rem, siehe
	   .vbc-buehne__inhalt), nicht an einem Prozentwert. Mit 44 % reichte er
	   bei 900–1200 px Breite nicht bis zum Zeilenende — der Text lief rechts
	   ins Mannschaftsfoto. */
	.vbc-buehne::after {
		background: linear-gradient(
			95deg,
			rgba(255, 255, 255, .98) 0%,
			rgba(255, 255, 255, .96) 33rem,
			rgba(255, 255, 255, .55) calc(33rem + 12%),
			rgba(255, 255, 255, .06) calc(33rem + 30%),
			rgba(255, 255, 255, 0) calc(33rem + 42%)
		);
	}
}

.vbc-buehne__inhalt {
	padding: 2rem 1.6rem 2rem;
	max-width: 44rem;
}

@media (min-width: 900px) {
	.vbc-buehne__inhalt {
		padding: 3rem 2.6rem;
		/* Bleibt im deckenden Teil des Verlaufs — sonst stünde die Schrift
		   halb auf dem Foto. */
		max-width: 33rem;
	}
}

.vbc-buehne__oben {
	margin: 0;
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.entry-content .vbc-buehne__titel {
	margin: .4rem 0 0;
	padding-left: 0;
	border-left: 0;
	font-family: var(--vbc-schrift-display);
	font-size: clamp(2rem, 6vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: .98;
	text-transform: uppercase;
	color: var(--vbc-volleyball);
	text-wrap: balance;
}

.entry-content .vbc-buehne__text {
	margin: .9rem 0 0;
	font-size: clamp(.98rem, 2vw, 1.1rem);
	line-height: 1.55;
	color: var(--vbc-text-2);
	max-width: 52ch;
}

.vbc-buehne__wege {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.4rem 0 0;
}

.vbc-buehne__weg {
	padding: .7rem 1.5rem;
	border-radius: 2rem;
	font-family: var(--vbc-schrift-display);
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: transform .15s ease, background-color .15s ease;
}

/* Beide Knöpfe in der echten Abteilungsfarbe — möglich, seit der Schleier
   hell ist. */
.vbc-buehne__weg--volleyball { background: var(--vbc-volleyball); }
.vbc-buehne__weg--floorball  { background: var(--vbc-floorball); }

.vbc-buehne__weg:hover,
.vbc-buehne__weg:focus-visible {
	color: #fff;
	transform: translateY(-2px);
}

.vbc-buehne__weg--volleyball:hover,
.vbc-buehne__weg--volleyball:focus-visible { background: var(--vbc-volleyball-hell); }

.vbc-buehne__weg--floorball:hover,
.vbc-buehne__weg--floorball:focus-visible { background: var(--vbc-floorball-hell); }

.vbc-buehne__weg:focus-visible {
	outline: 2px solid var(--vbc-volleyball);
	outline-offset: 2px;
}


/* 14.2 Floorball-Karten in ihrer Farbe, auch im Volleyball-Umfeld */

.vbc-spiel--floorball .vbc-spiel__liga { background: var(--vbc-floorball); }
.vbc-spiel--floorball .vbc-spiel__team:last-of-type { color: var(--vbc-floorball); }
.vbc-spiel--floorball .vbc-spiel__mehr { color: var(--vbc-floorball); }

.vbc-spiel--floorball.vbc-spiel--klickbar:hover,
.vbc-spiel--floorball.vbc-spiel--klickbar:focus-visible {
	border-color: var(--vbc-floorball);
}


/* 14.3 Spielorte */

.vbc-orte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.2rem;
	grid-template-columns: 1fr;
	/* Nicht auf gleiche Höhe strecken: Solange nicht zu jedem Ort eine
	   Außenansicht vorliegt, sind die Kacheln unterschiedlich hoch — gestreckt
	   entstünde darunter eine leere Fläche. Sobald die Fotos da sind, gleichen
	   sie sich von selbst an. */
	align-items: start;
}

@media (min-width: 720px) {
	.vbc-orte { grid-template-columns: repeat(3, 1fr); }
}

.vbc-ort {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	background: var(--vbc-flaeche);
}

.vbc-ort__bild {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--vbc-flaeche-2);
}

.vbc-ort__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.vbc-ort__text {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: 1rem 1.1rem 1.2rem;
}

.vbc-ort__zusatz {
	font-family: var(--vbc-schrift-daten);
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.vbc-ort__name {
	font-family: var(--vbc-schrift-display);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.1;
}

.vbc-ort__anschrift {
	font-size: .92rem;
	line-height: 1.45;
	color: var(--vbc-text-2);
}

.vbc-ort__karte {
	margin-top: .5rem;
	align-self: flex-start;
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vbc-akzent);
	text-decoration: none;
}

.vbc-ort__karte::after { content: " →"; }

/* Der Kartenausschnitt als Streifen unter dem Foto. Er beantwortet eine
   andere Frage als das Foto — „wo ist das?“ statt „wie sieht das aus?“ —
   und soll es deshalb weder ersetzen noch gleich groß daneben stehen. */
.vbc-ort__karte-bild {
	display: block;
	aspect-ratio: 16 / 6;
	overflow: hidden;
	border-top: 1px solid var(--vbc-linie);
	background: var(--vbc-flaeche-2);
}

.vbc-ort__karte-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Sieht nur, wer die Seite pflegen darf. */
.vbc-ort__fehlt {
	margin: 0;
	padding: .5rem 1.1rem .7rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .66rem;
	line-height: 1.35;
	color: var(--vbc-text-3);
	background: var(--vbc-flaeche-2);
	border-top: 1px dashed var(--vbc-linie);
}

/* Die ganze Kachel ist der Link. Der Umschlag muss die Spaltenhöhe
   durchreichen, sonst säße der Text nicht mehr am unteren Rand. */
.vbc-ort__flaeche {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.vbc-ort--verlinkt .vbc-ort__text {
	flex: 1;
}

.vbc-ort--verlinkt .vbc-ort__bild img {
	transition: transform .4s ease;
}

.vbc-ort__flaeche:hover .vbc-ort__bild img,
.vbc-ort__flaeche:focus-visible .vbc-ort__bild img {
	transform: scale(1.04);
}

.vbc-ort__flaeche:hover .vbc-ort__karte,
.vbc-ort__flaeche:focus-visible .vbc-ort__karte {
	text-decoration: underline;
}

.vbc-ort__flaeche:focus-visible {
	outline: 3px solid var(--vbc-akzent);
	outline-offset: -3px;
	border-radius: var(--vbc-radius);
}

@media (prefers-reduced-motion: reduce) {
	.vbc-ort--verlinkt .vbc-ort__bild img { transition: none; }
	.vbc-ort__flaeche:hover .vbc-ort__bild img { transform: none; }
}


/* 14.4 Trainingszeiten: Mannschaftsnamen ohne Unterstrich */

.vbc-zeiten td a {
	text-decoration: none;
	color: inherit;
	font-weight: 650;
}

.vbc-zeiten td a:hover,
.vbc-zeiten td a:focus-visible {
	color: var(--vbc-akzent);
}


/* 14.5 Mannschaftsfoto über die volle Breite der Box */

.vbc-mannschaft__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
}

/* Das Band soll links und rechts aus der Box herausragen. Die negativen
   Ränder allein reichen dafür nicht: Weiter oben steht width: 100 %, und ein
   Block mit fester Breite kann nicht wachsen. CSS löst den Widerspruch,
   indem es margin-right verwirft — das Band rutscht um einen Boxrand nach
   links und endet einen Boxrand zu früh. Gemessen: Box 124…1302, Band
   92…1270. Auf jeder Mannschaftsseite saß das Foto dadurch 32 Pixel zu weit
   links, unabhängig davon, wie mittig das Foto selbst war.

   Deshalb die Breite hier gleich mitrechnen. width: 100 % bleibt oben stehen,
   wo es hingehört (sonst schrumpft der Browser bei erreichtem max-height auch
   die Breite mit) — diese Regel kommt später und überschreibt sie. */
.vbc-mannschaft__kopf {
	margin-left: calc(-1 * var(--vbc-boxrand, 0px));
	margin-right: calc(-1 * var(--vbc-boxrand, 0px));
	width: calc(100% + 2 * var(--vbc-boxrand, 0px));
	border-radius: 0;
}

@media (min-width: 720px) {
	:root { --vbc-boxrand: 2rem; }
}

.vbc-mannschaft__inhalt { position: relative; z-index: 2; pointer-events: none; }


/* 14.6 Blättern im Großbild */

.vbc-grossbild__blaettern {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.vbc-grossbild__blaettern--zurueck { left: 1rem; }
.vbc-grossbild__blaettern--vor     { right: 1rem; }

.vbc-grossbild__blaettern:hover,
.vbc-grossbild__blaettern:focus-visible { background: var(--vbc-akzent); }

.vbc-grossbild__blaettern:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 560px) {
	.vbc-grossbild__blaettern { width: 2.5rem; height: 2.5rem; font-size: 1.6rem; }
	.vbc-grossbild__blaettern--zurueck { left: .4rem; }
	.vbc-grossbild__blaettern--vor     { right: .4rem; }
}


/* 14.7 Sponsoren im Fußbereich */

/* Sponsoren im nun weißen Fußbereich.

   Die weißen Kacheln von früher entfallen: Sie waren nötig, solange der
   Fußbereich navy war — Sparkasse (deckendes Rot) und Aslan (deckendes Weiß)
   ließen sich nicht ausstanzen und wurden zu Kästen. Auf weißem Grund liegen
   alle drei Logos in ihren Markenfarben frei; zusammengehalten wird die Reihe
   nur von einer zarten Linie. */

/* Eine Zeile: Partnerlogos links, Kanäle und Rechtszeile rechts. Vorher
   standen beide als eigene Streifen untereinander und beides mittig — das
   kostete Höhe, ohne dass die Logos etwas davon hatten. */
#colophon .vbc-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem 2.5rem;
	text-align: left;
}

#colophon .vbc-fuss__partner {
	flex: 0 1 auto;
}

#colophon .vbc-fuss__rest {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .3rem;
	text-align: right;
}

#colophon .vbc-fuss__rest p {
	margin: 0;
}

#colophon .vbc-sponsoren__liste {
	justify-content: flex-start;
	gap: .8rem 1rem;
}

/* Schmal bleibt es untereinander und mittig — nebeneinander wäre für beide
   Spalten kein Platz. */
@media (max-width: 720px) {
	#colophon .vbc-fuss {
		justify-content: center;
		text-align: center;
	}

	#colophon .vbc-fuss__rest {
		align-items: center;
		text-align: center;
	}

	#colophon .vbc-sponsoren__liste {
		justify-content: center;
	}
}

#colophon .vbc-sponsor {
	display: flex;
}

/* Reines Weiß, keine Teiltransparenz: Aslan und Sparkasse bringen einen
   deckenden Hintergrund mit (weiß bzw. rot). Auf einer 92-%-Kachel entsteht
   dadurch ein sichtbares Rechteck im leicht grauen Feld — genau der Effekt,
   der störte. Gleiche Kachelgröße für alle, damit die drei sehr
   unterschiedlichen Logos als Reihe lesbar werden. */
#colophon .vbc-sponsor a,
#colophon .vbc-sponsor > img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 11.4rem;
	height: 4.13rem;
	padding: .53rem .9rem;
	border: 1px solid var(--vbc-linie-zart);
	border-radius: var(--vbc-radius);
	background: #fff;
	transition: border-color .2s ease, transform .2s ease;
}

#colophon .vbc-sponsor a:hover,
#colophon .vbc-sponsor a:focus-visible {
	border-color: var(--vbc-akzent);
	transform: translateY(-2px);
}

/* Die Logos liegen in sehr unterschiedlichen Größen vor — bei natürlicher
   Größe säße die Sparkasse verloren in ihrer Kachel. width/height auf 100 %
   mit object-fit füllt jede Kachel gleich weit aus, ohne zu verzerren. */
#colophon .vbc-sponsor img {
	filter: none;
	opacity: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
}


#colophon .vbc-sponsor a:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	#colophon .vbc-sponsor a { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vbc-buehne__weg { transition: none; }
	.vbc-buehne__weg:hover { transform: none; }
}


/* 14.8 Runde Schaltflächen im Großbild

   Kadence gibt jedem <button> eigene Innenabstände (.entry-content button,
   Spezifität 0,1,1). Die machten aus den Kreisen Ovale, weil sie die Breite
   über die gesetzte Höhe hinaus aufblähten. Zwei Klassen und padding: 0
   heben das auf; aspect-ratio hält sie quadratisch, egal was im Knopf steht. */

.vbc-grossbild .vbc-grossbild__zu,
.vbc-grossbild .vbc-grossbild__blaettern {
	box-sizing: border-box;
	padding: 0;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	flex: none;
	min-width: 0;
	border-radius: 50%;
}

.vbc-grossbild .vbc-grossbild__zu {
	width: 2.75rem;
	height: 2.75rem;
}

.vbc-grossbild .vbc-grossbild__blaettern {
	width: 3rem;
	height: 3rem;
}

@media (max-width: 560px) {
	.vbc-grossbild .vbc-grossbild__blaettern {
		width: 2.5rem;
		height: 2.5rem;
	}
}


/* 14.9 Trainingszeiten: gleiche Spaltenbreiten über alle Tabellen

   Ohne feste Vorgabe misst der Browser jede Tabelle für sich aus — die erste
   Spalte war bei "Ballschule" breiter als bei "Damen I", obwohl die Tabellen
   direkt untereinander stehen. table-layout: fixed nimmt ihm die Entscheidung
   ab, die erste Spalte bekommt überall dieselbe Breite. */

.vbc-zeiten table {
	table-layout: fixed;
}

.vbc-zeiten th:first-child,
.vbc-zeiten td:first-child {
	width: 11rem;
}

@media (max-width: 600px) {
	.vbc-zeiten th:first-child,
	.vbc-zeiten td:first-child {
		width: 7.5rem;
	}
}

/* Die dritte Spalte gibt es nur im Floorball (Halle) — dort dürfen sich die
   beiden hinteren Spalten den Rest gleichmäßig teilen. */
.vbc-zeiten td:first-child {
	white-space: normal;
}


/* -------------------------------------------------------------------------
   15. Vereinstermine
   Bewusst anders gebaut als die Spielkarten: Ein Vereinstermin ist kein
   Spieltag, und ein Datumsblock links liest sich schneller als eine Zeile.
   ---------------------------------------------------------------------- */

.vbc-termine {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.vbc-termine { grid-template-columns: repeat(2, 1fr); }
}

.vbc-termin__inhalt {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: .9rem 1.1rem;
	border: 1px solid var(--vbc-linie);
	border-left: 3px solid var(--vbc-akzent);
	border-radius: var(--vbc-radius);
	background: var(--vbc-flaeche);
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: box-shadow .15s ease, border-color .15s ease;
}

a.vbc-termin__inhalt:hover,
a.vbc-termin__inhalt:focus-visible {
	box-shadow: var(--vbc-schatten);
	border-color: var(--vbc-akzent);
}

.vbc-termin__datum {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	padding: .4rem 0;
	border-radius: var(--vbc-radius);
	background: var(--vbc-akzent-weich);
	line-height: 1;
}

.vbc-termin__tag {
	font-family: var(--vbc-schrift-display);
	font-size: 1.5rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--vbc-akzent);
}

.vbc-termin__monat {
	margin-top: .15rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .6rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vbc-text-2);
}

.vbc-termin__text {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.vbc-termin__titel {
	font-weight: 650;
	font-size: 1rem;
	line-height: 1.25;
}

a.vbc-termin__inhalt:hover .vbc-termin__titel {
	color: var(--vbc-akzent);
}

.vbc-termin__zusatz {
	font-size: .86rem;
	line-height: 1.4;
	color: var(--vbc-text-2);
}

.vbc-termin__ort {
	font-family: var(--vbc-schrift-daten);
	font-size: .66rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

@media (prefers-reduced-motion: reduce) {
	.vbc-termin__inhalt { transition: none; }
}


/* 15.1 Ersatzporträt beim Ansprechpartner

   Das Vereinslogo ist quadratisch und randlos — es soll eingepasst und nicht
   formatfüllend beschnitten werden wie ein Foto. */

.vbc-person__bild--ersatz {
	background: var(--vbc-flaeche-2);
}

.vbc-person__bild--ersatz img {
	object-fit: contain;
	object-position: center;
	padding: .45rem;
}


/* -------------------------------------------------------------------------
   16. Ansprechpartner
   ---------------------------------------------------------------------- */

.vbc-funktionen + .vbc-funktionen {
	margin-top: 2rem;
}

.vbc-funktionen__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .8rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.vbc-funktionen__liste { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.vbc-funktionen__liste { grid-template-columns: repeat(3, 1fr); }
}

.vbc-funktion {
	display: flex;
	gap: .9rem;
	align-items: center;
	padding: .9rem 1rem;
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	background: var(--vbc-flaeche);
}

.vbc-funktion__bild {
	flex: 0 0 auto;
	width: 3.4rem;
	height: 3.4rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--vbc-flaeche-2);
	display: grid;
	place-items: center;
}

.vbc-funktion__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Siehe .vbc-person__bild img — dieselben Ganzkörperporträts. */
	object-position: center 18%;
	transform: scale(1.7);
	transform-origin: center 18%;
	display: block;
	border-radius: 0;
}

.vbc-funktion__bild--ersatz img {
	transform: none;
}

/* Als Verweis aufs Großbild: Der Kreis soll aussehen wie vorher und nicht
   wie ein Textlink. */
a.vbc-funktion__bild {
	text-decoration: none;
	cursor: zoom-in;
}

.vbc-funktion__bild img {
	transition: transform .25s ease;
}

a.vbc-funktion__bild:hover img,
a.vbc-funktion__bild:focus-visible img {
	transform: scale(1.08);
}

a.vbc-funktion__bild:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-funktion__bild img { transition: none; }
	a.vbc-funktion__bild:hover img { transform: none; }
}

/* Ohne Porträt der Anfangsbuchstabe — ruhiger als ein leerer Kreis und
   ruhiger als ein überall wiederholtes Vereinslogo. */
.vbc-funktion__bild--ersatz {
	background: var(--vbc-akzent-weich);
}

.vbc-funktion__initial {
	font-family: var(--vbc-schrift-display);
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--vbc-akzent);
	line-height: 1;
}

.vbc-funktion__text {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.vbc-funktion__rolle {
	font-family: var(--vbc-schrift-daten);
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.vbc-funktion__name {
	font-weight: 650;
	font-size: .98rem;
	line-height: 1.25;
}

.vbc-funktion__mail {
	font-size: .84rem;
	color: var(--vbc-akzent);
	word-break: break-word;
}


/* -------------------------------------------------------------------------
   17. Chronik
   Senkrechte Zeitleiste: Jahreszahl links an einer durchgehenden Linie,
   Ereignis rechts. Die Linie trägt die Vereinsfarbe und hält die fünfzig
   Jahre optisch zusammen.
   ---------------------------------------------------------------------- */

.vbc-chronik {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0 0 0 1.4rem;
	position: relative;
}

.vbc-chronik::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6rem;
	bottom: .6rem;
	width: 2px;
	background: linear-gradient(to bottom, var(--vbc-akzent), var(--vbc-navy));
}

.vbc-chronik__punkt {
	position: relative;
	display: grid;
	gap: .1rem .9rem;
	grid-template-columns: 1fr;
	padding: 0 0 1.6rem;
}

@media (min-width: 640px) {
	.vbc-chronik__punkt {
		grid-template-columns: 4.5rem 1fr;
		align-items: start;
	}
}

/* Der Punkt auf der Linie. */
.vbc-chronik__punkt::before {
	content: "";
	position: absolute;
	left: -1.75rem;
	top: .45rem;
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--vbc-akzent);
	box-shadow: 0 0 0 3px var(--vbc-flaeche);
}

.vbc-chronik__jahr {
	font-family: var(--vbc-schrift-display);
	font-size: 1.15rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--vbc-akzent);
	line-height: 1.3;
}

.vbc-chronik__text {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.vbc-chronik__titel {
	font-weight: 650;
	font-size: 1.02rem;
	line-height: 1.3;
}

.vbc-chronik__inhalt {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--vbc-text-2);
	max-width: 62ch;
}


/* 17.1 Weitere Mannschaften — der Weg von A nach B */

.vbc-geschwister {
	margin-top: 2.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--vbc-linie);
}

.entry-content .vbc-geschwister__titel {
	margin: 0 0 .8rem;
	padding-left: 0;
	border-left: 0;
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.vbc-geschwister__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

.vbc-geschwister__liste a {
	display: inline-block;
	padding: .35rem .85rem;
	border: 1px solid var(--vbc-linie);
	border-radius: 2rem;
	font-size: .88rem;
	text-decoration: none;
	color: var(--vbc-text-2);
	transition: border-color .15s ease, color .15s ease;
}

.vbc-geschwister__liste a:hover,
.vbc-geschwister__liste a:focus-visible {
	border-color: var(--vbc-akzent);
	color: var(--vbc-akzent);
}

.entry-content .vbc-geschwister__zurueck {
	margin: 1rem 0 0;
	font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-geschwister__liste a { transition: none; }
}


/* -------------------------------------------------------------------------
   18. Mannschaftsübersicht

   Dieselbe Sprache wie die Abteilungskacheln und der Kader: Foto vollflächig,
   Verlauf über dem unteren Drittel, Text darauf. Die vorherige Fassung
   stellte Bild und Text übereinander — das wirkte wie eine Tabelle mit
   Vorschaubildern, nicht wie eine Mannschaftsübersicht.
   ---------------------------------------------------------------------- */

.vbc-teams + .vbc-teams { margin-top: 2.8rem; }

.entry-content .vbc-teams__titel {
	display: flex;
	align-items: baseline;
	gap: .9rem;
	margin: 0 0 1rem;
	padding: 0 0 .6rem;
	border-left: 0;
	border-bottom: 2px solid var(--vbc-linie);
	font-family: var(--vbc-schrift-display);
	font-size: clamp(1.4rem, 3.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: uppercase;
	position: relative;
}

/* Farbiger Anschnitt der Trennlinie — Rot für Volleyball, Blau für Floorball. */
.entry-content .vbc-teams__titel::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 3.5rem;
	height: 2px;
}

.vbc-teams--volleyball .vbc-teams__titel::after { background: var(--vbc-volleyball); }
.vbc-teams--floorball  .vbc-teams__titel::after { background: var(--vbc-floorball); }

.entry-content .vbc-teams__titel em {
	font-family: var(--vbc-schrift-daten);
	font-style: normal;
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.vbc-teams__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .8rem;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px)  { .vbc-teams__liste { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1050px) { .vbc-teams__liste { grid-template-columns: repeat(4, 1fr); } }

.vbc-team a {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--vbc-radius);
	background: var(--vbc-navy);
	text-decoration: none;
	color: #fff;
	isolation: isolate;
}

.vbc-team__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
}

/* Die Mannschaftsfotos sind dunkle Studioaufnahmen — gemessen zwischen 47
   und 79 von 255. Bei Kartengröße und mit Verlauf darüber lesen sie sich
   sonst als schwarze Rechtecke. Die leichte Anhebung holt die Gesichter
   zurück, ohne das Bild künstlich wirken zu lassen. */
.vbc-team__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
	border-radius: 0;
	filter: brightness(1.28) saturate(1.06);
	transition: transform .4s ease, filter .3s ease;
}

.vbc-team a:hover .vbc-team__bild img {
	filter: brightness(1.38) saturate(1.1);
}

.vbc-team a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(3, 28, 55, .92) 0%, rgba(3, 28, 55, .55) 34%, rgba(3, 28, 55, .12) 62%, rgba(3, 28, 55, 0) 100%);
	transition: background .25s ease;
}

/* Mannschaften ohne Foto bekommen eine gestaltete Fläche statt eines
   leeren Kastens — Abteilungsfarbe im Verlauf, damit die Reihe ruhig bleibt. */
.vbc-team--ohne-bild a::after {
	background: linear-gradient(150deg, var(--vbc-navy-hell) 0%, var(--vbc-navy) 62%);
}

.vbc-teams--volleyball .vbc-team--ohne-bild a::after {
	background: linear-gradient(150deg, var(--vbc-volleyball-hell) 0%, var(--vbc-navy) 72%);
}

.vbc-teams--floorball .vbc-team--ohne-bild a::after {
	background: linear-gradient(150deg, color-mix(in srgb, var(--vbc-floorball) 72%, #000) 0%, var(--vbc-navy) 72%);
}

.vbc-team__text {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .8rem .9rem .9rem;
}

/* Voll deckendes Weiß plus Schattenkante: Das Etikett sitzt am oberen Rand
   des Verlaufs, wo dieser schon fast durchsichtig ist. Über hellen Trikots
   (Damen II, Damen IV) war es bei 80 % Deckkraft kaum zu lesen. */
.vbc-team__liga {
	font-family: var(--vbc-schrift-daten);
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 3px rgba(3, 28, 55, .85);
}

.vbc-team__name {
	font-family: var(--vbc-schrift-display);
	font-size: clamp(1.05rem, 2.4vw, 1.3rem);
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.05;
	text-transform: uppercase;
	text-shadow: 0 1px 4px rgba(3, 28, 55, .7);
}

.vbc-team a:hover .vbc-team__bild img,
.vbc-team a:focus-visible .vbc-team__bild img {
	transform: scale(1.05);
}

.vbc-teams--volleyball .vbc-team a:hover::after {
	background: linear-gradient(to top, color-mix(in srgb, var(--vbc-volleyball-hell) 88%, transparent) 0%, rgba(5, 21, 54, .5) 42%, rgba(5, 21, 54, 0) 75%);
}

.vbc-teams--floorball .vbc-team a:hover::after {
	background: linear-gradient(to top, color-mix(in srgb, var(--vbc-floorball) 85%, transparent) 0%, rgba(5, 21, 54, .5) 42%, rgba(5, 21, 54, 0) 75%);
}

.vbc-team a:focus-visible {
	outline: 3px solid var(--vbc-akzent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-team__bild img,
	.vbc-team a::after { transition: none; }
	.vbc-team a:hover .vbc-team__bild img { transform: none; }
}


/* -------------------------------------------------------------------------
   19. Beachplatzbuchung

   Das Buchungs-Plugin bringt eigene Schriftfarben mit, die eine helle Fläche
   voraussetzen — dunkle Grautöne für Beschriftungen, Kalender und Hinweise.
   Auf der Beachplatzseite steht das Formular aber in zwei Baukasten-Reihen
   mit navyfarbenem Grund. Ergebnis: dunkelgrau auf dunkelblau, sechs
   Farbkombinationen unter dem Lesbarkeitsgrenzwert.

   Statt Dutzende Plugin-Farben einzeln zu überschreiben, bekommt das
   Formular eine eigene helle Karte. Das wirkt unabhängig davon, welche
   Farbe die Reihe außenrum hat, und übersteht auch ein Plugin-Update.
   ---------------------------------------------------------------------- */

.entry-content .widget_wpdev_booking,
.entry-content .wpbc_container_booking_form,
.entry-content .booking_form_div {
	background: var(--vbc-flaeche);
	color: var(--vbc-text);
	border-radius: var(--vbc-radius);
}

.entry-content .widget_wpdev_booking {
	padding: 1.2rem 1.3rem 1.4rem;
	box-shadow: var(--vbc-schatten);
}

/* Beschriftungen und Fließtext im Formular auf die eigene Textfarbe holen. */
.entry-content .widget_wpdev_booking label,
.entry-content .widget_wpdev_booking p,
.entry-content .widget_wpdev_booking span,
.entry-content .widget_wpdev_booking div,
.entry-content .widget_wpdev_booking td,
.entry-content .widget_wpdev_booking th,
.entry-content .widget_wpdev_booking legend {
	color: inherit;
}

/* Der Kalender bringt eigene Zellenfarben mit — die bleiben, nur der Grund
   darunter wird hell, damit die grauen Ziffern wieder tragen. */
.entry-content .wpbc_calendar_wraper,
.entry-content .wpbc-calendar,
.entry-content .datepick {
	background: var(--vbc-flaeche);
}

/* Legende und Zeitwahl unter dem Kalender. */
.entry-content .wpbc_time_selector,
.entry-content .wpbc_legend,
.entry-content .wpbc_legend_item {
	color: var(--vbc-text-2);
}

/* Schaltflächen des Plugins in die Vereinsfarbe. */
.entry-content .widget_wpdev_booking input[type="submit"],
.entry-content .widget_wpdev_booking button[type="submit"] {
	background: var(--vbc-akzent);
	border-color: var(--vbc-akzent);
	color: #fff;
}

.entry-content .widget_wpdev_booking input[type="submit"]:hover,
.entry-content .widget_wpdev_booking button[type="submit"]:hover {
	background: var(--vbc-navy);
	border-color: var(--vbc-navy);
}

/* Überschriften der Baukasten-Reihe darüber bleiben weiß auf Navy — die
   Karte gilt nur fürs Formular selbst. */

/* Die freien, anklickbaren Tage zeichnet das Plugin in hellem Blaugrau
   (136,153,170) auf hellgrauem Grund — 2,7:1. Das sind ausgerechnet die
   Tage, die man auswählen soll.

   Die Plugin-Regel .datepick-inline .date_available a hat Spezifität 0,2,1
   und lädt nach unserem Stylesheet. Ein gleichwertiger Selektor verliert
   deshalb; es braucht eine Klasse mehr. */
.entry-content .datepick-inline .date_available a,
.entry-content .block_hints .block_free a,
.entry-content .block_hints .block_time {
	color: var(--vbc-text);
}

.entry-content .datepick-inline .date_available a:hover {
	color: var(--vbc-akzent);
}


/* -------------------------------------------------------------------------
   20. Saisonspielplan
   Aufklappbar über <details> — ohne JavaScript, mit Tastatur bedienbar.
   ---------------------------------------------------------------------- */

.vbc-saison {
	margin-top: 1.6rem;
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	background: var(--vbc-flaeche);
}

.vbc-saison__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .8rem;
	padding: .85rem 1rem;
	cursor: pointer;
	list-style: none;
	border-radius: var(--vbc-radius);
}

/* Das Standard-Dreieck weg, eigenes Zeichen rechts. */
.vbc-saison__kopf::-webkit-details-marker { display: none; }

.vbc-saison__kopf::after {
	content: "▾";
	margin-left: auto;
	color: var(--vbc-akzent);
	font-size: .9rem;
	transition: transform .2s ease;
}

.vbc-saison[open] > .vbc-saison__kopf::after { transform: rotate(180deg); }

.vbc-saison__kopf:hover,
.vbc-saison[open] > .vbc-saison__kopf {
	background: var(--vbc-akzent-weich);
}

.vbc-saison__kopf:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: -2px;
}

.vbc-saison__titel {
	font-weight: 650;
	font-size: .98rem;
}

.vbc-saison__stand {
	font-family: var(--vbc-schrift-daten);
	font-size: .66rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.vbc-saison .vbc-tabelle-rahmen {
	padding: 0 1rem 1rem;
}

.vbc-saison__tabelle {
	font-size: .84rem;
	min-width: 34rem;
}

/* Gespielte Begegnungen treten zurück, die nächste tritt hervor. */
.vbc-saison__tabelle tr.is-gespielt td { color: var(--vbc-text-3); }

.vbc-saison__tabelle tr.is-naechstes td {
	background: var(--vbc-akzent-weich);
	font-weight: 650;
}

.vbc-saison__tabelle tr.is-naechstes td:first-child {
	box-shadow: inset 2px 0 0 var(--vbc-akzent);
}

.vbc-saison__paarung .is-wir { font-weight: 650; color: var(--vbc-text); }

/* Heimspiele auf den ersten Blick: gefülltes Zeichen in der Abteilungsfarbe,
   Auswärtsspiele nur eine blasse Kontur. Die feste Breite hält die Namen
   darunter in einer Flucht, damit die Spalte scanbar bleibt. */
.vbc-saison__wo {
	display: inline-block;
	min-width: 3.2rem;
	margin-right: .4rem;
	padding: .08rem .28rem;
	border: 1px solid transparent;
	border-radius: 3px;
	font-family: var(--vbc-schrift-daten);
	font-size: .55rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	vertical-align: .1em;
	white-space: nowrap;
}

.vbc-saison__wo-kurz { display: none; }

/* Am Handy ist die Spalte zu schmal für ein ganzes Wort — das Zeichen
   würde die Mannschaftsnamen in eine eigene Zeile drücken. Dort steht
   deshalb nur H oder A; Vorlesesoftware liest weiterhin das ganze Wort. */
@media (max-width: 599px) {
	.vbc-saison__wo {
		min-width: 1.15rem;
		margin-right: .35rem;
		padding: .08rem .15rem;
	}

	.vbc-saison__wo-lang {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.vbc-saison__wo-kurz { display: inline; }
}

.vbc-saison__tabelle tr.is-heim .vbc-saison__wo {
	background: var(--vbc-akzent);
	color: #fff;
}

.vbc-saison__tabelle tr.is-auswaerts .vbc-saison__wo {
	border-color: var(--vbc-linie);
	color: var(--vbc-text-3);
}

/* Gespielte Heimspiele sollen nicht lauter sein als das nächste Spiel. */
.vbc-saison__tabelle tr.is-gespielt.is-heim .vbc-saison__wo {
	background: var(--vbc-akzent-weich);
	color: var(--vbc-akzent);
}

.vbc-saison__gegen {
	color: var(--vbc-text-3);
	font-size: .78em;
	padding: 0 .25rem;
}

.vbc-saison__ort { color: var(--vbc-text-3); }

/* Tag bleibt zusammen, die Uhrzeit darf darunter rutschen. */
.vbc-saison__tag { white-space: nowrap; }

.vbc-saison__zeit {
	display: inline-block;
	white-space: nowrap;
	color: var(--vbc-text-3);
}

.vbc-saison__stand-zelle { white-space: nowrap; }

.vbc-saison__marke {
	font-family: var(--vbc-schrift-daten);
	font-size: .6rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vbc-akzent);
}

.vbc-saison__offen { color: var(--vbc-text-3); }

/* Am Handy passen vier Spalten nicht nebeneinander. Der Spielort steht ohnehin
   in den Karten unter „Nächste Spiele“ — hier weicht er, damit Datum,
   Begegnung und Ergebnis ohne Seitwärtsscrollen lesbar bleiben. */
@media (max-width: 599px) {
	.vbc-saison__tabelle { min-width: 0; }

	.vbc-saison__tabelle th:nth-child(3),
	.vbc-saison__tabelle td:nth-child(3) { display: none; }

	.vbc-saison .vbc-tabelle-rahmen { padding: 0 .6rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.vbc-saison__kopf::after { transition: none; }
}


/* -------------------------------------------------------------------------
   21. Instagram
   Bildwand statt Plugin-Raster. Aufbau wie bei der Mannschaftsübersicht:
   randloses Bild, Verlauf nach unten, Text darüber — damit die beiden
   Bildstrecken der Seite dieselbe Sprache sprechen.
   ---------------------------------------------------------------------- */

.vbc-ig {
	margin-top: 2.4rem;
}

/* Auf der Startseite stehen beide Bildwände untereinander. Sie tragen ihre
   eigene Abteilungsfarbe, nicht die der Seite — sonst wäre die
   Floorball-Wand dort rot beziehungsweise navy. */
.vbc-ig--volleyball {
	--vbc-akzent: var(--vbc-volleyball);
	--vbc-akzent-weich: var(--vbc-volleyball-weich);
}

.vbc-ig--floorball {
	--vbc-akzent: var(--vbc-floorball);
	--vbc-akzent-weich: var(--vbc-floorball-weich);
}

.vbc-ig__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .8rem 1.2rem;
	margin-bottom: 1.1rem;
}

.vbc-ig__wer {
	display: flex;
	align-items: center;
	gap: .75rem;
}

/* Der Ring greift die Abteilungsfarbe auf — die Anmutung des Profilbilds bei
   Instagram, aber in unseren Farben statt im Verlauf der Plattform.
   Zwei Klassen, sonst gewinnt `.entry-content img` (0,1,1) über den Radius. */
.vbc-ig .vbc-ig__profilbild {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	box-shadow: 0 0 0 2px var(--vbc-flaeche), 0 0 0 4px var(--vbc-akzent);
}

.vbc-ig__namen {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.entry-content .vbc-ig__titel {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.2;
}

.vbc-ig__handle {
	margin: 0;
	font-family: var(--vbc-schrift-daten);
	font-size: .72rem;
	letter-spacing: .04em;
	color: var(--vbc-text-3);
}

.vbc-ig__folgen {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1.05rem;
	border: 1px solid var(--vbc-akzent);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--vbc-akzent);
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.vbc-ig__folgen:hover,
.vbc-ig__folgen:focus-visible {
	background: var(--vbc-akzent);
	color: #fff;
}

.vbc-ig__wand {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 620px)  { .vbc-ig__wand { grid-template-columns: repeat(3, 1fr); gap: .7rem; } }
@media (min-width: 1000px) { .vbc-ig__wand { grid-template-columns: repeat(4, 1fr); } }

/* Kadence gibt Listen in Beiträgen einen Einzug und Aufzählungszeichen. */
.entry-content .vbc-ig__wand {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.entry-content .vbc-ig__wand > li::marker { content: none; }

.vbc-ig__kachel {
	margin: 0;
}

.vbc-ig__kachel > a {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--vbc-radius);
	background: var(--vbc-navy);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

/* Zwei Klassen wie oben: die Kachel selbst ist gerundet, das Bild darin
   nicht — sonst blitzt in den Ecken der dunkle Untergrund durch. */
.vbc-ig .vbc-ig__bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform .45s ease;
}

.vbc-ig__kachel > a:hover .vbc-ig__bild,
.vbc-ig__kachel > a:focus-visible .vbc-ig__bild {
	transform: scale(1.06);
}

/* Der Verlauf liegt immer an, damit das Datum lesbar bleibt; bei Berührung
   wird er tiefer, weil dann auch der Text erscheint. */
.vbc-ig__blende {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: 1.6rem .7rem .6rem;
	background: linear-gradient(to top, rgba(3, 28, 55, .82) 0%, rgba(3, 28, 55, .34) 45%, rgba(3, 28, 55, 0) 100%);
	transition: background .25s ease;
}

.vbc-ig__kachel > a:hover .vbc-ig__blende,
.vbc-ig__kachel > a:focus-visible .vbc-ig__blende {
	background: linear-gradient(to top, rgba(3, 28, 55, .92) 0%, rgba(3, 28, 55, .62) 60%, rgba(3, 28, 55, .18) 100%);
}

.vbc-ig__datum {
	font-family: var(--vbc-schrift-daten);
	font-size: .62rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}

/* Der Text ist die Zugabe beim Draufzeigen: zusammengeklappt bleibt die Wand
   ruhig, beim Zeigen erklärt sie sich. Über max-height statt display, damit
   der Übergang läuft — und mit line-clamp, damit die letzte sichtbare Zeile
   mit Auslassungszeichen endet statt mitten im Buchstaben abgeschnitten zu
   werden. Die Höhen sind Vielfache der Zeilenhöhe (1,35 em). */
.vbc-ig__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	max-height: 0;
	font-size: .78rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, .95);
	opacity: 0;
	transition: max-height .25s ease, opacity .25s ease;
}

.vbc-ig__kachel > a:hover .vbc-ig__text,
.vbc-ig__kachel > a:focus-visible .vbc-ig__text {
	max-height: 4.05em;
	opacity: 1;
}

/* Ohne Zeigegerät gibt es kein „Draufzeigen“ — dort steht der Text dauerhaft.
   Die Breitenabfrage steht daneben, weil schmale Fenster am Rechner sonst
   durchs Raster fielen: dort meldet der Browser weiterhin einen Mauszeiger.
   Zwei Zeilen statt drei, weil die Kacheln dann nur halb so groß sind, und
   ein kräftigerer Verlauf, weil der Text dauerhaft über dem Bild steht. */
@media (hover: none), (max-width: 619px) {
	.vbc-ig__text {
		-webkit-line-clamp: 2;
		line-clamp: 2;
		max-height: 2.7em;
		opacity: 1;
	}

	.vbc-ig__blende {
		background: linear-gradient(to top, rgba(3, 28, 55, .92) 0%, rgba(3, 28, 55, .68) 55%, rgba(3, 28, 55, 0) 100%);
	}
}

.vbc-ig__art {
	position: absolute;
	top: .5rem;
	right: .5rem;
	display: inline-flex;
	padding: .22rem;
	border-radius: 6px;
	background: rgba(3, 28, 55, .55);
	color: #fff;
	line-height: 0;
}

.vbc-ig__kachel > a:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-ig__bild,
	.vbc-ig__blende,
	.vbc-ig__text { transition: none; }

	.vbc-ig__kachel > a:hover .vbc-ig__bild { transform: none; }
}


/* -------------------------------------------------------------------------
   22. Kanäle im Fußbereich
   Runde Schaltflächen statt beschrifteter Pillen: Zwei Wortmarken
   unterschiedlicher Breite ließen sich nicht sauber gegeneinander
   ausrichten, und Kadence unterstreicht im Fußbereich jeden Verweis. Ein
   gleich großer Kreis je Kanal löst beides — die Beschriftung übernehmen
   „Folge uns“ davor und das aria-label für Vorlesesoftware.
   ---------------------------------------------------------------------- */

#colophon .vbc-soziales {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 0 0 .7rem;
}

#colophon .vbc-soziales__titel {
	margin: 0 .15rem 0 0;
	font-family: var(--vbc-schrift-daten);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vbc-text-2);
}

#colophon .vbc-soziales__ziel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.65rem;
	height: 1.65rem;
	padding: 0;
	border: 1px solid var(--vbc-linie);
	border-radius: 50%;
	color: var(--vbc-text-2);
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

/* Kadence unterstreicht Verweise im Fußbereich über
   `.inner-link-style-normal a:not(.button)` — auch im Schwebezustand. */
#colophon .vbc-soziales__ziel,
#colophon .vbc-soziales__ziel:hover,
#colophon .vbc-soziales__ziel:focus {
	text-decoration: none;
}

#colophon .vbc-soziales__ziel svg {
	width: .82rem;
	height: .82rem;
	display: block;
}

/* Die YouTube-Wortmarke ist von Haus aus breit und flach und wirkt im
   gleichen Rahmen kleiner als das quadratische Instagram-Zeichen. */
#colophon .vbc-soziales__ziel--youtube svg {
	width: .95rem;
	height: .95rem;
}

#colophon .vbc-soziales__ziel:hover,
#colophon .vbc-soziales__ziel:focus-visible {
	transform: translateY(-1px);
}

#colophon .vbc-soziales__ziel--instagram:hover,
#colophon .vbc-soziales__ziel--instagram:focus-visible {
	background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%);
	border-color: transparent;
	color: #fff;
}

#colophon .vbc-soziales__ziel--youtube:hover,
#colophon .vbc-soziales__ziel--youtube:focus-visible {
	background: #ff0033;
	border-color: transparent;
	color: #fff;
}

#colophon .vbc-soziales__ziel:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	#colophon .vbc-soziales__ziel { transition: none; }
	#colophon .vbc-soziales__ziel:hover { transform: none; }
}


/* -------------------------------------------------------------------------
   23. Fußbereich kompakter
   Der Fußbereich war rund 400 px hoch und damit fast ein halber Handybildschirm
   voller Nebensachen. Alles bleibt erhalten, nur enger gesetzt: kleinere
   Sponsorenkacheln, „Folge uns“ in derselben Zeile wie die Verweise und
   deutlich weniger Luft zwischen den Zeilen.
   ---------------------------------------------------------------------- */

#colophon .site-bottom-footer-inner-wrap {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#colophon .footer-html {
	margin: .4rem 0 0;
}

#colophon .vbc-sponsorenband {
	margin-bottom: .7rem;
	padding: 0 0 .7rem;
}

#colophon .vbc-sponsoren__titel {
	margin-bottom: .5rem;
}

/* Um die Hälfte größer als zuvor (7,6 × 2,75 rem). Diese Regel entscheidet,
   nicht die weiter oben — sie steht später und hat dieselbe Spezifität. */
#colophon .vbc-sponsor a,
#colophon .vbc-sponsor > img {
	width: 11.4rem;
	height: 4.13rem;
	padding: .53rem .9rem;
}

/* Auf schmalen Geräten etwas kleiner, sonst passt keine zweite Kachel mehr
   neben die erste. Die Regel muss hier stehen und nicht weiter oben — sonst
   überschriebe die Zeile darüber sie wieder. */
@media (max-width: 480px) {
	#colophon .vbc-sponsor a,
	#colophon .vbc-sponsor > img {
		width: 9rem;
		height: 3.3rem;
		padding: .4rem .7rem;
	}
}

#colophon .vbc-sponsoren__liste {
	gap: .6rem .7rem;
}

/* Copyright und Rechtslinks rücken zusammen. */
#colophon .footer-html p {
	margin: .25rem 0;
	font-size: .82rem;
	line-height: 1.4;
}

#colophon .vbc-fussleiste {
	margin-bottom: 0;
}

/* Die Rechtslinks bekommen die Unterstreichung erst beim Draufzeigen —
   drei unterstrichene Wörter nebeneinander wirken sonst unruhig. */
#colophon .vbc-fussleiste a {
	text-decoration: none;
	border-bottom: 1px solid var(--vbc-linie);
}

#colophon .vbc-fussleiste a:hover,
#colophon .vbc-fussleiste a:focus-visible {
	border-bottom-color: currentColor;
}


/* -------------------------------------------------------------------------
   24. Heimspiele im Überblick — Plakat und Kachelraster
   Der nächste Heimspieltag als Plakat im Farbverlauf der Abteilung (dieselbe
   Anmutung wie die Mannschaftskacheln ohne Foto), daneben die weiteren
   Spieltage als ruhiges Raster. Kein seitliches Wischen: Alles steht
   gleichzeitig sichtbar auf der Seite.
   ---------------------------------------------------------------------- */

.vbc-heimplan {
	display: grid;
	gap: .9rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.vbc-heimplan {
		grid-template-columns: minmax(19rem, 24rem) minmax(0, 1fr);
		/* start, nicht stretch: sonst werden die Kacheln rechts auf
		   Plakathöhe gezogen und stehen halb leer da. */
		align-items: start;
	}
}

/* Das Plakat. Der Verlauf entspricht den fotolosen Mannschaftskacheln
   (Abteilungsfarbe nach Navy) — dadurch liest er sich als Teil derselben
   Familie und nicht als Fremdkörper. */
.vbc-heimplan__plakat {
	display: flex;
	flex-direction: column;
	padding: 1.3rem 1.4rem 1.15rem;
	border-radius: var(--vbc-radius);
	background: var(--vbc-navy);
	background: linear-gradient(145deg, var(--vbc-akzent-hell) 0%, color-mix(in srgb, var(--vbc-akzent-hell) 40%, var(--vbc-navy)) 46%, var(--vbc-navy) 100%);
	color: #fff;
}

p.vbc-heimplan__marke {
	margin: 0 0 .3rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

/* Wochentag klein darüber, das Datum als große Zeile — das Plakat lebt von
   dieser einen typografischen Geste. Die p.-Qualifizierung hier und bei den
   übrigen Absätzen zieht mit Kadences `.entry-content p` (0,1,1) gleich;
   bei Gleichstand gewinnt dieses später geladene Stylesheet. */
p.vbc-heimplan__datum {
	display: flex;
	flex-direction: column;
	margin: 0 0 1.1rem;
	font-size: .95rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, .85);
}

p.vbc-heimplan__datum b {
	font-family: var(--vbc-schrift-display);
	font-size: 1.75rem;
	font-weight: 750;
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
}

.vbc-heimplan__partien {
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.vbc-heimplan__partie {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	color: #fff;
	text-decoration: none;
}

/* Mannschaft links, Uhrzeit rechts — der Gegner darunter in voller Breite. */
.vbc-heimplan__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .6rem;
}

.vbc-heimplan__partie strong {
	font-size: .92rem;
	font-weight: 700;
}

.vbc-heimplan__partie .vbc-heimplan__gegner {
	font-size: .84rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, .82);
}

.vbc-heimplan__partie .vbc-heimplan__zeit {
	font-family: var(--vbc-schrift-daten);
	font-size: .78rem;
	color: rgba(255, 255, 255, .72);
	white-space: nowrap;
}

.vbc-heimplan__partie:hover strong,
.vbc-heimplan__partie:focus-visible strong {
	text-decoration: underline;
	text-underline-offset: 3px;
}

p.vbc-heimplan__halle {
	margin: 1rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid rgba(255, 255, 255, .25);
	font-size: .74rem;
	color: rgba(255, 255, 255, .75);
}

/* Ab hier die weiteren Spieltage: kleine Kalenderkacheln. */
/* 8.75 rem Mindestbreite: So stehen am Handy (311 px Inhaltsbreite) zwei
   Kacheln nebeneinander — fünf gestapelte Kacheln wären wieder eine Liste. */
.vbc-heimplan__weitere {
	display: grid;
	gap: .7rem;
	grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
	grid-auto-rows: min-content;
	align-content: start;
}

.vbc-heimplan__tag {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .8rem .9rem;
	background: var(--vbc-flaeche);
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
}

p.vbc-heimplan__tag-datum {
	margin: 0;
	font-family: var(--vbc-schrift-daten);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--vbc-akzent);
}

.vbc-heimplan__eintrag {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	color: inherit;
	text-decoration: none;
}

.vbc-heimplan__eintrag strong {
	font-size: .82rem;
	font-weight: 650;
	color: var(--vbc-text);
}

.vbc-heimplan__eintrag .vbc-heimplan__gegner {
	font-size: .78rem;
	line-height: 1.35;
	color: var(--vbc-text-2);
}

.vbc-heimplan__eintrag .vbc-heimplan__zeit {
	font-family: var(--vbc-schrift-daten);
	font-size: .7rem;
	color: var(--vbc-text-3);
	white-space: nowrap;
}

.vbc-heimplan__eintrag:hover strong,
.vbc-heimplan__eintrag:focus-visible strong {
	color: var(--vbc-akzent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

p.vbc-heimplan__tag-halle {
	margin: auto 0 0;
	padding-top: .45rem;
	border-top: 1px solid var(--vbc-linie-zart);
	font-size: .68rem;
	color: var(--vbc-text-3);
}


/* -------------------------------------------------------------------------
   25. Teamshop
   Ein Streifen, kein Kasten: Der Shop ist eine Randnotiz auf der Startseite
   und soll die Spielinformationen darüber nicht überbieten. Die Fläche trägt
   den Marineverlauf des Vereins, damit sie sich gegen die weißen Karten
   ringsum absetzt, ohne eine eigene Farbe einzuführen.
   ---------------------------------------------------------------------- */

.vbc-shop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.6rem;
	margin-top: 2.4rem;
	padding: 1.4rem 1.5rem;
	border-radius: var(--vbc-radius);
	background: linear-gradient(115deg, var(--vbc-akzent-hell) 0%, var(--vbc-navy) 68%);
	color: #fff;
}

.vbc-shop__text {
	flex: 1 1 16rem;
	min-width: 0;
}

.vbc-shop .vbc-shop__marke {
	margin: 0 0 .2rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

/* Zwei Klassen, weil Kadence Überschriften im Inhalt eigene Farben und
   Abstände gibt. */
.entry-content .vbc-shop .vbc-shop__titel {
	margin: 0 0 .35rem;
	font-family: var(--vbc-schrift-display);
	font-size: 1.4rem;
	font-weight: 750;
	line-height: 1.15;
	color: #fff;
}

.vbc-shop .vbc-shop__zeile {
	margin: 0;
	max-width: 42ch;
	font-size: .88rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, .88);
}

/* Partnerlogo und Schaltfläche gehören zusammen: Bestellt wird bei
   engelhorn, der Knopf führt genau dorthin. */
.vbc-shop__abschluss {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 1.2rem;
}

/* Das Logo ist einfarbig dunkel und wäre auf dem blauen Verlauf kaum zu
   sehen — deshalb auf einem weißen Feld, wie im Fußbereich auch. */
.vbc-shop__partner {
	display: inline-flex;
	align-items: center;
	padding: .5rem .8rem;
	border-radius: calc(var(--vbc-radius) / 1.5);
	background: #fff;
}

.vbc-shop .vbc-shop__partner img {
	display: block;
	width: auto;
	height: 1.7rem;
	border-radius: 0;
}

.vbc-shop__knopf {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: .65rem 1.3rem;
	border-radius: 999px;
	/* Steht auf dem dunklen Verlauf der Shop-Kachel — deshalb weiß. */
	background: #fff;
	color: var(--vbc-navy);
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.vbc-shop__knopf:hover,
.vbc-shop__knopf:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45);
	color: var(--vbc-navy);
}

.vbc-shop__knopf:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-shop__knopf { transition: none; }
	.vbc-shop__knopf:hover { transform: none; }
}


/* -------------------------------------------------------------------------
   26. Druck und PDF-Ausgabe
   Gilt für Ausdrucke im Browser ebenso wie für die PDF-Exporte aus
   scripts/pdf-export.sh. Ziel ist eine Seite, die auf Papier so aussieht wie
   am Bildschirm — ohne die Bedienelemente, die dort nichts können.
   ---------------------------------------------------------------------- */

/* Chromium druckt ohne Angabe auf US Letter — für einen deutschen Verein die
   falsche Größe. Die Ränder sind knapp gehalten, damit die Karten- und
   Tabellenraster nicht zusätzlich schrumpfen müssen. */
@page {
	size: A4;
	margin: 12mm 10mm 14mm;
}

@media print {

	/* Kadence hält den Fußbereich mit min-height: 100vh unten. Auf Papier
	   entsteht daraus ein leerer Block von einer vollen Bildschirmhöhe — der
	   Fußbereich landete dadurch allein auf einer zusätzlichen Seite. */
	#wrapper,
	.site {
		min-height: 0 !important;
	}

	.content-area {
		margin-top: 1.2rem !important;
		margin-bottom: 1.2rem !important;
	}

	/* Bedienelemente ohne Funktion auf Papier. */
	.vbc-suchknopf,
	.vbc-suchbereich,
	.vbc-menue-suche,
	.vbc-mehr,
	.mobile-toggle-open-container,
	#eyeAble-toolbar,
	#eyeAble-container,
	.eyeAble_mainicon_container,
	[id^="eyeAble"],
	[class^="eyeAble"] {
		display: none !important;
	}

	/* Hintergrundfarben sind hier Information, nicht Zierde: Ohne sie wäre
	   nicht zu erkennen, welcher Abteilung eine Seite gehört. */
	*,
	*::before,
	*::after {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Nichts mitten in einer Karte, Zeile oder Kachel trennen. */
	.vbc-karte,
	.vbc-team,
	.vbc-jugend-karte,
	.vbc-spiel,
	.vbc-ergebnis,
	.vbc-heimtermin,
	.vbc-heimplan__tag,
	.vbc-ig__kachel,
	.vbc-orte li,
	.vbc-chronik__punkt,
	.vbc-sponsor,
	tr {
		break-inside: avoid;
	}

	/* Überschriften bleiben bei ihrem Inhalt. */
	h1, h2, h3,
	.vbc-teams__titel,
	.vbc-jugend__titel,
	.vbc-shop__titel {
		break-after: avoid;
	}

	/* Seitwärts wischbare Reihen gibt es auf Papier nicht — umbrechen statt
	   abschneiden, sonst fehlt die Hälfte der Spiele. */
	.vbc-spiele,
	.vbc-heimtermine {
		display: flex;
		flex-wrap: wrap;
		overflow: visible !important;
	}

	.vbc-spiel,
	.vbc-heimtermin {
		flex: 0 0 auto;
		width: 32%;
	}

	/* Aufklappbares aufgeklappt drucken — zugeklappt wäre der Spielplan im
	   PDF unsichtbar. */
	details {
		display: block !important;
	}

	details > *:not(summary) {
		display: revert !important;
	}

	.vbc-saison__tabelle {
		min-width: 0 !important;
	}

	.vbc-saison .vbc-tabelle-rahmen,
	.vbc-tabelle-rahmen {
		overflow: visible !important;
	}
}


/* -------------------------------------------------------------------------
   27. Mitgliedschaft
   Zwei Kacheln als Gegensatzpaar: „noch kein Mitglied?“ trägt Fläche und
   Farbe, „schon Mitglied?“ bleibt eine ruhige Liste. Beide gleich breit —
   der Verein wirbt, ohne die eigenen Leute abzuhängen.
   ---------------------------------------------------------------------- */

.vbc-mitglied {
	display: grid;
	gap: .9rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 2.4rem;
}

@media (min-width: 780px) {
	.vbc-mitglied {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}
}

.vbc-mitglied__karte {
	display: flex;
	flex-direction: column;
	padding: 1.4rem 1.5rem 1.5rem;
	border-radius: var(--vbc-radius);
}

/* Beide Kacheln gleich gehalten. Zuvor stand die werbende Kachel als
   dunkle Fläche neben einer hellen — das las sich wie zwei verschiedene
   Bausteine statt wie ein Paar. Der Unterschied liegt jetzt allein in der
   Schaltfläche: gefüllt für Eintreten, gefüllt-dunkel für den Bereich. */
.vbc-mitglied__karte--eintreten {
	background: var(--vbc-flaeche);
	border: 1px solid var(--vbc-linie);
	color: inherit;
}

/* Kachel für die eigenen Leute: zurückhaltend, aber nicht zweitrangig. */
.vbc-mitglied__karte--bereich {
	background: var(--vbc-flaeche);
	border: 1px solid var(--vbc-linie);
}

.vbc-mitglied .vbc-mitglied__marke {
	margin: 0 0 .3rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

/* Zwei Klassen, weil Kadence Überschriften im Inhalt eigene Farben und
   Abstände gibt. */
.entry-content .vbc-mitglied .vbc-mitglied__titel {
	margin: 0 0 .5rem;
	font-family: var(--vbc-schrift-display);
	font-size: 1.4rem;
	font-weight: 750;
	line-height: 1.15;
	color: var(--vbc-text);
	text-wrap: balance;
}

.vbc-mitglied .vbc-mitglied__text {
	margin: 0 0 1.1rem;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--vbc-text-2);
}

/* Aufzählung ohne Punkte: Es sind Hinweise, keine Reihenfolge. */
.entry-content .vbc-mitglied__liste {
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.vbc-mitglied__liste li {
	position: relative;
	padding-left: 1.1rem;
	font-size: .85rem;
	line-height: 1.4;
	color: var(--vbc-text);
}

.vbc-mitglied__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--vbc-akzent);
}

/* Der Knopf sitzt unten, damit beide Kacheln gleich hoch abschließen. */
.vbc-mitglied__knopf {
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	padding: .65rem 1.3rem;
	border-radius: 999px;
	/* Seit die Kachel hell ist, muss der Knopf die Farbe tragen. */
	background: var(--vbc-navy);
	color: #fff;
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.vbc-mitglied__knopf--leise {
	background: var(--vbc-akzent);
	color: var(--vbc-akzent-kontrast);
}

.vbc-mitglied__knopf:hover,
.vbc-mitglied__knopf:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
}

.vbc-mitglied__knopf--leise:hover,
.vbc-mitglied__knopf--leise:focus-visible {
	color: var(--vbc-akzent-kontrast);
}

.vbc-mitglied__knopf:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 3px;
}

/* Der Nachsatz steht über dem Knopf; der Knopf schiebt sich mit margin-top:
   auto ans untere Ende und liegt damit auf gleicher Höhe wie der Knopf der
   Nachbarkachel. */
.vbc-mitglied .vbc-mitglied__zusatz {
	margin: 0 0 1rem;
	/* Gleiche Größe wie __text darüber — der Unterschied fiel als Fehler auf. */
	font-size: .88rem;
	line-height: 1.45;
	color: var(--vbc-text-2);
}

.vbc-mitglied__zusatz a {
	color: var(--vbc-akzent);
	text-decoration: underline;
	text-underline-offset: .2em;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-mitglied__knopf { transition: none; }
	.vbc-mitglied__knopf:hover { transform: none; }
}


/* -------------------------------------------------------------------------
   28. Countdown in der Umschalterleiste
   Der Zähler steht mittig über der ganzen Leiste, die Abteilungswahl rechts.
   Mittig heißt hier: bezogen auf die volle Breite, nicht auf den Rest neben
   dem Umschalter — deshalb absolut gesetzt statt in den Fluss gehängt.
   ---------------------------------------------------------------------- */

.vbc-leiste {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-end;
	background: var(--vbc-flaeche-2);
}

.vbc-leiste .vbc-umschalter {
	flex: 1 1 auto;
	width: auto;
	background: transparent;
}

.vbc-countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .25rem .5rem;
	flex: 1 1 100%;
	order: -1;
	margin: 0;
	padding: .55rem 1rem;
	border-bottom: 1px solid var(--vbc-linie);
	font-family: var(--vbc-schrift-display);
	font-size: .82rem;
	color: var(--vbc-text-2);
	text-align: center;
}

/* Der Punkt pulst leise — ein Countdown lebt, das darf man sehen. */
.vbc-countdown__punkt {
	flex: 0 0 auto;
	width: .42rem;
	height: .42rem;
	border-radius: 50%;
	background: var(--vbc-akzent);
	animation: vbc-puls 2.4s ease-in-out infinite;
}

@keyframes vbc-puls {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

.vbc-countdown__marke {
	font-weight: 700;
	font-size: .88rem;
	color: var(--vbc-text);
	white-space: nowrap;
}

.vbc-countdown__in {
	color: var(--vbc-text-3);
}

.vbc-countdown__uhr {
	display: flex;
	align-items: baseline;
	gap: .5rem;
}

.vbc-countdown__feld {
	display: inline-flex;
	align-items: baseline;
	gap: .2rem;
}

/* Die Zahlen tragen die Zeile: größer als der Rest, in der Display-Schrift.
   Gleiche Laufweite plus feste Mindestbreite — die Systemschriften haben
   nicht alle echte Tabellenziffern, und ohne beides wandert die Zeile bei
   jedem Sekundenwechsel um ein paar Pixel hin und her. */
.vbc-countdown__zahl {
	display: inline-block;
	min-width: 1.5ch;
	text-align: right;
	font-size: 1.22rem;
	font-weight: 750;
	line-height: 1.1;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	color: var(--vbc-akzent);
}

.vbc-countdown__einheit {
	font-style: normal;
	font-size: .78rem;
	color: var(--vbc-text-3);
}

.vbc-countdown__datum {
	color: var(--vbc-text-3);
	white-space: nowrap;
}

.vbc-countdown__datum::before {
	content: "· ";
}

/* Ab hier ist Platz für beides nebeneinander. Der Zähler wird aus dem Fluss
   genommen und exakt auf die Mitte der Leiste gesetzt; der Umschalter behält
   seinen Platz rechts.

   Zentriert wird ohne transform: translate(-50%, -50%) ergibt gebrochene
   Verschiebungen (gemessen -224,324 px), der Kasten landet auf halben Pixeln
   und der Browser rendert die Schrift auf einer eigenen Ebene unscharf —
   sichtbar erst beim Hineinzoomen. Mit left/right: 0 plus automatischen
   Rändern liegt die Kante auf ganzen Pixeln, die Schrift bleibt scharf. */
@media (min-width: 1180px) {
	.vbc-countdown {
		position: absolute;
		inset: 0 0 0 0;
		width: max-content;
		margin-inline: auto;
		flex: 0 0 auto;
		flex-wrap: nowrap;
		padding: 0;
		border-bottom: 0;
	}

	.vbc-leiste .vbc-umschalter {
		flex: 0 0 auto;
	}
}

/* Am Handy fällt das Datum weg — Zähler und Marke tragen die Zeile, die
   Wiederholung des Termins passt nicht mehr daneben. */
@media (max-width: 619px) {
	.vbc-countdown__datum {
		display: none;
	}

	.vbc-countdown__zahl {
		font-size: 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vbc-countdown__punkt { animation: none; }
}


/* -------------------------------------------------------------------------
   29. YouTube
   Vorschaubilder groß, Titel klein darunter — wie eine Videowand. Die
   Bilder liegen lokal (siehe inc/youtube.php), abgespielt wird erst nach
   Klick auf YouTube.
   ---------------------------------------------------------------------- */

.vbc-yt {
	margin-top: 2.4rem;
}

.vbc-yt__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .8rem 1.2rem;
	margin-bottom: 1.1rem;
}

.entry-content .vbc-yt__titel {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.2;
}

.vbc-yt .vbc-yt__zeile {
	margin: .15rem 0 0;
	font-family: var(--vbc-schrift-daten);
	font-size: .72rem;
	letter-spacing: .04em;
	color: var(--vbc-text-3);
}

.vbc-yt__folgen {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1.05rem;
	border-radius: 999px;
	background: #ff0033;
	color: #fff;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.vbc-yt__folgen:hover,
.vbc-yt__folgen:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -6px rgba(255, 0, 51, .5);
}

.entry-content .vbc-yt__liste {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 780px)  { .entry-content .vbc-yt__liste { grid-template-columns: repeat(3, 1fr); } }

.entry-content .vbc-yt__liste > li::marker { content: none; }

.vbc-yt__kachel { margin: 0; }

.vbc-yt__kachel > a {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	color: inherit;
	text-decoration: none;
}

.vbc-yt__bild {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--vbc-radius);
	background: var(--vbc-navy);
}

.vbc-yt .vbc-yt__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform .4s ease;
}

/* Das Abspielzeichen sitzt mittig und färbt sich beim Draufzeigen rot —
   der einzige Moment, in dem die Fremdmarke auf der Seite auftaucht. */
.vbc-yt__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(5, 21, 54, .28);
	transition: background .25s ease, color .25s ease;
}

.vbc-yt__kachel > a:hover .vbc-yt__bild img,
.vbc-yt__kachel > a:focus-visible .vbc-yt__bild img {
	transform: scale(1.05);
}

.vbc-yt__kachel > a:hover .vbc-yt__play,
.vbc-yt__kachel > a:focus-visible .vbc-yt__play {
	background: rgba(5, 21, 54, .12);
	color: #ff0033;
}

.vbc-yt__text {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.vbc-yt__name {
	font-size: .88rem;
	font-weight: 650;
	line-height: 1.3;
}

.vbc-yt__kachel > a:hover .vbc-yt__name {
	color: var(--vbc-akzent);
}

.vbc-yt__datum {
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
}

.vbc-yt__kachel > a:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-yt .vbc-yt__bild img,
	.vbc-yt__play,
	.vbc-yt__folgen { transition: none; }
	.vbc-yt__kachel > a:hover .vbc-yt__bild img { transform: none; }
	.vbc-yt__folgen:hover { transform: none; }
}


/* -------------------------------------------------------------------------
   30. Kanäle
   Drei Bildkacheln statt drei Textlinks: Der Verein lebt vom Foto, und die
   Kanäle zeigen Fotos — also zeigen die Kacheln welche.
   ---------------------------------------------------------------------- */

.vbc-kanaele {
	margin-top: 2.2rem;
}

.vbc-kanaele__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1.2rem;
	margin-bottom: 1rem;
}

.entry-content .vbc-kanaele__titel {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.2;
}

/* Verweis auf die Social-Media-Seite: bewusst zurückhaltend, weil die drei
   Kacheln darunter schon die Aufmerksamkeit tragen. */
.vbc-kanaele__mehr {
	font-family: var(--vbc-schrift-daten);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--vbc-akzent);
	text-decoration: none;
}

.vbc-kanaele__mehr::after {
	content: " →";
}

.vbc-kanaele__mehr:hover,
.vbc-kanaele__mehr:focus-visible {
	text-decoration: underline;
}

.vbc-kanaele__liste {
	display: grid;
	gap: .8rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 680px)  { .vbc-kanaele__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vbc-kanal {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--vbc-radius);
	background: var(--vbc-navy);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.vbc-kanal__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.vbc-kanaele .vbc-kanal__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	filter: brightness(1.06);
	transition: transform .45s ease;
}

/* Der Verlauf trägt die Schrift und nimmt beim Draufzeigen die Hausfarbe
   des Kanals an — das ist der Moment, in dem die Fremdmarke auftauchen darf. */
.vbc-kanal::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(5, 21, 54, .92) 0%, rgba(5, 21, 54, .5) 46%, rgba(5, 21, 54, .1) 100%);
	transition: background .3s ease;
}

.vbc-kanal--instagram:hover::after,
.vbc-kanal--instagram:focus-visible::after {
	background: linear-gradient(to top, rgba(98, 40, 215, .88) 0%, rgba(238, 42, 123, .55) 55%, rgba(249, 206, 52, .18) 100%);
}

.vbc-kanal--youtube:hover::after,
.vbc-kanal--youtube:focus-visible::after {
	background: linear-gradient(to top, rgba(255, 0, 51, .88) 0%, rgba(255, 0, 51, .4) 55%, rgba(5, 21, 54, .1) 100%);
}

.vbc-kanal:hover .vbc-kanal__bild img,
.vbc-kanal:focus-visible .vbc-kanal__bild img {
	transform: scale(1.05);
}

.vbc-kanal__inhalt {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: .12rem;
	padding: 1rem 1.05rem 1.05rem;
}

.vbc-kanal__zeichen {
	display: inline-flex;
	margin-bottom: .25rem;
	line-height: 0;
	color: #fff;
}

.vbc-kanal__name {
	font-family: var(--vbc-schrift-display);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.1;
	text-shadow: 0 1px 4px rgba(5, 21, 54, .6);
}

.vbc-kanal__konto {
	font-family: var(--vbc-schrift-daten);
	font-size: .66rem;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .82);
	word-break: break-word;
}

.vbc-kanal__text {
	margin-top: .3rem;
	font-size: .8rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, .9);
}

.vbc-kanal:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.vbc-kanaele .vbc-kanal__bild img,
	.vbc-kanal::after { transition: none; }
	.vbc-kanal:hover .vbc-kanal__bild img { transform: none; }
}

/* -------------------------------------------------------------------------
   31. Jugend
   Die Mannschaftskacheln (18.) tragen nur einen Namen und funktionieren
   deshalb als Bild mit Schrift darauf. Zu jeder Jugendgruppe gehören aber
   Trainingszeit, Betreuung und oft ein Saisonergebnis — das wäre auf einem
   Foto nicht mehr lesbar. Also: Bild oben, Text darunter, feste Bildhöhe,
   damit die Reihe trotz unterschiedlich langer Texte ruhig bleibt.
   ---------------------------------------------------------------------- */

.vbc-jugend {
	margin-top: 2.2rem;
}

.entry-content .vbc-jugend__titel {
	margin: 0 0 1.1rem;
	font-size: clamp(1.4rem, 3.4vw, 1.9rem);
	line-height: 1.15;
}

.vbc-jugend__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px)  { .vbc-jugend__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vbc-jugend__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vbc-jugend-karte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	background: #fff;
}

.vbc-jugend-karte__bild {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--vbc-volleyball);
}

/* Absolut gesetzt, nicht bloß auf Höhe 100 %: Die Höhe der Fläche entsteht
   aus dem Seitenverhältnis und ist für das Bild deshalb keine feste Größe —
   ein hochkantes Foto zöge die Kachel sonst in die Länge und die Reihe wäre
   ungleich hoch. */
.vbc-jugend .vbc-jugend-karte__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Ohne Foto bleibt die Fläche nicht leer, sondern trägt die Altersstufe groß
   in der Abteilungsfarbe — besser als ein Platzhalterbild, das nichts sagt. */
.vbc-jugend-karte--ohne-bild .vbc-jugend-karte__bild {
	background: linear-gradient(140deg, var(--vbc-volleyball) 0%, var(--vbc-volleyball-hell) 100%);
}

.vbc-jugend-karte__stufe {
	position: absolute;
	left: .8rem;
	bottom: .8rem;
	display: inline-block;
	padding: .2rem .55rem;
	border-radius: 999px;
	background: rgba(5, 21, 54, .85);
	font-family: var(--vbc-schrift-daten);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #fff;
}

.vbc-jugend-karte--ohne-bild .vbc-jugend-karte__stufe {
	inset: auto;
	position: static;
	display: grid;
	place-items: center;
	height: 100%;
	padding: 0;
	border-radius: 0;
	background: none;
	font-family: var(--vbc-schrift-display);
	font-size: clamp(1.8rem, 6vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: none;
	color: rgba(255, 255, 255, .92);
}

.vbc-jugend-karte__inhalt {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	flex: 1;
	padding: 1rem 1.05rem 1.05rem;
}

.entry-content .vbc-jugend-karte__name {
	margin: 0;
	font-family: var(--vbc-schrift-display);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.entry-content .vbc-jugend-karte__erfolg {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	font-family: var(--vbc-schrift-daten);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--vbc-volleyball-hell);
}

.entry-content .vbc-jugend-karte__text {
	margin: 0;
	font-size: .88rem;
	line-height: 1.45;
	color: var(--vbc-text-2);
}

/* Trainingszeit und Betreuung als Zweispalter — die Begriffe schmal und
   ruhig, die Angaben in der Datenschrift, damit Uhrzeiten untereinander
   stehen. */
.vbc-jugend-karte__daten {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .2rem .7rem;
	margin: .15rem 0 0;
	padding: .7rem 0 0;
	border-top: 1px solid var(--vbc-linie);
}

.vbc-jugend-karte__daten dt {
	font-family: var(--vbc-schrift-daten);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
	align-self: center;
}

.vbc-jugend-karte__daten dd {
	margin: 0;
	font-family: var(--vbc-schrift-daten);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	color: var(--vbc-text);
}

.vbc-jugend-karte__link {
	margin-top: auto;
	padding-top: .5rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--vbc-volleyball);
	text-decoration: none;
}

.vbc-jugend-karte__link::after {
	content: " →";
}

/* Für die ganze Jugend ist eine Person zuständig — der Block steht deshalb
   einmal unter den Karten. Breite begrenzt, sonst zöge sich die eine Zeile
   über die volle Spalte und sähe verloren aus. */
.vbc-jugend__kontakt {
	margin-top: 1.4rem;
	max-width: 24rem;
}

.vbc-jugend-karte__link:hover,
.vbc-jugend-karte__link:focus-visible {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   32. Partner
   Im Fußbereich stehen die Logos allein — dort ist kein Platz für mehr. Auf
   der eigenen Seite bekommt jeder Partner eine Karte mit einem Satz dazu:
   Ein Logo ohne Erklärung sagt niemandem, warum es dort steht.
   ---------------------------------------------------------------------- */

.vbc-partner {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
	.vbc-partner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vbc-partner__flaeche {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.2rem 1.3rem 1.4rem;
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}

a.vbc-partner__flaeche:hover,
a.vbc-partner__flaeche:focus-visible {
	border-color: var(--vbc-akzent);
	transform: translateY(-2px);
}

a.vbc-partner__flaeche:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 2px;
}

/* Feste Höhe für alle Zeichen: Die drei Logos haben sehr unterschiedliche
   Formate, ohne gemeinsame Grundlinie stünde die Reihe schief. */
.vbc-partner__zeichen {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 3.4rem;
	margin-bottom: 1rem;
}

.vbc-partner .vbc-partner__zeichen img {
	max-height: 100%;
	max-width: 11rem;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0;
}

.vbc-partner__text {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1;
}

.vbc-partner__name {
	font-family: var(--vbc-schrift-display);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
}

.vbc-partner__zeile {
	font-size: .88rem;
	line-height: 1.45;
	color: var(--vbc-text-2);
}

.vbc-partner__mehr {
	margin-top: auto;
	padding-top: .7rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .72rem;
	letter-spacing: .04em;
	color: var(--vbc-akzent);
}

.vbc-partner__mehr::after { content: " →"; }

@media (prefers-reduced-motion: reduce) {
	.vbc-partner__flaeche { transition: none; }
	a.vbc-partner__flaeche:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   33. Dokumente
   Eine Zeile je Unterlage statt eines Kastens: Die Seite ist eine Ablage,
   keine Übersicht. Die Kennzeichnung links sagt vorab, was beim Klick
   passiert — PDF öffnen, Formular ausfüllen oder anmelden.
   ---------------------------------------------------------------------- */

.vbc-dokumente {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.vbc-dokument__flaeche {
	display: flex;
	align-items: center;
	gap: .9rem 1.1rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
}

.vbc-dokument__flaeche:hover,
.vbc-dokument__flaeche:focus-visible {
	border-color: var(--vbc-akzent);
	background: var(--vbc-akzent-weich);
}

.vbc-dokument__flaeche:focus-visible {
	outline: 2px solid var(--vbc-akzent);
	outline-offset: 2px;
}

.vbc-dokument__marke {
	flex: 0 0 auto;
	align-self: flex-start;
	min-width: 7.5rem;
	padding: .25rem .55rem;
	border-radius: 999px;
	font-family: var(--vbc-schrift-daten);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	background: var(--vbc-text-3);
}

.vbc-dokument--pdf .vbc-dokument__marke      { background: var(--vbc-navy); }
.vbc-dokument--formular .vbc-dokument__marke { background: var(--vbc-volleyball-hell); }

.vbc-dokument__text {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	flex: 1;
	min-width: 0;
}

.vbc-dokument__name {
	font-weight: 650;
	line-height: 1.25;
}

.vbc-dokument__zeile {
	font-size: .85rem;
	line-height: 1.4;
	color: var(--vbc-text-2);
}

.vbc-dokument__pfeil {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--vbc-text-3);
	transition: transform .2s ease, color .2s ease;
}

.vbc-dokument__flaeche:hover .vbc-dokument__pfeil {
	color: var(--vbc-akzent);
	transform: translateX(3px);
}

@media (max-width: 620px) {
	.vbc-dokument__flaeche {
		flex-wrap: wrap;
	}

	.vbc-dokument__marke {
		min-width: 0;
	}

	.vbc-dokument__text {
		flex: 1 0 100%;
		order: 2;
	}

	.vbc-dokument__pfeil {
		margin-left: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vbc-dokument__flaeche,
	.vbc-dokument__pfeil { transition: none; }
	.vbc-dokument__flaeche:hover .vbc-dokument__pfeil { transform: none; }
}

/* Wer Bewegung reduziert haben möchte, bekommt das Suchfeld ohne Fahrt —
   es ist dann sofort da beziehungsweise weg. */
@media (prefers-reduced-motion: reduce) {
	#masthead .vbc-suchform--klappbar .vbc-suchform__feld { transition: none; }
}

/* -------------------------------------------------------------------------
   34. Spielkalender
   Ein Monat, alle Mannschaften übereinander. Breit als Gitter, schmal als
   Liste: Sieben Spalten auf einem Handy ergäben Spalten von 45 px, in denen
   kein Mannschaftsname Platz hat.
   ---------------------------------------------------------------------- */

.vbc-kalender {
	margin-top: 2.2rem;
}

.vbc-kalender__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .4rem 1rem;
	margin-bottom: 1rem;
}

.entry-content .vbc-kalender__titel {
	margin: 0;
	font-size: clamp(1.4rem, 3.4vw, 1.9rem);
	line-height: 1.15;
}

/* Monatsauswahl: eine Reihe Schaltflächen, der laufende Monat hervorgehoben.
   Schmal darf sie seitwärts rollen — umbrechen ließe den Kopf wachsen. */
.vbc-kalender__wahl {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin: 0;
}

.entry-content .vbc-kalender__monat {
	margin: 0;
	padding: .25rem .6rem;
	border-radius: 999px;
	font-family: var(--vbc-schrift-daten);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vbc-text-3);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

a.vbc-kalender__monat:hover,
a.vbc-kalender__monat:focus-visible {
	background: var(--vbc-akzent-weich);
	color: var(--vbc-akzent);
}

.vbc-kalender__monat.ist-aktiv {
	background: var(--vbc-akzent);
	color: #fff;
	font-weight: 600;
}

@media (max-width: 620px) {
	.vbc-kalender__wahl {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: .2rem;
		-webkit-overflow-scrolling: touch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.entry-content .vbc-kalender__monat { transition: none; }
}

.vbc-kalender__gitter {
	display: grid;
	grid-template-columns: repeat(var(--vbc-kalender-spalten, 7), minmax(0, 1fr));
	gap: 1px;
	background: var(--vbc-linie);
	border: 1px solid var(--vbc-linie);
	border-radius: var(--vbc-radius);
	overflow: hidden;
}

.vbc-kalender__wochentag {
	padding: .5rem .4rem;
	background: var(--vbc-flaeche-2);
	font-family: var(--vbc-schrift-daten);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-align: center;
	color: var(--vbc-text-3);
}

.vbc-kalender__leer,
.vbc-kalender__tag {
	min-height: 6.5rem;
	padding: .4rem .45rem .5rem;
	background: #fff;
}

.vbc-kalender__leer {
	background: var(--vbc-flaeche-2);
}

.vbc-kalender__zahl {
	display: block;
	margin-bottom: .3rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .72rem;
	font-variant-numeric: tabular-nums;
	color: var(--vbc-text-3);
}

.vbc-kalender__tag--heute .vbc-kalender__zahl {
	display: inline-block;
	padding: .05rem .35rem;
	border-radius: 999px;
	background: var(--vbc-akzent);
	color: #fff;
	font-weight: 700;
}

/* Ein Spiel ist ein kleiner Block, keine Zeile: Uhrzeit, Mannschaft, Gegner
   und Ort stehen untereinander, damit auch in einer schmalen Spalte nichts
   abgeschnitten wird. */
.vbc-kalender__spiel {
	display: block;
	margin-bottom: .3rem;
	padding: .3rem .4rem;
	border-left: 3px solid var(--vbc-linie);
	border-radius: 3px;
	background: var(--vbc-flaeche-2);
	font-size: .7rem;
	line-height: 1.3;
}

.vbc-kalender__spiel--volleyball.ist-heim {
	border-left-color: var(--vbc-volleyball);
	background: var(--vbc-volleyball-weich);
}

.vbc-kalender__spiel--floorball.ist-heim {
	border-left-color: var(--vbc-floorball);
	background: var(--vbc-floorball-weich);
}

.vbc-kalender__zeit {
	display: block;
	font-family: var(--vbc-schrift-daten);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--vbc-text);
}

.vbc-kalender__wer {
	display: block;
	font-weight: 650;
	color: var(--vbc-text);
}

.vbc-kalender__gegen,
.vbc-kalender__ort {
	display: block;
	color: var(--vbc-text-2);
}

.vbc-kalender__ort {
	font-size: .95em;
}

.vbc-kalender__legende {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .8rem;
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	color: var(--vbc-text-3);
}

.vbc-kalender__marke {
	display: inline-block;
	width: .9rem;
	height: .9rem;
	border-radius: 3px;
	border-left: 3px solid var(--vbc-linie);
	background: var(--vbc-flaeche-2);
}

.vbc-kalender__marke--heim {
	border-left-color: var(--vbc-volleyball);
	background: var(--vbc-volleyball-weich);
	margin-left: 0;
}

.vbc-kalender__legende .vbc-kalender__marke + * {
	margin-right: .8rem;
}

/* Schmal: kein Gitter, sondern nur die Tage, an denen gespielt wird. Ein
   leerer Kalendertag hat auf einem Handy keinen Wert. */
@media (max-width: 780px) {
	.vbc-kalender__gitter {
		display: block;
		border: 0;
		background: none;
		border-radius: 0;
	}

	.vbc-kalender__wochentag,
	.vbc-kalender__leer,
	.vbc-kalender__tag:not(.vbc-kalender__tag--spiele) {
		display: none;
	}

	.vbc-kalender__tag {
		min-height: 0;
		margin-bottom: .6rem;
		padding: .7rem .8rem .8rem;
		border: 1px solid var(--vbc-linie);
		border-radius: var(--vbc-radius);
	}

	.vbc-kalender__zahl::after {
		content: ".";
	}

	.vbc-kalender__spiel {
		font-size: .82rem;
	}
}

/* -------------------------------------------------------------------------
   35. Spieltag-Streifen
   Ein Band unter der Bühne. Der Zustand kommt aus der Uhr: laufendes
   Heimspiel, Heimspieltag oder die nächsten Begegnungen.

   Die Bewegung ist reines CSS auf verdoppeltem Markup — die Bahn steht
   zweimal da und läuft um die halbe Breite nach links, dann beginnt sie
   nahtlos von vorn. Ohne JavaScript steht das Band still, die Spiele sind
   aber vollständig lesbar.
   ---------------------------------------------------------------------- */

.vbc-spieltag {
	position: relative;
	overflow: hidden;
	margin-bottom: 2rem;
	border-radius: var(--vbc-radius);
	background: linear-gradient(100deg, var(--vbc-navy) 0%, #0a2450 62%, var(--vbc-navy) 100%);
	color: #fff;
	isolation: isolate;
}

.vbc-spieltag::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(120% 180% at 8% 0%, rgba(30, 85, 144, .55), transparent 60%);
}

.vbc-spieltag__kopf {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem 1.1rem .1rem;
}

.vbc-spieltag__marke {
	font-family: var(--vbc-schrift-daten);
	font-size: .64rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.vbc-spieltag__punkt {
	flex: none;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--vbc-sieg);
}

.vbc-spieltag[data-zustand="heute"] .vbc-spieltag__punkt { background: #ffc94d; }

.vbc-spieltag[data-zustand="live"] .vbc-spieltag__punkt {
	background: var(--vbc-floorball);
	animation: vbc-spieltag-puls 1.6s ease-in-out infinite;
}

@keyframes vbc-spieltag-puls {
	0%, 100% { box-shadow: 0 0 0 0 rgba(233, 50, 44, .55); }
	70%      { box-shadow: 0 0 0 .55rem rgba(233, 50, 44, 0); }
}

.vbc-spieltag__leib {
	position: relative;
	z-index: 1;
	min-height: 4.4rem;
	display: flex;
	align-items: center;
	padding: 0 0 1rem;
}

.vbc-spieltag__liste {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 2rem;
	padding: 0 1.1rem;
}

/* Eine Begegnung */
.vbc-spieltag__spiel {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	white-space: nowrap;
}

.vbc-spieltag__liste .vbc-spieltag__spiel { white-space: normal; }

.vbc-spieltag__tag {
	font-family: var(--vbc-schrift-daten);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.vbc-spieltag__zeit {
	font-family: var(--vbc-schrift-daten);
	font-size: 1.05rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.vbc-spieltag__team {
	font-family: var(--vbc-schrift-display);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.vbc-spieltag__gegen {
	font-size: .95rem;
	color: rgba(255, 255, 255, .82);
}

.vbc-spieltag__heim {
	padding: .1rem .4rem;
	border-radius: 3px;
	background: rgba(255, 255, 255, .16);
	font-family: var(--vbc-schrift-daten);
	font-size: .6rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.vbc-spieltag__ort {
	font-family: var(--vbc-schrift-daten);
	font-size: .68rem;
	color: rgba(255, 255, 255, .55);
}

/* Das Laufband */
.vbc-spieltag__band {
	display: flex;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.vbc-spieltag__bahn {
	display: flex;
	gap: 2.6rem;
	padding-right: 2.6rem;
	flex: none;
	/* Tempo statt Dauer: 9,5 Sekunden je Begegnung halten die Geschwindigkeit
	   gleich, egal wie viele Spiele anstehen. */
	animation: vbc-spieltag-lauf calc(var(--vbc-spiele, 8) * 9.5s) linear infinite;
}

@keyframes vbc-spieltag-lauf {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Beim Lesen anhalten — mit der Maus wie mit der Tastatur. */
.vbc-spieltag:hover .vbc-spieltag__bahn,
.vbc-spieltag:focus-within .vbc-spieltag__bahn {
	animation-play-state: paused;
}

/* Ohne Bewegung: kein Lauf, dafür seitwärts schiebbar. */
@media (prefers-reduced-motion: reduce) {
	.vbc-spieltag__bahn { animation: none; }

	.vbc-spieltag__band {
		overflow-x: auto;
		mask-image: none;
		-webkit-mask-image: none;
		padding: 0 1.1rem;
	}

	.vbc-spieltag__bahn[aria-hidden="true"] { display: none; }

	.vbc-spieltag__punkt { animation: none; }
}

/* -------------------------------------------------------------------------
   36. Feldbuchung am Beachplatz
   Das Buchungs-Plugin stapelt Kalender und Formular untereinander. Auf einer
   Seite mit über 1200 px Breite steht der Kalender damit allein in der
   linken Hälfte und darunter beginnt das Formular — die halbe Fläche bleibt
   leer, und man muss weit scrollen.

   Der Kalender wird deshalb links freigestellt, die Felder fließen rechts
   daneben. Bewusst ein Float und kein Raster: Wie viele Feldzeilen das
   Plugin ausgibt, hängt von seinen Einstellungen ab — ein Float kommt ohne
   diese Kenntnis aus.
   ---------------------------------------------------------------------- */

@media (min-width: 860px) {
	/* Drei Spalten: links der Kalender über die ganze Höhe, rechts daneben
	   zwei Spalten für die Felder. Die Felder brauchen keinen eigenen
	   Umschlag — die automatische Platzierung füllt Spalte 2 und 3 von
	   selbst, weil der Kalender seine Zeilen für sich beansprucht.

	   Die Zeilenzahl gibt das Plugin vor; ein großzügiger Bereich deckt jede
	   Ausbaustufe ab. Leere Zeilen sind ohne Höhe und ohne Abstand. */
	.vbc-buchung .wpbc__form__div {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 1.6rem;
		row-gap: 0;
		align-items: start;
	}

	.vbc-buchung .wpbc__form__div > .wpbc_r_calendar {
		grid-column: 1;
		grid-row: 1 / span 40;
		margin-right: .9rem;
	}

	/* Sicherheitsnetz: Was das Plugin künftig ergänzt, nimmt erst einmal die
	   volle Breite — lieber zu breit als halb abgeschnitten. */
	.vbc-buchung .wpbc__form__div > .wpbc__row:not(.wpbc_r_calendar) {
		grid-column: 2 / -1;
	}

	/* Kurze Angaben stehen zu zweit nebeneinander. Ausgewählt über das Feld
	   im Inneren statt über die Reihenfolge: Ordnet das Plugin die Zeilen
	   um, stimmt es weiterhin. */
	.vbc-buchung .wpbc__form__div > .wpbc__row:has( input[name^="name"] ),
	.vbc-buchung .wpbc__form__div > .wpbc__row:has( input[name^="secondname"] ),
	.vbc-buchung .wpbc__form__div > .wpbc__row:has( input[name^="phone"] ),
	.vbc-buchung .wpbc__form__div > .wpbc__row:has( input[type="email"] ),
	.vbc-buchung .wpbc__form__div > .wpbc__row:has( input[name^="captcha_input"] ),
	.vbc-buchung .wpbc__form__div > .wpbc__row:has( textarea[name^="details"] ) {
		grid-column: auto;
	}
}

/* Enger stapeln — das Plugin setzt großzügige Abstände für eine einspaltige
   Anordnung an. */
.vbc-buchung .wpbc__row {
	margin-bottom: .7rem;
}

/* „Anzahl Felder (1, 2 oder 3)“ ist beim Plugin ein mehrzeiliges Feld und
   damit fünfmal so hoch wie nötig für eine einzelne Ziffer. Höhe und
   Innenabstand werden hier gemeinsam mit den einzeiligen Feldern gesetzt,
   damit es neben „Email“ nicht um anderthalb Pixel abweicht. */
.vbc-buchung .wpbc__form__div input[type="text"],
.vbc-buchung .wpbc__form__div input[type="email"],
.vbc-buchung .wpbc__form__div input[type="tel"],
.vbc-buchung .wpbc__form__div textarea[name^="details"] {
	height: 2.7rem;
	min-height: 0;
}

.vbc-buchung .wpbc__form__div textarea[name^="details"] {
	padding-top: .62rem;
	padding-bottom: .62rem;
	/* Eine Ziffer braucht keinen Anfasser zum Größerziehen. */
	resize: none;
	overflow: hidden;
}

/* Der Kalender des Plugins bringt eigene Ränder mit — die Kachel soll sich
   an die übrigen Blöcke der Seite angleichen. */
.vbc-buchung .wpbc_calendar_wraper {
	border-radius: var(--vbc-radius);
}

/* Mannschaftsnamen im Laufband führen auf ihre Seite. Sie sollen wie der
   übrige Text aussehen — der Streifen wäre sonst voller unterstrichener
   Wörter. Dass sie anklickbar sind, zeigt sich beim Darüberfahren; und weil
   das Band dabei ohnehin anhält, lässt sich in Ruhe zielen. */
.vbc-spieltag__team--link {
	color: inherit;
	text-decoration: none;
	text-underline-offset: .18em;
}

.vbc-spieltag__team--link:hover,
.vbc-spieltag__team--link:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.vbc-spieltag__team--link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 2px;
}


/* Überschriften auf Bildkacheln bleiben beim Darüberfahren weiß.
   Kadence färbt jeden Verweis im Inhalt beim Hovern in die Akzentfarbe —
   auf den dunklen Kacheln der Startseite wurde daraus ein blauer Titel auf
   blauem Foto. Die Kacheln tragen ihre Farbe im Verlauf, nicht in der
   Schrift. */
.vbc-bereich:hover,
.vbc-bereich:focus-visible,
.vbc-bereich:hover .vbc-bereich__titel,
.vbc-bereich:focus-visible .vbc-bereich__titel,
.vbc-bereich:hover .vbc-bereich__text,
.vbc-bereich:hover .vbc-bereich__mehr,
.vbc-kanal:hover,
.vbc-kanal:focus-visible,
.vbc-kanal:hover .vbc-kanal__name,
.vbc-kanal:focus-visible .vbc-kanal__name,
.vbc-kanal:hover .vbc-kanal__konto,
.vbc-kanal:hover .vbc-kanal__text {
	color: #fff;
}


/* -------------------------------------------------------------------------
   37. Nach oben
   ---------------------------------------------------------------------- */

.vbc-nachoben {
	position: fixed;
	right: 1.2rem;
	/* Über dem Safe-Area-Rand: Auf dem iPhone liegt sonst die Home-Leiste
	   darüber und der Knopf ist nicht zu treffen. */
	bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
	z-index: 90;

	display: inline-flex;
	align-items: center;
	gap: .45rem;

	margin: 0;
	padding: .62rem .95rem;
	border: 0;
	border-radius: 999px;

	/* Die Abteilungsfarbe kommt aus der Klasse am <body>. Auf der Startseite
	   und den Vereinsseiten ist das Navy. */
	background: var(--vbc-akzent, #031c37);
	color: #fff;

	font-family: inherit;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;

	cursor: pointer;
	box-shadow: 0 .5rem 1.4rem rgba(3, 28, 55, .28);
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.vbc-nachoben[hidden] {
	display: none;
}

.vbc-nachoben:hover,
.vbc-nachoben:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 .7rem 1.8rem rgba(3, 28, 55, .34);
	color: #fff;
}

.vbc-nachoben:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.vbc-nachoben svg {
	flex: none;
}

/* Auf dem Handy zählt jeder Quadratzentimeter Inhalt — dort nur der Pfeil. */
@media (max-width: 600px) {
	.vbc-nachoben {
		padding: .72rem;
	}

	.vbc-nachoben__wort {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vbc-nachoben {
		transition: none;
	}

	.vbc-nachoben:hover,
	.vbc-nachoben:focus-visible {
		transform: none;
	}
}


/* -------------------------------------------------------------------------
   38. Mannschaftskopf ohne Foto
   ---------------------------------------------------------------------- */

/* Von einigen Mannschaften liegt kein Foto vor. Bis dahin stand dort ein
   leeres Band von 16:9 — bei 1200 Pixeln Breite fast eine Bildschirmhöhe
   nichts. Ohne Foto wird daraus ein schmaler Titelbalken in der Farbe der
   Abteilung, so wie die Kacheln der Übersicht. */
.vbc-mannschaft__kopf--ohne-bild {
	aspect-ratio: auto;
	min-height: 0;
	max-height: none;
	background: linear-gradient(150deg, var(--vbc-akzent-hell, #16457d) 0%, var(--vbc-navy, #031c37) 72%);
}

/* Der Schleier liegt sonst über dem Verlauf und macht ihn stumpf. */
.vbc-mannschaft__kopf--ohne-bild::after {
	content: none;
}

.vbc-mannschaft__kopf--ohne-bild .vbc-mannschaft__inhalt {
	padding: 1.8rem 1.6rem;
}

@media (max-width: 700px) {
	.vbc-mannschaft__kopf--ohne-bild {
		aspect-ratio: auto;
	}

	.vbc-mannschaft__kopf--ohne-bild .vbc-mannschaft__inhalt {
		padding: 1.4rem 1.1rem;
	}
}


/* -------------------------------------------------------------------------
   39. Blocksatz im Fließtext
   ---------------------------------------------------------------------- */

/* Blocksatz ohne Silbentrennung reißt im Deutschen Löcher in die Zeilen —
   die langen Wörter lassen sich nicht anders verteilen. Deshalb beides
   zusammen, und erst ab Tablet: In einer schmalen Handyspalte bleiben die
   Lücken auch mit Trennung zu groß. */
@media (min-width: 700px) {
	.entry-content > p,
	.entry-content > .wp-block-paragraph,
	.vbc-mannschaft__text {
		text-align: justify;
		text-justify: inter-word;
		hyphens: auto;
	}
}

.entry-content > p,
.vbc-mannschaft__text {
	hyphens: auto;
}

/* Nicht im Blocksatz: kurze Zeilen, Bildunterschriften und alles, was in
   einer Kachel steht — dort entstehen sonst Ein-Wort-Zeilen. */
.entry-content .vbc-vorspann,
.entry-content figcaption,
.entry-content .vbc-quelle,
.vbc-mitglied p,
.vbc-bereich p,
.vbc-kanal p {
	text-align: left;
	hyphens: manual;
}


/* -------------------------------------------------------------------------
   40. Spielkalender schlanker
   ---------------------------------------------------------------------- */

/* Der Kalender nahm mehr Platz ein als die Tabellen darüber, obwohl in den
   meisten Zellen nichts steht — gespielt wird am Wochenende. Die Zellen sind
   jetzt halb so hoch und wachsen mit ihrem Inhalt; volle Wochenenden bleiben
   also lesbar, leere Wochentage kosten keine Fläche mehr.

   Dazu weniger Rahmen: Ein Gitter aus Linien um jede einzelne Zelle wirkt
   wie ein Tabellenkalkulationsblatt und passt nicht zum übrigen Design. */
.vbc-kalender {
	margin-top: 3rem;
}

.vbc-kalender__gitter {
	gap: 0;
	border: 0;
	background: transparent;
	border-top: 1px solid var(--vbc-linie);
}

.vbc-kalender__tag,
.vbc-kalender__leer {
	min-height: 3.2rem;
	height: auto;
	border-bottom: 1px solid var(--vbc-linie);
	border-right: 1px solid var(--vbc-linie);
	background: transparent;
}

/* Die rechte Kante der letzten Spalte wäre eine Linie ins Nichts. */
.vbc-kalender__tag:nth-child(7n),
.vbc-kalender__leer:nth-child(7n) {
	border-right: 0;
}

.vbc-kalender__wochentag {
	background: transparent;
	border-bottom: 1px solid var(--vbc-linie);
}

@media (max-width: 700px) {
	.vbc-kalender__tag,
	.vbc-kalender__leer {
		min-height: 2.4rem;
	}
}

/* -------------------------------------------------------------------------
   41. Einwilligung verwalten

   Complianz bringt ein schwebendes Etikett „Einwilligung verwalten“ mit,
   unten rechts und mit z-index 9998 über allem. Dort steht schon der Knopf
   „Nach oben“ — gemessen 3 258 Quadratpixel Überlagerung, und weil das
   Etikett oben liegt, war der Knopf dort nicht mehr zu treffen.

   Erst habe ich das Etikett nach links geschoben. Beim zweiten Hinsehen ist
   das die falsche Antwort: Art. 7 Abs. 3 DSGVO verlangt, dass sich eine
   Einwilligung so leicht widerrufen lässt, wie sie erteilt wurde — ein
   Verweis in der Fußzeile erfüllt das. Ein Element, das auf jeder Seite über
   dem Inhalt klebt, ist dafür nicht nötig.

   Das Etikett ist deshalb abgeschaltet (Bannereinstellung „überall
   verstecken“), und in der Fußzeile steht ein Knopf neben Impressum und
   Datenschutz. Die Regeln unten bleiben als Netz: Wer das Etikett je wieder
   einschaltet, findet es links statt über dem Knopf.
   ---------------------------------------------------------------------- */

/* Der Knopf in der Fußzeile — sieht aus wie die Verweise daneben. */
.vbc-fussleiste__knopf {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.vbc-fussleiste__knopf:hover,
.vbc-fussleiste__knopf:focus-visible {
	text-decoration: none;
}

/* Das Banner selbst steht unten links (Bannereinstellung „Position“), damit
   es beim Wiederöffnen aus der Fußzeile nicht auf dem Knopf „Nach oben“
   landet. Zuerst wollte ich den Knopf ausblenden, solange das Banner offen
   ist — über body.cmplz-banner-active. Diese Klasse setzt Complianz in
   unserer Fassung aber gar nicht; die Regel wäre wirkungslos geblieben. */

body #cmplz-manage-consent .cmplz-manage-consent {
	right: auto;
	left: 40px;

	/* Complianz rundet unten ab, weil das Etikett aus dem Rand herausfährt.
	   Beim Wechsel der Seite bleibt das so — nur die Ecken tauschen. */
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

@media (max-width: 600px) {
	body #cmplz-manage-consent .cmplz-manage-consent {
		left: 1.2rem;
	}
}

/* -------------------------------------------------------------------------
   42. Mehrere Ansprechpartner

   Manche Mannschaften werden zu zweit betreut — Damen IV von Anastacia und
   Nisa. Vorher stand nur die erste als Person im Kasten, die zweite hing als
   Beiwerk in der Rollenbezeichnung („Training · mit Nisa“). Jetzt stehen
   beide untereinander, mit Porträt, und die E-Mail-Adresse einmal darunter
   statt hinter jedem Namen.
   ---------------------------------------------------------------------- */

.vbc-personen {
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

/* Bei zweien eine feine Trennlinie: Ohne sie verschwimmen zwei Zeilen mit
   Bild und zwei Textzeilen zu einem Block, in dem man nicht mehr sieht,
   welche Rolle zu welchem Gesicht gehört. */
.vbc-personen--mehrere .vbc-person + .vbc-person {
	padding-top: .9rem;
	border-top: 1px solid var(--vbc-linie, rgba(3, 28, 55, .12));
}

.vbc-personen__kontakt {
	margin: .9rem 0 0;
	font-size: .92rem;
}

/* Auf schmalen Schirmen die Porträts etwas kleiner — zwei Kreise à 4rem
   drücken den Namen sonst in den Umbruch. */
@media (max-width: 480px) {
	.vbc-personen--mehrere .vbc-person__bild {
		width: 3.2rem;
		height: 3.2rem;
	}
}

.vbc-personen__zusatz {
	margin: .8rem 0 0;
	color: var(--vbc-text-leise, #5a6675);
	font-size: .88rem;
}

/* -------------------------------------------------------------------------
 * 43. Kader ohne Porträt
 *
 * Die Kachel hat bereits das Vereinsblau als Grund — ohne Foto sähen aber
 * alle gleich aus. Der Anfangsbuchstabe macht sie unterscheidbar und zeigt
 * zugleich, dass hier ein Bild hingehört. Bewusst zurückhaltend: Er soll
 * neben einem echten Porträt in derselben Reihe nicht lauter sein.
 * ---------------------------------------------------------------------- */

.vbc-spielerin__bild--ersatz {
	display: grid;
	place-items: center;
	background: var(--vbc-navy, #051536);
}

.vbc-spielerin__anfang {
	font-family: var(--vbc-schrift-display);
	font-size: clamp(2.6rem, 9vw, 4.2rem);
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, .16);
	/* Der Buchstabe sitzt dort, wo sonst das Gesicht ist — nicht in der
	   Mitte der Kachel, deren untere Hälfte der Namenszug einnimmt. */
	transform: translateY(-12%);
	user-select: none;
}

/* -------------------------------------------------------------------------
 * 44. Trainingszeiten
 *
 * Die Tabellen kommen aus der Mannschaftsregistrierung (inc/bausteine.php).
 * Gestaltet wie jede andere Tabelle der Seite; nur die Anschrift darunter
 * braucht eine eigene Zeile.
 * ---------------------------------------------------------------------- */

.vbc-zeiten__kontakt {
	margin: .6rem 0 2.4rem;
	color: var(--vbc-text-leise, #5a6675);
	font-size: .92rem;
}

/* Die erste Spalte ist der Name, die zweite trägt die Zeiten — die soll den
   Platz bekommen, der übrig bleibt. */
.vbc-zeiten td:first-child {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 45. Hinweise nur für die Redaktion
 *
 * Blöcke, die bewusst nichts ausgeben, sind für Besucher richtig und für die
 * Redaktion verwirrend — ein eingebauter, aber leerer Block sieht aus wie ein
 * fehlender. Diese Kästen sieht nur, wer die Seite bearbeiten darf.
 * ---------------------------------------------------------------------- */

.vbc-hinweis--redaktion {
	border-left-color: var(--vbc-warnung, #96590a);
	background: var(--vbc-flaeche-2, #f1f4f8);
	font-size: .92rem;
}

.vbc-hinweis--redaktion p::before {
	content: "Nur für die Redaktion: ";
	font-weight: 650;
}

/* -------------------------------------------------------------------------
 * 46. Knopf für helle Flächen
 *
 * .vbc-shop__knopf ist weiß auf dunkel — richtig auf der Shop-Kachel der
 * Startseite, unsichtbar auf einer weißen Seite. Dieser hier ist der
 * Gegenstück für den normalen Seitengrund, etwa unter dem Partnerlogo auf
 * der Teamshop-Seite.
 * ---------------------------------------------------------------------- */

.vbc-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .7rem 1.5rem;
	border-radius: 999px;
	background: var(--vbc-akzent);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .15s ease;
}

.vbc-knopf:hover,
.vbc-knopf:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -8px rgba(3, 28, 55, .55);
}

/* In einer schmalen Spalte — etwa neben dem Text der Teamshop-Seite —
   soll er die Breite nehmen, die da ist, statt schmal danebenzustehen. */
.vbc-knopf--breit {
	display: flex;
	width: 100%;
	margin-top: .9rem;
}

/* -------------------------------------------------------------------------
 * 47. Trainingsort in der Zeitenliste
 *
 * Die Halle steht an jeder Zeile statt einmal unter der Liste — leiser als
 * die Zeit, damit die Zeile weiter mit dem Tag anfängt.
 * ---------------------------------------------------------------------- */

.vbc-zeitenliste__ort {
	display: block;
	color: var(--vbc-text-leise, #5a6675);
	font-size: .85em;
}

/* -------------------------------------------------------------------------
 * 48. Kader nach Positionen
 *
 * Die Zwischenüberschriften sollen den Kader gliedern, nicht mit der
 * Überschrift „Die Mannschaft“ konkurrieren — deshalb klein, in der
 * Datenschrift und mit Linie statt Größe.
 * ---------------------------------------------------------------------- */

.vbc-kader__position {
	margin: 1.8rem 0 .7rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--vbc-linie);
	font-family: var(--vbc-schrift-daten);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vbc-text-3, #5a6675);
}

.vbc-kader--gruppiert .vbc-kader__position:first-of-type {
	margin-top: .6rem;
}

/* -------------------------------------------------------------------------
 * 49. Bühnenbild gespiegelt
 *
 * An der senkrechten Achse, also links gegen rechts. Auf breiten Schirmen
 * hellt der Verlauf das Bild von links auf, damit der Text trägt — gespiegelt
 * steht die dichtere Hälfte der Gruppe rechts, wo das Foto klar bleibt.
 *
 * Als Transformation statt als neue Bilddatei: Das Original bleibt
 * unangetastet, und die Zeile ist wieder gelöscht, wenn es doch nicht gefällt.
 * ---------------------------------------------------------------------- */

.vbc-buehne__bild img {
	transform: scaleX(-1);
}

/* -------------------------------------------------------------------------
 * 50. Kapitänin und Kapitän im Kader
 *
 * Ein kleiner goldener Stern oben rechts. Bewusst klein und auf einem
 * dunklen Kreis, damit er auf hellen wie dunklen Fotos gleich gut steht und
 * nicht mit dem Namenszug unten konkurriert. Die Angabe „Kapitän“ steht
 * weiterhin im Text — der Stern ist Zierde, nicht die einzige Auskunft.
 * ---------------------------------------------------------------------- */

.vbc-spielerin__stern {
	position: absolute;
	top: .55rem;
	right: .55rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(5, 21, 54, .72);
	color: #f2c14e;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	pointer-events: none;
}

.vbc-spielerin__stern svg {
	display: block;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, .4));
}

/* -------------------------------------------------------------------------
 * 51. Eye-Able und Cookie-Banner
 *
 * Der Knopf des Barrierefreiheits-Assistenten liegt über allem, auch über
 * dem Cookie-Banner — auf dem Handy saß er auf dessen Schaltflächen. Solange
 * der Banner offen ist, verschwindet er deshalb. Seine Inhalte stecken in
 * einem Shadow DOM; von aussen erreichbar ist nur der Behälter.
 *
 * Die Lage selbst (unten rechts, über dem „Nach oben“-Knopf) steht in den
 * Einstellungen des Plugins, nicht hier.
 * ---------------------------------------------------------------------- */

body:has(.cmplz-cookiebanner.cmplz-show) #eyeAble_container_ID {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * 52. Rückfall für ältere Browser
 *
 * Gemeldet aus dem Samsung-Standardbrowser: In der Mannschaftsübersicht
 * fehlten die Fotos. Zwei Eigenschaften kommen dafür in Frage, beide sind
 * hier abgesichert — welche es war, spielt dann keine Rolle mehr.
 *
 * 1. Bild, Verlauf und Text lagen über negative z-index-Werte übereinander:
 *    das Foto hinter der Kachel, der Verlauf davor, der Text zuoberst. Das
 *    ist erlaubt, wird aber nicht überall gleich gemalt — malt ein Browser
 *    den Kachelhintergrund darüber, bleibt vom Foto nichts übrig. Dieselbe
 *    Reihenfolge, nur mit positiven Ebenen, kommt ohne diese Annahme aus.
 *    Die Regeln stehen bewusst am Ende der Datei und überschreiben die
 *    Abschnitte davor, damit dort nichts umgebaut werden muss.
 *
 * 2. Die Kacheln der Übersicht und der Kanäle bekommen ihre Höhe aus
 *    aspect-ratio (Samsung Internet erst ab Version 14). Fehlt es, ist die
 *    Kachel null Pixel hoch. Der Rückfall über padding-bottom erzeugt
 *    dieselben 4:3 auf dem alten Weg.
 * ---------------------------------------------------------------------- */

.vbc-bereich__bild,
.vbc-mannschaft__bild,
.vbc-spielerin__bild,
.vbc-buehne__bild,
.vbc-team__bild,
.vbc-kanal__bild {
	z-index: 0;
}

.vbc-bereich::after,
.vbc-mannschaft__kopf::after,
.vbc-spielerin::after,
.vbc-buehne::after,
.vbc-team a::after,
.vbc-kanal::after {
	z-index: 1;
}

/* Nur die Ebene, nicht die Lage: Kader-, Kanal- und Übersichtskacheln
   setzen ihre Beschriftung mit position: absolute an den unteren Rand.
   Ein pauschales position: relative hat sie nach oben geholt. */
.vbc-spielerin__text,
.vbc-spielerin__stern,
.vbc-team__text,
.vbc-kanal__inhalt {
	z-index: 2;
}

.vbc-bereich__inhalt,
.vbc-mannschaft__inhalt,
.vbc-buehne__inhalt {
	position: relative;
	z-index: 2;
}

@supports not (aspect-ratio: 4 / 3) {
	.vbc-team a,
	.vbc-kanal {
		height: 0;
		padding-bottom: 75%;
	}

	.vbc-spielerin {
		height: 0;
		padding-bottom: 150%;
	}
}