/* =========================================================
   RideAbo Admin Styles — THEMING CLEANUP (2025-08-12)
   -----------------------------------------------------
   - Konsolidiert, ent-dupliziert, variablenbasiert
   - Theme-Primary an :root Variablen gekoppelt
   - Dark Mode & Warm Mode via Token-Overrides
   - Alle Türkis-Badges (vermietet/info/abo-yes) bleiben FIX türkis
   - Bootstrap-Interferenzen gezielt via !important übersteuert
   ========================================================= */

/* ============================
   1) THEME TOKENS (LIGHT BASE)
   ============================ */
:root{
  /* Primärpalette (Standard: Türkis) */
  --primary-700:#009fa3;  /* dunkler */
  --primary-650:#00b0a8;
  --primary-600:#00b3a7;  /* häufig genutzt */
  --primary-500:#00cfc1;  /* Basis */
  --primary-450:#00d6c6;  /* heller Verlaufston */
  --primary-350:#2dd3c5;  /* Akzent/Hover-Rand */
  --primary-100:#e9fdfa;  /* sehr hell (Hover) */
  --primary-50:#f6fdfd;   /* sehr hell (Zebra) */
  --primary-shadow: rgba(0,179,167,.25);
  --on-primary:#fff;

  /* Flächen & Text (Light) */
  --bg:#f4f4f4;
  --bg-soft:#f9fafb;
  --surface:#ffffff;
  --surface-2:#f7f7f7;
  --text:#2e2e2e;
  --text-muted:#555;
  --border:#e5e7eb;

  /* Tabellen-Zebra/Hover */
  --zebra: var(--primary-50);
  --row-hover: var(--primary-100);

  /* Elevation */
  --elev-1: 0 2px 6px rgba(0,0,0,.06);
  --elev-2: 0 6px 18px rgba(0,0,0,.10);

  /* Portal-Variablen an Primär koppeln */
  --main-color: var(--primary-500);
  --main-hover: var(--primary-650);
  --main-light: var(--primary-100);
  --main-shadow: var(--primary-shadow);
}

/* =====================
   2) MODE OVERRIDES
   ===================== */
.theme-dark{
  --bg:#0f1115;
  --bg-soft:#0f131a;
  --surface:#161A22;
  --surface-2:#1A1F2A;
  --text:#E9EEF5;
  --text-muted:#AAB4C0;
  --border:#2A3240;
  --zebra: rgba(255,255,255,0.03);
  --row-hover: rgba(255,255,255,0.06);
  --elev-1: 0 2px 6px rgba(0,0,0,.45);
  --elev-2: 0 8px 24px rgba(0,0,0,.50);
}

.theme-warm{ /* „UV reduziert“/wärmer */
  --bg:#191511;
  --bg-soft:#1d1813;
  --surface:#221D17;
  --surface-2:#261F18;
  --text:#F7EAD9;
  --text-muted:#DFCDB9;
  --border:#3A3026;
  --zebra: rgba(255,245,230,0.04);
  --row-hover: rgba(255,245,230,0.08);
  --elev-1: 0 2px 6px rgba(0,0,0,.45);
  --elev-2: 0 8px 24px rgba(0,0,0,.50);
}

/* =====================
   3) BASE / LAYOUT
   ===================== */
html,body{ height:100%; }
body{
  font-family: 'Segoe UI','Helvetica Neue',sans-serif;
  margin:0;
  background: var(--bg);
  color: var(--text);
}

.content-wrapper{ padding:2rem; }

.card-ra{
  background: var(--surface);
  color: var(--text);
  border-radius:12px;
  box-shadow: var(--elev-1);
  padding:1rem;
}

/* =====================
   4) HEADER
   ===================== */
.header{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 20px;
  background: linear-gradient(to right, #2e2e2e, var(--primary-500));
  color:#fff;
}
.header-logo{ max-height:40px;height:auto;width:auto;margin-right:15px; }

/* =====================
   5) NAVIGATION
   ===================== */
.main-nav{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; background: var(--surface); box-shadow: var(--elev-1); }
.main-nav .nav-btn{
  flex:0 0 auto;
  padding:10px 18px;
  margin:6px 2px;
  background: var(--surface);
  color: var(--primary-600);
  font-weight:600;
  border:none; border-radius:8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  transition: all .15s;
  text-decoration:none; text-align:center;
}
.main-nav .nav-btn:hover{
  background: linear-gradient(to bottom, var(--primary-450), var(--primary-600));
  color: var(--on-primary);
  transform: translateY(-1px);
}
.main-nav .nav-btn.active{
  background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
  color: var(--on-primary);
}
@media(max-width:600px){ .main-nav .nav-btn{ flex:1 1 45%; } }

/* Login-Indicator (rechts) */
.login-indicator{
  font-size:.8rem; color: var(--text);
  background-color: var(--surface-2);
  padding:6px 12px; border-radius:6px;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* =====================
   6) BUTTONS
   ===================== */
.btn-gradient,.btn-teal{
  background: linear-gradient(to bottom, var(--primary-450), var(--primary-600));
  color: var(--on-primary);
  border:none; border-radius:8px;
  padding:10px 20px; margin:6px;
  font-size:15px; font-weight:500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transition: all .15s;
}
.btn-gradient:hover,.btn-teal:hover{ filter: brightness(1.03); transform:translateY(-1px); }
.btn-gradient:active,.btn-teal:active{ transform:translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

.btn-primary{
  background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
  border:none; border-radius:10px;
  font-weight:500; padding:10px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.btn-primary:hover{ background:linear-gradient(to bottom, var(--primary-450), var(--primary-600)); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.1); }

.btn-secondary{
  background:#fff; color: var(--primary-700);
  border:2px solid var(--primary-700); border-radius:10px;
  padding:10px 20px; font-weight:500;
}
.btn-secondary:hover{ background: var(--primary-50); color: var(--primary-700); }

.btn-outline-success{ border:2px solid var(--primary-600); color: var(--primary-600); border-radius:10px; }
.btn-outline-success:hover{ background: var(--primary-600); color:#fff; }

/* Zahnrad/Einstellung neutral halten */
.btn-outline-secondary{ border-color: var(--border); color: var(--text); background: transparent; }
.btn-outline-secondary:hover,.btn-outline-secondary:focus{
  border-color: var(--border); background: var(--row-hover); color: var(--text);
  box-shadow: 0 0 0 3px var(--primary-shadow);
}

/* XS-Button */
.btn-xs{ padding:3px 10px; font-size:.75rem; line-height:1.2; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,0.1); }

/* =====================
   7) FORMS
   ===================== */
.form-control,.form-select{
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius:10px; padding:10px 14px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
  transition: border .15s, box-shadow .15s;
}
.form-control::placeholder{ color: var(--text-muted); }
.form-control:focus,.form-select:focus{
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
  outline: none;
}
/* File input themenfähig */
input[type="file"].form-control{ border-color: var(--primary-100); box-shadow: inset 0 1px 2px rgba(0,0,0,.05); }
input[type="file"].form-control:focus{ border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-shadow); outline:none; }

/* Filterleiste */
.filter-box{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:1.2rem; }
.filter-box .filter-input,.filter-box .filter-select{
  flex:1 1 200px; padding:10px 14px; font-size:.95rem;
  border: 2px solid var(--primary-100); border-radius:12px; background:#fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
  transition: border .15s, box-shadow .15s;
}
.filter-box .filter-input:focus,.filter-box .filter-select:focus{
  border-color: var(--primary-600) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
  outline:none;
}
.filter-box .filter-btn{ padding:10px 20px; font-weight:600; border-radius:12px; border:none; box-shadow:0 2px 4px rgba(0,0,0,.08); transition:all .15s; }
.filter-box .apply{ background:linear-gradient(to bottom, var(--primary-500), var(--primary-600)); color:#fff; }
.filter-box .apply:hover{ background:linear-gradient(to bottom, var(--primary-450), var(--primary-600)); transform:translateY(-1px); }
.filter-box .reset{ background:#fff; color:var(--primary-700); border:2px solid var(--primary-700); }
.filter-box .reset:hover{ background:var(--primary-50); color:var(--primary-700); }
.filter-box .export{ background:#fff; color:var(--primary-600); border:2px solid var(--primary-600); }
.filter-box .export:hover{ background:var(--primary-600); color:#fff; }

/* =====================
   8) TABLES
   ===================== */
table{ width:100%; border-collapse:separate; border-spacing:0; background: var(--surface); border-radius:12px; overflow:hidden; box-shadow: var(--elev-1); color: var(--text); }
.table{ border:none; border-radius:12px; overflow:hidden; box-shadow: var(--elev-1); background: var(--surface); color: var(--text); }

/* Kopfzeile */
.table thead th, table thead th{ background: var(--primary-600) !important; color:#fff !important; border:none !important; padding:12px; font-weight:600; }

/* Zebra/Hover */
.table-striped>tbody>tr:nth-of-type(odd), table tbody tr:nth-child(even){ background: var(--zebra) !important; }
.table-striped>tbody>tr:hover, table tbody tr:hover{ background: var(--row-hover) !important; }

/* =====================
   9) STAT CARDS
   ===================== */
.stat-wrapper{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:1rem; }
.stat-card{ flex:1 1 200px; background: var(--surface); color: var(--text); border-radius:12px; box-shadow: var(--elev-1); padding:1rem; text-align:center; }
.stat-card h5{ margin:0; color: var(--primary-600); font-weight:600; font-size:1rem; }
.stat-card .value{ font-size:2rem; font-weight:700; color: var(--text); margin-top:4px; }

/* =====================
   10) BADGES / STATUS
   ===================== */
.badge{ font-size:.8rem; padding:4px 8px; border-radius:6px; }
.badge.bg-success{ background:#28a745; }
.badge.bg-danger{ background:#ff5f5f; }
.badge.bg-info{ background:#17a2b8; }
.badge.bg-secondary{ background:#6c757d; }

.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.status-ausstehend{ background:#dc3545; }
.status-in_arbeit{ background:#ffc107; }
.status-geliefert{ background:#28a745; }

.status-badge-active{ display:inline-block; min-width:60px; text-align:center; font-weight:500; font-size:12px; padding:4px 8px; border-radius:8px; background-color:#28a745; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.15); }
.status-badge-blocked{ display:inline-block; background-color:#dc3545; color:#fff; font-weight:500; font-size:12px; padding:4px 8px; border-radius:8px; min-width:80px; text-align:center; height:28px; line-height:18px; box-shadow:0 1px 2px rgba(0,0,0,0.15); }

/* Bike Badges – Basisfarben */
.bike-badge-base{ display:inline-block; min-width:80px; height:28px; line-height:20px; text-align:center; font-weight:500; font-size:12px; padding:4px 8px; border-radius:8px; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.15); white-space:nowrap; }
.bike-badge-free{ background-color:#28a745; }
.bike-badge-defect{ background-color:#dc3545; }
.bike-badge-neutral{ background-color:#6c757d; }
.bike-badge-warning{ background-color:#ffc107; color:#000; }
.bike-badge-blocked{ background-color:#dc3545; }

/* FIX TÜRKIS (bleibt unverändert) */
.bike-badge-rented{ background-color:#00cfc1 !important; color:#fff !important; }
.bike-badge-info{ background-color:#00cfc1 !important; color:#fff !important; }
.abo-badge-yes{ display:inline-block; min-width:60px; text-align:center; font-weight:500; font-size:12px; padding:4px 8px; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,0.15); background-color:#00cfc1 !important; color:#fff !important; }
.abo-badge-no{ display:inline-block; min-width:60px; text-align:center; font-weight:500; font-size:12px; padding:4px 8px; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,0.15); background-color:#adb5bd; color:#fff; }

.admin-badge-yes{ display:inline-block; min-width:60px; text-align:center; font-weight:500; font-size:12px; padding:4px 8px; border-radius:8px; background-color:#28a745; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.15); }
.admin-badge-no{ display:inline-block; min-width:60px; text-align:center; font-weight:500; font-size:12px; padding:4px 8px; border-radius:8px; background-color:#adb5bd; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.1); }

/* Kombi-Badge */
.bike-badge-combo{ display:inline-flex; border-radius:6px; overflow:hidden; font-size:.75rem; font-weight:600; border:1px solid #aaa; text-align:center; box-shadow:1px 1px 3px rgba(0,0,0,0.1); }
.bike-badge-combo .left,.bike-badge-combo .right{ padding:4px 10px; color:#fff; display:inline-block; }
.bike-badge-combo .left{ background-color:#28a745; }
.bike-badge-combo .right{ background-color:#ffc107; color:#000; }
.bike-badge-combo.rented .left{ background-color:#00cfc1; }

/* Kritische Resttage */
.badge-rest-critical{ background-color:#dc3545 !important; color:#fff; font-weight:bold; }

/* =====================
   11) PORTAL / CHAT / FOOTER
   ===================== */
body.portal-page{ background-color:#f1f3f6; }

/* Begrüßungsbox (Gradient folgt Theme) */
.portal-greeting-box{
  position:relative; overflow:hidden; text-align:center;
  background: linear-gradient(to bottom, var(--primary-450) 0%, var(--primary-700) 100%);
  color:#fff; border-radius:20px; padding:2rem 1rem; font-size:1.6rem; box-shadow: var(--elev-2);
}
.portal-greeting-box::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 70% at 50% -20%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 35%, rgba(255,255,255,0.00) 70%);
}
.greet-title{ display:block; font-weight:700; font-size:clamp(1.2rem,2.6vw,1.6rem); letter-spacing:.2px; line-height:1.25; color:#fff; margin-bottom:.25rem; }
.portal-greeting-box small{ color:rgba(255,255,255,0.92); font-size:1rem; opacity:.85; display:block; margin-top:.5rem; }

.portal-nav-btn{ display:block; padding:16px; text-align:center; background:#343a40; color:#fff; font-weight:500; border-radius:16px; box-shadow:0 4px 14px var(--main-shadow); text-decoration:none; transition:all .2s; }
.portal-nav-btn:hover{ transform:translateY(-2px); background: linear-gradient(90deg, var(--main-hover), var(--main-color)); color:#fff; text-decoration:none; }

.portal-info-row>.col-lg-4{ display:flex; }
.portal-info-row .card{ flex:1; display:flex; flex-direction:column; height:100%; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.1); }
.portal-info-row .card-header{ font-weight:600; font-size:1.1rem; background: var(--main-color); color:#fff; border-top-left-radius:12px; border-top-right-radius:12px; }

.portal-chat{ border-radius:20px; overflow:hidden; box-shadow: var(--elev-2); background: var(--surface); }
.portal-chat-header{ background:#343a40; color:#fff; font-weight:600; padding:1rem; box-shadow: inset 0 -4px 12px var(--main-shadow); }
.portal-chat-body{ background: var(--bg-soft); padding:1rem; }
.portal-chat-messages{ max-height:300px; overflow-y:auto; background: var(--surface-2); padding:1rem; border-radius:10px; border:1px solid var(--border); box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
.portal-chat-form .chat-input{ border-radius:10px 0 0 10px; border-right:none; }
.portal-chat-form .chat-send-btn{ background-color: var(--main-color); border:none; color:#fff; font-weight:500; border-radius:0 10px 10px 0; padding:.5rem 1.2rem; }
.portal-chat-form .chat-send-btn:hover{ background-color: var(--main-hover); }

.custom-footer{ background: linear-gradient(to bottom, #2b2b2b 0%, #2b2b2b 80%, var(--primary-500) 100%); color:#f8f9fa; padding:20px 40px; font-size:14px; position:relative; z-index:10; border-top:1px solid #444; margin-top:60px; }
.footer-inner{ max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.footer-link{ color:#f8f9fa; text-decoration:none; margin-left:20px; transition:color .3s; }
.footer-link:hover{ color: var(--primary-500); }

/* =====================
   12) LISTS / MISC
   ===================== */
.section-heading{ background-color: var(--primary-500); color:#fff; padding:8px 12px; font-size:1.1rem; border-radius:6px; }

.status-cell{ display:flex; align-items:center; gap:10px; }
.status-cell .status-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:5px; }

.phone-btn{ font-size:1.2em; color: var(--primary-500); background:none; border:none; cursor:pointer; }
.phone-btn:hover{ color: var(--primary-650); }

.image-hover-wrap{ display:inline-block; overflow:hidden; border-radius:8px; position:relative; }
.vehicle-image{ transition: transform .3s ease; display:block; margin:0 auto; }
.vehicle-image:hover{ transform: scale(1.05); }

/* Kennzeichen-Styles */
.plate-wrapper{ display:flex; align-items:center; border:2px solid #000; background:#fff; border-radius:4px; width:120px; height:28px; overflow:hidden; }
.plate-euro{ width:22px; height:100%; background:#3d78d8; display:flex; justify-content:center; align-items:flex-start; position:relative; }
.open-circle{ width:6px; height:6px; border:2px solid #f5c518; border-radius:50%; margin-top:6px; }
.plate-text{ width:calc(100% - 22px); font-size:14px; color:#000; text-align:center; display:flex; justify-content:center; align-items:center; }

/* Alerts */
.alert-success{ background-color:#d1e7dd; color:#0f5132; padding:10px 15px; border:1px solid #badbcc; border-radius:6px; }
.alert-danger{ background-color:#f8d7da; color:#721c24; border:1px solid #f5c6cb; font-weight:500; }
.ra-alert-danger{ background-color:rgba(220,53,69,0.15); border:1px solid rgba(220,53,69,0.4); color:#842029; padding:.75rem 1rem; border-radius:.375rem; }
.ra-alert-danger.ra-fade-out{ opacity:0; transition:opacity .8s ease; }

/* =====================
   13) LOGIN PAGE
   ===================== */
body.login-page{ margin:0; padding:0; background: linear-gradient(to bottom, var(--primary-450) 0%, #ffffff 100%); font-family:'Segoe UI',sans-serif; }
.login-wrapper{ display:flex; flex-direction:column; min-height:100vh; position:relative; }
.login-header{ display:flex; justify-content:space-between; align-items:flex-start; padding:2rem; background:#ffffff; border-radius:0 0 40px 40px; box-shadow:0 8px 20px rgba(0,0,0,0.08); z-index:2; }
.logo-area img{ max-height:60px; }
.login-box{ background:#f9f9f9; padding:2rem; border-radius:20px; box-shadow:0 4px 12px rgba(0,0,0,0.1); max-width:350px; width:100%; margin-left:auto; margin-right:2rem; margin-top:1rem; }
.login-box h2{ color: var(--primary-600); margin-bottom:1.5rem; font-weight:bold; }
.login-box .form-label{ font-weight:500; }
.login-box .form-control{ border-radius:12px; padding:.75rem 1rem; }
.login-box button.btn-primary{ background-color: var(--primary-500); border-color: var(--primary-500); border-radius:12px; padding:.75rem; font-weight:600; transition:.2s; }
.login-box button.btn-primary:hover{ background-color: var(--primary-650); border-color: var(--primary-650); }
.login-visual{ flex-grow:1; background-image:url('/assets/login-bg.jpg'); background-size:cover; background-position:center; border-radius:0 0 40px 40px; margin-top:-40px; min-height:300px; z-index:1; }

/* === Theme-Modal: dunkel/warm kompatibel ====================== */
#themeModal .modal-content{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--elev-2);
}
#themeModal .modal-header,
#themeModal .modal-footer{
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
#themeModal .modal-title{ color: var(--text); }

/* Close-Icon auf dunklem/warmem Grund sichtbar machen */
#themeModal .btn-close{ opacity:.75; }
.theme-dark #themeModal .btn-close,
.theme-warm #themeModal .btn-close{
  filter: invert(1);
  opacity:.9;
}

/* Wheel-Container dezent einrahmen (wirkt in dark/warm nicht grell) */
#themeModal #colorWheel{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
}

/* Fallback-Color-Input (falls Wheel mal nicht lädt) */
#themeModal .form-control-color{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
#themeModal .form-control-color:focus{
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-shadow);
}

/* native Swatch-Ränder entfernen */
#themeModal .form-control-color::-webkit-color-swatch-wrapper{ padding:0; }
#themeModal .form-control-color::-webkit-color-swatch{ border:none; }
#themeModal .form-control-color::-moz-color-swatch{ border:none; }

/* === Logistik/Allgemein: Modal-Skin (Theme-aware) ====================== */
.ra-modal {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--elev-2);
  border-radius: 12px;
}
.ra-modal .modal-header,
.ra-modal .modal-footer{
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.ra-modal .modal-title{ color: var(--text); }

/* Close-Icon in dark/warm sichtbar */
.theme-dark .ra-modal .btn-close,
.theme-warm .ra-modal .btn-close{
  filter: invert(1);
  opacity: .9;
}

/* Tabellen IN Modals: klar, tabellarisch, Theme-gekoppelt */
.ra-modal .table{
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--elev-1);
}
.ra-modal .table thead th{
  background: var(--primary-600) !important;
  color: #fff !important;
  border: none !important;
}
.ra-modal .table-striped > tbody > tr:nth-of-type(odd){
  background: var(--zebra) !important;
}
.ra-modal .table-striped > tbody > tr:hover{
  background: var(--row-hover) !important;
}

/* Optional: Scrollbars im iFrame-Modal angenehmer */
#noteIframeModal .modal-body{
  background: var(--surface);
}

/* =====================
   14) CLEANUPS / FIXES
   ===================== */
/* Entferne evtl. Browser-Default Outlines/Transitions Glitches */
a,button{ outline:none; }

/* Entferne eingebettetes <style> im alten CSS (falls übrig) — NICHT hier nötig */
/* h5.text-primary{ border-bottom:1px solid #ccc; padding-bottom:4px; margin-bottom:8px; } */

/* Sicherstellen, dass Bootstrap keine Farben überstimmt */
.table thead th{ border:none !important; }

/* === BADGES: Form fix + Farben ======================================= */
/* Grundform – runde, moderne Badges */
.bike-badge-base{
  display:inline-block;
  min-width:80px;
  height:28px;
  line-height:20px;
  text-align:center;
  font-weight:600;
  font-size:12px;
  padding:4px 10px;
  border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  white-space:nowrap;
  border:1px solid transparent; /* soft edge */
}

/* Statusfarben (bleiben CI-getreu, aber Form bleibt oben) */
.bike-badge-free     { background-color:#28a745; color:#fff; }
.bike-badge-blocked  { background-color:#dc3545; color:#fff; }      /* Defekt/Fällig */
.bike-badge-neutral  { background-color:#6c757d; color:#fff; }
.bike-badge-warning  { background-color:#ffc107; color:#000; }      /* Service-Hinweis */
.bike-badge-orange   { background-color:#cc7000; color:#fff; }      /* Werkstatt */

/* Vermietet bleibt fix türkis – wie besprochen */
.bike-badge-info     { background-color:#00cfc1 !important; color:#000 !important; }

/* Kombi-Badge (Vermietet + Service) – Form wiederherstellen */
.bike-badge-combo{
  display:inline-flex;
  border-radius:8px;
  overflow:hidden;
  font-size:.8rem;
  font-weight:700;
  border:1px solid rgba(0,0,0,.15);
  text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.bike-badge-combo .left,
.bike-badge-combo .right{
  padding:4px 10px;
  color:#fff;
  display:inline-block;
}
.bike-badge-combo .left { background:#28a745; } /* „Frei“ */
.bike-badge-combo .right{ background:#ffc107; color:#000; } /* „Service“ */
/* Wenn Vermietet + Service: links türkis */
.bike-badge-combo .left[style*="#00cfc1"]{ color:#000; }

/* === Farb-Badges (Spalte „Farbe“) – Form + Kontrast ================== */
.bike-color-badge{
  display:inline-block;
  padding:4px 10px;
  min-width:60px;
  text-align:center;
  border-radius:8px;
  font-weight:600;
  font-size:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  text-transform:capitalize;
  border:1px solid rgba(0,0,0,.12);
}
/* === TABLE SOFT LOOK (global & in Modals) ============================ */
.table,
table{
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elev-1);
  border-collapse: separate;
  border-spacing: 0;
}

/* Kopfzeile in Theme-Primär */
.table thead th,
table thead th{
  background: var(--primary-600) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  padding: 12px;
}

/* dezente Trennlinien im Body (weich) */
.table tbody td,
table tbody td{
  border-top: 1px solid rgba(0,0,0,.06);
}
.theme-dark .table tbody td,
.theme-warm .table tbody td{
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Zebra & Hover via Theme-Vars */
.table-striped>tbody>tr:nth-of-type(odd),
table tbody tr:nth-child(even){
  background: var(--zebra) !important;
}
.table-striped>tbody>tr:hover,
table tbody tr:hover{
  background: var(--row-hover) !important;
}

/* dichte Tabellen wirken moderner */
.table td, .table th{ vertical-align: middle; }
/* === FILTER: Inputs/Selects voll theme-aware ========================= */
.filter-box .filter-input,
.filter-box .filter-select{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
  transition: border .15s, box-shadow .15s, background .15s, color .15s;
}
.filter-box .filter-input::placeholder{ color: var(--text-muted); }
.filter-box .filter-input:focus,
.filter-box .filter-select:focus{
  border-color: var(--primary-600) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
  outline: none;
}

/* Buttons in der Filterleiste – bereits thematisch, hier nur Vollständigkeit */
.filter-box .apply{
  background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
  color:#fff; border:none;
}
.filter-box .apply:hover{
  background: linear-gradient(to bottom, var(--primary-450), var(--primary-600));
}
.filter-box .reset{
  background: var(--surface);
  color: var(--primary-700);
  border: 2px solid var(--primary-700);
}
.filter-box .reset:hover{ background: var(--primary-50); }
.filter-box .export{
  background: var(--surface);
  color: var(--primary-600);
  border: 2px solid var(--primary-600);
}
.filter-box .export:hover{ background: var(--primary-600); color:#fff; }
/* === TABLE: Theme-aware (überschreibt alte !important-Styles) === */

/* Bootstrap-Variablen setzen – gilt auch für Zellen */
.theme-dark .table,
.theme-warm .table {
  --bs-table-color: var(--text);
  --bs-table-bg: var(--surface);
  --bs-table-border-color: var(--border);
  --bs-table-striped-color: var(--text);
  --bs-table-striped-bg: var(--zebra);
  --bs-table-hover-color: var(--text);
  --bs-table-hover-bg: var(--row-hover);
}

/* Fallback + härtere Überschreibung gegen alte !important-Regeln */
.theme-dark .table,
.theme-warm .table,
.theme-dark table,
.theme-warm table {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Zebra & Hover pro Zelle (Bootstrap legt das auf >* ) */
.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > *,
.theme-warm .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--zebra) !important;
  color: var(--text) !important;
}
.theme-dark .table > :not(caption) > * > *,
.theme-warm .table > :not(caption) > * > * {
  background-color: var(--bs-table-bg, var(--surface)) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.theme-dark .table-hover > tbody > tr:hover > *,
.theme-warm .table-hover > tbody > tr:hover > * {
  background-color: var(--row-hover) !important;
  color: var(--text) !important;
}
/* === Action-Buttons (Details / Bearbeiten / Löschen) – Dark & Warm sichtbar === */
.theme-dark .custom-action-btn,
.theme-warm .custom-action-btn {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

.theme-dark .custom-action-btn:hover,
.theme-warm .custom-action-btn:hover,
.theme-dark .custom-action-btn:focus,
.theme-warm .custom-action-btn:focus {
  background: var(--row-hover) !important;
  border-color: var(--primary-600) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
}

/* XS-Buttons generell (klein = mehr Kontrast nötig) */
.theme-dark .btn-xs,
.theme-warm .btn-xs {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* „Löschen“ explizit rot beim Hover/Fokus */
.theme-dark .delete-bike-btn:hover,
.theme-warm .delete-bike-btn:hover,
.theme-dark .delete-bike-btn:focus,
.theme-warm .delete-bike-btn:focus {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, .35) !important;
}

/* Falls in Buttons Icons/Text-Links stecken */
.theme-dark .custom-action-btn i,
.theme-warm .custom-action-btn i {
  color: inherit !important;
}
/* Modal-Theme (global) */
.modal-content {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--elev-2) !important;
}
.modal-header,
.modal-footer {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.modal-body {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Tabellen im Modal: wie draußen */
.modal .table thead th {
  background: var(--primary-600) !important;
  color: #fff !important;
  border: none !important;
}
.modal .table tbody tr:nth-child(odd) { background: var(--zebra) !important; }
.modal .table tbody tr:hover          { background: var(--row-hover) !important; }
/* Farb-Badge wieder pillig + gut lesbar */
.bike-color-badge {
  display: inline-block;
  padding: 4px 10px;
  min-width: 64px;
  text-align: center;
  border-radius: 999px;               /* pill */
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.08);  /* leichter Rand, hilft bei hellen Farben */
}
/* Werkstatt-Badge (bleibt unabhängig vom Theme): */
.bike-badge-orange {
  background-color: #cc7000 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
}
/* Fix: Vermietet immer türkis + weiße Schrift */
.bike-badge-rented,
.bike-badge-info,
.abo-badge-yes {
  background-color: #00cfc1 !important;
  color: #fff !important;             /* <- vorher war schwarz */
  border-color: #00cfc1 !important;
}
/* Weicherer Tabellen-Look */
.table {
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: var(--elev-1) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}
.table > :not(caption) > * > * {
  border-bottom: 1px solid var(--border) !important; /* soft divider */
}
.table thead th {
  background: var(--primary-600) !important;
  color: #fff !important;
  border: none !important;
}
.table-striped>tbody>tr:nth-of-type(odd) { background: var(--zebra) !important; }
.table-striped>tbody>tr:hover            { background: var(--row-hover) !important; }
/* Filter-Inputs/Selects im normalen Zustand */
.filter-box .filter-input,
.filter-box .filter-select,
.form-control,
.form-select {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }

/* Fokus bleibt beim Glow */
.form-control:focus,
.form-select:focus,
.filter-box .filter-input:focus,
.filter-box .filter-select:focus {
  border-color: var(--primary-600) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
  outline: none;
}
/* === PORTAL: Info-Karten theme-aware ============================= */

/* Karte selbst */
.portal-info-row .card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--elev-1) !important;
}

/* Kopfzeile der Karte: Akzent bleibt Primär, Text immer gut lesbar */
.portal-info-row .card-header {
  background: var(--primary-600) !important;
  color: #fff !important;
  border: none !important;
}

/* Inhalt */
.portal-info-row .card-body {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Listengruppen / Tabellen in den Karten */
.portal-info-row .list-group-item,
.portal-info-row .table {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.portal-info-row .table thead th {
  background: var(--primary-600) !important;
  color: #fff !important;
  border: none !important;
}
.portal-info-row .table tbody tr:nth-child(odd)  { background: var(--zebra) !important; }
.portal-info-row .table tbody tr:hover           { background: var(--row-hover) !important; }

/* Links/Buttons in den Karten */
.portal-info-row .card a,
.portal-info-row .card .btn-link {
  color: var(--primary-600) !important;
  text-decoration: none;
}
.portal-info-row .card a:hover,
.portal-info-row .card .btn-link:hover {
  color: var(--primary-700) !important;
}

/* Die großen „Service/Logistik/Admin“-Kacheln unter der Begrüßung */
.portal-nav-btn {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 14px var(--primary-shadow) !important;
}
.portal-nav-btn:hover {
  background: linear-gradient(90deg, var(--primary-650), var(--primary-500)) !important;
  color: #fff !important;
}
/* === Split-Badges exakt wie .bike-badge-base formen === */
.bike-badge-combo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;                 /* wie .bike-badge-base */
  height: 28px;                    /* wie .bike-badge-base */
  line-height: 20px;               /* wie .bike-badge-base */
  font-size: 12px;                 /* wie .bike-badge-base */
  font-weight: 500;                /* wie .bike-badge-base */
  border-radius: 8px;              /* wie .bike-badge-base */
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}

.bike-badge-combo .left,
.bike-badge-combo .right{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;                    /* genau 28px hoch */
  padding: 0 10px;                 /* statt top/bottom-Padding */
  color: #fff !important;          /* überall weiße Schrift */
}

/* Linke Hälfte: Status */
.bike-badge-combo .left{ background-color: #28a745; }                 /* Frei */
.bike-badge-combo.rented .left{ background-color: #00cfc1 !important; } /* Vermietet (fix türkis) */

/* Rechte Hälfte: Service-Hinweis */
.bike-badge-combo .right{
  background-color: #d39e00 !important;  /* leicht dunkler als #ffc107, bessere Lesbarkeit in Hell/Dunkel */
}

/* Sicherheit: Einzel-Badges angleichen + Vermietet immer weiß */
.bike-badge-base{ 
  font-weight: 500; 
  line-height: 20px; 
  border-radius: 8px; 
  height: 28px; 
}
.bike-badge-info{ 
  background-color: #00cfc1 !important; 
  color: #fff !important;               /* Vermietet-Badge: Text weiß */
}

/* in Tabellenzellen bündig */
td .bike-badge-combo, td .bike-badge-base { margin: 0; }
/* === Virtual Dashboard: PNG-Logo einfärben über CSS-Maske === */
:root{
  --brand-logo-w: 140px;
  --brand-logo-h: 40px;
}

/* Link/Container */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

/* Maskiertes Logo: wird mit --brand-color (aus JS) gefüllt.
   Fallback: leicht hellerer Primärton. */
.brand-logo-mask{
  display:inline-block;
  width:var(--brand-logo-w);
  height:var(--brand-logo-h);
  background-color: var(--brand-color, var(--primary-450));
  -webkit-mask-image: url("/vdl.png");
          mask-image: url("/vdl.png");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}

/* PNG-Fallback: standardmäßig ausblenden … */
.brand-logo-fallback{
  display:none;
  height:var(--brand-logo-h);
}

/* … und nur zeigen, wenn Masken NICHT unterstützt werden */
@supports not (mask-image: url("/vdl.png")){
  .brand-logo-mask{ display:none; }
  .brand-logo-fallback{ display:inline-block; }
}
/* Buttons, die in Light okay sind, aber in Dark/Warm untergehen */
.theme-dark .btn-light,
.theme-warm .btn-light,
.theme-dark .btn-secondary,
.theme-warm .btn-secondary,
.theme-dark .btn-outline-secondary,
.theme-warm .btn-outline-secondary{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.theme-dark .btn-light:hover,
.theme-warm .btn-light:hover,
.theme-dark .btn-secondary:hover,
.theme-warm .btn-secondary:hover,
.theme-dark .btn-outline-secondary:hover,
.theme-warm .btn-outline-secondary:hover{
  background: var(--row-hover) !important;
  border-color: var(--primary-600) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
}
.stats-refresh-btn{
  border-radius: 10px;
  font-weight: 600;
}
/* Link-/Zurück-Buttons im Modal sichtbar machen */
.theme-dark .modal .btn-link,
.theme-warm .modal .btn-link{
  color: var(--primary-500) !important;
}
.theme-dark .modal .btn-link:hover,
.theme-warm .modal .btn-link:hover{
  color: var(--primary-650) !important;
}
/* Helle Bootstrap-Header in Dark/Warm überschreiben */
.theme-dark .table .thead-light th,
.theme-warm .table .thead-light th,
.theme-dark .table.table-light thead th,
.theme-warm .table.table-light thead th{
  background: var(--primary-600) !important;
  color:#fff !important;
  border:none !important;
}

/* Generische "bg-light" Flächen in Dark/Warm nicht weiß lassen */
.theme-dark .bg-light,
.theme-warm .bg-light{
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
/* Datei-Button Theme-aware */
input[type="file"].form-control{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Der eigentliche native Button */
input[type="file"]::file-selector-button{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  margin-right: 10px;
  cursor: pointer;
  transition: border .15s, background .15s, box-shadow .15s;
}
input[type="file"]::file-selector-button:hover{
  background: var(--row-hover);
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-shadow);
}
/* Fallback für WebKit-Alt */
input[type="file"]::-webkit-file-upload-button{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  margin-right: 10px;
  cursor: pointer;
}
.theme-dark .btn-cancel,
.theme-warm .btn-cancel{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.theme-dark .btn-cancel:hover,
.theme-warm .btn-cancel:hover{
  background: var(--row-hover) !important;
  border-color: var(--primary-600) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
}
/* File-Input: Grundlook (themenbewusst bleibt) – schon vorhanden, hier nur Hover-Fix härter setzen */
.theme-dark input[type="file"]::file-selector-button:hover,
.theme-warm input[type="file"]::file-selector-button:hover{
  background: var(--row-hover) !important;
  color: var(--text) !important;
  border-color: var(--primary-600) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
}
/* Safari/WebKit Fallback */
.theme-dark input[type="file"]::-webkit-file-upload-button:hover,
.theme-warm input[type="file"]::-webkit-file-upload-button:hover{
  background: var(--row-hover) !important;
  color: var(--text) !important;
  border-color: var(--primary-600) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
}
/* Tabellen & Karten im Modal */
.theme-dark .modal .card,
.theme-warm .modal .card{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.theme-dark .modal .list-group,
.theme-warm .modal .list-group{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
}

.theme-dark .modal .list-group-item,
.theme-warm .modal .list-group-item{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.theme-dark .modal .list-group-item:hover,
.theme-warm .modal .list-group-item:hover{
  background: var(--row-hover) !important;
}

/* Tables inside Upload-Modal (z. B. vorhandene Uploads) */
.theme-dark .modal .table,
.theme-warm  .modal .table{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.theme-dark .modal .table thead th,
.theme-warm  .modal .table thead th{
  background: var(--primary-600) !important;
  color: #fff !important;
  border-color: var(--primary-600) !important;
}
.theme-dark .modal .table.table-bordered > :not(caption) > * > *,
.theme-warm  .modal .table.table-bordered > :not(caption) > * > *{
  border-color: var(--border) !important;
}
/* ZUERST: globale „bg-light“-Dunkelung bleibt (falls vorhanden) */

/* Danach SPEZIFISCH: Verlaufs-Header im Dark/Warm bewusst primär einfärben */
.theme-dark thead.table-light th,
.theme-warm thead.table-light th{
  background: var(--primary-600) !important;
  color: #fff !important;
  border-color: var(--primary-600) !important;
}

/* Und die Table-Borders im Verlauf nicht zu hart wirken lassen */
.theme-dark .table.table-bordered > :not(caption) > * > *,
.theme-warm .table.table-bordered > :not(caption) > * > *{
  border-color: var(--border) !important;
}
/* === FILE INPUT: Dark/Warm Hover in Primärfarbe ====================== */

/* Basis im Dark/Warm: Input + Button gut lesbar */
:where(.theme-dark, .theme-warm) input[type="file"].form-control{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

:where(.theme-dark, .theme-warm) input[type="file"].form-control::file-selector-button,
:where(.theme-dark, .theme-warm) input[type="file"].form-control::-webkit-file-upload-button{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  margin-right: 10px;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  cursor: pointer;
}

/* Hover/Focus innerhalb: Button in Primärverlauf + weißer Text */
:where(.theme-dark, .theme-warm) input[type="file"].form-control:hover::file-selector-button,
:where(.theme-dark, .theme-warm) input[type="file"].form-control:focus-within::file-selector-button,
:where(.theme-dark, .theme-warm) input[type="file"].form-control:hover::-webkit-file-upload-button,
:where(.theme-dark, .theme-warm) input[type="file"].form-control:focus-within::-webkit-file-upload-button{
  background: linear-gradient(to bottom, var(--primary-500), var(--primary-650)) !important;
  color: #fff !important;
  border-color: var(--primary-600) !important;
  box-shadow: 0 0 0 3px var(--primary-shadow) !important;
}

/* Optional: Light-Mode dezent lassen (grauer Hover wie zuvor) */
input[type="file"].form-control:hover::file-selector-button,
input[type="file"].form-control:focus-within::file-selector-button,
input[type="file"].form-control:hover::-webkit-file-upload-button,
input[type="file"].form-control:focus-within::-webkit-file-upload-button{
  background: #f0f0f0;
  color: #222;
  border-color: #ddd;
}
/* === Theme-Modal: Modus-Buttons (nur Dark/Warm) sichtbar einfärben === */
:where(.theme-dark, .theme-warm) #themeModal #modeGroup .btn-outline-secondary{
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* Hover/Focus: Primärton, gut sichtbar */
:where(.theme-dark, .theme-warm) #themeModal #modeGroup .btn-outline-secondary:hover,
:where(.theme-dark, .theme-warm) #themeModal #modeGroup .btn-outline-secondary:focus{
  background: linear-gradient(to bottom, var(--primary-500), var(--primary-650));
  color: #fff;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-shadow);
}

/* Gewählte Option bleibt eingefärbt (Radio checked) */
:where(.theme-dark, .theme-warm) #themeModal #modeGroup .btn-check:checked + .btn-outline-secondary,
:where(.theme-dark, .theme-warm) #themeModal #modeGroup .btn-outline-secondary.active{
  background: linear-gradient(to bottom, var(--primary-500), var(--primary-650));
  color: #fff;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-shadow);
}

/* Optional: Tastaturfokus auch im Light-Mode etwas hervorheben (neutral) */
#themeModal #modeGroup .btn-outline-secondary:focus-visible{
  box-shadow: 0 0 0 3px var(--primary-shadow);
}
/* ================= Header-Brand (final) ================= */
.brand-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;                 /* Abstand zur Versionsnummer */
  text-decoration:none;
}

/* Gleiche Box/Geometrie für alle Varianten -> kein Springen */
.brand-logo-mask,
.brand-logo-img,
.brand-logo-fallback{
  display:block;
  width:160px;               /* bei Bedarf anpassen */
  height:36px;               /* bei Bedarf anpassen */
  flex:0 0 160px;            /* fixe Breite im Flex-Layout */
  vertical-align:top;        /* kein Baseline-Versatz */
  transform:translateZ(0);   /* Subpixel-Jitter vermeiden */
}

/* Farbiges Logo (Masken-Variante) */
.brand-logo-mask{
  background:var(--brand-color);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-size:contain;      mask-size:contain;
  -webkit-mask-position:left center; mask-position:left center;
}

/* Normales IMG/Fallback exakt wie die Maske einpassen */
.brand-logo-img,
.brand-logo-fallback{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;    /* gleicher Anker wie die Maske */
}

/* Fallback standardmäßig ausblenden (moderne Browser) */
.brand-logo-fallback{ display:none; }

/* Browser ohne Masken-Unterstützung: Maske aus, Fallback an */
@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .brand-logo-mask{ display:none; }
  .brand-logo-fallback{ display:block; }
}


/* ================= Admin-Preview (final) =================
   Verhindert Doppelanzeige und steuert "Original anzeigen" */
.logo-stage.tint-on img{ visibility:hidden; }                  /* Tönung AN -> nur Overlay sichtbar */
.logo-stage.tint-on .logo-tinted{ display:block; }
.logo-stage:not(.tint-on) .logo-tinted{ display:none; }        /* Tönung AUS -> nur IMG sichtbar */
.logo-stage.tint-on.peek-original img{ visibility:visible; }   /* Peek: Original zeigen */
.logo-stage.tint-on.peek-original .logo-tinted{ visibility:none; }
/* ================= Header-Brand (ein einziges Element) ================= */
.brand-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;                 /* Abstand zur Versionsnummer */
  text-decoration:none;
}

/* Gemeinsame Geometrie -> kein Springen */
.brand-logo{
  display:block;
  width:160px;               /* bei Bedarf anpassen */
  height:36px;               /* bei Bedarf anpassen */
  flex:0 0 160px;            /* fixe Breite im Flex-Layout */
  vertical-align:top;
  transform:translateZ(0);   /* Subpixel-Jitter vermeiden */
  /* ORIGINAL (nicht getönt): Bild als Background */
  background-image: var(--logo-url);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:left center;
}

/* GETÖNT: gleiche Box, aber Bild als Maske + Farbe aus --brand-color */
.brand-logo.is-tinted{
  /* Original-Background aus */
  background-image:none;

  /* Sichtbare Füllung + Fallback-Farbe, falls --brand-color fehlt */
  background-color: var(--brand-color, #00cfc1);

  /* Logo als Maske */
  -webkit-mask-image: var(--logo-url);
  mask-image: var(--logo-url);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:left center;
  mask-position:left center;
}
/* === Deutliche Auswahl-Highlighting für Radio-Button-Gruppen (Scope & Mode) === */

/* Grundzustand in allen Modi */
.btn-check:checked + .btn-outline-secondary{
  background: var(--primary-600);
  border-color: var(--primary-600);
  color:#fff;
  box-shadow: 0 0 0 .25rem var(--primary-shadow); /* persistenter Glow */
}

/* Fokus-Ring für Tastatur/Screenreader */
.btn-check:focus + .btn-outline-secondary,
.btn-outline-secondary:focus-visible{
  box-shadow: 0 0 0 .25rem var(--primary-shadow);
}

/* Hover bleibt konsistent */
.btn-outline-secondary:hover{
  background: var(--primary-600);
  border-color: var(--primary-600);
  color:#fff;
}

/* Sicherstellen, dass es in Dark/Warm gleich kräftig wirkt */
.theme-dark .btn-check:checked + .btn-outline-secondary,
.theme-warm .btn-check:checked + .btn-outline-secondary{
  box-shadow: 0 0 0 .25rem var(--primary-shadow);
}

/* (Optional) falls irgendwo noch .active verwendet wird */
.btn-outline-secondary.active{
  background: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  color:#fff !important;
  box-shadow: 0 0 0 .25rem var(--primary-shadow) !important;
}

/* Fallback: Browser ohne Masken -> einfach Originalbild zeigen */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .brand-logo.is-tinted{
    background-image: var(--logo-url);
    background-color: transparent;
  }
}