/* ============================================================
   APPLE-FASSUNG · Fundament
   Materialien, Typografie, Bewegungs-Token, Zugänglichkeit.
   Wird als letztes geladen und überschreibt gezielt.
   ============================================================ */

:root {
  /* ---- Bewegung: eine Skala, keine Einzelwerte im Code ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-druck: 120ms;   /* Tastendruck */
  --t-klein: 180ms;   /* Tooltip, kleines Aufklappen */
  --t-mittel: 240ms;  /* Menü, Auswahl */
  --t-gross: 380ms;   /* Schublade, grosse Fläche */

  /* ---- Material: eine Leiter, nicht ein Wert ---- */
  --glas-duenn: rgba(19, 19, 22, 0.44);
  --glas-dick: rgba(19, 19, 22, 0.72);
  --glas-kante: rgba(245, 245, 243, 0.14);
}

/* ============================================================
   1 TYPOGRAFIE
   Laufweite ist groessenabhaengig, nie ein fester Wert. Grosse
   Schrift laeuft zu weit auseinander und wird zusammengezogen,
   kleine Schrift braucht Luft. Vorher stand ueberall 0.01em.
   ============================================================ */
.hero-headline,
.kern-text .kt { letter-spacing: -0.022em; }

.kopfzeile,
.services-headline, .team-headline, .merch-headline,
.werk-headline, .skalierung-headline, .pos-headline { letter-spacing: -0.016em; }

.d-titel, .schluss-satz, .schluss-mail, .h-satz,
.merksatz, .schluss { letter-spacing: -0.012em; }

.d-teile span, .m-name, .kicker, .h-marke,
.fixnav-links a, #mobilmenue a { letter-spacing: 0.14em; }

/* Zeilenabstand laeuft der Groesse entgegen: eng oben, luftig unten */
.erk .copy, .team-copy, .d-text { line-height: 1.62; }

/* ============================================================
   2 DAS OBERE BAND ALS MATERIAL
   Kein Balken, der einen Streifen wegnimmt, sondern eine
   schwebende Schicht, unter der der Inhalt durchlaeuft.
   ============================================================ */
#fixnav {
  padding-block: 0.7rem;
  background: var(--glas-duenn);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 0;
  transition: background var(--t-gross) var(--ease-out),
              backdrop-filter var(--t-gross) var(--ease-out);
}
/* Erst wenn Inhalt darunter liegt, wird das Glas dicker. Am Anfang
   der Seite schwebt die Leiste ueber dem Film und bleibt fast leer. */
#fixnav[data-tief='true'] {
  background: var(--glas-dick);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
}
/* Scroll-Kante statt Trennlinie: der Inhalt verlaeuft unter dem Band,
   er wird nicht abgeschnitten. */
#fixnav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 6, 0.5), transparent);
  opacity: 0;
  transition: opacity var(--t-gross) var(--ease-out);
}
#fixnav[data-tief='true']::after { opacity: 1; }

/* Der laufende Anzeiger unter dem aktiven Punkt. Er wandert, statt
   zu springen: dieselbe Marke bewegt sich, es entsteht kein zweites
   Element. Position und Breite setzt js/apple.js. */
.fixnav-links { position: relative; }
.fixnav-links::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px;
  width: var(--anzeiger-breite, 0px);
  transform: translateX(var(--anzeiger-x, 0px));
  background: var(--gradient-spektrum);
  border-radius: 2px;
  opacity: var(--anzeiger-an, 0);
  transition: transform var(--t-mittel) var(--ease-out),
              width var(--t-mittel) var(--ease-out),
              opacity var(--t-klein) var(--ease-out);
}
/* Der alte Unterstrich pro Link entfaellt, sonst laufen zwei Marken */
.fixnav-links a { background-image: none; }
.fixnav-links a[aria-current='true'] { color: var(--c-text-hell); }

/* ============================================================
   3 ANTWORT AUF DEN DRUCK
   Rueckmeldung beginnt beim Drücken, nicht beim Loslassen.
   ============================================================ */
[data-druck] {
  transition: transform var(--t-druck) var(--ease-out);
  touch-action: manipulation;
}
[data-druck][data-gedrueckt='true'] { transform: scale(0.972); }

/* ============================================================
   4 ZUGÄNGLICHKEIT: DREI SIGNALE, NICHT EINS
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
  #fixnav, #fixnav[data-tief='true'] {
    background: #0b0b0e;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .platte { background: #101014; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  #fixnav { background: #050506; border-bottom: 1px solid rgba(245, 245, 243, 0.5); }
  .erk .copy, .team-copy, .d-text { color: rgba(243, 241, 237, 0.94); }
  .platte { border-color: rgba(245, 245, 243, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  #fixnav, #fixnav::after, .fixnav-links::after { transition: none; }
  [data-druck][data-gedrueckt='true'] { transform: none; }
}

/* ============================================================
   5 SPRUNGZIELE UNTER DEM BAND
   Der Inhalt laeuft absichtlich unter dem oberen Band durch. Ein
   Sprungziel darf aber nicht dahinter liegen, sonst landet man
   auf einer verdeckten Zeile. Beim Testen fiel auf, dass die
   erste Frage genau so verschwand.
   ============================================================ */
main > section[id],
.erklaerstrecke > section[id],
.fr-punkt { scroll-margin-top: clamp(74px, 9vh, 104px); }

/* ============================================================
   DIE LEISTE ÜBER HELLEN STELLEN
   Zwei Stellen der Seite sind hell: das Logoband auf Papier und
   der Filmteil, der in einem weißen Studio spielt. Weiße Schrift
   auf dunklem Glas verschwindet darüber. js/nav.js setzt dafür
   auf-hell, sobald eine solche Fläche unter der Leiste liegt.

   Die Regeln stehen hier und nicht in base.css, weil dort das
   dicke Glas aus dieser Datei sie sonst überschreibt: gleiche
   Stärke, aber später notiert.
   ============================================================ */
#fixnav.auf-hell,
#fixnav.auf-hell[data-tief='true'] {
  background: rgba(240, 237, 231, 0.72);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}
#fixnav.auf-hell .fixnav-links a,
#fixnav.auf-hell .fixnav-links a[aria-current='true'] { color: var(--c-tinte); }
#fixnav.auf-hell .fixnav-logo img { filter: invert(1) brightness(0.18); }
#fixnav.auf-hell .fixnav-burger span { background: var(--c-tinte); }
#fixnav.auf-hell::after { opacity: 0; }