/* Sollkurven — Layout-Basis.
   Nutzt das geteilte Design-System (tokens.css) aus der ProKASRO Suite.
   Aufbau: vertikaler Stack — Header / Config-Panel / Tab-Bar / Content.
   Content scrollt, der Rest bleibt fix oben. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
}

.pp-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--flaeche);
    color: var(--text);
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-sm);
    overflow: hidden;
}

/* Konfigurations-Knopf + Werkzeug-Leiste (Drucken/Export/Import/Sprache) sind
   seit dem 15.08.2026 der Kit-Knopf in seiner INSTRUMENTEN-Variante
   (.btn.btn-instrument, buttons.css) — optisch die frühere Pille, jetzt als
   benannte Variante des einen Knopfs (Chris: „ich will immer nur einen
   Button"). Zustand „Schublade offen" (.active) kommt aus dem Kit. Hier nur
   KONTEXT: die Position in der Leiste. */
#pp-config-btn {
    align-self: center;
    margin-left: var(--abstand-12);
}
.pp-config-summary {
    font-size: var(--schrift-sm);
    color: var(--text);
    align-self: center;
    margin-left: calc(var(--abstand-8) + var(--abstand-10));
}
.pp-config-summary[hidden] { display: none; }

/* === Konfigurations-Drawer (klappt unter der Tab-Leiste auf/zu) === */
.pp-config-drawer {
    flex-shrink: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--flaeche-erhaben);
    transition: max-height 0.25s ease, border-bottom-width 0.25s ease;
    border-bottom: 0 solid var(--linie);
}
.pp-config-drawer.open {
    max-height: 640px;   /* Platz für Eingaben + Rechenweg + KPI-Zeile (P-018) */
    border-bottom-width: 1px;
}
.pp-config-drawer-inner {
    /* Aussen je 4 px mehr, Reihen-Abstand bleibt 16 (Chris 10.08.2026, zweiter
       Anlauf): 24 px ZWISCHEN den Reihen war zu viel — Eingabe und Ergebnis
       fielen auseinander. Stattdessen mehr Luft nach aussen; die beiden
       Reihen ruecken dadurch als Paar in die Mitte des Schubfachs, und die
       Trennung traegt nicht der Spalt, sondern der Rahmen. */
    padding: 26px var(--abstand-24) 34px;   /* unten mehr als oben: die Chip-Reihe braucht Standfläche (Chris, am Bild in 2-px-Schritten) */
    display: flex;
    flex-direction: column;
    gap: var(--abstand-16);
}
.pp-config-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-16);
}
.pp-cfg-row {
    display: flex;
    flex-wrap: wrap;
    /* 10 statt 16 (Chris 10.08.2026: "alles etwas enger zusammen") — die
       Felder tragen ihre Luft seit der Breiten-Regel ohnehin selbst (+20 px
       am Etikett), der Reihen-Abstand kam obendrauf und wirkte doppelt. */
    gap: var(--abstand-10);
    align-items: flex-end;
}
/* Die zwei Kaestchen (Peroxid, Grundwasser) sind eine GRUPPE in Reihe 1:
   enger zueinander als die Felder und mit deutlichem Abstand zur Feldkette —
   der Blick liest "sechs Felder, dann zwei Haken". Sie sitzen auf der
   Feld-Unterkante, damit die Reihe eine gemeinsame Grundlinie hat.
   (Als Kit-Schalter gebaut und am 10.08. verworfen — Begruendung im Markup.) */
.pp-haken-gruppe {
    display: flex;
    align-items: center;
    gap: var(--abstand-16);
    margin-left: var(--abstand-20);
    height: 34px;
}
.pp-haken {
    display: flex;
    align-items: center;
    gap: var(--abstand-8);
    white-space: nowrap;
    font-size: var(--schrift-sm);
    color: var(--text);
    cursor: pointer;
}
.pp-config-calc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-40);
    align-items: flex-start;
    padding-top: var(--abstand-12);
}
/* Ohne Fehler ist der Bereich leer — dann komplett aus dem Layout nehmen,
   sonst frisst er Flex-Gap + Padding zwischen Eingaben und KPI-Reihe */
.pp-config-calc:empty { display: none; }

/* === Eingabe-Felder — Look kommt aus dem UI-Kit (.feld/.feld-etikett/.eingabe/
   .auswahl/.schalter, css/ui-kit.css). Hier nur, was tool-eigen ist. === */
/* EINE BREITEN-REGEL für Felder UND Chips (Chris 10.08.2026):
       Breite = was der Inhalt braucht — oder das Label, wenn es länger ist —
       plus 20 px Luft.
   Sie ersetzt die festen Pixelwerte vom selben Tag (franzoesisches Label
   + 5 px). Der Tausch ist Absicht: Feste Werte galten in JEDER Sprache
   gleich, mussten aber bei jeder Label-Aenderung neu ausgemessen werden.
   Die Regel rechnet der Browser selbst — sie veraltet nie und faellt pro
   Sprache so kompakt aus, wie diese Sprache es zulaesst. Preis: Die Zeile
   sitzt in DE schmaler als in FR. Bewusst so entschieden.
   Technisch: Die Huelle nimmt `max-content` (= das breiteste Kind), das
   Etikett traegt die 20 px, die Zahlenfelder ein `size` im Markup — ohne
   das melden sie ihre Browser-Vorgabe von ~20 Zeichen an und gewaennen
   immer. Auswahlfelder bringen ihr Mass von der laengsten Option mit. */
.pp-cfg-row .feld { width: max-content; }
.pp-cfg-row .feld-etikett { white-space: nowrap; padding-right: 20px; }
/* Ausnahme mit Grund: Im Anlagen-Feld steht der lange Geraetename IM Feld.
   Nach der Regel waere die Huelle ~490 px breit und riebe die Zeile auf;
   440 px zeigen das Wesentliche, den Rest kuerzt der Browser. */
.pp-fw-anlage { width: 440px; }
/* === KPI-Reihe (unterste Zeile im Konfigurations-Drawer, P-018) ===
   Karten im Mini-KPI-Format wie der Tabellenwert-Block darüber;
   die Geschwindigkeit als farbiger Hero. */
.pp-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-20);   /* Gruppen-Abstand > Chip-Abstand: die Trennung traegt der Weissraum */
}
/* Zwei beschriftete Gruppen (10.08.2026): der Punkt traegt die Kanalfarbe
   der Chart-Legende — dieselbe Zuordnungs-Sprache, ein Blick genuegt. */
.pp-kpi-gruppe { display: flex; flex-direction: column; gap: 6px; }
.pp-kpi-gruppe-kopf {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--schrift-2xs);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-leise);
}
.pp-kpi-punkt { width: 7px; height: 7px; border-radius: 50%; }
.pp-kpi-chips { display: flex; flex-wrap: wrap; gap: var(--abstand-6); }
/* Hero = Vollflaeche in der Kanalfarbe. Am 10.08.2026 als "eine Stufe
   leiser" probiert (Wert farbig statt Flaeche) und von Chris am Bild
   VERWORFEN — "vorher war besser": Die eine Antwort des Tools darf
   dominieren, gerade WEIL die Gruppen-Punkte jetzt ordnen. Nicht wieder
   anbieten. Doppel-Klassen-Selektor noetig: schlaegt die spaeter definierte
   .pp-mini-kpi-Grundregel (gleiche Spezifitaet wuerde sonst verlieren) */
.pp-mini-kpi.pp-kpi-hero {
    background: var(--c-speed);
    border-color: var(--c-speed);
}
.pp-mini-kpi.pp-kpi-hero .pp-mini-kpi-value { color: var(--text-auf-akzent); }
.pp-mini-kpi.pp-kpi-hero .pp-mini-kpi-label { color: var(--text-auf-akzent); opacity: 0.85; }

.pp-muted { color: var(--text-leise); }

/* Mini-KPI-Karten — Format der Ergebnis-KPI-Reihe im Drawer (P-018) */
.pp-mini-kpi {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 0;
    /* Dieselbe Regel wie die Felder (Chris 10.08.2026): Inhalt oder Label,
       je nachdem was laenger ist, plus 20 px Luft — hier als 2 x 10 Polster.
       Die fruehere `min-width: 96px` ist ersatzlos raus: Sie blies kurze
       Chips ("+30 mbar") kuenstlich auf und war die einzige Stelle, an der
       eine Breite nicht aus dem Inhalt kam. */
    padding: var(--abstand-8) var(--abstand-10);
    width: max-content;
}
.pp-mini-kpi-value {
    font-family: var(--schriftart-mono);
    font-size: 14px;   /* -2px gegenüber text-md, etwas zurückgenommen */
    font-weight: var(--gewicht-leicht);
    color: var(--text);
    line-height: 1.1;
}
.pp-mini-kpi-label {
    font-size: var(--schrift-2xs);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-gedaempft);
    margin-top: var(--abstand-4);
}
.pp-error {
    color: var(--fehler);
    background: var(--karte);
    border: 1px solid var(--fehler);
    border-radius: 0;
    padding: var(--abstand-16);
}

/* === Original-Tabelle === */
.pp-table-caption {
    font-size: var(--schrift-sm);
    font-weight: var(--gewicht-normal);
    color: var(--text);
    margin-bottom: var(--abstand-16);
    line-height: 1.4;
}
.pp-table-title {
    font-size: var(--schrift-xs);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-gedaempft);
    margin: var(--abstand-16) 0 var(--abstand-8);
    font-weight: var(--gewicht-halbfett);
}
.pp-table-scroll { overflow-x: auto; }
.pp-table {
    border-collapse: collapse;
    font-size: var(--schrift-sm);
    font-variant-numeric: tabular-nums;
}
.pp-table th, .pp-table td {
    border: 1px solid var(--linie);
    padding: var(--abstand-12) var(--abstand-24);
    text-align: center;
    min-width: 96px;
    height: 40px;
}
.pp-table th {
    background: var(--flaeche-gehoben);
    color: var(--text-gedaempft);
    font-weight: var(--gewicht-halbfett);
    white-space: nowrap;
}
.pp-table .pp-row-label {
    text-align: left;
    color: var(--text-gedaempft);
    white-space: nowrap;
    background: var(--flaeche-gehoben);
}
.pp-table td { color: var(--text); }
.pp-cell-zero { color: var(--text-leise); background: var(--vertieft); }
.pp-cell-active {
    background: var(--akzent);
    color: var(--text-auf-akzent);
    font-weight: var(--gewicht-fett);
}

/* === Charts (ECharts braucht explizite Höhe) === */
.pp-chart {
    height: 350px;
    margin-bottom: var(--abstand-16);
    background: var(--vertieft);
    border-radius: 0;
    padding: var(--abstand-8);
    /* Ziehen im Chart schiebt das Bild (P-023). Waagerecht gehört die Geste
       uns, senkrecht der Seite (pan-y); und ohne user-select startet jede
       Zieh-Geste zusätzlich eine Textauswahl — Sollkurven ist KEIN
       Cockpit-Familienmitglied, die K5-Regel des Kits greift hier nicht,
       deshalb punktuell. */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
/* Die Maßstab-Leiste (P-023) wohnt im Mount #pp-zeitleiste — Optik aus dem
   Kit-Baustein css/zeitleiste.css, Markup aus charts.js. Der Mount ist ein
   Flex-Geschwister unterm scrollenden Content, wie vorher die Zoombar. */
.zeitleiste-mount {
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
}

/* Tab-Leiste + Pills kommen jetzt aus dem UI-Kit: .tabs / .tab / .tab-pill-* (css/ui-kit.css). */

/* Modal kommt jetzt aus dem UI-Kit: .modal* (css/ui-kit.css). */

/* Settings-Felder — Look identisch zum Dashboard */
.pp-settings-section { margin-bottom: var(--abstand-16); }
.pp-settings-section:last-child { margin-bottom: 0; }
.pp-settings-label {
    display: block;
    font-size: var(--schrift-xs);
    font-weight: var(--gewicht-mittel);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-leise);
    margin-bottom: 8px;
}

/* Sprach-Dropdown kommt jetzt aus dem UI-Kit: .user-menu / .user-menu-item /
   .user-menu-check (css/ui-kit.css). lang-menu.js verankert es weiter per fixed
   top/right an der „Sprache"-Pille (ID #pp-lang-menu bleibt). */

/* Buttons kommen jetzt aus dem UI-Kit: .btn / .btn-primaer / .btn-symbol (css/ui-kit.css). */

/* === Content (scrollt) === */
.pp-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--abstand-24);
    min-height: 0;
}
.pp-tab-panel { display: block; }
.pp-tab-panel[hidden] { display: none; }

/* Freitext-Eingabe im Druck-Modal (Projekt/Haltung). Eigene Klasse statt der
   früheren Select-Optik: ein Textfeld trägt keinen Dropdown-Pfeil. */
.pp-print-input {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    background: var(--eingabe);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    color: var(--text);
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-sm);
    padding: 0 var(--abstand-12);
}
.pp-print-input::placeholder { color: var(--text-leise); }
.pp-print-input:focus { border-color: var(--akzent); outline: none; }

/* Checkbox-Zeilen im Druck-Modal */
.pp-print-check {
    display: flex;
    align-items: center;
    gap: var(--abstand-8);
    padding: var(--abstand-4) 0;
    font-size: var(--schrift-sm);
    color: var(--text);
    cursor: pointer;
}
.pp-print-check input { cursor: pointer; }

/* Disabled-Look kommt aus dem UI-Kit (.btn:disabled). */