/* ═══════════════════════════════════════════════════════════
   MDA — Studio für Marke & Wachstum
   ───────────────────────────────────────────────────────────
   Aufbau:
   01 Tokens          06 Marquee
   02 Reset & Base    07 Manifest (Pin)
   03 Bausteine       08 Leistungen
   04 Nav / Loader    09 Orbit (Pin)
   05 Hero            10 Arbeiten / KPI / Stimmen / CTA / Footer
   11 Reduced Motion  12 Kein-JS-Fallback
   ═══════════════════════════════════════════════════════════ */

/* ══ 01 TOKENS ══ */
:root {
  --ink:        #0B0B0D;
  --ink-2:      #121215;
  --ink-3:      #1B1B1F;
  --bone:       #EDE8E0;
  --bone-60:    rgba(237, 232, 224, .60);
  --bone-40:    rgba(237, 232, 224, .40);
  --bone-20:    rgba(237, 232, 224, .20);
  --bone-10:    rgba(237, 232, 224, .10);
  --bone-06:    rgba(237, 232, 224, .06);
  --copper:     #C97B4E;
  --copper-dim: rgba(201, 123, 78, .18);

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;

  /* Ein Typo-Schritt = ein Token. Keine Ad-hoc-Größen im Dokument. */
  --t-display:  clamp(3.4rem, 11.5vw, 12rem);
  --t-h2:       clamp(2.4rem, 6.4vw, 6.2rem);
  --t-h3:       clamp(1.5rem, 2.6vw, 2.6rem);
  --t-lead:     clamp(1.05rem, 1.35vw, 1.35rem);
  --t-body:     clamp(.95rem, 1.05vw, 1.05rem);
  --t-meta:     .72rem;

  --pad-x:      clamp(1.25rem, 4.5vw, 5rem);
  --gap-section: clamp(6rem, 14vh, 11rem);
  --radius:     2px;

  /* Ein Token für alle Inhaltsbreiten — damit die Ultrawide-Stufe unten
     eine Zeile ändert statt acht Regeln. */
  --max-w:        1600px;
  --orbit-center: 38rem;
  --label-w:      14rem;   /* Platzbedarf des breitesten Orbit-Labels */

  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);

  --nav-h: 4.75rem;
}

/* ══ 02 RESET & BASE ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;           /* bewusst: alle Scroll-Animationen laufen über scrub */
}

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Scroll-Lock während des Loaders — per Klasse, nie per Inline-Style.
   Fällt das JS aus, wird die Klasse nie gesetzt und die Seite bleibt scrollbar. */
html.is-locked, html.is-locked body { overflow: hidden; height: 100%; }

/* height:auto ist hier nicht optional: die width/height-Attribute im HTML
   (gut gegen Layout-Shift) setzen sonst eine feste Pixelhöhe, während die
   Breite per CSS schrumpft — das Bild wird verzerrt. Elemente, die eine
   echte Höhe brauchen, setzen sie über Klassenselektoren und gewinnen. */
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--copper); color: var(--ink); }

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

.skip-link {
  position: fixed; top: .5rem; left: .5rem; z-index: 999;
  padding: .6rem 1rem; background: var(--bone); color: var(--ink);
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .1em;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* ══ 03 BAUSTEINE ══ */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h-display em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: -.02em;
  color: var(--copper);
}

.eyebrow, .section-index {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--t-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--bone-40);
}
.section-index { margin-bottom: 1.75rem; }

.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 0 var(--copper);
  animation: pulse 2.6s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,123,78,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(201,123,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,123,78,0); }
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .8em;
  padding: .95em 1.5em;
  border-radius: 100px;
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  will-change: transform;
}
.btn--primary { background: var(--bone); color: var(--ink); }
.btn--ghost   { border: 1px solid var(--bone-20); color: var(--bone); }
.btn--ghost:hover { border-color: var(--bone-40); }
.btn--lg { padding: 1.15em 1.9em; font-size: .78rem; }

.btn__txt { display: inline-block; overflow: hidden; }
/* Zeichen-Roll: jedes <span> trägt seinen Zwilling im text-shadow darunter */
.btn__txt span {
  display: inline-block;
  transition: transform .42s var(--ease-inout);
  /* transition-delay wird pro Zeichen per JS gesetzt (Staffelung) */
}
.btn:hover .btn__txt span { transform: translateY(-1.1em); }

.btn__icon { display: grid; place-items: center; width: 1em; height: 1em; overflow: hidden; }
.btn__icon svg { width: 100%; height: 100%; transition: transform .45s var(--ease-out); }
.btn:hover .btn__icon svg { transform: translate(115%, -115%); }

.circle-btn {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid var(--bone-20);
  border-radius: 50%;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.circle-btn svg { width: 1rem; height: 1rem; }
.circle-btn:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.circle-btn:active { transform: scale(.93); }
.circle-btn:disabled { opacity: .3; pointer-events: none; }

/* Section-Kopf */
.section-head { padding: 0 var(--pad-x); margin-bottom: clamp(3rem, 7vw, 6rem); max-width: var(--max-w); margin-inline: auto; }
.section-head__h { font-size: var(--t-h2); margin-bottom: 1.5rem; }
.section-head__p { max-width: 46ch; color: var(--bone-60); font-size: var(--t-lead); line-height: 1.6; }
.section-head--split { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-end; justify-content: space-between; }

/* Hintergrund-Canvas & Grain */
.bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: .9;
  pointer-events: none;
}
.grain {
  position: fixed; inset: -100%;
  z-index: 1;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
}

main, .nav, .footer { position: relative; z-index: 2; }

/* ══ 04 LOADER, CURSOR, NAV ══ */
.loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--ink);
}
.loader__inner { text-align: center; }
.loader__mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: -.06em;
  line-height: 1;
}
.loader__meta {
  display: block; margin-top: .9rem;
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .22em;
  color: var(--bone-40);
}
.loader__bar {
  position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 2.5rem;
  height: 1px; background: var(--bone-10);
}
.loader__bar i { display: block; height: 100%; width: 0; background: var(--copper); }
.loader.is-done { pointer-events: none; }

.cursor {
  position: fixed; top: 0; left: 0; z-index: 300;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid var(--bone);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  display: none;
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              margin .35s var(--ease-out), background-color .35s var(--ease-out),
              border-radius .35s var(--ease-out), opacity .3s linear;
  will-change: transform;
}
html.has-cursor .cursor { display: grid; place-items: center; }
.cursor.is-hover {
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  background: var(--bone); border-color: var(--bone);
}
.cursor.is-label { width: 78px; height: 78px; margin: -39px 0 0 -39px; }
.cursor__label {
  font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; color: var(--ink);
  opacity: 0; transition: opacity .25s linear;
  white-space: nowrap;
}
.cursor.is-label .cursor__label { opacity: 1; }
/* Systemcursor erst ausblenden, wenn der eigene nachweislich läuft.
   Sonst bleibt bei einem JS-Fehler gar kein Cursor übrig. */
html.cursor-ready body,
html.cursor-ready a,
html.cursor-ready button,
html.cursor-ready [data-cursor] { cursor: none; }

/* Nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--pad-x);
  mix-blend-mode: normal;
  will-change: transform;
}
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(11,11,13,.85), rgba(11,11,13,0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.nav.is-stuck::before { opacity: 1; }
/* Die Transition kommt erst nach dem Intro dazu — sonst würde sie
   gegen die GSAP-Timeline arbeiten, die dasselbe transform animiert. */
.nav.is-ready { transition: transform .6s var(--ease-out); }
.nav.is-ready.is-hidden { transform: translateY(-110%); }

.nav__brand { display: flex; align-items: baseline; gap: .7rem; margin-right: auto; }
.nav__mark { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.05em; }
.nav__brand-meta { font-size: var(--t-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-40); }

.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  position: relative;
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .12em; font-weight: 500;
  color: var(--bone-60);
  transition: color .35s var(--ease-out);
  overflow: hidden;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-inout);
}
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__burger { display: none; flex-direction: column; gap: 5px; width: 2rem; padding: .5rem 0; }
.nav__burger i { display: block; height: 1.5px; width: 100%; background: var(--bone); transition: transform .45s var(--ease-inout), opacity .3s; }
.nav__burger[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.menu-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink-2);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--nav-h) var(--pad-x) 3rem;
  clip-path: inset(0 0 100% 0);
}
.menu-overlay__links { display: flex; flex-direction: column; gap: .3em; }
.menu-overlay__links a {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 3.5rem); letter-spacing: -.04em; line-height: 1;
}
.menu-overlay__links em {
  font-family: var(--font-body); font-style: normal; font-size: var(--t-meta);
  letter-spacing: .1em; color: var(--copper);
}
.menu-overlay__foot { margin-top: auto; padding-top: 3rem; display: flex; flex-direction: column; gap: .4rem; color: var(--bone-60); font-size: var(--t-meta); letter-spacing: .1em; text-transform: uppercase; }

/* ══ BILDSEQUENZ ══ */
.seq { position: relative; }
.seq__pin-height { height: 380vh; }   /* Scrollweg pro Frame ≈ 25px */
.seq__container {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #08070A;
}
.seq__canvas,
.seq__fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Solange JS läuft, zeichnet das Canvas — das Standbild ist nur Rückfall */
html.js:not(.reduced-motion) .seq__fallback { display: none; }
html.js:not(.reduced-motion) .seq__canvas { display: block; }
.seq__canvas { display: none; }

.seq__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(11,11,13,.92) 0%, rgba(11,11,13,.25) 38%, rgba(11,11,13,0) 60%),
    linear-gradient(to bottom, rgba(11,11,13,.75) 0%, rgba(11,11,13,0) 30%);
}

.seq__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--nav-h) var(--pad-x) clamp(2rem, 5vh, 4rem);
  pointer-events: none;
}
.seq__index { margin-bottom: auto; padding-top: 2rem; }

.seq__lines { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.seq__line {
  grid-area: 1 / 1;
  font-size: clamp(2.6rem, 7vw, 8rem);
  max-width: 16ch;
}

.seq__meta {
  display: flex; align-items: center; gap: 1.5rem;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}
.seq__counter { font-size: var(--t-meta); letter-spacing: .16em; color: var(--bone-40); }
.seq__counter b { color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }
.seq__bar { flex: 1; max-width: 22rem; height: 1px; background: var(--bone-20); overflow: hidden; }
.seq__bar i { display: block; height: 100%; width: 100%; background: var(--copper); transform: scaleX(0); transform-origin: left; }

/* Ladeanzeige — 145 Bilder brauchen einen Moment */
.seq__loading {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 2px; background: rgba(237,232,224,.08);
  transition: opacity .6s var(--ease-out);
}
.seq__loading i { display: block; height: 100%; width: 0%; background: var(--bone-40); }
.seq__loading.is-done { opacity: 0; }

/* ══ 05 HERO ══ */
.hero {
  min-height: 100svh;
  padding: calc(var(--nav-h) + 2rem) var(--pad-x) 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 3rem;
}
.hero__top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hero__h1 {
  font-size: var(--t-display);
  margin: auto 0;
  max-width: 15ch;
}
.hero__bottom {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: clamp(2rem, 6vw, 6rem); flex-wrap: wrap;
}
.hero__lead { max-width: 42ch; color: var(--bone-60); font-size: var(--t-lead); line-height: 1.6; }
.hero__scroll {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .16em; color: var(--bone-40);
}
.hero__scroll-line { display: block; width: 60px; height: 1px; background: var(--bone-20); overflow: hidden; }
.hero__scroll-line i { display: block; height: 100%; width: 40%; background: var(--copper); animation: scrollLine 2.4s var(--ease-inout) infinite; }
@keyframes scrollLine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* Zeilen-Masken für SplitText */
.line-mask { overflow: hidden; display: block; }

/* ══ 06 MARQUEE ══ */
.marquee-band {
  border-top: 1px solid var(--bone-10);
  border-bottom: 1px solid var(--bone-10);
  padding: 1.4rem 0;
  overflow: hidden;
  background: rgba(11,11,13,.4);
}
.marquee { display: flex; width: max-content; will-change: transform; }
.marquee__track {
  display: flex; align-items: center; gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem, 2.2vw, 1.9rem);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.marquee__track i { color: var(--copper); font-style: normal; font-size: .6em; }
.marquee__track span { color: var(--bone-60); transition: color .4s var(--ease-out); }
.marquee:hover .marquee__track span { color: var(--bone); }

/* ══ 07 MANIFEST (Pin + Scrub) ══ */
.manifesto { position: relative; }
.manifesto__pin-height { height: 420vh; }      /* Scrolldistanz = Länge der Sequenz */
.manifesto__container {
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--nav-h) var(--pad-x) 4rem;
  max-width: var(--max-w); margin-inline: auto;
}
/* Alle Absätze liegen in DERSELBEN Grid-Zelle statt absolut übereinander.
   Damit wächst der Container automatisch auf den längsten Absatz — eine
   geschätzte min-height kann das nicht: sie rechnet in em der geerbten
   16px, während der Absatz bei 4.2vw ein Vielfaches davon hoch ist. Genau
   daran lief die Fortschrittsleiste vorher mitten durch den Text. */
.manifesto__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.manifesto__p {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4.2vw, 3.9rem);
  line-height: 1.14;
  letter-spacing: -.035em;
  max-width: 22ch;
}
.manifesto__p .word { display: inline-block; overflow: hidden; vertical-align: top; }
.manifesto__p .word > span { display: inline-block; will-change: transform; }
.manifesto__progress { margin-top: 3.5rem; height: 1px; background: var(--bone-10); }
.manifesto__progress i { display: block; height: 100%; width: 0%; background: var(--copper); transform-origin: left; }

/* ══ 08 LEISTUNGEN ══ */
.services { padding: var(--gap-section) 0; }
.svc-list { max-width: var(--max-w); margin-inline: auto; padding: 0 var(--pad-x); }
.svc {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.6rem, 3.4vw, 2.6rem) clamp(1rem, 2vw, 2rem);
  overflow: hidden;
  isolation: isolate;
}
.svc__border {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--bone-10);
  transform: scaleX(1); transform-origin: left;
}
.svc:first-child::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--bone-10);
}
.svc__tile {
  position: absolute; inset: 0; z-index: -1;
  background: var(--copper);
  transform: translateY(100%);
  transition: transform .55s var(--ease-inout);
}
.svc__num { font-size: var(--t-meta); letter-spacing: .12em; color: var(--bone-40); transition: color .45s var(--ease-out); }
.svc__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--t-h3); letter-spacing: -.03em; line-height: 1;
  transition: transform .55s var(--ease-out), color .45s var(--ease-out);
}
.svc__desc { color: var(--bone-60); max-width: 46ch; transition: color .45s var(--ease-out); }
.svc__tags { font-size: var(--t-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-40); text-align: right; transition: color .45s var(--ease-out); }

@media (hover: hover) {
  .svc:hover .svc__title { transform: translateX(.6rem); }
  .svc:hover .svc__title,
  .svc:hover .svc__desc,
  .svc:hover .svc__num,
  .svc:hover .svc__tags { color: var(--ink); }
}

/* ══ 09 ORBIT (Pin + gegenläufige Ringe) ══ */
.orbit { position: relative; }
.orbit__pin-height { height: 330vh; }
.orbit__container {
  position: relative;
  height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
}
/* box-sizing: border-box heißt, Padding frisst die max-width auf. Mit
   max-width:34ch + 2×5rem Padding blieben auf breiten Screens ~110px
   Textbreite übrig. Deshalb hier width statt max-width, Padding raus. */
.orbit__center {
  position: relative; z-index: 3; text-align: center;
  width: min(var(--orbit-center), calc(100% - 2 * var(--pad-x)));
  margin-inline: auto;
}
/* Die Mitte darf die Ringe überlappen — dafür ist die Vignette da.
   Sie auf die schmale Lücke zwischen den Ringen zu zwängen, hieße
   fünf Zeilen für fünf Wörter. */
.orbit__h { font-size: clamp(1.8rem, 3.6vw, 3.4rem); margin-bottom: 1.4rem; }
.orbit__p { color: var(--bone-60); font-size: var(--t-lead); max-width: 34ch; margin-inline: auto; }

/* Drehpunkt liegt WEIT AUSSERHALB des Bildes. Säße er auf der Containerkante,
   erreichten die Items bei Winkel 0 die volle Radiuslänge — also mitten in den
   Text. So ragt nur ein flacher Bogen um --reach ins Bild, der Rest der
   Kreisbahn liegt draußen. Das ist der Effekt, den man sehen will. */
.orbit__ring {
  /* Radius steuert, WIE VIEL vom Bogen sichtbar ist: ein Item verlässt das
     Bild, sobald r·(1−cos θ) größer wird als seine Breite. Großer Radius =
     schmales Sichtfenster = fast leere Sektion. 30vw hält ~8 Items im Bild. */
  --r: clamp(20rem, 30vw, 30rem);   /* Radius der Kreisbahn */

  /* Wie weit der Bogen ins Bild ragt. Ein fester Wert geht nicht: der
     Mitteltext hat eine konstante Breite, der freie Platz daneben wächst
     also mit dem Fenster. 2.5rem klebten auf 3440px am Rand, während auf
     1120px schon 2.5rem fast den Text berühren.
     Gerechnet aus dem freien Halbraum: halbe Fensterbreite minus halbe
     Textbreite minus Platz für das breiteste Label plus Abstand.
     --label-w muss mitwachsen, wenn die Labelschrift größer wird — sonst
     schiebt sich der Bogen in den Text. Das max() fängt schmale Fenster ab. */
  --reach: max(2.5rem, calc(50vw - var(--orbit-center) / 2 - var(--label-w) - 2rem));
  position: absolute; top: 50%;
  width: 0; height: 0;
  z-index: 2;
  will-change: transform;
}
.orbit__ring--left  { left:  calc(var(--reach) - var(--r)); }
.orbit__ring--right { right: calc(var(--reach) - var(--r)); }

.orbit__item {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  transform-origin: 0 0;
}
.orbit__item > span {
  position: absolute;
  left: var(--r);
  top: 50%;
  transform-origin: center;
  white-space: nowrap;
}
.orbit__ring--right .orbit__item > span { left: auto; right: var(--r); }

/* Linker Ring: Branchen als Text. Deutlich größer als eine normale
   Meta-Zeile — auf 2000px Breite verschwinden 0.72rem sonst komplett. */
.orbit__ring--left .orbit__item > span {
  display: flex; align-items: center; gap: .7em;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.35vw, 1.5rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--bone-60);
  padding: .6em 1.2em;
  border: 1px solid var(--bone-10);
  border-radius: 100px;
  background: rgba(11,11,13,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.orbit__ring--left .orbit__item > span::before {
  content: ''; width: .45em; height: .45em; border-radius: 50%;
  background: var(--copper); flex: none;
}

/* Rechter Ring: Bildkacheln statt Text */
.orbit__tile {
  display: block;
  width: clamp(6.5rem, 11vw, 11rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,.55);
}
.orbit__tile img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  opacity: .85;
}
.orbit__tile em {
  display: block;
  padding: .7em .9em;
  font-style: normal;
  font-size: clamp(.6rem, .75vw, .78rem);
  font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--bone-60);
  background: rgba(11,11,13,.85);
  border-top: 1px solid var(--bone-10);
}

.orbit__container::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 46% 62% at 50% 50%, rgba(11,11,13,.96) 38%, rgba(11,11,13,0) 78%);
}

/* ══ 10 ARBEITEN ══ */
.work { padding: var(--gap-section) 0; overflow: hidden; }
.work__controls { display: flex; align-items: center; gap: 1.5rem; }
.work__counter { font-size: var(--t-meta); letter-spacing: .14em; color: var(--bone-40); }
.work__counter b { color: var(--bone); font-weight: 600; }
.work__btns { display: flex; gap: .6rem; }

.slider { position: relative; padding-left: var(--pad-x); }
.slider__track {
  display: flex; gap: clamp(1rem, 2vw, 2rem);
  will-change: transform;
  touch-action: pan-y;
}
.card {
  flex: 0 0 clamp(19rem, 30vw, 30rem);
  user-select: none;
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-3);
  margin-bottom: 1.6rem;
}
/* Bewusst größer als der Rahmen: der Überstand ist der Weg, den das Bild
   beim Parallax zurücklegt, ohne dass eine Kante frei wird.
   Maße explizit statt inset + auto — bei ersetzten Elementen (img) ist
   "beide Kanten gesetzt, Breite auto" überbestimmt und der Browser
   verwirft eine der Kanten. */
/* Überstand nur so groß wie der Parallax-Weg. Vorher waren es 128%/116% —
   davon blieben nur 61% des Originals sichtbar, das Motiv wirkte angeschnitten
   und zu nah. Jetzt 112%/104% bei halbiertem Parallax: gleiche Wirkung,
   deutlich mehr Bild. */
.card__media-inner {
  position: absolute;
  top: -2%; left: -6%;
  width: 112%; height: 104%;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}
/* Farbfläche als Platzhalter, solange das Bild noch lädt */
.card__media[data-tone="1"] { background: linear-gradient(145deg, #2A1D16, #C97B4E 130%); }
.card__media[data-tone="2"] { background: linear-gradient(145deg, #17181D, #4A5570 130%); }
.card__media[data-tone="3"] { background: linear-gradient(145deg, #1D1A17, #8A6A4A 130%); }
.card__media[data-tone="4"] { background: linear-gradient(145deg, #16191A, #3E5F5C 130%); }
.card__media[data-tone="5"] { background: linear-gradient(145deg, #201720, #7A5068 130%); }
/* Bilder ziehen den Kontrast der Seite hoch — leicht abdunkeln, damit die
   Typografie darüber die dominante Ebene bleibt. */
.card__media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(11,11,13,.55), rgba(11,11,13,0) 55%);
}
.card__sector { display: block; font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .14em; color: var(--copper); margin-bottom: .8rem; }
.card__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.15rem, 1.7vw, 1.6rem); letter-spacing: -.03em; line-height: 1.05; margin-bottom: .8rem; }
.card__desc { color: var(--bone-60); max-width: 40ch; margin-bottom: 1.5rem; }
.card__stats { display: flex; gap: 2.5rem; border-top: 1px solid var(--bone-10); padding-top: 1.1rem; }
.card__stats dt { font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .12em; color: var(--bone-40); margin-bottom: .3rem; }
.card__stats dd { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.03em; }

.slider__progress { margin: 2.5rem var(--pad-x) 0 0; height: 1px; background: var(--bone-10); }
.slider__progress i { display: block; height: 100%; background: var(--copper); transform: scaleX(.2); transform-origin: left; }
.slider.is-dragging { cursor: grabbing; }

/* ══ KPI ══ */
.kpi { padding: var(--gap-section) var(--pad-x); }
.kpi__grid {
  max-width: var(--max-w); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--bone-10);
  border: 1px solid var(--bone-10);
}
.kpi__item { background: var(--ink); padding: clamp(2rem, 4vw, 3.5rem) clamp(1.2rem, 2.5vw, 2.2rem); }
.kpi__num {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  letter-spacing: -.05em; line-height: 1;
  margin-bottom: .7rem;
}
.kpi__label { font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .12em; color: var(--bone-40); }

/* ══ STIMMEN ══ */
.voices { padding: var(--gap-section) var(--pad-x); max-width: var(--max-w); margin-inline: auto; }
.voices__inner {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.voices__media { position: relative; }
.voices__list-media { position: relative; aspect-ratio: 1; }
.voices__img {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
}
.voices__img[data-tone="1"] { background: linear-gradient(145deg, #2A1D16, #C97B4E 130%); }
.voices__img[data-tone="2"] { background: linear-gradient(145deg, #17181D, #4A5570 130%); }
.voices__img[data-tone="4"] { background: linear-gradient(145deg, #16191A, #3E5F5C 130%); }
.voices__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.voices__img.is--active { clip-path: circle(50% at 50% 50%); }

/* ══ ABLAUF — gepinnte Bild-Überblendung ══ */
.process { position: relative; }
.process__pin-height { height: 420vh; }
.process__container {
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.2rem, 3vh, 2.5rem);
  padding: var(--nav-h) var(--pad-x) 3rem;
  max-width: var(--max-w); margin-inline: auto;
}
.process__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 58vh;
  overflow: hidden;
  border-radius: var(--radius);
  background: #100E0C;
}
.process__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: opacity, transform;
}
.process__frame::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(11,11,13,.9) 0%, rgba(11,11,13,.1) 45%);
}
.process__caption {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  min-height: 5.5em;
}
.process__cap {
  position: absolute;
  left: clamp(1.2rem, 3vw, 2.4rem); right: clamp(1.2rem, 3vw, 2.4rem); bottom: clamp(1.2rem, 3vw, 2.4rem);
  max-width: 46ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.75vw, 1.7rem);
  line-height: 1.25; letter-spacing: -.025em;
}
.process__cap b {
  display: inline-block; margin-right: .6em;
  font-size: .62em; letter-spacing: .1em; color: var(--copper);
  vertical-align: .22em;
}

.process__steps { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.5rem); }
.process__step {
  display: flex; align-items: center; gap: .7em;
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .14em;
  color: var(--bone-40);
  transition: color .5s var(--ease-out);
}
.process__step i {
  display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--bone-20);
  transition: background-color .5s var(--ease-out), transform .5s var(--ease-out);
}
.process__step.is--active { color: var(--bone); }
.process__step.is--active i { background: var(--copper); transform: scale(1.8); }

/* ══ STUDIO-BAND ══ */
.band { padding: 0 0 var(--gap-section); }
.band__frame {
  position: relative;
  height: clamp(18rem, 46vw, 34rem);
  overflow: hidden;
  background: #16191A;
}
/* Vorher 124% Höhe bei -12%: davon blieben nur 37% des Bildes übrig.
   Jetzt 110% bei -5% und halbiertem Parallax-Weg. */
.band__img {
  position: absolute;
  top: -5%; left: 0;
  width: 100%; height: 110%;
  object-fit: cover;
  will-change: transform;
}
.band__frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,11,13,.7), rgba(11,11,13,.15) 40%, rgba(11,11,13,.8));
}
.band__caption {
  margin: 1.4rem var(--pad-x) 0;
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .16em;
  color: var(--bone-40);
}
.band__caption em {
  font-family: var(--font-serif); font-style: italic; text-transform: none;
  letter-spacing: -.01em; font-size: 1.35em; color: var(--copper);
}

/* Gleiches Muster wie beim Manifest: gestapelt in einer Grid-Zelle, damit
   der Container den längsten Slide misst statt einer geratenen min-height. */
.voices__content { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.voice { grid-area: 1 / 1; }
.voice__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 2.35rem);
  line-height: 1.25; letter-spacing: -.03em;
  max-width: 24ch;
  margin-bottom: 2rem;
}
.voice__meta b { display: block; font-size: var(--t-body); font-weight: 600; }
.voice__meta span { font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .12em; color: var(--bone-40); }
.text-line { display: block; }

.voices__nav { grid-column: 2; display: flex; align-items: center; gap: 1.2rem; margin-top: 2.5rem; }
.voices__counter { font-size: var(--t-meta); letter-spacing: .14em; color: var(--bone-40); }
.voices__counter b { color: var(--bone); }

/* ══ CTA ══ */
.cta {
  padding: var(--gap-section) var(--pad-x);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 2rem;
}
.cta__badge { position: relative; width: 12rem; height: 12rem; display: grid; place-items: center; margin-bottom: 1rem; }
.cta__circle-text { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.cta__circle-text text {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  fill: var(--bone-40);
}
.cta__badge-core {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  width: 5.5rem; height: 5.5rem;
  background: var(--copper); color: var(--ink);
  border-radius: 50%;
  transition: transform .5s var(--ease-out), background-color .4s var(--ease-out);
  will-change: transform;
}
.cta__badge-core svg { width: 1.4rem; height: 1.4rem; }
.cta__badge-core:hover { background: var(--bone); }
.cta__h { font-size: var(--t-h2); max-width: 16ch; }
.cta__p { max-width: 48ch; color: var(--bone-60); font-size: var(--t-lead); }
.cta__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ══ FOOTER ══ */
.footer { border-top: 1px solid var(--bone-10); padding: clamp(3rem, 6vw, 5rem) var(--pad-x) 2rem; }
.footer__top { display: flex; flex-wrap: wrap; gap: 3rem; justify-content: space-between; max-width: var(--max-w); margin-inline: auto; }
.footer__mark { font-size: clamp(4rem, 13vw, 11rem); line-height: .8; letter-spacing: -.06em; color: var(--bone-10); }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2.5rem; flex: 1 1 34rem; }
.footer__cols h3 { font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .14em; color: var(--bone-40); font-weight: 500; margin-bottom: 1rem; }
.footer__cols a, .footer__cols span { display: block; font-size: var(--t-body); color: var(--bone-60); margin-bottom: .45rem; transition: color .3s var(--ease-out); }
.footer__cols a:hover { color: var(--bone); }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  max-width: var(--max-w); margin: 3.5rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid var(--bone-10);
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .12em; color: var(--bone-40);
}

/* ══ RESPONSIVE ══ */
@media (max-width: 991px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .svc { grid-template-columns: 2.5rem 1fr; row-gap: .6rem; align-items: start; }
  .svc__desc { grid-column: 2; }
  .svc__tags { grid-column: 2; text-align: left; }
  .voices__inner { grid-template-columns: 1fr; }
  .voices__media { max-width: 12rem; }
  .voices__nav { grid-column: 1; }
  .orbit__ring { --r: clamp(16rem, 52vw, 24rem); }
  .manifesto__pin-height { height: 340vh; }
  .orbit__pin-height { height: 280vh; }
  .process__pin-height { height: 360vh; }
  .process__frame { max-height: 44vh; }
}

/* ══ ULTRAWIDE ═══════════════════════════════════════════════
   Zugeschnitten auf 3440×1440. Ohne diese Stufe steht der Inhalt in einer
   1600px-Spalte mit 920px Leerraum links und rechts, und die Typografie
   läuft in ihre rem-Deckel — auf dieser Diagonale wirkt beides zu klein.
   Alle Werte hängen an Tokens, deshalb reicht hier ein Block. */
@media (min-width: 2200px) {
  :root {
    --max-w:        2400px;
    --orbit-center: 54rem;
    /* Gemessen: „HEALTH & BEAUTY" ist bei 1.75rem und .14em Laufweite
       355px = 22.2rem breit. Mit Reserve auf 23rem. */
    --label-w:      23rem;
    --pad-x:        clamp(5rem, 4.5vw, 9rem);

    --t-display: clamp(9rem, 10.5vw, 16rem);
    --t-h2:      clamp(4.5rem, 5.6vw, 7.5rem);
    --t-h3:      clamp(2.2rem, 2.4vw, 3.2rem);
    --t-lead:    1.45rem;
    --t-body:    1.15rem;
    --t-meta:    .82rem;

    --nav-h: 6rem;
  }

  /* Orbit: größerer Radius hält bei 1440px Höhe mehr vom Bogen im Bild */
  .orbit__ring { --r: clamp(30rem, 30vw, 42rem); }
  .orbit__ring--left .orbit__item > span { font-size: 1.75rem; padding: .55em 1.1em; }
  .orbit__tile { width: 14rem; }
  .orbit__tile em { font-size: .8rem; }
  .orbit__h { font-size: clamp(3rem, 3.4vw, 4.6rem); }
  .orbit__container::after {
    background: radial-gradient(ellipse 34% 62% at 50% 50%, rgba(11,11,13,.96) 40%, rgba(11,11,13,0) 80%);
  }

  /* Karten dürfen größer werden, sonst stehen sieben Stück nebeneinander */
  .card { flex: 0 0 clamp(28rem, 24vw, 36rem); }
  .voices__inner { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  /* Höher = näher am 3:2 der Quelle = weniger Beschnitt */
  .process__frame { max-height: 74vh; }
  .band__frame { height: clamp(28rem, 34vw, 54rem); }
  .hero__h1 { max-width: 18ch; }
  .marquee__track { font-size: 2.4rem; gap: 3.5rem; padding-right: 3.5rem; }
  .kpi__num { font-size: clamp(4rem, 4.4vw, 6rem); }
  .footer__mark { font-size: clamp(9rem, 13vw, 16rem); }
}

/* Flache Viewports (Handy quer, kleine Laptops). Die gepinnten Sektionen
   sind exakt 100svh hoch — was nicht hineinpasst, wird abgeschnitten, weil
   ein Pin nicht mitscrollt. Typografie hängt an vw, nicht an vh, deshalb
   braucht es hier eine eigene Stufe. */
@media (max-height: 640px) {
  .manifesto__p { font-size: clamp(1.15rem, 3.2vw, 2.4rem); }
  .manifesto__progress { margin-top: 1.75rem; }
  .manifesto__container { padding-bottom: 2rem; }
  .orbit__h { font-size: clamp(1.4rem, 2.8vw, 2.4rem); margin-bottom: .9rem; }
  .orbit__p { font-size: var(--t-body); }
  .process__frame { max-height: 46vh; }
  .process__container { gap: .9rem; padding-bottom: 1.5rem; }
}

@media (max-width: 991px) {
  /* Gepinnte Sektionen kürzen: 380vh Scrollweg sind am Handy eine halbe
     Ewigkeit, weil der Viewport hoch und schmal ist. */
  .seq__pin-height { height: 300vh; }
  .process__pin-height { height: 300vh; }
  /* Weniger Grain — auf kleinen, hellen Displays wirkt er sonst wie Rauschen */
  .grain { opacity: .14; }
}

@media (max-width: 767px) {
  /* Orbit wird zur normalen Sektion: der Mitteltext nimmt hier fast die
     ganze Breite ein, daneben ist für einen rotierenden Bogen kein Platz.
     Das JS überspringt den Aufbau unter 768px (gsap.matchMedia). */
  .orbit__ring--right { display: none; }
  .orbit__pin-height { height: auto; }
  .orbit__container { height: auto; overflow: visible; padding-block: var(--gap-section); display: block; }
  .orbit__container::after { display: none; }
  .orbit__center { width: 100%; padding-inline: var(--pad-x); }
  .orbit__ring--left {
    position: static; width: auto; height: auto;
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
    margin: 2.5rem var(--pad-x) 0;
  }
  .orbit__ring--left .orbit__item { position: static; width: auto; height: auto; }
  .orbit__ring--left .orbit__item > span {
    position: static; font-size: .85rem; padding: .5em 1em;
  }
  .process__frame { aspect-ratio: 4 / 3; }
  .process__steps { gap: .8rem 1.4rem; }

  /* Bildsequenz: Text nach oben, damit er nicht unter der Browserleiste
     klebt, und schmaler gesetzt. */
  .seq__line { font-size: clamp(2rem, 10vw, 3.2rem); max-width: 12ch; }
  .seq__overlay { padding-bottom: clamp(3rem, 12vh, 6rem); }
  .seq__meta { gap: 1rem; }
  .seq__bar { max-width: none; }

  /* Fingerfreundlich: 48px Mindestgröße für alles Antippbare */
  .circle-btn { width: 3.25rem; height: 3.25rem; }
  .btn { padding: 1.05em 1.6em; }
  .svc { padding-block: 1.4rem; }
}

/* Touch-Geräte: kein Hover, also keine Hover-Zustände vorhalten */
@media (hover: none) {
  .svc__tile { display: none; }
  .marquee:hover .marquee__track span { color: var(--bone-60); }
}

@media (max-width: 640px) {
  .hero__h1 { max-width: 100%; }
  .card__stats { gap: 1.5rem; }
  .section-head--split { align-items: flex-start; }
  .orbit__container::after { background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(11,11,13,.95) 35%, rgba(11,11,13,0) 75%); }
}

/* ══ 11 REDUCED MOTION ══════════════════════════════════════
   Der Punkt, den die Referenzseite auslässt. Alles Dekorative
   wird still gestellt, Inhalte bleiben vollständig sichtbar.  */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .grain, .bg-canvas { animation: none; }
  .bg-canvas { opacity: .55; }
  .loader { display: none; }
  .marquee { transform: none !important; }

  /* Pin-Sektionen zu normalen, gestapelten Abschnitten auflösen */
  .manifesto__pin-height, .orbit__pin-height { height: auto; }
  .manifesto__container { height: auto; padding-block: var(--gap-section); }
  .manifesto__stage { min-height: 0; display: flex; flex-direction: column; gap: 2rem; }
  .manifesto__p { position: static; inset: auto; opacity: 1 !important; transform: none !important; }
  .manifesto__p .word, .manifesto__p .word > span { overflow: visible; transform: none !important; }
  .manifesto__progress { display: none; }

  .orbit__container { height: auto; padding-block: var(--gap-section); }
  .orbit__container::after { display: none; }
  .orbit__ring { position: static; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2rem; transform: none !important; }
  .orbit__item { position: static; width: auto; height: auto; transform: none !important; }
  .orbit__item > span { position: static; transform: none !important; }

  .voices__img.is--active { clip-path: none; }
  .slider__track { transform: none !important; overflow-x: auto; }
  .card__media-inner, .band__img { transform: none !important; }

  /* Bildsequenz: ein Standbild statt 145 gescrubbter Frames */
  .seq__pin-height { height: auto; }
  .seq__container { height: auto; aspect-ratio: 16 / 9; }
  .seq__canvas { display: none; }
  .seq__fallback { display: block; }
  .seq__loading { display: none; }
  .seq__line:not(.is-active) { display: none; }
  .seq__bar { display: none; }

  /* Ablauf: aus der Sequenz wird ein normales Raster, alle vier Bilder
     gleichzeitig sichtbar, Text darunter. */
  .process__pin-height { height: auto; }
  .process__container { height: auto; padding-block: var(--gap-section); }
  .process__frame {
    aspect-ratio: auto; max-height: none; overflow: visible; background: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem;
  }
  .process__frame::after { display: none; }
  .process__img {
    position: static; height: auto; aspect-ratio: 3 / 2;
    opacity: 1 !important; transform: none !important;
  }
  .process__caption {
    position: static; grid-column: 1 / -1; padding: 1.5rem 0 0; min-height: 0;
    display: flex; flex-direction: column; gap: .9rem;
  }
  .process__cap { position: static; opacity: 1 !important; transform: none !important; }
  .process__step { color: var(--bone); }
}

/* ══ 12 KEIN-JS-FALLBACK ═══════════════════════════════════
   Alles, was JS erst einblendet, wird ausschließlich unter
   html.js versteckt. Ohne JS ist die Seite komplett lesbar.  */
html.js .loader { opacity: 1; }
html.no-js .loader { display: none; }
html.no-js .menu-overlay { display: none; }

html.js:not(.reduced-motion) [data-reveal],
html.js:not(.reduced-motion) [data-hero-fade] { opacity: 0; }
html.js:not(.reduced-motion) .manifesto__p:not(.is-active) { opacity: 0; }

html.no-js .manifesto__pin-height { height: auto; }
html.no-js .manifesto__container { height: auto; padding-block: var(--gap-section); }
html.no-js .manifesto__stage { min-height: 0; display: flex; flex-direction: column; gap: 2rem; }
html.no-js .manifesto__p { position: static; }
html.no-js .orbit__pin-height { height: auto; }
html.no-js .orbit__container { height: auto; padding-block: var(--gap-section); }
html.no-js .orbit__ring { position: static; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2rem; }
html.no-js .orbit__item { position: static; width: auto; height: auto; }
html.no-js .orbit__item > span { position: static; }
html.no-js .orbit__container::after { display: none; }
html.no-js .voices__img.is--active { clip-path: none; }
html.no-js .voices__img:not(.is--active) { display: none; }
html.no-js .voice:not(.is--active) { display: none; }
html.no-js .slider__track { overflow-x: auto; }
html.no-js .seq__pin-height { height: auto; }
html.no-js .seq__container { height: auto; aspect-ratio: 16 / 9; }
html.no-js .seq__loading { display: none; }
html.no-js .seq__line:not(.is-active) { display: none; }
html.no-js .seq__bar { display: none; }
html.no-js .process__pin-height { height: auto; }
html.no-js .process__container { height: auto; padding-block: var(--gap-section); }
html.no-js .process__frame {
  aspect-ratio: auto; max-height: none; overflow: visible; background: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem;
}
html.no-js .process__frame::after { display: none; }
html.no-js .process__img { position: static; height: auto; aspect-ratio: 3 / 2; }
html.no-js .process__caption {
  position: static; grid-column: 1 / -1; padding: 1.5rem 0 0; min-height: 0;
  display: flex; flex-direction: column; gap: .9rem;
}
html.no-js .process__cap { position: static; }
html.no-js .process__step { color: var(--bone); }