/* FLEXX³ – Stylesheet der App-Hülle.
   Farbschema über CSS-Variablen; Dunkelmodus per [data-theme="dark"] auf <html>. */

/* CI-Farben: Nachtblau #0B1320 · Navy #1A2332 · Signalrot #FF3B30 · Cyan #00D4E0
   · Hellgrau #E6E8EB · Schiefer #64748B (siehe branding/flexx3-ci.png) */
:root {
  --brand: #1a2332;          /* Navy (Primäraktionen) */
  --brand-dark: #0b1320;
  --accent: #00d4e0;         /* Cyan */
  --anthracite: #0b1320;
  --bg: #f2f4f6;
  --card: #ffffff;
  --text: #0b1320;
  --muted: #64748b;
  --border: #e6e8eb;
  --danger: #d92a20;         /* abgedunkeltes Signalrot (Kontrast auf hell) */
  --ok: #2e7d32;
  --warn-bg: #fdeeed;
  --shadow: 0 1px 3px rgba(11, 19, 32, 0.10), 0 4px 14px rgba(11, 19, 32, 0.06);
  --radius: 14px;
  --nav-height: 62px;
}

[data-theme='dark'] {
  --brand: #00d4e0;
  --brand-dark: #00b5c4;
  --accent: #ff3b30;
  --anthracite: #e6e8eb;
  --bg: #0b1320;
  --card: #1a2332;
  --text: #e6e8eb;
  --muted: #8b99ad;
  --border: #2a3648;
  --danger: #ff6b62;
  --ok: #81c784;
  --warn-bg: #33191c;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ---------- Farbdesigns (data-design; wirken je in Hell UND Dunkel) ----------
   'klassik' = Basis oben (CI). Die Design-Selektoren sind spezifischer
   ([data-theme][data-design] = 0,2,0) und überschreiben die Basis (0,1,0). */
/* MODERN – kühles Petrol/Graphit, klar */
[data-theme='light'][data-design='modern'] {
  --brand: #216478; --brand-dark: #184c5c; --accent: #4a9bb5; --anthracite: #1e2a30;
  --bg: #f2f5f6; --card: #ffffff; --text: #1e2a30; --muted: #5f6f77; --border: #dde5e8;
  --warn-bg: #e8f0f3;
}
[data-theme='dark'][data-design='modern'] {
  --brand: #5bb0c9; --brand-dark: #3f92ab; --accent: #4a9bb5; --anthracite: #eef3f5;
  --bg: #10161a; --card: #191f24; --text: #eef3f5; --muted: #9aa9b1; --border: #29343b;
  --warn-bg: #17242b;
}
/* FREUNDLICH – warm, einladend (Terracotta/Bernstein) */
[data-theme='light'][data-design='freundlich'] {
  --brand: #bd5f3c; --brand-dark: #9e4c2e; --accent: #e2a94a; --anthracite: #3a2e26;
  --bg: #faf4ec; --card: #fffdf9; --text: #3a2e26; --muted: #857567; --border: #ece0d1;
  --warn-bg: #f6ecdd;
}
[data-theme='dark'][data-design='freundlich'] {
  --brand: #e08a63; --brand-dark: #c06d4a; --accent: #e2a94a; --anthracite: #f5ece3;
  --bg: #1c1713; --card: #271f19; --text: #f5ece3; --muted: #b3a596; --border: #3a3027;
  --warn-bg: #2e2418;
}
/* NATUR – Rebgrün, frisch und ruhig */
[data-theme='light'][data-design='natur'] {
  --brand: #2f7d54; --brand-dark: #24623f; --accent: #7fb98f; --anthracite: #1f2b23;
  --bg: #f1f6f0; --card: #ffffff; --text: #1f2b23; --muted: #5e6f63; --border: #dbe7d9;
  --warn-bg: #eef4ea;
}
[data-theme='dark'][data-design='natur'] {
  --brand: #63b587; --brand-dark: #479a6c; --accent: #7fb98f; --anthracite: #eef4ee;
  --bg: #121712; --card: #1a211b; --text: #eef4ee; --muted: #9db0a2; --border: #2a332c;
  --warn-bg: #1a2417;
}
/* AMETHYST – elegantes Violett */
[data-theme='light'][data-design='amethyst'] {
  --brand: #6d4a9c; --brand-dark: #573a7f; --accent: #b79ad6; --anthracite: #241f2e;
  --bg: #f5f2f8; --card: #ffffff; --text: #241f2e; --muted: #6b6478; --border: #e6dfee;
  --warn-bg: #efeaf5;
}
[data-theme='dark'][data-design='amethyst'] {
  --brand: #a488d6; --brand-dark: #8a6dc0; --accent: #b79ad6; --anthracite: #efeaf5;
  --bg: #161320; --card: #1f1a2a; --text: #efeaf5; --muted: #a79fb8; --border: #322b40;
  --warn-bg: #241d33;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  /* Kein horizontales Scrollen des GANZEN Dokuments (sonst liegt auf Android ein
     Dokument-Scrollbalken unten über der Leiste und die Seite lässt sich seitlich
     schieben → fixierte Leiste „wandert"). `clip` unterbindet es, ohne — anders als
     `hidden` — position:fixed zu brechen (vertikal wird weiter normal gescrollt).
     Innere Scroll-Container (Plantafel etc.) bleiben unberührt. */
  overflow-x: clip;
}

/* ---------- Schrift: Inter wie VINORUM (1.0.52, Betreiber) ----------
   Lokal ausgeliefert, kein externer Dienst: Inter (SIL Open Font License) als
   variable Schrift 400–700, zwei Latin-Subsets aus VINORUM übernommen. Der
   Browser lädt latin-ext erst, wenn ein Zeichen daraus gebraucht wird.
   Vorher stand hier 'Montserrat' — die Datei lag nie bei, gerendert wurde also
   der Fallback (Century Gothic unter Windows). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../vendor/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../vendor/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Formularelemente erben die Schrift NICHT von selbst — deshalb ausdrücklich,
   wie im VINORUM-Layout „kompakt": leicht engere Laufweite im Text, deutlich
   engere in Überschriften, Beträge in gleicher Ziffernbreite. */
body, input, select, textarea, button {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.006em;
}
h1, h2, h3, .sheet-title, .module-name, strong, b { letter-spacing: -0.02em; }
.kpi-val, td, .dash-z-wert { font-variant-numeric: tabular-nums; }

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Kopfzeile ---------- */
.app-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-left { display: flex; align-items: center; gap: 10px; }

.brand-logo { height: 26px; width: auto; display: block; }

/* Kopfzeile zeigt die kompakte Wortmarke (ohne Claim); im Dunkelmodus hell. */
[data-theme='dark'] .brand-logo { content: url('../branding/logo_wordmark_light.png'); }
/* Kundenlogo (per JS gesetzt): Dunkelmodus-Tausch aufheben, src gilt für beide Themes */
[data-theme='dark'] .brand-logo.is-custom { content: normal; }

.demo-badge {
  background: var(--accent);
  color: #3a2f10;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Demo-Umgebung: Abzeichen einblenden + dezenter Farbstreifen an der Kopfzeile.
   Die eigene Datenbank je Host regelt das Backend (config.<host>.php). */
body.is-demo .app-header { box-shadow: inset 0 3px 0 var(--brand); }

.brand-actions { display: flex; align-items: center; gap: 6px; }

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Sprachumschalter (Dropdown) ---------- */
.lang-switch-host { position: relative; }

/* Ruhezustand transparent wie die Icon-Buttons daneben (.icon-btn) —
   sichtbare Fläche erst beim Hover/Fokus; das Panel bleibt eine Karte. */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.lang-btn:hover,
.lang-btn:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); }

.lang-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.lang-caret-wrap { display: inline-flex; }
.lang-caret { opacity: 0.55; }

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 60;
  min-width: 168px;
}

.lang-menu[hidden] { display: none; }

.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  text-align: left;
}

.lang-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.lang-item.is-active { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-weight: 700; }

/* ---------- Buttons ---------- */
.icon-btn {
  border: none;
  background: none;
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }

.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 12px;
  cursor: pointer;
}

.btn svg { width: 18px; height: 18px; fill: currentColor; }

.btn:hover { border-color: var(--brand); }

.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* KOPF-AKTION (Listen-/Kartenkopf: „Angebot anlegen", „Artikel anlegen" …) —
   Muster VINORUM `.btn.kopf`, Betreiber-Entscheidung 26.09.2026: bewusst
   RUHIGER als .primary. Umriss in der Akzentfarbe, Text in Textfarbe, nur das
   Symbol trägt Farbe; die Kopfzeile gehört wieder der ÜBERSCHRIFT. Das
   kräftige .primary bleibt den DIALOG-Aktionen vorbehalten (Anlegen/Speichern
   im Sheet) — dort ist es die eine erwartete Antwort, im Listenkopf war es
   Daueraufdringlichkeit. */
.btn.kopf {
  background: transparent;
  border-color: var(--accent);
  color: var(--text);
  padding: 8px 14px;
  font-size: 13.5px;
  /* 40 px wie die Filter-Bedienelemente daneben (fdrop, Suchfeld) — sonst
     steht der Umriss um eine Haarlinie versetzt in der Reihe. */
  min-height: 40px;
}
.btn.kopf svg { fill: var(--brand); }
.btn.kopf:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}
/* Im DUNKELMODUS der CI ist --accent das SIGNALROT — als Umriss eines
   Anlege-Knopfes wäre das ein Alarm. Dort (und in jedem anderen Farbdesign)
   trägt der Knopf den aufgehellten Hauptton. */
[data-theme='dark'] .btn.kopf { border-color: var(--brand); }

/* Anklickbare Versionsanzeige (prueft sofort auf ein Update) */
.version-check { cursor: pointer; }
.version-check:hover { color: var(--brand); text-decoration: underline; }

/* Fenster waehrend des Updates (Grundgeruest steht inline in app.js, weil das
   Stylesheet in dem Moment gerade neu gezogen wird) */
.upd-box { max-width: 340px; width: 100%; text-align: center; display: flex;
           flex-direction: column; align-items: center; gap: 8px; }
.upd-box b { font-size: 16px; }
.upd-spinner { width: 34px; height: 34px; border-radius: 50%; margin-bottom: 4px;
               border: 3px solid rgba(255,255,255,.25); border-top-color: var(--accent);
               animation: upd-dreh .9s linear infinite; }
@keyframes upd-dreh { to { transform: rotate(360deg); } }
.upd-schritt { margin: 0; font-size: 13.5px; opacity: .9; }
.upd-balken { display: block; width: 100%; height: 5px; border-radius: 3px;
              background: rgba(255,255,255,.2); overflow: hidden; }
.upd-balken-fill { display: block; height: 100%; width: 0; background: var(--accent);
                   transition: width .18s ease; }
.upd-zahl { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.upd-hinweis { font-size: 12px; opacity: .6; margin-top: 4px; }

.btn.block { width: 100%; }

.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- Formulare ---------- */
/* KOMPAKTE GRUNDWERTE (Betreiber 27.09.2026): Feldhoehen und Abstaende rund
   20 % kleiner als bis 1.1.6. Erst nur in der Adress-Akte erprobt (.kompakt),
   dann ueberall uebernommen - eine lange Maske spart damit Rollvorgaenge. */
.field { margin-bottom: 11px; }

.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 3px;
}

.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
}

/* Passwortfeld mit „Auge" zum Ein-/Ausblenden */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.pw-eye:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.pw-eye svg { width: 20px; height: 20px; fill: currentColor; }

/* Textlink-Button (z. B. „Passwort vergessen?") */
.link-btn {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: none;
  color: var(--brand);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
}
.link-btn:hover { text-decoration: underline; }

/* Hinweistext im Sheet-Dialog */
.sheet-hint { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.sheet-section { font-weight: 700; font-size: 13px; color: var(--muted); margin: 4px 0 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Login-Kontextzeile (Weingutname / Operator) */
.login-context { margin: -8px 0 16px; color: var(--brand); font-weight: 700; }

/* „Weingut nicht verfügbar" */
.unavailable-ic { color: var(--accent); margin: 4px auto 8px; }
.unavailable-ic svg { width: 44px; height: 44px; fill: currentColor; }

/* ---------- FLEXX³ ADMINISTRATION ---------- */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-head .hint { margin: 2px 0 0; }
/* Wird es eng, bricht der AKTIONS-KNOPF in die naechste Zeile um - nicht der
   Titel mit seinem Kurztext (Muster VINORUM). */
.admin-head > div:first-child { flex: 1 1 240px; min-width: 0; }
/* Kopf-Knoepfe sitzen MITTIG AUF DER HAARLINIE unter dem Titel (Betreiber
   26.09.2026, Muster VINORUM) - nicht in der Filterzeile und nicht an der
   Titel-Oberkante. Die Rechnung: Titelzeile 27 px, Knopf 40 px hoch
   (min-height an .btn.kopf), also 27 - 40/2 = 7 px Versatz. */
.admin-head > .btn.kopf { margin-top: 7px; }
/* Mehrere Kopf-Aktionen nebeneinander (Sofortinformation: Zuruecksetzen +
   Suchen): doppelte Titelzeilenhoehe, Kinder zentriert - dann liegt die Mitte
   der Gruppe ebenfalls auf der Haarlinie, unabhaengig von der Knopfhoehe. */
.admin-head > .sel-aktionen,
.admin-head > .plan-kopf-akt { height: 54px; align-items: center; align-content: center; }

.tenant-list { display: flex; flex-direction: column; gap: 10px; }

.tenant-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  flex-wrap: wrap;
}

.tenant-main { flex: 1; min-width: 180px; }
.tenant-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tenant-name { font-weight: 700; }
.tenant-sub { color: var(--muted); font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- Hauptbereich / Karten ---------- */
/* Mobil/Tablet: zentrierte, lesbare Spalte. Desktop (ab 1024px): volle Breite –
   siehe Media-Query unten (wie CURENA). */
.view {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
}

/* Desktop nutzt die volle Bildschirmbreite, nur angenehme Seitenränder.
   Dialoge bleiben bewusst schmal/lesbar. */
@media (min-width: 1024px) {
  .view { max-width: none; padding: 20px 28px calc(var(--nav-height) + 20px); }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 16px;
}

.card h2 {
  margin: 0 0 10px;
  font-size: 18px;
}

.card p.hint { color: var(--muted); font-size: 14px; margin: 6px 0 0; }

.login-card {
  max-width: 380px;
  margin: 8vh auto 0;
  text-align: center;
}

.login-logo { width: min(280px, 78%); height: auto; margin: 4px auto 20px; display: block; }

[data-theme='dark'] .login-logo { content: url('../branding/logo_flexx3_dark.png'); }
/* Kundenlogo am Anmeldebildschirm: kein Theme-Tausch, Höhe begrenzen */
.login-logo.is-custom { width: auto; max-width: min(280px, 78%); max-height: 96px; }
[data-theme='dark'] .login-logo.is-custom { content: normal; }

.login-card form { text-align: left; }

.form-error {
  color: var(--danger);
  font-size: 14px;
  margin: 4px 0 10px;
  min-height: 18px;
}

.version-note {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 18px;
}
/* Dashboard-Fußzeile: Handbuch-Link + Version, ganz unten */
.dash-footer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--muted); font-size: 12.5px; margin: 26px 0 6px;
}
.dash-footer-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--brand); text-decoration: none; font-weight: 600;
}
.dash-footer-link:hover { text-decoration: underline; }
.dash-footer-link svg { width: 15px; height: 15px; }
.dash-footer-sep { opacity: 0.5; }

/* ---------- Banner (offline / Update / Installieren) ---------- */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 16px;
  font-size: 14px;
}

.banner .btn { padding: 5px 12px; border-radius: 9px; }

.banner.offline { background: var(--warn-bg); color: var(--text); }

.banner.update { background: var(--brand); color: #fff; }

/* DER UPDATE-HINWEIS STEHT OBEN UND BLEIBT STEHEN (1.1.80, Betreiber
   29.09.2026: „oben lassen, aber so, dass es immer zu sehen ist — wie bei
   VINORUM"). Im Seitenfluss rollte er beim ersten Scrollen aus dem Bild;
   als schwebende Pille unten (1.1.78) war er sichtbar, aber nicht mehr da,
   wo er hingehoert. Jetzt: feste Leiste am oberen Fensterrand, ueber der
   Kopfzeile (z-index 60 > .app-header 20) — 1:1 das VINORUM-Muster.
   Der Rand links kommt aus der Seitenleisten-Regel weiter unten. */
#update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
}

#update-banner .banner.update { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }

.banner.update .btn { background: #fff; color: var(--brand); border-color: #fff; }

.banner.install { background: var(--card); border-bottom: 1px solid var(--border); }

/* ---------- Untere Navigation ---------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  /* Seit 1.0.45 eine feste Zeichenreihe: gleichmäßig verteilt und mittig. */
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  z-index: 20;
  overflow: hidden;
  /* Eigene Compositor-Ebene: verhindert Repaint-„Ruckeln"/-Drift der fixierten
     Leiste beim Scrollen (Android/iOS). Bricht position:fixed NICHT (Transform
     liegt auf der Leiste selbst, nicht auf einem Vorfahren). */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.bottom-nav:empty { display: none; }

/* Die frühere horizontal scrollende Tab-Reihe ist mit 1.0.45 entfallen: Die
   untere Leiste trägt jetzt eine FESTE Reihe aus Zeichen (.nav-ic, weiter
   unten) — Burger, Dashboard, die zuletzt benutzten Bereiche, Einstellungen.
   Alles Übrige steht im Menü, das der Burger öffnet. */

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 50;
  max-width: min(90vw, 480px);
  text-align: center;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 16, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 40;
}

.modal {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  overflow: auto;
}

.modal h3 { margin: 0 0 12px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* ---------- Einstellungen ---------- */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.settings-row:last-child { border-bottom: none; }

.settings-row .label { font-weight: 600; }

.settings-row .sub { color: var(--muted); font-size: 13px; }

.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.seg button {
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
}

.seg button.is-active { background: var(--brand); color: #fff; }

/* ---------- Dashboard / Modul-Roadmap ---------- */
.hero { border-left: 4px solid var(--accent); }

.stage-title {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
}
/* Erklärtext in Klammern direkt hinter dem Listentitel (z. B. Rechnungen). */
.stage-title-zusatz {
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: normal;
  color: var(--muted);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.module-tile {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.module-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--anthracite);
}

.module-icon svg { width: 22px; height: 22px; fill: currentColor; }

.module-text { min-width: 0; }

.module-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.module-name { font-weight: 700; }

.module-desc { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ---------- Dashboard: Überblick-Kennzahlen ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
/* Dashboard-Kacheln: Kopfzeile mit „Nicht mehr anzeigen" + Wetter-Sektion */
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-card-head .stage-title { margin-bottom: 0; }
.dash-hide { opacity: 0.45; }
.dash-hide:hover { opacity: 1; }
.dash-wetter { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.dash-wetter-quelle { margin: 0 0 -8px; font-size: 11.5px; }
.dash-wetter-station { border-top: 1px solid var(--border); padding-top: 10px; }
.dash-wetter-station:first-child { border-top: none; padding-top: 0; }
.dash-wetter-kopf { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 6px; }
/* Hide-Symbol je Station (rechts, dezent bis Hover) */
.dash-wetter-hide { margin-left: auto; width: 30px; height: 30px; opacity: 0.5; flex: none; }
.dash-wetter-hide:hover { opacity: 1; }
.dash-wetter-hide svg { width: 17px; height: 17px; }
/* Eine Zeile: aktuelle Werte + (abgesetzt) Vorhersage-Kacheln in gleicher Größe.
   Anzahl der Vorhersage-Tage rechnet dashWetterZeile aus der Breite (2–7). */
.dash-wetter-zeile { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.dash-wetter-zeile .cl-tile { min-width: 96px; flex: 0 0 auto; }
.dash-wetter-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); }
.kpi-tile {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 12px 14px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.kpi-tile:hover { border-color: var(--brand); }
.kpi-ic { display: inline-flex; margin-bottom: 4px; color: var(--brand); }
.kpi-ic svg { width: 20px; height: 20px; fill: currentColor; }
.kpi-val { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 12.5px; color: var(--muted); }
/* Aufmerksamkeits-Kennzahl (überfällig, Bestand niedrig …) hervorgehoben */
.kpi-tile.is-accent {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}
.kpi-tile.is-accent .kpi-val { color: var(--brand); }

/* Hinweistext unter einem Formularfeld */
.field-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Druckvorlagen: Formular links, Live-PDF-Vorschau rechts */
.dv-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .dv-grid { grid-template-columns: 1fr; } }
.dv-form .field { margin-bottom: 12px; }
.dv-color { width: 64px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; }
.sd-layout-hint { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
/* Shop-Kategorie-Zuordnung im Artikel-Dialog (Mehrfachauswahl, Kinder eingerückt) */
.sk-check-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.sk-check-list .check-row { margin: 0; padding: 3px 0; }
.sk-check-list .check-row.is-sub { padding-left: 22px; }
.dv-bp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.dv-bp-label { flex: none; min-width: 140px; font-size: 13.5px; }
.dv-bp-file { font-size: 12.5px; max-width: 230px; }
.dv-bp-status { font-size: 12px; color: var(--muted); padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; }
.dv-bp-status.is-ok { color: #1b7f3b; border-color: color-mix(in srgb, #1b7f3b 40%, transparent); }
.dv-preview-box { position: sticky; top: 12px; }
.dv-preview-head { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.dv-preview-head .field { margin-bottom: 0; flex: 1; }
.dv-preview { width: 100%; height: 620px; border: 1px solid var(--border); border-radius: 12px; background: #525659; }

/* Shop-Einstellungen (Mandant): Zahlart-Zeile = Checkbox + Hinweistext daneben */
.shop-zahlart { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 8px; }
.shop-zahlart .check-row { margin: 0; }
@media (max-width: 700px) { .shop-zahlart { grid-template-columns: 1fr; gap: 4px; } }

/* Website-Bilder der Storefront (Hero-Slider + „Über uns"): Vorschau + Upload/Entfernen */
.shop-bild-zeile { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dotted var(--border); }
.shop-bild-preview { flex: none; width: 86px; height: 48px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--muted) 12%, transparent); display: grid; place-items: center; }
.shop-bild-preview img { width: 100%; height: 100%; object-fit: cover; }
.shop-bild-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.shop-bild-zeile .btn { padding: 6px 12px; }
@media (max-width: 700px) { .shop-bild-zeile { flex-wrap: wrap; } }

/* Shop-Design (Operator): Formular links, Live-Mockup rechts (nutzt .dv-grid) */
.sd-field input[type='color'] { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; }
.sd-preview { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 12.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.sdp-kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; }
.sdp-marke { font-weight: 700; letter-spacing: 0.06em; }
.sdp-links span { margin-left: 12px; }
.sdp-nav { display: flex; gap: 14px; padding: 8px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.sdp-hero { padding: 26px 14px; text-align: center; background: linear-gradient(135deg, #6d6d6d, #3c3c3c); }
.sdp-hero-text { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; }
.sdp-inhalt { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sdp-h1 { font-size: 17px; font-weight: 700; }
.sdp-h2 { font-size: 14px; font-weight: 700; }
.sdp-h3 { font-size: 13px; font-weight: 600; }
.sdp-karte { border-radius: 10px; padding: 10px 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 6px; }
.sdp-text { font-size: 12px; }
.sdp-btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.sdp-btn { display: inline-block; padding: 5px 11px; border-radius: 8px; font-size: 11.5px; font-weight: 600; }
.sdp-alter { border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.sdp-alter-text { font-size: 12px; }
.sdp-footer { padding: 10px 14px; font-size: 11.5px; text-align: center; }

/* Artikel: E-Label-QR + Flaschenfoto im Dialog */
.elabel-qr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.elabel-qr img { border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.artikel-foto { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.artikel-foto img { max-height: 180px; max-width: 60%; border-radius: 10px; border: 1px solid var(--border); }

/* Kontoauszüge einlesen: Zahlungseingang-Zeilen mit Rechnungszuordnung */
.bk-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.bk-row:last-of-type { border-bottom: none; }
.bk-check { flex: none; padding-top: 3px; }
.bk-main { flex: 1; min-width: 0; }
.bk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bk-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-betrag { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.bk-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-ziel { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.bk-ziel select { flex: 1; min-width: 0; }
.bk-chip { flex: none; }

/* Gutschrift erstellen: gleiche Positionszeilen wie Auftrag/Angebot (.pos-row),
   nur ohne Rabatt-/Positionsart-Spalte. */
.pos-row.is-gsrow {
  grid-template-columns: 22px minmax(0, 1fr) 96px 108px 38px;
  grid-template-areas: 'handle main menge preis x';
}
@media (max-width: 700px) {
  .pos-row.is-gsrow {
    grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) auto 38px;
    grid-template-areas:
      'handle main main main x'
      '. menge preis . .';
  }
}

/* Rechte-Matrix im Mitarbeiter-Dialog */
.perm-matrix { border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px 10px; margin-bottom: 12px; }
.perm-rubrik { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); margin: 12px 0 4px; }
.perm-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; flex-wrap: wrap; }
.perm-main { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.perm-extra { margin-left: auto; display: inline-flex; gap: 14px; }
.perm-extra-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }

/* ---------- Modul Auswertungen ---------- */
.kpi-tile.is-static { cursor: default; }
.kpi-tile.is-static:hover { border-color: var(--border); }
.kpi-tile.is-static.is-accent:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.aw-section { margin-top: 20px; }
.aw-chart svg { width: 100%; height: auto; display: block; }
.aw-bar-rect { fill: var(--brand); opacity: 0.85; }
.aw-bar-rect.is-zero { fill: var(--border); opacity: 0.6; }
.aw-bar-val { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.aw-bar-lbl { font-size: 10.5px; fill: var(--muted); }
.aw-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 26px; }
.aw-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.aw-rank { flex: none; width: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-sub { color: var(--muted); font-size: 12px; }
.aw-track { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, transparent); overflow: hidden; }
.aw-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand); opacity: 0.8; }
.aw-val { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* KPI-Kachel „Achtung" (z. B. offene Posten > 0) in Rot (hell + dunkel via var) */
.kpi-tile.is-danger {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}
.kpi-tile.is-danger .kpi-val, .kpi-tile.is-danger .kpi-ic { color: var(--danger); }
.kpi-tile.is-static.is-danger:hover { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* Umsatz-Balkendiagramm (reines CSS: div-Balken je Monat, 0-Linie = border) */
.aw-balken { display: flex; align-items: flex-end; gap: 6px; margin-top: 14px; }
.aw-bal-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.aw-bal-plus { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; border-bottom: 1px solid var(--border); }
.aw-bal-minus { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.aw-bal-bar { display: block; width: 70%; max-width: 34px; border-radius: 4px 4px 0 0; background: var(--brand); opacity: 0.85; }
.aw-bal-bar.is-neg { border-radius: 0 0 4px 4px; background: var(--danger); }
.aw-bal-wert { font-size: 10px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aw-bal-wert.is-neg { color: var(--danger); }
.aw-bal-lbl { margin-top: 4px; text-align: center; font-size: 10.5px; color: var(--muted); }
/* Schmale Screens: Wert-Beschriftung weglassen (Tooltip bleibt), engere Spalten */
@media (max-width: 700px) {
  .aw-bal-wert { display: none; }
  .aw-balken { gap: 3px; }
}

/* Kompakte Auswertungs-Tabellen (Stunden, Nachkalkulation): scrollen bei Bedarf
   im EIGENEN Container (.aw-scroll), nie die Seite horizontal */
.aw-scroll { overflow-x: auto; margin-top: 8px; }
.aw-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.aw-tabelle th, .aw-tabelle td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.aw-tabelle th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 600; }
.aw-tabelle .is-links { text-align: left; }
.aw-tabelle .aw-zelle-breit { white-space: normal; min-width: 160px; }
.aw-tabelle tr.is-clickable { cursor: pointer; }
.aw-tabelle tr.is-clickable:hover td { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.aw-tabelle td.is-ueber { color: var(--danger); font-weight: 700; }
.aw-fahrt { margin-left: 4px; font-size: 11px; color: var(--muted); }
.aw-leer { color: var(--muted); }

/* Dokumente-Liste: Größe + Datum rechts in der Zeile */
.dok-meta {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Rechnung erstellen: gesperrte Rechnungsarten ausgegraut (title erklärt warum) */
.check-row.is-disabled { opacity: 0.5; }

/* ---------- Dokument-Upload: Drop-Zone ---------- */
.doc-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 22px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--border); border-radius: 12px; background: var(--bg); color: var(--muted);
}
.doc-drop:hover { border-color: var(--brand); }
.doc-drop.is-dragover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--text); }
.doc-drop.has-file { border-style: solid; color: var(--text); }
.doc-drop-ic { display: inline-flex; }
.doc-drop-ic svg { width: 30px; height: 30px; fill: currentColor; }
.doc-drop-text { font-size: 14px; overflow-wrap: anywhere; }
.doc-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.chip-live { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.chip-soon { background: color-mix(in srgb, var(--accent) 45%, transparent); color: #6a5312; }
.chip-plan { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }

[data-theme='dark'] .chip-soon { color: var(--accent); }

/* Webshop-Bestellung: Icon in der Auftragsliste (weinrot) + Herkunfts-Chip im Formular */
.module-icon.is-shop-order { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
[data-theme='dark'] .module-icon.is-shop-order { color: color-mix(in srgb, var(--brand) 55%, #fff); }
.chip-shop-order {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}
.chip-shop-order svg { width: 13px; height: 13px; fill: currentColor; }
[data-theme='dark'] .chip-shop-order { color: color-mix(in srgb, var(--brand) 55%, #fff); }

/* ---------- „Was ist neu?"-Popup (Bottom-Sheet, wie CURENA) ---------- */
/* Von unten eingeschoben statt zentriert. */
.sheet-backdrop { align-items: flex-end; padding: 0; }

.modal-changelog {
  width: 100%;
  max-width: 560px;
  padding: 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  animation: sheetUp 0.22s ease;
}

@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.cl-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 700;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.cl-title-ic { display: inline-flex; flex: none; }
.cl-title-ic svg { width: 22px; height: 22px; fill: var(--brand); }

.cl-scroll { flex: 1; overflow-y: auto; padding: 14px 18px; }

.cl-version { margin-bottom: 16px; }
.cl-version:last-child { margin-bottom: 0; }

.cl-vhead { font-size: 12.5px; font-weight: 700; color: var(--brand); margin-bottom: 6px; }

.cl-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.cl-list li { font-size: 14px; line-height: 1.45; }

.cl-ok { margin: 8px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Generischer Bottom-Sheet-Dialog (z. B. Passwort ändern) ---------- */
.modal-sheet {
  width: 100%;
  max-width: 480px;
  padding: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  animation: sheetUp 0.22s ease;
}

/* Klick auf den Backdrop schließt NICHT (Datenverlust-Schutz) – der Dialog
   „wackelt" stattdessen kurz, damit klar ist: Schließen über die Buttons. */
.is-nudge { animation: sheetNudge 0.3s ease; }
@keyframes sheetNudge {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(0.985); }
  60% { transform: scale(1.004); }
}

.sheet-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 700;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.sheet-title-ic { display: inline-flex; flex: none; }
.sheet-title-ic svg { width: 22px; height: 22px; fill: var(--brand); }
/* Rundes Schließen-X oben rechts in der Titelzeile */
.sheet-title-x {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sheet-title-x svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.sheet-title-x:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
/* TEXTFELD MIT KATALOG (1.1.33) - ein Freitextfeld mit hinterlegter Liste.
   DER AUFKLAPPER SITZT IM FELD (Betreiber 28.09.2026), nicht dahinter: Er
   gehoert zum Feld. Der Platz dafuer kommt aus der rechten Polsterung des
   Eingabefelds - sonst laeuft der Text unter dem Knopf durch.
   CHEVRON STATT DREI PUNKTE (ab 1.1.41): Der Pfeil sagt "hier klappt etwas
   nach unten auf"; drei Punkte heissen im Rest des Hauses "es kommt ein
   Dialog". Beim Aufklappen dreht er sich - die halbe Miete an Rueckmeldung. */
.tk-wrap { position: relative; display: block; }
.tk-wrap > .tk-in { width: 100%; padding-right: 40px; }
.tk-auf {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0; line-height: 1;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); cursor: pointer;
}
.tk-auf svg { width: 18px; height: 18px; fill: currentColor; display: block;
  transition: transform 0.15s ease; }
/* DIESELBE STELLE FUER ANDERE SYMBOLE (ab 1.1.48): Telefonhoerer und
   "Seite oeffnen" sitzen jetzt ebenfalls IM Feld - der Knopf bleibt derselbe
   (.icon-act, damit er sich in Listen unveraendert verhaelt), nur die Huelle
   ist eine andere. Rahmen und Fuellung fallen dabei weg: Im Feld waere ein
   zweiter Rahmen ein Kasten im Kasten. */
.tk-wrap > .icon-act {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 28px; border: 0; background: transparent; color: var(--muted);
}
.tk-wrap > .icon-act svg { width: 18px; height: 18px; }
.tk-wrap > .icon-act:not(:disabled):hover {
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand);
}
.tk-wrap > .icon-act:disabled { opacity: 0.3; cursor: default; background: transparent; }
.tk-auf:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
/* Die Punkte-Variante (USt-IdNr.): kein Symbol, sondern das Zeichen selbst -
   drei Punkte heissen im Haus "dahinter passiert etwas". */
.tk-auf.is-punkte { font-size: 17px; letter-spacing: 1px; line-height: 1; }
.tk-wrap.is-auf > .tk-auf.is-punkte { transform: translateY(-50%); }
.tk-wrap.is-auf > .tk-auf { color: var(--brand); }
.tk-wrap.is-auf > .tk-auf svg { transform: rotate(180deg); }
/* DAS DROPDOWN hinter den drei Punkten (Betreiber 28.09.2026, Vorbild
   SISPRO-IIS "Typ Frei1"): schmale Kopfleiste mit kleinen Icons, darunter die
   Liste zum Auswaehlen. KEIN Fenster - es haengt am Feld und nimmt ihm nicht
   die Sicht. */
.tk-drop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  border-radius: 10px; overflow: hidden;
  /* ABHEBEN, NICHT SCHREIEN (Betreiber 28.09.2026): Mit `--card` und `--border`
     verschwand der Aufklapper in der Maske - beides ist dort schon im Einsatz.
     Jetzt eine leichte Einfaerbung in der Hausfarbe (dunkel: Cyan auf Navy,
     hell: Navy auf Weiss), eine sichtbare Kante in derselben Farbe und ein
     tieferer Schatten. Das Blatt liegt damit erkennbar OBEN. */
  background: color-mix(in srgb, var(--brand) 7%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border));
  box-shadow: 0 12px 28px rgba(11, 19, 32, .32), 0 2px 6px rgba(11, 19, 32, .18);
}
/* NACH OBEN AUFGEKLAPPT (1.1.57, dropKlemmen): Reicht der Platz unter dem Feld
   nicht und ist oberhalb mehr, haengt das Blatt ueber dem Feld. Gesetzt wird
   die Klasse in JS - im CSS allein laesst sich "passt es noch?" nicht
   beantworten. */
.tk-drop.is-oben { top: auto; bottom: calc(100% + 4px); }
.tk-drop-kopf {
  display: flex; align-items: center; gap: 2px; padding: 4px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
  background: color-mix(in srgb, var(--brand) 13%, transparent);
}
.tk-drop-titel { margin-left: auto; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); padding-right: 2px; }
/* Das X sitzt ganz rechts aussen, abgesetzt von den drei Werkzeugen links. */
.tk-zu:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.tk-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.tk-ic svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.tk-ic:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.tk-ic.is-aus { opacity: .35; cursor: default; }
.tk-ic.is-aus:hover { background: transparent; color: var(--muted); }
/* Geschaerftes Loeschen: erst der zweite Klick loescht (Muster .icon-act.is-del) */
.tk-ic.is-armed { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.tk-drop-liste { max-height: 240px; overflow-y: auto; }
.tk-opt { padding: 7px 10px; cursor: pointer; font-size: 14px; }
.tk-opt:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.tk-opt.is-mark { background: color-mix(in srgb, var(--brand) 22%, transparent); font-weight: 600; }
.tk-drop-leer { margin: 10px; }
/* Die Zeile zum Anlegen/Umbenennen bleibt LEISE (Betreiber 28.09.2026): Ein
   dicker Fokusrahmen und eine gefuellte Schaltflaeche draengen sich in einem
   aufgeklappten Menue vor das, worum es geht - die Liste. Deshalb eine feine
   Kante, ein duenner Fokus und zwei kleine Icons statt Knoepfen. */
.tk-drop-neu { display: flex; gap: 4px; align-items: center; padding: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border)); }
.tk-drop-neu input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; color: var(--text);
  background: var(--card); border-radius: 8px; padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
}
.tk-drop-neu input:focus {
  outline: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: -1px;
  border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
}
.tk-drop-fehler { margin: 0; padding: 0 10px 8px; }
.tk-drop-fehler:empty { display: none; }

/* TEXTFELD MIT TASCHENRECHNER (1.1.37) - dieselbe Huelle wie der Katalog, nur
   klappt darunter ein Rechner auf. Die Tasten bleiben LEISE (Betreiber
   28.09.2026): feine Kante, Kartenfarbe; hervorgehoben sind nur die
   Rechenzeichen und das Gleichheitszeichen. */
/* NACH LINKS WACHSEN (nachgemessen 28.09.2026): Das Feld ist schmaler als der
   Rechner. Mit `left: 0` lief er ueber die rechte Kante der Karte hinaus und
   wurde abgeschnitten; an der rechten Feldkante verankert waechst er nach
   innen. */
.rk-drop { left: auto; right: 0; min-width: 236px; }
.rk-feld { padding: 6px 10px 8px; text-align: right;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border)); }
.rk-rechnung { min-height: 14px; font-size: 12px; color: var(--muted); }
.rk-rechnung:empty::before { content: "\00a0"; }
.rk-anzeige { font-size: 21px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; outline: none; border-radius: 6px; }
.rk-anzeige:focus-visible { outline: 1px solid color-mix(in srgb, var(--brand) 55%, transparent); }
.rk-pad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px; }
.rk-t {
  font: inherit; font-size: 15px; padding: 8px 0; border-radius: 8px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  background: var(--card); color: var(--text);
}
.rk-t:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.rk-t.is-op { color: var(--brand); font-weight: 600; }
.rk-t.is-gleich { background: color-mix(in srgb, var(--brand) 18%, transparent); font-weight: 700; }
/* MwSt+ / MwSt- muessen in dieselbe Spaltenbreite wie eine Ziffer passen. */
.rk-t.is-mwst { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.rk-satz { margin: 0; padding: 0 10px 8px; font-size: 11px; color: var(--muted); text-align: right; }
/* Ein Zahlenfeld mit drei Punkten: Die Pfeilchen des Browsers laegen darunter -
   und wer einen Rechner hat, braucht sie nicht. */
.tk-in[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.tk-in[type="number"]::-webkit-outer-spin-button,
.tk-in[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* FREIFELDER: Bezeichnung + Wert. Die Bezeichnung bekommt mehr Platz - sie ist
   der Satz, der Wert meist eine Zahl. Unter 560px untereinander. */
.ff-zeile { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; align-items: center; }
@media (max-width: 560px) { .ff-zeile { grid-template-columns: minmax(0, 1fr); } }

/* ADRESSKATEGORIE: Eigenschaften (1.1.32) — Rollen als Haken nebeneinander,
   darunter die Preisliste der Gruppe. */
.rollen-liste { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rollen-liste .check-row { margin: 0; }
.kat-preis-block { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 10px; }
.kat-pk-host { margin: 6px 0; }
.kat-pk-zeile { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.kat-pk-zeile select { flex: 1 1 auto; min-width: 0; }
.kat-pk-zeile input { width: 90px; flex: none; }
.kat-pk-weg { flex: none; padding: 6px 9px; }
.kat-pk-weg svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.kat-runden-an { margin: 12px 0 8px; }
.kat-runden-felder .field { min-width: 0; }

/* WER IST GERADE DRAN? (1.1.31) — Hinweisband oben im Fenster. Cyan: jemand
   hat denselben Datensatz offen. Rot: jemand hat inzwischen gespeichert.
   Nie eine Sperre, nur ein Satz — deshalb schmal und ohne Schaltfläche.
   CI-CYAN ALS LITERAL (wie .chip-st-cyan), NICHT über --accent: Im Dunkelmodus
   sind --brand und --accent getauscht (--accent ist dort Signalrot), die beiden
   Zustände des Bandes wären nicht mehr zu unterscheiden. Beim Bau gefunden. */
.mb-band { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35;
  background: color-mix(in srgb, #00d4e0 14%, transparent);
  border: 1px solid color-mix(in srgb, #00d4e0 55%, transparent); color: var(--text); }
.mb-band.is-aend { background: var(--warn-bg); border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
/* In den übrigen Masken sitzt das Band zwischen Titelzeile und Rumpf und
   braucht denselben Seitenabstand wie der Rumpf. */
.sheet-title + .mb-band { margin: 12px 18px 0; }

/* Bestätigungsdialog (confirmModal) */
/* ZEILENUMBRUECHE IM TEXT GELTEN (1.1.85): Ein Hinweis, der mehrere Angaben
   aufzaehlt (Probelauf eines Webhooks), stand sonst als eine einzige Wurst da.
   `pre-line` nimmt nur ausdrueckliche Umbrueche ernst und laesst alles andere
   normal umbrechen. */
.confirm-msg { margin: 0 0 18px; line-height: 1.5; font-size: 15px; white-space: pre-line; }
@media (min-width: 860px) { .modal-sheet.confirm-sheet { max-width: 460px; } }
/* Status-Chip + Pfeil-Button (nächster Status) oben rechts in der Titelzeile */
.sheet-title-status { margin-left: auto; flex: none; font-weight: 400; display: inline-flex; align-items: center; gap: 8px; }
/* Statuswechsel = beschrifteter Akzent-Button (weinrot), kein neutraler Pfeil mehr.
   Das Verb ("Kommissionieren"/"Versenden"/"Als bezahlt") stand bisher nur im Tooltip. */
.status-advance { padding: 6px 13px; gap: 6px; background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.status-advance:hover { background: color-mix(in srgb, var(--brand) 85%, #000); border-color: color-mix(in srgb, var(--brand) 85%, #000); color: #fff; }
.status-advance svg { width: 16px; height: 16px; fill: currentColor; display: block; }
/* Status-Chip in der Titelzeile größer (11 → 13px) + farbiger Statuspunkt davor,
   damit der Status auf einen Blick lesbar ist (Punkt erbt die Status-Farbe). */
.sheet-title-status .chip { font-size: 13px; padding: 4px 11px; }
/* FLEXX3 vergibt `chip-st-…` (VINORUM: `chip-os-…`) - beides steht hier, damit
   uebernommener Code aus VINORUM nicht still ohne Punkt bleibt. */
.sheet-title-status [class*="chip-os-"],
.sheet-title-status [class*="chip-st-"] { display: inline-flex; align-items: center; gap: 6px; }
.sheet-title-status [class*="chip-os-"]::before,
.sheet-title-status [class*="chip-st-"]::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
}
/* OHNE DIESE REGEL RUTSCHT DER STATUS IN DIE MITTE: Sowohl `.sheet-title-status`
   als auch `.sheet-title-x` tragen `margin-left:auto` - sie teilen sich den
   Freiraum dann untereinander auf, statt beide rechts zu stehen. */
.sheet-title-status ~ .sheet-title-x { margin-left: 14px; }
/* Der Rueckweg ist leiser als der naechste Schritt: Er ist die Ausnahme. */
.status-advance.is-zurueck {
  background: transparent; color: var(--muted); border-color: var(--border); font-weight: 600;
}
.status-advance.is-zurueck:hover {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-color: var(--muted); color: var(--text);
}
/* Schmale Titelzeile (Handy): Label weg, nur der weinrote Pfeil bleibt; der
   Status-Bereich darf umbrechen (sonst überläuft er bei Webshop-Aufträgen mit
   langem Zahlart-Text — der Bereich ist am Desktop bewusst flex:none). */
@media (max-width: 600px) {
  .status-advance .advance-label { display: none; }
  .status-advance { padding: 6px 9px; }
  /* Das X wird aus dem Fluss genommen und festgenagelt: Sonst schiebt die
     umgebrochene Statusgruppe es in die zweite Zeile, und der Schliessen-Knopf
     stuende ploetzlich woanders als in jedem anderen Fenster. */
  .sheet-title { flex-wrap: wrap; position: relative; padding-right: 58px; }
  .sheet-title .sheet-title-x { position: absolute; top: 13px; right: 18px; margin: 0; }
  .sheet-title-status { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
}

.sheet-body { overflow-y: auto; padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }

.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* Aktionen nebeneinander in einer Einstellungszeile */
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Desktop: zentrierter Dialog statt Bottom-Sheet ----------
   Auf Mobilgeräten bleibt das Sheet am unteren Rand (Daumen-Ergonomie);
   ab 860px wird daraus ein mittiger, breiter Dialog, und Formulare nutzen
   die Breite mit einem zweispaltigen Raster. */
@media (min-width: 860px) {
  .sheet-backdrop { align-items: center; padding: 32px; }

  .modal-sheet,
  .modal-changelog {
    max-height: min(86vh, 920px);
    border-radius: 18px;
    animation: dialogIn 0.18s ease;
  }
  .modal-sheet { max-width: min(720px, 92vw); }
  /* Breite Dialoge (z. B. Auftrag anlegen): wachsen dynamisch mit dem Bildschirm */
  .modal-sheet.is-wide { max-width: clamp(720px, 80vw, 1240px); }
  /* Fast so breit wie der Inhaltsbereich (Betreiber 27.09.2026): Die Adresse
     traegt Reiter, zwei Spalten und Listen - sie braucht die Breite. */
  .modal-sheet.is-xwide { max-width: min(1560px, 94vw); }
  .modal-changelog { max-width: 620px; }

  .sheet-title { padding: 20px 26px 14px; border-bottom: 1px solid var(--border); }
  .sheet-body { padding: 20px 26px 24px; }
  .cl-ok { margin-bottom: 18px; }

  /* Formulare zweispaltig: Standard = volle Zeile, einzelne Eingabefelder
     halbbreit; .grid2-Paare lösen sich ins Raster auf (display: contents). */
  .sheet-body form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    align-items: start;
  }
  .sheet-body form > * { grid-column: 1 / -1; min-width: 0; }
  .sheet-body form > .field { grid-column: auto; }
  .sheet-body form > .field:has(textarea),
  .sheet-body form > .field:has(input[type='file']) { grid-column: 1 / -1; }
  .sheet-body form > .grid2 { display: contents; }
  .sheet-body form > .check-row { grid-column: auto; }
  .sheet-body form > .btn { justify-self: start; }
}

@keyframes dialogIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Ansprechpartner-Liste (Kunde anlegen/bearbeiten): Name + Telefon + Entfernen */
.contact-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.contact-row { display: flex; gap: 8px; align-items: center; }
.contact-row input {
  flex: 1; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font: inherit;
}
.contact-row input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.contact-remove { flex: none; padding: 8px 10px; }
/* Hoerer-Knopf (Telefonie, Schritt 1): ruhig wie ein Icon-Knopf, aber klar
   anfassbar. Steht neben einem Eingabefeld ODER allein in einer Zeile. */
.tel-feld { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tel-feld > input { flex: 1 1 auto; min-width: 0; }
.tel-btn { flex: none; color: var(--muted); }
.tel-btn svg { width: 19px; height: 19px; fill: currentColor; }
.tel-btn:not(:disabled):hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.tel-btn:disabled { opacity: 0.3; cursor: default; }
/* Rufnummer + Hoerer in einer Listenzeile: mittig, kein Wachsen. Die Nummer
   weicht auf schmalen Schirmen als Erstes - der Hoerer bleibt. */
.row-tel { display: flex; align-items: center; gap: 6px; flex: none; align-self: center; }
.row-tel-nr { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) { .row-tel-nr { display: none; } }
/* FESTE BREITE, DAMIT DIE ZEILEN FLUCHTEN (Betreiber 27.09.2026): Vorher
   verschoben unterschiedlich lange Nummern - und Zeilen ganz ohne Nummer -
   alles dahinter; Hoerer, Marker und "+" sassen in jeder Zeile woanders.
   Die Nummer steht rechtsbuendig und kuerzt bei Bedarf. Nur auf breiten
   Schirmen: schmal faellt die Nummer ohnehin weg. */
@media (min-width: 721px) {
  .row-tel { width: 152px; justify-content: flex-end; }
  .row-tel-nr { overflow: hidden; text-overflow: ellipsis; }
  .row-tel.is-leer { width: 152px; }
}
/* Anruf-Einblendung: oben rechts, ueber allem, aber nicht modal - wer
   weiterarbeiten will, kann das. Auf dem Handy volle Breite unten. */
.anruf-host {
  position: fixed; top: 14px; right: 14px; z-index: 80;
  display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.anruf-karte {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
}
.anruf-karte.is-kunde { border-color: var(--brand); }
.anruf-ic { flex: none; display: inline-flex; color: var(--brand); }
.anruf-ic svg { width: 22px; height: 22px; fill: currentColor; }
.anruf-text { flex: 1; min-width: 0; }
.anruf-titel { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anruf-nummer { font-size: 12.5px; color: var(--muted); }
.anruf-sub { font-size: 11.5px; color: var(--muted); font-style: italic; }
.tel-hook { margin-top: 10px; }
.tel-anrufe { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.tel-anruf-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
}
.tel-anruf-nr { font-weight: 600; }
.tel-anruf-zeit, .tel-anruf-q { font-size: 12px; color: var(--muted); }
.tel-anruf-q { margin-left: auto; }
.tel-hook-url { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.tel-hook-url code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-size: 12px; padding: 7px 10px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
}
@media (max-width: 560px) {
  .anruf-host { top: auto; bottom: 74px; left: 12px; right: 12px; max-width: none; }
}
/* Telefonie-Einstellungen: Geraeteliste nach "Verbindung pruefen". */
.tel-geraete { margin: 8px 0 4px; }
.tel-geraete select {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px;
}
.field-hint.is-warn { color: var(--danger); font-weight: 600; }
.sheet-actions.is-links { justify-content: flex-start; }
.contact-remove svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Modul CRM ---------- */
.module-tile.is-clickable { cursor: pointer; }
.module-tile.is-clickable:hover { border-color: var(--brand); }
.tenant-item.is-clickable { cursor: pointer; }
.tenant-item.is-clickable:hover { border-color: var(--brand); }

.crm-search { margin-bottom: 12px; }

.chip-vip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--accent); color: #232323; border: none;
}
.chip-vip svg { width: 12px; height: 12px; fill: currentColor; }

.cust-no { flex: none; font-size: 12px; color: var(--muted); align-self: center; }

/* Geburtstags-Übersicht (nächste 14 Tage) */
.birthday-box {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px;
}
.birthday-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13px; margin-bottom: 6px;
}
.birthday-title svg { width: 16px; height: 16px; fill: var(--brand); }
.birthday-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0; font-size: 14px; cursor: pointer;
}
.birthday-row:hover { color: var(--brand); }
.birthday-date { font-weight: 600; flex: none; }
.birthday-when { margin-left: auto; color: var(--muted); font-size: 12px; }

/* Checkbox-Zeilen (z. B. Modul-Schalter) */
.check-row {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0; cursor: pointer; font-size: 14.5px;
}

/* Modul-Schalter im Mandanten-Dialog (FLEXX³ Administration) */
.module-checks { display: flex; flex-direction: column; gap: 0; padding: 2px 0; }
.module-checks .check-row { margin: 4px 0; }
.check-row input[type='checkbox'] {
  width: 18px; height: 18px; accent-color: var(--brand); flex: none;
}

/* Gefahren-Button (Löschen) links in den Sheet-Aktionen */
.btn.danger { color: #b3261e; border-color: #b3261e; }
.btn.danger:hover { background: rgba(179, 38, 30, 0.08); }
.btn.danger svg { fill: currentColor; width: 18px; height: 18px; }
.sheet-actions .sheet-left { margin-right: auto; }

/* ---------- Modul Lager ---------- */
.chip-low { background: rgba(179, 38, 30, 0.12); color: #b3261e; border: none; }

.bestand-col { display: flex; flex-direction: column; align-items: flex-end; flex: none; align-self: center; }
.bestand-wert { font-weight: 700; font-variant-numeric: tabular-nums; }
.bestand-wert.is-low { color: #b3261e; }

.buchen-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.buchen-row input {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.buchen-row input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.journal-row {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px; padding: 3px 0; color: var(--text);
}
.journal-date { color: var(--muted); flex: none; }
.journal-delta { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; min-width: 44px; text-align: right; }
.journal-delta.is-plus { color: #1b7f3b; }
.journal-delta.is-minus { color: #b3261e; }
.journal-user { margin-left: auto; color: var(--muted); font-size: 12px; }

/* ---------- Modul Aufträge ---------- */
.order-sum { flex: none; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Status-Chips je Auftragsstatus */
.chip-os-offen            { background: rgba(216, 191, 146, 0.35); color: var(--text); border: none; }
.chip-os-kommissionierung { background: rgba(46, 116, 181, 0.15); color: #2e74b5; border: none; }
.chip-os-versendet        { background: rgba(109, 35, 48, 0.12); color: var(--brand); border: none; }
.chip-os-fakturiert       { background: rgba(27, 127, 59, 0.14); color: #1b7f3b; border: none; }
.chip-os-abgeschlossen    { background: rgba(27, 127, 59, 0.14); color: #1b7f3b; border: none; }
.chip-os-storniert        { background: rgba(179, 38, 30, 0.12); color: #b3261e; border: none; }

/* Positionszeilen im Anlegen-Dialog: festes Raster, damit die Spalten aller
   Zeilenarten (Artikel, Einmal-, Textposition) exakt untereinander stehen. */
.pos-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pos-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 96px 108px 76px 126px 38px;
  grid-template-areas: 'handle main menge preis rabatt typ x';
  gap: 8px; align-items: center;
}
/* Reine Textzeile: Text läuft über die Menge-/Preis-/Rabatt-Spalten */
.pos-row.is-textrow { grid-template-areas: 'handle main main main main typ x'; }
.pos-handle { grid-area: handle; }
.pos-main { grid-area: main; min-width: 0; }
.pos-menge { grid-area: menge; }
.pos-preis { grid-area: preis; }
.pos-rabatt { grid-area: rabatt; }
.pos-typtg { grid-area: typ; justify-self: start; }
.pos-x { grid-area: x; }
.pos-row > input,
.pos-row > select.pos-mwst {
  width: 100%; min-width: 0; padding: 10px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.pos-row > input:focus,
.pos-row > select.pos-mwst:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.pos-row > select.pos-mwst:disabled { opacity: 0.45; }
/* Einmalposition: zusätzliche MwSt-Spalte (Satz direkt an der Zeile, 19/7/0 %) */
.pos-row.is-einmal {
  grid-template-columns: 22px minmax(0, 1fr) 96px 108px 78px 76px 126px 38px;
  grid-template-areas: 'handle main menge preis mwst rabatt typ x';
}
.pos-mwst { grid-area: mwst; }
/* Schmale Bildschirme: zweizeilig (Artikel oben, Menge/Preis/Rabatt/Art darunter) */
@media (max-width: 700px) {
  .pos-row {
    grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 70px auto 38px;
    grid-template-areas:
      'handle main main main main x'
      '. menge preis rabatt typ .';
  }
  .pos-row.is-einmal {
    grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 70px 70px auto 38px;
    grid-template-areas:
      'handle main main main main main x'
      '. menge preis mwst rabatt typ .';
  }
  .pos-row.is-textrow { grid-template-areas: 'handle main main main typ x'; }
}

/* Kleine „Position/Einmal/Text"-Buttons direkt unter den Positionen */
.pos-add-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.pos-add-btn { padding: 6px 11px; font-size: 13px; }
.pos-add-btn svg { width: 16px; height: 16px; }
/* Zusammenfassung rechts: Gesamtnachlass ÜBER der Summe; € bricht nicht um */
.pos-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-bottom: 12px; }
.pos-summe-line { font-weight: 700; white-space: nowrap; }

/* Gesamtnachlass im Positionsfuß */
.pos-gr-wrap { color: var(--muted); font-weight: 400; white-space: nowrap; }
.pos-gesamtrabatt {
  width: 72px; padding: 7px 9px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}
.pos-gesamtrabatt:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

/* Rabattausweis in Auftrags-/Rechnungsdetail */
.oi-rabatt {
  margin-left: 8px; font-size: 12px; color: var(--brand); white-space: nowrap;
}

/* Positionsart als Icon-Toggle: € berechnet / Geschenk ohne Berechnung / Auge-zu intern */
.typ-toggle {
  display: inline-flex; flex: none; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.typ-toggle button {
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 9px 10px; cursor: pointer; color: var(--muted);
}
.typ-toggle button + button { border-left: 1px solid var(--border); }
.typ-toggle button.is-active { background: var(--brand); color: #fff; }
.typ-toggle svg { width: 18px; height: 18px; fill: currentColor; }

/* Drag-Handle zum Sortieren der Positionen */
.pos-handle {
  display: inline-flex; flex: none; cursor: grab; touch-action: none;
  color: var(--muted); align-self: center;
}
.pos-handle svg { width: 20px; height: 20px; fill: currentColor; }
.pos-row.is-dragging { opacity: 0.55; }

/* Freitext-Eingabe (Einmal-/Textposition) – Optik wie die anderen Felder */
.pos-text {
  min-width: 0; padding: 10px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.pos-text:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.pos-foot-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pos-row > input:disabled { opacity: 0.45; }
.oi-chip { margin-left: 8px; }
/* Reine Textzeile in Auftrags-/Rechnungsdetail */
.oi-text { font-style: italic; color: var(--muted); }

/* ---------- Filterkopf über Listen: EINE Zeile mit Suchfeld (wächst) +
   kompakten Filter-Dropdowns + Export-Menü + „Neu"-Knopf rechts ---------- */
.filter-head {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 14px;
}

/* Suchfeld in der Filterzeile (wächst; schiebt den Export-Knopf nach rechts) */
.filter-search { flex: 1 1 200px; min-width: 150px; display: flex; }

/* Mobil bricht die Zeile um: Suchfeld volle Breite, Filter/Export/Neu darunter */
@media (max-width: 560px) {
  .filter-search { flex-basis: 100%; }
}
.filter-search input {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
}
.filter-search input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

/* Export-Menü: gleiche Optik wie die Filter-Dropdowns, Panel rechtsbündig */
.exp-menu { flex: none; }
.exp-menu .fdrop-panel { left: auto; right: 0; min-width: 210px; }
.exp-ic { display: inline-flex; }
.exp-ic svg { width: 16px; height: 16px; fill: currentColor; }

/* Suchfeld mit Lösch-X (suchFeld): X erscheint bei Eingabe, absolut rechts im
   Feld; das native WebKit-X wird ausgeblendet (sonst doppelt). */
.such-feld { position: relative; display: flex; flex: 1; min-width: 0; }
.such-feld input { flex: 1; width: 100%; padding-right: 32px; }
.such-feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.such-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted); cursor: pointer;
}
.such-clear:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.such-clear svg { width: 14px; height: 14px; fill: currentColor; display: block; }

.fdrop { position: relative; display: inline-block; }
.fdrop-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; font: inherit; font-size: 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.fdrop-btn:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.fdrop-prefix { color: var(--muted); font-size: 12.5px; }
.fdrop-prefix::after { content: ':'; }
.fdrop-label { font-weight: 600; }

.fdrop-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 235px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px;
}
.fdrop-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
/* Panel am rechten Fensterrand (1.1.79): kippt auf die andere Seite. */
.fdrop-panel.is-rechts { left: auto; right: 0; }

/* UNTERMENUE im Zeilenmenue ({ unter: […] }, ab 1.1.79). Am Schreibtisch
   klappt es NACH RECHTS auf, im schmalen Fenster eingerueckt DARUNTER — ein
   Flyout, der halb aus dem Bild ragt, ist am Telefon nicht zu treffen. Die
   Schwelle steht ebenso in schmalesFenster(). */
.fdrop-untermenu { position: relative; }
.fdrop-item.has-sub { display: flex; align-items: center; gap: 8px; }
/* Aktion unter den Export-Formaten (1.2.22, „Als Zielgruppe"): abgesetzt. */
.exp-fmt-panel .exp-aktion { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; padding-top: 9px; }
.fdrop-item.has-sub.is-auf { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.fdrop-sub-pfeil { margin-left: auto; display: inline-flex; flex: none; color: var(--muted); }
.fdrop-sub-pfeil svg { width: 16px; height: 16px; fill: currentColor; }
/* ZWEI KLASSEN, mit Absicht: Das Zeilenmenue zieht sein Panel ueber
   `.exp-menu .fdrop-panel { left: auto; right: 0 }` an den rechten Rand. Mit
   nur `.fdrop-sub` gewaenne diese Regel (zwei Klassen gegen eine), und das
   Untermenue laege UEBER seinem Elternmenue statt daneben. */
.fdrop-panel.fdrop-sub { top: -8px; left: calc(100% + 2px); right: auto; }
.fdrop-panel.fdrop-sub.is-links { left: auto; right: calc(100% + 2px); }

@media (max-width: 699.98px) {
  .fdrop-panel.fdrop-sub {
    position: static; min-width: 0; padding: 0 0 6px 20px;
    background: transparent; border: 0; box-shadow: none;
  }
  .fdrop-panel.fdrop-sub.is-links { right: auto; }
  .fdrop-sub-pfeil { transform: rotate(90deg); }
}

/* Trennlinie im Zeilenmenue ({ sep: true }) — hebt abgesetzte Eintraege ab. */
.fdrop-sep { height: 1px; background: var(--border); margin: 5px 6px; }
/* Eintrag mit Icon (Zeilenmenues): Icon links, Text buendig daneben. */
.fdrop-item:has(> .fdrop-ic) { display: flex; align-items: center; gap: 8px; }
.fdrop-ic { display: inline-flex; flex: none; color: var(--muted); }
.fdrop-ic svg { width: 17px; height: 17px; fill: currentColor; }
.fdrop-item:hover .fdrop-ic { color: var(--brand); }
/* Zeilenmenue in einer Listenzeile: mittig, kein Wachsen, Panel nach rechts. */
.tenant-item > .more-menu { align-self: center; flex: none; }
/* Persoenliche Marker: drei kleine Kaestchen vor dem "+". Ruhig - sie sind
   eine Notiz am Rand, kein Bedienelement, das um Aufmerksamkeit bittet. */
.crm-marker { display: flex; align-items: center; gap: 2px; flex: none; align-self: center; }
.crm-marker-box {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px; border-radius: 6px; cursor: pointer;
}
.crm-marker-box:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.crm-marker-box input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
/* Mehrfachauswahl in einer Maskenzeile (Filter): Kaestchen statt Chips, weil
   mehrere Haken JE GRUPPE moeglich sind - ein Chip sieht nach "einer davon" aus. */
.sel-mehrfach { flex: 1 1 auto; min-width: 0; }
/* DER PFEIL GEHOERT ANS ENDE DES FELDES (Betreiber 28.09.2026): Der Knopf ist
   so breit wie jedes andere Feld der Maske - klebte der Pfeil hinter dem Text,
   stand er mal in der Mitte, mal am Rand, je nachdem wie viele Filter gewaehlt
   sind. Rechts aussen ist er da, wo ihn jedes Auswahlfeld hat. */
.sel-mehrfach > .fdrop-btn { width: 100%; justify-content: flex-start;
  position: relative; padding-right: 34px; }
/* BUENDIG MIT DEN KAESTCHEN DARUEBER (Betreiber 28.09.2026): Suchbegriff, Ort
   und PLZ tragen das Detailsuche-Kaestchen IM Feld (.sel-detail, right: 9px).
   Der Pfeil muss auf derselben senkrechten Linie stehen - sonst franst die
   rechte Kante der Maske aus. Absolut gesetzt, nicht per `margin-left: auto`:
   nur so haengt er an der Feldkante und nicht am Text.
   GEMESSEN, NICHT GERATEN (28.09.2026): Kaestchen 13 px breit, Mitte 16 px von
   der Feldkante; Pfeil 20 px breit, also `right: 5px` - dann liegen beide
   Mitten auf 16 px. */
.sel-mehrfach > .fdrop-btn > .ssel-arrow {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
}
/* Damit der Text den Pfeil nicht wegschiebt, sondern vorher abgeschnitten wird. */
.sel-mehrfach > .fdrop-btn > .fdrop-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-mehrfach .fdrop-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-regel { margin: 8px 8px 0; }
.fdrop-item:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.fdrop-item.is-selected { background: color-mix(in srgb, var(--brand) 14%, transparent); font-weight: 600; }

/* Sammel-Filter (multiFilter): ein Dropdown mit Chip-Gruppen (Lieferart/
   Herkunft/Zahlart) — Zähler-Badge am Auslöser, Chips im Panel, Zurücksetzen. */
.mf-badge {
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; padding: 1px 7px; margin-left: 2px;
}
.mf-filter .fdrop-btn.is-aktiv { border-color: var(--brand); }
/* BREIT UND ZWEISPALTIG in der CRM-Maske (Betreiber 28.09.2026): Fuenf Gruppen
   untereinander ergaben eine Saeule, die scrollen musste. Nebeneinander sieht
   man alles auf einen Blick. Ausserhalb der Maske (Akte-Historie) bleibt das
   Panel schmal - dort steht es in einer Filterzeile, nicht in einem Formular. */
.mf-panel { min-width: 280px; max-width: min(340px, 92vw); }
.sel-mehrfach > .mf-panel { min-width: 520px; max-width: min(640px, 92vw); }
@media (min-width: 760px) {
  .sel-mehrfach > .mf-panel .mf-bloecke { columns: 2; column-gap: 20px; }
}
/* DREISPALTIG ab 1100px (Betreiber 28.09.2026): Dann stehen alle fuenf Gruppen
   nebeneinander, und darunter ist Platz fuer die Freifeld-Zeilen. Schmaler
   waere das Panel breiter als der Platz rechts daneben. */
@media (min-width: 1100px) {
  .sel-mehrfach > .mf-panel { min-width: 760px; max-width: min(860px, 94vw); }
  .sel-mehrfach > .mf-panel .mf-bloecke { columns: 3; column-gap: 18px; }
}
.mf-block { break-inside: avoid; }
/* Die Regel und der Fuss laufen ueber beide Spalten - sie gehoeren zu allen. */
.mf-panel .mf-regel { margin-top: 6px; }
.mf-gruppe {
  margin: 8px 6px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.mf-gruppe:first-child { margin-top: 4px; }
.mf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 4px; }
/* Chip-Reihe als FELD (weitere Adresskategorien): ohne das Panel-Polster. */
.kat-chips { padding: 0; }
.mf-chip {
  font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer;
}
.mf-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.mf-foot {
  display: flex; justify-content: flex-end; border-top: 1px solid var(--border);
  padding: 8px 4px 2px; margin-top: 6px;
}
.mf-reset { font-size: 12.5px; padding: 6px 12px; }
/* Zusatzblock unten im Panel (opts.extra): die Freifeldsuche der CRM-Maske,
   das "nur eigene" der Akte-Historie. Abgesetzt durch eine Linie, damit er
   nicht wie eine weitere Chip-Gruppe wirkt. */
.mf-extra { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 6px; }
/* Das "Neu erfassen"-Menue steht am rechten Ende der Filterzeile. */
.filter-head > .more-menu { margin-left: auto; }
/* Das Menue als KOPF-KNOPF (moreMenu({kopf:true})): Es sitzt im .admin-head
   wie jeder andere "X anlegen" - also auch mittig auf der Haarlinie, und sein
   Panel klappt rechtsbuendig auf. */
.admin-head > .more-menu.is-kopf { margin-top: 7px; flex: none; }
.more-menu.is-kopf > .fdrop-panel { right: 0; left: auto; }
.mf-extra .mf-gruppe { margin-top: 2px; }
/* Freifeldsuche im Filter-Panel: Bezeichnung und Inhalt UNTEREINANDER (ab
   1.1.37). Nebeneinander blieben der Bezeichnung 118 px - zu wenig fuer
   "Anzahl Reisen", und ein abgeschnittener Name ist keine Auswahl. */
.mf-extra-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.mf-extra .check-row { margin: 2px 4px 2px; }

/* Export-Menü als Format-Raster: ein Format je Zeile (PDF/DATEV/CSV), rechts
   Teilen + Herunterladen als Icon-Knöpfe (weinrot beim Überfahren). */
.exp-fmt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 3px 3px 10px; border-radius: 8px; }
.exp-fmt-name { font-size: 14px; font-weight: 600; }
.exp-fmt-acts { display: inline-flex; gap: 4px; }
.exp-fmt-act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.exp-fmt-act svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.exp-fmt-act:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }

.fdrop-dates {
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.fdrop-dates label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--muted);
}
.fdrop-dates input {
  padding: 7px 9px; font: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}
.fdrop-dates input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

/* ---------- Auswahlfeld mit integrierter Suche (searchSelect) ---------- */
.ssel { position: relative; }
.ssel-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.ssel-btn:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.ssel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssel-label.is-placeholder { color: var(--muted); }
.ssel-arrow { display: inline-flex; flex: none; }
.ssel-arrow svg { width: 20px; height: 20px; fill: var(--muted); }

.ssel-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px;
}
.ssel-search {
  width: 100%; padding: 8px 10px; margin-bottom: 6px; font: inherit;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}
.ssel-search:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.ssel-list { max-height: 220px; overflow-y: auto; }
.ssel-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.ssel-item:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.ssel-item.is-selected { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.ssel-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssel-sub { color: var(--muted); font-size: 12px; flex: none; }
.ssel-empty { padding: 8px 10px; color: var(--muted); font-size: 14px; }
.pos-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pos-summe { font-weight: 600; }

.order-status-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px; }

.order-items { margin-bottom: 10px; }
.order-item-row { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.order-item-row.is-clickable { cursor: pointer; }
.order-item-row.is-clickable:hover { color: var(--brand); }
.oi-menge { flex: none; color: var(--muted); min-width: 64px; }
.oi-name { flex: 1; min-width: 0; }
.oi-preis { flex: none; font-variant-numeric: tabular-nums; }
.oi-total { border-top: 1px solid var(--border); font-weight: 700; margin-top: 4px; padding-top: 8px; }

.cust-history { margin-bottom: 6px; }

/* Versand-Aktionen (Lieferschein/Paketlabel) im Auftragsdetail */
.versand-group { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 10px; }
.versand-group .versand-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.versand-group .btn { padding: 6px 8px; }
.versand-group .btn svg { width: 18px; height: 18px; fill: currentColor; }
.liefer-box { margin: 4px 0 10px; }
.liefer-addr { font-size: 14px; line-height: 1.45; }

/* Begruendung der Steuerregel in der Adresse: normal ein Hinweis, bei einer
   WARNUNG (Baustelle im Ausland, abgelaufene Freistellung) deutlich sichtbar -
   sie betrifft Geld und Finanzamt. */
.steuer-hinweis { margin: -6px 0 10px; }
.steuer-hinweis.is-warn {
  color: var(--text); background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-radius: 8px; padding: 7px 10px; margin-top: 0;
}

/* CRM: Adress-Sofortinformation (1.0.67/1.0.69) - Maske oben, Treffer darunter.
   DREI REITER statt Klappfaechern, Beschriftung VOR dem Feld: die Maske wird nur
   halb so hoch, und darunter bleibt Platz fuer die Trefferliste. Kein eigener
   Flaechenton - die Maske steht auf dem WEISS der Karte (Betreiber 26.09.2026). */
.sel-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.sel-leer { color: var(--muted); font-size: 14px; margin: 4px 0; }
.sel-tab-zahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--brand) 16%, transparent); color: inherit;
}
.fk-seg-btn.is-active .sel-tab-zahl { background: rgba(255, 255, 255, .28); }
/* Die drei Reiter nehmen die GANZE Breite (Betreiber 26.09.2026): Sie
   gliedern die Maske darunter - dann soll ihre Kante auch deren Kante sein.
   Nur hier, nicht bei den uebrigen Segmentleisten (Belege, Akte-Reiter), die
   sich bewusst an ihren Inhalt schmiegen. */
.fk-seg.sel-tabs { display: flex; width: 100%; }
.fk-seg.sel-tabs .fk-seg-btn { flex: 1 1 0; justify-content: center; }

.sel-panel { padding-top: 12px; }
.sel-zeile {
  display: grid; grid-template-columns: var(--sel-lbl, 150px) minmax(0, 1fr);
  align-items: center; gap: 8px; margin-bottom: 8px;
}
/* BUENDIG LINKS (Betreiber 26.09.2026): Die Beschriftung beginnt an der Kante
   ihrer Haelfte, nicht irgendwo in der Spalte. Damit trotzdem kein Loch bis zum
   Feld klafft, ist die Spalte JE REITER so breit wie dessen laengstes Wort
   (lbl-kurz | lbl-mittel | lbl-lang unten) - fest, nicht max-content: jede
   Zeile ist ein eigenes Raster, mit max-content stuenden die Felder versetzt. */
.sel-zeile > label {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  justify-self: start; text-align: left;
}
/* Breite der Beschriftungsspalte je Reiter - so weit wie das laengste Wort
   darin, damit links nichts klafft und rechts nichts umbricht. */
.sel-panel.lbl-kurz   { --sel-lbl: 84px; }
.sel-panel.lbl-mittel { --sel-lbl: 112px; }
.sel-panel.lbl-lang   { --sel-lbl: 146px; }

.sel-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Ein DURCHSUCHBARES Auswahlfeld (searchSelect) ist ein <div> und bleibt in
   diesem Flex-Container sonst auf Inhaltsbreite stehen - waehrend ein natives
   <select> daneben die ganze Zeile fuellt. Die Felder saehen dann verschieden
   lang aus, obwohl sie dasselbe tun (Betreiber 29.09.2026). */
.sel-ctl > .sel-such { flex: 1 1 auto; min-width: 0; }
/* Das Suchfeld mit Detailsuche-Kaestchen liegt in einer Huelle - es soll
   trotzdem aussehen wie jedes andere Feld der Maske. */
/* LEERES DATUMSFELD OHNE SCHABLONE (Betreiber 28.09.2026): Solange nichts
   drinsteht, ist es ein TEXTFELD - erst der Fokus macht ein Datumsfeld daraus
   (crmSelDatum in js/app.js). Der Weg ueber `::-webkit-datetime-edit` ist
   bewusst aufgegeben: den gibt es nur in Chromium und WebKit, und in Firefox
   stand die Schablone weiter da.
   Damit das Feld beim Wechsel nicht springt, ist die Hoehe beider Zustaende
   dieselbe - sie kommt ohnehin aus `.sel-ctl > input`. */
.sel-ctl > .tk-wrap { flex: 1 1 auto; min-width: 0; }
.sel-ctl > input, .sel-ctl > select, .sel-ctl .sel-feld-detail > input,
.sel-ctl .tk-wrap > input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px;
}
.sel-ctl > input:focus, .sel-ctl > select:focus,
.sel-ctl .sel-feld-detail > input:focus,
.sel-ctl .tk-wrap > input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
/* Auch im LEEREN Zustand, wo das Feld ein Textfeld ist (.datum-leise): sonst
   waere ein leeres Datumsfeld breiter als ein gefuelltes und die Zeile spraenge
   beim Ausfuellen. */
.sel-ctl > input[type='date'], .sel-ctl > input.datum-leise { flex: 0 1 180px; }
.sel-ctl > select:not([multiple]) { flex: 0 1 260px; }
.sel-ctl .check-row { margin: 0; }
/* FREIFELD-KRITERIEN (Vorbild SISPRO-IIS, 1.1.43): Bezeichnung oben, darunter
   Operator und Wert. ZWEIZEILIG, damit die Gruppe in EINE Spalte der Maske
   passt - nebeneinander braeuchte sie die volle Breite, und der Reiter waere
   wieder hoeher als "Allgemein". */
/* FREIFELDER IN DER TREFFERZEILE (1.1.45): eigene Spalte mit FESTER Breite,
   wie Chips und Rufnummer daneben - sonst fluchten die Zeilen nicht. Leer
   bleibt sie stehen. Auf schmalen Geraeten faellt sie weg; dort zaehlt der
   Name, nicht das Merkmal. */
.row-frei { flex: 0 0 200px; min-width: 0; display: grid; gap: 1px; align-content: center; }
.row-frei-eintrag { display: flex; gap: 6px; min-width: 0; font-size: 11.5px; line-height: 1.35; }
.row-frei-lab { color: var(--muted); flex: 0 1 auto; max-width: 96px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-frei-wert { color: var(--text); font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .row-frei { display: none; } }

/* EIN KRITERIUM IN ZWEI ZEILEN, damit es in EINE Maskenspalte passt (1.1.82,
   Betreiber 29.09.2026: „so darstellen, dass es in eine Spalte rechts passt,
   damit wir wieder dieselbe Hoehe haben wie bei Allgemein"). Ueber die volle
   Breite waere ein Kriterium EINE Zeile - aber dann ist der Reiter „Erweitert"
   doppelt so hoch wie „Allgemein", und die Maske sieht bei jedem Reiterwechsel
   anders aus.
      [Freifeld 2 v] [Bezeichnung ........] [x]
      [ist groesser v] [Wert ....] [bis ....]
   Der Loeschknopf steht in der ERSTEN Zeile rechts: In der zweiten haenge er
   an den Werten und saehe aus, als loesche er den Wert. */
.frei-zeile {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 30px;
  gap: 5px; align-items: center; margin-bottom: 9px;
}
.frei-zeile > .frei-op { grid-column: 1 / -1; }
.frei-zeile:last-of-type { margin-bottom: 4px; }
/* KRITERIENKETTE (1.1.81): Die Verknuepfung steht MITTIG ZWISCHEN zwei Zeilen -
   sie gehoert zu beiden und zu keiner. Am Rand haenge sie optisch an einer. */
.frei-verk { display: flex; justify-content: center; margin: -2px 0 7px; }
.frei-verk > select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--brand);
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 12px; text-align: center;
}
.frei-plus { margin: 2px 0 6px; }
.frei-plus .btn { padding: 6px 12px; font-size: 13.5px; }
.frei-weg { align-self: center; }
.frei-op { display: flex; gap: 5px; align-items: center; }
.frei-op > select { flex: 0 0 122px; }
.frei-op > input { flex: 1 1 auto; min-width: 0; }
/* UEBER DIE VOLLE BREITE (`feldGruppe({ breit: true })`): Dann ist ein
   Kriterium EINE Zeile - Feld, Bezeichnung, Operator, Wert - so wie im
   Altsystem. `display: contents` schiebt Operator und Wert in dasselbe
   Raster; ein ausgeblendetes "bis" belegt dabei keine Spalte. */
.sel-rahmen > .feldgruppe.is-breit { column-span: all; }
/* UEBER DIE VOLLE BREITE (`feldGruppe({ breit: true })`) waere ein Kriterium
   EINE Zeile. Wird derzeit NICHT genutzt (siehe oben); die Regel bleibt, weil
   die Option selbst allgemein ist. */
.is-breit .frei-zeile {
  grid-template-columns: 132px minmax(0, 1.3fr) 148px minmax(0, 1fr) minmax(0, 1fr) 34px;
}
/* DER LOESCHKNOPF STEHT DANN FEST IN DER LETZTEN SPALTE. Ohne Ansage fuellt er
   die naechste freie - und die ist eine andere, sobald das ausgeblendete "bis"
   auftaucht: Bei "im Bereich" rutschte er in die 0-px-Spalte und war weg. */
.is-breit .frei-weg { grid-column: 6; }
.is-breit .frei-op { display: contents; }
.frei-zeile input, .frei-zeile select {
  font: inherit; font-size: 13.5px; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; width: 100%;
}
.frei-zeile input:focus, .frei-zeile select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
/* Detailsuche: das Kaestchen sitzt IM Feld, rechts innen (Betreiber
   27.09.2026) - daneben waere jedes Feld mit Kaestchen kuerzer als die
   anderen gewesen, und die Maske franste rechts aus. Text im Tooltip. */
.sel-feld-detail { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.sel-feld-detail > input { width: 100%; padding-right: 30px; }
.sel-detail {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; cursor: help;
}
.sel-detail input { margin: 0; }
/* BUENDIG MIT DER ERSTEN FELDZEILE (Betreiber 26.09.2026): kein Vorsprung -
   die Baumspalte beginnt oben auf derselben Linie wie „Bezeichnung". */
.sel-baeume { margin-top: 0; }
@media (min-width: 1100px) {
  /* Zwei Spalten, damit die Maske noch flacher wird; Hinweise laufen ueber die
     volle Breite. */
  .sel-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; align-items: start; }
  .sel-panel > .sel-voll { grid-column: 1 / -1; }
  /* ALLGEMEIN IST DREISPALTIG (Betreiber 26.09.2026): zwei Spalten Felder,
     rechts die Baeume. Die Felder bilden ihr EIGENES Raster - im selben Raster
     wie die Baeume wuerden ihre Zeilen auf deren Hoehe auseinandergezogen. */
  /* DREI SPALTEN (Betreiber 27.09.2026): Felder | Kategorien | Kriterien.
     Die Felder stehen dafuer UNTEREINANDER - vorher fuellten sie zweispaltig
     und die Baeume mussten sich eine Spalte teilen. */
  .sel-panel.sel-3sp { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .sel-3sp > .sel-felder { display: block; }
  .sel-3sp > .sel-baeume .crm-baum-grid { grid-template-columns: 1fr 1fr; }
}
/* In der schmalen rechten Spalte stehen die beiden Baeume UNTEREINANDER. */
.sel-baeume .crm-baum-grid { grid-template-columns: 1fr; }
.sel-baeume .crm-baum-liste { max-height: 190px; }
/* KOMPAKTER (Betreiber 30.09.2026): Felder niedriger, Baumzeilen enger — NUR in
   der CRM-Suchmaske (.sel-panel); die Akte behält ihre Maße. Alle Feldarten
   gleich hoch (Eingabe, Auswahl, Filter-Knopf, durchsuchbare Auswahl), sonst
   franst die Spalte aus. */
.sel-panel .sel-zeile { margin-bottom: 6px; }
.sel-panel .sel-ctl > input, .sel-panel .sel-ctl > select, .sel-panel .sel-ctl .sel-feld-detail > input,
.sel-panel .sel-ctl .tk-wrap > input, .sel-panel .sel-ctl input[type=text], .sel-panel .sel-ctl input[type=search],
.sel-panel .sel-ctl .fdrop-btn, .sel-panel .sel-ctl .ssel-btn {
  padding-top: 5px; padding-bottom: 5px; font-size: 13.5px; min-height: 0;
}
/* Der Pfeil der durchsuchbaren Auswahl ist 20 px hoch und machte sie 4 px höher. */
.sel-panel .sel-ctl .ssel-btn .ssel-arrow { height: 16px; display: inline-flex; align-items: center; }
.sel-panel .sel-ctl .ssel-btn .ssel-arrow svg { width: 18px; height: 18px; }
/* Ein natives <select> ist bei gleichem Innenabstand 2 px höher als das Textfeld. */
.sel-panel .sel-ctl > select { padding-top: 4px; padding-bottom: 4px; }
/* Baumzeilen: seit 1.2.27 ÜBERALL eng (Suchmaske, Akte, Neuanlage) — siehe
   .crm-node unten. */
/* DREI RAHMEN IN „ALLGEMEIN" (Betreiber 30.09.2026): Schnellsuche | Kategorien
   | Kriterien. Unten KEIN Abstand am Rahmen - die Baumrahmen fuellen die
   Spaltenhoehe absolut aus; ein Aussenabstand links liesse sie sonst tiefer
   enden als die Schnellsuche. Innen unten so viel Luft wie oben. */
.sel-3sp .feldgruppe { margin-bottom: 0; }
.sel-3sp > .sel-felder > .feldgruppe { padding-bottom: 11px; }
.crm-baum-col.is-rahmen {
  overflow: visible; background: none; border-radius: 12px;
  padding: 8px 6px 6px; margin: 0;
}
.crm-baum-col.is-rahmen > legend .crm-baum-verkn { text-transform: none; }
.crm-baum-col.is-rahmen .crm-baum-liste { padding: 2px 4px 2px; }
.crm-baum-aktion { display: inline-flex; align-items: center; gap: 6px; }
.crm-baum-aktion .crm-baum-alle svg { width: 16px; height: 16px; }
@media (max-width: 1099px) {
  /* Untereinander: Abstand zwischen den Rahmen. */
  .sel-3sp > .sel-felder { margin-bottom: 14px; }
  .sel-baeume .crm-baum-grid { row-gap: 18px; }
}
@media (min-width: 1100px) {
  /* GENAU SO HOCH WIE DIE FELDSPALTE (Betreiber 27.09.2026): Die Baeume
     standen mal hoeher, mal niedriger als die vier Felder daneben.
     Der Kniff: Die Baumspalte traegt ihren Inhalt ABSOLUT - damit bestimmt
     sie die Zeilenhoehe des Rasters NICHT mehr mit (die kommt jetzt allein
     von den Feldern), und `inset: 0` fuellt sie danach exakt aus. */
  .sel-panel.sel-3sp { align-items: stretch; }
  /* DIE LETZTE FELDZEILE OHNE ABSTAND NACH UNTEN (Betreiber 27.09.2026):
     Die Spalten waren zwar gleich HOCH, aber die 8 px Zeilenabstand unter dem
     letzten Feld zaehlten mit - die Baumkaesten endeten dadurch 8 px tiefer
     als die sichtbare Feldkante. Gemessen wird am Bild, nicht an der Zahl. */
  .sel-3sp > .sel-felder .sel-zeile:last-child { margin-bottom: 0; }
  .sel-3sp > .sel-baeume { position: relative; }
  .sel-3sp > .sel-baeume > .crm-baum-grid { position: absolute; inset: 0; }
  .sel-3sp > .sel-baeume .crm-baum-col { display: flex; flex-direction: column; min-height: 0; }
  .sel-3sp > .sel-baeume .crm-baum-liste { flex: 1 1 0; min-height: 0; max-height: none; }
}
@media (max-width: 560px) {
  /* Einspaltig: Beschriftung UEBER dem Feld. */
  .sel-zeile { grid-template-columns: 1fr; gap: 3px; margin-bottom: 10px; }
}
/* RAHMEN UM DIE GRUPPEN (Betreiber 28.09.2026, Vorbild SISPRO-IIS): "Erweitert"
   und "Historie" waren eine lange Reihe gleich aussehender Zeilen. Der Rahmen
   traegt jetzt den Zusammenhang ("Adressanlage"), die Beschriftung nur noch das
   Feld ("Zeitraum"). Zwei Spalten schon ab 760px - die Gruppen sind flach. */
/* NICHT HOEHER ALS "ALLGEMEIN" (Betreiber 28.09.2026): Sonst springt die
   Trefferliste beim Reiterwechsel nach unten weg. Deshalb SPALTENSATZ
   (`columns`) statt Raster: Ein Raster zwaengt jede Zeile auf die Hoehe ihrer
   hoechsten Gruppe, der Spaltensatz packt die Gruppen dicht untereinander und
   bricht erst am Spaltenende um. `break-inside: avoid` haelt eine Gruppe
   zusammen. */
/* `display: block` ist Pflicht: Die allgemeine 1100er-Regel macht JEDES
   .sel-panel zum Raster - und in einem Raster gibt es keinen Spaltensatz. */
@media (min-width: 760px) {
  .sel-panel.sel-rahmen { display: block; columns: 2; column-gap: 18px; }
}
@media (min-width: 1100px) {
  .sel-panel.sel-rahmen { display: block; columns: 3; column-gap: 16px; }
}
.sel-rahmen > .feldgruppe { break-inside: avoid; }
.sel-rahmen > .feldgruppe { margin-bottom: 12px; }
.sel-rahmen .field-hint { margin: -2px 0 8px; }

/* ══════════════ WETTER + NIEDERSCHLAGSRADAR (1.0.69/1.0.71) ══════════════
   Die Wetterkarte steht als normale Dashboard-Karte in der Reihe (gleiche
   Breite wie "Heute"). Aufbau: Jetzt-Zeile, darunter HEUTE in Stunden, darunter
   die naechsten TAGE - beide Streifen waagerecht scrollbar mit Pfeilen (Muster
   VINORUM). Quellenvermerk im Fuss (Lizenzbedingung, keine Zierde). */
.dash-wetter { display: flex; flex-direction: column; gap: 8px; }

.wt-jetzt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wt-sym-gross { font-size: 30px; line-height: 1; }
.wt-temp { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wt-jetzt-txt { display: flex; flex-direction: column; min-width: 0; }
.wt-jetzt-txt b { font-size: 13.5px; }
.wt-jetzt-txt span { font-size: 12px; color: var(--muted); }
.wt-ort { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Radar-Symbol im Kartenkopf: dieselbe Maske wie in VINORUM (Radarkringel mit
   Wolke), ueber currentColor eingefaerbt - so passt es in Hell und Dunkel. */
.ic-radar {
  display: inline-block; background: currentColor;
  -webkit-mask: url('../branding/radar_icon_maske.png') no-repeat center / contain;
  mask: url('../branding/radar_icon_maske.png') no-repeat center / contain;
  width: 19px; height: 19px;
}
.dash-k-kopf .dash-w-radar { margin-left: 6px; color: var(--muted); }
.dash-k-kopf .dash-w-radar:hover { color: var(--brand); }
.dash-w-stand { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
/* Nur ein ZEICHEN, kein Knopf - der Kopf gehoert der Ueberschrift. */
.dash-w-refresh {
  border: none; background: none; padding: 0; cursor: pointer; color: var(--muted);
  display: inline-flex; align-items: center;
}
.dash-w-refresh svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.dash-w-refresh:hover { color: var(--brand); }

.wt-block-titel {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-top: 2px;
}

/* Scroll-Streifen mit Pfeilen (Muster VINORUM-Dashboard) */
.dash-fc-wrap { display: flex; align-items: center; gap: 2px; min-width: 0; }
.dash-fc-streifen {
  display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth;
  flex: 1 1 auto; min-width: 0; scrollbar-width: none; padding-bottom: 1px;
}
.dash-fc-streifen::-webkit-scrollbar { display: none; }
.dash-fc-pfeil {
  flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--muted); cursor: pointer; padding: 0;
}
.dash-fc-pfeil svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.dash-fc-pfeil:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.dash-fc-pfeil[hidden] { display: none; }

/* Eine Kachel im Streifen (Stunde oder Tag) */
/* KEINE FLAECHE, nur eine feine Kontur (Betreiber 26.09.2026): Die getoente
   Flaeche wirkte in der Karte wie ein zweiter Kartenboden. Regenreiche Stunden
   heben sich ueber die Kontur ab, nicht ueber eine Fuellung. */
.dash-fc-tile {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 52px; padding: 5px 7px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: none; font-variant-numeric: tabular-nums;
}
/* ALLE KACHELN GLEICH (Betreiber 26.09.2026): Der farbige Umriss bei viel
   Regen war ein zweites Signal neben dem Symbol - und hob ausgerechnet die
   Tage hervor, an denen man ohnehin nicht rausgeht. Das Symbol reicht. */
/* Die Kacheln sind KNOEPFE (Klick oeffnet den Tag) - aber sie sollen nicht wie
   Knoepfe aussehen: kein eigener Grund, keine eigene Schrift. */
button.dash-fc-tile { font: inherit; color: inherit; background: none; cursor: pointer; }
button.dash-fc-tile:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); }

/* ---- Tages-Vorhersage (Fenster, Muster VINORUM) ----
   MASSVOLL (Betreiber 26.09.2026, zwei Runden): Die erste Fassung war "klobig"
   (1240 px breit, Kopf wie ein Plakat), die zweite zu klein. Jetzt ein
   mittlerer Stand - Grafik gut lesbar, Kopf zurueckgenommen. */
.modal-sheet.tv-sheet { max-width: 760px; }
.tv-title { align-items: flex-start; padding: 13px 16px 10px; font-size: 15px; }
.tv-title .sheet-title-ic svg { width: 18px; height: 18px; }
.tv-titel-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tv-ort { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tv-datum-zeile { display: flex; align-items: center; gap: 4px; }
.tv-titel { font-size: 15.5px; font-weight: 700; min-width: 165px; }
.tv-nav { padding: 1px; }
.tv-nav svg { width: 17px; height: 17px; }
.tv-nav[disabled] { opacity: .35; cursor: default; }
.tv-sheet .sheet-body { padding: 14px 18px; }
.tv-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tv-symbol { font-size: 32px; line-height: 1; flex: none; }
.tv-titelblock { min-width: 0; }
.tv-wetter { font-size: 12.5px; color: var(--muted); }
.tv-temp { font-size: 21px; font-weight: 700; line-height: 1.15; }
.tv-tmin { font-size: 14px; font-weight: 400; color: var(--muted); }
.tv-fakten { margin-left: auto; text-align: right; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.tv-seg { margin-bottom: 6px; }
.tv-seg .fk-seg-btn { padding: 5px 11px; font-size: 12px; }
/* Am Handy scrollt die Grafik waagerecht, statt zur Briefmarke zu schrumpfen. */
.tv-scroll { overflow-x: auto; scrollbar-width: thin; }
.tv-svg { width: 100%; min-width: 500px; height: auto; display: block; }
.tv-quelle { margin: 6px 0 0; font-size: 10.5px; }
.modal-sheet.tv-sheet > .tv-actions {
  flex: none; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}
.dash-fc-tile .fc-lbl { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.dash-fc-tile .fc-sym { font-size: 18px; line-height: 1.15; }
.dash-fc-tile .fc-temp { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dash-fc-tile .fc-regen { font-size: 10.5px; color: var(--muted); }
.dash-fc-tile .fc-regen.is-warn { color: var(--brand); font-weight: 600; }
.dash-fc-tmin { font-weight: 400; font-size: 11.5px; color: var(--muted); }

.wt-quelle { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Hinweiszeile: erscheint NUR bei Regen oder aufziehendem Regen. */
.radar-hinweis-host:empty { display: none; }
.radar-hinweis {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text);
}
.radar-hinweis:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.radar-hinweis-ic { flex: none; font-size: 15px; }
.radar-hinweis-text { flex: 1; min-width: 0; }
.radar-hinweis-mehr { flex: none; font-weight: 600; color: var(--brand); white-space: nowrap; }

/* ---- Radar-Fenster ---- */
.radar-status { margin: 0; font-size: 13px; color: var(--muted); min-height: 18px; }
/* DAS FENSTER PASST IMMER INS BILD (Betreiber 26.09.2026): Der Rumpf ist eine
   Spalte, und die KARTE gibt nach - nicht die Bedienelemente darunter. Vorher
   stand die Karte auf festen 62vh; zusammen mit Regler, Legende und Fuss lief
   das Fenster ueber, und zum Schliessen musste man scrollen. */
.modal-sheet.radar-sheet {
  /* HOEHE statt nur max-height: Ohne sie waere das Fenster nur so hoch wie
     sein Inhalt - die Karte (flex: 1) bekaeme nichts abzugeben und bliebe auf
     ihrer Mindesthoehe stehen. Mit fester Hoehe fuellt die Karte den Rest und
     schrumpft auf kleinen Schirmen als ERSTE. */
  height: 88vh;
}
.modal-sheet.radar-sheet .sheet-body {
  /* flex: 1 - der Rumpf muss WACHSEN, sonst bleibt er inhaltshoch und die
     Karte darin hat nichts zu fuellen. min-height: 0 - sonst kann ein
     Flex-Kind nicht unter seine Inhaltshoehe schrumpfen. */
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-height: 0;
}
.radar-map {
  flex: 1 1 auto; min-height: 110px; border-radius: 10px;
  overflow: hidden; border: 1px solid var(--border);
}
/* Der Schliessen-Knopf sitzt AUSSERHALB des scrollenden Rumpfes und bleibt
   damit immer erreichbar. */
.modal-sheet.radar-sheet > .radar-actions {
  flex: none; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}
/* Niedriges Fenster: erst die Legende, dann der Erklaersatz weichen - die
   Karte und die Bedienung bleiben. */
@media (max-height: 640px) { .radar-sheet .radar-legende { display: none; } }
@media (max-height: 560px) { .radar-sheet .radar-fuss .hint { display: none; } }
.radar-map .leaflet-container { background: var(--bg); font: inherit; }
.radar-lade { height: 3px; margin: 6px 0; border-radius: 2px; background: var(--border); overflow: hidden; }
.radar-lade > span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s ease; }
.radar-lade.is-fertig { opacity: 0; transition: opacity .4s ease .2s; }
.radar-zeile { display: flex; align-items: center; gap: 10px; }
.radar-play { flex: none; min-width: 44px; padding: 8px 12px; }
.radar-strahl { flex: 1; min-width: 0; }
.radar-slider { width: 100%; margin: 0; }
.radar-phasen { display: flex; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.radar-ph-hist { flex: 0 0 auto; border-bottom: 2px solid var(--muted); padding-bottom: 1px; }
.radar-ph-now { flex: 1; border-bottom: 2px solid var(--brand); padding-bottom: 1px; color: var(--brand); text-align: right; }
.radar-zeit { flex: none; font-variant-numeric: tabular-nums; min-width: 66px; text-align: right; }
.radar-legende { margin: 10px 0 4px; }
.radar-leg-balken { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.radar-leg-balken > span { flex: 1; }
.radar-leg-skala { position: relative; height: 14px; font-size: 10.5px; color: var(--muted); }
.radar-leg-skala > span { position: absolute; top: 1px; transform: translateX(-50%); }
.radar-leg-skala > span.is-erste { left: 0; transform: none; }
.radar-leg-einheit { right: 0; left: auto !important; transform: none !important; }
.radar-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.radar-km { display: flex; gap: 6px; }
.radar-km-chip {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; cursor: pointer;
}
.radar-km-chip.is-active { border-color: var(--brand); color: var(--brand); font-weight: 600; }
@media (max-width: 700px) {
  .wt-ort { margin-left: 0; width: 100%; }
  /* Am Handy zaehlt die Karte mehr als die Feinheiten darunter. */
  .radar-legende { display: none; }
}

/* Accordion (zusammenklappbarer Formular-Abschnitt, natives <details>) */
.acc { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; background: var(--bg); }
.acc > .acc-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; user-select: none;
}
.acc > .acc-head::-webkit-details-marker { display: none; }
.acc .acc-chev { display: inline-flex; flex: none; }
.acc .acc-chev svg { width: 20px; height: 20px; fill: var(--muted); transition: transform 0.15s ease; }
.acc[open] .acc-chev svg { transform: rotate(180deg); }
.acc .acc-badge {
  margin-left: auto; flex: none; font-weight: 500; font-size: 12px; color: var(--muted);
  padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap;
}
.acc .acc-body { padding: 2px 14px 14px; }
.acc .acc-body .field:last-child { margin-bottom: 0; }
@media (min-width: 860px) {
  /* Gleiches zweispaltiges Raster wie im Formular selbst */
  .acc .acc-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: start; }
  .acc .acc-body > * { grid-column: 1 / -1; min-width: 0; }
  .acc .acc-body > .field { grid-column: auto; }
  .acc .acc-body > .field:has(textarea) { grid-column: 1 / -1; }
  .acc .acc-body > .grid2 { display: contents; }
  .acc .acc-body > .check-row { grid-column: auto; }
  .acc .acc-body > .btn { justify-self: start; }
}

/* Mehrere Lieferadressen im Adress-Dialog (je Adresse eine Karte) */
.addr-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.addr-card { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--card-bg, transparent); }
.addr-card .addr-x { position: absolute; top: 8px; right: 8px; }
.addr-card .field:last-child { margin-bottom: 0; }

/* Aktionsbuttons rechts in der Auftragszeile (Bearbeiten/Stornieren/Export) */
.order-row-acts { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; flex: none; }
.order-row-acts .fdrop-btn { padding: 6px 8px; }
.order-row-acts .fdrop-label { display: none; }
/* Platzhalter für fehlende Aktions-Icons: gleiche Breite wie .icon-act (38px),
   damit die Aktionsspalte konstant bleibt und die Beträge untereinander stehen. */
.icon-act-ph { display: inline-block; width: 38px; height: 38px; flex: none; }
/* Ausgabe-Band oben im Auftrag: zentriert, dicht unter der Titel-Linie, mit
   eigener Trennlinie darunter (grenzt die Ausgabe vom Inhaltsbereich ab). Das
   negative margin-top zieht das Band nah an die Titel-Linie (reduziert das
   sheet-body-Padding); padding-bottom = gleicher Abstand zur Linie darunter. */
.order-form-actions {
  justify-content: center;
  margin: -8px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.order-form-versand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
@media (min-width: 860px) { .order-form-actions { margin-top: -12px; } }
/* Schreibgeschützte Auftragsansicht (ab versendet): identisch, aber nicht interaktiv.
   Nur die Versand-Belege oben und der Schließen-Button bleiben klickbar. */
.order-form-ro { pointer-events: none; }
.order-form-ro .order-form-actions, .order-form-ro .sheet-actions { pointer-events: auto; }
.order-form-ro .pos-x, .order-form-ro .pos-handle { visibility: hidden; }
/* Rechnungslink links vom Status-Chip (Status „fakturiert") */
.invoice-link { padding: 4px 9px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; }
.invoice-link svg { width: 15px; height: 15px; fill: currentColor; }

/* Ausgabe-Protokoll (gemailt/gedruckt/geteilt) in der Rechnungsliste */
.inv-flags { display: inline-flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.inv-flag { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.inv-flag svg { width: 13px; height: 13px; fill: currentColor; }
.order-status-row .inv-flags { margin: 0 0 0 4px; align-self: center; }

/* ---------- Modul Faktura ---------- */
.invoice-addr {
  white-space: pre-line; font-size: 14px; margin: 8px 0 4px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
}

/* Bereichs-Umschalter (Belege: Angebote | Aufträge | Rechnungen; Artikel:
   Alle | Leistungen | …) — steht als .seg-bar ÜBER der Karte (VINORUM-Muster). */
.seg-bar { margin-bottom: 14px; }

.fk-seg {
  display: inline-flex; flex: none; max-width: 100%;
  /* Passen die Bereiche (Angebote|Aufträge|Rechnungen …) am Handy nicht in die
     Breite, scrollt der Umschalter IN SICH — die Seite verschiebt sich nicht. */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.fk-seg::-webkit-scrollbar { display: none; }
.fk-seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 9px 14px; font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer; color: var(--muted); white-space: nowrap;
}
.fk-seg-btn + .fk-seg-btn { border-left: 1px solid var(--border); }
.fk-seg-btn.is-active { background: var(--brand); color: #fff; }
/* Typ-Icon im Segment (Artikel-Liste) */
.seg-ic { display: inline-flex; }
.seg-ic svg { width: 16px; height: 16px; fill: currentColor; }

/* Rechnungen vorbereiten: Kundengruppen mit abwählbaren Aufträgen */
.fk-vb-gruppe {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px;
}
.fk-vb-kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.fk-vb-kopf-rechts { display: inline-flex; align-items: center; gap: 12px; }
.fk-vb-row {
  display: flex; gap: 10px; align-items: center; padding: 8px 0;
}
.fk-vb-row + .fk-vb-row { border-top: 1px solid var(--border); }
.fk-vb-check { display: flex; flex: none; padding: 4px; cursor: pointer; }
.fk-vb-check input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.fk-vb-row .tenant-main.is-clickable { cursor: pointer; }
.fk-vb-row .tenant-main.is-clickable:hover .tenant-name { color: var(--brand); }

/* Kunden-Dialog: Nachlass je Artikelkategorie */
.cd-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cd-row select {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.cd-row input {
  width: 90px; flex: none; padding: 10px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}

/* Gruppen-Preisliste im Kategorie-Dialog + Anzeige im Artikel */
.preisliste-block { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 8px; }
.preis-runden-an { margin: 12px 0 8px; }
.preis-runden-felder .field { min-width: 0; }
.gruppenpreise-host { margin: 2px 0 4px; }
.gp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.gp-grp { color: var(--muted); }
.gp-val { font-weight: 600; white-space: nowrap; }

/* ---------- Modul Vinothek (Tresen-/Barverkauf am Tablet) ---------- */
/* minmax(0, …) + min-width: 0 sind PFLICHT: Grid-Kinder haben implizit
   min-width auto — die Kategorie-Chips-Zeile (overflow-x) würde die Spalte
   sonst breiter als den Viewport drücken (iPad: Seite läuft seitlich über). */
.vino-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.vino-main, .vino-cart { min-width: 0; }
@media (max-width: 1100px) { .vino-wrap { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 900px) { .vino-wrap { grid-template-columns: minmax(0, 1fr); } }
.vino-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.vino-head h2 { margin: 0; }
.vino-kunde-zeile { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 260px; }
.vino-kunde { flex: 1; min-width: 180px; }
.vino-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.vino-such { flex: 1; min-width: 160px; padding: 10px 12px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); }
.vino-kats { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.vino-kats::-webkit-scrollbar { display: none; }
.vino-kat { padding: 7px 13px; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); cursor: pointer; white-space: nowrap; }
.vino-kat.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
/* Artikel-Kacheln: große Touch-Ziele, Foto lazy als Hintergrund */
.vino-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.vino-art { display: flex; flex-direction: column; gap: 6px; padding: 10px; font: inherit; text-align: left; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); cursor: pointer; }
.vino-art:active { transform: scale(0.97); }
.vino-art-foto { display: block; height: 86px; border-radius: 8px; background: color-mix(in srgb, var(--brand) 6%, transparent) center/contain no-repeat; }
.vino-art-name { font-size: 13px; font-weight: 600; line-height: 1.3; min-height: 2.6em; overflow: hidden; }
.vino-art-preis { font-size: 15px; font-weight: 700; color: var(--brand); }
/* Warenkorb rechts */
.vino-cart h3 { margin: 0 0 10px; }
.vino-cart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vino-cart-head h3 { margin: 0 0 6px; }
.vino-einmal-btn { font-size: 12.5px; padding: 6px 10px; flex: none; }
/* Einmalpositionen (ohne Artikelstamm) kursiv – Muster Textzeilen im Auftrag */
.vino-row.is-einmal .vino-row-name { font-style: italic; }
.vino-cart-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.vino-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.vino-row-name { font-size: 13.5px; flex: 1; min-width: 0; }
.vino-row-rabatt { color: var(--brand); font-weight: 600; white-space: nowrap; }
.vino-row-acts { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.vino-step { width: 34px; height: 34px; padding: 0; font: inherit; font-size: 18px; font-weight: 700; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer; }
.vino-menge { min-width: 22px; text-align: center; font-weight: 700; }
.vino-preis { width: 72px; padding: 7px 8px; font: inherit; font-size: 13.5px; text-align: right; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.vino-sum-haupt { display: flex; justify-content: space-between; font-size: 19px; font-weight: 700; margin-top: 6px; }
.vino-sum-mwst { text-align: right; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.vino-zahlart button { padding: 10px 14px; font: inherit; border: none; background: transparent; color: var(--text); cursor: pointer; }
.vino-zahlart button.is-active { background: var(--brand); color: #fff; font-weight: 600; }
.vino-zahlart button:disabled { opacity: 0.45; cursor: not-allowed; }
.vino-checkout { width: 100%; padding: 14px; font-size: 16px; margin-top: 8px; }
/* Erfolgsdialog */
.vino-erfolg-summe { font-size: 30px; font-weight: 700; margin: 4px 0 2px; }
.vino-erfolg-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
/* Selbsterfassung: GESPERRTER Vollbild-Übergabemodus (liegt über allem inkl. Nav) */
.vino-kiosk { position: fixed; inset: 0; z-index: 300; background: var(--bg); overflow-y: auto; padding: 18px; }
.vino-kiosk-top { display: flex; justify-content: flex-end; max-width: 620px; margin: 0 auto; }
.vino-kiosk-abbruch { font-size: 12.5px; padding: 7px 12px; color: var(--muted); }
.vino-kiosk-inner { max-width: 620px; margin: 6px auto 40px; }
.vino-kiosk-inner h2 { margin: 8px 0 4px; }
.vino-kiosk-inner input, .vino-kiosk-inner select { padding: 13px 14px; font-size: 16px; }
.vino-kiosk-fertig { width: 100%; padding: 15px; font-size: 17px; margin-top: 12px; }
.vino-kiosk-danke { text-align: center; padding-top: 12vh; }
.vino-kiosk-danke .btn { margin-top: 26px; padding: 14px 22px; }
.btn.is-holding { background: color-mix(in srgb, var(--brand) 22%, transparent); transform: scale(0.97); }
/* Halten-Buttons auf iOS: langes Drücken darf weder Scrollen (pointercancel)
   noch Textauswahl/Lupe/Kontextmenü auslösen — sonst löst der Button nie aus. */
.vino-hold {
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* SumUp-Kartenzahlung: Warte-Dialog (Solo, Cloud-Reader-API) */
.vino-sumup-wait { text-align: center; }
.vino-sumup-betrag { font-size: 30px; font-weight: 700; margin: 6px 0 2px; }
.vino-sumup-status { color: var(--muted); margin: 8px 0 4px; }
.vino-sumup-puls {
  width: 16px; height: 16px; border-radius: 50%; margin: 10px auto 2px;
  background: var(--brand); animation: vino-sumup-puls 1.2s ease-in-out infinite;
}
@keyframes vino-sumup-puls {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 1; }
}
.vino-sumup-wait .sheet-actions { justify-content: center; }
/* Modus-Segment der Vinothek-Einstellungsseite */
.vino-modus-seg { display: inline-flex; flex-wrap: wrap; }
/* Ausgegraute Aktions-Buttons im Format-Raster (z. B. E-Mail ohne Adresse) */
.exp-fmt-act:disabled { opacity: 0.35; cursor: not-allowed; }
.versand-group .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- FLEXX³ Shipping (Versandlabels + Tracking) ---------- */
/* Status-Flag (Liste + Auftragsformular): LKW-Icon + Status, farbcodiert */
.sv-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted); margin-top: 2px;
}
.sv-flag svg { width: 15px; height: 15px; fill: currentColor; }
.sv-flag.is-gruen { color: #1e7e34; font-weight: 600; }
.sv-flag.is-blau { color: #1565c0; }
.sv-flag.is-rot { color: #b02a37; font-weight: 600; }
[data-theme='dark'] .sv-flag.is-gruen { color: #57bb6f; }
[data-theme='dark'] .sv-flag.is-blau { color: #64a9e8; }
[data-theme='dark'] .sv-flag.is-rot { color: #e57373; }
/* Block im Auftragsformular */
.sv-block { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; align-items: center; }
.sv-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sv-zeile .sv-flag { font-size: 13px; margin: 0; }
.sv-carrier { font-size: 13px; color: var(--muted); }
.sv-tracking { font-size: 13px; font-family: ui-monospace, monospace; color: var(--brand); text-decoration: underline; }
/* Label-Dialog: Maße-Zeile + Preis */
.sv-masse { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.sv-masse input { width: 76px; text-align: right; }
.sv-masse span { color: var(--muted); }
.sv-quote-zeile { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sv-preis { font-size: 17px; font-weight: 700; color: var(--brand); }
/* Freischalt-Status auf der Winzer-Einstellungsseite */
.sv-aktiv { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.sv-aktiv.is-gruen { color: #1e7e34; font-weight: 600; }
[data-theme='dark'] .sv-aktiv.is-gruen { color: #57bb6f; }
.sv-aktiv svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
/* Einstellungen: Paketvorlagen-Zeilen (auch Preisregeln des Operators) */
.sv-pakete { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; align-items: flex-start; }
.sv-pak-row { display: flex; gap: 6px; align-items: center; width: 100%; }
.sv-pak-row input[type='text'] { flex: 1; min-width: 120px; }
.sv-pak-row input[type='number'] { width: 76px; text-align: right; }

/* Einstellungen: Mailvorlagen — Vorschau mit Beispieldaten (1.0.43) */
.mailv-preview {
  margin: 0; padding: 10px 12px; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: 13px; line-height: 1.55;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}

/* ---------- Modul Schriftverkehr (Briefe mit Vorlagen) ---------- */
.brief-text { font-family: inherit; line-height: 1.55; resize: vertical; }
.brief-ph { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.brief-ph-chip { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; padding: 3px 9px; }
.brief-actions { align-items: center; }
.brief-akt-gruppe { display: inline-flex; gap: 6px; margin-right: auto; }
.brief-akt-gruppe .btn { padding: 8px 10px; }
.brief-akt-gruppe .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Modul Kellerbuch ---------- */
.kb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.kb-tile {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.kb-tile.is-clickable { cursor: pointer; }
.kb-tile.is-clickable:hover { border-color: var(--brand); }
.kb-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kb-nummer { font-weight: 700; font-size: 16px; }
.kb-inhalt { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.kb-wein { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-liter { flex: none; font-variant-numeric: tabular-nums; }
.kb-leer { color: var(--muted); font-style: italic; }
.kb-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.kb-bar-fill { height: 100%; background: var(--brand); border-radius: 3px; }
.kb-bar-fill.is-over { background: #b3261e; }
.kb-vol { font-size: 11.5px; color: var(--muted); text-align: right; }

.kb-menge { flex: none; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-menge.is-plus { color: #1b7f3b; }
.kb-menge.is-minus { color: #b3261e; }
.tenant-item.kb-storniert .tenant-name, .tenant-item.kb-storniert .tenant-sub { text-decoration: line-through; opacity: 0.65; }

.kb-storno-row { display: flex; gap: 8px; margin: 10px 0 4px; }
.kb-storno-row input {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}

/* Stammdaten-Gliederung nach Modulen (Einstellungen -> Stammdaten -> Modul) */
.stamm-modul {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand); margin: 18px 2px 6px;
}
.stamm-modul:first-of-type { margin-top: 6px; }

/* ---------- Einstellungen: Kachel-Navigation (Muster CURENA) ---------- */
.stamm-page-title { margin: 2px 2px 14px; display: flex; align-items: center; gap: 6px; }
.stamm-page-title svg { width: 22px; height: 22px; fill: currentColor; }

/* Zurück-Leiste */
.set-backbar {
  margin-bottom: 12px; display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px;
}
.set-backbar svg { width: 18px; height: 18px; fill: currentColor; }

/* Navigations-Kachel (Card-Button) */
.set-tile {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: inherit; cursor: pointer; color: var(--text);
}
.set-tile-ico { flex: 0 0 auto; display: inline-flex; }
.set-tile-ico svg { width: 24px; height: 24px; fill: var(--brand); }
.set-tile-txt { flex: 1; min-width: 0; }
.set-tile-label { display: block; font-weight: 700; }
.set-tile-desc { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.set-tile-chev { flex: 0 0 auto; display: inline-flex; }
.set-tile-chev svg { width: 20px; height: 20px; fill: var(--muted); }

/* ---------- Einstellungs-Startseite: EINE Seite, Rubriken + Raster (1.0.47) ----------
   Die frühere Zwischenebene je Modul ist entfallen — alle Bereiche stehen
   sichtbar nebeneinander. Kopf: Überschrift links, Suchfeld rechts. */
.set-home-kopf {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px;
}
.set-home-kopf .stamm-page-title { margin: 0; flex: 1 1 auto; }
.set-home-suche { flex: 0 1 320px; min-width: 200px; }
/* Rubrik-Überschrift mit Haarlinie — dieselbe Sprache wie die Spaltenköpfe des
   CRM-Baums: klein, versal, ruhig. */
.set-gruppe {
  display: flex; align-items: center; gap: 10px; margin: 18px 2px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
}
.set-gruppe::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.set-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px;
}
.set-grid > * { min-width: 0; }
/* Rasterkachel: Zeichen oben links in getönter Fläche, darunter Name und —
   auf zwei Zeilen begrenzt — wofür der Bereich da ist. Gleiche Höhe je Reihe. */
.set-tile.is-klein {
  align-items: flex-start; gap: 11px; padding: 14px; margin: 0; height: 100%;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.set-tile.is-klein:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  box-shadow: 0 2px 10px rgba(11, 19, 32, 0.10);
}
.set-tile.is-klein .set-tile-ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.set-tile.is-klein .set-tile-ico svg { width: 21px; height: 21px; }
.set-tile.is-klein .set-tile-label { font-size: 14.5px; }
.set-tile.is-klein .set-tile-desc {
  font-size: 12.5px; line-height: 1.35;
  /* Zwei Zeilen, dann Auslassung: sonst wären die Kacheln einer Reihe
     unterschiedlich hoch und das Raster zappelig. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Stammdaten: filterbare Listenseite ---------- */
.stamm-list-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 4px 2px 10px;
}
.stamm-lh-title { display: inline-flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 700; }
.stamm-lh-title svg { width: 22px; height: 22px; fill: currentColor; }
.stamm-lh-title > span:last-child { white-space: nowrap; }
.stamm-lh-hint { margin: 0 2px 10px; }
.stamm-search {
  flex: 1 1 160px; min-width: 120px; display: flex; align-items: center; gap: 7px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 0 10px; height: 38px;
}
.stamm-search:focus-within { border-color: var(--brand); }
.stamm-search svg { width: 17px; height: 17px; fill: var(--muted); flex: 0 0 auto; }
.stamm-search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font: inherit; font-size: 14px; color: var(--text); padding: 0;
}
/* „Neu"-Button rechts, auch bei Umbruch neben dem Suchfeld */
.stamm-list-head .btn.primary { flex: 0 0 auto; }

.stamm-list { display: flex; flex-direction: column; }
.stamm-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--border);
}
.stamm-row:first-child { border-top: none; }
.stamm-row.is-inactive { opacity: 0.6; }
/* Die ganze ZEILE öffnet das Bearbeiten (VINORUM-Muster, 1.0.48) — das war
   bisher nur über den kleinen Bleistift möglich. Die Fläche hebt sich beim
   Überfahren leicht ab, damit man sieht, dass sie ein Ziel ist.
   `.liste-flach` ist die flache Listenoptik der Stammdaten-Karten (keine
   Kacheln, nur Trennlinien) — sie gilt auch für die Mandantenzeilen. */
.stamm-row.is-clickable { cursor: pointer; }
.stamm-row.is-clickable:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.liste-flach { gap: 0; }
.liste-flach .tenant-item {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--border); padding: 8px 4px; margin: 0;
}
.liste-flach .tenant-item:last-child { border-bottom: 0; }
/* Warnzeile (Fakturalauf-Vorschau: Fakturatermin liegt Jahre zurück). */
.stamm-row.is-warn {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-left: 3px solid var(--danger); padding-left: 8px;
}
.stamm-main { flex: 1; min-width: 0; }
.stamm-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.stamm-badge { flex: 0 0 auto; }
.stamm-sub { font-size: 13px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aktions-Icons je Zeile (Bearbeiten / Löschen) */
.icon-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icon-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--muted);
}
.icon-act svg { width: 20px; height: 20px; fill: currentColor; }
.icon-act:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.icon-act.is-del.is-armed { border-color: #b3261e; background: color-mix(in srgb, #b3261e 12%, transparent); }
.icon-act.is-del.is-armed svg { fill: #b3261e; }
.icon-act:disabled { opacity: 0.5; cursor: default; }

/* ---------- Stammdaten: Kategorien-Pflege ---------- */
.cat-add { display: flex; gap: 8px; margin-bottom: 12px; }
.cat-add input {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.cat-add input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.cat-row { display: flex; gap: 8px; align-items: center; padding: 5px 0; }
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cat-row input {
  flex: 1; min-width: 0; padding: 8px 10px; font: inherit;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}

/* Vorschau des Kundenlogos im Bearbeiten-Dialog */
.logo-preview {
  display: block; max-height: 56px; max-width: 100%; width: auto;
  margin-bottom: 10px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}

/* ---------- Modul Plantafel (FLEXX³ Rental) ---------- */
/* Tagesbasiertes Belegungsbrett (Muster NAMI): horizontal scrollbares Grid mit
   sticky Objektspalte; Buchungen als Parallelogramme mit diagonalen Enden. */
.rt-wrap { margin-top: 4px; }
.rt-scroll {
  overflow-x: auto; overflow-y: hidden; cursor: grab;
  border: 1px solid var(--border); border-radius: 12px; user-select: none;
}
.rt-scroll:active { cursor: grabbing; }
.rt-grid { position: relative; }

.rt-row { display: flex; }
.rt-row + .rt-row .rt-track, .rt-row + .rt-row .rt-rescell { border-top: 1px solid var(--border); }

/* Objektspalte links – bleibt beim Scrollen stehen */
.rt-rescell {
  position: sticky; left: 0; z-index: 5; flex: none; width: 160px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; font-size: 13.5px; background: var(--card);
  border-right: 1px solid var(--border);
  overflow: hidden; white-space: nowrap;
}
.rt-rescell.is-clickable { cursor: pointer; }
.rt-rescell.is-clickable:hover { color: var(--brand); }
.rt-objname { overflow: hidden; text-overflow: ellipsis; }
.rt-geo { display: inline-flex; flex: none; }
.rt-geo svg { width: 14px; height: 14px; fill: var(--muted); }

/* Gruppenzeile */
.rt-group .rt-groupcell {
  font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: color-mix(in srgb, var(--text) 4%, var(--card));
  height: 30px;
}
.rt-grouptrack { flex: none; height: 30px; background: color-mix(in srgb, var(--text) 4%, transparent); }

/* Kopfzeile mit den Tagen */
.rt-head { position: sticky; top: 0; z-index: 6; }
.rt-corner, .rt-track-head { height: 46px; background: var(--card); }
.rt-track { position: relative; flex: none; height: 46px; }
.rt-dayhead {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10.5px; color: var(--muted); border-left: 1px solid var(--border);
  overflow: hidden;
}
.rt-dayhead .rt-tag { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.1; }
.rt-dayhead.is-we { background: color-mix(in srgb, var(--text) 5%, transparent); }
.rt-dayhead.is-heute { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.rt-dayhead.is-heute .rt-tag { color: var(--brand); }
.rt-monat {
  position: absolute; top: 1px; left: 3px; font-size: 9px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand); white-space: nowrap;
}

/* Objekt-Zeilen: Spur mit Tageslinien (per Inline-Gradient) + Balken */
.rt-row:not(.rt-head):not(.rt-group) .rt-track { height: 44px; background-color: var(--bg); }
.rt-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brand); opacity: 0.55; z-index: 1; pointer-events: none; }

/* Buchungsbalken: Parallelogramm (Anreise mittags -> Abreise mittags) */
.rt-bar {
  position: absolute; top: 7px; bottom: 7px; z-index: 2;
  display: flex; align-items: center; overflow: hidden;
  background: var(--brand); color: #fff; cursor: pointer;
  font-size: 12px; white-space: nowrap;
}
.rt-bar:hover { filter: brightness(1.15); }
.rt-bar-label { overflow: hidden; text-overflow: ellipsis; padding-right: 4px; }
/* Sperrzeit: schraffiert (45°-Streifen wie NAMI) */
.rt-bar.is-sperre {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--text) 38%, transparent) 0, color-mix(in srgb, var(--text) 38%, transparent) 6px,
    color-mix(in srgb, var(--text) 18%, transparent) 6px, color-mix(in srgb, var(--text) 18%, transparent) 12px);
  color: var(--text);
}

/* ---------- Modul Protect: Wetterstationen + Risikoampel ---------- */
/* ---------- Modul Climate: Sensor-Monitoring ---------- */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.cl-werte { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 12px 0; }
.cl-werte-detail { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.cl-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--muted) 8%, transparent); }
.cl-tile b { font-size: 16px; font-weight: 700; }
.cl-tile-lbl { font-size: 11px; color: var(--muted); }
/* Vorhersage: „Morgen"-Zeile auf der Karte + 7-Tage-Streifen im Detail (DWD).
   Die Sensorkacheln füllen den variablen Raum, damit die „Morgen"-Zeile bei
   allen Karten auf gleicher Linie (unten, vor dem Fuß) steht. */
.pt-card > .cl-werte { flex: 1 1 auto; }
.cl-morgen { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-height: 0; }
.cl-morgen:not(:empty) { padding: 8px 10px; border-radius: 10px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cl-morgen-sym { font-size: 18px; line-height: 1; }
.cl-forecast { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 8px; }
.cl-fc-tag { display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px; border-radius: 12px; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.cl-fc-name { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cl-fc-sym { font-size: 24px; line-height: 1.2; }
.cl-fc-temp { font-size: 13px; }
.cl-fc-temp b { font-size: 14px; }
.cl-fc-sub { font-size: 11px; color: var(--muted); }

/* Sensor-Auswahl im Detail-Chart */
.cl-sensor-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cl-sensor-seg button {
  border: 1px solid var(--border); background: none; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.cl-sensor-seg button.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Protect-Prognose: 7-Tage-Ampel-Ausblick aus der DWD-Vorhersage je Karte.
   Die Gründe-Liste füllt den variablen Raum, damit die Prognose bei allen
   Karten (Grid stretcht sie gleich hoch) auf gleicher Höhe unten steht. */
.pt-card > .pt-gruende { flex: 1 1 auto; margin-bottom: 0; }
.pt-prognose { margin: 4px 0; }
.pt-prognose:empty { display: none; }
.pt-prognose-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pt-fc-quelle { display: block; margin-top: 5px; font-size: 10.5px; color: var(--muted); }
.pt-fc-streifen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 5px; }
.pt-fc-tag { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pt-fc-wt { font-size: 10.5px; color: var(--muted); }
.pt-fc-dot { width: 100%; height: 9px; border-radius: 4px; background: var(--muted); }
.pt-fc-dot.is-niedrig   { background: #1b7f3b; }
.pt-fc-dot.is-mittel    { background: #b58a00; }
.pt-fc-dot.is-hoch      { background: #cf5b13; }
.pt-fc-dot.is-sehr-hoch { background: #b3261e; }
.pt-fc-dot.is-unbekannt { background: var(--muted); }

/* Krankheitsmodell-Umschalter (Peronospora/Oidium/Botrytis) über dem Raster */
.pt-modell-seg { display: flex; flex-wrap: wrap; margin: 4px 0 14px; }
.pt-modell-seg button { flex: 1 1 auto; white-space: nowrap; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }

/* Hinweis „Daten werden aktualisiert …" (Snapshot sichtbar, Hintergrund lädt frisch) */
.pt-refresh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pt-refresh-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--brand);
  animation: ptPuls 1.1s ease-in-out infinite;
}
@keyframes ptPuls { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.pt-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.pt-card.is-inactive { opacity: 0.6; flex-direction: row; align-items: center; justify-content: space-between; }
.pt-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pt-card-head strong { font-size: 15.5px; }

/* Ampel-Chip */
.pt-ampel {
  flex: none; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; color: #fff;
}
.pt-ampel.is-unbekannt { background: var(--muted); }
.pt-ampel.is-niedrig   { background: #1b7f3b; }
.pt-ampel.is-mittel    { background: #b58a00; }
.pt-ampel.is-hoch      { background: #cf5b13; }
.pt-ampel.is-sehr-hoch { background: #b3261e; }

/* Aktuelle Messwerte */
.pt-werte { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pt-werte span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--muted); }
.pt-werte b { font-size: 14.5px; color: var(--text); font-variant-numeric: tabular-nums; }

.pt-gruende { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.pt-gruende li { margin: 2px 0; }
.pt-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.pt-meta { font-size: 11.5px; color: var(--muted); }

/* Detail: Chart + Tageswerte */
.pt-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pt-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 16px 0 6px; }
.pt-chart { overflow-x: auto; }
.pt-svg { width: 100%; min-width: 560px; height: auto; display: block; }

/* Interaktives Chart (Pan/Zoom im Protect-Detail): kein Scrollen, Ziehen greift */
.pt-chart.is-interaktiv { overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.pt-chart.is-interaktiv.is-dragging { cursor: grabbing; }
.pt-chart.is-interaktiv .pt-svg { min-width: 0; pointer-events: none; }
.pt-chart-ctrl { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pt-chart-btns { margin-left: auto; display: flex; gap: 6px; }
.pt-chart-btn { padding: 3px 12px; font-weight: 700; min-width: 34px; }
.pt-chart-lade { color: var(--brand); }
.pt-grid-l { stroke: var(--border); stroke-width: 1; }
.pt-ax { font-size: 10px; fill: var(--muted); }
.pt-line-temp { fill: none; stroke: var(--brand); stroke-width: 1.8; }
.pt-line-rh { fill: none; stroke: #4a7fb5; stroke-width: 1.2; stroke-dasharray: 4 3; opacity: 0.85; }
.pt-rain { fill: #4a7fb5; opacity: 0.65; }
.pt-wet { fill: #1b7f3b; opacity: 0.8; }
.pt-tagrow {
  display: flex; gap: 16px; padding: 5px 0; font-size: 13.5px;
  border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.pt-tagrow:last-child { border-bottom: none; }
.pt-tag-datum { font-weight: 600; min-width: 78px; }

/* ---------- Modul KI-Assistent: Chat ---------- */
.ki-card {
  display: flex; flex-direction: column;
  height: calc(100dvh - 200px); min-height: 380px;
}
.ki-thread {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 6px 2px; margin-bottom: 10px;
}

/* Sprechblasen */
.ki-msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ki-msg.is-user {
  align-self: flex-end; background: var(--brand); color: #fff;
  border-bottom-right-radius: 4px; white-space: pre-wrap;
}
.ki-msg.is-assistant {
  align-self: flex-start; background: color-mix(in srgb, var(--text) 6%, transparent);
  border-bottom-left-radius: 4px;
}
.ki-md p { margin: 0 0 8px; }
.ki-md p:last-child { margin-bottom: 0; }
.ki-md ul, .ki-md ol { margin: 0 0 8px; padding-left: 20px; }
.ki-md li { margin: 2px 0; }
.ki-md code {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  padding: 1px 5px; border-radius: 5px;
}

/* Transparenz-Zeile: welche Daten wurden nachgeschlagen */
.ki-used { align-self: flex-start; font-size: 11.5px; color: var(--muted); margin: -4px 0 2px 6px; }
.ki-errline { color: #b3261e; }

/* Tipp-Indikator (drei springende Punkte) */
.ki-typing { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.ki-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: ki-blink 1.2s infinite;
}
.ki-typing span:nth-child(2) { animation-delay: 0.2s; }
.ki-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ki-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; transform: translateY(-2px); } }

/* Begrüßung / Einrichtung + Beispielfragen */
.ki-setup { margin: auto; text-align: center; max-width: 460px; padding: 20px 10px; }
.ki-setup-ic svg { width: 44px; height: 44px; fill: var(--brand); opacity: 0.8; }
.ki-setup p { margin: 10px 0 6px; }
.ki-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.ki-chip {
  padding: 8px 13px; font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text);
}
.ki-chip:hover { border-color: var(--brand); color: var(--brand); }

/* Eingabezeile */
.ki-inputrow { display: flex; gap: 8px; align-items: flex-end; }
.ki-input {
  flex: 1; min-width: 0; resize: none; padding: 11px 14px; font: inherit;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--text);
  max-height: 140px;
}
.ki-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.ki-send { flex: none; padding: 11px 13px; border-radius: 14px; }
.ki-send svg { width: 19px; height: 19px; fill: currentColor; display: block; }

/* Undo-Leiste unten (Muster NAMI: 8 s sichtbar, Aktion rückgängig machbar) */
.undo-bar {
  position: fixed; left: 50%; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 90;
  transform: translate(-50%, 16px); opacity: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--anthracite, #232323); color: #fff;
  box-shadow: var(--shadow); font-size: 14px; max-width: min(92vw, 480px);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.undo-bar.show { transform: translate(-50%, 0); opacity: 1; }
.undo-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-bar .btn { background: transparent; color: var(--accent, #D8BF92); border-color: color-mix(in srgb, #fff 25%, transparent); }

/* ADCON-Stationsauswahl im Wetterstations-Dialog: Dropdown + „Stationen laden" */
.adcon-pick-row { display: flex; gap: 8px; align-items: stretch; }
.adcon-pick-row .adcon-pick { flex: 1 1 auto; min-width: 0; }
.adcon-pick-row .adcon-pick .ssel { width: 100%; }
.adcon-pick-row > .btn { flex: 0 0 auto; white-space: nowrap; }
.quelle-group[hidden] { display: none; }

/* Open-Meteo: Karten-Punktauswahl im Wetterstations-Dialog (Leaflet) */
.om-map { height: 320px; width: 100%; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line, #d8d2c4); background: #e9e5db; z-index: 0; }
@media (max-width: 560px) { .om-map { height: 260px; } }
.om-koord-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.92em; color: var(--muted, #6b6455); }
.om-koord-ic svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.om-koord { font-variant-numeric: tabular-nums; }
/* Punkt-Marker (divIcon) */
.om-pin span { display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand, #6D2330); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
/* Leaflet-Bedienelemente über dem Karteninhalt, aber unter dem Dialogrand */
.om-map .leaflet-top, .om-map .leaflet-bottom { z-index: 400; }

/* Dashboard-Kachel mit externem Link (Shop → neues Fenster) */
.module-ext { display: inline-flex; vertical-align: middle; margin-left: 5px; opacity: 0.6; }
.module-ext svg { width: 15px; height: 15px; fill: currentColor; }
/* „Shop öffnen"-Link im Kopf der Shop-Auswertungen */
.shop-url-link { display: inline-flex; align-items: center; gap: 4px; color: var(--brand, #6D2330); text-decoration: none; white-space: nowrap; }
.shop-url-link svg { width: 15px; height: 15px; fill: currentColor; }
.shop-url-link:hover { text-decoration: underline; }

/* ---- Onlinebuchung (FLEXX³ Booking) ---- */
/* Objekt-Dialog: Onlinebuchung-Accordion */
.rt-online-acc { border:1px solid var(--line,#e4ded2); border-radius:10px; padding:6px 12px; margin:10px 0; }
.rt-online-acc > summary { cursor:pointer; font-weight:600; padding:6px 0; list-style:none; }
.rt-online-acc > summary::-webkit-details-marker { display:none; }
.rt-online-acc > summary::before { content:'▸'; margin-right:6px; color:var(--muted,#888); }
.rt-online-acc[open] > summary::before { content:'▾'; }
.rt-foto-box { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.rt-foto-prev { max-height:90px; max-width:150px; border-radius:8px; border:1px solid var(--line,#e4ded2); object-fit:cover; }
/* Saison-Editor */
.rt-season-row { border:1px solid var(--line,#e4ded2); border-radius:10px; padding:10px 12px; margin:8px 0; background:color-mix(in srgb, var(--card,#fff) 70%, transparent); }
.rt-wd-row { display:flex; flex-wrap:wrap; gap:8px; }
.rt-wd { display:inline-flex; align-items:center; gap:3px; font-size:.85em; }
.rt-wd input { margin:0; }
.rt-season-del { margin-top:6px; }
.rt-season-acts { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.rt-embed { font-family:monospace; font-size:.8em; }
/* Anfrage-Banner im Buchungsdialog */
.rt-anfrage-banner { background:#fff6e6; border:1px solid #e8c98a; border-radius:9px; padding:10px 12px; margin-bottom:10px; }
.rt-anfrage-banner strong { color:#8a5a00; }
.rt-anfrage-msg { font-style:italic; margin-top:4px; }
/* Plantafel-Balken: Anfrage (gestrichelt/orange), Online-Herkunft */
.rt-bar.is-anfrage { background:repeating-linear-gradient(45deg,#f4c67a,#f4c67a 7px,#eab659 7px,#eab659 14px); color:#5a3d00; border:1px dashed #b9821f; }
.rt-bar.is-anfrage .rt-bar-label { color:#4a3300; }

/* App-Einstellungen: Farbdesign-Dropdown + Stations-Unterüberschrift */
.app-select {
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); cursor: pointer;
}
/* „Darstellung"-Zeile: Farbdesign-Dropdown + Hell/Dunkel nebeneinander */
.darstellung-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* Kompakte Stationsliste direkt unter „Kachel Wetter" (eingerückt) */
.dash-station-list { padding: 2px 0 8px 16px; margin-top: -6px; }
.dash-station-list:empty { display: none; }
.dash-station-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 2px 0 4px; }
.dash-station-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; cursor: pointer; color: var(--text); }
.dash-station-row input { margin: 0; accent-color: var(--brand); }

/* ---------- FLEXX³ OFFICE: Adressen + Artikel & Leistungen ---------- */
/* Inaktive Zeilen (Artikel/Objekte) gedimmt */
.tenant-item.is-inactive { opacity: 0.55; }
/* Chips rechts in der Adresszeile (Objekt-Anzahl, §13b) */
.row-chips { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; align-self: center; flex: none; }
/* In der CRM-Trefferliste stehen die Chips VOR der Rufnummer und brauchen
   deshalb eine feste Breite - sonst ruecken Nummer, Marker und "+" je nach
   Chip-Laenge hin und her (Betreiber 27.09.2026). */
@media (min-width: 721px) {
  .tenant-item > .row-chips { width: 96px; }
}
/* CRM-TREFFERLISTE KOMPAKT (Betreiber 30.09.2026, 1.2.27): flachere Zeilen,
   kleineres Symbol, kleinere Chips und Knöpfe. Die Chips bleiben
   ÜBEREINANDER in ihrer festen Spalte — nebeneinander brauchten sie so viel
   Breite, dass das „…"-Menü in eine zweite Zeile rutschte (beim Bau gemessen:
   98 px statt flacher). */
.crm-treffer { gap: 5px; }
.crm-treffer > .tenant-item { padding: 5px 10px; gap: 10px; border-radius: 10px; }
.crm-treffer .module-icon { width: 30px; height: 30px; border-radius: 8px; }
.crm-treffer .module-icon svg { width: 17px; height: 17px; }
.crm-treffer .tenant-sub { margin-top: 0; font-size: 12.5px; }
.crm-treffer .row-chips { gap: 2px; }
.crm-treffer .row-chips .chip { padding-top: 0; padding-bottom: 0; font-size: 11px; line-height: 16px; }
.crm-treffer .icon-act, .crm-treffer .more-menu > .icon-act { width: 30px; height: 30px; }
.chip-13b { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); border: none; font-weight: 700; }

/* Kunden-Chip kundenbezogener Artikel (Muster chip-13b, mit Personen-Icon) —
   in Listenzeilen (row-chips) UND in searchSelect-Auswahllisten (ssel-item). */
.chip-kunde {
  display: inline-flex; align-items: center; gap: 4px; max-width: 170px;
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand);
  border: none;
}
.chip-kunde .chip-ic { display: inline-flex; flex: none; }
.chip-kunde .chip-ic svg { width: 12px; height: 12px; fill: currentColor; }
.chip-kunde .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssel-item .chip-kunde { flex: none; }

/* Typ-Badge (Artikel): farbige Kurzkennung je Artikel-Typ (Fallback ohne Icon) */
.typ-badge {
  flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; padding: 3px 6px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted);
}
.typ-material  { background: color-mix(in srgb, #2e74b5 16%, transparent); color: #2e74b5; }
.typ-lohn      { background: color-mix(in srgb, #1b7f3b 16%, transparent); color: #1b7f3b; }
.typ-maschine  { background: color-mix(in srgb, #8a5a00 18%, transparent); color: #8a5a00; }
.typ-fahrt     { background: color-mix(in srgb, #6a5312 18%, transparent); color: #6a5312; }
.typ-fremd     { background: color-mix(in srgb, #7b3fa0 16%, transparent); color: #7b3fa0; }
.typ-pauschale { background: color-mix(in srgb, #0f766e 16%, transparent); color: #0f766e; }
.typ-leistung  { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
[data-theme='dark'] .typ-material { color: #7db3e8; }
[data-theme='dark'] .typ-lohn { color: #6ecb8d; }
[data-theme='dark'] .typ-maschine { color: #d8a94a; }
[data-theme='dark'] .typ-fahrt { color: #d8bf92; }
[data-theme='dark'] .typ-fremd { color: #c08fe0; }
[data-theme='dark'] .typ-pauschale { color: #5ecec5; }

/* Rundes Typ-ICON statt Text-Kürzel (typIcon in app.js): Farbe/Fläche kommen
   aus den .typ-<typ>-Klassen oben; is-klein = kompakte Variante vor
   Positions-/Komponentennamen (nur Farbe, ohne Fläche). */
.typ-ic {
  flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
}
.typ-ic svg { width: 18px; height: 18px; fill: currentColor; }
.typ-ic.is-klein { width: 20px; height: 20px; background: none; }
.typ-ic.is-klein svg { width: 15px; height: 15px; }

/* Typ-Auswahl im Artikel-Dialog: Icon läuft neben dem Select mit */
.typ-select-wrap { display: flex; align-items: center; gap: 8px; }
.typ-select-wrap select { flex: 1; min-width: 0; }

/* VK-Anzeige rechts in der Artikelzeile */
.art-vk { flex: none; align-self: center; text-align: right; white-space: nowrap; }
.art-vk-preis { font-weight: 700; }
.art-vk-einheit { color: var(--muted); font-size: 12px; margin-left: 2px; }

/* Stücklisten-Editor (Leistung) */
.komp-rows { margin: 6px 0; }
.komp-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}
.komp-row:first-child { border-top: none; }
.komp-name { flex: 1 1 200px; min-width: 150px; display: inline-flex; align-items: center; gap: 6px; }
.komp-sub { color: var(--muted); font-size: 12px; }
.komp-cell { display: inline-flex; align-items: center; gap: 4px; }
.komp-preis { font-size: 13px; color: var(--muted); min-width: 92px; justify-content: flex-end; }
.komp-menge {
  width: 84px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit;
}
.komp-menge:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.komp-einheit { color: var(--muted); font-size: 12.5px; }
.komp-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.komp-add .ssel { flex: 1 1 220px; min-width: 180px; }

/* Live-Kalkulationsbox (Leistung) */
.kalk-box {
  margin: 10px 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.kalk-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 14px; }
.kalk-row.is-strong { font-weight: 700; }

/* Objekte-Liste im Adress-Dialog */

/* ---------- FLEXX³ OFFICE: Belege (Angebote/Aufträge/Rechnungen) ---------- */
/* Status-Chips: offen/entwurf grau, angenommen/gestellt cyan, bezahlt grün,
   storniert/abgelehnt rot, teilbezahlt gelb */
.chip-st-grau, .chip-grau { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.chip-st-cyan { background: color-mix(in srgb, #00d4e0 22%, transparent); color: #067a86; }
.chip-st-gruen { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.chip-st-rot { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.chip-st-gelb, .chip-gelb { background: color-mix(in srgb, #e0a800 22%, transparent); color: #8a6400; }
[data-theme='dark'] .chip-st-cyan { color: #6fe3ec; }
[data-theme='dark'] .chip-st-gelb, [data-theme='dark'] .chip-gelb { color: #e8c568; }

/* Beleg-Typ-Icon (belegTypIcon in app.js): rundes Badge statt AN/AR/…-Kürzel;
   Farbe/Fläche kommen aus den .typ-bg-<typ>-Klassen darunter. Höhe bewusst
   kompakt (32px < zwei Textzeilen der Belegzeile), damit die Zeilenhöhe
   gegenüber den alten Kürzel-Badges stabil bleibt. */
.beleg-typ-ic {
  flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
}
.beleg-typ-ic svg { width: 19px; height: 19px; }
.beleg-typ-ic.is-klein { width: 22px; height: 22px; }
.beleg-typ-ic.is-klein svg { width: 15px; height: 15px; }
/* Mini-Typ-Icon in den Vorgangsleisten-Chips */
.vg-chip-ic { flex: none; display: inline-flex; }
.vg-chip-ic svg { width: 15px; height: 15px; }

/* Farbklassen der Beleg-Typen (Badge-Fläche + Icon-Farbe) */
.typ-bg-angebot   { background: color-mix(in srgb, #2e74b5 16%, transparent); color: #2e74b5; }
.typ-bg-auftrag   { background: color-mix(in srgb, #1b7f3b 16%, transparent); color: #1b7f3b; }
.typ-bg-rechnung, .typ-bg-abschlagsrechnung, .typ-bg-schlussrechnung
                  { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.typ-bg-gutschrift { background: color-mix(in srgb, #7b3fa0 16%, transparent); color: #7b3fa0; }
[data-theme='dark'] .typ-bg-angebot { color: #7db3e8; }
[data-theme='dark'] .typ-bg-auftrag { color: #6ecb8d; }
[data-theme='dark'] .typ-bg-gutschrift { color: #c08fe0; }

/* Rechte Spalte der Belegzeile: Chips + Summen + Export-Menü */
.beleg-chips { gap: 5px; }
.beleg-chip-line { display: inline-flex; gap: 5px; }
.beleg-sums { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.beleg-sum-netto { color: var(--muted); font-size: 12px; }
.beleg-sum-brutto { font-weight: 700; font-size: 13.5px; }
.beleg-sum-offen { color: var(--danger); font-weight: 700; font-size: 12.5px; }
.beleg-row-export { flex: none; align-self: center; }

/* Aktionen-Leiste oben im Beleg-Dialog (Annehmen, Rechnung erstellen, PDF …) */
.beleg-aktionen {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.beleg-status-wahl { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Vorgangsfaden: Anfrage → Aufmaß → Angebot → Auftrag ----
   Kompakte Chip-Kette oben in den Dialogen; scrollt auf schmalen Screens
   IN SICH horizontal, statt das Sheet zu sprengen. */
.vg-leiste {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 5%, transparent);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.vg-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--text); font: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap;
}
button.vg-chip:hover { border-color: var(--brand); }
.vg-chip.is-current { background: var(--brand); border-color: var(--brand); color: #fff; cursor: default; }
.vg-chip-typ { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.vg-chip-text { font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.vg-sep { flex: none; display: inline-flex; color: var(--muted); }
.vg-sep svg { width: 16px; height: 16px; fill: currentColor; }

/* Positions-Ansicht (read-only) : geordnete Zeilen mit OZ und Zeilensumme.
   display:block neutralisiert das ältere .pos-row-Grid weiter oben (VINORUM-
   Erbe), das für die flexx3-Zeilen mit .pos-line nicht gilt. */
.pos-editor { margin: 6px 0; }
.pos-row { display: block; padding: 6px 0; border-top: 1px solid var(--border); }
.pos-row:first-child { border-top: none; }
.pos-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pos-line2 { margin: 4px 0 0 34px; }
.pos-oz { flex: none; width: 28px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pos-name { flex: 1 1 180px; min-width: 140px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.pos-num, .pos-einheit, .pos-satz {
  padding: 6px 6px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px;
}
.pos-menge { width: 68px; }
.pos-einheit { width: 58px; }
.pos-ep { width: 84px; }
.pos-rabatt { width: 64px; }
.pos-satz { width: 66px; }
.pos-besch { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--muted); font: inherit; font-size: 12.5px; }
.pos-summe { flex: none; min-width: 78px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-acts { display: inline-flex; gap: 2px; flex: none; margin-left: auto; }
.pos-move svg { transition: transform 0.15s; }
.pos-move.is-up svg { transform: rotate(180deg); }
.pos-toggles { display: inline-flex; gap: 8px; flex: none; }
.pos-toggle { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.pos-toggle input { margin: 0; accent-color: var(--brand); }
/* Titel-Zeilen optisch abgesetzt (Band in Markenfarbe) mit Zwischensumme */
.pos-row.is-titel {
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  border-radius: 8px; padding: 6px 8px; border-top: none; margin-top: 6px;
}
.pos-row.is-titel .pos-name, .pos-row.is-titel .pos-vname { font-weight: 700; }
.pos-zwlabel { flex: none; font-size: 11.5px; color: var(--muted); margin-left: auto; }
.pos-row.is-titel .pos-summe { font-weight: 700; }
.pos-row.is-text .pos-name, .pos-row.is-text .pos-vname { color: var(--muted); font-style: italic; }
/* Alternativ-/Bedarfspositionen (ohne Summenwirkung) gedimmt + kursiv */
.pos-row.is-neben .pos-name, .pos-row.is-neben .pos-vname,
.pos-row.is-neben .pos-summe, .pos-row.is-neben .pos-vzahlen { color: var(--muted); font-style: italic; }
/* Read-only-Ansicht der Positionen */
.pos-editor.is-view .pos-vname { flex: 1 1 180px; min-width: 140px; display: flex; flex-direction: column; }
/* Zusatzinfo in der Beleg-Ansicht: mehrzeilige Alt-Daten behalten ihre Umbrüche
   (das PDF druckt sie ebenfalls zeilenweise — belegpdf.js) */
.pos-vbesch { color: var(--muted); font-size: 12px; font-style: normal; white-space: pre-wrap; }
.pos-vzahlen { flex: none; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pos-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.pos-add .btn { padding: 7px 11px; font-size: 13px; }
.pos-add-artikel { flex: 1 1 220px; min-width: 180px; }
.pos-add-artikel .ssel { width: 100%; }

/* ---------- Beleg-Positionseditor: kompakte Grid-Zeilen (VINORUM-Prinzip) ----------
   Eine Position = EINE Zeile im festen Raster mit Spaltenkopf; Beschreibung und
   Steuersatz liegen im aufklappbaren Detailbereich unter der Zeile. */
.bp-editor { margin: 6px 0; }
.bp-row {
  display: grid;
  grid-template-columns: 24px 40px minmax(0, 1fr) 70px 70px 90px 60px 92px 118px;
  grid-template-areas: 'handle oz name menge einheit ep rabatt gp acts';
  gap: 6px; align-items: center; padding: 4px 0;
}
/* Titel: Eingabe läuft bis zur Zwischensumme; Text: bis ganz rechts */
.bp-row.is-titel   { grid-template-areas: 'handle oz name name name name name gp acts'; }
.bp-row.is-textrow { grid-template-areas: 'handle oz name name name name name name acts'; }
/* Drag-Handle: Pointer-Events (Maus + Touch); touch-action:none verhindert das
   Mitscrollen der Seite; Padding/negative Margin = 40px-Touch-Ziel ohne Layoutbreite */
.bp-handle {
  grid-area: handle; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  padding: 11px; margin: -11px;
}
.bp-handle:active { cursor: grabbing; }
.bp-handle svg { width: 18px; height: 18px; fill: currentColor; pointer-events: none; }
.bp-head .bp-handle { cursor: default; touch-action: auto; }
.bp-oz { grid-area: oz; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.bp-name-cell { grid-area: name; display: flex; align-items: center; gap: 6px; min-width: 0; }
.bp-name { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.bp-in {
  width: 100%; min-width: 0; padding: 6px 6px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px;
}
.bp-name:focus, .bp-in:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.bp-num { text-align: right; }
.bp-menge { grid-area: menge; }
.bp-einheit { grid-area: einheit; }
.bp-ep { grid-area: ep; }
.bp-rabatt { grid-area: rabatt; }
.bp-gp { grid-area: gp; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.bp-acts { grid-area: acts; display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.bp-acts .icon-act { width: 26px; height: 26px; flex: none; border-radius: 7px; }
.bp-acts .icon-act svg { width: 16px; height: 16px; }
/* Spaltenkopf */
.bp-head {
  padding: 0 0 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--muted);
}
.bp-head span { overflow: hidden; white-space: nowrap; }
.bp-head .bp-menge, .bp-head .bp-ep, .bp-head .bp-rabatt { text-align: right; }
/* Zeilen-Container: Trennlinien + Drag-Zustände */
.bp-item { border-top: 1px solid var(--border); }
.bp-item.is-t { border-top: none; margin-top: 6px; }
/* Drag-Zustände gelten auch für die Abo-Positionszeilen (gleiche Mechanik) */
.bp-item.is-dragging, .abo-pos-row.is-dragging { opacity: 0.5; }
.bp-item.is-drop-before, .abo-pos-row.is-drop-before { box-shadow: 0 -2px 0 0 var(--accent); }
.bp-item.is-drop-after, .abo-pos-row.is-drop-after { box-shadow: 0 2px 0 0 var(--accent); }
/* Titel-Zeilen: Band schwach in Markenfarbe, fett, Zwischensumme rechts */
.bp-row.is-titel { background: color-mix(in srgb, var(--brand) 8%, transparent); border-radius: 8px; padding-right: 4px; }
.bp-row.is-titel .bp-name { font-weight: 700; }
/* Text-Zeilen gedimmt/kursiv */
.bp-row.is-textrow .bp-name { color: var(--muted); font-style: italic; }
/* Alternativ-/Bedarfspositionen (ohne Summenwirkung) gedimmt + kursiv */
.bp-row.is-neben .bp-name, .bp-row.is-neben .bp-gp { color: var(--muted); font-style: italic; }
/* "nur eigene" in der Filterzeile der Historie: neben den Dropdowns, ohne
   den Abstand einer Formularzeile. */

/* ---------- Gerahmte Feldgruppe (Vorbild SISPRO-IIS) ----------
   Eine lange Maske wird erst durch Rahmen lesbar: Jeder Block traegt seinen
   Namen auf der Linie, wie im Altsystem - nur mit runden Ecken und ruhiger. */
.feldgruppe {
  position: relative;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 11px 2px; margin: 0 0 13px; min-width: 0;
}
/* Trennlinie INNERHALB einer Feldgruppe (1.1.61): setzt ab, was die Software
   selbst festhaelt, von dem, was jemand eintraegt - z. B. "Letzter Kontakt"
   unter den Vertriebsangaben.
   NICHT ZUSAETZLICH ABGESCHWAECHT (nachgemessen 28.09.2026): Mit opacity .6
   war sie im Dunkelmodus praktisch unsichtbar - eine Trennlinie, die man
   suchen muss, trennt nichts. */
.gruppe-trenner {
  border: 0; border-top: 1px solid var(--border);
  margin: 4px 0 9px;
}
/* Unterueberschrift INNERHALB einer Feldgruppe (1.1.62): benennt einen zweiten
   Abschnitt, ohne einen zweiten Rahmen aufzumachen - z. B. die Provisionssaetze
   unter dem Vertreter-Verlauf. Optik wie die <legend>, nur ohne Rahmenbezug. */
.gruppe-untertitel {
  margin: 0 0 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* Aktion OBEN RECHTS AUF dem Rahmen - gegenueber der Ueberschrift, klein wie
   ein Chip. Der Karten-Hintergrund schneidet die Linie frei, genau wie es die
   <legend> auf der linken Seite tut. */
.gruppe-aktion {
  /* ACHTUNG: In einem <fieldset> bezieht sich `absolute` auf die PADDING-Box -
     die beginnt UNTER der Legende. Der negative Wert hebt den Knopf auf die
     Rahmenlinie, auf dieselbe Hoehe wie die Ueberschrift (nachgemessen). */
  position: absolute; top: -18px; right: 10px;
  background: var(--card); padding: 0 4px; line-height: 1;
}
.gruppe-aktion .btn {
  padding: 2px 10px; font-size: 12px; border-radius: 999px; gap: 5px;
  min-height: 0;
}
.gruppe-aktion .btn svg { width: 14px; height: 14px; }
/* Ein SCHALTER statt eines Knopfes auf der Rahmenlinie (abweichende
   Anschrift): Kaestchen plus ein Wort, in derselben Groesse wie der Chip. */
.gruppe-schalter {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.gruppe-schalter input { margin: 0; }
.gruppe-schalter:hover { color: var(--brand); }

/* Feld mit einem Aktionsknopf rechts daneben (Internetadresse -> Seite
   oeffnen). Der Knopf ist AUS, solange das Feld leer ist. */
.feld-mit-act { display: flex; align-items: center; gap: 6px; }
.feld-mit-act > input { flex: 1 1 auto; min-width: 0; }
.feld-act { flex: none; }
.feld-act:disabled { opacity: 0.35; cursor: default; }
.feld-act:disabled:hover { background: none; color: var(--muted); }

/* Reiter "Sonstiges" -> Frame "Informationen": wer und wann. Reine Anzeige,
   deshalb Beschriftung und Wert nebeneinander statt untereinander. */
.info-liste { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.info-zeile { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.info-label { color: var(--muted); font-weight: 600; }
.info-wert { color: var(--text); }
@media (max-width: 560px) { .info-zeile { grid-template-columns: 1fr; gap: 1px; } }

/* Vertreter-VERLAUF: ein vorgemerkter Wechsel (Stichtag in der Zukunft) ist
   noch nicht wirksam - gestrichelt statt durchgezogen. */
.kontakt-zeile.is-kuenftig { border-style: dashed; opacity: 0.8; }

/* Anschrift: Land, PLZ (schmal), Ort in einer Reihe. */
.anschrift-zeile {
  /* Land braucht nur Platz fuer "Deutschland", die PLZ fuenf Zeichen — der
     Rest gehoert dem Ort (Betreiber 27.09.2026). */
  display: grid; grid-template-columns: 150px 88px minmax(0, 1fr);
  gap: 0 10px;
}
@media (max-width: 560px) {
  /* Schmal: Land ueber die ganze Breite, darunter PLZ (schmal) und Ort.
     Die Reihenfolge der Spalten ist 92px ZUERST - sonst landete die PLZ im
     breiten Feld und der Ort im schmalen. */
  .anschrift-zeile { grid-template-columns: 92px minmax(0, 1fr); }
  .anschrift-zeile > .field:first-child { grid-column: 1 / -1; }
}
.feldgruppe > legend {
  padding: 0 7px; margin-left: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
/* (i) hinter der Gruppen-Ueberschrift: erklaert einmal, stoert nie wieder. */
.feldgruppe > legend { display: inline-flex; align-items: center; gap: 5px; }
.gruppe-info {
  display: inline-flex; border: 0; background: none; padding: 0; margin: 0;
  cursor: help; color: var(--muted); opacity: 0.75;
}
.gruppe-info svg { width: 15px; height: 15px; fill: currentColor; }
.gruppe-info:hover { color: var(--brand); opacity: 1; }
/* Dasselbe (i) an einer FELD-Beschriftung (feld({ text, info })) — die Label
   sind kleiner als eine Legende, also auch das Icon. */
/* Dasselbe (i) an einer KARTEN-Ueberschrift (titelInfo): Die Ueberschrift ist
   gross und in Versalien gesetzt - das Zeichen bekommt etwas mehr Luft und
   sitzt auf der Grundlinie des Textes. */
.stage-title > .titel-info { margin-left: 7px; vertical-align: 1px; }
.stage-title > .titel-info svg { width: 16px; height: 16px; }
.field > label > .gruppe-info { margin-left: 4px; vertical-align: -2px; }
.field > label > .gruppe-info svg { width: 13px; height: 13px; }

/* ---------- Ansprechpartner-Liste (Muster IIS-Tabelle) ---------- */
.kontakt-liste { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.kontakt-zeile {
  display: flex; align-items: center; gap: 10px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.kontakt-zeile.is-clickable { cursor: pointer; }
/* Inaktives Objekt, gekuendigter Dauerauftrag: blasser, aber lesbar. */
.kontakt-zeile.is-inactive { opacity: 0.6; }
.kontakt-zeile.is-clickable:hover { border-color: var(--brand); }
.kontakt-ic { flex: none; display: inline-flex; color: var(--muted); }
.kontakt-ic svg { width: 19px; height: 19px; fill: currentColor; }
.kontakt-main { flex: 1; min-width: 0; }
.kontakt-name { font-weight: 600; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kontakt-funktion {
  font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand);
  white-space: nowrap;
}
.kontakt-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontakt-acts { display: flex; align-items: center; gap: 4px; flex: none; }
/* Serienbrieftypen (S0): Chips im Dialog, kleine Marken in der Liste. */
.sbt-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
/* Im Ansprechpartner stehen die Chips UNTER dem Feld (1.2.34). */
.sbt-feld > .sbt-chips { margin: 6px 0 0; }
.sbt-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 2px 4px 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand);
}
.sbt-x {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 999px;
}
.sbt-x:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.sbt-marke.is-ok { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.sbt-marke.is-gesperrt { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
/* Newsletter (S4): Editor mit Vorschau, Fortschritt. */
.nl-edit-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1100px) { .nl-edit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nl-vorschau { width: 100%; height: 560px; border: 1px solid var(--border); border-radius: 10px; background: #eef0f3; }
.nl-vorschau-kopf { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.nl-test { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.nl-test input { flex: 1; }
.nl-warnung { color: var(--danger); }
.nlv-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.nlv-balken { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; margin: 6px 0 10px; }
.nlv-balken span { display: block; height: 100%; background: var(--brand); transition: width .4s; }
.nlv-balken.nlv-balken-klein { height: 5px; margin: 6px 0 2px; max-width: 360px; }
/* Newsletter-Bausteine (S5). */
.nlb-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.nlb-karte { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--card); }
.nlb-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.nlb-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.nlb-akts { display: flex; gap: 2px; }
.nlb-akts .is-hoch svg { transform: rotate(180deg); }
.nlb-rt-leiste { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; align-items: center; }
.nlb-rt-btn { min-width: 30px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; padding: 0 7px; }
.nlb-rt-btn.is-b { font-weight: 800; } .nlb-rt-btn.is-i { font-style: italic; } .nlb-rt-btn.is-u { text-decoration: underline; }
.nlb-rt-farbe { width: 34px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; }
.nlb-rich { min-height: 110px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg); color: var(--text); line-height: 1.5; }
.nlb-rich:focus { outline: 2px solid color-mix(in srgb, var(--brand) 40%, transparent); }
.nlb-rich p { margin: 0 0 8px; }
.nlb-bildwahl { display: flex; gap: 6px; flex-wrap: wrap; }
.nlb-gest { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.nlb-gest-feld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.nlb-gest-feld input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; }
@media (min-width: 1100px) { .nl-vorschau-spalte { position: sticky; top: 0; align-self: start; } }
/* Abmeldeseite (S4, abmelden.html): eine Karte, mittig, ohne App drumherum. */
.abmelden-view { display: flex; justify-content: center; padding: 48px 16px; }
.abmelden-karte { max-width: 520px; width: 100%; }
/* Serienbrief (S3): Vorschau des ersten Briefs. */
/* „Neue E-Mail" (1.2.36): Vorschau wie im Mailprogramm — Betreff, darunter der Text. */
.email-vorschau { margin-top: 0; }
.email-vorschau-betreff { font-weight: 700; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.email-vorschau-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; }
/* Neue E-Mail mit Newsletter als Vorlage (1.2.40): Betreff + Einwilligung über dem Newsletter. */
.email-nl-info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.email-nl-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.email-nl-aktion { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.email-nl-info .check-row { font-size: 13px; }
.sb-vorschau { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; font-size: 13px; }
.sb-vorschau-kopf { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.sb-vorschau pre { font: inherit; white-space: pre-wrap; margin: 4px 0 8px; }
.sb-vorschau-anschrift { color: var(--muted); }
/* Zielgruppen (S2). */
.zg { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 980px) { .zg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.zg-beds { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.zg-bed { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.zg-bed-name { flex: 1 1 100%; font-weight: 600; font-size: 13px; }
.zg-feld { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.zg-zahl { width: 90px; }
.zg-zeile { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
.zg-typ { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: none; color: var(--text);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.zg-typ.is-an { background: color-mix(in srgb, var(--brand) 16%, transparent); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.zg-typ-n { font-size: 11px; color: var(--muted); }
.zg-ergebnis { margin-top: 6px; }
/* S6: Befunde der Empfänger-Prüfung, Reichweite, Zustellbarkeit */
.nlp-befund { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 3px; flex-wrap: wrap; }
.nlp-befund svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.nlp-befund.is-rot { color: var(--danger); }
.nlp-befund.is-gelb { color: #8a6400; }
[data-theme='dark'] .nlp-befund.is-gelb { color: #e8c568; }
.nlp-befund.is-hinweis { color: var(--muted); }
.nlp-ergebnis:empty { display: none; }
.nlr-kachel { cursor: default; }
.nlr-kachel:hover { border-color: var(--border); }
.nlr-url { font-size: 11.5px; word-break: break-all; }
.nlz-ergebnis { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.nlz-zeile { display: flex; gap: 8px; align-items: flex-start; }
.nlz-zeile > span svg { width: 18px; height: 18px; fill: currentColor; }
.nlz-zeile.is-ok > span { color: var(--ok); }
.nlz-zeile.is-warn > span { color: var(--danger); }
.nlz-zeile .hint { word-break: break-all; }
.nlz-fazit { margin: 0; }
.nlz-fazit.is-bereit b { color: var(--ok); }
.nlz-fazit.is-fehlt b, .nlz-fazit.is-teilweise b { color: var(--danger); }
.zg-zahl-gross { font-size: 15px; margin-bottom: 4px; }
.zg-zahl-gross b { font-size: 24px; }
.zg-liste { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; margin-top: 8px; }
/* Newsletter (S1): Stand, Knöpfe, Nachweis. */
.nl-chips { margin-bottom: 8px; flex-wrap: wrap; }
.nl-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-nachweis { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.nl-eintrag { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.nl-eintrag-kopf { font-size: 13px; }
.nl-eintrag-bem { font-size: 12.5px; margin-top: 4px; white-space: pre-wrap; }
/* Adressakte (1.2.28): der Newsletter-Block als GESTRICHELTER Rahmen mit
   Überschrift und der einen Aktion oben rechts auf der Linie. */
.nl-adresse { margin: 2px 0 12px; }
.feldgruppe.nl-rahmen { border-style: dashed; margin-bottom: 0; padding-bottom: 8px; }
.nl-rahmen > legend { display: inline-flex; align-items: center; gap: 5px; }
.nl-rahmen > legend .chip { text-transform: none; letter-spacing: 0; font-size: 11px; line-height: 16px; padding-top: 0; padding-bottom: 0; }
.nl-link.nl-link-legende { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; padding: 0; gap: 3px;
  color: var(--brand); }
.nl-link.nl-link-legende svg { width: 14px; height: 14px; }
.nl-rahmen > legend { gap: 4px; }
.nl-rahmen:not(:has(.nl-rahmen-fuss)) { padding-bottom: 2px; }
.nl-rahmen-ic { display: inline-flex; }
.nl-rahmen-ic svg { width: 14px; height: 14px; fill: currentColor; }
.nl-rahmen .nl-chips { margin: 2px 0 6px; align-items: flex-start; flex-direction: row; }
.nl-rahmen-fuss { display: flex; flex-wrap: wrap; gap: 14px; }
.nl-link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0;
  font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.nl-link svg { width: 15px; height: 15px; fill: currentColor; }
.nl-link:hover { color: var(--brand); }
.nl-adresse-titel { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.nl-adresse-titel svg { width: 16px; height: 16px; fill: currentColor; }
.sbt-marke {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600;
  padding: 0 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted);
}
/* Dialog: zwei Spalten wie im Altsystem, auf schmalen Schirmen untereinander. */
.kontakt-grid { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 860px) { .kontakt-grid { grid-template-columns: 1fr 1fr; } }
.kontakt-post { display: block; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }

.bp-badge {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); white-space: nowrap;
}
/* "o. B." und "intern" unterscheiden sich von Alternativ/Bedarf: sie gelten in
   JEDEM Beleg, nicht nur im Angebot - deshalb eine eigene Farbe. */
.bp-badge-ohne   { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.bp-badge-intern { background: color-mix(in srgb, var(--muted) 28%, transparent); }
/* Artikelnummer im Detail-Aufklapper: nur Anzeige, kein Eingabefeld. */
.bp-artnr { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Gesperrte Felder einer nicht berechneten Zeile: sichtbar, aber ruhig. */
.bp-in:disabled { opacity: 0.45; cursor: default; }
/* Icon-Toggles Alternativ/Bedarf: aktiv mit Akzentfarbe gefüllt */
.bp-tgl.is-on, .bp-tgl.is-on:hover { background: var(--accent); border-color: var(--accent); color: #0B1320; }
/* Detail-Chevron dreht sich im offenen Zustand */
.bp-det svg { transition: transform 0.15s; }
.bp-det.is-open svg { transform: rotate(180deg); }
/* Zusatzinfo (Beschreibung): eigene, IMMER sichtbare Zeile unter der Position —
   volle Breite ab der Bezeichnungs-Spalte, gedimmt wie in der Beleg-Ansicht */
.bp-beschrow { margin: 0 0 5px 70px; }
.bp-beschreibung {
  display: block; width: 100%; min-width: 0; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--muted); font: inherit; font-size: 12.5px;
  line-height: 1.35; resize: vertical;
}
.bp-beschreibung:focus { outline: 2px solid var(--brand); outline-offset: -1px; color: var(--text); }
/* Aufklappbarer Detailbereich (Steuersatz) */
.bp-details { display: none; margin: 0 0 6px 70px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.bp-details.is-open { display: block; }
 /* HINTEREINANDER, nicht gestapelt (Betreiber 26.09.2026): Positionsart,
   Steuersatz und Artikelnummer stehen nebeneinander - der Aufklapper bleibt
   damit eine flache Zeile statt einer dritten Etage. */
.bp-details-grid {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-start;
}
.bp-details-grid > .field { flex: none; min-width: 0; }
/* Die Positionsart-Schalter so gross wie die Flags in der Positionszeile
   (.bp-tgl / .icon-act, 38 px) - nicht groesser. */
.bp-details-grid .typ-toggle button { padding: 0; width: 38px; height: 38px; }
.bp-details-grid .typ-toggle svg { width: 20px; height: 20px; }
.bp-details textarea { width: 100%; resize: vertical; }
/* Mobil (<860px): Bezeichnung volle Breite (mit Icons rechts), Zahlen kompakt
   in EINER Reihe darunter — kontrollierter Umbruch statt Feld-Stapel */
@media (max-width: 859px) {
  .bp-row.bp-head { display: none; }
  .bp-row {
    grid-template-columns: 24px 30px repeat(4, minmax(0, 1fr)) auto;
    grid-template-areas:
      'handle oz name name name name acts'
      '. menge menge einheit ep rabatt gp';
    row-gap: 4px;
  }
  .bp-row.is-titel   { grid-template-areas: 'handle oz name name name gp acts'; }
  .bp-row.is-textrow { grid-template-areas: 'handle oz name name name name acts'; }
  .bp-in { padding: 6px 4px; font-size: 13px; }
  .bp-acts .icon-act { width: 25px; height: 25px; }
  .bp-details, .bp-beschrow { margin-left: 24px; }
  .bp-details-grid { grid-template-columns: 1fr; }
}

/* Live-Summenbox + §13b-Pflichthinweis */
.beleg-sumbox { margin-top: 12px; }
.beleg-13b-hinweis { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.beleg-viewinfo .beleg-view-chips { display: flex; gap: 6px; margin-bottom: 6px; }
.beleg-absetzungen { margin-top: 8px; background: transparent; }
.beleg-zahlungen { margin-top: 4px; }
.beleg-offen { font-size: 14px; }
.beleg-offen.is-offen { color: var(--danger); font-weight: 700; }
/* Abschlag-Eingaben im Rechnung-erstellen-Dialog */
.beleg-abschlag { margin: 6px 0; }

/* ============================================================
   FLEXX³ HANDWERK — Anfragen, Aufmaß/KI, Planung, Monteur (mobil)
   ============================================================ */

/* ---- Konfidenz-Chips (KI-Leitplanken: erkannt/wahrscheinlich/unklar) ---- */
.konf-chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap; vertical-align: middle;
  cursor: help;
}
.konf-erkannt { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.konf-wahrscheinlich { background: color-mix(in srgb, #e0a800 24%, transparent); color: #8a6400; }
.konf-unklar { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
[data-theme='dark'] .konf-wahrscheinlich { color: #e8c568; }

/* ---- Hinweis-/Warn-Boxen (gelb) + Nachtrag-Box (orange, Revenue-Guard) ---- */
.warn-box {
  margin: 10px 0; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, #e0a800 14%, transparent);
  border-left: 4px solid #e0a800; font-size: 14px;
}
.warn-box strong { display: block; margin-bottom: 4px; }
.warn-box p { margin: 4px 0 0; white-space: pre-wrap; }
.warn-box ul { margin: 4px 0 0 18px; padding: 0; }
.nachtrag-box {
  margin: 10px 0; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, #ff7a00 15%, transparent);
  border-left: 4px solid #ff7a00; font-size: 14px;
}
.nachtrag-box strong { display: block; margin-bottom: 4px; color: #b35600; }
[data-theme='dark'] .nachtrag-box strong { color: #ffb066; }
.nachtrag-box ul { margin: 4px 0 0 18px; padding: 0; }

/* ---- Mikrofon-Button (Web-Speech-Diktat) ---- */
.mic-btn.is-recording {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: var(--danger); color: var(--danger);
  animation: micpuls 1.2s ease-in-out infinite;
}
@keyframes micpuls { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 18%, transparent); } }

/* ---- KI-Besichtigung: Fotos, Räume, Vorschläge, offene Fragen ---- */
.ki-text { width: 100%; }
.ki-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ki-foto, .me-foto-wrap { position: relative; display: inline-block; }
.ki-foto img, .me-foto {
  width: 84px; height: 84px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); display: block;
}
.ki-foto-x {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: var(--danger); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.ki-foto-x svg { width: 14px; height: 14px; fill: #fff; }
.ki-raum { margin: 10px 0; }
.ki-raum-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ki-raum-name { font-weight: 700; }
.ki-zeile {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-top: 1px solid var(--border); cursor: pointer; font-size: 14px;
}
.ki-zeile-text { flex: 1; min-width: 0; }
.ki-zeile-masse { display: block; font-size: 12px; color: var(--muted); }
.ki-hinweise { margin: 6px 0 0 18px; padding: 0; font-size: 12.5px; color: var(--muted); }
.ki-liste ul { margin: 4px 0 0 18px; padding: 0; font-size: 14px; }
.ki-liste li { margin: 3px 0; }
.ki-pos-hinweis { color: var(--muted); font-size: 12.5px; }
.ki-vorschlag { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.ki-vorschlag-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ki-vorschlag p { margin: 0; white-space: pre-wrap; font-size: 14px; }

/* ---- Aufmaß-Editor: Räume + Zeilen-Raster + Gesamtfläche ---- */
.am-flaeche { font-weight: 700; white-space: nowrap; }
.am-raum { margin: 10px 0; }
.am-raum-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.am-raum-name { flex: 1; min-width: 120px; font-weight: 700; }
.am-raum-sum { font-size: 13px; color: var(--muted); white-space: nowrap; }
.am-raum-flaeche { font-weight: 700; color: var(--text); }
.am-zeilen { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.am-zeile {
  display: grid; align-items: center; gap: 6px;
  grid-template-columns: minmax(120px, 2fr) 76px 76px 56px 40px 90px 30px;
}
.am-zeile-kopf { font-size: 11px; color: var(--muted); font-weight: 600; }
.am-zeile input[type='number'] { width: 100%; }
.am-zeile .am-fl { text-align: right; font-size: 13px; white-space: nowrap; }
.am-zeile.is-abzug .am-fl { color: var(--danger); }
.am-abzug { display: flex; justify-content: center; }
.am-gesamt { margin-top: 10px; }
.am-gesamt-wert { font-weight: 800; }
.am-angebot-raum { padding: 8px 0; border-top: 1px solid var(--border); }
.am-angebot-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.am-angebot-name { font-weight: 600; min-width: 0; }
.am-angebot-fl { margin-left: 8px; color: var(--muted); font-weight: 400; font-size: 13px; }
.am-angebot-zeilen { display: flex; flex-direction: column; gap: 6px; }
.am-angebot-zeile { display: flex; align-items: center; gap: 8px; }
.am-angebot-zeile .ssel { flex: 1; min-width: 160px; }
.am-angebot-menge { flex: none; width: 96px; }
@media (max-width: 640px) {
  .am-zeile { grid-template-columns: 1fr 62px 62px 44px 32px 70px 26px; }
  .am-zeile-kopf { display: none; }
}

/* ---- Einsatzplanung: PLANTAFEL (Muster CURENA .ptf-*, FLEXX³-Variablen) ---- */
.plan-nav { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.plan-woche-label { font-weight: 600; color: var(--muted); font-size: 14px; }
.plan-kopf-akt { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.plan-tafel-host { margin-top: 8px; }
.ptf-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); max-width: 100%; }
.ptf-wrap {
  overflow-x: auto; overscroll-behavior-x: contain; cursor: grab;
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.ptf-wrap.is-panning { cursor: grabbing; }
.ptf { display: flex; flex-direction: column; width: max-content; min-width: 100%; }
.ptf-row { display: flex; align-items: stretch; border-top: 1px solid var(--border); }
.ptf-headrow { border-top: none; }
.ptf-label {
  position: sticky; left: 0; z-index: 3; flex: 0 0 var(--lblw, 132px); width: var(--lblw, 132px);
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: var(--card); box-shadow: 1px 0 0 var(--border);
}
.ptf-label.is-ohne .ptf-name { color: var(--muted); font-style: italic; }
.ptf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 12px; }
.ptf-corner { gap: 4px; padding: 4px 6px; }
.ptf-zbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--card);
  color: var(--brand); cursor: pointer;
}
.ptf-zbtn:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); border-color: var(--brand); }
.ptf-zbtn svg { width: 18px; height: 18px; fill: currentColor; }
.ptf-headtrack { position: relative; flex: 0 0 auto; height: 34px; }
.ptf-dayhead {
  position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border); box-sizing: border-box;
  font-size: 11px; font-weight: 700; color: var(--muted); padding: 9px 0 0 6px;
  white-space: nowrap; overflow: hidden;
}
.ptf-dayhead.is-heute { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--brand); }
.ptf-track { position: relative; flex: 0 0 auto; }
.ptf-heute-spalte { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 7%, transparent); pointer-events: none; }
/* Abwesenheits-Tönung je Art: Urlaub cyan, Wunschfrei grau, Krank rot (hell + dunkel) */
.ptf-abs { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; display: flex; align-items: flex-end; overflow: hidden; }
.ptf-abs.is-urlaub { background: repeating-linear-gradient(45deg, rgba(0, 212, 224, 0.22) 0 6px, rgba(0, 212, 224, 0.08) 6px 12px); }
.ptf-abs.is-wunschfrei { background: repeating-linear-gradient(45deg, rgba(100, 116, 139, 0.24) 0 6px, rgba(100, 116, 139, 0.09) 6px 12px); }
.ptf-abs.is-krank { background: repeating-linear-gradient(45deg, rgba(255, 59, 48, 0.20) 0 6px, rgba(255, 59, 48, 0.07) 6px 12px); }
.ptf-abs-label {
  font-size: 9.5px; font-weight: 600; padding: 0 4px 1px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptf-bar {
  position: absolute; z-index: 1; display: flex; align-items: center; gap: 3px; padding: 0 5px;
  border-radius: 6px; background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--muted); box-shadow: var(--shadow); overflow: hidden;
  font-size: 11px; font-weight: 600; cursor: pointer; box-sizing: border-box;
}
.ptf-bar:hover { z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.ptf-bar.st-geplant { border-left-color: var(--muted); }
.ptf-bar.st-laeuft { border-left-color: #00d4e0; }
.ptf-bar.st-erledigt { border-left-color: var(--ok); }
.ptf-bar.st-abgebrochen { border-left-color: var(--danger); }
.ptf-bar.is-sperr { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.ptf-bar-warn { display: inline-flex; flex: 0 0 auto; }
.ptf-bar-warn svg { width: 12px; height: 12px; fill: var(--danger); }
.ptf-bar-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Konflikt-Hinweis im Einsatz-Dialog: GELB (nur Hinweis, kein Fehler) */
.plan-konflikt-box {
  background: color-mix(in srgb, #e0a800 16%, transparent);
  border: 1px solid color-mix(in srgb, #e0a800 45%, transparent);
  border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: 13px;
}
.plan-konflikt-box p { margin: 4px 0 0; }
/* Monteur: Urlaub & Wunschfrei (Self-Service) */
.me-abw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.me-abw-titel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.me-abw-titel svg { width: 18px; height: 18px; fill: var(--brand); }
.plan-dauer { font-weight: 700; white-space: nowrap; font-size: 13px; align-self: center; }
.plan-dauer.is-laufend { color: #00a86b; }
.plan-bericht-teil { margin: 6px 0; white-space: pre-wrap; font-size: 14px; }
.plan-soll-box { margin: 8px 0; }

/* ---- Nachkalkulation: Kennzahlen-Kacheln mit Soll/Ist-Balken + Ampel ---- */
.kpi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 12px 0; }
.kpi-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.kpi-titel { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.kpi-zeile { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.kpi-lbl { width: 34px; font-size: 11.5px; color: var(--muted); flex: none; }
.kpi-balken { flex: 1; height: 10px; background: color-mix(in srgb, var(--muted) 14%, transparent); border-radius: 5px; overflow: hidden; }
.kpi-fuellung { display: block; height: 100%; border-radius: 5px; }
.kpi-fuellung.is-soll { background: var(--muted); }
.kpi-fuellung.is-ist { background: var(--ok); }
.kpi-fuellung.is-ist.is-ueber { background: var(--danger); }
.kpi-wert { min-width: 76px; text-align: right; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.kpi-sub { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.ampel-box {
  margin: 10px 0; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-left: 4px solid var(--danger); font-size: 14px;
}
.ampel-box strong { color: var(--danger); display: block; margin-bottom: 4px; }
.ampel-box ul { margin: 4px 0 0 18px; padding: 0; }
.ampel-ok { color: var(--ok); font-weight: 600; }

/* ---- Monteur-Ansicht (mobile-first): große Karten + Bedienelemente ---- */
.me-head-card { margin-bottom: 12px; }
.me-nav { margin: 8px 0 0; }
.me-datum { font-weight: 700; font-size: 15px; }
.me-liste { display: flex; flex-direction: column; gap: 14px; }
.me-card { padding: 14px; }
.me-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.me-card-zeit { font-size: 18px; font-weight: 800; }
.me-card-titel { font-size: 15px; font-weight: 600; margin: 4px 0 8px; overflow-wrap: anywhere; }
.me-kunde { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.me-kunde-name { font-weight: 700; }
.me-link {
  justify-content: flex-start; text-align: left; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere;
}
.me-hinweise { font-size: 14.5px; }
.me-abschnitt {
  margin: 14px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}
.me-pos { display: flex; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); font-size: 14px; }
.me-pos-oz { color: var(--muted); min-width: 34px; flex: none; }
.me-pos-name { flex: 1; overflow-wrap: anywhere; }
.me-pos-menge { white-space: nowrap; color: var(--muted); }
.me-zeit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.me-zeit-btn {
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  color: var(--text); padding: 12px 6px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  font-size: 15px; min-height: 68px;
}
.me-zeit-art { font-weight: 700; }
.me-zeit-timer { font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; }
.me-zeit-timer.is-leer { color: var(--muted); font-weight: 400; }
.me-zeit-btn.is-active {
  border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--ok);
}
.me-zeit-btn.is-active .me-zeit-timer { color: var(--ok); }
.me-stop-btn { grid-column: 1 / -1; padding: 12px; font-size: 16px; font-weight: 700; }
.me-mat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--border); font-size: 14.5px;
}
.me-foto-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.me-bericht-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---- Unterschrift (Canvas, Touch + Maus) ---- */
.sig-wrap { margin: 8px 0; }
.sig-canvas {
  width: 100%; height: auto; max-height: 240px; display: block;
  background: #fff; border: 1px dashed var(--muted); border-radius: 10px;
  touch-action: none; cursor: crosshair;
}

/* ---- Mahnwesen (Segment Mahnungen) + Bank-Import (Zahlungszuordnung) ---- */
.mahn-offen { color: var(--danger); font-weight: 700; white-space: nowrap; align-self: center; flex: none; }
.mahn-chip-klein { font-size: 11px; padding: 2px 8px; }
.mahn-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.bank-seg { margin-bottom: 12px; }
.bank-steps { margin-top: 12px; }
.bank-radios { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.bank-radio {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.bank-start-act { justify-content: flex-start; }
.bank-kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.bank-zeilen { display: flex; flex-direction: column; }
.bank-zeile { border-top: 1px solid var(--border); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.bank-zeile.is-gebucht {
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  border-radius: 10px; padding: 10px; border-top-color: transparent;
}
.bank-zeile-kopf { display: flex; justify-content: space-between; gap: 8px; }
.bank-datum { color: var(--muted); font-size: 13.5px; }
.bank-betrag { font-weight: 700; }
.bank-zeile-text { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.bank-zeile-zuord { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bank-zeile-zuord .ssel { flex: 1 1 220px; min-width: 200px; }

/* ---- FLEXX³ CRM: Akte, Timeline, Doppelbaum, Team-Historie ---- */
/* Baum-Filter der Kundenliste: zwei Dropdowns fließen in die filter-head-Zeile */
.crm-baumfilter { display: contents; }

/* Timeline: Zeile mit rundem Typ-Icon, Kopf (Titel + Chips + Betrag rechts),
   Text und Unterzeile (Kunde · Mitarbeiter · Zeit) */
.crm-timeline { display: flex; flex-direction: column; }
.crm-tl-row {
  display: flex; gap: 10px; padding: 10px 4px; align-items: flex-start;
  border-top: 1px solid var(--border);
}
.crm-tl-row:first-child { border-top: none; }
.crm-tl-row.is-clickable { cursor: pointer; }
.crm-tl-row.is-clickable:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.crm-tl-ic {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand);
}
.crm-tl-ic svg { width: 18px; height: 18px; fill: currentColor; }
/* Beleg-Typ-Icons (belegTypIcon) laufen in der Timeline in derselben Größe mit */
.crm-tl-row .beleg-typ-ic { flex: none; align-self: flex-start; }
.crm-tl-main { flex: 1; min-width: 0; }
.crm-tl-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-tl-titel { font-weight: 600; }
.crm-tl-betrag { margin-left: auto; font-weight: 700; white-space: nowrap; }
.crm-tl-text { font-size: 13.5px; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-tl-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* Doppelbaum in der Akte: zwei Spalten mit Checkbox-Bäumen (mobil untereinander) */
/* ---------- Doppelbaum „Kategorien & Kriterien" (1.0.46) ----------
   Zwei gerahmte Spalten, jede mit Kopf (Name · Zahl der Haken · Alles auf/zu)
   und einer Liste, die IN SICH scrollt — bei 168 Knoten schöbe sie sonst die
   ganze Akte auseinander. Ist nur EIN Baum gepflegt, nimmt er die volle
   Breite (eine halbe Spalte Leere sagt nichts). */
.crm-baum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.crm-baum-grid.is-einspaltig { grid-template-columns: 1fr; }
@media (max-width: 720px) { .crm-baum-grid { grid-template-columns: 1fr; } }
.crm-baum-col {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--card); min-width: 0;
}
.crm-baum-kopf {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
/* Titel + (i) bilden die linke Hälfte des Kopfes — sonst schiebt der wachsende
   Titel das Icon an den rechten Rand, weg von dem Wort, das es erklärt. */
.crm-baum-kopf-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.crm-baum-kopf-l > .crm-baum-titel { flex: 0 1 auto; }
/* Verknuepfung je Baum - klein und ruhig, sie steht neben einer Ueberschrift. */
.crm-baum-verkn {
  flex: none; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--muted); background: var(--card); cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 2px 1px 4px;
}
.crm-baum-verkn:hover { color: var(--brand); border-color: var(--brand); }
.crm-baum-verkn:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.crm-baum-titel {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-baum-zahl {
  flex: none; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand);
}
.crm-baum-alle {
  flex: none; border: 0; background: none; font: inherit;
  color: var(--muted); cursor: pointer; padding: 2px; border-radius: 6px;
  display: inline-flex; align-items: center;
}
.crm-baum-alle svg { width: 18px; height: 18px; fill: currentColor; }
.crm-baum-alle:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
/* HÖHE BEGRENZT + eigener Scrollbalken (Betreiber-Wunsch). Der Balken bleibt
   dezent und wird erst beim Überfahren der Spalte deutlicher. */
.crm-baum-liste {
  max-height: 300px; overflow-y: auto; padding: 6px 8px 8px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.crm-baum-liste::-webkit-scrollbar { width: 8px; }
.crm-baum-liste::-webkit-scrollbar-track { background: transparent; }
.crm-baum-liste::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.crm-baum-col:hover .crm-baum-liste::-webkit-scrollbar-thumb { background: var(--muted); }

.crm-node-row { display: flex; align-items: center; gap: 2px; border-radius: 7px; }
.crm-node-row:hover { background: var(--bg); }
/* Klapp-Knopf vor der Beschriftung; Blätter bekommen denselben Platzhalter,
   damit alle Kästchen einer Ebene fluchten. */
.crm-node-chev {
  flex: none; width: 22px; height: 22px; padding: 0; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer;
}
.crm-node-chev.is-blatt { cursor: default; }
.crm-node-chev svg {
  width: 18px; height: 18px; fill: currentColor; display: block;
  transform: rotate(-90deg); transition: transform 0.15s ease;
}
.crm-node-chev.is-offen svg { transform: none; }
.crm-node-chev:hover:not(.is-blatt) { color: var(--text); }
/* ENG (Betreiber 30.09.2026, 1.2.26 Suchmaske, 1.2.27 auch Akte): 23 statt
   31 px je Zeile — man sieht mehr vom Baum, ohne zu rollen. */
.crm-node {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  padding: 1px 4px 1px 0; cursor: pointer; font-size: 13.5px;
}
.crm-node input { flex: none; width: 15px; height: 15px; accent-color: var(--brand); }
.crm-node-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-node.is-an { font-weight: 600; }
.crm-node.is-an .crm-node-name { color: var(--brand); }
/* Zahl am ZUGEKLAPPTEN Ast: so verschwindet die Auswahl beim Zuklappen nicht. */
.crm-node-zahl {
  flex: none; margin-right: 4px; font-size: 11px; font-weight: 700;
  min-width: 18px; text-align: center; padding: 1px 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand);
}
/* Einrückung als Leitlinie statt als Polsterrechnung — man sieht, wohin ein
   Ast gehört. */
.crm-kinder { margin-left: 13px; padding-left: 10px; border-left: 1px solid var(--border); }

/* Aufgaben-Zeile: Erledigt-Haken vor dem Text */
.crm-auf-check { display: inline-flex; align-items: center; flex: none; cursor: pointer; }
.crm-auf-check input { width: 20px; height: 20px; accent-color: var(--brand); }

/* ---------- Adress-AKTE (eine Akte mit Reitern; ersetzt Dialog + CRM-Akte) ---------- */
/* Kopf: Titel + Speichern rechts; Chips (letzter Kontakt, Aufgaben, §13b, …) */
.akte-kopf .admin-head { margin-bottom: 4px; }
/* Titelzeile der Akte: Name, Kundennummer und die Chips in EINER Reihe
   (Betreiber 26.09.2026). Die Chips sitzen auf der Grundlinie des Titels. */
.akte-titelzeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.akte-titelzeile > .stage-title { margin: 0; }
.akte-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.akte-kopf-acts { display: flex; align-items: center; gap: 8px; flex: none; }
/* Im Fenster sitzt die Akte direkt im sheet-body: kein zusaetzlicher Rand um
   die Karten, sonst rahmt sich der Inhalt doppelt. */
.akte-sheet .sheet-body { padding: 14px; }
.akte-sheet .akte-kopf { margin-top: 0; }
/* IMMER DIESELBE FENSTERHOEHE (Betreiber 27.09.2026): Die Akte waechst und
   schrumpft sonst mit ihrem Inhalt - ein Filter in der Historie, der statt
   zwanzig Eintraegen nur einen uebrig laesst, liess das ganze Fenster
   zusammenklappen und die Reiterleiste springen. `height` statt `max-height`
   nagelt die Hoehe fest; gescrollt wird INNEN (.sheet-body hat overflow-y:
   auto). */
.akte-sheet { height: 88vh; }
/* Die Karte des aktiven Reiters FUELLT die Hoehe aus (Betreiber 27.09.2026):
   Sonst stand unter einem kurzen Reiter - Historie auf einen Beleg gefiltert -
   eine grosse graue Leere. `1 0 auto` waechst, schrumpft aber nie unter den
   Inhalt: Ein langer Reiter scrollt weiterhin im .sheet-body. */
/* DREI EBENEN MUESSEN MITWACHSEN, sonst bleibt die Leere: das .sheet-body
   (es nahm bei fester Fensterhoehe nur seine Inhaltshoehe ein), der Behaelter
   .akte-host darin, und erst dann die Karte des aktiven Reiters. */
.akte-sheet .sheet-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.akte-sheet .akte-host { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.akte-sheet .akte-panel { flex: 1 0 auto; }

/* ---------- Reiter "Umsatz" (Vorbild SISPRO-IIS "Umsatzinfo") ---------- */
/* Tabelle links, Grafik rechts - wie im Altsystem. */
.um-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .um-grid { grid-template-columns: 1fr; } }
.um-tab { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.um-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 5px 10px; font-size: 13px; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
}
.um-zeile:last-child { border-bottom: 0; }
.um-zeile > span:last-child { text-align: right; }
.um-kopf { background: var(--bg); font-weight: 700; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.um-zeile.is-neg > span:last-child { color: var(--danger); }
.um-summe { font-weight: 700; border-top: 2px solid var(--border); }
/* Die Grafik traegt die Durchschnittslinie ueber den Balken. */
.um-grafik { position: relative; }
.um-balken { margin-top: 0; }
.um-schnitt {
  position: absolute; left: 0; right: 0; pointer-events: none;
  border-top: 2px dashed var(--danger);
}
.um-schnitt-wert {
  position: absolute; right: 0; top: -16px;
  font-size: 11px; font-weight: 700; color: var(--danger);
  background: var(--card); padding: 0 4px; font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .akte-sheet { height: min(86vh, 920px); }
}
.akte-kopf .form-error:empty { display: none; }
/* Reiter-Inhalt zweispaltig (Stammdaten links, Bäume/Ansprechpartner rechts);
   mobil einspaltig. */
.akte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; align-items: start; }
.akte-grid > * { min-width: 0; }
@media (max-width: 860px) { .akte-grid { grid-template-columns: 1fr; } }
/* Fusszeile des Adress-Fensters: Loeschen LINKS (abgesetzt, damit es nicht
   neben "Speichern" steht und verklickt wird), Abbrechen und Speichern
   rechts. Oben rechts bleibt nur das X. (Betreiber 27.09.2026) */
.akte-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 4px; padding: 12px 0 2px;
  border-top: 1px solid var(--border);
  background: var(--card);
}
/* NICHT MEHR FIX (Betreiber 28.09.2026): Die Fusszeile klebte am unteren Rand
   und kostete auf jedem Reiter dauerhaft Platz. Stattdessen bleibt jetzt der
   KOPF stehen - dort stehen Name, Nummer, Chips und kuenftig weitere
   Funktionen. Gescrollt wird wie bisher im .sheet-body.
   KEINE KARTE, NUR EINE TRENNLINIE (Betreiber 28.09.2026, Muster Artikel =
   .sheet-title): Als Karte blieben Raender und abgerundete Ecken stehen, und
   der Inhalt scrollte in dieser Luecke sichtbar HINTER dem Kopf durch. Der
   Kopf laeuft deshalb ueber die volle Fensterbreite (negative Raender heben
   die 14px Polsterung des .sheet-body auf) und deckt vollstaendig ab. */
.akte-kopf.is-fix {
  /* top: -14px, NICHT 0: Der Klebepunkt misst ab der INNENKANTE der Polsterung
     des .sheet-body - mit 0 blieb oben ein 14px-Streifen, durch den der Inhalt
     sichtbar durchlief (Betreiber 28.09.2026, am Bild gemessen). */
  position: sticky; top: -14px; z-index: 3;
  margin: -14px -14px 12px; padding: 14px 14px 10px;
  background: var(--card);
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  box-shadow: none;
}
/* Das Hinweisband „Anna bearbeitet gerade" faehrt im Kopf mit. */
.akte-kopf.is-fix .mb-band { margin-bottom: 0; }
.akte-fuss-links { display: flex; gap: 8px; }
.akte-fuss-rechts { display: flex; gap: 10px; margin-left: auto; }
.akte-x { flex: none; }

/* ---------- FLEXX³ ABO (Daueraufträge, Fakturalauf, SEPA) ---------- */
/* Kompakte Positionszeilen des Dauerauftrag-Editors (Muster .komp-row) */
.abo-pos-rows { margin: 6px 0; }
.abo-pos-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}
.abo-pos-row:first-child { border-top: none; }
/* Drag-Handle (wiederverwendetes .bp-handle) sitzt links in der Zeile; grid-area
   greift im Flex-Kontext nicht, cursor/touch-action/Größe kommen von dort. Das
   negative Margin des Grid-Handles wird hier neutralisiert (Flex-Abstände). */
.abo-pos-row .bp-handle { flex: none; padding: 9px 3px; margin: 0; }
.abo-pos-row input, .abo-pos-row select, .abo-pos-row textarea {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit;
}
.abo-pos-row input:focus, .abo-pos-row select:focus, .abo-pos-row textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.abo-pos-name { flex: 1 1 200px; min-width: 150px; }
.abo-pos-menge { width: 82px; }
.abo-pos-einheit { width: 68px; }
.abo-pos-ep { width: 96px; }
.abo-pos-satz { width: 78px; }
.abo-pos-gp { min-width: 88px; text-align: right; font-weight: 600; margin-left: auto; white-space: nowrap; }
/* Zusatzinfo: zweite Zeile über die volle Breite (bricht im flex-wrap um) */
.abo-pos-beschr {
  flex: 1 1 100%; width: 100%; min-width: 0; margin: 2px 0 2px;
  resize: vertical; line-height: 1.35;
}

/* SEPA-Vorschau: Checkbox-Zeilen mit Haupt-/Unterzeile */
.sepa-row { align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--border); }
.sepa-row:first-of-type { border-top: none; }
.sepa-row .stamm-main { display: inline-flex; flex-direction: column; }

/* Direktrechnung: der Hinweis im Beleg-Editor (1.1.97).
   RUHIG, NICHT ALARMIEREND - es ist ein zulaessiger Weg, nur der schwaechere.
   Deshalb Cyan (Hinweis) und kein Signalrot (Fehler). */
.direkt-hinweis {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  font-size: 13.5px; line-height: 1.45; color: var(--text);
}
.direkt-ic { display: inline-flex; color: var(--brand); flex: 0 0 auto; }
.direkt-ic svg { width: 18px; height: 18px; fill: currentColor; }
.direkt-hinweis .btn { margin-top: 8px; }

/* KI-Anbieter hinter dem Modulschalter FLEXX3 KI (1.2.4).
   Sitzt in derselben Zeile wie das Haekchen, rechts angeschlagen - das
   Dropdown gehoert sichtbar ZU diesem Modul, nicht in eine eigene Rubrik. */
.ki-anbieter-wrap { margin-left: auto; padding-left: 10px; }
.ki-anbieter-sel { font-size: 13px; padding: 2px 6px; max-width: 160px; }
.ki-anbieter-sel:disabled { opacity: .45; }

/* Provisions-Vorschau: Summenzeile */
.pv-summe td { border-top: 2px solid var(--border); }
/* Zwischensumme je Beleg: LEISER als die Gesamtsumme - eine duenne Linie und
   ein Hauch Hintergrund. Derselbe doppelte Strich waere sieben Mal auf einer
   Seite und liesse die eigentliche Summe unten untergehen. */
.pv-zwischen td {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--muted);
}

/* Briefkopf-Profile: Logo-Vorschau im Editor */
.bk-logo-preview {
  display: block; max-width: 240px; max-height: 90px; margin: 6px 0;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: #fff;
}
/* Briefpapier-Vorschau: hochkant (A4), deshalb höher als das Logo. */
.bk-bogen-preview { max-width: 150px; max-height: 212px; }
.bk-bogen { margin: 4px 0 14px; }

/* ---------- Daten-Import-Assistent (FLEXX³ ADMINISTRATION) ---------- */
.imp-zeile { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.imp-importer { min-width: 220px; margin-bottom: 0; }
.imp-busy { display: flex; align-items: center; gap: 10px; }
.imp-spin {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--brand);
  animation: imp-spin 0.8s linear infinite;
}
@keyframes imp-spin { to { transform: rotate(360deg); } }
.imp-fehlt { color: var(--danger); }
.imp-nicht { font-size: 11px; color: var(--muted); }
.imp-abdeckung { font-size: 12px; color: var(--muted); }
.imp-grp { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.imp-grp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.imp-grp-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.imp-marke { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.imp-zaehler { vertical-align: 3px; }
.imp-hinweise { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 13.5px; }
.imp-hinweise ul { margin: 6px 0 0; padding-left: 18px; }
.imp-hinweise li { margin: 3px 0; }
.imp-warn-titel { display: flex; align-items: center; gap: 6px; font-weight: 600; margin: 12px 0 4px; }
.imp-warn-titel svg { width: 18px; height: 18px; fill: var(--danger); }
.imp-warnungen { margin: 0; padding-left: 18px; font-size: 13.5px; }
.imp-beispiele { margin: 8px 0; font-size: 13px; color: var(--muted); }
.imp-beispiele summary { cursor: pointer; }
.imp-beispiele ul { margin: 6px 0 0; padding-left: 18px; }
.imp-journal-zeile { border-top: 1px solid var(--border); padding: 10px 2px; cursor: pointer; }
.imp-journal-zeile:first-of-type { border-top: none; }
.imp-journal-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-journal-zeit { font-variant-numeric: tabular-nums; font-weight: 600; }
.imp-journal-user { color: var(--muted); font-size: 13px; }
.chip-alarm { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }

/* ================= SEITENLEISTE + MENÜ-SCHUBLADE (1.0.45) =================
   EINE Navigation für alle Größen (Muster VINORUM): ab 1280 px steht die
   Leiste fest links und die Kopfzeile entfällt, darunter fährt DIESELBE
   Leiste als Schublade über die Seite (body.menu-modus + body.menu-offen).
   Eingeklappt (body.sidebar-schmal) bleibt am Schreibtisch eine Icon-Spalte;
   der Zustand liegt je Gerät in localStorage (flexx3.sidebar).
   GRUND DER LEISTE: Nachtblau aus der CI — NICHT --anthracite verwenden, die
   Variable ist im Dunkelmodus ein HELLER Ton (dort Textfarbe). */
:root { --sb-breit: 284px; --sb-schmal: 64px; --sb-bg: #0b1320; }
[data-theme='dark'] .sidebar { --sb-bg: #060c15; }

.sidebar {
  display: none; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: var(--sb-breit);
  background: var(--sb-bg); color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: width 0.15s ease;
}
body.sidebar-schmal .sidebar { width: var(--sb-schmal); }

/* Kopf: FLEXX³-Wortmarke + Betrieb + Einklapp-Knopf */
.sb-kopf {
  display: flex; align-items: flex-start; gap: 8px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.sb-marke { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sb-logo { width: 196px; max-width: 100%; height: auto; display: block; }
.sb-logo-klein { width: 28px; display: none; border-radius: 7px; }
.sb-betrieb {
  /* mittig unter der Wortmarke: gleiche Breite wie das Logo + text-align */
  width: 196px; max-width: 100%; text-align: center;
  font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.sidebar-schmal .sb-logo, body.sidebar-schmal .sb-betrieb { display: none; }
body.sidebar-schmal .sb-logo-klein { display: block; margin: 0 auto; }
body.sidebar-schmal .sb-marke { display: none; }
body.sidebar-schmal .sb-kopf { justify-content: center; padding-left: 12px; }

/* Einklapp-Pfeil bewusst unauffällig: kein Kasten, nur ein dezentes Zeichen. */
.sb-toggle {
  flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: rgba(255, 255, 255, 0.35); cursor: pointer;
}
.sb-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sb-toggle svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Fester Kopf („Zuletzt benutzt") + scrollende Liste darunter. Der
   Scrollbalken bleibt dezent und wird erst beim Überfahren deutlicher — er
   soll die Navigation nicht überlagern. */
.sb-fix { flex: none; padding: 8px 10px 0; }
body.sidebar-schmal .sb-fix { padding: 8px 6px 0; }
.sb-liste {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 8px 14px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}
.sidebar:hover .sb-liste { scrollbar-color: rgba(255, 255, 255, 0.24) transparent; }
.sb-liste::-webkit-scrollbar { width: 4px; }
.sb-liste::-webkit-scrollbar-track { background: transparent; }
.sb-liste::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 2px; }
.sidebar:hover .sb-liste::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.24); }

/* Rubrik-Block: der Kopf klappt auf/zu. */
.sb-block + .sb-block { margin-top: 2px; }
.sb-gruppe {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin: 14px 0 4px; padding: 2px 10px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48); text-align: left;
}
.sb-gruppe:hover { color: rgba(255, 255, 255, 0.7); }
.sb-gruppe-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-gruppe-chev { display: inline-flex; flex: none; }
.sb-gruppe-chev svg { width: 16px; height: 16px; fill: currentColor; display: block; transition: transform 0.15s ease; }
.sb-block.is-zu .sb-gruppe-chev svg { transform: rotate(-90deg); }
.sb-block.is-zu .sb-block-inhalt { display: none; }

/* GRUPPENKOPF mit Farbmarke (--sb-f, gesetzt von renderSidebar): Rubrikname
   ohne das Präfix „FLEXX³" und die Erklärung daneben, auf einem ruhigen Band.
   Bewusst NUR die 3-px-Kante farbig — getönte Flächen konkurrierten mit den
   Statusfarben in den Modulen. */
.sidebar .sb-gruppe.hat-sub {
  /* Breite MINUS der eigenen Ränder (2 + 8): mit `width: 100%` wäre der Kopf
     breiter als die Liste — genau das erzeugt einen waagerechten Scrollbalken.
     `auto` geht NICHT: ein <button> schrumpft dann auf seinen Inhalt. */
  width: calc(100% - 10px);
  align-items: center; gap: 7px; margin: 11px 8px 4px 2px; padding: 7px 9px 7px 7px;
  background: rgba(255, 255, 255, 0.07); border-radius: 7px;
  border-left: 3px solid var(--sb-f, var(--accent));
}
.sidebar .sb-gruppe.hat-sub:hover { background: rgba(255, 255, 255, 0.12); }
.sidebar .sb-gruppe.hat-sub .sb-gruppe-name {
  flex: none; font-weight: 600; color: var(--sb-f, rgba(255, 255, 255, 0.72));
}
.sidebar .sb-gruppe-sub {
  flex: 1; min-width: 0; font-size: 11.5px; letter-spacing: 0; text-transform: none;
  color: rgba(255, 255, 255, 0.38); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar .sb-gruppe:hover .sb-gruppe-sub { color: rgba(255, 255, 255, 0.55); }
.sidebar .sb-gruppe.hat-sub .sb-gruppe-chev { opacity: .6; }
/* DASHBOARD als Kopf: dasselbe Band wie eine Rubrik, aber ein Sprungziel —
   Zeichen rechts statt Chevron, und der aktive Zustand ist deutlich. */
.sidebar .sb-gruppe.sb-dash { margin-top: 0; }
.sidebar .sb-dash-ic { display: inline-flex; flex: none; opacity: .55; }
.sidebar .sb-dash-ic svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.sidebar .sb-gruppe.sb-dash.is-active { background: rgba(255, 255, 255, 0.14); }
.sidebar .sb-gruppe.sb-dash.is-active .sb-dash-ic { opacity: .85; }
body.sidebar-schmal .sidebar .sb-gruppe-sub { display: none; }
body.sidebar-schmal .sidebar .sb-gruppe.hat-sub { background: none; border-left: 0; }

/* Modulzeilen — eingerückt gegen den Rubrikkopf (die Gruppe ist sichtbar die
   Ebene darüber). FESTE Zeichen-Spalte: ein breiteres Symbol würde sonst den
   Text verschieben und die Fluchtlinie der ganzen Liste brechen. */
.sb-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px 9px 16px; margin-bottom: 1px;
  border: 0; border-radius: 9px; background: transparent;
  color: rgba(255, 255, 255, 0.82); font: inherit; font-size: 14px;
  text-align: left; cursor: pointer;
}
.sb-item:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.sb-ic { display: inline-flex; flex: none; width: 20px; justify-content: center; align-items: center; }
.sb-ic svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.sb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item.is-active { background: rgba(255, 255, 255, 0.13); color: #fff; font-weight: 600; }
/* Eingeklappt: nur Symbole (Beschriftung im Tooltip). Zugeklappte Rubriken
   zeigen dort trotzdem ALLE Symbole — sie würden sonst spurlos verschwinden. */
body.sidebar-schmal .sb-label,
body.sidebar-schmal .sb-gruppe { display: none; }
body.sidebar-schmal .sb-block.is-zu .sb-block-inhalt { display: block; }
body.sidebar-schmal .sb-item { justify-content: center; padding: 10px 0; }
body.sidebar-schmal .sb-liste { padding: 8px 6px 14px; }

/* „Zuletzt benutzt" als EINE Symbolreihe: der Schnellzugriff soll Platz
   sparen, nicht kosten. Abgesetzt zwischen Dashboard und erster Rubrik. */
.sidebar .sb-zuletzt {
  margin: 7px 0 4px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar .sb-zuletzt-icons { display: flex; gap: 4px; padding: 0 8px 0 16px; flex-wrap: nowrap; }
.sidebar .sb-zbtn {
  width: 34px; height: 34px; flex: none; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.72);
}
.sidebar .sb-zbtn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.sidebar .sb-zbtn.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; }
.sidebar .sb-zbtn svg { width: 19px; height: 19px; fill: currentColor; display: block; }
body.sidebar-schmal .sidebar .sb-zuletzt { display: none; }

/* Werkzeug-Fuß: was am Schreibtisch aus der Kopfzeile hierher wandert. */
.sb-fuss { padding: 8px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.sb-werkzeuge { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sb-tool {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: rgba(255, 255, 255, 0.7); cursor: pointer;
}
.sb-tool:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sb-tool.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; }
.sb-tool svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.sb-tool .lang-flag { width: 20px; height: 14px; border-radius: 2px; }
.sb-lang { position: relative; }
/* Sprachmenü nach OBEN (der Fuß sitzt am unteren Fensterrand) und RECHTS
   ausgerichtet — nach rechts geöffnet schnitte `overflow: hidden` es ab.
   `top: auto` muss mit, sonst gewinnt das top der Basisregel .lang-menu. */
.sidebar .sb-lang-menu { top: auto; bottom: calc(100% + 6px); left: auto; right: 0; }
body.sidebar-schmal .sidebar { overflow: visible; }
body.sidebar-schmal .sidebar .sb-lang-menu { left: 0; right: auto; }
body.sidebar-schmal .sb-werkzeuge { justify-content: center; }

/* ── Schublade auf Tablet und Handy ────────────────────────────────────────
   Das Menü beginnt UNTER der Kopfzeile: Burger, Marke und Werkzeuge bleiben
   stehen, und der Burger ist zugleich der Weg zurück. Am Tablet 284 px wie am
   Schreibtisch, am Smartphone die VOLLE Breite. */
body.menu-modus .sidebar {
  display: flex; width: var(--sb-breit); z-index: 60;
  top: var(--kopf-h, 64px);
  transform: translateX(-102%); transition: transform .22s ease;
}
body.menu-modus.menu-offen .sidebar { transform: none; box-shadow: 8px 0 34px rgba(0, 0, 0, .28); }
@media (max-width: 699px) {
  body.menu-modus .sidebar { width: 100%; box-shadow: none; }
  body.menu-modus.menu-offen .sidebar { box-shadow: none; }
  /* Über die volle Breite braucht es keinen Verdunkler. */
  body.menu-modus.menu-offen #menu-backdrop { opacity: 0; }
}
/* Solange das Menü offen ist, scrollt die Seite darunter nicht mit — und die
   Kopfzeile bleibt stehen (sie ist sonst mitscrollend; wer weit unten in einer
   Liste war, hatte sie nicht im Bild, während die Schublade weiterhin bei
   `top: var(--kopf-h)` begann: oben klaffte die Liste).
   z-index 61 = über der Schublade (60), unter der unteren Leiste (62), damit
   der Burger erreichbar bleibt. */
body.menu-offen { overflow: hidden; }
body.menu-modus { overscroll-behavior-y: contain; }
body.menu-modus.menu-offen .app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 61;
  background: var(--card); box-shadow: 0 1px 0 var(--border);
}
#menu-backdrop {
  position: fixed; inset: 0; z-index: 59; background: rgba(11, 19, 32, .45);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
body.menu-offen #menu-backdrop { opacity: 1; pointer-events: auto; }
body.menu-modus #menu-backdrop { top: var(--kopf-h, 64px); }
/* Das Menü trägt NUR die Bereichsliste: der Betrieb steht in der Kopfzeile,
   die Werkzeuge ebenfalls, und die zuletzt benutzten Module stehen in der
   unteren Leiste. */
body.menu-modus .sb-kopf,
body.menu-modus .sb-fuss,
body.menu-modus .sb-zuletzt,
body.menu-modus .sb-toggle { display: none; }
body.menu-modus .sb-liste {
  padding-top: 10px;
  /* Platz für die untere Leiste: sie liegt ÜBER dem Menü, sonst verdeckt sie
     den letzten Bereich. */
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 8px);
}
/* Der Betriebsname rückt zentriert unter die Wortmarke (Breite aus --marke-w,
   von renderHeader gemessen). Einen Burger trägt die Kopfzeile NICHT — er steht
   unten in der Leiste (1.0.49, Betreiber: „haben wir ja unten"). */
body.menu-modus .brand-left { flex: 0 0 auto; justify-content: flex-start; }
body.menu-modus .brand-actions { flex: 1 1 auto; justify-content: flex-end; }
body.menu-modus .header-row { justify-content: flex-start; margin-top: -3px; }
body.menu-modus .subtitle {
  font-size: 11.5px; width: var(--marke-w, 168px); text-align: center; line-height: 1.15;
}

/* UNTERE LEISTE im Schubladen-Modus: eine FESTE Reihe aus Zeichen statt der
   früheren scrollenden Tab-Liste. Sie liegt ÜBER dem Menü, damit der Burger
   auch bei offener Schublade erreichbar bleibt — aber NUR, WÄHREND das Menü
   offen ist: mit dauerhaft hohem z-index lägen die Zeichen über jedem Dialog. */
body.menu-modus .bottom-nav {
  z-index: 20; justify-content: space-between; align-items: center; padding: 0 6px;
  will-change: transform;
}
body.menu-modus.menu-offen .bottom-nav { z-index: 62; }
.nav-ic {
  flex: 1 1 0; min-width: 0; height: var(--nav-height); display: inline-flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 1px;
  font: inherit;
}
.nav-ic svg { width: 23px; height: 23px; fill: currentColor; display: block; }
/* Die Beschriftung darf die Leiste nicht sprengen: eine Zeile, Ellipse als
   letzte Rettung — die Kurzform kommt aus dem Aufrufer. */
.nav-ic-label {
  font-size: 9.5px; line-height: 1.1; letter-spacing: -.01em; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-ic.is-active { color: var(--brand); }
.nav-ic.nav-ic-menu { color: var(--text); }
.nav-ic.nav-ic-menu.is-active { color: var(--brand); }

/* Der Ansicht-Umschalter in der Kopfzeile ist nur ab Desktop-Breite sinnvoll. */
@media (max-width: 1279.98px) {
  #nav-modus-btn { display: none; }
}

@media (min-width: 1280px) {
  .sidebar { display: flex; }
  /* Die Kopfzeile entfällt am Schreibtisch KOMPLETT: Wortmarke, Betrieb,
     Hell/Dunkel, Sprache und Abmelden stehen in der Leiste. Das Markup bleibt
     im DOM (renderHeader schreibt weiter hinein) — nur unsichtbar. */
  .app-header { display: none; }
  .bottom-nav { display: none; }
  body { padding-bottom: 0; }
  .view { padding-bottom: 28px; }
  /* Inhalt rückt nach rechts. */
  .view, #offline-banner, #update-banner, #install-banner {
    margin-left: var(--sb-breit);
    transition: margin-left 0.15s ease;
  }
  body.sidebar-schmal .view,
  body.sidebar-schmal #offline-banner,
  body.sidebar-schmal #update-banner,
  body.sidebar-schmal #install-banner { margin-left: var(--sb-schmal); }
  /* Dialoge im ARBEITSBEREICH zentrieren: der Backdrop liegt über dem ganzen
     Fenster — ohne Ausgleich hingen die Fenster optisch links. */
  .modal-backdrop { padding-left: calc(var(--sb-breit) + 16px); }
  body.sidebar-schmal .modal-backdrop { padding-left: calc(var(--sb-schmal) + 16px); }
  body.sidebar-aus .modal-backdrop { padding-left: 16px; }

  /* ABGEMELDET GIBT ES KEINE SEITENLEISTE. Drei Dinge hängen daran:
     1. `.sidebar { display: flex }` oben ÜBERSTIMMT das hidden-Attribut (das
        Browser-Standard-`hidden` ist eine Regel niedrigster Spezifität) —
        sonst stünde eine leere, dunkle Leiste da.
     2. `.view` behielt ihren margin-left: der Anmeldebildschirm saß um eine
        halbe Leistenbreite zu weit rechts.
     3. Die Kopfzeile ist am Schreibtisch nur deshalb aus, weil ihre Werkzeuge
        in der Leiste stehen — abgemeldet gibt es die nicht, und damit fehlten
        Sprachwahl und Hell/Dunkel ganz.
     REIHENFOLGE ZÄHLT: gleiche Spezifität wie die sidebar-schmal-Regeln, also
     MUSS dieser Block danach stehen. */
  .sidebar[hidden] { display: none; }
  body.abgemeldet .app-header { display: block; }
  body.abgemeldet .view,
  body.abgemeldet #offline-banner,
  body.abgemeldet #update-banner,
  body.abgemeldet #install-banner { margin-left: 0; }
  body.abgemeldet .modal-backdrop { padding-left: 16px; }

  /* NAVIGATIONS-MODUS „mobil" (body.sidebar-aus): der Nutzer holt sich auch am
     Schreibtisch die mobile Navigation zurück. Steht bewusst NACH den
     sidebar-schmal-Regeln (gleiche Spezifität).
     ABER: im mobilen Modus IST die Leiste die Menü-Schublade — versteckt wird
     sie dort ausschließlich über ihr `transform`, sonst käme der Verdunkler
     und das Menü nicht. */
  body.sidebar-aus .sidebar { display: none; }
  body.sidebar-aus.menu-modus .sidebar { display: flex; }
  body.sidebar-aus .app-header { display: block; margin-left: 0; }
  body.sidebar-aus .bottom-nav { display: flex; }
  body.sidebar-aus { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); }
  body.sidebar-aus .view { padding-bottom: calc(var(--nav-height) + 20px); }
  body.sidebar-aus .view,
  body.sidebar-aus #offline-banner,
  body.sidebar-aus #update-banner,
  body.sidebar-aus #install-banner { margin-left: 0; }
}

/* Hinweisfenster für ein nicht freigeschaltetes Modul (openModulInfo). */
.modul-info .mi-status {
  margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.modul-info .mi-titel { margin: 0 0 8px; font-size: 19px; }
.modul-info .mi-text { margin: 0 0 12px; }

/* ================= DASHBOARD (1.0.45) =================
   Kopf nach dem VINORUM-Entwurf: Logo | Haarlinie | Gruß zweizeilig links,
   rechts Datum · Glocke · Benutzermenü. Darunter die Kennzahlen-Reihe und die
   Karten-Reihen. */
.dash-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.dash-hero-marke-wrap { display: inline-flex; align-items: center; min-width: 0; flex: none; }
.dash-hero-marke {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 22%, var(--card)); color: var(--brand);
}
.dash-hero-marke svg { width: 26px; height: 26px; fill: currentColor; }
.dash-hero .hero-logo { max-height: 62px; max-width: 250px; object-fit: contain; margin: 0; }
.dash-hero-haar { width: 1px; align-self: stretch; min-height: 36px; background: var(--border); flex: none; }
.dash-hero-text { min-width: 0; text-align: left; }
.dash-hero-kick { margin: 0 0 1px; font-size: 13px; font-weight: 600; color: var(--brand); }
[data-theme='dark'] .dash-hero-kick { color: var(--brand); }
.dash-hero-text h2 {
  margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-hero-rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; flex: none; }
.dash-hero-datum {
  display: flex; align-items: center; gap: 8px; flex: none;
  color: var(--muted); font-size: 13.5px; align-self: center;
}
.dash-hero-datum svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.dash-hero-glocke {
  position: relative; width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; display: inline-grid; place-items: center;
}
.dash-hero-glocke:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.dash-hero-glocke svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.dash-hero-punkt {
  position: absolute; top: 6px; right: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); border: 2px solid var(--card);
}
.dash-hero-punkt[hidden] { display: none; }
.dash-hero-menue { position: relative; display: inline-flex; }
.dash-hero-user-btn {
  display: inline-flex; align-items: center; gap: 3px; border: 0; background: none;
  padding: 2px; border-radius: 20px; cursor: pointer; color: var(--muted);
}
.dash-hero-user-btn:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.dash-hero-user-btn .dhm-caret svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.dash-hero-user {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--brand); color: var(--card); font-size: 12px; font-weight: 650; letter-spacing: .03em;
}
.dash-hero-menue-panel {
  position: absolute; top: calc(100% + 6px); right: 0; width: 236px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; z-index: 25;
}
.dhm-kopf { padding: 11px 14px 9px; border-bottom: 1px solid var(--border); }
.dhm-name { font-weight: 650; font-size: 14px; }
.dhm-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.dash-hero-menue-panel > button {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none;
  padding: 10px 14px; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
  color: var(--text);
}
.dash-hero-menue-panel > button:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dash-hero-menue-panel > button.is-rot { color: var(--danger); }
.dash-hero-menue-panel > button svg { width: 17px; height: 17px; fill: currentColor; opacity: .85; display: block; }
@media (max-width: 700px) {
  .dash-hero { gap: 10px; }
  .dash-hero-datum, .dash-hero-rechts .dash-hero-haar { display: none; }
  .dash-hero .hero-logo { max-height: 42px; max-width: 140px; }
}

/* ── Kennzahl-Reihe: feste Spaltenzahl, damit die Reihe nicht bei jedem
   Betrieb anders aussieht. ── */
.dash-kpis { margin-bottom: 16px; }
.dash-kpis .kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 1640px) { .dash-kpis .kpi-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1400px) { .dash-kpis .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .dash-kpis .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .dash-kpis .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
/* GRID-FALLE: ein Rasterfeld hat `min-width: auto` — eine nicht umbrechende
   Beschriftung sprengt sonst ihre Spalte. */
.dash-kpis .kpi-grid > * { min-width: 0; }

/* ── Karten-Reihen: drei feste Spalten, gleiche Höhe je Reihe. ── */
.dash-reihe {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 16px; align-items: stretch;
}
@media (max-width: 1400px) { .dash-reihe { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .dash-reihe { grid-template-columns: 1fr; gap: 12px; } }
.dash-reihe > * { min-width: 0; }
.dash-reihe:empty { display: none; margin: 0; }
.dash-karte { display: flex; flex-direction: column; gap: 0; height: 100%; }
/* Einheitlicher Kartenkopf: Zeichen + Titel, darunter eine Linie über die
   KOMPLETTE Kartenbreite (die negativen Ränder rechnen das Karten-Polster
   heraus). Die Mindesthöhe hält Karten mit und ohne Zusatz auf einer Linie. */
.dash-k-kopf {
  display: flex; align-items: center; gap: 9px; min-height: 43px;
  margin: 0 -18px 10px; padding: 0 18px 9px; border-bottom: 1px solid var(--border);
}
.dash-k-kopf h2 { margin: 0; font-size: 16px; flex: 1; min-width: 0; }
.dash-k-ic { display: inline-flex; flex: none; color: var(--muted); }
.dash-k-ic svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.dash-k-zahl {
  flex: none; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted);
}
.dash-k-zahl.is-warn { background: var(--warn-bg); color: var(--danger); }
.dash-k-mehr {
  flex: none; border: 0; background: none; font: inherit; font-size: 12.5px;
  color: var(--brand); cursor: pointer; padding: 2px 4px; border-radius: 7px;
}
.dash-k-mehr:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* Zeilen in den Karten: ein Klick führt in den Beleg/Datensatz. */
.dash-zeilen { display: grid; gap: 1px; }
.dash-zeile {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
  padding: 7px 6px; border-radius: 8px; color: var(--text);
}
.dash-zeile:hover { background: var(--bg); }
.dash-z-txt { flex: 1; min-width: 0; }
.dash-z-titel { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-z-sub { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-z-wert { flex: none; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dash-z-wert.is-warn { color: var(--danger); }
.dash-leer { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }

/* ---------- Globale Suche (1.0.50) ----------
   Ein Panel, das oben einschwebt: Feld im Kopf (bleibt beim Scrollen stehen),
   darunter die Treffergruppen. Am Schreibtisch öffnet die Lupe im Werkzeug-Fuß
   der Seitenleiste, in der Schublade die Lupe in der Kopfzeile. */
.gsu-backdrop { align-items: flex-start; padding-top: 8vh; }
.gsu-panel {
  width: min(640px, 94vw); max-height: 76vh; overflow: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px;
}
.gsu-kopf {
  display: flex; align-items: center; gap: 8px;
  position: sticky; top: 0; z-index: 1; background: var(--card); padding: 2px 0 8px;
}
.gsu-lupe { display: inline-flex; flex: none; }
.gsu-lupe svg { width: 20px; height: 20px; fill: var(--muted); display: block; }
.gsu-input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font: inherit; background: var(--bg); color: var(--text);
}
.gsu-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.gsu-gruppe {
  margin: 10px 2px 4px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.gsu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text); font: inherit; cursor: pointer;
}
.gsu-row:hover { background: var(--bg); }
.gsu-ic { display: inline-flex; flex: none; }
.gsu-ic svg { width: 20px; height: 20px; fill: var(--brand); display: block; }
.gsu-text { display: flex; flex-direction: column; min-width: 0; }
.gsu-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsu-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsu-leer { margin: 10px 2px; }
/* Tastatur-Hinweis am Fuß — verschwindet nie, erklärt aber nur einmal. */
.gsu-fuss { margin: 12px 2px 2px; font-size: 11.5px; color: var(--muted); text-align: center; }
/* Die Lupe der Kopfzeile gibt es nur im Schubladen-Modus: am Schreibtisch
   steht sie im Werkzeug-Fuß der Seitenleiste. */
#global-search-btn { display: none; }
body.menu-modus #global-search-btn { display: inline-flex; }

/* ================= KOMPAKTE KARTENOPTIK wie VINORUM (1.0.53) =================
   Übernommen aus VINORUMs Layout „kompakt" — dort per [data-layout='kompakt']
   geschaltet, hier fest, weil FLEXX³ nur diese eine Bauweise hat. Die Regeln
   stehen deshalb bewusst am ENDE der Datei: ohne das Attribut-Präfix hätten sie
   sonst dieselbe Spezifität wie die Grundregeln und verlören gegen sie.
   DREI bewusste Abweichungen von VINORUM:
   1. Kein globales `--shadow: none` — nur die KARTEN verlieren ihren Schatten.
      Filter-Dropdowns, Auswahllisten und Menüs hängen ebenfalls an --shadow und
      lägen sonst flach und schwer lesbar über den Listen.
   2. Die Haarlinie unter Kartentiteln nutzt --karten-haar: im klassischen
      Dunkelmodus ist --accent bei FLEXX³ Signalrot — eine rote Linie unter jedem
      Titel sähe nach Warnung aus, dort übernimmt Cyan (--brand).
   3. Die Farbe von .btn.primary bleibt — sie ist CI, nicht Kartenoptik. */
:root { --radius: 10px; --karten-haar: var(--accent); }
[data-theme='dark'][data-design='klassik'] { --karten-haar: var(--brand); }

/* Karten abrüsten: kein Schatten, feiner Rahmen, weniger Polster */
.card {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  padding: 16px 18px;
  margin-bottom: 12px;
}
/* Sektionstitel: Haarlinie unter dem Wort statt Kasten-im-Kasten */
.card h2 {
  font-size: 16px;
  padding-bottom: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--karten-haar);
}
.stage-title {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
/* Dashboard-Kartenkopf: Die Haarlinie gehört UNTER DAS WORT (VINORUM), nicht
   über die volle Kopfbreite — der Titel wächst deshalb nicht mehr mit, und was
   rechts daneben steht (Zahl, „Alle anzeigen"), rückt selbst an den Rand. */
.dash-k-kopf h2 { margin: 0; flex: none; font-size: 15.5px; font-weight: 620; letter-spacing: -.01em; }
.dash-k-kopf h2 + * { margin-left: auto; }

/* Kennzahlen: einzelne Kacheln mit 1-px-Kontur statt Rahmen, Symbol entfällt,
   Beschriftung ÜBER dem Wert, Wert am unteren Rand — so stehen die Zahlen
   bei ein- und zweizeiliger Beschriftung auf EINER Linie. */
.kpi-grid {
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  grid-auto-rows: 1fr;
}
.kpi-tile {
  border: 0;
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--border);
  padding: 12px 14px;
  gap: 4px;
  justify-content: flex-start;
}
.kpi-val { margin-top: auto; font-size: 19px; font-weight: 600; line-height: 1.25; }
.kpi-tile:hover { background: color-mix(in srgb, var(--karten-haar) 10%, transparent); }
/* Eine Kachel ohne Sprungziel darf beim Überfahren nicht nach Knopf aussehen. */
.kpi-tile.is-static:hover { background: var(--card); }
.kpi-ic { display: none; }
.kpi-label {
  font-size: 12px; text-transform: none; letter-spacing: 0; order: -1; line-height: 1.3;
}
/* Aufmerksamkeits-Kennzahlen: KEINE gefärbte Fläche (Schachbrett), sondern
   farbige KONTUR plus Punkt vor der Beschriftung — so hängt die Warnung nicht
   allein an der Farbe. FLEXX³ kennt zwei Stufen: is-accent (handeln, --brand)
   und is-danger (offene Posten, --danger). */
.kpi-tile.is-accent,
.kpi-tile.is-danger {
  background: var(--card);
  border-color: transparent;
  position: relative;
  z-index: 1;
}
.kpi-tile.is-accent { box-shadow: 0 0 0 1px var(--brand); }
.kpi-tile.is-danger { box-shadow: 0 0 0 1px var(--danger); }
.kpi-tile.is-accent:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.kpi-tile.is-danger:hover { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.kpi-tile.is-static.is-accent:hover,
.kpi-tile.is-static.is-danger:hover { background: var(--card); }
.kpi-tile.is-accent .kpi-label { color: var(--brand); font-weight: 500; }
.kpi-tile.is-danger .kpi-label { color: var(--danger); font-weight: 500; }
.kpi-tile.is-accent .kpi-label::before,
.kpi-tile.is-danger .kpi-label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: 1px;
}
.kpi-tile.is-accent .kpi-val,
.kpi-tile.is-danger .kpi-val { font-weight: 700; }

/* Chips: Umriss statt Farbfläche — auf langen Listen viel ruhiger */
.chip {
  background: transparent !important;
  border: 1px solid currentColor;
  font-weight: 500;
  padding: 1px 7px;
}
.chip-live { color: var(--ok); }
.chip-plan, .chip-soon { color: var(--muted); }

/* Listen straffen: weniger Höhe je Zeile, feinere Trenner */
.stamm-row { padding-top: 9px; padding-bottom: 9px; border-color: color-mix(in srgb, var(--border) 65%, transparent); }

/* Eingaben und Knöpfe: geradere Kanten */
input, select, textarea,
.field input, .field select, .field textarea,
.btn { border-radius: 8px; }
/* Dialoge am Rechner ebenfalls geradliniger (mobil bleibt das Bottom-Sheet) */
@media (min-width: 860px) {
  .modal-sheet { border-radius: 12px; }
}

/* ── SICHERUNGS-AMPEL (Operator-Administration) ─────────────────────────────
   Bewusst nüchtern: eine Zeile je Quelle, links ein Punkt. Die Farbe ist die
   Aussage, der Text die Begründung. Keine großen Flächen — die Karte steht
   oben und soll im Normalfall NICHT ins Auge springen, sondern nur dann, wenn
   etwas nicht stimmt.
   Die Bewertung kommt vom Server (sicherung_stand in helpers.php); hier wird
   sie nur eingefärbt. */
.stage-ic { display: inline-flex; vertical-align: -3px; margin-right: 6px; }
.stage-ic svg { width: 15px; height: 15px; fill: var(--muted); }

.sich-liste { display: flex; flex-direction: column; gap: 10px; }

.sich-zeile { display: flex; align-items: flex-start; gap: 10px; }

/* Der Punkt trägt die Ampel. 9 px reichen: Er steht neben Text, nicht allein,
   und drei Zustände lassen sich in dieser Größe sicher unterscheiden. */
.sich-punkt {
  flex: none;
  width: 9px; height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.sich-punkt.ok     { background: #16a34a; }
.sich-punkt.warn   { background: #d97706; }
.sich-punkt.fehler { background: var(--danger); }

.sich-main { min-width: 0; flex: 1; }

.sich-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sich-quelle { font-weight: 600; }
.sich-zeit { font-size: 12.5px; color: var(--muted); }

.sich-detail { font-size: 12.5px; color: var(--muted); }

/* Im Problemfall trägt die Begründung die Farbe — nicht die ganze Zeile.
   Ein rot hinterlegter Block wirkt nach dem zweiten Mal wie Tapete. */
.sich-grund { font-size: 13px; }
.sich-grund.warn   { color: #b45309; }
.sich-grund.fehler { color: var(--danger); }
[data-theme='dark'] .sich-grund.warn { color: #fbbf24; }
[data-theme='dark'] .sich-punkt.warn { background: #fbbf24; }
[data-theme='dark'] .sich-punkt.ok   { background: #4ade80; }

/* ---- Betreiber-Dashboard: Mandantenliste (1.0.55) --------------------
   Bewusst KEINE zweite Kartenoptik: Kacheln und Karten sind dieselben wie
   im Kunden-Dashboard. Eigenes Markup braucht nur die Zeile je Mandant —
   Name links, Zahlen darunter, offener Betrag rechts. */
.op-mandanten { display: flex; flex-direction: column; }

.op-m-zeile {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.op-m-zeile:last-child { border-bottom: 0; }
/* Ein deaktivierter Mandant bleibt lesbar, tritt aber zurück. */
.op-m-zeile.is-aus { opacity: .6; }

.op-m-txt { min-width: 0; flex: 1; }
.op-m-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-m-name { font-weight: 600; }
.op-m-sub { font-size: 12.5px; color: var(--muted); }
.op-m-sub.is-fehler { color: var(--danger); }

.op-m-wert { font-weight: 700; font-size: 13px; white-space: nowrap; }

/* Das Alter der Zahlen steht UNTER den Zahlen — wer die Seite öffnet, will
   sie sehen, nicht zuerst ihr Datum. */
.op-stand { margin-top: 12px; }

/* ---- Prüfseite Rechendienste (1.0.56, VORÜBERGEHEND) ------------------
   Fliegt zusammen mit renderDienste wieder raus, sobald Aufmaß und
   Sprachnotiz eingebaut sind. Deshalb bewusst wenig eigenes Markup. */
.dienst-reihe {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;
  margin: 10px 0;
}
.dienst-feld { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
.dienst-feld input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); }
.dienst-weit { flex: 1; min-width: 220px; }

/* Die Leinwand trägt das Foto UND die angetippten Punkte. Der Zeiger ist ein
   Kreuz, weil hier gezielt gesetzt wird und nicht geklickt. */
.dienst-leinwand {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 8px;
  cursor: crosshair; touch-action: none;
}
.dienst-ausgabe { margin-top: 10px; }
.dienst-ausgabe audio { width: 100%; margin-top: 8px; }

/* ---- Demodaten-Dialog (1.0.59) ---------------------------------------
   Das Protokoll des Seeders, damit man sieht, was entstanden ist — und im
   Fehlerfall, wie weit er kam. */
.demo-log {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  max-height: 320px;
  overflow: auto;
}
.demo-log-zeile {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.demo-log .kpi-grid { margin-top: 10px; }

/* ---- Wartungsmodus (1.0.60, Muster VINORUM) ---------------------------
   Das Fenster liegt ÜBER allem; dahinter ist nichts bedienbar. */
.wartung-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: var(--bg);
  /* FLEX + margin:auto am Blatt, NICHT place-items:center: Bei zentrierten
     Elementen ist ein zu hoher Inhalt am oberen Rand abgeschnitten und NICHT
     scrollbar — am Handy genau so aufgetreten (Falle aus VINORUM). */
  display: flex;
  overflow: auto;
  padding: 20px;
}
.wartung-blatt {
  margin: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 980px;
  width: 100%;
}
.wartung-text { flex: 1; min-width: 0; }
.wartung-text h1 { font-size: 27px; line-height: 1.25; margin: 0 0 10px; }
.wartung-lead { color: var(--muted); margin: 0 0 18px; max-width: 46ch; }

.wartung-punkte { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.wartung-punkt { display: flex; align-items: flex-start; gap: 10px; }
.wartung-punkt strong { display: block; font-size: 14px; }
.wartung-punkt span { font-size: 13px; color: var(--muted); }
.wartung-punkt-ic { display: inline-flex; margin-top: 2px; }
.wartung-punkt-ic svg { width: 18px; height: 18px; fill: var(--brand); }

.wartung-aktion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wartung-status { font-size: 13px; color: var(--muted); }

/* DAS BILD WIRD IMMER VOLLSTÄNDIG GEZEIGT (width:100%/height:auto statt
   object-fit: cover): In der Szene stecken Sprechblase, Wortmarke und der
   Zettel „Danke für Ihr Vertrauen" — angeschnitten fehlt genau die Botschaft.
   AUCH KEINE WEICHE MASKE aus demselben Grund: Sie würde die Sprechblase
   oben links und die Wortmarke oben rechts ausbleichen. */
.wartung-bild { flex: 0 0 420px; max-width: 46%; }
.wartung-bild img {
  width: 100%; height: auto; display: block;
  border-radius: 16px;
}

@media (max-width: 860px) {
  .wartung-blatt { flex-direction: column; gap: 14px; }
  /* Unter 860 px steht das Bild über dem Text und wird gedeckelt — sonst
     schiebt es die Erklärung aus dem Bild. Die Szene ist quadratisch, ein
     Deckel auf die HÖHE ist deshalb wirksamer als einer auf die Breite. */
  .wartung-bild { flex: none; max-width: 100%; }
  .wartung-bild img { max-height: 38vh; width: auto; margin: 0 auto; }
  .wartung-text h1 { font-size: 22px; }
}

/* Ein vergessener Wartungsmodus ist ein Ausfall, den niemand meldet — solange
   er an ist, trägt die Karte deshalb Farbe. */
.wartung-global.is-an {
  border-color: var(--danger);
  box-shadow: inset 3px 0 0 var(--danger);
}

/* ---- FLEXX³ KI (1.0.61) ------------------------------------------- */
.in-kopf { display: flex; align-items: center; gap: 18px; }
.in-kopf-bild { width: 96px; height: 96px; flex: none; border-radius: 50%; }
.in-kopf-text { min-width: 0; }
.in-kopf-text p { margin: 6px 0 0; }

.in-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.in-kachel { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
/* Die Stimmung steht links und trägt die Aussage mit: Sie ist je Funktion
   eine andere (erklären, nachdenken, Idee, Support). */
.in-stimmung { width: 76px; height: auto; flex: none; border-radius: 10px; }
.in-kachel-text { min-width: 0; flex: 1; }
.in-kachel-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.in-kachel-text .hint { margin: 0 0 10px; }
/* Was zu tun ist, wenn es nicht bereit ist — ein Zustand ohne Ausweg ist eine
   Sackgasse, und der Anwender sucht den Fehler bei sich. */
.in-ausweg { font-size: 12.5px; color: var(--muted); margin: 0; font-style: italic; }
.in-kachel.is-bereit { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }

.in-leitplanken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.in-leitplanke { display: flex; gap: 10px; align-items: flex-start; }
.in-leitplanke strong { display: block; font-size: 14px; }
.in-leitplanke span { font-size: 12.5px; color: var(--muted); }
.in-leit-ic { display: inline-flex; margin-top: 2px; }
.in-leit-ic svg { width: 18px; height: 18px; fill: var(--brand); }

@media (max-width: 620px) {
  .in-kopf { flex-direction: column; text-align: center; }
  .in-kopf-bild { width: 76px; height: 76px; }
}

/* ---- FLEXXi: der Assistent (1.0.63) ---------------------------------- */
.fx-seite { display: flex; flex-direction: column; gap: 12px; min-height: 60vh; }

.fx-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card);
}
.fx-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.fx-kopf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fx-kopf-sub { font-size: 12.5px; color: var(--muted); }

.fx-lauf { display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* Leerzustand: begrüßen und zeigen, wofür der Assistent taugt. */
.fx-start { display: flex; align-items: center; gap: 16px; }
.fx-start-bild { width: 96px; height: auto; border-radius: 10px; flex: none; }
.fx-start h2 { margin: 0 0 4px; font-size: 20px; }

.fx-vorschlaege {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px;
}
.fx-vorschlag {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: inherit; cursor: pointer; font: inherit;
}
.fx-vorschlag:hover { border-color: var(--brand); }
.fx-v-ic { display: inline-flex; margin-top: 1px; }
.fx-v-ic svg { width: 18px; height: 18px; fill: var(--brand); }
.fx-v-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-v-txt strong { font-size: 13.5px; }
.fx-v-txt span { font-size: 12.5px; color: var(--muted); }

/* Sprechblasen: die eigene Frage rechts und schmaler — man erkennt den
   Gesprächsverlauf so ohne Beschriftung. */
.fx-blase { max-width: 84%; padding: 10px 14px; border-radius: 14px; }
.fx-ich {
  align-self: flex-end; background: var(--brand); color: #fff;
  border-bottom-right-radius: 4px;
}
.fx-ich p { margin: 0; }
.fx-sie {
  align-self: flex-start; background: var(--card);
  border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.fx-sie.is-fehler { border-color: var(--danger); color: var(--danger); }
.fx-text p { margin: 0 0 8px; }
.fx-text p:last-child, .fx-text ul:last-child { margin-bottom: 0; }
.fx-text ul { margin: 0 0 8px; padding-left: 20px; }
.fx-text code { font-size: 12.5px; padding: 1px 4px; border-radius: 4px; background: var(--bg); }

/* Kennzahl-Zeile: der System-Prompt bittet um „**Wert** — Erläuterung",
   damit die Kernaussage nicht im Fließtext untergeht. */
.fx-kpi {
  display: flex; flex-direction: column; gap: 1px;
  margin: 0 0 10px; padding: 8px 12px;
  border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0;
  background: var(--bg);
}
.fx-kpi-wert { font-size: 19px; font-weight: 700; }
.fx-kpi-txt { font-size: 12.5px; color: var(--muted); }

/* Was nachgeschlagen wurde — der Unterschied zwischen „behauptet" und
   „nachgesehen". */
.fx-quellen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.fx-quellen-titel { font-size: 12px; color: var(--muted); }

.fx-tippt { display: flex; gap: 5px; padding: 14px; }
.fx-tippt span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: fx-hupf 1.2s infinite ease-in-out;
}
.fx-tippt span:nth-child(2) { animation-delay: .15s; }
.fx-tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes fx-hupf { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* Eingabe als Pille mit rundem Senden-Knopf. */
.fx-pille {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 7px 7px 7px 14px;
  border: 1px solid var(--border); border-radius: 24px; background: var(--card);
  position: sticky; bottom: 8px;
}
.fx-feld {
  flex: 1; border: 0; background: none; color: var(--text);
  font: inherit; resize: none; outline: none; padding: 7px 0; max-height: 160px;
}
.fx-senden {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fx-senden svg { width: 18px; height: 18px; fill: #fff; }

/* Der schwebende FLEXXi-Knopf: NUR DAS GESICHT, rund (Muster VINORUM VINI).
   Kein Text daneben — er steht auf jeder Seite und soll nichts verdecken. */
#flexxi-fab {
  position: fixed; right: 16px; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 20px);
  width: 54px; height: 54px; border-radius: 50%; padding: 0;
  border: 2px solid var(--brand); background: var(--card);
  cursor: pointer; z-index: 30; overflow: visible;
  box-shadow: 0 4px 14px rgba(11, 19, 32, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
#flexxi-fab > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
#flexxi-fab:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(11, 19, 32, .3); }
#flexxi-fab:active { transform: scale(.97); }

/* Das × zum Ausblenden. Etwas aus dem Daumenweg gerückt — zusammen mit der
   Rückfrage kostet ein Fehlgriff dann nichts. */
.flexxi-fab-x {
  position: absolute; top: -9px; right: -9px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--text); color: var(--card);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer;
}
.flexxi-fab-x svg { width: 12px; height: 12px; fill: currentColor; }

@media (min-width: 1280px) {
  /* Am Schreibtisch gibt es keine untere Leiste — der Knopf rückt nach unten. */
  #flexxi-fab { bottom: 24px; right: 24px; }
}
}

/* ══════════════════ FLEXX³ CONNECTOR — Verwaltungsseite (1.1.40) ══════════════════
   Drei Bloecke: Installation, Geraete, Warteschlangen. FARBE NUR FUER STOERUNG
   (VINORUM-Merksatz): Ein dauergruener Geraete-Block waere Dekoration -
   auffaellig ist hier nur, was nicht stimmt. */
.conn-kopier { display: flex; gap: 8px; align-items: center; }
.conn-kopier > input { flex: 1 1 auto; min-width: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 13px; }
.conn-liste { display: grid; gap: 10px; }
.conn-geraet { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.conn-geraet-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.conn-geraet-kopf > input { flex: 0 1 220px; min-width: 0; }
.conn-geraet-meta { font-size: 12px; color: var(--muted); }
.conn-gesehen { font-size: 12px; margin-left: auto; }
.conn-geraet-akt { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.conn-drucker { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; display: grid; gap: 4px; }
.conn-drucker-zeile { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.conn-drucker-name { font-size: 13px; font-weight: 600; }
/* Je Ziel eine Zeile: links der Name, rechts die Felder - und die fuellen
   sich selbst aus dem GEMELDETEN Bestand, es wird nichts getippt. */
.conn-ziele { display: grid; gap: 8px; }
.conn-ziel { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px;
  align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.conn-ziel-name { font-size: 13px; font-weight: 600; }
.conn-ziel-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.conn-prot td { vertical-align: top; }
@media (max-width: 760px) {
  .conn-ziel { grid-template-columns: 1fr; }
}


/* ═══════════ DRUCKAUSWAHL (Muster VINORUM, 1.1.49) ═══════════
   Wo EIN Dokument offen ist, steht die Ausgabe offen da statt in einem Menue:
   je Dokument ein gerahmtes Kaestchen mit Namen, dahinter E-Mail, Drucken,
   Herunterladen, Teilen. Das Export-Menue bleibt den LISTEN ("welches
   Format?") - bei einem offenen Beleg ist das Format laengst klar. */
.druck-auswahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.druck-gruppe {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 10px;
}
.druck-gruppe .druck-label {
  font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 2px;
}
.druck-gruppe .druck-act { padding: 6px 8px; }
.druck-gruppe .druck-act svg { width: 18px; height: 18px; fill: currentColor; }
.druck-gruppe .druck-act:disabled { opacity: 0.35; cursor: default; }
.druck-gruppe .druck-act:disabled:hover { background: none; }


/* ═══════════ USt-IdNr. PRUEFEN (1.1.50) ═══════════
   Das Blatt unter dem Feld nutzt die Huelle des Katalog-Aufklappers (.tk-drop):
   dieselbe Optik, derselbe Weg zum Schliessen. */
.ustid-drop { left: auto; right: 0; min-width: 320px; max-width: min(460px, 92vw); }
.ustid-inhalt { padding: 8px 10px 10px; display: grid; gap: 5px; }
.ustid-zeile { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.ustid-lab { color: var(--muted); }
.ustid-wert { overflow-wrap: anywhere; }
.ustid-wert.is-ok { color: var(--ok); font-weight: 600; }
.ustid-wert.is-weg { color: var(--danger); font-weight: 600; }
.ustid-untertitel { margin: 6px 0 1px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.ustid-akt { margin-top: 6px; }
.ustid-stand { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ustid-stand[hidden] { display: none; }


/* ═══════════ IBAN-PRUEFZIFFER (1.1.53) ═══════════
   Stille rote Kante am Feld, darunter der Grund. KEIN Blockieren: Die
   Pruefziffer kann stimmen und das Konto trotzdem falsch sein - und in
   Altbestaenden steht manches, das niemand mehr aendern kann. */
input.is-fehler { border-color: var(--danger); }
input.is-fehler:focus { outline-color: var(--danger); }
.iban-hinweis { margin: 4px 0 0; color: var(--danger); }
.iban-hinweis[hidden] { display: none; }
/* Die Bankauskunft steht ruhig darunter - sie ist eine Bestaetigung, keine
   Warnung. Nur eine unbekannte Bankleitzahl wird rot. */
.iban-bank { margin: 4px 0 0; }
.iban-bank[hidden] { display: none; }
.iban-bank.is-fehler { color: var(--danger); }


/* ═══════════ CRM → AUFGABEN (1.1.77, Vorbild SISPRO-IIS) ═══════════
   Die Arbeitsliste des Tages. Der Filterkopf traegt seit 1.1.79 nur noch drei
   Dinge, und zwei davon sind derselbe Baustein (.fdrop-btn): „Mitarbeiter" und
   „Filter". Die sechs offen stehenden Felder mit Beschriftung darueber sind
   entfallen - eine Zeile, in der man staendig eines und selten vier braucht,
   kostet mehr Platz als sie Uebersicht bringt. */
/* Der Haken steht am ENDE der Zeile, nicht zwischen den Feldern: Er filtert
   nicht, er schaltet die Vorschau darunter. */
.auf-vorschau { margin-left: auto; }
/* Die markierte Zeile bleibt sichtbar markiert - die Vorschau darunter gehoert
   zu ihr, und ohne Markierung waere nicht zu sehen, wozu. */
.auf-zeile.is-mark {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
/* DIE LISTE ROLLT FUER SICH (1.1.81, Betreiber 29.09.2026): Acht Zeilen, dann
   rollt sie. Sonst schoeben hundert offene Aufgaben die Historievorschau ans
   Seitenende, wo sie niemand zu Gesicht bekommt - und genau sie ist der Grund,
   warum man eine Zeile ueberhaupt markiert. Die Hoehe steht in Zeilen, nicht
   in Pixeln: Aendert sich die Zeilenhoehe, stimmt die Zahl weiter. */
.auf-liste {
  --auf-zeilen: 8;
  --auf-zeile-h: 58px;
  max-height: calc(var(--auf-zeilen) * var(--auf-zeile-h));
  overflow-y: auto;
  overscroll-behavior: contain;        /* nicht die ganze Seite mitreissen */
}

/* „28 Aufgaben" wie im Altsystem: die Zahl gehoert unter die Liste, nicht in
   die Ueberschrift - dort waere sie eine Behauptung, hier ein Abschluss. */
.auf-fuss { margin: 10px 2px 0; }

/* ════════════ FLEXX³ WEBHOOKS (W1, Einstellungen) ════════════
   Das Protokoll ist eine Liste von Aufklappern: In der Zeile steht, OB und
   WANN etwas kam; der Rohtext - der eigentliche Wert - steht hinter einem
   Klick. Sonst haette jede Zeile zwanzig Zeilen JSON. */
.wh-eingang { border-bottom: 1px solid var(--border); padding: 6px 2px; }
.wh-eingang:last-child { border-bottom: 0; }
.wh-eingang > summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  cursor: pointer; font-size: 13.5px; list-style: none;
}
.wh-eingang > summary::-webkit-details-marker { display: none; }
.wh-eingang > summary::before {
  content: 'ƒA'; color: var(--muted); font-size: 16px; line-height: 1;
  transition: transform .15s ease;
}
.wh-eingang[open] > summary::before { transform: rotate(90deg); }
.wh-zeit { font-variant-numeric: tabular-nums; color: var(--muted); flex: none; }
.wh-fehler { color: var(--danger); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wh-ip { margin-left: auto; color: var(--muted); font-size: 12px; flex: none; }

/* Rohtext und Beispielaufruf: feste Schriftbreite, umbrechend - eine Zeile,
   die waagerecht rollt, liest niemand. */
.wh-roh {
  margin: 6px 0 2px; padding: 9px 11px; border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 6%, var(--bg));
  border: 1px solid var(--border);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.wh-curl { margin-bottom: 14px; }
.wh-felder code { font-size: 12.5px; }

/* FELDZUORDNUNG (W2): links unser Feld, rechts der Name aus dem Formular.
   Zweispaltig, damit die Paare als Paare lesbar bleiben; am Telefon
   untereinander, sonst bliebe fuer das Eingabefeld nichts uebrig. */
.wh-zuord {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 6px 14px; margin: 4px 0 12px;
}
.wh-zuord-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wh-zuord-zeile > code { flex: 0 0 108px; color: var(--muted); font-size: 12.5px; }
.wh-zuord-zeile > input { flex: 1 1 auto; min-width: 0; }
.wh-eingang-akt { margin: 6px 0 4px; }

/* DATACONTROL: Abrufzeile (kein Aufklapper - es gibt nichts aufzuklappen) und
   die Knopfreihen, die in einer Karte stehen statt in einem Dialog. */
.dc-abruf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.dc-akt { justify-content: flex-start; margin: 10px 0 4px; }

/* DIKTAT AM TEXTFELD (1.1.88): Der Knopf steht UNTER dem Feld, links buendig -
   ein Textfeld ist breit, und ein Knopf am rechten Rand waere bei jeder
   Fensterbreite woanders. Waehrend der Aufnahme pulst er rot; waehrend der
   Erkennung ist er gesperrt und sagt das auch. */
.diktat-feld { display: flex; flex-direction: column; gap: 6px; }
.diktat-akt { display: flex; }
.diktat-akt .mic-btn { padding: 6px 12px; font-size: 13.5px; }

/* ═══════ DATEIEN ABLEGEN — UEBERALL IM FENSTER (1.1.92) ═══════
   Kein Rechteck mehr, das man treffen muss: Sobald eine Datei ueber dem Fenster
   haengt, legt sich ein Blatt darueber. Es faengt keine Ereignisse ab
   (pointer-events: none) - die Fenster-Horcher machen die Arbeit. */
.ablage-global {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 14%, rgba(11, 19, 32, .55));
  pointer-events: none;
}
.ablage-global-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 34px; border-radius: 18px;
  border: 2px dashed var(--brand); background: var(--card);
  box-shadow: 0 18px 50px rgba(11, 19, 32, .45);
  max-width: min(460px, 86vw); text-align: center;
}
.ablage-global-text { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.ablage-global-sub { margin: 0; font-size: 13.5px; color: var(--muted); }
.ablage-ic { display: inline-flex; color: var(--brand); }
.ablage-ic svg { width: 38px; height: 38px; fill: currentColor; }
.ablage-hinweis { margin: -4px 0 10px; }
.wh-alias { color: var(--muted); font-size: 12.5px; }
.wh-pflicht { color: var(--danger); font-weight: 700; }