@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "D-DIN"; src: url("fonts/d-din-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --bg: #0f1413;
  --desk: #07090a;
  --ink: #e9eeec;
  --ink-2: #b6c2be;
  --ink-3: #93a19d;
  --rule: rgba(233, 238, 236, 0.13);
  --green: #4ec18e;
  --green-ink: #7ad3a8;
  --green-line: rgba(122, 211, 168, 0.38);
  --green-tint: rgba(122, 211, 168, 0.10);
  --blue: #5bb4d3;
  --warn: #e8a85a;
  --warn-line: rgba(232, 168, 90, 0.45);
  --frame: #1a2220;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --logo: "D-DIN", "IBM Plex Sans", sans-serif;
  --fade: 500ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--desk); }
body { color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--green-ink); text-decoration: none; }
a:hover { color: #a5e6c8; text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* One unit that tracks the smaller of width and 16:9 height — calc(1 * var(--u)) = 19.2px at 1920×1080 */
.loop {
  --u: min(1cqi, 1.78cqh);
  container: loop / size;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- header ---------- */
.bar-top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(14px, calc(2.2 * var(--u))) max(16px, calc(4.6 * var(--u))) max(12px, calc(1.1 * var(--u)));
  border-bottom: 1px solid var(--rule);
}
.brand { height: max(26px, calc(2.3 * var(--u))); width: auto; }
.bar-top-right { display: flex; align-items: center; gap: max(14px, calc(1.4 * var(--u))); min-width: 0; }
.kicker { font-family: var(--mono); font-size: max(12px, calc(0.9 * var(--u))); letter-spacing: 0.1em; color: var(--green-ink); white-space: nowrap; }
.demo {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--mono); font-size: max(11px, calc(0.68 * var(--u))); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-ink); border: 1px solid var(--green-line); padding: 0.6em 1em; white-space: nowrap;
}
.demo .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.demo .sep { width: 1px; height: 1.1em; background: var(--green-line); }
.demo .where { letter-spacing: 0.04em; text-transform: none; color: var(--ink); }

/* ---------- stage + slides ---------- */
.stage { flex: 1; position: relative; min-height: 0; touch-action: pan-y; }
.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--fade) ease, visibility 0s linear var(--fade);
  display: grid;
  grid-template-columns: minmax(0, calc(31 * var(--u))) minmax(0, 1fr);
  gap: calc(4 * var(--u));
  align-items: center;
  padding: calc(2.9 * var(--u)) calc(4.6 * var(--u));
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--fade) ease, visibility 0s; }

.num { font-family: var(--mono); font-weight: 500; font-size: max(18px, calc(1.35 * var(--u))); line-height: 1; color: var(--green); margin-bottom: max(14px, calc(1.25 * var(--u))); }
.slide h2 { font-weight: 600; font-size: max(25px, calc(2.6 * var(--u))); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 max(14px, calc(1.25 * var(--u))); text-wrap: pretty; }
.rule { width: max(56px, calc(4.8 * var(--u))); height: 1px; background: var(--green); margin-bottom: max(14px, calc(1.25 * var(--u))); }
.lede { font-size: max(16px, calc(1.3 * var(--u))); line-height: 1.5; color: var(--ink-2); margin: 0 0 max(18px, calc(1.55 * var(--u))); text-wrap: pretty; }

.facts { border-top: 1px solid var(--rule); font-family: var(--mono); font-size: max(13px, calc(0.94 * var(--u))); color: var(--green-ink); margin: 0; padding: 0; list-style: none; }
.facts li { display: flex; justify-content: space-between; gap: 18px; padding: max(10px, calc(0.68 * var(--u))) 0; border-bottom: 1px solid var(--rule); }
.facts li span:last-child { text-align: right; }

.chips { display: flex; flex-wrap: wrap; gap: max(8px, calc(0.52 * var(--u))); margin: 0; padding: 0; list-style: none; }
.chips li { font-family: var(--mono); font-size: max(13px, calc(0.88 * var(--u))); color: var(--green-ink); border: 1px solid var(--green-line); border-radius: 4px; padding: 0.4em 0.8em; }
.chips li.more { color: var(--ink-3); border-style: dashed; border-color: rgba(233, 238, 236, 0.28); }

.shot { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; height: 100%; justify-content: center; }
.frame {
  --bw: max(5px, calc(0.47 * var(--u)));
  flex: none; max-width: 100%;
  border: var(--bw) solid var(--frame); outline: 1px solid var(--rule);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); overflow: hidden; background: #0b0f0d;
}
/* screenshots are pre-cropped per slide: shown whole, never cropped or stretched past native size */
.frame img { width: auto; height: auto; max-width: 100%; max-height: calc(37.5 * var(--u) - 2 * var(--bw)); }
.label {
  align-self: flex-start; margin-top: max(10px, calc(0.83 * var(--u)));
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--mono); font-size: max(11px, calc(0.78 * var(--u))); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green-ink); border: 1px solid var(--green-line); border-radius: 999px; padding: 0.4em 1.05em;
}
.label.live { background: var(--green-tint); }
.label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* status marks in facts: ✓ freigegeben (green) / ✗ abgewiesen (warn) — text + icon, never a fill */
.st { display: inline-flex; align-items: center; gap: 0.45em; }
.st svg { width: 1em; height: 1em; flex: none; }
.facts li.deny span:last-child { color: var(--warn); }
.facts li.deny .st { border: 1px solid var(--warn-line); border-radius: 999px; padding: 0.1em 0.7em 0.1em 0.55em; }

/* placeholder frame: clearly not a screenshot */
.frame.placeholder { width: 100%; aspect-ratio: 3 / 2; max-height: calc(37.5 * var(--u)); border: 1px dashed rgba(233, 238, 236, 0.3); outline: 0; box-shadow: none; background: transparent; display: grid; place-items: center; }
.ph { display: flex; flex-direction: column; align-items: center; gap: max(8px, calc(0.6 * var(--u))); text-align: center; font-family: var(--mono); color: var(--ink-3); font-size: max(12px, calc(0.85 * var(--u))); padding: 16px; }
.ph-tag { letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); border: 1px dashed rgba(233, 238, 236, 0.3); padding: 0.35em 0.9em; }
.ph-file { font-size: max(11px, calc(0.7 * var(--u))); }

/* schema: Stadtwerke → Stadt */
.schema { flex: 0 1 auto; min-height: 0; height: 100%; max-height: calc(37.5 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) max(120px, calc(9.5 * var(--u))) minmax(0, 0.85fr); align-items: stretch; }
.org { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding-top: max(14px, calc(1.2 * var(--u))); min-width: 0; }
.org-head { display: flex; align-items: center; gap: max(10px, calc(0.8 * var(--u))); margin-bottom: max(14px, calc(1.3 * var(--u))); }
.org-head svg { width: max(34px, calc(2.6 * var(--u))); height: max(34px, calc(2.6 * var(--u))); flex: none; }
.org-role { font-family: var(--mono); font-size: max(10px, calc(0.66 * var(--u))); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.35em; }
.org-name { font-weight: 600; font-size: max(15px, calc(1.05 * var(--u))); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.flow li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: max(10px, calc(0.78 * var(--u))) 0; border-bottom: 1px solid var(--rule); }
.flow .n { font-size: max(15px, calc(1.02 * var(--u))); color: var(--ink); }
.flow .d { font-family: var(--mono); font-size: max(11px, calc(0.78 * var(--u))); color: var(--green-ink); text-align: right; }
.flow li.end { border-top: 1px solid var(--green-line); border-bottom-color: var(--green-line); margin-top: -1px; }
.org.right .flow { margin-top: auto; }
.org.left .flow li:last-child { margin-top: auto; }
.bound { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: max(10px, calc(0.5 * var(--u))); }
.bound::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(233, 238, 236, 0.32); }
.bound-label { position: absolute; top: max(14px, calc(1.2 * var(--u))); left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: max(10px, calc(0.62 * var(--u))); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); background: var(--bg); padding: 0.3em 0.5em; white-space: nowrap; }
.handover { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35em; background: var(--bg); padding: 0.4em 0; font-family: var(--mono); font-size: max(10px, calc(0.66 * var(--u))); letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-ink); text-align: center; line-height: 1.3; }
.handover svg { width: max(64px, calc(5.2 * var(--u))); height: 12px; color: var(--green); }
.handover .down { display: none; }

/* centered slides: opener and closer */
.slide.center { gap: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(2.9 * var(--u)) calc(10.4 * var(--u)); }
.city { display: flex; align-items: center; gap: max(14px, calc(1.35 * var(--u))); margin-bottom: max(24px, calc(2.4 * var(--u))); color: var(--blue); text-align: left; }
.city svg { width: max(56px, calc(5 * var(--u))); height: max(56px, calc(5 * var(--u))); flex: none; }
.city-name { font-family: var(--logo); font-weight: 400; font-size: max(24px, calc(2.08 * var(--u))); line-height: 1; letter-spacing: 0.06em; }
.city-tag { font-family: var(--logo); font-size: max(11px, calc(0.78 * var(--u))); letter-spacing: 0.3em; text-transform: uppercase; margin-top: 0.5em; }
.slide h1 { font-weight: 600; font-size: max(32px, calc(4.06 * var(--u))); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 max(20px, calc(2 * var(--u))); text-wrap: balance; }
.slide.center .rule { width: max(64px, calc(6.25 * var(--u))); margin: 0 auto max(20px, calc(2 * var(--u))); }
.slide.center .lede { font-size: max(16px, calc(1.46 * var(--u))); max-width: calc(61 * var(--u)); margin-bottom: 0; }
.eyebrow { font-family: var(--mono); font-size: max(12px, calc(1.04 * var(--u))); letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-ink); margin-bottom: max(18px, calc(1.56 * var(--u))); }
.slide h2.xl { font-size: max(34px, calc(4.4 * var(--u))); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: max(18px, calc(1.77 * var(--u))); }
.contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: max(12px, calc(1.2 * var(--u))) max(20px, calc(2.1 * var(--u))); margin-top: max(26px, calc(2.7 * var(--u))); font-family: var(--mono); font-size: max(14px, calc(1.25 * var(--u))); }
.contact .sep { width: 1px; height: 1.2em; background: var(--rule); }
.event { margin-top: max(18px, calc(1.6 * var(--u))); font-family: var(--mono); font-size: max(12px, calc(0.9 * var(--u))); letter-spacing: 0.06em; color: var(--ink-2); }

/* evidence slide */
.slide.list { gap: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.slide.list .eyebrow { margin-bottom: max(10px, calc(0.94 * var(--u))); }
.slide.list h2 { margin-bottom: max(10px, calc(0.73 * var(--u))); }
.slide.list .rule { height: 2px; margin-bottom: max(18px, calc(1.56 * var(--u))); }
.proofs { border-top: 1px solid var(--rule); margin: 0; padding: 0; list-style: none; }
.proofs li { display: grid; grid-template-columns: calc(3.85 * var(--u)) minmax(0, 1fr) auto; gap: calc(1.56 * var(--u)); align-items: baseline; padding: max(12px, calc(1.1 * var(--u))) 0; border-bottom: 1px solid var(--rule); }
.proofs .n { font-family: var(--mono); font-weight: 500; font-size: max(15px, calc(1.15 * var(--u))); color: var(--green); }
.proofs .t { font-size: max(17px, calc(1.6 * var(--u))); font-weight: 600; letter-spacing: -0.02em; }
.proofs .d { font-family: var(--mono); font-size: max(12px, calc(0.88 * var(--u))); color: var(--green-ink); text-align: right; }

/* ---------- footer ---------- */
.bar-bottom {
  flex: none;
  display: flex; align-items: center; gap: max(16px, calc(2 * var(--u)));
  padding: max(12px, calc(1.15 * var(--u))) max(16px, calc(4.6 * var(--u))) max(14px, calc(2 * var(--u)));
  border-top: 1px solid var(--rule);
}
.city-s { display: flex; align-items: center; gap: max(10px, calc(0.73 * var(--u))); color: var(--blue); flex: none; }
.city-s svg { width: max(32px, calc(2.1 * var(--u))); height: max(32px, calc(2.1 * var(--u))); }
.city-s .city-name { font-size: max(16px, calc(1.1 * var(--u))); }
.city-s .city-tag { font-size: max(9px, calc(0.57 * var(--u))); letter-spacing: 0.22em; margin-top: 0.35em; }

.progress { flex: 1; display: flex; gap: max(6px, calc(0.63 * var(--u))); margin: 0; padding: 0; list-style: none; min-width: 0; }
.progress li { flex: 1; }
.progress button {
  display: block; width: 100%; padding: 10px 0; border: 0; background: none; cursor: pointer;
}
.progress .track { display: block; height: 3px; background: rgba(233, 238, 236, 0.16); overflow: hidden; }
.progress .fill { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left center; }
.progress li.done .fill, .progress li.current .fill { transform: scaleX(1); }
.progress button:hover .track { background: rgba(233, 238, 236, 0.3); }

.controls { display: flex; align-items: center; gap: 8px; flex: none; }
.btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; cursor: pointer;
}
.btn:hover { border-color: var(--green-line); color: var(--green-ink); }
.btn:active { background: var(--green-tint); }
.btn svg { width: 20px; height: 20px; }
.count { font-family: var(--mono); font-size: 13px; color: var(--ink-3); min-width: 4.2em; text-align: center; font-variant-numeric: tabular-nums; }
.meta { font-family: var(--mono); font-size: max(11px, calc(0.73 * var(--u))); letter-spacing: 0.08em; color: var(--ink-3); white-space: nowrap; flex: none; }

/* ---------- kiosk: auto-advance, no controls ---------- */
.kiosk .controls { display: none; }
.kiosk .progress button { cursor: default; pointer-events: none; }
.kiosk .progress li.current .fill { transform: scaleX(0); animation: fill var(--dwell, 8000ms) linear forwards; }
.kiosk.paused .progress li.current .fill { animation-play-state: paused; }
.kiosk.idle, .kiosk.idle * { cursor: none !important; }
@keyframes fill { to { transform: scaleX(1); } }

/* ---------- mid widths: drop secondary chrome ---------- */
@container loop (max-width: 1180px) {
  .kicker, .meta { display: none; }
}

/* ---------- short landscape (e.g. 924×540, embedded iframe): lower the px floors ---------- */
@container loop (min-aspect-ratio: 1/1) and (max-height: 700px) {
  .slide h2 { font-size: max(21px, calc(2.6 * var(--u))); margin-bottom: max(9px, calc(1.25 * var(--u))); }
  .rule { margin-bottom: max(9px, calc(1.25 * var(--u))); }
  .lede { font-size: max(13.5px, calc(1.3 * var(--u))); line-height: 1.42; margin-bottom: max(11px, calc(1.55 * var(--u))); }
  .num { margin-bottom: max(6px, calc(0.8 * var(--u))); }
  .facts { font-size: max(11.5px, calc(0.94 * var(--u))); }
  .facts li { padding: max(6px, calc(0.68 * var(--u))) 0; }
}

/* ---------- portrait / phone: stacked, scrollable slides ---------- */
@container loop (max-aspect-ratio: 1/1) or (max-width: 819px) {
  .demo .sep, .demo .where { display: none; }
  .slide, .slide.center, .slide.list {
    display: block; overflow-y: auto; overscroll-behavior: contain;
    padding: 24px 20px 28px; text-align: left;
  }
  .slide.center { display: flex; align-items: flex-start; justify-content: center; }
  .slide.center .rule { margin-left: 0; }
  .slide.center .lede { max-width: none; }
  .slide h1 { text-wrap: pretty; }
  .contact { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
  .contact .sep { display: none; }
  .shot { height: auto; margin-top: 24px; }
  .shot { align-items: stretch; }
  .frame img { width: 100%; max-height: none; }
  .proofs li { grid-template-columns: 36px minmax(0, 1fr); row-gap: 4px; }
  .schema { height: auto; max-height: none; margin-top: 24px; grid-template-columns: minmax(0, 1fr); }
  .org.left .flow li:last-child { margin-top: 0; }
  .bound { flex-direction: row; justify-content: center; padding: 18px 0; }
  .bound::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
  .bound-label { top: 50%; left: 0; transform: translateY(-50%); padding-left: 0; }
  .handover { padding: 0 0.6em; flex-direction: row; gap: 0.6em; }
  .handover .right-arrow { display: none; }
  .handover .down { display: block; width: 12px; height: 22px; }
  .frame.placeholder { aspect-ratio: 3 / 2; max-height: none; }
  .proofs .d { grid-column: 2; text-align: left; }
  .city-s .city-text { display: none; }
  .bar-bottom { gap: 12px; }
}
@container loop (max-width: 480px) {
  .city-s { display: none; }
  .count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --fade: 0ms; }
}

/* no JS: show everything as a readable page */
.no-js .loop { height: auto; overflow: visible; }
.no-js .slide { position: static; opacity: 1; visibility: visible; min-height: 80vh; border-bottom: 1px solid var(--rule); }
.no-js .bar-bottom { display: none; }