/* exe-Look, wie im Folien-Baukasten exe-decks. Nur diese Farben. */
:root {
  --c-yellow:#fcc700; --c-pink:#ff90e8; --c-petrol:#23a094; --c-lavender:#af99f5; --c-lightblue:#99d9f5; --c-green:#54f595;
  --c-paper:#efe8da; --c-paper-2:#e5dccb; --c-window:#fffdf8; --c-ink:#1b1a17; --c-mute:#57524a; --c-grey:#c9c1b0;
  --f-display:'Archivo Black','Archivo',system-ui,sans-serif;
  --f-ui:'Archivo',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --line:3px; --radius:16px;
  --shadow:0 22px 44px -22px rgba(70,50,20,.38),0 5px 12px -6px rgba(70,50,20,.18);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--c-paper); color: var(--c-ink); }
body { font: 500 17px/1.45 var(--f-ui); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; } /* hidden-Attribut schlägt display:flex/grid */
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Fenster: Tinten-Rahmen, farbige Titelleiste, grüner Punkt links. Kein Schließen-Kästchen: hier lässt sich nichts schließen. */
.win { background: var(--c-window); border: var(--line) solid var(--c-ink); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px;
  border-bottom: var(--line) solid var(--c-ink); background: var(--acc, var(--c-paper-2)); font: 700 15px/1.2 var(--f-mono); }
.win-bar .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-bar .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-green); border: 2.5px solid var(--c-ink); flex: none; }
.win-bar .meta { font-weight: 500; white-space: nowrap; }

/* exe-Marke: Logo im gelben Kreis, wie in der Statusleiste der Folien (exe-decks). Größe über --mark. */
.mark { --mark: 34px; display: inline-grid; place-items: center; flex: none; width: var(--mark); height: var(--mark);
  border-radius: 50%; background: var(--c-yellow); border: 2.5px solid var(--c-ink); }
.mark img { display: block; width: 70%; height: 70%; object-fit: contain; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 2.5px solid var(--c-ink); border-radius: 8px;
  font: 700 13px/1.2 var(--f-mono); background: var(--c-window); white-space: nowrap; }
.chip.on { background: var(--c-green); }
.chip.off { background: var(--c-ink); color: var(--c-paper); }
.chip.warn { background: var(--c-pink); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}