/* Corporate Design Transport-Express J. Grünhäuser (www.te-jg.de) */
:root {
  --orange: #F5680E;
  --orange-dark: #EC430F;
  --dark: #252525;
  --gray: #666;
  --light: #f5f5f5;
  --border: #ddd;
  --green: #1a7a2e;
  --red: #c11c1c;
}

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

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--dark);
  background: var(--light);
  min-height: 100vh;
}

/* Kopfzeile: obere Leiste mit Logo, darunter die Navigations-Buttons.
   Weisser Grund, weil das Firmenlogo dunkel gesetzt ist. */
.topbar {
  background: #fff;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.topbar .logo img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 62vw;
}
.topbar .kopf-titel {
  font-size: 0.78rem;
  color: var(--gray);
  text-align: right;
  line-height: 1.25;
}

.accent-bar { height: 4px; background: var(--orange); }

/* Navigationsleiste mit echten Buttons */
.navbar {
  background: var(--light);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.navbar a,
.navbar button.nav-klapp {
  flex: 1 1 auto;
  min-width: 110px;
  text-align: center;
  background: #fff;
  color: var(--dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.navbar button.nav-klapp { font-family: inherit; line-height: inherit; margin: 0; cursor: pointer; }
/* Winkel rechts im Knopf: mit Rahmen gezeichnet, in der Textfarbe, dreht sich beim Aufklappen. */
.navbar button.nav-klapp::after {
  content: ''; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.5em; vertical-align: 0.15em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.navbar button.nav-klapp[aria-expanded="true"]::after { transform: rotate(225deg); vertical-align: -0.05em; }
.navbar a:hover,
.navbar button.nav-klapp:hover { border-color: var(--orange); color: var(--orange-dark); }
.navbar button.nav-klapp:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.navbar a.active,
.navbar button.nav-klapp.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.navbar a.abmelden { color: var(--gray); font-weight: 500; }
.navbar a.abmelden:hover { border-color: var(--red); color: var(--red); }

@media (min-width: 700px) {
  .navbar a,
  .navbar button.nav-klapp { flex: 0 0 auto; min-width: 0; }
  .cockpit-nav .nav-gruppe { flex: 0 0 auto; min-width: 0; }
  .cockpit-nav .nav-neu { margin-left: auto; }
}

/* Aufklappmenue der Kopfleiste (cockpit-nav.js): eine Gruppe je Modul, die Liste haengt unter dem Knopf. */
.cockpit-nav .nav-gruppe { position: relative; display: flex; }
.nav-sub {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 280px; max-width: calc(100vw - 2rem);
  margin: 0; padding: 0.3rem; list-style: none;
  background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.nav-sub[hidden] { display: none; }
/* cockpit-nav.js setzt nav-sub--rechts, wenn die Liste links bündig übers Fenster hinausragen würde. */
.cockpit-nav .nav-sub.nav-sub--rechts { left: auto; right: 0; }
.cockpit-nav .nav-sub a {
  display: block; flex: none; min-width: 0; text-align: left;
  background: none; border: 0; border-radius: 6px; box-shadow: none;
  padding: 0.55rem 0.7rem; font-weight: 400; color: var(--dark);
}
.cockpit-nav .nav-sub a span { display: block; font-weight: 700; color: var(--dark); }
.cockpit-nav .nav-sub a small { display: block; margin-top: 0.1rem; font-size: 0.78rem; color: var(--gray); }
.cockpit-nav .nav-sub a:hover { background: var(--light); color: var(--dark); border: 0; }
.cockpit-nav .nav-sub a[aria-current="page"] { background: var(--light); }
.nav-sub a:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

/* Untere Navigationsleiste fuer Admins am Handy (renderTopbar in common.js). Am Desktop
   bleibt das obere Menue; die Leiste ist dort ausgeblendet. */
.bottomnav { display: none; }
@media (max-width: 699px) {
  .hat-bottomnav { padding-bottom: calc(60px + max(env(safe-area-inset-bottom, 0px), 14px)); }
  .hat-bottomnav .navbar { display: none; }
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 14px);
    background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  }
  .bottomnav a, .bottomnav button {
    flex: 1 1 0; min-width: 0; height: 60px; margin: 0; padding: 0.3rem 0.2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
    background: none; border: 0; border-top: 3px solid transparent; border-radius: 0;
    font: inherit; font-size: 0.72rem; line-height: 1.1; color: var(--gray); text-decoration: none; cursor: pointer;
  }
  .bottomnav a.active, .bottomnav button.active { color: var(--dark); font-weight: 700; border-top-color: var(--orange); }
  /* Mit offener Tastatur wuerde die Leiste auf dem iPhone ueber dem Eingabefeld haengen. */
  body:has(input:focus:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]), textarea:focus, select:focus) .bottomnav { display: none; }
}

main { max-width: 640px; margin: 0 auto; padding: 1rem; padding-bottom: 4rem; }

h1 { font-size: 1.35rem; margin: 0.8rem 0 0.2rem; }
h2 { font-size: 1.05rem; margin: 1rem 0 0.5rem; }
.subtitle { color: var(--gray); font-size: 0.85rem; margin-bottom: 1rem; }

.card {
  background: #fff; border-radius: 10px; padding: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 1rem;
}

label { display: block; font-size: 0.85rem; color: var(--gray); margin: 0.7rem 0 0.25rem; }
input, select, textarea {
  width: 100%; padding: 0.65rem 0.7rem; font-size: 1rem;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); border-color: var(--orange); }

/* Passwortfeld mit Auge-Symbol. Die Huelle wird per JavaScript um das
   vorhandene Feld gelegt, damit das Markup der Seiten unveraendert bleibt. */
.pw-feld { position: relative; display: block; }
.pw-feld input { padding-right: 3.1rem; }
.pw-auge {
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--gray);
  cursor: pointer; border-radius: 6px; font-family: inherit;
}
.pw-auge:hover { color: var(--dark); }
.pw-auge:focus-visible { outline: 2px solid var(--orange); color: var(--dark); }
.pw-auge svg { width: 1.3rem; height: 1.3rem; display: block; }

/* iOS gibt Datums- und Zeitfeldern eine eigene Mindestbreite und zentriert den
   Wert. Auf schmalen Displays laufen sie dadurch aus der Karte heraus. */
input[type="time"], input[type="date"], input[type="datetime-local"] {
  min-width: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  text-align: left;
}

/* Lange Datei- und Pfadangaben duerfen die Seite nicht seitlich aufziehen. */
code {
  overflow-wrap: anywhere; word-break: break-word;
  font-size: 0.92em;
}

.btn {
  display: inline-block; width: 100%; text-align: center;
  background: var(--orange); color: #fff; border: none; cursor: pointer;
  font-size: 1.05rem; font-weight: 600; padding: 0.8rem 1rem;
  border-radius: 8px; margin-top: 1rem; text-decoration: none;
}
.btn:hover { background: var(--orange-dark); }
.btn:disabled { background: #ccc; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--dark); border: 1px solid var(--border); }
.btn.secondary:hover { border-color: var(--orange); color: var(--orange); }
.btn.small { width: auto; font-size: 0.85rem; padding: 0.45rem 0.8rem; margin-top: 0; }
.btn.danger { background: var(--red); }
/* `.btn { display: inline-block }` schlug das hidden-Attribut: Knoepfe, die die
   Seite bewusst verbirgt (z. B. "Mangel wieder oeffnen" bei offenem Mangel),
   standen trotzdem da. Auf Mitarbeiterseiten traegt kein Knopf hidden -
   test/admin-aktionen-sichtbarkeit.test.js haelt das fest. */
.btn[hidden] { display: none; }

/* Admin-Kontraste: orange Hinweise und Fokus bleiben lesbar. Flaechen, Knoepfe und Menue
   der Admin-Ansicht regelt seit v1.80.0 der Cockpit-Block am Dateiende (Aussehen wie die Webseite).
   Die Mitarbeiteransicht nutzt weiterhin die gemeinsamen Regeln. */
.admin-ansicht { --admin-orange-text: #A84300; }
.admin-ansicht .btn.secondary:hover,
.admin-ansicht .record-alert.warning { color: var(--admin-orange-text); }
.admin-ansicht .maintenance-change { color: var(--admin-orange-text) !important; }
.admin-ansicht .cockpit-nav .nav-sub a:hover { color: var(--dark); }
.admin-ansicht input:focus,
.admin-ansicht select:focus,
.admin-ansicht textarea:focus { outline-color: var(--admin-orange-text); border-color: var(--admin-orange-text); }
.admin-ansicht .pw-auge:focus-visible,
.admin-ansicht .navbar button.nav-klapp:focus-visible,
.admin-ansicht .nav-sub a:focus-visible,
.admin-ansicht .history-entry-link:focus-visible,
.admin-ansicht .dashboard-teil:focus-visible,
.admin-ansicht .dashboard-click-row:focus-visible { outline-color: var(--admin-orange-text); }

.error-msg { color: var(--red); font-size: 0.9rem; margin-top: 0.6rem; min-height: 1.2em; }
.success-msg { color: var(--green); font-size: 0.9rem; margin-top: 0.6rem; }

.registration-complete[hidden] { display: none; }
.registration-complete { text-align: center; padding: 0.25rem 0 0.15rem; outline: none; }
.registration-success-icon {
  width: 72px; height: 72px; margin: 0 auto 0.9rem; border-radius: 50%;
  display: grid; place-items: center; background: #e6f4e9; color: var(--green);
  font-size: 2.6rem; font-weight: 700; line-height: 1;
}
.registration-complete h1 { margin: 0 0 0.8rem; font-size: 1.35rem; line-height: 1.25; }
.registration-complete > p { margin: 0.35rem 0; color: var(--gray); font-size: 0.9rem; }
.registration-complete .registration-email {
  margin: 0.55rem 0 1rem; padding: 0.7rem 0.8rem; border-radius: 8px;
  background: var(--light); color: var(--dark); font-weight: 700; word-break: break-word;
}
.registration-next-steps {
  margin: 1rem 0; padding: 0.9rem 1rem; border: 1px solid #b9ddc1;
  border-radius: 9px; background: #f1f8f3; text-align: left;
}
.registration-next-steps h2 { margin: 0 0 0.55rem; color: var(--green); font-size: 1rem; }
.registration-next-steps ol { margin: 0; padding-left: 1.3rem; }
.registration-next-steps li { margin: 0.35rem 0; font-size: 0.9rem; line-height: 1.4; }
.registration-complete .registration-delay { margin: 0.9rem 0; line-height: 1.45; }
.registration-complete .btn { display: block; text-decoration: none; }

.center-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1rem;
}
.center-page .card { width: 100%; max-width: 400px; }
/* Logo-Kopf auf den Anmeldeseiten */
.logo-block {
  text-align: center;
  margin-bottom: 1.2rem;
  background: #fff;
  border-radius: 10px;
  padding: 1.1rem 1.4rem 0.9rem;
  border-bottom: 4px solid var(--orange);
  width: 100%;
  max-width: 400px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.logo-block img { width: 100%; max-width: 260px; height: auto; display: inline-block; }
.logo-block p { color: var(--gray); font-size: 0.88rem; margin-top: 0.6rem; }

/* Checklisten-Assistent */
.progress { display: flex; gap: 4px; margin: 0.8rem 0; }
.progress i { flex: 1; height: 5px; border-radius: 3px; background: var(--border); }
.progress i.done { background: var(--orange); }

.check-item {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 0.8rem; margin-bottom: 0.7rem;
}
.check-item .label { font-weight: 600; font-size: 0.98rem; }
.check-item .hint { color: var(--gray); font-size: 0.8rem; margin-top: 0.15rem; }
.choice-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.choice-row button {
  flex: 1; padding: 0.6rem; font-size: 0.95rem; font-weight: 600;
  border: 1.5px solid var(--border); border-radius: 8px; background: #fff;
  cursor: pointer; color: var(--dark); font-family: inherit;
}
.choice-row button.sel-ok { background: var(--green); border-color: var(--green); color: #fff; }
.choice-row button.sel-bad { background: var(--red); border-color: var(--red); color: #fff; }
.choice-row button.sel-na { background: var(--gray); border-color: var(--gray); color: #fff; }
.mangel-box { margin-top: 0.6rem; }
.mangel-box textarea { min-height: 60px; }
.defect-option-row { flex-wrap: wrap; }
.defect-option-row button { flex: 1 1 calc(50% - 0.5rem); min-width: 125px; }
.defect-expiry, .defect-other { margin-top: 0.65rem; }
.maintenance-status { margin-top:0.6rem; padding:0.7rem; border-radius:8px; display:flex; flex-direction:column; gap:0.15rem; background:#eee; }
.maintenance-status span { font-size:0.82rem; color:var(--gray); }
.maintenance-status.ok { background:#e6f4e9; color:var(--green); }
.maintenance-status.soon { background:#fff3e6; color:var(--orange-dark); }
.maintenance-status.due { background:#fbe7e7; color:var(--red); }
/* Reinigung: drei Bereiche mit eigener Frist, jeder als eigener Block. Die
   Farbe zeigt die Lage, nicht das Ergebnis der Meldung. */
.cleaning-area { margin-top: 0.7rem; padding: 0.7rem; border-radius: 9px; border: 1px solid var(--border); background: #fafafa; }
.cleaning-area-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.cleaning-badge { font-size: 0.78rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: #eee; color: var(--gray); }
.cleaning-badge.ok { background: #e6f4e9; color: var(--green); }
.cleaning-badge.soon { background: #fff3e6; color: var(--orange-dark); }
.cleaning-badge.due { background: #fbe7e7; color: var(--red); }
.cleaning-badge.unknown { background: #eceff5; color: var(--gray); }
/* Das Verfahren steht als kurzer Hinweis unter dem Bereich - der Fahrer soll
   nicht raten müssen, was "Laderaum reinigen" konkret heißt. */
.cleaning-verfahren { margin-bottom: 0.35rem; font-style: italic; }
.cleaning-action-row { flex-wrap: wrap; }
.cleaning-action-row button { flex: 1 1 calc(50% - 0.5rem); min-width: 130px; }
.cleaning-reason, .cleaning-extra { margin-top: 0.7rem; }
.cleaning-extra textarea { min-height: 60px; }

.photo-list { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.photo-list img { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }

.known-damage-intro {
  display: flex; flex-direction: column; gap: 0.2rem; margin: 0 0 0.75rem;
  padding: 0.8rem; border-radius: 9px; background: #fff3e6; border: 1px solid #f6c69f;
}
.known-damage-intro strong { color: var(--orange-dark); }
.known-damage-intro span { color: var(--gray); font-size: 0.82rem; line-height: 1.4; }
.known-damage-card {
  background: #fff; border: 2px solid #efb2b2; border-radius: 10px;
  padding: 0.85rem; margin-bottom: 0.8rem;
}
.known-damage-head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.known-damage-head small, .known-damage-last {
  display: block; color: var(--gray); font-size: 0.78rem; line-height: 1.35;
}
.known-damage-last { margin-top: 0.3rem; }
.existing-photos img { cursor: default; }
.known-damage-choices { flex-wrap: wrap; }
.known-damage-choices button { min-width: 130px; }
.known-damage-worsened { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.known-damage-note {
  margin-top: 0.65rem; padding: 0.65rem; border-radius: 7px;
  background: #eeeeee; color: var(--gray); font-size: 0.82rem; line-height: 1.4;
}

.damage-history-card { align-items: flex-start; }
.damage-history-card .damage-description { margin-top: 0.3rem; line-height: 1.4; }
.damage-history-card .damage-latest { color: var(--orange-dark); }
.damage-history-card > p { margin: 0.55rem 0; }
.damage-history-head small { display: block; color: var(--gray); margin-top: 0.25rem; }
.damage-history-meta { color: var(--gray); font-size: 0.82rem; line-height: 1.45; }
.damage-photo-links { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.45rem; }
.damage-photo-links img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.known-damage-photos { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0.55rem 0 0.8rem; }
.known-damage-photos img { width: 88px; height: 88px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); }
.login-version { text-align: center; margin: 0.9rem 0 0; color: var(--gray); font-size: 0.72rem; }

.wizard-nav { display: flex; gap: 0.6rem; margin-top: 1rem; }
.wizard-nav .btn { margin-top: 0; }

/* Unterschrift */
#sig-canvas {
  width: 100%; height: 180px; background: #fff;
  border: 1.5px dashed var(--border); border-radius: 10px; touch-action: none;
}

/* Zusammenfassung / Ergebnis */
.result-banner { padding: 1rem; border-radius: 10px; font-weight: 700; text-align: center; font-size: 1.1rem; }
.result-banner.ok { background: #e6f4e9; color: var(--green); }
.result-banner.bad { background: #fbe7e7; color: var(--red); }
.summary-row { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--light); font-size: 0.92rem; }
.summary-row span:first-child { color: var(--gray); }

/* Tabellen / Listen */
.list-row {
  background: #fff; border-radius: 10px; padding: 0.8rem; margin-bottom: 0.6rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.list-row .info { flex: 1; min-width: 180px; }
.list-row .info strong { font-size: 0.98rem; }
.list-row .info small { display: block; color: var(--gray); font-size: 0.8rem; margin-top: 0.1rem; }
.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.badge.ok { background: #e6f4e9; color: var(--green); }
.badge.bad { background: #fbe7e7; color: var(--red); }
.badge.pending { background: #fff3e6; color: var(--orange-dark); }
.badge.disabled { background: #eee; color: var(--gray); }

.filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.filter-row input { flex: 1; min-width: 120px; }
.filter-actions { display: flex; gap: 0.5rem; }

/* Kompakte Listenzeile (v1.40.0)
   Zuvor trug jede Zeile alle Aktionen ausgeschrieben - bei sechzehn Fahrzeugen
   waren das rund 130 Schaltflaechen auf einer Seite. Sichtbar bleibt jetzt nur
   der haeufigste Weg, alles Weitere liegt hinter dem "..."-Knopf. */
.list-row.compact { padding: 0.55rem 0.75rem; align-items: center; }
.list-row.compact .info strong { font-size: 0.92rem; }
.list-row.compact .info small { font-size: 0.78rem; }
.list-row.compact.gedimmt { opacity: 0.62; }
.row-actions { display: flex; gap: 0.35rem; align-items: center; flex-shrink: 0; }
.row-actions .btn { margin-top: 0; }
.menu-btn { font-weight: 700; letter-spacing: 0.08em; min-width: 2.4rem; }

/* Werkzeugleiste ueber einer Liste: Suche und Schnellfilter */
.list-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.7rem; }
/* Das Suchfeld waechst mit, laesst den Chips und dem Anlegen-Knopf aber Platz. */
.list-toolbar input[type="search"] { flex: 1 1 200px; max-width: 340px; margin: 0; }
.list-toolbar .btn { margin-top: 0; width: auto; margin-left: auto; }
.list-toolbar select { width: auto; margin: 0; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.7rem;
  border-radius: 999px; border: 1px solid var(--border); background: #fff;
  font-size: 0.8rem; font-weight: 600; color: var(--dark); cursor: pointer; width: auto;
}
.filter-chip.aktiv { background: var(--orange); color: #fff; border-color: var(--orange); }
.filter-chip:disabled { opacity: 0.45; cursor: default; }
.list-leer { color: var(--gray); font-size: 0.88rem; padding: 0.9rem; }
.list-treffer { color: var(--gray); font-size: 0.8rem; margin: 0 0 0.6rem 0.2rem; }

/* Aufklappbare Gruppe (Maengel je Fahrzeug) */
.gruppe { margin-bottom: 0.5rem; }
.gruppe-kopf {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: #f0f0f0; border: 1px solid var(--border); border-radius: 10px;
  padding: 0.55rem 0.8rem; font-size: 0.9rem; cursor: pointer; text-align: left;
  color: var(--dark); margin: 0;
}
.gruppe-kopf:hover { background: #e9e9e9; }
.gruppe-titel { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.gruppe-pfeil { color: var(--gray); flex-shrink: 0; }
.gruppe-inhalt { padding: 0.5rem 0 0.2rem 0.8rem; }
.gruppe-inhalt .list-row:last-child { margin-bottom: 0.2rem; }

/* Aufklappbarer Abschnitt. Natives <details>, damit Tastatur und Vorlesehilfen
   ohne eigenes JavaScript funktionieren. */
.klapp > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 0.5rem;
}
.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary h2 { margin: 0; }
.klapp > summary::after { content: '▸'; color: var(--gray); flex-shrink: 0; }
.klapp[open] > summary::after { content: '▾'; }
.klapp[open] > summary { margin-bottom: 0.7rem; }

/* Aktionsmenue im Dialog */
.dlg-aktionsliste { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.7rem 0 0.2rem; }
.dlg-aktion {
  display: block; width: 100%; text-align: left; text-decoration: none;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 0.65rem 0.8rem; font-size: 0.92rem; color: var(--dark); cursor: pointer; margin: 0;
}
.dlg-aktion:hover { background: var(--light); }
.dlg-aktion small { display: block; color: var(--gray); font-size: 0.78rem; margin-top: 0.15rem; }
.dlg-aktion.gefahr { color: var(--red); border-color: #f3c9c9; }
.dlg-aktion.gefahr:hover { background: #fbe7e7; }

/* Menue-Fenster am Handy: je Modul eine aufklappbare Gruppe (cockpit-nav.js) */
.menue-gruppe summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 44px;
  padding: 0.5rem 0.8rem; font-size: 0.92rem; font-weight: 700; color: var(--dark); cursor: pointer; list-style: none;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
.menue-gruppe summary::-webkit-details-marker { display: none; }
.menue-gruppe summary::after {
  content: ''; flex-shrink: 0; width: 0.5rem; height: 0.5rem; margin-right: 0.2rem;
  border-right: 2px solid var(--gray); border-bottom: 2px solid var(--gray); transform: rotate(-45deg);
}
.menue-gruppe[open] summary::after { transform: rotate(45deg); }
.menue-gruppe summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.menue-gruppe .dlg-aktion { width: auto; margin: 0.35rem 0 0 1rem; }
.menue-gruppe .dlg-aktion span { font-weight: 700; }
.menue-gruppe[open] { margin-bottom: 0.2rem; }
/* Aktueller Eintrag im Menue-Fenster: sichtbar markiert, nur der Name fett, der Hinweis bleibt normal. */
.dlg-aktion[aria-current="page"] { background: var(--light); font-weight: 700; }
.dlg-aktion[aria-current="page"] small { font-weight: 400; }

/* Strukturierte Admin-Detailansichten */
.detail-page { max-width: 1180px; }
.detail-toolbar { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.detail-title-row .badge { margin-top: 0.8rem; font-size: 0.85rem; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1rem; align-items: start; }
.detail-primary, .detail-sidebar { min-width: 0; }
.detail-sidebar { position: sticky; top: 0.75rem; }
.detail-grid { display: grid; grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr); gap: 0; }
.detail-grid dt, .detail-grid dd { padding: 0.45rem 0; border-bottom: 1px solid var(--light); overflow-wrap: anywhere; }
.detail-grid dt { color: var(--gray); font-size: 0.84rem; }
.detail-grid dd { font-weight: 600; font-size: 0.9rem; }
.answer-category { margin-top: 1rem; }
.answer-category h3 { font-size: 1rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--orange); }
.answer-row { padding: 0.65rem; border-bottom: 1px solid var(--border); }
.answer-row > div:first-child { display: flex; justify-content: space-between; gap: 0.7rem; }
.answer-row span { color: var(--green); font-size: 0.82rem; text-align: right; }
.answer-row p, .answer-row small { display: block; margin-top: 0.25rem; line-height: 1.4; }
.answer-row small { color: var(--gray); }
.answer-row.answer-bad { background: #fff6f6; border-left: 4px solid var(--red); }
.answer-row.answer-bad span { color: var(--red); font-weight: 700; }
.detail-list-link { display: block; padding: 0.65rem 0; border-bottom: 1px solid var(--border); color: var(--dark); text-decoration: none; }
.detail-list-link:hover strong { color: var(--orange-dark); }
.detail-list-link span { display: block; margin-top: 0.2rem; color: var(--gray); font-size: 0.82rem; line-height: 1.4; }
.detail-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.detail-photos img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); }
.detail-photo-link { display: inline-block; }
.signature-preview { display: block; max-width: 100%; max-height: 220px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.snapshot-row { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--light); font-size: 0.84rem; }
.snapshot-row span { color: var(--gray); }
.snapshot-row strong { text-align: right; overflow-wrap: anywhere; }
.muted { color: var(--gray); font-size: 0.84rem; line-height: 1.45; }
.timeline { border-left: 3px solid var(--border); margin-left: 0.4rem; padding-left: 1rem; }
.timeline-entry { position: relative; padding: 0 0 1.2rem; }
.timeline-entry::before { content: ''; position: absolute; width: 11px; height: 11px; left: -1.45rem; top: 0.25rem; border-radius: 50%; background: var(--orange); border: 2px solid #fff; }
.timeline-entry time, .timeline-entry small { color: var(--gray); font-size: 0.76rem; }
.timeline-entry h3 { font-size: 0.95rem; margin: 0.15rem 0; }
.timeline-entry p { font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; }
.related-inspection { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.related-inspection span { display: block; color: var(--gray); font-size: 0.8rem; margin-top: 0.15rem; }
.inline-actions { display: flex; gap: 0.4rem; }
.history-entry-link { color: var(--dark); text-decoration: none; border-radius: 7px; padding: 0.2rem; }
.history-entry-link:hover, .history-entry-link:focus-visible { outline: 2px solid var(--orange); }
.history-entry-link:hover strong { color: var(--orange-dark); }

/* Digitale Fahrzeugakte */
.vehicle-record-page { max-width: 1240px; }
.vehicle-record-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vehicle-status-light { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.85rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; }
.vehicle-status-light::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.vehicle-status-light.ok { color: var(--green); background: #e6f4e9; }
.vehicle-status-light.warning { color: var(--orange-dark); background: #fff3e6; }
.vehicle-status-light.critical { color: var(--red); background: #fbe7e7; }
.vehicle-status-light.inactive { color: var(--gray); background: #eee; }
/* Echter Knopf (Fahrzeugakte, bei Handlungsbedarf): Pfeil, Zeiger, Fokus- und Hover-Zustand. */
.vehicle-status-light.klickbar { border: 0; font-family: inherit; cursor: pointer; margin: 0; width: auto; }
.vehicle-status-light.klickbar::after { content: '›'; font-size: 1.15em; line-height: 1; margin-left: 0.15rem; }
.vehicle-status-light.klickbar:hover { box-shadow: 0 0 0 2px currentColor; }
.vehicle-status-light.klickbar:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
/* display: inline-flex stach das hidden-Attribut aus: sonst standen Anzeige und Knopf nebeneinander. */
.vehicle-status-light[hidden] { display: none; }
.record-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 0.7rem; margin: 1rem 0; }
.record-summary-card { min-width: 0; background: #fff; border-radius: 10px; padding: 0.85rem; border-top: 4px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.record-summary-card > span, .record-summary-card small { display: block; color: var(--gray); font-size: 0.74rem; line-height: 1.35; }
.record-summary-card strong { display: block; margin: 0.25rem 0; font-size: 0.98rem; overflow-wrap: anywhere; }
.record-summary-card.ok { border-color: var(--green); }
.record-summary-card.warning { border-color: var(--orange); }
.record-summary-card.critical { border-color: var(--red); }
/* Die zehn Bereiche umbrechen statt seitlich zu scrollen (am Desktop war "Dokumente" abgeschnitten). */
.record-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.2rem 0 0.7rem; margin-bottom: 0.5rem; }
.record-tabs button { flex: 1 1 auto; min-width: 0; padding: 0.65rem 0.7rem; border: 1px solid var(--border); background: #fff; border-radius: 8px; color: var(--gray); font: 600 0.88rem inherit; cursor: pointer; }
.record-tabs button.active { background: var(--dark); color: #fff; border-color: var(--dark); }
/* Hinweis unter einem Eingabefeld der Fahrzeugakte. Fruehere feste Minus-Abstaende zogen ihn
   ueber das Feld. */
.feld-hinweis { display: block; margin-top: 0.3rem; color: var(--gray); font-size: 0.8rem; line-height: 1.35; }
/* Bereichsauswahl und Einklapp-Knopf der Zusammenfassung gibt es nur am Handy (siehe unten). */
.record-area, .record-summary-toggle { display: none; }
.record-section[hidden] { display: none; }
.record-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.privacy-doc-grid { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 0 0.7rem; }
.privacy-doc-grid label { margin-top: 0.7rem; }
.privacy-doc-entry { border-top: 1px solid var(--border); padding: 0.7rem 0; }
.privacy-doc-entry.is-editing { background: var(--light); }
.privacy-doc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.privacy-doc-actions .btn { margin: 0; }
.record-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto auto; gap: 0.6rem; align-items: end; }
.record-filter-grid label { margin-top: 0; }
.record-filter-grid .btn { margin: 0 0 0.02rem; }
.record-filter-wide { min-width: 230px; }
.record-checkbox { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.9rem; color: var(--dark); }
.record-checkbox input { width: auto; }
.record-callout, .record-alert { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; border-radius: 8px; margin: 0.5rem 0 0.8rem; background: #eee; }
.record-callout span, .record-alert span { color: var(--gray); font-size: 0.84rem; }
.record-alert.ok { background: #e6f4e9; color: var(--green); }
.record-alert.critical { background: #fbe7e7; color: var(--red); }
.record-alert.warning { background: #fdf1e3; color: var(--orange); }
.record-alert.neutral { background: #eee; color: var(--gray); }

/* Wartungsreiter: erst der Zustand, dann die Aktionen. Die haeufige Aktion
   (Wartung dokumentieren) steht vor der seltenen (Intervall aendern). */
.maintenance-status .record-alert { margin-bottom: 0; }
.maintenance-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.9rem 0 0.4rem; }
.maintenance-hint { display: block; color: var(--gray); font-size: 0.8rem; margin-bottom: 1.2rem; }
.maintenance-row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-start; }
.maintenance-cancelled { opacity: 0.72; }
.maintenance-cancelled .info strong { text-decoration: line-through; }
.maintenance-cancel-note { color: var(--red) !important; }
.maintenance-change { color: var(--orange) !important; }
.record-pagination { display: flex; justify-content: center; align-items: center; gap: 0.8rem; margin: 1rem 0; flex-wrap: wrap; }
.record-pagination span { color: var(--gray); font-size: 0.82rem; }
.record-red { color: var(--red) !important; }
.document-card { border-left: 4px solid var(--orange); }
.document-card.archived { border-color: var(--border); opacity: 0.78; }
.document-head { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.55rem; }
.document-head strong { margin-right: 0.45rem; }
.document-head small { display: block; margin-top: 0.25rem; color: var(--gray); font-size: 0.78rem; }
.detail-grid.compact { margin-bottom: 0.75rem; }
.detail-grid.compact dt, .detail-grid.compact dd { padding: 0.28rem 0; font-size: 0.8rem; }
.record-doc-layout { grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.4fr); }

/* Admin-Dashboard */
.dashboard-page { max-width: 1440px; }
.dashboard-heading, .dashboard-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.dashboard-heading { margin-bottom: 1rem; }
.dashboard-heading h1, .dashboard-section-heading h2 { margin-top: 0; }
.dashboard-section-heading p { margin: -0.2rem 0 0.8rem; color: var(--gray); font-size: 0.82rem; }
.dashboard-refresh { display: grid; grid-template-columns: minmax(120px, 170px) auto; gap: 0.45rem; align-items: end; }
.dashboard-refresh label { grid-column: 1 / -1; margin: 0; }
.dashboard-refresh .btn { margin: 0; height: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Vier Themenkarten statt zwoelf Kacheln: Aufgaben sollen vor den Zahlen kommen. Die
   Teilzahlen sind Filter fuer den Fuhrparkstatus. */
.dashboard-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.dashboard-card { min-width: 0; padding: 0.65rem 0.75rem; background: #fff; border-radius: 10px; border-top: 4px solid var(--gray); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.dashboard-card.critical { border-top-color: var(--red); }
.dashboard-card.warning { border-top-color: var(--orange); }
.dashboard-card.ok { border-top-color: var(--green); }
.dashboard-card h3 { margin: 0 0 0.3rem; font-size: 0.82rem; }
.dashboard-card small { display: block; margin-top: 0.3rem; color: var(--gray); font-size: 0.72rem; line-height: 1.3; }
.dashboard-teil { display: block; width: 100%; padding: 0.22rem 0.3rem; text-align: left; background: none; border: 0; border-radius: 6px; font: inherit; font-size: 0.82rem; line-height: 1.3; color: var(--dark); cursor: pointer; }
.dashboard-teil b { margin-right: 0.2rem; font-size: 1.1rem; }
.dashboard-teil:hover, .dashboard-teil:focus-visible { background: #fff8f2; outline: 2px solid var(--orange); }
.dashboard-teil.aktiv { background: #fff3e6; }
.dashboard-card-einheit { display: none; font-weight: 400; color: var(--gray); }
.dashboard-actions { display: grid; gap: 0.5rem; }
.dashboard-actions .btn { margin: 0; text-align: left; }
.dashboard-fleet-filter { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.dashboard-fleet-filter select { width: auto; max-width: 100%; margin: 0; }
.dashboard-fleet-filter .btn { margin: 0; }
.dashboard-tasks-more { padding-top: 0.6rem; }
.dashboard-tasks-more .btn { margin: 0; }
.dashboard-activities-panel { margin-top: 1.2rem; }
.dashboard-note { color: var(--gray); font-size: 0.76rem; line-height: 1.4; }
.dashboard-primary-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); align-items: start; gap: 1rem; margin: 1.2rem 0; }
.dashboard-panel { margin: 0; min-width: 0; }
/* Die Aufgabenliste waechst mit "Weitere Aufgaben" und scrollt mit der Seite; nur die
   Aktivitaeten haben eine feste Hoehe. */
.dashboard-activity-list { max-height: 560px; overflow-y: auto; }
.dashboard-activity-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.dashboard-activity-filters select { width: auto; max-width: 100%; margin: 0; }
.dashboard-activities-toggle { margin: 0; }
.dashboard-activity-more { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; color: var(--gray); font-size: 0.82rem; }
.dashboard-activity-more .btn { margin: 0; }
.dashboard-task { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--border); color: var(--dark); text-decoration: none; }
.dashboard-task:hover strong, .dashboard-activity:hover strong { color: var(--orange-dark); }
.dashboard-task-priority { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #eee; color: var(--gray); font-size: 0.75rem; font-weight: 700; }
.dashboard-task.critical .dashboard-task-priority { background: #fbe7e7; color: var(--red); }
.dashboard-task.warning .dashboard-task-priority { background: #fff3e6; color: var(--orange-dark); }
.dashboard-task strong, .dashboard-task small, .dashboard-activity strong, .dashboard-activity small { display: block; overflow-wrap: anywhere; }
.dashboard-task small, .dashboard-activity small { margin-top: 0.2rem; color: var(--gray); font-size: 0.76rem; line-height: 1.35; }
/* Erledigungsmeldungen: Textteil bleibt Link, daneben die Direkt-Aktionen. */
.dashboard-task-link { color: inherit; text-decoration: none; min-width: 0; }
.dashboard-task-link:hover strong { color: var(--orange-dark); }
.dashboard-task-actions { display: flex; flex-direction: column; gap: 0.35rem; }
.dashboard-task-actions .btn { white-space: nowrap; }
/* Mängelliste der Fahrzeugakte: Gruppenüberschriften trennen wartende
   Erledigungsmeldungen von den tatsächlich offenen Mängeln. */
.defect-group-title { margin: 1.1rem 0 0.4rem; font-size: 0.95rem; color: var(--dark); }
.defect-group-title:first-child { margin-top: 0.2rem; }
.defect-group-hint { margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--gray); }
.dashboard-activity { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0.7rem; padding: 0.65rem 0.3rem; border-bottom: 1px solid var(--border); color: var(--dark); text-decoration: none; }
.dashboard-activity-dot { width: 10px; height: 10px; margin-top: 0.25rem; border-radius: 50%; background: var(--gray); }
.dashboard-activity-dot.not_ready, .dashboard-activity-dot.defect, .dashboard-activity-dot.expired_document { background: var(--red); }
.dashboard-activity-dot.resolution_reported, .dashboard-activity-dot.maintenance, .dashboard-activity-dot.adblue, .dashboard-activity-dot.interim { background: var(--orange); }
.dashboard-activity-dot.inspection, .dashboard-activity-dot.defect_closed, .dashboard-activity-dot.user_approved { background: var(--green); }
.dashboard-empty { padding: 1.2rem; text-align: center; color: var(--gray); background: var(--light); border-radius: 8px; }
.dashboard-empty.ok { color: var(--green); background: #e6f4e9; }
.dashboard-table-wrap { overflow-x: auto; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-top: 0.2rem; }
.dashboard-table { width: 100%; min-width: 980px; border-collapse: collapse; background: #fff; }
.dashboard-table th { padding: 0.75rem; text-align: left; color: var(--gray); background: #f4f4f4; font-size: 0.74rem; white-space: nowrap; }
.dashboard-table td { padding: 0.75rem; border-top: 1px solid var(--border); font-size: 0.82rem; vertical-align: top; }
.dashboard-table td strong, .dashboard-table td small { display: block; }
.dashboard-table td small { margin-top: 0.22rem; color: var(--gray); line-height: 1.3; }
.dashboard-table .dashboard-history-link { display: inline-block; width: auto; margin-top: 0.4rem; padding: 0.25rem 0.6rem; }
.dashboard-click-row { cursor: pointer; }
.dashboard-click-row:hover, .dashboard-click-row:focus-visible { background: #fff8f2; outline: 2px solid var(--orange); outline-offset: -2px; }
.dashboard-highlight { background: #fff8f2; }
#employees-section, #fleet-section { scroll-margin-top: 1rem; margin-top: 1.4rem; }

/* Umbruch statt Abschneiden: ab fuenf Reitern passt sonst der letzte nicht mehr
   in die Zeile. Die Kopfnavigation bricht aus demselben Grund bereits um. */
/* Bleibt beim Scrollen stehen, damit man den Bereich wechseln kann, ohne erst
   an den Seitenanfang zurueckzukehren. Nur in der Verwaltung verwendet. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem;
  position: sticky; top: 0; z-index: 5;
  background: var(--light); padding: 0.6rem 0;
}
.tabs[hidden] { display: none; }
.tabs button {
  flex: 1 1 auto; min-width: 6rem;
  padding: 0.55rem 0.7rem; border: 1px solid var(--border); background: #fff;
  border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--gray); font-family: inherit;
}
.tabs button.active { background: var(--dark); color: #fff; border-color: var(--dark); }

@media (min-width: 700px) {
  .topbar { padding: 0.7rem 2rem; }
}

@media (max-width: 520px) {
  .filter-row input { flex: 1 1 100%; }
  .filter-actions { width: 100%; }
  .filter-actions .btn { flex: 1; }
  .known-damage-choices { display: grid; grid-template-columns: 1fr; }
  .known-damage-choices button { width: 100%; min-width: 0; }
  .detail-toolbar .btn { flex: 1 1 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid dt { padding-bottom: 0.05rem; border-bottom: 0; }
  .detail-grid dd { padding-top: 0.05rem; }
  .answer-row > div:first-child { flex-direction: column; gap: 0.15rem; }
  .answer-row span { text-align: left; }
  .detail-photos img { width: 82px; height: 82px; }
  .related-inspection .inline-actions { width: 100%; }
  .related-inspection .inline-actions .btn { flex: 1; }
  .vehicle-status-light { width: 100%; justify-content: center; }
  .record-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-summary-card { padding: 0.7rem; }
  .record-filter-grid { grid-template-columns: 1fr; }
  .record-filter-grid .btn { width: 100%; }
  .record-pagination { display: grid; grid-template-columns: 1fr 1fr; }
  .record-pagination span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .document-card .inline-actions { display: grid; grid-template-columns: 1fr; }
  .document-card .inline-actions .btn { width: 100%; }
  .privacy-doc-grid { grid-template-columns: 1fr; }
  .privacy-doc-actions { display: grid; grid-template-columns: 1fr; }
  .privacy-doc-actions .btn { width: 100%; }
}

/* Fahrzeugakte am Handy (Admin): kompakter Kopf, nur Karten mit Handlungsbedarf, eine
   sichtbare Bereichsauswahl statt zehn seitlich scrollender Reiter. */
@media (max-width: 699px) {
  .vehicle-record-page .detail-toolbar { margin: 0.2rem 0 0.5rem; }
  .vehicle-record-page .detail-toolbar .btn { flex: 0 0 auto; }
  .vehicle-record-heading { flex-wrap: nowrap; align-items: center; gap: 0.6rem; }
  .vehicle-record-heading h1 { margin-bottom: 0; }
  .vehicle-record-heading .vehicle-status-light { flex: 0 0 auto; width: auto; padding: 0.4rem 0.7rem; font-size: 0.78rem; }
  .vehicle-record-heading .vehicle-status-light.klickbar { min-height: 40px; padding: 0.4rem 0.8rem; }
  .record-summary-grid { gap: 0.5rem; margin: 0.7rem 0 0.5rem; }
  .record-summary-grid.einklappbar:not(.alle) .record-summary-card:not(.warning):not(.critical):not(.immer) { display: none; }
  .btn.small.record-summary-toggle { display: block; width: 100%; margin: 0 0 0.6rem; }
  /* iOS laesst leere Datumsfelder auf Nullhoehe zusammenfallen (appearance: none). */
  .vehicle-record-page input[type="date"] { min-height: 2.9rem; }
  .record-summary-toggle[hidden] { display: none; }
  .record-area { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.7rem; }
  .record-area label { margin: 0; font-weight: 700; white-space: nowrap; }
  .record-area select { flex: 1 1 auto; min-width: 0; margin: 0; }
  .record-tabs { display: none; }
  /* Wartung: die Hauptaktion kommt vor der langen Statuskarte. Nur die Anzeige-Reihenfolge,
     das HTML bleibt gleich (Desktop unveraendert). */
  #record-maintenance { display: flex; flex-direction: column; }
  #record-maintenance[hidden] { display: none; }
  #record-maintenance > .maintenance-actions { order: -2; }
  #record-maintenance > .maintenance-hint { order: -1; }
}

/* Mangel-Detail am Handy: die Entscheidung ("Status bearbeiten") kommt direkt nach dem
   aktuellen Mangel, Lebenslauf und Kontrollen danach, die Ergaenzung zuletzt. Nur die
   Anzeige-Reihenfolge, das HTML bleibt gleich (Desktop und Tablet unveraendert). */
@media (max-width: 699px) {
  .detail-layout { display: flex; flex-direction: column; gap: 0; }
  .detail-primary, .detail-sidebar { display: contents; }
  .detail-layout .md-aktuell { order: 1; }
  .detail-layout #decision-card { order: 2; }
  .detail-layout .md-verlauf { order: 3; }
  .detail-layout .md-kontrollen { order: 4; }
  .detail-layout .md-ergaenzung { order: 5; }
}
[data-cockpit-menue] .dlg-inhalt:focus { outline: none; }

/* Blaettern (Kontrollen, Fahrzeugakte): am Handy Tippflaechen in Daumengroesse. */
@media (max-width: 699px) {
  .record-pagination .btn { min-height: 44px; }
}

/* Fotoansicht (public/js/foto-ansicht.js): Bild passt in den Bildschirm, Knoepfe bleiben erreichbar. */
.foto-dlg { width: min(46rem, calc(100vw - 1.5rem)); }
.foto-inhalt:focus { outline: none; }
.foto-bild { display: flex; justify-content: center; background: var(--light); border-radius: 8px; }
.foto-bild img { display: block; max-width: 100%; max-height: 60vh; max-height: 60dvh; height: auto; object-fit: contain; }
.foto-knoepfe { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.foto-knoepfe .btn { margin: 0; width: auto; flex: 1 1 auto; }
.foto-zaehler { color: var(--gray); font-size: 0.85rem; }

@media (max-width: 820px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
  .record-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .record-two-column, .record-doc-layout { grid-template-columns: 1fr; }
  .record-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-primary-grid { grid-template-columns: 1fr; }
  .dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .record-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-filter-grid { grid-template-columns: 1fr; }
  .dashboard-heading { display: block; }
  .dashboard-refresh { grid-template-columns: 1fr; margin-top: 0.8rem; }
  .dashboard-actions { grid-template-columns: 1fr 1fr; }
  .dashboard-actions .btn { width: 100%; }
  /* Am Handy sollen die Aufgaben frueh ins Bild: Einheit einmal im Titel statt an jeder
     Zahl, engere Karten, kein langer Hinweis unter den Karten. */
  .dashboard-cards { gap: 0.5rem; }
  .dashboard-card { padding: 0.45rem 0.55rem; }
  .dashboard-card h3 { margin-bottom: 0.15rem; font-size: 0.78rem; }
  .dashboard-card .einheit { display: none; }
  .dashboard-card-einheit { display: inline; }
  .dashboard-card small { margin-top: 0.15rem; font-size: 0.7rem; }
  .dashboard-teil { display: flex; align-items: center; gap: 0.25rem; min-height: 32px; padding: 0.15rem 0.25rem; font-size: 0.8rem; }
  .dashboard-teil b { font-size: 1rem; }
  .dashboard-note { display: none; }
  .dashboard-activity-filters select { flex: 1 1 40%; }
  .dashboard-fleet-filter { justify-content: flex-start; margin-top: 0.4rem; }
  .dashboard-fleet-filter select { width: 100%; }
  .dashboard-table-wrap { overflow: visible; box-shadow: none; }
  .dashboard-table { min-width: 0; display: block; background: transparent; }
  .dashboard-table thead { display: none; }
  .dashboard-table tbody, .dashboard-table tr, .dashboard-table td { display: block; width: 100%; }
  .dashboard-table tr { margin-bottom: 0.8rem; padding: 0.45rem 0.7rem; background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
  .dashboard-table td { display: grid; grid-template-columns: minmax(105px, 0.8fr) minmax(0, 1.2fr); gap: 0.55rem; padding: 0.48rem 0; border-top: 1px solid var(--light); overflow-wrap: anywhere; }
  .dashboard-table td:first-child { border-top: 0; }
  .dashboard-table td::before { content: attr(data-label); color: var(--gray); font-size: 0.75rem; font-weight: 600; }
  .dashboard-table td[colspan] { display: block; }
  .dashboard-table td[colspan]::before { content: none; }
  .dashboard-table .btn { width: 100%; }
}

/* ---------- Dialoge (Ersatz fuer prompt/confirm/alert) ---------- */
/* Das native <dialog> bringt Modalitaet, Tastaturfalle und Escape schon mit.
   Gestaltet wird deshalb nur die Karte selbst - bewusst wie .card, damit der
   Dialog nicht wie ein Fremdkoerper in der Verwaltung wirkt. */
.dlg {
  border: none;
  border-radius: 10px;
  padding: 0;
  /* Der globale Reset (* { margin: 0 }) setzt auch das margin:auto zurueck, mit
     dem der Browser ein <dialog> sonst mittig stellt. Ohne diese Zeile klebt
     der Dialog in der linken oberen Ecke. */
  margin: auto;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  background: #fff;
  color: var(--dark);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.dlg::backdrop { background: rgba(0, 0, 0, 0.45); }
.dlg-inhalt {
  padding: 1.2rem 1.3rem 1.3rem;
  /* Lange Formulare sollen im Dialog rollen, nicht die Seite dahinter. */
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
.dlg-titel {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--orange);
}
.dlg-text { font-size: 0.9rem; color: var(--gray); margin: 0 0 0.4rem; white-space: pre-line; }
.dlg-felder label:first-of-type { margin-top: 0.6rem; }
.dlg-optional { color: var(--gray); font-weight: normal; }
.dlg-hinweis { font-size: 0.78rem; color: var(--gray); margin: 0.25rem 0 0; }
.dlg-feldfehler { font-size: 0.8rem; color: var(--red); margin: 0.2rem 0 0; min-height: 1em; }
.dlg-fehler { color: var(--red); font-size: 0.88rem; margin: 0.4rem 0 0; min-height: 0; }
.dlg input.dlg-ungueltig,
.dlg textarea.dlg-ungueltig { border-color: var(--red); }
.dlg-liste { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; }
.dlg-liste li { margin-bottom: 0.3rem; }
.dlg-knoepfe {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.dlg-knoepfe .btn { width: auto; flex: 1; margin-top: 0; }

/* Auf schmalen Displays stehen die Schaltflaechen untereinander, damit die
   Beschriftung nicht umbricht. Die bestaetigende Aktion bleibt oben und damit
   in Daumenreichweite. */
@media (max-width: 380px) {
  .dlg-knoepfe { flex-direction: column-reverse; }
}

/* Gestaffelte Kostenhistorie (Jahr / Monat / Tag).

   Nach dem Import einer Tankkartenabrechnung stehen je Fahrzeug mehrere
   hundert Einzelbuchungen in der Historie. Die Gruppenzeilen sind Schaltflaechen
   und muessen auf dem Handy mit dem Daumen treffbar bleiben - deshalb die
   Mindesthoehe, nicht nur Innenabstand. */
.cost-group {
  width: 100%; margin: 0 0 0.4rem; text-align: left;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  min-height: 44px; padding: 0.55rem 0.75rem;
  background: #fff; color: inherit; border: 1px solid var(--border);
  font-weight: 600;
}
.cost-group:hover { background: var(--light); }
.cost-group-arrow { color: var(--gray); font-size: 0.85rem; width: 0.9rem; flex: none; }
.cost-group-title { flex: 1; min-width: 7rem; }
.cost-group-sum { color: var(--gray); font-size: 0.8rem; font-weight: 500; }
/* Der durchschnittliche Kraftstoffpreis ist die Zahl, die man ueber die Monate
   hinweg vergleicht - deshalb hebt sie sich vom Rest der Zeile ab. */
.cost-group-price { color: var(--dark); font-weight: 600; white-space: nowrap; }
/* Der Verbrauch steht nur an Jahr und Monat und faellt deshalb genauso auf wie
   der Preis - er ist die zweite Zahl, die man ueber die Monate vergleicht. */
.cost-group-usage { color: var(--dark); font-weight: 600; white-space: nowrap; }

/* Die drei Ebenen unterscheiden sich durch Einzug und Schriftgroesse. Der
   Einzug bleibt klein, sonst bleibt auf dem Handy fuer den Text nichts uebrig. */
.cost-group-year { font-size: 1rem; background: var(--light); }
.cost-group-month { font-size: 0.94rem; }
.cost-month { margin-left: 0.7rem; }
.cost-group-day { font-size: 0.88rem; font-weight: 500; }
.cost-day { margin-left: 1.4rem; }
.cost-day-rows { margin-left: 1.4rem; }
.cost-day-rows .list-row { margin-bottom: 0.4rem; }

@media (max-width: 480px) {
  .cost-month, .cost-day, .cost-day-rows { margin-left: 0.5rem; }
  .cost-group-sum { width: 100%; }
}

/* ---------- Kalkulation (Admin, v1.69.0): Plankosten je Fahrzeugtyp ---------- */
.kalk-seite { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.kalk-heading { margin-bottom: 0.8rem; }
.kalk-heading h1 { margin-top: 0; }
.kalk-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.kalk-tabs button, .kalk-modus button { padding: 0.5rem 0.9rem; border: 1px solid var(--border); background: #fff; border-radius: 8px; font: inherit; font-size: 0.9rem; cursor: pointer; color: var(--dark); min-height: 40px; }
.kalk-tabs button.active, .kalk-modus button.active { background: var(--dark); color: #fff; border-color: var(--dark); }
.kalk-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.kalk-kopf h2, .kalk-kopf h3 { margin: 0; }
.kalk-aktionen { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.kalk-aktionen .btn { margin-top: 0; }
.kalk-sub { color: var(--gray); font-size: 0.85rem; margin: 0.2rem 0 0.6rem; }
.kalk-leer { color: var(--gray); padding: 0.6rem 0; }
.kalk-zurueck { margin-bottom: 0.6rem; font-size: 0.9rem; }
.kalk-zurueck a { color: var(--dark); }
.kalk-fuss { color: var(--gray); font-size: 0.78rem; margin-top: 0.6rem; }
.kalk-hinweis { color: var(--gray); font-size: 0.78rem; margin: 0.2rem 0 0; }
.kalk-scroll { overflow-x: auto; }
.kalk-tabelle { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.kalk-tabelle th, .kalk-tabelle td { padding: 0.5rem 0.55rem; border-bottom: 1px solid var(--light); text-align: left; vertical-align: top; }
.kalk-tabelle thead th { background: var(--light); font-size: 0.78rem; color: var(--gray); font-weight: 600; white-space: nowrap; }
.kalk-tabelle .kalk-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kalk-tabelle small { display: block; color: var(--gray); font-size: 0.74rem; font-weight: 400; }
.kalk-tabelle th[scope="row"] { font-weight: 500; overflow-wrap: anywhere; }
.kalk-tabelle a { color: var(--dark); font-weight: 700; }
.kalk-summe th, .kalk-summe td { font-weight: 700; border-top: 2px solid var(--orange); }
.kalk-teil th, .kalk-teil td { color: var(--gray); font-size: 0.82rem; }
.kalk-aus { opacity: 0.6; }
.kalk-vergleich th[scope="row"] { position: sticky; left: 0; background: #fff; min-width: 9.5rem; }
.kalk-vergleich thead th:first-child { position: sticky; left: 0; z-index: 1; }
.kalk-gueltig { display: block; }
/* Zwei Spalten erst ab 1000 px: Die Aufschluesselung hat vier Spalten und braucht Platz.
   Darunter steht das Ergebnis oben, die Eingabe darunter (auch Reihenfolge fuer Tastatur und Vorleser). */
.kalk-spalten { display: block; }
@media (min-width: 1000px) {
  .kalk-spalten { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
  .kalk-ergebnis { position: sticky; top: 0.75rem; grid-column: 1; grid-row: 1 / span 2; }
  .kalk-formular { grid-column: 2; }
}
.kalk-gruppe { border: 0; }
.kalk-gruppe legend { font-weight: 700; font-size: 0.95rem; padding: 0; margin-bottom: 0.2rem; }
.kalk-feld { margin-bottom: 0.5rem; }
.kalk-feld label { margin: 0.4rem 0 0.2rem; }
.kalk-eingabe { display: flex; align-items: center; gap: 0.4rem; }
.kalk-eingabe input { flex: 1; min-width: 0; }
.kalk-einheit { color: var(--gray); font-size: 0.85rem; min-width: 2.6rem; }
.kalk-gross { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0.6rem 0; }
.kalk-gross div { background: var(--light); border-radius: 8px; padding: 0.5rem 0.6rem; }
.kalk-gross span { display: block; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kalk-gross small { color: var(--gray); font-size: 0.74rem; }
.kalk-meldung { background: #fff3e6; border-left: 4px solid var(--orange-dark); border-radius: 6px; padding: 0.55rem 0.7rem; margin: 0.5rem 0; font-size: 0.85rem; }
.kalk-meldung.bad { background: #fbe7e7; border-left-color: var(--red); }
.kalk-meldung ul { margin: 0.3rem 0 0 1.1rem; }
.kalk-details summary { cursor: pointer; font-weight: 600; margin: 0.4rem 0; }
.kalk-versionen { list-style: none; }
.kalk-versionen li { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0; border-bottom: 1px solid var(--light); }
.kalk-versionen small { display: block; color: var(--gray); margin-top: 0.15rem; }
.kalk-auswahl { border: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.4rem; }
.kalk-check { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9rem; color: var(--dark); min-height: 36px; }
.kalk-check input { width: auto; }
.kalk-modus { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.kalk-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.8rem; margin: 0.4rem 0 0.8rem; }
.kalk-legende span { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.kalk-balkenzeile { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 5.5rem; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; }
.kalk-balkenname { font-size: 0.85rem; overflow-wrap: anywhere; }
.kalk-balkenspur { background: var(--light); border-radius: 4px; height: 1.5rem; }
.kalk-balkenfuell { display: flex; gap: 2px; height: 100%; }
.kalk-balkenfuell i { display: block; min-width: 0; }
.kalk-balkenfuell i:first-child { border-radius: 4px 0 0 4px; }
.kalk-balkenfuell i:last-child { border-radius: 0 4px 4px 0; }
.kalk-balkenwert { font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }
.kalk-fehler { border-left: 4px solid var(--red); }
.kalk-fehler .btn { margin-top: 0.6rem; }
.kalk-ergebnis[hidden], .kalk-meldung[hidden] { display: none; }
@media (max-width: 760px) {
  .kalk-seite { padding: 0.75rem; }
  .kalk-gross { grid-template-columns: 1fr 1fr; }
  .kalk-gross div:first-child { grid-column: 1 / -1; }
  .kalk-spalte-monat { display: none; }
  /* Typenliste am Handy als Karten statt Tabelle: sonst bricht der Name buchstabenweise um. */
  .kalk-liste thead { display: none; }
  .kalk-liste, .kalk-liste tbody { display: block; }
  .kalk-liste tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 0.6rem; padding: 0.65rem 0; border-bottom: 1px solid var(--light); }
  .kalk-liste th[scope="row"] { grid-column: 1 / -1; border: 0; padding: 0; overflow-wrap: break-word; }
  .kalk-liste td { border: 0; padding: 0; text-align: left; }
  .kalk-liste td.kalk-zahl { text-align: left; }
  .kalk-liste td:last-child { grid-column: 1 / -1; padding-top: 0.25rem; }
  .kalk-ergebnis .kalk-tabelle { font-size: 0.82rem; }
  .kalk-ergebnis .kalk-tabelle th, .kalk-ergebnis .kalk-tabelle td { padding: 0.45rem 0.3rem; }
  .kalk-balkenzeile { grid-template-columns: 1fr auto; }
  .kalk-balkenname { grid-column: 1 / -1; }
  .kalk-aktionen { width: 100%; }
  .kalk-aktionen .btn { flex: 1 1 auto; }
}

/* Plan gegen Ist (v1.71.0) */
.kalk-filter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.6rem; align-items: end; margin-top: 0.4rem; }
.kalk-filter label { margin-top: 0; }
.kalk-filter .kalk-aktionen { align-self: end; }
.kalk-leer-zelle { color: var(--gray); font-style: italic; font-size: 0.82rem; }
.kalk-hinweisliste { margin-left: 1.1rem; font-size: 0.88rem; }
.kalk-hinweisliste li { margin: 0.3rem 0; }
.kalk-tabelle .badge { display: block; width: fit-content; margin: 0.25rem 0 0 auto; }
.kalk-tabelle th small { display: block; color: var(--gray); font-size: 0.72rem; font-weight: 400; margin-top: 0.1rem; }
@media (max-width: 760px) {
  .kalk-ist { font-size: 0.8rem; }
  .kalk-ist th, .kalk-ist td { padding: 0.45rem 0.3rem; }
  .kalk-filter { grid-template-columns: 1fr 1fr; }
  .kalk-filter > div:first-child { grid-column: 1 / -1; }
  .kalk-filter .kalk-aktionen { grid-column: 1 / -1; }
}

/* Abgleich einer Werkstattrechnung mit Wartung und Mängeln (v1.77.0) */
.ab-box { margin-top: 0.9rem; padding: 0.7rem 0.85rem; border: 1px solid #dde1e6; border-radius: 10px; background: #fafbfc; }
.ab-titel { margin: 0.1rem 0 0.25rem; font-weight: 700; font-size: 0.95rem; }
.ab-kopf { margin: 0 0 0.4rem; }
.ab-leer { margin: 0.3rem 0; }
.ab-zeile { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.5rem 0; border-top: 1px solid #eceff2; cursor: pointer; }
.ab-zeile:first-of-type { border-top: 0; }
.ab-zeile input[type="checkbox"] { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; }
.ab-zeile small { display: block; color: var(--gray); font-size: 0.8rem; margin-top: 0.1rem; }
.ab-zeile small.ab-inline { display: inline; }
.ab-zeile .badge { margin-left: 0.3rem; }
.ab-zeile.aus { cursor: default; opacity: 0.7; }
.ab-grund { color: var(--red) !important; }

/* ==========================================================================
   TE Cockpit: Aussehen wie te-jg.de (v1.80.0) - nur Admin-Ansicht
   Schrift, Farben und Formen der Firmenwebseite. Jede Regel in diesem Block
   beginnt mit .admin-ansicht (die Klasse setzt renderTopbar nur fuer Admins),
   Ausnahme: die beiden @font-face-Angaben. Mitarbeiter laden die Schrift
   nicht und sehen keine Aenderung. test/cockpit-aussehen.test.js haelt das fest.
   ========================================================================== */
@font-face {
  font-family: "Rubik"; src: url("/fonts/rubik-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik"; src: url("/fonts/rubik-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113;
}

/* Farben der Webseite. --orange traegt nur grosse fette Schrift oder gar keine,
   kleine weisse Schrift steht auf --orange-dark (4,6:1). */
.admin-ansicht {
  --orange: #DE600A; --orange-dark: #C2530A; --cockpit-orange-tief: #A84608; --cockpit-logo-orange: #F47216;
  --dark: #3D3B3C; --gray: #6B6A70;
  --light: #F5F4F2; --border: #E4E2DF; --cockpit-feldrand: #CFCCC8;
  --cockpit-schatten: 0 18px 44px rgba(30, 29, 31, 0.16), 0 2px 6px rgba(30, 29, 31, 0.08);
  --cockpit-rund: 14px;
  font-family: "Rubik", "Helvetica Neue", Arial, sans-serif; color: var(--dark); line-height: 1.5;
}
.admin-ansicht button, .admin-ansicht .btn, .admin-ansicht input, .admin-ansicht select, .admin-ansicht textarea { font-family: inherit; }
.admin-ansicht h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; }
.admin-ansicht h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.admin-ansicht .subtitle { font-size: 0.95rem; }
.admin-ansicht .accent-bar { background: var(--cockpit-logo-orange); }

/* Flaechen: Karten und Listenzeilen mit Haarlinie statt Schatten, mittlere Rundung. */
.admin-ansicht .card, .admin-ansicht .list-row { border: 1px solid var(--border); box-shadow: none; }
/* Themenkarten: die farbige Oberkante zeigt den Handlungsbedarf und bleibt; nur die drei anderen Seiten bekommen die Haarlinie. */
.admin-ansicht .dashboard-card { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); box-shadow: none; }
.admin-ansicht .card { border-radius: var(--cockpit-rund); padding: clamp(1rem, 1.6vw, 1.5rem); }
/* Bestehende Bedeutungen bleiben: Fehlerkarte der Kalkulation rot, Dokumentkarte orange an der linken Kante. */
.admin-ansicht .card.kalk-fehler { border-left: 4px solid var(--red); }
.admin-ansicht .card.document-card { border-left: 4px solid var(--orange); }
.admin-ansicht .card.document-card.archived { border-left-color: var(--border); }
.admin-ansicht .list-row, .admin-ansicht .dashboard-card { border-radius: 12px; }
.admin-ansicht .dlg { border-radius: var(--cockpit-rund); box-shadow: var(--cockpit-schatten); }

/* Knoepfe: Hauptknopf weiss auf dunklerem Orange, Nebenknopf mit Linie. */
.admin-ansicht .btn { border-radius: 10px; }
.admin-ansicht .btn:not(.cost-group) { font-weight: 700; }
.admin-ansicht .btn:not(.secondary):not(.danger):not(.cost-group):not(:disabled) { background: var(--orange-dark); color: #fff; }
.admin-ansicht .btn:not(.secondary):not(.danger):not(.cost-group):not(:disabled):hover { background: var(--cockpit-orange-tief); }
.admin-ansicht .btn.secondary { border-color: var(--cockpit-feldrand); color: var(--dark); }
.admin-ansicht .btn.secondary:hover { border-color: var(--orange); }
.admin-ansicht .filter-chip { border-color: var(--border); font-weight: 600; }
.admin-ansicht .filter-chip.aktiv, .admin-ansicht .filter-chip.aktiv:hover { background: var(--dark); border-color: var(--dark); color: #fff; }
/* Orange Schrift auf hellem Orange oder Grau: das dunklere Text-Orange (5,5:1), --orange-dark waere dort zu blass. */
.admin-ansicht .badge.pending, .admin-ansicht .maintenance-status.soon, .admin-ansicht .cleaning-badge.soon,
.admin-ansicht .vehicle-status-light.warning, .admin-ansicht .dashboard-task.warning .dashboard-task-priority,
.admin-ansicht .known-damage-intro strong, .admin-ansicht .damage-history-card .damage-latest { color: var(--admin-orange-text); }
.admin-ansicht .gruppe-pfeil { color: var(--dark); }

/* Felder: Rand und Rundung wie im Anfrageformular der Webseite. */
.admin-ansicht input, .admin-ansicht select, .admin-ansicht textarea { border: 1.5px solid var(--cockpit-feldrand); border-radius: 9px; color: var(--dark); }
.admin-ansicht input[type="checkbox"], .admin-ansicht input[type="radio"] { accent-color: var(--orange-dark); }
.admin-ansicht label { font-size: 0.9rem; font-weight: 500; color: var(--dark); }

/* Reiter in Akte und Kalkulation: gleiche Form wie die Knoepfe. */
.admin-ansicht .record-tabs button, .admin-ansicht .kalk-tabs button, .admin-ansicht .kalk-modus button { border-radius: 10px; font-family: inherit; }

/* Breite: Listenseiten nutzen am PC den Platz, Formulare bleiben lesbar schmal. */
.admin-ansicht main.cockpit-breit { max-width: 1100px; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.admin-ansicht main.cockpit-breit #sec-settings, .admin-ansicht main.cockpit-breit #sec-privacy { max-width: 760px; }

/* Menue-Fenster am Handy und untere Leiste. */
.admin-ansicht .dlg-aktion { border-radius: 10px; }
.admin-ansicht .bottomnav { box-shadow: none; }
.admin-ansicht .bottomnav a.active, .admin-ansicht .bottomnav button.active { border-top-color: var(--cockpit-logo-orange); }

/* Menue oben ab 700 px: Textlinks statt Kaesten, aktiver Punkt mit oranger Linie,
   "Neue Kontrolle" als Hauptknopf. */
@media (min-width: 700px) {
  .admin-ansicht .accent-bar { display: none; }
  .admin-ansicht .topbar { padding: 0.75rem clamp(1rem, 2.5vw, 2.5rem) 0.25rem; }
  .admin-ansicht .navbar.cockpit-nav { background: #fff; border-bottom: 1px solid var(--border); padding: 0.35rem clamp(1rem, 2.5vw, 2.5rem) 0.6rem; gap: 0.15rem; align-items: center; }
  .admin-ansicht .cockpit-nav > a, .admin-ansicht .cockpit-nav .nav-klapp {
    background: none; border: 0; box-shadow: none; border-radius: 10px;
    padding: 0.6rem 0.75rem; font-size: 1rem; font-weight: 500; color: var(--dark);
  }
  .admin-ansicht .cockpit-nav > a:hover, .admin-ansicht .cockpit-nav .nav-klapp:hover,
  .admin-ansicht .cockpit-nav .nav-klapp[aria-expanded="true"] { background: var(--light); color: var(--dark); }
  .admin-ansicht .cockpit-nav > a.active, .admin-ansicht .cockpit-nav .nav-klapp.active,
  .admin-ansicht .cockpit-nav > a.active:hover, .admin-ansicht .cockpit-nav .nav-klapp.active:hover {
    background: none; color: var(--dark); font-weight: 700;
    border-radius: 10px 10px 0 0; box-shadow: inset 0 -3px 0 var(--cockpit-logo-orange);
  }
  .admin-ansicht .cockpit-nav .nav-klapp::after { border-color: var(--orange); }
  .admin-ansicht .cockpit-nav > a.nav-neu, .admin-ansicht .cockpit-nav > a.nav-neu:hover {
    background: var(--orange-dark); color: #fff; font-weight: 700; padding: 0.65rem 1.1rem; border-radius: 10px; box-shadow: none;
  }
  .admin-ansicht .cockpit-nav > a.nav-neu:hover { background: var(--cockpit-orange-tief); }
  .admin-ansicht .cockpit-nav > a.abmelden { color: var(--gray); font-weight: 500; }
  .admin-ansicht .cockpit-nav .nav-sub { border: 0; border-radius: 12px; box-shadow: var(--cockpit-schatten); padding: 0.5rem; top: calc(100% + 10px); min-width: 320px; }
  .admin-ansicht .cockpit-nav .nav-sub a { border-radius: 9px; padding: 0.6rem 0.75rem; }
  .admin-ansicht .cockpit-nav .nav-sub a span { font-weight: 600; }
  .admin-ansicht .cockpit-nav .nav-sub a small { font-size: 0.875rem; line-height: 1.4; }
}

/* Zwischen 700 und 1099 px steht das Menue unter dem Logo; etwas enger, damit es in eine Zeile passt. */
@media (min-width: 700px) and (max-width: 1099px) {
  .admin-ansicht .cockpit-nav > a, .admin-ansicht .cockpit-nav .nav-klapp { padding: 0.55rem 0.55rem; font-size: 0.95rem; }
  .admin-ansicht .cockpit-nav > a.nav-neu, .admin-ansicht .cockpit-nav > a.nav-neu:hover { padding: 0.55rem 0.85rem; }
}

/* Ab 1100 px (nur am Bildschirm, nicht im Druck): Logo und Menue in einer Zeile, die Kopfzeile bleibt beim Scrollen stehen. */
@media screen and (min-width: 1100px) {
  /* Einzige Regel des Blocks ausserhalb von .admin-ansicht (Ausnahme im Test): Der Rollbereich ist das
     html-Element; gesprungene Ziele (scrollIntoView) sollen unter der Kopfzeile landen, nicht dahinter. */
  html:has(body.admin-ansicht) { scroll-padding-top: 5.25rem; }
  .admin-ansicht { --cockpit-kopf: 4.5rem; --cockpit-rund: 18px; }
  .admin-ansicht #topbar {
    position: sticky; top: 0; z-index: 30; min-height: var(--cockpit-kopf);
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.25rem;
    background: #fff; border-bottom: 1px solid var(--border); padding: 0 clamp(1rem, 2.5vw, 2.5rem);
  }
  .admin-ansicht #topbar .topbar { padding: 0; }
  .admin-ansicht #topbar .kopf-titel { display: none; }
  .admin-ansicht #topbar .navbar.cockpit-nav { border: 0; padding: 0; flex-wrap: nowrap; }
  .admin-ansicht .detail-sidebar, .admin-ansicht .kalk-ergebnis { top: calc(var(--cockpit-kopf) + 0.75rem); }
}