/* Bühne der CareLog-Live-Demo (public/demo/ der Flyer-Site). Farben, Schriften
   und Knopf-Signatur stammen aus der App bzw. carelog-website/main.css — hier
   als Auszug, damit die Bühne ohne fremdes CSS auskommt. */

@font-face { font-family: 'Archivo'; src: url('/demo/fonts/Archivo-Variable-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62.5% 125%; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/demo/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 300 450; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/demo/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 451 700; font-display: swap; }

:root {
  --bg-page: #f8fafc; --bg-surface: #ffffff;
  --border-subtle: #e2e8f0; --border-medium: #cbd5e1;
  --ink: #1e293b; --ink-deep: #0f172a; --text-body: #3f4c63; --text-muted: #64748b;
  --dark-bg: #0f172a; --dark-surface: #1e293b; --dark-border: #334155; --dark-text: #cbd5e1; --dark-heading: #f1f5f9;
  --ok: #10b981; --warn: #fbbf24; --crit: #f43f5e;
  --font-display: 'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --radius-card: 4px; --radius-control: 2px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-float: 0 10px 30px -12px rgba(15, 23, 42, 0.25);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--dark-bg); color: var(--text-body); }
body { font-family: var(--font-body); line-height: 1.65; overflow: hidden; }
h1, h2 { font-family: var(--font-display); font-variation-settings: 'wdth' 118; font-stretch: 118%; font-weight: 640; color: var(--ink); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
[hidden] { display: none !important; }
.a11y { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Knöpfe: 2px-Radius, Hover ändert nur Farbe — die Kontroll-Signatur der App */
.btn-primary, .btn-ghost {
  display: inline-block; padding: 0.9rem 2.1rem; font-family: var(--font-display); font-variation-settings: 'wdth' 112; font-stretch: 112%;
  font-weight: 620; font-size: 0.95rem; letter-spacing: 0.03em; border-radius: var(--radius-control); text-decoration: none; cursor: pointer; line-height: 1.65;
  transition: background-color .25s var(--ease-out-quart), border-color .25s var(--ease-out-quart), color .25s var(--ease-out-quart);
}
.btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--ok); outline-offset: 3px; }
.btn-primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-primary:hover { background: #334155; border-color: #334155; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border-medium); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: #f1f5f9; }

/* ------------------------------------------------------------------
   Maßsystem: --lid-w ist die Deckelbreite, --u ein Promille davon. Alle
   Gerätemaße sind Vielfache von --u. Bemessen wird der Deckel: 702 ‰ der
   Deckelbreite → Faktor 1,424; ändert sich ein Deckelmaß, muss er mit. Das
   Unterteil (54 ‰, 33 ‰ davon über dem Deckel) ragt unten aus dem Fenster.
   ------------------------------------------------------------------ */
.demo {
  --lid-h: 96svh;                                    /* nur der Deckel; das Unterteil ragt unten hinaus */
  --lid-w: min(84vw, calc(var(--lid-h) * 1.424));
  --u: calc(var(--lid-w) / 1000);
  position: relative; height: 100svh; overflow: clip;
  background: radial-gradient(110% 85% at 50% 42%, #243352 0%, #182240 38%, var(--dark-bg) 68%), var(--dark-bg);
}

.chrome { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 8svh; padding: 0 clamp(16px, 3vw, 44px); }
.back { font-size: 0.92rem; color: var(--dark-text); text-decoration: none; padding: 8px 4px; }
.back:hover { color: #fff; }
.clock {
  margin: 0; padding: 5px 14px; border: 1px solid var(--dark-border); border-radius: var(--radius-control);
  font-family: var(--font-display); font-variation-settings: 'wdth' 112; font-stretch: 112%; font-weight: 620; font-size: 0.92rem; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease-out-quart), border-color .3s var(--ease-out-quart);
}
.clock.ok { color: var(--dark-text); }
.clock.warn { color: var(--warn); border-color: rgba(251, 191, 36, 0.5); }
.clock.crit { color: var(--crit); border-color: rgba(244, 63, 94, 0.55); }

.stage { height: 100%; display: grid; justify-items: center; align-items: start; padding-top: 2.5svh; }
@media (max-width: 899px) { .stage { display: none; } }

/* ---- Gerät: Frontansicht, Space Black ----
   Deckel in Gerätemaßen (Promille der Deckelbreite): Kante 3, Glasrand 22,
   Bildschirm 964/1,54, Kinn 48, Kante 3 → 702 ‰ hoch. Darunter das flache
   Unterteil, fast von vorn gesehen: oben ein heller Streifen (Deckfläche im
   streifenden Blick), davor die schwarze Vorderkante mit Griffmulde, unten
   die Füße. Bemessen wird nur der Deckel (702 ‰ → Faktor 1,424 in --lid-w);
   das Unterteil überdeckt 33 ‰ des Deckels und ragt unten aus dem Fenster. */
.laptop { position: relative; width: var(--lid-w); }

.lid {
  position: relative; z-index: 2;
  padding: calc(var(--u) * 3);
  background: linear-gradient(180deg, #38383d 0%, #1c1c1f 30%, #131315 100%);
  border-radius: calc(var(--u) * 30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 calc(var(--u) * 24) calc(var(--u) * 50) calc(var(--u) * -18) rgba(0, 0, 0, 0.9);
}
.glass { position: relative; padding: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 48); background: #070708; border-radius: calc(var(--u) * 27); }
/* Unten fast eckig — die unteren Ecken des Geräts verdeckt ohnehin das Unterteil */
.screen { position: relative; aspect-ratio: 154 / 100; overflow: hidden; background: var(--bg-page); border-radius: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 2) calc(var(--u) * 2); }
/* Breite und Höhe setzt stage.js aus data-width (Seitenverhältnis 1,54) */
.screen iframe { border: 0; transform-origin: top left; will-change: transform; display: block; }
.glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(112deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 34%, transparent 52%); }
.pending { position: relative; width: 100%; height: 100%; background: var(--bg-page); }
.pending img { width: 100%; height: 100%; object-fit: cover; object-position: left top; filter: grayscale(0.35); opacity: 0.5; }
.pending p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; max-width: 30em; text-align: center; background: var(--bg-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-card); padding: 14px 20px; font-size: 0.95rem; color: var(--text-body); box-shadow: var(--shadow-card); }

/* Unterteil: etwas breiter als der Deckel und VOR ihm — es überdeckt die
   unteren 33 ‰ des Deckels (Rundung 30 ‰ + Kante), so dass vom Deckel unten
   nur ein dünner schwarzer Streifen unter dem Bildschirm bleibt. */
.base {
  position: relative; z-index: 3;
  width: 104%; margin-left: -2%;
  height: calc(var(--u) * 54);
  margin-top: calc(var(--u) * -33);
  background: linear-gradient(180deg, #7a7b82 0%, #55565c 6%, #2a2a2e 13%, #161618 20%, #121214 100%);
  border-radius: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 16) calc(var(--u) * 16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.07), 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(0, 0, 0, 0.6);
}
/* Griffmulde vorne mittig */
.base .lip { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18%; height: calc(var(--u) * 17); background: linear-gradient(180deg, #08080a, #141416); border-radius: 0 0 calc(var(--u) * 9) calc(var(--u) * 9); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07); }
/* Gummifüße */
.foot { position: absolute; bottom: calc(var(--u) * -5); width: calc(var(--u) * 72); height: calc(var(--u) * 7); background: #0a0a0b; border-radius: 0 0 calc(var(--u) * 4) calc(var(--u) * 4); }
.foot-l { left: 9%; }
.foot-r { right: 9%; }

/* ---- Ablauf-Overlay ---- */
.veil { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.74); backdrop-filter: blur(3px); border-radius: inherit; }

/* ---- Dialoge ---- */
.gate { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(9, 13, 24, 0.78); backdrop-filter: blur(4px); }
.gate-box, .box { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-float); padding: clamp(26px, 3.4vw, 38px) clamp(24px, 3.4vw, 40px); max-width: 34em; text-align: center; }
.gate-box h2, .box h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0 0 12px; }
.gate-box p, .box p { margin: 0 0 14px; font-size: 0.98rem; color: var(--text-body); }
.gate-box .fine { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 24px; }
.box p { margin-bottom: 22px; }
.box-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.box-actions .btn-primary, .box-actions .btn-ghost { padding: 0.7rem 1.5rem; font-size: 0.9rem; }
.box-link, .gate-link { display: inline-block; margin-top: 18px; font-size: 0.88rem; color: var(--text-muted); text-decoration: none; }
.box-link:hover, .gate-link:hover { color: var(--ink); }
.gate-link { display: block; }

.legal { position: absolute; right: clamp(12px, 1.6vw, 30px); bottom: 1.6svh; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.legal a { font-size: 0.74rem; line-height: 1.5; color: #55617a; text-decoration: none; }
.legal a:hover { color: var(--dark-text); }

@media (prefers-reduced-motion: reduce) { .clock { transition: none; } }