.lb-table td.col-rank .medal{ margin-right:.25rem; font-size:1rem; vertical-align:baseline; }
.lb-table tr.is-me{ outline: 2px solid var(--secondary); outline-offset: -2px; background: color-mix(in srgb, var(--secondary) 12%, transparent); }
body.dark .lb-table tr.is-me{ background: color-mix(in srgb, var(--secondary) 22%, transparent); }
.lb-table td.col-user .lb-stats{ margin-top:.25rem; display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.lb-table td.col-user .lb-stat{ font-size:.68rem; font-weight:600; letter-spacing:.3px; color:#4b5563; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:999px; padding:.22rem .5rem; }
body.dark .lb-table td.col-user .lb-stat{ color:#cbd5df; background:#1f2327; border-color:#2b3137; }
/* ==========================================================================
   TEAMNIS CSS STYLESHEET
   Strukturiert und organisiert für bessere Wartbarkeit
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLEN & ROOT EINSTELLUNGEN
   ========================================================================== */
:root { 
    --primary:#0d6efd; 
    --secondary:#198754; 
    /* Neutral surfaces for panels/menus */
    --panel-bg:#ffffff;
    --panel-fg:#111827;
    --panel-border:#e5e7eb;
}

/* ---------- Cookie Bar ---------- */
.tn-cookiebar{ position:fixed; left:0; right:0; bottom:0; z-index:1000; background:rgba(20,20,20,.96); color:#fff; box-shadow:0 -4px 20px rgba(0,0,0,.25); }
.tn-cookiebar__inner{ max-width:1280px; margin:0 auto; padding:.9rem 1rem; display:flex; gap:.9rem; align-items:center; justify-content:space-between; }
.tn-cookiebar__text{ font-size:.95rem; line-height:1.35; }
.tn-cookiebar__text a{ color:#b3e5ff; text-decoration:underline; }
.tn-cookiebar__actions .btn{ background:var(--primary-safe); color:var(--on-primary-safe); border:0; padding:.5rem .9rem; border-radius:8px; cursor:pointer; }
.tn-cookiebar__actions .btn:hover{ filter:brightness(1.06); }

/* ==========================================================================
   2. BASIS & RESET STYLES
   ========================================================================== */

/* Basis Body Styles */
html { 
    height:100%;
    background:#f5f7fa; /* fallback for when body is shorter than viewport */
}

body { 
    font-family: system-ui, Arial, sans-serif; 
    margin:0; 
    background:#f5f7fa; 
    min-height:100dvh; /* cover full viewport to avoid white strip at bottom */
    color:#222; 
}

/* Dark Mode - Body */
body.dark { 
    background:#121212; 
    color:#ddd; 
}
/* Dark Mode surface tokens */
body.dark { 
    --panel-bg:#1f2327; 
    --panel-fg:#e5e7eb; 
    --panel-border:#2b3137; 
}

/* Scroll-Lock wenn Navigation offen ist */
body.nav-open { 
    overflow: hidden; 
}

/* ==========================================================================
   3. TYPOGRAFIE & LINKS
   ========================================================================== */

/* Links - Allgemein */
a { 
    color: var(--link-color, var(--primary)); 
    text-decoration:none; 
}

a:hover, 
a:focus { 
    text-decoration:underline; 
    filter:brightness(1.15); 
}

/* Links - Dark Mode */
body.dark a { 
    color: var(--link-color, #9bbcff); 
}

/* Prefer modern formats; TTF kept as fallback */
@font-face { 
    font-family:'TeamnisBrand'; 
    font-style:italic; 
    font-weight:700; 
    font-display:swap; 
    src:
        url('../teamnis-brand/font/Roboto-BoldCondensedItalic.woff2') format('woff2'),
        url('../teamnis-brand/font/Roboto-BoldCondensedItalic.woff') format('woff'),
        url('../teamnis-brand/font/Roboto-BoldCondensedItalic.ttf') format('truetype');
}
.tn-brand { font-family:'TeamnisBrand','Roboto Condensed',system-ui,Arial,sans-serif; font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:.5px; line-height:1; display:inline-block; color:#000; }
body.dark .tn-brand { color:#fff; }

/* Aktive Navigation Links */
nav a.active { 
    text-decoration:underline; 
}

#mainNav a.active { 
    text-decoration: underline; 
}

/* ==========================================================================
   4. LAYOUT CONTAINER
   ========================================================================== */

.container { 
    max-width:1000px; 
    margin:1rem auto; 
    padding:0 1rem; 
}
/* Allow wider container when registration page is present */
.container:has(.reg-page){
    max-width:1040px;
}

/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */

/* ---------- Site Header ---------- */
.site-header { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    background:var(--primary); 
    color:#fff; 
    padding:0.5rem 1rem; 
    gap:1.25rem; 
    position: relative;
}

.site-header a { 
    color:#fff; 
}

.site-header a,
.site-header button.theme-toggle {
    color: #fff;
    background: none;
    border: 0;
    margin-right: 1rem;
    font: inherit;
    cursor: pointer;
}

.site-header nav a:last-child,
.site-header .nav-menu .nav-list > li:last-child { 
    margin-right: 0; 
}

/* Logo */
.logo { 
    display:flex; 
    align-items:center; 
    gap:.5rem; 
    font-weight:bold; 
}

.site-header .logo { 
    flex:0 0 auto; 
}

/* ---------- Navigation Menu ---------- */
.site-header .nav-menu { 
    flex:1 1 auto; 
    min-width:0; 
}

.nav-menu { 
    align-items: center; 
}

/* Navigation Liste */
.nav-list { 
    list-style:none; 
    margin:0; 
    padding:0; 
    display:flex; 
    flex-direction:row; 
    align-items:center; 
    gap:1rem; 
    flex-wrap:nowrap; 
    overflow-x:auto; 
    scrollbar-width:none; 
}

.nav-list::-webkit-scrollbar { 
    display:none; 
}

.nav-list > li { 
    flex:0 0 auto; 
    display: block; 
}

/* Burger Button (Mobile) */
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

/* Theme Toggle & Navigation Buttons */
.site-header .nav-toggle,
.site-header .theme-toggle { 
    background:none; 
    border:0; 
    padding:.25rem .4rem; 
    color:#fff; 
    font-size:1.1rem; 
    line-height:1; 
}

.site-header .theme-toggle { 
    font-size:1rem; 
}

.site-header .nav-toggle:hover,
.site-header .theme-toggle:hover { 
    opacity:.8; 
}

/* ---------- Alternative Navigation (tn-nav) ---------- */
.tn-nav { 
    --nav-bg:var(--primary); 
    --nav-color:#fff; 
    background:var(--nav-bg); 
    color:var(--nav-color); 
    padding:.55rem 1.1rem; 
}

.tn-nav__inner { 
    max-width:1280px; 
    margin:0 auto; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:1.4rem; 
    position:relative; 
}

.tn-nav__inner .tn-nav__spacer { 
    display:none; 
}

.tn-nav__brand { 
    display:flex; 
    align-items:center; 
    gap:.6rem; 
    font-weight:600; 
    font-size:1.05rem; 
}

.tn-nav__spacer { 
    flex:1 1 auto; 
}

.tn-nav__toggle { 
    background:none; 
    border:0; 
    color:var(--nav-color); 
    font-size:1.55rem; 
    line-height:1; 
    cursor:pointer; 
    display:none; 
    padding:.25rem .45rem; 
    border-radius:6px; 
}

.tn-nav__toggle:focus-visible { 
    outline:2px solid #fff; 
    outline-offset:2px; 
}

.tn-nav__menu { 
    margin:0; 
    padding:0; 
}

.tn-nav__list { 
    list-style:none; 
    display:flex; 
    gap:1rem; 
    margin:0; 
    padding:0; 
    align-items:center; 
}

.tn-nav__list > li { 
    position:relative; 
}

.tn-nav__list a, 
.tn-nav__list button { 
    background:none; 
    border:0; 
    color:var(--nav-color); 
    font:inherit; 
    cursor:pointer; 
    text-decoration:none; 
    padding:.45rem .55rem; 
    border-radius:6px; 
    display:inline-flex; 
    align-items:center; 
    gap:.35rem; 
}

.tn-nav__list a:hover, 
.tn-nav__list button:hover { 
    background:rgba(255,255,255,.15); 
    text-decoration:none; 
}

.tn-nav__list a:focus-visible, 
.tn-nav__list button:focus-visible { 
    outline:2px solid #fff; 
    outline-offset:2px; 
}

.tn-nav__list a.active { 
    background:rgba(255,255,255,.22); 
}

/* Light mode with very bright primary: ensure active link stays visible */
body:not(.dark) .tn-nav[style*="--nav-color: #000000"] .tn-nav__list a.active,
body:not(.dark) .tn-nav .tn-nav__list a.active:is(.on-light){
    /* fallback highlight for light headers */
    background:rgba(0,0,0,.12);
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */

.site-footer { 
    text-align:center; 
    padding:1rem; 
    margin-top:2rem; 
    background:#eee; 
}

/* tiny tennis ball icon next to brand in footer */
.site-footer .brand-footer-icon{ 
    width:1.1em; 
    height:1.1em; 
    vertical-align:-0.12em; /* subtle raise to sit on text baseline */
    margin:0 .35rem; 
    border-radius:50%; 
}

body.dark .site-footer { 
    background:#1e1e1e; 
}

/* Quickmatch contact success + tip */
.contact-success{ 
    display:inline-block; 
    margin:.4rem 0 .6rem; 
    padding:.25rem .5rem; 
    border:1px solid #9dd4ff; 
    background:linear-gradient(135deg,#e7f6ff,#ffffff); 
    color:#0b4f74; 
    border-radius:8px; 
    font-size:.78rem; 
    font-weight:600; 
}
body.dark .contact-success{ 
    border-color:#265a73; 
    background:linear-gradient(135deg,#132a36,#1e1f22); 
    color:#a7d8ff; 
}
.contact-tip{ 
    font-size:.8rem; 
    opacity:.85; 
    margin:.4rem 0 0; 
}
.wa-link{ display:inline-block; margin-left:.45rem; font-weight:600; color:#128C7E; text-decoration:none; border:1px solid rgba(18,140,126,.25); padding:.1rem .35rem; border-radius:6px; font-size:.72rem; line-height:1; }
.wa-link .wa-ico{ width:1em; height:1em; vertical-align:-0.15em; margin-right:.25rem; }
body.dark .wa-link{ color:#25D366; border-color:rgba(37,211,102,.25); }
 .tel-link{ color:inherit; text-decoration:underline; }

/* ==========================================================================
   7. FORMULARE & EINGABEFELDER
   ========================================================================== */

/* ---------- Form Labels ---------- */
form label { 
    display:block; 
    margin:.5rem 0; 
}

/* ---------- Input Fields - Basis ---------- */
input[type=text], 
input[type=password], 
input[type=email], 
input[type=number], 
input[type=tel], 
input:not([type]), 
select, 
textarea { 
    width:100%; 
    max-width:100%;
    box-sizing:border-box; 
    padding:.5rem .65rem; 
    background:#fff; 
    color:#222; 
    border:1px solid #c3c9d1; 
    border-radius:8px; 
    line-height:1.25; 
    font-size:.95rem; 
    transition:border-color .15s, background .15s, box-shadow .15s; 
}

/* Input Fields - Focus State */
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
input[type=date]:focus, 
input[type=tel]:focus, 
input:not([type]):focus, 
select:focus, 
textarea:focus { 
    outline:none; 
    border-color:var(--primary); 
    background:#fff; 
    box-shadow:0 0 0 2px rgba(13,110,253,.18); 
}

/* Input Fields - Dark Mode */
body.dark input[type=text], 
body.dark input[type=password], 
body.dark input[type=email], 
body.dark input[type=number], 
body.dark input[type=date], 
body.dark input[type=tel], 
body.dark input:not([type]), 
body.dark select, 
body.dark textarea { 
    background:#262b30; 
    color:#e2e6eb; 
    border-color:#3a4047; 
}

body.dark input[type=text]:focus, 
body.dark input[type=password]:focus, 
body.dark input[type=email]:focus, 
body.dark input[type=number]:focus, 
body.dark input[type=date]:focus, 
body.dark input[type=tel]:focus, 
body.dark input:not([type]):focus, 
body.dark select:focus, 
body.dark textarea:focus { 
    box-shadow:0 0 0 2px rgba(13,110,253,.35); 
}

/* Placeholder Styles */
input::placeholder, 
textarea::placeholder { 
    color:#6b7780; 
}

body.dark input::placeholder, 
body.dark textarea::placeholder { 
    color:#7f8a93; 
}

/* ---------- Form Layouts ---------- */
.form-row2 { 
    display:flex; 
    gap:1rem; 
    flex-wrap:wrap; 
}

.form-row2 > label { 
    flex:1 1 140px; 
}

/* Hint Text */
.hint { 
    font-size:.7rem; 
    color:#666; 
}

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */

/* Basis Button */
button { 
    background:var(--secondary); 
    color:#fff; 
    border:none; 
    padding:.5rem 1rem; 
    cursor:pointer; 
    border-radius:4px; 
    font-weight:600; 
    letter-spacing:.5px; 
}
/* Large buttons for primary actions */
.btn-lg { padding:.7rem 1.2rem; font-size:1.02rem; }

button:hover { 
    opacity:.9; 
}

button[disabled] { 
    opacity:.6; 
    cursor:not-allowed; 
}

/* Button Varianten */
.btn, a.btn { display:inline-block; background:var(--secondary); color:#fff; border:none; padding:.5rem 1rem; border-radius:8px; font-weight:700; letter-spacing:.4px; text-decoration:none; cursor:pointer }
.primary { background:var(--primary-safe, var(--primary)); color:var(--on-primary-safe, #fff); }

.btn-secondary { 
    background:#475058; 
}

.btn-link { 
    font-size:.8rem; 
    margin-left:.6rem; 
}

.primary-gradient { background:linear-gradient(135deg,var(--primary-safe, var(--primary)),var(--secondary)); color:var(--on-primary-safe, #fff); }

/* Mini Button */
.mini-btn { 
    background:#e2e8f0; 
    color:#223; 
    border:1px solid #c2c9d2; 
    border-radius:8px; 
    font-size:.62rem; 
    padding:.42rem .65rem; 
    cursor:pointer; 
    font-weight:600; 
    letter-spacing:.5px; 
}

.mini-btn:hover { 
    background:#d7dee7; 
}

body.dark .mini-btn { 
    background:#2e343a; 
    border-color:#3d444c; 
    color:#d5dae0; 
}

body.dark .mini-btn:hover { 
    background:#384047; 
}

/* Mini Add Button (Calendar) */
.mini-add { 
    background:var(--primary-safe, var(--primary)); 
    color:var(--on-primary-safe, #fff); 
    border:none; 
    border-radius:6px; 
    font-size:.7rem; 
    padding:.25rem .45rem; 
    cursor:pointer; 
    box-shadow:0 2px 4px rgba(0,0,0,.15); 
}

.mini-add:hover { 
    filter:brightness(1.05); 
}

.mini-add:active { 
    transform:translateY(1px); 
}

/* ==========================================================================
   9. AUTHENTICATION KOMPONENTEN
   ========================================================================== */

/* ---------- Auth Wrapper ---------- */
.auth-wrapper { 
    max-width:720px; 
    margin:2.2rem auto 3.5rem; 
    padding:0 1rem; 
}

.auth-wrapper--narrow { 
    max-width:440px; 
}

.auth-wrapper--wide { 
    max-width:760px; 
}

/* ---------- Auth Card ---------- */
.auth-card { 
    max-width:460px; 
    margin:2.2rem auto; 
    padding:2rem 2.2rem 2.1rem; 
    background:#fff; 
    border:1px solid #d8dde2; 
    border-radius:22px; 
    box-shadow:0 4px 14px rgba(0,0,0,.06); 
    display:flex; 
    flex-direction:column; 
    gap:1rem; 
    position:relative; 
    overflow:hidden; 
}

body.dark .auth-card { 
    background:#1e1f22; 
    border-color:#2c2f33; 
    box-shadow:0 4px 18px -2px rgba(0,0,0,.7); 
}

/* Auth Card Effects */
.auth-card__fx { 
    position:absolute; 
    inset:0; 
    background:radial-gradient(circle at 80% 18%,rgba(0,0,0,.05),transparent 60%); 
    pointer-events:none; 
}

body.dark .auth-card__fx { 
    background:radial-gradient(circle at 75% 20%,rgba(255,255,255,.05),transparent 60%); 
}

/* Auth Card Headings */
.auth-card h1, 
.auth-card h2 { 
    margin:0 0 .5rem; 
    font-size:1.4rem; 
    font-weight:600; 
}

body.dark .auth-card h1, 
body.dark .auth-card h2 { 
    color:#fff; 
}

/* Auth Card Actions */
.auth-card .actions { 
    display:flex; 
    gap:.75rem; 
    align-items:center; 
    flex-wrap:wrap; 
}

/* Auth Card Input Override */
.auth-card input[type=text],
.auth-card input[type=password],
.auth-card input[type=email],
.auth-card input[type=number],
.auth-card select,
.auth-card textarea { 
    max-width:100% !important; 
}

/* Register card: unify input background in light mode (override global #fff) */
.reg-page .auth-card--register input[type=text],
.reg-page .auth-card--register input[type=password],
.reg-page .auth-card--register input[type=email],
.reg-page .auth-card--register input[type=number],
.reg-page .auth-card--register input[type=date],
.reg-page .auth-card--register input[type=tel],
.reg-page .auth-card--register select,
.reg-page .auth-card--register textarea {
    background:#f5f8fa;
    border:1px solid #c3c9d1;
    border-radius:8px;
    color:#222;
    padding:.5rem .65rem;
}
/* Dark mode: override the above to use dark surfaces for contrast */
body.dark .reg-page .auth-card--register input[type=text],
body.dark .reg-page .auth-card--register input[type=password],
body.dark .reg-page .auth-card--register input[type=email],
body.dark .reg-page .auth-card--register input[type=number],
body.dark .reg-page .auth-card--register input[type=date],
body.dark .reg-page .auth-card--register input[type=tel],
body.dark .reg-page .auth-card--register select,
body.dark .reg-page .auth-card--register textarea {
    background:#262b30;
    color:#e2e6eb;
    border-color:#3a4047;
}
/* Date input: align icon visibility in dark mode */
body.dark .reg-page .auth-card--register input[type=date]::-webkit-calendar-picker-indicator{
    filter: invert(0.85) opacity(0.9);
}
/* Firefox date icon color is UA-controlled; ensure consistent focus ring */
body.dark .reg-page .auth-card--register input[type=date]:focus{
    box-shadow:0 0 0 2px rgba(13,110,253,.35);
}

/* ---------- Auth Forms ---------- */
.auth-title { 
    margin:0 0 1.1rem; 
    font-size:1.6rem; 
    font-weight:600; 
    letter-spacing:.5px; 
}

.auth-form { 
    display:flex; 
    flex-direction:column; 
    gap:.95rem; 
}

.auth-form label { 
    display:flex; 
    flex-direction:column; 
    gap:.4rem; 
    font-size:.75rem; 
    font-weight:600; 
    text-transform:uppercase; 
    letter-spacing:.55px; 
}
/* Register page: consent labels (checkboxes) must not use column layout */
.reg-page .auth-form label.consent-box,
.reg-page .auth-form .consent-box{ flex-direction:row; align-items:center; gap:.75rem; text-transform:none; letter-spacing:.3px; font-weight:300; }

.auth-form input { 
    font-size:.95rem; 
}

.auth-form--register { 
    gap:1rem; 
}

/* Registration Fields */
.reg-fields { 
    display:grid;
    gap:.95rem 1.2rem;
    grid-template-columns:1fr;
}

.field-hint { 
    font-size:.74rem; 
    font-style:italic; 
    font-weight:400; 
    text-transform:none; 
    letter-spacing:.15px; 
    color:#55626c; 
    margin-top:-.1rem; 
    line-height:1.3; 
}

body.dark .field-hint { 
    color:#92a0aa; 
}
/* Desktop: two-column layout for register form */
@media (min-width: 860px){
    .auth-wrapper--wide{max-width:980px}
    .auth-card--register .reg-fields{grid-template-columns:1fr 1fr}
    .auth-card--register .reg-fields > label{min-width:0}
    /* Explicit span via class to avoid brittle nth-child coupling */
    .auth-card--register .reg-fields > .reg-span{grid-column:1 / -1}
}

.optional { 
    font-size:.6rem; 
    font-weight:500; 
    color: color-mix(in srgb, #6a737b 100%, transparent); 
    text-transform:none; 
    margin-left:.35rem; 
}

body.dark .optional { 
    color:#9aa3ab; 
}
/* Password helpers on register */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{flex:1; padding-right:2.2rem}
.pw-toggle{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);background:transparent;color:inherit;border:none;font-size:.9rem;opacity:.7;cursor:pointer}
.pw-toggle:hover{opacity:1}
.pw-toggle:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
/* Dark mode: make the eye icon more legible */
body.dark .pw-toggle{ color:#e6eef7; opacity:1; font-size:1.05rem; text-shadow:0 0 2px rgba(0,0,0,.45) }
body.dark .pw-toggle:hover,
body.dark .pw-toggle:focus-visible{ background:rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(255,255,255,.15) inset; border-radius:6px }
.pw-toggle:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
.pw-meter{height:6px;background:#e5e9ef;border-radius:999px;overflow:hidden;margin:.35rem 0 .1rem}
.pw-meter .bar{height:100%;width:0;background:#d9534f;transition:width .25s ease, background .25s ease}
body.dark .pw-meter{background:#2b3137}
/* Required badge next to labels */
.required-badge{font-size:.6rem;font-weight:700;color:var(--primary-safe, var(--primary, #0d6efd));text-transform:none;margin-left:.35rem}
body.dark .required-badge{color:#7fb1ff}

/* ===========================================================================
   REGISTRATION PAGE (reg-*) – scoped overrides for consistent wide layout
   =========================================================================== */
.reg-page .auth-wrapper--wide{max-width:1040px; margin:2.2rem auto 3.2rem; padding:0 1rem}
.reg-page .auth-card--register{
    width:min(100%,1040px);
    max-width:1040px; /* override global .auth-card max-width:460px */
    margin:0 auto;
    /* Match homepage quick-login card visuals */
    border:1px solid #e4e7eb;
    border-radius:22px;
    padding:1.9rem 1.9rem 2.15rem;
    box-shadow:0 6px 18px -6px rgba(0,0,0,.12);
    background:#fff;
    contain:inline-size;
}
.reg-page .reg-fields{
    display:grid; gap:1.1rem 2.2rem;
    grid-template-columns:repeat(auto-fit, minmax(min(420px,100%), 1fr));
}
.reg-page .reg-field{min-width:0}
.reg-page .reg-field.reg-span{grid-column:1 / -1}
.reg-page .field-hint{margin-top:.2rem}
/* equalize input heights to avoid wobble between types; keep height only on inputs */
.reg-page .auth-card--register input[type=text],
.reg-page .auth-card--register input[type=password],
.reg-page .auth-card--register input[type=email],
.reg-page .auth-card--register input[type=number],
.reg-page .auth-card--register input[type=tel]{
    height:44px;
    border-radius:12px;
    border-color:#cbd3d8;
    background:#f5f8fa;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
}
.reg-page .auth-card--register input[type=tel]{appearance:none;-webkit-appearance:none}
.reg-page .auth-card--register input:focus{box-shadow:0 0 0 2px rgba(13,110,253,.25)}
/* button like homepage quick login */
.reg-page .auth-btn{border-radius:16px;padding:.95rem 1.2rem;font-size:1.02rem;box-shadow:0 4px 16px rgba(0,0,0,.18)}
body.dark .reg-page .auth-card--register{background:#1e1f22;border-color:#2c2f33;box-shadow:0 10px 28px -8px rgba(0,0,0,.85)}
body.dark .reg-page .auth-card--register input[type=tel]{background:#262b30}
/* Dark mode: ensure all inputs share the same background and border */
body.dark .reg-page .auth-card--register input[type=text],
body.dark .reg-page .auth-card--register input[type=password],
body.dark .reg-page .auth-card--register input[type=email],
body.dark .reg-page .auth-card--register input[type=number],
body.dark .reg-page .auth-card--register input[type=tel]{background:#262b30; border-color:#3a4047; color:#e2e6eb}
@media (min-width:1200px){ .reg-page .reg-fields{ gap:1.2rem 2.6rem } }
@media (max-width:859.98px){
    /* Mobile/Tablet: ensure no overflow */
    .reg-page .auth-card--register{max-width:100%; width:auto}
    .reg-page .auth-card--register .pw-wrap{max-width:100%}
}

/* AGB details on register */
.reg-page .agb-details{ margin:.4rem 0 1rem; }
.reg-page .agb-details summary{ cursor:pointer; font-weight:600; margin-bottom:.25rem; }
.reg-page .agb-details .agb-text{ white-space:pre-wrap; background:#f7f9fc; border:1px solid #dde3ea; border-radius:10px; padding:.55rem .7rem; font-size:.92rem; line-height:1.3; color:#1f2a37; }
body.dark .reg-page .agb-details .agb-text{ background:#1b2025; border-color:#2c3239; color:#d8dee6; }
/* AGB inside consent box */
.reg-page .consent-box--agb{ align-items:flex-start; }
/* Stronger override when combined with .auth-form label rules */
.reg-page .auth-form label.consent-box.consent-box--agb,
.reg-page .auth-form .consent-box.consent-box--agb{ display:grid; grid-template-columns:22px 1fr; column-gap:.75rem; align-items:start; }
    .reg-page .consent-box--agb .consent-box__col{ grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:.35rem; min-width:0; }
    .reg-page .consent-box--agb .agb-details{ margin:.2rem 0 0; }
    .reg-page .consent-box--agb .agb-panel{ margin:.2rem 0 0; }
    .reg-page .consent-box--agb > input[type=checkbox]{ grid-column:1; grid-row:1; align-self:start; }

/* AGB trigger styling (stronger visibility + caret) */
.reg-page .consent-box--agb .consent-text .agb-trigger{ position:relative; display:inline-flex; align-items:center; gap:.25rem; padding:.05rem .35rem; border-radius:.4rem; background:rgba(13,110,253,.10); color:#0d6efd; text-decoration:none; box-shadow:inset 0 0 0 1px rgba(13,110,253,.25); }
.reg-page .consent-box--agb .consent-text .agb-trigger:hover{ background:rgba(13,110,253,.18); box-shadow:inset 0 0 0 1px rgba(13,110,253,.35); }
.reg-page .consent-box--agb .consent-text .agb-trigger .agb-caret{ transition:transform .18s ease, color .18s ease; color:#0d6efd; font-weight:700; display:inline-block; }
/* Rotate caret when open via class to reflect initial state without JS */
.reg-page .consent-box--agb .consent-text .agb-trigger.is-open .agb-caret{ transform:rotate(90deg); }
body.dark .reg-page .consent-box--agb .consent-text .agb-trigger{ background:rgba(82,131,238,.14); color:#91b4ff; box-shadow:inset 0 0 0 1px rgba(82,131,238,.35); }
body.dark .reg-page .consent-box--agb .consent-text .agb-trigger:hover{ background:rgba(82,131,238,.22); box-shadow:inset 0 0 0 1px rgba(82,131,238,.45); }
body.dark .reg-page .consent-box--agb .consent-text .agb-trigger .agb-caret{ color:#91b4ff; }

/* Keyboard focus ring for AGB trigger (accessibility) */
.reg-page .consent-box--agb .consent-text .agb-trigger:focus-visible{ outline:2px solid currentColor; outline-offset:2px; text-decoration:none }

/* AGB panel text: preserve line breaks */
.reg-page .consent-box--agb .agb-panel .agb-text{ white-space:pre-wrap; line-height:1.35; }
body.dark .reg-page .consent-box--agb .agb-panel .agb-text{ color:inherit; }

/* ---------- Consent Box ---------- */
.consent-box { 
    display:flex; 
    flex-direction:row; 
    align-items:center; 
    justify-content:flex-start;
    gap:.75rem; 
    font-size:.78rem; 
    line-height:1.4; 
    background:#f5f7fa; 
    padding:.85rem 1.05rem; 
    border:1px solid #d0d7de; 
    border-radius:18px; 
    position:relative; 
}

body.dark .consent-box { 
    background:#262b30; 
    border-color:#3a4047; 
    color:#d2d8de; 
}

/* Custom Checkbox in Consent Box */
.consent-box input[type=checkbox] { 
    appearance:none; 
    -webkit-appearance:none; 
    width:22px; 
    height:22px; 
    margin:0; 
    border:2px solid var(--primary); 
    border-radius:6px; 
    background:linear-gradient(180deg,#ffffff,#e9edf0); 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    cursor:pointer; 
    position:relative; 
    transition:background .2s,border-color .2s, box-shadow .2s; 
}

body.dark .consent-box input[type=checkbox] { 
    background:linear-gradient(180deg,#30363c,#252a30); 
    border-color:#5a636b; 
}

.consent-box input[type=checkbox]:hover { 
    box-shadow:0 0 0 3px rgba(13,110,253,.12); 
}

body.dark .consent-box input[type=checkbox]:hover { 
    box-shadow:0 0 0 3px rgba(13,110,253,.25); 
}

.consent-box input[type=checkbox]:focus-visible { 
    outline:2px solid var(--link-color, var(--primary)); 
    outline-offset:2px; 
}

.consent-box input[type=checkbox]:checked { 
    border-color:var(--primary); 
    background:linear-gradient(135deg,var(--primary),var(--secondary)); 
}

.consent-box input[type=checkbox]:checked::after { 
    content:'\2713'; 
    font-size:15px; 
    color:#fff; 
    font-weight:600; 
}

.consent-text { 
    font-size:.78rem; 
    font-weight:500; 
    text-transform:none; 
    letter-spacing:.3px; 
    margin:0; 
    text-align:left;
}

/* ---------- Auth Button & Links ---------- */
.auth-btn { 
    margin-top:.35rem; 
    border:none; 
    border-radius:12px; 
    padding:.85rem 1.1rem; 
    font-size:1rem; 
    font-weight:600; 
    cursor:pointer; 
    box-shadow:0 4px 14px -4px rgba(0,0,0,.3); 
}

/* Improve keyboard focus visibility for primary auth actions */
.auth-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:3px }

.auth-links { 
    display:flex; 
    flex-direction:column; 
    gap:.5rem; 
    font-size:.75rem; 
    margin-top:.4rem; 
}

.auth-links.single { 
    flex-direction:row; 
    flex-wrap:wrap; 
    align-items:center; 
    gap:.4rem; 
}

.auth-link { 
    color:var(--link-color); 
    text-decoration:none; 
    font-weight:500; 
}

body.dark .auth-link { 
    color:var(--link-color); 
}

.auth-link.strong { 
    font-weight:600; 
}

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

.auth-note { 
    color:#555; 
}

body.dark .auth-note { 
    color:#b0b8bf; 
}

/* ---------- Auth Alerts ---------- */
.auth-alert { 
    padding:.65rem .8rem; 
    border-radius:10px; 
    font-size:.78rem; 
    line-height:1.35; 
    font-weight:500; 
    margin:.65rem 0; 
}

.auth-alert--error { 
    background:#fdecea; 
    color:#842029; 
    border:1px solid #f5c2c7; 
}

body.dark .auth-alert--error { 
    background:#3a2323; 
    color:#ffb3b3; 
    border-color:#663a3a; 
}

.auth-alert--success,
.auth-alert--ok { 
    background:#e9f7ef; 
    color:#0f5132; 
    border:1px solid #badbcc; 
}

body.dark .auth-alert--success,
body.dark .auth-alert--ok { 
    background:#143223; 
    color:#b9f2cf; 
    border-color:#245b3b; 
}

/* ==========================================================================
   10. TABELLEN
   ========================================================================== */

.table { 
    width:100%; 
    border-collapse:collapse; 
}

.table th, 
.table td { 
    border:1px solid #ccc; 
    padding:.5rem; 
}

.table tr:hover { 
    background:#fafcff; 
}

body.dark .table tr:hover { 
    background:#1b1e24; 
}

/* Table Row States */
.table tr.past { 
    opacity:.55; 
}

.table tr.today { 
    background:#fffbe6; 
}

body.dark .table tr.today { 
    background:#3a3415; 
}

/* Clickable Rows */
tr[onclick] { 
    transition:background .15s; 
}

/* ==========================================================================
   11. CARDS & GRIDS
   ========================================================================== */

/* ---------- Grid Layout ---------- */
.grid { 
    display:grid; 
    gap:1rem; 
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); 
}

/* ---------- Basic Card ---------- */
.card { 
    border:1px solid #ccc; 
    padding:.5rem; 
    background:#fff; 
    border-radius:4px; 
}

body.dark .card { 
    background:#1f1f1f; 
    border-color:#333; 
}

/* ---------- Slot Grid & Cards ---------- */
.slot-grid { 
    display:grid; 
    gap:1rem; 
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); 
}

.slot-card { 
    background:#fff; 
    border:1px solid #d6dbe1; 
    padding:.75rem .9rem; 
    border-radius:8px; 
    position:relative; 
    display:flex; 
    flex-direction:column; 
    gap:.4rem; 
}

body.dark .slot-card { 
    background:#1e1f22; 
    border-color:#2c2f33; 
}

.slot-card h4 { 
    margin:.2rem 0 .1rem; 
    font-size:1rem; 
}

/* Slot Card States */
.slot-card.past { 
    opacity:.55; 
}

.slot-card.today { 
    box-shadow:0 0 0 2px #ffec9e inset; 
}

/* Slot Meta Information */
.slot-meta { 
    font-size:.72rem; 
    color:#555; 
    display:flex; 
    gap:.5rem; 
    flex-wrap:wrap; 
}

body.dark .slot-meta { 
    color:#aaa; 
}

/* Slot Actions */
.slot-actions { 
    margin-top:auto; 
    display:flex; 
    gap:.4rem; 
}

.slot-actions a, 
.slot-actions button { 
    flex:1; 
    text-align:center; 
    font-size:.7rem; 
    padding:.45rem .5rem; 
}

/* ===========================================================================
   ADMIN: PUNKTESEITE STYLING (an Profil-Stil angelehnt)
   ========================================================================== */
.points-admin { 
    /* Wrapper wie prf-wrapper, aber eindeutig gekennzeichnet */
    max-width:1100px; 
    margin:1.2rem auto 2rem; 
    background:#fff; 
    border:1px solid #d9e0e6; 
    border-radius:26px; 
    padding:2rem 2rem 2.2rem; 
    box-shadow:0 8px 26px -8px rgba(0,0,0,.08); 
}
body.dark .points-admin { 
    background:#15181b; 
    border-color:#262c32; 
    box-shadow:0 10px 34px -10px rgba(0,0,0,.85); 
}
.pa-title { 
    font-size:1.6rem; 
    font-weight:700; 
    letter-spacing:.4px; 
    margin:.2rem 0 .8rem; 
}
.pa-section { 
    /* Boxen im Wrapper – ähnlich prf-box */
    margin:1.1rem 0 1.2rem; 
    background:#f7f9fb; 
    border:1px solid #d8dee3; 
    border-radius:16px; 
    padding:1rem 1.1rem 1.1rem; 
}
body.dark .pa-section { 
    background:#1b1f23; 
    border-color:#2a2f34; 
}
.pa-section > h2 { 
    margin:.1rem 0 .6rem; 
    font-size:.9rem; 
    letter-spacing:.55px; 
    text-transform:uppercase; 
    opacity:.85; 
}
.pa-subtle { color:#4b5563; }
body.dark .pa-subtle { color:#aab3bc; }
.pa-dual { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:800px){ .pa-dual{ grid-template-columns:1fr; } }
.pa-stack { display:flex; flex-direction:column; gap:1.1rem; }
.pa-card { 
    background:#fff; 
    border:1px solid #d8dde2; 
    border-radius:12px; 
    padding:.75rem .85rem; 
}
body.dark .pa-card { background:#1e1f22; border-color:#2c2f33; }
.pa-card--summary { border-style:dashed; }
.pa-card__title { font-weight:700; letter-spacing:.3px; }
.pa-chiprow { display:flex; flex-wrap:wrap; gap:.45rem .65rem; align-items:center; }
.pa-meta { margin-top:.35rem; font-size:.86rem; color:#4b5563; }
body.dark .pa-meta { color:#aab3bc; }
.pa-chip { 
    background:#eef2f7; 
    border:1px solid #d7dde6; 
    border-radius:999px; 
    padding:.15rem .55rem; 
    font-size:.85rem; 
}

/* Logos section (Admin Settings) */
.logo-grid { display:grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap:1rem; margin-top:.5rem; }
@media (max-width:720px){ .logo-grid{ grid-template-columns:1fr; } }
.logo-tile { background:#fff; border:1px solid #d8dde2; border-radius:12px; padding:.75rem; box-shadow:0 2px 10px rgba(0,0,0,.04); }
body.dark .logo-tile { background:#1e1f22; border-color:#2c2f33; box-shadow:0 8px 24px -8px rgba(0,0,0,.8); }
.logo-title { margin:0 0 .4rem; font-size:.9rem; }
.logo-surface { display:flex; align-items:center; justify-content:center; height:72px; border-radius:8px; border:1px solid #e5eaef; padding:6px; }
.logo-surface--light { background:#fff; }
.logo-surface--dark { background:#222; border-color:#333; }
body.dark .logo-surface--dark { background:#15181b; border-color:#2a2f34; }
.logo-thumb { max-height:56px; max-width:100%; object-fit:contain; display:block; }
.logo-empty { font-size:.85rem; opacity:.85; }
.logo-file-row { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin:.4rem 0; }
.logo-inline { display:inline-flex; align-items:center; gap:.6rem; }
.logo-surface--small { height:44px; padding:4px; }
.logo-upload { margin-top:.5rem; }
.logo-upload input[type="file"]{ max-width:100%; }

/* Color picker combo */
.color-row .cp-wrap{ display:flex; align-items:center; gap:.6rem; margin-top:.35rem; }
.cp-swatch input[type=color]{ appearance:none; -webkit-appearance:none; border:none; width:48px; height:36px; padding:0; background:none; cursor:pointer; border-radius:8px; }
.cp-hex{ height:36px; padding:.45rem .6rem; border:1px solid #b8c2c9; border-radius:8px; font-size:.95rem; color:#222; min-width:130px; }
body.dark .cp-hex{ border-color:#404c55; background:#262b30; color:#e2e6eb; }
body.dark .pa-chip { background:#2b3137; border-color:#3b424a; }
.pa-details { margin:.45rem 0; }
.pa-details > summary { font-weight:600; color:var(--link-color); cursor:pointer; margin:.15rem 0 .3rem .4rem; padding-left:.05rem; }
/* tighten summary marker spacing in Safari/Chromium */
.pa-details > summary::-webkit-details-marker { margin-right:.25rem; }
.pa-toolbar { 
    background:#f5f7fa; 
    border:1px solid #d8dde2; 
    border-radius:10px; 
    padding:.55rem .7rem; 
}
/* when toolbar rows wrap, ensure spacing between them */
.pa-toolbar > * + * { margin-top:.55rem; }
body.dark .pa-toolbar { background:#262b30; border-color:#3a4047; }
.pa-form input,
.pa-form select { max-width:220px; }
.pa-form-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.pa-form-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; }

/* Minor helpers for the points admin page */
.pa-intro{font-size:.95rem;line-height:1.5;margin:.35rem 0 1rem}
.pa-bullets{margin:.25rem 0 .5rem 1.1rem}
.pa-note{font-size:.85rem;opacity:.85;margin:.25rem 0}
.pa-alert{padding:.6rem .8rem;border-radius:10px;font-size:.78rem;line-height:1.35;font-weight:600;margin:.6rem 0}
.pa-alert--ok{background:#e9f7ef;color:#0f5132;border:1px solid #badbcc}
.pa-alert--err{background:#fdecea;color:#842029;border:1px solid #f5c2c7}
body.dark .pa-alert--ok{background:#143223;color:#b9f2cf;border-color:#245b3b}
body.dark .pa-alert--err{background:#3a2323;color:#ffb3b3;border-color:#663a3a}
.pa-info-inline{margin-left:.25rem}
.pa-pre{background:#f7f7f7;border:1px solid #eee;padding:.5rem;white-space:pre-wrap;word-break:break-word}
body.dark .pa-pre{background:#1e1f22;border-color:#2c2f33}
.pa-grid-rounds{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;max-width:820px}
.pa-flex-row{display:flex;gap:1rem;align-items:end;flex-wrap:wrap}
.pa-mt{margin-top:.5rem}
.pa-details--spaced{margin-top:.35rem}
.pa-manual-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;max-width:900px}
.pa-span-all{grid-column:1 / -1}
.pa-month{width:80px}
/* subtle horizontal separator for admin sections */
.pa-sep{border:0;border-top:1px solid #e1e6ec;margin:1rem 0 0}
body.dark .pa-sep{border-top-color:#2a2f34}
/* Feature toggles (admin_features): label-as-card with checkbox */
.pa-checkcard{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer}
.pa-checkcard__input{margin-top:.2rem;accent-color:var(--primary-safe)}
.pa-checkcard:hover{border-color:var(--primary-safe)}
.pa-checkcard .pa-card__title{margin:0}
.pa-checkcard .pa-subtle{margin-top:.2rem}
/* hint icon used in archive items and admin notes */
.tn-hint-ico{display:inline-block;margin-left:.35rem;font-size:.78rem;opacity:.7;vertical-align:baseline}
body.dark .tn-hint-ico{opacity:.85}

/* ===========================================================================
     LEADERBOARD / RANGLISTE (lb-*) – an Members/Profile/Points angelehnt
     =========================================================================== */
.lb-wrapper{background:#fff;border:1px solid #d9e0e6;border-radius:26px;padding:1.6rem 1.8rem 2rem;max-width:1100px;margin:0 auto 1.8rem;box-shadow:0 8px 26px -8px rgba(0,0,0,.08)}
body.dark .lb-wrapper{background:#15181b;border-color:#262c32;box-shadow:0 10px 34px -10px rgba(0,0,0,.85)}
.lb-head{margin:0 0 .9rem}
.lb-title{margin:0;font-size:1.6rem;letter-spacing:.4px}
.lb-tabs{display:flex;gap:.5rem;margin:.2rem 0 1.1rem}
.lb-tab{display:inline-block;padding:.45rem .65rem;border:1px solid #d8dde2;border-bottom:none;border-radius:.6rem .6rem 0 0;background:#f7f9fb;color:inherit;text-decoration:none;font-weight:700;letter-spacing:.4px}
.lb-tab.active{background:var(--primary-safe, var(--primary));border-color:var(--primary-safe, var(--primary));color:var(--on-primary-safe, #fff)}
body.dark .lb-tab{background:#1b1f23;border-color:#2a2f34;color:#d5dae0}

/* Mode buttons (alternative to tabs) */
.lb-mode{margin:.2rem 0 1.1rem}
.lb-mode-form{display:flex;gap:.5rem;flex-wrap:wrap}

.lb-filter{display:flex;gap:.8rem;align-items:end;flex-wrap:wrap;margin:0 0 1.1rem}
.lb-filter .filter-field{display:flex;flex-direction:column;gap:.35rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.lb-filter .lb-select{min-width:110px}
.lb-filter .lb-all{display:flex;gap:.4rem;align-items:center}

.lb-empty{background:#fffbe6;border:1px solid #f0e2b5;color:#695200;border-radius:12px;padding:.75rem .9rem;font-weight:600}
body.dark .lb-empty{background:#3a3415;border-color:#66562a;color:#ffdf86}

.lb-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lb-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.lb-table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.55px;font-weight:700;color:#4a545d;border:none;padding:.35rem .6rem}
body.dark .lb-table thead th{color:#c2c9d0}
.lb-table tbody tr{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .15s, box-shadow .15s}
body.dark .lb-table tbody tr{background:#1e1f22;box-shadow:0 1px 6px rgba(0,0,0,.45)}
.lb-table tbody tr:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
body.dark .lb-table tbody tr:hover{box-shadow:0 4px 14px rgba(0,0,0,.6)}
.lb-table td{padding:.65rem .75rem;border-top:1px solid #e3e7eb;border-bottom:1px solid #e3e7eb;vertical-align:middle}
body.dark .lb-table td{border-color:#2a2f33}
.lb-table tbody tr td:first-child{border-left:1px solid #e3e7eb;border-top-left-radius:10px;border-bottom-left-radius:10px}
.lb-table tbody tr td:last-child{border-right:1px solid #e3e7eb;border-top-right-radius:10px;border-bottom-right-radius:10px}
body.dark .lb-table tbody tr td:first-child,body.dark .lb-table tbody tr td:last-child{border-color:#2a2f33}
.lb-table .col-rank{width:80px;font-weight:700}
.lb-table .col-pts{text-align:right;width:120px}

.rank-user{display:flex;align-items:center;gap:.6rem;min-width:0}
.rank-avatar{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#eef1f5;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #d8dde2}
body.dark .rank-avatar{background:#23272b;border-color:#2c3136}
.rank-avatar__img{width:34px;height:34px;object-fit:cover;display:block;border-radius:50%}
.rank-avatar__ph{font-size:.8rem;font-weight:800;letter-spacing:.3px;color:#445}
body.dark .rank-avatar__ph{color:#cfd5dd}
.rank-name{font-weight:600}

@media (max-width:640px){
    .lb-wrapper{padding:1.2rem 1rem 1.4rem;border-radius:22px}
    .lb-table thead{display:none}
    .lb-table tbody tr{display:grid;grid-template-columns:1fr auto;gap:.35rem;padding:.55rem .6rem}
    .lb-table tbody tr .col-rank{grid-column:1/2}
    .lb-table tbody tr .col-user{grid-column:1/-1}
    .lb-table tbody tr .col-pts{grid-column:2/3;text-align:right}
    .lb-table td{border:none !important;padding:.25rem 0}
}

/* ==========================================================================
   12. BADGES & CHIPS
   ========================================================================== */

/* ---------- Basic Badge ---------- */
.badge { 
    display:inline-block; 
    background:var(--secondary); 
    color:#fff; 
    padding:0 .5rem; 
    border-radius:4px; 
    font-size:.75rem; 
}

/* Mini Badge */
.mini-badge { 
    background:#444; 
    color:#fff; 
    padding:2px 6px; 
    border-radius:8px; 
    font-size:.55rem; 
    letter-spacing:.5px; 
    font-weight:600; 
    text-transform:uppercase; 
}

body.dark .mini-badge { 
    background:#666; 
}

/* ---------- Badge Variants ---------- */
.badge-status.ok { 
    background:#d6f5e3; 
    color:#0f6a3d; 
}

.badge-status.warn { 
    background:#fff4d6; 
    color:#8a5b00; 
}

.badge-status.full { 
    background:#fde1e1; 
    color:#a30000; 
}

.badge-mode { 
    background:#fff0d5; 
    color:#8a5b00; 
    padding:.15rem .5rem; 
    border-radius:4px; 
    font-size:.65rem; 
    font-weight:600; 
}

body.dark .badge-mode { 
    background:#3a2e15; 
    color:#ffcf70; 
}

.badge-play { 
    background:#dff7ef; 
    color:#0f5c3e; 
    padding:.15rem .5rem; 
    border-radius:4px; 
    font-size:.65rem; 
    font-weight:600; 
}

body.dark .badge-play { 
    background:#1d3a31; 
    color:#7ee7ba; 
}

/* ---------- Chips ---------- */
.chips { 
    display:flex; 
    flex-wrap:wrap; 
    gap:.4rem; 
    margin:.4rem 0; 
}

.chip { 
    background:var(--primary-safe, var(--primary)); 
    color:var(--on-primary-safe, #fff); 
    padding:.25rem .6rem; 
    border-radius:999px; 
    font-size:.75rem; 
    display:inline-flex; 
    align-items:center; 
}

.chip.owner { 
    background:var(--secondary); 
}

/* Chips Update Animation */
.chips.updating { 
    position:relative; 
}

#participantChips.updating::after { 
    content:''; 
    position:absolute; 
    inset:0; 
    border:2px solid var(--primary); 
    border-radius:8px; 
    animation:pulse 0.5s ease; 
    pointer-events:none; 
}

/* Level Selection Chips */
.level-options { 
    display:flex; 
    flex-wrap:wrap; 
    gap:.5rem; 
}

.level-chip { 
    position:relative; 
    display:inline-flex; 
    align-items:center; 
    cursor:pointer; 
    font-size:.7rem; 
    font-weight:600; 
    letter-spacing:.4px; 
    background:#eef2f6; 
    border:1px solid #c3c9d1; 
    padding:.45rem .75rem; 
    border-radius:999px; 
    user-select:none; 
    transition:background .15s,border-color .15s,color .15s, box-shadow .15s; 
}

body.dark .level-chip { 
    background:#2a3036; 
    border-color:#3a4047; 
}

.level-chip input { 
    position:absolute; 
    opacity:0; 
    pointer-events:none; 
}

.level-chip span { 
    pointer-events:none; 
}

.level-chip:hover { 
    background:#e2e8ef; 
}

body.dark .level-chip:hover { 
    background:#343b42; 
}

.level-chip:has(input:checked) { 
    background:#dbe9ff; 
    border-color:#8cb8ff; 
    box-shadow:0 0 0 2px rgba(13,110,253,.25); 
}

.level-chip:has(input:checked) span { 
    color:#0d6efd; 
    font-weight:700; 
}

body.dark .level-chip:has(input:checked) { 
    background:#163b5c; 
    border-color:#1f4d78; 
    box-shadow:0 0 0 2px rgba(13,110,253,.35); 
}

body.dark .level-chip:has(input:checked) span { 
    color:#fff; 
}

/* ==========================================================================
   13. FILTER BAR (Quickmatch)
   ========================================================================== */

.filter-bar { 
    margin:1.2rem 0 1.2rem; 
    display:flex; 
    flex-wrap:wrap; 
    gap:1rem 1.4rem; 
    align-items:flex-end; 
    background:#fff; 
    padding:1rem 1.2rem 1.05rem; 
    border:1px solid #d8dde2; 
    border-radius:20px; 
    box-shadow:0 3px 6px rgba(0,0,0,.05); 
}

body.dark .filter-bar { 
    background:#1e1f22; 
    border-color:#2c2f33; 
}

.filter-field { 
    font-size:.62rem; 
    font-weight:600; 
    text-transform:uppercase; 
    letter-spacing:.55px; 
    display:flex; 
    flex-direction:column; 
    gap:.55rem; 
    color:#2d3742; 
    position:relative; 
}

body.dark .filter-field { 
    color:#cfd4dc; 
}

.filter-field.wide { 
    flex:1 1 380px; 
    min-width:300px; 
}

.filter-field span { 
    font-size:.68rem; 
    font-weight:400; 
    text-transform:none; 
    letter-spacing:normal; 
}

.control-wrap { 
    display:flex; 
    align-items:center; 
    gap:.55rem; 
}

/* Ensure small controls like checkboxes don’t expand due to the generic input min-width */
.control-wrap input[type="checkbox"],
.control-wrap input[type="radio"]{
    min-width:auto;
    width:auto;
}

.filter-field input, 
.filter-field select { 
    min-width:150px; 
    font-size:.8rem; 
    padding:.5rem .7rem; 
    border:1px solid #c3c9d1; 
    border-radius:10px; 
    background:#f5f7fa; 
    line-height:1.2; 
    transition:border-color .15s, background .15s, box-shadow .15s; 
}

.filter-field input:focus, 
.filter-field select:focus { 
    outline:none; 
    border-color:var(--primary); 
    background:#fff; 
    box-shadow:0 0 0 2px rgba(13,110,253,.18); 
}

body.dark .filter-field input, 
body.dark .filter-field select { 
    background:#262b30; 
    border-color:#3a4047; 
    color:#e2e6eb; 
}

body.dark .filter-field input:focus, 
body.dark .filter-field select:focus { 
    box-shadow:0 0 0 2px rgba(13,110,253,.35); 
}

.filter-actions { 
    display:flex; 
    gap:.8rem; 
}

.filter-actions button { 
    height:42px; 
    font-size:.75rem; 
    font-weight:600; 
    background:var(--primary-safe, var(--primary)); 
    color:var(--on-primary-safe, #fff); 
    border:none; 
    border-radius:10px; 
    padding:.55rem 1.3rem; 
    letter-spacing:.5px; 
    box-shadow:0 2px 4px rgba(0,0,0,.08); 
}

.filter-actions .btn-secondary { 
    background:#475058; 
}

.filter-actions button:hover { 
    filter:brightness(1.07); 
}

/* --------------------------------------------------------------------------
    MEMBERS PAGE SCOPED FILTER (mbr-*)
    -------------------------------------------------------------------------- */
.mbr-filter{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:flex-end;margin:1rem 0 1.2rem;background:#fff;border:1px solid #d8dde2;border-radius:16px;padding:.9rem 1rem;box-shadow:0 2px 6px rgba(0,0,0,.05)}
body.dark .mbr-filter{background:#1e1f22;border-color:#2c2f33}
.mbr-filter__field{display:flex;flex-direction:column;gap:.4rem}
.mbr-filter__field.mbr-filter__search{flex:1 1 280px;min-width:220px}
.mbr-filter__field.mbr-filter__level{flex:0 0 180px}
.mbr-filter__label{font-size:.62rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;opacity:.8}
.mbr-filter__input,.mbr-filter__select{appearance:none;-webkit-appearance:none;font:inherit;padding:.55rem .7rem;border:1px solid #c3c9d1;border-radius:10px;background:#f5f7fa;color:inherit;line-height:1.2;min-width:0}
.mbr-filter__input:focus,.mbr-filter__select:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 2px rgba(13,110,253,.18)}
body.dark .mbr-filter__input,body.dark .mbr-filter__select{background:#262b30;border-color:#3a4047;color:#e2e6eb}
body.dark .mbr-filter__input:focus,body.dark .mbr-filter__select:focus{box-shadow:0 0 0 2px rgba(13,110,253,.35)}
.mbr-filter__actions{margin-left:auto}
.mbr-filter__btn{background:var(--primary-safe, var(--primary));color:var(--on-primary-safe, #fff);border:0;border-radius:10px;padding:.55rem 1.1rem;font-weight:700;letter-spacing:.5px}
.mbr-filter__btn:hover{filter:brightness(1.05)}
@media (max-width:640px){.mbr-filter{padding:.8rem .8rem}.mbr-filter__actions{width:100%;margin-left:0}.mbr-filter__btn{width:100%}}

/* --------------------------------------------------------------------------
    QUICK MATCH RESTYLE (unified with tournament aesthetics)
    -------------------------------------------------------------------------- */
/* Detail page wrapper and cards */
.qm-page{max-width:980px;margin:0 auto 1.6rem;padding:0 1rem}
.qm-card{background:#fff;border:1px solid #d3dbe0;border-radius:14px;padding:1rem 1.2rem;box-shadow:0 4px 10px rgba(0,0,0,.05);margin:0 0 1.2rem}
body.dark .qm-card{background:#15181b;border-color:#2c2f33;box-shadow:0 4px 14px -2px rgba(0,0,0,.6)}
.qm-head{display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem;justify-content:space-between}
.qm-title{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:.3px;margin-left:auto}
.qm-head .back-link{font-size:.8rem;font-weight:600;letter-spacing:.5px;background:#f1f4f7;padding:.45rem .75rem;border-radius:8px;border:1px solid #d0d7dc;color:inherit;text-decoration:none}
body.dark .qm-head .back-link{background:#262b30;border-color:#32383e;color:#e2e6eb}
.qm-shell > .qm-head{margin:.15rem 0 .9rem}
.qm-shell .qm-title{font-size:1.4rem}
.qm-head .back-link:hover{text-decoration:none;filter:brightness(1.05)}
/* Meta grid */
.qm-meta{margin:.2rem 0 .2rem}
.qm-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (max-width:680px){.qm-meta-grid{grid-template-columns:1fr}}
.kv{display:flex;flex-direction:column;gap:.2rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:.6rem .7rem}
.kv.kv-span-2{grid-column:1 / -1}
.kv-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.5px;color:#6b7280;font-weight:700}
.kv-value{font-size:.95rem}
body.dark .kv{background:#1e2125;border-color:#2b3137}
body.dark .kv-label{color:#9aa4af}
.qm-topbar { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1rem; }
.qm-topbar .qm-action { background:#fff; border:1px solid #d3dbe0; padding:.55rem .9rem; border-radius:10px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:#333; box-shadow:0 2px 4px rgba(0,0,0,.05); }
.qm-topbar .qm-action.active, .qm-topbar .qm-action:hover { background:var(--primary-safe, var(--primary)); color:var(--on-primary-safe, #fff); border-color:var(--primary-safe, var(--primary)); text-decoration:none; }
body.dark .qm-topbar .qm-action { background:#1e1f22; border-color:#2c2f33; color:#d5dae0; }
body.dark .qm-topbar .qm-action.active, body.dark .qm-topbar .qm-action:hover { background:var(--primary-safe, var(--primary)); border-color:var(--primary-safe, var(--primary)); color:var(--on-primary-safe, #fff); }

/* Tournament actions share the same action button look & safe hover */
.t-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.t-actions .qm-action { background:#fff; border:1px solid #d3dbe0; padding:.55rem .9rem; border-radius:10px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:#333; box-shadow:0 2px 4px rgba(0,0,0,.05); }
.t-actions .qm-action.active, .t-actions .qm-action:hover { background:var(--primary-safe, var(--primary)); color:var(--on-primary-safe, #fff); border-color:var(--primary-safe, var(--primary)); text-decoration:none; }
body.dark .t-actions .qm-action { background:#1e1f22; border-color:#2c2f33; color:#d5dae0; }
body.dark .t-actions .qm-action.active, body.dark .t-actions .qm-action:hover { background:var(--primary-safe, var(--primary)); border-color:var(--primary-safe, var(--primary)); color:var(--on-primary-safe, #fff); }

.qm-list-head { display:flex; justify-content:space-between; align-items:center; margin:.6rem 0 1rem; padding:.4rem .2rem; }
.qm-list-title { font-size:1.05rem; font-weight:700; letter-spacing:.5px; }
.qm-view-toggle .view-chip { background:#475058; color:#fff; }
body.dark .qm-view-toggle .view-chip { background:#2f353a; }
.qm-view-toggle .view-chip.active { background:var(--primary-safe, var(--primary)); color:var(--on-primary-safe, #fff); }
.qm-view-toggle .view-chip:hover { filter:brightness(1.1); text-decoration:none; }
.qm-view-toggle .view-chip + .view-chip { margin-left:.5rem; }

.qm-detail-card { background:#fff; border:1px solid #d3dbe0; border-radius:14px; padding:1.2rem 1.3rem 1.4rem; position:relative; box-shadow:0 4px 10px rgba(0,0,0,.05); margin:0 0 1.5rem; }
body.dark .qm-detail-card { background:#1e1f22; border-color:#2c2f33; box-shadow:0 4px 14px -2px rgba(0,0,0,.6); }
.qm-detail-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 .8rem; }
.qm-detail-head h1 { margin:0; font-size:1.35rem; }
.qm-detail-head .back-link { font-size:.8rem; font-weight:600; letter-spacing:.5px; background:#f1f4f7; padding:.45rem .75rem; border-radius:8px; border:1px solid #d0d7dc; }
body.dark .qm-detail-head .back-link { background:#262b30; border-color:#32383e; color:#e2e6eb; }
.qm-detail-head .back-link:hover { text-decoration:none; filter:brightness(1.05); }

.qm-detail-table th { width:160px; }
.section-head { position:relative; margin:1.8rem 0 .6rem; font-size:1rem; letter-spacing:.5px; }
.section-head .count-badge, .count-badge { display:inline-block; background:var(--primary-safe, var(--primary)); color:var(--on-primary-safe, #fff); padding:.15rem .55rem; border-radius:1rem; font-size:.65rem; font-weight:600; margin-left:.45rem; }

#participantChips .chip { font-size:.68rem; padding:.3rem .65rem; }
.join-box { margin:1rem 0 1.2rem; padding:1rem 1.1rem; background:#f7f9fb; border:1px solid #d8dde2; border-radius:12px; }
body.dark .join-box { background:#23262a; border-color:#2d3236; }
.join-box input[type=text] { max-width:100%; }
.qm-note{margin-bottom:.5rem}
.qm-note + .btn, .qm-note + button, .qm-note + .btn-secondary{margin-top:.35rem}
.contact-info { font-size:.85rem; line-height:1.4; }

.qm-create-wrapper { background:#fff; border:1px solid #d3dbe0; border-radius:16px; padding:1.4rem 1.5rem 2rem; box-shadow:0 4px 10px rgba(0,0,0,.04); margin:0 0 1.5rem; }
body.dark .qm-create-wrapper { background:#1e1f22; border-color:#2c2f33; box-shadow:0 4px 14px -2px rgba(0,0,0,.55); }
.qm-create-title { margin:0 0 1rem; font-size:1.4rem; letter-spacing:.5px; }
.qm-create-form .form-shell { background:transparent; padding:0; }
.qm-create-form .form-actions { margin-top:1rem; display:flex; gap:1rem; align-items:center; }
.qm-help { margin:2rem 0 2.2rem; padding:1.2rem 1.2rem 1.4rem; background:linear-gradient(135deg,#f3f4f6 0%, #eceff1 100%); border:1px solid #d8dfe4; border-radius:14px; box-shadow:0 3px 8px rgba(0,0,0,.04); }
body.dark .qm-help { background:linear-gradient(135deg,#1f252b 0%, #1a1f24 100%); border-color:#323a41; }

/* Grouped shell with 2x2 sub-cards */
.qm-shell{padding:1.1rem 1.2rem}
.qm-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.qm-sub{background:#f7f9fb;border:1px solid #d8dde2;border-radius:12px;padding:.9rem 1rem}
body.dark .qm-sub{background:#1e1f22;border-color:#2c2f33}
.qm-sub-meta{padding:.7rem .85rem}
.qm-sub-meta .qm-head{margin-top:.15rem;margin-bottom:.75rem}
body.dark .qm-sub-meta{background:#1e1f22 !important;border-color:#2c2f33 !important}
.qm-sub-meta .kv{background:transparent !important;border:0 !important;border-radius:0 !important;padding:.2rem 0}
body:not(.dark) .qm-sub-meta .kv{background:transparent;border:0}
.qm-sub .section-head{margin-top:0}
@media (max-width:900px){.qm-sections{grid-template-columns:1fr}}

/* Slot table visual enhancement */
.qm-slot-table { border-collapse:separate; border-spacing:0 6px; width:100%; }
.qm-slot-table thead th { font-size:.68rem; text-transform:uppercase; letter-spacing:.6px; font-weight:600; color:#4a545d; background:transparent; border:none; padding:.4rem .75rem; }
body.dark .qm-slot-table thead th { color:#c2c9d0; }
.qm-slot-table tbody tr { background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.05); transition:box-shadow .15s, transform .15s; }
body.dark .qm-slot-table tbody tr { background:#1e1f22; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.qm-slot-table tbody tr:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.08); }
body.dark .qm-slot-table tbody tr:hover { box-shadow:0 4px 12px rgba(0,0,0,.65); }
.qm-slot-table tbody td { padding:.65rem .75rem; font-size:.78rem; border-top:1px solid #e3e7eb; border-bottom:1px solid #e3e7eb; }
body.dark .qm-slot-table tbody td { border-color:#2a2f33; }
.qm-slot-table tbody tr td:first-child { border-left:1px solid #e3e7eb; border-top-left-radius:10px; border-bottom-left-radius:10px; }
.qm-slot-table tbody tr td:last-child { border-right:1px solid #e3e7eb; border-top-right-radius:10px; border-bottom-right-radius:10px; }
body.dark .qm-slot-table tbody tr td:first-child, body.dark .qm-slot-table tbody tr td:last-child { border-color:#2a2f33; }
.qm-slot-table .badge-status { font-size:.6rem; letter-spacing:.4px; font-weight:600; padding:.25rem .5rem; border-radius:8px; display:inline-block; line-height:1.0; }
.qm-slot-table .badge-status .topline { white-space:nowrap; display:block; }
.qm-slot-table .badge-status .remain { display:block; opacity:.95; }
/* Global badge-status line handling (applies also to cards) */
.badge-status .topline { white-space:nowrap; display:block; margin:0; padding:0; }
.badge-status .remain { display:block; margin:0; padding:0; }
.qm-slot-table .col-action { text-align:right; }

.qm-mod-hint { margin:.2rem 0 1rem; font-size:.68rem; background:#fffaf2; border:1px solid #f0e2c5; color:#6f4c00; padding:.55rem .75rem; border-radius:10px; box-shadow:0 2px 4px rgba(0,0,0,.04); }
body.dark .qm-mod-hint { background:#2e281d; border-color:#4a3c25; color:#e6c892; }

@media (max-width:760px){
    .qm-slot-table thead { display:none; }
    .qm-slot-table tbody tr { display:grid; grid-template-columns:1fr 1fr; gap:.25rem .5rem; padding:.6rem .65rem; }
    .qm-slot-table tbody td { border:none !important; padding:.25rem 0; }
    .qm-slot-table tbody td.col-action { grid-column:1 / -1; text-align:left; margin-top:.3rem; }
}

@media (max-width:680px){
    .qm-detail-head { flex-direction:column; align-items:flex-start; }
    .qm-detail-head .back-link { order:2; }
    .qm-detail-head h1 { font-size:1.15rem; }
    .qm-create-title { font-size:1.15rem; }
    .qm-detail-table th { width:120px; }
}

/* (Legacy profile-* / pf-* removed – replaced by prf-* scoped styles) */

/* ==========================================================================
   14. KALENDER KOMPONENTEN
   ========================================================================== */

/* --------------------------------------------------------------------------
    NEW ISOLATED PROFILE LAYOUT (prf-*) – overrides old when present
    -------------------------------------------------------------------------- */
.prf-wrapper { background:#fff; border:1px solid #d9e0e6; border-radius:26px; padding:2.1rem 2.2rem 2.4rem; max-width:1100px; margin:0 auto 2.5rem; position:relative; box-shadow:0 8px 26px -8px rgba(0,0,0,.08); }
body.dark .prf-wrapper { background:#15181b; border-color:#262c32; box-shadow:0 10px 34px -10px rgba(0,0,0,.85); }
.prf-header { margin:0 0 1.4rem; }
.prf-title { margin:0 0 .3rem; font-size:1.55rem; letter-spacing:.4px; }
.prf-sub { margin:0; font-size:.72rem; opacity:.65; letter-spacing:.4px; }
.prf-alert { padding:.55rem .8rem; border-radius:10px; font-size:.68rem; margin:0 0 .7rem; font-weight:600; letter-spacing:.4px; }
.prf-alert--ok { 
    background:linear-gradient(90deg,var(--primary-safe, var(--primary,#0d6efd)) 0%,var(--primary-safe, var(--primary,#0d6efd)) 100%);
    color:var(--on-primary-safe, #fff); 
    box-shadow:0 2px 6px rgba(0,0,0,.15); 
}
.prf-alert--err { background:#b00020; color:#fff; }
body.dark .prf-alert--err { background:#7a0e1a; color:#fff; }
.prf-form { margin:0; }
.prf-fieldset { border:0; padding:0 0 1.6rem; margin:0 0 1.9rem; border-bottom:1px solid rgba(0,0,0,.08); }
body.dark .prf-fieldset { border-bottom-color:rgba(255,255,255,.08); }
.prf-legend { font-size:.8rem; text-transform:uppercase; letter-spacing:.55px; font-weight:700; margin:0 0 1rem; opacity:.8; }
.prf-grid { display:grid; gap:1rem 1.2rem; }
.prf-grid--basic { grid-template-columns:repeat(4,1fr); }
/* Reflow variant */
.prf-grid--reflow .prf-field { min-width:0; }
.prf-field { min-width:0; }
@media (max-width:1100px){ .prf-grid--basic { grid-template-columns:repeat(3,1fr); } }
@media (max-width:880px){ .prf-grid--basic { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .prf-grid--basic { grid-template-columns:1fr; } }
.prf-span-1 { grid-column:span 1; }
.prf-span-2 { grid-column:span 2; }
.prf-span-4 { grid-column:1 / -1; }
.prf-field { display:flex; flex-direction:column; gap:.45rem; }
.prf-label { font-size:.62rem; font-weight:600; letter-spacing:.55px; text-transform:uppercase; }
.prf-field input, .prf-field select { font-size:.78rem; padding:.55rem .65rem; border:1px solid #c5cbd2; border-radius:10px; background:#f5f8fa; transition:.18s; }
body.dark .prf-field input, body.dark .prf-field select { background:#1f2327; border-color:#343a40; color:#e2e6ea; }
.prf-field input:focus, .prf-field select:focus { outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 2px rgba(13,110,253,.25); }
body.dark .prf-field input:focus, body.dark .prf-field select:focus { background:#262c31; box-shadow:0 0 0 2px rgba(13,110,253,.45); }
.prf-field--phone input { max-width:100%; }
.prf-field--age input { max-width:100%; }
.prf-field--email input { max-width:100%; }
/* Compact small trailing fields */
.prf-field--compact input, .prf-field--compact select { padding:.45rem .55rem; font-size:.74rem; }
@media (max-width:880px){ .prf-field--age input { max-width:none; } }
.prf-sections { display:grid; gap:1.4rem; }
.prf-box { background:#f7f9fb; border:1px solid #d8dee3; border-radius:18px; padding:1.15rem 1.25rem 1.25rem; position:relative; }
body.dark .prf-box { background:#1b1f23; border-color:#2a2f34; }
.prf-box-title { margin:0 0 .9rem; font-size:.78rem; letter-spacing:.55px; font-weight:700; text-transform:uppercase; opacity:.8; }
/* Stat cards in profile */
.prf-stat-card { /* base styles are inline in PHP; keep CSS only for dark overrides to avoid regressions */ border-radius:.5rem; }
/* Match stat cards to input tone in dark mode for subtle contrast */
body.dark .prf-stat-card { background:#1f2327 !important; border-color:#343a40 !important; }
body.dark .prf-stat-card .prf-stat-label { color:#a8b2bb !important; }
body.dark .prf-stat-card .prf-stat-num { color:#e6ecf2 !important; opacity:1 !important; }
.prf-avatar-row { display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; }
.prf-avatar-preview { width:110px; height:110px; border-radius:20px; background:#eef1f4; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.08); }
body.dark .prf-avatar-preview { background:#23272b; }
.prf-avatar-img { width:100%; height:100%; object-fit:cover; display:block; }
.prf-avatar-ph { font-size:2.2rem; opacity:.45; }
.prf-field--file input { padding:.4rem .55rem; font-size:.72rem; background:#fff; }
body.dark .prf-field--file input { background:#262c31; }
.prf-note, .prf-hint { font-size:.55rem; letter-spacing:.35px; opacity:.65; margin:.4rem 0 0; }
.prf-check { font-size:.7rem; display:flex; gap:.55rem; align-items:flex-start; line-height:1.35; }
.prf-check input { margin-top:2px; }
.prf-actions { margin-top:2rem; }
.prf-save { font-size:.75rem; letter-spacing:.55px; padding:.65rem 1.5rem; font-weight:600; }
@media (max-width:680px){ .prf-wrapper { padding:1.6rem 1.2rem 1.8rem; border-radius:22px; } .prf-avatar-row { gap:1rem; } .prf-avatar-preview { width:90px; height:90px; } }

/* ---------- Week Grid ---------- */
.week-grid { 
    --cell-bg:#fff; 
}

/* Dashboard head (unique dash-*) */
.dash-head{margin:.2rem 0 1rem}
.dash-bar{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1rem}
.dash-title{margin:0;font-size:1.6rem}
.dash-meta{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;opacity:.9;margin-top:.25rem}
.dash-date{font-size:.9rem;letter-spacing:.3px}
.dash-greet{font-size:.95rem;font-weight:700;white-space:nowrap;background:#fff;border:1px solid #d0d7de;border-radius:12px;padding:.55rem .8rem;box-shadow:0 2px 8px rgba(0,0,0,.06)}
body.dark .dash-meta{opacity:.95}
body.dark .dash-greet{background:#1e1f22;border-color:#2c3136;color:#d5dae0;box-shadow:none}

/* Dashboard grid */
.dash-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.dash-grid>.card{grid-column:span 4;background:#fff;border:1px solid #e0e5ea;border-radius:14px;padding:1rem 1rem 1.1rem;box-shadow:0 2px 6px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:.5rem}
.dash-grid>.card.span-8{grid-column:span 8}
.dash-grid>.card.span-6{grid-column:span 6}
.dash-grid>.card.span-12{grid-column:span 12}
@media (max-width:1024px){.dash-grid>.card{grid-column:span 6}}
@media (max-width:680px){
    .dash-bar{grid-template-columns:1fr}
    .dash-greet{justify-self:start}
    .dash-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
    /* Force exactly one card per row on very small screens */
    .dash-grid>.card,
    .dash-grid>.card.span-6,
    .dash-grid>.card.span-8,
    .dash-grid>.card.span-12{grid-column:1/-1}
}

/* Lists and quick links used on dashboard */
.mini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.mini-list li a{text-decoration:none;font-size:.75rem;font-weight:500;color:var(--link-color)}
.mini-list li a:hover{text-decoration:underline}
.muted{opacity:.65;font-size:.7rem;margin:.2rem 0 .4rem}
.quick-links a{text-decoration:none;font-size:.7rem;font-weight:500;color:var(--link-color);display:inline-block;padding:.35rem .5rem;border-radius:8px;background:#f3f6f9;border:1px solid #d8dee3}
.quick-links a:hover{background:#e6edf4}
body.dark .dash-grid>.card{background:#1e1f22;border-color:#2c3136;color:#d5dae0}
body.dark .mini-list li a{color:var(--link-color)}
body.dark .quick-links a{background:#262b30;border-color:#394047;color:#d5dae0}
body.dark .quick-links a:hover{background:#31373d}

/* Quick Actions (Schnellzugriff) */
.qa-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.qa-item a{display:flex;align-items:flex-start;gap:.75rem;padding:.8rem .9rem;border:1px solid #d8dee3;background:#f8fafc;border-radius:12px;text-decoration:none}
.qa-icon{flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.qa-main{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.qa-title{font-weight:700;font-size:.92rem;color:inherit}
.qa-sub{font-size:.72rem;opacity:.8;line-height:1.35}
.qa-item a:hover{background:#eef3f8;border-color:#c9d1d8}
@media (max-width:1100px){.qa-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){.qa-list{grid-template-columns:1fr}}
body.dark .qa-item a{background:#262b30;border-color:#394047;color:#d5dae0}
body.dark .qa-item a:hover{background:#31373d;border-color:#46505a}
body.dark .qa-sub{opacity:.85}

/* Mobile safeguard: prevent wide filter fields from enforcing large min-widths */
@media (max-width: 560px){ .filter-field.wide { min-width:0; } }

body.dark .week-grid { 
    --cell-bg:#1e1f22; 
}

/* ---------- Calendar Day ---------- */
.cal-day { 
    background:var(--cell-bg); 
    border:1px solid #dcdfe3; 
    border-radius:10px; 
    min-height:200px; 
    display:flex; 
    flex-direction:column; 
    position:relative; 
    overflow:hidden; 
}

body.dark .cal-day { 
    border-color:#2c2f33; 
}

.cal-day.weekend { 
    background:linear-gradient(135deg,var(--cell-bg) 0%, #f5f0ff 100%); 
}

body.dark .cal-day.weekend { 
    background:linear-gradient(135deg,var(--cell-bg) 0%, #2a2533 100%); 
}

.cal-day.today { 
    box-shadow:0 0 0 2px var(--primary) inset; 
}

/* Calendar Header */
.cal-head { 
    display:flex; 
    justify-content:space-between; 
    align-items:flex-start; 
    padding:.45rem .55rem .35rem; 
    font-size:.65rem; 
    border-bottom:1px solid #eceff3; 
}

body.dark .cal-head { 
    border-color:#2a2d31; 
}

.cal-date { 
    display:flex; 
    flex-direction:column; 
    line-height:1.1; 
    font-weight:600; 
}

.cal-abbr { 
    font-size:.7rem; 
    text-transform:uppercase; 
    letter-spacing:.5px; 
    opacity:.85; 
}

.cal-num { 
    font-size:.95rem; 
}

.cal-meta { 
    display:flex; 
    align-items:center; 
    gap:.35rem; 
}

.cal-count { 
    background:#eef2f7; 
    color:#334; 
    padding:2px 6px; 
    border-radius:12px; 
    font-size:.55rem; 
    font-weight:600; 
}

body.dark .cal-count { 
    background:#2c323a; 
    color:#ccd; 
}

/* ---------- Calendar Slots ---------- */
.slot-stack { 
    flex:1; 
    position:relative; 
    padding:.4rem .45rem .55rem; 
    display:flex; 
    flex-direction:column; 
    gap:.35rem; 
    font-size:.62rem; 
}

.slot-stack .empty { 
    opacity:.35; 
    font-size:.58rem; 
    margin-top:.25rem; 
}

.cal-slot { 
    display:block; 
    padding:.35rem .45rem .4rem; 
    border-radius:6px; 
    background:#eef2ff; 
    border:1px solid #c9d2ec; 
    line-height:1.15; 
    position:relative; 
    overflow:hidden; 
    text-decoration:none; 
    color:#182033; 
    transition:background .15s,border-color .15s,transform .15s; 
}

.cal-slot:hover { 
    background:#e3eaff; 
}

body.dark .cal-slot { 
    background:#262e44; 
    border-color:#394760; 
    color:#d3d9e4; 
}

body.dark .cal-slot:hover { 
    background:#2f3a53; 
}

/* Calendar Slot States */
.cal-slot.full { 
    background:#fde8e8; 
    border-color:#f5b8b8; 
}

.cal-slot.warn { 
    background:#fff5dd; 
    border-color:#f5d89a; 
}

body.dark .cal-slot.full { 
    background:#4a2222; 
    border-color:#703636; 
}

body.dark .cal-slot.warn { 
    background:#4d4021; 
    border-color:#6d5c33; 
}

/* Calendar Slot Content */
.cal-slot .time-line { 
    display:flex; 
    align-items:center; 
    gap:.25rem; 
    font-weight:600; 
    font-size:.62rem; 
}

.cal-slot .time { 
    font-size:.7rem; 
}

.cal-slot .mode { 
    display:inline-block; 
    width:16px; 
    text-align:center; 
    font-size:.55rem; 
    padding:2px 0; 
    border-radius:4px; 
    background:#fff; 
    color:#333; 
    font-weight:700; 
    box-shadow:0 1px 2px rgba(0,0,0,.15); 
}

body.dark .cal-slot .mode { 
    background:#111; 
    color:#eee; 
}

.cal-slot .mode.double { 
    background:#ffecd3; 
    color:#8a5200; 
}

body.dark .cal-slot .mode.double { 
    background:#4a3617; 
    color:#ffcf8a; 
}

/* Calendar Slot Capacity */
.cal-slot .cap { 
    font-size:.55rem; 
    font-weight:600; 
    padding:1px 5px; 
    border-radius:12px; 
    background:#ddebf7; 
    color:#124269; 
    margin-left:auto; 
}

.cal-slot .cap.ok { 
    background:#ddf7e7; 
    color:#0e5c35; 
}

.cal-slot .cap.warn { 
    background:#fff0c8; 
    color:#7d5200; 
}

.cal-slot .cap.full { 
    background:#ffd9d9; 
    color:#8e0d0d; 
}

body.dark .cal-slot .cap { 
    background:#233446; 
    color:#8abbe5; 
}

body.dark .cal-slot .cap.ok { 
    background:#1e3a2b; 
    color:#6bd9a4; 
}

body.dark .cal-slot .cap.warn { 
    background:#4a3a17; 
    color:#ffc562; 
}

body.dark .cal-slot .cap.full { 
    background:#522626; 
    color:#ff9b9b; 
}

.cal-slot .note { 
    font-size:.55rem; 
    opacity:.75; 
    margin-top:2px; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
}

/* Drag Ghost (Drag & Drop) */
.drag-ghost { 
    position:absolute; 
    left:2px; 
    right:2px; 
    background:rgba(13,110,253,.15); 
    border:1px dashed var(--primary); 
    border-radius:6px; 
    pointer-events:none; 
}

body.dark .drag-ghost { 
    background:rgba(13,110,253,.25); 
}

/* --------------------------------------------------------------------------
     TWO-WEEK CALENDAR (tcal-*) – scoped, mobile-friendly
     -------------------------------------------------------------------------- */
.tcal{margin:0 0 1.4rem}
.tcal-title{margin:.2rem 0 1rem;font-size:1.3rem;letter-spacing:.4px}
.tcal-topbar{display:flex;flex-direction:column;gap:.5rem;margin:0 0 .9rem}
.tcal-row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}
.tcal-row--nav{row-gap:.4rem}
.tcal-nav{display:flex;gap:.5rem;flex-wrap:wrap}
.tcal-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.tcal-jump{display:flex;gap:.5rem;align-items:center}
.tcal-jump label{font-size:.9rem;opacity:.85;white-space:nowrap}
.tcal-legend{font-size:.85rem;opacity:.85}
.tcal-legend .tcal-mode{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border-radius:4px;background:#eef2f7;color:#223;font-weight:700;font-size:.7rem;margin:0 .2rem}
body.dark .tcal-legend .tcal-mode{background:#2c323a;color:#dde}
.tcal-btn{display:inline-block;background:#fff;border:1px solid #d8dde2;border-radius:10px;padding:.45rem .7rem;font-size:.75rem;font-weight:700;letter-spacing:.4px;color:inherit;text-decoration:none}
.tcal-btn:hover{filter:brightness(1.05);text-decoration:none}
.tcal-btn--primary{background:var(--primary-safe, var(--primary));border-color:var(--primary-safe, var(--primary));color:var(--on-primary-safe, #fff)}
body.dark .tcal-btn{background:#1e1f22;border-color:#2c2f33;color:#d5dae0}

.tcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem;font-size:.75rem;margin:.4rem 0 1rem}
.tcal-day{background:var(--cell-bg,#fff);border:1px solid #dcdfe3;border-radius:10px;min-height:200px;display:flex;flex-direction:column;position:relative;overflow:hidden}
body.dark .tcal-day{--cell-bg:#1e1f22;border-color:#2c2f33}
.tcal-day.is-weekend{background:linear-gradient(135deg,var(--cell-bg,#fff) 0%, #f5f0ff 100%)}
body.dark .tcal-day.is-weekend{background:linear-gradient(135deg,var(--cell-bg,#1e1f22) 0%, #2a2533 100%)}
.tcal-day.is-today{box-shadow:0 0 0 2px var(--primary) inset}

.tcal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:.45rem .55rem .35rem;font-size:.65rem;border-bottom:1px solid #eceff3}
body.dark .tcal-head{border-color:#2a2d31}
.tcal-date{display:flex;flex-direction:column;line-height:1.1;font-weight:600}
.tcal-abbr{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;opacity:.85}
.tcal-num{font-size:.95rem}
.tcal-meta{display:flex;align-items:center;gap:.35rem}
.tcal-count{background:#eef2f7;color:#334;padding:2px 6px;border-radius:12px;font-size:.55rem;font-weight:600}
body.dark .tcal-count{background:#2c323a;color:#ccd}
.tcal-add{background:var(--primary-safe, var(--primary));color:var(--on-primary-safe, #fff);border:0;border-radius:6px;font-size:.85rem;line-height:1;padding:.1rem .4rem;cursor:pointer}

.tcal-stack{flex:1;position:relative;padding:.4rem .45rem .55rem;display:flex;flex-direction:column;gap:.35rem;font-size:.62rem}
.tcal-empty{opacity:.35;font-size:.58rem;margin-top:.25rem}
.tcal-slot{display:block;padding:.35rem .45rem .4rem;border-radius:6px;background:#eef2ff;border:1px solid #c9d2ec;line-height:1.15;position:relative;overflow:hidden;text-decoration:none;color:#182033;transition:background .15s,border-color .15s,transform .15s}
.tcal-slot:hover{background:#e3eaff}
body.dark .tcal-slot{background:#262e44;border-color:#394760;color:#d3d9e4}
body.dark .tcal-slot:hover{background:#2f3a53}
.tcal-slot.tcal-tm{background:#e9fff4;border-color:#bfead2}
body.dark .tcal-slot.tcal-tm{background:#1d2e25;border-color:#29513e}
.tcal-slot.tcal-tm .tcal-mode{background:#fff0f0;color:#b00020}
.tcal-slot.full{background:#fde8e8;border-color:#f5b8b8}
.tcal-slot.warn{background:#fff5dd;border-color:#f5d89a}
body.dark .tcal-slot.full{background:#4a2222;border-color:#703636}
body.dark .tcal-slot.warn{background:#4d4021;border-color:#6d5c33}
.tcal-time{display:flex;align-items:center;gap:.25rem;font-weight:600;font-size:.62rem}

/* Responsive: stack controls cleanly and prevent horizontal scroll */
@media (max-width: 720px){
    .tcal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 480px){
    .tcal-grid{grid-template-columns:1fr;}
    .tcal-row{flex-direction:column;align-items:flex-start}
}
.tcal-time__from{font-size:.7rem}
.tcal-mode{display:inline-block;width:16px;text-align:center;font-size:.55rem;padding:2px 0;border-radius:4px;background:#fff;color:#333;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.15)}
body.dark .tcal-mode{background:#111;color:#eee}
.tcal-mode.double{background:#ffecd3;color:#8a5200}
body.dark .tcal-mode.double{background:#4a3617;color:#ffcf8a}
.tcal-cap{font-size:.55rem;font-weight:600;padding:1px 5px;border-radius:12px;background:#ddebf7;color:#124269;margin-left:auto}
.tcal-cap.ok{background:#ddf7e7;color:#0e5c35}
.tcal-cap.warn{background:#fff0c8;color:#7d5200}
.tcal-cap.full{background:#ffd9d9;color:#8e0d0d}
body.dark .tcal-cap{background:#233446;color:#8abbe5}
body.dark .tcal-cap.ok{background:#1e3a2b;color:#6bd9a4}
body.dark .tcal-cap.warn{background:#4a3a17;color:#ffc562}
body.dark .tcal-cap.full{background:#522626;color:#ff9b9b}
.tcal-note{font-size:.55rem;opacity:.75;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:900px){
    .tcal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:700px){
    .tcal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
    .tcal-grid{grid-template-columns:1fr}
}

/* Desktop readability upgrades for calendar (kept near tcal block for clarity) */
@media (min-width: 1024px){
    .tcal-title{font-size:1.5rem}
    .tcal-topbar{gap:.9rem}
    .tcal-btn{font-size:.9rem;padding:.5rem .85rem}
    .tcal-jump input[type="date"]{font-size:.95rem;padding:.42rem .5rem}
    .tcal-legend{font-size:.95rem}

    .tcal-grid{gap:.8rem;font-size:.92rem}
    .tcal-day{min-height:220px}
    .tcal-head{padding:.6rem .75rem .5rem;font-size:.85rem}
    .tcal-abbr{font-size:.8rem}
    .tcal-num{font-size:1.1rem}
    .tcal-empty{font-size:.7rem}

    .tcal-slot{padding:.5rem .65rem .55rem}
    .tcal-time{font-size:.8rem}
    .tcal-time__from{font-size:.9rem}
    .tcal-mode{width:20px;font-size:.7rem;padding:3px 0}
    .tcal-cap{font-size:.7rem;padding:2px 9px}
    .tcal-note{font-size:.65rem}
}

@media (min-width: 1400px){
    .tcal-grid{gap:.95rem;font-size:.96rem}
    .tcal-title{font-size:1.6rem}
    .tcal-head{font-size:.9rem}
    .tcal-time{font-size:.9rem}
    .tcal-time__from{font-size:.95rem}
    .tcal-mode{width:22px;font-size:.75rem}
    .tcal-cap{font-size:.75rem;padding:3px 10px}
}

/* ==========================================================================
   15. SLOT CREATE FORM
   ========================================================================== */

.slot-create-form .form-shell { 
    background:#fff; 
    border:1px solid #d8dde2; 
    border-radius:22px; 
    padding:1.4rem 1.6rem 1.2rem; 
    box-shadow:0 4px 8px rgba(0,0,0,.05); 
}

body.dark .slot-create-form .form-shell { 
    background:#1e1f22; 
    border-color:#2c2f33; 
}

.slot-create-form .form-grid { 
    display:flex; 
    flex-wrap:wrap; 
    gap:1.1rem 1.6rem; 
    align-items:flex-start; 
}

/* Form Grid Field Sizing */
.slot-create-form .form-grid > .filter-field { 
    flex:1 1 180px; 
}

.slot-create-form .form-grid > .filter-field.wide { 
    flex:1 1 100%; 
}

.slot-create-form .form-grid > .filter-field.time-field { 
    flex:0 0 170px; 
}

.slot-create-form .form-grid > .filter-field.time-field input[type=time] { 
    max-width:150px; 
}

.slot-create-form .form-grid > .field-date { 
    flex:1 1 200px; 
}

.slot-create-form .form-grid > .field-mode { 
    flex:1 1 170px; 
}

.slot-create-form .form-grid > .field-play { 
    flex:2 1 260px; 
}

.slot-create-form .form-grid > .field-double { 
    flex:3 1 360px; 
}

.slot-create-form .form-grid > .field-max { 
    flex:0 0 150px; 
}

/* Reserve inline space for Duration info to avoid layout jump */
#durInfo { display:inline-block; min-width:52px; text-align:right; font-size:.6rem; font-weight:600; color:#6b7480; background:#eef1f5; padding:.25rem .45rem; border-radius:6px; line-height:1; }
body.dark #durInfo { background:#2a3036; color:#c6cdd3; }
/* Hidden state before both times set */
body:not(.tn-dur-ready) #durInfo:empty { visibility:hidden; }

/* Textarea in Slot Form */
.slot-create-form textarea { 
    font-family:inherit; 
    font-size:.8rem; 
    padding:.55rem .7rem; 
    border:1px solid #c3c9d1; 
    border-radius:10px; 
    background:#f5f7fa; 
    resize:vertical; 
    min-height:90px; 
}

body.dark .slot-create-form textarea { 
    background:#262b30; 
    border-color:#3a4047; 
    color:#e2e6eb; 
}

.slot-create-form textarea:focus { 
    outline:none; 
    border-color:var(--primary); 
    background:#fff; 
    box-shadow:0 0 0 2px rgba(13,110,253,.18); 
}

body.dark .slot-create-form textarea:focus { 
    box-shadow:0 0 0 2px rgba(13,110,253,.35); 
}

/* Multiselect in Slot Form */
.slot-create-form .multiselect { 
    width:100%; 
    font-size:.75rem; 
    padding:.4rem .5rem; 
    border:1px solid #c3c9d1; 
    border-radius:10px; 
    background:#f5f7fa; 
}

body.dark .slot-create-form .multiselect { 
    background:#262b30; 
    border-color:#3a4047; 
    color:#e2e6eb; 
}

.slot-create-form .form-actions { 
    margin-top:1.1rem; 
    display:flex; 
    align-items:center; 
    gap:1rem; 
}

/* Time Suffix Label */
.time-suffix { 
    font-size:.7rem; 
    font-weight:600; 
    letter-spacing:.5px; 
    background:#e8edf2; 
    padding:.25rem .45rem; 
    border-radius:8px; 
    color:#334; 
}

body.dark .time-suffix { 
    background:#2a3036; 
    color:#ccd2d9; 
}

/* ---------- Slot Help Box ---------- */
.slot-help { 
    margin:1.6rem 0 0; 
    background:#fff; 
    border:1px solid #d8dde2; 
    border-radius:16px; 
    padding:1.2rem 1.4rem 1.3rem; 
    line-height:1.45; 
    font-size:.84rem; 
    box-shadow:0 2px 5px rgba(0,0,0,.04); 
}

body.dark .slot-help { 
    background:#1e1f22; 
    border-color:#2c2f33; 
}

.slot-help h3 { 
    margin:.2rem 0 .7rem; 
    font-size:1.05rem; 
}

.slot-help ul { 
    margin:.4rem 0 .3rem 1rem; 
    padding:0; 
}

.slot-help li { 
    margin:.25rem 0; 
}

/* ==========================================================================
   16. UTILITIES & HELPERS
   ========================================================================== */

/* Flash Messages */
.flash { 
    padding:.5rem 1rem; 
    margin:.5rem 0; 
    border-left:4px solid var(--primary); 
    background:#eef; 
}
body.dark .flash {
    background:#18212a;
    border-left-color:var(--primary);
    color:#d5e2ec;
    box-shadow:0 0 0 1px #23313d inset;
}

/* Error Text */
.error { 
    color:#b00020; 
}

/* Muted Text */
.muted { 
    opacity:.65; 
    font-size:.8rem; 
}

/* Lists */
.mini-list { 
    list-style:none; 
    margin:.4rem 0; 
    padding:0; 
}

.mini-list li { 
    margin:.2rem 0; 
    font-size:.82rem; 
}

.mini-list a { 
    text-decoration:none; 
}

.mini-list a:hover { 
    text-decoration:underline; 
}

/* Status Icons */
.status-icon { 
    width:12px; 
    height:12px; 
    vertical-align:middle; 
    margin-right:4px; 
}

.status-icon.ok circle { 
    fill:#1fa856; 
}

.status-icon.warn circle { 
    fill:#ffb200; 
}

.status-icon.full circle { 
    fill:#d93025; 
}

/* ==========================================================================
   17. TOAST NOTIFICATIONS
   ========================================================================== */

#toastStack { 
    position:fixed; 
    bottom:1rem; 
    right:1rem; 
    display:flex; 
    flex-direction:column; 
    gap:.5rem; 
    z-index:999; 
}

.toast { 
    background:#222; 
    color:#fff; 
    padding:.6rem .9rem; 
    border-radius:6px; 
    font-size:.8rem; 
    box-shadow:0 4px 12px rgba(0,0,0,.25); 
    opacity:0; 
    transform:translateY(10px); 
    animation:toast-in .35s forwards; 
}

body.dark .toast { 
    background:#333; 
}

.toast.out { 
    animation:toast-out .45s forwards; 
}

/* ==========================================================================
   18. ANIMATIONEN
   ========================================================================== */

/* Toast Animations */
@keyframes toast-in { 
    to { 
        opacity:1; 
        transform:translateY(0); 
    } 
}

@keyframes toast-out { 
    to { 
        opacity:0; 
        transform:translateY(6px); 
    } 
}

/* Chip Animation */
.chip.fade-in { 
    animation:chipIn .35s ease; 
}

@keyframes chipIn { 
    from { 
        opacity:0; 
        transform:scale(.85); 
    } 
    to { 
        opacity:1; 
        transform:scale(1); 
    } 
}

/* Pulse Animation */
@keyframes pulse { 
    from { 
        opacity:.6; 
        transform:scale(.97); 
    } 
    to { 
        opacity:0; 
        transform:scale(1.05); 
    } 
}

/* TN Nav Animation */
@keyframes tnNavSlide { 
    from { 
        opacity:0; 
        transform:translateY(-6px); 
    } 
    to { 
        opacity:1; 
        transform:translateY(0); 
    } 
}

/* Content Transitions */
#slotTableWrap, 
#slotCards { 
    transition:opacity .35s ease, transform .35s ease; 
}

#slotCards.enter, 
#slotTableWrap.enter { 
    opacity:0; 
    transform:scale(.98); 
}

#slotCards.active, 
#slotTableWrap.active { 
    opacity:1; 
    transform:scale(1); 
}

/* ==========================================================================
   19. RESPONSIVE DESIGN / MEDIA QUERIES
   ========================================================================== */

/* ---------- Mobile Navigation (900px) ---------- */
@media (max-width: 900px) {
    /* Header Navigation Mobile */
    .nav-toggle { 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
    }
    
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; 
        right: 0;
        background: var(--primary);
        padding: .75rem 1rem;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
    }
    
    .nav-menu.open { 
        display: block; 
    }
    
    .nav-menu.open .nav-list { 
        flex-direction:column; 
        align-items:stretch; 
        gap:.35rem; 
    }
    
    .nav-menu.open .nav-list > li > a,
    .nav-menu.open .nav-list > li > button { 
        width:100%; 
        text-align:left; 
        padding:.55rem .4rem; 
    }
    
    .nav-list { 
        flex-direction: column; 
        gap: .25rem; 
    }
    
    .nav-list a,
    .nav-list .theme-toggle { 
        display: block; 
        padding: .6rem .4rem; 
        width: 100%; 
        text-align: left; 
    }
    
    /* TN Nav Mobile */
    .tn-nav__inner { 
        flex-wrap:wrap; 
        justify-content:flex-start; 
        align-items:center; 
    }
    
    .tn-nav { 
        position:relative; 
    }
    
    .tn-nav__brand { 
        display:flex; 
        align-items:center; 
    }
    
    .tn-nav__toggle { 
        display:inline-flex; 
        position:static; 
        margin-left:auto; 
        transform:none; 
        align-self:stretch; 
        align-items:center; 
        height:auto; 
    }
    
    .tn-nav__brand img { 
        height:32px !important; 
    }
    
    .tn-nav__menu { 
        width:100%; 
        order:99; 
        display:none; 
    }
    
    .tn-nav__menu.open { 
        display:block; 
        animation:tnNavSlide .28s cubic-bezier(.4,.2,.2,1); 
    }
    
    .tn-nav__list { 
        flex-direction:column; 
        align-items:stretch; 
        gap:.2rem; 
    }
    
    .tn-nav__list a, 
    .tn-nav__list button { 
        width:100%; 
        padding:.65rem .7rem; 
    }
    
    /* Slot Create Form */
    .slot-create-form .form-grid > .field-double { 
        flex:1 1 100%; 
    }
    
    .slot-create-form .form-grid > .field-play { 
        flex:1 1 100%; 
    }
    
    /* Week Grid */
    .week-grid { 
        font-size:.68rem; 
        gap:.5rem; 
    }
    
    .cal-slot { 
        padding:.3rem .4rem; 
    }
}

/* ---------- Desktop Navigation (901px+) ---------- */
@media (min-width: 901px) {
    .nav-menu { 
        display:flex !important; 
    }
    
    .nav-list { 
        flex-direction:row !important; 
        flex-wrap:nowrap !important; 
    }
    
    .nav-toggle { 
        display:none !important; 
    }
    
    /* TN Nav Desktop Scroll Protection */
    .tn-nav__list { 
        flex-wrap:nowrap; 
        overflow-x:auto; 
        scrollbar-width:none; 
    }
    
    .tn-nav__list::-webkit-scrollbar { 
        display:none; 
    }
}

/* ---------- Filter Bar (880px) ---------- */
@media (max-width:880px){ 
    .filter-field.wide { 
        flex:1 1 100%; 
    } 
}

/* ---------- Slot Form (780px) ---------- */
@media (max-width:780px){ 
    .slot-create-form .form-grid > .filter-field { 
        flex:1 1 46%; 
    } 
}

/* ---------- Responsive Tables (760px) ---------- */
@media (max-width:760px){
    #slotTableWrap { 
        overflow-x:auto; 
        -webkit-overflow-scrolling:touch; 
    }
    
    #slotTableWrap table { 
        min-width:720px; 
    }
}

/* ---------- Navigation Wrap Protection (700px) ---------- */
@media (max-width: 700px) {
    .site-header nav { 
        flex-wrap: nowrap !important; 
    }
}

/* ---------- Mobile Screens (640px) ---------- */
@media (max-width:640px) {
    /* Table Font Size */
    .table { 
        font-size:.8rem; 
    }
    
    /* Header Navigation */
    .site-header nav a { 
        font-size:.85rem; 
    }
    
    /* Week Grid */
    .week-grid { 
        grid-template-columns:repeat(2,1fr); 
    }
    
    /* Slot Create Form */
    .slot-create-form .form-grid > .filter-field.time-field { 
        flex:1 1 47%; 
    }
    
    .slot-create-form .form-grid > .field-mode { 
        flex:1 1 47%; 
    }
    
    .slot-create-form .form-grid > .field-play { 
        flex:1 1 100%; 
    }
    
    .slot-create-form .form-grid > .field-double { 
        flex:1 1 100%; 
    }
    
    .slot-create-form .form-grid > .field-max { 
        flex:1 1 47%; 
    }
}

/* ---------- Filter Fields (600px) ---------- */
@media (max-width:600px) { 
    .filter-field input, 
    .filter-field select { 
        min-width:120px; 
    }
    
    .filter-actions { 
        flex:1 1 100%; 
    }
}

/* ---------- Slot Form Small (560px) ---------- */
@media (max-width:560px){ 
    .slot-create-form .form-grid > .filter-field { 
        flex:1 1 100%; 
    } 
}

/* ---------- Auth Card (540px) ---------- */
@media (max-width:540px) { 
    .auth-card { 
        margin:1.2rem 1rem; 
        padding:1.5rem 1.4rem 1.6rem; 
    }
    
    .auth-title { 
        font-size:1.45rem; 
    }
    
    .auth-form { 
        gap:.85rem; 
    }
    
    .auth-btn { 
        padding:.75rem 1rem; 
    }
}