/* Eine CSS-Datei für die ganze Oberfläche (Entwurf v8, design/*.dc.html): Navigation, Kopfzeilen, Kästen, Kacheln, Chips, Tags,
   Knöpfe, Tabellen, Pipeline, Lead-Seite, Dialoge. GbR-Design: Orange #e16d33 nur als Fläche mit schwarzer Schrift oder als Rahmen,
   Text-Orange #b84f1e, Schwarz #1c1c1c, Hintergrund #f6f3ee, weiße Kästen ohne Rahmen mit weichem Schatten, Linien #ece7df.
   Kleiner Text in #6f675d (wie --mut im Lead-Fenster des Sheets), weil #8a8178 auf Weiß unter 4,5:1 liegt; #8a8178 nur für Linien und Flächen.
   Jedes Klickziel mindestens 44 px. Zahlen mit Tabellenziffern. tagesblatt.css ist abgelöst. */
:root {
  --or: #e16d33;            /* Fläche (mit schwarzer Schrift) oder Rahmen */
  --or-text: #b84f1e;       /* Orange als Schrift */
  --or-weich: #fff6f0;
  --or-weich2: #fff1e8;
  --ink: #1c1c1c;
  --bg: #f6f3ee;
  --karte: #ffffff;
  --feld: #ffffff;
  --grau: #8a8178;
  --text: #1c1c1c;
  --text-leise: #6f675d;
  --linie: #ece7df;
  --linie2: #e3ded5;
  --zeile: #f1ede6;
  --flaeche: #faf8f4;
  --rot: #b23a32;
  --rot-weich: #fdecea;
  --ok: #1d6b40;
  --ok-weich: #e5f2ea;
  --schatten: 0 1px 2px rgba(28, 28, 28, .04), 0 2px 10px rgba(28, 28, 28, .04);
  --radius: 16px;
  --nav-breite: 232px;
  /* UI 008C C2: hervorgehobene Zeilen und Leitfaden-Farben nur über Variablen, mit eigenem Wert im Dunkelmodus (beide Wege unten) */
  --warm: #fff7f1;          /* Zeile Rückruf heute und überfällig (tr.warm) */
  --warm-hover: #fff1e8;
  --heiss-bg: #1c1c1c; --heiss-text: #ffffff;
  --wahl: #1c1c1c; --auf-wahl: #ffffff; --wahl-hover: #3a3632;   /* Gewähltes und dunkle Knöpfe (Chip an, Einwand, Option, Avatar t); dunkel umgekehrt (Nacharbeit 008C N2) */
  --tf-einstieg: #b84f1e; --tf-angebot: #2f6fb5; --tf-frage: #7a4fb5; --tf-einwand: #b23a32; --tf-abschluss: #1d6b40; --tf-ende: #8a8278;
  color-scheme: light;
  /* alte Namen (Ansichten Zahlen, Admin, Automatik, Hilfsblätter) zeigen auf die neuen Farben */
  --akzent: var(--or); --akzent-text: var(--or-text); --akzent-weich: var(--or-weich); --akzent-flaeche: var(--or);
  --akzent-dunkel: #c95c27; --auf-akzent: var(--ink); --fehler: var(--rot); --fehler-bg: var(--rot-weich); --ok-bg: var(--ok-weich);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --or-text: #f2955f; --or-weich: #3a2318; --or-weich2: #3a2318; --ink: #f1eeea; --bg: #161514; --karte: #211f1d; --feld: #181716;
    --text: #f1eeea; --text-leise: #b3aba2; --linie: #36322e; --linie2: #45403b; --zeile: #2b2825; --flaeche: #1b1a18;
    --rot: #ff8a80; --rot-weich: #3b1d1a; --ok: #6fd39a; --ok-weich: #16301f; --schatten: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark;
    --warm: #33261e; --warm-hover: #3d2d23; --heiss-bg: #f1eeea; --heiss-text: #1c1c1c; --wahl: #f1eeea; --auf-wahl: #1c1c1c; --wahl-hover: #d9d4ce;
    --tf-einstieg: #f2955f; --tf-angebot: #8bb8f0; --tf-frage: #c3a6f2; --tf-einwand: #ff8a80; --tf-abschluss: #6fd39a; --tf-ende: #a39b92;
  }
}
:root[data-theme="dark"] {
  --or-text: #f2955f; --or-weich: #3a2318; --or-weich2: #3a2318; --ink: #f1eeea; --bg: #161514; --karte: #211f1d; --feld: #181716;
  --text: #f1eeea; --text-leise: #b3aba2; --linie: #36322e; --linie2: #45403b; --zeile: #2b2825; --flaeche: #1b1a18;
  --rot: #ff8a80; --rot-weich: #3b1d1a; --ok: #6fd39a; --ok-weich: #16301f; --schatten: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark;
  --warm: #33261e; --warm-hover: #3d2d23; --heiss-bg: #f1eeea; --heiss-text: #1c1c1c; --wahl: #f1eeea; --auf-wahl: #1c1c1c; --wahl-hover: #d9d4ce;
  --tf-einstieg: #f2955f; --tf-angebot: #8bb8f0; --tf-frage: #c3a6f2; --tf-einwand: #ff8a80; --tf-abschluss: #6fd39a; --tf-ende: #a39b92;
}

* { box-sizing: border-box; }
html { font-size: 14px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
/* hidden gilt immer: Klassen mit display (z. B. .btn, .seitennav a) dürfen es nicht überstimmen */
[hidden] { display: none !important; }
h1, h2, h3 { font-family: "Bricolage Grotesque", Manrope, sans-serif; letter-spacing: -.01em; }
h1 { font-size: 30px; font-weight: 800; line-height: 1.1; margin: 0; }
h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
h2 small { font: 600 12.5px Manrope, sans-serif; color: var(--text-leise); }
h3 { font-size: 15px; margin: 18px 0 8px; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--or-text); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; border-radius: 6px; }
.visuell-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zahl, .num, td.r, .kpi .v, .chip b, .tab-zahl { font-variant-numeric: tabular-nums; }
.leise { color: var(--text-leise); }
.rot { color: var(--rot); }
.orange { color: var(--or-text); }

/* ---------- Grundgerüst: linke Navigation und Inhalt ---------- */
/* Hintergrund der Navigation über die ganze Seitenhöhe (auch bei langen Seiten unter der klebenden Leiste) */
.app { display: flex; min-height: 100vh; background: linear-gradient(to right, var(--karte) calc(var(--nav-breite) - 1px), var(--linie) calc(var(--nav-breite) - 1px), var(--linie) var(--nav-breite), transparent var(--nav-breite)); }
.seitennav {
  flex: 0 0 var(--nav-breite); width: var(--nav-breite); background: var(--karte); border-right: 1px solid var(--linie);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30;
}
.nav-oben { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 0 14px 12px; }
.marke { font: 800 20px "Bricolage Grotesque", sans-serif; color: var(--text); white-space: nowrap; }
.marke span span, .marke .m-kurz span { color: var(--or); }
.marke .m-kurz { display: none; }
.nav-klapp { width: 44px; height: 44px; border: 0; background: none; border-radius: 10px; color: var(--text-leise); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.nav-klapp:hover { background: var(--or-weich); color: var(--or-text); }
.seitennav > a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: 14px;
  min-height: 44px; color: var(--text); white-space: nowrap;
}
.seitennav > a svg { flex: none; }
.seitennav > a:hover { background: var(--flaeche); color: var(--or-text); }
.seitennav > a[aria-current] { background: var(--or-weich); color: var(--or-text); }
.nav-platz { flex: 1; }
.nav-person { display: flex; align-items: center; gap: 10px; padding: 12px 6px 0 12px; border-top: 1px solid var(--linie); margin-top: 6px; min-height: 56px; }
.nav-person .np-text { min-width: 0; flex: 1; }
.nav-person .np-name { font-weight: 700; font-size: 13.5px; }
.nav-person .np-rolle { font-size: 12px; color: var(--text-leise); }
.nav-person button { flex: none; }
html.nav-zu { --nav-breite: 76px; }
html.nav-zu .seitennav { padding: 20px 10px; }
html.nav-zu .seitennav > a span, html.nav-zu .marke .m-lang, html.nav-zu .nav-person .np-text, html.nav-zu .nav-person .np-ab { display: none; }
html.nav-zu .marke .m-kurz { display: inline; }
html.nav-zu .nav-oben { flex-direction: column; padding: 0 0 10px; }
html.nav-zu .seitennav > a { justify-content: center; padding: 10px 0; }
html.nav-zu .nav-klapp svg { transform: rotate(180deg); }
html.nav-zu .nav-person { justify-content: center; padding: 12px 0 0; }

main { flex: 1 1 auto; min-width: 0; padding: 28px 36px 48px; display: flex; flex-direction: column; gap: 24px; }
main:focus { outline: none; }
main.lead-modus { padding: 0; gap: 0; }
.ansicht-box { display: contents; }

/* ---------- Kopfzeile einer Seite ---------- */
.seitenkopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.seitenkopf .unter { color: var(--text-leise); font-size: 14px; margin-top: 4px; }
.seitenkopf .unter b { color: var(--text); font-variant-numeric: tabular-nums; }
.werkzeugleiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fusszeile { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--text-leise); font-size: 12.5px; }

/* ---------- Kästen, Kacheln ---------- */
.kasten { background: var(--karte); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--schatten); min-width: 0; }
.kasten.warm { background: var(--or-weich); }
.kasten.dicht { padding: 0; overflow: hidden; }
.lab { font-size: 12.5px; color: var(--text-leise); font-weight: 600; margin-bottom: 8px; }
.kacheln4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--karte); border-radius: 12px; padding: 14px 16px; min-width: 0; box-shadow: var(--schatten); }
.kpi .l { font-size: 12.5px; color: var(--text-leise); font-weight: 600; }
.kpi .v { font: 800 28px/1.1 "Bricolage Grotesque", Manrope, sans-serif; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .v small { color: var(--text-leise); font-size: 16px; }
.kpi .s { font-size: 12.5px; color: var(--text-leise); margin-top: 4px; }
.kpi.akzent { box-shadow: inset 0 0 0 1.5px var(--or); }
.kpi.akzent .l, .kpi.akzent .v { color: var(--or-text); }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--linie2); background: var(--karte); font: 700 13.5px Manrope, sans-serif; color: var(--text); cursor: pointer;
  white-space: nowrap; text-decoration: none;
}
.btn:hover:not(:disabled) { border-color: var(--or); color: var(--text); }
.btn.pri { background: var(--or); border-color: var(--or); color: #1c1c1c; }
.btn.pri:hover:not(:disabled) { background: #ea7f49; border-color: #ea7f49; }
.btn.dark { background: var(--wahl); border-color: var(--wahl); color: var(--auf-wahl); }
.btn.dark:hover:not(:disabled) { background: var(--wahl-hover); color: var(--auf-wahl); }
.btn.big { min-height: 52px; font-size: 15px; }
.btn.voll { width: 100%; }
.btn.icon { padding: 0 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
label.btn { flex-direction: row; font-size: 13.5px; color: var(--text); }
.btn input[type="checkbox"] { width: 18px; height: 18px; margin: 0; min-height: 0; accent-color: var(--or); }
.btn.an { border-color: var(--or); }
.klein {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linie2);
  background: var(--karte); font: 600 12.5px Manrope, sans-serif; color: var(--text); cursor: pointer; white-space: nowrap;
}
.klein:hover:not(:disabled) { border-color: var(--or); }
.klein:disabled { opacity: .45; cursor: not-allowed; }
.textlink { font: inherit; font-weight: 700; color: var(--or-text); background: none; border: 0; padding: 0 4px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; }

/* ---------- Chips, Tags, Avatare, Punkte ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie2);
  background: var(--karte); font: 600 13px Manrope, sans-serif; color: var(--text); min-height: 44px; cursor: pointer; white-space: nowrap;
}
.chip:hover:not(.on):not(:disabled) { border-color: var(--or); }
.chip.on { background: var(--wahl); color: var(--auf-wahl); border-color: var(--wahl); }
.chip.leise:not(.on) { color: var(--text-leise); }
.chip.warn:not(.on) { color: var(--rot); }
.chip.ok { background: var(--or-weich); color: var(--or-text); border-color: var(--or); }
.chip select { border: 0; background: transparent; font: inherit; color: inherit; min-height: 0; padding: 0; width: auto; cursor: pointer; }
.trenner { width: 1px; height: 24px; background: var(--linie2); flex: none; }
.platz { flex: 1; }
.tag { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--linie2); background: var(--karte); white-space: nowrap; }
.tag.rr { border-color: var(--or); color: var(--or-text); background: var(--or-weich); }
.tag.heiss { background: var(--heiss-bg); color: var(--heiss-text); border-color: var(--heiss-bg); }
.tag.grau { color: var(--text-leise); }
.tag.rot { border-color: var(--rot); color: var(--rot); background: var(--rot-weich); }
.tag.gesperrt { border-color: var(--grau); color: var(--text-leise); background: var(--zeile); }
.tag.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-weich); }
.av { width: 24px; height: 24px; border-radius: 50%; background: var(--or); color: #1c1c1c; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none; }
.av.t { background: var(--wahl); color: var(--auf-wahl); }
.av.s { background: var(--grau); color: #fff; }
.av.gross { width: 32px; height: 32px; font-size: 13px; }
.av.wahl { outline: 2px solid var(--wahl); outline-offset: 1px; }
.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.punkt.r { background: var(--rot); } .punkt.h { background: var(--or); } .punkt.s { background: var(--wahl); } .punkt.k { background: #cfc7bb; }
.sub { display: block; font-size: 12px; color: var(--text-leise); line-height: 1.25; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Formularfelder ---------- */
input, select, textarea {
  font: inherit; font-size: 14px; color: var(--text); background: var(--feld); border: 1px solid var(--linie2); border-radius: 12px;
  padding: 9px 12px; min-height: 44px; width: 100%;
}
textarea { min-height: 76px; resize: vertical; }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--or); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-leise); }
label.schalter { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--text); font-weight: 600; }
.suchfeld { display: flex; flex-direction: row; align-items: center; gap: 8px; border: 1px solid var(--linie2); background: var(--feld); border-radius: 12px; padding: 0 12px; min-height: 44px; }
.suchfeld input { border: 0; outline: 0; background: transparent; min-height: 42px; padding: 0; width: 200px; font-size: 13.5px; }
.suchfeld:focus-within { border-color: var(--or); }

/* ---------- Tabellen (Tagesliste, Alle Leads) ---------- */
.tabellenbox { background: var(--karte); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--schatten); }
table.liste { border-collapse: collapse; width: 100%; table-layout: fixed; }
table.liste th {
  text-align: left; font-size: 12.5px; color: var(--text-leise); font-weight: 600; padding: 12px; border-bottom: 1px solid var(--linie);
  white-space: nowrap; background: var(--karte); overflow: hidden; text-overflow: ellipsis;
}
table.liste td {
  padding: 0 12px; height: 60px; border-bottom: 1px solid var(--zeile); font-size: 13.5px; vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--karte);
}
table.liste th.r, table.liste td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.liste td.num, table.liste .faellig { font-variant-numeric: tabular-nums; }
table.liste tbody tr { cursor: pointer; }
table.liste tbody tr:hover td { background: var(--flaeche); }
table.liste tbody tr.warm td { background: var(--warm); color: var(--text); }
table.liste tbody tr.warm:hover td { background: var(--warm-hover); }
table.liste tbody tr.gesperrt td { color: var(--text-leise); }
table.liste tbody tr:focus-visible { outline: 3px solid var(--or); outline-offset: -3px; }
table.liste tbody tr.markiert td { box-shadow: inset 0 2px 0 var(--or), inset 0 -2px 0 var(--or); }
table.liste tbody tr.markiert td:first-child { box-shadow: inset 3px 0 0 var(--or), inset 0 2px 0 var(--or), inset 0 -2px 0 var(--or); }
table.liste td a.tel { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
table.liste td a.oeffnen { font-weight: 700; color: var(--or-text); display: inline-flex; align-items: center; min-height: 44px; }
table.liste td b { font-weight: 700; }
table.liste td.punktzelle { padding-right: 0; }
/* Nächster Schritt: bis zu zwei Zeilen statt abgeschnitten */
table.liste td.umbruch, table.liste td.letztes { white-space: normal; line-height: 1.3; }
table.liste td .sub { white-space: normal; }
.zwei-zeilen { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.leerzeile { padding: 40px 16px; text-align: center; color: var(--text-leise); }

/* ---------- Pipeline ---------- */
.pl-raster { display: grid; grid-template-columns: repeat(var(--spalten, 5), minmax(0, 1fr)); gap: 12px; align-items: start; }
.pl-spalte { background: var(--flaeche); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 160px; }
.pl-spalte.gewonnen { background: var(--or-weich); }
.pl-spalte.ziel { box-shadow: inset 0 0 0 2px var(--or); }
.pl-spalte.verboten { opacity: .55; }
.pl-spalte h2 { font: 700 14px Manrope, sans-serif; margin: 2px 2px 4px; display: flex; justify-content: space-between; align-items: baseline; }
.pl-spalte h2 small { font-variant-numeric: tabular-nums; }
.pl-karte { background: var(--karte); border-radius: 12px; padding: 12px; box-shadow: var(--schatten); cursor: grab; display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.pl-karte:focus-visible { outline: 3px solid var(--or); outline-offset: 1px; }
.pl-karte.ohne { box-shadow: inset 0 0 0 1.5px var(--rot); }
.pl-karte.zieht { opacity: .45; }
.pl-karte.verloren { color: var(--text-leise); }
.pl-karte b { font-size: 14px; overflow-wrap: anywhere; }
.pl-karte .m { color: var(--text-leise); font-size: 12px; }
.pl-karte .f { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pl-stufe { display: none; align-self: flex-start; }
@media (max-width: 1180px), (pointer: coarse) { .pl-stufe { display: inline-flex; } }
/* Tagesliste: Unterzeile unter dem Betrieb einzeilig, voller Text im Tooltip (gleich hohe Zeilen) */
table.tagesliste td .sub.einzeilig { white-space: nowrap; }
.pl-karte .n { display: flex; align-items: center; gap: 8px; font-size: 12.5px; border-top: 1px solid var(--zeile); padding-top: 6px; }
.pl-karte .n .rot { font-weight: 700; }
.pl-karte .zug { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-mehr { text-align: center; color: var(--text-leise); font-size: 12.5px; padding: 6px; }
.pl-weiche { border: 1px dashed var(--linie2); border-radius: 12px; padding: 18px 12px; text-align: center; color: var(--text-leise); font-size: 12.5px; }

/* ---------- Lead-Seite (iframe mit public/sheet/Lead.html, Entwurf design/Lead.dc.html) ---------- */
.lead-rahmen { display: block; width: 100%; height: 100vh; border: 0; background: var(--bg); }
.leadseite #app { padding: 24px 36px 36px; display: flex; flex-direction: column; gap: 20px; }
.leadseite #lade { position: fixed; inset: 0; display: flex; gap: 12px; align-items: center; justify-content: center; background: var(--bg); color: var(--text-leise); z-index: 10; }
.leadseite .aus { opacity: .45; pointer-events: none; }
.leadseite .min0 { min-width: 0; }
.leadseite .klein-text { font-size: 12.5px; line-height: 1.4; }
.lkopf { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lpos { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.lsuche { position: relative; }
.lsuche .suchfeld input { width: 170px; }
.suerg { position: absolute; right: 0; top: 50px; z-index: 20; width: 340px; max-height: 380px; overflow: auto; background: var(--karte); border-radius: 12px; box-shadow: 0 8px 24px rgba(28, 28, 28, .14); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.suerg > div { padding: 10px; }
.sutr { font: inherit; text-align: left; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.sutr:hover, .sutr:focus-visible { background: var(--or-weich); color: var(--or-text); }
.sutr.alle { font-weight: 700; color: var(--or-text); border-top: 1px solid var(--linie); border-radius: 0 0 8px 8px; }
.lraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.lraster[hidden] { display: none; }
.lspalte { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kopfkasten { display: flex; flex-direction: column; gap: 16px; }
.kk1 { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.kmeta { font-size: 12.5px; color: var(--text-leise); font-weight: 600; }
.kopfkasten h1 { margin: 4px 0 0; font: 700 26px/1.15 "Bricolage Grotesque", sans-serif; transition: background-color .6s; border-radius: 6px; }
.kopfkasten h1.blink { background: var(--or-weich2); }
.kinh { font-size: 14px; color: var(--text-leise); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kinh b { color: var(--text); }
.kinh .edi, .telzeile .edi { width: 200px; }
.kk-rechts { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex: 0 0 200px; }
.stufe { display: flex; gap: 4px; width: 200px; }
.stufe span { flex: 1; height: 8px; border-radius: 4px; background: var(--linie2); }
.stufe span.on { background: var(--or); }
.stufe.verloren span { background: var(--zeile); }
.stufetext { font-size: 12px; color: var(--text-leise); text-align: right; }
.kk2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px 20px; font-size: 14px; }
.kk2 .lab { margin-bottom: 4px; }
.kk2 .lab label { display: inline; font: inherit; color: inherit; }
.telzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.telgross { font-size: 20px; font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.telgross a { color: var(--text); display: inline-flex; align-items: center; min-height: 44px; }
.telgross a:hover { color: var(--or-text); }
.ttbox { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 0 1px var(--linie2); }
.ttbox[hidden] { display: none; }
.gztext { font-size: 13px; }
.gztext.ok { color: var(--ok); font-weight: 600; }
.links { display: flex; gap: 8px; flex-wrap: wrap; }
.links .chip { font-size: 12.5px; padding: 0 12px; }
.links .chip.aus { color: var(--text-leise); opacity: 1; }
.ltabs { display: flex; border-bottom: 1px solid var(--linie); align-items: center; gap: 4px; }
.ltabs .tab { padding: 10px 14px; font: 600 14px Manrope, sans-serif; color: var(--text-leise); border: 0; border-bottom: 2px solid transparent; background: none; min-height: 44px; cursor: pointer; }
.ltabs .tab.on { color: var(--or-text); border-bottom-color: var(--or); }
.pane { display: none; flex-direction: column; gap: 10px; }
.pane.on { display: flex; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#anrufen.waehlt { background: #ea7f49; }
.anrufstatus { border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.anrufstatus.waehlt { background: var(--or-weich); color: var(--or-text); }
.anrufstatus.verbunden { background: var(--ok-weich); color: var(--ok); }
.anrufstatus.fehler { background: var(--rot-weich); color: var(--rot); }
.ergbox { display: flex; flex-direction: column; gap: 14px; }
.ergkopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 12.5px; }
/* Kacheln so breit, dass jeder Text einzeilig ganz zu sehen ist (längster: Termin oder Angebot) */
.eb { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 52px; gap: 8px; }
.erg { border: 1px solid var(--linie2); background: var(--karte); border-radius: 12px; height: 100%; width: 100%; padding: 0 10px; font: 600 13px/1.2 Manrope, sans-serif;
  text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--text); min-width: 0; }
.erg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.erg kbd { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--linie2);
  box-shadow: 0 1px 0 var(--linie2); background: var(--flaeche); font: 700 12px Manrope, sans-serif; color: var(--text-leise); }
.erg kbd.leer { color: transparent; border-style: dashed; box-shadow: none; }
.erg:hover { border-color: var(--or); }
.erg.on { border-color: var(--or); background: var(--or-weich); color: var(--or-text); }
.erg.on kbd { border-color: var(--or); color: var(--or-text); }
.bed { background: var(--flaeche); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.bed[hidden] { display: none; }
.bed .q { display: flex; gap: 8px; flex-wrap: wrap; }
.bed .q .chip { font-size: 12.5px; }
.bed .lab { margin: 0; }
.kia { font-size: 13px; color: var(--text); }
.notizlab textarea { margin-top: 2px; min-height: 64px; }
.nerk { font-size: 12.5px; color: var(--text-leise); }
.nerk:empty { display: none; }
.nerk b { color: var(--text); }
.bs { display: flex; flex-wrap: wrap; gap: 6px; }
.bs .chip { font-size: 12px; padding: 0 12px; font-weight: 500; }
.ergfuss { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.ergfuss-l { display: flex; gap: 8px; flex-wrap: wrap; }
.ergfuss #gebucht { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vbox { border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; background: var(--or-weich); color: var(--or-text); }
.vbox.rot { background: var(--rot-weich); color: var(--rot); }
.anrzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prev { display: flex; flex-direction: column; gap: 6px; }
.prev input.bt, .prev textarea.tx { border: 1px solid transparent; background: transparent; padding: 4px 6px; margin-left: -6px; resize: vertical; }
.prev input.bt { font-weight: 700; }
.prev input.bt:hover, .prev textarea.tx:hover, .prev input.bt:focus, .prev textarea.tx:focus { border-color: var(--linie2); background: var(--feld); }
.att { font-size: 12.5px; color: var(--text-leise); }
.sig { display: flex; gap: 12px; align-items: center; background: var(--flaeche); padding: 10px 14px; border-radius: 6px; width: max-content; max-width: 100%; }
.sig img { width: 40px; height: 40px; }
.sig .sl { border-left: 2px solid var(--or); padding-left: 12px; font-size: 12px; line-height: 1.4; }
.sig .sl > b { font-size: 13.5px; }
.sig .r1 { margin-bottom: 5px; color: var(--text-leise); }
.sig .r1 b { color: var(--text); }
.sig .r2 { margin-top: 4px; }
.unsub { font-size: 11.5px; color: var(--text-leise); margin-top: 6px; line-height: 1.5; }
.ub { display: inline-block; border: 1px solid var(--linie2); border-radius: 4px; padding: 0 7px; margin-left: 3px; }
label.ok { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: 13.5px; color: var(--text); font-weight: 600; cursor: pointer; }
.note { font-size: 12.5px; color: var(--text-leise); }
.note.rot { color: var(--rot); font-weight: 600; }
.pk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pk button { font: 600 13px Manrope, sans-serif; border: 1px solid var(--linie2); background: var(--karte); color: var(--text); border-radius: 12px; padding: 10px; min-height: 64px; cursor: pointer; }
.pk button b { display: block; font-size: 16px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pk button.on { border: 2px solid var(--or); background: var(--or-weich); padding: 9px; }
.kv { display: flex; gap: 10px; border-top: 1px solid var(--linie); padding: 8px 0; font-size: 13.5px; align-items: center; }
.kv .k { width: 130px; flex: none; color: var(--text-leise); font-size: 12.5px; font-weight: 600; }
.kv .k label { display: inline; color: inherit; font: inherit; }
textarea.atx { font-size: 13px; line-height: 1.5; }
.pdfvorschau { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pdoc { background: #fff; color: #1c1c1c; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); padding: 20px 22px 14px; font-size: 10.5px; line-height: 1.45; border-radius: 4px; }
.pdoc .tp { display: flex; justify-content: space-between; align-items: flex-start; }
.pdoc .wm { font-weight: 700; font-size: 14px; }
.pdoc .wm span { color: #e16d33; }
.pdoc .tp img { width: 26px; }
.pdoc .snd { font-size: 8px; color: #6f675d; margin: 16px 0 5px; }
.pdoc .ad { display: flex; justify-content: space-between; gap: 10px; }
.pdoc .meta { display: grid; grid-template-columns: auto auto; gap: 2px 16px; font-size: inherit; color: inherit; }
.pdoc .meta span { color: #6f675d; }
.pdoc .meta b { text-align: right; }
.pdoc h2 { font-family: "Bricolage Grotesque", Manrope, sans-serif; font-size: 17px; margin: 16px 0 8px; display: block; }
.pdoc table { width: 100%; border-collapse: collapse; }
.pdoc th { font-size: 10px; text-align: left; border-bottom: 1px solid #1c1c1c; padding: 4px 0; }
.pdoc td { padding: 6px 0; border-bottom: 1px solid #eee7dc; vertical-align: top; }
.pdoc .n { text-align: right; padding-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdoc .sums { margin-left: 45%; margin-top: 8px; font-variant-numeric: tabular-nums; }
.pdoc .sums div { display: flex; justify-content: space-between; padding: 2px 0; }
.pdoc .sums .t { border-top: 1px solid #1c1c1c; font-weight: 800; margin-top: 3px; padding-top: 5px; }
.pdoc p { margin: 10px 0 0; }
.pdoc .ft { border-top: 1px solid #eee7dc; margin-top: 16px; padding-top: 6px; font-size: 8px; color: #6f675d; }
/* Leitfaden rechts */
.leitfaden { display: flex; flex-direction: column; gap: 14px; }
.lfkopf { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lfopt { display: flex; gap: 8px; flex-wrap: wrap; }
#lfInhalt { display: flex; flex-direction: column; gap: 14px; }
.tbp { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; font-size: 12px; font-weight: 700; }
.tbp button { font: inherit; border: 0; background: none; cursor: pointer; min-height: 44px; padding: 0 6px; border-radius: 8px; }
.tbp button:hover { background: var(--karte); }
.tbp b { color: var(--grau); }
.tbp .tbz { margin-left: auto; color: var(--text-leise); text-decoration: underline; }
.schritt .lab { margin-bottom: 6px; }
.schritt p { margin: 0; font-size: 16px; line-height: 1.5; }
.schritt b { font-weight: 700; color: var(--text); }
.rg { color: var(--text-leise); font-style: italic; font-size: 13px; }
.tba { display: flex; gap: 8px; flex-wrap: wrap; }
.tbm { display: flex; gap: 8px; }
.tbm input { flex: 1; }
.ew { display: flex; gap: 8px; flex-wrap: wrap; }
.einw { display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie2); background: var(--karte); font: 500 13px Manrope, sans-serif; min-height: 44px; cursor: pointer; color: var(--text); }
.einw:hover { border-color: var(--or); }
.einw.on { border-color: var(--wahl); box-shadow: inset 0 0 0 1px var(--wahl); }
.ewa:not(:empty) { background: var(--karte); border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.5; margin-top: 10px; }
/* Infos */
.infos { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.infos .lab { margin-bottom: 4px; }
.hist { display: flex; flex-direction: column; gap: 8px; }
.hist > div { display: flex; gap: 12px; }
.hist i { font-style: normal; color: var(--text-leise); min-width: 92px; flex: none; font-variant-numeric: tabular-nums; }
.warn { border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.4; }
.warn b { display: block; }
.warn.wy { background: var(--or-weich); }
.warn.wr { background: var(--rot-weich); color: var(--rot); }
.einwzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.einwform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; align-items: end; }
.einwform[hidden] { display: none; }
.einwform .btn { grid-column: 1 / -1; justify-self: start; }
/* Leitfaden bearbeiten (ganze Breite) */
.lfvoll { display: flex; flex-direction: column; gap: 16px; }
.lfvoll[hidden] { display: none; }
.lfvoll .ch { font-size: 12.5px; font-weight: 700; color: var(--text-leise); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.lfvoll .ch b { color: var(--or-text); }
.lfg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mine { min-height: 200px; }
#mineList, .bklist { display: flex; flex-direction: column; gap: 8px; }
.dc, .bk { display: flex; gap: 8px; align-items: flex-start; background: var(--karte); border: 1px solid var(--linie2); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.45; }
.dc .h, .bk .h { color: var(--grau); font-weight: 800; cursor: grab; flex: none; user-select: none; padding-top: 2px; }
.dc > div, .bk > div { flex: 1; }
.dc .x, .bk .x { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--text-leise); cursor: pointer; border-radius: 8px; font-size: 14px; }
.bk .x { color: var(--or-text); font-weight: 800; font-size: 18px; }
.dc .x:hover, .bk .x:hover { background: var(--or-weich); }
.dc em, .bk em { font-style: normal; display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1px; }
.dc.dragging, .bk.dragging { opacity: .4; }
.op { font-style: normal; background: var(--wahl); color: var(--auf-wahl); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.filt { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.neu { display: none; gap: 6px; margin-bottom: 10px; }
.neu select { width: auto; }
.ow { position: relative; padding: 4px 0 6px; }
.osv { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.oph { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; color: var(--text-leise); margin: 14px 0 0; padding-top: 6px; border-top: 1px dashed var(--linie2); }
.orr { display: flex; justify-content: center; align-items: flex-start; gap: 12px; margin: 30px 0 0; position: relative; z-index: 1; }
.lgk { background: var(--karte); border: 1px solid var(--linie2); border-top: 4px solid; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; flex: 0 1 460px; min-width: 0; }
.lgk.eng { flex: 1 1 0; }
.lgk.zwei { flex-basis: 760px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.lgk.zwei > em { grid-column: 1 / -1; }
.lgk em { display: block; font-style: normal; font-weight: 800; font-size: 12.5px; margin-bottom: 3px; }
.lgk .ob { opacity: .55; }
.lgk .ob.on { opacity: 1; }
.lgk .ob i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-leise); margin-bottom: 2px; }
.lgk .oe { margin-top: 5px; font-size: 10.5px; font-weight: 700; color: var(--text-leise); }
.ola { position: absolute; transform: translateX(-50%); background: var(--grau); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 1px 8px; white-space: nowrap; z-index: 2; }
.ola.on { background: var(--or); color: #1c1c1c; }
#toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #1c1c1c; color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 13px; display: none; max-width: min(640px, calc(100vw - 32px)); z-index: 90; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
#toast.f { background: var(--rot); }
#toast .textlink { color: #ffd9c4; }

/* ---------- Zustände ---------- */
.zustand { padding: 32px 16px; text-align: center; color: var(--text-leise); }
.zustand.leer { border: 2px dashed var(--linie2); border-radius: var(--radius); }
.zustand.fehler { color: var(--rot); background: var(--rot-weich); border-radius: var(--radius); }
.zustand.fehler .btn, .zustand.fehler .knopf { margin-top: 8px; }
.dreher { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 3px solid var(--linie2); border-top-color: var(--or); border-radius: 50%; animation: dreh .8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dreher { animation: none; } }
.meldung { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #1c1c1c; color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 13px; z-index: 90; max-width: min(640px, calc(100vw - 32px)); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.meldung.fehler { background: var(--rot); }

/* ---------- Einstellungen und Reserve ---------- */
.kachelnetz { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kachellink { display: flex; flex-direction: column; gap: 4px; background: var(--karte); border-radius: 14px; padding: 16px 18px; box-shadow: var(--schatten); min-height: 44px; }
.kachellink b { font-size: 15px; }
.kachellink span { color: var(--text-leise); font-size: 12.5px; }
.kachellink:hover { box-shadow: inset 0 0 0 1.5px var(--or), var(--schatten); }
.einbettung { width: 100%; height: 640px; border: 0; border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }

/* ---------- Ältere Ansichten (Zahlen, Admin, Automatik, Hilfsblätter) im neuen Aussehen ---------- */
.karte { background: var(--karte); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--schatten); }
.karte + .karte { margin-top: 0; }
.meta { margin: 0; color: var(--text-leise); font-size: 13px; }
.hinweis { color: var(--text-leise); font-size: 13px; margin: 4px 0 12px; }
.hinweis-box { background: var(--or-weich); border-radius: 12px; padding: 12px 16px; margin: 0; font-weight: 600; }
.knopf {
  font: 700 13.5px Manrope, sans-serif; min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--or); background: var(--or); color: #1c1c1c; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.knopf:hover:not(:disabled) { background: #ea7f49; border-color: #ea7f49; }
.knopf.zweit { background: var(--karte); color: var(--text); border-color: var(--linie2); }
.knopf.zweit:hover:not(:disabled) { border-color: var(--or); background: var(--karte); }
.knopf.gross { min-height: 52px; font-size: 15px; }
.knopf.klein { font-size: 12.5px; }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.icon-knopf { font: inherit; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linie2); background: var(--karte); color: var(--text); cursor: pointer; }
.zahlen { display: flex; gap: 12px; }
.zahl { background: var(--karte); border-radius: 12px; padding: 10px 16px; text-align: center; min-width: 88px; box-shadow: var(--schatten); }
.zahl strong { display: block; font: 800 24px/1.1 "Bricolage Grotesque", sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
.zahl span { font-size: 12px; color: var(--text-leise); }
.zahl.leise strong { color: var(--text-leise); }
.kacheln { flex-wrap: wrap; }
.kennzahl p { margin: 6px 0; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--linie2); background: var(--karte); }
.filter-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; align-items: end; }
.feldgruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.feldgruppe .breit { grid-column: 1 / -1; }
.einwand-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.einwand-liste li { padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.aktionen { display: flex; gap: 8px; margin-top: 8px; }
.schalterliste { display: flex; gap: 20px; flex-wrap: wrap; }
.tabellen-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabelle th { text-align: left; font-size: 12.5px; color: var(--text-leise); font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--linie); }
.tabelle td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--zeile); }
.tabelle td:not(:first-child), .tabelle th:not(:first-child) { text-align: right; }
.tabelle .summe td { font-weight: 800; }
.balken { display: inline-block; width: 100%; min-width: 80px; height: 8px; background: var(--linie); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.balken i { display: block; height: 100%; background: var(--or); }
.zahlenblatt .tabelle td:first-child { font-weight: 600; }

/* Hilfsblätter (Websites, Anrufe, Bewegungen, Sperrliste, Einwilligungen) und Automatik: Tabelle im Kasten */
.tb-titel { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tb-titel > span:first-child { font: 800 30px/1.1 "Bricolage Grotesque", sans-serif; }
.tb-titel input.bl-suche { width: 280px; max-width: 100%; }
.tb-info { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; color: var(--text-leise); }
.tb-info b { color: var(--text); }
.bl-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--text-leise); margin-bottom: 10px; }
.bl-leiste span:first-child { font-variant-numeric: tabular-nums; }
.tb-abstand { flex: 1; }
.tb-wrap { overflow: auto; background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); max-height: calc(100vh - 230px); min-height: 160px; }
table.tb { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
table.tb th { position: sticky; top: 0; z-index: 2; background: var(--karte); color: var(--text-leise); text-align: left; padding: 12px; white-space: nowrap; font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--linie); }
table.tb td { padding: 10px 12px; border-bottom: 1px solid var(--zeile); vertical-align: top; }
table.tb tr.bl-zeile td { white-space: nowrap; }
tr.tb-zeile { cursor: pointer; }
tr.tb-zeile:hover td { background: var(--flaeche); }
tr.tb-zeile:focus-visible { outline: 3px solid var(--or); outline-offset: -3px; }
table.tb td .au-zahl { width: 88px; }
table.tb td select, table.tb td input[type="date"] { width: auto; min-width: 128px; }
table.tb td.au-mitte { text-align: center; }
table.tb td input.fehler, table.tb td select.fehler { border-color: var(--rot); background: var(--rot-weich); }
.tb-leer { padding: 32px 16px; text-align: center; color: var(--text-leise); }
.sk { font: 700 13.5px Manrope, sans-serif; min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linie2); background: var(--karte); color: var(--text); }
.sk:hover:not(:disabled) { border-color: var(--or); }
.sk:disabled { opacity: .45; cursor: not-allowed; }
.sk-orange { background: var(--or); border-color: var(--or); color: #1c1c1c; }
.sk-dunkel { background: var(--wahl); border-color: var(--wahl); color: var(--auf-wahl); }
.bl-status { font-size: 12.5px; font-weight: 600; color: var(--ok); }
.bl-status.fehler { color: var(--rot); }

/* ---------- Fenster über der Seite (Leads verwalten) ---------- */
body.overlay-offen { overflow: hidden; }
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(28, 28, 28, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.overlay-box { width: min(1080px, 100%); height: min(760px, 100%); background: var(--flaeche); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.overlay-box.schmal { width: min(560px, 100%); height: min(620px, 100%); }
.overlay-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 4px 4px 18px; background: var(--karte); border-bottom: 1px solid var(--linie); font-size: 14px; }
.overlay-zu { font: inherit; font-size: 22px; width: 44px; height: 44px; border: 0; background: none; color: var(--text); cursor: pointer; border-radius: 10px; }
.overlay-zu:hover { background: var(--or-weich); }
.overlay-rahmen { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--flaeche); }

/* ---------- Dialoge ---------- */
dialog.dlg { border: 0; border-radius: 16px; padding: 22px 24px 18px; width: min(480px, calc(100vw - 32px)); background: var(--karte); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
dialog.dlg.breit { width: min(620px, calc(100vw - 32px)); }
dialog.dlg::backdrop { background: rgba(28, 28, 28, .45); }
.dlg-titel { display: block; font: 700 20px "Bricolage Grotesque", sans-serif; margin: 0 0 12px; }
.dlg-text { margin: 0 0 14px; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.dlg-feld { margin-bottom: 14px; }
.dlg-felder { display: grid; gap: 12px; margin-bottom: 16px; }
.dlg-felder .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dlg-haken { display: grid; gap: 4px; margin-bottom: 16px; }
.dlg-haken label { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--text); font-weight: 600; }
.dlg-knoepfe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dlg-knopf { font: 700 13.5px Manrope, sans-serif; min-height: 44px; padding: 0 18px; border: 1px solid var(--linie2); border-radius: 12px; cursor: pointer; background: var(--karte); color: var(--text); }
.dlg-knopf:hover { border-color: var(--or); }
.dlg-knopf.ja { background: var(--wahl); border-color: var(--wahl); color: var(--auf-wahl); }
.dlg-liste { display: grid; gap: 6px; margin-bottom: 14px; max-height: 300px; overflow: auto; }
.dlg-treffer { font: inherit; text-align: left; padding: 10px 12px; min-height: 44px; border: 1px solid var(--linie2); border-radius: 10px; background: var(--feld); color: var(--text); cursor: pointer; white-space: pre-wrap; }
.dlg-treffer:hover { border-color: var(--or); }
.dlg-fehler { color: var(--rot); font-size: 13px; font-weight: 600; margin: -6px 0 12px; }

/* ---------- Tablet (1024 px) und schmal ---------- */
/* Feste Spalten: Betrieb links, Öffnen rechts bleiben beim seitlichen Scrollen stehen */
table.liste .fest-l { position: sticky; left: 0; z-index: 1; }
table.liste .fest-l2 { position: sticky; left: 30px; z-index: 1; }
table.liste .fest-r { position: sticky; right: 0; z-index: 1; }
table.liste th.fest-l, table.liste th.fest-l2, table.liste th.fest-r { z-index: 2; }
@media (max-width: 1180px) {
  main { padding: 24px 20px 40px; gap: 20px; }
  .leadseite #app { padding: 20px; }
  /* Lead-Seite einspaltig: Kopf, Anruf und Ergebnis zuerst, dann Leitfaden und Infos */
  .lraster { grid-template-columns: minmax(0, 1fr); }
  .lfg { grid-template-columns: minmax(0, 1fr); }
  /* Pipeline: feste Spalten 260 px, seitlich scrollen */
  .pl-raster { grid-template-columns: repeat(var(--spalten, 5), 260px); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .pl-spalte { scroll-snap-align: start; }
  /* Tabellen behalten ihre Spaltenbreiten und scrollen seitlich, Betrieb und Öffnen bleiben stehen */
  /* Schmalere Spalten, damit bei 1024 px nichts abgeschnitten wird; reicht es nicht (viele Spalten gewählt), scrollt die Tabelle */
  table.liste col.c-betrieb { width: 190px !important; }
  table.liste col.c-telefon { width: 126px !important; }
  table.liste th, table.liste td { padding-left: 8px; padding-right: 8px; }
  table.liste col.c-status, table.liste col.c-stufe { width: 132px !important; }
  table.liste col.c-letztes { width: 120px !important; }
  table.liste col.c-verkaeufer { width: 92px !important; }
  table.liste col.c-faellig { width: 84px !important; }
  table.liste col.c-oeffnen { width: 72px !important; }
  /* Spaltenköpfe, Unterzeilen und Letztes Ergebnis brechen um statt abgeschnitten zu werden */
  table.liste th { white-space: normal; line-height: 1.25; }
  table.liste td .sub { white-space: normal; }
  table.liste td.letztes { white-space: normal; line-height: 1.3; }
  .zwei-zeilen { -webkit-line-clamp: 3; }
  table.liste .vk-name { display: none; }
  table.liste { min-width: 860px; }
  table.liste .fest-l2, table.liste td.fest-l:not(.punktzelle), table.liste th.fest-l:not(:first-child) { box-shadow: 1px 0 0 var(--linie); }
  table.liste .fest-r { box-shadow: -1px 0 0 var(--linie); }
  .kacheln4 .kpi .s { font-size: 12px; }
}
@media (max-width: 720px) {
  .app { flex-direction: column; background: none; }
  .seitennav { position: sticky; top: 0; height: auto; width: 100%; flex: none; flex-direction: row; flex-wrap: wrap; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--linie); }
  .nav-oben { padding: 0 6px; }
  .nav-klapp, .nav-platz, .nav-person .np-text { display: none; }
  .seitennav > a { padding: 8px 10px; }
  .seitennav > a span { display: none; }
  .nav-person { border-top: 0; margin: 0 0 0 auto; padding: 0; min-height: 44px; }
  main { padding: 16px 12px 40px; }
  .kacheln4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 24px; }
}
@media print {
  .seitennav { display: none; }
}

/* Tagespaket (UI 008 A9): Kopfzeile des Pakets und die Zeile zum Aufklappen des Rests */
.tagesliste tr.paketzeile td, .tagesliste tr.klappzeile td { padding: 8px 12px; background: var(--flaeche); cursor: default; }
.tagesliste tr.klappzeile td { text-align: left; }

/* Knopf „Hakt“ in der Navigation (UI 008 A11), aussehen wie ein Navigationseintrag */
.nav-hakt { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; font: inherit; padding: 8px 12px; border-radius: 10px; cursor: pointer; text-align: left; }
.nav-hakt:hover { background: var(--flaeche); }
.nav-zu .nav-hakt span { display: none; }