/* VfL Nauen Frauen – Team-App (Mein Bereich) und Team-Reiter der Verwaltung */
.vfl-app, .vfl-v {
	--b: #0B3B8C; --bd: #072A66; --bm: #1F5BC4; --bh: #E8EFFA; --t: #14213D; --g: #5B6B85; --l: #D7E0EE; --pink: #2D7FF9; --gruen: #1A8F5A; --gelb: #F4B400; --rot: #C0392B;
}
.vfl-app { position: relative; color: var(--t); font-size: 15.5px; padding-bottom: 20px; }
.vfl-app *, .vfl-app *::before, .vfl-app *::after { box-sizing: border-box; }
body:has(.vfl-app) .wp-block-post-title { display: none; }
body:has(.vfl-app) main.vfl-schmal { padding-top: 18px !important; }

/* ---------- Navigation */
.vfl-app-nav { position: sticky; top: 10px; z-index: 30; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin: 0 0 18px; padding: 6px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--l); border-radius: 20px; box-shadow: 0 10px 30px rgba(7, 42, 102, .10); }
.vfl-app-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; border-radius: 14px; color: var(--g) !important; text-decoration: none !important; font-size: 12px; font-weight: 800; letter-spacing: .01em; transition: background .2s, color .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.vfl-app-nav a:active { transform: scale(.94); }
.vfl-app-nav a.ist-aktiv { background: var(--b); color: #fff !important; box-shadow: 0 6px 16px rgba(11, 59, 140, .3); }
.vfl-app-nav svg { transition: transform .25s cubic-bezier(.2, .7, .2, 1.4); }
.vfl-app-nav a.ist-aktiv svg { transform: translateY(-1px) scale(1.08); }
.vfl-abzeichen { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 900; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; font-style: normal; }
@media (max-width: 782px) {
	.vfl-app { padding-bottom: 96px; }
	.vfl-app-nav { position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; border-bottom: 0; box-shadow: 0 -8px 30px rgba(7, 42, 102, .14); }
	body:has(.vfl-app) .vfl-demo-band { font-size: 12px; }
	body:has(.vfl-app) footer.wp-block-template-part { padding-bottom: 80px; }
}

/* ---------- Kopf & Hinweise */
.vfl-app-kopf { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.vfl-app-kopf .vfl-avatar { width: 56px; height: 56px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pink); }
.vfl-app-kopf small { color: var(--g); font-weight: 700; }
.vfl-app-kopf h2 { margin: 0; font-size: 1.7rem; font-weight: 900; font-style: italic; color: var(--bd); line-height: 1.1; }
.vfl-glocke { position: relative; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--l); color: var(--bd) !important; }
.vfl-glocke .vfl-abzeichen { top: -2px; left: auto; right: -2px; }
.vfl-app-hinweise { display: grid; gap: 8px; margin: 0 0 18px; }
.vfl-hinweis { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; text-decoration: none !important; color: var(--t) !important; font-weight: 700; animation: vfl-rein .4s both; }
.vfl-hinweis b { font-size: 1.15rem; font-weight: 900; }
.vfl-hinweis em { margin-left: auto; font-style: normal; font-size: 1.4rem; opacity: .5; }
.vfl-hinweis--gelb { background: #FFF4D6; }
.vfl-hinweis--pink { background: color-mix(in srgb, var(--pink) 12%, #fff); }
.vfl-hinweis--pink b { color: var(--pink); }
.vfl-hinweis--app { background: linear-gradient(120deg, var(--b), var(--bm)); color: #fff !important; padding-right: 42px; }
.vfl-hinweis--app a { margin-left: auto; color: #fff !important; white-space: nowrap; }
.vfl-hinweis-zu { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 18px; cursor: pointer; }

.vfl-app-block { margin: 0 0 22px; }
.vfl-app-block > h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 1.1rem; font-weight: 900; color: var(--bd); }
.vfl-app-block > h3 a { font-size: 13px; font-weight: 800; color: var(--pink) !important; text-decoration: none; }
.vfl-app-titel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.vfl-app-titel h2 { margin: 0; font-size: 1.8rem; font-weight: 900; font-style: italic; color: var(--bd); }
.vfl-leer-zeile { color: var(--g); padding: 14px 16px; background: #fff; border: 1px dashed var(--l); border-radius: 14px; list-style: none; }
.vfl-zurueck { display: inline-block; margin: 0 0 10px; font-weight: 800; text-decoration: none; color: var(--b) !important; }
.vfl-klein { font-size: 13px; color: var(--g); }
.vfl-knopf--klein { width: auto; min-height: 38px; padding: 7px 16px; font-size: 14px; }
.vfl-knoepfe-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
.vfl-monat { margin: 18px 0 8px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--pink); }

/* ---------- Filter-Chips */
.vfl-filter-chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 8px; padding-bottom: 4px; scrollbar-width: none; }
.vfl-filter-chips a { flex: none; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--l); font-weight: 800; font-size: 13.5px; text-decoration: none; color: var(--bd) !important; }
.vfl-filter-chips a.ist-aktiv { background: var(--bd); border-color: var(--bd); color: #fff !important; }
.vfl-filter-chips .vfl-chip-rechts { margin-left: auto; }

/* ---------- Terminkarte */
.vfl-termin { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 0 0 10px; padding: 12px 12px 12px 14px; background: #fff; border: 1px solid var(--l); border-radius: 18px; box-shadow: 0 4px 16px rgba(7, 42, 102, .05); overflow: hidden; animation: vfl-rein .4s both; transition: box-shadow .2s, transform .2s; }
.vfl-termin::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--typ); }
.vfl-termin:hover { box-shadow: 0 10px 26px rgba(7, 42, 102, .10); }
.vfl-termin.ohne-antwort { border-color: color-mix(in srgb, var(--pink) 35%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 10%, transparent); }
.vfl-termin.ist-abgesagt { opacity: .6; }
.vfl-termin.ist-abgesagt strong { text-decoration: line-through; }
.vfl-termin-link { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; text-decoration: none !important; color: inherit !important; min-width: 0; }
.vfl-termin-datum { display: grid; justify-items: center; padding: 6px 0; border-radius: 12px; background: var(--bh); color: var(--bd); line-height: 1.05; }
.vfl-termin-datum b { font-size: 1.45rem; font-weight: 900; }
.vfl-termin-datum span { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.vfl-termin-datum small { font-size: 11px; color: var(--g); font-weight: 700; }
.vfl-termin--spiel .vfl-termin-datum { background: color-mix(in srgb, var(--pink) 12%, #fff); color: color-mix(in srgb, var(--pink) 70%, #000); }
.vfl-termin--event .vfl-termin-datum { background: #E2F4EA; color: #0E5A37; }
.vfl-termin-text { display: grid; gap: 1px; min-width: 0; }
.vfl-termin-typ { font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--typ); }
.vfl-termin-text strong { font-size: 15.5px; color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vfl-termin-text small { color: var(--g); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vfl-abgesagt { color: var(--rot); }
.vfl-termin-zahlen { display: flex; gap: 6px; margin-top: 4px; }
.vfl-termin-zahlen i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--g); }
.vfl-termin-zahlen i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.vfl-termin-zahlen .ja::before { background: var(--gruen); }
.vfl-termin-zahlen .vielleicht::before { background: var(--gelb); }
.vfl-termin-zahlen .nein::before { background: var(--rot); }
.vfl-termin-zahlen .offen::before { background: #C3CDDC; }

/* ---------- Zusage-Knöpfe */
.vfl-zusage { display: flex; gap: 5px; margin: 0; }
.vfl-z { position: relative; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 2px solid var(--l); border-radius: 14px; background: #fff; color: var(--g); font: inherit; font-size: 17px; font-weight: 900; cursor: pointer; transition: transform .15s, background .2s, border-color .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.vfl-z em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vfl-z:active { transform: scale(.9); }
.vfl-z--ja:hover, .vfl-z--ja.ist-aktiv { border-color: var(--gruen); color: var(--gruen); }
.vfl-z--vielleicht:hover, .vfl-z--vielleicht.ist-aktiv { border-color: var(--gelb); color: #A57800; }
.vfl-z--nein:hover, .vfl-z--nein.ist-aktiv { border-color: var(--rot); color: var(--rot); }
.vfl-z--ja.ist-aktiv { background: var(--gruen); color: #fff; }
.vfl-z--vielleicht.ist-aktiv { background: var(--gelb); color: #fff; }
.vfl-z--nein.ist-aktiv { background: var(--rot); color: #fff; }
.vfl-z.ist-aktiv { animation: vfl-plopp .35s cubic-bezier(.2, .7, .2, 1.6); }
.ist-am-senden .vfl-z { pointer-events: none; }
.vfl-z-fest { font-size: 12.5px; font-weight: 800; color: var(--g); padding: 6px 10px; border-radius: 10px; background: #EEF2F8; white-space: nowrap; }
.vfl-z-fest--ja { background: #E2F4EA; color: #0E5A37; }
.vfl-z-fest--nein { background: #FDECEA; color: var(--rot); }
.vfl-z-fest--vielleicht { background: #FFF4D6; color: #8A6200; }
@keyframes vfl-plopp { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes vfl-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Termin-Detail */
.vfl-termin-detail { position: relative; padding: 20px; margin: 0 0 22px; background: #fff; border: 1px solid var(--l); border-radius: 22px; box-shadow: 0 10px 30px rgba(7, 42, 102, .08); overflow: hidden; }
.vfl-termin-detail::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--typ), var(--pink)); }
.vfl-termin-detail h2 { margin: 4px 0 10px; font-size: 1.55rem; font-weight: 900; font-style: italic; color: var(--bd); line-height: 1.15; }
.vfl-ergebnis-zahl { display: inline-block; margin: 0 0 8px; padding: 4px 14px; border-radius: 12px; background: var(--bd); color: #fff; font-size: 1.4rem; font-weight: 900; }
.vfl-termin-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 12px; }
.vfl-termin-fakten div { padding: 10px 12px; border-radius: 14px; background: var(--bh); }
.vfl-termin-fakten dt { font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--g); }
.vfl-termin-fakten dd { margin: 2px 0 0; font-weight: 800; color: var(--bd); }
.vfl-termin-fakten a { color: var(--b) !important; }
.vfl-termin-info { padding: 12px 14px; border-left: 4px solid var(--pink); background: color-mix(in srgb, var(--pink) 5%, #fff); border-radius: 0 14px 14px 0; margin: 0 0 14px; }
.vfl-termin-info p { margin: 0; }
.vfl-termin-antwort { display: grid; gap: 10px; padding-top: 6px; }
.vfl-termin-antwort > p { margin: 0; font-weight: 700; }
.vfl-termin-antwort .vfl-zusage { gap: 8px; }
.vfl-termin-antwort .vfl-z { width: auto; height: 50px; flex: 1; grid-auto-flow: column; gap: 6px; padding: 0 12px; font-size: 15px; }
.vfl-termin-antwort .vfl-z em { position: static; width: auto; height: auto; clip: auto; font-style: normal; font-size: 14px; }
.vfl-grund { display: flex; gap: 8px; }
.vfl-grund input { flex: 1; min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--l); border-radius: 12px; font: inherit; }

.vfl-wer { display: grid; gap: 12px; }
.vfl-wer-gruppe h4 { margin: 0 0 6px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--g); }
.vfl-wer-gruppe h4 b { display: inline-block; min-width: 22px; padding: 0 6px; margin-left: 4px; border-radius: 999px; text-align: center; color: #fff; background: #9AA9C2; }
.vfl-wer--ja h4 b { background: var(--gruen); }
.vfl-wer--vielleicht h4 b { background: var(--gelb); }
.vfl-wer--nein h4 b { background: var(--rot); }
.vfl-wer ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vfl-wer li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #fff; border: 1px solid var(--l); font-size: 13.5px; font-weight: 700; }
.vfl-wer li .vfl-avatar { width: 28px; height: 28px; font-size: 11px !important; }
.vfl-wer--offen li { opacity: .65; }
.vfl-wer li small { font-weight: 400; color: var(--g); }
.vfl-trainer-link a { font-weight: 800; color: var(--pink) !important; }

/* ---------- Fahrten & Aufgaben */
.vfl-fahrten, .vfl-aufgaben, .vfl-kommentare, .vfl-buchungen, .vfl-nachrichten, .vfl-katalog-liste { list-style: none; margin: 0; padding: 0; }
.vfl-fahrt, .vfl-aufgabe { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 8px; background: #fff; border: 1px solid var(--l); border-radius: 16px; }
.vfl-fahrt > div, .vfl-aufgabe > div { flex: 1; min-width: 0; }
.vfl-fahrt small, .vfl-aufgabe small { display: block; color: var(--g); font-size: 12.5px; }
.vfl-fahrt--suche { background: color-mix(in srgb, var(--pink) 5%, #fff); border-style: dashed; border-color: color-mix(in srgb, var(--pink) 35%, #fff); }
.vfl-fahrt .vfl-avatar { width: 36px; height: 36px; }
.vfl-sitze { display: flex; gap: 4px; margin-top: 5px; }
.vfl-sitz { width: 26px; height: 26px; border-radius: 50%; border: 2px dashed #C3CDDC; }
.vfl-sitz.ist-belegt { border: 0; }
.vfl-sitz .vfl-avatar { width: 26px; height: 26px; font-size: 10px !important; }
.vfl-voll { color: var(--rot); }
.vfl-fahrt-knoepfe { display: flex; align-items: center; gap: 8px; }
.vfl-mini-link { font-size: 12.5px; color: var(--g) !important; font-weight: 700; }
.vfl-fahrt-neu summary { cursor: pointer; font-weight: 800; color: var(--b); padding: 6px 0; }
.vfl-fahrt-neu .vfl-zeile, .vfl-aufgabe-neu { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.vfl-fahrt-neu select, .vfl-fahrt-neu input, .vfl-aufgabe-neu input { min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--l); border-radius: 12px; font: inherit; font-size: 14px; background: #fff; }
.vfl-fahrt-neu input[type=text], .vfl-aufgabe-neu input[type=text] { flex: 1; min-width: 160px; }
.vfl-plaetze input { width: 60px; }
.vfl-aufgabe-haken { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--l); color: #fff; font-weight: 900; }
.vfl-aufgabe.ist-vergeben .vfl-aufgabe-haken { background: var(--gruen); border-color: var(--gruen); }
.vfl-aufgabe.ist-meins { border-color: var(--gruen); background: #F3FBF6; }

/* ---------- Pinnwand */
.vfl-beitrag { position: relative; margin: 0 0 14px; padding: 16px 16px 12px; background: #fff; border: 1px solid var(--l); border-radius: 20px; box-shadow: 0 4px 16px rgba(7, 42, 102, .05); animation: vfl-rein .4s both; }
.vfl-beitrag.ist-angeheftet { border-color: color-mix(in srgb, var(--pink) 35%, #fff); background: linear-gradient(180deg, #FFF5FA, #fff 60px); }
.vfl-beitrag header { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.vfl-beitrag header .vfl-avatar { width: 40px; height: 40px; }
.vfl-beitrag header b { display: block; font-size: 14.5px; }
.vfl-beitrag header small { color: var(--g); font-size: 12.5px; }
.vfl-pin { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; font-weight: 800; }
.vfl-beitrag-menue { display: flex; gap: 10px; margin-left: auto; font-size: 12.5px; font-weight: 700; }
.vfl-pin + .vfl-beitrag-menue { margin-left: 10px; }
.vfl-beitrag h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 900; color: var(--bd); }
.vfl-beitrag-text p { margin: 0 0 8px; }
.vfl-beitrag-mehr { font-size: 13px; font-weight: 800; color: var(--pink) !important; text-decoration: none; }
.vfl-kommentare { margin: 10px 0 8px; display: grid; gap: 8px; }
.vfl-kommentar { position: relative; display: flex; gap: 8px; }
.vfl-kommentar .vfl-avatar { width: 32px; height: 32px; }
.vfl-kommentar > div { flex: 1; padding: 7px 12px 8px; background: #F2F5FA; border-radius: 4px 16px 16px 16px; }
.vfl-kommentar b { font-size: 13px; }
.vfl-kommentar small { color: var(--g); font-size: 11.5px; }
.vfl-kommentar p { margin: 2px 0 0; font-size: 14.5px; }
.vfl-kommentar-weg { position: absolute; top: 2px; right: 8px; color: var(--g) !important; text-decoration: none; opacity: .5; }
.vfl-kommentieren { display: flex; gap: 8px; align-items: flex-end; padding-top: 8px; border-top: 1px solid #EEF2F8; }
.vfl-kommentieren textarea { flex: 1; min-height: 42px; max-height: 160px; padding: 10px 14px; border: 1.5px solid var(--l); border-radius: 21px; font: inherit; font-size: 15px; resize: none; }
.vfl-kommentieren button { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--b); color: #fff; font-size: 16px; cursor: pointer; }

/* Umfrage */
.vfl-umfrage { display: grid; gap: 8px; margin: 10px 0 4px; }
.vfl-option { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--l); border-radius: 14px; background: #fff; cursor: pointer; overflow: hidden; isolation: isolate; font-weight: 700; }
.vfl-option::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--bh); z-index: -1; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.vfl-umfrage.hat-gewaehlt .vfl-option::before, .vfl-umfrage:has(input:disabled) .vfl-option::before { width: var(--anteil); }
.vfl-option.ist-gewaehlt { border-color: var(--b); }
.vfl-option.ist-gewaehlt::before { background: #D3E1F8; }
.vfl-option input { accent-color: var(--b); width: 18px; height: 18px; }
.vfl-option-text { flex: 1; }
.vfl-option-zahl { font-size: 12.5px; color: var(--g); white-space: nowrap; }
.vfl-umfrage:not(.hat-gewaehlt):not(:has(input:disabled)) .vfl-option-zahl { visibility: hidden; }
.vfl-umfrage-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 0; font-size: 12.5px; color: var(--g); }
.vfl-umfrage.ist-neu .vfl-option::before { animation: vfl-balken 1s cubic-bezier(.2, .7, .2, 1); }
@keyframes vfl-balken { from { width: 0; } }

/* ---------- Kasse */
.vfl-kasse-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.vfl-kasse-kachel { display: grid; gap: 2px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--l); }
.vfl-kasse-kachel small { font-weight: 800; color: var(--g); }
.vfl-kasse-kachel b { font-size: 1.7rem; font-weight: 900; font-style: italic; color: var(--bd); }
.vfl-kasse-kachel span { font-size: 12.5px; color: var(--g); }
.vfl-kasse-kachel--ich { background: linear-gradient(135deg, var(--b), var(--bd)); border: 0; }
.vfl-kasse-kachel--ich small, .vfl-kasse-kachel--ich span { color: #C9D7F2; }
.vfl-kasse-kachel--ich b { color: #fff; }
.vfl-kasse-kachel--ich.ist-offen { background: linear-gradient(135deg, var(--pink), color-mix(in srgb, var(--pink) 70%, #000)); }
.vfl-kasse-kachel--ich.ist-offen small, .vfl-kasse-kachel--ich.ist-offen span { color: #FFD6E8; }
.vfl-buchung { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 6px; background: #fff; border: 1px solid var(--l); border-radius: 14px; }
.vfl-buchung-art { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; background: var(--bh); color: var(--bd); }
.vfl-buchung--strafe .vfl-buchung-art { background: color-mix(in srgb, var(--pink) 12%, #fff); color: color-mix(in srgb, var(--pink) 70%, #000); }
.vfl-buchung--ausgabe .vfl-buchung-art { background: #FDECEA; color: var(--rot); }
.vfl-buchung--einnahme .vfl-buchung-art { background: #E2F4EA; color: #0E5A37; }
.vfl-buchung-text { flex: 1; min-width: 0; }
.vfl-buchung-text strong { display: block; font-size: 14.5px; }
.vfl-buchung-text small { color: var(--g); font-size: 12.5px; }
.vfl-buchung-betrag { font-weight: 900; white-space: nowrap; }
.vfl-buchung.ist-offen { border-color: color-mix(in srgb, var(--pink) 35%, #fff); }
.vfl-buchung.ist-offen .vfl-buchung-betrag { color: var(--pink); }
.vfl-buchung--ausgabe .vfl-buchung-betrag { color: var(--rot); }
.vfl-buchung-knoepfe { display: flex; gap: 4px; flex-wrap: wrap; }
.vfl-katalog summary { cursor: pointer; font-weight: 900; color: var(--bd); font-size: 1.05rem; padding: 4px 0; }
.vfl-katalog-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #EEF2F8; }
.vfl-bezahlen { padding: 14px 16px; background: #fff; border: 1px solid var(--l); border-radius: 18px; }

/* ---------- Ich */
.vfl-meine-stats { display: flex; align-items: center; gap: 20px; padding: 16px; background: #fff; border: 1px solid var(--l); border-radius: 20px; }
.vfl-ring { --wert: 0; position: relative; width: 104px; height: 104px; flex: none; display: grid; place-content: center; text-align: center; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--wert) * 1%), var(--bh) 0); }
.vfl-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.vfl-ring > * { position: relative; }
.vfl-ring b { font-size: 1.5rem; font-weight: 900; color: var(--bd); line-height: 1; }
.vfl-ring small { font-size: 11px; color: var(--g); font-weight: 700; }
.vfl-meine-stats ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--g); }
.vfl-meine-stats ul b { color: var(--t); }
.vfl-app-einrichten { display: grid; gap: 8px; }
.vfl-push-zeile, .vfl-install { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--l); border-radius: 16px; }
.vfl-push-zeile > span, .vfl-install > span { flex: 1; }
.vfl-push-zeile small, .vfl-install small { display: block; color: var(--g); font-size: 12.5px; }
.vfl-install-ios { padding: 12px 14px; border-radius: 16px; background: var(--bh); font-size: 14px; }
.vfl-nachrichten li a { display: grid; gap: 1px; padding: 10px 12px; margin: 0 0 6px; background: #fff; border: 1px solid var(--l); border-radius: 14px; text-decoration: none !important; color: inherit !important; }
.vfl-nachrichten li.ist-neu a { border-color: var(--pink); box-shadow: inset 4px 0 0 var(--pink); }
.vfl-nachrichten span { font-size: 13.5px; color: var(--g); }
.vfl-nachrichten small { font-size: 11.5px; color: var(--g); }

/* ---------- Meldung (Toast) */
.vfl-meldung--toast { position: fixed; left: 50%; bottom: 96px; z-index: 99; transform: translateX(-50%); max-width: calc(100% - 32px); margin: 0; padding: 12px 18px; border-radius: 999px; background: var(--bd, #072A66); color: #fff; font-weight: 800; box-shadow: 0 12px 30px rgba(7, 42, 102, .35); animation: vfl-toast .35s cubic-bezier(.2, .7, .2, 1.4); transition: opacity .4s, transform .4s; }
.vfl-meldung--toast.ist-fehler { background: var(--rot, #C0392B); }
.vfl-meldung--toast.ist-weg { opacity: 0; transform: translate(-50%, 10px); }
@keyframes vfl-toast { from { opacity: 0; transform: translate(-50%, 20px) scale(.9); } }
@media (min-width: 783px) { .vfl-meldung--toast { bottom: 30px; } }

/* ---------- Buttons der Verwaltung im App-Bereich */
.vfl-app .button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border: 1.5px solid var(--l); border-radius: 999px; background: #fff; color: var(--bd) !important; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none !important; }
.vfl-app .button-primary { background: var(--b); border-color: var(--b); color: #fff !important; }
.vfl-app .vfl-box { padding: 14px 16px; margin: 0 0 14px; background: #fff; border: 1px solid var(--l); border-radius: 18px; }
.vfl-app .vfl-box summary { cursor: pointer; font-weight: 900; color: var(--bd); }
.vfl-app .vfl-zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vfl-link-rot { color: var(--rot) !important; }

/* ---------- Formular „Neuer Beitrag“ / Termin: Umschalten */
.vfl-typwahl { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 4px; background: #fff; border: 1px solid var(--l); border-radius: 999px; }
.vfl-typwahl label { position: relative; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; cursor: pointer; color: var(--bd); }
.vfl-typwahl input { position: absolute; opacity: 0; pointer-events: none; }
.vfl-typwahl label:has(input:checked) { background: var(--typ, var(--bd)); color: #fff; }
.vfl-typwahl label:has(input:focus-visible) { outline: 2px solid var(--bm); outline-offset: 2px; }
.vfl-beitrag-form:not([data-typ=umfrage]) .vfl-nur-umfrage { display: none; }
.vfl-termin-form:not([data-typ=spiel]) .vfl-nur-spiel { display: none; }
.vfl-termin-form[data-typ=spiel] .vfl-nicht-spiel { display: none; }
.vfl-beitrag-form .vfl-feld input, .vfl-beitrag-form .vfl-feld textarea { width: 100%; }
.vfl-neuer-beitrag[open] summary { margin-bottom: 12px; }

/* ---------- Verwaltung: Termine, Statistik, Kasse */
.vfl-v .vfl-knoepfe { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vfl-typ-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--typ); vertical-align: 1px; }
.vfl-v-termine tr.ist-abgesagt td { opacity: .55; }
.vfl-zahlen-zelle { white-space: nowrap; }
.vfl-z-zahl { display: inline-block; min-width: 28px; margin-right: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 900; text-align: center; color: #fff; }
.vfl-z-zahl.ja { background: var(--gruen); }
.vfl-z-zahl.vielleicht { background: var(--gelb); }
.vfl-z-zahl.nein { background: var(--rot); }
.vfl-z-zahl.offen { background: #C3CDDC; }
.vfl-tage { display: flex; flex-wrap: wrap; gap: 6px; }
.vfl-tage label { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1.5px solid var(--l); border-radius: 10px; font-weight: 700; color: var(--t) !important; font-size: 13.5px !important; }
.vfl-anw-person { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.vfl-anw-person .vfl-avatar { width: 30px; height: 30px; font-size: 11px !important; }
.vfl-status-wahl { min-height: 36px !important; padding: 4px 8px !important; font-size: 14px !important; }
.vfl-status--ja { border-color: var(--gruen) !important; }
.vfl-status--nein { border-color: var(--rot) !important; }
.vfl-status--vielleicht { border-color: var(--gelb) !important; }
.vfl-da input { width: 22px !important; height: 22px !important; }
.vfl-balken { --wert: 0; position: relative; display: block; min-width: 160px; height: 22px; border-radius: 999px; background: var(--bh); overflow: hidden; }
.vfl-balken i { position: absolute; inset: 0 auto 0 0; width: calc(var(--wert) * 1%); background: linear-gradient(90deg, var(--b), var(--pink)); border-radius: 999px; animation: vfl-balken 1s cubic-bezier(.2, .7, .2, 1); }
.vfl-balken b { position: relative; padding-left: 10px; font-size: 12px; line-height: 22px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.vfl-warn { color: var(--pink); }
.vfl-v-spalten--gleich { grid-template-columns: 1fr 1fr !important; }
.vfl-personen-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.vfl-personen-wahl label { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1.5px solid var(--l); border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; }
.vfl-personen-wahl label:has(input:checked) { border-color: var(--b); background: var(--bh); }
.vfl-personen-wahl .vfl-avatar { width: 24px; height: 24px; font-size: 9px !important; }
.vfl-personen-wahl input { width: 16px !important; height: 16px !important; }
.vfl-alle-wahl { padding-left: 10px !important; background: #fff; }
.vfl-offen-person summary { display: flex; align-items: center; gap: 10px; }
.vfl-offen-person summary .vfl-avatar { width: 32px; height: 32px; font-size: 12px !important; }
.vfl-offen-person summary span { color: var(--g); font-weight: 600; font-size: 13px; }
.vfl-offen-person summary strong { margin-left: auto; color: var(--pink); }
.vfl-offen-person .vfl-buchungen { margin-top: 10px; }
.vfl-v .vfl-buchungen.vfl-box { padding: 10px; }
.vfl-pinnwand-v { max-width: 760px; }
@media (max-width: 782px) {
	.vfl-v-spalten--gleich { grid-template-columns: 1fr !important; }
	.vfl-termin { grid-template-columns: 1fr; }
	.vfl-termin > .vfl-zusage, .vfl-termin > .vfl-z-fest { justify-self: end; margin-top: -4px; }
	.vfl-buchung { flex-wrap: wrap; }
	.vfl-buchung-knoepfe { width: 100%; justify-content: flex-end; }
}
@media (min-width: 560px) { .vfl-termin > .vfl-zusage { align-self: center; } }
@media (prefers-reduced-motion: reduce) { .vfl-app *, .vfl-v * { animation: none !important; transition: none !important; } }
.vfl-grund[hidden], .vfl-app [hidden] { display: none !important; }
.vfl-termin-antwort .vfl-z em { font-size: 13.5px; line-height: 1.1; }

/* Wechsler: für welches Kind (Eltern) / welches Team */
.vfl-app-wechsel { display: grid; gap: 8px; margin: 0 0 14px; }
.vfl-wechsel-personen, .vfl-wechsel-teams { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.vfl-wechsel-personen a, .vfl-wechsel-teams a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border: 1px solid #D7E0EE; border-radius: 999px; background: #fff; color: #14213D !important; font-weight: 800; font-size: 14px; text-decoration: none !important; }
.vfl-wechsel-teams a { padding: 8px 14px; font-size: 13px; }
.vfl-wechsel-personen a.ist-aktiv, .vfl-wechsel-teams a.ist-aktiv { background: #0B3B8C; border-color: #0B3B8C; color: #fff !important; box-shadow: 0 6px 16px rgba(11, 59, 140, .25); }
.vfl-wechsel-personen a.ist-aktiv .vfl-avatar { box-shadow: 0 0 0 2px #fff; }

/* Pink nur bei den Frauen: Seiten, App und Verwaltung der Frauenmannschaft */
.vfl-frauen, .vfl-frauen .vfl-app, .vfl-frauen .vfl-v { --pink: #E8317F; --vpink: #E8317F; --vakzent: #E8317F; --akzent: #E8317F; }
.vfl-app-kopf h2, .vfl-app-block > h3 { font-family: "Oswald", "Arial Narrow", sans-serif; font-style: normal; letter-spacing: .01em; }
.vfl-app-kopf h2 { font-weight: 600; text-transform: uppercase; }

/* ---------- 1.13 Chat */
@media (max-width: 420px) { .vfl-app-nav a { font-size: 10.5px; padding: 8px 2px 7px; } .vfl-app-nav { padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } }
.vfl-chat-raeume { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.vfl-chat-raeume a { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--l); border-radius: 16px; color: var(--t) !important; text-decoration: none !important; }
.vfl-chat-raeume li.ist-neu a { border-color: var(--b); box-shadow: 0 4px 14px rgba(11, 59, 140, .12); }
.vfl-chat-symbol { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 900; background: var(--bh); color: var(--b); }
.vfl-chat-symbol--p { background: var(--b); color: #fff; font-size: 18px; }
.vfl-chat-raum-text { flex: 1; min-width: 0; display: grid; }
.vfl-chat-raum-text small { color: var(--g); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfl-chat-raum-meta { display: grid; justify-items: end; gap: 4px; color: var(--g); font-size: 12px; }
.vfl-chat-raum-meta .vfl-abzeichen { position: static; box-shadow: none; }
.vfl-chat-neu summary { cursor: pointer; }
.vfl-chat-neu select, .vfl-chat-neu textarea { width: 100%; }
.vfl-chat-hinweis { color: var(--g); }
.vfl-chat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--l); border-radius: 20px; overflow: hidden; }
.vfl-chat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--l); background: var(--bh); }
.vfl-chat-kopf h2 { margin: 0; font-size: 1.15rem; font-weight: 900; color: var(--bd); }
.vfl-chat-kopf small { color: var(--g); }
.vfl-chat-kopf form { margin: 0; flex: 0 0 auto; }
.vfl-chat-kopf .vfl-knopf { white-space: nowrap; }
.vfl-chat-verlauf { list-style: none; margin: 0; padding: 14px 12px; height: min(62vh, 620px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: #F6F8FC; overscroll-behavior: contain; }
.vfl-chat-tag { align-self: center; margin: 6px 0; }
.vfl-chat-tag span { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--l); color: var(--g); font-size: 12px; font-weight: 700; }
.vfl-chat-leer { align-self: center; margin: auto; color: var(--g); }
.vfl-chat-n { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.vfl-chat-n.ist-ich { align-self: flex-end; }
.vfl-chat-kreis { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--b); color: #fff; font-size: 11px; font-weight: 900; }
.vfl-chat-blase { padding: 8px 12px 6px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--l); box-shadow: 0 1px 2px rgba(7, 42, 102, .05); min-width: 0; }
.vfl-chat-n.ist-ich .vfl-chat-blase { border-radius: 16px 16px 4px 16px; background: var(--b); border-color: var(--b); color: #fff; }
.vfl-chat-n.ist-ich .vfl-chat-blase a { color: #fff; }
.vfl-chat-autor { display: block; font-size: 12.5px; color: var(--bm); margin-bottom: 2px; }
.vfl-chat-text { overflow-wrap: anywhere; line-height: 1.4; }
.vfl-chat-n.ist-weg .vfl-chat-text { color: var(--g); }
.vfl-chat-fuss { display: block; margin-top: 3px; font-size: 11px; color: var(--g); text-align: right; }
.vfl-chat-n.ist-ich .vfl-chat-fuss { color: rgba(255, 255, 255, .8); }
.vfl-chat-fuss button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.vfl-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--l); }
.vfl-chat-form textarea { flex: 1; min-height: 44px; max-height: 140px; padding: 11px 14px; border: 1px solid var(--l); border-radius: 22px; font: inherit; resize: none; }
.vfl-chat-form .vfl-knopf { flex: 0 0 46px; width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.vfl-chat-regeln { margin: 0; padding: 0 14px 12px; color: var(--g); }
@media (max-width: 782px) { .vfl-chat-verlauf { height: calc(100dvh - 500px); min-height: 230px; } .vfl-chat-kopf small { display: block; font-size: 12px; } }
/* ---------- 1.13 Meine Mitgliedschaft */
.vfl-mg-fakten { display: grid; gap: 6px; margin: 0 0 12px; }
.vfl-mg-fakten div { display: grid; grid-template-columns: 140px 1fr; gap: 8px; }
.vfl-mg-fakten dt { color: var(--g); font-weight: 700; }
.vfl-mg-fakten dd { margin: 0; font-weight: 700; }
.vfl-mg-kuendigen { margin-left: auto; font-size: 13px; color: var(--g) !important; }