/* Gestaltung der Anwendung nach dem Prototyp (prototype/neu/stand, „Audaba Vollbild v2“).
   Farben, Schriften und Abstände aus marke.css. Nur logische Richtungsangaben
   (inline-start/-end), damit Arabisch ohne Sonderregeln funktioniert (K-544). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--text-body-color);
  background: var(--steel-100);
}
h1, h2, h3 { font-family: var(--font-display); color: var(--text-strong); line-height: 1.25; margin: 0; }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; }
code, .mono { font-family: var(--font-mono); }
p { margin: 0 0 var(--space-4); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
[hidden] { display: none !important; }

/* ---------- Eingabefelder nach dem Design-System (Input, Select, Textarea: controlBase) ----------
   1 px Rahmen, 2 px Ecken, weißer Grund; Fokus: navy Rahmen mit Leuchtrand; Auswahllisten mit eigenem
   Pfeil (fa-angle-down) statt des Systempfeils. :where() hält die Regel ohne Gewicht, damit besondere
   Stellen (Click & Edit in der Akte, Suchleisten) sie gezielt überschreiben. Höhe 36 px am Schreibtisch,
   44 px bei Fingerbedienung wie im Prototyp. */
:where(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button], [type=reset], [type=file], [type=image], [type=range], [type=color]), select, textarea) {
  box-sizing: border-box; max-inline-size: 100%; min-block-size: 36px; padding: 6px 11px; margin: 0;
  font: inherit; font-family: var(--font-text); font-size: 14px; line-height: 1.45; color: var(--text-strong);
  background-color: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  transition: border-color 180ms cubic-bezier(.2,.7,.3,1), box-shadow 180ms cubic-bezier(.2,.7,.3,1);
}
:where(input:not([type=checkbox], [type=radio]), select, textarea):hover { border-color: var(--border-strong-color); }
:where(input:not([type=checkbox], [type=radio]), select, textarea):focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
:where(input, select, textarea):disabled { background-color: var(--steel-50); color: var(--text-subtle); border-color: var(--border-subtle); cursor: not-allowed; }
:where(input, select, textarea)[aria-invalid=true] { border-color: var(--red-600); }
::placeholder { color: var(--steel-500); opacity: 1; }
:where(textarea) { min-block-size: 80px; resize: vertical; }
:where(select:not([multiple], [size])) {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a6673' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px;
}
[dir=rtl] :where(select:not([multiple], [size])) { background-position: left 12px center; }
:where(select[multiple], select[size]) { padding: 4px; }
:where(select[multiple] option, select[size] option) { padding: 3px 8px; border-radius: var(--radius-xs); }
:where(select[multiple] option:checked) { background: linear-gradient(var(--navy-100), var(--navy-100)); color: var(--navy-900); }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--navy-700); }
:where(input[type=search])::-webkit-search-cancel-button { cursor: pointer; }
@media (pointer: coarse) {
  :where(input:not([type=checkbox], [type=radio], [type=hidden]), select:not([multiple], [size])) { min-block-size: 44px; font-size: 16px; }
}

/* ---------- Rahmen ohne Anmeldung (Anmeldung, Fehler) ---------- */
.kopfleiste {
  display: flex; align-items: center; justify-content: space-between;
  min-block-size: 104px; padding-inline: var(--space-7);
  background: var(--white); border-block-end: 1px solid var(--border-subtle);
}
.kopfleiste h1 { font-size: 22px; font-weight: 800; }
.schmal { max-inline-size: 480px; margin-inline: auto; padding: var(--space-12) var(--space-5) 140px; }

/* ---------- Rahmen mit Anmeldung ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; min-block-size: 100vh; }
.seitenleiste {
  background: var(--navy-900); color: var(--text-inverse);
  display: flex; flex-direction: column; position: sticky; inset-block-start: 0; block-size: 100vh; overflow-y: auto;
}
.marke {
  display: flex; align-items: center; gap: var(--space-4);
  min-block-size: 76px; padding: var(--space-3) var(--space-5); border-block-end: 1px solid rgba(255,255,255,.08);
}
/* Logo ganz zeigen, auch breite Logos (z. B. 600 × 200): Höhe fest, Breite bis 96 px, nie beschneiden */
.marke__logo {
  min-inline-size: 34px; max-inline-size: 96px; block-size: 34px; padding: 3px; border-radius: 6px; background: #fff; color: var(--navy-900);
  display: grid; place-items: center; font-size: 9px; font-weight: 700; flex: none; overflow: hidden;
}
.marke__logo img { max-inline-size: 100%; block-size: 100%; object-fit: contain; }
.marke__name { font-weight: 700; font-size: 13px; line-height: 1.3; }
.marke__nummer { font-size: 11px; color: var(--text-inverse-muted); font-family: var(--font-mono); }
.menue { list-style: none; margin: 0; padding: var(--space-3) 0; flex: 1; }
.menue a {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); color: var(--text-inverse); text-decoration: none; font-size: 14px;
  border-inline-start: 4px solid transparent;
}
.menue a:hover { background: rgba(255,255,255,.06); color: var(--text-inverse); }
.menue a[aria-current="page"] { background: rgba(255,255,255,.1); border-inline-start-color: var(--amber-500); font-weight: 700; }
.menue .fa { inline-size: 18px; text-align: center; opacity: .9; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue ul a { padding-inline-start: 56px; font-size: 13.5px; }
.menue__abschnitt { padding: var(--space-6) var(--space-6) var(--space-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-inverse-muted); font-weight: 700; }
.benutzerfuss {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid rgba(255,255,255,.08); color: var(--text-inverse); text-decoration: none;
}
.benutzerfuss:hover { background: rgba(255,255,255,.06); color: var(--text-inverse); }
.benutzerfuss strong { display: block; font-size: 13px; }
.benutzerfuss small { color: var(--text-inverse-muted); font-size: 11px; }

.hauptbereich { min-inline-size: 0; display: flex; flex-direction: column; }
.titelleiste {
  background: var(--navy-900); color: var(--text-inverse);
  min-block-size: 76px; padding: var(--space-3) var(--space-7);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
}
.titelleiste__ober { font-size: 12px; color: var(--text-inverse-muted); }
.titelleiste h1 { color: var(--text-inverse); font-size: 22px; font-weight: 800; }
.titelleiste__aktionen { display: flex; gap: var(--space-4); align-items: center; }
.titelleiste a { color: var(--text-inverse); }
.inhalt { padding: var(--space-5) var(--space-5) 120px; max-inline-size: 1240px; inline-size: 100%; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-5); align-items: start; }

/* ---------- Karten, Zeilen, Felder ---------- */
.karte {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 2px;
  margin-block-end: var(--space-5); box-shadow: var(--shadow-xs);
}
.karte__kopf { padding: var(--space-5) var(--space-4) var(--space-4); border-block-end: 1px solid var(--border-subtle); }
.karte__titel { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-strong); }
.karte__titel--klein { font-family: var(--font-text); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--steel-700); }
.karte__summe { font-size: 12.5px; color: var(--text-muted); margin-block-start: var(--space-2); }
.karte__inhalt { padding: var(--space-5) var(--space-4); }
.karte__inhalt > :last-child { margin-block-end: 0; }
.karte--betrieb { display: flex; gap: var(--space-5); align-items: center; padding: var(--space-3) var(--space-4); }
.logo-platz {
  inline-size: 54px; block-size: 54px; border: 1px dashed var(--steel-400); display: grid; place-items: center;
  font-size: 10px; letter-spacing: .08em; color: var(--text-muted); flex: none;
}

.zeile {
  display: grid; grid-template-columns: 28px 1fr auto; gap: var(--space-2) var(--space-4); align-items: start;
  padding: var(--space-4); border-block-start: 1px solid var(--border-subtle); color: inherit; text-decoration: none;
  background: none; border-inline: 0; border-block-end: 0; inline-size: 100%; text-align: start; font: inherit; cursor: pointer;
}
.karte__kopf + .zeile, .zeile:first-child { border-block-start: 0; }
a.zeile:hover, button.zeile:hover { background: var(--surface-card-hover); color: inherit; }
.zeile__symbol { color: var(--navy-700); text-align: center; padding-block-start: 2px; font-size: 15px; }
.zeile__name { font-size: 14.5px; color: var(--text-strong); font-weight: 600; }
.zeile__sub { font-size: 12.5px; color: var(--text-muted); }
.zeile__ende { color: var(--steel-600); align-self: center; }
.zeile--warnung { border-inline-start: 3px solid var(--red-600); }
.zeile--leer { grid-template-columns: 1fr; color: var(--text-muted); cursor: default; }

.felder { display: grid; grid-template-columns: 1fr; }
.felder--zwei { grid-template-columns: 1fr 1fr; }
.feld { display: block; padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--border-subtle); position: relative; }
/* Erste Zeile ohne Linie, rechte Spalte mit Trennlinie. Gezählt werden nur sichtbare Kinder: das versteckte Formularzeichen
   am Anfang verschob sonst die Linien (doppelte Linie unter dem Kopf, Linie nur über einer Hälfte – Durchsicht 21.10.2026) */
.felder > .feld:nth-child(1 of :not(input[type=hidden])),
.felder--zwei > .feld:nth-child(2 of :not(input[type=hidden])):not(.feld--breit, .feld--breit ~ *) { border-block-start: 0; }
.felder--zwei > :is(.feldgruppe, .feld__hinweis, .meldung) { grid-column: 1 / -1; }
/* Die senkrechte Linie zwischen den Spalten ist ein Hintergrund des Rasters; Elemente über die ganze Breite decken sie ab.
   (Als Rand jeder zweiten Zelle verrutschte sie nach einem breiten Element an den Kartenrand.) */
.felder--zwei { background: linear-gradient(var(--border-subtle), var(--border-subtle)) 50% 0 / 1px 100% no-repeat; }
.felder--zwei > :is(.feld--breit, .feldgruppe, .feld__hinweis, .knopfreihe) { background-color: var(--white); }
.felder--zwei > .feld--breit { grid-column: 1 / -1; }
.feld--breit .feld__wert { overflow-wrap: anywhere; }
.feld__beschriftung { display: block; font-size: 12.5px; font-weight: 600; color: var(--steel-700); margin-block-end: 4px; }
.feld__pflicht { color: var(--amber-700); }
.feld :where(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea) { inline-size: 100%; margin-block-start: 2px; }
.feld__beschriftung + .datum-huelle { margin-block-start: 6px; } /* Rand fällt mit dem der Beschriftung zusammen: 6 px = 4 + 2 px wie bei den übrigen Feldern */
.feld__hinweis { display: block; font-size: 12px; color: var(--text-muted); margin-block-start: 2px; }
.feld__fehler { display: block; font-size: 12.5px; color: var(--red-700); margin-block-start: 2px; font-weight: 600; }
.feld--fehler { background: var(--red-50); box-shadow: inset 3px 0 0 var(--red-600); }
.feld--fehler :where(input, select, textarea) { border-color: var(--red-600); }
.feld__wert { font-size: 15px; color: var(--text-strong); }
.feld__wert--mono { font-family: var(--font-mono); }

.auswahl { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--border-subtle); cursor: pointer; }
.auswahl:nth-child(1 of :not(input[type=hidden])) { border-block-start: 0; }
.auswahl input { margin-block-start: 3px; accent-color: var(--navy-700); inline-size: 16px; block-size: 16px; flex: none; }
.auswahl__text strong { display: block; font-weight: 600; color: var(--text-strong); font-size: 14px; }
.auswahl__text small { color: var(--text-muted); font-size: 12.5px; }
.auswahl--gesperrt { opacity: .6; cursor: not-allowed; }

/* ---------- Schaltflächen ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-block-size: 42px; padding: 0 var(--space-6); border-radius: 2px; border: 1px solid var(--border-default);
  background: var(--white); color: var(--navy-900); font: inherit; font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer; box-shadow: var(--shadow-button-inset);
}
.knopf:hover { background: var(--surface-card-hover); color: var(--navy-900); }
.knopf--haupt {
  background: var(--amber-500); border-color: var(--amber-600); color: var(--navy-950);
  text-transform: uppercase; letter-spacing: .08em; font-size: 15px; min-block-size: 54px;
}
.knopf--haupt:hover { background: var(--amber-400); color: var(--navy-950); }
.knopf--primaer { background: var(--navy-700); border-color: var(--navy-800); color: var(--white); }
.knopf--primaer:hover { background: var(--navy-800); color: var(--white); }
.knopf--gefahr { color: var(--red-700); border-color: var(--red-200); }
.knopf--gefahr:hover { background: var(--red-50); color: var(--red-700); }
.knopf--hell { background: transparent; border-color: rgba(255,255,255,.4); color: var(--white); box-shadow: none; }
.knopf--hell:hover { background: rgba(255,255,255,.08); color: var(--white); }
.knopf--klein { min-block-size: 32px; padding: 0 var(--space-4); font-size: 13px; }
.knopf:disabled, .knopf[aria-disabled="true"] { background: var(--action-disabled-bg); color: var(--action-disabled-fg); border-color: var(--action-disabled-bg); cursor: not-allowed; }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border-block-start: 1px solid var(--border-subtle); }
form.inline { display: inline; }

.aktionsleiste {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 10;
  background: var(--white); border-block-start: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-5); display: flex; justify-content: center;
}
.app .aktionsleiste { inset-inline-start: 236px; }
.aktionsleiste .knopf--haupt { inline-size: min(100%, 480px); }
.aktionsleiste__innen { inline-size: min(100%, 480px); display: flex; flex-direction: column; gap: var(--space-2); }
.aktionsleiste__grund { font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* ---------- Meldungen ---------- */
.meldung {
  padding: var(--space-5); border: 1px solid var(--border-subtle); border-inline-start: 4px solid var(--status-declined-fg);
  background: var(--surface-card); margin-block-end: var(--space-5);
}
.meldung--hinweis { border-inline-start-color: var(--status-info-fg); background: var(--status-info-bg); }
.meldung--warnung { border-inline-start-color: var(--amber-600); background: var(--amber-50); }
.meldung--erfolg { border-inline-start-color: var(--green-600); background: var(--green-50); }
.meldung__titel { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-strong); margin-block-end: var(--space-3); }
.meldung__kennung { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin: var(--space-4) 0; }
.meldung__kennung dt { font-size: 12px; color: var(--text-muted); }
.meldung__kennung dd { margin: 0; }
.kopierbar { user-select: all; font-family: var(--font-mono); font-size: 14px; color: var(--text-strong); }
.kurzmeldung {
  position: fixed; inset-block-end: 88px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 20;
  background: var(--navy-900); color: var(--white); padding: var(--space-4) var(--space-6); border-radius: 2px;
  box-shadow: var(--shadow-lg); font-size: 14px; max-inline-size: calc(100% - 32px);
}
.kurzmeldung--fehler { background: var(--red-700); }

/* ---------- Listen ---------- */
.tabelle { inline-size: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabelle th { text-align: start; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-700); font-weight: 700; padding: var(--space-4); border-block-end: 1px solid var(--border-subtle); white-space: nowrap; }
.tabelle td { padding: var(--space-4); border-block-end: 1px solid var(--border-subtle); vertical-align: top; }
.tabelle tr:last-child td { border-block-end: 0; }
.tabelle a { font-weight: 600; text-decoration: none; }
.tabelle__gedimmt td { color: var(--text-muted); }
.tabellenrahmen { overflow-x: auto; }
.abzeichen { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--steel-100); color: var(--steel-800); white-space: nowrap; }
.abzeichen--gruen { background: var(--green-50); color: var(--green-700); }
.abzeichen--rot { background: var(--red-50); color: var(--red-700); }
.abzeichen--gelb { background: var(--amber-50); color: var(--amber-800); }
.abzeichen--blau { background: var(--navy-50); color: var(--navy-700); }
.filterleiste { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); border-block-end: 1px solid var(--border-subtle); align-items: end; }
.filterleiste label { display: flex; flex-direction: column; font-size: 12px; color: var(--steel-700); gap: 2px; }
.filterleiste select, .filterleiste input { min-inline-size: 140px; font-size: 13.5px; }
.leer { padding: var(--space-8) var(--space-5); text-align: center; color: var(--text-muted); }
.leer strong { display: block; color: var(--text-strong); font-size: 15px; margin-block-end: var(--space-2); }

/* Protokoll */
.ereignis { padding: var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.ereignis:first-child { border-block-start: 0; }
.ereignis__kopf { display: flex; gap: var(--space-5); font-size: 12.5px; color: var(--text-muted); }
.ereignis__kopf strong { color: var(--text-strong); }
.ereignis__satz { font-size: 14px; color: var(--text-strong); margin-block-start: 2px; }
.ereignis details { margin-block-start: var(--space-2); font-size: 13px; }
.ereignis summary { cursor: pointer; color: var(--text-link); }
.ereignis ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-6); }

.zahl-gross { font-family: var(--font-mono); font-size: 26px; font-weight: 500; color: var(--text-strong); }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); font-family: var(--font-mono); font-size: 16px; padding: var(--space-4); }
.qr { display: block; inline-size: 220px; block-size: 220px; margin: var(--space-3) auto; image-rendering: pixelated; }

/* ---------- Schmale Bildschirme (ab 360 px, NFA-KOMP-011) ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .seitenleiste { position: static; block-size: auto; }
  .marke { min-block-size: 0; }
  .menue { display: flex; overflow-x: auto; padding: 0; }
  .menue > li > a { white-space: nowrap; border-inline-start: 0; border-block-end: 3px solid transparent; }
  .menue a[aria-current="page"] { border-block-end-color: var(--amber-500); }
  .menue ul, .menue__abschnitt { display: none; }
  .benutzerfuss { display: none; }
  .titelleiste { min-block-size: 0; }
  .app .aktionsleiste { inset-inline-start: 0; }
  .felder--zwei { grid-template-columns: 1fr; }
  .felder--zwei { background: none; }
  .felder--zwei > .feld:nth-child(2 of :not(input[type=hidden])):not(.feld--breit, .feld--breit ~ *) { border-block-start: 1px solid var(--border-subtle); }
  .kopfleiste { min-block-size: 64px; padding-inline: var(--space-5); }
  .schmal { padding-block-start: var(--space-7); }
}

/* ---------- Druck ---------- */
@media print {
  .seitenleiste, .titelleiste__aktionen, .aktionsleiste, .kurzmeldung, .nicht-drucken { display: none !important; }
  .app { display: block; }
  body { background: var(--white); }
  .titelleiste { background: none; color: var(--text-strong); min-block-size: 0; padding: 0 0 12px; }
  .titelleiste h1 { color: var(--text-strong); }
  .karte { box-shadow: none; break-inside: avoid; }
}
.meldung--rand { margin: var(--space-5) var(--space-5) 0; }
.zeile--statisch { cursor: default; }

/* Rechte */
.rechtegruppe { border-block-start: 1px solid var(--border-subtle); }
.rechtegruppe summary { padding: var(--space-4); cursor: pointer; font-weight: 600; color: var(--text-strong); }
.recht { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-6); font-size: 13.5px; }
.recht select { font-size: 12.5px; min-block-size: 30px; padding-block: 3px; padding-inline: 8px 28px; background-position: right 9px center; }
[dir=rtl] .recht select { background-position: left 9px center; }
.recht--ja { color: var(--green-600); }
.recht--nein { color: var(--steel-400); }

/* ---------- Fahrzeugakte ---------- */
.titelleiste__akte { display: flex; align-items: center; gap: var(--space-5); min-inline-size: 0; }
.titelleiste__zurueck { font-size: 24px; color: var(--text-inverse); text-decoration: none; padding: var(--space-3); }
.titelleiste__bild { inline-size: 74px; block-size: 56px; background: var(--steel-700); display: grid; place-items: center; font-size: 22px; color: var(--steel-200); flex: none; }
.titelleiste__zeile { font-size: 12px; color: var(--text-inverse-muted); margin-block-start: var(--space-2); }
/* Papiere und Schlüssel auf einen Blick (T6 vom 18.10.2026) */
.titelleiste__papiere { margin-block-start: var(--space-1); }
.titelleiste__papier--ja { color: var(--green-200); }
.titelleiste__papier--nein { color: var(--amber-300); font-weight: 700; }
.titelleiste__papier--unbekannt { color: var(--text-inverse-muted); }
.titelleiste__papier--info { color: var(--text-inverse); }
.reiter { display: flex; gap: var(--space-1); overflow-x: auto; background: var(--white); border-block-end: 1px solid var(--border-subtle); margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5); padding-inline: var(--space-4); }
.reiter a { padding: var(--space-5) var(--space-4); color: var(--steel-800); text-decoration: none; white-space: nowrap; border-block-end: 2px solid transparent; font-size: 13.5px; }
.reiter a[aria-current="page"] { color: var(--text-strong); border-block-end-color: var(--navy-700); font-weight: 600; }
.reiter__zahl { background: var(--steel-100); border-radius: 2px; padding: 0 6px; font-size: 11.5px; margin-inline-start: 4px; }
.akte { display: grid; grid-template-columns: minmax(0, 1fr) 346px; gap: var(--space-5); align-items: start; }
.akte__seite { position: sticky; inset-block-start: var(--space-5); }
/* Kästen in Spalten statt Zeilen: jeder rückt direkt unter den vorherigen, ohne Lücken (Vorgabe 18.10.2026) */
.feldgruppen { column-width: 360px; column-gap: var(--space-5); }
.feldgruppe { margin: 0; }
.feldgruppen > .feldgruppe { margin-block-end: var(--space-5); break-inside: avoid; }
.feldgruppe__titel { font-family: var(--font-text); font-size: 13.5px; font-weight: 700; display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); background: var(--steel-50); border-block-end: 1px solid var(--border-subtle); }
.feldgruppe__titel .fa { color: var(--navy-700); }
/* „Bearbeiten“ je Kasten (T4 vom 18.10.2026) */
.feldgruppe__bearbeiten { margin-inline-start: auto; font-weight: 600; font-size: 12.5px; color: var(--navy-700); text-decoration: none; display: inline-flex; gap: var(--space-2); align-items: center; }
.feldgruppe__bearbeiten:hover { text-decoration: underline; }
.feldgruppe--bearbeiten { outline: 2px solid var(--navy-600); outline-offset: -1px; }
.feldgruppe--bearbeiten .feldzeile input, .feldgruppe--bearbeiten .feldzeile select, .feldgruppe--bearbeiten .feldzeile textarea { border-color: var(--border-default); background-color: var(--white); }
.feldgruppe__knoepfe { padding: var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.feldzeile { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--border-subtle); align-items: start; position: relative; }
.feldgruppe__titel + .feldzeile { border-block-start: 0; }
.feldzeile__beschriftung { color: var(--steel-700); font-size: 13.5px; padding-block-start: 3px; }
.feldzeile__wert { min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); }
.feldzeile input, .feldzeile select, .feldzeile textarea {
  flex: 1; min-inline-size: 0; min-block-size: 30px; inline-size: 100%; border: 1px solid transparent; background-color: transparent; font: inherit; font-size: 14.5px;
  color: var(--text-strong); padding: 2px 4px; margin-inline-start: -5px; border-radius: 2px;
}
.feldzeile select { padding-inline-end: 26px; background-position: right 8px center; }
[dir=rtl] .feldzeile select { background-position: left 8px center; }
.feldzeile input:hover, .feldzeile select:hover, .feldzeile textarea:hover { border-color: var(--border-default); background-color: var(--white); }
.feldzeile input:focus, .feldzeile select:focus, .feldzeile textarea:focus { border-color: var(--navy-600); background-color: var(--white); outline: none; box-shadow: var(--focus-ring); }
.feldzeile input::placeholder, .feldzeile textarea::placeholder { color: var(--steel-500); font-style: italic; font-family: var(--font-mono); font-size: 13.5px; }
.feldzeile .mono { font-family: var(--font-mono); }
.feldzeile__anzeige { font-size: 14.5px; color: var(--text-strong); padding: 2px 0; }
.feldzeile__anzeige--leer { color: var(--steel-500); font-style: italic; font-family: var(--font-mono); font-size: 13.5px; }
.feldzeile__einheit { display: none; }
.feldzeile__korrektur { inline-size: 100%; font-size: 12.5px; color: var(--green-700); }
.feldzeile__rueckfrage { inline-size: 100%; font-size: 12.5px; color: var(--amber-800); }
.feldzeile__speichern { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.feldzeile--fehler { background: var(--red-50); box-shadow: inset 3px 0 0 var(--red-600); }
.feldzeile--korrigiert { background: var(--green-50); }
/* Aus Datenbanken ergänzt, noch ungeprüft (U-107) */
.feldzeile--ungeprueft { background: var(--amber-50); box-shadow: inset 4px 0 0 var(--amber-500); }
.feldzeile__ungeprueft { display: block; margin-block-start: 2px; color: var(--amber-700); font-size: 12px; }
.datenpruefung .fenster > summary { margin: var(--space-2) 0 0; }
.feldzeile--rueckfrage { box-shadow: inset 3px 0 0 var(--amber-500); }
.feldzeile--gesperrt .feldzeile__anzeige { color: var(--steel-700); }
.feldzeile__schloss { color: var(--steel-500); }
.feldzeile--speichert { opacity: .6; }
.feldzeile--gespeichert { animation: gespeichert 1.6s ease-out; }
@keyframes gespeichert { from { background: var(--green-50); } to { background: transparent; } }
.ausstattung { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); padding: var(--space-5) var(--space-4); }
.ausstattung__kategorie h3, .ausstattung__kategorie legend { font-family: var(--font-text); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--steel-700); margin: 0 0 var(--space-3); padding: 0; }
.ausstattung__kategorie ul { margin: 0; padding-inline-start: var(--space-6); }
.ausstattung__kategorie li { margin-block-end: var(--space-2); hyphens: auto; }
.ausstattung--auswahl fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.auswahl--kompakt { padding: var(--space-2) 0; border: 0; }
.ausstattung--auswahl .auswahl--kompakt { padding: 5px var(--space-2); margin-inline: calc(-1 * var(--space-2)); border-radius: var(--radius-sm); }
.ausstattung--auswahl .auswahl--kompakt:hover { background: var(--navy-50); }
.ausstattung--auswahl .auswahl--kompakt:has(input:checked) .auswahl__text { color: var(--navy-900); font-weight: 600; }
.auswahl input.regel__zahl { inline-size: 7.5em; block-size: auto; margin: 0 2px; padding: 1px 6px; font: inherit; accent-color: auto; } /* Zahl in einer Bedingung der Textbausteine (U-116) */
.fenster__rumpf > .leer { padding: var(--space-5); }
.fenster__rumpf > .leer .knopf { margin-inline-start: var(--space-3); }
/* Eigene Ausstattungseinträge (FA-FZG-006) */
.eigene { margin: 0; padding: var(--space-4) var(--space-4) var(--space-5); border: 0; border-block-start: 1px solid var(--border-subtle); background: var(--surface-sunken); min-inline-size: 0; }
.eigene legend { float: inline-start; inline-size: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); padding: 0; margin-block-end: var(--space-3); font-family: var(--font-text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--steel-700); }
.eigene legend .zeile__sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.eigene__liste { clear: both; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.eigene__liste:not(:empty) { margin-block-end: var(--space-3); }
.eigene__eintrag { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 32px; padding: 0 var(--space-3); border: 1px solid var(--navy-200); border-radius: var(--radius-sm); background: var(--navy-50); color: var(--navy-900); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.eigene__eintrag input { margin: 0; inline-size: 15px; block-size: 15px; }
.eigene__eintrag:has(input:not(:checked)) { background: var(--white); border-style: dashed; border-color: var(--steel-400); color: var(--text-muted); font-weight: 400; text-decoration: line-through; }
.eigene__neu { clear: both; display: flex; gap: var(--space-3); align-items: stretch; max-inline-size: 560px; }
.eigene__neu input { flex: 1; min-inline-size: 0; }
.eigene__neu .knopf { min-block-size: 36px; }
.eigene__hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block-start: var(--space-3); font-size: 13px; color: var(--status-review-fg); }
.fenster > summary { list-style: none; margin: var(--space-4); }
.fenster > summary::-webkit-details-marker { display: none; }
/* Fenster: Kopf, Suche und Fuß stehen fest, nur der Inhalt rollt; Schließen mit Kreuz, Esc oder Klick daneben */
.fenster[open] .fenster__inhalt { position: fixed; inset: 5vh 50% auto auto; transform: translateX(50%); inline-size: min(1040px, 94vw); max-block-size: 90vh; display: flex; flex-direction: column; overflow: hidden; background: var(--white); z-index: 40; box-shadow: var(--shadow-xl); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
[dir=rtl] .fenster[open] .fenster__inhalt { transform: translateX(-50%); }
.fenster[open]::before { content: ""; position: fixed; inset: 0; background: var(--surface-overlay); z-index: 30; cursor: pointer; }
body:has(.fenster[open]) { overflow: hidden; }
.fenster__inhalt > form { display: flex; flex-direction: column; min-block-size: 0; flex: 1 1 auto; }
.fenster__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border-block-end: 1px solid var(--border-subtle); background: var(--white); flex: none; }
.fenster__titel { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.fenster__titel strong { font-family: var(--font-display); font-size: 17px; color: var(--text-strong); }
.fenster__zu { flex: none; display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; margin: -4px -4px 0 0; border-radius: var(--radius-sm); color: var(--steel-600); font-size: 18px; text-decoration: none; transition: background 120ms cubic-bezier(.2,.7,.3,1), color 120ms cubic-bezier(.2,.7,.3,1); }
.fenster__zu:hover { background: var(--navy-50); color: var(--navy-800); }
.fenster__rumpf { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }
.fenster__fuss { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--border-subtle); background: var(--white); flex: none; }
.fenster__fuss .knopf--haupt { inline-size: min(100%, 420px); }
.fenster__rueckfrage { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); inline-size: 100%; padding: var(--space-3) var(--space-4); background: var(--status-review-bg); border: 1px solid var(--status-review-border); color: var(--status-review-fg); font-weight: 600; font-size: 13.5px; }
@media (min-width: 601px) {
  .fenster[open] .fenster__inhalt:has(.suchzeile--fenster) { block-size: min(760px, 90vh); }
}
@media (max-width: 600px) {
  .fenster[open] .fenster__inhalt { inset: 0; transform: none; inline-size: 100vw; max-block-size: none; block-size: 100%; border-radius: 0; border: 0; }
}

/* Suchfeld mit Lupe (Ausstattung) */
.suchzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4); border-block-end: 1px solid var(--border-subtle); }
.suchzeile--fenster { padding: var(--space-3) var(--space-5); flex: none; background: var(--white); }
.suchfeld { flex: 1 1 280px; min-inline-size: 0; display: flex; align-items: center; gap: var(--space-3); min-block-size: 38px; padding-inline: var(--space-4) var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--white); color: var(--text-subtle); transition: border-color 180ms cubic-bezier(.2,.7,.3,1), box-shadow 180ms cubic-bezier(.2,.7,.3,1); }
.suchfeld:hover { border-color: var(--border-strong-color); }
.suchfeld:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.suchfeld input { flex: 1; min-inline-size: 0; border: 0; padding: 0; min-block-size: 36px; background: transparent; box-shadow: none; outline: none; font-size: 14px; }
.suchfeld input:focus { box-shadow: none; }
.suchzeile__zahl { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.knopf--rand { margin: var(--space-4); }
/* In Reihen sorgt die Reihe selbst für den Abstand; der Rand des Knopfs käme doppelt dazu und zöge die Reihe in die Höhe */
:is(.knopfreihe, .karte__kopf, .filter__aktiv, .fenster__fuss, .suchleiste, .zusicherung, .eigene__neu, .zeile__ende, .preiszeile, .hilfe-rueckmeldung__frage, td, th, .rechts, figcaption, [class*="__aktionen"]) .knopf--rand { margin: 0; }
.zeile-details > summary { list-style: none; }
.zeile-details > summary::-webkit-details-marker { display: none; }
.zeile--blockiert .zeile__name { color: var(--steel-600); }
.preiszeile { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.karte__kopf + .preiszeile { border-block-start: 0; }
.preiszeile small { color: var(--text-muted); font-size: 12px; }
.preiszeile strong { font-size: 16px; color: var(--text-strong); white-space: nowrap; }
.notiz { padding: var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.notiz p { margin: 0; }
.notiz small { color: var(--text-muted); font-size: 12px; }
.notiz-neu { display: flex; gap: var(--space-3); padding: var(--space-4); border-block-start: 1px solid var(--border-subtle); align-items: flex-end; }
.notiz-neu textarea { flex: 1; padding: var(--space-3); }
.knopfreihe--ohne-rand { border: 0; padding-inline: 0; }
.karte__kopf--mit-aktion { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.suchleiste { display: flex; gap: var(--space-4); padding: var(--space-4); align-items: center; flex-wrap: wrap; }
.suchleiste__feld { flex: 1; min-inline-size: 240px; display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--white); padding: 0 var(--space-4); min-block-size: 46px; color: var(--text-subtle); transition: border-color 180ms cubic-bezier(.2,.7,.3,1), box-shadow 180ms cubic-bezier(.2,.7,.3,1); }
.suchleiste__feld:hover { border-color: var(--border-strong-color); }
.suchleiste__feld:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.suchleiste__feld input { border: 0; font-size: 15px; flex: 1; outline: none; background: transparent; padding: 0; min-block-size: 44px; box-shadow: none; }
.suchleiste__auswahl { display: flex; align-items: center; gap: var(--space-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--steel-700); }
.suchleiste__auswahl select { font-size: 15px; text-transform: none; letter-spacing: 0; min-block-size: 46px; padding-inline: var(--space-4) 36px; }
.vorschaubild { inline-size: 46px; block-size: 36px; background: var(--steel-100); display: grid; place-items: center; color: var(--steel-600); border: 1px solid var(--border-subtle); overflow: hidden; }
.vorschaubild img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.vorschaubild .fa-camera { color: var(--red-600); }
.tabelle td.rechts, .tabelle th.rechts { text-align: end; white-space: nowrap; }
.tabelle td.mono { white-space: nowrap; } /* Nummern, Daten und Werte nicht mitten im Wert umbrechen */
.tabelle--bestand td { vertical-align: middle; }
@media (max-width: 1100px) { .akte { grid-template-columns: 1fr; } .akte__seite { position: static; } }
/* Fahrzeugakte am Telefon: Stand, Verkaufen, Preis und Notizen vor den Fahrzeugdaten (O2) */
@media (max-width: 900px) { .akte--taeglich-zuerst > .akte__seite { order: -1; } }
@media (max-width: 600px) { .feldzeile { grid-template-columns: 1fr; gap: 0; } }
.feldzeile__wert .feld__hinweis, .feldzeile__wert .feld__fehler { inline-size: 100%; }
.ohne-rahmen { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.zusicherung { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--border-subtle); align-items: center; }
.zusicherung__wahl { display: flex; gap: var(--space-5); white-space: nowrap; }
.zusicherung__wahl input { accent-color: var(--navy-700); }
.fehlend { margin: var(--space-2) 0 0; padding-inline-start: var(--space-6); }
.knopf[aria-disabled="true"] { opacity: .55; }
@media (max-width: 600px) { .zusicherung { grid-template-columns: 1fr; } }
.kurzmeldung--warnung { background: var(--amber-700, #b45309); }
.fotoraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); padding: var(--space-4); }
.foto { margin: 0; border: 1px solid var(--border-subtle); background: var(--white); }
.foto img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--steel-100); }
.foto figcaption { padding: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.foto__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); inline-size: 100%; }
.titelleiste__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
/* Zustandserfassung (06.12): Skizze, Punkte, große Wahlknöpfe */
.skizze { padding: var(--space-3) var(--space-4); }
.skizze__bild { display: block; inline-size: 100%; block-size: auto; max-block-size: 70vh; cursor: crosshair; touch-action: manipulation; }
.skizze__bild #bauteile path:hover { fill: rgba(30, 64, 120, .08); }
.skizze__bild .punkt circle { stroke: #fff; stroke-width: 4; }
.skizze__bild .punkt text { font: 700 20px var(--font-sans, sans-serif); fill: #fff; text-anchor: middle; pointer-events: none; }
.skizze__bild .punkt { pointer-events: none; }
.punkt--leicht circle, .punkt-legende.punkt--leicht::before, .punktnummer.punkt--leicht { fill: #d9911b; background: #d9911b; }
.punkt--mittel circle, .punkt-legende.punkt--mittel::before, .punktnummer.punkt--mittel { fill: #c2410c; background: #c2410c; }
.punkt--stark circle, .punkt-legende.punkt--stark::before, .punktnummer.punkt--stark { fill: #991b1b; background: #991b1b; }
.skizze__bild .punkt--behoben circle { fill: #fff; stroke: #64748b; stroke-width: 5; }
.skizze__bild .punkt--behoben text { fill: #64748b; }
.skizze__bild .punkt--intern circle { stroke-dasharray: 6 4; stroke: #1e293b; }
.skizze__bild .punkt-neu { fill: none; stroke: #1d4ed8; stroke-width: 6; pointer-events: none; }
.skizze__legende { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0 var(--space-4) var(--space-3); font-size: 12px; color: var(--text-muted); }
.punkt-legende::before { content: ''; display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; margin-inline-end: 5px; vertical-align: -1px; }
.punkt-legende.punkt--behoben::before { background: #fff; border: 2px solid #64748b; }
.punkt-legende.punkt--intern::before { background: #fff; border: 2px dashed #1e293b; }
.schadenformular { display: grid; gap: var(--space-3); padding: var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.wahlknoepfe { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wahlknoepfe legend { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-block-end: var(--space-2); padding: 0; }
.wahlknoepfe label { position: relative; }
.wahlknoepfe input { position: absolute; opacity: 0; inset: 0; }
.wahlknoepfe span { display: inline-block; min-block-size: 44px; min-inline-size: 64px; padding: 11px 14px; border: 1px solid var(--steel-400); background: var(--white); font-size: 14px; text-align: center; box-sizing: border-box; }
.wahlknoepfe input:checked + span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.wahlknoepfe input:focus-visible + span { outline: 3px solid var(--amber-500); outline-offset: 1px; }
.schadenzeile { grid-template-columns: auto 1fr auto; align-items: start; }
.punktnummer { display: inline-grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; }
.schadenzeile__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
.schadenfotos { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); }
.schadenfotos img { inline-size: 72px; block-size: 54px; object-fit: cover; display: block; }
.bericht { padding: var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.bericht__titel { font-size: 14px; margin: 0 0 var(--space-3); }
.bericht select, .bericht input { inline-size: 100%; }
@media (max-width: 700px) {
  .skizze { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .skizze__bild { min-inline-size: 760px; max-block-size: none; }
  .schadenzeile { grid-template-columns: auto 1fr; }
  .schadenzeile__aktionen { grid-column: 1 / -1; justify-content: flex-start; }
}
/* Radsätze (06.10 §13) */
.radsatz__kurz { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: 13px; }
.profil { padding: 1px 6px; background: var(--steel-100); }
.profil--hinweis { background: #fbe9cb; }
.profil--warnung { background: #fcd9c4; color: #7c2d12; }
.profil--unzulaessig { background: #991b1b; color: #fff; }
input.profil--hinweis, input.profil--warnung, input.profil--unzulaessig { border-color: #c2410c; }
.radsatzformular { padding: 0; }
.radtabelle input { inline-size: 7.5em; }
.datum-huelle { display: flex; align-items: stretch; gap: 0; position: relative; inline-size: 100%; }
.datum-huelle > input[data-datum] { flex: 1; min-inline-size: 0; inline-size: 100%; padding-inline-end: 38px; margin: 0; }
.datum-knopf { position: absolute; inset-block: 1px; inset-inline-end: 1px; inline-size: 34px; border: 0; background: transparent; color: var(--steel-600); padding: 0; cursor: pointer; font-size: 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.datum-knopf:hover, .datum-knopf:focus-visible { color: var(--navy-700); background: var(--navy-50); }
.datum-kalender { position: absolute; inset-inline-end: 0; inset-block-end: 0; inline-size: 1px; block-size: 1px; min-block-size: 0; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.zubehoer__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); margin-block-end: var(--space-5); }
.kachel { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--white); border: 1px solid var(--border-subtle); text-decoration: none; color: var(--text-strong); }
.kachel:hover { border-color: var(--navy-700); }
.kachel__wert { font: 700 24px var(--font-mono, monospace); }
.kachel__titel { font-size: 12.5px; color: var(--text-muted); }
/* Aufgaben und Checklisten (06.17) */
.aufgabe { grid-template-columns: auto 1fr auto; align-items: start; }
.aufgabe__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
.aufgabe-neu { padding-block-end: var(--space-2); border-block-end: 1px solid var(--border-subtle); }
.aufgabe-neu__mehr { padding: 0 var(--space-4) var(--space-2); font-size: 13px; }
.aufgabe-neu__mehr summary { cursor: pointer; color: var(--text-muted); padding: var(--space-1) 0; }
.punkt-zeile { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.punkt-zeile--nein { background: #fdf2f2; }
.punkt-zeile__text { font-size: 15px; }
.punkt-zeile__eingabe, .punkt-zeile__bemerkung { inline-size: 100%; max-inline-size: 420px; }
.punkt-zeile__bemerkung { font-size: 13px; }
.fortschritt { block-size: 6px; background: var(--steel-100); margin: 0 var(--space-4) var(--space-3); }
.fortschritt span { display: block; block-size: 100%; background: var(--navy-700); }
.fortschritt--0 { inline-size: 0%; }
.fortschritt--5 { inline-size: 5%; }
.fortschritt--10 { inline-size: 10%; }
.fortschritt--15 { inline-size: 15%; }
.fortschritt--20 { inline-size: 20%; }
.fortschritt--25 { inline-size: 25%; }
.fortschritt--30 { inline-size: 30%; }
.fortschritt--35 { inline-size: 35%; }
.fortschritt--40 { inline-size: 40%; }
.fortschritt--45 { inline-size: 45%; }
.fortschritt--50 { inline-size: 50%; }
.fortschritt--55 { inline-size: 55%; }
.fortschritt--60 { inline-size: 60%; }
.fortschritt--65 { inline-size: 65%; }
.fortschritt--70 { inline-size: 70%; }
.fortschritt--75 { inline-size: 75%; }
.fortschritt--80 { inline-size: 80%; }
.fortschritt--85 { inline-size: 85%; }
.fortschritt--90 { inline-size: 90%; }
.fortschritt--95 { inline-size: 95%; }
.fortschritt--100 { inline-size: 100%; }
@media (max-width: 700px) { .aufgabe { grid-template-columns: auto 1fr; } .aufgabe__aktionen { grid-column: 1 / -1; justify-content: flex-start; } }
/* Detailsuche (06.21) */
.filter { border-block-start: 1px solid var(--border-subtle); }
.filter__formular { padding: 0; }
.filter__gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2) var(--space-4); }
.filter__gruppen select[multiple] { inline-size: 100%; }
.filter__bereich { display: flex; gap: var(--space-2); }
.filter__bereich input { inline-size: 50%; min-inline-size: 0; flex: 1 1 0; }
.filter__gruppen select[multiple] { block-size: 7.5em; }
.filter__aktiv { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.filter__kriterium { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--navy-50, #eef2f8); border: 1px solid var(--navy-200, #c8d3e6); color: var(--text-strong); text-decoration: none; font-size: 12.5px; }
.filter__kriterium:hover { border-color: var(--navy-700); }
.angebot { grid-template-columns: auto 1fr auto; align-items: start; }
.angebot__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; max-inline-size: 360px; }
.angebot__aktionen input { inline-size: 150px; font-size: 13px; min-block-size: 32px; padding-block: 4px; }
@media (max-width: 700px) { .angebot { grid-template-columns: auto 1fr; } .angebot__aktionen { grid-column: 1 / -1; justify-content: flex-start; max-inline-size: none; } }
.highlights { padding: var(--space-3) var(--space-4); }
.highlights__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.highlights__liste small { color: var(--text-muted); }
/* Stammdaten */
.stammzeile { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-4); }
.stammzeile input:first-of-type { flex: 2 1 220px; }
.stammzeile input, .stammzeile select { flex: 1 1 120px; }
.stammzeile--neu { border-block-start: 1px solid var(--border-subtle); padding-block: var(--space-3); }
.logo-vorschau { padding: var(--space-4); }
.logo-vorschau img { max-block-size: 80px; max-inline-size: 320px; display: block; }
input.voll { inline-size: 100%; }
/* Garantien (U-084) */
.zurueckzeile { margin: 0 0 var(--space-4); font-size: 13.5px; }
.zurueckzeile a { color: var(--navy-700); text-decoration: none; font-weight: 600; }
.zurueckzeile a:hover { text-decoration: underline; }
.zeile--gedimmt .zeile__name, .zeile--gedimmt .zeile__symbol { color: var(--text-muted); }
.zeile--aktion .zeile__name { color: var(--navy-700); }
.zeile--gefahr { grid-template-columns: 28px 1fr; }
.zeile--gefahr .zeile__symbol, .zeile--gefahr .zeile__name { color: var(--red-700); }
.garantie__preis { display: inline-flex; gap: var(--space-4); align-items: center; color: var(--text-strong); font-weight: 700; font-size: 14px; }
.garantie__preis .fa { color: var(--steel-600); font-weight: 400; }
.laufzeiten__zeile { display: grid; grid-template-columns: minmax(100px, 1fr) 150px minmax(120px, auto) 44px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.laufzeiten__kopf { border-block-start: 0; padding-block: var(--space-3) var(--space-2); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-700); font-weight: 700; }
.laufzeiten__monate { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.laufzeiten__wahl { display: inline-flex; gap: var(--space-2); align-items: center; font-size: 13.5px; color: var(--steel-800); cursor: pointer; }
.laufzeiten__wahl input { accent-color: var(--navy-700); inline-size: 16px; block-size: 16px; margin: 0; }
.laufzeiten__wahl input:not(:checked) + span { color: var(--text-muted); }
.preiseingabe { display: inline-flex; align-items: center; inline-size: 100%; border: 1px solid var(--border-default); border-radius: 2px; background: var(--white); padding-inline: var(--space-3); }
.preiseingabe:hover { border-color: var(--border-strong-color); }
.preiseingabe:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.preiseingabe input { flex: 1; min-inline-size: 0; border: 0; outline: none; background: transparent; font-family: var(--font-mono); font-size: 14px; text-align: end; padding: 7px 0; color: var(--text-strong); box-shadow: none; }
.preiseingabe > span { color: var(--text-muted); margin-inline-start: 6px; }
.laufzeit-neu { border-block-start: 1px solid var(--border-subtle); }
.laufzeit-neu > .karte__titel--klein { padding: var(--space-4) var(--space-4) 0; }
@media (max-width: 600px) {
  .laufzeiten__zeile { grid-template-columns: 1fr 120px 44px; row-gap: var(--space-1); }
  .laufzeiten__zeile > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .laufzeiten__kopf > :nth-child(3) { display: none; }
}
.reklamation { grid-template-columns: auto 1fr auto; align-items: start; }
.reklamation__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); max-inline-size: 360px; justify-content: flex-end; }
@media (max-width: 700px) { .reklamation { grid-template-columns: auto 1fr; } .reklamation__aktionen { grid-column: 1 / -1; justify-content: flex-start; max-inline-size: none; } }
/* Benachrichtigungen und Notizen (06.18, 07.06) */
.glocke { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; color: var(--text-inverse, #fff); font-size: 17px; text-decoration: none; margin-inline-end: var(--space-2); }
.glocke__zahl { position: absolute; inset-block-start: 2px; inset-inline-end: 0; min-inline-size: 17px; block-size: 17px; padding: 0 4px; border-radius: 9px; background: var(--amber-500); color: #10203a; font: 700 10.5px/17px var(--font-sans, sans-serif); text-align: center; }
/* Schnellumschalter Easy/Advanced in der Titelleiste */
.modusschalter { display: inline-flex; padding: 2px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: transparent; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; }
.modusschalter__teil { padding: 7px 11px; border-radius: 999px; color: var(--text-inverse-muted); }
.modusschalter__teil[data-an] { background: var(--amber-500); color: #10203a; }
.modusschalter:hover .modusschalter__teil:not([data-an]) { color: var(--text-inverse); }
.modusschalter:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }
.notiz--nachricht { border-inline-start: 3px solid var(--navy-700); }
.notiz--neu { background: var(--amber-50); }
.notiz__aufgabe { border: 0; background: none; color: var(--steel-600); font-size: 12px; cursor: pointer; padding: 0; margin-inline-start: var(--space-2); }
.notiz__aufgabe:hover { color: var(--navy-700); text-decoration: underline; }
.korrespondenz-neu { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border-subtle); }
/* Schmale Bildschirme: Navigation nimmt keinen freien Platz, Spalten dürfen schmaler werden als ihr Inhalt */
@media (max-width: 900px) {
  .app { grid-template-rows: auto 1fr; }
  .suchleiste { flex-wrap: wrap; }
  .suchleiste__feld { flex: 1 1 100%; min-inline-size: 0; }
}
.akte > * { min-inline-size: 0; }
.tabellenrahmen { max-inline-size: 100%; }
@media (max-width: 600px) {
  .tabelle td form.inline { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
  .tabelle td input[name="betrag"] { inline-size: 7em; }
  .auswahl__text { overflow-wrap: anywhere; }
}

/* Vermarktung */
.inserat-text { white-space: pre-wrap; padding: var(--space-4) 0; font-size: 14px; line-height: 1.5; color: var(--text-strong); overflow-wrap: anywhere; }
.ueberlagerung-vorschau { padding: var(--space-4); }
.ueberlagerung-vorschau img { display: block; max-inline-size: 100%; block-size: auto; border: 1px solid var(--border-subtle); }

/* Werkstattauftrag */
.werkstattauftrag { grid-template-columns: auto 1fr auto; align-items: start; }
.werkstattauftrag__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; max-inline-size: 340px; }
.werkstattauftrag__aktionen form { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 600px) { .werkstattauftrag { grid-template-columns: auto 1fr; } .werkstattauftrag__aktionen { grid-column: 1 / -1; justify-content: flex-start; } }

/* Tickets und Freigaben */
.supportstreifen { position: sticky; top: 0; z-index: 5; padding: var(--space-3) var(--space-5); background: var(--amber-50); border-block-end: 2px solid var(--amber-600); color: var(--text-strong); font-weight: 600; }
.supportstreifen a { margin-inline-start: var(--space-3); }
.beitrag { padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--border-subtle); }
.beitrag__kopf { font-size: 12px; color: var(--text-muted); margin-block-end: var(--space-2); }
.beitrag__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.beitrag--anbieter { background: var(--status-info-bg); border-inline-start: 3px solid var(--status-info-fg); }
.beitrag--endkunde { border-inline-start: 3px solid var(--amber-600); }
.beitrag--system { color: var(--text-muted); font-size: 13px; }
.freigabe { grid-template-columns: auto 1fr auto; align-items: start; }
.freigabe__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
@media (max-width: 600px) { .freigabe { grid-template-columns: auto 1fr; } .freigabe__aktionen { grid-column: 1 / -1; justify-content: flex-start; } }
input.kurz { inline-size: 6em; display: inline-block; }
.beitrag--intern { background: var(--amber-50); border-inline-start: 3px dashed var(--amber-600); }
.anbieterbereich .marke__logo { background: var(--amber-600); }

/* Kleine Hinweiszeile und aufklappbares Zusatzformular in Seitenkarten (z. B. USt-IdNr.) */
.karte__hinweis { margin: 0; padding: var(--space-2) var(--space-4); font-size: 13px; color: var(--text-muted); }
.ausklapp { padding: 0 var(--space-4) var(--space-2); font-size: 13px; }
.ausklapp > summary { cursor: pointer; color: var(--text-muted); padding: var(--space-1) 0; }
.supportstreifen--support { background: var(--navy-50); border-block-end-color: var(--navy-700); }

/* Felder in Tabellen und kurzen Zeilen etwas kompakter */
.tabelle :where(input:not([type=checkbox], [type=radio], [type=hidden]), select:not([multiple])) { min-block-size: 32px; padding-block: 4px; font-size: 13.5px; }
.tabelle :where(select:not([multiple])) { padding-inline-end: 30px; background-position: right 10px center; }
.stammzeile :where(input, select) { min-block-size: 36px; }
.punkt-zeile__eingabe, .punkt-zeile__bemerkung { min-block-size: 34px; }

/* Abrechnung im Verkauf: Aufstellung wie auf einer Rechnung (Rückmeldung 15.10.2026) */
.aufstellung { margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); }
.aufstellung__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: 6px 0; }
.aufstellung__zeile dt { min-inline-size: 0; font-size: 13.5px; color: var(--text-body-color); overflow-wrap: anywhere; }
.aufstellung__zeile dt small { display: block; font-size: 12px; color: var(--text-muted); }
.aufstellung__zeile dd { margin: 0; white-space: nowrap; font-size: 13.5px; color: var(--text-strong); }
.aufstellung__zeile--summe { border-block-start: 1px solid var(--border-default); margin-block-start: var(--space-2); padding-block-start: var(--space-3); }
.aufstellung__zeile--summe dt, .aufstellung__zeile--summe dd { font-weight: 700; color: var(--text-strong); font-size: 14px; }
.aufstellung__zeile--summe dt small, .aufstellung__zeile--ergebnis dt small { font-weight: 400; }
.aufstellung__zeile--ergebnis { border-block-start: 2px solid var(--navy-700); margin-block-start: var(--space-2); padding-block-start: var(--space-3); }
.aufstellung__zeile--ergebnis dt, .aufstellung__zeile--ergebnis dd { font-weight: 700; color: var(--navy-900); font-size: 15px; }
.aufstellung__titel { padding: var(--space-3) var(--space-4) var(--space-2); border-block-start: 1px solid var(--border-subtle); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-700); }

/* Erwähnen in Notizen: Vorschlagsliste unter dem Feld */
.erwaehnen { position: relative; flex: 1; min-inline-size: 0; display: flex; }
.erwaehnen > textarea { flex: 1; min-inline-size: 0; }
.erwaehnen__liste { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 25; margin: 0; padding: var(--space-1) 0; list-style: none; max-block-size: 260px; overflow-y: auto; background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.erwaehnen__eintrag { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 8px var(--space-4); cursor: pointer; font-size: 14px; color: var(--text-strong); }
.erwaehnen__eintrag small { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.erwaehnen__eintrag[aria-selected="true"], .erwaehnen__eintrag:hover { background: var(--navy-50); color: var(--navy-900); }
.erwaehnen__eintrag[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--navy-700); }
/* Zähler offener Punkte am Menüeintrag (FA-NAV-014) */
.menue__zahl { margin-inline-start: auto; min-inline-size: 20px; block-size: 20px; padding: 0 6px; border-radius: 10px; background: var(--amber-500); color: #10203a; font: 700 11px/20px var(--font-sans, sans-serif); text-align: center; }
.firmenlogo-vorschau { display: block; max-inline-size: 240px; max-block-size: 80px; margin-block-end: var(--space-3); }

/* ---------- Untere Leiste am Telefon (FA-NAV-010/017, O1) ---------- */
.unterleiste { display: none; }
@media (max-width: 900px) {
  .seitenleiste .menue { display: none; }
  .unterleiste {
    display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20; block-size: 60px;
    background: var(--navy-900); border-block-start: 1px solid rgba(255,255,255,.12);
    padding-block-end: env(safe-area-inset-bottom);
  }
  .unterleiste > a, .unterleiste__mehr > summary {
    flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--text-inverse); text-decoration: none; font-size: 11px; position: relative; list-style: none; cursor: pointer;
    border-block-start: 3px solid transparent;
  }
  .unterleiste__mehr { flex: 1 1 0; display: flex; }
  .unterleiste__mehr > summary::-webkit-details-marker { display: none; }
  .unterleiste > a[aria-current="page"] { border-block-start-color: var(--amber-500); font-weight: 700; }
  .unterleiste .fa { font-size: 18px; }
  .unterleiste__text { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px; }
  .unterleiste__zahl { position: absolute; inset-block-start: 4px; inset-inline-start: calc(50% + 6px); min-inline-size: 18px; block-size: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber-500); color: #10203a; font: 700 10.5px/18px var(--font-sans, sans-serif); }
  .unterleiste__liste {
    position: fixed; inset-inline: 0; inset-block-end: 60px; max-block-size: 70vh; overflow-y: auto; margin: 0; padding: var(--space-2) 0;
    list-style: none; background: var(--navy-900); border-block-start: 1px solid rgba(255,255,255,.12); box-shadow: 0 -8px 24px rgba(0,0,0,.25);
  }
  .unterleiste__liste a { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); color: var(--text-inverse); text-decoration: none; font-size: 15px; }
  .unterleiste__liste a .menue__zahl { margin-inline-start: auto; }
  .inhalt { padding-block-end: 180px; }
  .app .aktionsleiste { inset-block-end: 60px; }
  .kurzmeldung { inset-block-end: 140px; }
}
@media print { .unterleiste { display: none !important; } }
/* Fotos: ziehen zum Sortieren, nicht im Inserat (K8) */
.foto[draggable="true"] { cursor: grab; }
.foto--zieht { opacity: .4; }
.foto--ziel { outline: 2px dashed var(--amber-500); outline-offset: 2px; }
.foto--intern img { opacity: .55; }
.blaettern { display: flex; gap: var(--space-4); align-items: center; justify-content: center; padding: var(--space-4); border-block-start: 1px solid var(--border-subtle); font-size: 13.5px; }

/* Fahrzeugschein: Hochladen und Prüfansicht (FA-ANL-010 bis -016, U-094) */
.zb-hochladen__inhalt { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.zb-hochladen__waehlen { cursor: pointer; }
.zb-hochladen__waehlen:focus-within { box-shadow: var(--focus-ring); }
.zb-hochladen__stand { font-size: 13.5px; color: var(--text-muted); }
.zb-hochladen--liest .zb-hochladen__stand::before { content: ""; display: inline-block; inline-size: 12px; block-size: 12px; margin-inline-end: 6px; border: 2px solid var(--navy-700); border-inline-end-color: transparent; border-radius: 50%; animation: zb-dreh .8s linear infinite; vertical-align: -1px; }
@keyframes zb-dreh { to { transform: rotate(360deg); } }
/* Overlay beim Auslesen: Balken und Schritte; erledigte Schritte mit Haken, der laufende fett */
.zb-laden { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-5); background: var(--surface-overlay); }
.zb-laden[hidden] { display: none; }
.zb-laden__karte { inline-size: min(440px, 100%); padding: var(--space-5) var(--space-5) var(--space-4); background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); }
.zb-laden__kopf { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: 17px; color: var(--text-strong); }
.zb-laden__kreis { flex: none; inline-size: 18px; block-size: 18px; border: 3px solid var(--navy-700); border-inline-end-color: transparent; border-radius: 50%; animation: zb-dreh .8s linear infinite; }
.zb-laden__balken { display: block; inline-size: 100%; block-size: 8px; margin-block: var(--space-5) var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--steel-100); overflow: hidden; appearance: none; }
.zb-laden__balken::-webkit-progress-bar { background: var(--steel-100); border-radius: var(--radius-pill); }
.zb-laden__balken::-webkit-progress-value { background: var(--navy-700); border-radius: var(--radius-pill); transition: inline-size .4s; }
.zb-laden__balken::-moz-progress-bar { background: var(--navy-700); border-radius: var(--radius-pill); }
.zb-laden__schritt { margin: 0 0 var(--space-4); font-weight: 600; color: var(--steel-700); }
.zb-laden__schritte { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); font-size: 13.5px; color: var(--text-muted); }
.zb-laden__schritte li { display: flex; align-items: center; gap: var(--space-3); }
.zb-laden__schritte li::before { content: ""; flex: none; inline-size: 14px; block-size: 14px; border: 2px solid var(--steel-400); border-radius: 50%; box-sizing: border-box; }
.zb-laden__schritte li.zb-laden--erledigt { color: var(--green-700); }
.zb-laden__schritte li.zb-laden--erledigt::before { border-color: var(--green-600); background: var(--green-600); box-shadow: inset 0 0 0 2px var(--white); }
.zb-laden__schritte li.zb-laden--laeuft { color: var(--text-strong); font-weight: 600; }
.zb-laden__schritte li.zb-laden--laeuft::before { border-color: var(--navy-700); border-inline-end-color: transparent; animation: zb-dreh .8s linear infinite; }
.zb-laden__hinweis { margin: 0; font-size: 12.5px; color: var(--text-muted); }
/* QR-Code für den Scan mit dem Handy (U-098) und die schlanke Kameraseite */
.zb-qr__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); font-family: var(--font-display); font-size: 17px; color: var(--text-strong); }
.zb-qr__anleitung { margin: var(--space-3) 0 var(--space-4); padding-inline-start: 1.3em; font-size: 13.5px; color: var(--steel-700); display: grid; gap: var(--space-2); }
.zb-qr__code { display: grid; place-items: center; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white); }
.zb-qr__code img { display: block; inline-size: 220px; block-size: 220px; image-rendering: pixelated; }
@media (hover: none) and (pointer: coarse) { .zb-hochladen__handy { display: none; } }
.zb-qr__link { margin: 0 0 var(--space-3); text-align: center; }
.zb-qr__gueltig { margin: var(--space-2) 0 var(--space-3); font-size: 12.5px; color: var(--text-muted); text-align: center; }
.zb-handy { max-inline-size: 560px; margin-inline: auto; }
.zb-handy__karte { margin-block: var(--space-4); }
.zb-handy__inhalt { flex-direction: column; align-items: stretch; }
.zb-handy__inhalt .knopf--haupt { inline-size: 100%; min-block-size: 56px; font-size: 17px; justify-content: center; }
.zb-handy__meldung { margin: var(--space-3) var(--space-4) 0; }
@media (prefers-reduced-motion: reduce) { .zb-laden__kreis, .zb-laden__schritte li.zb-laden--laeuft::before { animation: none; } }
.zb-hochladen .karte__hinweis { padding: 0 var(--space-4) var(--space-3); margin: 0; font-size: 12.5px; color: var(--text-muted); }
.zb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.zb__foto { position: sticky; inset-block-start: var(--space-4); }
.zb__foto .karte__hinweis { padding: var(--space-3) var(--space-4); margin: 0; font-size: 12.5px; color: var(--text-muted); }
.zb__bild { display: block; inline-size: 100%; block-size: auto; background: var(--steel-50); }
.zb__stelle { fill: transparent; stroke-width: 3; stroke: transparent; transition: stroke .15s, fill .15s; }
.zb__stelle--gering { stroke: rgba(185, 28, 28, .55); }
.zb__stelle--aktiv { stroke: var(--navy-700); stroke-width: 6; fill: rgba(30, 64, 175, .12); }
.zb-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.zb__gruppe > .zb-zeile:nth-child(2) { border-block-start: 0; }
.zb-zeile--gering { background: var(--red-50); border-inline-start: 4px solid var(--red-600); }
.zb-zeile--mittel { border-inline-start: 4px solid var(--amber-500); }
.zb-zeile--fehler { background: var(--red-50); }
.zb-zeile:has(.zb-zeile__ok) { grid-template-columns: minmax(0, 1fr) auto; }
.zb-zeile:has(.zb-zeile__ok) > :not(.zb-zeile__beschriftung, .zb-zeile__ok) { grid-column: 1 / -1; }
.zb-zeile__ok { position: relative; display: inline-flex; align-items: center; gap: 6px; align-self: center; min-block-size: 32px; padding: 0 var(--space-3); border: 1px solid var(--steel-300); border-radius: var(--radius-sm); background: var(--white); color: var(--steel-600); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.zb-zeile__ok input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.zb-zeile__ok .fa { color: var(--steel-400); }
.zb-zeile__ok:focus-within { box-shadow: var(--focus-ring); }
.zb-zeile__ok:has(input:checked) { border-color: var(--green-600); background: var(--green-600); color: var(--white); }
.zb-zeile__ok:has(input:checked) .fa { color: var(--white); }
.zb-zeile:has([data-zb-ok]:checked) { background: var(--green-50); border-inline-start-color: var(--green-600); }
.zb-zeile:has([data-zb-ok]:checked) .abzeichen { opacity: .45; }
.zb__zaehler { margin: 0 0 var(--space-2); }
.zb-zeile--hoch .zb-zeile__ok, .zb-zeile--fehlt .zb-zeile__ok { display: none; }
.zb-zeile--hoch:has([data-zb-ok]:checked), .zb-zeile--fehlt:has([data-zb-ok]:checked) { background: transparent; }
.zb-zeile--aktualisiert { animation: zb-blink 1.2s ease-out; }
@keyframes zb-blink { from { box-shadow: inset 0 0 0 999px rgba(30, 64, 175, .10); } to { box-shadow: none; } }
.zb-zeile__beschriftung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--steel-700); }
.zb-zeile__code { display: inline-block; min-inline-size: 2.2em; padding: 0 4px; border: 1px solid var(--green-700); border-radius: 2px; color: var(--green-700); font-family: var(--font-mono); font-size: 11px; text-align: center; }
.zb-zeile__einheit { font-weight: 400; color: var(--text-muted); }
.zb-zeile__eingabe { display: flex; gap: var(--space-3); align-items: center; }
.zb-zeile__eingabe > input, .zb-zeile__eingabe > select { flex: 1 1 12em; min-inline-size: 0; }
.zb-zeile__mono { font-family: var(--font-mono); letter-spacing: .04em; }
.zb-zeile__vorschlag { margin: var(--space-2) 0 0; }
.zb-zeile__vorschlag .knopf { font-size: 13px; }
.feld__fin--warnung { color: var(--red-700); }
.feld__fin-vorschlag { display: block; margin-block-start: var(--space-1); }
.feld__fin-vorschlag .knopf { font-size: 13px; }
.zb-lupe { flex: 0 1 220px; block-size: 44px; min-inline-size: 90px; border: 1px solid var(--border-subtle); background: var(--white); }
.zb-zeile .feld__hinweis, .zb-zeile .feld__fehler { margin: 0; }
.zb__abschluss { padding: var(--space-4); }
.zb__bestaetigung { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 600; margin-block-end: var(--space-3); }
.zb__bestaetigung input { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 1px; }
.zb__bestaetigung--fehler { color: var(--red-700); }
@media (max-width: 1100px) {
  .zb { grid-template-columns: 1fr; }
  .zb__foto { position: static; }
}
@media (max-width: 600px) {
  .zb-zeile__eingabe { flex-wrap: wrap; }
  .zb-lupe { flex-basis: 100%; block-size: 52px; }
}
a.titelleiste__papier { text-decoration: underline; text-underline-offset: 2px; }

/* Bildvorschau im Arbeitstab (Rückmeldung 19.10.2026) */
.bildvorschau { position: fixed; inset: 0; inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; background: rgba(10, 21, 38, .97); color: var(--white); }
.bildvorschau[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.bildvorschau::backdrop { background: var(--surface-overlay); }
body:has(.bildvorschau[open]) { overflow: hidden; }
.bildvorschau__kopf { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); }
.bildvorschau__titel { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.bildvorschau__zaehler { flex: none; font-size: 13px; color: var(--steel-200); }
.bildvorschau__knopf { flex: none; display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--white); font-size: 20px; text-decoration: none; cursor: pointer; }
.bildvorschau__knopf:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.bildvorschau__knopf:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }
.bildvorschau__knopf[hidden] { display: none; }
.bildvorschau__buehne { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; padding: 0 56px var(--space-5); }
.bildvorschau__bild { display: block; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; cursor: zoom-in; background: var(--steel-100); }
.bildvorschau__laden { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); color: var(--steel-200); font-size: 14px; }
.bildvorschau__laden[hidden] { display: none; }
.bildvorschau--gross .bildvorschau__buehne { display: block; overflow: auto; padding: 0; }
.bildvorschau--gross .bildvorschau__bild { max-inline-size: none; max-block-size: none; cursor: zoom-out; }
.bildvorschau--gross .bildvorschau__blaettern { display: none; }
.bildvorschau__blaettern { position: absolute; inset-block-start: 50%; transform: translateY(-50%); block-size: 64px; font-size: 34px; background: rgba(10, 21, 38, .5); }
.bildvorschau__blaettern--zurueck { inset-inline-start: var(--space-2); }
.bildvorschau__blaettern--vor { inset-inline-end: var(--space-2); }
[dir=rtl] .bildvorschau__blaettern .fa { transform: scaleX(-1); }
@media (max-width: 600px) {
  .bildvorschau__buehne { padding: 0 0 var(--space-3); }
  .bildvorschau__blaettern { inline-size: 40px; }
}

/* Handbuch pflegen im Anbieterbereich (FA-ADM-083) */
.handbuch-quelle { font-size: 13px; line-height: 1.5; min-block-size: 420px; tab-size: 2; }
.handbuch-vergleich td { padding-block: 1px; font-size: 12.5px; white-space: pre-wrap; vertical-align: top; }
.handbuch-vergleich__zeichen { inline-size: 1.5em; text-align: center; font-weight: 700; }
.handbuch-vergleich__neu td { background: var(--green-50); color: var(--green-700); }
.handbuch-vergleich__weg td { background: var(--red-50); color: var(--red-700); text-decoration: line-through; }
.handbuch-vergleich__luecke td { color: var(--text-muted); }
.tabelle__zeile--aktiv td { background: var(--navy-50); }

/* „Hat Ihnen das geholfen?“ unter jedem Handbuchabschnitt (FA-DOKU-019) */
.hilfe-rueckmeldung { padding: var(--space-4) var(--space-6); border-block-start: 1px solid var(--border-subtle); }
.hilfe-rueckmeldung__frage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hilfe-rueckmeldung__text { margin: 0; font-weight: 600; color: var(--text-strong); }
.hilfe-rueckmeldung__satz .feld { margin-block: var(--space-3); }
.hilfe-rueckmeldung__satz small { font-weight: 400; color: var(--text-muted); }

/* ---------- Durchsicht der Oberfläche (21.10.2026): Abstände und Ausrichtung ---------- */
/* Aktionsspalten: Knöpfe behalten ihre Höhe, statt sich auf die Zeilenhöhe zu strecken */
[class*="__aktionen"] { align-items: center; }
/* Bild im Aktenkopf bleibt in seinem Rahmen (hochformatige Fotos ragten über die Leiste) */
.titelleiste__bild { overflow: hidden; }
/* Aktenkopf: Titel und Kennzahlen dürfen umbrechen, die Knöpfe bleiben am Schreibtisch rechts daneben */
.titelleiste__akte { flex: 1 1 420px; }
.titelleiste__akte > div { min-inline-size: 0; }
/* Zwischenüberschrift in einer Gruppe von Haken (z. B. „Der Käufer hat bereits:“) mit Innenabstand wie die Zeilen */
.feldgruppe > .feld__beschriftung { padding: var(--space-4) var(--space-4) var(--space-2); margin: 0; }
/* Meldungen in Karten: ringsum gleich eingerückt, auch zum unteren Kartenrand */
.karte .meldung--rand { margin: var(--space-4); }
/* Kästen der Akte in Spalten: Abstand auch zur folgenden Karte (der Rand am Spaltenende entfällt sonst) */
.feldgruppen { margin-block-end: var(--space-5); }
/* Schmale Karte: nur schmaler, ohne die Innenabstände der Anmeldeseite */
.karte.schmal { max-inline-size: var(--container-narrow); margin-inline: 0; padding: 0; }
/* Hinweisabsatz direkt in einer Karte oder Feldliste mit Innenabstand wie die Felder */
:is(.karte, .felder, .karte > form, .karte > details:not(.karte__inhalt)) > p.feld__hinweis:not(.karte__inhalt) { margin: 0; padding: var(--space-3) var(--space-4); }
/* Hinweis unter einem Feld der Akte mit etwas Luft zum Wert */
.feldzeile__wert .feld__hinweis { margin-block-start: var(--space-2); }
/* Lange Werte im Verlauf (z. B. Zubehörlisten) brechen um, statt die Seite zu verbreitern */
.ereignis__satz, .ereignis li { overflow-wrap: anywhere; }
/* Ja/Nein/Unbekannt: Abstand zwischen Knopf und Wort */
.zusicherung__wahl label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.laufzeiten__wahl { gap: 6px; }
.filter__aktiv { gap: var(--space-3); }
/* Kopf einer Karte mit Knöpfen: am Handy rutschen die Knöpfe unter den Titel, statt den Titel zu quetschen */
.karte__kopf--mit-aktion { flex-wrap: wrap; }
.karte__kopfknoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* Datum in der Akte: Wert bündig mit den anderen Werten; leer ohne Kalenderknopf, damit „Noch nicht angegeben“ ganz lesbar bleibt */
.feldzeile .datum-huelle { margin-inline-start: -5px; }
.feldzeile .datum-huelle:not(:hover, :focus-within):has(> input[data-datum]:placeholder-shown) .datum-knopf { opacity: 0; }
.feldzeile .datum-huelle:not(:hover, :focus-within) > input[data-datum]:placeholder-shown { padding-inline-end: 4px; }
/* Zubehör als Raster ohne Trennlinien (die Linien je Eintrag brachen in der letzten Zeile ab) */
.zubehoer__liste { padding-block: var(--space-2); }
.zubehoer__liste > .auswahl { border-block-start: 0; padding-block: var(--space-2); }
/* Haken in Such- und Filterleisten ohne die Trennlinie der Listenzeilen */
:is(.suchleiste, .filterleiste) > .auswahl { border-block-start: 0; padding: var(--space-2) 0; align-items: center; }
:is(.suchleiste, .filterleiste) > .auswahl input { margin-block-start: 0; }
/* Meldungen: kein Absatzrand am Ende (unten sonst doppelt so viel Luft wie oben) */
.meldung > :last-child { margin-block-end: 0; }
.meldung__wege { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
/* Betrieb oben auf der Anmeldeseite vom Formular abgesetzt */
.karte--betrieb { border-block-end: 1px solid var(--border-subtle); padding-block: var(--space-4); }
/* Hinweis unter einer Gruppe von Haken; aufeinanderfolgende Gruppen und Tabellen mit Trennlinie */
.feldgruppe > .feld__hinweis { padding: var(--space-2) var(--space-4) var(--space-3); margin: 0; }
div.feldgruppe + div.feldgruppe, .tabellenrahmen + :is(.feldgruppe, .felder) { border-block-start: 1px solid var(--border-subtle); }
/* Knöpfe in Tabellenzellen und kurzen Formularen nebeneinander mit Abstand (ohne Leerzeichen im Quelltext klebten sie) */
.tabelle td :is(.knopf, form.inline) + :is(.knopf, form.inline) { margin-inline-start: var(--space-3); }
.tabelle td form.inline input:not([type=hidden]) + .knopf { margin-inline-start: var(--space-3); }
/* Storno einer Zahlung: Grund und Knopf mit Abstand */
.zeile details > form { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-3); }
/* Aufklapper: der Pfeil zeigt, ob offen oder zu */
details[open] > summary .zeile__ende.fa-angle-down { transform: rotate(180deg); }
/* Tabellen, die seitlich weitergehen, zeigen das mit einem Schatten am Rand (rollt mit, verschwindet am Ende) */
.tabellenrahmen {
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--white) 30%, rgba(255,255,255,0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,33,64,.16), rgba(15,33,64,0)) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15,33,64,.16), rgba(15,33,64,0)) right / 12px 100% no-repeat scroll;
}
[dir=rtl] .tabellenrahmen { background-position: right, left, right, left; }
/* Such- und Filterzeilen: Feld, Auswahl und Knopf gleich hoch */
.suchleiste :where(select, input:not([type=checkbox], [type=radio], [type=hidden])), .suchleiste .knopf { min-block-size: 42px; }
.suchleiste__feld { min-block-size: 42px; }
.suchleiste__feld input { min-block-size: 40px; }
input.suchleiste__feld { padding-inline: var(--space-4); }
/* Warnzeile: roter Strich innen, ohne den Inhalt zu verschieben */
.zeile--warnung { border-inline-start: 0; box-shadow: inset 3px 0 0 var(--red-600); }
[dir=rtl] .zeile--warnung { box-shadow: inset -3px 0 0 var(--red-600); }
/* Startseite: Kacheln und Karten mit demselben Abstand; im Raster sorgt der Rasterabstand für die Lücke */
.kacheln { gap: var(--space-5); }
.raster > .karte { margin-block-end: 0; }
.raster { margin-block-end: var(--space-5); }
/* Fortschrittsbalken der Checkliste mit Luft zur Linie darüber */
.fortschritt { margin-block-start: var(--space-4); }
@media (max-width: 600px) {
  /* Tabellen am Handy: lieber seitlich wischen als Wörter mitten im Wort brechen */
  .tabelle th, .tabelle td { padding: var(--space-3); }
  .tabelle :is(td, th), .tabelle .auswahl__text { overflow-wrap: normal; word-break: normal; }
  .tabelle td { min-inline-size: 7em; }
  .tabelle td.mono, .tabelle td.rechts { min-inline-size: 0; }
  /* Notiz schreiben: Feld in voller Breite, Knopf darunter */
  .notiz-neu { flex-direction: column; align-items: stretch; }
  .notiz-neu .knopf { align-self: flex-end; }
  /* Knöpfe einer Reihe füllen die Zeile, statt einen ausgefransten Rand zu bilden */
  .knopfreihe > .knopf:not(.knopf--klein), .knopfreihe > form > .knopf:not(.knopf--klein) { flex: 1 1 auto; }
}
/* Knopfreihe ohne Linie: in Karten mit dem Innenabstand der Karte (Knöpfe klebten am Kartenrand), außerhalb bündig mit den Karten */
.karte .knopfreihe--ohne-rand { padding-inline: var(--space-4); }
.karte__kopf .knopfreihe--ohne-rand { padding: 0; }
:is(.akte__seite, .akte__haupt) > .knopfreihe--ohne-rand { padding: 0; margin-block-end: var(--space-5); }
/* Reiterleiste und Schadensskizze, die seitlich weitergehen: Schatten am Rand als Hinweis zum Wischen */
.reiter, .skizze {
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--white) 30%, rgba(255,255,255,0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,33,64,.18), rgba(15,33,64,0)) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15,33,64,.18), rgba(15,33,64,0)) right / 12px 100% no-repeat scroll,
    var(--white);
}
/* Unter dem Kartenkopf keine zweite Linie */
.karte__kopf + .knopfreihe { border-block-start: 0; }
.ohne-umbruch { white-space: nowrap; }
/* Knöpfe eines zweispaltigen Formulars stehen immer unten links unter den Feldern (vorher mal rechts oben neben dem letzten Feld) */
.felder--zwei > .knopfreihe { grid-column: 1 / -1; }
/* Aufgeklappter Bereich: Linie zwischen Aufklappzeile und Inhalt über die ganze Breite */
.zeile-details[open] > summary + :is(form, div, .felder) { border-block-start: 1px solid var(--border-subtle); }
/* Formulare in der schmalen Seitenspalte einspaltig (zwei Spalten waren dort zu eng) */
.akte__seite .felder--zwei { grid-template-columns: 1fr; }
.akte__seite .felder--zwei { background: none; }
.akte__seite .felder--zwei > .feld:nth-child(2 of :not(input[type=hidden])):not(.feld--breit, .feld--breit ~ *) { border-block-start: 1px solid var(--border-subtle); }
.auswahl--unter { padding-inline-start: calc(var(--space-4) + 28px); }
.zusicherung + .felder { border-block-start: 1px solid var(--border-subtle); }
/* Formulare mit eigenem Innenabstand (Korrespondenz, Schaden erfassen): Felder und Knöpfe ohne zweiten Einzug und ohne
   Linien, damit alle linken Kanten bündig sind (vorher sprangen „Weg“/„Richtung“ gegenüber den Feldern um 12 px) */
:is(.korrespondenz-neu, .schadenformular) > :is(.feld, .knopfreihe, .auswahl) { padding-inline: 0; border-block-start: 0; }
:is(.korrespondenz-neu, .schadenformular) > .feld { padding-block: 0; }
.korrespondenz-neu { gap: var(--space-4); padding-block: var(--space-4); }
.wahlknoepfe legend { font-size: 12.5px; color: var(--steel-700); }
/* Empfänger einer Nachricht als Haken statt Mehrfachliste (die verlangte Strg-Klick) */
fieldset.feld { margin: 0; border: 0; border-block-start: 1px solid var(--border-subtle); min-inline-size: 0; }
fieldset.feld > legend { float: inline-start; inline-size: 100%; padding: 0; }
.empfaenger__liste { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 var(--space-6); }
.empfaenger__eintrag { display: flex; align-items: center; gap: var(--space-3); min-block-size: 32px; font-size: 14px; color: var(--text-strong); cursor: pointer; }
.empfaenger__eintrag input { margin: 0; inline-size: 16px; block-size: 16px; flex: none; }
.auswahl__text input.kurz { margin-inline: var(--space-2); min-block-size: 30px; padding-block: 2px; }
/* Radsatz einzeln (Ziel des Codes auf dem Reifenschild): linksbündig wie die anderen Seiten statt schmal in der Mitte */
.radsatzseite { max-inline-size: var(--container-narrow); }
/* Sechsstelliger Code des zweiten Faktors: Feld so breit wie der Code */
input#feld-code { max-inline-size: 16em; font-family: var(--font-mono); letter-spacing: .12em; }
/* Haken innerhalb eines Feldes (z. B. Hilfesymbole im Profil) bündig mit den Feldern */
.feld > .auswahl { padding-inline: 0; border-block-start: 0; }
/* Zusatzleistungen: Zeilen als Raster mit Kopf über den Feldern */
.stammliste__kopf, .stammliste__zeile { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(110px, 1fr) minmax(210px, 1.3fr) minmax(130px, 1fr) 104px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--border-subtle); }
.stammliste__kopf { border-block-start: 0; padding-block: var(--space-4) var(--space-2); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-700); font-weight: 700; }
.stammliste__zeile :where(input, select) { inline-size: 100%; min-inline-size: 0; }
.stammliste__zeile--neu { background: var(--surface-sunken); }
@media (max-width: 700px) {
  .stammliste__kopf { display: none; }
  .stammliste__zeile { grid-template-columns: 1fr 1fr; }
  .stammliste__zeile > :nth-child(1 of :not(input[type=hidden])) { grid-column: 1 / -1; }
  .stammliste__zeile > span:empty { display: none; }
}
/* Checklistenvorlage: der Punkt bekommt den Platz, die Haken-Spalten bleiben schmal */
.tabelle--checkliste td:nth-child(2) { inline-size: 100%; min-inline-size: 20em; }
.tabelle--checkliste th:nth-child(n+4) { white-space: normal; inline-size: 6.5em; text-align: center; }
.tabelle--checkliste td:nth-child(n+4) { text-align: center; vertical-align: middle; }
.tabelle--checkliste td:first-child input { inline-size: 4em; }
.tabelle input[type=checkbox] { inline-size: 16px; block-size: 16px; margin: 0; }
/* Bestandsliste: Fahrzeugname mit Platz, Spalten etwas enger, damit bei 1366 px alles ohne Rollen passt */
.tabelle--bestand :is(th, td) { padding-inline: var(--space-3); }
.tabelle--bestand td:nth-child(3) { min-inline-size: 13em; }
.filter__gruppen { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
/* Fotokachel: zwei feste Knopfreihen, Löschen rechts */
.foto__aktionen { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.foto__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.foto__loeschen { margin-inline-start: auto; }
.foto figcaption { padding: var(--space-3); gap: var(--space-3); }
@media (pointer: coarse) { .foto__reihe .knopf { min-block-size: 40px; min-inline-size: 40px; } }
.foto { position: relative; }
.foto__titelbild { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); box-shadow: var(--shadow-sm); }
.schadenformular { gap: var(--space-4); }
/* Initialen des Betriebs auf der Anmeldeseite: gefülltes Zeichen statt gestricheltem Platzhalter (wirkte wie ein fehlendes Bild) */
.logo-platz { border: 1px solid var(--navy-100); background: var(--navy-50); color: var(--navy-700); border-radius: var(--radius-md); font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: .02em; }
.tabelle td > .auswahl { padding: 0; border: 0; }
/* Zeilen mit mehreren Knöpfen rechts (z. B. Börsenkonto): Knöpfe als Gruppe, am Handy unter dem Text statt den Text zu quetschen */
.zeile__ende:has(.knopf) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); }
@media (max-width: 700px) {
  .zeile--statisch > .zeile__ende:has(.knopf) { grid-column: 1 / -1; justify-content: flex-start; padding-inline-start: 40px; }
}
/* Aufgeklapptes Formular in einer Zeile (z. B. Storno einer Zahlung) über die ganze Breite, statt den Text zu quetschen */
.zeile > details[open] { grid-column: 1 / -1; }
/* Knopf mit seiner Auswahl als Gruppe; Auswahl so hoch wie der kleine Knopf */
.knopfgruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.knopfgruppe select { min-block-size: 32px; padding-block: 3px; font-size: 13px; }
/* Knopfreihe in einer Meldung: die Meldung hat schon Innenabstand */
.meldung .knopfreihe--ohne-rand { padding-inline: 0; padding-block-end: 0; }
.knopfgruppe input { inline-size: 150px; min-block-size: 32px; padding-block: 4px; font-size: 13px; }
/* Preisangebot: Symbolspalte fest wie in den anderen Listen; „Als PDF“ unter den übrigen Knöpfen statt in der Symbolspalte */
.angebot { grid-template-columns: 28px 1fr auto; }
.angebot > .angebot__aktionen ~ .angebot__aktionen { grid-column: 3; }
@media (max-width: 700px) { .angebot > .angebot__aktionen ~ .angebot__aktionen { grid-column: 1 / -1; } }
.zeile details > form { align-items: center; }
/* Knöpfe in einer Tabellenzelle bleiben nebeneinander */
.tabelle td:has(> .knopf, > form.inline) { white-space: nowrap; }
/* Startseite am Handy: Kennzahlen zu zweit nebeneinander, damit „Was ist zu tun“ früher kommt */
@media (max-width: 600px) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .kachel { padding: var(--space-4); }
  .kachel__wert { font-size: 20px; }
}
/* Zahl in einer Bedingung der Textbausteine: klein im Satz statt als hohes Feld in eigener Zeile */
.auswahl input.regel__zahl { min-block-size: 26px; inline-size: 6.5em; padding: 1px 6px; font-size: 13px; vertical-align: baseline; }
.feldzeile__einheit--sichtbar { display: inline; color: var(--text-strong); font-size: 14.5px; }
.feldzeile__wert:has(> .feldzeile__einheit--sichtbar) > input { flex: 0 1 9em; inline-size: 9em; }
.karte__inhalt > .tabelle + p, .karte__inhalt > .tabelle ~ p { margin-block-start: var(--space-4); }
/* Filterzeilen (z. B. Protokoll) am Handy: jedes Feld volle Breite statt ungleich breiter Felder */
@media (max-width: 600px) {
  .filterleiste > label { flex: 1 1 100%; }
  .filterleiste :where(select, input) { inline-size: 100%; min-inline-size: 0; }
}
/* Kleine Aufklapper (Rechtegruppen, „… weitere Angaben“, „Frist, Zuständig …“): Pfeil wie bei den übrigen Aufklappern statt Browserdreieck */
:is(.rechtegruppe, .ereignis details, .aufgabe-neu__mehr, .ausklapp, details.karte__inhalt) > summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
:is(.rechtegruppe, .ereignis details, .aufgabe-neu__mehr, .ausklapp, details.karte__inhalt) > summary::-webkit-details-marker { display: none; }
:is(.ereignis details, .aufgabe-neu__mehr, .ausklapp, details.karte__inhalt) > summary::before { content: "\f105"; font-family: FontAwesome; inline-size: 1em; text-align: center; transition: transform .15s; }
:is(.ereignis details, .aufgabe-neu__mehr, .ausklapp, details.karte__inhalt)[open] > summary::before { transform: rotate(90deg); }
.rechtegruppe > summary::after { content: "\f107"; font-family: FontAwesome; margin-inline-start: auto; color: var(--steel-600); font-weight: 400; transition: transform .15s; }
.rechtegruppe[open] > summary::after { transform: rotate(180deg); }
.tabelle tbody:last-child tr:last-child th, .tabelle > tr:last-child th { border-block-end: 0; }
/* Nachkontrolle (21.10.2026) */
/* Meldungen direkt in einer Karte mit Abstand zum Kartenrand (z. B. „Noch offen:“ im Verkauf) */
.karte > .meldung { margin: var(--space-4); }
/* Werte in der Akte, die nicht ins Feld passen, enden mit „…“ statt mitten im Wort */
.feldzeile input { text-overflow: ellipsis; }
/* Betrag mit € direkt dahinter (Feld so breit wie der Wert, wo der Browser das kann) */
@supports (field-sizing: content) {
  .feldzeile__wert:has(> .feldzeile__einheit--sichtbar) > input { field-sizing: content; inline-size: auto; flex: 0 1 auto; min-inline-size: 4em; }
}
@media (pointer: coarse) { .zeile details > form .knopf { min-block-size: 44px; } }
@media (max-width: 600px) {
  /* Erste und letzte Spalte mit dem Innenabstand der Karte, damit die linke Kante nicht springt */
  .tabelle :is(td, th):first-child { padding-inline-start: var(--space-4); }
  .tabelle :is(td, th):last-child { padding-inline-end: var(--space-4); }
  /* Knöpfe in Formularen einer Knopfreihe füllen die Zeile wie die übrigen */
  .knopfreihe > form { flex: 1 1 auto; display: flex; }
  .knopfreihe > form > .knopf { flex: 1 1 auto; }
  /* Aufgeklapptes Formular in einer Tabellenzeile (Kosten bearbeiten): bleibt beim seitlichen Wischen im Bild und so breit wie der Bildschirm */
  .tabelle__unterzeile > td { padding: 0; }
  .tabelle__unterzeile > td > details { position: sticky; inset-inline-start: 0; inline-size: calc(100vw - 2 * var(--space-5) - 2px); }
}
/* Keine doppelte Linie direkt unter dem Kartenkopf oder unter Filter- und Eingabezeilen */
.karte__kopf + :is(.zeile, .notiz, .notiz-neu, .ereignis, .beitrag, .rechtegruppe, .auswahl, .preiszeile, .zusicherung, .korrespondenz-neu),
.karte__kopf + details > summary, .karte__kopf + form > .auswahl:nth-child(1 of :not(input[type=hidden])),
.filterleiste + .ereignis, .aufgabe-neu + .zeile, .aufgabe-neu + * > .zeile:first-child { border-block-start: 0; }
/* Zwei Formulare untereinander in einer Karte durch eine Linie getrennt (z. B. „Fragen dazu zeigen“ und das Fallformular) */
form.felder + form.felder { border-block-start: 1px solid var(--border-subtle); }
/* Letztes einzelnes Feld eines zweispaltigen Formulars über die ganze Breite, damit seine Linie nicht nur über eine Hälfte geht */
.felder--zwei > .feld:nth-child(odd of .feld:not(.feld--breit)):nth-last-child(1 of .feld:not(.feld--breit)) { grid-column: 1 / -1; }
.felder--zwei > .feld:not(.feld--fehler):nth-child(odd of .feld:not(.feld--breit)):nth-last-child(1 of .feld:not(.feld--breit)) { background-color: var(--white); }
/* „Frist, Zuständig, Beschreibung“: Felder bündig mit den übrigen Formularen */
.aufgabe-neu__mehr { padding: 0 0 var(--space-2); }
.aufgabe-neu__mehr > summary { padding: var(--space-1) var(--space-4); }
/* Auswahlpunkt mittig neben einer Zeile mit Zahlenfeld („Befristet für [30] Tage“) */
.auswahl:has(input.kurz) input[type=radio] { margin-block-start: 8px; }
/* Erklärende erste Spalte (Datenqualität) mit Platz zum Lesen */
.tabelle--erste-breit td:first-child { min-inline-size: 22em; }
/* Zeilen mit Knöpfen rechts: Knopfgruppe nicht breiter als nötig, damit der Text Platz hat */
.zeile__ende:has(.knopf) { max-inline-size: 340px; }
@media (max-width: 700px) {
  .stammliste__zeile > input[name=bezeichnung] { order: -2; }
  .stammliste__zeile > select[name=art] { grid-column: 1 / -1; order: -1; }
  .stammliste > .stammliste__zeile:nth-child(2) { border-block-start: 0; }
}
@media (pointer: coarse) { .stammliste__zeile .knopf, .reklamation__aktionen .knopf { min-block-size: 44px; } }
/* Haken in einem zweispaltigen Formular über die ganze Breite (keine Spaltenlinie neben dem Haken) */
.felder--zwei > .auswahl { grid-column: 1 / -1; background-color: var(--white); }
/* Tabellen als Karten am Handy (U-118): jede Zeile eine Karte, jede Zelle mit der Überschrift ihrer Spalte davor.
   Die Beschriftungen setzt audaba.js (data-label, dann data-karten); ohne Skript bleibt die Tabelle wischbar.
   Je Spalte am <th>: data-karte="titel" (oben, fett, ohne Beschriftung), "ohne" (ohne Beschriftung), "aus" (nicht
   in der Karte); in kurzen Karten (tabelle--karten-kurz) zusätzlich "bild" (links daneben) und "vorn" (erste Zeile). */
@media (max-width: 600px) {
  .tabellenrahmen:has(> .tabelle--karten[data-karten]) { overflow: visible; background: none; }
  .tabelle--karten[data-karten], .tabelle--karten[data-karten] > :is(tbody, tfoot) { display: block; inline-size: 100%; }
  .tabelle--karten[data-karten] > thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabelle--karten[data-karten] > :is(tbody, tfoot) > tr { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border-subtle); }
  .tabelle--karten[data-karten] > :last-child > tr:last-child { border-block-end: 0; }
  .tabelle--karten[data-karten] > tfoot > tr { background: var(--steel-50); }
  .tabelle--karten[data-karten] > :is(tbody, tfoot) > tr > :is(td, th) {
    --etikett: 7.5rem;
    display: flow-root; padding: 3px 0 3px calc(var(--etikett) + var(--space-3)); border: 0;
    inline-size: auto; min-inline-size: 0; text-align: start; vertical-align: baseline; white-space: normal; overflow-wrap: anywhere;
    font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; color: inherit;
  }
  .tabelle--karten[data-karten] > :is(tbody, tfoot) > tr > :is(td, th)::before {
    content: attr(data-label); float: inline-start; inline-size: var(--etikett); margin-inline-start: calc(-1 * (var(--etikett) + var(--space-3)));
    padding-block-start: 2px; font-family: var(--font-text); font-size: 11px; line-height: 1.35; letter-spacing: .05em; text-transform: uppercase; color: var(--steel-700); font-weight: 700; overflow-wrap: break-word;
  }
  /* Neben Eingabefeldern steht die Beschriftung auf Höhe des Textes im Feld */
  .tabelle--karten[data-karten] > tbody > tr > td:has(> :is(input:not([type=checkbox], [type=radio], [type=hidden]), select))::before { padding-block-start: 9px; }
  .tabelle--karten[data-karten] > tfoot > tr > th { font-weight: 700; }
  .tabelle--karten[data-karten] > :is(tbody, tfoot) > tr > :is([data-label=""], [data-karte~=ohne], [data-karte~=titel]) { padding-inline-start: 0; }
  .tabelle--karten[data-karten] > :is(tbody, tfoot) > tr > :is([data-label=""], [data-karte~=ohne], [data-karte~=titel])::before { content: none; }
  .tabelle--karten[data-karten] > :is(tbody, tfoot) > tr > [data-karte~=titel] { order: -3; font-weight: 600; padding-block-end: var(--space-2); }
  .tabelle--karten[data-karten] [data-karte~=titel] :is(small, .zeile__sub, .tabelle__gedimmt) { font-weight: 400; }
  .tabelle--karten[data-karten] > :is(tbody, tfoot) > tr > :is([data-karte~=aus], :empty) { display: none; }
  /* Knöpfe einer Zeile (Wiederherstellen, Beleg, Löschen) mit Luft zu den Werten darüber */
  .tabelle--karten[data-karten] > tbody > tr > td[data-label=""]:has(> .knopf, > form.inline) { padding-block-start: var(--space-3); }
  .tabelle--karten[data-karten] td :is(input:not([type=checkbox], [type=radio]), select, textarea) { max-inline-size: 100%; }
  /* Aufgeklapptes Formular unter einer Zeile (Kosten bearbeiten) gehört zur Karte darüber */
  .tabelle--karten[data-karten] > tbody > tr:has(+ .tabelle__unterzeile) { border-block-end: 0; padding-block-end: 0; }
  .tabelle--karten[data-karten] > tbody > .tabelle__unterzeile { padding-block-start: var(--space-2); }
  .tabelle--karten[data-karten] .tabelle__unterzeile > td > details { position: static; inline-size: auto; }
  .tabelle--karten[data-karten] .tabelle__zeile--aktiv { background: var(--navy-50); }
  /* Kurze Karten (Fahrzeugliste): Bild links, Werte hintereinander, erste Zeile mit Preis und Stand */
  .tabelle--karten-kurz[data-karten] > tbody > tr { position: relative; flex-flow: row wrap; align-items: baseline; column-gap: var(--space-4); row-gap: 2px; padding-inline-start: calc(var(--space-4) + 64px + var(--space-4)); min-block-size: calc(48px + 2 * var(--space-3) + 2px); }
  .tabelle--karten-kurz[data-karten] > tbody > tr::before { content: ""; order: -1; flex-basis: 100%; }
  .tabelle--karten-kurz[data-karten] > tbody > tr > td { display: block; padding: 0; color: var(--text-muted); }
  .tabelle--karten-kurz[data-karten] > tbody > tr > td::before { content: attr(data-label) "\00a0"; float: none; inline-size: auto; margin: 0; padding: 0; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--text-muted); }
  .tabelle--karten-kurz[data-karten] > tbody > tr > td[data-karte~=bild]::before { content: none; }
  .tabelle--karten-kurz[data-karten] > tbody > tr > td[data-karte~=titel] { flex-basis: 100%; padding-block-end: 2px; color: inherit; }
  .tabelle--karten-kurz[data-karten] > tbody > tr > td[data-karte~=vorn] { order: -2; color: inherit; }
  .tabelle--karten-kurz[data-karten] > tbody > tr > td br { display: none; }
  .tabelle--karten-kurz[data-karten] > tbody > tr > td br + * { margin-inline-start: var(--space-2); }
  .tabelle--karten-kurz[data-karten] > tbody > tr > td[data-karte~=bild] { position: absolute; inset-inline-start: var(--space-4); inset-block-start: var(--space-3); }
  .tabelle--karten-kurz[data-karten] [data-karte~=bild] .vorschaubild { inline-size: 64px; block-size: 48px; }
}

/* Arabisch: Spiegelung der Richtungszeichen und Schrift (FA-I18N-001, U-123) */
[dir=rtl] .kurzmeldung { transform: translateX(50%); }
[dir=rtl] .tabelle :where(select:not([multiple])) { background-position: left 10px center; }
[dir=rtl] :is(.fa-angle-right, .fa-angle-left, .fa-angle-double-right, .fa-angle-double-left, .fa-chevron-right, .fa-chevron-left,
  .fa-arrow-right, .fa-arrow-left, .fa-long-arrow-right, .fa-long-arrow-left, .fa-caret-right, .fa-caret-left,
  .fa-arrow-circle-right, .fa-arrow-circle-left, .fa-sign-in, .fa-sign-out, .fa-reply, .fa-share, .fa-external-link):not(.bildvorschau__blaettern .fa) { transform: scaleX(-1); }
[dir=rtl] :is(.ereignis details, .aufgabe-neu__mehr, .ausklapp, details.karte__inhalt) > summary::before { content: "\f104"; }
[dir=rtl] :is(.ereignis details, .aufgabe-neu__mehr, .ausklapp, details.karte__inhalt)[open] > summary::before { transform: rotate(-90deg); }
/* Arabische Schrift (Noto Sans Arabic, in marke.css unter „Open Sans“ eingebunden) braucht mehr Zeilenhöhe */
:lang(ar) body { line-height: 1.65; }
/* Fahrgestellnummern, Kennzeichen, Beträge bleiben links nach rechts (FA-I18N-002) */
[dir=rtl] :is(.kopierbar, input[type=email], input[type=tel], input[inputmode=numeric], input[inputmode=decimal]) { direction: ltr; unicode-bidi: isolate; }
[dir=rtl] input:is([type=email], [type=tel], [inputmode=numeric], [inputmode=decimal]) { text-align: end; }
/* Zahlen, Beträge, Leistung in Arabisch in Schreibreihenfolge lassen („110 kW (150 PS)“, „12,990.00 €“); arabischer Text darin läuft selbst rechts nach links */
[dir=rtl] .mono { direction: ltr; unicode-bidi: plaintext; }
[dir=rtl] .feldzeile__anzeige { unicode-bidi: plaintext; }