/* ============================================================
   ONEX — Schellack-Palette, direkt aus den Logodateien gemessen
   ============================================================ */
:root{
  --tinte:      #0D0703;   /* warmes Schwarz, Plakat            */
  --tinte-tief: #070402;
  --tuerkis:    #36A8C4;   /* Labelring, Plakat                 */
  --tuerkis-tief:#018AB4;  /* Foto-Verlauf rechts               */
  --terrakotta: #C87137;   /* Plakat-Sockel                     */
  --bernstein:  #C07C01;   /* Foto-Verlauf links                */
  --braun:      #382504;   /* Bühnengrund im Farbkonzept        */
  --creme:      #E9DCC4;
  --creme-matt: #B9ACA4;
  --gold:       #D9A441;

  --schrift-plakat: 'Big Shoulders Display', 'Oswald', Impact, sans-serif;
  --schrift-text:   'Crimson Pro', Georgia, 'Times New Roman', serif;

  --spur: 78px;            /* Höhe der Player-Leiste            */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0;
  background:var(--tinte-tief);
  color:var(--creme);
  font-family:var(--schrift-text);
  font-size:17px; line-height:1.65;
  padding-bottom:var(--spur);
  /* kein overflow-x am body — das wuerde position:sticky brechen.
     Das Klippen uebernimmt html{overflow-x:clip}. */
}

/* --- Papierkorn über allem, damit nichts digital-glatt wirkt --- */
body::after{
  content:''; position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.32; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

h1,h2,h3,.plakat{
  font-family:var(--schrift-plakat);
  font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; line-height:.95; margin:0;
}

.hgruppe{max-width:1180px;margin:0 auto;padding:0 24px}

/* ============================================================
   0. KOPFZEILE
   ============================================================ */
.kopf{
  position:fixed; top:0; left:0; right:0; z-index:700;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px 32px;
  background:linear-gradient(180deg,rgba(7,4,2,.92),rgba(7,4,2,0));
}
.kopf__marke{display:flex; align-items:center; gap:12px; text-decoration:none}
.kopf__zeichen{width:34px; height:34px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(233,220,196,.28)}
.kopf__zeichen img{width:100%; height:100%; object-fit:cover; display:block}
.kopf__wort{font-family:var(--schrift-plakat); font-size:1.32rem; letter-spacing:.3em;
  color:var(--creme); text-transform:uppercase; line-height:1}
.kopf__wort em{display:block; font-style:normal; font-size:.56rem;
  letter-spacing:.34em; color:var(--creme-matt); margin-top:2px}
.kopf nav{display:flex; gap:30px}
.kopf nav a{
  font-family:var(--schrift-plakat); font-size:.94rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--creme-matt); text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.kopf nav a:hover{color:var(--gold); border-color:var(--gold)}

/* Klippt den Ueberstand des gedrehten Tonarms — auf Bildschirmbreite,
   nicht am 1180er-Container, sonst wird das Tonarmlager angeschnitten.
   clip statt hidden, damit kein Scrollcontainer entsteht (der wuerde
   position:sticky im Katalog brechen). */
.buehne{overflow-x:clip}

/* ============================================================
   1. DIE PLATTE — Startbild
   ============================================================ */
.platte{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px;
  max-width:1180px; margin:0 auto; padding:124px 24px 72px;
}
/* Verlauf aus Bild 04.12.22: Bernstein links, Creme mittig, Türkis rechts */
.platte::before{
  content:''; position:absolute; inset:0; z-index:-1;
  /* Bernstein links, Tuerkis rechts, Creme in der Mitte —
     der Verlauf aus Bild 04.12.22 */
  background:
    radial-gradient(62% 66% at 16% 42%, rgba(192,124,1,.40), transparent 72%),
    radial-gradient(58% 62% at 88% 62%, rgba(1,138,180,.44), transparent 72%),
    radial-gradient(44% 44% at 52% 50%, rgba(233,220,196,.09), transparent 70%);
  filter:blur(18px);
}

.teller{position:relative; aspect-ratio:1; width:100%; max-width:470px; justify-self:center}

/* Rillen + Label drehen gemeinsam */
.scheibe{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #241a12 0%, #120c07 42%, #0a0603 100%);
  box-shadow:0 28px 70px rgba(0,0,0,.75), inset 0 0 60px rgba(0,0,0,.9);
  animation:dreh 12s linear infinite; animation-play-state:paused;
}
body.laeuft .scheibe{animation-play-state:running}
@keyframes dreh{to{transform:rotate(360deg)}}

.rillen{position:absolute; inset:0; width:100%; height:100%}
.rillen circle{fill:none; stroke:rgba(233,220,196,.055); stroke-width:.35}
.rillen circle:nth-child(4n){stroke:rgba(54,168,196,.10)}

.label{
  position:absolute; inset:31%; border-radius:50%;
  background:var(--tinte) center/cover no-repeat;
  box-shadow:0 0 0 2px rgba(233,220,196,.16), 0 6px 22px rgba(0,0,0,.6);
  overflow:hidden;
}
.label img{width:100%; height:100%; object-fit:cover; display:block}
/* Spindelloch */
.label::after{
  content:''; position:absolute; left:50%; top:50%; width:5.5%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--tinte-tief); box-shadow:inset 0 0 4px rgba(0,0,0,.9);
}

/* Tonarm = Fortschritt.
   Geometrie: Lager bei (116,20) im 128er-Feld, ausserhalb der Platte.
   Armlaenge 78 -> Nadel trifft bei 0 Grad die Aussenrille (r=49) und
   bei 23 Grad die Auslaufrille (r=22). Ruhestellung: -14 Grad, neben
   der Platte geparkt. */
.tonarm{
  position:absolute; inset:-14%;
  transform-origin:90.6% 15.6%; transform:rotate(-14deg);
  transition:transform .45s cubic-bezier(.4,.1,.3,1); pointer-events:none;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.65));
}

.einfuehrung{max-width:30rem}
.marke{
  font-family:var(--schrift-plakat); font-size:clamp(3.2rem,6.6vw,6.2rem);
  letter-spacing:.02em; margin:0;
  /* fit-content, damit der Verlauf ueber die Schrift laeuft und nicht
     ueber die leere Absatzbreite */
  width:fit-content;
  background:linear-gradient(100deg,var(--bernstein) 0%,var(--terrakotta) 22%,var(--creme) 50%,var(--tuerkis) 74%,var(--tuerkis-tief) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.unterzeile{
  font-family:var(--schrift-plakat); font-size:clamp(.95rem,1.6vw,1.15rem);
  letter-spacing:.42em; color:var(--tuerkis); margin:.3rem 0 1.25rem;
}
.anspruch{
  font-family:var(--schrift-text); font-size:clamp(1.2rem,1.9vw,1.5rem);
  color:var(--creme); font-style:italic; margin:0 0 1.1rem; max-width:32ch;
  text-wrap:balance;
}
.einfuehrung .fliess{color:var(--creme-matt); font-size:1.12rem; max-width:34ch}

.knopfreihe{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.8rem}
.knopf{
  font-family:var(--schrift-plakat); font-size:1rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  padding:14px 30px; border:2px solid var(--terrakotta); border-radius:2px;
  background:var(--terrakotta); color:var(--tinte);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.knopf:hover{transform:translateY(-2px); background:var(--gold); border-color:var(--gold)}
.knopf--leer{background:transparent; color:var(--tuerkis); border-color:var(--tuerkis)}
.knopf--leer:hover{background:var(--tuerkis); color:var(--tinte)}

.abschnitt__vorlauf{
  color:var(--creme-matt); max-width:56ch; margin:-28px 0 56px; font-size:1.08rem;
}

/* ============================================================
   LEISTUNGEN
   ============================================================ */
.leistungen{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  background:rgba(233,220,196,.13);   /* wird zu den Trennlinien */
  border:1px solid rgba(233,220,196,.13);
}
.leistung{
  background:var(--tinte-tief); padding:38px 32px 42px;
  transition:background .25s ease;
}
.leistung:hover{background:#100a05}
.leistung__nr{
  font-family:var(--schrift-plakat); font-size:.8rem; letter-spacing:.3em;
  color:var(--gold); display:block; margin-bottom:14px;
}
.leistung h3{font-size:1.62rem; color:var(--creme); margin-bottom:.6rem}
.leistung p{color:var(--creme-matt); font-size:1.02rem; margin:0}

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.kontakt__daten{margin:0; display:grid; grid-template-columns:auto 1fr; gap:14px 26px}
.kontakt__daten dt{
  font-family:var(--schrift-plakat); font-size:.86rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tuerkis); padding-top:3px;
}
.kontakt__daten dd{margin:0; color:var(--creme)}
.kontakt__daten a{color:var(--creme); text-decoration:none; border-bottom:1px solid var(--terrakotta)}
.kontakt__daten a:hover{color:var(--gold); border-color:var(--gold)}
.platzhalter{color:var(--creme-matt); font-style:italic; opacity:.65}

/* ============================================================
   2. KATALOG — jedes Release ist wieder ein Label
   ============================================================ */
.abschnitt{padding:110px 0; position:relative}
.abschnitt--braun{background:linear-gradient(180deg,transparent,rgba(56,37,4,.55) 22%,rgba(56,37,4,.55) 78%,transparent)}

.kopfzeile{display:flex; align-items:baseline; gap:20px; margin-bottom:56px}
.kopfzeile h2{font-size:clamp(2.4rem,5vw,3.8rem); color:var(--creme)}
.kopfzeile .zaehler{font-family:var(--schrift-plakat); color:var(--tuerkis); letter-spacing:.3em; font-size:.9rem}
.kopfzeile::after{content:''; flex:1; height:2px; background:linear-gradient(90deg,var(--gold),transparent)}

#katalog{display:grid; gap:120px}

.platte-block{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:56px; align-items:start;
}
.platte-block:nth-child(even) .platte-block__bild{order:2}

/* Die Hülle: Platte lugt rechts hervor */
/* Bei langen Titellisten laeuft das Cover mit, statt einsam
   in der Mitte zu schweben. 96px = Hoehe der Kopfzeile. */
.platte-block__bild{position:sticky; top:96px; isolation:isolate}
.huelle{
  position:relative; z-index:1;
  width:100%; display:block; aspect-ratio:1; object-fit:cover;
  border:1px solid rgba(233,220,196,.14);
  box-shadow:0 26px 60px rgba(0,0,0,.72);
  filter:saturate(.85) contrast(1.06);
}
.platte-block__bild::before{           /* die Platte hinter der Hülle */
  content:''; position:absolute; right:-10%; top:7%; width:86%; aspect-ratio:1;
  border-radius:50%; z-index:-1;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(233,220,196,.09) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 36% 32%, #2e2117, #0a0603 74%);
  box-shadow:0 20px 44px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.8);
}
.platte-block__marke{
  position:absolute; left:0; bottom:0; z-index:2; transform:translate(-14px,14px);
  font-family:var(--schrift-plakat); font-size:.82rem; letter-spacing:.2em;
  color:var(--tinte); padding:8px 16px;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}

.platte-block__text{position:relative; z-index:2}  /* Text bleibt vor der Platte */
.platte-block__titel{font-size:clamp(2.2rem,4.4vw,3.4rem); color:var(--creme); margin:.3rem 0}
.platte-block__kuenstler{
  font-family:var(--schrift-plakat); font-size:1.25rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--tuerkis); margin:0 0 1.2rem;
}
.platte-block__beschreibung{color:var(--creme-matt); max-width:46ch; margin:0 0 2rem}
.release__nr{font-family:var(--schrift-plakat); font-size:.78rem; letter-spacing:.24em; color:var(--gold); margin:0}

/* --- Titelliste --- */
.titelliste{list-style:none; margin:0; padding:0; border-top:1px solid rgba(233,220,196,.13)}
.titelzeile{border-bottom:1px solid rgba(233,220,196,.13)}
.titelzeile__knopf{
  width:100%; display:flex; align-items:center; gap:18px; cursor:pointer;
  background:none; border:0; padding:15px 12px; text-align:left; color:inherit;
  font-family:var(--schrift-text); font-size:1.06rem;
  transition:background .2s ease, padding-left .2s ease;
}
.titelzeile__knopf:hover{background:rgba(233,220,196,.055); padding-left:20px}
.titelzeile__knopf:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.titelzeile__nr{
  /* Ziffern in der kondensierten Schrift brauchen Luft, sonst
     verschmelzen 0 und 1 zu einem Strich */
  font-family:var(--schrift-plakat); font-weight:400;
  font-size:1.02rem; letter-spacing:.16em;
  color:var(--terrakotta); flex:0 0 auto; min-width:3ch;
}
.titelzeile__name{flex:1; color:var(--creme)}
.titelzeile.spielt .titelzeile__name{color:var(--gold)}
.titelzeile.spielt .titelzeile__nr{color:var(--gold)}

/* Tanzende Balken nur beim laufenden Titel */
.titelzeile__welle{display:flex; align-items:flex-end; gap:3px; height:16px; opacity:0}
.titelzeile.spielt .titelzeile__welle{opacity:1}
.titelzeile__welle i{width:3px; height:5px; background:var(--gold); display:block}
body.laeuft .titelzeile.spielt .titelzeile__welle i{animation:huepf .9s ease-in-out infinite}
.titelzeile__welle i:nth-child(2){animation-delay:.15s}
.titelzeile__welle i:nth-child(3){animation-delay:.3s}
.titelzeile__welle i:nth-child(4){animation-delay:.45s}
@keyframes huepf{0%,100%{height:4px}50%{height:16px}}

/* ============================================================
   3. ÜBER DAS LABEL
   ============================================================ */
.ueber{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center}
.ueber .fliess{font-size:1.16rem; color:var(--creme-matt)}
.leitsatz{
  font-family:var(--schrift-plakat); font-size:clamp(1.9rem,3.4vw,2.9rem);
  text-transform:uppercase; letter-spacing:.03em; line-height:1.05;
  color:var(--creme); margin:0 0 1.6rem; max-width:18ch;
  border-left:4px solid var(--terrakotta); padding-left:22px;
}
.ueber .fliess + .fliess{margin-top:1.1rem}
.ueber .grossbuchstabe::first-letter{
  font-family:var(--schrift-plakat); float:left; font-size:4.4rem; line-height:.78;
  padding:6px 12px 0 0; color:var(--terrakotta);
}
.plakatbild{width:100%; border:10px solid var(--tinte); box-shadow:0 22px 48px rgba(0,0,0,.6); display:block}

/* ============================================================
   4. PLAYER — läuft beim Navigieren weiter
   ============================================================ */
.spur{
  position:fixed; left:0; right:0; bottom:0; z-index:800; height:var(--spur);
  display:flex; align-items:center; gap:18px; padding:0 20px;
  background:linear-gradient(180deg,rgba(13,7,3,.94),rgba(7,4,2,.99));
  border-top:2px solid var(--terrakotta);
  backdrop-filter:blur(12px);
  transform:translateY(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.spur.sichtbar{transform:none}
.spur__label{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  box-shadow:0 0 0 2px rgba(233,220,196,.2);
  animation:dreh 12s linear infinite; animation-play-state:paused;
}
body.laeuft .spur__label{animation-play-state:running}
.spur__label img{width:100%; height:100%; object-fit:cover}
.spur__info{min-width:0; flex:0 0 auto; width:min(230px,32vw)}
.spur__titel{font-family:var(--schrift-plakat); font-size:1rem; color:var(--creme);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spur__meta{font-size:.82rem; color:var(--creme-matt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spur__knopf{
  width:46px; height:46px; flex:0 0 auto; border-radius:50%; cursor:pointer;
  border:2px solid var(--tuerkis); background:transparent; color:var(--tuerkis);
  display:grid; place-content:center; transition:background .2s, color .2s;
}
.spur__knopf:hover{background:var(--tuerkis); color:var(--tinte)}
.spur__rille{
  flex:1; height:26px; cursor:pointer; position:relative; display:flex; align-items:center;
}
.spur__rille::before{content:''; position:absolute; left:0; right:0; height:3px;
  background:rgba(233,220,196,.16); border-radius:2px}
.spur__fortschritt{position:absolute; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--bernstein),var(--terrakotta),var(--gold)); border-radius:2px}
.spur__zeit{font-family:var(--schrift-plakat); font-size:.85rem; letter-spacing:.1em;
  color:var(--creme-matt); flex:0 0 auto; min-width:96px; text-align:right}

/* ============================================================
   RECHTSTEXTE — Impressum, Datenschutz
   ============================================================ */
.seite--recht{padding-bottom:0}            /* hier laeuft kein Abspieler */
.rechtstext{
  max-width:min(72ch,100%); margin:0 auto; padding:150px 24px 90px;
}
.rechtstext h1{font-size:clamp(2.6rem,6vw,4rem); color:var(--creme); margin-bottom:2.4rem}
.rechtstext h2{
  font-size:1.32rem; color:var(--tuerkis); margin:2.8rem 0 .7rem;
  letter-spacing:.1em;
}
.rechtstext p, .rechtstext li{color:var(--creme-matt); font-size:1.06rem}
.rechtstext p{margin:0 0 1rem}
.rechtstext ul{margin:0 0 1.2rem; padding-left:1.3em}
.rechtstext li{margin-bottom:.35rem}
.rechtstext strong{color:var(--creme)}
.rechtstext a{color:var(--creme); text-decoration:none; border-bottom:1px solid var(--terrakotta)}
.rechtstext a:hover{color:var(--gold); border-color:var(--gold)}
.zurueck{margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid rgba(233,220,196,.13)}

/* Auszufuellende Stelle — faellt beim Lesen sofort auf */
.luecke{
  color:var(--gold); background:rgba(217,164,65,.09);
  border-bottom:1px dashed rgba(217,164,65,.5); padding:1px 4px;
  font-style:italic;
}
/* Warnhinweis, der vor dem Livegang geloescht wird */
.entwurf{
  border:2px solid var(--terrakotta); background:rgba(200,113,55,.12);
  padding:20px 24px; margin-bottom:48px; color:var(--creme);
  font-size:1rem; line-height:1.6;
}
.entwurf strong{display:block; font-family:var(--schrift-plakat);
  font-size:1.1rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--terrakotta); margin-bottom:.5rem}

/* ============================================================
   Fuß
   ============================================================ */
.fuss{padding:72px 0 44px; border-top:1px solid rgba(233,220,196,.12); text-align:center}
.fuss__oben{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);
  gap:56px; text-align:left; align-items:start;
  padding-bottom:44px; margin-bottom:34px;
  border-bottom:1px solid rgba(233,220,196,.12);
}
.fuss__dach{
  margin-top:1.4rem; font-size:.92rem; color:var(--creme-matt); line-height:1.5;
}
.fuss__dach strong{
  display:inline-block; margin-top:3px;
  font-family:var(--schrift-plakat); font-weight:700; font-size:1.02rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tuerkis);
}

/* --- Netzwerk der Tribune Industries --- */
/* Zwei mal zwei statt drei plus eins — die laengste Adresse
   (schattenatlas.…) passt bei vier Spalten nicht ohne Umbruch. */
.netzwerk{
  display:grid; gap:34px 44px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.netzwerk__gruppe h3{
  font-size:.84rem; letter-spacing:.24em; color:var(--gold);
  margin:0 0 12px; padding-bottom:8px;
  border-bottom:1px solid rgba(217,164,65,.28);
}
.netzwerk__gruppe a{
  display:block; font-size:.94rem; color:var(--creme-matt);
  text-decoration:none; padding:4px 0;
  transition:color .2s ease, padding-left .2s ease;
  overflow-wrap:anywhere;
}
.netzwerk__gruppe a:hover{color:var(--creme); padding-left:6px}
.netzwerk__gruppe a::before{content:'↗'; color:var(--terrakotta); margin-right:7px; font-size:.8em}
.fuss .marke__klein{font-family:var(--schrift-plakat); font-size:1.6rem;
  letter-spacing:.3em; color:var(--terrakotta); margin:0}
.fuss p{color:var(--creme-matt); font-size:.92rem}
.fuss__zeile{font-family:var(--schrift-plakat); letter-spacing:.24em;
  text-transform:uppercase; font-size:.82rem; margin:.2rem 0 1.6rem}
.fuss__nav{display:flex; gap:28px; justify-content:center; flex-wrap:wrap}
.fuss__nav a{
  font-family:var(--schrift-plakat); font-size:.86rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--creme-matt); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.fuss__nav a:hover{color:var(--gold); border-color:var(--gold)}

/* ============================================================
   Schmal
   ============================================================ */
@media (max-width:860px){
  .platte{grid-template-columns:1fr; text-align:center; padding-top:72px}
  .einfuehrung{margin:0 auto}
  .einfuehrung .fliess{margin-inline:auto}
  .marke{margin-inline:auto}
  .kopf{padding:14px 20px}
  .kopf nav{gap:18px}
  .kopf nav a{font-size:.82rem; letter-spacing:.14em}
  .kopf__wort{display:none}
  .knopfreihe{justify-content:center}
  /* Der Tonarm ist 128% des Tellers breit — der Teller muss so weit
     schrumpfen, dass Arm und Platte zusammen in den Schirm passen.
     Sonst verschiebt sich die Nadelgeometrie. */
  .teller{max-width:min(62vw,340px)}
  .ueber{grid-template-columns:1fr; gap:40px}
  .kontakt{grid-template-columns:1fr; gap:34px}
  .fuss__oben{grid-template-columns:1fr; gap:38px; text-align:center}
  .fuss__haus{text-align:center}
  .netzwerk{grid-template-columns:1fr; gap:26px; text-align:left}
  .leitsatz{border-left:0; border-top:4px solid var(--terrakotta);
    padding:18px 0 0; max-width:none}
  .abschnitt__vorlauf{margin-top:-16px}
  .leistung{padding:30px 24px 34px}
  #katalog{gap:80px}
  .platte-block{grid-template-columns:1fr; gap:34px}
  .platte-block:nth-child(even) .platte-block__bild{order:0}
  .platte-block__bild{position:relative; top:auto}
  .platte-block__bild::before{right:-4%; top:12%; width:72%}
  .spur__info{display:none}
  .spur__zeit{min-width:auto; font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .scheibe,.spur__label,.titelzeile__welle i{animation:none !important}
  *{transition-duration:.01ms !important}
}