/*
 * VeloPass eGate – Kiosk
 *
 * Folgt dem Editorial-Design des Event-Systems: Schwarz/Weiß, eckige Kanten,
 * Space Grotesk für Überschriften, Inter für Text, Gold als einziger Akzent.
 *
 * Alle Maße hängen an --s: einem Faktor aus Bildschirmhöhe und -breite.
 * Bezugsgröße sind 1080 Punkte Höhe - auf einem 10-Zoll-Tablet soll dasselbe
 * Layout tragen wie auf einem großen Touchmonitor.
 */

@font-face { font-family: "Inter"; src: url("fonts/inter-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --black: #000000;
  --dark: #111111;
  --gray-800: #333333;
  --gray-600: #666666;
  --gray-500: #888888;
  --gray-400: #aaaaaa;
  --gray-300: #cccccc;
  --gray-200: #e0e0e0;
  --gray-50: #f8f8f8;
  --white: #ffffff;
  --accent: #b8860b;
  --success: #2d8a56;
  --warning: #c4850a;
  --danger: #c43c3c;

  --heading: "Space Grotesk", "Inter", "Roboto", sans-serif;
  --body: "Inter", "Roboto", "Noto Sans", sans-serif;

  --s: clamp(0.62px, min(100vh / 1080, 100vw / 1100), 1.6px);

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--white);
  color: var(--dark);
  font-family: var(--body);
  font-size: calc(20 * var(--s));
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body { overflow: hidden; user-select: none; -webkit-user-select: none; }

[hidden] { display: none !important; }

button { font: inherit; color: inherit; touch-action: manipulation; }

.pre { white-space: pre-line; }

/* ---------- Gerüst ---------- */

.boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--gray-600);
  font-size: 18px;
  line-height: 1.6;
}
.boot code { background: var(--gray-50); padding: 2px 6px; color: var(--dark); }

.kiosk {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.header {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--s));
  padding: calc(14 * var(--s)) calc(28 * var(--s));
  border-bottom: 1px solid var(--gray-200);
}
.header-text { flex: 1; min-width: 0; }
.header-title {
  font-family: var(--heading);
  font-size: calc(21 * var(--s));
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-event { font-size: calc(15 * var(--s)); color: var(--gray-500); }
.clock {
  font-family: var(--heading);
  font-size: calc(22 * var(--s));
  font-weight: 600;
  padding: 0 calc(6 * var(--s));
  white-space: nowrap;
}
.kiosk-id {
  font-size: calc(13 * var(--s));
  font-weight: 500;
  color: var(--gray-500);
  padding: calc(6 * var(--s)) calc(12 * var(--s));
  border: 1px solid var(--gray-200);
  background: var(--white);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.kiosk-id:active { background: var(--gray-50); }

.offline-badge {
  background: rgba(196, 133, 10, 0.12);
  color: #8a5d05;
  font-size: calc(13 * var(--s));
  font-weight: 600;
  padding: calc(5 * var(--s)) calc(12 * var(--s));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.screens {
  flex: 1;
  position: relative;
  min-height: 0;
}

.screen {
  position: absolute;
  inset: calc(24 * var(--s)) calc(48 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--s));
  text-align: center;
  overflow-y: auto;
}

.footer {
  display: flex;
  justify-content: flex-end;
  gap: calc(8 * var(--s));
  padding: calc(10 * var(--s)) calc(28 * var(--s)) calc(18 * var(--s));
}

/* ---------- Bildschirme ---------- */

.eyebrow {
  font-size: calc(16 * var(--s));
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.title {
  margin: 0;
  font-family: var(--heading);
  font-size: calc(64 * var(--s));
  font-weight: 700;
  line-height: 1.05;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.title-result { font-size: calc(56 * var(--s)); }
.hint {
  margin: 0;
  font-size: calc(24 * var(--s));
  color: var(--gray-600);
  white-space: pre-line;
  max-width: 40em;
}
.hint-left { text-align: left; }
.guest-name {
  font-family: var(--heading);
  font-size: calc(80 * var(--s));
  font-weight: 700;
  line-height: 1.05;
  color: var(--black);
  overflow-wrap: anywhere;
}
.guest-meta { font-size: calc(28 * var(--s)); color: var(--gray-600); }
.countdown { font-size: calc(16 * var(--s)); color: var(--gray-500); }

.actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(16 * var(--s));
  margin-top: calc(30 * var(--s));
}

.people {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: calc(12 * var(--s));
  justify-content: center;
}
.people:empty { display: none; }

/* Scanmarke: vier Ecken, angedeuteter QR-Code, wandernder Suchstrahl in Gold */
.scan-target {
  position: relative;
  width: calc(240 * var(--s));
  height: calc(240 * var(--s));
  flex: none;
}
.scan-target svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scan-corners { fill: none; stroke: var(--black); stroke-width: 6; stroke-linecap: square; }
.scan-qr rect { fill: var(--black); opacity: 0.14; }
.scan-beam {
  stroke: var(--accent);
  stroke-width: 5;
  opacity: 0.9;
  animation: beam 2.5s ease-in-out infinite alternate;
}
@keyframes beam { from { transform: translateY(0); } to { transform: translateY(108px); } }

/* Mit Livebild der Kamera: größer, ohne QR-Andeutung */
.scan-target.live { width: calc(340 * var(--s)); height: calc(340 * var(--s)); }
.scan-target.live .scan-qr { display: none; }
.scan-target .camera-video {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
}

.camera-video { object-fit: cover; background: var(--dark); display: block; }
.camera-video.mirrored { transform: scaleX(-1); }

.spinner {
  width: calc(84 * var(--s));
  height: calc(84 * var(--s));
  border: calc(8 * var(--s)) solid var(--gray-200);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-bottom: calc(24 * var(--s));
}
@keyframes spin { to { transform: rotate(360deg); } }

.glyph { width: calc(120 * var(--s)); height: calc(120 * var(--s)); flex: none; }
.glyph rect { opacity: 0.1; }
.glyph path { fill: none; stroke-width: 8.5; stroke-linecap: round; stroke-linejoin: round; }
.glyph-ok rect { fill: var(--success); }
.glyph-ok path { stroke: var(--success); }
.glyph-error rect { fill: var(--danger); }
.glyph-error path { stroke: var(--danger); }

/* ---------- Schaltflächen ---------- */

.btn {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 0;
  padding: calc(18 * var(--s)) calc(36 * var(--s));
  font-size: calc(18 * var(--s));
  font-weight: 500;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.btn:active { background: var(--black); border-color: var(--black); color: var(--white); }
.btn:disabled { color: var(--gray-400); border-color: var(--gray-200); background: var(--white); }
.btn-small { padding: calc(10 * var(--s)) calc(20 * var(--s)); font-size: calc(15 * var(--s)); }

.btn-primary { background: var(--black); border-color: var(--black); color: var(--white); }
.btn-primary:active { background: #4a4a4a; border-color: #4a4a4a; }
.btn-primary:disabled { background: var(--gray-400); border-color: var(--gray-400); color: var(--white); }

.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:active { background: var(--danger); border-color: var(--danger); color: var(--white); }

@media (hover: hover) {
  .btn:hover:not(:disabled) { background: var(--gray-50); border-color: var(--black); }
  .btn-primary:hover:not(:disabled) { background: var(--gray-800); border-color: var(--gray-800); }
  .btn-danger:hover:not(:disabled) { background: var(--danger); color: var(--white); }
}

.btn-language {
  padding: calc(8 * var(--s)) calc(18 * var(--s));
  font-size: calc(14 * var(--s));
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn-language[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); }

/* Personenauswahl: wie die Filter-Pillen der Website */
.person {
  padding: calc(16 * var(--s)) calc(26 * var(--s));
  font-size: calc(22 * var(--s));
  font-weight: 500;
  color: var(--gray-500);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 0;
}
.person[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); }

/* ---------- Overlays: Servicebereich, Einrichtung, Kamera ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24 * var(--s));
  background: rgba(0, 0, 0, 0.55);
}
.overlay-setup { background: var(--gray-50); }

.panel {
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  overflow-y: auto;
  background: var(--white);
  border-top: 3px solid var(--black);
  padding: calc(28 * var(--s)) calc(36 * var(--s));
  user-select: text;
  -webkit-user-select: text;
}
.panel-setup { max-width: 760px; padding: calc(36 * var(--s)) calc(44 * var(--s)); }
.panel-camera { max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--s)); }

.camera-frame { width: 100%; aspect-ratio: 4 / 3; background: var(--dark); }
.camera-frame .camera-video { width: 100%; height: 100%; }

.service-title {
  margin: 0;
  font-family: var(--heading);
  font-size: calc(32 * var(--s));
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.service-subtitle { margin: 0; font-size: calc(15 * var(--s)); color: var(--gray-500); }
.status { margin: calc(12 * var(--s)) 0 0; font-size: calc(16 * var(--s)); color: var(--gray-800); text-align: center; min-height: 1.35em; }

.section-title {
  margin: calc(22 * var(--s)) 0 calc(10 * var(--s));
  padding-bottom: calc(6 * var(--s));
  border-bottom: 1px solid var(--gray-200);
  font-size: calc(13 * var(--s));
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(8 * var(--s)) calc(16 * var(--s));
  margin: 0;
}
.info dt, .info-key {
  font-size: calc(13 * var(--s));
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.info dd { margin: 0; text-align: right; font-size: calc(16 * var(--s)); font-weight: 500; }
.info-value { font-size: calc(16 * var(--s)); font-weight: 500; margin: calc(6 * var(--s)) 0; }

.state-ok { color: var(--success); font-weight: 600; }
.state-warn { color: var(--warning); font-weight: 600; }
.state-error { color: var(--danger); font-weight: 600; }
.state-idle { color: var(--gray-500); font-weight: 600; }

/* Kennzahl wie .te-stat: Rahmen mit schwarzer Oberkante */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--s)); margin-top: calc(16 * var(--s)); }
.stat { border: 1px solid var(--gray-200); border-top: 2px solid var(--black); padding: calc(14 * var(--s)) calc(18 * var(--s)); }
.stat-value { font-family: var(--heading); font-size: calc(34 * var(--s)); font-weight: 700; color: var(--black); }
.stat-label {
  font-size: calc(12 * var(--s));
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.service-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(16 * var(--s)); }
.button-row { display: flex; gap: calc(12 * var(--s)); margin-top: calc(14 * var(--s)); }
.button-row .btn { flex: 1; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--s)); }

.label-preview {
  display: block;
  max-width: 100%;
  max-height: calc(220 * var(--s));
  margin-top: calc(14 * var(--s));
  border: 1px dashed var(--gray-300);
}

.log {
  margin: 0;
  max-height: calc(260 * var(--s));
  overflow: auto;
  font-size: calc(12 * var(--s));
  line-height: 1.45;
  color: var(--gray-800);
  background: var(--gray-50);
  padding: calc(10 * var(--s));
  white-space: pre-wrap;
  user-select: text;
}

/* PIN */
.pin-step { display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--s)); text-align: center; }
.pin-dots { display: flex; gap: calc(14 * var(--s)); margin: calc(10 * var(--s)) 0; }
.pin-dots span { width: calc(20 * var(--s)); height: calc(20 * var(--s)); border: 2px solid var(--gray-300); }
.pin-dots span.filled { border-color: var(--black); background: var(--black); }
.pin-error { margin: 0; color: var(--danger); font-weight: 600; font-size: calc(16 * var(--s)); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--s)); margin-bottom: calc(10 * var(--s)); }
.keypad button {
  min-width: calc(90 * var(--s));
  padding: calc(18 * var(--s));
  font-family: var(--heading);
  font-size: calc(30 * var(--s));
  font-weight: 600;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 0;
}
.keypad button:active { background: var(--black); color: var(--white); border-color: var(--black); }
.keypad .key-small { font-family: var(--body); font-size: calc(15 * var(--s)); text-transform: uppercase; letter-spacing: 0.04em; }

/* Einrichtung */
.setup-page { display: flex; flex-direction: column; gap: calc(14 * var(--s)); }
.setup-page .service-subtitle { margin-bottom: calc(4 * var(--s)); }
.setup-buttons { display: flex; justify-content: space-between; gap: calc(12 * var(--s)); margin-top: calc(16 * var(--s)); }
.setup-cancel { text-align: center; margin-top: calc(8 * var(--s)); }
.field { display: flex; flex-direction: column; gap: calc(6 * var(--s)); }
.inline-field { display: flex; gap: calc(12 * var(--s)); align-items: center; }
.inline-field input { flex: 1; }
.inline-field .state { flex: 1; font-size: calc(16 * var(--s)); }
.check { display: flex; gap: calc(10 * var(--s)); align-items: center; font-size: calc(16 * var(--s)); }
.check input { width: calc(22 * var(--s)); height: calc(22 * var(--s)); accent-color: var(--black); }

input[type="text"], input[type="url"], input[type="password"], select {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 0;
  padding: calc(13 * var(--s)) calc(15 * var(--s));
  font: inherit;
  font-size: calc(19 * var(--s));
  color: var(--dark);
}
input:focus, select:focus { outline: none; border-color: var(--black); }
.pin-input { text-align: center; letter-spacing: 0.4em; font-size: calc(28 * var(--s)) !important; }