/* ====================================================================
   studio-siemering.de · Fassung 8 „Der Vorhang" · Entwurf 11.08.2026

   Formensprache nach Vorlage desses.co: helle Seite aus zwei
   Grautönen, dunkle Bühnen mit gerundeten Ecken, ein violetter
   Vorhang im Kopf, Pillenknöpfe mit Kreiszeichen, enge Grotesk
   auf Zeilenhöhe 1.

   Eckenmaße sind verabredet und gelten überall:
   999px Pillen und Chips · 20px Bühnen · 8px Karten und Bilder.

   01 Schriften          07 Das ausgestellte Stück
   02 Token              08 Ansage
   03 Grundlagen         09 Leistungen
   04 Kopfleiste, Menü   10 Arbeiten und der breitere Blick
   05 Knöpfe, Chips      11 Dunkle Bühnen: Nachweis, Grenzen
   06 Vorhang, Fakten    12 Preise, Fragen, Schluss, Fuß
                         13 Bewegung, Ruhe, Druck
   ==================================================================== */

/* == 01 · Schriften ================================================= */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fragment Mono";
  src: url("../fonts/fragment-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* == 02 · Token ===================================================== */

:root {
  /* Flächen */
  --hell-1: #f6f6f6;          /* oberer Seitengrund */
  --hell-2: #dedfe3;          /* unterer Seitengrund, kühler */
  --karte: #ffffff;
  --dunkel: #151515;          /* Bühnen */
  --nacht: #050505;           /* der Vorhang */

  /* Schrift */
  --tinte: #151515;
  --grau: #5a5a5a;            /* Nebentext auf hell, 7,0:1 */
  --hell-schrift: #f5f5f5;
  --hell-grau: #a6a6a6;       /* Nebentext auf dunkel, 6,7:1 */

  /* Der Akzent, in Rollen statt in einer Farbe: Eikes Markengold.
     Gold braucht auf hellem Grund einen eigenen, dunkleren
     Schriftwert · Flächengold erreicht dort nur 2,4:1. Der
     ?violett-Vergleichsschalter des Entwurfs ist raus, die
     Entscheidung für Gold ist gefallen (11.08.2026). */
  --akzent-flaeche: #d9b64a;                     /* Kreise, Punkte, volle Karten */
  --auf-akzent: #171208;                         /* Schrift AUF dem Akzent */
  --auf-akzent-gedeckt: rgb(23 18 8 / 0.78);     /* Nebentext auf dem Akzent */
  --auf-akzent-flaeche: rgb(23 18 8 / 0.09);     /* Zeilen auf der Akzentkarte */
  --akzent-text-hell: #7a6010;                   /* Akzent als Schrift auf hellem Grund */
  --akzent-text-dunkel: #e7cd7c;                 /* Akzent als Schrift auf dunklem Grund */
  --probe-stift-grund: rgb(23 18 8 / 0.88);
  --probe-stift-schrift: #f3e3b2;
  --probe-stift-neben: #d9b64a;
  --stoff-bild: url("../img/goldenes-band.webp");
  --stoff-schein-1: #e3bd4e;
  --stoff-schein-2: #b08a2a;
  --stoff-schein-3: #6e5312;
  --gruen: #1faa53;           /* WhatsApp, abgedunkelt für Kontrast */

  /* Maße */
  --ecke-pille: 999px;
  --ecke-buehne: 20px;
  --ecke-karte: 8px;
  --feld-breit: 82.5rem;
  --feld-rand: clamp(1.25rem, 4vw, 3rem);

  /* Bewegung (Kurven nach dem Handwerkszeug: kräftiges ease-out) */
  --zug: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: "Hanken Grotesk", system-ui, sans-serif;
  color-scheme: light;
}

/* == 03 · Grundlagen ================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hell-1);
  color: var(--tinte);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 430;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

/* Das Korn über der ganzen Seite, wie beim Vorbild. Eine feste,
   durchklickbare Schicht aus SVG-Rauschen · eingebettet, also ohne
   eigene Anfrage. Auf Dunkel sichtbarer als auf Hell, genau richtig. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.14;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }

img { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--akzent-flaeche); color: var(--auf-akzent); }

.feld {
  max-width: var(--feld-breit);
  margin-inline: auto;
  padding-inline: var(--feld-rand);
}

/* Anker landen unter der schwebenden Leiste, nicht dahinter. */
[id] { scroll-margin-top: 5.5rem; }

.sprungmarke {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: 0.8rem 1.4rem;
  background: var(--tinte);
  color: var(--hell-schrift);
  border-radius: var(--ecke-karte);
}

.sprungmarke:focus {
  left: 1rem;
  top: 1rem;
}

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

/* Die dunklen Flaechen brauchen den hellen Akzent · der dunkle waere
   auf ihnen fast unsichtbar. .fest-buehne steht mit in der Liste,
   obwohl es keine Buehne ueber die ganze Breite ist: Dunkel ist
   dunkel, und der Ring liegt durch den Versatz von 3px ohnehin
   ausserhalb der weissen Karten darauf. */
.buehne :focus-visible,
.vorhang :focus-visible,
.schluss :focus-visible,
.fest-buehne :focus-visible,
.menue :focus-visible {
  outline-color: var(--akzent-text-dunkel);
}

/* Die drei Ausrichtungen aus dem Pflegebereich. Der leere Wert
   heisst "so, wie die Seite gebaut ist" und bekommt keine Klasse. */
.aus-links  { text-align: left; }
.aus-mitte  { text-align: center; }
.aus-rechts { text-align: right; }

/* == 04 · Kopfleiste und Menü ======================================= */

/* Sticky statt fixed, seit das Hinweisband existiert: Ein Band im
   Fluss davor schiebt die Leiste einfach unter sich, eine fixe
   Leiste läge darüber. Der negative untere Rand gibt die Höhe an
   den Fluss zurück · fürs Blättern verhalten sich beide gleich,
   die Leiste klebt bei 1rem unter der Kante. */
.kopfleiste {
  position: sticky;
  top: 1rem;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-inline: var(--feld-rand);
  max-width: var(--feld-breit);
  margin-inline: auto;
  margin-top: 1rem;
  margin-bottom: calc(-3.25rem - 1rem);
  pointer-events: none;               /* nur die Pillen fangen Klicks */
}

.pille {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  height: 3.25rem;
  padding-inline: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--ecke-pille);
  background: rgb(16 16 16 / 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--hell-schrift);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--zug), background-color 200ms ease;
}

.pille:hover { background: rgb(16 16 16 / 0.92); }
.pille:active { transform: scale(0.97); }

.marke-signet { flex: none; }

.menue-striche {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 16px;
}

.menue-striche i {
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 220ms var(--zug);
}

.menue-schalter[aria-expanded="true"] .menue-striche i:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.menue-schalter[aria-expanded="true"] .menue-striche i:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.menue {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgb(8 8 8 / 0.97);
  color: var(--hell-schrift);
  overflow-y: auto;
}

.menue-innen {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  max-width: var(--feld-breit);
  margin-inline: auto;
  padding: 7rem var(--feld-rand) 3rem;
}

.menue-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.menue-liste a {
  display: inline-block;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 430;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-decoration: none;
  color: var(--hell-schrift);
  transition: color 200ms ease, translate 300ms var(--zug);
}

.menue-liste a:hover {
  color: var(--akzent-text-dunkel);
  translate: 0.4rem 0;
}

.menue-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  color: var(--hell-grau);
  font-size: 0.9375rem;
}

.menue-fuss a {
  color: inherit;
  text-decoration: none;
}

.menue-fuss a:hover { color: var(--hell-schrift); }

/* Zeichen und Wort in einer Zeile · dieselbe Klasse traegt den
   Instagram-Verweis im Kopfmenue, im Kontaktabschnitt und in den
   beiden Fusszeilen. Die Farbe kommt vom Ort, das Zeichen zeichnet
   sich in currentColor. */
.sozial-verweis {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* flex: none, sonst quetscht eine enge Spalte das Quadrat zum
   Rechteck, bevor der Text umbricht. */
.sozial-verweis svg { flex: none; }

/* Aufgeklappt: die Verweise treten gestaffelt ein. */
.menue-liste li {
  opacity: 0;
  translate: 0 1.4rem;
  transition: opacity 500ms var(--zug), translate 500ms var(--zug);
}

.menue.offen .menue-liste li { opacity: 1; translate: 0 0; }
.menue.offen .menue-liste li:nth-child(2) { transition-delay: 40ms; }
.menue.offen .menue-liste li:nth-child(3) { transition-delay: 80ms; }
.menue.offen .menue-liste li:nth-child(4) { transition-delay: 120ms; }
.menue.offen .menue-liste li:nth-child(5) { transition-delay: 160ms; }

body.menue-offen { overflow: hidden; }

/* Das Hinweisband aus dem Pflegebereich. Nur im Baum, wenn der
   Schalter an ist und sein Zeitraum gilt. Es steht im Fluss VOR der
   Kopfleiste · die ist sticky und rückt von selbst darunter. */
.hinweisband {
  position: relative;
  z-index: 101;
  background: var(--akzent-flaeche);
  color: var(--auf-akzent);
}

.hinweisband-text {
  max-width: var(--feld-breit);
  margin: 0 auto;
  padding: 0.6rem var(--feld-rand);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* == 05 · Knöpfe und Chips ========================================== */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  height: 3rem;
  padding: 0.25rem 1.4rem 0.25rem 0.25rem;
  border-radius: var(--ecke-pille);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms var(--zug), background-color 200ms ease;
}

.knopf:active { transform: scale(0.97); }

.knopf-kreis {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--akzent-flaeche);
  color: var(--auf-akzent);
}

.knopf-kreis svg { transition: translate 300ms var(--zug); }
.knopf:hover .knopf-kreis svg { translate: 3px 0; }

.knopf-kreis--gruen { background: var(--gruen); }

/* Instagram bringt seine eigene Farbe mit, so wie WhatsApp sein
   Gruen. Der Verlauf ist die Marke; ohne ihn ist ein weisses Quadrat
   auf Gold nur ein Quadrat. Er bleibt auf den Kreis beschraenkt und
   greift nicht in die Flaeche des Knopfes. */
.knopf-kreis--insta {
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%);
  color: #fff;
}

.knopf--hell   { background: #f2f2f2; color: var(--tinte); }
.knopf--hell:hover { background: #ffffff; }

.knopf--tinte  { background: var(--tinte); color: var(--hell-schrift); }
.knopf--tinte:hover { background: #000; }

.knopf--dunkel {
  background: rgb(28 28 28 / 0.9);
  color: var(--hell-schrift);
  border: 1px solid rgb(255 255 255 / 0.12);
}

.knopf--dunkel:hover { background: rgb(40 40 40 / 0.9); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--grau);
}

.chip-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--akzent-flaeche);
}

/* == 05a · Die Worteinblendung ====================================== */

/* Ein Zähler läuft mit dem Blättern von 0 auf 1. Jedes Wort rechnet
   daraus seine eigene Deckkraft: Wort i wird sichtbar, sobald der
   Zähler i von n Schritten geschafft hat. Ohne Rollzeitleisten
   (Firefox) bleibt der Zähler auf 1 und alles steht voll da.

   i und n kommen NICHT als style-Attribut mit: Die Domain schickt
   style-src 'self' ohne 'unsafe-inline', ein style="--i:4" würde
   live still verworfen. i zählt deshalb nth-child, n steht als
   Klasse lesen--n am Absatz. */
@property --lese {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.lesen { --lese: 1; --n: 15; }

.lesen--6  { --n: 6; }
.lesen--11 { --n: 11; }
.lesen--15 { --n: 15; }
.lesen--20 { --n: 20; }

.wort {
  opacity: clamp(0.12, calc(var(--lese) * (var(--n) + 3) - var(--i)), 1);
}

.lesen > .wort:nth-child(1)  { --i: 0; }
.lesen > .wort:nth-child(2)  { --i: 1; }
.lesen > .wort:nth-child(3)  { --i: 2; }
.lesen > .wort:nth-child(4)  { --i: 3; }
.lesen > .wort:nth-child(5)  { --i: 4; }
.lesen > .wort:nth-child(6)  { --i: 5; }
.lesen > .wort:nth-child(7)  { --i: 6; }
.lesen > .wort:nth-child(8)  { --i: 7; }
.lesen > .wort:nth-child(9)  { --i: 8; }
.lesen > .wort:nth-child(10) { --i: 9; }
.lesen > .wort:nth-child(11) { --i: 10; }
.lesen > .wort:nth-child(12) { --i: 11; }
.lesen > .wort:nth-child(13) { --i: 12; }
.lesen > .wort:nth-child(14) { --i: 13; }
.lesen > .wort:nth-child(15) { --i: 14; }
.lesen > .wort:nth-child(16) { --i: 15; }
.lesen > .wort:nth-child(17) { --i: 16; }
.lesen > .wort:nth-child(18) { --i: 17; }
.lesen > .wort:nth-child(19) { --i: 18; }
.lesen > .wort:nth-child(20) { --i: 19; }

.wort--grau { color: #8f8f8f; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lesen {
      animation: lesezug linear both;
      animation-timeline: view();
      /* Beginnt, wenn der Absatz zu einem Viertel im Fenster steht,
         und ist fertig, bevor er die Mitte erreicht. */
      animation-range: entry 25% cover 45%;
    }

    @keyframes lesezug {
      from { --lese: 0; }
      to   { --lese: 1; }
    }
  }
}

/* == 05b · Auftakt und Bühnenauftritt =============================== */

/* Die helle Fläche mit der Zeile klein in der Mitte. Sie existiert
   nur, wenn der eingebettete Kopfabschnitt das Kennzeichen gesetzt
   hat · also nie ohne Skript, nie bei Ruhewunsch, einmal je
   Sitzung. Keine Ladeanzeige: Die Seite dahinter steht längst. */
.auftakt { display: none; }

/* Der ganze Ablauf liegt hier im Stylesheet: 600 ms halten, 700 ms
   heben, am Ende unsichtbar. Kein Zeitgeber im Skript, kein
   Klassenwechsel unterwegs · was einmal angestoßen ist, läuft
   durch, egal was mit dem Nachlade-Skript passiert. */
/* Zwei Akte an derselben Stelle, dann das Heben. Der Zeitplan:
   Wortmarke 200 bis 1900 ms, Satz ab 1900 ms Wort für Wort,
   Heben ab 3600 ms, langsam und satt. */
html.auftakt-an .auftakt {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--hell-1);
  animation: auftakt-heben 1200ms cubic-bezier(0.72, 0, 0.16, 1) 3600ms forwards;
}

.auftakt > * { grid-area: 1 / 1; }

@keyframes auftakt-heben {
  to { translate: 0 -100%; visibility: hidden; }
}

/* Erster Akt: die Wortmarke, herein und wieder hinaus. */
.auftakt-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 450;
  letter-spacing: -0.015em;
  opacity: 0;
  animation:
    auftakt-marke-auf 500ms ease 200ms forwards,
    auftakt-marke-ab 400ms ease 1500ms forwards;
}

.auftakt-signet {
  width: 1.05em;
  height: auto;
  flex: none;
  color: var(--akzent-text-hell);
}

@keyframes auftakt-marke-auf { to { opacity: 1; } }
@keyframes auftakt-marke-ab  { to { opacity: 0; } }

/* Zweiter Akt: der Satz, Wort für Wort in derselben Einblendung
   wie unten auf der Seite · blass beginnen, voll ankommen. */
.auftakt-zeile {
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  font-weight: 430;
  letter-spacing: -0.012em;
  padding-inline: var(--feld-rand);
  text-align: center;
  text-wrap: balance;
  max-width: 44ch;
  opacity: 0;
  animation: auftakt-zeile-auf 250ms ease 1900ms forwards;
}

@keyframes auftakt-zeile-auf { to { opacity: 1; } }

.auftakt-wort {
  opacity: 0.12;
  animation: auftakt-wort-auf 450ms ease forwards;
  animation-delay: calc(2000ms + var(--i, 0) * 90ms);
}

/* i zählt nth-child · siehe die Worteinblendung oben (CSP). */
.auftakt-zeile > .auftakt-wort:nth-child(1)  { --i: 0; }
.auftakt-zeile > .auftakt-wort:nth-child(2)  { --i: 1; }
.auftakt-zeile > .auftakt-wort:nth-child(3)  { --i: 2; }
.auftakt-zeile > .auftakt-wort:nth-child(4)  { --i: 3; }
.auftakt-zeile > .auftakt-wort:nth-child(5)  { --i: 4; }
.auftakt-zeile > .auftakt-wort:nth-child(6)  { --i: 5; }
.auftakt-zeile > .auftakt-wort:nth-child(7)  { --i: 6; }
.auftakt-zeile > .auftakt-wort:nth-child(8)  { --i: 7; }
.auftakt-zeile > .auftakt-wort:nth-child(9)  { --i: 8; }
.auftakt-zeile > .auftakt-wort:nth-child(10) { --i: 9; }
.auftakt-zeile > .auftakt-wort:nth-child(11) { --i: 10; }
.auftakt-zeile > .auftakt-wort:nth-child(12) { --i: 11; }

.auftakt-wort--grau { color: #8f8f8f; }

@keyframes auftakt-wort-auf { to { opacity: 1; } }

/* Der Bühnenauftritt des Vorhangs: drei Wellen im Abstand von
   650 ms, Schritte innerhalb einer Welle 140 ms, jede Bewegung
   900 ms weich. Auch das reine Stylesheet-Arbeit: Die Füllung
   „both" hält jedes Element unsichtbar, bis seine Verzögerung um
   ist. Spielt der Auftakt, rückt alles um 1100 ms nach hinten und
   läuft damit ins Heben der Fläche hinein. */
html.js .helden-auftritt {
  animation: auftreten 900ms var(--zug) both;
  animation-delay: calc(var(--auftakt-versatz, 0ms)
    + (var(--welle, 1) - 1) * 650ms + var(--schritt, 0) * 140ms);
}

/* Welle und Schritt als Klassen, nicht als style-Attribut (CSP,
   siehe Worteinblendung). Welle 1 und Schritt 0 sind die Vorgabe. */
.welle-2 { --welle: 2; }
.welle-3 { --welle: 3; }
.schritt-1 { --schritt: 1; }
.schritt-2 { --schritt: 2; }

html.auftakt-an .helden-auftritt { --auftakt-versatz: 4200ms; }

@keyframes auftreten {
  from { opacity: 0; translate: 0 1.5rem; }
  to   { opacity: 1; translate: 0 0; }
}

/* == 06 · Der Vorhang =============================================== */

.vorhang {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border-radius: 0 0 var(--ecke-buehne) var(--ecke-buehne);
  background: var(--nacht);
  color: var(--hell-schrift);
}

/* Beim Fortrollen bleibt der Vorhang halb zurück, der nächste
   Abschnitt schiebt sich von unten darüber · die Tiefenstaffelung
   der Vorlage. Dafür liegt alles nach dem Vorhang eine Ebene höher
   und trägt einen eigenen Grund. */
main > * { position: relative; z-index: 1; }

main > .vorhang { z-index: 0; }

.ansage,
.leistungen { background: var(--hell-1); }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .vorhang {
      animation: vorhang-zurueck linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 100vh;
    }

    @keyframes vorhang-zurueck {
      to { translate: 0 50vh; }
    }
  }
}

/* Der Stoff. Liegt das erzeugte Bild vor, deckt es die Verläufe zu;
   fehlt es, tragen die Verläufe die Fläche allein. */
/* Der Schleier vorn hält die Schrift auf jeder Fensterbreite auf
   sicherem Grund, egal wie weit der Stoff nach links reicht. */
.vorhang-stoff {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(100deg, rgb(5 5 5 / 0.92) 0%, rgb(5 5 5 / 0.55) 38%, rgb(5 5 5 / 0) 62%),
    var(--stoff-bild),
    radial-gradient(120% 95% at 88% 8%,  var(--stoff-schein-1) 0%, transparent 52%),
    radial-gradient(95% 80% at 72% 48%,  var(--stoff-schein-2) 0%, transparent 58%),
    radial-gradient(85% 70% at 22% 88%,  var(--stoff-schein-3) 0%, transparent 62%),
    linear-gradient(#050505, #050505);
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* Ein Hauch Faltenwurf, bis das Bild da ist. */
.vorhang-stoff::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgb(255 255 255 / 0.028) 0 2px,
    rgb(255 255 255 / 0) 2px 26px
  );
  mix-blend-mode: overlay;
}

/* Die Leinwand. Wenn WebGL da ist, zeichnet sie den Grund · im Kopf
   wie auf der Schlussfläche. Der Stoff-Kasten darüber behält dann nur
   noch den Schleier für die Schrift, das Bild kommt aus der
   Leinwand. */
.stoff-leinwand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vorhang.hat-leinwand .vorhang-stoff {
  background-image:
    linear-gradient(100deg, rgb(5 5 5 / 0.92) 0%, rgb(5 5 5 / 0.55) 38%, rgb(5 5 5 / 0) 62%);
  will-change: auto;
}

.vorhang.hat-leinwand .vorhang-stoff::after { content: none; }

/* Beim Fluss trägt die Leinwand einen erzeugten Lichttropfen und
   kein Foto. Der Schleier folgt deshalb dem TEXT und nicht mehr der
   linken Kante · so darf das Licht auch links laufen, nur nicht unter
   den Wörtern. Den zweiten Teil der Arbeit macht der Riegel im
   Shader. */
.vorhang.ist-fluss .vorhang-stoff {
  background-image:
    linear-gradient(100deg, rgb(5 5 5 / 0.62) 0%, rgb(5 5 5 / 0.24) 38%, rgb(5 5 5 / 0) 66%);
}

/* Die weiche Fläche hinter dem Satzblock. Sie hängt am Textkasten und
   nicht an Prozenten des Fensters: .vorhang-innen IST das Feld, also
   höchstens 82,5rem breit und mittig. Ein Verlauf in Fensterprozenten
   säße auf dem 3440er Schirm neben dem Text statt darunter, dort
   beginnt das Feld erst bei 31 Prozent.

   isolation: isolate ist Pflicht. Ohne eigenen Stapelzusammenhang
   fällt ein Kind mit z-index -1 bis unter die Leinwand durch und ist
   dann gar nicht mehr zu sehen. Die negativen inset-Werte lassen den
   Verlauf über den Kasten hinausbluten, sonst steht an dessen Kante
   eine sichtbare Naht. */
.vorhang.ist-fluss .vorhang-innen { isolation: isolate; }

/* Die Schlussfläche bekommt dieselbe Leinwand. Sie ist mit ihrem Fuß
   viel höher als der Schirm, deshalb wird der Schleier nach unten hin
   dichter: oben darf das Licht laufen, unten stehen Anschrift, Links
   und Rechtstexte und brauchen ihren ruhigen Grund. Der Kasten liegt
   dann bündig statt mit -6 Prozent Überstand, und das Treiben aus dem
   Stylesheet hört auf · es bewegte nur das Foto. */
.schluss.hat-leinwand .schluss-stoff {
  inset: 0;
  animation: none;
  background-image:
    linear-gradient(rgb(5 5 5 / 0.30) 0%, rgb(5 5 5 / 0.52) 34%,
                    rgb(5 5 5 / 0.84) 72%, rgb(5 5 5 / 0.92) 100%);
}

.vorhang.ist-fluss .vorhang-innen::before {
  content: "";
  position: absolute;
  inset: -16% -34% -18% -60%;
  z-index: -1;
  background: radial-gradient(58% 62% at 46% 50%,
    rgb(5 5 5 / 0.45) 0%, rgb(5 5 5 / 0.28) 42%, rgb(5 5 5 / 0) 78%);
  pointer-events: none;
}

.vorhang-innen {
  position: relative;
  width: 100%;
  align-self: center;
  padding-top: 6.5rem;
  padding-bottom: 3rem;
}

.vorhang .chip { color: rgb(245 245 245 / 0.85); }

.vorhang-satz {
  margin-top: 1.4rem;
  font-size: clamp(3rem, 8.4vw, 5.25rem);
  font-weight: 420;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 13em;
}

.vorhang-satz .zeile { display: block; }

.zeile--grau { color: rgb(245 245 245 / 0.52); }

.zeile-hell { color: var(--akzent-text-dunkel); }

.vorhang-zeile {
  margin-top: 1.75rem;
  max-width: 33rem;
  color: rgb(245 245 245 / 0.78);
}

.vorhang-handlung {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.vorhang-post {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: rgb(245 245 245 / 0.7);
  font-family: "Fragment Mono", monospace;
  font-size: 0.875rem;
  text-decoration: none;
}

.vorhang-post:hover { color: var(--hell-schrift); }

/* Der Chip auf dunklem Grund. */
.chip--dunkel { color: rgb(245 245 245 / 0.85); }

/* Die Stufen zwischen zwei Gründen: drei Rechtecke im kommenden
   Ton, gestaffelt wie eine Treppe. Beim Blättern wachsen sie aus
   dem kommenden Abschnitt nach oben · je weiter man rollt, desto
   höher, wie beim Vorbild. Kein overflow: hidden an diesem Kasten:
   Das machte ihn zum Scroll-Container und fror die view()-Zeit-
   leisten der Stufen ein, sie standen still. */
.treppe {
  position: relative;
  display: grid;
  grid-template-columns: 38% 24% 38%;
  align-items: end;
  /* Die Lücke im Fluss bleibt knapp · die Stufen selbst dürfen
     höher sein als der Kasten und über seine Oberkante in den
     vorigen Abschnitt hineinwachsen, wie beim Vorbild. */
  height: clamp(6rem, 12vw, 10rem);
}

.treppe i { display: block; }

/* Rückfall ohne Rollzeitleisten und bei Ruhewunsch: bescheidene
   Stufen im Kasten, nichts ragt in den Abschnitt darüber. */
.treppe i:nth-child(1) { height: 58%; }
.treppe i:nth-child(2) { height: 100%; }
.treppe i:nth-child(3) { height: 34%; }

.treppe--ins-graue { background: var(--hell-1); }
.treppe--ins-graue i { background: var(--hell-2); }

.treppe--ins-helle { background: var(--dunkel); }
.treppe--ins-helle i { background: var(--hell-2); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Die Zeitleiste hängt am Kasten, nicht an den Stufen: Deren
       Kästen ragen weit nach oben, ihre eigene view()-Spanne
       begänne unsichtbar unterm Fensterrand. */
    .treppe { view-timeline: --treppenlauf block; }

    .treppe i {
      transform-origin: bottom;
      animation: stufenwuchs linear both;
      animation-timeline: --treppenlauf;
    }

    /* Voll ausgewachsen bis dreimal Kastenhöhe · der Überstand
       schiebt sich über den vorigen Abschnitt. Der Turm wächst am
       längsten, die Seiten kommen früher an. */
    .treppe i:nth-child(1) { height: 170%; --stufe-start: 0.06; animation-range: entry 0% cover 70%; }
    .treppe i:nth-child(2) { height: 300%; --stufe-start: 0.04; animation-range: entry 0% cover 92%; }
    .treppe i:nth-child(3) { height: 110%; --stufe-start: 0.1;  animation-range: entry 0% cover 55%; }

    @keyframes stufenwuchs {
      from { transform: scaleY(var(--stufe-start, 0.1)); }
      to   { transform: scaleY(1); }
    }
  }
}

/* Das Faktenband, wo beim Vorbild die Kundenlogos laufen. */
.faktenband {
  position: relative;
  border-top: 1px solid rgb(255 255 255 / 0.09);
  padding-block: 1.1rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.faktenband-lauf {
  display: flex;
  width: max-content;
  animation: faktenlauf 60s linear infinite;
}

.faktenband-teil {
  display: flex;
  flex: none;
  gap: 3.5rem;
  padding-right: 3.5rem;
  font-family: "Fragment Mono", monospace;
  font-size: 0.8125rem;
  color: rgb(245 245 245 / 0.55);
  white-space: nowrap;
}

@keyframes faktenlauf {
  to { transform: translateX(-50%); }
}

/* == 07 · Geteilte Werkkarten-Teile ================================= */

.werk-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 700ms var(--zug);
}

.breit-karte:hover .werk-bild img { transform: scale(1.03); }

.werk-fach {
  font-family: "Fragment Mono", monospace;
  font-size: 0.8125rem;
  color: var(--grau);
}

/* == 08 · Ansage ==================================================== */

/* Mittig gesetzt, mit viel Luft davor · die Leere gehört zur
   Vorlage und bleibt frei. */
.ansage {
  padding-block: clamp(7rem, 16vw, 13rem) clamp(5rem, 12vw, 9.5rem);
  text-align: center;
}

.ansage-satz {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 420;
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 21em;
  margin-inline: auto;
  text-wrap: balance;
}

.ansage-klein {
  margin-top: 1.75rem;
  max-width: 36rem;
  margin-inline: auto;
  color: var(--grau);
}

/* == 09 · Leistungen ================================================ */

.leistungen { padding-bottom: clamp(5rem, 11vw, 8.5rem); }

.leistungen-innen {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem 5rem;
  align-items: start;
}

.leistungen-kopf {
  position: sticky;
  top: 6rem;
}

.leistungen-kopf h2 {
  margin-top: 1.2rem;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 425;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.leistungen-satz {
  margin-top: 1.25rem;
  margin-bottom: 2rem;
  color: var(--grau);
  max-width: 30rem;
}

.leistungen-karten {
  display: grid;
  gap: 1.25rem;
}

/* Die Karten ruhen ausgegraut wie beim Vorbild, erst der Zeiger
   färbt sie in die Akzentfläche und tauscht die Beschreibung gegen
   die nummerierte Liste: Der Satz weicht nach unten aus, die Liste
   kommt von links herein. Beide liegen im selben Rasterfeld
   übereinander, die Karte behält dadurch ihre Höhe.
   Die Proportion kommt aus dem Muster: hoher Kasten, kompakter
   Rand, Titel oben, der Satz unten an der Kante, dazwischen Luft. */
.lkarte {
  background: var(--hell-2);
  border-radius: var(--ecke-karte);
  padding: clamp(1.5rem, 2.2vw, 1.9rem);
  display: grid;
  grid-template-rows: auto 1fr;
  transition: background-color 350ms var(--zug), color 350ms var(--zug);
}

.lkarte h3 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 480;
  letter-spacing: -0.015em;
  transition: color 350ms var(--zug);
}

.lkarte-wechsel {
  display: grid;
  /* Abstand des Listeneinflugs zum Titel · der Satz hängt ohnehin
     unten an der Kante. */
  margin-top: clamp(2rem, 3vw, 3rem);
}

.lkarte-wechsel > * {
  grid-area: 1 / 1;
}

.lkarte-satz {
  color: var(--grau);
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: opacity 250ms var(--zug), translate 250ms var(--zug);
}

.lkarte-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  counter-reset: merkmal;
  align-content: start;
  opacity: 0;
  translate: -1.4rem 0;
  visibility: hidden;
  transition: opacity 300ms var(--zug), translate 300ms var(--zug),
              visibility 0s linear 300ms;
}

.lkarte-liste li {
  counter-increment: merkmal;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-weight: 570;
  font-size: 1.1875rem;
}

/* 75 statt 55 Prozent: Die 55 lagen auf dem Flächengold unter
   4,5:1, und kleine Ziffern verzeihen nichts. */
.lkarte-liste li::before {
  content: counter(merkmal, decimal-leading-zero);
  font-family: "Fragment Mono", monospace;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--auf-akzent) 75%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  /* Die Kastenhöhe des Musters: rund 0,4 der Kartenbreite. Der Satz
     ruht an der Unterkante, die Liste fliegt oben unterm Titel ein,
     die Mitte atmet. Am Telefon wächst die Karte stattdessen mit
     ihrem Inhalt. */
  .lkarte { min-height: clamp(15rem, 21vw, 19rem); }

  .lkarte-satz { align-self: end; }

  .lkarte-liste { align-self: start; }

  .lkarte:hover {
    background: var(--akzent-flaeche);
    color: var(--auf-akzent);
  }

  .lkarte:hover h3 { color: var(--auf-akzent); }

  .lkarte:hover .lkarte-satz {
    opacity: 0;
    translate: 0 1.1rem;
  }

  .lkarte:hover .lkarte-liste {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    transition-delay: 90ms, 90ms, 0s;
  }
}

/* Ohne feinen Zeiger gibt es nichts zu tauschen: Beschreibung und
   Liste stehen untereinander, die Nummern in Violett. Am Telefon
   übernimmt stattdessen der Tipp den Tausch · siehe den
   45rem-Block weiter unten. */
@media (hover: none), (pointer: coarse) {
  .lkarte-wechsel { gap: 1.2rem; }

  .lkarte-wechsel > * { grid-area: auto; }

  .lkarte-liste {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
  }

  .lkarte-liste li::before { color: var(--akzent-text-hell); }
}


/* == 10 · Arbeiten und der breitere Blick =========================== */

/* Ab hier steht die Seite auf dem kühleren Grau. Der Wechsel ist
   eine Kante der Vorlage und bewusst sichtbar. */
.arbeiten {
  background: var(--hell-2);
  padding-block: clamp(5rem, 11vw, 8.5rem);
}

.arbeiten-innen {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 3rem 4rem;
  align-items: start;
}

.arbeiten-kopf { position: sticky; top: 6rem; }

.arbeiten-kopf h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 420;
  letter-spacing: -0.015em;
  line-height: 1.03;
  text-wrap: balance;
}

.arbeiten-kopf p {
  margin-top: 1rem;
  color: var(--grau);
  max-width: 38rem;
}

/* Die Übersicht in der klebenden Spalte: kleine Karten mit
   Vorschaubild. Die Karte des Falls, der rechts gerade sichtbar
   ist, hebt sich · das setzt der Rollspion im Skript. */
.fall-index {
  margin-top: 2.25rem;
  display: grid;
  gap: 0.6rem;
}

.fall-index a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem;
  border-radius: var(--ecke-karte);
  background: var(--karte);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 250ms ease, transform 200ms var(--zug);
}

.fall-index a:hover { transform: translateX(4px); }

.fall-index a.aktiv { border-color: var(--akzent-flaeche); }

.fall-index img {
  width: 56px;
  height: 44px;
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
  flex: none;
}

.fall-index-text {
  display: grid;
  gap: 0.05rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  min-width: 0;
}

.fall-index-text strong {
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fall-index-fach {
  font-family: "Fragment Mono", monospace;
  font-size: 0.6875rem;
  color: var(--akzent-text-hell);
}

.fall-index-satz { color: var(--grau); }

/* Die Fallkarten. */
.faelle {
  display: grid;
  gap: 2.5rem;
}

.fall {
  min-width: 0;
  background: var(--karte);
  border-radius: var(--ecke-karte);
  overflow: hidden;
}

/* Die Bühne: getönter Grund, darauf das schwebende Fenster mit dem
   Standbild. Die Standbilder sind ganze Seitenläufe · zugeklappt
   zeigt das Fenster ihren Kopf, aufgeklappt lässt es sich durch die
   ganze Seite rollen. */
.fall-buehne {
  position: relative;
  display: block;
  height: clamp(20rem, 36vw, 30rem);
  overflow: hidden;
  transition: height 500ms var(--zug);
}

.fall-buehne--trattoria {
  background:
    radial-gradient(90% 80% at 18% 0%, rgb(255 255 255 / 0.5), transparent 60%),
    linear-gradient(140deg, #e3ded2, #c8bfae);
}

.fall-buehne--hofladen {
  background:
    radial-gradient(90% 80% at 18% 0%, rgb(255 255 255 / 0.55), transparent 60%),
    linear-gradient(140deg, #e6e1d5, #ccc8bb);
}

.fall-buehne--physiotherapie {
  background:
    radial-gradient(90% 80% at 18% 0%, rgb(255 255 255 / 0.55), transparent 60%),
    linear-gradient(140deg, #dfe6ea, #becdd6);
}

.fall-buehne--malerwerkstatt {
  background:
    radial-gradient(90% 80% at 18% 0%, rgb(255 255 255 / 0.55), transparent 60%),
    linear-gradient(140deg, #e2e7df, #c2ccbf);
}

.fall-buehne--autoservice {
  background:
    radial-gradient(90% 80% at 18% 0%, rgb(255 255 255 / 0.5), transparent 60%),
    linear-gradient(140deg, #d8dce2, #adb5c1);
}

.fall-fenster {
  position: absolute;
  left: 50%;
  top: clamp(2rem, 4vw, 3rem);
  translate: -50% 0;
  width: min(46rem, 84%);
  height: calc(100% - clamp(2rem, 4vw, 3rem));
  overflow: hidden;
  border-radius: var(--ecke-karte) var(--ecke-karte) 0 0;
  box-shadow: 0 24px 60px rgb(21 21 21 / 0.22);
  background: #fff;
  /* Größenbezug für die Fahrt unten: 100cqh ist die Fensterhöhe. */
  container-type: size;
}

.fall-fenster img {
  width: 100%;
  height: auto;
  transition: translate 500ms var(--zug);
}

/* Unterm Zeiger fährt die Miniatur die echte Seite in Ruhe von oben
   nach unten durch, wie beim Vorbild · nach dem Verlassen gleitet
   sie an den Anfang zurück. Aufgeklappt rollt man selbst, dann
   fährt nichts. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .fall:not(.fall--offen) .fall-buehne:hover .fall-fenster img {
    animation: fensterfahrt 14s linear 350ms forwards;
  }
}

/* Minus die eigene Bildhöhe plus die Fensterhöhe: hält unten an.
   Steht ausserhalb des Blocks oben, weil auch die Selbstfahrt am
   Telefon sie braucht · Keyframes in einer Media Query gibt es
   nur, solange die Query zutrifft. */
@keyframes fensterfahrt {
  to { translate: 0 calc(-100% + 100cqh); }
}

/* Ohne feinen Zeiger gibt es keinen Hover: dort fährt die Bühne
   von selbst, sobald die Karte im Bild ist (die Klasse setzt das
   Skript) · hinunter und wieder hinauf, in Dauerschleife. Wer
   Bewegung reduziert, sieht das stehende Bild. */
@media (hover: none) and (prefers-reduced-motion: no-preference),
       (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .fall--faehrt:not(.fall--offen) .fall-fenster img {
    animation: fensterfahrt 22s linear 600ms infinite alternate;
  }
}

/* Aufgeklappt: die Bühne wird hoch, das Fenster bekommt Luft nach
   unten und rollt in sich. */
.fall--offen .fall-buehne { height: min(78vh, 46rem); }

.fall--offen .fall-fenster {
  height: calc(100% - 2 * clamp(2rem, 4vw, 3rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--ecke-karte);
}

/* Der Anhänger am Zeiger. Die Lage setzt das Skript über translate,
   Deckkraft und Größe macht das Stylesheet. */
.fall-anhaenger {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--ecke-pille);
  background: #fff;
  color: var(--tinte);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgb(21 21 21 / 0.18);
  pointer-events: none;
  opacity: 0;
  scale: 0.85;
  transition: opacity 180ms var(--zug), scale 180ms var(--zug);
}

.fall-anhaenger i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--akzent-flaeche);
}

@media (hover: hover) and (pointer: fine) {
  .fall-anhaenger { display: inline-flex; }

  .fall-buehne:hover .fall-anhaenger { opacity: 1; scale: 1; }
}

.fall-fuss {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem) 1.75rem;
}

.fall-fach {
  font-family: "Fragment Mono", monospace;
  font-size: 0.8125rem;
  color: var(--akzent-text-hell);
}

.fall-name {
  margin-top: 0.35rem;
  font-size: 1.5rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.fall-satz {
  margin-top: 0.45rem;
  color: var(--grau);
  max-width: 34rem;
}

.fall-plus {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(21 21 21 / 0.16);
  border-radius: 50%;
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
  transition: transform 300ms var(--zug), background-color 200ms ease;
}

.fall-plus:hover { background: rgb(21 21 21 / 0.05); }
.fall-plus:active { transform: scale(0.94); }
.fall-plus[aria-expanded="true"] { transform: rotate(45deg); }

/* Das Plus der Leistungskarten: derselbe Knopf, sitzt in der
   Polsterecke. Steht nach .fall-plus, sonst gewinnt dessen
   display: grid · sichtbar wird es nur am Telefon mit Skript,
   dort schaltet es den Tausch. */
.lkarte-plus {
  display: none;
  position: absolute;
  top: clamp(1.5rem, 2.2vw, 1.9rem);
  right: clamp(1.5rem, 2.2vw, 1.9rem);
}

.werk-bild {
  overflow: hidden;
  border-radius: var(--ecke-karte);
  aspect-ratio: 16 / 10;
  background: #cfd0d5;
}

.werk-fach { margin-top: 1.1rem; }

.werk-name {
  margin-top: 0.35rem;
  font-size: 1.5rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.werk-satz {
  margin-top: 0.45rem;
  color: var(--grau);
  max-width: 30rem;
}

.breiter {
  background: var(--hell-2);
  padding-bottom: clamp(5rem, 11vw, 8.5rem);
}

/* Die Kopfzeile des Zweierblocks: links der Titel, rechts die
   graue Nebenzeile, dazwischen die Haarlinie · wie beim Vorbild. */
.breiter-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 3rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(21 21 21 / 0.14);
}

.breiter-titel {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 430;
  letter-spacing: -0.012em;
}

.breiter-neben { color: var(--grau); font-size: 0.9375rem; }

.breiter-karten {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.breit-karte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  background: var(--karte);
  border-radius: var(--ecke-karte);
  overflow: hidden;
}

.breit-karte .werk-bild { border-radius: 0; }

.breit-fuss { padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem) 1.75rem; }

.breit-fuss .werk-fach { margin-top: 0; }

/* Die eine volle Breitkarte: Bühne links, Text daneben mittig.
   Unter 64rem stapelt sie wie gehabt. Steht nach den Grundregeln,
   damit die Richtung die Spalten-Vorgabe von oben schlägt. */
@media (min-width: 64rem) {
  .breit-karte--voll { flex-direction: row; align-items: stretch; }

  .breit-karte--voll .werk-bild {
    width: 60%;
    flex: none;
    aspect-ratio: 16 / 10;
  }

  .breit-karte--voll .breit-fuss {
    flex: 1;
    display: grid;
    align-content: center;
    padding: clamp(2rem, 4vw, 3.5rem);
  }

  .breit-karte--voll .werk-name {
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    max-width: 16em;
  }

  .breit-karte--voll .werk-satz { max-width: 34rem; }
}

/* Die violette Probekarte von früher ist der vollen Vorführkarte
   gewichen · der Weg zum offenen Pflegebereich ist der Klick auf
   die Karte selbst. */

/* Die kleine Pflege-Bühne auf der linken Karte. Ein nachgebauter
   Pflegebereich samt Mini-Seite, alle Maße in cqw, damit das Ganze
   wie ein Bild mitskaliert. Der Ablauf liegt in Keyframes mit
   Prozentfenstern auf EINER gemeinsamen Dauer und startet unterm
   Zeiger · ohne feinen Zeiger und bei Ruhewunsch steht die Bühne
   ruhig im Ausgangszustand. */
.pflege-spiel {
  container-type: inline-size;
  display: grid;
  place-items: center;
}

.pflege-spiel-fenster {
  width: 86%;
  background: #fff;
  border-radius: 2cqw;
  box-shadow: 0 3cqw 8cqw rgb(21 21 21 / 0.18);
  overflow: clip;
}

.pflege-spiel-kopf {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 2cqw 3cqw;
  border-bottom: 1px solid rgb(21 21 21 / 0.08);
  font-family: "Fragment Mono", monospace;
  font-size: 2cqw;
  color: var(--grau);
}

.pflege-spiel-kopf i {
  width: 1.6cqw;
  height: 1.6cqw;
  border-radius: 50%;
  background: var(--akzent-flaeche);
}

.pflege-spiel-teilung {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

.pflege-spiel-form { padding: 2.6cqw 3cqw 3cqw; }

.pflege-spiel-name {
  font-family: "Fragment Mono", monospace;
  font-size: 1.8cqw;
  color: var(--grau);
}

.pflege-spiel-feld {
  position: relative;
  display: grid;
  margin-top: 1cqw;
  margin-bottom: 2.2cqw;
  padding: 1.5cqw 1.8cqw;
  background: var(--hell-1);
  border: 1px solid rgb(21 21 21 / 0.12);
  border-radius: 1.2cqw;
  font-size: 2.5cqw;
  min-height: 5.6cqw;
}

.pflege-spiel-feld > span { grid-area: 1 / 1; white-space: nowrap; }

.pflege-zeit-neu { opacity: 0; }

/* Der Hinweis steht schon im Baum und ist nur zugeschnitten · die
   Tipp-Animation zieht den Schnitt in Stufen auf. */
.pflege-hinweis-text { clip-path: inset(0 100% 0 0); }

.pflege-strich {
  width: 0.35cqw;
  height: 2.8cqw;
  background: var(--tinte);
  opacity: 0;
  justify-self: start;
  align-self: center;
}

.pflege-spiel-knopf {
  position: relative;
  display: inline-grid;
  justify-self: start;
  padding: 1.5cqw 3cqw;
  border-radius: 999px;
  background: var(--tinte);
  color: #fff;
  font-size: 2.2cqw;
  font-weight: 500;
}

.pflege-spiel-knopf > span { grid-area: 1 / 1; text-align: center; }

.pflege-knopf-fertig { opacity: 0; }

/* Die Mini-Seite rechts: Leiste, Platz für den Banner, dunkler
   Kopfbereich mit der Zeitzeile. */
.pflege-spiel-schau {
  position: relative;
  border-left: 1px solid rgb(21 21 21 / 0.08);
  background: var(--hell-1);
  display: grid;
  align-content: start;
  overflow: clip;
}

.pflege-mini-leiste {
  position: relative;
  z-index: 1;
  padding: 1.6cqw 2.4cqw;
  background: var(--nacht);
  color: #f5f5f5;
  font-family: "Fragment Mono", monospace;
  font-size: 1.8cqw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Der Schlitz unter der Leiste: in Ruhe zu (0fr, kein Platz), beim
   Speichern öffnet er sich und der Banner rutscht hinter der Leiste
   hervor · der Kopfbereich darunter wird echt mitgeschoben. */
.pflege-mini-schlitz {
  display: grid;
  grid-template-rows: 0fr;
}

.pflege-mini-banner {
  min-height: 0;
  overflow: clip;
  padding-inline: 2.4cqw;
  background: var(--akzent-flaeche);
  color: var(--auf-akzent);
  font-size: 2cqw;
  font-weight: 500;
  line-height: 2.4;
  translate: 0 -110%;
}

.pflege-mini-held {
  min-height: 16cqw;
  padding: 2.4cqw;
  background: #1d1a16;
  color: #f5f5f5;
}

.pflege-mini-titel {
  font-size: 2.6cqw;
  font-weight: 480;
  letter-spacing: -0.01em;
}

.pflege-mini-zeile {
  display: grid;
  margin-top: 1.2cqw;
  font-size: 1.9cqw;
  color: var(--hell-grau);
}

.pflege-mini-zeile > span { grid-area: 1 / 1; }

.pflege-mini-neu { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Der Ablauf läuft in Dauerschleife, für alle und ohne Zutun.
     Alle Teile hängen an derselben Dauer, die Prozentfenster setzen
     die Reihenfolge: Zeit (8 bis 18), Hinweis (22 bis 44), Speichern
     (48 bis 54), Seite zieht nach (58 bis 66), Halten bis 86, dann
     stellt sich alles weich zurück und die Runde beginnt von vorn. */
  .pflege-spiel-feld--zeit    { animation: pflege-ring-zeit 9s linear infinite; }
  .pflege-zeit-alt            { animation: pflege-zeit-geht 9s linear infinite; }
  .pflege-zeit-neu            { animation: pflege-zeit-kommt 9s linear infinite; }
  .pflege-spiel-feld--hinweis { animation: pflege-ring-hinweis 9s linear infinite; }
  .pflege-hinweis-text        { animation: pflege-tippen 9s linear infinite; }
  .pflege-strich              { animation: pflege-strich-an 9s linear infinite; }
  .pflege-spiel-knopf         { animation: pflege-druck 9s linear infinite; }
  .pflege-knopf-ruhe          { animation: pflege-knopf-geht 9s linear infinite; }
  .pflege-knopf-fertig        { animation: pflege-knopf-kommt 9s linear infinite; }
  .pflege-mini-schlitz        { animation: pflege-schlitz 9s linear infinite; }
  .pflege-mini-banner         { animation: pflege-banner 9s linear infinite; }
  .pflege-mini-alt            { animation: pflege-mini-geht 9s linear infinite; }
  .pflege-mini-neu            { animation: pflege-mini-kommt 9s linear infinite; }

  @keyframes pflege-ring-zeit {
    0%, 8%    { box-shadow: none; border-color: rgb(21 21 21 / 0.12); }
    10%, 16%  { box-shadow: 0 0 0 0.6cqw color-mix(in srgb, var(--akzent-flaeche) 45%, transparent); border-color: var(--akzent-flaeche); }
    20%, 100% { box-shadow: none; border-color: rgb(21 21 21 / 0.12); }
  }

  @keyframes pflege-zeit-geht  { 0%, 13% { opacity: 1; } 17%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
  @keyframes pflege-zeit-kommt { 0%, 13% { opacity: 0; } 17%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }

  @keyframes pflege-ring-hinweis {
    0%, 22%   { box-shadow: none; border-color: rgb(21 21 21 / 0.12); }
    24%, 42%  { box-shadow: 0 0 0 0.6cqw color-mix(in srgb, var(--akzent-flaeche) 45%, transparent); border-color: var(--akzent-flaeche); }
    47%, 100% { box-shadow: none; border-color: rgb(21 21 21 / 0.12); }
  }

  /* Hintippen in Stufen, am Schleifenende wischt der Schnitt den
     Text weich wieder aus. */
  @keyframes pflege-tippen {
    0%, 24%   { clip-path: inset(0 100% 0 0); animation-timing-function: steps(18, end); }
    42%, 88%  { clip-path: inset(0 0 0 0); animation-timing-function: linear; }
    95%, 100% { clip-path: inset(0 100% 0 0); }
  }

  @keyframes pflege-strich-an {
    0%, 21%   { opacity: 0; }
    23%, 44%  { opacity: 1; }
    47%, 100% { opacity: 0; }
  }

  @keyframes pflege-druck {
    0%, 48%   { scale: 1; background: var(--tinte); color: #fff; }
    50%, 52%  { scale: 0.96; }
    54%, 88%  { scale: 1; background: var(--akzent-flaeche); color: var(--auf-akzent); }
    94%, 100% { scale: 1; background: var(--tinte); color: #fff; }
  }

  @keyframes pflege-knopf-geht  { 0%, 49% { opacity: 1; } 53%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
  @keyframes pflege-knopf-kommt { 0%, 49% { opacity: 0; } 53%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }

  /* Schlitz und Rutsch teilen sich dieselben Fenster: erst öffnet
     der Platz, gleichzeitig kommt der Banner hinter der Leiste
     hervor · rückwärts genauso. */
  @keyframes pflege-schlitz {
    0%, 58%   { grid-template-rows: 0fr; animation-timing-function: var(--zug); }
    64%, 86%  { grid-template-rows: 1fr; animation-timing-function: var(--zug); }
    92%, 100% { grid-template-rows: 0fr; }
  }

  @keyframes pflege-banner {
    0%, 58%   { translate: 0 -110%; animation-timing-function: var(--zug); }
    64%, 86%  { translate: 0 0; animation-timing-function: var(--zug); }
    92%, 100% { translate: 0 -110%; }
  }

  @keyframes pflege-mini-geht  { 0%, 62% { opacity: 1; } 66%, 86% { opacity: 0; } 92%, 100% { opacity: 1; } }
  @keyframes pflege-mini-kommt { 0%, 62% { opacity: 0; } 66%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
}

/* Der Weg zur ganzen Werkliste · als eigenes Feld unter dem
   Raster. Der klebende Kopf wandert bis zum Rasterende: stünde
   der Knopf mit im Raster, läge die unterste Indexkachel auf ihm.
   Der Rand nimmt den entfallenen Rasterabstand (3rem) mit auf. */
.arbeiten-alle {
  margin: clamp(5rem, 5vw + 3rem, 6.5rem) 0 0;
  display: flex;
  justify-content: center;
}

/* == 11 · Dunkle Bühnen: Nachweis und Grenzen ======================= */

.buehne {
  background: var(--dunkel);
  color: var(--hell-schrift);
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

.buehne-satz {
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  font-weight: 420;
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 18em;
  text-wrap: balance;
}

.buehne-klein {
  margin-top: 1.5rem;
  max-width: 36rem;
  color: var(--hell-grau);
}

/* Links der kurze Text, rechts die zwei großen Zusagen. */
.nachweis-geteilt {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem 5rem;
  align-items: start;
}

.zusagen-gross {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem;
}

.zusage-gross-satz {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 425;
  letter-spacing: -0.015em;
  line-height: 1.05;
  text-wrap: balance;
}

.zusage-gross-neben {
  margin-top: 0.8rem;
  color: var(--hell-grau);
  font-size: 0.9375rem;
  max-width: 24rem;
}

/* Die Haarlinienzeile darunter. */
.nachweis-zeile {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 3rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.nachweis-zeile-neben { color: var(--hell-grau); font-size: 0.9375rem; }

/* Das Band. Die dunkle Karte steht fest, die Aussagen ziehen dahinter
   endlos vorbei · zeitgetrieben wie das Faktenband, kein Scroll-Bezug.
   Das Skript bremst den Lauf unter dem Zeiger.
   clip, nicht hidden: hidden macht die Kästen zu Scroll-Containern,
   und irgendwann rollt sie etwas an · Textsuche, Ankersprung · und
   das Band stünde schief. */
.stimmen {
  margin-top: 2.5rem;
  display: flex;
  padding-left: var(--feld-rand);
  overflow-x: clip;
}

/* Die stehende Karte deckt die Fahrt ab: Was links ankommt, taucht
   bündig unter ihr ab. */
.stimmen > .stimme--dunkel {
  position: relative;
  z-index: 1;
}

.stimmen-band {
  flex: 1;
  min-width: 0;
  overflow-x: clip;
}

.stimmen-lauf {
  display: flex;
  width: max-content;
}

/* Der führende Abstand je Teil ist zugleich die Naht zwischen den
   beiden Hälften · so bleibt die Lücke beim Anschluss dieselbe wie
   zwischen den Karten. */
.stimmen-teil {
  display: flex;
  gap: 1.25rem;
  padding-left: 1.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  .stimmen-lauf { animation: stimmenlauf 30s linear infinite; }

  /* Minus die halbe Laufbreite ist genau ein Teil · die Kopie steht
     dann da, wo das Original begann. */
  @keyframes stimmenlauf {
    to { transform: translateX(-50%); }
  }
}

.stimme {
  flex: none;
  width: clamp(19rem, 26vw, 24rem);
  background: var(--karte);
  color: var(--tinte);
  border-radius: var(--ecke-karte);
  padding: 1.75rem;
  display: grid;
  align-content: space-between;
  gap: 2.5rem;
  min-height: 15rem;
}

.stimme-satz {
  font-size: 1.35rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

.stimme-neben { color: var(--grau); font-size: 0.9375rem; }

.stimme--dunkel {
  background: #050505;
  color: var(--hell-schrift);
  border: 1px solid rgb(255 255 255 / 0.09);
}

.stimme--dunkel .stimme-neben { color: var(--hell-grau); }

.stimme .netz {
  border: 0;
  padding: 0;
  background: transparent;
  font-size: 0.75rem;
}

/* Der Netzwerk-Reiter. Er zeigt genau die Anfragen, die diese Seite
   wirklich stellt · eine geschönte Liste wäre das Gegenteil des
   Punkts, den der Abschnitt macht. */
.netz {
  background: #1d1d1d;
  border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: var(--ecke-karte);
  padding: 1.1rem 1.25rem;
  font-family: "Fragment Mono", monospace;
  font-size: 0.8125rem;
  color: var(--hell-grau);
}

.netz-kopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 0.9rem;
}

.netz-punkte { display: inline-flex; gap: 5px; }

.netz-punkte i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
}

.netz-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1.25rem;
  padding-block: 0.55rem;
  border-top: 1px solid rgb(255 255 255 / 0.06);
}

.netz-zeile b {
  font-weight: 400;
  color: var(--hell-schrift);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.netz-fuss {
  padding-top: 0.9rem;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  color: var(--akzent-text-dunkel);
}

/* Die Grenzen: ruhig, drei Spalten, kein Schmuck. */
.grenzen { padding-top: clamp(4.5rem, 10vw, 8rem); }

.grenzen-titel {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 420;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.neins {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.nein-zeichen {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.18);
  color: var(--akzent-text-dunkel);
  font-size: 1.1rem;
}

.nein h3 {
  margin-top: 1.1rem;
  font-size: 1.25rem;
  font-weight: 460;
  letter-spacing: -0.008em;
  line-height: 1.25;
}

.nein p {
  margin-top: 0.5rem;
  color: var(--hell-grau);
}

/* == 12 · Preise, Fragen, Schluss =================================== */

.preise {
  background: var(--hell-2);
  padding-block: clamp(5rem, 11vw, 8.5rem);
}

.preise-kopf h2 {
  margin-top: 1.2rem;
  font-size: clamp(2.25rem, 5.4vw, 4.25rem);
  font-weight: 420;
  letter-spacing: -0.015em;
  line-height: 1.0;
  max-width: 15em;
}

.preise-satz {
  margin-top: 1.4rem;
  max-width: 38rem;
  color: var(--grau);
}

.ablauf {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.schritt h3 {
  font-size: 1.0625rem;
  font-weight: 500;
}

.schritt p {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  color: var(--grau);
}

.pakete {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.paket {
  background: var(--karte);
  border-radius: var(--ecke-karte);
  padding: clamp(1.75rem, 2.6vw, 2.25rem);
  min-width: 0;
}

.paket-marken {
  font-family: "Fragment Mono", monospace;
  font-size: 0.8125rem;
  color: var(--grau);
}

.paket h3 {
  margin-top: 1.1rem;
  font-size: 1.6rem;
  font-weight: 450;
  letter-spacing: -0.01em;
}

.paket-betrag {
  margin-top: 0.9rem;
  font-size: clamp(2.4rem, 3.4vw, 3rem);
  font-weight: 420;
  letter-spacing: -0.02em;
  line-height: 1;
}

.paket-ab {
  font-size: 0.5em;
  color: var(--grau);
  font-weight: 460;
  margin-right: 0.15em;
}

.paket-satz {
  margin-top: 0.9rem;
  color: var(--grau);
  min-height: 3.2em;
}

.paket .knopf { margin-top: 1.4rem; }

.paket-zwischen {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(21 21 21 / 0.08);
  font-family: "Fragment Mono", monospace;
  font-size: 0.8125rem;
  color: var(--grau);
}

.paket-punkte {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  font-size: 0.9375rem;
}

.paket-punkte li {
  position: relative;
  padding-left: 1.5rem;
  color: #3d3d3d;
}

.paket-punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 1.6px solid var(--akzent-text-hell);
  border-bottom: 1.6px solid var(--akzent-text-hell);
  transform: rotate(-45deg);
}

/* Name links, Einordnung rechts · eine Zeile, wie beim Vorbild. */
.paket-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.paket-kopf h3 { margin-top: 0; }

.paket-kopf .paket-marken { text-align: right; }

/* Zwei kräftige Karten, eine helle: Der Hauptweg trägt den Stoff
   der Marke, die Auffrischung das ruhige Dunkel. */
.paket--stoff,
.paket--dunkel {
  background: var(--dunkel);
  color: var(--hell-schrift);
}

.paket--stoff {
  background:
    linear-gradient(rgb(8 6 2 / 0.5), rgb(8 6 2 / 0.82)),
    var(--stoff-bild) center / cover no-repeat,
    var(--dunkel);
}

.paket--stoff .paket-marken,
.paket--stoff .paket-ab,
.paket--stoff .paket-satz,
.paket--stoff .paket-zwischen,
.paket--dunkel .paket-marken,
.paket--dunkel .paket-ab,
.paket--dunkel .paket-satz,
.paket--dunkel .paket-zwischen { color: rgb(245 245 245 / 0.72); }

.paket--stoff .paket-zwischen,
.paket--dunkel .paket-zwischen { border-top-color: rgb(255 255 255 / 0.14); }

.paket--stoff .paket-punkte li,
.paket--dunkel .paket-punkte li { color: rgb(245 245 245 / 0.88); }

.paket--stoff .paket-punkte li::before,
.paket--dunkel .paket-punkte li::before {
  border-color: var(--akzent-text-dunkel);
}

.wartung {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem 4rem;
  background: var(--karte);
  border-radius: var(--ecke-karte);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.wartung-kopf h3 {
  font-size: 1.35rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: 22em;
}

.wartung-kopf p {
  margin-top: 0.8rem;
  color: var(--grau);
  max-width: 30rem;
}

.stufen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.stufe {
  border: 1px solid rgb(21 21 21 / 0.1);
  border-radius: var(--ecke-karte);
  padding: 1.4rem;
}

.stufe-name {
  font-family: "Fragment Mono", monospace;
  font-size: 0.8125rem;
  color: var(--grau);
}

.stufe-preis {
  margin-top: 0.5rem;
  font-size: 1.9rem;
  font-weight: 430;
  letter-spacing: -0.015em;
}

/* Die Klasse und kein blosses span: Um die Zahl liegt seit dem
   Anschluss an die Pflegefelder ein eigener Kasten (pflegemarke),
   und ein "span"-Selektor machte die 39 so klein wie das
   "im Monat" daneben. */
.stufe-preis .stufe-neben {
  font-size: 0.9375rem;
  color: var(--grau);
  letter-spacing: 0;
}

.stufe > p:last-child {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  color: var(--grau);
}

.preise-fussnote {
  margin-top: 2.5rem;
  max-width: 46rem;
  font-size: 0.9375rem;
  color: var(--grau);
}

/* Das Fest · Eventseiten
   ----------------------

   Der einzige Abschnitt, der auf einer dunklen Flaeche INNERHALB des
   grauen Grundes liegt. Absicht: Er gehoert nicht in die Paketreihe
   darueber, und eine Buehne ueber die ganze Breite haette eine
   weitere Treppe und einen weiteren Tonwechsel gebraucht. Oben kein
   Polster · das bringt die Preisflaeche mit, wie bei den Fragen
   darunter. */

.fest {
  background: var(--hell-2);
  padding-block: 0 clamp(5rem, 11vw, 8.5rem);
}

.fest-buehne {
  background: var(--dunkel);
  color: var(--hell-schrift);
  border-radius: var(--ecke-buehne);
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2.25rem, 4vw, 3rem);
}

.fest-geteilt {
  display: grid;
  gap: 1.75rem 4rem;
}

@media (min-width: 62rem) {
  .fest-geteilt { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  /* Der Text rechts steht auf der Grundlinie der Ueberschrift, nicht
     an deren Oberkante · sonst haengt die halbe Spalte in der Luft. */
  .fest-neben { align-self: end; }
}

.fest-titel {
  margin-top: 1.1rem;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  font-weight: 440;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.fest-satz {
  max-width: 54ch;
  color: var(--hell-grau);
}

.fest-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.5rem;
}

.fest-nebenknopf {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  color: var(--hell-grau);
  font-size: 0.9375rem;
  text-decoration-color: rgb(166 166 166 / 0.45);
  text-underline-offset: 0.25em;
}
.fest-nebenknopf:hover {
  color: var(--hell-schrift);
  text-decoration-color: currentColor;
}

/* Die vier Angaben als Saetze mit hervorgehobener Zahl, nicht als
   Kennzahlenband mit Ziffer und Etikett darunter · den Block hat jede
   zweite Seite. */
.fest-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  color: var(--hell-grau);
  font-size: 0.9375rem;
}
.fest-zahlen strong { color: var(--hell-schrift); font-weight: 600; }

/* 11rem und nicht 15rem als Mindestmass.
   Mit 15rem passten am Tablet nur zwei Karten in die Reihe, und die
   dritte stand allein darunter · genau die Breite zwischen Telefon
   und Rechner, an der man nicht nachsieht. auto-fit bleibt, damit
   eine vierte Vorlage von allein mitkommt; auf dem Rechner aendert
   die kleinere Zahl nichts, dort teilen sich drei Karten die Reihe
   ohnehin gleichmaessig. */
.fest-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* Weisses Papier auf dunklem Tisch. Keine Schatten, wie ueberall auf
   dieser Seite · die Kante traegt die Karte allein. */
.fest-karte {
  display: block;
  background: var(--karte);
  border-radius: var(--ecke-karte);
  overflow: hidden;
  color: var(--tinte);
  text-decoration: none;
}

/* height: auto ist hier kein Beiwerk.
   Das height-Attribut am Bild (320) wirkt wie CSS height und laesst
   aspect-ratio wirkungslos: Die Karte blieb 320 Punkte hoch, obwohl
   sie nur 357 breit ist, und object-fit schnitt der Zeichnung links
   und rechts die Haelfte weg. Erst mit auto rechnet das Verhaeltnis
   die Hoehe. object-fit bleibt als Netz fuer eine kuenftige Vorschau
   stehen, die nicht 3:2 ist. */
.fest-karte img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--hell-2);
}

.fest-karte-fuss { padding: 0.9rem 1.1rem 1.1rem; }

.fest-karte-fuss h3 {
  font-size: 1.15rem;
  font-weight: 560;
  letter-spacing: -0.02em;
}

/* Der Akzent als Schrift auf hellem Grund · das Flaechengold kaeme
   auf dem weissen Papier nur auf 2,4:1. */
.fest-karte-fuss p {
  margin-top: 0.15rem;
  color: var(--akzent-text-hell);
  font-size: 0.9375rem;
  font-weight: 560;
}

.fest-karte:hover .fest-karte-fuss h3 { text-decoration: underline; }

/*
 * Die Drehung.
 *
 * Sie steht hier und nicht als style-Attribut: Die Domain schickt
 * style-src ohne 'unsafe-inline'. Erst ab drei Karten in einer Reihe ·
 * untereinander gestapelt sahen die gekippten Karten nach Fehler aus,
 * nicht nach Papier. Der Wert bleibt klein: Ab etwa zwei Grad liest
 * die Reihe als Effekt und nicht mehr als abgelegte Einladung.
 */
@media (min-width: 52rem) {
  .fest-karte { transition: rotate 400ms var(--zug), translate 400ms var(--zug); }
  .fest-karte:nth-child(1) { rotate: -1.4deg; }
  .fest-karte:nth-child(2) { rotate:  0.9deg; }
  .fest-karte:nth-child(3) { rotate: -0.6deg; }

  /* Am Zeiger richtet sich die Karte gerade und hebt sich an. */
  .fest-karte:hover,
  .fest-karte:focus-visible { rotate: 0deg; translate: 0 -0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fest-karte { transition: none; }
}

.fest-fussnote {
  max-width: 62ch;
  margin-top: 1.5rem;
  color: var(--hell-grau);
  font-size: 0.9375rem;
}

/* Fragen */

.fragen {
  background: var(--hell-2);
  padding-block: 0 clamp(5rem, 11vw, 8.5rem);
}

.fragen-innen {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 3rem 5rem;
  align-items: start;
}

.fragen-vorzeile {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 425;
  letter-spacing: -0.012em;
  color: #9a9a9a;
  line-height: 1.15;
}

.fragen-kopf h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 425;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 18em;
}

.fragen-liste {
  margin-top: 2.5rem;
  display: grid;
  gap: 0.6rem;
}

/* Jede Frage eine eigene Karte, die Antwort klappt weich auf.
   interpolate-size gibt es noch nicht überall · wo nicht, springt
   die Antwort eben, mehr passiert nicht. */
.frage {
  background: var(--karte);
  border-radius: var(--ecke-karte);
  padding-inline: clamp(1.1rem, 2vw, 1.6rem);
  interpolate-size: allow-keywords;
}

.frage::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 350ms var(--zug), content-visibility 350ms allow-discrete;
}

.frage[open]::details-content { block-size: auto; }

.frage summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding-block: 1.15rem;
  font-size: 1.0625rem;
  font-weight: 480;
  letter-spacing: -0.006em;
  cursor: pointer;
  list-style: none;
}

.frage summary::-webkit-details-marker { display: none; }

.frage-zeichen {
  position: relative;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgb(21 21 21 / 0.2);
  border-radius: 50%;
  transition: transform 300ms var(--zug), background-color 200ms ease;
}

.frage-zeichen::before,
.frage-zeichen::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}

.frage-zeichen::before { width: 0.9rem; height: 1.5px; }
.frage-zeichen::after  { width: 1.5px;  height: 0.9rem; }

.frage[open] .frage-zeichen { transform: rotate(45deg); }

.frage summary:hover .frage-zeichen { background: rgb(21 21 21 / 0.05); }

.frage > p {
  padding-bottom: 1.4rem;
  max-width: 60ch;
  color: var(--grau);
  font-size: 0.9375rem;
}

.frage-zeichen {
  width: 2rem;
  height: 2rem;
}

/* Die Kontaktkarte rechts, sie klebt beim Blättern. */
.fragen-karte {
  position: sticky;
  top: 6rem;
  background: var(--karte);
  border-radius: var(--ecke-karte);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: grid;
  gap: 1.4rem;
  justify-items: start;
}

.fragen-karte > p { color: var(--grau); }

.fragen-person {
  display: flex;
  align-items: flex-end;
  gap: 1.1rem;
  width: 100%;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(21 21 21 / 0.08);
}

/* Das Porträt in echt statt als kleine Münze: das Gesichtsbild,
   gross genug, dass man Eike erkennt. Name und Rolle sitzen unten
   daneben. */
.fragen-person-bild {
  flex: none;
  width: clamp(7.5rem, 42%, 9.5rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--ecke-karte);
  background: color-mix(in srgb, var(--akzent-flaeche) 45%, #fff);
  overflow: clip;
}

.fragen-person-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fragen-person-name { font-weight: 500; }

.fragen-person-rolle { color: var(--grau); font-size: 0.875rem; }

/* Schluss: volle dunkle Fläche. Der Stoff läuft diagonal durch und
   treibt langsam, ein dunkler Schleier darüber hält die Schrift
   lesbar · auch auf dem hellen Gold. */

.schluss {
  position: relative;
  background: var(--dunkel);
  color: var(--hell-schrift);
  overflow: hidden;
}

.schluss-stoff {
  position: absolute;
  inset: -6%;
  background-image:
    linear-gradient(rgb(5 5 5 / 0.5), rgb(5 5 5 / 0.78)),
    var(--stoff-bild);
  background-size: cover;
  background-position: center;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .schluss-stoff {
    animation: stofftreiben 38s ease-in-out infinite alternate;
  }

  @keyframes stofftreiben {
    from { transform: translate3d(0, 0, 0) scale(1.02); }
    to   { transform: translate3d(-2.5%, 2%, 0) scale(1.1); }
  }
}

.schluss-innen {
  position: relative;
  padding-top: clamp(6rem, 12vw, 10rem);
  padding-bottom: 2rem;
}

.schluss-satz {
  margin-top: 1.75rem;
  font-size: clamp(2.4rem, 6vw, 4.75rem);
  font-weight: 420;
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 13em;
  text-wrap: balance;
}

.schluss-klein {
  margin-top: 1.4rem;
  max-width: 34rem;
  color: rgb(245 245 245 / 0.75);
}

/* Die Auftragslage aus dem Pflegebereich · nur da, wenn der
   Schalter an ist und sein Zeitraum gilt. */
.schluss-lage {
  margin-top: 1.1rem;
  max-width: 34rem;
  color: var(--akzent-text-dunkel);
  font-size: 0.9375rem;
}

.schluss-handlung {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Ab mittlerer Breite rückt der Kontaktblock nach rechts,
   der Chip bleibt links stehen · wie beim Vorbild. */
@media (min-width: 64rem) {
  .schluss-satz,
  .schluss-klein,
  .schluss-lage,
  .schluss-handlung,
  .schluss-sozial { margin-left: 32%; }
}

.schluss-sozial {
  margin-top: 1.3rem;
  color: var(--hell-grau);
  font-size: 0.9375rem;
}

.schluss-sozial a { color: inherit; text-decoration: none; }
.schluss-sozial a:hover { color: var(--akzent-text-dunkel); }

.schluss-marke {
  display: block;
  margin-bottom: 0.5rem;
  font-family: "Fragment Mono", monospace;
  font-size: 0.8125rem;
  color: var(--hell-grau);
}

.fuss {
  margin-top: clamp(5rem, 10vw, 8rem);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-top: 2.5rem;
}

.fuss-spalten {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
  gap: 2.5rem 3rem;
}

.fuss-studio {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
}

.fuss-studio a,
.fuss-spalte a {
  text-decoration: none;
  color: rgb(245 245 245 / 0.85);
}

.fuss-studio a:hover,
.fuss-spalte a:hover { color: var(--akzent-text-dunkel); }

.fuss-neben {
  margin-top: 0.6rem;
  color: var(--hell-grau);
  font-size: 0.875rem;
  max-width: 26rem;
}

.fuss-spalte { display: grid; gap: 0.5rem; justify-items: start; align-content: start; }

/* Die große Wortmarke am Grund. */
.fuss-marke {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(4rem, 9vw, 7rem);
}

.fuss-signet {
  width: clamp(2.75rem, 6vw, 4.75rem);
  height: auto;
  flex: none;
}

.fuss-wortmarke {
  font-size: clamp(2.4rem, 7.5vw, 6.25rem);
  font-weight: 425;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.fuss-zeile {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-size: 0.875rem;
  color: var(--hell-grau);
}

.fuss-zeile p { max-width: 34rem; }

/* == 13 · Bewegung, Ruhe, Druck ===================================== */

/* Einblenden beim Erreichen. Ohne JavaScript bleibt alles sichtbar,
   erst html.js versteckt die Kandidaten. */
html.js .auf {
  opacity: 0;
  translate: 0 1.5rem;
}

html.js .auf.sichtbar {
  opacity: 1;
  translate: 0 0;
  transition: opacity 700ms var(--zug), translate 700ms var(--zug);
}

html.js .auf--2.sichtbar { transition-delay: 90ms; }
html.js .auf--3.sichtbar { transition-delay: 180ms; }
html.js .auf--4.sichtbar { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.js .auf {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }

  .faktenband-lauf { animation: none; flex-wrap: wrap; }

  /* Ohne Lauf lässt sich das Stimmenband von Hand rollen · die
     Anschlusskopie wäre dabei doppelter Text, also weg damit. */
  .stimmen-band {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .stimmen-band::-webkit-scrollbar { display: none; }

  .stimmen-teil[aria-hidden="true"] { display: none; }

  .auftakt { display: none !important; }

  html.js .helden-auftritt {
    opacity: 1;
    translate: 0 0;
    transition: none;
    animation: none;
  }

  .menue-liste li { opacity: 1; translate: 0 0; transition: none; }

  .werk-bild img,
  .knopf,
  .knopf-kreis svg,
  .lkarte,
  .lkarte-satz,
  .lkarte-liste,
  .fall-buehne,
  .fall-plus,
  .fall-index a,
  .pille { transition: none; }

  .frage::details-content { transition: none; }

  .schluss-stoff { animation: none; }

  .fall-anhaenger { display: none !important; }
}

/* == 13b · Wischstreifen am Telefon ================================= */

/* Pakete und Stimmen stehen am Telefon nebeneinander in einem
   Snap-Streifen statt untereinander. Die Punkte darunter erzeugt
   das Skript · ohne Skript bleibt der Streifen wischbar, nur ohne
   Anzeige. Punktfarbe in zwei festen Werten (hell und Bühne) ·
   color-mix mit currentColor lieferte am ::before schlicht
   Schwarz, auf der dunklen Bühne also Punkte ohne Kontrast. */
.wisch-punkte {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

.wisch-punkte[hidden] { display: none; }

.wisch-punkte button {
  /* Tippfläche 44 Punkte · der sichtbare Punkt ist kleiner. */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.wisch-punkte button::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgb(21 21 21 / 0.28);
  transition: width 250ms var(--zug), background-color 250ms var(--zug);
}

/* Auf den dunklen Bühnen hell statt Tinte · und auf der Eventfläche,
   die dunkel ist, ohne eine Bühne über die ganze Breite zu sein. */
.buehne .wisch-punkte button::before,
.fest-buehne .wisch-punkte button::before {
  background: rgb(255 255 255 / 0.42);
}

.wisch-punkte button[aria-current="true"]::before {
  width: 1.5rem;
  background: var(--akzent-flaeche);
}

/* Schmalere Fenster. Die Reihenfolge bleibt, die Spalten fallen. */

@media (max-width: 64rem) {
  .leistungen-innen,
  .fragen-innen,
  .arbeiten-innen,
  .nachweis-geteilt { grid-template-columns: minmax(0, 1fr); }

  .leistungen-kopf,
  .arbeiten-kopf { position: static; }

  .fragen-karte { position: static; }

  /* Die Karten stehen direkt darunter, die Sprungliste wäre doppelt. */
  .fall-index { display: none; }

  .pakete { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }

  .wartung { grid-template-columns: minmax(0, 1fr); }

  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .neins { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 45rem) {
  body { font-size: 1rem; }

  /* Die Leistungskarten stapeln sich beim Rollen: jede klebt unter
     der Leiste, die nächste schiebt sich von unten darüber · wie
     beim Vorbild. Die letzte klebt nie, ihr Ende ist zugleich das
     Ende des Stapels. */
  .lkarte {
    position: sticky;
    top: 4.75rem;
    box-shadow: 0 -10px 30px rgb(21 21 21 / 0.07);
  }

  /* Mit Skript zeigt die Karte erst den Satz, der Tipp aufs Plus
     oder die Karte tauscht ihn gegen Liste und Goldfläche · das
     Gegenstück zum Zeiger-Tausch am Rechner. Ohne Skript stehen
     beide untereinander wie bisher. */
  html.js .lkarte-plus { display: grid; }

  html.js .lkarte h3 { padding-right: 3.25rem; }

  html.js .lkarte-wechsel { gap: 0; }

  html.js .lkarte-wechsel > * { grid-area: 1 / 1; }

  html.js .lkarte-satz { align-self: end; }

  html.js .lkarte-liste {
    opacity: 0;
    translate: -1.4rem 0;
    visibility: hidden;
  }

  html.js .lkarte--offen {
    background: var(--akzent-flaeche);
    color: var(--auf-akzent);
  }

  html.js .lkarte--offen h3 { color: var(--auf-akzent); }

  html.js .lkarte--offen .lkarte-satz {
    opacity: 0;
    translate: 0 1.1rem;
  }

  html.js .lkarte--offen .lkarte-liste {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    transition-delay: 90ms, 90ms, 0s;
  }

  html.js .lkarte--offen .lkarte-liste li::before {
    color: color-mix(in srgb, var(--auf-akzent) 75%, transparent);
  }

  html.js .lkarte--offen .lkarte-plus {
    border-color: color-mix(in srgb, var(--auf-akzent) 40%, transparent);
    color: var(--auf-akzent);
  }

  .breiter-karten { grid-template-columns: minmax(0, 1fr); }

  .fall-buehne { height: clamp(15rem, 64vw, 22rem); }

  .fall--offen .fall-buehne { height: min(70vh, 34rem); }

  .fall-fenster { width: 88%; }

  .ablauf { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

  /* Die Pakete als Wischstreifen: eine Karte im Bild, die nächste
     angeschnitten als Einladung. Punkte und Selbstdrehen ergänzt
     das Skript. */
  .pakete {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    max-width: none;
  }

  .pakete::-webkit-scrollbar { display: none; }

  .paket { scroll-snap-align: center; }

  /* Die drei Vorlagen ebenso · untereinander kosteten sie am Telefon
     achthundert Punkte Rollweg fuer einen Hinweis, der zur
     Verkaufsseite fuehren soll. Die Drehung faellt hier ohnehin weg,
     der angeschnittene Nachbar uebernimmt die Einladung. */
  .fest-karten {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .fest-karten::-webkit-scrollbar { display: none; }

  .fest-karte { scroll-snap-align: center; }

  /* Seitlich wartende Karten sähe der Einblende-Beobachter nie ·
     im Streifen sind sie darum sofort da. */
  html.js .pakete .auf { opacity: 1; translate: 0 0; }

  .stufen { grid-template-columns: minmax(0, 1fr); }

  .zusagen-gross { grid-template-columns: minmax(0, 1fr); }

  .stimme { width: min(19rem, 82vw); scroll-snap-align: center; }

  /* Nebeneinander bliebe dem Band nur ein Spalt · also steht die
     dunkle Karte oben und das Band wischt randlos darunter: der
     Endloslauf steht, die Anschlusskopie fällt weg, gerollt wird
     Karte für Karte. Die Punkte ergänzt das Skript. */
  .stimmen { flex-direction: column; gap: 1.25rem; }

  .stimmen-lauf { animation: none; }

  .stimmen-teil[aria-hidden="true"] { display: none; }

  .stimmen-band {
    margin-left: calc(-1 * var(--feld-rand));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .stimmen-band::-webkit-scrollbar { display: none; }

  .fuss-spalten { grid-template-columns: minmax(0, 1fr); }

  .fuss-zeile { flex-direction: column; }

  .menue-wort,
  .marke > span:not(.marke-signet) { font-size: 0.875rem; }
}

/* Am Telefon liegt die Tippfläche der Fragen großzügiger. */
@media (pointer: coarse) {
  .frage summary { padding-block: 1.5rem; }
}

/* Druck: helle Seite, keine Leisten, keine Bänder. */
@media print {
  body::after { display: none; }

  .auftakt,
  .kopfleiste,
  .menue,
  .faktenband,
  .fall-anhaenger,
  .fall-plus,
  .stoff-leinwand,
  .vorhang-stoff { display: none; }

  .vorhang,
  .buehne,
  .schluss-buehne,
  .paket--voll {
    background: #fff;
    color: #111;
  }

  .vorhang { min-height: auto; }
}

/* == 14 · Unterseiten =============================================== */

/* Werkliste, Fallseiten, Impressum, Datenschutz, Danke. Sie nutzen
   teile/kopf.php und teile/fuss.php: heller Grund, dieselbe sticky
   Kopfleiste, unten der dunkle Fussblock. Die Startseite hat das
   alles in ihren eigenen Abschnitten. */

body.unterseite { background: var(--hell-1); }

body.unterseite main {
  /* Platz für die schwebende Leiste · sie nimmt im Fluss keine
     Höhe ein. */
  padding-top: clamp(6.5rem, 10vw, 8.5rem);
}

/* Der dunkle Fussblock, dieselbe Ordnung wie der Fuss im
   Schlussabschnitt der Startseite, ohne Stoff und ohne Bühne.
   Die .fuss-*-Regeln aus Abschnitt 12 gelten hier mit. */
.fussblock {
  margin-top: clamp(5rem, 10vw, 8rem);
  background: var(--dunkel);
  color: var(--hell-schrift);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

/* -- Impressum und Datenschutz: schmale Lesespalte ------------------ */

.recht-innen { max-width: 50rem; }

.recht-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.25rem;
  color: var(--akzent-text-hell);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.recht-zurueck:hover { text-decoration: underline; }

.recht h1 {
  font-size: clamp(2.5rem, 6vw, 3.9rem);
  font-weight: 420;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 0 1.75rem;
}

.recht h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 490;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 2.75rem 0 0.8rem;
}

.recht h3 {
  font-size: 1.05rem;
  font-weight: 550;
  margin: 1.75rem 0 0.5rem;
}

.recht p,
.recht li,
.recht dd,
.recht address {
  line-height: 1.62;
  margin: 0 0 0.8rem;
}

.recht address { font-style: normal; }

.recht ul {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.recht a { color: var(--akzent-text-hell); }

/* Der hervorgehobene Kasten (etwa "keine Cookies") als helle
   Karte mit Bühnenecke. */
.recht-kasten {
  background: var(--karte);
  border: 1px solid rgb(21 21 21 / 0.08);
  border-radius: var(--ecke-buehne);
  padding: 1.5rem 1.75rem;
  margin: 1.75rem 0;
}

.recht-kasten :last-child { margin-bottom: 0; }

.recht-stand {
  margin-top: 2.5rem;
  color: var(--grau);
  font-size: 0.875rem;
}

/* -- Die Dankeseite ------------------------------------------------- */

.danke {
  max-width: 44rem;
  text-align: center;
}

.danke h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 420;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 1.25rem 0 1rem;
}

.danke p { line-height: 1.6; margin: 0 0 1rem; }

.danke-zeichen {
  display: inline-grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--akzent-flaeche);
  color: var(--auf-akzent);
  font-size: 1.75rem;
}

/* Der Rand-Knopf der Dankeseite · Gegenstück zu knopf--tinte. */
.knopf-linie {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding-inline: 1.4rem;
  border: 1px solid rgb(21 21 21 / 0.35);
  border-radius: var(--ecke-pille);
  color: var(--tinte);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 160ms var(--zug), border-color 200ms ease;
}

.knopf-linie:hover { border-color: var(--tinte); }
.knopf-linie:active { transform: scale(0.97); }