/* ===== Movexa Theme ===== */
:root {
  --mx-primary: #141B34;      /* Deep Navy */
  --mx-primary-600: #1E284C;
  --mx-primary-700: #0F1530;
  --mx-accent: #06B6D4;       /* Cyan */
  --mx-ink: #0F1530;          /* Deep Navy (Navigation) */
  --mx-bg: #F4F5FB;
  --mx-danger: #EF4444;
  --mx-success: #10B981;
  --mx-warning: #F59E0B;
  --mx-grad: linear-gradient(135deg, #1B2550 0%, #0F1530 100%);

  --bs-primary: #141B34;
  --bs-primary-rgb: 20, 27, 52;
  --bs-link-color: #141B34;
  --bs-link-color-rgb: 20, 27, 52;
  --bs-link-hover-color: #1E284C;
}

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--mx-bg); color: #1f2430; }

/* Bootstrap-Komponenten auf Markenfarbe umstellen */
/* Buttons – Variante 2: Verlauf + Schatten (edel) */
.btn-primary {
  --bs-btn-bg: var(--mx-primary); --bs-btn-border-color: var(--mx-primary);
  --bs-btn-hover-bg: var(--mx-primary-600); --bs-btn-hover-border-color: var(--mx-primary-600);
  --bs-btn-active-bg: var(--mx-primary-700); --bs-btn-active-border-color: var(--mx-primary-700);
  --bs-btn-disabled-bg: var(--mx-primary); --bs-btn-disabled-border-color: var(--mx-primary);
  background-image: var(--mx-grad);
  border: none;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(20, 27, 52, .28);
  transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-image: var(--mx-grad);
  filter: brightness(1.08);
  box-shadow: 0 10px 22px rgba(20, 27, 52, .34);
}
.btn-primary:active { filter: brightness(.95); transform: translateY(1px); }
.btn-primary:disabled, .btn-primary.disabled { filter: none; box-shadow: none; opacity: .55; }
.btn-outline-primary {
  --bs-btn-color: var(--mx-primary); --bs-btn-border-color: var(--mx-primary);
  --bs-btn-hover-bg: var(--mx-primary); --bs-btn-hover-border-color: var(--mx-primary);
  --bs-btn-active-bg: var(--mx-primary-600); --bs-btn-active-border-color: var(--mx-primary-600);
  border-radius: 10px;
  font-weight: 600;
  border-width: 1.5px;
}
/* Sekundäre & Aktions-Buttons – edel & einheitlich */
.btn-outline-secondary {
  --bs-btn-color: #4a5170; --bs-btn-border-color: #d7dbe8;
  --bs-btn-hover-bg: var(--mx-primary); --bs-btn-hover-border-color: var(--mx-primary); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--mx-primary-600); --bs-btn-active-border-color: var(--mx-primary-600);
  border-radius: 10px; font-weight: 600; border-width: 1.5px;
}
.btn-outline-danger {
  --bs-btn-hover-color: #fff;
  border-radius: 10px; font-weight: 600; border-width: 1.5px;
}
.btn-outline-success {
  --bs-btn-hover-color: #fff;
  border-radius: 10px; font-weight: 600; border-width: 1.5px;
}
/* Kleine Buttons etwas kompakter & mit Icon-Abstand */
.btn-sm { border-radius: 9px; padding: .3rem .7rem; }
/* Grosse Buttons dezenter dimensionieren */
.btn-lg { border-radius: 11px; padding: .55rem 1.15rem; font-size: 1rem; }
.btn i.bi { vertical-align: -.05em; }
/* Buttons in Tabellenzellen sauber ausrichten */
td .btn + .btn, td .btn + form, td form + .btn { margin-left: .35rem; }
td form.d-inline { display: inline-block; }
.text-bg-primary { background-color: var(--mx-primary) !important; }
.bg-primary { background-color: var(--mx-primary) !important; }
.navbar.bg-dark, .navbar.mx-nav { background: var(--mx-ink) !important; }

/* ===== Formulare (globale Movexa-Komponenten) ===== */
/* Eingabefelder – Variante B: mit Icon-Präfix */
.form-control, .form-select { border-radius: 10px; border-color: #d7dbe8; }
.form-control:focus, .form-select:focus {
  border-color: var(--mx-primary);
  box-shadow: 0 0 0 .2rem rgba(20, 27, 52, .12);
}
.input-group .input-group-text {
  background: #fff;
  border-color: #d7dbe8;
  color: #8a90a6;
  border-right: 0;
}
.input-group > .form-control,
.input-group > .form-select { border-left: 0; }
.input-group:focus-within .input-group-text { color: var(--mx-primary); border-color: var(--mx-primary); }
.input-group:focus-within .form-control,
.input-group:focus-within .form-select { border-color: var(--mx-primary); box-shadow: none; }
.form-label { font-weight: 600; font-size: .9rem; color: #3a4059; }

/* Checkboxen / Radios / Schalter – Navy-Akzent */
.form-check-input:checked { background-color: var(--mx-primary); border-color: var(--mx-primary); }
.form-check-input:focus { border-color: var(--mx-primary); box-shadow: 0 0 0 .2rem rgba(20, 27, 52, .18); }

/* Checkbox – Variante 3: auswählbare Karte (.feld-karte) */
.feld-karte { position: relative; }
.feld-karte input { position: absolute; opacity: 0; }
.feld-karte label {
  display: flex; align-items: center; gap: .7rem;
  border: 2px solid #e2e5ef; border-radius: 14px;
  padding: .8rem 1rem; cursor: pointer; margin: 0;
}
.feld-karte label .haken { margin-left: auto; color: #ccd1e0; font-size: 1.2rem; }
.feld-karte input:checked + label { border-color: var(--mx-primary); background: rgba(20, 27, 52, .04); }
.feld-karte input:checked + label .haken { color: var(--mx-primary); }

/* Radio – Variante 3: Karten (.radio-karten) */
.radio-karten { display: flex; flex-wrap: wrap; gap: .6rem; }
.radio-karten .rk-option input { position: absolute; opacity: 0; }
.radio-karten .rk-option label {
  display: block; border: 2px solid #e2e5ef; border-radius: 14px;
  padding: .9rem 1.1rem; cursor: pointer; margin: 0; min-width: 150px;
}
.radio-karten .rk-option input:checked + label { border-color: var(--mx-primary); background: rgba(20, 27, 52, .04); }
.radio-karten .rk-option .punkt {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ccd1e0;
  display: inline-block; vertical-align: middle; margin-right: .5rem; position: relative;
}
.radio-karten .rk-option input:checked + label .punkt { border-color: var(--mx-primary); }
.radio-karten .rk-option input:checked + label .punkt::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--mx-primary);
}

/* Markenlogo / Wortmarke */
.mx-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: -.01em; }
.mx-logo { height: 30px; width: auto; display: block; }
.mx-wordmark { font-size: 1.15rem; }
.push-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; width: 38px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff;
  border-radius: 10px; padding: 0; line-height: 1; transition: background .15s, border-color .15s, transform .1s; }
.push-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.push-btn:active { transform: scale(.94); }
.push-btn.aktiv { background: rgba(6,182,212,.22); border-color: rgba(6,182,212,.5); color: #fff; }

/* Moderner Toggler (Hamburger) */
.mx-nav .navbar-toggler { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  border-radius: 10px; padding: .4rem .55rem; transition: background .15s; }
.mx-nav .navbar-toggler:hover { background: rgba(255,255,255,.14); }
.mx-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(6,182,212,.35); }

/* ===== Zentrale-Header – Variante 4: Gradient & Akzent ===== */
.navbar.mx-nav--grad { background: var(--mx-grad) !important; box-shadow: 0 10px 24px rgba(15,21,48,.25); }
.mx-nav--grad .navbar-nav { gap: .2rem; align-items: center; }
.mx-nav--grad .nav-link { color: rgba(255,255,255,.75); display: inline-flex; align-items: center;
  padding: .48rem .9rem; font-weight: 500; font-size: .93rem; border-radius: 10px;
  transition: background .15s, color .15s; }
.mx-nav--grad .nav-link:hover { color: #fff; background: rgba(255,255,255,.10); }
.mx-nav--grad .nav-link.active { color: #fff; font-weight: 600; background: rgba(6,182,212,.20);
  box-shadow: inset 0 0 0 1px rgba(6,182,212,.35); }
/* Suchfeld im Header */
.mx-suche { display: inline-flex; align-items: center; gap: .5rem; height: 38px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 0 .7rem; color: #c7cbe0; }
.mx-suche:focus-within { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); }
.mx-suche i { font-size: .95rem; }
.mx-suche input { border: none; outline: none; background: transparent; color: #fff; font-size: .9rem; width: 180px; }
.mx-suche input::placeholder { color: rgba(255,255,255,.6); }
/* Benutzer + Avatar */
.mx-user { display: inline-flex; align-items: center; gap: .5rem; height: 38px; color: #e7e9f6; font-size: .9rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 0 .8rem 0 .28rem; }
.mx-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--mx-accent);
  color: #05323b; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; }
.mx-nav--grad .btn-outline-light { display: inline-flex; align-items: center; justify-content: center;
  height: 38px; width: 38px; padding: 0; border-color: rgba(255,255,255,.28); border-radius: 10px; }
.mx-nav--grad .btn-outline-light:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }

/* Aufgeklapptes Mobil-Menü */
@media (max-width: 991.98px) {
  .mx-nav--grad .navbar-collapse { margin-top: .75rem; padding: .6rem; border-radius: 14px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
  .mx-nav--grad .navbar-nav { gap: .1rem; margin-bottom: .5rem; align-items: stretch; }
  .mx-nav--grad .nav-link { padding: .6rem .8rem; }
  .mx-suche { width: 100%; margin: .35rem 0; }
  .mx-suche input { width: 100%; }
  .mx-user { margin: .35rem 0; width: max-content; }
  .mx-nav--grad .btn-outline-light { width: auto; padding: 0 .9rem; }
}

/* ===== Seitenkopf-Card ===== */
.seiten-kopf { border: 1px solid var(--mx-line, #e6e8f2); border-radius: 14px; overflow: hidden; }
.seiten-kopf .card-body { padding: 1rem 1.25rem; }
.seiten-kopf h3 { font-weight: 700; letter-spacing: -.01em; }
.kopf-ico { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem;
  background: var(--mx-grad); color: #fff; box-shadow: 0 6px 14px rgba(20,27,52,.22); }
.kopf-sub { font-size: .85rem; color: #6b7189; margin-top: .1rem; }

/* Warn-Variante des Kopf-Icons (z. B. Unfall) */
.kopf-ico--warn { background: linear-gradient(135deg, #EF4444, #b91c1c); box-shadow: 0 6px 14px rgba(185,28,28,.28); }

/* ===== Vorgang-Detail (kompakt & modern) ===== */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .5rem; }
.detail-grid > div { padding: .5rem .25rem; border-bottom: 1px solid var(--mx-line, #eef0f6); }
.detail-grid dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: #8a90a6; font-weight: 600; margin-bottom: .1rem; }
.detail-grid dt i { color: var(--mx-accent); }
.detail-grid dd { margin: 0; font-weight: 500; color: var(--mx-ink); font-size: .95rem; word-break: break-word; }
@media (max-width: 575.98px) { .detail-grid { grid-template-columns: 1fr; } }

/* Pfad / Breadcrumb */
.mx-pfad { background: #fff; border-bottom: 1px solid var(--mx-line, #e6e8f2); padding: .6rem 0; }
.mx-pfad .breadcrumb { font-size: .85rem; }
.mx-pfad .breadcrumb-item a { color: var(--mx-accent); text-decoration: none; display: inline-flex; align-items: center; }
.mx-pfad .breadcrumb-item a:hover { text-decoration: underline; }
.mx-pfad .breadcrumb-item.active { color: #6b7280; font-weight: 600; }
.mx-pfad .breadcrumb-item + .breadcrumb-item::before { color: #b8bdd0; }

/* Stammdaten – vertikales Tab-System */
.stamm-tabs { gap: .5rem; position: sticky; top: 1rem; }
.stamm-tabs .nav-link {
  display: flex; align-items: center; gap: .75rem; text-align: left;
  padding: .75rem .9rem; border-radius: 14px; color: var(--mx-ink, #0F1530);
  background: #fff; border: 1px solid var(--mx-line, #e6e8f2); transition: all .15s;
}
.stamm-tabs .nav-link:hover { border-color: var(--mx-accent, #06B6D4); }
.stamm-tabs .nav-link.active {
  background: var(--mx-grad, linear-gradient(135deg,#1B2550 0%,#0F1530 100%));
  color: #fff; border-color: transparent;
}
.stamm-tab-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(6,182,212,.12); color: var(--mx-accent, #06B6D4); font-size: 1.15rem;
}
.stamm-tabs .nav-link.active .stamm-tab-ico { background: rgba(255,255,255,.16); color: #fff; }
.stamm-tab-txt { display: flex; flex-direction: column; line-height: 1.2; }
.stamm-tab-name { font-weight: 600; }
.stamm-tab-zahl { font-size: .78rem; opacity: .7; }
.stamm-kontakt { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; color: #6b7280; margin-top: .15rem; }
.stamm-kontakt i { color: var(--mx-accent, #06B6D4); margin-right: .2rem; }
.stamm-notiz { font-size: .85rem; color: #6b7280; background: #f6f7fb; border-radius: 8px; padding: .35rem .6rem; margin-top: .4rem; }



/* Status-Badges */
.status-badge { font-size: .78rem; padding: .35em .7em; border-radius: 8px; font-weight: 600; }
.status-offen { background: #fef3e2; color: #b45309; }
.status-in_arbeit { background: #e0f2fe; color: #0369a1; }
.status-erledigt { background: #dcfce7; color: #15803d; }

/* Fahrzeug-Status-Badges */
.fz-badge { font-size: .78rem; padding: .35em .7em; border-radius: 8px; font-weight: 600;
  display: inline-flex; align-items: center; gap: .3em; }
.fz-aktiv { background: #dcfce7; color: #15803d; }
.fz-werkstatt { background: #fef3e2; color: #b45309; }
.fz-stillgelegt { background: #f1f2f7; color: #6b7189; }

/* Kompakte Kennzahl-Chips (z. B. Fahrzeugprofil) */
.kennzahl-chip { display: inline-flex; align-items: center; gap: .45rem; background: #fff;
  border: 1px solid var(--mx-line, #e6e8f2); border-radius: 12px; padding: .55rem .8rem; }
.kennzahl-chip .kz-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
  background: rgba(6,182,212,.12); color: #0891b2; }
.kennzahl-chip .kz-zahl { font-size: 1.1rem; font-weight: 800; line-height: 1; color: var(--mx-ink); }
.kennzahl-chip .kz-label { font-size: .72rem; color: #6b7189; }

/* Fahrzeug-Profil – moderner Hero */
.fz-hero { position: relative; overflow: hidden; border-radius: 20px;
  background: var(--mx-grad, linear-gradient(135deg,#1B2550 0%,#0F1530 100%)); color: #fff; }
.fz-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(6,182,212,.35) 0%, transparent 70%); pointer-events: none; }
.fz-hero-body { position: relative; z-index: 1; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.5rem 1.75rem; }
.fz-hero-ico { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; flex: 0 0 64px;
  align-items: center; justify-content: center; font-size: 1.8rem;
  background: rgba(255,255,255,.12); color: #fff; }
.fz-hero-kz { font-size: 1.7rem; font-weight: 800; line-height: 1.1; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fz-hero-sub { color: rgba(255,255,255,.7); font-size: .95rem; margin-top: .2rem; }

/* Moderne Statistik-Karten */
.stat-karte { background: #fff; border: 1px solid var(--mx-line, #e6e8f2); border-radius: 16px;
  padding: 1rem 1.1rem; display: flex; align-items: center; gap: .85rem; height: 100%; transition: transform .12s, box-shadow .12s; }
.stat-karte:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,21,48,.08); }
.stat-karte .stat-ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem;
  background: rgba(6,182,212,.12); color: #0891b2; }
.stat-karte .stat-ico--warn { background: rgba(239,68,68,.12); color: #dc2626; }
.stat-karte .stat-ico--ok { background: rgba(16,185,129,.14); color: #059669; }
.stat-karte .stat-zahl { font-size: 1.35rem; font-weight: 800; line-height: 1.05; color: var(--mx-ink); }
.stat-karte .stat-label { font-size: .78rem; color: #6b7189; }


/* Fallakte-Hervorhebung */
.fallakte-wichtig { border: 1px solid rgba(239,68,68,.35); }
.fallakte-wichtig .card-header { background: #fff5f5; color: #b91c1c; font-weight: 600; }
.form-label-sm { font-size: .75rem; color: #6b7189; font-weight: 600; }

/* ===== Bearbeitung / Fallakte – moderne Felder ===== */
.fallakte-wichtig .form-label-sm i, .card .form-label-sm i { color: var(--mx-accent, #06B6D4); }
.card-body .input-group-text { background: #f7f8fc; border-color: var(--mx-line, #e6e8f2);
  color: #6b7189; }
.card-body .input-group .form-control:focus,
.card-body .input-group .form-select:focus { border-color: var(--mx-accent, #06B6D4);
  box-shadow: 0 0 0 .18rem rgba(6,182,212,.18); z-index: 3; }
.card-body textarea.form-control:focus { border-color: var(--mx-accent, #06B6D4);
  box-shadow: 0 0 0 .18rem rgba(6,182,212,.18); }

/* Switch-Zeilen als moderne Kachel */
.bearb-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin: 0; padding: 9px 12px; cursor: pointer;
  background: #f7f8fc; border: 1px solid var(--mx-line, #e6e8f2); border-radius: 10px;
  transition: background .15s, border-color .15s; }
.bearb-switch:hover { background: #eef0f8; border-color: #d5d9ea; }
.bearb-switch-txt { font-size: .9rem; font-weight: 500; color: var(--mx-ink, #0F1530);
  display: inline-flex; align-items: center; gap: .5rem; }
.bearb-switch-txt i { color: var(--mx-accent, #06B6D4); }
.bearb-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.bearb-switch .form-check-input:checked { background-color: var(--mx-success, #10B981);
  border-color: var(--mx-success, #10B981); }

/* Meldungstext-Block */
.meldung-text { background: #f7f8fc; border: 1px solid var(--mx-line, #e6e8f2);
  border-radius: 10px; padding: 12px 14px; color: var(--mx-ink, #0F1530); }

/* ===== Schritte / Stepper ===== */
.schritt-liste { list-style: none; margin: 0; padding: 0; position: relative; }
.schritt { position: relative; display: flex; gap: 14px; padding-bottom: 22px; }
.schritt:last-child { padding-bottom: 0; }
.schritt::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: -4px;
  width: 2px; background: var(--mx-line, #e6e8f2); }
.schritt:last-child::before { display: none; }
.schritt-punkt { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
  background: #eef0f7; color: #9aa0b5; border: 2px solid #eef0f7; }
.schritt-titel { font-weight: 600; color: var(--mx-ink, #0F1530); line-height: 1.2; }
.schritt-sub { font-size: .8rem; color: #8a90a6; margin-top: 2px; }
/* Zustaende */
.schritt.erledigt .schritt-punkt { background: var(--mx-success, #10B981);
  border-color: var(--mx-success, #10B981); color: #fff; }
.schritt.erledigt::before { background: var(--mx-success, #10B981); }
.schritt.aktiv .schritt-punkt { background: rgba(6,182,212,.15);
  border-color: var(--mx-accent, #06B6D4); color: #0891b2; }
.schritt.offen .schritt-titel { color: #9aa0b5; }
/* Notiz-Eintrag im Stepper */
.schritt.schritt-notiz .schritt-punkt { background: rgba(6,182,212,.12);
  border-color: rgba(6,182,212,.35); color: #0891b2; }
.schritt.schritt-notiz::before { background: var(--mx-line, #e6e8f2); }
.schritt-notiz-text { margin-top: 6px; background: #f7f8fc; border: 1px solid var(--mx-line, #e6e8f2);
  border-radius: 8px; padding: 8px 10px; font-size: .88rem; color: var(--mx-ink, #0F1530); }

/* ===== Meldungen-Tabelle – Art-Zelle mit großem Icon ===== */
.art-zelle { display: flex; align-items: center; gap: 12px; }
.art-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
  background: rgba(6,182,212,.12); color: #0891b2; }
.art-ico--warn { background: rgba(239,68,68,.12); color: #dc2626; }
.art-ico--ok { background: rgba(16,185,129,.14); color: #059669; }
.art-name { font-weight: 600; color: var(--mx-ink, #0F1530); line-height: 1.2; }
.art-zeit { font-size: .78rem; color: #8a90a6; margin-top: 2px;
  display: inline-flex; align-items: center; gap: .3rem; }

/* Schmaler Inhaltsbereich (nicht volle Seitenbreite) */
.inhalt-schmal { max-width: 1080px; margin: 0 auto; }

/* Dynamische Filterleiste */
.filter-feld { width: auto; }
.filter-feld .form-select, .filter-feld .form-control { min-width: 150px; }
.filter-suche { flex: 1 1 220px; }
.filter-suche .form-control { min-width: 0; }

/* Moderne Tabellen-Karte */
.tabelle-karte { border: 1px solid var(--mx-line, #e6e8f2); border-radius: 16px; overflow: hidden; }
.tabelle-modern { border-collapse: separate; border-spacing: 0; }
.tabelle-modern thead th { background: #f7f8fc; border-bottom: 1px solid var(--mx-line, #e6e8f2);
  text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; color: #8a90a6;
  font-weight: 700; padding: 12px 16px; }
.tabelle-modern tbody td { padding: 12px 16px; vertical-align: middle;
  border-top: 1px solid #f0f1f7; }
.tabelle-modern tbody tr:first-child td { border-top: none; }
.tabelle-modern tbody tr { transition: background .12s; }
.tabelle-modern tbody tr:hover { background: #f7f9ff; }

/* ===== Dashboard – moderne Stat-Karten ===== */.stat-karte { background: #fff; border: 1px solid var(--mx-line, #e6e8f2); border-radius: 14px;
  padding: 16px; box-shadow: 0 3px 10px rgba(15,21,48,.05); height: 100%;
  transition: transform .15s, box-shadow .15s; }
.stat-karte:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15,21,48,.10); }
.stat-kopf { display: flex; align-items: center; gap: 12px; }
.stat-ico { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.stat-ico.ico-a { background: rgba(6,182,212,.12); color: #0891b2; }
.stat-ico.ico-b { background: rgba(20,27,52,.08); color: var(--mx-primary); }
.stat-ico.ico-c { background: rgba(16,185,129,.14); color: var(--mx-success); }
.stat-ico.ico-d { background: rgba(245,158,11,.16); color: #b45309; }
.stat-zahl { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--mx-ink); }
.stat-label { font-size: .82rem; color: #6b7189; margin-top: .15rem; }

/* ===== Startseite / Login ===== */
.start-seite { background: var(--mx-grad); min-height: 100vh; color: #fff; }
.start-seite .text-muted { color: rgba(255,255,255,.75) !important; }
/* ===== Login (modern, zweispaltig) ===== */
.login-seite { background: var(--mx-bg); min-height: 100vh; }
.login-split { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }

/* Marken-Seite (links) */
.login-brand { position: relative; background: var(--mx-grad); color: #fff; overflow: hidden; display: flex; align-items: center; padding: 3rem; }
.login-brand::before { content: ""; position: absolute; top: -15%; right: -10%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(34,211,238,.3), transparent 62%); border-radius: 50%; }
.login-brand::after { content: ""; position: absolute; bottom: -20%; left: -12%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 62%); border-radius: 50%; }
.lb-inhalt { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; }
.lb-marke { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: 2rem; }
.lb-marke img { height: 40px; width: 40px; }
.lb-titel { font-size: clamp(1.8rem, 2.6vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 1rem; }
.lb-text { color: rgba(255,255,255,.88); font-size: 1.02rem; margin-bottom: 1.8rem; max-width: 34rem; }
.lb-liste { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .7rem; }
.lb-liste li { display: flex; align-items: center; gap: .7rem; font-weight: 500; color: rgba(255,255,255,.92); }
.lb-liste li i { color: #22D3EE; font-size: 1.15rem; }
.lb-karte { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 16px; padding: 1rem 1.15rem; max-width: 300px; box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.lb-karte-kopf { font-weight: 700; display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; }
.lb-karte-zeile { font-size: .95rem; }
.lb-karte-meta { color: rgba(255,255,255,.65); font-size: .82rem; margin-top: .15rem; }

/* Formular-Seite (rechts) */
.login-form-side { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.login-karte { width: 100%; max-width: 400px; }
.login-karte-kopf { margin-bottom: 1.6rem; }
.login-logo { height: 52px; width: 52px; margin-bottom: 1rem; display: none; }
.login-karte-kopf h1 { font-weight: 800; letter-spacing: -.02em; font-size: 1.7rem; margin-bottom: .25rem; }
.login-karte-kopf p { color: #6b7189; margin-bottom: 0; font-size: .95rem; }

.login-karte .feld .input-group-text { background: #fff; border-right: 0; color: #8a90a6; }
.login-karte .feld .form-control { border-left: 0; padding-left: .25rem; }
.login-karte .feld .form-control::placeholder { color: #adb2c4; }
.login-karte .feld .form-control:focus { box-shadow: none; border-color: #ced3e0; }
.login-karte .feld:focus-within .input-group-text,
.login-karte .feld:focus-within .form-control,
.login-karte .feld:focus-within .btn-augen { border-color: var(--mx-primary); }
.login-karte .feld:focus-within .input-group-text { color: var(--mx-primary); }
.btn-augen { background: #fff; border: 1px solid #ced4da; border-left: 0; color: #8a90a6; }
.btn-augen:hover { color: var(--mx-primary); background: #fff; }

.login-trenner { display: flex; align-items: center; gap: .8rem; color: #adb2c4; font-size: .82rem; margin: 1.3rem 0; }
.login-trenner::before, .login-trenner::after { content: ""; flex: 1; height: 1px; background: rgba(15,21,48,.1); }
.btn-fahrer { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; background: #fff; color: var(--mx-primary); border: 1.5px solid #d7dbe8; border-radius: 10px; font-weight: 600; padding: .6rem 1rem; transition: background .15s, border-color .15s; }
.btn-fahrer:hover { background: var(--mx-bg); border-color: var(--mx-primary); color: var(--mx-primary); }
.login-fahrer-link { color: var(--mx-primary); font-weight: 600; text-decoration: none; font-size: .95rem; }
.login-fahrer-link:hover { text-decoration: underline; }
.login-demo { text-align: center; color: #9aa0b5; font-size: .82rem; margin: 1.3rem 0 0; }

@media (max-width: 991.98px) {
  .login-split { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-seite { background: var(--mx-grad); }
  .login-form-side { min-height: 100vh; }
  .login-karte { background: #fff; border-radius: 22px; padding: 2.4rem 2rem 1.8rem; box-shadow: 0 30px 70px rgba(15,21,48,.35); }
  .login-karte-kopf { text-align: center; }
  .login-logo { display: inline-block; margin-left: auto; margin-right: auto; }
}
.auswahl-karte { transition: transform .15s, box-shadow .15s; border: none; border-radius: 18px; }
.auswahl-karte:hover { transform: translateY(-4px); box-shadow: 0 .9rem 2rem rgba(15,21,48,.18) !important; }

/* ===== Landingpage ===== */
.landing { background: #fff; color: #1f2430; scroll-behavior: smooth; }

/* Modernes Header-Menue */
.landing-nav { background: rgba(255,255,255,.7); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(15,21,48,.06); padding-top: .55rem; padding-bottom: .55rem; transition: box-shadow .25s ease, background .25s ease; }
.landing-nav.nav-scrolled { background: rgba(255,255,255,.92); box-shadow: 0 8px 30px rgba(15,21,48,.09); }
.landing-nav .mx-logo { height: 34px; }
.landing-nav .mx-wordmark { color: var(--mx-ink); font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; }
.landing-nav .navbar-nav .nav-link { position: relative; color: #4a4f66; font-weight: 500; padding: .45rem .95rem; border-radius: 10px; transition: color .15s ease, background .15s ease; }
.landing-nav .navbar-nav .nav-link:hover { color: var(--mx-primary); background: rgba(20,27,52,.055); }
.landing-nav .navbar-nav .nav-link:active { transform: translateY(1px); }
.landing-nav .btn-nav { display: inline-flex; align-items: center; background-image: var(--mx-grad); color: #fff; border: none; font-weight: 600; border-radius: 10px; padding: .5rem 1.15rem; box-shadow: 0 8px 18px rgba(20,27,52,.22); transition: filter .15s ease, box-shadow .15s ease, transform .05s ease; }
.landing-nav .btn-nav:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 10px 22px rgba(20,27,52,.3); }
.landing-nav .btn-nav:active { transform: translateY(1px); }
.landing-nav .navbar-toggler { border: 1px solid rgba(15,21,48,.12); border-radius: 10px; padding: .35rem .55rem; }
.landing-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(6,182,212,.3); }
@media (max-width: 991.98px) {
  .landing-nav .navbar-collapse { background: #fff; border: 1px solid rgba(15,21,48,.07); border-radius: 16px; padding: .8rem; margin-top: .6rem; box-shadow: 0 12px 30px rgba(15,21,48,.1); }
  .landing-nav .navbar-nav .nav-link { padding: .6rem .8rem; }
  .landing-nav .btn-nav { justify-content: center; margin-top: .35rem; }
}

.btn-hell { background: #fff; color: var(--mx-primary); border: none; font-weight: 600; box-shadow: 0 6px 18px rgba(15,21,48,.12); }
.btn-hell:hover { background: #f2f2fb; color: var(--mx-primary-700); }
.btn-outline-hell { border: 1.5px solid rgba(255,255,255,.7); color: #fff; font-weight: 600; background: transparent; }
.btn-outline-hell:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.text-akzent { color: #22D3EE; }

/* Hero */
.hero { position: relative; background: var(--mx-grad); color: #fff; padding: 3.75rem 0 3.25rem; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -8%; top: -20%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(34,211,238,.35), transparent 60%); border-radius: 50%; }
.hero-badge { display: inline-flex; align-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); color: #fff; padding: .3rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 600; margin-bottom: 1rem; }
.hero-titel { font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin-bottom: .9rem; }
.hero-text { font-size: 1rem; color: rgba(255,255,255,.9); max-width: 32rem; margin-bottom: 1.4rem; }
.hero .btn-lg { padding: .55rem 1.2rem; font-size: .98rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1rem; color: rgba(255,255,255,.85); font-size: .84rem; font-weight: 500; }

/* Hero-Visual */
.hero-visual { position: relative; height: 320px; }
.visual-karte { position: absolute; background: #fff; color: #1f2430; border-radius: 14px; padding: .85rem 1rem; box-shadow: 0 16px 40px rgba(15,21,48,.26); width: 260px; }
.visual-karte .vk-kopf { font-weight: 700; font-size: .88rem; display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem; }
.visual-karte .vk-zeile { font-size: .88rem; }
.visual-karte .vk-meta { color: #8a90a6; font-size: .78rem; margin-top: .2rem; }
.visual-karte .vk-gross { font-size: 1.45rem; font-weight: 800; color: var(--mx-ink); }
.visual-karte .vk-balken { height: 6px; background: #e5e8f2; border-radius: 6px; margin-top: .5rem; overflow: hidden; }
.visual-karte .vk-balken span { display: block; height: 100%; width: 72%; background: var(--mx-grad); }
.visual-karte .vk-stat span { font-weight: 800; color: var(--mx-primary); }
.karte-oben { top: 0; right: 10px; z-index: 3; animation: schweben 5s ease-in-out infinite; }
.karte-mitte { top: 108px; left: 0; z-index: 2; animation: schweben 5s ease-in-out infinite .6s; }
.karte-unten { top: 222px; right: 30px; z-index: 1; width: 230px; animation: schweben 5s ease-in-out infinite 1.2s; }
@keyframes schweben { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 991.98px) { .hero-visual { height: 380px; margin-top: 1.5rem; } }

/* Kennzahlen */
.kennzahlen { background: var(--mx-ink); color: #fff; padding: 1.9rem 0; }
.kennzahlen .kz-wert { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.kennzahlen .kz-text { color: rgba(255,255,255,.7); font-size: .85rem; }

/* Abschnitte allgemein */
.abschnitt { padding: 3.75rem 0; }
.abschnitt-hell { background: var(--mx-bg); }
.abschnitt-label { display: inline-block; color: var(--mx-primary); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin-bottom: .5rem; }
.abschnitt-label.label-hell { color: #22D3EE; }
.abschnitt-titel { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; text-align: center; }
.abschnitt-untertitel { color: #6b7189; text-align: center; max-width: 40rem; margin: .6rem auto 0; }
.abschnitt-untertitel.untertitel-hell { color: rgba(255,255,255,.75); }

/* Funktionskarten */
.funktion-karte { background: #fff; border: 1px solid rgba(15,21,48,.07); border-radius: 16px; padding: 1.4rem 1.3rem; height: 100%; transition: transform .15s, box-shadow .15s, border-color .15s; }
.funktion-karte:hover { transform: translateY(-4px); box-shadow: 0 .8rem 2rem rgba(15,21,48,.1); border-color: transparent; }
.funktion-karte .fk-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; background: var(--mx-grad); margin-bottom: .85rem; }
.funktion-karte h5 { font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem; }
.funktion-karte p { color: #6b7189; margin-bottom: 0; font-size: .9rem; }

/* Ablauf-Schritte */
.schritt-karte { background: #fff; border-radius: 16px; padding: 1.5rem 1.3rem; height: 100%; box-shadow: 0 .5rem 1.4rem rgba(15,21,48,.06); position: relative; }
.schritt-karte .schritt-nr { width: 40px; height: 40px; border-radius: 11px; background: var(--mx-grad); color: #fff; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin-bottom: .85rem; }
.schritt-karte h5 { font-weight: 700; font-size: 1.05rem; }
.schritt-karte p { color: #6b7189; margin-bottom: 0; font-size: .9rem; }

/* Vorteile */
.vorteil-liste { list-style: none; padding: 0; margin: 0; }
.vorteil-liste li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; font-size: 1.03rem; border-bottom: 1px dashed rgba(15,21,48,.08); }
.vorteil-liste li i { color: var(--mx-success); font-size: 1.15rem; }
.vorteil-visual { background: #fff; border: 1px solid rgba(15,21,48,.07); border-radius: 20px; padding: 1.2rem; box-shadow: 0 1rem 2.4rem rgba(15,21,48,.08); }
.vv-zeile { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-radius: 12px; background: var(--mx-bg); margin-bottom: .7rem; font-weight: 500; }
.vv-zeile:last-child { margin-bottom: 0; }
.vv-zeile i { font-size: 1.2rem; }
.badge-live, .badge-foto, .badge-alarm { margin-left: auto; font-size: .74rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px; }
.badge-live { background: rgba(16,185,129,.14); color: var(--mx-success); }
.badge-foto { background: rgba(20,27,52,.1); color: var(--mx-primary); }
.badge-alarm { background: rgba(239,68,68,.14); color: var(--mx-danger); }

/* Zugang-Abschnitt */
.abschnitt-dunkel { background: var(--mx-ink); }
.zugang-karte { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 1.9rem 1.6rem; height: 100%; text-align: center; color: #fff; transition: transform .15s, background .15s, border-color .15s; }
.zugang-karte:hover { transform: translateY(-4px); background: rgba(255,255,255,.08); border-color: rgba(34,211,238,.5); }
.zugang-karte .zk-icon { font-size: 2.1rem; color: #22D3EE; margin-bottom: .7rem; }
.zugang-karte h3 { font-weight: 700; font-size: 1.2rem; }
.zugang-karte p { color: rgba(255,255,255,.72); }
.zugang-karte .zk-link { display: inline-flex; align-items: center; gap: .4rem; color: #22D3EE; font-weight: 600; margin-top: .4rem; }

/* Footer */
.landing-footer { background: #0a0f24; color: rgba(255,255,255,.7); padding: 2.5rem 0; }
.landing-footer .mx-wordmark { color: #fff; }
.footer-claim { color: rgba(255,255,255,.6); font-size: .95rem; }
.footer-copy { color: rgba(255,255,255,.55); font-size: .9rem; }

/* ===== Fahrer-App (mobile-first) ===== */
.fahrer-app { background: var(--mx-bg); min-height: 100vh; }
.fahrer-kopf { position: sticky; top: 0; z-index: 20; background: var(--mx-ink); box-shadow: 0 2px 10px rgba(15,21,48,.25); }
.fahrer-kopf-innen { max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; color: #fff; min-height: 54px; }
.fk-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.fk-logo { height: 26px; width: 26px; }
.fk-zurueck { color: #fff; font-size: 1.4rem; text-decoration: none; line-height: 1; display: inline-flex; }
.fk-titel { font-weight: 700; margin-left: .3rem; }
.fk-aktion { display: inline-flex; align-items: center; gap: .35rem; color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); padding: .35rem .75rem; border-radius: 999px; white-space: nowrap; }
.fk-aktion i { font-size: .95rem; }
.fk-aktion:hover { color: #fff; background: rgba(255,255,255,.22); }
.fahrer-inhalt { max-width: 560px; margin: 0 auto; padding-bottom: 92px; }

.fahrer-login { background: var(--mx-grad); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-box { background: #fff; border-radius: 22px; padding: 30px 24px; width: 100%; max-width: 400px; box-shadow: 0 18px 45px rgba(15,21,48,.28); }

/* Untere Tab-Leiste */
.fahrer-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid rgba(15,21,48,.08); box-shadow: 0 -4px 20px rgba(15,21,48,.06); display: flex; max-width: 560px; margin: 0 auto; padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); }
.fahrer-tabbar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .35rem 0; text-decoration: none; color: #8a90a6; font-size: .72rem; font-weight: 600; }
.fahrer-tabbar .tab i { font-size: 1.3rem; }
.fahrer-tabbar .tab.aktiv { color: var(--mx-primary); }

/* Begruessungskarte */
.willkommen-karte { display: flex; align-items: center; justify-content: space-between; background: var(--mx-grad); color: #fff; border-radius: 20px; padding: 1.2rem 1.3rem; box-shadow: 0 10px 26px rgba(15,21,48,.22); margin-bottom: 1rem; }
.wk-hallo { font-size: 1.25rem; font-weight: 800; }
.wk-text { color: rgba(255,255,255,.82); font-size: .92rem; }
.wk-avatar { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; }

/* Statistik-Kacheln */
.stat-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 1.3rem; }
.stat-kachel { background: #fff; border-radius: 16px; padding: .9rem .5rem; text-align: center; box-shadow: 0 3px 10px rgba(15,21,48,.06); }
.stat-kachel .sk-wert { font-size: 1.6rem; font-weight: 800; color: var(--mx-ink); line-height: 1.1; }
.stat-kachel .sk-text { font-size: .72rem; color: #6b7189; font-weight: 600; margin-top: 2px; }
.stat-kachel .sk-text i { color: var(--mx-primary); }

/* Abschnittskopf */
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 .5rem; }
.abschnitt-kopf span { font-weight: 700; color: var(--mx-ink); }
.mehr-link { font-size: .85rem; color: var(--mx-primary); text-decoration: none; font-weight: 600; }

/* Schnellzugriff */
.schnell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.schnell-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #fff; border-radius: 16px; padding: 1.1rem .5rem; text-decoration: none; color: #1f2430; font-weight: 600; font-size: .9rem; text-align: center; box-shadow: 0 3px 10px rgba(15,21,48,.06); }
.schnell-kachel i { font-size: 1.6rem; color: var(--mx-primary); }
.schnell-kachel:active { transform: scale(.97); }

/* Melde-Aktionen (Kacheln zum direkten Melden) */
.melde-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.melde-kachel { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; border-radius: 16px; padding: .95rem .35rem; text-decoration: none; color: #1f2430; font-weight: 600; font-size: .78rem; text-align: center; box-shadow: 0 3px 10px rgba(15,21,48,.06); transition: transform .08s, box-shadow .15s; }
.melde-kachel:active { transform: scale(.95); }
.melde-kachel .mk-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: rgba(20,27,52,.06); color: var(--mx-primary); }
.melde-kachel .mk-text { line-height: 1.15; }
.melde-schaden .mk-icon, .melde-unfall .mk-icon { background: rgba(239,68,68,.12); color: var(--mx-danger); }
.melde-tankvorgang .mk-icon { background: rgba(6,182,212,.14); color: #0891b2; }
.melde-km_meldung .mk-icon { background: rgba(16,185,129,.14); color: var(--mx-success); }
.melde-wartung .mk-icon, .melde-oelstand .mk-icon, .melde-reifen .mk-icon { background: rgba(245,158,11,.14); color: #d97706; }
@media (max-width: 360px) { .melde-grid { grid-template-columns: repeat(3, 1fr); } }

/* Suche */
.suche-leiste { position: relative; }
.suche-leiste i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9aa0b5; }
.suche-leiste input { padding-left: 40px; border-radius: 14px; height: 48px; }

/* Fahrzeugliste */
.fahrzeug-karte { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 9px 12px; margin-bottom: 8px; text-decoration: none; color: inherit; box-shadow: 0 3px 10px rgba(15,21,48,.06); }
.fahrzeug-karte:active { background: #eef0fb; }
.fahrzeug-karte .kennzeichen { font-weight: 700; font-size: 1rem; }
.fahrzeug-karte .fz-symbol { width: 38px; height: 38px; border-radius: 12px; background: rgba(20,27,52,.06); color: var(--mx-primary); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.fahrzeug-karte .fz-mitte { flex: 1; min-width: 0; }
.fahrzeug-karte .fz-km { font-size: .82rem; color: #6b7189; margin-top: 2px; }

/* Zuweisungs-Zeile (Profil): Karte + Entfernen-Button */
.zuw-zeile { display: flex; align-items: stretch; gap: 8px; }
.zuw-zeile .fahrzeug-karte { flex: 1; margin-bottom: 8px; }
.zuw-zeile .zuw-entfernen { display: flex; margin-bottom: 8px; }
.zuw-zeile .zuw-entfernen .btn { height: 100%; border-radius: 14px; display: flex; align-items: center; }
.zuweisen-form .form-text { color: #6b7189; }

/* Fahrzeug-Detailkopf */
.fahrzeug-info { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 3px 10px rgba(15,21,48,.06); }
.fahrzeug-info .fi-symbol { width: 46px; height: 46px; border-radius: 14px; background: var(--mx-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.fahrzeug-info .fi-mitte { flex: 1; min-width: 0; }
.fahrzeug-info .fi-kennzeichen { font-weight: 800; font-size: 1.15rem; color: var(--mx-ink); line-height: 1.2; }
.fahrzeug-info .fi-km { display: inline-flex; align-items: center; gap: .3rem; background: rgba(20,27,52,.06); color: var(--mx-primary); font-weight: 700; padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; white-space: nowrap; flex-shrink: 0; }

/* Aktions-Kacheln */
.aktion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aktion-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #fff; border-radius: 18px; padding: 24px 10px; text-decoration: none; color: #1f2430; font-weight: 600; box-shadow: 0 3px 10px rgba(15,21,48,.07); }
.aktion-kachel:active { transform: scale(.97); }
.aktion-kachel .icon { font-size: 1.9rem; color: var(--mx-primary); line-height: 1; }
.aktion-kachel.wichtig { background: #fff1f1; color: #b91c1c; }
.aktion-kachel.wichtig .icon { color: var(--mx-danger); }

/* Formularkopf */
.formular-kopf { text-align: center; margin-bottom: 1.3rem; }
.formular-kopf .fk-symbol { width: 58px; height: 58px; border-radius: 16px; background: var(--mx-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: .5rem; }
.formular-kopf .fk-symbol.wichtig { background: linear-gradient(135deg, #EF4444, #b91c1c); }
.formular-kopf .fk-titel-gross { font-weight: 800; font-size: 1.2rem; }

/* Datei-Auswahlflaeche */
.datei-flaeche { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 1.4rem; border: 2px dashed #ccd1e0; border-radius: 16px; color: #6b7189; cursor: pointer; background: #fff; }
.datei-flaeche i { font-size: 1.7rem; color: var(--mx-primary); }
.datei-flaeche:active { background: #f4f5fb; }

/* Vorschau Uploads */
.vorschau-bereich { display: flex; flex-wrap: wrap; gap: 8px; }
.vorschau-bild { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid #e2e5ef; }
.vorschau-datei { background: #eef0fb; padding: 8px 12px; border-radius: 10px; font-size: .85rem; }

/* Meldungsliste */
.meldung-eintrag { display: flex; gap: 12px; background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: 0 3px 10px rgba(15,21,48,.06); }
.meldung-eintrag.wichtig { border-left: 4px solid var(--mx-danger); }
.meldung-eintrag .me-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(20,27,52,.06); color: var(--mx-primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.meldung-eintrag.wichtig .me-icon { background: rgba(239,68,68,.12); color: var(--mx-danger); }
.meldung-eintrag .me-inhalt { flex: 1; min-width: 0; }

/* Status-Pillen */
.status-pille { font-size: .72rem; font-weight: 700; padding: .18rem .55rem; border-radius: 999px; white-space: nowrap; }
.status-offen { background: rgba(245,158,11,.16); color: #b45309; }
.status-in_arbeit { background: rgba(20,27,52,.1); color: var(--mx-primary); }
.status-erledigt { background: rgba(16,185,129,.16); color: #047857; }

/* Leer-Hinweis */
.leer-hinweis { text-align: center; color: #9aa0b5; padding: 2.5rem 1rem; }
.leer-hinweis > i { font-size: 2.6rem; color: #c5cad8; }
.leer-hinweis p { margin: .8rem 0 1rem; }

/* Profil */
.profil-kopf { text-align: center; padding: .1rem 0 .6rem; }
.profil-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--mx-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 800; box-shadow: 0 6px 14px rgba(15,21,48,.2); }
.profil-name { font-weight: 800; font-size: 1.05rem; margin-top: .35rem; }
.profil-rolle { display: inline-flex; align-items: center; gap: .35rem; color: var(--mx-primary); background: rgba(20,27,52,.06); padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; margin-top: .25rem; }
.info-liste { background: #fff; border-radius: 16px; box-shadow: 0 3px 10px rgba(15,21,48,.06); overflow: hidden; }
.info-zeile { display: flex; align-items: center; justify-content: space-between; padding: .5rem 1rem; border-bottom: 1px solid rgba(15,21,48,.06); }
.info-zeile:last-child { border-bottom: none; }
.info-zeile span { color: #6b7189; display: inline-flex; align-items: center; gap: .5rem; }
.info-zeile span i { color: var(--mx-primary); }
.pin-form { background: #fff; border-radius: 16px; padding: .9rem; box-shadow: 0 3px 10px rgba(15,21,48,.06); }

/* Erfolgs-Kreis */
.erfolg-kreis { width: 92px; height: 92px; border-radius: 50%; background: rgba(16,185,129,.14); color: var(--mx-success); display: inline-flex; align-items: center; justify-content: center; font-size: 3rem; }

/* ===== PIN-Pad ===== */
.pin-kopf { text-align: center; margin-bottom: 1.4rem; }
.pin-avatar { width: 64px; height: 64px; margin: 0 auto .7rem; border-radius: 50%; background: var(--mx-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.6rem; box-shadow: 0 10px 24px rgba(15,21,48,.22); }
.pin-name { font-weight: 800; letter-spacing: -.01em; font-size: 1.25rem; margin-bottom: .1rem; }
.pin-hinweis { color: #8a90a6; font-size: .9rem; margin-bottom: 0; }
.pin-anzeige { display: flex; justify-content: center; gap: 12px; min-height: 24px; margin-bottom: 24px; }
.pin-punkt { width: 16px; height: 16px; border-radius: 50%; background: #d3d7e3; display: inline-block; }
.pin-punkt.gefuellt { background: var(--mx-primary); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pin-taste { font-size: 1.6rem; padding: 18px 0; border: none; border-radius: 16px; background: #eef0f6; font-weight: 600; color: #1f2430; transition: background .1s ease, transform .05s ease; }
.pin-taste:active { background: #e0e3ee; transform: scale(.97); }
.pin-taste.pin-ok { background: var(--mx-primary); background-image: var(--mx-grad); color: #fff; }
.pin-taste.pin-loeschen { background: #fdecec; }
.pin-taste.pin-ok:disabled { background: #c7cbdb; color: #fff; opacity: 1; }
.pin-abmelden { display: inline-block; margin-top: 1.1rem; color: #8a90a6; font-size: .85rem; text-decoration: none; font-weight: 600; }
.pin-abmelden:hover { color: var(--mx-primary); }

/* ===== Fahrer-Willkommen (Einstieg ohne Geraet) ===== */
.fahrer-willkommen { min-height: 100vh; min-height: 100dvh; background: var(--mx-grad); color: #fff; display: flex; align-items: center; justify-content: center; padding: 28px 18px calc(28px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; }
.fahrer-willkommen::before { content: ""; position: absolute; top: -12%; right: -18%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(34,211,238,.28), transparent 62%); border-radius: 50%; }
.fahrer-willkommen::after { content: ""; position: absolute; bottom: -16%; left: -18%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 62%); border-radius: 50%; }
.fw-wrap { position: relative; z-index: 1; width: 100%; max-width: 400px; }
.fw-top { text-align: center; margin-bottom: 1.3rem; }
.fw-logo { height: 60px; width: 60px; }
.fw-appname { font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; margin-top: .55rem; }
.fw-tagline { color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin-top: .1rem; }
.fw-karte { background: #fff; color: #1f2430; border-radius: 22px; padding: 1.8rem 1.5rem; box-shadow: 0 24px 60px rgba(0,0,0,.3); text-align: center; }
.fw-karte-icon { width: 60px; height: 60px; margin: 0 auto 1rem; border-radius: 18px; background: var(--mx-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.fw-titel { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; margin-bottom: .5rem; }
.fw-text { color: #6b7189; font-size: .95rem; margin-bottom: 1.3rem; }
.fw-schritte { display: grid; gap: .55rem; text-align: left; margin-bottom: 1.5rem; }
.fw-schritt { display: flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .92rem; color: #2a3050; }
.fw-schritt span { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--mx-bg); color: var(--mx-primary); font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.fw-link { display: inline-block; margin-top: 1rem; color: var(--mx-primary); font-weight: 600; text-decoration: none; font-size: .9rem; }
.fw-link:hover { text-decoration: underline; }

/* ===== Onboarding (PIN festlegen / Einladung) ===== */
.onb-seite { min-height: 100vh; min-height: 100dvh; background: var(--mx-bg); display: flex; align-items: flex-start; justify-content: center; padding: 40px 18px calc(40px + env(safe-area-inset-bottom)); }
.onb-inhalt { width: 100%; max-width: 400px; }
.login-box.onboarding { max-width: 380px; padding: 26px 24px 24px; }
.onb-marke { text-align: center; margin-bottom: 1.4rem; }
.onb-logo { height: 44px; }
.onb-willkommen { display: flex; align-items: center; gap: 12px; background: var(--mx-grad); color: #fff; border-radius: 16px; padding: .85rem 1rem; margin-bottom: 1.6rem; box-shadow: 0 10px 26px rgba(15,21,48,.16); }
.onb-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; flex: 0 0 auto; }
.onb-gruss { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.onb-sub { color: rgba(255,255,255,.82); font-size: .85rem; }
.onb-titel { font-weight: 800; letter-spacing: -.01em; margin-bottom: .15rem; }
.onb-schritte { display: flex; justify-content: center; gap: 8px; margin-bottom: 1rem; }
.onb-punkt { width: 26px; height: 5px; border-radius: 999px; background: #d8dbe8; transition: background .2s; }
.onb-punkt.aktiv { background: var(--mx-primary); }
.pin-anzeige.pin-fehler { animation: pin-shake .4s; }
.pin-anzeige.pin-fehler .pin-punkt.gefuellt { background: var(--mx-danger); }
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* ===== Zentrale ===== */
.zentrale { background: var(--mx-bg); }
.card { border: none; border-radius: 14px; box-shadow: 0 3px 12px rgba(15,21,48,.05); }
.brand-mark-sm { width: 26px; height: 26px; }