/* =============================================================================
   PFLEGEBOX EXPERIENCE — STYLES (ACUmed-Integration)

   Diese Datei enthaelt nur noch das, was es auf der uebrigen Website nicht
   schon gibt: die Ebenenarchitektur des 3D-Layers, das Section-Layout der
   Story und die Bedienelemente, die an der Szene haengen.

   Alles Uebrige kommt aus dem Design-System:
     tokens/*.css        Farben, Typo, Abstaende, Radien, Schatten, Motion
     components.css      .acu-btn, .acu-tag, .acu-wordmark
   Diese Datei wird NACH dem Design-System geladen und setzt keine
   DS-Variablen zurueck.

   WICHTIG — Namenskollisionen:
   Die urspruengliche Fassung definierte --font-display, --font-mono und
   --ease-out in :root. Alle drei existieren im ACUmed-Design-System bereits.
   Saemtliche eigenen Variablen sind deshalb mit --pfb- praefixiert und auf
   .pfb gescopet; :root wird hier nicht mehr angefasst.

   Die Klassen- und Zustandsnamen (.pfb__*, .pfb-*, is-ready, is-active,
   is-open, is-hidden, is-dragging, is-hovering, is-interactive, has-detail,
   no-webgl) sind Vertrag mit pflegebox.js und duerfen nicht umbenannt werden.
   ========================================================================== */

/* Lenis uebernimmt das Scroll-Smoothing; natives smooth-scroll wuerde sich
   damit ueberlagern. Gilt nur auf dieser Seite, da nur hier geladen. */
html { scroll-behavior: auto; }

/* Studio-Hohlkehle. Die zwei sehr weichen radialen Aufhellungen sind der
   Hintergrund der Produktaufnahme (der Renderer laeuft transparent) und damit
   funktional, nicht dekorativ — vergleichbar mit dem Scrim ueber den
   Hero-Fotos. Die Werte sind auf die Papiertoene des Systems umgestellt. */
body.pfb-page {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--paper-050) 0%, rgba(252, 252, 252, 0) 60%),
    radial-gradient(90% 70% at 80% 100%, var(--paper-200) 0%, rgba(239, 237, 231, 0) 70%),
    var(--paper-100);
  overflow-x: clip;

  /* Diese Seite liegt als einzige auf --paper-100 statt auf --paper-050.
     --surface-sunken ist im Design-System aber genau --paper-100 — der
     milchige Hover von .acu-btn--secondary waere hier also exakt die
     Hintergrundfarbe und damit unsichtbar. Das Token rueckt deshalb eine
     Stufe mit, damit der Button sich verhaelt wie auf jeder anderen Seite:
     eine Stufe dunkler als die Flaeche, auf der er steht. Betrifft auf
     dieser Seite ausschliesslich die Button-Hover — Input, MediaFrame und
     Sunken-Card kommen hier nicht vor. */
  --surface-sunken: var(--paper-200);
}

/* Header und Footer liegen ueber dem fixen Canvas (z-1) und ueber der
   Story (z-3). Ohne das wuerde das Canvas den Footer ueberdecken, weil ein
   statischer Footer keinen eigenen Stacking-Kontext bildet. */
body.pfb-page > footer {
  position: relative;
  z-index: 4;
}

/* -----------------------------------------------------------------------------
   TOKENS — auf .pfb gescopet, damit sie das Design-System nicht beruehren
   -------------------------------------------------------------------------- */
.pfb {
  --pfb-accent: var(--brand-700);
  --pfb-accent-soft: var(--brand-600);
  --pfb-surface: var(--paper-000);
  --pfb-text: var(--ink-800);
  --pfb-muted: var(--ink-500);
  --pfb-faint: var(--ink-400);
  --pfb-line: var(--border-default);
  --pfb-line-soft: var(--border-subtle);

  /* Derselbe Seitenabstand wie Header, Footer und alle anderen Seiten —
     dadurch steht der Story-Text auf derselben Kante wie die Navigation. */
  --pfb-gutter: clamp(24px, 5vw, 64px);
  --pfb-ease: var(--ease-standard);

  position: relative;
}

/* -----------------------------------------------------------------------------
   LAYER-ARCHITEKTUR — unveraendert
   0 Typo hinter dem Objekt · 1 Canvas · 2 Labels/Linien · 3 Story-DOM
   -------------------------------------------------------------------------- */
.pfb__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.pfb__backdrop-word {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(6rem, 21vw, 20rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--brand-600);
  opacity: 0.09;
  transform: translateY(4vh);
  white-space: nowrap;
}

.pfb__canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100svh;
  display: block;
  opacity: 0;
  transition: opacity 1200ms var(--pfb-ease);
  touch-action: pan-y;
}

.pfb.is-ready .pfb__canvas { opacity: 1; }
.pfb.no-webgl .pfb__canvas { display: none; }

/* Gesetzt vom Bootstrap fuer genau einen Frame: das Canvas wird sichtbar
   geschaltet, solange der Loader noch deckend davor liegt, und braucht dort
   keinen eigenen Uebergang. Ohne das liefen die Einblendung des Canvas und
   das Ausblenden des Loaders gleichzeitig — zwei gemischte Vollbildflaechen
   pro Frame, ausgerechnet waehrend die Szene anlaeuft. */
.pfb.is-revealing .pfb__canvas { transition: none; }

.pfb__lines {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100svh;
  pointer-events: none;
}

.pfb-line { stroke: var(--border-strong); stroke-width: 1; }
.pfb-dot { fill: var(--brand-600); }

.pfb__labels { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

.pfb-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: opacity 420ms var(--pfb-ease);
  will-change: transform, opacity;
}

.pfb-label[data-side="left"] { text-align: right; }

.pfb-label__title {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--pfb-text);
}

.pfb-label__sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--pfb-muted);
}

/* -----------------------------------------------------------------------------
   STORY-SECTIONS — Layout unveraendert, Abstaende auf das Systemraster
   -------------------------------------------------------------------------- */
.pfb__story { position: relative; z-index: 3; pointer-events: none; }

.pfb-sec {
  min-height: 100svh;
  padding: clamp(64px, 9vh, 128px) var(--pfb-gutter);
  display: flex;
  align-items: center;
  position: relative;
}

.pfb-sec--hero { align-items: center; }
.pfb-sec--left { justify-content: flex-start; }
.pfb-sec--right { justify-content: flex-end; }
.pfb-sec--center { justify-content: center; align-items: flex-start; }
.pfb-sec--bottom { justify-content: center; align-items: flex-end; }
.pfb-sec--discovery { justify-content: flex-start; align-items: flex-end; }

.pfb-sec__inner { pointer-events: auto; max-width: 46rem; }
.pfb-sec__inner--narrow { max-width: 30rem; }
.pfb-sec__inner--wide { max-width: 60rem; text-align: center; }
.pfb-sec__inner--list { max-width: 26rem; }
.pfb-sec__inner--list .pfb-productlist { justify-content: flex-start; margin-top: 20px; }
.pfb-sec__inner--top { text-align: center; padding-top: 2vh; }

/* Textkarte ueber der Szene. Kein Frosted Glass — das Design-System
   schliesst es aus; stattdessen eine flaeche Karte wie ueberall sonst,
   nur mit --shadow-md, weil sie ueber dem Canvas schwebt. */
.pfb-sec__inner--card {
  max-width: 27rem;
  background: var(--paper-000);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-md);
}

.pfb-sec__inner--build,
.pfb-sec__inner--process { max-width: 30rem; }

/* -----------------------------------------------------------------------------
   TYPOGRAFIE — durchgehend die Skala der uebrigen Seiten
   -------------------------------------------------------------------------- */
.pfb-eyebrow {
  margin: 0 0 clamp(20px, 3vh, 30px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pfb-accent);
}

.pfb-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(42px, 7vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--pfb-text);
  text-wrap: pretty;
}

/* Die kursive Hervorhebung war die Signatur der Vorlage. Hanken Grotesk
   hat einen echten Kursivschnitt, die Geste bleibt also erhalten — nur in
   der Hausschrift statt in einer Serife. */
.pfb-h1 em { font-style: italic; color: var(--pfb-accent); }
.pfb-h1--cta { font-size: clamp(40px, 6vw, 80px); }

.pfb-h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--pfb-text);
  text-wrap: pretty;
}

.pfb-h2--sm { font-size: clamp(26px, 3vw, 38px); margin-bottom: 10px; }

.pfb-h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--pfb-text);
}

.pfb-lead {
  margin: clamp(24px, 3vh, 32px) 0 0;
  max-width: 40ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--pfb-muted);
  text-wrap: pretty;
}

.pfb-body {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pfb-muted);
  text-wrap: pretty;
}

.pfb-body--sm { font-size: 14px; line-height: 1.55; }

.pfb-index {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--pfb-faint);
}

.pfb-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pfb-faint);
  max-width: 42ch;
}

.pfb-sec__inner--wide .pfb-note { margin-inline: auto; }

.pfb-note--legal {
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  margin-top: 20px;
}

/* -----------------------------------------------------------------------------
   BEDIENELEMENTE
   Die Buttons tragen zusaetzlich .acu-btn --lg --primary/--secondary; hier
   bleibt nur, was die Szene braucht: Klickbarkeit innerhalb des
   pointer-events:none-Layers. Aussehen und Hover kommen aus dem
   Design-System, damit es genau ein Button-Design im Projekt gibt.
   -------------------------------------------------------------------------- */
.pfb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 4vh, 44px);
}

.pfb-btn { pointer-events: auto; }

.pfb-productlist {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* .pfb-chip traegt zusaetzlich .acu-tag; hier nur die Abweichung fuer den
   statischen Zustand und die Klickbarkeit. */
.pfb-chip { pointer-events: auto; white-space: nowrap; }
.pfb-chip--static { border-style: dashed; color: var(--pfb-faint); }
.pfb-chip--static:hover { border-color: var(--border-default); color: var(--pfb-faint); }

.pfb-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }

.pfb-toggle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px 0 30px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--pfb-muted);
  cursor: pointer;
  position: relative;
  transition: var(--transition-ui);
}

.pfb-toggle:hover { border-color: var(--border-strong); color: var(--pfb-text); }

.pfb-toggle[aria-pressed="true"] {
  color: var(--pfb-text);
  border-color: var(--brand-400);
}

.pfb-toggle[aria-pressed="true"]::before {
  background: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: inset 0 0 0 2px var(--paper-000);
}

.pfb-count { margin: 16px 0 0; font-size: 14px; color: var(--pfb-muted); }
.pfb-count strong { font-variant-numeric: tabular-nums; color: var(--pfb-text); font-weight: var(--fw-medium); }

/* -----------------------------------------------------------------------------
   PROZESSLISTE — Haarlinien-Zeilen wie die nummerierten Bloecke der Startseite
   -------------------------------------------------------------------------- */
.pfb-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; }

.pfb-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 2px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
}

.pfb-steps li:last-child { border-bottom: 1px solid var(--border-subtle); }

.pfb-steps__no {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--pfb-faint);
  padding-top: 4px;
}

.pfb-steps__t { font-size: 16px; font-weight: var(--fw-medium); color: var(--pfb-text); }
.pfb-steps__d { font-size: 14px; line-height: 1.55; color: var(--pfb-muted); }

/* -----------------------------------------------------------------------------
   SCROLL-INDIKATOR — identisch zum Hero der Startseite, nur in Ink statt Weiss,
   weil dieser Hero hell ist und nicht auf einem Foto liegt.
   -------------------------------------------------------------------------- */
@keyframes acuWheel {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(9px); opacity: 0; }
  46% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.pfb-scroll-hint {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: clamp(28px, 5vh, 48px);
  display: grid;
  justify-items: center;
  gap: 12px;
  transition: opacity 400ms var(--pfb-ease);
}

.pfb-scroll-hint__label {
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  color: var(--pfb-muted);
}

.pfb-scroll-hint__wheel {
  width: 22px;
  height: 34px;
  border: 1.5px solid var(--ink-300);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.pfb-scroll-hint__wheel i {
  display: block;
  width: 2.5px;
  height: 7px;
  border-radius: 2px;
  background: var(--ink-500);
  animation: acuWheel 1.8s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
   REVEALS — Timing und Kurve der uebrigen Seiten (700ms, --ease-standard,
   16px Fade-up, einmalig)
   -------------------------------------------------------------------------- */
.pfb [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--pfb-ease), transform 700ms var(--pfb-ease);
}

.pfb .is-active [data-reveal] { opacity: 1; transform: none; }
.pfb .is-active [data-reveal]:nth-child(2) { transition-delay: 80ms; }
.pfb .is-active [data-reveal]:nth-child(3) { transition-delay: 160ms; }
.pfb .is-active [data-reveal]:nth-child(4) { transition-delay: 240ms; }
.pfb .is-active [data-reveal]:nth-child(5) { transition-delay: 320ms; }
.pfb .is-active [data-reveal]:nth-child(6) { transition-delay: 400ms; }

/* -----------------------------------------------------------------------------
   LOADER — aufgebaut wie der Loader der Startseite (Wortmarke + 180px-Spur)
   z-index 200 wie dort, damit er auch ueber dem Header liegt.
   -------------------------------------------------------------------------- */
.pfb__loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--paper-050);
  transition: opacity 700ms var(--pfb-ease), visibility 700ms;
}

.pfb__loader.is-hidden { opacity: 0; visibility: hidden; }

.pfb__loader-inner { display: grid; gap: 20px; justify-items: center; }

.pfb__loader-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--pfb-faint);
  font-variant-numeric: tabular-nums;
}

.pfb__loader-track {
  display: block;
  width: 180px;
  height: 2px;
  background: var(--ink-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.pfb__loader-track i {
  display: block;
  height: 100%;
  background: var(--brand-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms linear;
}

/* -----------------------------------------------------------------------------
   DETAILPANEL — Panelbehandlung wie das Team-Overlay und die
   Erreichbarkeitskarte: flaeches Papier, Haarlinie, --radius-xl, --shadow-lg
   -------------------------------------------------------------------------- */
.pfb__detail {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--pfb-gutter);
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms var(--pfb-ease);
}

.pfb__detail.is-open { pointer-events: auto; opacity: 1; }

.pfb__detail-panel {
  position: relative;
  width: min(25rem, 100%);
  padding: clamp(28px, 2.6vw, 40px);
  background: var(--paper-050);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  transition: transform 360ms var(--pfb-ease);
}

.pfb__detail.is-open .pfb__detail-panel { transform: none; }

.pfb__detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--pfb-muted);
  cursor: pointer;
  transition: var(--transition-ui);
}

.pfb__detail-close:hover { border-color: var(--border-default); color: var(--pfb-text); }

.pfb__detail-sub {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pfb-accent);
}

.pfb__detail-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--pfb-text);
}

.pfb__detail-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pfb-muted); }

/* -----------------------------------------------------------------------------
   CUSTOM CURSOR — nur Desktop, nur ueber hoverbaren 3D-Objekten
   -------------------------------------------------------------------------- */
.pfb__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: 0;
  height: 0;
  pointer-events: none;
}

.pfb__cursor::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border: 1px solid var(--brand-600);
  border-radius: 50%;
  background: var(--paper-050);
  transform: scale(0.2);
  opacity: 0;
  transition: transform 400ms var(--pfb-ease), opacity 220ms var(--pfb-ease);
}

.pfb__cursor span {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(0.8);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  color: var(--pfb-accent);
  opacity: 0;
  transition: opacity 220ms var(--pfb-ease), transform 400ms var(--pfb-ease);
  white-space: nowrap;
}

.pfb__cursor[data-state="discover"]::before { transform: scale(1); opacity: 1; }
.pfb__cursor[data-state="discover"] span { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.pfb.is-interactive .pfb__canvas { cursor: grab; }
.pfb.is-dragging .pfb__canvas { cursor: grabbing; }

/* -----------------------------------------------------------------------------
   FALLBACK OHNE WEBGL
   -------------------------------------------------------------------------- */
.pfb__poster { display: none; }

.pfb.no-webgl .pfb__poster {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  padding: 12vh var(--pfb-gutter);
}

.pfb.no-webgl .pfb__poster-frame {
  position: absolute;
  right: 6vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(34vw, 26rem);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--paper-000);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
}

.pfb__poster-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--pfb-faint);
}

.pfb.no-webgl .pfb__backdrop-word { opacity: 0.06; }
.pfb.no-webgl .pfb-sec { min-height: auto; padding-block: clamp(48px, 8vh, 96px); }
.pfb.no-webgl [data-reveal] { opacity: 1; transform: none; }
.pfb.no-webgl .pfb__loader { display: none; }

/* -----------------------------------------------------------------------------
   DEBUG (?debug)
   -------------------------------------------------------------------------- */
.pfb__debug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 50;
  padding: 8px 10px;
  background: rgba(13, 13, 14, .82);
  color: var(--paper-100);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  white-space: pre;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   RESPONSIVE — Breakpoints der 3D-Logik (900 / 720) bleiben unveraendert,
   zusaetzlich der Projekt-Breakpoint 860 fuer die mobile Navigation.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .pfb-label { width: 150px; }
  .pfb-label__sub { display: none; }
  .pfb-sec--right,
  .pfb-sec--left { justify-content: center; align-items: flex-end; }
  .pfb-sec__inner--card { max-width: 32rem; width: 100%; }
}

@media (max-width: 720px) {
  .pfb { --pfb-gutter: 24px; }
  .pfb-sec { min-height: 100svh; padding-block: 6vh 12vh; align-items: flex-end; }
  .pfb-sec--hero { align-items: flex-end; }
  .pfb-sec--center,
  .pfb-sec--bottom { align-items: flex-end; }
  .pfb-sec__inner,
  .pfb-sec__inner--narrow,
  .pfb-sec__inner--wide { max-width: 100%; }
  .pfb-sec__inner--wide { text-align: left; }
  .pfb-sec__inner--wide .pfb-note { margin-inline: 0; }
  .pfb-productlist { justify-content: flex-start; }
  .pfb__labels,
  .pfb__lines { display: none; }
  .pfb__detail { align-items: flex-end; padding: 0; }
  .pfb__detail-panel { width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .pfb__cursor { display: none; }
  .pfb-chip,
  .pfb-toggle { min-height: 44px; }
  .pfb-scroll-hint { display: none; }
  .pfb__backdrop-word { transform: translateY(-14vh); }
}

/* -----------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pfb *,
  .pfb *::before,
  .pfb *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .pfb [data-reveal] { opacity: 1 !important; transform: none !important; }
  .pfb__canvas { opacity: 1; }
  .pfb-scroll-hint__wheel i { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Kostenuebernahme — Sticky-Knopf und Overlay
   ───────────────────────────────────────────────────────────────
   Vollstaendig neu und eigen benannt (.pfb-aid, .pfb-modal): Es
   wird keine bestehende Regel ueberschrieben, die 3D-Ebenen
   bleiben unberuehrt. Der Knopf liegt mit z-index 90 unter dem
   Header (100) und dem Loader (200); das Overlay nutzt <dialog>
   und damit den Top-Layer des Browsers, steht also ohnehin ueber
   allem. Der Knopf haengt am body und NICHT in .pfb — eine
   transformierte Elternbox wuerde position:fixed sonst brechen.
   ═══════════════════════════════════════════════════════════════ */

.pfb-aid {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
}

.pfb-aid__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--ink-800);
  color: var(--paper-050);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 28px -10px rgba(13, 13, 14, .55);
  transition: background-color 200ms var(--pfb-ease, cubic-bezier(.2, 0, 0, 1));
}

.pfb-aid__btn:hover,
.pfb-aid__btn:focus-visible { background: var(--ink-700); color: var(--paper-050); }
.pfb-aid__btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; }
.pfb-aid__btn svg { flex: none; }

/* ── Overlay ────────────────────────────────────────────────── */
.pfb-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  /* dvh beruecksichtigt die eingeblendete Adressleiste auf dem Handy. Die
     vh-Zeile darueber bleibt als Rueckfall fuer aeltere Browser stehen. */
  max-height: min(82dvh, 760px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--paper-050);
  color: var(--ink-800);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.pfb-modal[open] { display: flex; flex-direction: column; }
.pfb-modal::backdrop { background: rgba(13, 13, 14, .64); backdrop-filter: blur(5px); }

.pfb-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 0;
}

.pfb-modal__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.pfb-modal__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-600);
  cursor: pointer;
}

.pfb-modal__close:hover { background: var(--paper-100); color: var(--ink-800); }
.pfb-modal__close:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.pfb-modal__body {
  /* flex-basis MUSS auto sein, nicht 0. Mit `flex: 1` (basis 0%) faellt der
     Bereich in Safari auf Hoehe 0 zusammen, sobald der Dialog seine Hoehe aus
     dem Inhalt bezieht statt an max-height zu stossen — Kopf und Fuss blieben
     sichtbar, der Text verschwand. Mit basis auto ist die Hoehe der Inhalt
     selbst; shrink 1 und min-height 0 erlauben das Schrumpfen samt Scrollen,
     wenn max-height greift. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 22px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pfb-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 3.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink-800);
  text-wrap: pretty;
}

.pfb-modal__body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-500); }
.pfb-modal__body strong { color: var(--ink-800); font-weight: 600; }
.pfb-modal__body a { color: var(--sky-700); text-decoration: underline; text-underline-offset: 2px; }

.pfb-modal__steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-500);
}

.pfb-modal__steps li::marker { color: var(--ink-400); font-variant-numeric: tabular-nums; }

.pfb-modal__foot {
  flex: none;
  padding: 18px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-subtle);
  background: var(--paper-050);
}

.pfb-modal__foot .acu-btn { width: 100%; }
.pfb-modal__hint { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-400); text-align: center; }

@media (max-width: 520px) {
  .pfb-aid { left: clamp(16px, 3vw, 28px); }
  .pfb-aid__btn { width: 100%; justify-content: center; }
}