:root {
    --sz-green: #003c0a;
    --sz-green-mid: #0a5c18;
    --sz-orange: #f17432;
    --sz-cream: #f4f1e8;
    --sz-text: #1a1a1a;
    /* Nav-Avatar: Basis 4rem, aktuell +30 % */
    --sz-nav-avatar-rest: calc(4rem * 1.3);
    --sz-topbar-row-height: 3.25rem;
    --sz-logo-header-height: 110px;
    --sz-logo-overhang: max(0px, calc(var(--sz-logo-header-height) - var(--sz-topbar-row-height)));
    --sz-logo-shift-up: 25px;
}

/* —— Theme: Dark (Standard) —— */
html[data-theme="dark"] {
    color-scheme: dark;
    --sz-body-color: var(--sz-cream);
    --sz-topbar-bg: rgba(0, 0, 0, 0.55);
    --sz-topbar-border: rgba(255, 255, 255, 0.12);
    --sz-nav-color: #fff;
    --sz-nav-user: #cfd8cf;
    --sz-footer-bg: rgba(0, 0, 0, 0.65);
    --sz-footer-color: #aaa;
    --sz-hero-meta: #9ab59a;
    --sz-hero-bg: rgba(0, 26, 11, 0.92);
    --sz-news-section-bg: rgba(0, 30, 8, 0.75);
    --sz-news-section-border: rgba(255, 255, 255, 0.12);
    --sz-news-block-title: #e8f4e8;
    --sz-news-card-bg: rgba(0, 0, 0, 0.35);
    --sz-news-card-border: rgba(255, 255, 255, 0.14);
    --sz-news-card-title: #fff;
    --sz-news-card-body: #e3e9e3;
    --sz-news-card-time: #9ab59a;
    --sz-news-more-border: rgba(255, 255, 255, 0.1);
    --sz-hint-color: #cde4cd;
    /* Formular-Dropdowns: sattes Grün statt neutralem Grau (gute Lesbarkeit) */
    --sz-form-select-bg: rgba(0, 44, 18, 0.92);
    --sz-form-select-border: rgba(130, 200, 150, 0.32);
    --sz-form-select-option-bg: rgba(0, 52, 24, 0.98);
    --sz-form-select-option-fg: var(--sz-cream);
    /* Spieltag/Phase-Linkleiste: gleiche grüne Familie */
    --sz-st-select-bg: rgba(0, 46, 20, 0.88);
    --sz-st-select-border: rgba(130, 200, 150, 0.24);
    --sz-st-label: #bde0bd;
    --sz-st-link-bg: rgba(255, 255, 255, 0.08);
    --sz-st-link-color: #fff;
    --sz-st-link-hover-bg: rgba(255, 255, 255, 0.15);
    --sz-back-link: #cfe9cf;
    --sz-body-bg: #0c1710;
    --sz-match-card-bg: rgba(0, 24, 10, 0.82);
    --sz-match-card-border: rgba(255, 255, 255, 0.12);
    --sz-match-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --sz-match-team: #b0dcb0;
    --sz-match-score-txt: #f4f1e8;
    --sz-match-meta: #9ab59a;
    --sz-spoiler-border: rgba(255, 255, 255, 0.14);
    --sz-spoiler-bg: linear-gradient(180deg, rgba(0, 36, 14, 0.92) 0%, rgba(0, 20, 8, 0.9) 100%);
    --sz-spoiler-count: #a8c9a8;
    --sz-guest-hint: #9aaf9a;
    --sz-banner-ok-bg: rgba(40, 120, 60, 0.35);
    --sz-banner-ok-text: #e8f5e8;
    --sz-banner-err-bg: rgba(180, 40, 40, 0.4);
    --sz-banner-err-text: #ffe8e8;
    --sz-nav-drop-open-bg: rgba(255, 255, 255, 0.12);
    /* Tippspiele-Dropdown: mitteldunkles Grün (kein Grau) */
    --sz-drop-panel-bg: rgba(0, 54, 22, 0.97);
    --sz-drop-panel-border: rgba(130, 200, 150, 0.22);
    --sz-drop-link: #e8f4e8;
    --sz-subnav-border: rgba(0, 60, 10, 0.15);
    --sz-table-wrap-shadow: rgba(0, 0, 0, 0.12);
    --sz-form-border: #ccc;
    --sz-small: #8a9d8a;
    --sz-tips-table-border: rgba(255, 255, 255, 0.12);
    --sz-tips-table-th-bg: rgba(0, 44, 18, 0.75);
    --sz-tips-table-th-fg: #d8efd8;
    --sz-tips-table-row-alt: rgba(255, 255, 255, 0.055);
    --sz-tips-table-cell: #e8f0e8;
    --sz-watermark-opacity: 0.14;
    --sz-watermark-filter: blur(10px) brightness(1.5) saturate(0.9);
    --sz-watermark-width: min(156vmin, 92rem);
}

/* —— Theme: Light —— */
html[data-theme="light"] {
    color-scheme: light;
    --sz-body-color: #1a221a;
    /* Topbar: dunkles Grün wie Dark-Formulare/Hero-Familie (Seiteninhalt bleibt hell) */
    --sz-topbar-bg: linear-gradient(
        180deg,
        rgba(0, 44, 16, 0.98) 0%,
        rgba(0, 60, 10, 0.97) 100%
    );
    --sz-topbar-border: rgba(130, 200, 150, 0.22);
    --sz-nav-color: var(--sz-cream);
    --sz-nav-user: #bde0bd;
    --sz-footer-bg: rgba(248, 250, 248, 0.96);
    --sz-footer-color: #4a5e4d;
    --sz-hero-meta: #4a5a4a;
    --sz-news-section-bg: #fff;
    --sz-news-section-border: rgba(0, 60, 10, 0.12);
    --sz-news-block-title: var(--sz-green);
    --sz-news-card-bg: #f4f8f4;
    --sz-news-card-border: rgba(0, 60, 10, 0.11);
    --sz-news-card-title: #0d280d;
    --sz-news-card-body: #2a342a;
    --sz-news-card-time: #5a6e5c;
    --sz-news-more-border: rgba(0, 60, 10, 0.1);
    --sz-hint-color: #4a5d4c;
    --sz-st-select-bg: rgba(232, 242, 232, 0.96);
    --sz-st-select-border: rgba(0, 60, 10, 0.1);
    --sz-st-label: var(--sz-green);
    --sz-st-link-bg: rgba(0, 60, 10, 0.08);
    --sz-st-link-color: #0a250a;
    --sz-st-link-hover-bg: rgba(0, 60, 10, 0.14);
    --sz-back-link: #0a5c18;
    --sz-match-meta: #5a655a;
    --sz-spoiler-border: rgba(0, 60, 10, 0.2);
    --sz-spoiler-bg: linear-gradient(180deg, #fff 0%, #eef5ee 100%);
    --sz-spoiler-count: #4a5550;
    --sz-guest-hint: #5a655a;
    --sz-banner-ok-bg: rgba(180, 230, 195, 0.85);
    --sz-banner-ok-text: #0a3518;
    --sz-banner-err-bg: rgba(255, 210, 210, 0.92);
    --sz-banner-err-text: #600808;
    --sz-nav-drop-open-bg: rgba(0, 60, 10, 0.08);
    --sz-drop-panel-bg: #fff;
    --sz-drop-panel-border: rgba(0, 60, 10, 0.14);
    --sz-subnav-border: rgba(0, 60, 10, 0.15);
    --sz-table-wrap-shadow: rgba(0, 40, 10, 0.1);
    --sz-form-border: #b8c9b8;
    --sz-small: #5a665a;
    --sz-tips-table-border: #d0dfd0;
    --sz-tips-table-th-bg: #e4efe4;
    --sz-tips-table-th-fg: #143814;
    --sz-watermark-opacity: 0.2;
    --sz-watermark-filter: blur(10px) brightness(0.88) saturate(1.15) contrast(1.2);
    --sz-watermark-width: min(156vmin, 92rem);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--sz-body-color);
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Über body-Hintergrund, unter Seiteninhalt (kein z-index auf main/footer – sonst überlappt Footer den Chat) */
body::before {
    content: "";
    position: fixed;
    left: 50%;
    top: 48%;
    z-index: 0;
    width: var(--sz-watermark-width, min(156vmin, 92rem));
    aspect-ratio: 3 / 2;
    transform: translate(-50%, -50%);
    background: url("/assets/images/szoccer-sitelogo.png") center / contain no-repeat;
    opacity: var(--sz-watermark-opacity, 0.14);
    filter: var(--sz-watermark-filter, blur(10px));
    pointer-events: none;
    user-select: none;
}

html[data-theme="dark"] body {
    background-color: var(--sz-body-bg);
    background-image: none;
}

html[data-theme="light"] body {
    background-color: #dce6dc;
    background-image: linear-gradient(165deg, #eef5ee 0%, #dce8dc 42%, #ccdccd 100%);
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

html[data-theme="light"] body.page-auth {
    background-image: linear-gradient(165deg, #f0f7f0 0%, #d4e4d4 55%, #c5d8c5 100%);
}

a { color: var(--sz-orange); }
a:hover { text-decoration: underline; }

.sz-inner {
    max-width: 960px;
    margin: 0 auto;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

.sz-topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--sz-topbar-bg);
    border-bottom: 1px solid var(--sz-topbar-border);
    backdrop-filter: blur(6px);
    padding-top: env(safe-area-inset-top);
    overflow: visible;
}

.sz-topbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.25rem;
    gap: 0.75rem;
    overflow: visible;
}

@media (min-width: 561px) {
    .sz-topbar__row {
        height: 3.25rem;
        max-height: 3.25rem;
    }
}

.sz-topbar.is-scrolled .sz-topbar__row {
    min-height: 3.25rem;
}

.sz-topbar__cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem 0.65rem;
    flex: 1;
    min-width: 0;
}

.sz-topbar__nav-desktop {
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
}

.sz-topbar__tools {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.sz-topbar__bar-end {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.sz-topbar__mobile-only,
.sz-nav-drawer {
    display: none !important;
}

/* Burger-Button (nur mobil sichtbar) */
.sz-burger {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--sz-topbar-border);
    background: rgba(255, 255, 255, 0.08);
    color: var(--sz-nav-color);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.sz-burger__bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.sz-burger[aria-expanded="true"] .sz-burger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.sz-burger[aria-expanded="true"] .sz-burger__bar:nth-child(2) {
    opacity: 0;
}

.sz-burger[aria-expanded="true"] .sz-burger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

html[data-theme="light"] .sz-burger {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.sz-burger:hover {
    background: rgba(255, 255, 255, 0.14);
}

.sz-burger:focus-visible {
    outline: 2px solid var(--sz-orange);
    outline-offset: 3px;
}

/* Mobiles Navigationsmenü (Drawer) */
.sz-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 620;
    pointer-events: none;
    visibility: hidden;
}

.sz-nav-drawer:not([hidden]) {
    display: block !important;
    visibility: visible;
    pointer-events: auto;
}

.sz-nav-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 12, 4, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.sz-nav-drawer.is-open .sz-nav-drawer__backdrop {
    opacity: 1;
}

.sz-nav-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(19rem, 92vw);
    max-width: 100%;
    height: 100%;
    padding: calc(0.65rem + env(safe-area-inset-top, 0px)) 0.85rem calc(1rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: linear-gradient(
        165deg,
        rgba(12, 28, 16, 0.98) 0%,
        rgba(6, 18, 10, 0.99) 100%
    );
    border-left: 1px solid var(--sz-topbar-border);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    outline: none;
}

/* Light-Mode: gleiche dunkle Topbar-Farben wie Menüleiste (sonst helle Schrift auf hellem Panel) */
html[data-theme="light"] .sz-nav-drawer__panel {
    background: var(--sz-topbar-bg);
    border-left-color: var(--sz-topbar-border);
    box-shadow: -12px 0 40px rgba(0, 40, 12, 0.38);
}

html[data-theme="light"] .sz-nav-drawer__title {
    color: var(--sz-nav-user);
}

html[data-theme="light"] .sz-nav-drawer__close {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--sz-nav-color);
}

html[data-theme="light"] .sz-nav-drawer__close:hover {
    background: rgba(255, 255, 255, 0.14);
}

html[data-theme="light"] .sz-nav-drawer__link {
    color: var(--sz-nav-color);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .sz-nav-drawer__link:hover {
    background: rgba(255, 255, 255, 0.14);
}

html[data-theme="light"] .sz-nav-drawer__link:active {
    background: rgba(241, 116, 50, 0.28);
    border-color: rgba(241, 116, 50, 0.45);
}

html[data-theme="light"] .sz-nav-drawer__icons .sz-theme-toggle,
html[data-theme="light"] .sz-nav-drawer__icons .sz-logout-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--sz-nav-color);
}

html[data-theme="light"] .sz-nav-drawer__icons .sz-theme-toggle:hover,
html[data-theme="light"] .sz-nav-drawer__icons .sz-logout-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.sz-nav-drawer.is-open .sz-nav-drawer__panel {
    transform: translateX(0);
}

.sz-nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0.25rem 0.5rem;
    border-bottom: 1px solid var(--sz-topbar-border);
}

.sz-nav-drawer__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sz-nav-user);
}

.sz-nav-drawer__close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--sz-topbar-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--sz-nav-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.sz-nav-drawer__close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.sz-nav-drawer__close:active {
    transform: scale(0.96);
}

.sz-nav-drawer__close:focus-visible {
    outline: 2px solid var(--sz-orange);
    outline-offset: 2px;
}

.sz-nav-drawer__links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.15rem 0;
}

.sz-nav-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    color: var(--sz-nav-color);
    font-weight: 700;
    font-size: 1.08rem;
    text-decoration: none;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    opacity: 0;
    transform: translateX(12px);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        opacity 0.2s ease;
}

.sz-nav-drawer.is-open .sz-nav-drawer__link {
    opacity: 1;
    transform: translateX(0);
}

.sz-nav-drawer.is-open .sz-nav-drawer__link:nth-child(1) { transition-delay: 0.05s; }
.sz-nav-drawer.is-open .sz-nav-drawer__link:nth-child(2) { transition-delay: 0.1s; }
.sz-nav-drawer.is-open .sz-nav-drawer__link:nth-child(3) { transition-delay: 0.15s; }
.sz-nav-drawer.is-open .sz-nav-drawer__link:nth-child(4) { transition-delay: 0.2s; }

.sz-nav-drawer__link:active {
    transform: scale(0.98);
    background: rgba(241, 116, 50, 0.18);
    border-color: rgba(241, 116, 50, 0.35);
}

.sz-nav-drawer__link:hover {
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.sz-nav-drawer__badge {
    margin-left: 0;
    flex-shrink: 0;
}

.sz-nav-drawer__icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--sz-topbar-border);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease 0.12s, transform 0.25s ease 0.12s;
}

.sz-nav-drawer.is-open .sz-nav-drawer__icons {
    opacity: 1;
    transform: translateY(0);
}

body.sz-nav-drawer-open {
    overflow: hidden;
    touch-action: none;
}

body.sz-nav-drawer-open .sz-topbar {
    z-index: 630;
}

@media (max-width: 560px) {
    .sz-topbar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 500;
    }

    .sz-topbar__row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        height: auto;
        max-height: none;
        min-height: var(--sz-topbar-row-height);
        padding-bottom: 0;
    }

    .sz-topbar__nav-desktop,
    .sz-topbar__tools {
        display: none !important;
    }

    .sz-topbar__mobile-only.sz-burger {
        display: inline-flex !important;
    }

    .sz-logo {
        align-self: center;
        margin-bottom: 0;
        margin-right: auto;
        flex: 0 1 auto;
        min-width: 0;
    }

    .sz-logo__img {
        height: 44px;
        width: auto;
        max-width: min(110px, 40vw);
        transform: none;
    }

    .sz-topbar__bar-end {
        margin-left: 0;
        flex-shrink: 0;
        align-items: center;
        gap: 0.35rem;
    }

    .sz-nav-avatar {
        width: auto;
        height: auto;
        align-items: center;
    }

    .sz-nav-avatar__disk {
        width: 2.75rem;
        height: 2.75rem;
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }

    .sz-topbar.is-scrolled .sz-nav-avatar,
    .sz-topbar.is-scrolled .sz-nav-avatar__disk {
        width: 2.75rem;
        height: 2.75rem;
        transform: none;
    }

    .sz-nav-avatar__chat-badge {
        bottom: -2px;
        right: -4px;
    }

    header.sz-topbar + .sz-main,
    header.sz-topbar:not(.is-scrolled):has(.sz-nav-avatar) + .sz-main,
    header.sz-topbar.is-scrolled:has(.sz-nav-avatar) + .sz-main {
        padding-top: calc(1.25rem + 0.5rem);
    }
}

@media (min-width: 561px) {
    .sz-burger,
    .sz-topbar__mobile-only,
    .sz-nav-drawer {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sz-nav-drawer__panel,
    .sz-nav-drawer__backdrop,
    .sz-nav-drawer__link,
    .sz-nav-drawer__icons,
    .sz-burger__bar {
        transition: none !important;
    }

    .sz-nav-drawer__link {
        opacity: 1;
        transform: none;
    }
}

/* Profil-Avatar: Zeile bleibt 3.25rem; Kreis ragt mit transform nach unten aus dem Streifen */
.sz-nav-avatar {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    width: var(--sz-nav-avatar-rest, 4rem);
    height: 3.25rem;
    overflow: visible;
    line-height: 0;
    text-decoration: none;
    transition: width 0.45s ease;
}

.sz-nav-avatar__disk {
    display: block;
    width: var(--sz-nav-avatar-rest, 4rem);
    height: var(--sz-nav-avatar-rest, 4rem);
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
    transform: translateY(calc(var(--sz-nav-avatar-rest, 4rem) * 0.3));
    transition:
        width 0.45s ease,
        height 0.45s ease,
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

html[data-theme="light"] .sz-nav-avatar__disk {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
}

.sz-nav-avatar:hover {
    text-decoration: none;
    filter: brightness(1.06);
}

.sz-nav a.sz-nav-avatar {
    position: relative;
}

/* Ungelesen-Chat: gleiche Zählung wie Chat-Icon, am Profil-Avatar (sichtbar z. B. auf der Startseite) */
.sz-nav-avatar__chat-badge {
    position: absolute;
    right: -4px;
    bottom: -2px;
    margin: 0;
    z-index: 3;
    font-size: 0.62rem;
    padding: 0.1em 0.38em;
    min-width: 1.15em;
    line-height: 1.15;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.sz-topbar.is-scrolled .sz-nav-avatar__chat-badge {
    right: -2px;
    bottom: 0;
}

/* Nach Scrollen: Kreis in Streifenhöhe, ohne Überstand (eingeschoben) */
.sz-topbar.is-scrolled .sz-nav-avatar__disk {
    width: 3.25rem;
    height: 3.25rem;
    transform: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .sz-topbar.is-scrolled .sz-nav-avatar__disk {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.sz-topbar.is-scrolled .sz-nav-avatar {
    width: 3.25rem;
}

/* Nutzer-Avatare: Kreis mit Foto oder Anfangsbuchstabe (systemweit) */
.sz-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: linear-gradient(145deg, rgba(0, 100, 40, 0.35), rgba(0, 35, 14, 0.55));
    vertical-align: middle;
}

html[data-theme="dark"] .sz-avatar {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(145deg, rgba(50, 120, 70, 0.45), rgba(8, 22, 14, 0.92));
}

.sz-avatar__img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sz-avatar__letter {
    position: relative;
    z-index: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.sz-avatar--fallback .sz-avatar__img {
    display: none;
}

.sz-avatar--fallback .sz-avatar__letter {
    display: flex;
}

.sz-avatar--32 {
    width: 2rem;
    height: 2rem;
}

.sz-avatar--32 .sz-avatar__letter {
    font-size: 0.85rem;
}

.sz-avatar--40 {
    width: 2.5rem;
    height: 2.5rem;
}

.sz-avatar--wa {
    width: 2.25rem;
    height: 2.25rem;
}

.sz-avatar--wa .sz-avatar__letter {
    font-size: 0.78rem;
}

.sz-avatar--44 {
    width: 2.75rem;
    height: 2.75rem;
}

.sz-avatar--44 .sz-avatar__letter {
    font-size: 0.95rem;
}

.sz-avatar--chatlist {
    width: 3.1rem;
    height: 3.1rem;
}

.sz-avatar--chatlist .sz-avatar__letter {
    font-size: 1.15rem;
}

.sz-avatar--96 {
    width: 6rem;
    height: 6rem;
}

.sz-avatar--96 .sz-avatar__letter {
    font-size: 1.85rem;
}

.sz-avatar--nav {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: none;
    border-radius: 50%;
    box-shadow: none;
}

.sz-avatar--nav .sz-avatar__letter {
    font-size: clamp(0.85rem, 28%, 1.35rem);
}

.sz-nav-avatar__disk .sz-avatar__img {
    pointer-events: none;
}

/* Icon-Kacheln: Topbar-Navigation (Start, Chat, Post), Theme, Abmelden */
.sz-theme-toggle,
.sz-logout-btn,
.sz-nav-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--sz-topbar-border);
    background: rgba(255, 255, 255, 0.08);
    color: var(--sz-nav-color);
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
}

.sz-theme-toggle:hover,
.sz-logout-btn:hover,
.sz-nav-icon:hover {
    background: rgba(255, 255, 255, 0.14);
}

html[data-theme="light"] .sz-theme-toggle,
html[data-theme="light"] .sz-logout-btn,
html[data-theme="light"] .sz-nav-icon {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="light"] .sz-theme-toggle:hover,
html[data-theme="light"] .sz-logout-btn:hover,
html[data-theme="light"] .sz-nav-icon:hover {
    background: rgba(255, 255, 255, 0.14);
}

.sz-theme-toggle:focus-visible,
.sz-logout-btn:focus-visible,
a.sz-nav-icon:focus-visible {
    outline: 2px solid var(--sz-orange);
    outline-offset: 3px;
}

.sz-theme-toggle {
    font-size: 1.2rem;
}

.sz-logout-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.sz-logout-btn__icon svg {
    display: block;
}

.sz-theme-toggle__sun,
.sz-theme-toggle__moon {
    display: none;
}

html[data-theme="dark"] .sz-theme-toggle__sun { display: block; }
html[data-theme="light"] .sz-theme-toggle__moon { display: block; }

/* Logo: 110px, 25px nach oben versetzt, ragt unter den Streifen (ohne Scroll-Animation) */
.sz-logo {
    display: inline-flex;
    align-items: flex-start;
    align-self: flex-start;
    height: var(--sz-topbar-row-height);
    overflow: visible;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
    position: relative;
    z-index: 2;
}
.sz-logo:focus-visible {
    outline: 2px solid var(--sz-orange);
    outline-offset: 4px;
    border-radius: 4px;
}
.sz-logo__img {
    display: block;
    height: var(--sz-logo-header-height);
    width: auto;
    max-width: min(165px, 48vw);
    aspect-ratio: 3 / 2;
    object-fit: contain;
    transform: translateY(calc(-1 * var(--sz-logo-shift-up)));
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2))
        drop-shadow(0 10px 22px rgba(0, 0, 0, 0.14));
}
html[data-theme="light"] .sz-logo__img {
    filter: drop-shadow(0 2px 8px rgba(0, 35, 12, 0.28))
        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.56));
}

.sz-nav {
    display: flex;
    gap: 0.65rem 0.85rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: visible;
}

.sz-nav a {
    color: var(--sz-nav-color);
    text-decoration: none;
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.sz-nav a.sz-nav-icon {
    position: relative;
    font-weight: normal;
    text-decoration: none;
}

.sz-nav a.sz-nav-icon:hover {
    text-decoration: none;
}

.sz-nav-icon__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    pointer-events: none;
}

.sz-nav-icon__inner svg {
    display: block;
}

.sz-nav-icon .sz-nav__badge {
    position: absolute;
    top: -3px;
    right: -3px;
    margin: 0;
    font-size: 0.62rem;
    padding: 0.1em 0.38em;
    min-width: 1.15em;
    line-height: 1.15;
    text-align: center;
    z-index: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.sz-nav a.sz-cta {
    background: var(--sz-orange);
    color: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
}

.sz-nav a.sz-cta:hover { filter: brightness(1.08); text-decoration: none; }

.sz-nav__user {
    color: var(--sz-nav-user);
    font-size: 0.9rem;
}

.sz-linkbtn {
    background: transparent;
    border: none;
    color: var(--sz-orange);
    cursor: pointer;
    font-weight: 600;
    padding: 0.35rem 0.25rem;
    font-size: 1rem;
    min-height: 44px;
}

.sz-inline-form { display: inline; margin: 0; }

.sz-main {
    padding: 2rem 0 4rem;
    transition: padding-top 0.45s ease;
}

/* Platz für Logo-Überhang; Avatar-Zusatz nur im Ruhezustand */
header.sz-topbar + .sz-main {
    padding-top: calc(2rem + var(--sz-logo-overhang));
}

header.sz-topbar:not(.is-scrolled):has(.sz-nav-avatar) + .sz-main {
    padding-top: calc(2rem + max(var(--sz-logo-overhang), calc(var(--sz-nav-avatar-rest, 4rem) * 0.3)));
}

header.sz-topbar.is-scrolled:has(.sz-nav-avatar) + .sz-main {
    padding-top: calc(2rem + var(--sz-logo-overhang));
}

@media (max-width: 480px) {
    .sz-main {
        padding: 1.25rem 0 3rem;
    }

    header.sz-topbar + .sz-main {
        padding-top: calc(1.25rem + var(--sz-logo-overhang));
    }

    header.sz-topbar:not(.is-scrolled):has(.sz-nav-avatar) + .sz-main {
        padding-top: calc(1.25rem + max(var(--sz-logo-overhang), calc(var(--sz-nav-avatar-rest, 4rem) * 0.3)));
    }

    header.sz-topbar.is-scrolled:has(.sz-nav-avatar) + .sz-main {
        padding-top: calc(1.25rem + var(--sz-logo-overhang));
    }
}

.sz-footer {
    background: var(--sz-footer-bg);
    padding: 1rem 0;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    font-size: 0.85rem;
    color: var(--sz-footer-color);
}

.sz-hero {
    background: rgba(255, 255, 255, 0.92);
    color: var(--sz-text);
    padding: clamp(1.25rem, 4vw, 2rem);
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .sz-hero {
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 40, 10, 0.12);
}

html[data-theme="dark"] .sz-hero {
    background: var(--sz-hero-bg);
    color: var(--sz-body-color);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

html[data-theme="dark"] .sz-hero .sz-kicker {
    color: var(--sz-st-label);
}

html[data-theme="dark"] .sz-hero h1 {
    color: var(--sz-st-label);
}

html[data-theme="dark"] .sz-hero .sz-btn--ghost {
    background: rgba(0, 0, 0, 0.28);
    color: var(--sz-st-label) !important;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

html[data-theme="dark"] .sz-hero .sz-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    filter: none;
}

.sz-kicker {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--sz-green);
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.sz-hero h1 { margin: 0 0 0.5rem; font-size: clamp(1.35rem, 5vw, 1.75rem); color: var(--sz-green); }

.sz-hero__meta { color: var(--sz-hero-meta); margin-bottom: 1rem; }

/* Startseite: Logo im Hero */
.sz-hero--home {
    position: relative;
    overflow: hidden;
}
.sz-hero--home::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto;
    height: 55%;
    pointer-events: none;
    background: radial-gradient(
        ellipse 70% 80% at 50% 0%,
        rgba(232, 93, 4, 0.14) 0%,
        rgba(0, 120, 50, 0.08) 45%,
        transparent 72%
    );
}
html[data-theme="light"] .sz-hero--home::before {
    background: radial-gradient(
        ellipse 75% 85% at 50% 0%,
        rgba(232, 93, 4, 0.1) 0%,
        rgba(0, 140, 60, 0.06) 50%,
        transparent 75%
    );
}
.sz-home-brand {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: 0 0 clamp(1rem, 3vw, 1.35rem);
}
.sz-home-brand__link {
    display: inline-block;
    line-height: 0;
    padding: clamp(0.55rem, 2vw, 0.85rem) clamp(0.85rem, 3vw, 1.35rem);
    border-radius: 16px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(0, 50, 22, 0.35) 100%
    );
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme="light"] .sz-home-brand__link {
    position: relative;
    border-color: rgba(0, 90, 40, 0.16);
    background: linear-gradient(165deg, #ffffff 0%, #eef8f0 55%, #fff6ee 100%);
    box-shadow:
        0 8px 28px rgba(0, 50, 20, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Grüner Kreis (Menüleisten-Grün) hinter dem großen Logo – nur Light */
@keyframes sz-home-brand-circle-pop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    68% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

html[data-theme="light"] .sz-home-brand__link::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(0, 60, 10, 0.97);
    box-shadow: 0 0 2px rgba(0, 60, 10, 0.57);
    top: calc(50% - 18px);
    left: calc(50% + 41px);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

html[data-theme="light"] .sz-home-brand__link.sz-home-brand__link--circle-ready::before {
    animation: sz-home-brand-circle-pop 0.5s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="light"] .sz-home-brand__link::before {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    html[data-theme="light"] .sz-home-brand__link.sz-home-brand__link--circle-ready::before {
        animation: none;
    }
}

/* Kreis-Position: Desktop unverändert; auf schmalen Screens nach links/unten korrigiert */
@media (max-width: 560px) {
    html[data-theme="light"] .sz-home-brand__link::before {
        width: 54px;
        height: 54px;
        top: calc(50% - 20px);
        left: calc(50% + 41px);
    }
}

@media (max-width: 380px) {
    html[data-theme="light"] .sz-home-brand__link::before {
        width: 50px;
        height: 50px;
        top: calc(50% - 16px);
        left: calc(50% + 34px);
    }
}

.sz-home-brand__link:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
html[data-theme="light"] .sz-home-brand__link:hover {
    box-shadow: 0 12px 32px rgba(0, 50, 20, 0.14);
}
.sz-home-brand__link:focus-visible {
    outline: 2px solid var(--sz-orange);
    outline-offset: 4px;
}
.sz-home-brand__logo {
    display: block;
    width: min(260px, 78vw);
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18))
        drop-shadow(0 10px 22px rgba(0, 0, 0, 0.12));
}
html[data-theme="dark"] .sz-home-brand__logo {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28))
        drop-shadow(0 12px 26px rgba(0, 0, 0, 0.22));
}
html[data-theme="light"] .sz-home-brand__logo {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 35, 12, 0.28))
        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.56));
}

/* Startseite: Spiele ±36 h unter „Aktuelles Tippspiel“ */
.sz-home-matches {
    margin-top: 1.15rem;
    padding: 0.85rem 0.75rem 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 80, 35, 0.14);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(228, 245, 232, 0.88) 42%,
        rgba(255, 248, 240, 0.9) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 6px 24px rgba(0, 50, 20, 0.08);
}
html[data-theme="dark"] .sz-home-matches {
    border-color: rgba(120, 200, 140, 0.2);
    background: linear-gradient(
        145deg,
        rgba(0, 32, 14, 0.95) 0%,
        rgba(0, 52, 24, 0.88) 45%,
        rgba(28, 18, 8, 0.9) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 28px rgba(0, 0, 0, 0.45);
}
.sz-home-matches__title {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sz-green);
}
html[data-theme="dark"] .sz-home-matches__title {
    color: var(--sz-st-label);
}
.sz-home-matches__empty {
    margin: 0;
    font-size: 0.88rem;
    color: var(--sz-hero-meta);
}
.sz-home-matches__scroll {
    max-height: min(28rem, 55vh);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.35rem 0.2rem 0.15rem 0;
    scrollbar-gutter: stable;
    border-radius: 8px;
    background: linear-gradient(
        180deg,
        rgba(0, 90, 40, 0.04) 0%,
        rgba(232, 93, 4, 0.03) 50%,
        rgba(0, 70, 30, 0.05) 100%
    );
}
html[data-theme="dark"] .sz-home-matches__scroll {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(232, 93, 4, 0.05) 50%,
        rgba(0, 0, 0, 0.12) 100%
    );
}
.sz-home-matches__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.sz-home-matches__day {
    margin: 0.35rem 0 0.1rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sz-hero-meta);
}
.sz-home-match {
    border-radius: 9px;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(240, 252, 242, 0.65) 55%,
        rgba(255, 252, 246, 0.75) 100%
    );
    border: 1px solid rgba(0, 60, 20, 0.1);
    box-shadow: 0 1px 8px rgba(0, 40, 10, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
html[data-theme="dark"] .sz-home-match {
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(0, 60, 28, 0.35) 50%,
        rgba(0, 0, 0, 0.25) 100%
    );
    border-color: var(--sz-match-card-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
}
.sz-home-match--live {
    border-color: rgba(232, 93, 4, 0.45);
    box-shadow: 0 0 0 1px rgba(232, 93, 4, 0.15), 0 4px 18px rgba(232, 93, 4, 0.12);
}
.sz-home-match__link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.1rem 0.5rem;
    align-items: center;
    padding: 0.32rem 0.45rem;
    text-decoration: none;
    color: inherit;
}
.sz-home-match__link:not(:has(.sz-home-match__detail)) {
    grid-template-rows: auto;
}
.sz-home-match__link:hover {
    color: inherit;
}
.sz-home-match__link:focus-visible {
    outline: 2px solid var(--sz-orange);
    outline-offset: 2px;
    border-radius: 10px;
}
.sz-home-match:hover {
    border-color: rgba(0, 120, 40, 0.28);
    transform: translateY(-1px);
}
html[data-theme="dark"] .sz-home-match:hover {
    border-color: rgba(255, 255, 255, 0.22);
}
.sz-home-match__when {
    grid-row: 1 / span 2;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.15rem 0.3rem;
    border-radius: 7px;
    background: rgba(0, 80, 30, 0.07);
    font-variant-numeric: tabular-nums;
}
.sz-home-match__link:not(:has(.sz-home-match__detail)) .sz-home-match__when {
    grid-row: 1;
}
html[data-theme="dark"] .sz-home-match__when {
    background: rgba(255, 255, 255, 0.06);
}
.sz-home-match__time {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sz-green);
    line-height: 1.15;
}
html[data-theme="dark"] .sz-home-match__time {
    color: var(--sz-st-label);
}
.sz-home-match__teams {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    min-width: 0;
}
.sz-home-match__club {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.sz-home-match__club--home {
    flex: 1 1 0;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.28rem;
    margin-inline-end: 0.05rem;
}
.sz-home-match__club--away {
    flex: 1 1 0;
    justify-content: flex-start;
    margin-inline-start: 0.15rem;
}
.sz-home-match__crest {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}
.sz-home-match__name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--sz-green);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}
.sz-home-match__club--home .sz-home-match__name {
    flex: 1 1 auto;
    text-align: right;
    max-width: none;
}
.sz-home-match__club--away .sz-home-match__name {
    text-align: left;
    max-width: min(9rem, 36vw);
}
html[data-theme="dark"] .sz-home-match__name {
    color: var(--sz-match-team);
}
.sz-home-match__score {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    min-width: 2.75rem;
    padding: 0 0.25rem;
}
.sz-home-match__scoreline {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--sz-text);
    line-height: 1.1;
}
html[data-theme="dark"] .sz-home-match__scoreline {
    color: var(--sz-match-score-txt);
}
.sz-home-match__scoreline--vs {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sz-hero-meta);
    opacity: 0.85;
}
.sz-home-match__scoreline--muted {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sz-home-match__colon {
    margin: 0 0.08em;
    opacity: 0.65;
}
.sz-home-match__live-pill {
    display: inline-block;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--sz-orange);
    animation: sz-home-live-pulse 1.6s ease-in-out infinite;
}
@keyframes sz-home-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}
.sz-home-match__detail {
    grid-column: 2;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--sz-hero-meta);
}
.sz-home-match__detail .sz-match-ende {
    font-size: inherit;
}
.sz-home-matches .sz-home-match.sz-reveal {
    --sz-reveal-delay: calc(min(var(--sz-reveal-i, 0), 12) * 35ms);
}
@media (max-width: 520px) {
    .sz-home-match__crest {
        width: 56px;
        height: 56px;
    }
    .sz-home-match__name {
        font-size: 0.85rem;
        max-width: min(5.5rem, 26vw);
    }
    .sz-home-match__club--home .sz-home-match__name {
        max-width: none;
    }
    .sz-home-match__scoreline {
        font-size: 0.92rem;
    }
}

.sz-btn {
    display: inline-block;
    background: var(--sz-orange);
    color: #fff !important;
    font-weight: 700;
    padding: 0.65rem 1.25rem;
    border-radius: 6px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.sz-btn:hover { filter: brightness(1.05); text-decoration: none; }

.sz-news {
    background: var(--sz-news-section-bg);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid var(--sz-news-section-border);
}

@media (min-width: 480px) {
    .sz-news { padding: 1.5rem; }
}

.sz-block-title {
    margin: 0 0 1rem;
    color: var(--sz-news-block-title);
    font-size: clamp(1.1rem, 4vw, 1.25rem);
}

.sz-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Karten: klar getrennt */
.sz-news-item {
    margin: 0;
    padding: 0;
}

.sz-news-card {
    margin: 0;
    padding: 1rem 1rem 1.1rem;
    border-radius: 10px;
    background: var(--sz-news-card-bg);
    border: 1px solid var(--sz-news-card-border);
    border-left: 4px solid var(--sz-orange);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] .sz-news-card {
    box-shadow: 0 2px 12px rgba(0, 40, 10, 0.1);
}

.sz-news-card__time {
    display: block;
    font-size: 0.8rem;
    color: var(--sz-news-card-time);
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
}

.sz-news-card__title {
    margin: 0 0 0.5rem;
    color: var(--sz-news-card-title);
    font-size: 1.05rem;
    line-height: 1.3;
}

@media (min-width: 480px) {
    .sz-news-card__title { font-size: 1.1rem; }
}

.sz-news-card__title a {
    color: var(--sz-news-card-title);
    text-decoration: none;
}

.sz-news-card__title a:hover {
    color: var(--sz-orange);
    text-decoration: underline;
}

.sz-news-card__body {
    color: var(--sz-news-card-body);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Beim Scrollen einblenden („lazy“) – erst nach JS-Aktivierung ausblenden (sichtbarer Bereich bleibt sofort lesbar) */
.sz-reveal,
.sz-news-item--reveal {
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: var(--sz-reveal-delay, 0.05s);
}

html.sz-reveal-active .sz-reveal:not(.is-inview),
html.sz-reveal-active .sz-news-item--reveal:not(.is-inview) {
    opacity: 0;
    transform: translateY(18px);
}

html.sz-reveal-active .sz-reveal.is-inview,
html.sz-reveal-active .sz-news-item--reveal.is-inview,
.sz-reveal.is-inview,
.sz-news-item--reveal.is-inview {
    opacity: 1;
    transform: translateY(0);
}

.sz-ranking-table tbody tr.sz-reveal {
    --sz-reveal-delay: calc(min(var(--sz-reveal-i, 0), 20) * 35ms);
}

/* Tabellen: kürzerer Stagger, Vorlauf über data-sz-reveal-ahead im JS */
.sz-table-wrap[data-sz-reveal-ahead] tbody tr.sz-reveal {
    --sz-reveal-delay: calc(min(var(--sz-reveal-i, 0), 12) * 18ms);
}

.sz-chat-roomlist__item.sz-reveal {
    --sz-reveal-delay: calc(min(var(--sz-reveal-i, 0), 24) * 28ms);
}

@media (prefers-reduced-motion: reduce) {
    .sz-reveal,
    .sz-news-item--reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.sz-news-more {
    margin: 0.65rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--sz-news-more-border);
    font-size: 0.9rem;
}
.sz-news-more a { font-weight: 600; }

.sz-hint {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--sz-hint-color);
    text-align: center;
    line-height: 1.45;
    padding: 0 0.25rem;
}

html[data-theme="dark"] .sz-hint code {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sz-st-label);
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    font-size: 0.88em;
}

.sz-panel {
    background: rgba(255, 255, 255, 0.95);
    color: var(--sz-text);
    margin: 0 auto;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .sz-panel {
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 40, 10, 0.12);
    border: 1px solid rgba(0, 60, 10, 0.1);
}

html[data-theme="dark"] .sz-panel {
    background: var(--sz-hero-bg);
    color: var(--sz-body-color);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
}

html[data-theme="dark"] .sz-panel h1 {
    color: var(--sz-st-label);
}

html[data-theme="dark"] .sz-panel .sz-form label {
    color: var(--sz-st-label);
}

html[data-theme="dark"] .sz-panel .sz-form input[type="text"],
html[data-theme="dark"] .sz-panel .sz-form input[type="email"],
html[data-theme="dark"] .sz-panel .sz-form input[type="password"],
html[data-theme="dark"] .sz-panel .sz-form textarea {
    color: var(--sz-body-color);
}

html[data-theme="dark"] .sz-panel .sz-form input[type="text"],
html[data-theme="dark"] .sz-panel .sz-form input[type="email"],
html[data-theme="dark"] .sz-panel .sz-form input[type="password"],
html[data-theme="dark"] .sz-panel .sz-form textarea {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .sz-panel .sz-form select {
    background-color: var(--sz-form-select-bg);
    border-color: var(--sz-form-select-border);
    color: var(--sz-body-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .sz-panel .sz-alert {
    color: #ff8a9d;
}

html[data-theme="dark"] .sz-panel .sz-success {
    color: #7adf9e;
}

/* Fließtext im Panel (Dark); Alerts/Fehler ausnehmen (eigene Farben) */
html[data-theme="dark"] .sz-panel,
html[data-theme="dark"] .sz-panel p:not(.sz-alert):not(.sz-success),
html[data-theme="dark"] .sz-panel .sz-checkbox {
    color: var(--sz-body-color);
}

html[data-theme="dark"] .sz-panel p.sz-small {
    color: var(--sz-small);
}

html[data-theme="dark"] .sz-panel code {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sz-st-label);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.page-profile .sz-panel,
.page-mailbox .sz-panel,
.page-chat .sz-panel {
    max-width: 100%;
    width: 100%;
    margin: 1rem auto;
}

/* Profil: Sidebar-Navigation */
.sz-profile-layout {
    display: grid;
    grid-template-columns: minmax(10.5rem, 13rem) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
    align-items: start;
    max-width: 72rem;
    margin: 0 auto 1rem;
    padding: 0 0.25rem;
}

.sz-profile-layout--nav-hidden {
    grid-template-columns: minmax(0, 1fr);
}

.sz-profile-nav {
    position: sticky;
    top: 0.85rem;
    z-index: 2;
}

.sz-profile-nav__inner {
    padding: 0.85rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.45));
}

html[data-theme="light"] .sz-profile-nav__inner {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 60, 10, 0.12);
}

.sz-profile-nav__head {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(0, 60, 10, 0.1);
}

html[data-theme="dark"] .sz-profile-nav__head {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sz-profile-nav__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sz-small, #5a6b5f);
}

html[data-theme="dark"] .sz-profile-nav__title {
    color: var(--sz-st-label);
}

.sz-profile-nav__toggle {
    align-self: flex-start;
    padding: 0.3rem 0.55rem;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    font-size: 0.78rem;
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
}

html[data-theme="dark"] .sz-profile-nav__toggle {
    background: rgba(255, 255, 255, 0.08);
}

.sz-profile-nav__toggle:hover {
    background: rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .sz-profile-nav__toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

.sz-profile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sz-profile-nav__link {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.35;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sz-profile-nav__link:hover {
    background: rgba(0, 0, 0, 0.06);
    text-decoration: none;
}

html[data-theme="dark"] .sz-profile-nav__link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sz-profile-nav__link.is-active {
    font-weight: 700;
    border-left-color: var(--sz-orange, #e85d04);
    background: rgba(232, 93, 4, 0.1);
    color: var(--sz-green, #0a5c28);
}

html[data-theme="dark"] .sz-profile-nav__link.is-active {
    color: var(--sz-st-label);
    background: rgba(232, 93, 4, 0.14);
}

.sz-profile-main {
    min-width: 0;
}

.sz-profile-nav-show-wrap {
    margin: 0 0 0.75rem;
}

.sz-profile-layout--nav-hidden .sz-profile-nav {
    display: none;
}

.sz-profile-layout:not(.sz-profile-layout--nav-hidden) .sz-profile-nav-show-wrap {
    display: none;
}

.sz-profile-panel {
    scroll-margin-top: 1rem;
}

/* Schwebende Sidebar (Mobil): Regeln & Ranglisten */
.sz-section-nav-fab {
    display: none;
}

.sz-section-nav-fab__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0, 12, 4, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

html[data-theme="light"] .sz-section-nav-fab__backdrop {
    background: rgba(0, 28, 10, 0.42);
}

.sz-section-nav-fab__backdrop:not([hidden]) {
    display: block;
    pointer-events: auto;
}

.sz-profile-layout--float-nav-mobile.sz-section-nav-fab-open .sz-section-nav-fab__backdrop {
    opacity: 1;
}

.sz-section-nav-fab {
    position: fixed;
    z-index: 590;
    bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px));
    left: max(1rem, env(safe-area-inset-left, 0px));
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--sz-orange, #f17432) 0%, #d85f1c 100%);
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.sz-section-nav-fab:hover {
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

.sz-section-nav-fab:active {
    transform: scale(0.96);
}

.sz-section-nav-fab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.sz-section-nav-fab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.sz-section-nav-fab__icon svg {
    display: block;
}

body.sz-section-nav-fab-open {
    overflow: hidden;
    touch-action: none;
}

@media (max-width: 768px) {
    .sz-profile-layout {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .sz-profile-layout--float-nav-mobile {
        grid-template-columns: minmax(0, 1fr);
    }

    .sz-profile-layout--float-nav-mobile .sz-section-nav-fab {
        display: inline-flex;
    }

    .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(18rem, 90vw);
        max-width: 100%;
        margin: 0;
        padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
        z-index: 610;
        transform: translateX(-108%);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        visibility: hidden;
    }

    .sz-profile-layout--float-nav-mobile.sz-section-nav-fab-open .sz-profile-nav--float-mobile {
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
    }

    .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__inner {
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 0 14px 14px 0;
        border-left: 0;
        border-top: 0;
        border-bottom: 0;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.38);
        overflow: hidden;
    }

    html[data-theme="light"] .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__inner {
        background: linear-gradient(
            165deg,
            rgba(0, 44, 16, 0.98) 0%,
            rgba(0, 60, 10, 0.97) 100%
        );
        border-right: 1px solid var(--sz-topbar-border);
        color: var(--sz-nav-color);
    }

    html[data-theme="light"] .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__title {
        color: var(--sz-nav-user);
    }

    html[data-theme="light"] .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__toggle {
        background: rgba(255, 255, 255, 0.1);
        color: var(--sz-nav-color);
    }

    html[data-theme="light"] .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__toggle:hover {
        background: rgba(255, 255, 255, 0.16);
    }

    html[data-theme="light"] .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__head {
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    html[data-theme="light"] .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__link {
        color: var(--sz-nav-color);
        background: rgba(255, 255, 255, 0.06);
    }

    html[data-theme="light"] .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__link:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    html[data-theme="light"] .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__link.is-active {
        color: #fff;
        background: rgba(241, 116, 50, 0.32);
        border-left-color: var(--sz-orange);
    }

    html[data-theme="dark"] .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__inner {
        background: linear-gradient(
            165deg,
            rgba(12, 28, 16, 0.98) 0%,
            rgba(6, 18, 10, 0.99) 100%
        );
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__nav {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__list {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

    .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__link {
        border-left: 3px solid transparent;
        border-bottom: 0;
        padding: 0.55rem 0.7rem;
        font-size: 0.95rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__link.is-active {
        border-bottom-color: transparent;
        border-left-color: var(--sz-orange, #f17432);
    }

    .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile .sz-profile-nav__head {
        flex-direction: column;
        align-items: stretch;
        flex-shrink: 0;
    }

    .sz-profile-layout--float-nav-mobile.sz-profile-layout--nav-hidden .sz-profile-nav--float-mobile {
        display: none;
    }

    .sz-profile-layout:not(.sz-profile-layout--float-nav-mobile) .sz-profile-nav {
        position: static;
    }

    .sz-profile-layout:not(.sz-profile-layout--float-nav-mobile) .sz-profile-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .sz-profile-layout:not(.sz-profile-layout--float-nav-mobile) .sz-profile-nav__link {
        border-left: 0;
        border-bottom: 2px solid transparent;
        padding: 0.4rem 0.55rem;
        font-size: 0.88rem;
    }

    .sz-profile-layout:not(.sz-profile-layout--float-nav-mobile) .sz-profile-nav__link.is-active {
        border-bottom-color: var(--sz-orange, #e85d04);
    }

    .sz-profile-layout:not(.sz-profile-layout--float-nav-mobile) .sz-profile-nav__head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .sz-profile-nav--float-mobile,
    .sz-section-nav-fab__backdrop {
        transition: none !important;
    }
}

.sz-mail-admin__mode {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
}

.sz-mail-admin__mode legend {
    padding: 0;
    margin-bottom: 0.35rem;
}

.sz-mail-admin__radio {
    display: block;
    margin: 0.35rem 0 0;
}

.sz-mail-admin .sz-form label {
    margin-bottom: 0.9rem;
}

.sz-mail-admin__field {
    margin-bottom: 0.9rem;
}

.sz-panel__title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    color: var(--sz-green);
}

html[data-theme="dark"] .sz-panel__title {
    color: var(--sz-st-label);
}

.sz-profile-avatar {
    margin: 0 0 1rem;
}

.sz-avatar-presets-intro {
    margin: 0 0 0.85rem;
}

.sz-avatar-presets-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
    min-width: 0;
}

.sz-avatar-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
    gap: 0.45rem;
    max-width: 36rem;
}

.sz-avatar-preset-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 0.16rem;
    box-shadow: none;
    transition:
        transform 0.12s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.sz-avatar-preset-tile:hover {
    transform: scale(1.05);
}

.sz-avatar-preset-tile:has(.sz-avatar-preset-tile__input:checked) {
    box-shadow: 0 0 0 2px var(--sz-green-mid, #2e7d32);
    border-radius: 0.5rem;
    background: rgba(46, 125, 50, 0.08);
}

html[data-theme="dark"] .sz-avatar-preset-tile:has(.sz-avatar-preset-tile__input:checked) {
    box-shadow: 0 0 0 2px var(--sz-st-label, #b2dfdb);
    background: rgba(178, 223, 219, 0.1);
}

.sz-avatar-preset-tile__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.sz-avatar-preset-tile__img {
    display: block;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 60, 10, 0.14);
    object-fit: cover;
}

html[data-theme="dark"] .sz-avatar-preset-tile__img {
    border-color: rgba(255, 255, 255, 0.16);
}

.sz-avatar-presets-submit {
    margin: 0.75rem 0 0;
}

.sz-profile-avatar .sz-profile-avatar__disk {
    border-radius: 50%;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .sz-profile-avatar .sz-profile-avatar__disk {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

.sz-nav__badge {
    display: inline-block;
    min-width: 1.1em;
    margin-left: 0.28rem;
    padding: 0.12em 0.45em;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    vertical-align: middle;
    border-radius: 999px;
    background: var(--sz-orange);
    color: #fff;
}

.sz-nav__badge[hidden] {
    display: none !important;
}

.sz-nav__pill {
    font-weight: 700;
    color: var(--sz-st-label);
}

html[data-theme="light"] .sz-nav__pill {
    color: var(--sz-green-mid);
}

html[data-theme="light"] .sz-topbar .sz-nav__pill {
    color: #d8efd8;
}

/* Posteingang – fancy */
.page-mailbox .sz-mail-hero {
    position: relative;
    margin: 0 auto 1.25rem;
    padding: 1.5rem 1.25rem 1.35rem;
    text-align: center;
    border-radius: var(--sz-radius-lg, 1rem);
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.82));
    box-shadow: var(--sz-match-card-shadow, 0 8px 28px rgba(0, 0, 0, 0.35));
    overflow: hidden;
}
html[data-theme="light"] .page-mailbox .sz-mail-hero {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 245, 0.96) 100%);
    border-color: rgba(0, 60, 10, 0.12);
    box-shadow: 0 8px 28px rgba(0, 40, 12, 0.1);
}
.sz-mail-hero__glow {
    position: absolute;
    inset: -50% -30% auto;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(241, 116, 50, 0.2), transparent 68%);
    pointer-events: none;
}
.sz-mail-hero__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.35rem;
    color: var(--sz-orange, #f17432);
    opacity: 0.9;
}
.sz-mail-hero__title {
    margin: 0.15rem 0 0.35rem;
    font-size: clamp(1.5rem, 4vw, 1.85rem);
}
.sz-mail-hero__lead {
    margin: 0;
    font-size: 0.92rem;
    color: var(--sz-hero-meta, var(--sz-small));
    line-height: 1.45;
    max-width: 28rem;
    margin-inline: auto;
}
.sz-mail-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    color: var(--sz-hero-meta, var(--sz-small));
}
.sz-mail-hero__stats strong {
    color: inherit;
    font-weight: 800;
    font-size: 1.05em;
}
.sz-mail-hero__stats--unread strong {
    color: var(--sz-orange, #f17432);
}
.sz-mail-inbox {
    margin: 0 auto 1.25rem;
}
.sz-mail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.sz-mail-list__item.sz-reveal {
    --sz-reveal-delay: calc(min(var(--sz-reveal-i, 0), 24) * 28ms);
}
.sz-mail-list__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem 0.75rem;
    padding: 0.9rem 1rem 0.9rem 0.9rem;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.82));
    box-shadow: var(--sz-match-card-shadow, 0 6px 22px rgba(0, 0, 0, 0.35));
    transition:
        transform 0.14s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}
.sz-mail-list__link:hover {
    transform: translateY(-2px);
    border-color: rgba(241, 116, 50, 0.45);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .sz-mail-list__link {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 245, 0.96) 100%);
    border-color: rgba(0, 60, 10, 0.12);
    box-shadow: 0 6px 22px rgba(0, 40, 12, 0.1);
}
html[data-theme="light"] .sz-mail-list__link:hover {
    border-color: rgba(241, 116, 50, 0.55);
}
.sz-mail-list__item--unread .sz-mail-list__link {
    border-color: rgba(241, 116, 50, 0.35);
    box-shadow:
        var(--sz-match-card-shadow, 0 6px 22px rgba(0, 0, 0, 0.35)),
        inset 3px 0 0 var(--sz-orange, #f17432);
}
.sz-mail-list__item--unread .sz-mail-list__subject {
    font-weight: 800;
}
.sz-mail-kind {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 50%;
    flex-shrink: 0;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.sz-mail-kind--system {
    background: linear-gradient(145deg, #1a4d6e 0%, #2d8fbf 55%, #1e6a94 100%);
}
.sz-mail-kind--admin {
    background: linear-gradient(145deg, #4a2a0a 0%, #c45c12 50%, #8a4a10 100%);
}
.sz-mail-kind--invite {
    background: linear-gradient(145deg, #1a5c38 0%, #2e9d5c 50%, #1a6b42 100%);
}
.sz-mail-list__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}
.sz-mail-list__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.sz-mail-list__subject {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.25;
    word-break: break-word;
}
.sz-mail-list__meta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.4rem;
}
.sz-mail-list__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--sz-orange, #f17432);
    box-shadow: 0 0 0 3px rgba(241, 116, 50, 0.25);
}
.sz-mail-list__time {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.62;
    white-space: nowrap;
}
.sz-mail-list__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.sz-mail-list__tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    line-height: 1.2;
}
.sz-mail-list__tag--system {
    background: rgba(45, 143, 191, 0.2);
    color: #7ec8e8;
}
html[data-theme="light"] .sz-mail-list__tag--system {
    color: #1a5c7a;
    background: rgba(45, 143, 191, 0.15);
}
.sz-mail-list__tag--admin {
    background: rgba(241, 116, 50, 0.18);
    color: var(--sz-orange, #f17432);
}
.sz-mail-list__tag--invite {
    background: rgba(46, 157, 92, 0.2);
    color: #7ddea8;
}
html[data-theme="light"] .sz-mail-list__tag--invite {
    color: #1a6b42;
    background: rgba(46, 157, 92, 0.15);
}
.sz-mail-list__tag--sender {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    font-size: 0.72rem;
    opacity: 0.75;
    background: rgba(255, 255, 255, 0.06);
}
html[data-theme="light"] .sz-mail-list__tag--sender {
    background: rgba(0, 60, 10, 0.06);
}
.sz-mail-list__preview {
    font-size: 0.84rem;
    line-height: 1.35;
    opacity: 0.72;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sz-mail-list__chevron {
    font-size: 1.35rem;
    font-weight: 300;
    opacity: 0.35;
    line-height: 1;
}
.sz-mail-list__link:hover .sz-mail-list__chevron {
    opacity: 0.7;
    transform: translateX(2px);
}
.sz-mail-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
    border-radius: 14px;
    border: 1px dashed var(--sz-match-card-border, rgba(255, 255, 255, 0.18));
    background: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .sz-mail-empty {
    background: rgba(0, 60, 10, 0.04);
}
.sz-mail-empty__icon {
    color: var(--sz-orange, #f17432);
    opacity: 0.55;
    margin-bottom: 0.75rem;
}
.sz-mail-empty__title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
}
.sz-mail-empty__hint {
    margin: 0;
    font-size: 0.88rem;
    color: var(--sz-hero-meta, var(--sz-small));
    max-width: 22rem;
    margin-inline: auto;
}
.sz-mail-read {
    max-width: 44rem;
    margin: 0 auto 1.25rem;
    padding: 1.25rem 1.35rem;
    border-radius: 14px;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.82));
    box-shadow: var(--sz-match-card-shadow, 0 8px 28px rgba(0, 0, 0, 0.35));
}
html[data-theme="light"] .sz-mail-read {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 252, 248, 0.98) 100%);
    border-color: rgba(0, 60, 10, 0.12);
}
.sz-mail-read__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem 1rem;
    align-items: start;
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.1));
}
.sz-mail-read__meta {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    color: var(--sz-hero-meta, var(--sz-small));
}
.sz-mail-read__tag {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72em;
}
.sz-mail-read__subject {
    margin: 0;
    font-size: clamp(1.15rem, 3vw, 1.45rem);
    line-height: 1.25;
    color: var(--sz-green);
}
html[data-theme="dark"] .sz-mail-read__subject {
    color: var(--sz-st-label);
}
.sz-mail-read__body {
    line-height: 1.55;
    font-size: 0.98rem;
}
.sz-mail-read__back {
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
}
.sz-mail-admin--fancy {
    max-width: 44rem;
    margin-inline: auto;
}
.sz-mail-admin__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.85rem;
    margin-bottom: 1.15rem;
    align-items: start;
}
.sz-mail-admin__head-icon {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #4a2a0a 0%, #c45c12 50%, #8a4a10 100%);
    color: #fff;
}
.sz-mail-admin__title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--sz-green);
}
html[data-theme="dark"] .sz-mail-admin__title {
    color: var(--sz-st-label);
}
.sz-mail-admin__desc {
    margin: 0;
    grid-column: 2;
    font-size: 0.85rem;
    color: var(--sz-small);
}
.sz-mail-admin__mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.sz-mail-admin__mode-card {
    display: block;
    cursor: pointer;
    margin: 0;
}
.sz-mail-admin__mode-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sz-mail-admin__mode-card-label {
    display: block;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.14));
    background: rgba(0, 0, 0, 0.15);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}
html[data-theme="light"] .sz-mail-admin__mode-card-label {
    background: rgba(0, 60, 10, 0.04);
}
.sz-mail-admin__mode-card.is-selected .sz-mail-admin__mode-card-label,
.sz-mail-admin__mode-card:has(input:checked) .sz-mail-admin__mode-card-label {
    border-color: var(--sz-orange, #f17432);
    background: rgba(241, 116, 50, 0.12);
    box-shadow: 0 0 0 1px rgba(241, 116, 50, 0.25);
}
.sz-mail-admin__radio {
    display: none;
}

.sz-form input[type="date"],
.sz-form input[type="file"]:not(.sz-avatar-pick__input) {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0.35rem;
    padding: 0.45rem 0;
    min-height: 40px;
    font-size: 0.95rem;
}

html[data-theme="dark"] .sz-form input[type="date"],
html[data-theme="dark"] .sz-form input[type="file"]:not(.sz-avatar-pick__input) {
    color: var(--sz-body-color);
}

/* Croppie (Profil-Avatar) */
.sz-croppie-hint {
    font-size: 0.88rem;
    margin: 0.5rem 0 1rem;
}

/* Ein Klickziel „Neues Bild wählen“ – kein separates „Datei auswählen“ */
.sz-avatar-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0.35rem 0 0.5rem;
}

#sz-avatar-form label.sz-avatar-pick,
.sz-form--avatar-pick label.sz-avatar-pick {
    display: inline-block;
    margin-bottom: 0.65rem;
    font-weight: 700;
}

#sz-avatar-form .sz-avatar-pick__input,
.sz-form--avatar-pick .sz-avatar-pick__input,
.sz-chat-new-dialog .sz-avatar-pick__input {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    font-size: 0;
    line-height: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    color: transparent;
}

.sz-avatar-pick__input::file-selector-button {
    display: none;
}

.sz-avatar-pick__input::-webkit-file-upload-button {
    visibility: hidden;
}

.sz-avatar-pick__text {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.sz-avatar-pick:focus-within .sz-avatar-pick__text {
    outline: 2px solid var(--sz-orange);
    outline-offset: 2px;
}

.sz-croppie-wrap {
    margin: 0.75rem 0 1rem;
    max-width: 100%;
}

.sz-croppie-wrap--hidden {
    display: none !important;
}

.sz-croppie-inner .cr-viewport {
    box-shadow: inset 0 0 0 2px rgba(0, 60, 10, 0.35);
}

html[data-theme="dark"] .sz-croppie-inner .cr-viewport {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.sz-form--noscript {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--sz-tips-table-border);
}

.sz-panel h1 { margin-top: 0; color: var(--sz-green); font-size: 1.4rem; }

.sz-form label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: 0.9rem; }

.sz-form input[type="text"],
.sz-form input[type="email"],
.sz-form input[type="password"],
.sz-form select,
.sz-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0.35rem;
    padding: 0.55rem 0.65rem;
    min-height: 44px;
    border: 1px solid var(--sz-form-border);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

.sz-form textarea {
    min-height: 8rem;
    line-height: 1.45;
    resize: vertical;
}

.sz-form select {
    cursor: pointer;
    background-color: #fff;
    color: var(--sz-text);
}

html[data-theme="dark"] .sz-form select {
    background-color: var(--sz-form-select-bg);
    border-color: var(--sz-form-select-border);
    color: var(--sz-body-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Geöffnete Listen: wo der Browser es erlaubt (z. B. Firefox, Chromium), gleiche grüne Lesbarkeit */
html[data-theme="dark"] .sz-form select option,
html[data-theme="dark"] .sz-form select optgroup {
    background-color: var(--sz-form-select-option-bg);
    color: var(--sz-form-select-option-fg);
}

html[data-theme="dark"] .sz-panel .sz-form select option,
html[data-theme="dark"] .sz-panel .sz-form select optgroup {
    background-color: var(--sz-form-select-option-bg);
    color: var(--sz-form-select-option-fg);
}

.sz-checkbox { font-weight: normal; }

.sz-alert { color: #b00020; font-weight: 600; }

.sz-success { color: #0a6e2f; font-weight: 600; }

.sz-small { font-size: 0.85rem; color: var(--sz-small); }

/* Tippspiel-Board */
.sz-hero--compact { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.sz-hero--compact h1 { font-size: 1.35rem; }

.sz-banner { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.sz-banner--ok { background: var(--sz-banner-ok-bg); color: var(--sz-banner-ok-text); }
.sz-banner--err { background: var(--sz-banner-err-bg); color: var(--sz-banner-err-text); }

.sz-tipp-toast {
    position: fixed;
    left: 50%;
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    z-index: 10000;
    transform: translateX(-50%) translateY(0.75rem);
    padding: 0.65rem 1.35rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sz-banner-ok-text);
    background: var(--sz-banner-ok-bg);
    border: 1px solid rgba(45, 138, 78, 0.45);
    box-shadow: 0 8px 28px rgba(0, 40, 10, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sz-tipp-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.sz-chat-toast-stack {
    position: fixed;
    top: calc(var(--sz-topbar-row-height, 3.25rem) + var(--sz-logo-overhang, 0px) + 0.65rem);
    left: 50%;
    z-index: 10050;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: min(22rem, calc(100vw - 1.5rem));
    pointer-events: none;
}

.sz-chat-toast {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    background: var(--sz-hero-bg, rgba(0, 28, 12, 0.96));
    border: 1px solid rgba(45, 138, 78, 0.45);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(calc(-100% - 0.75rem));
    transition:
        opacity 0.28s ease,
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="light"] .sz-chat-toast {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 80, 30, 0.2);
    box-shadow: 0 10px 28px rgba(0, 40, 10, 0.18);
}

.sz-chat-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .sz-chat-toast {
        transform: none;
        transition: opacity 0.15s ease;
    }

    .sz-chat-toast.is-visible {
        transform: none;
    }
}

.sz-chat-toast:hover {
    border-color: var(--sz-accent, #3dd68c);
}

.sz-chat-toast__sender {
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.25;
}

.sz-chat-toast__room {
    font-size: 0.78rem;
    color: var(--sz-hint-color, rgba(255, 255, 255, 0.65));
    line-height: 1.2;
}

html[data-theme="light"] .sz-chat-toast__room {
    color: rgba(0, 40, 18, 0.55);
}

.sz-chat-toast__body {
    font-size: 0.88rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    word-break: break-word;
}

.sz-panel--narrow { max-width: 520px; margin: 0 auto 1rem; }
.sz-join { margin-bottom: 1.5rem; }

.sz-st-select {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    background: var(--sz-st-select-bg);
    border-radius: 8px;
    border: 1px solid var(--sz-st-select-border);
}
.sz-st-label {
    color: var(--sz-st-label);
    font-weight: 700;
    margin-right: 0.5rem;
}
.sz-st-select a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    background: var(--sz-st-link-bg);
    color: var(--sz-st-link-color);
    text-decoration: none;
    font-weight: 600;
}
.sz-st-select a:hover { background: var(--sz-st-link-hover-bg); }
.sz-st-select a.is-active {
    background: var(--sz-orange);
    color: #fff;
}

/* Fremdtipps: Namensfilter (unter jedem Spoiler, alle Felder synchron) */
.sz-tips-name-filter {
    margin: 0.75rem 0 0.25rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--sz-st-select-border);
    background: var(--sz-st-select-bg);
}
.sz-tips-name-filter--in-spoiler {
    margin: 0 0 0.65rem;
    padding: 0.45rem 0.55rem;
}
.sz-tips-name-filter__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0;
    font-weight: 600;
    color: var(--sz-st-label);
}
.sz-tips-name-filter__text {
    font-size: 0.9rem;
}
.sz-tips-name-filter__input,
.sz-tips-name-filter__select {
    min-width: min(100%, 14rem);
    max-width: 100%;
    flex: 1 1 12rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--sz-form-border);
    border-radius: 6px;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--sz-text);
}
.sz-tips-name-filter__select {
    flex: 1 1 14rem;
    cursor: pointer;
}
html[data-theme="dark"] .sz-tips-name-filter__input,
html[data-theme="dark"] .sz-tips-name-filter__select {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--sz-body-color);
}
.sz-tips-name-filter__help {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--sz-small);
    line-height: 1.35;
}
.sz-tips-spoiler.sz-tips-spoiler--filter-empty {
    opacity: 0.65;
}
.sz-tips-spoiler.sz-tips-spoiler--filter-empty .sz-tips-spoiler__summary {
    color: var(--sz-small);
}

.sz-matches { display: flex; flex-direction: column; gap: 1.25rem; }

.sz-matches .sz-match.sz-reveal {
    --sz-reveal-delay: calc(min(var(--sz-reveal-i, 0), 10) * 45ms);
}

.page-tippspiel .sz-tips-table tbody tr.sz-reveal {
    --sz-reveal-delay: calc(min(var(--sz-reveal-i, 0), 16) * 16ms);
}

/* Bilanz (Spieltag + Gesamtranking) – Position je nach Runde / Ansicht */
.sz-tipp-stats--above-standard {
    margin: 0 0 1.25rem;
}

.sz-tipp-stats--below-standard,
.sz-tipp-stats--below-compact {
    margin: 1.5rem 0 0;
}

/* Kompakt: Bilanz nur unter der Kompaktliste, nicht darüber */
body.sz-tipp-view--compact .sz-tipp-stats--above-standard {
    display: none !important;
}

body.sz-tipp-view--compact .sz-tipp-stats--below-standard {
    display: none !important;
}

body:not(.sz-tipp-view--compact) .sz-tipp-stats--below-compact {
    display: none !important;
}

.sz-tipp-stats {
    position: relative;
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.35rem 1.1rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 80, 30, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 245, 234, 0.95) 48%, rgba(255, 248, 240, 0.92) 100%);
    box-shadow:
        0 12px 40px rgba(0, 50, 20, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] .sz-tipp-stats {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(145deg, rgba(0, 48, 22, 0.95) 0%, rgba(0, 28, 12, 0.92) 55%, rgba(40, 22, 8, 0.35) 100%);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sz-tipp-stats__glow {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 70%;
    background: radial-gradient(ellipse at 50% 0%, rgba(241, 116, 50, 0.22) 0%, transparent 68%);
    pointer-events: none;
}

.sz-tipp-stats__head {
    position: relative;
    text-align: center;
    margin-bottom: 1.1rem;
}

.sz-tipp-stats__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sz-orange);
}

.sz-tipp-stats__title {
    margin: 0;
    font-size: clamp(1.05rem, 3.5vw, 1.35rem);
    font-weight: 800;
    color: var(--sz-green);
}

html[data-theme="dark"] .sz-tipp-stats__title {
    color: #d4ecd4;
}

.sz-tipp-stats__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

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

.sz-tipp-stats__card {
    position: relative;
    padding: 1rem 1rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 60, 20, 0.12);
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

html[data-theme="dark"] .sz-tipp-stats__card {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.1);
}

.sz-tipp-stats__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 40, 15, 0.14);
}

.sz-tipp-stats__card--round {
    border-color: rgba(45, 138, 78, 0.28);
}

.sz-tipp-stats__card--overall {
    border-color: rgba(241, 116, 50, 0.35);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 236, 220, 0.55) 100%);
}

html[data-theme="dark"] .sz-tipp-stats__card--overall {
    background: linear-gradient(160deg, rgba(0, 0, 0, 0.35) 0%, rgba(80, 40, 12, 0.35) 100%);
}

.sz-tipp-stats__card--muted {
    opacity: 0.85;
}

.sz-tipp-stats__icon {
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 auto 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.sz-tipp-stats__icon--round {
    color: var(--sz-orange);
    background: rgba(241, 116, 50, 0.15);
    box-shadow: 0 0 0 3px rgba(241, 116, 50, 0.12);
}

.sz-tipp-stats__icon--rank {
    color: var(--sz-green);
    background: rgba(0, 80, 30, 0.1);
    font-size: 1rem;
}

html[data-theme="dark"] .sz-tipp-stats__icon--rank {
    color: #b8e8c8;
    background: rgba(255, 255, 255, 0.08);
}

.sz-tipp-stats__kicker {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sz-match-meta);
}

.sz-tipp-stats__value {
    margin: 0;
    font-size: clamp(2.1rem, 8vw, 2.75rem);
    font-weight: 900;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--sz-green);
    text-shadow: 0 2px 12px rgba(0, 80, 30, 0.15);
}

html[data-theme="dark"] .sz-tipp-stats__value {
    color: #e8f5e8;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.sz-tipp-stats__rank {
    margin: 0 0 0.25rem;
    line-height: 1;
}

.sz-tipp-stats__rank-num {
    font-size: clamp(2.4rem, 9vw, 3rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--sz-orange);
    text-shadow: 0 2px 14px rgba(241, 116, 50, 0.35);
}

.sz-tipp-stats__rank-of {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sz-match-meta);
    margin-left: 0.15em;
}

.sz-tipp-stats__overall-pts {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: var(--sz-text);
}

.sz-tipp-stats__overall-pts strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--sz-green);
    margin-right: 0.2em;
}

html[data-theme="dark"] .sz-tipp-stats__overall-pts strong {
    color: #a8e0b8;
}

.sz-tipp-stats__overall-pts span {
    font-weight: 600;
    color: var(--sz-match-meta);
    font-size: 0.88rem;
}

.sz-tipp-stats__meta {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--sz-match-meta);
}

.sz-tipp-stats__pending {
    color: var(--sz-orange);
    font-weight: 600;
}

.sz-tipp-stats__foot {
    position: relative;
    margin: 1rem 0 0;
    text-align: center;
}

.sz-tipp-stats__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--sz-green);
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 80, 30, 0.2);
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sz-tipp-stats__link:hover {
    color: var(--sz-orange);
    border-color: rgba(241, 116, 50, 0.45);
    background: rgba(241, 116, 50, 0.12);
}

html[data-theme="dark"] .sz-tipp-stats__link {
    color: #c8e8c8;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.25);
}

/* Kompakt-Ansicht (Tippen) */
.sz-tipp-view-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
}

.sz-tipp-view-bar__hint {
    margin: 0;
    font-size: 0.88rem;
}

body.sz-tipp-view--compact .sz-matches--standard {
    display: none;
}

.sz-matches--compact {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.sz-matches--compact[hidden] {
    display: none !important;
}

.sz-compact-match {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 60, 10, 0.12);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 40, 10, 0.08);
}

html[data-theme="dark"] .sz-compact-match {
    background: var(--sz-match-card-bg);
    border-color: var(--sz-match-card-border);
    box-shadow: var(--sz-match-card-shadow);
}

.sz-compact-match__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    font-size: 0.78rem;
    color: var(--sz-match-meta);
    margin-bottom: 0.35rem;
}

.sz-compact-match__time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.sz-compact-match__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.sz-compact-match__side {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
}

/* Heim (links): Block an die Tippfelder (rechts in der Zelle) */
.sz-compact-match__side--home {
    justify-content: flex-end;
}

/* Auswärts (rechts): Block an die Tippfelder (links in der Zelle) */
.sz-compact-match__side--away {
    justify-content: flex-start;
}

.sz-compact-match__club {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 0;
    line-height: 1;
    flex-shrink: 1;
    min-width: 0;
}

.sz-compact-match__side--home .sz-compact-match__club {
    align-items: flex-end;
}

.sz-compact-match__side--away .sz-compact-match__club {
    align-items: flex-start;
}

.sz-compact-match__crest {
    display: block;
    width: 64px;
    height: auto;
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    margin: 0;
}

.sz-compact-match__name {
    display: block;
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1;
    margin: 0.1rem 0 0;
    padding: 0;
    color: var(--sz-green);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 6.5rem;
}

.sz-compact-match__side--home .sz-compact-match__name {
    text-align: right;
}

.sz-compact-match__side--away .sz-compact-match__name {
    text-align: left;
}

html[data-theme="dark"] .sz-compact-match__name {
    color: var(--sz-match-team);
}

.sz-compact-match__tipp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.sz-compact-tipp-input {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 2px solid rgba(0, 60, 10, 0.25);
    border-radius: 8px;
    font-size: 1.35rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: #fff;
    color: var(--sz-text);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme="dark"] .sz-compact-tipp-input {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--sz-body-color);
}

.sz-compact-tipp-input:focus {
    outline: none;
    border-color: var(--sz-orange);
    box-shadow: 0 0 0 2px rgba(232, 93, 4, 0.25);
}

.sz-compact-tipp-input.is-saved {
    animation: sz-compact-tipp-saved 0.65s ease;
}

.sz-compact-tipp-input.is-error {
    animation: sz-compact-tipp-error 0.65s ease;
}

@keyframes sz-compact-tipp-saved {
    0%,
    100% {
        background: inherit;
        border-color: inherit;
    }
    35% {
        background: #b8f0c8;
        border-color: #2d8a4e;
        box-shadow: 0 0 0 2px rgba(45, 138, 78, 0.35);
    }
}

html[data-theme="dark"] .sz-compact-tipp-input.is-saved {
    animation-name: sz-compact-tipp-saved-dark;
}

@keyframes sz-compact-tipp-saved-dark {
    0%,
    100% {
        background: rgba(0, 0, 0, 0.35);
        border-color: rgba(255, 255, 255, 0.22);
    }
    35% {
        background: rgba(40, 120, 70, 0.55);
        border-color: #5fcf7a;
        box-shadow: 0 0 0 2px rgba(93, 207, 122, 0.4);
    }
}

@keyframes sz-compact-tipp-error {
    0%,
    100% {
        background: inherit;
    }
    35% {
        background: #ffd4d4;
        border-color: #c62828;
    }
}

.sz-compact-match__colon {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.85;
}

.sz-compact-match__readonly {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 0 0.25rem;
}

.sz-compact-match__readonly--empty {
    opacity: 0.45;
}

@media (max-width: 520px) {
    .sz-compact-match {
        padding: 0.45rem 0.4rem;
    }

    .sz-compact-match__row {
        gap: 0.2rem;
    }

    .sz-compact-match__crest {
        width: 48px;
        max-width: 48px;
        max-height: 48px;
    }

    .sz-compact-match__name {
        font-size: 0.65rem;
        max-width: 4.25rem;
        margin-top: 0.06rem;
    }

    .sz-compact-tipp-input {
        width: 2.05rem;
        height: 2.05rem;
        font-size: 1.15rem;
    }

    .sz-compact-match__colon {
        font-size: 1.05rem;
    }

    .sz-compact-match__readonly {
        font-size: 0.95rem;
    }
}

.sz-match {
    background: rgba(255, 255, 255, 0.95);
    color: var(--sz-text);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .sz-match {
    background: var(--sz-match-card-bg);
    color: var(--sz-body-color);
    border: 1px solid var(--sz-match-card-border);
    box-shadow: var(--sz-match-card-shadow);
    backdrop-filter: blur(8px);
}
html[data-theme="dark"] .sz-match .sz-team strong {
    color: var(--sz-match-team);
}
html[data-theme="dark"] .sz-match .sz-phase-tag {
    color: var(--sz-match-team);
}
html[data-theme="dark"] .sz-match .sz-vs,
html[data-theme="dark"] .sz-match .sz-score {
    color: var(--sz-match-score-txt);
}
html[data-theme="dark"] .sz-match .sz-privacy-hint,
html[data-theme="dark"] .sz-match .sz-guest-hint,
html[data-theme="dark"] .sz-match .sz-no-tipp {
    color: var(--sz-guest-hint);
}
html[data-theme="dark"] .sz-match .sz-my-tipp {
    color: var(--sz-body-color);
}
html[data-theme="dark"] .sz-match .sz-tip-score strong {
    color: #a0e8b8;
}
html[data-theme="dark"] .sz-tipp-form label {
    color: var(--sz-st-label);
}
html[data-theme="dark"] .sz-tipp-inputs input {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--sz-body-color);
}
html[data-theme="dark"] .sz-tips-spoiler__summary {
    color: var(--sz-st-label);
}
html[data-theme="dark"] .sz-tips-table tbody td {
    color: var(--sz-tips-table-cell);
}
html[data-theme="dark"] .sz-tips-table tbody tr:nth-child(even) {
    background: var(--sz-tips-table-row-alt);
}

html[data-theme="light"] .sz-match {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 40, 10, 0.1);
    border: 1px solid rgba(0, 60, 10, 0.1);
}

.sz-match__teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
    gap: 0.5rem 0.65rem;
    align-items: center;
}
.sz-team { text-align: center; }
.sz-team--away { text-align: center; }
.sz-team__crest {
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}
.sz-team strong { color: var(--sz-green); font-size: 0.95rem; }
.sz-match__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    text-align: center;
    min-width: 0;
    max-width: 14rem;
    justify-self: center;
}
.sz-match__scoreline {
    line-height: 1.1;
}
.sz-vs, .sz-score { font-size: 1.35rem; font-weight: 800; color: var(--sz-text); }
.sz-match__meta {
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--sz-match-meta);
}
.sz-phase-tag { color: var(--sz-green); font-weight: 600; }

/* Fremdtipps: ausklappbare Tabelle */
.sz-tips-spoiler {
    margin: 0.65rem 0 0;
    border: 1px solid var(--sz-spoiler-border);
    border-radius: 8px;
    background: var(--sz-spoiler-bg);
    overflow: hidden;
}
.sz-tips-spoiler__summary {
    cursor: pointer;
    list-style: none;
    padding: 0.55rem 0.85rem;
    font-weight: 700;
    color: var(--sz-green);
    user-select: none;
}
.sz-tips-spoiler__summary::-webkit-details-marker { display: none; }
.sz-tips-spoiler__summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s ease;
    color: var(--sz-orange);
}
.sz-tips-spoiler[open] .sz-tips-spoiler__summary::before {
    transform: rotate(90deg);
}
.sz-tips-spoiler__count {
    font-weight: 600;
    color: var(--sz-spoiler-count);
    font-size: 0.9em;
}
.sz-tips-spoiler__count[hidden] {
    display: none;
}
.sz-tips-table__place {
    width: 2.5rem;
    white-space: nowrap;
}
.sz-tips-spoiler__body {
    padding: 0 0.75rem 0.75rem;
}
.sz-tips-spoiler__placeholder {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    color: var(--sz-match-meta, #8a9a8a);
    text-align: center;
}
.sz-tips-spoiler__placeholder--loading {
    opacity: 0.85;
}
.sz-tips-spoiler__placeholder--err {
    color: #b71c1c;
}
.sz-tips-spoiler__retry {
    margin-left: 0.35rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--sz-orange);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}
.sz-tips-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.sz-tips-table th,
.sz-tips-table td {
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid var(--sz-tips-table-border);
    text-align: left;
}
.sz-tips-table thead th {
    background: var(--sz-tips-table-th-bg);
    color: var(--sz-tips-table-th-fg);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sz-tips-table tbody tr:last-child td { border-bottom: none; }
.sz-tips-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.5); }
.sz-tips-table__num {
    text-align: center;
    font-variant-numeric: tabular-nums;
    width: 4rem;
}
.sz-tips-table__score {
    white-space: nowrap;
}
.sz-tip-score {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    font-size: 0.88rem;
    vertical-align: baseline;
}
.sz-tip-score strong {
    font-variant-numeric: tabular-nums;
    color: var(--sz-green-mid);
}
.sz-tip-stars {
    display: inline-flex;
    gap: 0.05rem;
    letter-spacing: 0;
}
.sz-tip-star {
    display: inline-block;
    color: var(--sz-orange);
    font-size: 1.78125em;
    line-height: 1;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.3s ease, color 0.25s ease;
}

html[data-theme="dark"] .sz-match .sz-match-ende {
    color: #b8d4b8;
}
html[data-theme="dark"] .sz-tip-br {
    color: #b0c4b0;
}
html[data-theme="dark"] .sz-tip-br--stored {
    color: #889d88;
}
.sz-match__center .sz-match-ende-wrap {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 0.74rem;
    line-height: 1.25;
}
.sz-match-ende { color: var(--sz-small); }
.sz-tip-score--with-br {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    vertical-align: middle;
}
.sz-tips-table .sz-tip-score--with-br {
    align-items: center;
    text-align: center;
}
.sz-tip-score__main {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}
.sz-tip-br {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sz-small);
    line-height: 1.3;
    max-width: 16rem;
}
.sz-tip-br abbr {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.sz-tip-br--stored {
    font-variant: all-small-caps;
    letter-spacing: 0.06em;
}

/* Nur für Screenreader */
.sz-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Punkteaufstellung: Klick auf Sterne / Null-Markierung */
.sz-tip-score-details {
    position: relative;
    display: inline-block;
    width: auto;
    max-width: none;
    vertical-align: middle;
    margin: 0;
    flex-shrink: 0;
}
.sz-tip-score-details__summary {
    cursor: pointer;
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.sz-tip-score-details__summary::-webkit-details-marker {
    display: none;
}
.sz-tip-score-details__summary::before {
    content: none;
}
.sz-tip-score-details__summary:hover .sz-tip-star {
    color: #e85a0a;
    transform: scale(1.18);
}
.sz-tip-score-details__summary:hover .sz-tip-zero {
    transform: scale(1.12);
}
.sz-tip-score-details__summary:hover .sz-tip-zero__star {
    color: #c45c5c;
}
.sz-tip-score-details__summary:focus {
    outline: none;
}
.sz-tip-score-details__summary:focus-visible {
    outline: 2px solid var(--sz-orange);
    outline-offset: 3px;
    border-radius: 4px;
}
.sz-tip-score-details__body {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 4px);
    z-index: 25;
    min-width: 11rem;
    max-width: min(18rem, 85vw);
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--sz-spoiler-border);
    border-radius: 6px;
    background: var(--sz-drop-panel-bg);
    box-shadow: var(--sz-table-wrap-shadow, 0 6px 20px rgba(0, 0, 0, 0.22));
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
}
.sz-tip-score-details__body .sz-tip-br--stored {
    margin-left: 0.2rem;
    font-size: 0.72em;
    text-decoration: none;
    cursor: help;
}
html[data-theme="light"] .sz-tip-score-details__body {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 40, 10, 0.18);
}

.sz-tip-zero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.15625em;
    height: 2.15625em;
    vertical-align: middle;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.3s ease;
}
.sz-tip-zero__star {
    font-size: 2.15625em;
    line-height: 1;
    color: var(--sz-match-meta, #8a9a8a);
    opacity: 0.9;
    transition: color 0.25s ease;
}
.sz-tip-zero::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: #c45c5c;
    border-radius: 1px;
    transform: rotate(-36deg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
html[data-theme="dark"] .sz-tip-zero__star {
    color: #8a9f8a;
}
html[data-theme="dark"] .sz-tip-zero::after {
    background: #e07070;
}

/* Punkteaufstellung (T, D, E …) hinter Info-Spoiler */
.sz-tip-br-spoiler {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    flex-shrink: 0;
}
.sz-tip-br-spoiler__summary {
    cursor: pointer;
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    user-select: none;
}
.sz-tip-br-spoiler__summary::-webkit-details-marker {
    display: none;
}
.sz-tip-br-spoiler__summary::before {
    content: none;
}
.sz-tip-br-spoiler__icon {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 33 % kleiner als zuvor (ca. 1.15rem) */
    width: 0.77rem;
    height: 0.77rem;
    border: 1px solid var(--sz-green);
    border-radius: 50%;
    font-size: 0.39rem;
    font-weight: 800;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
    color: var(--sz-green);
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
html[data-theme="dark"] .sz-tip-br-spoiler__icon {
    color: var(--sz-cream);
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.12);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .sz-tip-br-spoiler__icon {
    background: rgba(255, 255, 255, 0.65);
}
.sz-tip-br-spoiler__summary:hover .sz-tip-br-spoiler__icon {
    background: rgba(241, 116, 50, 0.15);
    border-color: var(--sz-orange);
}
.sz-tip-br-spoiler__summary:focus {
    outline: none;
}
.sz-tip-br-spoiler__summary:focus-visible .sz-tip-br-spoiler__icon {
    outline: 2px solid var(--sz-orange);
    outline-offset: 2px;
}
.sz-tip-br-spoiler__body {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 25;
    min-width: 11rem;
    max-width: min(18rem, 85vw);
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--sz-spoiler-border);
    border-radius: 6px;
    background: var(--sz-drop-panel-bg);
    box-shadow: var(--sz-table-wrap-shadow, 0 6px 20px rgba(0, 0, 0, 0.22));
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
}
html[data-theme="light"] .sz-tip-br-spoiler__body {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 40, 10, 0.18);
}
.sz-tip-br-spoiler .sz-tip-br {
    display: inline;
    max-width: none;
    font-size: inherit;
}
.sz-tips-table .sz-tip-br-spoiler__body {
    left: 50%;
    transform: translateX(-50%);
    max-width: min(16rem, 70vw);
}

.sz-privacy-hint, .sz-guest-hint {
    font-size: 0.85rem;
    color: var(--sz-guest-hint);
    margin: 0.5rem 0 0;
}

.sz-match__my-tipp,
.sz-match__tipp-zone {
    margin-top: 0.75rem;
    text-align: center;
}

.sz-match__my-tipp .sz-tipp-form,
.sz-match__tipp-zone .sz-tipp-form {
    margin-top: 0;
}

.sz-my-tipp {
    margin: 0;
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.5;
}

.sz-my-tipp__row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.45em 0.55em;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.sz-my-tipp__label,
.sz-my-tipp__result {
    flex: 0 0 auto;
    white-space: nowrap;
}

.sz-my-tipp__row > .sz-tip-score-details,
.sz-my-tipp__row > .sz-tip-stars,
.sz-my-tipp__row > .sz-tip-zero {
    flex: 0 0 auto;
}

.sz-my-tipp__row > .sz-tip-score-details {
    display: block;
    width: auto;
    margin: 0;
}

.sz-match__my-tipp .sz-no-tipp,
.sz-match__my-tipp .sz-guest-hint,
.sz-match__tipp-zone .sz-no-tipp,
.sz-match__tipp-zone .sz-guest-hint,
.sz-match__tipp-zone .sz-tipp-zone__hint {
    margin: 0;
    text-align: center;
}

.sz-tipp-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem 0.75rem;
    text-align: center;
}
.sz-tipp-form label {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--sz-green);
}
.sz-tipp-inputs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
}
.sz-tipp-inputs input {
    width: 3.25rem;
    padding: 0.35rem 0.25rem;
    text-align: center;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid #bbb;
    border-radius: 4px;
    -moz-appearance: textfield;
    appearance: textfield;
}
.sz-tipp-inputs input::-webkit-outer-spin-button,
.sz-tipp-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Tippspiel „Tippen“: fancy Tipp-Zone (Standard-Ansicht) */
.page-tippspiel .sz-match--has-tipp {
    position: relative;
    overflow: hidden;
}

.page-tippspiel .sz-match--has-tipp::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(180deg, var(--sz-orange) 0%, #2d8a4e 100%);
    pointer-events: none;
}

.page-tippspiel .sz-match--editable.sz-match--has-tipp::before {
    background: linear-gradient(180deg, var(--sz-orange) 0%, #e85d04 100%);
}

.page-tippspiel .sz-match__tipp-zone {
    position: relative;
    margin-top: 0.9rem;
    padding: 0.9rem 1rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 80, 30, 0.16);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(232, 245, 234, 0.88) 55%, rgba(255, 248, 240, 0.85) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 20px rgba(0, 50, 20, 0.08);
}

.page-tippspiel .sz-match__tipp-zone::after {
    content: "";
    position: absolute;
    inset: -30% 10% auto;
    height: 55%;
    background: radial-gradient(ellipse at 50% 0%, rgba(241, 116, 50, 0.14) 0%, transparent 70%);
    pointer-events: none;
}

html[data-theme="dark"] .page-tippspiel .sz-match__tipp-zone {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(155deg, rgba(0, 52, 24, 0.88) 0%, rgba(0, 28, 12, 0.92) 60%, rgba(48, 26, 8, 0.35) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .page-tippspiel .sz-match__tipp-zone::after {
    background: radial-gradient(ellipse at 50% 0%, rgba(241, 116, 50, 0.18) 0%, transparent 68%);
}

.sz-tipp-form__kicker,
.sz-my-tipp__kicker {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sz-orange);
}

.sz-tipp-form--fancy {
    position: relative;
    z-index: 1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem 0.7rem;
}

.page-tippspiel .sz-tipp-form--fancy .sz-tipp-form__kicker {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

.sz-tipp-inputs--fancy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 60, 20, 0.14);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] .sz-tipp-inputs--fancy {
    background: rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sz-tipp-inputs__field {
    width: 3.1rem;
    height: 3.1rem;
    padding: 0;
    text-align: center;
    font-size: 1.55rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    border: 2px solid rgba(0, 60, 10, 0.22);
    border-radius: 10px;
    background: #fff;
    color: var(--sz-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}

html[data-theme="dark"] .sz-tipp-inputs__field {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--sz-body-color);
}

.sz-tipp-inputs__field:focus {
    outline: none;
    border-color: var(--sz-orange);
    box-shadow: 0 0 0 3px rgba(241, 116, 50, 0.28);
    transform: scale(1.04);
}

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

.sz-tipp-inputs__sep {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0.75;
    user-select: none;
}

.sz-btn--tipp-save {
    position: relative;
    z-index: 1;
    min-width: 7.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, var(--sz-orange) 0%, #e85d04 100%);
    box-shadow: 0 4px 14px rgba(232, 93, 4, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sz-btn--tipp-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(232, 93, 4, 0.45);
}

.sz-btn--tipp-save:active {
    transform: translateY(0);
}

.sz-my-tipp--fancy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.sz-my-tipp--fancy .sz-my-tipp__row {
    gap: 0.5rem 0.65rem;
}

.sz-my-tipp__score {
    font-size: clamp(1.5rem, 5vw, 1.85rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--sz-green);
    letter-spacing: 0.02em;
}

html[data-theme="dark"] .sz-my-tipp__score {
    color: var(--sz-match-score-txt);
}

.sz-my-tipp__colon {
    margin: 0 0.12em;
    opacity: 0.65;
    font-weight: 700;
}

.sz-tipp-zone__hint {
    position: relative;
    z-index: 1;
    font-size: 0.88rem;
    opacity: 0.92;
}

.sz-ko-extra {
    width: 100%;
    max-width: 22rem;
    margin-top: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 80, 30, 0.14);
    background: rgba(255, 255, 255, 0.55);
    text-align: left;
}

html[data-theme="dark"] .sz-ko-extra {
    background: rgba(20, 40, 28, 0.45);
    border-color: rgba(120, 200, 150, 0.18);
}

.sz-ko-extra__group {
    margin: 0 0 0.55rem;
    padding: 0;
    border: none;
    min-inline-size: 0;
}

.sz-ko-extra__group:last-child {
    margin-bottom: 0;
}

.sz-ko-extra__legend {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-bottom: 0.35rem;
    padding: 0;
}

.sz-ko-extra__hint {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    opacity: 0.85;
}

.sz-ko-extra__options {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sz-ko-extra__option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    cursor: pointer;
}

.sz-ko-extra__option input {
    flex-shrink: 0;
}

.sz-my-tipp__ko-meta {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    opacity: 0.88;
    text-align: center;
}

.sz-tipp-form--fancy .sz-ko-extra {
    margin-left: auto;
    margin-right: auto;
}

.sz-compact-match--ko-extra .sz-ko-extra {
    grid-column: 1 / -1;
    max-width: none;
    margin-top: 0.35rem;
}

/* Kompakt-Ansicht: Optik wie Standard (Größen unverändert) */
.page-tippspiel .sz-compact-match--fancy {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(0, 80, 30, 0.16);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(232, 245, 234, 0.88) 55%, rgba(255, 248, 240, 0.85) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 20px rgba(0, 50, 20, 0.08);
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match--fancy {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(155deg, rgba(0, 52, 24, 0.88) 0%, rgba(0, 28, 12, 0.92) 60%, rgba(48, 26, 8, 0.35) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.35);
}

.page-tippspiel .sz-compact-match--fancy.sz-compact-match--has-tipp::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(180deg, var(--sz-orange) 0%, #2d8a4e 100%);
    pointer-events: none;
}

.page-tippspiel .sz-compact-match--fancy.sz-compact-match--editable::before {
    background: linear-gradient(180deg, var(--sz-orange) 0%, #e85d04 100%);
}

.page-tippspiel .sz-compact-match--fancy .sz-compact-match__meta {
    position: relative;
    z-index: 1;
}

.page-tippspiel .sz-compact-match--fancy .sz-compact-match__row {
    position: relative;
    z-index: 1;
}

.page-tippspiel .sz-compact-match--fancy .sz-compact-match__tipp {
    padding: 0.2rem 0.45rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 60, 20, 0.14);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match--fancy .sz-compact-match__tipp {
    background: rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.page-tippspiel .sz-compact-tipp-input {
    border: 2px solid rgba(0, 60, 10, 0.22);
    border-radius: 10px;
    font-weight: 800;
    color: var(--sz-text);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme="dark"] .page-tippspiel .sz-compact-tipp-input {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--sz-body-color);
}

.page-tippspiel .sz-compact-tipp-input:focus {
    outline: none;
    border-color: var(--sz-orange);
    box-shadow: 0 0 0 2px rgba(241, 116, 50, 0.28);
}

.page-tippspiel .sz-compact-match__colon {
    color: var(--sz-green);
    opacity: 0.75;
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match__colon {
    color: var(--sz-match-score-txt);
}

.page-tippspiel .sz-compact-match__readonly:not(.sz-compact-match__readonly--empty) {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--sz-green);
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.45);
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match__readonly:not(.sz-compact-match__readonly--empty) {
    color: var(--sz-match-score-txt);
    background: rgba(0, 0, 0, 0.28);
}

.page-tippspiel .sz-compact-match__name {
    color: var(--sz-green);
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match--fancy .sz-compact-match__name {
    color: var(--sz-match-team);
}

.sz-btn--small {
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
}
.sz-back { margin-top: 2rem; text-align: center; }
.sz-back a { color: var(--sz-back-link); }

/* Menü: Tippspiel-Auswahl (Header z-index damit Dropdown über Hero/Content mit backdrop-filter) */

.sz-nav-drop {
    position: relative;
    overflow: visible;
}

.sz-nav-drop__summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    color: var(--sz-nav-color);
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.sz-nav-drop__summary::-webkit-details-marker {
    display: none;
}

.sz-nav-drop__summary::after {
    content: " ▼";
    font-size: 0.65em;
    opacity: 0.85;
}

.sz-nav-drop[open] > .sz-nav-drop__summary {
    background: var(--sz-nav-drop-open-bg);
}

.sz-drop-panel {
    position: absolute;
    z-index: 1000;
    right: 0;
    left: auto;
    top: calc(100% + 6px);
    /* Nur so breit wie der längste Eintrag; bei Platz ohne Umbruch – sonst Umbrechen */
    width: max-content;
    max-width: min(960px, calc(100vw - 2rem));
    min-width: 0;
    max-height: min(75vh, 480px);
    overflow-y: auto;
    padding: 0.35rem 0;
    box-sizing: border-box;
    background: var(--sz-drop-panel-bg);
    border: 1px solid var(--sz-drop-panel-border);
    border-radius: 8px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] .sz-drop-panel {
    box-shadow: 0 10px 32px rgba(0, 40, 10, 0.18);
}

@media (max-width: 640px) {
    .sz-drop-panel {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: max-content;
        max-width: calc(100vw - 2rem);
    }
}

.sz-drop-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-drop-list li a {
    display: block;
    padding: 0.55rem 1rem;
    min-height: 44px;
    color: var(--sz-nav-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: normal;
    overflow-wrap: break-word;
}

html[data-theme="dark"] .sz-drop-list li a {
    color: var(--sz-drop-link);
}

.sz-drop-list li a:hover {
    background: rgba(0, 60, 10, 0.08);
    color: var(--sz-orange);
}

html[data-theme="dark"] .sz-drop-list li a:hover {
    background: rgba(0, 85, 38, 0.55);
    color: var(--sz-orange);
}

/* Start: zweiter Button neben Haupt-CTA */
.sz-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.25rem;
}

.sz-hero-actions__cluster {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

/* Startseite: Tippspiel-Picker (Modal) */
.sz-tippspiel-picker-dialog {
    max-width: min(32rem, calc(100vw - 2rem));
}

.sz-tippspiel-picker-dialog .sz-chat-new-dialog__surface {
    max-height: min(88vh, 40rem);
    overflow: auto;
}

.sz-tippspiel-picker-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sz-tippspiel-picker-grid__item {
    margin: 0;
}

.sz-tippspiel-picker-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0, 60, 10, 0.14);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 244, 232, 0.92) 100%);
    box-shadow: 0 4px 16px rgba(0, 40, 10, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sz-tippspiel-picker-card:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 93, 4, 0.45);
    box-shadow: 0 8px 24px rgba(0, 40, 10, 0.14);
    text-decoration: none;
}

.sz-tippspiel-picker-card.is-current {
    border-color: var(--sz-orange, #e85d04);
    background: linear-gradient(135deg, rgba(255, 248, 240, 0.98) 0%, rgba(255, 235, 220, 0.95) 55%, rgba(232, 244, 232, 0.9) 100%);
    box-shadow: 0 0 0 2px rgba(232, 93, 4, 0.2), 0 8px 28px rgba(232, 93, 4, 0.15);
    cursor: default;
}

.sz-tippspiel-picker-card.is-current:hover {
    transform: none;
}

.sz-tippspiel-picker-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: var(--sz-green, #005a24);
    background: linear-gradient(145deg, rgba(0, 92, 36, 0.12), rgba(0, 60, 10, 0.06));
}

.sz-tippspiel-picker-card__icon svg {
    width: 2rem;
    height: 2rem;
}

.sz-tippspiel-picker-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sz-tippspiel-picker-card__name {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--sz-green, #0d280d);
}

.sz-tippspiel-picker-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    font-size: 0.82rem;
}

.sz-tippspiel-picker-card__badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sz-tippspiel-picker-card__badge--liga {
    background: rgba(0, 92, 36, 0.14);
    color: #0a4d22;
}

.sz-tippspiel-picker-card__badge--turnier {
    background: rgba(232, 93, 4, 0.16);
    color: #9a3d00;
}

.sz-tippspiel-picker-card__hint {
    color: var(--sz-small, #5a6b5f);
}

.sz-tippspiel-picker-card__status {
    flex-shrink: 0;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--sz-orange, #e85d04);
    color: #fff;
}

.sz-tippspiel-picker-card__chevron {
    flex-shrink: 0;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 300;
    color: var(--sz-orange, #e85d04);
    opacity: 0.85;
}

html[data-theme="dark"] .sz-tippspiel-picker-card {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(12, 28, 18, 0.95) 0%, rgba(8, 22, 14, 0.98) 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .sz-tippspiel-picker-card:hover {
    border-color: rgba(232, 93, 4, 0.5);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .sz-tippspiel-picker-card.is-current {
    background: linear-gradient(135deg, rgba(40, 28, 12, 0.6) 0%, rgba(12, 28, 18, 0.98) 100%);
}

html[data-theme="dark"] .sz-tippspiel-picker-card__name {
    color: var(--sz-st-label, #e8f4e8);
}

html[data-theme="dark"] .sz-tippspiel-picker-card__icon {
    color: #7adf9e;
    background: linear-gradient(145deg, rgba(0, 85, 38, 0.35), rgba(0, 40, 20, 0.5));
}

html[data-theme="dark"] .sz-tippspiel-picker-card__badge--liga {
    background: rgba(0, 120, 50, 0.35);
    color: #b8e8c8;
}

html[data-theme="dark"] .sz-tippspiel-picker-card__badge--turnier {
    background: rgba(232, 93, 4, 0.25);
    color: #ffc9a0;
}

html[data-theme="dark"] .sz-tippspiel-picker-card__hint {
    color: rgba(200, 220, 200, 0.75);
}
.sz-btn--ghost {
    background: #fff;
    color: var(--sz-green) !important;
    border: 2px solid var(--sz-green);
}
.sz-btn--ghost:hover {
    filter: none;
    background: rgba(0, 60, 10, 0.06);
}

html[data-theme="light"] .sz-hero .sz-btn--ghost {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 40, 10, 0.08);
}

/* Ghost-Button überall außerhalb hellem Hero (Dark) */
html[data-theme="dark"] .sz-btn--ghost {
    background: rgba(0, 0, 0, 0.28);
    color: var(--sz-st-label) !important;
    border-color: rgba(255, 255, 255, 0.35);
}
html[data-theme="dark"] .sz-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    filter: none;
}

/* News-Detail */
.sz-news-date {
    display: block;
    font-size: 0.85rem;
    color: var(--sz-small);
    margin-bottom: 0.35rem;
}
.sz-news-article__body {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--sz-text);
}

html[data-theme="dark"] .sz-news-article__body {
    color: var(--sz-body-color);
}

.sz-news-article__back { margin-top: 1.5rem; }
.sz-news-article__back a { color: var(--sz-orange); }

/* Tippspiel: Unternavigation */
.sz-subnav {
    margin: 0.75rem 0 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sz-subnav-border);
}
.sz-subnav a {
    font-weight: 700;
    color: var(--sz-green);
    text-decoration: none;
}
.sz-subnav a:hover { text-decoration: underline; color: var(--sz-orange); }

html[data-theme="dark"] .sz-subnav a {
    color: var(--sz-st-label);
}

/* Rangliste */
.sz-table-wrap {
    overflow-x: auto;
    margin-bottom: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px var(--sz-table-wrap-shadow);
    -webkit-overflow-scrolling: touch;
}

/* Kombinierte Ranglisten: kein vertikaler Scroll im Tabellenkasten (nur Seite scrollt) */
.page-ranglisten .sz-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 60, 10, 0.35) transparent;
}

.page-ranglisten .sz-table-wrap::-webkit-scrollbar {
    height: 6px;
    width: 0;
}

.page-ranglisten .sz-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 60, 10, 0.35);
    border-radius: 3px;
}

html[data-theme="dark"] .page-ranglisten .sz-table-wrap {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

html[data-theme="dark"] .page-ranglisten .sz-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
}

.sz-ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.97);
    color: var(--sz-text);
}

html[data-theme="light"] .sz-ranking-table {
    box-shadow: 0 2px 12px rgba(0, 40, 10, 0.08);
}

.sz-ranking-table thead th {
    background: #e8f0e8;
    color: #1a3d1a;
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #c5d9c5;
}
.sz-ranking-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e0ebe0;
}
.sz-ranking-table tbody tr:nth-child(even) { background: rgba(0, 60, 10, 0.04); }
.sz-ranking-table tbody tr:hover { background: rgba(241, 116, 50, 0.08); }
.sz-ranking-table__place {
    width: 3rem;
    font-weight: 700;
    color: var(--sz-green);
}
.sz-ranking-table__num {
    text-align: center;
    font-variant-numeric: tabular-nums;
    width: 5rem;
}

.sz-ranking-table__who {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.sz-ranking-table__who--link {
    color: inherit;
    text-decoration: none;
}

.sz-ranking-table__who--link:hover {
    color: var(--sz-orange);
}

.sz-ranking-table__who > span:last-child {
    min-width: 0;
}

.sz-hero__title-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sz-hero__title-row h1 {
    margin: 0;
}

.sz-tips-table__who {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

html[data-theme="dark"] .sz-ranking-table {
    background: rgba(0, 20, 10, 0.88);
    color: var(--sz-body-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .sz-ranking-table thead th {
    background: rgba(0, 44, 18, 0.78);
    color: var(--sz-tips-table-th-fg);
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .sz-ranking-table tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .sz-ranking-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .sz-ranking-table tbody tr:hover {
    background: rgba(241, 116, 50, 0.12);
}

html[data-theme="dark"] .sz-ranking-table__place {
    color: var(--sz-match-team);
}

/* —— Mobil & kleine Screens —— */
@media (max-width: 560px) {
    .sz-topbar__cluster {
        justify-content: flex-end;
    }

    .sz-topbar__cluster .sz-nav {
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .sz-hero--compact {
        padding: 1rem 1rem;
    }

    .sz-hero--compact h1 {
        font-size: clamp(1.15rem, 5vw, 1.35rem);
    }

    .sz-match {
        padding: 0.85rem 1rem;
    }

    .sz-match__teams {
        grid-template-columns: 1fr;
        gap: 0.65rem;
        justify-items: center;
    }

    .sz-match__scoreline .sz-vs,
    .sz-match__scoreline .sz-score {
        font-size: clamp(1.2rem, 6vw, 1.5rem);
    }

    .sz-match__center {
        max-width: 100%;
    }

    .sz-match__meta {
        font-size: 0.72rem;
    }

    .sz-match__center .sz-match-ende-wrap {
        font-size: 0.7rem;
    }

    .sz-team__crest {
        width: min(72px, 22vw);
        height: auto;
    }

    .sz-st-select {
        padding: 0.65rem;
        gap: 0.25rem;
    }

    .sz-btn {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 380px) {
    .sz-logo__img {
        max-width: min(140px, 72vw);
    }

    .sz-home-brand__logo {
        width: min(220px, 88vw);
    }
}

/* —— Chat —— */
.page-chat-hub .sz-chat-hero {
    position: relative;
    margin: 0 auto 1.25rem;
    padding: 1.5rem 1.25rem 1.35rem;
    text-align: center;
    border-radius: var(--sz-radius-lg, 1rem);
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.82));
    box-shadow: var(--sz-match-card-shadow, 0 8px 28px rgba(0, 0, 0, 0.35));
    overflow: hidden;
}
html[data-theme="light"] .page-chat-hub .sz-chat-hero {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 245, 0.96) 100%);
    border-color: rgba(0, 60, 10, 0.12);
    box-shadow: 0 8px 28px rgba(0, 40, 12, 0.1);
}
.sz-chat-hero__glow {
    position: absolute;
    inset: -50% -30% auto;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(46, 157, 92, 0.22), transparent 68%);
    pointer-events: none;
}
.sz-chat-hero__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.35rem;
    color: #5ecf8a;
}
html[data-theme="light"] .sz-chat-hero__icon {
    color: #1a6b42;
}
.sz-chat-hero__title {
    margin: 0.15rem 0 0.35rem;
    font-size: clamp(1.5rem, 4vw, 1.85rem);
}
.sz-chat-hero__lead {
    margin: 0;
    font-size: 0.92rem;
    color: var(--sz-hero-meta, var(--sz-small));
    line-height: 1.45;
    max-width: 30rem;
    margin-inline: auto;
}
.sz-chat-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    color: var(--sz-hero-meta, var(--sz-small));
}
.sz-chat-hero__stats strong {
    font-weight: 800;
    font-size: 1.05em;
}
.sz-chat-hero__stats--unread strong {
    color: var(--sz-orange, #f17432);
}
.sz-chat-hero__actions {
    margin-top: 1.1rem;
}
.sz-chat-hint {
    max-width: 44rem;
    margin: -0.5rem auto 1rem;
    padding: 0.65rem 1rem;
    font-size: 0.88rem;
    text-align: center;
    color: var(--sz-hero-meta, var(--sz-small));
    border-radius: 10px;
    background: rgba(241, 116, 50, 0.08);
    border: 1px solid rgba(241, 116, 50, 0.2);
}
.sz-chat-inbox {
    margin: 0 auto 1.25rem;
}
.sz-chat-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
    border-radius: 14px;
    border: 1px dashed var(--sz-match-card-border, rgba(255, 255, 255, 0.18));
    background: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .sz-chat-empty {
    background: rgba(0, 60, 10, 0.04);
}
.sz-chat-empty__icon {
    color: #5ecf8a;
    opacity: 0.55;
    margin-bottom: 0.75rem;
}
html[data-theme="light"] .sz-chat-empty__icon {
    color: #1a6b42;
}
.sz-chat-empty__title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
}
.sz-chat-empty__hint {
    margin: 0;
    font-size: 0.88rem;
    color: var(--sz-hero-meta, var(--sz-small));
    max-width: 24rem;
    margin-inline: auto;
}
.sz-chat-kind {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    flex-shrink: 0;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.sz-chat-kind--group {
    background: linear-gradient(145deg, #1a5c38 0%, #2e9d5c 50%, #1a6b42 100%);
}
.sz-chat-roomlist__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    flex-shrink: 0;
}
.sz-chat-roomlist__avatar .sz-avatar--chatlist {
    width: 3.1rem;
    height: 3.1rem;
}
.sz-avatar--chat-direct.sz-avatar--fallback {
    background: linear-gradient(145deg, #1a4d6e 0%, #2d8fbf 55%, #1e6a94 100%);
}
.sz-avatar--chat-group.sz-avatar--fallback {
    background: linear-gradient(145deg, #1a5c38 0%, #2e9d5c 50%, #1a6b42 100%);
}
.sz-chat-roomlist__item--unread .sz-chat-roomlist__link {
    border-color: rgba(241, 116, 50, 0.35);
    box-shadow:
        var(--sz-match-card-shadow, 0 6px 22px rgba(0, 0, 0, 0.35)),
        inset 3px 0 0 var(--sz-orange, #f17432);
}
.sz-chat-roomlist__item--unread .sz-chat-roomlist__title {
    font-weight: 800;
}
.sz-chat-roomlist__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--sz-orange, #f17432);
    box-shadow: 0 0 0 3px rgba(241, 116, 50, 0.25);
    flex-shrink: 0;
}
.sz-chat-start.sz-form {
    max-width: 28rem;
}

.sz-chat-roomlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sz-chat-roomlist__item {
    margin: 0;
}

.sz-chat-roomlist__link {
    display: grid;
    grid-template-columns: 3.1rem 1fr auto;
    align-items: center;
    gap: 0.85rem 0.65rem;
    padding: 0.85rem 1rem 0.85rem 0.9rem;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.82));
    box-shadow: var(--sz-match-card-shadow, 0 6px 22px rgba(0, 0, 0, 0.35));
    transition:
        transform 0.14s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.sz-chat-roomlist__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    border-color: rgba(241, 116, 50, 0.45);
}

html[data-theme="light"] .sz-chat-roomlist__link {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 245, 0.96) 100%);
    border-color: rgba(0, 60, 10, 0.12);
    box-shadow: 0 6px 22px rgba(0, 40, 12, 0.1);
}

html[data-theme="light"] .sz-chat-roomlist__link:hover {
    border-color: rgba(241, 116, 50, 0.55);
    box-shadow: 0 12px 32px rgba(0, 60, 10, 0.14);
}

.sz-chat-roomlist__item--direct .sz-chat-roomlist__link:hover .sz-chat-roomlist__title {
    color: var(--sz-orange, #f17432);
}

.sz-chat-roomlist__item--group .sz-chat-roomlist__link:hover .sz-chat-roomlist__title {
    color: var(--sz-orange, #f17432);
}

.sz-chat-roomlist__avatar--letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sz-chat-roomlist__item--group .sz-chat-roomlist__avatar--letter {
    background: linear-gradient(145deg, #5a3a0a 0%, #c45c12 50%, #8a4a10 100%);
}

html[data-theme="light"] .sz-chat-roomlist__item--group .sz-chat-roomlist__avatar--letter {
    border-color: rgba(120, 60, 0, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 4px 12px rgba(120, 60, 0, 0.18);
}

.sz-chat-roomlist__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sz-chat-roomlist__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.sz-chat-roomlist__title {
    font-weight: 750;
    font-size: 1.02rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    word-break: break-word;
}

.sz-chat-roomlist__meta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.45rem;
}

.sz-chat-roomlist__time {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.62;
    white-space: nowrap;
}

.sz-chat-roomlist__unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.15em 0.45em;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    background: var(--sz-orange, #f17432);
    box-shadow: 0 2px 8px rgba(241, 116, 50, 0.45);
}

.sz-chat-roomlist__sub {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sz-green-mid, #0a5c18);
    opacity: 0.88;
}

html[data-theme="dark"] .sz-chat-roomlist__sub {
    color: var(--sz-st-label, #bde0bd);
    opacity: 0.95;
}

.sz-chat-roomlist__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    margin-top: 0.2rem;
}

.sz-chat-roomlist__tag {
    display: inline-block;
    max-width: 100%;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sz-chat-roomlist__tag--direct {
    background: rgba(45, 143, 191, 0.2);
    color: #7ec8e8;
}
html[data-theme="light"] .sz-chat-roomlist__tag--direct {
    color: #1a5c7a;
    background: rgba(45, 143, 191, 0.15);
}

.sz-chat-roomlist__tag--group {
    background: rgba(46, 157, 92, 0.2);
    color: #7ddea8;
}
html[data-theme="light"] .sz-chat-roomlist__tag--group {
    color: #1a6b42;
    background: rgba(46, 157, 92, 0.15);
}

.sz-chat-roomlist__tag--season {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--sz-orange, #f17432);
    background: rgba(241, 116, 50, 0.14);
}

.sz-chat-roomlist__preview {
    display: block;
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    line-height: 1.4;
    opacity: 0.82;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sz-chat-roomlist__chevron {
    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
    opacity: 0.35;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sz-chat-roomlist__link:hover .sz-chat-roomlist__chevron {
    opacity: 0.75;
    transform: translateX(2px);
}

@media (max-width: 420px) {
    .sz-chat-roomlist__link {
        grid-template-columns: 2.75rem 1fr auto;
        padding: 0.75rem 0.75rem 0.75rem 0.75rem;
        gap: 0.65rem 0.45rem;
    }

    .sz-chat-roomlist__avatar--letter {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1rem;
    }

    .sz-avatar--chatlist {
        width: 2.75rem;
        height: 2.75rem;
    }

    .sz-avatar--chatlist .sz-avatar__letter {
        font-size: 1rem;
    }

    .sz-chat-roomlist__top {
        flex-wrap: wrap;
    }

    .sz-chat-roomlist__meta {
        width: 100%;
        justify-content: flex-end;
    }
}

.sz-chat-log {
    padding: 1rem 1.1rem;
}

.sz-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sz-chat-msg {
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: var(--sz-st-link-bg, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
}

.sz-chat-msg__reply {
    margin: 0 0 0.5rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
    opacity: 0.9;
    border-left: 3px solid var(--sz-orange, #f17432);
    background: rgba(0, 0, 0, 0.2);
}

.sz-chat-msg__head {
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.sz-chat-msg__body {
    line-height: 1.45;
    word-break: break-word;
}

.sz-chat-msg__foot {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
}

.sz-chat-msg__replylink {
    color: var(--sz-back-link, #cfe9cf);
}

.sz-chat-compose textarea {
    width: 100%;
    max-width: 40rem;
}

.sz-chat-replyto {
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: var(--sz-st-select-bg, rgba(0, 20, 6, 0.55));
}

.page-chat .sz-chat-room-hero h1 {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
}

/* Chat-Übersicht: ein Panel, Combobox ggf. im Dialog */
.page-chat .sz-panel--chat-hub {
    position: relative;
    overflow: visible;
}

.sz-panel__chat-hub-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.sz-panel__chat-hub-head .sz-panel__title {
    margin-bottom: 0;
}

.sz-panel--chat-hub__nopartners,
.sz-panel--chat-hub__empty {
    margin: 0 0 0.5rem;
}

.sz-chat-section-title {
    margin: 0.35rem 0 0.55rem;
    padding: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sz-green-mid, #0a5c18);
    border-bottom: 1px solid rgba(0, 60, 10, 0.12);
}

html[data-theme="dark"] .sz-chat-section-title {
    color: var(--sz-st-label);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sz-chat-new-dialog {
    padding: 0;
    border: none;
    max-width: min(28rem, calc(100vw - 2rem));
    width: 100%;
    background: transparent;
}

.sz-chat-new-dialog::backdrop {
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(2px);
}

html[data-theme="light"] .sz-chat-new-dialog::backdrop {
    background: rgba(15, 45, 22, 0.35);
}

.sz-chat-new-dialog__surface {
    margin: 0;
    padding: 1.35rem 1.5rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 60, 10, 0.12);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .sz-chat-new-dialog__surface {
    background: var(--sz-hero-bg);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--sz-body-color);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.65);
}

.sz-chat-new-dialog,
.sz-chat-new-dialog__surface {
    overflow: visible;
}

.sz-chat-new-dialog__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.65rem 0.85rem;
    margin-bottom: 0.65rem;
}

.sz-chat-new-dialog__head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #1a5c38 0%, #2e9d5c 50%, #1a6b42 100%);
    color: #fff;
    grid-row: 1 / span 2;
}

.sz-chat-new-dialog__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sz-green);
    line-height: 1.25;
}

.sz-chat-new-dialog__subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--sz-small);
    grid-column: 2;
}

html[data-theme="dark"] .sz-chat-new-dialog__title {
    color: var(--sz-st-label);
}

.sz-chat-new-dialog__close {
    grid-column: 3;
    grid-row: 1;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.25rem -0.35rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.07);
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.sz-chat-new-dialog__close:hover {
    background: rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .sz-chat-new-dialog__close {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .sz-chat-new-dialog__close:hover {
    background: rgba(255, 255, 255, 0.16);
}

.sz-chat-new-dialog__hint {
    margin: 0 0 1rem;
    text-align: left;
}

.sz-chat-new-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.sz-chat-new-dialog .sz-chat-start {
    margin-bottom: 0;
}

/* Tippgruppen: gleicher Dialog-Stil wie Chat, Verwalten etwas breiter + scrollbar */
.sz-tg-create-trigger {
    margin: 0 0 1rem;
}

.sz-chat-new-dialog--wide {
    max-width: min(34rem, calc(100vw - 2rem));
}

.sz-chat-new-dialog--wide .sz-chat-new-dialog__surface {
    max-height: min(90vh, 52rem);
    overflow: auto;
}

.sz-chat-new-dialog--wide .sz-form + .sz-form {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 60, 10, 0.1);
}

html[data-theme="dark"] .sz-chat-new-dialog--wide .sz-form + .sz-form {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.sz-chat-new-dialog .sz-combobox {
    position: relative;
    z-index: 2;
}

/* Combobox (Suchfeld + Liste) — Chat, Tippgruppen-Einladung */
.sz-chat-start .sz-combobox,
.sz-panel .sz-combobox {
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
}

.sz-chat-start .sz-combobox__label,
.sz-panel .sz-combobox__label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.sz-chat-start .sz-combobox__hint,
.sz-panel .sz-combobox__hint {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
}

.sz-chat-start .sz-combobox__wrap,
.sz-panel .sz-combobox__wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.sz-chat-start .sz-combobox__input,
.sz-panel .sz-combobox__input {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 0.55rem 0.65rem;
    min-height: 44px;
    border: 1px solid var(--sz-form-border);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    background-color: #fff;
    color: var(--sz-text);
}

html[data-theme="dark"] .sz-chat-start .sz-combobox__input,
html[data-theme="dark"] .sz-panel .sz-combobox__input {
    background-color: var(--sz-form-select-bg);
    border-color: var(--sz-form-select-border);
    color: var(--sz-body-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sz-chat-start .sz-combobox__input:focus,
.sz-panel .sz-combobox__input:focus {
    outline: 2px solid rgba(10, 92, 24, 0.45);
    outline-offset: 1px;
}

html[data-theme="dark"] .sz-chat-start .sz-combobox__input:focus,
html[data-theme="dark"] .sz-panel .sz-combobox__input:focus {
    outline-color: rgba(130, 200, 150, 0.55);
}

.sz-chat-start .sz-combobox__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 100;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: min(14rem, 50vh);
    overflow-y: auto;
    border-radius: 6px;
    border: 1px solid var(--sz-form-select-border, rgba(0, 60, 10, 0.15));
    background: var(--sz-form-select-bg, #fff);
    box-shadow: var(--sz-match-card-shadow, 0 8px 24px rgba(0, 0, 0, 0.2));
}

html[data-theme="dark"] .sz-chat-start .sz-combobox__list,
html[data-theme="dark"] .sz-panel .sz-combobox__list {
    background: var(--sz-form-select-option-bg);
    border-color: var(--sz-form-select-border);
}

.sz-chat-start .sz-combobox__option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    line-height: 1.35;
    word-break: break-word;
    color: var(--sz-text);
}

html[data-theme="dark"] .sz-chat-start .sz-combobox__option,
html[data-theme="dark"] .sz-panel .sz-combobox__option {
    color: var(--sz-form-select-option-fg);
}

.sz-chat-start .sz-combobox__option:hover,
.sz-chat-start .sz-combobox__option.is-active,
.sz-panel .sz-combobox__option:hover,
.sz-panel .sz-combobox__option.is-active {
    background: rgba(10, 92, 24, 0.12);
}

html[data-theme="dark"] .sz-chat-start .sz-combobox__option:hover,
html[data-theme="dark"] .sz-chat-start .sz-combobox__option.is-active,
html[data-theme="dark"] .sz-panel .sz-combobox__option:hover,
html[data-theme="dark"] .sz-panel .sz-combobox__option.is-active {
    background: rgba(130, 200, 150, 0.18);
    color: var(--sz-cream);
}

/* —— Chat-Raum: WhatsApp-ähnliche Oberfläche —— */
.page-chat-room .sz-main {
    padding-bottom: 0.5rem;
    min-height: 50vh;
}

body.page-chat-room {
    overflow: hidden;
}

/* Chat-Raum: festes Overlay unter der Menüleiste (sichtbar ohne showModal) */
.page-chat-room .sz-chat-room-popup {
    position: fixed;
    /* Über Sticky-Topbar (500) und Nav-Dropdown (1000), damit z. B. der Avatar nicht aufs Chat-Overlay ragt */
    z-index: 1200;
    left: 0;
    right: 0;
    top: calc(3.35rem + env(safe-area-inset-top, 0px));
    bottom: 0;
    box-sizing: border-box;
}

.page-chat-room .sz-chat-room-popup__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(2px);
}

html[data-theme="light"] .page-chat-room .sz-chat-room-popup__backdrop {
    background: rgba(12, 40, 18, 0.35);
}

.sz-chat-room-dialog__surface {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(42rem, calc(100vw - 0.9rem));
    max-height: calc(100vh - 4.35rem);
    height: calc(100vh - 4.35rem);
    max-height: calc(100dvh - 4.35rem);
    height: calc(100dvh - 4.35rem);
    margin: 0.45rem auto;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(0, 60, 10, 0.12);
    background: rgba(252, 253, 252, 0.99);
    overflow: hidden;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .sz-chat-room-dialog__surface {
    background: rgba(10, 22, 14, 0.98);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
}

.sz-chat-room-dialog__head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem 0.45rem;
    border-bottom: 1px solid rgba(0, 60, 10, 0.1);
}

html[data-theme="dark"] .sz-chat-room-dialog__head {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sz-chat-room-dialog__head-text {
    min-width: 0;
}

.sz-chat-room-dialog__kicker {
    margin: 0 0 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sz-green);
}

html[data-theme="dark"] .sz-chat-room-dialog__kicker {
    color: var(--sz-st-label);
}

.sz-chat-room-dialog__title {
    margin: 0;
    font-size: clamp(1rem, 3.5vw, 1.28rem);
    font-weight: 700;
    color: var(--sz-green);
    line-height: 1.25;
    word-break: break-word;
}

html[data-theme="dark"] .sz-chat-room-dialog__title {
    color: var(--sz-st-label);
}

.sz-chat-room-dialog__partnerline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.1rem 0 0;
    min-width: 0;
}

.sz-chat-room-dialog__partnername {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
    color: var(--sz-green);
}

html[data-theme="dark"] .sz-chat-room-dialog__partnername {
    color: var(--sz-st-label);
}

.sz-chat-room-dialog__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    flex-shrink: 0;
}

.sz-chat-room-dialog__nav a {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--sz-back-link);
    text-decoration: none;
}

.sz-chat-room-dialog__nav a:hover {
    text-decoration: underline;
}

.sz-chat-room-dialog__closelink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.3rem;
    line-height: 1;
    border-radius: 50%;
    text-decoration: none !important;
    background: rgba(0, 0, 0, 0.08);
}

.sz-chat-room-dialog__closelink:hover {
    filter: brightness(1.05);
}

html[data-theme="dark"] .sz-chat-room-dialog__closelink {
    background: rgba(255, 255, 255, 0.12);
}

.sz-chat-room-dialog__banner {
    margin: 0.35rem 0.75rem 0.45rem;
    flex-shrink: 0;
}

.sz-wa {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    margin: 0 auto 1rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 60, 10, 0.12);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* Im Popup: Chat-Karte nutzt restliche Höhe; Nachrichtenliste scrollt intern */
.page-chat-room .sz-chat-room-popup .sz-chat-room-dialog__surface .sz-wa {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    min-height: min(32vh, 280px);
    margin: 0;
    border-radius: 0;
    border: 0;
    border-top: 1px solid rgba(0, 60, 10, 0.08);
    box-shadow: none;
}

html[data-theme="dark"] .page-chat-room .sz-chat-room-popup .sz-chat-room-dialog__surface .sz-wa {
    border-top-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 560px) {
    .page-chat-room .sz-chat-room-popup {
        top: calc(3.25rem + env(safe-area-inset-top, 0px));
    }

    .sz-chat-room-dialog__surface {
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: calc(100vh - 3.6rem);
        height: calc(100vh - 3.6rem);
        max-height: calc(100dvh - 3.6rem);
        height: calc(100dvh - 3.6rem);
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

html[data-theme="dark"] .sz-wa {
    background: rgba(10, 22, 14, 0.96);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.sz-wa__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.65rem 0.5rem 0.5rem;
    background: rgba(230, 235, 230, 0.55);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

html[data-theme="dark"] .sz-wa__scroll {
    background: rgba(0, 0, 0, 0.28);
}

.sz-wa__empty {
    margin: 2rem 1rem;
    text-align: center;
    color: var(--sz-small, #666);
    font-size: 0.95rem;
}

.sz-wa-row {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
    max-width: 100%;
}

.sz-wa-row--them {
    flex-direction: row;
    justify-content: flex-start;
}

.sz-wa-row--me {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.sz-wa-row .sz-wa-row__avatar.sz-avatar {
    flex-shrink: 0;
}

html[data-theme="dark"] .sz-wa-row .sz-wa-row__avatar.sz-avatar {
    border-color: rgba(255, 255, 255, 0.12);
}

.sz-wa-row__col {
    max-width: min(82%, 26rem);
    min-width: 0;
}

.sz-wa-bubble {
    position: relative;
    padding: 0.35rem 0.55rem 0.25rem;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

.sz-wa-bubble--them {
    background: #fff;
    color: #1a1a1a;
    border-radius: 4px 10px 10px 10px;
}

.sz-wa-bubble--me {
    background: #d9fdd3;
    color: #0a1a0a;
    border-radius: 10px 4px 10px 10px;
}

html[data-theme="dark"] .sz-wa-bubble--them {
    background: #1f2c22;
    color: #e8f0e8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .sz-wa-bubble--me {
    background: #005c4b;
    color: #e9f6f2;
}

.sz-wa-bubble__quote {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.35rem;
    padding: 0.3rem 0.45rem;
    border-left: 3px solid var(--sz-orange);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.04);
    font-size: 0.82rem;
}

html[data-theme="dark"] .sz-wa-bubble__quote {
    background: rgba(0, 0, 0, 0.25);
}

.sz-wa-bubble__quote-author {
    font-weight: 700;
    color: var(--sz-orange);
}

.sz-wa-bubble__quote-text {
    opacity: 0.9;
    word-break: break-word;
}

.sz-wa-bubble__imglink {
    display: block;
    margin: 0.15rem 0 0.25rem;
    border-radius: 8px;
    overflow: hidden;
    max-height: 220px;
}

.sz-wa-bubble__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    vertical-align: middle;
}

.sz-wa-bubble__ticks {
    display: inline-flex;
    align-items: center;
    margin-left: 0.22rem;
    font-size: 0.72rem;
    line-height: 1;
    user-select: none;
    letter-spacing: -0.38em;
}

.sz-wa-bubble__tick {
    letter-spacing: 0;
}

.sz-wa-bubble__ticks--sent .sz-wa-bubble__tick {
    color: rgba(0, 0, 0, 0.42);
}

.sz-wa-bubble__ticks--read .sz-wa-bubble__tick {
    color: #1d9bf0;
}

html[data-theme="dark"] .sz-wa-bubble__ticks--sent .sz-wa-bubble__tick {
    color: rgba(255, 255, 255, 0.42);
}

html[data-theme="dark"] .sz-wa-bubble__ticks--read .sz-wa-bubble__tick {
    color: #5eb6ff;
}

.sz-wa-lightbox {
    padding: 0;
    border: 0;
    max-width: 96vw;
    max-height: 96vh;
    background: transparent;
    color: #fff;
}

.sz-wa-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(2px);
}

.sz-wa-lightbox__img {
    display: block;
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

.sz-wa-lightbox__close {
    position: fixed;
    top: max(0.6rem, env(safe-area-inset-top, 0px));
    right: max(0.6rem, env(safe-area-inset-right, 0px));
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.sz-wa-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.sz-wa-bubble__text {
    font-size: 0.95rem;
    line-height: 1.45;
    word-break: break-word;
}

.sz-wa-bubble__text--emoji-only {
    font-size: 300%;
    line-height: 1.1;
    word-break: normal;
}

.sz-wa-bubble__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.sz-wa-bubble__time {
    font-size: 0.68rem;
    opacity: 0.65;
}

.sz-wa-bubble__replybtn {
    border: 0;
    padding: 0 0.2rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.55;
    border-radius: 4px;
    color: inherit;
}

.sz-wa-bubble__replybtn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .sz-wa-bubble__replybtn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sz-wa__replybar {
    flex-shrink: 0;
    border-top: 1px solid rgba(0, 60, 10, 0.1);
    background: rgba(0, 92, 36, 0.08);
    padding: 0.4rem 0.5rem;
}

html[data-theme="dark"] .sz-wa__replybar {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: rgba(0, 40, 18, 0.6);
}

.sz-wa__replybar-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.sz-wa__replybar-text {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.35;
}

.sz-wa__replybar-text strong {
    display: block;
    color: var(--sz-orange);
}

.sz-wa__replybar-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
}

html[data-theme="dark"] .sz-wa__replybar-close {
    background: rgba(255, 255, 255, 0.1);
}

.sz-wa__composer {
    flex-shrink: 0;
    position: relative;
    z-index: 20;
    background: rgba(248, 250, 248, 0.98);
    border-top: 1px solid rgba(0, 60, 10, 0.1);
    padding: 0.45rem 0.4rem calc(0.45rem + env(safe-area-inset-bottom, 0));
    border-radius: 0 0 12px 12px;
}

html[data-theme="dark"] .sz-wa__composer {
    background: rgba(8, 18, 12, 0.97);
    border-top-color: rgba(255, 255, 255, 0.08);
}

.sz-wa__emoji-pop {
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    max-height: min(52vh, 22rem);
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(255, 255, 255, 0.95);
    max-width: min(100%, 26rem);
    margin: 0 auto;
}

html[data-theme="dark"] .sz-wa__emoji-pop {
    background: rgba(20, 32, 24, 0.98);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.sz-wa__emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.sz-wa__emoji-cell {
    border: 0;
    padding: 0.18rem;
    margin: 0;
    font-size: 1.22rem;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border-radius: 6px;
}

.sz-wa__emoji-cell:hover {
    background: rgba(0, 92, 36, 0.12);
}

.sz-wa__inputrow {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
}

.sz-wa__file {
    position: absolute;
    width: 0.01px;
    height: 0.01px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.sz-wa__iconbtn {
    flex-shrink: 0;
    width: 2.65rem;
    height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 60, 10, 0.08);
    color: var(--sz-green-mid);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

html[data-theme="dark"] .sz-wa__iconbtn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sz-st-label);
}

.sz-wa__iconbtn:hover {
    background: rgba(0, 92, 36, 0.15);
}

.sz-wa__clip {
    cursor: pointer;
}

.sz-wa__textarea-wrap {
    flex: 1;
    min-width: 0;
    border-radius: 1.35rem;
    background: #fff;
    border: 1px solid rgba(0, 60, 10, 0.12);
    padding: 0.35rem 0.75rem;
}

html[data-theme="dark"] .sz-wa__textarea-wrap {
    background: rgba(0, 30, 12, 0.75);
    border-color: rgba(255, 255, 255, 0.12);
}

.sz-wa__textarea-wrap textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    resize: none;
    min-height: 2.25rem;
    max-height: 7.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    font-family: inherit;
    background: transparent;
    color: inherit;
    box-sizing: border-box;
}

.sz-wa__textarea-wrap textarea:focus {
    outline: none;
}

.sz-wa__send {
    flex-shrink: 0;
    width: 2.65rem;
    height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--sz-green-mid);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 60, 10, 0.25);
}

html[data-theme="dark"] .sz-wa__send {
    background: #0a7c32;
}

/* Tippgruppen (Profil) */
.sz-tg-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sz-tg-list__item {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.5));
}

.sz-tg-list__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sz-tg-list__meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sz-tg-list__invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.sz-tg-list__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.65rem 0 0;
}

.sz-tg-members {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sz-tg-members__item {
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.35));
}

.sz-tg-members__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.sz-tg-members__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.sz-tg-members__remove {
    flex-shrink: 0;
    margin: 0;
}

.sz-tg-members--former {
    margin-bottom: 1rem;
}

.sz-tg-members__item--former {
    opacity: 0.92;
    border-style: dashed;
}

.sz-tg-members__item--former .sz-tg-members__meta strong {
    font-weight: 600;
}

.sz-tg-members__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex-shrink: 0;
    align-items: center;
}

.sz-tg-apply-panel {
    margin-bottom: 1rem;
}

.sz-tg-browse-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sz-tg-browse-list__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.35));
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sz-tg-browse-list__link:hover {
    border-color: var(--sz-accent, #3dd68c);
    background: var(--sz-match-card-bg-hover, rgba(0, 40, 18, 0.5));
}

.sz-tg-browse-list__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sz-chat-new-dialog .sz-block-title {
    margin-top: 1.1rem;
}

.sz-mail-invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

.sz-wa__send:hover {
    filter: brightness(1.08);
}

.sz-wa__send svg {
    margin-left: 2px;
}

.sz-wa__filehint {
    margin: 0.25rem 0.5rem 0;
    font-size: 0.78rem;
    opacity: 0.85;
}

/* —— Tipper-Profil —— */
.page-tipper-profile .sz-tipper-hero {
    position: relative;
    margin-bottom: 1rem;
    padding: 1.25rem 1rem 1.1rem;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 60, 20, 0.92) 0%, rgba(0, 28, 12, 0.95) 55%, rgba(40, 20, 0, 0.35) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .page-tipper-profile .sz-tipper-hero {
    background: linear-gradient(135deg, #e8f5e9 0%, #f4f1e8 50%, #fff8f0 100%);
    border-color: rgba(0, 60, 20, 0.12);
    box-shadow: 0 8px 28px rgba(0, 40, 10, 0.1);
}
.sz-tipper-hero__glow {
    position: absolute;
    inset: -40% 20% auto -20%;
    height: 120%;
    background: radial-gradient(ellipse at 30% 20%, rgba(241, 116, 50, 0.35), transparent 65%);
    pointer-events: none;
}
.sz-tipper-hero__main {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
}
.sz-tipper-hero__nick {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.15;
}
.sz-tipper-hero__realname {
    margin: 0.2rem 0 0;
    font-size: 1rem;
    opacity: 0.85;
}
.sz-tipper-hero__quote {
    margin: 0.65rem 0 0;
    padding: 0.5rem 0 0 0.75rem;
    border-left: 3px solid var(--sz-orange);
    font-size: 0.95rem;
    font-style: italic;
    opacity: 0.9;
}
.sz-tipper-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    opacity: 0.9;
}
.sz-tipper-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}
.sz-tipper-pill--rank {
    background: var(--sz-orange);
    color: #fff;
}
.sz-tipper-pill__of {
    font-weight: 500;
    opacity: 0.9;
}
.sz-tipper-pill--up {
    background: rgba(40, 160, 70, 0.35);
    color: #b8f0c8;
}
.sz-tipper-pill--down {
    background: rgba(180, 50, 50, 0.35);
    color: #ffd0d0;
}
html[data-theme="light"] .sz-tipper-pill--up {
    color: #0a5c18;
}
html[data-theme="light"] .sz-tipper-pill--down {
    color: #8b2020;
}
.sz-tipper-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.55rem;
    margin-bottom: 1.1rem;
}
.sz-tipper-stat {
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: var(--sz-match-card-bg);
    border: 1px solid var(--sz-match-card-border);
    text-align: center;
}
.sz-tipper-stat--primary {
    border-color: rgba(241, 116, 50, 0.45);
    box-shadow: 0 0 0 1px rgba(241, 116, 50, 0.12);
}
.sz-tipper-stat__label {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}
.sz-tipper-stat__value {
    margin: 0.15rem 0 0;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
}
.sz-tipper-stat--primary .sz-tipper-stat__value {
    color: var(--sz-orange);
}
.sz-tipper-stat__hint {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    opacity: 0.75;
}
.sz-tipper-charts {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}
.sz-tipper-charts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
    min-width: 0;
    max-width: 100%;
}
.sz-tipper-chart-card {
    padding: 0.85rem 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--sz-match-card-border);
    background: var(--sz-match-card-bg);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.sz-tipper-chart-card--wide {
    grid-column: 1 / -1;
    overflow: hidden;
}
.sz-tipper-chart-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}
.sz-tipper-chart-card__desc {
    margin: 0.25rem 0 0.65rem;
    font-size: 0.82rem;
    color: var(--sz-hero-meta);
    line-height: 1.35;
}
.sz-tipper-chart-card__canvas-wrap {
    position: relative;
    height: 14rem;
    width: 100%;
}
.sz-tipper-chart-card__canvas-wrap--tall {
    height: 18rem;
}
.sz-tipper-chart-card__canvas-wrap--form {
    height: 18rem;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.sz-tipper-chart-form-scroll {
    position: relative;
    height: 18rem;
    box-sizing: border-box;
}
.sz-tipper-chart-form-scroll canvas {
    display: block;
    max-width: none;
}
.sz-tipper-chart-card__canvas-wrap--recent {
    height: min(22rem, 55vh);
}
.sz-tipper-chart-card__canvas-wrap--rank {
    height: 12rem;
    max-width: 14rem;
    margin-inline: auto;
}
.sz-tipper-podium__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sz-tipper-groups__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sz-tipper-groups__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem 0.35rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--sz-match-card-border);
    background: var(--sz-match-card-bg);
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: 0.88rem;
}
.sz-tipper-groups__chip:hover {
    border-color: var(--sz-orange);
    color: inherit;
}
.sz-tipper-recent__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sz-tipper-recent__item {
    border-bottom: 1px solid var(--sz-match-card-border);
}
.sz-tipper-recent__item:last-child {
    border-bottom: none;
}
.sz-tipper-recent__link {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: 0.55rem 0.25rem;
    text-decoration: none;
    color: inherit;
}
.sz-tipper-recent__link:hover {
    color: inherit;
    background: rgba(255, 255, 255, 0.04);
}
html[data-theme="light"] .sz-tipper-recent__link:hover {
    background: rgba(0, 60, 20, 0.05);
}
.sz-tipper-recent__when {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
    white-space: nowrap;
}
.sz-tipper-recent__match {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.sz-tipper-recent__teams {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sz-tipper-recent__crest {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}
.sz-tipper-recent__tips {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.sz-tipper-recent__tip {
    opacity: 0.75;
}
.sz-tipper-recent__result {
    font-weight: 700;
}
.sz-tipper-recent__score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 3rem;
}
@media (max-width: 640px) {
    .sz-tipper-recent__link {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }
    .sz-tipper-recent__when {
        grid-column: 1;
    }
    .sz-tipper-recent__score {
        grid-row: 1 / span 2;
        grid-column: 2;
    }
    .sz-tipper-recent__match {
        grid-column: 1;
    }
    .sz-tipper-recent__tips {
        grid-column: 1;
        flex-direction: row;
        gap: 0.5rem;
    }
}

/* Tipper-Profil: Alle Tipps (Spoiler + Tabelle) */
.sz-tipper-all-tips .sz-panel__title {
    display: none;
}
.sz-tipper-tips-spoiler {
    border: 1px solid var(--sz-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--sz-radius-lg, 1rem);
    background: var(--sz-panel-bg, rgba(12, 18, 28, 0.45));
    overflow: hidden;
}
html[data-theme="light"] .sz-tipper-tips-spoiler {
    background: var(--sz-panel-bg, #f8faf9);
}
.sz-tipper-tips-spoiler__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    transition: background 0.15s ease;
}
.sz-tipper-tips-spoiler__summary::-webkit-details-marker {
    display: none;
}
.sz-tipper-tips-spoiler__summary::before {
    content: "▸";
    margin-right: 0.5rem;
    color: var(--sz-accent, #f17432);
    transition: transform 0.2s ease;
}
.sz-tipper-tips-spoiler[open] .sz-tipper-tips-spoiler__summary::before {
    transform: rotate(90deg);
}
.sz-tipper-tips-spoiler__summary:hover {
    background: rgba(241, 116, 50, 0.08);
}
.sz-tipper-tips-spoiler__title {
    font-size: 1.1rem;
}
.sz-tipper-tips-spoiler__meta {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sz-muted, rgba(255, 255, 255, 0.65));
}
.sz-tipper-tips-spoiler__body {
    padding: 0 1rem 1.15rem;
    border-top: 1px solid var(--sz-border, rgba(255, 255, 255, 0.08));
}
.sz-tipper-tips-table-scroll {
    overflow-x: auto;
    margin: 0.75rem 0 1rem;
    border-radius: var(--sz-radius, 0.5rem);
    border: 1px solid var(--sz-border, rgba(255, 255, 255, 0.08));
}
.sz-tipper-tips-table {
    margin: 0;
    min-width: 48rem;
}
.sz-tipper-tips-table__nr-col {
    width: 2.5rem;
    text-align: center;
}
.sz-tipper-tips-table__nr {
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--sz-muted, rgba(255, 255, 255, 0.55));
    font-weight: 600;
}
.sz-tipper-tips-table .sz-sort-th {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: inherit;
}
.sz-tipper-tips-table .sz-sort-th:hover {
    color: var(--sz-accent, #f17432);
}
.sz-sort-th__icon {
    font-size: 0.7rem;
    opacity: 0.85;
    min-width: 0.85em;
}
.sz-tipper-tips-table__match-link {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}
.sz-tipper-tips-table__match-link:hover {
    color: var(--sz-accent, #f17432);
    text-decoration: underline;
}
.sz-tipper-tips-table__when {
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--sz-muted, rgba(255, 255, 255, 0.7));
}
.sz-tipper-tips-table__round {
    font-size: 0.9rem;
    max-width: 10rem;
}
.sz-tipper-tips-table__score {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.sz-tipper-tips-table__pts {
    white-space: nowrap;
}
.sz-tipper-tips-table__stars-col {
    width: 5.5rem;
    text-align: center;
    font-weight: 600;
}
.sz-tipper-tips-table__stars {
    text-align: center;
    white-space: nowrap;
}
.sz-tipper-tips-table__stars .sz-tip-stars {
    justify-content: center;
}
.sz-tipper-tips-table__pending {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--sz-muted, rgba(255, 255, 255, 0.55));
}
.sz-tipper-tips-table__not-tipped {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sz-accent, #f17432);
    white-space: nowrap;
}
.sz-tipper-tips-table__row--untipped {
    background: rgba(241, 116, 50, 0.06);
}
html[data-theme="light"] .sz-tipper-tips-table__row--untipped {
    background: rgba(241, 116, 50, 0.08);
}
.sz-tipper-tips-table__row--untipped:hover {
    background: rgba(241, 116, 50, 0.12);
}
.sz-tipper-tips-table__sum-row td {
    background: rgba(241, 116, 50, 0.1);
    border-top: 2px solid rgba(241, 116, 50, 0.35);
    font-size: 0.95rem;
}
html[data-theme="light"] .sz-tipper-tips-table__sum-row td {
    background: rgba(241, 116, 50, 0.12);
}
.sz-tipper-tips-bonus__title {
    margin: 1.25rem 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 600;
}
.sz-tipper-tips-bonus-table {
    min-width: 28rem;
}
.sz-tipper-tips-grand-total {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--sz-radius, 0.5rem);
    background: linear-gradient(135deg, rgba(241, 116, 50, 0.18), rgba(0, 80, 20, 0.12));
    border: 1px solid rgba(241, 116, 50, 0.35);
}
.sz-tipper-tips-grand-total__heading {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.sz-tipper-tips-grand-total__stats {
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
html[data-theme="light"] .sz-tipper-tips-grand-total__stats {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}
.sz-tipper-tips-grand-total__points {
    margin-bottom: 0.5rem;
}
.sz-tipper-tips-grand-total__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: 0.95rem;
}
.sz-tipper-tips-grand-total__row--muted {
    color: var(--sz-muted, rgba(255, 255, 255, 0.72));
}
.sz-tipper-tips-grand-total__row--sub {
    padding-left: 1rem;
    font-size: 0.88rem;
    color: var(--sz-muted, rgba(255, 255, 255, 0.65));
}
.sz-tipper-tips-grand-total__row--sub strong {
    font-weight: 600;
}
.sz-tipper-tips-grand-total__row--total {
    margin-top: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1.1rem;
}
.sz-tipper-tips-grand-total__row--total strong {
    color: var(--sz-accent, #f17432);
    font-size: 1.35rem;
}
html[data-theme="light"] .sz-tipper-tips-grand-total__row--total {
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* Spiel-Detail (OpenLigaDB) */
.page-match-detail .sz-match-detail-hero {
    position: relative;
    margin-bottom: 1.25rem;
    padding: 1.5rem 1rem 1.25rem;
    border-radius: var(--sz-radius-lg, 1rem);
    background: var(--sz-panel-bg, rgba(12, 18, 28, 0.55));
    border: 1px solid var(--sz-border, rgba(255, 255, 255, 0.08));
    overflow: hidden;
    text-align: center;
}
html[data-theme="light"] .page-match-detail .sz-match-detail-hero {
    background: var(--sz-panel-bg, #f4f6fa);
}
.sz-match-detail-hero__glow {
    position: absolute;
    inset: -40% -20% auto;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.18), transparent 70%);
    pointer-events: none;
}
.sz-match-detail__status {
    display: inline-block;
    margin: 0.35rem 0 0.75rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
}
.sz-match-detail__status--live {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
}
.sz-match-detail__status--finished {
    color: #86efac;
    background: rgba(134, 239, 172, 0.12);
}
.sz-match-detail-hero__scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem 1rem;
    align-items: center;
    max-width: 42rem;
    margin-inline: auto;
}
.sz-match-detail-club {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.sz-match-detail-club--away {
    text-align: right;
}
.sz-match-detail-club__crest {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
}
.sz-match-detail-club__name {
    font-size: 1rem;
    line-height: 1.2;
    word-break: break-word;
}
.sz-match-detail-club__short {
    font-size: 0.8rem;
    color: var(--sz-hero-meta, #94a3b8);
}
.sz-match-detail-hero__score {
    margin: 0;
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}
.sz-match-detail-hero__colon {
    opacity: 0.55;
    padding-inline: 0.15em;
}
.sz-match-detail-hero__live-badge {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sz-match-detail-hero__vs {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 0.45;
}
.sz-match-detail-hero__detail {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--sz-hero-meta, #94a3b8);
}
.sz-match-detail-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.85rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    color: var(--sz-hero-meta, #94a3b8);
}
.sz-match-detail-meta__league {
    font-weight: 600;
    color: var(--sz-text, inherit);
}
.sz-match-detail-nav {
    margin-bottom: 1rem;
}
.sz-match-detail-nav__sep {
    opacity: 0.45;
}
.sz-match-detail-panel {
    margin-bottom: 1rem;
}
.sz-match-detail-panel__title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}
.sz-match-detail-hint {
    margin: 0;
    font-size: 0.9rem;
    color: var(--sz-hero-meta, #94a3b8);
}
.sz-match-detail-my-tip {
    margin: 0;
    font-size: 1.35rem;
}
.sz-match-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.sz-match-detail-table th,
.sz-match-detail-table td {
    padding: 0.45rem 0.35rem;
    border-bottom: 1px solid var(--sz-border, rgba(255, 255, 255, 0.08));
    text-align: left;
    vertical-align: top;
}
.sz-match-detail-table__score {
    text-align: right;
    white-space: nowrap;
}
.sz-match-detail-table__desc {
    display: block;
    font-size: 0.78rem;
    color: var(--sz-hero-meta, #94a3b8);
    font-weight: 400;
}
.sz-match-detail-goals {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sz-match-detail-goal {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0.5rem 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--sz-border, rgba(255, 255, 255, 0.06));
    align-items: baseline;
    font-size: 0.92rem;
}
.sz-match-detail-goal__score {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sz-match-detail-goal__min {
    color: var(--sz-hero-meta, #94a3b8);
    font-size: 0.82rem;
}
.sz-match-detail-goal__tag {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--sz-hero-meta, #94a3b8);
}
.sz-match-detail-facts {
    display: grid;
    grid-template-columns: minmax(8rem, 35%) 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.9rem;
}
.sz-match-detail-facts dt {
    margin: 0;
    color: var(--sz-hero-meta, #94a3b8);
}
.sz-match-detail-facts dd {
    margin: 0;
}
.sz-match-detail-source {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    color: var(--sz-hero-meta, #94a3b8);
}
a.sz-match__teams-link {
    display: block;
    margin: -0.15rem -0.35rem 0.35rem;
    padding: 0.35rem;
    border-radius: var(--sz-radius-md, 0.5rem);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}
a.sz-match__teams-link:hover,
a.sz-match__teams-link:focus-visible {
    background: rgba(56, 189, 248, 0.08);
    outline: none;
}
a.sz-match__teams-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45);
}
.sz-compact-match__info {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sz-link, #38bdf8);
    text-decoration: none;
    margin-bottom: 0.15rem;
}
.sz-compact-match__info:hover {
    text-decoration: underline;
}
@media (max-width: 520px) {
    .sz-match-detail-hero__scoreboard {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .sz-match-detail-hero__center {
        order: -1;
    }
    .sz-match-detail-club--away {
        text-align: center;
    }
}