/* ============================================================
   LumiFilms — Dunkles Magazin
   Ordnung ist redaktionell, Bewegung kommt vom Scrollen.
   Signalfarbe ist Grün #587860 aus der CI (Geschäfts-Akzent),
   dunkler Grund. Rot bleibt nur als Variable erhalten, wird aber
   auf dieser Seite bewusst nicht mehr eingesetzt (Michaels Vorgabe
   2026-09-03: LumiFilms soll sich vom F1-Rot lösen). Eigen ist die
   Serifenschrift und der invertierte Papierblock.
   ============================================================ */

:root{
  /* Flächen */
  --grund:    #0D0D0F;   /* Grundfläche, fast schwarz mit leichtem Blaustich */
  --flaeche:  #16161A;   /* Karten und Kästen */
  --tiefer:   #08080A;   /* noch dunkler, für Ränder unter Bildern */
  --kante:    #24242A;   /* Trennlinien */

  /* Schrift */
  --ink:      #F5F3EF;   /* warmes Weiß, Papiergefühl        18,4:1 */
  --dim:      #A9A49C;   /* Vorspann und Nebentext            7,8:1 */
  --faint:    #8B867E;   /* Kleinschrift, Kicker              5,4:1 */

  /* Signal — Geschäfts-Grün aus der CI, seit 2026-09-03 die Leitfarbe */
  --gruen:      #587860; /* Markenklammer, 3,95:1 — nur groß oder als Fläche */
  --gruen-hell: #95C6A1; /* dieselbe Farbe lesbar in Kleinschrift, 10,0:1 */

  /* Rot bleibt definiert, aber unbenutzt (siehe Kommentar oben) */
  --rot:      #E30613;
  --rot-hell: #FF4D57;

  /* Der Magazin-Kniff: invertierte Blöcke */
  --papier:   #EFEBE3;
  --papier-ink: #14141A;

  --schrift: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --breite: 1280px;
  --rand: clamp(20px, 5vw, 72px);
  --spalte: clamp(28px, 3.4vw, 56px);
}

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

html{
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--grund);
  color: var(--ink);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  /* Beide Zeilen sind Absicht. "hidden" macht aus dem Körper einen
     eigenen Scrollbehälter, und darin verliert jedes
     position:sticky seine Wirkung. Genau daran hing am Telefon die
     Filmebene im Werk-Abschnitt. "clip" schneidet genauso ab, ohne
     einen Scrollbehälter zu erzeugen. Ältere Browser, die clip
     nicht kennen, behalten hidden. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, video{ display: block; max-width: 100%; }
figure{ margin: 0; }              /* Voreinstellung ist 1em 40px */
a{ color: inherit; }

h1, h2, h3, h4{
  margin: 0;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

/* ---------- Bausteine ---------- */

.schale{
  width: min(var(--breite), 100% - var(--rand) * 2);
  margin-inline: auto;
}

/* Kicker: die kleine Zeile über einer Überschrift.
   Trägt in einem Magazin die Einordnung. */
.kicker{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kante);
}
.kicker--signal{ color: var(--gruen-hell); }

/* Serifen-Überschriften tragen den Magazin-Charakter */
.serif{ font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.kursiv{ font-style: italic; }

.xxl{ font-size: clamp(40px, 7.4vw, 104px); line-height: .98; }
.xl { font-size: clamp(30px, 4.6vw, 62px);  line-height: 1.02; }
.l  { font-size: clamp(23px, 2.7vw, 36px);  line-height: 1.12; }

.vorspann{
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
  color: var(--dim);
  max-width: 62ch;
}

/* ---------- Kopfzeile ---------- */

.kopf{
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--grund) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--kante);
}
.kopf-innen{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 62px;
}
.marke{
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.marke .films{ color: var(--faint); font-weight: 500; }

.menue{ display: flex; gap: clamp(16px, 2.2vw, 34px); }
.menue a{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.menue a:hover, .menue a:focus-visible{ color: var(--ink); border-color: var(--gruen); }

/* ---------- Aufmacher ---------- */

.aufmacher{
  position: relative;
  min-height: min(94svh, 900px);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--kante);
}
.aufmacher-film{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Zwei Verläufe: unten für die Schrift, oben damit die Kopfzeile trägt */
.aufmacher::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--grund) 4%, color-mix(in srgb, var(--grund) 86%, transparent) 34%,
                            color-mix(in srgb, var(--grund) 45%, transparent) 58%, transparent 78%),
    linear-gradient(to bottom, color-mix(in srgb, var(--grund) 62%, transparent), transparent 26%);
  pointer-events: none;
}
.aufmacher-text{
  position: relative;
  z-index: 2;
  padding-block: clamp(40px, 8vh, 90px) clamp(34px, 6vh, 64px);
}
.aufmacher-text h1{ margin-bottom: 20px; }
.aufmacher-text h1 .zeile2{ display: block; color: var(--dim); }

.aufmacher-fuss{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--kante);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.aufmacher-fuss b{ color: var(--ink); font-weight: 700; }

/* Tonschalter am Aufmacher */
.tonschalter{
  position: absolute;
  right: var(--rand);
  bottom: clamp(34px, 6vh, 64px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--grund) 70%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--kante);
  color: var(--dim);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.tonschalter:hover{ color: var(--ink); border-color: var(--gruen); }

/* ---------- Leitsatz: der grosse Gedanke ---------- */

.leitsatz{
  padding-block: clamp(72px, 13vh, 150px);
  border-bottom: 1px solid var(--kante);
}
.leitsatz-satz{
  font-family: var(--serif);
  font-size: clamp(30px, 5.2vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 19ch;
}
.leitsatz-satz em{ font-style: italic; color: var(--gruen-hell); }
.leitsatz .vorspann{ margin-top: 30px; }

/* ---------- Arbeiten ---------- */

.arbeiten{ padding-block: clamp(60px, 10vh, 120px) 0; }

.beitrag{
  padding-block: clamp(52px, 9vh, 110px);
  border-bottom: 1px solid var(--kante);
}
.beitrag:first-of-type{ padding-top: 0; }

.beitrag-kopf{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: var(--spalte);
  align-items: end;
  margin-bottom: clamp(28px, 4vh, 46px);
}
.beitrag-kopf h3{ margin-bottom: 0; }
.beitrag-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.beitrag-meta span{ display: inline-flex; align-items: center; gap: 8px; }
.beitrag-meta span::before{
  content: "";
  width: 4px; height: 4px;
  background: var(--gruen);
}

/* Die Bühne: das Element, das beim Scrollen aufzieht */
.buehne{
  position: relative;
  overflow: hidden;
  background: var(--tiefer);
  transform-origin: 50% 50%;
}
.buehne video, .buehne img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
.buehne--hoch video, .buehne--hoch img{ aspect-ratio: 4 / 5; }

/* Aufziehen beim Reinscrollen.
   Bevorzugt scrollgebunden per CSS, ohne ein einziges Bild JavaScript. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .buehne{
      animation: aufziehen linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 34%;
    }
  }
}
@keyframes aufziehen{
  from{ transform: scale(.855); filter: brightness(.42) saturate(.75); }
  to  { transform: scale(1);    filter: brightness(1)  saturate(1); }
}
/* Rückfallebene für Browser ohne scrollgebundene Animationen (Skript setzt .drin) */
.js-zoom .buehne{
  transform: scale(.855);
  filter: brightness(.42) saturate(.75);
  transition: transform .9s cubic-bezier(.16,.84,.24,1), filter .9s ease;
}
.js-zoom .buehne.drin{ transform: scale(1); filter: none; }

/* Abspielknopf über der Bühne */
.buehne-knopf{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.buehne-knopf i{
  width: clamp(56px, 6vw, 82px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
  background: color-mix(in srgb, var(--grund) 34%, transparent);
  backdrop-filter: blur(5px);
  transition: background .2s, border-color .2s, transform .2s;
}
.buehne-knopf i::before{
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 15px solid currentColor;
  border-block: 9px solid transparent;
}
.buehne-knopf:hover i{
  background: var(--gruen);
  border-color: var(--gruen);
  transform: scale(1.06);
}
.buehne.laeuft .buehne-knopf{ opacity: 0; pointer-events: none; }

/* Bildstrecke unter einem Beitrag.

   Bewusst KEIN starres Raster: die Fotos haben unterschiedliche
   Formate, teils hochkant. Ein erzwungenes 3:2 wuerde Gesichter
   anschneiden. Stattdessen gleiche Hoehe, eigenes Seitenverhaeltnis,
   Zeile bricht um. So wird nichts beschnitten, und der leicht
   unregelmaessige rechte Rand ist im Magazin ohnehin richtig. */
/* Wasserfall statt Zeilen. Vorher war es flex mit gleicher Hoehe und
   Umbruch, dabei blieb in der letzten Zeile eine grosse Luecke stehen,
   die wie ein Ladefehler aussah. Spalten fuellen sich von selbst auf,
   und jedes Bild behaelt sein eigenes Format: nichts wird beschnitten,
   und es entsteht kein Loch. */
.strecke{
  columns: 4;
  column-gap: 4px;
  margin-top: 4px;
}
.strecke img{
  width: 100%;
  height: auto;
  margin-bottom: 4px;
  break-inside: avoid;
}

/* Nebeneinander: zwei Videos in einem Beitrag */
.paar{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 3px;
}

.bildunterschrift{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
  max-width: 70ch;
}

/* ---------- Der Papierblock: Ton ---------- */

.papier{
  background: var(--papier);
  color: var(--papier-ink);
  padding-block: clamp(66px, 11vh, 128px);
}
.papier .kicker{ color: #6C665C; }
.papier .kicker::after{ background: #CFC9BE; }
.papier .vorspann{ color: #3D3A34; }
.papier-raster{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--spalte);
  align-items: start;
}

.hoerprobe{
  border-top: 1px solid #D6D0C4;
  padding-block: 20px;
}
.hoerprobe:last-child{ border-bottom: 1px solid #D6D0C4; }
.hoerprobe-kopf{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.hoerprobe-titel{ font-family: var(--serif); font-size: 24px; }
.hoerprobe-wer{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6C665C;
}
.hoerprobe audio{ width: 100%; height: 36px; }

/* ---------- Leistungen ---------- */

.leistungen{
  padding-block: clamp(66px, 11vh, 128px);
  border-bottom: 1px solid var(--kante);
}
.preisliste{ margin-top: clamp(30px, 5vh, 54px); }
.preis{
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 12px var(--spalte);
  align-items: baseline;
  padding-block: 22px;
  border-top: 1px solid var(--kante);
}
.preis:last-child{ border-bottom: 1px solid var(--kante); }
.preis-name{ font-family: var(--serif); font-size: clamp(22px, 2.3vw, 31px); }
.preis-was{
  grid-column: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--faint);
  max-width: 56ch;
}
.preis-ab{
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.preis-ab small{
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
  margin-bottom: 2px;
}
.preis-fuss{
  margin-top: 26px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--faint);
  max-width: 70ch;
}

/* ---------- Kontakt ---------- */

.kontakt{ padding-block: clamp(66px, 11vh, 128px); }
.kontakt-raster{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--spalte);
  align-items: start;
}
.mailto{
  display: inline-block;
  margin-top: 28px;
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 46px);
  text-decoration: none;
  border-bottom: 2px solid var(--gruen);
  padding-bottom: 4px;
  transition: color .2s;
  word-break: break-word;
}
.mailto:hover{ color: var(--gruen-hell); }

.kanaele{ margin-top: 34px; display: grid; gap: 2px; }
.kanal{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--kante);
  text-decoration: none;
  color: var(--dim);
  transition: color .18s;
}
.kanal:last-child{ border-bottom: 1px solid var(--kante); }
.kanal:hover{ color: var(--ink); }
.kanal b{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- Fuß ---------- */

footer{
  border-top: 1px solid var(--kante);
  padding-block: 36px;
  font-size: 12px;
  color: var(--faint);
}
.fuss{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
}
.fuss nav{ display: flex; gap: 22px; }
.fuss a{ color: var(--faint); text-decoration: none; }
.fuss a:hover{ color: var(--ink); }

/* ---------- Zugänglichkeit ---------- */

:focus-visible{ outline: 2px solid var(--gruen-hell); outline-offset: 3px; }

.nur-vorleser{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js-zoom .buehne{ transform: none; filter: none; }
  /* Marquee ganz abschalten statt auf .001ms zu zwingen — sonst
     flackert das Band nur extrem schnell statt stillzustehen. */
  .kunden-band{ animation: none !important; flex-wrap: wrap; width: auto; }
  .kunden-spur[aria-hidden="true"]{ display: none; }
}

/* ---------- Sprungmarken ----------
   Die Kopfzeile klebt oben. Ohne diesen Abstand landet jede
   Sprungmarke unter der Leiste. */
#arbeiten, #ton, #leistungen, #kontakt{ scroll-margin-top: 74px; }

/* ---------- Menüknopf und Vollbildmenü (nur am Telefon) ---------- */
.menue-knopf{ display: none; }
.vollmenue{ display: none; }
.fussleiste{ display: none; }


/* Der Kicker im Aufmacher liegt ueber bewegtem Bild, teils ueber hellem
   Rasen. Deshalb dort heller als sonst und mit einem Schattensaum. */
.aufmacher-text .kicker{
  color: #D8D3CB;
  text-shadow: 0 1px 12px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.6);
}
.aufmacher-text .kicker::after{ background: rgba(255,255,255,.22); }
.aufmacher-text h1{ text-shadow: 0 2px 30px rgba(0,0,0,.55); }
.aufmacher-fuss{
  border-top-color: rgba(255,255,255,.2);
  color: #CFCAC2;
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
}

/* ---------- Sprungziel hinter der klebenden Kopfzeile ---------- */
.sprungziel{
  display: block;
  position: relative;
  top: -74px;
  height: 0;
  visibility: hidden;
}

/* ---------- Referenzleiste: laufendes Band ----------
   Michaels Vorgabe: schmales, endlos durchlaufendes Band mit
   dünner, eleganter Schrift, die bekanntesten Namen vorne, direkt
   über „Warum wir". Zwei identische Spuren nebeneinander, die
   zusammen genau einmal die Bandbreite ergeben. Die Animation
   verschiebt exakt um 50 %, also um eine Spur — der Übergang ist
   nahtlos, weil Spur 2 optisch Spur 1 fortsetzt. */
.kunden{
  position: relative;
  padding-block: clamp(30px, 4.6vh, 52px);
  border-bottom: 1px solid var(--kante);
  overflow: hidden;
}
.kunden-kicker{ margin: 0; }
.kunden-band{
  display: flex;
  width: max-content;
  animation: kunden-lauf 74s linear infinite;
}
.kunden:hover .kunden-band{ animation-play-state: paused; }
.kunden-spur{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
/* Gross, dünn, kursiv. Getrennt durch einen feinen Punkt statt einer
   Linie: Linien wirken wie eine Tabelle, der Punkt wie ein Impressum
   im Filmabspann. */
.kunden-eintrag{
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  white-space: nowrap;
  padding-inline: clamp(26px, 3vw, 52px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.1;
  letter-spacing: .005em;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  position: relative;
  transition: color .3s;
}
.kunden-eintrag::after{
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--gruen-hell) 55%, transparent);
}
.kunden:hover .kunden-eintrag{ color: var(--ink); }
.kunden-eintrag b{
  font-family: var(--schrift);
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gruen-hell);
  align-self: center;
  transform: translateY(-1px);
}
@keyframes kunden-lauf{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
/* Weicher Auslauf an beiden Rändern statt hartem Schnitt */
.kunden::before, .kunden::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(30px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.kunden::before{ left: 0;  background: linear-gradient(90deg, var(--grund), transparent); }
.kunden::after { right: 0; background: linear-gradient(270deg, var(--grund), transparent); }

/* ---------- Zahlen ----------
   Der Beleg-Abschnitt. Bewusst redaktionell gesetzt statt als
   Kennzahlen-Kacheln: grosse Serifenzahl, darunter ein ganzer Satz.
   Kacheln wirken nach Startup-Baukasten, das hier nach Magazin. */
.zahlen{
  padding-block: clamp(64px, 11vh, 128px);
  border-bottom: 1px solid var(--kante);
}
.zahlenreihe{
  margin: clamp(28px, 5vh, 52px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--kante);
  border-block: 1px solid var(--kante);
}
.zahl{
  background: var(--grund);
  padding: clamp(24px, 3.4vw, 40px) clamp(20px, 2.4vw, 32px);
}
.zahl-wert{
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(44px, 5.6vw, 82px);
  line-height: .95;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.zahl:nth-child(2) .zahl-wert,
.zahl:nth-child(4) .zahl-wert{ color: var(--gruen-hell); }
.zahl-was{
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--dim);
  max-width: 30ch;
}

/* ---------- Ablauf ----------
   Vier Schritte. Die Nummern stehen gross und blass hinter dem Text,
   wie Seitenzahlen im Magazin. */
.ablauf{
  padding-block: clamp(64px, 11vh, 128px);
  border-bottom: 1px solid var(--kante);
}
.schritte{
  list-style: none;
  margin: clamp(32px, 5vh, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(28px, 3vw, 46px);
  counter-reset: schritt;
}
.schritt{
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--kante);
}
/* Gestaffelt einblenden, sobald der Abschnitt in Sicht kommt.
   Versteckt wird NUR, wenn das Skript laeuft (html.js wird ganz oben
   im Kopf gesetzt). Ohne JavaScript stehen die Schritte sofort da,
   statt fuer immer unsichtbar zu bleiben. */
html.js .schritt{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
html.js .schritt.drin{ opacity: 1; transform: none; }
html.js .schritt:nth-child(2){ transition-delay: .09s; }
html.js .schritt:nth-child(3){ transition-delay: .18s; }
html.js .schritt:nth-child(4){ transition-delay: .27s; }

.schritt-nr{
  position: absolute;
  top: 14px;
  right: 0;
  font-family: var(--serif);
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 9%, transparent);
  pointer-events: none;
}
.schritt-titel{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  position: relative;
}
.schritt-titel::before{
  content: "";
  position: absolute;
  top: -23px; left: 0;
  width: 26px; height: 2px;
  background: var(--gruen);
}
.schritt-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--dim);
}

/* ---------- Weitere Arbeiten ---------- */
.weiteres{ padding-block: clamp(56px, 9vh, 104px); border-bottom: 1px solid var(--kante); }
.kanal span em{
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 4px;
}

/* ---------- Team ---------- */
.team{ padding-block: clamp(56px, 9vh, 104px); border-bottom: 1px solid var(--kante); }
.team-raster{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(16px, 2vw, 30px);
  margin-block: clamp(30px, 5vh, 52px) 30px;
}
.person img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter .35s ease;
}
.person:hover img{ filter: none; }
.person figcaption{ margin-top: 14px; }
.person b{ display: block; font-size: 16px; font-weight: 700; }
.person em{
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Ohne Foto: eine Fläche mit Linie, statt eines leeren Kastens */
.person--ohne{
  display: flex;
  align-items: flex-end;
  border-top: 1px solid var(--kante);
  padding-top: 14px;
  min-height: 120px;
}
.person--ohne figcaption{ margin-top: 0; }