/* Arcturis — die Bildstücke der Startseite.
   Bilder sind hier keine Beilage: sie tragen den Abschnitt, und der Effekt
   ist ihre Anordnung. Was an Information darin steht, steht als echter Text
   im Dokument — in den Bildern selbst darf keine Schrift liegen.

   Alles bewegt sich über transform, opacity und clip-path. Keine Breite,
   keine Höhe, kein margin am laufenden Bild. */

/* ══ Die Knotenkarte ═══════════════════════════════════════════════════════
   Der Abschnitt beginnt als schmale dunkle Tafel in der Satzbreite und
   weitet sich beim Hereinrollen nach links und rechts über das ganze Fenster.
   Erst in der Breite ist Platz für die Punkte — sie erscheinen also nicht
   „auch noch", 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 einen Layoutlauf je Bild und reißt den Textfluss der
   Seite mit. Der Kasten hat von Anfang an seine volle Größe, sichtbar ist
   davon nur, was der Schnitt freigibt. */
.arc-nk{position:relative;isolation:isolate;
  /* --nk-aus ist die gelesene Polsterung des Blocks (siehe premium.js). Damit
     endet die Tafel genau am Fensterrand, ohne die Bildlaufleiste zu treffen.
     Ohne Skript bleibt sie in der Satzspalte — das ist kein Fehlerbild. */
  margin:clamp(48px,7vh,96px) calc(-1 * var(--nk-aus,0px)) clamp(40px,6vh,80px);
  min-height:clamp(540px,82vh,900px);
  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 — deshalb
     kommt die Rechnung ohne vw aus und die Bildlaufleiste kann sie nicht
     verschieben. Bei 0 ist der sichtbare Streifen genau die Satzbreite. */
  --eng:calc((1 - var(--pr-ein,0)) * max(0px,(100% - var(--spalte))/2));
  /* Der Radius läuft mit: geschlossen ist die Tafel eine Karte, offen ist sie
     die Seite. Eine Karte mit runden Ecken am Fensterrand wäre beides halb. */
  clip-path:inset(0 var(--eng) 0 var(--eng)
            round calc((1 - var(--pr-ein,0)) * clamp(10px,1.2vw,18px)))}

/* Der Sternengrund. Drei Ebenen, drei Geschwindigkeiten — sie laufen nicht
   von selbst, sie folgen der Rollstrecke (--pr-lauf). Eine Endlosanimation
   im Hintergrund wäre ein Bildschirmschoner. */
/* Ein <canvas> ist ein ERSETZTES Element: mit height:auto nimmt es sein
   eigenes Seitenverhältnis (300×150) und ignoriert das gesetzte bottom. Auf
   breiten Fenstern fiel das nicht auf — die halbe Leinwandbreite traf
   zufällig ungefähr die Tafelhöhe. Auf dem Telefon wird die Tafel zur langen
   Liste, die Leinwand blieb aber 195 px hoch: Sterne oben, darunter nichts.
   Also eine ausdrückliche Höhe. Prozente lösen hier auf, weil der
   umgebende Block absolut positioniert immer eine berechnete Höhe hat. */
.arc-nk-grund{position:absolute;top:-16%;left:0;z-index:0;width:100%;height:132%;
  pointer-events:none;display:block;
  opacity:calc(.55 + var(--pr-ein,0) * .45);
  transform:translate3d(0,calc(var(--pr-lauf,0) * 28px),0)}
/* Ein zweiter, tieferer Zug: näher stehende Sterne laufen schneller. Zwei
   Ebenen mit unterschiedlichem Weg sind der ganze Tiefeneindruck. */
.arc-nk-grund[data-tief="ja"]{top:-26%;height:152%;
  opacity:calc(.3 + var(--pr-ein,0) * .5);
  transform:translate3d(0,calc(var(--pr-lauf,0) * -52px),0)}
/* Der Rand der Tafel bleibt dunkel: außen ein weicher Abfall, damit die
   Punkte an den Seiten nicht an einer Kante kleben. */
.arc-nk-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,.82) 100%)}

/* ── Die Mitte ── */
.arc-nk-mitte{position:relative;z-index:3;max-width:min(30rem,42vw);text-align:center;
  display:grid;gap:clamp(14px,2vh,22px);justify-items:center;
  opacity:clamp(0,calc((var(--pr-ein,0) - .06) * 5),1);
  transform:translate3d(0,calc((1 - var(--pr-ein,0)) * 18px),0)}
.arc-nk-marke{margin:0;font:400 var(--t-mark)/1 var(--f-m);letter-spacing:.18em;
  text-transform:uppercase;color:var(--nadel)}
.arc-nk-h2{margin:0;font:300 var(--t-h2)/1.08 var(--f-b);letter-spacing:-.03em;
  color:var(--chrome-hi);text-wrap:balance}
.arc-nk-lead{margin:0;max-width:30rem;
  font:400 var(--t-body)/1.6 var(--f-b);color:var(--on-night-mute);text-wrap:pretty}
.arc-nk-hinweis{margin:0;display:flex;align-items:center;gap:9px;
  font:400 .74rem/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;
  color:var(--kalt);opacity:calc(var(--pr-ein,0) * .9)}
.arc-nk-hinweis::before{content:"";width:22px;height:1px;background:currentColor}

/* ── Die Adern ──
   Sie zeichnen sich, sobald die Tafel offen ist. pathLength="1" am Pfad macht
   die Rechnung unabhängig von der wirklichen Länge: ein Wert für alle. */
.arc-nk-adern{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  pointer-events:none;fill:none;stroke:#22304A;stroke-width:1;
  opacity:clamp(0,calc((var(--pr-ein,0) - .34) * 2.4),.9)}
.arc-nk-adern path{stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0,(var(--pr-ein,0) - .38) * 2.6,1))}

/* ── Die Punkte ──
   Jeder trägt seine Lage (--x/--y), seine Driftrichtung (--dx/--dy), seine
   Tiefe (--tiefe) und seine Schwelle (--s). Alles im Markup, weil es zur
   Anordnung gehört und nicht zum Stil. */
/* Der Punktbereich ist oben und unten eingerückt: die Lagen im Markup zählen
   gegen IHN, nicht gegen die Tafel. Sonst müsste jede Lage die Polsterung
   mitrechnen, und der unterste Punkt liefe unter den Schnitt. */
.arc-nk-punkte{position:absolute;inset:clamp(92px,11vh,140px) 0;z-index:4;
  margin:0;padding:0;list-style:none;pointer-events:none}
.arc-nk-punkt{position:absolute;left:var(--x);top:var(--y);width:clamp(9rem,13vw,12.5rem);
  pointer-events:auto;
  opacity:clamp(0,calc((var(--pr-ein,0) - var(--s,.3)) * 5),1);
  transform:translate3d(
    calc(-50% + var(--zx,0px) + var(--dx,0px) * (1 - clamp(0,(var(--pr-ein,0) - var(--s,.3)) * 3,1))),
    calc(-50% + var(--zy,0px) + var(--dy,0px) * (1 - clamp(0,(var(--pr-ein,0) - var(--s,.3)) * 3,1))
         + var(--pr-lauf,0) * var(--tiefe,0) * 1px),
    0)}
.arc-nk-punkt[data-seite="rechts"]{text-align:right;justify-items:end}
.arc-nk-punkt{display:grid;gap:.7em;justify-items:start}
/* Beim Zeigen klappt der Satz auf und die Karte wächst über ihre Nachbarn
   hinaus. Ohne eigene Lage im Stapel schiebt sich die nächste Karte davor
   und der aufgeklappte Text steht hinter einem fremden Foto. */
.arc-nk-punkt:hover,.arc-nk-punkt:focus-within{z-index:6}

/* Die Kachel. Bis das Foto da ist, steht der Platzhalter sichtbar darin —
   sobald data-foto gesetzt ist, verschwindet er ohne weitere Regel. */
.arc-nk-bild{position:relative;display:grid;place-items:center;overflow:hidden;
  width:clamp(76px,7vw,108px);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%;
  font:400 .62rem/1.3 var(--f-m);letter-spacing:.08em;
  color:#5C687C;text-align:center;
  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)}
/* Die Karte geht nicht auf, sie wird aufgedeckt: eine Blende läuft von unten
   nach oben durch, gestaffelt über --s, so dass die sechs Karten nacheinander
   erscheinen statt gemeinsam einzublenden. Im Ruhezustand steht das Motiv
   gedämpft und zu nah; beim Zeigen tritt es zurück und kommt ins Licht. */
.arc-nk-bild[data-foto]{
  filter:brightness(.74) saturate(.6) contrast(1.04);
  clip-path:inset(0 0 calc(100% - clamp(0%,(var(--pr-ein,0) - var(--s,.3)) * 340%,100%)) 0)}
.arc-nk-punkt:hover .arc-nk-bild[data-foto],
.arc-nk-punkt:focus-within .arc-nk-bild[data-foto]{
  filter:brightness(1.04) saturate(1) contrast(1);background-size:cover}
.arc-nk-bild[data-foto]{color:transparent}
.arc-nk-bild i{font-style:normal;padding:0 .5em;max-width:100%;
  overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.arc-nk-bild[data-foto] i{display:none}
/* Der Lichtstreifen läuft über das BILD, nicht über die Fläche: er sieht aus
   wie Licht, das über den Gegenstand geht. */
.arc-nk-bild::after{content:"";position:absolute;top:0;bottom:0;left:0;width:52%;
  translate:-160% 0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(220,235,255,.22),transparent)}
.arc-nk-punkt:hover .arc-nk-bild,
.arc-nk-punkt:focus-within .arc-nk-bild{transform:translateY(-8px) scale(1.06);
  border-color:color-mix(in oklab,var(--nadel) 46%,var(--linie));
  box-shadow:0 34px 60px -28px #000}
.arc-nk-punkt:hover .arc-nk-bild::after,
.arc-nk-punkt:focus-within .arc-nk-bild::after{animation:arc-nk-glanz .9s var(--ease) both}
@keyframes arc-nk-glanz{from{translate:-160% 0}to{translate:280% 0}}

/* Der Satz. In Ruhe steht nur die Zeile, die den Punkt benennt; der Rest
   klappt beim Zeigen auf. Er liegt immer im Dokument — verborgen ist er nur
   für das Auge, nicht für die Vorlesestimme. */
.arc-nk-satz{display:grid;gap:.4em;max-width:14rem}
.arc-nk-satz b{font:500 .98rem/1.25 var(--f-b);letter-spacing:-.012em;
  color:var(--chrome-hi)}
.arc-nk-satz > span{display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;
  transition:grid-template-rows .5s var(--ease),opacity .35s var(--ease)}
.arc-nk-satz > span > span{min-height:0;
  font:400 .82rem/1.5 var(--f-b);color:var(--on-night-mute)}
.arc-nk-punkt:hover .arc-nk-satz > span,
.arc-nk-punkt:focus-within .arc-nk-satz > span{grid-template-rows:1fr;opacity:1}
.arc-nk-punkt > a,.arc-nk-punkt > button{all:unset}

/* Die zwei Gruppen der Analyse stehen als Beschriftung in der Tafel, nicht
   als Überschrift über einer Liste: sie ordnen die Punkte, sie führen sie
   nicht an. */
.arc-nk-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,0) - .5) * 3),.85)}
.arc-nk-gruppe::before{content:"";width:clamp(24px,4vw,64px);height:1px;
  background:currentColor;opacity:.5}
.arc-nk-gruppe[data-lage="links"]{left:var(--rand);top:clamp(40px,7vh,72px)}
.arc-nk-gruppe[data-lage="rechts"]{right:var(--rand);bottom:clamp(40px,7vh,72px);
  flex-direction:row-reverse}

/* ── Schmal ──
   Keine Karte, kein Schnitt: eine Liste aus Bild und Satz. Die Aufweitung
   erzählt auf einer Fensterbreite von 400 px nichts, sie kostet nur Höhe. */
@media (max-width:1279px){
  .arc-nk{clip-path:none;min-height:0;place-items:stretch;
    margin-inline:calc(-1 * var(--nk-aus,0px));
    padding:clamp(48px,8vh,80px) var(--rand);
    display:block;border-radius:0}
  .arc-nk-mitte{max-width:none;text-align:left;justify-items:start;
    margin-bottom:clamp(32px,5vh,56px)}
  .arc-nk-adern,.arc-nk-vignette{display:none}
  .arc-nk-gruppe{position:static;margin:clamp(26px,4vh,40px) 0 14px;opacity:.85}
  .arc-nk-gruppe[data-lage="rechts"]{flex-direction:row}
  .arc-nk-punkte{position:static;inset:auto;display:grid;gap:clamp(18px,3vh,28px)}
  .arc-nk-punkt{position:static;width:auto;transform:none;opacity:1;
    grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px}
  .arc-nk-punkt[data-seite="rechts"]{text-align:left;justify-items:start}
  .arc-nk-satz{max-width:none}
  .arc-nk-bild[data-foto]{clip-path:none;filter:brightness(.9) saturate(.8)}
  .arc-nk-satz > span{grid-template-rows:1fr;opacity:1}
  .arc-nk-hinweis{display:none}
}

@media (prefers-reduced-motion:reduce){
  .arc-nk{clip-path:none}
  .arc-nk-grund,.arc-nk-mitte,.arc-nk-punkt{transform:none!important}
  .arc-nk-bild::after{animation:none!important}
  .arc-nk-bild[data-foto]{clip-path:none!important}
  .arc-nk-satz > span{grid-template-rows:1fr;opacity:1}
}


/* ══ Die Naht zum Kästchen ═════════════════════════════════════════════════
   Das Kästchen der Bühne trägt die Probe „leinen" (#CFC6AE), der Abschnitt
   darunter das hellere Papier. Zwei Flächen, die als eine gedacht sind, mit
   einem sichtbaren Sprung dazwischen — und der Sprung lag GENAU an der
   Stelle, an der die dunkle Tafel gleich aufgeht.

   Also: der Abschnitt übernimmt den Ton des Kästchens, und der Wechsel auf
   das Papier der folgenden Abschnitte passiert erst UNTER der Tafel, als
   Verlauf. Der Farbwechsel kommt damit nach dem Sternhintergrund, nicht
   davor. Der Verlauf beginnt bei 60 % — die Tafel endet bei rund 56 %. */
/* Die Spezifität ist hier kein Detail, sondern der Grund, warum eine spätere
   Datei nicht genügt: --eigen kommt aus [data-grund="tag"][data-ton="dunkel"]
   (0,2,0). Eine Regel mit (0,1,0) verliert, auch wenn sie danach lädt —
   Custom Properties folgen der normalen Kaskade. Also alle drei Merkmale. */
[data-grund="tag"][data-ton="dunkel"][data-block="02-befund"]{--eigen:#CFC6AE;
  background-color:#CFC6AE;
  background-image:linear-gradient(to bottom,
    transparent 0 60%,var(--dawn-deep) 100%)}

/* ══ Das Bildbauteil ═══════════════════════════════════════════════════════
   Eine Kachel, überall dieselbe: sie trägt ihr Foto in --bild, zeigt bis
   dahin einen sichtbaren Platzhalter und bekommt beim Zeigen einen
   Lichtstreifen. In den Fotos steht keine Schrift — was sie sagen sollen,
   steht daneben im Text. */
.pr-b{position:relative;display:grid;place-items:center;overflow:hidden;
  background-color:#0E1524;background-image:var(--bild,var(--pr-platz));
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  border:1px solid var(--linie);border-radius:3px;
  font:400 .62rem/1.35 var(--f-m);letter-spacing:.08em;color:#5C687C;
  text-align:center;
  --pr-platz:repeating-linear-gradient(135deg,
    rgba(147,160,180,.14) 0 9px,rgba(147,160,180,0) 9px 18px);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),
             border-color .45s var(--ease),filter .55s var(--ease)}
[data-grund="tag"] .pr-b{background-color:var(--dawn-deep);
  border-color:var(--linie-tag);color:#8A8578;
  --pr-platz:repeating-linear-gradient(135deg,
    rgba(84,91,102,.13) 0 9px,rgba(84,91,102,0) 9px 18px)}
.pr-b i{font-style:normal;padding:0 .6em;max-width:100%;overflow-wrap:anywhere}
.pr-b[data-foto]{color:transparent}
.pr-b[data-foto] i{display:none}
.pr-b::after{content:"";position:absolute;top:0;bottom:0;left:0;width:48%;
  translate:-170% 0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(226,238,255,.2),transparent)}
.pr-glanz:hover .pr-b::after,.pr-glanz:focus-within .pr-b::after,
.pr-b:hover::after{animation:arc-nk-glanz .9s var(--ease) both}

/* ══ A · Der Horizont unter dem Einstieg ═══════════════════════════════════
   Ein sehr flaches Band über die ganze Breite. Es öffnet sich beim Rollen von
   der Mitte nach oben und unten — wie eine Blende, die aufgeht — und das Bild
   darin läuft langsamer als die Seite. Zwei Bewegungen, eine Aussage: hier
   beginnt der Boden unter der Marke. */
/* Ein eigener flacher Abschnitt zwischen Einstieg und Bühne: im Einstieg
   hätte das Band unter dem Fensterrand gelegen, der ist eine Fensterhöhe
   hoch. Hier liegt es im Sternenfeld und trennt Marke von Arbeit. */
.pr-band{position:relative;z-index:1;padding:0}
.pr-horizont{position:relative;overflow:hidden;
  margin:clamp(34px,6vh,80px) calc(-1 * var(--nk-aus,0px)) clamp(34px,6vh,80px);
  height:clamp(104px,20vh,220px);
  clip-path:inset(calc((1 - var(--pr-ein,0)) * 50%) 0 calc((1 - var(--pr-ein,0)) * 50%) 0)}
.pr-horizont .pr-b{position:absolute;inset:-18% 0;border-radius:0;border-inline:0;
  transform:translate3d(0,calc(var(--pr-lauf,0) * -34px),0)}
.pr-horizont-marke{position:absolute;left:var(--rand);bottom:12px;z-index:2;margin:0;
  font:400 .68rem/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-night-mute);
  opacity:clamp(0,calc((var(--pr-ein,0) - .5) * 3),.85)}

/* ══ B · Die vier Tafeln im Ablauf ═════════════════════════════════════════
   Jede Tafel bekommt ihr eigenes Fenster. Weil die Tafeln ohnehin
   durchgeschoben werden, wandert das Bild mit — der Wechsel der Bilder IST
   der Schritt, nicht seine Illustration. */
.arc-ab-foto{display:grid;height:clamp(80px,12vh,140px);margin-bottom:clamp(10px,1.6vh,18px)}
.arc-ab-bild{position:relative}
/* Das Foto der Tafel steht nicht still, während die Tafeln durchgeschoben
   werden: es liegt in Laufrichtung versetzt und rückt beim Wechsel in seine
   Lage. Die vier Bilder werden dadurch zu einer Bewegung statt zu vier
   Blenden. */
.arc-ab-foto[data-foto]{background-size:cover;
  transform:translate3d(calc((var(--k,0) - var(--ab-i,0)) * 30px),0,0);
  transition:transform .6s var(--ease)}
.arc-ab-bild[style*="--k"] .arc-ab-foto{will-change:transform}

/* ══ C · Drei Fenster ══════════════════════════════════════════════════════
   Der erste Versuch legte ein Panorama HINTER den Text. Auf Papier gibt das
   keinen Grund, sondern Grieß: die Schrift steht auf Tischkanten und der
   Absatz wird unlesbar. Also getrennt statt übereinander — jede Spalte hat
   ihr eigenes Fenster oben, randlos bis an die Spaltengrenzen, der Text
   steht darunter auf sauberem Papier. Beim Rollen gehen die drei von links
   nach rechts nacheinander auf. */
.arc-leistung{position:relative;isolation:isolate}
.arc-l-fenster{display:block;height:clamp(124px,13vw,188px);
  margin:calc(-1 * clamp(26px,2.6vw,40px)) calc(-1 * clamp(20px,2.2vw,34px))
         clamp(24px,2.6vw,34px);
  background-color:var(--dawn-dim);
  background-image:var(--bild,var(--pr-platz3));
  --pr-platz3:repeating-linear-gradient(135deg,
    rgba(84,91,102,.19) 0 10px,rgba(84,91,102,0) 10px 20px);
  background-repeat:no-repeat;
  background-size:cover;background-position:50% 52%;
  filter:saturate(.16) brightness(1.08);opacity:.6;
  clip-path:inset(100% 0 0 0);
  /* Der Aufzug hat seinen eigenen Vorlauf (--auf). Vorher stand der Versatz
     als transition-delay auf dem ganzen Element — er galt damit auch für den
     Farbwechsel: die mittlere Spalte reagierte 140 ms, die rechte 280 ms zu
     spät auf den Zeiger. Das war die „Verzögerung“, nicht die Rechenlast. */
  transition:clip-path 1s var(--ease) var(--auf,0s),
             filter .26s var(--ease),
             opacity .26s var(--ease);
  will-change:filter,opacity}
.arc-leistung.arc-sicht .arc-l-fenster{clip-path:inset(0 0 0 0)}
.arc-leistung:nth-child(2) .arc-l-fenster{--auf:.14s}
.arc-leistung:nth-child(3) .arc-l-fenster{--auf:.28s}
/* Die Spalte, auf der der Zeiger steht, ist ausgewählt — und das muss man am
   Bild sehen, nicht nur an der Linie. In Ruhe liegt das Panorama verblasst
   und fast farblos da; ausgewählt steht es unbearbeitet in seiner
   Originalfarbe.
   Gekoppelt wird zusätzlich an data-offen, den Zustand, den die Seite selbst
   für „ausgewählt" führt: sobald die Tafel aufgeklappt ist, liegt sie über
   der Spalte und schluckt :hover — dann fiel das Bild vorher wieder in sein
   Grau zurück, genau in dem Moment, in dem man die Preise liest. */
.arc-leistung:hover .arc-l-fenster,
.arc-leistung:focus-within .arc-l-fenster,
.arc-leistungen[data-offen="1"] > .arc-leistung:nth-child(1) .arc-l-fenster,
.arc-leistungen[data-offen="2"] > .arc-leistung:nth-child(2) .arc-l-fenster,
.arc-leistungen[data-offen="3"] > .arc-leistung:nth-child(3) .arc-l-fenster{
  filter:none;opacity:1}

/* ══ D · Der Prüfbalken über der Fallstudie ════════════════════════════════
   Ein Lichtbalken läuft über die Aufnahme, während man daran vorbeirollt —
   dieselbe Bewegung, die das System macht, wenn es ein Bild abtastet. Er
   liegt ÜBER dem Wischer und nimmt keine Zeigerereignisse an, sonst wäre der
   Griff des Wischers nicht mehr zu fassen. */
.arc-wischer-bild{position:relative}
/* Der waagerechte Lichtbalken, der hier früher über die Aufnahme lief, ist
   entfallen: er hat mit der roten Wischerkante um dieselbe Fläche konkurriert
   und lag als heller Schleier quer im Bild. Eine Bewegung an dieser Stelle
   genügt — die des Nutzers am Griff. */
/* Die zwei Belegbilder decken sich beim Erscheinen auf: das erste von links,
   das zweite von rechts. Der Schnitt macht klar, dass es dieselbe Aufnahme
   ist — die zweite trägt nur die Bewertung darüber. */
.arc-beleg-bild img{clip-path:inset(0 calc((1 - var(--pr-ein,0)) * 100%) 0 0);
  transition:none}
.arc-beleg-bild:last-child img{clip-path:inset(0 0 0 calc((1 - var(--pr-ein,0)) * 100%))}

/* ══ E · Der Maßstab ═══════════════════════════════════════════════════════
   Eine Platte im Raum, kein Bild an der Wand. Beim Heranrollen liegt sie fast
   flach auf dem Tisch — man sieht sie stark verkürzt, wie ein Blatt, das vor
   einem liegt. Während man weiterrollt, richtet sie sich um ihre Unterkante
   auf, bis sie frontal steht. Der Schatten wandert mit und wird länger, der
   Lichtstreifen über der Fläche wird schmaler: beides folgt demselben Winkel,
   deshalb liest man die Bewegung als Körper und nicht als Trick.

   Der Winkel hängt an --pr-ein (Rollstrecke), die Neigung zusätzlich an
   --mx/--my (Zeiger, aus premium.js). Ohne Zeiger und ohne Rollen steht die
   Platte einfach gerade. */
.arc-mass-buehne{position:relative;
  margin:clamp(48px,7.5vh,100px) 0 clamp(38px,6vh,72px);
  height:clamp(190px,28vh,320px);
  perspective:1150px;perspective-origin:50% 34%}
.arc-mass-platte{position:absolute;inset:0;transform-style:preserve-3d;
  transform-origin:50% 94%;
  --kipp:calc((1 - var(--pr-ein,0)) * 62deg);
  transform:
    rotateX(calc(var(--kipp) + var(--my,0) * -5deg))
    rotateY(calc(var(--mx,0) * 7deg))
    scale(calc(.93 + var(--pr-ein,0) * .07));
  transition:transform .3s cubic-bezier(.22,.72,.2,1)}
.arc-mass-platte .pr-b{position:absolute;inset:0;border:0;border-radius:2px;
  background-color:transparent;
  background-image:
    linear-gradient(calc(104deg + var(--pr-ein,0) * 26deg),
      transparent 26%,
      rgba(255,252,244,calc(.46 - var(--pr-ein,0) * .34)) 45%,
      transparent 64%),
    var(--bild,var(--pr-platz));
  background-size:cover,cover;
  background-position:50% 50%,50% 46%;
  /* Die letzte Lage ist die Materialstärke: eine harte Kante unter der
     Platte. Ohne sie sieht die Fläche aus wie ein Aufkleber. */
  box-shadow:
    0 calc(14px + var(--pr-ein,0) * 26px) calc(30px + var(--pr-ein,0) * 40px) -18px rgba(22,24,28,.62),
    0 5px 0 -1px #C6C0AF}
.arc-mass-platte .pr-b::after{display:none}
/* Der Aufsetzpunkt: ein weicher Fleck unter der Unterkante, der mit dem
   Aufrichten schmaler und dunkler wird — das, was die Platte am Boden hält. */
.arc-mass-grund{position:absolute;left:50%;bottom:-2%;pointer-events:none;
  width:calc(88% - var(--pr-ein,0) * 18%);height:clamp(14px,2.4vh,26px);
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(24,26,30,calc(.24 + var(--pr-ein,0) * .18)),transparent 72%)}
.arc-ehrlich .arc-block{position:relative}
.arc-ehrlich .arc-block > *{position:relative;z-index:1}

/* ══ Handy ════════════════════════════════════════════════════════════════
   Kein Effekt wird kleiner nachgebaut: was auf der Breite nichts erzählt,
   fällt weg. Übrig bleibt das Bild — die Kacheln behalten ihre Wirkung, die
   Choreografie nicht. */
@media (max-width:767px){
  .pr-horizont{height:clamp(88px,16vh,140px);clip-path:none;
    margin-top:clamp(26px,4vh,40px)}
  .pr-horizont .pr-b{inset:0;transform:none}
  .arc-ab-foto{height:clamp(64px,9vh,96px)}
  .arc-leistungen .arc-leistung .arc-l-fenster{height:clamp(110px,26vw,170px);
    margin-left:calc(-1 * 22px);margin-right:calc(-1 * 22px)}
  .arc-beleg-bild img{clip-path:none}
  /* Auf dem Telefon bleibt die Platte, aber sie kippt nicht: die Verkürzung
     kostet dort nur Höhe und die Neigung hat keinen Zeiger, der sie führt. */
  .arc-mass-buehne{height:clamp(150px,40vw,220px);perspective:none;
    margin:clamp(30px,5vh,48px) 0 clamp(24px,4vh,40px)}
  .arc-mass-platte{transform:none!important}
  .arc-kurs .arc-kurs-foto{aspect-ratio:2/1;height:auto}
}
@media (prefers-reduced-motion:reduce){
  .pr-horizont{clip-path:none}
  .pr-horizont .pr-b{transform:none!important}
  .arc-mass-platte{transform:none!important}
  .arc-beleg-bild img{clip-path:none!important}
  .pr-b::after{animation:none!important}
  .arc-kurs-foto{clip-path:none!important;transition:none!important}
  .arc-ab-foto[data-foto]{transform:none!important}
}

/* ══ F · Die Fotos im Tageslicht ═══════════════════════════════════════════
   Dasselbe Bauteil, andere Welt: auf Papier liegt kein Nachtgrund unter dem
   Foto und kein blaues Licht darüber. Nur die Farbwerte ändern sich, die
   Mechanik bleibt. */
[data-grund="tag"] .pr-b{background-color:var(--dawn-dim);border-color:var(--linie-tag)}
[data-grund="tag"] .pr-b::after{
  background:linear-gradient(100deg,transparent,rgba(255,251,242,.5),transparent)}

/* Die drei Wege. Das Foto sitzt über der Überschrift und wird aufgezogen,
   nachdem die Karte ihre Lage erreicht hat — von derselben Seite, aus der
   die Karte gekommen ist. In Ruhe steht es entsättigt; beim Zeigen kommt es
   in Farbe und rückt näher. */
.arc-kurs-foto{width:100%;aspect-ratio:3/2;margin-bottom:clamp(16px,2vw,24px);
  border-radius:2px;background-size:cover;
  filter:saturate(.5);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .85s var(--ease) .18s,
             background-size .7s var(--ease),filter .5s var(--ease)}
.arc-kurs--unten .arc-kurs-foto{clip-path:inset(100% 0 0 0)}
.arc-kurs--rechts .arc-kurs-foto{clip-path:inset(0 0 0 100%)}
.arc-kurs.arc-sicht .arc-kurs-foto{clip-path:inset(0 0 0 0)}
.arc-kurs:hover .arc-kurs-foto,.arc-kurs:focus-within .arc-kurs-foto{
  background-size:118% auto;filter:saturate(1);
  border-color:color-mix(in oklab,var(--acc,#0E5C9E) 40%,var(--linie-tag))}
.arc-kurs:hover .arc-kurs-foto::after,
.arc-kurs:focus-within .arc-kurs-foto::after{animation:arc-nk-glanz .9s var(--ease) both}

@media (max-width:700px),(pointer:coarse){
  .arc-kurs-foto{aspect-ratio:2/1}
}