/* ──────────────────────────────────────────────────────────────────────────
   THEME-ISOLATION. CSS und JS des Themes meldet das Plugin ab (flags.isolate_theme).
   Was bleibt — Plugin-CSS, Stile, die ein Theme direkt in wp_head schreibt — lädt
   womöglich NACH diesem CSS. Darum ist jede Regel unten an body.fone-page gebunden
   (setzt das Plugin auf jeder Paket-Seite):
     .klasse …   →  html body.fone-page .klasse …        schlägt fremde Klassen
     element …   →  html body:where(.fone-page) element  schlägt fremde Elemente,
                    aber keine Klassenregel — weder unsere noch die des Editors
   Erzeugt vom FlatsiteOne-Packager — nicht von Hand bearbeiten.
   ────────────────────────────────────────────────────────────────────────── */
html body.fone-page{background:var(--pb-white)!important;color:var(--pb-ink)!important;margin:0!important;padding-top:0!important}
/* KOPIE von designsystem/tokens/tokens.css — nicht bearbeiten, tools/sync-tokens.sh ausführen */
/*
 * Designsystem Parcelbroker — Tokens
 * Version: 0.2.1 · 26.10.2026 (siehe designsystem/CHANGELOG.md)
 *
 * Hier stehen NUR verbindliche Werte (Status "verbindlich" in designsystem/ENTSCHEIDUNGEN.md).
 * Hinter jedem Block steht sein Eintrag, z. B. "→ DS-002".
 * Präfix --pb- für Tokens, pb- für Klassen (P-006). Token-Namen sind Schnittstelle: Umbenennen = MAJOR.
 *
 * Gültigkeit: auf :root. Das ist bei Theme Infiltration unschädlich, weil jedes Token das Präfix
 * --pb- trägt, und es hält, wenn eine Section als Modul auf einer anderen Seite eingefügt wird.
 *
 * Schriften: Diese Datei setzt nur die Familie. Die @font-face-Regeln (Poppins 400/600/700, woff2,
 * font-display: swap) gehören in das Stylesheet der Seite, weil die Dateipfade dort liegen → DS-007.
 */

:root {
  /* Farbe → DS-002, DS-003, DS-004, DS-005 */
  --pb-navy: #003854;
  --pb-navy-deep: #031423;      /* nur Verlaufsstart → DS-006 */
  --pb-sky: #5bc5f2;            /* nie Schrift auf Hell */
  --pb-gold: #f9b233;           /* Fläche nur für Aktion, Schrift nur auf Dunkel */
  --pb-ink: #1d1d1b;
  --pb-ink-soft: #686868;
  --pb-mist: #eff0f1;
  --pb-white: #ffffff;

  /* Verlauf und Abdunklung → DS-006, DS-021 */
  --pb-gradient-night: linear-gradient(180deg, #031423 0%, #003854 58%, #003854 100%);
  --pb-overlay: rgba(3, 20, 35, .55);

  /* Schrift → DS-007, DS-008 */
  --pb-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pb-fw-regular: 400;
  --pb-fw-semibold: 600;
  --pb-fw-bold: 700;

  /* Skala, fluide zwischen 375 und 1440 px → DS-009 */
  --pb-fs-display: clamp(36px, 1.502rem + 3.192vw, 70px);
  --pb-fs-h2: clamp(30px, 1.325rem + 2.347vw, 55px);
  --pb-fs-sub: clamp(20px, 1.074rem + .751vw, 28px);
  --pb-fs-title: clamp(20px, 1.206rem + .188vw, 22px);
  --pb-fs-body: 16px;
  --pb-fs-small: 14px;
  --pb-fs-micro: 12px;
  --pb-fs-button: 15px;
  --pb-lh-display: 1;
  --pb-lh-h2: 1.05;
  --pb-lh-sub: 1.3;
  --pb-lh-title: 1.3;
  --pb-lh-body: 1.75;
  --pb-lh-small: 1.5;

  /* Raster → DS-011 */
  --pb-w-content: 1200px;
  --pb-w-wide: 1400px;
  --pb-w-read: 850px;
  --pb-gutter: clamp(20px, 5vw, 40px);
  --pb-col-gap: clamp(24px, 4vw, 64px);
  /* Umbrüche (nur Doku, in Media Queries als Zahl): 768px · 981px · 1141px */

  /* Abstand → DS-012 */
  --pb-space-1: 4px;
  --pb-space-2: 8px;
  --pb-space-3: 12px;
  --pb-space-4: 16px;
  --pb-space-5: 24px;
  --pb-space-6: 32px;
  --pb-space-7: 40px;
  --pb-space-8: 56px;
  --pb-space-9: 80px;
  --pb-space-10: 120px;
  --pb-section-y: clamp(80px, 3.9rem + 6.8vw, 160px);   /* → DS-035 */
  --pb-curve-h: clamp(48px, 10vw, 160px);   /* → DS-016 */

  /* Form → DS-013, DS-014, DS-015 */
  --pb-radius-pill: 999px;
  --pb-radius-0: 0;
  --pb-border-btn: 2px;
  --pb-border-card: 3px;
  --pb-eyebar-w: 50px;
  --pb-eyebar-h: 8px;
  --pb-hex-ratio: 866 / 1000;
  --pb-hex-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 866 1000' preserveAspectRatio='none'><path d='M381 30Q433 0 485 30L814 220Q866 250 866 310L866 690Q866 750 814 780L485 970Q433 1000 381 970L52 780Q0 750 0 690L0 310Q0 250 52 220Z'/></svg>");

  /* Komponenten → DS-018, DS-022 */
  --pb-btn-pad-y: 14px;
  --pb-btn-pad-x: 24px;
  --pb-btn-min-h: 48px;
  --pb-field-pad: 16px;
  --pb-field-min-h: 52px;
  --pb-focus-ring: 2px;
  --pb-focus-offset: 3px;

  /* Bewegung → DS-025 */
  --pb-dur: 300ms;
  --pb-dur-reveal: 400ms;
  --pb-ease: ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --pb-dur: 0ms; --pb-dur-reveal: 0ms; }
}

/*
 * Parcelbroker — Landingpage „Zugang anfragen"
 * Baut auf dem Designsystem 0.1.0 auf (Tokens: pb-tokens.css).
 * Regeln: designsystem/01–03 · Verbotsliste: designsystem/02-dos-and-donts.md
 * FlatsiteOne: keine IDs für Gestaltung, kein Positions-CSS, alle Klassen mit pb-.
 */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-semibold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-bold.woff2") format("woff2"); }

/* ---------- Basis ---------- */
html body:where(.fone-page) *,html body:where(.fone-page) *::before,html body:where(.fone-page) *::after{ box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html body.fone-page{ margin: 0!important; background: var(--pb-white)!important; font-family: var(--pb-font); font-weight: var(--pb-fw-regular); font-size: var(--pb-fs-body); line-height: var(--pb-lh-body); color: var(--pb-ink)!important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Rücksetzer ohne Gewicht (:where), damit Komponentenregeln immer gewinnen — Divi setzt eigene Abstände, deshalb ausdrücklich */
/* ohne .pb-page-Klammer: die Klasse sitzt am <body>, FlatsiteOne bindet die Regeln selbst an body.fone-page */
html body.fone-page :where(h1, h2, h3, p, ul, ol, figure, blockquote, fieldset, legend){ margin: 0; padding: 0; border: 0; }
html body.fone-page :where(img){ display: block; max-width: 100%; height: auto; border: 0; }
html body.fone-page :where(a){ color: inherit; }
html body.fone-page.pb-page :focus-visible,html body.fone-page .pb-page :focus-visible{ outline: var(--pb-focus-ring) solid var(--pb-navy); outline-offset: var(--pb-focus-offset); }
html body.fone-page .pb-bg-night :focus-visible,html body.fone-page .pb-bg-photo :focus-visible,html body.fone-page .pb-footer :focus-visible{ outline-color: var(--pb-white); }
html body.fone-page .pb-sr-only{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html body.fone-page .pb-skip{ position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--pb-navy); color: var(--pb-white); padding: 12px 16px; font-weight: var(--pb-fw-semibold); text-decoration: none; }
html body.fone-page .pb-skip:focus{ top: 16px; }

/* ---------- Raster — DS-011 ---------- */
html body.fone-page .pb-wrap{ width: 100%; max-width: calc(var(--pb-w-content) + 2 * var(--pb-gutter)); margin-inline: auto; padding-inline: var(--pb-gutter); }
html body.fone-page .pb-wrap--read{ max-width: calc(var(--pb-w-read) + 2 * var(--pb-gutter)); }
html body.fone-page .pb-grid-2{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pb-col-gap); align-items: center; }
html body.fone-page .pb-grid-2 > *{ min-width: 0; }
@media (min-width: 981px) {
  html body.fone-page .pb-grid-2{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html body.fone-page .pb-grid-2--7-5{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  html body.fone-page .pb-grid-2--5-7{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  html body.fone-page .pb-grid-2--top{ align-items: start; }
}

/* ---------- Sections — DS-017, Abstand eine Stufe → DS-035 ---------- */
html body.fone-page .pb-section{ position: relative; padding-block: var(--pb-section-y); }
html body.fone-page .pb-bg-white{ background: var(--pb-white); }
html body.fone-page .pb-bg-mist{ background: var(--pb-mist); }
html body.fone-page .pb-bg-night{ background: var(--pb-gradient-night); color: var(--pb-white); }
html body.fone-page .pb-bg-photo{ background: var(--pb-navy-deep); color: var(--pb-white); overflow: hidden; }
html body.fone-page .pb-bg-photo > .pb-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
html body.fone-page .pb-bg-photo::before{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(3, 20, 35, .92) 0%, rgba(3, 20, 35, .78) 48%, var(--pb-overlay) 100%); }
html body.fone-page .pb-bg-photo > .pb-wrap{ position: relative; z-index: 2; }
@media (max-width: 767px) { html body.fone-page .pb-bg-photo::before{ background: rgba(3, 20, 35, .82); } }

/* Kurve — DS-016, gehört zur dunklen Section */
html body.fone-page .pb-curve{ position: absolute; left: 0; width: 100%; height: var(--pb-curve-h); display: block; z-index: 3; color: var(--pb-white); pointer-events: none; }
html body.fone-page .pb-curve--bottom{ bottom: -1px; }
html body.fone-page .pb-curve--top{ top: -1px; transform: scale(-1, -1); }
html body.fone-page .pb-has-curve-bottom{ padding-bottom: calc(var(--pb-section-y) + var(--pb-curve-h)); }
html body.fone-page .pb-has-curve-top{ padding-top: calc(var(--pb-section-y) + var(--pb-curve-h)); }

/* ---------- Typografie — DS-009, DS-010 ---------- */
html body.fone-page .pb-display{ font-size: var(--pb-fs-display); line-height: var(--pb-lh-display); font-weight: var(--pb-fw-bold); text-transform: uppercase; letter-spacing: 0; overflow-wrap: break-word; hyphens: manual; }
html body.fone-page .pb-h2{ font-size: var(--pb-fs-h2); line-height: var(--pb-lh-h2); font-weight: var(--pb-fw-bold); color: var(--pb-navy); text-wrap: balance; }
html body.fone-page .pb-bg-night .pb-h2,html body.fone-page .pb-bg-photo .pb-h2{ color: var(--pb-white); }
html body.fone-page .pb-sub{ font-size: var(--pb-fs-sub); line-height: var(--pb-lh-sub); font-weight: var(--pb-fw-regular); margin-top: var(--pb-space-2); text-wrap: pretty; }
html body.fone-page .pb-title{ font-size: var(--pb-fs-title); line-height: var(--pb-lh-title); font-weight: var(--pb-fw-semibold); color: var(--pb-navy); }
html body.fone-page .pb-bg-night .pb-title,html body.fone-page .pb-bg-photo .pb-title{ color: var(--pb-white); }
html body.fone-page .pb-text{ margin-top: var(--pb-space-4); max-width: 62ch; }
html body.fone-page .pb-text > p + p{ margin-top: var(--pb-space-4); }
html body.fone-page .pb-small{ font-size: var(--pb-fs-small); line-height: var(--pb-lh-small); }
html body.fone-page .pb-micro{ font-size: var(--pb-fs-micro); line-height: var(--pb-lh-small); color: var(--pb-ink-soft); }
html body.fone-page .pb-bg-night .pb-micro,html body.fone-page .pb-bg-photo .pb-micro{ color: rgba(255, 255, 255, .78); }
html body.fone-page .pb-mark{ color: var(--pb-gold); } /* DS-024: nur auf Dunkel */
html body.fone-page .pb-strong{ font-weight: var(--pb-fw-bold); }
html body.fone-page .pb-link{ color: var(--pb-navy); font-weight: var(--pb-fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
html body.fone-page .pb-bg-night .pb-link,html body.fone-page .pb-bg-photo .pb-link,html body.fone-page .pb-footer .pb-link{ color: var(--pb-white); }
html body.fone-page .pb-center{ text-align: center; }
html body.fone-page .pb-center .pb-text{ margin-inline: auto; }
html body.fone-page .pb-intro{ max-width: 760px; }
html body.fone-page .pb-center.pb-intro{ margin-inline: auto; }

/* Akzentbalken — DS-015 */
html body.fone-page .pb-eyebar{ display: block; width: var(--pb-eyebar-w); height: var(--pb-eyebar-h); background: var(--pb-gold); clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); margin-bottom: 20px; }
html body.fone-page .pb-center .pb-eyebar{ display: none; }

/* Pfeil von links — K-003 (nur im Statement-Ausbruch) */
html body.fone-page .pb-arrow{ display: block; width: clamp(48px, 9vw, 140px); height: 12px; color: var(--pb-gold); }

/* Ausbruch „Staffelung" — Statement (Handschrift H5, benannt in designsystem/04-handschrift-anwendung.md)
   Zweite Zeile eingerückt, der Pfeil läuft vom Fensterrand in die Einrückung. */
html body.fone-page .pb-staffel{ --pb-staffel-indent: clamp(40px, 14vw, 220px); position: relative; font-size: clamp(36px, .5rem + 6.6vw, 112px); }
html body.fone-page .pb-staffel__title{ font-size: 1em; line-height: .98; }
html body.fone-page .pb-staffel__title > span{ display: block; }
html body.fone-page .pb-staffel__title > span + span{ padding-left: var(--pb-staffel-indent); }
html body.fone-page .pb-staffel__arrow{ position: absolute; left: calc(50% - 50vw); bottom: calc(.49em - 6px); width: calc(50vw - 50% + var(--pb-staffel-indent) - .3em); margin: 0; }

/* ---------- Buttons — DS-018 / K-001 ---------- */
html body.fone-page .pb-actions{ display: flex; flex-wrap: wrap; gap: var(--pb-space-3); margin-top: var(--pb-space-6); align-items: center; }
html body.fone-page .pb-btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--pb-space-2); min-height: var(--pb-btn-min-h); padding: var(--pb-btn-pad-y) var(--pb-btn-pad-x); border-radius: var(--pb-radius-pill); border: var(--pb-border-btn) solid transparent; font: var(--pb-fw-semibold) var(--pb-fs-button)/1.2 var(--pb-font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--pb-dur) var(--pb-ease), color var(--pb-dur) var(--pb-ease), border-color var(--pb-dur) var(--pb-ease); -webkit-appearance: none; appearance: none; }
html body.fone-page .pb-btn svg{ width: 8px; height: 12px; flex: none; }
html body.fone-page .pb-btn--primary{ background: var(--pb-gold); color: var(--pb-navy); }
html body.fone-page .pb-btn--primary:hover{ background: var(--pb-navy); color: var(--pb-white); }
html body.fone-page .pb-bg-night .pb-btn--primary:hover,html body.fone-page .pb-bg-photo .pb-btn--primary:hover{ background: var(--pb-white); color: var(--pb-navy); }
html body.fone-page .pb-btn--secondary{ border-color: var(--pb-navy); color: var(--pb-navy); background: transparent; }
html body.fone-page .pb-btn--secondary:hover{ background: var(--pb-navy); color: var(--pb-white); }
html body.fone-page .pb-btn--inverse{ border-color: var(--pb-white); color: var(--pb-white); background: transparent; }
html body.fone-page .pb-btn--inverse:hover{ background: var(--pb-white); color: var(--pb-navy); }
html body.fone-page .pb-btn--white{ background: var(--pb-white); color: var(--pb-navy); }
html body.fone-page .pb-btn--white:hover{ background: var(--pb-navy); color: var(--pb-white); }
html body.fone-page .pb-btn--small{ min-height: 44px; padding: 10px 20px; }
html body.fone-page .pb-btn[disabled]{ opacity: .6; cursor: progress; }
@media (max-width: 480px) { html body.fone-page .pb-actions .pb-btn{ width: 100%; } }


/* ---------- Kopf (Hülle) ---------- */
html body.fone-page .pb-header{ position: sticky; top: 0; z-index: 50; background: var(--pb-white); border-bottom: var(--pb-border-card) solid var(--pb-mist); }
html body.fone-page .pb-header__inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--pb-space-4); min-height: 72px; }
html body.fone-page .pb-header__logo{ display: block; flex: none; }
html body.fone-page .pb-header__logo img{ width: clamp(150px, 18vw, 200px); }
html body.fone-page .pb-header__actions{ display: flex; align-items: center; gap: var(--pb-space-5); }
@media (max-width: 420px) { html body.fone-page .pb-header .pb-btn{ padding-inline: 16px; } html body.fone-page .pb-header .pb-btn svg{ display: none; } }

/* ---------- Hero — S-hero ---------- */
html body.fone-page .pb-hero .pb-sub{ margin-top: var(--pb-space-5); max-width: 36ch; }
html body.fone-page .pb-hero__media{ justify-self: center; width: min(100%, 420px); }
@media (max-width: 980px) { html body.fone-page .pb-hero__media{ width: min(72%, 360px); } }

/* ---------- Sechseck — DS-014 / K-006 ---------- */
html body.fone-page .pb-hex{ -webkit-mask: var(--pb-hex-mask) center / 100% 100% no-repeat; mask: var(--pb-hex-mask) center / 100% 100% no-repeat; aspect-ratio: var(--pb-hex-ratio); }
html body.fone-page .pb-hex-img{ width: 100%; height: 100%; object-fit: cover; }
html body.fone-page .pb-hex-icon{ display: grid; place-items: center; flex: none; background: var(--pb-sky); color: var(--pb-white); }
html body.fone-page .pb-hex-icon svg{ width: 52%; height: 52%; }
html body.fone-page .pb-hex-badge{ display: grid; place-items: center; width: 48px; flex: none; background: var(--pb-navy); color: var(--pb-white); font-weight: var(--pb-fw-bold); font-size: var(--pb-fs-title); line-height: 1; }

/* ---------- Vertrauensleiste — K-012 (vorgeschlagen) ---------- */
html body.fone-page .pb-trust{ padding-block: var(--pb-space-6); }
html body.fone-page .pb-trust__list{ list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pb-space-4) var(--pb-space-5); }
@media (min-width: 520px) { html body.fone-page .pb-trust__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) { html body.fone-page .pb-trust__list{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html body.fone-page .pb-trust__item{ display: flex; align-items: center; gap: var(--pb-space-3); font-size: var(--pb-fs-small); line-height: 1.35; }
html body.fone-page .pb-trust__item .pb-hex-icon{ width: 40px; }
html body.fone-page .pb-trust__item strong{ display: block; font-weight: var(--pb-fw-bold); color: var(--pb-navy); }

/* ---------- Bild-Text ---------- */
html body.fone-page .pb-media{ width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Säulen — S-pillar, dreispaltig (vorgeschlagen) ---------- */
html body.fone-page .pb-pillars{ list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pb-space-7); margin-top: var(--pb-space-8); }
@media (min-width: 981px) { html body.fone-page .pb-pillars{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pb-col-gap); } }
html body.fone-page .pb-pillar{ border-top: var(--pb-border-card) solid var(--pb-mist); padding-top: var(--pb-space-6); }
html body.fone-page .pb-pillar__name{ font-size: var(--pb-fs-title); line-height: 1.2; font-weight: var(--pb-fw-bold); color: var(--pb-navy); }
html body.fone-page .pb-pillar__promise{ font-size: var(--pb-fs-title); line-height: var(--pb-lh-title); font-weight: var(--pb-fw-regular); margin-top: var(--pb-space-4); }

/* ---------- Listen — DS-019 / K-004, K-005 ---------- */
html body.fone-page .pb-dash{ list-style: none; margin-top: var(--pb-space-5); }
html body.fone-page .pb-dash li{ position: relative; padding-left: 24px; line-height: 1.6; }
html body.fone-page .pb-dash li::before{ content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 3px; border-radius: 3px; background: var(--pb-gold); }
html body.fone-page .pb-bg-night .pb-dash li::before,html body.fone-page .pb-bg-photo .pb-dash li::before{ background: var(--pb-white); }
html body.fone-page .pb-dash li + li{ margin-top: 10px; }
html body.fone-page .pb-dash--loose li + li{ margin-top: var(--pb-space-4); }
html body.fone-page .pb-dash strong{ color: var(--pb-navy); }
@media (min-width: 600px) { html body.fone-page .pb-dash--cols{ columns: 2; column-gap: var(--pb-space-6); } html body.fone-page .pb-dash--cols li{ break-inside: avoid; margin-bottom: 10px; } html body.fone-page .pb-dash--cols li + li{ margin-top: 0; } }
/* Hakenliste — nur in den beiden Ausbrüchen (Hero, Statement) */
html body.fone-page .pb-checks{ list-style: none; margin-top: var(--pb-space-6); display: grid; gap: var(--pb-space-3); }
html body.fone-page .pb-checks li{ display: flex; align-items: center; gap: var(--pb-space-3); font-weight: var(--pb-fw-bold); font-size: var(--pb-fs-title); line-height: 1.3; }
html body.fone-page .pb-checks .pb-hex-icon{ width: 30px; }
html body.fone-page .pb-checks--row{ display: flex; flex-wrap: wrap; gap: var(--pb-space-3) var(--pb-space-5); margin-top: var(--pb-space-5); }
html body.fone-page .pb-checks--row li{ font-size: var(--pb-fs-small); font-weight: var(--pb-fw-semibold); gap: var(--pb-space-2); }
html body.fone-page .pb-checks--row .pb-hex-icon{ width: 22px; }

/* ---------- Kennzahlen — K-007 ---------- */
html body.fone-page .pb-facts{ list-style: none; display: flex; flex-wrap: wrap; gap: var(--pb-space-3) var(--pb-space-8); margin-top: var(--pb-space-7); font-weight: var(--pb-fw-semibold); font-size: var(--pb-fs-small); color: rgba(255, 255, 255, .78); }

/* ---------- Preise — S-pricing / K-009 ---------- */
html body.fone-page .pb-prices{ list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pb-space-5); margin-top: var(--pb-space-8); }
@media (min-width: 981px) { html body.fone-page .pb-prices{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pb-col-gap); } }
html body.fone-page .pb-price-card{ background: var(--pb-mist); padding: var(--pb-space-6); display: flex; flex-direction: column; }
html body.fone-page .pb-price-card .pb-price{ margin-top: var(--pb-space-4); }
html body.fone-page .pb-price{ font-size: var(--pb-fs-h2); font-weight: var(--pb-fw-bold); color: var(--pb-navy); line-height: 1; white-space: nowrap; }
html body.fone-page .pb-price__from{ display: block; margin-bottom: var(--pb-space-1); font-size: var(--pb-fs-small); font-weight: var(--pb-fw-semibold); line-height: 1.4; }
html body.fone-page .pb-price-card .pb-dash{ margin-top: var(--pb-space-5); }

/* ---------- Ablauf — K-013 (vorgeschlagen) ---------- */
html body.fone-page .pb-steps{ list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pb-space-6); margin-top: var(--pb-space-8); }
@media (min-width: 768px) { html body.fone-page .pb-steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pb-col-gap); } }
html body.fone-page .pb-step{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pb-space-4); align-items: start; }
html body.fone-page .pb-step__title{ font-size: var(--pb-fs-title); line-height: var(--pb-lh-title); font-weight: var(--pb-fw-bold); color: var(--pb-navy); }
html body.fone-page .pb-step__text{ margin-top: var(--pb-space-2); }
html body.fone-page .pb-callout{ margin-top: var(--pb-space-8); display: flex; flex-wrap: wrap; gap: var(--pb-space-2) var(--pb-space-4); align-items: center; }
html body.fone-page .pb-callout__phone{ font-weight: var(--pb-fw-bold); color: var(--pb-navy); font-size: var(--pb-fs-title); text-decoration: none; }
html body.fone-page .pb-callout__phone:hover{ text-decoration: underline; }

/* ---------- Auszeichnungen — S-proof ---------- */
html body.fone-page .pb-proof__media{ display: flex; gap: var(--pb-space-6); align-items: flex-end; justify-content: center; }
html body.fone-page .pb-proof__badge{ width: min(60%, 260px); }

/* ---------- Zitat — K-014 (vorgeschlagen) ---------- */
html body.fone-page .pb-quote{ margin-top: var(--pb-space-6); }
html body.fone-page .pb-quote p{ font-size: var(--pb-fs-title); line-height: 1.45; font-weight: var(--pb-fw-regular); color: var(--pb-navy); }
html body.fone-page .pb-quote footer{ margin-top: var(--pb-space-3); font-size: var(--pb-fs-small); font-weight: var(--pb-fw-semibold); }

/* ---------- FAQ — K-015 (vorgeschlagen) ---------- */
html body.fone-page .pb-faq{ margin-top: var(--pb-space-7); border-top: var(--pb-border-card) solid var(--pb-mist); }
html body.fone-page .pb-faq__item{ border-bottom: var(--pb-border-card) solid var(--pb-mist); }
html body.fone-page .pb-faq__q{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--pb-space-4); padding: var(--pb-space-5) 0; font-size: var(--pb-fs-title); line-height: 1.35; font-weight: var(--pb-fw-semibold); color: var(--pb-navy); }
html body.fone-page .pb-faq__q::-webkit-details-marker{ display: none; }
html body.fone-page .pb-faq__q::after{ content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--pb-navy); border-bottom: 2px solid var(--pb-navy); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--pb-dur) var(--pb-ease); }
html body.fone-page .pb-faq__item[open] .pb-faq__q::after{ transform: rotate(-135deg) translate(-3px, -3px); }
html body.fone-page .pb-faq__a{ padding: 0 0 var(--pb-space-5); max-width: 68ch; }

/* ---------- Formular — S-form / K-010, K-016 (vorgeschlagen) ---------- */
html body.fone-page .pb-form-layout{ display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "info"; gap: var(--pb-space-6); align-items: start; }
html body.fone-page .pb-form-layout > *{ min-width: 0; }
html body.fone-page .pb-form-layout__head{ grid-area: head; }
html body.fone-page .pb-form-layout__form{ grid-area: form; }
html body.fone-page .pb-form-layout__info{ grid-area: info; }
@media (min-width: 981px) { html body.fone-page .pb-form-layout{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head form" "info form"; column-gap: var(--pb-col-gap); row-gap: var(--pb-space-6); } }
html body.fone-page .pb-form-info{ padding-top: var(--pb-space-2); }
html body.fone-page .pb-form-info .pb-title{ color: var(--pb-navy); }
html body.fone-page .pb-form-info ol{ list-style: none; margin-top: var(--pb-space-4); display: grid; gap: var(--pb-space-3); counter-reset: pbstep; }
html body.fone-page .pb-form-info ol li{ position: relative; padding-left: 44px; counter-increment: pbstep; }
/* dieselbe Sechseck-Ziffer wie im Ablauf (H1), nur kleiner */
html body.fone-page .pb-form-info ol li::before{ content: counter(pbstep); position: absolute; left: 0; top: 0; width: 28px; aspect-ratio: var(--pb-hex-ratio); display: grid; place-items: center; background: var(--pb-navy); color: var(--pb-white); font-size: var(--pb-fs-small); font-weight: var(--pb-fw-bold); line-height: 1; -webkit-mask: var(--pb-hex-mask) center / 100% 100% no-repeat; mask: var(--pb-hex-mask) center / 100% 100% no-repeat; }
html body.fone-page .pb-contact{ list-style: none; margin-top: var(--pb-space-5); display: grid; gap: var(--pb-space-2); font-size: var(--pb-fs-small); }
html body.fone-page .pb-contact a{ color: var(--pb-navy); font-weight: var(--pb-fw-semibold); }

html body.fone-page .pb-form{ background: var(--pb-white); padding: clamp(20px, 4vw, 40px); }
html body.fone-page .pb-progress{ list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pb-space-2); margin-bottom: var(--pb-space-6); }
html body.fone-page .pb-progress li{ font-size: var(--pb-fs-micro); font-weight: var(--pb-fw-semibold); color: var(--pb-ink-soft); padding-top: 12px; border-top: var(--pb-border-card) solid var(--pb-mist); }
html body.fone-page .pb-progress li.is-current{ color: var(--pb-navy); border-top-color: var(--pb-navy); }
html body.fone-page .pb-progress li.is-done{ color: var(--pb-navy); border-top-color: var(--pb-navy); }
/* Schritte und Danke-Ansicht erst per Skript ausblenden — im Markup bleiben sie sichtbar und damit in FlatsiteOne editierbar */
html.pb-js body.fone-page .pb-form__step:not(.is-active){ display: none; }
html body.fone-page .pb-form__step + .pb-form__step{ margin-top: var(--pb-space-7); }
html.pb-js body.fone-page .pb-form__step + .pb-form__step{ margin-top: 0; }
html body.fone-page .pb-form__legend{ font-size: var(--pb-fs-title); line-height: var(--pb-lh-title); font-weight: var(--pb-fw-bold); color: var(--pb-navy); margin-bottom: var(--pb-space-5); }
html body.fone-page .pb-fields{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pb-space-4); }
@media (min-width: 600px) { html body.fone-page .pb-fields{ grid-template-columns: repeat(2, minmax(0, 1fr)); } html body.fone-page .pb-field--full{ grid-column: 1 / -1; } }
html body.fone-page .pb-field{ display: grid; gap: 6px; }
html body.fone-page .pb-field__label{ font-size: var(--pb-fs-small); font-weight: var(--pb-fw-semibold); line-height: 1.4; color: var(--pb-ink); }
html body.fone-page .pb-field__label abbr{ text-decoration: none; color: var(--pb-navy); }
html body.fone-page .pb-field__input{ width: 100%; font: var(--pb-fw-regular) 16px/1.4 var(--pb-font); color: var(--pb-ink); background: var(--pb-mist); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: var(--pb-field-pad); min-height: var(--pb-field-min-h); margin: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }
html body.fone-page .pb-field__input:focus{ outline: none; background: var(--pb-white); border-bottom-color: var(--pb-navy); box-shadow: inset 0 0 0 1px #c9cdd1; }
html body.fone-page .pb-field__input[aria-invalid="true"]{ border-bottom-color: var(--pb-ink); box-shadow: inset 0 0 0 1px var(--pb-ink); }
html body.fone-page textarea.pb-field__input{ min-height: 120px; resize: vertical; }
html body.fone-page select.pb-field__input{ background-image: linear-gradient(45deg, transparent 50%, var(--pb-navy) 50%), linear-gradient(135deg, var(--pb-navy) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
html body.fone-page .pb-field__error{ font-size: var(--pb-fs-small); font-weight: var(--pb-fw-semibold); color: var(--pb-ink); }
html body.fone-page .pb-field__error:empty{ display: none; }
html body.fone-page .pb-field__error::before{ content: "! "; color: var(--pb-navy); }
html body.fone-page .pb-choices{ display: flex; flex-wrap: wrap; gap: var(--pb-space-2); }
html body.fone-page .pb-choice{ position: relative; display: inline-flex; align-items: center; gap: var(--pb-space-2); min-height: 44px; padding: 10px 16px; background: var(--pb-mist); cursor: pointer; font-size: var(--pb-fs-small); font-weight: var(--pb-fw-semibold); }
html body.fone-page .pb-choice input{ width: 18px; height: 18px; margin: 0; accent-color: var(--pb-navy); }
html body.fone-page .pb-check{ display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--pb-space-3); align-items: start; font-size: var(--pb-fs-small); line-height: 1.5; cursor: pointer; }
html body.fone-page .pb-check input{ width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pb-navy); }
html body.fone-page .pb-check + .pb-check{ margin-top: var(--pb-space-4); }
html body.fone-page .pb-form__nav{ display: flex; flex-wrap: wrap; gap: var(--pb-space-3); justify-content: space-between; align-items: center; margin-top: var(--pb-space-6); }
html body.fone-page .pb-form__back{ background: none; border: 0; padding: 12px 0; font: var(--pb-fw-semibold) var(--pb-fs-small)/1.2 var(--pb-font); color: var(--pb-navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html body.fone-page .pb-form__note{ margin-top: var(--pb-space-4); }
html body.fone-page .pb-form__status{ margin-top: var(--pb-space-4); font-weight: var(--pb-fw-semibold); }
html body.fone-page .pb-form__status:empty{ display: none; }
html body.fone-page .pb-hp{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
html body.fone-page .pb-thanks{ text-align: left; }
html.pb-js body.fone-page .pb-thanks:not(.is-shown){ display: none; }
html body.fone-page .pb-form__form[hidden]{ display: none; }
html body.fone-page .pb-thanks .pb-hex-icon{ width: 56px; margin-bottom: var(--pb-space-5); }

/* ---------- Fuß (Hülle) ---------- */
html body.fone-page .pb-footer{ position: relative; background: var(--pb-navy); color: var(--pb-white); padding-block: var(--pb-space-8); font-size: var(--pb-fs-small); }
html body.fone-page .pb-footer__inner{ display: grid; gap: var(--pb-space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { html body.fone-page .pb-footer__inner{ grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: var(--pb-space-8); } }
html body.fone-page .pb-footer__tv{ width: 140px; }
html body.fone-page .pb-footer__tv figcaption{ font-size: var(--pb-fs-micro); color: rgba(255, 255, 255, .78); margin-bottom: var(--pb-space-2); }
html body.fone-page .pb-footer__logo{ width: 190px; }
html body.fone-page .pb-footer__address{ font-style: normal; margin-top: var(--pb-space-4); line-height: 1.7; }
html body.fone-page .pb-footer__address a{ color: var(--pb-white); }
html body.fone-page .pb-footer__legal{ list-style: none; display: flex; flex-wrap: wrap; gap: var(--pb-space-2) var(--pb-space-5); }
html body.fone-page .pb-footer__legal a{ color: var(--pb-white); text-decoration: underline; text-underline-offset: 3px; }
html body.fone-page .pb-footer__copy{ margin-top: var(--pb-space-3); color: rgba(255, 255, 255, .78); }

/* ---------- Mobile Aktionsleiste — K-017 (vorgeschlagen) ---------- */
html body.fone-page .pb-dock{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: var(--pb-space-2); padding: 10px var(--pb-gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--pb-white); border-top: var(--pb-border-card) solid var(--pb-mist); transform: translateY(110%); transition: transform var(--pb-dur) var(--pb-ease); }
html body.fone-page .pb-dock.is-visible{ transform: none; }
html body.fone-page .pb-dock .pb-btn{ flex: 1 1 auto; }
html body.fone-page .pb-dock .pb-btn--secondary{ flex: 0 0 auto; padding-inline: 16px; }
html body.fone-page .pb-dock .pb-btn--secondary svg{ width: 18px; height: 18px; }
@media (min-width: 768px) { html body.fone-page .pb-dock{ display: none; } }
@media (max-width: 767px) { html body.fone-page .pb-footer{ padding-bottom: calc(var(--pb-space-8) + 72px); } }

/* ---------- Einblenden — DS-025 ---------- */
/* nur mit JS verstecken — ohne Skript bleibt alles sichtbar */
html.pb-js body.fone-page .pb-reveal{ opacity: 0; transform: translateY(16px); transition: opacity var(--pb-dur-reveal) var(--pb-ease), transform var(--pb-dur-reveal) var(--pb-ease); }
html.pb-js body.fone-page .pb-reveal.is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.pb-js body.fone-page .pb-reveal{ opacity: 1; transform: none; } }

/* Ergänzungen */
html body.fone-page .pb-sub--narrow{ max-width: 32ch; margin-top: var(--pb-space-5); }
html body.fone-page .pb-prices__note{ margin-top: var(--pb-space-5); }