:root {
    --bg: #06151b;
    --bg-deep: #02090c;
    --panel: rgba(11, 36, 45, 0.92);
    --panel-2: #102f39;
    --line: rgba(255, 255, 255, 0.1);
    --text: #f4fbfd;
    --muted: #9eb3bb;
    --accent: #17b8c8;
    --accent-2: #67d9e4;
    --orange: #ff9f43;
    --live: #65df8c;
    --danger: #ff6b6b;
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
    --radius: 22px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg-deep);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 10% 0%, rgba(23, 184, 200, 0.16), transparent 32rem),
        radial-gradient(circle at 95% 20%, rgba(255, 159, 67, 0.08), transparent 28rem),
        linear-gradient(180deg, #081f27 0%, #041116 55%, #02090c 100%);
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

.app-shell {
    width: min(1320px, calc(100% - 32px));
    margin: 0 auto;
}

.topbar {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}

.brand-ball {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 3px solid var(--accent-2);
    color: var(--orange);
    font-size: 25px;
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.04);
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    font-size: 1.08rem;
    letter-spacing: .02em;
}

.brand small {
    margin-top: 2px;
    color: var(--muted);
    font-size: .78rem;
}

.connection-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    color: var(--muted);
    font-size: .82rem;
    white-space: nowrap;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
}

.connection-pill.is-live .status-dot {
    background: var(--live);
    box-shadow: 0 0 0 5px rgba(101,223,140,.1);
}

.connection-pill.is-live {
    color: #c7f9d5;
}

.connection-pill.is-fallback .status-dot {
    background: var(--orange);
}

.connection-pill.is-fallback {
    color: #ffd1a2;
}

.connection-pill.is-loading .status-dot {
    background: var(--accent);
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    50% { opacity: .35; transform: scale(.75); }
}

main {
    padding-bottom: 70px;
}

.hero {
    min-height: 330px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
    padding: 54px 0 48px;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent-2);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .17em;
}

.hero h1 {
    margin: 0;
    max-width: 780px;
    font-size: clamp(2.5rem, 7vw, 5.9rem);
    line-height: .94;
    letter-spacing: -.06em;
}

.hero-copy {
    max-width: 700px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
}

.hero-stat {
    min-width: 180px;
    padding: 30px 34px;
    text-align: center;
    border-radius: 28px;
    border: 1px solid rgba(101,223,140,.22);
    background: rgba(101,223,140,.07);
    box-shadow: var(--shadow);
}

.hero-stat span,
.hero-stat small {
    display: block;
}

.hero-stat span {
    color: var(--live);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
}

.hero-stat small {
    margin-top: 7px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.panel {
    margin-bottom: 22px;
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(16,47,57,.84), rgba(7,25,32,.9));
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: -.025em;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 0 16px;
    border: 1px solid rgba(103,217,228,.25);
    border-radius: 18px;
    background: rgba(0,0,0,.2);
    transition: border-color .2s, box-shadow .2s;
}

.search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(23,184,200,.10);
}

.search-icon {
    color: var(--accent-2);
    font-size: 1.7rem;
}

.search-box input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-size: clamp(1rem, 2vw, 1.15rem);
}

.search-box input::placeholder {
    color: #708a94;
}

.clear-search {
    display: none;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: rgba(255,255,255,.06);
    cursor: pointer;
    font-size: 1.4rem;
}

.clear-search.is-visible {
    display: grid;
    place-items: center;
}

.search-hint,
.muted {
    color: var(--muted);
}

.search-hint {
    margin: 10px 3px 0;
    font-size: .84rem;
}

.team-list {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.team-card {
    min-height: 76px;
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.team-logo {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
    background: #fff;
    color: #0b3139;
    font-weight: 900;
}

.team-logo img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

.team-info {
    min-width: 0;
}

.team-info strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .98rem;
}

.team-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    color: var(--muted);
    font-size: .72rem;
}

.chip {
    display: inline-flex;
    max-width: 230px;
    padding: 4px 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23,184,200,.1);
    color: #aeeff4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-button {
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: #95aab1;
    background: rgba(255,255,255,.035);
    cursor: pointer;
    font-size: 1.55rem;
}

.favorite-button:hover {
    border-color: rgba(255,159,67,.4);
    color: var(--orange);
}

.favorite-button.is-favorite {
    color: var(--orange);
    border-color: rgba(255,159,67,.28);
    background: rgba(255,159,67,.09);
}

.button {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--accent);
    color: #022027;
    font-weight: 800;
    cursor: pointer;
}

.button:disabled {
    opacity: .45;
    cursor: wait;
}

.button-secondary {
    border-color: var(--line);
    color: var(--text);
    background: rgba(255,255,255,.05);
}

.empty-state,
.loading-state,
.error-state {
    min-height: 80px;
    display: grid;
    place-items: center;
    padding: 18px;
    text-align: center;
    color: var(--muted);
}

.empty-state p,
.loading-state p,
.error-state p {
    margin: 0;
}

.empty-state small {
    display: block;
    margin-top: 6px;
}

.error-state {
    color: #ffc4c4;
}

.match-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.match-card {
    position: relative;
    display: block;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(255,255,255,.028);
    text-decoration: none;
    transition: transform .15s, border-color .15s, background .15s;
}

.match-card:hover {
    transform: translateY(-2px);
    border-color: rgba(103,217,228,.34);
    background: rgba(255,255,255,.045);
}

.match-card.is-live {
    border-color: rgba(101,223,140,.28);
}

.match-card-top,
.match-card-bottom,
.match-team-row {
    display: flex;
    align-items: center;
}

.match-card-top {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.series-name {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-badge {
    --league-badge-bg: rgba(23, 184, 200, .16);
    --league-badge-border: rgba(82, 230, 244, .55);
    --league-badge-text: #c7fbff;
    --league-badge-shadow: rgba(23, 184, 200, .56);
    --league-badge-glow: 0 0 19px 2px var(--league-badge-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(100%, 220px);
    min-height: 26px;
    padding: 4px 11px;
    overflow: hidden;
    border: 2px solid var(--league-badge-border);
    border-radius: 999px;
    background: var(--league-badge-bg);
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.20) inset, var(--league-badge-glow);
    color: var(--league-badge-text);
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .03em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.league-badge--large {
    min-height: 34px;
    padding: 7px 14px;
    font-size: .82rem;
}

.match-status {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.match-status.live {
    color: #0c4420;
    background: var(--live);
}

.match-status.finished {
    color: var(--muted);
    background: rgba(255,255,255,.08);
}

.match-status.scheduled {
    color: #bfeff3;
    background: rgba(23,184,200,.12);
}

.match-team-row {
    min-height: 42px;
    gap: 9px;
}

.match-team-row strong {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
}

.match-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    object-fit: contain;
    border-radius: 7px;
    background: #fff;
}

.match-logo-fallback {
    display: grid;
    place-items: center;
    color: #123740;
    font-size: .63rem;
    font-weight: 900;
}

.mini-serve {
    width: 11px;
    color: var(--orange);
    font-size: .62rem;
}

.sets {
    min-width: 26px;
    text-align: right;
    font-size: 1.25rem;
    font-weight: 900;
}

.match-card-bottom {
    min-height: 30px;
    gap: 9px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .75rem;
}

.current-points {
    margin-left: auto;
    color: var(--text);
    font-size: .95rem;
    font-weight: 900;
}

.favorite-marker {
    color: var(--orange);
}

footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 25px 0 48px;
    color: #60747b;
    font-size: .78rem;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 30;
    max-width: min(90vw, 520px);
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #132f38;
    box-shadow: var(--shadow);
    color: var(--text);
    opacity: 0;
    transform: translate(-50%, 16px);
    pointer-events: none;
    transition: .2s ease;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Scoreboard */

.scoreboard-page {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 30%, rgba(23,184,200,.14), transparent 38%),
        #02080b;
}

.scoreboard-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(12px, 2vw, 28px);
}

.scoreboard-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.back-link {
    justify-self: start;
    color: var(--muted);
    text-decoration: none;
    font-size: .85rem;
}

.scoreboard-series {
    max-width: 55vw;
    overflow: hidden;
    text-align: center;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(.75rem, 1.3vw, 1rem);
    font-weight: 700;
    letter-spacing: .04em;
}

.scoreboard-top .connection-pill {
    justify-self: end;
}

.scoreboard-main {
    display: grid;
    align-content: center;
    gap: clamp(18px, 4vh, 48px);
    padding: clamp(20px, 3vw, 45px) 0;
}

.score-status-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    color: var(--muted);
}

.score-status {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    font-size: clamp(.68rem, 1.1vw, .88rem);
    font-weight: 900;
    letter-spacing: .11em;
}

.score-status.is-live {
    color: #082f18;
    background: var(--live);
}

.score-status.is-finished {
    color: #c6d2d6;
    background: rgba(255,255,255,.09);
}

.score-time {
    font-size: clamp(.72rem, 1.1vw, .9rem);
}

.teams-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(14px, 3vw, 50px);
}

.score-team {
    min-width: 0;
    text-align: center;
}

.score-logo-wrap {
    width: clamp(82px, 11vw, 160px);
    height: clamp(82px, 11vw, 160px);
    display: grid;
    place-items: center;
    margin: 0 auto clamp(13px, 2.2vh, 24px);
    overflow: hidden;
    border-radius: 24%;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.score-logo {
    width: 100%;
    height: 100%;
    padding: 8%;
    object-fit: contain;
}

.score-logo-fallback {
    color: #143842;
    font-size: clamp(1.6rem, 5vw, 4rem);
    font-weight: 950;
}

.score-team h1 {
    min-height: 2.25em;
    display: grid;
    place-items: center;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: clamp(1.2rem, 3vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -.045em;
}

.serve-badge {
    display: inline-flex;
    margin-top: 14px;
    padding: 7px 11px;
    border: 1px solid rgba(255,159,67,.26);
    border-radius: 999px;
    color: var(--orange);
    background: rgba(255,159,67,.08);
    font-size: clamp(.62rem, 1vw, .85rem);
    font-weight: 850;
    letter-spacing: .08em;
}

.score-center {
    text-align: center;
}

.set-score-label {
    color: var(--muted);
    font-size: clamp(.65rem, 1vw, .9rem);
    font-weight: 900;
    letter-spacing: .18em;
}

.set-score,
.point-score {
    display: flex;
    justify-content: center;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
    font-weight: 950;
    line-height: .9;
    letter-spacing: -.06em;
}

.set-score {
    margin-top: 7px;
    color: var(--accent-2);
    font-size: clamp(2.4rem, 6vw, 6.5rem);
}

.point-score {
    margin-top: clamp(20px, 4vh, 44px);
    font-size: clamp(4rem, 12vw, 13rem);
    text-shadow: 0 10px 50px rgba(23,184,200,.08);
}

.colon {
    margin: 0 .13em;
    color: #6f8890;
    font-size: .72em;
}

.current-set-label {
    margin-top: 14px;
    color: var(--muted);
    font-size: clamp(.8rem, 1.4vw, 1.15rem);
    font-weight: 750;
}

.set-history-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
}

.set-history {
    display: flex;
    justify-content: center;
    gap: 9px;
    min-width: max-content;
    padding: 4px;
}

.set-pill {
    min-width: 105px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    text-align: center;
    background: rgba(255,255,255,.025);
}

.set-pill small,
.set-pill strong {
    display: block;
}

.set-pill small {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: .65rem;
}

.set-pill strong {
    font-size: 1rem;
}

.set-pill.is-current {
    border-color: rgba(23,184,200,.4);
    background: rgba(23,184,200,.08);
}

.scoreboard-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 0;
    color: var(--muted);
    font-size: .75rem;
}

.control-buttons {
    display: flex;
    gap: 8px;
}

:fullscreen .scoreboard-shell {
    width: 100vw;
    height: 100vh;
}

@media (max-width: 980px) {
    .match-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teams-score {
        grid-template-columns: 1fr minmax(180px, .8fr) 1fr;
        gap: 14px;
    }
}

@media (max-width: 720px) {
    .app-shell {
        width: min(100% - 20px, 1320px);
    }

    .topbar {
        min-height: 72px;
    }

    .brand small {
        display: none;
    }

    .hero {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 42px 2px 34px;
    }

    .hero-stat {
        display: none;
    }

    .panel {
        padding: 18px;
        border-radius: 18px;
    }

    .section-heading {
        align-items: flex-end;
    }

    .match-grid {
        grid-template-columns: 1fr;
    }

    .team-card {
        grid-template-columns: 46px 1fr auto;
        gap: 10px;
    }

    .team-logo {
        width: 44px;
        height: 44px;
    }

    .scoreboard-shell {
        padding: 10px;
    }

    .scoreboard-top {
        grid-template-columns: auto 1fr auto;
    }

    .back-link {
        font-size: 0;
    }

    .back-link::before {
        content: "←";
        font-size: 1.2rem;
    }

    .scoreboard-series {
        max-width: 45vw;
    }

    .scoreboard-top .connection-pill {
        padding: 7px 9px;
    }

    .teams-score {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "team1 team2"
            "center center";
        align-items: start;
    }

    .score-team-left { grid-area: team1; }
    .score-team-right { grid-area: team2; }
    .score-center {
        grid-area: center;
        margin-top: 10px;
    }

    .score-team h1 {
        min-height: 2.4em;
        font-size: clamp(1.05rem, 5vw, 1.7rem);
    }

    .score-logo-wrap {
        width: 78px;
        height: 78px;
        margin-bottom: 10px;
    }

    .set-score {
        font-size: 2.8rem;
    }

    .point-score {
        margin-top: 14px;
        font-size: clamp(4.8rem, 25vw, 8rem);
    }

    .set-history {
        justify-content: flex-start;
    }

    .scoreboard-controls {
        align-items: flex-end;
    }

    .scoreboard-controls > span {
        max-width: 38vw;
    }

    .control-buttons {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .control-buttons .button {
        min-height: 38px;
        padding: 0 10px;
        font-size: .76rem;
    }
}

/* v2: WVV + DVV, Filter und Quellenkennzeichnung */
.filter-stack {
    display: grid;
    gap: 14px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.filter-row-compact {
    margin-top: 14px;
}

.filter-label {
    min-width: 72px;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.filter-button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,.035);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 800;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.filter-button:hover {
    transform: translateY(-1px);
    border-color: rgba(103,217,228,.28);
    color: var(--text);
}

.filter-button.is-active {
    border-color: rgba(23,184,200,.42);
    color: #d9fbff;
    background: rgba(23,184,200,.14);
}

.filter-button-live.is-active {
    border-color: rgba(101,223,140,.38);
    color: #c8f9d6;
    background: rgba(101,223,140,.1);
}

.section-count {
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
}

.source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: #dce9ed;
    background: rgba(255,255,255,.055);
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .08em;
    line-height: 1;
}

.source-badge.source-wvv {
    border-color: rgba(23,184,200,.34);
    color: #b9f6fb;
    background: rgba(23,184,200,.11);
}

.source-badge.source-dvv {
    border-color: rgba(255,159,67,.34);
    color: #ffd2a6;
    background: rgba(255,159,67,.1);
}

.team-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.team-title-line strong {
    min-width: 0;
}

.match-source-series {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.scoreboard-series {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.scoreboard-series-main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Wichtig: author CSS darf das HTML-hidden-Attribut nicht übersteuern. */
.serve-badge[hidden],
.score-logo[hidden],
.score-logo-fallback[hidden] {
    display: none !important;
}

@media (max-width: 720px) {
    .filter-label {
        width: 100%;
        min-width: 0;
        margin-bottom: 1px;
    }

    .filter-button {
        flex: 1 1 auto;
    }

    .section-heading .section-count {
        display: none;
    }
}

/* v3 – Benutzerkonto & gespeicherte Spiele */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-pill {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    color: var(--text);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 750;
}

.account-pill:hover {
    border-color: rgba(103,217,228,.35);
    background: rgba(255,255,255,.065);
}

.account-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(23,184,200,.14);
    color: var(--accent-2);
    font-weight: 900;
}

.account-pill.is-logged-in .account-avatar {
    background: var(--accent);
    color: #03242a;
}

.inline-link {
    color: var(--accent-2);
    text-underline-offset: 3px;
}

.account-promo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.account-promo h2 {
    margin: 0 0 8px;
}

.account-promo p {
    margin: 0;
}

.account-promo-actions {
    display: flex;
    gap: 9px;
    flex: 0 0 auto;
}

.account-promo-actions .button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.match-card-shell {
    position: relative;
    min-width: 0;
}

.match-card-shell > .match-card {
    height: 100%;
    padding-bottom: 54px;
}

.match-save-button {
    position: absolute;
    right: 13px;
    bottom: 12px;
    z-index: 4;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,159,67,.25);
    border-radius: 12px;
    background: rgba(4,17,22,.92);
    color: #8aa0a8;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.match-save-button:hover,
.match-save-button.is-saved {
    color: var(--orange);
    border-color: rgba(255,159,67,.5);
    background: rgba(255,159,67,.09);
}

.match-card-archived {
    cursor: default;
    opacity: .82;
}

/* Auth-Seiten */
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
}

.auth-shell {
    width: min(100%, 520px);
}

.auth-shell-wide {
    width: min(100%, 640px);
}

.auth-brand {
    display: inline-flex;
    margin: 0 0 14px 4px;
    color: var(--muted);
    text-decoration: none;
    font-size: .88rem;
}

.auth-brand:hover {
    color: var(--text);
}

.auth-card {
    padding: clamp(24px, 5vw, 42px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(16,47,57,.96), rgba(5,20,26,.98));
    box-shadow: var(--shadow);
}

.auth-card h1 {
    margin: 0;
    font-size: clamp(2rem, 8vw, 3.5rem);
    letter-spacing: -.05em;
}

.auth-copy {
    margin: 12px 0 26px;
    color: var(--muted);
    line-height: 1.55;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.form-field {
    display: grid;
    gap: 7px;
}

.form-field > span {
    color: #dce8eb;
    font-size: .84rem;
    font-weight: 750;
}

.form-field > small {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.4;
}

.form-field input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    outline: 0;
    background: rgba(0,0,0,.22);
    color: var(--text);
}

.form-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(23,184,200,.09);
}

.auth-submit {
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
}

.auth-button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 22px;
    padding-top: 19px;
    border-top: 1px solid var(--line);
}

.auth-links a {
    color: var(--accent-2);
    font-size: .82rem;
    text-decoration: none;
}

.form-alert {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: .84rem;
    line-height: 1.45;
}

.form-alert-error {
    border: 1px solid rgba(255,107,107,.25);
    background: rgba(255,107,107,.08);
    color: #ffcaca;
}

.form-alert-success {
    border: 1px solid rgba(101,223,140,.25);
    background: rgba(101,223,140,.08);
    color: #c9f8d7;
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 24px 0;
}

.account-stats > div {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
    text-align: center;
}

.account-stats strong,
.account-stats span {
    display: block;
}

.account-stats strong {
    color: var(--accent-2);
    font-size: 2.1rem;
}

.account-stats span {
    margin-top: 4px;
    color: var(--muted);
    font-size: .76rem;
}

.account-actions {
    display: grid;
    gap: 9px;
}

.logout-form {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.text-button {
    border: 0;
    background: transparent;
    color: #d98b8b;
    cursor: pointer;
    font-size: .82rem;
}

@media (max-width: 720px) {
    .topbar-actions {
        gap: 6px;
    }

    .account-name {
        display: none;
    }

    .account-pill {
        padding-right: 6px;
    }

    .connection-pill #connectionText {
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-promo {
        align-items: stretch;
        flex-direction: column;
    }

    .account-promo-actions {
        width: 100%;
    }

    .account-promo-actions .button {
        flex: 1;
        justify-content: center;
    }
}

/* v3.1: Liga-Favoriten + kompakte LIVE-Übersicht */
.favorites-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.favorites-columns > .panel {
    min-width: 0;
}

.search-type-row {
    margin-bottom: 14px;
}

.league-list {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.league-card {
    min-height: 82px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.league-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(23,184,200,.1);
    font-size: 1.5rem;
}

.league-info {
    min-width: 0;
}

.league-info strong {
    font-size: 1rem;
}

.league-name {
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-period-row {
    margin-bottom: 20px;
}

.compact-copy {
    max-width: 760px;
    margin: 8px 0 0;
    font-size: .83rem;
    line-height: 1.45;
}

.live-count-badge {
    color: var(--live);
}

.live-dashboard-panel {
    overflow: hidden;
}

.live-match-board {
    --live-columns: 2;
    display: grid;
    grid-template-columns: repeat(var(--live-columns), minmax(0, 1fr));
    gap: 10px;
}

.live-match-board[data-density="large"] {
    --live-columns: 2;
}

.live-match-board[data-density="normal"] {
    --live-columns: 3;
}

.live-match-board[data-density="compact"] {
    --live-columns: 4;
    gap: 8px;
}

.live-match-board[data-density="dense"] {
    --live-columns: 5;
    gap: 7px;
}

.live-mini-card {
    min-width: 0;
    display: grid;
    gap: 7px;
    padding: 13px 14px;
    border: 1px solid rgba(101,223,140,.24);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(101,223,140,.055), rgba(255,255,255,.025));
    text-decoration: none;
    transition: transform .15s, border-color .15s, background .15s;
}

.live-mini-card:hover {
    transform: translateY(-1px);
    border-color: rgba(101,223,140,.45);
    background: rgba(101,223,140,.075);
}

.live-mini-head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.live-dot-label {
    flex: 0 0 auto;
    color: var(--live);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.live-mini-series {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-mini-team {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.live-mini-team strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
}

.live-mini-team > span {
    min-width: 20px;
    text-align: right;
    color: var(--accent-2);
    font-size: 1.05rem;
    font-weight: 950;
}

.live-mini-score {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 7px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .7rem;
}

.live-mini-score strong {
    color: var(--text);
    font-size: 1.05rem;
}

.live-match-board[data-density="compact"] .live-mini-card,
.live-match-board[data-density="dense"] .live-mini-card {
    padding: 10px 11px;
}

.live-match-board[data-density="compact"] .live-mini-team strong,
.live-match-board[data-density="dense"] .live-mini-team strong {
    font-size: .76rem;
}

.live-match-board[data-density="dense"] .live-mini-series {
    display: none;
}

.live-match-board[data-density="dense"] .source-badge {
    padding: 2px 5px;
    font-size: .56rem;
}

.account-stats {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
    .live-match-board[data-density="normal"],
    .live-match-board[data-density="compact"],
    .live-match-board[data-density="dense"] {
        --live-columns: 3;
    }
}

@media (max-width: 820px) {
    .favorites-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .live-match-board,
    .live-match-board[data-density="large"],
    .live-match-board[data-density="normal"],
    .live-match-board[data-density="compact"],
    .live-match-board[data-density="dense"] {
        --live-columns: 2;
    }
}

@media (max-width: 560px) {
    .live-match-board,
    .live-match-board[data-density="large"],
    .live-match-board[data-density="normal"],
    .live-match-board[data-density="compact"],
    .live-match-board[data-density="dense"] {
        --live-columns: 1;
    }

    .live-mini-card {
        padding: 10px 12px;
    }

    .live-mini-head {
        gap: 6px;
    }

    .live-mini-team strong {
        font-size: .8rem;
    }

    .live-mini-score {
        padding-top: 5px;
    }

    .league-card {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .league-icon {
        width: 44px;
        height: 44px;
    }

    .account-stats {
        grid-template-columns: 1fr;
    }
}

/* Dedizierte Meine-LIVE-Spiele-Seite */
.section-heading-actions,
.live-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.compact-action {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: .76rem;
}

.live-page {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(23,184,200,.11), transparent 35%),
        #02080b;
}

.live-page-shell {
    min-height: 100vh;
    height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 18px 22px 14px;
}

.live-page-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 66px;
}

.live-page-header h1 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2.5rem);
    letter-spacing: -.045em;
}

.live-page-main {
    min-height: 0;
    display: grid;
    align-items: stretch;
    padding: 10px 0;
}

.live-page-grid {
    --cols: 2;
    --rows: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
    gap: 10px;
}

.live-page-grid[data-density="xl"] { --cols: 2; --rows: 1; }
.live-page-grid[data-density="large"] { --cols: 2; --rows: 2; }
.live-page-grid[data-density="normal"] { --cols: 4; --rows: 2; }
.live-page-grid[data-density="compact"] { --cols: 4; --rows: 3; gap: 8px; }
.live-page-grid[data-density="dense"] { --cols: 5; --rows: 4; gap: 7px; }
.live-page-grid[data-density="ultra"] { --cols: 6; --rows: 5; gap: 6px; }

.live-page-card {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr 1fr auto;
    gap: clamp(4px, .8vh, 10px);
    padding: clamp(9px, 1.4vw, 18px);
    overflow: hidden;
    border: 1px solid rgba(101,223,140,.24);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(101,223,140,.055), rgba(8,27,34,.88));
    text-decoration: none;
}

.live-page-card-head {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.live-page-series {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: clamp(.58rem, .8vw, .76rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-page-team {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12px auto;
    align-items: center;
    gap: 8px;
}

.live-page-team strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(.75rem, 1.5vw, 1.25rem);
}

.live-page-team b {
    color: var(--accent-2);
    font-size: clamp(1.05rem, 2vw, 1.8rem);
}

.serve-dot {
    color: var(--orange);
    font-size: .7rem;
}

.live-page-score {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: clamp(.58rem, .8vw, .72rem);
}

.live-page-score strong {
    color: var(--text);
    font-size: clamp(1rem, 2.1vw, 1.8rem);
    font-variant-numeric: tabular-nums;
}

.live-page-grid[data-density="dense"] .live-page-card,
.live-page-grid[data-density="ultra"] .live-page-card {
    border-radius: 12px;
    padding: 8px 9px;
}

.live-page-grid[data-density="ultra"] .live-page-series {
    display: none;
}

.live-page-grid[data-density="ultra"] .live-page-team strong {
    font-size: .7rem;
}

.live-page-grid[data-density="ultra"] .live-page-score strong {
    font-size: 1rem;
}

.live-page-empty {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 0;
    color: var(--muted);
    text-align: center;
}

.live-page-empty strong {
    color: var(--text);
    font-size: clamp(1.4rem, 4vw, 3rem);
}

.live-page-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0 0;
    color: var(--muted);
    font-size: .72rem;
}

@media (max-width: 900px) {
    .live-page {
        overflow: auto;
    }

    .live-page-shell {
        height: auto;
        min-height: 100vh;
    }

    .live-page-header {
        grid-template-columns: auto 1fr;
    }

    .live-page-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .live-page-grid,
    .live-page-grid[data-density="xl"],
    .live-page-grid[data-density="large"],
    .live-page-grid[data-density="normal"],
    .live-page-grid[data-density="compact"],
    .live-page-grid[data-density="dense"],
    .live-page-grid[data-density="ultra"] {
        --cols: 2;
        --rows: auto;
        grid-template-rows: none;
        grid-auto-rows: minmax(118px, auto);
    }
}

@media (max-width: 560px) {
    .section-heading-actions {
        align-items: flex-end;
        flex-direction: column;
    }

    .live-page-shell {
        padding: 12px 10px 10px;
    }

    .live-page-grid,
    .live-page-grid[data-density="xl"],
    .live-page-grid[data-density="large"],
    .live-page-grid[data-density="normal"],
    .live-page-grid[data-density="compact"],
    .live-page-grid[data-density="dense"],
    .live-page-grid[data-density="ultra"] {
        --cols: 1;
        grid-auto-rows: minmax(110px, auto);
    }

    .live-page-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .live-page-team strong {
        font-size: .86rem;
    }

    .live-page-team b {
        font-size: 1.2rem;
    }
}

/* v3.2: VBL + eingeklappter Favoritenfinder + getrennte Spielbereiche */
.source-badge.source-vbl {
    border-color: rgba(177, 127, 255, .38);
    color: #e3ccff;
    background: rgba(151, 93, 236, .12);
}

.live-shortcut {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(101,223,140,.24);
    border-radius: 999px;
    color: #c8f9d6;
    background: rgba(101,223,140,.075);
    text-decoration: none;
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
}

.live-shortcut:hover {
    border-color: rgba(101,223,140,.45);
    background: rgba(101,223,140,.12);
}

.finder-panel {
    padding: 0;
    overflow: hidden;
}

.finder-panel > summary {
    list-style: none;
}

.finder-panel > summary::-webkit-details-marker {
    display: none;
}

.finder-summary {
    min-height: 126px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(22px, 3vw, 34px);
    cursor: pointer;
    user-select: none;
}

.finder-summary h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: -.025em;
}

.finder-toggle {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(103,217,228,.24);
    border-radius: 50%;
    color: var(--accent-2);
    background: rgba(23,184,200,.08);
    font-size: 1.8rem;
    line-height: 1;
    transition: transform .2s ease, background .2s ease;
}

.finder-panel[open] .finder-toggle {
    transform: rotate(45deg);
    background: rgba(23,184,200,.14);
}

.finder-content {
    padding: 0 clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px);
    border-top: 1px solid var(--line);
}

.finder-content > .search-type-row {
    padding-top: 24px;
}

.finder-favorites {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.finder-subpanel {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(0,0,0,.11);
}

.finder-subpanel .section-heading {
    margin-bottom: 14px;
}

.finder-subpanel h3 {
    margin: 0;
    font-size: 1.18rem;
}

.team-period-row,
.saved-period-row {
    margin-bottom: 20px;
}

#teamMatchesSection,
#leagueMatchesSection,
#savedMatchesSection {
    scroll-margin-top: 18px;
}

@media (max-width: 980px) {
    .live-shortcut {
        display: none;
    }
}

@media (max-width: 720px) {
    .finder-summary {
        min-height: 108px;
        padding: 20px 18px;
    }

    .finder-content {
        padding: 0 18px 18px;
    }

    .finder-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .finder-summary .compact-copy {
        display: none;
    }

    .finder-subpanel {
        padding: 14px;
    }

    .team-period-row,
    .league-period-row,
    .saved-period-row {
        gap: 7px;
    }

    .team-period-row .filter-label,
    .league-period-row .filter-label,
    .saved-period-row .filter-label {
        flex-basis: 100%;
        min-width: 0;
    }
}


/* v3.2.1: kompakte LIVE-Karten mit Satzhistorie */
.match-set-results {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 10px;
    padding-top: 10px;
    overflow-x: auto;
    border-top: 1px solid rgba(255,255,255,.055);
    scrollbar-width: none;
}

.match-set-results::-webkit-scrollbar {
    display: none;
}

.match-set-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 7px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    color: var(--muted);
    background: rgba(255,255,255,.025);
    font-variant-numeric: tabular-nums;
}

.match-set-chip small {
    font-size: .58rem;
    font-weight: 800;
}

.match-set-chip b {
    color: var(--text);
    font-size: .72rem;
}

.match-set-chip.is-current {
    border-color: rgba(23,184,200,.35);
    color: var(--accent-2);
    background: rgba(23,184,200,.085);
}

.live-page-card {
    grid-template-rows: auto auto auto auto auto;
}

.live-page-setline {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: clamp(3px, .45vw, 7px);
    overflow: hidden;
    white-space: nowrap;
}

.live-page-setline.is-empty {
    color: #6c8188;
    font-size: clamp(.5rem, .65vw, .68rem);
}

.live-page-set {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 3px 5px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 7px;
    color: var(--muted);
    background: rgba(255,255,255,.022);
    font-variant-numeric: tabular-nums;
}

.live-page-set small {
    font-size: clamp(.46rem, .58vw, .62rem);
    font-weight: 800;
}

.live-page-set b {
    color: var(--text);
    font-size: clamp(.58rem, .78vw, .78rem);
}

.live-page-set.is-current {
    border-color: rgba(23,184,200,.32);
    color: var(--accent-2);
    background: rgba(23,184,200,.075);
}

/* Je mehr Spiele, desto stärker werden Header, Abstände und Satzchips verdichtet. */
.live-page-grid[data-density="compact"] .live-page-card,
.live-page-grid[data-density="dense"] .live-page-card,
.live-page-grid[data-density="ultra"] .live-page-card {
    gap: 4px;
}

.live-page-grid[data-density="dense"] .live-page-card-head,
.live-page-grid[data-density="ultra"] .live-page-card-head {
    gap: 4px;
}

.live-page-grid[data-density="dense"] .live-page-set,
.live-page-grid[data-density="ultra"] .live-page-set {
    padding: 2px 4px;
}

.live-page-grid[data-density="ultra"] .live-page-set small {
    display: none;
}

.live-page-grid[data-density="ultra"] .live-page-set b {
    font-size: .58rem;
}

.live-page-grid[data-density="ultra"] .live-dot-label,
.live-page-grid[data-density="ultra"] .source-badge {
    font-size: .52rem;
    padding: 2px 5px;
}

.live-page-grid[data-density="ultra"] .live-page-team b {
    font-size: .86rem;
}

.live-page-grid[data-density="ultra"] .live-page-score {
    padding-top: 3px;
}

.live-page-grid[data-density="ultra"] .live-page-score span {
    font-size: .5rem;
}

.live-page-grid[data-density="ultra"] .live-page-score strong {
    font-size: .9rem;
}

@media (max-width: 1000px) {
    .live-page {
        overflow: auto;
    }

    .live-page-shell {
        height: auto;
        min-height: 100vh;
    }

    .live-page-grid,
    .live-page-grid[data-density] {
        grid-template-rows: none;
        grid-auto-rows: minmax(132px, auto);
    }
}

@media (max-width: 720px) {
    .live-page-grid,
    .live-page-grid[data-density] {
        --cols: 1;
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(140px, auto);
    }

    .live-page-setline {
        overflow-x: auto;
        scrollbar-width: none;
    }
}

/* v3.3: kompakte tabellarische Satzanzeige auf /live.php */
.live-page-main {
    align-items: start;
}

.live-page-grid {
    grid-template-rows: none;
    grid-auto-rows: auto;
    align-content: start;
}

.live-page-card {
    display: block;
    min-height: 0;
    padding: 12px 14px;
    border-radius: 14px;
}

.live-page-card-head {
    margin-bottom: 9px;
}

.live-page-current-set {
    margin-left: auto;
    color: var(--accent-2);
    font-size: .68rem;
    font-weight: 850;
    white-space: nowrap;
}

.live-score-table {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 11px;
    background: rgba(0,0,0,.09);
}

.live-score-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(5, minmax(26px, 34px)) minmax(42px, 54px);
    align-items: stretch;
}

.live-score-labels {
    min-height: 24px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #779097;
    background: rgba(255,255,255,.018);
    font-size: .53rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.live-score-team-label,
.live-set-label,
.live-set-total-label,
.live-set-cell,
.live-set-total {
    display: grid;
    place-items: center;
    min-width: 0;
    border-left: 1px solid rgba(255,255,255,.055);
    font-variant-numeric: tabular-nums;
}

.live-score-team-label {
    place-items: center start;
    padding-left: 10px;
    border-left: 0;
}

.live-set-total-label {
    color: #b8d2d8;
}

.live-score-team-row {
    min-height: 44px;
}

.live-score-team-row + .live-score-team-row {
    border-top: 1px solid rgba(255,255,255,.07);
}

.live-score-team-name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
}

.live-score-team-name strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(.72rem, .92vw, .96rem);
}

.live-score-serve {
    width: 8px;
    flex: 0 0 8px;
    color: transparent;
    font-size: .6rem;
}

.live-score-serve.is-serving {
    color: var(--orange);
}

.live-set-cell {
    color: #b1c1c6;
    font-size: clamp(.72rem, .88vw, .9rem);
    font-weight: 750;
}

.live-set-label.is-current,
.live-set-cell.is-current {
    color: #dcfbff;
    background: rgba(23,184,200,.12);
}

.live-set-total {
    color: var(--accent-2);
    background: rgba(23,184,200,.055);
    font-size: clamp(.92rem, 1.15vw, 1.2rem);
    font-weight: 950;
}

.live-page-grid[data-density="large"] .live-page-card {
    max-width: 760px;
}

.live-page-grid[data-density="compact"] .live-page-card,
.live-page-grid[data-density="dense"] .live-page-card,
.live-page-grid[data-density="ultra"] .live-page-card {
    padding: 8px 9px;
}

.live-page-grid[data-density="dense"] .live-page-card-head,
.live-page-grid[data-density="ultra"] .live-page-card-head {
    margin-bottom: 6px;
}

.live-page-grid[data-density="dense"] .live-score-row,
.live-page-grid[data-density="ultra"] .live-score-row {
    grid-template-columns: minmax(0, 1fr) repeat(5, minmax(22px, 28px)) minmax(36px, 44px);
}

.live-page-grid[data-density="dense"] .live-score-team-row,
.live-page-grid[data-density="ultra"] .live-score-team-row {
    min-height: 36px;
}

.live-page-grid[data-density="dense"] .live-score-team-name,
.live-page-grid[data-density="ultra"] .live-score-team-name {
    padding-inline: 7px;
}

.live-page-grid[data-density="dense"] .live-score-team-name strong,
.live-page-grid[data-density="ultra"] .live-score-team-name strong {
    font-size: .68rem;
}

.live-page-grid[data-density="dense"] .live-set-cell,
.live-page-grid[data-density="ultra"] .live-set-cell {
    font-size: .68rem;
}

.live-page-grid[data-density="ultra"] .live-score-labels {
    min-height: 20px;
    font-size: .46rem;
}

.live-page-grid[data-density="ultra"] .live-page-current-set,
.live-page-grid[data-density="ultra"] .live-page-series {
    display: none;
}

@media (min-width: 1500px) {
    .live-page-grid[data-count="3"],
    .live-page-grid[data-count="4"] {
        grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .live-page-grid {
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
    }
}

@media (max-width: 560px) {
    .live-page-card {
        padding: 10px;
    }

    .live-page-card-head {
        margin-bottom: 7px;
    }

    .live-score-row {
        grid-template-columns: minmax(0, 1fr) repeat(5, 26px) 40px;
    }

    .live-score-labels {
        font-size: .46rem;
    }

    .live-score-team-row {
        min-height: 42px;
    }

    .live-score-team-name {
        padding: 0 7px;
    }

    .live-score-team-name strong {
        font-size: .72rem;
    }

    .live-set-cell {
        font-size: .7rem;
    }

    .live-set-total {
        font-size: .95rem;
    }
}


/* v3.4: gleiche Ergebnistabelle auf allen Spielkarten */
.live-score-table.sets-3 .live-score-row,
.match-score-table.sets-3 .live-score-row {
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(30px, 40px)) minmax(46px, 58px);
}

.match-score-table {
    margin-top: 4px;
}

.match-card .live-score-team-row {
    min-height: 44px;
}

.match-card .live-score-team-name strong {
    font-size: .82rem;
}

.match-card .live-score-labels {
    min-height: 24px;
}

.match-card-bottom {
    margin-top: 10px;
}

.live-page-grid[data-density="dense"] .live-score-table.sets-3 .live-score-row,
.live-page-grid[data-density="ultra"] .live-score-table.sets-3 .live-score-row {
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(24px, 31px)) minmax(38px, 46px);
}

/* Admin */
.admin-shortcut {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255,159,67,.28);
    border-radius: 999px;
    color: #ffd19f;
    background: rgba(255,159,67,.08);
    text-decoration: none;
    font-size: .76rem;
    font-weight: 800;
}

.admin-hero {
    min-height: 240px;
}

.admin-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.admin-kpi {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(16,47,57,.84), rgba(7,25,32,.9));
    box-shadow: var(--shadow);
}

.admin-kpi small,
.admin-kpi strong,
.admin-kpi span {
    display: block;
}

.admin-kpi small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.admin-kpi strong {
    margin-top: 8px;
    color: var(--accent-2);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1;
}

.admin-kpi span {
    margin-top: 8px;
    color: var(--muted);
    font-size: .78rem;
}

.analytics-bars {
    height: 230px;
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    padding-top: 12px;
}

.analytics-day {
    height: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 4px;
    align-items: end;
    text-align: center;
}

.analytics-bar-wrap {
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
}

.analytics-bar {
    width: min(28px, 72%);
    min-height: 4px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
}

.analytics-day strong {
    font-size: .75rem;
}

.analytics-day span {
    color: var(--muted);
    font-size: .62rem;
}

.admin-simple-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.admin-simple-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-top: 1px solid var(--line);
}

.admin-simple-row:first-child {
    border-top: 0;
}

.admin-simple-head {
    color: var(--muted);
    background: rgba(255,255,255,.025);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-simple-row > :last-child {
    text-align: right;
}

.admin-simple-row code {
    overflow: hidden;
    color: #dbe9ec;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-list {
    display: grid;
    gap: 10px;
}

.admin-user-card {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) minmax(240px, .8fr) auto;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.admin-user-card.is-disabled {
    opacity: .62;
}

.admin-user-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin-user-title strong {
    overflow-wrap: anywhere;
}

.admin-role-badge {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    color: #bad0d6;
    background: rgba(255,255,255,.06);
    font-size: .64rem;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-role-badge.is-admin {
    color: #ffd19f;
    background: rgba(255,159,67,.1);
}

.admin-role-badge.is-blocked {
    color: #ffb4b4;
    background: rgba(255,107,107,.09);
}

.admin-user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 7px;
    color: var(--muted);
    font-size: .7rem;
}

.admin-user-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-user-counts span {
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(23,184,200,.07);
    color: var(--muted);
    font-size: .7rem;
}

.admin-user-counts b {
    color: var(--accent-2);
}

.admin-user-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.button-danger {
    border-color: rgba(255,107,107,.25);
    background: rgba(255,107,107,.09);
    color: #ffc3c3;
}

@media (max-width: 980px) {
    .admin-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-user-card {
        grid-template-columns: 1fr;
    }

    .admin-user-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .match-card .live-score-row,
    .live-page-card .live-score-row {
        grid-template-columns: minmax(0, 1fr) repeat(5, minmax(25px, 31px)) minmax(40px, 48px);
    }

    .match-card .live-score-table.sets-3 .live-score-row,
    .live-page-card .live-score-table.sets-3 .live-score-row {
        grid-template-columns: minmax(0, 1fr) repeat(3, minmax(29px, 36px)) minmax(42px, 50px);
    }

    .admin-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .analytics-bars {
        height: 180px;
        gap: 3px;
        overflow-x: auto;
    }

    .analytics-day span {
        font-size: .52rem;
    }

    .admin-shortcut {
        min-height: 34px;
        padding-inline: 9px;
        font-size: .68rem;
    }
}


/* v3.5 LIVE-Ansichtsfilter */
.live-view-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.live-view-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,.035);
    cursor: pointer;
    font-weight: 800;
    font-size: .82rem;
}

.live-view-button:hover {
    border-color: rgba(103,217,228,.35);
    color: var(--text);
}

.live-view-button.is-active {
    border-color: rgba(23,184,200,.55);
    color: #d9fbff;
    background: rgba(23,184,200,.13);
}

.live-view-count {
    min-width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--accent-2);
    background: rgba(0,0,0,.22);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}

.live-view-button.is-active .live-view-count {
    color: #031d22;
    background: var(--accent-2);
}

/* "SPIEL BEENDET" als eindeutige Badge; keine zweite Ergebniszeile darunter */
.match-status.finished {
    white-space: nowrap;
}

.match-card:not(.is-live) .match-card-bottom:empty {
    display: none;
}

@media (max-width: 720px) {
    .live-view-filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-view-button {
        justify-content: space-between;
        width: 100%;
    }
}


/* =========================================================
   v3.6 Navigation / reduziertes Dashboard / Teamverwaltung
   ========================================================= */

body.drawer-open {
    overflow: hidden;
}

.app-menu-toggle {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 120;
    width: 44px;
    height: 44px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(6,21,27,.94);
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
    cursor: pointer;
}

.app-menu-toggle span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
}

.app-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 125;
    background: rgba(0,0,0,.56);
    opacity: 0;
    transition: opacity .18s ease;
}

.app-drawer-backdrop.is-visible {
    opacity: 1;
}

.app-drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 130;
    width: min(360px, 88vw);
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 18px;
    border-right: 1px solid var(--line);
    background:
        radial-gradient(circle at 20% 0%, rgba(23,184,200,.12), transparent 22rem),
        #071a21;
    box-shadow: 30px 0 70px rgba(0,0,0,.42);
    transform: translateX(-104%);
    transition: transform .2s ease;
}

.app-drawer.is-open {
    transform: translateX(0);
}

.app-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.drawer-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.drawer-brand strong,
.drawer-brand small {
    display: block;
}

.drawer-brand small {
    margin-top: 2px;
    color: var(--muted);
    font-size: .72rem;
}

.drawer-close {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
}

.drawer-nav {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 18px 0;
    overflow-y: auto;
}

.drawer-nav-item {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #c6d7dc;
    text-decoration: none;
    font-weight: 700;
}

.drawer-nav-item:hover {
    border-color: var(--line);
    background: rgba(255,255,255,.035);
    color: var(--text);
}

.drawer-nav-item.is-active {
    border-color: rgba(23,184,200,.28);
    background: rgba(23,184,200,.10);
    color: #d7fbff;
}

.drawer-nav-icon {
    width: 27px;
    display: inline-grid;
    place-items: center;
    color: var(--accent-2);
    font-size: 1.05rem;
}

.drawer-footer {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.drawer-footer small,
.drawer-footer strong {
    display: block;
}

.drawer-footer small {
    color: var(--muted);
    font-size: .7rem;
}

.drawer-footer strong {
    margin-top: 5px;
    overflow-wrap: anywhere;
    font-size: .82rem;
}

.topbar-with-menu {
    padding-left: 58px;
}

/* Dashboard */
.dashboard-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.dashboard-topbar {
    min-height: 82px;
}

.dashboard-main {
    padding: 30px 0 50px;
}

.dashboard-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.dashboard-heading h1 {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4.3rem);
    line-height: .95;
    letter-spacing: -.05em;
}

.dashboard-subtitle {
    margin: 12px 0 0;
    color: var(--muted);
}

.dashboard-heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.dashboard-live-count {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(101,223,140,.24);
    border-radius: 999px;
    color: var(--live);
    background: rgba(101,223,140,.07);
    font-size: .78rem;
    font-weight: 900;
}

.dashboard-live-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-live-grid.dashboard-density-medium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-live-grid.dashboard-density-compact,
.dashboard-live-grid.dashboard-density-dense {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-live-card {
    min-width: 0;
    display: block;
    padding: 14px;
    border: 1px solid rgba(101,223,140,.22);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(12,41,43,.90), rgba(4,22,27,.94));
    text-decoration: none;
    box-shadow: 0 14px 38px rgba(0,0,0,.14);
}

.dashboard-live-card:hover {
    border-color: rgba(101,223,140,.42);
}

.dashboard-card-head {
    min-height: 29px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.dashboard-card-head > strong {
    flex: 0 0 auto;
    color: var(--accent-2);
    font-size: .75rem;
}

.dashboard-card-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.dashboard-card-meta .league-badge {
    max-width: 190px;
}

.dashboard-card-meta .series-name {
    max-width: 160px;
}

.dashboard-live-card .live-score-table {
    margin: 0;
}

.dashboard-no-live {
    display: grid;
    gap: 7px;
    padding: 44px 20px;
}

.dashboard-no-live strong {
    color: var(--text);
    font-size: 1.15rem;
}

.dashboard-no-live span {
    color: var(--muted);
}


.dashboard-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 28px;
    color: var(--muted);
    font-size: .72rem;
}

/* Meine Teams */
.teams-manage-main {
    padding: 38px 0 60px;
}

.teams-manage-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 24px;
}

.teams-manage-heading h1 {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    line-height: .96;
    letter-spacing: -.05em;
}

.managed-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.managed-team-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.managed-team-logo {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    color: #16343d;
    background: #fff;
    font-weight: 900;
}

.managed-team-logo img {
    width: 100%;
    height: 100%;
    padding: 5px;
    object-fit: contain;
}

.managed-team-info {
    min-width: 0;
}

.managed-team-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.managed-team-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.managed-team-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.managed-remove {
    display: none;
}

.team-edit-mode .managed-remove {
    display: inline-flex;
}

.team-manage-search {
    margin-top: 16px;
}

@media (max-width: 1100px) {
    .dashboard-live-grid.dashboard-density-medium,
    .dashboard-live-grid.dashboard-density-compact,
    .dashboard-live-grid.dashboard-density-dense {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .managed-team-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .app-menu-toggle {
        top: 13px;
        left: 11px;
        width: 42px;
        height: 42px;
    }

    .topbar-with-menu {
        padding-left: 50px;
    }

    .dashboard-main {
        padding-top: 24px;
    }

    .dashboard-heading,
    .teams-manage-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-heading-actions {
        justify-content: flex-start;
    }

    .dashboard-live-grid,
    .dashboard-live-grid.dashboard-density-medium,
    .dashboard-live-grid.dashboard-density-compact,
    .dashboard-live-grid.dashboard-density-dense {
        grid-template-columns: 1fr;
    }

    .dashboard-live-card {
        padding: 11px;
    }

    .dashboard-footer {
        flex-direction: column;
        gap: 4px;
    }

    .managed-team-card {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .managed-team-logo {
        width: 48px;
        height: 48px;
    }

    .managed-team-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}


/* v3.6.2 – Dashboard Zeitraumfilter */
.dashboard-period-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -2px 0 20px;
}

.dashboard-period-filter .filter-label {
    margin-right: 4px;
}

.dashboard-period-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,.035);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 850;
}

.dashboard-period-button:hover {
    border-color: rgba(103,217,228,.34);
    color: var(--text);
}

.dashboard-period-button.is-active {
    border-color: rgba(23,184,200,.55);
    color: #d9fbff;
    background: rgba(23,184,200,.13);
}

.dashboard-match-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .04em;
    white-space: nowrap;
}

.dashboard-match-status.is-live {
    color: #07351a;
    background: var(--live);
}

.dashboard-match-status.is-finished {
    color: #c0d0d4;
    background: rgba(255,255,255,.08);
}

.dashboard-match-status.is-scheduled {
    color: #c9f6fa;
    background: rgba(23,184,200,.12);
}

.dashboard-live-card:not(.is-live) {
    border-color: var(--line);
}

.dashboard-live-card.is-finished {
    opacity: .86;
}

.dashboard-card-foot {
    display: flex;
    justify-content: flex-end;
    padding: 8px 2px 0;
    color: var(--accent-2);
    font-size: .7rem;
    font-weight: 800;
}

.dashboard-live-count:not(.is-live-period) {
    border-color: var(--line);
    color: var(--muted);
    background: rgba(255,255,255,.04);
}

@media (max-width: 720px) {
    .dashboard-period-filter {
        display: grid;
        grid-template-columns: auto repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .dashboard-period-button {
        min-width: 0;
        padding-inline: 8px;
        font-size: .73rem;
    }
}


/* =========================================================
   v3.6.3 – gemeinsame Favoritenverwaltung
   ========================================================= */

.favorites-main {
    padding: 38px 0 64px;
}

.favorites-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.favorites-heading h1 {
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: .95;
    letter-spacing: -.055em;
}

.favorites-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.favorites-summary span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,.035);
    font-size: .8rem;
}

.favorites-summary b {
    color: var(--accent-2);
    font-size: 1rem;
}

.favorites-columns-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.favorites-management-panel {
    min-width: 0;
}

.favorite-management-list {
    display: grid;
    gap: 9px;
}

.favorite-manage-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
}

.favorite-manage-logo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
    color: #123740;
    background: #fff;
    font-weight: 950;
}

.favorite-manage-logo img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

.favorite-league-icon {
    color: var(--accent-2);
    background: rgba(23,184,200,.10);
    font-size: 1.35rem;
}

.favorite-manage-info {
    min-width: 0;
}

.favorite-manage-title {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.favorite-manage-title strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-league-name {
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-remove {
    display: none;
}

.favorite-remove.is-visible {
    display: inline-flex;
}

.favorites-add-panel {
    margin-top: 18px;
}

.favorites-type-filter {
    margin-bottom: 10px;
}

.favorites-search-box {
    margin-top: 15px;
}

.favorites-management-link {
    padding-block: 22px;
}

/* =========================================================
   v3.6.3 – Satztabelle im Einzelspiel-Scoreboard
   ========================================================= */

.scoreboard-result-table-section {
    width: min(100%, 1080px);
    margin: 0 auto;
}

.scoreboard-result-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 0 3px;
}

.scoreboard-result-table-heading > span {
    color: var(--text);
    font-size: clamp(.76rem, 1.2vw, 1rem);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scoreboard-result-table-heading small {
    color: var(--muted);
    font-size: .7rem;
}

.scoreboard-result-table {
    width: 100%;
}

.scoreboard-live-score-table {
    border-color: rgba(103,217,228,.16);
    border-radius: 15px;
    background: rgba(0,0,0,.15);
}

.scoreboard-live-score-table .live-score-labels {
    min-height: 30px;
    font-size: clamp(.56rem, .85vw, .72rem);
}

.scoreboard-live-score-table .live-score-team-row {
    min-height: clamp(50px, 6.5vh, 68px);
}

.scoreboard-live-score-table .live-score-team-name {
    padding-inline: clamp(10px, 1.4vw, 18px);
}

.scoreboard-live-score-table .live-score-team-name strong {
    font-size: clamp(.82rem, 1.45vw, 1.3rem);
}

.scoreboard-live-score-table .live-set-cell {
    font-size: clamp(.9rem, 1.55vw, 1.45rem);
}

.scoreboard-live-score-table .live-set-total {
    font-size: clamp(1.15rem, 1.9vw, 1.75rem);
}

.scoreboard-live-score-table .live-score-serve {
    font-size: .72rem;
}

@media (max-width: 900px) {
    .favorites-columns-page {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .favorites-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .favorites-summary {
        justify-content: flex-start;
    }

    .favorite-manage-card {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .favorite-manage-logo {
        width: 46px;
        height: 46px;
    }

    .favorite-remove {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .scoreboard-result-table-heading small {
        display: none;
    }

    .scoreboard-live-score-table .live-score-team-row {
        min-height: 46px;
    }

    .scoreboard-live-score-table .live-score-team-name strong {
        font-size: .76rem;
    }

    .scoreboard-live-score-table .live-set-cell {
        font-size: .86rem;
    }

    .scoreboard-live-score-table .live-set-total {
        font-size: 1rem;
    }
}


/* =========================================================
   v3.6.4 – Einzelspiel-Scoreboard größer und klarer
   ========================================================= */

/* Größere Teamlogos nur in der großen Einzelspielansicht */
.scoreboard-page .team-logo-large {
    width: clamp(150px, 12vw, 220px);
    height: clamp(150px, 12vw, 220px);
    border-radius: clamp(28px, 2vw, 38px);
}

.scoreboard-page .team-logo-large img {
    width: 100%;
    height: 100%;
    padding: clamp(10px, 1vw, 16px);
    object-fit: contain;
}

/* Satztabelle auf dem großen Scoreboard deutlich präsenter */
.scoreboard-result-table-section {
    width: min(100%, 1320px);
    margin-top: clamp(12px, 2vh, 26px);
}

.scoreboard-result-table-heading {
    margin-bottom: 12px;
}

.scoreboard-result-table-heading > span {
    font-size: clamp(.95rem, 1.25vw, 1.25rem);
}

.scoreboard-result-table-heading small {
    font-size: clamp(.72rem, .9vw, .9rem);
}

.scoreboard-live-score-table {
    border-radius: 18px;
}

.scoreboard-live-score-table .live-score-labels {
    min-height: clamp(38px, 4.5vh, 52px);
    font-size: clamp(.72rem, 1vw, .95rem);
}

.scoreboard-live-score-table .live-score-team-row {
    min-height: clamp(72px, 8vh, 96px);
}

.scoreboard-live-score-table .live-score-team-name {
    padding-inline: clamp(16px, 1.8vw, 26px);
}

.scoreboard-live-score-table .live-score-team-name strong {
    font-size: clamp(1.15rem, 1.65vw, 1.7rem);
}

.scoreboard-live-score-table .live-set-label,
.scoreboard-live-score-table .live-set-total-label {
    font-size: clamp(.72rem, 1vw, .95rem);
}

.scoreboard-live-score-table .live-set-cell {
    font-size: clamp(1.25rem, 1.9vw, 2rem);
    font-weight: 900;
}

.scoreboard-live-score-table .live-set-total {
    font-size: clamp(1.55rem, 2.2vw, 2.35rem);
}

/* Ohne Aufschlagpunkt bekommt der Teamname den Platz komplett */
.scoreboard-live-score-table .live-score-team-name {
    gap: 0;
}

/* Bei Jugendspielen darf die Teamspalte noch großzügiger werden */
.scoreboard-live-score-table.sets-3 .live-score-row {
    grid-template-columns:
        minmax(0, 1.75fr)
        repeat(3, minmax(80px, 110px))
        minmax(100px, 130px);
}

/* Erwachsene: S1-S5 weiterhin groß genug */
.scoreboard-live-score-table.sets-5 .live-score-row {
    grid-template-columns:
        minmax(0, 1.55fr)
        repeat(5, minmax(66px, 92px))
        minmax(92px, 118px);
}

@media (min-width: 1400px) {
    .scoreboard-result-table-section {
        width: min(100%, 1440px);
    }

    .scoreboard-live-score-table .live-score-team-row {
        min-height: 92px;
    }

    .scoreboard-live-score-table .live-score-team-name strong {
        font-size: 1.75rem;
    }

    .scoreboard-live-score-table .live-set-cell {
        font-size: 2.05rem;
    }

    .scoreboard-live-score-table .live-set-total {
        font-size: 2.4rem;
    }
}

@media (max-width: 900px) {
    .scoreboard-page .team-logo-large {
        width: clamp(110px, 24vw, 150px);
        height: clamp(110px, 24vw, 150px);
    }

    .scoreboard-live-score-table.sets-3 .live-score-row {
        grid-template-columns:
            minmax(0, 1.4fr)
            repeat(3, minmax(48px, 64px))
            minmax(62px, 78px);
    }

    .scoreboard-live-score-table.sets-5 .live-score-row {
        grid-template-columns:
            minmax(0, 1.25fr)
            repeat(5, minmax(38px, 50px))
            minmax(52px, 66px);
    }
}


/* =========================================================
   v3.6.6 – mobiles Einzelspiel-Scoreboard
   ========================================================= */

/* Die in v3.6.4 gewünschte Logo-Vergrößerung direkt am tatsächlich
   verwendeten Logo-Container anwenden. */
@media (min-width: 721px) {
    .scoreboard-page .score-logo-wrap {
        width: clamp(120px, 12vw, 190px);
        height: clamp(120px, 12vw, 190px);
    }
}

@media (max-width: 720px) {
    /* Dynamische Viewport-Höhe berücksichtigt die Browserleisten besser
       als das klassische 100vh auf Mobilgeräten. */
    .scoreboard-shell {
        min-height: 100dvh;
        padding: 7px 9px 5px;
    }

    .scoreboard-top {
        gap: 7px;
        min-height: 36px;
    }

    .scoreboard-series {
        max-width: 48vw;
        font-size: .72rem;
    }

    .scoreboard-top .connection-pill {
        min-height: 32px;
        padding: 5px 8px;
        font-size: .72rem;
    }

    /* Weniger vertikaler Leerraum zwischen Kopf, Hauptanzeige und Tabelle. */
    .scoreboard-main {
        align-content: start;
        gap: 9px;
        padding: 8px 0 5px;
    }

    .score-status-row {
        gap: 9px;
        min-height: 32px;
    }

    .score-status {
        padding: 5px 10px;
        font-size: .64rem;
    }

    .score-time {
        font-size: .68rem;
    }

    .teams-score {
        column-gap: 10px;
        row-gap: 5px;
    }

    /* Mobil größer als früher (78px), aber ohne unnötig Höhe zu verbrauchen. */
    .score-logo-wrap {
        width: 92px;
        height: 92px;
        margin-bottom: 6px;
        border-radius: 22%;
    }

    .score-logo {
        padding: 7%;
    }

    .score-team h1 {
        min-height: 2em;
        font-size: clamp(1rem, 4.7vw, 1.38rem);
        line-height: 1.02;
    }

    .serve-badge {
        margin-top: 6px;
        padding: 5px 8px;
        font-size: .56rem;
    }

    .score-center {
        margin-top: 0;
    }

    .set-score-label {
        font-size: .58rem;
    }

    .set-score {
        margin-top: 2px;
        font-size: 2.35rem;
    }

    .point-score {
        margin-top: 7px;
        font-size: clamp(4rem, 21vw, 6.6rem);
    }

    .current-set-label {
        margin-top: 5px;
        font-size: .76rem;
    }

    /* Tabelle auf Mobilgeräten breiter nutzen, aber kompakter in der Höhe. */
    .scoreboard-result-table-section {
        width: 100%;
        margin-top: 1px;
    }

    .scoreboard-result-table-heading {
        margin-bottom: 5px;
        padding-inline: 3px;
    }

    .scoreboard-result-table-heading > span {
        font-size: .76rem;
        letter-spacing: .07em;
    }

    .scoreboard-result-table-heading small {
        display: none;
    }

    .scoreboard-live-score-table {
        border-radius: 13px;
    }

    .scoreboard-live-score-table .live-score-labels {
        min-height: 27px;
        font-size: .56rem;
    }

    .scoreboard-live-score-table .live-score-team-row {
        min-height: 47px;
    }

    /*
     * Wichtig: Mannschaftsnamen auf dem kleinen Display NIEMALS
     * mit Ellipse abschneiden. Bei Bedarf werden sie auf zwei Zeilen
     * umgebrochen.
     */
    .scoreboard-live-score-table .live-score-team-name {
        min-width: 0;
        padding-inline: 8px;
        gap: 0;
    }

    .scoreboard-live-score-table .live-score-team-name strong {
        width: 100%;
        min-width: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        font-size: .70rem;
        line-height: 1.08;
    }

    .scoreboard-live-score-table .live-set-label,
    .scoreboard-live-score-table .live-set-total-label {
        font-size: .55rem;
    }

    .scoreboard-live-score-table .live-set-cell {
        font-size: .83rem;
        font-weight: 850;
    }

    .scoreboard-live-score-table .live-set-total {
        font-size: 1rem;
    }

    /* Jugend: möglichst viel Platz für vollständige Mannschaftsnamen. */
    .scoreboard-live-score-table.sets-3 .live-score-row {
        grid-template-columns:
            minmax(0, 1fr)
            repeat(3, 42px)
            54px;
    }

    /* Erwachsene ebenfalls kompaktere Ergebnis-Spalten. */
    .scoreboard-live-score-table.sets-5 .live-score-row {
        grid-template-columns:
            minmax(0, 1fr)
            repeat(5, 34px)
            48px;
    }

    /* Footer ebenfalls flacher, damit er möglichst noch im sichtbaren
       Browser-Viewport bleibt. */
    .scoreboard-controls {
        min-height: 34px;
        gap: 6px;
        padding-top: 3px;
        font-size: .64rem;
    }

    .scoreboard-controls > span {
        display: none;
    }

    .control-buttons {
        width: 100%;
        justify-content: flex-end;
        gap: 5px;
    }

    .control-buttons .button {
        min-height: 31px;
        padding: 0 9px;
        font-size: .67rem;
    }
}

/* Auf sehr niedrigen mobilen Viewports noch etwas stärker verdichten.
   Die Tabelle bleibt dabei vollständig lesbar. */
@media (max-width: 720px) and (max-height: 760px) {
    .scoreboard-shell {
        padding-top: 5px;
    }

    .scoreboard-main {
        gap: 6px;
        padding-top: 5px;
    }

    .score-status-row {
        min-height: 28px;
    }

    .score-logo-wrap {
        width: 82px;
        height: 82px;
        margin-bottom: 4px;
    }

    .score-team h1 {
        min-height: 1.85em;
        font-size: .98rem;
    }

    .serve-badge {
        margin-top: 4px;
        padding-block: 4px;
    }

    .set-score {
        font-size: 2.05rem;
    }

    .point-score {
        margin-top: 5px;
        font-size: clamp(3.8rem, 18vw, 5.6rem);
    }

    .current-set-label {
        margin-top: 3px;
        font-size: .7rem;
    }

    .scoreboard-live-score-table .live-score-team-row {
        min-height: 43px;
    }

    .scoreboard-live-score-table .live-score-team-name strong {
        font-size: .66rem;
    }

    .scoreboard-result-table-heading {
        margin-bottom: 3px;
    }

    .scoreboard-controls {
        min-height: 30px;
    }
}


/* v1.0 – Hinweis zur anonymen Besucherzählung */
.admin-analytics-note {
    max-width: 860px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.55;
}


/* =========================================================
   v1.0.1 – Hamburger-Abstand auf /live.php
   ========================================================= */

/* Der Menübutton ist fixed. Die LIVE-Kopfzeile reserviert deshalb
   links dauerhaft seinen Platz, damit nichts darunter rutscht. */
.live-page .live-page-header {
    padding-left: 62px;
}

/* Der Zurück-Link ist auf kleinen und mittleren Ansichten redundant,
   weil "Dashboard" direkt im Hamburger-Menü verfügbar ist. */
@media (max-width: 900px) {
    .live-page .live-page-header {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-left: 62px;
    }
.live-page .live-page-header > div:nth-child(2) {
        min-width: 0;
    }

    .live-page .live-page-header h1 {
        overflow-wrap: anywhere;
    }

    .live-page .live-page-actions {
        grid-column: 1 / -1;
        padding-left: 0;
    }
}

@media (max-width: 560px) {
    .live-page .live-page-header {
        padding-left: 58px;
        gap: 8px;
    }

    .live-page .live-page-header h1 {
        font-size: clamp(1.35rem, 7.5vw, 1.9rem);
        line-height: 1.02;
    }

    .live-page .live-page-header .eyebrow {
        font-size: .66rem;
    }
}


/* v1.0.3 – echtes VolleyBoard-Favicon im Dashboard-Header */
.dashboard-topbar .brand-app-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: block;
    object-fit: contain;
    border-radius: 15px;
}

@media (max-width: 720px) {
    .dashboard-topbar .brand-app-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 13px;
    }
}


/* =========================================================
   v1.0.4 – echtes VolleyBoard-Icon überall
   ========================================================= */

/* Das Favicon ersetzt das alte Kreis-Symbol in sämtlichen
   VolleyBoard-Kopfzeilen und im Hamburger-Menü. */
.brand-app-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: block;
    object-fit: contain;
    border-radius: 15px;
}

/* Das Icon im Drawer darf etwas kompakter sein. */
.drawer-brand .brand-app-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 12px;
}

/* Header mit weniger Platz erhalten eine leicht kleinere Variante. */
.topbar .brand-app-icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 14px;
}

/* Dashboard bleibt bewusst etwas markanter. */
.dashboard-topbar .brand-app-icon {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    border-radius: 15px;
}

@media (max-width: 720px) {
    .brand-app-icon,
    .topbar .brand-app-icon,
    .dashboard-topbar .brand-app-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 12px;
    }

    .drawer-brand .brand-app-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 11px;
    }
}


/* v1.0.5 – Zugriffstatistik löschen */
.admin-stat-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.admin-stat-actions form {
    margin: 0;
}

@media (max-width: 720px) {
    .admin-stat-actions {
        width: 100%;
        justify-content: flex-start;
    }
}


/* =========================================================
   v1.0.6 – Favoritenstatistik im Adminbereich
   ========================================================= */

.admin-favorite-ranking {
    display: grid;
    gap: 8px;
}

.admin-favorite-team {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px 54px minmax(180px, 1.5fr) minmax(190px, 1fr) 110px;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.admin-favorite-rank {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--accent-2);
    background: rgba(23,184,200,.10);
    font-size: .78rem;
    font-weight: 950;
}

.admin-favorite-logo {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    color: #16343d;
    background: #fff;
    font-size: 1.2rem;
}

.admin-favorite-logo img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

.admin-favorite-team-info {
    min-width: 0;
}

.admin-favorite-team-title {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-favorite-team-title strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-favorite-team-info small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.admin-favorite-meter-wrap {
    min-width: 0;
}

.admin-favorite-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.admin-favorite-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.admin-favorite-meter-wrap small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: .66rem;
}

.admin-favorite-count {
    text-align: right;
}

.admin-favorite-count strong,
.admin-favorite-count span {
    display: block;
}

.admin-favorite-count strong {
    color: var(--accent-2);
    font-size: 1.65rem;
    line-height: 1;
}

.admin-favorite-count span {
    margin-top: 4px;
    color: var(--muted);
    font-size: .66rem;
}

.admin-favorite-empty {
    padding: 24px;
}

@media (max-width: 980px) {
    .admin-favorite-team {
        grid-template-columns: 34px 48px minmax(0, 1fr) 88px;
    }

    .admin-favorite-meter-wrap {
        grid-column: 3 / -1;
    }
}

@media (max-width: 640px) {
    .admin-favorite-team {
        grid-template-columns: 32px 44px minmax(0, 1fr);
        gap: 9px;
        padding: 10px;
    }

    .admin-favorite-logo {
        width: 42px;
        height: 42px;
    }

    .admin-favorite-count {
        grid-column: 3;
        text-align: left;
    }

    .admin-favorite-count strong,
    .admin-favorite-count span {
        display: inline;
    }

    .admin-favorite-count strong {
        margin-right: 5px;
        font-size: 1.25rem;
    }

    .admin-favorite-meter-wrap {
        grid-column: 1 / -1;
    }

    .admin-favorite-team-title strong {
        white-space: normal;
    }
}


/* =========================================================
   v1.0.7 – LIVE-Nachlauf nach Spielende
   ========================================================= */

.live-page-card.is-recently-finished {
    border-color: rgba(255,255,255,.14);
    background: linear-gradient(
        180deg,
        rgba(20,40,46,.88),
        rgba(6,23,29,.94)
    );
}

.live-finished-label {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    border-radius: 999px;
    color: #c4d1d5;
    background: rgba(255,255,255,.08);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .035em;
    white-space: nowrap;
}

.admin-live-setting-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px;
}

.admin-live-setting-field {
    display: grid;
    gap: 7px;
    min-width: min(100%, 320px);
}

.admin-live-setting-field > span {
    color: var(--text);
    font-size: .8rem;
    font-weight: 850;
}

.admin-live-setting-field > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.admin-live-setting-field input {
    width: 110px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text);
    background: rgba(0,0,0,.22);
    font: inherit;
    font-size: 1rem;
    font-weight: 850;
}

.admin-live-setting-field > div > span,
.admin-live-setting-field small {
    color: var(--muted);
}

.admin-live-setting-field small {
    font-size: .68rem;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .admin-live-setting-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-live-setting-field {
        width: 100%;
    }
}


/* =========================================================
   v1.0.8 – Filter-Abstand + Liga-Sprung
   ========================================================= */

/* "Weitere Spiele": Statusbuttons dürfen nicht in die Karten laufen. */
.filter-stack {
    margin-bottom: 18px;
}

.filter-stack + .match-grid {
    margin-top: 2px;
}

.filter-row {
    row-gap: 10px;
}

/* Kleiner Liga-Button auf normalen Spielkarten */
.match-card-shell > .match-card {
    padding-bottom: 54px;
}

.match-league-button,
.live-card-league-button,
.dashboard-league-button,
.scoreboard-league-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(103,217,228,.25);
    border-radius: 999px;
    color: #bfeef2;
    background: rgba(6,28,34,.94);
    text-decoration: none;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .025em;
    white-space: nowrap;
}

.match-league-button:hover,
.live-card-league-button:hover,
.dashboard-league-button:hover,
.scoreboard-league-button:hover {
    border-color: rgba(103,217,228,.55);
    color: #ecfeff;
    background: rgba(23,184,200,.13);
}

.match-league-button {
    position: absolute;
    left: 13px;
    bottom: 17px;
    z-index: 5;
}

/* LIVE-Seite */
.live-page-card-shell {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.live-page-card-shell > .live-page-card {
    height: 100%;
    padding-bottom: clamp(36px, 4vh, 44px);
}

.live-card-league-button {
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 6;
    min-height: 24px;
    padding-inline: 8px;
    font-size: .6rem;
}

/* Dashboard */
.dashboard-live-card-shell {
    position: relative;
    min-width: 0;
}

.dashboard-live-card-shell > .dashboard-live-card {
    height: 100%;
    padding-bottom: 42px;
}

.dashboard-league-button {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 5;
}

/* Einzelspiel */
.scoreboard-series {
    display: grid;
    justify-items: center;
    gap: 5px;
}

.scoreboard-series-main {
    max-width: 55vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    overflow: hidden;
}

.scoreboard-series-main > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scoreboard-league-button {
    min-height: 24px;
    padding-inline: 8px;
    font-size: .6rem;
}

/* Eigene Liga-Seite */
.league-main {
    padding: 38px 0 62px;
}

.league-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.league-heading h1 {
    margin: 0;
    font-size: clamp(2.2rem, 5.5vw, 4.8rem);
    line-height: .96;
    letter-spacing: -.05em;
}

.league-period-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
}

.league-match-grid .match-card-shell > .match-card {
    padding-bottom: 16px;
}

@media (max-width: 720px) {
    .filter-stack {
        gap: 11px;
        margin-bottom: 16px;
    }

    .filter-stack .filter-row {
        display: grid;
        grid-template-columns: 72px repeat(2, minmax(0, max-content));
        align-items: center;
        column-gap: 7px;
        row-gap: 7px;
    }

    .filter-stack .filter-row:first-child {
        grid-template-columns: 72px repeat(2, minmax(0, max-content));
    }

    .filter-stack .filter-button {
        min-height: 36px;
        padding-inline: 12px;
        font-size: .76rem;
    }

    .league-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .league-period-filter {
        display: grid;
        grid-template-columns: 72px repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .league-period-filter .filter-button {
        min-width: 0;
        padding-inline: 7px;
        font-size: .7rem;
    }

    .live-card-league-button,
    .dashboard-league-button,
    .match-league-button {
        font-size: .58rem;
    }

    .scoreboard-series-main {
        max-width: 48vw;
    }
}


/* v1.0.9 – Liga-Button mit Ligabezeichnung */
.match-league-button,
.live-card-league-button,
.dashboard-league-button,
.scoreboard-league-button {
    max-width: min(72%, 320px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-card-league-button {
    max-width: calc(100% - 20px);
}

.dashboard-league-button {
    max-width: calc(100% - 24px);
}

@media (max-width: 720px) {
    .match-league-button,
    .live-card-league-button,
    .dashboard-league-button,
    .scoreboard-league-button {
        max-width: 78%;
        min-height: 24px;
        padding-inline: 8px;
        font-size: .56rem;
    }
}


/* =========================================================
   v1.0.10 – Sieger in Ergebnistabellen hervorheben
   ========================================================= */

/* Erst nach Spielende wird die Siegermannschaft markiert. */
.live-score-team-row.is-match-winner {
    background:
        linear-gradient(
            90deg,
            rgba(61, 214, 132, .18),
            rgba(61, 214, 132, .08)
        );
    box-shadow:
        inset 4px 0 0 rgba(74, 222, 128, .82);
}

.live-score-team-row.is-match-winner .live-score-team-name,
.live-score-team-row.is-match-winner .live-score-team-name strong {
    color: #effff4;
}

.live-score-team-row.is-match-winner .live-set-cell {
    color: #e1ffea;
}

.live-score-team-row.is-match-winner .live-set-total {
    color: #6ee7a0;
    background: rgba(61, 214, 132, .12);
}

/* Eine hervorgehobene laufende Satzspalte bleibt visuell unterscheidbar,
   falls ein bereits finalisierter Zustand noch kurz im LIVE-Nachlauf steht. */
.live-score-team-row.is-match-winner .live-set-cell.is-current {
    background: rgba(23, 184, 200, .18);
}

@media (max-width: 720px) {
    .live-score-team-row.is-match-winner {
        box-shadow:
            inset 3px 0 0 rgba(74, 222, 128, .88);
    }
}


/* =========================================================
   v1.0.11 – Rücksprung von Ligaansicht zum Ausgangsspiel
   ========================================================= */

.league-return-button {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 14px;
    padding: 0 12px;
    border: 1px solid rgba(103,217,228,.26);
    border-radius: 999px;
    color: #c9f7fb;
    background: rgba(23,184,200,.08);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 850;
}

.league-return-button:hover {
    border-color: rgba(103,217,228,.55);
    color: #ffffff;
    background: rgba(23,184,200,.14);
}

@media (max-width: 720px) {
    .league-return-button {
        min-height: 31px;
        margin-bottom: 10px;
        padding-inline: 10px;
        font-size: .68rem;
    }
}


/* v1.0.12 – allgemeiner Zurück-Button auf Liga-Seite */
.league-return-button {
    max-width: 100%;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .league-return-button {
        white-space: normal;
        line-height: 1.15;
        text-align: left;
    }
}


/* =========================================================
   v1.0.13 – Dashboard: LIVE + weitere Teamspiele
   ========================================================= */

.dashboard-secondary-panel {
    margin-top: 30px;
    padding: clamp(18px, 2.6vw, 30px);
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            rgba(14, 48, 57, .76),
            rgba(6, 27, 34, .72)
        );
}

.dashboard-secondary-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.dashboard-secondary-heading h2 {
    margin: 0;
    font-size: clamp(1.65rem, 3.1vw, 2.75rem);
    line-height: 1;
    letter-spacing: -.035em;
}

.dashboard-secondary-subtitle {
    max-width: 760px;
    margin: 9px 0 0;
    color: var(--muted);
    font-size: clamp(.8rem, 1.2vw, 1rem);
    line-height: 1.45;
}

.dashboard-other-period-filter {
    margin: 0 0 18px;
}

.dashboard-secondary-panel .dashboard-live-grid.empty-state {
    min-height: 128px;
}

.dashboard-secondary-panel .dashboard-live-card {
    background:
        linear-gradient(
            180deg,
            rgba(16, 49, 58, .78),
            rgba(8, 31, 38, .88)
        );
}

/* Beendete Spiele unten bewusst normal sichtbar halten. */
.dashboard-secondary-panel .dashboard-live-card.is-finished {
    opacity: 1;
}

@media (max-width: 720px) {
    .dashboard-secondary-panel {
        margin-top: 20px;
        padding: 15px 12px;
        border-radius: 18px;
    }

    .dashboard-secondary-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .dashboard-secondary-heading .section-count {
        align-self: flex-start;
    }

    .dashboard-other-period-filter {
        display: grid;
        grid-template-columns: 72px repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .dashboard-other-period-filter .dashboard-period-button {
        min-width: 0;
        padding-inline: 7px;
        font-size: .72rem;
    }
}


/* =========================================================
   v1.0.14 – Dashboard: Kein-LIVE-Hinweis als Karte
   ========================================================= */

.dashboard-live-grid.dashboard-live-empty-state {
    min-height: 0;
    display: block;
    padding: 0;
    margin-top: 18px;
}

.dashboard-live-empty-card {
    width: 100%;
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border: 1px solid rgba(103, 217, 228, .16);
    border-radius: 20px;
    background:
        linear-gradient(
            180deg,
            rgba(15, 49, 58, .78),
            rgba(7, 28, 35, .9)
        );
}

.dashboard-live-empty-indicator {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(103, 217, 228, .22);
    border-radius: 999px;
    background: rgba(23, 184, 200, .07);
}

.dashboard-live-empty-indicator > span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(111, 226, 171, .72);
    box-shadow: 0 0 0 5px rgba(111, 226, 171, .08);
}

.dashboard-live-empty-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.dashboard-live-empty-copy strong {
    color: var(--text);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.2;
}

.dashboard-live-empty-copy span {
    color: var(--muted);
    font-size: clamp(.78rem, 1.15vw, .96rem);
    line-height: 1.45;
}

/* Der nächste Dashboard-Bereich soll bei 0 LIVE nicht weit unten beginnen. */
.dashboard-live-empty-state + .dashboard-secondary-panel {
    margin-top: 20px;
}

@media (max-width: 720px) {
    .dashboard-live-grid.dashboard-live-empty-state {
        margin-top: 12px;
    }

    .dashboard-live-empty-card {
        min-height: 96px;
        gap: 12px;
        padding: 16px;
        border-radius: 16px;
    }

    .dashboard-live-empty-indicator {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .dashboard-live-empty-copy strong {
        font-size: .95rem;
    }

    .dashboard-live-empty-copy span {
        font-size: .75rem;
    }

    .dashboard-live-empty-state + .dashboard-secondary-panel {
        margin-top: 14px;
    }
}


.form-field select {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    outline: 0;
    background: rgba(0,0,0,.22);
    color: var(--text);
}

.form-field select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(23,184,200,.09);
}

.account-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.account-section-head {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.account-section-head h2 {
    margin: 0;
    font-size: 1.15rem;
}

.account-section-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.account-badge-settings {
    display: grid;
    gap: 14px;
}

.account-badge-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .85fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
}

.account-badge-info {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.account-badge-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.account-badge-details {
    display: grid;
    gap: 3px;
}

.account-badge-details strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
}

.account-badge-details span {
    color: var(--muted);
    font-size: .8rem;
}

.account-badge-select .form-field > span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.account-badge-select .form-field > span small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
}

.account-badge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.account-empty-state {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    color: var(--muted);
}

@media (max-width: 760px) {
    .account-badge-row {
        grid-template-columns: 1fr;
    }
}


/* v1.0.22 – kompakter Badge-Picker mit Belegung + Leuchtstärke */
.account-badge-row--compact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.league-badge-edit-button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.league-badge-edit-button:hover .league-badge { transform: translateY(-1px) scale(1.02); }
.league-badge { transition: transform .15s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.badge-config-button { min-height: 40px; padding: 0 14px; }

.badge-picker-open { overflow: hidden; }
.badge-picker-overlay[hidden] { display: none !important; }
.badge-picker-overlay { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 14px; }
.badge-picker-backdrop { position: absolute; inset: 0; background: rgba(0, 7, 10, .78); backdrop-filter: blur(7px); }
.badge-picker-dialog {
    position: relative; z-index: 1; width: min(760px, 100%); max-height: min(86dvh, 820px); overflow: auto;
    padding: 18px; border: 1px solid rgba(103,217,228,.22); border-radius: 22px;
    background: linear-gradient(180deg, rgba(13,44,53,.99), rgba(4,18,23,.99)); box-shadow: 0 28px 90px rgba(0,0,0,.48);
}
.badge-picker-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.badge-picker-header h3 { margin:2px 0 0; font-size:1.25rem; }
.badge-picker-close { width:38px; height:38px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04); color:var(--text); font-size:1.5rem; cursor:pointer; }
.badge-picker-current { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:13px; margin-bottom:14px; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.14); }
.badge-picker-current > span:last-child { color:var(--muted); font-size:.8rem; }
.badge-picker-section + .badge-picker-section { margin-top:16px; }
.badge-picker-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
.badge-picker-section-head small { color:var(--muted); font-size:.7rem; }
.badge-color-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.badge-color-choice {
    min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; padding:9px;
    border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); color:var(--text); text-align:left; cursor:pointer;
}
.badge-color-choice.is-selected { border-color:var(--accent); background:rgba(23,184,200,.09); box-shadow:0 0 0 2px rgba(23,184,200,.08); }
.badge-choice-swatch { min-width:46px; max-width:46px; min-height:30px; padding:4px 8px; border-width:2px; font-size:.62rem; }
.badge-auto-swatch { display:grid; place-items:center; width:40px; height:28px; border:1px dashed rgba(255,255,255,.3); border-radius:999px; color:var(--accent-2); font-size:.58rem; font-weight:900; }
.badge-choice-copy { min-width:0; display:grid; gap:2px; }
.badge-choice-copy strong { font-size:.76rem; }
.badge-choice-copy small { min-width:0; overflow:hidden; color:var(--muted); font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.badge-glow-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.badge-glow-choice { display:flex; align-items:center; gap:8px; min-width:0; padding:9px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); color:var(--text); text-align:left; cursor:pointer; }
.badge-glow-choice.is-selected { border-color:var(--accent); background:rgba(23,184,200,.09); }
.badge-glow-choice > span:last-child { min-width:0; display:grid; gap:1px; }
.badge-glow-choice strong { font-size:.74rem; }
.badge-glow-choice small { color:var(--muted); font-size:.59rem; }
.badge-glow-demo { width:18px; height:18px; flex:0 0 18px; border-radius:999px; background:#6ee7f0; }
.badge-glow-demo--off { opacity:.55; }
.badge-glow-demo--soft { box-shadow:0 0 8px rgba(110,231,240,.52); }
.badge-glow-demo--medium { box-shadow:0 0 13px 2px rgba(110,231,240,.7); }
.badge-glow-demo--strong { box-shadow:0 0 18px 5px rgba(110,231,240,.8),0 0 30px rgba(110,231,240,.45); }
.badge-picker-footer { display:flex; justify-content:flex-end; margin-top:16px; padding-top:13px; border-top:1px solid var(--line); }

@media (max-width: 620px) {
    .account-badge-row--compact { grid-template-columns:1fr auto; padding:13px; }
    .badge-config-button { padding:0 10px; font-size:.72rem; }
    .badge-picker-dialog { padding:14px 11px; border-radius:18px; }
    .badge-color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
    .badge-color-choice { padding:7px; gap:6px; }
    .badge-glow-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
    .badge-glow-choice { padding:8px; }
}


/* v1.0.23 – satte Liga-Badges mit klarer Farbtrennung */
.league-badge {
    text-shadow: 0 1px 1px rgba(0,0,0,.22);
}

.badge-color-choice {
    border-width: 1px;
}

.badge-color-choice .league-badge {
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.22) inset;
}

.badge-color-choice.is-selected {
    border-width: 2px;
}

.badge-picker-current .league-badge {
    border-width: 3px;
}