:root {
  --bg: #0b0f17;
  --primary: #3b82f6;
  --accent: #22d3ee;
  --fg: #f5f7fb;
  --muted: rgba(245, 247, 251, 0.62);
  --faint: rgba(245, 247, 251, 0.12);
  --card: rgba(255, 255, 255, 0.05);
  --transition: 900ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Mauszeiger im Kioskbetrieb komplett ausblenden: cage zeichnet einen eigenen
   Hardware-Cursor, den nur eine echte (transparente) Cursor-Fläche verdrängt. */
html, body, * {
  cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==') 0 0, none !important;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Hintergrund mit dezenten Farbverläufen */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(60% 50% at 20% 12%, color-mix(in srgb, var(--primary) 38%, transparent), transparent 70%),
    radial-gradient(55% 45% at 85% 85%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  filter: blur(40px);
  opacity: 0.55;
  z-index: 0;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

#stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* Feste Zeilen-Zuordnung: Szenen bleiben in der 1fr-Zeile, auch wenn Statusleiste
   oder Ticker ausgeblendet (display:none) sind – sonst rutschen sie per
   Grid-Auto-Placement in die auto-Zeile und werden angeschnitten. */
#statusbar { grid-row: 1; }
#scenes { grid-row: 2; }
#ticker { grid-row: 3; }

/* ---- Statusleiste ---- */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 2.4vh, 34px) clamp(20px, 4vw, 60px);
  font-variant-numeric: tabular-nums;
}
.statusbar[hidden] { display: none; }
.sb-left { display: flex; align-items: baseline; gap: 0.7em; }
.sb-time { font-size: clamp(20px, 3.4vh, 44px); font-weight: 700; letter-spacing: 0.01em; }
.sb-date { font-size: clamp(12px, 1.8vh, 22px); color: var(--muted); text-transform: capitalize; }
.sb-right { display: flex; align-items: center; gap: 0.5em; font-size: clamp(16px, 2.6vh, 32px); font-weight: 600; }
.sb-right .wx-ico { font-size: 1.25em; }

/* ---- Szenen-Container ---- */
.scenes { position: relative; overflow: hidden; }
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity var(--transition) ease, transform var(--transition) ease, visibility var(--transition);
  padding: clamp(24px, 5vw, 80px);
}
.scene.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.scene-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 32px);
}

/* ---- Welcome-Hintergrund (Bild / Webcam / Grain) ---- */
.scene-welcome { position: relative; }
.welcome-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.welcome-bg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.welcome-bg > img:not([hidden]) { display: block; }
/* Webcam-Hintergrund wird gespiegelt (natürliches Spiegelgefühl) */
.scene-welcome.bg-webcam .welcome-bg > img { transform: scaleX(-1); }
/* Scrim für Lesbarkeit (nur bei Bild/Webcam aktiv) */
.welcome-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, calc(var(--scrim, 0.35) * 0.6)) 0%,
    rgba(0, 0, 0, var(--scrim, 0.35)) 100%
  );
  opacity: 0;
}
.scene-welcome.bg-image .welcome-scrim,
.scene-welcome.bg-webcam .welcome-scrim { opacity: 1; }
/* Feine Körnung über den Farbflächen */
.welcome-grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.scene-welcome.grain-on .welcome-grain { opacity: 0.14; }

.logo {
  max-width: min(60%, 520px);
  max-height: 22vh;
  object-fit: contain;
}

/* ---- Welcome ---- */
.welcome-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(13px, 1.8vh, 22px);
  color: var(--accent);
  font-weight: 600;
}
.welcome-headline {
  font-size: clamp(40px, 13vw, 190px);
  max-width: 100%;
  overflow-wrap: break-word;
  font-weight: 800;
  line-height: 0.98;
  background: linear-gradient(120deg, var(--fg), color-mix(in srgb, var(--accent) 75%, var(--fg)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.welcome-guest {
  font-size: clamp(28px, 8vw, 96px);
  max-width: 100%;
  overflow-wrap: break-word;
  font-weight: 700;
  color: var(--fg);
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--faint);
}
.welcome-guest[hidden] { display: none; }
.welcome-sub {
  font-size: clamp(20px, 3.2vh, 44px);
  color: var(--muted);
  font-weight: 400;
  max-width: 22ch;
}
.welcome-sensors {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vh, 22px);
  justify-content: center;
  margin-top: clamp(10px, 2vh, 30px);
}
.sensor-chip {
  background: var(--card);
  border: 1px solid var(--faint);
  border-radius: 18px;
  padding: 0.5em 0.9em;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 7em;
}
.sensor-chip .s-val { font-size: clamp(22px, 3.2vh, 40px); font-weight: 700; }
.sensor-chip .s-lbl { font-size: clamp(11px, 1.5vh, 17px); color: var(--muted); }

/* ---- Spiegel (Webcam) ---- */
.scene-mirror { padding: 0; }
#mirrorImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.scene-mirror.flip #mirrorImg { transform: scaleX(-1); }
.mirror-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: clamp(24px, 5vh, 70px) clamp(20px, 4vw, 60px);
  pointer-events: none;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}
.mirror-clock {
  font-size: clamp(40px, 8vw, 120px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}
.mirror-greeting {
  font-size: clamp(22px, 4vw, 56px);
  font-weight: 600;
  max-width: 18ch;
  text-align: center;
}
.mirror-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: clamp(20px, 3vh, 36px);
}
.mirror-fallback .pe-icon { font-size: 3em; }
.mirror-fallback .pe-hint { font-size: 0.6em; opacity: 0.7; }

/* ---- Portfolio ---- */
.scene-portfolio { padding: 0; }
#portfolioVideo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.portfolio-empty {
  text-align: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-size: clamp(20px, 3vh, 36px);
}
/* hidden-Attribut muss die display:flex-Regel übersteuern, sonst bleibt der
   „keine Videos"-Platzhalter sichtbar, sobald ein Video läuft. */
.portfolio-empty[hidden] { display: none; }
.portfolio-empty .pe-icon { font-size: 3em; }
.portfolio-empty .pe-hint { font-size: 0.6em; opacity: 0.7; }
.portfolio-caption {
  position: absolute;
  left: 0; right: 0; bottom: clamp(16px, 3vh, 48px);
  text-align: center;
  font-size: clamp(18px, 2.6vh, 34px);
  font-weight: 600;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* ---- Uhr & Wetter ---- */
.big-clock {
  font-size: clamp(72px, 32vw, 440px);
  font-weight: 800;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.big-date {
  font-size: clamp(24px, 4vh, 60px);
  color: var(--muted);
  text-transform: capitalize;
}
.big-weather {
  font-size: clamp(30px, 5vh, 80px);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.forecast {
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  margin-top: clamp(12px, 2vh, 28px);
  flex-wrap: wrap;
  justify-content: center;
}
.fc-day {
  background: var(--card);
  border: 1px solid var(--faint);
  border-radius: 18px;
  padding: 0.7em 1em;
  text-align: center;
  min-width: 5.5em;
}
.fc-day .fc-name { font-size: clamp(13px, 1.7vh, 20px); color: var(--muted); text-transform: capitalize; }
.fc-day .fc-ico { font-size: clamp(26px, 3.6vh, 46px); }
.fc-day .fc-temp { font-size: clamp(16px, 2.2vh, 26px); font-weight: 600; }
.fc-day .fc-temp small { color: var(--muted); font-weight: 400; }

/* ---- Info / QR ---- */
.info-headline { font-size: clamp(34px, 11vw, 110px); max-width: 100%; overflow-wrap: break-word; font-weight: 800; }
.info-sub { font-size: clamp(20px, 3vh, 44px); color: var(--muted); }
.qr-wrap {
  background: #fff;
  padding: clamp(16px, 2.4vh, 32px);
  border-radius: 28px;
  margin-top: clamp(10px, 2vh, 26px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
.qr-wrap[hidden] { display: none; }
.qr { display: block; width: clamp(220px, 38vh, 560px); height: auto; }

/* ---- Kalender (Agenda) ---- */
.cal-inner { gap: clamp(14px, 2.6vh, 34px); align-items: stretch; max-width: 1500px; }
.cal-title {
  font-size: clamp(32px, 8vw, 110px);
  font-weight: 800;
  text-align: center;
  background: linear-gradient(120deg, var(--fg), color-mix(in srgb, var(--accent) 75%, var(--fg)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 22px);
}
.cal-item {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2.5vw, 40px);
  background: var(--card);
  border: 1px solid var(--faint);
  border-radius: 20px;
  padding: clamp(14px, 2.2vh, 28px) clamp(18px, 3vw, 40px);
  text-align: left;
}
.cal-when { flex: none; min-width: 4.5em; text-align: right; }
.cal-day { font-size: clamp(18px, 2.6vh, 34px); font-weight: 700; text-transform: capitalize; line-height: 1.1; }
.cal-time { font-size: clamp(14px, 2vh, 24px); color: var(--muted); }
.cal-what { flex: 1; min-width: 0; }
.cal-summary { font-size: clamp(20px, 3vh, 38px); font-weight: 600; overflow-wrap: break-word; }
.cal-loc { font-size: clamp(14px, 2vh, 24px); color: var(--muted); }
.cal-empty { text-align: center; color: var(--muted); font-size: clamp(20px, 3vh, 40px); }
.cal-empty[hidden] { display: none; }
.cal-body { width: 100%; }
.cal-body[hidden] { display: none; }

/* Kalender – Wochenansicht */
.cal-week { display: flex; flex-direction: column; gap: clamp(6px, 1vh, 12px); }
.cal-wday {
  display: flex; gap: clamp(12px, 2vw, 28px); align-items: flex-start;
  background: var(--card); border: 1px solid var(--faint);
  border-radius: 16px; padding: clamp(8px, 1.4vh, 16px) clamp(14px, 2.4vw, 28px);
}
.cal-wday.today {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}
.cal-wd-head { flex: none; min-width: 3.2em; display: flex; flex-direction: column; }
.cal-wd-name { font-size: clamp(18px, 2.6vh, 32px); font-weight: 700; text-transform: capitalize; }
.cal-wd-date { font-size: clamp(13px, 1.8vh, 22px); color: var(--muted); }
.cal-wd-evs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2em; }
.cal-wev { display: flex; gap: 0.7em; font-size: clamp(16px, 2.2vh, 30px); }
.cal-wev-time { flex: none; color: var(--accent); font-variant-numeric: tabular-nums; }
.cal-wev-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-wev-none { color: var(--muted); opacity: 0.5; font-size: clamp(16px, 2.2vh, 30px); }

/* Kalender – Monatsraster */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(4px, 0.8vh, 10px); }
.cal-gh { text-align: center; font-size: clamp(13px, 1.8vh, 22px); font-weight: 700; color: var(--muted); }
.cal-cell {
  background: var(--card); border: 1px solid var(--faint);
  border-radius: 10px; padding: clamp(4px, 0.8vh, 10px);
  min-height: clamp(58px, 11vh, 150px);
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-cn { font-size: clamp(14px, 1.9vh, 24px); font-weight: 600; color: var(--muted); }
.cal-cell.today { border-color: var(--accent); }
.cal-cell.today .cal-cn { color: var(--accent); }
.cal-cell.has-ev .cal-cn { color: var(--fg); }
.cal-cell-evs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-ce {
  font-size: clamp(11px, 1.4vh, 18px);
  background: color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 5px; padding: 1px 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-more { font-size: clamp(10px, 1.3vh, 16px); color: var(--muted); }

/* ---- Screensaver (DVD-Bounce) ---- */
/* Basis-.scene ist bereits position:absolute (Offset-Parent fürs Objekt) – nicht überschreiben! */
.scene-screensaver { overflow: hidden; padding: 0; }
.ss-object {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
  transition: color 0.25s, filter 0.25s, text-shadow 0.25s;
}
.ss-object.ss-text { font-size: clamp(48px, 11vw, 170px); font-weight: 800; white-space: nowrap; }
.ss-object.ss-emoji { font-size: clamp(90px, 20vw, 320px); }
.ss-object.ss-logo img { width: clamp(120px, 28vw, 380px); height: auto; display: block; }

/* ---- Ticker ---- */
.ticker {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--faint);
  background: rgba(0, 0, 0, 0.28);
  padding: clamp(10px, 1.8vh, 22px) 0;
}
.ticker[hidden] { display: none; }
.ticker-track {
  display: inline-block;
  padding-left: 100%;
  font-size: clamp(18px, 2.6vh, 34px);
  font-weight: 600;
  color: var(--fg);
  animation: ticker-move linear infinite;
}
@keyframes ticker-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---- Offline-Hinweis ---- */
.offline {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(239, 68, 68, 0.92);
  color: #fff;
  padding: 0.4em 1em;
  border-radius: 999px;
  font-size: clamp(12px, 1.6vh, 18px);
  z-index: 10;
}
.offline[hidden] { display: none; }

/* ---- CSS-Drehung für physisch gedrehte Displays ---- */
body.rotate-cw #stage,
body.rotate-ccw #stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh;
  height: 100vw;
  transform-origin: 0 0;
}
/* Vollflächige 90°-Drehung; füllt exakt den Landscape-Viewport. */
body.rotate-cw #stage { transform: translateX(100vw) rotate(90deg); }
body.rotate-ccw #stage { transform: translateY(100vh) rotate(-90deg); }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .scene { transition: opacity var(--transition) ease; transform: none; }
}

/* ---- Schwarzes Brett (Pinnwand) ---- */
.scene-board {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: clamp(14px, 2.2vh, 28px) clamp(16px, 3vw, 40px) clamp(16px, 2.2vh, 28px);
  gap: clamp(8px, 1.4vh, 18px);
}
.board-head { text-align: center; flex: 0 0 auto; }
.board-title { font-size: clamp(28px, 5vw, 76px); font-weight: 800; line-height: 1.05; }
.board-sub { font-size: clamp(14px, 2vh, 28px); color: var(--muted); margin-top: 0.25em; }

.board-area {
  position: relative;
  flex: 1 1 auto;
  border-radius: 18px;
  overflow: hidden;
  background-color: #c9a36b;
  background-image:
    radial-gradient(rgba(120, 80, 40, 0.28) 1px, transparent 1.6px),
    radial-gradient(rgba(90, 60, 30, 0.2) 1px, transparent 1.6px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 4px 5px;
  box-shadow: inset 0 0 90px rgba(60, 38, 12, 0.55), inset 0 0 0 6px rgba(80, 50, 20, 0.35);
}
.board-empty {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: rgba(40, 25, 8, 0.5); font-size: clamp(18px, 3vh, 36px); font-weight: 700;
}
.board-empty[hidden] { display: none; } /* sonst überschreibt display:flex das hidden-Attribut */

.pin { position: absolute; transform-origin: center; }
.pin-tack {
  position: absolute; top: clamp(-14px, -1vw, -8px); left: 50%; transform: translateX(-50%);
  width: clamp(16px, 1.5vw, 30px); height: clamp(16px, 1.5vw, 30px); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff7a7a, #c92a2a 72%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45); z-index: 3;
}

/* Notiz / Post-it */
.pin-note {
  width: clamp(150px, 20%, 320px);
  padding: clamp(16px, 1.9vw, 30px);
  color: #1c1407;
  border-radius: 3px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.25);
  display: flex; align-items: center; justify-content: center;
}
.pin-note .pin-text {
  font-size: clamp(18px, 2vw, 44px);
  line-height: 1.18; text-align: center; width: 100%;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: clamp(220px, 30vh, 460px); overflow: hidden;
}

/* Bild */
.pin-image {
  width: clamp(170px, 24%, 380px);
  padding: clamp(7px, 0.7vw, 12px);
  background: #fafafa;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38), 0 2px 5px rgba(0, 0, 0, 0.25);
}
.pin-image .pin-img { width: 100%; display: block; border-radius: 1px; }
.pin-image .pin-cap {
  margin-top: 0.4em; text-align: center; color: #2a2a2a;
  font-family: 'Caveat', cursive; font-weight: 600;
  font-size: clamp(15px, 1.5vw, 30px); line-height: 1.1;
}
.pin-image.polaroid { padding: clamp(9px, 0.9vw, 14px) clamp(9px, 0.9vw, 14px) clamp(20px, 2.2vw, 44px); background: #fffef8; }

/* QR-Ecke */
.board-qr {
  position: absolute; z-index: 9999;
  right: clamp(14px, 2.4vw, 40px); bottom: clamp(14px, 2.2vh, 40px);
  background: #fff; border-radius: 14px; padding: clamp(8px, 1vw, 16px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
.board-qr-img { width: clamp(96px, 11vw, 210px); height: auto; display: block; }
.board-qr-cap { font-size: clamp(11px, 1.3vh, 19px); color: #111; font-weight: 800; letter-spacing: 0.01em; }