/* Vereinsverwaltung – Frontend */
:root {
	--svv-akzent: #1d5fa8;
	--svv-foto-radius: 50%;
	--svv-grau: #5b6470;
	--svv-rand: #e3e6ea;
}

.svv-grid {
	display: grid;
	grid-template-columns: repeat(var(--svv-spalten, 3), minmax(0, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0;
}

@media (max-width: 900px) {
	.svv-grid { grid-template-columns: repeat(min(var(--svv-spalten, 3), 2), minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.svv-grid { grid-template-columns: 1fr; }
}

/* ---------- Abteilungen ---------- */
.svv-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--svv-rand);
	border-top: 4px solid var(--svv-akzent);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.svv-card-bild img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.svv-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1rem 1.25rem 1.25rem;
}

.svv-card-titel { margin: 0 0 .5rem; font-size: 1.25rem; }
.svv-card-titel a { text-decoration: none; color: inherit; }
.svv-card-text { margin: 0 0 .75rem; color: var(--svv-grau); }

.svv-meta { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .9rem; }
.svv-meta li { margin: .15rem 0; }
.svv-meta span,
.svv-ort span { font-weight: 600; }

.svv-mehr {
	margin-top: auto;
	font-weight: 600;
	color: var(--svv-akzent);
	text-decoration: none;
}
.svv-mehr:hover { text-decoration: underline; }

/* ---------- Vorstand ---------- */
.svv-gremium-titel {
	margin: 2rem 0 0;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--svv-akzent);
}

.svv-person { text-align: center; }

.svv-foto {
	width: 140px;
	height: 140px;
	margin: 0 auto .75rem;
	overflow: hidden;
	border-radius: var(--svv-foto-radius);
	background: var(--svv-rand);
}

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

.svv-initialen {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2.25rem;
	font-weight: 700;
	color: #fff;
	background: var(--svv-akzent);
}

.svv-person .svv-name { margin: 0; font-size: 1.1rem; }
.svv-funktion { margin: .15rem 0 0; font-weight: 600; color: var(--svv-akzent); }
.svv-abteilung, .svv-bis { margin: .15rem 0 0; font-size: .85rem; color: var(--svv-grau); }

.svv-kontakt,
.svv-person .svv-kontakt {
	list-style: none;
	margin: .6rem 0 0;
	padding: 0;
	font-size: .9rem;
	overflow-wrap: anywhere;
}

.svv-kontakt li,
.svv-person .svv-kontakt li {
	margin: .1rem 0;
	padding: 0;
	list-style: none;
	text-align: inherit;
}

.svv-kontakt li::before,
.svv-kontakt li::marker { content: none; }

/* Vorstand: Kontaktdaten zentriert – auch gegen Theme-Regeln für Listen */
.svv-person .svv-kontakt,
.svv-person .svv-kontakt li { text-align: center; }

/* ---------- Trainingsplan ---------- */
.svv-tabelle-wrap { overflow-x: auto; margin: 1.5rem 0; }

.svv-tabelle {
	width: 100%;
	border-collapse: collapse;
}

.svv-tabelle th,
.svv-tabelle td {
	padding: .65rem .85rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--svv-rand);
}

.svv-tabelle thead th {
	color: #fff;
	background: var(--svv-akzent);
}

.svv-tabelle tbody th a { color: inherit; font-weight: 600; }

/* ---------- Einzelansicht Abteilung ---------- */
.svv-single {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

.svv-box {
	padding: 1rem 1.25rem;
	border: 1px solid var(--svv-rand);
	border-left: 4px solid var(--svv-akzent);
	border-radius: 6px;
}

.svv-box h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.svv-box .svv-name { margin: 0; font-weight: 600; }
.svv-box .svv-funktion { font-weight: 400; color: var(--svv-grau); }
.svv-zeiten { margin: 0 0 .5rem; padding-left: 1.2rem; }

/* ---------- Mannschaften ---------- */
.svv-mannschaften-wrap { margin-top: 2rem; }
.svv-mannschaften-wrap > h3 { margin-bottom: 0; }

.svv-team {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--svv-rand);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.svv-team-foto img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.svv-team-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1rem 1.25rem 1.25rem;
}

.svv-team-titel { margin: 0; font-size: 1.15rem; }
.svv-team-liga { margin: .15rem 0 .6rem; font-weight: 600; color: var(--svv-akzent); }
.svv-gremium-titel a { color: inherit; text-decoration: none; }

/* ---------- Kader ---------- */
.svv-kader { margin: .25rem 0 1rem; font-size: .9rem; }
.svv-kader summary { cursor: pointer; font-weight: 600; color: var(--svv-akzent); }
.svv-kader-tabelle { width: 100%; margin-top: .5rem; border-collapse: collapse; }
.svv-kader-tabelle td { padding: .3rem .4rem; border-bottom: 1px solid var(--svv-rand); }
.svv-kader-tabelle .svv-nr { width: 2.5rem; font-weight: 600; color: var(--svv-akzent); text-align: right; }
.svv-kader-tabelle .svv-pos { color: var(--svv-grau); text-align: right; }
.svv-kader-tabelle .svv-sp-fotozelle { width: 44px; }
.svv-kader-tabelle .svv-sp-foto,
.svv-kader-tabelle .svv-sp-initialen {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: var(--svv-foto-radius);
	object-fit: cover;
}
.svv-kader-tabelle .svv-sp-initialen {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
	background: var(--svv-akzent);
}

/* ---------- Spielplan & Ergebnisse ---------- */
.svv-naechstes { margin: 0 0 .75rem; font-size: .9rem; }
.svv-naechstes span { font-weight: 600; }

.svv-spielplan { margin: .25rem 0 1rem; font-size: .9rem; }
.svv-spielplan summary { cursor: pointer; font-weight: 600; color: var(--svv-akzent); }
.svv-spieltabelle { width: 100%; margin-top: .5rem; border-collapse: collapse; }
.svv-spieltabelle td { padding: .3rem .4rem; vertical-align: top; border-bottom: 1px solid var(--svv-rand); }
.svv-sp-datum { white-space: nowrap; color: var(--svv-grau); }
.svv-spieltabelle .svv-sp-erg { text-align: right; white-space: nowrap; }

.svv-ha {
	display: inline-block;
	min-width: 1.4em;
	margin-right: .25em;
	padding: 0 .3em;
	border-radius: 3px;
	font-size: .75rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: var(--svv-akzent);
}
.svv-ha-auswaerts { background: var(--svv-grau); }

.svv-erg {
	display: inline-block;
	padding: .05rem .45rem;
	border-radius: 4px;
	font-weight: 700;
	background: var(--svv-rand);
}
.svv-erg.svv-sieg { color: #0b5d2a; background: #d9f2e1; }
.svv-erg.svv-niederlage { color: #8a1c1c; background: #f9dcdc; }
.svv-erg.svv-remis { color: #4a4f57; background: #e8eaee; }
.svv-info { font-size: .85em; color: var(--svv-grau); }

/* ---------- Kader-Markierung ---------- */
.svv-badge {
	display: inline-block;
	margin-left: .35em;
	padding: 0 .35em;
	border-radius: 3px;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
	color: #fff;
	background: var(--svv-akzent);
}
.svv-badge-cc { background: var(--svv-grau); }
.svv-badge-t { background: #8a6100; }
.svv-legende { margin: .5rem 0 0; font-size: .8rem; color: var(--svv-grau); }

/* Einzelne Mannschaft (eine Spalte) */
.svv-grid.svv-eine-spalte { max-width: 640px; }

/* ---------- Spielerfoto vergrößern ---------- */
.svv-zoom { display: block; line-height: 0; border-radius: var(--svv-foto-radius); cursor: zoom-in; }
.svv-zoom:focus-visible { outline: 2px solid var(--svv-akzent); outline-offset: 2px; }

.svv-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, .85);
}
.svv-lb img {
	max-width: 100%;
	max-height: 80vh;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}
.svv-lb-name { margin: .75rem 0 0; font-weight: 600; color: #fff; }
.svv-lb-close {
	position: absolute;
	top: .75rem;
	right: .75rem;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	font-size: 1.6rem;
	line-height: 1;
	color: #fff;
	background: rgba(255, 255, 255, .2);
	cursor: pointer;
}
.svv-lb-close:hover { background: rgba(255, 255, 255, .35); }
.svv-lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.svv-lb-offen { overflow: hidden; }

.svv-foto .svv-zoom { width: 100%; height: 100%; }
.svv-team-foto .svv-zoom { border-radius: 0; }

/* ---------- Kalender ---------- */
.svv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.svv-farbe-0 { --svv-f: #1d5fa8; }
.svv-farbe-1 { --svv-f: #c2410c; }
.svv-farbe-2 { --svv-f: #0f766e; }
.svv-farbe-3 { --svv-f: #7c3aed; }
.svv-farbe-4 { --svv-f: #be123c; }
.svv-farbe-5 { --svv-f: #4d7c0f; }
.svv-farbe-6 { --svv-f: #a16207; }
.svv-farbe-7 { --svv-f: #475569; }

.svv-kalender { margin: 1.5rem 0; }

.svv-kal-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
}

.svv-kal-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .75rem;
}
.svv-kal-titel { margin: 0; font-size: 1.25rem; }
.svv-kal-nav { display: flex; flex-wrap: wrap; gap: .4rem; }

.svv-kal-nav a,
.svv-kal-knopf {
	display: inline-block;
	padding: .35rem .75rem;
	border: 1px solid var(--svv-rand);
	border-radius: 6px;
	font-size: .9rem;
	color: inherit;
	text-decoration: none;
	background: #fff;
	cursor: pointer;
}
.svv-kal-nav a:hover,
.svv-kal-knopf:hover { color: var(--svv-akzent); border-color: var(--svv-akzent); }

.svv-kal-tabelle { width: 100%; table-layout: fixed; border-collapse: collapse; }
.svv-kal-tabelle th {
	padding: .4rem;
	font-size: .85rem;
	text-align: center;
	color: #fff;
	background: var(--svv-akzent);
}
.svv-kal-tabelle td {
	height: 6.5rem;
	padding: .25rem;
	vertical-align: top;
	border: 1px solid var(--svv-rand);
}
.svv-kal-aus { background: #f6f7f8; }
.svv-kal-heute { background: #fff8e1; }

.svv-kal-nr { display: block; font-size: .8rem; font-weight: 700; color: var(--svv-grau); }
.svv-kal-heute .svv-kal-nr { color: var(--svv-akzent); }

.svv-kal-liste { margin: 0; padding: 0; list-style: none; }
.svv-kal-termin {
	margin: .2rem 0 0;
	padding: .2rem .35rem;
	border-left: 4px solid var(--svv-f, var(--svv-akzent));
	border-radius: 3px;
	font-size: .75rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
	background: #f3f6fa;
}
.svv-kal-zeit { font-weight: 700; }
.svv-kal-team { display: block; font-weight: 600; }
.svv-kal-spiel { display: block; }

.svv-kal-hinweis { margin: .75rem 0 0; color: var(--svv-grau); }

.svv-kal-legende {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	margin: .75rem 0 0;
	padding: 0;
	font-size: .85rem;
	list-style: none;
}
.svv-kal-farbe {
	display: inline-block;
	width: .8rem;
	height: .8rem;
	margin-right: .35rem;
	border-radius: 2px;
	vertical-align: middle;
	background: var(--svv-f);
}

/* Schmale Bildschirme: Kalender wird zur Terminliste, leere Tage entfallen. */
@media (max-width: 700px) {
	.svv-kal-tabelle,
	.svv-kal-tabelle tbody,
	.svv-kal-tabelle tr,
	.svv-kal-tabelle td { display: block; width: auto; }
	.svv-kal-tabelle thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.svv-kal-tabelle td { height: auto; padding: .5rem .25rem; border-width: 0 0 1px; }
	.svv-kal-tabelle td.svv-kal-leer,
	.svv-kal-tabelle td.svv-kal-aus { display: none; }
	.svv-kal-nr::before { content: attr(data-wt) " "; }
	.svv-kal-termin { font-size: .9rem; }
}

/* ---------- Weitere Termine im Kalender ---------- */
.svv-farbe-v { --svv-f: var(--svv-verein, #D2AF0A); }
.svv-kal-event {
	background: #f3f6fa;
	background: color-mix(in srgb, var(--svv-f, #475569) 12%, #fff);
}

/* Terminliste: Monatsüberschriften */
.svv-tabelle .svv-monatszeile th {
	text-align: left;
	color: var(--svv-akzent);
	background: #f3f6fa;
}

/* ---------- Vorstandsübersicht: Karten und Buttons ---------- */
.svv-gremium-titel {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 2.5rem 0 0;
	padding: 0;
	border: 0;
	font-size: 1.4rem;
}
.svv-gremium-titel::after {
	content: "";
	flex: 1;
	height: 2px;
	background: linear-gradient(to right, var(--svv-akzent), transparent);
}

.svv-person {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem 1.25rem 1.25rem;
	border: 1px solid var(--svv-rand);
	border-top: 4px solid var(--svv-akzent);
	border-radius: 12px;
	text-align: center;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	transition: box-shadow .2s ease, transform .2s ease;
}
.svv-person:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
}

.svv-person .svv-foto {
	width: 150px;
	height: 150px;
	margin: 0 auto 1rem;
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--svv-akzent);
}
.svv-person .svv-name { margin: .25rem 0 0; font-size: 1.2rem; line-height: 1.3; }
.svv-person .svv-funktion { margin: .2rem 0 0; }
.svv-person .svv-abteilung { margin: .6rem 0 0; }
.svv-person .svv-bis { margin: .5rem 0 0; }

.svv-aktionen {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	width: 100%;
	margin-top: auto;
	padding-top: 1.1rem;
}

.svv-person .svv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	box-sizing: border-box;
	min-height: 2.5rem;
	padding: .45rem 1rem;
	border: 2px solid var(--svv-akzent);
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--svv-akzent);
	background: transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.svv-person .svv-btn svg { flex: none; width: 1.1em; height: 1.1em; fill: currentColor; }
.svv-person .svv-btn:hover,
.svv-person .svv-btn:focus-visible { color: #fff; background: var(--svv-akzent); text-decoration: none; }
.svv-person .svv-btn:focus-visible { outline: 3px solid var(--svv-akzent); outline-offset: 2px; }

.svv-person .svv-btn-mail { color: #fff; background: var(--svv-akzent); }
.svv-person .svv-btn-mail:hover,
.svv-person .svv-btn-mail:focus-visible { color: #fff; background: var(--svv-akzent); filter: brightness(.88); }

.svv-person .svv-btn-abt {
	min-height: 2rem;
	padding: .2rem .8rem;
	border-color: var(--svv-rand);
	font-size: .8rem;
	color: inherit;
	background: #f3f6fa;
}
.svv-person .svv-btn-abt:hover,
.svv-person .svv-btn-abt:focus-visible { border-color: var(--svv-akzent); }

@media (prefers-reduced-motion: reduce) {
	.svv-person,
	.svv-person .svv-btn { transition: none; }
	.svv-person:hover { transform: none; }
}

/* ---------- Highlight-Termine ---------- */
.svv-hl-stern { margin-right: .25em; color: var(--svv-f, var(--svv-akzent)); }

.svv-kal-highlight {
	border-left-width: 6px;
	background: #e6eef8;
	background: color-mix(in srgb, var(--svv-f, #475569) 28%, #fff);
	box-shadow: 0 0 0 1px var(--svv-f, #475569);
}
.svv-kal-highlight .svv-kal-team { font-size: 1.05em; font-weight: 700; }

.svv-tabelle tr.svv-hl-zeile td {
	background: #eef4fb;
	background: color-mix(in srgb, var(--svv-akzent) 10%, #fff);
}
.svv-tabelle tr.svv-hl-zeile td:first-child { box-shadow: inset 5px 0 0 var(--svv-akzent); }
.svv-tabelle tr.svv-hl-zeile strong { font-size: 1.05em; }

/* ---------- Abteilungs-Logo neben dem Abteilungsbutton ---------- */
.svv-person .svv-abteilung {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
}
.svv-abt-logo {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	color: var(--svv-akzent);
	background: #eef4fb;
	background: color-mix(in srgb, var(--svv-akzent) 12%, #fff);
}
.svv-abt-logo svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }

/* ---------- Abteilung gut sichtbar: Kalendereinträge und Terminliste ---------- */
.svv-farbe-0,
.svv-farbe-1,
.svv-farbe-2,
.svv-farbe-3,
.svv-farbe-4,
.svv-farbe-5,
.svv-farbe-6,
.svv-farbe-7 { --svv-fg: #fff; }
.svv-farbe-v { --svv-fg: var(--svv-verein-fg, #000); }

.svv-kal-termin {
	overflow: hidden;
	border: 1px solid var(--svv-f, var(--svv-akzent));
	background: #f3f6fa;
	background: color-mix(in srgb, var(--svv-f, #475569) 14%, #fff);
}
.svv-kal-termin.svv-kal-highlight { border-width: 2px; }

.svv-kal-abt {
	display: block;
	margin: -.2rem -.35rem .25rem;
	padding: .15rem .35rem;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
	color: var(--svv-fg, #fff);
	background: var(--svv-f, var(--svv-akzent));
}
.svv-kal-highlight .svv-kal-abt { margin: -.2rem -.35rem .25rem; }

.svv-abt-chip {
	display: inline-block;
	margin-right: .4rem;
	padding: .05rem .6rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
	color: var(--svv-fg, #fff);
	background: var(--svv-f, var(--svv-akzent));
}

@media (max-width: 700px) {
	.svv-kal-abt { font-size: .8rem; }
}

/* ---------- Highlight-Termine: deutlich verstärkt ---------- */
.svv-kal-termin.svv-kal-highlight {
	border: 2px solid var(--svv-f, #475569);
	font-size: .8rem;
	color: var(--svv-fg, #fff);
	background: var(--svv-f, #475569);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.svv-kal-highlight .svv-kal-abt {
	color: inherit;
	background: rgba(255, 255, 255, .22);
	background: color-mix(in srgb, var(--svv-fg, #fff) 24%, transparent);
}
.svv-kal-highlight .svv-kal-team { font-size: 1.15em; font-weight: 800; }
.svv-kal-highlight .svv-hl-stern { margin-right: .2em; font-size: 1.1em; color: inherit; }
.svv-kal-highlight .svv-kal-zeit,
.svv-kal-highlight .svv-kal-spiel { color: inherit; }

.svv-tabelle tr.svv-hl-zeile td {
	background: #dbe7f7;
	background: color-mix(in srgb, var(--svv-akzent) 22%, #fff);
	border-top: 2px solid var(--svv-akzent);
	border-bottom: 2px solid var(--svv-akzent);
}
.svv-tabelle tr.svv-hl-zeile td:first-child {
	padding-left: 1.1rem;
	box-shadow: inset 8px 0 0 var(--svv-akzent);
}
.svv-tabelle tr.svv-hl-zeile strong { font-size: 1.15em; }
.svv-hl-badge {
	display: inline-block;
	margin-right: .5rem;
	padding: .05rem .65rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
	color: var(--svv-akzent-fg, #fff);
	background: var(--svv-akzent);
}