:root {
    --sz-green: #003c0a;
    --sz-green-mid: #0a5c18;
    --sz-orange: #f17432;
    --sz-cream: #f4f1e8;
    --sz-text: #1a1a1a;
    --sz-nav-avatar-size: 3.25rem;
    --sz-topbar-row-height: 3.25rem;
    --sz-logo-header-height: 57px;
    --sz-logo-header-max-width: min(12.65rem, 46vw);
    --sz-logo-mark-ratio: 643 / 605;
    --sz-logo-wordmark-ratio: 1498 / 543;
    --sz-logo-overhang: max(0px, calc(var(--sz-logo-header-height) - var(--sz-topbar-row-height)));
    /* Saison-Avatar im Logo: Ruhe +25 % gegenüber kompakt, Scroll = frühere Größe */
    --sz-logo-season-size-compact: 1.65rem;
    --sz-logo-season-size-rest: calc(var(--sz-logo-season-size-compact) * 1.25);
}

/* —— Theme: Dark (Standard) —— */
html[data-theme="dark"] {
    color-scheme: dark;
    --sz-text: var(--sz-cream);
    --sz-body-color: var(--sz-cream);
    --sz-topbar-bg: rgba(0, 0, 0, 0.52);
    --sz-topbar-border: rgba(255, 255, 255, 0.12);
    --sz-topbar-blur: blur(10px) saturate(1.05);
    --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);
    /* Eingabefelder (Text/E-Mail/Passwort/Textarea): gleiche grüne Familie, systemweit */
    --sz-form-input-bg: rgba(0, 40, 16, 0.62);
    --sz-form-input-fg: var(--sz-cream);
    --sz-form-input-border: rgba(130, 200, 150, 0.28);
    --sz-form-input-placeholder: rgba(205, 228, 205, 0.55);
    --sz-form-input-focus-border: rgba(241, 116, 50, 0.7);
    --sz-form-input-focus-ring: rgba(241, 116, 50, 0.18);
    /* 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-kicker-color: #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-muted: #a8c9a8;
    --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-text: #1a221a;
    --sz-body-color: #1a221a;
    /* Topbar: mattes Glas (grün), etwas weniger transparent als Dark */
    --sz-topbar-bg: linear-gradient(
        180deg,
        rgba(0, 44, 16, 0.78) 0%,
        rgba(0, 60, 10, 0.74) 100%
    );
    --sz-topbar-border: rgba(130, 200, 150, 0.28);
    --sz-topbar-blur: blur(10px) saturate(1.08);
    --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-card-bg: #f4f8f4;
    --sz-match-card-border: rgba(0, 60, 10, 0.14);
    --sz-match-card-shadow: 0 2px 12px rgba(0, 40, 10, 0.08);
    --sz-match-meta: #5a655a;
    --sz-muted: #5a6e5c;
    --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-form-input-bg: #fff;
    --sz-form-input-fg: var(--sz-text);
    --sz-form-input-border: var(--sz-form-border);
    --sz-form-input-placeholder: rgba(74, 93, 76, 0.65);
    --sz-form-input-focus-border: rgba(10, 92, 24, 0.6);
    --sz-form-input-focus-ring: rgba(10, 92, 24, 0.14);
    --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(72vmin, 28rem));
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background: url("/assets/images/logos/szoccer-logo_01_trans.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: var(--sz-topbar-blur, blur(10px) saturate(1.05));
    -webkit-backdrop-filter: var(--sz-topbar-blur, blur(10px) saturate(1.05));
    padding-top: env(safe-area-inset-top);
    overflow: visible;
}

/* Native App: Safe Area oben übernimmt die Shell (kein Doppel-Abstand, kein Überlappen der Statusleiste). */
html.sz-native-shell .sz-topbar {
    padding-top: 0;
}

html.sz-native-shell header.sz-topbar {
    /* Leichter Verlauf unter der System-Statusleiste – Lesbarkeit Uhrzeit/WLAN vs. Menü-Icons */
    box-shadow: 0 1px 0 var(--sz-topbar-border);
}

.sz-topbar__row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    min-height: 3.25rem;
    gap: 0.5rem 0.65rem;
    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__actions {
    display: flex;
    align-items: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    gap: 0.5rem 0.65rem;
    justify-content: flex-end;
}

.sz-topbar__actions .sz-nav {
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 0.45rem 0.55rem;
}

.sz-topbar__actions .sz-nav__pill {
    flex-shrink: 0;
    white-space: nowrap;
}

.sz-topbar__actions .sz-nav-icon,
.sz-topbar__actions .sz-logout-btn,
.sz-topbar__actions .sz-nav-tab {
    flex-shrink: 0;
}

.sz-topbar__tools {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

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

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

.sz-topbar__desktop-only {
    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,
html[data-theme="light"] .sz-nav-drawer__icons .sz-app-settings-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,
html[data-theme="light"] .sz-nav-drawer__icons .sz-app-settings-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);
}

/* Stagger: siehe sz-ux-enhancements.css (.sz-nav-drawer__section-items) */

.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;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    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;
}

/* Theme + Abmelden/App-Einstellungen: 3 % kleiner, Icons rechtsbündig (Topbar + Burger) */
.sz-topbar__tools .sz-theme-toggle,
.sz-topbar__tools .sz-logout-btn,
.sz-nav-drawer__icons .sz-theme-toggle,
.sz-nav-drawer__icons .sz-logout-btn {
    width: 42.68px;
    height: 42.68px;
}

.sz-topbar__tools .sz-logout-btn__icon svg,
.sz-nav-drawer__icons .sz-logout-btn__icon svg {
    width: 21.34px;
    height: 21.34px;
}

.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 {
        z-index: 500;
    }

    body.sz-has-bottom-nav:not(.page-chat-room) .sz-topbar {
        position: fixed;
        top: 0;
    }

    body.page-chat-room .sz-topbar {
        position: relative;
        top: auto;
    }

    .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__actions {
        display: none !important;
    }

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

    /* Burger wird bei offenem Drawer zum X – separates Panel-X entfällt */
    .sz-nav-drawer__close {
        display: none !important;
    }

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

    .sz-logo__img {
        height: 48px;
        width: auto;
        max-width: var(--sz-logo-header-max-width);
        transform: translateY(1px);
    }

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

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

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

    .sz-nav-avatar__aura {
        width: 3.55rem;
        height: 3.55rem;
    }

    .sz-nav-avatar__aurora-ring {
        filter: blur(8px);
    }

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

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

    body.sz-has-bottom-nav:not(.page-chat-room) header.sz-topbar ~ .sz-main,
    body.sz-has-bottom-nav:not(.page-chat-room) header.sz-topbar:has(.sz-nav-avatar) ~ .sz-main {
        padding-top: calc(var(--sz-chrome-top-h, 3.25rem) + 0.75rem);
    }
}

.sz-nav__pill--desktop-tip {
    display: none;
}

@media (min-width: 561px) {
    .sz-topbar__actions .sz-nav__pill--mobile-drawer {
        display: none !important;
    }

    .sz-topbar__actions .sz-nav__pill--desktop-tip {
        display: inline-flex !important;
    }

    .sz-burger,
    .sz-topbar__mobile-only {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

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

    .sz-nav-drawer__link--primary-nav {
        display: none !important;
    }

    .sz-nav-drawer__close {
        display: inline-flex !important;
    }

    .sz-topbar__row {
        flex-wrap: nowrap;
    }

    .sz-logo {
        flex: 0 1 auto;
        min-width: 0;
        max-width: var(--sz-logo-header-max-width);
    }

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

@media (min-width: 561px) and (max-width: 920px) {
    .sz-topbar__actions .sz-nav {
        gap: 0.35rem 0.45rem;
    }

    .sz-topbar__actions .sz-nav__pill {
        padding: 0.32rem 0.55rem;
        font-size: 0.88rem;
    }

    .sz-logo__img {
        height: 53px;
        transform: translateY(1px);
    }
}

@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;
    }

    .sz-nav-avatar__aurora-ring,
    .sz-nav-avatar__aurora-sheet,
    .sz-nav-avatar__aurora-core {
        animation: none !important;
    }

    .sz-nav-avatar__aura {
        --sz-aurora-scale: 1;
    }

    .sz-nav-avatar__aurora-ring {
        transform: none;
        opacity: 0.5;
    }

    .sz-nav-avatar__aurora-core {
        opacity: 0.55;
        transform: none;
    }
}

/* Profil-Avatar: feste Größe, kein Scroll-Shrink */
.sz-nav-avatar {
    --sz-nav-avatar-shift-y: 3px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--sz-nav-avatar-size);
    height: var(--sz-topbar-row-height);
    overflow: visible;
    line-height: 0;
    text-decoration: none;
}

/* Nordlicht-Aura um den Profil-Avatar (dezent, mehrschichtig) */
.sz-nav-avatar__aura {
    --sz-aurora-scale: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--sz-nav-avatar-size) + 1.35rem);
    height: calc(var(--sz-nav-avatar-size) + 1.35rem);
    transform: translate(-50%, calc(-50% + var(--sz-nav-avatar-shift-y))) scale(var(--sz-aurora-scale));
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.sz-nav-avatar__aurora-ring {
    position: absolute;
    inset: -4%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 28deg,
        rgba(56, 189, 248, 0.55) 52deg,
        rgba(129, 140, 248, 0.5) 108deg,
        rgba(74, 222, 128, 0.45) 168deg,
        rgba(45, 212, 191, 0.4) 220deg,
        rgba(241, 116, 50, 0.35) 285deg,
        transparent 330deg 360deg
    );
    filter: blur(10px);
    opacity: 0.72;
    animation: sz-nav-aurora-spin 16s linear infinite;
}

.sz-nav-avatar__aurora-sheet {
    position: absolute;
    inset: -10%;
    border-radius: 46% 54% 51% 49% / 49% 51% 54% 46%;
    filter: blur(11px);
    opacity: 0.5;
    mix-blend-mode: screen;
    will-change: transform, border-radius, opacity;
}

.sz-nav-avatar__aurora-sheet--1 {
    background: linear-gradient(
        118deg,
        transparent 8%,
        rgba(34, 211, 238, 0.55) 38%,
        rgba(167, 139, 250, 0.42) 58%,
        rgba(52, 211, 153, 0.35) 78%,
        transparent 96%
    );
    animation: sz-nav-aurora-wave-1 6.2s ease-in-out infinite;
}

.sz-nav-avatar__aurora-sheet--2 {
    inset: -6%;
    background: linear-gradient(
        62deg,
        transparent 12%,
        rgba(110, 231, 183, 0.48) 42%,
        rgba(96, 165, 250, 0.38) 62%,
        rgba(251, 146, 60, 0.28) 82%,
        transparent 94%
    );
    animation: sz-nav-aurora-wave-2 7.8s ease-in-out infinite reverse;
    opacity: 0.42;
}

.sz-nav-avatar__aurora-core {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 42% 38%,
        rgba(186, 230, 253, 0.55) 0%,
        rgba(129, 140, 248, 0.22) 38%,
        rgba(74, 222, 128, 0.12) 58%,
        transparent 72%
    );
    filter: blur(6px);
    animation: sz-nav-aurora-breathe 4.5s ease-in-out infinite;
}

@keyframes sz-nav-aurora-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sz-nav-aurora-wave-1 {
    0%,
    100% {
        transform: rotate(-6deg) scale(0.96);
        border-radius: 46% 54% 51% 49% / 49% 51% 54% 46%;
        opacity: 0.42;
    }
    33% {
        transform: rotate(8deg) scale(1.04) skewX(-3deg);
        border-radius: 52% 48% 47% 53% / 54% 46% 52% 48%;
        opacity: 0.58;
    }
    66% {
        transform: rotate(-4deg) scale(1.02) skewY(2deg);
        border-radius: 48% 52% 55% 45% / 47% 53% 49% 51%;
        opacity: 0.5;
    }
}

@keyframes sz-nav-aurora-wave-2 {
    0%,
    100% {
        transform: rotate(5deg) scale(1.02);
        border-radius: 50% 50% 48% 52% / 52% 48% 50% 50%;
        opacity: 0.36;
    }
    50% {
        transform: rotate(-10deg) scale(0.94);
        border-radius: 44% 56% 53% 47% / 50% 50% 46% 54%;
        opacity: 0.52;
    }
}

@keyframes sz-nav-aurora-breathe {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.92);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.06);
    }
}

html[data-theme="light"] .sz-nav-avatar__aurora-ring {
    opacity: 0.58;
    filter: blur(9px);
}

html[data-theme="light"] .sz-nav-avatar__aurora-sheet {
    mix-blend-mode: multiply;
    opacity: 0.38;
}

html[data-theme="light"] .sz-nav-avatar__aurora-sheet--1 {
    opacity: 0.44;
}

html[data-theme="light"] .sz-nav-avatar__aurora-core {
    opacity: 0.65;
}

.sz-nav-avatar:hover .sz-nav-avatar__aura,
.sz-nav-avatar:focus-visible .sz-nav-avatar__aura {
    --sz-aurora-scale: 1.04;
}

.sz-nav-avatar:hover .sz-nav-avatar__aurora-ring,
.sz-nav-avatar:focus-visible .sz-nav-avatar__aurora-ring {
    opacity: 0.88;
}

.sz-nav-avatar:hover .sz-nav-avatar__disk,
.sz-nav-avatar:focus-visible .sz-nav-avatar__disk {
    border-color: rgba(0, 0, 0, 0.35);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(56, 189, 248, 0.3),
        0 0 28px rgba(129, 140, 248, 0.18);
}

.sz-nav-avatar__disk {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--sz-nav-avatar-size);
    height: var(--sz-nav-avatar-size);
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(0, 0, 0, 0.35);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    transform: translateY(var(--sz-nav-avatar-shift-y));
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

html[data-theme="light"] .sz-nav-avatar__disk {
    border-color: rgba(0, 28, 10, 0.35);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.32),
        inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.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;
}

/* 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--28 {
    width: 1.75rem;
    height: 1.75rem;
}

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

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

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

/* Board-Gruppenstrip (≈36px) */
.sz-avatar--36 {
    width: 2.25rem;
    height: 2.25rem;
}

.sz-avatar--36 .sz-avatar__letter {
    font-size: 0.82rem;
}

.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;
}

/* Listen „Meine Gruppen“ / Profil (≈48px, 2×-Thumbs 112px) */
.sz-avatar--48 {
    width: 3rem;
    height: 3rem;
}

.sz-avatar--56 {
    width: 3.5rem;
    height: 3.5rem;
}

.sz-avatar--56 .sz-avatar__letter {
    font-size: 1.1rem;
}

.sz-avatar--72 {
    width: 4.5rem;
    height: 4.5rem;
}

.sz-avatar--72 .sz-avatar__letter {
    font-size: 1.35rem;
}

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

.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;
}

/* Rollen-Badge (ADMIN / MOD) – dezenter Balken am unteren Avatar-Rand, vom runden Rahmen sauber beschnitten.
   Schriftgröße am Balken-Container → konsistente em-Abstände je Avatar-Größe. */
.sz-avatar__role {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0.55em 0 0.18em;
    font-size: 0.4rem;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.sz-avatar__role-text {
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.55);
}

.sz-avatar--role-admin .sz-avatar__role {
    background: linear-gradient(180deg, rgba(245, 197, 66, 0) 0%, rgba(214, 158, 30, 0.82) 52%, rgba(170, 116, 10, 0.96) 100%);
}

.sz-avatar--role-mod .sz-avatar__role {
    background: linear-gradient(180deg, rgba(96, 162, 255, 0) 0%, rgba(40, 112, 226, 0.82) 52%, rgba(24, 84, 188, 0.96) 100%);
}

/* leichter Glanzrand oben am sichtbaren Balken */
.sz-avatar--role .sz-avatar__role::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 1.25em;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
}

/* Größenabstufung der Badge-Schrift passend zum Avatar */
.sz-avatar--28 .sz-avatar__role,
.sz-avatar--32 .sz-avatar__role,
.sz-avatar--36 .sz-avatar__role,
.sz-avatar--wa .sz-avatar__role,
.sz-avatar--nav .sz-avatar__role {
    font-size: 0.34rem;
    letter-spacing: 0.01em;
}

.sz-avatar--44 .sz-avatar__role {
    font-size: 0.44rem;
}

.sz-avatar--chatlist .sz-avatar__role {
    font-size: 0.5rem;
}

.sz-avatar--96 .sz-avatar__role {
    font-size: 0.95rem;
}

/* 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,
button.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: oben in der Leiste ausgerichtet, unten leicht über den Rand */
.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: var(--sz-logo-header-max-width);
    aspect-ratio: var(--sz-logo-wordmark-ratio);
    object-fit: contain;
    transform: translateY(1px);
    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-logo__wrap {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    line-height: 0;
}

/* Wordmark allein bestimmt Breite/Höhe; Saison-Avatar liegt absolut dahinter (Z) */
.sz-logo__wrap--has-season {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.sz-logo--has-season {
    overflow: visible;
}

.sz-logo__wrap--has-season .sz-logo__img {
    position: relative;
    z-index: 3;
    display: block;
}

.sz-logo__season-mark {
    position: absolute;
    left: 0;
    bottom: 0.1rem;
    z-index: 1;
    width: var(--sz-logo-season-size-rest);
    height: var(--sz-logo-season-size-rest);
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--sz-topbar-border, rgba(255, 255, 255, 0.35));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38);
    background: var(--sz-body-bg, #0a1a10);
    pointer-events: none;
    transform-origin: left bottom;
    left: 35px;
    transition:
        width 0.45s ease,
        height 0.45s ease,
        box-shadow 0.45s ease;
}

.sz-topbar.is-scrolled .sz-logo__season-mark {
    width: var(--sz-logo-season-size-compact);
    height: var(--sz-logo-season-size-compact);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.sz-logo__season-mark-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-sz-season-avatar="1"]::before {
    background-image: var(--sz-season-watermark), url("/assets/images/logos/szoccer-logo_01_trans.png");
    background-size: contain, contain;
    opacity: var(--sz-watermark-opacity, 0.1);
    filter: var(--sz-watermark-filter, blur(14px));
}

html[data-theme="light"] body[data-sz-season-avatar="1"]::before {
    opacity: 0.07;
}

.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: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: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);
}

/* Nach-oben-Button (Desktop + Mobil/App) */
.sz-scroll-top {
    display: none;
}

@media (max-width: 560px) {
    .sz-scroll-top {
        display: inline-flex;
        position: fixed;
        z-index: 880;
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        bottom: calc(
            var(--sz-bottom-nav-h, 2.75rem)
            + env(safe-area-inset-bottom, 0px)
            + 0.65rem
        );
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(241, 116, 50, 0.38);
        border-radius: 999px;
        background: linear-gradient(
            160deg,
            rgba(0, 44, 16, 0.88) 0%,
            rgba(0, 28, 12, 0.92) 100%
        );
        color: #f4f1e8;
        cursor: pointer;
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.35rem);
        pointer-events: none;
        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease,
            border-color 0.15s ease,
            box-shadow 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    html[data-theme="light"] .sz-scroll-top {
        background: linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(248, 250, 252, 0.9) 100%
        );
        color: #0a3c14;
        border-color: rgba(241, 116, 50, 0.32);
        box-shadow:
            0 4px 14px rgba(0, 40, 10, 0.12),
            0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    }

    .sz-scroll-top.is-visible {
        opacity: 0.92;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .sz-scroll-top:active {
        transform: scale(0.96);
    }

    .sz-scroll-top.is-visible:active {
        transform: scale(0.96);
    }

    .sz-scroll-top:focus-visible {
        outline: 2px solid rgba(241, 116, 50, 0.75);
        outline-offset: 3px;
    }

    body.page-chat-room .sz-scroll-top,
    html.sz-keyboard-open .sz-scroll-top,
    body.sz-section-nav-fab-open .sz-scroll-top,
    body:not(.sz-has-bottom-nav) .sz-scroll-top {
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 561px) {
    .sz-scroll-top {
        display: inline-flex;
        position: fixed;
        z-index: 580;
        right: max(1.1rem, env(safe-area-inset-right, 0px));
        bottom: max(1.15rem, env(safe-area-inset-bottom, 0px));
        width: 2.65rem;
        height: 2.65rem;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(56, 189, 248, 0.35);
        border-radius: 999px;
        background:
            linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.88));
        color: #e2e8f0;
        cursor: pointer;
        box-shadow:
            0 4px 16px rgba(15, 23, 42, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.45rem);
        pointer-events: none;
        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease,
            border-color 0.15s ease,
            box-shadow 0.15s ease,
            background 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    html[data-theme="light"] .sz-scroll-top {
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
        color: #0f172a;
        border-color: rgba(14, 116, 144, 0.28);
        box-shadow:
            0 4px 16px rgba(15, 23, 42, 0.12),
            0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    }
    .sz-scroll-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    .sz-scroll-top:hover {
        border-color: rgba(56, 189, 248, 0.55);
        box-shadow:
            0 6px 20px rgba(15, 23, 42, 0.32),
            0 0 0 1px rgba(56, 189, 248, 0.15) inset;
    }
    html[data-theme="light"] .sz-scroll-top:hover {
        border-color: rgba(14, 116, 144, 0.45);
    }
    .sz-scroll-top:focus-visible {
        outline: 2px solid rgba(56, 189, 248, 0.75);
        outline-offset: 3px;
    }
}

.sz-scroll-top__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
    .sz-scroll-top {
        transition: opacity 0.01s, visibility 0.01s;
    }

    .sz-scroll-top:active,
    .sz-scroll-top.is-visible:active {
        transform: none;
    }
}

@media (min-width: 561px) and (prefers-reduced-motion: reduce) {
    .sz-scroll-top {
        transition: opacity 0.01s, visibility 0.01s;
    }
}

.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-kicker-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;
    width: 100%;
    margin: 0 0 clamp(1rem, 3vw, 1.35rem);
}
.sz-home-brand__stack {
    width: min(100%, 20rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
/* Mit Saison: volle Breite des Inhaltsbereichs */
.sz-home-brand__stack--season {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(
        168deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(0, 45, 20, 0.42) 100%
    );
    box-shadow:
        0 14px 42px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(241, 116, 50, 0.12) inset;
}
html[data-theme="light"] .sz-home-brand__stack--season {
    border-color: rgba(0, 90, 40, 0.18);
    background: linear-gradient(168deg, #ffffff 0%, #f2faf4 48%, #fff8f2 100%);
    box-shadow:
        0 12px 36px rgba(0, 50, 20, 0.12),
        0 0 0 1px rgba(241, 116, 50, 0.14) inset;
}
.sz-home-brand__stack--season .sz-home-brand__link {
    display: flex;
    justify-content: center;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="light"] .sz-home-brand__stack--season .sz-home-brand__link {
    border-bottom-color: rgba(0, 90, 40, 0.1);
    box-shadow: none;
}
.sz-home-brand__stack--season .sz-home-brand__link:hover {
    transform: none;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(0, 50, 22, 0.4) 100%
    );
}
html[data-theme="light"] .sz-home-brand__stack--season .sz-home-brand__link:hover {
    background: linear-gradient(165deg, #ffffff 0%, #e8f5ec 55%, #fff4ea 100%);
    box-shadow: none;
}
.sz-home-brand__season {
    position: relative;
    padding: 0.95rem 1.1rem 1.05rem;
    text-align: center;
    background: linear-gradient(
        180deg,
        rgba(241, 116, 50, 0.12) 0%,
        rgba(0, 80, 35, 0.22) 100%
    );
}
.sz-home-brand__season::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--sz-orange, #f17432) 22%,
        rgba(255, 255, 255, 0.65) 50%,
        var(--sz-orange, #f17432) 78%,
        transparent 100%
    );
    opacity: 0.85;
}
html[data-theme="light"] .sz-home-brand__season {
    background: linear-gradient(
        180deg,
        rgba(241, 116, 50, 0.08) 0%,
        rgba(228, 245, 232, 0.95) 55%,
        rgba(255, 248, 240, 0.98) 100%
    );
}
.sz-home-brand__kicker {
    display: inline-block;
    margin: 0 0 0.55rem;
    padding: 0.22em 0.72em;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #ff8f45 0%, var(--sz-orange, #f17432) 55%, #d45a14 100%);
    border-radius: 999px;
    box-shadow:
        0 2px 8px rgba(241, 116, 50, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.sz-home-brand__title {
    margin: 0;
    font-size: clamp(0.92rem, 3.4vw, 1.15rem);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.01em;
}
.sz-home-brand__title-link {
    color: var(--sz-green, #0a5c28);
    text-decoration: none;
    transition: color 0.15s ease;
}
html[data-theme="dark"] .sz-home-brand__title-link {
    color: var(--sz-st-label, #d8efd8);
}
.sz-home-brand__title-link:hover {
    color: var(--sz-orange, #f17432);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.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);
}

.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);
}
.sz-home-brand__stack:not(.sz-home-brand__stack--season) .sz-home-brand__link:hover {
    transform: translateY(-2px);
}
html[data-theme="light"] .sz-home-brand__link:hover {
    box-shadow: 0 12px 32px rgba(0, 50, 20, 0.14);
}
html[data-theme="light"] .sz-home-brand__stack:not(.sz-home-brand__stack--season) .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__stack--season .sz-home-brand__logo {
    width: min(280px, 42vw);
    margin: 0 auto;
}
@media (min-width: 640px) {
    .sz-home-brand__stack--season .sz-home-brand__logo {
        width: min(300px, 38%);
    }
    .sz-home-brand__title {
        font-size: clamp(1rem, 2.2vw, 1.28rem);
    }
}
.sz-home-brand__logo {
    display: block;
    width: min(300px, 88vw);
    height: auto;
    aspect-ratio: var(--sz-logo-wordmark-ratio);
    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 {
    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 im Hero (24 h zurück · 36 h voraus) */
.sz-home-matches {
    margin: 0.75rem 0;
    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 {
    position: relative;
    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__score-stack {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 2.75rem;
    padding: 0 0.25rem;
}
.sz-home-match__score-stack > .sz-home-match__score {
    min-width: 0;
    padding: 0;
}
.sz-home-match__my-tip {
    position: absolute;
    right: 0.45rem;
    bottom: 0.28rem;
    left: auto;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.06rem;
    max-width: min(9rem, 42vw);
    padding: 0.1rem 0.42rem 0.12rem;
    border-radius: 10px;
    border: 1px solid rgba(241, 116, 50, 0.38);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 244, 236, 0.98) 55%,
        rgba(255, 230, 214, 0.96) 100%
    );
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 1px 6px rgba(241, 116, 50, 0.16);
    color: var(--sz-orange);
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.sz-home-match__score-stack--with-tip {
    gap: 0.14rem;
    min-width: 3.1rem;
}
.sz-home-match__score-stack .sz-home-match__my-tip {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    align-items: center;
    max-width: none;
    margin-top: 0.06rem;
    padding: 0.16rem 0.52rem 0.18rem;
    gap: 0.1rem;
    font-size: 0.6rem;
    line-height: 1.2;
    white-space: normal;
}
.sz-home-match__score-stack .sz-home-match__my-tip-label {
    font-size: 0.5rem;
}
.sz-home-match__score-stack .sz-home-match__my-tip-score {
    font-size: 0.72rem;
}
.page-home .sz-home-match__score-stack .sz-home-match__my-tip-stars .sz-tip-star {
    font-size: 0.64rem;
}
.sz-home-match:has(> .sz-home-match__my-tip) .sz-home-match__link {
    padding-bottom: 0.32rem;
    padding-right: 0.35rem;
}
html[data-theme="dark"] .sz-home-match__my-tip {
    border-color: rgba(241, 116, 50, 0.5);
    background: linear-gradient(
        135deg,
        rgba(28, 42, 30, 0.96) 0%,
        rgba(38, 52, 34, 0.98) 55%,
        rgba(52, 38, 28, 0.96) 100%
    );
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 1px 8px rgba(0, 0, 0, 0.32);
    color: #ffb07a;
}
.sz-home-match__my-tip-label {
    font-size: 0.46rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.82;
}
.sz-home-match__my-tip-row {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
}
.sz-home-match__my-tip-stars {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.page-home .sz-home-match__my-tip-stars .sz-tip-star {
    font-size: 0.58rem;
}
.page-home .sz-home-match__my-tip-stars .sz-tip-zero {
    transform: scale(0.68);
    transform-origin: center center;
}
.page-home .sz-home-match__my-tip-stars .sz-tip-score-details__summary {
    padding: 0;
    list-style: none;
}
/* KO-Wertung (T·D·E·ZS·ZE) ist breiter als die Liga-Wertung: Die Legende der
   am rechten Kartenrand verankerten Tipp-Box nach links aufklappen und umbrechen
   lassen, sonst läuft sie rechts über den Kartenrand hinaus und wird abgeschnitten. */
.sz-home-match__my-tip .sz-tip-score-details__body {
    left: auto;
    right: 0;
    transform: none;
    max-width: min(15rem, 80vw);
    white-space: normal;
}
.sz-home-match__my-tip--empty {
    border-style: dashed;
    border-color: rgba(107, 114, 128, 0.35);
    background: rgba(107, 114, 128, 0.08);
    color: var(--sz-muted, #6b7280);
}
.sz-home-match__my-tip--pending {
    border-style: solid;
    border-color: rgba(232, 93, 4, 0.45);
    background: rgba(232, 93, 4, 0.1);
    color: var(--sz-orange, #e85d04);
}
html[data-theme="dark"] .sz-home-match__my-tip--pending {
    border-color: rgba(241, 116, 50, 0.42);
    background: rgba(241, 116, 50, 0.12);
    color: #ffb07a;
}
.sz-home-match--tip-pending .sz-home-match__link {
    box-shadow: inset 0 0 0 1px rgba(232, 93, 4, 0.18);
}
html[data-theme="dark"] .sz-home-match__my-tip--empty {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
}
.sz-home-match__my-tip-missing {
    font-size: 0.58rem;
    font-weight: 700;
    font-style: italic;
    opacity: 0.88;
}
.sz-home-match__my-tip-score {
    font-variant-numeric: tabular-nums;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.03em;
}
.sz-home-match__my-tip-colon {
    opacity: 0.72;
    padding: 0 0.03rem;
}
.sz-home-match__my-tip-extra {
    font-size: 0.46rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.88;
    padding-left: 0.1rem;
    border-left: 1px solid rgba(241, 116, 50, 0.28);
}
/* Wenn der Extra-Bereich die KO-Zusatztipp-Chips trägt, normalen Textfluss erlauben. */
.sz-home-match__my-tip-extra:has(.sz-ko-tip) {
    text-transform: none;
    letter-spacing: 0;
    padding-left: 0.16rem;
    white-space: normal;
}

/* === KO-Zusatztipp-Chips (Ende nach n.V./Elfmeter + getippter Sieger) ============== */
.sz-ko-tip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    vertical-align: middle;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}
.sz-ko-tip__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.06rem 0.44rem 0.08rem 0.36rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
.sz-ko-tip__ic {
    flex: 0 0 auto;
    width: 0.85em;
    height: 0.85em;
    opacity: 0.95;
}
.sz-ko-tip__tx {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sz-ko-tip__chip--end {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.26);
}
.sz-ko-tip__chip--win {
    color: #b45309;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(245, 158, 11, 0.14));
    border-color: rgba(217, 119, 6, 0.34);
}
.sz-ko-tip__chip--win .sz-ko-tip__ic {
    color: #d97706;
}
html[data-theme="dark"] .sz-ko-tip__chip--end {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.20);
    border-color: rgba(59, 130, 246, 0.42);
}
html[data-theme="dark"] .sz-ko-tip__chip--win {
    color: #fcd34d;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.24), rgba(217, 119, 6, 0.20));
    border-color: rgba(251, 191, 36, 0.42);
}
html[data-theme="dark"] .sz-ko-tip__chip--win .sz-ko-tip__ic {
    color: #fcd34d;
}
/* Variante Startseite: ein einzelner, kompakter Chip in einer Zeile,
   damit die absolut positionierte Tipp-Box klein bleibt und nicht überlappt. */
.sz-ko-tip--home {
    gap: 0.14rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.sz-ko-tip--home .sz-ko-tip__chip {
    font-size: 0.5rem;
    padding: 0.02rem 0.3rem 0.04rem 0.24rem;
    gap: 0.12rem;
}
.sz-ko-tip--home .sz-ko-tip__ic {
    width: 0.92em;
    height: 0.92em;
}
.sz-ko-tip--home .sz-ko-tip__tx {
    max-width: 4.5rem;
}
/* Variante Kompaktansicht */
.sz-ko-tip--compact {
    justify-content: center;
}
.sz-ko-tip--compact .sz-ko-tip__chip {
    font-size: 0.62rem;
}
/* Variante Tabellen (Gruppen-/Fremdtipps) */
.sz-ko-tip--table .sz-ko-tip__chip {
    font-size: 0.62rem;
}

/* Einbettung in die einzelnen Ansichten */
.sz-compact-match__ko-extra {
    display: flex;
    justify-content: center;
    margin-top: 0.18rem;
}
.sz-md-group-table__ko-extra {
    margin-top: 0.22rem;
}
.sz-tips-table__tip-score {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}
.sz-tips-table__ko-extra {
    display: block;
    margin-top: 0.18rem;
}
/* KO-Tabelle: Tipp-Spalte darf für die Chips breiter werden + umbrechen */
.sz-tips-table--ko .sz-tips-table__tip {
    width: auto;
    min-width: 5rem;
    white-space: normal;
}
@media (max-width: 520px) {
    .sz-home-match__my-tip {
        right: 0.35rem;
        bottom: 0.22rem;
        max-width: min(8rem, 46vw);
    }
}

.page-tippspiel .sz-match--live-tip .sz-match__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.page-tippspiel .sz-board-match__my-tip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    max-width: 100%;
    padding: 0.14rem 0.5rem 0.16rem;
    border-radius: 10px;
    border: 1px solid rgba(241, 116, 50, 0.35);
    background: rgba(241, 116, 50, 0.08);
    color: var(--sz-orange, #e85d04);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.2;
}

.page-tippspiel .sz-board-match__my-tip-label {
    font-size: 0.48rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.82;
}

.page-tippspiel .sz-board-match__my-tip-row {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.page-tippspiel .sz-board-match__my-tip-score {
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 900;
}

.page-tippspiel .sz-board-match__my-tip--empty {
    border-style: dashed;
    border-color: rgba(107, 114, 128, 0.35);
    background: rgba(107, 114, 128, 0.08);
    color: var(--sz-muted, #6b7280);
}

.page-tippspiel .sz-board-match__my-tip-missing {
    font-size: 0.62rem;
    font-weight: 700;
    font-style: italic;
}

.page-tippspiel .sz-my-tipp--provisional {
    border-style: dashed;
    border-color: rgba(241, 116, 50, 0.35);
}

.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__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.sz-news__head .sz-block-title {
    margin: 0;
}
.sz-news-admin__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}
.sz-news-admin-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sz-news-admin-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--sz-news-more-border);
}
.sz-news-admin-list__item:last-child {
    border-bottom: 0;
}
.sz-news-admin-list__main {
    flex: 1;
    min-width: 12rem;
}
.sz-news-admin-list__main time {
    display: block;
    font-size: 0.78rem;
    opacity: 0.7;
    margin-bottom: 0.2rem;
}
.sz-news-admin-list__title {
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}
.sz-news-admin-list__title:hover {
    color: var(--sz-orange, #f17432);
}
.sz-news-admin-list__view {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: var(--sz-orange, #f17432);
}
.page-news-admin .sz-news-admin-form,
.page-news-admin .sz-news-admin-list {
    max-width: none;
    width: 100%;
}
.page-news-admin .sz-hero--compact {
    max-width: none;
    width: 100%;
}
.sz-news-admin-form__notify {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.75rem 0 0;
    font-weight: 600;
    cursor: pointer;
}
.sz-news-admin-form__notify input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.sz-news-admin-form__notify-hint {
    margin: 0.35rem 0 0;
}
.sz-news-admin-form__preview {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px dashed var(--sz-match-card-border, rgba(255, 255, 255, 0.2));
}
.sz-news-admin-form__preview-body {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.45rem;
    background: rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .sz-news-admin-form__preview-body {
    background: rgba(0, 60, 10, 0.04);
}
.sz-news-admin-form__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.sz-news-admin-form__delete {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--sz-match-card-border, rgba(255, 255, 255, 0.18));
}
.sz-btn--danger {
    color: #e85d4a;
}
.sz-btn--sm {
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
}
.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-form-input-fg, var(--sz-body-color));
    background: var(--sz-form-input-bg, rgba(0, 0, 0, 0.35));
    border-color: var(--sz-form-input-border, 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,
.page-news-admin .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: calc(var(--sz-topbar-row-height, 3.25rem) + var(--sz-logo-overhang, 0px) + 0.75rem);
    z-index: 2;
    align-self: start;
}

.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: calc(var(--sz-topbar-row-height, 3.25rem) + var(--sz-logo-overhang, 0px) + 0.75rem);
}

#rivalen,
#tippgruppen {
    scroll-margin-top: calc(var(--sz-topbar-row-height, 3.25rem) + var(--sz-logo-overhang, 0px) + 0.75rem);
}

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

/* Mobil: Schublade mit Rand-Tab (rechte Kante des Nav-Panels) */
.sz-section-nav-drawer {
    display: none;
    --sz-nav-tab-w: 1.75rem;
    --sz-edge-nav-panel-bg: linear-gradient(
        165deg,
        rgba(12, 28, 16, 0.98) 0%,
        rgba(6, 18, 10, 0.99) 100%
    );
    --sz-edge-nav-panel-border: rgba(255, 255, 255, 0.12);
    --sz-edge-nav-tab-shadow: 4px 0 22px rgba(0, 0, 0, 0.38);
    --sz-edge-nav-tab-grip: rgba(255, 255, 255, 0.52);
    --sz-edge-nav-tab-grip-shadow: -5px 0 0 rgba(255, 255, 255, 0.32), 5px 0 0 rgba(255, 255, 255, 0.32);
}

html[data-theme="light"] .sz-section-nav-drawer {
    --sz-edge-nav-panel-bg: linear-gradient(
        165deg,
        rgba(0, 44, 16, 0.98) 0%,
        rgba(0, 60, 10, 0.97) 100%
    );
    --sz-edge-nav-panel-border: var(--sz-topbar-border, rgba(0, 60, 10, 0.14));
    --sz-edge-nav-tab-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    --sz-edge-nav-tab-grip: rgba(255, 255, 255, 0.58);
    --sz-edge-nav-tab-grip-shadow: -5px 0 0 rgba(255, 255, 255, 0.38), 5px 0 0 rgba(255, 255, 255, 0.38);
}

/* Profil/Regeln Mobil: Karteikarten-Tab am rechten Panelrand */
.sz-section-nav-edge-tab {
    flex: 0 0 var(--sz-nav-tab-w, 1.75rem);
    width: var(--sz-nav-tab-w, 1.75rem);
    min-height: 4.85rem;
    max-height: 38vh;
    padding: 0.45rem 0.14rem 0.45rem 0.1rem;
    margin: 0;
    border: none;
    border-radius: 0 12px 12px 0;
    background: var(--sz-edge-nav-panel-bg);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--sz-edge-nav-tab-shadow);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 0.35rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.sz-section-nav-edge-tab__grip {
    width: 3px;
    height: 1.45rem;
    border-radius: 999px;
    background: var(--sz-edge-nav-tab-grip, rgba(255, 255, 255, 0.55));
    box-shadow: var(--sz-edge-nav-tab-grip-shadow, -5px 0 0 rgba(255, 255, 255, 0.35), 5px 0 0 rgba(255, 255, 255, 0.35));
}

.sz-section-nav-edge-tab__label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0.98;
}

.sz-section-nav-edge-tab:hover {
    filter: brightness(1.05);
}

.sz-section-nav-edge-tab:active {
    filter: brightness(0.97);
}

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

.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,
.sz-profile-layout--edge-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--edge-nav-mobile .sz-section-nav-fab {
        display: none !important;
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        align-content: stretch;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        min-height: 100%;
        z-index: 610;
        max-width: 100vw;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateX(calc(-100% + var(--sz-nav-tab-w, 1.75rem)));
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        touch-action: pan-y;
        will-change: transform;
    }

    .sz-profile-layout--edge-nav-mobile.sz-section-nav-fab-open .sz-section-nav-drawer {
        transform: translateX(0);
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer.is-dragging {
        transition: none;
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-section-nav-edge-tab {
        display: flex;
        z-index: 2;
        align-self: center;
        min-height: 4.85rem;
        max-height: 38vh;
        height: auto;
        flex-shrink: 0;
        border-radius: 0 12px 12px 0;
        box-shadow: var(--sz-edge-nav-tab-shadow);
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-profile-nav--float-mobile {
        position: static;
        flex: 1 1 auto;
        align-self: stretch;
        width: min(18rem, calc(90vw - var(--sz-nav-tab-w, 1.75rem)));
        max-width: calc(100vw - var(--sz-nav-tab-w, 1.75rem));
        min-height: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto;
        display: flex !important;
        flex-direction: column;
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-profile-nav--float-mobile .sz-profile-nav__inner {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        height: 100%;
        border-radius: 0;
        border-right: 0;
        background: var(--sz-edge-nav-panel-bg);
        border-color: var(--sz-edge-nav-panel-border);
        box-shadow: none;
    }

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

    html[data-theme="light"] .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-profile-nav--float-mobile .sz-profile-nav__inner {
        background: var(--sz-edge-nav-panel-bg);
        border-color: var(--sz-edge-nav-panel-border);
        color: var(--sz-nav-color);
    }

    html[data-theme="dark"] .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-profile-nav--float-mobile .sz-profile-nav__inner {
        background: var(--sz-edge-nav-panel-bg);
        border-color: var(--sz-edge-nav-panel-border);
    }

    .sz-profile-layout--edge-nav-mobile.sz-section-nav-fab-open .sz-section-nav-drawer {
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.34);
    }

    html[data-theme="light"] .sz-profile-layout--edge-nav-mobile.sz-section-nav-fab-open .sz-section-nav-drawer {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }

    .sz-profile-layout--float-nav-mobile .sz-profile-nav--float-mobile:not(.sz-profile-nav--edge-drawer) {
        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:not(.sz-profile-nav--edge-drawer),
    .sz-profile-layout--edge-nav-mobile.sz-section-nav-fab-open .sz-section-nav-drawer .sz-profile-nav--float-mobile {
        display: block !important;
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
    }

    .sz-profile-layout--float-nav-mobile.sz-section-nav-fab-open.sz-profile-layout--nav-hidden .sz-profile-nav--float-mobile:not(.sz-profile-nav--edge-drawer),
    .sz-profile-layout--edge-nav-mobile.sz-section-nav-fab-open.sz-profile-layout--nav-hidden .sz-section-nav-drawer .sz-profile-nav--float-mobile {
        display: block !important;
    }

    .sz-profile-layout--edge-nav-mobile.sz-profile-layout--nav-hidden .sz-section-nav-drawer .sz-profile-nav--edge-drawer {
        display: block !important;
    }

    .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;
    }
}

/* Edge-Drawer (Profil, Regeln): Desktop = klassische Sidebar, kein Rand-Tab */
@media (min-width: 769px) {
    .sz-profile-layout--edge-nav-mobile {
        align-items: start;
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-fab__backdrop {
        display: none !important;
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer {
        display: block;
        position: sticky;
        top: calc(var(--sz-topbar-row-height, 3.25rem) + var(--sz-logo-overhang, 0px) + 0.75rem);
        align-self: start;
        z-index: 2;
        width: auto;
        max-width: none;
        max-height: calc(100vh - var(--sz-topbar-row-height, 3.25rem) - var(--sz-logo-overhang, 0px) - 1.5rem);
        padding: 0;
        transform: none !important;
        will-change: auto;
        touch-action: auto;
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer.is-dragging {
        transition: none;
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-section-nav-edge-tab {
        display: none !important;
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-profile-nav--edge-drawer {
        position: static;
        width: auto;
        max-width: none;
        max-height: inherit;
        margin: 0;
        padding: 0;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto;
        display: flex !important;
        flex-direction: column;
    }

    .sz-profile-layout--edge-nav-mobile.sz-profile-layout--nav-hidden .sz-section-nav-drawer {
        display: none !important;
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-profile-nav--edge-drawer .sz-profile-nav__inner {
        height: auto;
        max-height: inherit;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        border-radius: 12px;
        border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
        box-shadow: var(--sz-match-card-shadow, none);
        overflow: hidden;
    }

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

    html[data-theme="dark"] .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-profile-nav--edge-drawer .sz-profile-nav__inner {
        background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.45));
        border-color: rgba(255, 255, 255, 0.12);
    }

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

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-profile-nav--edge-drawer .sz-profile-nav__list {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.2rem;
    }

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-profile-nav--edge-drawer .sz-profile-nav__link {
        border-left: 3px solid transparent;
        border-bottom: 0;
        padding: 0.45rem 0.6rem;
        font-size: 0.92rem;
        line-height: 1.35;
        min-height: 0;
        display: block;
    }

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

    .sz-profile-layout--edge-nav-mobile .sz-section-nav-drawer .sz-profile-nav--edge-drawer .sz-profile-nav__head {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .sz-profile-nav--float-mobile,
    .sz-section-nav-drawer,
    .sz-section-nav-fab__backdrop,
    .sz-section-nav-edge-tab {
        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-i18n-fields__intro {
    margin: 0 0 1rem;
}

.sz-i18n-fields__locale {
    margin: 0 0 1.35rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--sz-border, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .sz-i18n-fields__locale {
    background: rgba(255, 255, 255, 0.03);
}

.sz-i18n-fields__locale-title {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sz-green);
}

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

.sz-i18n-fields__optional {
    font-weight: 400;
    font-size: 0.85em;
    opacity: 0.75;
}

.sz-mail-admin-sent {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sz-mail-admin-sent__item {
    margin: 0 0 0.65rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--sz-border, rgba(255, 255, 255, 0.1));
}

.sz-mail-admin-sent__item a {
    text-decoration: none;
}

.sz-mail-admin-sent__meta {
    display: block;
    font-size: 0.85rem;
    opacity: 0.75;
    margin-top: 0.2rem;
}

.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.85rem, 1fr));
    gap: 0.28rem;
    max-width: 36rem;
}

/* Tippgruppen: feste Kachelgröße, Raster bricht bei Bedarf (mehr Spalten) */
.sz-tg-avatar-presets {
    width: 100%;
    max-width: none;
}

.sz-tg-avatar-presets-grid {
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 4.5rem));
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    justify-content: start;
}

.sz-tg-avatar-presets-grid .sz-avatar-preset-tile {
    width: auto;
    padding: 0.12rem;
}

.sz-tg-avatar-presets-grid .sz-avatar-preset-tile__img {
    width: 4.5rem;
    height: 4.5rem;
    max-width: 4.5rem;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
}

.sz-avatar-preset-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    border-radius: 0.5rem;
    padding: 0.08rem;
    background: transparent;
    box-shadow: none;
    font: inherit;
    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.is-selected,
.sz-avatar-preset-tile[aria-pressed="true"] {
    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.is-selected,
html[data-theme="dark"] .sz-avatar-preset-tile[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--sz-st-label, #b2dfdb);
    background: rgba(178, 223, 219, 0.1);
}

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

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;
}

/* „NEW“-Aufkleber (Posteingang, News < 3 Tage) – runder Sticker mit abgelöster Ecke */
.sz-new-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.55rem;
    height: 2.55rem;
    padding: 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: middle;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    background: radial-gradient(circle at 32% 28%, #ff9a58 0%, var(--sz-orange, #f17432) 52%, #c85a12 100%);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.38);
    box-shadow:
        0 3px 10px rgba(241, 116, 50, 0.42),
        0 1px 0 rgba(255, 255, 255, 0.28) inset;
    transform: rotate(8deg);
    transform-origin: center center;
    z-index: 0;
    overflow: visible;
}
/* Schatten unter der abgelösten Ecke */
.sz-new-badge::before {
    content: "";
    position: absolute;
    right: 0.05rem;
    bottom: 0.2rem;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 40% 0 50% 0;
    background: rgba(0, 0, 0, 0.14);
    filter: blur(2px);
    transform: rotate(-8deg);
    pointer-events: none;
    z-index: 0;
}
/* Angedeutete abgelöste Ecke (Unterseite / Papier) */
.sz-new-badge::after {
    content: "";
    position: absolute;
    right: -0.05rem;
    bottom: 0.28rem;
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 48% 0 52% 0;
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(248, 242, 232, 0.94) 42%,
        rgba(218, 208, 192, 0.9) 100%
    );
    box-shadow:
        -2px -2px 5px rgba(0, 0, 0, 0.2),
        inset 1px 1px 0 rgba(255, 255, 255, 0.85);
    transform: rotate(-14deg);
    pointer-events: none;
    z-index: 1;
}
html[data-theme="light"] .sz-new-badge::after {
    background: linear-gradient(
        155deg,
        #fff 0%,
        #f5f0e8 45%,
        #e0d6c8 100%
    );
}
.sz-mail-list__subject-row,
.sz-mail-read__subject-row,
.sz-news-card__title-row,
.sz-news-hero__title-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    min-width: 0;
}
.sz-mail-list__subject-row {
    flex: 1;
    min-width: 0;
}
.sz-mail-list__subject-row .sz-mail-list__subject {
    min-width: 0;
}
.sz-news-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.7rem;
    margin-bottom: 0.5rem;
}
.sz-news-card__title-row .sz-news-card__title {
    margin: 0;
    flex: 1;
    min-width: 0;
}
.sz-news-hero__title-row {
    display: inline-flex;
}

.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__row {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}
.sz-mail-list__row > .sz-mail-list__link {
    flex: 1;
    min-width: 0;
}
.sz-mail-list__delete {
    margin: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.sz-mail-list__delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    min-height: 2.65rem;
    align-self: center;
    padding: 0;
    margin: 0;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.82));
    color: var(--sz-match-meta, #9ab09a);
    cursor: pointer;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}
.sz-mail-list__delete-btn:hover,
.sz-mail-list__delete-btn:focus-visible {
    color: #f17432;
    border-color: rgba(241, 116, 50, 0.45);
    background: rgba(241, 116, 50, 0.12);
    outline: none;
}
html[data-theme="light"] .sz-mail-list__delete-btn {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 60, 10, 0.12);
    color: #6a7a6a;
}
html[data-theme="light"] .sz-mail-list__delete-btn:hover,
html[data-theme="light"] .sz-mail-list__delete-btn:focus-visible {
    color: #c45c12;
    background: rgba(241, 116, 50, 0.1);
}
.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-kind--push {
    background: linear-gradient(145deg, #3d2060 0%, #7b4bb8 50%, #4a2870 100%);
}
.sz-mail-inbox__section-title {
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
}
.sz-mail-inbox__section-hint {
    margin: 0 0 0.85rem;
}
.sz-mail-inbox--push {
    margin-bottom: 1.25rem;
}
.sz-mail-invite-actions.is-resolved .sz-btn:disabled,
.sz-mail-invite-actions.is-resolved .sz-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.sz-mail-action-resolved {
    margin: 0 0 0.65rem;
    font-weight: 600;
}
.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-rich-text strong,
.sz-news-article__body strong,
.sz-news-card__body strong {
    font-weight: 800;
}
.sz-rich-text .sz-bb-small,
.sz-news-article__body .sz-bb-small,
.sz-news-card__body .sz-bb-small {
    font-size: 0.88em;
}
.sz-rich-text .sz-bb-large,
.sz-news-article__body .sz-bb-large,
.sz-news-card__body .sz-bb-large {
    font-size: 1.2em;
    line-height: 1.45;
}
.sz-rich-text .sz-bb-align,
.sz-news-article__body .sz-bb-align,
.sz-news-card__body .sz-bb-align {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    box-sizing: border-box;
}
.sz-rich-text .sz-bb-align--left,
.sz-news-article__body .sz-bb-align--left,
.sz-news-card__body .sz-bb-align--left {
    text-align: left;
}
.sz-rich-text .sz-bb-align--center,
.sz-news-article__body .sz-bb-align--center,
.sz-news-card__body .sz-bb-align--center {
    text-align: center;
}
.sz-rich-text .sz-bb-align--right,
.sz-news-article__body .sz-bb-align--right,
.sz-news-card__body .sz-bb-align--right {
    text-align: right;
}
.sz-rich-text a.sz-bb-link,
.sz-news-article__body a.sz-bb-link,
.sz-news-card__body a.sz-bb-link {
    color: var(--sz-orange, #f17432);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sz-bbcode-compose {
    position: relative;
    margin-bottom: 0.9rem;
}
.sz-bbcode-compose__label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.92rem;
}
.sz-bbcode-compose__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    padding: 0.35rem 0.45rem;
    border-radius: 0.5rem;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.14));
    background: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .sz-bbcode-compose__toolbar {
    background: rgba(0, 60, 10, 0.04);
    border-color: rgba(0, 60, 10, 0.12);
}
.sz-bbcode-compose__group {
    display: inline-flex;
    gap: 0.2rem;
    padding-right: 0.45rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.sz-bbcode-compose__group:last-child {
    border-right: 0;
    padding-right: 0;
}
html[data-theme="light"] .sz-bbcode-compose__group {
    border-right-color: rgba(0, 60, 10, 0.1);
}
.sz-bbcode-compose__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.45rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
html[data-theme="light"] .sz-bbcode-compose__btn {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 60, 10, 0.1);
}
.sz-bbcode-compose__btn:hover {
    background: rgba(241, 116, 50, 0.18);
    border-color: rgba(241, 116, 50, 0.35);
}
.sz-bbcode-compose__btn:focus-visible {
    outline: 2px solid var(--sz-orange, #f17432);
    outline-offset: 2px;
}
.sz-bbcode-compose__u {
    text-decoration: underline;
}
.sz-bbcode-compose__size--sm {
    font-size: 0.78rem;
}
.sz-bbcode-compose__size--lg {
    font-size: 1.12rem;
    font-weight: 700;
}
.sz-bbcode-compose__input {
    display: block;
    width: 100%;
    min-height: 9rem;
    resize: vertical;
}
.sz-bbcode-compose__hint {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
}
.sz-bbcode-compose__hint kbd,
.sz-bbcode-compose__hint code {
    font-size: 0.85em;
}
.sz-bbcode-compose__slash {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 5.75rem;
    max-height: 11rem;
    overflow: auto;
    border-radius: 0.55rem;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.18));
    background: var(--sz-match-card-bg, rgba(0, 24, 10, 0.96));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .sz-bbcode-compose__slash {
    background: #fff;
    border-color: rgba(0, 60, 10, 0.14);
    box-shadow: 0 10px 28px rgba(0, 40, 12, 0.12);
}
.sz-bbcode-compose__slash-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sz-bbcode-compose__slash-item:hover,
.sz-bbcode-compose__slash-item.is-active {
    background: rgba(241, 116, 50, 0.16);
}
.sz-bbcode-compose__slash-cmd {
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sz-orange, #f17432);
    min-width: 7.5rem;
}
.sz-bbcode-compose__slash-label {
    font-size: 0.88rem;
    opacity: 0.85;
}
.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-avatar-crop-dialog {
    max-width: min(21rem, calc(100vw - 1.25rem));
    padding: 0;
    border: none;
}

.sz-avatar-crop-dialog .sz-chat-new-dialog__surface {
    padding: 1rem 1rem 1.15rem;
}

.sz-avatar-crop-dialog .sz-chat-new-dialog__hint {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
}

.sz-avatar-crop-dialog .sz-croppie-wrap--dialog {
    margin: 0 auto 0.85rem;
    width: 100%;
    max-width: 300px;
    overflow: hidden;
}

/* Croppie: Zoom-Schieber unter dem Bild (nicht rechts daneben) */
.sz-avatar-crop-dialog .sz-croppie-inner.croppie-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.sz-avatar-crop-dialog .sz-croppie-inner .cr-boundary {
    position: relative;
    flex-shrink: 0;
    margin: 0 auto;
}

.sz-avatar-crop-dialog .sz-croppie-inner .cr-slider-wrap {
    position: static !important;
    display: block !important;
    order: 2;
    width: 100% !important;
    max-width: 280px;
    height: auto !important;
    margin: 0.7rem auto 0 !important;
    padding: 0;
    text-align: center;
}

.sz-avatar-crop-dialog .sz-croppie-inner .cr-slider {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    transform: none !important;
    -webkit-transform: none !important;
}

.sz-avatar-crop-dialog .sz-croppie-inner .cr-rotate-controls {
    position: static;
    order: 3;
    margin: 0.35rem auto 0;
}

.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-input-border, var(--sz-form-border));
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

/* Systemweit: kein grauer Browser-Default (color-scheme: dark) – auch in Dialogen außerhalb von .sz-panel */
.sz-form input[type="text"],
.sz-form input[type="email"],
.sz-form input[type="password"],
.sz-form input[type="number"],
.sz-form input[type="search"],
.sz-form input[type="date"],
.sz-form input[type="time"],
.sz-form input[type="url"],
.sz-form input[type="tel"],
.sz-form textarea {
    background-color: var(--sz-form-input-bg, #fff);
    color: var(--sz-form-input-fg, var(--sz-text));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sz-form input[type="text"]::placeholder,
.sz-form input[type="email"]::placeholder,
.sz-form input[type="password"]::placeholder,
.sz-form input[type="number"]::placeholder,
.sz-form input[type="search"]::placeholder,
.sz-form input[type="url"]::placeholder,
.sz-form input[type="tel"]::placeholder,
.sz-form textarea::placeholder {
    color: var(--sz-form-input-placeholder, rgba(90, 102, 90, 0.65));
    opacity: 1;
}

.sz-form input[type="text"]:focus,
.sz-form input[type="email"]:focus,
.sz-form input[type="password"]:focus,
.sz-form input[type="number"]:focus,
.sz-form input[type="search"]:focus,
.sz-form input[type="date"]:focus,
.sz-form input[type="time"]:focus,
.sz-form input[type="url"]:focus,
.sz-form input[type="tel"]:focus,
.sz-form textarea:focus {
    outline: none;
    border-color: var(--sz-form-input-focus-border, var(--sz-green-mid));
    box-shadow: 0 0 0 3px var(--sz-form-input-focus-ring, rgba(10, 92, 24, 0.14));
}

.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: 1rem 1.15rem; margin-bottom: 0.85rem; }
.sz-hero--compact h1 { font-size: 1.35rem; }

.sz-hero--board {
    position: relative;
    overflow: hidden;
    margin-bottom: 0.85rem;
    padding: 0.85rem 1rem 0.95rem;
}

.sz-hero--board::before {
    content: '';
    position: absolute;
    inset: -25% -5% auto;
    height: 70%;
    pointer-events: none;
    background: radial-gradient(
        ellipse 75% 90% at 12% 0%,
        rgba(241, 116, 50, 0.22) 0%,
        rgba(0, 120, 50, 0.1) 42%,
        transparent 72%
    );
}

.sz-hero--board__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.55rem 0.75rem;
}

.sz-hero--board__round,
.sz-hero--board__phase {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

.sz-hero--board__head {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

.sz-hero--board__head--with-share {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.sz-hero--board__head-main {
    flex: 1 1 12rem;
    min-width: 0;
}

.sz-hero--board__head .sz-kicker {
    margin-bottom: 0.2rem;
}

.sz-hero--board__head h1 {
    margin: 0;
    font-size: clamp(1.05rem, 3.2vw, 1.4rem);
    line-height: 1.15;
}

@media (max-width: 560px) {
    .sz-hero__title-row--board-compact {
        flex-direction: row;
        align-items: center;
        gap: 0.45rem;
    }

    .sz-hero__title-row--board-compact .sz-hero__season-av {
        flex-shrink: 0;
    }

    .sz-hero__title-row--board-compact .sz-hero__title-row-text {
        min-width: 0;
        flex: 1 1 auto;
    }

    .sz-hero__title-row--board-compact .sz-kicker {
        margin: 0 0 0.1rem;
        font-size: 0.62rem;
    }

    .sz-hero__title-row--board-compact h1 {
        font-size: 0.95rem;
        line-height: 1.15;
    }
}

html.sz-native-shell .sz-hero__title-row--board-compact h1 {
    font-size: 0.92rem;
}

/* Tipp-Profil + Meine Gruppen (eine Karte) */
.sz-hero-board-hub {
    flex: 1 1 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 14px;
    border: 1px solid rgba(241, 116, 50, 0.32);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(232, 245, 234, 0.42) 48%,
        rgba(255, 248, 240, 0.5) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 8px 22px rgba(0, 50, 20, 0.12);
    backdrop-filter: blur(6px);
    overflow: hidden;
}

html[data-theme="dark"] .sz-hero-board-hub {
    border-color: rgba(241, 116, 50, 0.38);
    background: linear-gradient(
        135deg,
        rgba(0, 58, 26, 0.72) 0%,
        rgba(0, 34, 16, 0.65) 55%,
        rgba(60, 32, 8, 0.35) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 26px rgba(0, 0, 0, 0.35);
}

.sz-hero-board-profile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 0.55rem 0.7rem 0.6rem 0.55rem;
    border-radius: 14px;
    border: 1px solid rgba(241, 116, 50, 0.32);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(232, 245, 234, 0.42) 48%,
        rgba(255, 248, 240, 0.5) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 8px 22px rgba(0, 50, 20, 0.12);
    backdrop-filter: blur(6px);
}

.sz-hero-board-profile--embedded {
    flex: 1 1 auto;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

html[data-theme="dark"] .sz-hero-board-profile {
    border-color: rgba(241, 116, 50, 0.38);
    background: linear-gradient(
        135deg,
        rgba(0, 58, 26, 0.72) 0%,
        rgba(0, 34, 16, 0.65) 55%,
        rgba(60, 32, 8, 0.35) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 26px rgba(0, 0, 0, 0.35);
}

.sz-hero-board-profile__glow {
    position: absolute;
    inset: -40% auto auto -15%;
    width: 65%;
    height: 140%;
    background: radial-gradient(ellipse at 40% 30%, rgba(241, 116, 50, 0.35) 0%, transparent 68%);
    pointer-events: none;
}

/* Keine Unterstreichung (global: a:hover { text-decoration: underline }) */
.sz-hero-board-profile a,
.sz-hero-board-profile a:link,
.sz-hero-board-profile a:visited,
.sz-hero-board-profile a:hover,
.sz-hero-board-profile a:active,
.sz-hero-board-profile a:focus,
.sz-hero-board-profile a:focus-visible {
    text-decoration: none;
}

.sz-hero-board-profile__avatar-wrap {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    line-height: 0;
}

.sz-hero-board-profile__ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(241, 116, 50, 0.55);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
    pointer-events: none;
    animation: sz-hero-board-ring-pulse 2.8s ease-in-out infinite;
}

@keyframes sz-hero-board-ring-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.04); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sz-hero-board-profile__ring {
        animation: none;
    }
}

.sz-hero-board-profile__avatar-wrap:hover .sz-hero-board-profile__ring {
    border-color: var(--sz-orange);
    box-shadow: 0 0 12px rgba(241, 116, 50, 0.45);
}

.sz-hero-board-profile__avatar-wrap:focus-visible {
    outline: 2px solid var(--sz-orange);
    outline-offset: 4px;
    border-radius: 50%;
}

.sz-hero-board-profile__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sz-hero-board-profile--with-bilanz {
    align-items: flex-start;
}

.sz-hero-board-profile__bilanz {
    width: 100%;
    min-width: 0;
}

.sz-hero-board-profile__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.sz-hero-board-profile__card-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    width: 100%;
    color: inherit;
}

.sz-hero-board-profile__cta:hover {
    color: var(--sz-orange);
}

.sz-hero-board-profile__label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sz-orange);
}

.sz-hero-board-profile__name {
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--sz-green);
    word-break: break-word;
}

html[data-theme="dark"] .sz-hero-board-profile__name {
    color: #d8efd8;
}

.sz-hero-board-profile__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

.sz-hero-board-profile__chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.2rem 0.45rem 0.25rem;
    border-radius: 8px;
    background: rgba(0, 46, 20, 0.12);
    border: 1px solid rgba(0, 80, 30, 0.12);
    line-height: 1.15;
}

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

.sz-hero-board-profile__chip--rank {
    border-color: rgba(241, 116, 50, 0.35);
}

.sz-hero-board-profile__chip-k {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sz-hero-meta);
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sz-hero-board-profile__chip-v {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--sz-green);
}

html[data-theme="dark"] .sz-hero-board-profile__chip-v {
    color: #c8e6c8;
}

.sz-hero-board-profile__chip-v small {
    font-size: 0.68em;
    font-weight: 600;
    opacity: 0.85;
}

.sz-hero-board-profile__hint {
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--sz-hero-meta);
}

.sz-hero-board-profile__gear {
    position: absolute;
    top: 0.32rem;
    right: 0.38rem;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    border: 1px solid rgba(241, 116, 50, 0.45);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 236, 220, 0.88) 100%);
    color: var(--sz-orange);
    box-shadow:
        0 4px 14px rgba(241, 116, 50, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sz-hero-board-profile__gear:hover,
.sz-hero-board-profile__gear:focus-visible {
    transform: translateY(-1px) rotate(18deg);
    border-color: var(--sz-orange);
    box-shadow: 0 6px 18px rgba(241, 116, 50, 0.38);
    outline: none;
}

.sz-hero-board-profile__gear:focus-visible {
    outline: 2px solid var(--sz-orange);
    outline-offset: 2px;
}

.sz-hero-board-profile__gear-icon {
    display: block;
}

html[data-theme="dark"] .sz-hero-board-profile__gear {
    background: linear-gradient(145deg, rgba(0, 48, 22, 0.95) 0%, rgba(55, 28, 6, 0.75) 100%);
    border-color: rgba(241, 116, 50, 0.55);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sz-hero-board-profile--embedded .sz-hero-board-profile__gear {
    top: 0.28rem;
    right: 0.32rem;
    width: 1.9rem;
    height: 1.9rem;
}

.sz-hero-board-profile--embedded .sz-hero-board-profile__card {
    padding-right: 2.1rem;
}

.sz-hero-board-profile__cta {
    margin-top: 0.12rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sz-green-mid);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sz-hero-board-profile__cta--accent {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 0.28rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(241, 116, 50, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 236, 220, 0.88) 100%);
    color: var(--sz-orange);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(241, 116, 50, 0.2);
}

.sz-hero-board-profile__cta--accent:hover,
.sz-hero-board-profile__cta--accent:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, #f48c4a 0%, var(--sz-orange) 100%);
    border-color: var(--sz-orange);
    box-shadow: 0 4px 14px rgba(241, 116, 50, 0.38);
}

html[data-theme="dark"] .sz-hero-board-profile__cta {
    color: #9ab59a;
}

html[data-theme="dark"] .sz-hero-board-profile__cta--accent {
    background: linear-gradient(180deg, rgba(80, 40, 12, 0.85) 0%, rgba(50, 24, 6, 0.9) 100%);
    color: #ffc9a0;
    border-color: rgba(241, 116, 50, 0.5);
}

html[data-theme="dark"] .sz-hero-board-profile__cta--accent:hover,
html[data-theme="dark"] .sz-hero-board-profile__cta--accent:focus-visible {
    color: #1a1208;
    background: linear-gradient(180deg, #ffb07a 0%, var(--sz-orange) 100%);
}

@media (min-width: 720px) {
    .sz-hero-board-hub {
        flex-direction: row;
        align-items: stretch;
    }

    .sz-hero-board-profile--embedded {
        flex: 1 1 16rem;
        max-width: 22rem;
    }

    .sz-board-groups-strip {
        flex: 1 1 12rem;
        min-width: 0;
        border-top: none;
        border-left: 1px solid rgba(241, 116, 50, 0.22);
    }

    html[data-theme="dark"] .sz-board-groups-strip {
        border-left-color: rgba(255, 255, 255, 0.12);
    }
}

@media (max-width: 719px) {
    .sz-hero-board-profile:not(.sz-hero-board-profile--embedded) {
        width: 100%;
    }
}

.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;
}

/* Tipp-Board: Spieltag/Phase (fancy) */
.sz-st-select--fancy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(241, 116, 50, 0.22);
    background: linear-gradient(
        165deg,
        rgba(18, 34, 24, 0.92) 0%,
        rgba(8, 24, 14, 0.94) 100%
    );
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    box-shadow:
        0 10px 28px rgba(0, 40, 12, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .sz-st-select--fancy {
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(234, 244, 236, 0.94) 100%
    );
    border-color: rgba(0, 80, 30, 0.14);
    box-shadow:
        0 8px 24px rgba(0, 40, 10, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* Hero-/Sticky-Phasenleiste: milchiger (siehe sz-module-board.css) */
.page-tippspiel .sz-st-select--fancy.sz-st-select--hero-embedded,
.page-tippspiel .sz-st-select--fancy.sz-st-select--hero-sticky {
    background: linear-gradient(
        180deg,
        rgba(22, 38, 28, 0.9) 0%,
        rgba(10, 26, 16, 0.94) 100%
    );
}

html[data-theme="light"] .page-tippspiel .sz-st-select--fancy.sz-st-select--hero-embedded,
html[data-theme="light"] .page-tippspiel .sz-st-select--fancy.sz-st-select--hero-sticky {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(236, 246, 238, 0.94) 100%
    );
}

.sz-st-select__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--sz-orange) 0%, #d85a12 100%);
    box-shadow: 0 3px 12px rgba(241, 116, 50, 0.35);
}

.sz-st-select__icon {
    flex-shrink: 0;
    opacity: 0.95;
}

.sz-st-select__track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 100%;
}

.sz-st-select__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--sz-st-link-bg);
    color: var(--sz-st-link-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.15s ease;
}

html[data-theme="light"] .sz-st-select__pill {
    border-color: rgba(0, 60, 10, 0.1);
}

.sz-st-select__pill:hover {
    background: var(--sz-st-link-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.sz-st-select__pill.is-active {
    background: linear-gradient(135deg, var(--sz-orange) 0%, #e06820 100%);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    box-shadow:
        0 4px 16px rgba(241, 116, 50, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

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

@media (max-width: 768px) {
    .sz-st-select--fancy {
        flex-direction: column;
        align-items: stretch;
        padding: 0.65rem 0.75rem;
        overflow: hidden;
    }

    .sz-st-select__label {
        align-self: flex-start;
    }

    .sz-st-select__track {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
        padding-bottom: 0.35rem;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 10px,
            #000 calc(100% - 28px),
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 10px,
            #000 calc(100% - 28px),
            transparent 100%
        );
    }

    .sz-st-select__pill {
        flex: 0 0 auto;
        scroll-snap-align: center;
        scroll-margin-inline: 0.75rem;
    }

    .sz-st-select__pill.is-active {
        scroll-snap-align: center;
        scroll-margin-inline: 1rem;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .sz-st-select__track {
        scroll-snap-type: none;
        mask-image: none;
        -webkit-mask-image: none;
    }
}

/* 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);
}

/* 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;
    display: none;
}

body.sz-tipp-view--compact .sz-tipp-view-bar__hint {
    display: inline;
}

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: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: 100%;
    align-items: center;
    column-gap: 0.35rem;
}

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

/* Heim (links): Spalte 1 – rechtsbündig an die Tippfelder */
.sz-compact-match__side--home {
    grid-column: 1;
    justify-content: flex-end;
    justify-self: end;
}

/* Auswärts (rechts): Spalte 3 – linksbündig an die Tippfelder */
.sz-compact-match__side--away {
    grid-column: 3;
    justify-content: flex-start;
    justify-self: start;
}

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

a.sz-compact-match__club-link {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    color: inherit;
    text-decoration: none;
    min-width: 0;
    max-width: 100%;
    border-radius: var(--sz-radius-sm, 0.35rem);
    transition: background 0.15s ease;
}

a.sz-compact-match__club-link:hover,
a.sz-compact-match__club-link:focus-visible {
    background: rgba(56, 189, 248, 0.08);
    outline: none;
}

a.sz-compact-match__club-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45);
}

.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: 128px;
    height: auto;
    max-width: 128px;
    max-height: 128px;
    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: min(100%, 9.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 {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-shrink: 0;
    width: max-content;
}

.sz-compact-tipp-input {
    width: 3.0rem;
    height: 4.5rem;
    padding: 0;
    border: 2px solid rgba(0, 60, 10, 0.25);
    border-radius: 11px;
    font-size: 2.2rem;
    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,
        transform 0.15s ease,
        color 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.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: 2rem;
    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: 96px;
        max-width: 96px;
        max-height: 96px;
    }

    .sz-compact-match__name {
        font-size: 0.65rem;
        max-width: min(100%, 5.5rem);
        margin-top: 0.06rem;
    }

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

    .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: 133px;
    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-match__scoreline--live,
.sz-match-score-live {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.sz-match-score-live--with-pill .sz-home-match__live-pill {
    margin-top: 0.05rem;
}
.sz-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-compact-match__live-score {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
}

.page-tippspiel .sz-compact-match__result {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.35rem;
    padding: 0.12rem 0.45rem;
    border-radius: 8px;
    vertical-align: middle;
}

@media (max-width: 560px) {
    .page-tippspiel .sz-compact-match__result {
        flex: 1 0 100%;
        justify-content: center;
        margin-left: 0;
    }
}

.page-tippspiel .sz-compact-match__result-label {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--sz-green);
    white-space: nowrap;
}

.page-tippspiel .sz-compact-match__result-score {
    display: inline-flex;
    align-items: center;
}

.page-tippspiel .sz-compact-match__result--final {
    background: rgba(45, 138, 78, 0.14);
    border: 1px solid rgba(45, 138, 78, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.page-tippspiel .sz-compact-match__result--final .sz-compact-match__result-label {
    color: #1f6b3a;
}

.page-tippspiel .sz-compact-match__result--final .sz-compact-match__readonly {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--sz-text);
}

.page-tippspiel .sz-compact-match__result--live {
    background: rgba(232, 93, 4, 0.1);
    border: 1px solid rgba(232, 93, 4, 0.28);
}

.page-tippspiel .sz-compact-match__result--live .sz-compact-match__result-label {
    color: #c44a00;
}

.page-tippspiel .sz-compact-match__result--live .sz-home-match__live-pill {
    display: none;
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match__result--final {
    background: rgba(72, 180, 110, 0.14);
    border-color: rgba(120, 210, 150, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match__result--final .sz-compact-match__result-label {
    color: #8fd4a8;
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match__result--live {
    background: rgba(232, 93, 4, 0.14);
    border-color: rgba(232, 93, 4, 0.32);
}

.page-tippspiel .sz-compact-match__tipp-label {
    display: block;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--sz-green);
    opacity: 0.88;
    margin-bottom: 0.08rem;
}

.page-tippspiel .sz-compact-match__tipp-inputs {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.page-tippspiel .sz-compact-match__tipp-score {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.page-tippspiel .sz-compact-match__tipp--readonly,
.page-tippspiel .sz-compact-match__tipp--empty,
.page-tippspiel .sz-compact-match__tipp:has(.sz-compact-match__tipp-label) {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.12rem;
}

.page-tippspiel .sz-compact-match__no-tip {
    font-size: 0.72rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
    color: var(--sz-muted, #6b7280);
    white-space: nowrap;
}

.page-tippspiel .sz-compact-match--no-tipp .sz-compact-match__tipp {
    border-style: dashed;
    border-color: rgba(107, 114, 128, 0.35);
    background: rgba(107, 114, 128, 0.08);
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match--no-tipp .sz-compact-match__tipp {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match__no-tip {
    color: rgba(255, 255, 255, 0.45);
}

.sz-compact-match__live-score-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.sz-compact-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-compact-match__meta .sz-home-match__live-pill {
    vertical-align: middle;
}
.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-match__rule-hint {
    margin: 0.2rem 0 0;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--sz-match-meta);
    opacity: 0.92;
}
.sz-compact-match .sz-match__rule-hint {
    margin: 0.1rem 0 0.35rem;
    padding: 0 0.35rem;
    font-size: 0.72rem;
}
.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;
}
/* Fremdtipps: kompakte 4-Spalten-Tabelle (Pl. · Spieler · Tipp · Pkt.) */
.sz-tips-table--compact {
    table-layout: fixed;
}
.sz-tips-table--compact .sz-tips-table__place {
    width: 2rem;
}
.sz-tips-table--compact .sz-tips-table__player {
    width: auto;
    min-width: 0;
    overflow: hidden;
}
.sz-tips-table--compact .sz-tips-table__tip {
    width: 2.75rem;
    white-space: nowrap;
    font-weight: 700;
}
.sz-tips-table--compact .sz-tips-table__score-h {
    width: 4.5rem;
}
.sz-tips-table--compact .sz-tips-table__score {
    white-space: normal;
    line-height: 1.2;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.sz-tips-table--compact .sz-tip-score--with-br {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    max-width: 100%;
}
.sz-tips-table--compact .sz-tip-score__main {
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
}
.sz-tips-table--compact .sz-tip-score strong {
    font-size: 0.95em;
    line-height: 1;
}
.sz-tips-table--compact .sz-tip-star {
    font-size: 1.05em;
}
.sz-tips-table--compact .sz-tip-stars {
    gap: 0;
    line-height: 1;
    justify-content: center;
}
.sz-tips-table--compact .sz-tip-score-details {
    display: inline-flex;
    justify-content: center;
}
.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 */
/* Registrierung: Honeypot für Bots (Stufe A) */
.sz-register-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.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;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        background 0.15s ease;
    -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-wrap {
    display: inline-flex;
    align-items: center;
}

.sz-tipp-form__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.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);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.sz-tipp-form__clear {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    color: rgba(0, 50, 15, 0.55);
    background: rgba(0, 60, 20, 0.06);
    cursor: pointer;
    opacity: 0.55;
    transition:
        opacity 0.15s ease,
        color 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
}

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

.sz-tipp-form--fancy:hover .sz-tipp-form__actions .sz-tipp-form__clear,
.sz-tipp-form__clear:focus-visible {
    opacity: 0.9;
}

.sz-tipp-form__clear:hover {
    opacity: 1;
    color: #9a3412;
    background: rgba(241, 116, 50, 0.14);
    border-color: rgba(241, 116, 50, 0.35);
    transform: scale(1.06);
}

html[data-theme="dark"] .sz-tipp-form__clear:hover {
    color: #ffb74d;
    background: rgba(241, 116, 50, 0.18);
    border-color: rgba(241, 116, 50, 0.4);
}

.sz-tipp-form__clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(241, 116, 50, 0.35);
}

.sz-tipp-form__clear:disabled {
    opacity: 0.35;
    cursor: wait;
}

.sz-tipp-inputs-wrap.is-cleared .sz-tipp-inputs--fancy {
    animation: sz-tipp-cleared-flash 0.55s ease;
}

@keyframes sz-tipp-cleared-flash {
    0% {
        box-shadow: inset 0 0 0 0 rgba(46, 125, 50, 0);
    }
    35% {
        box-shadow: inset 0 0 0 2px rgba(46, 125, 50, 0.45);
    }
    100% {
        box-shadow: inset 0 0 0 0 rgba(46, 125, 50, 0);
    }
}

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,
        background 0.15s ease,
        color 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::-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;
}

/* KO-Zusatztipp: Pflicht-Optik – „Sieger nicht vergessen!" */
.sz-ko-extra__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.55rem;
}

.sz-ko-extra__flag {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

.sz-ko-extra__title {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

.sz-ko-extra__req-badge {
    align-self: flex-start;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
    background: var(--sz-orange);
    color: #fff;
    white-space: nowrap;
}

.sz-ko-extra__title-text {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    opacity: 0.92;
}

.sz-ko-extra__status {
    margin-left: auto;
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    background: var(--sz-green);
    color: #fff;
    white-space: nowrap;
}

/* Panel-Hervorhebung im Pflichtzustand */
.sz-ko-extra--required {
    border-width: 2px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.sz-ko-extra--required.is-incomplete {
    border-color: var(--sz-orange);
    background: rgba(255, 153, 51, 0.09);
    animation: sz-ko-required-glow 1.9s ease-in-out infinite;
}

html[data-theme="dark"] .sz-ko-extra--required.is-incomplete {
    background: rgba(255, 153, 51, 0.13);
}

.sz-ko-extra--required.is-complete {
    border-color: var(--sz-green);
    background: rgba(40, 167, 69, 0.08);
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.14);
    animation: none;
}

html[data-theme="dark"] .sz-ko-extra--required.is-complete {
    background: rgba(40, 167, 69, 0.14);
}

@keyframes sz-ko-required-glow {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 153, 51, 0.12); }
    50% { box-shadow: 0 0 0 6px rgba(255, 153, 51, 0.22); }
}

.sz-ko-extra--required.is-incomplete .sz-ko-extra__req-badge {
    animation: sz-ko-badge-pulse 1.2s ease-in-out infinite;
}

@keyframes sz-ko-badge-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.09); opacity: 0.85; }
}

/* Pro-Schritt-Status in der Legende */
.sz-ko-extra__legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sz-ko-extra__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.14);
    color: inherit;
    flex-shrink: 0;
}

html[data-theme="dark"] .sz-ko-extra__step {
    background: rgba(255, 255, 255, 0.18);
}

.sz-ko-extra__group.is-pending .sz-ko-extra__step {
    background: var(--sz-orange);
    color: #fff;
    animation: sz-ko-badge-pulse 1.2s ease-in-out infinite;
}

.sz-ko-extra__group.is-done .sz-ko-extra__step {
    background: var(--sz-green);
    color: #fff;
}

.sz-ko-extra__check {
    margin-left: auto;
    color: var(--sz-green);
    font-weight: 900;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sz-ko-extra__group.is-done .sz-ko-extra__check {
    opacity: 1;
    transform: scale(1);
}

.sz-ko-extra__error {
    margin: 0.15rem 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sz-orange);
}

/* Rütteln, wenn unvollständig gespeichert werden soll */
.sz-ko-extra--flash {
    animation: sz-ko-shake 0.45s ease;
}

@keyframes sz-ko-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .sz-ko-extra--required.is-incomplete,
    .sz-ko-extra--required.is-incomplete .sz-ko-extra__req-badge,
    .sz-ko-extra__group.is-pending .sz-ko-extra__step,
    .sz-ko-extra--flash {
        animation: none !important;
    }
}

/* 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;
    width: 100%;
}

.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);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

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: 13px;
    font-weight: 800;
    color: var(--sz-text);
    background: #fff;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        background 0.15s ease,
        color 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);
}

/* Tipp-Felder: deutlicher Fokus (Standard + Kompakt, v. a. Dark Mode) */
.sz-tipp-inputs input:focus,
.sz-tipp-inputs input:focus-visible,
.sz-tipp-inputs__field:focus,
.sz-tipp-inputs__field:focus-visible,
.sz-compact-tipp-input:focus,
.sz-compact-tipp-input:focus-visible {
    outline: none;
    border-color: var(--sz-orange);
    background: #fff;
    box-shadow:
        0 0 0 2px rgba(241, 116, 50, 0.4),
        0 0 0 4px rgba(241, 116, 50, 0.14),
        0 0 16px rgba(241, 116, 50, 0.28);
    transform: scale(1.05);
    position: relative;
    z-index: 2;
}

html[data-theme="dark"] .sz-tipp-inputs input:focus,
html[data-theme="dark"] .sz-tipp-inputs input:focus-visible,
html[data-theme="dark"] .sz-tipp-inputs__field:focus,
html[data-theme="dark"] .sz-tipp-inputs__field:focus-visible,
html[data-theme="dark"] .sz-compact-tipp-input:focus,
html[data-theme="dark"] .sz-compact-tipp-input:focus-visible {
    border-color: #ffab6b;
    background: rgba(52, 32, 14, 0.95);
    color: #fff;
    box-shadow:
        0 0 0 2px rgba(255, 171, 107, 0.95),
        0 0 0 5px rgba(241, 116, 50, 0.38),
        0 0 22px rgba(241, 116, 50, 0.5);
    transform: scale(1.06);
}

.sz-tipp-inputs--fancy:focus-within {
    border-color: rgba(241, 116, 50, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 0 0 1px rgba(241, 116, 50, 0.2);
}

html[data-theme="dark"] .sz-tipp-inputs--fancy:focus-within {
    border-color: rgba(255, 171, 107, 0.55);
    background: rgba(36, 22, 8, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(241, 116, 50, 0.35),
        0 0 14px rgba(241, 116, 50, 0.22);
}

.page-tippspiel .sz-compact-match--fancy .sz-compact-match__tipp:focus-within {
    border-color: rgba(241, 116, 50, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 0 0 1px rgba(241, 116, 50, 0.18);
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match--fancy .sz-compact-match__tipp:focus-within {
    border-color: rgba(255, 171, 107, 0.5);
    background: rgba(36, 22, 8, 0.68);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(241, 116, 50, 0.32),
        0 0 12px rgba(241, 116, 50, 0.2);
}

.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__tipp--scored {
    gap: 0.3rem;
    padding-inline: 0.35rem 0.4rem;
}

.page-tippspiel .sz-compact-match__stars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.page-tippspiel .sz-compact-match__stars .sz-tip-stars {
    gap: 0;
    line-height: 1;
}

.page-tippspiel .sz-compact-match__stars .sz-tip-star {
    font-size: 0.72rem;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.12);
}

.page-tippspiel .sz-compact-match__stars .sz-tip-zero {
    transform: scale(0.72);
    transform-origin: center center;
}

.page-tippspiel .sz-compact-match__stars .sz-tip-score-details {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.page-tippspiel .sz-compact-match__stars .sz-tip-score-details__summary {
    padding: 0;
    list-style: none;
}

.page-tippspiel .sz-compact-match__stars .sz-tip-score-details__body {
    font-size: 0.72rem;
    min-width: 9rem;
    z-index: 3;
}

/* Vorläufige Live-Punkte: schwebende Tilde + atmende Sterne */
.page-tippspiel .sz-tip-score-provisional {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    flex-shrink: 0;
}

.page-tippspiel .sz-tip-score-provisional__tilde {
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    color: #e8a317;
    opacity: 0.85;
    animation: sz-tip-prov-tilde 2.2s ease-in-out infinite;
}

@keyframes sz-tip-prov-tilde {
    0%, 100% { opacity: 0.45; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
}

.page-tippspiel .sz-tip-stars--provisional .sz-tip-star {
    color: #e8a317;
    opacity: 0.72;
    animation: sz-tip-prov-star 2.4s ease-in-out infinite;
    text-shadow: 0 0 5px rgba(232, 163, 23, 0.35);
}

.page-tippspiel .sz-tip-stars--provisional .sz-tip-star:nth-child(2) { animation-delay: 0.15s; }
.page-tippspiel .sz-tip-stars--provisional .sz-tip-star:nth-child(3) { animation-delay: 0.3s; }
.page-tippspiel .sz-tip-stars--provisional .sz-tip-star:nth-child(4) { animation-delay: 0.45s; }
.page-tippspiel .sz-tip-stars--provisional .sz-tip-star:nth-child(5) { animation-delay: 0.6s; }
.page-tippspiel .sz-tip-stars--provisional .sz-tip-star:nth-child(6) { animation-delay: 0.75s; }

@keyframes sz-tip-prov-star {
    0%, 100% { opacity: 0.55; transform: scale(0.94); filter: saturate(0.75); }
    50% { opacity: 0.95; transform: scale(1); filter: saturate(1); }
}

.page-tippspiel .sz-tip-zero--provisional .sz-tip-zero__star {
    color: #e8a317;
    opacity: 0.55;
    animation: sz-tip-prov-tilde 2.2s ease-in-out infinite;
}

.page-tippspiel .sz-tip-br--provisional {
    opacity: 0.92;
}

.page-tippspiel .sz-tip-br__prov {
    font-weight: 700;
    color: #e8a317;
    margin-left: 0.15rem;
}

.page-tippspiel .sz-compact-match__stars--provisional {
    filter: drop-shadow(0 0 4px rgba(232, 163, 23, 0.18));
}

html[data-theme="dark"] .page-tippspiel .sz-tip-stars--provisional .sz-tip-star {
    color: #f5c842;
    text-shadow: 0 0 6px rgba(245, 200, 66, 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);
}

/* Kompakt: Fremdtipps (fancy, in der Spielkarte) */
.page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy {
    position: relative;
    z-index: 1;
    margin: 0.45rem 0 0;
    border: 1px solid rgba(0, 60, 20, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
}

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

.page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-spoiler__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--sz-green);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(232, 245, 234, 0.22) 100%);
    transition: background 0.15s ease, color 0.15s ease;
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-spoiler__summary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 52, 24, 0.18) 100%);
}

.page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-spoiler__summary:hover {
    color: var(--sz-orange);
}

.page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-spoiler__summary::before {
    content: none;
}

.page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-spoiler__summary-icon {
    display: inline-flex;
    align-items: center;
    color: var(--sz-orange);
    opacity: 0.92;
}

.page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-spoiler__summary-text {
    line-height: 1.2;
}

.page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-spoiler__count {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.85;
}

.page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-spoiler__body {
    padding: 0.35rem 0.45rem 0.5rem;
    border-top: 1px solid rgba(0, 60, 20, 0.1);
}

html[data-theme="dark"] .page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-spoiler__body {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-filter-toolbar {
    margin-bottom: 0.35rem;
}

.page-tippspiel .sz-compact-match .sz-tips-spoiler--compact-fancy .sz-tips-name-filter__input {
    font-size: 0.82rem;
    padding: 0.35rem 0.5rem;
}

.page-tippspiel .sz-compact-match__privacy-hint {
    position: relative;
    z-index: 1;
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--sz-match-meta);
    text-align: center;
}

.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;
}

/* Board: Teilen-Button + Dialog (Fallback wie Chat-Dialoge, App-WebView) */
.sz-hero-share-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(0, 60, 10, 0.18);
    background: rgba(255, 255, 255, 0.88);
    color: var(--sz-green);
    cursor: pointer;
}

.sz-hero-share-btn:hover {
    border-color: var(--sz-orange);
    color: var(--sz-orange);
}

.sz-hero-share-btn svg {
    pointer-events: none;
}

html[data-theme="dark"] .sz-hero-share-btn {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--sz-match-team);
}

/* Overlay-Root: volle Viewport-Fläche (max-width nur auf der Surface, sonst links am Rand). */
.sz-modal-overlay.sz-tippspiel-share-dialog {
    max-width: none;
    width: 100%;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
}

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

.sz-tippspiel-share-dialog__head {
    margin-bottom: 0.5rem;
}

.sz-tippspiel-share-dialog__section + .sz-tippspiel-share-dialog__section {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 60, 10, 0.1);
}

html[data-theme="dark"] .sz-tippspiel-share-dialog__section + .sz-tippspiel-share-dialog__section {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.sz-tippspiel-share-dialog__section-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sz-green);
}

html[data-theme="dark"] .sz-tippspiel-share-dialog__section-title {
    color: var(--sz-match-team);
}

.sz-tippspiel-share-dialog__hint {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    color: var(--sz-match-meta);
    line-height: 1.4;
}

.sz-tippspiel-share-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Registrierung → Login: E-Mail-Bestätigung */
.sz-register-verify-dialog__lead {
    margin: 0 0 0.85rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.sz-register-verify-dialog__spam {
    margin: 0 0 1rem;
    font-size: 0.86rem;
    line-height: 1.45;
}

html.sz-native-shell .sz-tippspiel-share-dialog__actions .sz-btn {
    touch-action: manipulation;
    pointer-events: auto;
    cursor: pointer;
}

/* Teilen-Karte: HTML/CSS, ISO-ID-1 (≈ 1,586 : 1), Premium-Look */
.sz-share-card-wrap {
    margin: 0.65rem 0 0.25rem;
    max-width: 100%;
    box-sizing: border-box;
}

.sz-share-card {
    position: relative;
    width: 100%;
    max-width: min(100%, 23rem);
    margin: 0 auto;
    box-sizing: border-box;
    aspect-ratio: 1.586 / 1;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.08) inset,
        0 22px 48px rgba(0, 0, 0, 0.42),
        0 6px 18px rgba(241, 116, 50, 0.12);
}

.sz-share-card--chic {
    background:
        radial-gradient(ellipse 120% 80% at 100% 0%, rgba(241, 116, 50, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 90% 70% at 0% 100%, rgba(72, 160, 100, 0.18) 0%, transparent 50%),
        linear-gradient(145deg, #0a2818 0%, #041a0e 42%, #020c06 100%);
}

.sz-share-card__border-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(255, 220, 160, 0.55) 0%,
        rgba(241, 116, 50, 0.35) 28%,
        rgba(72, 140, 92, 0.25) 55%,
        rgba(255, 255, 255, 0.15) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 4;
}

.sz-share-card__holo {
    position: absolute;
    inset: -40% -20%;
    background: linear-gradient(
        108deg,
        transparent 38%,
        rgba(255, 255, 255, 0.07) 44%,
        rgba(255, 220, 180, 0.14) 48%,
        rgba(255, 255, 255, 0.05) 52%,
        transparent 58%
    );
    transform: rotate(-8deg);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: soft-light;
}

.sz-share-card__grain {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

.sz-share-card__season-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sz-share-card__season-bg img {
    position: absolute;
    right: -8%;
    top: 50%;
    width: 58%;
    max-width: none;
    height: auto;
    max-height: 96%;
    object-fit: contain;
    object-position: right center;
    transform: translateY(-50%);
    opacity: 0.14;
    filter: saturate(0.75) blur(0.2px);
}

.sz-share-card__body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 0.9rem 1rem 0.75rem;
    box-sizing: border-box;
}

.sz-share-card__brand {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.sz-share-card__head-text {
    min-width: 0;
    flex: 1 1 auto;
}

.sz-share-card__logo {
    flex-shrink: 0;
    width: auto;
    max-width: 6.5rem;
    height: 1.45rem;
    object-fit: contain;
    object-position: right top;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.sz-share-card__kicker {
    margin: 0;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(241, 116, 50, 0.95);
}

.sz-share-card__season {
    margin: 0.12rem 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(244, 247, 242, 0.95);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.sz-share-card__divider {
    height: 1px;
    margin: 0.55rem 0 0.45rem;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(241, 116, 50, 0.55) 20%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(72, 140, 92, 0.4) 80%,
        transparent
    );
}

.sz-share-card__holder {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin-top: 0.15rem;
}

.sz-share-card__holder-text {
    min-width: 0;
    flex: 1 1 auto;
}

.sz-share-card__holder-label {
    margin: 0.2rem 0 0;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.sz-share-card__tipper-av {
    flex-shrink: 0;
}

.sz-share-card__tipper-av.sz-avatar {
    border: none;
    border-radius: 50%;
    background: rgba(4, 30, 16, 0.9) !important;
    overflow: hidden;
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.sz-share-card__tipper-av .sz-avatar__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
}

.sz-share-card__tipper-av:not(.sz-avatar--fallback) .sz-avatar__letter {
    display: none;
}

.sz-share-card__nick {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f8faf6;
    line-height: 1.1;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.sz-share-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem 0.55rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.sz-share-card__metrics:has(.sz-share-card__metric:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

.sz-share-card__metric {
    padding: 0.35rem 0.4rem 0.4rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.sz-share-card__metric-k {
    display: block;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.sz-share-card__metric-v {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    color: #9ed4ad;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.sz-share-card__metric--rank .sz-share-card__metric-v {
    color: var(--sz-orange);
}

.sz-share-card__metric--round .sz-share-card__metric-v {
    color: #f4f7f2;
}

.sz-share-card__metric--rank .sz-share-card__metric-v small {
    font-size: 0.7em;
    font-weight: 600;
    opacity: 0.85;
}

.sz-share-card__round-bar {
    margin-top: 0.5rem;
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.sz-share-card__round-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sz-orange) 0%, #e85d04 40%, #3d9a5c 100%);
    box-shadow: 0 0 12px rgba(241, 116, 50, 0.45);
}

.sz-share-card__extras {
    margin: 0.4rem 0 0;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.25;
}

.sz-share-card__foot {
    margin: 0.35rem 0 0;
    font-size: 0.64rem;
    font-weight: 700;
    text-align: right;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(241, 116, 50, 0.88);
}

/* Teilen-Overlay (<div>, kein <dialog> – App-WebView) */
.sz-modal-overlay[hidden] {
    display: none !important;
}

.sz-modal-overlay.is-open {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html.sz-native-shell .sz-modal-overlay.is-open {
    z-index: 10100;
    align-items: end;
    padding: 0.65rem;
}

.sz-modal-overlay__backdrop {
    grid-area: 1 / 1;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.52);
    cursor: pointer;
    z-index: 0;
}

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

.sz-modal-overlay .sz-chat-new-dialog__surface {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    margin: 0;
    justify-self: center;
    align-self: center;
    width: min(26rem, calc(100vw - 2rem));
    max-width: min(26rem, calc(100vw - 2rem));
    max-height: min(90vh, 44rem);
    box-sizing: border-box;
}

html.sz-native-shell .sz-modal-overlay.is-open .sz-chat-new-dialog__surface {
    align-self: end;
}

html.sz-native-shell .sz-hero-share-btn {
    touch-action: manipulation;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

/* Teilen-Dialog App: Kachel/PNG kompakt (WebView skaliert sonst 720px-Breite mit) */
html.sz-native-shell .sz-tippspiel-share-dialog .sz-chat-new-dialog__surface {
    width: 100%;
    max-width: min(22rem, calc(100vw - 1.25rem));
    max-height: min(82vh, 34rem);
}

html.sz-native-shell .sz-share-card {
    max-width: min(100%, 21rem);
}

html.sz-native-shell .sz-share-card__body {
    padding: 0.8rem 0.9rem 0.7rem;
}

html.sz-native-shell .sz-share-card__tipper-av.sz-avatar {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem;
    min-height: 2.75rem;
    max-width: 2.75rem;
    max-height: 2.75rem;
}

html.sz-native-shell .sz-share-card__nick {
    font-size: 0.95rem;
}

html.sz-native-shell .sz-share-card__metric-v {
    font-size: 1.05rem;
}

/* Kompakt-Tippen App: eigene Zifferntastatur (kein Android-Symbol-Keyboard) */
.sz-compact-numpad {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10040;
    padding: 0.5rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(12, 28, 18, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35);
}

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

.sz-compact-numpad__bar {
    display: flex;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.sz-compact-numpad__close {
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.75rem;
    min-height: 2.25rem;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sz-compact-numpad__close:active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.sz-compact-numpad__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    max-width: 22rem;
    margin: 0 auto;
}

.sz-compact-numpad__key {
    min-height: 2.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sz-compact-numpad__key:active {
    background: var(--sz-orange);
    border-color: var(--sz-orange);
}

.sz-compact-numpad__key--clear {
    font-size: 1.1rem;
}

html.sz-native-shell.sz-compact-numpad-open .sz-main {
    padding-bottom: 11rem;
}

.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;
}

/* Handy: Tabellen fast randlos (weniger Innenabstand von .sz-inner / .sz-panel) */
@media (max-width: 768px) {
    :root {
        --sz-table-edge: max(0.35rem, env(safe-area-inset-left, 0px));
        --sz-table-edge-right: max(0.35rem, env(safe-area-inset-right, 0px));
    }

    .sz-inner {
        padding-left: var(--sz-table-edge);
        padding-right: var(--sz-table-edge-right);
    }

    .sz-panel,
    .sz-profile-panel {
        padding: 1.15rem 0.4rem;
    }

    .sz-hero:not(.sz-hero--home) {
        padding: 1rem 0.5rem;
    }

    .sz-table-wrap,
    .sz-tipper-tips-table-scroll {
        box-sizing: border-box;
        width: calc(100vw - var(--sz-table-edge) - var(--sz-table-edge-right));
        max-width: none;
        margin-left: calc(50% - 50vw + var(--sz-table-edge));
        margin-right: calc(50% - 50vw + var(--sz-table-edge-right));
        border-radius: 8px;
    }

    .sz-tipper-tips-spoiler .sz-tipper-tips-table-scroll {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Panel mit Tabelle: gleiche Breite, Tabelle bündig am Panel-Rand (z. B. Ranglisten) */
    .sz-panel:has(.sz-table-wrap),
    .sz-profile-panel:has(.sz-table-wrap) {
        box-sizing: border-box;
        width: calc(100vw - var(--sz-table-edge) - var(--sz-table-edge-right));
        max-width: none;
        margin-left: calc(50% - 50vw + var(--sz-table-edge));
        margin-right: calc(50% - 50vw + var(--sz-table-edge-right));
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
    }

    .sz-panel:has(.sz-table-wrap) > :not(.sz-table-wrap),
    .sz-profile-panel:has(.sz-table-wrap) > :not(.sz-table-wrap) {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .sz-panel:has(.sz-table-wrap) .sz-table-wrap,
    .sz-profile-panel:has(.sz-table-wrap) .sz-table-wrap {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .sz-panel:has(.sz-table-wrap) .sz-ranking-table,
    .sz-profile-panel:has(.sz-table-wrap) .sz-ranking-table {
        border-radius: 0;
    }

    .sz-tipper-tips-spoiler__body,
    .sz-tips-spoiler__body {
        padding-left: 0;
        padding-right: 0;
    }

    .sz-tips-spoiler__body:has(.sz-tips-table:not(.sz-tips-table--compact)) {
        box-sizing: border-box;
        width: calc(100vw - var(--sz-table-edge) - var(--sz-table-edge-right));
        margin-left: calc(50% - 50vw + var(--sz-table-edge));
        margin-right: calc(50% - 50vw + var(--sz-table-edge-right));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sz-tips-spoiler__body:has(.sz-tips-table--compact) {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow-x: visible;
    }

    .sz-tips-table--compact {
        font-size: 0.8rem;
    }

    .sz-tips-table--compact thead th {
        font-size: 0.68rem;
        padding: 0.35rem 0.2rem;
        letter-spacing: 0.02em;
    }

    .sz-tips-table--compact tbody td {
        padding: 0.32rem 0.2rem;
    }

    .sz-tips-table--compact .sz-tips-table__place {
        width: 1.65rem;
        padding-left: 0.15rem;
        padding-right: 0.1rem;
    }

    .sz-tips-table--compact .sz-tips-table__tip {
        width: 2.35rem;
        font-size: 0.92em;
    }

    .sz-tips-table--compact .sz-tips-table__score-h {
        width: 3.25rem;
    }

    .sz-tips-table--compact .sz-tips-table__who {
        gap: 0.28rem;
        max-width: 100%;
    }

    .sz-tips-table--compact .sz-tips-table__who .sz-avatar {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 1.5rem;
        min-height: 1.5rem;
        flex-shrink: 0;
    }

    .sz-tips-table--compact .sz-tips-table__who > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .sz-tips-table--compact .sz-tip-star {
        font-size: 0.88em;
    }

    .sz-tips-table--compact .sz-tip-score strong {
        font-size: 0.9em;
    }

    .sz-panel > table.sz-match-detail-table,
    .sz-panel .sz-rules-table {
        width: calc(100% + 0.8rem);
        max-width: none;
        margin-left: -0.4rem;
        margin-right: -0.4rem;
    }

    .sz-panel:has(> table.sz-match-detail-table),
    .sz-panel:has(.sz-rules-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sz-ranking-table thead th,
    .sz-ranking-table tbody td,
    .sz-tips-table th,
    .sz-tips-table td,
    .sz-match-detail-table th,
    .sz-match-detail-table td,
    .sz-rules-table th,
    .sz-rules-table td {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .sz-ranking-table thead th {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* 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: 4.25rem;
    font-weight: 700;
    color: var(--sz-green);
    white-space: nowrap;
}
.sz-ranking-table__delta {
    display: inline-block;
    margin-left: 0.12rem;
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: middle;
    letter-spacing: -0.02em;
}
.sz-ranking-table__delta--up {
    color: #3ecf6a;
}
.sz-ranking-table__delta--down {
    color: #e87070;
}
html[data-theme="light"] .sz-ranking-table__delta--up {
    color: #0a7a28;
}
html[data-theme="light"] .sz-ranking-table__delta--down {
    color: #b42828;
}
.sz-ranking-table__delta--flat {
    color: rgba(120, 150, 175, 0.98);
    font-weight: 700;
    letter-spacing: -0.04em;
    font-size: 0.66rem;
}
html[data-theme="light"] .sz-ranking-table__delta--flat {
    color: rgba(65, 90, 115, 0.9);
}
.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-ranking-table__who .sz-ranking-table__group-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sz-ranking-table__you {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4ade80;
    padding: 0.1rem 0.32rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
}

html[data-theme="light"] .sz-ranking-table__you {
    color: #15803d;
    background: rgba(34, 197, 94, 0.12);
}

.sz-ranking-table__player {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.sz-ranking-table__player-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
    min-width: 0;
    max-width: 100%;
}

.sz-ranking-table__player-wrap .sz-ranking-table__who,
.sz-ranking-table__player-wrap .sz-ranking-table__who--link {
    max-width: 100%;
}

.sz-ranking-table__player-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.sz-ranking-tip-bar {
    position: relative;
    width: 6.5rem;
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(220, 38, 38, 0.55);
    flex-shrink: 0;
}

.sz-ranking-tip-bar__filled {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: 999px 0 0 999px;
    background: var(--sz-green, #2d6a4f);
}

html[data-theme="dark"] .sz-ranking-tip-bar {
    background: rgba(248, 113, 113, 0.45);
}

html[data-theme="dark"] .sz-ranking-tip-bar__filled {
    background: #52b788;
}

/* Ranglisten (Tipper + Tippgruppen): Desktop etwas großzügiger */
.sz-ranking-table--groups,
.sz-ranking-table--group-members,
.sz-ranking-table--tippers {
    font-size: 1rem;
}

.sz-ranking-table--groups thead th,
.sz-ranking-table--group-members thead th,
.sz-ranking-table--tippers thead th {
    font-size: 0.85rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.sz-ranking-table--groups tbody td,
.sz-ranking-table--group-members tbody td,
.sz-ranking-table--tippers tbody td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.sz-ranking-table--groups .sz-ranking-table__group-name,
.sz-ranking-table--group-members .sz-ranking-table__who > span:last-child,
.sz-ranking-table--tippers .sz-ranking-table__who > span:last-child {
    font-size: 0.98rem;
}

/* Gruppeneintritt: Mobil unter dem Namen (Kalender + dd.mm.yy), Desktop eigene Spalte */
.sz-ranking-joined--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.18rem;
    max-width: 100%;
    font-size: 0.68rem;
    line-height: 1.1;
    color: var(--sz-hero-meta, #94a3b8);
    font-variant-numeric: tabular-nums;
}
.sz-ranking-joined__icon {
    flex-shrink: 0;
    opacity: 0.82;
}
.sz-ranking-joined--cell {
    font-size: 0.82rem;
    white-space: nowrap;
    color: var(--sz-hero-meta, #94a3b8);
    font-variant-numeric: tabular-nums;
}
.sz-ranking-joined__empty {
    color: var(--sz-hero-meta, #94a3b8);
    opacity: 0.55;
}
.sz-ranking-joined__short {
    display: none;
}
html[data-theme="light"] .sz-ranking-joined--inline,
html[data-theme="light"] .sz-ranking-joined--cell {
    color: #64748b;
}

/* Mobil (Web ≤768px + Native App): ausgeblendete Spalten per Zeilen-(i) */
html.sz-table-row-details-active .sz-ranking-joined--inline {
    display: none !important;
}

html.sz-table-row-details-active .sz-table-row--has-details .sz-row-details-anchor,
html.sz-table-row-details-active .sz-table-row--has-details .sz-row-details-anchor-cell {
    position: relative;
    padding-right: 1.45rem;
}

html.sz-table-row-details-active .sz-row-details-spoiler {
    position: absolute;
    top: 0.12rem;
    right: 0;
    z-index: 4;
}

html.sz-table-row-details-active .sz-row-details-spoiler__summary {
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

html.sz-table-row-details-active .sz-row-details-spoiler__summary::-webkit-details-marker {
    display: none;
}

html.sz-table-row-details-active .sz-row-details-spoiler__body {
    position: absolute;
    right: 0;
    top: calc(100% + 0.2rem);
    min-width: 9.5rem;
    max-width: min(14rem, 72vw);
    padding: 0.45rem 0.55rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: var(--sz-panel-bg, rgba(12, 18, 28, 0.96));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 12;
}

html[data-theme="light"].sz-table-row-details-active .sz-row-details-spoiler__body {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

html.sz-table-row-details-active .sz-row-details-list {
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

html.sz-table-row-details-active .sz-row-details-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: baseline;
}

html.sz-table-row-details-active .sz-row-details-list dt {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sz-hero-meta, #94a3b8);
}

html.sz-table-row-details-active .sz-row-details-list dd {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--sz-text, #e2e8f0);
}

html.sz-table-row-details-active .sz-table-wrap:has(.sz-table--row-details) {
    overflow: visible;
}

@media (min-width: 769px) {
    .sz-ranking-table--group-members .sz-ranking-joined--inline {
        display: none;
    }
    .sz-ranking-table--group-members .sz-ranking-joined--cell .sz-ranking-joined__short {
        display: none;
    }
}

@media (max-width: 768px) {
    .sz-ranking-table--group-members .sz-ranking-table__col-joined,
    .sz-ranking-table--group-members .sz-ranking-table__col-joined--head {
        display: none;
    }
    .sz-ranking-table--group-members .sz-ranking-joined--inline {
        display: inline-flex;
    }
    .sz-ranking-joined--inline .sz-ranking-joined__full,
    .sz-home-group-ranking .sz-ranking-joined__full {
        display: none;
    }
    .sz-ranking-joined--inline .sz-ranking-joined__short,
    .sz-home-group-ranking .sz-ranking-joined__short {
        display: inline;
    }
}

/* Gruppen-Mitgliederrangliste: Stats + (i)-Details */
.sz-ranking-table--group-members .sz-ranking-table__player-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.35rem;
}

.sz-ranking-table--group-members .sz-ranking-group-extra {
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
}

.sz-ranking-table--group-members .sz-ranking-group-extra[open] .sz-ranking-group-extra__list {
    position: absolute;
    top: calc(100% + 0.15rem);
    right: 0;
    z-index: 6;
    border-radius: 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: var(--sz-panel-bg, #1e293b);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] .sz-ranking-table--group-members .sz-ranking-group-extra[open] .sz-ranking-group-extra__list {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.sz-ranking-group-extra__list {
    margin: 0;
    padding: 0.35rem 0.45rem;
    min-width: 9.5rem;
}

.sz-ranking-group-extra__row {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    font-size: 0.72rem;
    line-height: 1.35;
}

.sz-ranking-group-extra__row + .sz-ranking-group-extra__row {
    margin-top: 0.2rem;
}

.sz-ranking-group-extra__row dt {
    margin: 0;
    color: var(--sz-hero-meta, #94a3b8);
    font-weight: 500;
}

.sz-ranking-group-extra__row dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

html[data-theme="light"] .sz-ranking-group-extra__row dt {
    color: #64748b;
}

.sz-ranking-season-stats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.sz-ranking-season-stats__sep {
    opacity: 0.45;
    font-weight: 400;
}

.sz-ranking-table--group-members .sz-ranking-table__col-group-pts {
    font-weight: 700;
}

.sz-ranking-table--group-members .sz-ranking-table__col-season-stats {
    width: 3.25rem;
    min-width: 3.25rem;
}

/* Desktop: kompakte Spaltenüberschrift T·TD·E (Volllabel im title) */
.sz-ranking-table--group-members thead th.sz-ranking-table__col-season-stats .sz-ranking-table__th-long {
    display: none;
}

.sz-ranking-table--group-members thead th.sz-ranking-table__col-season-stats .sz-ranking-table__th-short {
    display: inline;
    font-size: 0.72rem;
    letter-spacing: -0.02em;
}

@media (max-width: 768px) {
    .sz-ranking-table--group-members .sz-ranking-table__col-season-stats,
    .sz-ranking-table--group-members thead th.sz-ranking-table__col-season-stats {
        width: 3.35rem;
        min-width: 3.35rem;
        max-width: 3.35rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }

    .sz-ranking-season-stats {
        font-size: 0.68rem;
        gap: 0.06rem;
    }

    .sz-ranking-table--group-members .sz-ranking-table__col-group-pts,
    .sz-ranking-table--group-members thead th.sz-ranking-table__col-group-pts {
        width: 2.2rem;
        min-width: 2.2rem;
        max-width: 2.2rem;
        font-size: 0.76rem;
    }

    .sz-ranking-table--group-members .sz-ranking-table__col-bonus,
    .sz-ranking-table--group-members thead th.sz-ranking-table__col-bonus {
        width: 1.85rem;
        min-width: 1.85rem;
        max-width: 1.85rem;
        font-size: 0.72rem;
    }

    .sz-ranking-table--group-members .sz-ranking-table__col-overall,
    .sz-ranking-table--group-members thead th.sz-ranking-table__col-overall {
        width: 2rem;
        min-width: 2rem;
        max-width: 2rem;
        font-size: 0.74rem;
        font-weight: 700;
    }
}

/* Ranglisten: kompakt auf Mobil (kein Horizontal-Scroll) */
.sz-ranking-table__th-short {
    display: none;
}

@media (max-width: 768px) {
    .sz-table-wrap:has(.sz-ranking-table) {
        overflow-x: hidden;
        box-sizing: border-box;
        padding-right: 0.15rem;
    }

    .sz-ranking-table {
        table-layout: fixed;
        width: 100%;
        font-size: 0.78rem;
    }

    /* display:flex auf td/th zerstört table-layout:fixed (Gruppen-Mitgliederrangliste) */
    .sz-ranking-table td.sz-ranking-table__player,
    .sz-ranking-table th.sz-ranking-table__player {
        display: table-cell;
        vertical-align: middle;
    }

    .sz-ranking-table thead th {
        padding: 0.42rem 0.18rem;
        font-size: 0.62rem;
        letter-spacing: 0.02em;
        line-height: 1.15;
        vertical-align: bottom;
    }

    .sz-ranking-table thead th.sz-ranking-table__place,
    .sz-ranking-table thead th.sz-ranking-table__num,
    .sz-ranking-table tbody td.sz-ranking-table__place,
    .sz-ranking-table tbody td.sz-ranking-table__num {
        text-align: center;
        padding-left: 0.24rem;
        padding-right: 0.24rem;
    }

    .sz-ranking-table thead th.sz-ranking-table__num:last-child,
    .sz-ranking-table tbody td.sz-ranking-table__num:last-child {
        padding-right: 0.32rem;
    }

    .sz-ranking-table thead th:not(.sz-ranking-table__place):not(.sz-ranking-table__num),
    .sz-ranking-table tbody td:not(.sz-ranking-table__place):not(.sz-ranking-table__num) {
        padding-left: 0.3rem;
        padding-right: 0.22rem;
    }

    .sz-ranking-table tbody td {
        padding-top: 0.38rem;
        padding-bottom: 0.38rem;
        vertical-align: middle;
    }

    .sz-ranking-table tbody td.sz-ranking-table__place,
    .sz-ranking-table tbody td.sz-ranking-table__num {
        padding-top: 0.38rem;
        padding-bottom: 0.38rem;
    }

    .sz-ranking-table__th-long {
        display: none;
    }

    .sz-ranking-table__th-short {
        display: inline;
    }

    .sz-ranking-table__place {
        width: 1.85rem;
        min-width: 1.85rem;
        max-width: 1.85rem;
        font-size: 0.72rem;
        text-align: center;
    }

    .sz-ranking-table__num:not(.sz-ranking-table__col-score):not(.sz-ranking-table__col-game-pts):not(.sz-ranking-table__col-bonus) {
        width: 1.7rem;
        min-width: 1.7rem;
        max-width: 1.7rem;
        font-size: 0.7rem;
        text-align: center;
    }

    .sz-ranking-table__col-members {
        width: 1.55rem;
        min-width: 1.55rem;
        max-width: 1.55rem;
    }

    .sz-ranking-table__col-score {
        width: 2.85rem;
        min-width: 2.85rem;
        max-width: 2.85rem;
        font-size: 0.64rem;
        letter-spacing: -0.02em;
    }

    .sz-ranking-table__col-games {
        width: 1.65rem;
        min-width: 1.65rem;
        max-width: 1.65rem;
    }

    .sz-ranking-table__col-game-pts,
    .sz-ranking-table__col-bonus {
        width: 1.65rem;
        min-width: 1.65rem;
        max-width: 1.65rem;
    }

    .sz-ranking-table__who {
        gap: 0.28rem;
        max-width: 100%;
    }

    .sz-ranking-table__who > span:last-child,
    .sz-ranking-table__group-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.25;
    }

    .sz-ranking-table .sz-avatar--40 {
        width: 1.75rem;
        height: 1.75rem;
        flex-shrink: 0;
    }

    .sz-ranking-table .sz-avatar--40 .sz-avatar__letter {
        font-size: 0.62rem;
    }

    .sz-ranking-table .sz-avatar--40 .sz-avatar__role {
        width: 0.58rem;
        height: 0.58rem;
    }

    .sz-ranking-table__player-head {
        gap: 0.22rem 0.35rem;
    }

    .sz-ranking-table__player-wrap {
        gap: 0.1rem;
    }

    .sz-ranking-table .sz-ranking-tip-bar {
        display: none;
    }

    .sz-ranking-table__you {
        font-size: 0.52rem;
        padding: 0.05rem 0.22rem;
    }

    .sz-ranking-table__delta {
        font-size: 0.56rem;
        margin-left: 0.06rem;
    }

    .sz-ranking-table .sz-badge {
        font-size: 0.58rem;
        padding: 0.08rem 0.28rem;
    }

    /* Ranglisten (Tipper + Tippgruppen): etwas größer als Basis-Kompakt */
    .sz-ranking-table--groups,
    .sz-ranking-table--group-members,
    .sz-ranking-table--tippers {
        font-size: 0.86rem;
    }

    .sz-ranking-table--groups thead th,
    .sz-ranking-table--group-members thead th,
    .sz-ranking-table--tippers thead th {
        font-size: 0.68rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .sz-ranking-table--groups tbody td,
    .sz-ranking-table--group-members tbody td,
    .sz-ranking-table--tippers tbody td {
        padding-top: 0.48rem;
        padding-bottom: 0.48rem;
    }

    .sz-ranking-table--groups .sz-ranking-table__place,
    .sz-ranking-table--group-members .sz-ranking-table__place,
    .sz-ranking-table--tippers .sz-ranking-table__place {
        font-size: 0.78rem;
        width: 2rem;
        min-width: 2rem;
        max-width: 2rem;
    }

    .sz-ranking-table--groups .sz-ranking-table__num:not(.sz-ranking-table__col-score),
    .sz-ranking-table--group-members .sz-ranking-table__num:not(.sz-ranking-table__col-season-stats),
    .sz-ranking-table--tippers .sz-ranking-table__num {
        font-size: 0.76rem;
    }

    .sz-ranking-table--groups .sz-ranking-table__col-score {
        font-size: 0.74rem;
        width: 3rem;
        min-width: 3rem;
        max-width: 3rem;
    }

    .sz-ranking-table--groups .sz-ranking-table__col-members {
        width: 1.7rem;
        min-width: 1.7rem;
        max-width: 1.7rem;
    }

    .sz-ranking-table--groups .sz-ranking-table__who > span:last-child,
    .sz-ranking-table--groups .sz-ranking-table__group-name,
    .sz-ranking-table--group-members .sz-ranking-table__who > span:last-child,
    .sz-ranking-table--tippers .sz-ranking-table__who > span:last-child {
        font-size: 0.9rem;
    }

    .sz-ranking-table--groups .sz-avatar--40,
    .sz-ranking-table--group-members .sz-avatar--40,
    .sz-ranking-table--tippers .sz-avatar--40 {
        width: 2rem;
        height: 2rem;
    }

    .sz-ranking-table--groups .sz-avatar--40 .sz-avatar__letter,
    .sz-ranking-table--group-members .sz-avatar--40 .sz-avatar__letter,
    .sz-ranking-table--tippers .sz-avatar--40 .sz-avatar__letter {
        font-size: 0.72rem;
    }
}

@media (max-width: 560px) {
    .sz-ranking-table {
        font-size: 0.72rem;
    }

    .sz-ranking-table thead th {
        font-size: 0.56rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .sz-ranking-table__place {
        width: 1.65rem;
        min-width: 1.65rem;
        max-width: 1.65rem;
        font-size: 0.68rem;
    }

    .sz-ranking-table__num:not(.sz-ranking-table__col-score):not(.sz-ranking-table__col-game-pts):not(.sz-ranking-table__col-bonus) {
        width: 1.55rem;
        min-width: 1.55rem;
        max-width: 1.55rem;
        font-size: 0.68rem;
    }

    .sz-ranking-table__col-members {
        width: 1.45rem;
        min-width: 1.45rem;
        max-width: 1.45rem;
    }

    .sz-ranking-table__col-score {
        width: 2.65rem;
        min-width: 2.65rem;
        max-width: 2.65rem;
        font-size: 0.62rem;
    }

    .sz-ranking-table .sz-avatar--40 {
        width: 1.65rem;
        height: 1.65rem;
    }

    .sz-ranking-table__who > span:last-child,
    .sz-ranking-table__group-name {
        font-size: 0.84rem;
    }

    .sz-ranking-table--groups,
    .sz-ranking-table--group-members,
    .sz-ranking-table--tippers {
        font-size: 0.82rem;
    }

    .sz-ranking-table--groups thead th,
    .sz-ranking-table--group-members thead th,
    .sz-ranking-table--tippers thead th {
        font-size: 0.62rem;
    }

    .sz-ranking-table--groups .sz-ranking-table__place,
    .sz-ranking-table--group-members .sz-ranking-table__place,
    .sz-ranking-table--tippers .sz-ranking-table__place {
        font-size: 0.74rem;
        width: 1.85rem;
        min-width: 1.85rem;
        max-width: 1.85rem;
    }

    .sz-ranking-table--groups .sz-ranking-table__num:not(.sz-ranking-table__col-score),
    .sz-ranking-table--group-members .sz-ranking-table__num:not(.sz-ranking-table__col-season-stats),
    .sz-ranking-table--tippers .sz-ranking-table__num {
        font-size: 0.72rem;
    }

    .sz-ranking-table--groups .sz-ranking-table__col-score {
        font-size: 0.7rem;
        width: 2.85rem;
        min-width: 2.85rem;
        max-width: 2.85rem;
    }

    .sz-ranking-table--groups .sz-ranking-table__who > span:last-child,
    .sz-ranking-table--groups .sz-ranking-table__group-name,
    .sz-ranking-table--group-members .sz-ranking-table__who > span:last-child,
    .sz-ranking-table--tippers .sz-ranking-table__who > span:last-child {
        font-size: 0.92rem;
    }

    .sz-ranking-table--groups .sz-avatar--40,
    .sz-ranking-table--group-members .sz-avatar--40,
    .sz-ranking-table--tippers .sz-avatar--40 {
        width: 1.85rem;
        height: 1.85rem;
    }
}

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

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

.sz-hero__title-row-text {
    min-width: 0;
    flex: 1 1 12rem;
}

.sz-hero__title-row-text .sz-kicker {
    margin: 0 0 0.2rem;
}

.sz-hero__title-row--season .sz-hero__season-av {
    flex-shrink: 0;
}

.sz-home-brand__title-with-av {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
}

.sz-home-brand__season-av {
    flex-shrink: 0;
}

.sz-kicker--with-av {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.sz-kicker__av {
    flex-shrink: 0;
}

.sz-st-select__season-av {
    flex-shrink: 0;
}

.sz-tippspiel-picker-card__icon .sz-tippspiel-picker-card__av,
.sz-tippspiel-picker-card__icon .sz-avatar {
    width: 3rem;
    height: 3rem;
}

.sz-tippspiel-picker-card__icon:has(.sz-avatar) {
    background: transparent;
    width: auto;
    height: auto;
}

.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;
    }

    /* Standard-Ansicht: Heim- und Gast-Wappen immer nebeneinander (nicht untereinander) */
    .sz-matches--standard .sz-match__teams {
        grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
        gap: 0.35rem 0.45rem;
        align-items: center;
    }

    .sz-matches--standard .sz-team {
        min-width: 0;
    }

    .sz-matches--standard .sz-team__crest {
        width: min(88px, 26vw);
        height: auto;
    }

    .sz-matches--standard .sz-team__crest.sz-crest {
        --sz-crest-size: min(5.5rem, 26vw);
        max-width: min(5.5rem, 26vw) !important;
    }

    .sz-matches--standard .sz-team strong {
        display: block;
        font-size: 0.72rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

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

    .sz-matches--standard .sz-match__center {
        max-width: min(5.5rem, 30vw);
        padding: 0 0.1rem;
    }

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

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

    .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(106px, 44vw);
    }

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

/* —— 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;
}
.page-chat-hub .sz-chat-hero:has(.sz-chat-hero__filter) {
    padding-bottom: 1rem;
}
.page-chat-hub .sz-chat-hero:has(.sz-chat-hero__filter) .sz-chat-hero__lead {
    font-size: 0.88rem;
    max-width: 26rem;
}
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__filter {
    position: relative;
    z-index: 1;
    margin: 0.85rem auto 0;
    max-width: 34rem;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.45rem 0.55rem;
    padding: 0.45rem 0.5rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html[data-theme="light"] .sz-chat-hero__filter {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(0, 60, 10, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.sz-chat-hub-filter.is-active {
    border-color: rgba(241, 116, 50, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 2px rgba(241, 116, 50, 0.12);
}
html[data-theme="light"] .sz-chat-hub-filter.is-active {
    border-color: rgba(241, 116, 50, 0.5);
    box-shadow: 0 0 0 2px rgba(241, 116, 50, 0.1);
}
.sz-chat-hub-filter__search {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.55rem 0 0.45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}
html[data-theme="light"] .sz-chat-hub-filter__search {
    background: rgba(0, 60, 10, 0.04);
}
.sz-chat-hub-filter__search:focus-within {
    border-color: rgba(241, 116, 50, 0.45);
    background: rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] .sz-chat-hub-filter__search:focus-within {
    background: #fff;
}
.sz-chat-hub-filter__search-icon {
    display: flex;
    color: rgba(94, 207, 138, 0.85);
    flex-shrink: 0;
}
html[data-theme="light"] .sz-chat-hub-filter__search-icon {
    color: #1a6b42;
}
.sz-chat-hub-filter__input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.2;
    padding: 0.42rem 0;
    outline: none;
}
.sz-chat-hub-filter__input::placeholder {
    color: var(--sz-hero-meta, var(--sz-small));
    opacity: 0.85;
}
.sz-chat-hub-filter__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 0.85rem;
    width: 0.85rem;
    background: radial-gradient(circle, var(--sz-orange, #f17432) 38%, transparent 40%);
    cursor: pointer;
}
.sz-chat-hub-filter--actions-only {
    padding: 0.35rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}
html[data-theme="light"] .sz-chat-hub-filter--actions-only {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.sz-chat-hub-filter__toolbar {
    flex: 1 1 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
}
.sz-chat-hub-filter--actions-only .sz-chat-hub-filter__toolbar {
    justify-content: center;
}
.sz-chat-hub-filter__segments {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.12rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
}
.sz-chat-hub-filter__new-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.32rem 0.72rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(155deg, #4ecf8a 0%, #1f8f4f 52%, #156b3a 100%);
    box-shadow:
        0 2px 10px rgba(46, 168, 98, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}
.sz-chat-hub-filter__new-btn:hover {
    filter: brightness(1.06);
    box-shadow:
        0 3px 14px rgba(46, 168, 98, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.sz-chat-hub-filter__new-btn:active {
    transform: translateY(1px);
}
.sz-chat-hub-filter__new-btn:focus-visible {
    outline: 2px solid #4ecf8a;
    outline-offset: 2px;
}
html[data-theme="light"] .sz-chat-hub-filter__new-btn {
    color: #fff;
    box-shadow:
        0 2px 10px rgba(31, 143, 79, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html[data-theme="light"] .sz-chat-hub-filter__segments {
    background: rgba(0, 60, 10, 0.06);
}
.sz-chat-hub-filter__seg {
    position: relative;
    margin: 0;
    cursor: pointer;
}
.sz-chat-hub-filter__seg input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.sz-chat-hub-filter__seg span {
    display: block;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--sz-hero-meta, var(--sz-small));
    transition:
        color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
    white-space: nowrap;
}
.sz-chat-hub-filter__seg input:checked + span {
    color: #fff;
    background: linear-gradient(165deg, #f17432 0%, #c45a20 100%);
    box-shadow: 0 2px 8px rgba(241, 116, 50, 0.35);
}
html[data-theme="light"] .sz-chat-hub-filter__seg input:checked + span {
    color: #fff;
}
.sz-chat-hub-filter__seg input:focus-visible + span {
    outline: 2px solid var(--sz-orange, #f17432);
    outline-offset: 2px;
}
.sz-chat-hub-filter__empty {
    margin: 0.5rem 0 0;
    padding: 0.85rem 1rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--sz-hero-meta, var(--sz-small));
    border-radius: 12px;
    border: 1px dashed rgba(241, 116, 50, 0.28);
    background: rgba(241, 116, 50, 0.06);
}
@media (max-width: 420px) {
    .sz-chat-hero__filter {
        border-radius: 14px;
        padding: 0.4rem;
    }
    .sz-chat-hub-filter__toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .sz-chat-hub-filter__segments {
        width: 100%;
        justify-content: stretch;
    }
    .sz-chat-hub-filter__new-btn {
        width: 100%;
        text-align: center;
    }
    .sz-chat-hub-filter__seg {
        flex: 1 1 0;
        text-align: center;
    }
    .sz-chat-hub-filter__seg span {
        padding-inline: 0.4rem;
        font-size: 0.72rem;
    }
}
.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,
.sz-chat-roomlist__item--unread .sz-chat-roomlist__card {
    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__card .sz-chat-roomlist__link {
    box-shadow: none;
    border-color: transparent;
}

.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-spoiler {
    margin: 0.85rem 0 0;
}

.sz-chat-roomlist--nested {
    margin: 0;
    padding: 0;
}

.sz-chat-roomlist--nested .sz-chat-roomlist__item:first-child .sz-chat-roomlist__link {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

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

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

/* Systemnachricht in der Chat-Liste: eine Karte, Papierkorb innen */
.sz-chat-roomlist__card {
    position: relative;
    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;
}

html[data-theme="light"] .sz-chat-roomlist__card {
    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);
}

.sz-chat-roomlist__card .sz-chat-roomlist__link {
    border: none;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
}

.sz-chat-roomlist__card .sz-chat-roomlist__link:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.sz-chat-roomlist__card: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__card:hover {
    border-color: rgba(241, 116, 50, 0.55);
    box-shadow: 0 12px 32px rgba(0, 60, 10, 0.14);
}

.sz-chat-roomlist__card--has-delete .sz-chat-roomlist__link {
    padding-right: 2.35rem;
}

.sz-chat-roomlist__card .sz-mail-list__delete--in-card {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
}

.sz-chat-roomlist__card .sz-mail-list__delete--in-card .sz-mail-list__delete-btn {
    width: 2rem;
    min-height: 2rem;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .sz-chat-roomlist__card .sz-mail-list__delete--in-card .sz-mail-list__delete-btn {
    background: rgba(0, 40, 12, 0.06);
}

.sz-chat-roomlist__card .sz-mail-list__delete--in-card .sz-mail-list__delete-btn:hover,
.sz-chat-roomlist__card .sz-mail-list__delete--in-card .sz-mail-list__delete-btn:focus-visible {
    background: rgba(241, 116, 50, 0.18);
}

.sz-chat-roomlist__avatar--system {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sz-chat-roomlist__avatar--system .sz-mail-kind {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
}

.sz-chat-roomlist__title-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 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);
}

/* Kompakte Nachrichtenliste (Handy) */
@media (max-width: 560px) {
    .sz-chat-roomlist {
        gap: 0.38rem;
    }

    .sz-chat-roomlist__link {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: start;
        gap: 0.28rem 0.5rem;
        padding: 0.5rem 0.55rem;
        border-radius: 11px;
    }

    .sz-chat-roomlist__card {
        border-radius: 11px;
    }

    .sz-chat-roomlist__card--has-delete .sz-chat-roomlist__link {
        padding-right: 2.15rem;
    }

    .sz-chat-roomlist__card .sz-mail-list__delete--in-card {
        right: 0.35rem;
    }

    .sz-chat-roomlist__card .sz-mail-list__delete--in-card .sz-mail-list__delete-btn {
        width: 1.85rem;
        min-height: 1.85rem;
    }

    .sz-chat-roomlist__card .sz-mail-list__delete--in-card .sz-mail-list__delete-btn svg {
        width: 15px;
        height: 15px;
    }

    .sz-chat-roomlist__chevron {
        display: none;
    }

    .sz-chat-roomlist__avatar {
        grid-row: 1 / span 2;
        align-self: start;
    }

    .sz-chat-roomlist__avatar--system .sz-mail-kind,
    .sz-chat-roomlist__avatar--letter {
        width: 2.5rem;
        height: 2.5rem;
    }

    .sz-chat-roomlist__avatar .sz-avatar--chatlist {
        width: 2.5rem;
        height: 2.5rem;
    }

    .sz-chat-roomlist__avatar .sz-avatar--chatlist .sz-avatar__letter {
        font-size: 0.95rem;
    }

    .sz-chat-roomlist__body {
        grid-column: 2;
        gap: 0.12rem;
    }

    .sz-chat-roomlist__top {
        align-items: center;
        gap: 0.35rem;
    }

    .sz-chat-roomlist__title {
        font-size: 0.9rem;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .sz-chat-roomlist__meta {
        flex-shrink: 0;
    }

    .sz-chat-roomlist__time {
        font-size: 0.65rem;
    }

    .sz-chat-roomlist__unread {
        min-width: 1.15rem;
        padding: 0.1em 0.35em;
        font-size: 0.62rem;
    }

    .sz-chat-roomlist__tags {
        margin-top: 0;
        gap: 0.25rem;
    }

    .sz-chat-roomlist__tag {
        font-size: 0.6rem;
        padding: 0.06rem 0.35rem;
    }

    .sz-chat-roomlist__tag--season {
        font-size: 0.62rem;
    }

    .sz-chat-roomlist__preview {
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.3;
        -webkit-line-clamp: 1;
        opacity: 0.78;
    }

    .sz-chat-roomlist__dot {
        width: 6px;
        height: 6px;
    }

    .sz-chat-roomlist__link:hover {
        transform: none;
    }

    .sz-chat-roomlist__card:hover {
        transform: none;
    }
}

.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;
}

/* Fallback wenn <dialog>.showModal() in der App-WebView nicht zuverlässig ist */
dialog.sz-chat-new-dialog.sz-dialog--fallback-open {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.52);
    border: none;
    overflow: auto;
}

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

html.sz-dialog-open {
    overflow: hidden;
}

/* Geschlossene Dialoge dürfen keine Klicks blockieren (Fallback-/Top-Layer-Reste) */
dialog.sz-chat-new-dialog:not([open]):not(.sz-dialog--fallback-open) {
    pointer-events: none !important;
}

dialog.sz-chat-new-dialog.sz-dialog--fallback-open:not([open]) {
    display: none !important;
    pointer-events: none !important;
}

.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-social-safety-dialog__body {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.sz-chat-social-safety-dialog__body p {
    margin: 0 0 0.75rem;
}

.sz-chat-social-safety-dialog__list {
    margin: 0 0 0.75rem 1.1rem;
    padding: 0;
}

.sz-chat-social-safety-dialog__list li {
    margin-bottom: 0.45rem;
}

.sz-wa__composer.is-social-safety-blocked {
    opacity: 0.55;
    pointer-events: none;
}

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

.sz-parental-minors-list__item {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sz-parental-minors-list__item:last-child {
    border-bottom: none;
}

.sz-parental-minors-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.sz-parental-consent-form {
    margin-top: 1rem;
}

.sz-chat-room-blocked-hint {
    margin: 0.75rem 1rem 0;
}

.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%;
    overflow: visible;
}

.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,
.sz-panel .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;
    -webkit-overflow-scrolling: touch;
    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));
}

.sz-combobox.sz-combobox--list-open {
    position: relative;
    z-index: 30;
}

/* App / schmales Web + Tastatur: Liste im sichtbaren Bereich unter dem Suchfeld */
html.sz-keyboard-open .sz-combobox.sz-combobox--list-open .sz-combobox__list:not([hidden]),
html.sz-native-shell .sz-combobox.sz-combobox--list-open .sz-combobox__list:not([hidden]) {
    position: relative;
    top: 0;
    max-height: var(--sz-combobox-list-max-h, min(14rem, 45vh));
}

html.sz-keyboard-open body.page-tippgruppe-manage .sz-hero,
html.sz-native-shell.sz-keyboard-open body.page-tippgruppe-manage .sz-hero {
    display: none;
}

html.sz-keyboard-open body.page-tippgruppe-manage .sz-banner,
html.sz-native-shell.sz-keyboard-open body.page-tippgruppe-manage .sz-banner {
    display: none;
}

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,
.sz-panel .sz-combobox__option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    line-height: 1.35;
    word-break: break-word;
    color: var(--sz-text);
}

.sz-panel .sz-combobox__option:has(.sz-combobox__option-avatar),
.sz-chat-start .sz-combobox__option:has(.sz-combobox__option-avatar) {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.sz-combobox__option-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sz-combobox__option-avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sz-green);
    color: #111;
    font-size: 0.78rem;
    font-weight: 800;
}

.sz-combobox__option-label {
    min-width: 0;
}

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: volle Seite (kein Popup-Overlay; besser mit App-Tastatur) —— */
body.page-chat-room {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: var(--sz-visual-height, 100dvh);
    min-height: var(--sz-visual-height, 100dvh);
    max-height: var(--sz-visual-height, 100dvh);
    box-sizing: border-box;
}

body.page-chat-room .sz-topbar {
    flex-shrink: 0;
    position: relative;
    top: auto;
}

body.page-chat-room .sz-footer {
    display: none;
}

body.page-chat-room .sz-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.page-chat-room .sz-main > .sz-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.sz-chat-room-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(42rem, 100%);
    margin: 0 auto;
    box-sizing: border-box;
    background: rgba(252, 253, 252, 0.99);
    border-top: 1px solid rgba(0, 60, 10, 0.1);
    border-bottom: 1px solid rgba(0, 60, 10, 0.1);
}

html[data-theme="dark"] .sz-chat-room-page {
    background: rgba(10, 22, 14, 0.98);
    border-color: rgba(255, 255, 255, 0.1);
}

.sz-chat-room-dialog__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.35rem 0.75rem;
    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__title {
    margin: 0;
    font-size: 0.95rem;
    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.45rem;
    margin: 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__infolink,
.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);
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

.sz-chat-room-dialog__infolink svg {
    display: block;
}

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

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

.sz-chat-members-dialog {
    border: 0;
    border-radius: 14px;
    padding: 0;
    max-width: min(22rem, calc(100vw - 2rem));
    width: 100%;
    background: #fff;
    color: #1a221a;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

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

.sz-chat-members-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.sz-chat-members-dialog__inner {
    padding: 0.85rem 0.95rem 1rem;
}

.sz-chat-members-dialog__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.65rem;
}

.sz-chat-members-dialog__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    flex: 1 1 auto;
}

.sz-chat-members-dialog__count {
    margin: 0;
    width: 100%;
    font-size: 0.82rem;
    color: var(--sz-muted, #555);
}

.sz-chat-members-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

html[data-theme="dark"] .sz-chat-members-dialog__title {
    color: var(--sz-news-card-title, #e8f4e8);
}

html[data-theme="dark"] .sz-chat-members-dialog__count,
html[data-theme="dark"] .sz-chat-members-dialog__you,
html[data-theme="dark"] .sz-chat-members-dialog__status {
    color: var(--sz-muted);
}

html[data-theme="dark"] .sz-chat-members-dialog__name {
    color: var(--sz-cream);
}

html[data-theme="dark"] .sz-chat-members-dialog__close {
    background: rgba(255, 255, 255, 0.12);
    color: var(--sz-cream);
}

.sz-chat-read-receipt-dialog {
    border: 0;
    border-radius: 14px;
    padding: 0;
    max-width: min(22rem, calc(100vw - 2rem));
    width: 100%;
    background: #fff;
    color: #1a221a;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .sz-chat-read-receipt-dialog {
    background: var(--sz-hero-bg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--sz-cream);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.65);
}

.sz-chat-read-receipt-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.sz-chat-read-receipt-dialog__inner {
    padding: 0.85rem 0.95rem 1rem;
}

.sz-chat-read-receipt-dialog__head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.sz-chat-read-receipt-dialog__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    flex: 1 1 auto;
}

.sz-chat-read-receipt-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

html[data-theme="dark"] .sz-chat-read-receipt-dialog__title {
    color: var(--sz-news-card-title, #e8f4e8);
}

html[data-theme="dark"] .sz-chat-read-receipt-dialog__close {
    background: rgba(255, 255, 255, 0.12);
    color: var(--sz-cream);
}

.sz-chat-read-receipt-dialog__section + .sz-chat-read-receipt-dialog__section {
    margin-top: 0.85rem;
}

.sz-chat-read-receipt-dialog__section-title {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sz-muted, #555);
}

html[data-theme="dark"] .sz-chat-read-receipt-dialog__section-title {
    color: var(--sz-muted);
}

.sz-chat-read-receipt-dialog__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sz-chat-read-receipt-dialog__item {
    padding: 0.35rem 0;
    font-size: 0.92rem;
}

.sz-chat-read-receipt-dialog__status {
    font-size: 0.88rem;
    color: var(--sz-muted, #666);
    padding: 0.2rem 0;
}

html[data-theme="dark"] .sz-chat-read-receipt-dialog__item {
    color: var(--sz-cream);
}

.sz-chat-members-dialog__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(50vh, 320px);
    overflow-y: auto;
}

.sz-chat-members-dialog__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sz-chat-members-dialog__item:first-child {
    border-top: 0;
}

html[data-theme="dark"] .sz-chat-members-dialog__item {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.sz-chat-members-dialog__name {
    font-size: 0.92rem;
    font-weight: 600;
}

.sz-chat-members-dialog__you {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--sz-muted, #555);
}

.sz-chat-members-dialog__status {
    margin: 0;
    padding: 0.5rem 0;
    font-size: 0.88rem;
    color: var(--sz-muted, #555);
}

.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;
}

.page-chat-room .sz-chat-room-page .sz-wa {
    min-height: 0;
}

/* Chat-Karte füllt die Seite; Nachrichtenliste scrollt intern */
.page-chat-room .sz-chat-room-page .sz-wa {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    border-radius: 0;
    border: 0;
    border-top: 1px solid rgba(0, 60, 10, 0.08);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

@media (max-width: 560px) {
    .sz-chat-room-page {
        max-width: 100%;
        border-left: 0;
        border-right: 0;
    }
}

html.sz-native-shell .sz-chat-room-page {
    max-width: 100%;
    border-left: 0;
    border-right: 0;
}

/* Overlay-Tastatur (Mobile-Browser): sichtbare Seitenhöhe – inset ist in --sz-visual-height enthalten */
html.sz-keyboard-open[data-sz-keyboard-layout="overlay"]:not(.sz-native-shell) body.page-chat-room {
    height: var(--sz-visual-height, var(--sz-app-height, 100dvh));
    max-height: var(--sz-visual-height, var(--sz-app-height, 100dvh));
}

html.sz-keyboard-open .page-chat-room .sz-wa__composer {
    padding-bottom: 0.45rem;
}

/* Native App: Safe Area kommt von der Shell – kein env() am Composer (sonst Leerfeld unten) */
html.sz-native-shell .page-chat-room .sz-wa__composer {
    padding-bottom: 0.45rem;
}

/*
 * Native App: eine Anpassung – Seitenhöhe verkleinern, Composer bleibt im Flex-Layout unten.
 * Kein position:fixed + bottom:inset (sonst doppelter Offset mit WebView-Resize).
 */
html.sz-native-shell.sz-keyboard-open[data-sz-keyboard-layout="overlay"] body.page-chat-room {
    height: var(--sz-visual-height, var(--sz-app-height, 100dvh));
    max-height: var(--sz-visual-height, var(--sz-app-height, 100dvh));
}

html.sz-native-shell.sz-keyboard-open[data-sz-keyboard-layout="resize"] body.page-chat-room {
    height: var(--sz-visual-height, var(--sz-app-height, 100dvh));
    max-height: var(--sz-visual-height, var(--sz-app-height, 100dvh));
}

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: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

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

.sz-wa__history-top {
    margin: 0 0 0.5rem;
    padding: 0.35rem 0.5rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--sz-small, #666);
}

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

.sz-wa__unread-marker {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.7rem 0 0.85rem;
    padding: 0 0.25rem;
    scroll-margin-top: 0.5rem;
    pointer-events: none;
    user-select: none;
}

.sz-wa__unread-marker-line {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(25, 122, 196, 0.42);
}

.sz-wa__unread-marker-label {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #197ac4;
    text-transform: none;
    white-space: nowrap;
}

html[data-theme="dark"] .sz-wa__unread-marker-line {
    background: rgba(111, 188, 255, 0.38);
}

html[data-theme="dark"] .sz-wa__unread-marker-label {
    color: #6fbcff;
}

.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__author {
    margin-right: auto;
    max-width: min(12rem, 55%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    opacity: 0.72;
    color: rgba(0, 40, 18, 0.7);
}

html[data-theme="dark"] .sz-wa-bubble__author {
    color: rgba(220, 235, 225, 0.75);
}

.sz-wa-bubble--them.sz-wa-bubble--user .sz-wa-bubble__author {
    color: hsl(var(--sz-wa-user-h, 140), 45%, 28%);
    opacity: 0.85;
}

html[data-theme="dark"] .sz-wa-bubble--them.sz-wa-bubble--user .sz-wa-bubble__author {
    color: hsl(var(--sz-wa-user-h, 140), 30%, 78%);
}

.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 {
    border-radius: 4px 10px 10px 10px;
}

/* Fremde Nachrichten: pro Raum + Tipper stabile HSL-Farbe (--sz-wa-user-h) */
.sz-wa-bubble--them.sz-wa-bubble--user {
    background: hsl(var(--sz-wa-user-h), 44%, 90%);
    color: hsl(var(--sz-wa-user-h), 52%, 14%);
    border: 1px solid hsla(var(--sz-wa-user-h), 38%, 38%, 0.16);
}

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

html[data-theme="dark"] .sz-wa-bubble--them.sz-wa-bubble--user {
    background: hsl(var(--sz-wa-user-h), 34%, 30%);
    color: hsl(var(--sz-wa-user-h), 16%, 94%);
    border-color: hsla(var(--sz-wa-user-h), 32%, 58%, 0.28);
    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--them.sz-wa-bubble--user .sz-wa-bubble__quote {
    border-left-color: hsl(var(--sz-wa-user-h), 48%, 40%);
    background: hsla(var(--sz-wa-user-h), 42%, 42%, 0.12);
}

html[data-theme="dark"] .sz-wa-bubble--them.sz-wa-bubble--user .sz-wa-bubble__quote {
    border-left-color: hsl(var(--sz-wa-user-h), 42%, 58%);
    background: hsla(var(--sz-wa-user-h), 28%, 18%, 0.5);
}

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

.sz-wa-bubble--them.sz-wa-bubble--user .sz-wa-bubble__quote-author {
    color: hsl(var(--sz-wa-user-h), 50%, 30%);
}

html[data-theme="dark"] .sz-wa-bubble--them.sz-wa-bubble--user .sz-wa-bubble__quote-author {
    color: hsl(var(--sz-wa-user-h), 38%, 74%);
}

.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: contain;
    vertical-align: middle;
}

.sz-wa-bubble__video {
    display: block;
    width: 100%;
    max-width: min(100%, 320px);
    max-height: 240px;
    margin: 0;
    border-radius: 8px;
    background: #000;
}

.sz-wa-bubble__videowrap {
    position: relative;
    display: inline-block;
    max-width: min(100%, 320px);
    margin: 0.15rem 0 0.25rem;
}

.sz-wa-bubble__video-expand {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, 0.52);
    cursor: pointer;
    backdrop-filter: blur(2px);
}

.sz-wa-bubble__video-expand:hover {
    background: rgba(0, 0, 0, 0.68);
}

.sz-wa-bubble__video-expand svg {
    display: block;
}

.sz-wa-video-viewer {
    width: min(96vw, 960px);
    height: min(92vh, 720px);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: #000;
    color: #fff;
}

.sz-wa-video-viewer--expanded,
.sz-wa-video-viewer:fullscreen,
.sz-wa-video-viewer:-webkit-full-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
}

.sz-wa-video-viewer::backdrop {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(2px);
}

.sz-wa-video-viewer__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% - 3.25rem);
    min-height: 0;
    background: #000;
    overflow: hidden;
}

.sz-wa-video-viewer--expanded .sz-wa-video-viewer__stage,
.sz-wa-video-viewer:fullscreen .sz-wa-video-viewer__stage,
.sz-wa-video-viewer:-webkit-full-screen .sz-wa-video-viewer__stage {
    height: calc(100% - 3.25rem);
}

.sz-wa-video-viewer__rotor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
    transform-origin: center center;
}

.sz-wa-video-viewer__rotor--landscape {
    flex-shrink: 0;
}

.sz-wa-video-viewer__video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: #000;
}

.sz-wa-video-viewer__video--rotated {
    max-width: 100%;
    max-height: 100%;
}

.sz-wa-video-viewer__toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    height: 3.25rem;
    padding: 0 0.75rem max(0.35rem, env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, 0.88);
}

.sz-wa-video-viewer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 999px;
    font-size: 1.15rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
}

.sz-wa-video-viewer__btn:hover {
    background: rgba(255, 255, 255, 0.24);
}

.sz-wa-video-viewer__btn--landscape.is-active {
    color: #111;
    background: #fff;
}

.sz-wa-video-viewer__btn--close {
    font-size: 1.45rem;
}

.sz-wa__attach-preview__video {
    display: block;
    width: 100%;
    max-height: 160px;
    border-radius: 8px;
    background: #000;
}

html[data-theme="dark"] .sz-wa__attach-preview__video {
    background: #111;
}

.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-bubble__ticks--partial .sz-wa-bubble__tick {
    color: rgba(0, 0, 0, 0.52);
}

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

button.sz-wa-bubble__ticks {
    border: 0;
    padding: 0;
    margin: 0 0 0 0.22rem;
    background: transparent;
    font: inherit;
    cursor: pointer;
    line-height: 1;
}

button.sz-wa-bubble__ticks:focus-visible {
    outline: 2px solid var(--sz-orange, #e85d04);
    outline-offset: 2px;
    border-radius: 3px;
}

.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-avatar-lightbox-trigger {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    border-radius: 50%;
    line-height: 0;
    vertical-align: top;
}

.sz-avatar-lightbox-trigger:focus-visible {
    outline: 2px solid var(--sz-orange, #f17432);
    outline-offset: 3px;
}

.sz-avatar-lightbox-trigger .sz-avatar {
    pointer-events: none;
}

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

.sz-wa-bubble__text a.sz-wa-bubble__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

.sz-wa-bubble__text a.sz-wa-bubble__link:hover,
.sz-wa-bubble__text a.sz-wa-bubble__link:focus-visible {
    opacity: 0.88;
}

.sz-wa-bubble--me .sz-wa-bubble__text a.sz-wa-bubble__link {
    color: #063a06;
}

html[data-theme="dark"] .sz-wa-bubble--me .sz-wa-bubble__text a.sz-wa-bubble__link {
    color: #d8f5d0;
}

.sz-wa-bubble__quote-text a.sz-wa-bubble__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sz-hero__actions {
    margin: 0.75rem 0 0;
}

.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;
    align-items: center;
}

.sz-wa__emoji-cell {
    border: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    margin: 0;
    font-size: 1.22rem;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border-radius: 6px;
    vertical-align: middle;
}

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

.sz-wa__emoji-cell--recent {
    background: rgba(241, 116, 50, 0.14);
}

.sz-wa__emoji-cell--recent:hover {
    background: rgba(241, 116, 50, 0.22);
}

.sz-wa__emoji-grid-break {
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    margin: 0.1rem 0 0.05rem;
    border: 0;
    border-top: 2px solid rgba(0, 92, 36, 0.2);
    pointer-events: none;
}

html[data-theme="dark"] .sz-wa__emoji-grid-break {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Native App (WebView): Emoji-Auswahl vergrößert, Touch-Ziele */
html.sz-native-shell .sz-wa__emoji-grid {
    gap: 0.26rem;
}

html.sz-native-shell .sz-wa__emoji-cell {
    font-size: 1.83rem;
    width: 2.06rem;
    height: 2.06rem;
    padding: 0;
}

.sz-wa__picker-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.35rem 0.45rem 0.15rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .sz-wa__picker-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.sz-wa__picker-tab {
    flex: 1;
    border: 0;
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: inherit;
}

.sz-wa__picker-tab.is-active {
    background: rgba(241, 116, 50, 0.18);
    color: #f17432;
}

.sz-wa__picker-panel {
    max-height: min(46vh, 18rem);
    overflow-y: auto;
}

.sz-wa__sticker-grid,
.sz-wa__gif-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.4rem 0.35rem 0.5rem;
}

.sz-wa__sticker-cell,
.sz-wa__gif-cell {
    border: 0;
    padding: 0.2rem;
    margin: 0;
    cursor: pointer;
    background: transparent;
    border-radius: 8px;
    line-height: 0;
}

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

.sz-wa__sticker-cell img {
    width: 40px;
    height: 40px;
    display: block;
}

.sz-wa__gif-cell img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.sz-wa__gif-search {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.35rem 0.35rem 0.25rem;
    background: var(--sz-surface, #fff);
}

.sz-wa__gif-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font: inherit;
}

.sz-wa__gif-status {
    width: 100%;
    margin: 0.5rem 0;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
}

.sz-wa__gif-more {
    display: block;
    width: calc(100% - 0.7rem);
    margin: 0.25rem 0.35rem 0.5rem;
    padding: 0.4rem;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 92, 36, 0.1);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.sz-wa__gif-more:disabled {
    opacity: 0.5;
    cursor: wait;
}

.sz-wa-bubble__sticker {
    width: 4.5rem;
    height: 4.5rem;
    vertical-align: middle;
}

.sz-wa-bubble__text--sticker-only {
    line-height: 1;
    padding: 0.15rem 0;
}

.sz-wa-bubble__text--sticker-only .sz-wa-bubble__sticker {
    width: 5.5rem;
    height: 5.5rem;
}

.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;
    scroll-margin-bottom: 1.25rem;
    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--profile {
    gap: 0.55rem;
}

.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--profile .sz-tg-list__item {
    padding: 0;
    border: 0;
    background: transparent;
}

.sz-tg-list--profile .sz-tg-list__item--season .sz-tg-list__card {
    border-left: 3px solid var(--sz-green-mid, #2e7d32);
}

.sz-tg-list--profile .sz-tg-list__item--owned .sz-tg-list__card {
    border-color: rgba(46, 125, 50, 0.28);
}

.sz-tg-list__card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    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.5));
}

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

.sz-tg-list--profile .sz-tg-list__head {
    align-items: center;
    gap: 0.55rem;
}

.sz-tg-list__avatar {
    flex-shrink: 0;
}

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

.sz-tg-list--profile .sz-tg-list__meta {
    gap: 0.12rem;
    justify-content: center;
}

.sz-tg-list__name-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.sz-tg-list__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    line-height: 1.25;
}

.sz-tg-list__sub {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.3;
}

.sz-tg-list__chat-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    color: var(--sz-green-mid, #2e7d32);
    background: rgba(46, 125, 50, 0.1);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

html[data-theme="dark"] .sz-tg-list__chat-btn {
    color: var(--sz-st-label, #b2dfdb);
    background: rgba(178, 223, 219, 0.12);
}

.sz-tg-list__chat-btn:hover {
    background: rgba(241, 116, 50, 0.16);
    color: var(--sz-orange, #f17432);
    transform: scale(1.05);
}

.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-list--profile .sz-tg-list__actions {
    flex-wrap: nowrap;
    gap: 0.28rem;
    margin: 0;
    align-items: center;
}

.sz-tg-list--profile .sz-tg-list__actions .sz-btn--sm,
.sz-tg-list--profile .sz-tg-list__actions--invite .sz-btn--sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 0.72rem;
    padding: 0.3rem 0.55rem;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}

.sz-tg-list--profile .sz-tg-list__actions--invite {
    flex-wrap: wrap;
}

.sz-tg-list--profile .sz-tg-list__actions .sz-inline-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.sz-tg-list--profile .sz-btn--tg-manage {
    background: rgba(46, 125, 50, 0.14);
    color: var(--sz-green-mid, #2e7d32) !important;
    border: 1px solid rgba(46, 125, 50, 0.42);
    font-weight: 700;
}

.sz-tg-list--profile .sz-btn--tg-manage:hover {
    filter: none;
    background: rgba(46, 125, 50, 0.22);
}

.sz-tg-list--profile .sz-btn--tg-leave {
    background: rgba(198, 40, 40, 0.1);
    color: #b71c1c !important;
    border: 1px solid rgba(198, 40, 40, 0.38);
    font-weight: 700;
}

.sz-tg-list--profile .sz-btn--tg-leave:hover {
    filter: none;
    background: rgba(198, 40, 40, 0.18);
}

html[data-theme="dark"] .sz-tg-list--profile .sz-btn--tg-manage {
    background: rgba(129, 199, 132, 0.14);
    color: #a5d6a7 !important;
    border-color: rgba(129, 199, 132, 0.42);
}

html[data-theme="dark"] .sz-tg-list--profile .sz-btn--tg-manage:hover {
    background: rgba(129, 199, 132, 0.24);
}

html[data-theme="dark"] .sz-tg-list--profile .sz-btn--tg-leave {
    background: rgba(239, 154, 154, 0.12);
    color: #ef9a9a !important;
    border-color: rgba(239, 154, 154, 0.4);
}

html[data-theme="dark"] .sz-tg-list--profile .sz-btn--tg-leave:hover {
    background: rgba(239, 154, 154, 0.22);
}

.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,
.sz-tg-invite-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex-shrink: 0;
    align-items: center;
}

.sz-tg-invite-form__actions {
    margin-top: 0.5rem;
}

/* Tippgruppe verwalten: Wertung (fancy) */
.sz-tg-scoring-form--fancy {
    margin: 1.25rem 0 1.5rem;
    padding: 1.15rem 1.1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 60, 10, 0.12);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(232, 245, 234, 0.55) 100%);
    box-shadow: 0 8px 28px rgba(0, 40, 10, 0.08);
}

html[data-theme="dark"] .sz-tg-scoring-form--fancy {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(165deg, rgba(12, 28, 18, 0.95) 0%, rgba(8, 22, 14, 0.88) 100%);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

.sz-tg-scoring-form__legend {
    display: block;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sz-small);
}

.sz-tg-scoring-form__mode {
    margin: 0;
    padding: 0;
    border: none;
}

.sz-tg-scoring-mode-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

@media (min-width: 520px) {
    .sz-tg-scoring-mode-cards {
        grid-template-columns: 1fr 1fr;
    }
}

.sz-tg-scoring-mode-card {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.sz-tg-scoring-mode-card__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.sz-tg-scoring-mode-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 4.5rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 2px solid rgba(0, 60, 10, 0.14);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

html[data-theme="dark"] .sz-tg-scoring-mode-card__body {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sz-tg-scoring-mode-card:hover .sz-tg-scoring-mode-card__body {
    border-color: rgba(10, 92, 24, 0.35);
}

.sz-tg-scoring-mode-card.is-selected .sz-tg-scoring-mode-card__body,
.sz-tg-scoring-mode-card__input:focus-visible + .sz-tg-scoring-mode-card__body {
    border-color: var(--sz-orange, #f17432);
    box-shadow:
        0 0 0 3px rgba(241, 116, 50, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}

html[data-theme="dark"] .sz-tg-scoring-mode-card.is-selected .sz-tg-scoring-mode-card__body {
    box-shadow:
        0 0 0 3px rgba(241, 116, 50, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sz-tg-scoring-mode-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sz-text);
}

html[data-theme="dark"] .sz-tg-scoring-mode-card__title {
    color: var(--sz-body-color);
}

.sz-tg-scoring-mode-card__badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(10, 92, 24, 0.12);
    color: var(--sz-green);
}

.sz-tg-scoring-mode-card.is-selected .sz-tg-scoring-mode-card__badge {
    background: rgba(241, 116, 50, 0.15);
    color: var(--sz-orange, #f17432);
}

.sz-tg-scoring-mode-card__desc {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--sz-small);
    font-weight: 500;
}

.sz-tg-scoring-std-panel {
    margin-top: 1rem;
    padding: 0.85rem 0.95rem;
    border-radius: 10px;
    background: rgba(0, 60, 10, 0.05);
    border: 1px dashed rgba(0, 60, 10, 0.18);
}

html[data-theme="dark"] .sz-tg-scoring-std-panel {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.14);
}

.sz-tg-scoring-std-panel__label {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sz-small);
}

.sz-tg-scoring-std-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-tg-scoring-std-pills li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 60, 10, 0.12);
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .sz-tg-scoring-std-pills li {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.12);
}

.sz-tg-scoring-std-pills__k {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    padding: 0.1rem 0.25rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    background: rgba(10, 92, 24, 0.14);
    color: var(--sz-green);
}

.sz-tg-scoring-std-pills__v {
    font-weight: 600;
}

/* Gruppen-Mitglieder-Rangliste: Wertungs-Legende */
.sz-tg-ranking-legend {
    margin: 0.55rem 0 0;
    padding: 0.55rem 0.65rem 0.6rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 60, 10, 0.14);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 248, 242, 0.88) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

html[data-theme="dark"] .sz-tg-ranking-legend {
    background: linear-gradient(145deg, rgba(18, 28, 22, 0.95) 0%, rgba(8, 14, 10, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.sz-tg-ranking-legend__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.28rem;
}

.sz-tg-ranking-legend__title {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.sz-tg-ranking-legend__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(10, 92, 24, 0.12);
    color: var(--sz-green);
    border: 1px solid rgba(10, 92, 24, 0.2);
}

.sz-tg-ranking-legend__badge--custom {
    background: rgba(180, 95, 10, 0.14);
    color: #9a4e00;
    border-color: rgba(180, 95, 10, 0.28);
}

html[data-theme="dark"] .sz-tg-ranking-legend__badge--custom {
    color: #f0a04a;
}

.sz-tg-ranking-legend__intro,
.sz-tg-ranking-legend__diff-hint,
.sz-tg-ranking-legend__public {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--sz-small);
}

.sz-tg-ranking-legend__public {
    margin-bottom: 0;
    font-size: 0.68rem;
    opacity: 0.92;
}

.sz-tg-ranking-legend__groups {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

@media (min-width: 520px) {
    .sz-tg-ranking-legend__groups {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }
}

.sz-tg-ranking-legend__label {
    margin: 0 0 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sz-small);
}

.sz-tg-ranking-legend .sz-tg-scoring-std-pills {
    gap: 0.32rem 0.45rem;
}

.sz-tg-ranking-legend .sz-tg-scoring-std-pills li {
    padding: 0.28rem 0.52rem;
    font-size: 0.76rem;
}

.sz-tg-ranking-legend .sz-tg-scoring-std-pills__k {
    min-width: 1.5rem;
    font-size: 0.68rem;
}

.sz-tg-ranking-legend__pills li.is-diff {
    border-color: rgba(200, 110, 20, 0.55);
    background: rgba(255, 248, 235, 0.95);
    box-shadow: 0 0 0 1px rgba(200, 110, 20, 0.15);
}

html[data-theme="dark"] .sz-tg-ranking-legend__pills li.is-diff {
    background: rgba(60, 40, 10, 0.45);
    border-color: rgba(240, 160, 70, 0.45);
}

.sz-tg-ranking-legend__pills li.is-diff .sz-tg-scoring-std-pills__k {
    background: rgba(200, 110, 20, 0.2);
    color: #9a4e00;
}

html[data-theme="dark"] .sz-tg-ranking-legend__pills li.is-diff .sz-tg-scoring-std-pills__k {
    color: #f0a04a;
}

/* Kompakt: Startseite, Gruppen-Rangliste-Hero */
.sz-tg-ranking-legend--compact {
    margin-top: 0.35rem;
    padding: 0.38rem 0.45rem 0.42rem;
    border-radius: 10px;
}

.sz-tg-ranking-legend--compact .sz-tg-ranking-legend__head {
    margin-bottom: 0.22rem;
    gap: 0.28rem 0.4rem;
}

.sz-tg-ranking-legend--compact .sz-tg-ranking-legend__title {
    font-size: 0.76rem;
}

.sz-tg-ranking-legend--compact .sz-tg-ranking-legend__badge {
    padding: 0.1rem 0.38rem;
    font-size: 0.58rem;
}

.sz-tg-ranking-legend--compact .sz-tg-ranking-legend__groups {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    margin-bottom: 0;
}

.sz-tg-ranking-legend--compact .sz-tg-ranking-legend__label {
    margin-bottom: 0.15rem;
    font-size: 0.56rem;
}

.sz-tg-ranking-legend--compact .sz-tg-scoring-std-pills {
    gap: 0.28rem 0.38rem;
}

.sz-tg-ranking-legend--compact .sz-tg-scoring-std-pills li {
    padding: 0.18rem 0.42rem;
    font-size: 0.7rem;
    gap: 0.22rem;
}

.sz-tg-ranking-legend--compact .sz-tg-scoring-std-pills__k {
    min-width: 1.35rem;
    padding: 0.05rem 0.2rem;
    font-size: 0.62rem;
}

.sz-tg-ranking-legend--compact .sz-tg-scoring-std-pills__v {
    font-size: 0.68rem;
}

/* Wertungs-Legende: ausklappbar */
.sz-tg-ranking-legend-spoiler {
    margin: 0.45rem 0 0;
}

.sz-tg-ranking-legend-spoiler--compact {
    margin: 0.35rem 0 0;
}

.sz-tg-ranking-legend-spoiler__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.84rem;
}

.sz-tg-ranking-legend-spoiler--compact .sz-tg-ranking-legend-spoiler__summary {
    padding: 0.4rem 0.55rem;
    font-size: 0.76rem;
}

.sz-tg-ranking-legend-spoiler__summary-text {
    min-width: 0;
}

.sz-tg-ranking-legend-spoiler .sz-tg-ranking-legend--in-spoiler {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html[data-theme="dark"] .sz-tg-ranking-legend-spoiler .sz-tg-ranking-legend--in-spoiler {
    background: transparent;
    border: none;
    box-shadow: none;
}

.sz-tg-ranking-legend-spoiler .sz-tips-spoiler__body {
    padding-top: 0.15rem;
}

.sz-tg-ranking-legend-spoiler--compact .sz-tips-spoiler__body {
    padding: 0 0.5rem 0.5rem;
}

.sz-hero--tg-ranking .sz-tg-ranking-legend-spoiler--compact {
    margin-top: 0.4rem;
}

.sz-tg-scoring-form__custom {
    margin-top: 1.15rem;
}

.sz-tg-scoring-block {
    margin-bottom: 1.1rem;
    padding: 0.95rem 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 60, 10, 0.1);
    background: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .sz-tg-scoring-block {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.sz-tg-scoring-block__head {
    margin-bottom: 0.85rem;
}

.sz-tg-scoring-block__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sz-green);
}

.sz-tg-scoring-block__hint {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
}

.sz-tg-scoring-points-grid {
    display: grid;
    gap: 0.75rem;
    align-items: stretch;
}

.sz-tg-scoring-points-grid--match {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .sz-tg-scoring-points-grid--match {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sz-tg-scoring-points-grid--round {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.sz-tg-scoring-point-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.65rem 0.6rem 0.7rem;
    border-radius: 11px;
    border: 1px solid rgba(0, 60, 10, 0.12);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 40, 10, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme="dark"] .sz-tg-scoring-point-card {
    background: rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.12);
}

.sz-tg-scoring-point-card:focus-within {
    border-color: var(--sz-orange, #f17432);
    box-shadow: 0 0 0 2px rgba(241, 116, 50, 0.2);
}

.sz-tg-scoring-point-card__label {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    min-height: 2.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sz-text);
    cursor: pointer;
}

html[data-theme="dark"] .sz-tg-scoring-point-card__label {
    color: var(--sz-body-color);
}

.sz-tg-scoring-point-card__abbr,
.sz-tg-scoring-point-card__place {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    background: rgba(10, 92, 24, 0.12);
    color: var(--sz-green);
}

.sz-tg-scoring-point-card__text {
    flex: 1;
    min-width: 0;
    padding-top: 0.15rem;
}

.sz-tg-scoring-point-card__field-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.45rem;
    border-radius: 10px;
    background: rgba(0, 60, 10, 0.04);
    border: 1px solid rgba(0, 60, 10, 0.08);
}

html[data-theme="dark"] .sz-tg-scoring-point-card__field-wrap {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.08);
}

.sz-tg-scoring-point-card__input {
    width: 3.25rem;
    min-width: 3.25rem;
    height: 3rem;
    margin: 0;
    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.2);
    border-radius: 10px;
    background: #fff;
    color: var(--sz-text);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}

html[data-theme="dark"] .sz-tg-scoring-point-card__input {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--sz-body-color);
}

.sz-tg-scoring-point-card__input:focus {
    outline: none;
    border-color: var(--sz-orange, #f17432);
    box-shadow: 0 0 0 3px rgba(241, 116, 50, 0.28);
    transform: scale(1.03);
}

.sz-tg-scoring-point-card__input::-webkit-outer-spin-button,
.sz-tg-scoring-point-card__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sz-tg-scoring-point-card__unit {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sz-small);
    letter-spacing: 0.02em;
}

/* Podium-Farben Runden-Boni */
.sz-tg-scoring-point-card--place1 .sz-tg-scoring-point-card__place {
    background: linear-gradient(145deg, #ffe08a, #e8a820);
    color: #4a3200;
}

.sz-tg-scoring-point-card--place2 .sz-tg-scoring-point-card__place {
    background: linear-gradient(145deg, #e8ecef, #b8c0c8);
    color: #2a3038;
}

.sz-tg-scoring-point-card--place3 .sz-tg-scoring-point-card__place {
    background: linear-gradient(145deg, #e8c4a0, #c88650);
    color: #3d2810;
}

.sz-tg-scoring-point-card--place1 {
    border-color: rgba(232, 168, 32, 0.35);
}

.sz-tg-scoring-point-card--place2 {
    border-color: rgba(160, 170, 180, 0.35);
}

.sz-tg-scoring-point-card--place3 {
    border-color: rgba(200, 140, 80, 0.35);
}

.sz-tg-scoring-form__actions {
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(0, 60, 10, 0.1);
    text-align: center;
}

html[data-theme="dark"] .sz-tg-scoring-form__actions {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.sz-tg-scoring-form__actions .sz-btn {
    min-width: 12rem;
}

@media (max-width: 400px) {
    .sz-tg-scoring-points-grid--match {
        grid-template-columns: 1fr;
    }

    .sz-tg-scoring-point-card__field-wrap {
        justify-content: space-between;
    }

    .sz-tg-scoring-point-card__input {
        flex: 1;
        max-width: 4.5rem;
    }
}

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

/* Gruppen-Mitglieder-Rangliste: kompakter Hero */
.sz-hero--tg-ranking .sz-hero__title-row--tg-group {
    align-items: center;
    gap: 0.65rem;
}

.sz-hero--tg-ranking .sz-hero__group-av.sz-avatar {
    width: 5.33rem;
    height: 5.33rem;
}

.sz-hero--tg-ranking .sz-hero__group-av .sz-avatar__letter {
    font-size: 1.65rem;
}

.sz-hero--tg-ranking .sz-hero__group-av {
    flex-shrink: 0;
}

.sz-hero--tg-ranking .sz-hero__title-row-text {
    flex: 1 1 12rem;
    min-width: 0;
}

.sz-tg-ranking-hero__name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    min-width: 0;
}

.sz-tg-ranking-hero__name {
    margin: 0;
    font-size: clamp(1.15rem, 4.5vw, 1.45rem);
    line-height: 1.2;
    min-width: 0;
}

.sz-tg-ranking-hero__join-form {
    margin: 0;
    display: inline-flex;
}

.sz-tg-ranking-hero__join-btn {
    white-space: nowrap;
}

.sz-tg-ranking-hero__chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    line-height: 1.2;
}

.sz-tg-ranking-hero__chat-btn svg {
    flex-shrink: 0;
}

.sz-tg-ranking-hero__meta {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.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;
}

/* Kleine Tippgruppen (ohne Wertung) – kompakt, eingeklappt */
.sz-tg-unranked-wrap {
    margin-top: 0.75rem;
}

.sz-tg-unranked-spoiler {
    margin: 0;
    opacity: 0.92;
}

.sz-tg-unranked-spoiler .sz-tips-spoiler__summary {
    padding: 0.45rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sz-small, #8a9d8a);
}

html[data-theme="light"] .sz-tg-unranked-spoiler .sz-tips-spoiler__summary {
    color: var(--sz-muted, #5a6e5c);
}

.sz-tg-unranked-spoiler__body {
    padding: 0.35rem 0.75rem 0.65rem;
}

.sz-tg-unranked-spoiler__hint {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.sz-tg-unranked-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sz-tg-unranked-chips__item {
    min-width: 0;
    flex: 1 1 min(100%, 14rem);
    max-width: 100%;
}

.sz-tg-unranked-chip {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.15rem;
    padding: 0.28rem 0.55rem 0.28rem 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--sz-match-card-border, rgba(255, 255, 255, 0.1));
    background: rgba(0, 0, 0, 0.18);
    text-decoration: none;
    color: inherit;
    font-size: 0.82rem;
    line-height: 1.25;
    transition: border-color 0.15s ease, background 0.15s ease;
}

html[data-theme="light"] .sz-tg-unranked-chip {
    background: rgba(0, 60, 10, 0.05);
    border-color: rgba(0, 60, 10, 0.12);
}

.sz-tg-unranked-chip:hover {
    border-color: rgba(130, 200, 150, 0.45);
    background: rgba(0, 40, 18, 0.35);
}

html[data-theme="light"] .sz-tg-unranked-chip:hover {
    background: rgba(0, 60, 10, 0.1);
}

.sz-tg-unranked-chip__text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.sz-tg-unranked-chip__name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sz-tg-unranked-chip__meta {
    font-size: 0.72rem;
    opacity: 0.78;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sz-tg-unranked-chip__sep {
    opacity: 0.55;
    margin: 0 0.12rem;
}

.sz-tg-unranked-chips__empty {
    margin: 0;
    font-size: 0.82rem;
}

.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 0.5rem 0.4rem;
    font-size: 0.78rem;
    opacity: 0.85;
}

.sz-wa__filehint--gif,
.sz-wa__filehint--attach {
    opacity: 1;
}

.sz-wa__filehint--attach {
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    background: rgba(36, 78, 52, 0.07);
    border: 1px solid rgba(36, 78, 52, 0.2);
    animation: sz-wa-attach-in 0.22s ease-out;
}

html[data-theme="dark"] .sz-wa__filehint--attach {
    background: rgba(120, 200, 150, 0.1);
    border-color: rgba(120, 200, 150, 0.28);
}

@keyframes sz-wa-attach-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sz-wa__attach-preview {
    align-items: center;
}

.sz-wa__attach-preview__img {
    max-height: 70px;
    max-width: min(110px, 50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    border: 2px solid rgba(36, 78, 52, 0.35);
}

html[data-theme="dark"] .sz-wa__attach-preview__img {
    border-color: rgba(120, 200, 150, 0.45);
}

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

.sz-wa__attach-preview__label {
    font-weight: 600;
    opacity: 1;
    color: var(--sz-accent, #244e34);
}

html[data-theme="dark"] .sz-wa__attach-preview__label {
    color: #9fd4b0;
}

.sz-wa__attach-preview__name {
    font-size: 0.72rem;
    opacity: 0.72;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(220px, 55vw);
}

.sz-wa__gif-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    position: relative;
}

.sz-wa__gif-preview__close {
    flex-shrink: 0;
    align-self: flex-start;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    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__gif-preview__close {
    background: rgba(255, 255, 255, 0.12);
}

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

.sz-wa__gif-preview__img {
    display: block;
    max-height: 140px;
    max-width: min(220px, 100%);
    border-radius: 10px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.15);
}

.sz-wa__gif-preview__label {
    font-size: 0.78rem;
    opacity: 0.8;
}

/* —— Tipper-Profil —— */
.page-tipper-profile .sz-main > .sz-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.page-tipper-profile .sz-tipper-hero,
.page-tipper-profile .sz-subnav,
.page-tipper-profile .sz-round-recap,
.page-tipper-profile .sz-tipper-stats,
.page-tipper-profile .sz-tipper-sections-lazy,
.page-tipper-profile .sz-back {
    margin: 0;
}
.page-tipper-profile .sz-subnav {
    padding: 0.15rem 0 0.55rem;
}
.page-tipper-profile .sz-panel {
    margin: 0;
    padding: 1.25rem 1.15rem;
}
.page-tipper-profile .sz-panel__title {
    margin-top: 0;
    margin-bottom: 0.55rem;
}
.page-tipper-profile .sz-tipper-sections-lazy__mount {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.page-tipper-profile .sz-tipper-sections-lazy__mount > .sz-panel,
.page-tipper-profile .sz-tipper-sections-lazy__mount > section {
    margin: 0;
}
.page-tipper-profile .sz-tipper-all-tips.sz-panel {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
}
html[data-theme="light"] .page-tipper-profile .sz-tipper-all-tips.sz-panel {
    background: transparent;
    border: none;
    box-shadow: none;
}
.page-tipper-profile .sz-back {
    padding-top: 0.25rem;
}
@media (max-width: 768px) {
    .page-tipper-profile .sz-main > .sz-inner {
        gap: 1rem;
    }
    .page-tipper-profile .sz-tipper-sections-lazy__mount {
        gap: 1rem;
    }
    .page-tipper-profile .sz-panel {
        padding: 1rem 0.85rem;
    }
    .page-tipper-profile .sz-tipper-all-tips.sz-panel {
        padding: 0;
    }
}

.page-tipper-profile .sz-tipper-hero {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1rem 1.1rem;
    border-radius: 14px;
    overflow: visible;
    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__clip {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.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;
}

.page-tipper-profile .sz-tipper-hero__avatar {
    flex-shrink: 0;
}
.sz-tipper-hero__name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    min-width: 0;
}

.sz-tipper-hero__chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    line-height: 1.2;
}

.sz-tipper-hero__chat-btn svg {
    flex-shrink: 0;
}

.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-pill--flat {
    background: rgba(100, 130, 155, 0.28);
    color: rgba(180, 200, 215, 0.98);
    letter-spacing: -0.03em;
}
html[data-theme="light"] .sz-tipper-pill--flat {
    background: rgba(100, 130, 155, 0.16);
    color: rgba(55, 75, 95, 0.92);
}
.sz-tipper-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.55rem;
}
.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.5rem;
    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--form {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        165deg,
        var(--sz-match-card-bg) 0%,
        rgba(241, 116, 50, 0.06) 48%,
        rgba(0, 80, 35, 0.05) 100%
    );
}
html[data-theme="dark"] .sz-tipper-chart-card--form {
    background: linear-gradient(
        165deg,
        var(--sz-match-card-bg) 0%,
        rgba(241, 116, 50, 0.1) 42%,
        rgba(0, 40, 18, 0.35) 100%
    );
}
.sz-tipper-chart-card--form::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.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: min(20rem, 52vh);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.sz-tipper-chart-form-scroll {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    box-sizing: border-box;
}
.sz-tipper-chart-form-scroll canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}
.sz-tipper-chart-card__canvas-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 10rem;
}
.sz-overall-game__charts .sz-tipper-chart-card__canvas-wrap {
    min-height: 14rem;
}
.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-overall-game {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--sz-orange) 35%, var(--sz-match-card-border));
    background:
        radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--sz-orange) 14%, transparent), transparent 55%),
        radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--sz-green-mid) 18%, transparent), transparent 50%),
        var(--sz-match-card-bg);
}
.sz-overall-game__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
}
.sz-overall-game__kicker {
    margin-bottom: 0.35rem;
}
.sz-overall-game__title {
    margin-bottom: 0.35rem;
}
.sz-overall-game__hint {
    margin: 0;
    max-width: 42rem;
}
.sz-overall-game__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 6.5rem;
    padding: 0.65rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--sz-match-card-border);
    background: color-mix(in srgb, var(--sz-body-bg) 70%, transparent);
    text-align: center;
    line-height: 1.2;
}
.sz-overall-game__badge.is-positive {
    border-color: color-mix(in srgb, var(--sz-orange) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sz-orange) 20%, transparent);
}
.sz-overall-game__badge.is-negative {
    border-color: color-mix(in srgb, var(--sz-hero-meta) 50%, transparent);
}
.sz-overall-game__badge-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sz-hero-meta);
}
.sz-overall-game__badge strong {
    font-size: 1.35rem;
    color: var(--sz-orange);
}
.sz-overall-game__badge-sub {
    font-size: 0.72rem;
    color: var(--sz-hero-meta);
}
.sz-overall-game__columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.5rem;
}
@media (max-width: 960px) {
    .sz-overall-game__columns {
        grid-template-columns: 1fr;
    }
}
.sz-overall-game__col {
    padding: 0.85rem 0.95rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid var(--sz-match-card-border);
    background: color-mix(in srgb, var(--sz-body-bg) 55%, transparent);
}
.sz-overall-game__col--season {
    border-color: color-mix(in srgb, var(--sz-green-mid) 35%, var(--sz-match-card-border));
}
.sz-overall-game__col--user {
    border-color: color-mix(in srgb, var(--sz-orange) 35%, var(--sz-match-card-border));
}
.sz-overall-game__col-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
}
.sz-overall-game__col-icon {
    font-size: 1.05rem;
    line-height: 1;
}
.sz-overall-game__metrics {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.sz-overall-game__metric {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.1rem 0.5rem;
    align-items: baseline;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--sz-match-card-border) 80%, transparent);
}
.sz-overall-game__metric:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.sz-overall-game__metric--highlight .sz-overall-game__metric-value {
    color: var(--sz-orange);
}
.sz-overall-game__metric-label {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: var(--sz-hero-meta);
}
.sz-overall-game__metric-value {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}
.sz-overall-game__metric-value--compact {
    font-size: 0.95rem;
}
.sz-overall-game__metric-sub {
    grid-column: 2;
    font-size: 0.72rem;
    color: var(--sz-hero-meta);
    text-align: right;
}
.sz-overall-game__metric--empty {
    grid-template-columns: 1fr;
    border-bottom: 0;
    padding-bottom: 0;
}
.sz-overall-game__metric--empty .sz-hint {
    margin: 0;
}
.sz-overall-game__charts {
    margin-top: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--sz-match-card-border);
}

.sz-community-virtual {
    margin-top: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--sz-green-mid) 28%, var(--sz-match-card-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--sz-green-mid) 7%, var(--sz-card-bg, #fff)),
        color-mix(in srgb, var(--sz-orange) 4%, var(--sz-card-bg, #fff))
    );
}
.sz-community-virtual__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}
.sz-community-virtual__identity {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}
.sz-community-virtual__avatar {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 1.35rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
html[data-theme="dark"] .sz-community-virtual__avatar {
    background: rgba(255, 255, 255, 0.08);
}
.sz-community-virtual__kicker {
    margin-bottom: 0.1rem;
}
.sz-community-virtual__title {
    margin: 0;
}
.sz-community-virtual__hint {
    margin: 0.25rem 0 0;
    max-width: 42rem;
}
.sz-community-virtual__badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid var(--sz-match-card-border);
    background: rgba(255, 255, 255, 0.55);
    min-width: 6.5rem;
}
html[data-theme="dark"] .sz-community-virtual__badge {
    background: rgba(255, 255, 255, 0.05);
}
.sz-community-virtual__badge.is-positive {
    border-color: rgba(0, 122, 61, 0.35);
    color: var(--sz-green-mid);
}
.sz-community-virtual__badge.is-negative {
    border-color: rgba(192, 57, 43, 0.35);
    color: #c0392b;
}
.sz-community-virtual__badge--rank {
    border-color: color-mix(in srgb, var(--sz-green-mid) 35%, var(--sz-match-card-border));
    color: var(--sz-green-mid);
}
.sz-community-virtual__badge-label,
.sz-community-virtual__badge-sub {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.85;
}
.sz-community-virtual__badge strong {
    font-size: 1.15rem;
    line-height: 1.1;
}
.sz-community-virtual__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sz-community-virtual__metric {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
html[data-theme="dark"] .sz-community-virtual__metric {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
.sz-community-virtual__metric--highlight .sz-community-virtual__metric-value {
    color: var(--sz-green-mid);
}
.sz-community-virtual__metric--rank .sz-community-virtual__metric-value {
    color: var(--sz-orange);
}
.sz-community-virtual__metric-label {
    font-size: 0.72rem;
    color: var(--sz-muted);
}
.sz-community-virtual__metric-value {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.15;
}
.sz-community-virtual__metric-sub {
    font-size: 0.68rem;
    color: var(--sz-muted);
}
.sz-community-virtual__pending {
    margin: 0;
    max-width: 42rem;
}

.page-tipper-profile .sz-tipper-sections-lazy[data-sz-sections-loaded="1"] .sz-tipper-sections-lazy__mount .sz-reveal {
    opacity: 1;
    transform: none;
}
.sz-tipper-sections-lazy__placeholder {
    margin: 0;
    padding: 1.25rem 1rem;
    min-height: 3.5rem;
    text-align: center;
    border: 1px dashed var(--sz-match-card-border);
    border-radius: var(--sz-radius-lg, 1rem);
    background: color-mix(in srgb, var(--sz-body-bg) 50%, transparent);
}
.page-tipper-profile .sz-tipper-sections-lazy[data-sz-sections-loaded="1"] .sz-tipper-sections-lazy__placeholder {
    display: none;
}
.sz-tipper-sections-lazy__error {
    margin: 0;
}
.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--static .sz-tipper-tips-spoiler__summary--static {
    cursor: default;
}
.sz-tipper-tips-spoiler--static .sz-tipper-tips-spoiler__summary--static::before {
    display: none;
}
.sz-tipper-tips-spoiler--static .sz-tipper-tips-spoiler__summary--static:hover {
    background: transparent;
}
.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: 0;
    --sz-tipper-tips-star-size: 1.12rem;
    --sz-tipper-tips-star-gap: 0.04rem;
    --sz-tipper-tips-stars-count: 6;
}
/* Desktop: Tabelle fluid halten und kompakt genug, damit kein horizontaler
   Scrollbalken nötig ist und trotzdem alle Spalten sichtbar bleiben. */
@media (min-width: 769px) {
    .sz-tipper-tips-table {
        width: 100%;
        table-layout: auto;
    }
    .sz-tipper-tips-table thead th,
    .sz-tipper-tips-table tbody td,
    .sz-tipper-tips-table tfoot td {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .sz-tipper-tips-table__when {
        white-space: normal;
    }
    .sz-tipper-tips-table__round {
        overflow-wrap: anywhere;
    }
    .sz-tipper-tips-table__not-tipped,
    .sz-tipper-tips-table__pending {
        white-space: normal;
    }
}
.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;
    display: block;
}
.sz-tipper-tips-table__match-link:hover {
    color: var(--sz-accent, #f17432);
}
.sz-tipper-tips-table__match-link:hover .sz-tipper-tips-table__team-name {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.sz-tipper-tips-table__fixture {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.45rem;
    max-width: 100%;
}
.sz-tipper-tips-table__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem;
    min-width: 0;
    flex: 1 1 0;
}
.sz-tipper-tips-table__team--home {
    align-items: flex-end;
    text-align: right;
}
.sz-tipper-tips-table__team--away {
    align-items: flex-start;
    text-align: left;
}
.sz-tipper-tips-table__crest {
    flex-shrink: 0;
}
.sz-tipper-tips-table__team-name {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sz-tipper-tips-table__fixture-vs {
    align-self: center;
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--sz-accent, #f17432) 55%, var(--sz-muted, #9ab59a));
    opacity: 0.85;
    padding: 0 0.05rem;
}
.sz-tipper-tips-table__match-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sz-tipper-tips-table__match-meta {
    display: none;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--sz-muted, rgba(255, 255, 255, 0.65));
}
.sz-tipper-tips-table__match-meta-sep {
    margin: 0 0.2rem;
    opacity: 0.7;
}
.sz-tipper-tips-table__th-short {
    display: none;
}
.sz-tipper-tips-table__match-stars {
    display: none;
}
.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: calc(
        var(--sz-tipper-tips-star-size) * var(--sz-tipper-tips-stars-count)
        + var(--sz-tipper-tips-star-gap) * (var(--sz-tipper-tips-stars-count) - 1)
        + 0.65rem
    );
    min-width: calc(
        var(--sz-tipper-tips-star-size) * var(--sz-tipper-tips-stars-count)
        + var(--sz-tipper-tips-star-gap) * (var(--sz-tipper-tips-stars-count) - 1)
        + 0.65rem
    );
    text-align: center;
    font-weight: 600;
    overflow: visible;
}
.sz-tipper-tips-table__stars {
    text-align: center;
    white-space: nowrap;
    overflow: visible;
}
.sz-tipper-tips-table__stars .sz-tip-stars,
.sz-tipper-tips-table__match-stars .sz-tip-stars {
    justify-content: center;
    gap: var(--sz-tipper-tips-star-gap);
    flex-wrap: nowrap;
    line-height: 1;
}
.sz-tipper-tips-table__stars .sz-tip-star,
.sz-tipper-tips-table__match-stars .sz-tip-star {
    font-size: var(--sz-tipper-tips-star-size);
    line-height: 1;
}
.sz-tipper-tips-table__stars .sz-tip-score-details,
.sz-tipper-tips-table__match-stars .sz-tip-score-details {
    display: inline-flex;
    align-items: center;
    max-width: none;
    overflow: visible;
}
.sz-tipper-tips-table__col-stars {
    overflow: visible;
}
/* Breakdown-Popover der letzten Spalte (Wertung) rechtsbündig verankern,
   damit es nach links aufklappt und im Scroll-Container (overflow-x: auto)
   nicht rechts abgeschnitten wird. */
.sz-tipper-tips-table__col-stars .sz-tip-score-details__body {
    left: auto;
    right: 0;
    transform: none;
}
.sz-tipper-tips-table__stars .sz-tip-zero,
.sz-tipper-tips-table__match-stars .sz-tip-zero {
    transform: scale(0.82);
    transform-origin: center 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);
}

@media (max-width: 768px) {
    .sz-tipper-tips-spoiler__body {
        overflow-x: hidden;
    }

    .sz-tipper-tips-table {
        --sz-tipper-tips-star-size: 0.92rem;
    }

    .sz-tipper-tips-spoiler .sz-tipper-tips-table-scroll {
        overflow-x: hidden;
        margin: 0.75rem 0 1rem;
        border-radius: var(--sz-radius, 0.5rem);
    }

    .sz-tipper-tips-table,
    .sz-tipper-tips-bonus-table {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        font-size: 0.76rem;
    }

    .sz-tipper-tips-table thead th,
    .sz-tipper-tips-table tbody td,
    .sz-tipper-tips-table tfoot td {
        padding: 0.38rem 0.15rem;
        box-sizing: border-box;
    }

    .sz-tipper-tips-table thead th.sz-tipper-tips-table__col-nr,
    .sz-tipper-tips-table tbody td.sz-tipper-tips-table__col-nr,
    .sz-tipper-tips-table thead th.sz-tipper-tips-table__col-when,
    .sz-tipper-tips-table tbody td.sz-tipper-tips-table__col-when,
    .sz-tipper-tips-table thead th.sz-tipper-tips-table__col-round,
    .sz-tipper-tips-table tbody td.sz-tipper-tips-table__col-round,
    .sz-tipper-tips-table thead th.sz-tipper-tips-table__col-stars,
    .sz-tipper-tips-table tbody td.sz-tipper-tips-table__col-stars {
        display: none;
    }

    .sz-tipper-tips-table__th-full {
        display: none;
    }

    .sz-tipper-tips-table__th-short {
        display: inline;
    }

    .sz-tipper-tips-table__match-meta {
        display: block;
    }

    .sz-tipper-tips-table__match-stars {
        display: block;
        margin-top: 0.2rem;
        overflow: visible;
    }

    .sz-tipper-tips-table__match-stars .sz-tip-stars {
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .sz-tipper-tips-table__col-match {
        width: 52%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
        padding-right: 0.35rem;
    }

    .sz-tipper-tips-table__fixture {
        gap: 0.3rem;
    }

    .sz-tipper-tips-table__team-name {
        font-size: 0.72rem;
        max-width: 4.75rem;
    }

    .sz-tipper-tips-table__fixture-vs {
        font-size: 0.82rem;
    }

    .sz-tipper-tips-table__match-link {
        font-size: 0.8rem;
        line-height: 1.3;
        font-weight: 600;
    }

    .sz-tipper-tips-table .sz-sort-th {
        gap: 0.1rem;
        font-size: 0.58rem;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .sz-tipper-tips-table__col-tip {
        width: 16%;
    }

    .sz-tipper-tips-table__col-result {
        width: 16%;
    }

    .sz-tipper-tips-table__col-pts {
        width: 16%;
    }

    .sz-tipper-tips-table__col-tip,
    .sz-tipper-tips-table__col-result,
    .sz-tipper-tips-table__col-pts {
        min-width: 0;
        max-width: none;
        padding-left: 0.08rem;
        padding-right: 0.08rem;
        text-align: center;
        vertical-align: top;
    }

    .sz-tipper-tips-table__score,
    .sz-tipper-tips-table__pts {
        font-size: 0.76rem;
    }

    .sz-tipper-tips-table__pending,
    .sz-tipper-tips-table__not-tipped {
        font-size: 0.58rem;
        line-height: 1.15;
        white-space: normal;
        hyphens: auto;
    }

    .sz-tipper-tips-table tfoot {
        display: none;
    }

    .sz-tipper-tips-bonus-table thead th:nth-child(3),
    .sz-tipper-tips-bonus-table thead th:nth-child(4),
    .sz-tipper-tips-bonus-table thead th:nth-child(5),
    .sz-tipper-tips-bonus-table tbody td:nth-child(3),
    .sz-tipper-tips-bonus-table tbody td:nth-child(4),
    .sz-tipper-tips-bonus-table tbody td:nth-child(5) {
        display: none;
    }

    .sz-tipper-tips-bonus-table thead th,
    .sz-tipper-tips-bonus-table tbody td {
        font-size: 0.72rem;
        padding: 0.35rem 0.2rem;
    }

    .sz-tipper-tips-bonus-table tfoot {
        display: none;
    }
}

/* 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:not(.sz-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-club--winner .sz-match-detail-club__name {
    color: var(--sz-success, #16a34a);
}
.sz-match-detail-club__winner {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    color: var(--sz-success, #16a34a);
    background: color-mix(in srgb, var(--sz-success, #16a34a) 16%, transparent);
}
.sz-match-detail-club__winner::before {
    content: "\2713";
    font-weight: 800;
}
.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);
}
.page-match-detail .sz-match-detail-panel--tip {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: 14px;
    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-match-detail .sz-match-detail-panel--tip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(180deg, var(--sz-orange) 0%, #2d8a4e 100%);
    pointer-events: none;
}
.page-match-detail .sz-match-detail-panel--tip::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-match-detail .sz-match-detail-panel--tip {
    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-match-detail .sz-match-detail-panel--tip::after {
    background: radial-gradient(ellipse at 50% 0%, rgba(241, 116, 50, 0.18) 0%, transparent 68%);
}
.sz-match-detail-my-tip {
    position: relative;
    z-index: 1;
    margin: 0;
}
.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;
}
.page-match-detail .sz-match-detail-group-tips {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.22);
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(56, 189, 248, 0.12), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, rgba(167, 139, 250, 0.1), transparent 50%),
        var(--sz-panel-bg, rgba(15, 23, 42, 0.72));
}
html[data-theme="light"] .page-match-detail .sz-match-detail-group-tips {
    border-color: rgba(14, 116, 144, 0.18);
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(14, 165, 233, 0.08), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, rgba(124, 58, 237, 0.06), transparent 50%),
        var(--sz-panel-bg, #fff);
}
.sz-match-detail-group-tips__head {
    margin-bottom: 0.85rem;
}
.sz-match-detail-group-tips__head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 0.85rem;
}
.sz-match-detail-group-tips__head-row .sz-match-detail-panel__title {
    margin: 0;
    flex: 1 1 12rem;
    min-width: 0;
}
.sz-match-detail-group-tips__filter {
    flex: 0 0 auto;
}
.sz-md-group-table__filter-empty {
    margin: 0.55rem 0 0;
    font-size: 0.82rem;
    color: var(--sz-hero-meta, #94a3b8);
}
.sz-md-group-table__filter-empty[hidden] {
    display: none;
}
.sz-match-detail-group-tips__hint {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: var(--sz-hero-meta, #94a3b8);
}
.sz-match-detail-group-tips__nav {
    margin: 0 0 0.85rem;
}
.sz-match-detail-group-tips__nav-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.45rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0.15rem 0.1rem 0.35rem;
    margin: 0 -0.1rem;
}
.sz-match-detail-group-tips__pill {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    width: 4.5rem;
    max-width: 4.5rem;
    padding: 0.45rem 0.35rem 0.5rem;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.22);
    background: rgba(2, 6, 23, 0.35);
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme="light"] .sz-match-detail-group-tips__pill {
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(14, 116, 144, 0.2);
}
.sz-match-detail-group-tips__pill:hover,
.sz-match-detail-group-tips__pill:focus-visible {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
    outline: none;
}
.sz-match-detail-group-tips__pill.is-active,
.sz-match-detail-group-tips__pill[aria-selected="true"] {
    border-color: rgba(56, 189, 248, 0.65);
    background: linear-gradient(160deg, rgba(56, 189, 248, 0.18), rgba(167, 139, 250, 0.12));
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2), 0 6px 16px rgba(15, 23, 42, 0.18);
}
.sz-match-detail-group-tips__pill-av {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18);
}
.sz-match-detail-group-tips__pill.is-active .sz-match-detail-group-tips__pill-av,
.sz-match-detail-group-tips__pill[aria-selected="true"] .sz-match-detail-group-tips__pill-av {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45);
}
.sz-match-detail-group-tips__pill-name {
    display: block;
    width: 100%;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sz-match-detail-group-tips__stack {
    display: grid;
    gap: 0.85rem;
}
.sz-match-detail-group-tips--has-nav .sz-md-group-card:not(.is-active),
.sz-match-detail-group-tips--has-nav .sz-md-group-card[hidden] {
    display: none;
}
.sz-md-group-card {
    scroll-margin-top: calc(var(--sz-topbar-row-height, 3.25rem) + 0.85rem);
    border-radius: calc(var(--sz-radius-md, 0.5rem) + 2px);
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}
.sz-md-group-card:target {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(56, 189, 248, 0.25),
        0 8px 24px rgba(56, 189, 248, 0.12);
}
html[data-theme="light"] .sz-md-group-card {
    background: rgba(248, 250, 252, 0.92);
    border-color: rgba(148, 163, 184, 0.28);
}
.sz-md-group-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.08), rgba(167, 139, 250, 0.06));
}
.sz-md-group-card__brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.sz-md-group-card__group-av {
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}
.sz-md-group-card__titles {
    min-width: 0;
}
.sz-md-group-card__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sz-md-group-card__meta {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--sz-hero-meta, #94a3b8);
}
.sz-md-group-card__rank-link {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--sz-accent, #38bdf8);
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    background: rgba(56, 189, 248, 0.08);
}
.sz-md-group-card__rank-link:hover,
.sz-md-group-card__rank-link:focus-visible {
    background: rgba(56, 189, 248, 0.16);
    outline: none;
}
.sz-md-group-card__table-wrap.sz-table-wrap {
    margin: 0;
    margin-bottom: 0;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.sz-md-group-table {
    width: 100%;
    min-width: 20rem;
    font-size: 0.86rem;
    table-layout: auto;
}
/* .sz-ranking-table__player setzt display:flex – nur im Inhalt, nicht auf th/td */
.sz-md-group-table th.sz-ranking-table__player,
.sz-md-group-table td.sz-ranking-table__player {
    display: table-cell;
    vertical-align: middle;
    width: 1%;
    min-width: 0;
    max-width: none;
    white-space: normal;
}
.sz-md-group-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(2, 6, 23, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
}
html[data-theme="light"] .sz-md-group-table thead th {
    background: rgba(248, 250, 252, 0.96);
}
.sz-md-group-table thead th.sz-ranking-table__num {
    text-align: center;
}
/* display:flex auf td/th zerstört table-layout (Spalten GR./Ges./Tipp) */
.sz-md-group-table th.sz-ranking-table__num,
.sz-md-group-table td.sz-ranking-table__num {
    display: table-cell;
    vertical-align: middle;
}
.sz-md-group-table__col-rank,
.sz-md-group-table td.sz-md-group-table__rank {
    width: 3.75rem;
    min-width: 3.75rem;
    max-width: 3.75rem;
}
.sz-md-group-table__col-tip,
.sz-md-group-table td.sz-md-group-table__tip {
    width: 4.75rem;
    min-width: 4.75rem;
}
.sz-md-group-table__tip-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}
.sz-md-group-table__tip-line {
    line-height: 1.1;
}
.sz-md-group-table__score-line {
    display: flex;
    justify-content: center;
}
.sz-md-group-table__score-line .sz-tip-stars {
    justify-content: center;
}
@media (min-width: 561px) {
    .sz-md-group-table__tip-cell {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}
.sz-md-group-table__player {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    min-width: 0;
}
.sz-md-group-table__player .sz-ranking-table__who,
.sz-md-group-table__player .sz-ranking-table__who--link {
    min-width: 0;
    max-width: 100%;
}
.sz-md-group-table__player .sz-ranking-table__who > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sz-md-group-table__you {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4ade80;
    padding: 0.1rem 0.32rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
}
.sz-md-group-table__rank {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.sz-md-group-table td.sz-md-group-table__rank {
    text-align: center;
    line-height: 1.05;
}
.sz-md-group-table td.sz-md-group-table__rank .sz-md-group-table__rank-label {
    display: block;
}
.sz-md-group-table td.sz-md-group-table__rank .sz-ranking-table__delta {
    display: block;
    margin-left: 0;
    font-size: 0.58rem;
}
.sz-md-group-table td.sz-md-group-table__rank .sz-ranking-table__delta--flat {
    font-size: 0.56rem;
}
.sz-my-groups-list__sub .sz-ranking-table__delta,
.sz-tg-list__sub .sz-ranking-table__delta {
    margin-left: 0.2rem;
    font-size: 0.62rem;
}
.sz-md-group-table__rank--group {
    color: #7dd3fc;
}
.sz-md-group-table__rank--overall {
    color: #fdba74;
}
html[data-theme="light"] .sz-md-group-table__rank--group {
    color: #0284c7;
}
html[data-theme="light"] .sz-md-group-table__rank--overall {
    color: #c2410c;
}
.sz-md-group-table__tip-score {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.sz-md-group-table__muted {
    color: var(--sz-hero-meta, #94a3b8);
}
.sz-md-group-table tbody tr.is-viewer {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.04));
}
.sz-md-group-table tbody tr:nth-child(even).is-viewer {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.04));
}
.sz-md-group-table tbody tr.is-scored.is-viewer {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.18), rgba(56, 189, 248, 0.06));
}
.sz-md-group-table tbody tr:nth-child(even).is-scored.is-viewer {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.18), rgba(56, 189, 248, 0.06));
}
.sz-md-group-table tbody tr.is-viewer td {
    background: transparent;
}
.sz-md-group-table tbody tr:not(.is-viewer):hover {
    background: rgba(56, 189, 248, 0.08);
}
.sz-md-group-table tbody tr:not(.is-viewer):hover td {
    background: transparent;
}
.sz-md-group-table tbody tr.is-viewer:hover {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(56, 189, 248, 0.08));
}
.sz-md-group-table tbody tr.is-viewer:hover td {
    background: transparent;
}
/* Globale .sz-ranking-table__num { 1.7rem } ab 640px gilt auch hier – zurücksetzen */
@media (max-width: 640px) {
    .sz-md-group-table.sz-ranking-table thead th.sz-ranking-table__num,
    .sz-md-group-table.sz-ranking-table tbody td.sz-ranking-table__num {
        width: auto;
        min-width: 0;
        max-width: none;
    }
}
@media (max-width: 560px) {
    .page-match-detail .sz-match-detail-group-tips.sz-panel {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    .sz-md-group-card__table-wrap.sz-table-wrap {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow-x: hidden;
    }
    .sz-md-group-table {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
        font-size: 0.76rem;
    }
    .sz-md-group-table th.sz-ranking-table__num,
    .sz-md-group-table td.sz-ranking-table__num {
        display: table-cell;
    }
    .sz-md-group-table thead th {
        font-size: 0.62rem;
        padding: 0.45rem 0.25rem;
        letter-spacing: 0.02em;
    }
    .sz-md-group-table tbody td {
        padding: 0.45rem 0.25rem;
        vertical-align: middle;
    }
    .sz-md-group-table th.sz-ranking-table__player,
    .sz-md-group-table td.sz-ranking-table__player {
        width: 38%;
        min-width: 0;
        max-width: none;
    }
    .sz-md-group-table__col-rank,
    .sz-md-group-table td.sz-md-group-table__rank {
        width: 18%;
        min-width: 0;
        max-width: none;
        font-size: 0.64rem;
        padding-left: 0.12rem;
        padding-right: 0.12rem;
        overflow: hidden;
    }
    .sz-md-group-table__col-tip,
    .sz-md-group-table td.sz-md-group-table__tip {
        width: 26%;
        min-width: 0;
        padding-left: 0.12rem;
        padding-right: 0.12rem;
        overflow: hidden;
    }
    .sz-md-group-table td.sz-md-group-table__rank .sz-md-group-table__rank-label {
        display: inline;
        white-space: nowrap;
    }
    .sz-md-group-table td.sz-md-group-table__rank .sz-ranking-table__delta {
        display: inline;
        margin-left: 0.04rem;
        font-size: 0.5rem;
        vertical-align: middle;
        white-space: nowrap;
    }
    .sz-md-group-table td.sz-md-group-table__rank .sz-ranking-table__delta--flat {
        font-size: 0.48rem;
    }
    .sz-md-group-table__player .sz-avatar--32 {
        width: 1.65rem;
        height: 1.65rem;
    }
    .sz-md-group-table__player .sz-avatar__role {
        width: 0.62rem;
        height: 0.62rem;
    }
    .sz-md-group-table__tip-cell {
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
        max-width: 100%;
    }
    .sz-md-group-table__tip-score {
        font-size: 0.82rem;
        line-height: 1;
    }
    .sz-md-group-table__score-line {
        max-width: 100%;
        overflow: hidden;
    }
    .sz-md-group-table__score-line .sz-tip-stars {
        flex-wrap: nowrap;
        gap: 0.04rem;
    }
    .sz-md-group-table__score-line .sz-tip-star {
        width: 0.65rem;
        height: 0.65rem;
        flex-shrink: 0;
    }
    .sz-md-group-card__head {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sz-md-group-table tbody tr {
        transition: none;
    }
}
.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;
}

/* Mannschafts-Spiele (fancy) */
.page-team-matches .sz-team-matches-hero__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-team-matches .sz-team-matches-hero__crest {
    width: 96px;
    height: auto;
    flex-shrink: 0;
    border-radius: 0;
}
.page-team-matches .sz-matches--team {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.page-team-matches .sz-compact-match--team {
    cursor: default;
}
.page-team-matches .sz-compact-match__crest:not(.sz-crest) {
    border-radius: 0;
}
.page-team-matches .sz-compact-match__club-link {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.page-team-matches .sz-compact-match__club-link:hover,
.page-team-matches .sz-compact-match__club-link:focus-visible {
    opacity: 0.88;
    outline: none;
}
.page-team-matches .sz-compact-match__club-link:focus-visible .sz-compact-match__crest:not(.sz-crest) {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.55);
}
.page-team-matches .sz-compact-match__club--focus .sz-compact-match__crest:not(.sz-crest) {
    box-shadow: 0 0 0 2px var(--sz-orange, #e85d04);
}
.page-team-matches .sz-compact-match__club:not(.sz-compact-match__club--focus) {
    opacity: 0.88;
}
.page-team-matches .sz-compact-match__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 3.5rem;
}
.page-team-matches .sz-compact-match__score-label {
    font-size: 0.68rem;
    color: var(--sz-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.page-team-matches .sz-team-matches-empty {
    margin: 0.5rem 0 0;
    color: var(--sz-muted, #64748b);
}

/* Spiel-Detail: klickbare Wappen */
a.sz-match-detail-club__crest-link {
    display: inline-block;
    border-radius: 12px;
    line-height: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.sz-match-detail-club__crest-link:hover,
a.sz-match-detail-club__crest-link:focus-visible {
    transform: scale(1.04);
    outline: none;
}
a.sz-match-detail-club__crest-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.55);
}
a.sz-match-detail-club__crest-link .sz-match-detail-club__crest {
    display: block;
}

@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;
    }
}

/* Native App (WebView): Theme/Sprache über App-Einstellungen */
html.sz-native-shell .sz-theme-toggle,
html.sz-native-shell .sz-nav-tab--theme,
html.sz-native-shell [data-sz-theme-toggle],
html.sz-native-shell .sz-lang-switch {
    display: none !important;
}

/* Native App: keine Moderator-/Admin-Oberfläche (Privilegien nur im Browser) */
/* Expo-WebView: Wappen nicht durch overflow:hidden der Kompakt-Karte beschneiden */
html.sz-native-shell .page-tippspiel .sz-compact-match--fancy {
    overflow: visible;
}

html.sz-native-shell .sz-compact-match__club {
    flex-shrink: 1;
    min-width: 0;
}

/* Kompakt-Tippen (Native App): Wappen neben Ziffernfeldern – Flaggen ~3:2, Höhe näher an Tippfeldern (4.5rem) */
html.sz-native-shell .page-tippspiel .sz-compact-match__crest:not(.sz-crest) {
    width: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
}

html.sz-native-shell .page-tippspiel .sz-compact-match__crest.sz-crest {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
}

html.sz-native-shell .page-tippspiel .sz-compact-match__name {
    display: none;
}

html.sz-native-shell .sz-team__crest:not(.sz-crest) {
    width: 133px !important;
    max-width: 100%;
}

html.sz-native-shell .page-tippspiel .sz-matches--standard .sz-team__crest.sz-crest {
    --sz-crest-size: min(4.75rem, 22vw);
    max-width: min(4.75rem, 22vw) !important;
}

html.sz-native-shell .sz-team__crest.sz-crest {
    width: auto !important;
    max-width: none !important;
}

@media (max-width: 520px) {
    html.sz-native-shell .page-tippspiel .sz-compact-match__crest:not(.sz-crest) {
        width: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
    }

    html.sz-native-shell .page-tippspiel .sz-matches--standard .sz-team__crest.sz-crest {
        --sz-crest-size: min(4.25rem, 20vw) !important;
        max-width: min(4.25rem, 20vw) !important;
    }

    html.sz-native-shell .sz-matches--standard .sz-team__crest:not(.sz-crest) {
        width: min(88px, 26vw) !important;
        max-width: 100%;
    }
}

/* Meine Gruppen (Board-Strip, Übersicht, Entdecken) */
.sz-board-groups-strip {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.45rem 0.55rem 0.5rem;
    border-top: 1px solid rgba(241, 116, 50, 0.2);
}

html[data-theme="dark"] .sz-board-groups-strip {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.sz-board-groups-strip__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.45rem;
    line-height: 1.2;
}

.sz-board-groups-strip__title {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sz-orange);
}

.sz-board-groups-strip__meta {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--sz-hero-meta);
}

.sz-board-groups-strip__all {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--sz-green-mid);
    text-decoration: none;
}

.sz-board-groups-strip__all:hover {
    color: var(--sz-orange);
}

.sz-board-groups-strip__empty {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--sz-hero-meta);
}

.sz-board-groups-strip__empty a {
    font-weight: 700;
    color: var(--sz-green-mid);
}

.sz-board-groups-strip__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.35rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0.1rem 0 0.15rem;
    margin: 0 -0.15rem;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

.sz-board-groups-strip__pill {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
    width: 4.25rem;
    max-width: 4.25rem;
    padding: 0.35rem 0.3rem 0.4rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 80, 30, 0.14);
    background: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme="dark"] .sz-board-groups-strip__pill {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.12);
}

.sz-board-groups-strip__pill:hover,
.sz-board-groups-strip__pill:focus-visible {
    border-color: rgba(241, 116, 50, 0.55);
    background: rgba(241, 116, 50, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 50, 20, 0.12);
}

.sz-board-groups-strip__pill--pending {
    border-style: dashed;
    opacity: 0.92;
}

.sz-board-groups-strip__pill--season {
    border-color: rgba(46, 125, 50, 0.45);
    background: rgba(46, 125, 50, 0.06);
}

html[data-theme="dark"] .sz-board-groups-strip__pill--season {
    border-color: rgba(178, 223, 219, 0.35);
    background: rgba(178, 223, 219, 0.08);
}

.sz-my-groups-list__item--season {
    border-left: 3px solid var(--sz-green-mid, #2e7d32);
}

.sz-my-groups-list__item--rivals,
.sz-tg-list--profile .sz-tg-list__item--rivals .sz-tg-list__card {
    border-left: 3px solid rgba(241, 116, 50, 0.72);
    background: rgba(241, 116, 50, 0.05);
}

html[data-theme="dark"] .sz-my-groups-list__item--rivals,
html[data-theme="dark"] .sz-tg-list--profile .sz-tg-list__item--rivals .sz-tg-list__card {
    border-left-color: rgba(255, 183, 77, 0.55);
    background: rgba(241, 116, 50, 0.08);
}

.sz-board-groups-strip__pill--rivals {
    border-style: dashed;
    border-color: rgba(241, 116, 50, 0.5);
    background: rgba(241, 116, 50, 0.08);
}

html[data-theme="dark"] .sz-board-groups-strip__pill--rivals {
    border-color: rgba(255, 183, 77, 0.42);
    background: rgba(241, 116, 50, 0.12);
}

.sz-board-groups-strip__pill--rivals .sz-board-groups-strip__pill-name {
    color: var(--sz-orange, #f17432);
}

html[data-theme="dark"] .sz-board-groups-strip__pill--rivals .sz-board-groups-strip__pill-name {
    color: #ffcc80;
}

.sz-groups-rivals-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(241, 116, 50, 0.14);
    color: var(--sz-orange, #f17432);
    border: 1px dashed rgba(241, 116, 50, 0.45);
}

html[data-theme="dark"] .sz-groups-rivals-icon {
    background: rgba(241, 116, 50, 0.18);
    color: #ffcc80;
    border-color: rgba(255, 183, 77, 0.4);
}

.sz-groups-rivals-icon svg {
    display: block;
    width: 58%;
    height: 58%;
}

.sz-groups-rivals-icon.sz-avatar--48 {
    width: 3rem;
    height: 3rem;
}

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

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

.sz-board-groups-strip__pill--more {
    border-style: dashed;
    border-color: rgba(241, 116, 50, 0.35);
    background: rgba(241, 116, 50, 0.06);
}

.sz-board-groups-strip__pill-name {
    display: block;
    width: 100%;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sz-green);
}

html[data-theme="dark"] .sz-board-groups-strip__pill-name {
    color: #c8e6c8;
}

.sz-board-groups-strip__pill-tag {
    font-size: 0.52rem;
    padding: 0.05rem 0.25rem;
    line-height: 1.2;
}

.sz-board-groups-strip__more-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--sz-orange);
    background: rgba(241, 116, 50, 0.15);
}

.sz-board-groups-spoiler__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 0;
}
.sz-my-groups-spoiler-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.sz-my-groups-spoiler-list__link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.sz-my-groups-spoiler-list__link:hover {
    background: rgba(61, 214, 140, 0.12);
}
.sz-my-groups-list,
.sz-my-groups-join-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.sz-my-groups-list__item,
.sz-my-groups-join-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 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));
}
.sz-my-groups-list__item--pending {
    opacity: 0.92;
    border-style: dashed;
}
.sz-my-groups-list__main,
.sz-my-groups-join-list__preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 12rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.sz-my-groups-list__meta,
.sz-my-groups-join-list__meta {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.sz-my-groups-list__name {
    font-weight: 600;
}
.sz-my-groups-list__sub {
    font-size: 0.88rem;
    color: var(--sz-muted);
}
.sz-my-groups-join-list__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.sz-my-groups-join-list__item[hidden],
.sz-my-groups-join-list__item.is-filter-hidden {
    display: none !important;
}
.sz-my-groups-discover__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 1rem;
    margin-bottom: 1rem;
}
.sz-my-groups-discover__search {
    flex: 1 1 14rem;
    min-width: min(100%, 14rem);
    max-width: 22rem;
}
.sz-my-groups-discover__search-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sz-small, #a8c9a8);
}
.sz-my-groups-discover__search-wrap {
    position: relative;
    display: block;
}
.sz-my-groups-discover__search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--sz-orange, #f17432);
    opacity: 0.9;
    pointer-events: none;
}
.sz-my-groups-discover__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem 0.55rem 2.4rem;
    border-radius: 999px;
    border: 1px solid rgba(241, 116, 50, 0.32);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(0, 28, 12, 0.55);
    color: var(--sz-body-color, #e8f5e8);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.25;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 14px rgba(0, 0, 0, 0.18);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}
.sz-my-groups-discover__input::placeholder {
    color: var(--sz-muted, #8fa88f);
    opacity: 1;
}
.sz-my-groups-discover__input:focus {
    outline: none;
    border-color: rgba(241, 116, 50, 0.62);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(0, 36, 16, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 2px rgba(241, 116, 50, 0.18),
        0 6px 18px rgba(0, 0, 0, 0.22);
}
.sz-my-groups-discover__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 0.9rem;
    width: 0.9rem;
    margin-right: 0.1rem;
    background: radial-gradient(circle, var(--sz-orange, #f17432) 38%, transparent 40%);
    cursor: pointer;
}
.sz-my-groups-discover.is-filter-active .sz-my-groups-discover__input {
    border-color: rgba(61, 214, 140, 0.45);
}
.sz-my-groups-discover__filters {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 0.4rem;
}
.sz-my-groups-chip {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--sz-spoiler-border, rgba(255, 255, 255, 0.14));
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.sz-my-groups-chip.is-active {
    border-color: var(--sz-accent, #3dd68c);
    background: rgba(61, 214, 140, 0.15);
}
.sz-my-groups-tag {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--sz-muted, #a8c9a8);
}
.sz-my-groups-discover__cta,
.sz-my-groups-discover__foot,
.sz-my-groups-panel__foot {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.sz-link-muted {
    font-size: 0.9rem;
    color: var(--sz-muted);
}

/* Tippgruppen-Listen: Light Mode (Meine Gruppen, Profil, Ranglisten) */
html[data-theme="light"] .sz-my-groups-list__item,
html[data-theme="light"] .sz-my-groups-join-list__item,
html[data-theme="light"] .sz-tg-list__item,
html[data-theme="light"] .sz-tg-list__card {
    color: var(--sz-body-color);
    background: var(--sz-match-card-bg);
    border-color: var(--sz-match-card-border);
    box-shadow: var(--sz-match-card-shadow);
}

html[data-theme="light"] .sz-tg-list--profile .sz-tg-list__item {
    background: transparent;
    border: 0;
    box-shadow: none;
}

html[data-theme="light"] .sz-my-groups-list__main,
html[data-theme="light"] .sz-my-groups-join-list__preview {
    color: var(--sz-body-color);
}

html[data-theme="light"] .sz-my-groups-list__name,
html[data-theme="light"] .sz-my-groups-join-list__meta strong,
html[data-theme="light"] .sz-tg-list__meta strong,
html[data-theme="light"] .sz-tg-list__name {
    color: var(--sz-body-color);
}

html[data-theme="light"] .sz-my-groups-list__sub,
html[data-theme="light"] .sz-my-groups-join-list__meta .sz-hint {
    color: var(--sz-hint-color);
}

html[data-theme="light"] .sz-my-groups-spoiler-list__link {
    color: var(--sz-body-color);
}

html[data-theme="light"] .sz-my-groups-spoiler-list__link:hover {
    background: rgba(0, 92, 30, 0.08);
}

html[data-theme="light"] .sz-my-groups-chip {
    border-color: var(--sz-spoiler-border);
    color: var(--sz-body-color);
}

html[data-theme="light"] .sz-my-groups-chip.is-active {
    border-color: var(--sz-green-mid);
    background: rgba(0, 92, 30, 0.1);
    color: var(--sz-green);
}

html[data-theme="light"] .sz-my-groups-discover__search-label {
    color: var(--sz-match-meta, #4a5c4e);
}

html[data-theme="light"] .sz-my-groups-discover__search-icon {
    color: var(--sz-orange, #e86a28);
}

html[data-theme="light"] .sz-my-groups-discover__input {
    color: var(--sz-body-color);
    background: #fff;
    border-color: rgba(0, 60, 10, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 10px rgba(0, 40, 15, 0.06);
}

html[data-theme="light"] .sz-my-groups-discover__input::placeholder {
    color: var(--sz-muted, #6b7c6f);
}

html[data-theme="light"] .sz-my-groups-discover__input:focus {
    border-color: rgba(241, 116, 50, 0.55);
    box-shadow:
        0 0 0 2px rgba(241, 116, 50, 0.14),
        0 4px 14px rgba(0, 40, 15, 0.08);
}

html[data-theme="light"] .sz-my-groups-tag {
    background: rgba(0, 60, 10, 0.08);
    color: var(--sz-hint-color);
}

html[data-theme="light"] .sz-link-muted {
    color: var(--sz-hint-color);
}

/* Admin: Anmeldungen & Registrierungen */
.sz-tipper-list__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}

.sz-tipper-list__modes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.3rem;
    border-radius: 12px;
    background: var(--sz-tips-table-th-bg);
}

.sz-tipper-list__modes .sz-btn {
    border-radius: 9px;
}

.sz-tipper-list__select {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sz-hint-color);
}

.sz-tipper-list__select select {
    min-width: 14rem;
    padding: 0.5rem 0.65rem;
    border-radius: 9px;
    border: 1px solid var(--sz-form-border);
    background: var(--sz-form-select-bg, rgba(255, 255, 255, 0.04));
    color: var(--sz-body-color);
    font-weight: 500;
}

html[data-theme="dark"] .sz-tipper-list__select select {
    border-color: var(--sz-form-select-border);
    color: var(--sz-form-select-option-fg);
}

.sz-tipper-list__count {
    margin: 0 0 1rem;
    color: var(--sz-muted);
    font-size: 0.92rem;
}

.sz-tipper-list__count strong {
    color: var(--sz-body-color);
}

/* Tabelle */
.sz-tipper-list__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    color: var(--sz-tips-table-cell);
    background: transparent;
}

.sz-tipper-list__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sz-tips-table-th-bg);
    color: var(--sz-tips-table-th-fg);
    padding: 0.7rem 0.85rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--sz-tips-table-border);
    white-space: nowrap;
}

.sz-tipper-list__table tbody td {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--sz-tips-table-border);
    vertical-align: middle;
}

.sz-tipper-list__table tbody tr:nth-child(even) {
    background: var(--sz-tips-table-row-alt);
}

.sz-tipper-list__table tbody tr:hover {
    background: rgba(241, 116, 50, 0.12);
}

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

.sz-tipper-list__table tbody tr:last-child td {
    border-bottom: none;
}

.sz-tipper-list__pos {
    width: 3.25rem;
    text-align: right;
    color: var(--sz-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.sz-tipper-list__avatar {
    width: 3.25rem;
    padding-right: 0.35rem !important;
    vertical-align: middle;
}

.sz-tipper-list__avatar .sz-avatar {
    display: inline-block;
    vertical-align: middle;
}

.sz-tipper-list__nick {
    font-weight: 600;
    color: var(--sz-body-color);
}

.sz-tipper-list__row--linked {
    cursor: pointer;
}

.sz-tipper-list__profile-link {
    color: inherit;
    text-decoration: none;
}

.sz-tipper-list__profile-link:hover,
.sz-tipper-list__profile-link:focus-visible {
    color: var(--sz-link, #1a6bb5);
    text-decoration: underline;
}

.sz-tipper-list__row--linked:hover .sz-tipper-list__profile-link:not(:hover) {
    color: var(--sz-link, #1a6bb5);
}

.sz-tipper-list__email {
    color: var(--sz-muted);
    word-break: break-word;
}

html[data-theme="dark"] .sz-tipper-list .sz-muted,
html[data-theme="dark"] .sz-tipper-list__table .sz-muted {
    color: var(--sz-muted);
}

html[data-theme="dark"] .sz-tipper-list .sz-badge--muted {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sz-muted);
}

.sz-tipper-list__status {
    min-height: 1.5rem;
    margin-top: 0.85rem;
    text-align: center;
}

.sz-muted,
.sz-tipper-list__end {
    color: var(--sz-muted);
}

.sz-tipper-list__sentinel {
    height: 1px;
}

.sz-badge--muted {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(127, 159, 127, 0.22);
    color: var(--sz-muted);
    vertical-align: middle;
}

@media (max-width: 640px) {
    .sz-tipper-list__email {
        font-size: 0.82rem;
    }

    .sz-tipper-list__table thead th,
    .sz-tipper-list__table tbody td {
        padding: 0.5rem 0.55rem;
    }
}

/* Admin: Tipps korrigieren */
.sz-tipfix__modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.sz-tipfix__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    align-items: flex-end;
    margin-bottom: 1.1rem;
}

.sz-tipfix__select {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sz-muted, #5a6e5c);
}

.sz-tipfix__select select {
    min-width: 16rem;
    max-width: min(34rem, 80vw);
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
}

.sz-tipfix__head {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(127, 159, 127, 0.22);
}

.sz-tipfix__match {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.sz-tipfix__sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    align-items: center;
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.sz-tipfix__date {
    color: var(--sz-muted, #5a6e5c);
}

.sz-tipfix__result-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(46, 160, 67, 0.16);
    color: #1f7a33;
}

.sz-tipfix__hint {
    margin: 0;
}

.sz-tipfix__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sz-tipfix-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.85rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: rgba(127, 159, 127, 0.08);
}

.sz-tipfix-row:nth-child(odd) {
    background: rgba(127, 159, 127, 0.13);
}

.sz-tipfix-row__rank {
    flex: 0 0 2rem;
    text-align: center;
    font-weight: 700;
    color: var(--sz-muted, #5a6e5c);
}

.sz-tipfix-row__who {
    flex: 1 1 11rem;
    min-width: 8rem;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sz-tipfix-row__who small {
    color: var(--sz-muted, #5a6e5c);
    font-size: 0.78rem;
}

.sz-tipfix-row__score {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sz-tipfix-row__score input {
    width: 3.1rem;
    padding: 0.4rem 0.45rem;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
}

.sz-tipfix-row__colon {
    font-weight: 700;
}

.sz-tipfix-row__extra {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sz-tipfix-row__extra select {
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    font-size: 0.82rem;
}

.sz-tipfix-row__pts {
    flex: 0 0 auto;
    min-width: 4.5rem;
    text-align: right;
}

.sz-tipfix-row__pts-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    background: rgba(127, 159, 127, 0.22);
    color: var(--sz-muted, #5a6e5c);
}

.sz-tipfix-row button[type="submit"] {
    margin-left: auto;
}

.sz-matchresult__score-label {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sz-muted, #5a6e5c);
}

.sz-matchresult__ko {
    margin: 0;
    padding: 0.75rem 0 0;
    border: 0;
    min-width: 0;
}

.sz-matchresult__ko legend {
    padding: 0;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.sz-matchresult__ko-fields[hidden] {
    display: none;
}

.sz-matchresult__ko-hint--hidden {
    display: none;
}

.sz-matchresult__ko-real {
    margin-top: 0.75rem;
}

.sz-matchresult__ko .sz-tipfix-row__extra {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sz-matchresult__ko .sz-tipfix-row__extra select {
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    font-size: 0.82rem;
}

.sz-matchresult__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.sz-matchresult__score {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sz-matchresult__score input {
    width: 3.5rem;
    padding: 0.5rem 0.55rem;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
}

.sz-matchresult__colon {
    font-weight: 700;
    font-size: 1.2rem;
}

.sz-matchresult__confirm {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    max-width: 36rem;
    line-height: 1.35;
}

.sz-matchresult__locked-badge {
    margin: 0.35rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    font-size: 0.88rem;
    background: rgba(180, 120, 0, 0.12);
    color: #8a5a00;
}

.sz-matchresult__unlock {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(127, 159, 127, 0.25);
}

@media (max-width: 640px) {
    .sz-tipfix__select select {
        min-width: 100%;
    }

    .sz-tipfix-row {
        align-items: flex-start;
    }

    .sz-tipfix-row__pts {
        text-align: left;
    }
}

/* App-Download /app/android */
.sz-app-download__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: start;
    margin: 1.25rem 0;
}
.sz-app-download__btn {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.sz-app-download__size {
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.85;
}
.sz-app-download__qr {
    margin: 0;
    text-align: center;
}
.sz-app-download__qr img {
    display: block;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.35rem;
}
.sz-app-download__steps {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}
.sz-app-download__steps li + li {
    margin-top: 0.35rem;
}
@media (max-width: 720px) {
    .sz-app-download__grid {
        grid-template-columns: 1fr;
    }
    .sz-app-download__qr img {
        margin: 0 auto;
    }
}

/* Admin: Newsletter-Bounces */
.page-admin-newsletter-bounces .sz-newsletter-bounce-cron-row + .sz-newsletter-bounce-cron-row {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--sz-border-subtle, rgba(0, 0, 0, 0.08));
}
.page-admin-newsletter-bounces .sz-newsletter-bounce-cron-label {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
}
.sz-badge--bounce-updated { background: rgba(34, 120, 60, 0.15); color: #1a5c30; }
.sz-badge--bounce-known_email { background: rgba(196, 90, 32, 0.15); color: #8a3d12; }
.sz-badge--bounce-no_recipient { background: rgba(180, 50, 50, 0.12); color: #8b2020; }
.sz-badge--bounce-not_bounce { background: rgba(100, 100, 100, 0.12); color: #444; }
.sz-badge--bounce-error { background: rgba(180, 50, 50, 0.2); color: #8b2020; }