/* Verkäufer-Cockpit — bewusst dunkel, damit es dem Kunden nicht ins Auge
   fällt, und bewusst dicht, weil hier gearbeitet wird. */

body.cockpit {
  background: var(--c-grund);
  color: var(--c-tinte);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 14.5px;
}

/* Bildlaufleisten im Ton der Oberfläche. Die Vorgabe des Browsers ist hell und
   breit und stände als weißer Balken im dunklen Cockpit. `scrollbar-color` gilt
   in Firefox und Chrome ab 121, die `::-webkit-`-Regeln fangen ältere
   Chromium-Fassungen ab. Alle Farben kommen aus den Variablen, nie als Kopie. */
body.cockpit * { scrollbar-width: thin; scrollbar-color: var(--c-linie-hell) transparent; }
@supports not (scrollbar-color: auto) {
  body.cockpit ::-webkit-scrollbar { width: 10px; height: 10px; }
  body.cockpit ::-webkit-scrollbar-track { background: transparent; }
  body.cockpit ::-webkit-scrollbar-thumb {
    background: var(--c-linie-hell); border-radius: 6px;
    border: 2px solid transparent; background-clip: content-box;
  }
  body.cockpit ::-webkit-scrollbar-thumb:hover { background: var(--c-tinte-3); background-clip: content-box; }
  body.cockpit ::-webkit-scrollbar-corner { background: transparent; }
}

/* ------------------------------------------------------------------ Kopf */

.c-kopf {
  flex: none; display: flex; align-items: center; gap: 20px;
  padding: 11px 18px; background: var(--c-flaeche); border-bottom: 1px solid var(--c-linie);
}
/* Signatur von Handschlag: einfarbig in Tintenfarbe, kein Bedienelement. */
.marke-signatur { flex: none; opacity: .65; margin-left: 4px; color: var(--c-tinte-2); }
.c-kunde { display: flex; flex-direction: column; min-width: 0; }
.c-kunde b { font-family: var(--schrift-anzeige); font-size: 15px; font-weight: 600; }
.c-kunde span { font-size: 12px; color: var(--c-tinte-3); }

.c-akte { display: flex; gap: 4px; margin-left: auto; }
.c-akt {
  appearance: none; border: 1px solid var(--c-linie); background: var(--c-flaeche-2);
  color: var(--c-tinte-2); border-radius: 8px; padding: 7px 13px; cursor: pointer;
  font-family: var(--schrift-anzeige); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.c-akt .nr { font-size: 11px; color: var(--c-tinte-3); font-variant-numeric: tabular-nums; }
.c-akt:hover { border-color: var(--c-linie-hell); color: var(--c-tinte); }
.c-akt.aktiv { background: var(--ember); border-color: var(--ember); color: #fff; }
.c-akt.aktiv .nr { color: rgba(255,255,255,.75); }

.c-knopf {
  appearance: none; border: 1px solid var(--c-linie-hell); background: transparent;
  color: var(--c-tinte); border-radius: 8px; padding: 8px 14px; cursor: pointer;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
/* `display: inline-flex` einer Klassenregel schlägt die Browserregel für
   `[hidden]`. Ohne diese Zeile stand „Auswahl aufheben" in der Aufnahme auch
   ohne gewählten Gebäudeteil da — und wirft angetippt den Entwurf weg.
   Derselbe Fehler wie beim Luftbild, siehe aufnahme.css. */
.c-knopf[hidden] { display: none; }
/* ⚠ **Ein gesperrter Knopf muss gesperrt aussehen — und die Regel steht hier,
   weil `.c-knopf` hier steht.** Sie lag einmal nur in `aufnahme.css`; als
   `projekt.html` dieselbe Klasse benutzte, ohne jene Datei zu laden, sah „Bild
   einlegen …" seit dem ersten Tag bedienbar aus, war `disabled` und tat beim
   Klick nichts. Kein Fehler, keine Meldung, ein toter Klick — der
   unfreundlichste Zustand, den ein Bedienelement haben kann, und er wiederholt
   sich bei jeder neuen Seite, solange die Regel woanders wohnt. */
.c-knopf[disabled] { opacity: .45; cursor: not-allowed; }
.c-knopf[disabled]:hover { background: transparent; border-color: var(--c-linie-hell); }
.c-knopf.wichtig[disabled]:hover { background: var(--ember); }
.c-knopf:hover { background: var(--c-flaeche-2); border-color: #4d5866; }
.c-knopf.wichtig { background: var(--ember); border-color: var(--ember); color: #fff; }
.c-knopf.wichtig:hover { background: color-mix(in srgb, var(--ember) 86%, #fff); }
.c-knopf.klein { padding: 6px 11px; font-size: 12.5px; }
/* ⚠ **Ein gewählter Knopf muss gewählt aussehen — und die Regel steht hier, aus
   demselben Grund wie die für `[disabled]` darüber.** Die Flächenwahl der
   freien Belegung ist eine Knopfreihe, kein `.c-segment`; ohne diese Zeile
   sähen alle Flächen gleich aus, und die vier Regler darunter gehörten
   sichtbar zu keiner. Die Farbe kommt aus der Marke, nie als Kopie — sonst
   steht sie beim nächsten Betrieb orange in einer blauen Oberfläche. */
.c-knopf[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); color: #fff; }
.c-knopf[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--ember) 86%, #fff); }

/* Beiläufiger Satz unter einem Bedienelement — erklärt, was man sieht, ohne
   selbst bedienbar auszusehen. */
.c-hinweis { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-tinte-3); }
/* Ein Verweis in einem Hinweis. Das Browserblau ist auf dem dunklen Grund
   kaum zu lesen. */
.c-hinweis a { color: var(--ember); text-decoration: none; }
.c-hinweis a:hover { text-decoration: underline; }

/* Die Prognosen in Akt 7: Nummer, Datum, Festpreis der Festschreibung, PDF.
   Eine offline erstellte, die noch nicht drueben ist, steht gedaempft da. */
.c-prognosen td:first-child { width: 56px; font-weight: 500; }
.c-prognosen td:nth-child(2) { color: var(--c-tinte-3); }
.c-prognosen td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; padding-right: 18px; }
.c-prognosen a { color: var(--ember); text-decoration: none; }
.c-prognosen a:hover { text-decoration: underline; }
.c-prognosen tr.wartet td:first-child,
.c-prognosen tr.wartet td:nth-child(3) { color: var(--c-tinte-3); }

/* ------------------------------------------------------------------ Raster */

.c-raster {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: 1px; background: var(--c-linie); min-height: 0;
}
.c-steuerung { background: var(--c-grund); overflow: auto; padding: 20px 22px; }
.c-seite { background: var(--c-flaeche); overflow: auto; display: flex; flex-direction: column; }

/* ------------------------------------------------------------- Steuerung */

.c-titel {
  font-family: var(--schrift-anzeige); font-size: 19px; font-weight: 600;
  letter-spacing: -.015em; margin-bottom: 4px;
}
.c-untertitel { color: var(--c-tinte-2); font-size: 13.5px; margin-bottom: 20px; max-width: 70ch; }

.c-gruppe { margin-bottom: 22px; }
.c-marke {
  font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--c-tinte-3); margin-bottom: 9px; display: flex; justify-content: space-between; gap: 10px;
}
.c-marke .wert { color: var(--ember); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-size: 12.5px; }

.c-segment { display: flex; gap: 4px; background: var(--c-flaeche-2); padding: 4px; border-radius: 10px; }
.c-segment button {
  flex: 1; appearance: none; border: 0; background: transparent; color: var(--c-tinte-2);
  border-radius: 7px; padding: 10px 8px; cursor: pointer; font-size: 13px; font-weight: 500;
  display: flex; flex-direction: column; gap: 2px; align-items: center; line-height: 1.3;
}
.c-segment button small { font-size: 11px; color: var(--c-tinte-3); font-weight: 400; }
.c-segment button[aria-pressed="true"] { background: var(--ember); color: #fff; }
.c-segment button[aria-pressed="true"] small { color: rgba(255,255,255,.82); }
.c-segment button:hover:not([aria-pressed="true"]) { background: var(--c-linie); color: var(--c-tinte); }

.c-schalter {
  display: flex; align-items: center; gap: 13px; width: 100%; appearance: none; cursor: pointer;
  background: var(--c-flaeche-2); border: 1px solid var(--c-linie); border-radius: 10px;
  padding: 13px 15px; margin-bottom: 8px; text-align: left; color: var(--c-tinte);
  transition: border-color .15s, background .15s;
}
.c-schalter:hover { border-color: var(--c-linie-hell); }
.c-schalter[aria-pressed="true"] { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 12%, transparent); }
.c-punkt { width: 36px; height: 21px; border-radius: 11px; background: #39424f; flex: none; position: relative; transition: background .18s; }
.c-punkt::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: #8f9aa8; transition: transform .18s, background .18s;
}
.c-schalter[aria-pressed="true"] .c-punkt { background: var(--ember); }
.c-schalter[aria-pressed="true"] .c-punkt::after { transform: translateX(15px); background: #fff; }
.c-schalter .beschriftung { flex: 1; }
.c-schalter .beschriftung b { display: block; font-weight: 500; }
.c-schalter .beschriftung small { color: var(--c-tinte-3); font-size: 12px; }

.c-regler { width: 100%; accent-color: var(--ember); height: 26px; }
.c-regler-zeile { display: flex; align-items: center; gap: 14px; }
.c-regler-zeile .anzeige {
  font-family: var(--schrift-anzeige); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right;
  white-space: nowrap; flex: none;
}
.c-regler-zeile .c-regler { flex: 1; min-width: 0; }

/* Zahlenfelder — fuer das, was von der Jahresrechnung abgelesen wird.
   Die uebrigen Akte kommen ohne Tastatur aus; hier liest der Kunde seine
   eigenen Zahlen vor, und ein Regler traefe 36,24 ct nicht. */
.c-felder { display: flex; gap: 8px; align-items: flex-end; }
.c-felder + .c-felder { margin-top: 9px; }
.c-feld { flex: 1; min-width: 0; display: block; }
.c-feld > span {
  display: block; font-size: 11.5px; color: var(--c-tinte-3); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-feld input {
  width: 100%; box-sizing: border-box;
  background: var(--c-flaeche-2); border: 1px solid var(--c-linie); border-radius: 9px;
  padding: 10px 12px; color: var(--c-tinte);
  font-family: var(--schrift-anzeige); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.c-feld input:focus { outline: none; border-color: var(--ember); }
/* Die Pfeilchen sind im dunklen Cockpit hell und laut, und gebraucht werden sie
   nicht: im Termin wird die Zahl der Rechnung getippt, nicht erklickt. */
.c-feld input::-webkit-outer-spin-button,
.c-feld input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.c-feld input[type="number"] { -moz-appearance: textfield; }

.c-jahr-regler { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px 49px; }
.c-jahr-regler input { flex: 1; accent-color: var(--solaris); }
.c-jahr-regler .jahr {
  font-family: var(--schrift-anzeige); font-size: 13px; font-weight: 600; color: var(--solaris);
  font-variant-numeric: tabular-nums; min-width: 4ch;
}

.c-dach {
  background: linear-gradient(170deg, #2a323d 0%, #1b222c 100%); border-radius: 12px; padding: 6px;
  border: 1px solid var(--c-linie);
  /* Begrenzt, damit Sonnenstandsregler und Schnellaktionen sichtbar bleiben —
     der Verkaeufer darf im Gespraech nicht scrollen muessen. */
  max-width: min(100%, 720px);
}
.c-knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.c-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.c-tabelle td { padding: 7px 0; border-bottom: 1px solid var(--c-linie); }
.c-tabelle td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.c-tabelle tr:last-child td { border-bottom: 0; }

.c-warnung {
  background: color-mix(in srgb, var(--solaris) 12%, transparent); border: 1px solid color-mix(in srgb, var(--solaris) 40%, transparent); border-radius: 9px;
  padding: 11px 14px; font-size: 13px; color: var(--solaris); margin-top: 10px;
}
/* Ein Hinweiskasten zwischen zwei Gruppen haelt nach unten denselben Abstand
   wie eine Gruppe — sonst klebt die naechste Ueberschrift an ihm. */
.c-warnung + .c-gruppe { margin-top: 22px; }

/* ------------------------------------------------------------- Seitenleiste */

.c-block { padding: 17px 18px; border-bottom: 1px solid var(--c-linie); }
.c-block:last-child { border-bottom: 0; }

.c-souffleur ul { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 8px; }
.c-souffleur li { font-size: 13.5px; line-height: 1.5; color: var(--c-tinte); }
.c-souffleur li::marker { color: var(--ember); }

.c-einwand { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--c-linie); }
.c-einwand-frage {
  font-family: var(--schrift-anzeige); font-size: 13.5px; font-weight: 600; color: var(--solaris);
  margin-bottom: 5px;
}
.c-einwand-antwort { font-size: 13px; line-height: 1.55; color: var(--c-tinte-2); }
.c-einwand + .c-einwand { margin-top: 12px; }

.c-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-linie); }
.c-zahl { background: var(--c-flaeche); padding: 12px 14px; }
.c-zahl .k { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-tinte-3); }
.c-zahl .v {
  font-family: var(--schrift-anzeige); font-size: 21px; font-weight: 600; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.c-zahl .v.ember { color: var(--ember); }

.c-status {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--c-tinte-2);
  padding: 10px 18px; border-top: 1px solid var(--c-linie); margin-top: auto;
}
.c-lampe { width: 9px; height: 9px; border-radius: 50%; background: #4a5563; flex: none; }
.c-lampe.an { background: #3fbf7f; box-shadow: 0 0 0 3px rgba(63,191,127,.18); }

/* Bleibt stehen, bis das Speichern wieder geht — siehe index.html. */
.c-speicherfehler {
  margin: 0; padding: 10px 18px; font-size: 12.5px; line-height: 1.45;
  background: color-mix(in srgb, var(--ember) 10%, transparent); border-top: 1px solid color-mix(in srgb, var(--ember) 35%, transparent);
  color: var(--ember);
}

.c-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--c-tinte-3); margin-top: 10px; }
.c-legende span { display: inline-flex; align-items: center; gap: 7px; }
.c-legende i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }

/* Modulvergleich in Akt 3.
   Vier Spalten statt der zwei, die `.c-tabelle` vorsieht — die mittleren
   tragen Zahlen und richten sich rechts aus, damit Stueckzahl und kWp
   untereinander lesbar bleiben. */
.c-vergleich td:nth-child(2),
.c-vergleich td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.c-vergleich td small { color: var(--c-tinte-3); font-size: 11.5px; }
.c-vergleich tr.jetzt td { color: var(--ember); }
.c-vergleich tr.aus td { color: var(--c-tinte-3); }

/* Spickzettel in Akt 4: dieselben Zeilen wie die Karten auf dem
   Kundenbildschirm, je Moeglichkeit eine Spalte. Die gewaehlte traegt die
   Leitfarbe wie ihr Knopf darueber. */
.c-merkmale { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.c-merkmale th, .c-merkmale td {
  padding: 6px 8px; border-bottom: 1px solid var(--c-linie); text-align: left; vertical-align: top;
}
.c-merkmale th:first-child, .c-merkmale td:first-child { padding-left: 0; width: 30%; color: var(--c-tinte-3); }
.c-merkmale th { font-family: var(--schrift-anzeige); font-weight: 600; font-size: 13px; }
.c-merkmale th small { display: block; font-family: var(--schrift-text); font-weight: 400; font-size: 11.5px; color: var(--c-tinte-3); }
.c-merkmale td { font-variant-numeric: tabular-nums; color: var(--c-tinte); }
.c-merkmale .jetzt, .c-merkmale td.jetzt { color: var(--ember); }
.c-merkmale tr:last-child td { border-bottom: 0; }
.c-merkmale .leer { color: var(--c-tinte-3); }

/* Sieben Gespraechsschritte bleiben auch auf dem Notebook erreichbar. */
@media (max-width: 1700px) {
  .c-kopf-gespraech { flex-wrap: wrap; gap: 10px 14px; }
  .c-kopf-gespraech .c-kunde { margin-right: auto; }
  .c-kopf-gespraech .c-akte {
    order: 1; flex-basis: 100%; margin-left: 0; overflow-x: auto;
    padding-bottom: 2px;
  }
}
.c-block[hidden] { display: none; }
.c-steuerung > .c-souffleur {
  margin-top: 30px; padding: 24px; max-width: 76ch;
  background: var(--c-flaeche); border: 1px solid var(--c-linie); border-radius: 12px;
}
.c-steuerung > .c-souffleur li { font-size: 16px; line-height: 1.7; }

.c-verbraucher-auswahl { display: grid; gap: 8px; margin-bottom: 20px; color: var(--c-tinte-2); }
.c-verbraucher-auswahl select { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--c-linie); background: var(--c-flaeche); color: var(--c-tinte); font: inherit; }
.c-verbraucher-auswahl select:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* Fuer diesen Kunden zeigen: Vorbereitung, im Gespraech eingeklappt. */
.c-kundenauswahl > summary { cursor: pointer; list-style: none; }
.c-kundenauswahl > summary::-webkit-details-marker { display: none; }
.c-kundenauswahl > summary::before { content: "\25B8  "; }
.c-kundenauswahl[open] > summary::before { content: "\25BE  "; }
.c-kundenauswahl .c-schalter[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }