/* =====================================================================
   BAZI Design v4 · „Fernbedienung“, Mitternachtsblau
   Heller, kühler Grund. Ein weißes Kabel aus dem Logo läuft durch den
   Bildschirm, die Bedienung ist die kleine Kabel-Fernbedienung der
   EarPods (+ / Mitte / −). Mitternachtsblau dort, wo gehandelt wird, Laser-Türkis als feiner Akzent.
   In Single-File-Apps diesen Block 1:1 in <style> kopieren.
   Quelle: D:\Claude\bazi-design\bazi.css
   ===================================================================== */
:root {
  --bz-ground: #ececf0;
  --bz-ground-2: #e2e2e8;
  --bz-white: #ffffff;
  --bz-edge: #d9d9e0;
  --bz-cable-shadow: #c9c9d1;
  --bz-ink: #16151b;
  --bz-ink-2: #55535f;
  --bz-ink-3: #8e8c99;
  --bz-night: #16245e;         /* Mitternachtsblau = Markenfarbe */
  --bz-night-deep: #0b1436;
  --bz-laser: #19c3e3;         /* Laser-Türkis aus dem Logo, nur als feiner Akzent */
  --bz-ok: #12994c;
  --bz-bad: #d9303b;
  --bz-warn: #b86e00;
  --bz-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--bz-night); color: #fff; }
:focus-visible { outline: 3px solid var(--bz-night); outline-offset: 3px; }

html { background: var(--bz-ground); }
body.bz-app {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--bz-ink);
  background: linear-gradient(180deg, #f2f2f5 0%, var(--bz-ground) 50%, var(--bz-ground-2) 100%);
  font: 16px/1.45 var(--bz-font); font-variant-numeric: tabular-nums;
}

/* ---------- Kopf ---------- */
.bz-header { display: flex; align-items: center; gap: 11px; }
.bz-header img { width: 36px; height: 36px; border-radius: 10px; flex: none; box-shadow: 0 4px 10px -4px rgba(11, 20, 54, .4); }
.bz-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.bz-header .bz-sig { margin-left: auto; }

/* Signatur [B] BAZI – nur wo kein Logo zu sehen ist (z. B. Fußzeile einer Seite ohne Kopf). Logo + Signatur nebeneinander ist doppelt. */
.bz-sig { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 700 11.5px/1 var(--bz-font); letter-spacing: .16em; color: var(--bz-ink-2); }
.bz-sig::before { content: "B"; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px;
  letter-spacing: 0; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--bz-night); }

/* ---------- Kabel ---------- */
.bz-cable { width: 7px; background: var(--bz-white); border-radius: 4px; box-shadow: 2px 3px 0 -1px var(--bz-cable-shadow); }
.bz-cable-svg path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bz-cable-svg .shade { stroke: var(--bz-cable-shadow); stroke-width: 9; transform: translate(2px, 3px); }
.bz-cable-svg .wire { stroke: var(--bz-white); stroke-width: 7; }

/* ---------- Fernbedienung ---------- */
.bz-remote {
  --h: min(290px, 40vh);
  width: calc(var(--h) * .39); height: var(--h); border-radius: 999px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--h) * .07) 0;
  background: linear-gradient(90deg, #e8e8ed 0%, #ffffff 30%, #ffffff 62%, #e0e0e6 100%);
  box-shadow: 0 24px 40px -18px rgba(30, 28, 50, .45), 0 2px 4px rgba(30, 28, 50, .12), inset 0 0 0 1px var(--bz-edge);
}
.bz-remote button { border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.bz-key { width: 52px; height: 52px; border-radius: 50%; color: var(--bz-ink-3); transition: color .15s, transform .1s; }
.bz-key svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.bz-key:active { color: var(--bz-night); transform: scale(.92); }
.bz-key:disabled { opacity: .35; cursor: default; }
.bz-play {
  width: calc(var(--h) * .25); height: calc(var(--h) * .25); border-radius: 50% !important; color: #fff;
  background: linear-gradient(180deg, #23357d, var(--bz-night) 55%, var(--bz-night-deep)) !important;
  box-shadow: 0 6px 12px -4px rgba(11, 20, 54, .5), inset 0 -2px 0 var(--bz-night-deep), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s cubic-bezier(.16, 1, .3, 1), box-shadow .12s;
}
.bz-play:active { transform: scale(.94); box-shadow: 0 2px 5px -2px rgba(11,20,54,.6), inset 0 2px 4px rgba(0,0,0,.18); }
.bz-play.on { box-shadow: 0 6px 12px -4px rgba(11, 20, 54, .5), inset 0 0 0 3px var(--bz-laser), inset 0 1px 0 rgba(255,255,255,.3); }
.bz-play svg { width: 36%; height: 36%; fill: currentColor; }

/* ---------- Text am Kabel ---------- */
.bz-note { font-size: 14px; line-height: 1.35; }
.bz-note small { display: block; font-size: 12.5px; color: var(--bz-ink-2); }
.bz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--bz-bad); }
.bz-dot.ok { background: var(--bz-ok); }
.bz-dot.warn { background: var(--bz-warn); }
.bz-value { font-size: 13px; color: var(--bz-ink-2); }
.bz-value b { display: block; font-size: 24px; font-weight: 700; color: var(--bz-ink); letter-spacing: -.01em; }

/* ---------- Kleine Einstellung ---------- */
.bz-link { border: 0; background: none; padding: 6px 0; white-space: nowrap; font: 600 13px var(--bz-font); color: var(--bz-ink-2); cursor: pointer; text-align: left; }
.bz-link span { color: var(--bz-night); }
.bz-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(22, 21, 27, .06); border-radius: 12px; padding: 3px; }
.bz-seg button { border: 0; background: none; border-radius: 9px; padding: 9px 4px; font: 600 13px var(--bz-font); color: var(--bz-ink-2); cursor: pointer; }
.bz-seg button[aria-pressed="true"] { background: var(--bz-white); color: var(--bz-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* ===================== Ende BAZI Design v4 ===================== */