/* Gemeinsame Grundlagen: Farben, Diagramme, Dachplan.
   Der Kundenbildschirm ist bewusst immer hell (er läuft auf einem Monitor im
   Wohnzimmer), das Cockpit bewusst immer dunkel (es soll dem Kunden nicht ins
   Auge fallen). Beide malen ihren Hintergrund selbst. */

/* ⚠ **Die Schriften kommen aus dem Projekt, nicht von Google.** Bis zum
   09.09.2026 stand hier ein `@import` auf `fonts.googleapis.com`. Ohne Netz
   griff die Fallback-Kette, und die Präsentation verlor die CI — mitten im
   Termin, der regelmäßig ohne Empfang stattfindet. Nebenbei lud jeder Aufruf
   die IP des Betrachters zu einem Dritten, im Termin also die des Kunden.
   Ein `@import` und kein `<link>` in fünf Seiten: eine Stelle statt fünf.
   → css/schriften.css, docs/IDEEN.md A3a */
@import url('schriften.css');

:root {
  /* Die Leitfarben des Betriebs — hier stehen nur die VORGABEWERTE.
     Gesetzt werden sie aus `mandant.json`, Feld `ci`, über das Stylesheet
     `/api/marke.css`, das jede Seite nach dieser Datei lädt (→ js/marke.js).
     Wer hier etwas ändert, ändert es für jeden Betrieb, der das Feld nicht
     füllt. Seit dem 09.10.2026 ist die Leitfarbe das Kupfer der Handschlag-
     Marke (`#C9772B`); `--ember-tief` ist dasselbe Kupfer abgedunkelt, damit
     Text auf hellem Grund 4,5 : 1 erreicht (`#A05A1C`: 5,3 auf Weiß). Das
     Orange von Sonne & Wärme steht in dessen eigener `ci`, nicht hier.

     Die Namen sind historisch. Gemeint ist: `--ember` die Leitfarbe,
     `--ember-tief` ihre dunklere Fassung für Text auf hellem Grund,
     `--solaris` ein hellerer Akzent, `--aurora` ein sehr heller Grund.

     ⚠ Eine Ableitung dieser Farben gehört nie als fester Wert ins Blatt.
     `rgba(255,112,0,.28)` war genau das: eine Kopie des Orange, die beim
     ersten fremden Betrieb stehenblieb. Solche Töne entstehen mit
     `color-mix(in srgb, var(--ember) 28%, transparent)`. */
  --ember: #c9772b;
  --ember-tief: #a05a1c;
  --solaris: #e0a566;
  --aurora: #ffeba2;

  /* Kundenbildschirm */
  --k-grund: #f6f5f3;
  --k-karte: #ffffff;
  --k-karte-2: #eeecea;
  --k-tinte: #16181c;
  --k-tinte-2: #4d545d;
  --k-tinte-3: #7c848e;
  --k-linie: #dedbd7;
  --k-linie-zart: #ebe9e6;

  /* Status quo — das Grau der Gegenwart */
  --status: #6f7a89;
  --status-hell: #a8b0ba;
  /* Gas: eigener, entsaettigter Sandton. Zwei Grautoene waeren aus drei Metern
     nicht zu unterscheiden (gepruefte Farbabstaende), und das Ember bleibt
     der Loesung vorbehalten. */
  --gas: #c2a17d;
  --gas-tief: #8a6a44;

  --schrift-anzeige: Poppins, 'Segoe UI', system-ui, sans-serif;
  --schrift-text: Inter, 'Segoe UI', system-ui, sans-serif;

  /* Cockpit */
  --c-grund: #0e1218;
  --c-flaeche: #161c24;
  --c-flaeche-2: #1e2630;
  --c-linie: #2a323d;
  --c-linie-hell: #3a4553;
  --c-tinte: #e8ecf2;
  --c-tinte-2: #98a3b2;
  --c-tinte-3: #6b7683;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--schrift-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--schrift-anzeige); margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 3px; }

/* ------------------------------------------------------------ Offline-Leiste

   ⚠ **Sie sagt nicht „Fehler".** Kein Netz ist im Beratungstermin der geplante
   Zustand: er findet regelmäßig in Neubaugebieten ohne Empfang statt, und die
   Anwendung ist dafür gebaut. Wer dort etwas Rotes sieht, glaubt, es sei kaputt.
   Der Ton ist darum sachlich — Sandton für „kein Netz", Leitfarbe für „neue
   Fassung liegt bereit". → js/offline.js */
.offline-leiste {
  position: fixed; inset: auto 0 0 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 7px 16px; font-family: var(--schrift-text); font-size: 12.5px;
  border-top: 1px solid rgba(0,0,0,.18);
}
.offline-leiste.ohne-netz { background: var(--gas); color: #241a0c; }
.offline-leiste.neue-fassung { background: var(--ember); color: #fff; }
/* Nur eine Auskunft, kein Zustand: etwa „1 Änderung wartet" bei vorhandenem
   Netz. Zurückhaltend, damit sie im Termin nicht wie eine Warnung wirkt. */
.offline-leiste.hinweis { background: var(--c-flaeche-2); color: var(--c-tinte-2); }
.offline-leiste button {
  appearance: none; cursor: pointer; border-radius: 6px; padding: 3px 11px;
  font-size: 12px; font-family: inherit;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.2); color: #16181c;
}
.offline-leiste button:hover { background: #fff; }

.tabellenziffern { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Diagramme */

.diagramm { width: 100%; height: auto; display: block; overflow: visible; }

.raster { stroke: var(--k-linie-zart); stroke-width: 1; }
.raster-basis { stroke: var(--k-linie); stroke-width: 1.5; }

.achse-y, .achse-x {
  font-family: var(--schrift-text); font-size: 12px; fill: var(--k-tinte-3);
  font-variant-numeric: tabular-nums;
}
.achse-y { text-anchor: end; }
.achse-x { text-anchor: middle; }
.achse-x.klein { font-size: 11px; }

.diagramm-titel {
  font-family: var(--schrift-anzeige); font-size: 12px; font-weight: 600;
  fill: var(--k-tinte-2); letter-spacing: .02em;
}

.linie-status { fill: none; stroke: var(--status); stroke-width: 3; stroke-linecap: round; }
.linie-gas { fill: none; stroke: var(--gas); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 7 5; }
.flaeche-gas { fill: var(--gas); opacity: .13; }
.punkt-gas { fill: var(--gas); stroke: var(--k-karte); stroke-width: 2; }
.linie-loesung { fill: none; stroke: var(--ember); stroke-width: 3; stroke-linecap: round; }
.flaeche-status { fill: var(--status); opacity: .1; }
.flaeche-vorteil { fill: var(--aurora); opacity: .55; }
.punkt-status { fill: var(--status); stroke: var(--k-karte); stroke-width: 2; }
.punkt-loesung { fill: var(--ember); stroke: var(--k-karte); stroke-width: 2; }

.endlabel {
  font-family: var(--schrift-anzeige); font-size: 19px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.endlabel.status { fill: var(--status); }
.endlabel.loesung { fill: var(--ember-tief); }
/* Wert in Tinte, Identitaet traegt der farbige Endpunkt daneben. */
.endlabel.neutral { fill: var(--k-tinte); }
.endlabel-klein { font-family: var(--schrift-text); font-size: 11.5px; fill: var(--k-tinte-3); }

.marke-linie { stroke: var(--k-tinte-3); stroke-width: 1.5; stroke-dasharray: 4 5; }
.fuehrung.status { color: var(--status); }
.fuehrung.loesung { color: var(--ember); }
.marke-text {
  font-family: var(--schrift-text); font-size: 12px; font-weight: 600;
  fill: var(--k-tinte-2); text-anchor: middle;
}

.flaeche-erzeugung { fill: var(--solaris); opacity: .22; }
.linie-erzeugung { fill: none; stroke: var(--solaris); stroke-width: 2.5; stroke-linecap: round; }
.linie-verbrauch { fill: none; stroke: var(--k-tinte); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 4; }
.saeule-speicher { fill: var(--ember); opacity: .55; }

/* Monatsvergleich als Balkenpaar */
.vergleich-zeile { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.vergleich-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.vergleich-titel { font-family: var(--schrift-anzeige); font-size: 17px; font-weight: 600; color: var(--k-tinte); }
.vergleich-summe {
  font-family: var(--schrift-anzeige); font-size: clamp(26px, 3.4vw, 40px); font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.vergleich-summe.status { color: var(--status); }
.vergleich-summe.loesung { color: var(--ember-tief); }
.vergleich-summe .proMonat { font-size: 15px; font-weight: 500; color: var(--k-tinte-3); margin-left: 4px; }
.vergleich-balken {
  height: 26px; border-radius: 4px; background: var(--k-karte-2); overflow: hidden;
  position: relative;
}
/* Die Null. Links davon Gutschriften, rechts Kosten.
   Sie muss **deutlich** sein: eine haarfeine Linie zwischen zwei anliegenden
   Bloecken sieht niemand, und dann liest sich der graue Balken, der nicht am
   linken Rand beginnt, als haette er dort noch einen hellen Teil. Deshalb
   2 px, Tinte, obenauf — und die Fuellungen halten beidseitig Abstand. */
.vergleich-null {
  position: absolute; top: -1px; bottom: -1px; width: 2px; z-index: 2;
  background: var(--k-tinte); border-radius: 1px;
}
.vergleich-fuellung {
  display: flex; gap: 2px; height: 100%; position: absolute; top: 0; overflow: hidden;
  transition: width .5s cubic-bezier(.22,.61,.36,1), left .5s cubic-bezier(.22,.61,.36,1);
}
/* Gerundet wird am Aussenrand, nicht an der Null: dort stossen Kosten und
   Gutschrift aneinander, und eine Rundung liesse den Balken dort enden. */
.vergleich-fuellung.kosten { border-radius: 0 4px 4px 0; margin-left: 3px; }
.vergleich-fuellung.gutschrift { border-radius: 4px 0 0 4px; margin-right: 3px; }
/* Eine Gutschrift ist keine Kosten — sie liegt nicht nur auf der anderen Seite
   der Null, sie ist auch flacher. Sonst liest das Auge beide Seiten als einen
   durchgehenden Balken und haelt die untere Zeile fuer die laengere. */
.vergleich-fuellung.gutschrift { height: 14px; top: 6px; }
.vergleich-segment { height: 100%; min-width: 3px; }
.vergleich-fuellung .vergleich-segment:first-child,
.vergleich-fuellung .vergleich-segment:last-child { border-radius: 0; }
.vergleich-segment.p-status { background: var(--status); }
.vergleich-segment.p-status-hell { background: var(--status-hell); }
.p-waerme { background: var(--gas); }
.vergleich-segment.p-waerme { background: var(--gas); }
.vergleich-segment.p-loesung { background: var(--ember); }
.vergleich-segment.p-loesung-hell { background: var(--solaris); }
.vergleich-segment.p-betrieb { background: var(--ember-tief); }
/* Gestreift, weil es keine Kosten sind: was hier liegt, kommt herein.
   Die Toene sind die aufgehellte Leitfarbe — als feste Werte (#ffd7ab, #ffb974)
   waren sie eine Kopie des Orange und blieben beim ersten fremden Betrieb
   stehen. Die Mischung trifft sie auf wenige Stufen genau. */
.vergleich-segment.p-gutschrift {
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--ember) 30%, #fff) 0 6px,
    color-mix(in srgb, var(--ember) 52%, #fff) 6px 12px);
}
.vergleich-teile { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; color: var(--k-tinte-2); }
.vergleich-teile span { display: inline-flex; align-items: center; gap: 7px; }
.punkt { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.p-status { background: var(--status); }
.p-status-hell { background: var(--status-hell); }
.p-waerme { background: var(--gas); }
.p-loesung { background: var(--ember); }
.p-loesung-hell { background: var(--solaris); }
.p-betrieb { background: var(--ember-tief); }
.p-gutschrift { background: color-mix(in srgb, var(--ember) 52%, #fff); }
.vergleich-fuss {
  border-top: 1px solid var(--k-linie); padding-top: 16px; font-size: 17px; color: var(--k-tinte-2);
}
.vergleich-fuss strong { color: var(--ember-tief); font-weight: 600; }
.vergleich-hinweis { margin-top: 8px; font-size: 14px; color: var(--k-tinte-3); }

/* ---------------------------------------------------------------- Dachplan */

.dachplan { width: 100%; height: auto; display: block; }

.dach-modul { transition: fill .18s, opacity .18s; }
.dach-modul.klickbar { cursor: pointer; }
.dach-modul.klickbar:hover { stroke: var(--ember); stroke-width: 2.5; }
.dach-modul.frei { opacity: .85; }
.dach-modul.jetzt-schatten { opacity: .45; }
.dach-modul.verschattet.belegt { stroke: var(--solaris); stroke-width: 2; }

.dach-flaechenname {
  font-family: var(--schrift-text); font-size: 15px; font-weight: 600;
  fill: rgba(255,255,255,.9); letter-spacing: .02em;
}
.dach-verlust {
  font-family: var(--schrift-text); font-size: 11px; font-weight: 600;
  fill: var(--solaris); text-anchor: end;
}
.dach-baum-text {
  font-family: var(--schrift-text); font-size: 12px; fill: var(--k-tinte-3); text-anchor: middle;
}
.dach-sonne-text {
  font-family: var(--schrift-text); font-size: 12px; font-weight: 600;
  fill: var(--solaris); text-anchor: middle;
}
.dach-kompass-text {
  font-family: var(--schrift-anzeige); font-size: 13px; font-weight: 600;
  fill: #fff; text-anchor: middle;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Aussparung: der Schornstein oder das Dachfenster, das aus der Fläche
   gestanzt ist. Sichtbar umrissen, damit das Loch nicht wie ein Zeichenfehler
   wirkt. */
.dach-aussparung {
  fill: #4a443e;
  stroke: #2e2a26;
  stroke-width: 1.5;
}

/* Die Anmeldung — ein Overlay IM Fenster, keine eigene Seite.

   ⚠ Eine Anmeldeseite statt des Cockpits landete im Zwischenspeicher des
   Dienstarbeiters, und die App startete im Funkloch in eine Maske, die ohne
   Netz niemand bedienen kann. → CLAUDE.md, Falle 22 */
.a-anmeldung {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: rgba(8, 11, 16, .82);
  backdrop-filter: blur(3px);
}
.a-anmeldung-feld {
  width: min(24rem, calc(100vw - 3rem));
  display: grid; gap: .85rem;
  padding: 1.6rem;
  border-radius: 14px;
  background: var(--c-flaeche-1, #171c24);
  color: var(--c-tinte-1, #e8ecf2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
/* Die Wortmarke traegt ihre Farben selbst (Nachtblau/Warmweiss, Kupfer) und
   nimmt nie die Betriebsfarbe. → docs/ARCHITEKTUR.md §12 */
.a-anmeldung-marke { display: block; width: 200px; max-width: 100%; margin: 0 0 18px; }
.a-anmeldung-feld h2 {
  margin: 0; font-family: var(--schrift-anzeige); font-size: 1.15rem;
}
.a-anmeldung-grund { margin: 0; color: var(--c-tinte-2, #98a3b2); font-size: .9rem; }
.a-anmeldung-feld label {
  display: grid; gap: .3rem; font-size: .82rem; color: var(--c-tinte-2, #98a3b2);
}
.a-anmeldung-feld input {
  padding: .6rem .7rem; border-radius: 8px;
  border: 1px solid var(--c-linie, #2b3340);
  background: var(--c-flaeche-2, #0e1218);
  color: var(--c-tinte-1, #e8ecf2); font-size: 1rem;
}
.a-anmeldung-feld input:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 1px;
}
.a-anmeldung-fehler {
  margin: 0; font-size: .85rem;
  color: color-mix(in srgb, var(--gas, #e0a33e) 85%, #fff);
}
.a-anmeldung-feld button {
  padding: .6rem 1rem; border: 0; border-radius: 8px;
  background: var(--ember); color: #fff;
  font-size: .95rem; font-weight: 600; cursor: pointer;
}
.a-anmeldung-feld button:disabled { opacity: .6; cursor: default; }