/* Giona — eine Datei für alle Seiten
   Farben: Schiefer #23262A · Karbon #15171A · Granit #4A4F54
           Firn #EDEFEA · Nebel #9CA3A0 · Karbid #D6E64B
*/

:root {
  --schiefer: #23262A;
  --karbon: #15171A;
  --granit: #4A4F54;
  --firn: #EDEFEA;
  --nebel: #9CA3A0;
  --karbid: #D6E64B;

  --rail: 56px;
  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1500px;

  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --t: 220ms cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-left: var(--rail);
  background: var(--schiefer);
  color: var(--firn);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  text-wrap: pretty;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
h1 { font-size: clamp(2.6rem, 7vw, 6.4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--nebel);
}

a { color: var(--firn); text-decoration: none; }
a:hover { color: var(--karbid); }
.link { border-bottom: 1px solid var(--granit); padding-bottom: 2px; }
.link:hover { border-color: var(--karbid); }

:focus-visible {
  outline: 2px solid var(--karbid);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: fixed; top: 8px; left: calc(var(--rail) + 8px); z-index: 100;
  padding: 10px 16px; background: var(--karbid); color: var(--karbon);
  font-size: 0.875rem; transform: translateY(-200%);
}
.skip:focus { transform: none; color: var(--karbon); }

/* ---------- Signature: Höhenspur ---------- */

.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--rail);
  border-right: 1px solid var(--granit);
  background: var(--karbon);
}
.rail-track {
  position: absolute; left: 50%; top: 92px; bottom: 92px;
  width: 1px; background: var(--granit);
}
.rail-track::before, .rail-track::after {
  content: ""; position: absolute; left: -5px; width: 11px; height: 1px; background: var(--granit);
}
.rail-track::before { top: 0; }
.rail-track::after { bottom: 0; }

.rail-band {
  position: absolute; left: 50%; width: 3px; margin-left: -1px;
  background: rgba(214, 230, 75, 0.22);
  border-top: 1px solid var(--karbid);
  border-bottom: 1px solid var(--karbid);
}

.rail-marker {
  position: absolute; left: 50%; top: 92px;
  width: 19px; height: 3px; margin-left: -9.5px;
  background: var(--karbid);
  will-change: transform;
}

.rail-read {
  position: absolute; left: 0; top: 92px;
  width: var(--rail);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--karbid);
  transform: translateY(10px);
  pointer-events: none;
}
.rail-unit { color: var(--granit); }

/* ---------- Navigation ---------- */

.nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: clamp(16px, 4vw, 56px);
  padding: 18px var(--gutter);
  background: var(--schiefer);
  border-bottom: 1px solid var(--granit);
}
.logo {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--firn); margin: 0;
}
.nav nav { margin-right: auto; }
.nav ul { display: flex; gap: clamp(14px, 2.4vw, 32px); }
.nav a { font-size: 0.9375rem; }
.nav a[aria-current="page"] { color: var(--karbid); }

.bag { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.bag-count {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--granit);
  font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.bag-count[data-gefuellt] { background: var(--karbid); border-color: var(--karbid); color: var(--karbon); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 15px 30px;
  background: var(--karbid); color: var(--karbon);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid var(--karbid);
}
.btn:hover { background: transparent; color: var(--karbid); }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: end;
  min-height: min(84vh, 780px);
  border-bottom: 1px solid var(--granit);
}
.hero-text { padding: clamp(48px, 9vh, 110px) var(--gutter) clamp(40px, 7vh, 84px); max-width: 34ch; }
.hero-serie { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--nebel); margin-bottom: 28px; }
.hero h1 { margin-bottom: 26px; }
.hero-lede { color: var(--nebel); max-width: 40ch; margin-bottom: 36px; }
.hero-media { align-self: stretch; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Medien ---------- */

.media { display: block; position: relative; background: var(--karbon); overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.ratio-portrait { aspect-ratio: 3 / 4; }
.ratio-tall { aspect-ratio: 4 / 5; }
.ratio-wide { aspect-ratio: 16 / 10; }
.ratio-band { aspect-ratio: 21 / 9; }

/* fehlende Platzhalterbilder lesbar machen */
.media.fehlt { display: grid; place-items: center; outline: 1px dashed var(--granit); outline-offset: -1px; }
.media.fehlt img { display: none; }
.media.fehlt::after {
  content: attr(data-fehlt);
  font-family: var(--mono); font-size: 0.75rem; color: var(--granit); text-align: center; padding: 8px;
}

/* ---------- Sektionskopf ---------- */

.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34ch);
  gap: clamp(24px, 5vw, 80px); align-items: end;
  padding: clamp(64px, 11vh, 130px) var(--gutter) clamp(32px, 5vh, 56px);
  max-width: var(--maxw);
}
.sec-head p { color: var(--nebel); margin: 0; }

/* ---------- Produktraster ---------- */

.modelle { border-bottom: 1px solid var(--granit); }
.raster {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px) clamp(24px, 4vw, 72px);
  padding: 0 var(--gutter) clamp(72px, 12vh, 150px);
  max-width: var(--maxw);
}
.item-2 { margin-top: clamp(30px, 9vh, 110px); }
.item-3 { margin-top: clamp(-20px, -3vh, 0px); }
.item a { display: grid; gap: 14px; }
.item .media { transition: none; }
.item-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--granit); padding-top: 12px; }
.item-name { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.item-row .mono { color: var(--firn); }
.item-spec { display: block; }
.item a:hover .item-name { color: var(--karbid); }

/* ---------- Datenblatt mit Marginalien ---------- */

.datenblatt {
  display: grid; grid-template-columns: 14ch minmax(0, 62ch);
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(64px, 11vh, 130px) var(--gutter);
  border-bottom: 1px solid var(--granit);
}
.marginalie { display: grid; gap: 4px; align-content: start; padding-top: 8px; }
.marginalie p { margin: 0; }
.datenblatt-text h2 { margin-bottom: 28px; }
.datenblatt-text p { color: var(--nebel); }
.datenblatt-text p:last-child { color: var(--firn); margin-bottom: 0; }

/* ---------- Produktseite ---------- */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  align-items: start;
}
.pdp-galerie { border-right: 1px solid var(--granit); }
.galerie-buehne { aspect-ratio: 4 / 5; }
.galerie-buehne img { transition: opacity var(--t), transform var(--t); }
.galerie-buehne.wechselt img { opacity: 0; transform: scale(1.03); }

.thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--granit);
  border-top: 1px solid var(--granit);
}
.thumb {
  appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  background: var(--karbon); aspect-ratio: 1 / 1; position: relative;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: opacity var(--t); }
.thumb:hover img, .thumb[aria-selected="true"] img { opacity: 1; }
.thumb[aria-selected="true"]::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--karbid);
}

.pdp-kauf { padding: clamp(32px, 6vh, 72px) var(--gutter); max-width: 60ch; }
.pdp-serie { margin-bottom: 20px; }
.pdp h1 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); margin-bottom: 12px; }
.pdp-preis { font-size: 1.0625rem; color: var(--firn); margin-bottom: 26px; }
.pdp-lede { color: var(--nebel); margin-bottom: 40px; }

.groessen { border: 0; border-top: 1px solid var(--granit); padding: 26px 0 0; margin: 0 0 30px; }
.groessen legend { padding: 0; font-size: 0.9375rem; font-weight: 500; margin-bottom: 14px; }
.groessen-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.groesse {
  appearance: none; cursor: pointer;
  min-width: 56px; min-height: 48px; padding: 0 14px;
  background: transparent; color: var(--firn);
  border: 1px solid var(--granit);
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500;
  transition: border-color var(--t), color var(--t);
}
.groesse:hover { border-color: var(--firn); }
.groesse[aria-pressed="true"] { background: var(--karbid); border-color: var(--karbid); color: var(--karbon); }
.groessen-hinweis { font-size: 0.875rem; color: var(--nebel); margin: 0; min-height: 2.6em; }

.btn-kauf { width: 100%; text-align: center; }
.kauf-meta { font-size: 0.8125rem; color: var(--nebel); margin: 14px 0 0; }

.daten { margin-top: clamp(48px, 8vh, 88px); }
.daten h2 { font-size: 1.3rem; letter-spacing: -0.01em; margin: 0 0 18px; }
.daten h2 + dl { margin-bottom: 44px; }
.daten dl { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr); gap: 0; margin: 0; }
.daten dt, .daten dd {
  border-top: 1px solid var(--granit);
  padding: 12px 0; margin: 0; font-size: 0.9375rem;
}
.daten dt { color: var(--nebel); padding-right: 16px; }
.daten dd .mono { color: var(--firn); font-size: 0.875rem; }

/* ---------- Über uns ---------- */

.ueber-kopf { padding: clamp(56px, 11vh, 140px) var(--gutter) clamp(48px, 8vh, 96px); }
.ueber-kopf h1 { margin-bottom: 28px; max-width: 18ch; }
.ueber-lede { color: var(--nebel); max-width: 46ch; font-size: 1.125rem; margin: 0; }

.herstellung { border-bottom: 1px solid var(--granit); }
.stationen {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding: 0 var(--gutter) clamp(48px, 8vh, 96px);
  max-width: var(--maxw);
}
.station { border-top: 1px solid var(--granit); padding-top: 16px; }
.station h3 { margin-bottom: 6px; }
.station .mono { display: block; margin-bottom: 12px; }
.station p:last-child { color: var(--nebel); font-size: 0.9375rem; margin: 0; }
.herstellung .media { margin: 0 var(--gutter) clamp(64px, 10vh, 120px); }

.team { border-bottom: 1px solid var(--granit); }
.team-liste {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: 0 var(--gutter) clamp(72px, 11vh, 130px);
  max-width: var(--maxw);
}
.team-liste h3 { margin: 18px 0 4px; }
.team-liste .mono { margin-bottom: 10px; }
.team-liste p:last-child { color: var(--nebel); font-size: 0.9375rem; margin: 0; }

.kontakt { padding: clamp(64px, 11vh, 130px) var(--gutter); max-width: var(--maxw); }
.kontakt h2 { margin-bottom: clamp(28px, 5vh, 56px); }
.kontakt-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.kontakt-raster > div { border-top: 1px solid var(--granit); padding-top: 16px; }
.kontakt-raster h3 { margin-bottom: 12px; }
.kontakt-raster p { color: var(--nebel); font-size: 0.9375rem; }
.kontakt-raster p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */

.footer {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(48px, 8vh, 96px) var(--gutter) 32px;
  background: var(--karbon);
  border-top: 1px solid var(--granit);
}
.footer .logo { margin-bottom: 8px; }
.foot-brand .mono { margin: 0; }
.foot-col h3 { font-size: 0.9375rem; margin-bottom: 14px; }
.foot-col ul { display: grid; gap: 8px; }
.foot-col a { font-size: 0.9375rem; color: var(--nebel); }
.foot-col a:hover { color: var(--karbid); }
.foot-legal { grid-column: 1 / -1; margin: clamp(32px, 6vh, 64px) 0 0; padding-top: 20px; border-top: 1px solid var(--granit); }

/* ---------- Responsiv ---------- */

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-media { aspect-ratio: 16 / 10; }
  .hero-text { order: 2; padding-top: 40px; }
  .pdp { grid-template-columns: 1fr; }
  .pdp-galerie { border-right: 0; border-bottom: 1px solid var(--granit); }
  .pdp-kauf { max-width: none; }
  .stationen { grid-template-columns: repeat(2, 1fr); }
  .sec-head { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 900px) {
  body { padding-left: 0; padding-top: 3px; }
  .skip { left: 8px; }
  .rail {
    inset: 0 0 auto 0; width: 100%; height: 3px;
    border-right: 0; border-bottom: 0;
  }
  .rail-track { inset: 1px 0 auto 0; top: 1px; left: 0; width: 100%; height: 1px; }
  .rail-track::before, .rail-track::after { display: none; }
  .rail-band { display: none; }
  .rail-marker { top: 0; left: 0; margin-left: 0; width: 0; height: 3px; }
  .rail-read { display: none; }
  .nav { top: 3px; }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .nav { flex-wrap: wrap; gap: 12px 20px; padding: 14px var(--gutter); }
  .nav nav { order: 3; width: 100%; margin-right: 0; }
  .bag { margin-left: auto; }
  .raster { grid-template-columns: 1fr; gap: 40px; }
  .item-2, .item-3 { margin-top: 0; }
  .datenblatt { grid-template-columns: 1fr; }
  .marginalie { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 0; }
  .team-liste, .kontakt-raster { grid-template-columns: 1fr; gap: 40px; }
  .footer { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .stationen { grid-template-columns: 1fr; }
  .thumbs { grid-template-columns: repeat(4, 1fr); }
  .daten dl { grid-template-columns: 1fr; }
  .daten dt { padding-bottom: 0; }
  .daten dd { border-top: 0; padding-top: 4px; }
  .footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}