/* Polaroid — die Aufnahme als schwebende Palette (D-116, 13.09.2026).

   Dieselbe Familie wie die Zeitleiste (zeitleiste.css): fest im Fenster,
   Kartenfarbe halb durchsichtig mit Weichzeichnung dahinter, kein Rahmen,
   der Schatten einer schwebenden Flaeche. Rechts oben, 30 px neben dem
   Inhalt — auf einem breiten Bildschirm steht sie im Rand und bleibt dort,
   egal wie breit das Fenster wird; auf einem schmalen liegt sie ueber der
   rechten Kachel, und dann blendet man sie aus (Knopf „Aufnahme" oder das
   Kreuz). Die Lage misst polaroid.js (`_lage`); right/top hier sind nur die
   Vorgabe bis zur ersten Messung. Entwurf: ui-kit/entwuerfe/cockpit-kopf.html. */

.polaroid {
    position: fixed;
    right: 24px;                     /* Vorgabe; polaroid.js setzt left neben den Inhalt */
    top: 200px;                      /* Vorgabe; polaroid.js misst die Navigation und setzt den Wert */
    z-index: 90;                     /* unter der Zeitleiste (100), dem Aufnahmen-Fenster (120), den Dialogen (300) */
    width: 300px;
    padding: 12px 12px 14px;
    background: color-mix(in srgb, var(--flaeche-erhaben) 50%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    border-radius: var(--rundung-mittel);
    box-shadow: var(--schatten-schwebend);
}
/* [hidden] verliert sonst gegen das eigene display — die WebKit-Lektion. */
.polaroid[hidden] { display: none !important; }
@media print { .polaroid { display: none !important; } }

/* der Kopf: Kunde und Baustelle — die Antwort auf „was laeuft da gerade?" —
   und rechts oben das Kreuz (Chris, 13.09.2026) */
.polaroid-kopf { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0 6px 4px; }
.polaroid-kopf-text { min-width: 0; flex: 1; }
.polaroid-kunde { font-size: var(--schrift-sm); font-weight: var(--gewicht-halbfett); color: var(--text); line-height: 1.3; }
.polaroid-ort   { font-size: var(--schrift-kompakt); color: var(--text-gedaempft); margin-top: 1px; }

/* der Rand: die Zeilen der Karte AUFNAHME (Kit .pk-row aus datenblatt.css),
   im Polaroid eine Stufe kleiner, und das Kreuz darunter */
/* Deutlich kleiner als drueben (Chris, 13.09.2026: „die Schrift viel kleiner,
   so wie vorher") — Etiketten in Kapitaelchen, Werte in Mono, 11 px. */
.polaroid-rand { padding: 0 4px 0; }
.polaroid .pk-row { font-size: var(--schrift-2xs); padding: 5px 0; gap: 12px; }
.polaroid .pk-label { color: var(--text-leise); letter-spacing: var(--laufweite); text-transform: uppercase; }
.polaroid .pk-value { font-family: var(--schriftart-mono); font-weight: var(--gewicht-normal); font-variant-numeric: tabular-nums; }
.polaroid .pk-value .status { font-size: var(--schrift-2xs); }
.polaroid .pk-row:last-of-type { border-bottom: none; }
/* der Fuss traegt nur den Stopp — und nur, wenn es laeuft */
.polaroid-fuss { display: flex; justify-content: flex-start; margin-top: 10px; }
.polaroid-fuss[hidden] { display: none !important; }

/* der Punkt am Knopf: ruhig wenn gestoppt, rot mit Puls wenn es laeuft —
   damit man es auch bei ausgeblendeter Palette sieht */
.polaroid-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--text-leise); flex-shrink: 0; }
#btn-polaroid.laeuft .polaroid-punkt { background: var(--fehler); animation: lampStatusPulse 1.4s ease-in-out infinite; }
#btn-polaroid { gap: var(--abstand-6); color: var(--text-gedaempft); }
#btn-polaroid:hover, #btn-polaroid.active { color: var(--text); }
#btn-polaroid.active { background: var(--flaeche-aktiv); }
#btn-polaroid[hidden] { display: none !important; }
/* Die Dauer im Knopf: Ziffern gleich breit, damit der Knopf beim Zählen nicht zappelt. */
.polaroid-knopf-dauer { font-family: var(--schriftart-mono); font-variant-numeric: tabular-nums; }
#btn-polaroid.laeuft { color: var(--text); }

.polaroid-zu {
    border: 0; background: none; color: var(--text-leise);
    font: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.polaroid-zu:hover { color: var(--text); }