/**
 * Portal-Styles für VLS-WM26Tippspiel (v0.8.0).
 *
 * Scope: Vollständig isoliert.
 *   - Selektoren beginnen mit .vls-portal-body, .vls-modal-overlay oder .vls-widget-*.
 *   - Kein body{}-Reset, kein globaler Override des WP-Themes.
 *
 * Struktur:
 *   1. CSS-Variablen
 *   2. Portal Shell (body, header, content)
 *   3. Navigationen (Topbar Desktop, Bottombar Mobil)
 *   4. Media Queries
 *   5. Widget (Button + Modal)
 *   6. Login / Register / Forgot / Reset Forms
 *   7. Seite: Meine Tipps
 *   8. Seite: Rangliste
 *   9. Seite: Spielplan
 *  10. Seite: Gruppen
 *  11. Seite: Statistiken
 *  12. Seite: Mein Konto
 *  13. Gemeinsame Komponenten (Buttons, Notices, Tabellen)
 *
 * @package VLS-WM26Tippspiel
 */

/* =============================================================================
   1. CSS-Variablen (Design-Tokens — identisch mit vls-frontend.css)
   ============================================================================= */

.vls-portal-body,
.vls-modal-overlay {
	--vls-gold:    #cc9343;
	--vls-oliv:    #878811;
	--vls-orange:  #ce3a00;
	--vls-creme:   #f3e6d4;
	--vls-tan:     #d29f59;
	--vls-dark:    #2c2c2c;
	--vls-white:   #ffffff;
	--vls-success: #28a745;
	--vls-danger:  #dc3545;
	--vls-info:    #0d6efd;
	--vls-gray:    #6b7280;
}

/* =============================================================================
   2. Portal Shell
   ============================================================================= */

.vls-portal-body {
	margin: 0;
	padding: 0;
	background: #f8f7f4;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--vls-dark);
	font-size: 15px;
	line-height: 1.5;
	overflow-x: hidden;
	/* Unten Platz für fixierte Bottom-Tabbar (Mobil) */
	padding-bottom: 64px;
}

.vls-portal-header {
	background: var(--vls-dark);
	color: var(--vls-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 1rem;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.vls-portal-logo {
	/* Logo im Header: doppelte Größe (72px) gegenüber patch6 (36px). */
	height: 72px;
	width: auto;
	display: block;
}

.vls-portal-user {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	/* 80px Abstand nach rechts (patch9: +30px gegenüber patch8):
	   Tippername + Abmelden 30px weiter nach links → kein Overlap mit Schließen-Button. */
	margin-right: 80px;
}

.vls-portal-username {
	font-size: 0.85rem;
	color: #ccc;
}

.vls-portal-content {
	max-width: 900px;
	margin: 0 auto;
	padding: 1rem;
}

/* =============================================================================
   3. Navigationen
   ============================================================================= */

/* --- Desktop: Topbar (horizontal, oben) --- */
.vls-nav-topbar {
	display: flex;
	align-items: center;
	background: var(--vls-white);
	border-bottom: 1px solid #e8e0d4;
	padding: 0 0.5rem;
	position: sticky;
	top: 48px; /* Unterhalb des Portal-Headers */
	z-index: 90;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.vls-nav-topbar .vls-nav-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.65rem 1rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: #555;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color 0.15s, border-color 0.15s;
	cursor: pointer;
}

.vls-nav-topbar .vls-nav-tab:hover {
	color: var(--vls-gold);
	border-bottom-color: var(--vls-creme);
}

.vls-nav-topbar .vls-nav-tab--active {
	color: var(--vls-dark);
	font-weight: 700;
	border-bottom-color: var(--vls-gold);
}

/* --- Mobil: Bottom-Tabbar (fixiert am unteren Rand) --- */
.vls-nav-bottombar {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--vls-white);
	border-top: 1px solid #e8e0d4;
	z-index: 200;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.vls-nav-bottombar .vls-nav-tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 0.45rem 0.2rem;
	font-size: 0.65rem;
	font-weight: 500;
	color: #888;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s;
}

.vls-nav-bottombar .vls-nav-tab--active {
	color: var(--vls-gold);
	font-weight: 700;
}

/* =============================================================================
   4. Media Queries: Desktop ↔ Mobil
   ============================================================================= */

@media (min-width: 769px) {
	.vls-nav-bottombar {
		display: none;
	}
	.vls-portal-body {
		padding-bottom: 0;
	}
}

@media (max-width: 768px) {
	.vls-nav-topbar {
		display: none;
	}
	.vls-portal-content {
		padding: 0.75rem 0.6rem;
	}
}

/* =============================================================================
   4b. v0.8.5 — Mobile UX Polish (CSS/JS only — Desktop unverändert)
   Alle Regeln in @media-Blöcken. Bestehende Regeln nicht verändert.
   ============================================================================= */

/* --- M1: Bottom-Tabbar (patch25 — dunkler Header-Hintergrund) --- */
@media (max-width: 768px) {
    .vls-nav-bottombar {
        box-sizing: border-box;
        min-height: 64px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #2c2c2c;
        border-top: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 -2px 8px rgba(0,0,0,0.18);
    }
    .vls-nav-bottombar .vls-nav-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-height: 64px;
        padding: 0.35rem 0.2rem;
        position: relative;
        font-size: 1.6rem;
        color: rgba(255,255,255,0.82);
        transition: color 0.15s;
    }
    .vls-nav-bottombar .vls-nav-tab span {
        display: block;
        font-size: 0.62rem;
        line-height: 1.2;
        color: rgba(255,255,255,0.78);
    }
    .vls-nav-bottombar .vls-nav-tab--active {
        color: #ffffff;
        font-weight: 700;
    }
    .vls-nav-bottombar .vls-nav-tab--active span {
        color: #ffffff;
    }
    .vls-nav-bottombar .vls-nav-tab--active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 20%;
        width: 60%;
        height: 3px;
        background: var(--vls-gold);
        border-radius: 0 0 3px 3px;
    }
    /* Body-Abstand exakt an Bar-Höhe koppeln */
    .vls-portal-body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* --- M2: Header Mobile (patch26 — sauberer Flex-Flow, kein absolutes X) --- */

/* Desktop: .vls-header-actions transparent im Layout, Close-Btn versteckt */
@media (min-width: 769px) {
    .vls-header-actions {
        display: contents; /* verhält sich wie nicht vorhanden — Desktop-Layout unverändert */
    }
    .vls-portal-close-btn {
        display: none;
    }
}

/* Mobile: Äußerer X-Button ausblenden — in-Portal-Button übernimmt */
@media (max-width: 768px) {
    .vls-modal-close {
        display: none;
    }
}

@media (max-width: 768px) {
    .vls-portal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0.5rem 0.75rem;
        min-height: 64px;
        overflow: visible;
    }
    .vls-portal-logo {
        display: block;
        height: 44px;
        width: auto;
        max-width: 100%;
        flex-shrink: 0;
    }
    .vls-portal-username {
        display: none;
    }
    /* Rechte Gruppe: Logout + X nebeneinander */
    .vls-header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        flex-shrink: 0;
    }
    .vls-portal-user {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin: 0;
    }
    .vls-portal-user .vls-btn-logout {
        font-size: 0.65rem;
        line-height: 1.2;
        padding: 0.2rem 0.55rem;
        border-radius: 4px;
        min-height: auto;
        white-space: nowrap;
    }
    /* In-Portal Close-Button: 28px runder Kreis */
    .vls-portal-close-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        flex-shrink: 0;
        box-shadow: 0 1px 4px rgba(0,0,0,0.22);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}

/* --- M3b: Tipp-Eingabe Touch-Targets + Save-Button --- */
@media (max-width: 768px) {
    .vls-tipp-input {
        width: 52px;           /* Breiter (war: 42px) */
        height: 44px;          /* Mindesthöhe Touch-Target */
        font-size: 1.05rem;    /* Größere Schrift auf Mobile */
        padding: 6px 4px;
    }
    .vls-btn-save {
        font-size: 0.82rem;
        padding: 0.5rem 1rem;
        min-height: 44px;      /* Touch-Target ≥ 44px */
    }
    .vls-tipp-row {
        gap: 0.75rem;          /* Mehr Abstand (war: 0.5rem) */
        padding-top: 0.6rem;
        margin-top: 0.6rem;
    }
}

/* --- M4: Rangliste Mobile: 3 Spalten (Rang, Tipper, Netto) --- */
@media (max-width: 768px) {
    .vls-rangliste-table .vls-rt-tipps,
    .vls-rangliste-table .vls-rt-brutto,
    .vls-rangliste-table .vls-rt-straf,
    .vls-rangliste-table .vls-rt-trend {
        display: none;
    }
    .vls-rangliste-table .vls-rt-netto {
        font-weight: 700; /* Netto-Punkte auf Mobile prominenter */
    }
}

/* --- M5: Match-Karten auf sehr kleinen Screens (375px) --- */
@media (max-width: 480px) {
    .vls-team-name {
        max-width: 90px;     /* Kürzer (war: 130px) */
        font-size: 0.82rem;
    }
    .vls-score-display {
        font-size: 1.3rem;   /* Score prominenter (war: 1.15rem) */
        font-weight: 800;
    }
    .vls-score-block {
        min-width: 62px;
    }
    .vls-match-card {
        padding: 0.65rem 0.75rem; /* Kompakter (war: 0.75rem 1rem) */
    }
    .vls-team-flag {
        width: 20px;
        height: 13px;
    }
}

/* --- M6: Statistiken Diagramm Mobile kompakt --- */
@media (max-width: 768px) {
    .vls-chart-wrap {
        padding: 0.6rem 0.4rem;
    }
    .vls-chart-wrap canvas {
        max-height: 220px;    /* Verhindert übermäßige Höhe */
    }
    .vls-kpi-value {
        font-size: 1.5rem;    /* Etwas kleiner (war: 1.8rem) */
    }
}

/* --- M7: Gruppen-Tabs A–L: bessere Touch-Größe --- */
@media (max-width: 768px) {
    .vls-gruppen-tab-btn {
        padding: 0.5rem 0.85rem;  /* War: 0.3rem 0.75rem */
        font-size: 0.88rem;        /* War: 0.82rem */
        min-width: 40px;           /* War: 36px */
    }
    .vls-gruppen-tabs {
        gap: 0.4rem;               /* War: 0.3rem */
    }
}

/* --- M8: Spielplan-Toggle-Buttons Mobile Touch-Targets --- */
@media (max-width: 768px) {
    .vls-sp-toggle-btn,
    .vls-sp-sub-btn {
        padding: 0.55rem 1.1rem;   /* War: 0.4rem 1rem */
        font-size: 0.85rem;
        min-height: 44px;
    }
}

/* --- M9: Login-Felder Touch-optimiert + iOS-Zoom-Fix --- */
@media (max-width: 768px) {
    .vls-portal-login-wrap {
        margin: 1rem auto;
        padding: 0 0.75rem;
    }
    .vls-portal-form-section {
        padding: 1.25rem 1rem;
    }
    .vls-field-row input[type="email"],
    .vls-field-row input[type="password"],
    .vls-field-row input[type="text"] {
        padding: 0.65rem 0.75rem;  /* Größer (war: 0.5rem 0.7rem) */
        font-size: 1rem;           /* ≥ 16px verhindert iOS-Auto-Zoom */
        min-height: 44px;
    }
    .vls-btn-primary {
        min-height: 44px;
        font-size: 0.95rem;
        width: 100%;               /* Volle Breite auf Mobile */
        padding: 0.6rem 1.1rem;
    }
}

/* --- M11: Tap-Feedback auf Match-Karten (:active-State) --- */
@media (max-width: 768px) {
    .vls-match-card:active {
        background: #fdf5e8;   /* Warmer Goldton — subtil */
        transition: background 0.05s;
    }
}

/* --- M13: Pulse-Animation nach Tipp-Speicherung (global — kein @media nötig) --- */
@keyframes vls-tipp-saved-pulse {
    0%   { border-color: var(--vls-tan); box-shadow: none; }
    30%  { border-color: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,0.25); }
    100% { border-color: var(--vls-tan); box-shadow: none; }
}

.vls-match-card.vls-tipp-saved {
    animation: vls-tipp-saved-pulse 0.6s ease-out;
}

/* =============================================================================
   4b. Hilfe-Button + Hilfe-Overlay (patch28)
   ============================================================================= */

/* Hilfe-Button: identisch zum Close-Button, aber gold */
.vls-portal-help-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(204, 147, 67, 0.25);
	color: var(--vls-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s;
}
.vls-portal-help-btn:hover {
	background: rgba(204, 147, 67, 0.45);
}

/* Hilfe-Overlay: fullscreen über dem Portal-Inhalt */
.vls-help-overlay {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 0;
}

.vls-help-inner {
	background: #fff;
	width: 100%;
	max-width: 680px;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.vls-help-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background: var(--vls-dark);
	flex-shrink: 0;
}

.vls-help-title {
	color: var(--vls-gold);
	font-size: 1rem;
	font-weight: 700;
}

.vls-help-close {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.18);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	cursor: pointer;
	flex-shrink: 0;
}

.vls-help-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1rem 1.25rem 2rem;
	font-size: 0.88rem;
	line-height: 1.6;
	color: #333;
}

.vls-help-body h2 {
	font-size: 1rem;
	color: var(--vls-dark);
	margin: 1.25rem 0 0.4rem;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid #e8ddd0;
}

.vls-help-body h2:first-child {
	margin-top: 0;
}

.vls-help-body p {
	margin: 0.4rem 0;
}

.vls-help-body hr {
	border: none;
	border-top: 2px solid #e8ddd0;
	margin: 1.25rem 0;
}

.vls-help-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5rem 0;
	font-size: 0.85rem;
}

.vls-help-table td {
	padding: 0.3rem 0.5rem;
	border-bottom: 1px solid #f0e8dc;
}

.vls-help-table tr:last-child td {
	border-bottom: none;
}

.vls-help-table td:last-child {
	text-align: right;
	white-space: nowrap;
	color: var(--vls-dark);
}

.vls-help-footer {
	font-size: 0.75rem;
	color: #aaa;
	margin-top: 1.5rem;
	text-align: center;
}

/* Desktop: Help-Button auch sichtbar */
@media (min-width: 769px) {
	.vls-portal-help-btn {
		display: flex;
	}
	.vls-help-inner {
		max-width: 680px;
		height: 90vh;
		margin-top: 5vh;
		border-radius: 10px;
	}
}

/* =============================================================================
   5. Widget Button + Modal Overlay
   ============================================================================= */

/* --- Widget Button --- */
.vls-widget-wrap {
	display: inline-block;
	width: 375px;
	max-width: 100%;
}

.vls-widget-btn {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.1rem 1.5rem;
	background: linear-gradient(135deg, var(--vls-gold), #a0720d);
	color: var(--vls-white);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	transition: opacity 0.15s, transform 0.1s;
	box-shadow: 0 4px 12px rgba(204,147,67,0.4);
}

.vls-widget-btn:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

.vls-widget-title {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.vls-widget-subtitle {
	font-size: 0.78rem;
	opacity: 0.85;
	margin-top: 2px;
}

/* --- Modal Overlay --- */
.vls-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.vls-modal-inner {
	position: relative;
	background: var(--vls-white);
	border-radius: 10px;
	width: 100%;
	max-width: 900px;
	height: 88vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.vls-modal-inner iframe {
	width: 100%;
	flex: 1;
	border: none;
	display: block;
}

.vls-modal-close {
	position: absolute;
	top: 0.5rem;
	/* patch9: 30px weiter nach links verschoben damit kein Overlap mit Header-Inhalt. */
	right: calc(0.65rem + 30px);
	background: rgba(255,255,255,0.9);
	border: 1px solid #ccc;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	color: #cc0000;
	cursor: pointer;
	z-index: 10;
	transition: background 0.15s;
}

.vls-modal-close:hover {
	background: var(--vls-creme);
}

@media (max-width: 768px) {
	.vls-modal-overlay {
		padding: 0;
		align-items: stretch;
		justify-content: stretch;
	}
	.vls-modal-inner {
		max-width: 100%;
		width: 100%;
		height: 100dvh;
		min-height: 100dvh;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.vls-modal-inner iframe {
		display: block;
		width: 100%;
		height: 100%;
		min-height: 0;
		flex: 1 1 auto;
		border: none;
	}
}

/* =============================================================================
   6. Login / Register / Forgot / Reset Forms
   ============================================================================= */

.vls-portal-login-wrap {
	max-width: 420px;
	margin: 2rem auto;
	padding: 0 1rem;
}

.vls-portal-form-section {
	background: var(--vls-white);
	border: 1px solid #e3d9cc;
	border-radius: 10px;
	padding: 1.75rem 1.5rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.vls-portal-form-section h2 {
	margin: 0 0 1.25rem;
	font-size: 1.2rem;
	color: var(--vls-dark);
}

.vls-portal-form-msg {
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
	min-height: 1rem;
}

.vls-portal-form-msg.vls-msg-error {
	color: var(--vls-danger);
}

.vls-portal-form-msg.vls-msg-success {
	color: var(--vls-success);
}

.vls-portal-notice {
	padding: 0.65rem 1rem;
	border-radius: 6px;
	font-size: 0.88rem;
	margin-bottom: 1rem;
}

.vls-notice-success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.vls-notice-info {
	background: #d1ecf1;
	color: #0c5460;
	border: 1px solid #bee5eb;
}

.vls-notice-warn {
	background: #fff3cd;
	color: #856404;
	border: 1px solid #ffc107;
}

.vls-field-row {
	margin-bottom: 1rem;
}

.vls-field-row label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
	color: #444;
}

.vls-field-row input[type="email"],
.vls-field-row input[type="password"],
.vls-field-row input[type="text"] {
	width: 100%;
	padding: 0.5rem 0.7rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 0.92rem;
	font-family: inherit;
	color: var(--vls-dark);
	background: var(--vls-white);
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.vls-field-row input:focus {
	outline: none;
	border-color: var(--vls-gold);
	box-shadow: 0 0 0 2px rgba(204,147,67,0.15);
}

.vls-form-actions {
	margin-top: 0.75rem;
}

.vls-form-links {
	margin-top: 0.9rem;
	font-size: 0.82rem;
	color: #666;
	text-align: center;
}

.vls-form-links a {
	color: var(--vls-gold);
	text-decoration: none;
}

.vls-form-links a:hover {
	text-decoration: underline;
}

/* =============================================================================
   7. Seite: Meine Tipps
   ============================================================================= */

.vls-tipps-wrap {
	max-width: 680px;
}

/* Fortschrittsbalken */
.vls-progress-section {
	background: var(--vls-white);
	border: 1px solid #e3d9cc;
	border-radius: 8px;
	/* Padding erhöht damit der Kasten sichtbar höher wirkt (v0.8.0-patch4).
	   Nur Kasten-Höhe angepasst — Schriftgröße bleibt original. */
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}

.vls-progress-label {
	font-size: 0.82rem;
	color: #666;
	margin-bottom: 0.4rem;
}

.vls-progress-bar-wrap {
	/* Outer-Wrapper: enthält Label + Bar-Track — keine Height-Beschränkung */
}

.vls-progress-bar {
	/* Eigentlicher Bar-Track — height hier, nicht am Wrapper (Bug-Fix v0.8.0-patch5:
	   height:10px war am Wrapper → overflow:hidden klippte das Label weg → 10px-Höhe). */
	background: #eee;
	border-radius: 4px;
	height: 10px;
	overflow: hidden;
}

.vls-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--vls-gold), var(--vls-oliv));
	border-radius: 4px;
	transition: width 0.4s ease;
	min-width: 2%;
}

/* Heute-Karte */
.vls-heute-karte {
	background: #fffbf5;
	border: 1px solid var(--vls-tan);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
}

.vls-heute-header {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--vls-oliv);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 0.5rem;
}

.vls-heute-spiel {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
	color: var(--vls-dark);
}

.vls-deadline-warning {
	background: #fff3cd;
	border-left: 3px solid #ffc107;
	padding: 0.4rem 0.75rem;
	border-radius: 0 5px 5px 0;
	font-size: 0.78rem;
	color: #856404;
	margin-bottom: 0.25rem;
}

.vls-tipp-schluss-badge {
	display: inline-block;
	background: var(--vls-orange);
	color: var(--vls-white);
	font-size: 0.68rem;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 3px;
	letter-spacing: 0.03em;
}

/* Countdown */
.vls-countdown {
	font-size: 0.72rem;
	color: var(--vls-orange);
	font-weight: 600;
}

/* Punkte-Badge in gesperrten Karten */
.vls-punkte-badge {
	font-size: 0.78rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	display: inline-block;
}

.vls-punkte-badge--top    { background: #d4edda; color: #155724; }
.vls-punkte-badge--ok     { background: #fff3cd; color: #856404; }
.vls-punkte-badge--zero   { background: #f8d7da; color: #721c24; }
.vls-punkte-badge--pending { background: #e2e3e5; color: #6c757d; }

/* KO-Tipps Abschnitt */
.vls-ko-tipps-section {
	margin-top: 2rem;
}

.vls-section-header {
	font-size: 1rem;
	font-weight: 700;
	color: var(--vls-dark);
	margin: 0 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--vls-creme);
}

/* =============================================================================
   8. Seite: Rangliste
   ============================================================================= */

.vls-rangliste-wrap {
	/* Kein max-width: Tabelle soll voll ausgenutzt werden */
}

.vls-rangliste-filter {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.vls-filter-btn {
	padding: 0.35rem 0.9rem;
	border: 1px solid #ccc;
	border-radius: 20px;
	background: var(--vls-white);
	font-size: 0.8rem;
	cursor: pointer;
	color: #666;
	transition: all 0.15s;
}

.vls-filter-btn--active,
.vls-filter-btn:hover {
	background: var(--vls-gold);
	border-color: var(--vls-gold);
	color: var(--vls-white);
}

.vls-rangliste-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.vls-rangliste-table thead th {
	background: var(--vls-dark);
	color: var(--vls-white);
	padding: 0.55rem 0.6rem;
	text-align: right;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.vls-rangliste-table thead th.vls-rt-rang,
.vls-rangliste-table thead th.vls-rt-name {
	text-align: left;
}

.vls-rank-row td {
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid #f0eae0;
	text-align: right;
}

.vls-rank-row td.vls-rt-rang,
.vls-rank-row td.vls-rt-name {
	text-align: left;
}

.vls-rank-row--me {
	background: #fffbf0;
	font-weight: 700;
}

.vls-rank-row--me td {
	border-bottom-color: var(--vls-tan);
}

.vls-rang-1 td:first-child { color: #b8860b; font-weight: 800; }
.vls-rang-2 td:first-child { color: #888;     font-weight: 700; }
.vls-rang-3 td:first-child { color: #a0522d;  font-weight: 700; }

.vls-prominent-star {
	margin-left: 0.2rem;
	font-size: 0.85em;
}

.vls-me-label {
	font-size: 0.7rem;
	color: var(--vls-gold);
	margin-left: 0.3rem;
	font-weight: 600;
}

/* Trend-Pfeile */
.vls-trend { font-size: 1rem; font-weight: 700; }
.vls-trend--up   { color: var(--vls-success); }
.vls-trend--down { color: var(--vls-danger); }
.vls-trend--same { color: var(--vls-gray); }
.vls-trend--neu  { color: var(--vls-gray); }

/* =============================================================================
   9. Seite: Spielplan
   ============================================================================= */

.vls-spielplan-wrap {}

/* Haupt-Toggle + Sub-Toggle */
.vls-sp-toggle,
.vls-sp-subtoggle {
	display: flex;
	gap: 0.4rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.vls-sp-toggle-btn,
.vls-sp-sub-btn {
	padding: 0.4rem 1rem;
	border: 1px solid #ccc;
	border-radius: 20px;
	background: var(--vls-white);
	font-size: 0.82rem;
	cursor: pointer;
	color: #555;
	transition: all 0.15s;
	font-family: inherit;
}

.vls-sp-toggle-btn--active,
.vls-sp-toggle-btn:hover,
.vls-sp-sub-btn--active,
.vls-sp-sub-btn:hover {
	background: var(--vls-dark);
	border-color: var(--vls-dark);
	color: var(--vls-white);
}

/* Datum-Block (Nach Datum Ansicht) */
.vls-datum-block {
	margin-bottom: 2rem;
}

.vls-datum-header {
	background: var(--vls-oliv);
	color: var(--vls-white);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	padding: 0.45rem 1rem;
	border-radius: 6px 6px 0 0;
}

/* KO-Runden */
.vls-ko-bracket {}

.vls-bracket-runde {
	margin-bottom: 2rem;
}

.vls-bracket-runden-header {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--vls-dark);
	margin: 0 0 0.6rem;
	padding: 0.4rem 0.75rem;
	background: var(--vls-creme);
	border-left: 4px solid var(--vls-gold);
	border-radius: 0 4px 4px 0;
}

.vls-ko-card {
	margin-bottom: 0.5rem;
	border-radius: 6px;
	border: 1px solid var(--vls-tan);
}

.vls-score-et {
	font-size: 0.7rem;
	color: var(--vls-gray);
	margin-left: 0.3rem;
}

/* Eigener Tipp im Spielplan */
.vls-sp-tipp-row {
	padding-top: 0.35rem;
	margin-top: 0.35rem;
	border-top: 1px dashed #e8e0d4;
}

.vls-sp-tipp {
	display: inline-block;
	font-size: 0.76rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
}

.vls-tipp-correct { background: #d4edda; color: #155724; }
.vls-tipp-wrong   { background: #f8d7da; color: #721c24; }
.vls-tipp-pending { background: #e2e3e5; color: #6c757d; }

/* =============================================================================
   10. Seite: Gruppen
   ============================================================================= */

.vls-gruppen-wrap {}

.vls-gruppen-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-bottom: 1rem;
}

.vls-gruppen-tab-btn {
	padding: 0.3rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: var(--vls-white);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	color: #555;
	font-family: inherit;
	transition: all 0.15s;
	min-width: 36px;
	text-align: center;
}

.vls-gruppen-tab-btn--active,
.vls-gruppen-tab-btn:hover {
	background: var(--vls-gold);
	border-color: var(--vls-gold);
	color: var(--vls-white);
}

.vls-gruppe-titel {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: var(--vls-dark);
}

.vls-gruppe-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.83rem;
}

.vls-gruppe-table thead th {
	background: var(--vls-dark);
	color: var(--vls-white);
	padding: 0.4rem 0.5rem;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
}

.vls-gruppe-table thead th.vls-gt-platz,
.vls-gruppe-table thead th.vls-gt-name {
	text-align: left;
}

.vls-gt-row td {
	padding: 0.4rem 0.5rem;
	border-bottom: 1px solid #f0eae0;
	text-align: center;
	vertical-align: middle;
}

.vls-gt-row td.vls-gt-platz,
.vls-gt-row td.vls-gt-name {
	text-align: left;
}

.vls-gt-row td.vls-gt-name {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	min-width: 100px;
}

/* Qualifikations-Markierung (PÜ §E5) */
.vls-qual-direkt   { border-left: 4px solid #28a745; }
.vls-qual-moeglich { border-left: 4px solid #ffc107; }
.vls-qual-aus      { border-left: 4px solid #dee2e6; }

.vls-td-pos { color: var(--vls-success); }
.vls-td-neg { color: var(--vls-danger);  }

.vls-flag-sm {
	width: 20px;
	height: 14px;
	object-fit: cover;
	border: 1px solid #ddd;
	flex-shrink: 0;
}

/* Legende */
.vls-qual-legende {
	font-size: 0.72rem;
	color: #888;
	margin-top: 0.5rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.vls-qual-direkt-label::before   { content: ""; display: inline-block; width: 8px; height: 8px; background: #28a745; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.vls-qual-moeglich-label::before { content: ""; display: inline-block; width: 8px; height: 8px; background: #ffc107; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* =============================================================================
   11. Seite: Statistiken
   ============================================================================= */

.vls-statistiken-wrap {}

/* KPI-Karten-Grid */
.vls-kpi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 540px) {
	.vls-kpi-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.vls-kpi-card {
	background: var(--vls-white);
	border: 1px solid #e3d9cc;
	border-radius: 8px;
	padding: 0.9rem 0.75rem;
	text-align: center;
	box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.vls-kpi-card--warn {
	border-color: var(--vls-danger);
	background: #fff5f5;
}

.vls-kpi-value {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--vls-dark);
	line-height: 1.1;
}

.vls-kpi-label {
	font-size: 0.72rem;
	color: #888;
	margin-top: 0.2rem;
	line-height: 1.3;
}

.vls-kpi-label small {
	display: block;
	font-size: 0.68rem;
}

/* Chart */
.vls-chart-wrap {
	background: var(--vls-white);
	border: 1px solid #e3d9cc;
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1.5rem;
}

/* Verlauf-Tabelle */
.vls-verlauf-wrap {}

.vls-verlauf-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}

.vls-verlauf-table thead th {
	background: var(--vls-dark);
	color: var(--vls-white);
	padding: 0.4rem 0.6rem;
	text-align: left;
	font-size: 0.75rem;
}

.vls-verlauf-table tbody td {
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid #f0eae0;
}

/* Punkte-Badges in Verlauf */
.vls-pts-badge {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
}

.vls-pts-top  { background: #d4edda; color: #155724; }
.vls-pts-ok   { background: #fff3cd; color: #856404; }
.vls-pts-zero { background: #f8d7da; color: #721c24; }

/* =============================================================================
   12. Seite: Mein Konto
   ============================================================================= */

.vls-konto-wrap {
	max-width: 520px;
}

.vls-konto-info-block,
.vls-konto-pw-block,
.vls-konto-logout-block {
	background: var(--vls-white);
	border: 1px solid #e3d9cc;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
}

.vls-konto-dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1rem;
	font-size: 0.88rem;
}

.vls-konto-dl dt {
	font-weight: 600;
	color: #555;
}

.vls-konto-dl dd {
	margin: 0;
	color: var(--vls-dark);
}

.vls-status-badge {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
}

.vls-status-confirmed { background: #d4edda; color: #155724; }
.vls-status-pending   { background: #fff3cd; color: #856404; }

.vls-konto-logout-block {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.vls-konto-logout-hint {
	font-size: 0.8rem;
	color: #888;
	margin: 0;
}

/* =============================================================================
   13. Gemeinsame Komponenten
   ============================================================================= */

/* --- Buttons --- */
.vls-btn {
	display: inline-block;
	padding: 0.45rem 1.1rem;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 0.85rem;
	font-family: inherit;
	font-weight: 600;
	transition: opacity 0.15s, background 0.15s;
	text-align: center;
}

.vls-btn:hover { opacity: 0.88; }

.vls-btn-primary {
	background: var(--vls-gold);
	color: var(--vls-white);
}

.vls-btn-logout,
.vls-btn-logout--konto {
	background: #e8e8e8;
	color: #555;
	border: 1px solid #ccc;
}

.vls-btn-logout:hover {
	background: #f8d7da;
	color: #721c24;
	border-color: #f5c2c7;
}

.vls-btn-save {
	background: var(--vls-oliv);
	color: var(--vls-white);
	font-size: 0.78rem;
	padding: 0.3rem 0.75rem;
}

/* --- Tabelle Scroll-Container --- */
.vls-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --- Placeholder (leere Zustände) --- */
.vls-placeholder {
	color: #aaa;
	font-size: 0.88rem;
	font-style: italic;
	text-align: center;
	padding: 2rem 1rem;
	background: var(--vls-white);
	border: 1px dashed #ddd;
	border-radius: 6px;
	margin: 0;
}

/* --- Match-Card (gemeinsam für Tipps + Spielplan) --- */
.vls-match-card {
	background: var(--vls-white);
	border: 1px solid var(--vls-tan);
	border-top: none;
	padding: 0.75rem 1rem;
}

.vls-match-card:first-child {
	border-top: 1px solid var(--vls-tan);
	border-radius: 6px 6px 0 0;
}

.vls-match-card:last-child {
	border-radius: 0 0 6px 6px;
}

.vls-match-card:only-child {
	border-top: 1px solid var(--vls-tan);
	border-radius: 6px;
}

.vls-match-card--locked { background: #faf6f0; }
.vls-match-card--open   { background: var(--vls-white); }

.vls-match-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-bottom: 0.4rem;
	font-size: 0.75rem;
	color: #777;
}

.vls-match-spieltag {
	background: var(--vls-oliv);
	color: var(--vls-white);
	font-size: 0.65rem;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 3px;
	letter-spacing: 0.02em;
}

.vls-match-datum { color: #555; }
.vls-match-ort   { color: #999; font-style: italic; }

.vls-match-teams {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.vls-team-block {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 1;
}

.vls-team-heim      { justify-content: flex-end; }
.vls-team-auswaerts { justify-content: flex-start; }

.vls-team-flag {
	width: 24px;
	height: 16px;
	object-fit: cover;
	border: 1px solid #e0e0e0;
	flex-shrink: 0;
}

.vls-team-name {
	font-size: 0.88rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 130px;
}

.vls-score-block {
	flex-shrink: 0;
	min-width: 56px;
	text-align: center;
}

.vls-score-display {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--vls-dark);
}

.vls-score-kolon {
	color: var(--vls-tan);
	margin: 0 2px;
}

.vls-score-pending {
	font-size: 0.95rem;
	color: #ccc;
	font-weight: 600;
}

/* Tipp-Eingabe-Felder im Tipp-Tab */
.vls-tipp-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
	padding-top: 0.4rem;
	border-top: 1px dashed #e8e0d4;
}

.vls-tipp-label {
	font-size: 0.75rem;
	color: #888;
	white-space: nowrap;
}

.vls-tipp-input {
	width: 42px;
	text-align: center;
	border: 1px solid var(--vls-tan);
	border-radius: 3px;
	padding: 3px 4px;
	font-size: 0.88rem;
	color: var(--vls-dark);
	background: var(--vls-white);
	-moz-appearance: textfield;
	font-family: inherit;
}

.vls-tipp-input::-webkit-outer-spin-button,
.vls-tipp-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.vls-tipp-input:focus {
	outline: 2px solid var(--vls-gold);
	border-color: var(--vls-gold);
}

.vls-tipp-input:disabled {
	background: #f0f0f0;
	color: #bbb;
	border-color: #ddd;
}

.vls-tipp-kolon {
	font-weight: 700;
	color: var(--vls-dark);
}

.vls-tipp-display {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--vls-oliv);
}

.vls-tipp-kein {
	color: #bbb;
	font-weight: 400;
	font-size: 0.82rem;
}

.vls-tipp-feedback {
	font-size: 0.75rem;
	margin-left: 0.3rem;
}

.vls-tipp-feedback.vls-ok  { color: var(--vls-success); }
.vls-tipp-feedback.vls-err { color: var(--vls-danger);  }