/* ============================================================
   NeoTrack — sections.css
   Aufbau der einzelnen Abschnitte
   ============================================================ */

/* Schichten von hinten nach vorn:
   0 Raster · 1 Lichtschein · 2 fliegende Wortmarke · 3 Gerät · 4 Inhalt
   Die Wortmarke liegt bewusst unter dem Gerät — es steht davor. */

/* ============ HERO ============ */
/* **Zwei Spalten, nicht Text unter Bild.**

   Der Hero war eine Spalte: Gerät oben, Schriftzug darunter, alles mittig.
   Seit das Gerät eine Makroaufnahme ist und über den Rand läuft, geht das
   nicht mehr — der Text läge mitten auf dem Gehäuse. Er steht deshalb links,
   das Gerät rechts, so wie in einer Anzeige. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-bottom: clamp(40px, 8vh, 90px);
  overflow: clip;
}
/* unsichtbarer Rahmen, in den das 3D-Gerät einpasst.

   **Dieselbe Geometrie wie `.prinzip__slot` im nächsten Abschnitt** —
   Seitenverhältnis 3:4, Höhe bis 74 % der Bildhöhe. Vorher stand hier
   ein Quadrat von `min(42vw, 38vh)`; gemessen waren das bei 1280 × 900
   nur 342 × 342 gegen 500 × 666 im Prinzip-Abschnitt. Weil die Höhe des
   Rahmens die Grösse des Geräts bestimmt, stand es dort fast doppelt so
   gross.

   Die Mitte rückt dafür von 45 % auf 36 % nach oben: Ein doppelt so
   hohes Gerät um 45 % zentriert liefe unten in den Claim hinein. */
/* **Grösser als das Bild — mit Absicht.**

   Der Rahmen sagt `fitToFrame`, wie gross das Gerät stehen soll. Im Hero ist
   er deshalb ein Vielfaches der Bildhöhe: Das Gerät läuft über den Rand
   hinaus und wird angeschnitten, wie in einer Makroaufnahme. Beim Scrollen
   blendet die Reise auf `.prinzip__slot` über, und weil der klein ist, fährt
   das Gerät dabei von allein zurück.

   Nach rechts gerückt, weil links der Text steht. */
.hero__frame {
  position: absolute;
  top: 11%;
  left: 65.1%;
  height: 188svh;
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.hero__foot {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 30px;
  /* Linksbündig und nur so breit, dass rechts das Gerät Platz hat. */
  justify-items: start;
  text-align: left;
  max-width: min(46ch, 44%);
  margin-right: auto;
}
.hero__claim {
  font-family: var(--font-display);
  /* Größer als der frühere Claim: Der stand über zwei lange deutsche Zeilen
     und füllte die Breite von selbst. Der Slogan hat zwei Wörter je Zeile und
     sähe in derselben Größe aus wie eine Bildunterschrift. */
  font-size: clamp(32px, 5vw, 76px);
  font-weight: 400;
  line-height: 1.02;
  /* **Versalien brauchen eine andere Laufweite.** Die −0,035 em waren auf
     Gemischtschreibung eingestellt; in Großbuchstaben kleben die Zeichen
     damit aneinander, weil dort keine Unterlängen und kaum Innenräume für
     Luft sorgen. Nahe null steht der Slogan sauber. */
  text-transform: uppercase;
  letter-spacing: -0.012em;
  /* Schmaler als vorher: In zwei Spalten hat der Schriftzug die halbe
     Breite, und über 12 Zeichen bricht er von allein zweizeilig um. */
  max-width: 12ch;
}
.hero__claim .petrol { color: var(--petrol-text); }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(40px, 8vh, 90px);
  z-index: 5;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.hero__scroll-line {
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, var(--petrol), transparent);
}

@media (max-width: 900px) {
  .hero__scroll { display: none; }
  /* Schmale Geräte: die Wortmarke steht ÜBER dem Sensor statt dahinter —
     sonst verdeckt er fast das ganze Wort. Die 42vh verhindern, dass sie
     auf breiten, flachen Fenstern doch wieder ins Gerät läuft. */
  .hero__frame { width: 72vw; height: 42vh; transform: translate(-50%, -52%); }
}

/* ============ PRINZIP ============ */
.prinzip { position: relative; }
.prinzip__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
}
.prinzip__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.prinzip__slot {
  aspect-ratio: 3 / 4;
  max-height: 74vh;
  border-radius: var(--r-xl);
}
.prinzip__content { display: grid; gap: 24px; max-width: 54ch; }
.prinzip__head {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.032em;
  max-width: 17ch;
}
.prinzip__text {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 48ch;
}
.prinzip__facts {
  display: flex;
  gap: clamp(20px, 3vw, 46px);
  flex-wrap: wrap;
  padding-top: 8px;
}
.prinzip__facts li { display: grid; gap: 4px; }
.prinzip__fact-num {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--petrol-text);
}
.prinzip__fact-txt {
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.prinzip__spacer { height: 60svh; }

@media (max-width: 900px) {
  /* Auf dem Handy ist für zwei Spalten kein Platz: Der Text steht wieder
     unter dem Gerät, mittig wie zuvor. */
  .hero { flex-direction: column; justify-content: flex-end; }
  .hero__foot {
    justify-items: center;
    text-align: center;
    max-width: none;
    margin-right: 0;
  }
  .hero__claim { max-width: 20ch; }
  .hero__frame { top: 38%; left: 50%; height: 76svh; }

  .prinzip__grid { grid-template-columns: 1fr; gap: 30px; }
  .prinzip__slot { aspect-ratio: 4 / 3; max-height: 40vh; }
  .prinzip__sticky { padding-block: 90px; }
}

/* ============ FUNKTIONEN ============ */
.features { position: relative; }
.features__panel {
  position: relative;
  /* **Kein eigener Grund mehr.** Hier lag ein Verlauf nach `--surface-1`,
     also Weiss — und der deckte die feste Studio-Fläche zu. Der Abschnitt
     steht jetzt im selben Licht wie der Rest der Seite. */
  padding-block: clamp(70px, 12vh, 150px);
}
/* **Die Überschrift steht in der Bühne, nicht davor.**

   Davor liess sich der Abstand zum Telefon nicht zuziehen: Das Telefon
   sitzt mittig in einer bildschirmhohen Bühne, und diese halbe
   Bildschirmhöhe lag zwangsläufig zwischen beidem — egal, wie klein der
   Rand unter der Überschrift wurde. Wer den Rand allein zudrehte, schob
   die Überschrift nur auf die Kante der Blende, wo sie wie
   aufgeklebt wirkte.

   Jetzt sind Überschrift und Telefon ein Block, der zusammen mittig
   steht und zusammen kleben bleibt. Der Abstand ist eine Zahl: das `gap`
   von `.features__center`. */
.features__head {
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
}
.features__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
  /* **Zweizeilig, mit Absicht.** Die Karten fliegen links und rechts
     vorbei; die Überschrift steht jetzt auf ihrer Höhe statt darüber.
     Einzeilig wäre sie so breit, dass sie an schmalen Fenstern in die
     Karten läuft. Elf Zeichen brechen sie zuverlässig nach
     „Ein Satz.“ um. */
  max-width: 11ch;
}

/* Die Bahn gibt die Scroll-Länge vor, die Bühne bleibt darin stehen */
.features__track { height: 260svh; }
.features__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.features__cols {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-inline: var(--gutter);
  width: min(100%, calc(var(--container) + 2 * var(--gutter)));
  margin-inline: auto;
  left: 0; right: 0;
}
/* **Die Karten laufen in Durchsichtigkeit aus, nicht in Weiss.**

   Vorher lag über der Bühne eine Blende (`.features__mask`): ein Verlauf in
   `--surface-1`, der die Karten oben und unten zudeckte. Das setzte einen
   deckenden Grund voraus — und genau der ist weg, seit die Studio-Fläche
   durchscheinen soll. Die Blende wäre jetzt ein weisser Balken über dem
   Licht.

   Eine Maske nimmt stattdessen Deckung weg, egal was darunter liegt. Die
   Stufen sind dieselben wie im früheren Verlauf: ganz weg am Rand, voll da
   ab einem Viertel. */
.features__cols {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 26%, #000 74%, transparent 100%);
}

.features__col {
  display: grid;
  gap: clamp(20px, 3vh, 40px);
  align-content: start;
  transform: translateY(50%);
  will-change: transform;
}
#features-col-b { justify-items: end; }
#features-col-b .fcard { flex-direction: row-reverse; text-align: right; }
#features-col-b .fcard__body p { margin-left: auto; }

.features__center {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  /* Dieselben 24 px wie zwischen Braue und Titel — und wie zwischen
     Titel und Absatz im Prinzip-Abschnitt. */
  gap: 24px;
  /* Schmal genug, dass die Überschrift zwischen den vorbeifliegenden
     Karten bleibt. Der Boden von 240 px greift erst kurz vor der
     Bruchstelle bei 900 px, wo der Abschnitt ohnehin umbaut. */
  width: min(100%, max(240px, 22vw));
  pointer-events: none;
}
/* Die Breite des Telefons hing vorher am Zentrum. Seit dort auch die
   Überschrift steht, braucht es sein eigenes Mass. */
#features-phone { width: clamp(150px, 17vw, 250px); }
@media (max-width: 900px) {
  .features__track { height: auto; }
  .features__stage { position: static; height: auto; display: block; }
  .features__cols {
    position: static;
    flex-direction: column;
    gap: 18px;
    padding: 0;
    width: auto;
    margin-inline: var(--gutter);
  }
  .features__col { transform: none !important; gap: 14px; }
  #features-col-b { justify-items: stretch; }
  #features-col-b .fcard { flex-direction: row; text-align: left; }
  #features-col-b .fcard__body p { margin-left: 0; }
  .fcard { max-width: none; }
  /* Die Überschrift bleibt — sie steht seit dem Umbau im Zentrum. */
  .features__cols { -webkit-mask-image: none; mask-image: none; }
  .features__center {
    width: auto;
    margin-inline: var(--gutter);
    margin-bottom: 28px;
    gap: 18px;
  }
  #features-phone { display: none; }
}

/* ============ AUFBAU (Explosion) ============ */
.aufbau { height: 460svh; position: relative; }
.aufbau__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
/* Rahmen, in den das Gerät während der Explosion eingepasst wird */
.aufbau__slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(52vw, 80svh);
  height: 80svh;
  transform: translate(-50%, -50%);
}
.aufbau__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(58px, 15vw, 230px);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 0.9;
  white-space: nowrap;
  background: linear-gradient(92deg, var(--metall-a), var(--metall-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}
.aufbau__title span { color: transparent; }
.aufbau__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(30px, 6vh, 60px);
  transform: translateX(-50%);
  color: var(--ink-faint);
}

@media (max-width: 900px) {
  .aufbau { height: 400svh; }
  .aufbau__slot { width: min(62vw, 76svh); height: 76svh; }
  .nt-label { gap: 8px; }
  .nt-label__body { width: 27vw; }
  .nt-label__desc { display: none; }
  .nt-label__name { font-size: 9.5px; letter-spacing: 0.03em; }
  .nt-label__num { font-size: 8.5px; }
}

/* ============ RÄNGE ============ */
.raenge {
  padding-block: clamp(70px, 12vh, 150px);
  /* Ohne eigenen Grund — die Studio-Fläche trägt auch hier. */
}
.raenge__head {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(36px, 6vh, 66px);
}
.raenge__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 64px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.raenge__lead {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 50ch;
}
.raenge__scale {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(8px, 1vw, 16px);
}
@media (max-width: 900px) {
  .raenge__scale { grid-template-columns: repeat(4, 1fr); }
}

/* ============ TECHNIK ============ */
.specs { padding-block: clamp(70px, 12vh, 150px); }
.specs__head {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(36px, 6vh, 70px);
}
.specs__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 64px);
  font-weight: 400;
  letter-spacing: -0.035em;
}
.specs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}
@media (max-width: 1100px) { .specs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .specs__grid { grid-template-columns: 1fr; } }

/* ============ WARTELISTE ============ */
.waitlist { padding-block: clamp(60px, 10vh, 120px); }
.waitlist__panel {
  background: var(--petrol);
  color: var(--on-petrol);
  border-radius: clamp(28px, 4vw, 56px);
  padding: clamp(36px, 6vw, 84px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.waitlist__panel::after {
  content: '';
  position: absolute;
  right: -8%;
  top: -40%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 10, 0.14);
  pointer-events: none;
}
.waitlist__copy { display: grid; gap: 18px; position: relative; z-index: 2; }
.eyebrow--dark { color: var(--on-petrol); opacity: 0.72; }
.waitlist__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
.waitlist__text {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: rgb(49 50 51 / 0.76);
  max-width: 40ch;
}
.waitlist__form { display: grid; gap: 14px; position: relative; z-index: 2; }
.waitlist__field { position: relative; }
.waitlist__field input {
  width: 100%;
  background: transparent;
  border: 1.5px solid rgba(10, 10, 10, 0.35);
  border-radius: var(--r-pill);
  padding: 20px 68px 20px 26px;
  color: var(--on-petrol);
  font-size: 16px;
  transition: border-color 0.3s;
}
.waitlist__field input::placeholder { color: rgba(10, 10, 10, 0.45); }
.waitlist__field input:focus { outline: none; border-color: var(--on-petrol); }
.waitlist__submit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--on-petrol);
  color: var(--petrol-text);
  display: grid;
  place-items: center;
  transition: transform 0.3s var(--ease-out);
}
.waitlist__submit:hover { transform: translateY(-50%) scale(1.07); }
.waitlist__note {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgb(49 50 51 / 0.6);
  padding-left: 26px;
}
.waitlist__form.is-done .waitlist__field { opacity: 0.35; pointer-events: none; }

@media (max-width: 900px) {
  .waitlist__panel { grid-template-columns: 1fr; }
}

/* ============ Reduzierte Bewegung ============ */
@media (prefers-reduced-motion: reduce) {
  .features__col { transform: none !important; }
  .features__track { height: auto; }
  .features__stage { position: static; height: auto; display: block; }
  .features__cols { position: static; flex-direction: column; gap: 18px; width: auto; padding: 0; }
  .features__cols { -webkit-mask-image: none; mask-image: none; }
  .features__center { width: auto; margin-inline: var(--gutter); margin-bottom: 28px; }
  #features-phone { display: none; }
  .fcard { max-width: none; opacity: 1 !important; }
  /* Aufbau bleibt hoch genug, damit die zerlegte Ansicht Platz hat */
  .aufbau { height: 130svh; }
  .aufbau__title, .aufbau__hint { display: none; }
}