/* Projekt-Editor — vier Stufen, ein Modus zur Zeit.

   Bürowerkzeug, kein Auftritt: dunkel wie das Cockpit, aber mit Formularen.
   Die Fünf-Bedienelemente-Regel gilt für den Termin, nicht für den
   Schreibtisch — dafür gilt hier eine andere: **sichtbar ist nur, was im
   aktuellen Modus Sinn ergibt.** */

body.projekt { overflow: hidden; }

/* ⚠ **Die Wache über `hidden` — und sie ist verdient.** Die Browserregel
   `[hidden] { display: none }` hat Spezifität 0-1-0 und steht ganz unten: jede
   Klassenregel mit `display` schlägt sie, und das Element bleibt stehen, ohne
   dass irgendwo etwas rot wird. Beim Umbau am 11.09.2026 nachgezählt — **sechs**
   Stellen allein auf dieser Seite:

     #passung-amtlich / #passung-fremd  .p-felder      beide Feldsätze zugleich
     #messung-knoepfe                   .p-knopfreihe  „Maß nach …" ohne Messung
     #p-mehr                            .p-mehr        „Weitere anzeigen" immer
     #z-anker                           .p-probe       Ankerhinweis immer
     #stufe-dach                        .p-stufe-dach  die Stufe blendet nie aus

   Fünf davon waren älter als der Umbau. Eine Regel je Klasse nachzutragen ist
   eine Pflicht, an die sich niemand erinnert — und `pruefe.mjs` sieht sie nie,
   weil die *Eigenschaft* ja richtig gesetzt ist. Also einmal hier.

   ⚠ Sie trifft **auch SVG**, anders als die Browserregel: die steht im
   HTML-Namensraum, diese nicht. Das ist hier gewollt — `karte.js` schaltet
   `#umrisse` mit `toggleAttribute('hidden', …)`, und bisher tat das nichts.
   Wer `.hidden = …` an einem SVG schreibt, setzt weiter ins Leere.

   ⚠ **Und sie hat einen Preis: was sich wirklich ausblendet, misst sich zu
   null.** Die Dachstufe blieb bis dahin immer im Fluss; seit sie verschwindet,
   meldet der `ResizeObserver` für `#bildquadrat` die Breite 0, sobald jemand
   die Stufe wechselt. Wer den DOM vermisst, behandelt 0 als „gerade nichts zu
   tun" und nicht als Maßstab — sonst kollabiert eine Entzerrung auf einen
   Punkt und meldet einen Fehler, den es nicht gibt.
   → CLAUDE.md, Falle 20 */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════ Kopfzeile */

.p-kopf {
  flex: none; display: flex; align-items: center; gap: 24px;
  padding: 9px 18px; background: var(--c-flaeche);
  border-bottom: 1px solid var(--c-linie);
}
.p-marke { display: flex; flex-direction: column; min-width: 0; max-width: 26ch; }
.p-marke b {
  font-family: var(--schrift-anzeige); font-size: 14.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-marke span {
  font-size: 11.5px; color: var(--c-tinte-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Die Stufen. Jede trägt ihren Stand — „3 Flächen", „4.600 kWh" —, damit man
   sieht, wo etwas fehlt, ohne hinzugehen. */
.p-stufen { display: flex; gap: 4px; margin: 0 auto; }
.p-stufe-knopf {
  appearance: none; border: 1px solid var(--c-linie); background: var(--c-flaeche-2);
  color: var(--c-tinte-2); border-radius: 8px; padding: 6px 13px; cursor: pointer;
  font-family: var(--schrift-anzeige); font-size: 13px; font-weight: 500;
  display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
}
.p-stufe-knopf .nr { font-size: 11px; color: var(--c-tinte-3); font-variant-numeric: tabular-nums; }
.p-stufe-knopf .stand { font-size: 11px; color: var(--c-tinte-3); font-weight: 400; }
.p-stufe-knopf:hover { border-color: var(--c-linie-hell); color: var(--c-tinte); }
.p-stufe-knopf.aktiv { background: var(--ember); border-color: var(--ember); color: #fff; }
.p-stufe-knopf.aktiv .nr,
.p-stufe-knopf.aktiv .stand { color: rgba(255,255,255,.78); }

.p-abschluss { display: flex; align-items: center; gap: 10px; }
.p-abschluss .marke-signatur { flex: none; opacity: .65; margin-left: 4px; color: var(--c-tinte-2); }
/* Der Satz, der sagt, was fehlt. Rechtsbündig, damit er am Knopf klebt und
   nicht durch die Kopfzeile wandert, wenn er länger wird. */
.p-stand {
  font-size: 11.5px; color: var(--c-tinte-3); text-align: right;
  max-width: 34ch; line-height: 1.3;
}
.p-stand.offen { color: var(--solaris); }
.p-stand.fehler { color: #ff6b6b; }

/* Eine Zeile für alles, was schiefgehen kann und keinem Modus gehört. */
.p-lage {
  flex: none; padding: 8px 18px; font-size: 12.5px;
  background: color-mix(in srgb, var(--solaris) 16%, var(--c-flaeche));
  border-bottom: 1px solid var(--c-linie); color: var(--c-tinte);
}
.p-lage.fehler { background: color-mix(in srgb, #ff6b6b 16%, var(--c-flaeche)); }
.p-lage[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════ Bühne */

.p-buehne { flex: 1; min-height: 0; display: flex; }
.p-stufe { flex: 1; min-height: 0; display: flex; }
.p-stufe[hidden] { display: none; }

/* Stufen 1, 3 und 4 sind Formulare: eine Spalte, mittig, mit Lesebreite. */
.p-spalte-mitte {
  flex: 1; overflow-y: auto; padding: 24px 22px 80px;
  max-width: 860px; margin: 0 auto; width: 100%;
}

/* ────────────────────────────────────────────────────────────────── Blöcke */

.p-block { margin-bottom: 22px; }
.p-block h2 {
  font-family: var(--schrift-anzeige); font-size: 12px; font-weight: 600;
  color: var(--c-tinte-3); text-transform: uppercase; letter-spacing: .07em;
  margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px;
}
.p-block .p-zahl { text-transform: none; letter-spacing: 0; color: var(--c-tinte-2); font-weight: 400; }

.p-hinweis { color: var(--c-tinte-3); font-size: 12.5px; line-height: 1.45; margin: 0; }
.p-hinweis.fehler { color: #ff6b6b; }
/* Kein Fehler, sondern etwas, das man wissen muss: der Terminstand weicht ab.
   Rot wäre falsch — es ist nichts kaputt, es ist nur nicht dasselbe. */
.p-hinweis.abweichung { color: var(--solaris); }
.p-hinweis:not(:empty) { margin-top: 8px; }

.p-probe {
  font-size: 12.5px; color: var(--c-tinte-2); margin: 0 0 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.p-probe.gut { color: #6bcf8f; }
.p-probe.streit { color: var(--solaris); }

.p-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.p-felder label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; color: var(--c-tinte-3);
}
.p-felder label.breit { grid-column: 1 / -1; }
.p-felder input, .p-felder select, .p-suche input, .p-suchzeile input {
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  color: var(--c-tinte); border-radius: 7px; padding: 8px 10px;
  font-family: var(--schrift-text); font-size: 13.5px; width: 100%;
}
.p-felder input:focus, .p-felder select:focus { border-color: var(--ember); outline: none; }
.p-felder input[type="range"] { padding: 0; border: 0; background: none; }

.p-knopfreihe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.p-schalterzeile {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 12.5px; color: var(--c-tinte-2); cursor: pointer;
}
.p-schalterzeile input { accent-color: var(--ember); width: 15px; height: 15px; }

/* Aufklappbarer Block — für das, was selten gebraucht wird und trotzdem
   erreichbar bleiben muss. */
.p-klapp > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px;
}
.p-klapp > summary::-webkit-details-marker { display: none; }
.p-klapp > summary::before { content: '▸'; color: var(--c-tinte-3); font-size: 11px; }
.p-klapp[open] > summary::before { content: '▾'; }
.p-klapp > summary h2 { margin: 0; }
.p-klapp > summary span { font-size: 11.5px; color: var(--c-tinte-3); margin-left: auto; }

/* Das „i" an einer Überschrift: Erklärung auf Wunsch, nicht auf Vorrat.
   ⚠ `text-transform: none` ist Pflicht — `.p-block h2` schaltet auf
   Großbuchstaben, und aus dem „i" würde ein „I", das wie ein Strich aussieht. */
.p-info {
  appearance: none; cursor: pointer; flex: none;
  width: 15px; height: 15px; border-radius: 50%; padding: 0;
  border: 1px solid var(--c-linie-hell); background: transparent;
  color: var(--c-tinte-3); font-size: 10px; line-height: 1;
  font-family: var(--schrift-anzeige); font-style: italic; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: none; letter-spacing: 0; align-self: center;
}
.p-info:hover { color: var(--c-tinte); border-color: var(--c-tinte-3); }
.p-info[aria-expanded="true"] {
  background: var(--c-linie-hell); color: var(--c-tinte); border-color: var(--c-linie-hell);
}
.p-hilfe {
  margin: 0 0 12px; padding: 9px 11px; border-radius: 6px;
  background: var(--c-flaeche-2); border: 1px solid var(--c-linie);
  font-size: 12px; line-height: 1.55; color: var(--c-tinte-2);
}
.p-hilfe p { margin: 0 0 7px; }
.p-hilfe p:last-child { margin-bottom: 0; }

/* Der Randabstand im Messpanel: eine Zeile, solange niemand ihn braucht. */
#block-rand { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-linie); }

/* Das Aufmaß im Messpanel bekommt eine Trennlinie — aber nur, wenn darüber
   wirklich etwas steht. Solange nichts gemessen ist, ist `#messung` leer und
   das Panel beginnt mit dem Aufmaß; eine Linie ganz oben trennte dann nichts
   von nichts und sähe aus wie ein Rest. */
#messung:not(:empty) ~ #aufmass {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-linie);
}

/* Der zweite Weg zum selben Dach: den Dachüberstand unmittelbar auftragen.
   Er steht unter dem Aufmaß und nicht daneben — es ist dieselbe Frage, nur
   anders gestellt, und eine zweite Überschrift in `.p-block h2` machte daraus
   zwei Abschnitte. Leiser als eine, lauter als eine Feldbeschriftung. */
.p-untertitel {
  font-family: var(--schrift-anzeige); font-size: 12px; font-weight: 600;
  color: var(--c-tinte-3); margin: 14px 0 8px;
}

/* Die beiden Überstandsregler. Untereinander, nicht nebeneinander: ein Regler
   über die halbe Panelbreite hat bei 1 cm Schritt zu wenig Weg, und man zieht
   ihn im Bild und nicht auf der Skala. Der Wert steht **neben** der
   Beschriftung, nicht darunter — er ändert sich beim Ziehen, und was springt,
   soll den Text daneben nicht verschieben. */
.p-schieber label {
  display: block; margin-bottom: 10px;
  font-size: 12px; color: var(--c-tinte-3);
}
.p-schieber output {
  float: right; font-variant-numeric: tabular-nums; color: var(--c-tinte);
}
.p-schieber input[type="range"] {
  display: block; width: 100%; margin-top: 5px;
  padding: 0; border: 0; background: none; accent-color: var(--ember);
}

/* ═══════════════════════════════════════════════════ Stufe 1 · Projektliste */

.p-suchzeile { display: flex; gap: 8px; margin-bottom: 14px; }
.p-suchzeile input { flex: 1; }

/* Der Statusfilter zählt mit. Ein Filter, der nicht sagt, wie viel hinter ihm
   liegt, zwingt zum Ausprobieren. */
.p-filter { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
.p-filter button {
  appearance: none; cursor: pointer; border-radius: 999px; padding: 5px 12px;
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  color: var(--c-tinte-2); font-size: 12px; font-family: var(--schrift-text);
  display: inline-flex; align-items: baseline; gap: 7px;
}
.p-filter button:hover { border-color: var(--c-linie-hell); color: var(--c-tinte); }
.p-filter button[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); color: #fff; }
.p-filter button .n { font-variant-numeric: tabular-nums; opacity: .7; }

/* Eine Zeile ist eine Zeile: Name links (führt in den Editor), Kennzahlen
   mittig, Wege rechts. Verschachtelte Verweise gibt es nicht. */
.p-liste { display: flex; flex-direction: column; gap: 6px; }
.p-zeile {
  display: flex; align-items: center; gap: 14px;
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  border-radius: 9px; padding: 10px 13px;
}
.p-zeile:hover { border-color: var(--c-linie-hell); }
.p-zeile.offen { border-color: var(--ember); }
.p-zeile-oeffnen {
  flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left;
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--c-tinte); font-family: var(--schrift-text);
}
.p-zeile-oeffnen b { font-family: var(--schrift-anzeige); font-weight: 600; font-size: 13.5px; }
.p-zeile-oeffnen span {
  color: var(--c-tinte-3); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-zeile-zahlen {
  flex: none; display: flex; gap: 12px; font-size: 11.5px; color: var(--c-tinte-3);
  font-variant-numeric: tabular-nums;
}
.p-zeile-wege { flex: none; display: flex; gap: 5px; align-items: center; }
.p-zeile-wege a, .p-zeile-wege button {
  appearance: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: transparent; border: 1px solid var(--c-linie-hell); border-radius: 6px;
  color: var(--c-tinte-3); font-size: 11.5px; padding: 4px 9px;
  font-family: var(--schrift-text);
}
.p-zeile-wege a:hover, .p-zeile-wege button:hover { color: var(--ember); border-color: var(--ember); }

/* Die Prognosen eines Projekts: der Schalter steht bei den Kennzahlen, die
   Liste klappt unter der Zeile auf — `flex-wrap` und volle Breite, damit die
   Zeile oben bleibt, wie sie ist. */
.p-zeile { flex-wrap: wrap; }
.p-prognosen-schalter {
  appearance: none; cursor: pointer; background: none; padding: 0 2px;
  border: 0; border-bottom: 1px dotted currentColor; border-radius: 0;
  color: inherit; font: inherit;
}
.p-prognosen-schalter:hover, .p-prognosen-schalter[aria-expanded="true"] { color: var(--ember); }
.p-prognosen {
  flex-basis: 100%; display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--c-linie); padding-top: 8px;
  font-size: 11.5px; color: var(--c-tinte-3);
}
.p-prognosen.fehler { color: #ff6b6b; }
.p-prognose {
  display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums;
}
.p-prognose b { color: var(--c-tinte); font-weight: 600; min-width: 44px; }
.p-prognose a { margin-left: auto; color: var(--ember); text-decoration: none; }
.p-prognose a:hover { text-decoration: underline; }
.p-prognose-vermerk { color: var(--solaris); }

/* Der Schalter „mit" — liegt das Projekt in der Reisetasche? Er sitzt links in
   der Wegespalte, weil er die Frage beantwortet, die vor der Fahrt gestellt
   wird, und nicht die des Termins. → js/reisetasche.js */
.p-gepaeck {
  appearance: none; cursor: pointer; white-space: nowrap;
  border-radius: 999px; padding: 3px 10px; font-size: 11px;
  font-family: var(--schrift-text);
  background: transparent; border: 1px dashed var(--c-linie-hell); color: var(--c-tinte-3);
}
.p-gepaeck:hover:not(:disabled) { color: var(--c-tinte); border-color: var(--c-tinte-3); }
.p-gepaeck.mit {
  border-style: solid; background: color-mix(in srgb, #6bcf8f 18%, transparent);
  border-color: color-mix(in srgb, #6bcf8f 55%, transparent); color: #6bcf8f;
}
.p-gepaeck:disabled { opacity: .5; cursor: default; }

/* Die Stufe im Vertrieb, als Wahlfeld in der Zeile. Sie steht in der
   Datenbank und nie in der Hausdatei. */
.p-status {
  appearance: none; cursor: pointer; border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-family: var(--schrift-text);
  border: 1px solid var(--c-linie-hell); background: var(--c-flaeche-2); color: var(--c-tinte-2);
}
.p-status[data-status="angebot"] { color: var(--solaris); border-color: color-mix(in srgb, var(--solaris) 50%, transparent); }
.p-status[data-status="verkauft"] { color: #6bcf8f; border-color: color-mix(in srgb, #6bcf8f 50%, transparent); }
.p-status[data-status="verloren"] { color: var(--c-tinte-3); }

/* Wer das Projekt betreut — nur für die Verwaltung zu sehen und zu ändern.
   Ein Projekt ohne Verantwortlichen sieht kein Verkäufer; das soll auffallen,
   nicht unter den anderen verschwinden. → docs/ENTSCHEIDUNGEN.md, 2026-10-09 */
.p-verantwortlich {
  appearance: none; cursor: pointer; border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-family: var(--schrift-text); max-width: 170px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--c-linie-hell); background: var(--c-flaeche-2); color: var(--c-tinte-2);
}
.p-verantwortlich.ohne { border-style: dashed; color: var(--ember); border-color: var(--ember); }
.p-filter .p-verantwortlich { margin-left: auto; padding: 5px 12px; font-size: 12px; max-width: 240px; }

.p-gruppe-marke {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-tinte-3); margin: 16px 0 7px;
}
.p-gruppe-marke:first-child { margin-top: 0; }
.p-mehr { margin: 14px auto 0; display: block; }

/* ═══════════════════════════════════════════════════════════ Stufe 2 · Dach */

.p-stufe-dach { display: grid; grid-template-columns: minmax(380px, 5fr) 7fr; }

.p-arbeitsspalte { overflow-y: auto; padding: 18px 20px 70px; min-width: 0; }

.p-adresszeile {
  display: flex; align-items: center; gap: 12px;
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  border-radius: 9px; padding: 9px 12px;
}
.p-adresszeile[hidden] { display: none; }
.p-adresszeile > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.p-adresszeile b { font-family: var(--schrift-anzeige); font-size: 13px; font-weight: 600; }
.p-adresszeile span { font-size: 11.5px; color: var(--c-tinte-3); }

.p-suche { display: flex; gap: 8px; }
.p-suche input { flex: 1; }
.p-suche[hidden] { display: none; }

.p-treffer { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.p-treffer button {
  appearance: none; text-align: left; cursor: pointer;
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  color: var(--c-tinte); border-radius: 8px; padding: 8px 11px;
  font-family: var(--schrift-text); font-size: 12.5px; line-height: 1.35;
}
.p-treffer button:hover { border-color: var(--ember); }
.p-treffer button b { display: block; font-weight: 600; }
.p-treffer button span { color: var(--c-tinte-3); font-size: 11.5px; }

/* ─────────────────────────────────────────────────────────── Flächenliste
   Das Rückgrat der Stufe. Sie ist der einzige Weg, die aktive Fläche zu
   wechseln, solange nicht „Ansehen" läuft — sie wird nie ausgeblendet. */
.p-flaechen { display: flex; flex-direction: column; gap: 5px; }
.p-flaeche {
  display: flex; align-items: stretch;
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  border-radius: 8px; overflow: hidden;
}
.p-flaeche:hover { border-color: var(--c-linie-hell); }
.p-flaeche.belegt { border-color: color-mix(in srgb, var(--ember) 55%, var(--c-linie)); }
/* Die aktive Fläche ist deutlich markiert — sie ist die eine, an der
   gearbeitet wird, und man muss sie ohne Suchen finden. */
.p-flaeche.aktiv {
  border-color: var(--ember);
  box-shadow: 0 0 0 1px var(--ember) inset;
  background: color-mix(in srgb, var(--ember) 9%, var(--c-flaeche));
}
.p-flaeche-waehlen {
  flex: 1; min-width: 0; appearance: none; background: none; border: 0; cursor: pointer;
  padding: 8px 11px; text-align: left; color: var(--c-tinte);
  font-family: var(--schrift-text); font-size: 13px;
  display: grid; grid-template-columns: 1fr auto; gap: 1px 10px;
}
.p-flaeche-waehlen b { font-family: var(--schrift-anzeige); font-weight: 600; }
.p-flaeche-waehlen .zahlen { grid-column: 1 / -1; color: var(--c-tinte-3); font-size: 11.5px; }
/* Die Höhe eines Baums in der Baumliste. */
.p-flaeche-waehlen .ergebnis { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-flaeche-waehlen .marke {
  font-size: 10.5px; color: var(--ember); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; align-self: center;
}
/* Der Haken ist ein Schalter: welche Flächen belegt werden, entscheidet der
   Verkäufer. Die Empfehlung ist ein Vorschlag. */
.p-flaeche-haken {
  flex: none; appearance: none; cursor: pointer; border: 0; border-left: 1px solid var(--c-linie);
  background: none; color: var(--c-tinte-3); width: 38px; font-size: 13px;
}
.p-flaeche.belegt .p-flaeche-haken { background: var(--ember); color: #fff; border-color: var(--ember); }
.p-flaeche-stift {
  flex: none; appearance: none; cursor: pointer; border: 0; border-left: 1px solid var(--c-linie);
  background: none; color: var(--c-tinte-3); width: 34px; font-size: 13px;
}
.p-flaeche-stift:hover { color: var(--ember); }
/* Löschen steht in der Zeile, weil die Fläche dort steht. Es ist blass, bis
   jemand darauf zeigt — und dann rot: das Zeichen soll man suchen können und
   nicht daneben treffen. Zurückgenommen wird es unter der Liste. */
.p-flaeche-weg {
  flex: none; appearance: none; cursor: pointer; border: 0; border-left: 1px solid var(--c-linie);
  background: none; color: var(--c-tinte-3); width: 32px; font-size: 12px; opacity: .55;
}
/* Dasselbe Rot wie `.p-hinweis.fehler` und `.p-stand.fehler` — ein viertes
   wäre eine vierte Meinung darüber, was in dieser Oberfläche „Achtung" heißt. */
.p-flaeche-weg:hover {
  opacity: 1; color: #ff6b6b;
  background: color-mix(in srgb, #ff6b6b 14%, transparent);
}
/* Der Rückgängig-Knopf im Satz unter der Liste. */
#flaechen-hinweis .c-knopf { margin-left: 4px; vertical-align: baseline; }

.p-uebergangen { margin-top: 9px; }
.p-uebergangen p { font-size: 11.5px; color: var(--c-tinte-3); margin: 0; }

/* ⚠ **Kein eigener Rollbereich.** Die Liste zeigt jedes Gebäude im Ausschnitt
   — an einer Wohnstraße schnell 28 —, und ein `max-height` mit `overflow` lag
   nahe, damit der Satz darunter erreichbar bleibt. Auf einem Notebook ergibt
   das eine Rolleiste in der Rolleiste: die Werkzeugspalte rollt ohnehin. Der
   erklärende Satz steht deshalb **über** der Liste, nicht darunter. */
.p-gebaeude { display: flex; flex-direction: column; gap: 5px; }
.p-gebaeude button {
  appearance: none; cursor: pointer; text-align: left;
  background: var(--c-flaeche); border: 1px solid var(--c-linie); border-radius: 8px;
  color: var(--c-tinte); padding: 7px 10px; font-size: 12.5px; font-family: var(--schrift-text);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
}
.p-teil-nr {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: var(--c-linie); color: var(--c-tinte-2);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.p-teil-text { min-width: 0; }
.p-teil-wo {
  display: block; color: var(--c-tinte-2); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-teil-an { color: var(--ember); font-size: 11px; }
.p-gebaeude button[aria-pressed="true"] {
  border-color: var(--ember); background: color-mix(in srgb, var(--ember) 10%, transparent);
}
.p-gebaeude button[aria-pressed="true"] .p-teil-nr { background: var(--ember); color: #fff; }
/* Zeile und Umriss leuchten zusammen — in beide Richtungen. */
.p-gebaeude button.betont {
  border-color: var(--solaris);
  background: color-mix(in srgb, var(--solaris) 14%, transparent);
}

.p-zielwahl { display: flex; flex-wrap: wrap; gap: 5px; }
.p-zielwahl button {
  appearance: none; cursor: pointer; border-radius: 7px; padding: 6px 11px;
  background: var(--c-flaeche); border: 1px solid var(--c-linie);
  color: var(--c-tinte-2); font-size: 12px; font-family: var(--schrift-text);
}
.p-zielwahl button[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); color: #fff; }
/* ⚠ Ein gesperrter Knopf muss gesperrt **aussehen**. Ohne diese Regel steht er
   da wie jeder andere und tut beim Druck nichts — genau der Zustand, den
   „Bild einlegen …" bis zum 11.09.2026 hatte. → CLAUDE.md, Falle 20 */
.p-zielwahl button:disabled { opacity: .35; cursor: default; }
/* Die Zahl am Knopf: was diese Wahl ergäbe. Sie steht dort, wo man drückt. */
.p-zielwahl button small { margin-left: 6px; opacity: .75; font-variant-numeric: tabular-nums; }

/* ──────────────────────────────────────────────────────────────── Belegen
   Jede Modulzeile ist Wahl und Auskunft zugleich — markiert wie eine aktive
   Fläche, damit man das gewählte Modul ohne Suchen findet. */
.p-modulwahl { display: flex; flex-direction: column; gap: 5px; }
.p-modulwahl button {
  appearance: none; cursor: pointer; text-align: left;
  background: var(--c-flaeche); border: 1px solid var(--c-linie); border-radius: 8px;
  color: var(--c-tinte); padding: 7px 11px; font-family: var(--schrift-text); font-size: 12.5px;
  display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; align-items: center;
}
.p-modulwahl button:hover { border-color: var(--c-linie-hell); }
.p-modulwahl button[aria-pressed="true"] {
  border-color: var(--ember);
  box-shadow: 0 0 0 1px var(--ember) inset;
  background: color-mix(in srgb, var(--ember) 9%, var(--c-flaeche));
}
.p-modulwahl b { font-family: var(--schrift-anzeige); font-weight: 600; }
.p-modulwahl .mass { grid-column: 1; color: var(--c-tinte-3); font-size: 11.5px; }
.p-modulwahl .ergebnis {
  grid-column: 2; grid-row: 1 / span 2; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.p-modulwahl .ergebnis small { display: block; color: var(--c-tinte-3); font-size: 11px; }
.p-modulwahl .marke {
  color: var(--ember); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.p-block h2.p-zwischentitel { margin-top: 22px; }
.p-wahlzeile { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 8px; margin-bottom: 7px; }
.p-wahlzeile > span { color: var(--c-tinte-3); font-size: 12px; }

/* Genau ein Panel ist sichtbar: das des aktiven Modus. */
.p-panel[hidden] { display: none; }

/* ───────────────────────────────────────────────────────── Kartenspalte */

.p-kartenspalte {
  display: grid; grid-template-rows: auto auto 1fr auto;
  min-width: 0; min-height: 0;
  border-left: 1px solid var(--c-linie);
}

/* Die Werkzeugleiste — der EINZIGE Weg, den Modus zu wechseln. Mit Beschriftung
   und nicht nur mit Zeichen: ein Solarteur soll nicht raten müssen. */
.p-werkzeuge {
  display: flex; gap: 4px; padding: 8px 12px;
  background: var(--c-flaeche); border-bottom: 1px solid var(--c-linie);
  overflow-x: auto;
}
.p-werkzeug {
  appearance: none; cursor: pointer; white-space: nowrap;
  background: var(--c-flaeche-2); border: 1px solid var(--c-linie);
  color: var(--c-tinte-2); border-radius: 8px; padding: 6px 12px;
  font-family: var(--schrift-anzeige); font-size: 12.5px; font-weight: 500;
}
.p-werkzeug:hover:not(:disabled) { border-color: var(--c-linie-hell); color: var(--c-tinte); }
.p-werkzeug[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); color: #fff; }
.p-werkzeug:disabled { opacity: .35; cursor: default; }

/* Der Modusstreifen. Immer sichtbar, immer an derselben Stelle, in der Farbe
   des Modus — damit niemand im falschen Werkzeug arbeitet, ohne es zu merken. */
.p-modusstreifen {
  display: flex; align-items: center; gap: 12px; min-height: 34px;
  padding: 6px 12px; font-size: 12.5px;
  background: var(--c-flaeche-2);
  border-bottom: 1px solid var(--c-linie);
  border-left: 3px solid var(--modus-ton, var(--c-tinte-3));
}
.p-modusstreifen b {
  font-family: var(--schrift-anzeige); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--modus-ton, var(--c-tinte-2));
}
.p-modusstreifen > span { color: var(--c-tinte); white-space: nowrap; }
.p-modus-hinweis {
  color: var(--c-tinte-3) !important; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-modusstreifen button { margin-left: auto; }

/* ⚠ Der Bildkasten misst am Rahmen, nie an der Fensterhöhe. `calc(100vh -
   190px)` war einmal die geschätzte Höhe von Kopfzeile, Polstern und
   Kartenfuß — jedes Bedienelement, das unten dazukam, machte sie falsch, und
   zwar lautlos. → CLAUDE.md, Falle 15 */
.p-bildrahmen {
  position: relative; min-height: 0; min-width: 0;
  container-type: size;
  display: grid; place-items: center; padding: 10px;
  background: var(--c-grund);
}
.p-bildquadrat {
  position: relative; width: 100cqmin; height: 100cqmin;
  background: var(--c-flaeche); border-radius: 6px; overflow: hidden;
}
.p-bildquadrat img, .p-bildquadrat svg, .p-bildquadrat > div {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
/* ⚠ **Nur `img`, nicht `svg`.** `hidden` ist auf `HTMLElement` definiert, nicht
   auf `SVGElement`: `svg.hidden = false` setzt dort eine wirkungslose
   Eigenschaft und **entfernt das Attribut nicht**. Die Browserregel `[hidden]`
   steht im HTML-Namensraum und trifft ein SVG darum nicht — eine eigene Regel
   ohne Namensraum schon, und dann bleibt der Kasten leer, ohne dass irgendwo
   etwas fehlt. Umgeschaltet wird das SVG deshalb in `karte.js` über
   `toggleAttribute()`. → CLAUDE.md, Falle 20 */
.p-bildquadrat img[hidden] { display: none; }
/* ⚠ **Das eingelegte Bild füllt den Kasten NICHT.** Es liegt an seiner Stelle
   auf dem Boden — Lage und Breite kommen in Prozent des Kastens aus
   `fremdbildAn()`, die Höhe aus dem Seitenverhältnis der Datei. Deshalb muss es
   sich aus der Pauschalregel darüber lösen: `inset: 0` klebte es in alle vier
   Ecken, und ein Querformat läge dann verzerrt über der ganzen Karte, ohne dass
   man es als Verzerrung erkennt. `max-width: none` gehört dazu — es darf über
   den Kasten hinausragen, `.p-bildrahmen` schneidet ab.
   Gedreht wird um die **eigene Mitte**: `fremdbildAn()` legt erst die Mitte auf
   den Punkt, dann dreht es. Mit `transform-origin: 0 0` wanderte das Bild beim
   Drehen davon. */
#fremdbild {
  inset: auto; height: auto; max-width: none;
  transform-origin: 50% 50%;
}
/* Das amtliche Luftbild dagegen füllt den Kasten und wird um seine Mitte
   gedreht und skaliert — sonst wandert es beim Einpassen aus dem Rahmen. */
#luftbild { transform-origin: 50% 50%; }

/* Die entzerrten Stücke. **Zwei Ebenen, und das ist der Kern.** Die Hülle trägt
   den Beschnitt in Kastenkoordinaten — denselben Prozentwerten, mit denen auch
   das SVG darüber zeichnet; das Bild darin trägt die Perspektive als
   `matrix3d`. Getrennt, damit der Beschnitt nicht durch die Perspektive
   mitverzerrt wird: `clip-path` gilt im lokalen Koordinatensystem des Elements,
   also **vor** seiner Transformation.
   ⚠ Ohne den Beschnitt zeigte eine Entzerrung das ganze Foto — richtig auf der
   Fläche, für die sie gerechnet ist, und falsch überall sonst.
   → CLAUDE.md, Falle 16 */
#flaechenbilder { pointer-events: none; }
.p-flaechenbild { position: absolute; inset: 0; overflow: hidden; }
.p-flaechenbild[hidden] { display: none; }
#flaechenbilder .p-flaechenbild img {
  inset: auto; left: 0; top: 0;
  height: auto; max-width: none; transform-origin: 0 0;
}

/* ⚠ **Was in den Bildmodi greifbar ist, dreht sich um.** Beim Einpassen nimmt
   das Overlay keine Zeigerereignisse an: es soll unmöglich sein, dabei
   versehentlich einen Eckpunkt zu ziehen — der Sinn des Modus ist ja, dass die
   Geometrie in Ruhe gelassen wird. Beim Zuordnen gilt das Gegenteil: das
   Overlay **muss** sie annehmen, sonst sind die Passmarken nicht zu greifen,
   und das Bild darunter darf nicht ziehbar sein — wer eine Ecke greift, will
   nicht das Bild verschieben. */
.p-bildquadrat[data-modus="einpassen"] #umrisse { pointer-events: none; }
.p-bildquadrat[data-modus="einpassen"] #luftbild,
.p-bildquadrat[data-modus="einpassen"] #fremdbild { cursor: grab; touch-action: none; }
.p-bildquadrat[data-modus="einpassen"] #luftbild:active,
.p-bildquadrat[data-modus="einpassen"] #fremdbild:active { cursor: grabbing; }
.p-bildquadrat[data-modus="zuordnen"] #fremdbild { cursor: default; pointer-events: none; }

.p-platzhalter {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--c-tinte-3); font-size: 13px; text-align: center; line-height: 1.6;
  pointer-events: none;
}
.p-platzhalter[hidden] { display: none; }

.p-raumbild {
  position: absolute; inset: 10px; display: none;
  background: var(--c-flaeche); border-radius: 6px;
}
.p-raumbild.an { display: block; }

/* ⚠ Fester Zuschnitt: drei Gruppen und eine Quellenzeile. Alles, was sich mit
   dem Modus ändert, steht links. Wächst dieser Fuß, schrumpft der Bildkasten,
   und er zieht sich unter der Hand weg, die gerade eine Ecke setzt.
   → CLAUDE.md, Falle 15 */
.p-kartenfuss {
  display: grid; grid-template-columns: auto auto 1fr; gap: 8px 14px;
  align-items: center; padding: 8px 12px; min-height: 46px;
  background: var(--c-flaeche); border-top: 1px solid var(--c-linie);
}
.p-ansicht, .p-zoom { display: flex; gap: 3px; }
/* Der Einstieg ins Einlegen sieht aus wie die übrigen Fußknöpfe — er gehört
   in dieselbe Reihe und bekommt darum dieselbe Regel. `white-space: nowrap`,
   weil sein Text als einziger umbrechen könnte: der Fuß hat feste Höhe,
   und eine Zeile mehr zieht den Bildkasten unter der Hand weg (Falle 15). */
.p-ansicht button, .p-zoom button, .p-unterlage button {
  appearance: none; cursor: pointer; white-space: nowrap;
  background: var(--c-flaeche-2); border: 1px solid var(--c-linie);
  color: var(--c-tinte-3); border-radius: 6px; padding: 4px 9px;
  font-size: 11.5px; font-family: var(--schrift-text);
}
.p-ansicht button.an, .p-zoom button.an {
  background: var(--c-linie-hell); color: var(--c-tinte); border-color: var(--c-linie-hell);
}
.p-unterlage { display: flex; gap: 6px; align-items: center; justify-self: end; grid-row: 1; grid-column: 3; }
.p-unterlage select {
  background: var(--c-flaeche-2); border: 1px solid var(--c-linie); color: var(--c-tinte);
  border-radius: 6px; padding: 4px 8px; font-size: 11.5px; max-width: 190px;
  font-family: var(--schrift-text);
}
.p-unterlage button:hover { border-color: var(--c-linie-hell); color: var(--c-tinte); }
.p-quelle {
  grid-column: 1 / -1; font-size: 10.5px; color: var(--c-tinte-3);
  line-height: 1.3; margin: 0;
}
.p-quelle:empty { display: none; }

/* ───────────────────────────────────────────────────────────── Zeichnung */

#umrisse { cursor: default; }
#umrisse .gebaeude { fill: rgba(255,255,255,.05); stroke: var(--c-tinte-3); stroke-width: 2; }
#umrisse .gebaeude.greifbar { cursor: pointer; }
#umrisse .gebaeude.greifbar:hover { fill: color-mix(in srgb, var(--solaris) 22%, transparent); }
#umrisse .gebaeude.gewaehlt { stroke: var(--solaris); stroke-width: 3; }
/* Das Gegenstück zu `.p-gebaeude button.betont`: die Zeile zeigt auf den
   Umriss und der Umriss auf die Zeile. */
#umrisse .gebaeude.betont {
  fill: color-mix(in srgb, var(--solaris) 26%, transparent);
  stroke: var(--solaris); stroke-width: 3.5;
}
/* Die Nummer liegt auf einem Luftbild — hell auf dunkel geht nicht, dunkel auf
   hell auch nicht. `paint-order` legt den Rand hinter die Schrift statt
   darüber; ohne das frisst er sie von innen auf. */
#umrisse .gebaeude-nr {
  fill: #fff; font-family: var(--schrift-text); font-size: 26px; font-weight: 600;
  text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 5; stroke-linejoin: round;
}
#umrisse .dach { fill: color-mix(in srgb, var(--ember) 14%, transparent); stroke: var(--ember); stroke-width: 2; }
#umrisse .dach.greifbar { cursor: pointer; }
#umrisse .dach.aus { fill: rgba(255,255,255,.04); stroke: var(--c-tinte-3); }
#umrisse .dach.aktiv { stroke: var(--solaris); stroke-width: 3.5; }
/* Die Fläche, auf der der Zollstock gerade misst. Sie steht **nach** `.aus` und
   `.aktiv`: welche Ebene die Zahl meint, ist in diesem Moment das Wichtigste
   im Bild — und eine unbenutzte Fläche darf man genauso messen. */
#umrisse .dach.messflaeche {
  fill: color-mix(in srgb, var(--solaris) 20%, transparent);
  stroke: var(--solaris); stroke-width: 3;
}
/* Was nicht die aktive Fläche ist, tritt zurück. Der Blick soll dort landen,
   wo gearbeitet wird. */
#umrisse .zurueckgesetzt { opacity: .38; }
#umrisse .anfasser { fill: var(--solaris); stroke: #000; stroke-width: 1.5; cursor: grab; }
#umrisse .anfasser.mitte { fill: none; stroke: var(--solaris); stroke-width: 2; }
#umrisse .anfasser.gewaehlt { fill: #fff; }
#umrisse .kante { stroke: transparent; stroke-width: 14; cursor: move; fill: none; }
#umrisse .raster { fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.35); stroke-width: .8; }
/* Beim Belegen sind die Module das, worum es geht — sie treten hervor. */
.p-bildquadrat[data-modus="belegen"] #umrisse .raster {
  fill: color-mix(in srgb, var(--ember) 32%, transparent); stroke: #fff; stroke-width: 1.2;
}
#umrisse .loch { fill: rgba(0,0,0,.45); stroke: var(--c-tinte-2); stroke-width: 1.5; }
#umrisse .falllinie { stroke: var(--solaris); stroke-width: 2; fill: none; }
#umrisse .beschriftung { fill: var(--c-tinte); font-size: 22px; font-family: Inter, sans-serif; }
#umrisse .messlinie { stroke: var(--solaris); stroke-width: 3; }
#umrisse .fangfeld { fill: transparent; cursor: crosshair; }
/* Bäume. Grün und nicht in der Markenfarbe: ein Baum stellt einen Baum dar und
   nicht den Betrieb — dieselbe Regel wie für die Sonne im Dachplan (Falle 18).
   Die Aktenlage gestrichelt: ihre Krone geht in keine Zahl ein. */
#umrisse .baum-krone { fill: rgba(70, 140, 70, .30); stroke: #9fdc8f; stroke-width: 2; }
#umrisse .baum.akte .baum-krone { stroke-dasharray: 7 5; fill: rgba(70, 140, 70, .16); }
#umrisse .baum.greifbar { cursor: grab; }
#umrisse .baum.gewaehlt .baum-krone { stroke: var(--solaris); stroke-width: 3.5; }
#umrisse .baum-stamm { fill: #5b4a3a; stroke: #000; stroke-width: 1.5; }
#umrisse .baum-text { font-size: 18px; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 4; stroke-linejoin: round; }
#umrisse .baum-anfasser { fill: var(--solaris); stroke: #000; stroke-width: 1.5; cursor: ew-resize; }
/* Die Plätze, die der Schatten trifft — die Deckkraft trägt den Verlust. */
#umrisse .schattenplatz { fill: #0b1220; stroke: var(--solaris); stroke-width: 1; }
/* Die Passmarken. Eine **offene** ist kleiner, blasser und gestrichelt: sie ist
   ein Vorschlag, wo die Ecke in der Aufsicht läge, und ein Vorschlag darf nicht
   aussehen wie eine Messung. → CLAUDE.md, Falle 16 */
#umrisse .passmarke { fill: var(--ember); stroke: #fff; stroke-width: 2; cursor: grab; }
#umrisse .passmarke.offen {
  fill: rgba(0, 0, 0, .3); stroke-width: 1.5; stroke-dasharray: 4 3;
  stroke: color-mix(in srgb, var(--ember) 75%, transparent);
}
#umrisse .passmarke-schrift {
  fill: #fff; font-family: var(--schrift-anzeige); font-size: 12px; font-weight: 600;
  text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: rgba(0, 0, 0, .7); stroke-width: 3px;
}
#umrisse .passmarke-schrift.offen { opacity: .6; }
/* Der Umriss, wie er beim Zuordnen entsteht: die Verbindung der Marken. Er wird
   **gezogen, nicht gerechnet** — ein Zug ändert genau eine seiner Ecken. Eine
   Vorhersage aus der Abbildung stünde hier schlecht: eine Homographie ist
   global, und die Fluchtlinie schwenkt bei einer fast senkrechten Aufnahme
   schon bei Millimetern. */
#umrisse .passvorschau {
  fill: color-mix(in srgb, var(--ember) 10%, transparent);
  stroke: var(--ember); stroke-width: 2; stroke-dasharray: 7 5;
}

/* ══════════════════════════════════════════════════════════ Enge Fenster */

@media (max-width: 1180px) {
  .p-stufe-dach { grid-template-columns: minmax(320px, 4fr) 6fr; }
  .p-stufe-knopf .stand { display: none; }
}