/* AURA Console · Petrol hell. Verbindlicher Vertrag: .tastemaker/style-lock.md.
   Gemeinsame Gestaltung für Shell, CRUD, Formulare und Anmeldung; fachliche Leuchtbilder
   und Inventar-Anordnung stehen in backoffice.css. Keine externen Laufzeitabhängigkeiten. */
:root {
  color-scheme: light;
  --aura-accent: #0e7490;
  --aura-on-accent: #ffffff;
  --aura-accent-weak: #e9f4f7;
  --aura-accent-line: #85b5c3;
  --aura-bg: #f3f6f7;
  --aura-surface: #ffffff;
  --aura-raised: #ffffff;
  --aura-subtle: #f8fafb;
  --aura-hover: #edf5f7;
  --aura-border: #dfe7eb;
  --aura-border-strong: #b8cbd3;
  --aura-text: #172b36;
  --aura-muted: #52636b;
  --aura-radius: 12px;
  --aura-radius-sm: 7px;
  --aura-fast: 120ms;
  --aura-ease: cubic-bezier(.2, 0, 0, 1);
  --aura-1: 4px; --aura-2: 8px; --aura-3: 12px; --aura-4: 16px;
  --aura-5: 24px; --aura-6: 32px; --aura-7: 48px;

  /* EasyAdmins eigene Komponenten lesen dieselben Rollen, auch Filter und Overlays. */
  --ea-primary: var(--aura-accent);
  --ea-primary-text: var(--aura-accent);
  --ea-primary-soft: var(--aura-accent-weak);
  --ea-primary-strong: #0b6078;
  --color-primary: var(--aura-accent);
  --text-on-primary: var(--aura-on-accent);
  --text-color: var(--aura-text);
  --text-muted: var(--aura-muted);
  --text-color-rgb: 23, 43, 54;
  --body-bg: var(--aura-bg);
  --content-bg: var(--aura-bg);
  --sidebar-bg: var(--aura-surface);
  --sidebar-border-color: var(--aura-border);
  --sidebar-menu-color: var(--aura-muted);
  --sidebar-menu-active-item-color: var(--aura-accent);
  --sidebar-menu-active-item-bg: var(--aura-accent-weak);
  --sidebar-item-hover-bg: var(--aura-hover);
  --sidebar-menu-icon-color: var(--aura-muted);
  --sidebar-logo-color: var(--aura-text);
  --sidebar-menu-header-color: var(--aura-muted);
  --content-top-border-color: var(--aura-border);
  --responsive-header-bg: var(--aura-surface);
  --content-section-border-color: var(--aura-border);
  --content-search-input-bg: var(--aura-surface);
  --link-color: var(--aura-accent);
  --link-hover-color: #0b6078;
  --form-control-bg: var(--aura-raised);
  --form-input-border-color: var(--aura-border-strong);
  --form-input-text-color: var(--aura-text);
  --form-label-color: var(--aura-muted);
  --form-input-shadow: none;
  --form-input-hover-shadow: none;
  --form-input-hover-border-color: var(--aura-accent);
  --table-thead-color: var(--aura-muted);
  --table-cell-border-color: var(--aura-border);
  --table-thead-marker-color: var(--aura-accent);
  --table-thead-sorted-marker-color: var(--aura-accent);
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 14px;

  /* Zustandstoene. Sie stehen neben Petrol und nicht darin: Petrol heisst "hier kann man
     etwas tun", diese fuenf heissen "so steht es". Jeder Ton hat eine Flaeche und eine
     Schrift, die auf ihr 4,5:1 erreicht — ein Abzeichen ist Text, kein Farbfeld. */
  --tone-ok-bg: #e6f4ec;        --tone-ok-fg: #15803d;
  --tone-info-bg: #e5f2f6;      --tone-info-fg: #0e7490;
  --tone-neutral-bg: #eceff1;   --tone-neutral-fg: #4b5a62;
  --tone-warn-bg: #fdf1dd;      --tone-warn-fg: #96620a;
  --tone-bad-bg: #fbeaea;       --tone-bad-fg: #b3261e;
}
/* Schrift und Grundfarben stehen am `body` und nicht nur an `.ea`: EasyAdmin setzt sie
   sonst selbst, aber die Fehlerseite rendert ohne EasyAdmin-Layout (es braeuchte einen
   AdminContext, der im Fehlerfall gerade fehlt). Ohne diese Regel stand sie in der
   Serifen-Vorgabe des Browsers. Die Werte sind dieselben, die EasyAdmin setzen wuerde. */
body { font-family: var(--font-family-base); font-size: var(--font-size-base); color: var(--aura-text); background: var(--aura-bg); margin: 0; -webkit-font-smoothing: antialiased; }
.ea { background: var(--aura-bg); color: var(--aura-text); }
.aura-errorpage a { color: var(--aura-accent); }
.aura-errorpage .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid transparent; }
.ea-sidebar { background: var(--aura-surface); border-right: 1px solid var(--aura-border); }
.ea-sidebar-group-label-text { font-size: 12px; font-weight: 600; letter-spacing: .045em; color: var(--aura-muted); }
.ea-sidebar-group + .ea-sidebar-group { margin-top: 20px; }
.ea-sidebar-item-link { min-height: 42px; border-radius: var(--aura-radius-sm); padding: 10px 12px; transition: background-color var(--aura-fast), color var(--aura-fast); }
.ea-sidebar-item-link:hover { background: var(--aura-hover); }
.ea-sidebar-item.is-active > .ea-sidebar-item-link { background: var(--aura-accent-weak); color: var(--aura-accent); box-shadow: inset 3px 0 var(--aura-accent); font-weight: 600; }
.ea-sidebar-item.is-active .ea-sidebar-item-icon { color: var(--aura-accent); }
.ea-sidebar-item-icon { color: var(--aura-muted); }
.aura-wordmark { font-size: 27px; font-weight: 650; letter-spacing: .055em; color: var(--aura-text); white-space: nowrap; }
.aura-userbox { display: flex; align-items: center; gap: 11px; padding: 14px 12px; border-top: 1px solid var(--aura-border); background: var(--aura-surface); min-width: 0; }
.aura-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--aura-accent-weak); color: var(--aura-accent); font-size: 12px; font-weight: 650; letter-spacing: .03em; }
.aura-userbox-text { display: grid; min-width: 0; line-height: 1.35; }
.aura-userbox-text strong { font-size: 13px; font-weight: 550; color: var(--aura-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura-userbox-text small { font-size: 12px; color: var(--aura-muted); }
.aura-wordmark small { font-size: 12px; font-weight: 400; letter-spacing: 0; margin-left: 5px; color: var(--aura-muted); }
.content-top { background: var(--aura-surface); border-bottom: 1px solid var(--aura-border); padding: 0; margin-bottom: 0; border-radius: 0; }
/* Kopfleiste: links fuer wen, rechts wo. Beides steht auf jeder Seite an derselben Stelle,
   damit der Blick es nicht suchen muss. */
.aura-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%; padding: 18px 24px; }
.aura-topbar-tenant { display: inline-flex; align-items: center; gap: 9px; font-weight: 550; color: var(--aura-text); }
.aura-topbar-tenant .aura-icon { width: 18px; height: 18px; color: var(--aura-muted); }
.aura-breadcrumb { display: inline-flex; align-items: center; gap: 10px; color: var(--aura-muted); font-size: 13px; min-width: 0; }
.aura-breadcrumb [aria-current] { color: var(--aura-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura-breadcrumb-sep { color: var(--aura-border-strong); }
/* Augenbraue, Titel, Kontextzeile: drei Zeilen, eine Aussage — welcher Bereich, welche
   Seite, welcher Stand. Die Aktionen bleiben rechts auf Hoehe des Titels. */
.aura-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 650; letter-spacing: .085em; text-transform: uppercase; color: var(--aura-accent); }
.aura-subtitle { margin: 8px 0 0; color: var(--aura-muted); max-width: 65ch; }
.content-header { align-items: flex-start; }
.content-wrapper { padding-top: 28px; }
/* Ein Grid-Item bekommt von sich aus `min-width: auto` und schrumpft deshalb nie unter die
   Mindestbreite seines Inhalts. Eine breite Datagrid-Tabelle drueckt so die ganze Spalte
   ueber den Viewport hinaus: die SEITE scrollt waagerecht statt der Tabelle. Beide Schalen
   der EasyAdmin-Shell sind Grids, also brauchen beide Kinder die Erlaubnis zu schrumpfen —
   erst dann greift `overflow-x` auf `.aura-table-surface`. */
.wrapper > section.main-content,
.content-wrapper > * { min-width: 0; }
.content-header { margin-bottom: 24px; gap: 16px; }
.content-header-title h1 { font-size: 30px; line-height: 1.2; font-weight: 650; letter-spacing: -.035em; color: var(--aura-text); }
.content-header-title { min-width: 0; }
.content .page-actions { gap: 8px; flex-wrap: wrap; }
.aura-intro { color: var(--aura-muted); margin: 0 0 20px; max-width: 65ch; }
.aura-section-heading { display: flex; align-items: center; gap: 10px; }
.aura-section-heading .aura-icon { color: var(--aura-accent); }
.aura-icon { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; mask: var(--aura-icon) center / contain no-repeat; vertical-align: -.2em; }
.aura-icon-tile { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--aura-accent-weak); color: var(--aura-accent); flex: none; }
/* Lokale Linien-Icons ersetzen nur die bekannten Navigationssymbole. */
.ea-sidebar-item-icon:has(i[class*="fa-"]) { width: 19px; height: 19px; background: currentColor; mask: var(--aura-icon) center / contain no-repeat; }
.ea-sidebar-item-icon:has(i[class*="fa-"]) i { display: none; }
.aura-panel, .aura-table-surface { background: var(--aura-surface); border: 1px solid var(--aura-border); border-radius: var(--aura-radius); }
.aura-panel { padding: 24px; }
.aura-panel h2 { font-size: 16px; margin: 0 0 18px; font-weight: 650; }
/* `position: relative` ist hier kein Stil, sondern eine Verankerung: EasyAdmin legt in den
   Tabellenkopf ein absolut positioniertes `.visually-hidden` („Aktionen"). Ohne einen
   positionierten Vorfahren haengt es am Dokument statt an dieser Flaeche und schiebt es
   waagerecht ueber den Viewport hinaus. */
.aura-table-surface { overflow-x: auto; position: relative; }
.datagrid { margin-bottom: 0; background: var(--aura-surface); font-size: 14px; }
.datagrid thead th { background: var(--aura-subtle); color: var(--aura-muted); font-size: 13px; font-weight: 550; letter-spacing: 0; text-transform: none; padding: 14px 16px; border-bottom: 1px solid var(--aura-border); }
.datagrid tbody td { color: var(--aura-text); padding: 16px; border-top: 1px solid var(--aura-border); font-variant-numeric: tabular-nums; }
.datagrid tbody tr { transition: background-color var(--aura-fast); }
.datagrid tbody tr:hover, .datagrid tbody tr:hover td { background: var(--aura-hover); }
.datagrid td.field-datetime, .datagrid td.field-id { color: var(--aura-muted); }
.datagrid tbody .no-results td, .datagrid tbody .no-results { padding: 44px 20px; color: var(--aura-muted); text-align: center; background: transparent; }
/* EasyAdmin polstert eine leere Liste mit vierzehn leeren Zeilen als Skelett. Mit den
   Trennlinien dieser Tabelle liest sich das wie ein abgebrochener Ladevorgang — genau die
   Verwechslung, die der Vertrag fuer fehlgeschlagene Abrufe ausschliesst. Die Aussage
   steht im Text, nicht in angedeuteten Datensaetzen. */
.datagrid-empty .empty-row { display: none; }
.datagrid-empty { border-radius: var(--aura-radius); }
.content-panel-footer { padding: 16px 4px; }
/* Nur die Form der Badges vereinheitlichen; ihre semantischen Farben bleiben erhalten. */
.badge { border-radius: 5px; padding: 4px 8px; font-size: 12px; font-weight: 550; letter-spacing: 0; }
.btn { min-height: 38px; padding: 8px 13px; border-radius: var(--aura-radius-sm); font-weight: 550; transition: background-color var(--aura-fast), border-color var(--aura-fast), color var(--aura-fast); box-shadow: none; }
.btn-primary, .btn-primary:not(:disabled) { background: var(--aura-accent); border-color: var(--aura-accent); color: var(--aura-on-accent); }
.btn-primary:hover:not(:disabled), .btn-primary:active:not(:disabled) { background: #0b6078; border-color: #0b6078; color: white; }
.btn-secondary { background: var(--aura-raised); border-color: var(--aura-border-strong); color: var(--aura-text); }
/* Rot als Kontur und nicht als Flaeche: ein flaechig roter Knopf zieht den Blick auf sich
   und wird dadurch haeufiger gedrueckt — genau die falsche Richtung fuer den Eingriff, der
   am meisten kostet. Die Kontur macht ihn erkennbar, ohne ihn anzubieten. */
.btn-danger-outline { background: var(--aura-surface); border-color: #e1b4b4; color: var(--tone-bad-fg); }
.btn-danger-outline:hover:not(:disabled) { background: var(--tone-bad-bg); border-color: var(--tone-bad-fg); color: var(--tone-bad-fg); }
.btn-secondary:hover { background: var(--aura-hover); border-color: var(--aura-accent-line); }
.content a:not(.btn) { color: var(--aura-accent); }
.ea :is(a, button, input, select, textarea, .btn):focus-visible { outline: 2px solid var(--aura-accent); outline-offset: 3px; }
.ea :is(.form-control, .form-select, .ts-control) { background-color: var(--aura-raised); color: var(--aura-text); border: 1px solid var(--aura-border-strong); border-radius: var(--aura-radius-sm); box-shadow: none; min-height: 40px; font-size: 14px; }
.ea :is(.form-control, .form-select):disabled { background: var(--aura-subtle); color: var(--aura-muted); }
.content-search input { border-radius: var(--aura-radius-sm); background: var(--aura-subtle); border: 1px solid var(--aura-border); }
.form-group { margin-bottom: 20px; }
.form-control-label, .form-label { color: var(--aura-text); font-size: 14px; font-weight: 550; }
.form-text, .form-help { color: var(--aura-muted); font-size: 12px; }
/* Jede Feldgruppe ist eine eigene Flaeche — dasselbe Panel wie ueberall sonst. Das
   Formular selbst traegt deshalb keinen Rahmen mehr, sonst waere es ein Kasten im Kasten. */
.ea-new .content-body > form, .ea-edit .content-body > form { display: grid; gap: 20px; background: transparent; padding: 0; border: 0; }
.ea-new .form-fieldset, .ea-edit .form-fieldset { background: var(--aura-surface); border: 1px solid var(--aura-border); border-radius: var(--aura-radius); padding: 22px 24px; margin-bottom: 0; }
/* Eine Feldgruppe, deren Felder alle `hideOnForm` sind (etwa "Verwaltung" mit angelegt
   und geaendert), stuende sonst als leere weisse Flaeche mit Ueberschrift im Formular —
   sie sieht aus wie ein Ladefehler. */
.ea-new .form-fieldset:not(:has(.form-group)), .ea-edit .form-fieldset:not(:has(.form-group)) { display: none; }
.ea-new .form-fieldset-body, .ea-edit .form-fieldset-body { padding: 0; }
/* Fussleiste: Abbrechen und Speichern unten rechts, in einer eigenen Flaeche. */
.aura-form-foot { display: flex; justify-content: flex-end; align-items: center; gap: 9px; flex-wrap: wrap; background: var(--aura-surface); border: 1px solid var(--aura-border); border-radius: var(--aura-radius); padding: 16px 24px; margin-top: 20px; }
/* EasyAdmin haelt den Abstand zum Feldblock mit `padding-bottom` am Kopf — unsichtbar,
   solange der Kopf keine Flaeche hat. Mit Flaeche wuerde daraus ein grauer Streifen unter
   dem Titel, darum traegt hier `margin-bottom` den Abstand und das Padding umschliesst den
   Titel. */
/* Der Gruppenkopf ist der Titel seiner Flaeche und traegt deshalb keine eigene: eine
   graue Leiste in einem weissen Panel waere ein Kasten im Kasten. EasyAdmin haelt den
   Abstand zum Feldblock mit `padding-bottom` am Kopf — unsichtbar ohne Flaeche, hier
   trotzdem auf `margin` umgestellt, damit Titel und Felder denselben Rhythmus haben wie
   auf jeder anderen Flaeche der Console. */
.form-fieldset-header { background: none; align-items: center; padding: 0; margin: 0 0 18px; }
.form-fieldset-title { font-size: 16px; font-weight: 650; color: var(--aura-text); }
.form-fieldset-title .fa, .form-fieldset-title i { color: var(--aura-accent); }
/* Die letzte Feldzeile einer Gruppe braucht keinen Abstand nach unten — das Panel hat
   seinen eigenen. */
.form-fieldset-body > .form-group:last-child, .form-fieldset-body > .row:last-child .form-group { margin-bottom: 0; }
.ea-detail .aura-panel { max-width: 1100px; }
/* EasyAdmin legt jede Feldzeile in ein Bootstrap-`.row` mit `margin: 0 -12px`; den
   Ausgleich traegt sonst das `padding-left` der Spalte. Die Zeile ist hier ein eigenes
   Grid ohne dieses Padding — ohne Neutralisierung ragt sie 12 px nach links unter die
   Clip-Kante von `.form-fieldset-body` (`overflow: clip visible`) und die Beschriftungen
   verlieren ihren ersten Buchstaben. */
.ea-detail .form-fieldset-body > .row { margin-left: 0; margin-right: 0; }
.ea-detail .field-group { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr); gap: 20px; padding: 15px 0; margin: 0; border-bottom: 1px solid var(--aura-border); }
.ea-detail .field-group:last-child { border-bottom: 0; }
.ea-detail .field-group .field-label, .ea-detail .field-group.field-boolean .field-label { inline-size: auto; min-inline-size: 0; text-align: left; margin: 0; color: var(--aura-muted); font-size: 14px; }
.ea-detail .field-group .field-value, .ea-detail .field-group.field-boolean .field-value { min-inline-size: 0; inline-size: auto; text-align: left; overflow-wrap: anywhere; }
.ea-detail .field-value pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--aura-subtle); padding: 16px; border-radius: 7px; font-size: 13px; }
.modal-content { border: 1px solid var(--aura-border); border-radius: 14px; background: var(--aura-surface); }
/* Native Dialoge führen den Tastaturfokus; Hintergrund bleibt außerhalb der Tab-Reihenfolge. */
.aura-action-dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--aura-border); border-radius: 14px; background: var(--aura-surface); color: var(--aura-text); box-shadow: 0 18px 60px #172b3626; }
.aura-action-dialog::backdrop { background: #172b3659; }
.aura-dialog-body { padding: 26px; }
.aura-dialog-body h2 { font-size: 21px; margin: 16px 0 12px; font-weight: 650; }
.aura-dialog-body p { color: var(--aura-muted); margin: 0 0 14px; }
.aura-dialog-context { color: var(--aura-text); font-weight: 600; overflow-wrap: anywhere; }
/* Das Anlass-Feld im Dialog. Es traegt keinen Pflicht-Stern und keine Fehlermeldung — es
   ist freiwillig, und ein leeres Feld ist hier eine gueltige Antwort. */
.aura-dialog-note { display: grid; gap: 6px; margin: 4px 0 2px; }
.aura-dialog-note > span { font-size: 14px; font-weight: 550; color: var(--aura-text); }
.aura-dialog-note textarea { width: 100%; resize: vertical; min-height: 78px; padding: 10px 12px; font: inherit; color: var(--aura-text); background: var(--aura-raised); border: 1px solid var(--aura-border-strong); border-radius: var(--aura-radius-sm); }
.aura-dialog-note textarea:focus-visible { outline: 2px solid var(--aura-accent); outline-offset: 2px; }
.aura-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 16px 24px; background: var(--aura-subtle); border-top: 1px solid var(--aura-border); }
/* Fehlerseite: dieselben Flaechen und Toene, aber ohne Shell — siehe die Begruendung im
   Template. Sie steht mittig, weil es hier nichts zu vergleichen gibt. */
.aura-errorpage { display: grid; place-items: center; align-content: center; gap: 24px; min-height: 100dvh; padding: 32px; background: var(--aura-bg); }
.aura-errorpage .aura-panel { width: min(520px, 100%); padding: 32px; text-align: center; }
.aura-errorpage h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.025em; font-weight: 650; margin: 0 0 12px; color: var(--aura-text); }
.aura-errorpage p { color: var(--aura-muted); margin: 0 0 22px; }
.aura-errorpage .aura-eyebrow { margin-bottom: 10px; }
.aura-errorpage .btn { margin: 0; }

/* Anmeldung: derselbe Kontrast und dieselben Felder, mit ruhiger Markenfläche. */
.page-login { display: grid; place-items: center; min-height: 100dvh; height: auto; padding: 32px; }
.aura-login { display: grid; grid-template-columns: 1fr 1fr; width: min(940px, 100%); min-height: 570px; background: var(--aura-surface); border: 1px solid var(--aura-border); border-radius: 18px; overflow: hidden; }
.aura-login-brand { padding: 40px; background: var(--aura-accent-weak); display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.aura-login-brand h2 { font-size: 36px; line-height: 1.18; letter-spacing: -.04em; margin: 0 0 20px; font-weight: 650; }
.aura-login-brand p { color: var(--aura-muted); margin: 0; }
.aura-login-features { display: grid; gap: 16px; margin-top: 28px; }
.aura-login-features span { display: flex; gap: 12px; align-items: center; color: var(--aura-accent); }
.aura-login-form { padding: 48px 40px; align-self: center; }
.aura-login-form h1 { font-size: 27px; letter-spacing: -.025em; font-weight: 650; margin: 0 0 10px; }
.aura-login-form > p { color: var(--aura-muted); margin-bottom: 26px; }
.aura-login-form .btn { width: 100%; }
.aura-login-help { font-size: 12px; color: var(--aura-muted); margin-top: 22px; }
@media (max-width: 767px) {
  .content-header { align-items: flex-start; }
  .content-header-title h1 { font-size: 26px; }
  .content-top { padding: 12px; }
  .content-wrapper { padding-top: 20px; }
  .content .page-actions { justify-content: flex-start; }
  .aura-panel, .ea-new .form-fieldset, .ea-edit .form-fieldset, .aura-form-foot { padding: 18px; }
  .aura-form-foot > * { flex: 1 1 auto; justify-content: center; }
  .ea-detail .field-group { grid-template-columns: 1fr; gap: 6px; }
  /* Schmal stellt EasyAdmin jede Tabellenzeile als Karte dar und setzt den Spaltennamen
     als absolutes `::before` in eine 35-%-Spalte, ausgeglichen durch `padding-inline-start`
     an der Zelle. Die gemeinsame Zellenpolsterung der Console loescht diesen Ausgleich, und
     Wert und Beschriftung lagen uebereinander. Statt den Prozentwert zurueckzuholen steht
     die Beschriftung hier ueber ihrem Wert — dieselbe Stapelung wie in der Detailansicht,
     und die volle Breite bleibt dem Wert (eine UUID braucht sie). */
  .ea table.datagrid tbody td { padding: 12px 16px; }
  /* EasyAdmin macht schmal jede Zelle zum Block — das schlaegt `hidden`, und die in der
     schlichten Lesart ausgeblendeten technischen Spalten haetten als leere Kaesten
     zwischen den gefuellten gestanden. */
  .ea table.datagrid tbody td[hidden] { display: none; }
  .ea table.datagrid tbody td::before { position: static; inline-size: auto; padding: 0; display: block; margin-bottom: 3px; font-size: 12px; text-overflow: clip; }
  .ea :is(.btn, .fleet-view-toggle, .inv-btn) { min-height: 44px; }
  .ea :is(input, select, textarea) { font-size: 16px; }
  .page-login { padding: 16px; }
  .aura-login { grid-template-columns: 1fr; }
  .aura-login-brand { padding: 26px; gap: 26px; }
  .aura-login-brand h2 { font-size: 28px; }
  .aura-login-features { display: none; }
  .aura-login-form { padding: 30px 26px; }
}
/* ---- Seitenwechsel ----------------------------------------------------------------
   Die Console ist eine Anwendung mit vielen Seiten, und jeder Klick war bisher ein
   Weissblitz: Navigation und Kopfleiste verschwanden und kamen als dieselben Pixel
   zurueck. Die native View-Transitions-API blendet stattdessen nur das um, was sich
   wirklich aendert — kein JavaScript, kein Build, kein Framework.

   Navigation, Kopfleiste und Konto tragen einen eigenen Namen und sind damit fuer den
   Browser DASSELBE Element auf beiden Seiten: sie bleiben stehen, waehrend der Inhalt
   wechselt. Genau das unterscheidet einen Uebergang von einer Ueberblendung der ganzen
   Seite. Browser ohne diese API laden weiterhin hart um — nichts geht verloren. */
@view-transition { navigation: auto; }

.ea-sidebar { view-transition-name: aura-nav; }
.content-top { view-transition-name: aura-topbar; }
.aura-userbox { view-transition-name: aura-account; }

/* Der Inhalt kommt von unten herein und ist kuerzer draussen als drinnen: ein Wechsel
   soll sich anfuehlen wie eine Antwort, nicht wie eine Animation. */
::view-transition-old(root) { animation: aura-leave 90ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: aura-enter 170ms cubic-bezier(0, 0, .2, 1) both; }

@keyframes aura-leave { to { opacity: 0; } }
@keyframes aura-enter { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .ea-sidebar-item-link, .datagrid tbody tr, .btn { transition: none; }
  /* Kein Uebergang statt eines schnelleren: wer Bewegung abbestellt hat, hat sie
     abbestellt, und ein Seitenwechsel ohne Uebergang ist vollstaendig bedienbar. */
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* AURA-Linienfamilie; SVG-Masken übernehmen die Textfarbe des Kontexts. */
.aura-icon-overview,
.ea-sidebar-item-icon:has(.fa-house) { --aura-icon: url("../icons/aura/overview.svg"); }
.aura-icon-store,
.ea-sidebar-item-icon:has(.fa-store) { --aura-icon: url("../icons/aura/store.svg"); }
.aura-icon-package,
.ea-sidebar-item-icon:has(.fa-boxes-stacked) { --aura-icon: url("../icons/aura/package.svg"); }
.aura-icon-door,
.ea-sidebar-item-icon:has(.fa-door-open) { --aura-icon: url("../icons/aura/door.svg"); }
.aura-icon-sale,
.ea-sidebar-item-icon:has(.fa-cash-register) { --aura-icon: url("../icons/aura/sale.svg"); }
.aura-icon-building,
.ea-sidebar-item-icon:has(.fa-building) { --aura-icon: url("../icons/aura/building.svg"); }
.aura-icon-wrench,
.ea-sidebar-item-icon:has(.fa-wrench) { --aura-icon: url("../icons/aura/wrench.svg"); }
.aura-icon-shield,
.ea-sidebar-item-icon:has(.fa-user-shield) { --aura-icon: url("../icons/aura/shield.svg"); }
.aura-icon-list,
.ea-sidebar-item-icon:has(.fa-clipboard-list),
.ea-sidebar-item-icon:has(.fa-list) { --aura-icon: url("../icons/aura/list.svg"); }
.aura-icon-command,
.ea-sidebar-item-icon:has(.fa-terminal) { --aura-icon: url("../icons/aura/command.svg"); }
.aura-icon-device,
.ea-sidebar-item-icon:has(.fa-microchip) { --aura-icon: url("../icons/aura/device.svg"); }
.aura-icon-logout,
.ea-sidebar-item-icon:has(.fa-sign-out-alt) { --aura-icon: url("../icons/aura/logout.svg"); }
.aura-icon-clock { --aura-icon: url("../icons/aura/clock.svg"); }
.aura-icon-warning { --aura-icon: url("../icons/aura/warning.svg"); }
.aura-icon-info { --aura-icon: url("../icons/aura/info.svg"); }
.aura-icon-link { --aura-icon: url("../icons/aura/link.svg"); }
.aura-icon-value { --aura-icon: url("../icons/aura/value.svg"); }

/* ---- AURA-Komponenten (templates/components/Aura) --------------------------------
   Die Formen, die auf mehr als einer Seite vorkommen, stehen hier genau einmal. Wer eine
   neue Seite baut, setzt sie zusammen und erfindet keine zweite Variante derselben Sache. */

/* Abzeichen: Punkt und Wort. Die Form ist immer gleich, nur der Ton wechselt. */
/* Der Gedankenstrich fuer ein leeres Feld — leise, aber vorhanden: eine leere Zelle
   sieht aus wie ein Darstellungsfehler, ein Strich sagt "hier steht nichts". */
.aura-none { color: var(--aura-border-strong); }
.aura-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 550; line-height: 1.45; white-space: nowrap; }
.aura-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.aura-badge-ok { background: var(--tone-ok-bg); color: var(--tone-ok-fg); }
.aura-badge-info { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.aura-badge-neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
.aura-badge-warn { background: var(--tone-warn-bg); color: var(--tone-warn-fg); }
.aura-badge-bad { background: var(--tone-bad-bg); color: var(--tone-bad-fg); }

/* Eine Tabelle IM Panel: der Rahmen gehoert dem Panel, die Tabelle zieht sich nur ueber
   dessen Innenbreite. */
.aura-table-plain { border: 0; border-radius: 0; margin: 0 -24px; width: calc(100% + 48px); }
.aura-table-plain .datagrid thead th:first-child, .aura-table-plain .datagrid tbody td:first-child { padding-left: 24px; }
.aura-table-plain .datagrid thead th:last-child, .aura-table-plain .datagrid tbody td:last-child { padding-right: 24px; }
.text-right { text-align: right; }
/* Die Summenzeilen stehen unter der Positionsliste und gehoeren nicht zu ihr. */
.aura-sum-rows { margin-top: 4px; }
.aura-row-total dt, .aura-row-total dd { font-weight: 650; font-size: 16px; color: var(--aura-text); }

/* Zweispaltige Detailseite: links der Sachverhalt, rechts Einstellungen und Eingriffe.
   Die Seitenspalte hat eine feste Obergrenze, damit die Hauptspalte den Zuwachs bekommt,
   wenn das Fenster breiter wird — eine Label/Wert-Liste gewinnt durch Breite nichts. */
.aura-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 20px; align-items: start; }
.aura-split-main, .aura-split-side { display: grid; gap: 20px; align-content: start; min-width: 0; }

/* Der Kopf des Betriebs-Panels: Verbindung und Stand in einer Zeile, darunter das grosse
   Wort. */
.aura-state-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.aura-state-word { font-size: 34px; line-height: 1.15; letter-spacing: -.03em; font-weight: 650; margin: 0 0 6px; }
.aura-state-word[data-tone="success"] { color: var(--tone-ok-fg); }
.aura-state-word[data-tone="info"] { color: var(--tone-info-fg); }
.aura-state-word[data-tone="warning"] { color: var(--tone-warn-fg); }
.aura-state-word[data-tone="danger"] { color: var(--tone-bad-fg); }
/* Bei toter Verbindung traegt das Wort keinen Ton mehr: es ist dann keine Aussage ueber
   den Raum, sondern ueber das letzte, was ankam. */
.aura-state-word[data-tone="stale"] { color: var(--aura-muted); }
.aura-state-meaning { color: var(--aura-muted); margin: 0 0 18px; }
.aura-tower-row { display: flex; align-items: center; gap: 12px; padding: 0 0 18px; }

.aura-block-action { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; }
/* Eingriffe untereinander und in voller Breite: sie werden gelesen, bevor einer gedrueckt
   wird, und nebeneinander verschwimmen vier rote Knoepfe zu einer Leiste. */
.aura-control-actions { display: grid; gap: 9px; }
.aura-control-actions > * { width: 100%; justify-content: center; }

@media (max-width: 991px) {
  .aura-split { grid-template-columns: minmax(0, 1fr); }
}

/* Datenpanel: Titel, Kopfzeile mit Anzahl und Suche, Tabelle, Fusszeile. */
.aura-datapanel { padding: 22px 0 0; }
.aura-datapanel > .aura-panel-title { padding: 0 24px; margin-bottom: 14px; }
.aura-datapanel-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 24px 18px; }
.aura-datapanel-count { color: var(--aura-muted); font-size: 13px; }
.aura-datapanel-search { flex: 0 1 320px; min-width: 200px; }
.aura-datapanel-search .form-group, .aura-datapanel-search .form-widget { margin: 0; }
.aura-datapanel-search input { width: 100%; }
/* Die Tabellenflaeche sitzt im Panel und braucht dort weder Rahmen noch Radius. */
.aura-datapanel .aura-table-surface { border: 0; border-radius: 0; }
/* EasyAdmins Fuss traegt Anzahl und Seitennavigation — er bekommt hier die Kante der
   Flaeche und denselben Seitenabstand wie ihr Kopf. */
.aura-datapanel .content-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--aura-border); color: var(--aura-muted); font-size: 13px; }
.aura-datapanel .content-panel-footer:empty { display: none; }

/* Panel: die weisse Grundform. Titel 16 px, darunter der Inhalt. */
.aura-panel-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; margin: 0 0 18px; color: var(--aura-text); }
.aura-panel-title .aura-icon { color: var(--aura-accent); }
.aura-panel-title + .aura-panel-description { margin-top: -12px; }

/* Kennzahl-Kacheln. */
.aura-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.aura-metrics:not(:last-child) { margin-bottom: 20px; }
/* Ein leerer Behaelter darf keinen Abstand erzeugen: in einem Grid zaehlt auch die leere
   Zelle, und der Handlungsbedarf ist meistens leer. */
.aura-metrics:empty, .fleet-shell > div:empty { display: none; }
.fleet-shell > .aura-metrics { margin-bottom: 0; }

/* Hinweisstreifen. */
.aura-notice { display: flex; align-items: flex-start; gap: 11px; padding: 15px 18px; border-radius: var(--aura-radius); font-size: 13px; line-height: 1.55; margin-bottom: 20px; }
.aura-notice .aura-icon { width: 18px; height: 18px; margin-top: 1px; }
.aura-notice-info { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.aura-notice-warn { background: var(--tone-warn-bg); color: var(--tone-warn-fg); }
.aura-notice-bad { background: var(--tone-bad-bg); color: var(--tone-bad-fg); }
.aura-notice strong { font-weight: 650; }

/* Beschriftung/Wert: links die Frage, rechts die Antwort. */
.aura-rows { margin: 0; }
.aura-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--aura-border); }
.aura-row:last-child { border-bottom: 0; padding-bottom: 0; }
.aura-row dt { color: var(--aura-muted); font-weight: 400; margin: 0; flex: none; }
.aura-row dd { margin: 0; text-align: right; font-weight: 550; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Zweizeilige Tabellenzelle: Name oben, Kennung darunter. */
.aura-namecell { display: grid; gap: 2px; line-height: 1.4; }
.aura-namecell small { color: var(--aura-muted); font-size: 12px; }

/* Verlauf. */
.aura-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.aura-timeline-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 13px; padding: 11px 0; }
.aura-timeline-item + .aura-timeline-item { border-top: 1px solid var(--aura-border); }
.aura-timeline-text { display: grid; gap: 2px; line-height: 1.45; min-width: 0; }
.aura-timeline-text strong { font-weight: 550; }
.aura-timeline-text small { color: var(--aura-muted); font-size: 13px; }
.aura-timeline-item time { color: var(--aura-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Leerer Zustand — und der Fehlerfall, der ausdruecklich anders aussieht. */
.aura-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 52px 24px; }
.aura-empty .aura-icon { width: 26px; height: 26px; color: var(--aura-border-strong); margin-bottom: 4px; }
.aura-empty-title { margin: 0; font-size: 16px; font-weight: 650; color: var(--aura-text); }
.aura-empty-text { margin: 0; color: var(--aura-muted); max-width: 44ch; }
.aura-empty .btn { margin-top: 12px; }
.aura-empty-error .aura-icon { color: var(--tone-bad-fg); }

@media (max-width: 767px) {
  /* Zwei Spalten statt einer: vier gestapelte Kacheln sind auf einem Telefon eine
     Bildschirmlaenge, bevor die erste Zeile der Tabelle sichtbar wird — und die Tabelle
     ist der Grund, warum man die Seite geoeffnet hat. */
  .aura-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .aura-metric { padding: 14px; gap: 4px; }
  .aura-metric strong { font-size: 20px; }
  .aura-metric > span:not(.aura-icon) { padding-right: 0; }
  .aura-metric .aura-icon { display: none; }
  .aura-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .aura-row dd { text-align: left; }
}

/* Fachseiten teilen die weißen Flächen und den großzügigeren Rhythmus der Shell. */
.fleet-shell { display: grid; gap: 20px; }
/* Der Platzhalter beim ersten Laden hat die Form der fertigen Zeile — die Seite fuellt
   sich, statt umzuspringen. */
.fleet-bar { display: block; height: 11px; border-radius: 5px; background: var(--aura-subtle); max-width: 180px; }
.fleet-skeleton td { border-top: 1px solid var(--aura-border); }
/* Bleibt die Antwort aus, bleiben die Werte stehen — aber sichtbar als Stand von vorhin. */
.fleet-row { transition: opacity var(--aura-fast); }
#fleet.is-stale .fleet-row { opacity: .72; }
.aura-metric strong[data-tone="warn"] { color: var(--tone-warn-fg); }
.aura-overline { color: var(--aura-muted); font-size: 13px; display: block; margin-bottom: 4px; }
.aura-quicklinks { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 0 0 24px; }
.aura-quicklinks a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font-weight: 500; }
.inv-panel { padding: 22px 24px; border-color: var(--aura-border); border-radius: var(--aura-radius); gap: 16px; }
.inv-panel h2 { font-size: 16px; color: var(--aura-text); letter-spacing: 0; text-transform: none; }
.aura-panel-description { margin: -6px 0 4px; color: var(--aura-muted); font-size: 13px; }
/* Ein gestapelter Balken statt einer Zeile je Datum. Die Abschnitte wachsen ueber
   `flex-grow`, damit auch ein Anteil von einem Prozent noch sichtbar bleibt: `min-width`
   an jedem Abschnitt sorgt dafuer, dass die eine abgelaufene Einheit unter hundert nicht
   verschwindet — sie ist die, wegen der man hinsieht. */
.inv-stack { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.inv-stack-part { min-width: 8px; border-radius: 3px; }
.inv-stack-part[data-tone="bad"] { background: var(--tone-bad-fg); }
.inv-stack-part[data-tone="warn"] { background: var(--tone-warn-fg); }
.inv-stack-part[data-tone="info"] { background: var(--tone-info-fg); }
.inv-stack-part[data-tone="ok"] { background: var(--tone-ok-fg); }
.inv-stack-part[data-tone="neutral"] { background: var(--aura-border-strong); }
.inv-stack-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.inv-row, .inv-writeoff { padding: 14px 0; }
.inv-row-name { font-size: 15px; }
.inv-row-sub { font-size: 13px; }
.inv-reason select, .inv-btn { min-height: 38px; }
.inv-btn { background: #fff; color: #b91c1c; border: 1px solid #e1b4b4; }
.inv-btn:hover { background: #fff0f0; }
.aura-inventory-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aura-metric { position: relative; padding: 20px; background: var(--aura-surface); border: 1px solid var(--aura-border); border-radius: var(--aura-radius); display: flex; flex-direction: column; gap: 8px; }
.aura-metric > span:not(.aura-icon) { color: var(--aura-muted); font-size: 13px; padding-right: 22px; }
.aura-metric .aura-icon { position: absolute; top: 20px; right: 18px; color: var(--aura-accent); }
.aura-metric strong { font-size: 23px; line-height: 1.25; letter-spacing: -.025em; font-weight: 650; font-variant-numeric: tabular-nums; }
.aura-metric small { color: var(--aura-muted); font-size: 12px; }
@media (max-width: 767px) {
  .aura-inventory-metrics { grid-template-columns: 1fr; }
  .inv-panel { padding: 18px; }
  .inv-mhd-row { grid-template-columns: 95px minmax(20px, 1fr); gap: 8px; }
  .inv-mhd-n { grid-column: 2; font-size: 12px; }
  .inv-reason select, .inv-btn { min-height: 44px; }
}