/* ==========================================================================
   Garage "Band". Nach jesperlandberg.com, in der Sprache der Seite:
   Tinte #08080d, Gelb und Cyan, Space Grotesk, JetBrains Mono, IBM Plex Sans.
   Die Fahrzeuge haengen als gebogene Karten ueber einem Gitterboden, Staub schwebt im
   Raum und wird beim schnellen Scrollen zum Hyperraum. Kein style.css, die Seite steht
   fuer sich, deshalb stehen Schriften und Farben hier noch einmal.
   ========================================================================== */
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-variable.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }

:root {
  --ink: #08080d; --panel: #131319; --paper: #f4f4f2; --muted: #a7a7b8;
  --yellow: #f5e000; --cyan: #33e6e0; --line: #2a2a35;
  --head: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --weich: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--head); }
/* Der Seitenkopf kommt aus style.css. Dessen Grundraster und das sanfte Scrollen passen hier
   nicht: das Band hat seinen eigenen Boden, und das Skript springt beim Schliessen einer Karte
   ohne Gleiten an die richtige Stelle. */
html { scroll-behavior: auto; }
body { background-image: none; }
/* Kein Nachfedern am Anfang und Ende (Safari), sonst zuckt das Band mit */
html, body { overscroll-behavior-y: none; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Ecken ---------- */
.ecke { position: fixed; z-index: 10; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.ecke-lu { bottom: 26px; left: 32px; } .ecke-ru { bottom: 26px; right: 32px; text-align: right; }
.ecke-lu b { color: var(--yellow); font-weight: 600; }
.recht { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.recht a { color: rgba(167,167,184,0.7); text-decoration: none; }
.recht a:hover, .recht a:focus-visible { color: var(--paper); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.detail:focus { outline: none; }

/* ---------- Raum ---------- */
#staub { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* WebGL-Flaeche fuer Band und Staub, ueber dem Gitterboden. Klicks rechnet das Skript nach. */
.gl-flaeche { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.buehne { position: fixed; inset: 0; z-index: 1; perspective: 900px; perspective-origin: 50% 46%; overflow: hidden; }
.boden {
  position: absolute; left: -50%; right: -50%; top: 58%; height: 140vh;
  transform-origin: 50% 0; transform: rotateX(78deg);
  background:
    linear-gradient(rgba(245,224,0,0.13) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(90deg, rgba(245,224,0,0.13) 1px, transparent 1px) 0 0 / 84px 84px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 40%, transparent 85%);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 40%, transparent 85%);
}
.ring { position: absolute; left: 50%; top: 45%; width: 0; height: 0; transform-style: preserve-3d; }
.streifen { position: absolute; top: 0; left: 0; backface-visibility: hidden; background-repeat: no-repeat; cursor: pointer; }
.streifen.erster { border-radius: 18px 0 0 18px; }
.streifen.letzter { border-radius: 0 18px 18px 0; }

.auftakt { position: fixed; left: 0; right: 0; top: 63%; z-index: 2; margin: 0; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); pointer-events: none; }
.auftakt small { display: block; margin-top: 14px; color: var(--muted); letter-spacing: 0.18em; font-size: 11px; }

/* ---------- Detail ---------- */
.detail { position: fixed; inset: var(--gb-kopf, 0px) 0 0 0; z-index: 30; background: var(--ink); display: none; }
.detail.offen { display: block; }
.detail-innen { overscroll-behavior: contain; position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding: 60px 32px 32px; overflow: hidden; }
.detail-bild { position: relative; border-radius: 18px; overflow: hidden; background: var(--panel); }
.detail-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-text { overscroll-behavior: contain; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.detail .marke { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin: 0 0 18px; }
.detail h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 0.95; letter-spacing: -0.04em; font-weight: 700; margin: 0 0 24px; text-wrap: balance; }
.detail .text { font-family: var(--body); font-size: 1.06rem; line-height: 1.65; max-width: 46ch; color: rgba(244,244,242,0.84); margin: 0 0 26px; }
.zahlen { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 0 0 22px; }
.zahlen span { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.zahlen b { white-space: nowrap; font-family: var(--head); font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; color: var(--yellow); }
.sheet { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); text-decoration: none; margin: 0 0 26px; align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.daumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-bottom: 24px; }
.daumen button { padding: 0; border: 0; background: var(--panel); aspect-ratio: 1; border-radius: 10px; overflow: hidden; cursor: pointer; opacity: 0.62; transition: opacity 0.2s, transform 0.3s var(--weich); }
.daumen button:hover { opacity: 1; transform: translateY(-2px); }
.daumen button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--yellow); }
.daumen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-fuss { margin-top: auto; display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.detail-fuss button, .zu { background: none; border: 0; color: var(--muted); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; padding: 6px 0; }
.detail-fuss button:hover, .zu:hover { color: var(--paper); }
.detail-fuss button:disabled { opacity: 0.25; cursor: default; color: var(--muted); }
.zu { position: absolute; top: 22px; right: 32px; z-index: 2; background: rgba(8,8,13,0.85); padding: 6px 10px; border-radius: 4px; }
.detail .inhalt-rein { animation: gb-rein 0.6s var(--weich) both; }
/* Das fliegende Foto zwischen Karte und Ansicht */
.flieger { position: fixed; z-index: 35; display: none; border-radius: 18px; overflow: hidden; pointer-events: none; background: var(--panel); }
.flieger img, .flieger canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.detail.fliegt { background: transparent; }
.detail.fliegt .detail-bild { visibility: hidden; }
.detail.fliegt .detail-text, .detail.fliegt .zu { opacity: 0; transition: opacity 0.18s; }
@keyframes gb-rein { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .ecke-lu { bottom: 44px; left: 16px; } .ecke-ru { bottom: 44px; right: 16px; max-width: 55vw; }
  .recht { bottom: 16px; }
  .buehne { perspective: 520px; }
  .auftakt { top: 60%; font-size: 11px; }
  .detail-innen { grid-template-columns: 1fr; grid-template-rows: 44svh auto; padding: 54px 16px 16px; overflow-y: auto; gap: 22px; }
  .detail-text { overflow: visible; }
  .zu { top: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .detail .inhalt-rein { animation: none; }
}