/* Arcturis — /website-analyse.
   Hauptstil der Startseite: Graphitglas-Kopfleiste mit Reitern, Papiertöne mit
   Takt, dunkler Fußbereich, dieselbe Typografie und dasselbe Enthüllen.
   Grund durchgehend Tag, Akzent im Zustand Peilung (--nadel-tag).
   Kein Sternenfeld, keine Kreuzpeilung, kein Feststellen der Seite.
   Setzt tokens.css voraus. Wird in Astro zu src/styles/analyse.css. */

@property --acc { syntax:'<color>'; inherits:true; initial-value:#0E5C9E; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
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:var(--acc)}
: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-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}

/* Korn: das Papier ist sonst ein flacher Wert und liest sich digital.
   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}}

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

/* Enthüllen: blockweise von unten, versetzt, keine Weichzeichnung.
   Den Wartezustand setzt das Skript selbst — fällt es aus oder meldet der
   Beobachter nichts, steht der Text sichtbar da statt unsichtbar. */
.arc-js [data-enth="warten"]{opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease);transition-delay:var(--d,0ms)}
.arc-js [data-enth="da"]{opacity:1;transform:none;
  transition:opacity 420ms var(--ease),transform 420ms var(--ease);transition-delay:var(--d,0ms)}

/* --- Kopfleiste ------------------------------------------------------- */
:root{--kopf:#070C1A}
/* Die Leiste ist ganz oben durchsichtig — aber nur über dunklem Grund. Auf
   Papier verlöre sie jede Präsenz, und das Zeichen ist für Dunkel gezeichnet;
   dort steht sie ab dem ersten Pixel auf Glas. Welcher Fall gilt, entscheidet
   der erste Abschnitt der Seite — analyse.js schreibt ihn nach data-kopf-grund.
   Der Grundzustand hier ist Glas: fällt das Skript aus, ist die Leiste lesbar,
   nicht durchsichtig. Alles andere — Verlauf, Kante, Akzentlinie, Höhenwechsel
   88 → 64 — ist wörtlich die Fassung aus start.css. */
.arc-kopf{--acc:var(--nadel);position:fixed;top:0;left:0;right:0;z-index:100;height:88px;
  transition:height 300ms var(--ease),background-color 300ms var(--ease),
    box-shadow 300ms var(--ease);color:var(--on-night);
  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)}
/* Ganz oben UND über Nacht: nichts. Beides muss zutreffen. */
[data-kopf="s0"][data-kopf-grund="nacht"] .arc-kopf{
  background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* Die Haarlinie ist die Anzeige: sie trägt den Akzent, eingezogen voll. */
.arc-kopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--acc);opacity:.45;transition:opacity 300ms var(--ease)}
[data-kopf="s1"] .arc-kopf::after{opacity:1}
[data-kopf="s0"][data-kopf-grund="nacht"] .arc-kopf::after{opacity:0}
[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. */
.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;
  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"],
.arc-reiter[aria-current="page"]{color:var(--chrome-hi)}
.arc-reiter[aria-current="page"]{color:var(--acc)}
.arc-reiter:hover::after,.arc-reiter[aria-expanded="true"]::after,
.arc-reiter[aria-current="page"]::after{transform:scaleX(1)}
/* Der Reiter der Gruppe, in der die Seite liegt — schwächer als die Seite
   selbst. Ein Klapptafel-Knopf kann kein aria-current tragen: er ist nicht das
   Ziel. Der Ort steht per aria-current am Verweis in der Tafel. */
.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. Wörtlich die Fassung aus start.css. */
.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{position:relative;z-index:1;letter-spacing:inherit;
  transition:color 200ms var(--ease)}
/* Die Anfrageseite selbst: der Knopf ist dort ausgefüllt statt umrandet. */
.arc-anfrage[aria-current="page"]{border-color:var(--acc);background-size:100% 100%;
  color:var(--kopf)}
.arc-anfrage[aria-current="page"] i,
.arc-anfrage[aria-current="page"] span{color:var(--kopf)}

.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}
.arc-mobil{--acc:var(--nadel);position:fixed;top:56px;right:0;bottom:0;
  width:min(84vw,360px);z-index:110;
  background:var(--kopf);border-left:1px solid var(--linie);padding:0;
  display:flex;flex-direction:column;overflow-y:auto;color:var(--on-night);
  transition: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)}

@media (max-width:1120px){
  :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}
}
/* 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}
  .arc-wortmarke{--wm-h:16px;--wm-luft:12px}
}
@media (max-width:899px){
  .arc-marke .arc-rose{width:32px;height:32px}
}

/* --- Grundraster: jeder Abschnitt trägt seinen eigenen Papierton -------- */
main{position:relative;z-index:2;overflow-x:clip}
[data-grund]{position:relative;background:var(--eigen)}
[data-grund="tag"]{--eigen:var(--dawn);--acc:var(--nadel-tag);color:var(--on-dawn)}
[data-grund="tag"][data-ton="tief"]{--eigen:var(--dawn-deep)}
[data-grund="tag"][data-ton="dunkel"]{--eigen:var(--dawn-dim);--linie-tag:#C4BEAB}

.arc-block{width:100%;margin:0;position:relative;
  padding-block:clamp(56px,9vh,116px);
  padding-inline:max(var(--rand),calc((100% - var(--spalte))/2))}
.arc-block--erst{padding-block-start:calc(88px + clamp(30px,6vh,92px))}
/* Dieselbe Schwelle wie die Leiste: dort wird sie 56 px hoch. */
@media (max-width:1023px){
  .arc-block--erst{padding-block-start:calc(56px + clamp(26px,5vh,66px))}
}

.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}
.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-dawn-mute)}
.arc-h1{font-size:var(--t-h1);line-height:1.06;margin:0 0 26px;max-width:22ch;font-weight:300}
.arc-h2{font-size:var(--t-h2);line-height:1.08;margin:0 0 30px;max-width:22ch}
.arc-lauf{max-width:66ch;margin:0 0 22px;color:var(--on-dawn-mute)}
.arc-lauf--lead{font-size:var(--t-lead);line-height:1.5;color:var(--on-dawn);max-width:54ch}
.arc-lauf strong{color:var(--on-dawn);font-weight:500}
.arc-lauf em{font-style:italic;color:var(--on-dawn)}
.arc-mono-klein{font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.08em;
  color:var(--on-dawn-mute);margin:28px 0 0}
.arc-mono-klein strong{font-weight:400;color:var(--on-dawn)}
.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-dawn)}
.arc-verweis{font-size:1.02rem;text-decoration:none;color:var(--on-dawn);
  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{color:var(--on-dawn)}
.arc-verweis:hover::after{background:var(--acc)}

/* --- 01 Kopf ---------------------------------------------------------- */
.arc-eckdaten{margin:26px 0 0;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.arc-tastenreihe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:32px 0 0}
.arc-taste{appearance:none;background-color:transparent;
  display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;
  border:1px solid color-mix(in oklab,var(--on-dawn) 24%,transparent);color:var(--on-dawn);
  text-decoration:none;font-family:var(--f-m);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;cursor:pointer;
  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(--dawn)}
.arc-taste:hover i{transform:translateX(3px)}
.arc-taste-neben{position:relative;display:inline-flex;align-items:center;min-height:44px;
  color:var(--on-dawn-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-dawn)}
.arc-taste-neben:hover::after{background:var(--acc)}

/* --- 02 Zwei Gruppen -------------------------------------------------- */
.arc-gruppen{display:grid;gap:clamp(26px,4vh,48px);max-width:74ch}
.arc-gruppe dl{margin:0;padding:0;border-top:1px solid var(--linie-tag)}
.arc-gruppe-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin:0 0 6px;font-family:var(--f-m);font-size:var(--t-mark);letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dawn-mute)}
.arc-gruppe-kopf b{font-weight:400;color:var(--acc);font-variant-numeric:tabular-nums}
.arc-gruppe--ziel .arc-gruppe-kopf{color:var(--on-dawn);font-size:.84rem;letter-spacing:.2em}
.arc-gz{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:6px 28px;
  padding:15px 0;border-bottom:1px solid var(--linie-tag)}
.arc-gz dt{margin:0;font-weight:500;color:var(--on-dawn);font-size:1.02rem}
.arc-gz dd{margin:0;color:var(--on-dawn-mute)}
@media (max-width:600px){.arc-gz{grid-template-columns:minmax(0,1fr)}}
/* A2 · Die zwei Gruppen bauen sich nacheinander auf. Die Pause ist der Effekt. */
.arc-js .arc-gz[data-enth="warten"]{opacity:0;transform:translateY(9px);
  transition:opacity 460ms var(--ease),transform 460ms var(--ease);
  transition-delay:var(--d,0ms)}
.arc-js .arc-gruppen[data-lauf="an"] .arc-gz{opacity:1;transform:none}

/* --- 03 Der Musterbericht -------------------------------------------- */
/* Zwei Papierseiten, leicht versetzt, mit echter Papierkante. In Ruhe feine
   Haarlinien statt Text. Aufgeschlagen wächst die Seite auf Lesegröße, die
   Haarlinien werden zu echtem Text, die Nachbarseite dunkelt ab. Die
   Innentypografie ist in em gesetzt, damit alles mitwächst. */
.arc-muster{margin:clamp(28px,4vh,44px) 0 0;max-width:680px;position:relative}
.arc-mb-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-mb-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.arc-mb-feld{position:relative;display:grid;min-height:clamp(300px,34vw,392px)}
.arc-mb-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:pointer;
  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:rotate(var(--kipp,0deg));transform-origin:50% 50%;
  transition:transform 420ms var(--ease),box-shadow 420ms var(--ease),
    opacity 420ms var(--ease),background-color 320ms var(--ease),
    border-color 320ms var(--ease),border-radius 420ms var(--ease),
    font-size 420ms var(--ease),padding 420ms var(--ease)}
.arc-mb-seite:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.arc-mb-seite{scrollbar-width:thin;scrollbar-color:var(--linie-tag) transparent}
.arc-mb-seite::-webkit-scrollbar{width:5px}
.arc-mb-seite::-webkit-scrollbar-thumb{background:var(--linie-tag);border-radius:3px}
.arc-mb-seite::-webkit-scrollbar-track{background:transparent}
@media (min-width:900px){.arc-mb-feld[data-feld="2"]{margin-top:20px}}
.arc-mb-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-mb-kopf b{font-weight:400;color:var(--acc)}
.arc-mb-zeile{display:grid;grid-template-rows:auto 1fr;align-content:start}
.arc-mb-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-mb-zeile > b > u{text-decoration:none;color:var(--acc);margin-right:.5em;
  font-variant-numeric:tabular-nums}
.arc-mb-zeile > .arc-str,.arc-mb-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(--acc)}
.arc-mb-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-mb-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-mb-hinweis::before{content:"";width:16px;height:1px;background:currentColor;flex:0 0 auto}
.arc-muster[data-offen="1"] .arc-mb-hinweis,
.arc-muster[data-offen="2"] .arc-mb-hinweis{opacity:0}
.arc-mb-unter{margin:18px 0 0;max-width:58ch;color:var(--on-dawn-mute)}
.arc-mb-unter strong{color:var(--on-dawn);font-weight:500}
.arc-mb-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-mb-zu{position:absolute;top:10px;right:10px;z-index:135;display:none;appearance:none;
  width:44px;height:44px;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%}
.arc-mb-zu:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* Der Schließknopf der Handyfassung liegt außerhalb des rollenden Rahmens —
   dort kann er nicht mitscrollen und nicht abgeschnitten werden. */
.arc-mb-zu-fest{display:none;appearance:none;width:44px;height:44px;
  border:1px solid var(--linie-tag);background:var(--papier-hoch);
  color:var(--on-dawn);font-family:var(--f-m);font-size:1.15rem;cursor:pointer;
  align-items:center;justify-content:center;border-radius:50%;
  box-shadow:0 6px 18px -8px rgba(3,5,10,.6)}
.arc-mb-zu-fest:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

@media (min-width:900px){
  /* Zeiger darüber: die berührte Seite hebt sich um zwei Grad und wird eine
     Spur heller. Die andere bleibt liegen. */
  .arc-muster[data-offen="0"] .arc-mb-feld[data-feld="1"][data-zeigt="ja"] .arc-mb-seite{--kipp:-2deg}
  .arc-muster[data-offen="0"] .arc-mb-feld[data-feld="2"][data-zeigt="ja"] .arc-mb-seite{--kipp:2deg}
  .arc-muster[data-offen="0"] .arc-mb-feld[data-zeigt="ja"] .arc-mb-seite{
    background:#FBFAF4;box-shadow:0 1.4em 3em -1.6em rgba(20,18,15,.5);
    border-color:color-mix(in oklab,var(--acc) 26%,var(--linie-tag))}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"],
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"]{z-index:40}
  /* Aufgeschlagen ist die Seite ein Bogen: Seite eins klappt nach rechts auf,
     Seite zwei nach links. So bleibt der Bogen in der Spalte, und die Schrift
     wird größer statt kleiner. */
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-mb-seite,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-mb-seite{
    --kipp:0deg;z-index:40;border-radius:16px;overflow:auto;cursor:default;
    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-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-mb-seite{
    left:0;transform-origin:0 50%;transform:translateY(-50%)}
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-mb-seite{
    right:0;transform-origin:100% 50%;transform:translateY(-50%)}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-str,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-str{opacity:0}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-txt,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-txt{
    opacity:1;transition-delay:150ms}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="2"] .arc-mb-seite,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="1"] .arc-mb-seite{opacity:.3}
  /* Die Schließfläche gehört an die Ecke des aufgeschlagenen Bogens, nicht an
     das kleine Feld darunter — der Bogen ist breiter und höher als sein Feld.
     Darum hängt sie am Blatt selbst. */
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-mb-seite,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-mb-seite{
    padding-right:3.6em}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-mb-zu,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-mb-zu{display:flex;z-index:60;
    position:fixed;top:auto;left:auto;right:auto}
}
@media (min-width:900px) and (max-width:1080px){
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-mb-seite,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-mb-seite{width:min(500px,184%)}
}

/* Telefon: zwei Miniaturseiten sind auf einem Handy nur leere Fläche.
   Stattdessen zwei ruhige Zeilen; Antippen legt die Seite über den Bildschirm. */
@media (max-width:899px){
  .arc-mb-paar{grid-template-columns:1fr;gap:10px}
  .arc-mb-feld{min-height:0}
  .arc-mb-seite{height:auto;overflow:hidden;transform:none;box-shadow:none;
    align-items:stretch;gap:0;font-size:13px;padding:0;border-radius:9px}
  .arc-mb-seite:active{background:var(--dawn-deep)}
  /* R4 · Wie beim Befundblatt: erst mit Skript gefaltet. */
  .arc-js .arc-mb-seite > .arc-mb-kopf,
  .arc-js .arc-mb-seite > .arc-mb-zeile{display:none}
  .arc-mb-seite > .arc-mb-fuss{width:100%;margin:0;padding:18px;border-top:0;
    min-height:44px;align-items:center;font-size:.76rem;color:var(--on-dawn)}
  .arc-mb-seite > .arc-mb-fuss span:last-child{color:var(--acc)}

  .arc-muster[data-offen="1"] .arc-mb-schleier,
  .arc-muster[data-offen="2"] .arc-mb-schleier{opacity:0;visibility:hidden}
  /* Kein festes Fenster: die angetippte Seite klappt an ihrem Platz auf, und
     die Seite selbst rollt normal weiter. Ein festgestelltes Fenster ist in
     eingebetteten Ansichten nicht verlässlich erreichbar — man kam nicht mehr
     an die Schließfläche. */
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"],
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"]{position:relative}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-mb-seite,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-mb-seite{
    position:static;width:100%;height:auto;overflow:visible;
    font-size:13.2px;padding:1.7em 1.5em 1.5em;gap:1.4em;
    border-color:color-mix(in oklab,var(--acc) 40%,var(--linie-tag))}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-mb-seite > .arc-mb-kopf,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-mb-seite > .arc-mb-kopf{
    display:flex;padding-right:3.4em}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-mb-seite > .arc-mb-zeile,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-mb-seite > .arc-mb-zeile{
    display:grid}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-mb-seite > .arc-mb-fuss,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-mb-seite > .arc-mb-fuss{
    padding:1em 0 0;border-top:1px solid var(--linie-tag);
    font-size:.78em;color:var(--on-dawn-mute)}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-str,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-str{display:none}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-txt,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-txt{
    opacity:1;transition-delay:80ms}
  .arc-muster[data-offen="1"] .arc-mb-feld[data-feld="1"] .arc-mb-zu,
  .arc-muster[data-offen="2"] .arc-mb-feld[data-feld="2"] .arc-mb-zu{
    display:flex;position:absolute;top:9px;right:9px;z-index:5}
  .arc-mb-zu-fest{display:none!important}
}
/* Kein Feststellen der Seite: das Muster klappt an seinem Platz auf. */

.arc-nur-maus{display:inline}
.arc-nur-tipp{display:none}
@media (max-width:899px){
  .arc-nur-maus{display:none}
  .arc-nur-tipp{display:inline}
}

/* --- 04 Drei Blickwinkel --------------------------------------------- */
.arc-blick{margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--linie-tag);
  max-width:74ch}
.arc-blick li{padding:19px 0;border-bottom:1px solid var(--linie-tag);
  display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:8px 28px}
.arc-blick b{font-weight:400;font-size:var(--t-h3);letter-spacing:-.01em;color:var(--on-dawn);
  display:flex;align-items:baseline;gap:.7em}
.arc-blick b::before{content:"";width:22px;height:1px;background:var(--acc);flex:0 0 auto;
  transform:translateY(-.35em)}
.arc-blick span{color:var(--on-dawn-mute)}
@media (max-width:620px){.arc-blick li{grid-template-columns:minmax(0,1fr)}}

/* --- 05 Die Grenze --------------------------------------------------- */
.arc-grenze{max-width:62ch;padding:4px 0 4px 22px;border-left:2px solid var(--acc)}
.arc-grenze p{margin:0 0 12px;color:var(--on-dawn-mute)}
.arc-grenze p:last-child{margin-bottom:0}
.arc-grenze-satz{font-size:var(--t-h3);line-height:1.25;color:var(--on-dawn)}
.arc-grenze em{font-style:italic;color:var(--on-dawn)}
.arc-grenze strong{font-weight:500;color:var(--on-dawn)}

/* --- 07 Fragen ------------------------------------------------------- */
/* A4 · Aufklappbar, beim Öffnen zeichnet sich eine Linie von links. */
.arc-fragen{margin:26px 0 0;max-width:74ch;border-top:1px solid var(--linie-tag)}
.arc-frage{border-bottom:1px solid var(--linie-tag);position:relative}
.arc-frage > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  justify-content:space-between;gap:20px;padding:18px 0;min-height:44px;
  font-size:1.06rem;color:var(--on-dawn)}
.arc-frage > summary::-webkit-details-marker{display:none}
.arc-frage > summary::after{content:"+";font-family:var(--f-m);font-size:1.1rem;
  line-height:1.4;color:var(--acc);flex:0 0 auto}
.arc-frage[open] > summary::after{content:"–"}
.arc-frage::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 420ms var(--ease)}
.arc-frage[open]::after{transform:scaleX(1)}
.arc-frage-text{padding:0 0 22px;max-width:62ch}
.arc-frage-text p{margin:0 0 12px;color:var(--on-dawn-mute)}
.arc-frage-text p:last-child{margin-bottom:0}

/* --- 08 Das Formular ------------------------------------------------- */
.arc-formraster{display:grid;gap:clamp(26px,3.6vw,54px);align-items:start;margin-top:30px}
@media (min-width:1000px){
  .arc-formraster{grid-template-columns:minmax(0,1fr) 236px}
}
.arc-form{max-width:38rem}
.arc-feld{display:grid;gap:7px;margin:0 0 20px;align-content:start}
.arc-feld > label{font-size:.98rem;color:var(--on-dawn);font-weight:500}
.arc-feld > label i{font-style:normal;font-weight:400;color:var(--on-dawn-mute)}
/* Ein Fehlersatz darf das Nachbarfeld nicht verformen: die Felder wachsen
   nicht in die Höhe der Zeile hinein, sie stehen oben. */
.arc-feld input,.arc-feld textarea{align-self:start}
.arc-feld input,.arc-feld textarea{font-family:var(--f-b);font-size:16px;line-height:1.5;
  color:var(--on-dawn);background:var(--papier-hoch);
  border:1px solid var(--linie-tag);border-radius:3px;padding:13px 14px;
  min-height:50px;width:100%;
  transition:border-color 220ms var(--ease),background-color 220ms var(--ease)}
.arc-feld textarea{min-height:112px;resize:vertical}
.arc-feld input:hover,.arc-feld textarea:hover{
  border-color:color-mix(in oklab,var(--on-dawn) 26%,var(--linie-tag))}
.arc-feld input:focus-visible,.arc-feld textarea:focus-visible{
  outline:2px solid var(--acc);outline-offset:3px;border-color:var(--acc);background:var(--dawn)}
.arc-feld-hinweis{font-family:var(--f-m);font-size:.74rem;letter-spacing:.04em;
  color:var(--on-dawn-mute);margin:0}
.arc-feld-fehler{font-size:.9rem;color:var(--glut-tag);margin:0;display:none}
.arc-feld[data-fehler="ja"] .arc-feld-fehler{display:block}
.arc-feld[data-fehler="ja"] input,.arc-feld[data-fehler="ja"] textarea{border-color:var(--glut-tag)}
.arc-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.arc-form-fuss{margin:24px 0 0;display:grid;gap:16px;justify-items:start}
.arc-form-recht{margin:0;font-size:.92rem;color:var(--on-dawn-mute);max-width:52ch}
.arc-neben{border-top:1px solid var(--linie-tag);padding-top:18px}
@media (min-width:1000px){
  .arc-neben{border-top:0;border-left:1px solid var(--linie-tag);padding:2px 0 2px 24px}
}
.arc-neben p{margin:0 0 14px;font-family:var(--f-m);font-size:.78rem;letter-spacing:.06em;
  line-height:1.6;color:var(--on-dawn-mute)}
.arc-neben p:last-child{margin-bottom:0}
.arc-neben strong{font-weight:400;color:var(--on-dawn)}

/* A6 · Absenden: die Felder fallen auf eine Zeile zusammen, an ihrer Stelle
   steht die Bestätigung in Monoschrift — dieselbe Auszeichnung wie das
   Prüfpfad-Band der Startseite. Kein Ladekringel. */
.arc-form-koerper{transition:opacity 200ms var(--ease),max-height 420ms var(--ease),
  transform 420ms var(--ease);max-height:220svh;overflow:hidden}
.arc-form[data-stand="ab"] .arc-form-koerper{opacity:0;max-height:0;transform:translateY(-8px);
  visibility:hidden}
.arc-bestaetigung{display:none;margin:0;padding:20px 22px;
  border:1px solid color-mix(in oklab,var(--acc) 34%,var(--linie-tag));
  border-left:2px solid var(--acc);background:var(--papier-hoch);
  font-family:var(--f-m);font-size:.9rem;line-height:1.7;color:var(--on-dawn)}
.arc-form[data-stand="ab"] .arc-bestaetigung{display:block;
  animation:arc-best-auf 420ms var(--ease) both}
.arc-bestaetigung b{display:block;font-weight:400;color:var(--acc);letter-spacing:.04em}
.arc-bestaetigung span{display:block;color:var(--on-dawn-mute)}
@keyframes arc-best-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .arc-form-koerper{transition:none}
  .arc-form[data-stand="ab"] .arc-bestaetigung{animation:none}
}

/* --- Abschluss der Seite --------------------------------------------- */
.arc-weiter{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;
  margin:clamp(34px,5vh,58px) 0 0;padding-top:24px;border-top:1px solid var(--linie-tag)}
.arc-weiter a{font-family:var(--f-m);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--on-dawn);
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid color-mix(in oklab,var(--acc) 40%,transparent);
  transition:border-color 200ms var(--ease),color 200ms var(--ease)}
.arc-weiter a:hover{color:var(--acc);border-bottom-color:var(--acc)}

/* --- Fußbereich ------------------------------------------------------- */
.arc-fuss{--acc:var(--nadel);background:var(--n0);color:var(--on-night);
  padding:clamp(64px,9vh,110px) 0 40px;position:relative;z-index:6;
  border-top:1px solid var(--linie)}
.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;display:inline-block;
  min-height:24px}
.arc-anschrift a:hover{color:var(--acc)}
.arc-antwortzeit{margin:16px 0 0;font-size:.9rem;color:var(--on-night-mute)}
.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)}
@media (max-width:899px){
  .arc-fuss-innen{grid-template-columns:1fr}
  .arc-fuss-spalten{grid-template-columns:1fr 1fr}
}
@media (max-width:639px){
  .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-fuss-gruppe[data-immer="offen"] summary::after{content:""}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .arc-js [data-enth="warten"]{opacity:1;transform:none}
}



/* ══ Der Musterbericht ════════════════════════════════════════════════════
   1:1 übernommen von der früheren Startseite (start.css): dieselbe Bauform,
   dieselbe Mechanik, dieselben Maße — nur der Text ist neu. Die alten
   .arc-mb-Regeln darüber tragen nichts mehr; sie stören auch nicht. */
/* 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%}

/* 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 steht die Karte
     vollständig lesbar da. */
  .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}
}

.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)}}

/* 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)}
}

/* Der geschlossene Bogen ist Papier von fester Größe. Die Zeilen dieses
   Berichts sind länger als die der alten Startseite; ohne Deckel zieht der
   verborgene Text das Feld in die Länge — aufgeschlagen rollt der Bogen
   ohnehin. */
@media (min-width:900px){
  .arc-bb-feld{height:clamp(380px,44vw,470px)}
  .arc-bb-seite{min-height:0}
}