/* rr_dash — mobile-first, eine Datei, keine CDN (CSP default-src 'self').
   Grosse Tap-Ziele: Raphael bedient das auf der Baustelle mit Handschuhen. */

:root {
  --text: #1c1c1c;
  --grau: #6b6b6b;
  --linie: #e2e2e2;
  --hell: #f6f6f4;
  --akzent: #1f5f3f;
  --warn: #8a4b00;
  --weiss: #fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--hell);
}

main { padding: 1rem 1rem 4rem; max-width: 60rem; margin: 0 auto; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }

a { color: var(--akzent); }

/* --- Navigation ------------------------------------------------------------ */
nav {
  display: flex; gap: .25rem; overflow-x: auto;
  background: var(--weiss); border-bottom: 1px solid var(--linie);
  padding: .25rem .5rem; position: sticky; top: 0; z-index: 1;
}
nav a {
  padding: .75rem .9rem; text-decoration: none; color: var(--grau);
  white-space: nowrap; border-radius: 6px;
}
nav a.aktiv { color: var(--text); font-weight: 600; background: var(--hell); }
nav a.abmelden { margin-left: auto; }

/* --- Karten (laufende Auftraege) ------------------------------------------- */
ul.karten { list-style: none; padding: 0; margin: 0; }
ul.karten li {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  padding: .9rem; margin-bottom: .6rem;
}
ul.karten a { display: flex; justify-content: space-between; gap: .5rem;
              align-items: baseline; text-decoration: none; }
.kunde { font-weight: 600; color: var(--text); }
.zeile2, .zeile3 { margin: .35rem 0 0; color: var(--grau); font-size: .9rem; }

.status {
  font-size: .75rem; padding: .2rem .5rem; border-radius: 999px;
  background: var(--hell); color: var(--grau); white-space: nowrap;
}
.status-anfrage, .status-nachfassen { background: #fff3d6; color: #7a5200; }
.status-zusage, .status-räumung-geplant { background: #e2f0e6; color: var(--akzent); }
.status-rechnung-versendet { background: #e5eefc; color: #123c77; }

.pausiert {
  margin-left: .4rem; font-size: .75rem; padding: .1rem .45rem; border-radius: 999px;
  background: #fde8e8; color: #8a1f1f;
}

/* --- Tabellen -------------------------------------------------------------- */
table {
  width: 100%; border-collapse: collapse; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 10px; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
th, td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--linie); }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color: var(--grau); }
td.zahl, th.zahl { text-align: right; }
tbody tr:last-child td { border-bottom: none; }
tfoot th { border-top: 2px solid var(--linie); color: var(--text); }
td small { display: block; color: var(--grau); font-size: .78rem; }

/* --- To-Dos ---------------------------------------------------------------- */
ul.todos { list-style: none; padding: 0; margin: 0; }
ul.todos li {
  display: flex; align-items: center; gap: .75rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  padding: .8rem; margin-bottom: .5rem;
}
.todo-text { flex: 1; min-width: 0; }
.todo-titel { font-weight: 600; }
.durchgestrichen { text-decoration: line-through; color: var(--grau); font-weight: 400; }
/* Detailtext einer Aufgabe: echte Absaetze statt einer Textwurst.
   (Vorher `.details`: .85rem grau ueber die volle Breite. Dann `pre-wrap` — half nicht, weil
   die Texte gar keine Umbrueche enthalten. Jetzt trennt `detail_absaetze` an Satzgrenzen und
   liefert <p>-Absaetze; `white-space` bleibt deshalb normal. 10.07.) */
.detailtext {
  margin: .35rem 0 0; padding: .8rem .9rem;
  background: var(--hell); border: 1px solid var(--linie); border-radius: 8px;
  color: var(--text); font-size: .95rem; line-height: 1.6; max-width: 40rem;
  overflow-wrap: anywhere;
}
.detailtext p { margin: 0 0 .6rem; }
.detailtext p:last-child { margin-bottom: 0; }
/* Links im Detailtext (live nur lexoffice): sichtbar, grosse Tap-Flaeche, umbruchfest. */
.detailtext a {
  color: var(--akzent); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; overflow-wrap: anywhere;
}
ul.todos.erledigt li { opacity: .65; }

button.haken {
  background: var(--akzent); color: var(--weiss); border: none; border-radius: 8px;
  padding: .8rem 1rem; font-size: .9rem; font-weight: 600; cursor: pointer;
  min-width: 5.5rem; min-height: 2.9rem;   /* Tap-Ziel */
}
button.haken:active { background: #16452e; }

details summary { cursor: pointer; padding: .75rem 0; color: var(--grau); }

/* --- Formulare / Filter ---------------------------------------------------- */
form.filter {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  padding: .75rem; margin-bottom: 1rem;
}
form.filter label { color: var(--grau); font-size: .85rem; }
input, select {
  font: inherit; padding: .6rem; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--weiss); min-height: 2.9rem;
}
form.filter button, .login button {
  background: var(--akzent); color: var(--weiss); border: none; border-radius: 8px;
  padding: .7rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; min-height: 2.9rem;
}

/* --- Login ----------------------------------------------------------------- */
.login {
  max-width: 22rem; margin: 3rem auto; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 12px; padding: 1.5rem;
}
.login form { display: flex; flex-direction: column; gap: .35rem; }
.login label { font-size: .85rem; color: var(--grau); margin-top: .5rem; }
.login button { margin-top: 1rem; }

/* --- Kleinkram ------------------------------------------------------------- */
dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem;
     background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: .9rem; }
dt { color: var(--grau); font-size: .85rem; }
dd { margin: 0; }

.hinweis { color: var(--grau); }
.fussnote { color: var(--grau); font-size: .82rem; margin-top: .6rem; }
.leer { color: var(--grau); font-style: italic; }
.fehler { background: #fde8e8; color: #8a1f1f; padding: .7rem; border-radius: 8px; }
.warnung { background: #fff3d6; color: var(--warn); padding: .7rem; border-radius: 8px; }
.flag { font-weight: 600; }
.zurueck { margin: 0 0 .5rem; }
code { background: var(--hell); padding: .1rem .3rem; border-radius: 4px; font-size: .85em; }

@media (min-width: 40rem) {
  main { padding: 1.5rem; }
  h1 { font-size: 1.9rem; }
}

/* AP1: Ampel ---------------------------------------------------------------- */
/* Warte-Ampel als Farb-Klasse (nie Inline-Style: CSP style-src 'self' ohne
   'unsafe-inline'). Pillen-Optik wie .status, aber die Farbe traegt Bedeutung. */
.karte-kopf { display: flex; justify-content: space-between; gap: .5rem;
              align-items: baseline; text-decoration: none; }
.ampel {
  font-size: .78rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.ampel-rot     { background: #fde8e8; color: #8a1f1f; }
.ampel-gelb    { background: #fff3d6; color: #7a5200; }
.ampel-gruen   { background: #e2f0e6; color: #1f5f3f; }
.ampel-neutral { background: var(--hell); color: var(--grau); }

/* "Entwurf liegt bereit" — unabhaengig von der Ampelfarbe, immer sichtbar. */
.badge {
  display: inline-block; margin: .5rem 0 0; font-size: .78rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 6px; background: #e5eefc; color: #123c77;
}

/* AP2: To-Dos --------------------------------------------------------------- */
/* Gruppierung nach `typ`, einklappbare Details (<details>, kein JS), faellig/
   ueberfaellig als Farb-Klasse (nie Inline-Style: CSP style-src 'self'). */

/* "Erledigt = quittiert"-Hinweis unter der Ueberschrift: ruhig, aber sichtbar. */
.todo-erklaerung {
  color: var(--grau); font-size: .92rem; line-height: 1.45;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  padding: .7rem .85rem; margin: 0 0 1.25rem;
}
.todo-erklaerung strong { color: var(--text); }

/* Anzahl je Gruppen-Ueberschrift: leiser als der Titel. */
h2 .anzahl {
  font-size: .82rem; font-weight: 600; color: var(--grau);
  background: var(--hell); border-radius: 999px; padding: .1rem .5rem;
  vertical-align: middle; margin-left: .35rem;
}

/* Faellig-Datum: normal leise, ueberfaellig laut. */
.faellig { color: var(--grau); }
.faellig-alarm { color: #8a1f1f; font-weight: 600; }

/* Ueberfaellige Aufgabe: roter Balken links + zarter Ton, damit sie heraussticht. */
ul.todos li.ueberfaellig {
  border-left: 4px solid #b3261e;
  background: #fef4f2;
}

/* Entwurfs-Betreff (A4 best effort) an einer Freigabe-Aufgabe. */
.entwurf-betreff {
  margin: .4rem 0 0; font-size: .85rem; color: #123c77;
  background: #e5eefc; border-radius: 6px; padding: .3rem .5rem; display: inline-block;
}

/* Details-Aufklapper je Aufgabe: kompakter als der Seiten-Aufklapper. */
.todo-details summary { padding: .4rem 0; font-size: .85rem; }
.todo-details .detailtext { margin-top: .25rem; }

/* AP3: Werbung -------------------------------------------------------------- */
/* Balken CSP-sicher via <meter> (Wert/Max stehen als HTML-Attribut am Element,
   Farbe/Groesse steuert AUSSCHLIESSLICH diese Klasse — nie Inline-Style, weil
   CSP style-src 'self' ohne 'unsafe-inline' laeuft). Ohne diese Regeln zeigt der
   Browser trotzdem einen proportionalen Standard-Balken; hier nur die Optik. */
meter.balken {
  width: 100%; min-width: 4rem; max-width: 12rem; height: .8rem;
  vertical-align: middle;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--hell);
}
/* WebKit/Blink (Raphael bedient das am Handy = Safari): Track + Fuellung faerben. */
meter.balken::-webkit-meter-bar {
  background: var(--hell); border: none; border-radius: 999px; height: .8rem;
}
/* 10.07.: Leitzahl ist die HALTEQUOTE (gruen), nicht mehr die Verloren-Quote (rot). Ohne
   low/high/optimum am <meter> gilt jeder Wert als "optimum" — die anderen zwei Selektoren
   sind Absicherung, falls spaeter Schwellen gesetzt werden. */
meter.balken.gehalten::-webkit-meter-optimum-value,
meter.balken.gehalten::-webkit-meter-suboptimum-value,
meter.balken.gehalten::-webkit-meter-even-less-good-value { background: var(--akzent); border-radius: 999px; }
meter.balken.monat::-webkit-meter-optimum-value { background: var(--akzent); border-radius: 999px; }
/* Firefox */
meter.balken.gehalten::-moz-meter-bar { background: var(--akzent); border-radius: 999px; }
meter.balken.monat::-moz-meter-bar { background: var(--akzent); border-radius: 999px; }

/* Haltequote: Balken + Prozentzahl nebeneinander. */
.quote { display: flex; align-items: center; gap: .5rem; }
.quote-zahl {
  font-variant-numeric: tabular-nums; color: var(--grau); font-size: .85rem;
  min-width: 2.6rem; text-align: right; flex-shrink: 0;
}

/* Breite Tabelle darf horizontal scrollen, statt die Seite zu sprengen (mobil). */
.tabelle-breit { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle-breit table { min-width: 34rem; }

/* AP4: Kundenakt ------------------------------------------------------------- */
/* Neue Seite /kunde/<id>: Kontakt + alle Auftraege + Verlaufs-Metadaten. Reuse der
   bestehenden Bausteine (dl, ul.karten, .status, table, .fussnote, .tabelle-breit);
   nur zwei eigene Regeln. Kein Inline-Style (CSP style-src 'self'). */

/* Auftrags-Titel in der Akt-Kartenliste (auf /kunde ist der Kunde bekannt, betont wird
   deshalb der Auftrag statt des Kundennamens wie auf der Uebersicht). */
.karten .akt-auftrag-titel { font-weight: 600; color: var(--text); }

/* Der Verlauf spannt hier mehrere Auftraege — die Auftrags-Spalte etwas leiser. */
.akt-verlauf-auftrag { font-size: .9rem; }

/* AP6: Freigabe --------------------------------------------------------------- */
/* B2-Bestaetigungsseite (Empfaenger/Betreff/Volltext + Freigeben-Form) und das
   Aendern-Formular (Textarea). Kein Inline-Style (CSP style-src 'self'), kein JS. */

/* Der "Freigeben / Aendern"-Link am aktiven Entwurf im Thread. */
.entwurf-aktion { margin: .5rem 0 0; }
.entwurf-aktion a { font-weight: 600; }

/* Freigabe-/Aender-Formular: Karten-Optik wie der Rest, grosse Tap-Ziele. */
.freigabe-form {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  padding: .9rem; margin: 1rem 0; display: flex; flex-direction: column; gap: .5rem;
}
.freigabe-form label { color: var(--grau); font-size: .85rem; }
.freigabe-form textarea {
  font: inherit; width: 100%; min-height: 16rem; padding: .6rem; resize: vertical;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--weiss);
}
/* Aktionszeile: Haupt-Button + leiser Sekundaer-Link nebeneinander. */
.freigabe-aktion { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .25rem; }

/* Der Nachrichten-Volltext auf der Bestaetigungsseite: Zeilenumbrueche erhalten
   (eigene Klasse, damit das AP5-.volltext im Thread unveraendert bleibt). */
.freigabe-volltext {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  padding: .9rem; margin: .5rem 0 0; white-space: pre-wrap;
  overflow-wrap: anywhere;   /* lange URLs/Mailadressen sprengen die Karte sonst mobil */
}

/* Mail-Ansicht im Verlauf (10.07.) ------------------------------------------ */
/* Vorher: der Thread rendert den Mailtext in `<p class="volltext">` — eine Klasse, zu der es
   NIE eine CSS-Regel gab. HTML kollabiert damit jeden Zeilenumbruch zu einem Leerzeichen:
   Anrede, Absaetze und Signatur liefen zu einem Block zusammen. `.volltext` bleibt hier als
   Sicherheitsnetz stehen (falls irgendwo noch eine alte Stelle rendert); die Karten benutzen
   `.mail-body`. Umbrueche traegt bewusst CSS, nicht `|safe`+nl2br — das Template-Gate
   (scripts/dashboard_check.py) verbietet |safe/autoescape-false. */
.volltext, .mail-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

ul.mails { list-style: none; padding: 0; margin: 0; }
ul.mails li.mail {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  padding: .8rem .9rem; margin-bottom: .6rem;
  border-left: 4px solid var(--linie);   /* Richtungs-Streifen, Farbe unten */
}
/* Eingehend = vom Kunden (blau), ausgehend = an den Kunden (gruen wie der Akzent). */
li.mail-ein { border-left-color: #123c77; }
li.mail-aus { border-left-color: var(--akzent); }

.mail-zeile { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.mail-betreff { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mail-pfeil { font-weight: 600; }
li.mail-ein .mail-pfeil { color: #123c77; }
li.mail-aus .mail-pfeil { color: var(--akzent); }

.mail-status {
  font-size: .75rem; font-weight: 600; padding: .2rem .5rem; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.mail-status-wartet    { background: #fff3d6; color: #7a5200; }
.mail-status-versendet { background: #e2f0e6; color: var(--akzent); }

.mail-details summary { padding: .55rem 0; font-size: .9rem; }

/* Der eigentliche „Brief": Kopf (Von/An/Datum/Betreff) ueber einer Trennlinie, darunter der
   Rohtext mit erhaltenen Umbruechen — die Optik eines Mail-Clients, ohne HTML-Mails zu rendern
   (live: 0 von 106 Nachrichten enthalten HTML-Tags; alles ist reiner Text). */
.mail-brief {
  background: var(--hell); border: 1px solid var(--linie); border-radius: 8px;
  padding: .85rem; margin: .25rem 0 0;
}
dl.mail-header {
  display: grid; grid-template-columns: max-content 1fr; gap: .25rem .8rem;
  background: none; border: none; border-radius: 0; padding: 0;
  margin: 0 0 .7rem; padding-bottom: .7rem; border-bottom: 1px solid var(--linie);
  font-size: .85rem;
}
dl.mail-header dt { color: var(--grau); }
dl.mail-header dd { margin: 0; overflow-wrap: anywhere; }

.mail-body { font-size: .95rem; line-height: 1.6; max-width: 40rem; }

/* Der technische Marker der Workflows (`[Auto-Entwurf …]`) ist keine Nachricht — leise. */
.mail-systemnotiz { color: var(--grau); font-size: .8rem; margin: .5rem 0 0; }
.mail-leer { color: var(--grau); font-style: italic; font-size: .9rem; margin: .5rem 0 0; }

/* Der Antwort-Entwurf haengt an der eingehenden Mail: leicht eingerueckt, damit die
   Zuordnung „Antwort auf diese Mail" ohne Text erkennbar ist. */
.mail-antwort { margin-left: .75rem; border-left: 2px solid var(--linie); padding-left: .75rem; }

/* Schaetzungs-Hinweis (Werbung): ruhig, aber nicht zu uebersehen — die Haltequote ist
   ausdruecklich KEINE gemessene Zahl (stille Absagen bleiben unsichtbar). */
.schaetzung {
  background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--warn);
  border-radius: 8px; padding: .75rem .9rem; margin: .75rem 0 0;
  font-size: .9rem; line-height: 1.55; color: var(--text); max-width: 46rem;
}

/* Nur-Lese-Modus (DASHBOARD_READONLY=1): ruhiges Band, kein Alarm — es ist ja kein Fehler. */
.nur-lesen-band {
  background: #e5eefc; color: #123c77; border: 1px solid #c9dbf5; border-radius: 8px;
  padding: .6rem .8rem; margin: 0 0 1rem; font-size: .9rem; font-weight: 600;
}

/* ===========================================================================
   Werbung: Zeitraum-Steuerung, Kennzahlen, Verlaufs-Grafiken   (10.07., Stefan)
   ===========================================================================
   Nur diese Seite. Die gemeinsamen Bausteine (nav, table, .karten, .status) bleiben
   unangetastet, damit die uebrigen vier Seiten nicht neu abgenommen werden muessen.

   Alle Grafiken sind server-gerechnetes Inline-SVG: die CSP (`script-src 'none'`,
   `style-src 'self'`) verbietet sowohl eine Chart-Bibliothek als auch ein
   `style="height:42%"` am Balken. Geometrie steht deshalb in SVG-Attributen, die FARBE
   ausschliesslich hier. */

:root {
  /* Serienfarben der Quellen-Grafik. Gegen die Kartenflaeche (#fff) auf Farbfehlsichtigkeit
     geprueft: schlechtestes benachbartes Paar ΔE 73.6 (Deuteranopie), Ziel >= 12.
     Bewusst KEIN Gruen (Hausfarbe, traegt Gesamt-Saeulen + Umsatz) und kein Rot/Gelb
     (bedeuten hier ueberall Zustand — eine Serie darf keine Wertung tragen). */
  --serie-1: #2a78d6;   /* Website-Formular */
  --serie-2: #1baf7a;   /* Telefon          */
  --serie-3: #4a3aa7;   /* Freitext-Mail    */
  --serie-4: #eb6834;   /* Rückruf-Formular */
  --serie-rest: #8b8a85;  /* ohne Zuordnung — bewusst unbunt: kein Kanal, keine Identität */

  --umsatz-real: #1f5f3f;    /* bezahlt    (Hausfarbe) */
  --umsatz-offen: #6fae8d;   /* noch offen (dieselbe Farbe, hellere Stufe) */

  --achse: #c3c2b7;
  --muted: #6b6b6b;
}

/* --- Zeitraum-/Raster-Umschalter: EINE Zeile ueber allem, was sie steuert --- */
.steuerung {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
  padding: .8rem .9rem; margin: 0 0 1rem;
}
.schalter { display: flex; flex-direction: column; gap: .4rem; }
.schalter-titel {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grau);
  font-weight: 600;
}
.schalter-gruppe {
  display: inline-flex; background: var(--hell); border: 1px solid var(--linie);
  border-radius: 10px; padding: 3px; gap: 2px;
}
/* Links, keine Knoepfe: jeder Zustand hat eine eigene URL. Tap-Ziel bleibt gross. */
.schalter-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.5rem; padding: 0 .85rem; border-radius: 8px;
  font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--grau);
  white-space: nowrap;
}
.schalter-knopf:hover { color: var(--text); }
.schalter-knopf.an {
  background: var(--weiss); color: var(--akzent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* --- Kennzahlen-Kacheln ---------------------------------------------------- */
.kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .6rem; margin: 0 0 1.25rem;
}
.kachel {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
  padding: .85rem .9rem; display: flex; flex-direction: column; gap: .15rem;
}
.kachel-titel { font-size: .78rem; color: var(--grau); }
/* Grosse Zahl: proportionale Ziffern (tabular-nums liesse "121" bei dieser Groesse
   auseinanderfallen); tabellarisch bleibt es nur in den Tabellenspalten. */
.kachel-wert { font-size: 1.9rem; font-weight: 650; line-height: 1.15; color: var(--text); }
.kachel-wert.klein { font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.kachel-fuss { font-size: .78rem; color: var(--grau); }

/* --- Grafik-Karte ---------------------------------------------------------- */
.karte-chart {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
  padding: 1rem .9rem .85rem; margin: 0 0 1rem;
}
.karte-chart h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.karte-chart .fussnote { margin-top: .75rem; max-width: 42rem; }
.karte-chart .leer { display: block; padding: 1.25rem 0; max-width: 40rem; line-height: 1.55; }

/* Die Grafik skaliert wie ein Bild. max-width haelt sie auf dem Desktop in lesbarer
   Groesse, statt sie ueber die ganze Kartenbreite zu ziehen. */
.chart { display: block; width: 100%; max-width: 640px; height: auto; }

/* Gitter und Grundlinie: Haarlinien, durchgezogen (nie gestrichelt — das laese sich als
   Schwelle oder Prognose), eine Stufe von der Flaeche abgesetzt. */
.chart .gitter { stroke: var(--linie); stroke-width: 1; }
.chart .grundlinie { stroke: var(--achse); stroke-width: 1; }

/* Beschriftung traegt NIE die Serienfarbe — Identitaet kommt vom farbigen Tupfen daneben. */
.chart .tick { fill: var(--muted); font-size: 13px; text-anchor: end; }
.chart .tick-x { fill: var(--muted); font-size: 13px; text-anchor: middle; }
.chart .wert { fill: var(--text); font-size: 14px; font-weight: 600; text-anchor: middle; }

/* Saeulen. Kein stroke: getrennt wird durch den Flaechen-Spalt, den charts.py rechnet —
   ein Rahmen waere Tinte ohne Daten. */
.chart .saeule { fill: var(--serie-rest); }
.chart .saeule.anfragen { fill: var(--akzent); }
.chart .saeule.serie-1 { fill: var(--serie-1); }
.chart .saeule.serie-2 { fill: var(--serie-2); }
.chart .saeule.serie-3 { fill: var(--serie-3); }
.chart .saeule.serie-4 { fill: var(--serie-4); }
.chart .saeule.serie-rest { fill: var(--serie-rest); }
.chart .saeule.umsatz-real { fill: var(--umsatz-real); }
.chart .saeule.umsatz-offen { fill: var(--umsatz-offen); }

/* Die laufende Periode ist noch nicht zu Ende. Blasser statt gestrichelt: sie ist ein
   echter, nur unfertiger Wert — keine Schaetzung und keine Prognose.
   .55 statt .42: solange NUR die laufende Periode Daten hat (Juli 2026), ist sie die einzige
   Saeule im Bild — bei .42 wirkte die ganze Grafik ausgegraut (am Rendering gesehen). */
.chart .saeule.laufend, .chart .laufend .saeule { fill-opacity: .55; }

/* --- Legende (fuer >= 2 Serien immer da; Farbe allein traegt nie die Identitaet) --- */
.legende {
  list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  padding: 0; margin: 0 0 .75rem;
}
.legende li {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--grau);
}
.legende b { color: var(--text); font-variant-numeric: tabular-nums; }
.tupfen { width: .7rem; height: .7rem; border-radius: 3px; flex-shrink: 0; }
.tupfen.serie-1 { background: var(--serie-1); }
.tupfen.serie-2 { background: var(--serie-2); }
.tupfen.serie-3 { background: var(--serie-3); }
.tupfen.serie-4 { background: var(--serie-4); }
.tupfen.serie-rest { background: var(--serie-rest); }
.tupfen.umsatz-real { background: var(--umsatz-real); }
.tupfen.umsatz-offen { background: var(--umsatz-offen); }

/* Ehrlichkeits-Hinweis („erst ein Monat Daten"). Ruhig, kein Alarm — nichts ist kaputt. */
.hinweis-karte {
  background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--akzent);
  border-radius: 8px; padding: .75rem .9rem; margin: 0 0 1rem;
  font-size: .9rem; line-height: 1.55; max-width: 46rem;
}

/* --- Quali-Dashboard (AP2/AP3) ---------------------------------------------------
   Verlauf: uebernommen = Hausfarbe (gut), korrigiert = unbuntes Grau (der "Rest").
   Bewusst KEINE Statusfarbe (rot/gelb) fuer "korrigiert": eine Korrektur ist kein Fehler,
   nur Arbeit — die Wertung traegt allein die Ampel an der grossen Leitzahl. */
.chart .saeule.quali-ok   { fill: var(--akzent); }
.chart .saeule.quali-korr { fill: var(--serie-rest); }
.tupfen.quali-ok   { background: var(--akzent); }
.tupfen.quali-korr { background: var(--serie-rest); }

/* Vorher/Nachher-Paar der staerksten Korrekturen (grob, §8). Auf schmalen Displays
   untereinander, ab ~40rem nebeneinander. Reiner Text (autoescaped), kein Markup. */
.korrektur {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px;
  padding: .75rem .9rem; margin: 0 0 .75rem; max-width: 52rem;
}
.korrektur-kopf { margin: 0 0 .5rem; font-weight: 600; }
.korrektur-kopf small { font-weight: 400; color: var(--grau); margin-left: .4rem; }
.korrektur-paar { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 40rem) { .korrektur-paar { grid-template-columns: 1fr 1fr; } }
.korrektur-paar .vorher, .korrektur-paar .nachher {
  border-radius: 6px; padding: .5rem .6rem; font-size: .9rem; line-height: 1.5;
  overflow-wrap: anywhere;
}
.korrektur-paar .vorher  { background: var(--hell); }
.korrektur-paar .nachher { background: #e2f0e6; }
.korrektur-paar .etikett {
  display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--grau); margin-bottom: .25rem;
}