/* Arcturis — Startseite: das vollständige Stylesheet.
   Getrennt von der Vorlage, damit Änderungen am Dokumentkopf — Schriften,
   Verweise, Auszeichnung — das Stylesheet nicht mehr berühren können.
   Wird in Astro zu src/styles/start.css. */
:root{
  /* Nacht */
  --n0:#070A14; --n1:#0C1220; --n2:#131C30; --n3:#18233A; --n4:#1C3050;
  /* Tag — Seekartenpapier, immer deckend */
  --dawn:#F0EEE6; --dawn-deep:#E6E3D8; --dawn-dim:#DCD8C9;
  /* Schrift: echte Farben, keine Deckkraftstufen */
  --on-night:#DDE6F2; --on-night-mute:#9AA9C0;
  --on-dawn:#14161A; --on-dawn-mute:#545B66;
  --chrome-hi:#F0EEE6; --chrome:#8A9099; --chrome-lo:#3A4149;
  --papier-hoch:#F7F5EE;
  /* Akzente, je Zustand einer für Nacht und einer für Tag */
  --kalt:#93A0B4; --kalt-tag:#566070;
  --nadel:#59ADEC; --nadel-hell:#83D6FC; --nadel-tag:#0E5C9E;
  --glut:#D9685A; --glut-tag:#A8402C;
  --linie:#22304A;
  --linie-tag:#CCC7B8;
  --ease:cubic-bezier(.22,.61,.36,1);

  --f-b:'Sora','Sora Ersatz','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --f-m:'IBM Plex Mono','Plex Ersatz',ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;

  --t-mark:clamp(.68rem,.62rem + .18vw,.76rem);
  --t-body:clamp(1rem,.96rem + .2vw,1.1rem);
  --t-lead:clamp(1.14rem,1.06rem + .4vw,1.36rem);
  --t-h3:clamp(1.22rem,1.1rem + .6vw,1.6rem);
  --t-h2:clamp(1.8rem,1.4rem + 1.8vw,3.1rem);
  --t-h1:clamp(1.75rem,1.05rem + 1.85vw,3.2rem);
  --t-num:clamp(3rem,2.2rem + 4.4vw,6.5rem);

  --rand:clamp(20px,5vw,72px);
  --spalte:1180px;
  --rose-b:40px; --wm-h:20px;
  --wm-b:calc(var(--wm-h)*11.2872);
  --wm-luft:16px;

}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--n0);color:var(--on-night);font-family:var(--f-b);max-width:100%;
  font-size:var(--t-body);line-height:1.65;
  -webkit-tap-highlight-color:rgba(89,173,236,.3);
  font-variant-numeric:tabular-nums;text-rendering:optimizeLegibility}
img,video,svg{max-width:100%}
h1,h2,h3{font-family:var(--f-b);font-weight:300;text-wrap:balance;margin:0;letter-spacing:-.02em;line-height:1.1}
h3{font-weight:500;letter-spacing:-.01em}
p,li{text-wrap:pretty;overflow-wrap:break-word}
a{color:inherit}
a:hover{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
.arc-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.arc-sprung{position:fixed;top:10px;left:10px;z-index:160;background:var(--dawn);color:var(--on-dawn);
  padding:12px 18px;border-radius:4px;font-size:.9rem;text-decoration:none;transform:translateY(-160%)}
.arc-sprung:focus{transform:none}
:root{transition:--acc 300ms linear}
@media (prefers-reduced-motion:reduce){:root{transition:none}}

/* Der Stern liegt hinter allem: eine feste Ebene, die sich nie mitbewegt */
.arc-himmel{position:fixed;inset:0;z-index:1;pointer-events:none;background:none;
  display:grid;place-items:center;overflow:hidden}
/* Der Stern steht anfangs rechts und wandert beim Wegblenden des Textes
   in die Mitte. Kein Übergang: die Bewegung hängt am Scrollwert. */
.arc-himmel{transform:translate3d(var(--st-ab,0px),0,0) scale(calc(1 - var(--v,0)*0.12))}
.arc-himmel img,.arc-himmel video{grid-area:1/1;
  width:min(72vmin,640px);height:min(72vmin,640px);object-fit:contain;
  transform:translate3d(var(--st-x,0px),var(--st-y,0px),0);
  transition:transform 900ms var(--ease),opacity 900ms var(--ease)}
.arc-himmel video{object-fit:cover;opacity:0;
  -webkit-mask-image:radial-gradient(closest-side,#000 44%,transparent 94%);
  mask-image:radial-gradient(closest-side,#000 44%,transparent 94%)}
.arc-himmel video[data-laeuft="ja"]{opacity:1}
/* Das Standbild ist nur der Ersatz, nicht das Vorschaubild: solange das
   Bewegtbild lädt, bleibt die Fläche leer. Ein riesiges Zeichen, das nach
   zwei Sekunden verschwindet, ist ein Ruck und keine Vorführung. */
.arc-himmel img{opacity:0}
.arc-himmel[data-ersatz="ja"] img{opacity:1}
.arc-feld{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;
  background:var(--n0)}
/* Bewegtbild anhalten: Pflicht nach WCAG 2.2.2, sobald sich etwas länger als
   fünf Sekunden von selbst bewegt. Die Wahl gilt für den ganzen Besuch. */
.arc-halt{position:fixed;right:var(--rand);bottom:20px;z-index:110;
  display:inline-flex;align-items:center;gap:9px;appearance:none;cursor:pointer;
  background:color-mix(in oklab,var(--n0) 72%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid color-mix(in oklab,var(--on-night) 26%,transparent);border-radius:2px;
  padding:8px 13px;color:var(--on-night-mute);
  font-family:var(--f-m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  transition:color 220ms var(--ease),border-color 220ms var(--ease),opacity 120ms linear}
.arc-halt:hover{color:var(--on-night);border-color:var(--nadel)}
.arc-halt i{width:9px;height:9px;flex:0 0 auto;background:currentColor;
  clip-path:polygon(0 0,3px 0,3px 100%,0 100%,0 0,6px 0,9px 0,9px 100%,6px 100%)}
.arc-halt[data-still="ja"] i{clip-path:polygon(0 0,9px 50%,0 100%)}
.arc-halt[hidden]{display:none}
.arc-halt[data-fern="ja"]{opacity:0;pointer-events:none}
.arc-halt:focus-visible{opacity:1;pointer-events:auto;
  outline:2px solid var(--nadel-hell);outline-offset:3px}

/* Korn. Das Papier ist sonst ein einziger flacher Wert und liest sich digital;
   ein feines Korn gibt ihm Zahn. Fest, sehr schwach, nie bewegt. */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;
  mix-blend-mode:multiply;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23k)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){body::after{opacity:.04}}


/* Zeichen */
.arc-rose{display:block;object-fit:contain}

/* Enthüllen */
.arc-js .arc-enth{opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease);transition-delay:var(--d,0ms)}
.arc-js .arc-enth.arc-sicht{opacity:1;transform:none}

/* Kopfleiste: läuft immer mit */
/* Graphitglas, unabhängig vom Abschnitt darunter. Das Zeichen ist für Dunkel
   gezeichnet — Chrom und der blaue I-Balken brauchen einen dunklen Grund; auf
   Papier verliert die Leiste jede Präsenz. Ganz oben ist sie durchsichtig. */
:root{--kopf:#070C1A}
.arc-kopf{position:fixed;top:0;left:0;right:0;z-index:100;height:88px;
  transition:height 300ms var(--ease),background-color 300ms var(--ease);
  background:transparent;color:var(--on-night)}
[data-kopf="s1"] .arc-kopf{
  background:linear-gradient(180deg,
      color-mix(in oklab,var(--kopf) 92%,transparent) 0%,
      color-mix(in oklab,var(--kopf) 78%,transparent) 100%);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);
  box-shadow:0 1px 0 rgba(214,230,250,.13) inset,
    0 -1px 0 rgba(214,230,250,.04) inset,
    0 22px 52px -34px rgba(2,4,9,.9)}
/* Die Haarlinie ist die Anzeige: sie trägt den Akzent, aber erst eingezogen */
.arc-kopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acc);
  opacity:0;transition:opacity 300ms var(--ease)}
[data-kopf="s1"] .arc-kopf::after{opacity:1}
[data-kopf="s1"] .arc-kopf{height:64px}
.arc-kopf-innen{max-width:none;margin:0;height:100%;padding:0 var(--rand);
  display:flex;align-items:center;justify-content:space-between;gap:24px}

.arc-marke{position:relative;display:flex;align-items:center;gap:0;text-decoration:none;flex:0 0 auto}
/* Die Marke ist der Weg zur Startseite. Ohne jede Rückmeldung hält man sie für
   ein Bild — deshalb ein zurückhaltender Hinweis beim Überfahren: die Rose
   nimmt eine Spur zu, mehr nicht. Ein Unterstrich unter einem Zeichen wäre
   falsch. */
.arc-marke .arc-rose{transition:transform 320ms var(--ease),filter 320ms var(--ease)}
.arc-marke:hover .arc-rose{transform:scale(1.06);
  filter:drop-shadow(0 0 10px color-mix(in oklab,var(--acc) 45%,transparent))}
.arc-marke:focus-visible{outline:2px solid var(--acc);outline-offset:6px;border-radius:2px}
.arc-marke .arc-rose{width:var(--rose-b);height:var(--rose-b)}
.arc-wortmarke{display:block;height:var(--wm-h);margin-inline-start:var(--wm-luft);
  width:var(--wm-b);max-width:var(--wm-b);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0 62%,transparent 82%);
  mask-image:linear-gradient(90deg,#000 0 62%,transparent 82%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;
  -webkit-mask-position:0 0;mask-position:0 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  opacity:1;
  transition:-webkit-mask-position 640ms cubic-bezier(.45,.05,.25,1),
    mask-position 640ms cubic-bezier(.45,.05,.25,1),
    opacity 520ms linear 120ms,
    max-width 460ms cubic-bezier(.5,.05,.2,1) 420ms,
    margin-inline-start 460ms cubic-bezier(.5,.05,.2,1) 420ms}
.arc-wortmarke img{display:block;width:var(--wm-b);height:var(--wm-h);object-fit:contain}
[data-kopf="s1"] .arc-wortmarke{max-width:0;margin-inline-start:0;opacity:0;
  -webkit-mask-position:100% 0;mask-position:100% 0}

.arc-nav{display:flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0}
.arc-reiter{appearance:none;background:none;border:0;color:var(--on-night-mute);font:inherit;
  font-size:.94rem;padding:12px 12px;white-space:nowrap;min-height:44px;cursor:pointer;position:relative;text-decoration:none;
  display:inline-flex;align-items:center;transition:transform 320ms var(--ease)}
.arc-reiter::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1px;background:var(--acc);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 180ms var(--ease)}
.arc-reiter:hover,.arc-reiter[aria-expanded="true"]{color:var(--acc)}
.arc-reiter:hover::after,.arc-reiter[aria-expanded="true"]::after{transform:scaleX(1)}
/* ── Wo man steht ──────────────────────────────────────────────────────────
   Zwei Stufen, weil die Leiste zwei Arten von Reitern hat:
   aria-current="page"  der Reiter IST die Seite (Website-Analyse).
   data-hier="ja"       der Reiter ist die Gruppe, in der die Seite liegt
                        (Leistungen, wenn man auf Websites steht). Ein Knopf,
                        der eine Klapptafel öffnet, kann kein aria-current
                        tragen — er ist nicht das Ziel. Die Auszeichnung ist
                        deshalb rein sichtbar; der Ort selbst steht per
                        aria-current am Verweis in der Tafel.
   Die Gruppe wird schwächer gezeichnet als die Seite: durchgezogene Linie,
   aber Schriftfarbe nur aufgehellt statt auf den Akzent. Sonst streiten zwei
   gleich starke Marken um dieselbe Aussage. */
.arc-reiter[aria-current="page"]{color:var(--acc)}
.arc-reiter[aria-current="page"]::after{transform:scaleX(1)}
.arc-reiter[data-hier="ja"]{color:var(--chrome-hi)}
.arc-reiter[data-hier="ja"]::after{transform:scaleX(1);
  background:color-mix(in oklab,var(--acc) 45%,transparent)}
.arc-reiter[data-hier="ja"]:hover::after,
.arc-reiter[data-hier="ja"][aria-expanded="true"]::after{background:var(--acc)}
/* Zurückhaltend: Haarlinie in der Schriftfarbe, kein Leuchten.
   Beim Überfahren läuft die Fläche von unten ein und die Schrift kippt auf den Grund. */
.arc-anfrage{margin-left:12px;padding:0 16px;min-height:42px;flex:0 0 auto;
  border:1px solid color-mix(in oklab,currentColor 20%,transparent);
  color:inherit;text-decoration:none;
  font-family:var(--f-m);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  position:relative;display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  background-image:linear-gradient(90deg,var(--acc),var(--acc));
  background-repeat:no-repeat;background-position:0 50%;background-size:0 100%;
  transition:border-color 300ms var(--ease),background-size 420ms cubic-bezier(.5,.05,.2,1),
    color 220ms var(--ease) 60ms}
.arc-anfrage:hover{border-color:var(--acc);background-size:100% 100%;color:var(--kopf)}
.arc-anfrage i{font-style:normal;font-family:var(--f-m);font-size:1em;position:relative;z-index:1;
  transform:translateX(0);transition:transform 300ms var(--ease),color 200ms var(--ease)}
.arc-anfrage:hover i{transform:translateX(3px)}
.arc-anfrage:hover i,.arc-anfrage:hover span{color:var(--kopf)}
.arc-anfrage span{letter-spacing:inherit}
.arc-anfrage span{position:relative;z-index:1;transition:color 200ms var(--ease)}

.arc-tafel{position:absolute;left:0;right:0;top:100%;display:grid;grid-template-rows:0fr;
  background:var(--kopf);transition:grid-template-rows 300ms var(--ease)}
.arc-tafel[data-offen="ja"]{grid-template-rows:1fr;border-bottom:1px solid var(--linie)}
.arc-tafel-innen{overflow:hidden;display:grid}
.arc-tafel-seite{grid-area:1/1;max-width:none;margin:0;width:100%;padding:34px var(--rand) 40px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 40px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity 180ms var(--ease),visibility 180ms,transform 180ms var(--ease)}
.arc-tafel-seite[data-aktiv="ja"]{opacity:1;visibility:visible;transform:none}
.arc-tafel-seite a{display:block;padding:11px 0;min-height:44px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--linie);font-size:.98rem}
.arc-tafel-seite a:hover{color:var(--acc)}
/* Die Seite, auf der man steht, ist in der Klapptafel unterstrichen. */
.arc-tafel-seite a[aria-current="page"]{color:var(--acc);border-bottom-color:var(--acc)}
.arc-menuknopf{display:none;appearance:none;background:none;border:0;color:inherit;font:inherit;
  width:44px;height:44px;padding:0;margin-right:-10px;cursor:pointer;position:relative}
.arc-menuknopf i{position:absolute;left:11px;width:22px;height:1px;background:currentColor;
  transition:transform 380ms var(--ease),opacity 200ms var(--ease),width 380ms var(--ease)}
.arc-menuknopf i:nth-child(1){top:18px}
.arc-menuknopf i:nth-child(2){top:25px;width:14px}
.arc-menuknopf:hover i:nth-child(2){width:22px}
.arc-menuknopf[aria-expanded="true"] i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.arc-menuknopf[aria-expanded="true"] i:nth-child(2){width:22px;transform:translateY(-3.5px) rotate(-45deg)}

.arc-schleier{position:fixed;inset:56px 0 0;z-index:105;background:rgba(3,5,10,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 380ms var(--ease),visibility 380ms}
[data-menu="auf"] .arc-schleier{opacity:1;visibility:visible;pointer-events:auto}
/* Die Schublade nimmt denselben Graphitgrund wie die Leiste */
.arc-mobil{position:fixed;top:56px;right:0;bottom:0;width:min(84vw,360px);z-index:110;
  background:var(--kopf,var(--n1));border-left:1px solid var(--linie);padding:0;
  display:flex;flex-direction:column;overflow-y:auto;color:var(--on-night);
  transition:background-color 80ms linear,color 90ms linear,
    transform 460ms cubic-bezier(.24,.7,.2,1),visibility 460ms;
  transform:translateX(100%);visibility:hidden}
.arc-mobil[data-offen="ja"]{transform:none;visibility:visible}
.arc-mobil-liste{padding:8px clamp(20px,6vw,28px) 48px}
.arc-mobil-liste > *{opacity:0;transform:translateY(8px);
  transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.arc-mobil[data-offen="ja"] .arc-mobil-liste > *{opacity:1;transform:none}
.arc-mobil[data-offen="ja"] .arc-mobil-liste > :nth-child(1){transition-delay:150ms}
.arc-mobil[data-offen="ja"] .arc-mobil-liste > :nth-child(2){transition-delay:195ms}
.arc-mobil[data-offen="ja"] .arc-mobil-liste > :nth-child(3){transition-delay:240ms}
.arc-mobil[data-offen="ja"] .arc-mobil-liste > :nth-child(4){transition-delay:285ms}
.arc-mobil[data-offen="ja"] .arc-mobil-liste > :nth-child(5){transition-delay:330ms}
.arc-mobil details{border-bottom:1px solid var(--linie)}
.arc-mobil summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;
  justify-content:space-between;font-size:1.1rem}
.arc-mobil summary::-webkit-details-marker{display:none}
.arc-mobil summary::after{content:"+";font-family:var(--f-m);color:var(--acc)}
.arc-mobil details[open] summary::after{content:"–"}
.arc-mobil-liste a{display:flex;align-items:center;min-height:56px;text-decoration:none;
  border-bottom:1px solid var(--linie);font-size:1.05rem}
.arc-mobil-liste details a{padding-left:16px;color:var(--on-night-mute);font-size:1rem}
.arc-mobil-liste a[aria-current="page"]{color:var(--acc)}
/* Die aufgeklappte Gruppe, in der die Seite liegt. */
.arc-mobil details[data-hier="ja"] > summary{color:var(--chrome-hi)}

/* Grundraster: jeder Abschnitt trägt seinen eigenen Grund */
main{position:relative;z-index:2;overflow-x:clip}
[data-grund]{position:relative;background:var(--eigen)}
[data-grund="tag"]{--eigen:var(--dawn);color:var(--on-dawn)}
/* Zweiter Papierton. Vier Abschnitte auf demselben Wert lesen sich als eine
   einzige lange Fläche — der tiefere Ton gibt der hellen Seite Takt. */
[data-grund="tag"][data-ton="tief"]{--eigen:var(--dawn-deep)}
/* Dritter Ton für 02: die erste helle Fläche steht am tiefsten und wird nach
   unten heller. Der Weg aus der Nacht ins Papier läuft dadurch gerichtet. */
[data-grund="tag"][data-ton="dunkel"]{--eigen:var(--dawn-dim);--linie-tag:#C4BEAB}
[data-grund="tag"][data-ton="tief"] .arc-leistung,
[data-grund="tag"][data-ton="tief"] .arc-kurs{background:var(--dawn)}
[data-grund="nacht"][data-durch="0"]{--eigen:transparent}
[data-grund="nacht"][data-durch="92"]{--eigen:var(--n0)}
/* Drei Blätter übereinander: der Beleg schiebt sich über das Papier,
   danach schiebt sich das Papier wieder über den Beleg. */
/* 02 gehört nicht mehr dazu. Radius und Schatten waren die Kante des
   überschobenen Blattes — ohne die Überschiebung (siehe margin-top weiter
   unten) sind sie nur noch ein dunkler Streifen und eine harte Naht zwischen
   zwei Flächen DERSELBEN Farbe. Der Abschnitt schließt jetzt bündig an das
   Kästchen an; der Farbwechsel des Papiers kommt erst danach, nach der
   dunklen Tafel. */
[data-block="02-befund"]{z-index:3;box-shadow:none;border-radius:0}
[data-block="03-leistungen"]{z-index:2}
[data-block="04-beleg"],[data-block="05-ehrlich"],[data-block="07-fuss"]{margin-top:-42svh;
  transform:translate3d(0,calc(var(--ueber,1)*42svh),0);
  border-top-left-radius:calc(var(--ueber,1)*22px);
  border-top-right-radius:calc(var(--ueber,1)*22px)}
[data-block="04-beleg"]{z-index:4;box-shadow:0 -26px 70px rgba(3,5,10,.62)}
/* Beim Papier schiebt sich erst eine Handbreit Fläche herein, dann kommt der Satz */
[data-block="05-ehrlich"]{padding-top:clamp(48px,11svh,140px)}
[data-block="05-ehrlich"]{z-index:5;box-shadow:0 -26px 70px rgba(3,5,10,.4)}
[data-block="07-fuss"]{z-index:6;box-shadow:0 -26px 70px rgba(3,5,10,.62)}
[data-block="05-ehrlich"] > .arc-block{padding-top:0}
@media (max-width:639px){
  [data-block="04-beleg"],[data-block="05-ehrlich"],[data-block="07-fuss"]{margin-top:-24svh;
    transform:translate3d(0,calc(var(--ueber,1)*24svh),0)}
}
[data-grund="nacht"][data-durch="96"]{--eigen:color-mix(in oklab,var(--n0) 96%,transparent)}
[data-grund="nacht"][data-durch="100"]{--eigen:var(--n0)}
/* Das Kästchen: es liegt klein im Sternenfeld und wächst beim Scrollen auf Vollbild.
   Die Information steht von Anfang an darin, nur eben klein. */
/* Die Höhe ist der Rollweg des klebenden Kästchens plus seine eigene Höhe.
   Die Choreografie selbst braucht nur eine halbe Fensterhöhe (siehe start.js:
   kp läuft über G.h * 0,5) — die restlichen 108 svh waren früher von Abschnitt
   02 überschoben und damit unsichtbar. Ohne die Überschiebung wären sie
   Leerlauf: man rollt, und nichts geschieht. Bleiben 50 svh Choreografie und
   15 svh Standzeit zum Lesen. */
.arc-buehne{position:relative;z-index:1;height:165svh}
@media (max-width:639px){.arc-buehne{height:160svh}}
.arc-buehne-fest{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.arc-glut{position:absolute;width:150vmax;height:150vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,
    color-mix(in oklab,var(--dawn) 30%,transparent) 0%,
    color-mix(in oklab,var(--dawn) 10%,transparent) 34%,
    transparent 72%);
  opacity:calc(var(--kn,0)*.9);filter:blur(30px)}
/* Grundton der Zoomfläche: vier Proben, umschaltbar über data-probe.
   Jede Probe bringt ihren eigenen Akzent, ihre Linie und ihre Schriftfarben mit. */
.arc-kasten[data-probe="leinen"]{--kg:#CFC6AE;--kl:#BDB49C;--ka:#0E5C9E;--kt:#14161A;--km:#545B66}
.arc-kasten[data-probe="ton"]{--kg:#C9B4A4;--kl:#B69F8E;--ka:#8A3B26;--kt:#14161A;--km:#5A4C44}
.arc-kasten[data-probe="salbei"]{--kg:#9DA79A;--kl:#8C9689;--ka:#1F4A3C;--kt:#12160F;--km:#414A3E}
.arc-kasten[data-probe="sepia"]{--kg:#5E564A;--kl:#756C5E;--ka:#E0A46A;--kt:#F2EFE6;--km:#C4BCAD}
/* Tiefes Blau: eine Stufe über der Nacht, damit der Zoom nicht ins Papier,
   sondern in eine eigene Tafel führt — und der Stern darüber weiterträgt. */
.arc-kasten[data-probe="tiefblau"]{--kg:#152238;--kl:#2C3B56;--ka:#7FB4E8;--kt:#E7EEF8;--km:#A3B2C8}
.arc-kasten{--acc:var(--ka,#0E5C9E);--linie-tag:var(--kl,#C4BEAB);
  --on-dawn:var(--kt,#14161A);--on-dawn-mute:var(--km,#545B66);
  position:relative;width:100vw;height:100svh;background:var(--kg,var(--dawn-dim));color:var(--kt,var(--on-dawn));
  transform:scale(var(--k,.26));transform-origin:50% 50%;
  border-radius:calc((1 - var(--kn,0))*18px/var(--k,.74));
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 0 calc(40px/var(--k,.74)) rgba(3,5,10,.45)}
.arc-kasten-innen{width:100%;max-width:none;
  padding-inline:max(var(--rand),calc((100% - var(--spalte))/2));
  display:grid;grid-template-columns:minmax(0,1fr);row-gap:0;justify-items:stretch}
.arc-kasten{align-items:center;padding-block:clamp(44px,7svh,92px) clamp(26px,4svh,56px)}
/* Am Anfang steht nur der Titel. Beim Reinzoomen kommen Aufschrift, Lead,
   dann die Grafik, zuletzt die ersten Zeilen darunter. */
.arc-kasten .arc-aufschrift{opacity:calc((var(--kn,0) - .04)/.26)}
.arc-kasten .arc-lauf--lead{max-width:76ch;font-size:var(--t-body);line-height:1.5;
  opacity:calc((var(--kn,0) - .14)/.26)}
.arc-kasten .arc-peil-halter{margin:clamp(26px,4.4svh,58px) 0 clamp(6px,1svh,14px);width:100%;overflow:visible;
  opacity:calc((var(--kn,0) - .30)/.34)}
.arc-kasten .arc-peil{width:100%;max-width:none;height:auto;max-height:min(520px,40svh)}
.arc-kasten-nach{margin:0;max-width:74ch;font-size:var(--t-lead);line-height:1.45;
  opacity:calc((var(--kn,0) - .62)/.28)}
.arc-kasten .arc-peilliste,.arc-kasten .arc-pl-lage{display:none}
.arc-kasten .arc-h2{margin-bottom:6px;max-width:34ch;
  font-size:clamp(1.42rem,1.02rem + 1.2vw,2.2rem);line-height:1.12}
.arc-kasten .arc-lauf{margin:0}
.arc-kasten .arc-aufschrift{margin-bottom:10px}
/* Ab mittlerer Breite: die Peilung nimmt die ganze linke Fläche, der Absatz
   dazu steht rechts daneben statt darunter — sonst drückt er die Grafik klein. */
@media (min-width:900px){
  .arc-kasten-innen{grid-template-columns:minmax(0,1fr) minmax(230px,326px);
    column-gap:clamp(26px,3.2vw,60px)}
  .arc-kasten .arc-aufschrift,.arc-kasten .arc-h2,
  .arc-kasten .arc-lauf--lead,.arc-kasten .arc-eckdaten{grid-column:1/-1}
  .arc-kasten .arc-eckdaten{grid-row:4}
  .arc-kasten .arc-peil-halter{grid-column:1;grid-row:5}
  .arc-kasten-nach{grid-column:2;grid-row:5;align-self:center;max-width:none;
    padding-bottom:clamp(8px,1.4svh,20px)}
  .arc-kasten .arc-peil{max-height:min(620px,44svh)}
}

/* Dämmerung: 180 px Übergang statt Kante.
   Der Abschnitt davor hält die Zone frei, damit kein Text darunter liegt. */
[data-daemmerung]::before{content:"";position:absolute;left:0;right:0;top:-180px;height:180px;
  background:linear-gradient(180deg,transparent 0,var(--eigen) 100%);pointer-events:none}
[data-block]:has(+ [data-daemmerung]){padding-bottom:max(216px,clamp(76px,12vh,150px))}
main:has(+ [data-daemmerung]) > [data-block]:last-child{padding-bottom:max(216px,clamp(76px,12vh,150px))}

/* Tagabschnitte: eigene Schriftfarben, nie Deckkraft */
[data-grund="tag"] .arc-lauf,[data-grund="tag"] .arc-mono-klein,
[data-grund="tag"] .arc-einstieg-text p,[data-grund="tag"] .arc-schritt p,
[data-grund="tag"] .arc-leistung p:not(.arc-lt-titel):not(.arc-l-hinweis),[data-grund="tag"] .arc-kurs p,
/* Die Peilliste setzt ihre Farben selbst (.arc-peilliste .arc-pl-text, weiter
   unten in dieser Datei) und stand damit bei gleicher Spezifität HINTER dieser
   Regel — auf Papier las sich der Text mit Kontrast 1,40, also gar nicht. Der
   Listenname steht deshalb hier mit drin. */
[data-grund="tag"] .arc-peilliste .arc-pl-text,
[data-grund="tag"] .arc-pl-text,[data-grund="tag"] .arc-pl-lage span{color:var(--on-dawn-mute)}
[data-grund="tag"] .arc-lauf--lead,[data-grund="tag"] .arc-lauf--stark,
[data-grund="tag"] .arc-lauf strong,[data-grund="tag"] .arc-hervor,
[data-grund="tag"] .arc-h2,[data-grund="tag"] h3,[data-grund="tag"] .arc-verweis,
[data-grund="tag"] .arc-pl-lage,[data-grund="tag"] .arc-preis,
[data-grund="tag"] .arc-leistung p strong{color:var(--on-dawn)}
[data-grund="tag"] .arc-leistungen{background:none}
[data-grund="tag"] .arc-kurs{background:var(--papier-hoch);border-color:var(--linie-tag);
  border-top:2px solid var(--acc);box-shadow:0 1px 0 var(--dawn) inset}
[data-grund="tag"] .arc-kurs:hover{background:var(--dawn-deep);border-color:var(--acc)}
[data-grund="tag"] .arc-schiene,[data-grund="tag"] .arc-peilliste li,
[data-grund="tag"] .arc-mobil-liste a{background-color:initial;border-color:var(--linie-tag)}
[data-grund="tag"] .arc-schiene{background:var(--linie-tag)}
[data-grund="tag"] .arc-mark{background:var(--on-dawn-mute)}
[data-grund="tag"] .arc-peil text{fill:var(--on-dawn-mute)}
[data-grund="tag"] .arc-peil .arc-lage{fill:var(--on-dawn)}
[data-grund="tag"] .arc-peil .arc-lage-klein{fill:var(--on-dawn-mute)}
[data-grund="tag"] :focus-visible{outline-color:var(--acc)}
.arc-block--dicht{padding-block-start:clamp(22px,3vh,40px)!important}
/* Abschnitt 02 schob sich früher eine Fensterhöhe weit über die Bühne. Das
   war die Naht zwischen Kästchen und Papier — jetzt trägt die dunkle Tafel der
   Analyse den Übergang selbst: sie kommt hoch, und erst in der Fenstermitte
   öffnet sie sich zum Rand. Zwei Übergänge an einer Stelle heben sich auf.
   Betrifft NUR diesen Abschnitt; alle anderen Überschiebungen bleiben. */
main [data-block="02-befund"]{margin-top:0}
.arc-block{width:100%;margin:0;position:relative;
  padding-block:clamp(76px,12vh,150px);
  padding-inline:max(var(--rand),calc((100% - var(--spalte))/2))}
.arc-aufschrift{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc);margin:0 0 22px;transition:color 120ms linear}
.arc-h2{font-size:var(--t-h2);line-height:1.08;margin:0 0 32px;max-width:20ch}
.arc-lauf{max-width:66ch;margin:0 0 22px;color:var(--on-night-mute)}
.arc-lauf--lead{font-size:var(--t-lead);line-height:1.5;color:var(--on-night)}
.arc-lauf strong{color:var(--on-night);font-weight:500}
.arc-lauf--stark{color:var(--on-night)}
.arc-hervor{max-width:60ch;font-size:var(--t-lead);line-height:1.45;margin:36px 0;padding-left:20px;
  border-left:2px solid var(--acc);color:var(--on-night)}
.arc-mono-klein{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.06em;
  color:var(--on-night-mute);margin:28px 0 0}
.arc-verweis{font-size:1.02rem;text-decoration:none;color:var(--on-night);
  position:relative;display:inline-block;padding:8px 0;min-height:44px;line-height:28px}
.arc-verweis::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:color-mix(in oklab,var(--acc) 40%,transparent);
  transition:background-color 200ms var(--ease)}
.arc-verweis:hover::after{background:var(--acc)}

/* 01 Einstieg */
.arc-einstieg{position:sticky;top:0;min-height:100svh;z-index:0}
.arc-einstieg-innen{min-height:100svh;max-width:var(--spalte);margin:0 auto;
  padding:clamp(104px,15svh,150px) var(--rand) clamp(64px,10svh,110px);display:grid;align-content:center;
  transform:scale(var(--e-s,1));opacity:var(--e-o,1);transform-origin:50% 40%}
.arc-einstieg-text{max-width:38ch}
.arc-h1{font-size:var(--t-h1);line-height:1.06;margin:0 0 26px;max-width:19ch;font-weight:300}
.arc-h1 .arc-satz{display:block}
.arc-h1 .arc-satz1{color:var(--on-night-mute)}
.arc-h1 .arc-satz2{color:var(--on-night)}
.arc-wort{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.arc-wort span{display:inline-block;animation:arc-wort-auf 560ms var(--ease) both}
@keyframes arc-wort-auf{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
.arc-satz1 .arc-wort:nth-child(1) span{animation-delay:260ms}
.arc-satz1 .arc-wort:nth-child(2) span{animation-delay:305ms}
.arc-satz1 .arc-wort:nth-child(3) span{animation-delay:350ms}
.arc-satz1 .arc-wort:nth-child(4) span{animation-delay:395ms}
.arc-satz1 .arc-wort:nth-child(5) span{animation-delay:440ms}
.arc-satz1 .arc-wort:nth-child(6) span{animation-delay:485ms}
.arc-satz1 .arc-wort:nth-child(7) span{animation-delay:530ms}
.arc-satz1 .arc-wort:nth-child(8) span{animation-delay:575ms}
.arc-satz1 .arc-wort:nth-child(9) span{animation-delay:620ms}
.arc-satz1 .arc-wort:nth-child(10) span{animation-delay:665ms}
.arc-satz2 .arc-wort:nth-child(1) span{animation-delay:760ms}
.arc-satz2 .arc-wort:nth-child(2) span{animation-delay:790ms}
.arc-satz2 .arc-wort:nth-child(3) span{animation-delay:820ms}
.arc-satz2 .arc-wort:nth-child(4) span{animation-delay:850ms}
.arc-satz2 .arc-wort:nth-child(5) span{animation-delay:880ms}
.arc-einstieg-text p{max-width:52ch;color:var(--on-night-mute);margin:0}

/* 02 Kreuzpeilung */
.arc-peil-halter{margin:52px 0 40px;overflow-x:auto}
.arc-peil{display:block;width:100%;max-width:680px;height:auto}
.arc-peil .arc-strahl{fill:none;stroke:var(--acc);stroke-width:1.5;stroke-dasharray:1}
.arc-peil .arc-s1{stroke-dashoffset:calc(1 - var(--p1,0))}
.arc-peil .arc-s2{stroke-dashoffset:calc(1 - var(--p2,0))}
.arc-peil .arc-s3{stroke-dashoffset:calc(1 - var(--p3,0))}
.arc-peil .arc-dreieck{fill:var(--acc);opacity:calc(var(--pd,0)*.22);stroke:var(--acc);stroke-width:1}
.arc-peil .arc-fehlerring{fill:none;stroke:var(--acc);stroke-width:1;stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--pr,0));opacity:.5}
.arc-peil text{font-family:var(--f-m);font-size:13px;fill:var(--on-night-mute);letter-spacing:.08em;
  text-transform:uppercase;opacity:var(--pt,0)}
.arc-peil .arc-lage{font-family:var(--f-b);font-size:16px;fill:var(--on-night);letter-spacing:0;text-transform:none}
.arc-peil .arc-lage-klein{font-family:var(--f-b);font-size:13px;fill:var(--on-night-mute);letter-spacing:0;text-transform:none}
.arc-peilliste{display:none;margin:40px 0 32px;padding:0;list-style:none}
.arc-peilliste li{padding:14px 0;border-bottom:1px solid var(--linie)}
.arc-peilliste .arc-pl-name{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);display:flex;align-items:center;gap:12px}
.arc-peilliste .arc-pl-linie{display:block;width:40px;height:1px;background:var(--acc);
  transform:scaleX(var(--p1,0));transform-origin:0 50%;transition:transform 320ms var(--ease)}
.arc-peilliste li:nth-child(2) .arc-pl-linie{transform:scaleX(var(--p2,0));transform-origin:100% 50%}
.arc-peilliste li:nth-child(3) .arc-pl-linie{transform:scaleX(var(--p3,0))}
.arc-peilliste .arc-pl-text{display:block;margin-top:6px;color:var(--on-night-mute)}
.arc-pl-lage{margin-top:22px;font-size:var(--t-lead);color:var(--on-night);display:none}
.arc-pl-lage span{display:block;font-size:var(--t-body);color:var(--on-night-mute)}

/* 02b Ablauffolge */
.arc-ablauf{position:relative;height:250svh}
.arc-ablauf-fest{position:sticky;top:0;height:100svh;display:grid;align-content:center;
  max-width:var(--spalte);margin:0 auto;padding:clamp(88px,11vh,120px) var(--rand) clamp(56px,8vh,90px)}
.arc-ablauf:has(+ [data-daemmerung]){padding-bottom:0}
.arc-ablauf-raster{--ab-col:52px;--ab-gap:clamp(24px,4vw,56px);
  display:grid;grid-template-columns:var(--ab-col) minmax(0,1fr) minmax(240px,300px);
  gap:0 var(--ab-gap);
  align-items:stretch}
.arc-schiene{position:relative;width:1px;justify-self:center;background:var(--linie-tag)}
.arc-schiene-fuell{position:absolute;left:0;top:0;width:1px;background:var(--acc);
  height:100%;transform:scaleY(var(--ab-p,0));transform-origin:50% 0}
.arc-marken{position:absolute;left:50%;top:0;width:11px;height:100%;transform:translateX(-50%)}
.arc-mark{position:absolute;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--on-dawn-mute);opacity:.45;transform:translate(-50%,-50%) scale(1);
  box-shadow:0 0 0 4px var(--dawn);
  transition:background-color 260ms var(--ease),opacity 260ms var(--ease),transform 320ms var(--ease)}
.arc-mark:nth-child(1){top:0}
.arc-mark:nth-child(2){top:33.333%}
.arc-mark:nth-child(3){top:66.666%}
.arc-mark:nth-child(4){top:100%}
.arc-mark[data-an="ja"]{background:var(--acc);opacity:1;transform:translate(-50%,-50%) scale(1.3)}
.arc-schritte{position:relative;overflow:hidden;height:clamp(200px,30svh,280px)}
.arc-streifen{display:grid;grid-auto-rows:clamp(200px,30svh,280px);margin:0;padding:0;list-style:none;
  transform:translate3d(0,calc(var(--ab-i,0)*-1*clamp(200px,30svh,280px)),0);
  transition:none}
.arc-schritt{display:grid;align-content:center;gap:12px;opacity:.3;
  transition:opacity 420ms var(--ease)}
.arc-schritt[data-an="ja"]{opacity:1}
.arc-schritt-nr{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.18em;color:var(--acc)}
.arc-schritt h3{font-size:var(--t-h3)}
.arc-schritt p{margin:0;color:var(--on-dawn-mute);max-width:46ch}

/* I10 Ablauftafel: vier Zeichnungen, die mit dem Streifen überblenden.
   Die Deckkraft rechnet direkt aus --ab-i, deshalb läuft sie stufenlos mit. */
/* Alle vier Bilder liegen in derselben Rasterzelle: die Tafel wächst mit dem
   höchsten, statt es abzuschneiden. Das Überblenden bleibt unverändert. */
.arc-ab-tafel{position:relative;display:grid;min-height:clamp(200px,30svh,280px);
  border:1px solid var(--linie-tag);background:var(--papier-hoch)}
.arc-ab-bild{grid-area:1/1;padding:20px 20px 18px;display:grid;align-content:center;gap:12px;
  min-width:0;
  opacity:calc(1 - max((var(--ab-i,0) - var(--k,0)),(var(--k,0) - var(--ab-i,0))));
  transform:translateY(calc((var(--ab-i,0) - var(--k,0))*-12px))}
.arc-ab-marke{margin:0;font-family:var(--f-m);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc)}
.arc-ab-fuss{margin:0;font-family:var(--f-m);font-size:.68rem;letter-spacing:.06em;line-height:1.5;
  color:var(--on-dawn-mute);padding-top:11px;border-top:1px solid var(--linie-tag)}
/* 01 zwei Eingabezeilen */
.arc-ab-feld{display:grid;gap:5px}
.arc-ab-feld span{font-family:var(--f-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dawn-mute)}
.arc-ab-feld b{font-weight:400;font-size:.92rem;color:var(--on-dawn);
  padding-bottom:7px;border-bottom:1px solid var(--acc)}
/* 02 drei Richtungen */
.arc-ab-richtung{display:flex;align-items:center;gap:11px;padding:9px 0;flex-wrap:nowrap;
  white-space:nowrap;min-width:0;
  border-top:1px solid var(--linie-tag);font-size:.84rem;color:var(--on-dawn)}
.arc-ab-richtung::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);flex:0 0 auto}
.arc-ab-richtung em{font-style:normal;margin-left:auto;font-family:var(--f-m);font-size:.68rem;
  color:var(--on-dawn-mute)}
/* 03 Rangskala */
.arc-ab-rang{display:grid;gap:0}
.arc-ab-rang > div{display:flex;align-items:center;gap:10px;padding:7px 0;
  flex-wrap:nowrap;white-space:nowrap;min-width:0;
  border-top:1px solid var(--linie-tag);font-family:var(--f-m);font-size:.74rem;
  color:var(--on-dawn-mute)}
.arc-ab-rang > div b{font-weight:500;flex:0 0 auto;min-width:8ch;color:var(--on-dawn-mute)}
.arc-ab-rang > div i{font-style:normal;margin-left:auto;height:7px;background:var(--linie-tag);
  flex:0 1 auto;min-width:16px;width:calc(var(--w,50)*1%);max-width:104px}
.arc-ab-rang > div[data-sie]{color:var(--on-dawn)}
.arc-ab-rang > div[data-sie] b{color:var(--acc)}
.arc-ab-rang > div[data-sie] i{background:var(--acc)}
/* 04 Angebotsblatt */
.arc-ab-blatt{display:grid;gap:0;border:1px solid var(--linie-tag);background:var(--dawn)}
.arc-ab-blatt > div{display:flex;justify-content:space-between;gap:12px;padding:10px 13px;
  font-family:var(--f-m);font-size:.74rem;color:var(--on-dawn-mute)}
.arc-ab-blatt > div + div{border-top:1px solid var(--linie-tag)}
.arc-ab-blatt > div b{font-weight:500;color:var(--on-dawn)}

/* I11 Was es erspart: hundert Teile, vierzehn bleiben für den Menschen */
.arc-kniff{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,310px);
  gap:clamp(28px,4vw,60px);align-items:start}
.arc-kniff-text > .arc-lauf:last-child{margin-bottom:0}
.arc-kniff-graf{position:sticky;top:96px;margin:calc(-1*clamp(46px,7vh,86px)) 0 0;
  border:1px solid var(--linie);background:var(--n1);padding:18px 18px 16px}
.arc-kg-marke{margin:0 0 14px;font-family:var(--f-m);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-night-mute)}
.arc-kg-hundert{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:0 0 16px}
.arc-kg-hundert i{display:block;aspect-ratio:1;background:var(--linie);border-radius:1px}
.arc-kg-hundert i[data-hand]{background:var(--glut);box-shadow:0 0 9px rgba(217,104,90,.45)}
.arc-kg-zeile{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;
  padding:9px 0;border-top:1px solid var(--linie);
  font-family:var(--f-m);font-size:.7rem;letter-spacing:.06em;color:var(--on-night-mute)}
.arc-kg-zeile b{font-weight:500;color:var(--on-night)}
.arc-kg-zeile span{grid-column:1/-1;height:5px;background:var(--linie)}
.arc-kg-zeile span::before{content:"";display:block;height:100%;width:calc(var(--w,100)*1%);
  background:var(--on-night-mute)}
.arc-kg-zeile[data-jetzt] b{color:var(--glut)}
.arc-kg-zeile[data-jetzt] span::before{background:var(--glut)}
.arc-kg-schluss{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--linie);
  font-size:.86rem;line-height:1.5;color:var(--on-night)}
.arc-kg-schluss em{font-style:normal;display:block;margin-top:6px;font-family:var(--f-m);
  font-size:.68rem;letter-spacing:.06em;color:var(--on-night-mute)}

/* 03 Leistungen */
/* Drei gleich gewichtete Spalten als Instrumentenblatt: keine schwebenden
   Kästen, sondern ein durchgehendes Feld, das von Haarlinien geteilt wird.
   Die Trennlinien wachsen beim Eintritt von oben nach unten — dieselbe
   Bewegung wie die Peilungen in 02. Die Fußzeilen liegen auf einer Linie,
   dadurch tragen unterschiedlich lange Texte dieselbe Fläche. */
.arc-leistungen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:clamp(18px,2.4vw,32px);border-top:1px solid var(--linie-tag)}
.arc-leistung{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,40px) clamp(20px,2.2vw,34px) clamp(22px,2.4vw,34px);
  transition:background-color 320ms var(--ease)}
.arc-leistung::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--linie-tag);transform:scaleY(0);transform-origin:50% 0;
  transition:transform 700ms var(--ease),background-color 320ms var(--ease)}
.arc-leistung:first-child::before{display:none}
.arc-leistung.arc-sicht::before{transform:scaleY(1)}
.arc-leistung:nth-child(2).arc-sicht::before{transition-delay:110ms}
.arc-leistung:nth-child(3).arc-sicht::before{transition-delay:220ms}
.arc-leistung:hover{background:var(--papier-hoch)}
.arc-leistung:hover::before{background:var(--acc)}
.arc-l-nr{font-family:var(--f-m);font-size:.74rem;letter-spacing:.2em;
  color:var(--on-dawn-mute);margin-bottom:14px;display:block;
  opacity:0;transform:translateY(6px);
  transition:opacity 420ms var(--ease) 120ms,transform 420ms var(--ease) 120ms,
    color 260ms var(--ease)}
.arc-leistung.arc-sicht .arc-l-nr{opacity:1;transform:none}
.arc-leistung:hover .arc-l-nr{color:var(--acc)}
.arc-l-titel{overflow:hidden;display:block}
.arc-l-titel span{display:block;transform:translateY(108%);
  transition:transform 640ms var(--ease) 180ms}
.arc-leistung.arc-sicht .arc-l-titel span{transform:none}
.arc-leistung{min-height:clamp(268px,25vw,340px)}
.arc-l-hinweis{margin:0;font-family:var(--f-m);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);display:flex;align-items:center;gap:9px;
  transition:opacity 240ms var(--ease)}
/* Die Tafel: gleiche Machart wie die Musterseiten — runde Ecken, aus der
   eigenen Mitte, mit Magnet. Sie öffnet nach innen, damit sie am Seitenrand
   nicht anschneidet. */
.arc-l-tafel{position:absolute;top:-14px;z-index:30;
  width:calc(100% + 116px);
  background:var(--papier-hoch);border:1px solid var(--linie-tag);border-radius:16px;
  padding:clamp(22px,2.2vw,32px);
  box-shadow:0 3em 6.4em -2.4em rgba(20,18,15,.5),0 .6em 1.6em -1em rgba(20,18,15,.26);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(.945);
  transform-origin:50% 14%;
  transition:opacity 240ms var(--ease),transform 460ms var(--ease),visibility 460ms}
.arc-leistung:nth-child(1) .arc-l-tafel{left:-14px}
.arc-leistung:nth-child(2) .arc-l-tafel{left:-58px}
.arc-leistung:nth-child(3) .arc-l-tafel{right:-14px}
.arc-l-tafel p{max-width:none;font-size:1rem;line-height:1.6}
.arc-lt-titel{font-family:var(--f-m);font-size:.76rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.2;color:var(--acc);margin:0 0 16px;
  padding-bottom:14px;border-bottom:1px solid color-mix(in oklab,var(--acc) 42%,transparent);
  display:flex;align-items:center;gap:11px}
.arc-preis{position:relative;padding-top:18px;min-height:calc(5.1em + 18px)}
.arc-preis::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--acc);opacity:.42;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 720ms var(--ease) 300ms}
.arc-leistung.arc-sicht .arc-preis::before{transform:scaleX(1)}
.arc-l-hinweis{min-height:2.4em}
.arc-l-hinweis .arc-nur-maus{display:inline}
.arc-l-hinweis .arc-nur-tipp{display:none}
@media (max-width:899px){
  .arc-l-hinweis .arc-nur-maus{display:none}
  .arc-l-hinweis .arc-nur-tipp{display:inline}
}
/* Alle drei Bereichstitel in derselben Schrift wie „Websites“ */
.arc-leistung h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);font-weight:300;
  letter-spacing:-.02em;line-height:1.1;margin:0 0 18px;min-height:calc(2*1.1em)}
.arc-leistung p{color:var(--on-night-mute);margin:0 0 14px;max-width:46ch;font-size:.98rem}
.arc-leistung p:last-of-type{margin-bottom:0}
.arc-leistung p strong{color:var(--on-night);font-weight:500}
.arc-preis{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.08em;
  color:var(--on-night);margin:clamp(20px,2.4vw,34px) 0 8px auto;margin-top:auto}

/* 04 Beleg */
.arc-wischer{position:relative;margin:44px 0 12px;max-width:760px;background:var(--n0)}
.arc-wischer-bild{position:relative;display:block;width:100%}
.arc-wischer-bild img{display:block;width:100%;height:auto;object-fit:cover}
.arc-wischer-oben{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 calc((1 - var(--wisch,0))*100%) 0 0)}
.arc-wischer-kante{position:absolute;top:0;bottom:0;left:calc(var(--wisch,0)*100%);width:1px;
  background:var(--glut);opacity:calc(var(--wisch,0)*(1 - var(--wisch,0))*3.4)}
.arc-wischer-marken{display:flex;justify-content:space-between;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-mute);margin:0 0 10px}
.arc-beleg-bilder{display:none;gap:24px;margin:44px 0 12px;max-width:560px}
.arc-beleg-bild{margin:0}
.arc-beleg-bild img{display:block;width:100%;height:auto;object-fit:cover;background:var(--n0)}
.arc-beleg-marke{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-night-mute);margin:0 0 10px}
.arc-bildunterschrift{font-family:var(--f-m);font-size:.86rem;line-height:1.6;color:var(--on-night-mute);
  margin:16px 0 0;max-width:68ch}
.arc-bildunterschrift strong{color:var(--on-night);font-weight:400}
.arc-sprungzahl{font-family:var(--f-m);font-size:var(--t-num);line-height:1;letter-spacing:-.02em;
  margin:56px 0 20px;display:flex;align-items:baseline;gap:.3em;flex-wrap:wrap}
.arc-sprungzahl .arc-vorher{color:var(--on-night-mute)}
.arc-sprungzahl .arc-pfeil{color:var(--on-night-mute);font-size:.5em;display:inline-block;
  transform:scaleX(.2);opacity:0;transform-origin:0 50%;
  transition:transform 420ms var(--ease) 120ms,opacity 260ms var(--ease) 120ms}
.arc-sprungzahl .arc-nachher{color:var(--glut);display:inline-block;
  transform:translateX(-.35em) scale(.7);opacity:0;
  transition:transform 520ms var(--ease) 420ms,opacity 380ms var(--ease) 420ms,filter 700ms var(--ease)}
.arc-sprungzahl[data-an="ja"] .arc-pfeil{transform:scaleX(1);opacity:1}
.arc-sprungzahl[data-an="ja"] .arc-nachher{transform:none;opacity:1}
.arc-sprungzahl[data-blitz="ja"] .arc-nachher{filter:drop-shadow(0 0 26px rgba(217,104,90,.85))}
.arc-intervalle{margin:48px 0 8px;max-width:820px}
.arc-iv{display:grid;grid-template-columns:210px 1fr 90px;align-items:center;gap:0 20px;
  padding:18px 0;border-top:1px solid var(--linie)}
.arc-iv-name{font-family:var(--f-m);font-size:.86rem;letter-spacing:.06em;color:var(--on-night-mute)}
.arc-iv-wert{font-family:var(--f-m);font-size:1.05rem;color:var(--on-night);text-align:right}
.arc-iv-graf{position:relative;height:40px}
.arc-iv-schiene{position:absolute;left:0;right:0;top:19px;height:1px;background:var(--linie)}
.arc-iv-spanne{position:absolute;top:16px;height:7px;left:calc(var(--lo,0)*1%);
  width:calc((var(--hi,100) - var(--lo,0))*1%);border-left:1px solid var(--on-night);
  border-right:1px solid var(--on-night)}
.arc-iv-spanne::before{content:"";position:absolute;top:3px;left:0;right:0;height:1px;background:var(--on-night-mute)}
.arc-iv-punkt{position:absolute;top:16px;left:calc(var(--pt,50)*1%);width:7px;height:7px;border-radius:50%;
  background:var(--on-night);transform:translateX(-50%)}
.arc-iv-ende{position:absolute;top:26px;font-family:var(--f-m);font-size:.74rem;color:var(--on-night-mute);
  white-space:nowrap}
.arc-iv-lo{left:calc(var(--lo,0)*1%);transform:translateX(-50%)}
.arc-iv-hi{left:calc(var(--hi,100)*1%);transform:translateX(-50%)}
.arc-iv[data-eng="ja"] .arc-iv-lo{transform:translateX(-100%) translateX(-6px)}
.arc-iv[data-eng="ja"] .arc-iv-hi{transform:translateX(6px)}
.arc-skala{display:flex;justify-content:space-between;font-family:var(--f-m);font-size:.74rem;
  color:var(--on-night-mute);border-top:1px solid var(--linie);padding-top:10px;margin-top:4px}

/* I7 Prüfpfad */
.arc-pfad{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);overflow:hidden;
  padding:14px 0;position:relative;margin-top:56px;margin-bottom:132px}
.arc-pfad-lauf{display:flex;width:max-content;animation:arc-laufen 68s linear infinite}
.arc-pfad-lauf span{font-family:var(--f-m);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-night-mute);padding-right:3rem;white-space:nowrap}
@keyframes arc-laufen{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* 05 Der ehrliche Teil: Tag, ohne Akzent */
.arc-ehrlich{z-index:5}

/* 06 Drei Kurse */
.arc-kurse{position:relative;margin-top:56px}
.arc-fixpunkt{position:absolute;left:50%;top:-26px;width:9px;height:9px;border-radius:50%;
  background:var(--acc);transform:translateX(-50%);z-index:2}
.arc-kurs-linien{position:absolute;left:0;top:-22px;width:100%;height:70px;z-index:1;overflow:visible}
.arc-kurs-linien path{fill:none;stroke:var(--acc);stroke-width:1;stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--pk,0));opacity:.55;transition:opacity 260ms var(--ease)}
.arc-kurse[data-hell="1"] .arc-kl2,.arc-kurse[data-hell="1"] .arc-kl3,
.arc-kurse[data-hell="2"] .arc-kl1,.arc-kurse[data-hell="2"] .arc-kl3,
.arc-kurse[data-hell="3"] .arc-kl1,.arc-kurse[data-hell="3"] .arc-kl2{opacity:.14}
.arc-kurse[data-hell="1"] .arc-kl1,.arc-kurse[data-hell="2"] .arc-kl2,
.arc-kurse[data-hell="3"] .arc-kl3{opacity:1}
.arc-kurs-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:48px}
.arc-kurs{background:var(--n2);border:1px solid var(--linie);
  padding:clamp(28px,3.2vw,46px);display:flex;flex-direction:column;
  opacity:0;transition:opacity 560ms var(--ease),transform 560ms var(--ease),
    border-color 260ms var(--ease),background-color 260ms var(--ease)}
.arc-kurs:hover{background:var(--n3);border-color:var(--acc)}
.arc-kurs-reihe .arc-kurs:nth-child(2){transition-delay:90ms}
.arc-kurs-reihe .arc-kurs:nth-child(3){transition-delay:180ms}
.arc-kurs--links{transform:translate3d(-56px,0,0)}
.arc-kurs--unten{transform:translate3d(0,56px,0)}
.arc-kurs--rechts{transform:translate3d(56px,0,0)}
.arc-kurs.arc-sicht{opacity:1;transform:none}
.arc-kurs h3{font-size:var(--t-h3);margin:0 0 14px}
.arc-kurs p{color:var(--on-night-mute);margin:0 0 18px;max-width:42ch}

/* I8 Marktvergleich: 37 Anbieter, vier mit einer Zahl. Die Menge steht als
   Menge da, nicht als Satz — und die Höhe sagt dasselbe ein zweites Mal. */
.arc-markt{margin:56px 0 8px;max-width:820px;border-top:1px solid var(--linie);padding-top:26px}
.arc-markt-marke{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-night-mute);margin:0 0 18px}
.arc-markt-feld{display:grid;grid-template-columns:repeat(37,1fr);gap:3px;
  align-items:end;height:46px;margin:0 0 20px}
.arc-markt-feld i{display:block;height:100%;background:var(--linie);
  transform:scaleY(.3);transform-origin:50% 100%;
  transition:transform 640ms var(--ease),background-color 420ms var(--ease)}
.arc-markt-feld i[data-zeigt="ja"]{background:var(--chrome)}
.arc-markt.arc-sicht .arc-markt-feld i[data-zeigt="ja"]{transform:scaleY(1);background:var(--on-night)}
.arc-markt-feld i[data-zeigt="ja"]:nth-child(6){transition-delay:140ms}
.arc-markt-feld i[data-zeigt="ja"]:nth-child(14){transition-delay:260ms}
.arc-markt-feld i[data-zeigt="ja"]:nth-child(23){transition-delay:380ms}
.arc-markt-feld i[data-zeigt="ja"]:nth-child(31){transition-delay:500ms}
.arc-markt-text{font-family:var(--f-m);font-size:.86rem;line-height:1.6;
  color:var(--on-night-mute);margin:0;max-width:66ch}
.arc-markt-text strong{color:var(--on-night);font-weight:400}

/* I9 Die Leiter: der kleinste wirksame Eingriff. Die Balkenbreite ist der
   Aufwand, die beiden obersten Stufen laufen ohne uns. */
.arc-leiter{margin:48px 0 0;max-width:780px}
.arc-leiter-marke{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dawn-mute);margin:0 0 6px}
.arc-leiter-liste{list-style:none;margin:0;padding:0;counter-reset:st}
.arc-leiter-liste li{counter-increment:st;position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:0 20px;
  padding:17px 0 19px;border-top:1px solid var(--linie-tag)}
.arc-leiter-liste li::before{content:counter(st,decimal-leading-zero);
  font-family:var(--f-m);font-size:.78rem;letter-spacing:.1em;color:var(--on-dawn-mute)}
.arc-leiter-liste li::after{content:"";position:absolute;left:0;bottom:0;height:2px;
  width:calc(var(--st,1)*100%);background:var(--on-dawn);opacity:.14;
  transform:scaleX(0);transform-origin:0 50%;transition:transform 760ms var(--ease)}
.arc-leiter.arc-sicht .arc-leiter-liste li::after{transform:scaleX(1)}
.arc-leiter-liste li:nth-child(2)::after{transition-delay:90ms}
.arc-leiter-liste li:nth-child(3)::after{transition-delay:180ms}
.arc-leiter-liste li:nth-child(4)::after{transition-delay:270ms}
.arc-leiter-liste li:nth-child(5)::after{transition-delay:360ms}
.arc-leiter-liste b{font-weight:400;font-size:var(--t-h3);letter-spacing:-.01em;
  color:var(--on-dawn);line-height:1.15}
.arc-leiter-liste em{font-style:normal;font-family:var(--f-m);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dawn-mute);white-space:nowrap}
.arc-leiter-liste li[data-ohne="ja"] em{color:var(--acc)}
.arc-leiter-liste li[data-ohne="ja"]::after{background:var(--acc);opacity:.45}
.arc-leiter-text{font-family:var(--f-m);font-size:.86rem;line-height:1.6;
  color:var(--on-dawn-mute);margin:20px 0 0;max-width:66ch}
.arc-leiter-text strong{color:var(--on-dawn);font-weight:400}

/* I12 Fundrate: hundert fehlerhafte Teile, zweimal durchgezählt.
   Die Striche stellen sich der Reihe nach auf — das Zählen wird sichtbar. */
.arc-fund{margin:52px 0 8px;max-width:820px;border-top:1px solid var(--linie);padding-top:26px}
.arc-fund-marke{margin:0 0 22px;font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-night-mute)}
.arc-fund-block{margin:0 0 22px}
.arc-fund-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 9px;
  font-family:var(--f-m);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-night-mute)}
.arc-fund-kopf em{font-style:normal;font-family:var(--f-b);font-size:var(--t-h3);letter-spacing:-.02em;
  color:var(--on-night-mute);text-transform:none;letter-spacing:0}
.arc-fund-reihe{display:flex;gap:2px;align-items:flex-end;height:52px}
.arc-fund-reihe i{flex:1 1 0;min-width:0;height:100%;background:var(--linie);
  transform:scaleY(.26);transform-origin:50% 100%;
  transition:transform 460ms var(--ease),background-color 320ms linear;
  transition-delay:calc(var(--i,0)*7ms)}
.arc-fund.arc-sicht .arc-fund-reihe i[data-t]{transform:scaleY(1);background:var(--on-night-mute)}
.arc-fund-block[data-jetzt] .arc-fund-reihe i{transition-delay:calc(620ms + var(--i,0)*7ms)}
.arc-fund.arc-sicht .arc-fund-block[data-jetzt] .arc-fund-reihe i[data-t]{background:var(--glut)}
.arc-fund.arc-sicht .arc-fund-block[data-jetzt] .arc-fund-kopf em{color:var(--glut)}
.arc-fund-block[data-jetzt] .arc-fund-kopf em{transition:color 400ms linear 1400ms}
.arc-fund-skala{display:flex;justify-content:space-between;margin:8px 0 0;
  font-family:var(--f-m);font-size:.68rem;color:var(--on-night-mute)}
.arc-fund-fuss{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--linie);
  font-family:var(--f-m);font-size:.78rem;line-height:1.6;color:var(--on-night-mute)}
.arc-fund-fuss strong{color:var(--on-night);font-weight:400}

/* I11 Musterbefund: zwei Seiten, die sich an ihrem eigenen Platz vergrößern.
   Kein zweites Fenster daneben — dieselbe Seite, symmetrisch aus ihrer Mitte
   heraus, mit runden Ecken. Die Haarlinien werden dabei zu Beispieltext.
   Die Innentypografie ist in em gesetzt, damit alles mitwächst. */
.arc-befundblatt{margin:46px 0 34px;max-width:624px}
.arc-bb-marke{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dawn-mute);margin:0 0 16px}
.arc-bb-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.arc-bb-feld{position:relative;display:grid;min-height:clamp(370px,41vw,462px)}
.arc-bb-seite{position:relative;width:100%;height:100%;z-index:2;
  appearance:none;text-align:left;font-family:var(--f-b);color:var(--on-dawn);
  font-size:clamp(7.6px,1.45vw,9px);line-height:1.5;cursor:default;
  background:var(--papier-hoch);border:1px solid var(--linie-tag);border-radius:9px;
  padding:2em 2.2em 1.7em;display:flex;flex-direction:column;gap:1.2em;overflow:hidden;
  box-shadow:0 .7em 2em -1.6em rgba(20,18,15,.45);
  transform:scale(var(--s,1));transform-origin:50% 50%;
  transition:transform 440ms var(--ease),box-shadow 440ms var(--ease),
    opacity 320ms var(--ease),border-color 320ms var(--ease),border-radius 440ms var(--ease)}
.arc-bb-seite:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.arc-bb-seite{scrollbar-width:thin;scrollbar-color:var(--linie-tag) transparent}
.arc-bb-seite::-webkit-scrollbar{width:5px}
.arc-bb-seite::-webkit-scrollbar-thumb{background:var(--linie-tag);border-radius:3px}
.arc-bb-seite::-webkit-scrollbar-track{background:transparent}
.arc-bb-kopf{display:flex;justify-content:space-between;gap:1.2em;margin:0;padding-bottom:1em;
  border-bottom:1px solid var(--linie-tag);
  font-family:var(--f-m);font-size:.82em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dawn-mute)}
.arc-bb-kopf b{font-weight:400;color:var(--acc)}
.arc-bb-zeile{display:grid;grid-template-rows:auto 1fr;align-content:start}
.arc-bb-zeile > b > u{text-decoration:none;color:var(--acc);margin-right:.5em;
  font-variant-numeric:tabular-nums}
.arc-txt em{font-style:normal;color:var(--acc)}
.arc-bb-zeile > b{grid-row:1;font-weight:400;font-size:1.32em;line-height:1.2;
  letter-spacing:-.01em;color:var(--on-dawn);margin-bottom:.3em}
.arc-bb-zeile > .arc-str,.arc-bb-zeile > .arc-txt{grid-row:2;grid-column:1}
.arc-str{display:grid;gap:1.05em;align-content:start;padding-top:.6em;
  transition:opacity 220ms var(--ease)}
.arc-str i{display:block;height:1px;background:var(--linie-tag)}
.arc-str i:nth-child(1){width:100%}
.arc-str i:nth-child(2){width:86%}
.arc-str i:nth-child(3){width:63%}
.arc-str i:nth-child(4){width:92%}
.arc-txt{opacity:0;font-size:1.12em;line-height:1.55;color:var(--on-dawn-mute);
  transition:opacity 300ms var(--ease)}
.arc-txt b{display:block;font-weight:500;color:var(--on-dawn);font-family:var(--f-m);
  font-size:.92em;letter-spacing:.02em;margin-bottom:.25em}
.arc-txt em{font-style:normal;color:var(--on-dawn)}
.arc-bb-fuss{display:flex;justify-content:space-between;gap:1.2em;margin:auto 0 0;padding-top:1em;
  border-top:1px solid var(--linie-tag);
  font-family:var(--f-m);font-size:.78em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dawn-mute)}
.arc-bb-hinweis{margin:16px 0 0;
  font-family:var(--f-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);display:flex;align-items:center;gap:9px;
  transition:opacity 240ms var(--ease)}
.arc-bb-hinweis::before{content:"";width:16px;height:1px;background:currentColor;flex:0 0 auto}
.arc-nur-maus{display:inline}
.arc-nur-tipp{display:none}
.arc-bb-schleier{position:fixed;inset:0;z-index:125;background:rgba(3,5,10,.66);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity 300ms var(--ease),visibility 300ms}
.arc-bl-zu{position:absolute;top:10px;right:10px;z-index:135;display:none;appearance:none;
  width:40px;height:40px;border:1px solid var(--linie-tag);background:var(--papier-hoch);
  color:var(--on-dawn);font-family:var(--f-m);font-size:1.1rem;cursor:pointer;
  align-items:center;justify-content:center;border-radius:50%}

/* Leistungstafeln: nur mit feinem Zeiger als Fenster, sonst als Fließtext */
@media (min-width:900px){
  .arc-leistungen[data-offen="1"] .arc-leistung:nth-child(1) .arc-l-tafel,
  .arc-leistungen[data-offen="2"] .arc-leistung:nth-child(2) .arc-l-tafel,
  .arc-leistungen[data-offen="3"] .arc-leistung:nth-child(3) .arc-l-tafel{
    opacity:1;visibility:visible;
    transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1);
    border-color:color-mix(in oklab,var(--acc) 34%,var(--linie-tag))}
  .arc-leistungen[data-offen="1"] .arc-leistung:nth-child(1),
  .arc-leistungen[data-offen="2"] .arc-leistung:nth-child(2),
  .arc-leistungen[data-offen="3"] .arc-leistung:nth-child(3){z-index:40}
  .arc-leistungen:not([data-offen="0"]) .arc-l-hinweis{opacity:0}
}
@media (max-width:700px),(pointer:coarse){
  .arc-leistungen{grid-template-columns:1fr;border-top:0;gap:14px}
  .arc-leistung{min-height:0;cursor:default;
    background:var(--papier-hoch);border:1px solid var(--linie-tag);border-radius:12px;
    padding:24px 22px 26px}
  .arc-leistung::before{display:none}
  .arc-leistung:first-child{border-top:1px solid var(--linie-tag)}
  .arc-l-nr{margin-bottom:10px}
  .arc-leistung h3{margin-bottom:14px;min-height:0}
  .arc-l-hinweis{display:flex;color:var(--acc);min-height:0}
  .arc-nur-maus{display:none}
  .arc-nur-tipp{display:inline}
  .arc-preis{min-height:0}
  .arc-l-hinweis::after{content:"+";font-family:var(--f-m);margin-left:auto;font-size:1rem}
  .arc-leistungen[data-offen="1"] .arc-leistung:nth-child(1) .arc-l-hinweis::after,
  .arc-leistungen[data-offen="2"] .arc-leistung:nth-child(2) .arc-l-hinweis::after,
  .arc-leistungen[data-offen="3"] .arc-leistung:nth-child(3) .arc-l-hinweis::after{content:"–"}
  .arc-l-tafel{padding-top:18px}
  .arc-preis{margin-top:20px}
  .arc-l-tafel{position:static;width:auto;left:auto;right:auto;top:auto;transform:none;
    background:none;border:0;border-radius:0;box-shadow:none;padding:0;
    display:none;opacity:0;transition:opacity 320ms var(--ease)}
  .arc-leistungen[data-offen="1"] .arc-leistung:nth-child(1) .arc-l-tafel,
  .arc-leistungen[data-offen="2"] .arc-leistung:nth-child(2) .arc-l-tafel,
  .arc-leistungen[data-offen="3"] .arc-leistung:nth-child(3) .arc-l-tafel{
    display:block;opacity:1;pointer-events:auto;visibility:visible}
}

/* Aufgeschlagen. Nicht über :hover — ein verschobenes Feld unter dem Zeiger
   bringt Hover zum Flackern. Der Zustand steht als data-offen an der Figur,
   gesetzt von pointerenter. Nur mit echtem Zeiger; Android meldet oft
   hover:hover und soll trotzdem die Tippfassung bekommen. */
@media (min-width:900px){
  /* Der Magnet sitzt auf dem Feld: eigener kurzer Takt, die ganze Seite wandert
     samt Schatten mit — wie die Reiter oben. Nur hier, sonst würde die
     Verschiebung die feste Positionierung der Handyfassung brechen. */
  .arc-bb-feld{transform:translate3d(var(--mx,0px),var(--my,0px),0);
    transition:transform 320ms var(--ease)}
  /* Das Feld selbst muss steigen, nicht nur das Blatt darin: die Verschiebung
     macht jedes Feld zu einer eigenen Stapelebene, sonst deckt Feld 2 den
     überstehenden rechten Teil der aufgeschlagenen Seite 1 ab — dort wirkte
     sie durchsichtig und fing den Zeiger ab. */
  .arc-befundblatt[data-offen="1"] .arc-bb-feld[data-feld="1"],
  .arc-befundblatt[data-offen="2"] .arc-bb-feld[data-feld="2"]{z-index:40}
  /* Aufgeschlagen ist die Seite ein Bogen: sie öffnet sich zur Seite hin auf,
     die Befunde stehen dann zweispaltig nebeneinander. So passt der ganze
     Text ohne Rollen hinein — und die Schrift wird größer statt kleiner.
     Seite 1 klappt nach rechts auf, Seite 2 nach links; dadurch bleibt der
     Bogen in beiden Fällen innerhalb der Spaltenbreite. */
  .arc-befundblatt[data-offen="1"] .arc-bb-feld[data-feld="1"] .arc-bb-seite,
  .arc-befundblatt[data-offen="2"] .arc-bb-feld[data-feld="2"] .arc-bb-seite{
    --s:1;z-index:40;border-radius:16px;overflow:auto;
    position:absolute;top:50%;width:min(486px,186%);height:auto;
    aspect-ratio:1/1.32;min-height:0;
    max-height:88svh;
    font-size:clamp(10.2px,.8vw,11.6px);
    display:flex;flex-direction:column;gap:1.05em;
    padding:1.8em 2em 1.5em;
    border-color:color-mix(in oklab,var(--acc) 34%,var(--linie-tag));
    box-shadow:0 3.4em 7em -2.4em rgba(20,18,15,.52),0 .6em 1.6em -1em rgba(20,18,15,.26)}
  .arc-befundblatt[data-offen="1"] .arc-bb-feld[data-feld="1"] .arc-bb-seite{
    left:0;transform-origin:0 50%;transform:translateY(-50%) scale(var(--s))}
  .arc-befundblatt[data-offen="2"] .arc-bb-feld[data-feld="2"] .arc-bb-seite{
    right:0;transform-origin:100% 50%;transform:translateY(-50%) scale(var(--s))}
  .arc-befundblatt[data-offen="1"] .arc-bb-feld[data-feld="1"] .arc-bb-seite > .arc-bb-kopf,
  .arc-befundblatt[data-offen="1"] .arc-bb-feld[data-feld="1"] .arc-bb-seite > .arc-bb-fuss,
  .arc-befundblatt[data-offen="2"] .arc-bb-feld[data-feld="2"] .arc-bb-seite > .arc-bb-kopf,
  .arc-befundblatt[data-offen="2"] .arc-bb-feld[data-feld="2"] .arc-bb-seite > .arc-bb-fuss{
    grid-column:1/-1;margin:0}
  .arc-befundblatt[data-offen="1"] .arc-bb-feld[data-feld="1"] .arc-str,
  .arc-befundblatt[data-offen="2"] .arc-bb-feld[data-feld="2"] .arc-str{opacity:0}
  .arc-befundblatt[data-offen="1"] .arc-bb-feld[data-feld="1"] .arc-txt,
  .arc-befundblatt[data-offen="2"] .arc-bb-feld[data-feld="2"] .arc-txt{
    opacity:1;transition-delay:150ms}
  .arc-befundblatt[data-offen="1"] .arc-bb-feld[data-feld="2"] .arc-bb-seite,
  .arc-befundblatt[data-offen="2"] .arc-bb-feld[data-feld="1"] .arc-bb-seite{opacity:.16}
  .arc-befundblatt[data-offen="1"] .arc-bb-hinweis,
  .arc-befundblatt[data-offen="2"] .arc-bb-hinweis{opacity:0}
  .arc-nur-maus{display:inline}
  .arc-nur-tipp{display:none}
}


/* Kurzes Fenster: kleiner aufschlagen, damit die Seite ganz sichtbar bleibt. */
@media (min-width:900px) and (max-width:1080px){
  .arc-befundblatt[data-offen="1"] .arc-bb-feld[data-feld="1"] .arc-bb-seite,
  .arc-befundblatt[data-offen="2"] .arc-bb-feld[data-feld="2"] .arc-bb-seite{width:min(470px,182%)}
}
@media (min-width:900px) and (max-height:800px){
  .arc-befundblatt[data-offen="1"] .arc-bb-feld[data-feld="1"] .arc-bb-seite,
  .arc-befundblatt[data-offen="2"] .arc-bb-feld[data-feld="2"] .arc-bb-seite{font-size:10.6px}
}

/* Telefon: zwei Miniaturseiten sind auf einem Handy nur leere Fläche.
   Stattdessen zwei ruhige Zeilen, die beim Antippen an ihrem Platz zur ganzen
   Seite aufklappen — kein festpositioniertes Fenster, kein Schleier, damit
   nichts unter einer Stapelebene verschwinden kann. */
@media (max-width:899px){
  .arc-bb-paar{grid-template-columns:1fr;gap:10px;max-width:none;margin:0}
  .arc-bb-feld{position:static;min-height:0}
  .arc-bb-seite{position:static;width:100%;height:auto;overflow:hidden;
    transform:none;box-shadow:none;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    font-size:13px;padding:0;border-radius:9px;
    transition:border-color 240ms var(--ease),background-color 240ms var(--ease),
      padding 300ms var(--ease),gap 300ms var(--ease)}
  .arc-bb-seite:active{background:var(--dawn-deep)}
  /* R4 · Erst mit Skript zusammengefaltet. Ohne Skript lässt sich die Karte
     nicht aufklappen — dann muss sie vollständig lesbar dastehen, sonst ist
     der halbe Abschnitt auf dem Telefon leer. */
  .arc-js .arc-bb-seite > .arc-bb-kopf,
  .arc-js .arc-bb-seite > .arc-bb-zeile{display:none}
  .arc-bb-seite > .arc-bb-fuss{width:100%;margin:0;padding:18px;border-top:0;
    font-size:.76rem;color:var(--on-dawn)}
  .arc-bb-seite > .arc-bb-fuss span:last-child{color:var(--acc)}

  .arc-bb-feld[data-auf="ja"] .arc-bb-seite{font-size:12.6px;padding:1.7em 1.8em 1.5em;
    gap:1.4em;border-color:color-mix(in oklab,var(--acc) 40%,var(--linie-tag))}
  .arc-bb-feld[data-auf="ja"] .arc-bb-seite > .arc-bb-kopf{display:flex}
  .arc-bb-feld[data-auf="ja"] .arc-bb-seite > .arc-bb-zeile{display:grid}
  .arc-bb-feld[data-auf="ja"] .arc-bb-seite > .arc-bb-fuss{padding:1em 0 0;
    border-top:1px solid var(--linie-tag);font-size:.78em;color:var(--on-dawn-mute)}
  .arc-bb-feld[data-auf="ja"] .arc-str{display:none}
  .arc-bb-feld[data-auf="ja"] .arc-txt{opacity:1;transition-delay:80ms}
  .arc-bb-schleier,.arc-bl-zu{display:none}
  .arc-nur-maus{display:none}
  .arc-nur-tipp{display:inline}
}

/* I12 Was immer dazugehört. Die Aufzählung aus den Karten, einmal als Menge —
   und der eine Punkt, der beim Kunden bleibt, abgesetzt. */
.arc-dazu{margin:clamp(14px,1.6vw,20px) 0 0;border-top:1px solid var(--linie-tag);padding-top:26px;
  display:grid;gap:18px}
.arc-dazu-marke{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dawn-mute);margin:0}
/* Laufband wie der Prüfpfad in 04, nur auf Papier: zwei gleiche Läufe
   hintereinander, die Bewegung geht über die halbe Breite — dadurch nahtlos. */
.arc-dazu-band{border-top:1px solid var(--linie-tag);border-bottom:1px solid var(--linie-tag);
  overflow:hidden;padding:13px 0;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.arc-dazu-lauf{display:flex;width:max-content;animation:arc-laufen 54s linear infinite}
.arc-dazu-lauf span{font-family:var(--f-m);font-size:.82rem;letter-spacing:.08em;
  color:var(--on-dawn);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.arc-dazu-lauf{animation:none}}
.arc-dazu-bringt{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--linie-tag);padding-top:18px}
.arc-dazu-bringt span{font-family:var(--f-m);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc)}
.arc-dazu-bringt b{font-weight:400;font-size:var(--t-h3);letter-spacing:-.01em;color:var(--on-dawn)}
.arc-dazu-bringt em{font-style:normal;font-family:var(--f-m);font-size:.78rem;
  color:var(--on-dawn-mute)}

/* Abschnittskopf: Nummer links, Zustand rechts. Die Akzentspur sagt, wie sicher
   ein Abschnitt ist — ohne das Wort daneben sieht das niemand. */
.arc-aufschrift[data-zustand]{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;padding-bottom:13px;
  border-bottom:1px solid color-mix(in oklab,currentColor 26%,transparent)}
.arc-aufschrift[data-zustand]::after{content:attr(data-zustand);letter-spacing:.14em;
  white-space:nowrap;color:var(--on-night-mute)}
[data-grund="tag"] .arc-aufschrift[data-zustand]::after{color:var(--on-dawn-mute)}

/* Der Wischer lässt sich auch von Hand ziehen */
.arc-wischer-griff{position:absolute;top:50%;left:calc(var(--wisch,0)*100%);z-index:3;
  width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  background:color-mix(in oklab,var(--n0) 64%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid color-mix(in oklab,var(--on-night) 30%,transparent);
  display:grid;place-items:center;cursor:ew-resize;touch-action:none;
  font-family:var(--f-m);font-size:.8rem;letter-spacing:.1em;color:var(--on-night);
  transition:border-color 220ms var(--ease),background-color 220ms var(--ease)}
.arc-wischer-griff:hover{border-color:var(--glut);
  background:color-mix(in oklab,var(--n0) 82%,transparent)}
.arc-wischer-bild{cursor:ew-resize}

/* Karten in 06: die Zahlen, die man vor der Wahl wissen will */
.arc-kurs-fakten{margin:0 0 22px;padding:0;border-top:1px solid var(--linie-tag)}
.arc-kurs-fakten > div{display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--linie-tag)}
.arc-kurs-fakten dt{margin:0;font-family:var(--f-m);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dawn-mute)}
.arc-kurs-fakten dd{margin:0;font-family:var(--f-m);font-size:.82rem;color:var(--on-dawn);text-align:right}
.arc-kapa{display:flex;align-items:center;gap:11px;margin:0 0 20px;
  font-family:var(--f-m);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dawn-mute)}
.arc-kapa-marken{display:flex;gap:4px}
.arc-kapa-marken i{display:block;width:6px;height:17px;background:var(--acc)}

/* Einstieg: Schaltflächen und Vertrauenszeile */
.arc-tasten{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:34px 0 0}
.arc-taste{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;
  border:1px solid color-mix(in oklab,var(--on-night) 26%,transparent);color:var(--on-night);
  text-decoration:none;font-family:var(--f-m);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
  background-image:linear-gradient(90deg,var(--acc),var(--acc));background-repeat:no-repeat;
  background-position:0 50%;background-size:0 100%;
  transition:background-size 460ms cubic-bezier(.5,.05,.2,1),border-color 300ms var(--ease),
    color 220ms var(--ease) 60ms}
.arc-taste span,.arc-taste i{position:relative;z-index:1;font-style:normal}
.arc-taste i{transition:transform 300ms var(--ease)}
.arc-taste:hover{border-color:var(--acc);background-size:100% 100%;color:var(--n0)}
.arc-taste:hover i{transform:translateX(3px)}
.arc-taste-neben{position:relative;display:inline-flex;align-items:center;min-height:44px;
  color:var(--on-night-mute);text-decoration:none;font-size:1rem}
.arc-taste-neben::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;
  background:color-mix(in oklab,var(--acc) 40%,transparent);
  transition:background-color 200ms var(--ease)}
.arc-taste-neben:hover{color:var(--on-night)}
.arc-taste-neben:hover::after{background:var(--acc)}
.arc-vertrauen{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.1em;
  color:var(--on-night-mute);margin:26px 0 0}
.arc-satz2 .arc-wort:nth-child(1) span{animation-delay:500ms}
.arc-satz2 .arc-wort:nth-child(2) span{animation-delay:545ms}
.arc-satz2 .arc-wort:nth-child(3) span{animation-delay:590ms}
.arc-satz2 .arc-wort:nth-child(4) span{animation-delay:635ms}
.arc-satz2 .arc-wort:nth-child(5) span{animation-delay:680ms}
.arc-ablauf-verweis{margin:clamp(18px,2.6vh,32px) 0 0}
.arc-verweis--klein{font-size:.9rem;color:var(--on-night-mute)}
.arc-satz2 .arc-wort:nth-child(6) span{animation-delay:725ms}
.arc-satz2 .arc-wort:nth-child(7) span{animation-delay:770ms}
/* Eckdaten im Kästchen: Beruhigung, nicht das Angebot — klein, unter dem Lead */
.arc-eckdaten{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.12em;
  color:var(--on-dawn-mute);margin:8px 0 0;opacity:calc((var(--kn,0) - .18)/.26)}
/* Was in der Analyse steht: die sechs Punkte als Liefergegenstand */
.arc-inhalt{margin:44px 0 0;max-width:840px}
.arc-inhalt-marke{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dawn-mute);margin:0 0 6px}
.arc-ig{margin:26px 0 0}
.arc-ig-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 2px;
  font-family:var(--f-m);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in oklab,var(--acc) 62%,var(--on-dawn-mute))}
.arc-ig-kopf b{font-weight:400;color:var(--on-dawn-mute)}
/* Gruppe zwei ist das Ziel der Seite und wird stärker gesetzt */
.arc-ig--ziel{margin-top:34px;padding-top:26px;border-top:2px solid var(--acc)}
.arc-ig--ziel .arc-ig-kopf{color:var(--acc);font-size:.76rem}
.arc-ig--ziel .arc-ig-kopf b{color:var(--acc)}
.arc-ig--ziel dl > div{padding:19px 0 20px}
.arc-ig--ziel dt{font-size:1.08rem}
.arc-inhalt dl{margin:0;padding:0}
/* I13 Begleitspalte: zu jeder Zeile ein Bild rechts neben der Tabelle.
   Ohne Beschriftung, aber gegenständlich — es zeigt, woran geprüft wird. */
.arc-igf{display:none}
@media (min-width:1200px){
  .arc-inhalt{max-width:none}
  .arc-ig{display:grid;grid-template-columns:minmax(0,832px) minmax(210px,1fr);
    column-gap:clamp(30px,3.6vw,72px);align-items:center}
  .arc-ig-kopf{grid-column:1/-1}
  .arc-inhalt dl{display:contents}
  .arc-inhalt dl > div.arc-ig-zeile{grid-column:1}
  .arc-igf{grid-column:2;display:block}
  .arc-if{display:block;position:relative;min-height:112px;width:100%}
  .arc-if i,.arc-if b,.arc-if em,.arc-if u{display:block}
  .if-rang .g-bal,.if-plan .g-spur{transform-origin:0 50%}

  /* Jede Zeichnung ist eine kleine, lesbare Auskunft — mit den Zahlen des
     Musterberichts, damit sofort klar ist, was gemeint ist. Beschriftung in
     Mono, so klein wie lesbar, nie kleiner als 10,5 px. */
  .arc-if{--gm:10.5px}
  .arc-if em,.arc-if b,.arc-if u{font-family:var(--f-m);font-style:normal;font-weight:400;
    letter-spacing:.02em;line-height:1.3;text-decoration:none}

  /* 1 Ihr Platz bei Google: die Anfrage wird getippt, die Trefferliste läuft
     durch, und Ihre Seite steht auf Platz 14. */
  .if-suche{display:grid;align-content:center;gap:0}
  .if-suche .g-feld{position:relative;height:20px;border:1px solid var(--linie-tag);
    border-radius:10px;background:var(--papier-hoch);margin-bottom:8px;
    display:flex;align-items:center;padding-left:24px}
  .if-suche .g-lupe{position:absolute;left:8px;top:5px;width:8px;height:8px;border-radius:50%;
    border:1px solid var(--on-dawn-mute)}
  .if-suche .g-lupe::after{content:"";position:absolute;right:-3px;bottom:-2px;width:4px;height:1px;
    background:var(--on-dawn-mute);transform:rotate(45deg)}
  .if-suche .g-tipp{font-size:var(--gm);color:var(--on-dawn);white-space:nowrap;overflow:hidden;
    display:block;max-width:100%}
  .if-suche .g-liste{display:grid;gap:3px}
  .if-suche .g-liste > i{display:grid;grid-template-columns:17px minmax(0,1fr) auto;
    align-items:center;gap:8px}
  .if-suche .g-liste em{font-size:var(--gm);color:var(--on-dawn-mute);text-align:right}
  .if-suche .g-liste u{height:3px;background:var(--linie-tag);text-decoration:none;display:block}
  .if-suche .g-aus{min-height:11px}
  .if-suche .g-aus em{color:var(--on-dawn-mute);letter-spacing:0;font-size:12px;line-height:.9}
  .if-suche .g-sie em{color:var(--acc)}
  .if-suche .g-sie u{height:5px;background:var(--acc)}
  .if-suche .g-sie b{font-size:var(--gm);color:var(--acc);white-space:nowrap}

  /* 2 Wer vor Ihnen steht: vier Plätze, Länge = Sichtbarkeit. Ihrer ist kurz. */
  .if-rang{display:grid;align-content:center;gap:7px}
  .if-rang .g-reihe{display:grid;grid-template-columns:52px auto minmax(0,1fr);
    align-items:center;gap:8px}
  .if-rang .g-bal{min-width:6px}
  .if-rang em{font-size:var(--gm);color:var(--on-dawn-mute);white-space:nowrap}
  .if-rang .g-bal{height:7px;background:var(--linie-tag);display:block}
  .if-rang .g-b3{width:126px}
  .if-rang .g-b6{width:96px}
  .if-rang .g-b14{width:36px;background:var(--acc)}
  .if-rang .g-b19{width:22px}
  .if-rang .g-sie em{color:var(--acc)}
  .if-rang .g-sie b{font-size:var(--gm);color:var(--acc);white-space:nowrap}

  /* 3 Was bremst: der Balken läuft über die Zielmarke hinaus. */
  .if-tempo{display:grid;align-content:center;gap:7px}
  .if-tempo .g-kopf{font-size:var(--gm);color:var(--on-dawn-mute)}
  .if-tempo .g-achse{position:relative;height:26px;border:1px solid var(--linie-tag);
    background:var(--papier-hoch)}
  .if-tempo .g-fuell{position:absolute;left:0;top:0;bottom:0;width:90%;
    background:color-mix(in oklab,var(--glut-tag) 24%,transparent);
    border-right:2px solid var(--glut-tag);display:block}
  .if-tempo .g-ziel{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;
    background:var(--on-dawn)}
  .if-tempo .g-ist{position:absolute;right:11%;top:50%;transform:translateY(-50%);
    font-size:var(--gm);color:var(--glut-tag);padding-right:5px}
  .if-tempo .g-skala{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline}
  .if-tempo .g-skala em{font-size:9.5px;color:var(--on-dawn-mute)}
  .if-tempo .g-skala em:last-child{text-align:right}
  .if-tempo .g-zielmarke{color:var(--on-dawn);white-space:nowrap}
  .if-tempo .g-zielmarke::before{content:"";display:block;width:1px;height:5px;
    background:var(--on-dawn);margin:0 auto 2px}

  /* 4 Was rechtlich fehlt: Häkchen und Lücken, benannt. */
  .if-recht{display:grid;align-content:center;gap:7px}
  .if-recht .g-zeile{display:grid;grid-template-columns:13px minmax(0,1fr) auto;
    align-items:center;gap:9px}
  .if-recht .g-zeile > i{width:13px;height:13px;border:1px solid var(--linie-tag);
    position:relative;display:block}
  .if-recht .g-ok{border-color:var(--on-dawn-mute)}
  .if-recht .g-ok::after{content:"";position:absolute;left:2.5px;top:2.5px;width:6px;height:3px;
    border-left:1.5px solid var(--on-dawn);border-bottom:1.5px solid var(--on-dawn);
    transform:rotate(-45deg)}
  .if-recht em{font-size:var(--gm);color:var(--on-dawn-mute);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .if-recht .g-fehlt > i{border-color:var(--glut-tag);border-style:dashed}
  .if-recht .g-fehlt em{color:var(--on-dawn)}
  .if-recht .g-fehlt b{font-size:var(--gm);color:var(--glut-tag);white-space:nowrap}

  /* 5 Drei Kleinigkeiten: sie werden abgehakt, mit Aufwand darunter. */
  .if-selbst{display:grid;align-content:center;gap:8px}
  .if-selbst .g-zeile{display:grid;grid-template-columns:13px minmax(0,1fr);
    align-items:center;gap:9px}
  .if-selbst .g-zeile > i{width:13px;height:13px;border:1px solid var(--linie-tag);
    position:relative;display:block}
  .if-selbst .g-zeile > i::after{content:"";position:absolute;left:2.5px;top:2.5px;width:6px;height:3px;
    border-left:1.5px solid var(--dawn);border-bottom:1.5px solid var(--dawn);
    transform:rotate(-45deg);opacity:0}
  .if-selbst em{font-size:var(--gm);color:var(--on-dawn-mute);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .if-selbst .g-fuss{font-size:var(--gm);color:var(--acc);padding-top:3px;
    border-top:1px solid var(--linie-tag)}

  /* 6 Der Vorschlag: Preis, und der Weg bis fertig. */
  .if-plan{display:grid;align-content:center;gap:11px}
  .if-plan .g-karte{border:1px solid var(--linie-tag);background:var(--papier-hoch);
    padding:8px 10px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .if-plan .g-karte em{font-size:15px;color:var(--acc);letter-spacing:-.01em}
  .if-plan .g-karte b{font-size:var(--gm);color:var(--on-dawn-mute)}
  .if-plan .g-zeit{position:relative;height:30px}
  .if-plan .g-spur{position:absolute;left:4px;right:4px;top:5px;height:1px;
    background:var(--linie-tag);display:block}
  .if-plan .g-zeit em{position:absolute;top:2px;width:7px;height:7px;border-radius:50%;
    background:var(--linie-tag)}
  .if-plan .g-zeit em u{position:absolute;left:50%;top:12px;transform:translateX(-50%);
    font-size:9.5px;color:var(--on-dawn-mute);text-decoration:none;white-space:nowrap}
  .if-plan .g-p1{left:0}
  .if-plan .g-p1 u{left:0;transform:none}
  .if-plan .g-p2{left:46%}
  .if-plan .g-p3{right:0;background:var(--acc)}
  .if-plan .g-p3 u{left:auto;right:0;transform:none;color:var(--acc)}

  /* Nacheinander: jede Zeichnung kommt für sich, wenn sie an der Reihe ist */
  /* Die Zeichnung tritt spät ein: erst liest man die Zeile, dann kommt das Bild
     dazu — und die vier Bilder kommen deutlich nacheinander. */
  .arc-js .arc-igf{opacity:0;transform:translateY(16px);
    transition:opacity 900ms var(--ease),transform 1000ms var(--ease);
    transition-delay:900ms}
  .arc-js .arc-igf.arc-sicht{opacity:1;transform:none}
  .arc-igf:has(.if-suche){transition-delay:600ms}
  .arc-igf:has(.if-rang){transition-delay:1500ms}
  .arc-igf:has(.if-tempo){transition-delay:2400ms}
  .arc-igf:has(.if-recht){transition-delay:3300ms}
  .arc-igf:has(.if-selbst){transition-delay:4200ms}
  .arc-igf:has(.if-plan){transition-delay:5100ms}
}

/* I13b Bewegung: jede Zeichnung erzählt ihren Punkt, einmal, wenn ihre Zeile
   ins Bild kommt (`.arc-sicht`). Kein Kreislauf — danach bleibt sie als Bild
   stehen und ist auch ohne Bewegung vollständig lesbar. */
@media (min-width:1200px){
  /* 1 Die Anfrage wird getippt, die Trefferliste läuft durch, Ihre Zeile kommt
     zuletzt — weit unten. */
  .arc-igf.arc-sicht .if-suche .g-tipp{animation:arc-tippen 930ms steps(14) 720ms both}
  .arc-igf.arc-sicht .if-suche .g-liste > i{animation:arc-zeile-ein 570ms var(--ease) both}
  .arc-igf.arc-sicht .if-suche .g-liste > i:nth-child(1){animation-delay:1360ms}
  .arc-igf.arc-sicht .if-suche .g-liste > i:nth-child(2){animation-delay:1440ms}
  .arc-igf.arc-sicht .if-suche .g-liste > i:nth-child(3){animation-delay:1520ms}
  .arc-igf.arc-sicht .if-suche .g-liste > i:nth-child(4){animation-delay:1600ms}
  .arc-igf.arc-sicht .if-suche .g-sie{animation-delay:1720ms!important;
    animation-duration:520ms!important}

  /* 2 Die vier Plätze wachsen nacheinander, Ihrer zuletzt und am kürzesten. */
  .arc-igf.arc-sicht .if-rang .g-bal{animation:arc-balken 930ms cubic-bezier(.3,.7,.2,1) both}
  .arc-igf.arc-sicht .if-rang .g-reihe:nth-child(1) .g-bal{animation-delay:1600ms}
  .arc-igf.arc-sicht .if-rang .g-reihe:nth-child(2) .g-bal{animation-delay:1740ms}
  .arc-igf.arc-sicht .if-rang .g-reihe:nth-child(4) .g-bal{animation-delay:1880ms}
  .arc-igf.arc-sicht .if-rang .g-sie .g-bal{animation-delay:2060ms}
  .arc-igf.arc-sicht .if-rang .g-sie b{animation:arc-auf 510ms var(--ease) 2520ms both}

  /* 3 Der Balken läuft zäh über die Zielmarke hinaus, dann steht der Wert da. */
  .arc-igf.arc-sicht .if-tempo .g-fuell{animation:arc-laden 2250ms cubic-bezier(.3,.05,.4,1) 2560ms both}
  .arc-igf.arc-sicht .if-tempo .g-ziel{animation:arc-ziel 750ms var(--ease) 3160ms both}
  .arc-igf.arc-sicht .if-tempo .g-ist{animation:arc-auf 570ms var(--ease) 4020ms both}

  /* 4 Die Prüfpunkte werden abgehakt; die zwei Lücken melden sich. */
  .arc-igf.arc-sicht .if-recht .g-zeile{animation:arc-zeile-ein 540ms var(--ease) both}
  .arc-igf.arc-sicht .if-recht .g-zeile:nth-child(1){animation-delay:3420ms}
  .arc-igf.arc-sicht .if-recht .g-zeile:nth-child(2){animation-delay:3640ms}
  .arc-igf.arc-sicht .if-recht .g-zeile:nth-child(3){animation-delay:3860ms}
  .arc-igf.arc-sicht .if-recht .g-zeile:nth-child(4){animation-delay:4080ms}
  .arc-igf.arc-sicht .if-recht .g-ok::after{animation:arc-haken 450ms cubic-bezier(.2,.8,.2,1) both}
  .arc-igf.arc-sicht .if-recht .g-zeile:nth-child(1) .g-ok::after{animation-delay:3620ms}
  .arc-igf.arc-sicht .if-recht .g-zeile:nth-child(3) .g-ok::after{animation-delay:4060ms}
  .arc-igf.arc-sicht .if-recht .g-fehlt b{animation:arc-melden 960ms var(--ease) both}
  .arc-igf.arc-sicht .if-recht .g-zeile:nth-child(2) b{animation-delay:3860ms}
  .arc-igf.arc-sicht .if-recht .g-zeile:nth-child(4) b{animation-delay:4300ms}

  /* 5 Die drei Handgriffe werden nacheinander abgehakt, dann steht der Aufwand. */
  .arc-igf.arc-sicht .if-selbst .g-zeile > i{animation:arc-kasten-an 540ms var(--ease) both}
  .arc-igf.arc-sicht .if-selbst .g-zeile > i::after{animation:arc-haken 450ms cubic-bezier(.2,.8,.2,1) both}
  .arc-igf.arc-sicht .if-selbst .g-zeile:nth-child(1) > i,
  .arc-igf.arc-sicht .if-selbst .g-zeile:nth-child(1) > i::after{animation-delay:4440ms}
  .arc-igf.arc-sicht .if-selbst .g-zeile:nth-child(2) > i,
  .arc-igf.arc-sicht .if-selbst .g-zeile:nth-child(2) > i::after{animation-delay:4760ms}
  .arc-igf.arc-sicht .if-selbst .g-zeile:nth-child(3) > i,
  .arc-igf.arc-sicht .if-selbst .g-zeile:nth-child(3) > i::after{animation-delay:5080ms}
  .arc-igf.arc-sicht .if-selbst .g-fuss{animation:arc-auf 570ms var(--ease) 5420ms both}

  /* 6 Der Preis setzt sich, dann läuft die Zeit bis fertig. */
  .arc-igf.arc-sicht .if-plan .g-karte em{animation:arc-auf 630ms cubic-bezier(.2,.8,.2,1) 5300ms both}
  .arc-igf.arc-sicht .if-plan .g-spur{animation:arc-zeitachse 1050ms var(--ease) 5620ms both}
  .arc-igf.arc-sicht .if-plan .g-zeit em{animation:arc-punkt 510ms var(--ease) both}
  .arc-igf.arc-sicht .if-plan .g-p1{animation-delay:5680ms}
  .arc-igf.arc-sicht .if-plan .g-p2{animation-delay:5940ms}
  .arc-igf.arc-sicht .if-plan .g-p3{animation-delay:6220ms}
}
@keyframes arc-tippen{from{max-width:0}to{max-width:100%}}
@keyframes arc-zeile-ein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes arc-balken{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes arc-laden{from{width:0}to{width:90%}}
@keyframes arc-ziel{0%{opacity:1}30%{opacity:.25}100%{opacity:1}}
@keyframes arc-auf{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes arc-haken{from{opacity:0;transform:rotate(-45deg) scale(.4)}
  to{opacity:1;transform:rotate(-45deg) scale(1)}}
@keyframes arc-kasten-an{from{border-color:var(--linie-tag);background:transparent}
  to{border-color:var(--acc);background:var(--acc)}}
@keyframes arc-melden{0%{opacity:0}25%{opacity:1}55%{opacity:.35}100%{opacity:1}}
@keyframes arc-zeitachse{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes arc-punkt{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}

/* I13 Zeichnungen zur Tabelle: je Zeile eine kleine Darstellung rechts.
   Sie tragen keine erfundenen Werte — sie zeigen die Form der Auskunft. */

.arc-inhalt dl > div{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:5px 30px;padding:15px 0 16px;border-top:1px solid var(--linie-tag)}
.arc-inhalt dt{margin:0;font-size:1.02rem;color:var(--on-dawn)}
.arc-inhalt dd{margin:0;font-size:.96rem;line-height:1.55;color:var(--on-dawn-mute)}
.arc-schluss{margin:40px 0 0}
.arc-befundblatt{position:relative}
.arc-zeiger{position:absolute;left:0;top:0;z-index:60;pointer-events:none;
  opacity:0;transform:translate3d(var(--zx,0px),var(--zy,0px),0);
  will-change:transform,opacity;backface-visibility:hidden;
  transition:opacity 340ms linear,transform 980ms cubic-bezier(.22,.68,.3,1)}
.arc-zeiger svg{display:block;filter:drop-shadow(0 3px 7px rgba(20,18,15,.4))}
.arc-zeiger path{fill:var(--on-dawn);stroke:var(--dawn);stroke-width:1.4;
  stroke-linejoin:round;paint-order:stroke}
.arc-zeiger::after{content:"";position:absolute;left:-13px;top:-13px;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--acc);opacity:0;transform:scale(.3)}
.arc-befundblatt[data-fuehrt="naht"] .arc-zeiger{opacity:0;transition:none}
.arc-befundblatt[data-fuehrt="an"] .arc-zeiger{opacity:1}
.arc-befundblatt[data-fuehrt="tipp"] .arc-zeiger{opacity:1}
.arc-befundblatt[data-fuehrt="tipp"] .arc-zeiger::after{animation:arc-zeiger-hof 620ms var(--ease) forwards}
@keyframes arc-zeiger-hof{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.15)}}
/* Breites Fenster: die zwei Musterseiten stehen als Spalte rechts neben der
   Tabelle — Seite 1 auf Höhe von „Ihre Lage“, Seite 2 auf Höhe von „Was daraus
   folgt“. Die Schriftgröße im Muster hängt an der Spaltenbreite, dadurch
   behält das Blatt sein Seitenformat, egal wie breit das Fenster ist. */
/* Die beiden Muster stehen unter der Tabelle und teilen die Breite in Drittel:
   Seite 1 sitzt mittig auf dem ersten Drittel, Seite 2 auf dem zweiten. So
   füllen sie die Fläche, statt eng in der Mitte zu kleben. */
@media (min-width:900px){
  .arc-befundblatt{max-width:none}
  /* Gleichmäßig verteilt: derselbe Abstand links, zwischen den Seiten, rechts */
  .arc-bb-paar{display:flex;justify-content:space-evenly;align-items:stretch;gap:0;max-width:none;margin:0}
  .arc-bb-feld{min-height:clamp(380px,44vw,470px);flex:0 0 clamp(240px,33%,330px)}
  /* Die Seite ist jetzt ein Drittel breit, nicht die halbe Spalte —
     die Grundschrift richtet sich danach, sonst läuft Seite 2 über. */
  .arc-bb-seite{font-size:clamp(7px,.92vw,8.4px)}
}
.arc-schluss p{margin:0}
.arc-schluss-satz{font-size:clamp(1.16rem,1rem + .5vw,1.5rem);line-height:1.25;
  letter-spacing:-.01em;margin:0 0 10px!important}
[data-grund="tag"] .arc-schluss-satz{color:var(--on-dawn)}
.arc-schluss em{font-style:normal;font-family:var(--f-m);font-size:.94em}
@media (max-width:639px){
  .arc-inhalt dl > div{grid-template-columns:1fr;gap:3px}
}
.arc-antwortzeit{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.08em;
  color:var(--acc);margin:18px 0 0}

/* 07 Fuß */
.arc-fuss{padding:clamp(64px,9vh,110px) 0 40px;position:relative;z-index:6}
.arc-fuss-innen{max-width:var(--spalte);margin:0 auto;padding:0 var(--rand);
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(28px,4vw,64px)}
.arc-fuss-marke .arc-rose{width:44px;height:44px}
.arc-anschrift{font-style:normal;margin:22px 0 0;line-height:1.9;color:var(--on-night-mute)}
.arc-anschrift strong{color:var(--on-night);font-weight:400;display:block}
.arc-anschrift a{color:var(--on-night-mute);text-decoration:none;border-bottom:1px solid var(--linie);
  display:inline-block;min-height:24px}
.arc-anschrift a:hover{color:var(--acc)}
.arc-fuss-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px 24px;align-items:start}
.arc-fuss-gruppe summary{list-style:none;font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc);margin-bottom:14px;cursor:default;position:relative;
  display:flex;align-items:end;justify-content:space-between;padding-bottom:10px;
  min-height:calc(2*1.5em);line-height:1.5}
.arc-fuss-gruppe summary::-webkit-details-marker{display:none}
.arc-fuss-gruppe summary::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform 420ms var(--ease)}
.arc-fuss-gruppe[open] summary::before{transform:scaleX(1)}
.arc-fuss-gruppe ul{list-style:none;margin:0;padding:0}
.arc-fuss-gruppe li{margin-bottom:2px}
.arc-fuss-gruppe a{display:flex;align-items:center;min-height:44px;padding:4px 0;color:var(--on-night-mute);
  text-decoration:none;font-size:.94rem}
.arc-fuss-gruppe a:hover{color:var(--on-night)}
.arc-fuss-schluss{max-width:var(--spalte);margin:clamp(48px,7vh,90px) auto 0;padding:24px var(--rand) 0;
  border-top:1px solid var(--linie);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.9rem;color:var(--on-night-mute)}

/* „Standortbestimmung“ ist ein langer Reiter: zwischen 900 und 1140 px wird die
   Leiste zusammengezogen, damit die Schaltfläche nicht hinausläuft. */
@media (max-width:1140px){
  :root{--wm-h:17px}
  .arc-kopf-innen{gap:14px}
  .arc-reiter{font-size:.88rem;padding:12px 9px}
  .arc-reiter::after{left:11px;right:11px}
  .arc-anfrage{margin-left:8px;padding:0 13px;font-size:.7rem;letter-spacing:.14em;gap:9px}
}

/* mittel: 640–899 */
@media (max-width:899px){
  .arc-kasten .arc-peil{max-height:min(360px,34svh)}
}
@media (max-width:899px),(max-height:699px){
}
/* Umschalten auf das Menü: nicht erst auf Telefonbreite. Zwischen 900 und
   1120 px passen die vier Reiter plus Knopf nicht mehr in die Leiste. Die
   Reiter tragen `white-space:nowrap` und können deshalb nicht unter ihre
   Textbreite schrumpfen — .arc-nav schrumpft trotzdem, und der Anfrage-Knopf
   lief rechts aus dem Bild. Stumm, ohne Scrollbalken, also unbemerkt.
   Der Bedarf reißt bei rund 1000 px; 1023 ist die nächste Stufe darüber. */
@media (max-width:1023px){
  .arc-nav{display:none}
  .arc-menuknopf{display:inline-flex;align-items:center;justify-content:center}
  .arc-kopf,[data-kopf="s1"] .arc-kopf{height:56px}
  .arc-tafel{display:none}
  /* Wortmarke kleiner, verschwindet aber genauso wie im Vollbild */
  .arc-wortmarke{--wm-h:16px;--wm-luft:12px}
}
@media (max-width:899px){
  .arc-marke .arc-rose{width:32px;height:32px}
  .arc-korn{display:none}
  .arc-einstieg-innen{align-content:end;padding-top:88px;padding-bottom:clamp(56px,12svh,110px)}
  .arc-himmel img,.arc-himmel video{width:min(78vmin,460px);height:min(78vmin,460px);
    align-self:start;margin-top:8svh}
  .arc-h1{max-width:22ch}
  .arc-fuss-innen{grid-template-columns:1fr}
  .arc-fuss-spalten{grid-template-columns:1fr 1fr}
  .arc-leistungen{grid-template-columns:1fr;border-top:0;gap:14px}
  .arc-leistung{background:var(--papier-hoch);border:1px solid var(--linie-tag);border-radius:12px;
    padding:24px 22px 26px}
  .arc-leistung::before{display:none}
  .arc-leistung:hover{background:var(--dawn)}
  .arc-ablauf-raster{grid-template-columns:var(--ab-col) minmax(0,1fr)}
  .arc-ab-tafel{display:none}
  .arc-kniff{grid-template-columns:minmax(0,1fr)}
  .arc-kniff-graf{display:none}
  .arc-schritte{height:auto;overflow:visible}
  .arc-streifen{grid-auto-rows:auto;transform:none;gap:36px}
  .arc-schritt{position:relative;opacity:1}
  /* gestapelt: die vier festen Punkte weichen einem Punkt je Schritt */
  .arc-marken{display:none}
  .arc-schritt::before{content:"";position:absolute;top:.45em;
    left:calc(-1*(var(--ab-gap) + var(--ab-col)/2));margin-left:-4.5px;
    width:9px;height:9px;border-radius:50%;background:var(--on-dawn-mute);opacity:.45;
    box-shadow:0 0 0 4px var(--dawn);
    transition:background-color 260ms var(--ease),opacity 260ms var(--ease),transform 320ms var(--ease)}
  .arc-schritt[data-erreicht="ja"]::before{background:var(--acc);opacity:1;transform:scale(1.3)}
  .arc-ablauf{height:auto}
  .arc-ablauf-fest{position:static;height:auto;padding:clamp(76px,12vh,150px) var(--rand)}
  .arc-marken{display:none}
  .arc-schritte{overflow:visible;height:auto}
  .arc-streifen{grid-auto-rows:auto;height:auto;gap:34px;transform:none}
  .arc-schritt{opacity:1}
  .arc-kurs-reihe{grid-template-columns:1fr}
  .arc-kurs-linien,.arc-fixpunkt{display:none}
  .arc-kurse{margin-top:24px}
  .arc-kurs--links,.arc-kurs--unten,.arc-kurs--rechts{transform:translate3d(0,32px,0)}
}
/* schmal: bis 639 */
@media (max-width:639px){
  .arc-peil-halter{display:none}
  .arc-peilliste{display:block}
  .arc-pl-lage{display:block}
  .arc-wischer{display:none}
  .arc-beleg-bilder{display:grid;grid-template-columns:1fr}
  .arc-iv{grid-template-columns:1fr auto;gap:2px 12px}
  .arc-iv-name{grid-column:1;grid-row:1}
  .arc-iv-wert{grid-column:2;grid-row:1}
  .arc-iv-graf{grid-column:1/-1;grid-row:2;height:44px;margin-top:6px}
  .arc-fuss-spalten{grid-template-columns:1fr}
  .arc-fuss-gruppe{border-bottom:1px solid var(--linie)}
  .arc-fuss-gruppe summary{cursor:pointer;min-height:52px;margin-bottom:0}
  .arc-fuss-gruppe summary::after{content:"+";font-family:var(--f-m)}
  .arc-fuss-gruppe[open] summary::after{content:"–"}
  .arc-fuss-gruppe[open] ul{padding-bottom:12px}
  .arc-sprungzahl{font-size:clamp(3.4rem,18vw,5rem)}
  .arc-ablauf-raster{--ab-col:28px}
  .arc-ab-tafel,.arc-kniff-graf{display:none}
}
@media (max-height:699px){
  .arc-ab-tafel,.arc-kniff-graf{display:none}
  .arc-kniff{grid-template-columns:minmax(0,1fr)}
  .arc-schritte{height:auto;overflow:visible}
  .arc-streifen{grid-auto-rows:auto;transform:none;gap:36px}
  .arc-schritt{position:relative;opacity:1}
  /* gestapelt: die vier festen Punkte weichen einem Punkt je Schritt */
  .arc-marken{display:none}
  .arc-schritt::before{content:"";position:absolute;top:.45em;
    left:calc(-1*(var(--ab-gap) + var(--ab-col)/2));margin-left:-4.5px;
    width:9px;height:9px;border-radius:50%;background:var(--on-dawn-mute);opacity:.45;
    box-shadow:0 0 0 4px var(--dawn);
    transition:background-color 260ms var(--ease),opacity 260ms var(--ease),transform 320ms var(--ease)}
  .arc-schritt[data-erreicht="ja"]::before{background:var(--acc);opacity:1;transform:scale(1.3)}
  .arc-ablauf{height:auto}
  .arc-ablauf-fest{position:static;height:auto}
  .arc-marken{display:none}
  .arc-schritte{overflow:visible;height:auto}
  .arc-streifen{grid-auto-rows:auto;height:auto;gap:34px;transform:none}
  .arc-schritt{opacity:1}
}
@media (hover:none){
  .arc-reiter:hover::after{transform:scaleX(0)}
  .arc-reiter[aria-expanded="true"]::after{transform:scaleX(1)}
  .arc-anfrage:hover{background-size:0 100%;color:inherit}
  .arc-anfrage:hover span,.arc-anfrage:hover i{color:inherit}
  .arc-anfrage:hover i{transform:none}

  .arc-verweis:hover::after{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .arc-js .arc-enth{opacity:1;transform:none}
  .arc-einstieg-innen{filter:none;transform:none;opacity:1}
  .arc-kurs{opacity:1;transform:none}
  .arc-pfad-lauf{animation:none;width:auto;flex-wrap:wrap}
  .arc-pfad-lauf span{white-space:normal}
  .arc-korn{animation:none}
}


/* Eigene Eigenschaften als Regeln statt im Inline-Stil. */
[data-css="--d:0ms"]{--d:0ms}
[data-css="--w:88"]{--w:88}
[data-css="--w:72"]{--w:72}
[data-css="--w:80"]{--w:80}
[data-css="--w:62"]{--w:62}
[data-css="--w:96"]{--w:96}
[data-css="--w:78"]{--w:78}
[data-css="--w:52"]{--w:52}
[data-css="--w:38"]{--w:38}
[data-css="--w:36"]{--w:36}
[data-css="--w:82"]{--w:82}
[data-css="--w:46"]{--w:46}
[data-css="--w:92"]{--w:92}
[data-css="--w:64"]{--w:64}
[data-css="--w:84"]{--w:84}
[data-css="--w:48"]{--w:48}
[data-css="--w:86"]{--w:86}
[data-css="--w:70"]{--w:70}
[data-css="--w:76"]{--w:76}
[data-css="--w:74"]{--w:74}
[data-css="--k:0"]{--k:0}
[data-css="--k:1"]{--k:1}
[data-css="--k:2"]{--k:2}
[data-css="--w:24"]{--w:24}
[data-css="--k:3"]{--k:3}
[data-css="--w:100"]{--w:100}
[data-css="--w:14"]{--w:14}
[data-css="--i:0"]{--i:0}
[data-css="--i:1"]{--i:1}
[data-css="--i:2"]{--i:2}
[data-css="--i:3"]{--i:3}
[data-css="--i:4"]{--i:4}
[data-css="--i:5"]{--i:5}
[data-css="--i:6"]{--i:6}
[data-css="--i:7"]{--i:7}
[data-css="--i:8"]{--i:8}
[data-css="--i:9"]{--i:9}
[data-css="--i:10"]{--i:10}
[data-css="--i:11"]{--i:11}
[data-css="--i:12"]{--i:12}
[data-css="--i:13"]{--i:13}
[data-css="--i:14"]{--i:14}
[data-css="--i:15"]{--i:15}
[data-css="--i:16"]{--i:16}
[data-css="--i:17"]{--i:17}
[data-css="--i:18"]{--i:18}
[data-css="--i:19"]{--i:19}
[data-css="--i:20"]{--i:20}
[data-css="--i:21"]{--i:21}
[data-css="--i:22"]{--i:22}
[data-css="--i:23"]{--i:23}
[data-css="--i:24"]{--i:24}
[data-css="--i:25"]{--i:25}
[data-css="--i:26"]{--i:26}
[data-css="--i:27"]{--i:27}
[data-css="--i:28"]{--i:28}
[data-css="--i:29"]{--i:29}
[data-css="--i:30"]{--i:30}
[data-css="--i:31"]{--i:31}
[data-css="--i:32"]{--i:32}
[data-css="--i:33"]{--i:33}
[data-css="--i:34"]{--i:34}
[data-css="--i:35"]{--i:35}
[data-css="--i:36"]{--i:36}
[data-css="--i:37"]{--i:37}
[data-css="--i:38"]{--i:38}
[data-css="--i:39"]{--i:39}
[data-css="--i:40"]{--i:40}
[data-css="--i:41"]{--i:41}
[data-css="--i:42"]{--i:42}
[data-css="--i:43"]{--i:43}
[data-css="--i:44"]{--i:44}
[data-css="--i:45"]{--i:45}
[data-css="--i:46"]{--i:46}
[data-css="--i:47"]{--i:47}
[data-css="--i:48"]{--i:48}
[data-css="--i:49"]{--i:49}
[data-css="--i:50"]{--i:50}
[data-css="--i:51"]{--i:51}
[data-css="--i:52"]{--i:52}
[data-css="--i:53"]{--i:53}
[data-css="--i:54"]{--i:54}
[data-css="--i:55"]{--i:55}
[data-css="--i:56"]{--i:56}
[data-css="--i:57"]{--i:57}
[data-css="--i:58"]{--i:58}
[data-css="--i:59"]{--i:59}
[data-css="--i:60"]{--i:60}
[data-css="--i:61"]{--i:61}
[data-css="--i:62"]{--i:62}
[data-css="--i:63"]{--i:63}
[data-css="--i:64"]{--i:64}
[data-css="--i:65"]{--i:65}
[data-css="--i:66"]{--i:66}
[data-css="--i:67"]{--i:67}
[data-css="--i:68"]{--i:68}
[data-css="--i:69"]{--i:69}
[data-css="--i:70"]{--i:70}
[data-css="--i:71"]{--i:71}
[data-css="--i:72"]{--i:72}
[data-css="--i:73"]{--i:73}
[data-css="--i:74"]{--i:74}
[data-css="--i:75"]{--i:75}
[data-css="--i:76"]{--i:76}
[data-css="--i:77"]{--i:77}
[data-css="--i:78"]{--i:78}
[data-css="--i:79"]{--i:79}
[data-css="--i:80"]{--i:80}
[data-css="--i:81"]{--i:81}
[data-css="--i:82"]{--i:82}
[data-css="--i:83"]{--i:83}
[data-css="--i:84"]{--i:84}
[data-css="--i:85"]{--i:85}
[data-css="--i:86"]{--i:86}
[data-css="--i:87"]{--i:87}
[data-css="--i:88"]{--i:88}
[data-css="--i:89"]{--i:89}
[data-css="--i:90"]{--i:90}
[data-css="--i:91"]{--i:91}
[data-css="--i:92"]{--i:92}
[data-css="--i:93"]{--i:93}
[data-css="--i:94"]{--i:94}
[data-css="--i:95"]{--i:95}
[data-css="--i:96"]{--i:96}
[data-css="--i:97"]{--i:97}
[data-css="--i:98"]{--i:98}
[data-css="--i:99"]{--i:99}
[data-css="--st:.16"]{--st:.16}
[data-css="--st:.28"]{--st:.28}
[data-css="--st:.50"]{--st:.50}
[data-css="--st:.74"]{--st:.74}
[data-css="--st:1"]{--st:1}


/* Der Beleg ist auf vier Zeilen gekürzt. Ein Abschnitt von zweihundert Pixeln
   ist für die Akzentspur zu kurz: der Wechsel nach Glut käme an und wäre schon
   wieder vorbei. Deshalb bekommt er Lauf — Fensterhöhe statt Texthöhe. */
/* Der Schub zieht den Abschnitt um 42svh nach oben; die Höhe muss das
   mitrechnen, sonst bleibt vom Lauf nichts übrig. */
[data-block="04-beleg"]{min-height:calc(42svh + 88svh);justify-content:center}
@media (max-width:700px){
  [data-block="04-beleg"]{min-height:calc(24svh + 92svh)}
}


/* ══ Sternenfeld im Belegabschnitt ═══════════════════════════════════════
   Das große Feld liegt fest im Fenster (.arc-feld) und wird von den Blättern
   überdeckt — sie tragen eine deckende Nachtfläche, sonst schiene das Papier
   darunter durch. Der Beleg bekommt deshalb sein eigenes Feld im Abschnitt,
   wie die Leistungsseiten. Dichte und Helligkeit wie im großen Feld. */
[data-block="04-beleg"]{position:relative;isolation:isolate}
.arc-psterne{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none;display:block}
[data-block="04-beleg"] > *:not(.arc-psterne){position:relative;z-index:1}


/* ══ Der Akzent bleibt im hellen Abschnitt hell lesbar ═══════════════════════
   start.js schreibt --acc als EINEN Wert an <html> und mischt ihn über die
   Peillinie bei 42 % Fensterhöhe von Abschnitt zu Abschnitt. Das ist die
   Choreographie und bleibt. Sie hatte aber eine Nebenwirkung: solange die
   Leselinie noch in einem Nachtabschnitt steht, trägt ein bereits sichtbarer
   Papierabschnitt den NACHT-Akzent — #93A0B4 auf #CFC6AE ist ein Kontrast von
   1,56, und die Aufschrift „02 — So läuft es ab" war nicht zu lesen.

   Alle drei hellen Abschnitte melden ohnehin denselben Tagakzent
   (data-akzent="#0E5C9E"); unter ihnen gibt es also nichts zu überblenden.
   Sie klemmen ihn deshalb fest. Gemischt wird weiter — nur nicht mehr über
   die Kante zwischen Nacht und Papier hinweg, und genau dort war es falsch.
   Dieselbe Regel steht so schon in analyse.css, preise.css und
   fallstudie.css; start.css hatte sie als einzige nicht. */
[data-grund="tag"][data-akzent],
[data-grund="tag"] [data-akzent]{--acc:var(--nadel-tag)}
/* Der Hinweis „Zeigen für Einzelheiten" ist aus dem Papier-Block bewusst
   ausgenommen (p:not(.arc-l-hinweis)), weil er den Akzent tragen soll — nur
   sagte das keine Regel, und er erbte --on-night-mute: rgb(154,169,192) auf
   #F7F5EE, Kontrast 2,05. */
[data-grund="tag"] .arc-leistung .arc-l-hinweis{color:var(--acc)}