/* =========================================================================
   SCHRIFTEN (selbst gehostet – keine Verbindung zu Google, DSGVO-freundlich)
   Atkinson Hyperlegible Next: für gute Lesbarkeit entwickelt (Fließtext)
   Barlow Condensed: Überschriften und Zahlen (Anzeigetafel-Charakter)
   ========================================================================= */
@font-face { font-family: 'Atkinson Next'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Atkinson Next'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Atkinson Next'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Atkinson Next'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/barlow-condensed-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/barlow-condensed-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF; }

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: inherit;
}

/* =========================================================================
   FARBEN „Fichte & Scheibe“ (Oktober 2026)
   Alle Farben stehen hier. Die alten Variablen (--primary-background-color …)
   zeigen auf die neuen Werte, damit ältere Seiten automatisch mitziehen.
   ========================================================================= */
:root {
    --font-body: 'Atkinson Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;

    --c-pine-900: #0b3b2e;   /* Kopfzeile, dunkle Flächen */
    --c-pine-800: #0f4a3a;
    --c-pine-700: #145a45;
    --c-pine-600: #1a6e54;   /* Hauptfarbe: Buttons, Links */
    --c-pine-100: #e2f0e9;   /* zarte Hervorhebung (eigene Zeile) */
    --c-signal: #ffc531;     /* Aktion: „Jetzt tippen“, Treffer */
    --c-signal-hover: #f5b400;
    --c-miss: #c2362b;       /* Fehler, Strafrunde */
    --c-target: #16191b;     /* Scheibe */

    --c-bg: #f3f6f4;         /* Seitenhintergrund: Schnee */
    --c-card: #ffffff;
    --c-card-alt: #f7faf8;
    --c-ink: #14201c;        /* Text */
    --c-muted: #48574f;      /* Nebentext (Kontrast > 7:1) */
    --c-line: #d5dfda;
    --c-link: var(--c-pine-600);
    --c-on-dark: #ffffff;
    --c-gold: #c8961c; --c-silver: #8a959c; --c-bronze: #a8653a;

    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 22px;
    --shadow-card: 0 1px 2px rgba(11, 59, 46, .06), 0 4px 14px rgba(11, 59, 46, .06);
    --tap: 48px;             /* Mindestgröße für alles, was man antippt */
    --tabbar-h: 0px;

    /* alte Variablen → neue Werte */
    --border-radius: var(--radius-s);
    --highlight-background-color: var(--c-signal);
    --primary-background-color: #1a6e54;
    --primary-background-color-rgb: 26, 110, 84;
    --primary-font-color: var(--c-ink);
    --default-background-color: var(--c-bg);
    --table-second-color: var(--c-card);
}

html.dark-mode {
    --c-pine-900: #08251d;
    --c-pine-800: #0c3027;
    --c-pine-700: #3fa67c;
    --c-pine-600: #5cc497;
    --c-pine-100: #183a2e;
    --c-bg: #0d1714;
    --c-card: #15231e;
    --c-card-alt: #1b2c26;
    --c-ink: #e9f0ec;
    --c-muted: #a9bab1;
    --c-line: #2a3d35;
    --c-target: #050707;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);

    --primary-background-color: #1f7a5c;
    --primary-background-color-rgb: 31, 122, 92;
    --primary-font-color: var(--c-ink);
    --default-background-color: var(--c-bg);
    --table-second-color: var(--c-card);
    color-scheme: dark;
}

.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#contentbox {
    padding: 5px;
    height: 100%;
    width: 50%;
    margin-top: 0;
    margin-left: 0;
    flex-grow: 1;
    background-color: rgba(245, 245, 245, 0.541);
    overflow-y: scroll !important;
    overflow-x: hidden;
    /* border-left: 2px #56606f solid; */
}

body {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background-color: var(--default-background-color);
    color: var(--primary-font-color);
}

.nav_list_s ul {
    margin: 0 !important;
}

#title {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.33rem !important;
    height: 100%;
}

#loading-screen {
    display: none; /* Standardmäßig ausgeblendet */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter schwarzer Hintergrund */
    z-index: 1000; /* Überlagerung anderer Elemente */
    text-align: center;
}

.spinner {
    border: 8px solid #f3f3f3; /* Heller Rand */
    border-top: 8px solid #3498db; /* Blauer Rand oben */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%; /* Vertikal zentrieren */
    left: 50%; /* Horizontal zentrieren */
    transform: translate(-50%, -50%); /* Komplette Zentrierung */
}

.user-link {
    cursor: pointer;
}

.previous-links,
.next-links {
    gap: 0.5rem;
}

/* Spinner-Drehung */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.title-text {
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    color: white;
}
:root,
html.light-mode,
html.dark-mode {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.theme-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    color: var(--primary-font-color);
    background: var(--primary-background-color);
    border: 2px solid var(--primary-font-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-button:hover {
    background: var(--highlight-background-color);
    color: var(--default-background-color);
}

.theme-button:active {
    transform: scale(0.95);
}

.theme-button:focus {
    outline: 3px solid var(--primary-font-color);
}

.title-icon {
    width: 2rem;
    filter: invert();
}

#impressum {
    padding: 1rem;
}

#platzhalter {
    height: 10%;
}

.transparent_logo {
    width: 90%;
    margin: 0 auto;
    padding-top: 5px;
}

.nav {
    display: flex;
    flex-direction: column;
}

:root {
    --default-color: orange;
    --focus-color: orangered;
}

.text p,
.text h1 {
    text-align: center;
}




.logo img {
    height: 100%;
}


.title {
    font-size: 2rem;
    font-weight: 600;
}

html {
    scroll-behavior: smooth;
}

.wrapper {
    width: 100%;
    min-height: 90vh;
}

.site_content {
    padding: 10px;
}

.modal-dialog {
    max-width: 600px !important;
}

.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.modal-header{
    padding-bottom: 0;
    align-items: flex-start;
}
.modal-header #start-time{
    margin: 0;
}

.modal-header #modal-user-name{
    font-weight: 700;
}
.modal-header .close {
    color: var(--primary-font-color);
}

.login form {
    display: flex;
    flex-direction: column;
}

.login form button {
    margin-top: 1rem;
}

#clearbtn {
    display: none;
    margin-top: 1px;
}
#clearbtn.active {
    display: block;
}

.a {
    color: var(--highlight-background-color);
    cursor: pointer;
    text-decoration: none;
}

.a:hover {
    color: var(--focus-color);
    text-decoration: underline;
}

.register_stage_2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.download {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.centered {
    display: flex;
    width: 100%;
    justify-content: center;
}

.modal-dialog {
    margin-top: calc(0.5rem + 10vh);
}

.liga_index_main_name {
    color: var(--primary-font-color);
}

#menu {
    display: none;
    cursor: pointer;
}
.menu {
    display: none;
}

.btn.btn-primary.btn-fragebogen {
    display: none;
}
.no_button {
    outline: none;
    border: none;
    background-color: transparent;
    padding: 0;
    color: #797979;
}

.no_button:hover {
    scale: 1.1;
}

.login_logout_buttons {
    position: absolute;
    bottom: 5px;
    left: 5px;
}


@media (max-width: 800px) {
    h1 {
        font-size: 1.5rem !important;
    }
    h2 {
        font-size: 1.2rem !important;
    }
    p {
        font-size: 1rem !important;
    }

    .wrapper {
        margin-bottom: 25px;
    }
}

.close {
    scale: 1.5;
}

.hidden_link {
    cursor: default;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nolink {
    text-decoration: none;
    line-height: 0px;
    color: inherit;
}
.nolink:hover {
    color: inherit;
}
.nolink:focus {
    color: inherit;
}

#login-welcome {
    max-width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#login-title {
    text-align: center;
}

.race-select {
    display: none;
}

.tipp-athletes-race-info {
    font-size: 1.5rem;
}

.tipps {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Erstelle 4 Spalten pro Zeile */
    gap: 0.7rem;
    max-width: 100%;
    width: 100%;
}

.tipp {
    display: flex;
    flex-direction: column;
    max-width: 50%;
    min-width: 100%;
    justify-content: space-between;
    border: 1px var(--primary-font-color) solid;
    padding: 0.5rem;
    border-radius: var(--border-radius);
}

.athlete-info {
    display: flex;
    width: 100%;
    gap: 1rem;
}

.btn-primary {
    background-color: var(--primary-background-color);
    border-color: var(--primary-background-color);
}

.tippen {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.tippen .btn {
    margin-top: 1rem;
}

.index-tipp-ath {
    display: flex;
    gap: 1rem;
}

.index-rennen-tippen {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    align-items: center;
}

.index-rennen-tippen > a {
    margin-top: 1rem;
    width: 100%;
}

#myForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.tipp.checked {
    border: green 1px solid;
    border-radius: var(--border-radius);
}

/* Container-Wrapper von Select2 */
.select2-container {
    width: 100% !important; /* Stellt sicher, dass es responsiv ist */
}

/* Eingabefeld */
.select2-selection {
    background-color: var(--default-background-color) !important; /* Hintergrundfarbe */
    border: 1px solid var(--primary-background-color) !important; /* Randfarbe */
    border-radius: var(--border-radius); /* Abgerundete Ecken */
    padding: 6px; /* Innenabstand */
    min-height: 40px; /* Mindesthöhe */
    font-size: 14px; /* Schriftgröße */
}
.select2-selection--single .select2-selection__rendered {
    color: var(--primary-font-color) !important;
}

.select2-selection--single .select2-selection__rendered span:first-child,
.select2-results__option span {
    display: flex !important;
    align-items: center;
    gap: 0.1rem;
    font-size: 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

/* Hover-Effekt auf dem Dropdown */
.select2-selection:hover {
    border-color: var(--primary-background-color); /* Blau beim Hover */
}

/* Fokus auf dem Eingabefeld */
.select2-selection--single:focus {
    outline: none; /* Entfernt Standardfokus */
    border-color: var(--primary-background-color); /* Blauer Rand beim Fokussieren */
    box-shadow: 0 0 4px var(--primary-background-color); /* Glow-Effekt */
}

/* Dropdown-Container */
.select2-dropdown {
    background-color: var(--default-background-color); /* Weißer Hintergrund */
    border: 1px solid var(--primary-background-color); /* Rahmen */
    border-radius: var(--border-radius); /* Abgerundete Ecken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten */
}

/* Dropdown-Optionen */
.select2-results__option {
    padding: 8px; /* Innenabstand */
    font-size: 14px; /* Schriftgröße */
}

/* Hover-Effekt auf Optionen */
.select2-results__option--highlighted {
    background-color: var(--primary-background-color) !important; /* Blau als Highlight */
    color: var(--primary-font-color); /* Weißer Text */
}

.select2-search__field {
    background-color: var(--default-background-color);
    border: 1px solid var(--primary-background-color) !important; /* Rahmen */
    color: var(--primary-font-color);
    outline: none;
}

.tipp.checked .index-tipp-ath {
    display: flex;
    justify-content: space-between;
}

.checked-tipp-first {
    display: flex;
    gap: 1rem;
}

.checked-green {
    color: green;
    fill: green;
}
.checked-red {
    color: rgb(203, 0, 0);
    fill: rgb(203,0,0);
}

.welcome-title {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    display: center;
    margin-top: 1rem;
    padding: 0.5rem;
}

.countdown,
.countdown-landing-page {
    display: flex;
    gap: 10px;
    text-align: center;
    padding: 0 1rem;
    justify-content: center;
}
.time-box,
.time-box-landing-page {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.time-box h2,
.time-box-landing-page h2 {
    margin: 0;
    font-size: 16px;
}

.time-box p,
.time-box-landing-page p {
    font-size: 12px !important;
    margin: 0;
    margin-top: 5px;
    text-transform: uppercase;
}

.paypal-button {
    background-color: #083094 !important;
    border-radius: 12px;
}

.donation-tile-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

#donation-tile {
    margin-bottom: 1rem;
}

#remove-tile-button {
    opacity: 1;
    font-size: 1.3rem;
    color: var(--primary-font-color);
}

#race-name {
    text-align: left !important;
}

.bmc-btn {
    width: 100%;
    height: 38px !important;
}

.donation-tile-header {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    align-items: center;
}

.leaderboard-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--default-background-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Titel des Leaderboards */
.leaderboard-title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: var(--primary-font-color);
}

.einladung-container {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 400px;
}

.einladung-input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
}

.einladung-input {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px 0 0 8px;
    outline: none;
    background-color: #f9f9f9;
    color: #555;
}

.einladung-input-container .form-control {
    border-radius: 0.25rem 0 0 0.25rem;
}
.einladung-input-container .btn-primary {
    border-radius: 0 0.25rem 0.25rem 0;
}

.create_liga_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 0.5rem;
}

.create_liga_form input {
    width: 100%;
}

.copy-button {
    padding: 10px;
    font-size: 16px;
    background: #38c172;
    color: white;
    border: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-button:hover {
    background: #2d995b;
}

.copy-icon {
    margin-left: 5px;
}

/* Tabelle */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.index-table {
    margin-bottom: 0rem;
}

.index-table td,
.index-table th {
    padding: 0.5rem 0;
}

.index-table tbody tr:last-child {
    border: none;
}

.index-table tbody tr:last-child td {
    border-bottom: 0px;
}

.table-header {
    background-color: var(--primary-background-color);
    color: white;
    font-weight: bold;
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid var(--table-border-color);
}

.table-row:nth-child(even) {
    background-color: var(--table-second-color);
}

.table-row:hover {
    background-color: var(--highlight-background-color);
}

.table-cell {
    padding: 10px;
    border-bottom: 1px solid #fff;
}

.highlight-row {
    background-color: var(--highlight-background-color) !important;
}

/* Benutzerinfo */
.user-info {
    text-align: center;
    margin-bottom: 20px;
}

.user-info-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-font-color);
}

.user-info-text {
    font-size: 1rem;
    color: #555;
}

.user-rank {
    font-weight: bold;
    color: var(--primary-font-color);
}

.user-points {
    font-weight: bold;
    color: var(--primary-background-color);
}

/* Pagination */
.pagination-container {
    text-align: center;
}

.pagination-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 10px 0;
    justify-content: center;
}

#unique-footer {
    font-size: 0.9rem;
    position: relative;
    z-index: 9999; /* Cookie-Banner (2147483647) muss darüber liegen */
}

#unique-footer .footer-heading {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

#unique-footer .footer-link {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s ease;
}

#unique-footer .footer-link:hover {
    color: #fff;
}

#unique-footer .footer-icon {
    font-size: 1.5rem;
    color: #bbb;
    transition: color 0.3s ease;
}

#unique-footer .footer-icon:hover {
    color: #fff;
}

#unique-footer .footer-divider {
    border-color: #444;
}

#unique-footer .important-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

#unique-footer .text-center p {
    color: #bbb;
    font-size: 0.9rem !important;
}

#unique-footer .social-media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

#contact {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

/* .pagination-link {
    display: inline-block;
    padding: 6px 8px;
    margin: 0 3px;
    font-size: 12px;
    color: var(--pagination-link-color);
    text-decoration: none;
    border: 1px solid var(--table-border-color);
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination-link:hover {
    background-color: var(--pagination-hover-background);
    color: var(--pagination-hover-color);
} */

.ergebnis_details {
    padding: 1rem;
}

.pagination-info {
    display: inline-block;
    margin: 0 10px;
    color: #555;
}
.latest-tipp-footer {
    display: flex;
    flex-direction: column;
}

.latest-tipp-header-race {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
}

.hidden {
    display: none;
}

.hiddenAthlete {
    background-color: var(--table-second-color) !important;
}

.rotate {
    transition: transform 0.3s ease;
    fill: var(--primary-font-color);
}

.open .rotate svg {
    transform: rotate(180deg);
}

.meine_ligen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 1rem;
}
.meine_ligen ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.liga_index_header {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.liga_index_header a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.liga_index_header h2 {
    margin: 0;
}

.liga_index {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-header .close {
    border: none;
    background-color: transparent;
    scale: 2;
}

.liga_index_main_name {
    border: none;
    background-color: transparent;
}

.meine-tipps-tipps {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
}
.meine-tipps-tipps .tipp {
    min-width: 50%;
}

.timeline {
    position: relative;
    width: 100%;
    height: 2rem; /* Höhe der Linie anpassen */
    background-color: #f2eeee; /* Hintergrundfarbe anpassen */
}

.label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff; /* Hintergrundfarbe des Labels anpassen */
    padding: 0 10px; /* Abstand des Labels zum Text anpassen */
}

.register {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
}

.register-submit {
    margin-top: 1rem;
    width: 100%;
}
.modal-body{
        padding-bottom: 0;

}

.modal-content {
    background-color: var(--default-background-color);
}

.show-modal-magnifier {
    fill: var(--primary-font-color);
}

.register-form-title {
    text-align: center;
}
@media screen and (max-width: 1500px) {
    .tipps {
        grid-template-columns: repeat(3, 1fr); /* Erstelle 4 Spalten pro Zeile */
    }
}
@media screen and (max-width: 1150px) {
    .tipps {
        grid-template-columns: repeat(2, 1fr); /* Erstelle 4 Spalten pro Zeile */
    }
}

@media screen and (max-width: 800px) {
    .tipps {
        grid-template-columns: 1fr;
    }
    .mobile-hide {
        display: none;
    }
}

.password-reset-email {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
    gap: 1rem;
    padding: 1rem;
}

.password-reset-email form {
    display: flex;
    flex-direction: column;
}

.password-reset-email form button {
    margin-top: 1rem;
}

.reset-password-set-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
    gap: 1rem;
    padding: 1rem;
}

.reset-password-set-new form {
    display: flex;
    flex-direction: column;
}

.reset-password-set-new form button {
    margin-top: 1rem;
}
.tipp-athletes-form {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
}
.nation-flag-sm {
    width: 1rem;
}

#liga_detail_list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#liga_detail_list li {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.liga_ergebnis_select {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.form-select,
.form-control,
.form-control:focus {
    background-color: var(--default-background-color) !important;
    border-color: var(--primary-background-color) !important;
    color: var(--primary-font-color) !important;
}

.btn-outline-primary {
    color: var(--primary-background-color);
    border-color: var(--primary-background-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--primary-background-color);
}

.btn-outline-primary:active:focus,
.btn-primary:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-background-color-rgb), 0.5);
}

.navigation-icons {
    display: flex;
    gap: 1rem;
    align-items: center;
    height: 100%;
}

.landing_page {
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.nav-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: white;
    align-items: center;
    font-size: 0.7rem;
    height: 100%;
    justify-content: center;
    text-align: center;
}

.nav-item:hover, .nav-item:focus{
    color: white;
}

.liga_detail_wrapper {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.liga_detail_add_user {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.table-scrollable {
    width: 100%;
    margin: 0 0 1em;
    overflow-y: auto;
}

.table {
    color: inherit;
    fill: inherit;
}

.table th {
    font-weight: 500;
}

.table-scrollable::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
}

.table-scrollable::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid #fff;
    background-color: rgba(0, 0, 0, 0.3);
}

.drag-drop-icon {
    width: 20px;
    cursor: pointer;
}

.fixed-select {
    position: fixed;
    background-color: var(--primary-background-color);
    width: fit-content;
    height: fit-content;
    max-width: 150px;
    right: 0px;
    z-index: 5;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: space-between;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    visibility: hidden;
    top: 45vh;
}

.fixed-select .fixed-select-elem:last-child {
    border-bottom: none;
}

.fixed-select.fixed {
    visibility: visible;
}

.fixed-select-elem {
    border-bottom: white 1px solid;
    height: 100%;
    width: 100%;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    text-align: center;
    min-height: 44px;
}

.fixed-select-elem-remove-icon svg {
    width: 20px;
    height: 20px;
    color: white;
    cursor: pointer;
}
.fixed-select-elem-remove-icon {
    display: none;
}
#athlete-table {
    margin-right: 100px;
    background-color: var(--default-background-color);
}

table.dataTable tbody tr {
    background-color: var(--default-background-color);
    color: var(--primary-font-color) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--primary-font-color) !important;
}

#athlete-table_filter {
    color: var(--primary-font-color);
}

#athlete-table_filter input {
    background-color: var(--default-background-color);
    border: 1px solid var(--primary-background-color);
    border-radius: var(--border-radius);
    outline: none;
    color: var(--primary-font-color);
}

#athlete-table tr td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--default-background-color);
    fill: var(--primary-font-color);
    padding: 12px 15px;
}

.hiddenAthlete td:first-child {
    background-color: var(--table-second-color) !important;
}

.infinite-hidden {
    visibility: hidden;
}

.ergmodal .modal-footer {
    display: flex;
    justify-content: space-between;
}

.modal-direction-wrapper {
    display: flex;
    gap: 1rem;
}

.fixed {
    position: fixed;
}

.info-icon {
    fill: red;
}

.startlistNotReady {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0px;
    z-index: 10000000000;
    background-color: var(--default-background-color);
    padding: 0.5rem;
    border: 0.2rem solid red;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_disabled {
    background-color: var(--primary-background-color);
    color: white;
}

#athlete-table_filter {
    padding: 1rem;
}

#athlete-table thead {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Basis-Design für alle Spenden-Buttons */
.donate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 12px; /* Abstand nach unten */
    border-radius: 50px; /* Pillen-Form */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none !important;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    border: none;
    line-height: 1;
}

/* Hover-Effekt für beide */
.donate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.donate-btn:active {
    transform: translateY(0);
}

/* PayPal Spezifisch (Offizielles PayPal Blau) */
.btn-paypal {
    background-color: #003087;
    color: #ffffff !important;
}
.btn-paypal:hover {
    background-color: #00256b;
    color: #ffffff !important;
}

/* Wero Spezifisch (Offizielles Wero Gelb) */
.btn-wero {
    background-color: #fff48d;
    color: #1d1c1c !important;
}
.btn-wero:hover {
    background-color: #fceb65;
    color: #1d1c1c !important;
}

/* Icons innerhalb der Buttons */
.btn-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    fill: currentColor; /* Nimmt die Textfarbe an */
}
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    min-height: 80vh; /* Etwas höher für bessere Zentrierung */
}

.login-card {
    /* Nutzt dein Standard-Grau aus der CSS oder Weiß im Lightmode */
    background: var(--default-background-color);
    padding: 2.5rem;
    border-radius: 15px;
    /* Ein subtiler Schatten, der im Darkmode dunkler wirkt */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 420px;
    text-align: center;
    border: 1px solid rgba(128, 128, 128, 0.1);
}

#login-title h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--primary-font-color);
}

.subtitle {
    font-size: 0.9rem;
    color: var(--primary-font-color);
    opacity: 0.7;
    margin-bottom: 2rem;
}

.login-form .field-wrapper {
    text-align: left;
    margin-bottom: 1.2rem; /* Großer Abstand zwischen den Eingabeblöcken */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Abstand zwischen Label und Eingabefeld */
    width: 100%;
}

/* Label Styling */
.login-form .field-wrapper label {
    font-weight: 500;
    margin-left: 2px;
    color: var(--primary-font-color);
}

/* Optional: Fehler-Meldungen hervorheben */
.login-form .text-danger {
    color: #dc3545;
    font-size: 0.875em;
}

/* Inputs passend zu deinen .form-control Styles */
.login-form input {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--default-background-color);
    border: 1px solid var(--primary-background-color);
    border-radius: 8px;
    color: var(--primary-font-color);
    transition: all 0.3s ease;
}

.login-form input:focus {
    border-color: var(--highlight-background-color) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2); /* Nutzt dein Orange */
}

/* Login Button - Nutzt dein Biathlon-Blau/Orange-Schema */
.btn-login {
    width: 100%;
    padding: 12px;
    background-color: var(--primary-background-color);
    border: 2px solid transparent;
    border-radius: 8px;
    font-weight: bold;
    color: white;
    margin-bottom: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-login:hover {
    background-color: var(--highlight-background-color);
    color: var(--default-background-color);
    transform: translateY(-2px);
}

/* Footer & Links */
.login-footer {
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    padding-top: 1.5rem;
    font-size: 0.85rem;
}

.link-highlight {
    color: var(--highlight-background-color);
    font-weight: bold;
    text-decoration: none;
}

.link-highlight:hover {
    text-decoration: underline;
}

.link-secondary {
    color: var(--primary-font-color);
    opacity: 0.6;
    text-decoration: none;
}

.link-secondary:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Dark Mode spezifische Anpassung der Card */
html.dark-mode .login-card {
    background-color: var(--table-second-color); /* Nutzt dein dunkleres Grau */
    border-color: rgba(255, 255, 255, 0.05);
}

.password-toggle-btn .icon-hide {
    display: none;
}
.password-toggle-btn .icon-show {
    display: inline-block;
}

/* Aktiver Zustand: Passwort ist sichtbar -> Zeige "Auge durchgestrichen" */
/* Die Klasse .active wird durch dein JS in der base.html gesetzt */
.password-toggle-btn.active .icon-show {
    display: none;
}
.password-toggle-btn.active .icon-hide {
    display: inline-block;
}

/* Optional: Button etwas schöner integrieren, falls er nicht perfekt am Input sitzt */
.password-toggle-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    z-index: 10; /* Damit der Button über dem Input-Rand liegt */
    border-color: var(--primary-background-color); /* Nutzt deine Variablen */
}

/* Im Darkmode den Button-Rahmen anpassen */
html.dark-mode .password-toggle-btn {
    color: var(--primary-font-color);
}

.login-icon-btn {
    color: white; /* Oder var(--primary-font-color) falls im Header anders */
    display: flex;
    align-items: center;
    padding: 5px;
    margin-right: 5px;
    transition: color 0.2s;
}

.login-icon-btn:hover {
    color: var(--highlight-background-color);
}

.login-icon-btn svg {
    width: 26px; /* Groß genug für Finger */
    height: 26px;
}

/* Anpassung des Registrieren-Buttons für Mobile */
.btn-register-mobile {
    font-size: 0.8rem !important; /* Etwas kleinerer Text */
    padding: 4px 8px !important;
    white-space: nowrap; /* Verhindert Umbruch */
}


/* Login Icon etwas größer und leichter zu treffen */
.login-icon-btn {
    color: white; 
    display: flex;
    align-items: center;
    padding: 8px; /* Mehr Padding = leichtere Touch-Bedienung */
    margin-right: 0px; 
}

.login-icon-btn:hover {
    color: var(--highlight-background-color);
}

.navigation-icons {
    gap: 0.5rem;
    align-items: center;
}

/* (Alter Kopfzeilen-Stil entfernt – neue Kopfzeile siehe Abschnitt „DESIGN 2026“ am Ende.) */

/* =========================================
   LANDING PAGE (Seriös & Dark Mode Ready)
   ========================================= */

.landing-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px 60px;
    text-align: center;
    color: var(--primary-font-color);
}

/* --- HERO SECTION --- */
.hero-section {
    padding: 60px 20px;
    /* Light Mode: Dezenter Winter-Verlauf */
    background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 100%);
    border-radius: 12px;
    margin-bottom: 50px;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Dark Mode für Hero */
html.dark-mode .hero-section {
    background: var(--table-second-color); /* Dunkler Hintergrund */
    border-color: rgba(255,255,255,0.05);
}

.hero-section h1 {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary-background-color); /* Blau */
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: #555;
    max-width: 650px;
    margin: 0 auto 35px;
    line-height: 1.6;
}

html.dark-mode .hero-subtitle {
    color: #ccc;
}

/* --- BUTTONS --- */
.btn-hero-cta {
    display: inline-block;
    background-color: var(--highlight-background-color); /* Orange */
    color: #222;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    padding: 14px 40px;
    border-radius: 6px; 
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(255, 165, 0, 0.3);
}

.btn-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 165, 0, 0.4);
    color: #000;
}

.hero-login-hint {
    margin-top: 20px;
    font-size: 0.95rem;
    color: #777;
}

html.dark-mode .hero-login-hint {
    color: #aaa;
}

.hero-login-hint a {
    color: var(--primary-background-color);
    text-decoration: none;
    font-weight: 600;
}

/* --- COUNTDOWN --- */
.countdown-container {
    margin-top: 40px;
    display: inline-block;
    padding: 15px 30px;
    background: white;
    border-radius: 50px;
    border: 1px solid #eef0f2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

html.dark-mode .countdown-container {
    background: #333;
    border-color: #444;
}

.countdown-header {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
    margin-bottom: 2px;
    font-weight: 600;
}

.countdown-timer {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-background-color);
    font-variant-numeric: tabular-nums;
}


/* --- STEPS (Die Karten mit Icons) --- */
.section-title {
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: var(--primary-font-color);
}

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 40px;
    text-align: center;
}

@media (min-width: 768px) {
    .steps-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.step-card {
    padding: 20px;
}

.step-icon {
    width: 70px;
    height: 70px;
    background-color: #f0f7fa; /* Helles Blau */
    color: var(--primary-background-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

html.dark-mode .step-icon {
    background-color: #333; /* Dunkler Kreis im Darkmode */
    color: var(--highlight-background-color); /* Orange im Darkmode für Kontrast */
}

.step-card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--primary-font-color);
}

.step-card p {
    color: #666;
    line-height: 1.5;
}

html.dark-mode .step-card p {
    color: #bbb;
}

/* --- SCORING HIGHLIGHT (Die Info-Box) --- */
.scoring-highlight {
    background-color: #fdf8e4; /* Beige (Light Mode) */
    border: 1px solid #faecc0;
    padding: 20px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

/* Wichtig: Dark Mode für die Info-Box */
html.dark-mode .scoring-highlight {
    background-color: rgba(255, 165, 0, 0.1); /* Transparentes Orange */
    border-color: rgba(255, 165, 0, 0.3);
    color: #ddd;
}

.scoring-icon {
    color: #e69500; /* Dunkles Orange */
    flex-shrink: 0;
}

html.dark-mode .scoring-icon {
    color: var(--highlight-background-color); /* Helles Orange */
}

.scoring-text {
    color: #554422; /* Braun (Light Mode) */
    font-size: 1rem;
    line-height: 1.5;
}

html.dark-mode .scoring-text {
    color: #eee; /* Weiß (Dark Mode) */
}


/* --- BOTTOM CTA --- */
.bottom-cta {
    margin-top: 60px;
    padding: 50px 20px;
    background-color: #f8f9fa;
    border-radius: 12px;
}

html.dark-mode .bottom-cta {
    background-color: var(--table-second-color);
}

.bottom-cta h2 {
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: var(--primary-font-color);
}

.bottom-cta p {
    color: #666;
    margin-bottom: 25px;
}

html.dark-mode .bottom-cta p {
    color: #aaa;
}

.btn-hero-small {
    display: inline-block;
    background-color: var(--primary-background-color);
    color: white;
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
}

.btn-hero-small:hover {
    background-color: #016f9c;
    color: white;
}

/* --- ATHLETE DETAIL PAGE STYLES --- */

.athlete-profile-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Header Card */
.athlete-header-card {
    background-color: var(--default-background-color);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid var(--primary-background-color);
    gap: 20px;
}

.athlete-info-primary {
    display: flex;
    align-items: center;
    gap: 20px;
}

.athlete-big-flag {
    width: 80px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.athlete-name-main {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    color: var(--primary-font-color);
}

.athlete-nation-code {
    font-size: 1.2rem;
    color: var(--primary-background-color);
    font-weight: 600;
    letter-spacing: 2px;
}

/* Stats Grid */
.athlete-stats-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.stat-box {
    background-color: rgba(0,0,0,0.03); /* Leichtes Grau */
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
    min-width: 90px;
    display: flex;
    flex-direction: column;
}

.dark-mode .stat-box {
    background-color: rgba(255,255,255,0.05);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-font-color);
}

.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #888;
}

/* Highlights für Medaillen */
.highlight-gold .stat-value { color: #D4AF37; }
.highlight-silver .stat-value { color: #C0C0C0; }

/* Table Styling */
.athlete-results-wrapper {
    background-color: var(--default-background-color);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.result-table {
    width: 100%;
}

.race-link {
    color: var(--primary-font-color);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.race-link:hover {
    color: var(--highlight-background-color);
}

/* Rang Badges */
.rank-circle {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
}

/* Podium Farben für die ganze Zeile oder den Kreis */
tr.rank-1 .rank-circle { background-color: #D4AF37; color: #333; box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
tr.rank-2 .rank-circle { background-color: #C0C0C0; color: #333; }
tr.rank-3 .rank-circle { background-color: #CD7F32; color: white; }

/* Zeilen Hover */
.result-table tbody tr:hover {
    background-color: rgba(var(--primary-background-color-rgb), 0.1) !important;
}

/* Shooting */
.shooting-badges {
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: 2px;
}


/* --- MOBILE OPTIMIERUNGEN (Am Ende der CSS Datei) --- */

@media (max-width: 768px) {
    /* 1. Kompakterer Header */
    .athlete-profile-container {
        padding: 10px; /* Weniger Rand außen */
        gap: 20px;
    }

    .athlete-header-card {
        padding: 20px 15px; /* Weniger Rand innen */
        flex-direction: column;
        align-items: center; /* Zentriert */
        text-align: center;
        gap: 20px;
    }

    .athlete-info-primary {
        flex-direction: column; /* Flagge über Namen */
        gap: 10px;
    }

    .athlete-big-flag {
        width: 60px; /* Kleinere Flagge */
    }

    .athlete-name-main {
        font-size: 1.8rem; /* Kleinerer Name */
    }

    /* 2. Stats im 2x2 Grid */
    .athlete-stats-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */
        gap: 10px;
    }

    .stat-box {
        padding: 10px 5px; /* Kompakter */
        min-width: auto;
    }

    .stat-value { font-size: 1.3rem; }
    .stat-label { font-size: 0.75rem; }

    /* 3. Überschrift und Button untereinander */
    .results-header {
        flex-direction: column;
        align-items: stretch !important; /* Button auf volle Breite ziehen */
        gap: 15px;
        margin-bottom: 20px !important;
    }

    .results-header .section-title {
        text-align: center;
    }

    .results-header .btn {
        width: 100%; /* Button über volle Breite */
        padding: 12px; /* Größere Trefferfläche für Finger */
        font-size: 1rem;
    }

    /* 4. Tabellen-Optimierung für Mobile */
    .result-table th, .result-table td {
        padding: 8px 5px; /* Weniger Padding in Zellen */
        font-size: 0.9rem;
    }
    
    /* Rang-Kreis etwas kleiner */
    .rank-circle {
        width: 26px;
        height: 26px;
        line-height: 26px;
        font-size: 0.9rem;
    }

    /* Schießergebnisse kompakter */
    .shooting-badges {
        font-size: 0.9rem;
        letter-spacing: 1px;
        display: block; /* Erzwingt Umbruch bei langen Schießen */
    }
}


.quick-modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 10000;
        display: flex; justify-content: center; align-items: center;
        backdrop-filter: blur(2px);
    }
    .quick-modal-content {
        background: var(--default-background-color, #fff);
        width: 90%; max-width: 500px;
        border-radius: 12px; padding: 20px;
        position: relative;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        max-height: 90vh; overflow-y: auto;
    }
    .quick-modal-close {
        position: absolute; top: 10px; right: 15px;
        background: none; border: none; font-size: 2rem;
        cursor: pointer; color: #666; line-height: 1;
    }
    
    /* Info Button Style */
    .info-btn {
        background: none; border: none; cursor: pointer;
        color: var(--primary-background-color, #0181b5);
        font-size: 1.2rem; margin-left: 5px; padding: 5px;
    }


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

.chart-container {
        position: relative;
        width: 100%;
        /* Auf Desktop flach: */
        height: 40vh; 
    }

    /* Auf Mobile (kleiner als 768px) machen wir den Chart viel höher! */
    @media (max-width: 768px) {
        .chart-container {
            height: 60vh; /* Nutze mehr vertikalen Platz */
        }
    }



    .avatar-circle {
    width: 36px; /* Etwas größer für User Liste */
    height: 36px;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* Optional: Tabelle etwas luftiger machen */
.table-row td {
    padding: 12px 8px;
}

/* =========================================
   MODERNES LEADERBOARD DESIGN
   ========================================= */

/* 1. Die Tabelle selbst: Weg vom "Excel-Look" */
.leaderboard-table {
    width: 100%;
    border-collapse: separate; /* Wichtig für Abstände zwischen Zeilen */
    border-spacing: 0 8px; /* 8px Luft zwischen den Zeilen */
    margin-top: 10px;
}

/* Header unsichtbar machen oder stylen? Wir stylen ihn dezent */
.leaderboard-table thead th {
    border: none;
    color: var(--primary-font-color);
    opacity: 0.6;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 15px 10px 15px; /* Abstand nach unten */
    background: transparent !important; /* Kein Hintergrund für Header */
}

/* 2. Die Zeilen: Karten-Look */
.leaderboard-table .table-row {
    background-color: var(--default-background-color); /* Standard Hintergrund */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Leichter Schatten */
    transition: all 0.2s ease-in-out;
    border-radius: 12px; /* Runde Ecken für die ganze Zeile */
    
    /* Hack für Border-Radius an Tabellenzeilen */
    position: relative;
    z-index: 1;
}

/* Hover Effekt: Zeile hebt sich leicht an */
.leaderboard-table .table-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background-color: var(--default-background-color) !important; /* Farbe beibehalten */
    z-index: 2;
}

/* Zellen-Abstände */
.leaderboard-table td {
    padding: 15px;
    border: none; /* Keine Linien mehr */
    vertical-align: middle;
}

/* Runde Ecken für die erste und letzte Zelle jeder Zeile */
.leaderboard-table td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.leaderboard-table td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* 3. Highlight für den eigenen User */
.leaderboard-table .table-row.table-primary {
    border: 2px solid var(--primary-background-color); /* Dein Blau als Rand */
    background-color: rgba(var(--primary-background-color-rgb), 0.05) !important; /* Ganz leichtes Blau */
}

/* 4. Spalten-Styling */

/* Rang-Spalte */
.rank-cell {
    font-size: 1.2rem;
    font-weight: 800;
    color: #b0b0b0; /* Dezent Grau für Zahlen */
    width: 60px; /* Feste Breite */
}

/* Punkte-Spalte */
.points-cell {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-background-color);
    letter-spacing: -0.5px;
}

/* 5. Avatar Styling (Das Wichtigste!) */
.avatar-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    border: 2px solid white; /* Weißer Ring um den Avatar */
}

/* 6. Dark Mode Anpassungen */
html.dark-mode .leaderboard-table .table-row {
    background-color: var(--table-second-color); /* Dunkler Hintergrund für Cards */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

html.dark-mode .leaderboard-table .table-row:hover {
    background-color: #3a3a3a !important; /* Etwas heller beim Hover */
}

html.dark-mode .leaderboard-table .table-row.table-primary {
    background-color: rgba(1, 129, 181, 0.2) !important; /* Dunkleres Blau für Highlight */
    border-color: var(--primary-background-color);
}

html.dark-mode .avatar-circle {
    border-color: var(--table-second-color); /* Rand passt sich Hintergrund an */
}

/* 7. Suchfeld Verschönerung */
#user-search {
    padding: 12px 15px;
    border-radius: 0 8px 8px 0;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: var(--default-background-color);
    transition: all 0.3s;
}

#user-search:focus {
    box-shadow: none;
    border-color: var(--primary-background-color);
}

.input-group-text {
    border-radius: 8px 0 0 8px;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: var(--default-background-color);
}

/* Dark Mode für Suche */
html.dark-mode #user-search, 
html.dark-mode .input-group-text {
    background-color: var(--table-second-color);
    border-color: rgba(255,255,255,0.1);
    color: white;
}

.sticky-user-stats {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 1040; /* Unter dem Modal, aber über dem Content */
    padding: 0 15px;
    pointer-events: none; /* Damit Klicks daneben durchgehen */
    display: flex;
    justify-content: center;
}

.user-stats-card {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px); /* Milchglas-Effekt */
    border: 1px solid rgba(0,0,0,0.08);
    border-bottom: 4px solid var(--primary-background-color); /* Farb-Akzent unten */
    border-radius: 12px;
    padding: 10px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    width: 100%;
    max-width: 500px; /* Nicht zu breit auf Desktop */
    min-height: 60px;
    
    animation: slideUpFade 0.5s ease-out forwards;
}

.stat-rank {
    text-align: center;
    min-width: 40px;
}

.rank-number {
    font-size: 1.4rem;
    font-weight: 800;
    color: #333;
    line-height: 1;
}

/* Dark Mode Anpassung */
html.dark-mode .user-stats-card {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255,255,255,0.1);
    border-bottom-color: var(--primary-background-color);
}

html.dark-mode .rank-number,
html.dark-mode .fw-bold.text-dark {
    color: white !important;
}

@keyframes slideUpFade {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.trend-container {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    opacity: 0.8;
}

/* Der Punkt */
.trend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #eee; /* Fallback */
}

/* Farben basierend auf Punktzahl (Beispielwerte anpassen!) */
.trend-high { background-color: #2ecc71; } /* Gut (>X Punkte) */
.trend-mid { background-color: #f1c40f; }  /* Okay */
.trend-low { background-color: #e74c3c; }  /* Schlecht */


.trend-container {
    display: flex;
    align-items: center; /* Wichtig, damit der größere Punkt mittig bleibt */
    gap: 4px; /* Etwas mehr Abstand */
}

/* 1. Die "alten" Punkte (Vergangenheit) */
.trend-dot {
    width: 10px;       /* Basis-Größe */
    height: 10px;
    border-radius: 50%;
    
   
}

/* 2. Der "neueste" Punkt (Rechts / :last-child) */
.trend-dot:last-child {
    /* Design für "JETZT": */
    opacity: 1 !important;    /* Volle Deckkraft */
    transform: scale(1.35);   /* Deutlich größer (Pop-Effekt) */
    filter: grayscale(0);     /* Volle Farbe */
    
    /* Optional: Ein feiner Schatten oder Rand, damit er "schwebt" */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
    border: 1px solid rgba(255,255,255,0.8); /* Weißer Ring (sieht edel aus) */
    
    /* Etwas Abstand nach links, um ihn abzuheben */
    margin-left: 3px; 
    z-index: 2;
}

/* Hover-Effekt: Wenn man über die alten fährt, werden sie auch deutlich */
.trend-dot:hover {
    opacity: 1;
    transform: scale(1.2);
    filter: grayscale(0);
    cursor: help;
}
.season-end-card {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    color: white;
    padding: 1.5rem;
    border-radius: 1rem;
    max-width: 800px;
    margin: auto;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* TEXT */
.season-end-card .lead {
    font-size: 1.1rem;
    font-weight: 500;
}

.season-text {
    margin-top: 1.5rem;
}

.thank-you {
    font-weight: bold;
    margin-top: 1rem;
}

/* PODIUM (DESKTOP) */
.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

/* PODIUM ELEMENT */
.podium-place {
    background: rgba(255,255,255,0.12);
    padding: 0.8rem;
    border-radius: 0.8rem;
    min-width: 100px;
    flex: 1;
}

.place-1 {
    transform: scale(1.1);
    background: rgba(255, 215, 0, 0.25);
}

.place-2 {
    background: rgba(192,192,192,0.25);
}

.place-3 {
    background: rgba(205,127,50,0.25);
}

.podium-rank {
    font-size: 1.4rem;
}

.podium-name {
    font-weight: bold;
    margin-top: 0.4rem;
    word-break: break-word;
}

.podium-points {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* LIGA */
.league-winner {
    background: rgba(255,255,255,0.12);
    padding: 1rem;
    border-radius: 0.8rem;
    margin-top: 1rem;
}

.league-name {
    font-size: 1.1rem;
    font-weight: bold;
}

/* 📱 MOBILE FIX */
@media (max-width: 600px) {

    .season-end-card {
        padding: 1.2rem;
    }

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

    .podium-place {
        margin-bottom: 0.5rem;
    }

    .place-1 {
        transform: none;
        order: -1; /* Sieger nach oben */
    }

    .podium-rank {
        font-size: 1.2rem;
    }

    .podium-name {
        font-size: 0.95rem;
    }

    .podium-points {
        font-size: 0.8rem;
    }
}

/* =========================================
   PROFILSEITE (hell + dunkel über die Theme-Variablen)
   ========================================= */
.profile-page {
    color: var(--primary-font-color);
}

.profile-page .profile-table {
    color: var(--primary-font-color);
    --bs-table-bg: transparent;
    border-color: rgba(127, 127, 127, 0.3);
}

.profile-page .profile-table th,
.profile-page .profile-table td {
    color: var(--primary-font-color);
    background-color: transparent;
}

.profile-card {
    background-color: var(--table-second-color);
    color: var(--primary-font-color);
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 0.5rem;
}

.profile-card-body {
    padding: 1rem 1.25rem;
}

.profile-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.profile-muted {
    color: var(--primary-font-color);
    opacity: 0.75;
}

.profile-page .form-check-label {
    color: var(--primary-font-color);
}

html.dark-mode .profile-page .form-check-input:not(:checked) {
    background-color: #3a3a3a;
    border-color: #777;
}

html.dark-mode .profile-page .btn-outline-primary {
    color: #6cc4ec;
    border-color: #6cc4ec;
}

html.dark-mode .profile-page .btn-outline-secondary {
    color: #ddd;
    border-color: #999;
}

/* =========================================
   GAST-HINWEIS & RENNKALENDER
   ========================================= */
.guest-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0.9rem 1.1rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--highlight-background-color);
    background-color: var(--table-second-color);
    color: var(--primary-font-color);
}

.guest-cta-actions {
    display: flex;
    gap: 0.5rem;
}

.kalender-page {
    color: var(--primary-font-color);
    max-width: 900px;
}

.kalender-intro {
    opacity: 0.85;
}

.kalender-ort {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    background-color: var(--table-second-color);
}

.kalender-ort.kalender-aktuell {
    border: 2px solid var(--highlight-background-color);
}

.kalender-ort h2 {
    font-size: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.kalender-datum {
    font-size: 0.95rem;
    font-weight: normal;
    opacity: 0.75;
}

.kalender-rennen {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.kalender-rennen li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.45rem 0;
    border-top: 1px solid rgba(127, 127, 127, 0.25);
}

.kalender-rennen li.vorbei {
    opacity: 0.7;
}

.kalender-zeit {
    min-width: 9.5rem;
    font-variant-numeric: tabular-nums;
}

.kalender-name {
    flex: 1;
    font-weight: 500;
}

html.dark-mode .kalender-page .btn-outline-primary {
    color: #6cc4ec;
    border-color: #6cc4ec;
}

/* =========================================
   ERGEBNIS-ÜBERSICHT
   ========================================= */
.saison-tabs {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.25rem 0 0.75rem;
    margin-bottom: 0.5rem;
    scrollbar-width: thin;
}

.saison-tab {
    flex: 0 0 auto;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(127, 127, 127, 0.4);
    color: var(--primary-font-color);
    text-decoration: none;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.saison-tab:hover {
    border-color: var(--primary-background-color);
    color: var(--primary-font-color);
}

.saison-tab.aktiv {
    background-color: var(--primary-background-color);
    border-color: var(--primary-background-color);
    color: #fff;
}

.ergebnis-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0.25rem;
}

.filter-chip {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(127, 127, 127, 0.4);
    background: transparent;
    color: var(--primary-font-color);
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-chip.aktiv {
    background-color: var(--highlight-background-color);
    border-color: var(--highlight-background-color);
    color: #000;
}

.ergebnis-link {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    width: 100%;
    color: inherit;
    text-decoration: none;
    padding: 0.15rem 0.25rem;
    border-radius: 0.35rem;
}

.ergebnis-link:hover {
    color: inherit;
    background-color: rgba(var(--primary-background-color-rgb), 0.15);
}

.ergebnis-link .kalender-zeit {
    min-width: 6.5rem;
}

.ergebnis-pfeil {
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.6;
}

/* =========================================
   ERGEBNIS-DETAILSEITE
   ========================================= */
.ergebnis-breadcrumb a {
    color: var(--primary-font-color);
    opacity: 0.75;
    text-decoration: none;
    font-size: 0.95rem;
}

.ergebnis-kopf {
    margin: 0.5rem 0 1rem;
}

.ergebnis-kopf h1 {
    margin: 0.2rem 0;
}

.ergebnis-ort-zeile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    opacity: 0.85;
}

.podium-zeile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.podium-karte {
    background-color: var(--table-second-color);
    border-radius: 0.5rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
    border-top: 4px solid #c0c0c0;
    min-width: 0;
}

.podium-karte.platz-1 { border-top-color: #e6b800; }
.podium-karte.platz-3 { border-top-color: #cd7f32; }

.podium-medaille {
    font-size: 1.6rem;
    line-height: 1.2;
}

.podium-name {
    display: block;
    font-weight: 600;
    color: var(--primary-font-color);
    text-decoration: none;
    overflow-wrap: anywhere;
    margin-top: 0.25rem;
}

.podium-info {
    font-size: 0.85rem;
    opacity: 0.75;
}

.tipp-statistik h2,
.ergebnis-tabelle-box h2 {
    font-size: 1.2rem;
}

.tipp-statistik h3 {
    font-size: 1rem;
    margin-top: 0.75rem;
}

.mein-tipp {
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
}

.mein-tipp-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}

.mein-tipp-liste,
.tipp-top {
    margin: 0;
    padding-left: 1.4rem;
}

.mein-tipp-liste li,
.tipp-top li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    padding: 0.2rem 0;
}

.tipp-top li a {
    color: var(--primary-font-color);
}

.mein-tipp-liste .tipp-name { flex: 1; }
.mein-tipp-liste .tipp-echt { opacity: 0.7; font-size: 0.9rem; }
.mein-tipp-liste .tipp-punkte { font-weight: 600; min-width: 2.2rem; text-align: right; }
.mein-tipp-liste li.treffer .tipp-punkte { color: #2e9e44; }

.tipp-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 1.5rem;
}

.ergebnis-tabelle {
    width: 100%;
    border-collapse: collapse;
    color: var(--primary-font-color);
    font-variant-numeric: tabular-nums;
}

.ergebnis-tabelle th {
    font-size: 0.8rem;
    text-transform: uppercase;
    opacity: 0.7;
    font-weight: 600;
    padding: 0.4rem 0.35rem;
    border-bottom: 1px solid rgba(127, 127, 127, 0.4);
}

.ergebnis-tabelle td {
    padding: 0.45rem 0.35rem;
    border-bottom: 1px solid rgba(127, 127, 127, 0.2);
    vertical-align: top;
}

.ergebnis-tabelle tr.top3 .ergebnis-rang {
    font-weight: 700;
}

.ergebnis-tabelle a {
    color: var(--primary-font-color);
    text-decoration: none;
}

.ergebnis-tabelle a:hover {
    text-decoration: underline;
}

.ergebnis-name {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
}

.ergebnis-schiessen {
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.ergebnis-zeit {
    white-space: nowrap;
    text-align: right;
}

.laeufer-toggle {
    white-space: nowrap;
    border: none;
    background: transparent;
    color: var(--primary-background-color);
    font-size: 0.85rem;
    padding: 0 0.25rem;
    cursor: pointer;
}

.laeufer-liste {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0 0 0 1.6rem;
    font-size: 0.9rem;
}

.laeufer-liste li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 0.75rem;
    padding: 0.1rem 0;
}

.laeufer-liste li span {
    opacity: 0.75;
}

.ergebnis-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 1rem 0;
}

html.dark-mode .ergebnis-detail .btn-outline-primary,
html.dark-mode .ergebnisse-page .btn-outline-primary {
    color: #6cc4ec;
    border-color: #6cc4ec;
}

@media (max-width: 480px) {
    .podium-name { font-size: 0.9rem; }
    .podium-info { font-size: 0.75rem; }
}


/* #########################################################################
   DESIGN 2026 – „Fichte & Scheibe“
   Grundlagen, Kopfzeile, Handy-Leiste, Karten, Knöpfe.
   Alles hier unten überschreibt ältere Regeln weiter oben.
   ######################################################################### */

/* ---------- Grundlagen ---------- */
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
@media (min-width: 768px) { html { font-size: 18px; } }

body {
    font-family: var(--font-body);
    background-color: var(--c-bg);
    color: var(--c-ink);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body > main { flex: 1 0 auto; }

h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: .005em;
    color: inherit;
}
h1 { font-size: 2.35rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.25rem; }
@media (max-width: 575px) { h1 { font-size: 2rem; } }

a { color: var(--c-link); text-underline-offset: .18em; }
a:hover { color: var(--c-pine-700); }
html.dark-mode a:hover { color: #8ad9b5; }

:focus-visible {
    outline: 3px solid var(--c-signal);
    outline-offset: 2px;
    border-radius: 6px;
}

.sprung-link {
    position: absolute; left: -9999px; top: 0; z-index: 20000;
    background: var(--c-signal); color: var(--c-ink); padding: .75rem 1rem; font-weight: 700;
}
.sprung-link:focus { left: 1rem; top: 1rem; }

.text-muted-2, .leise { color: var(--c-muted); }
.zahl { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.ic { flex: 0 0 auto; vertical-align: middle; }

html.dark-mode .nur-dunkel, html.light-mode .nur-hell { display: inline-flex; }
html.dark-mode .nur-hell, html.light-mode .nur-dunkel { display: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Seitenrahmen ---------- */
.wrapper { min-height: 0; width: 100%; }
.seite { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.seite-schmal { max-width: 760px; }
.seiten-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin: .5rem 0 1.25rem; }
.seiten-kopf h1 { margin: 0; overflow-wrap: anywhere; }
.seiten-kopf p { margin: .35rem 0 0; color: var(--c-muted); max-width: 60ch; }

.zurueck-link, .ergebnis-breadcrumb-link {
    display: inline-flex; align-items: center; gap: .25rem;
    min-height: 40px; color: var(--c-muted); text-decoration: none; font-weight: 700; font-size: .95rem;
}
.zurueck-link:hover, .ergebnis-breadcrumb-link:hover { color: var(--c-ink); }

/* ---------- Knöpfe ---------- */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: var(--tap); padding: .55rem 1.3rem;
    border: 2px solid transparent; border-radius: 12px;
    font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.knopf-primaer { background: var(--c-pine-600); color: #fff; }
.knopf-primaer:hover { background: var(--c-pine-700); color: #fff; }
html.dark-mode .knopf-primaer { color: #06231a; }
.knopf-signal { background: var(--c-signal); color: #14201c; }
.knopf-signal:hover { background: var(--c-signal-hover); color: #14201c; }
.knopf-rahmen { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.knopf-rahmen:hover { border-color: var(--c-pine-600); color: var(--c-ink); }
.knopf-hell { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.knopf-hell:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.knopf-gefahr { background: transparent; color: var(--c-miss); border-color: rgba(194, 54, 43, .5); }
.knopf-gefahr:hover { background: var(--c-miss); color: #fff; }
.knopf-klein { min-height: 42px; padding: .4rem 1rem; font-size: .95rem; border-radius: 10px; }
.knopf-gross { min-height: 56px; padding: .7rem 1.7rem; font-size: 1.12rem; border-radius: 14px; }
.knopf-breit { width: 100%; }

/* Bootstrap-Knöpfe an das neue Design angleichen */
.btn { font-weight: 700; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-width: 2px; }
.btn-sm { min-height: 40px; font-size: .95rem; padding: .3rem .9rem; }
.btn-link { min-height: 0; }
.btn-primary { background: var(--c-pine-600); border-color: var(--c-pine-600); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--c-pine-700); border-color: var(--c-pine-700); color: #fff; }
html.dark-mode .btn-primary { color: #06231a; }
.btn-outline-primary { color: var(--c-pine-600); border-color: var(--c-pine-600); }
.btn-outline-primary:hover { background: var(--c-pine-600); border-color: var(--c-pine-600); color: #fff; }
.btn-warning { background: var(--c-signal); border-color: var(--c-signal); color: #14201c; }
.btn-warning:hover, .btn-warning:focus { background: var(--c-signal-hover); border-color: var(--c-signal-hover); color: #14201c; }
.btn-outline-secondary { color: var(--c-ink); border-color: var(--c-line); }
.btn-outline-secondary:hover { background: transparent; color: var(--c-ink); border-color: var(--c-pine-600); }
.btn-success { background: var(--c-pine-600); border-color: var(--c-pine-600); }
.btn-outline-success { color: var(--c-pine-600); border-color: var(--c-pine-600); }
.btn-outline-success:hover { background: var(--c-pine-600); border-color: var(--c-pine-600); color: #fff; }
.btn-danger { background: var(--c-miss); border-color: var(--c-miss); }
.btn-outline-danger { color: var(--c-miss); border-color: rgba(194, 54, 43, .55); }
.btn-outline-danger:hover { background: var(--c-miss); border-color: var(--c-miss); color: #fff; }
.btn-secondary { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn-secondary:hover { background: transparent; color: var(--c-ink); border-color: var(--c-pine-600); }
html.dark-mode .btn-outline-primary { color: var(--c-pine-600); border-color: var(--c-pine-600); }
html.dark-mode .btn-outline-primary:hover { color: #06231a; }

/* ---------- Formulare ---------- */
.form-control, .form-select {
    min-height: var(--tap); font-size: 1rem; border-radius: 10px;
    border: 2px solid var(--c-line); background-color: var(--c-card); color: var(--c-ink);
}
.form-control::placeholder { color: var(--c-muted); opacity: .85; }
.form-control:focus, .form-select:focus {
    border-color: var(--c-pine-600); box-shadow: 0 0 0 4px rgba(26, 110, 84, .18);
    background-color: var(--c-card); color: var(--c-ink);
}
.form-select-sm { min-height: 44px; font-size: .95rem; }
.form-label, label { font-weight: 700; }
html.dark-mode .form-control, html.dark-mode .form-select { background-color: var(--c-card-alt); }
html.dark-mode .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e9f0ec' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---------- Meldungen ---------- */
.meldungen { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.meldungen:empty { display: none; }
.meldungen .alert { margin: 1rem 0 0; }
.alert {
    border-radius: 12px; border: 0; border-left: 5px solid; font-size: 1rem; padding: .9rem 3rem .9rem 1.1rem;
}
.alert-success { background: var(--c-pine-100); color: var(--c-ink); border-left-color: var(--c-pine-600); }
.alert-info { background: #e6f1f6; color: #14303d; border-left-color: #2a7fa3; }
.alert-warning { background: #fff4d6; color: #3d2c00; border-left-color: var(--c-signal-hover); }
.alert-danger { background: #fbe7e5; color: #4a1410; border-left-color: var(--c-miss); }
html.dark-mode .alert-info { background: #13303c; color: #dbeef6; }
html.dark-mode .alert-warning { background: #3a2e0c; color: #fff1cc; }
html.dark-mode .alert-danger { background: #3d1714; color: #fde3e0; }
.alert .btn-close { padding: 1.1rem; }
.alert a, .alert-link { color: inherit; font-weight: 700; }

/* ---------- Modale Fenster ---------- */
.modal-content { background: var(--c-card); color: var(--c-ink); border: 0; border-radius: 18px; }
.modal-header, .modal-footer { border-color: var(--c-line); }
.modal-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.modal-backdrop.show { opacity: .55; }

/* ---------- Karten ---------- */
.karte, .kalender-ort {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.4rem;
    margin: 0 0 1.25rem;
}
html.dark-mode .karte, html.dark-mode .kalender-ort { border-color: var(--c-line); }
.karte > h2, .kalender-ort > h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.karte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .5rem; }
.karte-kopf h2 { margin: 0; font-size: 1.5rem; }
.karte-link {
    display: inline-flex; align-items: center; gap: .2rem; min-height: 44px;
    font-weight: 700; text-decoration: none; color: var(--c-link);
}
.karte-link:hover { text-decoration: underline; }

/* Listen in Karten */
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen > li { border-top: 1px solid var(--c-line); }
.zeilen > li:first-child { border-top: 0; }
.zeile {
    display: flex; align-items: center; gap: .75rem 1rem;
    min-height: 64px; padding: .7rem .25rem;
    color: inherit; text-decoration: none;
}
a.zeile:hover { background: var(--c-card-alt); color: inherit; border-radius: 10px; }
.zeile-haupt { flex: 1 1 auto; min-width: 0; }
.zeile-titel { display: block; font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.zeile-unter { display: block; color: var(--c-muted); font-size: .95rem; }
.zeile-pfeil { color: var(--c-muted); }

/* Ältere Listen (Kalender, Ergebnisse) */
.kalender-page { max-width: 900px; padding-top: .5rem; }
.kalender-intro { color: var(--c-muted); opacity: 1; font-size: 1.02rem; }
.kalender-ort h2 { font-size: 1.5rem; }
.kalender-datum { color: var(--c-muted); opacity: 1; font-family: var(--font-body); }
.kalender-rennen li { padding: .75rem 0; border-top: 1px solid var(--c-line); min-height: 60px; }
.kalender-rennen li:first-child { border-top: 0; }
.kalender-zeit { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.kalender-name { font-weight: 700; }
.kalender-ort.kalender-aktuell { border: 2px solid var(--c-signal); }
.ergebnis-link { min-height: 52px; }
.ergebnis-link:hover { background: var(--c-card-alt); }
.ergebnis-pfeil { color: var(--c-muted); opacity: 1; }
.saison-tab { min-height: 44px; display: inline-flex; align-items: center; border: 2px solid var(--c-line); }
.saison-tab.aktiv { background: var(--c-pine-600); border-color: var(--c-pine-600); color: #fff; }
html.dark-mode .saison-tab.aktiv { color: #06231a; }
.filter-chip { min-height: 42px; border: 2px solid var(--c-line); font-size: .95rem; font-weight: 700; }
.filter-chip.aktiv { background: var(--c-signal); border-color: var(--c-signal); color: #14201c; }
.guest-cta { background: var(--c-card); border: 1px solid var(--c-line); border-left: 5px solid var(--c-signal); border-radius: var(--radius-m); }

/* ---------- Punkte je Platz ----------
   Abgestufte Punkte (0–5) für jeden der fünf getippten Plätze, z. B. [3][5][4][0][0].
   Je mehr Punkte, desto kräftiger das Grün. */
.punkte-je-platz { display: inline-flex; gap: 4px; vertical-align: middle; flex: 0 0 auto; }
.pjp-feld {
    width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
    background: var(--c-card-alt); color: var(--c-muted); border: 1px solid var(--c-line);
}
.pjp-1 { background: #e3f1ea; color: #1d4d3c; border-color: transparent; }
.pjp-2 { background: #c6e4d5; color: #163f31; border-color: transparent; }
.pjp-3 { background: #8fcbad; color: #0d3326; border-color: transparent; }
.pjp-4 { background: #3f9d74; color: #fff; border-color: transparent; }
.pjp-5 { background: var(--c-pine-700); color: #fff; border-color: transparent; box-shadow: inset 0 -3px 0 var(--c-signal); }
html.dark-mode .pjp-1 { background: #1d3a30; color: #cfe9dc; }
html.dark-mode .pjp-2 { background: #24503f; color: #e2f3ea; }
html.dark-mode .pjp-3 { background: #2f6e54; color: #fff; }
html.dark-mode .pjp-4 { background: #3f9a72; color: #fff; }
html.dark-mode .pjp-5 { background: #5cc497; color: #06231a; }

/* Punkteleiste (Spielregeln): 5 Felder, gefüllt = Punkte */
.punkteleiste { display: inline-flex; gap: 4px; vertical-align: middle; }
.pl-feld { width: 18px; height: 12px; border-radius: 3px; background: var(--c-card-alt); border: 1px solid var(--c-line); }
.pl-feld.voll { background: var(--c-pine-600); border-color: var(--c-pine-600); }

/* Platz-Chips (Tipp-Leiste am Handy): 1–5, gelb sobald belegt */
.platz-chips { display: inline-flex; gap: 4px; }
.platz-chips span {
    width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    border: 2px solid rgba(255, 255, 255, .45); color: rgba(255, 255, 255, .8);
}
.platz-chips span.belegt { background: var(--c-signal); border-color: var(--c-signal); color: #14201c; }

/* ---------- Avatare ---------- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 50%;
    font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff;
    background: var(--c-pine-600);
}
.avatar-s { width: 32px; height: 32px; font-size: 1.05rem; }
.avatar-l { width: 56px; height: 56px; font-size: 1.6rem; }
.av-0 { background: #1a6e54; } .av-1 { background: #2b6c8f; } .av-2 { background: #7a3f6e; }
.av-3 { background: #a24a2a; } .av-4 { background: #4a5a8c; } .av-5 { background: #8a6a12; }

/* ---------- Kopfzeile ---------- */
.kopf {
    position: sticky; top: 0; z-index: 10000;
    background: var(--c-pine-900); color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .12);
}
.kopf-innen {
    max-width: 1240px; margin: 0 auto; height: 68px; padding: 0 1rem;
    display: flex; align-items: center; gap: 1rem;
}
.kopf-marke { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; flex: 0 0 auto; }
.kopf-marke:hover { color: #fff; }
.kopf-logo { width: 34px; height: 34px; filter: invert(1); }
.kopf-wortmarke { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; letter-spacing: .01em; white-space: nowrap; }
.kopf-nav { display: flex; align-items: center; gap: .15rem; margin-left: 1rem; flex: 1 1 auto; }
.kopf-nav a {
    color: rgba(255, 255, 255, .86); text-decoration: none; font-weight: 700; font-size: 1rem;
    padding: .55rem .8rem; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center;
}
.kopf-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.kopf-nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 -3px 0 var(--c-signal); }
.kopf-rechts { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.kopf-symbol {
    width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.kopf-symbol:hover { background: rgba(255, 255, 255, .12); }
.kopf-abmelden { margin: 0; }
.kopf-profil {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
    padding: .25rem .9rem .25rem .3rem; border-radius: 999px;
    background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; font-weight: 700;
}
.kopf-profil:hover, .kopf-profil[aria-current="page"] { background: rgba(255, 255, 255, .18); color: #fff; }
.kopf-profil .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.kopf-profil-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 991px) {
    .kopf-innen { height: 60px; }
    .kopf-nav, .kopf-abmelden, .theme-schalter { display: none; }
    .kopf-wortmarke { font-size: 1.4rem; }
    .kopf-profil-name { display: none; }
    .kopf-profil { padding: .25rem; background: transparent; }
}
@media (max-width: 520px) {
    .kopf-registrieren { display: none; }
    .kopf-wortmarke { font-size: 1.3rem; }
}

/* ---------- Leiste unten (Handy/Tablet) ---------- */
.tabbar { display: none; }
@media (max-width: 991px) {
    body { --tabbar-h: 68px; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    .tabbar {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--c-card); border-top: 1px solid var(--c-line);
        box-shadow: 0 -6px 20px rgba(11, 59, 46, .08);
    }
    .tabbar a, .tabbar button {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        border: 0; background: transparent; color: var(--c-muted); text-decoration: none;
        font-size: .82rem; font-weight: 700; line-height: 1.1; padding: 0 2px;
    }
    .tabbar [aria-current="page"], .tabbar [aria-expanded="true"] { color: var(--c-pine-600); }
    .tabbar [aria-current="page"]::before {
        content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 4px;
        border-radius: 0 0 4px 4px; background: var(--c-signal);
    }
}

/* ---------- „Mehr“-Blatt ---------- */
.mehr-hintergrund { position: fixed; inset: 0; background: rgba(5, 20, 15, .5); z-index: 10002; }
.mehr-blatt {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10003;
    max-height: 88vh; overflow-y: auto;
    background: var(--c-card); color: var(--c-ink);
    border-radius: 22px 22px 0 0; padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
}
.mehr-blatt[hidden], .mehr-hintergrund[hidden] { display: none; }
@media (min-width: 992px) { .mehr-blatt { left: auto; right: 1rem; bottom: auto; top: 76px; width: 380px; border-radius: 18px; } }
.mehr-kopf { display: flex; align-items: center; justify-content: space-between; padding: .25rem 0 .5rem; }
.mehr-kopf strong { font-family: var(--font-display); font-size: 1.6rem; }
.mehr-kopf .kopf-symbol { color: var(--c-ink); }
.mehr-kopf .kopf-symbol:hover { background: var(--c-card-alt); }
.mehr-gast { display: grid; gap: .6rem; margin: .25rem 0 1rem; }
.mehr-liste { list-style: none; margin: 0; padding: 0; }
.mehr-liste li { border-top: 1px solid var(--c-line); }
.mehr-liste li:first-child { border-top: 0; }
.mehr-liste a, .mehr-liste button {
    display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 58px; padding: .5rem .25rem;
    border: 0; background: transparent; color: var(--c-ink); text-decoration: none;
    font-size: 1.08rem; font-weight: 700; text-align: left;
}
.mehr-liste .ic { color: var(--c-pine-600); }
.mehr-abmelden { margin-top: 1rem; }
body.mehr-offen { overflow: hidden; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--c-pine-900); color: rgba(255, 255, 255, .86); margin-top: 3rem; position: relative; z-index: 1; }
.fuss-innen {
    max-width: 1100px; margin: 0 auto; padding: 2.5rem 1rem 1rem;
    display: grid; gap: 1.5rem 2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.fuss-marke strong { font-family: var(--font-display); font-size: 1.6rem; color: #fff; }
.fuss-marke p { margin: .35rem 0 0; max-width: 32ch; }
.fuss-spalte { display: flex; flex-direction: column; align-items: flex-start; }
.fuss-spalte strong { color: #fff; margin-bottom: .35rem; }
.fuss-spalte a, .fuss-link-knopf {
    color: rgba(255, 255, 255, .86); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center;
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.fuss-spalte a:hover, .fuss-link-knopf:hover { color: #fff; text-decoration: underline; }
.fuss-sprachen {
    max-width: 1100px; margin: 0 auto; padding: .25rem 1rem 1rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; color: rgba(255, 255, 255, .7);
}
.fuss-sprachen a {
    color: rgba(255, 255, 255, .86); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
    padding: 0 .85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
}
.fuss-sprachen a:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
.fuss-sprachen a[aria-current] { background: #fff; color: var(--c-pine-900); border-color: #fff; font-weight: 700; }
.fuss-copy { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 1.5rem; font-size: .9rem; color: rgba(255, 255, 255, .7); border-top: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 767px) {
    .fuss-innen { grid-template-columns: 1fr 1fr; }
    .fuss-marke { grid-column: 1 / -1; }
}

/* =========================================================================
   STARTSEITE (DASHBOARD) – Design 2026
   ========================================================================= */
.dashboard { padding-top: 1rem; }
.dash-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dashboard-gruss { margin: 0; font-size: 2.2rem; }

.hinweis-band {
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem;
    background: var(--c-card); border: 1px solid var(--c-line); border-left: 5px solid var(--c-signal);
    border-radius: var(--radius-m); padding: .9rem 1rem .9rem 1.1rem; margin: 0 0 1.25rem; position: relative;
}
.hinweis-band-symbol { color: var(--c-pine-600); }
.hinweis-band-text { flex: 1 1 18rem; }
.hinweis-band-text strong { display: block; }
.hinweis-band .kopf-symbol { color: var(--c-muted); }
.hinweis-band .kopf-symbol:hover { background: var(--c-card-alt); }

/* Hero: nächstes Rennen */
.dash-hero {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem 2rem; align-items: center;
    background: var(--c-pine-900); color: #fff;
    border-radius: var(--radius-l); padding: 1.75rem 2rem; margin-bottom: 2rem;
    position: relative; overflow: hidden;
}
/* Spur: zwei feine Loipen-Linien als einziger Schmuck */
.dash-hero::after {
    content: ""; position: absolute; right: -40px; bottom: -60px; width: 340px; height: 200px;
    border-top: 2px solid rgba(255, 255, 255, .08); border-radius: 50%;
    box-shadow: 0 -14px 0 -12px rgba(255, 255, 255, .06);
    pointer-events: none;
}
html.dark-mode .dash-hero { background: #0f3a2d; }
.dash-hero-ort { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: rgba(255, 255, 255, .85); }
.dash-hero-titel { font-size: 2.6rem; margin: .35rem 0 .2rem; color: #fff; }
.dash-hero-zeit { color: rgba(255, 255, 255, .85); font-size: 1.05rem; }
.dash-countdown { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; margin-top: 1rem; min-height: 3rem; }
.cd-label { color: rgba(255, 255, 255, .75); font-weight: 700; margin-right: .1rem; }
.cd-teil { display: inline-flex; align-items: baseline; gap: .3rem; }
.cd-teil b { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-signal); }
.cd-teil small { font-size: 1rem; color: rgba(255, 255, 255, .85); font-weight: 700; }
.dash-hero-tipp {
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-m); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.dash-tipp-status { display: flex; flex-direction: column; gap: .6rem; font-weight: 700; font-size: 1.05rem; }
.dash-tipp-ok { display: inline-flex; align-items: center; gap: .35rem; color: #b8f0d4; }
.dash-hero-tipp > * { align-self: stretch; }
.dash-tipp-namen { list-style: none; margin: 0; padding: 0; color: #fff; }
.dash-tipp-namen li { display: flex; align-items: center; gap: .55rem; min-height: 38px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-weight: 700; }
.dash-tipp-namen li:last-child { border-bottom: 0; }
.dash-tipp-nr {
    flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-signal); color: #14201c; font-family: var(--font-display); font-size: 1rem;
}
.dash-tipp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-tipp-name.leer { color: rgba(255, 255, 255, .6); font-weight: 400; }
.dash-hero-hinweis { margin: 0; color: rgba(255, 255, 255, .88); }
.dash-cta { width: 100%; }
@media (max-width: 767px) {
    .dash-hero { grid-template-columns: 1fr; padding: 1.4rem 1.25rem; }
    .dash-hero-titel { font-size: 2.1rem; }
    .cd-teil b { font-size: 2.2rem; }
    .dash-hero-tipp { padding: 1rem; }
}

/* Liga-Kacheln */
.dash-ligen { margin-bottom: 2rem; }
.dash-ligen .karte-kopf h2 { font-size: 1.8rem; }
.liga-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.liga-kachel {
    display: flex; flex-direction: column; gap: .35rem; min-height: 170px;
    background: var(--c-card); border: 1px solid var(--c-line); border-top: 5px solid var(--c-pine-600);
    border-radius: var(--radius-m); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-card);
    color: var(--c-ink); text-decoration: none;
}
.liga-kachel:hover { color: var(--c-ink); border-color: var(--c-pine-600); }
.liga-kachel-name { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; overflow-wrap: anywhere; }
.liga-kachel-platz { font-weight: 700; color: var(--c-muted); }
.liga-kachel-platz .zahl { font-size: 2.3rem; color: var(--c-ink); line-height: 1; margin-right: .15rem; }
.liga-kachel-info { color: var(--c-muted); font-size: .95rem; }
.liga-kachel-getippt { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .95rem; color: var(--c-pine-600); }
.liga-kachel-neu { border: 2px dashed var(--c-line); border-top: 2px dashed var(--c-line); box-shadow: none; background: transparent; justify-content: center; color: var(--c-pine-600); }
.liga-kachel-neu .liga-kachel-name { color: var(--c-ink); font-size: 1.3rem; }
.liga-kachel-neu:hover { border-color: var(--c-pine-600); }

/* Statistik */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.dash-stat {
    display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.1rem;
    background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-m);
    color: var(--c-ink); text-decoration: none; box-shadow: var(--shadow-card);
}
a.dash-stat:hover { border-color: var(--c-pine-600); color: var(--c-ink); }
.dash-stat-wert { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dash-stat-label { color: var(--c-muted); font-weight: 700; font-size: .95rem; }
@media (max-width: 767px) { .dash-stats { grid-template-columns: 1fr 1fr; gap: .75rem; } }

.dash-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 860px) { .dash-raster { grid-template-columns: 1fr; } }
.dash-karte { display: flex; flex-direction: column; }
.dash-karte > .karte-link { margin-top: auto; align-self: flex-start; }
.dash-leer { color: var(--c-muted); margin: .25rem 0 .75rem; }
.dash-punkte { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-punkte.perfekt { color: #9a6b00; }
html.dark-mode .dash-punkte.perfekt { color: var(--c-signal); }
@media (max-width: 520px) {
    .dash-letzte .zeile { flex-wrap: wrap; }
    .dash-letzte .zeile-haupt { flex: 1 1 100%; }
    .dash-pjp { margin-right: auto; }
}

.donation-tile .karte-kopf .btn-close { padding: .9rem; }

.donation-tile p { text-align: left !important; }

/* =========================================================================
   LIGEN – Design 2026
   ========================================================================= */
.liga-kopf {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin: .25rem 0 1.5rem;
}
.liga-kopf h1 { margin: 0 0 .35rem; font-size: 2.6rem; overflow-wrap: anywhere; }
.liga-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; color: var(--c-muted); font-weight: 700; }
.liga-gesichter { display: inline-flex; }
.liga-gesichter .avatar { box-shadow: 0 0 0 3px var(--c-bg); margin-left: -8px; }
.liga-gesichter .avatar:first-child { margin-left: 0; }
.liga-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.liga-einladung {
    background: var(--c-card); border: 2px solid var(--c-signal); border-radius: var(--radius-m);
    padding: 1.25rem 1.4rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-card);
}
.liga-einladung h2 { font-size: 1.5rem; margin: 0 0 .35rem; }
.liga-einladung p { margin: 0 0 .9rem; }
.liga-einladung-zeile { display: flex; gap: .6rem; flex-wrap: wrap; }
.liga-einladung-zeile .form-control { flex: 1 1 16rem; font-size: .95rem; }
.liga-einladung-wege { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .75rem; }

.liga-naechstes-kopf, .liga-tabelle-kopf {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem 1.5rem; margin-bottom: .75rem;
}
.liga-naechstes h2, .liga-tabelle-box h2, .liga-chart-box h2 { font-size: 1.5rem; margin: 0 0 .2rem; }
.liga-getippt { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; min-width: 9rem; }
.liga-getippt-zahl { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; white-space: nowrap; }
.fortschritt { display: block; width: 100%; height: 10px; border-radius: 999px; background: var(--c-card-alt); border: 1px solid var(--c-line); overflow: hidden; }
.fortschritt span { display: block; height: 100%; background: var(--c-pine-600); border-radius: 999px; }
.liga-getippt-liste {
    list-style: none; padding: 0; margin: .5rem 0 .25rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem;
}
.liga-getippt-liste li {
    display: flex; align-items: center; gap: .55rem; min-height: 52px; padding: .35rem .7rem .35rem .4rem;
    border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-card);
}
.liga-getippt-liste li.ja { background: var(--c-pine-100); border-color: transparent; }
.liga-getippt-liste li.nein .avatar { filter: grayscale(.85); opacity: .65; }
.liga-getippt-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liga-getippt-status { color: var(--c-pine-600); font-size: .9rem; font-weight: 700; }
.liga-getippt-liste li.nein .liga-getippt-status { color: var(--c-muted); }
.liga-selbst-tippen {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; background: #fff4d6; color: #3d2c00; font-weight: 700;
}
html.dark-mode .liga-selbst-tippen { background: #3a2e0c; color: #fff1cc; }
.liga-hinweis { color: var(--c-muted); font-size: .95rem; margin: .75rem 0 0; opacity: 1; }

.liga-filter { display: flex; gap: .5rem; flex-wrap: wrap; }
.liga-filter .form-select { width: auto; min-width: 11rem; max-width: 16rem; }

.liga-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: .25rem; }
.liga-tabelle th {
    font-size: .9rem; color: var(--c-muted); font-weight: 700; padding: .5rem .5rem; border-bottom: 2px solid var(--c-line);
}
.liga-tabelle td { padding: .55rem .5rem; border-bottom: 1px solid var(--c-line); vertical-align: middle; font-size: 1.05rem; }
.liga-tabelle tbody tr:last-child td { border-bottom: 0; }
.liga-tabelle tr.ich td { background: var(--c-pine-100); font-weight: 700; }
.liga-tabelle tr.ich td:first-child { border-radius: 12px 0 0 12px; }
.liga-tabelle tr.ich td:last-child { border-radius: 0 12px 12px 0; }
.liga-rang { width: 3.5rem; }
.rang-marke {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; background: var(--c-card-alt); border: 1px solid var(--c-line);
}
.rang-marke.rang-1 { background: var(--c-gold); color: #fff; border-color: transparent; }
.rang-marke.rang-2 { background: var(--c-silver); color: #fff; border-color: transparent; }
.rang-marke.rang-3 { background: var(--c-bronze); color: #fff; border-color: transparent; }
.liga-name-zelle { display: flex; align-items: center; gap: .6rem; min-height: 52px; }
.liga-tabelle td.liga-name-zelle { display: table-cell; }
.liga-name-zelle .avatar { margin-right: .6rem; vertical-align: middle; }
.liga-name { font-weight: 700; overflow-wrap: anywhere; }
.liga-du { color: var(--c-muted); font-weight: 400; }
.liga-punkte { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem !important; font-variant-numeric: tabular-nums; }
.liga-sterne { font-size: .85rem; margin-left: .25rem; }
.liga-tipp-btn { min-height: 40px; }
@media (max-width: 575px) {
    .liga-tabelle td { padding: .45rem .3rem; }
    .liga-name-zelle .avatar { display: none; }
    .liga-rang { width: 2.8rem; }
    .liga-filter .form-select { min-width: 0; flex: 1 1 9rem; }
    .liga-getippt { align-items: flex-start; width: 100%; }
    .liga-kopf h1 { font-size: 2.1rem; }
}

.liga-chart { position: relative; height: 340px; width: 100%; }

.liga-modal { background: var(--c-card); color: var(--c-ink); }
.liga-modal .mein-tipp-liste a { color: var(--c-ink); text-decoration: none; font-weight: 700; }
.liga-modal .mein-tipp-liste li { min-height: 48px; }
.liga-modal .mein-tipp-liste li.kein-treffer .tipp-punkte { color: var(--c-muted); }
.liga-modal .mein-tipp-liste li.treffer .tipp-punkte { color: var(--c-pine-600); }
.liga-modal-summe { margin-top: .75rem; text-align: right; font-size: 1.1rem; }
.liga-modal-footer { justify-content: space-between; }

.liga-mitglied-aktionen { display: flex; gap: .4rem; flex-wrap: wrap; }
.mitglieder-liste .zeile { flex-wrap: wrap; }
.liga-gefahr { border: 2px solid rgba(194, 54, 43, .35); }

.ligen-leer h2 { font-size: 1.6rem; }
.ligen-leer p { max-width: 60ch; }
.ligen-anleitung { margin-top: 2.5rem; }
.ligen-anleitung h2 { font-size: 1.6rem; }

/* Nummerierte Schritte (echte Reihenfolge) */
.schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.schritte li {
    counter-increment: schritt; position: relative; display: flex; flex-direction: column; gap: .25rem;
    background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-m); padding: 1.1rem 1.2rem 1.2rem 4.2rem; min-height: 100px;
}
.schritte li::before {
    content: counter(schritt); position: absolute; left: 1.1rem; top: 1rem;
    width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--c-pine-900); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
}
html.dark-mode .schritte li::before { background: var(--c-pine-600); color: #06231a; }
.schritte strong { font-size: 1.08rem; }
.schritte span { color: var(--c-muted); }
@media (max-width: 860px) { .schritte { grid-template-columns: 1fr; } }

.formular-karte { padding: 1.5rem; }
.formular-karte .form-control { margin-top: .35rem; }
.feld-hilfe { color: var(--c-muted); font-size: .95rem; margin: .5rem 0 1.25rem; }
.feld-fehler { color: var(--c-miss); font-weight: 700; margin: -.75rem 0 1rem; }
.liga-mitglied-aktionen form { display: inline-block; margin: 0; }
@media (max-width: 575px) { .liga-mitglied-aktionen { padding-left: 3.4rem; } }
.liga-getippt-liste { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 575px) { .liga-getippt-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .liga-getippt-liste li { padding-right: .5rem; } .liga-getippt-liste li { min-height: 48px; } }

/* =========================================================================
   TIPPEN – Rennliste und Tipp-Abgabe (Design 2026)
   ========================================================================= */
.ort-titel { display: flex; align-items: center; gap: .6rem; }
.tippen-seite .zeile .knopf { flex: 0 0 auto; }
@media (max-width: 420px) { .tippen-seite .zeile .knopf-rahmen { white-space: normal; max-width: 8.5rem; text-align: center; } }
.tippen-seite .zeile.getippt .zeile-titel { color: var(--c-muted); }

.tipp-seite { max-width: 1140px; }
.tipp-kopf { margin: .25rem 0 1.25rem; }
.tipp-kopf h1 { margin: .2rem 0 .4rem; }
.ergebnis-ort-zeile { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--c-muted); }
.tipp-start { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font-size: 1.05rem; }
.tipp-start .ic { color: var(--c-muted); }
.tipp-countdown {
    display: inline-block; font-weight: 700; padding: .15rem .65rem; border-radius: 999px;
    background: #fff4d6; color: #6b4a00;
}
html.dark-mode .tipp-countdown { background: #3a2e0c; color: #ffe08a; }
.tipp-hilfe { margin: .75rem 0 0; color: var(--c-muted); max-width: 65ch; }

.tipp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 900px) { .tipp-layout { grid-template-columns: 410px minmax(0, 1fr); } }

.tipp-panel {
    background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-l);
    padding: 1rem 1.1rem 1.1rem; box-shadow: var(--shadow-card);
    position: sticky; top: 84px; z-index: 5;
}
.tipp-panel-kopf { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.tipp-panel-kopf strong { font-family: var(--font-display); font-size: 1.5rem; }
.tipp-zaehler { margin-left: auto; color: var(--c-muted); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tipp-slots { list-style: none; margin: 0 0 1rem; padding: 0; }
.tipp-slot {
    display: flex; align-items: center; gap: .6rem; min-height: 54px; padding: .3rem 0;
    border-bottom: 1px solid var(--c-line);
}
.slot-nr {
    flex: 0 0 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
    background: var(--c-target); color: #fff;
}
.tipp-slot.belegt .slot-nr { background: var(--c-signal); color: #14201c; }
.slot-name { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.slot-name .nation-flag-sm { margin-right: .2rem; }
.slot-leer { color: var(--c-muted); font-weight: 400; font-style: normal; }
.slot-aktionen { display: flex; gap: .25rem; }
.tipp-slot:not(.belegt) .slot-aktionen { visibility: hidden; }
.slot-btn {
    width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--c-line); background: var(--c-card);
    color: var(--c-ink); font-size: 1.1rem; font-weight: 700; line-height: 1; padding: 0;
}
.slot-btn:hover { border-color: var(--c-pine-600); }
.slot-weg:hover { border-color: var(--c-miss); color: var(--c-miss); }
.tipp-submit:disabled { opacity: .5; }

.tipp-werkzeuge { display: flex; gap: .6rem; margin-bottom: .75rem; flex-wrap: wrap; }
.tipp-werkzeuge .form-control { flex: 1 1 14rem; }
.tipp-werkzeuge .form-select { flex: 0 1 14rem; max-width: none; }

.tipp-liste {
    list-style: none; margin: 0; padding: 0; overflow: hidden;
    background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: var(--shadow-card);
}
.tipp-eintrag { display: flex; align-items: stretch; border-bottom: 1px solid var(--c-line); }
.tipp-eintrag:last-child { border-bottom: 0; }
.tipp-eintrag[hidden] { display: none; }
.eintrag-haupt {
    flex: 1; display: flex; align-items: center; gap: .75rem; min-width: 0; min-height: 64px;
    padding: .6rem .9rem; border: 0; background: transparent; color: var(--c-ink); text-align: left;
}
.eintrag-haupt:hover { background: var(--c-card-alt); }
.tipp-eintrag.gewaehlt .eintrag-haupt { background: #fff6dc; }
html.dark-mode .tipp-eintrag.gewaehlt .eintrag-haupt { background: #2f2a12; }
.eintrag-badge {
    flex: 0 0 34px; height: 34px; border-radius: 50%; border: 2px dashed var(--c-line);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.tipp-eintrag.gewaehlt .eintrag-badge { border: 0; background: var(--c-signal); color: #14201c; }
.eintrag-text { display: flex; flex-direction: column; min-width: 0; }
.eintrag-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.eintrag-meta, .eintrag-team { font-size: .92rem; color: var(--c-muted); opacity: 1; }
.eintrag-info {
    flex: 0 0 56px; border: 0; border-left: 1px solid var(--c-line); background: transparent; color: var(--c-pine-600);
    display: inline-flex; align-items: center; justify-content: center;
}
.eintrag-info:hover { background: var(--c-card-alt); }
.tipp-leer, .tipp-keine-treffer { padding: 1.25rem; color: var(--c-muted); }

.tipp-toast {
    position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(200%);
    background: var(--c-pine-900); color: #fff; padding: .75rem 1.2rem; border-radius: 12px; font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3); transition: transform .25s ease; z-index: 10001; max-width: 90vw; text-align: center;
}
.tipp-toast.sichtbar { transform: translateX(-50%) translateY(0); }

.tipp-mobilbar { display: none; }
@media (max-width: 899px) {
    .tipp-panel { position: static; padding: .75rem .9rem .5rem; }
    .tipp-panel .tipp-submit { display: none; }
    .tipp-slot { min-height: 48px; }
    .tipp-seite { padding-bottom: 5.5rem; }
    .tipp-mobilbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 10000;
        align-items: center; justify-content: space-between; gap: .75rem;
        padding: .6rem .9rem; background: var(--c-pine-900); color: #fff;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .2);
    }
    .tipp-mobilbar-info { display: flex; align-items: center; gap: .6rem; border: 0; background: transparent; color: #fff; padding: 0; text-align: left; min-height: 44px; }
    .tipp-mobilbar-submit { min-height: 46px; }
    .tipp-mobilbar-submit:disabled { opacity: .55; }
    .tipp-toast { bottom: calc(var(--tabbar-h) + 5rem); }
    .tipp-werkzeuge .form-select { flex: 1 1 9rem; }
}

.tipp-mobilbar-submit:disabled { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); opacity: 1; }

/* =========================================================================
   LANDINGPAGE – Design 2026
   ========================================================================= */
.lp-hero { background: var(--c-pine-900); color: #fff; overflow: hidden; }
html.dark-mode .lp-hero { background: #0b2e24; }
.lp-hero-innen {
    max-width: 1140px; margin: 0 auto; padding: 3.5rem 1rem 2.5rem;
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem 3rem; align-items: center;
}
.lp-hero h1 { font-size: 3.5rem; line-height: 1.02; margin: 0 0 1rem; color: #fff; max-width: 19ch; }
.lp-hero-unter { font-size: 1.2rem; color: rgba(255, 255, 255, .9); max-width: 46ch; margin: 0 0 1.75rem; }
.lp-hero-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
.lp-fakten { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; color: rgba(255, 255, 255, .9); }
.lp-fakten li { display: flex; align-items: center; gap: .5rem; }
.lp-fakten .ic { color: var(--c-signal); }

/* Beispiel-Tipp im Hero: die fünf Plätze erscheinen einmal nacheinander (einziger animierter Moment) */
.lp-tipp-beispiel {
    margin: 0; background: var(--c-card); color: var(--c-ink); border-radius: var(--radius-l);
    padding: 1.25rem 1.4rem 1.1rem; box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
}
.lp-tipp-beispiel figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; margin-bottom: .5rem; }
.lp-tipp-beispiel figcaption span { font-family: var(--font-body); font-size: .9rem; color: var(--c-muted); font-weight: 700; }
.lp-tipp-liste { list-style: none; margin: 0; padding: 0; }
.lp-tipp-liste li {
    display: flex; align-items: center; gap: .65rem; min-height: 50px; border-bottom: 1px solid var(--c-line);
    font-weight: 700; font-size: 1.08rem; opacity: 0; animation: platz-rein .4s ease-out forwards;
}
.lp-tipp-liste li:last-child { border-bottom: 0; }
.lp-tipp-liste li:nth-child(1) { animation-delay: .4s; }
.lp-tipp-liste li:nth-child(2) { animation-delay: .75s; }
.lp-tipp-liste li:nth-child(3) { animation-delay: 1.1s; }
.lp-tipp-liste li:nth-child(4) { animation-delay: 1.45s; }
.lp-tipp-liste li:nth-child(5) { animation-delay: 1.8s; }
.lp-nr {
    flex: 0 0 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-signal); color: #14201c; font-family: var(--font-display); font-size: 1.15rem;
}
.lp-tipp-fuss { margin: .75rem 0 0; color: var(--c-muted); font-size: .95rem; }
@keyframes platz-rein { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-tipp-liste li { opacity: 1; animation: none; } }
.lp-naechstes {
    display: flex; flex-direction: column; gap: .15rem; text-align: center;
    color: rgba(255, 255, 255, .85); margin-top: 1.25rem;
}
.lp-naechstes-was { font-weight: 700; }
.lp-countdown { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--c-signal); }

.lp-block { max-width: 1140px; margin: 0 auto; padding: 3.5rem 1rem 0; }
.lp-block > h2, .lp-block h2 { font-size: 2.3rem; margin: 0 0 .75rem; }
.lp-punkte, .lp-liga { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; align-items: center; }
.lp-punkte-text p, .lp-liga-text p { font-size: 1.1rem; max-width: 50ch; }
.lp-punkte-tabelle { width: 100%; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: var(--shadow-card); border-collapse: separate; overflow: hidden; }
.lp-punkte-tabelle th, .lp-punkte-tabelle td { padding: .8rem 1rem; border-bottom: 1px solid var(--c-line); }
.lp-punkte-tabelle tr:last-child th, .lp-punkte-tabelle tr:last-child td { border-bottom: 0; }
.lp-punkte-tabelle th { font-weight: 700; }
.lp-punkte-tabelle td.zahl { text-align: right; font-size: 1.4rem; white-space: nowrap; }
@media (max-width: 420px) { .lp-punkte-tabelle th, .lp-punkte-tabelle td { padding: .7rem .6rem; } }
.lp-liste { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.lp-liste li { display: flex; align-items: flex-start; gap: .5rem; font-size: 1.05rem; }
.lp-liste .ic { color: var(--c-pine-600); margin-top: .2rem; }
.lp-liga-beispiel { margin: 0; }
.lp-liga-beispiel figcaption { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin-bottom: .5rem; }
.lp-beispiel-tabelle { list-style: none; padding: 0; margin: 0; }
.lp-beispiel-tabelle li { display: flex; align-items: center; gap: .75rem; min-height: 56px; border-bottom: 1px solid var(--c-line); padding: 0 .4rem; }
.lp-beispiel-tabelle li.ich { background: var(--c-pine-100); border-radius: 10px; border-bottom-color: transparent; }
.lp-bsp-name { flex: 1; font-weight: 700; }
.lp-beispiel-tabelle .zahl { font-size: 1.5rem; }
.lp-bsp-getippt { display: flex; align-items: center; gap: .4rem; margin: .9rem 0 0; color: var(--c-pine-600); font-weight: 700; }
.lp-schluss {
    max-width: 1140px; margin: 3.5rem auto 0; padding: 2.5rem 1rem; text-align: center;
    border-top: 1px solid var(--c-line);
}
.lp-schluss h2 { font-size: 2.3rem; }
.lp-schluss p { color: var(--c-muted); font-size: 1.1rem; }
body.landing .fuss { margin-top: 0; }

@media (max-width: 860px) {
    .lp-hero-innen { grid-template-columns: 1fr; padding-top: 2.25rem; }
    .lp-hero h1 { font-size: 2.6rem; }
    .lp-stand-spalte { max-width: 460px; width: 100%; }
    .lp-punkte, .lp-liga { grid-template-columns: 1fr; }
    .lp-block { padding-top: 2.5rem; }
    .lp-block > h2, .lp-block h2, .lp-schluss h2 { font-size: 1.9rem; }
}

/* =========================================================================
   LOGIN & REGISTRIERUNG – Design 2026
   ========================================================================= */
.login-container { padding: 2rem 1rem 1rem; }
.login-card {
    background: var(--c-card) !important; color: var(--c-ink); border: 1px solid var(--c-line);
    border-radius: var(--radius-l) !important; box-shadow: var(--shadow-card) !important; border-top: 6px solid var(--c-pine-600);
    max-width: 460px;
}
.login-card h1 { font-size: 2.2rem; }
.login-card .subtitle { color: var(--c-muted); font-size: 1.02rem; }
.login-card label { font-weight: 700; font-size: 1rem; color: var(--c-ink); }
.login-card .btn-login {
    min-height: 54px; font-size: 1.1rem; border-radius: 12px;
    background: var(--c-pine-600) !important; border-color: var(--c-pine-600) !important; color: #fff !important;
}
html.dark-mode .login-card .btn-login { color: #06231a !important; }
.login-card .link-highlight { color: var(--c-pine-600) !important; font-weight: 700; text-decoration: underline; }
.login-card .link-secondary { color: var(--c-muted) !important; text-decoration: underline; }
.login-footer { font-size: 1rem; }
.password-toggle-btn {
    border: 2px solid var(--c-line) !important; border-left: 0 !important; background: var(--c-card) !important;
    color: var(--c-ink) !important; min-width: 52px; border-radius: 0 10px 10px 0 !important;
}
.password-toggle-btn svg { width: 22px; height: 22px; }
.input-group > .form-control { border-right: 0; }
.input-group > .form-control:focus + .password-toggle-btn { border-color: var(--c-pine-600) !important; }

/* =========================================================================
   WEITERE SEITEN – an Design 2026 angleichen
   ========================================================================= */
/* Einfache Textseiten (Impressum, Datenschutz, Kontakt, Danke) */
#impressum, #contact {
    max-width: 760px; margin: 1.5rem auto 0; padding: 1.5rem 1.6rem;
    background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: var(--shadow-card);
}
@media (max-width: 800px) { #impressum, #contact { margin: 1rem; } }
#impressum h1, #contact h1 { margin-bottom: 1rem; }
#contact .btn { margin-top: 1rem; }
.regel-liste { padding-left: 1.2rem; margin: 0; }
.regel-liste li { margin: .4rem 0; }
.regel-punkte { margin: .75rem 0 1rem; box-shadow: none; }
.regel-beispiel { background: var(--c-card-alt); border-radius: 10px; padding: .75rem 1rem; margin: 0; }

/* Über mich */
.wrapper > .container { max-width: 900px; padding-top: 1.5rem; }

/* Profil */
.profile-container, .profil-seite { max-width: 900px; }
.btn-danger { background: transparent; color: var(--c-miss); border-color: rgba(194, 54, 43, .55); }
.btn-danger:hover, .btn-danger:focus { background: var(--c-miss); border-color: var(--c-miss); color: #fff; }
.form-check-input { width: 1.4em; height: 1.4em; margin-top: .1em; border: 2px solid var(--c-line); }
.form-check-input:checked { background-color: var(--c-pine-600); border-color: var(--c-pine-600); }
.form-check-label { font-weight: 700; padding-left: .35rem; }

/* Meine Tipps */
.meine-tipps { max-width: 760px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.meine-tipps-header h1 { margin: .5rem 0 1rem; }
.meine-tipps .tipp {
    background: var(--c-card) !important; border: 1px solid var(--c-line) !important; border-radius: var(--radius-m) !important;
    box-shadow: var(--shadow-card); padding: 1.1rem 1.25rem !important; margin: 0 0 1rem !important; width: 100% !important; max-width: none !important;
}
.meine-tipps .tipp h4 { font-size: 1.35rem; margin: 0 0 .15rem; }
.meine-tipps .table { color: var(--c-ink); --bs-table-bg: transparent; }

/* Rangliste */
.leaderboard-container {
    max-width: 860px; margin: 1.25rem auto 0; padding: 1.25rem 1.25rem 1.5rem;
    background: transparent; box-shadow: none;
}
.leaderboard-title { font-size: 2.35rem; text-align: left; margin-bottom: 1rem; }
#rankingTabs { border: 0; gap: .5rem; background: var(--c-card-alt); padding: 6px; border-radius: 14px; border: 1px solid var(--c-line); }
#rankingTabs .nav-link {
    border: 0 !important; border-radius: 10px !important; min-height: 46px; font-weight: 700; font-size: 1rem;
    color: var(--c-muted) !important; background: transparent !important;
}
#rankingTabs .nav-link.active { background: var(--c-card) !important; color: var(--c-ink) !important; box-shadow: var(--shadow-card); }
.leaderboard-container h5.text-muted { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-ink) !important; font-weight: 700; }
.leaderboard-container .btn-outline-info { color: var(--c-pine-600); border-color: var(--c-line); }
.leaderboard-container .btn-outline-info:hover { background: var(--c-pine-600); color: #fff; border-color: var(--c-pine-600); }
.leaderboard-table .table-row { background: var(--c-card); border: 1px solid var(--c-line); }
.leaderboard-table .table-row.table-primary > * { --bs-table-accent-bg: transparent; background-color: var(--c-pine-100) !important; color: var(--c-ink); }
.leaderboard-table .table-row.table-primary { border-color: var(--c-pine-600); }
html.dark-mode .leaderboard-table .table-row.table-primary { background-color: var(--c-pine-100) !important; }
html.dark-mode .leaderboard-table .table-row:hover { background-color: var(--c-card-alt) !important; }
.rank-cell { color: var(--c-muted); font-family: var(--font-display); font-size: 1.4rem; }
.points-cell { color: var(--c-ink) !important; font-family: var(--font-display) !important; font-size: 1.6rem !important; }
.leaderboard-table .text-muted, .leaderboard-container .text-muted { color: var(--c-muted) !important; }
.leaderboard-container .fw-bold.text-dark, .leaderboard-container .text-dark { color: var(--c-ink) !important; }
.user-stats-card { border-bottom-color: var(--c-signal); border-radius: 16px; }
html.dark-mode .user-stats-card { background: rgba(21, 35, 30, .96); }
.rank-number { color: var(--c-ink); font-family: var(--font-display); }
.pagination-link { min-height: 44px; }
@media (max-width: 991px) { .sticky-user-stats { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); } }

/* Dark-Mode-Feinschliff für ältere Bootstrap-Elemente */
html.dark-mode .bg-white, html.dark-mode .bg-light { background-color: var(--c-card-alt) !important; }
html.dark-mode .table { color: var(--c-ink); }
.text-primary { color: var(--c-pine-600) !important; }
@media (max-width: 640px) {
    .kalender-rennen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; align-items: center; }
    .kalender-rennen li .kalender-zeit { grid-column: 1; grid-row: 1; min-width: 0; font-size: .92rem; }
    .kalender-rennen li .kalender-name { grid-column: 1; grid-row: 2; }
    .kalender-rennen li > .btn { grid-column: 2; grid-row: 1 / span 2; }
    .kalender-rennen li .ergebnis-link { grid-column: 1 / -1; }
}
.kalender-rennen li.vorbei { opacity: 1; }
.kalender-rennen li.vorbei .kalender-name { color: var(--c-muted); }
.avatar-circle { border: 0 !important; box-shadow: none !important; font-family: var(--font-display); font-size: 1.25rem; }
.avatar-circle.av-0, .avatar-circle.av-1, .avatar-circle.av-2, .avatar-circle.av-3, .avatar-circle.av-4, .avatar-circle.av-5 { color: #fff; }

/* =========================================================================
   TIPP-ANZEIGE – überall gleich (Liga, Rangliste, Ergebnis, Meine Tipps)
   Spalten: getippter Platz | Name | tatsächlicher Platz | Punkte (0–5, keine Minuspunkte)
   ========================================================================= */
.tipp-karte { --tk-spalten: 34px minmax(0, 1fr) 4.2rem 2.6rem; }
.tipp-karte.offen { --tk-spalten: 34px minmax(0, 1fr); }
.tk-kopfzeile, .tk-zeile { display: grid; grid-template-columns: var(--tk-spalten); align-items: center; gap: .65rem; }
.tk-kopfzeile { font-size: .85rem; font-weight: 700; color: var(--c-muted); padding: 0 0 .35rem; border-bottom: 2px solid var(--c-line); }
.tk-kopfzeile span:nth-child(3), .tk-kopfzeile span:nth-child(4) { text-align: center; }
.tk-kopfzeile span:first-child { grid-column: 1 / span 2; }
.tk-kopfzeile span:nth-child(2) { display: none; }
.tk-liste { list-style: none; margin: 0; padding: 0; }
.tk-zeile { min-height: 54px; border-bottom: 1px solid var(--c-line); }
.tk-platz {
    width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-signal); color: #14201c; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.tk-name { min-width: 0; font-weight: 700; font-size: 1.05rem; }
.tk-name a { color: var(--c-ink); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; }
.tk-name a:hover { text-decoration: underline; }
.tk-name .nation-flag-sm { flex: 0 0 auto; }
.tk-echt { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tk-punkte.pjp-feld { width: 40px; height: 36px; font-size: 1.3rem; border-radius: 9px; justify-self: center; }
.tk-summe { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .8rem; font-weight: 700; color: var(--c-muted); }
.tk-summe strong { color: var(--c-ink); font-size: 1.05rem; }
.tk-summe .zahl { font-size: 1.9rem; margin-right: .2rem; }
.tk-titel-rang { font-family: var(--font-body); font-size: .95rem; font-weight: 700; color: var(--c-muted); margin-left: .25rem; }
#tippModalTitel, #modal-user-name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mein-tipp { margin: .75rem 0 1.25rem; }
.mein-tipp-kopf { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .5rem; }
.mein-tipp-kopf strong { font-family: var(--font-display); font-size: 1.35rem; }
.mein-tipp-kopf span { color: var(--c-muted); font-weight: 700; }
.meine-tipps-seite .karte-kopf h2 { margin: 0; }
@media (max-width: 420px) {
    .tipp-karte { --tk-spalten: 30px minmax(0, 1fr) 3.2rem 2.4rem; }
    .tk-platz { width: 30px; height: 30px; font-size: 1.05rem; }
    .tk-name { font-size: 1rem; }
    .tk-name a { align-items: flex-start; }
    .tk-name a .nation-flag-sm { margin-top: .3em; }
}
/* Modale Fenster liegen über Kopfzeile und Handy-Leiste */
.modal { z-index: 10020; }
.modal-backdrop { z-index: 10015; }
.liga-modal-footer { flex-wrap: nowrap; gap: .5rem; }
.liga-modal-footer > * { margin: 0; }
@media (max-width: 480px) {
    .nur-breit { display: none; }
    #tippModalVorher, #tippModalNachher { min-width: 48px; padding: .4rem .8rem; font-size: 1.3rem; }
    .liga-modal-footer #tippModalErgebnis { flex: 1; }
}