/* ===================== Polaris1 · "What actually happens when you run a test" =====================
   Everything is scoped under .p1hiw and prefixed p1-, so it will not clash with the rest of the site.
   Fonts: die Systemstapel der Website -- kein Google Fonts (siehe Variablen unten).
   The UI panels are drawn at a fixed design width of 640px and scaled to their column by the script. */

.p1hiw{
  /* Eigener dunkler Grund, nicht geerbt.
     Die Vorlage war als "transparent section, sits on the page background"
     gedacht und setzte voraus, dass die Seite dunkel ist. polaris1.dev laeuft
     aber standardmaessig im hellen Modus (`html.light`) -- dort stand am
     30.09.2026 weisse Schrift auf weissem Grund, und der ganze Abschnitt war
     unlesbar. Umfaerben liess er sich nicht: die Tafeln, der Schein und die
     Mint-Akzente sind durchgehend fuer Dunkel gezeichnet.
     Also ist er jetzt ein dunkles Band -- in beiden Modi dasselbe, und im
     dunklen faellt es mit der Umgebung zusammen. */
  /* Der dunkle Teil der Seite, uebernommen von `.flband`.
     Die Startseite ist im hellen Modus weiss; dunkel sind nur der Hero und der
     Abschnitt darunter, und die beiden sind als *eine* Flaeche gedacht. Die
     alte `.flband` hat das getragen: derselbe Verlauf, beginnend mit `#0a1a33`
     -- genau der Farbe, mit der der Hero aufhoert -- und unten abgerundet, weil
     dort der dunkle Teil der Seite endet und wieder Weiss kommt.
     Beim Ersetzen des Abschnitts ist dieser Grund mit verschwunden. Ein eigener
     Verlauf war der falsche Weg: er musste eine Farbe raten, die hier bereits
     festgelegt war. Jetzt steht dieselbe Flaeche wieder da.
     Die zwei gruenen Tupfer aus `.flband` fehlen absichtlich -- `.p1-glow`
     dieses Abschnitts uebernimmt diese Rolle bereits. */
  background:linear-gradient(#0a1a33 0%,#08142a 14%,#060e1e 38%,#050a14 68%,#04070e 100%);
  border-bottom-left-radius:clamp(1.25rem,2.5vw,2rem);
  border-bottom-right-radius:clamp(1.25rem,2.5vw,2rem);
  --p1-mint:#5ceda3; --p1-ink:#04180f; --p1-blue:#6cb6ec; --p1-amber:#e7b04c; --p1-red:#ff5d6c; --p1-orange:#ff9f5a;
  --p1-text:#fff; --p1-muted:rgba(255,255,255,.72); --p1-line:rgba(255,255,255,.12);
  /* Dieselben Stapel wie der Rest der Seite. Die Vorlage nannte hier Inter und
     JetBrains Mono von Google Fonts -- beide sind hier heraus, weil die Website
     seit 23.09.2026 keine Schrift mehr von Google laedt (IP-Uebermittlung ohne
     Einwilligung). Das Gestaltungsraster bleibt: es sind dieselben Groessen und
     Abstaende, nur in der Systemschrift, in der auch alles daneben steht. */
  --p1-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --p1-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  position:relative; overflow:hidden; color:var(--p1-text); font-family:var(--p1-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding:clamp(72px,11vh,140px) 0 clamp(40px,6vh,80px);
}
.p1hiw *,.p1hiw *::before,.p1hiw *::after{box-sizing:border-box}
.p1hiw h2,.p1hiw h3,.p1hiw p,.p1hiw ol,.p1hiw li{margin:0;padding:0}
.p1hiw ol{list-style:none}
.p1hiw .p1-mint{color:var(--p1-mint)}
.p1hiw .p1-mono{font-family:var(--p1-mono)}

/* soft background glow (transparent section, sits on the page background) */
/* Der Schein wird oben weich eingeblendet statt abgeschnitten.
   Der gruene Tupfer sitzt bei `at 18% 6%` -- rund 230 Pixel unter der
   Oberkante, bei 520 Pixel Hoehe ragt er also darueber hinaus. `overflow:hidden`
   des Abschnitts schneidet ihn dort glatt ab, und weil der Hero darueber keinen
   solchen Schein hat, begann er an der Naht schlagartig mit voller Staerke:
   eine helle Kante quer ueber die linke Seite.
   Die Maske laesst die ganze Schein-Ebene ueber die ersten 160 Pixel
   aufblenden. Der Schein selbst bleibt, wo er war -- nur sein Rand ist jetzt
   ein Uebergang statt eines Schnitts. */
.p1hiw .p1-glow{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 160px);
  mask-image:linear-gradient(180deg,transparent 0,#000 160px);
  background:
    radial-gradient(900px 520px at 18% 6%,rgba(92,237,163,.13),rgba(92,237,163,0) 70%),
    radial-gradient(900px 620px at 88% 58%,rgba(108,182,236,.12),rgba(108,182,236,0) 70%);}
.p1hiw .p1-wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ---------- intro ---------- */
/* `position:static` ist Absicht und kein Fuellwert: dieser Block ist ein
   `<header>`, und Seiten stylen `header` gern als Element -- polaris1.dev tat
   es bis 30.09.2026 mit `position:fixed`. Der Abschnitt soll sich in eine
   fremde Seite legen lassen, ohne dass deren Elementregeln ihn zerlegen. */
.p1hiw .p1-head{position:static;text-align:center;max-width:1000px;margin:0 auto}
/* ── Typo auf die Skala der Seite gebracht, 16.10.2026 ──────────────────────

   Hier stand `font-weight:800` bei `clamp(32px,6vw,84px)`. Der Hero steht auf
   620 bei `clamp(2.4rem,5.4vw,4.4rem)` -- bei 1440 Pixeln also 84 px in Heavy
   gegen 70 px in Semibold. Zwei Schnitte und 19 Prozent Unterschied auf
   derselben Seite; es sah aus wie eine andere Schrift, obwohl beide denselben
   Systemstapel benutzen.

   Die Ursache ist keine Nachlaessigkeit, sondern der Entwurf dieser Datei:
   sie war als eigenstaendiger Baustein gebaut, der sich in eine fremde Seite
   legen laesst, ohne von deren Regeln zerlegt zu werden (Zeile 2). Deshalb
   brachte sie ihre eigene Typo-Skala mit, statt die der Seite zu erben. Das
   hat funktioniert -- bis die fremde Seite unsere eigene war.

   Die Unabhaengigkeit geben wir an dieser einen Stelle auf. Wer den Abschnitt
   je woanders einsetzt, findet die Werte hier und setzt sie dort hin. Die
   Zahlen selbst stehen in `site.css` unter `.hero h1`.

   Dieselbe Rechnung fuer `.p1-title` weiter unten: die Schritt-Ueberschriften
   gingen mit, sonst staenden sie fetter da als die Ueberschrift darueber. */
.p1hiw .p1-h2{font-weight:620;font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.08;letter-spacing:-.035em;perspective:900px}
.p1hiw .p1-h2 .p1-mint{display:block}
.p1hiw .p1-lead{margin:26px auto 0;max-width:780px;font-weight:500;font-size:clamp(18px,1.7vw,23px);line-height:1.5;color:var(--p1-muted)}
.p1hiw .p1-toc{margin-top:38px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.p1hiw .p1-toc a{display:flex;align-items:center;gap:12px;padding:9px 18px 9px 9px;border-radius:14px;background:rgba(255,255,255,.05);
  border:1.5px solid var(--p1-line);color:rgba(255,255,255,.9);font-weight:600;font-size:17px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  transition:border-color .2s,background-color .2s}
.p1hiw .p1-toc a:hover,.p1hiw .p1-toc a:focus-visible{border-color:rgba(92,237,163,.8);background:rgba(92,237,163,.1);outline:none}
.p1hiw .p1-toc b{font-family:var(--p1-mono);font-weight:700;font-size:14px;color:var(--p1-mint);width:34px;height:34px;border-radius:9px;
  border:1.5px solid rgba(92,237,163,.5);background:rgba(92,237,163,.1);display:flex;align-items:center;justify-content:center}

/* ---------- steps ---------- */
.p1hiw .p1-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center;
  padding:clamp(64px,10vh,128px) 0;scroll-margin-top:80px}
.p1hiw .p1-num{font-family:var(--p1-mono);font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--p1-mint);display:flex;align-items:center;gap:16px}
.p1hiw .p1-num b{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;border:2px solid rgba(92,237,163,.55);
  background:rgba(92,237,163,.1);font-size:16px;letter-spacing:0}
.p1hiw .p1-title{margin-top:24px;font-weight:620;font-size:clamp(32px,3.3vw,48px);line-height:1.08;letter-spacing:-.03em;perspective:900px}
.p1hiw .p1-title .p1-mint{display:block}
.p1hiw .p1-sub{margin-top:22px;max-width:540px;font-weight:500;font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;color:var(--p1-muted)}
.p1hiw .p1-w{display:inline-block;white-space:nowrap}
.p1hiw .p1-c{display:inline-block;transform-origin:50% 90%}

/* stage = column that holds the scaled 640px canvas */
.p1hiw .p1-stage{position:relative;width:100%;min-width:0}
.p1hiw .p1-canvas{position:relative;width:640px;transform-origin:0 0;perspective:1400px}
.p1hiw.p1-js .p1-canvas{position:absolute;left:0;top:0}
.p1hiw:not(.p1-js) .p1-stage{overflow-x:auto}
.p1hiw .p1-canvas--finding{height:560px}
.p1hiw .p1-replay{position:absolute;right:-8px;top:-8px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(14,24,43,.85);color:rgba(255,255,255,.8);font-size:18px;line-height:1;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .3s,border-color .2s,color .2s;display:none}
.p1hiw.p1-anim .p1-replay{display:block}
.p1hiw .p1-replay.is-on{opacity:1;pointer-events:auto}
.p1hiw .p1-replay:hover,.p1hiw .p1-replay:focus-visible{border-color:rgba(92,237,163,.8);color:var(--p1-mint);outline:none}

/* ---------- panel UI (design size 640px wide) ---------- */
.p1hiw .p1-panel{position:relative;width:640px;border-radius:24px;background:linear-gradient(180deg,#1b2b47,#152339);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 36px 90px rgba(4,10,25,.5),0 0 0 1px rgba(0,0,0,.2);padding:28px 32px 30px;color:#fff;font-family:var(--p1-sans)}
.p1hiw .p1-ptr{position:absolute;left:0;top:0;width:38px;height:38px;opacity:0;visibility:hidden;z-index:5;pointer-events:none}
.p1hiw .p1-ptr path{fill:#fff;stroke:#0b1220;stroke-width:2;stroke-linejoin:round}
.p1hiw .p1-lb{font-family:var(--p1-mono);font-weight:500;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* 01 domain */
.p1hiw .p1-bar3{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.p1hiw .p1-bar3 i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2)}
.p1hiw .p1-bar3 span{margin-left:12px;font-family:var(--p1-mono);font-size:15px;color:rgba(255,255,255,.5)}
.p1hiw .p1-field{margin-top:12px;height:80px;display:flex;align-items:center;padding:0 24px;border-radius:14px;background:#0e182b;border:1px solid rgba(255,255,255,.16);
  font-family:var(--p1-mono);font-size:32px;transition:border-color .2s,box-shadow .2s}
.p1hiw .p1-field[data-focus="1"],.p1hiw:not(.p1-anim) .p1-field{border-color:rgba(92,237,163,.7);box-shadow:0 0 0 4px rgba(92,237,163,.15)}
.p1hiw .p1-proto{color:rgba(255,255,255,.35)}
.p1hiw .p1-caret{display:inline-block;width:3px;height:38px;background:var(--p1-mint);margin-left:3px;animation:p1blink 1s steps(1) infinite}
@keyframes p1blink{50%{opacity:0}}
.p1hiw .p1-opts{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.p1hiw .p1-opt{position:relative;padding:12px 16px;border-radius:11px;border:1px dashed rgba(255,255,255,.22);font-weight:600;font-size:19px;color:rgba(255,255,255,.8);white-space:nowrap;opacity:.4}
.p1hiw .p1-strike{position:absolute;left:12px;right:12px;top:50%;height:3px;background:var(--p1-red);transform-origin:0 50%;border-radius:2px}
.p1hiw .p1-note{margin-top:22px;font-size:19px;color:rgba(255,255,255,.62)}
.p1hiw .p1-btnrow{margin-top:24px}
.p1hiw .p1-btn{display:inline-flex;align-items:center;height:64px;padding:0 30px;border-radius:13px;background:var(--p1-mint);color:var(--p1-ink);
  font-family:var(--p1-mono);font-weight:700;font-size:21px;box-shadow:0 0 36px rgba(92,237,163,.35);white-space:nowrap}
.p1hiw .p1-bspin{position:relative;width:24px;height:24px;margin-right:14px;display:inline-block}
.p1hiw .p1-bspin i{position:absolute;inset:2px;border-radius:50%;border:3px solid rgba(4,24,15,.22);border-top-color:#04180f;animation:p1rot .7s linear infinite}
@keyframes p1rot{to{transform:rotate(360deg)}}

/* 02 dns */
.p1hiw .p1-rec{margin-top:14px;border-radius:14px;background:#0e182b;border:1px solid rgba(255,255,255,.14);overflow:hidden}
.p1hiw .p1-rrow{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;height:58px;padding:0 18px;border-top:1px solid rgba(255,255,255,.07)}
.p1hiw .p1-rrow:first-child{border-top:none}
.p1hiw .p1-rrow .p1-k{font-family:var(--p1-mono);font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.45);text-transform:uppercase}
.p1hiw .p1-rrow .p1-v{font-family:var(--p1-mono);font-size:17px;white-space:nowrap}
.p1hiw .p1-copy{white-space:nowrap;font-family:var(--p1-mono);font-weight:700;font-size:14px;padding:7px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
.p1hiw .p1-copy.is-done{color:var(--p1-mint);border-color:rgba(92,237,163,.6)}
.p1hiw .p1-chks{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.p1hiw .p1-chk{display:flex;align-items:center;gap:14px;height:52px;padding:0 18px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:20px}
.p1hiw .p1-chk .p1-mono{font-size:19px}
.p1hiw .p1-ic{width:26px;height:26px;flex:none;position:relative}
.p1hiw .p1-ic svg{position:absolute;inset:0;width:100%;height:100%}
.p1hiw .p1-spin{position:absolute;inset:3px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--p1-mint);animation:p1rot .7s linear infinite;opacity:0}
.p1hiw .p1-res{margin-left:auto;font-family:var(--p1-mono);font-weight:700;font-size:16px;letter-spacing:.08em;color:rgba(255,255,255,.45)}
.p1hiw .p1-res.is-ok{color:var(--p1-mint)}
.p1hiw .p1-chk.is-final{background:rgba(92,237,163,.1);border-color:rgba(92,237,163,.45)}
.p1hiw .p1-strong{font-weight:700}

/* 03 live run */
.p1hiw .p1-runhead{display:flex;align-items:center;gap:12px;font-weight:700;font-size:22px}
.p1hiw .p1-live{width:12px;height:12px;border-radius:50%;background:var(--p1-red);box-shadow:0 0 12px var(--p1-red);animation:p1blink 1s steps(1) infinite}
.p1hiw .p1-runhead .p1-t{margin-left:auto;font-family:var(--p1-mono);font-weight:500;font-size:18px;color:rgba(255,255,255,.55)}
.p1hiw .p1-phs{margin-top:14px}
.p1hiw .p1-ph{display:grid;grid-template-columns:96px 1fr 156px;align-items:center;gap:16px;height:54px;border-top:1px solid rgba(255,255,255,.07)}
.p1hiw .p1-ph:first-child{border-top:none}
.p1hiw .p1-ph .p1-n{font-family:var(--p1-mono);font-size:18px;color:rgba(255,255,255,.8)}
.p1hiw .p1-ph .p1-tr{height:10px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.p1hiw .p1-ph .p1-tr i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fcf94,#5ceda3);border-radius:5px}
.p1hiw .p1-ph .p1-v{font-family:var(--p1-mono);font-size:17px;text-align:right;white-space:nowrap}
.p1hiw .p1-ph.is-skip .p1-n,.p1hiw .p1-ph.is-skip .p1-v{color:rgba(255,255,255,.35)}
.p1hiw .p1-ph.is-skip .p1-tr{background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 9px,transparent 9px 16px)}
.p1hiw .p1-pacelb{margin-top:18px}
.p1hiw .p1-pace{margin-top:10px;display:flex;align-items:center;gap:14px}
.p1hiw .p1-segc{position:relative;display:flex;border-radius:12px;background:#0e182b;border:1px solid rgba(255,255,255,.14);padding:4px}
.p1hiw .p1-segc .p1-o{position:relative;z-index:1;padding:10px 14px;font-weight:600;font-size:17px;color:rgba(255,255,255,.7);white-space:nowrap;border-radius:9px}
.p1hiw .p1-segc .p1-o span{font-family:var(--p1-mono);font-weight:500;font-size:13px;color:rgba(255,255,255,.45);margin-left:6px}
.p1hiw .p1-segc .p1-o.is-on{color:#fff}
.p1hiw:not(.p1-anim) .p1-segc .p1-o.is-on{background:rgba(92,237,163,.18);box-shadow:inset 0 0 0 1px rgba(92,237,163,.6)}
.p1hiw .p1-ind{position:absolute;top:4px;bottom:4px;border-radius:9px;background:rgba(92,237,163,.18);border:1px solid rgba(92,237,163,.6);display:none}
.p1hiw.p1-anim .p1-ind{display:block}
.p1hiw .p1-stop{margin-left:auto;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:11px;border:1px solid rgba(255,93,108,.5);color:#ff8c98;font-weight:700;font-size:18px;white-space:nowrap}
.p1hiw .p1-stop i{width:12px;height:12px;border-radius:3px;background:var(--p1-red)}

/* 04 the count */
.p1hiw .p1-cnts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.p1hiw .p1-cnt{border-radius:16px;padding:14px 16px;background:#0e182b;border:1px solid rgba(255,255,255,.12)}
.p1hiw .p1-cnt .p1-k{font-family:var(--p1-mono);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.p1hiw .p1-cv{font-weight:800;font-size:52px;line-height:1.1;letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.4);transform-origin:0 60%}
.p1hiw .p1-cv.is-crit{color:var(--p1-red)}
.p1hiw .p1-cv.is-high{color:var(--p1-orange)}
.p1hiw .p1-lrows{margin-top:4px}
.p1hiw .p1-lrow{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);margin-top:10px}
.p1hiw .p1-sev{font-family:var(--p1-mono);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px 4px;border-radius:7px;border:2px solid currentColor;flex:none}
.p1hiw .p1-blur{height:14px;border-radius:7px;background:rgba(255,255,255,.14);filter:blur(1.5px)}
.p1hiw .p1-lk{margin-left:auto;flex:none;width:22px;height:22px}
.p1hiw .p1-lk svg{width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.9}
.p1hiw .p1-free{margin-top:20px;display:flex;align-items:center;gap:20px;padding:18px 22px;border-radius:16px;background:rgba(92,237,163,.08);border:1px solid rgba(92,237,163,.45)}
.p1hiw .p1-free .p1-big{font-weight:800;font-size:50px;color:var(--p1-mint);letter-spacing:-.03em}
.p1hiw .p1-free .p1-tx{font-size:19px;line-height:1.4;color:rgba(255,255,255,.86)}

/* 05 the finding */
.p1hiw .p1-cands{position:absolute;left:0;top:0;width:640px;height:560px;pointer-events:none}
.p1hiw .p1-c41{position:absolute;left:4px;top:8px;display:flex;align-items:center;gap:10px;font-family:var(--p1-mono);font-size:17px;font-weight:700;letter-spacing:.04em;color:#ff8c98}
.p1hiw .p1-c41 i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(255,93,108,.14);border:1.5px solid rgba(255,93,108,.55);font-size:14px}
.p1hiw .p1-card{position:absolute;left:0;top:58px}
.p1hiw .p1-fhead{display:flex;align-items:center;gap:14px}
.p1hiw .p1-dim{font-size:17px;color:rgba(255,255,255,.6)}
.p1hiw .p1-ftitle{margin-top:16px;font-weight:800;font-size:32px;letter-spacing:-.02em;line-height:1.16}
.p1hiw .p1-req{margin-top:20px;display:flex;align-items:center;gap:14px;font-family:var(--p1-mono);font-size:18px;padding:12px 16px;border-radius:11px;background:#0e182b;border:1px solid rgba(255,255,255,.12)}
.p1hiw .p1-req .p1-m{font-weight:700;color:var(--p1-blue)}
.p1hiw .p1-req .p1-ok{margin-left:auto;color:var(--p1-mint)}
.p1hiw .p1-code{margin-top:14px;border-radius:12px;background:#0a1322;border:1px solid rgba(255,255,255,.1);padding:14px 0;font-family:var(--p1-mono);font-size:17px;line-height:1.75;overflow:hidden}
.p1hiw .p1-cl{display:flex;white-space:pre}
.p1hiw .p1-cl .p1-ln{width:74px;text-align:right;padding-right:18px;color:rgba(255,255,255,.28);flex:none}
.p1hiw .p1-cl.is-hl{background:rgba(255,93,108,.16)}
.p1hiw .p1-cl.is-hl .p1-ln{color:#ff8c98}
.p1hiw .p1-c-dim{color:rgba(255,255,255,.45)}
.p1hiw .p1-c-red{color:#ff8c98}
.p1hiw .p1-kw{color:var(--p1-blue)}
.p1hiw .p1-sk{color:#ff8c98;background:rgba(255,93,108,.18);border-radius:4px}

/* 06 the fix */
.p1hiw .p1-sb{display:flex;align-items:center;justify-content:space-between}
.p1hiw .p1-ro{display:inline-flex;align-items:center;font-family:var(--p1-mono);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--p1-mint);padding:7px 11px;border-radius:9px;border:1px solid rgba(92,237,163,.45);background:rgba(92,237,163,.08)}
.p1hiw .p1-fxs{margin-top:4px}
.p1hiw .p1-fx{display:flex;gap:16px;align-items:flex-start;padding:15px 0;border-top:1px solid rgba(255,255,255,.08)}
.p1hiw .p1-fx:first-child{border-top:none}
.p1hiw .p1-nb{flex:none;width:40px;height:40px;border-radius:11px;background:rgba(92,237,163,.14);border:1px solid rgba(92,237,163,.5);color:var(--p1-mint);font-family:var(--p1-mono);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center}
.p1hiw .p1-fx b{display:block;font-weight:800;font-size:24px;letter-spacing:-.015em}
.p1hiw .p1-fx .p1-d{display:block;margin-top:5px;font-size:17.5px;line-height:1.45;color:rgba(255,255,255,.68)}
.p1hiw .p1-fx .p1-d code{font-family:var(--p1-mono);font-size:15px;color:rgba(255,255,255,.88)}
.p1hiw .p1-retest{margin-top:12px;display:flex;align-items:center;gap:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.p1hiw .p1-btn2{display:inline-flex;align-items:center;height:54px;padding:0 20px;border-radius:12px;border:1px solid rgba(92,237,163,.6);color:var(--p1-mint);font-family:var(--p1-mono);font-weight:700;font-size:17px;white-space:nowrap}
.p1hiw .p1-status{margin-left:auto;display:flex;align-items:center;font-weight:700;font-size:20px;white-space:nowrap;transform-origin:100% 50%}
.p1hiw .p1-okc{color:var(--p1-mint)}
.p1hiw .p1-pass{font-family:var(--p1-mono);font-size:16px;font-weight:500;color:rgba(255,255,255,.55)}
.p1hiw .p1-rtcap{margin-top:10px;font-size:16px;line-height:1.45;color:rgba(255,255,255,.55)}

/* burst particles */
.p1hiw .p1-pt{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;opacity:0;z-index:6}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .p1hiw .p1-step{grid-template-columns:1fr;gap:30px;padding:56px 0}
  .p1hiw .p1-sub{max-width:none}
  .p1hiw .p1-toc a{font-size:15px;padding:7px 14px 7px 7px}
  .p1hiw .p1-toc b{width:30px;height:30px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .p1hiw .p1-caret,.p1hiw .p1-live,.p1hiw .p1-spin,.p1hiw .p1-bspin i{animation:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   Karussell: die sechs Schritte auf einem Zylinder (10.10.2026)
   ───────────────────────────────────────────────────────────────────────────
   Vorher standen sie untereinander -- knapp 4000 Pixel, die man durchscrollte.
   Jetzt sitzen sie auf einem Ring, der sich alle paar Sekunden um 60 Grad
   weiterdreht: der vordere Schritt steht flach und lesbar, die anderen kippen
   nach hinten weg.

   Alles hier haengt an `.p1-carousel`, und die Klasse setzt erst das Skript.
   Ohne JavaScript bleibt der Abschnitt, was er war: sechs Bloecke untereinander,
   jeder mit seinem Endzustand im Markup. Niemand verliert Inhalt, nur Bewegung.
   ═══════════════════════════════════════════════════════════════════════════ */

.p1hiw.p1-carousel .p1-ringwrap{
  position:relative;
  /* Die Tiefe des Raums. Kleiner heisst staerkere Verzerrung; bei 2200 bleibt
     die vordere Karte praktisch flach und nur die Nachbarn kippen sichtbar. */
  perspective:2200px;
  perspective-origin:50% 45%;
  margin-top:clamp(24px,4vw,48px);
  /* Schmaler als die Spalte. Der Ring nahm vorher die vollen ~1144 Pixel und
     wirkte dadurch wuchtig; `fit()` skaliert die Tafel auf die Spaltenbreite,
     also macht eine engere Spalte den ganzen Schritt kleiner -- Text, Tafel und
     Radius zugleich, ohne dass irgendwo eine zweite Zahl nachgezogen werden
     muss. Der Radius folgt automatisch: er wird aus `clientWidth` gerechnet. */
  max-width:920px;
  margin-inline:auto;
}
.p1hiw.p1-carousel .p1-ring{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  /* Kuerzer und vorne steiler als zuvor (.95s, weiche Kurve). Ein Wisch hat
     seinen Schwung am Anfang und laeuft hinten aus -- genau das macht diese
     Kurve, und erst dadurch fuehlt sich der Wechsel nach Geste an statt nach
     Ueberblendung. */
  transition:transform .6s cubic-bezier(.2,.9,.25,1);
}
.p1hiw.p1-carousel .p1-step{
  position:absolute;left:0;right:0;top:0;
  padding:0;
  /* `backface-visibility` aus: ohne sie sieht man die Rueckseiten der hinteren
     Karten spiegelverkehrt durchscheinen. */
  backface-visibility:hidden;
  transition:opacity .8s ease,filter .8s ease;
  /* Die hinteren Karten nehmen keine Klicks an -- sonst faengt eine unsichtbare
     Karte den Mauszeiger ab, die gar nicht gemeint war. */
  pointer-events:none;
  /* Weit hinten: nur noch eine Ahnung von Form. Stark genug unscharf, dass das
     Auge gar nicht erst versucht, dort zu lesen -- sonst konkurrieren sechs
     Textblöcke um dieselbe Aufmerksamkeit. */
  opacity:.06;
  filter:blur(7px) saturate(.45);
}
.p1hiw.p1-carousel .p1-step.is-front{
  opacity:1;filter:none;pointer-events:auto;
}
/* Die direkten Nachbarn bleiben als Form erkennbar -- man soll sehen, dass es
   weitergeht, ohne dort hinzulesen. */
.p1hiw.p1-carousel .p1-step.is-near{opacity:.2;filter:blur(3.5px) saturate(.6)}

/* ---------- Bedienung ---------- */
.p1hiw.p1-carousel .p1-dots{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:clamp(28px,4vw,44px) 0 0;list-style:none;padding:0;
}
.p1hiw.p1-carousel .p1-dots button{
  width:34px;height:5px;border-radius:3px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.16);transition:background .3s,width .3s;
}
.p1hiw.p1-carousel .p1-dots button:hover{background:rgba(255,255,255,.3)}
.p1hiw.p1-carousel .p1-dots button[aria-current="true"]{background:var(--p1-mint);width:54px}
.p1hiw.p1-carousel .p1-dots button:focus-visible{outline:2px solid var(--p1-mint);outline-offset:3px}

/* Der Fortschrittsbalken zeigt, wann weitergedreht wird. Ohne ihn wirkt der
   Sprung willkuerlich -- mit ihm ist er angekuendigt. */
.p1hiw.p1-carousel .p1-prog{
  position:relative;height:2px;width:min(420px,60%);margin:18px auto 0;
  background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;
}
.p1hiw.p1-carousel .p1-prog i{
  position:absolute;left:0;top:0;bottom:0;width:0;background:var(--p1-mint);opacity:.7;
}
.p1hiw.p1-carousel.is-paused .p1-prog i{opacity:.25}

/* Das Inhaltsverzeichnis oben wird zur Sprungleiste. */
.p1hiw.p1-carousel .p1-toc a[aria-current="true"]{
  border-color:rgba(92,237,163,.8);background:rgba(92,237,163,.12);
}

@media (prefers-reduced-motion: reduce){
  .p1hiw.p1-carousel .p1-ring{transition:none}
  .p1hiw.p1-carousel .p1-step{transition:none}
}

/* Unter 860px wird aus dem Ring ein flaches Nacheinander: ein Zylinder mit
   voller Breite laesst auf einem Telefon von den Nachbarn nichts uebrig
   ausser Verzerrung. */
@media (max-width: 860px){
  .p1hiw.p1-carousel .p1-ring{transform:none!important;transition:opacity .5s}
  .p1hiw.p1-carousel .p1-step{transform:none!important;opacity:0;filter:none;visibility:hidden}
  .p1hiw.p1-carousel .p1-step.is-front{opacity:1;visibility:visible}
}


/* ---------- Der Wisch ------------------------------------------------------
 * Waehrend der Ring dreht, bekommen alle Karten fuer einen Moment mehr
 * Unschaerfe und weniger Deckkraft. Das ist nichts anderes als
 * Bewegungsunschaerfe: ein Gegenstand, der sich schnell bewegt, ist scharf
 * nicht zu sehen, und das Auge liest daraus Geschwindigkeit.
 *
 * Ohne diesen Moment wirkte der Wechsel wie ein Schnitt -- die Karte war
 * woanders, aber nichts erzaehlte den Weg dorthin.
 *
 * Die kurzen Uebergangszeiten (.16s hinein, danach die regulaeren .8s heraus)
 * sind Absicht: schnell truebe werden, langsam wieder klar. Umgekehrt saehe es
 * aus, als wuerde das Bild scharfstellen, statt zur Ruhe zu kommen.
 */
.p1hiw.p1-carousel.is-swipe .p1-step{
  transition:filter .16s ease,opacity .16s ease;
  filter:blur(9px) saturate(.45);
  opacity:.3;
}
.p1hiw.p1-carousel.is-swipe .p1-step.is-front{
  filter:blur(4px) saturate(.8);
  opacity:.72;
}
@media (prefers-reduced-motion: reduce){
  .p1hiw.p1-carousel.is-swipe .p1-step,
  .p1hiw.p1-carousel.is-swipe .p1-step.is-front{filter:none;opacity:1}
}