/* Berater-Portal – mobile-first, ohne Build-Step, ohne externe Quellen (CSP) */
:root {
  --bg: #f6f7f5; --karte: #ffffff; --text: #1d2a2f; --dezent: #5b6b70; --linie: #d8dedb;
  --akzent: #0d6b6e; --akzent-hell: #e3f1f1; --warn: #b3261e; --ok: #1e7f4f; --hinweis: #8a5a00;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--akzent); }
h1 { font-size: 1.35rem; margin: .5rem 0 .75rem; }
h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--dezent); text-transform: uppercase; letter-spacing: .04em; }
.kopf { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; background: var(--karte); border-bottom: 1px solid var(--linie); }
.marke { font-weight: 700; text-decoration: none; color: var(--text); }
.marke span { color: var(--akzent); font-weight: 400; }
.nav { display: flex; gap: 1rem; align-items: center; }
.nav a { text-decoration: none; }
.inline { display: inline; }
button.link { background: none; border: 0; padding: 0; color: var(--akzent); font: inherit; cursor: pointer; text-decoration: underline; }
.inhalt { max-width: 720px; margin: 0 auto; padding: 1rem; }
/* Admin-Auswertungen: die Spalte bleibt eine Lesespalte – Fließtext,
   Kennzahlen und Erklärungen sollen nicht über den halben Monitor laufen.
   Ausbrechen darf nur, was es wirklich braucht: eine Karte mit breiter
   Tabelle. Die wächst symmetrisch um die Mitte, nur so weit wie die Tabelle
   es verlangt (fit-content), und nie über den Bildschirmrand.

   Ohne :has()-Unterstützung bleibt alles in der Lesespalte und die Tabelle
   scrollt waagerecht – also genau das Verhalten von vorher. */
@supports selector(:has(*)) {
  .inhalt.breit > .karte:has(> .tabellenrahmen),
  .inhalt.breit > .tabellenrahmen {
    width: fit-content;
    min-width: 100%;
    max-width: calc(100vw - 2rem);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
.fuss { text-align: center; color: var(--dezent); font-size: .8rem; padding: 1.5rem 1rem; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 1rem; margin-bottom: .75rem; }
.schmal { max-width: 420px; margin: 2rem auto; }
.dezent { color: var(--dezent); font-size: .9rem; }
.leer { color: var(--dezent); text-align: center; padding: 2rem 0; }
.nr { color: var(--dezent); font-variant-numeric: tabular-nums; }
.zeile { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; }
.badges { margin: .3rem 0; }
.badge { font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent); }
.status { font-weight: 600; color: var(--text); }
.warn { color: var(--warn); font-weight: 600; }
.gut { color: var(--ok); font-weight: 600; }
/* Kauftrend je Berater: fallend ist das Signal, steigend nur Beiwerk. */
.trend-runter { color: var(--warn); font-weight: 700; }
.trend-hoch { color: var(--ok); }
.trend-gleich, .trend-unbekannt { color: var(--dezent); }
.trend-neu { color: var(--akzent); font-weight: 600; }
/* Vergleichszeile unter den Kacheln: ein Satz, keine zweite Kachelreihe. */
.vergleich { margin: -.4rem 0 1rem; line-height: 1.5; }
.vergleich .klein { display: block; }
.tabs { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: .6rem; }
.tabs a { white-space: nowrap; text-decoration: none; padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); font-size: .9rem; }
.tabs a.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.tabs .zahl { opacity: .75; margin-left: .25rem; }
.suche { display: flex; gap: .4rem; margin-bottom: .75rem; }
.suche input { flex: 1; }
.liste { list-style: none; padding: 0; margin: 0; }
.lead-karte { display: flex; gap: .75rem; align-items: stretch; padding: .75rem .9rem; }
.lead-link { flex: 1; text-decoration: none; color: inherit; min-width: 0; }
.tel { align-self: center; padding: .55rem .8rem; border-radius: 8px; background: var(--akzent); color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; }
.daten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: 0; }
.daten dt { color: var(--dezent); }
.daten dd { margin: 0; word-break: break-word; }
input, select, textarea, button { font: inherit; }
input[type=email], input[type=search], select, textarea { width: 100%; padding: .55rem .65rem; border: 1px solid var(--linie); border-radius: 8px; background: #fff; }
textarea { resize: vertical; margin-bottom: .5rem; }
label { display: block; margin: .5rem 0 .25rem; color: var(--dezent); font-size: .9rem; }
button { padding: .55rem .9rem; border-radius: 8px; border: 1px solid var(--linie); background: #fff; color: var(--text); cursor: pointer; }
button.primaer, .status-buttons button.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button.primaer { width: 100%; margin-top: .75rem; }
.status-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .5rem; }
.meldung { padding: .6rem .8rem; border-radius: 8px; border: 1px solid; }
.meldung.ok { color: var(--ok); border-color: var(--ok); background: #e9f6ef; }
.meldung.fehler { color: var(--warn); border-color: var(--warn); background: #fdecea; }
.meldung.hinweis { color: var(--hinweis); border-color: #e0c27a; background: #fff8e6; }
.notiz { white-space: pre-wrap; margin: 0; }
.verlauf { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.verlauf li { padding: .25rem 0; border-bottom: 1px solid var(--linie); display: flex; gap: .6rem; }
.verlauf li:last-child { border-bottom: 0; }
:focus-visible { outline: 3px solid #7fb8ba; outline-offset: 2px; }
@media (min-width: 600px) { .status-buttons { grid-template-columns: repeat(4, 1fr); } h1 { font-size: 1.6rem; } }
.mehr summary { cursor: pointer; color: var(--akzent); padding: .4rem 0; }
.verlauf li { justify-content: flex-start; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .75rem; }
.kpi { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .5rem; text-align: center; }
.kpi .wert { display: block; font-size: 1.35rem; font-weight: 700; }
.kpi .label { display: block; font-size: .72rem; color: var(--dezent); line-height: 1.2; }
.karte h2 .zahl { color: var(--akzent); }
.liste.kompakt li { display: flex; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.liste.kompakt li:last-child { border-bottom: 0; }
.tel.klein { padding: .4rem .6rem; font-size: .85rem; }
.monate { margin-top: 1rem; }
.monatsliste { list-style: none; padding: .5rem 0 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.monatsliste a { display: block; padding: .45rem .6rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--karte); text-decoration: none; color: var(--text); font-size: .9rem; }
.monatsliste a.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.monatsliste .zahl { color: var(--dezent); float: right; }
.monatsliste a.aktiv .zahl { color: #cfe8e8; }
.export { margin: .75rem 0 0; font-size: .9rem; }
.karte.wichtig { border-color: var(--akzent); border-width: 2px; }
.karte.wichtig h2 { color: var(--akzent); }
.zahl.gross { font-size: 1.1rem; font-weight: 700; }
.kpis { margin-top: 1rem; }
.woche { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.woche li { flex: 1 1 auto; }
.woche a { display: block; padding: .45rem .7rem; border: 1px solid var(--linie); border-radius: 8px; text-decoration: none; color: var(--text); white-space: nowrap; }
.woche .tag { font-weight: 600; font-size: .85rem; }
.woche .art { display: block; font-size: .75rem; color: var(--dezent); }
.uhr { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--akzent); margin-right: .1rem; }
.export { margin: .75rem 0 0; font-size: .9rem; }
.karte.wichtig { border-color: var(--akzent); border-width: 2px; }
.karte.wichtig h2 { color: var(--akzent); }
.zahl.gross { font-size: 1.1rem; font-weight: 700; }
.kpis { margin-top: 1rem; }
/* Fahne im Outlook-Stil: Symbol, Klick öffnet die Farbauswahl */
.fahne { position: relative; align-self: center; }
.fahne > summary { list-style: none; cursor: pointer; padding: .35rem; border-radius: 8px; line-height: 1; }
.fahne > summary::-webkit-details-marker { display: none; }
.fahne > summary:hover { background: var(--akzent-hell); }
.fahnen-menu { position: absolute; right: 0; top: 100%; z-index: 20; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: .3rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 9.5rem; }
.fahnen-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; padding: .4rem .5rem; border-radius: 6px; text-align: left; }
.fahnen-menu button:hover { background: var(--akzent-hell); }
.fahnen-menu button.aktiv { font-weight: 700; }

/* ── Fahnen ──
   Farben als Klassen, weil die CSP keine Inline-Styles erlaubt. Die Kachel
   bekommt einen farbigen Rand links und einen hellen Farbschimmer, damit die
   Markierung im Listenblick wirkt und nicht nur im Symbol steckt. */
.fahnen-icon { flex: 0 0 auto; vertical-align: -3px; }
.fahnen-icon path { stroke: currentColor; stroke-width: 1.5; fill: none; }
.fahnen-icon path + path { fill: currentColor; }
.f-keine { color: #9aa5a8; }
.f-keine path + path { fill: none; }
.f-rot { color: #d93025; }
.f-gelb { color: #d9a406; }
.f-gruen { color: #1e8e3e; }
.f-orange { color: #e2670a; }
.f-lila { color: #8e24aa; }
.f-blau { color: #1a73e8; }

.lead-karte.f-rot { border-left: 5px solid #d93025; background: #fdecea; }
.lead-karte.f-gelb { border-left: 5px solid #d9a406; background: #fff8e1; }
.lead-karte.f-gruen { border-left: 5px solid #1e8e3e; background: #e9f6ef; }
.lead-karte.f-orange { border-left: 5px solid #e2670a; background: #fff1e5; }
.lead-karte.f-lila { border-left: 5px solid #8e24aa; background: #f5ecfa; }
.lead-karte.f-blau { border-left: 5px solid #1a73e8; background: #e8f1fd; }

h1.mit-fahne { display: flex; align-items: center; gap: .4rem; }
h1.mit-fahne .fahne { align-self: center; }
.tabs.klein a { font-size: .82rem; padding: .3rem .6rem; }

/* ── Filter-Trichter ── */
.suchzeile { display: flex; gap: .4rem; align-items: flex-start; margin-bottom: .75rem; }
.suchzeile .suche { flex: 1; margin-bottom: 0; }
.trichter { position: relative; }
.trichter > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .25rem; padding: .55rem .65rem; border: 1px solid var(--linie); border-radius: 8px; background: #fff; color: var(--dezent); }
.trichter > summary::-webkit-details-marker { display: none; }
.trichter[open] > summary { border-color: var(--akzent); color: var(--akzent); }
.trichter > summary .zahl { background: var(--akzent); color: #fff; border-radius: 999px; padding: 0 .35rem; font-size: .72rem; }
.trichter-menu { position: absolute; right: 0; top: 100%; z-index: 20; width: 15rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .7rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.trichter-menu fieldset { border: 0; padding: 0; margin: 0 0 .6rem; }
.trichter-menu legend { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dezent); padding: 0 0 .2rem; }
.wahl { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .2rem 0; font-size: .9rem; color: var(--text); }
.wahl input { width: auto; }
.trichter-aktionen { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.trichter-aktionen .primaer { width: auto; margin: 0; }
.als-banner { margin: 0; padding: .5rem 1rem; background: #fff8e6; border-bottom: 1px solid #e0c27a; color: var(--hinweis); font-size: .9rem; text-align: center; }
.anzahl-zeile { margin: 0 0 .5rem; }
.mehr-laden { text-align: center; margin: .75rem 0; }
.mehr-laden a { display: inline-block; padding: .55rem 1.1rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); text-decoration: none; }
.trichter-menu select { width: 100%; }
.kalender-link { display: inline-block; padding: .4rem .7rem; border: 1px solid var(--linie); border-radius: 8px; text-decoration: none; font-size: .9rem; }

/* ── Ergebnis erfassen ── */
.ergebnis { border-top: 1px solid var(--linie); }
.ergebnis:first-of-type { border-top: 0; }
.ergebnis > summary { cursor: pointer; padding: .6rem .1rem; font-weight: 600; display: flex; gap: .4rem; align-items: center; }
.ergebnis[open] > summary { color: var(--akzent); }
.ergebnis form { padding: 0 .1rem .6rem; }
.eigener { gap: .4rem; }
.eigener input[type=date] { flex: 1 1 8rem; }
.eigener select { flex: 0 0 6rem; }
.tel-text { font-variant-numeric: tabular-nums; }

/* ── Statistik ──
   Diagramme sind SVG mit Farben als Klasse: die CSP erlaubt kein
   style-Attribut, Geometrie steckt in SVG-Attributen (x, y, width). */
.kachelgitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .75rem; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: .55rem .65rem; }
.kachel.wichtig { border-color: var(--akzent); background: var(--akzent-hell); }
.kachel .label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dezent); }
.kachel .wert { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kachel .unter { display: block; font-size: .82rem; color: var(--dezent); font-variant-numeric: tabular-nums; }

.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart.stapel { height: 26px; border-radius: 4px; }
.ch-gitter { stroke: var(--linie); stroke-width: 1; }
.ch-basis { stroke: #b9c4c0; stroke-width: 1; }
.ch-achse { fill: var(--dezent); font-size: 10px; }
.ch-label { fill: var(--text); font-size: 11px; }
.ch-wert { fill: var(--text); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-zusatz { fill: var(--dezent); font-size: 10px; font-variant-numeric: tabular-nums; }
.ch-spur { fill: #edf1ef; }
.ch-schnitt { stroke: var(--hinweis); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-saeule { fill: #7fb8ba; }
.ch-saeule.ch-hervor { fill: var(--akzent); }
.ch-balken { fill: var(--akzent); }
.ch-a { fill: #0d6b6e; }
.ch-b { fill: #7fb8ba; }
.ch-c { fill: #c4d6cf; }
.ch-ok { fill: var(--ok); }
.ch-warn { fill: var(--warn); }
.ch-neutral { fill: #dfe5e2; }

.legende { list-style: none; padding: .5rem 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; }
.legende li { display: flex; align-items: center; gap: .35rem; }
.punkt { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.punkt.ch-a { background: #0d6b6e; }
.punkt.ch-b { background: #7fb8ba; }
.punkt.ch-c { background: #c4d6cf; }
.punkt.ch-ok { background: var(--ok); }
.punkt.ch-warn { background: var(--warn); }
.punkt.ch-neutral { background: #dfe5e2; }

.tabellenrahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabelle th, .tabelle td { padding: .4rem .45rem; border-bottom: 1px solid var(--linie); text-align: left; white-space: nowrap; }
.tabelle thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--dezent); }
.tabelle .r { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle tbody tr.aktiv { background: var(--akzent-hell); }
.tabelle tfoot th { border-top: 2px solid var(--linie); border-bottom: 0; }

.kpis.vier { grid-template-columns: repeat(2, 1fr); }
h2.abschnitt { margin: 1.25rem 0 .5rem; color: var(--text); font-size: 1.05rem; text-transform: none; letter-spacing: 0; }
.klein { font-size: .8rem; }
.paare { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; margin: .75rem 0 0; font-size: .9rem; }
.paare dt { color: var(--dezent); }
.paare dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

@media (min-width: 600px) {
  .kachelgitter { grid-template-columns: repeat(5, 1fr); }
  .kpis.vier { grid-template-columns: repeat(4, 1fr); }
}
/* Der viewBox ist 680 Einheiten breit und skaliert auf dem Handy auf etwa die
   Hälfte. Schriftgrößen im SVG sind Nutzereinheiten und schrumpfen mit – ohne
   diese Verdopplung wären die Achsen dort 5 px hoch und unlesbar. */
@media (max-width: 599px) {
  .ch-achse { font-size: 18px; }
  .ch-label { font-size: 18px; }
  .ch-wert { font-size: 18px; }
  .ch-zusatz { font-size: 15px; }
}

/* ── Admin-Ansichten ── */
.standzeile { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: baseline; justify-content: space-between; margin: 0 0 .75rem; }
.filterzeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: 0 0 .75rem; }
.filterzeile label { display: flex; flex-direction: column; font-size: .8rem; color: var(--dezent); gap: .2rem; }
.filterzeile select { padding: .45rem .5rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--karte); color: var(--text); }
.filterzeile button { padding: .5rem .8rem; border: 1px solid var(--akzent); border-radius: 8px; background: var(--akzent); color: #fff; }
.tabelle tr.gesperrt td { opacity: .55; }
.tabelle td.warn, .tabelle .warn { color: var(--warn); }
.zeile2 { display: block; }
.tabelle td .zeile2 { white-space: normal; }

/* Palette für die Anteile je Berater. Sechs Namen plus "Übrige" – mehr
   Segmente sind auf einem Balken nicht lesbar und die Legende wird Tapete. */
.ch-p1 { fill: #0d6b6e; } .punkt.ch-p1 { background: #0d6b6e; }
.ch-p2 { fill: #2f8f92; } .punkt.ch-p2 { background: #2f8f92; }
.ch-p3 { fill: #57b0b2; } .punkt.ch-p3 { background: #57b0b2; }
.ch-p4 { fill: #86c9c3; } .punkt.ch-p4 { background: #86c9c3; }
.ch-p5 { fill: #b0ddd3; } .punkt.ch-p5 { background: #b0ddd3; }
.ch-p6 { fill: #d5ece3; } .punkt.ch-p6 { background: #d5ece3; }

@media (prefers-color-scheme: dark) {
  .ch-p1 { fill: #2f8f92; } .punkt.ch-p1 { background: #2f8f92; }
  .ch-p2 { fill: #3fa3a5; } .punkt.ch-p2 { background: #3fa3a5; }
  .ch-p3 { fill: #57b0b2; } .punkt.ch-p3 { background: #57b0b2; }
  .ch-p4 { fill: #6dbdb5; } .punkt.ch-p4 { background: #6dbdb5; }
  .ch-p5 { fill: #85c7bd; } .punkt.ch-p5 { background: #85c7bd; }
  .ch-p6 { fill: #9dd1c6; } .punkt.ch-p6 { background: #9dd1c6; }
  .filterzeile select { background: #131a1b; }
}

/* ── Listenkopf: Zählung und Export oben ──
   Der Export bezieht sich auf die vollständige Auswahl, nicht auf das, was
   gerade nachgeladen ist. Unten am Listenende war er bei 3.000 Leads
   praktisch unerreichbar. */
.listenkopf { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; justify-content: space-between; margin: 0 0 .5rem; }
.export-link { font-size: .85rem; padding: .3rem .7rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); text-decoration: none; white-space: nowrap; }
.mehr-laden .alle-laden { margin-left: .5rem; border-style: dashed; }
.mehr-laden .zeile2 { margin-top: .4rem; }

/* ── Ampel im Sicherheits-Dashboard ── */
.ampel { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; background: var(--ok); }
.ampel.a-gelb { background: #d9a406; }
.ampel.a-rot { background: var(--warn); }
/* Unbekannt ist nicht grün: der Sammler konnte den Wert nicht ermitteln. */
.ampel.a-unbekannt { background: var(--ch-basis); }
.tabelle td.a-unbekannt { color: var(--dezent); }
.tabelle td.a-gelb { color: #8a5a00; font-weight: 700; }
.tabelle td.a-rot { color: var(--warn); font-weight: 700; }
.paare dd.links { text-align: left; font-variant-numeric: normal; }
.tabelle td.netz { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--dezent); }

/* ── Darkmode ──
   Folgt der Systemeinstellung. Kein Umschalter, kein JavaScript, keine
   Serveränderung: die Variablen aus :root werden überschrieben, dazu die
   Stellen mit festen Hexwerten (Fahnen-Kacheln, Meldungen, Diagrammflächen).
   `color-scheme` sagt dem Browser, dass er Formularelemente, Scrollbalken und
   das Standard-Fokusbild dunkel zeichnen soll – ohne die Zeile bleiben
   Eingabefelder weiß. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #14191a;
    --karte: #1c2325;
    --text: #e6ecec;
    --dezent: #9caeb0;
    --linie: #2d383a;
    --akzent: #58b8bb;
    --akzent-hell: #16302f;
    --warn: #ff7a6d;
    --ok: #4cc38a;
    --hinweis: #e2b662;
  }

  /* Meldungen: die hellen Hintergründe aus dem Lichtmodus blenden hier. */
  .meldung.ok { background: #12291f; border-color: var(--ok); }
  .meldung.fehler { background: #2e1817; border-color: var(--warn); }
  .meldung.hinweis { background: #2b2312; border-color: #6b5524; }
  .als-banner { background: #2b2312; color: var(--hinweis); }

  /* Fahnen: Symbolfarben bleiben (sie sind die Bedeutung), die Kachelflächen
     werden gedämpft – sonst leuchtet eine markierte Zeile wie ein Warnschild. */
  .lead-karte.f-rot { background: #2c1817; }
  .lead-karte.f-gelb { background: #2a2312; }
  .lead-karte.f-gruen { background: #142719; }
  .lead-karte.f-orange { background: #2c1f13; }
  .lead-karte.f-lila { background: #241a2b; }
  .lead-karte.f-blau { background: #15202f; }
  .f-keine { color: #7c8b8d; }

  /* Menüs und Eingaben: feste #fff-Werte überschreiben. */
  .trichter > summary { background: var(--karte); }
  .fahnen-menu, .trichter-menu { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
  input, select, textarea {
    background: #131a1b;
    color: var(--text);
    border-color: var(--linie);
  }
  input::placeholder, textarea::placeholder { color: #78888a; }

  /* Diagramme: Spur, neutrale Fläche und die hellste Reihe brauchen mehr
     Kontrast gegen den dunklen Karton. */
  .ch-gitter { stroke: #263133; }
  .ch-basis { stroke: #47585b; }
  .ch-spur { fill: #232d2f; }
  .ch-neutral, .punkt.ch-neutral { fill: #3a484b; background: #3a484b; }
  .ch-c, .punkt.ch-c { fill: #4a6b6d; background: #4a6b6d; }
  .ch-b, .punkt.ch-b { fill: #6aa8ab; background: #6aa8ab; }
  .ch-a, .punkt.ch-a { fill: #2e8e91; background: #2e8e91; }
  .ch-saeule { fill: #3f7b7d; }
  .ch-saeule.ch-hervor, .ch-balken { fill: var(--akzent); }

  :focus-visible { outline-color: var(--akzent); }
}

@media (prefers-color-scheme: dark) {
  .export-link { background: var(--karte); }
}
/* ── Farbschema: System / Hell / Dunkel ──
   Der Block oben (@media prefers-color-scheme) bleibt der Standard. Hier kommen
   zwei Dinge dazu:

   1. Die getönten Flächen werden auf Variablen umgestellt. Vorher standen die
      Farben doppelt im Stylesheet – einmal hell, einmal im Dark-Media-Block.
      Ein erzwungener Hellmodus auf einem dunklen Gerät hätte sonst dunkle
      Meldungsflächen behalten. Diese Regeln stehen bewusst am Dateiende:
      bei gleicher Spezifität gewinnt die spätere.

   2. Drei Zustände über body[data-thema]. 'hell' muss die Variablen
      ausdrücklich zurücksetzen, weil der Media-Block sie am :root schon auf
      dunkel gestellt hat. */

:root {
  --flaeche-ok: #e9f6ef; --flaeche-fehler: #fdecea; --flaeche-hinweis: #fff8e6;
  --rand-hinweis: #e0c27a;
  --f-rot-flaeche: #fdecea; --f-gelb-flaeche: #fff8e1; --f-gruen-flaeche: #e9f6ef;
  --f-orange-flaeche: #fff1e5; --f-lila-flaeche: #f5ecfa; --f-blau-flaeche: #e8f1fd;
  --eingabe: #ffffff; --schatten: rgba(0,0,0,.12);
  --ch-spur: #edf1ef; --ch-basis: #b9c4c0; --ch-neutral: #dfe5e2;
  --ch-saeule: #7fb8ba; --ch-c: #c4d6cf; --ch-b: #7fb8ba; --ch-a: #0d6b6e;
}

/* Dunkel – als Variablensatz, damit er von zwei Stellen aus gesetzt werden kann */
body[data-thema="dunkel"],
body[data-thema="system"] {
  color-scheme: light dark;
}
body[data-thema="dunkel"] {
  color-scheme: dark;
  --bg: #14191a; --karte: #1c2325; --text: #e6ecec; --dezent: #9caeb0;
  --linie: #2d383a; --akzent: #58b8bb; --akzent-hell: #16302f;
  --warn: #ff7a6d; --ok: #4cc38a; --hinweis: #e2b662;
  --flaeche-ok: #12291f; --flaeche-fehler: #2e1817; --flaeche-hinweis: #2b2312;
  --rand-hinweis: #6b5524;
  --f-rot-flaeche: #2c1817; --f-gelb-flaeche: #2a2312; --f-gruen-flaeche: #142719;
  --f-orange-flaeche: #2c1f13; --f-lila-flaeche: #241a2b; --f-blau-flaeche: #15202f;
  --eingabe: #131a1b; --schatten: rgba(0,0,0,.5);
  --ch-spur: #232d2f; --ch-basis: #47585b; --ch-neutral: #3a484b;
  --ch-saeule: #3f7b7d; --ch-c: #4a6b6d; --ch-b: #6aa8ab; --ch-a: #2e8e91;
}
/* System auf dunklem Gerät: dieselben Variablen, nur über die Media-Query.
   Ohne diesen Block greifen unten die variablen-basierten Regeln mit den HELLEN
   Werten und überstimmen den alten Dark-Block – das Ergebnis ist ein dunkler
   Hintergrund mit hellen Meldungsflächen und weißen Eingabefeldern. */
@media (prefers-color-scheme: dark) {
  body[data-thema="system"] {
    --bg: #14191a; --karte: #1c2325; --text: #e6ecec; --dezent: #9caeb0;
    --linie: #2d383a; --akzent: #58b8bb; --akzent-hell: #16302f;
    --warn: #ff7a6d; --ok: #4cc38a; --hinweis: #e2b662;
    --flaeche-ok: #12291f; --flaeche-fehler: #2e1817; --flaeche-hinweis: #2b2312;
    --rand-hinweis: #6b5524;
    --f-rot-flaeche: #2c1817; --f-gelb-flaeche: #2a2312; --f-gruen-flaeche: #142719;
    --f-orange-flaeche: #2c1f13; --f-lila-flaeche: #241a2b; --f-blau-flaeche: #15202f;
    --eingabe: #131a1b; --schatten: rgba(0,0,0,.5);
    --ch-spur: #232d2f; --ch-basis: #47585b; --ch-neutral: #3a484b;
    --ch-saeule: #3f7b7d; --ch-c: #4a6b6d; --ch-b: #6aa8ab; --ch-a: #2e8e91;
  }
}

/* Hell erzwungen: Variablen zurücksetzen, weil der Media-Block sie am :root
   bereits überschrieben hat. */
body[data-thema="hell"] {
  color-scheme: light;
  --bg: #f6f7f5; --karte: #ffffff; --text: #1d2a2f; --dezent: #5b6b70;
  --linie: #d8dedb; --akzent: #0d6b6e; --akzent-hell: #e3f1f1;
  --warn: #b3261e; --ok: #1e7f4f; --hinweis: #8a5a00;
  --flaeche-ok: #e9f6ef; --flaeche-fehler: #fdecea; --flaeche-hinweis: #fff8e6;
  --rand-hinweis: #e0c27a;
  --f-rot-flaeche: #fdecea; --f-gelb-flaeche: #fff8e1; --f-gruen-flaeche: #e9f6ef;
  --f-orange-flaeche: #fff1e5; --f-lila-flaeche: #f5ecfa; --f-blau-flaeche: #e8f1fd;
  --eingabe: #ffffff; --schatten: rgba(0,0,0,.12);
  --ch-spur: #edf1ef; --ch-basis: #b9c4c0; --ch-neutral: #dfe5e2;
  --ch-saeule: #7fb8ba; --ch-c: #c4d6cf; --ch-b: #7fb8ba; --ch-a: #0d6b6e;
}

/* Elementregeln – nur noch über Variablen, einmal für alle drei Zustände */
.meldung.ok { background: var(--flaeche-ok); }
.meldung.fehler { background: var(--flaeche-fehler); }
.meldung.hinweis { background: var(--flaeche-hinweis); border-color: var(--rand-hinweis); }
.als-banner { background: var(--flaeche-hinweis); border-bottom-color: var(--rand-hinweis); }
.lead-karte.f-rot { background: var(--f-rot-flaeche); }
.lead-karte.f-gelb { background: var(--f-gelb-flaeche); }
.lead-karte.f-gruen { background: var(--f-gruen-flaeche); }
.lead-karte.f-orange { background: var(--f-orange-flaeche); }
.lead-karte.f-lila { background: var(--f-lila-flaeche); }
.lead-karte.f-blau { background: var(--f-blau-flaeche); }
input[type=email], input[type=search], input[type=date], select, textarea, button,
.trichter > summary, .filterzeile select { background: var(--eingabe); color: var(--text); }
button.primaer, .status-buttons button.aktiv, .filterzeile button,
.tabs a.aktiv, .monatsliste a.aktiv, .tel { background: var(--akzent); color: #fff; }
.fahnen-menu, .trichter-menu { box-shadow: 0 8px 24px var(--schatten); }
.ch-spur { fill: var(--ch-spur); }
.ch-basis { stroke: var(--ch-basis); }
.ch-neutral { fill: var(--ch-neutral); }
.punkt.ch-neutral { background: var(--ch-neutral); }
.ch-saeule { fill: var(--ch-saeule); }
.ch-saeule.ch-hervor, .ch-balken { fill: var(--akzent); }
.ch-a { fill: var(--ch-a); } .punkt.ch-a { background: var(--ch-a); }
.ch-b { fill: var(--ch-b); } .punkt.ch-b { background: var(--ch-b); }
.ch-c { fill: var(--ch-c); } .punkt.ch-c { background: var(--ch-c); }

/* Umschalter in der Kopfzeile */
.thema-wahl { display: inline-flex; gap: .1rem; border: 1px solid var(--linie); border-radius: 999px; padding: .1rem; }
.thema-wahl a { font-size: .72rem; padding: .15rem .45rem; border-radius: 999px; text-decoration: none; color: var(--dezent); }
.thema-wahl a.aktiv { background: var(--akzent); color: #fff; }

/* Streifen "neue Leads": erscheint nur, wenn app.js etwas gefunden hat. */
.neue-leads { margin: 0 0 .6rem; padding: .5rem .8rem; border-radius: 8px;
  border: 1px solid var(--akzent); background: var(--akzent-hell);
  color: var(--akzent); font-size: .9rem; }
.neue-leads a { font-weight: 700; }

/* ── Kontrast im dunklen Schema ──
   Karte und Hintergrund lagen bei #1c2325 zu #14191a nur acht Stufen
   auseinander – auf einem Notebook-Display sieht das aus wie eine große graue
   Fläche ohne Struktur. Rand plus etwas mehr Abstand trennen die Kästen. */
@media (prefers-color-scheme: dark) {
  body[data-thema="system"] .karte,
  body[data-thema="system"] .kpi,
  body[data-thema="system"] .kachel { border-color: #344245; }
}
body[data-thema="dunkel"] .karte,
body[data-thema="dunkel"] .kpi,
body[data-thema="dunkel"] .kachel { border-color: #344245; }

/* ── Knopfgrößen in Filterzeilen ──
   Der Knopf erbte die Grundpolsterung (.55rem/.9rem bei 16px) und stand damit
   deutlich höher als das Auswahlfeld daneben, das über .filterzeile select nur
   .45rem hat. Gleiche Höhe, gleiche Schriftgröße. */
.filterzeile button, .suche button {
  padding: .45rem .75rem; font-size: .9rem; line-height: 1.3;
}
.filterzeile select, .filterzeile input[type=search] {
  padding: .45rem .5rem; font-size: .9rem; line-height: 1.3;
}
.filterzeile label { font-size: .72rem; }