/* ═══════════════════════════════════════════════════════════════════════════
   meisterschuetze.css — v2.0 (Mobile Gaming Edition)
   ───────────────────────────────────────────────────────────────────────────
   Drop-in-Ersatz für meisterschuetze.css v1. Alle bestehenden Klassen sind
   erhalten und verhalten sich identisch — nur das visuelle Design ist neu.

   Designsprache: Dark-First Mobile Gaming. Tiefes Tannengrün als Surface,
   leuchtendes Vereinsgrün und sattes XP-Gold als Akzente. Display-Schrift
   bleibt Oswald (Markenkonsistenz, kein Font-Wechsel nötig).

   CSP: 100% extern, keine Inline-Styles, kein @import (alle Fonts kommen aus
   dem System-Stack — Oswald via Google Fonts würde extra Header brauchen,
   bleibt auf bestehender Google-Fonts-Einbindung wie zuvor).

   Theme-DB-Kompatibilität: Die 5 von theme.php überschreibbaren Tokens
   (--mts-primary, --mts-accent, --mts-bg, --mts-card, --mts-muted) sind
   weiterhin DIE Quelle der Wahrheit für die Farben. Vereinsadmins können
   weiterhin via /admin/einstellungen das Theme anpassen.

   Migration v1→v2: Datei tauschen, fertig. Optional: theme.php fixen
   (siehe theme.v2.php im Lieferumfang) damit die DB-Tokens auch wirklich
   greifen — aktuell schreibt theme.php --mts-card statt --mts-bg-card.

   Stand: 2026-05-04
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   0. WEBFONTS — Self-hosted (CSP 'self', kein externer Request)
   ───────────────────────────────────────────────────────────────────────────
   Der Standalone-App-Bereich bindet weder Styles/fonts.css noch mainstyle.css
   ein. Inter (Body) und Oswald (Display) werden daher hier direkt deklariert.
   Inter ist explizit für Bildschirme entworfen und auf Dark-BG hervorragend
   lesbar — ersetzt die nicht geladene Raleway (Chrome fiel sonst auf einen
   System-Stack zurück, was zusammen mit aggressivem Font-Smoothing in Chrome
   zu der „dünn/unscharf"-Optik führte).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inter Variable — alle Gewichte 100–900 in einer Datei (latin + lat-ext + cyr) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/Fonts/inter-variable.woff2') format('woff2');
}

/* Oswald 700 — latin-ext */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/Fonts/oswald-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Oswald 700 — latin */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/Fonts/oswald-700-latin.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;
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── DB-überschreibbare Tokens (theme.php) ────────────────────────────
       Die 5 Werte hier sind die NEUEN Defaults für v2 (Dark Gaming).
       Vereine, die noch keine eigenen Theme-Werte gespeichert haben,
       kriegen diese automatisch. Wer die alten Werte gespeichert hat,
       sieht weiterhin Light Mode — das ist ein Feature, kein Bug.
       Der Admin sollte beim ersten Update die neuen Werte aktiv setzen
       oder den "Zurück auf Default"-Knopf in den Einstellungen drücken. */
    --mts-primary:        #2BD96A;     /* Archer Green - leuchtendes Vereinsgrün */
    --mts-accent:         #FFB800;     /* Bullseye Gold - XP/Belohnungen */
    --mts-bg:             #0E1814;     /* Deep Forest Night - Seiten-BG */
    --mts-card:           #162821;     /* Pine Shadow - Karten-BG */
    --mts-muted:          #8FA39A;     /* Sage Mist - Sekundärtext */

    /* ── Aliase mit konsistenten Namen (was die CSS tatsächlich nutzt) ───
       Solange theme.php die "Kurz"-Namen schreibt (--mts-card, --mts-muted),
       müssen die "Lang"-Namen daraus aliasiert werden. So bleibt das
       DB-Theme-System voll funktionsfähig OHNE PHP-Änderungen. */
    --mts-bg-card:        var(--mts-card);
    --mts-text-muted:     var(--mts-muted);

    /* ── Abgeleitete Brand-Farben ────────────────────────────────────────── */
    --mts-primary-dark:   #1FA850;
    --mts-primary-glow:   rgba(43, 217, 106, 0.35);
    --mts-accent-dark:    #B88500;
    --mts-accent-bright:  #FFD54A;
    --mts-accent-glow:    rgba(255, 184, 0, 0.4);

    /* ── Surface-Hierarchie (Dark Theme) ─────────────────────────────────── */
    --mts-bg-elevated:    #1E342B;     /* Modals, Hover-States, höhere Ebene */
    --mts-bg-subtle:      #0A130F;     /* Subtiler als BG für eingelassene Elemente */

    /* ── Text-Hierarchie ─────────────────────────────────────────────────── */
    --mts-text:           #F0F4F1;
    --mts-text-dim:       #5C6F66;     /* Disabled, sehr dezent */

    /* ── Linien / Borders ────────────────────────────────────────────────── */
    --mts-border:         rgba(143, 163, 154, 0.18);
    --mts-border-strong:  rgba(143, 163, 154, 0.32);

    /* ── Status-Farben (Dark-optimiert) ──────────────────────────────────── */
    --mts-error-bg:       rgba(255, 82, 82, 0.10);
    --mts-error-border:   #FF5252;
    --mts-error-text:     #FF8A8A;
    --mts-success-bg:     rgba(43, 217, 106, 0.10);
    --mts-success-border: #2BD96A;
    --mts-success-text:   #5EE890;
    --mts-warning-bg:     rgba(249, 168, 37, 0.10);
    --mts-warning-border: #F9A825;
    --mts-warning-text:   #FFCB52;

    /* ── Gaming-Spezial: Streak-Flammen ─────────────────────────────────── */
    --mts-fire-1:         #FF6B35;
    --mts-fire-2:         #FFB800;
    --mts-fire-3:         #FFD54A;

    /* ── Gaming-Spezial: Rank-Farben ────────────────────────────────────── */
    --mts-rank-gold:      #FFD700;
    --mts-rank-silver:    #D7E2EA;
    --mts-rank-bronze:    #E08A4A;

    /* ── Geometrie ───────────────────────────────────────────────────────── */
    --mts-radius-sm:      8px;          /* war 4px — alles weicher, mobiler */
    --mts-radius-md:      14px;         /* war 8px */
    --mts-radius-lg:      20px;
    --mts-radius-pill:    999px;

    /* ── Schatten + Glows ────────────────────────────────────────────────── */
    --mts-shadow:         0 4px 16px rgba(0, 0, 0, 0.35);
    --mts-shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.5);
    --mts-glow-primary:   0 0 24px var(--mts-primary-glow);
    --mts-glow-accent:    0 0 24px var(--mts-accent-glow);

    /* ── Typografie ──────────────────────────────────────────────────────── */
    --mts-font-display:   'Oswald', 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
    --mts-font-body:      'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
    --mts-font-mono:      ui-monospace, 'SF Mono', 'JetBrains Mono', 'Courier New', monospace;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET / BASE — gilt nur innerhalb body.mts (App-Bereich)
   ═══════════════════════════════════════════════════════════════════════════ */
body.mts {
    background-color: var(--mts-bg);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(43, 217, 106, 0.06), transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 30%, rgba(255, 184, 0, 0.03), transparent 70%);
    background-attachment: fixed;
    color: var(--mts-text);
    /* Body-Font hardcoded, NICHT über --mts-font-body — die Schrift muss
       unabhängig vom Token-System bleiben, damit kein theme-/cache-/inheritance-
       Effekt sie wieder auf Raleway o. ä. zurückfallen lässt. */
    font-family: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /* Kein -webkit-font-smoothing: antialiased — Chrome darf Subpixel-AA
       nutzen, das auf Dark-BG ohnehin schon zu „dünn" tendiert. */
}

body.mts * {
    box-sizing: border-box;
}

/* Smoothing für alle Übergänge */
body.mts a,
body.mts button,
body.mts input,
body.mts select,
body.mts textarea,
body.mts summary {
    -webkit-tap-highlight-color: transparent;
}

/* Reduzierte Bewegung respektieren — Pflicht für Accessibility */
@media (prefers-reduced-motion: reduce) {
    body.mts *,
    body.mts *::before,
    body.mts *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.05ms !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. SHELL / LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem 6rem; /* extra Bottom-Padding für mögliche Fixed-Nav */
}

.mts-shell--narrow {
    max-width: 480px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. NAVIGATION (Top-Bar)
   ───────────────────────────────────────────────────────────────────────────
   Bestehende Markup-Struktur. Behält die Top-Bar-Form, aber visuell
   modernisiert: glassmorphic Hintergrund, leuchtende Active-States.
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-nav {
    background:
        linear-gradient(180deg,
            rgba(22, 40, 33, 0.95) 0%,
            rgba(14, 24, 20, 0.85) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--mts-border);
    padding: 0.85rem 1rem;
    margin-bottom: 1.75rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

.mts-nav__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.mts-nav__brand {
    color: var(--mts-text);
    font-family: var(--mts-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mts-nav__brand:hover {
    color: var(--mts-primary);
}

.mts-nav__link {
    color: var(--mts-text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    border-radius: var(--mts-radius-pill);
    transition: background-color 0.2s, color 0.2s;
    position: relative;
}

.mts-nav__link:hover {
    background-color: rgba(43, 217, 106, 0.08);
    color: var(--mts-text);
}

.mts-nav__link--active {
    color: var(--mts-primary);
    background-color: rgba(43, 217, 106, 0.12);
    font-weight: 600;
}

.mts-nav__link--logout {
    color: rgba(255, 138, 138, 0.85);
}

.mts-nav__link--logout:hover {
    background-color: rgba(255, 82, 82, 0.12);
    color: #FFAAAA;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. CARD — Kern-UI-Einheit
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-card {
    background-color: var(--mts-bg-card);
    border: 1px solid var(--mts-border);
    border-radius: var(--mts-radius-md);
    box-shadow: var(--mts-shadow);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}

/* Dezenter Glow-Hauch oben rechts für jede Card — schafft Tiefe */
.mts-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at 100% 0%,
        rgba(43, 217, 106, 0.04),
        transparent 60%);
    pointer-events: none;
}

.mts-card > * {
    position: relative; /* damit ::before drunter bleibt */
}

.mts-card__title {
    font-family: var(--mts-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mts-text);
    letter-spacing: 0.02em;
    margin: 0 0 1.1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--mts-border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mts-card__subtitle {
    font-size: 0.9rem;
    color: var(--mts-text-muted);
    margin: -0.5rem 0 1.1rem;
}

.mts-card__meta {
    font-size: 0.88rem;
    color: var(--mts-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: var(--mts-radius-md);
    font-family: var(--mts-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    text-align: center;
    transition: transform 0.15s, background-color 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s;
    /* Vertikaler Verlauf (180deg) damit die linke und rechte Button-Kante
       symmetrisch wirken — 135deg-Diagonale erzeugt asymmetrische Tonwerte */
    background: linear-gradient(180deg, var(--mts-primary) 0%, var(--mts-primary-dark) 100%);
    color: #0E1814;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(43, 217, 106, 0.25);
    /* Mindesthöhe für Touch-Targets (44×44 ist Apple/Material-Standard) */
    min-height: 44px;
    line-height: 1.4;
}

.mts-btn:hover {
    background: linear-gradient(180deg, #3DE375 0%, var(--mts-primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(43, 217, 106, 0.35);
}

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

/* Accent-Button: vorher ging der Gradient von Gold (#FFB800) zu Dark-Olive
   (#B88500), was wie ein „schmutziger" Overlay aussieht. Statt dessen ein
   sehr subtiler Tonwert-Verlauf innerhalb des Gold-Spektrums (ohne Olive-Stop) */
.mts-btn--accent {
    background: linear-gradient(180deg, var(--mts-accent-bright) 0%, var(--mts-accent) 100%);
    color: #0E1814;
    box-shadow: 0 4px 14px rgba(255, 184, 0, 0.3);
}

.mts-btn--accent:hover {
    background: linear-gradient(180deg, #FFE082 0%, var(--mts-accent-bright) 100%);
    box-shadow: 0 6px 20px rgba(255, 184, 0, 0.45);
}

.mts-btn--secondary {
    background: var(--mts-bg-elevated);
    color: var(--mts-text);
    border-color: var(--mts-border-strong);
    box-shadow: none;
}

.mts-btn--secondary:hover {
    background: var(--mts-bg-card);
    border-color: var(--mts-primary);
    color: var(--mts-primary);
    box-shadow: none;
}

.mts-btn--ghost {
    background: transparent;
    color: var(--mts-primary);
    border-color: var(--mts-primary);
    box-shadow: none;
}

.mts-btn--ghost:hover {
    background: var(--mts-primary);
    color: #0E1814;
    box-shadow: var(--mts-glow-primary);
}

.mts-btn--danger {
    background: linear-gradient(180deg, #FF5252 0%, #D03333 100%);
    color: #FFF;
    box-shadow: 0 4px 14px rgba(255, 82, 82, 0.3);
}

.mts-btn--danger:hover {
    background: linear-gradient(180deg, #FF7373 0%, #FF5252 100%);
    box-shadow: 0 6px 20px rgba(255, 82, 82, 0.4);
}

.mts-btn--sm {
    font-size: 0.82rem;
    padding: 0.4rem 0.9rem;
    min-height: 36px;
}

.mts-btn--full {
    display: block;
    width: 100%;
}

.mts-btn--inline {
    margin-left: 0.5rem;
}

.mts-btn--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

.mts-btn--current {
    pointer-events: none;
    background: var(--mts-bg-elevated);
    color: var(--mts-text);
    box-shadow: inset 0 0 0 2px var(--mts-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. FORM-ELEMENTE
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-form-group {
    margin-bottom: 1.25rem;
}

.mts-form-group--mt    { margin-top: 1.5rem; }
.mts-form-group--mt-sm { margin-top: 1rem; }
.mts-form-group--separator {
    border-top: 1px solid var(--mts-border);
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}

.mts-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.45rem;
    font-size: 0.92rem;
    color: var(--mts-text);
    letter-spacing: 0.02em;
}

.mts-input,
.mts-select,
.mts-textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--mts-border-strong);
    border-radius: var(--mts-radius-sm);
    font-family: var(--mts-font-body);
    font-size: 1rem;
    background-color: var(--mts-bg-subtle);
    color: var(--mts-text);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    box-sizing: border-box;
    min-height: 44px;
}

.mts-input::placeholder,
.mts-textarea::placeholder {
    color: var(--mts-text-dim);
}

.mts-input:hover,
.mts-select:hover,
.mts-textarea:hover {
    border-color: var(--mts-text-muted);
}

.mts-input:focus,
.mts-select:focus,
.mts-textarea:focus {
    outline: none;
    border-color: var(--mts-primary);
    background-color: var(--mts-bg-card);
    box-shadow: 0 0 0 4px rgba(43, 217, 106, 0.12);
}

.mts-textarea {
    min-height: 5.5rem;
    resize: vertical;
    line-height: 1.5;
}

.mts-input--narrow {
    width: 100px;
}

.mts-input--file {
    padding: 0.5rem 0.6rem;
    cursor: pointer;
}

/* Browser-default für select dark-kompatibel halten — Custom-Chevron als
   Inline-SVG (sauberer als zwei Gradients, kein 1px-Spalt in der Mitte) */
.mts-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238FA39A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 0.95rem center;
    background-size: 12px 8px;
    background-repeat: no-repeat;
    padding-right: 2.4rem;
}

.mts-select option {
    background-color: var(--mts-bg-card);
    color: var(--mts-text);
}

.mts-hint {
    font-size: 0.85rem;
    color: var(--mts-text-muted);
    margin-top: 0.4rem;
    line-height: 1.4;
}

/* HEIC-Konvertierungs-Status (meisterschuetze-foto-convert.js) */
.mts-foto-convert-status {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    line-height: 1.4;
}
.mts-foto-convert-status[data-kind="busy"]  { color: var(--mts-text-muted); }
.mts-foto-convert-status[data-kind="busy"]::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.45em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mts-foto-convert-spin 0.8s linear infinite;
}
.mts-foto-convert-status[data-kind="ok"]    { color: var(--mts-success, #2f8a55); }
.mts-foto-convert-status[data-kind="error"] { color: var(--mts-error, #b14242); }
@keyframes mts-foto-convert-spin {
    to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. NOTICES (Error / Success / Warning)
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-error,
.mts-success,
.mts-warning {
    padding: 0.85rem 1.1rem;
    border-radius: var(--mts-radius-sm);
    border-left: 4px solid;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.mts-error {
    background-color: var(--mts-error-bg);
    border-color: var(--mts-error-border);
    color: var(--mts-error-text);
}

.mts-success {
    background-color: var(--mts-success-bg);
    border-color: var(--mts-success-border);
    color: var(--mts-success-text);
}

.mts-warning {
    background-color: var(--mts-warning-bg);
    border-color: var(--mts-warning-border);
    color: var(--mts-warning-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. LOGIN
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(ellipse 70% 50% at 50% 30%, rgba(43, 217, 106, 0.10), transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 80%, rgba(255, 184, 0, 0.05), transparent 60%),
        var(--mts-bg);
}

.mts-login-box {
    width: 100%;
    max-width: 400px;
}

.mts-login-box--wide {
    max-width: 480px;
}

.mts-login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.mts-login-header__title {
    font-family: var(--mts-font-display);
    font-size: 2.25rem;
    color: var(--mts-text);
    margin: 0 0 0.4rem;
    letter-spacing: 0.05em;
    background: linear-gradient(120deg, var(--mts-primary) 0%, var(--mts-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mts-login-header__subtitle {
    color: var(--mts-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.mts-login-footer {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--mts-text-muted);
}

.mts-login-footer a {
    color: var(--mts-primary);
    text-decoration: underline;
    text-decoration-color: rgba(43, 217, 106, 0.4);
    text-underline-offset: 3px;
}

.mts-login-footer a:hover {
    color: var(--mts-accent);
    text-decoration-color: var(--mts-accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. STATUS-BADGES / CHIPS
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: var(--mts-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
}

.mts-badge--pending {
    background-color: rgba(249, 168, 37, 0.15);
    color: var(--mts-warning-text);
    border-color: rgba(249, 168, 37, 0.4);
}

.mts-badge--validated {
    background-color: rgba(43, 217, 106, 0.15);
    color: var(--mts-success-text);
    border-color: rgba(43, 217, 106, 0.4);
}

.mts-badge--rejected {
    background-color: rgba(255, 82, 82, 0.15);
    color: var(--mts-error-text);
    border-color: rgba(255, 82, 82, 0.4);
}

.mts-badge--trainer {
    background-color: rgba(125, 211, 252, 0.15);
    color: #7DD3FC;
    border-color: rgba(125, 211, 252, 0.4);
}

.mts-badge--admin {
    background-color: rgba(206, 147, 216, 0.15);
    color: #CE93D8;
    border-color: rgba(206, 147, 216, 0.4);
}

.mts-badge--accent {
    background-color: rgba(255, 184, 0, 0.15);
    color: var(--mts-accent);
    border-color: rgba(255, 184, 0, 0.4);
    /* Override für Floating-Badge nach Card-Title (z.B. "17 / 62") */
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* Inline-Zähler im Card-Title (z.B. „17 / 62") — Gold-Akzent in groß,
   aber ohne Pill-Hinterlegung. */
.mts-card__title-count {
    margin-left: 0.5rem;
    color: var(--mts-accent);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
}

.mts-badge--active {
    background-color: rgba(43, 217, 106, 0.15);
    color: var(--mts-success-text);
    border-color: rgba(43, 217, 106, 0.4);
}

.mts-badge--inactive {
    background-color: rgba(143, 163, 154, 0.10);
    color: var(--mts-text-muted);
    border-color: var(--mts-border);
}

.mts-badge--success {
    background-color: rgba(43, 217, 106, 0.15);
    color: var(--mts-success-text);
    border-color: rgba(43, 217, 106, 0.4);
}

.mts-badge--error {
    background-color: rgba(255, 82, 82, 0.15);
    color: var(--mts-error-text);
    border-color: rgba(255, 82, 82, 0.4);
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. TABELLEN
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.mts-table th {
    background-color: var(--mts-bg-subtle);
    color: var(--mts-text-muted);
    font-weight: 700;
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--mts-border-strong);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mts-table td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--mts-border);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

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

.mts-table tr:hover td {
    background-color: rgba(43, 217, 106, 0.04);
}

.mts-table-wrap,
.mts-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.5rem; /* leichter Bleed an den Card-Kanten (Desktop) */
    padding: 0 0.5rem;
    /* min-width: 0 verhindert, dass Block-Elemente in flex/grid-Containern
       auf min-content expandieren und die Karte über die Viewport-Breite
       hinausschieben — Desktop war ok, Mobile drückte Tabelle nach außen. */
    min-width: 0;
    max-width: 100%;
}

.mts-cell--center { text-align: center; }
.mts-cell--email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mts-cell--actions {
    white-space: nowrap;
}
.mts-cell--actions form { display: inline; }
.mts-cell--actions .mts-btn + .mts-btn,
.mts-cell--actions form + form .mts-btn {
    margin-left: 0.4rem;
}

.mts-table--sm { font-size: 0.85rem; }
.mts-table--pb td:first-child { font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════════
   12. PROFIL-HEADER + PUNKTE-DISPLAY (Hero-Element der Profile-Page)
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-profile-header {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.mts-profile-header__name {
    font-family: var(--mts-font-display);
    font-size: 2rem;
    color: var(--mts-text);
    margin: 0;
    letter-spacing: 0.02em;
    background: linear-gradient(120deg, var(--mts-text) 0%, var(--mts-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mts-profile-header__roles {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/* ── Punkte-Display: das visuelle Hero-Element ─────────────────────────── */
.mts-punkte-display {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mts-punkte-display__total {
    font-family: var(--mts-font-display);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--mts-primary);
    line-height: 1;
    letter-spacing: 0.01em;
    text-shadow: 0 0 30px var(--mts-primary-glow);
    /* Counter-Up-Animation beim Laden */
    animation: mts-pop-in 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

@keyframes mts-pop-in {
    0%   { opacity: 0; transform: scale(0.85) translateY(8px); }
    70%  { opacity: 1; transform: scale(1.04) translateY(0); }
    100% { transform: scale(1); }
}

.mts-punkte-display__unit {
    font-size: 1.2rem;
    color: var(--mts-text-muted);
    font-weight: 400;
    margin-left: 0.4rem;
    letter-spacing: 0.05em;
    text-shadow: none;
}

.mts-punkte-display__pending {
    color: var(--mts-warning-text);
    font-size: 0.92rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mts-punkte-display__pending::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--mts-warning-text);
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    animation: mts-pulse-dot 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes mts-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.3); }
}

.mts-punkte-display__all-validated {
    color: var(--mts-success-text);
    font-size: 0.92rem;
    margin: 0;
}

.mts-punkte-display__empty {
    color: var(--mts-text-muted);
    font-size: 0.92rem;
    margin: 0;
}

.mts-punkte-display__breakdown {
    font-size: 0.88rem;
    color: var(--mts-text-muted);
    margin: 0;
}

.mts-punkte-pending {
    font-size: 0.88em;
    opacity: 0.8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. TEXT-UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-text-muted {
    color: var(--mts-text-muted);
    font-size: 0.85em;
}

.mts-text-muted--sm {
    color: var(--mts-text-muted);
    font-size: 0.95rem;
}

.mts-empty-state {
    color: var(--mts-text-muted);
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. PROFIL QUICK-ACTIONS, PAGE-TITLES
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-page-title {
    font-family: var(--mts-font-display);
    font-size: 2rem;
    color: var(--mts-text);
    margin: 0 0 0.4rem;
    letter-spacing: 0.02em;
}

.mts-page-title--secondary {
    margin-top: 2.5rem;
    font-size: 1.5rem;
    color: var(--mts-text-muted);
}

.mts-page-subtitle {
    color: var(--mts-text-muted);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. EINTRAGEN-KARTEN (`<details>`-Akkordeon)
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-eintrag-card {
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mts-eintrag-card:has(details[open]) {
    border-color: var(--mts-primary);
    box-shadow: var(--mts-glow-primary), var(--mts-shadow);
}

.mts-eintrag-card details {
    width: 100%;
}

.mts-eintrag-card summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.5rem;
    user-select: none;
    transition: background-color 0.15s;
    min-height: 64px; /* großer Tap-Target */
}

.mts-eintrag-card summary::-webkit-details-marker {
    display: none;
}

.mts-eintrag-card summary:hover,
.mts-eintrag-card summary:focus-visible {
    background-color: rgba(43, 217, 106, 0.06);
}

.mts-eintrag-card details[open] summary {
    border-bottom: 1px solid var(--mts-border);
    background-color: rgba(43, 217, 106, 0.04);
}

.mts-eintrag-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--mts-bg-elevated);
    border-radius: 12px;
}

.mts-eintrag-title {
    font-family: var(--mts-font-display);
    font-size: 1.15rem;
    color: var(--mts-text);
    font-weight: 700;
    flex: 1;
    letter-spacing: 0.02em;
}

.mts-eintrag-pkt {
    font-family: var(--mts-font-display);
    font-size: 0.92rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.18), rgba(255, 184, 0, 0.08));
    color: var(--mts-accent);
    border: 1px solid rgba(255, 184, 0, 0.3);
    border-radius: var(--mts-radius-pill);
    padding: 0.25rem 0.8rem;
    white-space: nowrap;
    letter-spacing: 0.04em;
}

.mts-eintrag-summary--static {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.5rem;
}

.mts-eintrag-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.mts-eintrag-card--disabled {
    opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. FIELDSET / RADIO-GRUPPE / CHECKBOX
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.mts-fieldset legend.mts-label {
    display: block;
    margin-bottom: 0.5rem;
}

.mts-fieldset--bordered {
    border: 1px solid var(--mts-border-strong);
    border-radius: var(--mts-radius-sm);
    padding: 0.7rem 0.9rem;
    background: var(--mts-bg-subtle);
}

.mts-fieldset--bordered legend {
    padding: 0 0.4rem;
    color: var(--mts-text-muted);
    font-size: 0.85rem;
}

.mts-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mts-radio-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.6rem 0.8rem;
    border-radius: var(--mts-radius-sm);
    border: 1.5px solid var(--mts-border);
    background: var(--mts-bg-subtle);
    transition: all 0.15s;
    font-size: 0.95rem;
    min-height: 44px;
}

.mts-radio-label:hover {
    background: var(--mts-bg-elevated);
    border-color: var(--mts-text-muted);
}

.mts-radio-label:has(input:checked) {
    background: rgba(43, 217, 106, 0.10);
    border-color: var(--mts-primary);
    color: var(--mts-text);
}

.mts-radio-label input[type="radio"] {
    accent-color: var(--mts-primary);
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
    cursor: pointer;
}

.mts-radio-label--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-right: 1rem;
    cursor: pointer;
    padding: 0.4rem 0.7rem;
    border-radius: var(--mts-radius-sm);
    border: 1.5px solid var(--mts-border);
    background: var(--mts-bg-subtle);
    min-height: 38px;
}

.mts-radio-label--inline:last-child {
    margin-right: 0;
}

.mts-radio-label--inline:has(input:checked) {
    background: rgba(43, 217, 106, 0.10);
    border-color: var(--mts-primary);
}

.mts-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mts-text);
    padding: 0.5rem 0;
    min-height: 44px;
}

.mts-checkbox {
    width: 1.2em;
    height: 1.2em;
    accent-color: var(--mts-primary);
    flex-shrink: 0;
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. DISTANZ-HINWEIS (live-update in eintragen.php)
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-distanz-hint {
    font-size: 0.88rem;
    color: var(--mts-text-muted);
    margin: 0.5rem 0 0;
    min-height: 1.3em;
    line-height: 1.5;
}

.mts-distanz-hint strong {
    color: var(--mts-primary);
    font-weight: 700;
}

/* Distanz-Anzeige (Read-only, ersetzt das frühere Distanz-Select). Zeigt
   die serverseitig aus Klasse + Bogen + Format berechnete Distanz prominent. */
.mts-distanz-display {
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.85rem;
    background: var(--mts-bg-soft, rgba(143, 163, 154, 0.08));
    border: 1px solid var(--mts-border);
    border-radius: var(--mts-radius-sm, 4px);
    line-height: 1.5;
    min-height: 1.3em;
}
.mts-distanz-display strong {
    color: var(--mts-primary);
    font-size: 1.15rem;
    font-weight: 700;
    margin-right: 0.4rem;
}
.mts-distanz-display small {
    color: var(--mts-text-muted);
    font-size: 0.85rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. SCHUSSZETTEL-SEKTIONEN (Wettkampf-Form)
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-sz-section {
    border: 1px solid var(--mts-border-strong);
    border-radius: var(--mts-radius-md);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.25rem;
    background: var(--mts-bg-subtle);
}

.mts-sz-section--hidden {
    display: none;
}

.mts-sz-header {
    margin-bottom: 0.85rem;
}

.mts-sz-header--second {
    border-top: 2px dashed var(--mts-border-strong);
    padding-top: 0.85rem;
    margin-top: 0.4rem;
}

.mts-sz-label {
    font-family: var(--mts-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--mts-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mts-sz2-toggle-wrap {
    margin-bottom: 1rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. VALIDIERUNGS-POOL (Trainer-Bereich)
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-pool-card {
    border-left: 4px solid var(--mts-accent);
    box-shadow: var(--mts-shadow), -4px 0 16px rgba(255, 184, 0, 0.1);
}

.mts-pool-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mts-pool-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
}

.mts-pool-card__name {
    font-family: var(--mts-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mts-text);
    letter-spacing: 0.02em;
}

.mts-pool-card__date {
    color: var(--mts-text-muted);
    font-size: 0.9rem;
}

.mts-pool-card__typ {
    font-weight: 600;
    color: var(--mts-text);
}

.mts-pool-card__waiting {
    flex-shrink: 0;
}

.mts-pool-card__schusszettel {
    border: 1px solid var(--mts-border);
    border-radius: var(--mts-radius-sm);
    background: var(--mts-bg-subtle);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mts-sz-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--mts-border);
}

.mts-sz-row:last-child {
    border-bottom: none;
}

.mts-sz-row__label {
    font-weight: 700;
    color: var(--mts-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 7rem;
}

.mts-sz-row__details {
    flex: 1;
    color: var(--mts-text);
}

.mts-pool-foto-link {
    color: var(--mts-primary);
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--mts-primary);
    border-radius: var(--mts-radius-sm);
    transition: all 0.15s;
    background: rgba(43, 217, 106, 0.05);
}

.mts-pool-foto-link:hover {
    background: var(--mts-primary);
    color: #0E1814;
}

.mts-sz-row__no-foto {
    font-size: 0.82rem;
    color: var(--mts-text-muted);
}

.mts-pool-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    padding-top: 0.85rem;
    border-top: 1px solid var(--mts-border);
}

.mts-pool-form {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.mts-pool-form--reject {
    flex: 1;
    min-width: 240px;
}

.mts-pool-reject-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.mts-pool-kommentar {
    min-height: 3.5rem;
    font-size: 0.9rem;
}

/* Orphan-pending Schusszettel: Aktivität bereits validiert/abgelehnt, aber
   nachträglich hochgeladene Schusszettel brauchen separate Validierung. */
.mts-pool-card--sz-only {
    border-left: 4px solid var(--mts-warning-border);
}

.mts-pool-card__actions--sz {
    padding-top: 0.6rem;
    border-top: 1px dashed var(--mts-border);
    margin-bottom: 0.6rem;
}

.mts-sz-row__status {
    margin-left: 0.5rem;
}

.mts-badge--info {
    background: var(--mts-warning-bg);
    border: 1px solid var(--mts-warning-border);
    color: var(--mts-warning-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. ABGELEHNTE / DANGER CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-card--rejected,
.mts-card--danger {
    border-left: 4px solid var(--mts-error-border);
}

.mts-card__title--rejected,
.mts-card__title--danger {
    color: var(--mts-error-text);
    border-bottom-color: rgba(255, 82, 82, 0.4);
}

.mts-card__title--warning {
    color: var(--mts-warning-text);
    border-bottom-color: rgba(249, 168, 37, 0.4);
}

.mts-rejected-kommentar {
    color: var(--mts-error-text);
    font-style: italic;
    font-size: 0.9rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   21. SAISON-RANGLISTE
   ═══════════════════════════════════════════════════════════════════════════ */
/* Aktueller Schütze: Gradient liegt auf der ganzen <tr> (nicht pro <td>),
   damit der Verlauf zeilenweise durchläuft und die Zellen nicht segmentiert
   wirken. <td>-Backgrounds müssen transparent sein, sonst überschreiben sie
   den Row-Gradient (insbesondere die `.mts-table tr:hover td`-Hover-Regel —
   deshalb der `.mts-table tr.…`-Prefix für höhere Spezifität). */
.mts-table tr.mts-ranking-row--self {
    background: linear-gradient(90deg,
        rgba(255, 184, 0, 0.18) 0%,
        rgba(255, 184, 0, 0.04) 100%);
}
.mts-table tr.mts-ranking-row--self td {
    background-color: transparent;
    font-weight: 700;
    color: var(--mts-text);
}
.mts-table tr.mts-ranking-row--self:hover {
    background: linear-gradient(90deg,
        rgba(255, 184, 0, 0.26) 0%,
        rgba(255, 184, 0, 0.08) 100%);
}
.mts-table tr.mts-ranking-row--self:hover td {
    background-color: transparent;
}

/* ── Inline-Bar in Punkte-Spalte (ersetzt Top-20-Chart) ──────────────────── */
/* Layout: [████   2867] — Bar-Track links füllt verfügbare Breite, Punkte-Wert
   fix rechts. Bar-Width über Modifier-Klasse `--w-{0..100 in 5er-Schritten}`,
   damit kein Inline-Style nötig ist (CSP `style-src 'self'`). */
.mts-rank-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-width: 90px;
}
.mts-rank-bar__track {
    flex: 1 1 auto;
    height: 14px;
    background: rgba(143, 163, 154, 0.10);
    border-radius: 3px;
    overflow: hidden;
    min-width: 0;
}
.mts-rank-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mts-primary) 0%, var(--mts-primary-dark) 100%);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mts-rank-bar__value {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mts-text);
    min-width: 2.8rem;
    text-align: right;
}
/* Width-Modifier (5 %-Schritte, 21 Klassen) */
.mts-rank-bar--w-0   .mts-rank-bar__fill { width: 0%; }
.mts-rank-bar--w-5   .mts-rank-bar__fill { width: 5%; }
.mts-rank-bar--w-10  .mts-rank-bar__fill { width: 10%; }
.mts-rank-bar--w-15  .mts-rank-bar__fill { width: 15%; }
.mts-rank-bar--w-20  .mts-rank-bar__fill { width: 20%; }
.mts-rank-bar--w-25  .mts-rank-bar__fill { width: 25%; }
.mts-rank-bar--w-30  .mts-rank-bar__fill { width: 30%; }
.mts-rank-bar--w-35  .mts-rank-bar__fill { width: 35%; }
.mts-rank-bar--w-40  .mts-rank-bar__fill { width: 40%; }
.mts-rank-bar--w-45  .mts-rank-bar__fill { width: 45%; }
.mts-rank-bar--w-50  .mts-rank-bar__fill { width: 50%; }
.mts-rank-bar--w-55  .mts-rank-bar__fill { width: 55%; }
.mts-rank-bar--w-60  .mts-rank-bar__fill { width: 60%; }
.mts-rank-bar--w-65  .mts-rank-bar__fill { width: 65%; }
.mts-rank-bar--w-70  .mts-rank-bar__fill { width: 70%; }
.mts-rank-bar--w-75  .mts-rank-bar__fill { width: 75%; }
.mts-rank-bar--w-80  .mts-rank-bar__fill { width: 80%; }
.mts-rank-bar--w-85  .mts-rank-bar__fill { width: 85%; }
.mts-rank-bar--w-90  .mts-rank-bar__fill { width: 90%; }
.mts-rank-bar--w-95  .mts-rank-bar__fill { width: 95%; }
.mts-rank-bar--w-100 .mts-rank-bar__fill { width: 100%; }
/* Eigener Schütze: Bar in Gold statt Primary-Grün */
.mts-table tr.mts-ranking-row--self .mts-rank-bar__fill {
    background: linear-gradient(90deg, var(--mts-accent) 0%, var(--mts-accent-bright) 100%);
}

.mts-ranking-self-label {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, var(--mts-accent) 0%, var(--mts-accent-dark) 100%);
    color: #0E1814;
    border-radius: var(--mts-radius-pill);
    padding: 0.15rem 0.55rem;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(255, 184, 0, 0.3);
}

.mts-ranking-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-family: var(--mts-font-display);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mts-ranking-medal--gold {
    background: radial-gradient(circle at 30% 30%, #FFE57F, var(--mts-rank-gold));
    color: #5C4300;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
}

.mts-ranking-medal--silver {
    background: radial-gradient(circle at 30% 30%, #F0F4F8, var(--mts-rank-silver));
    color: #2C2C2C;
}

.mts-ranking-medal--bronze {
    background: radial-gradient(circle at 30% 30%, #F4A06A, var(--mts-rank-bronze));
    color: #FFF;
}

.mts-ranking-col-rang {
    width: 3.5rem;
    text-align: center;
}

.mts-ranking-rang {
    text-align: center;
}

.mts-ranking-col-pkt,
.mts-ranking-pkt {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-family: var(--mts-font-display);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--mts-text);
}

.mts-ranking-pending {
    color: var(--mts-warning-text);
    font-size: 0.88rem;
    font-family: var(--mts-font-body);
    font-weight: 500;
}

.mts-ranking-position-banner {
    background: linear-gradient(135deg,
        rgba(255, 184, 0, 0.12) 0%,
        rgba(255, 184, 0, 0.04) 100%);
    border: 1px solid rgba(255, 184, 0, 0.3);
    border-left: 4px solid var(--mts-accent);
    border-radius: var(--mts-radius-md);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    color: var(--mts-text);
}

.mts-ranking-position-banner strong {
    color: var(--mts-accent);
    font-family: var(--mts-font-display);
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

.mts-ranking-footnote {
    font-size: 0.82rem;
    color: var(--mts-text-muted);
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--mts-border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   22. ADMIN-DASHBOARD (Stats-Grid + Nav-Grid)
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.mts-stat-card {
    background: var(--mts-bg-card);
    border: 1px solid var(--mts-border);
    border-radius: var(--mts-radius-md);
    box-shadow: var(--mts-shadow);
    padding: 1.25rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    position: relative;
    overflow: hidden;
}

.mts-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--mts-primary), var(--mts-accent));
    opacity: 0.6;
}

.mts-stat-card--warn {
    border-top: 3px solid var(--mts-warning-border);
    background: rgba(249, 168, 37, 0.04);
}

.mts-stat-card--warn::before {
    background: var(--mts-warning-border);
    opacity: 1;
}

.mts-stat-card__value {
    font-family: var(--mts-font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--mts-primary);
    line-height: 1;
    letter-spacing: 0.02em;
}

.mts-stat-card--warn .mts-stat-card__value {
    color: var(--mts-warning-text);
}

.mts-stat-card__label {
    font-size: 0.78rem;
    color: var(--mts-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ── Admin-Nav-Grid ───────────────────────────────────────────────────── */
.mts-admin-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.mts-admin-nav-card {
    background: var(--mts-bg-card);
    border: 1px solid var(--mts-border);
    border-radius: var(--mts-radius-md);
    padding: 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: var(--mts-text);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.mts-admin-nav-card:hover {
    border-color: var(--mts-primary);
    background: linear-gradient(135deg,
        var(--mts-bg-card) 0%,
        rgba(43, 217, 106, 0.06) 100%);
    transform: translateY(-2px);
    box-shadow: var(--mts-glow-primary), var(--mts-shadow);
}

.mts-admin-nav-card__icon {
    font-size: 1.7rem;
    margin-bottom: 0.3rem;
    line-height: 1;
}

.mts-admin-nav-card__title {
    font-family: var(--mts-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mts-text);
    letter-spacing: 0.02em;
}

.mts-admin-nav-card:hover .mts-admin-nav-card__title {
    color: var(--mts-primary);
}

.mts-admin-nav-card__desc {
    font-size: 0.82rem;
    color: var(--mts-text-muted);
    line-height: 1.45;
}


/* ═══════════════════════════════════════════════════════════════════════════
   23. TOGGLE-BUTTON (Pill-Form für Ja/Nein-Flips)
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-toggle-btn {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: var(--mts-radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.15s;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--mts-font-body);
    min-height: 32px;
}

.mts-toggle-btn--on {
    background: rgba(43, 217, 106, 0.12);
    color: var(--mts-success-text);
    border-color: rgba(43, 217, 106, 0.4);
}

.mts-toggle-btn--on:hover {
    background: rgba(43, 217, 106, 0.20);
    border-color: var(--mts-primary);
}

.mts-toggle-btn--off {
    background: rgba(143, 163, 154, 0.08);
    color: var(--mts-text-muted);
    border-color: var(--mts-border);
}

.mts-toggle-btn--off:hover {
    background: rgba(143, 163, 154, 0.15);
    color: var(--mts-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   24. LINKS
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-link {
    color: var(--mts-primary);
    text-decoration: underline;
    text-decoration-color: rgba(43, 217, 106, 0.3);
    text-underline-offset: 3px;
    font-size: inherit;
    transition: color 0.15s;
}

.mts-link:hover {
    color: var(--mts-accent);
    text-decoration-color: var(--mts-accent);
}

.mts-link--right { float: right; }


/* ═══════════════════════════════════════════════════════════════════════════
   25. PHASE 2: STREAK + BADGES + PB
   ───────────────────────────────────────────────────────────────────────────
   Hier wird's gaming-y: animierte Flammen, leuchtende Badges, Skill-Tree-
   Anmutung beim Hover.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Streak-Card ──────────────────────────────────────────────────────── */
.mts-card--streak {
    background:
        linear-gradient(135deg, rgba(255, 107, 53, 0.10) 0%, rgba(255, 184, 0, 0.06) 100%),
        var(--mts-bg-card);
    border-color: rgba(255, 107, 53, 0.25);
    position: relative;
}

.mts-card--streak::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at 100% 0%,
        rgba(255, 107, 53, 0.15),
        transparent 60%);
    pointer-events: none;
}

.mts-card--streak .mts-streak-value {
    font-size: 2.2rem;
    margin: 0.5rem 0;
    font-family: var(--mts-font-display);
    line-height: 1;
    color: var(--mts-fire-2);
    text-shadow: 0 0 24px rgba(255, 184, 0, 0.5);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mts-card--streak .mts-streak-value strong {
    font-size: 2.6rem;
    background: linear-gradient(180deg, var(--mts-fire-3) 0%, var(--mts-fire-1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.mts-streak-flame {
    font-size: 2rem;
    margin-right: 0.3rem;
    display: inline-block;
    filter: drop-shadow(0 0 12px var(--mts-fire-1));
    animation: mts-flicker 2.5s ease-in-out infinite;
}

@keyframes mts-flicker {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    25%      { transform: scale(1.08) rotate(2deg); }
    50%      { transform: scale(0.96) rotate(-1deg); }
    75%      { transform: scale(1.05) rotate(1deg); }
}

.mts-streak-broken {
    color: var(--mts-text-muted);
    font-style: italic;
    font-size: 0.92rem;
}

/* ── Badge-Grid (Profil-Kompaktansicht) ───────────────────────────────── */
.mts-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.85rem;
    margin-top: 0.75rem;
}

/* Profil-Vorschau: nur die ersten drei Reihen rendern, der Rest landet
   automatisch in `grid-auto-rows: 0` und wird via overflow geklippt.
   Anzahl der sichtbaren Badges passt sich an die Spaltenanzahl an
   (Desktop ~6 Spalten × 3 Reihen ≈ 18, Mobile ~3 Spalten × 3 Reihen ≈ 9). */
.mts-badge-grid--clamp-3-rows {
    grid-template-rows: repeat(3, max-content);
    grid-auto-rows: 0;
    overflow: hidden;
    /* Hover-Lift der Tiles soll nicht außerhalb der drei Reihen sichtbar
       überstehen — die :hover-translateY rotiert nach oben, das ist okay. */
}

.mts-badge-tile {
    background: linear-gradient(135deg,
        var(--mts-bg-elevated) 0%,
        var(--mts-bg-card) 100%);
    border: 1.5px solid var(--mts-border);
    border-radius: var(--mts-radius-md);
    padding: 1rem 0.6rem;
    text-align: center;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

/* Tile rendert auf der /badges-Seite als <button> für Click-zu-Modal —
   Browser-Defaults für button-Element neutralisieren, damit das Tile wie
   ein normales div aussieht. */
button.mts-badge-tile {
    width: 100%;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
button.mts-badge-tile:focus-visible {
    outline: 2px solid var(--mts-primary);
    outline-offset: 2px;
}

.mts-badge-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%,
        rgba(43, 217, 106, 0.10),
        transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.mts-badge-tile:hover {
    transform: translateY(-3px);
    border-color: var(--mts-primary);
    box-shadow: var(--mts-glow-primary), var(--mts-shadow);
}

.mts-badge-tile:hover::before {
    opacity: 1;
}

.mts-badge-icon {
    font-size: 2.2rem;
    line-height: 1;
    margin: 0 auto 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    position: relative;
    /* Tier-Klasse setzt background + color + box-shadow; ohne Tier zeigen
       die Kategorie-Klassen unten Fallback-Farben an. */
}

/* SVG-Icon im Medaillon: 60 % der Frame-Breite, currentColor = Tier-Textfarbe */
.mts-badge-icon svg {
    width: 60%;
    height: 60%;
    display: block;
}

.mts-badge-cat--meilenstein { color: var(--mts-primary); }
.mts-badge-cat--leistung    { color: var(--mts-accent); }
.mts-badge-cat--engagement  { color: #FF7F40; }

/* ── Tier-Frames: Bronze / Silber / Gold / Platin ────────────────────── */
/* Tier-Klassen kommen NACH den Kategorie-Klassen, damit sie color + bg
   bei kombinierter Verwendung überschreiben (gleiche Spezifität, später
   gewinnt). */
.mts-badge-tier--bronze {
    background: radial-gradient(circle at 32% 28%, #e6b87f 0%, #b07a3d 55%, #6c4516 100%);
    color: #3d2509;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.55),
        inset 0 -1px 2px rgba(0, 0, 0, 0.35),
        0 0 0 2px #d39863,
        0 0 0 3.5px #6c4516,
        0 4px 10px rgba(0, 0, 0, 0.30);
}

.mts-badge-tier--silber {
    background: radial-gradient(circle at 32% 28%, #f7f8fc 0%, #b8b8c2 55%, #6e6e7a 100%);
    color: #2c2c34;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(0, 0, 0, 0.28),
        0 0 0 2px #d4d4dc,
        0 0 0 3.5px #6e6e7a,
        0 4px 10px rgba(0, 0, 0, 0.30);
}

.mts-badge-tier--gold {
    background: radial-gradient(circle at 32% 28%, #fff0b0 0%, #e1ad24 55%, #8b6912 100%);
    color: #4a3608;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.65),
        inset 0 -1px 2px rgba(0, 0, 0, 0.30),
        0 0 0 2px #f3ce5a,
        0 0 0 3.5px #8b6912,
        0 4px 12px rgba(180, 130, 20, 0.40);
}

.mts-badge-tier--platin {
    /* Klar eisig-bläulich (kühler + satter) — hebt sich deutlich vom
       neutralen Silber-Grau ab. Doppel-Glow (innerer Cyan + äußerer Blau)
       gibt den charakteristischen "Diamant-Schimmer". */
    background:
        radial-gradient(circle at 32% 28%, #eaf4ff 0%, #7fb0dc 48%, #2e4d75 100%);
    color: #122340;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.90),
        inset 0 -1px 2px rgba(0, 0, 0, 0.32),
        0 0 0 2px #b3d4ee,
        0 0 0 3.5px #2e4d75,
        0 0 8px rgba(170, 230, 255, 0.55),
        0 0 22px rgba(80, 150, 230, 0.50),
        0 4px 12px rgba(20, 40, 80, 0.35);
}

/* ── Pfeil-Material-Tiers: Holz / Alu / Weiß / Schwarz / Blau / Rot / Purpur ─
   Form + Schattierung identisch zu Bronze/Silber/Gold/Platin oben, nur die
   Farbpalette + currentColor unterscheidet sich. Bei dunklen Hintergründen
   (schwarz/blau/rot/purpur) ist color hell, damit das SVG-Icon lesbar bleibt. */
.mts-badge-tier--holz {
    background: radial-gradient(circle at 32% 28%, #d4ad7a 0%, #8b5a2b 55%, #4a2f12 100%);
    color: #2c1a06;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.50),
        inset 0 -1px 2px rgba(0, 0, 0, 0.40),
        0 0 0 2px #b08458,
        0 0 0 3.5px #4a2f12,
        0 4px 10px rgba(0, 0, 0, 0.30);
}

.mts-badge-tier--alu {
    background: radial-gradient(circle at 32% 28%, #f5f6fa 0%, #b0b3ba 55%, #707380 100%);
    color: #2a2d34;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.70),
        inset 0 -1px 2px rgba(0, 0, 0, 0.30),
        0 0 0 2px #d6d8df,
        0 0 0 3.5px #707380,
        0 4px 10px rgba(0, 0, 0, 0.30);
}

.mts-badge-tier--weiss {
    background: radial-gradient(circle at 32% 28%, #ffffff 0%, #ececf1 55%, #b8b8c0 100%);
    color: #3a3a44;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.95),
        inset 0 -1px 2px rgba(0, 0, 0, 0.20),
        0 0 0 2px #e8e8ee,
        0 0 0 3.5px #b8b8c0,
        0 4px 10px rgba(0, 0, 0, 0.25);
}

.mts-badge-tier--schwarz {
    background: radial-gradient(circle at 32% 28%, #4a4a52 0%, #1d1d22 55%, #050507 100%);
    color: #ececf2;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.20),
        inset 0 -1px 2px rgba(0, 0, 0, 0.50),
        0 0 0 2px #2c2c34,
        0 0 0 3.5px #050507,
        0 4px 10px rgba(0, 0, 0, 0.45);
}

.mts-badge-tier--blau {
    background: radial-gradient(circle at 32% 28%, #5a8fd8 0%, #1f4ea0 55%, #0a2861 100%);
    color: #e6efff;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.40),
        inset 0 -1px 2px rgba(0, 0, 0, 0.40),
        0 0 0 2px #4574b8,
        0 0 0 3.5px #0a2861,
        0 4px 10px rgba(20, 60, 150, 0.40);
}

.mts-badge-tier--rot {
    background: radial-gradient(circle at 32% 28%, #e57272 0%, #b51e1e 55%, #6c0a0a 100%);
    color: #fff0ee;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.40),
        inset 0 -1px 2px rgba(0, 0, 0, 0.40),
        0 0 0 2px #d34a4a,
        0 0 0 3.5px #6c0a0a,
        0 4px 10px rgba(170, 30, 30, 0.40);
}

.mts-badge-tier--purpur {
    background: radial-gradient(circle at 32% 28%, #b890e6 0%, #7c3aa8 55%, #3a1257 100%);
    color: #f4ecff;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.40),
        inset 0 -1px 2px rgba(0, 0, 0, 0.40),
        0 0 0 2px #a574d8,
        0 0 0 3.5px #3a1257,
        0 4px 10px rgba(120, 50, 180, 0.45);
}

/* ── Latest-Badge: rotierende Sonnenstrahlen + Glow ──────────────────────
   Das jeweils zuletzt verdiente Badge bekommt einen gold-gelben
   Strahleneffekt hinter dem Medaillon. Pseudo-Elemente liegen via
   isolation+z-index hinter dem Medaillon-Background, sind aber außerhalb
   des Medaillon-Radius sichtbar. */
.mts-badge-tile--latest .mts-badge-icon {
    isolation: isolate;
    overflow: visible;
}

.mts-badge-tile--latest .mts-badge-icon::before {
    content: '';
    position: absolute;
    /* Strahlen ragen nur ~0.9 rem über den Medaillon-Rand hinaus —
       bleiben damit weit oberhalb des Namens-Bereichs. */
    inset: -0.9rem;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 222, 95, 0.95) 0deg 5deg,
        transparent 5deg 30deg
    );
    -webkit-mask: radial-gradient(circle, transparent 64%, #000 73%, #000 93%, transparent 100%);
            mask: radial-gradient(circle, transparent 64%, #000 73%, #000 93%, transparent 100%);
    z-index: -1;
    pointer-events: none;
    animation: mts-rays-rotate 14s linear infinite;
}

.mts-badge-tile--latest .mts-badge-icon::after {
    content: '';
    position: absolute;
    /* Glow etwas größer als die Strahlen, damit er als weiche Aura hinter
       den Strahlen sichtbar wird — bleibt aber kleiner als zuvor. */
    inset: -1.2rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        transparent 50%,
        rgba(255, 220, 80, 0.50) 65%,
        rgba(255, 200, 60, 0.22) 82%,
        transparent 100%
    );
    z-index: -2;
    pointer-events: none;
    filter: blur(6px);
}

/* Sicherheitsgurt: Badge-Name explizit über die Pseudos heben, damit kein
   Strahl/Glow je den Text überstrahlt — auch falls jemand die Größen oben
   später anpasst. */
.mts-badge-tile--latest .mts-badge-name {
    position: relative;
    z-index: 1;
}

@keyframes mts-rays-rotate {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* Accessibility: bei Reduced-Motion-Präferenz keine Rotation, aber Glow bleibt */
@media (prefers-reduced-motion: reduce) {
    .mts-badge-tile--latest .mts-badge-icon::before {
        animation: none;
    }
}

/* Verdiente Tiles bekommen einen subtilen Hover-Lift, damit das Medaillon
   leicht "anhebt" — verstärkt das Orden-Feeling. */
.mts-badge-tile:not(.mts-badge-tile--locked):hover .mts-badge-icon {
    transform: translateY(-2px) scale(1.04);
    transition: transform 0.18s ease;
}

.mts-badge-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mts-text);
    font-family: var(--mts-font-display);
    letter-spacing: 0.02em;
}

.mts-badge-tile--locked {
    opacity: 0.4;
    filter: grayscale(0.9);
}

.mts-badge-tile--locked:hover {
    opacity: 0.55;
    transform: none;
    box-shadow: var(--mts-shadow);
    border-color: var(--mts-border);
}

.mts-badge-progress {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--mts-text-muted);
}

/* Datum innerhalb der Badge-Progress-Zeile etwas gedimmt — die Achievement-
   Zahl (vor dem Trenner) ist die Hauptinfo, das Datum die Sekundärinfo. */
.mts-badge-progress__date {
    color: var(--mts-text-dim);
    white-space: nowrap;
}

.mts-badges-heading {
    margin: 0 0 1rem;
}

/* ── Badge-Detail-Modal (Click auf Badge-Tile) ─────────────────────────────
   Zentrales Overlay mit blur-Backdrop, ähnlich Mehr-Sheet auf Mobile-Nav.
   Wird per JS in meisterschuetze-badges.js geöffnet/geschlossen. */
.mts-badge-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: mts-modal-fade-in 0.18s ease-out;
}

.mts-badge-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 19, 15, 0.6);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    cursor: pointer;
}

.mts-badge-modal__content {
    position: relative;
    background: linear-gradient(180deg, var(--mts-bg-elevated) 0%, var(--mts-bg-card) 100%);
    border: 1.5px solid var(--mts-border-strong);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
    padding: 1.75rem 1.5rem 1.5rem;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    color: var(--mts-text);
    animation: mts-modal-scale-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.mts-badge-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--mts-text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.15s, color 0.15s;
}
.mts-badge-modal__close:hover,
.mts-badge-modal__close:focus-visible {
    color: var(--mts-text);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.mts-badge-modal__header {
    text-align: center;
    margin-bottom: 1rem;
}
.mts-badge-modal__icon {
    font-size: 3rem;
    line-height: 1;
    margin: 0 auto 0.5rem;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tier-Klassen liefern background + box-shadow + currentColor */
}
.mts-badge-modal__icon svg {
    width: 60%;
    height: 60%;
    display: block;
}
.mts-badge-modal__title {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-family: var(--mts-font-display);
    color: var(--mts-text);
}
.mts-badge-modal__achievement {
    margin: 0;
    font-size: 0.9rem;
    color: var(--mts-text-muted);
}

.mts-badge-modal__description {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.04);
    border-left: 3px solid var(--mts-accent);
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--mts-text);
    text-align: left;
}

.mts-badge-modal__count {
    margin: 0 0 1rem;
    text-align: center;
    font-weight: 700;
    color: var(--mts-primary);
    padding: 0.55rem 0.75rem;
    background: rgba(43, 217, 106, 0.10);
    border: 1px solid rgba(43, 217, 106, 0.25);
    border-radius: 8px;
    font-size: 0.92rem;
}

.mts-badge-modal__holders {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.mts-badge-modal__holder {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    background: rgba(143, 163, 154, 0.06);
    border-radius: 8px;
    font-size: 0.92rem;
}
/* Eigener Schütze bekommt Gold-Akzent (konsistent zur Rangliste/Bestenliste) */
.mts-badge-modal__holder--self {
    background: linear-gradient(90deg, rgba(255, 184, 0, 0.18) 0%, rgba(255, 184, 0, 0.04) 100%);
    border: 1px solid rgba(255, 184, 0, 0.25);
}
.mts-badge-modal__holder-rank {
    font-family: var(--mts-font-display);
    font-weight: 700;
    color: var(--mts-text-muted);
    min-width: 2.2rem;
    font-variant-numeric: tabular-nums;
}
.mts-badge-modal__holder--self .mts-badge-modal__holder-rank {
    color: var(--mts-accent);
}
.mts-badge-modal__holder-name {
    flex: 1;
    color: var(--mts-text);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mts-badge-modal__holder-date {
    color: var(--mts-text-dim);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
}
.mts-badge-modal__empty {
    text-align: center;
    color: var(--mts-text-muted);
    font-style: italic;
    padding: 1.25rem 0.5rem;
}

/* Body-Lock während Modal offen — verhindert Scrollen im Hintergrund */
body.mts-modal-open {
    overflow: hidden;
}

@keyframes mts-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mts-modal-scale-in {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ── Tabs (Pill-Style) ────────────────────────────────────────────────── */
.mts-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.mts-tab {
    padding: 0.55rem 1.15rem;
    border: 1.5px solid var(--mts-border-strong);
    border-radius: var(--mts-radius-pill);
    color: var(--mts-text-muted);
    text-decoration: none;
    font-weight: 600;
    background: var(--mts-bg-card);
    transition: all 0.2s;
    font-size: 0.88rem;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
}

.mts-tab:hover {
    background: var(--mts-bg-elevated);
    color: var(--mts-text);
    border-color: var(--mts-text-muted);
}

.mts-tab--active {
    background: linear-gradient(135deg, var(--mts-primary) 0%, var(--mts-primary-dark) 100%);
    color: #0E1814;
    border-color: var(--mts-primary);
    box-shadow: var(--mts-glow-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   26. CHARTS + HEATMAP
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-chart-container {
    position: relative;
    height: 280px;
    margin-top: 0.6rem;
}

.mts-chart-container--ranking {
    height: 480px;
}

.mts-chart-controls {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.mts-chart-controls .mts-select {
    width: auto;
    margin-bottom: 0;
    min-width: 140px;
}

/* ── Heatmap ──────────────────────────────────────────────────────────── */
/*
 * Aufbau (CSS-Grid):
 *   .mts-heatmap            — Wrapper, --mts-hm-cols (CSS-Var per JS) = Anzahl Wochen
 *     .mts-heatmap__months  — 1 Reihe Monatslabels über dem Zell-Grid
 *     .mts-heatmap__cells   — 7 Reihen × N Wochen-Spalten
 *
 * Beide Sub-Grids teilen die gleiche grid-template-columns-Definition,
 * sodass Labels exakt über ihrer Wochen-Spanne sitzen. Auf Mobile schrumpfen
 * Zellen auf 11px (siehe Media-Query weiter unten).
 */
.mts-heatmap {
    --mts-hm-cell: 14px;
    --mts-hm-gap:  3px;
    --mts-hm-cols: 53;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0.5rem 0;
    overflow-x: auto;
}

.mts-heatmap__months {
    display: grid;
    grid-template-columns: repeat(var(--mts-hm-cols), var(--mts-hm-cell));
    gap: 0 var(--mts-hm-gap);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mts-text-muted);
}

.mts-heatmap-month-label {
    grid-column: var(--col-start) / span var(--col-span);
    white-space: nowrap;
    overflow: hidden;
    padding-left: 1px;
    line-height: 1;
}

.mts-heatmap__cells {
    display: grid;
    grid-template-columns: repeat(var(--mts-hm-cols), var(--mts-hm-cell));
    grid-template-rows: repeat(7, var(--mts-hm-cell));
    grid-auto-flow: column;
    gap: var(--mts-hm-gap);
}

.mts-heatmap-cell {
    background: rgba(143, 163, 154, 0.10);
    border-radius: 3px;
    transition: transform 0.15s;
}

.mts-heatmap-cell--empty {
    background: transparent;
}

.mts-heatmap-cell:hover {
    transform: scale(1.4);
    box-shadow: 0 0 8px currentColor;
    z-index: 1;
}

/* Vertikale Trennlinie am Monatswechsel: 1px-Strich links vor der ersten
   Wochen-Spalte des neuen Monats. margin-left = -gap zieht die Linie in die
   Lücke zwischen den Zellen, damit die Zelle selbst nicht verkleinert wird. */
.mts-heatmap-cell--month-start {
    box-shadow: inset 1px 0 0 0 rgba(143, 163, 154, 0.32);
}

.mts-heatmap-cell--lvl1 { background: rgba(43, 217, 106, 0.25); }
.mts-heatmap-cell--lvl2 { background: rgba(43, 217, 106, 0.45); }
.mts-heatmap-cell--lvl3 { background: rgba(43, 217, 106, 0.7); }
.mts-heatmap-cell--lvl4 {
    background: var(--mts-primary);
    box-shadow: 0 0 6px var(--mts-primary-glow);
}
.mts-heatmap-cell--lvl4.mts-heatmap-cell--month-start {
    box-shadow: 0 0 6px var(--mts-primary-glow), inset 1px 0 0 0 rgba(143, 163, 154, 0.32);
}


/* ═══════════════════════════════════════════════════════════════════════════
   27. PWA: NET-BANNER, INSTALL-BANNER, PENDING-BANNER
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-net-banner {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.6rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.mts-net-banner--offline {
    background: linear-gradient(90deg, #B00020 0%, #8E1A1A 100%);
    color: #FFF;
    box-shadow: 0 4px 12px rgba(176, 0, 32, 0.4);
}

.mts-install-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    background: var(--mts-bg-card);
    border: 1.5px solid var(--mts-primary);
    border-radius: var(--mts-radius-md);
    padding: 1rem 1.1rem;
    box-shadow: var(--mts-shadow-lg), var(--mts-glow-primary);
    z-index: 200;
    text-align: center;
    color: var(--mts-text);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mts-install-banner button {
    margin-left: 0.5rem;
}

.mts-pending-banner {
    background: linear-gradient(135deg, var(--mts-accent) 0%, var(--mts-accent-dark) 100%);
    color: #0E1814;
    padding: 0.75rem 1.1rem;
    border-radius: var(--mts-radius-md);
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 16px rgba(255, 184, 0, 0.3);
    letter-spacing: 0.02em;
    font-size: 0.92rem;
}

.mts-hidden {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   28. SPACING-UTILITIES (CSP-konform, statt inline style="margin-…")
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-mt-075 { margin-top: 0.75rem; }
.mts-mt-1   { margin-top: 1rem; }
.mts-mt-125 { margin-top: 1.25rem; }
.mts-mt-15  { margin-top: 1.5rem; }
.mts-mt-2   { margin-top: 2rem; }
.mts-mb-05  { margin-bottom: 0.5rem; }
.mts-mb-075 { margin-bottom: 0.75rem; }
.mts-mb-1   { margin-bottom: 1rem; }
.mts-mb-125 { margin-bottom: 1.25rem; }
.mts-mb-15  { margin-bottom: 1.5rem; }
.mts-mb-2   { margin-bottom: 2rem; }

.mts-block--mt    { margin-top: 2rem; }
.mts-block--mt-sm { margin-top: 0.75rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   29. INLINE-DETAILS (Korrekturen-Seite, Mini-Dialoge)
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-inline-details {
    display: inline-block;
}

.mts-inline-details > summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
}

.mts-inline-details > summary::-webkit-details-marker {
    display: none;
}

.mts-inline-details__body {
    margin-top: 0.5rem;
    padding: 0.85rem;
    background: var(--mts-bg-subtle);
    border: 1px solid var(--mts-border-strong);
    border-radius: var(--mts-radius-md);
    min-width: 260px;
    color: var(--mts-text);
}

.mts-inline-details__body--danger {
    border-color: rgba(255, 82, 82, 0.4);
    background: rgba(255, 82, 82, 0.04);
}

.mts-inline-details__body--wide {
    max-width: 480px;
}

.mts-inline-details__warning {
    font-size: 0.82rem;
    color: var(--mts-error-text);
    margin: 0 0 0.5rem;
}

.mts-inline-details__warning--lg {
    font-size: 0.88rem;
    color: var(--mts-error-text);
    margin: 0 0 0.75rem;
}

.mts-inline-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--mts-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mts-inline-label--lg {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--mts-text);
}

.mts-activity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.mts-activity-meta {
    font-size: 0.82rem;
    color: var(--mts-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   30. AUDIT-LOG
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-audit-entry {
    margin-bottom: 1.25rem;
    border-left: 3px solid var(--mts-accent);
}

.mts-audit-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.mts-audit-id {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: var(--mts-text-muted);
    font-family: var(--mts-font-mono);
}

.mts-audit-ts {
    font-size: 0.82rem;
    color: var(--mts-text-muted);
    text-align: right;
}

.mts-audit-row {
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
}

.mts-audit-row--begruendung {
    margin-bottom: 0.85rem;
    font-size: 0.88rem;
    color: var(--mts-text);
}

.mts-audit-details {
    margin-bottom: 0.5rem;
}

.mts-audit-details > summary {
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--mts-text-muted);
    user-select: none;
    list-style: none;
    padding: 0.3rem 0;
}

.mts-audit-details > summary:hover {
    color: var(--mts-primary);
}

.mts-audit-details > summary::-webkit-details-marker {
    display: none;
}

.mts-audit-details__body {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    overflow-x: auto;
}

.mts-audit-json {
    background: var(--mts-bg-subtle);
    border: 1px solid var(--mts-border);
    border-radius: var(--mts-radius-sm);
    padding: 0.7rem 0.9rem;
    font-family: var(--mts-font-mono);
    font-size: 0.78rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    color: var(--mts-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   31. PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-pagination {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    align-items: center;
}

.mts-pagination__ellipsis {
    align-self: center;
    padding: 0 0.3rem;
    color: var(--mts-text-muted);
}

.mts-pagination__info {
    flex: 1;
    text-align: center;
    color: var(--mts-text-muted);
    font-size: 0.95rem;
}

/* Filter-Form (z.B. „Meine Schusszettel") */
.mts-filter-form {
    margin-bottom: 1rem;
}

.mts-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.mts-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 140px;
    min-width: 0;
}

.mts-filter-field__label {
    font-size: 0.8rem;
    color: var(--mts-text-muted);
    letter-spacing: 0.02em;
}

.mts-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .mts-filter-field { flex: 1 1 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   32. FORM-AKTIONEN, FORM-ROW, INLINE-FORM
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
}

.mts-form-actions {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

/* Generisches Form-Feld (Label + Eingabe gestapelt) */
.mts-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.mts-form-field label {
    color: var(--mts-text);
}
.mts-form-field small {
    margin-top: 0.2rem;
}

/* Detail-Liste (key/value, z.B. Korrektur-Form Kopf-Card) */
.mts-detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}
.mts-detail-list dt {
    color: var(--mts-text-muted);
    font-size: 0.85rem;
}
.mts-detail-list dd {
    margin: 0;
    color: var(--mts-text);
}
@media (max-width: 480px) {
    .mts-detail-list { grid-template-columns: 1fr; gap: 0.1rem 0; }
    .mts-detail-list dd { margin-bottom: 0.6rem; }
}

/* Tabellenzellen-Aktionen + Meta-Hinweise */
.mts-cell-action {
    margin-top: 0.5rem;
}
.mts-cell-meta {
    margin-top: 0.4rem;
    font-size: 0.85rem;
}

/* Schützen-Korrektur-Hinweis im Pool */
.mts-sz-korrektur {
    margin: 0.4rem 0 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--mts-warning-bg);
    border-left: 3px solid var(--mts-warning-border);
    border-radius: var(--mts-radius-sm, 4px);
    font-size: 0.9rem;
}
.mts-sz-korrektur__text {
    display: block;
    margin-top: 0.2rem;
    font-style: italic;
    color: var(--mts-text);
}

.mts-form--inline {
    display: inline;
}

.mts-form-footer-hint {
    text-align: center;
    font-size: 0.85rem;
    color: var(--mts-text-muted);
    margin-top: 1rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   33. INVITE / DSGVO
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-dsgvo-label {
    display: flex;
    gap: 0.85rem;
    cursor: pointer;
    align-items: flex-start;
    line-height: 1.55;
    padding: 0.6rem 0;
}

.mts-dsgvo-checkbox {
    margin-top: 0.25rem;
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--mts-primary);
}

.mts-dsgvo-text {
    font-size: 0.9rem;
    color: var(--mts-text);
    line-height: 1.5;
}

.mts-error-list {
    margin: 0;
    padding-left: 1.3rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   34. ROW-HIGHLIGHT (aktuelle Saison in Tabellen)
   ═══════════════════════════════════════════════════════════════════════════ */
.mts-row--highlight td {
    background: rgba(255, 184, 0, 0.06);
}


/* ═══════════════════════════════════════════════════════════════════════════
   35. RESPONSIVE — MOBILE BREAKPOINT (≤ 600px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .mts-shell {
        padding: 1rem 0.75rem 6rem;
    }

    .mts-card {
        padding: 1.25rem 1rem;
        margin-bottom: 1rem;
    }

    .mts-nav {
        padding: 0.7rem 0.75rem;
        margin-bottom: 1rem;
    }

    .mts-nav__inner {
        gap: 0.4rem;
    }

    .mts-nav__brand {
        font-size: 1.1rem;
    }

    .mts-nav__link {
        font-size: 0.82rem;
        padding: 0.35rem 0.65rem;
    }

    .mts-table {
        font-size: 0.82rem;
    }

    /* Bleed-Margin auf Mobile droppen — sonst stößt der wrap am Card-Padding
       an und schiebt die Karte über die Viewport-Breite. */
    .mts-table-wrap,
    .mts-table-wrapper {
        margin: 0;
        padding: 0;
    }

    .mts-table th,
    .mts-table td {
        padding: 0.55rem 0.5rem;
    }

    /* Responsive Tabellen — auf Mobile zu Karten-Stack auflösen, damit gar
       nicht erst horizontaler Overflow entsteht. Header verschwindet, jede
       Zeile wird ein Block, jede Zelle eine Key-Value-Reihe (Label kommt aus
       data-label-Attribut). */
    .mts-table--responsive,
    .mts-table--responsive thead,
    .mts-table--responsive tbody,
    .mts-table--responsive tr,
    .mts-table--responsive td {
        display: block;
        width: 100%;
    }
    .mts-table--responsive thead {
        display: none;
    }
    .mts-table--responsive tr {
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--mts-border);
    }
    .mts-table--responsive tr:last-child {
        border-bottom: none;
    }
    .mts-table--responsive tr:hover td {
        background-color: transparent; /* Hover-Bg auf Stack-Layout deaktivieren */
    }
    .mts-table--responsive td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        padding: 0.3rem 0;
        border-bottom: none;
        text-align: right;
    }
    .mts-table--responsive td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--mts-text-muted);
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-align: left;
    }
    /* Bei mehrzeiligen Inhalten (z.B. Typ + Bemerkung, Trainer-Kommentar)
       das Stack-Layout vom flex-row auf flex-column umstellen, damit nichts
       überläuft */
    .mts-table--responsive td:has(br),
    .mts-table--responsive td:has(.mts-rejected-kommentar) {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    /* Bestenliste: Tabelle bleibt klassisch, nur Bemerkungs-Spalte auf
       Mobile ausblenden + leicht engeres Padding/Font, damit alle 4
       verbleibenden Spalten in die Card-Breite passen ohne Scrollen. */
    .mts-table--bestenliste .mts-col--bemerkung {
        display: none;
    }
    .mts-table--bestenliste th,
    .mts-table--bestenliste td {
        padding: 0.45rem 0.35rem;
        font-size: 0.78rem;
    }

    /* Ranking: "davon vorläufig" auf Mobile ausblenden */
    .mts-ranking-col-pending,
    .mts-ranking-table td:nth-child(4) {
        display: none;
    }

    .mts-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .mts-stat-card {
        padding: 1rem 0.6rem;
    }

    .mts-stat-card__value {
        font-size: 2rem;
    }

    .mts-admin-nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .mts-table--schuetzen .mts-cell--email,
    .mts-table--schuetzen th:nth-child(2) {
        display: none;
    }

    .mts-form-row {
        grid-template-columns: 1fr;
    }

    .mts-badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
        gap: 0.6rem;
    }

    .mts-badge-tile {
        padding: 0.85rem 0.5rem;
    }

    .mts-badge-icon {
        font-size: 1.7rem;
    }

    .mts-badge-name {
        font-size: 0.78rem;
    }

    /* Mobile: keine fixe Zellgröße, sondern fluide Spalten — die Heatmap
       füllt 100 % der Karten-Breite. Zellen bleiben quadratisch via
       aspect-ratio. So fitten alle 12 Monate ohne horizontales Scrollen.
       Gap auf 1 px reduziert, damit Zellen nicht zu klein werden. */
    .mts-heatmap {
        --mts-hm-gap: 1px;
        overflow-x: hidden;
    }
    .mts-heatmap__months,
    .mts-heatmap__cells {
        grid-template-columns: repeat(var(--mts-hm-cols), minmax(0, 1fr));
        width: 100%;
    }
    .mts-heatmap__cells {
        grid-template-rows: repeat(7, auto);
    }
    .mts-heatmap-cell {
        aspect-ratio: 1;
        width: auto;
        height: auto;
    }
    .mts-heatmap__months {
        font-size: 0.6rem;
        letter-spacing: 0.04em;
    }

    .mts-chart-container {
        height: 240px;
    }

    .mts-chart-container--ranking {
        height: 380px;
    }

    .mts-install-banner {
        left: 0.5rem;
        right: 0.5rem;
    }

    .mts-profile-header__name {
        font-size: 1.6rem;
    }

    .mts-punkte-display__total {
        font-size: 2.8rem;
    }

    .mts-card--streak .mts-streak-value {
        font-size: 1.8rem;
    }

    .mts-card--streak .mts-streak-value strong {
        font-size: 2.2rem;
    }

    .mts-page-title {
        font-size: 1.6rem;
    }

    .mts-eintrag-card summary {
        padding: 1rem 1.1rem;
    }

    .mts-eintrag-body {
        padding: 1rem 1.1rem 1.25rem;
    }

    .mts-eintrag-title {
        font-size: 1.05rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   36. SCROLLBAR-STYLING (Dark-konsistent)
   ═══════════════════════════════════════════════════════════════════════════ */
body.mts ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.mts ::-webkit-scrollbar-track {
    background: var(--mts-bg-subtle);
}

body.mts ::-webkit-scrollbar-thumb {
    background: var(--mts-border-strong);
    border-radius: 5px;
}

body.mts ::-webkit-scrollbar-thumb:hover {
    background: var(--mts-text-muted);
}

body.mts {
    scrollbar-color: var(--mts-border-strong) var(--mts-bg-subtle);
    scrollbar-width: thin;
}


/* ═══════════════════════════════════════════════════════════════════════════
   37. SELECTION (markierter Text)
   ═══════════════════════════════════════════════════════════════════════════ */
body.mts ::selection {
    background: var(--mts-primary);
    color: #0E1814;
}

/* ── ENDE meisterschuetze.css v2.0 ──────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   meisterschuetze.css — Phase 1.5: NAVIGATION REDESIGN
   ───────────────────────────────────────────────────────────────────────────
   Additives Modul. An das Ende von meisterschuetze.css anhängen oder als
   eigenständige Datei NACH meisterschuetze.css einbinden.

   Was passiert:
   - Mobile (≤ 768px): Top-Bar wird minimal (Brand + Pool-Indicator),
     Bottom-Tabbar fest am unteren Rand mit 4 Tabs + zentralem Eintragen-FAB.
   - Desktop (> 768px): Top-Bar bleibt sichtbar, wird aber kompakter und
     bekommt einen prominenten "Eintragen"-CTA. Bottom-Tabbar ist versteckt.

   Markup-Annahmen:
   - Bestehende <nav class="mts-nav"> bleibt drin (wird auf Mobile reduziert)
   - Neue <nav class="mts-tabbar"> wird einmalig pro Page eingefügt
     (idealerweise als Include _nav_bottom.php nach </div><!-- shell -->)

   Stand: 2026-05-04
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. TOP-BAR ÜBERARBEITUNG (Desktop-fokussiert, Mobile minimal)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Top-Bar wird kompakter, zentrierter, mit klarer Hierarchie */
body.mts .mts-nav {
    /* Glassmorphic bleibt, aber subtiler */
    background:
        linear-gradient(180deg,
            rgba(22, 40, 33, 0.85) 0%,
            rgba(14, 24, 20, 0.75) 100%);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
}

body.mts .mts-nav__inner {
    max-width: 1100px;
    gap: 0.4rem;
}

/* Brand kompakter, Logo-Glow nur dezent */
body.mts .mts-nav__brand {
    font-size: 1.15rem;
    color: var(--mts-text);
    margin-right: auto;
    padding: 0.35rem 0;
    letter-spacing: 0.06em;
    font-weight: 600;
}

body.mts .mts-nav__brand:hover {
    color: var(--mts-primary);
    background: transparent;
}

/* Reguläre Nav-Links: kompakter, weniger Pill-Feeling, mehr "Section-Marker" */
body.mts .mts-nav__link {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: var(--mts-radius-sm);
    color: var(--mts-text-muted);
    background: transparent;
    position: relative;
    /* Underline-Indicator statt voll-gefüllt */
    transition: color 0.18s, background-color 0.18s;
}

body.mts .mts-nav__link:hover {
    color: var(--mts-text);
    background: rgba(43, 217, 106, 0.06);
}

body.mts .mts-nav__link--active {
    color: var(--mts-primary);
    background: transparent;
    font-weight: 600;
}

body.mts .mts-nav__link--active::after {
    content: '';
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -2px;
    height: 2px;
    background: var(--mts-primary);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--mts-primary-glow);
}

/* CTA-Variante für "Eintragen" in der Top-Bar (Desktop) */
body.mts .mts-nav__link--cta {
    background: linear-gradient(135deg, var(--mts-primary) 0%, var(--mts-primary-dark) 100%);
    color: #0E1814;
    font-weight: 700;
    padding: 0.45rem 1rem;
    border-radius: var(--mts-radius-pill);
    margin: 0 0.4rem;
    box-shadow: 0 2px 10px rgba(43, 217, 106, 0.3);
    letter-spacing: 0.02em;
}

body.mts .mts-nav__link--cta:hover {
    background: linear-gradient(135deg, var(--mts-primary-dark) 0%, var(--mts-primary) 100%);
    color: #0E1814;
    box-shadow: 0 4px 14px rgba(43, 217, 106, 0.45);
    transform: translateY(-1px);
}

body.mts .mts-nav__link--cta::after {
    display: none;  /* CTA bekommt kein Underline-Indicator */
}

/* Pool-Counter-Notification (rote Mini-Bubble auf Pool-Link) */
body.mts .mts-nav__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.35rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF5252 0%, #C62828 100%);
    color: #FFF;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    font-family: var(--mts-font-body);
    letter-spacing: 0;
    box-shadow: 0 0 8px rgba(255, 82, 82, 0.5);
    animation: mts-counter-pulse 2.4s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes mts-counter-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 82, 82, 0.5); }
    50%      { box-shadow: 0 0 14px rgba(255, 82, 82, 0.8); }
}

/* Logout-Link wird auf Desktop dezenter */
body.mts .mts-nav__link--logout {
    color: rgba(143, 163, 154, 0.7);
    font-size: 0.78rem;
    margin-left: 0.4rem;
}

body.mts .mts-nav__link--logout:hover {
    color: #FFAAAA;
    background: rgba(255, 82, 82, 0.08);
}

body.mts .mts-nav__link--logout::after {
    display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. BOTTOM-TABBAR (Mobile-First, hidden auf Desktop)
   ═══════════════════════════════════════════════════════════════════════════ */

.mts-tabbar {
    /* Standardmäßig hidden auf Desktop */
    display: none;
}

@media (max-width: 768px) {
    .mts-tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 72px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: rgba(14, 24, 20, 0.92);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border-top: 1px solid rgba(143, 163, 154, 0.12);
        justify-content: space-around;
        align-items: center;
        z-index: 60;
        box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.4);
    }

    /* Body bekommt Bottom-Padding, damit Content nicht von Tabbar überlappt wird */
    body.mts {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
    }

    /* Sticky Top-Nav verliert Sticky-Eigenschaft auf Mobile (zu eng) */
    body.mts .mts-nav {
        position: relative;
        top: auto;
    }
}

/* ── Tabbar-Item ──────────────────────────────────────────────────────── */
/* Wichtig: Höhere Spezifität als die Phase-1-Tabs (Badge-Galerie),
   damit Border/Background/Border-Radius nicht von dort durchschlagen. */
.mts-tabbar .mts-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.5rem 0.25rem;
    color: var(--mts-text-dim);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: color 0.18s;
    position: relative;
    min-height: 72px;
    /* Resets gegen Badge-Tab-Stil aus Phase 1: */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* Tap-Target ist die ganze Höhe der Tabbar */
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.mts-tabbar .mts-tab:hover,
.mts-tabbar .mts-tab:focus-visible {
    color: var(--mts-text-muted);
    background: transparent;
    border-color: transparent;
}

.mts-tabbar .mts-tab--active {
    color: var(--mts-primary);
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Active-Indicator: glow-bar oben am Tab */
.mts-tabbar .mts-tab--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--mts-primary);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 2px 12px var(--mts-primary-glow);
    animation: mts-tab-indicator 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mts-tab-indicator {
    from { width: 0; opacity: 0; }
    to   { width: 32px; opacity: 1; }
}

/* Tab-Icon: 26x26px Container mit SVG */
.mts-tabbar .mts-tab__icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    position: relative;
}

.mts-tabbar .mts-tab__icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.8;
    stroke: currentColor;
    fill: none;
    transition: stroke-width 0.18s;
}

.mts-tabbar .mts-tab--active .mts-tab__icon svg {
    stroke-width: 2.2;
}

/* Active-Tab-Icon kann auch gefüllt werden (für Icons, die das unterstützen) */
.mts-tabbar .mts-tab--active .mts-tab__icon svg.mts-tab__icon-fillable {
    fill: var(--mts-primary-glow);
}

.mts-tabbar .mts-tab__label {
    line-height: 1;
    /* Verhindert Text-Umbruch und schneidet bei Bedarf Ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Tab-Counter (für Pool-Pending) */
.mts-tabbar .mts-tab__counter {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF5252 0%, #C62828 100%);
    color: #FFF;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 0 8px rgba(255, 82, 82, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(14, 24, 20, 0.92);
    animation: mts-counter-pulse 2.4s ease-in-out infinite;
}

/* ── FAB (Eintragen, zentral) ─────────────────────────────────────────── */
.mts-tabbar .mts-tab--fab {
    /* Zentrierter Plus-Button, hebt sich aus der Tabbar */
    position: relative;
    flex: 1 1 0;
    margin-top: -28px;
    z-index: 1;
    /* Nur das Icon ist 60x60, der Tab-Slot bleibt flex-equal mit den anderen */
}

.mts-tabbar .mts-tab--fab .mts-tab__icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--mts-primary) 0%, var(--mts-primary-dark) 100%);
    border-radius: 50%;
    box-shadow:
        0 8px 24px rgba(43, 217, 106, 0.45),
        0 0 0 4px var(--mts-bg);
    transition: transform 0.18s, box-shadow 0.18s;
}

.mts-tabbar .mts-tab--fab:hover .mts-tab__icon,
.mts-tabbar .mts-tab--fab:active .mts-tab__icon {
    transform: scale(1.05);
    box-shadow:
        0 12px 30px rgba(43, 217, 106, 0.55),
        0 0 0 4px var(--mts-bg);
}

.mts-tabbar .mts-tab--fab .mts-tab__icon svg {
    width: 26px;
    height: 26px;
    stroke: #0E1814;
    stroke-width: 2.6;
}

.mts-tabbar .mts-tab--fab .mts-tab__label {
    margin-top: 0.25rem;
    color: var(--mts-text-muted);
    font-size: 0.6rem;
}

.mts-tabbar .mts-tab--fab.mts-tab--active .mts-tab__label {
    color: var(--mts-primary);
}

.mts-tabbar .mts-tab--fab.mts-tab--active::before {
    display: none;  /* FAB hat keinen Indicator-Strich */
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. "MEHR"-BOTTOM-SHEET (für übrige Nav-Items auf Mobile)
   ═══════════════════════════════════════════════════════════════════════════ */

.mts-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 24, 20, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.mts-sheet-overlay--open {
    opacity: 1;
    pointer-events: auto;
}

.mts-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mts-bg-card);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 0.75rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0));
    z-index: 71;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--mts-border-strong);
    max-height: 80vh;
    overflow-y: auto;
}

.mts-sheet--open {
    transform: translateY(0);
}

/* Drag-Handle oben am Sheet (visueller Indikator für "wischbar") */
.mts-sheet::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--mts-border-strong);
    border-radius: 2px;
    margin: 0 auto 1rem;
}

.mts-sheet__title {
    font-family: var(--mts-font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mts-text-muted);
    margin: 0 0 0.85rem;
    font-weight: 600;
}

.mts-sheet__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mts-sheet__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.85rem;
    border-radius: var(--mts-radius-md);
    color: var(--mts-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.15s;
    min-height: 48px;
}

.mts-sheet__item:hover,
.mts-sheet__item:active {
    background: var(--mts-bg-elevated);
}

.mts-sheet__item--active {
    background: rgba(43, 217, 106, 0.10);
    color: var(--mts-primary);
}

.mts-sheet__item-icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.mts-sheet__item-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.mts-sheet__item-label {
    flex: 1;
}

.mts-sheet__item-counter {
    background: linear-gradient(135deg, #FF5252, #C62828);
    color: #FFF;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 0 6px rgba(255, 82, 82, 0.4);
}

.mts-sheet__item--danger {
    color: #FF8A8A;
}

.mts-sheet__item--danger:hover,
.mts-sheet__item--danger:active {
    background: rgba(255, 82, 82, 0.08);
}

.mts-sheet__divider {
    height: 1px;
    background: var(--mts-border);
    margin: 0.5rem 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. RESPONSIVE — was wo sichtbar ist
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bis 768px: Top-Bar wird auf das Nötigste reduziert */
@media (max-width: 768px) {
    /* Reguläre Nav-Links auf Mobile verstecken — die kommen alle in die Tabbar */
    body.mts .mts-nav__link:not(.mts-nav__link--logout):not(.mts-nav__link--mobile-keep) {
        display: none;
    }

    /* Ausnahme: Trainer-Pool darf in der Top-Bar bleiben, weil die Pending-Bubble dort
       auf jeder Page sofort sichtbar ist — egal welcher Tab aktiv ist.
       Markup-Anforderung: <a class="mts-nav__link mts-nav__link--mobile-keep"> */
    body.mts .mts-nav__link--mobile-keep {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.35rem 0.6rem;
        font-size: 0.78rem;
        background: rgba(255, 184, 0, 0.08);
        color: var(--mts-accent);
        border-radius: var(--mts-radius-pill);
    }

    body.mts .mts-nav__link--mobile-keep::after {
        display: none;
    }

    /* Logout-Link auf Mobile verstecken — sitzt im Mehr-Sheet */
    body.mts .mts-nav__link--logout {
        display: none;
    }

    /* Brand wird kleiner */
    body.mts .mts-nav__brand {
        font-size: 1.05rem;
    }

    /* Top-Bar Padding reduziert */
    body.mts .mts-nav {
        padding: 0.6rem 1rem;
        margin-bottom: 1rem;
    }
}

/* Ab 769px: Tabbar versteckt, alle Links wieder sichtbar in Top-Bar */
@media (min-width: 769px) {
    .mts-tabbar { display: none; }
    .mts-sheet, .mts-sheet-overlay { display: none; }

    /* Sheet-only Items (z.B. Bestenliste, Einstellungen) sind auch in der Top-Bar */
    body.mts .mts-nav__link {
        display: inline-flex;
    }

    body.mts .mts-nav__link--mobile-keep {
        /* Auf Desktop normaler Link, kein Akzent-Hintergrund */
        background: transparent;
        color: var(--mts-text-muted);
    }

    body.mts .mts-nav__link--mobile-keep:hover {
        color: var(--mts-text);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. ROLE-BASED VARIANTS (Body-Class kontrolliert sichtbare Tabs)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Default = Schütze: Pool-Tab + Admin-Tab versteckt */
.mts-tab[data-role="trainer"],
.mts-tab[data-role="admin"] {
    display: none;
}

/* Body-Class .mts-role-trainer: Trainer-spezifische Tabs zeigen */
body.mts.mts-role-trainer .mts-tab[data-role="trainer"] {
    display: flex;
}

/* Body-Class .mts-role-admin: Admin-spezifische Tabs zeigen
   + Reorder via flex-order, sodass Eintragen-FAB visuell VOR dem Admin-Tab steht.
   Visuelle Reihenfolge in Admin-Rolle: Profil | Eintragen | Admin | Mehr.
   Profil (order 0, DOM 1) und FAB (order 0, DOM 5) bleiben Default; Admin und
   Mehr bekommen explizit höhere Order, damit sie nach dem FAB einsortiert werden
   und Mehr trotz Admin-Verschiebung am rechten Rand bleibt. */
body.mts.mts-role-admin .mts-tab[data-role="admin"] {
    display: flex;
    order: 1;
}
body.mts.mts-role-admin .mts-tabbar #mts-tab-more {
    order: 2;
}

/* Wenn Trainer ODER Admin: Badges-Tab in Tabbar verstecken (kommt ins Mehr-Sheet),
   damit die Tabbar bei 5 Slots bleibt. Schütze: Badges bleibt in der Tabbar. */
body.mts.mts-role-trainer .mts-tab[data-role="schuetze-only"],
body.mts.mts-role-admin .mts-tab[data-role="schuetze-only"] {
    display: none;
}

/* Selbiges für Sheet-Items: nur in passender Rolle anzeigen */
.mts-sheet__item[data-role="trainer"],
.mts-sheet__item[data-role="admin"] {
    display: none;
}

body.mts.mts-role-trainer .mts-sheet__item[data-role="trainer"] {
    display: flex;
}

body.mts.mts-role-admin .mts-sheet__item[data-role="admin"] {
    display: flex;
}

/* Badges-Sheet-Item nur für Trainer/Admin (Schütze hat Badges in der Tabbar) */
.mts-sheet__item[data-role="not-schuetze"] {
    display: none;
}

body.mts.mts-role-trainer .mts-sheet__item[data-role="not-schuetze"],
body.mts.mts-role-admin .mts-sheet__item[data-role="not-schuetze"] {
    display: flex;
}

/* ── ENDE Phase 1.5 Navigation ───────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════════
   Phase 1.6: SUB-NAVIGATION (Sekundäre Navigation, z.B. Admin-Bereich)
   ───────────────────────────────────────────────────────────────────────────
   Eine schmalere, scrollbare Pill-Leiste UNTER der Haupt-Top-Bar. Wird in
   Bereichen verwendet, die mehrere zusammengehörige Sub-Pages haben:
     - Admin-Bereich: Übersicht / Korrekturen / Audit-Log / Saisons /
                       Schützen / Einladen / Theme
   Auf Mobile horizontal scrollbar (no-wrap), auf Desktop wickelt es um.

   Markup-Pattern:
     <nav class="mts-subnav" aria-label="Admin-Unterbereiche">
       <div class="mts-subnav__inner">
         <a href="…" class="mts-subnav__link mts-subnav__link--active">Übersicht</a>
         <a href="…" class="mts-subnav__link">Korrekturen</a>
         …
       </div>
     </nav>
   ═══════════════════════════════════════════════════════════════════════════ */

.mts-subnav {
    background: var(--mts-bg-subtle);
    border-bottom: 1px solid var(--mts-border);
    margin-top: -1.5rem;  /* zieht es direkt unter die Top-Bar */
    margin-bottom: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* Firefox */
}

.mts-subnav::-webkit-scrollbar {
    display: none;
}

.mts-subnav__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.6rem 1rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: nowrap;  /* horizontaler Scroll auf Mobile */
    white-space: nowrap;
}

.mts-subnav__link {
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    border-radius: var(--mts-radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mts-text-muted);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.15s;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.mts-subnav__link:hover {
    color: var(--mts-text);
    background: var(--mts-bg-elevated);
    border-color: var(--mts-border);
}

.mts-subnav__link--active {
    color: var(--mts-primary);
    background: rgba(43, 217, 106, 0.1);
    border-color: rgba(43, 217, 106, 0.3);
    font-weight: 700;
}

.mts-subnav__link--active:hover {
    color: var(--mts-primary);
    background: rgba(43, 217, 106, 0.15);
}

/* "Zurück"-Variante (z.B. "← Admin-Übersicht") */
.mts-subnav__back {
    flex-shrink: 0;
    padding: 0.4rem 0.7rem;
    color: var(--mts-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    margin-right: 0.4rem;
    border-right: 1px solid var(--mts-border);
    padding-right: 0.85rem;
    transition: color 0.15s;
}

.mts-subnav__back:hover {
    color: var(--mts-primary);
}

/* Mobile: Subnav ausblenden — Navigation läuft dort über die Bottom-Tabbar.
   Breakpoint deckungsgleich mit .mts-tabbar (siehe oben), damit kein Gap entsteht. */
@media (max-width: 768px) {
    .mts-subnav {
        display: none;
    }
}

/* ── ENDE Phase 1.6 Sub-Navigation ─────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────
   Ewige Bestenliste — Filter-Bar + gruppierte Karten + Gender-Badges
   ───────────────────────────────────────────────────────────────────── */

.mts-bestenliste-filter {
    background: var(--mts-bg-card);
    border: 1px solid var(--mts-border);
    border-radius: var(--mts-radius-md);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.mts-bestenliste-filter__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.mts-bestenliste-filter__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.mts-bestenliste-filter__label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mts-text-muted);
}

.mts-bestenliste-filter__select {
    width: 100%;
}

.mts-bestenliste-filter__actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.mts-bestenliste-summary {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: var(--mts-text-muted);
    padding: 0.5rem 0.8rem;
    border-left: 3px solid var(--mts-accent);
    background: rgba(255, 184, 0, 0.06);
    border-radius: 0 var(--mts-radius-sm) var(--mts-radius-sm) 0;
}

.mts-bestenliste-empty {
    text-align: center;
    padding: 2rem 1.5rem;
}

/* ── Klassen-Sektion ──────────────────────────────────────────────────── */

.mts-bestenliste-class {
    margin-bottom: 2rem;
}

.mts-bestenliste-class__title {
    font-family: var(--mts-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mts-text);
    margin: 0 0 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--mts-border);
    letter-spacing: 0.02em;
}

.mts-bestenliste-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
    gap: 1rem;
}

/* ── Einzelkarte pro (Klasse × Bogen × Format) ────────────────────────── */

.mts-bestenliste-card {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mts-bestenliste-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mts-bestenliste-card__bow {
    font-family: var(--mts-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mts-text);
    margin: 0;
    letter-spacing: 0.02em;
}

.mts-bestenliste-card__fmt {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: var(--mts-radius-pill);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mts-bestenliste-card__fmt--halle {
    background: rgba(78, 168, 222, 0.12);
    color: #2c7fb8;
    border: 1px solid rgba(78, 168, 222, 0.28);
}

.mts-bestenliste-card__fmt--aussen {
    background: rgba(108, 168, 78, 0.14);
    color: #4a7a36;
    border: 1px solid rgba(108, 168, 78, 0.32);
}

.mts-bestenliste-name {
    font-weight: 600;
    color: var(--mts-text);
}

.mts-bestenliste-col-datum {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--mts-text-muted);
    font-size: 0.92rem;
}

.mts-ranking-rang-num {
    display: inline-block;
    width: 1.5rem;
    text-align: center;
    color: var(--mts-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Gender-Badge ─────────────────────────────────────────────────────── */

.mts-gender-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.4rem;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: lowercase;
    line-height: 1;
    vertical-align: middle;
    border: 1px solid transparent;
}

.mts-gender-badge--m {
    background: rgba(78, 130, 222, 0.15);
    color: #3a6dc4;
    border-color: rgba(78, 130, 222, 0.35);
}

.mts-gender-badge--w {
    background: rgba(212, 96, 156, 0.15);
    color: #b14a82;
    border-color: rgba(212, 96, 156, 0.35);
}

.mts-gender-badge--d {
    background: rgba(140, 102, 200, 0.15);
    color: #7050b0;
    border-color: rgba(140, 102, 200, 0.35);
}

/* ── Mobile: Filter-Bar 2-spaltig statt 4-spaltig ─────────────────────── */
@media (max-width: 768px) {
    .mts-bestenliste-filter__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .mts-bestenliste-filter__row {
        grid-template-columns: 1fr;
    }
    .mts-bestenliste-card {
        padding: 0.85rem 0.6rem 0.95rem;
    }
    .mts-bestenliste-class__title {
        font-size: 1.2rem;
    }
    .mts-bestenliste-col-datum {
        font-size: 0.82rem;
    }
}

/* ── Bestenliste-Tabelle: fixiertes Layout für identisches Alignment ─────
   Auto-Layout würde Spaltenbreiten je nach Bemerkungs-Länge unterschiedlich
   verteilen — Summe/Datum würden zwischen Karten verschoben aussehen. Mit
   table-layout:fixed + expliziten Spaltenbreiten ist jede Karte pixelgleich. */

.mts-table--bestenliste {
    table-layout: fixed;
}

/* Spalte 1: # (Rang) — fix, center */
.mts-table--bestenliste th:nth-child(1),
.mts-table--bestenliste td:nth-child(1) {
    width: 3.5rem;
    text-align: center;
}

/* Spalte 2: Schütze — auto, left, kann Gender-Badge + Self-Label tragen */
.mts-table--bestenliste th:nth-child(2),
.mts-table--bestenliste td:nth-child(2) {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Spalte 3: Summe — fix, right, tabular */
.mts-table--bestenliste th:nth-child(3),
.mts-table--bestenliste td:nth-child(3) {
    width: 5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Spalte 4: Datum — fix, right (rechtsbündig damit der Punkt vor dem Datum
   genau unter der Punkte-Spalte sitzt), nowrap */
.mts-table--bestenliste th:nth-child(4),
.mts-table--bestenliste td:nth-child(4) {
    width: 6.5rem;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Spalte 5: Bemerkung — flexibel (rest), ellipsis bei zu langen Texten */
.mts-table--bestenliste th:nth-child(5),
.mts-table--bestenliste td:nth-child(5) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile: Bemerkung verschwindet (siehe Mobile-Block oben). Restliche
   Spalten neu dimensionieren damit alle 4 in die Card-Breite passen. */
@media (max-width: 768px) {
    .mts-table--bestenliste th:nth-child(1),
    .mts-table--bestenliste td:nth-child(1) {
        width: 2.6rem;
    }
    .mts-table--bestenliste th:nth-child(3),
    .mts-table--bestenliste td:nth-child(3) {
        width: 4rem;
    }
    .mts-table--bestenliste th:nth-child(4),
    .mts-table--bestenliste td:nth-child(4) {
        width: 5.4rem;
    }
}

/* ── ENDE Ewige Bestenliste ───────────────────────────────────────── */