/* Schrift selbst ausgeliefert: kein Abruf bei Google (DSGVO). IBM Plex Sans, SIL Open Font License. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url("schrift/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap;
  src: url("schrift/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url("schrift/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --papier: #f4f6f6;      /* Hintergrund, kühles Grau wie Zeichenpapier */
  --flaeche: #ffffff;
  --tinte: #16232b;       /* Text */
  --gedaempft: #56656d;   /* Nebentext */
  --linie: #d3dbde;       /* Trennlinien, Leitungen im Schema */
  --leitung: #2443c4;     /* Hauptfarbe: Aktionen, Leitungen unter Strom */
  --sonne: #e2a000;       /* nur für PV und „Simulation läuft“ */
  --fehler: #b42318;
  --breite: 1680px;       /* größte Breite des Inhalts */
  /* Rahmen (M17, Aufbau wie SB Admin 2) */
  --leiste: #16232b;      /* Seitenleiste in Tinte, wie die Sammelschiene im Schema */
  --leiste-text: rgba(255, 255, 255, 0.72);
  --leiste-linie: rgba(255, 255, 255, 0.16);
  --leitung-hell: #8599ec; /* Leitung auf dunklem Grund */
  --ruhig: #9aa6ac;       /* Kante neutraler Kennkarten */
  --karte-kopf: #f8fafa;  /* Kopfstreifen der Karten */
  --rund: 6px;
  --schatten: 0 1px 2px rgba(22, 35, 43, 0.05), 0 2px 10px rgba(22, 35, 43, 0.04);
  --leiste-breite: 15rem;
  --leiste-eng: 4.5rem;
}

html, body { background: var(--papier); color: var(--tinte); }
body { margin: 0; font-family: "IBM Plex Sans", system-ui, sans-serif; font-feature-settings: "tnum"; }
a { color: var(--leitung); }
:focus-visible { outline: 2px solid var(--leitung); outline-offset: 2px; }

/* --- Anmelden: Karte auf Tinte mit Rasterpunkten, links Schema, rechts Formular ------------- */
.anmelden { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; box-sizing: border-box;
  background-color: var(--leiste);
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 18px 18px; }
.anmelden-karte { width: min(1000px, 100%); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  background: var(--flaeche); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); }
.anmelden-schema { display: flex; flex-direction: column; gap: 28px; padding: 36px 44px 44px;
  background-color: var(--papier); background-image: radial-gradient(var(--linie) 1px, transparent 1px);
  background-size: 18px 18px; border-right: 1px solid var(--linie); }
.anmelden-schema h1 { font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: 0; max-width: 18ch; }
.anmelden-schema p { color: var(--gedaempft); max-width: 46ch; line-height: 1.55; margin: 12px 0 0; }
.anmelden-schema img { width: 100%; max-width: 480px; height: auto; }
.anmelden-formular { display: flex; align-items: center; justify-content: center; padding: 48px 40px; }
.anmelden-formular .formular { width: 100%; max-width: 340px; }
.anmelden-formular h2 { font-size: 1.35rem; font-weight: 600; margin: 0 0 4px; }
.anmelden-formular .hinweis { color: var(--gedaempft); margin: 0 0 24px; }
.marke { font-weight: 600; letter-spacing: 0.01em; }


/* --- Übersicht -------------------------------------------------------------------------- */
.inhalt { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px 24px; align-items: start;
  max-width: var(--breite); padding: 28px 32px 48px; }
.inhalt > .seitentitel, .inhalt > .kennkarten { grid-column: 1 / -1; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 12px; }
.abschnitt-kopf h2 { font-size: 1.25rem; font-weight: 600; margin: 0; }
.abschnitt-kopf .anzahl { color: var(--gedaempft); font-weight: 400; margin-left: 8px; }

.projekte { width: 100%; border-collapse: collapse; background: var(--flaeche);
  border: 1px solid var(--linie); }
.projekte tbody tr:hover td { background: #fafbfb; }
.projekte th { text-align: left; font-weight: 500; color: var(--gedaempft); font-size: 0.875rem;
  padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.projekte td { padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.projekte tr:last-child td { border-bottom: 0; }
.projekte .name { font-weight: 500; }
.projekte .klein { color: var(--gedaempft); font-size: 0.875rem; }
.leer { background: var(--flaeche); border: 1px dashed var(--linie); border-radius: var(--rund); padding: 32px;
  color: var(--gedaempft); }
.leer strong { color: var(--tinte); display: block; margin-bottom: 4px; font-weight: 500; }

.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gedaempft); }
.status-daten_vollstaendig::before, .status-ergebnis_liegt_vor::before { background: var(--leitung); }
.status-simulation_laeuft::before { background: var(--sonne); }
.status-fehler::before { background: var(--fehler); }
.status-archiviert { color: var(--gedaempft); }

.vorlagen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.vorlagen li { padding: 14px 0; border-bottom: 1px solid var(--linie); }
.vorlagen .name { font-weight: 500; }
.vorlagen .klein { color: var(--gedaempft); font-size: 0.875rem; margin-top: 2px; }

/* --- Projektseite ---------------------------------------------------------------------- */
.projekte a.name { color: var(--tinte); text-decoration: none; }
.projekte a.name:hover { color: var(--leitung); text-decoration: underline; }
/* Arbeitsbereich (M8): bis 1.680 px breit; die Projektleiste (Name, Status, Reiter) bleibt beim Scrollen oben.
   --oben (Höhe der Leiste) und --system-oben (Beginn des Systems) misst assets/arbeitsbereich.js. */
.projekt { max-width: var(--breite); padding: 0 32px 24px; }
.projekt-leiste { position: sticky; top: 0; z-index: 20; background: var(--papier); padding-top: 14px; }
.projekt-kopf { display: flex; align-items: center; gap: 6px 16px; min-height: 40px; min-width: 0; }
.projekt-kopf h1 { font-size: 1.375rem; font-weight: 600; margin: 0; line-height: 1.25; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projekt-kopf .zurueck { flex: 0 0 auto; }
.projekt-vorlage { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.projekt .abschnitt > p, .projekt section > p.klein { max-width: 95ch; }
.zurueck { color: var(--gedaempft); text-decoration: none; font-size: 0.875rem; }
.zurueck:hover { color: var(--leitung); }
.klein { color: var(--gedaempft); font-size: 0.875rem; }

/* System füllt den Bildschirm: Schema wächst mit, das Panel scrollt in sich, „Speichern“ bleibt unten */
.system { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: stretch;
  height: calc(100vh - var(--system-oben, 220px) - 24px); min-height: 540px; }
.system-schema { display: flex; flex-direction: column; min-height: 0; }
.schema-flaeche { flex: 1 1 auto; min-height: 300px; position: relative; }
.schema-flaeche > div { position: absolute !important; inset: 0; }
.system-schema { background: var(--flaeche); border: 1px solid var(--linie); min-width: 0; overflow: hidden;
  /* Rasterpunkte wie auf Zeichenpapier: das Schema ist eine technische Zeichnung */
  background-image: radial-gradient(var(--linie) 1px, transparent 1px); background-size: 18px 18px; }
.legende { display: flex; gap: 20px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--linie);
  background: var(--flaeche); font-size: 0.8125rem; color: var(--gedaempft); }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.legende span::before { content: ""; width: 18px; height: 12px; border-radius: 3px; border: 2px solid; }
.legende-fehler::before { border-color: var(--fehler) !important; }
.legende-inaktiv::before { border-style: dashed !important; border-color: var(--gedaempft) !important; }
.legende-fluss::before { height: 0 !important; border-width: 1.5px 0 0 0 !important; border-color: var(--leitung) !important;
  border-radius: 0 !important; }
.offen { padding: 12px 16px; border-top: 1px solid var(--linie); background: var(--flaeche); font-size: 0.875rem;
  max-height: 168px; overflow-y: auto; }
.offen strong { font-weight: 500; color: var(--fehler); }
.offen ul { margin: 6px 0 0; padding-left: 18px; }
.offen li { margin: 2px 0; }
.offen .name { font-weight: 500; }
.offen-gut { color: var(--gedaempft); }

.panel { background: var(--flaeche); border: 1px solid var(--linie); min-height: 0; overflow: hidden; }
.panel-rahmen { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.panel-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 18px 20px; }
.panel-fuss { flex: 0 0 auto; border-top: 1px solid var(--linie); padding: 12px 18px 14px; background: var(--flaeche); }
.panel-fuss-leer { display: none; }
.panel-fuss .mantine-Alert-root { margin: 0 0 10px; }
.panel-speichern { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.panel h3 { font-size: 1.125rem; font-weight: 600; margin: 4px 0 4px; }
.panel .klein { margin: 0 0 4px; line-height: 1.45; }
.textknopf { background: none; border: 0; padding: 0; color: var(--gedaempft); font: inherit; font-size: 0.8125rem;
  cursor: pointer; }
.textknopf:hover { color: var(--leitung); }
.einheit { color: var(--gedaempft); font-size: 0.8125rem; }
.panel-fehler { margin: 10px 0 0; padding: 8px 10px 8px 26px; background: #fdf1f0; color: var(--fehler);
  font-size: 0.875rem; border-left: 3px solid var(--fehler); }
.panel-daten { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--linie); border-left: 3px solid var(--leitung); }
.panel-daten .name { font-weight: 500; font-size: 0.875rem; }

.projekt-uebersicht { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.projekt-uebersicht .karte-kopf h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.werte { width: 100%; border-collapse: collapse; background: var(--flaeche); border: 1px solid var(--linie); }
.werte th { text-align: left; font-weight: 400; color: var(--gedaempft); padding: 10px 14px; width: 45%;
  border-bottom: 1px solid var(--linie); }
.werte td { padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.werte tr:last-child th, .werte tr:last-child td { border-bottom: 0; }


/* --- Bausteine für Daten, Prüfung, Ergebnisse (M9) --------------------------------------- */
.abschnitt { background: var(--flaeche); border: 1px solid var(--linie); padding: 18px 20px; }
.abschnitt + .abschnitt { margin-top: 16px; }
.abschnitt h3, .figur h3, .rolle h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 4px; }
.figur-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.figur-kopf .klein { margin: 0; max-width: 70ch; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tabelle th { text-align: left; font-weight: 500; color: var(--gedaempft); padding: 8px 10px; border-bottom: 1px solid var(--linie);
  white-space: nowrap; }
.tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle .name { font-weight: 500; }
.tabelle .aktionen { text-align: right; white-space: nowrap; }
.tabelle .aktionen .textknopf + .textknopf { margin-left: 14px; }
.tabelle-rahmen { overflow-x: auto; }
.textknopf-gefahr:hover { color: var(--fehler); }
.werte-eng th, .werte-eng td { padding: 7px 12px; font-size: 0.875rem; }
.werte-eng th { width: 34%; }
.hinweis-box { border-left: 3px solid var(--leitung); background: var(--flaeche); padding: 10px 14px; margin-bottom: 16px;
  font-size: 0.875rem; }
.hinweis-box ul, .liste-hinweise { margin: 6px 0 0; padding-left: 18px; }
.lauf-fehler { margin-top: 10px; padding: 10px 12px; background: #fdf1f0; color: var(--fehler); border-left: 3px solid var(--fehler);
  font-size: 0.875rem; }
.knopf-zweit { height: 36px; padding: 0 16px; border: 1px solid var(--leitung); border-radius: 4px; background: var(--flaeche);
  color: var(--leitung); font: 500 0.875rem/1 "IBM Plex Sans", system-ui, sans-serif; cursor: pointer; }
.knopf-zweit:hover { background: #eef1fd; }
.knopf-zweit:disabled { border-color: var(--linie); color: var(--gedaempft); cursor: not-allowed; background: var(--papier); }
.hochladen { display: inline-block; }

/* Daten */
.rollen { display: grid; gap: 16px; margin-bottom: 24px; }
.rolle { background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--leitung); padding: 16px 20px; }
.rolle-fehlt { border-left-color: var(--fehler); }
.rolle-kopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.rolle-kopf .klein { margin: 0 0 10px; }
.marke-belegt, .marke-fehlt, .marke-optional { font-size: 0.8125rem; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.marke-belegt { background: #eef1fd; color: var(--leitung); }
.marke-fehlt { background: #fdf1f0; color: var(--fehler); }
.marke-optional { background: var(--papier); color: var(--gedaempft); }
.rolle-inhalt { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.rolle-optionen { display: grid; gap: 12px; margin-top: 14px; }
.rolle-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.rolle-aktionen { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rolle-wechsel { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--linie); }
.rolle-bild { min-width: 0; border: 1px solid var(--linie); }
.rolle-kwp { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.rolle-zeitraum { border: 1px solid var(--linie); border-left: 3px solid var(--leitung); padding: 12px 14px; background: #f8f9fe; }
.rolle-zeitraum-titel { font-weight: 600; font-size: 0.9375rem; }
.abgleich { background: #fdf3e6; border: 1px solid #f3d3a8; border-left: 4px solid #a04a00; padding: 14px 18px; margin-bottom: 16px; }
.abgleich strong { color: #7a3800; font-weight: 600; }
.abgleich p { margin: 4px 0 10px; font-size: 0.9375rem; line-height: 1.5; }
.erkannt { font-size: 0.875rem; margin: 6px 0; }
.mantine-Modal-body h4 { font-size: 0.9375rem; font-weight: 600; margin: 20px 0 8px; }
.import-probe-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.import-spalten td { vertical-align: middle; }

/* Prüfung und Simulation */
.lauf-seite { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.lauf-rechts { position: sticky; top: calc(var(--oben, 96px) + 16px); display: grid; gap: 16px; }
.lauf-rechts > div:empty { display: none; }

/* --- Wetter (M12c) ---------------------------------------------------------------------- */
.wetter-suche { display: flex; gap: 8px; margin-top: 12px; }
.wetter-koordinaten { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px;
  margin-top: 12px; }
.wetter-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.wetter-trefferliste { display: grid; gap: 4px; margin-top: 8px; }
.wetter-treffer { font: inherit; font-size: 0.875rem; text-align: left; background: var(--papier); color: var(--tinte);
  border: 1px solid var(--linie); padding: 7px 10px; cursor: pointer; }
.wetter-treffer:hover { border-color: var(--leitung); }
.wetter-treffer:focus-visible { outline: 2px solid var(--leitung); outline-offset: 1px; }
#wetter-karte-ort { margin-top: 12px; }
#wetter-karte { border: 1px solid var(--linie); }
.wetter-eintrag { padding: 10px 0; border-bottom: 1px solid var(--linie); display: grid; gap: 2px; }
.wetter-eintrag:last-child { border-bottom: 0; }
.wetter-eintrag-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wetter-eintrag .wetter-knoepfe { margin-top: 6px; }
.fehlertext { color: var(--fehler); }
.wetter-ansicht { grid-column: 1 / -1; }
.wetter-ansicht:empty { display: none; }
.wetter-titel { font-size: 0.9375rem; font-weight: 600; margin: 16px 0 4px; }
/* --- Fahrzeuge (M14) --------------------------------------------------------------------- */
.fz { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.fz-rechts { position: sticky; top: calc(var(--oben, 96px) + 16px); }
.fz-titel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fz-kopf { display: grid; gap: 3px; }
.fz-kopf .marke-optional, .fz-kopf .marke-fehlt { margin-right: 6px; }
.fz-gruppe { padding: 14px 0 6px; border-top: 1px solid var(--linie); }
.fz-gruppe:first-of-type { border-top: 0; padding-top: 4px; }
.fz-gruppe h4 { font-size: 0.875rem; font-weight: 600; margin: 0 0 8px; color: var(--gedaempft); }
.fz-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px;
  align-items: start; }
.fz-felder-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* Mittel, Streuung, Minimum, Maximum */
.fz-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.fz-suche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.fz-suche > :last-child { grid-column: 1 / -1; }
.fz-trefferliste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.fz-treffer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--papier); border: 1px solid var(--linie); font-size: 0.875rem; }
.fz-plan { margin: 12px 0; padding: 10px 12px; background: var(--papier); border: 1px solid var(--linie); }
.fz-plan ul { margin: 4px 0 0; padding-left: 18px; }
.fz-fahrten .mantine-SegmentedControl-root { margin: 8px 0 10px; }
.fz-suche-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Hinweis auf ungespeicherte Eingaben (ungespeichert.py / ungespeichert.js) */
.ug-marke { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500;
  color: var(--tinte); white-space: nowrap; }
.ug-marke::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leitung); }
.ug-marke[hidden] { display: none; }
.ug-zeile { min-height: 0; margin-top: 12px; }
/* Nur lesen (ohne Recht zum Bearbeiten, felder.nur_lesen): Werte in voller Farbe, Fläche wie Papier */
.nur-lesen .mantine-Input-input { background: var(--papier); cursor: default; }
.nur-lesen .mantine-Switch-label, .nur-lesen .mantine-Checkbox-label { color: var(--tinte); cursor: default; }
.nur-lesen .mantine-Switch-description, .nur-lesen .mantine-Checkbox-description { color: var(--gedaempft); }
.fz-kopf .ug-marke { margin-left: 4px; }
.fz-filter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 10px 12px; margin-bottom: 12px; }
.fz-katalogtabelle { max-height: min(60vh, 640px); overflow: auto; border: 1px solid var(--linie); margin-top: 6px; }
.fz-katalogtabelle thead th { position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
.fz-katalogtabelle td { padding: 6px 10px; white-space: nowrap; }
.fz-katalogtabelle .fz-sortieren { color: inherit; font-weight: 500; }
.fz-katalogtabelle .fz-sortieren:hover { color: var(--leitung); }
.fz-katalogtabelle th[aria-sort="ascending"] .fz-sortieren,
.fz-katalogtabelle th[aria-sort="descending"] .fz-sortieren { color: var(--tinte); font-weight: 600; }
.fz-katalogtabelle tbody tr:hover td { background: var(--papier); }
.pruefungen { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.pruefung { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--linie); font-size: 0.875rem; line-height: 1.45; }
.marke-schwere { font-size: 0.75rem; font-weight: 500; padding: 1px 0; text-align: center; border-radius: 3px; align-self: start; }
.pruefung-fehler .marke-schwere { background: #fdf1f0; color: var(--fehler); }
.pruefung-warnung .marke-schwere { background: #fdf3e6; color: #a04a00; }
.pruefung-gut { padding: 10px 12px; border-left: 3px solid var(--leitung); background: #f6f8fe; font-size: 0.875rem; }
.pruefung-zusammenfassung { font-size: 0.875rem; font-weight: 500; }
.lauf-status { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.status-lauf-laeuft::before, .status-lauf-wartend::before { background: var(--sonne); }
.status-lauf-fertig::before { background: var(--leitung); }
.status-lauf-fehler::before { background: var(--fehler); }
.protokoll { margin-top: 14px; font-size: 0.8125rem; }
.protokoll summary { cursor: pointer; color: var(--gedaempft); }
.protokoll pre { margin: 8px 0 0; padding: 10px; background: var(--papier); border: 1px solid var(--linie); max-height: 260px;
  overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; line-height: 1.5; }

/* Ergebnisse */
.ergebnis-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ergebnis-aktionen { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.figur { background: var(--flaeche); border: 1px solid var(--linie); padding: 18px 20px; margin-bottom: 16px; }
/* Tabellen so breit wie ihr Inhalt: auf breiten Bildschirmen stehen Zahl und Bezeichnung nicht weit auseinander */
.figur .tabelle-rahmen .tabelle { width: auto; min-width: min(100%, 640px); }
.figur-wahl { margin-bottom: 8px; }
.bericht-schalter { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.unterzeile { font-size: 0.8125rem; color: var(--gedaempft); margin: 8px 0 0; }
/* Kennzahlen der Ergebnisse als Karten mit Kante (wie die Kennkarten der Übersicht) */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kachel { padding: 12px 16px; background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 4px solid var(--leitung); border-radius: var(--rund); }
.kachel-name { color: var(--gedaempft); font-size: 0.8125rem; font-weight: 500; }
.kachel-wert { font-size: 1.5rem; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .anmelden { padding: 16px 12px; place-items: start center; }
  .anmelden-karte { grid-template-columns: minmax(0, 1fr); }
  .anmelden-schema { border-right: 0; border-bottom: 1px solid var(--linie); padding: 24px 20px; gap: 18px; }
  .anmelden-schema img { max-width: 340px; }
  .anmelden-schema h1 { font-size: 1.4rem; }
  .anmelden-formular { padding: 28px 20px 32px; }
  .inhalt { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 32px; }
  .projekte .spalte-optional { display: none; }
  .projekt { padding: 0 16px 32px; }
  .projekt-leiste { padding-top: 10px; }
  .projekt-kopf { gap: 4px 12px; }
  .projekt-kopf h1 { font-size: 1.125rem; }
  .projekt-vorlage { display: none; }
  .projekt-leiste .mantine-Tabs-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .projekt-leiste .mantine-Tabs-tab { flex: 0 0 auto; }
  .system { height: auto; min-height: 0; }
  .schema-flaeche { flex: none; height: auto; min-height: 0; overflow-x: auto; }
  .schema-flaeche > div { position: relative !important; inset: auto; }
  .system, .projekt-uebersicht { grid-template-columns: minmax(0, 1fr); }
  .panel { overflow: visible; scroll-margin-top: calc(var(--oben, 96px) + 8px); }  /* unter der Projektleiste */
  .panel-inhalt { overflow: visible; }
  .panel-fuss { position: sticky; bottom: 0; box-shadow: 0 -4px 12px rgba(22, 35, 43, 0.06); }
  .lauf-seite, .rolle-inhalt { grid-template-columns: minmax(0, 1fr); }
  .lauf-rechts { position: static; }
  .wetter-koordinaten { grid-template-columns: minmax(0, 1fr); }
  .fz { grid-template-columns: minmax(0, 1fr); }
  .fz-felder-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fz-rechts { position: static; order: -1; }
  .fz-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fz-filter > :first-child { grid-column: 1 / -1; }
  .figur, .abschnitt, .rolle { padding: 14px; }
  .figur-kopf { flex-direction: column; }
  .bericht-schalter { align-items: flex-start; }
  .tabelle .spalte-optional { display: none; }
}

/* Absende-Knopf des Anmeldeformulars (normales HTML, damit Enter und Passwortmanager greifen) */
.knopf { height: 36px; width: 100%; border: 0; border-radius: 4px; background: var(--leitung); color: #fff;
  font: 600 0.875rem/1 "IBM Plex Sans", system-ui, sans-serif; cursor: pointer; }
.knopf:hover { background: #1d38a3; }

/* --- Bericht ---------------------------------------------------------------------------- */
.bericht-seite { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.bericht-rechts { position: sticky; top: calc(var(--oben, 96px) + 16px); display: grid; gap: 16px; }
.bericht-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.bericht-teil { background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--leitung);
  padding: 12px 16px; }
.bericht-teil-aus { border-left-color: var(--linie); background: #fafbfb; }
.bericht-teil-aus .bericht-felder { display: none; }
.bericht-teil-aus strong { color: var(--gedaempft); font-weight: 500; }
.bericht-teil-kopf { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.bericht-nummer { color: var(--gedaempft); font-variant-numeric: tabular-nums; padding-top: 1px; }
.bericht-art { margin-left: 10px; font-size: 0.75rem; color: var(--gedaempft); border: 1px solid var(--linie);
  border-radius: 10px; padding: 1px 8px; vertical-align: 1px; display: inline-block; white-space: nowrap; }
.bericht-schieben { display: flex; gap: 4px; }
.bericht-teil-kopf .mantine-Checkbox-root, .bericht-teil-kopf .mantine-Checkbox-body { min-width: 0; }
.bericht-teil-kopf .mantine-Checkbox-label { white-space: normal; }
.schiebeknopf { width: 30px; height: 28px; border: 1px solid var(--linie); border-radius: 4px; background: var(--flaeche);
  color: var(--tinte); font: inherit; cursor: pointer; line-height: 1; }
.schiebeknopf:hover:not(:disabled) { border-color: var(--leitung); color: var(--leitung); }
.schiebeknopf:disabled { color: var(--linie); cursor: default; }
.bericht-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px;
  margin: 10px 0 0 36px; }
.bericht-meldung { margin-left: 36px; min-height: 0; }
.bericht-meldung:empty { display: none; }
.bericht-export-meldung { margin-top: 10px; overflow-wrap: anywhere; }
.bericht-logo { max-width: 100%; max-height: 72px; display: block; margin: 8px 0 10px; }
.fehlertext { color: var(--fehler); }
@media (max-width: 900px) { .bericht-seite { grid-template-columns: 1fr; } .bericht-rechts { position: static; }
  .bericht-felder { margin-left: 0; } }

/* --- Kopf mit Menü und Verwaltung (M12) ------------------------------------------------- */
.verwaltung { max-width: 1000px; padding: 28px 32px 56px; display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr); }  /* sonst macht eine breite Tabelle die ganze Seite breit */
.verwaltung-breit { max-width: var(--breite); }
.verwaltung-titel, .seitentitel { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px;
  flex-wrap: wrap; }
.verwaltung-titel h1, .seitentitel h1 { font-size: 1.5rem; font-weight: 600; margin: 0; line-height: 1.25; }
.verwaltung h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 8px; }
.abschnitt-schmal { max-width: 560px; }
.unterueberschrift { font-size: 1rem; font-weight: 600; margin: 8px 0 0; }
.gefahr { border-color: #f1c9c5; }
.gefahr h2, .gefahr h3 { color: var(--fehler); }
.nutzer-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.875rem; }
.nutzer-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leitung); }
.nutzer-aus { color: var(--gedaempft); }
.nutzer-aus::before { background: var(--linie); }
.projekte td.zahl, .projekte th.zahl, .tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.lizenz-tabelle td { vertical-align: middle; }
.projekt-loeschen { margin-top: 8px; }
@media (max-width: 760px) {
  .verwaltung { padding: 20px 16px 40px; }
}
.verwaltung .abschnitt + .abschnitt { margin-top: 0; }
.verwaltung h2 .anzahl { color: var(--gedaempft); font-weight: 400; margin-left: 8px; }

/* --- Monatliche Datenkopie --------------------------------------------------------------- */
.kopie-hinweis { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 32px; background: #eef1fd; border-bottom: 1px solid #d9dffa; font-size: 0.9375rem; }
.kopie-knoepfe { display: flex; gap: 16px; align-items: center; }
.knopf-link { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 4px;
  background: var(--leitung); color: #fff; text-decoration: none; font-weight: 500; font-size: 0.875rem; }
.knopf-link:hover { background: #1d38a3; }
@media (max-width: 760px) { .kopie-hinweis { padding: 10px 16px; } }

/* --- PV-Sim (M15) ------------------------------------------------------------------------- */
.pvsim-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap;
  margin-bottom: 14px; }
.pvsim-kopf h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 2px; }
.pvsim-lauf { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: flex-end;
  min-height: 30px; }
.pvsim-lauf .fehlertext { max-width: 60ch; }
.pvsim > .mantine-Alert-root { margin: 0 0 14px; }
.pvsim-nachricht { position: sticky; top: calc(var(--oben, 96px) + 8px); z-index: 15;
  box-shadow: 0 4px 14px rgba(22, 35, 43, 0.08);
  background: linear-gradient(var(--alert-bg), var(--alert-bg)), var(--flaeche); }  /* deckend über dem Inhalt */
.pvsim-rumpf { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.pvsim-nav { position: sticky; top: calc(var(--oben, 96px) + 16px); display: grid; gap: 2px; background: var(--flaeche);
  border: 1px solid var(--linie); padding: 6px; }
.pvsim-nav-knopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  border: 0; border-radius: 4px; background: none; padding: 9px 10px; font: inherit; font-size: 0.9375rem;
  color: var(--tinte); text-align: left; cursor: pointer; }
.pvsim-nav-knopf:hover { background: var(--papier); }
.pvsim-nav-knopf.aktiv { background: var(--papier); font-weight: 600; box-shadow: inset 3px 0 0 var(--leitung); }
.pvsim-nav-zusatz { color: var(--gedaempft); font-size: 0.8125rem; font-weight: 400; white-space: nowrap; }
.pvsim-inhalt { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  align-content: start; }
.pvsim-inhalt .abschnitt + .abschnitt { margin-top: 0; }
.pvsim-inhalt .figur { margin-bottom: 0; }
.pvsim-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.pvsim-spalte, .pvsim-szene { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0;
  align-content: start; }
.pvsim-zwei > .pvsim-plan, .pvsim-zwei > .pvsim-szene { position: sticky; top: calc(var(--oben, 96px) + 16px); }
.pvsim-gruppe { padding: 14px 0 4px; border-top: 1px solid var(--linie); margin-top: 10px; }
.pvsim-gruppe h4 { font-size: 0.875rem; font-weight: 600; margin: 0 0 8px; color: var(--gedaempft); }
.pvsim-gruppe > .klein { margin: -4px 0 8px; }
.pvsim-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px;
  align-items: start; }
.pvsim-felder-unten { align-items: end; }
.pvsim-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 4px; }
.pvsim-segment { min-width: 0; }
.pvsim-sperr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 8px; align-items: end;
  padding: 8px 0 10px; border-bottom: 1px dashed var(--linie); }
.pvsim-sperr > :first-child { grid-column: 1 / span 4; }
.pvsim-sperr-weg { grid-column: 5; grid-row: 1; justify-self: end; padding-bottom: 6px; }
.pvsim-sperr .mantine-NumberInput-input { padding-right: 22px; }
.pvsim-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.pvsim-aktionen > .klein { flex: 1 1 260px; }
.pvsim-frage-rahmen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pvsim-frage { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.875rem;
  padding: 4px 4px 4px 10px; border-left: 3px solid var(--fehler); background: var(--papier); }
.pvsim-tabelle tr.gewaehlt td { background: var(--papier); }
.pvsim-tabelle tr.gewaehlt td:first-child { box-shadow: inset 3px 0 0 var(--leitung); }
.pvsim-tabelle .marke-fehlt { margin-left: 6px; }
.pvsim-graph { width: 100%; }
.pvsim-plan .figur-kopf { margin-bottom: 4px; }
.pvsim-plan-leer .klein { margin: 4px 0 0; }
.pvsim-wr .fz-titel { margin-bottom: 8px; }
.pvsim-mppt { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--linie); border-left: 3px solid var(--leitung);
  background: var(--flaeche); display: grid; gap: 8px; }
.pvsim-mppt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pvsim-mppt-kopf strong { font-size: 0.875rem; font-weight: 600; }
.pvsim-string .mantine-MultiSelect-label { font-weight: 400; color: var(--gedaempft); }
.pvsim-stufen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px 24px;
  margin-top: 12px; }
.pvsim-stufe { min-width: 0; }
.pvsim-stufe-text { font-size: 0.8125rem; color: var(--gedaempft); margin-top: 6px; line-height: 1.45; }
.pvsim-stufe-text > span { display: block; }
.pvsim-pvlib { display: inline-block; margin-top: 3px; font-size: 0.75rem; color: var(--gedaempft); background: var(--papier);
  padding: 1px 6px; border-radius: 3px; }
.pvsim-stufe .pvsim-felder { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pvsim-erweitert { margin-top: 18px; border-top: 1px solid var(--linie); padding-top: 12px; }
.pvsim-erweitert summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--gedaempft); }
.pvsim-erweitert[open] summary { margin-bottom: 10px; }
.pvsim-kat-suche { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 0.8fr)) auto; gap: 10px 12px;
  align-items: end; }
.pvsim-katalog { max-height: min(60vh, 560px); overflow: auto; border: 1px solid var(--linie); margin-top: 8px; }
.pvsim-katalog thead th { position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
.pvsim-katalog td.name { white-space: normal; min-width: 220px; }
.pvsim-auto { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: 8px; }
.pvsim-summe { margin-top: 12px; padding: 8px 12px; border-left: 3px solid var(--leitung); background: var(--papier);
  font-size: 0.9375rem; }
.pruefung-hinweis .marke-schwere { background: var(--papier); color: var(--gedaempft); }
.pvsim-schalter .mantine-Switch-label { font-weight: 500; }
@media (max-width: 1180px) {
  .pvsim-zwei { grid-template-columns: minmax(0, 1fr); }
  .pvsim-zwei > .pvsim-plan, .pvsim-zwei > .pvsim-szene { position: static; }
}
@media (max-width: 860px) {
  .pvsim-rumpf { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pvsim-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; padding: 4px; }
  .pvsim-nav-knopf { flex: 0 0 auto; width: auto; padding: 8px 10px; }
  .pvsim-nav-knopf.aktiv { box-shadow: inset 0 -2px 0 var(--leitung); }
  .pvsim-nav-zusatz { display: none; }
  .pvsim-lauf { justify-content: flex-start; }
  .pvsim-sperr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pvsim-sperr > :first-child { grid-column: 1 / span 2; }
  .pvsim-sperr-weg { grid-column: 3; }
  .pvsim-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvsim-felder > .pvsim-segment, .pvsim-felder > .mantine-Switch-root { grid-column: 1 / -1; }
  .pvsim-stufen { grid-template-columns: minmax(0, 1fr); }
  .pvsim-kat-suche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvsim-kat-suche > :first-child { grid-column: 1 / -1; }
}

/* --- Rahmen (M17): Seitenleiste, Kopfleiste, Karten – Aufbau wie SB Admin 2, Farben der Plattform ------------ */
.app { display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(90deg, var(--leiste) var(--leiste-breite), transparent 0); }
.app-rumpf { min-width: 0; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Symbole: Linien aus assets/symbole als Maske, gefärbt mit der Textfarbe */
.symbol { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat; }
.symbol-projekte { --symbol: url("symbole/projekte.svg"); }
.symbol-firma { --symbol: url("symbole/firma.svg"); }
.symbol-firmen { --symbol: url("symbole/firmen.svg"); }
.symbol-konto { --symbol: url("symbole/konto.svg"); }
.symbol-bibliothek { --symbol: url("symbole/bibliothek.svg"); }
.symbol-protokoll { --symbol: url("symbole/protokoll.svg"); }
.symbol-abmelden { --symbol: url("symbole/abmelden.svg"); }
.symbol-leiste-ein { --symbol: url("symbole/leiste-ein.svg"); }
.symbol-leiste-aus { --symbol: url("symbole/leiste-aus.svg"); }
.symbol-menue { --symbol: url("symbole/menue.svg"); }
.symbol-pfeil-unten { --symbol: url("symbole/pfeil-unten.svg"); }

/* Seitenleiste: Tinte wie die Sammelschiene im Schema. Jede Gruppe hat eine senkrechte Schiene, jeder Punkt
   hängt mit einer kurzen Leitung daran; der aktive Punkt steht unter Strom (blaue Leitung, Knoten). */
.seitenleiste { position: sticky; top: 0; height: 100vh; box-sizing: border-box; z-index: 40; display: flex;
  flex-direction: column; background: var(--leiste); color: #fff; overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.seitenleiste :focus-visible { outline-color: var(--leitung-hell); }
.leiste-marke { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 18px;
  box-sizing: border-box; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  white-space: nowrap; border-bottom: 1px solid var(--leiste-linie); }
.leiste-marke img { width: 28px; height: 28px; flex: 0 0 auto; }
.leiste-menue { position: relative; flex: 0 0 auto; margin: 14px 0 8px; }
/* die Schiene reicht wie im Schema etwas über den ersten und letzten Abgang hinaus */
.leiste-menue::before { content: ""; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px;
  background: var(--leiste-linie); }
.leiste-punkt { position: relative; display: flex; align-items: center; gap: 12px; margin: 2px 10px 2px 24px;
  padding: 9px 10px; border-radius: var(--rund); color: var(--leiste-text); text-decoration: none;
  font-size: 0.9375rem; white-space: nowrap; }
.leiste-punkt::before { content: ""; position: absolute; left: -7px; top: calc(50% - 1px); width: 7px; height: 2px;
  background: var(--leiste-linie); }
.leiste-punkt:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.leiste-punkt.aktiv { color: #fff; font-weight: 600; background: rgba(255, 255, 255, 0.09); }
.leiste-punkt.aktiv::before { background: var(--leitung-hell); }
.leiste-punkt.aktiv::after { content: ""; position: absolute; left: -12px; top: calc(50% - 4px); width: 8px; height: 8px;
  border-radius: 50%; background: var(--leitung-hell); }
.leiste-unterpunkt { margin: -2px 10px 4px 56px; padding: 2px 0 6px 12px; border-left: 2px solid var(--leitung-hell);
  font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leiste-umschalter { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin: auto 10px 14px; padding: 9px 12px;
  border: 0; border-radius: var(--rund); background: none; color: var(--leiste-text); font: inherit; font-size: 0.875rem;
  cursor: pointer; text-align: left; }
.leiste-umschalter:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.leiste-umschalter .symbol-leiste-aus { display: none; }
.leiste-schleier { display: none; }

/* Eingeklappt: nur Symbole (Namen bleiben für Vorlesesoftware und als Tooltip); unter 1.200 px ohne eigene Wahl */
@media (min-width: 760px) {
  html.leiste-eng .app { grid-template-columns: var(--leiste-eng) minmax(0, 1fr);
    background: linear-gradient(90deg, var(--leiste) var(--leiste-eng), transparent 0); }
  html.leiste-eng .seitenleiste .leiste-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
  html.leiste-eng .leiste-marke { justify-content: center; padding: 0; }
  html.leiste-eng .leiste-menue::before, html.leiste-eng .leiste-punkt::before,
  html.leiste-eng .leiste-punkt::after { display: none; }
  html.leiste-eng .leiste-punkt { justify-content: center; margin: 2px 12px; padding: 10px 0; }
  html.leiste-eng .leiste-punkt.aktiv { box-shadow: inset 3px 0 0 var(--leitung-hell); }
  html.leiste-eng .leiste-unterpunkt { display: none; }
  html.leiste-eng .leiste-umschalter { justify-content: center; padding: 10px 0; margin: auto 12px 14px; }
  html.leiste-eng .leiste-umschalter .symbol-leiste-ein { display: none; }
  html.leiste-eng .leiste-umschalter .symbol-leiste-aus { display: inline-block; }
}

/* Kopfleiste über dem Inhalt */
.kopfleiste { display: flex; align-items: center; gap: 12px; height: 64px; box-sizing: border-box; padding: 0 32px;
  background: var(--flaeche); border-bottom: 1px solid var(--linie); box-shadow: 0 1px 3px rgba(22, 35, 43, 0.04); }
.kopf-menueknopf { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto;
  margin-left: -8px; border: 0; border-radius: var(--rund); background: none; color: var(--tinte); cursor: pointer; }
.kopf-menueknopf:hover { background: var(--papier); }
.kopf-menueknopf .symbol { width: 22px; height: 22px; }
.kopf-firma { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutzer-knopf { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px; margin-right: -8px;
  border: 0; border-radius: var(--rund); background: none; color: var(--tinte); font: inherit; cursor: pointer; }
.nutzer-knopf:hover, .nutzer-knopf[aria-expanded="true"] { background: var(--papier); }
.nutzer-text { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; line-height: 1.3; }
.nutzer-name { font-size: 0.875rem; font-weight: 500; max-width: 28ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.nutzer-rolle { font-size: 0.75rem; color: var(--gedaempft); }
.nutzer-zeichen { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  background: var(--leiste); color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }
.nutzer-knopf .symbol { width: 16px; height: 16px; color: var(--gedaempft); }
.nutzer-menue-kopf { padding: 2px 0 4px; }
.nutzer-menue-email { color: var(--tinte); font-size: 0.875rem; font-weight: 500; overflow-wrap: anywhere; }
.mantine-Menu-item .symbol { width: 18px; height: 18px; color: var(--gedaempft); }

/* Karten: weiße Fläche, feine Kante, leichter Schatten; Titel im Kopfstreifen */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten);
  min-width: 0; overflow: hidden; }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px;
  background: var(--karte-kopf); border-bottom: 1px solid var(--linie); }
.karte-kopf h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.karte-rumpf { padding: 2px 20px 6px; }
.karte-rumpf-voll { padding: 16px 20px 14px; }
.karte-rumpf-voll > .leer { border: 0; padding: 4px 0; }
.werte-in-karte { border: 0; border-radius: 0; box-shadow: none; }
.figur-kopf > .mantine-Button-root { flex-shrink: 0; }
.pvsim-nav { border-radius: var(--rund); box-shadow: var(--schatten); }
.karte .projekte { border: 0; }
.karte .vorlagen { border-top: 0; }
.karte .vorlagen li:last-child { border-bottom: 0; }
.karte > .leer, .karte .mantine-Tabs-panel > .leer { border: 0; border-radius: 0; }
.karte-projekte .mantine-Tabs-list { padding: 0 12px; background: var(--karte-kopf); }
.karte-projekte .mantine-Tabs-panel { padding-top: 0 !important; }
.karte-tabelle { overflow-x: auto; }
.abschnitt, .figur, .rolle, .panel, .system-schema, .bericht-teil, .projekte, .werte { border-radius: var(--rund); }
.abschnitt, .figur, .rolle, .panel, .system-schema { box-shadow: var(--schatten); }
.werte, .projekte { border-collapse: separate; border-spacing: 0; overflow: hidden; }
.figur > .figur-kopf:first-child, .abschnitt > h2:first-child, .abschnitt > h3:first-child,
.abschnitt > .abschnitt-kopf:first-child, .abschnitt > .figur-kopf:first-child, .abschnitt > .fz-titel:first-child {
  margin: -18px -20px 14px; padding: 12px 20px; background: var(--karte-kopf); border-bottom: 1px solid var(--linie);
  border-radius: var(--rund) var(--rund) 0 0; }
.abschnitt > h2:first-child, .abschnitt > h3:first-child { font-size: 1rem; }
.figur > .figur-kopf:first-child h3 { margin-bottom: 2px; }
.abschnitt > .abschnitt-kopf:first-child { align-items: center; }
.abschnitt > .abschnitt-kopf:first-child h2, .abschnitt > .figur-kopf:first-child h3,
.abschnitt > .fz-titel:first-child h3 { font-size: 1rem; margin: 0; }

/* Kennkarten (Zahl mit farbiger Kante): Übersicht und Verwaltung */
.kennkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.kennkarte { min-width: 0; padding: 14px 18px; background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 4px solid var(--ruhig); border-radius: var(--rund); box-shadow: var(--schatten); }
.kennkarte-leitung { border-left-color: var(--leitung); }
.kennkarte-sonne { border-left-color: var(--sonne); }
.kennkarte-fehler { border-left-color: var(--fehler); }
.kennkarte-name { font-size: 0.8125rem; font-weight: 500; color: var(--gedaempft); }
.kennkarte-wert { font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kennkarte-zusatz { font-size: 0.8125rem; color: var(--gedaempft); margin-top: 2px; }
.kennkarten:empty { display: none; }

/* Seite oder Projekt fehlt (404) bzw. kein Zugang (403) */
.inhalt-schmal { padding: 56px 32px; }
.fehlt { max-width: 560px; }
.fehlt-code { font-size: 4.5rem; font-weight: 600; line-height: 1; color: var(--linie); letter-spacing: -0.02em; }
.fehlt h1 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: 14px 0 22px; }

/* Handy: Seitenleiste schiebt sich über den Inhalt, Kopfleiste mit Menüknopf */
@media (max-width: 759px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .seitenleiste { position: fixed; top: 0; bottom: 0; left: 0; height: auto; width: min(18rem, 86vw);
    transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25); }
  html.leiste-offen .seitenleiste { transform: none; visibility: visible; transition: transform 0.2s ease; }
  html.leiste-offen .leiste-schleier { display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(22, 35, 43, 0.45); }
  html.leiste-offen { overflow: hidden; }
  .leiste-umschalter { display: none; }
  .kopf-menueknopf { display: inline-flex; }
  .kopfleiste { height: 56px; padding: 0 12px 0 16px; }
  .nutzer-text { display: none; }
  .kennkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kennkarte { padding: 10px 12px; }
  .kennkarte-wert { font-size: 1.375rem; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kachel { padding: 10px 12px; }
  .kachel-wert { font-size: 1.25rem; }
  .inhalt-schmal { padding: 32px 16px; }
}
@media (max-width: 860px) {  /* dort haben Figuren und Abschnitte 14 px Innenabstand */
  .figur > .figur-kopf:first-child, .abschnitt > h2:first-child, .abschnitt > h3:first-child,
  .abschnitt > .abschnitt-kopf:first-child, .abschnitt > .figur-kopf:first-child, .abschnitt > .fz-titel:first-child {
    margin: -14px -14px 12px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .seitenleiste, html.leiste-offen .seitenleiste { transition: none; }
}