/* VEND24 · „Nachtschalter" — Automat bei Nacht: Stahlblau + Amber-LED */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/unbounded.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/assets/fonts/schibsted-grotesk.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: oklch(0.155 0.02 235);
  --bg-deep: oklch(0.12 0.02 240);
  --panel: oklch(0.21 0.025 230);
  --panel-edge: oklch(0.3 0.035 225);
  --steel: oklch(0.55 0.09 210);
  --steel-soft: oklch(0.42 0.06 218);
  --ink: oklch(0.94 0.008 220);
  --muted: oklch(0.76 0.02 220);
  --amber: oklch(0.83 0.15 75);
  --amber-deep: oklch(0.68 0.14 62);
  --led-bg: oklch(0.13 0.015 250);
  --glass-tint: oklch(0.26 0.03 230 / 0.55);

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-led: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, monospace;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.5rem;

  --r-s: 8px;
  --r-m: 14px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-deep: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.35), 0 24px 64px oklch(0 0 0 / 0.35);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { color-scheme: dark; }
body {
  min-height: 100svh;
  overflow-x: clip;
  background:
    radial-gradient(60rem 32rem at 72% 78%, oklch(0.45 0.1 70 / 0.1), transparent 60%),
    radial-gradient(48rem 30rem at 20% 10%, oklch(0.3 0.05 225 / 0.35), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.scene {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  max-width: 74rem;
  margin-inline: auto;
  padding: var(--space-3) clamp(1.1rem, 4vw, 2.5rem);
}

/* ---------- Header ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.35rem 0.2rem;
}
.wordmark__tile {
  display: inline-grid;
  place-items: center;
  padding: 0.12em 0.34em;
  border-radius: var(--r-s);
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
  color: oklch(0.2 0.05 60);
  box-shadow: 0 0 18px oklch(0.75 0.15 70 / 0.4), inset 0 1px 0 oklch(1 0 0 / 0.35);
}
.top__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.45; } }

/* ---------- Hero-Layout ---------- */
.hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(var(--space-4), 6vw, 6rem);
  padding-block: var(--space-4);
}
.hero__copy { max-width: 34rem; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw + 0.4rem, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-block-end: var(--space-3);
}
.hero__lead {
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;
  margin-block-end: var(--space-4);
}
.hero__hint {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--amber);
}

/* Entrance-Stagger */
.hero__title, .hero__lead, .hero__hint { animation: rise 0.9s var(--ease-out) both; }
.hero__lead { animation-delay: 0.12s; }
.hero__hint { animation-delay: 0.24s; }
.machine { animation: rise 1s var(--ease-out) 0.18s both; }
@keyframes rise {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- Automat ---------- */
.machine {
  background: linear-gradient(180deg, var(--panel), oklch(0.17 0.022 232));
  border: 1px solid var(--panel-edge);
  /* konzentrisch: außen = innen (r-m) + Padding (space-3) */
  border-radius: calc(var(--r-m) + var(--space-3));
  padding: var(--space-3);
  min-width: 0;
  box-shadow: var(--shadow-deep);
  max-width: 26rem;
  width: 100%;
  justify-self: center;
}

/* LED-Zeile */
.machine__display {
  position: relative;
  background: var(--led-bg);
  border-radius: var(--r-m);
  padding: 0.7rem 1rem;
  border: 1px solid oklch(0.28 0.03 240);
  box-shadow: inset 0 2px 8px oklch(0 0 0 / 0.55);
  margin-block-end: var(--space-2);
}
.machine__display::after { /* Dot-Matrix-Scanlines */
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, oklch(0 0 0 / 0.22) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.led {
  font-family: var(--font-led);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  color: var(--amber);
  text-shadow: 0 0 8px oklch(0.75 0.15 70 / 0.55);
  white-space: nowrap;
  overflow: hidden;
}
.led__cursor {
  display: inline-block;
  width: 0.55em; height: 1em;
  margin-inline-start: 0.3em;
  background: var(--amber);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Glasfach */
.machine__glass {
  position: relative;
  background: linear-gradient(200deg, var(--glass-tint), oklch(0.16 0.02 235 / 0.9));
  border: 1px solid oklch(0.34 0.04 220 / 0.7);
  border-radius: var(--r-m);
  padding: var(--space-3) var(--space-2) 0;
  overflow: hidden;
}
.glass__sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, oklch(1 0 0 / 0.055) 46%, oklch(1 0 0 / 0.02) 55%, transparent 60%);
  pointer-events: none;
}
.slots {
  list-style: none;
  padding: 0;
  display: grid;
  /* Hero-Fach A1 bekommt mehr Breite fuer das Marken-Label */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-2);
}
.slot {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 0.5rem;
  padding-block-end: var(--space-2);
  min-height: 9.5rem;
}
.slot::after { /* Fachboden */
  content: '';
  position: absolute; inset: auto 6% 2.35rem;
  height: 3px;
  background: var(--steel-soft);
  border-radius: 2px;
}
.slot__tag {
  font-family: var(--font-led);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: oklch(0.8 0.03 220);
  background: oklch(0.14 0.02 240 / 0.85);
  border: 1px solid oklch(0.36 0.04 220 / 0.6);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}
.coil {
  width: 74%;
  height: 12px;
  border-radius: 999px;
  background: repeating-linear-gradient(100deg,
    oklch(0.66 0.05 215) 0 3px,
    oklch(0.3 0.04 225) 3px 9px);
  box-shadow: 0 2px 4px oklch(0 0 0 / 0.5);
  position: relative;
  z-index: 2;
  margin-block-start: -0.55rem;
}

/* Packungen */
.pack {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  text-align: center;
  width: 88%;
  padding: 0.9rem 0.4rem;
  border-radius: 10px 10px 6px 6px;
  font-family: var(--font-display);
}
.pack b {
  font-weight: 800;
  font-size: clamp(0.5rem, 2.55vw, 0.66rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pack i {
  font-style: normal;
  font-family: var(--font-body);
  font-size: clamp(0.5rem, 2.4vw, 0.62rem);
  opacity: 0.75;
}
@media (min-width: 56rem) {
  .pack b { font-size: 0.66rem; }
  .pack i { font-size: 0.62rem; }
}
.pack--can {
  background: linear-gradient(180deg, oklch(0.5 0.08 215), oklch(0.36 0.06 222));
  color: oklch(0.95 0.01 220);
  border-radius: 12px;
  box-shadow: inset 0 6px 10px oklch(1 0 0 / 0.14), inset 0 -8px 12px oklch(0 0 0 / 0.3);
}
.pack--chips {
  background: linear-gradient(170deg, oklch(0.42 0.055 250), oklch(0.3 0.045 255));
  color: oklch(0.93 0.01 230);
  clip-path: polygon(6% 0, 94% 0, 100% 8%, 96% 100%, 4% 100%, 0 8%);
  box-shadow: inset 0 4px 8px oklch(1 0 0 / 0.12);
}
.pack--site {
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
  color: oklch(0.22 0.06 55);
  box-shadow:
    0 0 0 1px oklch(0.9 0.1 80 / 0.5),
    0 0 26px oklch(0.75 0.15 70 / 0.38),
    inset 0 2px 0 oklch(1 0 0 / 0.4);
  animation: glow 3.2s ease-in-out infinite;
}
.pack--site b {
  display: grid;            /* VEND24 und .NET gestapelt statt ueberlaufend */
  white-space: normal;
  line-height: 1.2;
  letter-spacing: 0.06em;
}
.pack__tld {
  font-size: 0.82em;
  letter-spacing: 0.16em;
  opacity: 0.85;
}
@keyframes glow {
  50% { box-shadow: 0 0 0 1px oklch(0.9 0.1 80 / 0.5), 0 0 40px oklch(0.78 0.16 72 / 0.55), inset 0 2px 0 oklch(1 0 0 / 0.4); }
}

/* Basis: Keypad + Ausgabefach */
.machine__base {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.key {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 0.5rem;
  border-radius: var(--r-m);
  border: 1px solid oklch(0.42 0.06 215);
  background: linear-gradient(180deg, oklch(0.34 0.05 218), oklch(0.26 0.04 224));
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 0 oklch(0.18 0.03 230), 0 6px 16px oklch(0 0 0 / 0.4);
  transition-property: scale, box-shadow, filter;
  transition-duration: 0.18s;
  transition-timing-function: var(--ease-out);
}
.key:hover { filter: brightness(1.12); }
.key:active { scale: 0.96; box-shadow: 0 2px 0 oklch(0.18 0.03 230), 0 4px 10px oklch(0 0 0 / 0.4); }
.key--main {
  border-color: oklch(0.62 0.11 72);
  color: var(--amber);
  box-shadow: 0 4px 0 oklch(0.18 0.03 230), 0 6px 16px oklch(0 0 0 / 0.4), 0 0 14px oklch(0.75 0.15 70 / 0.25);
}
.key[aria-disabled="true"] { cursor: default; filter: saturate(0.6) brightness(0.85); }

.tray {
  position: relative;
  border-radius: var(--r-m);
  border: 1px solid oklch(0.3 0.035 228);
  background: linear-gradient(180deg, oklch(0.14 0.018 238), oklch(0.17 0.02 234));
  box-shadow: inset 0 4px 14px oklch(0 0 0 / 0.55);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 64px;
  padding: 0.6rem 1rem;
  overflow: hidden;
}
.tray__pack {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 44px;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
  color: oklch(0.22 0.06 55);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: 0 0 0 1px oklch(0.9 0.1 80 / 0.5), 0 0 16px oklch(0.75 0.15 70 / 0.4), inset 0 2px 0 oklch(1 0 0 / 0.4);
}
.machine.is-dispensed .tray__pack {
  animation: land 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes land {
  0%   { translate: 0 -22px; opacity: 0; }
  55%  { translate: 0 0; opacity: 1; scale: 1.06 0.88; }
  100% { scale: 1 1; }
}
.tray__flap {
  position: absolute; inset: auto 18% 0;
  height: 5px;
  border-radius: 3px 3px 0 0;
  background: var(--steel-soft);
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.tray__note {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
  animation: rise 0.7s var(--ease-out) both;
}
.tray.is-lit .tray__flap {
  background: var(--amber);
  box-shadow: 0 0 14px oklch(0.78 0.15 72 / 0.6);
}

/* Ausgabe-Animation */
.machine.is-vending [data-pack] {
  animation: dispense 1.15s cubic-bezier(0.5, 0, 0.85, 0.4) forwards;
}
@keyframes dispense {
  0%   { translate: 0 0; rotate: 0deg; opacity: 1; }
  35%  { translate: 0 10px; rotate: -3deg; }
  100% { translate: 0 120px; rotate: 8deg; opacity: 0; }
}
.machine.is-vending .slot--hero .coil { animation: spin 1s linear; }
@keyframes spin {
  from { background-position: 0 0; }
  to   { background-position: 48px 0; }
}

/* Spielerische Antworten: Fach wackelt, Automat zuckt */
.slot.is-wobble .pack { animation: wobble 0.65s var(--ease-out); }
.slot.is-wobble .coil { animation: spin 0.65s linear; }
@keyframes wobble {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: -2px 0; rotate: -2.5deg; }
  55% { translate: 2px 0; rotate: 2deg; }
  80% { translate: -1px 0; rotate: -1deg; }
}
.machine.is-shake { animation: shake 0.35s ease-in-out; }
@keyframes shake {
  0%, 100% { translate: 0 0; }
  30% { translate: -2px 0; }
  65% { translate: 2px 0; }
}

/* Licht-Sweep uebers Glas nach dem Laden */
.machine__glass::after {
  content: '';
  position: absolute;
  inset: -20% auto -20% 0;
  width: 45%;
  background: linear-gradient(105deg, transparent, oklch(1 0 0 / 0.07), transparent);
  transform: translateX(-160%) skewX(-12deg);
  animation: sheen 1.6s var(--ease-out) 1s forwards;
  pointer-events: none;
}
@keyframes sheen {
  to { transform: translateX(340%) skewX(-12deg); }
}

/* ---------- Footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid oklch(0.28 0.03 230 / 0.6);
  font-size: 0.85rem;
  color: var(--muted);
}
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.foot__nav a {
  text-decoration: none;
  padding-block: 0.65rem;
  border-block-end: 1px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.foot__nav a:hover { color: var(--ink); border-block-end-color: var(--amber); }
.foot__brand a {
  color: var(--ink);
  text-decoration-color: var(--amber);
  padding-block: 0.5rem;
}

/* ---------- Rechtsseiten ---------- */
.legal-main { flex: 1; padding-block: var(--space-4) var(--space-5); max-width: 46rem; }
.legal-main h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-block-end: var(--space-4);
  text-wrap: balance;
}
/* Lange deutsche Komposita (z. B. Verbraucherstreitbeilegung/…) duerfen nie den Viewport sprengen */
.legal-main h1, .prose h2, .prose h3, .prose h4 {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.prose h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  margin-block: var(--space-4) var(--space-2);
}
.prose h3 { font-size: 1.05rem; margin-block: var(--space-3) var(--space-1); }
.prose h4 { font-size: 0.95rem; margin-block: var(--space-2) var(--space-1); }
.prose p, .prose ul, .prose address { color: var(--muted); margin-block-end: var(--space-2); font-style: normal; text-wrap: pretty; }
.prose a { color: var(--ink); text-decoration-color: var(--amber); overflow-wrap: anywhere; }
.prose .legal-upper { font-size: 0.92rem; }
.legal-note {
  border: 1px solid oklch(0.4 0.08 75 / 0.5);
  background: oklch(0.75 0.14 75 / 0.07);
  border-radius: var(--r-m);
  padding: var(--space-2) var(--space-3);
  margin-block-end: var(--space-4);
  color: var(--ink);
  font-size: 0.9rem;
}

/* ---------- 404 ---------- */
.err-main { flex: 1; display: grid; place-content: center; text-align: center; gap: var(--space-3); padding-block: var(--space-5); }
.err-main .led { display: inline-block; }
.err-main h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 5vw, 3rem); }
.err-main p { color: var(--muted); }
.err-main a { color: var(--ink); text-decoration-color: var(--amber); }

/* ---------- Responsive ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 56rem) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); }
  .hero__copy { max-width: 100%; }
  .machine { justify-self: stretch; max-width: 24rem; margin-inline: auto; }
  .slot { min-height: 8.5rem; }
}
@media (max-width: 24rem) {
  body { font-size: 1rem; }
  .top__status { display: none; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__lead, .hero__hint, .machine, .tray__note { animation: none; }
  .dot, .led__cursor, .pack--site { animation: none; }
  .machine.is-vending [data-pack] { animation: none; opacity: 0; }
  .machine.is-vending .slot--hero .coil { animation: none; }
  .machine__glass::after { animation: none; }
  .machine.is-dispensed .tray__pack,
  .slot.is-wobble .pack,
  .slot.is-wobble .coil,
  .machine.is-shake { animation: none; }
  .key, .foot__nav a, .tray__flap { transition: none; }
}