/* Widget-Stile — Charts, Gauges, Lampen, KPIs (responsive für 15" und größer) */

/* === WIDGET-CONTAINER === */

/* .kachel + .kachel-kopf wohnen seit C2 (09.08.2026) in der Cockpit-Schicht
   (ui-kit.css, Quelle bausteine/cockpit.css) — die Werte STAMMEN von hier und
   sind unveraendert dorthin gezogen. Wer sie aendern will, aendert sie in der
   Werkstatt; dann zieht Pitwall mit. */

.widget-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

/* Soll-Kanäle: ein Strich statt eines Punktes — die Sollkurve ist seit dem
   1:1-Umbau (13.08.) eine 2-px-Linie in Kanalfarbe, die Legende zeigt also
   Farbe UND Form der Kurve: gleiche Höhe, kantig, voll deckend. Die 5-px-
   Band-Fassung mit 55 % gehörte zur alten Band-Optik. */
.widget-indicator.ist-linie {
    width: 14px;
    height: 2px;
    border-radius: 0;
}

.widget-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
}

/* === KPI-Card (Temp 1/2/3) === */

.kpi-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    flex: 1;
}

/* Die Hero-Zahl kommt aus der Cockpit-Schicht (Mono, leicht, dieselbe
   clamp-Spanne). LOKAL bleibt, was nur hier gilt: die feine Laufweite und die
   Grundfarbe (kpi.js setzt sie je Kanal ohnehin inline; die Regel ist der
   Rueckfall, falls das mal nicht passiert). */
.kpi-stack .hero-zahl {
    color: var(--text-widget);
    letter-spacing: 0.02em;
    /* Kleiner als die Cockpit-Vorgabe (Chris 13.08.): Die vier Temperaturen
       sind Begleitwerte, nicht die Hauptdarsteller der Seite — die Ringe sind
       es. Bewusst LOKAL und nicht in der Cockpit-Schicht: Pitwalls Hero-Zahlen
       sind dort die Hauptsache und bleiben gross. */
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
}

.kpi-unit {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-xs);
    letter-spacing: var(--laufweite);
    color: var(--text-gedaempft);
    text-transform: uppercase;
    margin-top: 4px;
}

/* === Gauge (Speed / Pressure / Distance) === */

.gauge-svg {
    /* 184 px Element = 180 px sichtbare Aussenkante (Chris 14.08.): Die Ticks
       enden im 200er-viewBox bei r=98, der sichtbare Kreis ist also 196 von
       200 Einheiten — 180 x 200/196 = 184. */
    width: 184px;
    height: 184px;
    max-width: 100%;
    max-height: 100%;
}

.gauge-track {
    stroke: var(--border-widget);
    /* 4 statt 5 px (Chris 13.08.): Bahn und Wertbogen liegen aufeinander und
       aendern sich deshalb IMMER gemeinsam — sonst blitzt die Bahn unter dem
       Wert hervor. Gilt auch fuer den Lage-Ring, der dieselbe Klasse traegt. */
    stroke-width: 4;
    fill: none;
}

.gauge-fill {
    stroke-width: 4;
    fill: none;
    stroke-linecap: butt;
    transform: rotate(-90deg);
    transform-origin: center;
    /* SVG-Attribut pathLength="100" im Markup normalisiert die Pfadlänge auf 100,
       deshalb arbeiten wir hier in Prozent — unabhängig vom tatsächlichen Radius. */
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.4s ease;
}

/* Soll-Korridor auf der Skala (D-079). Hier steht nur die GEOMETRIE — die
   Farbe setzt gauge.js je Ring, weil jeder Kanal sein eigenes Pastell-
   Geschwister hat (`--c-korridor-druck` / `--c-korridor-speed`). Ein globaler
   Ton im CSS gab dem blauen Geschwindigkeits-Ring eine cyane Marke.
   Die Töne sind eigene Tokens und keine Deckkraft: Eine Farbe, die nur durch
   Transparenz entsteht, wandert mit dem Untergrund mit und steht in keiner
   Farbtabelle. */
.gauge-korridor {
    fill: none;
    stroke-width: 4;    /* Chris 14.08.: 1 px schmaler als die 5 des ersten Wurfs */
    stroke-linecap: butt;
    transform: rotate(-90deg);
    transform-origin: center;
    /* ECHTE Transparenz, kein vorgemischter Ton: Die Skalenstriche sollen
       durch das Segment durchscheinen (Chris' Wahl an der Ringkarte, 13.08.).
       60 % ist am echten Werkzeug ZWEIMAL bestätigt: 40 % war probiert und
       kam zurück — „sieht unsauber aus, wenn das so halb durchschimmert".
       Die Kanten darunter bleiben voll — sie sind die Grenze, das hier ist
       die Zone. */
    opacity: 0.6;
}

.gauge-korridor-kante {
    stroke-width: 1.6;
}

/* Die Marke bleibt schlank; Sichtbarkeit kommt aus der Farbe (Kanalton statt
   Pastell), nicht aus der Dicke — dick und lang war probiert und verworfen. */
.gauge-soll-marke {
    stroke-width: 2;
}

.gauge-ticks line {
    stroke: var(--text-leise);
    stroke-width: 1;
    opacity: 0.5;
}

.gauge-ticks line.gauge-tick-major {
    stroke: var(--text-gedaempft);
    stroke-width: 1.2;
    opacity: 0.85;
}

.gauge-value {
    font-family: var(--schriftart-mono);
    font-weight: var(--gewicht-leicht);
    font-size: var(--schrift-xl);
    fill: var(--text-widget);
    text-anchor: middle;
    dominant-baseline: middle;
}

.gauge-unit {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-2xs);
    letter-spacing: 0.12em;
    fill: var(--text-gedaempft);
    text-anchor: middle;
    text-transform: uppercase;
    dominant-baseline: middle;
}

/* === Kanal (Entfernung als Abbild, PROBE 13.08.2026) ===
   Das Rohr ist EIN Element mit zwei Rändern — oben eine Linie, unten eine
   Linie, dazwischen der Innenraum. Bewusst als `border` und nicht als zwei
   eigene Elemente: So kann die Höhe des Rohrs nie von der Position der Linien
   abweichen, und was dazwischen liegt, liegt garantiert dazwischen.
   Darin fährt die Lampenkette von links (weitester Punkt) nach rechts (Truck),
   die Meterzahl fährt mit. Kein Balken, keine Skala: ein Bild. */

.kanal-body {
    /* Naeher an den Rand als die Kacheln daneben (Chris 13.08.): Das Rohr soll
       die Breite wirklich nutzen — es ist ein Abbild des Kanals, kein Diagramm
       mit Achsenrand. */
    padding: 0 2px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--abstand-16);
}

.kanal {
    position: relative;
    flex: 1;
    height: 26px;                                   /* Rohr-Innenraum */
    border-top: 1px solid var(--border-widget);     /* die obere Wand */
    border-bottom: 1px solid var(--border-widget);  /* die untere Wand */
}

/* Die Kette: Meterzahl, dann die Kern-Blöcke — beides IM Rohr. */
.kanal-kette {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--abstand-8);
    white-space: nowrap;
    line-height: 1;
}

.kanal-meter {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-xs);
    color: var(--text-widget);
    /* 1 px hoeher als die Bloecke: Mono-Ziffern haben unter der Grundlinie
       Luft, die optische Mitte liegt darueber. Rechnerisch mittig sitzt die
       Zahl deshalb einen Hauch zu tief (Chris am Bild, 13.08.). */
    position: relative;
    top: -1px;
}

.kanal-kerne {
    display: flex;
    gap: 3px;
}

.kanal-ende {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-xs);
    color: var(--text-leise);
    white-space: nowrap;
}

/* Farblos mit Absicht: Die Kette ist kein Messwert, sondern der Gegenstand. */
.kanal-kern {
    width: 16px;
    height: 8px;
    border-radius: 1px;
    background: var(--text-leise);
}

/* Lage-Instrument: Das Fenster stanzt die Zahl aus der Horizont-Linie aus —
   es liegt ueber der Linie und unter der Ziffer, damit die Linie um jeden
   Winkel drehen kann, ohne die Zahl zu schneiden.
   DER TON WIRD GEERBT, nicht benannt: `background-color` der umgebenden
   `.kachel` durchreichen statt `--vertieft` zu wiederholen. Ein zweiter
   Token-Name kann abweichen, sobald die Kachel ihren Grund wechselt — genau
   das war am 13.08. am Bild sichtbar. */
.w-lage { --fenster-ton: var(--vertieft); }

/* Die Horizont-Linie in demselben Blau-Grau wie die Zeitmarke (Chris 13.08.):
   Die Lage ist eine Auskunft ueber die Anlage, kein Messkanal — sie braucht
   keine eigene Kanalfarbe. */
/* Die Linie ist der WERT des Instruments — und trägt Farbe wie die Werte der
   Ringe daneben (Blau, Cyan). Violett: die Farbe der Entfernung, deren Platz
   die Lage geerbt hat (so stand es im Kopf von lage.js seit 13.08., gebaut war
   aber Grau — Wert und Kranz waren nicht zu unterscheiden). Chris 17.08.2026.
   Keine Zustandsfarbe (grün/rot je Winkel): das wäre eine Bewertung ohne
   Grundlage, solange die SPS keinen Winkel liefert. */
.lage-linie { stroke: var(--c-distance); stroke-width: 2.8; }
.lage-fenster { fill: var(--fenster-ton, var(--vertieft)); }

/* Etwas kleiner als die Ring-Werte: Der Winkel ist eine Nebenauskunft, das
   Bild der schiefen Linie ist die Hauptaussage. */
.lage-zahl { font-size: var(--schrift-lg); }

/* === Chart-Container (für ECharts) === */

.chart-container {
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    position: relative;   /* Anker für .chart-cursor-Overlay */
}

/* Cursor-Linie als reines DOM-Overlay über dem ECharts-Canvas — nicht als
   markLine in ECharts, damit der Scrubber-Drag ECharts nicht neu rendern
   muss. Position wird per `chart.convertToPixel(...)` in JS gesetzt, hier
   nur die Optik. transform statt left für GPU-Beschleunigung. z-index muss
   über dem ECharts-Canvas liegen (das ECharts selbst in den Container
   einfügt). pointer-events: none, damit Maus-Events ggf. an die Canvas
   durchgehen. */
.chart-cursor {
    position: absolute;
    /* Beginnt AUF der obersten Gitterlinie, nicht darueber (Chris 14.08.):
       6 px ist GRID.top beider Charts — dort faengt die Zeichenflaeche an, und
       weil die oberste Splitline auf dem Achsen-Maximum liegt, ist das genau
       die Linie. Mit 4 px standen zwei Pixel darueber hinaus.
       ACHTUNG, verstecktes Paar: Diese 6 und die 22 unten sind GRID.top und
       GRID.bottom aus chart-temp.js / chart-speed-pressure.js. Wer das Grid
       dort aendert, zieht hier nach — sonst passt die Marke still nicht mehr. */
    top: 6px;
    /* Endet auf der Achsenlinie statt darunter herauszulaufen (Chris 13.08.:
       „soll nicht so plump unten raus laufen"). 22 px ist GRID.bottom beider
       Charts — die Marke hoert damit genau dort auf, wo die Zeichenflaeche
       aufhoert, und stoert die Zeitbeschriftung nicht. */
    bottom: 22px;
    left: 0;
    width: 1px;
    /* Blau-grau statt Weiss (Chris 13.08.): Die Zeitmarke ist Orientierung,
       kein Messwert — sie soll die Kurven nicht ueberstrahlen, aber zur kuehlen
       Farbwelt der Charts gehoeren. */
    background: var(--linie-stark);
    opacity: 0.9;
    pointer-events: none;
    transform: translateX(-100%);
    will-change: transform;
    z-index: 2;
}

.chart-cursor[hidden] {
    display: none;
}

/* Header-Legende für Charts */
.widget-header-legend {
    display: flex;
    align-items: center;
    gap: var(--abstand-12);
    font-size: var(--schrift-xs);
    letter-spacing: var(--laufweite);
    text-transform: uppercase;
    color: var(--text-gedaempft);
    margin-bottom: 16px;
    flex-shrink: 0;
}

.widget-header-legend .legend-item {
    display: flex;
    align-items: center;
    gap: var(--abstand-6);
}

/* Luft zwischen den zwei Gruppen (Chris 13.08.): Ist und Soll sind zwei
   Aussagen — Wirklichkeit und Plan —, kein durchlaufendes Band. Der Abstand
   sitzt am ERSTEN Soll-Eintrag, damit er auch dann stimmt, wenn die
   Soll-Legende versteckt ist (Aufnahme ohne Vorgabe: kein Loch am Ende). */
.widget-header-legend .legend-soll:not([hidden]) ~ .legend-soll {
    margin-left: 0;
}
.widget-header-legend .legend-ist + .legend-soll {
    margin-left: var(--abstand-16);
}

/* KEIN MARKIEREN: steht als Familien-Regel im Cockpit-Kit (K5) und gilt fürs
   ganze Werkzeug — hier stand bis 09.08.2026 eine kachelweise Aufzählung.

   TOUCH: Waagerecht gehört die Geste uns (Zeitachse schieben), senkrecht der
   Seite (scrollen). `pan-y` sagt genau das. Die Bahn bringt ihre Regel aus
   dem Kit-Baustein zeitleiste.css mit — hier steht nur, was dem Dashboard
   gehört: seine Chart-Flächen. */
.chart-container {
    touch-action: pan-y;
}

/* === ZEITLEISTE: wohnt seit 10.08.2026 im Kit ===
   Optik der Maßstab-Leiste (.zeitleiste, .massstab-*) kommt aus dem Baustein
   ui-kit/bausteine/zeitleiste.css (Kopie: css/zeitleiste.css) — EIN Ort für
   Dashboard UND Sollkurven, damit die Styling-Runde einmal für beide gilt.
   Wer hier Leisten-Regeln ergänzt, baut eine zweite Wahrheit. */

/* === Detail-Layout — Widget-Grid füllt verfügbaren Platz responsive === */

.detail-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* Fixe Pixel-Höhen für vorhersagbares Layout — keine fr-Magie mehr.
       Die fünfte Zeile trug bis zum 11.08.2026 den Lampen-Verlauf (D-074). */
    grid-template-rows:
        120px                          /* Temp-KPIs */
        340px                          /* Temp-Chart */
        260px                          /* Geschw. / Druck / Lage — die Ringe */
        60px                           /* Kanal — Kachelhoehe; das Rohr bleibt 26 px */
        340px;                         /* Speed-Chart */
    gap: var(--abstand-10);
    width: 100%;
    min-height: 100%;
}

/* Row 1: Vier KPIs (Temp 1, 2, 3 + Lufttemperatur) */
.w-temp1 { grid-column: 1 / span 3;  grid-row: 1; }
.w-temp2 { grid-column: 4 / span 3;  grid-row: 1; }
.w-temp3 { grid-column: 7 / span 3;  grid-row: 1; }
.w-temp4 { grid-column: 10 / span 3; grid-row: 1; }

/* Row 2: Temp-Chart volle Breite */
.w-temp-chart { grid-column: 1 / -1; grid-row: 2; }

/* Row 3: Drei Gauges */
.w-speed    { grid-column: 1 / span 4; grid-row: 3; position: relative; }
.w-pressure { grid-column: 5 / span 4; grid-row: 3; position: relative; }
.w-lage     { grid-column: 9 / span 4; grid-row: 3; position: relative; }
/* Die Entfernung ist keine Kachel neben anderen mehr, sondern eine STRECKE
   ueber die ganze Breite (PROBE 13.08.): links der weiteste Punkt der Fahrt,
   rechts der Truck. Sie sitzt zwischen Instrumenten und Kurve — dort, wo das
   Auge ohnehin von "wie laeuft es" nach "wie lief es" wandert. */
.w-strecke  { grid-column: 1 / -1; grid-row: 4; position: relative; }

/* Bei den Gauges sitzt der Header über dem Kreis (absolute), damit der Kreis
   wirklich vertikal mittig im Widget ist und nicht durch den Header nach
   unten verschoben wird. */
.w-speed > .kachel-kopf,
.w-pressure > .kachel-kopf,
.w-lage > .kachel-kopf {
    position: absolute;
    top: 18px;
    left: 22px;
    margin-bottom: 0;
}

/* Row 4: Speed/Pressure-Chart volle Breite */
.w-speed-chart { grid-column: 1 / -1; grid-row: 5; position: relative; }

/* Ein/Aus-Schalter des Sollkurven-Overlays (O-3). Sitzt oben rechts IM
   Chart-Widget, damit er beim Betrachten der Kurve in Reichweite ist und
   keine eigene Zeile kostet. Erscheint nur, wenn die Aufnahme eine Vorgabe
   trägt — sonst kein toter Knopf (charts.js: overlayBtn.hidden). */
/* Kurven-Schalter (11.08.2026) — zwei Kippschalter oben rechts im Chart.
   Sie ersetzen den früheren `.btn`-Knopf mit wechselndem Text: Der erbte die
   volle Knopf-Anatomie (34 px hoch) und thronte über dem Chart, obwohl er nur
   eine Ansichts-Option ist. Jetzt Chip-Format — so hoch wie die Legende, der
   er gegenübersteht.
   Der EIN-Zustand ist farbig, und zwar in der Farbe der Kurven, die er zeigt:
   Ist kräftig, Soll pastell. Damit erklärt die Schalterleiste die Farbwelt des
   Charts gleich mit. Kein Hintergrund-Mix (`color-mix` ist uns zu jung) —
   Rand und Schrift tragen die Farbe. */
.kurven-schalter {
    position: absolute;
    top: 10px;
    right: 22px;
    z-index: 2;
    display: flex;
    gap: var(--abstand-6);
}

/* Die zwei Knöpfe SIND der Kit-Knopf in der Instrumenten-Variante
   (.btn.btn-instrument, buttons.css — Chris 15.08.: „aus den Standard-Buttons
   bauen", am Bild dann die Cockpit-Typografie gewählt). Höhe, Rahmen, Grund,
   Hover, Aus-Ton kommen aus dem Kit. Lokal bleibt NUR die Zustandsfarbe des
   Textes, weil sie Kanalwissen ist (Soll = das Blau der Sollkurve, Ist = der
   helle Ist-Ton). Der Rahmen-Beschluss vom 14.08. („Rahmen immer gleich,
   Zustand nur im Text") gilt weiter. */

/* DER RAHMEN BLEIBT IMMER GLEICH (Chris 14.08., finale Fassung): dezentes
   var(--linie) in jedem Zustand — kein An/Aus-Rahmen, kein Farbwechsel am
   Strich. Den Zustand trägt allein der TEXT: an = Soll-Blau bzw. heller
   Ist-Ton, aus = leise. Verworfen wurden an diesem Tag: rahmenlos, gefüllte
   Pille, und der Rahmen in Zustandsfarbe. */
.kurven-schalter-knopf.ist-an.ist-ist {
    color: var(--text);
}

.kurven-schalter-knopf.ist-an.ist-soll {
    color: var(--c-speed);
}

/* === Feed-/System-Status-Ampel (A2) — Punkt + Text ==========================
   BEGRÜNDETER SONDERFALL, bewusst NICHT der Kit-`.status` (Kit-Audit 15.08.2026,
   Chris am Bild): Das ist ein LEBENSZEICHEN, kein Zustands-Etikett. Zwei
   Eigenheiten stammen von Chris und kann der Kit-Status beide nicht —
   (1) im Listenkopf steht der Punkt RECHTS („Text links, Punkt rechts", D-050),
   (2) bei Feed-Störung pulsiert er ROT, während der Cockpit-Puls-Punkt mit
   „kein rotes Blinken" (C1) gebaut ist. Wer sie ins Kit zwingen will, gibt eine
   der beiden Entscheidungen auf — deshalb bleibt sie hier. */

.feed-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: var(--abstand-14);
    padding: 0 2px;
    font-size: var(--schrift-2xs);
    font-weight: var(--gewicht-mittel);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-gedaempft);
    white-space: nowrap;
    user-select: none;
}

.feed-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-leise);   /* idle / unknown */
    transition: background 0.15s;
    flex: none;
}

.feed-status[data-state="live"] .feed-status-dot { background: var(--ok); }
/* SPS-Zustand im Leerlauf (D-082, 16.08.2026): dieselbe Farblogik wie der Feed —
   verbunden = grün wie LIVE, getrennt = rot pulsierend wie FEED STEHT?. */
.feed-status[data-state="sps-ok"]  .feed-status-dot { background: var(--ok); }
.feed-status[data-state="sps-weg"] .feed-status-dot {
    background: var(--fehler);
    animation: lampStatusPulse 1.4s ease-in-out infinite;
}
.feed-status[data-state="sps-weg"] .feed-status-label { color: var(--fehler); }
/* Nie verbunden gewesen: der Punkt behaelt seinen Grundton (grau), das Wort
   bleibt leise. Kein Puls — es ist nichts passiert, worauf man reagieren muesste. */
.feed-status[data-state="sps-nie"] .feed-status-label { color: var(--text-leise); }

.feed-status[data-state="stale"] .feed-status-dot,
.feed-status[data-state="error"] .feed-status-dot {
    background: var(--fehler);
    animation: lampStatusPulse 1.4s ease-in-out infinite;   /* Keyframe s.u. (Lampen-Status) */
}

.feed-status[data-state="stale"] .feed-status-label,
.feed-status[data-state="error"] .feed-status-label {
    color: var(--fehler);
}


/* === Lampen-Status: Button + Schublade in der Tab-Bar ============ */

.lampen-status-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 0 var(--abstand-12);        /* direkt rechts neben dem letzten Tab */
    align-self: center;                 /* echte vertikale Mitte der 48px-Topbar (Eltern: align-items:stretch) */
    padding: 0 12px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    color: var(--text-gedaempft);
    font-family: inherit;
    font-size: var(--schrift-2xs);
    font-weight: var(--gewicht-mittel);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.lampen-status-btn:hover {
    color: var(--text);
    border-color: var(--linie-stark);
}

.lampen-status-btn.active {
    background: var(--karte);
    color: var(--text);
    border-color: var(--linie-stark);
}

.lampen-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-leise);
    transition: background 0.15s;
}

/* Dot-Farbe wird in JS aus LAMP_STATES gesetzt — hier nur die Pulsation für Störung */
.lampen-status-btn[data-status="stoerung"] .lampen-status-dot {
    animation: lampStatusPulse 1.4s ease-in-out infinite;
}
.lampen-status-btn[data-status="stoerung"] {
    color: var(--fehler);
    border-color: rgba(239, 94, 110, 0.4);
}

@keyframes lampStatusPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* Schublade — klappt zwischen Tab-Bar und Tab-Content auf */

.lampen-drawer {
    max-height: 0;
    overflow: hidden;
    background: var(--flaeche-erhaben);    /* gleiche Farbe wie die Tab-Bar darüber */
    transition: max-height 0.25s ease, border-bottom-width 0.25s ease;
    border-bottom: 0 solid var(--linie);
}

.lampen-drawer.open {
    max-height: 180px;
    border-bottom-width: 1px;
}

.lampen-drawer-inner {
    padding: var(--abstand-14) var(--abstand-16);
    text-align: center;
}


/* Bubbles — geteilte Klassen für die Schublade */

.lampen-bubbles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--abstand-12);
}

.lampen-bubbles-cores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--abstand-40);
}

/* Core-Group: Label linksbündig neben den Bubbles, nicht darüber. */
.lampen-core-bubble-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--abstand-12);
}

.lampen-core-bubble-group .lampen-core-label {
    font-size: var(--schrift-sm);
    font-weight: var(--gewicht-fett);
    color: var(--text);
}

.lampen-bubble {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
    transition: transform 0.2s;
}

.lampen-bubble-label {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-xs);
    font-weight: var(--gewicht-halbfett);
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Lampen-Strom (Variante A, Chris 02.07.): kleine Mono-Zahl unter jedem Chip.
   Nur gerendert, wenn der Sample Strom-Daten trägt (Alt-Aufnahmen: unverändert).
   Einheit A steht im Tooltip, nicht 18× in der Leiste. */
.lampen-bubble-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--abstand-6);   /* Chris 02.07.: Zahl etwas weiter vom Chip absetzen */
}
.lampen-bubble-strom {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-2xs);
    color: var(--text-gedaempft);
    line-height: 1;
}

.lampen-bubble-pulse {
    animation: lampBubblePulse 1.4s ease-in-out infinite;
}

@keyframes lampBubblePulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.92); }
}

/* === Mobile / schmale Fenster: feste Höhen statt fr-Stretching === */

@media (max-width: 900px) {
    .detail-layout {
        grid-template-rows: auto;
    }
    .w-temp-chart, .w-speed-chart { min-height: 180px; }
    .w-speed, .w-pressure, .w-lage { min-height: 60px; }
    .w-strecke { min-height: 60px; }
    .w-temp1, .w-temp2, .w-temp3, .w-temp4 { min-height: 60px; }
}