/* =========================================================================
   FV Bad Vilbel – eigene Anpassungen
   Diese Datei wird von keinem Update überschrieben.
   Ersetzt die bisherige user.css.

   Inhalt
   1. Seitenbilder pro Rubrik
   2. Bänder und Rasterhilfen
   3. Abschnittsköpfe
   4. Startseiten-Aufmacher
   5. Spielbetrieb: nächste Spiele, letztes Ergebnis
   6. Teaser und Kacheln
   7. Schnelleinstiege
   8. Sponsorenband
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Seitenbilder pro Rubrik
   Seitenklasse im Menüeintrag setzen, hier das Bild hinterlegen.
   ------------------------------------------------------------------------- */

/*
.hero-verein .fv-hero--kopf-1   { --fv-hero-img: url('/images/koepfe/verein.jpg'); }
.hero-senioren .fv-hero--kopf-1 { --fv-hero-img: url('/images/koepfe/senioren.jpg'); }
.hero-junioren .fv-hero--kopf-1 { --fv-hero-img: url('/images/koepfe/junioren.jpg'); }
*/

/* -------------------------------------------------------------------------
   2. Bänder und Rasterhilfen
   ------------------------------------------------------------------------- */

/* Module in den Bändern nebeneinander statt untereinander */
.fv-band > .fv-shell {
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	align-items: start;
}

.fv-band .fv-card { margin-bottom: 0; }

/* Modulklassen-Suffix im Modul eintragen, um die Breite zu steuern */
.fv-full { grid-column: 1 / -1; }

.fv-wide { grid-column: span 2; }

@media (max-width: 767.98px) {
	.fv-wide { grid-column: 1 / -1; }
}

/* Modul ohne Kartenrahmen – für Sponsorenband und Aufmacher */
.fv-plain {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.fv-grid {
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.fv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.fv-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* -------------------------------------------------------------------------
   3. Abschnittskopf: Eyebrow, Überschrift, Link nach rechts
   ------------------------------------------------------------------------- */

.fv-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.2rem;
}

.fv-section-head h2 { margin: 0; }
.fv-section-head .fv-eyebrow { display: block; margin-bottom: .15rem; }

/* -------------------------------------------------------------------------
   4. Startseiten-Aufmacher
   ------------------------------------------------------------------------- */

.fv-start {
	position: relative;
	min-height: clamp(320px, 46vw, 460px);
	display: flex;
	align-items: flex-end;
	background: var(--fv-forest) center / cover no-repeat;
	background-blend-mode: multiply;
	overflow: hidden;
}

.fv-start::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(23, 58, 42, .94) 0%, rgba(23, 58, 42, .55) 55%, rgba(23, 58, 42, .25) 100%);
}

.fv-start__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--fv-shell);
	margin-inline: auto;
	padding: 0 var(--fv-gutter) clamp(1.75rem, 4vw, 2.75rem);
}

.fv-start__title {
	color: #fff;
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	margin: 0 0 .5rem;
	max-width: 16ch;
}

.fv-start__lead {
	color: var(--fv-mint);
	max-width: 48ch;
	font-size: 1.08rem;
	margin-bottom: 1.4rem;
}

.fv-start__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.fv-start .fv-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.fv-start .fv-btn--ghost:hover {
	background: #fff;
	color: var(--fv-forest);
	border-color: #fff;
}

/* -------------------------------------------------------------------------
   5. Spielbetrieb
   ------------------------------------------------------------------------- */

.fv-match {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--fv-line);
}

.fv-match:last-child { border-bottom: 0; padding-bottom: 0; }
.fv-match:first-child { padding-top: 0; }

.fv-match__date {
	font-family: var(--fv-display);
	font-weight: 700;
	line-height: 1.1;
	color: var(--fv-green);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.fv-match__date span {
	display: block;
	font-size: .78rem;
	color: var(--fv-muted);
	letter-spacing: .1em;
}

.fv-match__teams {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--fv-ink);
}

.fv-match__where {
	display: block;
	font-family: var(--fv-body);
	font-weight: 400;
	font-size: .85rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fv-muted);
}

.fv-badge {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: .3rem .6rem;
	border-radius: 5px;
	border: 1.5px solid var(--fv-line-strong);
	color: var(--fv-muted);
	white-space: nowrap;
}

.fv-badge--heim {
	background: var(--fv-green);
	border-color: var(--fv-green);
	color: #fff;
}

/* Letztes Ergebnis */
.fv-score {
	background: var(--fv-forest);
	color: var(--fv-mint);
	border-radius: var(--fv-radius);
	padding: 1.4rem;
	text-align: center;
}

.fv-score .fv-eyebrow { color: var(--fv-mint-soft); }

.fv-score__value {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 7vw, 3.6rem);
	line-height: 1;
	color: #fff;
	margin: .3rem 0;
}

.fv-score__teams { font-size: .95rem; margin: 0; }

.fv-score__next {
	margin: 1rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--fv-forest-line);
	font-size: .88rem;
	color: var(--fv-mint-soft);
}

/* -------------------------------------------------------------------------
   6. Teaser und Kacheln
   ------------------------------------------------------------------------- */

.fv-teaser {
	display: flex;
	flex-direction: column;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease, transform .15s ease;
}

.fv-teaser:hover {
	box-shadow: var(--fv-shadow-lift);
	transform: translateY(-2px);
	color: inherit;
}

.fv-teaser img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.fv-teaser__body { padding: 1rem 1.15rem 1.25rem; }

.fv-teaser__meta {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--fv-green);
	margin-bottom: .3rem;
	display: block;
}

.fv-teaser__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0;
}

.fv-teaser--lead { grid-row: span 2; }
.fv-teaser--lead .fv-teaser__title { font-size: 1.5rem; }

/* -------------------------------------------------------------------------
   7. Schnelleinstiege
   ------------------------------------------------------------------------- */

.fv-quick {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	padding: 1.35rem 1.25rem;
	text-decoration: none;
	color: inherit;
	border-top: 3px solid var(--fv-green);
	transition: box-shadow .15s ease, transform .15s ease;
}

.fv-quick:hover {
	box-shadow: var(--fv-shadow-lift);
	transform: translateY(-2px);
	color: inherit;
}

.fv-quick__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.15rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0;
}

.fv-quick__text {
	font-size: .92rem;
	color: var(--fv-text);
	margin: 0;
}

.fv-quick__more {
	margin-top: auto;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--fv-green);
}

/* -------------------------------------------------------------------------
   8. Sponsorenband
   ------------------------------------------------------------------------- */

.fv-sponsors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: 1.25rem 0 0;
}

.fv-sponsors img {
	max-height: 52px;
	width: auto;
	opacity: .75;
	filter: grayscale(1);
	transition: opacity .15s ease, filter .15s ease;
}

.fv-sponsors a:hover img {
	opacity: 1;
	filter: none;
}

.fv-sponsors__empty {
	width: 100%;
	text-align: center;
	color: var(--fv-muted);
	font-size: .95rem;
}

/* -------------------------------------------------------------------------
   1. Menü waagerecht erzwingen
   Cassiopeia liefert für das Metismenu-Layout flex-direction: column mit.
   Die Richtung wird hier gesetzt, unabhängig davon, welches Menü-Layout
   im Modul eingestellt ist.
   ------------------------------------------------------------------------- */
 
.fv-nav .mod-menu,
.fv-nav .metismenu,
.fv-nav ul.nav,
.fv-nav > ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	width: auto;
}
 
.fv-nav .mod-menu > li {
	display: block;
	margin: 0;
	border: 0;
}
 
/* Metismenu blendet Untermenüs über eine eigene Klasse aus.
   Falls das Modul weiterhin dieses Layout nutzt, greift diese Regel. */
.fv-nav .mm-collapse {
	list-style: none;
	margin: 0;
	padding: .5rem 0;
	min-width: 230px;
}
 
.fv-nav .mm-collapse a {
	display: block;
	padding: .5rem 1.1rem;
	font-family: var(--fv-body);
	font-size: .95rem;
	color: var(--fv-ink);
	text-decoration: none;
}
 
.fv-nav .mm-collapse a:hover {
	background: var(--fv-sand-soft);
	color: var(--fv-green);
}
 
/* -------------------------------------------------------------------------
   2. Aufklapp-Schalter nur auf schmalen Bildschirmen
   ------------------------------------------------------------------------- */
 
.fv-subtoggle { display: none; }
 
/* -------------------------------------------------------------------------
   3. Fanshop-Link im weißen Kopfbereich lesbar machen
   ------------------------------------------------------------------------- */
 
.fv-header .fv-shop {
	color: var(--fv-green);
	border-color: var(--fv-line-strong);
}
 
.fv-header .fv-shop:hover {
	background: var(--fv-green);
	border-color: var(--fv-green);
	color: #fff;
}
 
/* -------------------------------------------------------------------------
   4. Kopfzeile: Menü rechts statt mittig, Logo behält seinen Platz
   ------------------------------------------------------------------------- */
 
@media (min-width: 992px) {
	.fv-header__inner { justify-content: flex-start; }
	.fv-nav { margin-left: auto; }
	.fv-shop--desktop { margin-left: 1.5rem; }
 
	.fv-nav .mod-menu > li.parent > .mod-menu__sub,
	.fv-nav .mod-menu > li.parent > .mm-collapse {
		position: absolute;
		top: 100%;
		left: -.75rem;
		flex-direction: column;
		background: var(--fv-white);
		border: 1px solid var(--fv-line);
		border-radius: var(--fv-radius);
		box-shadow: var(--fv-shadow-lift);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .15s ease, transform .15s ease;
	}
 
	.fv-nav .mod-menu > li.parent:hover > .mod-menu__sub,
	.fv-nav .mod-menu > li.parent:focus-within > .mod-menu__sub,
	.fv-nav .mod-menu > li.parent:hover > .mm-collapse,
	.fv-nav .mod-menu > li.parent:focus-within > .mm-collapse {
		display: block;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}
 
/* -------------------------------------------------------------------------
   5. Mobil: Aufklapp-Schalter wieder einblenden, Menü senkrecht
   ------------------------------------------------------------------------- */
 
@media (max-width: 991.98px) {
	.fv-nav .mod-menu,
	.fv-nav .metismenu,
	.fv-nav ul.nav,
	.fv-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
 
	.fv-nav .mod-menu > li { border-bottom: 1px solid var(--fv-line); }
 
	.fv-subtoggle {
		display: block;
		position: absolute;
		right: 0;
		top: .55rem;
		background: none;
		border: 1px solid var(--fv-line-strong);
		border-radius: 6px;
		width: 34px;
		height: 34px;
		cursor: pointer;
		color: var(--fv-ink);
		line-height: 1;
	}
 
	.fv-nav .mm-collapse { display: none; }
	.fv-nav .mod-menu > li.is-open > .mm-collapse { display: block; }
}
 
/* =========================================================================
   ERWEITERUNG — Chips-Korrektur und Mannschaftsseiten
   Ans ENDE der user.css anhängen.

   1. Chip-Unternavigation waagerecht
   2. Übersicht: Mannschaftskarten
   3. Trainerteam und Ansprechpartner
   4. Kader-Tabelle (fotobereit)
   5. fussball.de-Widgets
   6. Abschnittstrenner
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Chip-Unternavigation — gleicher Metismenu-Fehler wie in der Kopfzeile
   ------------------------------------------------------------------------- */

.fv-subnav ul,
.fv-subnav .mod-menu,
.fv-subnav .metismenu,
.fv-subnav ul.nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	list-style: none;
	margin: 0;
	padding: .85rem 0;
	width: auto;
}

.fv-subnav li {
	margin: 0;
	border: 0;
	width: auto;
	display: block;
}

/* Aufklapp-Schalter gehört nicht in die Chipzeile */
.fv-subnav button { display: none; }

/* -------------------------------------------------------------------------
   2. Mannschaftskarten auf der Übersichtsseite
   ------------------------------------------------------------------------- */

.fv-teamcard {
	display: flex;
	flex-direction: column;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease, transform .15s ease;
}

.fv-teamcard:hover {
	box-shadow: var(--fv-shadow-lift);
	transform: translateY(-2px);
	color: inherit;
}

.fv-teamcard img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var(--fv-sand);
}

.fv-teamcard__body {
	padding: 1rem 1.15rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1;
}

.fv-teamcard__liga {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fv-green);
}

.fv-teamcard__name {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.3rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0;
	line-height: 1.1;
}

.fv-teamcard__meta {
	font-size: .92rem;
	color: var(--fv-muted);
	margin: 0;
}

.fv-teamcard__more {
	margin-top: auto;
	padding-top: .6rem;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--fv-green);
}

/* -------------------------------------------------------------------------
   3. Trainerteam und Ansprechpartner
   ------------------------------------------------------------------------- */

.fv-persons {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.fv-person {
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-left: 3px solid var(--fv-green);
	border-radius: var(--fv-radius);
	padding: 1rem 1.15rem;
}

.fv-person__role {
	display: block;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--fv-muted);
	margin-bottom: .2rem;
}

.fv-person__name {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.15rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0 0 .3rem;
	line-height: 1.15;
}

.fv-person__contact {
	font-size: .92rem;
	margin: 0;
}

.fv-person__contact a { text-decoration: none; }

/* -------------------------------------------------------------------------
   4. Kader
   Die Fotospalte ist schon angelegt und bleibt leer, solange keine Bilder
   vorhanden sind. Sobald die Fotos da sind, nur noch <img> ergänzen.
   ------------------------------------------------------------------------- */

.fv-kader {
	width: 100%;
	border-collapse: collapse;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	overflow: hidden;
}

.fv-kader th {
	background: var(--fv-forest);
	color: #fff;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-align: left;
	padding: .7rem .9rem;
}

.fv-kader td {
	padding: .65rem .9rem;
	border-bottom: 1px solid var(--fv-line);
	vertical-align: middle;
}

.fv-kader tr:last-child td { border-bottom: 0; }
.fv-kader tbody tr:nth-child(even) td { background: var(--fv-sand-soft); }

.fv-kader__nr {
	width: 56px;
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--fv-green);
	text-align: center;
}

.fv-kader__foto {
	width: 64px;
	padding-block: .4rem;
}

.fv-kader__foto img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--fv-sand);
}

.fv-kader__name {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--fv-ink);
}

.fv-kader__pos {
	font-size: .9rem;
	color: var(--fv-muted);
	white-space: nowrap;
}

/* Ab Handy: Fotospalte und Position ausblenden, Name und Nummer reichen */
@media (max-width: 575.98px) {
	.fv-kader__foto { display: none; }
	.fv-kader th:nth-child(2) { display: none; }
}

/* -------------------------------------------------------------------------
   5. fussball.de-Widgets
   Die Widgets bringen eigene Stile mit. Der Rahmen hier sorgt nur dafür,
   dass sie im Raster sitzen und nicht über die Breite hinauslaufen.
   ------------------------------------------------------------------------- */

.fv-widget {
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	padding: 1rem;
	overflow-x: auto;
}

.fv-widget iframe {
	width: 100%;
	max-width: 900px;
	border: 0;
	display: block;
	margin-inline: auto;
}

.fv-widget__note {
	font-size: .82rem;
	color: var(--fv-muted);
	margin: .8rem 0 0;
	text-align: right;
}

.fv-widget__note a { color: var(--fv-muted); }

/* Platzhalter, solange das Widget lokal nicht lädt */
.fv-widget__placeholder {
	display: grid;
	place-items: center;
	min-height: 220px;
	background: var(--fv-sand-soft);
	border: 2px dashed var(--fv-line-strong);
	border-radius: var(--fv-radius);
	color: var(--fv-muted);
	font-family: var(--fv-display);
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-align: center;
	padding: 1rem;
}

/* -------------------------------------------------------------------------
   6. Abschnittstrenner innerhalb eines Beitrags
   ------------------------------------------------------------------------- */

.fv-section {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.fv-section:first-child { margin-top: 0; }

.fv-section > h2 {
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--fv-green);
	display: inline-block;
	margin-bottom: 1.1rem;
}
/* =========================================================================
   ERWEITERUNG 2 — Senioren-Seiten
   Ans ENDE der user.css anhängen.

   1. Sprungziele unter der klebenden Kopfzeile
   2. Mannschaftskarten ohne Bild
   3. Probetraining-Block
   4. Mannschaftskopf: rundes Logo und Mannschaftsfoto
   5. Faktenliste (Trainer, Telefon, E-Mail)
   6. Trainingszeiten
   7. Social-Schaltfläche
   8. Nachrichtenmodule
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Sprungziele
   Ohne das verschwindet das Ziel eines Ankerlinks hinter der Kopfzeile.
   ------------------------------------------------------------------------- */

[id] { scroll-margin-top: 120px; }

/* -------------------------------------------------------------------------
   2. Mannschaftskarten ohne Bild
   ------------------------------------------------------------------------- */

.fv-teamcard--text {
	border-top: 3px solid var(--fv-green);
	padding: 1.35rem 1.4rem 1.5rem;
	gap: .4rem;
	min-height: 100%;
}

.fv-teamcard--text .fv-teamcard__body {
	padding: 0;
	gap: .35rem;
}

.fv-teamcard--text .fv-teamcard__name {
	font-size: 1.45rem;
	margin-bottom: .1rem;
}

.fv-teamcard__note {
	font-size: .92rem;
	color: var(--fv-text);
	margin: .2rem 0 0;
}

/* -------------------------------------------------------------------------
   3. Probetraining
   ------------------------------------------------------------------------- */

.fv-cta {
	background: var(--fv-forest);
	color: var(--fv-mint);
	border-radius: var(--fv-radius);
	padding: clamp(1.4rem, 3vw, 2.2rem);
}

.fv-cta h2 { color: #fff; margin-top: 0; }
.fv-cta p { max-width: 60ch; }
.fv-cta > :last-child { margin-bottom: 0; }

.fv-cta__list {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	margin-top: 1.4rem;
}

.fv-cta__item {
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--fv-forest-line);
	border-radius: var(--fv-radius-sm);
	padding: .9rem 1rem;
}

.fv-cta__team {
	display: block;
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #fff;
	margin-bottom: .2rem;
}

.fv-cta__item a { color: var(--fv-mint); }
.fv-cta__item a:hover { color: #fff; }

/* -------------------------------------------------------------------------
   4. Mannschaftskopf mit rundem Logo und Mannschaftsfoto
   ------------------------------------------------------------------------- */

.fv-teamhead {
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: 1fr;
	align-items: center;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 768px) {
	.fv-teamhead { grid-template-columns: 160px minmax(0, 1fr); }
}

.fv-teamhead__logo {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--fv-white);
	border: 3px solid var(--fv-line);
	padding: .5rem;
	display: block;
	margin-inline: auto;
}

.fv-figure { margin: 0; }

.fv-figure img {
	width: 100%;
	border-radius: var(--fv-radius);
	display: block;
	object-fit: cover;
}

.fv-figure figcaption {
	font-size: .85rem;
	color: var(--fv-muted);
	margin-top: .5rem;
}

/* -------------------------------------------------------------------------
   5. Faktenliste
   ------------------------------------------------------------------------- */

.fv-facts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: .45rem 1.1rem;
	margin: 0;
	align-items: baseline;
}

.fv-facts dt {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--fv-muted);
}

.fv-facts dd {
	margin: 0;
	font-size: 1rem;
	color: var(--fv-ink);
}

.fv-facts dd a { text-decoration: none; }

@media (max-width: 479.98px) {
	.fv-facts { grid-template-columns: 1fr; gap: .1rem; }
	.fv-facts dd { margin-bottom: .6rem; }
}

/* -------------------------------------------------------------------------
   6. Trainingszeiten
   ------------------------------------------------------------------------- */
.fv-times {
	display: inline-flex;
	flex-direction: column;
	gap: .3rem;
	background: var(--fv-sand-soft);
	border-left: 3px solid var(--fv-green);
	border-radius: var(--fv-radius-sm);
	padding: 1rem 1.25rem;
}

.fv-times__row {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--fv-ink);
}

.fv-times__row span {
	color: var(--fv-green);
	margin-right: .5rem;
}


/* -------------------------------------------------------------------------
   7. Social-Schaltfläche
   ------------------------------------------------------------------------- */

.fv-social {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 1.5px solid var(--fv-line-strong);
	border-radius: 999px;
	padding: .6rem 1.1rem;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--fv-green);
	text-decoration: none;
}

.fv-social:hover {
	background: var(--fv-green);
	border-color: var(--fv-green);
	color: #fff;
}

.fv-social svg { width: 18px; height: 18px; fill: currentColor; }

/* -------------------------------------------------------------------------
   8. Nachrichtenmodule
   Deckt die Ausgabe der Artikel-Module in Joomla 4 und 5 ab.
   Modulklasse fv-news im Modul eintragen.
   ------------------------------------------------------------------------- */

.fv-news ul,
.fv-news ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.fv-news li {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	background: var(--fv-sand-soft);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	padding: 1.1rem 1.15rem 1.25rem;
	margin: 0;
}

.fv-news li > a,
.fv-news .mod-articles-category-title,
.fv-news .mod-articles__title a {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--fv-ink);
	text-decoration: none;
}

.fv-news li > a:hover,
.fv-news .mod-articles-category-title:hover { color: var(--fv-green); }

.fv-news .mod-articles-category-date,
.fv-news .mod-articles__date,
.fv-news time {
	order: -1;
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fv-green);
}

.fv-news .mod-articles-category-introtext,
.fv-news .mod-articles__introtext {
	font-size: .92rem;
	color: var(--fv-text);
	margin: 0;
}

.fv-news img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--fv-radius-sm);
	margin-bottom: .3rem;
}

/* Leerer Zustand, falls die Kategorie noch keine Beiträge hat */
.fv-news .fv-news__empty {
	grid-column: 1 / -1;
	color: var(--fv-muted);
	font-size: .95rem;
}
/* =========================================================================
   KORREKTUR 3 — Trainingszeiten und Nachrichtenmodule
   Ans ENDE der user.css anhängen.

   1. Trainingszeiten rutschen neben die Überschrift
   2. Nachrichtenmodule: volle Breite im Band
   3. Nachrichtenmodule: Ausgabe des Moduls "Beiträge" (Joomla 5.1+)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Trainingszeiten
   Die Abschnittsüberschrift ist inline-block, damit die grüne Linie nur
   unter dem Text liegt. Alles Inline-Level danach setzt sich daneben.
   Der Block muss deshalb Block-Level sein.
   ------------------------------------------------------------------------- */

.fv-times {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	width: max-content;
	max-width: 100%;
	background: var(--fv-sand-soft);
	border-left: 3px solid var(--fv-green);
	border-radius: var(--fv-radius-sm);
	padding: 1rem 1.5rem 1rem 1.25rem;
}

.fv-times__row {
	display: flex;
	gap: .75rem;
	align-items: baseline;
}

.fv-times__row span {
	min-width: 8ch;
	margin-right: 0;
}

/* Auch andere Blöcke sollen nach der Überschrift umbrechen */
.fv-section > h2 + * { clear: both; }

.fv-section > .fv-persons,
.fv-section > .fv-grid,
.fv-section > .fv-kader,
.fv-section > .fv-figure,
.fv-section > .fv-cta,
.fv-section > .fv-facts,
.fv-section > table { display: block; }

.fv-section > .fv-persons,
.fv-section > .fv-grid { display: grid; }

.fv-section > .fv-facts { display: grid; }

/* -------------------------------------------------------------------------
   2. Nachrichtenmodule im Band immer über die volle Breite
   Sonst teilen sie sich die Spalten mit dem Sponsorenband und werden schmal.
   ------------------------------------------------------------------------- */

.fv-band__grid > .fv-news,
.fv-band > .fv-shell > .fv-news { grid-column: 1 / -1; }

/* -------------------------------------------------------------------------
   3. Ausgabe des Moduls "Beiträge"
   Joomla 5.1 hat die alten Beitragsmodule durch ein gemeinsames Modul
   ersetzt. Die Klassennamen unterscheiden sich je nach Layout, deshalb
   sind hier alle Varianten abgedeckt.
   ------------------------------------------------------------------------- */

.fv-news ul,
.fv-news ol,
.fv-news .mod-articles,
.fv-news .mod-articles__items,
.fv-news .mod-articles-category {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.fv-news li,
.fv-news .mod-articles__item,
.fv-news .mod-articles-category__item,
.fv-news > .fv-card__body > .mod-articles > div,
.fv-news article {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	background: var(--fv-sand-soft);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	padding: 1.1rem 1.15rem 1.25rem;
	margin: 0;
	list-style: none;
}

/* Titel */
.fv-news li > a,
.fv-news h3,
.fv-news h4,
.fv-news .mod-articles__title,
.fv-news .mod-articles-category-title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--fv-ink);
	text-decoration: none;
	margin: 0;
}

.fv-news h3 a,
.fv-news h4 a,
.fv-news .mod-articles__title a {
	color: inherit;
	text-decoration: none;
}

.fv-news li > a:hover,
.fv-news h3 a:hover,
.fv-news h4 a:hover,
.fv-news .mod-articles-category-title:hover { color: var(--fv-green); }

/* Datum zuerst */
.fv-news time,
.fv-news .mod-articles__date,
.fv-news .mod-articles-category-date,
.fv-news .mod-articles__info {
	order: -1;
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fv-green);
}

/* Einleitungstext */
.fv-news p,
.fv-news .mod-articles__introtext,
.fv-news .mod-articles-category-introtext {
	font-size: .92rem;
	line-height: 1.55;
	color: var(--fv-text);
	margin: 0;
}

.fv-news img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--fv-radius-sm);
	margin-bottom: .3rem;
}

/* "Weiterlesen" ans Ende */
.fv-news .readmore,
.fv-news .mod-articles__readmore {
	margin-top: auto;
	padding-top: .5rem;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.fv-news .readmore a,
.fv-news .mod-articles__readmore a {
	color: var(--fv-green);
	text-decoration: none;
}

.fv-news .fv-news__empty {
	grid-column: 1 / -1;
	color: var(--fv-muted);
	font-size: .95rem;
	margin: 0;
	background: none;
	border: 0;
	padding: 0;
}

/* =========================================================================
   ERWEITERUNG 3 — Junioren
   Ans ENDE der user.css anhängen.

   1. Seitenkopf ohne Foto (typografische Variante)
   2. Werte-Reihe mit Symbolen
   3. Info-Karten (Jugendleitung / Jugendtrainer)
   4. Altersklassen-Raster
   5. Aufruf-Box, mittig
   6. Trainerseite: Mannschaftskarten
   7. Ansprechpartner-Karten mit Foto
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Seitenkopf ohne Foto
   Seitenklasse "hero-gross" im Menüeintrag setzen.
   Größer, mittig, mit weichem Lichtkegel statt Bild.
   ------------------------------------------------------------------------- */

.hero-gross .fv-hero--kopf-1 {
	min-height: clamp(300px, 40vw, 420px);
	align-items: center;
	text-align: center;
	background:
		radial-gradient(ellipse 70% 90% at 50% 15%, rgba(47, 125, 79, .55) 0%, transparent 70%),
		var(--fv-forest);
}

.hero-gross .fv-hero__inner {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero-gross .fv-hero__title {
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	max-width: 18ch;
}

.hero-gross .fv-hero__lead {
	max-width: 54ch;
	font-size: 1.1rem;
}

.hero-gross .breadcrumb { justify-content: center; }

/* -------------------------------------------------------------------------
   2. Werte
   ------------------------------------------------------------------------- */

.fv-values {
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	text-align: center;
}

.fv-value {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
}

.fv-value__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--fv-mint);
	color: var(--fv-forest);
	display: grid;
	place-items: center;
	flex: none;
}

.fv-value__icon svg {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fv-value__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--fv-ink);
	margin: 0;
	line-height: 1.15;
}

.fv-value__text {
	font-size: .95rem;
	color: var(--fv-text);
	margin: 0;
	max-width: 32ch;
}

/* -------------------------------------------------------------------------
   3. Info-Karten
   ------------------------------------------------------------------------- */

.fv-infocard {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-top: 3px solid var(--fv-green);
	border-radius: var(--fv-radius);
	padding: 1.6rem 1.5rem;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease, transform .15s ease;
}

.fv-infocard:hover {
	box-shadow: var(--fv-shadow-lift);
	transform: translateY(-2px);
	color: inherit;
}

.fv-infocard__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--fv-sand);
	color: var(--fv-green);
	display: grid;
	place-items: center;
	margin-bottom: .3rem;
}

.fv-infocard__icon svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fv-infocard__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.35rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0;
	line-height: 1.1;
}

.fv-infocard__text {
	font-size: .95rem;
	color: var(--fv-text);
	margin: 0;
}

.fv-infocard__more {
	margin-top: auto;
	padding-top: .6rem;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .88rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--fv-green);
}

/* -------------------------------------------------------------------------
   4. Altersklassen
   ------------------------------------------------------------------------- */

.fv-ages {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.fv-agecard {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-left: 4px solid var(--fv-green);
	border-radius: var(--fv-radius-sm);
	padding: 1.1rem 1.2rem;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.fv-agecard:hover {
	box-shadow: var(--fv-shadow-lift);
	color: inherit;
}

.fv-agecard__name {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.2rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0;
	line-height: 1.1;
}

.fv-agecard__jg {
	font-size: .9rem;
	color: var(--fv-text);
	margin: 0;
}

.fv-agecard__teams {
	margin-top: .35rem;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fv-green);
}

/* -------------------------------------------------------------------------
   5. Aufruf-Box, mittig
   ------------------------------------------------------------------------- */

.fv-cta--center {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fv-cta--center p { margin-inline: auto; }
.fv-cta--center .fv-btn { margin-top: .6rem; }

.fv-cta .fv-btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--fv-forest);
}

.fv-cta .fv-btn--light:hover {
	background: var(--fv-mint);
	border-color: var(--fv-mint);
	color: var(--fv-forest);
}

/* -------------------------------------------------------------------------
   6. Trainerseite: Mannschaftskarten
   ------------------------------------------------------------------------- */

.fv-squads {
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.fv-squad {
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--fv-shadow);
}

.fv-squad__head {
	background: var(--fv-forest);
	color: #fff;
	padding: .9rem 1.15rem;
}

.fv-squad__name {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0;
	line-height: 1.15;
	color: #fff;
}

.fv-squad__jg {
	display: block;
	font-family: var(--fv-body);
	font-size: .85rem;
	color: var(--fv-mint-soft);
	margin-top: .15rem;
}

.fv-squad__people {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	flex: 1;
}

.fv-squad__person {
	padding: .95rem 1.15rem;
	border-top: 1px solid var(--fv-line);
	border-right: 1px solid var(--fv-line);
}

.fv-squad__person:last-child { border-right: 0; }

.fv-squad__role {
	display: block;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--fv-muted);
}

.fv-squad__person-name {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: .1rem 0 .25rem;
	line-height: 1.15;
}

.fv-squad__tel {
	font-size: .88rem;
	margin: 0;
}

.fv-squad__tel a {
	color: var(--fv-green);
	text-decoration: none;
}

.fv-squad__mail {
	background: var(--fv-sand-soft);
	border-top: 1px solid var(--fv-line);
	padding: .8rem 1.15rem;
	font-size: .9rem;
}

.fv-squad__mail a { text-decoration: none; font-weight: 600; }

.fv-stand {
	font-size: .85rem;
	color: var(--fv-muted);
	margin: 0 0 1.5rem;
}

/* -------------------------------------------------------------------------
   7. Ansprechpartner mit Foto
   ------------------------------------------------------------------------- */

.fv-lead-person {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	padding: 1.4rem;
	align-items: start;
}

@media (min-width: 560px) {
	.fv-lead-person { grid-template-columns: 110px minmax(0, 1fr); }
}

.fv-lead-person__photo {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--fv-sand);
	border: 3px solid var(--fv-line);
	display: block;
}

.fv-lead-person__photo--empty {
	display: grid;
	place-items: center;
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.8rem;
	color: var(--fv-green);
	background: var(--fv-mint);
	border-color: var(--fv-mint);
}

.fv-lead-person__role {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--fv-muted);
	display: block;
}

.fv-lead-person__name {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: .1rem 0 .7rem;
	line-height: 1.1;
}

/* -------------------------------------------------------------------------
   8. Aufklappbare Fragen
   ------------------------------------------------------------------------- */

.fv-faq {
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-sm);
	margin-bottom: .6rem;
	overflow: hidden;
}

.fv-faq summary {
	cursor: pointer;
	list-style: none;
	padding: .95rem 3rem .95rem 1.2rem;
	position: relative;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--fv-ink);
}

.fv-faq summary::-webkit-details-marker { display: none; }

.fv-faq summary::after {
	content: '+';
	position: absolute;
	right: 1.2rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--fv-green);
}

.fv-faq[open] summary::after { content: '–'; }
.fv-faq[open] summary { border-bottom: 1px solid var(--fv-line); }
.fv-faq summary:hover { background: var(--fv-sand-soft); }

.fv-faq p {
	margin: 0;
	padding: 1rem 1.2rem 1.2rem;
	color: var(--fv-text);
}

/* =========================================================================
   ERWEITERUNG 4 — Zwei zusätzliche Seitenkopf-Varianten
   Ans ENDE der user.css anhängen.

   Bisher:
     (leer)   Kopf 1 — dunkelgrün, Trikotstreifen, groß
     kopf-2   Kopf 2 — heller Sandkopf, grüne Deckkante
     kopf-3   Kopf 3 — weiße Kompaktleiste, 88 px

   Neu:
     kopf-2 titel-gruen    Kopf 4 — wie Kopf 2, Überschrift grün
     kopf-kompakt-gruen    Kopf 5 — grüne Kompaktleiste
   ========================================================================= */

/* -------------------------------------------------------------------------
   Kopf 4 — heller Sandkopf mit grüner Überschrift

   Seitenklasse im Menüeintrag:  kopf-2 titel-gruen
   Beide Angaben mit Leerzeichen, kopf-2 muss dabei sein — daran erkennt
   das Template, dass der helle Kopf gebaut werden soll.
   ------------------------------------------------------------------------- */

.titel-gruen .fv-hero--kopf-2 .fv-hero__title {
	color: var(--fv-green);
}

.titel-gruen .fv-hero--kopf-2 .fv-hero__lead {
	color: var(--fv-text);
}

/* -------------------------------------------------------------------------
   Kopf 5 — grüne Kompaktleiste

   Seitenklasse im Menüeintrag:  kopf-kompakt-gruen
   Grundlage ist Kopf 1, deshalb keine weitere Angabe nötig.
   ------------------------------------------------------------------------- */

.kopf-kompakt-gruen .fv-hero--kopf-1 {
	min-height: 96px;
	align-items: center;
}

.kopf-kompakt-gruen .fv-hero__inner {
	padding-block: 1.1rem;
}

.kopf-kompakt-gruen .fv-hero__title {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	margin-top: 0;
}

.kopf-kompakt-gruen .fv-hero__lead {
	font-size: .92rem;
	margin-top: .25rem;
}

/* Streifenmuster dezenter, damit es auf kleiner Fläche nicht unruhig wirkt */
.kopf-kompakt-gruen .fv-hero__stripes {
	background: repeating-linear-gradient(96deg, rgba(255, 255, 255, .03) 0 26px, transparent 26px 52px);
}

/* Brotkrumen enger an die Überschrift */
.kopf-kompakt-gruen .fv-hero .breadcrumb {
	font-size: .72rem;
	margin-bottom: .1rem;
}

/* Ohne Unterzeile reicht noch weniger Höhe */
.kopf-kompakt-gruen .fv-hero--kopf-1:not(:has(.fv-hero__lead)) {
	min-height: 82px;
}

.cf-form button[type="submit"] {
	background: var(--fv-green);
	border-color: var(--fv-green);
	color: #fff;
	border-radius: 999px;
	padding: .7rem 1.3rem;
	font-weight: 600;
}

/* =========================================================================
   ERWEITERUNG 5 — Vereinsseiten
   Ans ENDE der user.css anhängen.

   1. Verein in Zahlen
   2. Vorstandsraster
   3. Zeitleiste
   4. Tabellen mit Überlauf
   5. Download-Kacheln
   6. Hinweiskasten
   7. Postanschrift
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Verein in Zahlen
   ------------------------------------------------------------------------- */

.fv-stats {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(50% - .5rem, 160px), 1fr));
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	padding: 1.5rem;
}

.fv-stat { text-align: center; }

.fv-stat__value {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1;
	color: var(--fv-green);
	margin: 0 0 .25rem;
}

.fv-stat__label {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--fv-muted);
	margin: 0;
}

/* -------------------------------------------------------------------------
   2. Vorstand
   ------------------------------------------------------------------------- */

.fv-board {
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.fv-board__person {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-top: 3px solid var(--fv-green);
	border-radius: var(--fv-radius);
	padding: 1.2rem;
}

.fv-board__photo {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	background: var(--fv-sand);
	display: block;
}

.fv-board__photo--empty {
	display: grid;
	place-items: center;
	background: var(--fv-mint);
	color: var(--fv-forest);
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: .02em;
}

.fv-board__role {
	display: block;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .11em;
	color: var(--fv-muted);
}

.fv-board__name {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.2rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: .1rem 0 .5rem;
	line-height: 1.1;
}

.fv-board__contact {
	font-size: .9rem;
	margin: 0;
	line-height: 1.7;
	word-break: break-word;
}

.fv-board__contact a { text-decoration: none; }
.fv-board__contact span { color: var(--fv-muted); }

/* -------------------------------------------------------------------------
   3. Zeitleiste
   ------------------------------------------------------------------------- */

.fv-timeline {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.5rem;
	list-style: none;
	border-left: 2px solid var(--fv-line-strong);
}

.fv-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: .15rem;
	padding: 0 0 1.4rem;
}

.fv-timeline__item:last-child { padding-bottom: 0; }

.fv-timeline__item::before {
	content: '';
	position: absolute;
	left: calc(-1.5rem - 6px);
	top: .45rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--fv-green);
	border: 2px solid var(--fv-sand);
}

.fv-timeline__year {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .06em;
	color: var(--fv-green);
}

.fv-timeline__text {
	margin: 0;
	color: var(--fv-text);
}

/* Ab Tablet: Jahr links neben dem Text */
@media (min-width: 768px) {
	.fv-timeline__item {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 0 1.5rem;
		align-items: baseline;
	}

	.fv-timeline__year { text-align: right; font-size: 1.1rem; }
}

/* Wichtige Ereignisse hervorheben: Klasse fv-timeline__item--mark ergänzen */
.fv-timeline__item--mark::before {
	width: 14px;
	height: 14px;
	left: calc(-1.5rem - 8px);
	background: var(--fv-forest);
}

.fv-timeline__item--mark .fv-timeline__text { font-weight: 600; color: var(--fv-ink); }

/* -------------------------------------------------------------------------
   4. Tabellen mit Überlauf
   ------------------------------------------------------------------------- */

.fv-tablewrap {
	overflow-x: auto;
	border-radius: var(--fv-radius);
	border: 1px solid var(--fv-line);
}

.fv-tablewrap table { border: 0; margin: 0; }
.fv-tablewrap td:last-child { color: var(--fv-muted); white-space: nowrap; }

/* -------------------------------------------------------------------------
   5. Download-Kacheln
   ------------------------------------------------------------------------- */

.fv-downloads {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.fv-download {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	padding: 1.1rem 1.2rem;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.fv-download:hover {
	box-shadow: var(--fv-shadow-lift);
	border-color: var(--fv-green);
	color: inherit;
}

.fv-download__icon {
	width: 46px;
	height: 46px;
	border-radius: var(--fv-radius-sm);
	background: var(--fv-mint);
	color: var(--fv-forest);
	display: grid;
	place-items: center;
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .06em;
}

.fv-download__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0;
	line-height: 1.15;
}

.fv-download__meta {
	font-size: .85rem;
	color: var(--fv-muted);
	margin: .15rem 0 0;
}

/* -------------------------------------------------------------------------
   6. Hinweiskasten
   ------------------------------------------------------------------------- */

.fv-note {
	background: var(--fv-sand-soft);
	border-left: 3px solid var(--fv-green);
	border-radius: var(--fv-radius-sm);
	padding: 1rem 1.25rem;
	font-size: .95rem;
	color: var(--fv-text);
}

.fv-note > :last-child { margin-bottom: 0; }
.fv-note strong { color: var(--fv-ink); }

/* -------------------------------------------------------------------------
   7. Postanschrift
   ------------------------------------------------------------------------- */

.fv-address {
	font-style: normal;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	padding: 1.2rem 1.35rem;
	line-height: 1.7;
	display: inline-block;
}

.fv-address strong {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	display: block;
	margin-bottom: .3rem;
}

/* =========================================================================
   ERWEITERUNG 6 — Kontakt, Anfahrt, Sportanlage
   Ans ENDE der user.css anhängen.

   1. Öffnungszeiten
   2. Anreise-Karten
   3. Statische Karte
   4. Sportanlagen
   5. Bildraster
   6. Merkmal-Chips
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Öffnungszeiten
   ------------------------------------------------------------------------- */

.fv-hours {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: .5rem 1.5rem;
	margin: 0;
	background: var(--fv-sand-soft);
	border-left: 3px solid var(--fv-green);
	border-radius: var(--fv-radius-sm);
	padding: 1.1rem 1.4rem;
	width: max-content;
	max-width: 100%;
}

.fv-hours dt {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--fv-ink);
}

.fv-hours dd {
	margin: 0;
	color: var(--fv-text);
}

.fv-hours .fv-hours--closed { color: var(--fv-muted); }

/* -------------------------------------------------------------------------
   2. Anreise
   ------------------------------------------------------------------------- */

.fv-routes {
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.fv-route {
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-top: 3px solid var(--fv-green);
	border-radius: var(--fv-radius);
	padding: 1.4rem 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.fv-route__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--fv-mint);
	color: var(--fv-forest);
	display: grid;
	place-items: center;
	flex: none;
}

.fv-route__icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fv-route__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0;
	line-height: 1.1;
}

.fv-route p {
	margin: 0;
	font-size: .95rem;
}

.fv-route p + p { margin-top: .6rem; }

.fv-route__hint {
	margin-top: auto;
	padding-top: .8rem;
	font-size: .88rem;
	color: var(--fv-muted);
	border-top: 1px solid var(--fv-line);
}

.fv-route__hint strong { color: var(--fv-ink); }

/* -------------------------------------------------------------------------
   3. Statische Karte
   Kein eingebettetes Karten-iFrame — das überträgt die IP jedes Besuchers
   an den Kartenanbieter. Stattdessen ein Bild mit Link.
   ------------------------------------------------------------------------- */

.fv-map {
	margin: 0;
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	overflow: hidden;
	background: var(--fv-white);
}

.fv-map img {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.fv-map figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .9rem 1.15rem;
	font-size: .85rem;
	color: var(--fv-muted);
	border-top: 1px solid var(--fv-line);
}

.fv-map figcaption a { color: var(--fv-muted); }
.fv-map figcaption .fv-btn { font-size: .88rem; padding: .5rem 1rem; }

/* -------------------------------------------------------------------------
   4. Sportanlagen
   ------------------------------------------------------------------------- */

.fv-venue {
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	overflow: hidden;
	margin-bottom: var(--fv-gap);
}

.fv-venue__head {
	background: var(--fv-forest);
	color: #fff;
	padding: 1rem 1.3rem;
}

.fv-venue__name {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.35rem;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	line-height: 1.1;
}

.fv-venue__sub {
	display: block;
	font-family: var(--fv-body);
	font-size: .88rem;
	color: var(--fv-mint-soft);
	margin-top: .15rem;
}

.fv-venue__body { padding: 1.3rem; }
.fv-venue__body > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   5. Bildraster
   Ein großes Bild, darunter zwei kleine. Ohne Zusatzerweiterung:
   Ein Klick öffnet das Bild in voller Größe im neuen Tab.
   ------------------------------------------------------------------------- */

.fv-gallery {
	display: grid;
	gap: .6rem;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 1.3rem;
}

.fv-gallery a {
	display: block;
	overflow: hidden;
	border-radius: var(--fv-radius-sm);
	background: var(--fv-sand);
	line-height: 0;
}

.fv-gallery a:first-child { grid-column: 1 / -1; }

.fv-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}

.fv-gallery a:first-child img { aspect-ratio: 16 / 9; }
.fv-gallery a:not(:first-child) img { aspect-ratio: 4 / 3; }

.fv-gallery a:hover img { transform: scale(1.03); }

/* Nur ein Bild vorhanden: volle Breite */
.fv-gallery--single { grid-template-columns: 1fr; }

/* Platzhalter, solange keine Fotos da sind */
.fv-gallery__placeholder {
	grid-column: 1 / -1;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: var(--fv-sand-soft);
	border: 2px dashed var(--fv-line-strong);
	border-radius: var(--fv-radius-sm);
	color: var(--fv-muted);
	font-family: var(--fv-display);
	font-size: .88rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-align: center;
	padding: 1rem;
}

/* -------------------------------------------------------------------------
   6. Merkmal-Chips
   ------------------------------------------------------------------------- */

.fv-chiplist {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
}

.fv-chiplist li {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--fv-forest);
	background: var(--fv-mint);
	border-radius: 999px;
	padding: .32rem .8rem;
}

/* =========================================================================
   ERWEITERUNG 7 — Mach mit
   Ans ENDE der user.css anhängen.

   1. Aufgaben-Karten mit Zeitangabe
   2. Nummerierte Schrittfolge
   3. Termin-Zeilen (Feriencamps)
   4. Häkchenliste
   5. Packliste
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Aufgaben-Karten
   ------------------------------------------------------------------------- */

.fv-roles {
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.fv-role {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-left: 4px solid var(--fv-green);
	border-radius: var(--fv-radius);
	padding: 1.3rem 1.35rem 1.4rem;
}

.fv-role__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.2rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0;
	line-height: 1.15;
}

.fv-role__text {
	font-size: .95rem;
	color: var(--fv-text);
	margin: 0;
}

.fv-role__time {
	margin-top: auto;
	padding-top: .8rem;
	border-top: 1px solid var(--fv-line);
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fv-green);
}

/* -------------------------------------------------------------------------
   2. Nummerierte Schrittfolge
   ------------------------------------------------------------------------- */

.fv-steps {
	list-style: none;
	counter-reset: fvstep;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.fv-steps li {
	counter-increment: fvstep;
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 1.1rem;
	align-items: start;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	padding: 1.15rem 1.3rem;
}

.fv-steps li::before {
	content: counter(fvstep);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--fv-forest);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1;
}

.fv-steps__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.1rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0 0 .25rem;
	line-height: 1.15;
}

.fv-steps p { margin: 0; font-size: .95rem; }

/* -------------------------------------------------------------------------
   3. Termine
   ------------------------------------------------------------------------- */

.fv-camps {
	display: grid;
	gap: 1rem;
}

.fv-camp {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	gap: 1.2rem;
	align-items: center;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	padding: 1.15rem 1.3rem;
}

@media (max-width: 639.98px) {
	.fv-camp {
		grid-template-columns: 1fr;
		gap: .7rem;
	}
}

.fv-camp__date {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.15;
	color: var(--fv-green);
	text-transform: uppercase;
	letter-spacing: .02em;
}

.fv-camp__date span {
	display: block;
	font-size: .76rem;
	color: var(--fv-muted);
	letter-spacing: .1em;
}

.fv-camp__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: 1.15rem;
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0 0 .2rem;
	line-height: 1.15;
}

.fv-camp__meta {
	font-size: .92rem;
	color: var(--fv-muted);
	margin: 0;
}

.fv-camp__action {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
}

.fv-status {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: .3rem .7rem;
	border-radius: 999px;
	white-space: nowrap;
}

.fv-status--offen {
	background: var(--fv-mint);
	color: var(--fv-forest);
}

.fv-status--wenige {
	background: #fdf1d8;
	color: #8a5a10;
}

.fv-status--voll {
	background: var(--fv-sand);
	color: var(--fv-muted);
}

/* -------------------------------------------------------------------------

/* =========================================================================
   ERWEITERUNG 8 — Startseite, Kopf- und Fußzeile
   Ans ENDE der user.css anhängen.

   1. Servicezeile: Fanshop raus, Symbole rein
   2. Fanshop-Band
   3. Social-Leiste am Seitenrand
   4. Social-Zeile zum Einbauen
   5. Fußzeile aufgeräumt
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Servicezeile
   Der Fanshop steht schon in der Kopfzeile — in der Servicezeile blenden
   wir ihn aus, statt ihn im Template zu entfernen.
   ------------------------------------------------------------------------- */

.fv-service .fv-shop { display: none; }

.fv-service__links {
	gap: .85rem;
}

.fv-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--fv-forest-line);
	color: var(--fv-mint);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.fv-social-icon svg { width: 15px; height: 15px; fill: currentColor; }

.fv-service .fv-social-icon:hover {
	background: var(--fv-mint);
	border-color: var(--fv-mint);
	color: var(--fv-forest);
}

/* Variante mit Beschriftung, falls Symbole allein zu knapp wirken */
.fv-social-icon--text {
	width: auto;
	border-radius: 999px;
	padding: .15rem .75rem;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* -------------------------------------------------------------------------
   2. Fanshop-Band
   ------------------------------------------------------------------------- */

.fv-shopband {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease;
}

.fv-shopband:hover { box-shadow: var(--fv-shadow-lift); color: inherit; }

@media (min-width: 768px) {
	.fv-shopband { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.fv-shopband__media { order: 1; }
}

.fv-shopband__media {
	background: var(--fv-sand);
	line-height: 0;
}

.fv-shopband__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
	.fv-shopband__media img { aspect-ratio: auto; min-height: 260px; }
}

.fv-shopband__body {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .7rem;
}

.fv-shopband__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem);
	text-transform: uppercase;
	color: var(--fv-ink);
	margin: 0;
	line-height: 1.05;
}

.fv-shopband__text {
	font-size: 1rem;
	color: var(--fv-text);
	margin: 0;
	max-width: 42ch;
}

.fv-shopband__cta {
	margin-top: .5rem;
	align-self: flex-start;
}

/* -------------------------------------------------------------------------
   3. Social-Leiste am Seitenrand
   Nur auf breiten Bildschirmen, links, damit sie der Zurück-nach-oben-
   Schaltfläche rechts nicht in die Quere kommt.
   ------------------------------------------------------------------------- */

.fv-socialrail { display: none; }

@media (min-width: 1360px) {
	.fv-socialrail {
		display: flex;
		flex-direction: column;
		gap: .6rem;
		position: fixed;
		left: 1.25rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 40;
	}

	.fv-socialrail a {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--fv-white);
		border: 1px solid var(--fv-line-strong);
		color: var(--fv-muted);
		transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	}

	.fv-socialrail a:hover {
		background: var(--fv-green);
		border-color: var(--fv-green);
		color: #fff;
	}

	.fv-socialrail svg { width: 18px; height: 18px; fill: currentColor; }
}

/* -------------------------------------------------------------------------
   4. Social-Zeile zum Einbauen
   ------------------------------------------------------------------------- */

.fv-social-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
}

.fv-social-inline__label {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--fv-muted);
	margin-right: .3rem;
}

.fv-social-inline a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--fv-line-strong);
	color: var(--fv-green);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.fv-social-inline a:hover {
	background: var(--fv-green);
	border-color: var(--fv-green);
	color: #fff;
}

.fv-social-inline svg { width: 18px; height: 18px; fill: currentColor; }

/* Auf dunklem Grund (Fußzeile) */
.fv-footer .fv-social-inline a {
	border-color: var(--fv-forest-line);
	color: var(--fv-mint);
}

.fv-footer .fv-social-inline a:hover {
	background: var(--fv-mint);
	border-color: var(--fv-mint);
	color: var(--fv-forest);
}

.fv-footer .fv-social-inline__label { color: var(--fv-mint-soft); }

/* -------------------------------------------------------------------------
   5. Fußzeile
   ------------------------------------------------------------------------- */

.fv-footer__grid {
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-bottom: 2.5rem;
}

.fv-footer__col p { margin-bottom: .8rem; }
.fv-footer__col > :last-child { margin-bottom: 0; }

.fv-footer__head {
	font-size: .92rem;
	letter-spacing: .1em;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--fv-forest-line);
}

.fv-footer li { margin-bottom: .55rem; }

.fv-footer__logo {
	width: 54px;
	height: 54px;
	margin-bottom: .9rem;
	display: block;
}
.adresse {
    display: flex;
    align-items: center;
    gap: 15px;
}

.adresse img {
    flex-shrink: 0;
}


/* Untere Zeile: Copyright links, Gestaltung rechts */
.fv-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
}

.fv-footer__credit { color: var(--fv-mint-soft); }
.fv-footer__credit a { color: var(--fv-mint-soft); text-decoration: none; }
.fv-footer__credit a:hover { color: #fff; text-decoration: underline; }



/* ------------------------------------------------------------------------
   4. Häkchenliste
   ------------------------------------------------------------------------- */

.fv-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.fv-checklist li {
	position: relative;
	padding-left: 2rem;
	color: var(--fv-text);
}

.fv-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .35em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--fv-green);
}

.fv-checklist li::after {
	content: '';
	position: absolute;
	left: 5px;
	top: calc(.35em + 5px);
	width: 8px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

.fv-checklist strong { color: var(--fv-ink); }

/* Auf dunklem Grund */
.fv-cta .fv-checklist li { color: var(--fv-mint); }
.fv-cta .fv-checklist strong { color: #fff; }
.fv-cta .fv-checklist li::before { background: var(--fv-mint); }
.fv-cta .fv-checklist li::after { border-color: var(--fv-forest); }

/* -------------------------------------------------------------------------
   5. Packliste
   ------------------------------------------------------------------------- */

.fv-packlist {
	display: grid;
	gap: .6rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.fv-packlist li {
	background: var(--fv-sand-soft);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-sm);
	padding: .7rem .9rem;
	font-size: .95rem;
	color: var(--fv-ink);
}

/* =========================================================================
   ERWEITERUNG 9 — Ehrenamt-Ausschreibungen und neue Nachrichtenkarten
   Ans ENDE der user.css anhängen.

   1. Ausschreibungsblock
   2. Profil- und Möglichkeiten-Listen
   3. Aktuell-gesucht-Leiste
   4. Nachrichtenkarten neu
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Ausschreibungsblock
   ------------------------------------------------------------------------- */

.fv-job {
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius);
	overflow: hidden;
	margin-bottom: var(--fv-gap);
}

.fv-job__head {
	background: var(--fv-forest);
	color: #fff;
	padding: 1.2rem 1.5rem;
}

.fv-job__eyebrow {
	display: block;
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--fv-mint-soft);
	margin-bottom: .2rem;
}

.fv-job__title {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	line-height: 1.1;
}

.fv-job__body { padding: clamp(1.3rem, 3vw, 1.8rem); }
.fv-job__body > :last-child { margin-bottom: 0; }

.fv-job__hook {
	font-family: var(--fv-display);
	font-weight: 600;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--fv-green);
	line-height: 1.2;
	margin: 0 0 .9rem;
}

/* -------------------------------------------------------------------------
   2. Profil und Möglichkeiten nebeneinander
   ------------------------------------------------------------------------- */

.fv-job__cols {
	display: grid;
	gap: var(--fv-gap);
	grid-template-columns: 1fr;
	margin: 1.5rem 0;
}

@media (min-width: 768px) {
	.fv-job__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fv-joblist {
	background: var(--fv-sand-soft);
	border-radius: var(--fv-radius-sm);
	padding: 1.2rem 1.4rem;
}

.fv-joblist h3 {
	font-size: 1rem;
	letter-spacing: .08em;
	color: var(--fv-ink);
	margin: 0 0 .8rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--fv-line-strong);
}

.fv-joblist ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.fv-joblist li {
	position: relative;
	padding-left: 1.4rem;
	font-size: .95rem;
	color: var(--fv-text);
}

.fv-joblist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fv-green);
}

/* Verschachtelte Aufzählung, z. B. Betreuer Senioren / Junioren / Frauen */
.fv-joblist li ul {
	margin-top: .45rem;
	gap: .35rem;
}

.fv-joblist li li {
	font-size: .9rem;
	color: var(--fv-muted);
	padding-left: 1.1rem;
}

.fv-joblist li li::before {
	width: 5px;
	height: 5px;
	background: var(--fv-line-strong);
}

.fv-joblist--optional li::before { background: var(--fv-line-strong); }

/* -------------------------------------------------------------------------
   3. Aktuell gesucht
   ------------------------------------------------------------------------- */

.fv-wanted {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	background: var(--fv-mint);
	border-radius: var(--fv-radius-sm);
	padding: 1rem 1.3rem;
	margin: 1.5rem 0;
}

.fv-wanted__label {
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--fv-forest);
	white-space: nowrap;
}

.fv-wanted p {
	margin: 0;
	color: var(--fv-forest);
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   4. Nachrichtenkarten neu
   Weiße Karte, grüne Oberkante, Bild oben, Datum mit Marke,
   Titel wächst beim Überfahren nicht, sondern färbt sich.
   ------------------------------------------------------------------------- */

.fv-news ul,
.fv-news ol,
.fv-news .mod-articles,
.fv-news .mod-articles__items,
.fv-news .mod-articles-category {
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.fv-news li,
.fv-news .mod-articles__item,
.fv-news .mod-articles-category__item,
.fv-news article {
	position: relative;
	background: var(--fv-white);
	border: 1px solid var(--fv-line);
	border-top: 3px solid var(--fv-green);
	border-radius: var(--fv-radius);
	padding: 0;
	overflow: hidden;
	gap: 0;
	transition: box-shadow .18s ease, transform .18s ease;
}

.fv-news li:hover,
.fv-news .mod-articles__item:hover,
.fv-news article:hover {
	box-shadow: var(--fv-shadow-lift);
	transform: translateY(-3px);
}

/* Bild randlos oben */
.fv-news img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
	display: block;
}

/* Alles außer dem Bild bekommt Innenabstand */
.fv-news li > *:not(img):not(picture),
.fv-news .mod-articles__item > *:not(img):not(picture),
.fv-news article > *:not(img):not(picture) {
	padding-inline: 1.2rem;
}

.fv-news li > *:not(img):not(picture):first-child,
.fv-news article > *:not(img):not(picture):first-child {
	padding-top: 1.2rem;
}

/* Streifenmuster statt Bild, wenn der Beitrag keins hat */
/*.fv-news li:not(:has(img))::before,
.fv-news .mod-articles__item:not(:has(img))::before,*/
.fv-news article:not(:has(img))::before {
	content: '';
	display: block;
	height: 72px;
	background:
		repeating-linear-gradient(96deg, rgba(47, 125, 79, .10) 0 14px, transparent 14px 28px),
		var(--fv-sand-soft);
	border-bottom: 1px solid var(--fv-line);
	margin-bottom: 1.1rem;
}

/* Datum mit kleiner Marke */
.fv-news time,
.fv-news .mod-articles__date,
.fv-news .mod-articles-category-date,
.fv-news .mod-articles__info {
	order: -1;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--fv-display);
	font-weight: 700;
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--fv-green);
	margin-bottom: .45rem;
	padding-top: 1.1rem;
}

.fv-news time::before,
.fv-news .mod-articles__date::before,
.fv-news .mod-articles-category-date::before {
	content: '';
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: var(--fv-green);
	flex: none;
}

/* Titel */
.fv-news li > a,
.fv-news h3,
.fv-news h4,
.fv-news .mod-articles__title,
.fv-news .mod-articles-category-title {
	font-size: 1.15rem;
	line-height: 1.12;
	margin-bottom: .5rem;
	transition: color .15s ease;
}

.fv-news li:hover h3,
.fv-news li:hover h4,
.fv-news li:hover > a,
.fv-news article:hover h3 { color: var(--fv-green); }

/* Einleitungstext */
.fv-news p,
.fv-news .mod-articles__introtext,
.fv-news .mod-articles-category-introtext {
	font-size: .93rem;
	line-height: 1.55;
	color: var(--fv-text);
	margin-bottom: 1rem;
}

/* Weiterlesen als Fußzeile der Karte */
.fv-news .readmore,
.fv-news .mod-articles__readmore {
	margin-top: auto;
	padding-block: .8rem 1.1rem;
	border-top: 1px solid var(--fv-line);
	font-size: .82rem;
}

.fv-news .readmore a::after,
.fv-news .mod-articles__readmore a::after {
	content: ' →';
}

/* Die gesamte Karte klickbar wirken lassen */
.fv-news li a { text-decoration: none; }