/* Szillus — editorial industrial design system.
   Warm paper, graphite, signal orange. Photography stays still; computed
   motion lives in dedicated non-photographic layers. Shared site shell and
   functional components; page-specific compositions live in seite-*.css. */

/* --- Schriften (selbst gehostet, SIL OFL 1.1, Quelle: fontsource) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap;
  font-weight: 200 800; font-stretch: 75% 100%;
  src: url(../fonts/bricolage-normal-latin-ext-e1a04c.woff2) format('woff2-variations'), url(../fonts/bricolage-normal-latin-ext-e1a04c.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap;
  font-weight: 200 800; font-stretch: 75% 100%;
  src: url(../fonts/bricolage-normal-latin-a75688.woff2) format('woff2-variations'), url(../fonts/bricolage-normal-latin-a75688.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/hanken-normal-latin-ext-768af2.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/hanken-normal-latin-e9201e.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(../fonts/hanken-italic-latin-ext-8f7c62.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(../fonts/hanken-italic-latin-bb4326.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(../fonts/jetbrainsmono-normal-latin-ext-79bfda.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(../fonts/jetbrainsmono-normal-latin-18be45.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Szillus: warmer Papiergrund, Graphit und Signalorange ---------------- */
:root {
  color-scheme: light;
  --grund: #f4f3ee; --flaeche: #eeede7; --flaeche-2: #e3e3da;
  --linie: rgba(23,27,27,.17); --linie-stark: rgba(23,27,27,.35);
  --text: #171b1b; --text-leise: #626661;
  --signal: #e85d24; --rot: #bd4315; --rot-tief: #983410; --rot-text: #a83b12; --auf-rot: #fff;
  --luft: #b34217; --staub: #e85d24; --gut: #256240; --fokus: #b34217;
  --schleier: #f4f3ee; --foto-filter: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --grund: #171b1b; --flaeche: #202525; --flaeche-2: #2a3030;
    --linie: rgba(244,243,238,.2); --linie-stark: rgba(244,243,238,.4);
    --text: #f4f3ee; --text-leise: #b6b9b2;
    --rot: #bd4315; --rot-tief: #983410; --rot-text: #ff9162;
    --luft: #ff9162; --staub: #e85d24; --gut: #86c99d; --fokus: #ff9162;
    --schleier: #171b1b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #171b1b; --flaeche: #202525; --flaeche-2: #2a3030;
  --linie: rgba(244,243,238,.2); --linie-stark: rgba(244,243,238,.4);
  --text: #f4f3ee; --text-leise: #b6b9b2;
  --rot: #bd4315; --rot-tief: #983410; --rot-text: #ff9162;
  --luft: #ff9162; --staub: #e85d24; --gut: #86c99d; --fokus: #ff9162;
  --schleier: #171b1b;
}
.gegenlicht {
  color-scheme: dark; --grund:#171b1b; --flaeche:#202525; --flaeche-2:#2a3030;
  --text:#f4f3ee; --text-leise:#b6b9b2; --linie:rgba(244,243,238,.2); --linie-stark:rgba(244,243,238,.4);
  --luft:#ff9162; --rot-text:#ff9162; --fokus:#ff9162; background:var(--grund); color:var(--text);
}

/* --- Schrift, Skala, Raum, Bewegung (themenunabhängig) --------------------- */
:root {
  --schrift-anzeige: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --schrift-text:    'Hanken Grotesk', -apple-system, 'Segoe UI', Arial, sans-serif;
  --schrift-daten:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-mono:   .75rem;                                   /* Versal-Labels (Mono) */
  --t-xs:     .8125rem;
  --t-sm:     .9375rem;
  --t-md:     1.0625rem;                                /* Fließtext 17px */
  --t-lg:     clamp(1.15rem, .9rem + .8vw, 1.4rem);     /* Vorspann */
  --t-xl:     clamp(1.4rem, 1rem + 1.4vw, 2rem);        /* h3 */
  --t-2xl:    clamp(2rem, 1.2rem + 3vw, 3.5rem);        /* h2 */
  --t-3xl:    clamp(2.6rem, 1.2rem + 5.4vw, 6rem);      /* Kapitel-Titel */
  --t-4xl:    clamp(3rem, 1rem + 8.6vw, 10rem);         /* Bühnen-Titel */
  --t-riesig: clamp(3.6rem, 13vw, 14rem);               /* Anzeige als Bild */

  --breite:  1440px;
  --schmal:  760px;
  --rand:    56px;        /* seitlicher Rand, nie unter 16 px */
  --abstand: clamp(88px, 11vw, 184px);      /* vertikaler Kapitelabstand */
  --abstand-klein: clamp(48px, 6vw, 96px);
  --spalt:   clamp(20px, 2.4vw, 40px);      /* Rasterfuge */

  --kopf-h:  88px;                          /* Stets sichtbare Kopfleiste im Dokumentfluss */

  --r-1: 2px;
  --r-2: 4px;

  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-aus:   cubic-bezier(.16, 1, .3, 1);     /* expo-out: Auftritte */
  --ease-weich: cubic-bezier(.65, 0, .35, 1);    /* in-out: Vorhänge */
  --dauer:      .45s;
}
@media (max-width: 960px) { :root { --kopf-h: 76px; --rand: 24px; } }

/* Semantic vocabulary shared with content templates and the editor. */
:root {
  --papier:var(--grund); --papier-2:var(--flaeche); --karton:var(--flaeche);
  --tusche:var(--text); --tusche-2:var(--text-leise); --tusche-3:var(--text-leise);
  --linie-zart:var(--linie); --rot-flaeche:var(--rot); --blau:var(--luft); --blau-text:var(--luft);
  --schrift-mass:var(--schrift-daten);
}
.gegenlicht, .fuss {
  --papier:var(--grund); --papier-2:var(--flaeche); --karton:var(--flaeche);
  --tusche:var(--text); --tusche-2:var(--text-leise); --tusche-3:var(--text-leise);
}

/* --- Grundlagen ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body {
  margin: 0; min-height: 100vh;
  background: var(--grund); color: var(--text);
  font: 400 var(--t-md)/1.65 var(--schrift-text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: color-mix(in srgb, var(--luft) 32%, transparent); color: var(--text); }

h1, h2, h3, h4 {
  font-family: var(--schrift-anzeige); font-weight: 700; font-stretch: 100%;
  line-height: 1.02; letter-spacing: -.03em; word-spacing: .05em; color: var(--text);
  text-wrap: balance; hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word;
}
h1 { font-size: var(--t-4xl); line-height: .9; letter-spacing: -.028em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -.015em; }
h4 { font-size: var(--t-lg); line-height: 1.2; letter-spacing: -.01em; }
p { text-wrap: pretty; }
strong, b { font-weight: 650; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--rot-text); }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: var(--r-1); }
:focus:not(:focus-visible) { outline: none; }

/* Typo-Helfer */
.anzeige { font-family: var(--schrift-anzeige); font-stretch: 88%; letter-spacing: -.03em; line-height: .92; }
.leicht  { font-weight: 300; font-stretch: 100%; }
.schwer  { font-weight: 800; }
.schmal-schnitt { font-stretch: 75%; }
.mono, .marke, .kapitel__label, .beschriftung, .mass {
  font-family: var(--schrift-daten); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
}
.marke, .kapitel__label, .beschriftung { color: var(--text-leise); }
.mass { color: var(--luft); letter-spacing: .06em; }
.t-riesig { font-size: var(--t-riesig); }
.t-4xl { font-size: var(--t-4xl); } .t-3xl { font-size: var(--t-3xl); } .t-2xl { font-size: var(--t-2xl); }
.vorspann { font-size: var(--t-lg); line-height: 1.5; color: var(--text-leise); max-width: 46ch; }
.leise { color: var(--text-leise); }

/* Label mit Haarlinie davor — Kapitel-Marke in Mono */
.marke, .kapitel__label { display: inline-flex; align-items: center; gap: 14px; }
.marke::before, .kapitel__label::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; flex: none;
}

/* Verborgen, aber vorlesbar */
.nur-leser, .vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.js .nur-ohne-js { display: none; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zeig { opacity: 1; }
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 1000;
  padding: 12px 18px; background: var(--text); color: var(--grund);
  font-weight: 600; text-decoration: none; border-radius: var(--r-1);
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* --- Hülle, Kapitel, Rhythmus ---------------------------------------------- */
.huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.huelle--schmal { width: min(100% - 2 * var(--rand), var(--schmal)); }
main { display: block; }
main > section { position: relative; }

.kapitel { padding-block: var(--abstand); }
.kapitel--dicht { padding-block: var(--abstand-klein); }
.kapitel--flaeche { background: var(--flaeche); }
.kapitel--linie { border-top: 1px solid var(--linie); }
.kapitel__kopf {
  display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 96px); max-width: 980px;
}
.kapitel__kopf h2 { font-size: var(--t-3xl); }
.kapitel__kopf p { max-width: 58ch; color: var(--text-leise); font-size: var(--t-lg); line-height: 1.5; }

/* Zwölfer-Raster für asymmetrische Kompositionen */
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spalt); }
@media (max-width: 860px) { .raster { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* --- Zwei Spalten (Haken der Pflegeleiste: duo--getauscht) -----------------
   duo--umkehr: unter 861 px steht das Bild zuerst. duo--getauscht (von der
   Pflegeleiste gesetzt) tauscht ab 861 px die Spalten. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 112px); align-items: center; }
.duo > * { min-width: 0; }
.duo--schmal { grid-template-columns: .92fr 1.08fr; }
@media (max-width: 860px) {
  .duo, .duo--schmal { grid-template-columns: 1fr; gap: 36px; }
  .duo--umkehr .duo__bild { order: -1; }
}
@media (min-width: 861px) {
  .duo.duo--getauscht > :first-child { order: 2; }
  .duo.duo--getauscht > :last-child { order: 1; }
}

/* Photography stays fully still, with natural colour and sharp edges. */
.foto { overflow:hidden; background:var(--flaeche-2); }
.foto img { width:100%; height:auto; object-fit:cover; filter:none; }
.foto--hoch img { aspect-ratio:3/4; }
.foto--breit img { aspect-ratio:16/9; }
.foto figcaption { padding-top:12px; font:500 var(--t-mono)/1.6 var(--schrift-daten); color:var(--text-leise); }

/* Zeilen-/Block-Auftritt für Text: nur ganze Elemente (nie Buchstaben).
     data-enthuellen="zeile"  → steigt aus einer Maske, wenn sichtbar
     .auftritt                → beim Laden, gestaffelt über style="--i: n" */
.sz-bereit [data-enthuellen="zeile"] {
  clip-path: inset(0 0 0 0); transform: translateY(0);
}
.sz-bereit [data-enthuellen="zeile"]:not(.ist-sichtbar) {
  clip-path: inset(0 0 100% 0); transform: translateY(.35em);
}
.sz-bereit [data-enthuellen="zeile"] {
  transition: clip-path .9s var(--ease-aus), transform .9s var(--ease-aus);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.auftritt { animation: sz-auftritt .95s var(--ease-aus) both; animation-delay: calc(120ms + var(--i, 0) * 80ms); }
@keyframes sz-auftritt { from { opacity: 0; transform: translateY(22px); } }

/* --- Knöpfe -----------------------------------------------------------------
   .knopf.knopf--rot   primär, nur für Anfrage-Handlungen
   .knopf.knopf--rand  sekundär, Kontur
   .knopf--klein       kompakt (Kopf)
   .verweis            Text-Link mit Pfeil
   Optional: [data-magnet] aktiviert eine leichte Zeigerreaktion (site.js). */
.knopf {
  --mx: 0px; --my: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 26px;
  font: 600 var(--t-sm)/1.1 var(--schrift-text); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-1);
  background: transparent; color: var(--text);
  translate: var(--mx) var(--my);
  transition: translate .5s var(--ease-aus), color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .5s var(--ease-aus);
}
.knopf:hover::before, .knopf:focus-visible::before { transform: scaleY(1); }
.knopf svg { width: 18px; height: 18px; flex: none; transition: transform .45s var(--ease-aus); }
.knopf:hover svg:last-child:not(:first-child) { transform: translateX(5px); }
.knopf:active { translate: var(--mx) calc(var(--my) + 1px); }

.knopf--rot { background: var(--rot); color: var(--auf-rot); }
.knopf--rot::before { background: var(--rot-tief); }
.knopf--rot:hover { color: var(--auf-rot); }

.knopf--rand, .knopf--hell { border-color: var(--linie-stark); color: var(--text); }
.knopf--rand::before, .knopf--hell::before { background: var(--text); }
.knopf--rand:hover, .knopf--hell:hover, .knopf--rand:focus-visible { color: var(--grund); border-color: var(--text); }
.knopf--rand svg:first-child:not(:last-child) { color: var(--rot-text); transition: color .3s var(--ease), transform .45s var(--ease-aus); }
.knopf--rand:hover svg:first-child:not(:last-child) { color: inherit; }
.knopf--weiss { background: var(--text); color: var(--grund); }
.knopf--weiss::before { background: var(--luft); }

.knopf--klein { min-height: 42px; padding: 0 18px; gap: 10px; font-size: var(--t-xs); }
.knopf--klein svg { width: 15px; height: 15px; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.verweis {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; text-decoration: none; color: var(--text);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px; transition: background-size .5s var(--ease-aus);
}
.verweis:hover { background-size: 100% 1px; }
.verweis svg { width: 16px; height: 16px; transition: transform .45s var(--ease-aus); }
.verweis:hover svg { transform: translateX(5px); }

/* --- Laufband ----------------------------------------------------------------
   <div class="laufband"><div class="laufband__spur">
     <ul class="laufband__satz">…</ul>
     <ul class="laufband__satz" aria-hidden="true">…(Kopie OHNE data-feld)</ul>
   </div></div>
   Richtung/Tempo: style="--laufband-dauer: 40s" · .laufband--rueckwaerts */
.laufband {
  overflow: hidden; display: flex;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband__spur { display: flex; flex: none; min-width: 100%; animation: sz-laufband var(--laufband-dauer, 48s) linear infinite; }
.laufband--rueckwaerts .laufband__spur { animation-direction: reverse; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__satz { display: flex; flex: none; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.laufband__satz > * { flex: none; padding-inline: clamp(18px, 2.4vw, 40px); }
@keyframes sz-laufband { to { transform: translateX(-50%); } }

/* --- Listen, Tabellen, Konsole ---------------------------------------------- */
.haken { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.haken li { position: relative; padding-left: 30px; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 16px; height: 1px; background: var(--luft);
}
.haken li::after {
  content: ""; position: absolute; left: 12px; top: calc(.72em - 3px); width: 7px; height: 7px;
  border-top: 1px solid var(--luft); border-right: 1px solid var(--luft); transform: rotate(45deg);
}
.haken--zwei { grid-template-columns: 1fr 1fr; column-gap: 40px; }
@media (max-width: 640px) { .haken--zwei { grid-template-columns: 1fr; } }

.tabelle-huelle { overflow-x: auto; border-top: 1px solid var(--linie-stark); }
table.daten { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
table.daten caption { text-align: left; padding: 0 0 12px; font: 500 var(--t-mono)/1.4 var(--schrift-daten); letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
table.daten th, table.daten td { padding: 14px 18px 14px 0; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.daten thead th {
  font: 500 var(--t-mono)/1.3 var(--schrift-daten); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-leise); white-space: nowrap;
}
table.daten tbody tr { transition: background-color .2s var(--ease); }
table.daten tbody tr:hover { background: color-mix(in srgb, var(--luft) 5%, transparent); }
table.daten td.zahl, table.daten th.zahl { text-align: right; font-family: var(--schrift-daten); font-size: .84rem; }
.tabelle-scrollhinweis { display: none; margin-top: 10px; font: 500 var(--t-mono)/1.4 var(--schrift-daten); color: var(--text-leise); }
@media (max-width: 700px) { .tabelle-scrollhinweis { display: block; } }

/* --- Formulare -------------------------------------------------------------- */
.formular { display: grid; gap: 22px; }
html:not(.js) .formular { display: none; }
.formular__hinweis { color: var(--text-leise); font-size: var(--t-sm); }
.formular__status { margin: 0; }
.formular__entwurf {
  width: 100%; min-height: 220px; padding: 16px;
  color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r-1);
  font: 400 var(--t-sm)/1.6 var(--schrift-daten);
}
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 620px) { .feld-paar { grid-template-columns: 1fr; } }
.feld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feld label { font: 500 var(--t-mono)/1.3 var(--schrift-daten); letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
.feld label .pflicht { color: var(--rot-text); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 54px; padding: 14px 16px;
  font: 400 1rem/1.4 var(--schrift-text); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.feld select { appearance: none; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.feld textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--text-leise); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--luft); background-color: var(--flaeche-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--luft) 22%, transparent);
}
.feld small { font-size: .82rem; color: var(--text-leise); }
.feld--haken { flex-direction: row; align-items: flex-start; gap: 12px; }
.feld--haken input { width: 20px; height: 20px; min-height: 0; flex: none; margin: 2px 0 0; accent-color: var(--rot); }
.feld--haken label { font: 400 var(--t-sm)/1.55 var(--schrift-text); letter-spacing: 0; text-transform: none; color: var(--text-leise); }
.feld--haken a { color: var(--text); }

/* --- Opaque editorial header -------------------------------------------- */
.kopf { position:sticky; top:0; z-index:100; height:var(--kopf-h); background:var(--grund); border-bottom:1px solid var(--linie); }
.kopf__innen { background:var(--grund); height:100%; width:min(100% - 2 * var(--rand),var(--breite)); margin-inline:auto; display:flex; align-items:center; gap:30px; }
.kopf__logo { flex:none; margin-right:auto; display:flex; align-items:center; padding-block:12px; }
.kopf__logo img { width:150px; height:auto; }
.nav__liste { display:flex; align-items:center; gap:24px; list-style:none; }
.nav__liste a { display:flex; align-items:center; min-height:44px; text-decoration:none; font-size:.91rem; font-weight:500; position:relative; }
.nav__liste a::after { content:""; position:absolute; bottom:7px; left:0; width:100%; height:1px; background:var(--text); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.nav__liste a:hover::after, .nav__liste a[aria-current]::after { transform:scaleX(1); }
.nav__extra { display:none; }
.kopf__aktionen { display:flex; align-items:center; gap:18px; }
.kopf__anfrage { border-radius:0 !important; font-weight:600; min-height:44px; padding-inline:18px; }
.thema { display:grid; place-items:center; width:44px; height:44px; padding:10px; border:0; background:transparent; color:var(--text); border-radius:50%; }
.thema:hover { background:var(--flaeche-2); }
.thema svg { width:21px; height:21px; }
.burger { display:none; }
@media (max-width:1200px) { .kopf__innen { gap:20px; } .nav__liste { gap:16px; } .kopf__logo img { width:136px; } .kopf__aktionen { gap:8px; } }
@media (max-width:960px) {
  .kopf__innen { gap:16px; }
  .kopf__logo img { width:136px; }
  .kopf__aktionen { display:none; }
  .burger { position:relative; z-index:2; display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 0 8px 12px; border:0; background:transparent; font-size:.88rem; color:var(--text); }
  .burger__linien { display:grid; width:25px; gap:6px; }
  .burger__linien span { display:block; height:1px; background:currentColor; transition:transform .25s; }
  .burger[aria-expanded="true"] .burger__linien span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__linien span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .js .nav { position:fixed; inset:var(--kopf-h) 0 0; overflow:auto; overscroll-behavior:contain; background:var(--grund); padding:32px 24px; visibility:hidden; opacity:0; transform:translateY(-10px); transition:opacity .25s,transform .35s,visibility 0s .35s; }
  .js .nav[data-offen="true"] { visibility:visible; opacity:1; transform:none; transition-delay:0s; }
  .nav__liste { display:grid; gap:0; }
  .nav__liste a { min-height:73px; font:600 clamp(1.75rem,5vw,3rem)/1.2 var(--schrift-anzeige); letter-spacing:-.04em; border-bottom:1px solid var(--linie); }
  .nav__liste a::after { display:none; }
  .nav__extra { display:grid; gap:16px; margin-top:36px; }
  .nav__extra a { text-decoration:none; }
  .nav__tel { font-size:1.4rem; font-weight:500; }
  .nav__mail { color:var(--text-leise); }
  .nav__extra .knopf { margin-block:8px; }
  .nav__zeile { display:flex; align-items:center; justify-content:space-between; }
  html:not(.js) .kopf { height:auto; position:relative; }
  html:not(.js) .kopf__innen { flex-wrap:wrap; padding-block:12px; }
  html:not(.js) .burger { display:none; }
  html:not(.js) .nav { flex-basis:100%; }
  html:not(.js) .nav__liste { display:flex; flex-wrap:wrap; gap:6px 18px; }
  html:not(.js) .nav__liste a { font:500 .95rem/1.5 var(--schrift-text); letter-spacing:0; min-height:44px; border:0; }
  html:not(.js) .nav__extra { display:none; }
}

/* --- Conversation, then orientation. ------------------------------------- */
.fuss { --grund:#171b1b; --text:#f4f3ee; --text-leise:#b6b9b2; --linie:rgba(244,243,238,.19); --linie-stark:rgba(244,243,238,.4); --luft:#e85d24; --fokus:#ff9162; color:var(--text); background:var(--grund); padding-top:clamp(64px,7vw,110px); overflow:hidden; }
.fuss a { text-decoration:none; color:var(--text); }
.fuss a:hover { color:#ff9162; }
.fuss__kopf { padding-bottom:64px; }
.fuss__kopf .kapitel__label { color:var(--text-leise); margin-bottom:40px; }
.fuss__projekt { display:flex; justify-content:space-between; align-items:center; gap:40px; width:100%; }
.fuss__headline { font:600 clamp(3rem,7.7vw,8rem)/.99 var(--schrift-anzeige); letter-spacing:-.045em; }
.fuss__pfeil { width:clamp(72px,10vw,140px); height:clamp(72px,10vw,140px); display:grid; place-items:center; flex:none; color:#171b1b; background:#e85d24; border-radius:50%; transition:transform .35s,background .25s; }
.fuss__pfeil svg { width:44%; height:44%; transform:rotate(-40deg); }
.fuss__projekt:hover .fuss__pfeil { transform:rotate(40deg); background:#ff9162; }
.fuss__direkt { display:flex; gap:32px; margin-top:34px; font-size:1.05rem; }
.fuss__raster { border-top:1px solid var(--linie); padding-block:52px 64px; display:grid; grid-template-columns:1.5fr 1.25fr 1fr 1.3fr; gap:36px; }
.fuss__logo { width:150px; height:auto; filter:brightness(0) invert(1); margin-bottom:22px; }
.fuss__firma p { max-width:30ch; font-size:.94rem; line-height:1.65; color:var(--text-leise); }
.fuss__titel { font:500 .72rem/1.4 var(--schrift-daten); text-transform:uppercase; letter-spacing:.09em; color:var(--text-leise); margin:0 0 20px; }
.fuss ul { list-style:none; display:grid; gap:10px; }
.fuss ul a { font-size:.94rem; min-height:24px; display:inline-block; }
.fuss address { font-style:normal; font-size:.94rem; line-height:1.7; }
.fuss__herkunft { margin-top:20px; color:var(--text-leise); font-size:.85rem; }
.fuss__unten { border-top:1px solid var(--linie); display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:22px; color:var(--text-leise); font-size:.75rem; }
.fuss__unten nav { display:flex; flex-wrap:wrap; gap:24px; }
.fuss__unten a { color:var(--text-leise); min-height:32px; display:inline-flex; align-items:center; }
.fuss__anmelden { gap:6px; }
.fuss__anmelden svg { width:13px; height:13px; }
.fuss__zeichen { position:relative; height:110px; border-top:1px solid var(--linie); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.fuss__zeichen span { position:relative; font:500 clamp(1.3rem,4.8vw,5rem)/1 var(--schrift-anzeige); letter-spacing:.05em; color:rgba(244,243,238,.28); }
.fuss__strom { position:absolute; inset:0; width:100%; height:100%; opacity:.42; }
@media (max-width:960px) { .fuss__raster { grid-template-columns:1fr 1fr; gap:40px 32px; } .fuss__firma { grid-column:1; } .fuss__unten { flex-wrap:wrap; } }
@media (max-width:600px) {
  .fuss__kopf { padding-bottom:44px; }
  .fuss__kopf .kapitel__label { max-width:27ch; margin-bottom:30px; font-size:.65rem; }
  .fuss__projekt { gap:18px; align-items:flex-start; }
  .fuss__headline { font-size:clamp(2.6rem,10vw,3.8rem); }
  .fuss__pfeil { margin-top:5px; width:56px; height:56px; }
  .fuss__direkt { flex-direction:column; gap:6px; margin-top:28px; font-size:1rem; }
  .fuss__raster { padding-block:40px; gap:34px 22px; }
  .fuss__firma { grid-column:1/-1; }
  .fuss__firma p { max-width:38ch; }
  .fuss__kontakt { grid-column:1/-1; }
  .fuss__unten { align-items:flex-start; flex-direction:column; gap:8px; }
  .fuss__unten nav { gap:20px; }
  .fuss__zeichen { height:80px; }
}

/* ==========================================================================
   Bühne der Unterseiten (buehne_klein)
   Oben die Szene (.buehne-klein__feld: leerer Slot für die Signaturszene der
   Seite, z. B. <canvas aria-hidden="true">), darüber Titel und Vorspann.
   Darunter das Foto als ruhiges Band — nie hinter oder unter der Szene.
   ========================================================================== */
.buehne-klein { position: relative; overflow: clip; }
.buehne-klein__szene {
  position: relative; isolation: isolate;
  min-height: clamp(560px, 86svh, 940px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--kopf-h) + 40px); padding-bottom: clamp(40px, 6vw, 88px);
}
.buehne-klein__feld { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.buehne-klein__feld > canvas, .buehne-klein__feld > svg { width: 100%; height: 100%; }
.buehne-klein__feld::after {  /* Schleier unten: Szene läuft in den Grund aus */
  content: ""; position: absolute; inset: auto 0 0; height: 40%;
  background: linear-gradient(to top, var(--grund), transparent);
}
.buehne-klein__innen { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px var(--spalt); align-items: end; }
.buehne-klein__innen .krume { grid-column: 1 / -1; }
.buehne-klein h1 { max-width: 12ch; }
.buehne-klein__text {
  font-size: var(--t-lg); line-height: 1.5; color: var(--text-leise); max-width: 40ch;
  padding-left: 20px; border-left: 1px solid var(--linie-stark);
}
.buehne-klein__foto { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.buehne-klein__foto img { aspect-ratio: 21 / 8; max-height: 620px; }
@media (max-width: 860px) {
  .buehne-klein__innen { grid-template-columns: 1fr; }
  .buehne-klein__szene { min-height: clamp(520px, 84svh, 760px); }
  .buehne-klein__foto img { aspect-ratio: 4 / 3; }
}
/* Schlichte Variante (Impressum): kürzere Szene, Foto neben dem Vorspann */
.buehne-klein--schlicht .buehne-klein__szene { min-height: clamp(380px, 58svh, 620px); }
.buehne-klein--schlicht h1 { font-size: var(--t-3xl); max-width: 14ch; }

.krume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font: 500 var(--t-mono)/1.4 var(--schrift-daten); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-leise);
}
.krume a { color: var(--text-leise); text-decoration: none; transition: color .2s var(--ease); }
.krume a:hover { color: var(--text); }
.krume > span:last-child { color: var(--text); }
.krume__trenner { width: 18px; height: 1px; background: currentColor; opacity: .6; }

/* --- Short editorial inquiry, no repeated photo composition ------------- */
.aufruf { padding-block:clamp(64px,8vw,120px); border-top:1px solid var(--linie); }
.aufruf__innen { display:grid; grid-template-columns:1.2fr 1fr; gap:28px 80px; }
.aufruf__innen > .kapitel__label { grid-column:1/-1; }
.aufruf__titel { font-size:clamp(2.7rem,4.8vw,5.2rem); letter-spacing:-.05em; line-height:1.02; max-width:17ch; }
.aufruf__text { display:grid; align-content:end; gap:28px; }
.aufruf__text > p { font-size:var(--t-lg); color:var(--text-leise); max-width:42ch; }
.aufruf__text .knopf-reihe { gap:22px; }
@media(max-width:860px) { .aufruf__innen { grid-template-columns:1fr; gap:24px; } .aufruf__titel { max-width:20ch; } }

/* ==========================================================================
   Ablauf — links die Schritte, rechts das mitlaufende Bild (data-ablauf)
   ========================================================================== */
.ablauf__gitter { display: grid; gap: clamp(28px, 4vw, 72px); }
.ablauf__schritte { position: relative; counter-reset: schritt; }
.ablauf__schritt {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 28px 0 32px 0; background: none; border: 0; border-top: 1px solid var(--linie);
  color: inherit; font: inherit;
}
.ablauf__marke {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px;
  font: 500 var(--t-mono)/1.4 var(--schrift-daten); letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise);
}
.ablauf__nr {
  font: 300 clamp(2.4rem, 4vw, 3.6rem)/.8 var(--schrift-anzeige); font-stretch: 80%; letter-spacing: -.04em;
  color: var(--text); text-transform: none; transition: color .4s var(--ease);
}
.ablauf__schritt h3 { font-size: var(--t-xl); transition: color .4s var(--ease); }
.ablauf__schritt p { margin-top: 12px; max-width: 52ch; color: var(--text-leise); }
.ablauf__inline { display: block; margin-top: 22px; }
.ablauf__inline img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; filter: var(--foto-filter); }
.ablauf__medien { display: none; }

@media (min-width: 900px) {
  .js .ablauf__gitter { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .js .ablauf__schritt { min-height: 38vh; padding-block: 6vh; cursor: pointer; display: flex; flex-direction: column; justify-content: center; }
  .js .ablauf__schritt::before {  /* Fortschrittsfaden am aktiven Schritt */
    content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
    background: var(--luft); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-aus);
  }
  .js .ablauf__schritt[aria-current="step"]::before { transform: scaleX(1); }
  .js .ablauf__schritt h3, .js .ablauf__schritt p, .js .ablauf__nr { color: var(--text-leise); }
  .js .ablauf__schritt:not([aria-current="step"]) :is(h3, p, .ablauf__nr) { opacity: .55; }
  .js .ablauf__schritt:hover :is(h3, p, .ablauf__nr) { opacity: .85; }
  .js .ablauf__schritt[aria-current="step"] h3, .js .ablauf__schritt[aria-current="step"] .ablauf__nr { color: var(--text); }
  .js .ablauf__schritt[aria-current="step"] p { color: var(--text-leise); }
  .js .ablauf__inline { display: none; }
  .js .ablauf__medien {
    position: sticky; top: calc(var(--kopf-h) + 24px);
    display: flex; align-items: center; height: calc(100svh - var(--kopf-h) - 48px);
  }
  .js .ablauf__rahmen { position: relative; display: grid; width: 100%; }
  .js .ablauf__medium { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
  .js .ablauf__medium[data-aktiv="true"] { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
  .js .ablauf__medium img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; background: var(--flaeche-2); filter: var(--foto-filter); }
  .js .ablauf__medium figcaption {
    display: flex; align-items: baseline; gap: 12px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--linie);
    font: 500 var(--t-mono)/1.5 var(--schrift-daten); letter-spacing: .06em; color: var(--text-leise);
  }
  .js .ablauf__medium figcaption .ablauf__nr-klein { color: var(--text); }
  .js .ablauf__rahmen::after {  /* Fortschritt über alle Schritte */
    content: ""; position: absolute; left: 0; top: -14px; height: 2px;
    width: calc(100% * var(--ablauf-fortschritt, 0)); background: var(--luft);
    transition: width .8s var(--ease-aus);
  }
}
@media (min-width: 900px) and (max-height: 720px) { .js .ablauf__medien { height: auto; display: block; } }

/* ==========================================================================
   Umschalter (data-wahl) und Reiter mit Konsole (data-reiter)
   ========================================================================== */
.wahl__leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(24px, 3vw, 40px); }
.wahl__knopf, .reiter__knopf {
  position: relative; min-height: 48px; padding: 12px 20px;
  font: 600 var(--t-sm)/1.1 var(--schrift-text); white-space: nowrap;
  color: var(--text-leise); background: transparent;
  border: 1px solid var(--linie); border-radius: 999px;
  transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.wahl__knopf:hover, .reiter__knopf:hover { color: var(--text); border-color: var(--linie-stark); }
.wahl__knopf[aria-selected="true"], .reiter__knopf[aria-selected="true"] { color: var(--grund); background: var(--text); border-color: var(--text); }
.wahl__tafeln, .reiter__tafeln { display: grid; }
.wahl__tafel, .reiter__tafel { grid-area: 1 / 1; min-width: 0; }
.js .wahl__tafel, .js .reiter__tafel { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s var(--ease), transform .5s var(--ease-aus), visibility 0s linear .35s; }
.js .wahl__tafel[data-aktiv="true"], .js .reiter__tafel[data-aktiv="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .5s var(--ease-aus), visibility 0s; }
.wahl__tafel .nur-ohne-js, .reiter__tafel .nur-ohne-js { margin-bottom: 16px; }
html:not(.js) .wahl__leiste, html:not(.js) .reiter__leiste { display: none; }
html:not(.js) .wahl__tafeln, html:not(.js) .reiter__tafeln { display: block; }
html:not(.js) .wahl__tafel + .wahl__tafel, html:not(.js) .reiter__tafel + .reiter__tafel { margin-top: 36px; }

.reiter__leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.reiter__tafeln { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r-2); }
.reiter__tafel { padding: clamp(20px, 2.8vw, 36px); }
.konsole {
  margin: 0; overflow-x: auto;
  font: 400 clamp(.78rem, 1.4vw, .9rem)/1.9 var(--schrift-daten);
  color: var(--text); white-space: pre-wrap; word-break: break-word;
}
.konsole b { color: var(--luft); font-weight: 500; user-select: none; }
.reiter__fuss {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie);
}
.reiter__fuss small { color: var(--text-leise); font-size: .84rem; }
.kopieren {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px;
  font: 500 var(--t-mono)/1 var(--schrift-daten); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); background: transparent;
  border: 1px solid var(--linie-stark); border-radius: 999px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.kopieren:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.kopieren svg { width: 14px; height: 14px; flex: none; }
.kopieren[data-fertig="true"] { color: var(--gut); border-color: var(--gut); }
html:not(.js) .kopieren { display: none; }
@media (max-width: 640px) { .reiter__knopf, .wahl__knopf { padding: 10px 16px; font-size: .86rem; } }

/* ==========================================================================
   Kennwerte — große Zahlen, Einheit in Mono, Haarlinien
   ========================================================================== */
.kennwerte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--linie-stark); }
.kennwert { padding: 22px var(--spalt) 26px 0; min-width: 0; }
.kennwert + .kennwert { padding-left: var(--spalt); border-left: 1px solid var(--linie); }
.kennwert dt { margin-bottom: 18px; font: 500 var(--t-mono)/1.3 var(--schrift-daten); letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
.kennwert dd {
  margin: 0; font: 700 clamp(2.4rem, 4.6vw, 4.2rem)/.9 var(--schrift-anzeige); font-stretch: 80%;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--text);
}
.kennwert dd i { font: 500 .85rem/1 var(--schrift-daten); font-style: normal; letter-spacing: .04em; color: var(--luft); margin-left: 8px; }
.kennwert dd small { display: block; margin-top: 14px; font: 400 var(--t-sm)/1.5 var(--schrift-text); letter-spacing: 0; color: var(--text-leise); }
@media (max-width: 700px) {
  .kennwerte { grid-template-columns: 1fr; }
  .kennwert + .kennwert { padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); }
}

/* Rounded arrow gestures, restrained labels, always stable hit targets. */
.knopf { translate:none; border-radius:0; min-height:52px; padding:0 24px; }
.knopf::before { transition:transform .25s; }
.knopf svg { width:20px; height:20px; }
.knopf--rot { background:var(--rot); }
.knopf--rand { border-color:var(--linie-stark); }
.buehne-klein__szene { padding-top:clamp(44px,6vw,86px); min-height:clamp(400px,62svh,670px); }
.buehne-klein--schlicht .buehne-klein__szene { min-height:420px; }
.buehne-klein--schlicht .buehne-klein__feld { display:none; }
@media(max-width:860px) { .buehne-klein__szene { min-height:450px; } .buehne-klein--schlicht .buehne-klein__szene { min-height:auto; padding-block:48px; } }
/* --- Druck ------------------------------------------------------------------ */
@media print {
  .kopf, .burger, .knopf-reihe, .aufruf, .fuss__zeichen, .buehne-klein__feld { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sz-bereit [data-enthuellen] img, .sz-bereit [data-enthuellen] { clip-path: none !important; transform: none !important; }
  main > section { padding-block: 16pt; }
  .fuss { background: none; color: #000; }
}

/* --- Reduzierte Bewegung: alles steht, nichts wartet -------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .sz-bereit [data-enthuellen] img, .sz-bereit [data-enthuellen] { clip-path: none !important; transform: none !important; }
  .laufband__spur { animation: none !important; flex-wrap: wrap; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Schlichte Bühne: die Szene bleibt links, das Foto steht rechts auf ruhigem Grund */
.buehne-klein--schlicht .buehne-klein__feld {
  right: calc(33.33% + var(--spalt));
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent);
}
.buehne-klein--schlicht .buehne-klein__innen { grid-template-rows: auto auto 1fr; }
.buehne-klein--schlicht h1 { grid-column: 1; grid-row: 2; }
.buehne-klein--schlicht .buehne-klein__text { grid-row: 3; align-self: start; }
.buehne-klein--schlicht .buehne-klein__foto--klein { grid-row: 2 / span 2; align-self: end; }
@media (max-width: 860px) {
  .buehne-klein--schlicht .buehne-klein__feld { right: 0; bottom: 45%; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .buehne-klein--schlicht .buehne-klein__innen { grid-template-rows: none; }
  .buehne-klein--schlicht h1, .buehne-klein--schlicht .buehne-klein__text, .buehne-klein--schlicht .buehne-klein__foto--klein { grid-row: auto; }
}