/* ============================================================================
   i2fm QM Suite — DESIGN SYSTEM v2  (Datei: css/design-system.css)
   ----------------------------------------------------------------------------
   Einzige Quelle für Gestaltungswerte. Wird NACH style.css geladen und
   definiert nur Tokens + .ui-*-Komponenten. Bestehende Klassen bleiben
   unangetastet, bis eine Seite migriert wird.

   Prinzip: ruhige Flächen, klare Kanten, dichte Daten, eindeutige Aktionen.
   Schiefergrau = Grundlage, Blau = Interaktion, Semantik = Ergebnis.
   Kein Glow, keine dekorativen Verläufe, kein Hintergrundraster.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS — LIGHT (Standard)
   ------------------------------------------------------------------------ */
:root,
[data-theme="light"] {
  /* Flächen & Rahmen */
  --color-bg:              #F6F8FB;
  --color-surface:         #FFFFFF;
  --color-surface-raised:  #F1F5F9;
  --color-border:          #DCE3EB;
  --color-border-strong:   #7B8798;

  /* Text */
  --color-text:            #172033;
  --color-text-muted:      #475569;
  --color-text-subtle:     #5B677A;

  /* Aktion */
  --color-primary:         #2563EB;
  --color-primary-hover:   #1D4ED8;
  --color-primary-soft:    #EFF6FF;
  --color-on-primary:      #FFFFFF;
  --color-focus:           #1D4ED8;

  /* Motion */
  --dur-fast: 120ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Auswahl */
  --color-selected-bg:     #EFF6FF;
  --color-selected-text:   #1E40AF;

  /* Marke */
  --color-brand:           #E40613;

  /* Semantik — light */
  --color-success-bg:      #ECFDF3;
  --color-success-text:    #166534;
  --color-success-solid:   #15803D;
  --color-success-solid-hover: #166534;

  --color-danger-bg:       #FEF2F2;
  --color-danger-text:     #991B1B;
  --color-danger-solid:    #B91C1C;
  --color-danger-solid-hover: #991B1B;

  --color-warning-bg:      #FFFBEB;
  --color-warning-text:    #92400E;
  --color-warning-border:  #FCD34D;

  --color-info-bg:         #EFF6FF;
  --color-info-text:       #1E40AF;

  --color-neutral-bg:      #EEF2F6;
  --color-neutral-text:    #475569;

  /* Elevation — Light braucht Schatten */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .12);
}

/* ---------------------------------------------------------------------------
   2. TOKENS — DARK
   Elevation entsteht durch Flächenhelligkeit + Rahmen, nicht durch Schatten.
   ------------------------------------------------------------------------ */
[data-theme="dark"] {
  --color-bg:              #0F172A;
  --color-surface:         #1A2535;
  --color-surface-raised:  #243247;
  --color-border:          #39475A;
  --color-border-strong:   #7C8DA5;

  --color-text:            #F1F5F9;
  --color-text-muted:      #BAC5D4;
  --color-text-subtle:     #9AA8BC;

  /* Blau bleibt identisch: 5.17:1 mit weisser Schrift */
  --color-primary:         #2563EB;
  --color-primary-hover:   #1D4ED8;
  --color-on-primary:      #FFFFFF;
  --color-focus:           #93C5FD;

  --color-selected-bg:     #172C50;
  --color-selected-text:   #BFDBFE;

  --color-brand:           #E40613;

  /* Semantik — dark */
  --color-success-bg:      #123325;
  --color-success-text:    #86EFAC;
  --color-success-solid:   #15803D;
  --color-success-solid-hover: #166534;

  --color-danger-bg:       #3D1D24;
  --color-danger-text:     #FCA5A5;
  --color-danger-solid:    #B91C1C;
  --color-danger-solid-hover: #991B1B;

  --color-warning-bg:      #3B2D14;
  --color-warning-text:    #FDE68A;
  --color-warning-border:  #78500F;

  --color-info-bg:         #192F4D;
  --color-info-text:       #BFDBFE;

  --color-neutral-bg:      #293548;
  --color-neutral-text:    #CBD5E1;

  /* Dark: keine Schatten */
  --shadow-sm: none;
  --shadow-md: none;
}

/* ---------------------------------------------------------------------------
   3. TYPOGRAFIE — eine Skala, beide Themes
   ------------------------------------------------------------------------ */
:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --text-2xs:  11px;
  --text-xs:   12px;  --leading-xs:   16px;
  --text-sm:   14px;  --leading-sm:   20px;
  --text-base: 16px;  --leading-base: 24px;
  --text-lg:   18px;  --leading-lg:   24px;
  --text-xl:   20px;  --leading-xl:   28px;
  --text-2xl:  24px;  --leading-2xl:  32px;
  --text-3xl:  32px;  --leading-3xl:  40px;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;

  /* ---------------------------------------------------------------------
     4. ABSTAND — 4px-Raster
     8px in kleinen Gruppen, 16px zwischen Komponenten,
     24px zwischen Abschnitten, 32px zwischen großen Blöcken.
     ------------------------------------------------------------------ */
  --space-1:  4px;   --space-7:  28px;
  --space-2:  8px;   --space-8:  32px;
  --space-3:  12px;  --space-9:  36px;
  --space-4:  16px;  --space-10: 40px;
  --space-5:  20px;  --space-11: 44px;
  --space-6:  24px;  --space-12: 48px;

  /* ---------------------------------------------------------------------
     5. RADIUS — 4 Stufen statt 11
     ------------------------------------------------------------------ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ---------------------------------------------------------------------
     6. LAYOUT-RASTER
     ------------------------------------------------------------------ */
  --sidebar-w:      256px;
  --sidebar-w-drawer: 280px;
  --content-max:    1280px;
  --touch:          44px;
  --nav-mobile-h:   56px;

  /* Bewegung */
  --motion-fast: 120ms;
}

/* ---------------------------------------------------------------------------
   7. BASIS — nur was global gelten muss
   ------------------------------------------------------------------------ */
body {
  font-family: var(--font-ui);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

/* Fokus: einheitlicher Ring, nie abgeschnitten */
.ui-focus-ring:focus-visible,
.ui-button:focus-visible,
.ui-field__control:focus-visible,
.ui-card--interactive:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Zahlen in Kolonnen tabellarisch */
.ui-num,
.ui-table td.is-num,
.ui-kpi__value {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  .ui-card,
  .ui-badge { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   8. KOMPONENTE: KARTE (.ui-card)
   Ersetzt .card / .kpi / .gw-card / .panel / .dash-card
   ------------------------------------------------------------------------ */
.ui-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);          /* 20px */
  color: var(--color-text);
}

/* Statische Karten haben KEINE Hover-Zustände */
.ui-card--interactive {
  cursor: pointer;
  transition: border-color var(--motion-fast) ease;
}
.ui-card--interactive:hover  { border-color: var(--color-border-strong); }
.ui-card--interactive[aria-selected="true"],
.ui-card--interactive.is-selected {
  background: var(--color-selected-bg);
  border-color: var(--color-selected-text);
  color: var(--color-selected-text);
}

.ui-card__title {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
}

.ui-card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   9. KOMPONENTE: BUTTON (.ui-button)
   Ersetzt .btn / .btn-submit-audit / .btn-draft / interaktive .chip
   WICHTIG: Funktionsanker-Klassen (z.B. .btn-submit-audit) bleiben im HTML!
   ------------------------------------------------------------------------ */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch);          /* 44px */
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-fast) ease,
              border-color var(--motion-fast) ease,
              color var(--motion-fast) ease;
  /* Kein Anheben, keine Grössenänderung bei Hover */
}
.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  background: var(--color-surface-raised);
  color: var(--color-text-subtle);
  border-color: var(--color-border);
  cursor: not-allowed;
  pointer-events: none;
}

/* primary — der nächste Arbeitsschritt */
.ui-button--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.ui-button--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}
.ui-button--primary:active:not(:disabled) {
  background: var(--color-primary-hover);
  box-shadow: inset 0 0 0 1px var(--color-on-primary);
}

/* secondary — im Dark hebt sich surface zu wenig von bg ab,
   daher surface-raised + border-strong (Abgrenzung >= 3:1 zur Seite) */
.ui-button--secondary {
  background: var(--color-surface-raised);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.ui-button--secondary:hover:not(:disabled) {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

/* ghost */
.ui-button--ghost {
  background: transparent;
  color: var(--color-selected-text);
  border-color: transparent;
}
/* Im Dark braucht Ghost eine sichtbare Kontur, sonst ist er nicht als
   Bedienelement erkennbar (Flaeche = Seitenhintergrund). */
[data-theme="dark"] .ui-button--ghost,
[data-theme="dark"] .ui-button--secondary {
  border-color: var(--color-text-subtle);   /* 6.4:1 zur Seite — klar erkennbar */
}
.ui-button--ghost:hover:not(:disabled) {
  background: var(--color-selected-bg);
  color: var(--color-selected-text);
}

/* danger — nur destruktiv */
.ui-button--danger {
  background: var(--color-danger-solid);
  color: var(--color-on-primary);
  border-color: var(--color-danger-solid);
}
.ui-button--danger:hover:not(:disabled) {
  background: var(--color-danger-solid-hover);
  border-color: var(--color-danger-solid-hover);
  color: var(--color-on-primary);
}

/* success — nur ausdrücklich positive Entscheidung */
.ui-button--success {
  background: var(--color-success-solid);
  color: var(--color-on-primary);
  border-color: var(--color-success-solid);
}
.ui-button--success:hover:not(:disabled) {
  background: var(--color-success-solid-hover);
  border-color: var(--color-success-solid-hover);
  color: var(--color-on-primary);
}

/* Filter-Button: dauerhafter Auswahlstil */
.ui-button--filter[aria-pressed="true"] {
  background: var(--color-selected-bg);
  border-color: var(--color-selected-text);
  color: var(--color-selected-text);
}

/* ---------------------------------------------------------------------------
   10. KOMPONENTE: BADGE (.ui-badge)
   Ersetzt .badge / .role-badge / .malus-badge / informative .chip
   Farbe wird IMMER durch Text ergänzt.
   ------------------------------------------------------------------------ */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 24px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.ui-badge--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-text);
}
.ui-badge--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-text);
}
.ui-badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-text);
}
.ui-badge--info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info-text);
}
.ui-badge--neutral {
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
  border-color: var(--color-border);
}

/* ---------------------------------------------------------------------------
   11. KOMPONENTE: TABELLE (.ui-table)
   ------------------------------------------------------------------------ */
.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-variant-numeric: tabular-nums;
}
.ui-table__head th,
.ui-table thead th {
  height: var(--touch);
  padding: var(--space-3);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-semibold);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.ui-table__row td,
.ui-table tbody td {
  height: 48px;
  padding: var(--space-3);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.ui-table tbody tr.is-interactive:hover {
  background: var(--color-surface-raised);
  cursor: pointer;
}
.ui-table tbody tr[aria-selected="true"] {
  background: var(--color-selected-bg);
}

/* ---------------------------------------------------------------------------
   12. KOMPONENTE: FORMULARFELD (.ui-field)
   ------------------------------------------------------------------------ */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ui-field__label {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.ui-field__control {
  min-height: var(--touch);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  transition: border-color var(--motion-fast) ease;
}
.ui-field__control:hover { border-color: var(--color-selected-text); }
.ui-field__control:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-focus);
}
.ui-field__control:disabled {
  background: var(--color-surface-raised);
  color: var(--color-text-subtle);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.ui-field__control[readonly] {
  background: var(--color-surface-raised);
  color: var(--color-text);
}
.ui-field__control[aria-invalid="true"] {
  border-color: var(--color-danger-text);
}
.ui-field__hint {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--color-text-subtle);
}
.ui-field__error {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--color-danger-text);
  font-weight: var(--font-medium);
}
textarea.ui-field__control {
  min-height: 120px;
  resize: vertical;
}
/* Checkbox / Radio: 20px Box, 44px Labelzeile */
.ui-field--check {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  cursor: pointer;
}
.ui-field--check input[type="checkbox"],
.ui-field--check input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  margin: 0;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   13. KOMPONENTE: LEERZUSTAND (.ui-empty)
   ------------------------------------------------------------------------ */
.ui-empty {
  padding: var(--space-8);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}
.ui-empty__title {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.ui-empty__text {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
  margin: 0 auto var(--space-4);
  max-width: 52ch;
}
@media (max-width: 639px) {
  .ui-empty { padding: var(--space-6); }
}

/* ---------------------------------------------------------------------------
   14. KOMPONENTE: SEITENKOPF (.ui-page-header)
   EIN Muster für alle Seiten: Titel + Untertitel links, Aktionen rechts.
   ------------------------------------------------------------------------ */
.ui-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.ui-page-header__text { min-width: 0; flex: 1 1 320px; }
.ui-page-header__title {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.ui-page-header__subtitle {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 72ch;
}
.ui-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  .ui-page-header { flex-direction: column; align-items: stretch; }
  .ui-page-header__actions { width: 100%; }
}

/* ---------------------------------------------------------------------------
   15. KOMPONENTE: FILTERLEISTE (.ui-filterbar)
   ------------------------------------------------------------------------ */
.ui-filterbar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.ui-filterbar__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 200px;
}
@media (max-width: 639px) {
  .ui-filterbar { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------------------
   16. KPI-RASTER
   1 Spalte <640px, 2 ab 640px, 4 ab 1280px. Gleiche Höhe pro Reihe.
   ------------------------------------------------------------------------ */
.ui-kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .ui-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .ui-kpi-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

.ui-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.ui-kpi__label {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: none;
}
/* Kennzahl bleibt in Textfarbe; Status als Badge daneben */
.ui-kpi__value {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.ui-kpi__context {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--color-text-subtle);
}

/* ---------------------------------------------------------------------------
   17. CONTENT-RASTER
   ------------------------------------------------------------------------ */
.ui-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4);
}
@media (min-width: 640px)  { .ui-content { padding: var(--space-6); } }
@media (min-width: 1024px) { .ui-content { padding: var(--space-8); } }

/* Long-form Textmasses */
.ui-prose { max-width: 72ch; }


/* ---------------------------------------------------------------------------
   17b. DYNAMISCHES KACHEL-RASTER
   Füllt freie Flächen mit gleichwertigen Kacheln. Kacheln passen sich der
   Spaltenzahl an (auto-fit), Höhe bleibt pro Reihe gleich.
   ------------------------------------------------------------------------ */
.ui-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.ui-tile-grid--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ui-tile-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.ui-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ui-tile--link { cursor: pointer; text-decoration: none; color: inherit; }
.ui-tile--link:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.ui-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-base);
  flex-shrink: 0;
}
.ui-tile__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: var(--leading-base);
  margin: 0;
}
.ui-tile__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.ui-tile__meta {
  margin-top: auto;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* ---------------------------------------------------------------------------
   17c. EMPTY-STATE als Kachel
   Kein nackter Hinweistext: Kachel mit Aktion + Kurzerklärung.
   ------------------------------------------------------------------------ */
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.ui-empty__icon {
  font-size: 30px;
  line-height: 1;
  opacity: .85;
}
.ui-empty__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.ui-empty__desc {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
}
.ui-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-1);
}


/* ===========================================================================
   19. DASHBOARD-RASTER — Kachel-Rhythmus 2 · 1(groß) · 2
   Desktop: Aktionen | Hero  ->  KPI (voll) -> Details | Arbeitsbereiche
   Mobile : eine Spalte, Aktionen als Scroll-Snap-Reihe.
   =========================================================================== */
.wrap.wrap-dash { max-width: 1280px; padding-inline: var(--space-4); }
.dash-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.dash-layout > * { min-width: 0; margin: 0; box-sizing: border-box; overflow-wrap: anywhere; }
#dashActionBtns    { grid-column: 1 / 13; grid-row: 1; }
/* V7 (User: „Raumvorschlaege muessen breiter sein und mittig"):
   Der Hero stand auf Spalte 7/13 (= 500px von 1440px) — die Raumvorschlaege
   darin konnten nie breiter werden und sassen rechts der Seitenmitte.
   Jetzt: Hero ueber die volle Breite (1/13), Aktionen und Hero teilen sich
   die Zeile nicht mehr. Der Vorschlagsblock ist damit ~1180px breit und
   steht auf der Seitenmitte. */
#roleHeroContainer { grid-column: 1 / 13; grid-row: 2; }
#roleKpiGrid       { grid-column: 1 / 13; grid-row: 3; }
#roleDetailSection { grid-column: 1 / 7;  grid-row: 4; }
.dash-hubs         { grid-column: 7 / 13; grid-row: 4; }

/* Jede Hauptkachel ist eine Fläche — das erzeugt den Rhythmus. */
.dash-layout > * {
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.wrap-dash #dashActionBtns {
  display: flex; flex-wrap: wrap; align-content: start;
  gap: var(--space-2); width: auto;
}
#roleHeroContainer > .dash-hero { display: block; margin: 0; padding: 0; background: transparent; border: 0; }
.dash-hero-title { margin: 0; font-size: var(--text-lg); }
.dash-hero-meta  { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* KPI: erste Kachel groß (12), danach 6/6 — auf 1024+ 6/3/3 */
.wrap-dash #roleKpiGrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
#roleKpiGrid > .dash-card {
  grid-column: span 6; min-width: 0; padding: var(--space-2);
  background: transparent; border: 0; box-shadow: none;
}
#roleKpiGrid > .dash-card:first-child { grid-column: span 12; }
.dash-kpi-value { display: block; font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
#roleKpiGrid > :first-child .dash-kpi-value { font-size: var(--text-3xl); }

#roleDetailSection > .dash-card,
.wrap-dash #roleHubTiles > .hub-card { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.wrap-dash #roleHubTiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; }

/* Leere Bereiche kollabieren sauber, statt Höhe zu fressen. */
#dashActionBtns:empty, #roleHeroContainer:empty,
#roleKpiGrid:empty, #roleDetailSection:empty,
.dash-hubs:not(:has(#roleHubTiles > *)) { display: none; }

/* --- Button-System auf dem Dashboard: 3 Ebenen, Icon + Text, Touch >=44px --- */
.wrap-dash .ui-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: calc(var(--space-8) + var(--space-3));
  width: auto; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  text-align: center; text-decoration: none; white-space: normal; cursor: pointer;
  transform: none;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wrap-dash .ui-button > svg { width: var(--space-5); height: var(--space-5); flex: 0 0 var(--space-5); }
.wrap-dash .ui-button--primary   { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-text-subtle); }
.wrap-dash .ui-button--secondary { background: var(--color-surface-raised); color: var(--color-text); }
.wrap-dash .ui-button--ghost     { background: transparent; color: var(--color-selected-text); }
@media (hover: hover) {
  .wrap-dash .ui-button--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
  .wrap-dash .ui-button--secondary:hover,
  .wrap-dash .ui-button--ghost:hover { background: var(--color-selected-bg); color: var(--color-selected-text); border-color: var(--color-border-strong); }
}
.wrap-dash .ui-button:active { transform: none; box-shadow: inset 0 0 0 2px currentColor; }
.wrap-dash .ui-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-1); }
.wrap-dash .ui-button:is(:disabled, [aria-disabled="true"]) {
  background: var(--color-surface-raised); color: var(--color-text-subtle);
  border-color: var(--color-border-strong); opacity: 1; box-shadow: none; cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) { .wrap-dash .ui-button { transition: none; } }

/* --- Mobile <768px: eine Spalte, Aktionen wischbar, 48px Ziele --- */
@media (max-width: 767.98px) {
  /* WICHTIG: grid-column 1/-1 explizit pro ID setzen.
     `.dash-layout > *` allein wurde von den spezifischeren ID-Regeln
     (#roleHeroContainer { grid-column: 7/13 }) ueberschrieben -> 173px breit. */
  .dash-layout > *,
  #dashActionBtns, #roleHeroContainer, #roleKpiGrid,
  #roleDetailSection, .dash-hubs { grid-column: 1 / -1; width: 100%; }
  #dashActionBtns { grid-row: 1; }
  #roleHeroContainer { grid-row: 2; }
  #roleKpiGrid { grid-row: 3; }
  #roleDetailSection { grid-row: 4; }
  .dash-hubs { grid-row: 5; }
  .wrap-dash #dashActionBtns {
    flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--space-4);
    -webkit-overflow-scrolling: touch;
  }
  .wrap-dash #dashActionBtns > .ui-button { flex: 0 0 auto; max-width: 100%; scroll-snap-align: start; min-height: calc(var(--space-6) * 2); }
  #roleKpiGrid > .dash-card, #roleKpiGrid > .dash-card:first-child { grid-column: span 12; }
  #roleHeroContainer { padding: var(--space-3); }
  .dash-hero-title { font-size: var(--text-base); }
  #roleDetailSection .bar-row { flex-wrap: wrap; gap: var(--space-2); }
}
/* Mobile: Header kompakt halten — kein doppelter Abstand zum ersten Block */
@media (max-width: 767.98px) {
  .wrap-dash .ui-page-header { margin-bottom: var(--space-3); gap: var(--space-2); }
  .wrap-dash .ui-page-header__title { font-size: var(--text-lg); }
  .dash-layout { gap: var(--space-3); }
}
/* Tablet 768–1023: 2-1-2 in zwei Spalten */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #dashActionBtns    { grid-column: 1 / 13; grid-row: 1; }
  #roleHeroContainer { grid-column: 1 / 13; grid-row: 2; }
  #roleKpiGrid       { grid-column: 1 / 13; grid-row: 3; }
  #roleDetailSection { grid-column: 1 / 7;  grid-row: 4; }
  .dash-hubs         { grid-column: 7 / 13; grid-row: 4; }
  #roleKpiGrid > .dash-card { grid-column: span 6; }
  #roleKpiGrid > .dash-card:first-child { grid-column: span 12; }
}


/* ===========================================================================
   20. PHONE-FIRST — alles unter 768px
   Ziele: kein horizontaler Overflow, Touch-Ziele >=44px, Tabellen als Karten,
   Typografie-Sockel 12px, Daumen-Erreichbarkeit.
   =========================================================================== */

/* --- 20.1 Header: kein 320px-Mindestzwang mehr (war Ursache fuer 434px Overflow) --- */
@media (max-width: 767.98px) {
  .ui-page-header {
    flex-direction: column; align-items: stretch; gap: var(--space-3);
    width: 100%; max-width: 100%; min-width: 0;
  }
  /* Kern des 434px-Overflows: Flex-Kinder duerfen nicht ueber die
     Container-Breite hinauswachsen. width:100% + max-width:100% + min-width:0
     zwingt H1/P, den Text umzubrechen statt die Box zu sprengen. */
  .ui-page-header__text {
    flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0;
    box-sizing: border-box;
  }
  .ui-page-header__title {
    font-size: var(--text-xl); line-height: 1.25;
    overflow-wrap: anywhere; word-break: break-word;
    width: 100%; max-width: 100%;
  }
  .ui-page-header__subtitle { font-size: var(--text-xs); width: 100%; max-width: 100%; overflow-wrap: anywhere; }
  .ui-page-header__actions {
    width: 100%; max-width: 100%; min-width: 0;
    flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .ui-page-header__actions > * { flex: 0 0 auto; scroll-snap-align: start; }
}

/* --- 20.2 Schrift-Sockel: nichts unter 12px auf dem Phone --- */
@media (max-width: 767.98px) {
  .wrap, .wrap-dash, main { font-size: max(var(--text-xs), 12px); }
  .wrap :is(small, .hint, .meta, .sub, .muted, figcaption) { font-size: 12px; }
  /* --text-2xs (11px) ist Desktop-Feintext; auf dem Phone Sockel 12px */
  .wrap :is(.donut-inner, .donut-inner *, .dash-kpi-label) { font-size: 12px; }
  .wrap [style*="--text-2xs"], .wrap [style*="text-2xs"] { font-size: 12px !important; }
  /* Inline-Styles mit harten px-Werten ueberstimmen — gezielt hochziehen */
  .wrap [style*="font-size:10px"], .wrap [style*="font-size: 10px"],
  .wrap [style*="font-size:9px"],  .wrap [style*="font-size: 9px"],
  .wrap [style*="font-size:11px"], .wrap [style*="font-size: 11px"] { font-size: 12px !important; }
}

/* --- 20.3 Touch-Ziele: 44px Minimum, ohne das Layout zu sprengen --- */
@media (max-width: 767.98px) {
  .wrap :is(button, [role="button"], .btn, .ui-button, input[type="submit"]) {
    min-height: 44px;
  }
  /* Reine Textlinks in Tabellenlisten: Trefferflaeche vergroessern.
     min-width 44px, damit auch kurze/umbrechende Links (z.B. "Einspruch
     ansehen →" in schmaler Spalte) die Touch-Mindestbreite halten. */
  .wrap :is(a.link-action, a.inline-link, td a, .anc-table a) {
    display: inline-flex; align-items: center;
    min-height: 44px; min-width: 44px;
    padding-block: 10px;
  }
  .sidebar .logo { min-height: 44px; }
  /* Filter-Selects waren 26px breit (nur Pfeil sichtbar) */
  .wrap :is(select, input[type="text"], input[type="search"], input[type="date"]) {
    min-height: 44px; min-width: 44px;
  }
  .wrap select { width: auto; max-width: 100%; }
  /* Bilder/Thumbnails in Tabellen nicht als Touch-Ziel missverstehen */
  .wrap img[src*=".webp"], .wrap img[src*=".jpg"], .wrap img[src*=".png"] { min-width: 0; }
}

/* --- 20.4 Tabellen -> Karten (der groesste Phone-Gewinn) ---
   overflow-x bleibt als Fallback, aber die Zeile wird zur Karte:
   Label links, Wert rechts, per data-label-Attribut.
   Seiten ohne data-label fallen auf scrollbaren Container zurueck. */
@media (max-width: 767.98px) {
  .table-scroll, .table-wrap, .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.table-qm, table.anc-table {
    display: block; width: 100%; min-width: 0;
    border-collapse: collapse;
  }
  table.table-qm thead, table.anc-table thead { display: none; }
  table.table-qm tbody, table.anc-table tbody { display: block; width: 100%; }
  table.table-qm tr, table.anc-table tr {
    display: block; width: 100%; max-width: 100%; min-width: 0;
    box-sizing: border-box;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  /* FIX (2026-10-18): Die Werte standen rechtsbuendig. Bei kurzen Werten
     (SOLL/IST = 0) ist das gut, bei langen Texten ("Kein Soll hinterlegt —
     nicht beurteilbar") entstand durch den Umbruch eine zackige linke Kante
     und der Text lief optisch aus dem Label heraus. Jetzt linksbuendig:
     Label und Wert beginnen an derselben Kante, lange Texte lesen sich
     ruhig. Die Label-Spalte wurde von 42% auf 38% verkleinert — dadurch
     bleibt mehr Platz fuer den eigentlichen Wert. */
  table.table-qm td, table.anc-table td {
    display: flex; align-items: baseline;
    gap: var(--space-2);
    width: auto; min-width: 0; max-width: 100%;
    padding: var(--space-1) 0; border: 0;
    text-align: left; overflow-wrap: anywhere;
    /* white-space:nowrap in der Aktionsspalte war die Ursache fuer 892px */
    white-space: normal !important;
  }
  table.table-qm td > *, table.anc-table td > * { min-width: 0; max-width: 100%; }
  table.table-qm td::before, table.anc-table td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    padding-right: var(--space-2);
  }
  table.table-qm td:empty { display: none; }
}

/* --- 20.5 Sticky-Aktionen am Daumen (nur wo sinnvoll: Formulare/Audit) --- */
@media (max-width: 767.98px) {
  .mobile-action-bar {
    position: sticky; bottom: 0; z-index: 60;
    display: flex; gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    margin: 0 calc(-1 * var(--space-2));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-strong);
    box-shadow: 0 -4px 12px rgb(0 0 0 / .12);
  }
  .mobile-action-bar > * { flex: 1 1 0; }
}

/* --- 20.6 Safe-Area (iPhone-Notch), Scroll-Ruhe, Tap-Highlight --- */
@media (max-width: 767.98px) {
  body { padding-bottom: env(safe-area-inset-bottom, 0); }
  .wrap, .wrap-dash { padding-left: max(var(--space-3), env(safe-area-inset-left, 0)); }
  .wrap, .wrap-dash { padding-right: max(var(--space-3), env(safe-area-inset-right, 0)); }
  * { -webkit-tap-highlight-color: transparent; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
}

/* --- 20.7 Audit-Bogen: Frage + Bewertung untereinander, grosse Tasten --- */
@media (max-width: 767.98px) {
  .choice-btn, .choice-btn.nvp, .choice-btn.nvp.active {
    min-height: 48px; padding: var(--space-2) var(--space-3);
    font-size: 13px;
  }
  /* Aktions-Buttons im Audit-Bogen waren 36px hoch */
  .wrap :is(button, .btn, .ui-button) { min-height: 44px; }
  /* Brotkrumen/Nav-Links: Flaeche statt Zeilenhoehe */
  .wrap :is(nav a, .breadcrumb a, .crumbs a) { display: inline-flex; align-items: center; min-height: 44px; }
  /* Audit-Sticky-Header: Titel-Link war 20px hoch */
  .sticky-header a.header-title {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; min-width: 44px;
  }
  .sticky-header .header-top { flex-wrap: wrap; gap: var(--space-2); }
  .sticky-header :is(.score-pill, button) { min-height: 44px; }
  .score-pill { min-height: 32px; padding: 0 var(--space-2); }
  .card { padding: var(--space-3); }
}


/* ===========================================================================
   21. ARBEITSBEREICH-KACHELN — eigene Farbe + eigenes Hover pro Kachel
   Jede Kachel traegt data-tone (danger|success|warning|info|violet|neutral).
   Farbe erscheint an: Icon-Chip, linkem Farbbalken, Hover-Rand + Glow.
   Damit unterscheiden sich die Kacheln nicht nur im Text, sondern in der
   gesamten Anmutung — und man erkennt den Bereich am Icon.
   =========================================================================== */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  align-items: stretch;
}

/* --- 21.1 Grundkachel: relative Position fuer Balken, Icon-Chip, Hover --- */
.hub-tile {
  --tile-bg:      var(--color-neutral-bg);
  --tile-text:    var(--color-neutral-text);
  --tile-line:    var(--color-border);
  --tile-line-hi: var(--color-neutral-text);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 4px);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease,
              border-color 160ms ease, background-color 160ms ease;
}

/* Linker Farbbalken — die Kachel-"Signatur" */
.hub-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tile-line-hi);
  transition: width 160ms ease;
}

/* --- 21.2 Tonwerte (Semantik) -------------------------------------------- */
.hub-tile[data-tone="danger"]  { --tile-bg: var(--color-danger-bg);  --tile-text: var(--color-danger-text);  --tile-line-hi: var(--color-danger-text); }
.hub-tile[data-tone="success"] { --tile-bg: var(--color-success-bg); --tile-text: var(--color-success-text); --tile-line-hi: var(--color-success-text); }
.hub-tile[data-tone="warning"] { --tile-bg: var(--color-warning-bg); --tile-text: var(--color-warning-text); --tile-line-hi: var(--color-warning-text); }
.hub-tile[data-tone="info"]    { --tile-bg: var(--color-info-bg);    --tile-text: var(--color-info-text);    --tile-line-hi: var(--color-info-text); }
.hub-tile[data-tone="violet"]  { --tile-bg: var(--color-neutral-bg); --tile-text: var(--color-neutral-text); --tile-line-hi: var(--color-neutral-text); }

/* --- 21.3 Kopf: Icon-Chip + Titel + Badge -------------------------------- */
.hub-tile__top { display: flex; align-items: flex-start; gap: var(--space-3); }

.hub-tile__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--tile-bg);
  color: var(--tile-text);
  transition: transform 160ms ease, background-color 160ms ease;
}
.hub-tile__icon svg { width: 20px; height: 20px; display: block; }

.hub-tile__head { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.hub-tile__title {
  font-size: var(--text-base);
  line-height: 1.3;
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
  overflow-wrap: anywhere;
}
.hub-tile__badge {
  align-self: flex-start;
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--font-semibold);
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--tile-bg);
  color: var(--tile-text);
  white-space: nowrap;
}

.hub-tile__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
  margin: 0;
  overflow-wrap: anywhere;
}

.hub-tile__foot {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--tile-text);
  margin-top: auto;
}
.hub-tile__foot svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 160ms ease; }

/* --- 21.4 HOVER: jede Kachel hebt sich in IHRER Farbe -------------------- */
@media (hover: hover) {
  a.hub-tile:hover,
  a.hub-tile:focus-visible {
    transform: translateY(-3px);
    border-color: var(--tile-line-hi);
    background: var(--color-surface-raised);
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--tile-line-hi) 45%, transparent);
    outline: none;
  }
  a.hub-tile:hover::before,
  a.hub-tile:focus-visible::before { width: 6px; }
  a.hub-tile:hover .hub-tile__icon { transform: scale(1.06); }
  a.hub-tile:hover .hub-tile__foot svg { transform: translateX(3px); }
}

/* Tastaturfokus immer sichtbar, auch ohne Hover-Faehigkeit */
a.hub-tile:focus-visible {
  outline: 2px solid var(--tile-line-hi);
  outline-offset: 2px;
}

/* --- 21.5 Die Pruefungs-Kachel ist ein Container, kein Link -------------- */
.hub-tile--container { cursor: default; }
.hub-tile--container:hover { transform: none; }
.hub-tile__rooms { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.hub-tile__room {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 5px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--tile-bg);
  color: var(--tile-text);
  text-decoration: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  transition: background-color 140ms ease, color 140ms ease;
}
.hub-tile__room:hover { background: var(--tile-line-hi); color: var(--color-surface); }

/* --- 21.6 Mobile: eine Spalte, 48px Ziele, kein Hover-Effekt ------------- */
@media (max-width: 767.98px) {
  .hub-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .hub-tile { padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 4px); }
  .hub-tile__icon { width: 36px; height: 36px; }
  .hub-tile__foot { min-height: 44px; }
  .hub-tile__room { min-height: 44px; padding-inline: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .hub-tile, .hub-tile::before, .hub-tile__icon, .hub-tile__foot svg { transition: none; }
  a.hub-tile:hover { transform: none; }
}