/* Werkschau: Wand, Schrift, Raster. Rollen statt fester Farben, damit Tag, Nacht und Filmraum ohne Sonderfall stimmen. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  /* Wand und Flächen */
  --wand: #f2f3f1;
  --sockel: #e8eae7;
  --tafel: #fbfbfa;
  /* Schrift */
  --schrift: #15181a;
  --schrift-2: #4a5155;
  --schrift-3: #60676b;
  /* Linien */
  --linie: rgb(21 24 26 / .13);
  --linie-stark: rgb(21 24 26 / .5);
  /* Der eine Farbton: Glut aus dem Logo. Nur das W und der Punkt für „live“. */
  --punkt: #e2500f;
  /* Bedienung */
  --knopf-fl: #15181a;
  --knopf-fl-hover: #2d3337;
  --knopf-sch: #f2f3f1;
  --fokus: #15181a;
  --fehler: #a3271a;
  /* Geräte-Rahmen */
  --geraet: #15181a;
  --geraet-kante: rgb(21 24 26 / .16);
  /* Filmraum: bleibt in beiden Fassungen dunkel */
  --nacht: #0f1214;
  --nacht-2: #181c1f;
  --auf-nacht: #eef0ee;
  --auf-nacht-2: #a8afb2;
  --linie-nacht: rgb(238 240 238 / .16);
  /* Tiefe: Werke hängen vor der Wand */
  --schatten: 0 2rem 3.5rem -2rem rgb(21 24 26 / .3), 0 .35rem 1rem -.35rem rgb(21 24 26 / .14);
  --schatten-klein: 0 1rem 2rem -1.25rem rgb(21 24 26 / .28);

  /* Gewichte: große Zeilen bestimmt statt leicht, die Zusage in einer Zeile stark */
  --g-zeile: 460;
  --g-titel: 500;
  --f: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: clamp(1.25rem, 5vw, 5rem);
  --breite: 90rem;
  --seitenrand: max(var(--rand), (100vw - var(--breite)) / 2);
  --kopfhoehe: 4.25rem;
  --raum-1: .5rem;
  --raum-2: 1rem;
  --raum-3: clamp(1.25rem, 2vw, 1.75rem);
  --raum-4: clamp(2rem, 3.6vw, 3.25rem);
  --raum-5: clamp(3.25rem, 7vw, 6rem);
  --raum-6: clamp(5rem, 11vw, 10rem);

  /* Bewegung: ankommen und nachgeben mit --aus, Kamera und Blende mit --hin-her */
  --aus: cubic-bezier(.16, 1, .3, 1);
  --hin-her: cubic-bezier(.77, 0, .175, 1);
  --kurz: 160ms;
  --mittel: 320ms;
  --lang: 900ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wand: #121517;
    --sockel: #181c1f;
    --tafel: #1e2326;
    --schrift: #eceeed;
    --schrift-2: #b6bdc0;
    --schrift-3: #929a9e;
    --linie: rgb(236 238 237 / .14);
    --linie-stark: rgb(236 238 237 / .55);
    --punkt: #ff6a1f;
    --knopf-fl: #eceeed;
    --knopf-fl-hover: #d5d9d8;
    --knopf-sch: #121517;
    --fokus: #eceeed;
    --fehler: #ff9c8c;
    --geraet: #2a3034;
    --geraet-kante: rgb(236 238 237 / .2);
    --nacht: #0a0c0d;
    --nacht-2: #14181a;
    --schatten: 0 2rem 3.5rem -2rem rgb(0 0 0 / .7), 0 .35rem 1rem -.35rem rgb(0 0 0 / .5);
    --schatten-klein: 0 1rem 2rem -1.25rem rgb(0 0 0 / .65);
  }
}

/* Der dunkle Raum kehrt die Rollen um. Bauteile fragen nur Rollen ab und stimmen deshalb auch hier. */
.raum-nacht {
  --wand: var(--nacht);
  --sockel: var(--nacht-2);
  --tafel: var(--nacht-2);
  --schrift: var(--auf-nacht);
  --schrift-2: var(--auf-nacht-2);
  --schrift-3: #8e9699;
  --linie: var(--linie-nacht);
  --linie-stark: rgb(238 240 238 / .6);
  --punkt: #ff6a1f;
  --knopf-fl: var(--auf-nacht);
  --knopf-fl-hover: #d5d9d8;
  --knopf-sch: var(--nacht);
  --fokus: var(--auf-nacht);
  --geraet: #2a3034;
  --geraet-kante: rgb(238 240 238 / .2);
  --schatten: 0 2rem 3.5rem -2rem rgb(0 0 0 / .75), 0 .35rem 1rem -.35rem rgb(0 0 0 / .5);
  background: var(--wand);
  color: var(--schrift);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopfhoehe) + 1rem); scroll-padding-bottom: 1rem; scrollbar-color: var(--schrift-3) transparent; }
body {
  margin: 0;
  background: var(--wand);
  color: var(--schrift);
  font: 400 clamp(1.0625rem, 1rem + .25vw, 1.1875rem)/1.55 var(--f);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  accent-color: var(--schrift);
  caret-color: var(--schrift);
  overflow-x: clip;
}
::selection { background: var(--schrift); color: var(--wand); }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, textarea, select { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Schriftstufen: groß, bestimmt und eng gesetzt. Text ruhig und normal. */
h1, .zeile-1 {
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.75rem);
  font-weight: var(--g-zeile);
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h2, .zeile-2 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  font-weight: var(--g-zeile);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}
h3, .zeile-3 {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem);
  font-weight: var(--g-titel);
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h4 { font-size: 1em; font-weight: 600; line-height: 1.35; }
/* Lange deutsche Wörter dürfen brechen, die Hauptzeile trennt erst ab 14 Zeichen. */
h1, h2, h3 { overflow-wrap: break-word; }
h1 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; }
p { text-wrap: pretty; }
.vorspann { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); line-height: 1.45; letter-spacing: -.005em; color: var(--schrift-2); max-width: 36em; }
.gross { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); font-weight: 400; line-height: 1.32; letter-spacing: -.015em; max-width: 26em; }
.klein { font-size: .9375rem; line-height: 1.5; color: var(--schrift-2); }
.lesen { max-width: 68ch; }
.lesen > * + * { margin-top: 1em; }
.ziffern { font-variant-numeric: tabular-nums; }
/* Angabe: die zweite Stimme der Seite. Klein, gesperrt, Ziffern in fester Breite. Für Maß, Platzhalter, Zähler und Schaubild; das Zustandswort (.stand) ist gleich gesetzt. */
.angabe { font-size: .8125rem; font-weight: 500; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
strong { font-weight: 600; }

/* Sprungmarke */
.sprung { position: absolute; left: var(--rand); top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--knopf-fl); color: var(--knopf-sch); text-decoration: none; transition: top var(--kurz) ease; }
.sprung:focus { top: .5rem; }
.nur-lesegeraet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Abschnitte: jeder setzt den Seitenrand selbst, Flächen laufen von Kante zu Kante. */
main { display: block; }
.abschnitt { padding: var(--raum-6) var(--seitenrand); }
/* Folgen zwei Wand-Abschnitte aufeinander, entfällt der obere Abstand des zweiten. Nach Sockel oder Filmraum bleibt er. */
.abschnitt:not(.sockel, .raum-nacht) + .abschnitt:not(.sockel, .raum-nacht) { padding-top: 0; }
.sockel { background: var(--sockel); }
.abschnitt-kopf { max-width: 52rem; margin-bottom: var(--raum-5); }
.abschnitt-kopf > * + * { margin-top: var(--raum-3); }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

@media (prefers-contrast: more) {
  :root { --schrift-2: var(--schrift); --schrift-3: var(--schrift); --linie: var(--linie-stark); }
}

/* Druck und PDF: ohne Kopf, Fuß und Schluss, alles eingeblendet. */
@media print {
  .kopf, .fuss, .abschluss, .sprung, .wf-leiste, .wf-sprung { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-auf] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; }
  /* Gefüllter Knopf, Linie unter der Zusage und Streichlinien drucken auch ohne „Hintergrundgrafiken“. */
  .knopf:not(.knopf-linie), .zl-zusage, .gegen-weg span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .js .gegen-weg span { background-size: 100% 1px !important; }
}

/* Bauteile der Werkschau: Kopf, Knöpfe, Zustand, Schild, Fenster, Telefon, Fakten, Fragen, Schluss, Fuß, Einblenden. */

.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* Kopf: Wandfläche mit leichter Durchsicht, damit Werke darunter durchlaufen. Die Linie erscheint erst beim Scrollen. */
.kopf-wache { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.kopf {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  min-height: var(--kopfhoehe); padding: 0 var(--seitenrand);
  background: color-mix(in srgb, var(--wand) 84%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mittel) ease;
}
/* Über dem Filmraum schaltet der Kopf ohne Übergang um, sonst ist die Schrift kurz unlesbar. */
.kopf[data-wechsel] :is(.kopf-nav li a, .knopf) { transition: none; }
.kopf[data-gescrollt] { border-bottom-color: var(--linie); }
.kopf-marke { margin-right: auto; padding: .6rem 0; color: var(--schrift); text-decoration: none; }
.kopf-marke .logo { width: 8.75rem; transition: transform 160ms var(--aus); }
.kopf-marke:active .logo { transform: scale(.97); }
.logo { display: block; height: auto; }
.logo-w { fill: var(--punkt); }
.kopf-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.kopf-nav > ul { display: flex; gap: clamp(1.1rem, 1.9vw, 2rem); }
.kopf-nav > ul > li > a, .unter-text > span {
  display: block; padding: .6rem 0; font-size: .975rem; color: var(--schrift-2); text-decoration: none; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .4rem) / 0 1px no-repeat;
  transition: color var(--kurz) ease, background-size var(--mittel) var(--aus);
}
.kopf-nav > ul > li > a[aria-current], .unter-text[aria-current] > span { color: var(--schrift); background-size: 100% 1px; }
@media (hover: hover) and (pointer: fine) { .kopf-nav > ul > li > a:hover, .unter-text:hover > span { color: var(--schrift); background-size: 100% 1px; } }
.kopf-menue { display: none; }
@media (prefers-reduced-transparency: reduce) { .kopf { background: var(--wand); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Aufklappfelder: der Link führt immer zur Seite, der Knopf daneben klappt das Feld auf (01-kern.js). Ohne Skript gibt es
   weder Knopf noch Feld, die Navigation bleibt eine Zeile aus Links. Das Feld ist beim Schließen aus dem Fluss (display),
   damit versteckte Links weder Tab-Stopp noch Trefferfläche sind. */
.nav-unter { display: flex; align-items: center; }
.unter-knopf, .unter, .nav-unter-nur > .unter-text { display: none; }
.js .unter-knopf { display: inline-flex; }
.js .nav-unter-nur > a { display: none; }
.unter-knopf {
  align-items: center; justify-content: center; width: 1.6rem; height: 2.75rem; margin-left: -.2rem; padding: 0;
  background: none; border: 0; color: var(--schrift-2); transition: color var(--kurz) ease;
}
.unter-knopf .icon { width: .75rem; height: .75rem; transition: transform var(--mittel) var(--aus); }
.unter-knopf[aria-expanded="true"] .icon { transform: rotate(180deg); }
.unter-text { gap: .4rem; width: auto; height: auto; margin-left: 0; font: inherit; color: var(--schrift-2); }
.unter-text .icon { margin-top: .1rem; }
.nav-unter[data-offen] > a, .nav-unter[data-offen] > .unter-knopf { color: var(--schrift); }
.nav-unter[data-offen] > a, .nav-unter[data-offen] .unter-text > span { color: var(--schrift); background-size: 100% 1px; }
@media (hover: hover) and (pointer: fine) { .unter-knopf:hover { color: var(--schrift); } }
.unter-liste a { position: relative; display: grid; gap: .2rem; padding: .85rem 0 .95rem; border-top: 1px solid var(--linie); color: var(--schrift); text-decoration: none; }
.unter-name { font-size: 1.0625rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.unter-satz { font-size: .875rem; line-height: 1.4; color: var(--schrift-2); }
/* Die Zeile, die dran ist, zieht ihre Glutlinie durch: das Licht der Marke zeigt den Weg (wie im Wegweiser). */
.unter-liste a::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--punkt); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--hin-her); }
.unter-liste a:focus-visible::after, .unter-liste a[aria-current]::after { transform: scaleX(1); }
.unter-liste a:active .unter-name { transform: translateX(2px); }
.unter-name { transition: transform var(--kurz) var(--aus); }
@media (hover: hover) and (pointer: fine) { .unter-liste a:hover::after { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .unter-liste a::after, .unter-knopf .icon { transition: none; } }

/* Ab 80rem (vorher 70rem: mit sieben Einträgen und den Knöpfen der Felder wird der Kopf sonst zu eng, das Logo schrumpft): Feld unter dem Kopf. Leistungen (zwölf) füllt die Breite des Kopfs, Fachbereiche (drei) hängt unter seinem Wort.
   Der Kopf ist so hoch wie die Navigation, damit das Feld bündig anschließt und der Zeiger nie durch eine Lücke fällt. */
@media (min-width: 80rem) {
  .kopf-nav { align-self: stretch; align-items: stretch; }
  .kopf-nav > .knopf { align-self: center; }
  .kopf-nav > ul > li { display: flex; align-items: center; }
  .nav-unter-schmal { position: relative; }
  .unter {
    position: absolute; top: 100%; z-index: 1; background: var(--wand); border-bottom: 1px solid var(--linie-stark);
    opacity: 0; transform: translateY(-.4rem);
    transition: opacity 120ms ease, transform 120ms ease, display 120ms allow-discrete;
  }
  .unter-breit { left: 0; right: 0; padding: var(--raum-4) var(--seitenrand) var(--raum-4); }
  .unter-schmal { left: -1.25rem; width: 25rem; padding: .5rem 1.25rem 1.25rem; border: 1px solid var(--linie-stark); border-top: 0; }
  .js .nav-unter[data-offen] > .unter { display: block; opacity: 1; transform: none; transition: opacity 200ms var(--aus), transform 240ms var(--aus), display 200ms allow-discrete; }
  @starting-style { .js .nav-unter[data-offen] > .unter { opacity: 0; transform: translateY(-.4rem); } }
  .unter-breit .unter-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.75rem, 3vw, 3rem); }
  .unter-fuss { margin-top: var(--raum-2); }
  .unter-fuss .textlink { min-height: 2.75rem; }
}
@media (min-width: 90rem) { .unter-breit .unter-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 80rem) and (prefers-reduced-motion: reduce) {
  .unter, .js .nav-unter[data-offen] > .unter { transform: none; transition: opacity 120ms ease, display 120ms allow-discrete; }
}

@media (forced-colors: active) {
  .unter { border: 1px solid CanvasText; }
  .unter-liste a { border-top-color: CanvasText; }
  .unter-liste a::after { background: Highlight; }
}

/* Unter 80rem wird die Navigation zum Menü. Ohne Skript bleibt sie als umbrechende Zeile sichtbar. */
@media (max-width: 79.99rem) {
  .kopf { flex-wrap: wrap; row-gap: 0; }
  .kopf-nav { flex-wrap: wrap; padding-bottom: .75rem; }
  .kopf-nav > ul { flex-wrap: wrap; }
  .js .kopf-menue {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .25rem; margin-right: -.25rem;
    background: none; border: 0; font-weight: 500;
  }
  .js .kopf-menue .menue-zu, .js .kopf[data-offen] .kopf-menue .menue-auf { display: none; }
  .js .kopf[data-offen] .kopf-menue .menue-zu { display: inline; }
  .js .kopf-nav {
    position: fixed; inset: var(--kopfhoehe) 0 auto 0; z-index: 49;
    height: calc(100vh - var(--kopfhoehe)); height: calc(100dvh - var(--kopfhoehe));
    flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 2rem;
    padding: 2rem var(--seitenrand) max(2rem, env(safe-area-inset-bottom)); overflow-y: auto;
    background: var(--wand);
    visibility: hidden; opacity: 0; transform: translateY(-.5rem);
    transition: opacity var(--mittel) ease, transform var(--mittel) var(--aus), visibility 0s var(--mittel);
  }
  .js .kopf[data-offen] .kopf-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .kopf-nav > ul { flex-direction: column; flex-wrap: nowrap; gap: 0; width: 100%; }
  .js .kopf-nav > ul > li > a, .js .unter-text > span { padding: .55rem 0; font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: var(--g-zeile); letter-spacing: -.03em; line-height: 1.15; color: var(--schrift); background: none; }
  .js .kopf-nav > .knopf { align-self: stretch; justify-content: center; min-height: 3.5rem; font-size: 1.0625rem; }
  .js .kopf-menue:active { opacity: .6; }
  html[data-menue] { overflow: hidden; }
  /* Im Menü stehen die Listen zugeklappt unter ihrem Wort und öffnen sich im Fluss. */
  .js .nav-unter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .js .nav-unter-nur > .unter-text { grid-column: 1 / -1; display: inline-flex; justify-content: space-between; align-items: center; width: 100%; min-height: 3.5rem; text-align: left; }
  .js .unter-knopf:not(.unter-text) { width: 3rem; height: 3rem; margin: 0; justify-content: flex-end; }
  .js .unter-knopf .icon { width: 1rem; height: 1rem; }
  .js .unter-text .icon { width: 1.25rem; height: 1.25rem; margin-top: 0; }
  .js .unter { grid-column: 1 / -1; padding: .25rem 0 1.25rem; }
  .js .nav-unter[data-offen] > .unter { display: block; }
  .js .unter-liste a { min-height: 3.25rem; padding: .7rem 0; }
  .js .unter-name { font-size: 1.1875rem; }
  .js .unter-satz { font-size: .9375rem; }
  .js .unter-fuss { margin-top: .25rem; }
}

/* Knöpfe: eine Fläche, ein Pfeil. Geben beim Drücken nach. */
.knopf {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 3.25rem; padding: .85em 1.4em;
  background: var(--knopf-fl); color: var(--knopf-sch); border: 0;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.15; text-decoration: none; white-space: nowrap;
  transition: background-color var(--kurz) ease, transform var(--kurz) var(--aus);
}
.knopf .icon { width: 1.05em; height: 1.05em; transition: transform 220ms var(--aus); }
.knopf:active { transform: scale(.97); }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf-klein { min-height: 2.75rem; padding: .55em 1.05em; font-size: .95rem; }
.knopf-gross { min-height: 3.75rem; padding: 1em 1.7em; font-size: 1.125rem; }
/* In der Aktionszeile darf ein Knopf umbrechen, bevor er aus dem Bild läuft (größere Grundschrift am Handy). */
.aktionen .knopf { white-space: normal; }
.knopf-linie { background: transparent; color: var(--schrift); box-shadow: inset 0 0 0 1px var(--linie-stark); transition: background-color var(--kurz) ease, color var(--kurz) ease, transform var(--kurz) var(--aus); }
.textlink {
  display: inline-flex; align-items: center; gap: .5em; min-height: 2.75rem;
  font-weight: 500; text-decoration: underline; text-decoration-color: var(--linie-stark);
  transition: text-decoration-color var(--kurz) ease;
}
.textlink .icon { transition: transform 220ms var(--aus); }
.textlink:active .icon { transform: translateX(.25em); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--knopf-fl-hover); }
  .knopf:hover .icon, .textlink:hover .icon { transform: translateX(.25em); }
  .knopf-linie:hover { background: var(--knopf-fl); color: var(--knopf-sch); }
  .textlink:hover { text-decoration-color: currentColor; }
}

/* Zustand: Punkt plus Wort. Rot heißt live, der Ring heißt Entwurf, Graphit heißt eigenes Produkt. */
.stand { display: inline-flex; align-items: center; gap: .5em; font-size: .8125rem; font-weight: 500; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--schrift-2); white-space: nowrap; }
.stand::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--schrift-3); }
.stand-live::before { background: var(--punkt); }
.stand-entwurf::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--schrift-3); }
.stand-eigen::before { background: var(--schrift); }

/* Schild: Name, Angabe, Zustand. Sitzt am Werk. */
.schild { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .1rem 1rem; margin-top: 1rem; font-size: .9375rem; line-height: 1.4; }
.schild-name { grid-column: 1; font-weight: 600; }
.schild-text { grid-column: 1 / -1; color: var(--schrift-2); }
.schild .stand { grid-column: 2; grid-row: 1; }

/* Browserfenster: Leiste mit Adresse, darunter die Sicht. In der langen Fassung fährt die Seite durch. */
/* Bildnis: Leons Porträt im Passepartout, gehängt wie eine Fotografie. Schwarzweiß, damit die Farbe den gezeigten Arbeiten
   bleibt. Die Breite des Bildes (--bild-b) setzt der Ort, an dem es hängt. */
.bildnis { width: fit-content; padding: calc(var(--bild-b) * .11) calc(var(--bild-b) * .11) calc(var(--bild-b) * .15); background: var(--tafel); box-shadow: 0 0 0 1px var(--geraet-kante), var(--schatten); }
.bildnis img { display: block; width: var(--bild-b); height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); box-shadow: 0 0 0 1px var(--linie); }

.fenster { overflow: clip; border-radius: .4rem; background: var(--tafel); box-shadow: 0 0 0 1px var(--geraet-kante), var(--schatten); }
.fenster-leiste { display: flex; align-items: center; height: 1.9rem; padding: 0 .8rem; border-bottom: 1px solid var(--linie); font-size: .75rem; line-height: 1; color: var(--schrift-3); }
.fenster-adresse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fenster-sicht { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sockel); container-type: size; }
.fenster-sicht img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fenster-lang .fenster-sicht img { height: auto; object-fit: fill; }

.telefon { width: var(--telefon-b, 13rem); padding: .4rem; border-radius: 1.9rem; background: var(--geraet); box-shadow: 0 0 0 1px var(--geraet-kante), var(--schatten); }
.telefon-sicht { aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 1.5rem; background: var(--sockel); container-type: size; }
.telefon-sicht img { width: 100%; height: auto; }

/* Durchlauf: langsam hinunter und wieder hinauf, mit Halt an beiden Enden. Ruht außerhalb des Bildes und beim Überfahren. */
@keyframes lauf { 0%, 7% { transform: translateY(0); } 93%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
@media (prefers-reduced-motion: no-preference) {
  [data-lauf] img { animation: lauf var(--lauf-dauer, 48s) var(--hin-her) infinite alternate; }
  [data-lauf]:not([data-ruht]) img { will-change: transform; }
  [data-lauf][data-ruht] img, [data-halt] [data-lauf] img { animation-play-state: paused; }
  @media (hover: hover) and (pointer: fine) { [data-lauf]:hover img { animation-play-state: paused; } }
}

/* Werk: ein Fenster (oder Telefon) mit seinem Schild. */
.werk { margin: 0; }
.werk > a { display: block; text-decoration: none; }

/* Kundenfrage: so spricht der Kunde sein Anliegen aus, darunter die Antwort. */
.kundenfrage { max-width: 24em; font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.antwort { margin-top: var(--raum-3); max-width: 38em; font-size: clamp(1.1rem, 1.05rem + .35vw, 1.3rem); line-height: 1.5; color: var(--schrift-2); }

/* Fakten: Angabe links, Wert rechts. */
.fakten { border-top: 1px solid var(--linie-stark); }
.fakt { display: grid; grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--linie); }
.fakt dt { padding-top: .18em; font-size: .875rem; color: var(--schrift-3); }
.fakt dd { font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .fakt { grid-template-columns: 1fr; gap: .15rem; } }

/* Fragen: natives details, klappt weich auf, wo der Browser es kann. */
:root { interpolate-size: allow-keywords; }
.fragen { max-width: 54rem; border-top: 1px solid var(--linie-stark); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-size: clamp(1.1rem, 1.05rem + .3vw, 1.3rem); font-weight: 500; line-height: 1.3; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary .icon { margin-top: .15em; width: 1.1em; height: 1.1em; transition: transform 240ms var(--aus); }
.fragen details[open] summary .icon { transform: rotate(45deg); }
.fragen summary:active .icon { scale: .9; }
.fragen details p { max-width: 62ch; padding: 0 2.5rem 1.5rem 0; color: var(--schrift-2); }
@media (prefers-reduced-motion: no-preference) {
  .fragen details::details-content { block-size: 0; overflow: clip; transition: block-size 280ms var(--aus), content-visibility 280ms allow-discrete; }
  .fragen details[open]::details-content { block-size: auto; }
}

/* Kopf einer Unterseite. Die Zeilen steigen per CSS, damit sie nicht auf das Skript warten. */
.seitenkopf { padding: clamp(3rem, 8vw, 6.5rem) var(--seitenrand) var(--raum-5); }
@media (prefers-reduced-motion: no-preference) {
  .seitenkopf > .vorspann { animation: zeile-steigt 900ms var(--aus) both; }
}
.seitenkopf h1 { max-width: 16em; }
.seitenkopf .vorspann { margin-top: var(--raum-3); }
.pfad { margin-bottom: var(--raum-3); font-size: .875rem; color: var(--schrift-3); }
.pfad ol { display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
.pfad li + li::before { content: "/"; margin-right: .6rem; color: var(--linie-stark); }
.pfad a { display: inline-block; padding: .8rem 0; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pfad a:hover { color: var(--schrift); text-decoration: underline; } }

/* Schluss: ein Satz, der Ansprechpartner, der eine Schritt. */
.abschluss { padding: var(--raum-6) var(--seitenrand); border-top: 1px solid var(--linie); }
.abschluss h2 { max-width: 14em; font-size: clamp(2.3rem, 1.3rem + 4.4vw, 5.25rem); line-height: 1; letter-spacing: -.035em; }
.abschluss-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; margin-top: var(--raum-5); }
.abschluss-person { max-width: 34rem; }
.abschluss-person > * + * { margin-top: .4rem; }

/* Fuß: Sockel der Wand. */
.fuss { padding: var(--raum-5) var(--seitenrand) 2rem; background: var(--sockel); }
.fuss-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 3rem; padding-bottom: var(--raum-4); border-bottom: 1px solid var(--linie); }
.fuss-marke .logo { width: clamp(14rem, 9rem + 16vw, 24rem); }
.fuss-satz { max-width: 26rem; color: var(--schrift-2); }
@media (min-width: 48rem) {
  .fuss-kopf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; }
  .fuss-marke { grid-column: span 2; }
  .fuss-satz { max-width: none; }
}
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem 3rem; padding: var(--raum-4) 0; }
.fuss-raster li a { display: inline-block; padding: .6rem 0; font-size: .975rem; color: var(--schrift-2); text-decoration: none; transition: color var(--kurz) ease; }
@media (hover: hover) and (pointer: fine) { .fuss-raster li a:hover { color: var(--schrift); text-decoration: underline; } }
.fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); font-size: .875rem; color: var(--schrift-3); }

/* Einblenden: ohne Skript ist alles sichtbar. Mit Skript steigt Text aus der Ruhe, Bilder öffnen sich als Blende, Werke werden hell. */
.js [data-auf] { opacity: 0; transform: translateY(1.25rem); transition: opacity 700ms var(--aus), transform var(--lang) var(--aus); }
.js [data-auf].ist-da { opacity: 1; transform: none; }
.js [data-auf="blende"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--aus); }
.js [data-auf="blende"].ist-da { clip-path: inset(0 0 0 0); }
.js [data-auf="licht"] { transform: none; filter: brightness(.55); transition: opacity 500ms var(--aus), filter 900ms var(--aus); }
.js [data-auf="licht"].ist-da { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-auf], .js [data-auf="blende"], .js [data-auf="licht"] { transform: none; clip-path: none; filter: none; transition: opacity 240ms ease; }
  .js [data-auf="blende"] { opacity: 0; }
  .js [data-auf="blende"].ist-da { opacity: 1; }
}

/* Durchlauf anhalten: wer die bewegte Aufnahme nicht möchte, hält sie am Schild an. */
.lauf-schalter { grid-column: 1 / -1; justify-self: start; min-height: 2.75rem; padding: 0; background: none; border: 0; font-size: .875rem; color: var(--schrift-2); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: .22em; }
@media (hover: hover) and (pointer: fine) { .lauf-schalter:hover { color: var(--schrift); } }
@media (prefers-reduced-motion: reduce) { .lauf-schalter { display: none; } }

/* Belegte Zahl, die einmal nach Zeit hochzählt (01-kern.js) und dann steht. Der unsichtbare Endwert hält Breite und Grundlinie,
   die zählende Zahl liegt darüber; Lesegeräte bekommen den festen Wert. */
.zahl-hoch { display: inline-grid; font-variant-numeric: tabular-nums; }
.zahl-hoch::before { content: attr(data-hoch); visibility: hidden; grid-area: 1 / 1; }
.zahl-hoch > [data-hoch-wert] { grid-area: 1 / 1; text-align: right; }


/* Startseite: Hängung im ersten Bild, Leistungen mit Vorschau, Grundsätze, Ablauf. */

/* Erstes Bild: links die Zusage, rechts der Wegweiser (11-auftakt.css). Die Zeile bemisst sich an ihrer Spalte und bricht nie mitten im Gedanken. */
.buehne {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--seitenrand) clamp(4rem, 9vh, 7rem);
  overflow-x: clip;
}
.buehne-text { container-type: inline-size; }
/* Zwei Sinnzeilen: die breitere füllt rund 92 Prozent der Spalte, bis zur Obergrenze der Hauptzeile. */
/* In niedrigen Fenstern nimmt die Höhe Maß. Die Untergrenze gibt nach, wenn die Spalte schmaler ist als die Zeile. */
.buehne-text h1 { font-size: clamp(min(2.6rem, 15cqi), min(15cqi, 11.5vh), 5.75rem); }
.buehne-text h1 .zl { display: block; width: fit-content; white-space: nowrap; }
.buehne-text h1 .zl:nth-child(2) { --z: 1; }
/* Die eine gezeichnete Linie der Hauptzeile: unter der Zusage, sonst nirgends. */
.zl-zusage { padding-bottom: .1em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.buehne-text .vorspann { margin-top: var(--raum-3); max-width: 30em; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.buehne-text .aktionen { margin-top: var(--raum-4); }


@keyframes zeile-rein { from { opacity: 0; transform: translateY(1.25rem); } }
/* Der Vorspann steigt, ohne zu blenden: der Satz, der das Angebot erklärt, ist vom ersten Bild an lesbar. */
@keyframes zeile-steigt { from { transform: translateY(1.25rem); } }
@keyframes blende-auf { from { clip-path: inset(-3rem -3rem 100% -3rem); } to { clip-path: inset(-3rem -3rem -6rem -3rem); } }
@keyframes hell { from { filter: brightness(.55); } }
@keyframes linie-zieht { from { background-size: 0 1px; } }
@keyframes mass-zieht { from { transform: scaleX(0); } }
@keyframes blendet { from { opacity: 0; } }
/* Aufbau des ersten Bildes, gut anderthalb Sekunden, nichts blockiert: Zeile, Vorspann, Aktionen, Linie, dann der Wegweiser. */
@media (prefers-reduced-motion: no-preference) {
  .buehne-text > .vorspann { animation: zeile-steigt 900ms var(--aus) backwards; }
  .buehne-text > .aktionen { animation: zeile-rein 900ms var(--aus) 420ms backwards; }
  .zl-zusage { animation: linie-zieht 800ms var(--hin-her) 900ms backwards; }
}

@media (max-width: 55.99rem) { .buehne { padding-top: 2.5rem; } }

/* Leistungen: Zeilen der Etappen auf der Startseite (Raster in 19-etappen.css). */
.leistung {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.75rem) 0; border-bottom: 1px solid var(--linie);
  text-decoration: none;
}
.leistung-titel { grid-column: 1; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); font-weight: var(--g-zeile); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; transition: color var(--mittel) ease; }
.leistung-text { grid-column: 1; margin-top: .45rem; max-width: 34em; font-size: 1rem; line-height: 1.5; color: var(--schrift-2); }
.leistung-pfeil { grid-column: 2; grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; transition: transform 260ms var(--aus); }
.leistung:active .leistung-titel { transform: translateX(2px); }
/* Haarlinie unter der Zeile: sie zieht sich unter dem Zeiger oder im Fokus von links durch. */
.leistung::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--schrift); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--hin-her); }
@media (prefers-reduced-motion: reduce) { .leistung::after { transition: none; } }
@media (hover: hover) and (pointer: fine) {
  .leistung:hover .leistung-pfeil { transform: translateX(.4rem); }
}

/* Grundsätze: die Zusage groß, darunter was es nicht gibt und was stattdessen gilt. Die Linie zieht sich beim Eintreten durch. */
/* Der Kernsatz in der Größe der Hauptzeile. Er füllt sich beim Scrollen Wort für Wort (10-bewegung.css). */
.grundsaetze h2 { max-width: 12em; font-size: clamp(2.5rem, 1.3rem + 5vw, 5.75rem); line-height: 1; letter-spacing: -.035em; }
.gegen { width: 100%; margin-top: var(--raum-5); border-collapse: collapse; }
.gegen th { padding: 0 2rem .8rem 0; border-bottom: 1px solid var(--linie-stark); text-align: left; font-size: .875rem; font-weight: 500; color: var(--schrift-3); }
.gegen td { width: 50%; padding: 1.15rem 2rem 1.15rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; text-wrap: pretty; }
.gegen-weg { font-size: clamp(1.15rem, 1.05rem + .55vw, 1.5rem); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; color: var(--schrift-3); }
.gegen-weg span { background: linear-gradient(currentColor, currentColor) 0 56% / 100% 1px no-repeat; }
.js .gegen-weg span { background-size: 0 1px; transition: background-size var(--lang) var(--hin-her) 250ms; }
.js tr.ist-da .gegen-weg span { background-size: 100% 1px; }
.gegen-statt { font-weight: 500; }
@media (max-width: 47.99rem) {
  .gegen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .gegen, .gegen tbody, .gegen tr, .gegen td { display: block; width: auto; }
  .gegen tbody { border-top: 1px solid var(--linie-stark); }
  .gegen td { padding-right: 0; }
  .gegen-weg { padding-bottom: .35rem; border-bottom: 0; }
  .gegen-statt { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .js .gegen-weg span { background-size: 100% 1px; transition: none; } }

/* Ablauf: links die Überschrift, rechts die Schritte an einer Linie, die mit dem Lesen wächst. */
.ablauf-start { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.ablauf-kopf { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
.ablauf-kopf > * + * { margin-top: var(--raum-3); }
/* Links sammeln sich die Ergebnisse: jeder gelesene Schritt lässt seines stehen. Ohne Skript oder ohne :has() steht alles da. */
.ergebnisse { max-width: 27rem; margin-top: var(--raum-4); border-top: 1px solid var(--linie-stark); counter-reset: posten; }
.ergebnisse li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; align-items: center; column-gap: .5rem; min-height: 2.75rem; padding: .35rem 0; border-bottom: 1px solid var(--linie); font-size: .9375rem; line-height: 1.3; }
.ergebnisse li::before { counter-increment: posten; content: counter(posten); font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--schrift-3); }
.ergebnis-name { transition: color var(--mittel) ease 300ms; }
.ergebnis-stand { display: inline-flex; align-items: center; gap: .45em; font-size: .8125rem; font-weight: 600; white-space: nowrap; transition: opacity var(--mittel) ease 300ms, transform 600ms var(--aus) 300ms; }
@supports selector(:has(a)) {
  .js .ergebnis-name { color: var(--schrift-3); }
  .js .ergebnis-stand { opacity: 0; transform: translateX(-.6rem); }
  .js .ablauf-start:has(.schritt:nth-child(1).ist-da) .ergebnisse li:nth-child(1) span,
  .js .ablauf-start:has(.schritt:nth-child(2).ist-da) .ergebnisse li:nth-child(2) span,
  .js .ablauf-start:has(.schritt:nth-child(3).ist-da) .ergebnisse li:nth-child(3) span,
  .js .ablauf-start:has(.schritt:nth-child(4).ist-da) .ergebnisse li:nth-child(4) span,
  .js .ablauf-start:has(.schritt:nth-child(5).ist-da) .ergebnisse li:nth-child(5) span,
  .js .ablauf-start:has(.schritt:nth-child(6).ist-da) .ergebnisse li:nth-child(6) span { color: var(--schrift); opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ergebnis-name, .ergebnis-stand { transition: none; } }
.schritte { position: relative; padding-left: 2.5rem; }
.schritte::before, .schritte::after { content: ""; position: absolute; left: .3rem; top: .7rem; bottom: .7rem; width: 1px; background: var(--linie); }
.schritte::after { background: var(--schrift); transform: scaleY(var(--p, 1)); transform-origin: top; }
.schritt { position: relative; padding-bottom: var(--raum-4); }
.schritt:last-child { padding-bottom: 0; }
.schritt::before {
  content: ""; position: absolute; left: -2.5rem; top: .5em; z-index: 1; width: .65rem; height: .65rem; border-radius: 50%;
  background: var(--schrift); transition: background-color var(--mittel) ease 300ms, box-shadow var(--mittel) ease 300ms;
}
.js .schritt:not(.ist-da)::before { background: var(--wand); box-shadow: inset 0 0 0 1.5px var(--schrift-3); }
.schritt p { margin-top: .45rem; max-width: 34em; color: var(--schrift-2); }
.schritt .schritt-ergebnis { margin-top: .7rem; font-size: 1rem; font-weight: 600; color: var(--schrift); }
/* In niedrigen Fenstern passt die Spalte samt Liste nicht unter den Kopf: dann läuft sie nicht mit. */
@media (max-height: 45.99rem) { .ablauf-kopf { position: static; } }
@media (max-width: 55.99rem) {
  .ablauf-start { grid-template-columns: minmax(0, 1fr); }
  .ablauf-kopf { position: static; }
  .ergebnisse { display: none; }
}

/* Kennzahlen unter dem Werkfilm: Zahl, Haarlinie, Wort. Die Linie zieht sich beim Eintreten von der Zahl zum Wort. */
.zahlen-liste { --zw: clamp(3.5rem, 1.9rem + 6vw, 6rem); display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); max-width: 80rem; }
.zahlen-liste li { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto; align-items: end; column-gap: clamp(1rem, 3vw, 2.5rem); }
.zahlen-wert { font-size: var(--zw); font-weight: var(--g-zeile); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahlen-vor { margin-right: .18em; font-size: .36em; font-weight: var(--g-titel); letter-spacing: -.02em; color: var(--schrift-2); }
.zahlen-linie { align-self: end; height: 1px; margin-bottom: calc(var(--zw) * .125); background: var(--linie-stark); transform-origin: 0 50%; }
.zahlen-text { align-self: end; margin-bottom: calc(var(--zw) * .1); font-size: clamp(1.25rem, 1.05rem + 1vw, 2rem); font-weight: var(--g-titel); line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.js .zahlen-liste li .zahlen-linie { transition: transform 900ms var(--hin-her) 200ms; }
.js .zahlen-liste li:not(.ist-da) .zahlen-linie { transform: scaleX(0); }
.zahlen-stand { margin-top: var(--raum-4); color: var(--schrift-3); }
@media (max-width: 47.99rem) {
  .zahlen-liste li { grid-template-columns: auto minmax(1rem, 1fr); row-gap: .6rem; }
  .zahlen-linie { margin-bottom: calc(var(--zw) * .12); }
  .zahlen-text { grid-column: 1 / -1; margin-bottom: 0; white-space: normal; }
}
@media (forced-colors: active) { .zahlen-linie { background: CanvasText; } }
@media (prefers-reduced-motion: reduce) { .js .zahlen-liste li .zahlen-linie { transition: none; } .js .zahlen-liste li:not(.ist-da) .zahlen-linie { transform: none; } }

/* Alles aus einer Hand: sechs Punkte, ungleich gehängt. Jeder zeigt ein echtes Bild, darunter Titel, ein Satz und die Bereiche als Wege. */
.hand-wand { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-5) 0; }
.hand-punkt { min-width: 0; }
.hand-punkt h3 { margin-top: var(--raum-3); font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.4rem); font-weight: var(--g-zeile); line-height: 1.08; letter-spacing: -.03em; }
.hand-satz { margin-top: .5rem; max-width: 32em; color: var(--schrift-2); }
.hand-ki { margin-top: .8rem; color: var(--schrift-2); }
.hand-bereiche { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.hand-werk .tafel img { aspect-ratio: 16 / 10; }
@media (min-width: 48rem) {
  .hand-wand { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); }
  .hand-punkt:nth-child(even) { margin-top: var(--raum-5); }
}
@media (min-width: 62rem) {
  .hand-wand { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hand-punkt:nth-child(1) { grid-column: 1 / 8; }
  .hand-punkt:nth-child(2) { grid-column: 8 / 13; margin-top: var(--raum-6); }
  .hand-punkt:nth-child(3) { grid-column: 1 / 6; }
  .hand-punkt:nth-child(4) { grid-column: 6 / 13; margin-top: var(--raum-5); }
  .hand-punkt:nth-child(5) { grid-column: 1 / 8; }
  .hand-punkt:nth-child(6) { grid-column: 8 / 13; margin-top: var(--raum-6); }
}

/* Alles abgeben: die Digitalabteilung komplett, Preis individuell verhandelt. Text links, rechts die Wand aus einer Hand. */
.abgeben { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); }
.abgeben-text .vorspann { margin-top: var(--raum-3); }
.abgeben-fakten { margin-top: var(--raum-4); }
.abgeben-preis { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem); font-weight: var(--g-zeile); line-height: 1.15; letter-spacing: -.02em; }
.abgeben-text .aktionen { margin-top: var(--raum-4); }
.abgeben-ki { margin-top: .8rem; color: var(--schrift-2); }
@media (min-width: 62rem) {
  .abgeben { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
}


/* Werkfilm: Rundgang durch die gebauten Websites. Standard ist die ruhige Fassung, die Bühne schaltet das Skript über data-film ein. */

/* ---------- Ruhige Fassung: ohne Skript, bei reduzierter Bewegung, auf schmalen oder niedrigen Bildschirmen ---------- */
.werkfilm {
  --wf-luecke: clamp(2rem, 5vw, 5rem);
  --wf-tel: clamp(8.5rem, 21vw, 12.5rem);
  --wf-ueber: calc(var(--wf-tel) * .46);
  /* Scrollweg je Kapitel im Film. Gedeckelt, damit hohe Bildschirme nicht mehr Weg brauchen als ein Laptop. */
  --wf-schritt: min(135vh, 76rem);
  padding-top: var(--raum-5);
}
.werkfilm-kopf { margin-left: var(--seitenrand); margin-right: var(--seitenrand); }

/* Für die Tastatur: erscheint bei Fokus im Freiraum über der Szene, ohne die Seite zu verschieben. */
.wf-sprung {
  position: absolute; z-index: 4; margin-left: var(--seitenrand); translate: 0 calc(-100% - .5rem);
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem;
  background: var(--knopf-fl); color: var(--knopf-sch); font-size: .95rem; font-weight: 500; text-decoration: none;
  opacity: 0; pointer-events: none; transition: opacity var(--kurz) ease;
}
.wf-sprung:focus { opacity: 1; pointer-events: auto; }

/* Die Sprungziele stehen im Quelltext vor der Bühne (dort werden sie für den Film an ihre Scroll-Stelle gesetzt).
   Ruhig rückt jedes per order direkt vor sein Kapitel. */
.wf-n1 { --n: 0; } .wf-n2 { --n: 1; } .wf-n3 { --n: 2; } .wf-n4 { --n: 3; } .wf-n5 { --n: 4; } .wf-n6 { --n: 5; }
.wf-zahl-1 { --wf-zahl: 1; } .wf-zahl-2 { --wf-zahl: 2; } .wf-zahl-3 { --wf-zahl: 3; } .wf-zahl-4 { --wf-zahl: 4; } .wf-zahl-5 { --wf-zahl: 5; } .wf-zahl-6 { --wf-zahl: 6; }
.wf-szene { display: flex; flex-direction: column; }
.wf-buehne { display: contents; }
.wf-anker { order: calc(var(--n) * 2); }
.wf-kapitel { order: calc(var(--n) * 2 + 1); }
.wf-leiste, .wf-dunkel, .wf-detail, .wf-zug, .wf-faden { display: none; }

/* Ein Kapitel: am Handy das Telefon groß in der Mitte, darunter der Text. */
.wf-kapitel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); margin-top: var(--raum-6); padding: 0 var(--seitenrand); }
.wf-kapitel.wf-n1 { margin-top: 0; }
.wf-werk { order: -1; }
.wf-haengung { position: relative; display: grid; justify-items: center; }
.wf-kamera { display: none; }
.wf-kapitel .telefon { --telefon-b: min(64vw, 16rem); }

.wf-text { max-width: 34rem; }
.wf-wo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: .55rem; }
.wf-satz { margin-top: var(--raum-2); color: var(--schrift-2); }
.wf-hinweise { margin-top: var(--raum-3); }
.wf-hinweis { display: grid; gap: .15rem; padding: .7rem 0; border-top: 1px solid var(--linie); }
.wf-hinweis-titel { font-weight: 500; line-height: 1.35; }
.wf-weiter { margin-top: var(--raum-1); padding-top: .6rem; border-top: 1px solid var(--linie); }

/* Ab 40rem hängt das Browserfenster, das Telefon tritt rechts unten davor. */
@media (min-width: 40rem) {
  .wf-haengung { display: block; justify-items: normal; padding: 0 var(--wf-ueber) 1.75rem 0; }
  .wf-kamera { display: block; position: relative; }
  .wf-kamera .fenster-sicht { aspect-ratio: 16 / 11; }
  .wf-hand { position: absolute; right: 0; bottom: 0; z-index: 2; }
  .wf-kapitel .telefon { --telefon-b: var(--wf-tel); }
}
/* Ab 56rem steht der Text links neben dem Werk. */
@media (min-width: 56rem) {
  .wf-kapitel { grid-template-columns: minmax(0, .46fr) minmax(0, 1fr); column-gap: var(--wf-luecke); align-items: start; }
  .wf-werk { order: 0; }
}
/* Neben dem Text ist das Fenster bis 75rem schmal: das Telefon bleibt kleiner, damit es nicht über das Fenster hinausragt. */
@media (min-width: 56rem) and (max-width: 74.99rem) { .werkfilm { --wf-tel: clamp(8.5rem, 16vw, 12.5rem); } }

/* Wo Bewegung erlaubt ist, fährt die Aufnahme mit dem Scrollen durch ihren Rahmen (--p setzt 01-kern.js am Kapitel).
   Nur am Bildschirm: im Druck steht jede Aufnahme an ihrem Anfang. */
@media screen and (prefers-reduced-motion: no-preference) {
  .werkfilm:not([data-film]) .wf-kapitel :is(.fenster-sicht, .telefon-sicht) img {
    transform: translateY(calc(max(100cqh - 100%, -240cqh) * clamp(0, (var(--p, 0) - .2) * 1.7, 1)));
  }
}
/* Zwischenzustand beim Größenwechsel: Die Bedingung des Films gilt schon, das Skript hat noch nicht umgeschaltet.
   Die Szene hat dann bereits die Höhe des Films, damit die Seite (Safari) nicht hinter dem Rundgang landet.
   Dieselbe Bedingung steht in 02-werkfilm.js, data-bereit setzt das Skript beim Start. */
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 56rem) and (min-height: 46rem) and (min-aspect-ratio: 6/5),
  screen and (prefers-reduced-motion: no-preference) and (min-width: 70rem) and (min-height: 38rem) and (min-aspect-ratio: 6/5) {
  .werkfilm[data-bereit]:not([data-film]) .wf-szene { min-height: calc(var(--wf-zahl) * var(--wf-schritt) + 100dvh - var(--kopfhoehe)); }
}

/* ---------- Film: angeheftete Bühne in einer hohen Szene. Größen aus dem Bildschirm, damit nichts pro Bild gemessen wird. ---------- */
.werkfilm[data-film] {
  --wf-oben: clamp(1rem, 3.5vh, 2.5rem);
  --wf-leiste-h: 6rem;
  --wf-text-fr: .46fr;
  --wf-anteil: .685; /* Anteil der Werkspalte an der Breite: 1 / (1 + .46) */
  --wf-hoch: calc(100dvh - var(--kopfhoehe) - var(--wf-oben) - var(--wf-leiste-h) - 1.5rem);
  --wf-breit: calc((100vw - 2 * var(--seitenrand) - var(--wf-luecke) - 1.1rem) * var(--wf-anteil));
  --wf-tel: min(12.5rem, var(--wf-hoch) * .29);
  --wf-sicht-max: calc(var(--wf-hoch) - 3.65rem);
  --wf-fenster-b: min(var(--wf-breit) - var(--wf-ueber), var(--wf-sicht-max) * 1.85);
  --wf-sicht-h: min(var(--wf-fenster-b) * .74, var(--wf-sicht-max));
}
.werkfilm[data-film] .wf-szene { display: block; position: relative; height: calc(var(--wf-zahl) * var(--wf-schritt) + 100dvh - var(--kopfhoehe)); }
/* Sprungziel eines Kapitels: kurz nach seinem Auftritt (html hat scroll-padding-top von Kopfhöhe plus 1rem). */
.werkfilm[data-film] .wf-anker { position: absolute; left: 0; top: calc((var(--n) + .2) * var(--wf-schritt) + 1rem); width: 1px; height: 1px; }
.werkfilm[data-film] .wf-buehne {
  position: sticky; top: var(--kopfhoehe); height: calc(100dvh - var(--kopfhoehe));
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--wf-leiste-h); row-gap: 1.5rem;
  padding: var(--wf-oben) var(--seitenrand) 0; overflow: clip;
}
.werkfilm[data-film] .wf-kapitel {
  grid-area: 1 / 1; grid-template-columns: minmax(0, var(--wf-text-fr)) minmax(0, 1fr); column-gap: var(--wf-luecke);
  align-content: center; align-items: stretch; min-height: 0; margin: 0; padding: 0; visibility: hidden;
}
.werkfilm[data-film] .wf-kapitel[data-da] { visibility: visible; }
/* Bilder nicht spielender Kapitel liegen außerhalb ihres Rahmens, damit sie erst mit dem Kapitel laden (02-werkfilm.js lädt
   das nächste und das angesteuerte vor). */
.werkfilm[data-film] .wf-kapitel:not([data-da]) img { translate: 0 400vh; }
/* Das Einblenden der ruhigen Fassung übernimmt hier der Film. */
.werkfilm[data-film] .wf-buehne [data-auf] { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }

/* Text: oben bündig mit dem Fenster, der Link sitzt auf seiner Grundlinie. Dazwischen erscheinen die Hinweise. */
.werkfilm[data-film] .wf-text { display: flex; flex-direction: column; max-width: none; padding-bottom: 1.75rem; }
.werkfilm[data-film] .wf-weiter { margin-top: auto; }
.werkfilm[data-film] .wf-hinweise { margin-bottom: var(--raum-2); }
.werkfilm[data-film] .wf-hinweis-text { display: none; }
@media (min-width: 75rem) and (min-height: 50rem) { .werkfilm[data-film] .wf-hinweis-text { display: block; } }
/* Schmale Bühne: der Text bekommt mehr Anteil. Niedrige Bühne: zwei Hinweise, flachere Leiste. */
@media (max-width: 79.99rem) { .werkfilm[data-film] { --wf-text-fr: .54fr; --wf-anteil: .649; } }
/* Im Film rücken die Marken ein Stück von der Linie ab, damit die Angabe des Abspielkopfs darüber Platz hat. */
.werkfilm[data-film] .wf-marke { padding-top: 1.5rem; }
/* Niedrige Bühne (Laptop-Fenster): flachere Leiste, dafür Luft zwischen Kopfzeile und Werk. */
@media (max-height: 45.99rem) {
  .werkfilm[data-film] { --wf-leiste-h: 4rem; --wf-oben: 1.75rem; }
  .werkfilm[data-film] .wf-text { padding-bottom: .5rem; }
  .werkfilm[data-film] .wf-hinweis:nth-child(n+3) { display: none; }
  .werkfilm[data-film] .wf-marke { padding-top: 1.3rem; padding-bottom: .55rem; }
  .werkfilm[data-film] .wf-marke img { width: 3.25rem; }
}

/* Werk: Fenster so breit wie die Spalte und so hoch, wie die Bühne erlaubt. Das Telefon hängt rechts unten davor. */
.werkfilm[data-film] .wf-werk { order: 0; align-self: start; display: grid; justify-items: end; transform-origin: 50% 35%; }
.werkfilm[data-film] .wf-haengung { width: calc(var(--wf-fenster-b) + var(--wf-ueber)); }
.werkfilm[data-film] .wf-kamera { transform-origin: 50% 0; }
.werkfilm[data-film] .wf-kamera .fenster-sicht { aspect-ratio: auto; height: var(--wf-sicht-h); }
/* Abdunkeln über eine Fläche statt über einen Filter auf den großen Aufnahmen. */
.werkfilm[data-film] .wf-dunkel { display: block; position: absolute; inset: 0; border-radius: .4rem; background: var(--nacht); opacity: 0; pointer-events: none; }
.werkfilm[data-film] .wf-hand .wf-dunkel { border-radius: 1.9rem; }
.werkfilm[data-film] .wf-detail { display: block; position: absolute; z-index: 1; right: 0; top: -.75rem; width: 38%; opacity: 0; }
/* Füllt das Werk die Bühne bis oben, sitzt die Detailaufnahme im Fenster statt darüber: so bleibt Luft unter der Kopfzeile. */
@media (max-height: 55.99rem) { .werkfilm[data-film] .wf-detail { top: .5rem; } }
/* Hinweislinie: die Haarlinie über einem Hinweis zieht sich dunkel durch (.wf-zug), läuft durch den Zwischenraum der Spalten
   über das Werk (.wf-faden) und endet als Ring an der Detailaufnahme. Lage und Längen setzt das Skript beim Messen.
   Fehlt der Platz über dem Werk (data-faden="zug" statt "ganz"), zieht sich nur der Strich über dem Hinweis. */
.werkfilm[data-film] .wf-hinweis { position: relative; }
.werkfilm[data-film] .wf-kapitel[data-faden] .wf-zug { display: block; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--schrift); transform: scaleX(0); transform-origin: 0 50%; }
.werkfilm[data-film] .wf-kapitel[data-faden="ganz"] .wf-faden { display: block; position: absolute; left: 0; top: 0; pointer-events: none; }
.wf-faden i { position: absolute; background: var(--schrift); transform: scale(0); transform-origin: 0 0; }
.wf-faden i:nth-child(2) { transform-origin: 0 100%; }
.wf-faden b { position: absolute; box-sizing: border-box; width: .65rem; height: .65rem; border: 1.5px solid var(--schrift); border-radius: 50%; opacity: 0; }
/* Belegte Zahlen: feste Breite, damit beim Hochzählen keine Zeile springt (die Breite misst das Skript). */
.werkfilm[data-film] .wf-hinweis-text [data-zahl] { display: inline-block; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Eigene Ebenen nur, solange die Bühne im Bild steht (data-im-bild setzt 01-kern.js) und das Kapitel spielt. */
.werkfilm[data-film] .wf-buehne[data-im-bild] .wf-kapitel[data-da] :is(.wf-werk, .wf-kamera, .wf-hand, .wf-detail, .wf-kamera img, .wf-hand img) { will-change: transform, opacity; }

/* Filmleiste: Haarlinie mit dem Gesamtfortschritt, darunter je Kapitel ein Bild mit Namen als Sprungmarke. */
.werkfilm[data-film] .wf-leiste { display: block; grid-row: 2; position: relative; z-index: 3; background: var(--wand); }
.wf-fortschritt { display: block; height: 1px; background: var(--linie); }
.wf-fortschritt span { display: block; height: 100%; background: var(--schrift); transform: scaleX(0); transform-origin: 0 50%; }
.wf-buehne[data-im-bild] :is(.wf-fortschritt span, .wf-kopf) { will-change: transform; }
/* Abspielkopf: ein Punkt am Ende der gefüllten Linie, daneben unter der Linie das laufende Kapitel.
   Die Angabe bleibt ganz in der Leiste, damit sie nie über einem aufsteigenden Werk liegt. */
.wf-kopf { position: absolute; left: 0; top: 0; height: 1px; pointer-events: none; }
.wf-kopf::before { content: ""; position: absolute; left: -.25rem; top: calc(.5px - .25rem); width: .5rem; height: .5rem; border-radius: 50%; background: var(--schrift); }
.wf-kopf .angabe { position: absolute; left: .5rem; top: .35rem; color: var(--schrift); }
/* Flache Leiste: die Angabe sitzt mittig zwischen Linie und Markenbild. */
@media (max-height: 45.99rem) { .wf-kopf .angabe { top: .25rem; } }
.wf-leiste ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* Ruhende Marken nehmen nur ihr Bild zurück. Die Schrift bleibt in voller Deckkraft lesbar, die laufende Marke ist dunkler. */
.wf-marke {
  display: flex; align-items: center; gap: .85rem; min-height: 2.75rem; padding: .85rem 1.25rem .85rem 0;
  font-size: .9375rem; line-height: 1.25; color: var(--schrift-2); text-decoration: none; hyphens: manual;
  transition: color var(--mittel) ease;
}
.wf-marke span { min-width: 0; overflow-wrap: break-word; }
.wf-marke img { flex: none; width: clamp(3.5rem, 5.5vw, 5rem); height: auto; aspect-ratio: 16 / 10; object-fit: cover; opacity: .45; box-shadow: 0 0 0 1px var(--geraet-kante); transition: opacity var(--mittel) ease, transform var(--kurz) var(--aus); }
.wf-marke[aria-current] { color: var(--schrift); }
.wf-marke[aria-current] img { opacity: 1; }
.wf-marke:active img { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .wf-marke:hover { color: var(--schrift); }
  .wf-marke:hover img { opacity: 1; }
}
/* Schmale Bühne: kleinere Marken. Steht nach den Grundregeln, damit sie greift. */
@media (max-width: 69.99rem) {
  .wf-marke { gap: .6rem; padding-right: .75rem; font-size: .875rem; }
  .wf-marke img { width: 3.25rem; }
}

/* Filmraum: der eine dunkle Raum der Werkschau. Erklärfilm als Leinwand, Kamerafahrt als Projektion, dazu die Seite /cinemura/. */

/* Der Raum. Die Leinwand ist so hoch, dass sie ganz ins Bild passt, und nie breiter als gut ein Drittel der Wand. */
.filmraum {
  --film-b: max(14rem, min(30rem, 36vw, calc((100dvh - var(--kopfhoehe) - 8rem) * 9 / 16)));
  padding: var(--raum-6) var(--seitenrand);
}
/* Startseite: links hängt der Film über die ganze Höhe, rechts Aussage, Weg und darunter die Projektion.
   Die dritte Zeile nimmt auf, was der Film höher ist (auch mit offenem Transkript), damit rechts nichts auseinanderrückt. */
.filmraum-raster { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; column-gap: clamp(2.5rem, 7vw, 7rem); }
.filmraum-kopf { grid-area: 1 / 2; }
.filmraum-kopf h2 { max-width: 12em; }
.filmraum-kopf .vorspann { margin-top: var(--raum-3); max-width: 30em; }
.filmraum-raster > .cine-film { grid-area: 1 / 1 / span 3; }
.filmraum-weiter { grid-area: 2 / 2; margin-top: var(--raum-4); }
.filmraum-weiter .aktionen { margin-top: var(--raum-4); }
/* Im Raum ist die Kamerafahrt eine Nebenprojektion: ein schmaler Streifen in anderem Format, die Angabe steht daneben.
   Die Leinwand bleibt das Werk des Raums. */
.filmraum-raster > .cine-projektion { grid-area: 3 / 2; margin-top: var(--raum-5); }
@media (min-width: 48rem) {
  .filmraum-raster > .cine-projektion { --haengt: var(--schatten-klein); }
  .filmraum-raster > .cine-projektion .cine-projektion-sicht { aspect-ratio: 2.35 / 1; }
}
@media (min-width: 62rem) {
  .filmraum-raster > .cine-projektion { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; column-gap: clamp(1.25rem, 2.5vw, 2rem); }
  .filmraum-raster > .cine-projektion .cine-projektion-text { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .75rem; margin-top: 0; }
}

/* Erklärfilm: hängende Leinwand im Hochformat. */
.cine-film { width: var(--film-b); margin: 0; }
.cine-leinwand { position: relative; background: var(--sockel); box-shadow: var(--schatten); }
.cine-video { width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--sockel); }

/* Start-Knopf: die ganze Leinwand ist Zielfläche, das Schild an der Unterkante sagt, was passiert. Rund ist nur der Wiedergabe-Knopf. */
.cine-start {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: .75rem;
  background: none; border: 0; text-align: left; color: var(--schrift);
  transition: opacity 240ms ease, visibility 0s 240ms;
}
.cine-start-schild { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .6rem 1rem .6rem .6rem; background: var(--wand); transition: transform var(--kurz) var(--aus), background-color var(--kurz) ease; }
.cine-start-kreis { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--knopf-fl); color: var(--knopf-sch); }
.cine-start-kreis .icon { width: 1.2rem; height: 1.2rem; translate: 6% 0; transition: transform 220ms var(--aus); }
.cine-start-titel, .cine-start-dauer { display: block; }
.cine-start-titel { font-size: 1.0625rem; font-weight: 500; line-height: 1.25; }
.cine-start-dauer { font-size: .9375rem; line-height: 1.35; color: var(--schrift-2); }
.cine-start:active .cine-start-schild { transform: scale(.97); }
.cine-film[data-gestartet] .cine-start { opacity: 0; visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .cine-start:hover .cine-start-schild { background: var(--sockel); }
  .cine-start:hover .cine-start-kreis .icon { transform: scale(1.14); }
}

/* Unter dem Film: Schild, Kennzeichnung, Transkript. */
.cine-film-text { margin-top: 1rem; }
.cine-film-text .schild { margin-top: 0; }
.cine-film-text > .klein { margin-top: .75rem; }
.cine-film .transkript { margin-top: 1rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.cine-film .transkript summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.75rem; cursor: pointer; list-style: none; font-size: .9375rem; font-weight: 500; }
.cine-film .transkript summary::-webkit-details-marker { display: none; }
.cine-film .transkript summary .icon { width: 1.1em; height: 1.1em; transition: transform 240ms var(--aus), scale var(--kurz) var(--aus); }
.cine-film .transkript[open] summary .icon { transform: rotate(45deg); }
.cine-film .transkript summary:active .icon { scale: .9; }
.cine-transkript-text { padding: .25rem 0 1.1rem; font-size: .9375rem; line-height: 1.5; color: var(--schrift-2); }
.cine-transkript-text p + p { margin-top: .4em; }
.cine-transkript-text .cine-transkript-hinweis { margin-top: 1em; padding-top: .9em; border-top: 1px solid var(--linie); color: var(--schrift-3); }
@media (prefers-reduced-motion: no-preference) {
  .cine-film .transkript::details-content { block-size: 0; overflow: clip; transition: block-size 280ms var(--aus), content-visibility 280ms allow-discrete; }
  .cine-film .transkript[open]::details-content { block-size: auto; }
}

/* Hängt: der Schatten kommt erst, wenn sich das Werk geöffnet hat (die Blende würde ihn sonst abschneiden). */
.cine-haengt { box-shadow: var(--haengt, var(--schatten)); transition: box-shadow 900ms ease 500ms; }
.js .cine-haengt:not(:has(.ist-da)) { box-shadow: none; }

/* Kamerafahrt als Projektion: öffnet sich wie eine Leinwand aus der Mitte, beim Scrollen rückt die Kamera näher.
   Läuft der Film mit Ton, hält sie an und wird dunkel: ein Bild zur Zeit. */
.cine-projektion { margin: 0; }
.cine-projektion-sicht { aspect-ratio: 16 / 9; overflow: clip; background: var(--sockel); }
.cine-projektion video { width: 100%; height: 100%; object-fit: cover; scale: calc(1 + var(--p, 0) * .08); transition: filter 900ms ease; }
.raum-nacht[data-film-laeuft] .cine-projektion video { filter: brightness(.35); }
.cine-projektion-text { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; min-height: 2.75rem; margin-top: .75rem; }
.cine-projektion-text .schild { margin-top: 0; }
.cine-schalter {
  display: inline-flex; align-items: center; gap: .55em; min-height: 2.75rem; padding: 0 1rem;
  background: none; border: 0; box-shadow: inset 0 0 0 1px var(--linie-stark); font-size: .9375rem; font-weight: 500;
  transition: background-color var(--kurz) ease, color var(--kurz) ease, transform var(--kurz) var(--aus);
}
.cine-schalter:active { transform: scale(.97); }
.cine-projektion[data-laeuft] .cine-i-play, .cine-projektion:not([data-laeuft]) .cine-i-pause { display: none; }
@media (hover: hover) and (pointer: fine) { .cine-schalter:hover { background: var(--knopf-fl); color: var(--knopf-sch); } }
@media (prefers-reduced-motion: no-preference) {
  .js .cine-projektion-sicht[data-auf="blende"] { transition-duration: 1000ms; }
  .js .cine-projektion-sicht[data-auf="blende"]:not(.ist-da) { clip-path: inset(50% 0 50% 0); }
}
@media (prefers-reduced-motion: reduce) { .cine-projektion video { scale: none; transition-duration: 240ms; } }

/* Seite /cinemura/: Kopf im dunklen Raum, links die Aussage, rechts der Film. Die Zeile bemisst sich an ihrer Spalte. */
.cine-kopf {
  --film-b: max(14rem, min(25rem, 32vw, calc((100dvh - var(--kopfhoehe) - 10rem) * 9 / 16)));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: clamp(2.5rem, 7vw, 7rem);
  padding-top: clamp(2.5rem, 6vh, 4.5rem); padding-bottom: var(--raum-5);
}
/* Die Aussage steht mittig zur Leinwand, unabhängig davon, wie lang die Zeilen unter dem Film sind. */
.cine-kopf-text { container-type: inline-size; grid-column: 1; grid-row: 1; align-self: center; }
/* Die Leinwand steht rechts über beide Zeilen. Kennzeichnung und Transkript schließen links unten mit ihr ab. */
.cine-kopf > .cine-film[data-kino] { grid-column: 2; grid-row: 1 / span 2; }
.cine-kopf-notiz { grid-column: 1; grid-row: 2; align-self: end; width: auto; max-width: 30rem; margin-top: var(--raum-4); }
.cine-kopf-notiz > .klein { color: var(--schrift-2); }
.cine-kopf-text h1 { font-size: clamp(2.4rem, 9.4cqi, 4.6rem); }
.cine-kopf-text .vorspann { margin-top: var(--raum-3); max-width: 30em; }
.cine-kopf-text .aktionen { margin-top: var(--raum-4); }
/* „Film ansehen“ im Kopf: Wiedergabezeichen vorn, es wächst beim Überfahren wie am Start-Schild der Leinwand. */
.cine-los .icon { width: .95em; height: .95em; }
@media (hover: hover) and (pointer: fine) { .cine-los:hover .icon { transform: scale(1.14); } }
/* Ganz oben steht der Kopf über dem Raum deckend im Raumton, sonst scheint die helle Wand als graues Band durch. */
.seite-cinemura .kopf.raum-nacht:not([data-gescrollt]) { background: var(--wand); }
/* Nach einer Sockelfläche braucht der nächste Abschnitt seinen oberen Abstand wieder. */
.seite-cinemura .sockel + .abschnitt { padding-top: var(--raum-6); }

/* Schritte: echte Reihenfolge, deshalb mit Ziffer. Zeilen mit Linie. */
.cine-schritte { border-top: 1px solid var(--linie-stark); counter-reset: schritt; }
.cine-schritt {
  display: grid; grid-template-columns: 3.5rem minmax(0, .8fr) minmax(0, 1.2fr); align-items: baseline; column-gap: 2rem;
  padding: clamp(1.1rem, 2.2vw, 1.75rem) 0; border-bottom: 1px solid var(--linie); counter-increment: schritt;
}
.cine-schritt::before { content: counter(schritt); font-variant-numeric: tabular-nums; color: var(--schrift-3); }
.cine-schritt p { max-width: 36em; color: var(--schrift-2); }
.cine-schritte-knapp .cine-schritt { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0; padding: .95rem 0; }

/* So funktioniert es: links die drei Schritte, rechts hängt als Beispiel die Kamerafahrt und reicht bis an den Rand.
   Unter 62rem stehen die Schritte in voller Breite, die Kamerafahrt folgt darunter. */
.cine-buehne > .cine-projektion { margin-top: var(--raum-4); margin-right: calc(var(--seitenrand) * -1); }
.cine-buehne > .cine-projektion .cine-projektion-text { align-items: flex-start; padding-right: var(--seitenrand); }
@media (min-width: 62rem) {
  .cine-buehne { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; column-gap: clamp(2rem, 6vw, 6rem); }
  .cine-buehne .cine-schritt { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0; }
  .cine-buehne .cine-schritt p { grid-column: 2; margin-top: .35rem; }
  .cine-buehne > .cine-projektion { margin-top: 0; }
}

/* Formate: drei Werke auf einer gemeinsamen Unterkante, ungleich groß. Die Zeilen teilen sich beide Figuren (subgrid). */
.cine-haengung { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(1.5rem, 5vw, 5rem); }
.cine-werk { display: grid; grid-row: span 2; grid-template-rows: subgrid; margin: 0; }
.cine-werk > :first-child { align-self: end; }
.cine-paar { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: clamp(1rem, 2.5vw, 2.5rem); }
.cine-rahmen { --haengt: var(--schatten-klein); background: var(--tafel); }
.cine-rahmen-sicht { height: 100%; overflow: clip; }
.cine-rahmen img { width: 100%; height: 100%; object-fit: cover; }
.cine-rahmen-quer { aspect-ratio: 16 / 9; }
.cine-rahmen-hoch { aspect-ratio: 9 / 16; }
.cine-rahmen-hoch img { object-position: 62% 50%; }
.cine-rahmen-quadrat { aspect-ratio: 1; }
.cine-rahmen-quadrat img { object-position: 55% 50%; }
.cine-formate-fuss { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; column-gap: clamp(1.5rem, 5vw, 5rem); margin-top: var(--raum-5); }

/* Eckdaten und „Von mir gebaut“: ungleiche Spalten, unter 56rem einspaltig. */
.cine-eckdaten { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; column-gap: clamp(2rem, 6vw, 6rem); }
.cine-eckdaten-kopf > * + * { margin-top: var(--raum-3); }
.cine-vonmir { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; column-gap: clamp(2rem, 6vw, 6rem); }
.cine-vonmir-werk { margin-left: calc(var(--rand) * -.4); }
.cine-vonmir-text > * + * { margin-top: var(--raum-3); }
.cine-vonmir-text .aktionen { margin-top: var(--raum-4); }
.cine-vonmir-text p:not(.aktionen) { max-width: 34em; color: var(--schrift-2); }
@media (max-width: 55.99rem) {
  .cine-eckdaten, .cine-vonmir { grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-4); }
  .cine-vonmir-werk { margin-left: 0; }
}

/* Unter 48rem einspaltig: Aussage, Film, Weg, Projektion von Kante zu Kante. */
@media (max-width: 47.99rem) {
  /* Die Leinwand passt samt Start-Schild in ein Bild: nie höher als der Platz unter dem Kopf. */
  .filmraum, .cine-kopf { --film-b: min(100%, 24rem, calc((100svh - var(--kopfhoehe) - 3rem) * 9 / 16)); }
  .filmraum-raster, .cine-kopf { display: block; }
  .filmraum-raster > .cine-film, .cine-kopf > .cine-film { margin-top: var(--raum-4); }
  .cine-kopf-text { min-height: 0; }
  .filmraum-raster > .cine-projektion, .cine-buehne > .cine-projektion { margin-inline: calc(var(--seitenrand) * -1); }
  .filmraum-raster > .cine-projektion .cine-projektion-text, .cine-buehne > .cine-projektion .cine-projektion-text { padding-inline: var(--seitenrand); }
  .cine-schritt { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0; }
  .cine-schritt p { grid-column: 2; margin-top: .35rem; }
  .cine-haengung, .cine-formate-fuss { grid-template-columns: minmax(0, 1fr); }
  .cine-werk { display: block; }
  .cine-werk + .cine-werk { margin-top: var(--raum-4); }
  .cine-paar { padding-right: 10%; }
  .cine-formate-fuss > * + * { margin-top: var(--raum-3); }
}

/* Bereich für Makler: die Seite /makler/. (Der Teaser der Startseite ist seit 15.10.2026 ein Feld der Fachbereiche, 17-branchen.css.) */

/* Fahrt: die lange Aufnahme fährt mit dem Scrollen durch ihr Fenster. --p setzt die Szene darüber (01-kern.js).
   Ohne Skript und bei reduzierter Bewegung steht der Anfang (--von). --weg ist der Anteil der Seite, der durchfährt. */
.makler-fahrt img {
  transform: translateY(calc((-100% + 100cqh) * (var(--von, 0) + clamp(0, (var(--p, 0) - var(--ab, .1)) / var(--spanne, .8), 1) * var(--weg, .42))));
}
/* Eine eigene Ebene bekommt die Aufnahme nur, solange ihre Szene im Bild ist (data-im-bild setzt 01-kern.js). */
@media (prefers-reduced-motion: no-preference) {
  [data-im-bild] .makler-fahrt img { will-change: transform; }
}
.makler-handy.makler-fahrt { --weg: .2; }
.makler-fahrt-kopf { --ab: 0; --spanne: 1; --weg: .38; }
.makler-fahrt-breit { --weg: .3; }
.makler-handy.makler-fahrt-breit { --von: .79; --weg: .12; }
.makler-fahrt-rundgang { --von: .625; --weg: .05; }
.makler-fahrt-ort { --weg: .14; }

/* Schaubild „Abgleich“ im Baustein onOffice-Anbindung: einmal in onOffice gepflegt, von selbst auf der Website. Nur Haarlinien: zwei Orte mit
   ihrem Wort, dazwischen die Bahn mit Endstrichen, drei Karten als Objekte, darunter der belegte Bestand.
   Alle Maße liegen auf ganzen Pixeln (bei 16 Pixel Grundschrift), damit jede Linie scharf steht.
   Die Karten ruhen im Ziel. 05-abgleich.js setzt je Karte --e (0 in der Quelle, 1 im Ziel) und an der Bahn --g (Anteil
   der gezeichneten Linie). Ohne Skript und bei reduzierter Bewegung bleibt dieser Endzustand stehen.
   --grund ist der Ton hinter dem Schaubild (auf /makler/ die Wand): damit decken die Karten, was hinter ihnen
   liegt, und unterwegs kreuzt keine Linie eine andere. */
.abgleich { --k: 1rem; --luecke: .3125rem; --innen: .75rem; --sohle: calc(var(--innen) + 1px); --grund: var(--wand); max-width: 31rem; margin-top: var(--raum-4); }
.abgleich-bild { display: grid; grid-template-columns: auto minmax(2.5rem, 1fr) auto; }
.abgleich-ort { grid-area: 1 / 1; height: 4rem; padding: var(--innen); border: 1px solid var(--linie-stark); color: var(--schrift-2); }
.abgleich-bahn + .abgleich-ort { grid-column: 3; }
.abgleich-ort .angabe { display: block; }
/* Bahn: die Endstriche sind ihre Seitenkanten, die ruhende Linie und die gezeichnete liegen übereinander auf der Sohle,
   auf der auch die Karten stehen. Die gezeichnete Linie wächst von der Quelle zum Ziel und endet an der vordersten Karte. */
.abgleich-bahn { grid-area: 1 / 2; align-self: end; position: relative; height: calc(.5rem + 1px); margin: 0 .5rem calc(var(--sohle) - .25rem); border-inline: 1px solid var(--linie-stark); }
.abgleich-bahn::before, .abgleich-bahn::after { content: ""; position: absolute; inset: .25rem 0 auto; height: 1px; background: var(--linie-stark); }
.abgleich-bahn::after { background: var(--schrift); transform-origin: 0 50%; transform: scaleX(var(--g, 1)); }
/* Karte: der Schlitten reicht von der linken Kante der Quelle bis zur linken Kante des Ziels, die Karte selbst steht
   dahinter auf ihrem Platz im Ziel. Ein Schlitten weiter links ist derselbe Platz in der Quelle: so braucht der Weg
   kein Maß aus dem Skript. Gerundet auf ganze Pixel, damit die Karte auch unterwegs scharf bleibt. */
.abgleich-karte { grid-area: 1 / 1 / 2 / 3; position: relative; pointer-events: none; transform: translateX(calc((var(--e, 1) - 1) * 100%)); }
@supports (transform: translateX(round(1%, 1px))) {
  .abgleich-karte { transform: translateX(round(calc((var(--e, 1) - 1) * 100%), 1px)); }
}
.abgleich-karte::before {
  content: ""; position: absolute; left: calc(100% + 1px + var(--innen) + var(--i, 0) * (var(--k) + var(--luecke))); bottom: var(--sohle);
  width: var(--k); aspect-ratio: 4 / 3; border: 1px solid var(--schrift); background: var(--grund);
}
/* Platz von links: Die Karten sind das vierte bis neunte Kind, erst drei ruhende, dann drei wandernde. */
.abgleich-karte:nth-child(3n+5) { --i: 1; }
.abgleich-karte:nth-child(3n+6) { --i: 2; }
/* Die Objekte bleiben in onOffice: in der Quelle ruht je Karte ein Umriss, auf dem die Karte am Anfang liegt. Er steht
   über denselben Schlitten an seinem Platz, damit beide Linien auf dasselbe Pixel fallen. */
.abgleich-rest { --e: 0; }
.abgleich-rest::before { border-color: var(--linie-stark); }
/* Bestand: die Zahl groß in fester Ziffernbreite, daneben die Angabe. Der unsichtbare Endwert hält Breite und Grundlinie,
   die zählende Zahl liegt darüber. Wird es eng, bricht die Angabe nur vor dem Stand um und steht dann in zwei Zeilen
   neben der Zahl, die letzte auf ihrer Grundlinie. */
.abgleich-zeile { display: flex; align-items: baseline; align-items: last baseline; gap: .875rem; margin-top: 1.125rem; }
.abgleich-zahl { flex: none; position: relative; font-size: clamp(2.5rem, 2.1rem + 1.3vw, 3.25rem); font-weight: var(--g-zeile); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.abgleich-zahl::before { content: attr(data-zahl); visibility: hidden; }
.abgleich-zahl > span { position: absolute; left: 0; top: 0; }
.abgleich-zeile .angabe { min-width: 0; line-height: 1.45; white-space: normal; color: var(--schrift-2); }
.abgleich-zeile .angabe > span:not(.nur-lesegeraet) { display: inline-block; }

/* Seite /makler/ ─ Kopf: links die Zusage mit dem Knopf, rechts der Vorspann, darunter ein Werk über die ganze Breite. */
.makler-kopf { padding: clamp(3rem, 8vw, 6.5rem) var(--seitenrand) 0; }
.makler-kopf-text {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  grid-template-areas: "titel vorspann" "aktionen vorspann";
  align-items: end; gap: var(--raum-4) clamp(2rem, 6vw, 6rem);
}
.makler-kopf-text h1 { grid-area: titel; max-width: 11em; }
.makler-kopf-text .vorspann { grid-area: vorspann; }
.makler-kopf-text .aktionen { grid-area: aktionen; }
/* Die Zeilen des Kopfs steigen per CSS, damit sie nicht auf das Skript warten (wie .seitenkopf in 02-bausteine.css). */
@media (prefers-reduced-motion: no-preference) {
  .makler-kopf-text > * { animation: zeile-rein 900ms var(--aus) both; }
  .makler-kopf-text > .vorspann { animation-delay: 90ms; }
  .makler-kopf-text > .aktionen { animation-delay: 180ms; }
}
.makler-kopf-werk { margin-top: var(--raum-5); }
.makler-kopf-werk .fenster-sicht { aspect-ratio: 16 / 8.4; }
@media (max-width: 61.99rem) {
  .makler-kopf-text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "vorspann" "aktionen"; gap: var(--raum-3); }
  .makler-kopf-text .aktionen { margin-top: var(--raum-2); }
  .makler-kopf-werk .fenster-sicht { aspect-ratio: 10 / 8.6; }
}

/* Kundenfrage: die Antwort rückt ein, wie eine Erwiderung. */
@media (min-width: 48rem) {
  .makler-frage .antwort { margin-left: clamp(4rem, 22vw, 20rem); }
}

/* Bausteine: gemeinsame Teile. Jede Form legt nur ihre Aufteilung fest. */
.makler-baustein h2 + .vorspann { margin-top: var(--raum-3); }
.makler-beleg-link { margin-top: var(--raum-3); }
.makler-punkte { margin-top: var(--raum-4); border-top: 1px solid var(--linie-stark); }
.makler-punkte li { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--linie); }
.makler-punkte h3 { font-size: 1em; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.makler-punkte p { margin-top: .25rem; max-width: 36em; color: var(--schrift-2); }
/* zeile: Titel links, Text rechts. gross: Titel in der dritten Stufe. paar: zwei Spalten. */
.makler-punkte-zeile li { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: baseline; gap: .25rem 2rem; }
.makler-punkte-zeile p { margin-top: 0; }
.makler-punkte-gross li { padding: clamp(1.1rem, 2.2vw, 1.75rem) 0; }
.makler-punkte-gross h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); font-weight: var(--g-titel); line-height: 1.2; letter-spacing: -.015em; }
.makler-punkte-gross p { margin-top: .45rem; }
.makler-punkte-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 6rem); border-top: 0; }
.makler-punkte-paar li { border-top: 1px solid var(--linie-stark); border-bottom: 0; padding-bottom: var(--raum-3); }
@media (max-width: 47.99rem) {
  .makler-punkte-zeile li, .makler-punkte-paar { grid-template-columns: minmax(0, 1fr); }
  .makler-punkte-paar li + li { border-top-color: var(--linie); }
}

/* Form 1, onOffice: Werk links (Fenster, davor das Telefon), Text rechts. Im Dokument steht der Text zuerst. */
.makler-b-haengung { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: center; gap: var(--raum-5) clamp(2.5rem, 6vw, 6rem); }
.makler-b-haengung .makler-b-text { grid-area: 1 / 2; }
.makler-haengung { grid-area: 1 / 1; }
.makler-haengung-werke, .makler-breit-werke { position: relative; }
.makler-haengung .fenster-sicht { aspect-ratio: 10 / 7.8; }
.makler-haengung .fenster-sicht img { object-position: left top; }
.makler-haengung .makler-handy {
  position: absolute; right: clamp(-2.25rem, -2.6vw, -1rem); bottom: -2rem; z-index: 2;
  --telefon-b: clamp(8.5rem, 12.5vw, 12rem); translate: 0 calc((var(--p, .5) - .5) * -5rem);
}
.makler-haengung .schild { margin-top: 1.25rem; padding-right: clamp(8rem, 12vw, 12rem); }

/* Form 2, Neubau: Kopf geteilt, das Werk über die ganze Breite, die Punkte darunter in zwei Spalten. */
.makler-b-kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; column-gap: clamp(2rem, 6vw, 6rem); }
.makler-b-kopf h2 { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.makler-b-kopf > :not(h2) { grid-column: 2; }
.makler-b-kopf h2 + .vorspann { margin-top: 0; }
.makler-breit { margin-top: var(--raum-5); }
.makler-breit .fenster-sicht { aspect-ratio: 16 / 8.2; }
.makler-breit .makler-handy {
  position: absolute; right: clamp(1.25rem, 6vw, 6rem); bottom: -2.5rem; z-index: 2;
  --telefon-b: clamp(8.5rem, 15vw, 14rem); translate: 0 calc((var(--p, .5) - .5) * -6rem);
}
.makler-breit .schild { margin-top: 1.25rem; padding-right: clamp(10rem, 24vw, 22rem); }
.makler-b-breit > .makler-punkte { margin-top: var(--raum-5); }

/* Form 3 und 6: Text links (bleibt stehen), rechts das Werk mit Zeilen oder die großen Zeilen. */
.makler-b-seite, .makler-b-zeilen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: var(--raum-4) clamp(2rem, 6vw, 6rem); }
.makler-b-fest { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
.makler-b-zeilen > .makler-punkte { margin-top: 0; }

/* Form 4, Cinemura: auf dem Sockel. Querformat und Hochformat hängen als Paar, das Telefon tritt vor. */
.makler-b-film { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: var(--raum-5) clamp(2.5rem, 6vw, 6rem); }
/* Nach dem Sockel beginnt die Wand wieder mit vollem Abstand (01-basis.css nimmt ihn sonst weg). */
.makler-baustein.sockel + .abschnitt.makler-baustein { padding-top: var(--raum-6); }
.makler-film-bilder { position: relative; padding: 0 clamp(4rem, 9vw, 8.5rem) clamp(2rem, 4vw, 3.5rem) 0; }
.makler-film-quer img { width: 100%; }
.makler-film-hoch { position: absolute; right: 0; bottom: 0; --telefon-b: clamp(7.5rem, 13.5vw, 13rem); translate: 0 calc((var(--p, .5) - .5) * -4rem); }
.makler-film .telefon-sicht { aspect-ratio: 9 / 16; }
.makler-film .klein { margin-top: var(--raum-2); max-width: 44em; }

/* Form 5, Orte und Anzeigen: zwei Textspalten. Das Werk steht nur beim Ort, denn nur dafür gilt der Beleg. */
.makler-zwei { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: var(--raum-4) clamp(2rem, 6vw, 6rem); }
.makler-zwei-ort .makler-punkte { margin-top: var(--raum-3); border-top: 0; }
.makler-zwei > .makler-punkte { margin-top: 0; }

@media (max-width: 61.99rem) {
  .makler-b-haengung, .makler-b-seite, .makler-b-zeilen, .makler-b-film, .makler-zwei, .makler-b-kopf { grid-template-columns: minmax(0, 1fr); }
  .makler-b-haengung .makler-b-text, .makler-haengung { grid-area: auto; }
  .makler-b-kopf h2, .makler-b-kopf > :not(h2) { grid-column: 1; grid-row: auto; }
  .makler-b-kopf h2 + .vorspann { margin-top: var(--raum-3); }
  .makler-b-fest { position: static; }
  .makler-b-zeilen > .makler-punkte { margin-top: var(--raum-2); }
  .makler-haengung .fenster-sicht, .makler-breit .fenster-sicht { aspect-ratio: 10 / 9.2; }
  .makler-haengung .makler-handy, .makler-breit .makler-handy { right: -.35rem; bottom: -1.25rem; --telefon-b: clamp(6.75rem, 30vw, 9rem); translate: none; }
  .makler-haengung .schild, .makler-breit .schild { padding-right: clamp(7rem, 32vw, 9.5rem); }
  .makler-film-hoch { translate: none; }
}

/* Tabelle „nicht enthalten“: Muster .gegen aus 03-start.css. */
.makler-nicht h2 { max-width: 14em; }

/* Belege: zwei Werke, ungleich groß und versetzt gehängt. Der ganze Beleg ist das Ziel des einen Links. */
.makler-belege-wand { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: start; gap: var(--raum-5) clamp(2rem, 5vw, 5rem); }
.makler-beleg { position: relative; }
.makler-beleg:nth-child(2) { margin-top: var(--raum-6); translate: 0 calc((var(--p, .5) - .5) * -4rem); }
.makler-beleg-satz { margin-top: var(--raum-3); max-width: 30em; color: var(--schrift-2); }
.makler-beleg-ziel { margin-top: var(--raum-2); }
/* Die Linkfläche deckt den ganzen Beleg. Ihr Absatz blendet deshalb nur über die Deckkraft ein: eine Verschiebung
   würde ihn zum Bezugsrahmen der Fläche machen, und das Bild wäre erst nach dem Einblenden anklickbar. */
.js .makler-beleg-ziel[data-auf] { transform: none; }
.makler-beleg .textlink::after { content: ""; position: absolute; inset: 0; }
.makler-beleg .fenster { transition: transform var(--mittel) var(--aus); }
.makler-beleg:active .fenster { transform: scale(.992); }
@media (hover: hover) and (pointer: fine) {
  .makler-beleg:hover .fenster { transform: translateY(-.3rem); }
  .makler-beleg:hover .textlink { text-decoration-color: currentColor; }
  .makler-beleg:hover .textlink .icon { transform: translateX(.25em); }
}
@media (max-width: 61.99rem) {
  .makler-belege-wand { grid-template-columns: minmax(0, 1fr); }
  .makler-beleg:nth-child(2) { margin-top: 0; translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  .makler-beleg .fenster { transition: none; }
  .makler-beleg:hover .fenster, .makler-beleg:active .fenster { transform: none; }
}

/* Preise je Baustein (Zeilen aus seiten-branchen.mjs): eine Reihe unter dem Baustein, so breit wie die Lesespalte. */
.makler-baustein > .makler-posten { grid-column: 1 / -1; max-width: 56rem; margin-top: var(--raum-4); }
.makler-baustein > .makler-posten .br-preise { margin-top: 0; }


/* Leistungen: die Übersicht als Hängung und die Seite je Leistung. Alle Klassen beginnen mit lst-. */

/* Gemeinsam. Das Bild ist ein zweiter Weg zum Textlink daneben und gibt beim Drücken nach. */
.lst-werk-link { display: block; text-decoration: none; }
.lst-werk-link .fenster, .lst-werk-link .lst-podest, .lst-plakat { transition: transform var(--kurz) var(--aus); }
.lst-werk-link:active .fenster, .lst-werk-link:active .lst-podest, a.lst-plakat:active { transform: scale(.992); }
@media (hover: hover) and (pointer: fine) {
  .lst-zeile:has(.lst-werk-link:hover) .textlink, .lst-beleg:has(.lst-werk-link:hover) .textlink { text-decoration-color: currentColor; }
  .lst-zeile:has(.lst-werk-link:hover) .textlink .icon, .lst-beleg:has(.lst-werk-link:hover) .textlink .icon { transform: translateX(.25em); }
}

/* Fahrt: der lange Streifen wandert mit dem Scrollen durch sein Fenster. --p kommt aus der Szene, --lst-weg begrenzt die Strecke. */
.lst-fahrt .fenster-lang .fenster-sicht img,
.lst-fahrt .telefon-sicht img { transform: translateY(calc(var(--p, 0) * var(--lst-weg, .4) * (100cqh - 100%))); }
/* Eine eigene Ebene bekommt der Streifen nur, solange seine Szene im Bild ist. data-im-bild setzt das Skript an der Szene. */
@media (prefers-reduced-motion: no-preference) {
  :is([data-im-bild] .lst-fahrt, .lst-fahrt[data-im-bild]) :is(.fenster-lang .fenster-sicht, .telefon-sicht) img { will-change: transform; }
}

/* Plakat: das Standbild des Erklärfilms, rechtwinklig gehängt. */
.lst-plakat { display: block; overflow: clip; background: var(--tafel); box-shadow: 0 0 0 1px var(--geraet-kante), var(--schatten-klein); text-decoration: none; }
.lst-plakat img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.lst-plakat-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .6rem .9rem; border-top: 1px solid var(--linie); font-size: .975rem; font-weight: 500; }
.lst-plakat-zeile .icon { transition: transform 220ms var(--aus); }
@media (hover: hover) and (pointer: fine) { a.lst-plakat:hover .icon { transform: translateX(.25em); } }

/* ---------- Übersicht ---------- */
.lst-liste { padding: 0 var(--seitenrand) var(--raum-5); }
.lst-zeile {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-3);
  padding: var(--raum-4) 0 var(--raum-5);
}
/* Die Linie über jeder Zeile zieht sich durch, sobald ihr Inhalt da ist. */
.lst-zeile::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--linie-stark); transform-origin: left; }
@supports selector(:has(*)) {
  @media (prefers-reduced-motion: no-preference) {
    .js .lst-zeile::before { transform: scaleX(0); transition: transform 1200ms var(--hin-her); }
    .js .lst-zeile:has(.ist-da)::before { transform: none; }
  }
}
/* Einspaltig: Titel, Werk, Satz, Link. Der Textblock löst sich dafür auf. */
.lst-zeile-text { display: contents; }
.lst-zeile-text h2 { order: 1; overflow-wrap: break-word; }
.lst-zeile-werk { order: 2; margin-top: var(--raum-2); }
.lst-zeile-kurz { order: 3; max-width: 30em; color: var(--schrift-2); }
.lst-zeile-weiter { order: 4; }
.lst-zeile-werk { --lst-weg: .34; }

/* Paar: Fenster und Telefon derselben Arbeit. */
.lst-paar { position: relative; }
.lst-paar .telefon { position: absolute; right: -.35rem; bottom: -1.25rem; z-index: 2; --telefon-b: clamp(5.5rem, 24vw, 8rem); translate: 0 calc((var(--p, .5) - .5) * -2.5rem); }
.lst-mit-telefon .schild { padding-right: calc(clamp(5.5rem, 24vw, 8rem) + .9rem); }
/* Doppel: Website quer, Film hoch, an einer Unterkante. */
.lst-doppel { display: flex; align-items: flex-end; gap: clamp(.75rem, 2.4vw, 2.25rem); }
.lst-doppel .fenster { flex: 1 1 0; min-width: 0; }
.lst-doppel .lst-plakat { flex: 0 0 24%; }
/* Podest: das schmale Werk bekommt eine eigene Fläche, damit es neben den breiten besteht. */
.lst-podest { display: grid; place-items: center; padding: var(--raum-4) var(--raum-3); background: var(--sockel); --telefon-b: clamp(10rem, 44vw, 13rem); }
.lst-zeile-d .lst-zeile-werk { --lst-weg: .2; }

@media (min-width: 62rem) {
  .lst-zeile { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.6vw, 2.5rem); row-gap: var(--raum-4); align-items: start; padding: var(--raum-5) 0 var(--raum-6); }
  .lst-zeile-text { display: block; grid-row: 1; }
  .lst-zeile-text h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
  .lst-zeile-kurz { margin-top: var(--raum-3); }
  .lst-zeile-weiter { margin-top: var(--raum-2); }
  .lst-zeile-werk { grid-row: 1; margin-top: 0; }

  /* a: breites Werk links, Text rechts unten am Schild */
  .lst-zeile-a .lst-zeile-werk { grid-column: 1 / span 7; }
  .lst-zeile-a .lst-zeile-text { grid-column: 8 / -1; align-self: end; padding-bottom: 2.4rem; }
  /* b: Text links oben, rechts das Paar */
  .lst-zeile-b .lst-zeile-text { grid-column: 1 / span 5; }
  .lst-zeile-b .lst-zeile-werk { grid-column: 7 / -1; }
  .lst-paar .telefon { right: auto; left: clamp(-3.5rem, -4vw, -1.5rem); bottom: -1.75rem; --telefon-b: clamp(7.5rem, 11.5vw, 11rem); }
  .lst-mit-telefon .schild { padding-right: 0; padding-left: calc(clamp(7.5rem, 11.5vw, 11rem) + clamp(-3.5rem, -4vw, -1.5rem) + 1.25rem); }
  /* c: Titel und Satz als Kopfzeile, darunter Website und Film über die ganze Breite */
  .lst-zeile-c .lst-zeile-text { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: inherit; align-items: baseline; }
  .lst-zeile-c .lst-zeile-text h2 { grid-row: 1 / span 2; }
  .lst-zeile-c .lst-zeile-kurz, .lst-zeile-c .lst-zeile-weiter { grid-column: 2; }
  .lst-zeile-c .lst-zeile-kurz { margin-top: 0; }
  .lst-zeile-c .lst-zeile-werk { grid-column: 1 / -1; grid-row: 2; }
  /* d: schmales Werk auf dem Podest, Text daneben auf mittlerer Höhe */
  .lst-zeile-d .lst-zeile-werk { grid-column: 1 / span 5; }
  .lst-zeile-d .lst-zeile-text { grid-column: 7 / -1; align-self: center; }
  .lst-podest { padding: var(--raum-5) var(--raum-4); --telefon-b: clamp(12rem, 17vw, 15rem); }
  /* e: Text links unten, das breite Werk rechts */
  .lst-zeile-e .lst-zeile-text { grid-column: 1 / span 5; align-self: end; padding-bottom: 2.4rem; }
  .lst-zeile-e .lst-zeile-werk { grid-column: 6 / -1; }
}

/* ---------- Seite je Leistung ---------- */

/* Kopf: Titel links, Frage und Antwort rechts. Darunter beherrscht das Werk die Ansicht. */
.lst-kopf { padding: clamp(2rem, 3.6vw, 3.25rem) var(--seitenrand) 0; overflow-x: clip; }
.lst-kopf-text { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-4); }
.lst-kopf .pfad { margin-bottom: 0; }
.lst-kopf .pfad a { display: inline-block; padding: .75rem 0; margin: -.75rem 0; }
.lst-kopf-titel { container-type: inline-size; margin-top: calc(var(--raum-3) - var(--raum-4)); }
.lst-kopf-titel h1 { font-size: clamp(2.6rem, 14.5cqi, 5.5rem); overflow-wrap: break-word; }
.lst-kopf-frage .aktionen { margin-top: var(--raum-4); }
.lst-kopf-werk { margin-top: var(--raum-4); --lst-weg: .2; }
.lst-kopf-werke { position: relative; }
.lst-kopf-werke .fenster-sicht { aspect-ratio: 10 / 9.4; }
.lst-kopf-werke .telefon { position: absolute; right: -.35rem; bottom: -1.25rem; z-index: 2; --telefon-b: clamp(6.5rem, 29vw, 9rem); translate: 0 calc(var(--p, 0) * -3rem); }
.lst-kopf-werk:not(.lst-allein) .schild { padding-right: clamp(7rem, 31vw, 9.75rem); }

@keyframes lst-steig { from { opacity: 0; transform: translateY(1.25rem); } }
@keyframes lst-hell { from { opacity: 0; transform: translateY(1.75rem) scale(.985); filter: brightness(.55); } }
@media (prefers-reduced-motion: no-preference) {
  .lst-kopf .pfad, .lst-kopf-titel, .lst-kopf-frage > *, .lst-kopf-werk .schild { animation: lst-steig 900ms var(--aus) both; }
  .lst-kopf-titel { animation-delay: 60ms; }
  .lst-kopf-frage > :nth-child(1) { animation-delay: 150ms; }
  .lst-kopf-frage > :nth-child(2) { animation-delay: 240ms; }
  .lst-kopf-frage > :nth-child(3) { animation-delay: 330ms; }
  .lst-kopf-werke .fenster { animation: lst-hell 1300ms var(--aus) 260ms both; }
  .lst-kopf-werke .telefon { animation: lst-hell 1300ms var(--aus) 480ms both; }
  .lst-kopf-werk .schild { animation-delay: 760ms; }
}

@media (min-width: 56rem) {
  .lst-kopf-text { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(2rem, 6vw, 6rem); row-gap: var(--raum-3); align-items: start; }
  .lst-kopf .pfad { grid-column: 1 / -1; }
  .lst-kopf-titel { margin-top: 0; }
  .lst-kopf-werke .fenster-sicht { aspect-ratio: 16 / 8.6; max-height: calc(100vh - var(--kopfhoehe) - 8rem); }
  /* Das Fenster bleibt schmaler als die Wand, damit die Aufnahme scharf steht. Das Telefon greift über seine rechte Kante. */
  .lst-kopf-werk:not(.lst-allein) .fenster { width: 89%; }
  .lst-kopf-werke .telefon { right: 0; bottom: -2.25rem; --telefon-b: clamp(8rem, 14.5vw, 13rem); translate: 0 calc(var(--p, 0) * -6rem); }
  .lst-kopf-werk:not(.lst-allein) .schild { padding-right: calc(clamp(8rem, 14.5vw, 13rem) + 1.5rem); }
}

/* Umfang: links die Punkte als Zeilen, rechts bleibt ein Werk stehen und läuft beim Lesen durch. */
.lst-umfang { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.lst-punkte { border-top: 1px solid var(--linie-stark); }
.lst-punkte li { padding: clamp(1.1rem, 2vw, 1.6rem) 0; border-bottom: 1px solid var(--linie); }
.lst-punkte p { margin-top: .4rem; max-width: 36em; color: var(--schrift-2); }
.lst-begleiter { display: none; }
.lst-begleiter-film { display: block; width: min(100%, 17rem); margin-top: var(--raum-4); }
@media (min-width: 62rem) {
  .lst-umfang:not(.lst-allein) { grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr); column-gap: clamp(2rem, 6vw, 6rem); }
  .lst-umfang.lst-allein .lst-umfang-text { max-width: 54rem; }
  .lst-begleiter { display: block; position: sticky; top: calc(var(--kopfhoehe) + 2rem); justify-self: end; margin-top: 0; --telefon-b: clamp(13rem, 19vw, 17rem); --lst-weg: .3; }
  .lst-begleiter .telefon, .lst-begleiter .schild { width: var(--telefon-b); }
  .lst-begleiter-film { width: clamp(14rem, 21vw, 18.5rem); }
  .lst-begleiter-film .schild { width: auto; }
}
@media (min-width: 62rem) and (max-height: 46rem) { .lst-begleiter { --telefon-b: 13rem; } }

/* Nicht enthalten: steht auf dem Sockel. Danach beginnt die Wand wieder mit vollem Abstand. */
.lst-nicht h2 { max-width: 14em; }
.abschnitt.lst-nicht + .abschnitt.lst-belege, .abschnitt.lst-nicht + .abschnitt.lst-fragen { padding-top: var(--raum-6); }

/* Belege: ungleich gehängt, das zweite Werk jeder Reihe sitzt tiefer. */
.lst-haengung { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-5); }
.lst-beleg-text { margin-top: var(--raum-2); max-width: 32em; }
.lst-beleg-text > p:first-child { color: var(--schrift-2); }
.lst-beleg-text > p + p { margin-top: .5rem; }
@media (min-width: 48rem) {
  .lst-haengung { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
  .lst-beleg { grid-column: span 7; }
  .lst-beleg:nth-child(4n + 2), .lst-beleg:nth-child(4n + 3) { grid-column: span 5; }
  .lst-beleg:nth-child(even) { margin-top: var(--raum-5); }
  .lst-haengung-eins .lst-beleg { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: inherit; align-items: end; }
  .lst-haengung-eins .lst-beleg-text { margin: 0; padding-bottom: 2.4rem; }
}

/* Fragen: Überschrift bleibt links stehen, rechts klappen die Antworten auf. */
.lst-fragen { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-4); align-items: start; }
@media (min-width: 62rem) {
  .lst-fragen { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); column-gap: clamp(2rem, 6vw, 6rem); }
  .lst-fragen h2 { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
}

/* Weiter: eine große Zeile zur nächsten Leistung. */
.lst-weiter { padding: 0 var(--seitenrand); }
.lst-weiter a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(1.25rem, 4vw, 3rem); padding: var(--raum-4) 0 var(--raum-5); border-top: 1px solid var(--linie-stark); text-decoration: none; }
.lst-weiter-titel { grid-column: 1; transition: transform var(--kurz) var(--aus); }
.lst-weiter-vor { color: var(--schrift-3); }
.lst-weiter-text { grid-column: 1; margin-top: .6rem; max-width: 34em; color: var(--schrift-2); }
.lst-weiter .icon { grid-column: 2; grid-row: 1 / span 2; width: clamp(2rem, 4.2vw, 3.25rem); height: clamp(2rem, 4.2vw, 3.25rem); transition: transform var(--mittel) var(--aus); }
.lst-weiter a:active .lst-weiter-titel { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) { .lst-weiter a:hover .icon { transform: translateX(.6rem); } }

/* Referenzen: die Hängung (Übersicht) und die Seite einer Arbeit. Alle Klassen beginnen mit ref-. */

/* ---------- Übersicht: die Hängung ---------- */

/* Einspaltig bis 56rem: Wandtext, dann Werk für Werk in voller Breite. Darüber zwölf Spalten Wand. */
.ref-gruppe { padding: 0 var(--seitenrand) var(--raum-6); }
.ref-wandtext { margin-bottom: var(--raum-4); }
.ref-wandtext p { margin-top: var(--raum-2); max-width: 24em; color: var(--schrift-2); }
.ref-werke { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-5); }

/* Ein Werk: die Fläche führt über den einen Link zur Arbeit. Kleine Werke hängen näher und ziehen beim Scrollen leicht vor. */
.ref-werk { position: relative; translate: 0 calc((var(--p, .5) - .5) * var(--ref-tiefe, 0rem)); }
.ref-geraete { position: relative; }
.ref-werk .schild-name { font: inherit; font-weight: 600; letter-spacing: 0; }
.ref-werk-text { margin-top: var(--raum-2); max-width: 36em; }
.ref-werk-satz { color: var(--schrift-2); }
/* Die Fläche des Links ist das ganze Werk, samt Telefon davor. Kein Elternteil des Links trägt Bewegung oder Deckkraft,
   sonst würde es zum Bezugsrahmen der Fläche und das Bild wäre erst nach dem Einblenden anklickbar. */
.ref-werk-link { margin-top: .25rem; }
.ref-werk-link-zeile { display: inline-flex; align-items: center; gap: .5em; }
.ref-werk-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.ref-werk-link:focus-visible { outline: 0; }
.ref-werk-link:focus-visible::after { outline: 2px solid var(--fokus); outline-offset: 6px; }
.ref-werk:active .fenster { transform: scale(.995); }
.ref-werk .fenster { transition: transform var(--kurz) var(--aus); }

/* Die Seite im Fenster rückt beim Vorbeiscrollen ein Stück weiter. Wer das Werk überfährt oder ansteuert, lässt sie langsam durchlaufen; beim Verlassen kehrt sie zügig zurück. */
.ref-werk .fenster-sicht img { translate: 0 calc(clamp(0, var(--p, 0) - .35, .65) * -22%); transition: transform 1100ms var(--aus); }
@media (prefers-reduced-motion: no-preference) {
  /* Eine eigene Ebene bekommt nur, was gerade im Bild ist (data-im-bild setzt der Kern). */
  :is(.ref-werk, .ref-extra, .ref-umsetzung, .ref-buehne-werke)[data-im-bild] .fenster-sicht img,
  .ref-buehne-werke[data-im-bild] .ref-telefon-lang .telefon-sicht img { will-change: transform; }
  .ref-werk:focus-within .fenster-sicht img { transform: translateY(calc(-85% + 100cqh)); transition: transform var(--ref-lauf, 18s) cubic-bezier(.45, 0, .55, 1) 240ms; }
  @media (hover: hover) and (pointer: fine) {
    .ref-werk:hover .fenster-sicht img { transform: translateY(calc(-85% + 100cqh)); transition: transform var(--ref-lauf, 18s) cubic-bezier(.45, 0, .55, 1) 240ms; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ref-werk, .ref-werk .fenster-sicht img { translate: none; }
}

/* Eigenes Produkt: eine Aussage, darunter Fenster und Telefon auf dem Sockel. */
.ref-eigen { padding: var(--raum-6) var(--seitenrand); }
.ref-eigen h2 { max-width: 15em; margin-bottom: var(--raum-5); }
/* Das Telefon hängt rechts unten vor dem Fenster: dort liegt bei linksbündigen Seiten Bildfläche, kein Text und kein Knopf. Das Schild weicht ihm aus. */
.ref-geraete .telefon { position: absolute; right: -.35rem; bottom: -1.25rem; z-index: 2; --telefon-b: clamp(6.25rem, 27vw, 8.5rem); translate: 0 calc((var(--p, .5) - .5) * -2.5rem); }
.ref-eigen .schild, .ref-extra .schild { padding-right: clamp(6.5rem, 29vw, 9rem); }

@media (min-width: 40rem) and (max-width: 55.99rem) {
  .ref-werk-entwurf { width: 84%; }
  .ref-werk-entwurf:nth-child(even) { margin-left: auto; }
}

@media (min-width: 56rem) {
  .ref-gruppe, .ref-werke { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.4vw, 2.5rem); }
  .ref-werke { grid-column: 1 / -1; grid-row: 1; row-gap: var(--raum-6); align-items: start; }
  .ref-wandtext { grid-row: 1; z-index: 1; align-self: start; margin-bottom: 0; }
  .ref-gruppe-live .ref-wandtext { grid-column: 10 / -1; padding-top: 1.9rem; }
  .ref-gruppe-entwurf .ref-wandtext { grid-column: 1 / 5; padding-top: 1.9rem; }
  .ref-werk-live:nth-child(odd) { grid-column: 1 / 10; }
  .ref-werk-live:nth-child(even) { grid-column: 4 / -1; }
  .ref-werk-entwurf:nth-child(odd) { grid-column: 7 / -1; --ref-tiefe: -3rem; }
  .ref-werk-entwurf:nth-child(even) { grid-column: 2 / 7; margin-top: calc(clamp(8rem, 15vw, 14rem) * -1); --ref-tiefe: -6.5rem; }
  .ref-eigen .ref-werke { display: grid; }
  .ref-werk-eigen { grid-column: 4 / 12; }
  .ref-geraete .telefon { right: clamp(-4rem, -4.5vw, -1.5rem); bottom: -2rem; --telefon-b: clamp(8.5rem, 12vw, 12rem); }
  .ref-eigen .schild, .ref-extra .schild { padding-right: clamp(6rem, 9vw, 9.5rem); }
}

/* Verzeichnis: jede Arbeit eine Zeile. Name, Angabe, Leistungen, Stand. */
.ref-zeilen { border-top: 1px solid var(--linie-stark); }
.ref-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .15rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.ref-zeile-name { justify-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - .35rem) / 0 1px no-repeat; transition: background-size var(--mittel) var(--aus), transform var(--kurz) var(--aus); }
.ref-zeile .stand { grid-column: 2; grid-row: 1; }
.ref-zeile-angabe, .ref-zeile-leistungen { grid-column: 1 / -1; }
.ref-zeile-angabe { font-size: .9375rem; color: var(--schrift-2); }
/* Die Leistungen stehen als Reihe mit Abstand statt mit Komma: bricht die Reihe um, hängt kein Satzzeichen am Zeilenende. */
.ref-zeile-leistungen { display: flex; flex-wrap: wrap; gap: 0 1.1rem; color: var(--schrift-2); }
.ref-zeile-leistungen a { display: inline-block; padding: .6rem 0; text-decoration-color: var(--linie-stark); transition: color var(--kurz) ease, text-decoration-color var(--kurz) ease; }
.ref-zeile-name:active { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  .ref-zeile-name:hover { background-size: 100% 1px; }
  .ref-zeile-leistungen a:hover { color: var(--schrift); text-decoration-color: currentColor; }
}
@media (min-width: 62rem) {
  .ref-zeile { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.5fr) 8.5rem; column-gap: 2rem; padding: .7rem 0; }
  .ref-zeile-angabe, .ref-zeile-leistungen, .ref-zeile .stand { grid-column: auto; grid-row: auto; }
  .ref-zeile .stand { justify-self: end; }
}
/* Mit der Maus genügt eine flache Trefferfläche, die Zeilen der Reihe rücken zusammen. Am Finger bleibt sie groß. */
@media (min-width: 62rem) and (hover: hover) and (pointer: fine) { .ref-zeile-leistungen a { padding: .15rem 0; } }

/* ---------- Seite einer Arbeit ---------- */

/* Kopf: knapp gehalten, damit das Werk schon im ersten Bild hängt. Ab 56rem stehen Satz und Stand rechts neben dem Namen,
   solange der Name in eine Zeile passt. Ein langer Name behält seine ganze Zeile, Satz und Stand rücken darunter. */
.seite-referenz .seitenkopf { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: var(--raum-4); }
.ref-kopf-seite { margin-top: var(--raum-3); }
.seitenkopf .ref-kopf-seite .vorspann { margin-top: 0; }
.ref-kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.75rem; margin-top: var(--raum-2); }
@media (prefers-reduced-motion: no-preference) { .seitenkopf > .ref-kopf-seite { animation: zeile-rein 900ms var(--aus) 90ms both; } }
@media (min-width: 56rem) {
  /* Name und Stand stehen auf einer Grundlinie; Browser ohne „last baseline“ richten an der Unterkante aus. */
  .seite-referenz .seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; align-items: last baseline; gap: var(--raum-3) clamp(2rem, 6vw, 6rem); }
  .seite-referenz .seitenkopf .pfad { flex: 0 0 100%; margin-bottom: 0; }
  .seite-referenz .seitenkopf h1 { flex: 0 1 auto; min-width: 0; }
  .ref-kopf-seite { flex: 1 1 22rem; min-width: 0; margin-top: 0; }
}

/* Bühne: das Werk beherrscht die Ansicht. Das Scrollen fährt die Seite durch ihr Fenster (--q, 0 bis 1, aus 04-referenzen.js), das Telefon läuft mit. */
.ref-buehne { padding: 0 var(--seitenrand); overflow-x: clip; }
.ref-buehne-werke { margin: 0; max-width: 74rem; }
.ref-buehne .fenster-sicht { aspect-ratio: 10 / 7.4; }
.ref-buehne-fenster .fenster-sicht img { translate: 0 calc(var(--q, 0) * .86 * (-100% + 100cqh)); }
.ref-buehne-telefon { position: absolute; right: -.35rem; bottom: -1.25rem; z-index: 2; --telefon-b: clamp(6.75rem, 30vw, 9rem); translate: 0 calc(var(--q, 0) * -2rem); }
.ref-buehne-telefon .telefon { position: static; translate: none; }
.ref-telefon-lang .telefon-sicht img { translate: 0 calc(var(--q, 0) * -24%); }
.ref-buehne figcaption { margin-top: 1.25rem; padding-right: clamp(7rem, 32vw, 9.5rem); }
@keyframes ref-werk-hell { from { opacity: 0; transform: translateY(1.75rem) scale(.985); filter: brightness(.55); } }
@media (prefers-reduced-motion: no-preference) {
  .ref-buehne-fenster { animation: ref-werk-hell 1300ms var(--aus) 160ms both; }
  .ref-buehne-telefon { animation: ref-werk-hell 1300ms var(--aus) 400ms both; }
}
@media (min-width: 56rem) {
  .ref-buehne .ref-geraete { padding-right: clamp(4rem, 8vw, 8rem); }
  .ref-buehne .fenster-sicht { aspect-ratio: 16 / 9.6; }
  .ref-buehne-telefon { right: 0; bottom: -2.75rem; --telefon-b: clamp(10rem, 15.5vw, 14.5rem); translate: 0 calc(var(--q, 0) * -4.5rem); }
  .ref-buehne figcaption { padding-right: 0; }
}

/* Aufgabe: links der Satz, rechts die Angaben. */
.ref-aufgabe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); align-items: start; }
.ref-aufgabe .gross { margin-top: var(--raum-3); }
.ref-leistungen { margin: -.6rem 0; text-wrap: balance; }
.ref-leistungen a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration-color: var(--linie-stark); transition: text-decoration-color var(--kurz) ease; }
@media (hover: hover) and (pointer: fine) { .ref-leistungen a:hover { text-decoration-color: currentColor; } }
@media (min-width: 56rem) {
  .ref-aufgabe { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 6vw, 6rem); }
  .ref-aufgabe-fakten { padding-top: .75rem; }
  /* Schmale Spalte: das Etikett bekommt nur, was das längste Wort braucht, der Rest gehört dem Wert. */
  .ref-aufgabe-fakten .fakt { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* Umsetzung: Punkte als Zeilen. Ohne Detailaufnahmen bleibt links die erste Ansicht stehen, mit ihnen führt jede Zeile ihr Bild. */
.ref-umsetzung { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); align-items: start; }
.ref-umsetzung-werk { margin-top: var(--raum-4); }
/* Das Fenster neben den Punkten zeigt die Seite ab der Mitte und fährt beim Lesen bis zu ihrem Ende. */
.ref-umsetzung-werk .fenster-sicht img { translate: 0 calc((.42 + var(--p, 0) * .58) * (-100% + 100cqh)); }
.ref-punkte { border-top: 1px solid var(--linie-stark); }
.ref-punkt { padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie); }
.ref-punkt p { margin-top: .45rem; max-width: 34em; color: var(--schrift-2); }
.ref-punkt-werk { margin-top: var(--raum-3); }
@media (min-width: 56rem) {
  .ref-umsetzung { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); }
  .ref-umsetzung-kopf { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
  .ref-umsetzung-detail { grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  .ref-umsetzung-detail .ref-umsetzung-kopf { position: static; }
  .ref-punkt-bild { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; padding: var(--raum-4) 0; }
  .ref-punkt-werk { margin-top: 0; }
}

/* Weitere Ansichten: wieder ein Werk mit Schild, die Seite fährt beim Vorbeiscrollen durch. */
.ref-weitere-werke { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); }
.ref-extra[data-szene] .fenster-sicht img { translate: 0 calc(clamp(0, (var(--p, 0) - .22) / .6, 1) * .6 * (-100% + 100cqh)); }
@media (prefers-reduced-motion: reduce) { .ref-extra[data-szene] .fenster-sicht img, .ref-geraete .telefon { translate: none; } }
@media (min-width: 56rem) {
  .ref-extra { margin-left: clamp(4rem, 12vw, 12rem); }
  /* Hier reicht das Werk bis an den Rand der Wand: das Telefon ragt nur halb so weit hinaus und bleibt im Seitenrand. */
  .ref-extra .telefon { right: clamp(-2.5rem, -2.5vw, -1rem); }
  /* Eine einzelne Detailaufnahme hängt wie eine Zeile der Umsetzung, nur gespiegelt: links das Bild, rechts seine Zeile. */
  .ref-detail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .ref-detail .schild { margin-top: 0; }
}

/* Weiter: eine große Zeile, daneben klein das nächste Werk. */
.ref-weiter { padding: 0 var(--seitenrand) var(--raum-5); }
.ref-weiter a { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--raum-4); padding: var(--raum-4) 0 0; border-top: 1px solid var(--linie-stark); text-decoration: none; }
/* Folgt der Verweis direkt auf die Liste der Umsetzung, schließt deren letzte Linie ab: keine zweite Linie mit leerem Band dazwischen. */
.ref-umsetzung + .ref-weiter a { border-top: 0; padding-top: 0; }
.ref-weiter-zeile { transition: transform var(--kurz) var(--aus); }
.ref-weiter-zeile .icon { display: inline-block; width: .72em; height: .72em; margin-left: .15em; vertical-align: -.04em; transition: transform 260ms var(--aus); }
.ref-weiter-angabe { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; margin-top: var(--raum-2); font-size: .9375rem; color: var(--schrift-2); }
.ref-weiter-bild { max-width: 26rem; }
.ref-weiter-bild .fenster { filter: brightness(.9); transition: transform var(--mittel) var(--aus), filter var(--mittel) ease; }
.ref-weiter a:active .ref-weiter-zeile { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  .ref-weiter a:hover .ref-weiter-zeile .icon { transform: translateX(.35em); }
  .ref-weiter a:hover .fenster { filter: none; transform: translateY(-.35rem); }
}
.ref-weiter a:focus-visible .fenster { filter: none; }
@media (min-width: 56rem) {
  .ref-weiter a { grid-template-columns: minmax(0, 1fr) clamp(14rem, 26vw, 23rem); gap: clamp(2rem, 6vw, 6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .ref-weiter a:hover .fenster, .ref-weiter a:hover .ref-weiter-zeile .icon { transform: none; }
}

/* ---------- Kennzahlen (Übersicht): zwei Zahlen über der Wand, Haarlinie darüber und darunter ---------- */
.ref-zahlen { padding-top: var(--raum-4); padding-bottom: var(--raum-5); }
.ref-zahlen-liste { display: flex; flex-wrap: wrap; gap: var(--raum-3) var(--raum-6); padding: var(--raum-3) 0; border-block: 1px solid var(--linie); }
.ref-zahlen-liste li { display: grid; gap: .5rem; }
.ref-zahl { font-size: clamp(2.75rem, 8vw, 5.5rem); font-weight: var(--g-zeile); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ref-zahl-text { font-size: 1.0625rem; color: var(--schrift-2); }
.ref-zahlen-hinweis { margin-top: var(--raum-2); color: var(--schrift-3); }

/* Übrige Seiten der Werkschau: Ablauf, Über mich, Kontakt, Recht, 404. */

/* Nach dem Seitenkopf beginnt der Inhalt ohne zweiten Abstand. Nach einer Sockelfläche bekommt der nächste Abschnitt ihn zurück. */
.seitenkopf + .ablauf-gang, .seitenkopf + .ueber-haltung, .seitenkopf + .kontakt-raster, .seitenkopf + .recht-blatt, .seitenkopf + .fehler-wege { padding-top: 0; }
.abschnitt.sockel + .abschnitt.ablauf-fragen, .abschnitt.sockel + .abschnitt.ueber-erreichbar { padding-top: var(--raum-6); }

/* ---------- Ablauf: links bleibt stehen, was schon feststeht, rechts die Schritte an einer Linie, die mit dem Lesen wächst. ---------- */
.ablauf-gang { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.ablauf-stand { position: sticky; top: calc(var(--kopfhoehe) + 2rem); container-type: inline-size; }
/* Die Zeile gibt in der schmalen Spalte nach, damit sie dreizeilig bleibt. */
.ablauf-stand h2 { max-width: 10em; font-size: min(clamp(2rem, 1.3rem + 2.8vw, 3.75rem), 12.6cqi); }
.ablauf-uebersicht { max-width: 27rem; margin-top: var(--raum-4); }
.ablauf-uebersicht ol { border-top: 1px solid var(--linie-stark); counter-reset: posten; }
.ablauf-posten a {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; align-items: center; column-gap: .5rem;
  min-height: 2.75rem; padding: .35rem 0; border-bottom: 1px solid var(--linie);
  font-size: .9375rem; line-height: 1.3; text-decoration: none;
}
.ablauf-posten a::before { counter-increment: posten; content: counter(posten); font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--schrift-3); }
.ablauf-posten-name { transition: color var(--mittel) ease 300ms; }
.ablauf-posten-stand { display: inline-flex; align-items: center; gap: .45em; font-size: .8125rem; font-weight: 600; white-space: nowrap; transition: opacity var(--mittel) ease 300ms, transform 600ms var(--aus) 300ms; }
/* Ein Ergebnis erscheint in der Übersicht, sobald sein Schritt gelesen wird, und bleibt stehen. Ohne Skript oder ohne :has() steht alles da. */
@supports selector(:has(a)) {
  .js .ablauf-posten-name { color: var(--schrift-3); }
  .js .ablauf-posten-stand { opacity: 0; transform: translateX(-.6rem); }
  .js .ablauf-gang:has(#schritt-1.ist-da) .ablauf-posten:nth-child(1) span,
  .js .ablauf-gang:has(#schritt-2.ist-da) .ablauf-posten:nth-child(2) span,
  .js .ablauf-gang:has(#schritt-3.ist-da) .ablauf-posten:nth-child(3) span,
  .js .ablauf-gang:has(#schritt-4.ist-da) .ablauf-posten:nth-child(4) span,
  .js .ablauf-gang:has(#schritt-5.ist-da) .ablauf-posten:nth-child(5) span,
  .js .ablauf-gang:has(#schritt-6.ist-da) .ablauf-posten:nth-child(6) span { color: var(--schrift); opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) { .ablauf-posten a:hover .ablauf-posten-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } }

.ablauf-schritte { --ablauf-ein: clamp(1.75rem, 4vw, 3.25rem); --ablauf-kopf: clamp(2rem, 1.35rem + 2.7vw, 3.6rem); position: relative; padding-left: var(--ablauf-ein); }
.ablauf-schritte::before, .ablauf-schritte::after { content: ""; position: absolute; left: .3rem; top: calc(var(--ablauf-kopf) * .53); bottom: 0; width: 1px; background: var(--linie); }
.ablauf-schritte::after { background: var(--schrift); transform: scaleY(var(--p, 1)); transform-origin: top; }
.ablauf-schritt { position: relative; padding-bottom: var(--raum-5); }
.ablauf-schritt:last-child { padding-bottom: 0; }
.ablauf-schritt::before {
  content: ""; position: absolute; left: calc(var(--ablauf-ein) * -1); top: calc(var(--ablauf-kopf) * .53 - .325rem); z-index: 1; width: .65rem; height: .65rem; border-radius: 50%;
  background: var(--schrift); transition: background-color var(--mittel) ease 300ms, box-shadow var(--mittel) ease 300ms;
}
.js .ablauf-schritt:not(.ist-da)::before { background: var(--wand); box-shadow: inset 0 0 0 1.5px var(--schrift-3); }
.ablauf-schritt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 2rem; }
.ablauf-ergebnis { display: inline-flex; align-items: center; gap: .45em; font-size: .9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.ablauf-schritt .gross { margin-top: var(--raum-2); }
.ablauf-schritt .fakten { max-width: 44rem; margin-top: var(--raum-3); }

/* Übergabe: was an den Kunden geht, daneben ein Werk, das unter der Domain seines Betriebs läuft. */
.ablauf-uebergabe, .ueber-betrieb { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem); }
.ablauf-uebergabe-text, .ueber-betrieb-text { container-type: inline-size; }
/* „Das Übergabeprotokoll.“ bleibt in der schmalen Spalte eine Zeile: die Stufe gibt nach, bevor „Das“ allein steht. */
.ablauf-uebergabe-text h2 { font-size: min(clamp(2rem, 1.35rem + 2.7vw, 3.6rem), 9.5cqi); }
.ablauf-uebergabe-text > .vorspann, .ueber-betrieb-text > .vorspann { margin-top: var(--raum-3); }
.ablauf-habe, .ueber-werkzeuge { margin-top: var(--raum-4); border-top: 1px solid var(--linie-stark); }
.ablauf-habe li, .ueber-werkzeuge li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .15rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.ueber-werkzeuge li { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }
/* Wird die Textspalte schmal, steht die Erklärung unter dem Namen statt daneben. */
@container (max-width: 31rem) { .ablauf-habe li, .ueber-werkzeuge li { grid-template-columns: minmax(0, 1fr); } }
.ablauf-habe span, .ueber-werkzeuge span { color: var(--schrift-2); }
.ablauf-zusage { margin-top: var(--raum-4); }
.ablauf-fragen, .ueber-erreichbar { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; gap: var(--raum-4) clamp(2rem, 6vw, 6rem); }

@media (max-width: 55.99rem) {
  .ablauf-gang, .ablauf-uebergabe, .ueber-betrieb, .ablauf-fragen, .ueber-erreichbar { grid-template-columns: minmax(0, 1fr); }
  .ablauf-stand { position: static; }
  .ablauf-uebersicht { display: none; }
}
@media (max-height: 38rem) { .ablauf-stand { position: static; } }

/* ---------- Über mich: die Haltung groß, die Arbeitsweise als Zeilen, das eigene Produkt als Werk. ---------- */
.ueber-haltung { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); align-items: end; gap: var(--raum-4) clamp(2rem, 6vw, 6rem); }
.ueber-satz { max-width: 13em; margin-top: var(--raum-4); }
/* Zwei Sätze, zwei Ränge: der erste tritt zurück, der zweite steht. Beide steigen nacheinander aus der Maske. */
.ueber-maske { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.ueber-maske > span { display: block; }
.ueber-maske:first-child { color: var(--schrift-3); }
.js .ueber-satz[data-auf] { opacity: 1; transform: none; }
.js .ueber-maske > span { transform: translateY(112%); transition: transform 1100ms var(--aus); }
.js .ueber-satz.ist-da .ueber-maske > span { transform: none; }
.js .ueber-satz.ist-da .ueber-maske + .ueber-maske > span { transition-delay: 420ms; }
.ueber-text > * + * { margin-top: 1em; }
.ueber-text p { max-width: 34em; color: var(--schrift-2); }
.ueber-portrait { --bild-b: clamp(10rem, 20vw, 15rem); width: fit-content; margin-bottom: var(--raum-3); }

.ueber-arbeit h2 { margin-bottom: var(--raum-5); }
.ueber-zeilen { border-top: 1px solid var(--linie-stark); }
.ueber-zeilen li { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: baseline; gap: .5rem clamp(2rem, 6vw, 6rem); padding: clamp(1.25rem, 2.4vw, 2rem) 0; border-bottom: 1px solid var(--linie); }
.ueber-zeilen p { max-width: 34em; color: var(--schrift-2); }

.ueber-werkzeuge .textlink { display: flex; width: fit-content; margin-top: .15rem; color: var(--schrift); }
/* Das Werk hängt vor der Wand: beim Durchlaufen wandert es eine Spur langsamer als der Text. */
.ueber-werk .fenster { translate: 0 calc((.5 - var(--p, .5)) * 2.5rem); }
/* Eigene Ebene nur, solange die Szene im Bild ist und sich etwas bewegt. */
@media (prefers-reduced-motion: no-preference) {
  .ueber-werk[data-im-bild] .fenster { will-change: translate; }
  .ablauf-schritte[data-im-bild]::after { will-change: transform; }
}

@media (max-width: 55.99rem) {
  .ueber-haltung { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ueber-zeilen li { grid-template-columns: minmax(0, 1fr); }
  .ueber-werk .fenster { translate: none; }
}

/* ---------- Kontakt: links das Formular, rechts die direkten Wege. ---------- */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); align-items: start; gap: var(--raum-5) clamp(2.5rem, 6vw, 6rem); }
.kontakt-wege { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
.kontakt-wege .fakten { margin-top: var(--raum-3); }
.kontakt-wege dd, .ueber-erreichbar dd { text-wrap: pretty; }
/* In der schmalen Spalte braucht die Angabe wenig Platz, damit eine E-Mail-Adresse in einer Zeile steht. */
@media (min-width: 56rem) { .kontakt-wege .fakt { grid-template-columns: 5.5rem minmax(0, 1fr); } }
.kontakt-offen { margin-top: var(--raum-2); }
.kontakt-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-3) 1.5rem; margin-top: var(--raum-3); padding-top: var(--raum-3); border-top: 1px solid var(--linie-stark); }
.kontakt-feld-breit { grid-column: 1 / -1; }
.kontakt-feld > label, .kontakt-etikett, .kontakt-entwurf > label { display: block; margin-bottom: .5rem; font-size: .9375rem; font-weight: 500; line-height: 1.35; }
.kontakt-pflicht { margin-left: .5em; font-size: .8125rem; font-weight: 400; color: var(--schrift-3); }
.kontakt-feld :is(input[type="text"], textarea, select) {
  display: block; width: 100%; min-height: 3.25rem; padding: .8rem 1rem;
  background: var(--tafel); border: 1px solid var(--linie-stark);
  font-size: 1.0625rem; line-height: 1.4;
  transition: border-color var(--kurz) ease, box-shadow var(--kurz) ease;
}
.kontakt-feld textarea { min-height: 8rem; resize: vertical; }
.kontakt-feld select { -webkit-appearance: none; appearance: none; padding-right: 3rem; cursor: pointer; }
.kontakt-auswahl { position: relative; }
.kontakt-auswahl .icon { position: absolute; right: 1rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; color: var(--schrift-2); pointer-events: none; }
.kontakt-feld :is(input[type="text"], textarea, select):focus-visible { border-color: var(--schrift); outline-offset: 2px; }
.kontakt-feld :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
.kontakt-hilfe { margin-top: .45rem; font-size: .875rem; line-height: 1.45; color: var(--schrift-2); }
.kontakt-fehler { margin-top: .45rem; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--fehler); }
/* Meldungen treten ein, statt zu springen (wo der Browser es kann). */
.kontakt-fehler, .kontakt-status { transition: opacity var(--mittel) ease, transform var(--mittel) var(--aus); }
@starting-style { .kontakt-fehler, .kontakt-status { opacity: 0; transform: translateY(-.35rem); } }

/* Ankreuzfelder: eine ruhige Liste, das Kästchen füllt sich beim Wählen. */
.kontakt-kreuze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; border-top: 1px solid var(--linie); }
.kontakt-kreuz { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 3rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); line-height: 1.3; cursor: pointer; }
.kontakt-kreuz input { position: absolute; left: 0; top: 50%; width: 1.375rem; height: 1.375rem; margin: -.6875rem 0 0; opacity: 0; cursor: pointer; }
.kontakt-kasten { flex: none; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; background: var(--tafel); box-shadow: inset 0 0 0 1px var(--linie-stark); transition: background-color var(--kurz) ease, box-shadow var(--kurz) ease, transform var(--kurz) var(--aus); }
.kontakt-kasten .icon { width: .95rem; height: .95rem; color: var(--knopf-sch); opacity: 0; transform: scale(.6); transition: opacity var(--kurz) ease, transform var(--kurz) var(--aus); }
.kontakt-kreuz input:checked + .kontakt-kasten { background: var(--knopf-fl); box-shadow: inset 0 0 0 1px var(--knopf-fl); }
.kontakt-kreuz input:checked + .kontakt-kasten .icon { opacity: 1; transform: none; }
.kontakt-kreuz input:focus-visible + .kontakt-kasten { outline: 2px solid var(--fokus); outline-offset: 3px; }
.kontakt-kreuz:active .kontakt-kasten { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  .kontakt-feld :is(input[type="text"], textarea, select):hover { border-color: var(--schrift); }
  .kontakt-kreuz:hover input:not(:checked) + .kontakt-kasten { box-shadow: inset 0 0 0 1px var(--schrift); }
}

.kontakt-vermerk { max-width: 44rem; margin-top: var(--raum-4); }
.kontakt-vermerk strong { color: var(--schrift); }
.kontakt-senden { margin-top: var(--raum-3); }
/* Läuft das Skript der Seite nicht, bleibt der Knopf gesperrt und dieser Satz sagt, wie es weitergeht. */
.kontakt-ohne-skript { max-width: 44rem; margin-top: var(--raum-2); }
.js .kontakt-ohne-skript { display: none; }
/* Nach dem Senden: ein Satz. Klappt es nicht, steht darunter derselbe Text zum Kopieren. */
.kontakt-status { margin-top: var(--raum-3); padding-top: 1rem; border-top: 1px solid var(--linie-stark); }
.kontakt-status-zeile { display: flex; align-items: flex-start; gap: .7rem; max-width: 44rem; }
.kontakt-status-zeile .icon { width: 1.15em; height: 1.15em; margin-top: .22em; }
.kontakt-status-zeile:focus { outline: none; }
.kontakt-status-fehler strong { color: var(--fehler); }
/* Während des Sendens bleibt der Knopf fokussierbar, nimmt aber keinen zweiten Klick an. */
.knopf[aria-disabled="true"] { opacity: .6; cursor: progress; }
.kontakt-entwurf { margin-top: var(--raum-3); }
.kontakt-entwurf textarea { display: block; width: 100%; padding: .9rem 1rem; background: var(--sockel); border: 0; font-size: .9375rem; line-height: 1.5; color: var(--schrift-2); resize: vertical; }
.kontakt-kopieren { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: var(--raum-2); }
.kontakt-folgt { font-weight: 400; color: var(--schrift-3); }
.kontakt-hinweis { display: block; font-size: .875rem; font-weight: 400; line-height: 1.45; color: var(--schrift-2); }

@media (max-width: 55.99rem) {
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); }
  .kontakt-wege { position: static; }
}
@media (max-width: 35.99rem) {
  .kontakt-felder, .kontakt-kreuze { grid-template-columns: minmax(0, 1fr); }
  .kontakt-feld { grid-column: 1 / -1; }
  .kontakt-senden .knopf { width: 100%; justify-content: center; }
}

/* ---------- Rechtstexte: links der Prüfvermerk, rechts der Text in Lesebreite. ---------- */
.recht-blatt { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; gap: var(--raum-4) clamp(2rem, 6vw, 6rem); }
.recht-vermerk { position: sticky; top: calc(var(--kopfhoehe) + 2rem); display: grid; gap: .7rem; max-width: 23rem; padding-top: 1rem; border-top: 1px solid var(--linie-stark); font-size: .9375rem; line-height: 1.5; color: var(--schrift-2); }
/* Lesebreite: höchstens rund 75 Zeichen je Zeile. Der Text bleibt in seiner Spalte, auch wenn der Vermerk entfällt. */
.recht-text { max-width: 34em; }
@media (min-width: 56rem) { .recht-text { grid-column: 2; } }
.recht-text h2 { margin-top: var(--raum-4); }
.recht-text h2:first-child { margin-top: 0; }
.recht-text h2 + * { margin-top: .7rem; }
.recht-text .fakten { max-width: 32rem; }
/* Absätze der AGB: die Ziffer steht vor dem Satz, damit man auf „§ 5 Absatz 3“ zeigen kann. */
.recht-liste { counter-reset: absatz; }
.recht-liste li { position: relative; padding-left: 2.1em; counter-increment: absatz; }
.recht-liste li + li { margin-top: .7em; }
.recht-liste li::before { content: "(" counter(absatz) ")"; position: absolute; left: 0; color: var(--schrift-3); font-variant-numeric: tabular-nums; }
.recht-text a { text-decoration: underline; }
@media (max-width: 55.99rem) {
  .recht-blatt { grid-template-columns: minmax(0, 1fr); }
  .recht-vermerk { position: static; max-width: 34rem; }
}

/* ---------- 404: vier Wege zurück, als Liste an der Wand. ---------- */
.fehler-wege ul { max-width: 54rem; border-top: 1px solid var(--linie-stark); }
.fehler-weg { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1rem, 2vw, 1.5rem) 0; border-bottom: 1px solid var(--linie); text-decoration: none; transition: color var(--mittel) ease; }
.fehler-weg .zeile-2 { display: block; transition: transform var(--kurz) var(--aus); }
.fehler-weg .icon { width: 1.5rem; height: 1.5rem; transition: transform 260ms var(--aus); }
.fehler-weg:active .zeile-2 { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  /* Die übrigen Wege treten über die Farbrolle zurück und bleiben lesbar. */
  .fehler-wege ul:hover .fehler-weg:not(:hover) { color: var(--schrift-3); }
  .fehler-weg:hover .icon { transform: translateX(.4rem); }
}

/* Ruhige Fassung: alles steht vollständig da, nichts fährt. */
@media (prefers-reduced-motion: reduce) {
  .js .ueber-maske > span { transform: none; transition: none; }
  .js .ablauf-posten-stand { transform: none; }
  .ablauf-posten-stand, .ablauf-posten-name, .kontakt-fehler, .kontakt-status, .kontakt-kasten, .kontakt-kasten .icon, .fehler-weg .zeile-2, .fehler-weg .icon { transition: none; }
  .ueber-werk .fenster { translate: none; }
}

/* Druck und PDF: auch was erst beim Lesen erscheint, steht vollständig da. Nichts bleibt angeheftet. */
@media print {
  .ablauf-stand, .kontakt-wege, .recht-vermerk { position: static; }
  .js .ablauf-posten-name { color: inherit; }
  .js .ablauf-posten-stand { opacity: 1; transform: none; }
  .js .ueber-maske > span { transform: none; }
  .ablauf-schritte::after { transform: none; }
  .ueber-werk .fenster { translate: none; }
  .kontakt-senden, .kontakt-ohne-skript { display: none; }
}

/* Bewegung über die ganze Seite: Titel, Wortfüllung, Schnitt, kleine Reaktionen. Grammatik „Licht, Kamera, Titel, Schnitt“.
   Das eine grafische Motiv ist die gezeichnete Haarlinie: 1 Pixel, Graphit, mit einem Wort oder einer Ziffer am Ende. */

/* ---------- Titel ---------- */
/* Abschnittsüberschriften öffnen sich als Blende, ein Block, dieselbe Geste wie bei den Bildern. Die Blende sitzt auf dem
   inneren Block, damit die Überschrift selbst für den Beobachter sichtbar bleibt. */
.tz { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-auf="titel"] { opacity: 1; transform: none; transition: none; }
  .js [data-auf="titel"] .tz { clip-path: inset(-.2em -.1em 100% -.1em); transition: clip-path 700ms var(--aus); }
  .js [data-auf="titel"].ist-da .tz { clip-path: inset(-.2em -.1em -.3em -.1em); }
}
/* Wort für Wort aus der Maske steigen nur die Hauptzeile jeder Seite und ihre Schlusszeile (geteilt beim Bau, bausteine.mjs).
   Die Maske lässt Unterlängen und Umlautpunkte frei. */
.w { display: inline-block; clip-path: inset(-.2em -.1em -.26em); }
.w > span { display: inline-block; }
.w:nth-child(2) { --i: 1; } .w:nth-child(3) { --i: 2; } .w:nth-child(4) { --i: 3; } .w:nth-child(5) { --i: 4; }
.w:nth-child(6) { --i: 5; } .w:nth-child(7) { --i: 6; } .w:nth-child(8) { --i: 7; } .w:nth-child(9) { --i: 8; }
.w:nth-child(10) { --i: 9; } .w:nth-child(11) { --i: 10; } .w:nth-child(n+12) { --i: 11; }
@keyframes wort-rein { from { transform: translateY(1.35em); } }
@media (prefers-reduced-motion: no-preference) {
  /* Die Hauptzeile gleich beim Laden, ohne auf das Skript zu warten. --z versetzt ganze Zeilen. */
  [data-titel] .w > span { animation: wort-rein var(--lang) var(--aus) calc(var(--i, 0) * 34ms + var(--z, 0) * 130ms) backwards; }
  /* Die Schlusszeile beim Eintreten ins Bild (01-kern.js setzt ist-da). */
  .js [data-auf="worte"] { opacity: 1; transform: none; transition: none; }
  .js [data-auf="worte"] .w > span { transform: translateY(1.35em); transition: transform var(--lang) var(--aus) calc(var(--i, 0) * 34ms); }
  .js [data-auf="worte"].ist-da .w > span { transform: none; }
}
@media print { .w > span, .tz { transform: none !important; animation: none !important; clip-path: none !important; } }

/* ---------- Wortfüllung: nur der Kernsatz. Er füllt sich Wort für Wort, während er durch die Lesehöhe wandert. ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  .js [data-fuellen] .w { color: var(--schrift-3); transition: color 520ms ease; }
  .js [data-fuellen] .w.voll { color: var(--schrift); }
}

/* ---------- Schnitt: beim Seitenwechsel bleibt der Kopf stehen, die neue Seite steigt nach ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kopf { view-transition-name: kopf; }
  ::view-transition-old(root) { animation: schnitt-raus 170ms ease both; }
  ::view-transition-new(root) { animation: schnitt-rein 460ms var(--aus) both; }
}
/* Kamerafahrt: wer von der Übersicht zu einer Arbeit wechselt (oder zur nächsten), sieht ihr Fenster an seinen Platz fahren. */
@media (prefers-reduced-motion: no-preference) {
  .vt-celt { view-transition-name: werk-celt; }
  .vt-erdmann { view-transition-name: werk-erdmann; }
  .vt-dein-kunstwerk { view-transition-name: werk-dein-kunstwerk; }
  ::view-transition-group(*) { animation-duration: 560ms; animation-timing-function: var(--hin-her); }
  /* Seite und Kopf fahren nicht: ihr Wechsel endet mit der neuen Seite. */
  ::view-transition-group(root), ::view-transition-group(kopf) { animation-duration: 460ms; }
  /* Ein Werk ohne Gegenstück geht und kommt mit seiner Seite, nicht mit der Kamerafahrt. */
  ::view-transition-old(*):only-child { animation: schnitt-raus 170ms ease both; }
  ::view-transition-new(*):only-child { animation: schnitt-rein 460ms var(--aus) both; }
  /* „Weiter zu …“ trägt seinen Namen erst mit dem Klick (04-referenzen.js), sonst paart es sich mit dem Werk der Übersicht. */
  .ref-weiter-bild:not(.faehrt) { view-transition-name: none; }
}
@keyframes schnitt-raus { to { opacity: 0; } }
@keyframes schnitt-rein { from { opacity: 0; transform: translateY(1.25rem); } }

/* ---------- Live atmet zweimal, wenn das Werk erscheint. Keine Dauerschleife. ---------- */
@keyframes atmen { 50% { opacity: .35; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.ist-da, [data-da], .haengung) .stand-live::before { animation: atmen 2.2s ease-in-out 1.6s 2; }
}

/* ---------- Bedienung: Linien laufen von links durch ---------- */
.knopf-linie { background: linear-gradient(var(--knopf-fl), var(--knopf-fl)) 0 0 / 0 100% no-repeat; transition: background-size 260ms var(--aus), color var(--kurz) ease, transform var(--kurz) var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .knopf-linie:hover { background-color: transparent; background-size: 100% 100%; }
  .wf-marke span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--mittel) var(--aus); }
  .wf-marke:hover span { background-size: 100% 1px; }
}
@media (prefers-reduced-motion: reduce) { .knopf-linie, .wf-marke span { transition: none; } }

/* ---------- Erzwungene Farben (Kontrastmodus): Flächen und Schatten fallen weg, Form und Linie müssen bleiben. Dieser Block
   steht am Ende des gebauten CSS. ---------- */
@media (forced-colors: active) {
  .knopf { border: 1px solid ButtonText; }
  .bildnis, .fenster, .telefon { outline: 1px solid CanvasText; }
  .leistung::after, .abgleich-bahn::before, .abgleich-bahn::after, .wf-fortschritt span, .wf-kopf::before, .stand-live::before, .stand-eigen::before { background-color: CanvasText; }
}

/* Seit 14.10.2026: Lichtbahn, Wegweiser, Katalog mit Angeboten, Orbit „Einzeln buchbar“. Seit 15.10.2026 abends statt Titelfilm
   und Band das Projektfenster im ersten Bild (Leon: „lieber ein kleinerer Bereich, in dem Projekte laufen“) und die Leistungsliste
   mit allen Unterseiten. Glut (--punkt) ist das Licht der Marke: das W, der Live-Punkt, die Lichtbahn und die eine Linie, die gerade dran ist. */

/* ---------- Lichtbahn: das W des Logos hinter der ganzen Seite, Glut zieht sich mit dem Lesen durch ---------- */
.lichtbahn { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.lichtbahn svg { display: block; width: 100%; height: 100%; }
.lichtbahn path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lb-grund { stroke: color-mix(in srgb, var(--schrift) 6%, transparent); stroke-width: 1px; }
.lb-spur { stroke: var(--punkt); stroke-width: 1px; opacity: .28; stroke-dasharray: 1000px 1000px; stroke-dashoffset: calc((1 - var(--lb, 0)) * 1000px); }
.lb-hof, .lb-kopf { stroke: var(--punkt); stroke-dasharray: 16px 2000px; stroke-dashoffset: calc(16px - var(--lb, 0) * 1000px); }
.lb-hof { stroke-width: 12px; opacity: .12; }
.lb-kopf { stroke-width: 2.5px; }
@media (prefers-reduced-motion: reduce) { .lb-spur { stroke-dashoffset: 0; opacity: .2; } .lb-hof, .lb-kopf { display: none; } }
@media (forced-colors: active) { .lichtbahn { display: none; } }

/* ---------- Schalter an stummen Filmen (Projektfenster, Filme der Unterseiten) ---------- */
.film-schalter {
  display: inline-flex; align-items: center; gap: .55em; min-height: 2.75rem; padding: 0 1rem;
  border: 0; background: var(--tafel); box-shadow: inset 0 0 0 1px var(--linie-stark); color: var(--schrift); font-size: .9375rem; font-weight: 500;
  transition: background-color var(--kurz) ease, color var(--kurz) ease, transform var(--kurz) var(--aus);
}
.film-schalter:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .film-schalter:hover { background: var(--knopf-fl); color: var(--knopf-sch); } }
[data-projektion][data-laeuft] .film-i-play, [data-projektion]:not([data-laeuft]) .film-i-pause { display: none; }

/* ---------- Erstes Bild: Hauptzeile links, rechts das Projektfenster ---------- */
/* Im Fenster laufen gebaute Seiten und eigene Werkzeuge (scripts/filme.mjs). Das Standbild ist das erste Bild des Films, der Film
   blendet erst ein, wenn er läuft. Unter dem Fenster das Schild: was gerade läuft, mit Glutlinie unter dem Namen, der dran ist. */
.buehne { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; }
.projektfenster { margin: 0; }
.pf-sicht { position: relative; }
.pf-sicht :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pf-sicht video { opacity: 0; transition: opacity 600ms ease; }
.projektfenster[data-film-da] .pf-sicht video { opacity: 1; }
.fenster-adresse[data-projekt-adresse] { transition: opacity var(--kurz) ease; }
.pf-schild { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .5rem; align-items: start; margin-top: 1.1rem; }
.pf-schild .schild-name, .pf-schild .pf-liste, .pf-schild .schild-text { grid-column: 1; }
.pf-schild .film-schalter { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
.pf-liste { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--schrift-2); }
.pf-liste li { position: relative; padding-bottom: .3rem; transition: color var(--mittel) ease; }
.pf-liste li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--punkt); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--hin-her); }
.pf-liste li.ist-dran { color: var(--schrift); }
.pf-liste li.ist-dran::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .projektfenster .fenster { animation: hell 1300ms var(--aus) 200ms both; }
  .projektfenster .pf-schild { animation: zeile-rein 900ms var(--aus) 700ms backwards; }
}
@media (prefers-reduced-motion: reduce) { .pf-sicht video { transition-duration: 240ms; } .pf-liste li::after { transition: none; } }
@media (forced-colors: active) { .pf-sicht video { display: none; } }
@media (max-width: 55.99rem) {
  .buehne { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pf-schild { align-items: center; }
  .pf-schild .film-schalter { grid-row: 1; align-self: center; min-height: 2.75rem; padding: 0 .85rem; }
  .pf-schild .pf-liste, .pf-schild .schild-text { grid-column: 1 / -1; }
  .pf-liste { gap: .15rem .85rem; font-size: .875rem; }
}
/* Der Katalog schließt ans erste Bild an: dessen unterer Abstand genügt. */
.buehne + .etappen { padding-top: 0; }

/* ---------- Wegweiser: jeder Bereich mit seinen Angeboten, eine Zeile je Bereich ---------- */
.wegweiser ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie-stark); }
.wegweiser a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center;
  min-height: 3.5rem; padding: .8rem 0; border-bottom: 1px solid var(--linie); color: var(--schrift); text-decoration: none;
}
.ww-titel { font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); font-weight: var(--g-titel); line-height: 1.2; letter-spacing: -.015em; transition: transform var(--kurz) var(--aus); }
.ww-angebote { grid-column: 1; margin-top: .3rem; font-size: .9rem; line-height: 1.45; color: var(--schrift-2); }
.ww-trenner { color: var(--schrift-3); }
.ww-pfeil { grid-column: 2; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; transition: transform 260ms var(--aus), color var(--kurz) ease; }
/* Die Linie der Zeile, die dran ist, zieht sich in Glut durch: das Licht der Marke zeigt den Weg. */
.wegweiser a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--punkt); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--hin-her); }
.wegweiser a:focus-visible::after { transform: scaleX(1); }
.wegweiser a:active .ww-titel { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  .wegweiser a:hover::after { transform: scaleX(1); }
  .wegweiser a:hover .ww-pfeil { transform: translateX(.35rem); color: var(--punkt); }
}
@media (prefers-reduced-motion: reduce) { .wegweiser a::after, .ww-pfeil { transition: none; } }

/* ---------- Leistungen auf der Startseite: Liste mit allen Unterseiten, Themenbild als Vorschau ---------- */
.leistung { position: relative; padding: clamp(1.1rem, 2.2vw, 1.75rem) 0; border-bottom: 1px solid var(--linie); }
.leistung-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; color: var(--schrift); text-decoration: none; }
.leistung-kopf:active .leistung-titel { transform: translateX(2px); }
.leistung-pfeil { grid-row: 1 / span 2; }
.leistung::after { background: var(--punkt); }
@media (hover: hover) and (pointer: fine) { .leistung-kopf:hover .leistung-pfeil { transform: translateX(.4rem); } }
.leistung-angebote { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.leistung-angebote :is(a, span), .lst-angebote li, .lst-unter a, .hand-bereiche a {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: .3rem .6rem; border: 1px solid var(--linie-stark);
  font-size: .8125rem; font-weight: 500; line-height: 1.25; letter-spacing: .02em; color: var(--schrift-2); text-decoration: none;
}
.leistung-angebote a, .lst-unter a, .hand-bereiche a { transition: background-color var(--kurz) ease, color var(--kurz) ease, border-color var(--kurz) ease, transform var(--kurz) var(--aus); }
.leistung-angebote a:active, .lst-unter a:active, .hand-bereiche a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .leistung-angebote a:hover, .lst-unter a:hover, .hand-bereiche a:hover { background: var(--knopf-fl); border-color: var(--knopf-fl); color: var(--knopf-sch); } }
/* Trefferflächen am Handy: die Kärtchen werden zu Zeilen von 2.75rem. */
@media (pointer: coarse) { .leistung-angebote a, .lst-unter a, .hand-bereiche a { min-height: 2.75rem; } }

/* ---------- Was kostet das? (Startseite) ---------- */
.preise-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ps-text .vorspann { margin-top: var(--raum-3); }
.ps-text .aktionen { margin-top: var(--raum-4); }
.ps-pakete { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie-stark); }
.ps-pakete a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; min-height: 4rem; padding: 1rem 0; border-bottom: 1px solid var(--linie); color: var(--schrift); text-decoration: none; }
.ps-titel { font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); font-weight: var(--g-titel); letter-spacing: -.015em; }
.ps-spanne { grid-column: 1; margin-top: .3rem; font-size: .9375rem; color: var(--schrift-2); font-variant-numeric: tabular-nums; }
.ps-pfeil { grid-column: 2; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; transition: transform 260ms var(--aus); }
.ps-pakete a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--punkt); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--hin-her); }
.ps-pakete a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .ps-pakete a:hover::after { transform: scaleX(1); } .ps-pakete a:hover .ps-pfeil { transform: translateX(.35rem); } }
/* Der Text links reicht über zwei Zeilen, damit der Hinweis direkt unter der Liste steht. */
.ps-text { grid-row: 1 / span 2; }
.ps-hinweis { grid-column: 2; margin-top: calc(var(--raum-3) - clamp(2rem, 6vw, 6rem)); color: var(--schrift-2); }
@media (max-width: 55.99rem) { .preise-start { grid-template-columns: minmax(0, 1fr); } .ps-text { grid-row: auto; } .ps-hinweis { grid-column: 1; margin-top: calc(var(--raum-3) - clamp(2rem, 6vw, 6rem)); } }

/* Tafel: ein Themenbild hängt wie ein Werk, mit Kante und Schatten. */
.tafel { overflow: clip; background: var(--sockel); box-shadow: 0 0 0 1px var(--geraet-kante), var(--schatten); }
.tafel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- Einzeln buchbar: Karten im Orbit (Stil der Bibliothek in 12-orbit.css) ---------- */
.produkte { overflow-x: clip; }
.mb-orbit.produkte-orbit {
  --mb-karte-b: clamp(16.5rem, 12rem + 14vw, 22rem); --mb-radius: 0; --mb-perspektive: 1600px;
  --mb-pille: var(--sockel); --mb-punkt: var(--schrift-3); --mb-punkt-aktiv: var(--schrift); --mb-fokus: var(--fokus);
  --mb-basis: #15181a; --mb-glut: #ff6a1f; --mb-glut-2: #ffb08a;
  margin-top: var(--raum-5);
}
.produkte-orbit:not(.mb-aktiv) { margin-inline: calc(var(--seitenrand) * -1); padding-inline: var(--seitenrand); }
.produkte-orbit.mb-aktiv:focus-visible { outline-offset: 1rem; }
.produkt { display: flex; flex-direction: column; background: var(--tafel); box-shadow: 0 0 0 1px var(--geraet-kante), var(--schatten-klein); }
.produkt-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.produkt-text { flex: 1; display: grid; align-content: start; gap: .55rem; padding: 1.2rem 1.35rem 1.35rem; }
.produkt h3 { font-size: 1.3rem; font-weight: var(--g-titel); line-height: 1.2; letter-spacing: -.015em; }
.produkt p { font-size: .975rem; line-height: 1.5; color: var(--schrift-2); }
.produkt .produkt-ki { font-size: .8125rem; color: var(--schrift-3); }
.produkt .textlink { align-self: end; justify-self: start; margin-top: .4rem; }
.produkt-glut { justify-content: space-between; color: #f2f3f1; }
/* Heller Text liegt nie direkt auf der Glut: eine dunkle Unterlage hält ihn über 4,5 zu 1, das Licht bleibt am Zeichen. */
.produkt-glut .produkt-text { background: rgb(15 18 20 / .58); }
.produkt-glut p { color: rgb(242 243 241 / .9); }
.produkt-glut .textlink { color: #f2f3f1; }
.produkt-zeichen { width: 42%; height: auto; margin: 2rem 1.35rem 0; }
.produkt-zeichen .logo-w { fill: #ff6a1f; }

/* ---------- Tunnel hinter dem Ablauf: die Arbeiten schweben heran, während man liest (motion/start.js) ---------- */
/* Die Bühne haftet in Fensterhöhe hinter dem Abschnitt, die Bilder bleiben leise, damit der Text vorn lesbar bleibt. */
.ablauf-start { position: relative; isolation: isolate; }
.tunnel { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.tunnel-buehne { position: sticky; top: 0; height: 100svh; opacity: .18; }
@media (prefers-color-scheme: dark) { .tunnel-buehne { opacity: .26; } }
@media (forced-colors: active) { .tunnel { display: none; } }
@media print { .tunnel { display: none; } }

/* ---------- Schluss: das Zeichen als Unterschrift ---------- */
.abschluss-zeichen { display: block; width: 2.75rem; height: auto; margin-bottom: .9rem; }

/* ---------- Leistungsseiten: Wegweiser über der Übersicht, Angebote im Kopf, Themenbild als Werk ---------- */
.lst-wegweiser { padding: 0 var(--seitenrand) var(--raum-5); }
.lst-wegweiser .wegweiser { max-width: 64rem; }
.lst-angebote { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--raum-3) 0 0; padding: 0; list-style: none; }
.lst-kopf-tafel { margin-top: var(--raum-4); }
.lst-tafel-ki { margin-top: .8rem; color: var(--schrift-2); }
@media (prefers-reduced-motion: no-preference) {
  .lst-kopf-frage > :nth-child(4) { animation-delay: 420ms; }
  .lst-kopf-tafel .tafel { animation: lst-hell 1300ms var(--aus) 260ms both; }
}

@media print {
  .lichtbahn, .film-schalter, .pf-sicht video { display: none; }
}

/* Die Zeile ist ein Listenpunkt mit Kopf-Link und Kärtchen, kein Link mehr als Ganzes. */
.leistung { display: block; }

/* Kopie aus der Motion-Bibliothek (src/orbit.css, Commit fe8f68c, 14.10.2026), unverändert. Farben und Maße setzt 11-auftakt.css. */
/*
 * Motion-Bibliothek · Orbit, Stil
 * Stellschrauben über Variablen am Element .mb-orbit:
 * --mb-karte-b (Kartenbreite), --mb-radius, --mb-perspektive,
 * --mb-pille, --mb-punkt, --mb-punkt-aktiv, --mb-fokus,
 * Glutkarte: --mb-basis, --mb-glut, --mb-glut-2, --mb-glut-dauer.
 */
@property --mb-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.mb-orbit {
  --mb-karte-b: clamp(220px, 30vw, 360px);
  --mb-radius: 28px;
  --mb-perspektive: 1400px;
  position: relative;
}

/* Ohne JavaScript: eine Reihe zum Wischen, jede Karte rastet ein */
.mb-orbit:not(.mb-aktiv) {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 8px;
}
.mb-orbit:not(.mb-aktiv) > .mb-orbit__karte { flex: 0 0 var(--mb-karte-b); scroll-snap-align: center; }

.mb-orbit__karte {
  position: relative;
  width: var(--mb-karte-b);
  border-radius: var(--mb-radius);
  overflow: hidden;
  isolation: isolate;
}

.mb-orbit.mb-aktiv { perspective: var(--mb-perspektive); }
.mb-orbit.mb-aktiv:focus-visible { outline: 2px solid var(--mb-fokus, currentColor); outline-offset: 8px; border-radius: 4px; }
.mb-orbit__buehne {
  position: relative;
  height: var(--mb-hoehe, 460px);
  transform-style: preserve-3d;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.mb-orbit__buehne.mb-zieht { cursor: grabbing; }
.mb-orbit.mb-aktiv .mb-orbit__karte {
  position: absolute;
  left: 50%;
  top: 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.mb-orbit.mb-aktiv .mb-orbit__karte img { pointer-events: none; -webkit-user-drag: none; }

/* Punkte in einer Pille; jeder Knopf hat 24 × 44 px Trefferfläche, die
   Pille selbst ist nur 24 px hoch. Der aktive Punkt wird per transform
   breit, nicht über width. */
.mb-orbit__punkte {
  position: relative;
  isolation: isolate;
  display: flex;
  width: max-content;
  margin: 8px auto 0;
  padding: 0 6px;
}
.mb-orbit__punkte::before {
  content: "";
  position: absolute;
  inset: 10px 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--mb-pille, rgb(0 0 0 / 0.32));
}
.mb-orbit__punkt {
  display: grid;
  place-items: center;
  width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.mb-orbit__punkt::before {
  content: "";
  width: 18px;
  height: 7px;
  border-radius: 4px;
  background: var(--mb-punkt, rgb(255 255 255 / 0.55));
  transform: scaleX(0.39);
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease;
}
.mb-orbit__punkt[aria-current="true"]::before { transform: none; background: var(--mb-punkt-aktiv, #fff); }
.mb-orbit__punkt:focus-visible { outline: 2px solid var(--mb-fokus, #fff); outline-offset: -8px; border-radius: 8px; }
.mb-orbit__punkt:active::before { background: var(--mb-punkt-aktiv, #fff); }

/* Glutkarte: weiches Licht, das sich langsam dreht, solange sie vorn steht */
.mb-orbit__karte--glut { background: var(--mb-basis, #9f9697); }
.mb-orbit__karte--glut::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  background: conic-gradient(from var(--mb-winkel) at 35% 65%,
    var(--mb-glut, #ff4600), transparent 28%, var(--mb-glut-2, #ffb08a) 52%, transparent 76%, var(--mb-glut, #ff4600));
  filter: blur(44px);
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  .mb-orbit__karte--glut::before { animation: mb-drehen var(--mb-glut-dauer, 25s) linear infinite paused; }
  .mb-orbit__karte--glut.ist-mitte::before { animation-play-state: running; }
}
@keyframes mb-drehen { to { --mb-winkel: 360deg; } }

/* ---------- IT-Lexikon und Regionsseiten: nur Ergänzungen zu vorhandenen Bauteilen (Leseblatt, Zeilenliste). ---------- */
.lex-blatt .recht-text p + p { margin-top: 1em; }
.lex-blatt .recht-vermerk .textlink { margin-top: .25rem; }
.seitenkopf .lex-auch { margin-top: var(--raum-2); }
.lex-weiter .aktionen, .lex-dazu .aktionen { margin-top: var(--raum-4); }
.lex-quellen { max-width: 44rem; margin-top: var(--raum-5); }
.lex-quellen h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.lex-quellen ul { margin-top: .5rem; }
.lex-quellen li + li { margin-top: .4rem; }
.lex-liste { display: flex; flex-wrap: wrap; gap: 0 1.5rem; max-width: 54rem; }
.lex-liste a { display: inline-block; padding: .45rem 0; }
.seite-lexikon .ueber-zeilen h3, .seite-region .ueber-zeilen h3 { hyphens: auto; overflow-wrap: anywhere; }

/* Unterseiten der Leistungsbereiche (seit 15.10.2026): Kopf mit Werk, Material als Hängung, Richtpreise, Nachbarn. Klassen us-.
   Dazu auf den Bereichsseiten: die Unterseiten im Einzelnen, die Buchungswege für Werbevideos. */

/* ---------- Kopf: Frage und Antwort links, das Werk rechts und angeheftet ---------- */
.us-kopf { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-5); padding: clamp(2rem, 3.6vw, 3.25rem) var(--seitenrand) var(--raum-5); overflow-x: clip; }
.us-kopf-text { container-type: inline-size; }
.us-kopf .pfad { margin-bottom: var(--raum-3); }
.us-kopf .pfad a { display: inline-block; padding: .75rem 0; margin: -.75rem 0; }
.us-kopf h1 { font-size: clamp(2.3rem, 10.5cqi, 4.75rem); overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.us-kopf .kundenfrage { margin-top: var(--raum-4); }
.us-kopf .antwort { margin-top: var(--raum-3); }
.us-kopf .aktionen { margin-top: var(--raum-4); }
.us-kopf-werk > .werk, .us-kopf-werk > .cine-film { margin: 0; }
.us-kopf-werk .cine-film { --film-b: min(100%, 20rem); margin-inline: auto; }
@media (min-width: 62rem) {
  .us-kopf { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .us-kopf-hoch { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .us-kopf-werk { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
  .us-kopf-hoch .us-kopf-werk { justify-self: center; width: min(100%, 21rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .us-kopf-text > * { animation: lst-steig 900ms var(--aus) both; }
  .us-kopf-text > :nth-child(2) { animation-delay: 60ms; }
  .us-kopf-text > :nth-child(3) { animation-delay: 150ms; }
  .us-kopf-text > :nth-child(4) { animation-delay: 240ms; }
  .us-kopf-text > :nth-child(5) { animation-delay: 330ms; }
  .us-kopf-werk { animation: lst-hell 1300ms var(--aus) 260ms both; }
}

/* ---------- Werke: Fenster, Handy, Tafel, Filme ---------- */
.us-werk, .us-projektion { margin: 0; }
.us-handy { justify-self: center; --telefon-b: clamp(12rem, 22vw, 15rem); }
.us-handy .telefon { margin-inline: auto; }
.us-handy .schild { width: var(--telefon-b); margin-inline: auto; }
.us-film-sicht { position: relative; overflow: clip; }
.us-film-sicht video { display: block; width: 100%; height: 100%; object-fit: cover; }
.us-film-hoch { aspect-ratio: 9 / 16; background: #0f1214; }
.tafel.us-film-sicht:not(.us-film-hoch) { aspect-ratio: 16 / 9; }
.fenster-sicht.us-film-sicht video { position: absolute; inset: 0; }
.us-projektion .schild { display: flex; flex-wrap: wrap; column-gap: .75rem; row-gap: .3rem; align-items: center; }
.us-projektion .film-schalter { margin-left: auto; }
.us-ki { color: var(--schrift-2); }
.us-film { --film-b: min(100%, 20rem); }

/* ---------- Material als Hängung: breite Werke im Wechsel, Hochformate schmal ---------- */
.us-galerie .abschnitt-kopf { max-width: 52rem; }
.us-werke { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-5); margin-top: var(--raum-5); }
.us-schmal { justify-self: center; width: min(100%, 20rem); }
@media (min-width: 48rem) {
  .us-werke { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
  .us-platz { grid-column: span 7; }
  .us-platz:nth-child(even) { grid-column: span 5; margin-top: var(--raum-5); }
  .us-platz.us-schmal { grid-column: span 4; width: auto; justify-self: stretch; }
  .us-platz:only-child { grid-column: 2 / span 10; }
  .us-platz.us-schmal:only-child { grid-column: 5 / span 4; }
}
.us-beleg .gross { max-width: 40em; }

/* ---------- Zeilenlisten: Richtpreise, Unterseiten im Einzelnen, Nachbarn ---------- */
.us-preisliste, .us-nachbarliste { margin: var(--raum-5) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie-stark); }
.us-preisliste a, .us-nachbarliste a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; row-gap: .3rem; align-items: baseline;
  padding: 1.1rem 0; border-bottom: 1px solid var(--linie); color: var(--schrift); text-decoration: none;
}
.us-preis-titel, .us-nachbar-titel { font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); font-weight: var(--g-titel); line-height: 1.2; letter-spacing: -.015em; }
.us-preis-satz, .us-nachbar-text { grid-column: 1; max-width: 40em; font-size: .975rem; line-height: 1.5; color: var(--schrift-2); }
.us-preis-spanne { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.us-nachbar-preis { grid-column: 1; font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--schrift); }
.us-nachbar-pfeil { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 1.25rem; height: 1.25rem; transition: transform 260ms var(--aus); }
:is(.us-preisliste, .us-nachbarliste) a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--punkt); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--hin-her); }
:is(.us-preisliste, .us-nachbarliste) a:focus-visible::after { transform: scaleX(1); }
:is(.us-preisliste, .us-nachbarliste) a:active { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  :is(.us-preisliste, .us-nachbarliste) a:hover::after { transform: scaleX(1); }
  .us-nachbarliste a:hover .us-nachbar-pfeil { transform: translateX(.35rem); color: var(--punkt); }
}
@media (prefers-reduced-motion: reduce) { :is(.us-preisliste, .us-nachbarliste) a::after { transition: none; } }
@media (max-width: 40rem) {
  .us-preisliste a { grid-template-columns: minmax(0, 1fr); }
  .us-preis-spanne { grid-column: 1; grid-row: auto; text-align: left; }
}
.us-preise .aktionen, .us-nachbarn > p { margin-top: var(--raum-4); }
.us-nachbarn h2 { max-width: 16em; }

/* ---------- Bereichsseiten: Unterseiten in der Übersicht und Buchungswege ---------- */
.lst-unter { order: 4; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.lst-zeile-weiter { order: 5; }
@media (min-width: 62rem) { .lst-unter { margin-top: var(--raum-3); } }
.lst-wege { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--raum-5) 0 0; border-top: 1px solid var(--linie-stark); }
.lst-wege > div { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .3rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.lst-wege dt { font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); font-weight: var(--g-titel); letter-spacing: -.015em; }
.lst-wege dd { margin: 0; max-width: 40em; color: var(--schrift-2); }
@media (min-width: 48rem) { .lst-wege > div { grid-template-columns: minmax(0, .35fr) minmax(0, .65fr); column-gap: 2rem; align-items: baseline; } }
.lst-buchung .aktionen { margin-top: var(--raum-4); }

/* ---------- Cinemura: Einsatz für Makler und Gastgeber ---------- */
.cine-einsatz-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); margin-top: var(--raum-5); }
.cine-einsatz-wer { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); font-weight: var(--g-zeile); letter-spacing: -.02em; }
.cine-einsatz-raster .lst-wege { margin-top: var(--raum-3); }
.cine-einsatz-raster .lst-wege > div { grid-template-columns: minmax(0, 1fr); }
.cine-einsatz-raster > div > p { margin-top: var(--raum-3); }
@media (min-width: 62rem) { .cine-einsatz-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(2rem, 6vw, 6rem); } }

/* Pakete und Preisrechner (seit 15.10.2026, als Spiel am Abend desselben Tages). Rechtwinklig, Zeilen statt Karten, Zahlen mit
   festen Ziffern. Klassen pk- und rk-. Glut nur als die eine Linie unter der nächsten Stufe; nichts federt, nichts kippt. */

/* Direkt unter dem Seitenkopf: der Inhalt beginnt ohne zweiten großen Abstand. */
.seitenkopf + :is(.pk-abschnitt, .rk-abschnitt) { padding-top: var(--raum-4); }
.rk-belege { margin-top: var(--raum-3); max-width: 40em; }
/* Der Rechner ist ein Werkzeug: der Kopf bleibt klein, damit Stufen und Summe schon im ersten Bild stehen. */
.seite-rechner .seitenkopf { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: var(--raum-3); }
.seite-rechner .seitenkopf h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.25rem); }
.seite-rechner .seitenkopf + .rk-abschnitt { padding-top: var(--raum-3); }

/* ---------- Pakete: je Paket eine Zeile mit Für wen, Inhalt und Spanne ---------- */
.pk-stufen { max-width: 40rem; margin: 0; }
.pk-stufen-text { margin-top: var(--raum-2); color: var(--schrift-2); }
.pk-liste { margin: var(--raum-5) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie-stark); }
.pk { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-3); padding: var(--raum-4) 0; border-bottom: 1px solid var(--linie); scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
.pk-titel { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.4rem); line-height: 1.1; }
.pk-empfehlung, .rk-empfehlung {
  display: inline-block; padding: .28rem .5rem; background: var(--knopf-fl); color: var(--knopf-sch);
  font-size: .8125rem; font-weight: 500; letter-spacing: .04em; line-height: 1; vertical-align: .25em;
}
.pk-empfehlung { margin-left: .75rem; }
.pk-empfohlen { background: var(--tafel); padding-inline: var(--raum-3); margin-inline: calc(var(--raum-3) * -1); }
.pk-branche { margin-top: .5rem; font-size: .875rem; font-weight: 500; letter-spacing: .02em; color: var(--schrift-2); }
.pk-branche a { color: var(--schrift); text-underline-offset: .22em; }
.pk-fuer { margin-top: .6rem; max-width: 30em; color: var(--schrift-2); }
.pk-teile { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.pk-teile li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); column-gap: .6rem; align-items: baseline; }
.pk-teile .icon { width: 1rem; height: 1rem; translate: 0 .15em; color: var(--schrift-2); }
.pk-spannen { display: grid; gap: .35rem; }
.pk-spanne { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: .75rem; align-items: baseline; font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pk-art { font-size: .8125rem; font-weight: 500; letter-spacing: .04em; color: var(--schrift-2); }
.pk-rabatt { margin-bottom: .6rem; font-size: .9375rem; line-height: 1.45; color: var(--schrift-2); font-variant-numeric: tabular-nums; }
.pk-wege { display: flex; flex-wrap: wrap; column-gap: 1.5rem; margin-top: var(--raum-3); }
.pk-hinweis { margin-top: var(--raum-4); max-width: 44em; color: var(--schrift-2); }
.pk:target .pk-titel { text-decoration: underline 1px var(--punkt); text-underline-offset: .22em; }
@media (min-width: 62rem) {
  .pk { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .95fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
}

/* ---------- Preisrechner: links die Leistungen zum Anklicken, rechts die Summe ---------- */
.rk-einstieg { display: grid; gap: var(--raum-3); }
.rk-regel { max-width: 44em; color: var(--schrift-2); }
.rk-quellen { max-width: 44em; color: var(--schrift-2); }
/* Vorlagen: Pakete als Startpunkt. Die Empfehlung trägt ein Wort, keine Zählung. */
.rk-vorlagen { margin: 0; }
.rk-vorlagen-titel { font-size: .9375rem; font-weight: 500; color: var(--schrift-2); }
.rk-vorlagen-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.rk-vorlage {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem .9rem; border: 0; background: transparent;
  box-shadow: inset 0 0 0 1px var(--linie-stark); color: var(--schrift); font-size: .9375rem; font-weight: 500; cursor: pointer;
  transition: background-color var(--kurz) ease, color var(--kurz) ease, transform var(--kurz) var(--aus);
}
.rk-vorlage:active { transform: scale(.97); }
.rk-vorlage-empfohlen { box-shadow: inset 0 0 0 1px var(--schrift); }
.rk-vorlage[aria-pressed="true"] { background: var(--knopf-fl); color: var(--knopf-sch); box-shadow: none; }
.rk-vorlage[aria-pressed="true"] .rk-empfehlung { background: var(--knopf-sch); color: var(--knopf-fl); }
.rk-vorlage:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .rk-vorlage:hover { box-shadow: inset 0 0 0 1px var(--schrift); } }

.rk-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); align-items: start; }
.rk-gruppen { display: grid; gap: var(--raum-5); }
.rk-gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.rk-bereich { width: 100%; padding: 0 0 .9rem; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); font-weight: var(--g-zeile); letter-spacing: -.02em; }

/* Zeile: Kasten, Text, Spanne; darunter Marktangabe und Genaue Info. Das Label umschließt Kasten, Text und Spanne, der Link steht daneben. */
.rk-zeile {
  position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .1rem; align-items: start;
  padding: 1rem 0 .55rem; border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--kopfhoehe) + 1rem);
}
.rk-gruppe .rk-zeile:first-of-type { border-top-color: var(--linie-stark); }
.rk-gruppe .rk-zeile:last-of-type { border-bottom: 1px solid var(--linie); }
.rk-box { position: absolute; left: 0; top: 1rem; width: 1.5rem; height: 1.5rem; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.rk-label { display: contents; cursor: pointer; }
.rk-kasten { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: .1rem; box-shadow: inset 0 0 0 1px var(--linie-stark); }
.rk-bereit .rk-kasten { transition: background-color var(--kurz) ease, box-shadow var(--kurz) ease, transform var(--kurz) var(--aus); }
.rk-kasten .icon { width: 1rem; height: 1rem; color: var(--knopf-sch); opacity: 0; transform: scale(.8); }
.rk-bereit .rk-kasten .icon { transition: opacity var(--kurz) ease, transform var(--kurz) var(--aus); }
.rk-box:checked + .rk-label .rk-kasten { background: var(--knopf-fl); box-shadow: none; }
.rk-box:checked + .rk-label .rk-kasten .icon { opacity: 1; transform: none; }
.rk-box:focus-visible + .rk-label .rk-kasten { outline: 2px solid var(--fokus); outline-offset: 3px; }
.rk-label:active .rk-kasten { transform: scale(.94); }
.rk-text { grid-column: 2; grid-row: 1; display: grid; gap: .25rem; cursor: pointer; }
.rk-titel { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.rk-satz { font-size: .9375rem; line-height: 1.45; color: var(--schrift-2); }
.rk-spanne { grid-column: 3; grid-row: 1; max-width: 13rem; text-align: right; font-size: .975rem; font-weight: 500; line-height: 1.35; font-variant-numeric: tabular-nums; cursor: pointer; }
.rk-box:checked + .rk-label .rk-spanne { font-weight: 600; }
.rk-zusatz { grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; margin: 0; min-height: 1.6rem; }
.rk-markt { font-size: .875rem; line-height: 1.45; color: var(--schrift-3); font-variant-numeric: tabular-nums; }
.rk-markt a { color: inherit; text-underline-offset: .2em; }
/* Die Trefferfläche des Links ist 2.75rem hoch, ragt aber in den Zeilenabstand, damit die Zeile nicht wächst. */
.rk-info {
  display: inline-flex; align-items: center; gap: .35em; min-height: 2.75rem; margin: -.55rem 0 -.6rem auto; padding-left: .5rem;
  font-size: .9375rem; font-weight: 500; color: var(--schrift); text-decoration: none; white-space: nowrap;
}
.rk-info .icon { width: 1em; height: 1em; transition: transform 220ms var(--aus); }
.rk-info:active .icon { transform: translateX(.25em); }
.rk-info:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .rk-zeile:hover .rk-kasten { box-shadow: inset 0 0 0 1px var(--schrift); }
  .rk-box:checked + .rk-label .rk-kasten { box-shadow: none; }
  .rk-info:hover { text-decoration: underline 1px; text-underline-offset: .22em; }
  .rk-info:hover .icon { transform: translateX(.25em); }
}
@media (forced-colors: active) { .rk-kasten { border: 1px solid CanvasText; } .rk-box:checked + .rk-label .rk-kasten { background: Highlight; } .rk-stufe, .rk-b { border: 1px solid CanvasText; } }

/* ---------- Die Summe: Stufen, Balken, Ersparnis, Zahlen ---------- */
.rk-summe { position: relative; display: grid; gap: .85rem; padding: var(--raum-3); background: var(--tafel); box-shadow: 0 0 0 1px var(--geraet-kante); overflow: clip; }
.rk-summe-titel { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); font-weight: var(--g-zeile); letter-spacing: -.02em; }
.rk-spiel { display: grid; gap: .7rem; }

/* Lichtimpuls: beim Freischalten zieht sich eine Linie in Glut über die Oberkante der Summe und verlischt. */
.rk-impuls { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--punkt); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.rk-summe.ist-impuls .rk-impuls { animation: rk-impuls 1200ms var(--hin-her) both; }
@keyframes rk-impuls { 0% { transform: scaleX(0); opacity: 1; } 42% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* Meldung: steht drei Sekunden, mit der zählenden Ersparnis. Fläche in Graphit, wie ein Knopf, nie in Glut. */
.rk-meldung { margin: 0; padding: .75rem .9rem; background: var(--knopf-fl); color: var(--knopf-sch); font-size: .975rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.rk-meldung strong { font-weight: 600; }
.rk-meldung-zahl { font-weight: 600; }
.rk-bereit .rk-meldung { transition: opacity 280ms ease, transform 280ms var(--aus); }
.rk-meldung.ist-neu { animation: rk-meldung-rein 360ms var(--hin-her) both; }
.rk-meldung.ist-weg { opacity: 0; transform: translateY(-.4rem); }
@keyframes rk-meldung-rein { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Stufen: vier Zellen mit eigenem Zeichen (so viele Quadrate gefüllt, wie Bereiche nötig sind), darunter der Balken. */
/* Titel der Stufenleiste und Zahl der Leistungen hören Lesegeräte, sie stehen nicht im Bild: die Zellen und der Satz darunter sagen es. */
.rk-leiter-titel, .rk-anzahl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rk-leiter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.rk-stufe { position: relative; display: grid; gap: .3rem; justify-items: start; padding: .6rem .55rem .65rem; margin-left: -1px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linie-stark); isolation: isolate; }
.rk-stufe:first-child { margin-left: 0; }
.rk-stufe::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--knopf-fl); clip-path: inset(0 100% 0 0); }
.rk-stufe.ist-erreicht::before { clip-path: inset(0 0 0 0); }
.rk-bereit .rk-stufe::before { transition: clip-path 420ms var(--hin-her); }
.rk-zeichen { display: block; width: .95rem; height: .95rem; color: var(--schrift); overflow: visible; }
.rk-zeichen rect { fill: none; stroke: currentColor; stroke-width: 1; }
.rk-zeichen[data-n="1"] rect:nth-child(-n+1), .rk-zeichen[data-n="2"] rect:nth-child(-n+2), .rk-zeichen[data-n="3"] rect:nth-child(-n+3), .rk-zeichen[data-n="4"] rect { fill: currentColor; }
.rk-stufe-name { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; line-height: 1.15; }
.rk-stufe-wert { font-size: 1.05rem; font-weight: var(--g-zeile); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rk-stufe.ist-erreicht, .rk-stufe.ist-erreicht .rk-zeichen { color: var(--knopf-sch); }
.rk-bereit .rk-stufe, .rk-bereit .rk-zeichen { transition: color var(--kurz) ease 140ms; }
/* Die Linie, die gerade dran ist: Glut unter der nächsten Stufe, dicker, wenn nur noch ein Bereich fehlt. */
.rk-stufe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--punkt); transform: scaleX(0); transform-origin: 0 50%; }
.rk-stufe.ist-naechste::after { transform: scaleX(1); }
.rk-bereit .rk-stufe::after { transition: transform 520ms var(--hin-her); }
/* Beim Freischalten füllen sich die Quadrate des Zeichens nacheinander, der Name steigt einmal. */
.rk-stufe.ist-neu .rk-stufe-name, .rk-stufe.ist-neu .rk-stufe-wert { animation: rk-wert 700ms var(--aus) both; }
.rk-stufe.ist-neu .rk-zeichen rect { animation: rk-quadrat 520ms var(--aus) both; }
.rk-stufe.ist-neu .rk-zeichen rect:nth-child(2) { animation-delay: 70ms; }
.rk-stufe.ist-neu .rk-zeichen rect:nth-child(3) { animation-delay: 140ms; }
.rk-stufe.ist-neu .rk-zeichen rect:nth-child(4) { animation-delay: 210ms; }
@keyframes rk-wert { from { transform: translateY(.45rem); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes rk-quadrat { from { fill-opacity: 0; } to { fill-opacity: 1; } }
.rk-bahn { position: relative; height: .45rem; margin-top: -.3rem; box-shadow: inset 0 0 0 1px var(--linie-stark); overflow: clip; }
.rk-bahn-fuell { position: absolute; inset: 0; background: var(--schrift); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
.rk-bereit .rk-bahn-fuell { transition: transform 520ms var(--hin-her); }
.rk-stufentext { min-height: 2.9em; font-size: .9375rem; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.rk-stufentext.ist-nah { font-weight: 600; }
.rk-st-b { display: none; }
.rk-bereiche { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.rk-b { width: .9rem; height: .9rem; box-shadow: inset 0 0 0 1px var(--linie-stark); }
.rk-bereit .rk-b { transition: background-color var(--kurz) ease, box-shadow var(--kurz) ease; }
.rk-b.ist-an { background: var(--knopf-fl); box-shadow: none; }
.rk-bereiche-zahl { margin-left: .5rem; font-size: .8125rem; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--schrift-2); }

/* Ersparnis: die Zahl, auf die das Spiel zielt. Groß, mit festen Ziffern, zählt hoch. */
.rk-ersparnis { display: grid; gap: .1rem; padding: .55rem 0 .6rem; border-top: 1px solid var(--linie-stark); border-bottom: 1px solid var(--linie); }
.rk-ersparnis-wort { font-size: .8125rem; font-weight: 500; letter-spacing: .04em; color: var(--schrift-2); }
.rk-ersparnis-zahl { font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem); font-weight: var(--g-zeile); letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--schrift-3); }
.rk-ersparnis.ist-aktiv .rk-ersparnis-zahl { color: var(--schrift); }
.rk-werte { display: grid; gap: .6rem; margin: 0; }
.rk-werte > div { display: grid; gap: .15rem; padding-top: .6rem; border-top: 1px solid var(--linie); }
.rk-werte dt { font-size: .8125rem; font-weight: 500; letter-spacing: .04em; color: var(--schrift-2); }
.rk-werte dd { margin: 0; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); font-weight: var(--g-zeile); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rk-werte dd.rk-nebenzeile { font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--schrift-2); }
.rk-vereinbart { font-size: .9375rem; line-height: 1.45; color: var(--schrift-2); }
/* Abschlussziel: ab der Komplett-Stufe der Weg „Alles abgeben“. */
.rk-ziel { display: grid; gap: .5rem; padding: .85rem .9rem; box-shadow: inset 0 0 0 1px var(--schrift); }
.rk-ziel-titel { font-size: 1.0625rem; font-weight: 600; }
.rk-ziel-text { font-size: .9375rem; line-height: 1.45; color: var(--schrift-2); }
.rk-ziel-knopf { justify-self: start; white-space: normal; text-align: left; }
.rk-hinweis, .rk-genau, .rk-ohne { color: var(--schrift-2); }
.rk-wege { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; }
.rk-summe .knopf { justify-self: start; }
.rk-kopieren {
  min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--schrift); font: inherit; font-weight: 500;
  text-decoration: underline 1px; text-underline-offset: .22em; cursor: pointer;
}
.rk-kopieren:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.rk-weiter { margin-top: var(--raum-5); }

/* ---------- Kleine Bestätigungen: der Haken springt kurz, die Summe blitzt auf ---------- */
.rk-kasten.ist-pop { animation: rk-pop 260ms var(--aus); }
@keyframes rk-pop { 0% { transform: scale(1); } 38% { transform: scale(1.2); } 100% { transform: scale(1); } }
.ist-blitz { animation: rk-blitz 760ms var(--aus); }
@keyframes rk-blitz { 0% { background: var(--sockel); box-shadow: inset 0 -2px 0 var(--punkt); } 100% { background: transparent; box-shadow: inset 0 -2px 0 transparent; } }

/* Vorschau der nächsten Belohnung an einer unberührten Zeile */
.rk-vorschau { flex: 0 0 100%; margin-bottom: .1rem; font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--schrift); font-variant-numeric: tabular-nums; }
.rk-vorschau:not([hidden]) { animation: rk-vorschau 360ms var(--aus) both; }
@keyframes rk-vorschau { from { opacity: 0; transform: translateY(.25rem); } }

/* Niedrige Fenster und die Komplett-Stufe: weniger Beiwerk in der Summe, damit der Knopf im Bild bleibt. */
@media (min-width: 62rem) and (max-height: 50rem) { .rk-bereiche, .rk-hinweis, .rk-genau { display: none; } }
@media (min-width: 62rem) { .rk-summe:has(.rk-ziel:not([hidden])) :is(.rk-hinweis, .rk-genau, .rk-bereiche) { display: none; } }
@media (min-width: 62rem) {
  .rk-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); column-gap: clamp(2rem, 5vw, 5rem); }
  .rk-summe { position: sticky; top: calc(var(--kopfhoehe) + 2rem); max-height: calc(100svh - var(--kopfhoehe) - 3rem); overflow-y: auto; overscroll-behavior: contain; }
}
/* Am Handy steht die Summe unten fest im Bild und erscheint mit der ersten Wahl: oben die Meldung oder der Stand der Stufen mit Balken,
   darunter die Zahlen und die Ersparnis, dann der Knopf. Die Zahl der gewählten Leistungen hören Lesegeräte weiter (aria-live). */
@media (max-width: 61.99rem) {
  .rk-summe.ist-leer { transform: translateY(100%); visibility: hidden; }
  .rk-bereit .rk-summe { transition: transform 240ms var(--aus), visibility 0s linear 0s; }
  .rk-bereit .rk-summe.ist-leer { transition: transform 200ms var(--aus), visibility 0s linear 200ms; }
  .rk-summe { position: sticky; bottom: 0; z-index: 3; gap: .5rem; padding: .7rem var(--rand) calc(.8rem + env(safe-area-inset-bottom)); margin-inline: calc(var(--seitenrand) * -1); box-shadow: 0 -1px 0 var(--linie-stark); }
  .rk-summe-titel, .rk-leiter, .rk-genau, .rk-hinweis, .rk-bereiche, .rk-nebenzeile, .rk-vereinbart, .rk-ziel-text { display: none; }
  /* Während die Meldung steht, entfällt im Satz der Stufen die doppelte Ersparnis. */
  .rk-summe:has(.rk-meldung:not([hidden])) .rk-st-b { display: none; }
  .rk-spiel { gap: .45rem; }
  .rk-bahn { margin-top: 0; height: .35rem; }
  .rk-stufentext { min-height: 0; font-size: .875rem; line-height: 1.35; }
  .rk-st-b { display: inline; }
  .rk-meldung { padding: .55rem .7rem; font-size: .9rem; }
  .rk-ersparnis { grid-template-columns: auto 1fr; align-items: baseline; column-gap: .75rem; padding: .35rem 0; }
  .rk-ersparnis-zahl { font-size: 1.25rem; text-align: right; }
  .rk-werte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; }
  .rk-werte > div { border-top: 0; padding-top: 0; }
  .rk-werte dt { white-space: nowrap; }
  .rk-werte dd { font-size: 1.1rem; }
  .rk-ziel { padding: .55rem .7rem; gap: .35rem; }
  .rk-ziel-titel { font-size: .9375rem; }
  .rk-wege { display: grid; }
  .rk-summe .knopf { justify-self: stretch; justify-content: center; min-height: 3rem; }
  .rk-ziel-knopf { min-height: 2.75rem; }
  .rk-kopieren { display: none; }
  .rk-zeile { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .rk-spanne { grid-column: 2; grid-row: 2; max-width: none; text-align: left; margin-top: .3rem; }
  .rk-zusatz { grid-row: 3; grid-column: 2; }
  .rk-info { margin-left: 0; margin-right: auto; padding-left: 0; }
}
/* Bei reduzierter Bewegung steht nur der Zustand da: keine Effekte, keine Übergänge, die Meldung steht ohne Wischen. */
@media (prefers-reduced-motion: reduce) {
  .rk-bereit .rk-stufe::before, .rk-bereit .rk-stufe::after, .rk-bereit .rk-kasten, .rk-bereit .rk-kasten .icon, .rk-bereit .rk-b, .rk-bereit .rk-bahn-fuell, .rk-bereit .rk-meldung, .rk-bereit .rk-summe { transition: none; }
  .rk-impuls, .ist-blitz, .rk-kasten.ist-pop { animation: none; }
  .rk-stufe.ist-neu .rk-stufe-name, .rk-stufe.ist-neu .rk-stufe-wert, .rk-stufe.ist-neu .rk-zeichen rect, .rk-meldung.ist-neu, .rk-vorschau:not([hidden]) { animation: none; }
}
@media (forced-colors: active) { .rk-stufe, .rk-b, .rk-bahn, .rk-ziel { border: 1px solid CanvasText; } .rk-bahn-fuell { background: Highlight; } .rk-meldung { border: 1px solid CanvasText; } }

/* Infoseiten je Posten des Preisrechners (/preisrechner/<id>/), Klassen in-. Kopf mit Werk (angeheftet), drei Sätze in Zeilen,
   Schritte als Zeitstrahl mit gezeichneter Linie, Material als Hängung, Preis, Fragen. Rechtwinklig, eine Schrift, Glut nur
   als Linie unter der Zeile, die gerade überfahren wird. Alles steht auch ohne Skript und bei reduzierter Bewegung. */

/* ---------- Kopf: Titel, Satz, Preis und Wege links, das Werk rechts ---------- */
.in-kopf { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-5); padding: clamp(2rem, 3.6vw, 3.25rem) var(--seitenrand) var(--raum-5); overflow-x: clip; }
.in-kopf-text { container-type: inline-size; }
.in-kopf .pfad a { display: inline-block; padding: .75rem 0; margin: -.75rem 0; }
.in-kopf h1 { font-size: clamp(2.1rem, 9.5cqi, 4.25rem); overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.in-kopf .vorspann { margin-top: var(--raum-3); max-width: 30em; }
.in-summe { margin-top: var(--raum-4); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: var(--g-zeile); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.in-kopf .aktionen { margin-top: var(--raum-3); }
.in-auswahl { margin-top: var(--raum-2); color: var(--schrift-2); }
.in-kopf-werk > .werk { margin: 0; }
@media (min-width: 62rem) {
  .in-kopf { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .in-kopf-hoch { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .in-kopf-werk { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
  .in-kopf-hoch .in-kopf-werk { justify-self: center; width: min(100%, 20rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .in-kopf-text > * { animation: lst-steig 900ms var(--aus) both; }
  .in-kopf-text > :nth-child(2) { animation-delay: 60ms; }
  .in-kopf-text > :nth-child(3) { animation-delay: 150ms; }
  .in-kopf-text > :nth-child(4) { animation-delay: 240ms; }
  .in-kopf-text > :nth-child(5) { animation-delay: 330ms; }
  .in-kopf-werk { animation: lst-hell 1300ms var(--aus) 260ms both; }
}

/* ---------- Werke: Fenster, Telefon, Tafel, hohe Tafel ---------- */
.in-werk { margin: 0; }
.in-handy { --telefon-b: clamp(12rem, 22vw, 15rem); justify-self: center; }
.in-handy .telefon { margin-inline: auto; }
.in-handy .schild { width: var(--telefon-b); margin-inline: auto; }
.in-hoch { width: min(100%, 20rem); }
.in-tafel-hoch img { aspect-ratio: 9 / 16; }
.in-kopf-hoch .in-kopf-werk .in-werk { margin-inline: auto; }

/* ---------- Was es ist, was es macht, wofür es gut ist: drei Zeilen, links die Frage, rechts der Satz ---------- */
.in-drei { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--linie-stark); margin-inline: var(--seitenrand); padding-inline: 0; padding-top: 0; padding-bottom: var(--raum-5); }
.in-block { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-2); padding: var(--raum-4) 0; border-bottom: 1px solid var(--linie); }
.in-block h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.in-block .gross { max-width: 34em; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); line-height: 1.4; color: var(--schrift); text-wrap: pretty; }
@media (min-width: 48rem) {
  .in-block { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
}

/* ---------- So läuft es ab: Zeitstrahl mit gezeichneter Linie ---------- */
.in-ablauf .abschnitt-kopf { margin-bottom: var(--raum-4); }
.in-schritte { position: relative; max-width: 52rem; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.in-schritte::before, .in-schritte::after { content: ""; position: absolute; left: 1.25rem; top: 1.25rem; bottom: 1.25rem; width: 1px; }
.in-schritte::before { background: var(--linie); }
/* Die Linie zieht sich beim Lesen durch (--p, gesetzt von 01-kern.js). Ohne Skript steht sie ganz. */
.in-schritte::after { background: var(--schrift); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.in-schritt { position: relative; counter-increment: schritt; padding: 0 0 var(--raum-4) 3.75rem; }
.in-schritt:last-child { padding-bottom: 0; }
.in-schritt::before {
  content: counter(schritt); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: var(--wand); box-shadow: inset 0 0 0 1px var(--linie-stark);
  font-size: .8125rem; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.in-schritt-titel { padding-top: .45rem; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); font-weight: var(--g-titel); line-height: 1.2; letter-spacing: -.015em; }
.in-schritt-text { margin-top: .5rem; max-width: 36em; color: var(--schrift-2); text-wrap: pretty; }
.in-ergebnis { margin-top: .6rem; font-weight: 600; color: var(--schrift); }
.in-ergebnis-wort { font-weight: 500; color: var(--schrift-2); }

/* ---------- So sieht das aus: Hängung, breite Werke im Wechsel, Hochformate schmal ---------- */
.in-galerie .abschnitt-kopf { max-width: 52rem; margin-bottom: var(--raum-4); }
.in-werke { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-5); }
.in-schmal { justify-self: center; width: min(100%, 20rem); }
@media (min-width: 48rem) {
  .in-werke { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
  .in-platz { grid-column: span 7; }
  .in-platz:nth-child(even) { grid-column: span 5; margin-top: var(--raum-5); }
  .in-platz.in-schmal { grid-column: span 4; width: auto; justify-self: stretch; }
  .in-platz:only-child { grid-column: 2 / span 10; }
  .in-platz.in-schmal:only-child { grid-column: 5 / span 4; }
}

/* ---------- Das bekommen Sie: Haken, zwei Spalten ---------- */
.in-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 5rem); max-width: 60rem; margin: var(--raum-4) 0 0; padding: 0; list-style: none; }
.in-liste li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: .75rem; align-items: baseline; font-size: 1.0625rem; line-height: 1.45; }
.in-liste .icon { width: 1.1rem; height: 1.1rem; translate: 0 .2em; color: var(--schrift); }
@media (min-width: 48rem) { .in-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Was es kostet: Zahlen links, Wege rechts ---------- */
.in-kosten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); align-items: start; }
.in-kosten h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem); }
.in-preis { display: grid; gap: .8rem; max-width: 36rem; margin: var(--raum-4) 0 0; }
.in-preis > div { display: grid; gap: .2rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.in-preis > div:first-child { border-top-color: var(--linie-stark); }
.in-preis dt { font-size: .8125rem; font-weight: 500; letter-spacing: .04em; color: var(--schrift-2); }
.in-preis dd { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: var(--g-zeile); letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.in-ust { font-size: .875rem; font-weight: 500; letter-spacing: .02em; color: var(--schrift-2); white-space: nowrap; }
.in-rabatt { margin-top: var(--raum-3); max-width: 34em; color: var(--schrift-2); }
.in-markt, .in-hinweis { margin-top: var(--raum-2); max-width: 36em; color: var(--schrift-2); font-variant-numeric: tabular-nums; }
.in-markt a { color: inherit; text-underline-offset: .2em; }
.in-kosten-wege { display: grid; gap: var(--raum-3); }
@media (min-width: 62rem) {
  .in-kosten { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(2rem, 6vw, 6rem); }
  .in-kosten-wege { position: sticky; top: calc(var(--kopfhoehe) + 2rem); padding-top: var(--raum-6); }
}

/* ---------- Mehr dazu: Zeilen mit Pfeil, die Glutlinie zieht sich beim Überfahren ---------- */
.in-weiterliste { margin: var(--raum-5) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie-stark); }
.in-weiterliste a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; row-gap: .3rem; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid var(--linie); color: var(--schrift); text-decoration: none;
}
.in-weiter-titel { grid-column: 1; font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); font-weight: var(--g-titel); line-height: 1.2; letter-spacing: -.015em; }
.in-weiter-text { grid-column: 1; max-width: 40em; font-size: .975rem; line-height: 1.5; color: var(--schrift-2); }
.in-weiter-pfeil { grid-column: 2; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; transition: transform 260ms var(--aus); }
.in-weiterliste a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--punkt); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--hin-her); }
.in-weiterliste a:focus-visible::after { transform: scaleX(1); }
.in-weiterliste a:active { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  .in-weiterliste a:hover::after { transform: scaleX(1); }
  .in-weiterliste a:hover .in-weiter-pfeil { transform: translateX(.35rem); color: var(--punkt); }
}
.in-weiter > p { margin-top: var(--raum-4); }
@media (prefers-reduced-motion: reduce) { .in-weiterliste a::after, .in-weiter-pfeil { transition: none; } }

/* Fachbereiche (seit 15.10.2026): die Seiten /handwerker/ und /berater/ (Klassen br-), die drei Felder auf der Startseite
   (Klassen fb-) und die Preiszeilen und Pakete, die auch /makler/ trägt. Rechtwinklig, Zeilen statt Karten, Zahlen mit festen Ziffern.
   Wiederverwendet werden die Bauteile von /makler/ (makler-frage, makler-punkte, makler-nicht, lst-fragen) und der Ablauf der Startseite. */

/* ---------- Kopf der Seite: links Zusage und Knopf, rechts die Hängung aus Werk und Telefon ---------- */
.br-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); align-items: center; padding: clamp(3rem, 8vw, 6.5rem) var(--seitenrand) 0; }
.br-kopf-text h1 { max-width: 10em; font-size: clamp(2.4rem, 1.2rem + 3.8vw, 4.75rem); }
.br-kopf-text .vorspann { margin-top: var(--raum-3); max-width: 32em; }
.br-kopf-text .aktionen { margin-top: var(--raum-4); }
@media (prefers-reduced-motion: no-preference) {
  .br-kopf-text > .vorspann { animation: zeile-rein 900ms var(--aus) 90ms both; }
  .br-kopf-text > .aktionen { animation: zeile-rein 900ms var(--aus) 180ms both; }
}
@media (min-width: 62rem) {
  .br-kopf { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
}
.br-kopf-allein { grid-template-columns: minmax(0, 1fr); }

/* Hängung: das Telefon steht rechts unten vor dem Werk und ragt über seine Ecke. Das Schild lässt ihm Platz. */
.br-haengung { --telefon-b: clamp(6.25rem, 13vw, 10rem); }
.br-haengung-werke { position: relative; }
.br-haengung .fenster-sicht, .br-haengung .tafel img { aspect-ratio: 10 / 7.6; }
.br-haengung .fenster-sicht img { object-position: left top; }
.br-haengung-telefon { position: absolute; right: clamp(-1.75rem, -2vw, -.5rem); bottom: -2rem; z-index: 2; }
.br-haengung .schild { margin-top: 1.25rem; padding-right: calc(var(--telefon-b) + 1.5rem); }
.br-werk-telefon .telefon-sicht, .br-haengung-telefon .telefon-sicht { aspect-ratio: 9 / 16; }
.br-werk-telefon { --telefon-b: clamp(9rem, 16vw, 13rem); justify-self: center; }
.br-werk-telefon .schild { max-width: calc(var(--telefon-b) + 6rem); }
.br-werk .tafel img { aspect-ratio: 16 / 10; }

/* ---------- Lage: Zahlen mit Quelle oder Sätze ohne Zahl ---------- */
.br-lage .abschnitt-kopf { margin-bottom: var(--raum-4); }
.br-zahlen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); padding-top: var(--raum-4); border-top: 1px solid var(--linie-stark); }
.br-zahl { font-size: clamp(3.25rem, 2.2rem + 4vw, 5.75rem); font-weight: var(--g-zeile); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.br-zahl-text { margin-top: var(--raum-2); max-width: 21em; font-size: clamp(1.1rem, 1.05rem + .35vw, 1.3rem); line-height: 1.4; }
.br-quelle { margin-top: .9rem; font-weight: 400; line-height: 1.4; white-space: normal; color: var(--schrift-3); }
.br-lage-satz { margin-top: var(--raum-5); }
.br-lage-hinweis { margin-top: var(--raum-2); max-width: 44em; }
@media (min-width: 62rem) {
  .br-zahlen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); column-gap: clamp(2rem, 5vw, 5rem); }
}

/* ---------- Bausteine: je eine eigene Form ---------- */
.br-baustein h2 + .vorspann { margin-top: var(--raum-3); }
.br-b-text > .makler-punkte, .br-b-spalte > .makler-punkte { margin-top: var(--raum-4); }
.br-weiter { margin-top: var(--raum-3); }
/* links und rechts: Werk und Text nebeneinander, der Text steht im Dokument zuerst. */
.br-b-links, .br-b-rechts { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--raum-5) clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 62rem) {
  .br-b-links, .br-b-rechts { align-items: start; }
  .br-b-links > .br-werk, .br-b-rechts > .br-werk { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
  .br-b-links { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .br-b-links > .br-b-text { grid-area: 1 / 2; }
  .br-b-links > .br-werk { grid-area: 1 / 1; }
  .br-b-rechts { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
/* seite und zeilen: Text links (bleibt stehen), rechts Werk, Zeilen und Preise. */
.br-b-seite, .br-b-zeilen { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--raum-4) clamp(2rem, 6vw, 6rem); }
.br-b-spalte > .br-werk + .makler-punkte { margin-top: var(--raum-4); }
@media (min-width: 62rem) {
  .br-b-seite, .br-b-zeilen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .br-b-fest { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
}
/* breit: Kopf geteilt, das Werk über die ganze Breite, darunter Zeilen in zwei Spalten und die Preise. */
.br-b-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); align-items: end; }
@media (min-width: 62rem) {
  .br-b-kopf { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(2rem, 6vw, 6rem); }
  .br-b-kopf h2 { grid-row: 1 / span 2; align-self: start; }
  .br-b-kopf > :not(h2) { grid-column: 2; }
  .br-b-kopf h2 + .vorspann { margin-top: 0; }
}
.br-b-breit > .br-werk { margin-top: var(--raum-5); }

@media (min-width: 48rem) {
  .br-b-breit .br-werk .fenster-sicht { aspect-ratio: 16 / 7.4; }
}
.br-b-breit .br-haengung { --telefon-b: clamp(7rem, 14vw, 12.5rem); }
.br-b-breit .br-haengung-telefon { right: clamp(1.25rem, 6vw, 6rem); }
.br-b-breit .br-haengung .schild { padding-right: calc(var(--telefon-b) + clamp(1.25rem, 6vw, 6rem) + 1.5rem); }
.br-b-unten { display: grid; gap: var(--raum-5); margin-top: var(--raum-5); }
.br-b-unten > .makler-punkte { margin-top: 0; }
.br-b-unten .br-preise { max-width: 56rem; margin-top: 0; }
.br-b-unten .br-weiter { margin-top: calc(var(--raum-3) - var(--raum-5)); }

/* Preiszeilen unter den Punkten: Name, Satz und Weg links, die Spanne rechts. */
.br-preise { margin-top: var(--raum-4); container-type: inline-size; }
.br-preise-kopf { font-size: .9375rem; color: var(--schrift-2); }
.br-posten { margin-top: .6rem; border-top: 1px solid var(--linie-stark); }
.br-posten li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem 1.5rem; padding: .85rem 0 .1rem; border-bottom: 1px solid var(--linie); }
.br-posten-text { display: grid; gap: .15rem; }
.br-posten-link { justify-self: start; }
.br-posten-titel { font-weight: 500; line-height: 1.35; }
.br-posten-satz { font-size: .9375rem; line-height: 1.45; color: var(--schrift-2); }
.br-posten-preis { font-size: .975rem; font-weight: 500; line-height: 1.35; font-variant-numeric: tabular-nums; }
@container (min-width: 34rem) {
  .br-posten li { grid-template-columns: minmax(0, 1fr) minmax(10rem, 13.5rem); }
  .br-posten-text { grid-column: 1; grid-row: 1; }
  .br-posten-preis { text-align: right; grid-column: 2; grid-row: 1; padding-top: .1rem; }
  .br-posten-link { grid-column: 1; grid-row: 2; }
}

/* ---------- Pakete: je Paket eine Zeile mit Für wen, Inhalt und Spanne ---------- */
.br-paket-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie-stark); }
.br-paket { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--raum-3); padding: var(--raum-4) 0; border-bottom: 1px solid var(--linie); }
.br-paket-kopf h3 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.4rem); line-height: 1.1; }
.br-paket-kopf p { margin-top: .6rem; max-width: 30em; color: var(--schrift-2); }
.br-paket-teile { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.br-paket-teile li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); column-gap: .6rem; align-items: baseline; }
.br-paket-teile .icon { width: 1rem; height: 1rem; translate: 0 .15em; color: var(--schrift-2); }
.br-preise-paket { display: grid; gap: .35rem; }
.br-preis { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: .75rem; align-items: baseline; font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.br-preis .angabe { color: var(--schrift-2); }
.br-rabatt { margin-top: .7rem; font-size: .9375rem; line-height: 1.45; color: var(--schrift-2); }
.br-paket-wege { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: var(--raum-3); }
.br-hinweis { margin-top: var(--raum-4); max-width: 44em; color: var(--schrift-2); }
@media (min-width: 62rem) {
  .br-paket { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .95fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
}
/* Ablauf der Fachbereiche: wie auf der Startseite, ohne Tunnel und ohne Ergebnisliste. */
.br-ablauf .ablauf-kopf .vorspann { margin-top: var(--raum-3); }

/* ---------- Startseite: der Abschnitt „Fachbereiche“ ---------- */
.fb-reihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-6) 0; }
.fb-feld { min-width: 0; }
.fb-haengung { position: relative; --telefon-b: clamp(5rem, 17vw, 7.25rem); }
.fb-haengung .fenster-sicht, .fb-haengung .tafel img { aspect-ratio: 16 / 10; }
.fb-haengung .tafel { box-shadow: 0 0 0 1px var(--geraet-kante), var(--schatten); }
.fb-haengung .fenster-sicht img { object-position: left top; }
.fb-telefon { position: absolute; right: -.4rem; bottom: -1.75rem; z-index: 2; }
.fb-telefon .telefon-sicht { aspect-ratio: 9 / 16; }
.fb-werk .schild { padding-right: calc(var(--telefon-b, 8rem) + 1.25rem); }
.fb-name { margin-top: var(--raum-4); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); font-weight: var(--g-zeile); line-height: 1.04; letter-spacing: -.03em; }
.fb-problem { margin-top: var(--raum-2); max-width: 24em; font-size: clamp(1.1rem, 1.05rem + .4vw, 1.3rem); line-height: 1.4; color: var(--schrift-2); text-wrap: balance; }
.fb-baut { margin: var(--raum-3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie-stark); }
.fb-baut li { padding: .8rem 0; border-bottom: 1px solid var(--linie); font-weight: 500; line-height: 1.35; }
.fb-paket { margin-top: var(--raum-3); }
.fb-paket a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; min-height: 4rem; padding: .8rem 0; border-bottom: 1px solid var(--linie); color: var(--schrift); text-decoration: none; }
.fb-paket-name { font-weight: 600; line-height: 1.3; }
.fb-paket-preis { grid-column: 1; margin-top: .2rem; font-size: .9375rem; line-height: 1.4; color: var(--schrift-2); font-variant-numeric: tabular-nums; }
.fb-pfeil { grid-column: 2; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; transition: transform 260ms var(--aus); }
.fb-paket a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--punkt); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--hin-her); }
.fb-paket a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .fb-paket a:hover::after { transform: scaleX(1); } .fb-paket a:hover .fb-pfeil { transform: translateX(.35rem); } }
@media (prefers-reduced-motion: reduce) { .fb-paket a::after, .fb-pfeil { transition: none; } }
.fb-weg { margin-top: var(--raum-2); }
.fb-hinweis { margin-top: var(--raum-5); max-width: 44em; }
/* Ab 62rem drei Felder, ungleich breit und von links nach rechts tiefer gehängt. */
@media (min-width: 62rem) {
  .fb-reihe { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
  .fb-feld-handwerker { margin-top: var(--raum-5); }
  .fb-feld-berater { margin-top: calc(var(--raum-5) * 2); }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .fb-feld { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(2rem, 5vw, 4rem); align-content: start; }
  .fb-feld > .fb-werk { grid-column: 1; grid-row: 1 / span 6; }
  .fb-feld > :not(.fb-werk) { grid-column: 2; }
  .fb-feld > .fb-name { margin-top: 0; }
}

/* Preisantworten, Abrechnung der Werbevideos, Tabellen und Ortsseiten (S4, 15.10.2026). Nur Rollen aus 01-basis.css, damit Tag und Nacht stimmen. */

/* ---------- Preisantwort am Kopf jeder Leistungsseite ---------- */
.kosten-antwort { max-width: 34em; font-size: clamp(1.2rem, 1.05rem + .65vw, 1.6rem); font-weight: var(--g-zeile); line-height: 1.35; letter-spacing: -.015em; text-wrap: pretty; color: var(--schrift); }
.lst-kosten-text > * + * { margin-top: var(--raum-2); }
.lst-kosten-text p:not(.kosten-antwort):not(.aktionen) { max-width: 40em; color: var(--schrift-2); }
.lst-kosten-text .aktionen { margin-top: var(--raum-3); }
.seo-beispiel .kosten-antwort { margin-top: var(--raum-4); }
.seo-beispiel p + p { margin-top: var(--raum-2); color: var(--schrift-2); }
.seo-beispiel .aktionen { margin-top: var(--raum-3); }
/* Preissatz über der Posten-Liste einer Unterseite */
.seo-preissatz { color: var(--schrift); font-weight: 500; }
.us-preise .abschnitt-kopf .vorspann + .vorspann { margin-top: var(--raum-2); font-size: 1rem; }

/* ---------- Abrechnung der Werbevideos: Wege mit Preis ---------- */
.seo-wege dt a { color: inherit; text-decoration: underline; text-decoration-color: var(--linie-stark); text-decoration-thickness: 1px; text-underline-offset: .25em; transition: text-decoration-color 200ms ease-out; }
.seo-wege dt a:focus-visible { text-decoration-color: var(--punkt); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .seo-wege dt a:hover { text-decoration-color: var(--punkt); } }
.seo-wege dd { display: grid; gap: .3rem; }
.seo-wege-preis { font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--schrift); }

/* ---------- Tabelle auf Unterseiten (Erfolg nach Branche) ---------- */
.seo-tab { width: 100%; margin-top: var(--raum-4); border-collapse: collapse; }
.seo-tab th, .seo-tab td { padding: 1.1rem 2rem 1.1rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; text-wrap: pretty; }
.seo-tab thead th { padding-bottom: .8rem; border-bottom-color: var(--linie-stark); font-size: .875rem; font-weight: 500; color: var(--schrift-3); }
.seo-tab tbody th { width: 32%; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); font-weight: var(--g-titel); letter-spacing: -.01em; }
.seo-tab td { color: var(--schrift-2); max-width: 40em; }
@media (max-width: 40rem) {
  .seo-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .seo-tab, .seo-tab tbody, .seo-tab tr, .seo-tab th, .seo-tab td { display: block; width: auto; }
  .seo-tab tbody { border-top: 1px solid var(--linie-stark); }
  .seo-tab tbody th { width: auto; padding: 1.1rem 0 .25rem; border-bottom: 0; }
  .seo-tab td { padding: 0 0 1.1rem; }
}

/* ---------- Regionsseiten: Quellen, Orte, Fachbereiche ---------- */
.seo-quelle { display: block; margin-top: .35rem; }
.seo-quelle a { color: inherit; text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { .seo-quelle a:hover { text-decoration-color: var(--punkt); } }
.region-orte .ueber-zeilen h3 a, .region-fachbereiche .ueber-zeilen h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--linie-stark); text-decoration-thickness: 1px; text-underline-offset: .25em; transition: text-decoration-color 200ms ease-out; }
.region-orte .ueber-zeilen h3 a:focus-visible, .region-fachbereiche .ueber-zeilen h3 a:focus-visible { text-decoration-color: var(--punkt); }
@media (hover: hover) and (pointer: fine) { .region-orte .ueber-zeilen h3 a:hover, .region-fachbereiche .ueber-zeilen h3 a:hover { text-decoration-color: var(--punkt); } }
/* Ortsseite ohne Referenzbild: der Text steht allein und nutzt die ganze Breite statt einer halbleeren Spalte. */
.seite-ort .ueber-betrieb:not(:has(.ueber-werk)) { grid-template-columns: minmax(0, 1fr); }
.seite-ort .ueber-betrieb:not(:has(.ueber-werk)) .ueber-betrieb-text { max-width: 52rem; }
.seite-ort .ueber-betrieb-text .aktionen { margin-top: var(--raum-3); }

/* ---------- Leistungen in drei Etappen (Startseite, 16.10.2026) ----------
   Vier, drei und fünf Bereiche, danach je ein Werk als Ergebnis. Die Zeilen (03-start, 11-auftakt) stehen hier als Raster
   mit Haarlinie oben; sie zieht sich unter dem Zeiger oder im Fokus von links durch. */
.etappen > .abschnitt-kopf { margin-bottom: var(--raum-4); }
.etappen-weg { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--raum-4) 0 0; padding: 0; list-style: none; }
.etappe { scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
.etappe + .etappe { margin-top: var(--raum-6); }
.etappe-titel { margin: 0 0 var(--raum-3); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.6rem); font-weight: var(--g-zeile); line-height: 1.15; letter-spacing: -.02em; color: var(--schrift-2); }
.etappe-liste { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); margin: 0; padding: 0; list-style: none; }
.etappe-liste .leistung { border-bottom: 0; border-top: 1px solid var(--linie-stark); align-content: start; }
.etappe-liste .leistung::after { top: -1px; bottom: auto; background: var(--schrift); transform: scaleX(0); }
.etappe-liste .leistung-titel { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem); }
.etappe-liste .leistung:focus-within::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .etappe-liste .leistung:hover::after { transform: scaleX(1); } }
@media (min-width: 62rem) { .etappe-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Das Ergebnis hängt im Wechsel links und rechts, nie breiter als 48rem. */
.etappe-ergebnis { margin-top: var(--raum-5); }
.etappe-ergebnis > :is(.werk, .cine-film) { margin-inline: 0 auto; }
@media (min-width: 62rem) {
  .etappe-ergebnis > .werk { width: min(100%, 48rem); }
  .etappe:nth-of-type(odd) .etappe-ergebnis > .werk { margin-inline: auto 0; }
}
@media (prefers-reduced-motion: reduce) { .etappe-liste .leistung::after { transition: none; } }