/* REM_BUEHNE_V1 — Inszenierungsebene ueber rem-fx / rem-signature / rem-cards.
   Grundgestaltung bleibt unangetastet: Schwarz, Limette #B0D528, Space Grotesk.
   Diese Ebene fuegt NUR Bewegung, Tiefe und zwei erzaehlende Bausteine hinzu.

   Sicherheitsprinzip wie bei rem-fx: Alles, was etwas verbirgt, haengt an
   html.bx-ready — das setzt erst das Skript. Faellt es aus, ist die Seite
   vollstaendig sichtbar. body.rm (Schalter unten rechts) und
   prefers-reduced-motion schalten jede Bewegung ab.

   Namensraum: alles beginnt mit bx- (Buehne). Keine fremden Klassen ueberschrieben
   ausser dort, wo es ausdruecklich kommentiert ist. */

:root{
  --bx-limette:#B0D528;
  --bx-limette-2:#8EB01E;
  --bx-cad:rgba(176,213,40,.55);
  --bx-grund:#000;
  --bx-e:cubic-bezier(.16,.84,.44,1);
}

/* ============================================================
   0 · Seitenuebergang (Chrome/Edge). Ein weiches Kreuzblenden statt
   des harten Weiss-Blitzes beim Seitenwechsel.
   ============================================================ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:bx-vt-raus .22s ease both}
::view-transition-new(root){animation:bx-vt-rein .32s ease .04s both}
@keyframes bx-vt-raus{to{opacity:0}}
@keyframes bx-vt-rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   1 · Zeigerlicht auf dem Katastergitter
   Ein feines Vermessungsgitter liegt ueber der ganzen Seite und wird nur
   dort sichtbar, wo der Zeiger steht. Grund: die Marke ist Kataster —
   die Seite verhaelt sich wie eine Messtischplatte. Ohne Zeiger (Touch)
   bleibt es aus.
   ============================================================ */
.bx-raster{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .6s ease;
  background-image:
    linear-gradient(rgba(176,213,40,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(176,213,40,.16) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(240px circle at var(--bx-x,-999px) var(--bx-y,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
          mask-image:radial-gradient(240px circle at var(--bx-x,-999px) var(--bx-y,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%)}
html.bx-zeiger .bx-raster{opacity:1}
/* Kreuz im Mittelpunkt — Fadenkreuz des Messgeraets */
.bx-raster::after{content:"";position:absolute;left:var(--bx-x,-999px);top:var(--bx-y,-999px);
  width:15px;height:15px;margin:-8px 0 0 -8px;opacity:.5;
  background:
    linear-gradient(var(--bx-cad),var(--bx-cad)) center/1px 100% no-repeat,
    linear-gradient(var(--bx-cad),var(--bx-cad)) center/100% 1px no-repeat}

/* ============================================================
   2 · Kapitelverzeichnis am rechten Rand ("Akte")
   Der duenne Balken oben sagt "noch 40 %" — er sagt nicht, wovon.
   Unter 1200 px ausgeblendet: auf dem Telefon ein Fremdkoerper.
   Eigener Grund je Zeile, weil darunter mal Foto, mal Flaeche durchzieht.
   ============================================================ */
/* Defensiv: style.css faerbt JEDES <nav> hell ein (Rest der frueheren hellen
   Fassung) — ohne diese Ruecknahme steht hier ein weisser Kasten im Bild. */
.bx-akte{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:70;
  display:none;flex-direction:column;gap:2px;align-items:flex-end;
  background:none;border:0;border-bottom:0;padding:0;backdrop-filter:none;
  -webkit-backdrop-filter:none;box-shadow:none;
  font-family:var(--mono,ui-monospace,Menlo,monospace)}
/* Erst ab 1400 px: bei 1200 px steht der Inhalt (max. 1240 px) so dicht am
   rechten Rand, dass das Verzeichnis in die Zahlenspalte ragt. */
@media(min-width:1400px){.bx-akte{display:flex}}
.bx-akte a{position:relative;display:flex;align-items:center;gap:10px;
  padding:5px 0 5px 14px;text-decoration:none;color:var(--text-light,#6A7076);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .25s ease}
.bx-akte .bx-akte-t{position:absolute;right:100%;margin-right:12px;white-space:nowrap;
  opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;
  background:color-mix(in srgb,var(--bx-grund) 92%,transparent);
  padding:3px 8px;border:1px solid rgba(255,255,255,.06);border-radius:2px;
  backdrop-filter:blur(5px);color:#C6CBD1}
.bx-akte .bx-akte-n{min-width:20px;text-align:right;
  text-shadow:0 0 8px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.9)}
.bx-akte .bx-akte-m{width:22px;height:1px;background:currentColor;opacity:.45;
  transition:width .3s var(--bx-e),opacity .3s;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--bx-grund) 70%,transparent)}
.bx-akte a:hover{color:#fff}
.bx-akte a:hover .bx-akte-t{opacity:1;transform:none}
.bx-akte a.an{color:var(--bx-limette)}
.bx-akte a.an .bx-akte-m{width:38px;opacity:1}
.bx-akte a:focus-visible{outline:1px solid var(--bx-limette);outline-offset:3px}

/* ============================================================
   3 · Zeilenweiser Auftritt der grossen Ueberschriften
   Die Zeile steigt hinter einer Kante herauf. Wortmasken schneiden
   Ueberhaenge ab — deshalb seitliches Polster mit negativem Rand
   (verschiebt das Layout nicht).
   ============================================================ */
/* Seitliches Polster gibt Ueberhaengen Luft (das kursive „d", das Komma), der
   negative Rand nimmt die Verschiebung zurueck. UNTEN steht bewusst KEIN
   negativer Rand: er zog den folgenden Absatz bis zu 38 px in die Zeile
   hinein — gemessen bei 390 px, und dort auch sichtbar. */
html.bx-ready .bx-zeile{display:block;overflow:hidden;
  padding:.04em .16em .16em;margin:0 -.16em 0}
/* Ist die Zeile oben, darf die Maske weg — sonst schneidet sie dauerhaft
   Unterlaengen ab, sobald der Text spaeter umbricht. */
html.bx-ready .bx-zeile.frei{overflow:visible}
html.bx-ready .bx-zeile>i{display:block;font-style:inherit;color:inherit;
  transform:translateY(108%);
  transition:transform 1.05s var(--bx-e);transition-delay:var(--bx-d,0s)}
/* ZWEI Faelle, und der zweite hat mich Zeit gekostet: Hat die Ueberschrift
   Zeilen-Spans, sitzt .bx-an am Elternteil und .bx-zeile am Kind. Hat sie
   keine, ist die Ueberschrift SELBST beides — dann greift ein reiner
   Nachfahren-Selektor nicht, und der Text bleibt 108 % tief stehen: sichtbar
   verrutscht ueber dem naechsten Absatz. */
html.bx-ready .bx-an .bx-zeile>i,
html.bx-ready .bx-zeile.bx-an>i{transform:none}

/* ============================================================
   4 · Kachel-Parallax (Objekt- und Referenzbilder)
   Das Bild in der Kachel zieht langsamer mit als die Kachel selbst.
   Wirkt wie Tiefe, kostet nur eine transform.
   ============================================================ */
html.bx-ready .obj-bild,html.bx-ready .ref-bild,html.bx-ready .pj-bild{overflow:hidden}
html.bx-ready .obj-bild img,html.bx-ready .ref-bild img{
  will-change:transform;transform:translate3d(0,var(--bx-p,0px),0) scale(1.12)}
html.bx-ready .obj:hover .obj-bild img,html.bx-ready .ref:hover .ref-bild img{
  transform:translate3d(0,var(--bx-p,0px),0) scale(1.18)}
.obj-bild img,.ref-bild img{transition:transform .7s var(--bx-e)}

/* ============================================================
   5 · Erzaehlbuehne "Vom Grundbuch zum Anteil"
   Gehefteter Abschnitt: links laufen die Textbeats durch, rechts steht
   die Zeichnung und baut sich Schritt fuer Schritt um. Bewegung mit Grund:
   sie erklaert genau das Geschaeftsmodell.
   Wichtig (teuer gelernt): CSS-Umschaltung und JS-Umschaltung muessen
   WOERTLICH dieselbe Bedingung nutzen -> (max-width:1000px),(max-height:660px).
   ============================================================ */
/* padding:0 defensiv — die Startseite setzt section{padding:104px 0}; das wuerde
   den gehefteten Bereich gegen seinen eigenen Scrollweg verschieben. */
.bx-story{position:relative;height:430vh;padding:0;background:var(--bg-warm,#0A0B0C);
  border-top:1px solid var(--line,#26282B);border-bottom:1px solid var(--line,#26282B)}
.bx-story-innen{max-width:1280px;margin:0 auto;padding:0 28px;height:100%}
/* Der geheftete Inhalt ist GENAU so hoch wie das Fenster — nie hoeher.
   Sonst ist die Ueberschrift oben abgeschnitten und man scrollt mehrere
   Bildschirme lang ohne Wirkung. */
.bx-story-pin{position:sticky;top:0;height:100svh;display:grid;
  grid-template-columns:minmax(300px,470px) 1fr;gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(74px,9vh,104px) 0 clamp(28px,5vh,64px);overflow:hidden}
.bx-story-text{position:relative}
.bx-story-kopf{margin-bottom:26px}
.bx-story-kopf h2{font-size:clamp(30px,4.2vw,50px);line-height:1.04;font-weight:500;
  letter-spacing:-1.6px;color:#fff;margin:8px 0 0}
.bx-story-kopf h2 em{font-style:normal;color:var(--bx-limette)}
.bx-beats{position:relative;min-height:236px}
.bx-beat{position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s var(--bx-e);pointer-events:none}
.bx-beat.an{opacity:1;transform:none;pointer-events:auto}
.bx-beat .nr{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bx-limette);display:flex;align-items:center;gap:11px}
.bx-beat .nr::before{content:"";width:26px;height:1px;background:var(--bx-limette)}
.bx-beat h3{font-size:clamp(21px,2.4vw,27px);font-weight:500;letter-spacing:-.5px;
  color:#fff;margin:14px 0 10px}
.bx-beat p{font-size:15.5px;line-height:1.7;color:var(--text-soft,#9BA0A6);max-width:440px}
.bx-beat .fakt{margin-top:18px;display:flex;gap:26px;flex-wrap:wrap}
.bx-beat .fakt div{border-left:2px solid var(--bx-limette);padding-left:13px}
.bx-beat .fakt b{display:block;font-size:21px;font-weight:500;letter-spacing:-.5px;color:#fff}
.bx-beat .fakt span{font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-light,#6A7076)}

/* Fortschrittsleiste der Beats */
.bx-story-leiste{display:flex;gap:7px;margin-top:34px}
.bx-story-leiste i{flex:1;height:2px;background:var(--line,#26282B);position:relative;overflow:hidden}
.bx-story-leiste i::after{content:"";position:absolute;inset:0;background:var(--bx-limette);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--bx-e)}
.bx-story-leiste i.an::after{transform:scaleX(1)}

/* Zeichenflaeche */
.bx-buehne{position:relative;aspect-ratio:1/1;max-height:min(58vh,560px);margin:0 auto;
  width:auto;height:100%}
/* overflow bleibt beschnitten: mit „visible" ragte das Siegel auf schmalen
   Schirmen bis zu 36 px aus der Zeichenflaeche. */
.bx-buehne svg{width:100%;height:100%;overflow:hidden}
.bx-buehne .rand{fill:none;stroke:var(--bx-cad);stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:var(--bx-draw,1);transition:stroke-dashoffset .9s var(--bx-e)}
.bx-buehne .flaeche{fill:rgba(176,213,40,.05);opacity:0;transition:opacity .5s ease}
.bx-buehne .knoten{fill:#0A0B0C;stroke:var(--bx-cad);stroke-width:1.4;vector-effect:non-scaling-stroke;
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);
  transition:opacity .4s ease,transform .4s var(--bx-e)}
.bx-buehne .mass{stroke:rgba(176,213,40,.45);stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:0;transition:opacity .45s ease}
.bx-buehne text{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.1em;
  fill:var(--bx-cad);text-transform:uppercase;opacity:0;transition:opacity .5s ease}
.bx-buehne .anteil{fill:rgba(255,255,255,.028);stroke:rgba(176,213,40,.32);stroke-width:1;
  vector-effect:non-scaling-stroke;opacity:0;
  transform-box:fill-box;transform-origin:center;
  transition:opacity .5s ease,transform .8s var(--bx-e),fill .5s ease,stroke .5s ease}
.bx-buehne .anteil.meins{fill:rgba(176,213,40,.20);stroke:var(--bx-limette)}
.bx-buehne .kette{stroke:var(--bx-limette);stroke-width:1.2;vector-effect:non-scaling-stroke;
  opacity:0;transition:opacity .5s ease}
.bx-buehne .siegel{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.86);
  transition:opacity .5s ease,transform .6s var(--bx-e)}
.bx-buehne .siegel circle{fill:none;stroke:var(--bx-limette);stroke-width:1.4;vector-effect:non-scaling-stroke}
.bx-buehne .siegel path{fill:none;stroke:var(--bx-limette);stroke-width:1.8;vector-effect:non-scaling-stroke}

/* Zustaende je Beat — vom Skript ueber data-beat am Buehnen-Element gesetzt.
   Die Grenze zeichnet sich, sobald die Buehne ins Bild kommt (.sicht), nicht
   schon beim Laden der Seite — sonst ist sie fertig, bevor jemand hinsieht. */
.bx-buehne .rand{--bx-draw:1;transition:stroke-dashoffset 1.7s var(--bx-e),opacity .5s}
.bx-buehne.sicht .rand{--bx-draw:0}
.bx-buehne.sicht .t-hinweis{opacity:.75}
.bx-buehne .t-hinweis{fill:var(--text-light,#6A7076);font-size:9.5px;letter-spacing:.16em}
.bx-buehne:not([data-beat="0"]) .knoten{opacity:1;transform:none}
.bx-buehne[data-beat="1"] .flaeche,.bx-buehne[data-beat="2"] .flaeche{opacity:1}
.bx-buehne[data-beat="1"] .mass,.bx-buehne[data-beat="1"] .t-mass{opacity:1}
.bx-buehne[data-beat="2"] .anteil,.bx-buehne[data-beat="3"] .anteil,
.bx-buehne[data-beat="4"] .anteil{opacity:1}
.bx-buehne[data-beat="2"] .t-teil{opacity:1}
.bx-buehne[data-beat="3"] .t-anteil,.bx-buehne[data-beat="4"] .t-anteil{opacity:1}
.bx-buehne[data-beat="4"] .kette,.bx-buehne[data-beat="4"] .siegel{opacity:1}
.bx-buehne[data-beat="4"] .siegel{transform:none}
.bx-buehne[data-beat="4"] .rand{opacity:.3}
/* Beat 3: die Anteile loesen sich aus dem Verbund.
   Beat 4: die fuenf eigenen Anteile treten zur Kette an, der Rest tritt zurueck. */
.bx-buehne[data-beat="3"] .anteil{
  transform:translate(calc(var(--dx,0) * 1px),calc(var(--dy,0) * 1px))}
.bx-buehne[data-beat="4"] .anteil{opacity:.12;
  transform:translate(calc(var(--dx,0) * 1px),calc(var(--dy,0) * 1px))}
.bx-buehne[data-beat="4"] .anteil.meins{opacity:1;
  transform:translate(calc(var(--kx,0) * 1px),calc(var(--ky,0) * 1px))}

/* Ohne Heftung (schmal/niedrig) — WOERTLICH dieselbe Bedingung wie im Skript */
@media(max-width:1000px),(max-height:660px){
  /* OHNE das height:auto bliebe der Abschnitt 430vh hoch, obwohl nichts mehr
     geheftet ist — vier Bildschirme Leere unter dem letzten Schritt. */
  .bx-story{height:auto}
  .bx-story-pin{position:static;grid-template-columns:1fr;gap:34px;
    height:auto;min-height:0;padding:64px 0;overflow:visible}
  .bx-beats{position:static;min-height:0;display:grid;gap:30px}
  .bx-beat{position:static;opacity:1;transform:none;pointer-events:auto}
  .bx-story-leiste{display:none}
  .bx-buehne{max-height:none;order:-1;width:min(100%,520px);height:auto}
}

/* ============================================================
   6 · Lichtbildschau fuer die Objektgalerie
   Ein Klick aufs Bild oeffnet es gross; Pfeiltasten, Wischen und Esc.
   ============================================================ */
.bx-lupe{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(0,0,0,.94);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:56px 24px}
.bx-lupe.auf{display:flex}
.bx-lupe img{max-width:min(1180px,94vw);max-height:82vh;width:auto;height:auto;
  border:1px solid var(--line,#26282B);
  animation:bx-lupe-rein .34s var(--bx-e) both}
@keyframes bx-lupe-rein{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}
.bx-lupe .zu,.bx-lupe .vor,.bx-lupe .zur{position:absolute;background:rgba(0,0,0,.55);
  border:1px solid var(--line,#26282B);color:#fff;width:46px;height:46px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;
  transition:border-color .2s,color .2s,background .2s}
.bx-lupe .zu:hover,.bx-lupe .vor:hover,.bx-lupe .zur:hover{border-color:var(--bx-limette);
  color:var(--bx-limette)}
.bx-lupe .zu{top:20px;right:22px}
.bx-lupe .zur{left:22px;top:50%;margin-top:-23px}
.bx-lupe .vor{right:22px;top:50%;margin-top:-23px}
.bx-lupe .zaehler{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.16em;
  color:var(--text-soft,#9BA0A6)}
html.bx-ready .ob-gross img,html.bx-ready .ob-klein img,html.bx-ready .ob-leiste img{cursor:zoom-in}

/* ============================================================
   7 · Schalter fuer die Bewegung
   Pflicht, nicht Zierde: wer von Bewegung Uebelkeit bekommt, muss sie
   abstellen koennen, ohne im Betriebssystem zu suchen.
   ============================================================ */
.bx-schalter{position:fixed;right:16px;bottom:16px;z-index:210;
  display:inline-flex;align-items:center;gap:8px;padding:14px 14px;min-height:44px;cursor:pointer;
  background:rgba(10,11,12,.86);border:1px solid var(--line,#26282B);border-radius:2px;
  color:var(--text-soft,#9BA0A6);font-family:var(--mono,monospace);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(8px);
  transition:border-color .25s,color .25s,opacity .35s}
.bx-schalter:hover{border-color:var(--bx-limette);color:var(--bx-limette)}
.bx-schalter i{width:22px;height:12px;border:1px solid currentColor;border-radius:8px;
  position:relative;display:block}
.bx-schalter i::after{content:"";position:absolute;top:2px;left:2px;width:6px;height:6px;
  border-radius:50%;background:var(--bx-limette);transition:left .25s var(--bx-e),background .25s}
body.rm .bx-schalter i::after{left:12px;background:var(--text-light,#6A7076)}
/* Auf schmalen Schirmen deckte der schwebende Schalter Fliesstext ab (gemessen
   bei 390 px: er stand mitten im Absatz). Dort steht er deshalb still am
   Seitenende — auffindbar, aber ohne etwas zu verdecken. */
@media(max-width:760px){
  .bx-schalter{position:static;display:flex;width:fit-content;
    margin:26px auto 30px;padding:13px 16px;font-size:10.5px}
}

/* ---- Tippflaechen, die schon vorher zu klein waren (gemessen bei 390 px) ----
   Der Menueknopf hatte 23 px, die Verweise in der Fusszeile 18 px. Beide sind
   keine Verweise im Fliesstext — fuer die gilt die WCAG-Ausnahme nicht. */
.brenner,.nav-burger{min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center}
@media(max-width:1000px){.brenner{display:inline-flex}}
.fuss li a,.fuss p a,footer .nav-mobile a{display:inline-block;padding:7px 0}
.unterfuss a{display:inline-block;padding:6px 2px}
@media(max-width:1000px){
  /* Die Fusszeile der Unterseiten arbeitet mit Inline-Stilen ohne Klassen —
     deshalb hier ueber das Element. Verweise im Fliesstext gibt es dort keine,
     fuer die waere eine Mindesthoehe falsch (WCAG 2.5.8 nimmt sie aus). */
  footer a,.fuss li a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .fuss li{margin-bottom:0}
  .partner-card a,.pj-txt a,.info-box a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- Objektseite: Lesbarkeit ----
   Die Objektbeschreibung lief ueber 123 Zeichen je Zeile (gemessen bei 1600 px).
   Ab etwa 90 verliert das Auge den Zeilenanfang. */
.ob-text p,.ob-text{max-width:68ch}
/* Impressum und Datenschutz liefen bis 117 Zeichen je Zeile. */
.recht p,.recht li{max-width:72ch}
.ob-zurueck{display:inline-flex;align-items:center;min-height:44px}

/* ---- SVG-Beschriftung auf schmalen Schirmen ----
   Die Zeichnung skaliert mit; 11 px im viewBox sind auf 390 px real 7,5 px.
   Die Beiwerk-Beschriftung faellt dort weg, der Rest wird groesser. */
@media(max-width:700px){
  .bx-buehne text{font-size:15px}
  .bx-buehne .t-mass,.bx-buehne .t-hinweis{display:none}
}

/* ============================================================
   8 · Feinschliff an bestehenden Bausteinen (nur Bewegung/Tiefe)
   ============================================================ */
/* Kopfbild der Unterseiten zieht langsamer mit (Hintergrundbild, kein <img>) */
html.bx-ready .page-banner{overflow:hidden}
html.bx-ready .page-banner-img{background-position:center calc(50% + var(--bx-p,0px));
  will-change:background-position}
body.rm .page-banner-img{background-position:center!important}

/* Ablaufplan: die Verbindungslinie zeichnet sich, wenn der Schritt kommt.
   Sie ist die einzige Bewegung dort — der Schritt selbst bleibt ruhig. */
html.bx-ready .rem-step::before{transform:scaleY(0);transform-origin:0 0;
  transition:transform .85s var(--bx-e) .1s}
html.bx-ready .rem-step.fx-in::before{transform:scaleY(1)}
body.rm .rem-step::before{transform:none!important}
/* Aufzaehlungen kommen als Kette statt als Block */
html.bx-ready .liste li,html.bx-ready .pillar-features li{transition-delay:var(--bx-d,0s)}
/* Fokus sichtbar halten — Bewegung darf Bedienbarkeit nicht kosten */
a:focus-visible,button:focus-visible{outline:2px solid var(--bx-limette);outline-offset:2px}

/* ============================================================
   9 · Alles aus: Systemwunsch ODER Schalter
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html.bx-ready .bx-zeile>i{transform:none!important}
  .bx-raster{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  html.bx-ready .obj-bild img,html.bx-ready .ref-bild img{transform:none!important}
}
body.rm .bx-raster{display:none}
body.rm .bx-story{height:auto}
body.rm .bx-story-pin{position:static;height:auto;min-height:0;overflow:visible;
  grid-template-columns:1fr;gap:34px;padding:64px 0}
body.rm .bx-buehne{max-height:none;order:-1;width:min(100%,520px);height:auto}
body.rm .bx-beats{position:static;min-height:0;display:grid;gap:30px}
body.rm .bx-beat{position:static;opacity:1;transform:none}
body.rm .bx-story-leiste{display:none}
body.rm .bx-buehne .rand{--bx-draw:0}
body.rm .bx-buehne .flaeche,body.rm .bx-buehne .knoten,body.rm .bx-buehne .anteil,
body.rm .bx-buehne text,body.rm .bx-buehne .mass{opacity:1;transform:none}
html.bx-ready body.rm .bx-zeile>i{transform:none!important}
body.rm .obj-bild img,body.rm .ref-bild img{transform:none!important}
body.rm *,body.rm *::before,body.rm *::after{
  animation-duration:.001s!important;animation-iteration-count:1!important;
  transition-duration:.001s!important;scroll-behavior:auto!important}