/* ============================================================
   Scanseite — Primitive und Flächen (Feature 006, T007/T008)

   WARUM HIER UND NICHT AUS DEM DESIGNSYSTEM. Dessen Komponenten sind
   React-Primitive in einem globalen Bundle (`window.PrivacyBeeDesignSystem_813fec`).
   Der Entwurf der Scanseite benutzt daraus GENAU ZWEI: Input und Button. React und
   ein Bundle einzuziehen, um zwei Komponenten zu bekommen, wäre gegen die
   Simplicity-Klausel der Konstitution (research.md R2). Also zwei CSS-Klassen.

   Was NICHT hier steht: Farben, Radien, Abstände, Schatten. Die kommen
   ausschliesslich aus tokens/ — kein Festwert in dieser Datei.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* Muss NACH den Primitiven unten ebenfalls gelten: `.pb-button { display: inline-flex }`
   schlaegt die Vorgabe des Browsers fuer `[hidden]`, weil eine Klasse staerker bindet als
   ein Attributwaehler des Nutzeragenten. Ohne diese Zeile steht „Neuer Scan" schon auf der
   Startseite, obwohl das Markup den Knopf als `hidden` fuehrt. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-subtle);
  color: var(--text-body);
  font: var(--weight-regular) var(--fs-body) / var(--lh-body) var(--font-sans);
  /* Die Seite fuellt mindestens das Fenster, und der Inhalt schiebt die Fusszeile nach
     unten. Ohne das schwebte sie bei kurzen Zustaenden - "Scan laeuft", "keine Dienste
     erkannt", eine Fehlermeldung - mitten im Bild, mit grauer Flaeche darunter. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > footer { flex: none; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--action-primary-hover); text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }

.pb-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

/* ---- Button ---------------------------------------------------------- */

.pb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  background: var(--action-primary);
  /* Die Schriftfarbe liegt in einem eigenen Merkmal, damit jede Spielart sie setzen
     kann und der Schwebezustand unten sie zurueckholen kann - siehe dort. */
  --knopf-schrift: var(--text-inverse);
  color: var(--knopf-schrift);
  font: var(--weight-semibold) var(--fs-body) / 1 var(--font-sans);
  cursor: pointer;
  padding: 0 var(--space-6);
  height: 44px;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
/* `pb-pruefe-schweben` bildet den Schwebezustand fuer tools/verify/landing-page-check.ts
   nach - `:hover` laesst sich von aussen nicht erzwingen. Sie faerbt nichts von sich aus.

   EIN KNOPF IST EIN KNOPF, AUCH WENN ER EIN <a> IST.
   `a:hover` weiter oben faerbt jeden Verweis blau und unterstreicht ihn - und schlaegt dabei
   `.pb-button` in der Spezifitaet (Typ + Pseudoklasse gegen eine Klasse). Auf dem blauen
   Knopf hiess das: blaue Schrift auf blauem Grund, die Beschriftung verschwand. Geflickt war
   es bisher je Spielart; das ist der Grund, warum es beim Partner-Knopf wieder auftrat.
   Diese Regel gilt fuer alle auf einmal, und sie ist spezifisch genug (0,0,2,1). */
.pb-button:hover,
.pb-button.pb-pruefe-schweben { background: var(--action-primary-hover); }
a.pb-button:hover,
a.pb-button:focus,
a.pb-button.pb-pruefe-schweben { color: var(--knopf-schrift); text-decoration: none; }
.pb-button:active { background: var(--action-primary-press); transform: translateY(1px); }
.pb-button[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.pb-button--lg { height: 50px; padding: 0 var(--space-8); font-size: var(--fs-lg); }
.pb-button--block { width: 100%; }
.pb-button--ghost {
  background: transparent;
  --knopf-schrift: var(--text-body);
  border: var(--border-w) solid var(--border-subtle);
}
.pb-button--ghost:hover,
.pb-button--ghost.pb-pruefe-schweben { background: var(--pb-grey-100); }

/* ---- Input ----------------------------------------------------------- */

.pb-field { display: flex; flex-direction: column; gap: var(--space-2); }
.pb-field__label {
  font: var(--weight-semibold) var(--fs-sm) / 1.2 var(--font-sans);
  color: var(--text-body);
}
.pb-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-strong);
  font: var(--weight-regular) var(--fs-body) / 1 var(--font-sans);
}
.pb-input::placeholder { color: var(--pb-grey-400); }
.pb-input:focus { outline: none; border-color: var(--focus-ring); box-shadow: var(--ring-focus); }
.pb-input--lg { height: 50px; font-size: var(--fs-lg); }

/* ---- Card / Pill / Chip / Section ------------------------------------ */

.pb-card {
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.pb-card--flat { box-shadow: none; }

.pb-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-honey);
  color: var(--text-on-honey);
  font: var(--weight-bold) var(--fs-xs) / 1 var(--font-sans);
  white-space: nowrap;
}
.pb-pill--quiet { background: var(--pb-grey-100); color: var(--text-body); }

.pb-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font: var(--weight-medium) var(--fs-xs) / 1.4 var(--font-sans);
  color: var(--text-body);
}
.pb-chip__icon { width: 16px; height: 16px; flex: none; }
.pb-chip--special { border-color: var(--pb-honey-600); color: var(--pb-honey-700); }

.pb-section { padding-block: var(--section-pad-y); }
.pb-section--subtle { background: var(--surface-subtle); }
.pb-section--card { background: var(--surface-page); }

.pb-eyebrow-sm {
  font: var(--weight-bold) var(--fs-xs) / 1.2 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pb-navy-300);
}

/* ---- Herkunft und Abwesenheit ----------------------------------------
   Die beiden Klassen, an denen die ganze Feature hängt. Eine fehlende Angabe
   darf NIE wie eine leere aussehen (FR-012), und eine Störung nie wie ein
   leerer Bestand (FR-014). Sie sind deshalb sichtbar verschieden. */

.pb-absence {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: var(--border-w-2) solid var(--pb-grey-300);
  background: var(--pb-grey-50);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.pb-absence__label { font-weight: var(--weight-semibold); color: var(--text-body); }

/* Störung — NICHT dasselbe wie „nichts hinterlegt". */
.pb-absence--outage {
  border-left-color: var(--status-error);
  background: var(--pb-red-50);
  color: var(--pb-red-600);
}
.pb-absence--outage .pb-absence__label { color: var(--pb-red-600); }

.pb-provenance {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.pb-provenance--model { color: var(--pb-honey-700); }
.pb-provenance--none  { color: var(--pb-red-600); }

/* Fehlende Übersetzung — sichtbar, nie stiller Rückfall (FR-016). */
.pb-missing-translation {
  background: var(--pb-red-100);
  color: var(--pb-red-600);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ---- Schmale Fenster (T083) ------------------------------------------ */

@media (max-width: 720px) {
  :root { --fs-h1: 30px; --fs-h2: 24px; --fs-display: 36px; --section-pad-y: 40px; }
  .pb-card { padding: var(--space-4); }
}

/* ---- Flussbild (T068 bis T073, exakt nach dem Entwurf) ------------------
   HTML-KAESTEN UEBER EINEM SVG. Das SVG zeichnet nur die Baender; alles, was Text traegt,
   ist ein echtes Element. Beide liegen im selben Rahmen und werden in Prozent DESSELBEN
   Masses gesetzt, deshalb decken sie sich auf jeder Breite.

   Masse, Radien und Deckkraft stammen Zahl fuer Zahl aus
   `specs/006-scan-landing-page/entwurf/Dienste-Scanner.dc.html`. */

.pb-flow-wrap { overflow-x: auto; }
.pb-flow-stage { position: relative; width: 100%; min-width: 620px; }
.pb-flow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.pb-flow-col {
  position: absolute; top: 4px;
  font: var(--weight-bold) 10.5px / 1.2 var(--font-sans);
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--pb-navy-300);
}

/* ---- Die Baender -------------------------------------------------------
   LINKS navy, RECHTS in der Farbe des Ziellandes - so wie im Entwurf. Im Ruhezustand sehr
   blass (0.14 / 0.30): das Bild soll als Ganzes lesbar sein, nicht als Liniengewirr. Beim
   Hervorheben verblassen die uebrigen auf 0.05, statt dass die einen lauter werden. */

.pb-flow__link { fill: none; transition: stroke-opacity var(--dur-fast) var(--ease-standard), stroke var(--dur-fast) var(--ease-standard); }
.pb-flow__link--von  { stroke: var(--pb-navy-800); stroke-opacity: .14; }
.pb-flow__link--nach { stroke-opacity: .30; }

.pb-flow__link--ton-angemessen { stroke: var(--pb-green-500); }
.pb-flow__link--ton-bedingt    { stroke: var(--pb-honey-500); }
.pb-flow__link--ton-ohne       { stroke: var(--pb-red-500); }
.pb-flow__link--ton-ungeprueft { stroke: var(--pb-grey-500); }
.pb-flow__link--ton-offen      { stroke: var(--pb-navy-300); }

.pb-flow-stage--focused .pb-flow__link--von  { stroke-opacity: .05; }
.pb-flow-stage--focused .pb-flow__link--nach { stroke-opacity: .06; }
/* Ein hervorgehobenes LINKES Band wird honigfarben; ein rechtes behaelt die Farbe seines
   Ziellandes - sonst ginge beim Hervorheben gerade die Auskunft verloren, um derentwillen
   man hinzeigt. */
.pb-flow-stage--focused .pb-flow__link--von.pb-flow__link--on  { stroke: var(--pb-honey-500); stroke-opacity: .55; }
.pb-flow-stage--focused .pb-flow__link--nach.pb-flow__link--on { stroke-opacity: .62; }

/* ---- Die Kaesten -------------------------------------------------------- */

.pb-flow-node {
  position: absolute; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  border: var(--border-w) solid var(--border-subtle);
  background: var(--surface-card);
  padding: 4px 11px; border-radius: 6px; cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.pb-flow-node:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Datenkategorie: Symbol und Text nebeneinander. */
.pb-flow-node--sp0 { flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; }
/* Dienst: nur der Name, mittig. */
.pb-flow-node--sp1 { border-radius: 8px; justify-content: center; }
/* Empfaengerland: farbige Kante links, rechts abgerundet. */
.pb-flow-node--sp2 { border-radius: 0 12px 12px 0; border-left-width: 4px; padding: 8px 14px; }

.pb-flow-node__label {
  display: block;
  font: var(--weight-bold) 13px / 1.2 var(--font-sans); letter-spacing: -0.01em;
  color: var(--text-strong);
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%;
}
.pb-flow-node--sp1 .pb-flow-node__label {
  font-size: 12.5px; font-weight: var(--weight-semibold); line-height: 1.1;
  transition: color var(--dur-fast) var(--ease-standard);
}
.pb-flow-node__sub {
  display: block;
  font: var(--weight-semibold) 11px / 1.3 var(--font-sans); color: var(--pb-grey-600);
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%;
}
.pb-flow-node--sp2 .pb-flow-node__sub { font-weight: var(--weight-bold); }

.pb-flow-node__icon {
  flex: none; width: 30px; height: 26px; border-radius: 8px;
  background-color: var(--surface-honey);
  background-size: 22px 17px; background-position: center; background-repeat: no-repeat;
}
/* "Nicht bestimmbar" hat kein Symbol - der Platz bleibt, gestrichelt. Der KASTEN bleibt
   normal: die Kategorie ist da, nur ihr Inhalt ist unbekannt. Die Klasse
   `pb-flow-node--unknown` ist der Haltepunkt dafuer, dass ein unbestimmbarer Knoten
   ueberhaupt GEZEICHNET wird (FR-011) - die Tests haengen daran. */
.pb-flow-node__icon--none { background-color: var(--surface-card); border: 1.5px dashed var(--pb-navy-300); }
.pb-flow-node--unknown .pb-flow-node__label { color: var(--pb-grey-600); }

/* T071 - eine ANGENOMMENE Kategorie ist auch im Bild als Annahme erkennbar. Sie steht in der
   zweiten Zeile ("3 Dienste · angenommen") und NICHT als Rahmenfarbe: honigfarbener Rahmen
   heisst hier "hervorgehoben", und zwei Bedeutungen auf einem Merkmal sind eine zu viel. */
.pb-flow-node--assumed .pb-flow-node__sub { color: var(--pb-honey-700); font-weight: var(--weight-bold); }

/* Die farbige Kante am Land ist ein REGISTERBEFUND, keine Bewertung - siehe flow-chart.ts. */
.pb-flow-node--ton-angemessen { border-left-color: var(--pb-green-500); }
.pb-flow-node--ton-bedingt    { border-left-color: var(--pb-honey-500); }
.pb-flow-node--ton-ohne       { border-left-color: var(--pb-red-500); }
.pb-flow-node--ton-ungeprueft { border-left-color: var(--pb-grey-400); }
.pb-flow-node--ton-offen      { border-left-color: var(--pb-navy-300); }

/* ---- Hervorgehoben ------------------------------------------------------
   Kategorien und Laender treten zurueck (0.5); Dienste tun das NICHT, sie werden nur blass
   beschriftet - eine halbdurchsichtige Dienstliste liest sich wie ein Ladezustand. */

.pb-flow-stage--focused .pb-flow-node--sp0,
.pb-flow-stage--focused .pb-flow-node--sp2 { opacity: .5; }
.pb-flow-stage--focused .pb-flow-node--on { opacity: 1; }

.pb-flow-stage--focused .pb-flow-node--sp1:not(.pb-flow-node--on) .pb-flow-node__label { color: var(--pb-grey-400); }
.pb-flow-stage--focused .pb-flow-node--sp1.pb-flow-node--on { border-color: var(--pb-navy-300); }

/* Die angezeigte Kategorie selbst: honigfarben hinterlegt. */
.pb-flow-node--sp0.pb-flow-node--aktiv { background: var(--pb-honey-50); border-color: var(--pb-honey-500); }
/* Jedes betroffene Land ebenso - die linke Kante behaelt ihre Befundfarbe. */
.pb-flow-node--sp2.pb-flow-node--treffer {
  background: var(--pb-honey-50);
  border-top-color: var(--pb-honey-500);
  border-right-color: var(--pb-honey-500);
  border-bottom-color: var(--pb-honey-500);
}
.pb-flow-node--sp2.pb-flow-node--treffer .pb-flow-node__sub { color: var(--text-strong); }

.pb-flow-legend {
  margin-top: var(--space-3); padding: 0 6px;
  display: flex; gap: var(--space-5); flex-wrap: wrap;
}
.pb-flow-legend__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--pb-grey-600); }
.pb-flow-legend__dot { flex: none; width: 9px; height: 9px; border-radius: var(--radius-pill); }
.pb-flow-legend__dot--angemessen { background: var(--pb-green-500); }
.pb-flow-legend__dot--bedingt    { background: var(--pb-honey-500); }
.pb-flow-legend__dot--ohne       { background: var(--pb-red-500); }
.pb-flow-legend__dot--ungeprueft { background: var(--pb-grey-400); }
.pb-flow-legend__dot--offen      { background: var(--pb-navy-300); }

.pb-flow-count { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--pb-grey-600); }
.pb-flow-count--off { color: var(--pb-red-600); font-weight: var(--weight-semibold); }

/* ---- Kopf und Start (T006) -------------------------------------------- */

.pb-brand { display: inline-flex; align-items: center; }
.pb-brand img { display: block; height: 28px; width: auto; }


/* ---- Sprachwahl, Umschalter (T066, T051, T082) ------------------------- */

.pb-linkbutton {
  background: none;
  border: 0;
  min-height: 32px;
  padding: 0 var(--space-2);
  font: inherit;
  color: var(--text-link);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.pb-linkbutton[aria-pressed="true"] { color: var(--text-strong); font-weight: var(--weight-bold); }

.pb-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  margin-bottom: var(--space-3);
}
.pb-segmented { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.pb-segmented__label { font-size: var(--fs-sm); color: var(--text-muted); margin-right: var(--space-1); }
.pb-segmented button {
  min-height: 36px;
  padding: 0 var(--space-3);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-body);
  font: var(--weight-medium) var(--fs-sm) / 1 var(--font-sans);
  cursor: pointer;
}
.pb-segmented button[aria-pressed="true"] {
  background: var(--surface-navy);
  border-color: var(--surface-navy);
  color: var(--text-inverse);
}

/* Die geltende Sicht steht am Ergebnis, nicht nur am Umschalter (FR-009). */
.pb-applies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pb-heading-view { font-weight: var(--weight-regular); color: var(--text-muted); }

/* ---- Gruppen (T051) --------------------------------------------------- */

.pb-group { margin-top: var(--space-6); }
.pb-group__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font: var(--weight-bold) var(--fs-lg) / 1.3 var(--font-sans);
  color: var(--text-strong);
}
.pb-group__count { font-size: var(--fs-sm); font-weight: var(--weight-semibold); color: var(--text-muted); }

/* ---- Belege (T050) ---------------------------------------------------- */

.pb-evidence {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
}
.pb-evidence li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; min-width: 0; }
.pb-evidence code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-body); overflow-wrap: anywhere; min-width: 0; }
.pb-evidence__type { font-weight: var(--weight-semibold); color: var(--text-muted); min-width: 4.5em; }
.pb-evidence__meta { color: var(--text-muted); font-size: var(--fs-xs); }

/* ---- Registerangabe (T062) ---------------------------------------------
   Drei Lagen, drei Bilder: gelistet (Karte), nicht gelistet (Karte mit grauer
   Kante), nicht geprüft (nur ein Satz, keine Karte - es gibt nichts zu zeigen). */

.pb-register { margin-top: var(--space-3); }
.pb-register__title { font-weight: var(--weight-bold); color: var(--text-strong); }
.pb-register__meta { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-1); overflow-wrap: anywhere; }
.pb-register__fact { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.pb-register--unchecked { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; }
.pb-register--notlisted,
.pb-register--inactive { border-left: var(--border-w-2) solid var(--pb-grey-400); }

/* ---- Flussbild als Text (T082, T083) ----------------------------------
   Für Screenreader immer vorhanden; sichtbar auf schmalen Fenstern, wo das
   SVG nur noch waagrecht scrollend lesbar wäre. */

.pb-flow-list,
.pb-sr-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pb-flow-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pb-flow-list li { font-size: var(--fs-sm); overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .pb-flow-wrap, .pb-flow-legend { display: none !important; }
  .pb-flow-list {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    margin-top: var(--space-3);
  }
}

/* ---- Kontrast kleiner Texte (T082) -------------------------------------
   GEMESSEN mit tools/verify/landing-page-check.ts am 14.09.2026, gegen den
   tatsächlichen Hintergrund: Augenbraue (navy-300) 2,95:1, Modellwissen
   (honey-700) 3,22:1, gedämpfter Text auf Grau (grey-500) 4,15:1. Verlangt
   sind 4,5:1 für kleinen Text.

   Korrigiert mit dunkleren Tönen AUS DERSELBEN TOKENREIHE, nicht mit neuen
   Farben. Die Tokens selbst bleiben unverändert - sie gehören dem
   Designsystem, und dort sind sie für grosse Flächen und Schrift gedacht.

   Honig hat keinen Ton, der als Schrift auf Weiss 4,5:1 erreicht. Die
   Honigmarkierung wandert deshalb vom Text in den Grund: Navy-Schrift auf
   hellem Honig (10,9:1). Unterscheidbar von "belegt" bleibt sie trotzdem. */

.pb-eyebrow-sm { color: var(--pb-navy-500); }

.pb-absence,
.pb-group__count,
.pb-segmented__label,
.pb-applies,
.pb-heading-view,
.pb-register__meta,
.pb-register__fact,
.pb-register--unchecked,
.pb-evidence__type,
.pb-evidence__meta,
.pb-provenance { color: var(--pb-grey-600); }

.pb-provenance--model {
  color: var(--pb-navy-700);
  background: var(--pb-honey-100);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
}
.pb-chip--special { border-color: var(--pb-honey-600); background: var(--pb-honey-50); color: var(--pb-navy-800); }

/* "Nur deutsch" (FR-016): Rot auf Hellrot erreichte 3,68:1. Das Rot bleibt im Grund,
   die Schrift wird Navy - die Marke bleibt auffaellig, der Text lesbar. */
.pb-missing-translation { color: var(--pb-navy-800); }

/* ======================================================================
   ABGLEICH MIT DEM ENTWURF (17.09.2026)
   Vorlage: specs/006-scan-landing-page/entwurf/Dienste-Scanner.dc.html,
            Dienst-Zeile.dc.html, Dienst-Detail.dc.html

   Die erste Fassung der Seite war gegen die BESCHREIBUNG in spec.md gebaut, nicht gegen
   den Entwurf - der lag nicht im Repo. Sie traf damit das Was, nicht das Aussehen. Was
   hier steht, ist der Abgleich: Aufbau, Masse und Rhythmus aus der Vorlage, Farben und
   Abstaende weiterhin ausschliesslich aus tokens/.

   WO DER ENTWURF NICHT BEFOLGT WIRD, steht der Grund an Ort und Stelle. Es sind vier
   Stellen, alle vier schon in spec.md entschieden: kein Pruefdatum "Stammdaten ✓"
   (FR-030a), keine E-Mail-Schranke, kein PDF, keine Google Fonts.
   ====================================================================== */

/* ---- Breiter Rahmen ---------------------------------------------------
   Der Entwurf setzt Kopfzeile und Ergebnis auf 1280px, Start und Werbeteil auf 1200px.
   Beide Masse bleiben erhalten; --container-max (1200) ist die Voreinstellung. */
.pb-container--wide { max-width: 1280px; }

.pb-sr-only {
  position: absolute; width: 1px; height: 1px; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.pb-skip {
  position: absolute; left: var(--space-4); top: -60px; z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-navy); color: var(--text-inverse);
  border-radius: var(--radius-sm); font-weight: var(--weight-semibold);
}
.pb-skip:focus { top: var(--space-4); color: var(--text-inverse); }

/* ---- Kopfzeile --------------------------------------------------------- */

.pb-header { background: var(--surface-page); border-bottom: var(--border-w) solid var(--border-subtle); }
.pb-header__bar {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: var(--space-8); row-gap: var(--space-3);
  min-height: 70px; padding-block: var(--space-3);
}
.pb-header__nav {
  flex: 1 1 auto; display: flex; justify-content: center; align-items: center;
  gap: var(--space-5); font-size: var(--fs-sm); font-weight: var(--weight-semibold);
}
.pb-header__nav a { color: var(--text-body); white-space: nowrap; }
.pb-header__nav a:hover { color: var(--text-strong); text-decoration: none; }
.pb-header__end { flex: none; display: flex; align-items: center; gap: var(--space-3); }
.pb-langs { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); }

.pb-brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.pb-brand img { display: block; height: 34px; width: auto; }
.pb-brand__word {
  font-size: 26px; letter-spacing: -0.03em; line-height: 1;
  color: var(--text-strong); font-weight: var(--weight-medium);
}
.pb-brand__word b { font-weight: var(--weight-extra); }
.pb-brand:hover { text-decoration: none; }

.pb-button--sm { height: 40px; padding: 0 var(--space-5); font-size: var(--fs-sm); }
.pb-linkbutton--action { font-weight: var(--weight-semibold); font-size: var(--fs-sm); }

/* ---- Startzustand ------------------------------------------------------
   Zweispaltig: links das Versprechen und das Formular, rechts was nach dem Scan da steht.
   Der Entwurf setzt die Startflaeche auf WEISS, den Rest der Seite auf Grau. */

.pb-hero { background: var(--surface-page); }
.pb-hero__grid {
  display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start;
  padding-block: var(--space-20) var(--space-24);
}
.pb-hero__main { flex: 1 1 400px; min-width: 0; }
.pb-hero__title {
  margin: 0 0 18px;
  font: var(--weight-extra) clamp(38px, 5.4vw, 62px) / 1.02 var(--font-display);
  letter-spacing: -0.038em; color: var(--text-strong); text-wrap: pretty;
}
.pb-hero__title span { color: var(--text-accent); }
.pb-hero__lead {
  margin: 0 0 34px; font-size: var(--fs-lg); line-height: var(--lh-body);
  max-width: 68ch; text-wrap: pretty; color: var(--text-body);
}
.pb-hero__form {
  display: flex; gap: var(--space-3); align-items: flex-end;
  flex-wrap: wrap; max-width: 620px;
}
.pb-hero__form .pb-field { flex: 1 1 280px; min-width: 0; }

.pb-beta { margin-top: 18px; max-width: 620px; display: flex; gap: var(--space-4); align-items: flex-start; }
.pb-beta__tag {
  flex: none; margin-top: 2px;
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-navy); color: var(--pb-honey-400);
  font: var(--weight-extra) 11px / 1 var(--font-sans); letter-spacing: 0.09em;
}
.pb-beta__text { font-size: var(--fs-sm); line-height: 1.55; color: var(--pb-grey-600); }

/* Was nach dem Scan da steht. Drei Kennzahlen als BEISPIEL, nicht als Messwert -
   deshalb traegt der Block eine Ueberschrift, die das sagt, und die Zahlen sind
   ausdruecklich mit "z. B." gekennzeichnet (siehe Wortliste). */
.pb-promise { flex: 1 1 340px; min-width: 280px; }
.pb-promise__head {
  font: var(--weight-bold) var(--fs-xs) / 1.2 var(--font-sans);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--pb-navy-500);
}
.pb-promise__list { margin-top: var(--space-4); }
.pb-promise__row {
  display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0; border-top: var(--border-w) solid var(--pb-navy-100);
}
.pb-promise__num {
  flex: none; width: 78px; text-align: right;
  font: var(--weight-extra) clamp(40px, 5vw, 54px) / .9 var(--font-display);
  letter-spacing: -0.05em; color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}
.pb-promise__label {
  display: block; font: var(--weight-bold) var(--fs-lg) / 1.2 var(--font-sans);
  letter-spacing: -0.02em; color: var(--text-strong);
}
.pb-promise__note { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--pb-grey-600); }

/* ---- Scan laeuft -------------------------------------------------------
   DIE PHASEN TRAGEN KEINEN EIGENEN ZUSTAND. Der Entwurf zeigt je Phase "fertig",
   "laeuft" oder "wartet". Die Schnittstelle kennt nur `pending | running | completed |
   failed` - welche der vier Phasen gerade laeuft, WISSEN WIR NICHT. Vier Punkte, die
   sich der Reihe nach fuellen, waeren ein erfundenes Signal, und erfundene Signale sind
   genau das, was diese Seite sonst ueberall vermeidet. Die Liste sagt deshalb, WAS der
   Scan tut, nicht wie weit er ist; der Balken bleibt unbestimmt. */

.pb-scanning { max-width: 720px; margin: 0 auto; padding-block: var(--space-16) 100px; }
.pb-progress { height: 6px; border-radius: var(--radius-pill); background: var(--pb-grey-200); overflow: hidden; }
.pb-progress__bar { height: 100%; background: var(--action-primary); border-radius: var(--radius-pill); }

.pb-phases { margin-top: var(--space-8); display: flex; flex-direction: column; gap: 2px; }
.pb-phase {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 14px var(--space-4); border-radius: var(--radius-md);
  border: var(--border-w) solid transparent;
}
.pb-phase__dot {
  flex: none; width: 18px; height: 18px; border-radius: var(--radius-pill);
  border: 2px solid var(--pb-grey-300); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--weight-extra) 10px / 1 var(--font-sans); color: transparent;
  transition: background var(--dur-normal) var(--ease-standard), border-color var(--dur-normal) var(--ease-standard);
}
.pb-phase__label { flex: 1; font: var(--weight-semibold) var(--fs-body) / 1.4 var(--font-sans); color: var(--text-strong); }
.pb-phase__state { flex: none; font-size: var(--fs-sm); color: var(--pb-grey-600); }

/* Drei Lagen, drei Bilder - wie im Entwurf: erledigt (gruener Haken), laeuft (blauer Punkt,
   pulsierend), wartet (leerer Ring). Der laufende Schritt bekommt ausserdem eine Karte
   unter sich, damit das Auge ihn ohne Farbe findet. */
.pb-phase--done .pb-phase__dot { background: var(--status-success); border-color: var(--status-success); color: var(--pb-white); }
.pb-phase--now .pb-phase__dot { background: var(--action-primary); border-color: var(--action-primary); animation: pbpulse 1.1s ease-in-out infinite; }
.pb-phase--now { background: var(--surface-card); border-color: var(--border-subtle); }
.pb-phase--wait .pb-phase__label { color: var(--pb-grey-500); }

.pb-progress__bar { transition: width var(--dur-slow) var(--ease-out); }

/* ---- Ergebniskopf ------------------------------------------------------- */

.pb-result { padding-block: var(--space-8) var(--section-pad-y); }
.pb-result__title {
  margin: 0 0 18px;
  font: var(--weight-extra) clamp(34px, 4.6vw, 52px) / 1.02 var(--font-display);
  letter-spacing: -0.038em; color: var(--text-strong); overflow-wrap: anywhere;
}
.pb-result__title .pb-heading-view { font-size: var(--fs-lg); letter-spacing: 0; }

.pb-panel {
  background: var(--surface-card); border: var(--border-w) solid var(--border-subtle);
  border-radius: 16px; padding: var(--space-4) var(--space-3);
}
.pb-panel__head {
  display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-3); border-bottom: var(--border-w) solid var(--border-subtle);
}
.pb-panel__head h2 {
  margin: 0; font: var(--weight-extra) var(--fs-xs) / 1.2 var(--font-sans);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-strong);
}
.pb-panel__hint { font-size: var(--fs-sm); color: var(--pb-grey-600); }

/* Werbeblock im Ergebnis - der Entwurf setzt ihn zwischen Flussbild und Dienstliste. */
.pb-upsell {
  margin: 34px 0 38px; padding: 34px 36px;
  background: var(--surface-navy); border-radius: 16px;
  display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start;
}
.pb-upsell__main { flex: 1 1 420px; min-width: 0; }
.pb-upsell__main h2 {
  margin: 0 0 14px;
  font: var(--weight-extra) clamp(28px, 3.2vw, 36px) / 1.08 var(--font-display);
  letter-spacing: -0.036em; color: var(--text-inverse); max-width: 26ch;
}
.pb-upsell__main p { margin: 0 0 22px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--pb-navy-100); max-width: 56ch; }
.pb-upsell__side { flex: 1 1 260px; min-width: 240px; }
.pb-upsell__head {
  font: var(--weight-bold) 11px / 1.2 var(--font-sans);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--pb-navy-300);
}
.pb-upsell__item {
  display: flex; gap: 11px; align-items: center; padding: var(--space-3) 0;
  border-top: var(--border-w) solid var(--pb-navy-700);
  font: var(--weight-semibold) var(--fs-body) / 1.4 var(--font-sans); color: var(--text-inverse);
}
.pb-upsell__note { padding: var(--space-3) 0; border-top: var(--border-w) solid var(--pb-navy-700); font-size: var(--fs-sm); color: var(--pb-navy-100); }
.pb-tick {
  flex: none; width: 19px; height: 19px; border-radius: var(--radius-pill);
  background: var(--status-success); color: var(--pb-white);
  font: var(--weight-extra) 11px / 1 var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Zwei Spielarten fuer dunkle und honigfarbene Flaechen. Sie setzen NUR Grund und
   Schriftmerkmal; die Schriftfarbe haelt die Grundregel weiter oben fest.

   JEDER KNOPF WIRD BEIM SCHWEBEN DUNKLER, auch diese beiden. Sie gingen vorher heller -
   damit war der Schwebezustand auf derselben Seite einmal so und einmal so, und ein Knopf
   soll ueberall dasselbe tun. */
.pb-button--honey { background: var(--action-accent); --knopf-schrift: var(--text-on-honey); }
.pb-button--honey:hover,
.pb-button--honey.pb-pruefe-schweben { background: var(--action-accent-hover); }
.pb-button--navy { background: var(--surface-navy); --knopf-schrift: var(--text-inverse); }
.pb-button--navy:hover,
.pb-button--navy.pb-pruefe-schweben { background: var(--pb-navy-900); }

/* ---- Gruppen im Entwurfsschnitt ----------------------------------------- */

.pb-group__title::before {
  content: ""; flex: none; width: 7px; height: 7px;
  border-radius: var(--radius-pill); background: var(--action-accent);
  align-self: center;
}
.pb-group__title { font-size: 22px; font-weight: var(--weight-extra); letter-spacing: -0.028em; }

/* ---- Dienstzeile (Dienst-Zeile.dc.html) ---------------------------------
   AUFKLAPPBAR, wie im Entwurf. Vorher stand jede Angabe jedes Dienstes sofort offen da;
   bei zwoelf Diensten war das eine Wand. Zugeklappt zeigt die Zeile, was zum Ueberblick
   noetig ist - Name, Adresse, Anbieter, Kategorien, Uebermittlungslage. */

.pb-svc {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: 16px; padding: 22px 24px;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.pb-svc:hover { border-color: var(--pb-navy-300); }
.pb-svc[open] { box-shadow: 0 10px 28px rgba(26, 39, 68, .08); }

.pb-svc__head {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
.pb-svc__head::-webkit-details-marker { display: none; }
.pb-svc__head:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-md); }

.pb-svc__mono {
  flex: none; width: 56px; height: 56px; border-radius: var(--radius-lg);
  background: var(--surface-subtle); border: var(--border-w) solid var(--border-subtle);
  color: var(--pb-honey-700);
  font: var(--weight-extra) 20px / 1 var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-svc__body-col { flex: 1 1 220px; min-width: 0; }
.pb-svc__name { margin: 0; font: var(--weight-extra) 21px / 1.2 var(--font-sans); letter-spacing: -0.028em; color: var(--text-strong); }
.pb-svc__url { margin-top: 2px; font-size: var(--fs-sm); color: var(--pb-grey-600); overflow-wrap: anywhere; }
.pb-svc__facts { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) 18px; align-items: center; font-size: var(--fs-sm); }
.pb-svc__fact { color: var(--text-body); }
.pb-svc__fact b { font-weight: var(--weight-semibold); }
.pb-svc__fact-key { color: var(--pb-grey-600); }
/* `flex: none` liess diesen Block NICHT schrumpfen. Die Rahmenpille traegt einen langen
   Namen ("Swiss-U.S. Data Privacy Framework", 251px), und die Zeile schob die Seite auf
   schmalen Fenstern um 330px nach rechts - gemessen bei 375px. Jetzt darf sie umbrechen
   und schmaler werden. */
.pb-svc__end { flex: 0 1 auto; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pb-svc__toggle { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--weight-semibold) var(--fs-sm) / 1 var(--font-sans); color: var(--pb-grey-600); }
.pb-svc__chev { flex: none; transition: transform .18s var(--ease-standard); }
.pb-svc__toggle-close { display: none; }
.pb-svc[open] .pb-svc__toggle-open { display: none; }
.pb-svc[open] .pb-svc__toggle-close { display: inline; }
.pb-svc[open] .pb-svc__chev { transform: rotate(180deg); }
.pb-svc__drawer { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.pb-svc__lead { margin: 0; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--text-body); max-width: 88ch; text-wrap: pretty; }

/* Statuspille der Uebermittlungslage. Fuenf Bilder im Entwurf, vier hier: "SCC und TIA
   erforderlich" ENTFAELLT (spec.md, Entscheidung E1) - es ist eine Handlungsanweisung an
   das Geschaeft der Besucherin, und wir haben weder SCC noch TIA. An seiner Stelle steht
   die Tatsache: kein Angemessenheitsbeschluss, kein Rahmeneintrag fuer diese Sicht. */
.pb-status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 24px; padding: 3px var(--space-3); border-radius: var(--radius-pill);
  font: var(--weight-semibold) var(--fs-xs) / 1.25 var(--font-sans);
  max-width: 100%; text-align: center;
}
.pb-status--none     { background: var(--surface-navy); color: var(--text-inverse); }
.pb-status--adequacy { background: var(--surface-card); border: var(--border-w) solid var(--surface-navy); color: var(--text-strong); }
.pb-status--listed   { background: var(--pb-navy-50); border: var(--border-w) solid var(--surface-navy); color: var(--text-strong); }
.pb-status--norecord { background: var(--pb-honey-50); border: var(--border-w) solid var(--pb-honey-600); color: var(--text-strong); }
.pb-status--unknown  { background: var(--surface-card); border: 1.5px dashed var(--pb-navy-300); color: var(--pb-navy-600); }

.pb-svc__group {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px var(--space-3);
  border-radius: var(--radius-pill); background: var(--surface-honey); color: var(--text-on-honey);
  font: var(--weight-bold) var(--fs-xs) / 1.25 var(--font-sans);
  max-width: 100%; text-align: center;
}

/* ---- Dienst-Detail (Dienst-Detail.dc.html) ------------------------------
   Drei Spalten nebeneinander statt untereinander: Datenkategorien, Anbieter,
   Uebermittlungslage. */

.pb-detail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px; align-items: start;
  padding-top: var(--space-5); border-top: var(--border-w) solid var(--border-subtle);
}
.pb-detail__col h4 {
  margin: 0 0 var(--space-3);
  font: var(--weight-bold) var(--fs-xs) / 1.2 var(--font-sans);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--pb-navy-500);
}

/* Anbieterangaben als Tabelle - Schluessel links, Wert rechts. */
.pb-kv { border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); }
.pb-kv__row { display: flex; gap: var(--space-4); padding: 11px var(--space-4); border-bottom: var(--border-w) solid var(--pb-grey-100); font-size: var(--fs-sm); }
.pb-kv__row:last-child { border-bottom: 0; }
.pb-kv__k { flex: none; width: 120px; color: var(--pb-grey-600); }
.pb-kv__v { flex: 1; min-width: 0; color: var(--text-strong); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }

/* Kategorieblock mit Symbol, Bezeichnung und Erklaerung. */
.pb-catblock { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-subtle); border: var(--border-w) solid var(--border-subtle); }
.pb-catblock + .pb-catblock { margin-top: var(--space-2); }
.pb-catblock__head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.pb-catblock__icon { width: 26px; height: 26px; flex: none; }
.pb-catblock__label { font: var(--weight-bold) var(--fs-body) / 1.3 var(--font-sans); color: var(--text-strong); }
.pb-catblock__special { font: var(--weight-bold) 11px / 1.4 var(--font-sans); color: var(--pb-navy-800); background: var(--pb-honey-50); border: var(--border-w) solid var(--pb-honey-600); border-radius: var(--radius-pill); padding: 2px var(--space-2); }
.pb-catblock__explain { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--pb-grey-600); }

/* Kasten der Uebermittlungslage. */
.pb-tbox { padding: var(--space-4); border-radius: var(--radius-md); border: var(--border-w) solid var(--border-subtle); background: var(--surface-card); }
.pb-tbox + .pb-tbox { margin-top: var(--space-2); }
.pb-tbox__eyebrow { font: var(--weight-bold) 11px / 1.2 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pb-navy-500); }
.pb-tbox__head { margin-top: 6px; font: var(--weight-extra) var(--fs-body) / 1.3 var(--font-sans); color: var(--text-strong); }
.pb-tbox__line { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-body); max-width: 62ch; }
.pb-tbox__meta { margin-top: var(--space-2); display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: baseline; font-size: var(--fs-sm); color: var(--pb-grey-600); }
.pb-tbox--listed { background: var(--pb-navy-50); border-color: var(--pb-navy-100); }
.pb-tbox--norecord { background: var(--pb-honey-50); border-color: var(--pb-honey-600); }
.pb-tbox--unknown { border-style: dashed; border-color: var(--pb-navy-300); }

/* ---- Werbeteil: Agenturen ----------------------------------------------- */

.pb-mkt-agencies { background: var(--surface-subtle); border-top: var(--border-w) solid var(--border-subtle); }
.pb-mkt-agencies__inner { padding-block: 88px var(--space-24); }
.pb-partner {
  display: flex; flex-wrap: wrap; background: var(--surface-card);
  border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(26, 39, 68, .09);
}
.pb-partner__text { flex: 1 1 480px; min-width: 0; padding: 52px 48px 52px 52px; }
.pb-partner__eyebrow { font: var(--weight-bold) var(--fs-xs) / 1.2 var(--font-sans); letter-spacing: 0.11em; text-transform: uppercase; color: var(--pb-honey-700); }
.pb-partner__text h2 {
  margin: var(--space-4) 0 18px;
  font: var(--weight-extra) clamp(32px, 4vw, 48px) / 1 var(--font-display);
  letter-spacing: -0.04em; color: var(--text-strong);
}
/* EIGENE KLASSE, KEIN TYPWAEHLER. `.pb-partner__text > p` traf auch `.pb-partner__ask`
   und schlug ihn in der Spezifitaet (Klasse+Typ gegen Klasse) - der Abstand ueber der
   Ansprache fiel damit auf null, und der Satz klebte am letzten Aufzaehlungspunkt. */
.pb-partner__lead { margin: 0 0 26px; font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-body); max-width: 52ch; }
.pb-partner__points { display: flex; flex-direction: column; gap: var(--space-3); }
.pb-partner__point { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-body); line-height: 1.5; color: var(--text-body); }
.pb-partner__point span { max-width: 52ch; }
.pb-partner__point b { color: var(--text-strong); }
.pb-partner__ask { margin: 26px 0 22px; font-size: var(--fs-body); color: var(--text-body); }
.pb-partner__ask b { color: var(--text-strong); }
.pb-partner__media { flex: 1 1 380px; min-width: 280px; position: relative; background: var(--pb-grey-100); min-height: 420px; }
.pb-partner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.pb-partner__badge {
  position: absolute; left: var(--space-6); bottom: var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-card);
}
.pb-partner__badge-name { font: var(--weight-extra) var(--fs-body) / 1.2 var(--font-sans); color: var(--text-strong); letter-spacing: -0.01em; }
.pb-partner__badge-role { font-size: var(--fs-sm); color: var(--pb-grey-600); }
.pb-partner__li {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: #0a66c2; color: #fff;
  font: var(--weight-extra) var(--fs-sm) / 1 var(--font-sans); letter-spacing: -0.02em;
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-partner__li:hover { background: #004182; color: #fff; text-decoration: none; }

/* ---- Werbeteil: Haeufige Fragen ----------------------------------------- */

.pb-mkt-faq { background: var(--surface-subtle); border-top: var(--border-w) solid var(--border-subtle); }
.pb-mkt-faq__inner { max-width: 900px; margin: 0 auto; padding: var(--section-pad-y) var(--container-pad) var(--space-20); }
.pb-mkt-faq h2 {
  margin: 0 0 var(--space-2);
  font: var(--weight-extra) clamp(40px, 5.2vw, 58px) / 1 var(--font-display);
  letter-spacing: -0.042em; color: var(--text-strong);
}
.pb-mkt-faq__lead { margin: 0 0 26px; font-size: var(--fs-body); color: var(--pb-grey-600); max-width: 60ch; }
.pb-faq__item { border-top: var(--border-w) solid var(--border-subtle); }
.pb-faq__q {
  padding: 18px 0; cursor: pointer; list-style: none;
  font: var(--weight-bold) 19px / 1.35 var(--font-sans); letter-spacing: -0.02em; color: var(--text-strong);
  display: flex; gap: var(--space-3); align-items: baseline;
}
.pb-faq__q::-webkit-details-marker { display: none; }
.pb-faq__q:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }
.pb-faq__q::after { content: "+"; margin-left: auto; font-weight: var(--weight-regular); color: var(--pb-grey-500); }
.pb-faq__item[open] .pb-faq__q::after { content: "−"; }
.pb-faq__a { margin: 0; padding: 0 0 18px; font-size: var(--fs-body); line-height: 1.65; color: var(--pb-grey-600); max-width: 72ch; }

/* ---- Werbeteil: Wabenband ----------------------------------------------- */

.pb-honeycomb { background: var(--pb-honey-400) url("../assets/honeycomb-bg.webp") center / cover no-repeat; }
.pb-honeycomb__inner { display: flex; gap: var(--space-12); align-items: center; flex-wrap: wrap; padding-block: 76px var(--space-20); }
.pb-honeycomb__main { flex: 1 1 480px; min-width: 0; }
.pb-honeycomb__eyebrow { font: var(--weight-bold) var(--fs-xs) / 1.2 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-body); }
.pb-honeycomb__main h2 {
  margin: var(--space-3) 0 14px;
  font: var(--weight-extra) clamp(36px, 5vw, 56px) / .98 var(--font-display);
  letter-spacing: -0.042em; color: var(--text-strong); text-wrap: pretty;
}
.pb-honeycomb__main p { margin: 0 0 28px; font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-strong); max-width: 58ch; }
.pb-honeycomb__fine { margin-top: var(--space-2); font: var(--weight-semibold) var(--fs-sm) / 1.4 var(--font-sans); color: var(--text-strong); }
.pb-honeycomb__side { flex: 0 1 280px; min-width: 180px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pb-honeycomb__side img { height: 96px; width: auto; display: block; }
.pb-honeycomb__count {
  max-width: 100%; padding: 11px var(--space-5); border-radius: var(--radius-pill);
  background: var(--surface-navy); color: var(--text-inverse);
  font: var(--weight-bold) var(--fs-body) / 1.3 var(--font-sans); text-align: center;
}

/* ---- Fusszeile ---------------------------------------------------------- */

.pb-footer { background: var(--surface-navy); color: var(--text-inverse); }
.pb-footer__bar {
  padding-block: 28px; display: flex; flex-wrap: wrap;
  gap: var(--space-3) var(--space-8); align-items: center; font-size: var(--fs-xs);
}
.pb-footer__bar p { margin: 0; opacity: .85; }

/* ---- Schmale Fenster ----------------------------------------------------- */

@media (max-width: 860px) {
  .pb-header__nav { display: none; }
  .pb-partner__text { padding: var(--space-8) var(--space-6); }
  .pb-upsell { padding: var(--space-6); gap: var(--space-8); }
}
@media (max-width: 720px) {
  /* Kopfzeile der Dienstzeile: die Pillen stellen sich unter den Namen statt daneben. */
  .pb-svc__end { width: 100%; }
  .pb-detail { grid-template-columns: 1fr; }
  .pb-kv__k { width: 96px; }
  .pb-hero__grid { padding-block: var(--space-10) var(--space-12); gap: var(--space-8); }
  .pb-mkt-agencies__inner { padding-block: var(--space-12); }
  .pb-mkt-faq__inner { padding-block: var(--space-12); }
  .pb-honeycomb__inner { padding-block: var(--space-12); }
  .pb-svc { padding: var(--space-4); }
  .pb-promise__num { width: 56px; }
  .pb-header__end { gap: var(--space-2); }
  .pb-button--sm { padding: 0 var(--space-3); }
}