/* ══════════════════════════════════════════════════════════════════════════
   leistung.css — die drei Leistungsreiter
   prozessautomatisierung · ki-systeme · website-betreuung

   Diese Datei liegt HINTER tokens.css und analyse.css. Von dort kommen
   Farben, Schrift, Kopfleiste, Fußbereich, Abschnittsraster (.arc-block),
   Lesesatz (.arc-h1/.arc-h2/.arc-lauf), Fragen (.arc-frage) und das
   Enthüllen (.arc-enth → data-enth). Hier steht ausschließlich, was diese
   drei Seiten zusätzlich brauchen:

     1 · Die Akzentspur (data-state)
     2 · Die Sprungleiste
     3 · Lesesatz-Bausteine: Tabellen, Randnotizen, Preistafel, Weiter
     4 · Die Bildplätze und die acht Bildeffekte
     5 · Die zehn Effekte ohne Bild
     6 · Breiten und prefers-reduced-motion

   Animiert werden ausschließlich transform und opacity. Zwei Ausnahmen, die
   der Auftrag ausdrücklich verlangt: clip-path beim Maskenschnitt und
   stroke-dashoffset bei der Lernkurve. `transition: all` kommt nicht vor.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Die Akzentspur ───────────────────────────────────────────────────
   Die Akzentfarbe sagt, wie sicher der Abschnitt ist, in dem man liest.
   Auf Papier trägt #59ADEC keinen Text (rund 2:1) — dort gilt --nadel-tag.
   Deshalb zwei Spuren je Zustand und die Umschaltung am Grund, nicht am
   Zustand. Registriert, damit der Wechsel überblenden kann. */
@property --acc     { syntax:'<color>'; inherits:true; initial-value:#93A0B4; }
@property --acc-ink { syntax:'<color>'; inherits:true; initial-value:#566070; }

[data-state]{--acc:var(--z-nacht);--acc-ink:var(--z-tag)}
/* Der Zustand kann auch an einem einzelnen Baustein stehen — ein Grenzstreifen
   mitten in einem Leistungsabschnitt. Dann entscheidet der Grund des
   Abschnitts, welche der beiden Spuren gilt, nicht der Baustein selbst. */
[data-grund="tag"][data-state],[data-grund="tag"] [data-state]{--acc:var(--z-tag)}
[data-state="offen"]    {--z-nacht:var(--kalt);    --z-tag:var(--kalt-tag)}
[data-state="peilung"]  {--z-nacht:var(--nadel);   --z-tag:var(--nadel-tag)}
[data-state="fix"]      {--z-nacht:var(--on-night);--z-tag:var(--on-dawn)}
[data-state="vorbehalt"]{--z-nacht:var(--chrome);  --z-tag:#5B626D}
[data-state]{transition:--acc 520ms var(--ease),--acc-ink 520ms var(--ease)}
@media (prefers-reduced-motion:reduce){[data-state]{transition:none}}

/* Der Vorbehalt hat einen eigenen Papierton: heller Grund, damit die
   Einschränkung nicht wie eine Behauptung aussieht. */
[data-grund="tag"][data-ton="hoch"]{--eigen:var(--papier-hoch)}

/* ══ Historisch: die drei Formen im Satz ══════════════════════════════════
   Diese drei Formen (breit · beisatz · platte) sind seit dem Verbund nicht
   mehr im Einsatz — ein Bild neben den Satz zu stellen war das Problem, nicht
   die Lösung. Die Regeln bleiben nur stehen, weil sie eine gebaute Fassung
   beschreiben, auf die man zurückkann; kein Bildplatz trägt noch data-form.
   Die geltende Einbindung steht weiter unten unter „Verbund".

   ══ Wie ein Bildplatz im Satz saß ═════════════════════════════════════════
   Ein Bild als riesiger Block unter dem Absatz ist keine Einbindung, sondern
   eine Ablage. Drei Formen, und jede hat eine Aufgabe:

     breit    — der Einstieg. Volle Breite, gedeckelte Höhe, das Foto fährt
                IM Fenster: das Fenster steht, das Bild bewegt sich.
     beisatz  — das Bild steht NEBEN dem Text, der Satz läuft daran vorbei.
     platte   — eine kleine Tafel im Absatz, kippbar, mit Schnitt.

   Alle drei tragen dieselben drei echten Ebenen: die Rahmenplatte hinten,
   das Foto in seinem Fenster, die Tiefe davor. Sie laufen mit
   unterschiedlichen Geschwindigkeiten — daraus entsteht der Tiefeneindruck,
   nicht aus vier Kopien desselben Bildes. */
.slot[data-form]{margin-block:clamp(26px,3.4vh,42px)}
/* Die Rahmenplatte: eine Haarlinie, versetzt HINTER dem Bild. Sie bewegt sich
   gegenläufig zum Foto — zwei Flächen in zwei Tiefen, echt und nicht
   nachgestellt. */
.slot[data-form]::before{content:"";position:absolute;
  left:14px;top:14px;right:-14px;bottom:-14px;z-index:-1;
  border:1px solid color-mix(in oklab,var(--acc) 38%,transparent);
  transform:translate3d(0,calc(var(--yr,0) * 1px),0)}
/* Die Tiefe davor: eine ruhige Kantenverdunkelung. Statisch — sie gibt dem
   Fenster seine Tiefe, nicht seine Bewegung. */
.slot[data-form]::after{content:"";position:absolute;inset:0;z-index:3;
  pointer-events:none;
  box-shadow:inset 0 0 70px rgba(2,4,9,.5),inset 0 0 0 1px rgba(2,4,9,.3)}

/* breit — der Einstieg. Höhe gedeckelt: ein Bild, das die halbe Seite füllt,
   verdrängt den Satz, um den es geht. */
.slot[data-form="breit"]{max-height:min(54vh,470px)}
.slot[data-ar="21/9"][data-form="breit"]{max-height:min(42vh,380px)}

/* beisatz — das Bild steht neben dem Satz und ragt zur Seite hinaus. */
.slot[data-form="beisatz"][data-ar]{--ar:5/4}
.slot[data-form="beisatz"]{
  float:right;width:min(52%,520px);
  margin:8px calc(-1 * clamp(0px,2vw,40px)) 26px clamp(28px,3.4vw,52px)}
.slot[data-form="beisatz"][data-seite="links"]{float:left;
  margin:8px clamp(28px,3.4vw,52px) 26px calc(-1 * clamp(0px,2vw,40px))}

/* platte — die kleine Tafel im Absatz. */
.slot[data-form="platte"][data-ar]{--ar:4/3}
.slot[data-form="platte"]{
  float:right;width:min(44%,400px);
  margin:8px 0 22px clamp(26px,3vw,44px)}
.slot[data-form="platte"][data-seite="links"]{float:left;
  margin:8px clamp(26px,3vw,44px) 22px 0}

/* Was neben einem Bild stehen darf und was nicht. Fließender Text läuft
   vorbei — alles, was gerechnet oder aufgezählt ist, fängt unter dem Bild
   neu an. Eine Tabelle in einer halben Spalte ist keine Tabelle mehr. */
.arc-lr .arc-h2,.arc-lr .lr-h3,.arc-lr .arc-aufschrift,
.arc-lr .lr-tab,.arc-lr .lr-preis,.arc-lr .lr-rechner,.arc-lr .lr-anteil,
.arc-lr .lr-kurve,.arc-lr .lr-intervalle,.arc-lr .lr-schritte,
.arc-lr .lr-gegen,.arc-lr .lr-band,.arc-lr .lr-wege,.arc-lr .arc-fragen,
.arc-lr .lr-rand,.arc-lr .lr-fall{clear:both}

@media (max-width:899px){
  /* Zu schmal für zwei Spuren: das Bild nimmt die volle Breite, aber nicht
     die volle Höhe. */
  .slot[data-form="beisatz"][data-ar],.slot[data-form="platte"][data-ar]{--ar:16/9}
  .slot[data-form="beisatz"],.slot[data-form="platte"]{float:none;width:100%;
    margin:26px 0}
  .slot[data-form]::before{left:8px;top:8px;right:-8px;bottom:-8px}
}

/* Kippglas mit Form: das Kippen soll die ganze Tafel drehen, nicht nur das
   Bild in seinem Ausschnitt. Also klammert der Kippkorb, nicht der Platz —
   sonst schneidet die Fensterkante die Drehung ab. */
.slot[data-effect~="kippglas"][data-form]{overflow:visible;background:none;border:0}
.slot[data-effect~="kippglas"][data-form] .slot__kipp{overflow:hidden;
  border:1px solid var(--linie);background:var(--n1)}
/* Der Schatten unter der gekippten Tafel. Er liegt AUSSERHALB des Korbs,
   sonst würde er mit weggeschnitten. Animiert wird nur seine Deckkraft. */
.slot[data-form] .slot__schatten{position:absolute;
  left:6%;right:6%;top:16%;bottom:-5%;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(2,4,9,.62),transparent 72%);
  filter:blur(16px);opacity:var(--sch,.22);
  transition:opacity 400ms var(--ease)}

/* Und die leise Drehung, die jeder Platz bekommt — auch der ohne Kippglas:
   die Tafel kommt leicht auf den Leser zugedreht herein und legt sich flach,
   wenn sie in der Mitte steht. Zusammen mit der Rahmenplatte hinten und dem
   fahrenden Foto sind das drei Tiefen, die sich gegeneinander bewegen. */
.slot[data-form]:not([data-effect~="kippglas"]){
  transform:perspective(1600px) rotateX(calc(var(--kx,0) * 1deg))}

/* ── 2 · Die Sprungleiste ─────────────────────────────────────────────────
   Klein, waagerecht, unter dem Kopf. Klebt nicht. Echte Anker, echte
   Verweistexte — der Crawler folgt ihnen, der Leser springt. */
/* Die Leiste sitzt in einem eigenen, flachen Abschnitt — der Falz zwischen
   dunklem Einstieg und Lesefläche. */
.lr-sprungblock{padding-block:12px}
.lr-sprung{margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:2px 4px;
  border-top:1px solid var(--linie-tag);border-bottom:1px solid var(--linie-tag);
  padding-block:6px}
.lr-sprung a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dawn-mute);text-decoration:none;
  position:relative}
.lr-sprung a::after{content:"";position:absolute;left:14px;right:14px;bottom:10px;
  height:1px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 200ms var(--ease)}
.lr-sprung a:hover{color:var(--on-dawn)}
.lr-sprung a:hover::after{transform:scaleX(1)}

/* ── 3 · Lesesatz-Bausteine ───────────────────────────────────────────────
   Fließtext nie breiter als 66 Zeichen, Überschriften balanciert. */
.arc-lr h1,.arc-lr h2,.arc-lr h3{text-wrap:balance}
.arc-lr p,.arc-lr li,.arc-lr td,.arc-lr th{text-wrap:pretty}
.lr-h3{font-size:var(--t-h3);line-height:1.16;margin:clamp(38px,5vh,60px) 0 18px;
  max-width:26ch;font-weight:500;color:var(--on-dawn)}
.lr-h3--nacht{color:var(--on-night)}
.lr-lauf{max-width:66ch;margin:0 0 20px;color:var(--on-dawn-mute)}
.lr-lauf strong{color:var(--on-dawn);font-weight:500}
.lr-lauf em{font-style:italic;color:var(--on-dawn)}
.lr-lauf--nacht{color:var(--on-night-mute)}
.lr-lauf--nacht strong{color:var(--on-night)}
.lr-lead{max-width:56ch;margin:0 0 24px;font-size:var(--t-lead);line-height:1.5;
  color:var(--on-night)}
.lr-lead strong{font-weight:500}
.lr-lead a,.lr-lauf a{color:inherit;text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,currentColor 38%,transparent);
  padding-bottom:1px}
.lr-lead a:hover,.lr-lauf a:hover{color:var(--acc);border-bottom-color:var(--acc)}
/* Der Satz, der die Grenze zieht. Haarlinie in der Akzentfarbe, kein Kasten. */
.lr-satz{max-width:60ch;margin:34px 0;padding-left:20px;font-size:var(--t-lead);
  line-height:1.45;color:var(--on-dawn);border-left:2px solid var(--acc)}
.lr-satz--nacht{color:var(--on-night)}

/* Datenblatt: zwei Spalten, Bezeichnung links, Wert rechts in Monoschrift. */
.lr-tab{width:100%;max-width:74ch;margin:26px 0 0;border-collapse:collapse;
  font-size:1.02rem}
.lr-tab caption{caption-side:top;text-align:left;font-family:var(--f-m);
  font-size:var(--t-mark);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dawn-mute);padding-bottom:12px}
.lr-tab th,.lr-tab td{text-align:left;vertical-align:baseline;padding:15px 0;
  border-bottom:1px solid var(--linie-tag)}
.lr-tab thead th{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dawn-mute);font-weight:400;padding-bottom:10px}
.lr-tab tbody th{font-weight:500;color:var(--on-dawn);padding-right:28px}
.lr-tab tbody td{color:var(--on-dawn-mute)}
.lr-tab tbody tr:first-child th,.lr-tab tbody tr:first-child td{border-top:1px solid var(--linie-tag)}
.lr-tab--wert tbody td{font-family:var(--f-m);text-align:right;white-space:nowrap;
  color:var(--on-dawn);font-variant-numeric:tabular-nums}
.lr-tab--wert tbody td strong{font-weight:500}
/* Zwei Spalten gleichen Rangs: keine Zeilenköpfe, sondern zwei Aussagen. */
.lr-tab--paar{table-layout:fixed}
.lr-tab--paar td{color:var(--on-dawn-mute);padding-right:28px}
.lr-tab--paar td:last-child{padding-right:0}
@media (max-width:600px){
  .lr-tab,.lr-tab tbody,.lr-tab tr,.lr-tab th,.lr-tab td{display:block;width:auto}
  .lr-tab thead{display:none}
  .lr-tab tr{border-bottom:1px solid var(--linie-tag);padding:14px 0}
  .lr-tab th,.lr-tab td{border:0;padding:2px 0}
  .lr-tab--wert tbody td{text-align:left}
}

/* Randnotiz. Sagt, woher eine Zahl kommt — oder dass sie fremd ist. */
.lr-rand{max-width:62ch;margin:30px 0 0;padding:18px 0 0;
  border-top:1px solid var(--linie-tag);font-size:.96rem;color:var(--on-dawn-mute)}
.lr-rand-titel{margin:0 0 6px;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.lr-rand p{margin:0}

/* Preistafel. Steht ohne Bild, mit voller Kontraststufe. */
.lr-preis{margin:26px 0 0;max-width:74ch;border-top:1px solid var(--linie-tag)}
.lr-preis-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;
  align-items:baseline;padding:18px 0;border-bottom:1px solid var(--linie-tag)}
.lr-preis-zeile dt{margin:0;color:var(--on-dawn);font-weight:500}
.lr-preis-zeile dd{margin:0;font-family:var(--f-m);text-align:right;
  color:var(--on-dawn);font-variant-numeric:tabular-nums;white-space:nowrap}
.lr-preis-zeile--haupt dt,.lr-preis-zeile--haupt dd{font-size:var(--t-lead)}
.lr-preis-zeile--haupt dd{font-weight:500}
.lr-preis-zeile dd small{display:block;font-family:var(--f-b);font-size:.9rem;
  letter-spacing:0;color:var(--on-dawn-mute);white-space:normal;margin-top:4px}

/* Sternenfeld auf jeder dunklen Fläche. Eine Leinwand IM Abschnitt, nicht fest
   im Fenster — so kann sie nicht in den Papierteil geraten. Dieselbe Fassung
   wie auf der Preisseite: drei Ebenen, die beim Rollen unterschiedlich schnell
   mitlaufen. Aus sich heraus bewegt sich nichts. */
.arc-psterne{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;display:block}
.arc-lr [data-grund="nacht"]{position:relative;isolation:isolate}
.arc-lr [data-grund="nacht"] > *:not(.arc-psterne){position:relative;z-index:1}

/* Weiter — drei Flächen, keine Knöpfe. Beim Überfahren hebt sich die Karte
   und der Pfeil geht los: die Karte kündigt die Richtung an. Kein Bild — wer
   hier ist, will etwas erledigen. */
/* Die Karten sind auf 1100 px gedeckelt, die Lesespalte ist breiter — ohne
   auto-Rand hängt der Dreier links und lässt rechts eine Lücke. */
.lr-wege{list-style:none;margin:26px auto 0;padding:0;
  max-width:min(1100px,100%);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:clamp(14px,2vw,24px)}
.lr-wege a{display:grid;gap:.5em;height:100%;align-content:start;
  padding:0;overflow:hidden;text-decoration:none;color:var(--on-night);
  background:var(--n1);
  border:1px solid var(--linie);
  transition:transform 300ms var(--ease),border-color 300ms var(--ease),
             background-color 300ms var(--ease)}
.lr-wege a:hover{transform:translateY(-4px);border-color:var(--acc);
  background:var(--n2)}
/* Das Motiv sitzt oben, randlos in der Karte. Beim Überfahren geht ein
   Lichtstreifen über das Bild — es sieht aus wie Licht, das über den
   Gegenstand läuft, nicht wie ein Glanz auf der Fläche. */
.lr-weg-bild{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;
  background-color:var(--n2);background-image:var(--bild);
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  transition:filter 350ms var(--ease)}
.lr-wege a:hover .lr-weg-bild{filter:brightness(1.06)}
.lr-weg-bild::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  transform:translateX(-150%);
  background:linear-gradient(100deg,transparent,rgba(221,230,242,.28),transparent)}
.lr-wege a:hover .lr-weg-bild::after{animation:lr-glanz 900ms var(--ease) both}
@keyframes lr-glanz{from{transform:translateX(-150%)}to{transform:translateX(260%)}}
.lr-wege b{font-weight:500;font-size:var(--t-h3);line-height:1.22;
  padding-inline:clamp(20px,2.4vw,28px);margin-top:.45em}
.lr-wege a > span:not(.lr-weg-bild){color:var(--on-night-mute);font-size:1rem;
  line-height:1.5;padding-inline:clamp(20px,2.4vw,28px)}
.lr-wege i{font-style:normal;font-family:var(--f-m);color:var(--acc);
  justify-self:start;margin:.35em clamp(20px,2.4vw,28px) clamp(20px,2.4vw,28px);
  transition:transform 300ms var(--ease)}
.lr-wege a:hover i{transform:translateX(8px)}
@media (prefers-reduced-motion:reduce){
  .lr-wege a,.lr-wege i,.lr-weg-bild{transition:none}
  .lr-weg-bild::after{display:none}
}

/* ══ 4 · Die Bildplätze ═══════════════════════════════════════════════════
   Ein Platz ohne Bild ist nie unsichtbar: er wird gezeigt, er läuft, er ist
   beschriftet. Das Seitenverhältnis steht VOR dem Bild — deshalb springt beim
   Einschieben nichts. Die Ebenenziffern gehören zur Zeichnung, nicht zum
   Inhalt; sie stehen in ::after und sind für Vorleseprogramme unsichtbar. */
.slot{position:relative;display:block;margin:clamp(30px,5vh,54px) 0 0;
  aspect-ratio:var(--ar,16/9);overflow:hidden;isolation:isolate;
  background:var(--n1);border:1px solid var(--linie)}
.slot[data-ar="16/9"]{--ar:16/9}
.slot[data-ar="21/9"]{--ar:21/9}
.slot[data-ar="4/3"] {--ar:4/3}
.slot__layer{position:absolute;inset:-8% -3%;
  background-size:cover;background-position:50% 50%;
  will-change:transform;transform:translate3d(0,calc(var(--y,0)*1px),0)}
/* Die Platzhalterzeichnung: vier waagerechte Schichten in abgestuftem Grau,
   von hinten nach vorn, mit feinem Raster und einer großen Ziffer je Schicht.
   Leicht geneigte Oberkanten — so liest man die Staffelung als Tiefe und
   nicht als Streifenmuster. Sie zeigt die Mechanik, nicht ein fehlendes Bild. */
.slot[data-ready="false"] .slot__layer{
  background-color:var(--stufe);
  background-image:
    linear-gradient(to right,rgba(221,230,242,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(221,230,242,.045) 1px,transparent 1px);
  background-size:46px 46px,46px 46px}
.slot[data-ready="false"] .slot__layer[data-layer="1"]{--stufe:#0A0F1C;inset:-4% -2%}
.slot[data-ready="false"] .slot__layer[data-layer="2"]{--stufe:#0E1524;
  clip-path:polygon(0 26%,100% 20%,100% 100%,0 100%)}
.slot[data-ready="false"] .slot__layer[data-layer="3"]{--stufe:#141D30;
  clip-path:polygon(0 54%,100% 46%,100% 100%,0 100%)}
.slot[data-ready="false"] .slot__layer[data-layer="4"]{--stufe:#1B2842;
  clip-path:polygon(0 80%,100% 74%,100% 100%,0 100%)}
/* Die Ziffer sitzt IM Sichtfeld ihrer eigenen Schicht — eine gemeinsame Ecke
   würde drei von vier Ziffern wegschneiden. Der waagerechte Überhang der
   Ebene (3 %) wird herausgerechnet, sonst liegt sie außerhalb des Platzes. */
.slot[data-ready="false"] .slot__layer::after{content:attr(data-layer);
  position:absolute;left:calc(3.2% + 16px);font-family:var(--f-m);
  font-size:clamp(15px,2vw,28px);line-height:1;color:rgba(221,230,242,.26)}
.slot[data-ready="false"] .slot__layer[data-layer="1"]::after{top:5%}
.slot[data-ready="false"] .slot__layer[data-layer="2"]::after{top:29%}
.slot[data-ready="false"] .slot__layer[data-layer="3"]::after{top:57%}
.slot[data-ready="false"] .slot__layer[data-layer="4"]::after{top:82%}
.slot[data-ready="false"][data-layers="1"] .slot__layer[data-layer="1"]{
  clip-path:none;--stufe:#101828}
.slot[data-ready="false"][data-layers="1"] .slot__layer::after{
  right:auto;bottom:auto;left:calc(2% + 18px);top:12px}
/* Ist ein Bild da, holt die Ebene ihre Datei — die Zeichnung verschwindet,
   der Effekt bleibt derselbe. */
.slot[data-ready="true"] .slot__layer[data-layer="1"]{background-image:var(--l1)}
.slot[data-ready="true"] .slot__layer[data-layer="2"]{background-image:var(--l2)}
.slot[data-ready="true"] .slot__layer[data-layer="3"]{background-image:var(--l3)}
.slot[data-ready="true"] .slot__layer[data-layer="4"]{background-image:var(--l4)}
/* Solange ein Vier-Ebenen-Platz noch nicht in Ebenen zerschnitten ist, läuft
   er mit der flachen Fassung: eine Fläche, ein Weg. Genau das Verhalten, das
   ohnehin für Telefone gilt — der Effekt bleibt, nur die Tiefe fehlt. Wird
   später geschnitten, fällt nur dieses eine Attribut weg. */
.slot[data-schnitt="flach"] .slot__layer:not([data-layer="1"]){display:none}
.slot[data-schnitt="flach"] .slot__layer[data-layer="1"]{inset:-9% -3%;
  clip-path:none;--takt:.42;background-image:var(--flat)}

/* KEINE BILDUNTERSCHRIFT MEHR AN DEN PLÄTZEN — und das ist der Endstand.
   Hier standen bis zum 4.9.2026 zwei Fassungen: die Einkaufsliste
   („A-1 · Rollwagen voller Edelstahlbleche · 16:9 · 4 Ebenen · Rasterordnung")
   und der alt-Text, dazu eine Regel, die die fertige Fassung per clip-path
   unsichtbar setzte. Das war Klasse F und Klasse G in einem Element:
   Baugerüst, das nur Maschinen sahen.

   Beides ist gelöscht — 31 figcaption über sechs Seiten. Die Bilder tragen
   keinen Text; sie sind Atmosphäre. Nach R8 ist ein CSS-Hintergrund dafür die
   richtige Auszeichnung, und ein dekoratives Bild bekommt korrekterweise
   keinen zugänglichen Namen. Die figure-Hüllen, die dadurch inhaltsleer
   wurden, sind div mit derselben Klasse — die Optik ändert sich um kein Pixel.

   Trägt ein Platz später ein Bild, das INFORMATION trägt — Diagramm, Kurve,
   Tabelle, Bildschirmaufnahme —, dann ist es kein .slot, sondern eine
   Abbildung und geht den Weg R5: SVG inline, title und desc, dazu eine echte
   figcaption, die den Befund als ganzen Satz nennt. */
/* Tiefenzug — vier Ebenen, Scrollanteile 0,08 / 0,24 / 0,46 / 0,82.
   Den Weg schreibt der Zeiger als --y in Pixeln, proportional zur
   Sichtbarkeit im Fenster. Ruhezustand: Ebenen mittig. */
.slot[data-effect~="tiefenzug"] .slot__layer[data-layer="1"]{--takt:.08}
.slot[data-effect~="tiefenzug"] .slot__layer[data-layer="2"]{--takt:.24}
.slot[data-effect~="tiefenzug"] .slot__layer[data-layer="3"]{--takt:.46}
.slot[data-effect~="tiefenzug"] .slot__layer[data-layer="4"]{--takt:.82}

/* Kippglas — perspective, max 6°, mit Nachlauf. Darüber ein Glanzstreifen,
   der gegenläufig wandert. Auf Touch aus (siehe Abschnitt 6). */
.slot[data-effect~="kippglas"]{perspective:1400px;perspective-origin:50% 50%}
.slot[data-effect~="kippglas"] .slot__kipp{position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg))}
.slot__glanz{position:absolute;inset:-20% -40%;z-index:4;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(240,238,230,.16) 50%,transparent 62%);
  mix-blend-mode:screen;transform:translate3d(calc(var(--gl,0)*1%),0,0)}

/* Lichtlauf — weit gezogener Verlauf, screen, Deckkraft ≤ 0,14, wandert mit
   dem Scrollfortschritt. Ruhezustand: Streifen bei 60 %. */
.slot__licht{position:absolute;inset:-10% -30%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,
    color-mix(in oklab,var(--nadel-hell) 60%,transparent) 50%,transparent 70%);
  opacity:.14;mix-blend-mode:screen;
  transform:translate3d(calc((var(--lauf,.6) - .5)*46%),0,0)}

/* Maskenschnitt — clip-path von rechts freigelegt, 520 ms, einmalig.
   Ruhezustand: freigelegt.
   Der Schnitt sitzt auf den Ebenen, NICHT auf dem Platz selbst: ein
   clip-path am beobachteten Element leert in Chromium das
   Schnittrechteck des IntersectionObserver — er meldet dann nie, und die
   Enthüllung löst nicht aus. Die Ebene trägt data-layers in der Kette, damit
   diese Regel die Platzhalter-Regel schlägt. */
.slot[data-effect~="maskenschnitt"][data-layers] .slot__layer[data-layer],
.slot[data-effect~="maskenschnitt"][data-layers] .slot__glanz{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 520ms var(--ease)}
.slot[data-effect~="maskenschnitt"][data-layers][data-ab="ja"] .slot__layer[data-layer],
.slot[data-effect~="maskenschnitt"][data-layers][data-ab="ja"] .slot__glanz{
  clip-path:inset(0)}

/* Rasterordnung — ein Bild, 32 Kacheln. Versatz, Drehung, Maßstab, Deckkraft
   kommen als Startwerte aus dem Skript; die Verzögerung richtet sich nach der
   Entfernung zur Endlage, nicht nach dem Index. Umkehrbar. */
.slot[data-effect~="rasterordnung"]{background:var(--n0)}
.slot__raster{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(4,1fr)}
/* Die Startwerte kommen als Inline-Style aus dem Skript und heißen deshalb
   ANDERS als die Endwerte: ein Inline-Style schlägt jede Regel im Stylesheet,
   und eine Kachel, deren Versatz inline steht, kehrt nie in ihre Endlage
   zurück. Also trägt das Skript nur --dx0 … --sc0, und die Endlage steht
   hier — im Stylesheet, wo sie gewinnen kann. */
.slot__kachel{position:relative;background-size:800% 400%;
  background-image:var(--bild,none);background-color:var(--kachelgrund,#101828);
  background-position:var(--bp,0 0);
  transform:translate3d(var(--dx0,0),var(--dy0,0),0)
            rotate(var(--rot0,0deg)) scale(var(--sc0,1));
  opacity:0;
  transition:transform 560ms var(--ease),opacity 400ms var(--ease);
  transition-delay:var(--vz,0ms)}
/* Im Ruhezustand liegen die Kacheln 0,6 % über ihrer Kante — sonst zeigt sich
   an jeder Naht eine Haarlinie des Grundes, und aus einem Foto wird ein
   Fliesenspiegel. */
.slot[data-ab="ja"] .slot__kachel{
  transform:translate3d(0,0,0) rotate(0deg) scale(1.006);opacity:1}
.slot[data-ready="false"] .slot__kachel{
  box-shadow:inset 0 0 0 1px rgba(221,230,242,.05)}

/* Zustandsblende — zwei Bilder gleichen Ausschnitts. Der zweite Zustand wird
   nicht eingeblendet, sondern von links nach rechts aufgedeckt: eine weiche
   Kante läuft über das Bild und schiebt den neuen Zustand vor sich her. Keine
   Trennlinie, kein Griff — der Weg der Kante hängt am Scrollfortschritt.
   Aufgedeckt wird a (geordnet) über b (unordentlich). Ruhezustand: a. */
.slot__paar{position:absolute;inset:0;background-size:cover;background-position:50% 50%}
.slot__paar[data-seite="a"]{background-image:var(--la);
  /* schwarz bis zur Kante, dahinter durchsichtig — die 22 % Weichzeichnung
     sind die Kante selbst. Bei 0 steht sie links außerhalb, bei 1 rechts. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--blende,1) * 122% - 22%),
    transparent calc(var(--blende,1) * 122%));
  mask-image:linear-gradient(90deg,#000 calc(var(--blende,1) * 122% - 22%),
    transparent calc(var(--blende,1) * 122%))}
.slot__paar[data-seite="b"]{background-image:var(--lb)}
.slot[data-ready="false"] .slot__paar{background-color:#101828;
  background-image:
    linear-gradient(to right,rgba(221,230,242,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(221,230,242,.045) 1px,transparent 1px);
  background-size:46px 46px,46px 46px}
.slot[data-ready="false"] .slot__paar[data-seite="b"]{background-color:#0A0F1C;
  background-size:26px 26px,26px 26px}
.slot[data-ready="false"] .slot__paar::after{content:attr(data-seite);
  position:absolute;left:18px;top:12px;font-family:var(--f-m);
  font-size:clamp(18px,3vw,36px);line-height:1;color:rgba(221,230,242,.18)}

/* Statuslicht — die freigestellte Leuchtebene springt alle 1,6 s auf eine von
   acht festen Positionen, Blende 400 ms. Die Positionen sind Variablen und am
   fertigen Bild justierbar. Ruhezustand: Position 1. */
/* Statuslicht — acht feste Positionen als CSS-Variablen: Anteil der Breite
   und der Höhe. Am fertigen Bild justiert man sie hier, nicht im Skript. */
.slot[data-effect~="statuslicht"]{
  --g1:41 56; --g2:57 47; --g3:35 63; --g4:64 59;
  --g5:46 41; --g6:52 67; --g7:38 50; --g8:61 53}
.slot__glow{position:absolute;z-index:5;pointer-events:none;
  width:14%;aspect-ratio:1;left:0;top:0;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in oklab,var(--nadel-hell) 92%,transparent) 0%,
    color-mix(in oklab,var(--nadel) 55%,transparent) 38%,transparent 72%);
  transform:translate3d(calc(var(--gx,42)*1% - 50%),calc(var(--gy,54)*1% - 50%),0);
  opacity:var(--go,.9);
  transition:transform 400ms var(--ease),opacity 400ms var(--ease)}
.slot[data-ready="true"] .slot__glow{background:var(--lglow) center/contain no-repeat;
  width:var(--gb,14%);aspect-ratio:var(--gar,1)}
/* Die Leuchtebene ist nicht freigestellt, sondern auf Schwarz aufgenommen.
   Eingeblendet wird sie deshalb über screen: Schwarz fällt weg, das Licht
   bleibt. Das ist auch der ehrlichere Weg — ein Freistellen hätte die weichen
   Lichtkanten abgeschnitten. */
.slot[data-ready="true"][data-glow="screen"] .slot__glow{mix-blend-mode:screen}

/* Bandzug — waagerechter Streifen, seitwärts, 60 s je Durchlauf, nahtlos,
   zeitgesteuert. Zwei gleiche Hälften, damit die Naht nicht auffällt. */
.lr-band{position:relative;width:100%;margin:0;overflow:hidden;
  aspect-ratio:var(--ar,21/9);max-height:clamp(120px,22vh,240px);
  background:var(--n0);border-block:1px solid var(--linie);border-inline:0}
.lr-band .slot__zug{position:absolute;inset:0;display:flex;width:200%;
  animation:lr-zug 60s linear infinite}
.lr-band .slot__zug > i{flex:0 0 50%;
  background:var(--l1,none) center/cover no-repeat;
  background-color:#0B1120;
  background-image:
    repeating-linear-gradient(90deg,rgba(221,230,242,.05) 0 1px,transparent 1px 42px),
    linear-gradient(180deg,#111A2C,#080D18)}
.lr-band[data-ready="true"] .slot__zug > i{background:var(--l1) center/cover no-repeat}
@keyframes lr-zug{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ══ Verbund — Bild und Satz als eine Komposition ════════════════════════
   Ein Bild neben einen Absatz zu stellen ist keine Einbindung, sondern eine
   Nachbarschaft. Der Verbund baut aus beidem EINE Komposition in drei echten
   Ebenen, die beim Rollen unterschiedlich schnell laufen:

     hinten — das Foto. Es läuft über die Seitenkante hinaus und hat auf der
              Satzseite keine Kante, sondern löst sich auf.
     mitte  — der Satz, auf einer angehobenen Papierfläche, die bis zur
              gegenüberliegenden Seitenkante reicht: nicht eine Karte im Text,
              sondern das Blatt selbst, das sich zum Foto hin hebt.
   Geschrieben wird nur --tv (der Weg des Satzes) in Pixeln; den
   Weg gibt leistung.js aus demselben Zeiger wie alles andere. */
.lr-verbund{position:relative;isolation:isolate;clear:both;
  /* Der Überhang zur Seitenkante: genau das Maß, das der Abschnitt als
     Innenabstand hält. So endet das Foto an der Fensterkante und nicht kurz
     davor — ein Foto, das 100 px vor dem Rand aufhört, ist wieder ein Kasten. */
  --ueber:max(var(--rand),calc((100vw - var(--spalte)) / 2));
  margin:clamp(48px,8vh,104px) 0;min-height:clamp(330px,44vh,540px);
  display:grid}
.lr-verbund + .lr-verbund{margin-top:clamp(64px,11vh,140px)}

/* hinten — das Foto. Höher gewichtet als die Nacht-Regel in Abschnitt 3,
   sonst holt die sich den Platz zurück ins Fließen. */
.arc-lr .lr-verbund > .slot{position:absolute;z-index:0;margin:0;
  top:0;bottom:0;left:37%;right:calc(-1 * var(--ueber));
  width:auto;height:auto;aspect-ratio:auto;border:0;overflow:hidden;
  background:var(--n0);filter:brightness(1.14) contrast(1.03);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
.arc-lr .lr-verbund[data-seite="links"] > .slot{left:calc(-1 * var(--ueber));right:37%;
  -webkit-mask-image:linear-gradient(270deg,transparent 0,#000 18%);
  mask-image:linear-gradient(270deg,transparent 0,#000 18%)}
/* Rahmenplatte und Schlagschatten gehören zur freistehenden Tafel. Im Verbund
   trägt die Tiefe das Blatt, nicht ein Rahmen um das Foto. */
.lr-verbund > .slot::before,.lr-verbund > .slot .slot__schatten{display:none}
.lr-verbund > .slot::after{box-shadow:inset 0 0 110px rgba(2,4,9,.5)}

/* mitte — der Satz auf angehobenem Papier. Die Fläche reicht über die
   Seitenkante hinaus und ist so hoch wie die Komposition: sie hat nur EINE
   sichtbare Kante, die zum Foto. Eine Karte mit vier Kanten wäre wieder ein
   Kasten im Text — hier hebt sich das Blatt selbst. */
.lr-verbund__satz{position:relative;z-index:2;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;justify-self:start;
  width:min(66%,720px);margin-left:calc(-1 * var(--ueber));
  padding:clamp(30px,4.5vh,54px) clamp(30px,3.2vw,52px)
          clamp(38px,5.5vh,64px) var(--ueber);
  background:color-mix(in oklab,var(--eigen,var(--dawn)) 82%,#FFFFFF);
  box-shadow:24px 30px 60px -34px rgba(2,4,9,.5);
  transform:translate3d(0,calc(var(--tv,0) * 1px),0)}
[data-grund="nacht"] .lr-verbund__satz{background:var(--n1);
  box-shadow:24px 30px 60px -30px rgba(2,4,9,.8)}
.lr-verbund[data-seite="links"] .lr-verbund__satz{justify-self:end;
  margin-left:0;margin-right:calc(-1 * var(--ueber));
  padding-left:clamp(30px,3.2vw,52px);padding-right:var(--ueber);
  box-shadow:-24px 30px 60px -34px rgba(2,4,9,.5)}
.lr-verbund__satz > *:last-child{margin-bottom:0}
.lr-verbund__satz .arc-aufschrift,.lr-verbund__satz .arc-h2,
.lr-verbund__satz .lr-h3{margin-top:0}
/* Eine Überschrift in halber Spaltenbreite braucht einen kleineren Grad —
   sonst zerfällt sie in Fünf-Wort-Zeilen. */
.lr-verbund__satz .arc-h2{font-size:clamp(1.68rem,1.2rem + 1.3vw,2.5rem)}
.lr-verbund__satz .lr-lauf,.lr-verbund__satz .lr-lead,
.lr-verbund__satz .lr-satz{max-width:46ch}
/* Das Bildpaar der Zustandsblende fährt im Verbund mit — sonst steht die
   Hinterebene still, während Blatt und Nähe laufen. */
.lr-verbund > .slot .slot__paar{transform:translate3d(0,calc(var(--y,0) * 1px),0)}


/* Bis 1179 px, nicht bis 1023: Der Verbund braucht zwei Ebenen nebeneinander —
   das Foto ab 37 Prozent der Breite, darüber ein Blatt von bis zu 720 px, das
   mit negativem Rand über die Seitenkante greift. Beides zusammen braucht mehr
   als die 1180 px, auf die --ueber gerechnet ist. Darunter reichte der Platz
   nicht: zwischen
   1024 und 1279 px stand das Blatt weiter als Platte da, aber schmaler als der
   Satz darin, und sein Innenabstand verschob den Text gegen die linke Kante
   aller anderen Abschnitte. Das sah nach einem verschobenen Kasten aus, und
   genau das war es. Ab hier fällt der Verbund auseinander, wie vorgesehen. */
@media (max-width:1279px){
  .lr-verbund{display:block;min-height:0;margin:clamp(34px,6vh,54px) 0}
  .arc-lr .lr-verbund > .slot{position:relative;inset:auto;
    margin:0 calc(-1 * var(--rand));aspect-ratio:16/9;
    -webkit-mask-image:none;mask-image:none}
  /* Der Rücksetzer muss ALLE Regeln überstimmen, die das Blatt in der weiten
     Fassung setzen — und die sind spezifischer als eine einzelne Klasse:
     .lr-verbund[data-seite="links"] .lr-verbund__satz (0,3,0) trägt den
     negativen rechten Rand und den Innenabstand, [data-grund="nacht"]
     .lr-verbund__satz (0,2,0) die Fläche und den Schatten. Ein
     .lr-verbund__satz{...} allein (0,1,0) verliert gegen beide — das Blatt
     blieb als Platte stehen, ragte über die rechte Fensterkante hinaus und
     rückte seinen Text weiter ein als jeder andere Abschnitt. Deshalb hier
     jede Kombination ausgeschrieben, und max-width als letzte Sicherung. */
  .lr-verbund .lr-verbund__satz,
  .lr-verbund[data-seite="links"] .lr-verbund__satz,
  [data-grund="nacht"] .lr-verbund .lr-verbund__satz,
  [data-grund="nacht"] .lr-verbund[data-seite="links"] .lr-verbund__satz,
  [data-grund="tag"] .lr-verbund .lr-verbund__satz,
  [data-grund="tag"] .lr-verbund[data-seite="links"] .lr-verbund__satz{
    width:auto;max-width:100%;justify-self:stretch;
    margin:0;padding:clamp(22px,4vh,34px) 0 0;
    background:none;box-shadow:none;transform:none}
  .lr-verbund__satz > *:last-child{padding-right:0;padding-left:0}
}

/* Kopfbild — der Einstieg. Kein Block unter dem Absatz, sondern die Fläche,
   auf der der Absatz liegt: das Foto sitzt in der unteren Außenecke des
   Abschnitts, läuft über beide Kanten hinaus und löst sich nach innen in die
   Nacht auf. Die Überschrift steht davor und läuft schneller. */
.arc-lr .lr-kopfbild > .slot--kopf{position:absolute;z-index:0;margin:0;
  right:0;bottom:0;left:auto;top:auto;
  width:min(68%,940px);aspect-ratio:var(--ar,16/9);height:auto;
  border:0;background:none;
  -webkit-mask-image:linear-gradient(100deg,transparent 0,#000 58%),
    linear-gradient(180deg,transparent 0,#000 46%);
  mask-image:linear-gradient(100deg,transparent 0,#000 58%),
    linear-gradient(180deg,transparent 0,#000 46%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transform:translate3d(0,calc(var(--tb,0) * 1px),0)}
.lr-kopfbild > .slot--kopf::before,.lr-kopfbild > .slot--kopf .slot__schatten{display:none}
/* Der Schleier: das Foto wird UNTER der Schrift abgedunkelt, nicht aufgehellt.
   Er liegt im Platz selbst (::after) und läuft nach außen aus — dieselbe
   Aufgabe, die im Verbund das Blatt übernimmt. */
.lr-kopfbild > .slot--kopf::after{content:"";position:absolute;inset:0;z-index:3;
  box-shadow:none;
  background:linear-gradient(100deg,var(--n0) 0 34%,
    color-mix(in oklab,var(--n0) 62%,transparent) 62%,transparent 88%)}
/* Und die Schrift bleibt in ihrer Spur: sie endet dort, wo das Foto noch
   ausgelaufen ist. Ohne Breitengrenze läuft ein 66-Zeichen-Absatz bis in den
   deckenden Teil des Bildes — und dort ist er nicht mehr zu lesen. */
.lr-kopfbild .lr-lead{max-width:min(100%,44ch)}
.lr-kopfbild .lr-lauf,.lr-kopfbild .arc-eckdaten{max-width:min(100%,50ch)}
.lr-kopfbild .arc-h1,.lr-kopfbild .lr-lead{position:relative;
  transform:translate3d(0,calc(var(--tk,0) * 1px),0)}
@media (max-width:899px){
  .arc-lr .lr-kopfbild > .slot--kopf{width:calc(100% + 2 * var(--rand));
    right:calc(-1 * var(--rand));
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%);
    mask-image:linear-gradient(180deg,transparent 0,#000 42%);
    opacity:.7}
  .lr-kopfbild > .slot--kopf::after{background:linear-gradient(180deg,var(--n0) 0 22%,
    color-mix(in oklab,var(--n0) 45%,transparent) 70%,transparent)}
  .lr-kopfbild .arc-h1,.lr-kopfbild .lr-lead,
  .lr-kopfbild .lr-lauf,.lr-kopfbild .arc-eckdaten{max-width:none}
  .lr-kopfbild .arc-h1,.lr-kopfbild .lr-lead{transform:none}
}

/* ══ 5 · Die zehn Effekte ohne Bild ═══════════════════════════════════════
   Hier liegt die eigentliche Arbeit. Sie tragen die Seiten, solange keine
   Bilder da sind, und sie bleiben auch danach die eigentliche Arbeit. */

/* Intervallklammer — die Klammer steht beim Eintritt weit offen und zieht
   sich auf ihre wahre Breite zusammen, während der Wert hochläuft. Steht
   statt einer Zahl ein [ Zahl ], bleibt sie offen: der Platzhalter ist Teil
   der Gestaltung, nicht ihr Loch. */
.lr-mess{display:inline-flex;align-items:baseline;gap:.1em;font-family:var(--f-m);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.lr-mess-kl{font-style:normal;color:var(--acc);
  transform:translateX(calc(var(--kl,1) * var(--seite,-1) * 1.1em));
  transition:transform 620ms var(--ease)}
.lr-mess-kl:last-child{--seite:1}
.lr-mess-wert{font-weight:400;color:var(--on-dawn)}
/* Die offene Klammer steht über den Rand ihres Kastens hinaus. Sie braucht
   den Platz reserviert, sonst schiebt sie sich über das Wort daneben — und
   der Platzhalter sähe wie ein Fehler aus statt wie eine offene Angabe. */
.lr-mess[data-offen="ja"]{margin-inline:1.05em}
.lr-mess[data-offen="ja"] .lr-mess-wert{color:var(--on-dawn-mute)}
[data-grund="nacht"] .lr-mess-wert{color:var(--on-night)}
[data-grund="nacht"] .lr-mess[data-offen="ja"] .lr-mess-wert{color:var(--on-night-mute)}
.lr-tab tbody td .lr-mess{justify-content:flex-end}

/* Zählwerk — die sieben Werktagszahlen laufen nacheinander ein, 90 ms
   versetzt. Solange alle sieben leer sind, stehen sieben offene Klammern da,
   und das ist der ehrlichste Zustand, den die Tabelle haben kann. */
.arc-js .lr-zaehlwerk tbody tr{opacity:0;transform:translateY(8px);
  transition:opacity 380ms var(--ease),transform 380ms var(--ease);
  transition-delay:calc(var(--r,0) * 90ms)}
.arc-js .lr-zaehlwerk[data-ab="ja"] tbody tr{opacity:1;transform:none}

/* Anteilsbalken — zwei Balken wachsen auf 13 % und 30 %, Wert in Monoschrift
   am Balkenende, darunter der Vorbehalt. */
.lr-anteil{margin:30px 0 0;max-width:66ch;display:grid;gap:18px}
.lr-anteil-zeile{display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr) auto;
  gap:6px 18px;align-items:center}
.lr-anteil-marke{font-size:1rem;color:var(--on-dawn)}
.lr-anteil-spur{position:relative;height:10px;background:var(--dawn-dim);overflow:hidden}
.lr-anteil-spur i{position:absolute;inset:0;transform-origin:0 50%;
  background:var(--acc);transform:scaleX(0);
  transition:transform 900ms var(--ease);transition-delay:var(--vz,0ms)}
.lr-anteil[data-ab="ja"] .lr-anteil-spur i{transform:scaleX(var(--anteil,0))}
.lr-anteil-wert{font-family:var(--f-m);font-variant-numeric:tabular-nums;
  color:var(--on-dawn);white-space:nowrap}
.lr-anteil-vorbehalt{margin:6px 0 0;font-size:.96rem;color:var(--on-dawn-mute);
  max-width:62ch}
@media (max-width:600px){
  .lr-anteil-zeile{grid-template-columns:minmax(0,1fr) auto}
  .lr-anteil-spur{grid-column:1/-1;order:3}
}

/* Rechenschieber — ein Regler, die Rechnung läuft live mit, die Formel steht
   sichtbar daneben. Die Grenzen des Reglers sind die Grenzen des Belegten:
   darüber hinaus wird nicht hochgerechnet. */
.lr-rechner{margin:32px 0 0;max-width:70ch;padding:22px;
  background:var(--papier-hoch);border:1px solid var(--linie-tag)}
.lr-rechner-formel{margin:0 0 18px;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.lr-rechner-zahl{margin:0;font-family:var(--f-m);line-height:1;
  font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem);color:var(--on-dawn);
  font-variant-numeric:tabular-nums}
.lr-rechner-zahl i{font-style:normal;font-size:1rem;letter-spacing:.06em;
  color:var(--on-dawn-mute);margin-left:.5em}
.lr-rechner-fuss{margin:12px 0 0;font-size:.96rem;color:var(--on-dawn-mute)}
.lr-rechner-regler{display:grid;gap:22px;margin:24px 0 0}
.lr-rechner-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;
  align-items:baseline}
.lr-rechner-marke{font-size:1rem;color:var(--on-dawn)}
.lr-rechner-aus{font-family:var(--f-m);text-align:right;
  color:var(--on-dawn);font-variant-numeric:tabular-nums;white-space:nowrap}
.lr-rechner-zeile input[type="range"]{grid-column:1/-1;width:100%;height:44px;
  margin:0;appearance:none;background:transparent;cursor:pointer}
.lr-rechner-zeile input[type="range"]::-webkit-slider-runnable-track{
  height:3px;background:color-mix(in oklab,var(--on-dawn) 28%,transparent)}
.lr-rechner-zeile input[type="range"]::-webkit-slider-thumb{appearance:none;
  width:22px;height:22px;margin-top:-9.5px;border-radius:50%;
  background:var(--acc);border:0}
.lr-rechner-zeile input[type="range"]::-moz-range-track{height:3px;
  background:color-mix(in oklab,var(--on-dawn) 28%,transparent)}
.lr-rechner-zeile input[type="range"]::-moz-range-thumb{width:22px;height:22px;
  border-radius:50%;background:var(--acc);border:0}
.lr-rechner-zeile input[type="range"]:focus-visible{outline:2px solid var(--acc);
  outline-offset:4px}

/* Lernkurve — drei gemessene Punkte, die Linie zeichnet sich beim Scrollen.
   Dahinter das Streuband 0,43–0,97 bei zehn Beispielen als Fläche: es ist
   breiter als der Sprung, und genau das ist die Aussage. */
.lr-kurve{margin:32px 0 0;max-width:640px}
.lr-kurve svg{display:block;width:100%;height:auto;overflow:visible}
.lr-kurve-netz{stroke:var(--linie-tag);stroke-width:1;fill:none}
.lr-kurve-band{fill:color-mix(in oklab,var(--acc) 16%,transparent);
  opacity:0;transition:opacity 620ms var(--ease) 240ms}
.lr-kurve-linie{fill:none;stroke:var(--acc);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--l,400);stroke-dashoffset:var(--l,400);
  transition:stroke-dashoffset 1100ms var(--ease)}
.lr-kurve-punkt{fill:var(--acc);opacity:0;
  transition:opacity 320ms var(--ease);transition-delay:var(--vz,0ms)}
.lr-kurve-schrift{font-family:var(--f-m);font-size:11px;fill:var(--on-dawn-mute)}
.lr-kurve[data-ab="ja"] .lr-kurve-linie{stroke-dashoffset:0}
.lr-kurve[data-ab="ja"] .lr-kurve-band{opacity:1}
.lr-kurve[data-ab="ja"] .lr-kurve-punkt{opacity:1}
.lr-kurve figcaption{margin:14px 0 0;font-size:.96rem;color:var(--on-dawn-mute)}

/* Waagenpaar — die zwei Spalten kippen um 2° zu der Seite, über der der
   Zeiger steht, und die andere tritt leicht zurück. Auf Touch aus. */
.lr-waage{transform-style:preserve-3d}
.lr-waage td,.lr-waage th{transition:transform 420ms var(--ease),opacity 420ms var(--ease)}
.lr-waage[data-seite="links"] td:first-child,
.lr-waage[data-seite="links"] th:first-child{transform:rotate(-2deg) translateY(-2px)}
.lr-waage[data-seite="links"] td:last-child,
.lr-waage[data-seite="links"] th:last-child{transform:scale(.985);opacity:.72}
.lr-waage[data-seite="rechts"] td:last-child,
.lr-waage[data-seite="rechts"] th:last-child{transform:rotate(2deg) translateY(-2px)}
.lr-waage[data-seite="rechts"] td:first-child,
.lr-waage[data-seite="rechts"] th:first-child{transform:scale(.985);opacity:.72}

/* Grenzstreifen — jedes „Wo es nicht taugt" fährt auf hellem Grund von rechts
   ein, 320 ms, mit einer Haarlinie in --acc-ink. Wiederkehrendes Zeichen: wer
   die Seite zweimal liest, erkennt am Streifen sofort die Einschränkung. */
.lr-grenze{position:relative;max-width:68ch;margin:28px 0 0;
  padding:20px 22px 20px 24px;background:var(--papier-hoch);
  color:var(--on-dawn-mute)}
.lr-grenze::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--acc-ink,var(--kalt-tag))}
.lr-grenze-marke{display:block;margin:0 0 8px;font-family:var(--f-m);
  font-size:var(--t-mark);letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc-ink,var(--kalt-tag))}
.lr-grenze p{margin:0 0 12px}
.lr-grenze p:last-child{margin:0}
.lr-grenze strong{color:var(--on-dawn);font-weight:500}
.arc-js .lr-grenze{opacity:0;transform:translateX(26px);
  transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.arc-js .lr-grenze[data-ab="ja"]{opacity:1;transform:none}

/* Schrittpfad — drei nummerierte Schritte, die Verbindungslinie zeichnet sich
   beim Scrollen von 1 nach 3. */
.lr-schritte{list-style:none;margin:30px 0 0;padding:0;max-width:70ch;
  position:relative;display:grid;gap:28px}
.lr-schritte::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;
  width:1px;background:var(--acc);transform:scaleY(var(--pfad,0));
  transform-origin:50% 0;transition:transform 900ms var(--ease)}
.lr-schritte[data-ab="ja"]{--pfad:1}
.lr-schritte li{position:relative;padding-left:52px}
.lr-schritte li::before{content:attr(data-nr);position:absolute;left:0;top:0;
  width:31px;height:31px;display:grid;place-items:center;border-radius:50%;
  background:var(--eigen,var(--dawn));border:1px solid var(--acc);
  font-family:var(--f-m);font-size:.84rem;color:var(--acc-ink,var(--acc))}
.lr-schritte b{display:block;font-weight:500;color:var(--on-dawn);margin-bottom:4px}
.lr-schritte p{margin:0;color:var(--on-dawn-mute)}

/* Gegenrechnung — zwei Balken nebeneinander. Der zweite wächst deutlich
   langsamer und länger als der erste. */
.lr-gegen{margin:32px 0 0;max-width:70ch;display:grid;gap:26px}
.lr-gegen-zeile{display:grid;gap:8px}
.lr-gegen-kopf{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;font-size:1rem;color:var(--on-dawn)}
.lr-gegen-kopf b{font-family:var(--f-m);font-weight:400;
  font-variant-numeric:tabular-nums}
.lr-gegen-spur{position:relative;height:14px;background:var(--dawn-dim);overflow:hidden}
/* Die Geometrie steht statisch — von … bis auf einer gemeinsamen Euro-Achse.
   Animiert wird nur scaleX. */
.lr-gegen-spur i{position:absolute;top:0;bottom:0;
  left:calc(var(--von,0) * 100%);right:calc((1 - var(--bis,1)) * 100%);
  transform-origin:0 50%;transform:scaleX(0);
  background:var(--acc);transition:transform var(--dauer,900ms) var(--ease);
  transition-delay:var(--vz,0ms)}
.lr-gegen[data-ab="ja"] .lr-gegen-spur i{transform:scaleX(1)}
.lr-gegen-achse{display:flex;justify-content:space-between;margin:0;
  font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.1em;
  color:var(--on-dawn-mute)}
.lr-gegen-zeile--notfall .lr-gegen-spur i{background:var(--chrome)}
.lr-gegen-fuss{margin:0;font-size:.96rem;color:var(--on-dawn-mute)}

/* Intervalltafel — Wert, Klammer und die Spanne auf einer gemeinsamen Achse.
   Wir schreiben nicht „96 Prozent", sondern dazu, wie breit die Unsicherheit
   ist. Die Achse ist für alle Zeilen dieselbe, sonst vergleicht man Breiten,
   die nichts miteinander zu tun haben. */
.lr-intervalle{margin:30px 0 0;max-width:74ch;display:grid;gap:22px;
  border-top:1px solid var(--linie-tag);padding-top:24px}
.lr-int{display:grid;grid-template-columns:minmax(0,11em) auto minmax(0,1fr);
  gap:8px 22px;align-items:center}
.lr-int-marke{font-size:1.02rem;color:var(--on-dawn)}
.lr-int-wert{font-size:var(--t-lead)}
.lr-int-spur{position:relative;height:24px}
.lr-int-spur::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--linie-tag)}
.lr-int-spur i{position:absolute;top:calc(50% - 3px);height:6px;
  left:calc(var(--von,0) * 100%);right:calc((1 - var(--bis,1)) * 100%);
  background:color-mix(in oklab,var(--acc) 34%,transparent);
  transform-origin:0 50%;transform:scaleX(0);
  transition:transform 720ms var(--ease)}
.lr-int-spur b{position:absolute;top:calc(50% - 5px);left:calc(var(--punkt,.5) * 100%);
  width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--acc);
  opacity:0;transition:opacity 320ms var(--ease) 420ms}
.lr-intervalle[data-ab="ja"] .lr-int-spur i{transform:scaleX(1)}
.lr-intervalle[data-ab="ja"] .lr-int-spur b{opacity:1}
.lr-int-spanne{grid-column:3;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.06em;color:var(--on-dawn-mute);display:flex;
  justify-content:space-between}
@media (max-width:700px){
  .lr-int{grid-template-columns:minmax(0,1fr) auto}
  .lr-int-spur,.lr-int-spanne{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .lr-int-spur i{transform:scaleX(1);transition:none}
  .lr-int-spur b{opacity:1;transition:none}
}

/* Herzschlag — eine dünne Linie über die Abschnittsbreite mit einem Ausschlag,
   der alle 4 s einmal durchläuft. Zeitgesteuert, sehr leise. */
.lr-herzschlag{position:relative;height:34px;margin:30px 0 0;max-width:70ch;
  overflow:hidden}
.lr-herzschlag::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:1px;background:var(--linie-tag)}
.lr-herzschlag i{position:absolute;left:0;top:0;bottom:0;width:78px;
  background:var(--acc);
  clip-path:polygon(0 49%,30% 49%,38% 8%,50% 92%,60% 49%,100% 49%,100% 51%,60% 51%,50% 96%,38% 12%,30% 51%,0 51%);
  transform:translate3d(-100%,0,0);
  animation:lr-schlag 4s linear infinite}
@keyframes lr-schlag{
  0%{transform:translate3d(-90px,0,0);opacity:0}
  6%{opacity:.9}
  86%{opacity:.9}
  100%{transform:translate3d(calc(100% + 90px),0,0);opacity:0}
}
.lr-herzschlag-marke{position:absolute;right:0;top:50%;transform:translateY(-50%);
  padding-left:14px;background:var(--eigen,var(--dawn));font-family:var(--f-m);
  font-size:var(--t-mark);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dawn-mute)}

/* ══ 6 · Breiten ══════════════════════════════════════════════════════════
   ≥ 1024 px alles · 600–1023 px halber Weg, kein Kippglas, 12 Kacheln ·
   < 600 px flache Fassung statt Ebenen, kein Kippglas, kein Bandzug, keine
   Rasterordnung. Die Effekte, die den Inhalt tragen, bleiben überall. */
@media (max-width:1023px){
  .slot[data-effect~="kippglas"] .slot__glanz{display:none}
  .slot__raster{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
  .slot__kachel{background-size:400% 300%}
  .slot__kachel[data-ueber="ja"]{display:none}
}
@media (max-width:599px){
  /* Kein Ebenensatz: der Platz holt die flache Fassung. Vier Bilder für eine
     Parallaxe, die man auf 390 px kaum sieht, sind vier Bilder zu viel. */
  .slot[data-layers="4"] .slot__layer{display:none}
  .slot[data-layers="4"] .slot__layer[data-layer="1"]{display:block;inset:0;
    transform:none;clip-path:none;--stufe:#101828}
  .slot[data-ready="true"][data-layers="4"] .slot__layer[data-layer="1"]{
    background-image:var(--flat)}
  .slot[data-effect~="kippglas"]{perspective:none}
  .slot[data-effect~="kippglas"] .slot__kipp{transform:none}
  .slot[data-effect~="rasterordnung"] .slot__raster{display:none}
  .lr-band{display:none}
  .lr-rechner{padding:18px 16px}
}

/* Kein Zeigergerät: Kippglas und Waagenpaar hängen an einem Zeiger, den es
   dort nicht gibt. Beide stehen dann in ihrem Ruhezustand. */
@media (hover:none),(pointer:coarse){
  .slot[data-effect~="kippglas"]{perspective:none}
  .slot[data-effect~="kippglas"] .slot__kipp{transform:none}
  .slot__glanz{display:none}
  .lr-waage[data-seite] td,.lr-waage[data-seite] th{transform:none;opacity:1}
}

/* prefers-reduced-motion: jeder Effekt steht in seinem Endzustand. Nicht
   „Animation aus und nichts zu sehen" — die Seite ist vollständig, nur
   unbewegt. */
@media (prefers-reduced-motion:reduce){
  .lr-verbund__satz,.lr-kopfbild > .slot--kopf,
  .lr-kopfbild .arc-h1,.lr-kopfbild .lr-lead{transform:none}
  .slot[data-form]:not([data-effect~="kippglas"]){transform:none}
  .slot[data-form] .slot__schatten{transition:none}
  .slot__layer,.slot__glanz,.slot__licht{transform:none}
  .slot[data-effect~="maskenschnitt"][data-layers] .slot__layer[data-layer],
  .slot[data-effect~="maskenschnitt"][data-layers] .slot__glanz{
    clip-path:inset(0);transition:none}
  .slot__kachel{transform:translate3d(0,0,0) rotate(0deg) scale(1.006);
    opacity:1;transition:none}
  .slot__paar[data-seite="a"]{-webkit-mask-image:none;mask-image:none}
  .slot__glow{transition:none;transform:translate3d(calc(var(--gx,42)*1% - 50%),
    calc(var(--gy,54)*1% - 50%),0)}
  .lr-band .slot__zug{animation:none;transform:none}
  .lr-mess-kl{transform:none;transition:none}
  .lr-mess[data-offen="ja"] .lr-mess-kl{
    transform:translateX(calc(var(--seite,-1) * 1.1em))}
  .arc-js .lr-zaehlwerk tbody tr{opacity:1;transform:none;transition:none}
  .lr-anteil-spur i{transform:scaleX(var(--anteil,0));transition:none}
  .lr-kurve-linie{stroke-dashoffset:0;transition:none}
  .lr-kurve-band,.lr-kurve-punkt{opacity:1;transition:none}
  .lr-waage td,.lr-waage th{transform:none;opacity:1;transition:none}
  .arc-js .lr-grenze{opacity:1;transform:none;transition:none}
  .lr-schritte{--pfad:1}
  .lr-schritte::before{transition:none}
  .lr-gegen-spur i{transform:scaleX(1);transition:none}
  .lr-herzschlag i{animation:none;transform:translate3d(38%,0,0);opacity:.9}
}

/* ══ 9 · Die Preiskarte ═══════════════════════════════════════════════════
   Was es kostet, ist die Frage, mit der die Leute kommen — sie darf nicht als
   Tabelle im Fließtext untergehen. Deshalb dasselbe Bauteil wie die
   Knotenkarte der Startseite: eine dunkle Tafel, die in der Satzbreite
   beginnt und sich beim Hereinrollen nach links und rechts über das ganze
   Fenster weitet. Erst in der Breite ist Platz für die Zahlen — sie stehen
   nicht „auch noch" da, sie sind der Grund für die Bewegung.

   Die Aufweitung läuft über clip-path, nicht über die Breite: eine Breite am
   laufenden Bild kostet je Bild einen Layoutlauf und reißt den Textfluss mit.

   Geschrieben werden nur --pr-ein (Auftritt 0…1) und --pr-lauf (Lage im
   Fenster, -1…1) — dieselben zwei Zahlen wie auf der Startseite, hier aus
   leistung.js. Ohne Skript und bei prefers-reduced-motion steht die Tafel
   offen.

   Jede der drei Seiten hat ihre eigene Verknüpfung zwischen den Zahlen. Die
   Preise sind die Knoten, die Adern dazwischen sagen, was die Leistung ist:
     kette  (Prozessautomatisierung) — ein Zug mit Takt, Angabe an Angabe
     netz   (KI-Systeme)             — ein Geflecht, jede Zahl hängt an jeder
     umlauf (Website-Betreuung)      — ein geschlossener Kreis ohne Ende
   Die Adern stehen als Pfade im Markup, nicht im Stilblatt: sie gehören zur
   Anordnung der Seite, so wie die Lage der Knoten.
   ══════════════════════════════════════════════════════════════════════════ */
.lr-pkb{--pr-ein:1;--pr-lauf:0;width:100%;margin:0;position:relative;
  padding:clamp(34px,6vh,80px) 0}
.lr-pk{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(600px,88vh,960px);
  display:grid;place-items:center;
  padding:clamp(72px,11vh,140px) var(--rand);
  color:var(--on-night);background:var(--n0);
  /* Prozente im clip-path zählen gegen die eigene Kastenbreite — die Rechnung
     kommt ohne vw aus, die Bildlaufleiste kann sie nicht verschieben. Bei 0
     ist der sichtbare Streifen genau die Satzbreite. */
  --eng:calc((1 - var(--pr-ein,1)) * max(0px,(100% - var(--spalte)) / 2));
  clip-path:inset(0 var(--eng) 0 var(--eng)
    round calc((1 - var(--pr-ein,1)) * clamp(10px,1.2vw,18px)))}
.lr-pk > .arc-psterne{z-index:0;opacity:calc(.72 + var(--pr-ein,1) * .28)}
.lr-pk > .arc-psterne[data-tief="ja"]{opacity:calc(.46 + var(--pr-ein,1) * .44);
  transform:translate3d(0,calc(var(--pr-lauf,0) * -34px),0)}
/* Der Rand bleibt dunkel: außen ein weicher Abfall, damit die Knoten an den
   Seiten nicht an einer Kante kleben. */
.lr-pk-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 42%,rgba(7,10,20,.84) 100%)}

.lr-pk-mitte{position:relative;z-index:3;max-width:min(31rem,44vw);text-align:center;
  display:grid;gap:clamp(13px,2vh,20px);justify-items:center;
  opacity:clamp(0,calc((var(--pr-ein,1) - .06) * 5),1);
  transform:translate3d(0,calc((1 - var(--pr-ein,1)) * 18px),0)}
.lr-pk-marke{margin:0;font:400 var(--t-mark)/1 var(--f-m);letter-spacing:.18em;
  text-transform:uppercase;color:var(--nadel)}
.lr-pk-h2{margin:0;font:300 var(--t-h2)/1.08 var(--f-b);letter-spacing:-.03em;
  color:var(--chrome-hi);text-wrap:balance}
.lr-pk-lead{margin:0;max-width:31rem;font:400 var(--t-body)/1.6 var(--f-b);
  color:var(--on-night-mute);text-wrap:pretty}
.lr-pk-fuss{margin:0;font:400 .74rem/1.5 var(--f-m);letter-spacing:.1em;
  color:var(--kalt);opacity:calc(var(--pr-ein,1) * .9)}
.lr-pk-fuss a{color:var(--nadel-hell)}

/* ══ Die drei Verknüpfungen ═══════════════════════════════════════════════
   Jede Seite zeigt die Technik, die hinter ihrer Leistung steht — und zwar
   als Struktur, nicht als Zierlinie. Alle drei sind aus denselben Bauteilen
   gebaut (Linie, Punkt, Puls), aber sie sehen einander nicht ähnlich, weil
   ihre Geometrie und ihr Zeitverhalten verschieden sind:

     netz  · KI-Systeme
       Vier Schichten aus Knoten, dazwischen ein Geflecht mit ungleichen
       Gewichten. Die Titelzeile steht MITTEN im Netz, zwischen den beiden
       verdeckten Schichten. Drei Aktivierungen laufen versetzt von der
       Eingangs- zur Ausgangsschicht — das ist ein Vorwärtsdurchlauf, kein
       Lauflicht.

     takt · Prozessautomatisierung
       Ein Rechtecksignal über die ganze Breite. Es liegt auf der Höhe der
       Angabe, zu der es gehört, und springt zwischen ihnen um. Auf den
       Geraden sitzen Schwellen im festen Abstand, die der Reihe nach
       aufblitzen: der Takt läuft, ob jemand zusieht oder nicht.

     wache · Website-Betreuung
       Ein geschlossener Umlauf durch alle Angaben, dazu drei Ringe und ein
       Radarstrahl, der um die Mitte streicht. Jede Angabe blitzt auf, wenn
       der Strahl sie überstreicht — die Zeitversätze rechnet leistung.js aus
       dem Winkel, in dem sie liegt.

   Gezeichnet wird in leistung.js, in echten Bildpunkten: Kreise dürfen nicht
   verzerren, und die Struktur muss an den Kärtchen hängen, die der Satz
   verschiebt. Alle erzeugten Pfade tragen pathLength="1" — dann rechnet das
   Stilblatt in Anteilen und braucht keine Längen zu kennen. */
.lr-pk-riss{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  pointer-events:none;overflow:visible;
  opacity:clamp(0,calc((var(--pr-ein,1) - .22) * 2.6),1)}
.lr-pk-riss path{fill:none;vector-effect:non-scaling-stroke}
/* Die Grundstruktur zeichnet sich beim Aufgehen der Tafel. */
/* --staerke gibt es, weil ein trainiertes Netz keine gleich starken Kanten
   hat: Gewicht heißt Deckung UND Strichbreite. */
.pk-linie{stroke:#22304A;stroke-width:var(--staerke,1);opacity:var(--gewicht,.8);
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0,(var(--pr-ein,1) - .3) * 2.2,1))}
.pk-ring{stroke:#1F2E48;stroke-width:1;opacity:.6}
.pk-punkt{fill:#2C3E5D;stroke:none}
.pk-punkt[data-hell]{fill:var(--kalt)}
/* Die Spur: die Linie, auf der ein Puls läuft. Sie ist heller als das
   Geflecht — ein heller Puls auf einer fast schwarzen Linie sieht aus wie ein
   Fleck, der frei im Feld schwebt, und genau so wirkte es vorher. */
.pk-spur{stroke:#3D5478;stroke-width:1;opacity:.9;
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0,(var(--pr-ein,1) - .34) * 2.4,1))}
/* ── Das lebende Netz ─────────────────────────────────────────────────────
   Nicht drei Ströme über ein sonst totes Geflecht: JEDE Kante trägt ein
   Signal, JEDER Knoten leuchtet auf, wenn es ankommt. Die Verzögerung steht
   am Element und wächst mit der Schicht — dadurch läuft eine Welle von der
   Eingangs- zur Ausgangsschicht, ein Vorwärtsdurchlauf und kein Blinken.
   Alles über dieselbe Dash-Bewegung wie die übrigen Pulse. */
.pk-fluss{stroke:var(--nadel-hell);stroke-width:1.3;stroke-linecap:round;
  stroke-dasharray:.08 1;
  animation:pk-lauf var(--dauer,2.6s) linear infinite var(--vz,0s);
  opacity:clamp(0,calc((var(--pr-ein,1) - .46) * 3),.85)}
.pk-knoten{fill:#2C3E5D;
  animation:pk-knoten var(--dauer,2.6s) ease-out infinite var(--vz,0s)}
@keyframes pk-knoten{
  0%{fill:var(--nadel-hell);r:5}
  16%{fill:#3D5478;r:3}
  100%{fill:#2C3E5D;r:3}}

/* Der Puls. Dash und Dauer stehen am Pfad, weil sie zur Technik gehören:
   der Vorwärtsdurchlauf ist kurz und schnell, der Takt lang und gleichmäßig,
   der Umlauf langsam. */
.pk-puls{stroke:var(--nadel-hell);stroke-width:1.7;stroke-linecap:round;
  stroke-dasharray:var(--dash,.06) 1;
  animation:pk-lauf var(--dauer,4s) linear infinite var(--vz,0s);
  opacity:clamp(0,calc((var(--pr-ein,1) - .48) * 3),1)}
@keyframes pk-lauf{from{stroke-dashoffset:var(--dash,.06)}to{stroke-dashoffset:-1}}
/* Die Schwellen des Takts: sie blitzen der Reihe nach auf. Kein Verlauf,
   sondern ein Schaltvorgang — deshalb steps(). */
.pk-schwelle{stroke:#2B3D5B;stroke-width:1;opacity:.62;
  animation:pk-schwelle var(--dauer,2.6s) steps(1,end) infinite var(--vz,0s)}
@keyframes pk-schwelle{0%,8%{stroke:var(--nadel-hell);opacity:1}
  9%,100%{stroke:#2B3D5B;opacity:.62}}
/* Die Marke einer überstrichenen Angabe: sie leuchtet auf, wenn der Strahl
   vorbeikommt, und verglüht. */
.pk-marke{stroke:var(--kalt);stroke-width:1;opacity:.4;
  animation:pk-marke 14s linear infinite var(--vz,0s)}
@keyframes pk-marke{0%{stroke:var(--nadel-hell);stroke-width:2.4;opacity:1}
  9%{stroke:var(--kalt);stroke-width:1;opacity:.4}
  100%{stroke:var(--kalt);stroke-width:1;opacity:.4}}
/* Der Radarstrahl liegt UNTER der Struktur und ist keine Linie, sondern eine
   Fläche: ein Kegel, der um die Mitte streicht. Als conic-gradient, nicht im
   SVG — dort müsste er je Bild neu gezeichnet werden. */
.lr-pk-strahl{position:absolute;z-index:1;left:50%;top:50%;
  width:min(168%,1900px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  pointer-events:none;
  opacity:calc(clamp(0,(var(--pr-ein,1) - .45) * 3,1) * .42);
  filter:blur(9px);
  /* Weich auslaufender Kegel: eine harte Kante sieht aus wie ein liegen
     gebliebenes Dreieck, nicht wie ein Strahl. */
  background:conic-gradient(from 0deg,
    color-mix(in oklab,var(--nadel) 34%,transparent) 0deg,
    color-mix(in oklab,var(--nadel) 20%,transparent) 10deg,
    color-mix(in oklab,var(--nadel) 9%,transparent) 24deg,
    color-mix(in oklab,var(--nadel) 3%,transparent) 44deg,
    transparent 64deg,transparent 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 10%,#000 38%,#000 74%,transparent 100%);
  mask:radial-gradient(closest-side,transparent 10%,#000 38%,#000 74%,transparent 100%);
  animation:pk-strahl 14s linear infinite}
@keyframes pk-strahl{to{rotate:360deg}}

/* Die Titelzeile steht mitten in der Struktur — sie braucht einen eigenen
   Grund, sonst laufen Linien durch die Buchstaben. Kein Kasten: ein weicher
   Fleck, der nur dort dunkel ist, wo Schrift steht. */
.lr-pk-mitte::before{content:"";position:absolute;z-index:-1;
  inset:-14% -22%;pointer-events:none;
  background:radial-gradient(58% 54% at 50% 50%,
    rgba(7,10,20,.92) 0 42%,rgba(7,10,20,.6) 68%,transparent 100%)}

.lr-pk-punkte{position:absolute;inset:clamp(56px,7vh,96px) 0;z-index:4;
  margin:0;padding:0;list-style:none;pointer-events:none}
.lr-pk-punkt{position:absolute;left:var(--x);top:var(--y);
  width:clamp(10rem,16vw,15.5rem);pointer-events:auto;
  display:grid;gap:.66em;justify-items:start;
  opacity:clamp(0,calc((var(--pr-ein,1) - var(--s,.3)) * 5),1);
  transform:translate3d(
    calc(-50% + var(--dx,0px) * (1 - clamp(0,(var(--pr-ein,1) - var(--s,.3)) * 3,1))),
    calc(-50% + var(--dy,0px) * (1 - clamp(0,(var(--pr-ein,1) - var(--s,.3)) * 3,1))
         + var(--pr-lauf,0) * var(--tiefe,0) * 1px),
    0)}
.lr-pk-punkt[data-seite="rechts"]{text-align:right;justify-items:end}
/* Ein Knoten am unteren Rand hängt an seiner UNTERKANTE, nicht an seiner
   Oberkante. Sonst rechnet --y die Oberkante auf 88 bis 93 Prozent der Tafel,
   und alles, was darunter steht — Bild, Zeile, Betrag und der Beisatz, der beim
   Zeigen aufklappt — läuft aus der Tafel heraus. Die trägt overflow:hidden für
   den Strahl und den Maskenschnitt, also war die untere Hälfte des Knotens
   einfach abgeschnitten; nachgemessen blieben in einer 629 px hohen Tafel neun
   Pixel Luft, in einem flacheren Fenster keine.

   Von unten gerechnet kann das nicht passieren: die Standlinie bleibt, wo sie
   ist, und der Knoten wächst nach oben. Der Riss dahinter ist ein erzeugtes
   Schichtnetz und hängt nicht an den Knotenlagen — er verschiebt sich nicht
   mit. Trägt ein Knoten data-anker="unten", ist --y seine Unterkante. */
.lr-pk-punkt[data-anker="unten"]{top:auto;bottom:calc(100% - var(--y))}
.lr-pk-punkt:hover,.lr-pk-punkt:focus-within{z-index:6}
/* Das Sternbild ist eng, und der Beisatz verdreifacht die Höhe eines Knotens,
   sobald man ihn anfährt. Bei zwei Knoten in derselben Spalte reicht der Platz
   dann nicht — nachgerechnet an einer Tafel von 1400 × 704: der obere Knoten
   offen endet bei 531, der untere geschlossen beginnt bei 510. Jede Standlinie,
   die beide trennt, liegt außerhalb der Tafel.

   Also nicht die Lagen verschieben, sondern den Konflikt sichtbar auflösen: Der
   offene Knoten liegt ohnehin oben (z-index 6) und legt jetzt eine eigene dunkle
   Fläche unter sich. Damit überdeckt er seinen Nachbarn, statt mit ihm zu
   verschmelzen — dieselbe Regel, nach der auf der Websites-Seite das offene
   Bewertungsblatt über seinen Nachbarfeldern liegt. Fährt der Zeiger weg, ist
   der Nachbar wieder da.

   Nur in der Sternbild-Fassung: gestapelt stehen die Knoten static, und eine
   absolut gesetzte Fläche würde aus ihnen herauslaufen. */
@media (min-width:1024px){
  .lr-pk-punkt::before{content:"";position:absolute;z-index:-1;
    inset:-14px -16px;border-radius:6px;pointer-events:none;opacity:0;
    background:radial-gradient(100% 100% at 50% 50%,
      rgba(7,10,20,.96) 0 64%,rgba(7,10,20,.74) 100%);
    transition:opacity .28s var(--ease)}
  .lr-pk-punkt:hover::before,
  .lr-pk-punkt:focus-within::before{opacity:1}
}

.lr-pk-bild{position:relative;display:block;overflow:hidden;
  width:clamp(64px,5.6vw,88px);aspect-ratio:4/5;border-radius:3px;
  border:1px solid var(--linie);background:#0E1524;
  background-image:var(--bild,none);background-size:118% auto;background-position:50% 50%;
  filter:brightness(.72) saturate(.58) contrast(1.04);
  clip-path:inset(0 0 calc(100% - clamp(0%,(var(--pr-ein,1) - var(--s,.3)) * 340%,100%)) 0);
  box-shadow:0 22px 44px -26px #000;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),
    border-color .5s var(--ease),filter .55s var(--ease),background-size .7s var(--ease)}
.lr-pk-punkt:hover .lr-pk-bild,.lr-pk-punkt:focus-within .lr-pk-bild{
  transform:translateY(-8px) scale(1.06);background-size:cover;
  filter:brightness(1.04) saturate(1) contrast(1);
  border-color:color-mix(in oklab,var(--nadel) 46%,var(--linie));
  box-shadow:0 34px 60px -28px #000}

/* Der Knoten: der Posten als Zeile, die Zahl darunter als das, was zählt.
   Der Beisatz klappt beim Zeigen auf — er liegt immer im Dokument, verborgen
   ist er nur für das Auge. */
.lr-pk-satz{display:grid;gap:.32em;max-width:15.5rem}
.lr-pk-punkt[data-seite="rechts"] .lr-pk-satz{justify-items:end}
.lr-pk-satz b{font:500 .95rem/1.3 var(--f-b);letter-spacing:-.012em;color:var(--chrome-hi)}
.lr-pk-satz i{font-style:normal;font-family:var(--f-m);font-variant-numeric:tabular-nums;
  white-space:nowrap;
  font-size:clamp(1.05rem,.86rem + .5vw,1.35rem);line-height:1.15;letter-spacing:-.01em;
  color:var(--nadel-hell)}
/* Die Hauptzahl darf groß sein, aber sie muss in EINER Zeile stehen: ‚ab
   1.500‘ mit dem Eurozeichen darunter ist keine Zahl mehr, sondern ein
   Umbruch. Der Grad ist deshalb an die Knotenbreite gerechnet, nicht ans
   Fenster. */
.lr-pk-punkt[data-haupt="ja"] .lr-pk-satz i{
  font-size:clamp(1.45rem,1rem + 1.1vw,2.1rem)}
.lr-pk-punkt[data-offen="ja"] .lr-pk-satz i{color:var(--on-night-mute);
  font-size:clamp(.98rem,.84rem + .34vw,1.2rem)}
.lr-pk-satz > span{display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;
  transition:grid-template-rows .5s var(--ease),opacity .35s var(--ease)}
.lr-pk-satz > span > span{min-height:0;font:400 .82rem/1.5 var(--f-b);
  color:var(--on-night-mute)}
.lr-pk-punkt:hover .lr-pk-satz > span,
.lr-pk-punkt:focus-within .lr-pk-satz > span{grid-template-rows:1fr;opacity:1}

/* Die Gruppen ordnen die Knoten, sie führen sie nicht an: Beschriftung in der
   Tafel, keine Überschrift über einer Liste. */
.lr-pk-gruppe{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;
  margin:0;font:400 .7rem/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;
  color:var(--kalt);white-space:nowrap;
  opacity:clamp(0,calc((var(--pr-ein,1) - .5) * 3),.85)}
.lr-pk-gruppe::before{content:"";width:clamp(24px,4vw,64px);height:1px;
  background:currentColor;opacity:.5}
.lr-pk-gruppe[data-lage="links"]{left:var(--rand);top:clamp(40px,7vh,72px)}
.lr-pk-gruppe[data-lage="rechts"]{right:var(--rand);bottom:clamp(40px,7vh,72px);
  flex-direction:row-reverse}

/* Schmal: keine Karte, kein Schnitt — eine Liste aus Zahl und Satz. Die
   Aufweitung erzählt auf 400 px Breite nichts, sie kostet nur Höhe. Die
   Schwelle liegt tiefer als bei der Knotenkarte der Startseite (1279 px): die
   Preiskarte trägt drei bis fünf Knoten, nicht sechs — dazwischen bleibt auch
   bei 1100 px Platz. */
@media (max-width:1023px){
  .lr-pkb{padding:0}
  .lr-pk{clip-path:none;min-height:0;place-items:stretch;display:block;
    padding:clamp(48px,8vh,80px) var(--rand)}
  .lr-pk-riss,.lr-pk-strahl,.lr-pk-vignette{display:none}
  .lr-pk-mitte::before{display:none}
  .lr-pk-mitte{max-width:none;text-align:left;justify-items:start;
    margin-bottom:clamp(30px,5vh,52px);transform:none;opacity:1}
  .lr-pk-gruppe{position:static;margin:clamp(24px,4vh,38px) 0 14px;opacity:.85}
  .lr-pk-gruppe[data-lage="rechts"]{flex-direction:row}
  .lr-pk-punkte{position:static;inset:auto;display:grid;gap:clamp(18px,3vh,28px)}
  .lr-pk-punkt{position:static;width:auto;transform:none;opacity:1;
    grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px}
  .lr-pk-punkt[data-seite="rechts"]{text-align:left;justify-items:start}
  .lr-pk-punkt[data-seite="rechts"] .lr-pk-satz{justify-items:start}
  .lr-pk-satz{max-width:none}
  .lr-pk-bild{clip-path:none;filter:brightness(.9) saturate(.8)}
  .lr-pk-satz > span{grid-template-rows:1fr;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .lr-pk{clip-path:none}
  .lr-pk-mitte,.lr-pk-punkt,.lr-pk > .arc-psterne{transform:none}
  .lr-pk-bild{clip-path:none}
  .pk-puls,.pk-schwelle,.pk-marke,.lr-pk-strahl,
  .pk-fluss,.pk-knoten{animation:none}
  .pk-puls,.pk-fluss{opacity:0}
  .lr-pk-satz > span{grid-template-rows:1fr;opacity:1}
}

/* ══ 10 · Arbeitsweise und Bau-Protokoll ══════════════════════════════════
   Zwei ruhige Seiten. Kein neuer Effekt, nur fünf aus der Bibliothek — und
   zwei Bausteine, die es vorher nicht gab: die drei Sätze der Haltung und das
   Verzeichnis mit seiner Zeitachse.
   ══════════════════════════════════════════════════════════════════════════ */

/* Die Schrittüberschriften sind h3 (die Kette muss lückenlos sein), sehen aber
   aus wie die fette Zeile, für die die Schrittliste gebaut wurde. Ein
   Austausch des Vierschritts ist damit ein Wort je Zeile und sonst nichts. */
.lr-schritte h3{margin:0 0 4px;font-family:var(--f-b);font-size:1rem;font-weight:500;
  letter-spacing:-.01em;color:var(--on-dawn)}

/* Die drei Sätze: die fette Zeile IST der Satz, die Begründung steht darunter.
   Sie werden nacheinander aufgedeckt, 60 ms versetzt — ohne Skript stehen sie
   einfach da. */
.lr-saetze{list-style:none;margin:clamp(16px,2.4vh,28px) 0 0;padding:0;
  display:grid;gap:clamp(18px,2.6vh,30px)}
.lr-saetze li{display:grid;gap:.34em}
.lr-saetze b{font-weight:500;color:var(--on-dawn)}
.lr-saetze span{color:var(--on-dawn-mute)}
.arc-js .lr-saetze li{opacity:0;transform:translateY(10px);
  transition:opacity 440ms var(--ease),transform 440ms var(--ease);
  transition-delay:calc(var(--i,0) * 60ms)}
.arc-js .lr-saetze[data-ab="ja"] li{opacity:1;transform:none}
.lr-saetze li:nth-child(2){--i:1}
.lr-saetze li:nth-child(3){--i:2}

/* Die Standzeile. Die drei Zahlen stehen im ausgelieferten HTML — sie sind die
   Wahrheit, auch ohne Skript. Das Skript prüft sie und korrigiert, es ersetzt
   sie nicht. */
.pr-stand{margin:26px 0 0;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.1em;color:var(--on-night-mute)}
.pr-stand b{font-weight:400;color:var(--nadel-hell);font-variant-numeric:tabular-nums}
.pr-stand time{color:var(--on-night)}
/* Vorgebaut und abgeschaltet: erscheint erst mit data-alt="ja". */
.pr-alt{margin:10px 0 0;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.1em;color:var(--chrome)}
.pr-alt[data-alt="nein"]{display:none}

/* Das Verzeichnis. Die Zeitachse zeichnet sich beim Rollen von oben nach
   unten — das ist die Signatur der Seite. Zwei Linien übereinander: die
   blasse steht immer, die im Akzent wächst. */
.pr-achse{position:relative;margin:clamp(24px,4vh,44px) 0 0;
  padding-left:clamp(30px,3.6vw,58px);display:grid;gap:clamp(26px,4.2vh,50px)}
.pr-achse::before,.pr-achse::after{content:"";position:absolute;left:6px;
  top:.7em;bottom:.7em;width:1px}
.pr-achse::before{background:var(--linie-tag)}
.pr-achse::after{background:color-mix(in oklab,var(--acc) 60%,transparent);
  transform:scaleY(var(--achse,0));transform-origin:50% 0}

.pr-eintrag{position:relative}
/* Der Punkt sitzt auf der Achse, auf Höhe der Kopfzeile des Eintrags. */
.pr-eintrag::before{content:"";position:absolute;
  left:calc(-1 * clamp(30px,3.6vw,58px) + 2px);top:.34em;
  width:9px;height:9px;border-radius:50%;
  background:var(--eigen,var(--dawn));border:1px solid var(--acc)}
.pr-kopf{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.13em;text-transform:uppercase}
.pr-kopf time{color:var(--on-dawn-mute)}
.pr-art{color:var(--acc)}
.pr-eintrag h3{margin:0 0 10px;font-size:var(--t-lead);line-height:1.24;
  letter-spacing:-.012em;color:var(--on-dawn);max-width:44ch;text-wrap:pretty}
.pr-eintrag p:not(.pr-kopf){margin:0;max-width:70ch;color:var(--on-dawn-mute)}
.pr-eintrag strong{color:var(--on-dawn);font-weight:500}
/* data-art steuert die Akzentspur und sonst nichts. Beim Durchrollen sieht man
   die Verteilung, ohne eine Zahl zu lesen. Eine Legende gibt es nicht — die
   Farbe erklärt sich über das Wort daneben. */
.pr-eintrag[data-art="befund"],.pr-eintrag[data-art="aenderung"]{--acc:var(--nadel-tag)}
.pr-eintrag[data-art="messung"]{--acc:var(--on-dawn)}
.pr-eintrag[data-art="irrtum"]{--acc:#5B626D}

@media (prefers-reduced-motion:reduce){
  .pr-achse{--achse:1}
  .pr-achse::after{transition:none}
  .arc-js .lr-saetze li{opacity:1;transform:none;transition:none}
}

/* ══ 11 · Abschnitte ohne Bild stehen mittig ═══════════════════════════════
   Ein Abschnitt mit Bild hat eine Ordnung: das Bild auf der einen Seite, der
   Satz auf der anderen. Ein Abschnitt OHNE Bild hat die nicht — dann klebt
   der Satz am linken Rand und rechts steht auf einem breiten Fenster eine
   handbreite Leere. Solche Abschnitte tragen data-mitte="ja" und bekommen
   eine engere, mittig gestellte Spalte.

   Die Spalte wird über die Polsterung des Abschnitts gestellt, nicht über
   margin an den einzelnen Bausteinen: so behalten Aufschrift, Überschrift,
   Absatz, Tabelle und Liste DIESELBE linke Kante. Jeder Baustein für sich
   zentriert hätte fünf verschiedene linke Kanten — das ist schlimmer als die
   Lücke, die es beheben soll.

   Erst ab 1024 px: darunter ist die Spalte ohnehin die Fensterbreite. */
@media (min-width:1024px){
  /* 880 px: breit genug, dass die zweispaltige Tabelle nicht in Dreizeiler
     zerfällt und ein Absatz nach vier statt nach sieben Zeilen umbricht — und
     schmal genug, dass die Spalte auf einem breiten Fenster sichtbar mittig
     steht. Kein ch in der min()-Rechnung: ch löst dort nicht verlässlich auf,
     die Spalte blieb dann auf 1180 px stehen. */
  .arc-lr [data-mitte="ja"]{--satzspalte:880px;
    padding-inline:max(var(--rand),calc((100% - min(var(--spalte),var(--satzspalte))) / 2))}
  /* In der engen Spalte gilt sie als Maß: die eigenen Kappungen der Bausteine
     würden sonst eine zweite, eingezogene linke Kante erzeugen. */
  .arc-lr [data-mitte="ja"] .lr-lauf,
  .arc-lr [data-mitte="ja"] .lr-lead,
  .arc-lr [data-mitte="ja"] .lr-satz,
  .arc-lr [data-mitte="ja"] .arc-h2,
  .arc-lr [data-mitte="ja"] .lr-h3,
  .arc-lr [data-mitte="ja"] .lr-tab,
  .arc-lr [data-mitte="ja"] .lr-preis,
  .arc-lr [data-mitte="ja"] .lr-schritte,
  .arc-lr [data-mitte="ja"] .pr-eintrag p,
  .arc-lr [data-mitte="ja"] .pr-eintrag h3,
  .arc-lr [data-mitte="ja"] .lr-rand{max-width:none}
}

/* Eine offene Angabe, die einen ganzen Absatz lang ist ─────────────────────
   Die Klammern-Mechanik ist auf kurze Werte gebaut („Zahl", „Betrag"): sie ist
   inline-flex und nowrap, damit die Klammern am Wert kleben und nicht in eine
   eigene Zeile fallen. Ein drei Sätze langer Auftragstext kann darin nicht
   umbrechen und läuft aus der Seite heraus. Deshalb eine zweite Fassung für
   lange Angaben: sie bricht wie gewöhnlicher Satz um, die Klammern stehen als
   Zeichen davor und danach. */
.lr-mess[data-lang="ja"]{display:inline;white-space:normal}
.lr-mess[data-lang="ja"] .lr-mess-wert{white-space:normal}
.lr-mess[data-lang="ja"] .lr-mess-kl{position:static;transform:none;transition:none}


/* Dreispaltige Leistungstabelle (System · was es abnimmt · Preis) und die
   Preistabelle mit Unterzeile im Kopf. Beide erben alles von .lr-tab; hier
   stehen nur die Spaltenmaße und die zweite Zeile in der Kopfspalte. */
.lr-tab--drei th[scope="row"]{width:22%;white-space:normal}
.lr-tab--drei td:last-child{width:24%;white-space:normal;font-family:var(--f-m);
  font-size:.92em}
.lr-tab--preis th[scope="row"]{width:60%}
.lr-tab--preis th[scope="row"] span{display:block;margin-top:.3em;
  font-family:var(--f-b);font-weight:400;font-size:.88em;color:var(--on-dawn-mute)}
@media (max-width:719px){
  .lr-tab--drei th[scope="row"],.lr-tab--drei td:last-child,
  .lr-tab--preis th[scope="row"]{width:auto}
}


/* Vierspaltige Stufentabelle der KI-Preise: Stufe · was das System tut ·
   Beispiel · Preis. Der Preis rechts in Mono, das Beispiel schmaler. */
.lr-tab--stufen th[scope="row"]{width:16%;white-space:normal}
.lr-tab--stufen td:nth-child(2){width:24%}
.lr-tab--stufen td:nth-child(3){width:42%;font-size:.94em;color:var(--on-dawn-mute)}
.lr-tab--stufen td:last-child{width:18%;white-space:nowrap;font-family:var(--f-m);font-size:.92em}
@media (max-width:899px){
  .lr-tab--stufen th[scope="row"],.lr-tab--stufen td{width:auto;white-space:normal}
  .lr-tab--stufen td:last-child{white-space:normal}
}



/* ══ Die sieben Fälle ═════════════════════════════════════════════════════
   Statt einer dreispaltigen Tabelle sieben Karten in drei Reihen: 3 · 2 · 2.
   Die Reihen sind keine Willkür — sie gruppieren, was gleich viel kostet:
   die drei Bürofälle, die zwei gebauten Systeme, die zwei Vorstudien. Der
   Preis steht in jeder Karte unten hinter einer Haarlinie, so dass sich die
   Reihen quer lesen lassen, ohne eine Spalte zu brauchen. */
.lr-faelle{list-style:none;margin:30px 0 0;padding:0;
  max-width:min(1100px,100%);display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:1fr}
@media (min-width:620px){.lr-faelle{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .lr-faelle{grid-template-columns:repeat(6,1fr)}
  .lr-faelle>.lr-fall{grid-column:span 3}
  .lr-faelle>.lr-fall:nth-child(-n+3){grid-column:span 2}
}
.lr-faelle>.lr-fall{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;
  gap:10px;padding:clamp(16px,1.8vw,22px);background:var(--papier-hoch);
  border:1px solid var(--linie-tag);
  transition:transform 300ms var(--ease),border-color 300ms var(--ease)}
/* Die Haarlinie am Kopf zieht sich beim Überfahren von links ein — dasselbe
   Zeichen wie in der Sprungleiste, nur waagerecht über die ganze Karte. */
.lr-faelle>.lr-fall::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--acc);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 320ms var(--ease)}
.lr-faelle>.lr-fall:hover{transform:translateY(-3px);border-color:var(--acc)}
.lr-faelle>.lr-fall:hover::before{transform:scaleX(1)}
.lr-fall-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lr-fall-kopf svg{display:block;width:26px;height:26px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--on-dawn-mute);transition:color 300ms var(--ease)}
.lr-faelle>.lr-fall:hover .lr-fall-kopf svg{color:var(--acc)}
.lr-fall-nr{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.16em;
  color:var(--on-dawn-mute);font-variant-numeric:tabular-nums}
.lr-fall-titel{margin:0;font-size:1.06rem;line-height:1.24;font-weight:500;
  color:var(--on-dawn);text-wrap:balance}
.lr-fall-text{margin:0;font-size:.96rem;line-height:1.5;color:var(--on-dawn-mute)}
.lr-fall-text a{color:inherit;text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,currentColor 38%,transparent)}
.lr-fall-text a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.lr-fall-preis{margin:0;padding-top:12px;border-top:1px solid var(--linie-tag);
  font-family:var(--f-m);font-size:.92rem;color:var(--on-dawn);
  font-variant-numeric:tabular-nums}
/* Eintritt: Reihe für Reihe, 60 ms Versatz. Ohne JS stehen die Karten da. */
.arc-js .lr-faelle>.lr-fall{opacity:0;transform:translateY(16px);
  transition:opacity 380ms var(--ease),transform 380ms var(--ease),
             border-color 300ms var(--ease)}
.arc-js .lr-faelle[data-ab="ja"]>.lr-fall{opacity:1;transform:none;
  transition-delay:calc(var(--s,0) * 60ms)}

/* ══ Die Preistreppe ══════════════════════════════════════════════════════
   Vier Stufen, die nach rechts ansteigen: je höher der Kopf, desto größer
   das, was abgegeben wird. Der laufende Betrieb steht nicht in der Treppe —
   er ist keine Stufe, sondern eine Zeile darunter. */
.lr-treppe{margin:34px 0 0;max-width:min(1100px,100%);display:grid;
  gap:clamp(12px,1.6vw,18px);grid-template-columns:1fr}
@media (min-width:760px){
  .lr-treppe{grid-template-columns:repeat(4,1fr);align-items:end}
}
.lr-stufe{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;
  gap:8px;padding:18px clamp(14px,1.4vw,20px) 18px;
  background:var(--papier-hoch);border:1px solid var(--linie-tag);
  border-top:2px solid color-mix(in oklab,var(--acc) calc(34% + var(--s,0) * 22%),var(--linie-tag));
  transition:transform 300ms var(--ease),border-color 300ms var(--ease)}
.lr-stufe:hover{transform:translateY(-3px)}
/* Der Anstieg steht NACH der Kurzschreibweise oben — sonst überschreibt
   deren padding den Treppenschritt. */
@media (min-width:760px){
  .lr-stufe{padding-top:calc(18px + var(--s,0) * 18px)}
}
.lr-stufe-nr{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.16em;
  color:var(--on-dawn-mute);font-variant-numeric:tabular-nums}
.lr-stufe-titel{margin:0;font-size:1.02rem;line-height:1.24;font-weight:500;
  color:var(--on-dawn);text-wrap:balance}
.lr-stufe-sub{margin:0;font-size:.92rem;line-height:1.48;color:var(--on-dawn-mute)}
.lr-stufe-preis{margin:0;padding-top:12px;border-top:1px solid var(--linie-tag);
  font-family:var(--f-m);font-size:.92rem;color:var(--on-dawn);
  font-variant-numeric:tabular-nums}
.lr-stufe-preis small{display:block;margin-top:4px;font-family:var(--f-b);
  font-size:.86rem;color:var(--on-dawn-mute)}
.lr-treppe-fuss{margin:clamp(12px,1.6vw,18px) 0 0;max-width:min(1100px,100%);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 28px;
  align-items:baseline;padding-top:16px;border-top:1px solid var(--linie-tag)}
.lr-treppe-fuss dt{margin:0;color:var(--on-dawn);font-weight:500}
.lr-treppe-fuss dt span{display:block;margin-top:.3em;font-weight:400;
  font-size:.92rem;color:var(--on-dawn-mute)}
.lr-treppe-fuss dd{margin:0;font-family:var(--f-m);font-size:.92rem;
  text-align:right;white-space:nowrap;color:var(--on-dawn);
  font-variant-numeric:tabular-nums}
.arc-js .lr-stufe{opacity:0;transform:translateY(16px);
  transition:opacity 380ms var(--ease),transform 380ms var(--ease)}
.arc-js .lr-treppe[data-ab="ja"] .lr-stufe{opacity:1;transform:none;
  transition-delay:calc(var(--s,0) * 70ms)}

.lr-faelle>.lr-fall:nth-child(1){--s:0}
.lr-faelle>.lr-fall:nth-child(2){--s:1}
.lr-faelle>.lr-fall:nth-child(3){--s:2}
.lr-faelle>.lr-fall:nth-child(4){--s:1}
.lr-faelle>.lr-fall:nth-child(5){--s:2}
.lr-faelle>.lr-fall:nth-child(6){--s:2}
.lr-faelle>.lr-fall:nth-child(7){--s:3}
.lr-stufe:nth-child(1){--s:0}
.lr-stufe:nth-child(2){--s:1}
.lr-stufe:nth-child(3){--s:2}
.lr-stufe:nth-child(4){--s:3}

/* ══ Bahn — was hereinkommt, wohin es geht ════════════════════════════════
   Der Bürobereich hat drei Fälle, und jeder ist im Kern eine Zuordnung:
   links, was ankommt, rechts, wo es landet. Die Zuordnung stand vorher als
   Aufzählung mitten im Satz. Sie steht jetzt daneben — dieselben Wörter,
   nur als Bahn lesbar. Beim Postfach stehen die Paare Zeile für Zeile
   nebeneinander, weil sie dort wirklich paarweise gehören. */
.lr-buero{display:grid;gap:clamp(34px,6vh,64px);margin:26px 0 0}
.lr-fach{display:grid;gap:clamp(18px,2.6vw,38px);grid-template-columns:1fr;
  align-items:start}
@media (min-width:920px){
  .lr-fach{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .lr-fach--kehr > .lr-bahn{order:-1}
}
.lr-fach-text > .lr-h3:first-child{margin-top:0}
.lr-fach-text .lr-lauf:last-child{margin-bottom:0}
.lr-fach-nr{display:block;margin:0 0 10px;font-family:var(--f-m);
  font-size:var(--t-mark);letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc)}
.lr-bahn{background:var(--papier-hoch);border:1px solid var(--linie-tag);
  padding:clamp(16px,1.8vw,22px)}
.lr-bahn-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:0 clamp(10px,1.4vw,18px);margin:0 0 12px;
  font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dawn-mute)}
.lr-bahn-kopf span:last-child{text-align:right}
.lr-bahn-koerper{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:0 clamp(10px,1.4vw,18px);align-items:stretch}
.lr-bahn-liste{list-style:none;margin:0;padding:0;display:grid;
  grid-auto-rows:minmax(0,1fr);gap:8px}
/* Steht links nur ein Glied, soll es nicht auf die ganze Höhe wachsen. */
.lr-bahn-liste:has(.lr-bahn-el:only-child){grid-auto-rows:auto;align-content:center}
.lr-bahn-el{display:flex;align-items:center;padding:9px 11px;
  min-width:0;overflow-wrap:break-word;
  background:var(--dawn-deep);border:1px solid var(--linie-tag);
  font-family:var(--f-m);font-size:.8rem;line-height:1.3;color:var(--on-dawn)}
.lr-bahn-liste--ziel .lr-bahn-el{justify-content:flex-end;text-align:right;
  border-color:color-mix(in oklab,var(--acc) 34%,var(--linie-tag))}
.lr-bahn-pfeil{font-style:normal;font-family:var(--f-m);color:var(--acc);
  align-self:center;justify-self:center}
/* Der Satz nach einem Waagenpaar braucht Luft — die Tabelle endet auf einer
   Haarlinie, und ohne Abstand klebt der Satz daran. */
/* Auf die drei ueberarbeiteten Reiter eingegrenzt: dieselbe Kombination
   (Tabelle, danach ein Absatz) steht auch auf /arbeitsweise und
   /forschungspartner, und die waren nicht Gegenstand des Auftrags. */
.arc-lr--achse .lr-tab + .arc-enth > .lr-lauf:first-child{margin-top:22px}
.lr-bahn-fuss{margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--linie-tag);font-size:.9rem;line-height:1.45;
  color:var(--on-dawn-mute)}
.lr-bahn-fuss strong{color:var(--on-dawn);font-weight:500}
.arc-js .lr-bahn-el{opacity:0;transform:translateY(8px);
  transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.arc-js .lr-bahn[data-ab="ja"] .lr-bahn-el{opacity:1;transform:none;
  transition-delay:calc(var(--s,0) * 55ms)}
.arc-js .lr-bahn-pfeil{opacity:0;transition:opacity 320ms var(--ease) 180ms}
.arc-js .lr-bahn[data-ab="ja"] .lr-bahn-pfeil{opacity:1}
.lr-bahn-el:nth-child(1){--s:0}
.lr-bahn-el:nth-child(2){--s:1}
.lr-bahn-el:nth-child(3){--s:2}
.lr-bahn-el:nth-child(4){--s:3}

@media (prefers-reduced-motion:reduce){
  .lr-faelle>.lr-fall,.lr-faelle>.lr-fall::before,.lr-stufe,.lr-fall-kopf svg{transition:none}
  .arc-js .lr-faelle>.lr-fall,.arc-js .lr-stufe,.arc-js .lr-bahn-el,
  .arc-js .lr-bahn-pfeil{opacity:1;transform:none;transition:none}
  .lr-faelle>.lr-fall:hover,.lr-stufe:hover{transform:none}
}


/* ══ Heller Grund, helle Schrift ══════════════════════════════════════════
   Zwei Klassen stammen aus dem Nachtteil und werden auf hellen Abschnitten
   weiterverwendet: .lr-lead trägt fest --on-night, .arc-anschrift ist eine
   Fußzeilenklasse. Auf data-grund="tag" stand damit hell auf hell — auf
   /ueber-uns war „Arktouros, der Bärenhüter…" bei einem Kontrast von 1,02
   nicht zu lesen, und die Anschrift in Abschnitt 05 lag bei 2,05.

   Der GRUND entscheidet über die Schrift, nicht die Klasse. Diese Regeln
   stehen am Ende der Datei, damit sie jede frühere Farbzuweisung derselben
   Klasse überstimmen, und sie greifen nur dort, wo der Abschnitt sich selbst
   als hell ausweist. */
[data-grund="tag"] .lr-lead{color:var(--on-dawn)}
[data-grund="tag"] .arc-anschrift{color:var(--on-dawn-mute)}
[data-grund="tag"] .arc-anschrift strong{color:var(--on-dawn)}
[data-grund="tag"] .arc-anschrift a{color:var(--on-dawn-mute)}
[data-grund="tag"] .arc-anschrift a:hover{color:var(--acc)}
[data-grund="tag"] .arc-antwortzeit{color:var(--on-dawn-mute)}



/* ══ Anschauliche Fassung ═════════════════════════════════════════════════
   Lange Textstrecken werden nicht gelesen, weil sie viel AUSSEHEN. Diese
   Bauteile nehmen kein Wort weg — sie geben jedem Satz eine Rubrik, eine
   Zeile oder eine Karte, und damit eine Stelle, an der das Auge anhält.

   Regel für alle: unter 700 px fällt jede Spalte in eine, jede Marke wandert
   über ihren Satz, und kein Bauteil erzeugt Querlauf. */

/* ── Rubrik · Marke links in Monoschrift, Satz rechts ───────────────────── */
.lr-rubrik{margin:20px 0 0;max-width:84ch;display:grid;
  grid-template-columns:minmax(0,11.5em) minmax(0,1fr);gap:4px 30px;
  padding-top:15px;border-top:1px solid var(--linie-tag)}
.lr-rubrik-marke{position:relative;font-family:var(--f-m);font-weight:400;
  font-size:var(--t-mark);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dawn-mute);text-align:right;line-height:1.5;
  transition:color 320ms var(--ease)}
.lr-rubrik-marke::after{content:"";position:absolute;top:.5em;right:-16px;
  width:5px;height:5px;background:var(--linie-tag);
  transition:background 320ms var(--ease),transform 320ms var(--ease)}
.lr-rubrik>p{margin:0;color:var(--on-dawn-mute);max-width:62ch}
.lr-rubrik>p strong{color:var(--on-dawn);font-weight:500}
.lr-rubrik>p em{font-style:italic;color:var(--on-dawn)}
.lr-rubrik>p a{color:inherit;text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,currentColor 38%,transparent)}
.lr-rubrik>p a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.lr-rubrik:hover .lr-rubrik-marke{color:var(--acc)}
.lr-rubrik:hover .lr-rubrik-marke::after{background:var(--acc);transform:scale(1.6)}
@media (max-width:700px){
  .lr-rubrik{grid-template-columns:minmax(0,1fr);gap:7px;padding-top:13px}
  .lr-rubrik-marke{text-align:left}
  .lr-rubrik-marke::after{top:.52em;right:auto;left:-14px}
}
@media (max-width:420px){.lr-rubrik-marke::after{display:none}}
/* Mittige Fassung: Marke über dem Satz, Satz zentriert. */
.lr-fall--mitte{text-align:center}
.lr-fall--mitte .lr-h3,.lr-fall--mitte .lr-lauf{margin-inline:auto}
.lr-fall--mitte .lr-rubrik{grid-template-columns:minmax(0,1fr);gap:8px;
  max-width:64ch;margin-inline:auto;text-align:center}
.lr-fall--mitte .lr-rubrik-marke{text-align:center}
.lr-fall--mitte .lr-rubrik-marke::after{position:static;display:block;
  margin:7px auto 0;transform:rotate(45deg)}
.lr-fall--mitte .lr-rubrik:hover .lr-rubrik-marke::after{transform:rotate(45deg) scale(1.5)}
.lr-fall--mitte .lr-rubrik>p{margin-inline:auto}
.lr-fall--mitte .lr-grenze{text-align:left}

/* ── Zählbogen · sieben Zeilen, Ordnungszahl als einziges Zeichen ───────── */
.lr-zaehl-block{margin:30px 0 0}
.lr-zaehl-titel{margin:0;font-size:var(--t-lead);line-height:1.35;color:var(--on-dawn)}
.lr-zaehl-legende{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em;
  margin:10px 0 0;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dawn-mute)}
.lr-zaehl-legende i{font-style:normal;color:var(--acc)}
.lr-zaehl{counter-reset:z;list-style:none;margin:16px 0 0;padding:0;
  display:grid;gap:1px;grid-template-columns:minmax(0,1fr);
  background:var(--linie-tag);border:1px solid var(--linie-tag)}
@media (min-width:840px){.lr-zaehl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lr-zaehl>li:last-child{grid-column:1/-1}}
.lr-zaehl>li{counter-increment:z;position:relative;background:var(--papier-hoch);
  padding:17px 20px 16px 62px;
  transition:background 320ms var(--ease),opacity 420ms var(--ease),transform 420ms var(--ease)}
.lr-zaehl>li::before{content:counter(z,decimal-leading-zero);position:absolute;
  left:20px;top:17px;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.14em;color:var(--on-dawn-mute);font-variant-numeric:tabular-nums;
  transition:color 320ms var(--ease)}
.lr-zaehl>li:hover{background:#FBFAF5}
.lr-zaehl>li:hover::before{color:var(--acc)}
.lr-zaehl-was{display:block;color:var(--on-dawn);font-weight:500;line-height:1.3}
.lr-zaehl-quelle{display:block;position:relative;margin-top:6px;padding-left:16px;
  font-size:.93rem;line-height:1.45;color:var(--on-dawn-mute)}
.lr-zaehl-quelle::before{content:"\21B3";position:absolute;left:0;top:-.05em;
  color:var(--acc);opacity:.6}
@media (max-width:520px){.lr-zaehl>li{padding:15px 16px 15px 52px}
  .lr-zaehl>li::before{left:15px;top:16px}}
.arc-js .lr-zaehl>li{opacity:0;transform:translateY(12px)}
.arc-js .lr-zaehl[data-ab="ja"]>li{opacity:1;transform:none;
  transition-delay:calc(var(--r,0) * 70ms)}
.lr-zaehl>li:nth-child(1){--r:0}.lr-zaehl>li:nth-child(2){--r:1}
.lr-zaehl>li:nth-child(3){--r:2}.lr-zaehl>li:nth-child(4){--r:3}
.lr-zaehl>li:nth-child(5){--r:4}.lr-zaehl>li:nth-child(6){--r:5}
.lr-zaehl>li:nth-child(7){--r:6}

/* ── Gegenpaar · das Waagenpaar als zwei Kartenspalten ──────────────────── */
.lr-waage--karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 20px;max-width:none;width:100%;margin:26px 0 0}
.lr-waage--karten caption{grid-column:1/-1}
.lr-waage--karten thead,.lr-waage--karten tbody,.lr-waage--karten tr{display:contents}
.lr-waage--karten th,.lr-waage--karten td{display:block;border:0;padding:0}
.lr-waage--karten thead th{font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  color:var(--on-dawn-mute);padding-bottom:9px;border-bottom:1px solid var(--linie-tag)}
.lr-waage--karten thead th:last-child{color:var(--acc)}
.lr-waage--karten tbody td{position:relative;padding:15px 18px 15px 38px;
  background:var(--papier-hoch);border:1px solid var(--linie-tag);
  color:var(--on-dawn-mute);line-height:1.45;
  transform:none;opacity:1;
  transition:border-color 300ms var(--ease),background 300ms var(--ease),color 300ms var(--ease)}
.lr-waage--karten tbody td::before{content:"";position:absolute;left:17px;top:1.3em;
  width:8px;height:8px;border-radius:50%;
  border:1px solid color-mix(in oklab,var(--on-dawn) 40%,transparent);
  transition:background 300ms var(--ease),border-color 300ms var(--ease)}
.lr-waage--karten tbody td:last-child::before{background:var(--acc);border-color:var(--acc)}
.lr-waage--karten tbody td:hover{border-color:var(--acc);color:var(--on-dawn)}
.lr-waage--karten[data-seite] tbody td,.lr-waage--karten[data-seite] thead th{
  transform:none;opacity:1}
@media (max-width:640px){
  .lr-waage--karten{grid-template-columns:minmax(0,1fr);gap:9px}
  .lr-waage--karten thead th{padding-top:14px}
  .lr-waage--karten thead th:first-child{padding-top:0}
}

/* ── Zitat · der Satz, mit dem der Kunde anruft ─────────────────────────── */
.lr-zitat{margin:30px auto;max-width:34ch;text-align:center;position:relative;
  padding:0 0 0 0;font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem);line-height:1.24;
  color:var(--on-dawn);font-weight:500;text-wrap:balance}
/* Der zitierte Satz steht in einem <p>, nicht in einem <cite>: <cite>
   bezeichnet den TITEL eines Werks, nicht das Zitat selbst. Die Regel
   fuer cite bleibt stehen, falls die Klasse anderswo so benutzt wird. */
.lr-zitat cite,.lr-zitat p{font-style:normal;display:block;margin:0}
.lr-zitat-fuss{display:block;margin:14px auto 0;max-width:44ch;font-size:.96rem;
  font-weight:400;line-height:1.5;color:var(--on-dawn-mute)}
.lr-zitat::before{content:"";display:block;width:26px;height:1px;margin:0 auto 20px;
  background:var(--acc)}

/* ── Der Satz in der Mitte ──────────────────────────────────────────────── */
.lr-satz--mitte{max-width:54ch;margin:44px auto;padding:28px 0 0;
  border-left:0;border-top:1px solid var(--linie-tag);text-align:center;position:relative}
.lr-satz--mitte::before{content:"";position:absolute;top:-4px;left:50%;
  width:7px;height:7px;background:var(--acc);transform:translateX(-50%) rotate(45deg)}

/* ── Rechenschieber, mittig, mit dem Satz darin statt darüber ───────────── */
.lr-rechner--mitte{margin:34px auto 0;max-width:76ch;text-align:center;
  padding:clamp(20px,3vw,32px)}
.lr-rechner-vor{margin:0 auto 24px;max-width:60ch;color:var(--on-dawn-mute);
  padding-bottom:22px;border-bottom:1px solid var(--linie-tag)}
.lr-rechner-vor strong{color:var(--on-dawn);font-weight:500}
.lr-rechner--mitte .lr-rechner-fuss{margin:14px auto 0;max-width:58ch}
.lr-rechner--mitte .lr-rechner-regler{max-width:40ch;margin:26px auto 0;
  padding-top:24px;border-top:1px solid var(--linie-tag);text-align:left}
@media (max-width:520px){
  .lr-rechner--mitte{padding:18px 15px}
  .lr-rechner-vor{margin-bottom:18px;padding-bottom:18px}
}


/* ── Befund · der eine Satz, der die Messung zusammenfasst ──────────────── */
.lr-befund{margin:36px auto;max-width:44ch;text-align:center}
.lr-befund-marke{display:block;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
.lr-befund-satz{margin:0;font-size:clamp(1.24rem,1.02rem + .95vw,1.72rem);line-height:1.24;
  font-weight:500;color:var(--on-dawn);text-wrap:balance}
.lr-befund-fuss{margin:14px auto 0;max-width:52ch;font-size:1rem;line-height:1.5;
  color:var(--on-dawn-mute)}

/* ── Belegkarten · drei fremde Antworten, jede mit ihrer Zahl ───────────── */
.lr-beleg{list-style:none;margin:22px 0 0;padding:0;display:grid;
  gap:clamp(10px,1.4vw,16px);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.lr-beleg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lr-beleg>li{position:relative;padding:18px 18px 17px;background:var(--papier-hoch);
  border:1px solid var(--linie-tag);text-align:left;
  transition:border-color 300ms var(--ease),background 300ms var(--ease)}
.lr-beleg>li:hover{border-color:var(--acc)}
.lr-beleg-wer{display:block;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dawn-mute);
  transition:color 300ms var(--ease)}
.lr-beleg>li:hover .lr-beleg-wer{color:var(--acc)}
.lr-beleg-zahl{display:block;margin:10px 0 12px;font-family:var(--f-m);line-height:1;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);color:var(--on-dawn);
  font-variant-numeric:tabular-nums}
.lr-beleg-satz{display:block;font-size:.95rem;line-height:1.5;color:var(--on-dawn-mute)}

/* ── Vorher / Nachher · zwei Zahlen, ein Pfeil ──────────────────────────── */
.lr-vn{margin:30px 0 0;max-width:none}
.lr-vn-paar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(12px,2vw,26px);max-width:52ch;margin:0 auto}
.lr-vn-feld{text-align:center;padding:20px 14px;background:var(--papier-hoch);
  border:1px solid var(--linie-tag);
  transition:border-color 300ms var(--ease)}
.lr-vn-feld:hover{border-color:var(--acc)}
.lr-vn-marke{display:block;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-dawn-mute)}
.lr-vn-zahl{display:block;margin-top:8px;font-family:var(--f-m);line-height:1;
  font-size:clamp(2.2rem,1.5rem + 2.4vw,3.2rem);color:var(--on-dawn);
  font-variant-numeric:tabular-nums}
.lr-vn-feld:last-of-type .lr-vn-zahl{color:var(--acc)}
.lr-vn-pfeil{font-family:var(--f-m);color:var(--acc);font-size:1.2rem}
.lr-vn figcaption{margin:16px auto 0;max-width:56ch;text-align:center;
  font-size:.96rem;line-height:1.5;color:var(--on-dawn-mute)}
@media (max-width:520px){
  .lr-vn-paar{grid-template-columns:minmax(0,1fr);gap:8px}
  .lr-vn-pfeil{transform:rotate(90deg);text-align:center}
}

/* ── Marktpreise · Gruppen von Positionen, Betrag in Monoschrift ────────── */
.lr-markt{margin:24px 0 0;display:grid;gap:22px;text-align:left}
.lr-markt-gruppe{display:grid;gap:10px}
.lr-markt-kopf{margin:0;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dawn-mute);
  padding-bottom:9px;border-bottom:1px solid var(--linie-tag)}
.lr-markt-liste{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(8px,1.2vw,12px);grid-template-columns:minmax(0,1fr)}
@media (min-width:620px){.lr-markt-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.lr-markt-liste{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lr-markt-liste>li{padding:13px 15px;background:var(--papier-hoch);
  border:1px solid var(--linie-tag);
  transition:border-color 300ms var(--ease),transform 300ms var(--ease)}
.lr-markt-liste>li:hover{border-color:var(--acc)}
.lr-markt-liste b{display:block;font-weight:500;color:var(--on-dawn);line-height:1.3}
.lr-markt-liste span{display:block;margin-top:5px;font-family:var(--f-m);
  font-size:.95rem;color:var(--on-dawn-mute);font-variant-numeric:tabular-nums}
.lr-markt-liste>li:hover span{color:var(--acc)}

/* ── Zwei Beobachtungen · Ordnungszahl als einziges Zeichen ─────────────── */
.lr-auffall{counter-reset:a;list-style:none;margin:24px 0 0;padding:0;display:grid;
  gap:clamp(10px,1.4vw,16px);grid-template-columns:minmax(0,1fr);text-align:left}
@media (min-width:760px){.lr-auffall{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lr-auffall>li{counter-increment:a;position:relative;padding:20px 20px 19px;
  border-top:2px solid var(--linie-tag);color:var(--on-dawn-mute);
  transition:border-color 300ms var(--ease)}
.lr-auffall>li:hover{border-top-color:var(--acc)}
.lr-auffall>li::before{content:counter(a,decimal-leading-zero);display:block;
  margin-bottom:10px;font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.16em;
  color:var(--on-dawn-mute);transition:color 300ms var(--ease)}
.lr-auffall>li:hover::before{color:var(--acc)}
.lr-auffall b,.lr-auffall strong{color:var(--on-dawn);font-weight:500}
.lr-rubrik--lang{grid-template-columns:minmax(0,16em) minmax(0,1fr)}
@media (max-width:760px){.lr-rubrik--lang{grid-template-columns:minmax(0,1fr)}}

/* ── Tabellenzeilen als Karten (Anforderungen, Posten) ──────────────────── */
.lr-tab--zeilen{display:grid;gap:clamp(9px,1.2vw,14px);max-width:none;width:100%;
  grid-template-columns:minmax(0,1fr);margin:26px 0 0}
@media (min-width:820px){.lr-tab--zeilen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lr-tab--zeilen caption{grid-column:1/-1;text-align:left}
.lr-tab--zeilen tbody,.lr-tab--zeilen tr{display:contents}
.lr-tab--zeilen th,.lr-tab--zeilen td{display:block;border:0;padding:0;text-align:left}
.lr-tab--zeilen tr{}
.lr-tab--zeilen tbody th{padding:16px 18px 0;background:var(--papier-hoch);
  border:1px solid var(--linie-tag);border-bottom:0;font-weight:500;color:var(--on-dawn);
  transition:border-color 300ms var(--ease)}
.lr-tab--zeilen tbody td{padding:7px 18px 16px;background:var(--papier-hoch);
  border:1px solid var(--linie-tag);border-top:0;color:var(--on-dawn-mute);
  font-size:.97rem;line-height:1.5;transition:border-color 300ms var(--ease)}
.lr-tab--zeilen tbody th:hover,.lr-tab--zeilen tbody th:hover + td,
.lr-tab--zeilen tbody td:hover,.lr-tab--zeilen tbody tr:hover th,
.lr-tab--zeilen tbody tr:hover td{border-color:var(--acc)}
@media (max-width:600px){
  .lr-tab--zeilen,.lr-tab--zeilen tbody,.lr-tab--zeilen tr,
  .lr-tab--zeilen th,.lr-tab--zeilen td{display:block;width:auto}
  .lr-tab--zeilen tbody th{padding-top:15px}
}
/* Rangliste: eine Spalte, auch auf großen Flächen — die Reihenfolge IST die Aussage. */
@media (min-width:840px){.lr-zaehl--rang{grid-template-columns:minmax(0,1fr)}
  .lr-zaehl--rang>li:last-child{grid-column:auto}}
.lr-zaehl--rang>li:nth-child(8){--r:7}


/* ── Fragenreihe · drei Fragen, die selten beantwortet werden ───────────── */
.lr-fragenreihe{list-style:none;margin:24px 0 0;padding:0;display:grid;
  gap:clamp(12px,1.6vw,20px);grid-template-columns:minmax(0,1fr);text-align:left}
@media (min-width:760px){.lr-fragenreihe{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lr-fragenreihe>li{padding:14px 0 0;border-top:2px solid var(--linie-tag);
  color:var(--on-dawn);font-size:1.04rem;line-height:1.35;
  transition:border-color 300ms var(--ease)}
.lr-fragenreihe>li::before{content:"?";display:block;margin-bottom:9px;
  font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.16em;
  color:var(--on-dawn-mute);transition:color 300ms var(--ease)}
.lr-fragenreihe>li:hover{border-top-color:var(--acc)}
.lr-fragenreihe>li:hover::before{color:var(--acc)}

/* ── Enthalten · Posten mit Akzentbalken, Wert daneben ────────────────────
   Kam mit der Vorlage, wird dort aber von keiner Seite benutzt: die Liste
   "Enthalten" auf /leistungen/website-betreuung ist als .lr-stufen gebaut.
   Bleibt stehen, falls die Bauform noch gebraucht wird - gemessen 0 Treffer. */
.lr-tab--drin{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  max-width:none;width:100%;margin:26px 0 0;background:var(--linie-tag);
  border:1px solid var(--linie-tag);text-align:left}
.lr-tab--drin caption{grid-column:1/-1;text-align:left;background:var(--papier-hoch);
  padding:14px 18px 13px}
.lr-tab--drin tbody{display:contents}
.lr-tab--drin tr{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);
  background:var(--papier-hoch);transition:background 300ms var(--ease)}
.lr-tab--drin tr:hover{background:#FBFAF5}
.lr-tab--drin th,.lr-tab--drin td{display:block;border:0;padding:15px 18px}
.lr-tab--drin tbody th{position:relative;font-weight:500;color:var(--on-dawn);
  padding-left:34px}
.lr-tab--drin tbody th::before{content:"";position:absolute;left:18px;top:1.42em;
  width:8px;height:1px;background:var(--on-dawn-mute);
  transition:background 300ms var(--ease),width 300ms var(--ease)}
.lr-tab--drin tr:hover th::before{background:var(--acc);width:14px}
.lr-tab--drin tbody td{color:var(--on-dawn-mute);font-size:.97rem;line-height:1.5;
  padding-top:15px}
@media (max-width:640px){
  .lr-tab--drin tr{grid-template-columns:minmax(0,1fr)}
  .lr-tab--drin tbody td{padding-top:0;padding-left:34px}
}

/* ── Zeiten · drei Zusagen nebeneinander, senkrecht getrennt ────────────── */
.lr-zeiten{list-style:none;margin:28px auto 0;padding:0;display:grid;
  gap:22px;grid-template-columns:minmax(0,1fr);max-width:74ch;text-align:center}
@media (min-width:760px){
  .lr-zeiten{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .lr-zeiten>li + li{border-left:1px solid var(--linie-tag)}
  .lr-zeiten>li{padding:0 22px}
}
.lr-zeiten>li{transition:color 300ms var(--ease)}
.lr-zeiten-marke{display:block;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.lr-zeiten-satz{display:block;color:var(--on-dawn);line-height:1.45}



/* ══════════════════════════════════════════════════════════════════════════
   Hinweis zur folgenden MITTELACHSE
   In der Vorlage stand sie als .arc-lr — und damit auf JEDER Seite, die
   leistung.css lädt: /arbeitsweise, /forschungspartner,
   /fragen-und-antworten und /ueber-uns tragen dieselbe Klasse. Diese vier
   Seiten waren nicht Gegenstand des Auftrags; unbeschränkt hätte der Block
   sie stillschweigend mitzentriert.

   Deshalb hängt die Mittelachse an einer zweiten Klasse, die nur die drei
   überarbeiteten Reiter tragen: .arc-lr--achse. Die Verschachtelungstiefe
   der Selektoren ist unverändert, also auch ihre Rangfolge untereinander.
   Soll die Achse später für den ganzen Auftritt gelten, genügt es, die
   Klasse in Haupt.astro an jedes <main class="arc-lr"> zu schreiben.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   MITTELACHSE
   Alles, was nicht neben einem Bild steht, steht auf der Mitte. Der
   Bild-Satz-Verbund und das Kopfbild bleiben linksbündig — dort ist die
   Kante des Satzspiegels die Gegenkante zum Bild.
   ══════════════════════════════════════════════════════════════════════════ */
.arc-lr--achse .arc-aufschrift,.arc-lr--achse .arc-h2,.arc-lr--achse .lr-h3,.arc-lr--achse .lr-lead,
.arc-lr--achse .lr-lauf,.arc-lr--achse .lr-satz,.arc-lr--achse .lr-rand,.arc-lr--achse .arc-eckdaten,
.arc-lr--achse .lr-tab caption,.arc-lr--achse .lr-anteil-vorbehalt,
.arc-lr--achse figure > figcaption{text-align:center;margin-inline:auto}
.arc-lr--achse .lr-tab,.arc-lr--achse .lr-preis,.arc-lr--achse .lr-schritte,.arc-lr--achse .lr-anteil,
.arc-lr--achse .lr-intervalle,.arc-lr--achse .lr-kurve,.arc-lr--achse .lr-zaehl-block,.arc-lr--achse .lr-zaehl,
.arc-lr--achse .lr-beleg,.arc-lr--achse .lr-markt,.arc-lr--achse .lr-auffall,.arc-lr--achse .lr-fragenreihe,
.arc-lr--achse .lr-vn,.arc-lr--achse .lr-zeiten,.arc-lr--achse .lr-grenze,.arc-lr--achse .lr-rubrik,
.arc-lr--achse .lr-waage,.arc-lr--achse .lr-herzschlag,.arc-lr--achse .lr-gegen{margin-inline:auto}
/* Der Vorbehalt steht als Grenzstreifen — mittig, mit Haarlinie oben. */
.arc-lr--achse .lr-grenze{max-width:66ch;text-align:center;padding:24px 26px 22px}
.arc-lr--achse .lr-grenze::before{left:50%;top:0;bottom:auto;width:56px;height:2px;
  transform:translateX(-50%)}
.arc-lr--achse .lr-grenze-marke{margin-bottom:10px}
.arc-js .lr-grenze{transform:translateY(18px)}
.arc-js .lr-grenze[data-ab="ja"]{transform:none}
/* Randnotiz mittig, Haarlinie über die Lesebreite. */
.arc-lr--achse .lr-rand{max-width:62ch}
/* Der Satz: Haarlinie oben, Raute in der Achse — überall, nicht nur dort,
   wo --mitte gesetzt war. */
.arc-lr--achse .lr-satz{max-width:54ch;padding:28px 0 0;border-left:0;
  border-top:1px solid var(--linie-tag);position:relative}
.arc-lr--achse .lr-satz::before{content:"";position:absolute;top:-4px;left:50%;
  width:7px;height:7px;background:var(--acc);transform:translateX(-50%) rotate(45deg)}
.arc-lr--achse .lr-satz--nacht{border-top-color:color-mix(in oklab,var(--on-night) 22%,transparent)}
/* Rubrik: Marke über dem Satz, beides auf der Achse. */
.arc-lr--achse .lr-rubrik,.arc-lr--achse .lr-rubrik--lang{grid-template-columns:minmax(0,1fr);
  gap:9px;max-width:64ch;text-align:center}
.arc-lr--achse .lr-rubrik-marke{text-align:center}
.arc-lr--achse .lr-rubrik-marke::after{position:static;display:block;margin:8px auto 0;
  transform:rotate(45deg)}
.arc-lr--achse .lr-rubrik:hover .lr-rubrik-marke::after{transform:rotate(45deg) scale(1.5)}
.arc-lr--achse .lr-rubrik>p{margin-inline:auto}
/* Zählbogen, Belege, Marktpositionen: Karten mittig, Text darin links. */
.arc-lr--achse .lr-zaehl-block{max-width:1000px}
.arc-lr--achse .lr-zaehl-legende,.arc-lr--achse .lr-zaehl-titel{justify-content:center;text-align:center}
.arc-lr--achse .lr-markt{max-width:1000px}
.arc-lr--achse .lr-markt-kopf{text-align:center}
.arc-lr--achse .lr-beleg{max-width:1000px}
.arc-lr--achse .lr-auffall{max-width:900px;text-align:center}
.arc-lr--achse .lr-auffall>li{padding-inline:16px}
.arc-lr--achse .lr-auffall>li::before{text-align:center}
.arc-lr--achse .lr-fragenreihe{max-width:900px;text-align:center}
.arc-lr--achse .lr-fragenreihe>li::before{text-align:center}
.arc-lr--achse .lr-waage--karten{max-width:1000px}
.arc-lr--achse .lr-waage--karten thead th{text-align:center}
/* Zurück auf die Kante: alles, was neben einem Bild steht. */
.arc-lr--achse .lr-verbund__satz .arc-aufschrift,.arc-lr--achse .lr-verbund__satz .arc-h1,
.arc-lr--achse .lr-verbund__satz .arc-h2,.arc-lr--achse .lr-verbund__satz .lr-h3,
.arc-lr--achse .lr-verbund__satz .lr-lauf,.arc-lr--achse .lr-verbund__satz .lr-lead,
.arc-lr--achse .lr-verbund__satz .lr-rubrik,.arc-lr--achse .lr-kopfbild .arc-aufschrift,
.arc-lr--achse .lr-kopfbild .arc-h1,.arc-lr--achse .lr-kopfbild .lr-lead,
.arc-lr--achse .lr-kopfbild .lr-lauf,.arc-lr--achse .lr-kopfbild .arc-eckdaten{
  text-align:left;margin-inline:0}
.arc-lr--achse .lr-verbund__satz .lr-rubrik{text-align:left;grid-template-columns:minmax(0,1fr)}
.arc-lr--achse .lr-verbund__satz .lr-rubrik-marke{text-align:left}
.arc-lr--achse .lr-verbund__satz .lr-rubrik-marke::after{margin-left:0}

/* ══ Stufenkarten · vier Stufen statt einer vierspaltigen Tabelle ═════════
   Die Stufe ist keine Tabellenzeile, sie ist ein Angebot: Zeichen, Ordnungs-
   zahl, was das System tut, Beispiele als Aufzählung, Preis hinter einer
   Haarlinie. Dieselbe Kartensprache wie die sieben Systeme oben. */
.lr-stufk-legende{display:flex;flex-wrap:wrap;justify-content:center;gap:.6em;
  margin:26px 0 0;font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dawn-mute)}
.lr-stufk-legende i{font-style:normal;color:var(--acc)}
.lr-stufen{counter-reset:s;list-style:none;margin:16px auto 0;padding:0;
  max-width:1100px;display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.lr-stufen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.lr-stufen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lr-stufk{counter-increment:s;position:relative;display:grid;
  grid-template-rows:auto auto auto 1fr auto;gap:11px;
  padding:clamp(18px,1.8vw,24px);background:var(--papier-hoch);
  border:1px solid var(--linie-tag);text-align:left;
  transition:transform 300ms var(--ease),border-color 300ms var(--ease)}
.lr-stufk::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--acc);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 320ms var(--ease)}
.lr-stufk:hover{transform:translateY(-3px);border-color:var(--acc)}
.lr-stufk:hover::before{transform:scaleX(1)}
.lr-stufk-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lr-stufk-kopf svg{display:block;width:26px;height:26px;flex:none;fill:none;
  stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
  color:var(--on-dawn-mute);transition:color 300ms var(--ease)}
.lr-stufk:hover .lr-stufk-kopf svg{color:var(--acc)}
.lr-stufk-kopf::after{content:"0" counter(s);font-family:var(--f-m);
  font-size:var(--t-mark);letter-spacing:.16em;color:var(--on-dawn-mute);
  font-variant-numeric:tabular-nums}
.lr-stufk-titel{margin:0;font-size:1.08rem;line-height:1.24;font-weight:500;
  color:var(--on-dawn);text-wrap:balance}
.lr-stufk-tut{margin:0;font-size:.97rem;line-height:1.45;color:var(--on-dawn-mute)}
.lr-stufk-bsp{list-style:none;margin:0;padding:14px 0 0;display:grid;gap:7px;
  border-top:1px solid var(--linie-tag)}
.lr-stufk-bsp li{position:relative;padding-left:15px;font-size:.92rem;line-height:1.4;
  color:var(--on-dawn-mute)}
.lr-stufk-bsp li::before{content:"";position:absolute;left:0;top:.58em;width:6px;
  height:1px;background:var(--acc);opacity:.7}
.lr-stufk-preis{margin:0;padding-top:13px;border-top:1px solid var(--linie-tag);
  font-family:var(--f-m);font-size:.94rem;color:var(--on-dawn);
  font-variant-numeric:tabular-nums}
.lr-stufk-preis small{display:block;font-family:var(--f-b);font-size:.86rem;
  color:var(--on-dawn-mute);margin-top:3px}
.arc-js .lr-stufk{opacity:0;transform:translateY(16px)}
.arc-js .lr-stufen[data-ab="ja"] .lr-stufk{opacity:1;transform:none;
  transition-delay:calc(var(--s,0) * 70ms)}
.lr-stufk:nth-child(1){--s:0}.lr-stufk:nth-child(2){--s:1}
.lr-stufk:nth-child(3){--s:2}.lr-stufk:nth-child(4){--s:3}

/* ══ Fremde Angaben · was ANDERE verlangen, nicht wir ═════════════════════
   Der Block muss auf einen Blick als Zitat lesbar sein: keine Akzentfarbe,
   gestrichelte Kante, gedämpfte Schrift. Unsere eigenen Sätze stehen in
   gefüllten Karten mit Akzent — die zwei Klassen dürfen sich nicht ähneln. */
.lr-fremd{margin:32px auto 0;max-width:1040px;padding:clamp(20px,2.4vw,30px);
  border:1px dashed color-mix(in oklab,var(--on-dawn) 26%,transparent)}
.lr-fremd-marke{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.7em;margin:0 0 4px;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dawn-mute);
  text-align:center}
.lr-fremd-marke b{font-weight:400;color:var(--on-dawn)}
.lr-fremd-marke i{font-style:normal;opacity:.6}
.lr-fremd-hin{margin:0 auto 6px;max-width:56ch;text-align:center;font-size:.95rem;
  line-height:1.5;color:var(--on-dawn-mute)}
.lr-fremd .lr-markt{max-width:none}
.lr-fremd .lr-markt-liste>li{background:transparent;
  border:1px solid color-mix(in oklab,var(--on-dawn) 14%,transparent)}
.lr-fremd .lr-markt-liste>li:hover{border-color:color-mix(in oklab,var(--on-dawn) 30%,transparent)}
.lr-fremd .lr-markt-liste b{color:var(--on-dawn-mute);font-weight:400}
.lr-fremd .lr-markt-liste>li:hover span{color:var(--on-dawn)}

/* ══ Spanne · wo unsere Vorhaben liegen ══════════════════════════════════ */
.lr-spanne{margin:34px auto 0;max-width:760px;text-align:center}
.lr-spanne-marke{margin:0 0 18px;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.lr-spanne-achse{position:relative;height:46px;margin:0 0 6px}
.lr-spanne-spur{position:absolute;left:0;right:0;top:21px;height:2px;
  background:linear-gradient(90deg,var(--linie-tag) 0%,var(--linie-tag) 62%,
    color-mix(in oklab,var(--linie-tag) 40%,transparent) 100%)}
.lr-spanne-band{position:absolute;top:17px;left:12%;width:33%;height:8px;
  background:var(--acc);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 900ms var(--ease)}
.lr-spanne[data-ab="ja"] .lr-spanne-band{transform:scaleX(1)}
.lr-spanne-wert{position:absolute;top:0;font-family:var(--f-m);font-size:.88rem;
  color:var(--on-dawn);font-variant-numeric:tabular-nums;transform:translateX(-50%)}
.lr-spanne-wert[data-pos="von"]{left:12%}
.lr-spanne-wert[data-pos="bis"]{left:45%}
.lr-spanne-offen{position:absolute;top:38px;right:0;font-family:var(--f-m);
  font-size:var(--t-mark);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dawn-mute)}
.lr-spanne-satz{margin:22px auto 0;max-width:48ch;font-size:var(--t-lead);
  line-height:1.4;color:var(--on-dawn)}
.lr-spanne-satz strong{font-weight:500}
.lr-spanne-paar{display:grid;gap:clamp(14px,2vw,26px);margin:26px 0 0;
  grid-template-columns:minmax(0,1fr);text-align:left}
@media (min-width:720px){.lr-spanne-paar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lr-spanne-paar>div{padding:16px 0 0;border-top:2px solid var(--linie-tag);
  transition:border-color 300ms var(--ease)}
.lr-spanne-paar>div:hover{border-top-color:var(--acc)}
.lr-spanne-paar b{display:block;margin-bottom:7px;font-family:var(--f-m);
  font-size:var(--t-mark);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dawn-mute)}
.lr-spanne-paar>div:hover b{color:var(--acc)}
.lr-spanne-paar p{margin:0;font-size:.98rem;line-height:1.5;color:var(--on-dawn-mute)}
.lr-spanne-paar strong{color:var(--on-dawn);font-weight:500}
@media (max-width:560px){
  .lr-spanne-wert[data-pos="bis"]{left:auto;right:52%;transform:none}
  .lr-spanne-offen{position:static;display:block;margin-top:6px;text-align:right}
}


/* Kartenraster ohne Ordnungszahl, und zu dritt bzw. zu sechst. */
.lr-stufen--ohne-nr .lr-stufk-kopf::after{content:none}
.lr-stufk:nth-child(5){--s:1}.lr-stufk:nth-child(6){--s:2}
@media (min-width:1000px){
  .lr-stufen--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lr-stufen--sechs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1180px){
  .lr-stufen--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lr-stufen--sechs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Messkarte: der gemessene Wert steht groß in der Fußzeile der Karte. */
.lr-stufk-mess{margin:0;padding-top:13px;border-top:1px solid var(--linie-tag);
  font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);line-height:1}
.lr-stufk-mess .lr-mess{font-size:inherit}
.lr-stufk-mess small{display:block;margin-top:7px;font-family:var(--f-m);
  font-size:var(--t-mark);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dawn-mute)}
/* Die Spanne: der Balken bleibt eine Haarspur, kein Klotz. */
.lr-spanne-band{top:17px;height:8px}