/* 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; } }

/* ---------- 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; }
.schmal--oben { padding-block-start: var(--space-8); }

/* ---------- 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: 148px; padding: var(--space-5); border-block-end: 1px solid rgba(255,255,255,.08);
}
.marke__logo {
  inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--steel-300); color: var(--navy-900);
  display: grid; place-items: center; font-size: 9px; font-weight: 700; flex: none; overflow: hidden;
}
.marke__logo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.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: 148px; padding: var(--space-6) 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; }
.felder > .feld:first-child, .felder--zwei > .feld:nth-child(2) { border-block-start: 0; }
.felder--zwei > .feld:nth-child(even) { border-inline-start: 1px solid var(--border-subtle); }
.feld__beschriftung { display: block; font-size: 12.5px; color: var(--steel-700); margin-block-end: 2px; }
.feld__pflicht { color: var(--amber-700); }
.feld input[type=text], .feld input[type=password], .feld input[type=email], .feld input[type=tel], .feld input[type=number],
.feld input[type=date], .feld select, .feld textarea {
  inline-size: 100%; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text-strong);
  padding: 2px 0; outline: none;
}
.feld textarea { min-block-size: 80px; resize: vertical; }
.feld:focus-within { background: var(--navy-50); box-shadow: inset 3px 0 0 var(--navy-600); }
[dir=rtl] .feld:focus-within { box-shadow: inset -3px 0 0 var(--navy-600); }
.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__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:first-child { 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; 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 { font: inherit; padding: 6px 8px; border: 1px solid var(--border-default); border-radius: 2px; background: var(--white); min-inline-size: 140px; }
.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 > .feld:nth-child(even) { border-inline-start: 0; }
  .felder--zwei > .feld:nth-child(2) { 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: inherit; font-size: 12.5px; padding: 2px 4px; border: 1px solid var(--border-default); border-radius: 2px; background: var(--white); }
.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); }
.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); }
.feldgruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-5); align-items: start; }
.feldgruppe { margin: 0; }
.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); }
.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; inline-size: 100%; border: 1px solid transparent; background: transparent; font: inherit; font-size: 14.5px;
  color: var(--text-strong); padding: 2px 4px; margin-inline-start: -5px; border-radius: 2px;
}
.feldzeile input:hover, .feldzeile select:hover, .feldzeile textarea:hover { border-color: var(--border-subtle); background: var(--white); }
.feldzeile input:focus, .feldzeile select:focus, .feldzeile textarea:focus { border-color: var(--navy-600); background: 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); }
.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; }
.auswahl--kompakt { padding: var(--space-2) 0; border: 0; }
.fenster > summary { list-style: none; margin: var(--space-4); }
.fenster > summary::-webkit-details-marker { display: none; }
.fenster[open] .fenster__inhalt { position: fixed; inset: 5vh 50% auto auto; transform: translateX(50%); inline-size: min(960px, 94vw); max-block-size: 90vh; overflow: auto; background: var(--white); z-index: 40; box-shadow: var(--shadow-xl); border: 1px solid var(--border-default); }
[dir=rtl] .fenster[open] .fenster__inhalt { transform: translateX(-50%); }
.fenster[open]::before { content: ""; position: fixed; inset: 0; background: var(--surface-overlay); z-index: 30; }
.fenster__kopf { display: flex; flex-direction: column; padding: var(--space-5); border-block-end: 1px solid var(--border-subtle); position: sticky; inset-block-start: 0; background: var(--white); }
.fenster__fuss { padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--border-subtle); position: sticky; inset-block-end: 0; background: var(--white); display: flex; justify-content: center; }
.knopf--rand { margin: var(--space-4); }
.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; font: inherit; border: 1px solid var(--border-default); padding: var(--space-3); border-radius: 2px; }
.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); padding: 0 var(--space-4); min-block-size: 46px; }
.suchleiste__feld input { border: 0; font: inherit; font-size: 15px; flex: 1; outline: none; background: transparent; }
.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: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; min-block-size: 46px; padding: 0 var(--space-4); border: 1px solid var(--border-default); background: var(--white); }
.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--bestand td { vertical-align: middle; }
@media (max-width: 1100px) { .akte { grid-template-columns: 1fr; } .akte__seite { position: static; } }
@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-1); 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-1); 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: var(--space-3) var(--space-4); }
.radtabelle input { inline-size: 6em; }
.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; }
.datum-knopf { border: 0; background: transparent; color: var(--steel-600); padding: 0 var(--space-3); cursor: pointer; font-size: 15px; }
.datum-knopf:hover, .datum-knopf:focus-visible { color: var(--navy-700); }
.datum-kalender { position: absolute; inset-inline-end: 0; inset-block-end: 0; inline-size: 1px; block-size: 1px; 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-1); 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: var(--space-3) var(--space-4); }
.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; }
.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-1); justify-content: flex-end; max-inline-size: 360px; }
.angebot__aktionen input { inline-size: 150px; font-size: 12px; }
@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%; }
.reklamation { grid-template-columns: auto 1fr auto; align-items: start; }
.reklamation__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-1); 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; }
.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: flex; flex-wrap: wrap; gap: 4px; }
  .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-1); justify-content: flex-end; max-inline-size: 340px; }
.werkstattauftrag__aktionen form { display: flex; flex-wrap: wrap; gap: var(--space-1); }
@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-1); 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); }