/* Sordin S1. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben
   unangetastet; hier stehen Marke, die geteilte Welt und die beiden Register.
   --dpx (Lage der Grenze in px) und --laut (0..1) setzt daempfung.js. */
:root {
  --still:        #EEEAE3;
  --still-tief:   #E3DED5;
  --graphit:      #2A2927;
  --graphit-weich:#57534D;
  --asphalt:      #121318;
  --asphalt-hell: #1C1D24;
  --laut-ink:     #F6F2EA;
  --laut-weich:   #D9D3E2;
  --neon-m:       #FF2E88;
  --neon-a:       #FFB21E;
  --neon-c:       #22E4FF;
  --akzent:       #3A5BFF;
  --akzent-tief:  #2C47D6;

  --sc-canvas: var(--still);
  --sc-surface: var(--still-tief);
  --sc-ink: var(--graphit);
  --sc-ink-soft: var(--graphit-weich);
  --sc-accent: var(--akzent);
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Familjen Grotesk", system-ui, sans-serif;
  --sc-font-text: "Newsreader", Georgia, serif;
  --sc-font-mono: "Familjen Grotesk", system-ui, sans-serif;
  --sc-shadow-color: 36 12% 40%;
  --sc-hairline: rgb(42 41 39 / .16);

  --serif: "Newsreader", Georgia, serif;
  --grotesk: "Familjen Grotesk", system-ui, sans-serif;
  --dpx: 50vw;
  --laut: 1;
  --rand: var(--sc-gutter);
  color-scheme: light;
}
html { background: var(--still); scrollbar-color: #B9B2A7 var(--still); }
body { font-family: var(--serif); background: var(--still); color: var(--graphit); }
::selection { background: var(--akzent); color: #fff; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 3px; }
input { caret-color: var(--akzent); }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Die beiden Register ---------- */
.laut-display {
  font-family: var(--grotesk); font-weight: 700; color: var(--laut-ink);
  letter-spacing: -.025em; line-height: .96; text-wrap: balance;
  text-shadow: 0 2px 22px rgb(10 10 14 / .85), 0 0 2px rgb(10 10 14 / .9);
}
.laut-display--xl { font-size: clamp(2.5rem, 1rem + 4.6vw, 5.6rem); }
.laut-display--lg { font-size: clamp(1.7rem, 1rem + 1.9vw, 2.6rem); }
.laut-display--xxl { font-size: clamp(5rem, 2rem + 13vw, 16rem); letter-spacing: -.045em; line-height: .9; }

.still-display {
  font-family: var(--serif); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.3rem); line-height: 1.06; letter-spacing: -.012em;
  color: var(--graphit); text-wrap: balance;
}
.still-display--xl { font-size: clamp(2.4rem, 1.2rem + 4vw, 5.2rem); line-height: 1.02; }
.still-lede { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); line-height: 1.5; color: var(--graphit); text-wrap: pretty; }
.still-frage { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.15; color: var(--graphit); }
.klein { font-family: var(--grotesk); font-size: .875rem; line-height: 1.5; color: var(--graphit-weich); }
.marke { font-family: var(--grotesk); font-weight: 600; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphit); }

/* ---------- Die Welt (fixiert, hinter allen Akten) ---------- */
.welt { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.welt__still, .welt__laut, .welt__wackel { position: absolute; inset: 0; }
.welt img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.welt__still img { object-position: 70% 50%; }
.welt__still::after { /* fast monochrom: der Raum geht im Off-White auf */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgb(238 234 227 / .55), rgb(238 234 227 / .25) 70%, rgb(238 234 227 / .1));
}
.welt__laut { background: var(--asphalt); will-change: clip-path; }
.welt__wackel { inset: -2%; will-change: translate, filter; }
.welt__wackel img { object-position: 40% 50%; }
.welt__dunkel { /* Abdunklung nur dort, wo die laute Schrift steht: linke Spalte */
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(12 12 16 / .78) 0%, rgb(12 12 16 / .55) 30%, rgb(12 12 16 / .25) 50%, rgb(12 12 16 / .15) 70%),
    linear-gradient(rgb(12 12 16 / .35), transparent 30%);
}
.welt__laerm { position: absolute; inset: 0; width: 100%; height: 100%; }
.welt__grenze {
  position: absolute; top: 0; left: 0; width: 2px; height: 100%;
  background: var(--graphit); translate: calc(var(--dpx) - 1px) 0;
  box-shadow: 0 0 0 1px rgb(238 234 227 / .35);
}
@media (max-width: 860px) {
  .welt__grenze { width: 100%; height: 2px; translate: 0 calc(var(--dpx) - 1px); }
  .welt__dunkel { background: linear-gradient(180deg, rgb(12 12 16 / .55), rgb(12 12 16 / .62) 40%, rgb(12 12 16 / .35)); }
}
main { position: relative; z-index: 1; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--rand); pointer-events: none;
}
.kopf a, .kopf button { pointer-events: auto; }
.wortmarke { position: relative; display: block; text-decoration: none; width: 9.5rem; height: 30px; }
.wortmarke > span { position: absolute; left: 0; top: 0; line-height: 30px; white-space: nowrap; }
.wortmarke .zw-laut { font: 700 1.3rem/30px var(--grotesk); letter-spacing: .16em; color: var(--laut-ink); text-shadow: 0 0 14px rgb(255 46 136 / .55); }
.wortmarke .zw-still { font: italic 400 1.6rem/30px var(--serif); letter-spacing: .01em; color: var(--graphit); }
.kopf__rechts { display: flex; align-items: center; gap: 22px; }
.kopf__link {
  font: 600 .95rem/1 var(--grotesk); color: var(--graphit); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: rgb(42 41 39 / .4);
  transition: text-decoration-color 160ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .kopf__link:hover { text-decoration-color: currentColor; } }
.kopf--laut .kopf__link { color: var(--laut-ink); text-decoration-color: rgb(246 242 234 / .5); }

/* ---------- Knöpfe: der Akzent gehört nur Knopf und Regler ---------- */
.knopf, .tonknopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 1rem/1 var(--grotesk); letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  border-radius: 999px; border: 1.5px solid var(--akzent);
  transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.knopf { min-height: 52px; padding: 0 26px; color: #fff; background: var(--akzent); position: relative; overflow: hidden; isolation: isolate; }
.knopf::before { /* feines Mosaik, über das alle paar Sekunden ein Lichtstreif läuft */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .3) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 5px);
  animation: streif 5s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 60% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
.knopf::after { /* Ton-Symbol: zwei Bögen, die bei Ton an wachsen */
  content: none;
}
.tonknopf { min-height: 40px; padding: 0 18px; font-size: .92rem; color: var(--akzent-tief); background: rgb(238 234 227 / .9); }
.kopf--laut .tonknopf { background: rgb(238 234 227 / .94); }
.knopf:active, .tonknopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--akzent-tief); }
  .tonknopf:hover { background: var(--akzent); color: #fff; }
}
[data-ton][aria-pressed="true"].tonknopf { background: var(--akzent); color: #fff; }
.textlink {
  font: 600 1rem/1 var(--grotesk); color: var(--graphit); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: rgb(42 41 39 / .4);
}

/* ---------- Regler auf der Grenze ---------- */
.regler {
  position: fixed; z-index: var(--sc-z-chrome); left: 0; top: 0;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px;
  width: 15.5rem; padding: 10px 16px 12px;
  border-radius: 14px; background: rgb(238 234 227 / .96); color: var(--graphit);
  box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 10px 30px -12px rgb(40 34 28 / .45), 0 0 0 1px rgb(42 41 39 / .12);
  transition: opacity 240ms var(--sc-ease-out);
}
.regler.ist-weg { opacity: 0; pointer-events: none; }
.regler__name { font: 600 .78rem/1 var(--grotesk); letter-spacing: .12em; text-transform: uppercase; color: var(--graphit-weich); }
.regler__wert { justify-self: end; font: 700 1rem/1 var(--grotesk); font-variant-numeric: tabular-nums; color: var(--graphit); }
.regler__band { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.regler__band::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--akzent) calc(var(--wert, 0) * 1%), rgb(42 41 39 / .18) 0); }
.regler__band::-moz-range-track { height: 4px; border-radius: 4px; background: rgb(42 41 39 / .18); }
.regler__band::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--akzent); }
.regler__band::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--akzent); box-shadow: 0 2px 6px rgb(40 34 28 / .3); }
.regler__band::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--akzent); }

/* ---------- Bühnen ---------- */
/* .buehne: Bühnen sind sticky (Engine), daher hier keine position */
.spalte-laut { position: absolute; z-index: var(--sc-z-copy); left: var(--rand); width: 32vw; }
.spalte-still { position: absolute; z-index: var(--sc-z-copy); }
[data-zittern] { will-change: translate; }

/* Hero: 50/50, der Kopfhörer sitzt auf der Grenze */
.held-laut { top: clamp(6.5rem, 18vh, 10rem); width: calc(50vw - 15vw - var(--rand)); }
.held-still { left: 64vw; right: var(--rand); top: clamp(6.5rem, 22vh, 12rem); max-width: 30rem; }
.held-still .still-lede { margin-top: 18px; }
.held-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.held-still .klein { margin-top: 16px; max-width: 30ch; }
.held-hoerer {
  position: absolute; z-index: 5; top: 50%; left: 0; width: min(26vw, 25rem); aspect-ratio: 1200 / 1545;
  translate: calc(var(--dpx) - 50%) -46%;
}
.held-hoerer img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.held-hoerer .zw-laut { filter: contrast(1.12) saturate(1.2) drop-shadow(-14px 0 26px rgb(255 46 136 / .55)) drop-shadow(10px -8px 30px rgb(34 228 255 / .35)); }
.held-hoerer .zw-still { filter: drop-shadow(0 26px 30px rgb(80 66 52 / .28)); }

/* Flow-Flächen: auf dem Desktop durchsichtig über der Welt */
.flaeche { position: relative; padding-block: clamp(6rem, 16vh, 11rem); }
.zweispalt { display: grid; grid-template-columns: 32vw 22vw minmax(0, 36rem); align-items: start; padding-left: var(--rand); }
.zweispalt > :first-child { grid-column: 1; }
.zweispalt > :last-child { grid-column: 3; }
.laut-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.6rem, 4vh, 2.6rem); }
.laut-liste li {
  font: 700 clamp(1.6rem, 1rem + 1.6vw, 2.5rem)/1.04 var(--grotesk); letter-spacing: -.02em; color: var(--laut-ink);
  text-shadow: 0 2px 18px rgb(10 10 14 / .9);
}
.laut-liste li:nth-child(2) { color: var(--neon-a); }
.laut-liste li:nth-child(4) { padding-left: 2.5vw; }
.still-text { display: grid; gap: 1.1rem; }
.still-text p { font-size: 1.2rem; line-height: 1.6; max-width: 34em; text-wrap: pretty; }
.still-text .still-display { margin-bottom: .4rem; }

/* Orte: gespiegelte Schiene, zweimal gerendert, an der Grenze geteilt */
.orte__ebene { position: absolute; inset: 0; z-index: var(--sc-z-copy); }
.orte__spiegel { position: absolute; inset: 0; transform: scaleX(-1); display: flex; align-items: center; }
.orte__rail { display: flex; gap: clamp(1.5rem, 3vw, 3rem); padding-inline: var(--rand); will-change: transform; }
.ort {
  transform: scaleX(-1); flex: 0 0 auto; width: clamp(16rem, 24vw, 22rem); height: clamp(17rem, 46vh, 24rem);
  padding: 28px 26px; border-radius: 18px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.ort--kopf { width: clamp(18rem, 30vw, 28rem); }
.orte__ebene--still .ort {
  background: rgb(238 234 227 / .9); color: var(--graphit);
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 18px 40px -24px rgb(60 50 40 / .5), 0 0 0 1px rgb(42 41 39 / .1);
}
.orte__ebene--still .ort::before { /* Papierraster, nach unten ausgeblendet */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(42 41 39 / .09) 1px, transparent 1.2px); background-size: 16px 16px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.orte__ebene--still .ort h3 { font: italic 400 clamp(1.7rem, 1.2rem + 1vw, 2.2rem)/1.1 var(--serif); }
.orte__ebene--still .ort p { font: 400 1.12rem/1.5 var(--serif); color: var(--graphit); }
.orte__ebene--still .ort--kopf { background: none; box-shadow: none; }
.orte__ebene--still .ort--kopf::before { content: none; }
.orte__ebene--laut .ort {
  background: rgb(18 19 24 / .9); color: var(--laut-ink);
  box-shadow: 0 0 0 2px var(--neon-m), 0 0 28px -4px rgb(255 46 136 / .6);
}
.orte__ebene--laut .ort:nth-child(odd):not(.ort--kopf) { box-shadow: 0 0 0 2px var(--neon-c), 0 0 28px -4px rgb(34 228 255 / .55); }
.orte__ebene--laut .ort::before { /* Rasterstörung, wie ein kaputter Bildschirm */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 4px);
}
.orte__ebene--laut .ort__titel { font: 700 clamp(1.5rem, 1rem + 1.1vw, 2.1rem)/1.02 var(--grotesk); letter-spacing: .01em; }
.orte__ebene--laut .ort p:not(.ort__titel):not(.laut-display) { font: 500 1.05rem/1.45 var(--grotesk); color: var(--laut-weich); }
.orte__ebene--laut .ort--kopf { background: none; box-shadow: none; }
.orte__ebene--laut .ort--kopf::before { content: none; }
.orte__ebene--laut .ort--kopf p:last-child { text-shadow: 0 1px 14px rgb(10 10 14 / .95); color: var(--laut-ink); }
.ort--kopf .still-display { font-size: clamp(1.7rem, 1rem + 1.9vw, 2.6rem); }

/* Gegenschall: die leiseste Fläche vor dem Höhepunkt */
.zweispalt--welle { align-items: center; }
.welle { margin: 0; }
.welle svg { display: block; width: 100%; height: clamp(5rem, 14vh, 8rem); overflow: visible; }
.welle figcaption { margin-top: 10px; font: 600 .8rem/1.3 var(--grotesk); letter-spacing: .1em; text-transform: uppercase; }
.welle--laut figcaption { color: var(--laut-ink); text-shadow: 0 1px 10px rgb(10 10 14 / .9); }
.welle--still figcaption { color: var(--graphit-weich); letter-spacing: .04em; text-transform: none; font-weight: 500; font-size: .9rem; }
.welle--still { margin-top: 1.4rem; }
.welle__linie { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; }
.welle__linie--laut { stroke: var(--neon-m); stroke-width: 3; filter: drop-shadow(0 0 6px rgb(255 46 136 / .7)); stroke-dashoffset: calc(1 - min(1, max(0, (var(--sc-p, 1) - .15) * 2.6))); }
.welle__linie--gegen { stroke: var(--graphit-weich); stroke-width: 1.5; stroke-dasharray: .012 .01; opacity: calc(min(1, max(0, (var(--sc-p, 1) - .3) * 3))); }
.welle__linie--summe { stroke: var(--graphit); stroke-width: 2.5; stroke-dashoffset: calc(1 - min(1, max(0, (var(--sc-p, 1) - .38) * 3))); }

/* Stille (Höhepunkt) */
.stille__laut { top: 50%; translate: 0 -55%; width: auto; }
.stille__laut .laut-display--xxl { white-space: nowrap; margin: 0; }
.stille__text { position: absolute; z-index: var(--sc-z-copy); left: 58vw; right: var(--rand); top: 40%; display: grid; }
.stille__text > * { grid-area: 1 / 1; }
.stille__rest .still-lede { margin-top: 12px; color: var(--graphit-weich); }

/* Daten: die stille Seite hat die ganze Breite. Direkt nach dem Pin: wenig Luft oben. */
.flaeche--still { padding-top: 0; }
.daten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: clamp(2rem, 6vw, 7rem); align-items: center; padding-inline: var(--rand) clamp(1.25rem, 9vw, 9rem); }
.daten__bild { margin: 0; display: flex; justify-content: flex-end; }
.daten__bild img { width: min(30rem, 100%); height: auto; filter: drop-shadow(0 30px 40px rgb(80 66 52 / .3)); }
.daten__text p { font-size: 1.15rem; line-height: 1.6; }
.daten__text { display: grid; gap: 1.1rem; }
.liste { margin: .8rem 0 .4rem; border-top: 1px solid var(--sc-hairline); }
.liste > div { display: grid; grid-template-columns: 8rem 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sc-hairline); }
.liste dt { font: 600 .82rem/1.6 var(--grotesk); letter-spacing: .1em; text-transform: uppercase; color: var(--graphit-weich); }
.liste dd { margin: 0; font: 500 1.05rem/1.5 var(--grotesk); font-variant-numeric: tabular-nums; color: var(--graphit); }

/* Vorbestellen: asymmetrisch, in der gewonnenen Spalte */
.bestellen__kopf { position: absolute; z-index: var(--sc-z-copy); left: var(--rand); top: clamp(7rem, 20vh, 12rem); width: min(44vw, 42rem); }
.bestellen__kopf .still-lede { margin-top: 20px; max-width: 30ch; }
.vormerken {
  position: absolute; z-index: var(--sc-z-copy); left: 58vw; top: clamp(7rem, 18vh, 11rem); width: min(26rem, calc(100vw - 58vw - var(--rand)));
  display: grid; gap: 18px; padding: 28px; border-radius: 18px;
  background: rgb(238 234 227 / .92);
  box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 24px 50px -28px rgb(60 50 40 / .5), 0 0 0 1px rgb(42 41 39 / .1);
}
.vormerken::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: radial-gradient(rgb(42 41 39 / .07) 1px, transparent 1.2px); background-size: 16px 16px; mask-image: linear-gradient(to bottom, #000, transparent 60%); }
.feld { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; position: relative; }
.feld label, .feld legend { font: 600 .9rem/1.2 var(--grotesk); color: var(--graphit); padding: 0; }
.feld input:not([type=radio]) {
  height: 46px; padding: 0 14px; border-radius: 10px; font: 400 1.05rem/1 var(--grotesk); color: var(--graphit);
  background: #F7F5F1; border: 1.5px solid rgb(42 41 39 / .28);
  transition: border-color 160ms var(--sc-ease-out);
}
.feld input:not([type=radio]):focus-visible { border-color: var(--akzent); outline-offset: 1px; }
.feld input[aria-invalid="true"] { border-color: #B3261E; }
.feld__hilfe { font: 400 .85rem/1.4 var(--grotesk); color: var(--graphit-weich); }
.feld__fehler { font: 600 .85rem/1.4 var(--grotesk); color: #9E1F18; }
.farbwahl { grid-auto-flow: column; justify-content: start; gap: 8px 20px; align-items: center; }
.farbwahl legend { float: left; margin-right: 6px; }
.farbwahl label { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; cursor: pointer; }
.farbwahl input { accent-color: var(--akzent); width: 18px; height: 18px; }
.knopf--voll { width: 100%; }
.fuss { position: absolute; z-index: var(--sc-z-copy); left: calc(var(--rand) + 17rem); right: var(--rand); bottom: 18px; display: flex; gap: 24px; justify-content: space-between; border-top: 1px solid var(--sc-hairline); padding-top: 12px; }
.fuss p { margin: 0; font: 400 .8rem/1.45 var(--grotesk); color: var(--graphit-weich); max-width: 60ch; }

/* ---------- Handy: die Grenze liegt quer, laut oben, still unten ---------- */
@media (max-width: 860px) {
  :root { --rand: 20px; }
  .kopf { padding: 14px var(--rand); }
  .kopf__rechts { gap: 14px; }
  .kopf__link { display: none; }
  .wortmarke { width: 7.5rem; }
  .regler { width: calc(100vw - 2 * var(--rand)); grid-template-columns: auto auto 1fr; gap: 12px; padding: 6px 14px; border-radius: 12px; }
  .regler__band { grid-column: auto; height: 32px; }

  .held-laut { top: 84px; width: calc(100vw - 2 * var(--rand) - 26vw); }
  .laut-display--xl { font-size: clamp(2.3rem, 1.1rem + 6vw, 3.2rem); }
  .held-hoerer { width: 34vw; left: auto; right: 14px; translate: 0 -50%; top: var(--dpx); }
  .held-still { left: var(--rand); right: calc(var(--rand) + 36vw); top: calc(var(--dpx) + 30px); max-width: none; }
  .held-still .still-lede { font-size: 1.06rem; margin-top: 10px; }
  .held-aktion { margin-top: 18px; gap: 12px 18px; }
  .held-still .klein { display: none; }

  .flaeche { padding-block: 0; }
  .zweispalt { display: block; padding: 0; }
  .zweispalt > :first-child { background: var(--asphalt); padding: 72px var(--rand) 64px; position: relative; overflow: hidden; }
  .zweispalt > :first-child::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1.2px); background-size: 14px 14px; }
  .zweispalt > :last-child { background: var(--still); padding: 64px var(--rand) 80px; }
  .laut-liste li:nth-child(4) { padding-left: 0; }
  .still-text p { font-size: 1.1rem; }
  .welle--laut { padding-bottom: 56px !important; }

  .orte__rail { gap: 18px; }
  .ort { width: 74vw; height: 58svh; padding: 22px 20px; }
  .ort--kopf { width: 80vw; }

  .stille__laut { top: 76px; translate: 0 0; }
  .laut-display--xxl { font-size: clamp(5rem, 2rem + 18vw, 8rem); }
  .stille__text { left: var(--rand); right: var(--rand); top: auto; bottom: calc(10svh + 64px); }

  .flaeche--still { background: var(--still); padding-block: 24px 72px; }
  .daten { grid-template-columns: 1fr; padding-inline: var(--rand); gap: 8px; }
  .daten__bild { justify-content: center; }
  .daten__bild img { width: 62vw; }
  .liste > div { grid-template-columns: 6.8rem 1fr; }

  .bestellen__kopf { top: 76px; width: auto; right: var(--rand); }
  .bestellen__kopf .still-display--xl { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); }
  .bestellen__kopf .still-lede { font-size: 1.02rem; margin-top: 8px; max-width: none; }
  .vormerken { left: var(--rand); right: var(--rand); width: auto; top: auto; bottom: 118px; padding: 18px; gap: 12px; }
  .feld input:not([type=radio]) { height: 42px; }
  .feld__hilfe { display: none; }
  .fuss { left: var(--rand); bottom: 10px; flex-direction: column; gap: 4px; padding-top: 8px; }
  .fuss p { font-size: .72rem; line-height: 1.35; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .bestellen__kopf .still-lede { display: none; }
  .vormerken { bottom: 124px; padding: 14px 16px; gap: 9px; }
  .vormerken .feld:first-child { display: none; }
  .bestellen__kopf { top: 68px; }
  .fuss p { font-size: .66rem; line-height: 1.3; }
}

/* ---------- Reduced Motion: alles steht, die Grenze folgt nur dem Scrollen ---------- */
@media (prefers-reduced-motion: reduce) {
  .knopf::before { animation: none; }
  [data-zittern], .welt__wackel { translate: none !important; }
  /* Orte: statt der fahrenden Schiene ein ruhiges Raster, die Grenze teilt es trotzdem */
  #orte [data-sc-stage] { overflow: clip !important; }
  .orte__spiegel { transform: none; justify-content: center; }
  .orte__rail { transform: none !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 16px 20px; padding-block: 72px 96px; }
  .ort { transform: none; width: auto; height: auto; min-height: 11rem; gap: 14px; }
  .ort--kopf { grid-column: 1 / -1; width: auto; min-height: 0; padding-block: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .orte__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-block: 64px 70px; }
  .ort { min-height: 0; padding: 12px; border-radius: 12px; gap: 6px; }
  .ort:not(.ort--kopf) p:not(.ort__titel) { display: none; }
  .ort { min-height: 5.5rem; justify-content: flex-start; }
  .ort h3, .ort .ort__titel { font-size: 1.1rem !important; }
  .ort--kopf p:last-child { font-size: .95rem !important; }
  .ort--kopf .still-display, .ort--kopf .laut-display { font-size: 1.4rem !important; }
}