/* ═══════════════════════════════════════════════════════
   EnergieKompass · theme.css v5.1
   Clean, flat, navy/teal. Alle bestehenden Klassen erhalten.
   ═══════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --bg:    #F5F4ED;
  --sf:    #FFFFFF;
  --nv:    #1C2E4A;
  --nv2:   #253d60;
  --tl:    #1D9E75;
  --tl2:   #178a65;
  --tlb:   #E8F7F1;
  --bd:    #E0E8F0;
  --bds:   #F0F4F8;
  --tx:    #1C2E4A;
  --t2:    #4A6080;
  --mu:    #8A9BB0;
  --dg:    #E24B4A;
  --wn:    #E08B3A;
  --in:    #2563EB;
  --pu:    #7C3AED;
  --ok:    #1D9E75;
  --font:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  'SF Mono', 'Fira Code', Consolas, monospace;
  --r:     12px;
  --r-sm:  8px;
  --r-xs:  6px;
  --content-max: 1680px;
}

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
  margin-left: 230px;
  min-height: 100vh;
  overflow-x: hidden;
}
body.pg-login, body.pg-bare { margin-left: 0 !important; }

.page-wrap { padding: 24px 28px 60px; max-width: var(--content-max, 1680px); margin-inline: auto; }
html.cw-voll .page-wrap { max-width: none; }
@media (max-width: 768px) { .page-wrap { padding: 16px; } }

/* iOS */
.mbody, .overlay .modal, .kf-overlay .modal,
[style*="overflow-y: auto"], [style*="overflow-y:auto"] { -webkit-overflow-scrolling: touch; }
.mbody { overscroll-behavior-y: contain; }
@supports (-webkit-touch-callout: none) {
  .modal { max-height: 88svh; }
  .overlay, .kf-overlay { align-items: flex-start; padding-top: env(safe-area-inset-top, 10px); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }

/* ── SIDEBAR ─────────────────────────────────────────── */
@media (max-width: 900px) { body:not(.pg-login):not(.pg-bare) { margin-left: 56px; } }
@media (max-width: 640px) { body:not(.pg-login):not(.pg-bare) { margin-left: 0; padding-bottom: 64px; } }

/* ── TYPOGRAPHY ──────────────────────────────────────── */
.page-header { margin-bottom: 22px; }
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--nv); }
.page-header p  { font-size: 13px; color: var(--mu); margin-top: 3px; }

/* ── TOPBAR ──────────────────────────────────────────── */
.top-header, .topbar {
  background: var(--nv);
  height: 48px;
  display: flex; align-items: center; padding: 0 22px; gap: 10px;
  position: sticky; top: 0; z-index: 200;
  flex-shrink: 0;
}
.top-header h1, .tb-title { font-size: 14px; font-weight: 600; color: #fff; }
.tb-sub { font-size: 11px; color: rgba(255,255,255,.4); margin-left: 2px; }
.top-header-r, .tb-r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.tb-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 12px; height: 30px; border-radius: var(--r-xs);
  border: 0.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.85);
  cursor: pointer; font-family: var(--font);
}
.tb-btn:hover { background: rgba(255,255,255,.18); }
.tb-btn.p { background: var(--tl); border-color: var(--tl); color: #fff; }

/* ── CARDS ───────────────────────────────────────────── */
.card, .form-card, .list-card {
  background: var(--sf);
  border: 0.5px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
}
.card-hdr, .ch {
  padding: 11px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 0.5px solid var(--bds);
}
.card-hdr-t, .ch-t {
  font-size: 13px; font-weight: 600; color: var(--nv);
  display: flex; align-items: center; gap: 6px;
}
.card-cnt {
  font-size: 11px; color: var(--mu);
  background: var(--bds); border-radius: 10px; padding: 1px 7px;
}
.card-body { padding: 12px 16px; }
.card-navy-hdr { padding: 12px 18px; background: var(--nv); color: #fff; }
.card-navy-hdr h2 { font-size: 13.5px; font-weight: 600; }
.card-navy-hdr p  { font-size: 11px; opacity: .6; margin-top: 2px; }

/* ── FORMS ───────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select {
  font-family: var(--font); font-size: 13px; color: var(--tx);
  background: var(--sf); border: 0.5px solid var(--bd);
  border-radius: var(--r-xs); padding: 8px 10px;
  outline: none; width: 100%;
  transition: border-color .12s;
  -webkit-appearance: none; appearance: none;
}
/* Checkboxen + Radio: native Darstellung behalten */
input[type="checkbox"], input[type="radio"] {
  appearance: checkbox; -webkit-appearance: checkbox;
  width: auto; min-width: unset; padding: 0;
  background: none; border: none; border-radius: 0;
  accent-color: var(--tl);
  cursor: pointer; flex-shrink: 0;
}
input[type="radio"] { appearance: radio; -webkit-appearance: radio; }

/* ── AUSWAHLFELDER SIND ALS AUSWAHL ERKENNBAR ───────────────────────────────
   Oben steht appearance:none - das nimmt dem <select> den nativen Pfeil. Ohne
   Ersatz sieht ein Auswahlfeld genau aus wie ein Textfeld: man klickt hinein
   und wundert sich, dass man nicht tippen kann. Der Pfeil kommt als
   eingebettete Grafik, damit keine zusaetzliche Datei geladen werden muss.
   Rechts Platz lassen, sonst laeuft langer Text unter den Pfeil. */
/* Warum !important, obwohl es sonst zu vermeiden ist: 56 Regelsaetze in den
   Seiten setzen die KURZFORM `background:` auf Auswahlfelder. Die Kurzform
   setzt background-image implizit auf none - der Pfeil waere auf fast jeder
   Seite wieder weg, ohne dass es jemand merkt. Betroffen sind nur die vier
   Eigenschaften, die den Pfeil ausmachen; Farbe und Rahmen bleiben den Seiten
   ueberlassen. */
select,
select.kf-inp, select.kf-sel, select.fsel, select.fsel2, select.lg-sel,
select.finp, select.ekvw-in {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A9BB0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 30px !important;
  cursor: pointer;
}
/* Mehrfachauswahl klappt nicht auf - dort waere der Pfeil eine Luege. */
select[multiple], select[size]:not([size="1"]) {
  background-image: none !important; padding-right: 10px !important;
}
html.dark-mode select, body.dark-mode select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A9B4C2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus { border-color: var(--tl); box-shadow: 0 0 0 2px rgba(29,158,117,.08); }
input::placeholder, textarea::placeholder { color: var(--mu); }
textarea { resize: vertical; min-height: 65px; }

.fgrp  { display: flex; flex-direction: column; gap: 4px; }
.fgrp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flbl, .slbl, .field-label {
  font-size: 10.5px; font-weight: 600; color: var(--mu);
  text-transform: uppercase; letter-spacing: .06em; display: block;
}
.fg  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.fg3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 14px; }
.ff  { grid-column: 1 / -1; }
@media (max-width: 768px) { .fg, .fg3, .fgrp-row { grid-template-columns: 1fr !important; } }

.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border: 0.5px solid var(--bd);
  border-radius: 20px; cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--t2);
  background: var(--sf); transition: all .12s;
}
.chip:hover { border-color: var(--tl); color: var(--nv); }
.chip.on { border-color: var(--tl); background: var(--tlb); color: var(--tl); font-weight: 600; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn, .btn-g, .btn-l, .btn-ok, .btn-r, .btn-s,
button.btn, button.btn-g, button.btn-l, button.btn-ok {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 16px; height: 36px; border-radius: var(--r-xs);
  font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: var(--font); border: none; white-space: nowrap;
  transition: all .12s;
}
.btn-g { background: var(--nv); color: #fff; }
.btn-g:hover { background: var(--nv2); }
.btn-ok { background: var(--tl); color: #fff; }
.btn-ok:hover { background: var(--tl2); }
.btn-l, .btn-s {
  background: var(--sf); color: var(--t2);
  border: 0.5px solid var(--bd) !important;
}
.btn-l:hover, .btn-s:hover { border-color: var(--nv) !important; color: var(--nv); }
.btn-r { background: #FEF2F2; color: var(--dg); border: 0.5px solid #FECACA !important; }
.btn-r:hover { background: var(--dg); color: #fff; }
.btn-row {
  display: flex; gap: 8px; padding: 12px 18px;
  border-top: 0.5px solid var(--bds);
}
.btn-row .btn-g, .btn-row .btn-ok, .btn-row .btn-l { flex: 1; justify-content: center; }

/* ── TABS ────────────────────────────────────────────── */
.tabs, .form-tabs {
  display: flex; background: var(--sf);
  border-bottom: 0.5px solid var(--bd);
  overflow-x: auto; padding: 0 12px;
  flex-shrink: 0;
}
.tab, .form-tab {
  padding: 10px 12px; font-size: 12px; font-weight: 500;
  color: var(--mu); border: none; background: none;
  font-family: var(--font); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
  min-height: 38px; display: inline-flex; align-items: center; gap: 5px;
  transition: color .12s;
}
/* Der aktive Reiter wird EINGEFAERBT, nicht nur unterstrichen. Eine 2px-Linie
   unter grauem Text ist auf einem Laptopbildschirm leicht zu uebersehen -
   besonders, wenn die Reiterleiste am oberen Rand eines Inhalts klebt. */
.tab.on, .tab.active, .form-tab.on, .form-tab.active {
  color: #0F6E56; border-bottom-color: var(--tl); font-weight: 600;
  background: var(--tlb); border-radius: var(--r-sm) var(--r-sm) 0 0;
}
/* Im dunklen Modus darf die Fuellung nicht hell bleiben: --tlb wird dort nicht
   umdefiniert, und einige Seiten setzen fuer den aktiven Reiter eine helle
   Schrift (#9FE1CB). Hell auf hell waere unlesbar. Beide Schreibweisen, weil
   theme.css html.dark-mode benutzt und die Seiten body.dark-mode. */
html.dark-mode .tab.on, html.dark-mode .tab.active,
html.dark-mode .form-tab.on, html.dark-mode .form-tab.active,
body.dark-mode .tab.on, body.dark-mode .tab.active,
body.dark-mode .form-tab.on, body.dark-mode .form-tab.active {
  background: rgba(29,158,117,.18);
}
.tab:hover:not(.on):not(.active) { color: var(--t2); }
.tc {
  font-size: 10px; background: var(--bds); color: var(--mu);
  border-radius: 8px; padding: 1px 6px; margin-left: 3px;
}
.form-tab.active .tc { background: var(--dg); color: #fff; }

/* ── KPI STRIP ───────────────────────────────────────── */
.kpi-strip, .kpi-row, .stats-wrap {
  background: var(--sf); border-bottom: 0.5px solid var(--bd);
  display: flex; flex-wrap: nowrap; overflow-x: auto;
  position: sticky; top: 0; z-index: 100;
}
.stats-wrap > .inner { display: contents; }
.stats-divider { width: 1px; flex-shrink: 0; background: var(--bd); align-self: stretch; margin: 6px 0; }
.kpi { padding: 10px 18px; border-right: 0.5px solid var(--bds); min-width: 90px; flex-shrink: 0; }
.kpi:last-child { border-right: none; }
.kpi-l { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mu); margin-bottom: 3px; display: block; }
.kpi-v, .kpi-n { font-size: 20px; font-weight: 700; color: var(--nv); line-height: 1; display: block; }
.kpi-v.g { color: var(--tl); } .kpi-v.r { color: var(--dg); }
.kpi-v.a { color: var(--wn); } .kpi-v.p { color: var(--pu); }
.kpi-s, .kpi-sub { font-size: 10px; color: var(--mu); margin-top: 2px; display: block; }

/* ── FILTER ROW ──────────────────────────────────────── */
.frow, .filter-row, .stats-row {
  background: var(--sf); border-bottom: 0.5px solid var(--bd);
  padding: 7px 16px; display: flex; gap: 5px; flex-wrap: wrap; overflow-x: auto;
}
.fc, .sc {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border: 0.5px solid var(--bd);
  border-radius: var(--r-xs); background: var(--sf);
  font-size: 11px; color: var(--t2); cursor: pointer; white-space: nowrap;
  transition: all .12s;
}
.fc:hover, .sc:hover { border-color: var(--tl); }
.fc.on, .sc.on { border-color: var(--nv); background: var(--tlb); color: var(--nv); font-weight: 600; }
.fc-dot, .sc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.fc-n, .sc-cnt { font-size: 12px; font-weight: 700; color: var(--nv); }

/* ── TOOLBAR ─────────────────────────────────────────── */
.toolbar {
  background: var(--sf); border-bottom: 0.5px solid var(--bd);
  padding: 7px 16px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.srch { position: relative; flex: 1; min-width: 160px; }
.srch input {
  background: var(--bg); border: 0.5px solid var(--bd);
  border-radius: var(--r-xs); padding: 7px 10px 7px 28px;
  font-size: 12px; color: var(--tx); height: 33px;
}
.srch input:focus { border-color: var(--tl); background: var(--sf); box-shadow: none; }
.srch-ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--mu); pointer-events: none; }
.fsel {
  background: var(--bg); border: 0.5px solid var(--bd);
  border-radius: var(--r-xs); padding: 0 10px;
  font-size: 12px; color: var(--t2); height: 33px;
}
body.pg-pipeline .toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 5px 8px; padding: 8px 16px;
}
body.pg-pipeline .toolbar > *:nth-child(1) { grid-column: 1/span 2; grid-row: 1; }
body.pg-pipeline .toolbar > *:nth-child(2) { grid-column: 3; grid-row: 1; width: 100%; }
body.pg-pipeline .toolbar > *:nth-child(3) { grid-column: 4; grid-row: 1; width: 100%; }
body.pg-pipeline .toolbar > *:nth-child(4) { grid-column: 5; grid-row: 1; width: 100%; }
body.pg-pipeline .toolbar > *:nth-child(5) { grid-column: 1; grid-row: 2; justify-self: start; }
body.pg-pipeline .toolbar > *:nth-child(6) { grid-column: 2; grid-row: 2; justify-self: start; }
body.pg-pipeline .toolbar > *:nth-child(7) { grid-column: 3; grid-row: 2; justify-self: start; }
body.pg-pipeline .toolbar > *:nth-child(8) { grid-column: 4; grid-row: 2; justify-self: end; }
body.pg-pipeline .toolbar > *:nth-child(9) { grid-column: 5; grid-row: 2; justify-self: end; }
body.pg-pipeline .toolbar .fsel { height: 33px; width: 100%; }

/* ── TABLE ───────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
thead tr { background: var(--bds); border-bottom: 0.5px solid var(--bd); }
thead th {
  padding: 7px 12px; text-align: left;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mu); white-space: nowrap;
}
tbody tr { border-bottom: 0.5px solid #F5F6F8; cursor: pointer; transition: background .08s; }
tbody tr:hover { background: #FAFCFF; }
tbody td { padding: 8px 12px; font-size: 12.5px; vertical-align: middle; }
.tn { font-size: 13px; font-weight: 600; color: var(--nv); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: block; }
.ts { font-size: 10.5px; color: var(--mu); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: block; }
.fd, .tm { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.fd.o, .fd.overdue { color: var(--dg); } .fd.s, .fd.soon { color: var(--wn); }
.tsec-aufgaben td  { background: #FFF8E6; color: #8B5A00; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tsec-anfragen td  { background: #EEF6FF; color: #1A4C9A; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tsec-aktiv td     { background: #EDFAF4; color: #155D35; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tsec-archiv td    { background: var(--bds); color: var(--mu); font-size: 10px; font-weight: 700; text-transform: uppercase; }

/* ── BADGES ──────────────────────────────────────────── */
.bdg, .badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.b-neu           { background: #EEF5FF; color: #1A4C9A; }
.b-angebot       { background: #FFF5E6; color: #8B5A00; }
.b-erteilt,
.b-bearbeitung   { background: #EDFAF4; color: #155D35; }
.b-schluss       { background: #E5F3FF; color: #0A5080; }
.b-nachfassen    { background: #FFF0F0; color: #8B1B1B; }
.b-abgeschlossen { background: #E8FAF2; color: #0A5C32; }
.b-aufgabe       { background: #F5F5F5; color: #666; }
.b-wartend       { background: #F3F0FF; color: #5B21B6; }
.lbl-h { background: #EDFAF4; color: #155D35; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.lbl-i { background: #FFF5E6; color: #8B5A00; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.lbl-b { background: #EEF5FF; color: #1A4C9A; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.lbl-p { background: #F3F0FF; color: #5B21B6; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.amp, .ampel { display: flex; align-items: center; gap: 3px; }
.apdot, .ap { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ap-ang { background: var(--wn); } .ap-ab { background: var(--in); }
.ap-sl  { background: var(--tl); } .ap-off { background: #D1D5DB; }

/* ── STATUS FLOW ─────────────────────────────────────── */
.sf, .status-flow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sf-step, .sf-s {
  display: inline-flex; align-items: center; padding: 5px 11px;
  border-radius: 20px; font-size: 11.5px; font-weight: 500; cursor: pointer; border: none;
  transition: all .12s;
}
.sf-arr { font-size: 9px; color: #ccc; }
.sf-neu           { background: #F0F2F5; color: #666; }
.sf-termin        { background: #EEF5FF; color: #1A4C9A; }
.sf-angebot       { background: #FFF5E6; color: #8B5A00; }
.sf-auftrag,
.sf-bearbeitung   { background: #EDFAF4; color: #155D35; }
.sf-schluss       { background: #E5F3FF; color: #0A5080; }
.sf-abgeschlossen { background: #DCFCE7; color: #166534; }
.sf-nachfassen    { background: #FFF0F0; color: #8B1B1B; }
.sf-wartend       { background: #F3F0FF; color: #5B21B6; }
.sf-step.sf-active { outline: 2px solid var(--nv); outline-offset: 2px; }

/* ── MODAL ───────────────────────────────────────────── */
.overlay, .kf-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 8000;
  align-items: center; justify-content: center; padding: 16px;
}
.overlay.open, .kf-overlay.open { display: flex; }
.modal, .kf-modal {
  background: var(--sf); border: 0.5px solid var(--bd);
  border-radius: var(--r); width: 100%; max-width: 900px;
  max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  display: flex; flex-direction: column; overflow: hidden;
}

/* Modal header — Navy */
.mhdr, .modal-hdr {
  padding: 12px 16px;
  background: var(--nv);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.mhdr-title, .modal-title { font-size: 14px; font-weight: 600; color: #fff; }
.mhdr-sub { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 2px; }
.mclose, .modal-close {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: none;
  color: rgba(255,255,255,.7); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.mclose:hover { background: rgba(255,255,255,.25); color: #fff; }
.mbody, .modal-body { padding: 0; overflow-y: auto; flex: 1; }
.mfoot, .modal-footer {
  padding: 10px 16px; border-top: 0.5px solid var(--bds);
  display: flex; gap: 8px; justify-content: flex-end;
  flex-shrink: 0; background: var(--sf);
}
@media (max-width: 640px) {
  .overlay { padding: 0; align-items: flex-end; }
  .modal { width: 100%; max-width: none; border-radius: var(--r) var(--r) 0 0; max-height: 92vh; }
}

/* ── FORM PANELS (inside modal) ──────────────────────── */
.form-panel { padding: 14px 18px; }
.fm-divider {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; color: var(--mu);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 16px 0 10px;
}
.fm-divider::after {
  content: ''; flex: 1; height: 0.5px; background: var(--bd);
}
.fm-divider.ff { grid-column: 1/-1; }
/* Pipe form-specific input */
.finp {
  padding: 8px 10px; border: 0.5px solid var(--bd);
  border-radius: var(--r-xs); font-size: 13px; font-family: var(--font);
  color: var(--tx); background: var(--sf); width: 100%;
  transition: border-color .12s; outline: none;
}
.finp:focus { border-color: var(--tl); box-shadow: 0 0 0 2px rgba(29,158,117,.08); }
.fsel2 {
  padding: 8px 10px; border: 0.5px solid var(--bd);
  border-radius: var(--r-xs); font-size: 13px; font-family: var(--font);
  color: var(--tx); background: var(--sf); width: 100%;
  -webkit-appearance: none; appearance: none; outline: none;
  transition: border-color .12s; cursor: pointer;
}
.fsel2:focus { border-color: var(--tl); box-shadow: 0 0 0 2px rgba(29,158,117,.08); }

/* ── V5 COMPONENTS ───────────────────────────────────── */

/* Kunde/Liegenschaft block in form */
.ek-entity-block {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bds); border: 0.5px solid var(--bd);
  border-radius: var(--r-sm); margin-bottom: 12px;
}
.ek-entity-block.selected { background: var(--tlb); border-color: var(--tl); }
.ek-entity-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--nv); display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600; color: #fff;
  flex-shrink: 0;
}
.ek-entity-name { font-size: 13px; font-weight: 600; color: var(--nv); }
.ek-entity-meta { font-size: 11px; color: var(--mu); margin-top: 1px; }
.ek-entity-btn {
  margin-left: auto; background: none;
  border: 0.5px solid var(--bd); border-radius: var(--r-xs);
  padding: 4px 10px; font-size: 11px; color: var(--mu);
  cursor: pointer; font-family: var(--font); white-space: nowrap;
  transition: all .12s;
}
.ek-entity-btn:hover { border-color: var(--nv); color: var(--nv); }

/* Status select with dot */
.ek-status-wrap { position: relative; }
.ek-status-dot {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tl); pointer-events: none;
}
.ek-status-sel {
  padding-left: 26px !important;
}

/* Section divider with icon */
.ek-divider {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; color: var(--mu);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 16px 0 10px; grid-column: 1/-1;
}
.ek-divider::after { content: ''; flex: 1; height: 0.5px; background: var(--bd); }
.ek-divider-ico { font-size: 13px; color: var(--tl); }

/* Mini stats row */
.ek-mini-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin-bottom: 12px;
}
.ek-mini-stat {
  background: var(--bds); border-radius: var(--r-xs);
  padding: 8px 10px; text-align: center;
}
.ek-mini-stat-val { font-size: 16px; font-weight: 700; color: var(--nv); line-height: 1; }
.ek-mini-stat-lbl { font-size: 10px; color: var(--mu); margin-top: 3px; }
.ek-mini-stat.green .ek-mini-stat-val { color: var(--tl); }
.ek-mini-stat.red   .ek-mini-stat-val { color: var(--dg); }
.ek-mini-stat.amber .ek-mini-stat-val { color: var(--wn); }

/* Nächste Aktion field */
.ek-aktion-inp {
  background: #FFFBEB; border: 0.5px solid #FCD34D;
  border-radius: var(--r-xs); padding: 8px 10px;
  font-size: 13px; font-family: var(--font); color: #633806;
  width: 100%; outline: none; transition: border-color .12s;
}
.ek-aktion-inp:focus { border-color: #F59E0B; box-shadow: 0 0 0 2px rgba(251,191,36,.12); }

/* ── DETAIL PANEL (Overview) ─────────────────────────── */
#detPanel {
  display: none; position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  height: 72vh; width: 560px; max-width: 95vw;
  background: var(--sf); border: 0.5px solid var(--bd);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  border-radius: var(--r); z-index: 7000;
  flex-direction: column; overflow: hidden;
}
#detPanel.open { display: flex; }
#detPanel-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 6999; }
#detPanel-backdrop.open { display: block; }

/* DP header — Navy */
.dp-hdr { background: var(--nv); padding: 14px 16px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; }
.dp-hdr-title, .dp-title { font-size: 14px; font-weight: 600; color: #fff; flex: 1; margin-right: 8px; line-height: 1.3; }
.dp-hdr-sub, .dp-sub { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 3px; }
.dp-close { background: rgba(255,255,255,.12); border: none; color: rgba(255,255,255,.7); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.dp-close:hover { background: rgba(255,255,255,.25); color: #fff; }

/* DP body */
.dp-body { flex: 1; overflow-y: auto; }

/* Mini-stats inside DP */
.dp-mini-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--bd); border-bottom: 0.5px solid var(--bd); }
.dp-mini-stat { padding: 10px 12px; background: var(--sf); text-align: center; }
.dp-mini-stat-val { font-size: 15px; font-weight: 700; color: var(--nv); line-height: 1; }
.dp-mini-stat-lbl { font-size: 10px; color: var(--mu); margin-top: 2px; }
.dp-mini-stat.red .dp-mini-stat-val { color: var(--dg); }
.dp-mini-stat.green .dp-mini-stat-val { color: var(--tl); }
.dp-mini-stat.amber .dp-mini-stat-val { color: var(--wn); }

/* DP sections */
.dp-section { padding: 12px 16px; border-bottom: 0.5px solid var(--bds); }
.dp-section:last-child { border-bottom: none; }
.dp-sch, .dp-section-title {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--mu); margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px;
}
.dp-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 12.5px; }
.dp-lbl, .dp-l { color: var(--mu); flex-shrink: 0; margin-right: 8px; }
.dp-val, .dp-v { font-weight: 500; text-align: right; color: var(--tx); }
.dp-notiz, .dp-n {
  background: var(--bds); border-radius: var(--r-xs);
  padding: 8px 10px; font-size: 12px; line-height: 1.6; color: var(--t2);
  margin-top: 6px;
}
.dp-aktion-box {
  background: #FFFBEB; border: 0.5px solid #FCD34D;
  border-radius: var(--r-xs); padding: 8px 10px;
  font-size: 12px; color: #633806; line-height: 1.5;
}

/* DP footer */
.dp-foot { padding: 10px 14px; border-top: 0.5px solid var(--bds); display: flex; gap: 6px; flex-shrink: 0; }
.dp-btn-edit, .dp-edit { flex: 1; background: var(--nv); color: #fff; border: none; border-radius: var(--r-xs); padding: 9px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font); }
.dp-btn-edit:hover, .dp-edit:hover { background: var(--tl); }
.dp-btn-del, .dp-del { background: #FEF2F2; color: var(--dg); border: none; border-radius: var(--r-xs); padding: 9px 12px; font-size: 12px; cursor: pointer; font-family: var(--font); }
.dp-btn-del:hover, .dp-del:hover { background: var(--dg); color: #fff; }

/* ── SETTINGS ────────────────────────────────────────── */
.sett-wrap { padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; max-width: 800px; }
.sett-section { background: var(--sf); border: 0.5px solid var(--bd); border-radius: var(--r); overflow: hidden; }
.sett-hdr { padding: 12px 16px; border-bottom: 0.5px solid var(--bds); display: flex; align-items: center; justify-content: space-between; }
.sett-hdr-t { font-size: 14px; font-weight: 600; color: var(--nv); }
.sett-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid var(--bds); }
.sett-row:last-child { border-bottom: none; }
.sett-info { flex: 1; }
.sett-t { font-size: 13px; font-weight: 500; color: var(--nv); }
.sett-s { font-size: 11px; color: var(--mu); margin-top: 2px; }
.sett-ctrl { flex-shrink: 0; }
.toggle { width: 36px; height: 20px; background: var(--bd); border-radius: 10px; cursor: pointer; position: relative; flex-shrink: 0; transition: background .15s; }
.toggle.on { background: var(--tl); }
.toggle::after { content: ''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle.on::after { left: 18px; }
.pill-ok   { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; background: #EDFAF4; color: #155D35; }
.pill-warn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; background: #FFF5E6; color: #8B5A00; }
.pill-ok::before  { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; flex-shrink: 0; }
.pill-warn::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--wn); flex-shrink: 0; }

/* ── KANBAN ──────────────────────────────────────────── */
.kanban { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kcol   { flex-shrink: 0; width: 210px; background: var(--sf); border: 0.5px solid var(--bd); border-radius: var(--r); overflow: hidden; }
.kcol-hdr { padding: 10px 14px; border-bottom: 0.5px solid var(--bds); display: flex; justify-content: space-between; align-items: center; }
.kcol-title { font-size: 12.5px; font-weight: 600; color: var(--nv); }
.kcol-cnt { background: var(--bds); color: var(--mu); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 8px; }
.kcol-body { padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.kcard { background: var(--bg); border: 0.5px solid var(--bd); border-radius: var(--r-sm); padding: 9px 11px; cursor: pointer; transition: border-color .12s; }
.kcard:hover { border-color: var(--tl); }
.kcard-name { font-size: 12.5px; font-weight: 600; color: var(--nv); margin-bottom: 3px; }
.kcard-sub  { font-size: 10.5px; color: var(--mu); margin-bottom: 5px; }
.kcard-next { font-size: 10.5px; color: var(--t2); padding: 3px 7px; background: var(--sf); border: 0.5px solid var(--bds); border-radius: 4px; margin-bottom: 6px; line-height: 1.4; }

/* ── MISC ────────────────────────────────────────────── */
.notiz-wrap { border: 0.5px solid var(--bd); border-radius: var(--r-sm); overflow: hidden; }
.ntb-btn { background: none; border: none; border-radius: 3px; padding: 3px 7px; font-size: 12px; cursor: pointer; color: var(--t2); }
.ntb-btn:hover { background: var(--bds); }
.ntb-btn.active { background: var(--nv); color: #fff; }
.notiz-editor { min-height: 90px; overflow-y: auto; padding: 9px 11px; font-size: 12.5px; color: var(--tx); outline: none; background: var(--sf); line-height: 1.6; }
.notiz-editor:empty::before { content: attr(data-placeholder); color: var(--mu); pointer-events: none; }
.sync-bar { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--sf); border-bottom: 0.5px solid var(--bd); font-size: 12px; color: var(--mu); }
.empty { text-align: center; padding: 36px 20px; color: var(--mu); font-size: 13px; }
.ibox { background: #EEF6FF; border: 0.5px solid #BFDBFE; border-radius: var(--r-xs); padding: 9px 12px; font-size: 12px; color: #1D4ED8; margin-bottom: 10px; line-height: 1.55; }
.wbox { background: #FFF8EC; border: 0.5px solid #FDD88A; border-radius: var(--r-xs); padding: 9px 12px; font-size: 12px; color: #8B5A00; margin-bottom: 10px; line-height: 1.55; }

/* Toast */
/* Meldungen liegen ueber allem: Ueberlagerungen reichen bis 10060, ein Toast
   darunter war hinter dem verschwommenen Hintergrund nicht mehr lesbar. */
#toast, #sf-toast, #ek-toast {
  position: fixed; bottom: 16px; right: 16px; z-index: 11000;
  background: var(--nv); border-left: 3px solid var(--tl);
  padding: 9px 16px; border-radius: var(--r-xs); font-size: 12.5px; color: #fff;
  transform: translateY(60px); opacity: 0; transition: all .2s; pointer-events: none;
}
/* #ek-toast.show fehlte hier. Der Grundzustand oben deckt alle drei Kennungen
   ab (opacity:0), das Einblenden nur zwei - shell.js legt aber auf JEDER
   Seite ein #ek-toast an und setzt window.toast darauf. Auf den 37 Seiten
   ohne eigenes #toast war damit JEDE Meldung unsichtbar: der Text stand im
   Element, mit opacity 0. Kein Fehler in der Konsole, keine Reaktion. */
#toast.show, #ek-toast.show, #sf-toast.ok { transform: translateY(0); opacity: 1; }
#sf-toast.ok  { background: var(--tl); }
#sf-toast.err { transform: translateY(0); opacity: 1; background: var(--dg); }

/* Search overlay */
#ek-search-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 9100; align-items: flex-start; justify-content: center; padding-top: 80px; }
#ek-search-overlay.open { display: flex; }
#ek-search-box { background: var(--sf); border-radius: var(--r); width: 580px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,.2); overflow: hidden; border: 0.5px solid var(--bd); }
#ek-search-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 0.5px solid var(--bds); }
#ek-search-inp { flex: 1; border: none; outline: none; font-size: 14px; color: var(--tx); background: transparent; font-family: var(--font); height: 34px; }
.ek-s-esc { font-size: 10.5px; color: var(--mu); background: var(--bds); border: 0.5px solid var(--bd); border-radius: 4px; padding: 2px 7px; cursor: pointer; }
#ek-search-results { max-height: 380px; overflow-y: auto; }
.ek-sr-empty { padding: 24px; text-align: center; color: var(--mu); font-size: 13px; }
.ek-sr-group-hdr { padding: 5px 16px 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mu); background: var(--bds); }
.ek-sr-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; color: var(--tx); border-bottom: 0.5px solid var(--bds); cursor: pointer; }
.ek-sr-item:hover, .ek-sr-item.active { background: var(--tlb); }
.ek-sr-title { font-size: 13px; font-weight: 600; color: var(--nv); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-sr-sub { font-size: 10.5px; color: var(--mu); margin-top: 1px; }
#ek-search-footer { display: flex; align-items: center; gap: 14px; padding: 7px 16px; border-top: 0.5px solid var(--bds); background: var(--bds); }
.ek-sf-hint { font-size: 10.5px; color: var(--mu); display: flex; align-items: center; gap: 5px; }
.ek-sf-hint kbd { background: var(--sf); border: 0.5px solid var(--bd); border-radius: 3px; padding: 1px 6px; font-family: var(--font); color: var(--t2); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #ek-bnav { padding-bottom: env(safe-area-inset-bottom); height: calc(56px + env(safe-area-inset-bottom)); }
}

/* ── EK-NOTIZ-INPUT ──────────────────────────────────── */
.ek-notiz-input {
  background: var(--sf); border: 0.5px solid var(--bd);
  border-radius: var(--r-sm); overflow: hidden;
}
.ni-titel {
  width: 100%; border: none; outline: none;
  font-size: 14px; font-weight: 500; padding: 12px 16px 4px;
  font-family: var(--font); background: transparent; color: var(--tx);
}
.ni-titel::placeholder { color: var(--mu); }
.ek-notiz-input textarea {
  width: 100%; border: none; outline: none;
  font-size: 13px; padding: 4px 16px 10px;
  font-family: var(--font); background: transparent;
  resize: none; line-height: 1.7; color: var(--tx);
  min-height: 60px;
}
.ek-notiz-input textarea::placeholder { color: var(--mu); }
.ni-footer {
  padding: 8px 12px; border-top: 0.5px solid var(--bds);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: var(--bds);
}
.ni-chips { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }
.ni-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 20px;
  border: 0.5px solid var(--bd);
  background: var(--sf); color: var(--t2);
  font-size: 11px; font-weight: 500; cursor: pointer;
  transition: all .12s; white-space: nowrap;
  font-family: var(--font);
}
.ni-chip:hover { border-color: var(--nv); color: var(--nv); }
.ni-chip.active { border-color: var(--nv); background: var(--nv); color: #fff; }
.ni-chip[data-typ="Allgemein"].active   { background: #F1EFE8; border-color: #B4B2A9; color: #5F5E5A; }
.ni-chip[data-typ="Telefonat"].active   { background: #FAEEDA; border-color: #FAC775; color: #633806; }
.ni-chip[data-typ="Besprechung"].active { background: #E1F5EE; border-color: #5DCAA5; color: #085041; }
.ni-chip[data-typ="Baustelle"].active   { background: #FFF3E0; border-color: #FFB74D; color: #7B4000; }
.ni-chip[data-typ="E-Mail"].active      { background: #E8EAF6; border-color: #9FA8DA; color: #1A237E; }
.ni-chip[data-typ="Vor-Ort"].active     { background: #E8F5E9; border-color: #81C784; color: #1B5E20; }
.ni-chip[data-typ="Büro"].active        { background: #ECEFF1; border-color: #90A4AE; color: #263238; }
.ni-chip[data-typ="Kunde"].active       { background: #E6F1FB; border-color: #85B7EB; color: #185FA5; }
.ni-chip[data-typ="Aufgabe"].active     { background: #EEEDFE; border-color: #AFA9EC; color: #3C3489; }
.ni-chip[data-typ="Intern"].active      { background: #F1EFE8; border-color: #B4B2A9; color: #5F5E5A; }
.ni-vorgang {
  padding: 4px 8px; border: 0.5px solid var(--bd);
  border-radius: 6px; font-size: 11.5px; font-family: var(--font);
  background: var(--sf); color: var(--t2); max-width: 200px;
  cursor: pointer; outline: none;
}
.ni-save {
  padding: 5px 13px; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--font); background: var(--nv); color: #fff;
  transition: background .12s; white-space: nowrap;
}
.ni-save:hover { background: var(--tl); }

/* ── DARK MODE ───────────────────────────────────────── */
html.dark-mode {
  --bg: #111318; --sf: #1A1D24; --bd: #2A2E3F; --bds: #222535;
  --tx: #D4D9E8; --t2: #8A95AA; --mu: #5A6278; --nv: #2A3D55;
}

/* ── EINSTELLUNGEN v5 SECTIONS ───────────────────────── */
.st-wrap{max-width:680px;margin:0 auto;padding:20px 24px 60px}
.st-section{margin-bottom:12px;border-radius:var(--r);overflow:hidden;border:0.5px solid var(--bd);background:var(--sf)}
.st-hdr{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none;background:var(--sf)}
.st-hdr:hover{background:var(--bds)}
.st-hdr-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.st-hdr-title{font-size:13.5px;font-weight:600;color:var(--nv)}
.st-hdr-sub{font-size:11px;color:var(--mu);margin-top:1px}
.st-hdr-text{flex:1}
.st-hdr-meta{display:flex;align-items:center;gap:8px}
.st-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px}
.st-badge.ok{background:#EDFAF4;color:#155D35}
.st-badge.warn{background:#FFF9ED;color:#B07800}
.st-badge.off{background:var(--bds);color:var(--mu)}
.st-chevron{color:var(--bd);font-size:12px;transition:transform .2s;flex-shrink:0}
.st-section.closed .st-chevron{transform:rotate(-90deg)}
.st-section.closed .st-body{display:none}
.st-body{border-top:0.5px solid var(--bd)}
.st-inner{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.st-inner .card{margin:0;border-radius:var(--r-sm);border:0.5px solid var(--bd)}

/* ═══════════════════════════════════════════════════════
   theme.css v6 — global compat + normalisierungen
   ═══════════════════════════════════════════════════════ */

/* ── LEGACY VAR ALIASES ──────────────────────────────── */
:root {
  --color-background-secondary: var(--bg);
  --color-text-primary:         var(--tx);
  --color-border:               var(--bd);
  --muted:                      var(--mu);
  --paper:                      var(--sf);
  --ink:                        var(--tx);
  --border:                     var(--bd);
  --accent:                     var(--tl);
}

/* ── PAGE-WRAP COMPAT ────────────────────────────────── */
.page-wrap { margin-left: 0 !important; }

/* ── CARD COMPAT ─────────────────────────────────────── */
.card, .form-card, .list-card,
.gform, .za-card, .doc-card,
.notiz-card, .art-row-card,
.wb-card, .stat-card,
.au-card, .au-section,
.kunden-card, .km-card,
.pv-card, .new-card { box-shadow: none !important; }
.card, .form-card, .list-card { border-width: 0.5px; }

/* ── DARK MODE COMPAT ────────────────────────────────── */
html.dark-mode body { background: var(--bg); color: var(--tx); }

/* ── PAGE HEADER (Liegenschaften-Stil) ───────────────── */
/* Einheitlicher Seiten-Header: Titel links, Buttons rechts */
.pg-hd {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.pg-hd-l { display: flex; flex-direction: column; gap: 3px; }
.pg-title {
  font-size: 18px; font-weight: 700; color: var(--nv);
  display: flex; align-items: center; gap: 8px;
}
.pg-sub { font-size: 12px; color: var(--mu); }
.pg-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Button-Stil passend zu Liegenschaften */
.pg-btn {
  border: 0.5px solid var(--bd); background: var(--sf);
  color: var(--t2); border-radius: var(--r-sm);
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  display: inline-flex; align-items: center; gap: 5px;
}
.pg-btn:hover { border-color: #cbd3dd; }
.pg-btn.p { background: var(--tl); color: #fff; border-color: var(--tl); }
.pg-btn.p:hover { background: var(--tl2); border-color: var(--tl2); }

/* ═══════════════════════════════════════════════════════════════════════
   TOUCH-SCHICHT — iPad und Telefon  [v2.99.0]

   Greift ueber die Faehigkeiten des Geraets, nicht ueber die Breite: ein
   iPad im Landscape ist 1180 px breit wie ein kleiner Laptop, hat aber
   keinen Mauszeiger. „hover:none und pointer:coarse" trifft genau die
   Geraete, die mit dem Finger bedient werden.
   ═══════════════════════════════════════════════════════════════════════ */

/* Auf-/Ab-Knoepfe fuer die Reihenfolge: mit Maus zieht man, mit dem Finger
   nicht - HTML5-Drag-and-Drop kennt iOS nicht. */
.nur-touch { display: none !important; }

@media (hover: none) and (pointer: coarse) {

  /* iOS zoomt in die Seite, sobald ein Eingabefeld unter 16 px angetippt
     wird. Danach steht man verschoben da und muss von Hand zurueckzoomen -
     der laestigste Fehler auf dem iPad ueberhaupt, und der billigste zu
     beheben. */
  input, select, textarea,
  .finp, .kf-inp, .tl-inp, .search-inp, .aufg-inp, .lg-inp, .lg-sel,
  .zn-inp, .zn-sel, .zn-txt, .gd-in, .anc-titel, .vk-sr-in {
    font-size: 16px !important;
  }

  /* Fingergroesse. 44 pt waeren die Empfehlung; das sprengt hier die
     Dichte, 34 px sind der Kompromiss, mit dem man nicht danebentippt. */
  button, .btn-sm, .abl-btn, .vk-od-btn, .ibtn, .tl-chip, .vk-qchip,
  .vk-ck-tab, .aufg-btn, .rail-b, .pl-item, .fb {
    min-height: 34px;
    touch-action: manipulation;      /* kein Doppeltipp-Zoom, keine 300 ms */
  }
  .vk-sr-chip, .tcp, .sp-chip, .vchip, .k-frist, .pa-frist-chip {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }
  .tchk, .vk-jetzt-chk, .band-chk, .aufg-cb, .vk-sr-box {
    min-width: 24px; min-height: 24px;
  }

  /* Was nur beim Zeigen erscheint, gibt es mit dem Finger nicht. */
  .tl-card-del, .card-actions, .za-del-btn, .vk-nz-weg, .w-drag,
  .vk-od-z .pf, .ks-menu {
    opacity: 1 !important;
  }

  /* Ziehen ersetzen */
  .nur-touch { display: inline-flex !important; }
  .nur-maus  { display: none !important; }

  /* Waagerechtes Wischen soll sich anfuehlen wie im System */
  .kanban, .vk-schiene, .tbl-wrap, .schiene {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .kanban .kcol, .vk-st { scroll-snap-align: start; }
}

/* Reihenfolge-Pfeile */
.ord-pf {
  display: inline-flex; flex-direction: column; gap: 2px; flex-shrink: 0;
}
.ord-pf button {
  border: .5px solid var(--bd); background: var(--sf); color: #4A6080;
  border-radius: 5px; width: 26px; height: 20px; line-height: 1;
  font-size: 11px; cursor: pointer; padding: 0; font-family: inherit;
}
.ord-pf button:hover:not(:disabled) { border-color: var(--tl); color: var(--tl); }
.ord-pf button:disabled { opacity: .3; cursor: default; }
@media (hover: none) and (pointer: coarse) {
  .ord-pf button { width: 34px; height: 30px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRIEREFREIHEIT                                              v2.113.0
   Live-Pruefung auf dem Dashboard ergab 26 Klickziele unter 24x24 px und
   102 Textknoten unter 10,5 px. Beides ist auf einem Laptop ohne den
   Dashboard-Zoom kaum bedienbar bzw. lesbar.
   WCAG 2.2 AA, 2.5.8 Target Size (Minimum): mindestens 24x24 px.
   Die Icons bleiben optisch klein - vergroessert wird die Flaeche.
   ══════════════════════════════════════════════════════════════════════ */

.ord-pf button { min-width: 24px; min-height: 24px; }

/* Kleine Icon-Schalter, die in mehreren Seiten vorkommen. */
.w-info-icon, .w-drag, .ek-x, .ek-ico-btn, .chip-x, .tag-x {
  min-width: 24px; min-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Textlinks in Kachelkoepfen und Listen. */
.w-allelink, .ek-link-sm {
  min-height: 24px; display: inline-flex; align-items: center;
  padding: 2px 6px; border-radius: 5px;
}

/* Sichtbarer Fokus ueberall dort, wo er bisher nur der Browser-Standard war.
   :focus-visible statt :focus - Mausklicks erzeugen keinen Rahmen. */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--tl);
  outline-offset: 2px;
}

/* Untergrenze fuer Schriftgroessen. Alles unter 11 px war auf dem
   Dashboard nur lesbar, weil dort zoom: 1.15 wirkt - auf anderen Seiten
   nicht. */
.hint, .ek-hint, .ek-sub-sm, .ti-src, .tsec-c, .kpi-chip-l, .w-frage {
  font-size: 11px;
}

/* Sprungmarke zum Inhalt, fuer Tastaturbedienung. */
.ek-skip {
  position: absolute; left: -9999px; top: 0; z-index: 12000;
  background: var(--nv); color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 0; font-size: 13px; text-decoration: none;
}
.ek-skip:focus { left: 0; }

/* Wer Bewegung reduziert haben moechte, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── WG/NWG-Marker auf Kanban-Kacheln ─────────────────────────────────
   Bewusst zurueckhaltend: er steht vor der Leistung und soll die Kachel
   nicht dominieren. Zwei Farben, damit die Unterscheidung auch beim
   Ueberfliegen der Spalte funktioniert. */
.ek-gebart{
  display:inline-block; font-size:9px; font-weight:700; letter-spacing:.04em;
  padding:1px 5px; border-radius:5px; vertical-align:1px;
  background:#E9F3EF; color:#0F6E72;
}
.ek-gebart.nwg{ background:#EDEAF6; color:#4B3B8F; }
html.dark-mode .ek-gebart{ background:#12312a; color:#4FD1A5; }
html.dark-mode .ek-gebart.nwg{ background:#231f3a; color:#A99BE0; }