/* ============================================================
   AFK International — Design-System „Vadro"

   Portiert aus der KBA-Software (frontend/src/app/globals.css).
   Dort läuft Tailwind v4; hier gibt es keinen Build-Schritt, also
   stehen dieselben Tokens als CSS-Variablen und die Komponenten als
   handgeschriebene Regeln.

   Eine Datei für alle Templates. Wer eine Farbe ändern will, ändert
   sie hier — nicht zehnmal im Markup.
   ============================================================ */

/* ── Schrift ─────────────────────────────────────────────────
   Manrope als Variable Font, Latin-Subset, 24 KB. Selbst gehostet
   statt über das Google-CDN: ein Font-Abruf überträgt die IP des
   Betrachters an Google, und dafür gibt es hier keine Rechtsgrundlage. */
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

:root {
  /* Grundtöne */
  --background: #eceff0;
  --foreground: #0f1916;
  --ink: #0f1916;
  --muted: #8a968f;
  --muted-strong: #5b6b64;
  --line: #e2e8e5;
  --flaeche: #ffffff;

  /* Marke — AFK-CI-Blau. Als eigene Variable, damit White-Label sie
     überschreiben kann, ohne jede Regel anzufassen.
     --brand trägt Weiß mit 4,6:1 und taugt damit als Knopffläche. */
  --brand: #2563eb;
  /* Für Schrift auf hellem Grund: das CI-Dunkelblau aus DESIGN_BRIEF.md.
     --brand selbst wäre als Fließtext auf Weiß zu schwach. */
  --brand-dark: #1e3a5f;
  --brand-soft: #e8f0fd;

  /* „Liegt beim Kunden" braucht einen eigenen Ton, sonst ist es von
     „liegt bei dir" nicht zu unterscheiden, sobald die Marke blau ist.
     Blau = du bist dran, Bernstein = die andere Seite ist dran. */
  --extern: #8a5a00;
  --extern-soft: #fff3e0;

  /* Statusfarben sind KEINE Markenfarben. „Abgeschlossen" bleibt grün,
     auch wenn die Marke wechselt — sonst sieht ein fertiger Vorgang aus
     wie eine Warnung, und die Farbe verliert ihre Aussage. */
  --erfolg: #0a6b48;
  --erfolg-soft: #e9f7f1;
  --fehler: #b42318;
  --fehler-soft: #fef3f2;
  --wartet: #5b6b64;
  --wartet-soft: #eef1f0;

  /* Maße. Radien in zwei Stufen: Flächen rund, Bedienelemente enger. */
  --r-flaeche: 18px;
  --r-element: 10px;
  --r-pille: 999px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  /* Der Schimmer oben rechts nimmt der Fläche das Sterile — er ist der
     Grund, warum die Seite nicht nach Formular aussieht. Der Ton folgt
     der Marke: ein warmer Schein unter blauen Akzenten beißt sich.
     `fixed`, damit er beim Scrollen stehen bleibt statt mitzuwandern. */
  background: radial-gradient(1200px 600px at 80% -10%, #e7eef9 0%, #eceff0 55%);
  background-attachment: fixed;
  color: var(--foreground);
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Zahlen, IDs und Daten stehen in Tabellen untereinander — mit
   tabellarischen Ziffern fluchten sie, statt zu zappeln. */
.zahl, table td, table th, .kachel .wert { font-variant-numeric: tabular-nums; }

/* ── Überschriften ────────────────────────────────────────────
   Eine Schrift für alles. Den Unterschied macht das Gewicht, nicht
   eine zweite Familie. Manrope läuft in großen Graden offen;
   angezogenes Tracking lässt eine Überschrift gesetzt wirken statt
   hochskaliert. */
h1, h2, h3, .font-display {
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }

a { color: var(--brand-dark); }

/* ── Glas ────────────────────────────────────────────────────
   Schwebende Flächen im Milchglas-Look: der Hintergrund scheint
   gefiltert durch, eine helle Kante oben fängt das Licht, der
   Schatten hält die Fläche über dem Inhalt.

   An EINER Stelle definiert, weil dieselben vier Zutaten sonst in
   jeder Komponente leicht anders stehen und auseinanderlaufen. */
.glas {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 6px 20px rgba(30, 58, 95, 0.07),
    0 1px 3px rgba(30, 58, 95, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 0.5px rgba(226, 232, 229, 0.9);
}

.glas-stark {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  box-shadow:
    0 12px 34px rgba(30, 58, 95, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 0.5px rgba(226, 232, 229, 0.9);
}

/* Ohne backdrop-filter würde die Fläche durchsichtig und der Text
   unlesbar — dort deckt sie einfach. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas, .glas-stark { background: rgba(255, 255, 255, 0.95); }
}

/* ── Kopfleiste ──────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 28px;
  height: 60px;
  border-bottom: 1px solid rgba(226, 232, 229, 0.6);
}

/* Das Logo trägt die Marke — der frühere Schriftzug entfällt. */
header .marke { display: flex; align-items: center; flex: none; }
header .marke img { display: block; height: 30px; width: auto; }

/* Ebene 1: die drei Arbeitsbereiche. Nur diese drei, damit auf einen Blick
   erkennbar ist, wie das Werkzeug geschnitten ist. */
header nav.bereiche {
  display: flex;
  gap: 4px;
  margin-right: auto;
  margin-left: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
header nav.bereiche::-webkit-scrollbar { display: none; }

header nav.bereiche a {
  color: var(--muted-strong);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-element);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
header nav.bereiche a:hover { background: rgba(255, 255, 255, 0.75); color: var(--ink); }
header nav.bereiche a.aktiv { background: var(--brand-soft); color: var(--brand-dark); }

header .abmelden {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 11px;
  border-radius: var(--r-element);
  white-space: nowrap;
  flex: none;
}
header .abmelden:hover { background: rgba(255, 255, 255, 0.75); color: var(--ink); }

/* Ebene 2: die Seiten des aktuellen Bereichs. Klebt unter der Kopfleiste,
   damit sie beim Blättern in langen Tabellen erreichbar bleibt. */
.unterleiste {
  position: sticky;
  top: 60px;
  z-index: 29;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.unterleiste nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.unterleiste nav::-webkit-scrollbar { display: none; }

.unterleiste a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 4px 10px;
  margin-right: 16px;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.unterleiste a:hover { color: var(--ink); }
.unterleiste a.aktiv { color: var(--brand-dark); border-bottom-color: var(--brand); }

.unterleiste .anzahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pille);
  background: var(--fehler-soft);
  color: var(--fehler);
  font-size: 11px;
  font-weight: 800;
}

/* ── Grundraster ─────────────────────────────────────────── */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

.kopf-zeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.kopf-zeile .unterzeile {
  color: var(--muted-strong);
  font-size: 13px;
  margin-top: 5px;
}

/* ── Kennzahlen ──────────────────────────────────────────────
   Linksbündig statt zentriert: das Auge springt beim Überfliegen
   an einer Kante entlang, nicht zwischen fünf Mitten hin und her. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.stat-card, .kachel {
  border-radius: var(--r-flaeche);
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 6px 20px rgba(30, 58, 95, 0.07),
    0 1px 3px rgba(30, 58, 95, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 0.5px rgba(226, 232, 229, 0.9);
}

.stat-card .zahl, .kachel .wert {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}
.stat-card .label, .kachel .titel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
}

/* Ein Akzentstreifen genügt, um eine Kachel als „hier hinsehen" zu
   markieren — kräftiger als eine eingefärbte Zahl und weniger laut. */
.stat-card.betont { position: relative; overflow: hidden; }
.stat-card.betont::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand);
}
.stat-card.betont .zahl { color: var(--brand-dark); }

/* ── Bedienelemente ──────────────────────────────────────── */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 17px;
  border: 0;
  border-radius: var(--r-element);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.knopf:active { transform: translateY(1px); }

.knopf-primaer {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 3px 10px rgba(30, 58, 95, 0.09);
}
.knopf-primaer:hover { background: #1c2b26; }

.knopf-marke {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.22);
}
.knopf-marke:hover { background: #1d4ed8; }

.knopf-still {
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.knopf-still:hover { background: #fff; }

/* ── Filterleiste ────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 9px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-bar input, .filter-bar select, .feld {
  padding: 10px 14px;
  border: 0;
  border-radius: var(--r-element);
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.15s, background 0.15s;
}
.filter-bar input { flex: 1; min-width: 220px; }
.filter-bar select { width: auto; min-width: 170px; }
.filter-bar input::placeholder { color: var(--muted); }

.filter-bar input:focus, .filter-bar select:focus, .feld:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 3px var(--brand-soft);
}

/* ── Tabelle ─────────────────────────────────────────────────
   Kein Rahmen ringsum, keine vertikalen Linien: Zeilen trennen
   reicht. Jede weggelassene Linie macht die Daten lauter. */
.tabelle-huelle {
  border-radius: var(--r-flaeche);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 6px 20px rgba(30, 58, 95, 0.07),
    0 1px 3px rgba(30, 58, 95, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 0.5px rgba(226, 232, 229, 0.9);
}

/* Breite Tabellen scrollen in ihrer Hülle, nicht die ganze Seite. */
.tabelle-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

thead th {
  text-align: left;
  padding: 13px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(226, 232, 229, 0.7);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: rgba(255, 255, 255, 0.55); }

td .firma { font-weight: 700; letter-spacing: -0.01em; }
td .neben { color: var(--muted); font-size: 12px; margin-top: 2px; }
td .kennung {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--muted-strong);
}

/* ── Statusmarken ────────────────────────────────────────────
   Punkt plus Text statt Farbfläche allein: die Farbe trägt die
   Bedeutung nicht alleine, sonst geht sie bei Farbenblindheit und
   im Ausdruck verloren. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: var(--r-pille);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge-wartet, .badge-preise, .badge-vollstaendig {
  background: var(--wartet-soft); color: var(--wartet);
}
.badge-handeln, .badge-eingegangen, .badge-pdf {
  background: var(--brand-soft); color: var(--brand-dark);
}
.badge-kunde, .badge-bei_kunden {
  background: var(--extern-soft); color: var(--extern);
}
.badge-fertig, .badge-abgeschlossen {
  background: var(--erfolg-soft); color: var(--erfolg);
}
.badge-fehler, .badge-abgelehnt {
  background: var(--fehler-soft); color: var(--fehler);
}

/* ── Zeilenaktion ────────────────────────────────────────── */
.btn-detail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: var(--r-element);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s;
}
.btn-detail:hover {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--brand), 0 2px 10px rgba(37, 99, 235, 0.18);
}

/* ── Leerer Zustand ──────────────────────────────────────── */
.empty, .leer {
  padding: 56px 24px;
  text-align: center;
  color: var(--muted-strong);
  border-radius: var(--r-flaeche);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── Telefon ─────────────────────────────────────────────────
   Eingaben mit mindestens 16px: Safari zoomt beim Fokus in jedes
   Feld mit kleinerer Schrift hinein und lässt die Seite verschoben
   zurück — der auffälligste Unterschied zwischen „Webseite" und
   „App". */
@media (max-width: 639px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size: 16px; }

  header { padding: 0 16px; height: 56px; }
  header .marke-wort { font-size: 14px; }
  .container { padding: 20px 14px 48px; }
  h1 { font-size: 22px; }

  /* Zweispaltig statt gestapelt: fünf Kacheln übereinander schieben die
     Tabelle unter die Falz, und die Tabelle ist der Grund, warum jemand
     die Seite öffnet. */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 13px 14px; }
  .stat-card .zahl { font-size: 24px; }
  .stat-card .label { font-size: 10px; margin-top: 5px; }

  /* Der Aktionsknopf gehört auf dem Telefon über die volle Breite. */
  .kopf-zeile { gap: 12px; }
  .kopf-zeile .knopf { width: 100%; justify-content: center; }

  html, body { overscroll-behavior-y: none; }
}

/* ============================================================
   Komponenten der übrigen Seiten

   Die Klassennamen stammen aus den bestehenden Templates und
   bleiben unverändert — so genügt dort ein <link> statt eines
   Umbaus. Was hier steht, ersetzt rund 1.800 Zeilen inline-CSS,
   die zehnmal leicht verschieden dastanden.
   ============================================================ */

/* ── Kopfleiste, Variante mit Titel ───────────────────────────
   Die Detailseiten setzen einen Titel in die Leiste. In 60 px
   Höhe darf der nicht in Seitenüberschriftsgröße stehen. */
header h1 { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
header > a {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: var(--r-element);
  white-space: nowrap;
}
header > a:hover { background: rgba(255, 255, 255, 0.7); color: var(--ink); }

/* Die Preis- und Prüfseiten nutzen eine Klasse statt des Elements. */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 28px;
  margin-bottom: 24px;
  border-radius: var(--r-flaeche);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 6px 20px rgba(30, 58, 95, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.header h1 { font-size: 20px; }

/* ── Karten ──────────────────────────────────────────────── */
.card, .review-card, .login-box, .info-box, .warn-box, .result-section {
  border-radius: var(--r-flaeche);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 6px 20px rgba(30, 58, 95, 0.07),
    0 1px 3px rgba(30, 58, 95, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 0.5px rgba(226, 232, 229, 0.9);
  margin-bottom: 18px;
  overflow: hidden;
}

.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.card-body, .card > .body { padding: 20px; }
.card > h2, .card > h3 { padding: 18px 20px 0; }
.review-card { padding: 20px; }

/* ── Knöpfe ──────────────────────────────────────────────────
   .btn ist der Bestand, .knopf die neue Benennung — beide
   führen zum selben Ergebnis, damit nichts umbenannt werden muss. */
.btn, .btn-primary, .btn-outline, .btn-secondary,
.btn-danger, .btn-warn, .btn-success, .btn-insign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 17px;
  border: 0;
  border-radius: var(--r-element);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.btn:active, .knopf:active { transform: translateY(1px); }

.btn-primary, .btn-insign {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.22);
}
.btn-primary:hover, .btn-insign:hover { background: #1d4ed8; }

.btn-success {
  background: var(--erfolg);
  color: #fff;
  box-shadow: 0 3px 10px rgba(10, 107, 72, 0.22);
}
.btn-success:hover { background: #085639; }

.btn-danger {
  background: var(--fehler);
  color: #fff;
  box-shadow: 0 3px 10px rgba(180, 35, 24, 0.2);
}
.btn-danger:hover { background: #97180f; }

.btn-warn {
  background: var(--extern-soft);
  color: var(--extern);
  box-shadow: inset 0 0 0 1px rgba(138, 90, 0, 0.25);
}

.btn-outline, .btn-secondary {
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-outline:hover, .btn-secondary:hover { background: #fff; }

.btn-group, .actions, .actions-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.actions, .actions-bar { margin-top: 16px; }

/* ── Statusbanner ────────────────────────────────────────────
   Sagt in einem Satz, wer am Zug ist. Der farbige Streifen links
   trägt die Zuordnung, nicht die Fläche — eingefärbte Flächen
   lesen sich wie Fehlermeldungen. */
.status-banner {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 18px 20px 18px 17px;
  margin-bottom: 22px;
  border-radius: var(--r-flaeche);
  border-left: 3px solid var(--muted);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 6px 20px rgba(30, 58, 95, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.status-banner .icon { font-size: 22px; line-height: 1.2; flex: none; }
.status-banner .titel { font-weight: 800; font-size: 15px; letter-spacing: -0.015em; margin-top: 3px; }
.status-banner .beschreibung { color: var(--muted-strong); font-size: 13px; margin-top: 5px; }

.todo-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-pille);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--wartet-soft);
  color: var(--wartet);
}

.banner-dennis { border-left-color: var(--brand); }
.banner-dennis .todo-chip { background: var(--brand-soft); color: var(--brand-dark); }
.banner-kunde { border-left-color: var(--extern); }
.banner-kunde .todo-chip { background: var(--extern-soft); color: var(--extern); }
.banner-ok { border-left-color: var(--erfolg); }
.banner-ok .todo-chip { background: var(--erfolg-soft); color: var(--erfolg); }
.banner-rot { border-left-color: var(--fehler); }
.banner-rot .todo-chip { background: var(--fehler-soft); color: var(--fehler); }
.banner-system { border-left-color: var(--muted); }

/* ── Meldungen ───────────────────────────────────────────── */
.alert-error, .alert-success, .flash, .error, .status-msg,
.info-box, .warn-box, .mec-error-banner {
  padding: 13px 16px;
  border-radius: var(--r-element);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.alert-error, .error, .mec-error-banner {
  background: var(--fehler-soft);
  color: var(--fehler);
  box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.18);
}
.alert-success { background: var(--erfolg-soft); color: var(--erfolg); box-shadow: inset 0 0 0 1px rgba(10, 107, 72, 0.18); }
.info-box { background: var(--brand-soft); color: var(--brand-dark); box-shadow: none; padding: 16px 18px; }
.warn-box { background: var(--extern-soft); color: var(--extern); box-shadow: none; padding: 16px 18px; }
.flash { background: var(--erfolg-soft); color: var(--erfolg); }
.flash-error, .flash-fehler { background: var(--fehler-soft); color: var(--fehler); }

/* ── Datenpaare ──────────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px 22px;
}
.info-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.info-value { font-size: 14px; margin-top: 3px; }
.meta, .firma-meta, .review-meta, .hint, .format-hint, .lead {
  color: var(--muted-strong);
  font-size: 12.5px;
}
.lead { font-size: 14px; margin-bottom: 18px; }
.hint, .format-hint { margin-top: 5px; }

/* ── Formulare ───────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 15px;
}
.form-grid .full { grid-column: 1 / -1; }

label { display: block; font-size: 12px; font-weight: 700; color: var(--muted-strong); margin-bottom: 5px; }
.required::after { content: " *"; color: var(--fehler); }

/* Formularfelder füllen ihre Spalte — außer in der Filterleiste, die ihre
   Breiten selbst regelt. Ohne die Ausnahme sprengt jedes Auswahlfeld dort
   die Zeile und die Leiste bricht um. */
.form-grid input, .form-grid select, .form-grid textarea,
.card-body > form input:not([type="checkbox"]):not([type="radio"]),
.card-body > form select, .card-body > form textarea,
.login-box input, .assign-form select, .ablehnen-form textarea, .preis-input {
  width: 100%;
  padding: 10px 14px;
}

input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="password"], select, textarea {
  padding: 10px 14px;
  border: 0;
  border-radius: var(--r-element);
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.15s, background 0.15s;
}
input:focus, select:focus, textarea:focus, .preis-input:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 3px var(--brand-soft);
}
textarea { min-height: 90px; resize: vertical; }

.checkbox-label, .alias-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0;
}
.checkbox-label input, .alias-check input { width: auto; }

/* ── Auslastungsbalken ───────────────────────────────────── */
.progress-wrap { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.progress-bar {
  flex: 1;
  height: 7px;
  border-radius: var(--r-pille);
  background: var(--wartet-soft);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--r-pille);
  background: var(--brand);
  transition: width 0.3s;
}
.progress-text { font-size: 12px; font-weight: 700; color: var(--muted-strong); white-space: nowrap; }

/* Ab 80 % bernstein, ab 100 % rot — die Farbe soll die Zahl bestätigen. */
.progress-fill.warn, .progress-fill[data-stufe="warn"] { background: var(--extern); }
.progress-fill.alert, .progress-fill[data-stufe="alert"] { background: var(--fehler); }

/* ── Pillen und Marken der Nebenseiten ───────────────────── */
.badge-ok, .badge-green, .pill-green { background: var(--erfolg-soft); color: var(--erfolg); }
.badge-fast, .badge-yellow, .pill-yellow { background: var(--extern-soft); color: var(--extern); }
.badge-overage, .badge-red, .pill-red { background: var(--fehler-soft); color: var(--fehler); }
.badge-beendet, .badge-gray, .pill-gray { background: var(--wartet-soft); color: var(--wartet); }

.pill-green, .pill-yellow, .pill-red, .pill-gray, .stat-pill, .alias-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pille);
  font-size: 12px;
  font-weight: 700;
}
.alias-pill { background: var(--brand-soft); color: var(--brand-dark); }
.aliases { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.alias-empty { color: var(--muted); font-size: 12.5px; }
.stats-row { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.stat-pill { background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px var(--line); }

/* ── Brotkrume ───────────────────────────────────────────── */
.breadcrumb { font-size: 12.5px; color: var(--muted-strong); margin-bottom: 14px; }
.breadcrumb a { color: var(--brand-dark); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }

/* ── Anmeldung ───────────────────────────────────────────── */
.login-box {
  max-width: 360px;
  margin: 12vh auto;
  padding: 32px 30px;
}
.login-box .logo, .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.login-box .btn, .login-box button { width: 100%; margin-top: 6px; }

/* ── Preistabelle ────────────────────────────────────────── */
.preistabelle { width: 100%; border-collapse: collapse; }
.preistabelle td { padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.preistabelle tr:last-child td { border-bottom: 0; }
.preis-input { max-width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.einheit { color: var(--muted); font-size: 12.5px; padding-left: 8px; }
.kundendaten { color: var(--muted-strong); font-size: 13px; }

/* ── PDF-Vorschau ────────────────────────────────────────── */
.pdf-preview {
  width: 100%;
  height: 74vh;
  border: 0;
  border-radius: var(--r-flaeche);
  background: #fff;
  box-shadow: 0 6px 20px rgba(30, 58, 95, 0.09);
}
.pdf-link { font-weight: 700; }

/* ── Schulungsimport ─────────────────────────────────────── */
.file-input-wrapper {
  padding: 30px 22px;
  border-radius: var(--r-flaeche);
  border: 2px dashed var(--line);
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.file-input-wrapper:hover, .file-input-wrapper.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.options { display: flex; gap: 20px; flex-wrap: wrap; margin: 16px 0; }
.option-group { display: flex; flex-direction: column; gap: 8px; }

.spinner {
  width: 17px;
  height: 17px;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: dreh 0.7s linear infinite;
  display: inline-block;
}
@keyframes dreh { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted-strong); }

/* Wer Bewegung im System abgeschaltet hat, soll sie nicht sehen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Nachzügler aus einzelnen Seiten ─────────────────────── */
.review-subject { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.review-from { color: var(--muted-strong); font-size: 12.5px; margin-top: 3px; }

.assign-form, .ablehnen-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.assign-form select { max-width: 320px; }
.ablehnen-form textarea { flex: 1; min-width: 240px; min-height: 62px; }

/* Preisliste in der Detailansicht */
.preise { display: grid; gap: 8px; }
.preise > div { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }

/* ── Anmeldung: Wortmarke stapeln ────────────────────────────
   Zwei Zeilen übereinander, nicht nebeneinander — als Reihe
   drängen sich Name und Untertitel in die Breite und brechen. */
.login-box .logo, .logo { flex-direction: column; gap: 3px; text-align: center; }
.login-box .logo h1 { font-size: 19px; }
.login-box .logo p { color: var(--muted-strong); font-size: 12.5px; font-weight: 600; }
.login-box label { margin-top: 13px; }

/* Ein Absenden-Knopf ohne Klasse bleibt sonst im Browser-Grau
   stehen — auf der Anmeldeseite ist das der einzige Knopf. */
form button[type="submit"]:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 18px;
  padding: 11px 17px;
  border: 0;
  border-radius: var(--r-element);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.22);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
form button[type="submit"]:not([class]):hover { background: #1d4ed8; }
form button[type="submit"]:not([class]):active { transform: translateY(1px); }

/* ── Freigabeseiten für Dennis ───────────────────────────────
   Diese beiden Seiten kommen ohne Kopfleiste und ohne Container
   aus — sie werden über einen HMAC-Link direkt geöffnet. Ohne
   Breitenbegrenzung liefe die Karte sonst über den ganzen
   Bildschirm und die Preistabelle würde unlesbar breit. */
body > .card {
  max-width: 860px;
  margin: 40px auto;
}
body > .card > .header { margin-bottom: 0; border-radius: 0; box-shadow: none; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--line); }
body > .card > .header p { color: var(--muted-strong); font-size: 12.5px; margin-top: 4px; }

@media (max-width: 639px) {
  body > .card { margin: 16px 14px; }
}

/* ── Kennzahlen mit Aussage ──────────────────────────────────
   Die Notfallnummern-Übersicht markiert zwei Kacheln als
   handlungsbedürftig. Ein Streifen an der Kante genügt — eine
   eingefärbte Fläche schriee, und dann schreien alle. */
.stat-card.warn  { position: relative; overflow: hidden; }
.stat-card.alert { position: relative; overflow: hidden; }
.stat-card.warn::before, .stat-card.alert::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.stat-card.warn::before  { background: var(--extern); }
.stat-card.alert::before { background: var(--fehler); }
.stat-card.warn .zahl    { color: var(--extern); }
.stat-card.alert .zahl   { color: var(--fehler); }

/* Eine Kachel, die verlinkt, muss sich auch anfassen lassen. */
.stat-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.stat-card a:hover .zahl { text-decoration: underline; text-underline-offset: 3px; }

/* ── Abschnittsüberschrift ───────────────────────────────────
   Trennt Bereiche innerhalb einer Seite. Ersetzt die bisher
   inline gesetzten Varianten. */
.abschnitt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin: 34px 0 18px;
  border-bottom: 1px solid var(--line);
}
.abschnitt:first-child { margin-top: 0; }
.abschnitt h2 { font-size: 17px; }
.abschnitt .anmerkung { color: var(--muted); font-size: 12.5px; }

/* ── Kartenkopf mit Statusmarken ─────────────────────────── */
.card-header.kopf-mit-marken {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.card-header .marken { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hinweis-oben  { margin-bottom: 14px; }
.hinweis-unten { margin-top: 14px; }

/* Eine Nebenhandlung soll nicht wie die Hauptsache aussehen. */
.nebenaktion {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.nebenaktion .btn { font-size: 12px; padding: 7px 13px; }

/* ── Angemeldete Person in der Kopfleiste ────────────────── */
header .nutzer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  white-space: nowrap;
}
header .nutzer-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
header .rolle {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pille);
  background: var(--wartet-soft);
  color: var(--wartet);
}
header .rolle.admin   { background: var(--brand-soft); color: var(--brand-dark); }
header .rolle.bearbeiter { background: var(--erfolg-soft); color: var(--erfolg); }
header .rolle.notfall { background: var(--fehler-soft); color: var(--fehler); }
header .abmelden.aktiv { background: var(--brand-soft); color: var(--brand-dark); }

/* Auf dem Telefon passen Bereiche und angemeldete Person nicht in eine
   Zeile: Die Bereiche wurden auf wenige Pixel zusammengeschoben und waren
   praktisch unsichtbar. Deshalb zweizeilig — oben Marke und Person,
   darunter die Bereiche über die volle Breite. */
@media (max-width: 639px) {
  header .nutzer-name { display: none; }
  header { flex-wrap: wrap; height: auto; row-gap: 2px; padding: 8px 16px 6px; }
  header .nutzer { margin-left: auto; }
  header nav.bereiche { order: 3; flex-basis: 100%; margin: 0 0 0 -14px; }
  /* Die Unterleiste klebt am Desktop 60 px unter der Kopfleiste. Die ist
     hier höher und nicht fest, die Unterleiste würde sie überdecken —
     sie scrollt deshalb mit. */
  .unterleiste { position: static; }
}

/* Der Notfallzugang soll nicht bequem wirken — er ist ein Übergang. */
.notfall-leiste {
  background: var(--fehler-soft);
  color: var(--fehler);
  font-size: 12.5px;
  padding: 9px 24px;
  text-align: center;
  border-bottom: 1px solid rgba(180, 35, 24, 0.15);
}
.notfall-leiste a { color: var(--fehler); font-weight: 700; }
.notfall-leiste code { font-size: 11.5px; }

/* ── Benutzerverwaltung ──────────────────────────────────── */
/* Eine Adresse, die an ihrem Bindestrich umbricht, liest sich wie zwei.
   Name, Adresse und Einstellungen bleiben deshalb einzeilig; wird es zu
   eng, scrollt die Tabelle in ihrer Hülle. */
.nutzer-tabelle .firma, .nutzer-tabelle .neben { white-space: nowrap; }
.nutzer-tabelle .badge + .neben { margin-top: 6px; }
.nutzer-einstellungen {
  display: flex;
  gap: 12px;
  align-items: center;
}
.nutzer-einstellungen select { width: auto; padding: 6px 10px; font-size: 12.5px; }
.nutzer-einstellungen .checkbox-label { font-size: 12.5px; font-weight: 600; margin: 0; white-space: nowrap; }

/* Nebeneinander, solange Platz ist — sonst untereinander statt aus der Zeile heraus. */
.zeilen-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.zeilen-aktionen form { margin: 0; }

/* ── Export ──────────────────────────────────────────────── */
.export-leiste {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.export-leiste label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
}
.export-leiste input[type="date"] { width: auto; padding: 7px 10px; font-size: 12.5px; }

/* ── Abrechnung der Altfälle ─────────────────────────────── */
/* Zwei Wege nebeneinander, gleich gewichtet: Die Entscheidung liegt beim Menschen. */
.abrechnung-aktionen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.abrechnung-aktionen form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-element);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px var(--line);
}
.abrechnung-aktionen label { flex-basis: 100%; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted-strong); }
.abrechnung-aktionen input { flex: 1; min-width: 180px; width: auto; }
@media (max-width: 980px) {
  .abrechnung-aktionen { grid-template-columns: minmax(0, 1fr); }
}

/* ── Perioden und Rechnungen (Stammdaten) ────────────────── */
/* Die Spalten der früheren Firmenübersicht von AFK; gespeichert wird je Zeile.
   Mehrzeilige Zellen oben ausrichten, sonst springen Eingaben und Marken. */
.perioden-tabelle th, .perioden-tabelle td { padding-left: 11px; padding-right: 11px; }
.perioden-tabelle td { vertical-align: top; }
.perioden-tabelle a.firma { color: var(--ink); text-decoration: none; }
.perioden-tabelle a.firma:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.perioden-tabelle .zahlen { font-variant-numeric: tabular-nums; }
.perioden-tabelle .einzeilig { white-space: nowrap; }
.perioden-tabelle .fehlt { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--fehler); }
.perioden-tabelle input[type="text"] { display: block; width: 138px; padding: 6px 9px; font-size: 12.5px; }
.perioden-tabelle .badge + input, .perioden-tabelle .neben + input { margin-top: 7px; }
.perioden-tabelle .badge + .kennung { margin-top: 5px; }
.perioden-tabelle .checkbox-label { margin-top: 7px; font-size: 12px; white-space: nowrap; }
.perioden-tabelle .speichern-zelle { text-align: right; }
.perioden-tabelle .speichern-zelle form { margin: 0; }
/* Ungespeicherte Eingaben: Der Knopf der Zeile wird zur Hauptaktion. */
.perioden-tabelle tr.geaendert .btn-detail { background: var(--brand); color: #fff; box-shadow: none; }
.perioden-tabelle tr.gespeichert { background: var(--brand-soft); }
.zeilen-meldung { max-width: 170px; margin: 6px 0 0 auto; font-size: 11.5px; font-weight: 700; text-align: right; }
.zeilen-meldung.ok { color: var(--erfolg); }
.zeilen-meldung.fehler { color: var(--fehler); }
@media (max-width: 639px) {
  .perioden-tabelle input[type="text"] { font-size: 16px; }
}

/* ── Rechnung aus Lexware ansehen ────────────────────────── */
.beleg-links { margin-top: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.beleg-links a { color: var(--brand-dark); text-decoration: none; }
.beleg-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.beleg-links span { color: var(--muted); }

/* Firmen-Details: Entscheidung direkt unter der offenen Periode */
tr.mit-aktionen td { border-bottom: 0; }
tr.aktionen-zeile td { padding-top: 0; }
tr.aktionen-zeile .abrechnung-aktionen { margin-top: 8px; }

/* ── Perioden bearbeiten, Vermerke, Kommentare ───────────── */
tr.hat-zusatz td { border-bottom: 0; }
tr.perioden-zusatz td { padding-top: 0; }
.kommentar { margin-top: 4px; font-size: 12.5px; color: var(--ink); }
.kommentar span { font-weight: 700; color: var(--muted-strong); }
.kommentar-kurz { max-width: 220px; margin-top: 4px; font-size: 11.5px; font-style: italic; color: var(--muted-strong); }
.zusatz-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 20px; margin-top: 8px; }
details.aufklapp > summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; color: var(--brand-dark); }
details.aufklapp > summary::-webkit-details-marker { display: none; }
details.aufklapp > summary::before { content: "▸ "; }
details.aufklapp[open] > summary::before { content: "▾ "; }
details.aufklapp[open] { flex-basis: 100%; }
.form-grid.kompakt {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 12px;
  margin-top: 10px;
  padding: 14px;
  border-radius: var(--r-element);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px var(--line);
}
.vermerk-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.vermerk-form input { min-width: 220px; }
.vermerk-form label { margin-bottom: 4px; }
.link-knopf { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--fehler); cursor: pointer; }
.link-knopf:hover { text-decoration: underline; text-underline-offset: 3px; }
.inline-form { margin: 0; }
.firma-status { margin: 10px 0 16px; }