/* ═══════════════════════════════════════════════════════════════
   Miethub – Design System
   Font: system-ui (no web fonts)
   Grid: 8px base · Radius: 6px (md) / 10px (lg)
═══════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:            #0f172a;
  --surface:       #1e293b;
  --surface-2:     #263549;
  --card-bg:       #1e293b;

  /* Borders */
  --border:        rgba(255,255,255,.08);
  --border-2:      rgba(255,255,255,.13);

  /* Text */
  --text:          #e2e8f0;
  --text-2:        #cbd5e1;
  --text-3:        #94a3b8;
  /* .52 (vorher .28 = nur 2,4:1): kleinster Wert mit >= 4,5:1 auf --bg/--surface/--surface-2
     (5,6 / 5,1 / 4,6) und trotzdem ueberall etwas dunkler als --text-3. Audit 12.10.2026. */
  --text-4:        rgba(255,255,255,.52);

  /* Schriftstufen: 12.10.2026 fünf Textstufen, seit 21.10.2026 (doku/PLAN_GUI_AUFRAEUMEN.md G2) sieben Stufen für
     ALLES. Keine Handwerte mehr; jede Größe nimmt die nächstgelegene Stufe. Ausnahmen: Symbolgrößen (Schließen-Kreuze,
     Fahrzeug, Statussymbole) und die großen Kennzahlen über 29 px (Dashboard, Verfügbarkeit, Zuverlässigkeit). */
  --fs-marke:      .6875rem;  /* 11 px  Marken, Abzeichen; kleinste erlaubte Schrift (impeccable-Untergrenze) */
  --fs-leise:      .75rem;    /* 12 px  Abschnittstitel, Metadaten, leiser Zusatz */
  --fs-klein:      .82rem;    /* 13 px  Nebentext, Namen in Kacheln */
  --fs-text:       .875rem;   /* 14 px  normaler Text, Bedienelemente */
  --fs-hervor:     1rem;      /* 16 px  Kartentitel, Hervorhebung, Beträge */
  --fs-titel:      1.25rem;   /* 20 px  Fenster- und Bereichstitel, Name im Buchungskopf, große Zahlen */
  --fs-seite:      1.6rem;    /* 26 px  Seitentitel (h1) */
  --font-mono:     ui-monospace, 'Cascadia Code', Consolas, Menlo, monospace;   /* nur Codes, Schlüssel, Fehlertexte */

  /* Blue (primary / interactive) */
  --blue:          #3b82f6;
  --blue-h:        #2563eb;   /* Grund des Hauptknopfs: weisse Schrift 5,2:1 (auf --blue nur 3,7:1) */
  --blue-d:        #1d4ed8;   /* Hover des Hauptknopfs (6,7:1) */
  --blue-bg:       rgba(37,99,235,.15);
  --blue-border:   rgba(59,130,246,.3);
  /* Text-Farben auf dunklen Flaechen (Audit 12.10.2026). Nur hier definieren, sonst Token benutzen.
     Ausnahme: E-Mails, Mail-Editor (mh_editor.js), Canvas, Leaflet und SVG-Attribute kennen kein var()
     und behalten feste Werte. */
  --blue-text:     #60a5fa;   /* blauer Text/Links: 4,9:1 auf --surface-2 (--blue nur 3,4:1) */
  --blue-text-2:   #93c5fd;   /* hellerer blauer Text, wie --purple-2 */

  /* Green (success / confirm) */
  --green:         #22c55e;
  --green-h:       #16a34a;
  --green-bg:      rgba(22,163,74,.12);
  --green-border:  rgba(34,197,94,.3);
  --green-text:    #86efac;   /* Erfolg (Text) */

  /* Red (danger / reject) */
  --red:           #ef4444;
  --red-h:         #dc2626;
  --red-bg:        rgba(220,38,38,.12);
  --red-border:    rgba(239,68,68,.3);
  --red-text:      #fca5a5;   /* Fehler (Text) */

  /* Amber (warning) */
  --amber:         #f59e0b;
  --amber-bg:      rgba(217,119,6,.13);
  --amber-border:  rgba(245,158,11,.3);
  --amber-text:    #fbbf24;   /* Warnung (Text) */

  /* Purple (special state) — Akzentfarbe „Kommunikation" */
  --purple:        #a78bfa;
  --purple-2:      #c4b5fd;          /* hellerer Text auf Lila-Flaechen */
  --purple-rgb:    139 92 246;       /* Basiston fuer rgb(var(--purple-rgb) / a) */
  --purple-surface: #231a38;         /* dunkle Lila-Flaeche = E-Mail-Kommunikationsbereich */
  --purple-bg:     rgba(124,58,237,.15);
  --purple-border: rgba(167,139,250,.3);

  /* Brand dark accent (section headers, nav) */
  --dark:          #0d1623;
  --dark-2:        #141f2d;
  --dark-ink:      #e2e8f0;

  /* Form field background */
  --input-bg:      rgba(255,255,255,.05);

  /* Navigation sidebar */
  --nav-bg:        #0f172a;
  --nav-text:      #94a3b8;
  --nav-active-bg: rgba(37, 99, 235, .22);
  --nav-active-t:  var(--blue-text-2);

  /* Email tile system */
  --tile-bg0:      #3b47d6;
  --tile-bg1:      #323fcc;
  --tile-ink:      #f8f9ff;

  /* Structure */
  --nav-w:         210px;
  --r:             6px;
  --r-lg:          10px;
  --r-karte:       12px;   /* EINE Kartenecke (mh-card und alle Kästen, die als Karte auf der Seite stehen), GUI G4 */
  --shadow-sm:     0 1px 3px rgba(0,0,0,.35);
  --shadow-md:     0 2px 8px rgba(0,0,0,.45);
  --shadow-lg:     0 4px 16px rgba(0,0,0,.55);
}


/* ── 2. Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--text); line-height: 1.3; }
p { margin: 0; }

h1 { font-size: var(--fs-seite); margin-bottom: .875rem; }

a { color: var(--blue-text); }
a:hover { color: var(--blue-h); }

/* Browser-Flächen aus den Tokens (DESIGN.md §17 Schritt 7, 13.10.2026). Vorher Browser-Standard: hellblaue
   Markierung, schwarz-weißer Fokusring, graue Systembalken, Häkchen in Chrome-Blau. */
::selection { background: color-mix(in srgb, var(--blue) 42%, transparent); }
:root { accent-color: var(--blue-h); scrollbar-color: color-mix(in srgb, var(--text-3) 45%, transparent) transparent; }
:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }
table { font-variant-numeric: tabular-nums; }
a { text-underline-offset: .18em; }
.mh-nav-link:focus-visible { outline-offset: -2px; }   /* Menü scrollt: ein Ring nach außen würde seitlich abgeschnitten */
input, textarea, [contenteditable="true"] { caret-color: var(--blue-text); }

.hidden { display: none !important; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
}


/* ── 3. Sidebar Layout ───────────────────────────────────── */
.mh-layout {
  display: flex;
  min-height: 100vh;
}

.mh-sidebar {
  width: var(--nav-w);
  min-height: 100vh;
  background: var(--nav-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 200;
  /* Menü höher als das Fenster (~900 px Inhalt): ohne Scrollen waren bei 1366x768 „Einstellungen"
     und „Abmelden" nicht erreichbar (gemessen 12.10.2026). Gilt auch für den Drawer ≤1024px. */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

.mh-main {
  margin-left: var(--nav-w);
  flex: 1;
  min-width: 0;
  /* Mittige Spalte (DESIGN.md §1, 21.10.2026): der Inhalt wird höchstens --inhalt-max breit, der Rest wird
     gleichmäßiger Rand. Über den Innenabstand statt max-width an den Kindern, damit feste Leisten, Schubladen und
     Dialoge unberührt bleiben. Die festen Leisten der Buchungsseite nehmen denselben Rand (anfrage_detail.css), damit
     Kopf, Inhalt und Fußleiste an einer Linie stehen. 100vw statt %: dieselbe Formel in jedem Zusammenhang, und die
     linke Kante springt nicht zwischen Seiten mit und ohne Scrollbalken. */
  --inhalt-max: 1600px;
  --rand-inhalt: max(1.75rem, calc((100vw - var(--nav-w) - var(--inhalt-max)) / 2));
  padding: 1.5rem var(--rand-inhalt);
}
.mh-main--schmal { --inhalt-max: 1280px; }   /* Einstellungen */
.mh-main--voll   { --inhalt-max: 100vw; }    /* Kalender, GPS: brauchen die Breite */
/* Lesebreite: Fließtext höchstens 75 Zeichen je Zeile (vorher liefen Absätze auf breiten Bildschirmen über 280
   Zeichen). Ein zentrierter Hinweis braucht dazu margin-inline:auto (Beispiel .kl-drop in kundenlogos.html). */
.mh-main p, .mh-main .kf-hint { max-width: 75ch; }


/* ── 4. Sidebar Navigation ──────────────────────────────── */
.mh-sidebar-brand {
  padding: 1.1rem 1.25rem .85rem;
  font-size: var(--fs-hervor);
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: .4rem;
}
.mh-brand-logo {
  display: block;
  max-width: 100%;
  max-height: 48px;
  width: auto;
  margin-bottom: .45rem;
  object-fit: contain;
}
.mh-sidebar-brand small {
  display: block;
  font-size: var(--fs-marke);
  font-weight: 400;
  color: var(--text-4);
  margin-top: .15rem;
}

.mh-search {
  padding: .55rem .9rem .35rem;
}
.mh-search-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: #e2e8f0;
  font-size: var(--fs-klein);
  padding: .42rem .65rem;
  outline: none;
}
.mh-search-input::placeholder { color: var(--text-3); }
/* Platzhalter überall lesbar (impeccable 13.10.2026): Browser-Grau #757575 hatte auf Dunkel nur 2,3 bis 2,7:1,
   reines --text-3 auf den helleren Feldern (#343e4e) 4,2:1. Die Mischung schafft dort 5,1:1 und bleibt
   deutlich blasser als echter Inhalt (--text). */
::placeholder { color: color-mix(in srgb, var(--text-3) 70%, var(--text-2)); opacity: 1; }
.mh-search-input:focus {
  border-color: var(--border-2);
  background: rgba(255,255,255,.08);
}

.mh-nav {
  list-style: none;
  padding: .25rem 0;
  margin: 0;
  flex: 1;
}
.mh-nav li { margin: 0; }

.mh-nav-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.25rem;
  color: var(--nav-text);
  text-decoration: none;
  font-size: var(--fs-text);
  font-weight: 500;
  transition: background .12s, color .12s;
}
.mh-nav-link:hover { background: rgba(255,255,255,.07); color: #e2e8f0; }
.mh-nav-link.active { background: var(--nav-active-bg); color: var(--nav-active-t); font-weight: 600; }

/* Symbole (DESIGN.md §17): Grundregel .mh-i und alle Symbole stehen in static/icons/mh-icons.css
   (gebaut von symbole_bauen.py). Hier nur Größe und Abstand je Ort. */
.mh-nav-link .mh-i { width: 1.1rem; height: 1.1rem; margin: 0; }   /* Abstand macht das gap der Zeile */
.mh-burger .mh-i { width: 1.35rem; height: 1.35rem; margin: 0; }
.mh-waechter .mh-i { width: 1rem; height: 1rem; margin-right: .4rem; }
/* Suchfeld der Seitenleiste: Lupe als Symbol im Feld (vorher Emoji im Platzhalter). Doppelte Klasse,
   weil input.mh-search-input (Listen-Suche weiter unten) sonst das Polster überschreibt. */
.mh-search-feld { position: relative; display: block; }
.mh-search-feld .mh-i {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; margin: 0; color: var(--text-3); pointer-events: none;
}
/* Farbpunkt statt farbiger Emoji-Kreise, z. B. „Live" und Schaden/Verlust */
.mh-punkt { display: inline-block; flex: none; width: .55em; height: .55em; border-radius: 50%;
  background: currentColor; vertical-align: .08em; margin-inline-end: .4em; }
.mh-punkt--rot    { background: #ef4444; }
.mh-punkt--gruen  { background: #22c55e; }
.mh-punkt--orange { background: #f97316; }
.mh-search .mh-search-input { padding-left: 2.15rem; }

/* Wartet-auf-dich-Zähler im Menü (offene Verfügbarkeitsanfragen, unmoderierte Bewertungen) */
/* REIHENFOLGE BEACHTEN: erst die Grundregel, dann die Variante. Beide Selektoren haben dieselbe
   Spezifität (eine Klasse), und das Element trägt beide Klassen — die spätere Regel gewinnt also.
   Bis zum 09.09.2026 stand `--info` davor; dadurch wurde die blaue Marke gelb übermalt und ihr
   Abstand verworfen. Zwei gleich aussehende Zähler mit „1" lasen sich als eine doppelte 1
   (David: „Da wird doppelt die 1 angezeigt"). */
.mh-nav-count {
  margin-left: auto;
  min-width: 1.35rem;
  text-align: center;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--amber-text);
  color: var(--bg);
  font-size: var(--fs-leise);
  font-weight: 700;
}

/* Zweiter Nav-Zaehler (David 17.08.2026): blau statt gelb. Gelb heisst „da wartet Arbeit",
   blau heisst „da ist etwas passiert, schau mal rein". */
.mh-nav-count--info {
  background: #38bdf8;
  margin-left: .25rem;
}

.mh-sidebar-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: .25rem 0 .5rem;
}
/* Zaehler des Mail-Import-Waechters (07.09.2026) */
.mh-waechter { font-size: var(--fs-leise); color: var(--text-3); padding: .35rem .9rem .25rem; line-height: 1.3;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-waechter b { color: var(--text-2); font-weight: 600; }
.mh-waechter small { display: block; font-size: var(--fs-marke); color: var(--text-3); white-space: normal; }
.mh-waechter--fehler b { color: var(--red-text); }


/* ── 5. Dashboard Stat Cards ─────────────────────────────── */





.mh-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 60vh; color: var(--text-4);
  text-align: center; gap: .75rem;
}
.mh-placeholder-icon { font-size: 3rem; }
.mh-placeholder h2   { font-size: var(--fs-titel); color: var(--text-2); }
.mh-placeholder p    { font-size: var(--fs-text); max-width: 340px; }


/* ── 6. Status Badges ────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  font-size: var(--fs-leise); padding: .18rem .5rem;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; white-space: nowrap; text-decoration: none;
  line-height: 1.4;
}


/* Dokument-Vorschau (Ausweis/Immatrikulation): Thumbnails */
.doc-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin: .35rem 0 0; }
.doc-item { display: flex; flex-direction: column; gap: .25rem; max-width: 130px; }
.doc-thumb { position: relative; display: block; width: 130px; height: 92px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in; }
/* contain, nicht cover: Ausweise kommen oft als GESTAPELTES Vorder+Rückseiten-Bild —
   cover schnitt mittig einen unkenntlichen Streifen heraus (David 06.08.2026). Der weiße
   Kachelgrund wirkt dabei wie das Papier des Dokuments. */
.doc-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.doc-thumb:hover { border-color: var(--blue, #3b82f6); }
.doc-thumb--pdf .doc-thumb-tag { position: absolute; bottom: 4px; right: 4px; font-size: var(--fs-marke); font-weight: 700; color: #fff; background: rgba(220,38,38,.9); border-radius: 3px; padding: .05rem .3rem; }
.doc-meta { font-size: var(--fs-leise); color: var(--text-4); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-filelink { font-size: var(--fs-text); }





/* ── 7. Buttons ──────────────────────────────────────────── */
button {
  padding: .45rem .8rem;
  font-size: var(--fs-text);
  font-weight: 600;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: background .12s;
  font-family: inherit;
  line-height: 1.3;
}







/* ── 8. Form Elements ────────────────────────────────────── */
label {
  display: block;
  margin-bottom: .2rem;
  font-size: var(--fs-leise);
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.3;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: .4rem .6rem;
  margin-bottom: .65rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--input-bg);
  color: var(--text);
  font-size: var(--fs-text);
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s, background .12s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

textarea {
  min-height: 80px;
  resize: vertical;
}







/* Kunden-/Firmen-Formular Felder (.kf-*) – Struktur (Input bleibt kontextabhängig im Template) */
.kf-section { font-size: var(--fs-klein); font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--border); padding-bottom: .4rem; margin-bottom: .75rem; }
/* 4-Spalten-Formularraster: nutzt die Breite, Span-Helfer fuer Adresszeilen */
.kf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem 1rem; }
.kf-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.kf-field--full { grid-column: 1 / -1; }
.kf-field--2 { grid-column: span 2; }
.kf-field--3 { grid-column: span 3; }
/* Standard-Eingabefeld global (Default). Kontext-Sonderfälle (z. B. kunden_detail auf --surface) per lokalem Override. */
.kf-input { padding: .35rem .55rem; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--input-bg); color: var(--text); font-size: var(--fs-text); width: 100%; box-sizing: border-box; font-family: inherit; }
/* Datums-/Zeitfelder erben die Seitenschrift — Chromium setzt sie sonst in MONOSPACE
   (Browser-Voreinstellung; Davids „komische Courier-Schrift" bei „gültig bis"). */
input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"] { font-family: inherit; }
.kf-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,99,235,.1); }
.kf-input--auto { width: auto; }
/* Privat/Firma/Studi-Badge (20.08.2026, Fall Duckworth): Buchungsliste + Detailkopf.
   Privatpersonen in Warnfarbe — die Ausnahme im Bestand, Sets gehen normal an Firmen. */
/* Form und Farben aus der EINEN Pillenform (G4b, „EINE Pillenform" unten), hier nur die Lage */
.anf-mt { margin-left: .35rem; vertical-align: 1px; }
@media (max-width: 1100px) {
  .kf-grid { grid-template-columns: repeat(2, 1fr); }
  .kf-field--2, .kf-field--3 { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .kf-grid { grid-template-columns: 1fr; }
  .kf-field--2, .kf-field--3, .kf-field--full { grid-column: 1 / -1; }
}
.kf-label { font-size: var(--fs-leise); font-weight: 600; color: var(--text-3); }
.kf-hint { font-weight: 400; color: var(--text-4); }


/* ── 9. Tabs ─────────────────────────────────────────────── */
.tabs       { margin: .75rem 0; }

.tabs .tab-links {
  display: flex; flex-wrap: wrap;
  gap: .3rem;
  list-style: none; margin: 0 0 .75rem; padding: 0;
}

.tabs .tab-links li a {
  display: inline-block; padding: .4rem .8rem;
  text-decoration: none; color: var(--text-3);
  font-size: var(--fs-text); font-weight: 500;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.tabs .tab-links li a:hover { background: var(--surface); color: var(--text-2); }

.tabs .tab-links li.active a {
  background: rgba(96,165,250,.16); color: #bfdbfe; font-weight: 600;
}

.tab-pane        { display: none; }
.tab-pane.active { display: block; }

.tab-pane.highlight { animation: tabHighlight 1.2s ease-out; }
@keyframes tabHighlight {
  0%   { background: rgba(37,99,235,.15); }
  100% { background: transparent; }
}


/* ── 10. Section Cards ──────────────────────────────────── */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .875rem 1.125rem;
  margin-bottom: .875rem;
  overflow: hidden;
}
.section h3 {
  font-size: var(--fs-hervor); font-weight: 600; color: var(--dark-ink);
  background: var(--dark);
  margin: -.875rem -1.125rem .875rem;
  padding: .55rem 1.125rem;
  border-radius: var(--r) var(--r) 0 0;
  border-bottom: none;
}


/* ── 11. Documents ─────────────────────────────────────── */
.documents {
  padding: .875rem 1.125rem;
  border: 1px dashed var(--border-2);
  background: var(--bg); border-radius: var(--r); margin-top: .875rem;
}
.documents h3 { font-size: var(--fs-hervor); margin: 0 0 .75rem; }



/* ── 12. Warning System ─────────────────────────────────── */
.warn-card {
  border: 1px solid var(--amber-border);
  background: var(--amber-bg);
  border-radius: var(--r); padding: .55rem .8rem; margin-bottom: .45rem;
}
.warn-meldung   { font-size: var(--fs-text); color: var(--text); margin-bottom: .2rem; }
.warn-vorschlag { font-size: var(--fs-klein); color: var(--text-3); margin-bottom: .4rem; }



/* ── 15. List Page Header, Search, Filter Bar & Pagination ── */


/* Search bar */
.mh-search-wrap { position: relative; margin-bottom: .75rem; }
input.mh-search-input {
  width: 100%; box-sizing: border-box;
  padding: .55rem .875rem; padding-right: 2.25rem;
  border: 1px solid var(--border-2); border-radius: var(--r-lg);
  font-size: var(--fs-text); font-family: inherit;
  background: var(--input-bg); color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .12s;
  margin: 0;
}
input.mh-search-input:focus {
  outline: none; background: var(--surface);
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.mh-search-clear {
  position: absolute; right: .65rem; top: 50%; transform: translateY(-50%);
  color: var(--text-4); text-decoration: none; font-size: var(--fs-hervor); line-height: 1;
  transition: color .1s;
}
.mh-search-clear:hover { color: var(--text-2); }

/* Compact status line above list */
.mh-page-info { font-size: var(--fs-leise); color: var(--text-4); margin: 0 0 .65rem; }

/* Pagination */
.mh-pagination {
  display: flex; gap: .35rem; flex-wrap: wrap;
  justify-content: center; margin: 1.5rem 0 .75rem;
}
.mh-page-btn {
  padding: .3rem .65rem; border-radius: 2rem; text-decoration: none;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-2);
  font-size: var(--fs-klein); font-weight: 500; transition: background .1s, border-color .1s;
}
.mh-page-btn:hover { background: var(--border); }
.mh-page-btn.active { background: rgba(37,99,235,.22); color: var(--blue-text-2); border-color: rgba(59,130,246,.4); cursor: default; }
.mh-page-ellipsis { padding: .3rem .4rem; color: var(--text-4); font-size: var(--fs-klein); }

/* List table (.kl-*) – used by Kunden-, Firmen- & Suche-Listen, Firma-Detail */


.kl-dup { margin-left: .5rem; }   /* Form und Farbe: EINE Pillenform (G4b) */

/* kl-tab*: entfernt (totes Unterstrich-Tab-System, durch mh-tabs ersetzt) */

/* Collapsible groups (.kl-group*) – e.g. Firmenkunden nach Firma */


/* Kundentyp-Badge (.badge-mietertyp*): Form und Farben aus der EINEN Pillenform (G4b) */

/* Immatrikulations-Status-Badge (.immat-badge) – Kundenprofil & Anfrage-Detail */
.immat-badge { font-size: var(--fs-marke); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; }
.immat-badge--gueltig    { background: var(--green-bg); color: var(--green-text); }
.immat-badge--bald       { background: var(--amber-bg); color: #fcd34d; }
.immat-badge--abgelaufen { background: var(--red-bg);   color: var(--red-text); }
.immat-badge--fehlt      { background: rgba(255,255,255,.06); color: var(--text-4); }

/* Schnellsuche – Ergebnis-Trefferlisten (.su-*) */
.su-hint { color: var(--text-4); font-size: var(--fs-text); }
.su-count { color: var(--text-3); font-size: var(--fs-text); margin: 0 0 1rem; }
.su-block { margin-bottom: 1.5rem; }
.su-block-head { font-size: var(--fs-klein); font-weight: 600; color: var(--text-2); margin-bottom: .5rem; }
.su-block-head span { color: var(--text-4); font-weight: 400; }
.su-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.su-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main badge" "sub badge"; gap: 0 .75rem; padding: .55rem .85rem; text-decoration: none; border-bottom: 1px solid var(--border); }
.su-row:last-child { border-bottom: none; }
.su-row:hover { background: rgba(255,255,255,.04); }
.su-main { grid-area: main; font-weight: 600; color: var(--text); font-size: var(--fs-text); }
.su-sub { grid-area: sub; color: var(--text-4); font-size: var(--fs-leise); }
.su-badge { grid-area: badge; align-self: center; font-size: var(--fs-leise); color: var(--text-3); background: rgba(255,255,255,.06); padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.su-badge--type { background: var(--blue-bg); color: var(--blue-text-2); }
.su-inactive { color: var(--text-4); font-style: italic; font-weight: 400; font-size: var(--fs-klein); }

/* Equipment-Assistenten – gemeinsame Chrome (.be-*); Karten/Item-Layout bleibt pro Assistent im Template */
.be-progress { font-size:var(--fs-text); color:var(--text-4); font-weight:600; margin-left:auto; }
.be-progressbar { height:3px; background:var(--border); border-radius:2px; margin-bottom:1.5rem; }
.be-progressbar-fill { height:100%; background:var(--blue); border-radius:2px; transition:width .3s; }
.be-item-kat { font-size: var(--fs-leise); font-weight: 600; color:var(--text-4); }


/* ── 16. Zurück-Link oben auf Unterseiten (der Kopf der Buchungsseite steht in static/css/anfrage_detail.css) ── */
/* Bündig mit dem Seitentitel: 34 Seiten setzten das bisher je per style=, die übrigen standen 1rem eingerückt */
.dh-back {
  display: inline-block; margin-bottom: .55rem; text-decoration: none; color: var(--text-3); font-size: var(--fs-klein);
  flex-shrink: 0; padding: 0; transition: color .12s;
}
.dh-back:hover { color: var(--text); }


/* ── 17. Workflow Grid ──────────────────────────────────── */


.wf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .875rem 1rem;
  overflow: hidden;
}
.wf-card--warn {
  border-color: var(--amber-border);
  background: var(--amber-bg);
  grid-column: 1 / -1;
  overflow: visible;
}
.wf-card--warn .wf-title { color: #78350f; opacity: 1; }
.wf-card--warn h2.wf-title { font-size: var(--fs-hervor); text-transform: none; letter-spacing: 0; }

.wf-title {
  font-size: var(--fs-klein); font-weight: 600;
  color: var(--dark-ink); margin: 0;
  opacity: .85;
}



/* Equipment card */
.eq-card { grid-column: 1 / -1; }

/* Equipment-Liste: Items */
.eq-list { font-size: var(--fs-klein); }
.eq-list-rows { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.eq-list-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .2rem 0; }
.eq-list-row--opt { opacity: .85; }
.eq-list-row--opt-child {
  padding-left: 1.4rem;
  border-left: 1px solid var(--border-2);
  margin-left: .3rem;
}
.eq-list-row--opt-frei { padding-left: 1.2rem; }
/* Gruppen-Überschrift (z.B. "Weitere Optionen") */
.eq-list-group-label {
  font-size: var(--fs-leise); font-weight: 600;
  color: var(--text-4); margin: .5rem 0 .15rem; padding-top: .35rem;
  border-top: 1px solid var(--border);
}
.eq-list-group-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-4); opacity: .8; }
.eq-opt-reassign-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-4); font-size: var(--fs-text); padding: 0 .15rem;
  transition: color .12s; flex-shrink: 0;
}
.eq-opt-reassign-btn:hover { color: var(--blue-text); }
.eq-opt-picker-wrap { margin-left: 1.4rem; margin-bottom: .2rem; }
.eq-opt-picker { background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-radius: var(--r); padding: .5rem .65rem; display: flex; flex-direction: column; gap: .3rem; }
.eq-opt-picker-label { font-size: var(--fs-leise); font-weight: 600; color: var(--text-4); margin-bottom: .1rem; }
.eq-opt-pick-radio { font-size: var(--fs-klein); display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.eq-list-row--unknown { color: #b91c1c; }
.eq-list-item  { flex: 1; }
.eq-list-price { font-variant-numeric: tabular-nums; color: var(--text-3); flex-shrink: 0; }
.eq-list-actions { display: flex; gap: .5rem; align-items: center; }
.eq-list-bw { display: flex; flex-wrap: wrap; gap: .2rem .3rem; padding: .1rem 0 .3rem 1.2rem; align-items: center; }
.eq-list-bw--komplett { opacity: .8; }
.eq-list-bw-badge { font-size: var(--fs-marke); font-weight: 700; padding: .08rem .35rem; background: rgba(37,99,235,.2); color: var(--blue-text-2); border-radius: 999px; margin-right: .15rem; }
.eq-list-bw-chip { font-size: var(--fs-marke); padding: .08rem .35rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: .22rem; color: var(--text-3); line-height: 1.5; }
.eq-list-bw-empty { font-size: var(--fs-leise); color: var(--text-4); font-style: italic; }
.eq-bw-picker { display: flex; flex-direction: column; gap: .22rem; padding: .4rem .5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: .3rem; margin-bottom: .3rem; }
.eq-bw-pick-check { font-size: var(--fs-leise); color: var(--text); display: flex; align-items: center; gap: .3rem; cursor: pointer; }
.eq-bw-pick-check input { cursor: pointer; }
.eq-bw-pick-actions { display: flex; gap: .4rem; margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--border); }
.eq-bw-pick-save { font-size: var(--fs-leise); padding: .2rem .6rem; border-radius: var(--r); border: none; background: var(--blue); color: #fff; cursor: pointer; }
.eq-bw-pick-save:hover { opacity: .85; }
.eq-bw-pick-cancel { font-size: var(--fs-leise); padding: .2rem .5rem; border-radius: var(--r); border: 1px solid var(--border-2); background: none; color: var(--text-3); cursor: pointer; }

/* Monatsangebot an der Gerätezeile (parts/equipment_liste.html) */
.mbt-price-angebot { display: inline-block; font-size: var(--fs-marke); padding: .05rem .3rem; background: rgba(217,119,6,.2); color: var(--amber-text); border-radius: .2rem; margin-left: .2rem; }

/* Equipment-Liste: Modal */
.mbt-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.55); align-items: center; justify-content: center; }
.mbt-modal[style*="flex"] { display: flex !important; }
.mbt-modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; width: min(560px, 95vw); max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.35); }
.mbt-modal-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.mbt-modal-title { font-weight: 700; font-size: var(--fs-hervor); }
.mbt-modal-body { padding: .75rem 1rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.mbt-modal-foot { padding: .6rem 1rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; }
.mbt-modal-hint { font-size: var(--fs-leise); color: var(--text-3); margin: 0; }
.mbt-modal-hint--warn { color: var(--amber-text); font-weight: 600; margin-bottom: .25rem; }
.mbt-modal-hint--sub { font-size: var(--fs-leise); color: var(--text-4); margin-top: .3rem; }
.mbt-modal-unmatched { background: rgba(217,119,6,.06); border: 1px solid rgba(245,158,11,.2); border-radius: var(--r); padding: .55rem .7rem; display: flex; flex-direction: column; gap: .15rem; }
.mbt-modal-unmatched .mbt-assign-unknown { display: inline-block; font-size: var(--fs-klein); color: var(--text-2); }
.mbt-modal-cancel { padding: .35rem .85rem; border-radius: var(--r); cursor: pointer; background: none; border: 1px solid var(--border-2); color: var(--text); font-size: var(--fs-text); }
.mbt-assign-unknown { font-size: var(--fs-klein); color: #b91c1c; font-weight: 500; }
.mbt-assign-sel { width: 100%; padding: .3rem .4rem; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--input-bg); color: var(--text); font-size: var(--fs-klein); }
.mbt-assign-sep { border: none; border-top: 1px solid var(--border); margin: .25rem 0; }

.mbt-added-box { margin-top: .6rem; padding: .5rem .6rem; background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.2); border-radius: var(--r); }
.mbt-added-label { font-size: var(--fs-leise); font-weight: 600; color: var(--green); }
.mbt-added-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.mbt-added-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-leise); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: .12rem .2rem .12rem .5rem; color: var(--text); }
.mbt-added-chip button { background: none; border: none; cursor: pointer; color: var(--text-4); font-size: var(--fs-text); line-height: 1; padding: 0 .2rem; }
.mbt-added-chip button:hover { color: var(--red); }

.mbt-bw-list { display: flex; flex-direction: column; gap: .15rem; max-height: 320px; overflow-y: auto; }
.mbt-bw-list .eq-bw-pick-check { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-text); padding: .25rem .35rem; border-radius: var(--r); cursor: pointer; }
.mbt-bw-list .eq-bw-pick-check:hover { background: var(--surface-2); }

/* Quick-Add Button & Formular */
.mbt-modal-save {
  padding: .35rem .85rem; border-radius: var(--r); cursor: pointer;
  background: var(--blue); border: none; color: #fff; font-size: var(--fs-text); font-weight: 600;
}
.mbt-modal-save:hover { opacity: .9; }
.mbt-modal-save:disabled { opacity: .5; cursor: default; }
.qa-label { font-size: var(--fs-leise); color: var(--text-3); margin-top: .35rem; display: block; }
.qa-label:first-child { margin-top: 0; }
.qa-hint { font-weight: 400; color: var(--text-4); }
.qa-input {
  width: 100%; padding: .3rem .45rem; border: 1px solid var(--border-2);
  border-radius: var(--r); background: var(--input-bg); color: var(--text);
  font-size: var(--fs-text);
}
.mbt-add-search {
  width: 100%; padding: .4rem .6rem; border: 1px solid var(--border-2);
  border-radius: var(--r); background: var(--input-bg); color: var(--text);
  font-size: var(--fs-text); box-sizing: border-box;
}
.mbt-add-search:focus { outline: none; border-color: var(--blue); }
.mbt-add-results {
  border: 1px solid var(--border); border-radius: var(--r);
  overflow-y: auto; max-height: 240px; background: var(--surface-2);
}
.mbt-add-hit {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .65rem; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.mbt-add-hit:last-child { border-bottom: none; }
.mbt-add-hit:hover:not(.mbt-add-hit--already) { background: var(--surface-3, rgba(255,255,255,.06)); }
.mbt-add-hit--already { opacity: .45; cursor: default; }
.mbt-add-hit-name { flex: 1; font-size: var(--fs-text); }
.mbt-add-hit-price { font-size: var(--fs-klein); color: var(--text-3); white-space: nowrap; }
.mbt-add-hit-done { font-size: var(--fs-text); color: var(--green); margin-left: .2rem; }
.mbt-add-nohit { padding: .6rem .65rem; font-size: var(--fs-klein); color: var(--text-3); }

/* ── Mount-Picker (Equipment-Liste in Anfrage) ───── */
.eq-list-mount { display: flex; align-items: center; gap: .4rem; padding: .15rem .4rem .15rem 1.2rem; }
.eq-list-mount-chip { font-size: var(--fs-leise); font-weight: 600; background: var(--blue-bg, rgba(59,130,246,.15)); color: var(--blue-text); border-radius: 3px; padding: .1rem .45rem; }
.eq-list-mount-warn { font-size: var(--fs-leise); font-weight: 700; color: var(--amber-text); background: rgba(217,119,6,.14); border: 1px solid rgba(245,158,11,.3); border-radius: 3px; padding: .08rem .4rem; }
.eq-list-mount-picker-wrap { padding: .25rem .4rem .35rem 1.2rem; }
.eq-mount-pick-btns { display: flex; flex-wrap: wrap; gap: .3rem; }
.eq-mount-pick-btn { font-size: var(--fs-leise); padding: .2rem .65rem; border: 1px solid var(--border-2); border-radius: 4px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.eq-mount-pick-btn:hover { border-color: var(--blue); color: var(--blue-text); }
.eq-mount-pick-btn--active { background: var(--blue); color: #fff; border-color: var(--blue); }
.eq-mount-pick-btn--clear { border-color: transparent; color: var(--text-3); }
.eq-mount-pick-btn--clear:hover { color: var(--red); border-color: var(--red); background: none; }

/* ── Übernahme-Banner (Detailseite) ──────────────── */
.ueb-banner {
  display: flex; align-items: center; gap: .8rem;
  background: rgba(217,119,6,.12); border: 1px solid rgba(245,158,11,.35);
  border-radius: var(--r); padding: .7rem 1rem; margin-bottom: 1rem;
}
.ueb-banner-icon { font-size: 1.3rem; flex-shrink: 0; }
.ueb-banner-text { flex: 1; font-size: var(--fs-text); color: var(--text-2); line-height: 1.45; }
.ueb-banner-text strong { color: var(--amber-text); }
.ueb-banner-btn {
  flex-shrink: 0; padding: .45rem 1rem; border-radius: var(--r); cursor: pointer;
  background: var(--blue); border: none; color: #fff; font-size: var(--fs-text); font-weight: 600;
}
.ueb-banner-btn:hover { opacity: .9; }

/* ── Mount-Gruppen im Equipment-Formular ─────────── */
.eqf-mount-group { display: flex; align-items: baseline; gap: .65rem; margin-bottom: .45rem; }
.eqf-mount-group:last-of-type { margin-bottom: .6rem; }
.eqf-mount-group-label {
  font-size: var(--fs-leise); font-weight: 600;
  /* 4rem waren zu knapp für „VIA ADAPTER" in Versalien (04.08.2026); seit der normalen Schreibweise
     (DESIGN.md §17, 13.10.2026) reicht weniger, 5.5rem bleibt als Spaltenmaß. */
  color: var(--text-4); white-space: nowrap; min-width: 5.5rem;
}
.eq-mount-toggle--adapter { border-style: dashed; }

/* ── Serie-Verknüpfungen (Objektivset ↔ Einzelobjektiv) ── */
.eqf-serie-rel {
  margin-top: .9rem; padding: .65rem .8rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r);
}
.eqf-serie-rel-title { font-size: var(--fs-klein); font-weight: 600; color: var(--text-2); margin-bottom: .4rem; }
/* ── Bundle-Komponenten ──────────────────────────────── */
.bundle-komp-row {
  display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem;
  border-bottom: 1px solid var(--border); font-size: var(--fs-text);
}
.bundle-komp-row:last-child { border-bottom: none; }
.bundle-komp-kat { font-size: var(--fs-leise); font-weight: 600; color: var(--text-4); min-width: 80px; }
.bundle-komp-name { flex: 1; font-weight: 500; }
.bundle-komp-preis { font-size: var(--fs-leise); color: var(--green); white-space: nowrap; }
.bundle-komp-preis--null { color: var(--text-4); font-style: italic; }
.bundle-komp-tagespreis { font-size: var(--fs-leise); color: var(--text-3); white-space: nowrap; }
.bundle-komp-remove {
  background: none; border: none; cursor: pointer; color: var(--text-4);
  font-size: var(--fs-hervor); padding: 0 .25rem; line-height: 1;
}
.bundle-komp-remove:hover { color: #f87171; }
.bundle-add-row { margin-top: .5rem; position: relative; }
.bundle-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  max-height: 200px; overflow-y: auto;
}
.bundle-search-hit { padding: .4rem .65rem; cursor: pointer; font-size: var(--fs-text); border-bottom: 1px solid var(--border); }
.bundle-search-hit:last-child { border-bottom: none; }
.bundle-search-hit:hover { background: var(--surface-2); }
.bundle-search-nohit { padding: .4rem .65rem; font-size: var(--fs-klein); color: var(--text-3); }

/* ── Gruppen-Rolle Badge ─────────────────────────────── */

.alt-current { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); }

.eqf-serie-members { display: flex; flex-direction: column; gap: .25rem; }
.eqf-serie-member {
  display: flex; align-items: center; gap: .6rem;
  padding: .35rem .6rem; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border);
  text-decoration: none; color: var(--text);
  transition: border-color .12s;
}
.eqf-serie-member:hover { border-color: var(--blue); }
.eqf-serie-member-kat { font-size: var(--fs-leise); font-weight: 600; color: var(--text-4); white-space: nowrap; min-width: 80px; }
.eqf-serie-member-name { flex: 1; font-size: var(--fs-text); font-weight: 500; }
.eqf-serie-member-preis { font-size: var(--fs-klein); font-weight: 600; color: var(--green); white-space: nowrap; }
.eqf-serie-member-preis--null { color: var(--text-4); font-weight: 400; font-style: italic; }

/* ── Mount-Toggles im Equipment-Formular ─────────── */
.eq-mount-toggles { display: flex; flex-wrap: wrap; gap: .4rem; }
.eq-mount-toggle {
  padding: .3rem .8rem; border-radius: var(--r); cursor: pointer; font-size: var(--fs-text); font-weight: 600;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-3);
  transition: all .12s;
}
.eq-mount-toggle:hover { border-color: var(--blue); color: var(--blue-text); }
/* Gewählt = blau getönt wie ein aktiver Reiter, nicht voll blau: im Mount-Assistenten sahen fünf gewählte Mounts
   aus wie fünf Hauptknöpfe neben „Speichern & Nächste" */
.eq-mount-toggle--on { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue-text-2); }


/* ── 18. Status Dot Indicator ───────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-leise); font-weight: 500;
}
.status i {
  width: .45rem; height: .45rem; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.status.st-abgelehnt i { background: #ef4444; }
.status.st-archiviert i{ background: #9ca3af; }

/* ── Phase B: neue Status-Farben + Workflow-Bedienelemente ─────────────── */



.status.st-neu i                       { background: var(--amber-text); }
.status.st-angebot_gesendet i          { background: #38bdf8; }
.status.st-vertrag_rechnung_gesendet i { background: #818cf8; }
.status.st-gebucht i                   { background: #16a34a; }
.status.st-rausgegeben i               { background: #f97316; }
.status.st-zurueckerhalten i           { background: #14b8a6; }
.status.st-abgeschlossen i             { background: #9ca3af; }
.status.st-storniert i                 { background: #ef4444; }


.dh-ebtn--next    { box-shadow: 0 0 0 2px rgba(56,189,248,.8), 0 0 10px rgba(56,189,248,.4) !important; font-weight: 700 !important; }
.dh-ebtn--next::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; background: currentColor;
  -webkit-mask: var(--mh-i-arrow-right) center / contain no-repeat; mask: var(--mh-i-arrow-right) center / contain no-repeat; margin-right: .35em; }

/* A2: Belegungs-/Doppelbuchungs-Warnung */
.beleg-banner { display:flex; gap:.7rem; align-items:flex-start; background: rgba(220,38,38,.1); border:1px solid rgba(220,38,38,.35); border-radius: var(--r); padding:.7rem 1rem; margin-bottom:1rem; }
.beleg-banner-icon { font-size:1.2rem; flex-shrink:0; }
.beleg-banner-body { flex:1; font-size:var(--fs-text); color:var(--text-2); }
.beleg-list { list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.3rem; }
.beleg-list li { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:var(--fs-klein); }
.beleg-tag { font-size: var(--fs-marke); font-weight: 600; padding:.08rem .4rem; border-radius:999px; }
.beleg-tag--hart  { background: rgba(220,38,38,.25); color:var(--red-text); }
.beleg-tag--weich { background: rgba(217,119,6,.22); color:#fcd34d; }
.beleg-link { color:var(--blue-text-2); text-decoration:none; font-weight:600; }
.beleg-meta { color:var(--text-4); font-size:var(--fs-leise); }
.beleg-eq   { color:var(--text-3); }

/* C: Fällige Aktionen (Dashboard) */


/* ── 19. Email Tile System – Step Workflow ────────────── */

/*
  Inspired by UPS/Jumingo tracking: each tile is a workflow STEP.
  Circle indicator at top → label below.
  States: resting (white, empty circle) → is-next (dark, pulse) → triggered (green ✓)
*/


/* Progress strip */



/* ── Tile base (= one workflow step) ── */


/* ── Step indicator circle (UPS-style) ── */


/* ── Label below circle ── */


/* ── Click overlay ── */


/* ── Sizes ── */


/* ── Half tiles: compact flat, no circle ── */


/* ── Warn tiles ── */


/* ── Triggered: filled green circle + label + checkmark ── */


/* ── Next step: brand dark, pulsing ── */


/* ── Stack column ── */


/* ── Form tiles: no circle, label at top, form at bottom ── */


.mhinp {
  height: 100%; width: 100%; box-sizing: border-box; margin: 0;
  background: var(--input-bg); border: 1px solid var(--border-2);
  border-radius: var(--r); padding: 0 .45rem; font-size: var(--fs-leise); color: var(--text);
}
.mhinp:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,99,235,.1); }

/* Reset button */
.mh-reset-btn {
  background: var(--surface); color: var(--text-3);
  font-weight: 500; font-size: var(--fs-text);
  border: 1px solid var(--border-2); border-radius: var(--r);
  padding: .38rem .6rem; cursor: pointer;
  transition: background .12s, color .12s;
}
.mh-reset-btn:hover { background: var(--surface-2); color: var(--text); }


/* ── 21. Documents Component ────────────────────────────── */


.doc-meta   { color: var(--text-3); font-size: var(--fs-klein); }



/* btn-primary/-secondary/-danger entfernt -> vereinheitlicht auf mh-btn (DESIGN.md §5) */


/* ── 22. Papierkorb Actions ─────────────────────────────── */


/* ── 23. Dark UI Ergänzungen ────────────────────────────────── */

/* Sucheingabe */
input.mh-search-input:focus { background: var(--surface); }

/* Formulare */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  background: var(--surface-2);
  border-color: var(--blue);
}

/* Section-Karten: Anreicherung */
.section h3 { background: var(--dark); }

/* wf-card: Hintergrundfarbe klar dunkler */
.wf-card { background: var(--surface); }

/* Einstellungs-Seiten */
.section { background: var(--surface); }

/* ── Flatpickr Dark Theme ─────────────────────────────────── */
.flatpickr-calendar {
  background: #1e293b !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.55) !important;
}
.flatpickr-month,
.flatpickr-weekdays,
.flatpickr-weekdaycontainer { background: #1e293b !important; }
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months { color: #e2e8f0 !important; }
span.flatpickr-weekday { background: #1e293b !important; color: rgba(255,255,255,.35) !important; }
.flatpickr-day { color: #cbd5e1 !important; border-radius: var(--r) !important; }
.flatpickr-day:hover, .flatpickr-day:focus { background: rgba(255,255,255,.08) !important; border-color: transparent !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--blue-h) !important; border-color: var(--blue-h) !important; color: #fff !important; }
.flatpickr-day.today { border-color: rgba(255,255,255,.25) !important; }
.flatpickr-day.today:hover { background: rgba(255,255,255,.1) !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: rgba(255,255,255,.2) !important; background: transparent !important; }
.flatpickr-day.inRange { background: rgba(37,99,235,.2) !important; border-color: transparent !important; }
.flatpickr-prev-month, .flatpickr-next-month { color: rgba(255,255,255,.5) !important; fill: rgba(255,255,255,.5) !important; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: #e2e8f0 !important; fill: #e2e8f0 !important; }
.numInputWrapper span.arrowUp::after { border-bottom-color: rgba(255,255,255,.5) !important; }
.numInputWrapper span.arrowDown::after { border-top-color: rgba(255,255,255,.5) !important; }


/* ── 24. Lightbox (Dokument-/Bild-Vorschau) ─────────────────── */
.mh-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  flex-direction: column; padding: 1.5rem 2rem 2rem;
  background: rgba(2, 6, 23, .82); backdrop-filter: blur(2px);
}
.mh-lightbox.open { display: flex; }
.mh-lightbox-bar {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: .6rem; flex-shrink: 0;
}
.mh-lightbox-name { color: var(--text-3); font-size: var(--fs-text); margin-right: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-lightbox-open { color: var(--text-2); text-decoration: none; font-size: var(--fs-text); white-space: nowrap; }
.mh-lightbox-open:hover { color: #fff; }
.mh-lightbox-close {
  background: none; border: none; color: #fff; font-size: 1.8rem;
  line-height: 1; cursor: pointer; padding: 0 .25rem;
}
.mh-lightbox-close:hover { color: var(--text-3); }
.mh-lightbox-body {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
}
.mh-lightbox-img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 8px; box-shadow: 0 10px 50px rgba(0,0,0,.55);
}
.mh-lightbox-pdf {
  width: min(95vw, 1000px); height: 100%; border: none;
  border-radius: 8px; background: #fff; box-shadow: 0 10px 50px rgba(0,0,0,.55);
}
.mh-lightbox-pdfwrap {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  max-height: 100%; overflow-y: auto; padding: .25rem; width: 100%;
}
.mh-lightbox-page {
  max-width: min(95vw, 900px); width: 100%; height: auto;
  border-radius: 6px; background: #fff; box-shadow: 0 6px 30px rgba(0,0,0,.5);
}
.mh-lightbox-laedt { margin: auto; color: var(--text-2); font-size: var(--fs-text); }

/* ═══════════════════════════════════════════════════════════════
   DESIGN-KIT — einheitliche Bausteine (aus dem Dashboard abgeleitet).
   Schrittweise auf alle Seiten ausrollen statt pro Seite neu erfinden.
   ═══════════════════════════════════════════════════════════════ */
.mh-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-karte); padding:1rem 1.15rem; }
.mh-card-h { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.75rem; }
.mh-card-title { font-size:var(--fs-hervor); font-weight:700; color:var(--text); display:flex; align-items:center; gap:.45rem; }

/* Seitenkopf: Titel links, Aktionen rechts */
.mh-pagehead { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.mh-pagehead h1 { margin:0; font-size:var(--fs-seite); font-weight:700; color:var(--text); }
.mh-pagehead-count { font-size:var(--fs-hervor); font-weight:600; color:var(--text-4); }
.mh-pagehead-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Einheitliche Buttons. Zwei Größen mit fester Höhe (G3, 21.10.2026, doku/PLAN_GUI_AUFRAEUMEN.md): normal 36 px
   (= Feldhöhe), klein 30 px, beide mit derselben Ecke. Die Zeilenhöhe steht fest, sonst erbt der Knopf die der
   Umgebung (vorher 28 bis 39 px für dieselbe Klasse). Seiten setzen keine eigene Höhe, Schrift oder Innenabstand. */
.mh-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); color:var(--text-2); font-size:var(--fs-text); font-weight:600; line-height:1.2; min-height:2.25rem; box-sizing:border-box; cursor:pointer; text-decoration:none; white-space:nowrap; transition:border-color .12s, background .12s, color .12s, transform .06s; }
.mh-btn:hover { border-color:var(--text-4); color:var(--text); }
.mh-btn--primary { background:var(--blue-h); border-color:var(--blue-h); color:#fff; }
.mh-btn--primary:hover { background:var(--blue-d); border-color:var(--blue-d); }
.mh-btn--danger { color:var(--red-text); }
.mh-btn--danger:hover { border-color:#f87171; color:var(--red-text); }
/* Kompakter Button für dichte Listen (gleiche Sprache, kleiner) */
.mh-btn--sm { padding:.34rem .65rem; font-size:var(--fs-klein); font-weight:500; gap:.3rem; min-height:1.875rem; }
.mh-btn--icon { padding:.34rem .48rem; min-width:2.25rem; justify-content:center; }
.mh-btn--sm.mh-btn--icon { min-width:1.875rem; }
/* Farbvarianten mit fester Bedeutung (G3b, 21.10.2026): Kommunikation violett wie der Mail-Bereich (--komm, gefüllt
   --komm-voll für Senden), Hinweis gelb wie der Sperrhinweis. Keine weiteren Knopffarben. */
.mh-btn--komm { background:rgb(var(--purple-rgb) / .2); border-color:rgb(var(--purple-rgb) / .45); color:var(--purple-2); }
.mh-btn--komm:hover { background:rgb(var(--purple-rgb) / .3); border-color:rgb(var(--purple-rgb) / .6); color:var(--text); }
.mh-btn--komm-voll { background:rgb(var(--purple-rgb)); border-color:rgb(var(--purple-rgb)); color:#fff; }
.mh-btn--komm-voll:hover { background:#7c4ddc; border-color:#7c4ddc; color:#fff; }
.mh-btn--hinweis { background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.5); color:var(--amber-text); }
.mh-btn--hinweis:hover { background:rgba(245,158,11,.28); border-color:rgba(245,158,11,.65); color:var(--amber-text); }
/* Leise: Text ohne Fläche, z. B. Zeile hinzufügen unter Tabellen (wie fk-knopf-leise in Faktura) */
.mh-btn--leise { background:none; border-width:0; padding-inline:.5rem; gap:.35rem; color:var(--blue-text); font-weight:600; }
.mh-btn--leise .mh-i { margin-inline-end:0; }   /* ohne Fläche wirkt der normale Symbolabstand zu weit */
.mh-btn--leise:hover, .mh-btn--leise:focus-visible { background:var(--blue-bg); border-color:transparent; color:var(--blue-text-2); }
.mh-btn--leise[aria-pressed="true"] { background:var(--blue-bg); }
/* Geist: Symbolknopf ohne Fläche und Rahmen für Zeilen und Kachelköpfe (Stift, Löschen). Immer mit --icon, meist --sm.
   --geist-rot färbt Löschen beim Überfahren rot. Alte Klassen (mh-edit, kd-tile-del, es-del-btn, klr-/flr-actbtn)
   bleiben am Knopf als Haken für Skripte, tragen aber keine Optik mehr. */
.mh-btn--geist { background:none; border-color:transparent; color:var(--text-4); }
.mh-btn--geist:hover, .mh-btn--geist:focus-visible { background:rgba(255,255,255,.08); border-color:transparent; color:var(--text-2); }
.mh-btn--geist-rot:hover, .mh-btn--geist-rot:focus-visible { background:var(--red-bg); color:var(--red-text); }
/* Sie stehen in Textzeilen und Kachelköpfen: die 30-px-Trefferfläche ragt über die Zeile hinaus, statt sie zu erhöhen
   (vorher war dort nur das 18 px hohe Symbol, Listen wurden sonst bis 9 px je Zeile höher) */
.mh-btn--geist.mh-btn--icon { margin-block:-.375rem; }

/* Dropdown-Menü (native <details>): bündelt selten genutzte Aktionen hinter einem Knopf */
.mh-menu { position:relative; }
.mh-menu > summary { list-style:none; cursor:pointer; user-select:none; }
.mh-menu > summary::-webkit-details-marker { display:none; }
.mh-menu > summary::marker { content:""; }
.mh-menu[open] > summary { border-color:var(--text-4); color:var(--text); background:var(--surface-2); }
.mh-menu-caret { font-size:var(--fs-marke); opacity:.7; transition:transform .12s; }
.mh-menu[open] .mh-menu-caret { transform:rotate(180deg); }
.mh-menu-panel { position:absolute; right:0; top:calc(100% + .4rem); z-index:40;
  background:var(--surface); border:1px solid var(--border-2); border-radius:10px; padding:.35rem;
  min-width:14rem; display:flex; flex-direction:column; gap:.05rem; box-shadow:0 12px 32px rgba(0,0,0,.45); }
.mh-menu-panel a, .mh-menu-panel button, .mh-menu-panel > label { display:flex; align-items:center; gap:.55rem; width:100%;
  box-sizing:border-box; text-align:left; background:none; border:none; color:var(--text-2); text-decoration:none;
  margin:0; padding:.5rem .6rem; border-radius:6px; font:inherit; font-size:var(--fs-text); font-weight:500; cursor:pointer; white-space:nowrap; }
.mh-menu-panel a:hover, .mh-menu-panel button:hover, .mh-menu-panel > label:hover,
.mh-menu-panel a:focus-visible, .mh-menu-panel button:focus-visible { background:var(--surface-2); color:var(--text); }
.mh-menu-panel .mh-i { margin:0; color:var(--text-3); }
.mh-menu-panel > label input { margin:0; }
/* Gefährliches (Papierkorb, Löschen) steht zuletzt, rot */
.mh-menu-panel .mh-menu-gefahr, .mh-menu-panel .mh-menu-gefahr .mh-i { color:var(--red-text); }
.mh-menu-panel .mh-menu-gefahr:hover, .mh-menu-panel .mh-menu-gefahr:focus-visible { background:var(--red-bg); color:var(--red-text); }
.mh-menu-sep { height:1px; background:var(--border); margin:.25rem .2rem; }
.mh-menu-panel form { margin:0; }   /* Einträge, die ein Formular abschicken (Faktura „Weitere Belege") */

/* Zähler-Badge + Status-Pille */
.mh-badge { background:rgba(255,255,255,.1); border-radius:999px; padding:.1rem .6rem; font-size:var(--fs-klein); font-weight:700; color:var(--text); }
/* ── EINE Pillenform (GUI G4b, 22.10.2026): Abzeichen für Art, Stand und Hinweise. Vorher 15 Formen und 27 Farbpaare
   (Bestand ~/werkzeug_pruefung/g4_pillen.py, 31 Seiten). Neu im Code: <span class="mh-pille mh-pille--blau">…</span>.
   Die älteren Klassen tragen keine eigene Form und Farbe mehr, sie hängen hier an der Form und an einer der sechs
   Farben; ihre Bedeutung bleibt (Firma blau, Studierende violett, Privat im Anfragen-Kopf gelb …). Bewusst eigene
   Formen: Zähler (mh-badge, dash-badge), Tracker-Kennfarben (gps-chip, gps-pin), Ereigniszahl gps-ev-badge,
   „PDF"-Schild doc-thumb-tag, Phasen-Status .status mit Punkt (§7). Reihenfolge: Grau zuerst (Grundton), dann die
   Farben, damit „Klasse + Zusatz" immer die Farbe des Zusatzes trägt. ── */
.mh-pille, .badge-mietertyp, .kd-badge, .mh-status, .anf-mt, .kl-dup, .fkk-art, .fkk-video, .gps-ev-typ, .gps-badge,
.zusatz-missing, .evl-bak {
  display:inline-flex; align-items:center; gap:.25rem; padding:.08rem .5rem; border:1px solid transparent;
  border-radius:999px; font-size:var(--fs-marke); font-weight:600; line-height:1.4; white-space:nowrap;
  text-transform:none; letter-spacing:0; }
.mh-pille .mh-i, .zusatz-missing .mh-i { margin:0; }
.mh-pille, .mh-pille--grau, .badge-mietertyp, .badge-mietertyp--standard, .badge-mietertyp--privatperson, .kd-badge,
.kd-badge--alt, .mh-status, .mh-status--off, .anf-mt, .anf-mt--sonst, .fkk-art, .fkk-art--kunde, .gps-ev-typ, .gps-badge,
.gps-badge--kein {
  background:rgba(255,255,255,.06); border-color:var(--border-2); color:var(--text-2); }
.mh-pille--blau, .badge-mietertyp--unternehmen, .anf-mt--firma, .fkk-art--firma, .gps-ev-typ--ziel {
  background:var(--blue-bg); border-color:var(--blue-border); color:var(--blue-text-2); }
.mh-pille--gruen, .kd-badge--ok, .mh-status--ok, .gps-ev-typ--zurueck, .gps-badge--frei {
  background:var(--green-bg); border-color:var(--green-border); color:var(--green-text); }
.mh-pille--gelb, .anf-mt--privat, .kl-dup, .mh-status--wait, .gps-ev-typ--raus, .gps-badge--belegt, .evl-bak {
  background:var(--amber-bg); border-color:var(--amber-border); color:var(--amber-text); }
.mh-pille--rot, .zusatz-missing {
  background:var(--red-bg); border-color:var(--red-border); color:var(--red-text); }
.mh-pille--violett, .badge-mietertyp--studierende, .anf-mt--studi, .fkk-video {
  background:var(--purple-bg); border-color:var(--purple-border); color:var(--purple-2); }

/* Filter-/Reiter-Leiste: EINE Form „mit Linie" (seit 22.10.2026, Entwurf 3/4): Haarlinie unter der Leiste, der aktive
   Reiter blau unterstrichen, keine Flächen. Gleiche Schriftstärke für alle Reiter, damit beim Umschalten nichts
   springt. Linien als innere Schatten: in der wischbaren Handy-Leiste (overflow-x) wird nichts abgeschnitten. */
.mh-tabs { display:flex; flex-wrap:wrap; gap:0 .25rem; box-shadow:inset 0 -1px 0 var(--border); }
.mh-tab { padding:.55rem .9rem .6rem; border-radius:0; text-decoration:none; color:var(--text-3); font-size:var(--fs-text); font-weight:500;
  box-shadow:inset 0 -2px 0 transparent; }
.mh-tab:hover { color:var(--text); }
.mh-tab.active, .mh-tab--active { color:var(--text); box-shadow:inset 0 -2px 0 var(--blue); }
.mh-tab:focus-visible { outline:2px solid var(--blue-text); outline-offset:-2px; border-radius:4px; }
.mh-tab > span { margin-left:.3rem; font-weight:600; color:var(--text-4); }   /* Zähler */
.mh-tab.active > span, .mh-tab--active > span { color:var(--text-3); }

/* Einstellungen-Tabellen (.es-*) — geteilt von Tarife/Pakete (Dark-Theme) */
.es-table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:.5rem; }
/* In einer Karte kein zweiter Kasten (impeccable nested-cards, DESIGN.md §18 F4): nur Trennlinien, Text bündig mit
   dem Kartentext. Kein negativer Rand: in einem <form> ragte die Liste sonst rechnerisch über das Formular. */
.mh-card .es-table-wrap { background:none; border:none; border-top:1px solid var(--border); border-radius:0; margin:.75rem 0 .25rem; }
.mh-card .es-table-wrap :is(th, td):first-child { padding-left:0; }
.mh-card .es-table-wrap :is(th, td):last-child { padding-right:0; }
.mh-card .es-table-wrap > .es-row { padding-left:0 !important; padding-right:0 !important; }   /* gegen Inline-Abstand */
.es-table { width:100%; border-collapse:collapse; font-size:var(--fs-text); }
.es-thead-row { border-bottom:2px solid var(--border); }
.es-thead-row th { padding:.6rem 1rem; text-align:left; font-weight: 600; font-size: var(--fs-leise); color:var(--text-4); }
.es-row { border-bottom:1px solid var(--border); }
.es-row:last-child { border-bottom:none; }
.es-cell { padding:.4rem .75rem; }
.es-cell--del { padding:.4rem .5rem; text-align:center; width:40px; }
.es-inp { width:100%; padding:.35rem .5rem; border:1px solid var(--border-2); border-radius:var(--r); font-size:var(--fs-text); background:var(--input-bg); color:var(--text); margin:0; box-sizing:border-box; }
.es-inp:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 2px rgba(59,130,246,.15); background:var(--surface-2); }

/* ── Globale Übersicht ausgehender (verzögerter) E-Mails (mailversand.js) ─────────── */
.mv-tray { position:fixed; right:1rem; bottom:1rem; z-index:200; width:min(360px,92vw);
  display:none; flex-direction:column; gap:.5rem; }
.mv-tray.open { display:flex; }
.mv-tray-hd { font-size: var(--fs-klein); font-weight: 600;
  color:var(--text-2); padding:0 .15rem; }
.mv-job { display:flex; align-items:center; gap:.7rem; background:var(--surface);
  border:1px solid var(--blue-border);
  border-radius:var(--r); padding:.55rem .7rem; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.mv-job--sendet { border-color:var(--border-2); opacity:.85; }
.mv-job--fehler { border-color:var(--red-border); background:linear-gradient(var(--red-bg), var(--red-bg)), var(--surface); }
.mv-job-main { flex:1; min-width:0; }
.mv-job-lbl { font-size:var(--fs-text); font-weight:600; color:var(--text); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.mv-job-sub { font-size:var(--fs-leise); color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mv-job-err { font-size:var(--fs-leise); color:var(--red-text); }
.mv-job-right { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.mv-job-sec { font-size:var(--fs-leise); color:var(--text-2); font-variant-numeric:tabular-nums; }
.mv-job-btn { background:var(--surface-2); border:1px solid var(--border-2); color:var(--text-2);
  border-radius:var(--r); padding:.28rem .6rem; font-size:var(--fs-leise); font-weight:600; cursor:pointer; }
.mv-job-btn:hover { background:rgba(255,255,255,.1); color:var(--text); }
.mv-job-btn--cancel { background:#b45309; border-color:#b45309; color:#fff; }
.mv-job-btn--cancel:hover { background:#92400e; color:#fff; }
/* Wartefenster im Composer (mailversand.js mvWarten, 14.10.2026): Mail bleibt sichtbar, aber gesperrt */
.mv-warte { display:flex; align-items:center; justify-content:space-between; gap:.6rem .9rem; flex-wrap:wrap;
  padding:.55rem .75rem; margin:.6rem 0; border:1px solid var(--border-2); border-radius:var(--r);
  background:var(--surface-2); color:var(--text); font-size:var(--fs-text); font-variant-numeric:tabular-nums; }
.mv-gesperrt > [inert] { opacity:.6; }

/* ── Einheitliche Status-Toasts unten rechts (gleicher Look wie der Mailversand-Tray) ──────── */
.mh-toast-wrap { position:fixed; right:1rem; bottom:1rem; z-index:2147483647;
  display:flex; flex-direction:column; gap:.5rem; pointer-events:none; width:min(420px,92vw); }
.mh-toast { pointer-events:auto; background:var(--surface); color:var(--text);
  border:1px solid var(--blue-border); border-radius:var(--r);
  box-shadow:0 8px 24px rgba(0,0,0,.45); padding:.6rem .8rem; font-size:var(--fs-text); line-height:1.45;
  white-space:pre-wrap; word-break:break-word; cursor:pointer;
  opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; }
.mh-toast--in { opacity:1; transform:translateY(0); }

/* ── Lieferfahrzeug-Fortschrittsbalken (lieferbalken.js) ──────────────────────────── */
.lb-track { display:flex; align-items:center; gap:.55rem; }
.lb-track--sm { gap:.4rem; }
.lb-end { font-size:var(--fs-hervor); flex-shrink:0; line-height:1; }
.lb-rail { position:relative; flex:1; height:8px; background:var(--surface-2); border-radius:999px; }
.lb-track--sm .lb-rail { height:6px; }
.lb-fill { position:absolute; left:0; top:0; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--blue), var(--green)); transition:width 1.1s cubic-bezier(.4,0,.2,1); }
/* Etappen-Trenner (Hinweg | beim Mieter | Rückweg) */
.lb-veh { position:absolute; top:50%; transform:translate(-50%,-50%); transition:left 1.1s cubic-bezier(.4,0,.2,1); }
/* Emoji-Fahrzeuge zeigen standardmäßig nach links. Hinweg → nach rechts spiegeln; Rückweg → links lassen. */
.lb-veh .lb-emoji { display:inline-block; font-size:1.2rem; line-height:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
  transform:scaleX(-1); animation:lb-bob 1.5s ease-in-out infinite; }
.lb-track--sm .lb-veh .lb-emoji { font-size:var(--fs-hervor); }
@keyframes lb-bob { 0%,100% { transform:scaleX(-1) translateY(0); } 50% { transform:scaleX(-1) translateY(-2px); } }
@keyframes lb-bob-l { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
/* Gezeichneter Lieferwagen (SVG) statt Emoji — David 14.08.2026: „Im Balken soll es immer das
   Paketauto sein." Er fährt von Haus aus nach RECHTS, also genau andersherum als die Emojis:
   hier NICHT spiegeln, dafür auf dem Rückweg. */
.lb-veh .lb-emoji--svg { display:block; width:34px; height:21px; transform:none;
  animation:lb-bob-svg 1.5s ease-in-out infinite; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.lb-emoji--svg .lb-svg { display:block; width:100%; height:100%; }
.lb-track--sm .lb-veh .lb-emoji--svg { width:28px; height:18px; }
@keyframes lb-bob-svg { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes lb-bob-svg-l { 0%,100% { transform:scaleX(-1) translateY(0); } 50% { transform:scaleX(-1) translateY(-2px); } }
/* Auspuff-/Staubwölkchen während der Fahrt (dezent) */
.lb-puff { position:absolute; left:50%; top:58%; width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.5); opacity:0; pointer-events:none; }
.lb-veh--moving .lb-puff { animation:lb-puff 1.1s ease-out infinite; }
@keyframes lb-puff { 0% { opacity:.5; transform:translate(-50%,-50%) translate(-6px,0) scale(.5); }
  100% { opacity:0; transform:translate(-50%,-50%) translate(-20px,4px) scale(1.5); } }
@keyframes lb-puff-r { 0% { opacity:.5; transform:translate(-50%,-50%) translate(6px,0) scale(.5); }
  100% { opacity:0; transform:translate(-50%,-50%) translate(20px,4px) scale(1.5); } }
/* Phasen-Leiste: Titel je Phase */
.lb-title { font-size:var(--fs-leise); font-weight:700; color:var(--text-2); margin:0 0 .4rem; }
.lb-track--sm ~ .lb-statusrow { margin-top:.25rem; }
/* Unbestimmter Balken (in Zustellung ohne GPS): laufender Schimmer */
.lb-rail--indet { overflow:hidden; }
.lb-rail--indet .lb-fill { background:linear-gradient(90deg, transparent, var(--blue), transparent);
  animation:lb-indet 1.5s ease-in-out infinite; }
@keyframes lb-indet { 0% { transform:translateX(-70%); } 100% { transform:translateX(120%); } }
/* „Beim Mieter": Tages-Punkte (kurze Miete) bzw. Tagesbalken (lange Miete) */
.lb-dots { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.15rem 0 .1rem; }
.lb-dot { width:9px; height:9px; border-radius:50%; background:var(--surface-2); flex:0 0 auto; }
.lb-dot--done { background:var(--blue); }
.lb-dot--now { background:var(--green); box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:lb-pulse 1.7s ease-out infinite; }
@keyframes lb-pulse { 0% { box-shadow:0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow:0 0 0 8px rgba(34,197,94,0); } }
/* Ganze Reise als Karten (Verlauf): Versand/Zustellung · Tag 1…N · Besitztage · Rückversand */
.lb-cards { display:flex; gap:.4rem; overflow-x:auto; padding:.2rem 0 .55rem; }
.lb-card { flex:0 0 auto; min-width:5.2rem; display:flex; flex-direction:column; gap:.12rem; align-items:center;
           text-align:center; padding:.45rem .55rem; border-radius:9px; border:1px solid var(--border-2);
           background:rgba(255,255,255,.03); }
.lb-card-lbl { font-size:var(--fs-leise); font-weight:600; color:var(--text-2); white-space:nowrap; }
.lb-card-date { font-size:var(--fs-leise); color:var(--text-4); white-space:nowrap; }
.lb-card--miet { border-color:rgba(34,197,94,.45); background:rgba(34,197,94,.10); }
.lb-card--miet .lb-card-lbl { color:var(--green-text); }
.lb-card--besitz { border-color:rgba(251,191,36,.40); background:rgba(251,191,36,.09); }
.lb-card--besitz .lb-card-lbl { color:#fcd34d; }
.lb-card--versand, .lb-card--abhol, .lb-card--zustell, .lb-card--rueck { background:rgba(96,165,250,.09); }
.lb-card--versand .lb-card-lbl, .lb-card--abhol .lb-card-lbl,
.lb-card--zustell .lb-card-lbl, .lb-card--rueck .lb-card-lbl { color:var(--blue-text-2); }
.lb-card--done { opacity:.5; }
.lb-card--now { box-shadow:0 0 0 2px var(--blue-text); border-color:transparent; }
.lb-mietebar { height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin:.2rem 0 .15rem; }
.lb-mietebar-fill { height:100%; background:var(--green); border-radius:999px; transition:width .6s ease; }
/* Zustands-Zeile (vor / zugestellt / Rückgabe erwartet / fertig) */
.lb-state { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; background:var(--surface-2); border-radius:8px; }
.lb-state-icon { font-size:1.5rem; line-height:1; flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.lb-state--sm .lb-state-icon { font-size:1.2rem; }
.lb-state-txt .lb-title { margin:0 0 .1rem; }
.lb-state-txt .lb-status { font-size:var(--fs-leise); }
.lb-statusrow { margin-top:.3rem; text-align:center; }
/* Mehrere Pakete: je Karton eine eigene Schiene mit Beschriftung darüber (14.08.2026).
   Auf der Schiene läuft dann ein Paket-Symbol statt eines Fahrzeugs — ein Lkw fährt nicht zweimal. */
.lb-pakete { display:flex; flex-direction:column; gap:.5rem; }
.lb-pak-lbl { font-size:var(--fs-leise); color:var(--text-3); margin-bottom:.1rem; }
.lb-status { color:var(--text-2); font-weight:600; font-size:var(--fs-leise); }
.lb-wrap { margin:.2rem 0; }
.lb-wrap + .lb-wrap { margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--border); }
@media (prefers-reduced-motion: reduce) {
  .lb-fill, .lb-veh { transition:none; }
  .lb-veh .lb-emoji, .lb-veh .lb-emoji--svg, .lb-puff, .lb-rail--indet .lb-fill, .lb-dot--now { animation:none; }
  .lb-puff { opacity:0; }
}

/* ── Versandpreis-Check (versand_check.html): Pakete als Zeilen der Karte (.mh-zeilen), nicht Kasten im Kasten ── */
.vc-paket { padding:.9rem 0; }
.vc-paket:first-child { padding-top:0; }
.vc-paket-h { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.vc-paket-weg { margin-left:auto; }
.vc-items { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.vc-item { display:inline-flex; align-items:center; gap:.2rem; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r); padding:.18rem .15rem .18rem .6rem; font-size:var(--fs-text); }
.vc-paket-foot { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }
.vc-meldung { margin:0; }
#vc-result:empty { display:none; }
.vc-add { max-width:26rem; }
.vc-weight { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.vc-weight input { width:5.5rem; }
.vc-row { display:grid; grid-template-columns:1.4fr 1.7fr .9fr 1fr; gap:.6rem; align-items:center; padding:.5rem .25rem; border-bottom:1px solid var(--border); }
.vc-row--head { color:var(--text-4); font-size: var(--fs-leise); font-weight: 600; }
.vc-row--best { background:var(--blue-bg); border-radius:var(--r); }
.vc-num { text-align:right; }

/* ── Bewertungs-Moderation (bewertungen.html) ── */
.bw-web { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.bw-web-txt { max-width:72ch; display:flex; flex-direction:column; gap:.15rem; }
.bw-web-act { display:flex; align-items:center; gap:.6rem; white-space:nowrap; }
.bw-code { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.bw-code-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.bw-code-ta { width:100%; box-sizing:border-box; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:var(--fs-leise); line-height:1.4; background:var(--surface-2); color:var(--text-2); border:1px solid var(--border-2); border-radius:var(--r); padding:.5rem .6rem; resize:vertical; white-space:pre; }
.bw-adv { margin-top:.85rem; }
.bw-adv summary { cursor:pointer; color:var(--text-3); font-size:var(--fs-text); }
@media (max-width:900px){ .bw-code { grid-template-columns:1fr; } }

/* ── Personen der Buchung (Anfragesteller ≠ Mieter) – oben in der Kundenprofil-Karte ── */
.mhp { padding:.55rem .9rem; border-bottom:1px solid var(--border-2); }
.mhp-row { display:grid; grid-template-columns:auto 1fr 1fr 1.5fr auto auto; gap:.4rem; align-items:center; }
.mhp-x { background:none; border:none; color:var(--text-4); cursor:pointer; font-size:1.15rem; line-height:1; padding:0 .2rem; }
@media (max-width:820px){ .mhp-row { grid-template-columns:1fr 1fr; } }
/* Bewertungen als Zeilen in EINER Karte je Abschnitt (Entwurf 4, 22.10.2026); Aktionen rechts im Kopf der Zeile */
.bw-liste { margin-bottom:1.1rem; }
.bw-zeile { padding:.75rem 0; }
.bw-zeile + .bw-zeile { border-top:1px solid var(--border); }
.bw-liste > .mh-card-h + .bw-zeile { padding-top:.2rem; }
.bw-liste > .pf-empty { margin:0; font-size:var(--fs-text); color:var(--text-3); }
.bw-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.35rem; }
.bw-stars { color:#f5b301; letter-spacing:.05em; }
.bw-intern { margin-right:.35rem; color:var(--text-4); font-size:var(--fs-klein); }
.bw-intern:empty { display:none; }
.bw-text { color:var(--text-2); line-height:1.45; white-space:pre-wrap; }
.bw-antwort { margin-top:.45rem; padding:.4rem .6rem; background:var(--surface-2); border-radius:var(--r); color:var(--text-2); font-size:var(--fs-text); }
.bw-actions { display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-left:auto; }
.bw-edit { margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--border); }
.bw-imp-row { display:grid; grid-template-columns:5.5rem 1fr 9rem 7.5rem 2fr 1.8rem; gap:.5rem; align-items:center; margin-bottom:.4rem; }
.bw-imp-head { color:var(--text-4); font-size: var(--fs-leise); font-weight: 600; margin-bottom:.3rem; }
.bw-x { border:0; background:transparent; color:var(--text-3); cursor:pointer; font-size:1.1rem; line-height:1; }
.bw-x:hover { color:var(--red-text); }

/* ══ EIN Profil-Bausystem (Kundenprofil · Firmenprofil · Kunde-Tab der Buchung) ═══════════
   David 06.08.2026: „so viele unterschiedliche Elemente, kein gemeinsames Design erkennbar.
   Unterschiedliche Schriftgrößen, schlampige Anordnungen." Vorher trug EINE Seite fünf
   Abschnitts-Sprachen: Kasten mit Uppercase-Kopf, große gemischtschriftliche Überschrift,
   nackte Überschrift mit float-Knopf, Info-Karte, Tabellenzeile. Ab jetzt gilt für JEDEN
   Profil-Abschnitt genau dieser Bau:

     .pf-secs            Spalte aller Abschnitte einer Seite
       .pf-sec           Abschnitt: KEINE eigene Kiste, nur Trennlinie + Kopfzeile
         .pf-sec-h       Kopfzeile: Titel links, EINE Aktion rechts
           .pf-sec-t     Titel — der EINZIGE Abschnitts-Titelstil der Profile
           .pf-sec-n     Zähler dahinter (leise)
         .pf-sec-hint    EIN Erklärsatz, nur wo er wirklich etwas erklärt
         .kd-tiles       Kachelgitter: gleich breite Spalten, füllt die Seitenbreite
           .kd-tile      die EINE Kachel (Adresse · Ansprechpartner · Beleg · Info)
         .pf-empty       Leerstand = EINE Zeile, nie eine halbleere Kiste

   Schriftskala (verbindlich, keine Ausnahmen):
     .75rem uppercase = Abschnittstitel · .64rem uppercase = Kachelmarke
     .82rem/600 = Name · .82rem = Text · .74rem = leiser Zusatz
   Marke vs. Badge: WAS es ist → Text-Marke (.kd-tile-mark). WELCHER ZUSTAND → Pille
   (.kd-badge/.immat-badge). Nie beides für dasselbe.                                      */
.pf-secs { display:flex; flex-direction:column; margin-bottom:1.5rem; }
.pf-sec { border-top:1px solid var(--border); padding:.9rem 0 .15rem; }
.pf-sec--erste { border-top:0; padding-top:.2rem; }
/* Kopfzeile: Titel, direkt dahinter die leise Aktion „+ Hinzufügen" (.mh-btn--leise, Entwurf 4, 22.10.2026; vorher ein
   blauer Knopf ganz rechts, weit weg vom Titel, und drei blaue Knöpfe je Seite) */
.pf-sec-h { display:flex; align-items:center; justify-content:flex-start; gap:.5rem .75rem; flex-wrap:wrap; margin-bottom:.55rem; }
.pf-sec-h > .mh-btn--leise { margin-block:-.375rem; }   /* Trefferfläche ragt über die Zeile, statt sie zu erhöhen */
.pf-sec-t { font-size: var(--fs-klein); font-weight: 600; color:var(--text-2); }
.pf-sec-n { font-weight:400; color:var(--text-4); }
.pf-sec-hint { font-size:var(--fs-leise); color:var(--text-4); margin:-.3rem 0 .6rem; }
.pf-empty { font-size:var(--fs-klein); color:var(--text-4); }
.pf-sec > p.pf-empty { margin:0 0 .45rem; }
/* Speichern eines ganzen Abschnitts unten links unter den Kacheln, Rückmeldung daneben (wie jedes Formular) */
.pf-sec-fuss { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .75rem; margin:.75rem 0 .45rem; }
/* Kundentyp und Verleih-Kollege im Seitentitel als Text wie im Buchungskopf (.dh-typ), Privatperson als Warnung */
.pf-typ { margin-left:.55rem; font-size:var(--fs-text); font-weight:500; color:var(--text-3); white-space:nowrap; vertical-align:middle; }
.pf-typ--warn { color:var(--amber-text); font-weight:600; }
/* Stammdaten als EINE Zeile beschrifteter Angaben, dieselbe Form wie die Eckdaten im Buchungskopf (.dh-fakten):
   Trennlinie links an jeder Angabe, mittig im Spaltenabstand. Bricht die Reihe um, liegt die Linie der ersten Angabe
   einer neuen Zeile links außerhalb und wird abgeschnitten (overflow-x: clip). Notizen nehmen eine eigene Zeile. */
.pf-fakten { display:flex; flex-wrap:wrap; column-gap:3rem; row-gap:.8rem; margin:0 0 .45rem; overflow-x:clip; }
.pf-f { position:relative; min-width:0; }
.pf-f::before { content:""; position:absolute; left:-1.5rem; top:.15rem; bottom:.15rem; width:1px; background:var(--border); }
.pf-f dt { margin:0 0 .15rem; font-size:var(--fs-klein); font-weight:500; color:var(--text-3); }
.pf-f dd { display:flex; align-items:center; flex-wrap:wrap; gap:.2rem .55rem; margin:0; min-height:1.75rem;
  font-size:var(--fs-text); color:var(--text); overflow-wrap:anywhere; }
.pf-f dd a { color:var(--blue-text); text-decoration:none; }
.pf-f dd a:hover, .pf-f dd a:focus-visible { text-decoration:underline; }
.pf-f dd .pf-vies { margin:0; }
.pf-f--voll { flex-basis:100%; }
.pf-f--voll::before { display:none; }
/* Kennzahlen als beschriftete Zeile (Dashboard Geld/Bestand, Analysen, 23.10.2026) statt Kachelreihe (DESIGN.md §17):
   Wert groß in Textfarbe (--fs-seite, seit der zweiten Runde am selben Tag, David: „sieht jetzt schlechter aus"; mit
   16 px gingen die Zahlen im Text unter), Ziffern gleich breit. Farbe nur, wo sie etwas sagt (Trend, Deckung:
   --gut/--schlecht). Ein Zusatz unter dem Wert als small. */
.pf-fakten--kennzahlen { column-gap:3.5rem; row-gap:1rem; margin:0; }
.pf-fakten--kennzahlen .pf-f::before { left:-1.75rem; }
.pf-fakten--kennzahlen .pf-f dd { font-size:var(--fs-seite); font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; }
.pf-fakten--kennzahlen .pf-f dd small { flex-basis:100%; font-size:var(--fs-klein); font-weight:400; color:var(--text-3); }
.pf-fakten--kennzahlen .pf-f dd.pf-wert--gut { color:var(--green-text); }
.pf-fakten--kennzahlen .pf-f dd.pf-wert--schlecht { color:var(--red-text); }
.pf-f dd.pf-notizen { display:block; margin:0; min-height:0; font-size:var(--fs-text); max-width:60rem; }
.pf-zahl { font-variant-numeric:tabular-nums; }
/* Zwei Abschnitte nebeneinander (abweichende Rechnungs- und Lieferadressen); unter 1100 px untereinander (Stapelende) */
.pf-paar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:2.5rem; }

/* Kachelgitter: Grid mit gleich breiten Spalten (vorher flex-wrap mit min-width → Kacheln
   klebten links, rechts blieb die halbe Seite leer). KEIN align-items:start — die Kacheln
   einer Reihe strecken sich auf GLEICHE Höhe (David 06.08.2026: „alles unterschiedlich
   groß"); min-height hält auch einzelne kleine Kacheln auf einem einheitlichen Maß. */
.kd-tiles, .pf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:.6rem; }
.pf-grid { margin-bottom:.2rem; }
.kd-tiles-empty, .pf-empty { font-size:var(--fs-klein); color:var(--text-4); }
.kd-tiles-empty { grid-column:1/-1; align-self:center; }
.kd-tile, .pf-card { position:relative; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--r); padding:.6rem .8rem; min-width:0; font-size:var(--fs-klein); min-height:7rem; box-sizing:border-box; }
a.kd-tile { text-decoration:none; color:inherit; }   /* Kachel als Link (z. B. Videoprojekt) */
.kd-tile--stamm { border-color:var(--border-2); }
/* Kachel-Kopf: Marke links, Aktion rechts (dasselbe Muster wie die Adress-Kacheln der Buchung) */
.kd-tile-hdr { display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-bottom:.35rem; min-height:1rem; }
/* EINE Marken-Größe im ganzen Programm: dieselbe wie .doc2-lbl/.kp-addr-type (--fs-leise, normale Schreibweise) */
.kd-tile-mark, .kd-tile-badge, .pf-card-head { font-size: var(--fs-leise); font-weight: 600; color:var(--text-4); }
.kd-tile-badge { display:inline-block; margin-bottom:.35rem; }
.pf-card-head { margin-bottom:.4rem; display:flex; align-items:center; gap:.5rem; }
.kd-tile-act { display:inline-flex; align-items:center; gap:.15rem; flex:none; }
.kd-tile-name { font-weight:600; color:var(--text); margin-bottom:.1rem; }
.kd-tile-line { color:var(--text-2); line-height:1.45; word-break:break-word; }
.kd-tile-line a { color:var(--blue-text); text-decoration:none; }
.kd-tile-line a:hover { text-decoration:underline; }
.kd-tile-land, .kd-tile-date { font-size:var(--fs-leise); color:var(--text-4); margin-top:.15rem; }
.kd-tile-actions { margin-top:.5rem; }
.kd-tile-setstd { background:none; border:none; padding:0; color:var(--blue-text); cursor:pointer; font-size:var(--fs-leise); }
.kd-tile-setstd:hover { text-decoration:underline; }
/* Abschnitt INNERHALB einer Kachel (z. B. Ansprechpartner: Kontakt | Legitimation | Ausweis) */
.kd-tile-sep { border-top:1px solid var(--border); margin-top:.5rem; padding-top:.45rem; }
/* Angesprungene Kachel (Link auf #kontakt-<id>) hervorheben */
.kd-tile:target { border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-bg); scroll-margin-top:5rem; }

/* ── Beleg-Kachel (Legitimation & Unterlagen) — GLOBAL, weil dieselbe Kachel auf der
   Buchung, im Kundenprofil und im Firmenprofil steht (DESIGN.md 13: EIN Baustein). ── */
.kd-tile--beleg { display:flex; flex-direction:column; gap:.4rem; }
.kd-tile--beleg .doc-thumbs, .kd-tile--beleg .aw-befunde { margin:0; }
.pf-beleg-check { display:inline-flex; align-items:center; gap:.45rem; font-size:var(--fs-klein); color:var(--text-2); cursor:pointer; }
.pf-beleg-check input { margin:0; accent-color:var(--blue); flex:none; }
.pf-beleg-stand { font-size:var(--fs-leise); color:var(--text-4); }
.pf-beleg-stand--da { color:var(--green-text); }
.pf-beleg-feld { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; font-size:var(--fs-leise); color:var(--text-3); }
.pf-beleg-feld .kf-input { width:auto; height:28px; font-size:var(--fs-klein); }
/* ── EIN Bearbeiten-Weg (DESIGN.md 15): ✎ öffnet IMMER dieses Formular unter dem
   Kachelgitter des Abschnitts — NEU+EDIT geteilt, die Titelzeile zeigt den Modus. ── */
.kd-addform { margin-top:.85rem; padding:.85rem 1rem; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--r); }
.kd-addform-titel { font-size: var(--fs-klein); font-weight: 600; color:var(--text-2); margin-bottom:.55rem; }
.kd-form-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:.45rem .85rem; }
@media (max-width:1100px){ .kd-form-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .kd-form-grid { grid-template-columns:1fr; } }
/* Inputs im Adressformular sitzen selbst auf --input-bg → Kontrast über --surface */
.kd-addform .kf-input { padding:.32rem .5rem; background:var(--surface); font-size:var(--fs-klein); }

/* Buchungszeile in den Kundenprofilen (Firma + Privat) — gemeinsames Makro parts/_buchungszeile.html */
.pf-booking { display:grid; grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1fr) 12rem; gap:.75rem; align-items:center; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--r); padding:.6rem .8rem; text-decoration:none; color:inherit; font-size:var(--fs-klein); transition:background .12s, border-color .12s; }
.pf-booking:hover { background:rgba(255,255,255,.045); border-color:var(--border-2); }
.pf-booking-bn { font-weight:700; color:var(--text-3); font-variant-numeric:tabular-nums; }
.pf-booking-eq { color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-booking-zeit { color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-booking-st { justify-self:end; font-weight:600; }
.pf-booking--alt { background:rgba(255,255,255,.02); border-style:dashed; cursor:default; }
.pf-booking--alt:hover { background:rgba(255,255,255,.02); border-color:var(--border); }

/* Profil-Info-Karten (.pf-grid/.pf-card): mit .kd-tiles/.kd-tile zu EINER Regel zusammengelegt
   (oben bei den Kacheln) — vorher zwei byte-gleiche Zwillingsdefinitionen, die auseinanderdriften konnten. */
.pf-dl { display:grid; grid-template-columns:auto 1fr; gap:.15rem .7rem; margin:0; font-size:var(--fs-klein); }
.pf-dl dt { color:var(--text-4); font-weight:600; white-space:nowrap; }
.pf-dl dd { margin:0; color:var(--text-2); word-break:break-word; }
.pf-dl a { color:var(--blue-text); text-decoration:none; }
.pf-notizen { font-size:var(--fs-klein); color:var(--text-2); white-space:pre-wrap; margin:.5rem 0 0; }
.pf-vies { font-size:var(--fs-marke); font-weight:600; padding:.1rem .5rem; border-radius:999px; margin:0 .2rem; }
.pf-vies--ok { background:rgba(22,163,74,.15); color:var(--green-text); }
.pf-vies--bad { background:rgba(234,179,8,.15); color:var(--amber-text); }

/* Profil-Badges (Firma + Privat + Buchungs-Makro) — zentral statt je Template */
/* .kd-badge (--ok, --alt): Form und Farben aus der EINEN Pillenform (G4b); text-transform:none steht dort mit drin,
   damit nie GROSSBUCHSTABEN aus dem Umfeld geerbt werden */

/* ── 32. Motion — sanfte, einheitliche Animationen (Plan: NACHT_LOG 2026-07-02) ──
   Prinzipien: kurz (≤200ms), nur opacity/transform (GPU), ein Easing, kein Dauer-Gewusel.
   Seiten-Einstieg NUR Opazität (fixe Header/Toasts dürfen nicht springen). */
:root { --ease-out: cubic-bezier(.22,.7,.35,1); }
@keyframes mh-page-in { from { opacity:0; } to { opacity:1; } }
@keyframes mh-pop-in { from { opacity:0; transform:scale(.98) translateY(4px); } to { opacity:1; transform:none; } }
.mh-main { animation: mh-page-in .18s var(--ease-out); }
.mh-btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .mh-main, .kp-modal-box, .kp-picker { animation: none !important; }
  .mh-btn:active { transform: none; }
}

/* ── Monatsangebote (equipment_angebote.html): Paket-Karten + Drag&Drop-Chips ── */
.ang-intro { color: var(--text-3); font-size: var(--fs-text); max-width: 600px; margin: 0 0 1rem; }
.ang-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .ang-layout { grid-template-columns: 1fr; } }
.ang-pakete { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.ang-suche { width: 100%; box-sizing: border-box; margin: 0 0 .6rem; padding: .45rem .6rem;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r); color: var(--text); }
/* Kopf in zwei Zeilen: der Name hat die ganze Breite (in einer Zeile mit Rabatt und Knöpfen blieben ~130 px,
   „Monatsangebot" stand als „Monatsangebo" da), darunter Rabatt und Speichern; das Kreuz oben rechts */
.ang-paket-kopf { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "name name name weg" "proz speichern . .";
  gap: .5rem .4rem; align-items: center; margin-bottom: .6rem; }
.ang-paket-kopf .ang-name { grid-area: name; }
.ang-paket-kopf .ang-prozent-wrap { grid-area: proz; }
.ang-paket-kopf .ang-speichern { grid-area: speichern; }
.ang-paket-kopf .ang-weg { grid-area: weg; margin-block: 0; }
/* gegen die globale input[type=text]-Regel (Breite 100 %, Abstand darunter) */
.ang-paket-kopf input.ang-name, .ang-paket-kopf input.ang-prozent { margin: 0; }
.ang-paket-kopf input.ang-prozent { width: 3.2rem; }
.ang-name { flex: 1 1 auto; min-width: 0; padding: .4rem .55rem; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: var(--r); color: var(--text); font-weight: 600; }
.ang-prozent-wrap { display: inline-flex; align-items: center; gap: .15rem; color: var(--text-2); white-space: nowrap; }
.ang-prozent { width: 3.2rem; padding: .4rem .35rem; text-align: right; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: var(--r); color: var(--text); font-weight: 700; }
.ang-drop { min-height: 72px; display: flex; flex-direction: column; gap: .35rem;
  border: 1px dashed var(--border-2); border-radius: var(--r-lg); padding: .5rem; }
.ang-drop--over { border-color: var(--blue); background: var(--blue-bg); }
.ang-chip { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
  padding: .4rem .6rem; cursor: grab; }
.ang-chip:active { cursor: grabbing; }
.ang-chip--drag { opacity: .45; }
.ang-chip-name { font-size: var(--fs-text); }
.ang-chip-preis { font-size: var(--fs-leise); color: var(--text-3); white-space: nowrap; }
.ang-hint { margin-top: .4rem; font-size: var(--fs-leise); color: var(--text-4); }
.ang-count { color: var(--text-3); font-size: var(--fs-klein); font-weight: 400; }
.ang-quelle .ang-drop { max-height: 62vh; overflow-y: auto; }
.ang-paket-frist { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: -.2rem 0 .6rem; font-size: var(--fs-klein); color: var(--text-3); }
.ang-paket-frist label { display: inline-flex; align-items: center; gap: .35rem; }
.ang-datum { padding: .3rem .45rem; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r); color: var(--text); color-scheme: dark; }
.ang-frist-hint { color: var(--text-4); }
/* Zustand + Zeitraum als Satz UEBER den Eingabefeldern: die Felder sind der Editor, dieser
   Streifen ist die Anzeige. Farbe und Form der Pille kommen aus mh-status (DESIGN.md) — eine
   eigene Farbe hier waere die dritte Wahrheit fuers gleiche Signal. */
.ang-paket-lage { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .35rem; }
.ang-lage-satz { font-size: var(--fs-klein); color: var(--text-3); }

/* ══════════════════════════════════════════════════════════════════════════════
   GETEILTER MIETHUB-KALENDER (MbtCal, static/js/spezial_builder.js) — KANONIK.
   EINE Quelle für Detailseiten-Builder, Neue Anfrage und Spielplatz. Klassennamen
   exakt die, die MbtCal vergibt. Lokale Kopien (timeline.html, anfrage_detail.css)
   überstimmen bis zu ihrem Abbau — Werte hier sind mit ihnen abgeglichen.
   ══════════════════════════════════════════════════════════════════════════════ */
.mbt-cal { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
.mbt-cal-nav { display: flex; align-items: center; justify-content: space-between; padding: .45rem .75rem;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border-bottom: 1px solid var(--border); }
.mbt-cal-nav-title { font-size: var(--fs-klein); color: var(--text-2); font-weight: 600; }
.mbt-cal-navbtn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text-3); cursor: pointer; padding: .15rem .55rem; font-size: var(--fs-hervor); line-height: 1.4; }
.mbt-cal-navbtn:hover { color: var(--text); border-color: var(--blue); }
.mbt-cal-body { display: flex; }
.mbt-cal-month { flex: 1; padding: .5rem .6rem; min-width: 0; }
.mbt-cal-month + .mbt-cal-month { border-left: 1px solid var(--border); }
.mbt-cal-mh { font-size: var(--fs-leise); font-weight: 700; color: var(--text-2); text-align: center; margin-bottom: .3rem; padding: .1rem 0; }
.mbt-cal-grid7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mbt-cal-dow { text-align: center; font-size: var(--fs-marke); color: var(--text-3); padding: .15rem 0 .2rem; }
.mbt-cal-day { text-align: center; padding: .22rem 0; cursor: pointer; border-radius: 3px; font-size: var(--fs-klein);
  color: var(--text-2); border: 1px solid transparent; }
.mbt-cal-day:hover { background: color-mix(in srgb, var(--blue) 18%, var(--surface)); color: var(--text); }
.mbt-cal-hint { padding: .35rem .75rem; border-top: 1px solid var(--border); font-size: var(--fs-leise); color: var(--text-3); }
.mbt-we { color: var(--text-3); }
.mbt-cal-day.mbt-hol { color: #f87171; font-weight: 600; }
.mbt-cal-day.mbt-today { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.mbt-cal-day.mbt-past { opacity: .45; }   /* Vergangenheit: HINWEIS, keine Sperre — intern bewusst klickbar */

/* Auswahl (Standard-Range) */
.mbt-sel-start, .mbt-sel-end, .mbt-sel-both { background: #16a34a !important; color: #fff !important; border-radius: 3px !important; font-weight: 700; }
.mbt-sel-range { background: rgba(22,163,74,.22) !important; color: var(--text) !important; border-radius: 0 !important; }
.mbt-sel-hover { background: rgba(22,163,74,.15) !important; color: var(--green-text) !important; border-radius: 0 !important; }

/* Logistik-/Besitz-Marker (Daten kommen von außen: Server-Preview bzw. Preis-Antwort) */
.mbt-cal-day.mbt-m-versand { background: rgba(67,56,202,.35) !important; color: #a5b4fc !important; font-weight: 700; }
.mbt-cal-day.mbt-m-zustell { background: rgba(29,78,216,.35) !important; color: var(--blue-text-2) !important; font-weight: 700; }
.mbt-cal-day.mbt-m-abhol   { background: rgba(91,33,182,.35) !important; color: #c4b5fd !important; font-weight: 700; }
.mbt-cal-day.mbt-m-rueck   { background: rgba(185,28,28,.35) !important; color: var(--red-text) !important; font-weight: 700; }
.mbt-cal-day.mbt-m-besitz  { background: rgba(113,63,18,.35) !important; color: #fcd34d !important; font-weight: 700; }
.mbt-cal-day.mbt-m-frei    { background: rgba(245,158,11,.10) !important; color: #fcd34d !important;
  text-decoration: line-through; text-decoration-color: var(--amber-text); text-decoration-thickness: 2px;
  box-shadow: inset 0 0 0 1px rgba(245,158,11,.55); }   /* kostenfreier Besitztag im Standardmodus */
.mbt-cal-day.mbt-m-frueh { outline: 2px solid rgba(34,197,94,.55); }
.mbt-cal-day.mbt-m-zustell.mbt-m-frueh { background: linear-gradient(135deg, rgba(59,130,246,.22) 60%, rgba(34,197,94,.22) 100%) !important; }
.mbt-cal-day.mbt-m-abhol.mbt-m-frueh   { background: linear-gradient(135deg, rgba(167,139,250,.22) 60%, rgba(34,197,94,.22) 100%) !important; }

/* Spezialmodus (Malen) */
.mbt-cal-day.mbt-sp-miete  { background: rgba(34,197,94,.30) !important; color: #fff !important; font-weight: 700; }
.mbt-cal-day.mbt-sp-besitz { background: rgba(245,158,11,.22) !important; color: #fcd34d !important; cursor: pointer; }
.mbt-cal-day.mbt-sp-frei   { background: rgba(245,158,11,.10) !important; color: #fcd34d !important; text-decoration: line-through; text-decoration-color: var(--amber-text); text-decoration-thickness: 2px; box-shadow: inset 0 0 0 1px rgba(245,158,11,.55); opacity: .8; cursor: pointer; }
.mbt-cal-day.mbt-sp-frei:hover { opacity: 1; }
.mbt-cal-day.mbt-sp-pending         { outline: 2px solid #16a34a; outline-offset: -2px; }
.mbt-cal-day.mbt-sp-pending--besitz { outline: 2px solid #f59e0b; outline-offset: -2px; }
.mbt-sp-ctrl { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mbt-sp-paint-lbl { font-size: var(--fs-leise); color: var(--text-3); }
.mbt-sp-paintbtn { font-size: var(--fs-klein); padding: .25rem .6rem; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--bg); color: var(--text-3); cursor: pointer; }
.mbt-sp-paintbtn--on { background: var(--surface); color: var(--text); border-color: var(--blue); }
.mbt-sp-hint { font-size: var(--fs-leise); color: var(--text-3); flex-basis: 100%; line-height: 1.4; }
.mbt-sp-legend { display: flex; flex-wrap: wrap; gap: .2rem .9rem; flex-basis: 100%; font-size: var(--fs-leise); color: var(--text-3); line-height: 1.5; margin: .1rem 0 .15rem; }
.mbt-sp-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.mbt-sp-lg { display: inline-block; vertical-align: -.05em; width: .7rem; height: .7rem; border-radius: 3px; flex: 0 0 auto; }
/* Farbfeld statt grüner/gelber Emoji-Kästchen in Knöpfen und Zeitraum-Chips (DESIGN.md §17) */
.mbt-sp-paintbtn .mbt-sp-lg, .verl-modus-btn .mbt-sp-lg { margin-right: .4em; }
.mbt-sp-lg--miete  { background: rgba(34,197,94,.30); }
.mbt-sp-lg--besitz { background: rgba(245,158,11,.22); box-shadow: inset 0 0 0 1px rgba(245,158,11,.45); }
.mbt-sp-lg--frei   { background: rgba(245,158,11,.10); box-shadow: inset 0 0 0 1px rgba(245,158,11,.55); position: relative; }
.mbt-sp-lg--frei::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--amber-text); transform: translateY(-1px); }
.mbt-sp-lg--zustell { background: rgba(29,78,216,.35); }
.mbt-sp-lg--rueck   { background: rgba(185,28,28,.35); }
.mbt-sp-panel { margin-top: .6rem; }
.mbt-sp-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.mbt-sp-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-leise); padding: .2rem .2rem .2rem .55rem; border-radius: 999px; border: 1px solid var(--border-2); }
.mbt-sp-chip--miete  { background: rgba(34,197,94,.14);  border-color: rgba(34,197,94,.4);  color: var(--green-text); }
.mbt-sp-chip--besitz { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); color: #fcd34d; }
.mbt-sp-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: var(--fs-text); padding: 0 .25rem; opacity: .7; }
.mbt-sp-chip button:hover { opacity: 1; }
.mbt-sp-empty { font-size: var(--fs-klein); color: var(--text-4); font-style: italic; }
.mbt-sp-err { font-size: var(--fs-leise); color: var(--amber-text); min-height: 1.1rem; }
.mbt-sp-sum-err { color: var(--red-text); }
.mbt-sp-bd { margin-top: .55rem; }
.mbt-sp-bd-title { font-size: var(--fs-klein); font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.mbt-sp-bd-row { display: flex; align-items: baseline; gap: .5rem; padding: .22rem .45rem; border-radius: var(--r); font-size: var(--fs-klein); }
.mbt-sp-bd-lbl { flex: 1; min-width: 0; color: var(--text-3); display: flex; align-items: center; gap: .45rem; }
.mbt-sp-bd-lbl::before { content: ''; width: .6rem; height: .6rem; border-radius: 2px; flex: 0 0 auto; background: var(--border-2); }
.mbt-sp-bd-calc { color: var(--text-4); font-size: var(--fs-leise); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.mbt-sp-bd-val { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; white-space: nowrap; text-align: right; min-width: 5.5rem; }
.mbt-sp-bd-sumhead { font-size: var(--fs-leise); font-weight: 600; color: var(--text-3); margin: .45rem 0 .1rem; padding-top: .4rem; border-top: 1px dashed var(--border-2); }
.mbt-sp-bd-row--sum .mbt-sp-bd-lbl, .mbt-sp-bd-row--sum .mbt-sp-bd-val { font-weight: 700; }
.mbt-sp-bd-row--miete  .mbt-sp-bd-lbl { color: var(--green-text); }
.mbt-sp-bd-row--miete  .mbt-sp-bd-lbl::before { background: rgba(34,197,94,.55); }
.mbt-sp-bd-row--besitz .mbt-sp-bd-lbl { color: #fcd34d; }
.mbt-sp-bd-row--besitz .mbt-sp-bd-lbl::before { background: rgba(245,158,11,.6); }
.mbt-sp-bd-row--frueh  .mbt-sp-bd-lbl::before { background: var(--blue); }
.mbt-sp-bd-row--frei   .mbt-sp-bd-lbl, .mbt-sp-bd-row--frei .mbt-sp-bd-val { color: var(--text-4); text-decoration: line-through; }
.mbt-sp-bd-row--frei   .mbt-sp-bd-lbl::before { background: rgba(245,158,11,.25); }
.mbt-sp-bd-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .3rem; padding: .4rem .45rem 0; border-top: 1px solid var(--border-2); font-size: var(--fs-text); font-weight: 700; color: var(--text); }
.mbt-sp-bd-total span:last-child { color: var(--green-text); }
.mbt-sp-bd-belegt { font-size: var(--fs-leise); color: var(--text-4); margin-top: .25rem; padding: 0 .45rem; }

/* ── Wizard-Kleinteile (Schritt-Führung „Neue Anfrage") ── */
button.mh-tab { background: none; border: 0; cursor: pointer; font-family: inherit; line-height: inherit; }   /* Größe und Stärke wie Link-Reiter (.mh-tab) */
button.mh-tab:disabled { color: var(--text-4); cursor: default; }
.kf-input--fehlt { border-color: var(--red, #ef4444) !important; background: color-mix(in srgb, var(--red, #ef4444) 8%, var(--surface)); }
select.kf-input { cursor: pointer; }
textarea.kf-input { font-family: inherit; }

/* Ungültiger Tag im Zeichenmodus (Zustell-/Rückgabetag-Werkzeug): kurzes rotes Aufleuchten */
.mbt-cal-day.mbt-nope-flash { animation: mbtNope .4s ease; }
@keyframes mbtNope { 50% { background: rgba(239,68,68,.45); color: #fff; } }

/* „Als Nächstes"-Führung (Portal-dran): das jeweils nächste leere Pflichtfeld bekommt einen blauen Rand */
.kf-input--dran { border-color: var(--blue) !important; }

/* Werkzeug-Modus (Zustell-/Rückgabe-/Besitztag zeichnen): unerlaubte Tage sichtbar gesperrt */
.mbt-cal-day.mbt-nope { cursor: not-allowed; opacity: .35; }

/* Verlaengerung: abgelaufener/fehlgeschlagener Kartenlink — Warnhinweis neben den
   Knoepfen. Gleiche Rolle wie .zb-expired bei der Hauptrechnung. */
.verl-warn { font-size:var(--fs-leise); font-weight:700; color:var(--red-text); white-space:nowrap; }

/* ── Kundenunterlagen & Legitimation — EIN Baustein (DESIGN.md Abschnitt 13) ──
   Die Belege stehen ueberall in Beleg-KACHELN (.kd-tile--beleg, weiter oben). Das frühere
   eigene Label-Raster (.lg-grid/.lg-lab/.lg-val) ist ersatzlos raus: es war eine
   Template-Eigenerfindung und sah nach nichts aus (David 06.08.2026: „grausam designt",
   „schlampige Anordnungen"). Hier bleibt nur die Upload-Kachel + die kleine Thumb-Groesse. */
.beleg-add { width: 130px; height: 92px; border: 1px dashed var(--border-2); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; gap: .3rem; cursor: pointer;
  color: var(--blue-text); font-size: var(--fs-klein); }
.beleg-add:hover { background: var(--blue-bg); }
.doc-thumbs--sm .doc-thumb, .doc-thumbs--sm .beleg-add { width: 92px; height: 64px; }
.doc-thumbs--sm .doc-item { max-width: 92px; }

/* ── EIN Bearbeiten-Knopf im ganzen Programm (DESIGN.md 5, David 06.08.2026) ──
   Stift-Symbol als mh-btn mh-btn--sm mh-btn--icon mh-btn--geist mh-edit (seit 21.10.2026, GUI G3c);
   .mh-edit ist nur noch der Haken. In Kachelkoepfen sitzt er in .kd-tile-act. */

/* ── EINE Website-Push-Karte (Mietbedingungen · Datenschutz · Infos & FAQ) ──
   Vorher dreimal wortgleich pro Template kopiert (mbq-/dsq-/if-Präfix).
   Markup + JS kommen aus templates/parts/_website_push.html. */
.web-push { margin: 1.25rem 0; }   /* Karte selbst: .mh-card (seit 22.10.2026 mit Titel im Kartenkopf) */
.web-push-txt { font-size: var(--fs-klein); color: var(--text-3); margin: .6rem 0 .7rem; line-height: 1.55; }
.web-push-warn { font-size: var(--fs-klein); color: var(--red-text); margin: 0 0 .7rem; }
.web-push-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.web-push-msg { font-size: var(--fs-klein); color: var(--text-3); }
.web-push-msg.ok { color: var(--green-text); font-weight: 600; }
.web-push-msg.err { color: var(--red-text); }
.web-push-det { margin-top: .9rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.web-push-det summary { cursor: pointer; font-size: var(--fs-klein); color: var(--text-2); font-weight: 600; }
.web-push-loader-lbl { font-size: var(--fs-leise); font-weight: 600; color: var(--text-2); margin: .5rem 0 .3rem; }
.web-push-loader { width: 100%; margin: 0 0 .4rem; padding: .5rem .6rem; font-family: var(--font-mono);
  font-size: var(--fs-leise); background: var(--input-bg); color: var(--text); border: 1px solid var(--border-2);
  border-radius: 6px; resize: vertical; }

/* ── Markdown-Dokument dunkel gerendert (Mietbedingungen, Datenschutzerklärung) ──
   Vorher zweimal wortgleich (.mbq-doc/.dsq-doc). max-width bleibt: Lese-Breite eines
   Fließtext-Dokuments (erlaubte Ausnahme, DESIGN.md 1). */
.md-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.6rem 1.9rem; max-width: 820px; color: var(--text-2); font-size: var(--fs-text); line-height: 1.6; }
.md-doc h1 { font-size: var(--fs-titel); color: var(--text); margin: 1.8rem 0 .5rem; }
.md-doc h2 { font-size: var(--fs-hervor); color: var(--text); margin: 1.5rem 0 .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--border); }
.md-doc h2:first-child { margin-top: 0; }
.md-doc h3 { font-size: var(--fs-text); color: var(--text); margin: 1rem 0 .35rem; }
.md-doc p { margin: 0 0 .7rem; }
.md-doc strong { color: var(--text); }
.md-doc ul, .md-doc ol { margin: 0 0 .8rem; padding-left: 1.3rem; }
.md-doc li { margin: 0 0 .3rem; }
.md-doc a { color: var(--blue-text); text-decoration: none; word-break: break-word; }
.md-doc code { background: var(--surface-2); padding: 0 .3rem; border-radius: 4px; font-size: .85em; }
.md-doc hr { border: none; border-top: 1px solid var(--border); margin: 1.1rem 0; }
.md-doc blockquote { margin: .8rem 0; padding: .6rem 1rem; background: var(--surface-2);
  border-radius: var(--r); color: var(--text-3); }
.md-doc blockquote p:last-child { margin: 0; }
.md-doc table { width: 100%; border-collapse: collapse; margin: .7rem 0 1rem; font-size: var(--fs-text);
  display: block; overflow-x: auto; }
.md-doc th, .md-doc td { border: 1px solid var(--border); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.md-doc th { background: var(--surface-2); color: var(--text); }

/* ── Geteilte Listen-Bausteine (vorher pro Template kopiert: index/kunden_liste/firmen_liste/
   equipment_maengel) — DESIGN.md 4 führt .mh-listcard schon immer als Systembaustein. */
.mh-listcard { padding: .55rem .65rem; }
/* Leere Liste: EINE Zeile in der Listenkarte, Abstände zusammen wie .mh-card (wie „Noch keine Dokumente." in Faktura) */
.mh-listcard > .pf-empty { margin: 0; padding: .45rem .5rem; font-size: var(--fs-text); color: var(--text-3); }
.mh-tabs-sep { width: 1px; align-self: stretch; min-height: 1.2rem; background: var(--border); margin: .5rem .4rem; }
.mh-btn:disabled { opacity: .45; cursor: default; pointer-events: none; }

/* ── EINE Fehler-/Erfolgsbox (vorher 6x inline: kunden_detail/kunden_form/firma_form/change_password) */
.mh-error { background: var(--red-bg, rgba(239,68,68,.12)); border: 1px solid var(--red-border, rgba(239,68,68,.35));
  color: var(--red-text); border-radius: var(--r-lg); padding: .55rem .8rem; font-size: var(--fs-text); margin-bottom: .8rem; }
.mh-ok { background: var(--green-bg, rgba(34,197,94,.12)); border: 1px solid var(--green-border, rgba(34,197,94,.35));
  color: var(--green-text); border-radius: var(--r-lg); padding: .55rem .8rem; font-size: var(--fs-text); margin-bottom: .8rem; }

/* ── Bereichsumschalter Verleih | Faktura (Fächerkarten in der Sidebar, FAKTURA_PLAN.md 4) */
.mh-bereiche { display: flex; gap: .3rem; padding: 0 .6rem; margin: .15rem 0 .55rem;
  border-bottom: 1px solid var(--border); }
.mh-bereich { flex: 1; text-align: center; padding: .38rem .4rem .34rem; text-decoration: none;
  font-size: var(--fs-klein); font-weight: 600; /* normale Schreibweise statt Großbuchstaben (DESIGN.md §17) */
  color: var(--text-3); border: 1px solid transparent; border-bottom: none;
  border-radius: var(--r) var(--r) 0 0; }
.mh-bereich:hover { color: var(--text); background: var(--surface); }
.mh-bereich.active { color: var(--text); background: var(--surface-2);
  border-color: var(--border-2); border-bottom: 2px solid var(--blue); }

/* ── Dialog: natives <dialog> (Fokus und Escape vom Browser), wie .fk-dialog der Faktura.
   Erster Einsatz 14.10.2026: „Empfänger geändert" an der Rechnung (parts/documents.html). */
.mh-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.1rem 1.2rem;
  border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); color: var(--text);
  box-shadow: 0 18px 48px rgba(0,0,0,.5); }
.mh-dialog[open] { display: flex; flex-direction: column; gap: .8rem; }
.mh-dialog::backdrop { background: rgba(2,6,23,.6); }
.mh-dialog h2 { margin: 0; font-size: var(--fs-hervor); font-weight: 700; }
.mh-dialog p { margin: 0; line-height: 1.5; }
.mh-dialog-fuss { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }

/* ── Einstellungsseiten: EIN Seitentyp (Seitenumbau Schritt 5, 22.10.2026, wie Faktura DESIGN.md §20.4).
   Jeder Abschnitt ist eine Karte mit Titel im Kartenkopf (.mh-card-h > h2.mh-card-title), die Karten stehen
   in .mh-stapel. Was sofort wirkt, ist ein Schalter in einer Schalterzeile; Häkchen nur in Formularen mit
   „Speichern". Je Karte höchstens ein blauer Knopf, unten links in .mh-knopfreihe. ── */
.mh-stapel { display: flex; flex-direction: column; gap: 1.25rem; }
/* Felder in den Karten so hoch wie ein Knopf (36 px, DESIGN.md §5), ohne den Außenabstand der globalen
   input[type=…]-Regel: Felder ohne type waren 29 px, mit type 34 px samt Abstand darunter */
.mh-stapel .kf-input:not(textarea) { min-height: 2.25rem; margin: 0; }
.mh-seitenhinweis { margin: -.5rem 0 1.1rem; font-size: var(--fs-text); color: var(--text-3); }
h2.mh-card-title { margin: 0; }
.mh-card-n { font-size: var(--fs-klein); font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mh-card-sub { margin: -.4rem 0 .9rem; font-size: var(--fs-klein); color: var(--text-3); }
.mh-card-h .mh-card-meta { margin-left: auto; font-size: var(--fs-klein); color: var(--text-3); }
.mh-card-h .mh-card-meta strong { color: var(--text); font-weight: 600; }
/* Gruppe innerhalb einer Formularkarte (z. B. Bankverbindung): Haarlinie und kleiner Titel statt Karte in Karte */
.mh-gruppe { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.mh-gruppe-t { margin: 0 0 .6rem; font-size: var(--fs-klein); font-weight: 600; color: var(--text-2); }
.mh-gruppe-t .kf-hint { font-weight: 400; }
.mh-knopfreihe { display: flex; align-items: center; gap: .5rem .6rem; flex-wrap: wrap; margin-top: 1rem; }
.mh-card-sub + .mh-knopfreihe, .mh-card-h + .mh-knopfreihe { margin-top: 0; }
.mh-fussnote { margin: 1rem 0 0; font-size: var(--fs-klein); color: var(--text-4); }
.mh-rueck { font-size: var(--fs-klein); color: var(--text-3); }
.mh-rueck--ok { color: var(--green-text); }
.mh-rueck--fehler { color: var(--red-text); }
.mh-gespeichert { font-size: var(--fs-klein); color: var(--green-text); opacity: 0; transition: opacity .2s; white-space: nowrap; }
/* Schalterzeile: links Titel und eine leise Zeile, rechts der Schalter (oder ein Auswahlfeld) */
.mh-schalter-zeile { display: flex; align-items: center; gap: .75rem 1.5rem; padding: .85rem 0; }
.mh-schalter-zeile + .mh-schalter-zeile, .mh-schalter-zeile + .mh-schalter-mehr,
.mh-schalter-mehr + .mh-schalter-zeile { border-top: 1px solid var(--border); }
.mh-card-h + .mh-schalter-zeile, .mh-card-sub + .mh-schalter-zeile { padding-top: .1rem; }
.mh-card > .mh-schalter-zeile:last-child { padding-bottom: .1rem; }
.mh-schalter-text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-width: 0; margin-right: auto; }
.mh-schalter-text strong { font-size: var(--fs-text); font-weight: 600; color: var(--text); }
.mh-schalter-text small { font-size: var(--fs-klein); color: var(--text-3); }
.mh-schalter-zeile > select.kf-input { width: auto; min-width: 16rem; margin: 0; }
.mh-schalter { position: relative; display: inline-flex; flex: none; margin: 0; cursor: pointer; }
.mh-schalter input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mh-schalter-bahn { position: relative; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--border-2);
  transition: background .15s; }
.mh-schalter-bahn::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: .875rem; height: .875rem;
  border-radius: 50%; background: var(--text); transition: transform .15s; }
.mh-schalter input:checked + .mh-schalter-bahn { background: var(--blue-h); }
.mh-schalter input:checked + .mh-schalter-bahn::after { transform: translateX(1rem); }
.mh-schalter input:focus-visible + .mh-schalter-bahn { outline: 2px solid var(--blue-text); outline-offset: 2px; }
.mh-schalter-mehr { padding: .85rem 0 .1rem; }
/* Häkchen in einem Formular: Beschriftung in normaler Schrift (die globale label-Regel macht sonst 12 px fett) */
label.mh-ankreuzen { display: inline-flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: var(--fs-klein);
  font-weight: 400; color: var(--text-2); line-height: 1.4; cursor: pointer; }
label.mh-ankreuzen input { flex: none; margin: .1rem 0 0; }
.mh-ankreuzreihe { display: flex; gap: .6rem 1.75rem; flex-wrap: wrap; margin-top: 1rem; }
/* Wahl zwischen zwei, drei Wegen: Wahlkarten, die gewählte blau unterlegt (wie .fk-wahl der Faktura) */
.mh-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .6rem; }
label.mh-wahl-feld { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .75rem .9rem;
  border: 1px solid var(--border); border-radius: var(--r); font-size: var(--fs-text); font-weight: 400;
  color: var(--text-2); cursor: pointer; }
label.mh-wahl-feld:hover { border-color: var(--border-2); }
label.mh-wahl-feld:has(input:checked) { border-color: var(--blue-border); background: var(--blue-bg); }
label.mh-wahl-feld input { flex: none; margin: .2rem 0 0; }
.mh-wahl-text { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.mh-wahl-text strong { font-weight: 600; color: var(--text); }
.mh-wahl-text small { font-size: var(--fs-klein); color: var(--text-3); line-height: 1.45; }
/* Dateiwahl im Knopfstil statt des grauen Browser-Knopfs */
input.mh-datei { max-width: 100%; font-size: var(--fs-klein); color: var(--text-3); }
input.mh-datei::file-selector-button { height: 2.25rem; margin-right: .7rem; padding: 0 .9rem; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface); color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; }
input.mh-datei::file-selector-button:hover { border-color: var(--text-4); color: var(--text); }
/* Bild auf Papier (Logo, Unterschrift): weißer Grund ist hier richtig, Ausnahme nach DESIGN.md §2 */
.mh-papierbild { display: block; max-height: 70px; max-width: 300px; margin: 0 0 .8rem; padding: .4rem; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r); }
/* Tabellenfelder alle gleich hoch und in der Seitenschrift: die globale Regel input[type=number] gab ihnen
   Außenabstand, Uhrzeit- und Datumsfelder standen in der Browserschrift (wie Faktura, DESIGN.md §20) */
.es-table .es-inp { margin: 0; font-family: inherit; line-height: 1.4; }
/* Zahlen in Tabellenfeldern: rechtsbündig, ohne Pfeilchen (die nahmen die Hälfte des Felds: 63 stand als 6 da) */
.es-table th.es-th-zahl { width: 6rem; text-align: right; white-space: nowrap; }
.es-inp.es-inp--zahl { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.es-inp.es-inp--zahl::-webkit-inner-spin-button, .es-inp.es-inp--zahl::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.es-table th.es-th-weg { width: 2.5rem; }
/* Liste in einer Karte: Zeilen nur mit Trennlinie, Spalten legt die Seite fest (DESIGN.md §8) */
.mh-zeilen > * + * { border-top: 1px solid var(--border); }
.mh-zeilen-kopf { font-size: var(--fs-leise); font-weight: 600; color: var(--text-4); }

/* ═══════════════════════════════════════════════════════════
   MOBIL M1+M2 (MOBIL_PLAN.md) — rein additiv, NUR am Stapelende.
   Desktop (>1024px, Maus) betritt keinen dieser Blöcke; einzige
   Ausnahme sind die zwei Basiszeilen direkt hier drunter, die
   Burger + Schleier am Desktop ausdrücklich VERSTECKEN.
═══════════════════════════════════════════════════════════ */

/* M1-Basis: Menü-Knopf + Schleier existieren im HTML (base.html),
   sind aber ohne Schmal-Breakpoint grundsätzlich unsichtbar. */
.mh-burger { display: none; }
.mh-nav-schleier { display: none; }

/* M2: EIN geteilter Quer-Scroll-Wrapper für breite Tabellen ohne eigene
   Wrapper-Klasse (rb-tab, ai-tbl, …) — Muster wie .an-scroll/.es-table-wrap:
   die Tabelle scrollt IN sich, statt die Seite seitlich wegzuschieben. */
.mh-scroll-x { overflow-x: auto; }

/* ── M1: Schale ≤1024px — Seitenleiste wird Ausklapp-Menü (Drawer),
   Inhalt bekommt die volle Fensterbreite (MOBIL_PLAN §1). ── */
@media (max-width: 1024px) {
  .mh-sidebar {
    width: min(260px, 80vw);
    transform: translateX(-100%);
    transition: transform .18s ease;
    z-index: 400;                     /* über dem festen Kopf der Buchungsseite (.dh-bar, 200) */
    box-shadow: var(--shadow-lg);
  }
  body.mh-nav-offen .mh-sidebar { transform: translateX(0); }

  .mh-main {
    margin-left: 0;
    padding-top: 4rem;                /* Platz für den fixen Burger (endet bei ~54px), Pagehead rutscht drunter */
  }

  .mh-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: .6rem;
    left: .6rem;
    z-index: 300;                     /* über den fixen Leisten (200), unter Schleier (350) + Drawer (400) */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }

  body.mh-nav-offen .mh-nav-schleier {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 350;
  }
}

/* ── M2: Touch-Mindestziele — nur bei grobem Zeiger (Finger), unabhängig
   von der Fensterbreite. Regel: Zeile darf höher werden, px-feste
   Grid-Spalten (anf 2rem · klr/flr 2.5rem · es-del 40px) dürfen NICHT
   überlaufen → dort wächst nur die Höhe, nie die Breite. ── */
@media (pointer: coarse) {
  /* Symbolknöpfe (auch Stift und Löschen in Kachelköpfen, seit G3c mh-btn--icon) */
  .mh-btn--icon, .mh-btn--sm.mh-btn--icon { min-width: 2.5rem; min-height: 2.5rem; justify-content: center; }
  .mh-btn--geist.mh-btn--icon { margin-block: 0; }   /* am Handy voller Platz statt Überhang, wie vor G3c */

  /* Knöpfe/Pillen in Flex-Reihen: nur Höhe anheben */
  .mh-btn--sm { min-height: 2.5rem; }
  .mh-tab { display: inline-flex; align-items: center; min-height: 2.5rem; }

  /* Icon-Knöpfe in px-festen Listenspalten: NUR Höhe (s. o.); klr-/flr-actbtn und es-del-btn sind seit G3c mh-btn */
  .anf-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
  }

  /* M4: MbtCal-Kalenderzellen (Mietberechnung/Preis-Check) fingertauglich —
     Zellen ≥40px hoch; die zwei Monate dürfen untereinander stapeln, wenn es
     zu schmal wird (.mbt-cal-body > … schlägt die flex:1-Zeile im Timeline-Part). */
  .mbt-cal-day { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; }
  .mbt-cal-body { flex-wrap: wrap; }
  .mbt-cal-body > .mbt-cal-month { flex: 1 1 260px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBIL H1 — Handy (doku/MOBIL_HANDY_LISTE.md, 28.09.2026: B1 + C1–C4).
   Rein additiv, NUR am Stapelende (DESIGN.md §16). Desktop (>1024px,
   Maus) betritt keinen dieser Blöcke; einzige Ausnahme ist die
   Basiszeile .mh-kopfleiste {display:none} direkt hier drunter.
═══════════════════════════════════════════════════════════ */

/* B1-Basis: die Kopfleiste existiert im HTML (base.html), ist aber ohne
   Handy-Breakpoint unsichtbar (wie .mh-burger oben). */
.mh-kopfleiste { display: none; }

/* ── B1 ≤768px: feste Kopfleiste hinter dem Menüknopf. Vorher schwebte der
   Knopf allein über dem Inhalt und verdeckte beim Scrollen Text und Reiter.
   Die Leiste ist 3.5rem hoch; der Knopf (44px ab .6rem) liegt darin.
   Z-Ebene 250: über den fixen Leisten (200), unter Knopf (300), Schleier
   (350) und Menü (400). Zwischen 769 und 1024px bleibt es beim Knopf allein
   (dort hat das Buchungsdetail seine eigene feste Kopfzeile mit Knopf-Platz). ── */
@media (max-width: 768px) {
  .mh-kopfleiste {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3.5rem;
    padding: 0 1rem 0 4.1rem;          /* links: Platz für den Knopf */
    z-index: 250;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  }
  .mh-kopfleiste-marke {
    display: flex; align-items: center; gap: .6rem; min-width: 0; height: 100%;
    text-decoration: none; color: inherit;
  }
  .mh-kopfleiste-logo {
    height: 34px; width: auto; max-width: 5rem; flex: 0 0 auto;
    border-radius: 4px; object-fit: contain;
  }
  .mh-kopfleiste-titel {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--fs-hervor);
    font-weight: 600;
    color: var(--text-2);
  }
  .mh-burger { top: calc((3.5rem - 44px) / 2); }   /* senkrecht mittig in der Leiste, auf Höhe des Titels */
  .mh-main { padding-top: 4.5rem; }   /* unter der Leiste beginnen (vorher 4rem ohne Leiste) */
  html { scroll-padding-top: 4rem; }  /* Sprungmarken (#passwort …) landen nicht unter der Leiste */
}

/* ── ≤1024px: Karten (Leaflet) in ihrer eigenen Ebene halten. Leaflet gibt seinen Ebenen
   z-index 400–1000; ohne eigenen Stapelkontext lagen Karten (Sendungsverlauf, GPS) über
   Menüknopf (300), Kopfleiste (250) und den festen Leisten (200) — gesehen am 28.09.2026:
   die Verlaufskarte deckte die Summenleiste der Buchung ab. ── */
@media (max-width: 1024px) {
  .leaflet-container { isolation: isolate; }
}

/* ── C1–C3: Finger-Mindestmaße, nur bei grobem Zeiger. Zeile darf höher
   werden, feste Spalten nicht breiter (DESIGN.md §16). Das Website-Portal
   ([data-mh-portal]) hat eigene Handy-Maße und bleibt unberührt. ── */
@media (pointer: coarse) {
  /* C1: Eingabefelder waren app-weit 29px hoch */
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=image]),
         select, textarea):not([data-mh-portal] *) { min-height: 2.5rem; }
  /* C2: Häkchen und Auswahlpunkte waren 13px */
  :where(input[type=checkbox], input[type=radio]):not([data-mh-portal] *) { min-width: 1.25rem; min-height: 1.25rem; }
  /* C3: Zurück-Links („← Einstellungen") waren 20px hoch; einzeilig, also
     line-height statt Flex (das Inline-display:inline-block bleibt) */
  .dh-back { min-height: 2.5rem; line-height: 2.5rem; }
}

/* ── C4 ≤560px: Mindestschrift 12px für die kleinen Marken und Pillen, die
   heute bei .68–.7rem (10,9–11,2px) liegen (gemessen, Häufigste zuerst).
   body-Präfix: einige dieser Klassen stehen zusätzlich in Template-<style>-
   Blöcken, die NACH style.css kommen. Kalender und Analysen-Balken bleiben
   draußen (enge Festspalten, eigener Schritt B5/D4). ── */
@media (max-width: 560px) {
  body .kd-tile-mark, body .kd-tile-badge, body .pf-card-head, body .kd-badge, body .anf-mt,
  body .eqf-card-title, body .eqf-mount-group-label, body .eqf-serie-member-kat, body .eq-sub-mount,
  body .eq-category, body .aw-quelle, body .aw-mrz-btn, body .gps-ev-typ, body .gps-badge,
  body .gps-ev-badge, body .kl-dup, body .lbl-hint, body .em-kw-titel,
  body .dh-komm-last-dir, body .em-cc-toggle, body .fdk-filter-label,
  body .faq-group, body .fkk-video, body .vl-src { font-size: var(--fs-leise); }
  /* EINE Pillenform (G4b): alle Abzeichen am Handy 12 px, nicht nur die oben genannten */
  body .mh-pille, body .badge-mietertyp, body .mh-status, body .fkk-art, body .zusatz-missing, body .evl-bak { font-size: var(--fs-leise); }
}

/* ═══════════════════════════════════════════════════════════
   MOBIL H2 — zu breite Seiten (doku/MOBIL_HANDY_LISTE.md A, 28.09.2026).
   Rein additiv am Stapelende; seitenbezogene Teile stehen am Ende der
   jeweiligen Template-<style>-Blöcke. Desktop betritt keinen Block.
═══════════════════════════════════════════════════════════ */

/* A4/A7/A8: Knöpfe mit langem Text („… jetzt zur Website pushen") brachen nicht um und
   schoben die Seite bis 458px breit. GEZIELT diese Knöpfe: eine Regel für ALLE .mh-btn ließ
   Knöpfe in engen Reihen schrumpfen und Wort für Wort umbrechen (gesehen bei den Gutscheinen). */
@media (max-width: 560px) {
  .web-push-row .mh-btn, #push-btn, #bild-btn { white-space: normal; max-width: 100%; }
  /* A11 u. a.: überlange Wörter (Dateinamen wie reminder_verlaengerung_zahlung.html, Links in
     der Mietbedingungen-Vorschau) liefen über ihren Kasten und machten die Seite 2–5px breiter.
     break-word trennt NUR ein Wort, das allein nicht in die Zeile passt; alles andere bleibt ganz. */
  .mh-main { overflow-wrap: break-word; }
}

/* A3: Import-Tabelle der Bewertungen (sechs Spalten mit Eingabefeldern, 535px bei 390).
   Scrollt in ihrer Karte (DESIGN.md §16), Zeilen behalten ihre Mindestbreite. */
@media (max-width: 768px) {
  .mh-card:has(.bw-imp-row) { overflow-x: auto; }
  .bw-imp-row { min-width: 38rem; }
}

/* ═══════════════════════════════════════════════════════════
   MOBIL H3 — Alltagsseiten (doku/MOBIL_HANDY_LISTE.md B2/B3, 28.09.2026).
   Rein additiv am Stapelende; Desktop betritt keinen Block.
═══════════════════════════════════════════════════════════ */

/* Reiterleisten (.mh-tabs: Filter der Mietanfragen, Reiter der Buchung u. a.) waren auf dem
   Handy bis zu fünf Zeilen hoch. Jetzt EINE seitlich wischbare Zeile; der aktive Reiter wird
   beim Laden ins Bild gerückt (base.html). body-Präfix: Seiten setzen .mh-tabs in eigenen
   <style>-Blöcken bzw. anfrage_detail.css mit flex-wrap:wrap nach. */
@media (max-width: 768px) {
  body .mh-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 0;   /* die Linie der Leiste sitzt sonst 2 px unter der des aktiven Reiters */
  }
  body .mh-tabs::-webkit-scrollbar { display: none; }
  body .mh-tabs > * { flex: 0 0 auto; white-space: nowrap; }
}

/* ── MOBIL H4: Erklärtexte oben auf Seiten (Klasse .mh-erklaerung, z. B. Posteingang,
   Verfügbarkeit) nahmen auf dem Handy einen halben Bildschirm ein, bei jedem Besuch. Dort
   zeigen sie zwei Zeilen; base.html hängt „Mehr lesen" an, wenn Text abgeschnitten ist. ── */
@media (max-width: 560px) {
  /* display mit !important: manche Absätze tragen ein Inline-display:block (Gutscheine) */
  .mh-erklaerung { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
                   overflow: hidden; margin-bottom: .2rem !important; }
  .mh-erklaerung.offen { display: block !important; -webkit-line-clamp: unset; }
  .mh-erkl-mehr { display: inline-flex; align-items: center; min-height: 2.5rem; margin: 0 0 .7rem;
                  padding: 0; background: none; border: 0; color: var(--blue-text); font: inherit;
                  font-size: var(--fs-text); cursor: pointer; }
}

/* ── Fenster über Kopfleiste und Menü (Fund 28.09.2026 nach MOBIL H1): Die Schreibfenster
   in Posteingang/Verfügbarkeit (z 60/61) und das Verfügbarkeits-Fenster im Kalender (60)
   lagen UNTER Kopfleiste (250) und Menüknopf (300): Titel und Schließen-× waren verdeckt.
   Auf Handy/Tablet über Menü (400) heben. body-Präfix: die z-index stehen in Template-
   <style>-Blöcken nach style.css. ── */
@media (max-width: 1024px) {
  body .pe-comp-bg, body .va-comp-bg { z-index: 450; }
  body .pe-comp, body .va-comp, body .kal-availpop { z-index: 451; }
}

/* ── MOBIL H5 (28.09.2026): die ältere Reiter-Bauart (.tabs .tab-links, z. B. Equipment-
   Kategorien) genauso als EINE wischbare Zeile wie .mh-tabs oben. ── */
@media (max-width: 768px) {
  body .tabs .tab-links { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
                          scrollbar-width: none; padding-bottom: 2px; }
  body .tabs .tab-links::-webkit-scrollbar { display: none; }
  body .tabs .tab-links > li { flex: 0 0 auto; white-space: nowrap; }
}
/* Wischbare Zeilen: weicher Auslauf am rechten Rand, solange dort noch Reiter kommen
   (Klasse setzt base.html nur, wenn die Zeile überläuft und nicht am Ende steht). */
@media (max-width: 768px) {
  .mh-mehr-rechts { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
                    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
}

/* ═══════════════════════════════════════════════════════════
   MOBIL H6 — tiefere Durchsicht (28.09.2026): kleine Handys (360px).
═══════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* Seitenköpfe: lange Wörter („Verfügbarkeitsanfragen") dürfen silbengetrennt umbrechen,
     Suchfelder im Kopf (Behind the Scenes: Inline-min-width 15rem) schrumpfen mit */
  .mh-pagehead h1 { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
  .mh-pagehead-actions { max-width: 100%; }
  .mh-pagehead-actions form { flex-wrap: wrap; max-width: 100%; }
  /* Auswahl- und Eingabefelder mit fester Inline-Mindestbreite (z. B. 340px in den
     Mietbedingungen) sprengten 360px-Handys. Nur dort, wo eine Inline-min-width steht. */
  .mh-main select[style*="min-width"], .mh-main input[style*="min-width"] { min-width: 0 !important; max-width: 100%; }
}

/* ── MOBIL H7 (28.09.2026): Anfrage anlegen — das eingebettete Buchungsportal ist selbst eine
   Karte; der äußere Miethub-Kasten (Inline-padding 1rem) kostete auf dem Handy doppelt Rand.
   Dort weg, das Portal bekommt die volle Breite. ── */
@media (max-width: 560px) {
  .anp-links > .mh-card { padding: 0 !important; background: none; border: 0; box-shadow: none; }
}

/* ── MOBIL H8 (01.10.2026, doku/MOBIL_HANDY_LISTE.md D3/D4/D6 + Buchungsdetail): Tippflächen,
   die die Messung noch unter 40px fand. `body` vorn, weil die Regeln der Seiten in deren
   eigenem <style> NACH style.css stehen. ── */
@media (pointer: coarse) {
  /* Infos & FAQ pflegen: ↑ ↓ 🗑 je Eintrag (30px) */
  body .if-ops button { width: 2.5rem; height: 2.5rem; }
  /* Analysen: Jahres-Reiter (30px hoch) */
  body .an-jahr { display: inline-flex; align-items: center; min-height: 2.5rem; }
  body .an-tab { min-height: 2.5rem; }
  /* Buchungsdetail: „Ins Archiv" / „ein Schritt zurück", Schreibfenster schließen, CC/BCC,
     „freie Antwort", „+ Weitere Dokumente", Sendungsverlauf „↻ Aktualisieren" (24 bis 32px) */
  body .dh-jc-btn, body .dh-jc-back { min-height: 2.5rem; }
  body .em-cc-toggle, body .em-kw-frei, body .em-kw-kachel, body .em-att-more, body .vl-refresh { min-height: 2.5rem; }
  /* GPS-Tracker: Buchungslinks und 📍 in den Tracker-Karten (15px hoch, 📍 16px breit) */
  body .gps-verweis { display: inline-flex; align-items: center; justify-content: center;
                   min-height: 2.25rem; min-width: 2.25rem; }
}
@media (max-width: 560px) {
  /* Kalender: KW- und Wochentag-Beschriftung, Analysen: Zahlen über den Balken (10px) */
  body .kal-kw-lbl, body .kal-dwd { font-size: var(--fs-leise); }
  body .an-bar-val, body .an-bar-lbl { font-size: var(--fs-leise); }
  /* Einstellungen (Schritt 5): Schalterzeile mit Auswahlfeld bricht um, das Feld nimmt die ganze Breite
     (gemessen 390 px: „Wer verschickt sie?" machte die Seite des Buchungsportals zu breit) */
  .mh-schalter-zeile:has(> select) { flex-wrap: wrap; }
  .mh-schalter-zeile > select.kf-input { min-width: 0; width: 100%; }
}

/* ── Profile (Entwurf 4, 22.10.2026): Rechnungs- und Lieferadressen unter 1100 px untereinander; am Handy rücken die
   Stammdaten-Angaben enger zusammen (Trennlinie mittig im kleineren Abstand). ── */
@media (max-width: 1100px) {
  .pf-paar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pf-fakten { column-gap: 2rem; }
  .pf-f::before { left: -1rem; }
  /* Kundentyp unter dem Namen statt eingerückt umzubrechen */
  .pf-typ { display: block; margin: .2rem 0 0; }
  /* Buchungszeile: Nummer und Status oben, darunter Gerät und Zeitraum (vorher blieben bei 390 px nur Nummer und
     Status sichtbar, „#RE2024034" brach mitten in der Zahl um) */
  .pf-booking { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "bn st" "eq eq" "zeit zeit"; row-gap: .2rem; }
  .pf-booking-bn { grid-area: bn; white-space: nowrap; }
  .pf-booking-eq { grid-area: eq; }
  .pf-booking-zeit { grid-area: zeit; }
  .pf-booking-st { grid-area: st; }
}