/* ═══ 01-fundament.default.css ═══ */
/* @section acss-fundament
   @owns    :root-Tokens und Grundregeln, die bisher automatic.css lieferte
   @seealso 01-fundament (eigene Marken-Tokens), tools/acss-abgleich.mjs

   WARUM ES DAS GIBT: Das eigene CSS definierte KEINE der Basisvariablen
   (--text-m, --h1..--h3, --text-color, --link-color, --radius,
   --content-width). Ueberschriftengroessen, Grundschriftgroesse,
   Linkfarben und Sektionspolster kamen aus AutomaticCSS. Ohne Ersatz
   faellt beim Abschalten alles auf Browser-Standard zurueck (gemessen
   29.08.2026: 58-80 % der Elemente veraendern sich).

   Von 366 ACSS-Variablen werden 76 gebraucht, von 248 Regeln greifen 25.
   Werte wie am 29.08.2026 im Browser gemessen, clamp() bleibt clamp():
   die Responsivitaet steckt in den Ausdruecken, nicht in Pixelwerten.

   ZWEI FALLEN, die im Bau je einen Fehldurchlauf gekostet haben:
   1. Drei Selektoren kommen MEHRFACH vor (*, html, :where(section:not(
      section section))). Regeln nach Selektor in eine Map zu legen
      verliert die erste Fassung, hier display:flex und die Polster.
   2. Der Bedarf an Variablen darf nicht aus den eigenen Dateien
      abgeleitet werden. --content-width-safe wird von einem Stylesheet
      gebraucht, das nicht im Git-Spiegel liegt. Referenzen deshalb aus
      ALLEN geladenen Stylesheets des Dokuments einsammeln.

   NICHT VON HAND PFLEGEN, ohne den Abgleich zu wiederholen:
   node tools/acss-abgleich.mjs */

:root {
  --blockquote-background: oklch(0.95 0 0);
  --blockquote-border-color: oklch(0.65 0.107 221);
  --blockquote-border-radius: 5px;
  --blockquote-border-style: solid;
  --blockquote-border-width: 0 0 0 3px;
  --blockquote-box-shadow: none;
  --blockquote-cite-color: currentColor;
  --blockquote-cite-font-family: ;
  --blockquote-cite-font-size: ;
  --blockquote-cite-font-style: ;
  --blockquote-cite-font-weight: ;
  --blockquote-cite-line-height: ;
  --blockquote-cite-text-transform: ;
  --blockquote-gap: 1em;
  --blockquote-padding: clamp(1.5rem, calc(0.652173913vw + 1.3532608696rem), 1.875rem);
  --blockquote-text-color: ;
  --blockquote-text-font-family: ;
  --blockquote-text-font-size: clamp(1.2rem, calc(0.5210869565vw + 1.0827554348rem), 1.499625rem);
  --blockquote-text-font-style: normal;
  --blockquote-text-font-weight: normal;
  --blockquote-text-line-height: ;
  --blockquote-text-text-align: left;
  --blockquote-text-text-transform: none;
  --body-bg-color: #fff;
  --btn-align-items: center;
  --btn-border-radius: 5px;
  --btn-border-style: solid;
  --btn-border-width: 1.5px;
  --btn-font-family: ;
  --btn-font-size: clamp(1rem, calc(0.2173913043vw + 0.9510869565rem), 1.125rem);
  --btn-font-style: normal;
  --btn-font-weight: 400;
  --btn-justify-content: center;
  --btn-letter-spacing: 0;
  --btn-line-height: 1;
  --btn-min-width: 8.75rem;
  --btn-padding-block: 0.5em;
  --btn-padding-inline: 1.25em;
  --btn-text-align: center;
  --btn-text-decoration: none;
  --btn-text-transform: none;
  --btn-width: max-content;
  --container-gap: clamp(2.6653335rem, calc(2.701593913vw + 2.0574748696rem), 4.21875rem);
  --content-gap: clamp(1.5rem, calc(0.652173913vw + 1.3532608696rem), 1.875rem);
  --content-width: 80rem;
  --gutter: clamp(1rem, calc(6.9565217391vw + -0.5652173913rem), 5rem);
  --h1: clamp(1.944rem, calc(1.7682457326vw + 1.5461447102rem), 2.9607412962rem);
  --h1-max-width: 100%;
  --h2: clamp(1.62rem, calc(1.0454108696vw + 1.3847825543rem), 2.22111125rem);
  --h3: clamp(1.35rem, calc(0.55vw + 1.22625rem), 1.66625rem);
  --heading-color: #000;
  --heading-font-weight: 700;
  --heading-line-height: calc(4px + 2ex);
  --heading-text-wrap: balance;
  --link-color: oklch(0.65 0.107 221);
  --link-decoration: ;
  --link-transition: 0.3s ease-in-out 0s;
  --link-underline-offset: auto;
  --link-weight: ;
  --offset: calc(clamp(0rem, calc(0vw + 0rem), 0rem) + clamp(0rem, calc(0vw + 0rem), 0rem));
  --primary: oklch(0.65 0.107 221);
  --primary-hover: oklch(0.552 0.107 221);
  --primary-light: oklch(0.85 0.107 221);
  --primary-ultra-light: oklch(0.95 0.107 221);
  --radius: 5px;
  --root-font-size: 100%;
  --section-padding-block: clamp(3rem, calc(4.5652173913vw + 1.972826087rem), 5.625rem);
  --section-space-m: clamp(3rem, calc(4.5652173913vw + 1.972826087rem), 5.625rem);
  --space-l: clamp(1.9995rem, calc(1.4139130435vw + 1.6813695652rem), 2.8125rem);
  --space-m: clamp(1.5rem, calc(0.652173913vw + 1.3532608696rem), 1.875rem);
  --space-xxl: clamp(3.5528895555rem, calc(4.8264964252vw + 2.4669278598rem), 6.328125rem);
  --text-color: color-mix(in srgb, #000 80%, transparent);
  --text-line-height: calc(6px + 2ex);
  --text-m: clamp(1rem, calc(0.2173913043vw + 0.9510869565rem), 1.125rem);
  --text-text-wrap: pretty;
  --transition: 0.3s ease-in-out 0s;
}

*, ::before, ::after { box-sizing: border-box; }
body { min-block-size: 100svh; }
input, button, textarea, select { font: inherit; }
button:not(nav button, [class*="btn--"]) { line-height: var(--btn-line-height); letter-spacing: var(--btn-letter-spacing); text-transform: var(--btn-text-transform); text-decoration: var(--btn-text-decoration); text-align: var(--btn-text-align); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); font-family: var(--btn-font-family); }
html { font-size: var(--root-font-size) !important; }
:where(body) { font-size: var(--text-m); overflow-x: clip; color: var(--text-color); line-height: var(--text-line-height); text-wrap: var(--text-text-wrap); background: var(--body-bg-color); transition: background var(--transition); }
:where(p) { line-height: var(--text-line-height, calc(6px + 2ex)); }
body a:where(:not([class*="btn--"])) { color: var(--link-color, var(--primary)); font-weight: var(--link-weight, inherit); text-decoration: var(--link-decoration, inherit); text-underline-offset: var(--link-underline-offset, auto); transition: var(--link-transition, var(--transition)); }
h1, :where(.h1), h2, :where(.h2), h3, :where(.h3), h4, :where(.h4), h5, :where(.h5), h6, :where(.h6) { color: var(--heading-color); line-height: var(--heading-line-height); font-weight: var(--heading-font-weight); text-wrap: var(--heading-text-wrap); }
h1 { font-size: var(--h1); max-width: var(--h1-max-width); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class*="-card"] blockquote, figure[class*="-card"], figure[class*="-card"] blockquote)))) { display: flex; flex-direction: column; inline-size: 100%; padding: var(--blockquote-padding); gap: var(--blockquote-gap); border-width: var(--blockquote-border-width); border-style: var(--blockquote-border-style); border-color: var(--blockquote-border-color); border-radius: var(--blockquote-border-radius); background: var(--blockquote-background); box-shadow: var(--blockquote-box-shadow); }
:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class*="-card"] blockquote, figure[class*="-card"], figure[class*="-card"] blockquote)))) p { color: var(--blockquote-text-color); font-family: var(--blockquote-text-font-family); font-style: var(--blockquote-text-font-style); font-size: var(--blockquote-text-font-size); font-weight: var(--blockquote-text-font-weight); line-height: var(--blockquote-text-line-height); text-align: var(--blockquote-text-text-align); text-transform: var(--blockquote-text-text-transform); }
:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class*="-card"] blockquote, figure[class*="-card"], figure[class*="-card"] blockquote)))) cite, :where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class*="-card"] blockquote, figure[class*="-card"], figure[class*="-card"] blockquote)))) figcaption cite { font-family: var(--blockquote-cite-font-family); font-size: var(--blockquote-cite-font-size); font-weight: var(--blockquote-cite-font-weight); font-style: var(--blockquote-cite-font-style); line-height: var(--blockquote-cite-line-height); text-transform: var(--blockquote-cite-text-transform); color: var(--blockquote-cite-color); }
[id] { scroll-margin-top: var(--offset, 0); }
html { scroll-behavior: smooth; }
.skip-link { inset-block-start: 1rem; inset-inline-start: 1rem; transform: translateY(-250%); --btn-min-width: fit-content; z-index: 100; background: var(--btn-background); color: var(--btn-text-color); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); inline-size: var(--btn-width, auto); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-family: var(--btn-font-family); font-size: var(--btn-font-size, var(--text-m)); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-border-radius); border-color: var(--btn-border-color); transition: var(--btn-transition, var(--transition)); justify-content: var(--btn-justify-content, center); align-items: var(--btn-align-items, center); text-align: var(--btn-text-align, center); display: var(--btn-display, inline-flex); --btn-background: var(--primary); --btn-background-hover: var(--primary-hover); --btn-text-color: var(--primary-ultra-light); --btn-text-color-hover: var(--primary-ultra-light); --btn-border-color: var(--btn-background); --btn-border-color-hover: var(--btn-background-hover); --focus-color: var(--primary-light); position: absolute !important; }
:where(section:not(section section)) { display: flex; flex-direction: column; padding-block: var(--section-padding-block); padding-inline: var(--gutter); }
body blockquote { text-wrap: pretty; }
:where(section:not(section section)) { gap: var(--container-gap); }
:where(section:not(section section)) > :where(div, ul, ol) { gap: var(--content-gap); }
:where(img:not(header img), figure:not(figure:has(img))) { border-radius: var(--radius); }
body :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin-block: 0px; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}


/* ============================================================================
   THE B2B ANSWER — 01 FUNDAMENT   @sheet 01-fundament
   ----------------------------------------------------------------------------
   Tokens, Reset, Layout-Container, Typografie, Schaltflaechen und der
   Barrierefreiheits-Boden. Laedt als erstes Etch-Sheet auf jeder Seite.
   Hier steht nichts Seiten- oder Sektionsspezifisches.

   LADEREIHENFOLGE IST DER VERTRAG, NICHT DIE SCHICHTUNG.
   Automatic.css laedt als letzte Quelle und ist ungeschichtet. Ungeschichtetes
   CSS schlaegt jedes geschichtete, unabhaengig von der Spezifitaet. Ein Umbau
   auf @layer wuerde ACSS deshalb ueber alles legen und die Website flaechig
   zerstoeren. Reihenfolge, die gilt: 01 → 02 → 03 → automatic.css.
   Wer Regeln zwischen diesen Sheets verschiebt, aendert das Ergebnis.

   INHALT
      radien-skala      Vier Radiusstufen statt dreizehn Einzelwerten
      altbestand-oben   Referenzkarten und Interior-Hero, historisch vorn
      tokens            Farben, Schriften, Kurven, Kopfzeilenhoehe
      reset             Gescopter Reset auf .bklp und .site-footer
      layout-container  .wrap, .narrow, .text-center, .mt16
      typografie        h1 bis h3, .lead, .eyebrow
      spec-vermerk      .spec, das Zeichnungskopf-Motiv
      schaltflaechen    .btn, .btn-primary, .btn-ghost
      a11y-floor        Fokusrahmen und reduzierte Bewegung
   ----------------------------------------------------------------------------
   Konvention: "@section <kennung>" und "@owns <klassen>" sind maschinenlesbar,
   ein grep findet die zustaendige Stelle statt 150 KB Lesearbeit:
       grep -rn "@section karten" stylesheets/
   Gegenprobe, ob dieses Sheet live wirklich ankommt:
       curl -s <url> | grep -c '@sheet 01-fundament'
   ============================================================================ */

/* @section radien-skala
   @owns    :root --r-xs, --r-s, --r-m, --r-pill */
/* ── Radien-Skala ──────────────────────────────────────────────────────
   Vier Stufen statt dreizehn Einzelwerte. 50% (echte Kreise) und 0
   (bewusst kantig) bleiben woertlich, das sind Formen, keine Stufen.
   Einzige Ausnahme: .ki-proof traegt weiterhin "0 8px 8px 0", ein
   absichtlich einseitiger Radius, der in keine Skala gehoert. */
:root {
  --r-xs:   2px;    /* Tags, Marker, Fokusrahmen */
  --r-s:    4px;    /* Buttons, kleine Bedienelemente */
  --r-m:    12px;   /* Karten, Panels, Kaesten */
  --r-pill: 999px;  /* Pillen, Chips, Filter */
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* @section altbestand-oben
   @owns    .ref-grid, .ref-card, .ref-card-action, .hero-interior
   Warum: Diese Bloecke standen historisch vor den Tokens und bleiben dort.
          Vorziehen waere folgenlos, Verschieben nach 02 nicht. */
/* --- REFERENCE CARDS --- */
.bklp .ref-grid {
  display: grid;
  /* FIX: min(340px, 100%) lets cards shrink below 340px on narrow screens,
     preventing the grid from forcing the whole page wider than the viewport. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 32px;
}

.bklp .ref-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  padding: 40px 32px;
  transition: border-color 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
}

/* Matches your standard, elegant card hover effect */
.bklp .ref-card:hover { border-color: rgba(255,255,255,0.28); box-shadow: 0 14px 36px rgba(0,0,0,0.28); }

.bklp .ref-card h3 {
  font-size: 1.35rem;
  margin-bottom: 16px;
}

.bklp .ref-card p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--grey);
  margin-bottom: 40px;
}

.bklp .ref-card-action {
  margin-top: auto;
}

/* Subtle Blue Injection: Button turns signal blue only on hover */
.bklp .ref-card .btn-ghost { background: #fff; color: var(--ink) !important; border-color: #fff; }

.bklp .ref-card .btn-ghost:hover { background: var(--signal); color: #fff !important; border-color: var(--signal); transform: translateY(-1px); }

/* Interior Page Hero Spacing */
.bklp .hero-interior {
  padding: 120px 0 64px 0;
}
.bklp .hero-interior .lead {
  max-width: 68ch;
}
/* ==========================================================================
   THE B2B ANSWER — 01 CORE
   Tokens, Reset, Typografie, Buttons, Utilities, Accessibility-Floor.
   Lädt auf jeder Seite. Enthält keine Sektions-Module (siehe 02) und
   kein Header/Footer-Chrome (siehe 03).
   ========================================================================== */

/* @section tokens
   @owns    :root, .bklp, .site-footer */
/* --- TOKENS ---------------------------------------------------------------
   Auf :root, damit Header/Footer (außerhalb von .bklp) dieselben Variablen
   nutzen. .bklp-Spiegelung bleibt für Rückwärtskompatibilität bestehen. */
:root,
.bklp,
.site-footer {
  --ink: #0b1c30;
  --paper: #f8f9ff;
  --signal: #0052ff;
  --signal-soft: #6b8cff;
  --grey: #434656;
  --hair: #c3c5d9;
  --panel: #e5eeff;

  --display: 'Hanken Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  /* Dritte Stimme: technische Dokumentation. Frueher IBM Plex Mono ueber
     Google Fonts. Der Aufruf blockierte das Zeichnen jeder Seite, obwohl
     die Schrift an genau EINER Stelle vorkam (.cc-code, Codebloecke).
     Jetzt Inter, das ohnehin geladen ist (07.08.2026). Codebloecke
     verlieren dadurch die feste Zeichenbreite; wer sie zurueck will,
     nimmt 'SFMono-Regular', Consolas, monospace, das kostet nichts. */
  --mono: 'Inter', sans-serif;

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --header-height: 80px;
}
/* KEIN externer Font-Load mehr. Der Link auf fonts.googleapis.com steht
   noch in Bricks > Custom Code und gehoert dort entfernt: Er kostet auf
   Mobilfunk eine eigene DNS-Aufloesung, einen TLS-Handschlag, ein
   Stylesheet und eine Schriftdatei, alles vor dem ersten Bild. */

/* @section reset
   @owns    .bklp *, .site-footer * */
/* --- RESET (scoped) ------------------------------------------------------ */
.bklp *, .site-footer * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bklp {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* @section layout-container
   @owns    .wrap, .narrow, .text-center, .mt16 */
/* --- LAYOUT-CONTAINER ----------------------------------------------------- */
.bklp .wrap, .site-footer .wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.bklp .narrow { max-width: 680px !important; margin: 0 auto !important; }
.bklp .text-center { text-align: center; }
.bklp .mt16 { margin-top: 16px; }

/* @section typografie
   @owns    h1, h2, h3, .lead, .eyebrow */
/* --- TYPOGRAFIE ------------------------------------------------------------
   Drei Stimmen: Display (Haltung), Body (Lesen), Mono (Daten & Vermerke). */
.bklp h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; letter-spacing: -0.028em; }
.bklp h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.18; letter-spacing: -0.015em; }
.bklp h3 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.bklp .lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink); opacity: 0.85; line-height: 1.65; }

/* Eyebrow: jetzt Mono + grau. Signal-Blau ist reserviert für
   Quelle/Geprüft-Momente und CTAs, nicht mehr Dekor-Standard. */
.bklp .eyebrow { font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; text-transform: none; color: var(--grey); display: block; margin-bottom: 20px; }

/* @section spec-vermerk
   @owns    .spec */
/* --- SIGNATUR: SPEC-VERMERK (Zeichnungskopf-Motiv) -------------------------
   Kleiner technischer Prüfvermerk. Sparsam einsetzen: Diagramm-Kopf,
   Proof-Kachel, Offer-Card. Beispiel:
   <span class="spec">Geprüfte Quelle · Stand 07/2026</span> */
.bklp .spec {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bklp .spec::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--signal);
  flex-shrink: 0;
}
/* Dunkle Sektionen */
.bklp .fundament .spec, .bklp .final .spec { color: rgba(248, 249, 255, 0.55); }

/* @section schaltflaechen
   @owns    .btn, .btn-primary, .btn-ghost
   Warum: .btn allein ist nur Typografie und Polsterung, die Signalfarbe kommt
          aus .btn-primary. Der Radius wird spaeter in 02 mit !important gesetzt. */
/* --- BUTTONS ----------------------------------------------------------------
   Lift nur hier. Karten reagieren über Border/Schatten (siehe 02). */
.bklp .btn {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--r-s);
  transition: background-color 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
  display: inline-block;
  box-shadow: 0 1px 2px rgba(11, 28, 48, 0.04);
}
.bklp a.btn.btn-primary { margin-top: 12px; }
.bklp .btn-primary { background: var(--signal); color: #fff !important; }
.bklp .btn-primary:hover {
  background: #003ec7;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 82, 255, 0.22);
}
.bklp .btn-ghost { color: var(--ink) !important; border: 1px solid var(--hair); background: transparent; }
.bklp .btn-ghost:hover { border-color: var(--ink); background: rgba(11, 28, 48, 0.02); transform: translateY(-1px); }

/* @section a11y-floor
   @owns    :focus-visible, prefers-reduced-motion */
/* --- ACCESSIBILITY-FLOOR ---------------------------------------------------- */
.bklp a:focus-visible,
.bklp .btn:focus-visible,
.site-header a:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  .bklp *, .site-header, .site-footer *, .brxe-header {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* @section abstandsrhythmus-und-baender
   @owns    (nicht hier)
   @seealso 02-komponenten/sektionsrhythmus-global, 02-komponenten/flaechen-utilities
   Warum: Der Plan sah "Baender" und "Abstandsrhythmus" in diesem Sheet vor.
          Beide Bloecke stammen vom 01.08.2026 und stehen in "main" bewusst
          GANZ HINTEN, damit sie gegen rund 1200 Zeilen aelterer Sektions-
          regeln gewinnen. Nach vorn geholt wuerden sie diese Kaskade
          umdrehen. Sie bleiben deshalb in 02, mit dieser Spur hierher. */

/* ═══ custom-media-definitions.custom-media.css ═══ */
/* Add your custom media definitions here using @custom-media rules. Example: @custom-media --small-screen (width < 600px);*/
/* ═══ 02-komponenten.882b4e0.css ═══ */
/* ============================================================================
   THE B2B ANSWER — 02 KOMPONENTEN   @sheet 02-komponenten
   ----------------------------------------------------------------------------
   Wiederverwendbare Sektions-Module: Hero, Karten, Footer, FAQ, Diagramme,
   Formulare, Autorenzeile, Kopfzeile. Laedt nach 01, vor 03.

   Reihenfolge: 01 → 02 → 03 → automatic.css. Kein @layer, Begruendung in 01.

   INHALT
      main-rest         Sektions-Module aus "main", Reihenfolge unveraendert
      kopfzeile         Kopfzeile, Navigation, Burger, Newsleiste, Footer-Chrome
      vorher-nachher    Vorher-Nachher-Schieber
      case-study        Referenz-Unterseiten unter /referenzen/
      blog-filter       Blog-Uebersicht, Filter, Kartenraster
      beitragsseite     Einzelner Blogbeitrag, Autorenzeile, Inhaltsverzeichnis
      formulare         WS-Form-Felder und Zustaende
   ----------------------------------------------------------------------------
   Konvention: "@section <kennung>" und "@owns <klassen>" sind maschinenlesbar,
   ein grep findet die zustaendige Stelle statt 150 KB Lesearbeit:
       grep -rn "@section karten" stylesheets/
   Gegenprobe, ob dieses Sheet live wirklich ankommt:
       curl -s <url> | grep -c '@sheet 02-komponenten'
   ============================================================================ */


/* @section main-rest
   @owns    .page-id-398, .fundament, .brandkit, .final, .pain-item, .parent-pageid-351
   Warum: Sektions-Module aus "main": Hero, Karten, Flow, Proof, Footer und
          alle datierten Nachtraege bis 01.08.2026. Reihenfolge unveraendert. */
/* ==========================================================================
   THE B2B ANSWER — 02 COMPONENTS
   Sektions-Module: Hero, Logos, Pain, Anlässe, Nutzen, Flow, Fundament,
   Proof, Offer, Ladder, Testimonials, Who, Stationen-Timeline.
   Regel: Seiten-spezifisches CSS bleibt im Seiten-<style>-Block, bis es
   ein zweites Mal gebraucht wird. Dann wird es hierher befördert.
   ========================================================================== */

/* --- SEKTIONS-RHYTHMUS ------------------------------------------------------ */
.bklp section { padding: var(--section-space-m) 0; }
/* Mitwachsend wie der Sektionsrhythmus: 1440px → 72, ab 1600px → 80.
   Unter 1120px bleibt es bei 56. Seitenspezifische Faelle uebersteuern das
   weiterhin, etwa die Startseiten-Bloecke in 03 Seiten mit 26px. */
.bklp .sec-head { margin-bottom: clamp(56px, 5vw, 80px); }
.bklp .sec-head h2 { max-width: 26ch; }
.bklp .sec-head p { margin-top: 18px; max-width: 56ch; color: var(--grey); font-size: 1.05rem; }

/* --- HERO ------------------------------------------------------------------- */
/* Millimeterpapier-Backdrop: alle Heroes (Home, About, GEO, Blueprint) */
.bklp .hero {
  background-image:
    radial-gradient(ellipse 75% 70% at 50% 40%, transparent 0%, var(--paper) 78%),
    linear-gradient(color-mix(in srgb, var(--hair) 45%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hair) 45%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px, 20px 20px;
}
.bklp .hero.centered { padding: var(--space-xxl) 0 var(--space-l);
  display: flex;
  flex-direction: column;
  align-items: center; }
.bklp .hero.centered h1 { max-width: 22ch; margin: 0 auto 24px; font-size: clamp(2.5rem, 5.6vw, 4.2rem); }
.bklp .hero.centered .lead { max-width: 62ch; margin: 0 auto 40px; }
.bklp .justify-center { justify-content: center; }
.bklp .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.bklp .hero-meta { padding-top: 36px; margin-top: 56px; border-top: 1px solid var(--hair); display: flex; justify-content: center; gap: 32px 56px; flex-wrap: wrap; font-size: 0.95rem; color: var(--grey); }
.bklp .hero-meta strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 4px; }

@keyframes premiumReveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.bklp .hero .eyebrow { animation: premiumReveal 0.6s var(--ease-premium) forwards; }
.bklp .hero h1 { animation: premiumReveal 0.7s var(--ease-premium) 0.08s both; }
.bklp .hero .lead { animation: premiumReveal 0.7s var(--ease-premium) 0.16s both; }
.bklp .hero .hero-actions { animation: premiumReveal 0.7s var(--ease-premium) 0.24s both; }
.bklp .hero .hero-meta { animation: premiumReveal 0.8s var(--ease-premium) 0.32s both; }

/* --- LOGO-LEISTE (Kundenreferenzen, keine Tool-Logos) ------------------------ */
.bklp .logos { background: var(--ink); padding: 44px 0; border-bottom: 0; }
/* Auf grossen Schirmen sass das Band zu dicht unter dem Hero, vor allem
   unter dem Fragenkasten der rechten Spalte (06.08.2026). */
@media (min-width: 981px) {
  body.home .bklp .logos { margin-top: clamp(28px, 3.2vw, 64px); }
}
.bklp .logo-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly; gap: 40px; }
.bklp .logo-grid img { max-height: 40px; width: auto; opacity: 0.8; transition: opacity 0.35s var(--ease-premium), filter 0.35s var(--ease-premium); filter: brightness(0) invert(1); }
/* --- PAIN / ANLÄSSE (Hairline-Raster) ---------------------------------------- */
.bklp .pain { background: var(--paper); }
.bklp .pain.panel { background: var(--panel); }
.bklp .pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.bklp .pain-item { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-m); padding: 36px 32px; transition: border-color 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium); }
.bklp .pain-item h3 { font-size: 1.05rem; margin-bottom: 10px; }
.bklp .pain-item p { font-size: 0.95rem; color: var(--grey); }
.bklp .pain-punch { margin-top: 48px; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.2; letter-spacing: -0.015em; max-width: 24ch; }
.bklp .pain-punch .accent { color: var(--signal); }

/* --- NUTZEN-KARTEN ------------------------------------------------------------ */
.bklp .reassure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 12px; }
.bklp .re-card { border: 1px solid var(--hair); border-radius: var(--r-m); padding: 32px 28px; background: var(--paper); transition: border-color 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium); }
.bklp .re-num { font-family: var(--display); font-weight: 500; font-size: 0.78rem; color: var(--signal); letter-spacing: 0.1em; text-transform: uppercase; }
.bklp .re-card h3 { margin: 16px 0 12px; }
.bklp .re-card p { font-size: 0.95rem; color: var(--grey); }

/* Karten-Hover: Präzision statt Lift. Kein translateY auf Flächen. */
.bklp .re-card:hover, .bklp .testi-card:hover, .bklp .pain-item:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, var(--hair));
  box-shadow: 0 8px 28px rgba(11, 28, 48, 0.05);
}
.bklp .pain-item:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, var(--hair)); }

/* --- FLOW (Ablauf & FAQ, dunkel) ----------------------------------------------- */
.bklp .flow { background: var(--paper); }
.bklp .steps { display: grid; gap: 2px; }
.bklp .step { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid var(--hair); align-items: start; }
.bklp .step:last-child { border-bottom: 1px solid var(--hair); }
.bklp .step-n { font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--signal-soft); transition: color 0.35s var(--ease-premium); }
.bklp .step h3 { color: var(--ink) !important; margin-bottom: 8px; }
.bklp .step p { color: var(--grey); font-size: 0.96rem; max-width: 60ch; }
.bklp .step:hover .step-n { color: var(--signal); }

/* --- FUNDAMENT-DIAGRAMM (Brand-Kit-Architektur) --------------------------------
   Optionaler Zeichnungskopf: <span class="spec">Brand-Kit-Architektur · v1</span>
   direkt über dem Diagramm einsetzen. */
.bklp .fundament { background: var(--ink); color: var(--paper); padding: 80px 0; }
.bklp .fundament .eyebrow { color: rgba(248, 249, 255, 0.5); }
.bklp .fundament h2 { color: var(--paper); max-width: 20ch; margin: 18px 0 14px; }
.bklp .fundament .sub { color: rgba(248, 249, 255, 0.7); max-width: 54ch; margin-bottom: 52px; }
.bklp .diagram { display: grid; gap: 0; }
.bklp .outputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; }
.bklp .out { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-s); padding: 16px 14px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 0.92rem; background: rgba(255, 255, 255, 0.03); }
.bklp .out small { display: block; font-family: var(--display); font-weight: 400; font-size: 0.68rem; color: rgba(248, 249, 255, 0.55); margin-top: 5px; letter-spacing: 0.02em; }
.bklp .flowlabel { text-align: center; color: var(--signal-soft); font-family: var(--display); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 20px 0 16px; }
.bklp .base { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.bklp .layer { border-radius: var(--r-s); padding: 22px 20px; background: rgba(0, 82, 255, 0.14); border: 1px solid rgba(143, 168, 255, 0.4); }
.bklp .layer.primary { background: var(--signal); border-color: var(--signal); }
.bklp .layer h3 { color: var(--paper); margin-bottom: 6px; font-size: 1.05rem; }
.bklp .layer p { font-size: 0.85rem; color: rgba(248, 249, 255, 0.72); line-height: 1.45; }

/* --- PROOF (Ergebnis-Kachel) ------------------------------------------------------ */
.bklp .proof { background: var(--signal); color: #fff; }
.bklp .proof-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bklp .proof-big { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.02em; }
.bklp .proof-big small { display: block; font-family: var(--display); font-weight: 400; font-size: 0.85rem; opacity: 0.85; margin-top: 14px; letter-spacing: 0.02em; }
.bklp .proof p { font-size: 1.05rem; opacity: 0.92; line-height: 1.5; }
/* Quellenzeile im Beleg-Band: 0.75 ergab auf Signalblau nur 3,85:1 und
   damit zu wenig fuer Kleintext. 0.9 liegt bei 5,3:1 (07.08.2026). */
.bklp .proof .attr { margin-top: 16px; font-family: var(--display); font-size: 0.78rem; opacity: 0.9; }

/* --- OFFER-CARD --------------------------------------------------------------------- */
.bklp .offer-card { border: 1px solid var(--ink); border-radius: var(--r-m); overflow: hidden; max-width: 620px; margin-top: 40px; }
.bklp .offer-top { background: var(--ink); color: var(--paper); padding: 34px 34px 28px; }
.bklp .offer-top .eyebrow { color: rgba(248, 249, 255, 0.5); margin-bottom: 12px; display: block; }
.bklp .offer-top h3 { color: var(--paper); font-size: 1.5rem; margin-bottom: 6px; }
.bklp .offer-price { font-family: var(--display); font-weight: 700; font-size: 2.3rem; letter-spacing: -0.02em; margin-top: 18px; line-height: 1.2; }
.bklp .offer-price small { font-family: var(--body); font-weight: 400; font-size: 0.95rem; opacity: 0.7; letter-spacing: 0; }
.bklp .offer-body { padding: 30px 34px 34px; background: var(--paper); }
.bklp .offer-body ul { list-style: none; display: grid; gap: 14px; }
.bklp .offer-body li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 0.97rem; align-items: start; }
.bklp .offer-body li .tick { color: var(--signal); font-weight: 700; font-family: var(--display); }
.bklp .offer-note { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 0.9rem; color: var(--grey); }

/* --- LADDER (Leiter) ------------------------------------------------------------------ */
.bklp .ladder { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 0.9rem; color: var(--grey); }
.bklp .ladder .node { font-family: var(--display); font-weight: 500; font-size: 0.82rem; color: var(--ink); padding: 8px 16px; border: 1px solid var(--hair); border-radius: var(--r-s); }
.bklp .ladder .node.now { border-color: var(--signal); color: var(--signal); }
.bklp .ladder .arr { color: var(--hair); }

/* --- TESTIMONIALS ------------------------------------------------------------------------ */
.bklp .testi-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--paper); transition: border-color 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium); }
.bklp .testi-body { font-size: 1.05rem; line-height: 1.6; color: var(--ink); margin-bottom: 24px; }
.bklp .testi-footer { display: flex; align-items: center; gap: 16px; margin-top: auto; border-top: 1px solid var(--hair); padding-top: 16px; }
.bklp .testi-footer h3 { color: var(--ink) !important; margin-bottom: 2px; font-size: 1rem; }
.bklp .testi-footer p { color: var(--grey) !important; font-size: 0.85rem; margin-bottom: 0; }
.bklp .testi-footer img.client-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bklp .testi-footer img.client-logo { max-height: 20px; width: auto; margin-top: 6px; display: block; }

/* --- WHO (Inhaber) -------------------------------------------------------------------------- */
.bklp .who { background: var(--panel); }
.bklp .who-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: center; }
.bklp .who-content { display: flex; flex-direction: column; }
.bklp .who-visual { display: flex; justify-content: center; }
.bklp .who-img {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--r-s);
  box-shadow: 0 20px 40px rgba(11, 28, 48, 0.06);
  display: block;
}

/* --- WHO-IN (Editorial-Zweispalter: Fokus/Hintergrund auf About) -------------- */
.bklp .who-in { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }

/* --- WHO-FACTS (ersetzt Inline-Styles im HTML) ------------------------------- */
.bklp .who-facts { margin-top: 32px; }
.bklp .who-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.95rem;
}
.bklp .who-facts span { color: var(--grey); flex-shrink: 0; }
.bklp .who-facts strong { text-align: right; }
.bklp .tl-marker { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--signal); }
.bklp .tl-date { font-family: var(--display); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); display: block; margin-bottom: 6px; }

/* --- FINAL CTA -------------------------------------------------------------------------------- */
.bklp .final { background: var(--ink); color: var(--paper); text-align: center; }
.bklp .final .eyebrow { color: rgba(248, 249, 255, 0.5); }
.bklp .final h2 { color: var(--paper); margin-left: auto; margin-right: auto; }

/* --- COMPONENT RESPONSIVE (HARDENED FOR ACSS) ------------------------------------------------ */
@media (max-width: 820px) {
  .bklp { overflow-wrap: break-word; word-break: break-word; } /* Prevent text overflow */
  .bklp img { max-width: 100% !important; height: auto !important; object-fit: cover; } /* Image safety */
  .bklp .base { grid-template-columns: 1fr !important; }
  .bklp .outputs { grid-template-columns: repeat(2, 1fr) !important; }
  .bklp .pain-grid { grid-template-columns: 1fr !important; }
  .bklp .reassure-grid { grid-template-columns: 1fr !important; }
  .bklp .ref-grid { grid-template-columns: 1fr !important; } /* Blog/reference cards stack on mobile */
  .bklp .who-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .bklp .who-img { margin: 0 auto; max-width: 100%; }
  .bklp .step { grid-template-columns: 52px 1fr !important; gap: 16px !important; }
  .bklp .proof-in { grid-template-columns: 1fr !important; gap: 32px !important; }
  .bklp .hero-meta { flex-direction: column; text-align: center; gap: 24px !important; margin-top: 40px; padding-top: 24px; }
  .bklp .who-in { grid-template-columns: 1fr !important; gap: 28px !important; }
  .bklp .who-facts > div { flex-direction: column; gap: 4px !important; }
  .bklp .who-facts strong { text-align: left; }
}

/* --- FOOTER --------------------------------------------------------------- */
.site-footer {
  background: var(--ink) !important;
  color: var(--paper) !important;
  padding: 80px 0 32px 0;
  font-family: var(--body);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.site-footer .foot-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 48px; padding-bottom: 64px; }
.site-footer .foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.site-footer .foot-brand { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--paper); }
.site-footer .foot-brand span { color: var(--signal); }
.site-footer .foot-tagline { font-size: 0.95rem; color: rgba(248, 249, 255, 0.65); line-height: 1.6; }
.site-footer .foot-title { font-family: var(--display); font-weight: 500; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(248, 249, 255, 0.62) !important; margin-bottom: 4px; /* Kontrast: 0.45 ergab 4.26:1, unter 4.5 */ }
.site-footer .foot-links { list-style: none !important; display: flex; flex-direction: column; gap: 12px; }
.site-footer .foot-links a { font-size: 0.95rem; color: rgba(248, 249, 255, 0.8) !important; text-decoration: none !important; transition: color 0.15s ease; }
.site-footer .foot-links a:hover { color: #ffffff !important; }
.site-footer .foot-base { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 32px; font-size: 0.85rem; color: rgba(248, 249, 255, 0.56); } /* Kontrast: 0.35 ergab 3.09:1 */
.site-footer .foot-base-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.site-footer .foot-legal { display: flex; gap: 24px; }
.site-footer .foot-legal a { color: rgba(248, 249, 255, 0.5) !important; text-decoration: none; }

/* --- CHROME RESPONSIVE ------------------------------------------------------ */
@media (max-width: 820px) {
  .header-burger-button { display: flex !important; }
  .header-nav {
    position: fixed !important; top: 0; right: -100%; width: 290px; height: 100vh;
    background: var(--paper) !important; padding: 96px 32px 40px; display: flex !important;
    flex-direction: column !important; gap: 40px; transition: right 0.3s var(--ease-premium); z-index: 1005;
  }
  .header-menu-list { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .header-burger-checkbox:checked ~ .header-nav { right: 0 !important; }

  .site-footer .foot-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .site-footer .foot-base-in { flex-direction: column-reverse; text-align: center; }
}

/* ==========================================================================
   THE B2B ANSWER — 04 CHARACTER LAYER
   Drei Moves, übersetzt aus virtual-entity.com und designbase.studio:
   Scale-Kontrast (Statement), Spec-Chips (Tags), Kanal-Ticker.
   Gehört beim Split ans Ende von 02-components.css.
   ========================================================================== */

/* --- 1. STATEMENT (Scale-Kontrast, EINMAL pro Seite einsetzen) ------------- */
.bklp .statement { padding: 120px 0; }
.bklp .h-display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
.bklp .h-display .accent { color: var(--signal); }
.bklp .statement .spec { margin-bottom: 24px; }

/* --- 2. SPEC-CHIPS (Datenblatt-Tags) ---------------------------------------- */
.bklp .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bklp .tag {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px solid var(--hair);
  border-radius: var(--r-xs);
  padding: 5px 10px;
  background: var(--paper);
  white-space: nowrap;
}
.bklp .tag.on { border-color: var(--signal); color: var(--signal); }
/* Dunkle Sektionen */
.bklp .fundament .tag, .bklp .final .tag {
  color: rgba(248, 249, 255, 0.65);
  border-color: rgba(248, 249, 255, 0.2);
  background: transparent;
}
/* Hero-Platzierung: unter der Lead, vor den Actions */
.bklp .hero .tags { margin-bottom: 36px; }
.bklp .hero.centered .tags { justify-content: center; }
@keyframes tickerMove {
  to { transform: translateX(-50%); }
}

/* logo-balance start */
.bklp .logo-grid img[alt="Gridwise"] { max-height: 30px; }
.bklp .logo-grid img[alt="WiFAm"] { max-height: 56px; }
.bklp .logo-grid img[alt="AiNGEL"]   { max-height: 32px; }
.bklp .logo-grid img[alt="AFA"] { max-height: 56px; }
.bklp .logo-grid img[alt="WINtec"]   { max-height: 38px; }
.bklp .logo-grid img[alt="Alexander Zureck"] { max-height: 32px; }
/* logo-balance end */

/* spotlight start */
.bklp .hero { position: relative; }
.bklp .hero > * { position: relative; z-index:2; }
.bklp .hero::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(38px at calc(50% - 485px) calc(26% + 11px), var(--paper) 55%, transparent 80%),
    radial-gradient(38px at calc(50% - 565px) calc(55% - 2px), var(--paper) 55%, transparent 80%),
    radial-gradient(38px at calc(50% - 468px) calc(80% - 13px), var(--paper) 55%, transparent 80%),
    radial-gradient(38px at calc(50% + 442px) calc(24% + 12px), var(--paper) 55%, transparent 80%),
    radial-gradient(38px at calc(50% + 520px) calc(53% - 2px), var(--paper) 55%, transparent 80%),
    radial-gradient(38px at calc(50% + 434px) calc(79% - 13px), var(--paper) 55%, transparent 80%),
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, auto, auto, 20px 20px, 20px 20px;
  -webkit-mask: radial-gradient(240px circle at var(--mx,50%) var(--my,42%), #000 0%, rgba(0,0,0,0.15) 55%, transparent 72%);
          mask: radial-gradient(240px circle at var(--mx,50%) var(--my,42%), #000 0%, rgba(0,0,0,0.15) 55%, transparent 72%);
}

.bklp .routing .pain-grid { gap: 24px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.bklp .routing .pain-item { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: var(--r-m); padding: 40px 36px 36px; position: relative; overflow: hidden; background: var(--paper); }
.bklp .routing .pain-item::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-premium); }
.bklp .routing .pain-item:hover::after { transform: scaleX(1); }
.bklp .routing .pain-item::before { content:""; display:block; width:36px; height:36px; margin-bottom:22px; background-repeat:no-repeat; background-position:left center; background-size:contain; }
.bklp .routing .pain-item:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230b1c30%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%206l-5%206%205%206%22%2F%3E%3Cpath%20d%3D%22M15.5%206l5%206-5%206%22%2F%3E%3C%2Fsvg%3E"); }
.bklp .routing .pain-item:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230b1c30%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5l7.5%203.2v5.3c0%204.7-3.2%207.9-7.5%209.5-4.3-1.6-7.5-4.8-7.5-9.5V5.7z%22%2F%3E%3Cpath%20d%3D%22M8.6%2012.2l2.3%202.3%204.5-4.5%22%2F%3E%3C%2Fsvg%3E"); }
.bklp .routing .pain-item .btn-primary, .bklp .routing .pain-item a.btn { margin-top: auto; }
.bklp .routing .pain-item .btn-primary::after { content:"→"; margin-left: 10px; display:inline-block; transition: transform 0.3s var(--ease-premium); }
.bklp .routing .pain-item .btn-primary:hover::after { transform: translateX(4px); }
@media (max-width: 720px){ }
/* elevate end */

/* elevate-who start */
.bklp .who-visual { position: relative; }
.bklp .who-visual::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  width: min(400px, 100%); aspect-ratio: 1/1;
  border: 1.5px solid var(--signal); border-radius: var(--r-m);
  top: 50%; left: 50%;
  transform: translate(calc(-50% + 20px), calc(-50% + 20px));
}
.bklp .who-img { position: relative; z-index: 1; border-radius: var(--r-m); box-shadow: 0 24px 48px rgba(11, 28, 48, 0.12); }
@media (max-width: 900px){ .bklp .who-visual::before { display:none; } }
/* elevate-who end */

/* cta start */
.bklp .final .mt16 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.bklp .final .btn-primary { margin-top: 8px; padding: 16px 36px; font-size: 1.05rem; }
.bklp .final .btn-primary::after { content:"→"; margin-left: 10px; display:inline-block; transition: transform 0.3s var(--ease-premium); }
.bklp .final .btn-primary:hover::after { transform: translateX(4px); }
/* cta end */

/* easter start */
@media (min-width: 1200px) and (hover: hover) {
.bklp .hero::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-repeat:no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.5%22%20y2%3D%2216.5%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3Cpath%20d%3D%22M5.6%205.6l12.8%2012.8%22%2F%3E%3Cpath%20d%3D%22M18.4%205.6L5.6%2018.4%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v11H9l-5%204z%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h7l4%204v14H7z%22%2F%3E%3Cpath%20d%3D%22M14%203v4h4%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2212%22%20x2%3D%2215%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2216%22%20x2%3D%2215%22%20y2%3D%2216%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%228%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%208V4%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%223.2%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2213%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2213%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2021h4%22%2F%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200-4%2010.5c.7.7%201%201.2%201%202.5h6c0-1.3.3-1.8%201-2.5A6%206%200%200%200%2012%203z%22%2F%3E%3C%2Fsvg%3E");
  background-position: calc(50% - 485px) 26%, calc(50% - 565px) 55%, calc(50% - 468px) 80%, calc(50% + 442px) 24%, calc(50% + 520px) 53%, calc(50% + 434px) 79%;
  background-size: 46px, 48px, 44px, 46px, 50px, 46px;
  -webkit-mask: radial-gradient(420px circle at var(--mx,50%) var(--my,42%), #000 0%, rgba(0,0,0,0.2) 55%, transparent 70%);
          mask: radial-gradient(420px circle at var(--mx,50%) var(--my,42%), #000 0%, rgba(0,0,0,0.2) 55%, transparent 70%);
}
}
/* easter end */

/* blog start */
.bklp .ref-card img { display: none; }
.bklp .ref-grid { grid-auto-rows: 1fr; gap: 40px; }
.bklp .ref-card {
  height: 100%; border-radius: var(--r-m); position: relative; overflow: hidden;
  background: var(--ink);
  border-color: rgba(255,255,255,0.1);
  padding: 44px 36px;
}
.bklp .ref-card h3 { color: var(--paper); }
.bklp .ref-card p { color: rgba(248,249,255,0.66); display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; margin-bottom: 28px; }
.bklp .ref-card .btn-ghost { background: #fff; color: var(--ink) !important; border-color: #fff; }
.bklp .ref-card .btn-ghost:hover { background: var(--signal); color: #fff !important; border-color: var(--signal); transform: translateY(-1px); }
.bklp .ref-card .btn-ghost::after { content:"→"; margin-left: 8px; display:inline-block; transition: transform 0.3s var(--ease-premium); }
.bklp .ref-card .btn-ghost:hover::after { transform: translateX(4px); }
.bklp .ref-card:hover { border-color: rgba(255,255,255,0.22); box-shadow: 0 10px 26px rgba(0,0,0,0.16); }
/* blog end */

/* interior-grid start */
body:not(.home):not(.page-id-838) .hero {
  background-image:
    linear-gradient(to bottom, transparent 0px, transparent 300px, var(--paper) 600px),
    linear-gradient(color-mix(in srgb, var(--hair) 25%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hair) 25%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px, 20px 20px;
  background-repeat: no-repeat, repeat, repeat;
}
/* interior-grid end */

/* blog-hero-grid start */
body.page-id-456 section.bklp {
  background-image:
    linear-gradient(to bottom, transparent 0px, transparent 300px, var(--paper) 600px),
    linear-gradient(color-mix(in srgb, var(--hair) 25%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hair) 25%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px, 20px 20px;
  background-repeat: no-repeat, repeat, repeat;
}
/* blog-hero-grid end */

/* solution-pass start */
/* Frueher stand hier eine globale Ausblendung des Beleg-Blocks plus eine
   Ausnahme fuer Seiten-ID 693, weil zwei der drei Zahlen unbestaetigt
   waren. Seit dem Umbau auf den Baustein TB2B Kennzahl (31.08.2026) steht
   diese Entscheidung als Feld am Element: eine unbestaetigte Zahl wird gar
   nicht erst ausgeliefert statt nur per CSS versteckt. */
/* Card consistency: match elevated card language */
.bklp .re-card { border-radius: var(--r-m); }
.bklp .re-card:hover { box-shadow: 0 10px 30px rgba(11,28,48,0.07); }
/* solution-pass end */

/* solution-pass2 start */
/* 2. statement wider */
.bklp .pain-punch { max-width: 920px; }
/* 4. bigger index numbers */
.bklp .re-num { font-size: 1.5rem; letter-spacing: 0.02em; }
/* 5. final headline wider on non-home pages */
body:not(.home) .bklp .final .mt16 { max-width: 42ch; }
/* solution-pass2 end */

/* solution-pass3 start */
/* Die alten !important-Regeln fuer die Fundament-Karte sind entfallen.
   Das Diagramm wird weiter unten neu aufgebaut. */
/* solution-pass3 end */

/* brandkit-fx start */
/* Rising data pulses: Brand Kit feeds every output */
.bklp .fundament .flowlabel {
  position: relative;
  padding: 30px 0;
  text-align: center;
}
.bklp .fundament .flowlabel::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to top, transparent, var(--signal) 50%, transparent),
    linear-gradient(to top, transparent, var(--signal) 50%, transparent),
    linear-gradient(to top, transparent, var(--signal) 50%, transparent),
    linear-gradient(to top, transparent, var(--signal) 50%, transparent);
  background-size: 2px 22px, 2px 22px, 2px 22px, 2px 22px;
  background-repeat: repeat-y;
  background-position: 12.5% 0, 37.5% 0, 62.5% 0, 87.5% 0;
  opacity: .5;
  animation: bk-rise 1.6s linear infinite;
  -webkit-mask: linear-gradient(90deg, #000 0 34%, transparent 36% 64%, #000 66% 100%);
          mask: linear-gradient(90deg, #000 0 34%, transparent 36% 64%, #000 66% 100%);
}
@keyframes bk-rise {
  to { background-position: 12.5% -22px, 37.5% -22px, 62.5% -22px, 87.5% -22px; }
}
/* Breathing glow on the Fundament layer */
.bklp .fundament .layer.primary {
  animation: bk-breathe 3.2s var(--ease-premium) infinite alternate;
}
@keyframes bk-breathe {
  from { box-shadow: 0 0 0 0 rgba(0, 82, 255, 0.0); }
  to   { box-shadow: 0 0 28px 2px rgba(0, 82, 255, 0.28); }
}
/* Output chips: light up on hover */
.bklp .fundament .outputs > * {
  transition: border-color 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
}
.bklp .fundament .outputs > *:hover {
  border-color: var(--signal);
  box-shadow: 0 0 18px rgba(0, 82, 255, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .bklp .fundament .flowlabel::before { animation: none; }
  .bklp .fundament .layer.primary { animation: none; box-shadow: 0 0 20px 1px rgba(0,82,255,0.2); }
}
/* brandkit-fx end */

/* flashlight-scope start */
/* Cursor flashlight + easter icons are homepage-only */
body:not(.home):not(.page-id-838) .hero::after,
body:not(.home):not(.page-id-838) .hero::before { display: none !important; }
/* flashlight-scope end */

/* legal-streamline start */
/* Datenschutz: readable measure + typography (match Impressum) */
body.page-id-222 main.wrap { max-width: 800px; margin-left: auto; margin-right: auto; }
body.page-id-222 main.wrap .sec-head { margin-bottom: 40px; padding-bottom: 24px; }
body.page-id-222 main.wrap h2 { font-size: 1.5rem; margin: 48px 0 20px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
body.page-id-222 main.wrap h3 { font-size: 1.15rem; margin: 28px 0 12px; }
body.page-id-222 main.wrap p, body.page-id-222 main.wrap ul, body.page-id-222 main.wrap li { font-size: 1.05rem; line-height: 1.65; color: var(--ink); }
body.page-id-222 main.wrap ul { padding-left: 24px; list-style: disc; margin-bottom: 16px; }
body.page-id-222 main.wrap li { margin-bottom: 8px; }
body.page-id-222 main.wrap a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
/* Remove the blue header line on both legal pages */
body.page-id-222 .sec-head, body.page-id-223 .sec-head, body.page-id-223 .agb-header { border-bottom: 0 !important; }
/* Grid backdrop on both legal pages (full-width, top-faded) */
body.page-id-222 main > section, body.page-id-223 main > section {
  background-image:
    linear-gradient(to bottom, transparent 0px, transparent 200px, var(--paper) 470px),
    linear-gradient(color-mix(in srgb, var(--hair) 25%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hair) 25%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px, 20px 20px;
  background-repeat: no-repeat, repeat, repeat;
}
body.page-id-223 .impressum-container { margin-top: 0; }
body.page-id-222 h1, body.page-id-222 h2, body.page-id-222 h3,
body.page-id-223 h1, body.page-id-223 h2, body.page-id-223 h3 { font-family: var(--display); }
body.page-id-223 .impressum-container h1 { font-size: clamp(2.25rem, 5vw, 3.6rem); line-height: 1.15; }
/* legal-streamline end */

/* base-bg start */
html, body { background-color: var(--paper); }
/* base-bg end */
/* brandkit-home start */
.bklp .brandkit .bk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.bklp .brandkit .bk-card { border: 1px solid var(--hair); border-radius: var(--r-m); padding: 28px; background: var(--paper); }
.bklp .brandkit .bk-card strong { display: block; font-family: var(--display); font-size: 1.1rem; margin-bottom: 8px; color: var(--ink); }
.bklp .brandkit .bk-card p { color: var(--grey); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 760px) { .bklp .brandkit .bk-grid { grid-template-columns: 1fr; } }
.bklp .kisuche .ki-guard { font-size: 0.9rem; color: var(--grey); max-width: 560px; margin-bottom: 28px; }
.bklp .kisuche a.btn { margin-top: 8px; }
/* kisuche-home end */
/* center-content start */
.bklp .pain-lead .sec-head, .bklp .ideal .sec-head, .bklp .brandkit .sec-head, .bklp .kisuche .sec-head { text-align: center; }
.bklp .pain-lead .sec-head h2, .bklp .ideal .sec-head h2, .bklp .brandkit .sec-head h2, .bklp .kisuche .sec-head h2,
.bklp .pain-lead .sec-head p, .bklp .ideal .sec-head p, .bklp .brandkit .sec-head p, .bklp .kisuche .sec-head p { margin-left: auto; margin-right: auto; }
.bklp .kisuche .wrap { text-align: center; }
.bklp .kisuche .ki-guard { margin-left: auto; margin-right: auto; }
/* center-content end */

/* bump-reveal start */
@supports (animation-timeline: view()) {
  @keyframes sec-bump {
    0%   { opacity: 0; transform: translateY(44px) scale(0.985); }
    82%  { opacity: 1; transform: translateY(-5px) scale(1.004); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .bklp .pain-lead .sec-head, .bklp .ideal .sec-head, .bklp .brandkit .sec-head, .bklp .kisuche .sec-head,
  .bklp .brandkit .bk-flow, .bklp .brandkit .bk-grid {
    animation: sec-bump linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 30%;
  }
}
/* a bit of blue in the narrative sections */
.bklp .pain-lead .eyebrow, .bklp .ideal .eyebrow, .bklp .brandkit .eyebrow, .bklp .kisuche .eyebrow { color: var(--signal); }
/* bump-reveal end */
/* sticky-fix start */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
/* sticky-fix end */
/* bkflow start */
.bklp .brandkit .wrap { text-align: center; }
.bklp .brandkit .bk-card { text-align: left; }
.bklp .brandkit .bk-flow { display: flex; align-items: center; justify-content: center; margin: 52px auto 16px; max-width: 620px; }
.bklp .brandkit .bk-doc {
  width: 210px; flex: none; text-align: left;
  border: 1px solid var(--hair); border-radius: var(--r-m); background: #fff;
  padding: 20px 22px;
}
.bklp .brandkit .bk-doc-title { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: 14px; }
.bklp .brandkit .bk-doc-line { height: 6px; border-radius: var(--r-s); background: var(--hair); opacity: .5; margin-top: 9px; }
.bklp .brandkit .bk-doc-line.bk-w80 { width: 80%; }
.bklp .brandkit .bk-doc-line.bk-w60 { width: 60%; }
.bklp .brandkit .bk-doc-line.bk-w90 { width: 90%; }
.bklp .brandkit .bk-doc-line.bk-blue { width: 70%; background: var(--signal); opacity: .85; }
.bklp .brandkit .bk-link { flex: none; width: 72px; height: 1px; background: var(--hair); }
.bklp .brandkit .bk-chips { display: flex; flex-direction: column; gap: 10px; position: relative; padding-left: 28px; text-align: left; }
.bklp .brandkit .bk-chips::before { content:""; position:absolute; left:0; top: 19px; bottom: 19px; width:1px; background: var(--hair); }
.bklp .brandkit .bk-chip {
  position: relative; align-self: flex-start;
  padding: 8px 18px; border: 1px solid var(--hair); border-radius: var(--r-pill);
  font-size: 0.92rem; color: var(--ink); background: var(--paper);
  transition: border-color .35s var(--ease-premium);
}
.bklp .brandkit .bk-chip::before { content:""; position:absolute; left:-28px; top:50%; width:28px; height:1px; background: var(--hair); }
.bklp .brandkit .bk-chip:hover { border-color: var(--signal); }
.bklp .brandkit .bk-chip.bk-more { border-style: dashed; color: var(--grey); }
.bklp .brandkit a.btn-primary { display: inline-block; margin: 40px auto 0; }
.bklp .brandkit a.btn-primary::after { content:"→"; margin-left: 10px; display:inline-block; transition: transform 0.3s var(--ease-premium); }
.bklp .brandkit a.btn-primary:hover::after { transform: translateX(4px); }
@media (max-width: 640px) {
  .bklp .brandkit .bk-flow { flex-direction: column; gap: 18px; }
  .bklp .brandkit .bk-link { width: 1px; height: 36px; }
  .bklp .brandkit .bk-chips { padding-left: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .bklp .brandkit .bk-chips::before, .bklp .brandkit .bk-chip::before { display: none; }
}
/* bkflow end */
/* bk-checks start */
.bklp .brandkit .bk-grid { margin-top: 56px; gap: 40px; }
.bklp .brandkit .bk-card { border: 0; background: transparent; padding: 0; border-radius: 0; }
.bklp .brandkit .bk-card::before {
  content: ""; display: block; width: 22px; height: 22px; margin-bottom: 12px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5a9.5%209.5%200%201%200%200%2019%209.5%209.5%200%200%200%200-19z%22%2F%3E%3Cpath%20d%3D%22M8.2%2012.4l2.6%202.6%205-5.4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.bklp .brandkit .bk-card strong { margin-bottom: 6px; }
/* bk-checks end */

/* ============================================================
   /ueber/ — Hero grid: text left, portrait right.
   Moved to Main stylesheet so it reliably publishes (the Etch
   block-style version was not reaching the live page).
   ============================================================ */
.bklp .about-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.bklp .about-hero-img { width: 100%; height: auto; border-radius: var(--r-m); display: block; }
@media (max-width: 820px) {
  .bklp .about-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .bklp .about-hero-img { max-width: 420px; margin: 0 auto; }
}

/* /ueber/ — Stationen rebuilt as scannable achievement cards */
.bklp .ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 100%; }
@media (max-width: 900px) { .bklp .ach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bklp .ach-grid { grid-template-columns: 1fr; } }
.bklp .ach-card { padding: 28px; border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--paper); transition: border-color 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium); }
.bklp .ach-card:hover { border-color: var(--signal); box-shadow: 0 12px 32px rgba(11, 28, 48, 0.06); }
.bklp .ach-card .tl-marker { display: none; }
.bklp .ach-card .tl-date { margin-bottom: 10px; }
.bklp .ach-card h3 { margin-bottom: 8px; }
.bklp .ach-card p { color: var(--grey); font-size: 0.97rem; max-width: 100%; }

.bklp .ach-wrap { width: 100%; }

/* statement-center start */
.bklp .statement .wrap { text-align: center; }
.bklp .statement .eyebrow { justify-content: center; display: flex; }
.bklp .statement h2 { margin-left: auto; margin-right: auto; }
/* statement-center end */

/* mobile-logos start */
@media (max-width: 720px) {
  .bklp .logo-grid { justify-content: center; gap: 28px 36px; }
  .bklp .logo-grid img { max-height: 34px; }
  .bklp .logo-grid img[alt="WiFAm"], .bklp .logo-grid img[alt="AFA"] { max-height: 44px; }
  .bklp .logo-grid img[alt="Gridwise"] { max-height: 26px; }
  .bklp .logo-grid img[alt="AiNGEL"] { max-height: 28px; }
  .bklp .logo-grid img[alt="Alexander Zureck"] { max-height: 30px; }
}
/* mobile-logos end */

/* about-hero-hyphens start */
@media (min-width: 821px) {
  .bklp .about-hero-grid h1 { hyphens: none; }
}
/* about-hero-hyphens end */

/* mobile-polish start */
@media (max-width: 720px) {
  .bklp .logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; align-items: center; row-gap: 30px; column-gap: 20px; }
}
/* mobile-polish end */

/* case-study-polish start */
/* .wrap.narrow: 800px entfallen, "Case Study" setzt 930px und gewann schon vorher. */
body.parent-pageid-351 .referenz-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 16px; margin-top: 40px; border: 0; padding: 0; }
body.parent-pageid-351 .fact { border: 1px solid var(--hair); border-radius: var(--r-m); padding: 18px 20px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
body.parent-pageid-351 .fact-label { color: var(--signal); font-weight: 600; }  /* Schriftgroesse, Laufweite und Versalien kommen aus @section case-study. */
body.parent-pageid-351 .fact-value { font-weight: 600; color: var(--ink); line-height: 1.35; }
body.parent-pageid-351 .post-content h2 { margin: 56px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
body.parent-pageid-351 .post-content ul { list-style: none; padding-left: 0; }
body.parent-pageid-351 .post-content ul li { position: relative; padding-left: 34px; margin-bottom: 12px; }
body.parent-pageid-351 .post-content ul li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5a9.5%209.5%200%201%200%200%2019%209.5%209.5%200%200%200%200-19z%22%2F%3E%3Cpath%20d%3D%22M8.2%2012.4l2.6%202.6%205-5.4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }
/* Zwischenzeile INNERHALB eines Abschnitts der Fallstudien (24.08.2026).
   Als fette 20px-Ueberschrift las sich "Sichtbar in der KI-Suche" wie ein
   eigener Abschnitt neben "Die Ergebnisse". Im Eyebrow-Ton (klein,
   Versalien, gesperrt) ordnet sie sich unter, bleibt aber als h3 fuer
   Gliederung und KI-Systeme eine echte Ueberschrift. Derzeit hat nur die
   WINtec-Seite ein h3; die Regel gilt bewusst fuer alle Fallstudien,
   damit kuenftige Zwischenzeilen gleich aussehen. */
body.parent-pageid-351 .post-content h3 {
  margin: 30px 0 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--signal);
}
body.parent-pageid-351 .hero-interior .lead { color: var(--grey); }
@media (max-width: 720px) { body.parent-pageid-351 .referenz-facts { grid-template-columns: 1fr; } }
body.parent-pageid-351 .post-content blockquote:not(:has(.cite-avatar)), body.parent-pageid-351 .post-content blockquote:has(img.cite-avatar:not([src])), body.parent-pageid-351 .post-content blockquote:has(img.cite-avatar[src=""]) { display: block !important; padding: 36px 40px; background: var(--panel); border-radius: var(--r-m); border: 0; margin: 40px 0; }
body.parent-pageid-351 .post-content blockquote:not(:has(.cite-avatar)), body.parent-pageid-351 .post-content blockquote:has(img.cite-avatar:not([src])), body.parent-pageid-351 .post-content blockquote:has(img.cite-avatar[src=""]) .cite-text { margin-top: 18px; }
body.parent-pageid-351 .post-content blockquote:not(:has(.cite-avatar)), body.parent-pageid-351 .post-content blockquote:has(img.cite-avatar:not([src])), body.parent-pageid-351 .post-content blockquote:has(img.cite-avatar[src=""]) .cite-text span { max-width: none; }
body.parent-pageid-351 .post-content blockquote:not(:has(.cite-avatar)), body.parent-pageid-351 .post-content blockquote:has(img.cite-avatar:not([src])), body.parent-pageid-351 .post-content blockquote:has(img.cite-avatar[src=""]) p { max-width: none; }
body.parent-pageid-351 .post-content img.cite-avatar:not([src]), body.parent-pageid-351 .post-content img.cite-avatar[src=""] { display: none !important; }
/* case-study-polish end */

/* round2-polish start */
/* Referenzen overview: tighten hero-to-cards gap (~154px -> ~90px) */
body.page-id-351 .hero-interior { padding-bottom: 40px; }
body.page-id-351 section:has(.ref-grid) { padding-top: 50px; }
/* Case pages: no quote ornament, styled attribution */
body.parent-pageid-351 .post-content blockquote p::before { content: none !important; }
body.parent-pageid-351 .post-content blockquote:not(:has(.cite-avatar)) .cite-text,
body.parent-pageid-351 .post-content blockquote:has(img.cite-avatar:not([src])) .cite-text,
body.parent-pageid-351 .post-content blockquote:has(img.cite-avatar[src=""]) .cite-text {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--signal) 22%, var(--hair));
}
body.parent-pageid-351 .post-content blockquote .cite-text strong { font-size: 1.08rem; }
/* Blog singles: breathing room for headings + stylish author card */
body.single-post .post-content h2 { margin: 48px 0 16px; }
body.single-post .post-content h3 { margin: 44px 0 14px; }
body.single-post .post-content p { margin-bottom: 16px; }
body.single-post .post-content ul, body.single-post .post-content ol { margin-bottom: 16px; }
body.single-post .author-bar { display: flex; gap: 26px; align-items: flex-start; border: 1px solid var(--hair); background: #fff; margin-top: 64px; }  /* Radius und Polsterung aus @section beitragsseite. */
body.single-post .author-bar__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; }
body.single-post .author-bar__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* .author-bar__label steht vollstaendig in @section beitragsseite und wurde hier abgeloest. */
/* Gruppe getrennt: beitragsseite setzt nur .author-bar__name neu. Bliebe die
   Gruppe zusammen, naehme das Entfernen der Verlierer der h3 die Typografie mit. */
body.single-post .author-bar__name { margin: 3px 0 !important; }
body.single-post .author-bar__body h3 { margin: 3px 0 !important; font-size: 1.2rem; font-family: var(--display); color: var(--ink); }
body.single-post .author-bar__body p { color: var(--grey); font-size: 0.95rem; margin: 6px 0 0; line-height: 1.55; }
@media (max-width: 640px) { body.single-post .author-bar { flex-direction: column; align-items: flex-start; } }
body.single-post .author-bar__body a { display: inline-block; margin: 10px 14px 0 0; }  /* Rest aus @section beitragsseite, Radius aus @section schaltflaechen-radius. */
/* .author-bar__body a:hover steht in @section beitragsseite (var(--ink)). */
/* round2-polish end */

/* facts-2x2 + webinar-pad start */
/* long values wrap instead of clipping */
body.parent-pageid-351 .fact { min-width: 0; }
body.parent-pageid-351 .fact-value { overflow-wrap: anywhere; }
/* 4+ facts: 2x2 on desktop */
body.parent-pageid-351 .referenz-facts:has(.fact:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { body.parent-pageid-351 .referenz-facts:has(.fact:nth-child(4)) { grid-template-columns: 1fr; } }
/* webinar bar: a bit more desktop padding */
@media (min-width: 681px) { .webinar-bar { padding-top: 26px !important; padding-bottom: 26px !important; } }
/* facts-2x2 + webinar-pad end */

/* case hero lead spacing */
.bklp .hero-interior h1 { margin-bottom: 12px; }


/* blog-footer-gap + mobile-hero start */
body.single-post .author-bar { margin-bottom: 88px; }
@media (max-width: 640px) { body.single-post .author-bar { margin-bottom: 64px; } }
@media (hover: none), (max-width: 1199px) {
  :is(body.home, body.page-id-838) .hero::after { display: none; }
}
@media (hover: none), (max-width: 1199px) {
  :is(body.home, body.page-id-838) .hero::before, :is(body.home, body.page-id-838) .hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    display: block !important;
    background-repeat: no-repeat;
    -webkit-mask: none !important; mask: none !important;
    animation: heroIconsPulse 10s ease-in-out infinite;
    opacity: 0.15;
  }
  :is(body.home, body.page-id-838) .hero::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.5%22%20y2%3D%2216.5%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%228%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%208V4%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%223.2%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2213%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2213%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
    background-position: 6% 1%, 8% 90%;
    background-size: 26px, 28px;
  }
  :is(body.home, body.page-id-838) .hero::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3Cpath%20d%3D%22M5.6%205.6l12.8%2012.8%22%2F%3E%3Cpath%20d%3D%22M18.4%205.6L5.6%2018.4%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230052ff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2021h4%22%2F%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200-4%2010.5c.7.7%201%201.2%201%202.5h6c0-1.3.3-1.8%201-2.5A6%206%200%200%200%2012%203z%22%2F%3E%3C%2Fsvg%3E");
    background-position: 94% 2%, 92% 89%;
    background-size: 24px, 26px;
    animation-delay: 5s;
  }
  @keyframes heroIconsPulse { 0%, 45%, 100% { opacity: 0; } 15%, 30% { opacity: 0.7; } } 50% { opacity: 0.7; } }
}
@media (prefers-reduced-motion: reduce) { :is(body.home, body.page-id-838) .hero::before, :is(body.home, body.page-id-838) .hero::after { animation: none !important; opacity: 0.35; } }
/* blog-footer-gap + mobile-hero end */

/* blog-links start */
body.single-post .post-content a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
body.single-post .post-content a:hover { color: #003ec7; }
/* Die Autoren-Pillen bleiben ohne Unterstreichung: text-decoration steht in
   @section beitragsseite und laedt spaeter als .post-content a. */
/* blog-links end */

/* webinar-mobile start */
@media (max-width: 680px) {
  .webinar-bar { padding-top: 24px !important; padding-bottom: 24px !important; }
}
/* webinar-mobile end */

/* proof-link start */
.bklp .proof-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hair); transition: color .25s var(--ease-premium), text-decoration-color .25s var(--ease-premium); }
.bklp .proof-link:hover { color: var(--signal); text-decoration-color: var(--signal); }
/* proof-link end */
/* a11y-pass start */
/* ACSS positions/reveals .skip-link; override its low-contrast colors to brand */
body .skip-link { background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 6px 24px rgba(11,28,48,.35); }
body .skip-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#main { scroll-margin-top: 90px; }
#main:focus { outline: none; }
/* Focus ring for the menu controls the ACCESSIBILITY-FLOOR rule doesn't cover */
.mh__burger:focus-visible, .mh__sub-toggle:focus-visible,
.mh__checkbox:focus-visible + .mh__burger,
.webinar-bar:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--r-s);
}
/* a11y-pass end */
/* ── Zentrierung nur auf breiten Schirmen ── */
/* Zentrierter Text hat keine feste linke Kante. Auf schmalen Schirmen
   werden aus drei Zeilen schnell fuenf, und der Blick muss jeden
   Zeilenanfang neu suchen. Deshalb unter 700px linksbuendig. */
@media (width < 700px) {
  .bklp .sec-head,
  .bklp .hero.centered,
  .bklp .pain-lead .sec-head, .bklp .ideal .sec-head,
  .bklp .brandkit .sec-head, .bklp .kisuche .sec-head,
  .bklp .bc-intro { text-align: left; }
  .bklp .bc-intro h1, .bklp .bc-intro p { margin-left: 0; margin-right: 0; }
  .bklp .bc-filter { justify-content: flex-start; }
}


/* ── Mono raus, Labels in Hanken Grotesk und Satzschreibung (31.07.2026) ─── */
.bklp .spec, .bklp .re-num, .bklp .flowlabel, .bklp .tl-date,
.bklp .tag, .site-footer .foot-title {
  font-family: var(--display);
  letter-spacing: 0.01em;
  text-transform: none;
}
.bklp .spec { font-size: 0.88rem; font-weight: 600; }
.bklp .re-num { font-size: 0.9rem; font-weight: 700; }
.bklp .flowlabel { font-size: 0.9rem; font-weight: 600; }
.bklp .tl-date { font-size: 0.88rem; font-weight: 700; }
.bklp .tag { font-size: 0.85rem; font-weight: 600; }
.site-footer .foot-title { font-size: 0.85rem; font-weight: 600; }
.bklp .ladder .node, .bklp .step-n { letter-spacing: 0; }


/* ── Dunkle CTA-Sektionen: Raster und Erfolgs-Icons unter der Taschenlampe ──
   Gleiche Mechanik wie im Hero: ein radialer Mask folgt dem Cursor und legt
   Raster und Icons frei. Weiss auf --ink, damit der Effekt auf dunklem
   Grund trägt. Die helle Variante .final.light bleibt aussen vor. */
:is(.bklp, body) .final:not(.light) { position: relative; overflow: hidden; }
:is(.bklp, body) .final:not(.light) > * { position: relative; z-index: 1; }

:is(.bklp, body) .final:not(.light)::before,
:is(.bklp, body) .final:not(.light)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Raster */
:is(.bklp, body) .final:not(.light)::before {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%27-6%20-6%2036%2036%27%3E%3Crect%20x%3D%27-6%27%20y%3D%27-6%27%20width%3D%2736%27%20height%3D%2736%27%20fill%3D%27%230b1c30%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M8%2012.4l2.6%202.6L16.2%209.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%27-6%20-6%2036%2036%27%3E%3Crect%20x%3D%27-6%27%20y%3D%27-6%27%20width%3D%2736%27%20height%3D%2736%27%20fill%3D%27%230b1c30%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203.5H7A1.5%201.5%200%200%200%205.5%205v14A1.5%201.5%200%200%200%207%2020.5h10a1.5%201.5%200%200%200%201.5-1.5V8z%27%2F%3E%3Cpath%20d%3D%27M14%203.5V8h4.5%27%2F%3E%3Cpath%20d%3D%27M9%2014.2l1.9%201.9%203.6-3.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%27-6%20-6%2036%2036%27%3E%3Crect%20x%3D%27-6%27%20y%3D%27-6%27%20width%3D%2736%27%20height%3D%2736%27%20fill%3D%27%230b1c30%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2017.5l5-5%203.2%203.2L20%208%27%2F%3E%3Cpath%20d%3D%27M15.5%208H20v4.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%27-6%20-6%2036%2036%27%3E%3Crect%20x%3D%27-6%27%20y%3D%27-6%27%20width%3D%2736%27%20height%3D%2736%27%20fill%3D%27%230b1c30%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5l7%202.6v5.1c0%204.2-2.9%207.6-7%208.8-4.1-1.2-7-4.6-7-8.8V6.1z%27%2F%3E%3Cpath%20d%3D%27M9%2012.2l2%202%204-4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%27-6%20-6%2036%2036%27%3E%3Crect%20x%3D%27-6%27%20y%3D%27-6%27%20width%3D%2736%27%20height%3D%2736%27%20fill%3D%27%230b1c30%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2013.5A3.5%203.5%200%200%201%2016.5%2017H9l-4%203.5V6.5A3.5%203.5%200%200%201%208.5%203h8A3.5%203.5%200%200%201%2020%206.5z%27%2F%3E%3Cpath%20d%3D%27M9.5%2010.2l1.8%201.8%203.4-3.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%27-6%20-6%2036%2036%27%3E%3Crect%20x%3D%27-6%27%20y%3D%27-6%27%20width%3D%2736%27%20height%3D%2736%27%20fill%3D%27%230b1c30%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274.5%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.3%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") no-repeat;
  background-position:
    calc(50% - 415px) 24%, calc(50% - 480px) 54%, calc(50% - 400px) 80%,
    calc(50% + 400px) 22%, calc(50% + 468px) 52%, calc(50% + 388px) 78%;
  background-size: 62px, 64px, 60px, 62px, 64px, 62px;
  opacity: 0.9;
  -webkit-mask: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,0.2) 55%, transparent 70%);
          mask: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,0.2) 55%, transparent 70%);
}

/* Ohne Zeigegeraet gibt es keine Taschenlampe: ruhiges Raster, Icons aus */
@media (hover: none), (max-width: 1199px) {
  :is(.bklp, body) .final:not(.light)::before {
    -webkit-mask: linear-gradient(#000, rgba(0,0,0,0.35) 55%, transparent 88%);
            mask: linear-gradient(#000, rgba(0,0,0,0.35) 55%, transparent 88%);
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  }
  :is(.bklp, body) .final:not(.light)::after { display: none; }
}


/* CTA-Sektion enger fassen: 90px oben und unten liessen den Block schweben.
   Naeher am Hero-Rhythmus, oben etwas mehr als unten. */
:is(.bklp, body) .final:not(.light) {
  padding-top: clamp(54px, 5.4vw, 78px);
  padding-bottom: clamp(48px, 4.6vw, 64px);
}
:is(.bklp, body) .final:not(.light) .hp3-final-text { margin-top: 14px; }


/* CTA-Ueberschrift lief auf der Startseite in 20ch und damit in fuenf Zeilen.
   Einheitliche, breitere Zeile fuer alle Seiten. */
body .bklp .final h2.mt16 {
  max-width: min(34ch, 100%);
  margin-left: auto;
  margin-right: auto;
}
body .bklp .final .hp3-final-text { max-width: min(60ch, 100%); margin-inline: auto; }


/* @section schaltflaechen-radius
   @owns    .btn, .hp3-ref-cta, .ref-card-action, .author-bar__body a, .cs-shot a::after
   @seealso 01-fundament/schaltflaechen
   Warum: Sammelregel mit !important. Sie muss NACH allen Sheets stehen, die
          einen eigenen Radius setzen, sonst dreht eines davon sie zurueck. */
/* ── Ein Radius fuer alle Schaltflaechen (01.08.2026) ──────────────────
   Vorher liefen zwei Formen nebeneinander: .btn mit --r-s und die
   Karten-CTAs als Pille. Oliver bevorzugt die leicht gerundete Form,
   also gilt --r-s ueberall. !important, weil einzelne Sheets nach "Main"
   laden und den Radius sonst zurueckdrehen. */
:is(.bklp, body) .btn,
:is(.bklp, body) .hp3-ref-cta,
:is(.bklp, body) .ref-card-action,
body.single-post .author-bar__body a,
body.parent-pageid-351 .cs-shot a::after {
  border-radius: var(--r-s) !important;
}

/* ── /referenzen/: Firmenname als blaues Label, Nutzen als Titel ────────
   Gleiche Hierarchie wie die Ergebnis-Karten der Startseite. */
:is(.bklp, body) .ref-card h3 {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--signal-soft);
  margin-bottom: 8px;
}


/* ── /referenzen/: Raster wie die Ergebnis-Karten der Startseite ────────
   Ab 1000px zwei Spalten. Ist die Anzahl ungerade, laeuft die erste Karte
   ueber die volle Breite, danach immer zwei nebeneinander. Bei gerader
   Anzahl stehen alle paarweise. Waechst mit, ohne Anpassung. */
@media (min-width: 1000px) {
  body.page-id-351 .bklp .ref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  body.page-id-351 .bklp .ref-grid:has(> :last-child:nth-child(odd)) > :first-child {
    grid-column: 1 / -1;
  }
}


/* ── Pfeile nur an Textlinks, nicht an Schaltflaechen (01.08.2026) ──────
   Der Pfeil kam aus mehreren ::after-Regeln (.btn-ghost, .final .btn-primary,
   .routing .btn-primary, .ref-card .btn-ghost, .hp3-ref-cta). Er bleibt an
   .hp3-flink und am Link der Ankuendigungsleiste. */
:is(.bklp, body) .btn::after,
:is(.bklp, body) .hp3-ref-cta::after,
:is(.bklp, body) .ref-card-action::after {
  content: none !important;
}


/* ── Sektions-Abstaende geradeziehen (01.08.2026) ──────────────────────
   BUG: .pain hatte 80px oben und 0 unten, der Text sass auf der Kante.
   Betraf /ki-suche/, /finanz/, /technischer-mittelstand/ und /ueber/. */
:is(.bklp, body) .pain { padding-bottom: 80px; }

/* .statement stand mit 120px oben und unten als Loch in der Seite */
:is(.bklp, body) .statement {
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
}


/* Untertitel unter einer .statement-Aussage (06.08.2026, Audit B8).
   Die Sektion stand mit Augenbraue und Schlagzeile allein da, ohne einen
   Satz, der sie einordnet. .sec-head p greift hier nicht, weil .statement
   keinen .sec-head hat und zentriert laeuft. */
:is(.bklp, body) .statement .statement-sub {
  margin: 22px auto 0;
  max-width: 58ch;
  color: var(--grey);
  font-size: 1.05rem;
}

/* ── Logo-Leiste als Etch-Komponente (01.08.2026) ──────────────────────
   Die sechs Logos liegen in der Komponente "Logo-Leiste" (id 1294), das
   .logo-grid bleibt auf der Seite. Falls Etch die Instanz in ein eigenes
   Element haengt, macht display:contents dieses Element fuer das
   Flex-Layout durchsichtig, die Bilder bleiben also direkte Flex-Kinder. */
:is(.bklp, body) .logo-grid > *:not(img) { display: contents; }


/* Die Referenzen-Komponente kann auf jeder Seite liegen, deshalb haengen
   Titelfarben nicht mehr an body.page-id-351. */
:is(.bklp, body) .ref-card h3 { color: var(--signal-soft) !important; }


/* Die Nutzen-Zeile verliert beim Weg in die Komponente ihre Klasse
   (per addClass gesetzte Klassen wandern nicht mit). Deshalb ueber die
   Struktur ansprechen statt ueber .ref-benefit. */
:is(.bklp, body) .ref-card > strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.3;
  color: var(--paper);
  margin-bottom: 16px;
}


/* ── Portrait in .who: ohne Schlagschatten, ohne versetzten Rahmen (01.08.2026) ──
   Die Komponente "Ueber Kompakt" liegt auf Startseite, /finanz/,
   /technischer-mittelstand/ und /brand-kit/. Der blaue Versatzrahmen und der
   Schlagschatten sind ueberall abgeschaltet, passend zur Regel
   "Praezision statt Lift, keine Schatten im Ruhezustand".
   Loest die alte body.home-Fassung aus dem Sheet "Homepage V3" ab. */
:is(.bklp, body) .who-visual::before { display: none; }
:is(.bklp, body) .who-img {
  box-shadow: none;
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
}


/* ── 404 ────────────────────────────────────────────────────────────────
   Die Sektion traegt .final und erbt damit die dunkle Flaeche, das Raster
   und das Cursor-Spotlight der CTA-Sektionen. Nur die sechs Icons in den
   Randspalten sind eigene: Lupe, Kompass, Kartennadel, Wegweiser,
   gebrochene Verbindung, Fragezeichen. Die grosse Ziffer ist mit demselben
   Raster gefuellt wie der Hintergrund. */
:is(.bklp, body) .e404 { text-align: center; }
:is(.bklp, body) .e404 .wrap { max-width: 760px; }
:is(.bklp, body) .e404 h1 {
  color: var(--paper);
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 1.15;
  margin-bottom: 14px;
  text-wrap: balance;
}
:is(.bklp, body) .e404-lead {
  margin-inline: auto;
  max-width: 52ch;
  color: rgba(248, 249, 255, 0.72);
}
:is(.bklp, body) .e404 .btn-primary { margin-top: 26px; }

/* ── 404 (Neuaufbau 01.08.2026) ──────────────────────────────────────────
   Vorher lag die Sektion auf .final und erbte damit Cursor-Spotlight und
   die sechs Rand-Icons. Ergebnis: vier Effekte gleichzeitig, und auf
   schmalen Fenstern standen nur die linken Icons im Bild, also unsymmetrisch.
   Jetzt traegt die Sektion nur noch .e404 und bringt alles selbst mit:
   ein ruhiges Raster zur Mitte, die grosse Kontur-Ziffer und EINEN
   Scanstrahl als schmale Linie, die einmal kurz nach dem Laden durchlaeuft
   und danach alle 14 Sekunden. Keine Icons mehr, die Sektion soll ruhig
   wirken, nicht dekoriert. */

body :is(.bklp, body) > section.e404:not(.logos):not(.final) {
  padding-block: clamp(78px, 9vw, 128px);
}
:is(.bklp, body) .e404 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  text-align: center;
  /* Grundraster direkt auf der Sektion (01.08.2026). Vorher lag das Raster
     zusammen mit den Icons auf ::before und damit unter der Taschenlampen-
     Maske: es endete dort, wo der Lichtkegel endete, also nicht an der
     Unterkante. Jetzt liegt eine schwache Grundebene ueber die volle Hoehe,
     das hellere Raster auf ::before addiert sich im Lichtkegel dazu.
     Beide Ebenen teilen 26px Raster und Ursprung, damit die Linien
     exakt aufeinander liegen. */
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.034) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 0 0;
}
:is(.bklp, body) .e404 .wrap {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

/* Raster, zur Mitte hin sichtbar */
:is(.bklp, body) .e404::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%27-5%20-5%2034%2034%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23dfe6ff%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M20.5%2020.5l-4.4-4.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%27-5%20-5%2034%2034%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23dfe6ff%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M15.6%208.4l-2.2%205-5%202.2%202.2-5z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%27-5%20-5%2034%2034%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23dfe6ff%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021c4-4.2%206-7.3%206-9.8a6%206%200%201%200-12%200C6%2013.7%208%2016.8%2012%2021z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2711%27%20r%3D%272.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%27-5%20-5%2034%2034%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23dfe6ff%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M11.2%202.6v18.8%27%2F%3E%3Cpath%20d%3D%27M11.2%205.6h8.4l2.6%202.7-2.6%202.7h-8.4%27%2F%3E%3Cpath%20d%3D%27M11.2%2013.4H2.8l-2.6%202.7%202.6%202.7h8.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%27-5%20-5%2034%2034%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23dfe6ff%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10.4%2013.6l3.2-3.2%27%2F%3E%3Cpath%20d%3D%27M9.6%2010.9L7.9%2012.6a3.4%203.4%200%200%200%204.8%204.8l1.7-1.7%27%2F%3E%3Cpath%20d%3D%27M14.4%2013.1l1.7-1.7a3.4%203.4%200%200%200-4.8-4.8L9.6%208.3%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%27-5%20-5%2034%2034%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23dfe6ff%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M9.6%209.6a2.5%202.5%200%201%201%203.3%202.4c-.7.3-1%20.9-1%201.6v.4%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2711.95%27%20cy%3D%2717.3%27%20r%3D%27.7%27%20fill%3D%27%23dfe6ff%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  /* Links und rechts bewusst gegeneinander versetzt (01.08.2026), sonst
     stehen die sechs Icons in zwei Reihen auf gleicher Hoehe und wirken
     wie eine Tabelle. Der Versatz betraegt rund die halbe Teilung. */
  background-position:
    7% 18%, 3% 48%, 9% 78%,
    93% 30%, 97% 60%, 91% 90%,
    0 0, 0 0;
  /* Gleiche Groessen wie die Gutter-Icons im Startseiten-Hero. */
  background-size:
    46px, 48px, 44px, 46px, 50px, 46px,
    26px 26px, 26px 26px;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat, repeat;
  /* Zwei Maskenebenen, vereinigt (mask-composite: add): die Cursor-Taschen-
     lampe und ein Band, das synchron mit dem Scanstrahl mitwandert. Erst
     dadurch deckt der Strahl die Rand-Icons auf, auch ohne Maus im Bild.
     Rechnung fuer die zweite Ebene, Bandhoehe 240px: bei Position
     t*(H-240px) + (-120px + 240px*t) = t*H - 120px liegt die Bandmitte
     exakt auf t*H, also genau auf der Strahlhoehe. Siehe e404-reveal. */
  -webkit-mask-image:
    radial-gradient(430px circle at var(--mx, 50%) var(--my, 46%), #000 0%, rgba(0,0,0,0.55) 52%, rgba(0,0,0,0.14) 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.30) 24%, rgba(0,0,0,0.95) 50%, rgba(0,0,0,0.30) 76%, transparent 100%);
          mask-image:
    radial-gradient(430px circle at var(--mx, 50%) var(--my, 46%), #000 0%, rgba(0,0,0,0.55) 52%, rgba(0,0,0,0.14) 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.30) 24%, rgba(0,0,0,0.95) 50%, rgba(0,0,0,0.30) 76%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 240px;
          mask-size: 100% 100%, 100% 240px;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 0, 0 calc(0% - 120px);
          mask-position: 0 0, 0 calc(0% - 120px);
  -webkit-mask-composite: source-over;
          mask-composite: add;
  animation: e404-reveal 14s cubic-bezier(0.45, 0, 0.55, 1) 0.5s infinite;
}
/* Unter 1080px waere in den Randspalten kein Platz, dort bleibt nur das Raster. */
@media (max-width: 1080px) {
  :is(.bklp, body) .e404::before {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-position: 0 0, 0 0;
    background-size: 26px 26px, 26px 26px;
    background-repeat: repeat, repeat;
  }
}

/* Scanstrahl: schmale Linie mit weichem Schein, nicht mehr als Farbband */
:is(.bklp, body) .e404::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--signal) 70%, #ffffff) 22%,
    color-mix(in srgb, var(--signal) 70%, #ffffff) 78%,
    transparent 100%);
  box-shadow: 0 0 26px 7px color-mix(in srgb, var(--signal) 40%, transparent);
  /* Erster Durchlauf nach 0,5 s, danach alle 14 s. Der sichtbare Teil liegt
     in den ersten 24 % des Zyklus, also rund 3,4 s pro Durchlauf. */
  animation: e404-scan-loop 14s cubic-bezier(0.45, 0, 0.55, 1) 0.5s infinite;
}
@keyframes e404-scan-loop {
  0%   { top: 0%;   opacity: 0; }
  3%   { opacity: 1; }
  21%  { opacity: 1; }
  24%  { top: 100%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}
/* Aufdeck-Band, laeuft exakt mit e404-scan-loop. Nach dem Durchlauf faehrt
   es ganz aus dem Bild, sonst blieben die unteren Icons stehen. */
@keyframes e404-reveal {
  0%   { -webkit-mask-position: 0 0, 0 calc(0% - 120px);   mask-position: 0 0, 0 calc(0% - 120px); }
  24%  { -webkit-mask-position: 0 0, 0 calc(100% + 120px); mask-position: 0 0, 0 calc(100% + 120px); }
  30%  { -webkit-mask-position: 0 0, 0 calc(100% + 430px); mask-position: 0 0, 0 calc(100% + 430px); }
  100% { -webkit-mask-position: 0 0, 0 calc(100% + 430px); mask-position: 0 0, 0 calc(100% + 430px); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.bklp, body) .e404::after { animation: none; opacity: 0; }
  :is(.bklp, body) .e404::before { animation: none; }
}

/* Typografie */
/* Der Kicker IST die grosse Ziffer, deshalb als Kontur gesetzt. */
:is(.bklp, body) .e404 .eyebrow {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.6rem, 12vw, 7rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: none;
  margin: 0 0 18px;
  /* Deckende Fuellung, leicht gegen die Bandfarbe aufgehellt (01.08.2026).
     Deckend muss sie bleiben, sonst laufen die Rasterlinien durch die Ziffer. */
  color: color-mix(in srgb, var(--ink) 90%, var(--paper));
  -webkit-text-stroke: 1.6px rgba(248, 249, 255, 0.32);
}
:is(.bklp, body) .e404 h1 {
  color: var(--paper);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.18;
  margin-bottom: 14px;
  text-wrap: balance;
}
:is(.bklp, body) .e404-lead {
  margin-inline: auto;
  max-width: 50ch;
  color: rgba(248, 249, 255, 0.7);
}
:is(.bklp, body) .e404 .btn-primary { margin-top: 28px; }

/* @section sektionsrhythmus-global
   @owns    section:not(.logos):not(.final) padding-block
   @seealso 01-fundament/abstandsrhythmus-und-baender
   Warum: Muss NACH allen aelteren Sektionsabstaenden stehen, sonst gewinnen die
          52, 80, 88, 90 und 96 Pixel von frueher wieder. Deshalb hier hinten
          und nicht in 01, obwohl es dem Rang nach Fundament ist. */
/* ══ Ein Sektionsrhythmus fuer die ganze Website (01.08.2026) ════════════
   Vorher liefen 52, 80, 88, 90 und 96 Pixel nebeneinander, je nachdem
   wann eine Seite gebaut wurde. Jetzt gilt ueberall der 52er-Rhythmus der
   Startseite. Ausgenommen bleiben zwei Sonderfaelle mit eigener, engerer
   Fassung: die Beleg-Leiste (.logos) und der dunkle Schlussblock (.final).
   Der Hero ist ein <header> und deshalb ohnehin nicht betroffen. */
body :is(.bklp, body) > section:not(.logos):not(.final) {
  /* Mitwachsend statt fest (02.08.2026). Der 52er-Rhythmus bleibt unten
     wortwoertlich stehen: unter rund 1000px Fensterbreite aendert sich
     nichts, das Telefon bekommt keine zusaetzliche Scrollstrecke. Luft
     entsteht nur dort, wo sie gefehlt hat, auf breiten Schirmen.
       390px → 52    900px → 52    1200px → 62
      1440px → 75   1600px → 83   ab 1846px → 96
     Der Deckel bei 96px ist bewusst: mehr laesst eine Sektion auseinander-
     fallen statt sie zu ordnen. */
  padding-block: clamp(52px, 5.2vw, 96px);
}

/* @section flaechen-utilities
   @owns    .band-white, .band-paper, .band-panel
   @seealso 01-fundament/abstandsrhythmus-und-baender
   Warum: Die Flaeche haengt an der Sektion als Klasse, damit sie im Builder
          sichtbar ist. Achtung: band-Klassen sind schon zweimal bei Struktur-
          Operationen abgefallen, nach Umbauten live nachsehen. */
/* Flaechen-Utilities. Zwei Baender mit derselben Flaeche duerfen nicht
   aneinanderstossen, sonst steht dort doppelter Abstand ohne sichtbaren
   Wechsel. Die Flaeche steht als Klasse an der Sektion, damit sie im
   Builder sichtbar ist. */
/* ── UEBERLAUFSCHUTZ, GILT FUER JEDEN NEUEN ABSCHNITT ──────────────────
   Abschnittsbaender sind Flex-Container (kommt nicht aus diesen Sheets).
   Das hat zwei Folgen, die beide zu Fehlern gefuehrt haben:

   1. min-width: auto. Ein Flex-Kind waechst auf seine INHALTSBREITE, statt
      sich auf den Kasten zu begrenzen. Auf /preise/ sprengte die
      Preistabelle dadurch ihren eigenen Scrollrahmen: .preis-tabelle hat
      overflow-x: auto und die Tabelle min-width: 560px, trotzdem stand das
      Ganze auf einem 390px-Schirm 560px breit und ragte 202px hinaus.
   2. Ohne width: 100% schrumpft ein .wrap.narrow auf seine Inhaltsbreite
      statt seine 680px zu nehmen; auf /ki-suche/ stand der Quellenblock
      deshalb 243px schmal.

   Beides ist mit zwei Zeilen erledigt, und zwar fuer alle kuenftigen
   Abschnitte mit: wer .wrap benutzt, ist automatisch geschuetzt.
   ACHTUNG bei der Fehlersuche: body traegt overflow-x: hidden. Deshalb
   bleibt document.scrollWidth gleich der Fensterbreite, AUCH wenn etwas
   hinausragt. Ein Ueberlauf ist nur zu finden, indem man die Kaesten der
   Elemente gegen die Fensterbreite misst (tools/mobilcheck.mjs). */
/* section UND header: der Hero ist auf mehreren Seiten ein header, und
   genau dort stand das .wrap auf /finanz/ bei 360px 386px breit. */
:is(.bklp, body) :is(section, header) > .wrap { width: 100%; min-width: 0; }

/* Was von Natur aus breiter werden kann, wird gedeckelt. Neue Bausteine
   erben das, ohne dass jemand daran denken muss. */
:is(.bklp, body) :is(img, svg, video, iframe, canvas, pre, table) { max-width: 100%; }
:is(.bklp, body) :is(p, li, dd, h1, h2, h3, h4, td, th) { overflow-wrap: break-word; }

/* Drei Einzelfaelle, die derselbe Denkfehler verbindet: eine feste Breite
   ohne Rueckfallebene. Auf 360px reicht der Platz dafuer nicht.
   Gemessen am 07.08.2026 mit tools/mobilcheck.mjs. */
/* 1. Eine Chip-Reihe umbricht zwar, aber ein einzelner Chip war mit 322px
      breiter als der Kasten mit 296px (/finanz/). */
:is(.bklp, body) .tags > * { max-width: 100%; }
/* max-width allein reicht nicht: die Chips laufen mit white-space: nowrap,
   ein langer Chip ("Brand Kit ab 1.600 €, Festpreis nach Scoping") war
   damit 310px breit im 296px-Kasten. Eng wird umbrochen. */
@media (max-width: 700px) {
  :is(.bklp, body) .tag { white-space: normal; }
}
/* 2. Das Kundenstimmen-Raster stand auf festen 320px-Spalten
      (/loesungen/brand-kit-technischer-mittelstand/). */
@media (max-width: 700px) {
  :is(.bklp, body) .testimonials .wrap > div { grid-template-columns: minmax(0, 1fr) !important; }
  :is(.bklp, body) .testi-card { max-width: 100%; }
}
/* 3. WS Form legt ein verstecktes Honigtopf-Feld an, dessen Inhalt 61px
      breit ist, waehrend der Kasten 1px misst. Sichtbar ist davon nichts,
      aber es blaeht die Inhaltsbreite aller Elternelemente auf und macht
      damit jede Ueberlaufmessung am Formular unbrauchbar. */
:is(.bklp, body) .wsf-hidden-element { overflow: hidden; }
:is(.bklp, body) section.band-white { background: #fff; }
:is(.bklp, body) section.band-paper { background: var(--paper); }
:is(.bklp, body) section.band-panel { background: var(--panel); }


/* ── Haeufige Fragen: flache Liste mit Trennlinien ─────────────────────
   Lag bis 01.08.2026 im Sheet "Homepage V3", laeuft aber auch auf den
   Loesungsseiten. Deshalb hier in "Main". */
:is(.bklp, body) .hp3-faq {
  background: var(--paper);
}
:is(.bklp, body) .hp3-faq .wrap { width: 100%; }

:is(.bklp, body) .faq-stack {
  display: block;
  max-width: 900px;
  border-top: 1px solid var(--hair);
}
:is(.bklp, body) .faq-item {
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: transparent;
}
:is(.bklp, body) .faq-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 19px 0;
}
:is(.bklp, body) .faq-sum::-webkit-details-marker { display: none; }
:is(.bklp, body) .faq-q {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.35;
}

/* Plus, das im offenen Zustand zum Minus wird */
:is(.bklp, body) .faq-sum::after {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--grey);
  background:
    linear-gradient(currentColor, currentColor) center / 15px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 15px no-repeat;
  transition: color 0.25s var(--ease-premium);
}
:is(.bklp, body) .faq-sum:hover::after { color: var(--signal); }
:is(.bklp, body) .faq-item[open] .faq-sum::after {
  color: var(--signal);
  background: linear-gradient(currentColor, currentColor) center / 15px 1.5px no-repeat;
}
:is(.bklp, body) .faq-sum:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

:is(.bklp, body) .faq-body { padding: 0 0 24px; }
:is(.bklp, body) .faq-a {
  margin: 0 0 12px;
  color: var(--grey);
  line-height: 1.62;
  max-width: 72ch;
}
:is(.bklp, body) .faq-a:last-child { margin-bottom: 0; }
:is(.bklp, body) .faq-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  max-width: 72ch;
}
:is(.bklp, body) .faq-list li {
  position: relative;
  padding-left: 22px;
  color: var(--grey);
  line-height: 1.55;
}
:is(.bklp, body) .faq-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
}

/* ── Haeufige Fragen: zentrierter Kopf, Fragen erst blau bei Hover/offen ──
   Der Sektionskopf steht mittig ueber der Liste, die Zeilen bleiben
   linksbuendig. Die Fragen sind im Ruhezustand --ink und werden
   signalblau, sobald man darauf zeigt oder sie geoeffnet sind. */
:is(.bklp, body) .hp3-faq .sec-head {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 34px;
}
:is(.bklp, body) .hp3-faq .sec-head h2 {
  max-width: none;
  margin-inline: auto;
  text-wrap: balance;
}
:is(.bklp, body) .hp3-faq .sec-head p { margin-inline: auto; max-width: 60ch; }
:is(.bklp, body) .hp3-faq .faq-stack { margin-inline: auto; }

:is(.bklp, body) .faq-q { color: var(--ink); transition: color 0.25s var(--ease-premium); }
:is(.bklp, body) .faq-sum:hover .faq-q { color: var(--signal); opacity: 1; }
:is(.bklp, body) .faq-sum:focus-visible .faq-q { color: var(--signal); }
:is(.bklp, body) .faq-item[open] .faq-q { color: var(--signal); }


/* ── Motto in der Gruender-Sektion ───────────────────────────────────────
   Lag bis 01.08.2026 im Sheet "Homepage V3", die .who-Sektion laeuft aber
   als Komponente auf fuenf Seiten, deshalb jetzt hier. Die weisse Karte mit
   blauer Kante ist raus: der Satz steht frei in Display-Groesse ueber einer
   feinen Messskala. Die Skala ist die kleine Pointe, sie nimmt "erst messen,
   dann bauen, dann nachmessen" woertlich und zeichnet sich beim Laden
   einmal von links nach rechts. */
:is(.bklp, body) .who-motto {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 26px 0 34px;
  padding: 0 4px 20px 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* Messskala: Grundlinie mit feinen Teilstrichen, jeder vierte laenger und
   in Signalblau. Reihenfolge der Ebenen: blau liegt oben. */
:is(.bklp, body) .who-motto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-image:
    repeating-linear-gradient(90deg, var(--signal) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 12px),
    linear-gradient(var(--hair), var(--hair));
  background-size: 100% 9px, 100% 5px, 100% 1px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  :is(.bklp, body) .who-motto::after {
    animation: who-scale 1.15s var(--ease-premium) 0.15s both;
  }
  @keyframes who-scale {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
}


/* ── Fundament-Diagramm: eine Quelle, vier Kanaele (01.08.2026, v2) ──────
   Vorher vier gleiche Kaesten ueber drei gleichen Kaesten, verbunden mit
   gestrichelten Linien und Pfeil-Zeichen. Das las sich wie ein Standard-
   Schaubild. Jetzt eine gerichtete Komposition:

   links  das Brand Kit als EIN Dokument-Panel, Glaskante oben, Rasterpapier
          innen, drei nummerierte Zeilen statt drei Boxen,
   Mitte  vier echte Bezier-Leitungen, die alle aus demselben Punkt an der
          rechten Panel-Kante austreten (das ist die Aussage der Sektion),
   rechts die Kanaele als Liste mit Haarlinien statt als Kachelraster.

   Der Lichtimpuls entsteht ohne SVG-Animation: dieselbe Kurvengrafik liegt
   ein zweites Mal in Signalblau darueber und wird von einer wandernden
   Maske freigegeben. Dadurch laeuft das Licht exakt der Kurvengeometrie
   entlang. Laeuft auf 838, 835 und 693. */

:is(.bklp, body) .fundament .diagram {
  --bk-curves: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20112%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%27112%27%20y2%3D%270%27%20gradientUnits%3D%27userSpaceOnUse%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%27.07%27%2F%3E%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%238fa8ff%27%20stop-opacity%3D%27.28%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%238fa8ff%27%20stop-opacity%3D%27.5%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%271.1%27%20vector-effect%3D%27non-scaling-stroke%27%3E%3Cpath%20d%3D%27M0%20150C58%20150%2054%2037.5%20112%2037.5%27%2F%3E%3Cpath%20d%3D%27M0%20150C58%20150%2054%20112.5%20112%20112.5%27%2F%3E%3Cpath%20d%3D%27M0%20150C58%20150%2054%20187.5%20112%20187.5%27%2F%3E%3Cpath%20d%3D%27M0%20150C58%20150%2054%20262.5%20112%20262.5%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%238fa8ff%27%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%2737.5%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%27112.5%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%27187.5%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%27262.5%27%20r%3D%272.6%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%270%27%20cy%3D%27150%27%20r%3D%273.4%27%20fill%3D%27%230052ff%27%2F%3E%3C%2Fsvg%3E");
  --bk-curves-hot: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20112%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%235b7dff%27%20stroke-width%3D%272.2%27%20vector-effect%3D%27non-scaling-stroke%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M0%20150C58%20150%2054%2037.5%20112%2037.5%27%2F%3E%3Cpath%20d%3D%27M0%20150C58%20150%2054%20112.5%20112%20112.5%27%2F%3E%3Cpath%20d%3D%27M0%20150C58%20150%2054%20187.5%20112%20187.5%27%2F%3E%3Cpath%20d%3D%27M0%20150C58%20150%2054%20262.5%20112%20262.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 0.86fr);
  align-items: center;
  gap: 0;
  margin-top: clamp(28px, 3vw, 44px);
}

/* ── links: das Dokument ───────────────────────────────────────────── */
:is(.bklp, body) .fundament .base {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
  display: block;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-m);
  background-color: rgba(255, 255, 255, 0.028);
  /* Nur senkrechte Rasterlinien. Die Waagerechte liefern die Trennlinien
     der Zeilen, dadurch liegt nichts mehr knapp nebeneinander und die
     Senkrechten laufen sauber durch die Trennlinien hindurch. Der Versatz
     von 14px setzt eine Linie exakt auf die Textkante der Titel (62px). */
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 100%;
  background-position: 14px 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 24px 60px rgba(0, 0, 0, 0.35);
  counter-reset: bk-layer;
  overflow: hidden;
}
/* Aktenreiter */
:is(.bklp, body) .fundament .base::before {
  content: "Brand Kit";
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 14px 22px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.83rem;
  letter-spacing: 0.01em;
  color: rgba(248, 249, 255, 0.9);
}
/* Zeilen statt Boxen, mit Ziffernschiene */
:is(.bklp, body) .fundament .layer {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 16px 22px 16px 62px;
}
:is(.bklp, body) .fundament .layer + .layer { border-top: 1px solid rgba(255, 255, 255, 0.075); }
:is(.bklp, body) .fundament .layer::before {
  counter-increment: bk-layer;
  content: "0" counter(bk-layer);
  position: absolute;
  left: 22px;
  top: 17px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: rgba(248, 249, 255, 0.34);
}
:is(.bklp, body) .fundament .layer h3 { font-size: 1rem; margin-bottom: 5px; }
:is(.bklp, body) .fundament .layer p { font-size: 0.88rem; color: rgba(248, 249, 255, 0.62); }
/* Fundament-Zeile: Signalkante, keine Flaeche */
:is(.bklp, body) .fundament .layer.primary {
  background: linear-gradient(90deg, rgba(0, 82, 255, 0.14), transparent 62%);
  border: 0;
  border-radius: 0;
  animation: none;
  box-shadow: none;
}
:is(.bklp, body) .fundament .layer.primary::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--signal);
}
:is(.bklp, body) .fundament .layer.primary::before { color: var(--signal-soft); }
:is(.bklp, body) .fundament .layer.primary * { color: var(--paper) !important; }
:is(.bklp, body) .fundament .layer.primary p { color: rgba(248, 249, 255, 0.75) !important; }

/* ── rechts: die Kanaele als Liste ─────────────────────────────────── */
:is(.bklp, body) .fundament .flowlabel {
  grid-column: 3;
  grid-row: 1;
  height: auto;
  display: block;
  padding: 0 0 12px 26px;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(248, 249, 255, 0.45);
  animation: none;
}
:is(.bklp, body) .fundament .flowlabel::before,
:is(.bklp, body) .fundament .flowlabel::after { content: none; }

:is(.bklp, body) .fundament .outputs {
  grid-column: 3;
  grid-row: 2;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding-left: 26px;
}
:is(.bklp, body) .fundament .out {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 17px 0;
  text-align: left;
  font-size: 0.98rem;
  transition: color 0.3s var(--ease-premium);
}
:is(.bklp, body) .fundament .out + .out { border-top: 1px solid rgba(255, 255, 255, 0.09); }
:is(.bklp, body) .fundament .out small {
  font-size: 0.8rem;
  letter-spacing: 0;
  color: rgba(248, 249, 255, 0.48);
  margin-top: 3px;
}
:is(.bklp, body) .fundament .out::before,
:is(.bklp, body) .fundament .out::after { content: none; }
:is(.bklp, body) .fundament .outputs > *:hover { border-color: rgba(255, 255, 255, 0.09); box-shadow: none; }

/* ── Mitte: die Leitungen ──────────────────────────────────────────── */
:is(.bklp, body) .fundament .outputs::before,
:is(.bklp, body) .fundament .outputs::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 112px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
:is(.bklp, body) .fundament .outputs::before { background-image: var(--bk-curves); }
:is(.bklp, body) .fundament .outputs::after {
  background-image: var(--bk-curves-hot);
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 38%, #000 46% 54%, transparent 62% 100%);
          mask-image: linear-gradient(90deg, transparent 0 38%, #000 46% 54%, transparent 62% 100%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: bk-flow 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes bk-flow {
  0%   { -webkit-mask-position: 128% 0; mask-position: 128% 0; }
  100% { -webkit-mask-position: -128% 0; mask-position: -128% 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.bklp, body) .fundament .outputs::after { animation: none; opacity: 0; }
}

/* ── schmal: gestapelt, ohne Leitungen ─────────────────────────────── */
@media (max-width: 980px) {
  :is(.bklp, body) .fundament .diagram { grid-template-columns: 1fr; }
  :is(.bklp, body) .fundament .base { grid-column: 1; grid-row: 1; }
  :is(.bklp, body) .fundament .flowlabel { grid-column: 1; grid-row: 2; padding: 26px 0 10px; }
  :is(.bklp, body) .fundament .outputs {
    grid-column: 1;
    grid-row: 3;
    padding-left: 0;
    grid-template-columns: 1fr !important;
  }
  :is(.bklp, body) .fundament .outputs::before,
  :is(.bklp, body) .fundament .outputs::after { content: none; }


  :is(.bklp, body) .pain { padding-bottom: clamp(48px, 9vw, 64px); }

}


/* ── Kundenlogo in der Referenzkarte (01.08.2026) ───────────────────────
   Die Logos liegen in der Komponente 1318. Etch schreibt dort keine
   Klasse ins Markup, deshalb ueber die Struktur ansprechen:
   .hp3-metric > img. Auf der dunklen Karte werden sie weiss invertiert,
   die Hoehen sind optisch ausgeglichen (gleiche Flaeche statt gleicher
   Hoehe, die Seitenverhaeltnisse gehen weit auseinander). */
:is(.bklp, body) .hp3-metric > img {
  display: block;
  align-self: flex-start;
  width: auto;
  max-width: 62%;
  max-height: 28px;
  margin: 0 0 2px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.35s var(--ease-premium);
}
:is(.bklp, body) .hp3-metric:hover > img { opacity: 0.95; }
:is(.bklp, body) .hp3-metric > img[alt="WiFAm"] { max-height: 38px; }
:is(.bklp, body) .hp3-metric > img[alt="AFA"]   { max-height: 38px; }
:is(.bklp, body) .hp3-metric > img[alt="WINtec"] { max-height: 26px; }
@media (max-width: 640px) {
  :is(.bklp, body) .hp3-metric > img { max-width: 74%; }
}


/* ── Referenzkarte: Logo rechts neben dem Firmennamen (01.08.2026) ──────
   Das Logo ueber dem Namen wirkte doppelt und liess die drei Karten
   ungleich aussehen. Jetzt sitzt es rechts oben auf Hoehe des Namens, der
   Text laeuft durchgehend links. Dazu ist der vertikale Rhythmus in der
   Karte gestrafft, vorher stand eine grosse Luecke zwischen Titel und
   Fliesstext. Unter 640px wandert das Logo wieder ueber den Namen. */
:is(.bklp, body) .hp3-proof .hp3-metric { position: relative; }  /* gap kommt aus @section startseite-v3 (12px). */
:is(.bklp, body) .hp3-metric > img {
  position: absolute;
  top: 42px;
  right: 34px;
  align-self: auto;
  margin: 0;
  max-width: 34%;
  max-height: 32px;
  opacity: 1;
}
:is(.bklp, body) .hp3-metric > img[alt="WiFAm"]  { max-height: 42px; }
:is(.bklp, body) .hp3-metric > img[alt="AFA"]    { max-height: 40px; }
:is(.bklp, body) .hp3-metric > img[alt="WINtec"] { max-height: 30px; }
:is(.bklp, body) .hp3-proof .hp3-metric .hp3-metric-l { padding-right: 34%; }
:is(.bklp, body) .hp3-proof .hp3-metric strong { margin-bottom: 0; }
:is(.bklp, body) .hp3-proof .hp3-metric-text { margin-top: 4px; }
@media (max-width: 640px) {
  :is(.bklp, body) .hp3-metric > img {
    position: static;
    margin: 0 0 10px;
    max-width: 62%;
    max-height: 26px;
  }
  :is(.bklp, body) .hp3-proof .hp3-metric .hp3-metric-l { padding-right: 0; }
}


/* ── Sprunglink zum Inhalt (Barrierefreiheit, 01.08.2026) ───────────────
   Ausgeliefert von Code-Snippet 25 an wp_body_open mit Prioritaet 0, damit
   er das erste fokussierbare Element der Seite ist, noch vor der
   Ankuendigungsleiste. Im Ruhezustand ausserhalb des Bildes, bei
   Tastatur-Fokus faehrt er sichtbar ein. Ziel ist die main-Landmarke,
   die es seit heute auch auf der 404-Seite gibt. */
/* Automatic.css bringt eine eigene .skip-link-Regel mit (position:absolute
   !important, translateY(-250%)) und laedt nach "Main". Deshalb hier hoehere
   Spezifitaet und !important, sonst faehrt der Link bei Fokus nicht ein. */
body a.skip-link {
  position: fixed !important;
  top: 10px !important;
  left: 16px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip-path: none !important;
  z-index: 3000;
  padding: 13px 22px;
  border-radius: var(--r-s);
  background-color: var(--signal) !important;
  color: #ffffff !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  text-transform: none !important;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(calc(-100% - 28px)) !important;
  transition: transform 0.18s var(--ease-premium);
}
body a.skip-link:focus,
body a.skip-link:focus-visible {
  transform: translateY(0) !important;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  body a.skip-link { transition: none; }
}
/* Das Sprungziel darf beim Fokus nicht unter der klebenden Kopfzeile landen */
#main { scroll-margin-top: 112px; }


/* Alternative Ziele unter dem Button der 404 */
:is(.bklp, body) .e404-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 26px 0 0;
}
:is(.bklp, body) .e404-links a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(248, 249, 255, 0.66);
  text-decoration: underline;
  text-decoration-color: rgba(248, 249, 255, 0.25);
  text-underline-offset: 5px;
  transition: color 0.25s var(--ease-premium), text-decoration-color 0.25s var(--ease-premium);
}
:is(.bklp, body) .e404-links a:hover {
  color: var(--paper);
  text-decoration-color: var(--signal);
}


/* ── 404: kein heller Streifen zwischen Sektion und Footer ──────────────
   Die Seite besteht nur aus einem dunklen Band. Das main-Element bringt
   aber die Standard-Innenabstaende des Seitenrahmens mit, dadurch blieb
   unten eine helle Flaeche stehen. Auf der 404 also main ohne Abstand und
   der Body in --ink, damit nichts Helles durchscheint. */
body.error404 { background-color: var(--ink); }
body.error404 #main { padding: 0 !important; margin: 0 !important; }
body.error404 #main > .bklp { padding: 0 !important; margin: 0 !important; }

/* Footer-Logo als Link, ohne eigene Optik */
.site-footer .foot-logo-link { display: inline-block; text-decoration: none; }

/* ── 404: die Sektion fuellt den Rest der Fensterhoehe ────────────────────
   <main> ist ein Flex-Element und waechst auf kurzen Seiten bis zur
   Fensterunterkante. Auf der 404 stand deshalb zwischen Sektionsunterkante
   und Footer ein Streifen von rund 96px ohne Raster, Strahl und Icons: die
   Seite sah auf halber Hoehe abgeschnitten aus. Statt das Raster in den
   Footer zu ziehen (der ist ein geteilter Template-Part) bekommt die
   Sektion den Platz, der ohnehin da ist. Damit laufen Raster, Scanstrahl
   und Taschenlampe bis an den Footer heran. */
body.error404 main {
  display: flex;
  flex-direction: column;
}
/* Die Sektion haengt in div.bklp, die Kette muss durchgereicht werden. */
body.error404 main > .bklp {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body.error404 .e404 {
  flex: 1 1 auto;
  justify-content: center;
}

/* ── Kundenlogos in den Referenzkarten etwas groesser (01.08.2026) ────────
   Nur ab 641px: darunter sitzt das Logo ueber dem Firmennamen und behaelt
   seine kleinere Fassung. Die Freihaltezone links zieht mit, sonst laeuft
   der lange Firmenname ins Logo. */
@media (min-width: 641px) {
  :is(.bklp, body) .hp3-metric > img { max-width: 38%; max-height: 37px; }
  :is(.bklp, body) .hp3-metric > img[alt="WiFAm"]  { max-height: 48px; }
  :is(.bklp, body) .hp3-metric > img[alt="AFA"]    { max-height: 46px; }
  :is(.bklp, body) .hp3-metric > img[alt="WINtec"] { max-height: 35px; }
  :is(.bklp, body) .hp3-proof .hp3-metric .hp3-metric-l { padding-right: 38%; }
}

/* ── /referenzen/: Seitenkopf zentriert (01.08.2026) ──────────────────────
   Darunter stehen drei zentrierte Karten und der zentrierte Sektionskopf
   der Startseite. Der linksbuendige Kopf brach diese Achse. Bewusst nur
   auf 351 gescoped: .hero-interior traegt auch die Blogbeitraege, und dort
   ist der linksbuendige Satz richtig. */
body.page-id-351 .hero-interior { text-align: center; }
body.page-id-351 .hero-interior h1 { margin-inline: auto; }
body.page-id-351 .hero-interior .lead {
  margin-inline: auto;
  max-width: 62ch;
}

/* ── „Ihre Ausgangslage" (.routing) neu gefasst (01.08.2026) ──────────────
   Vorher trug jede der beiden Karten einen vollflaechigen signalblauen
   Button. Damit war reine Navigation das staerkste Farbereignis der Seite,
   gegen die eigene Regel „Signalblau nur fuer CTA", und die Karten standen
   als reine Flaechen neben dem Haarlinien- und Kartensystem des Rests.
   Jetzt: weisse Karte mit Haarlinie, Icon in einem eigenen Feld statt
   freistehend, Trennlinie ueber dem Abschluss, Textlink mit Pfeil statt
   Schaltflaeche. Signalblau bleibt der Oberkante im Hover und dem Link
   vorbehalten. Gilt auch fuer `/brand-kit/`, dort laeuft dieselbe Sektion. */
body :is(.bklp, body) .routing .pain-grid { gap: 28px; }

body :is(.bklp, body) .routing .pain-item {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  padding: 30px 32px 28px;
  /* Inline steht `justify-content: space-between`. Mit dem Icon-::before
     als drittem Flex-Element verteilt das den Freiraum ZWISCHEN Icon,
     Text und Link, und weil die beiden Karten unterschiedlich viel Text
     haben, sitzen Augenbraue und Titel auf verschiedener Hoehe. */
  justify-content: flex-start !important;
}

/* Icon bekommt ein eigenes Feld, damit es nicht im Weissraum schwebt. */
body :is(.bklp, body) .routing .pain-item::before {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border: 1px solid var(--hair);
  border-radius: var(--r-s);
  background-size: 22px;
  background-position: center;
}

body :is(.bklp, body) .routing .pain-item .eyebrow {
  display: block;
  margin-bottom: 8px;
}
body :is(.bklp, body) .routing .pain-item h3 {
  font-size: 1.12rem;
  line-height: 1.3;
  margin-bottom: 10px;
  /* Zwei Zeilen reservieren: die beiden Titel sind unterschiedlich lang,
     ohne Reserve stehen die Absaetze darunter auf verschiedener Hoehe. */
  min-height: 2.6em;
}
body :is(.bklp, body) .routing .pain-item p { margin-bottom: 0; }
/* Mindestabstand zur Trennlinie: `margin-top: auto` am Abschluss laesst in
   der volleren Karte keinen Freiraum uebrig, der Text stiess an die Linie. */
body :is(.bklp, body) .routing .pain-item > div:first-child { margin-bottom: 26px; }

/* Trennlinie ueber dem Abschluss, gleiche Haarlinie wie die Kartenkante. */
body :is(.bklp, body) .routing .pain-item > div:last-child {
  margin-top: auto !important;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}

/* Aus der Schaltflaeche wird ein Textlink. `.bklp .btn-primary` setzt
   color mit !important, deshalb hier ebenso. */
body :is(.bklp, body) .routing .pain-item .btn-primary {
  display: inline-block;
  width: auto !important;
  margin-top: 0 !important;
  padding: 0 !important;
  /* background-color statt background: das Kurzschriftwort wuerde die
     Verlaufs-Unterstreichung gleich mit loeschen. */
  background-color: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  text-align: left !important;
  transform: none !important;
  transition: color 0.25s var(--ease-premium);
}
/* Gleicher Textlink-Stil wie .hp3-flink: Unterstrich laeuft bis vor den
   Pfeil und zieht sich im Hover zurueck, Farbe bleibt Tinte. */
body :is(.bklp, body) .routing .pain-item .btn-primary {
  --arrow-space: 1.95em;
  background-image: linear-gradient(currentColor, currentColor) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--arrow-space) bottom 0.02em !important;
  background-size: calc(100% - var(--arrow-space)) 1px !important;
}
body :is(.bklp, body) .routing .pain-item .btn-primary:hover,
body :is(.bklp, body) .routing .pain-item .btn-primary:focus-visible {
  color: var(--ink) !important;
  background-size: 0 1px !important;
}

/* Der Pfeil ist global an `.btn` abgeschaltet, hier ausdruecklich zurueck.
   Inline wie bei .hp3-flink, sonst laeuft der Unterstrich nicht sauber aus. */
body :is(.bklp, body) .routing .pain-item .btn-primary::after {
  content: "\00a0\00a0\2192" !important;
  display: inline;
  transition: padding-left 0.45s var(--ease-premium);
}
body :is(.bklp, body) .routing .pain-item .btn-primary:hover::after,
body :is(.bklp, body) .routing .pain-item .btn-primary:focus-visible::after { padding-left: 10px; }

/* ── Raster auf den dunklen CTA-Sektionen zurueck (01.08.2026) ────────────
   `::before` traegt dort die sechs Erfolgs-Icons, `::after` war auf Desktop
   ungenutzt (nur die no-hover-Fassung schaltet es ab). Es bekommt jetzt das
   Raster mit derselben Taschenlampen-Maske wie die Icons, damit der Cursor
   beides gemeinsam freigibt. Ohne Zeigegeraet greift weiter die ruhige
   Fassung aus `@media (hover: none), (max-width: 1199px)`.
   Die 404 ist ausgenommen: sie hat ihre eigene Fassung mit Scanstrahl. */
:is(.bklp, body) .final:not(.light):not(.e404)::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  -webkit-mask: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,0.28) 55%, transparent 76%);
          mask: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,0.28) 55%, transparent 76%);
}

/* ── „Ihre Ausgangslage" mobil straffen (01.08.2026) ──────────────────────
   Einspaltig braucht der Titel keine Zeilenreserve mehr, und die Karte war
   mit voller Desktop-Polsterung ueber eine Bildschirmhoehe hoch. */
@media (max-width: 780px) {
  body :is(.bklp, body) .routing .pain-grid { gap: 18px; }
  body :is(.bklp, body) .routing .pain-item { padding: 24px 22px 22px; }
  body :is(.bklp, body) .routing .pain-item::before {
    width: 40px; height: 40px; margin-bottom: 16px; background-size: 20px;
  }
  body :is(.bklp, body) .routing .pain-item h3 { min-height: 0; font-size: 1.06rem; }
  body :is(.bklp, body) .routing .pain-item p { font-size: 0.94rem; }
  body :is(.bklp, body) .routing .pain-item > div:first-child { margin-bottom: 20px; }
  body :is(.bklp, body) .routing .pain-item > div:last-child { padding-top: 16px; }
}

/* ── Kundenlogos nicht beschneiden (01.08.2026) ───────────────────────────
   Eine globale Bildregel setzt `width: 100%` und `object-fit: cover`. In
   der gestapelten Mobilfassung ergab das eine Box von 255x40 Pixeln bei
   einem Logo von 175x68, also einen Beschnitt mitten durch die Wortmarke.
   `width: auto` plus `object-fit: contain` laesst wieder das Seiten-
   verhaeltnis entscheiden, die Hoehendeckel bleiben wirksam. */
body :is(.bklp, body) .hp3-metric > img {
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 640px) {
  body :is(.bklp, body) .hp3-metric > img { max-width: 58%; max-height: 30px; }
  body :is(.bklp, body) .hp3-metric > img[alt="WiFAm"]  { max-height: 38px; }
  body :is(.bklp, body) .hp3-metric > img[alt="AFA"]    { max-height: 36px; }
  body :is(.bklp, body) .hp3-metric > img[alt="WINtec"] { max-height: 26px; }
}

/* ── Interior-Hero mobil: halber Abstand nach oben (01.08.2026) ───────────
   `.hero-interior` startete auf dem Telefon mit 120px ueber dem Kicker.
   Zusammen mit Ankuendigungsleiste und Kopfzeile lag der Seitentitel damit
   erst weit unterhalb der Bildschirmmitte. Betrifft `/referenzen/`, die
   Case Studies und die Blogbeitraege, die denselben Hero tragen. */
@media (max-width: 700px) {
  body :is(.bklp, body) .hero-interior { padding-top: 60px; }
}

/* ── `/ueber/`: Hero zentriert (01.08.2026) ───────────────────────────────
   Vorher Text links, Portraet rechts. `column-reverse` stellt das Portraet
   optisch nach oben und laesst die Lesereihenfolge im Markup unveraendert:
   H1 bleibt das erste, was Screenreader und Crawler antreffen. */
body.page-id-398 .bklp .about-hero-grid {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 34px;
  text-align: center;
  max-width: 860px;
}
body.page-id-398 .bklp .about-hero-grid .hero-content { max-width: 760px; }
body.page-id-398 .bklp .about-hero-grid .hero-visual { width: auto; }
body.page-id-398 .bklp .about-hero-img {
  width: auto !important;
  height: auto !important;
  max-width: 264px;
  max-height: 330px;
  object-fit: cover;
  border-radius: var(--r-m);
  margin: 0;
}
body.page-id-398 .bklp .about-hero-grid .lead {
  margin-inline: auto;
  max-width: 64ch;
}
body.page-id-398 .bklp .about-hero-grid .tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
@media (max-width: 700px) {
  body.page-id-398 .bklp .about-hero-grid { gap: 26px; }
  body.page-id-398 .bklp .about-hero-img { max-width: 208px; max-height: 260px; }
}

/* ══ Stationen als Belegwand (nur /ueber/, Seite 398) ══════════════════
   Ersetzt den frueheren Schienen-Block fuer .ach-* auf dieser Seite.
   Die sechs Belege stehen bewusst nicht chronologisch, deshalb keine
   Achse und keine Marker-Kreise mehr, sondern sechs gleichwertige
   dunkle Karten nach dem Vorbild des Google-Elements: Motiv links,
   grosse Kennzahl, Fliesstext, gedaempfte Quellzeile unten. */
body.page-id-398 .bklp .ach-wrap { max-width: 1080px; }

body.page-id-398 .bklp .ach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-left: 0;
}
body.page-id-398 .bklp .ach-grid::before,
body.page-id-398 .bklp .ach-grid::after { content: none; }

/* Dunkle Karte wie die Google-Referenz. Das kaum sichtbare Raster ist
   das Signaturmuster der Site und gibt der Flaeche Material, ohne mit
   dem Inhalt zu konkurrieren. */
body.page-id-398 .bklp .ach-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 16px;
  padding: 24px 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-m);
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  box-shadow: none;
  transition: border-color 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
}
/* Reaktion nur ueber Kante und Schatten, die Karte bleibt stehen. */
body.page-id-398 .bklp .ach-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 16px 40px rgba(11, 28, 48, 0.18);
}

/* Der alte Marker wird zum Motiv-Slot links neben Label und Kennzahl,
   so bleibt das Bestandsmarkup unveraendert nutzbar. */
body.page-id-398 .bklp .ach-card .tl-marker {
  display: block;
  position: static;
  grid-area: 1 / 1 / 3 / 2;
  align-self: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  transition: none;
}

/* Label auf Dunkel: gedaempft, damit die Kennzahl die Buehne hat. */
body.page-id-398 .bklp .ach-card .tl-date {
  grid-area: 1 / 2;
  align-self: end;
  margin-bottom: 2px;
  color: rgba(248, 249, 255, 0.55);
}

/* Die grosse Kennzahl traegt die Karte, wie die 5,0 in der Referenz. */
body.page-id-398 .bklp .ach-card h3 {
  grid-area: 2 / 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: 1.65rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* Fuenf goldene Sterne als eigenes Element neben der 5,0. Google-Gold
   ist neben dem G die einzige erlaubte Fremdfarbe. */
body.page-id-398 .bklp .ach-card .ach-stars {
  display: inline-block;
  width: 91px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27106%27%20height%3D%2721%27%20viewBox%3D%270%200%20106%2021%27%3E%3Cg%20fill%3D%27%23FBBC04%27%3E%3Cpath%20transform%3D%27translate%280%200%29%20scale%280.85%29%27%20d%3D%27M12%203.2l2.7%205.5%206%20.9-4.3%204.2%201%206L12%2017l-5.4%202.8%201-6-4.3-4.2%206-.9z%27%2F%3E%3Cpath%20transform%3D%27translate%2822%200%29%20scale%280.85%29%27%20d%3D%27M12%203.2l2.7%205.5%206%20.9-4.3%204.2%201%206L12%2017l-5.4%202.8%201-6-4.3-4.2%206-.9z%27%2F%3E%3Cpath%20transform%3D%27translate%2844%200%29%20scale%280.85%29%27%20d%3D%27M12%203.2l2.7%205.5%206%20.9-4.3%204.2%201%206L12%2017l-5.4%202.8%201-6-4.3-4.2%206-.9z%27%2F%3E%3Cpath%20transform%3D%27translate%2866%200%29%20scale%280.85%29%27%20d%3D%27M12%203.2l2.7%205.5%206%20.9-4.3%204.2%201%206L12%2017l-5.4%202.8%201-6-4.3-4.2%206-.9z%27%2F%3E%3Cpath%20transform%3D%27translate%2888%200%29%20scale%280.85%29%27%20d%3D%27M12%203.2l2.7%205.5%206%20.9-4.3%204.2%201%206L12%2017l-5.4%202.8%201-6-4.3-4.2%206-.9z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

body.page-id-398 .bklp .ach-card p {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 16px;
  max-width: 100%;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(248, 249, 255, 0.7);
}

/* Quellzeile wie in der Referenz: leise, unten, durch eine Haarlinie
   vom Inhalt getrennt. Nur die Google-Karte ist ein echter Link und
   bekommt den Pfeil, die uebrigen Zeilen behaupten keine Verlinkung. */
body.page-id-398 .bklp .ach-card .ach-src {
  grid-column: 1 / -1;
  grid-row: 5;
  align-self: end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.88rem;
  color: rgba(248, 249, 255, 0.55);
  text-decoration: none;
}
body.page-id-398 .bklp .ach-card a.ach-src::after {
  content: "\2197\FE0E";  /* U+FE0E erzwingt Textdarstellung, sonst buntes Emoji auf iOS/Android */
  margin-left: 6px;
}
/* Quellen-Moment, deshalb darf hier das gedaempfte Blau der dunklen
   Flaechen reagieren. */
body.page-id-398 .bklp .ach-card a.ach-src:hover,
body.page-id-398 .bklp .ach-card a.ach-src:focus-visible {
  color: #8FA8FF;
}
body.page-id-398 .bklp .ach-card a.ach-src:focus-visible {
  outline: 2px solid #8FA8FF;
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Motive: nur das Google-G ist mehrfarbig, alles andere einfarbige
   Linien in Papierweiss, Strichstaerke 1.6 wie ueberall auf der Site. */
body.page-id-398 .bklp .ach-card:nth-child(1) .tl-marker { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%234285F4%27%20d%3D%27M23.52%2012.27c0-.85-.08-1.66-.22-2.45H12v4.64h6.46c-.28%201.5-1.12%202.77-2.4%203.62v3.01h3.88c2.27-2.09%203.58-5.17%203.58-8.82z%27%2F%3E%3Cpath%20fill%3D%27%2334A853%27%20d%3D%27M12%2024c3.24%200%205.96-1.07%207.94-2.91l-3.88-3.01c-1.07.72-2.45%201.15-4.06%201.15-3.13%200-5.78-2.11-6.72-4.95H1.27v3.11C3.24%2021.3%207.31%2024%2012%2024z%27%2F%3E%3Cpath%20fill%3D%27%23FBBC04%27%20d%3D%27M5.28%2014.28A7.2%207.2%200%200%201%204.9%2012c0-.79.14-1.56.38-2.28V6.61H1.27A11.97%2011.97%200%200%200%200%2012c0%201.94.46%203.77%201.27%205.39l4.01-3.11z%27%2F%3E%3Cpath%20fill%3D%27%23EA4335%27%20d%3D%27M12%204.77c1.76%200%203.34.61%204.59%201.8l3.44-3.44C17.95%201.19%2015.24%200%2012%200%207.31%200%203.24%202.7%201.27%206.61l4.01%203.11C6.22%206.88%208.87%204.77%2012%204.77z%27%2F%3E%3C%2Fsvg%3E"); background-size: 36px 36px; }
body.page-id-398 .bklp .ach-card:nth-child(2) .tl-marker { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23f8f9ff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%277.5%27%20width%3D%2717%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8.5%207.5V5.6a1.6%201.6%200%200%201%201.6-1.6h3.8a1.6%201.6%200%200%201%201.6%201.6v1.9%27%2F%3E%3Cpath%20d%3D%27M3.5%2012.5h17%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body.page-id-398 .bklp .ach-card:nth-child(3) .tl-marker { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23f8f9ff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%204h8v4.4a4%204%200%200%201-8%200z%27%2F%3E%3Cpath%20d%3D%27M8%205.4H5.3v1.5a3%203%200%200%200%202.9%203%27%2F%3E%3Cpath%20d%3D%27M16%205.4h2.7v1.5a3%203%200%200%201-2.9%203%27%2F%3E%3Cpath%20d%3D%27M12%2012.4V16%27%2F%3E%3Cpath%20d%3D%27M8.6%2020h6.8l-.9-4H9.5z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body.page-id-398 .bklp .ach-card:nth-child(5) .tl-marker { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23f8f9ff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.2L21%208.4l-9%204.2-9-4.2z%27%2F%3E%3Cpath%20d%3D%27M6.6%2010.4v4.6c0%201.6%202.4%202.9%205.4%202.9s5.4-1.3%205.4-2.9v-4.6%27%2F%3E%3Cpath%20d%3D%27M21%208.4v4.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body.page-id-398 .bklp .ach-card:nth-child(6) .tl-marker { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23f8f9ff%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.4%27%20y%3D%274.2%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.2%27%2F%3E%3Crect%20x%3D%2713.6%27%20y%3D%274.2%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.2%27%2F%3E%3Crect%20x%3D%273.4%27%20y%3D%2713.4%27%20width%3D%277%27%20height%3D%276.4%27%20rx%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M13.6%2016.6h7M17.1%2013.4v6.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* Karte 4: das echte AirOps-Abzeichen uebernimmt den Motiv-Slot, der
   leere Marker verschwindet. Die !important entschaerfen Bildattribute
   und aeltere Badge-Regeln. */
body.page-id-398 .bklp .ach-card:has(.ach-badge) .tl-marker { display: none; }
body.page-id-398 .bklp .ach-card .ach-badge {
  position: static;
  grid-area: 1 / 1 / 3 / 2;
  align-self: center;
  width: 44px !important;
  height: 44px !important;
  max-width: none;
  max-height: none;
  border-radius: 50%;
  margin: 0;
  object-fit: contain;
}

/* Feste Spalten, auto-fit kollabiert in diesem Layout. */
@media (max-width: 900px) {
  body.page-id-398 .bklp .ach-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  body.page-id-398 .bklp .ach-grid { grid-template-columns: 1fr; }
}

/* ══ Netzwerk als Hub und Speichen (nur /ueber/, Seite 398) ════════════
   Die vier Disziplinen haengen sichtbar an einer Person, statt als
   Liste nebeneinander zu stehen. Linien aus Borders und Pseudo-
   Elementen, damit der Faecher bei jeder Textlaenge stabil bleibt. */
body.page-id-398 .bklp .who-in {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
body.page-id-398 .bklp .net-lede {
  margin-top: 18px;
  color: var(--grey);
  max-width: 46ch;
}

body.page-id-398 .bklp .net-hub {
  display: grid;
  grid-template-columns: minmax(200px, 240px) 56px 1fr;
  align-items: center;
}
/* Senkrechte Sammel-Linie in der Luecke. Als Grid-Item platziert,
   dadurch waechst sie automatisch mit der Knotenspalte mit; die
   Margins enden auf Hoehe der aeusseren Knotenmitten. */
body.page-id-398 .bklp .net-hub::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: stretch;
  width: 1px;
  margin: 26px 0;
  background: var(--hair);
}

/* Hub-Karte formal wie die Belegkarten der Stationen-Sektion, damit
   die Seite eine Sprache spricht. */
body.page-id-398 .bklp .net-hubcard {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-m);
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
}
/* Zuleitung von der Hub-Karte zur Sammel-Linie samt Knotenpunkt. */
body.page-id-398 .bklp .net-hubcard::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 50%;
  width: 28px;
  height: 1px;
  background: var(--hair);
}
body.page-id-398 .bklp .net-hubcard::before {
  content: "";
  position: absolute;
  right: -30.5px;
  top: calc(50% - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hair);
}
body.page-id-398 .bklp .net-name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--paper);
}
body.page-id-398 .bklp .net-role {
  display: block;
  margin-top: 3px;
  font-size: 0.9rem;
  color: rgba(248, 249, 255, 0.7);
}

body.page-id-398 .bklp .net-spokes {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  gap: 12px;
}
/* Weisse Knoten auf dem Lavendel-Band, klein und technisch, damit die
   Hierarchie zur Hub-Karte eindeutig bleibt. Keine Hover-Reaktion,
   die Knoten sind keine Links und sollen keine behaupten. */
body.page-id-398 .bklp .net-node {
  position: relative;
  padding: 13px 16px 13px 46px;
  border: 1px solid var(--hair);
  border-radius: var(--r-s);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 20px 20px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--ink);
}
/* Speiche von der Sammel-Linie zum Knoten samt Knotenpunkt. */
body.page-id-398 .bklp .net-node::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  width: 28px;
  height: 1px;
  background: var(--hair);
}
body.page-id-398 .bklp .net-node::after {
  content: "";
  position: absolute;
  left: -30.5px;
  top: calc(50% - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hair);
}

/* Disziplin-Motive, einfarbige Tinte, Strichstaerke 1.6. */
body.page-id-398 .bklp .net-node:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%230b1c30%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8.5%208l-4.5%204%204.5%204%27%2F%3E%3Cpath%20d%3D%27M15.5%208l4.5%204-4.5%204%27%2F%3E%3Cpath%20d%3D%27M13.4%205.5l-2.8%2013%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body.page-id-398 .bklp .net-node:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%230b1c30%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020l1.2-4.2L16.6%204.4a2%202%200%200%201%202.8%200l.2.2a2%202%200%200%201%200%202.8L8.2%2018.8z%27%2F%3E%3Cpath%20d%3D%27M13.5%207.5l3%203%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body.page-id-398 .bklp .net-node:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%230b1c30%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2016.5c2.5-7%2011.5-7%2014%200%27%2F%3E%3Crect%20x%3D%273.4%27%20y%3D%2715%27%20width%3D%273.2%27%20height%3D%273.2%27%20rx%3D%270.8%27%2F%3E%3Crect%20x%3D%2717.4%27%20y%3D%2715%27%20width%3D%273.2%27%20height%3D%273.2%27%20rx%3D%270.8%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%276.2%27%20r%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M12%207.8v3.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
body.page-id-398 .bklp .net-node:nth-child(4) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%230b1c30%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.4l7%202.6v5.2c0%204.4-3%207.4-7%208.8-4-1.4-7-4.4-7-8.8V6z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710.6%27%20r%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M12%2012.2v2.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* Unter 900px wird der Faecher zum Baum: Hub oben, Knoten haengen an
   einer linken Spine. Der Gradient statt border-left endet auf Hoehe
   der letzten Knotenmitte, damit kein Linienrest heraushaengt. */
@media (max-width: 900px) {
  body.page-id-398 .bklp .who-in { grid-template-columns: 1fr; align-items: start; }
  body.page-id-398 .bklp .net-hub { display: block; }
  body.page-id-398 .bklp .net-hub::before { content: none; }
  body.page-id-398 .bklp .net-hubcard::before,
  body.page-id-398 .bklp .net-hubcard::after { content: none; }
  body.page-id-398 .bklp .net-spokes {
    margin-left: 21px;
    padding: 20px 0 0 24px;
    background: linear-gradient(var(--hair), var(--hair)) 0 0 / 1px calc(100% - 26px) no-repeat;
  }
  body.page-id-398 .bklp .net-node::before { left: -24px; width: 24px; }
  body.page-id-398 .bklp .net-node::after { content: none; }
}

/* ── /ueber/: YouTube-Kanal als gerahmter, klickbarer Screenshot ─────────
   (01.08.2026) Gleiche Anmutung wie die Projekt-Screenshots der Case
   Studies (Passepartout-Rahmen, Abdunkeln und Pill im Hover), deren
   Regeln aber auf body.parent-pageid-351 gescoped sind, deshalb hier
   die eigene Fassung fuer Seite 398. Der Button darunter bleibt: auf
   Touch-Geraeten gibt es keinen Hover, er traegt dort die Affordanz. */
body.page-id-398 .final .cs-shot.yt-shot {
  margin: 30px auto 28px;
  width: 100%;
  max-width: 860px;
}
body.page-id-398 .yt-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: clamp(8px, 1vw, 12px) solid #fff;
  border-radius: var(--r-m);
  box-shadow: 0 0 0 1px var(--hair);
  background: #fff;
}
body.page-id-398 .yt-shot a {
  display: block;
  position: relative;
  border-radius: var(--r-m);
  text-decoration: none;
}
/* Abdunkeln nur ueber dem Bild, nicht ueber dem weissen Rahmen */
body.page-id-398 .yt-shot a::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 1vw, 12px);
  border-radius: calc(var(--r-m) - 4px);
  background: rgba(11, 28, 48, 0.34);
  opacity: 0;
  transition: opacity 0.3s var(--ease-premium);
  pointer-events: none;
}
body.page-id-398 .yt-shot a::after {
  /* Pill entfernt (01.08.2026): der Button unter dem Bild traegt den CTA,
     zweimal derselbe Text uebereinander wirkte doppelt. */
  content: none;
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 4vw, 48px);
  transform: translate(-50%, 10px);
  padding: 13px 24px;
  border-radius: var(--r-s) !important;
  background: var(--signal);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
  pointer-events: none;
}
body.page-id-398 .yt-shot a:hover::before,
body.page-id-398 .yt-shot a:focus-visible::before { opacity: 1; }
body.page-id-398 .yt-shot a:hover::after,
body.page-id-398 .yt-shot a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
body.page-id-398 .yt-shot a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* ── /ueber/: Founders Running Club als eigene Sektion (01.08.2026) ──────
   Zwischen Transparenz (Lavendel) und Schlussblock (Tinte), als weisses
   Band bleibt der Flaechenwechsel erhalten. Aufbau und Rahmen wie die
   YouTube-Sektion darueber, damit die beiden Persoenlich-Sektionen als
   Paar lesen. */
body.page-id-398 .bklp .frc { text-align: center; }
body.page-id-398 .bklp .frc h2 {
  margin-inline: auto;
  max-width: 26ch;
}
body.page-id-398 .bklp .frc p {
  margin: 14px auto 0;
  max-width: 62ch;
  color: var(--grey);
}
body.page-id-398 .bklp .frc .btn-primary { margin-top: 26px; }
body.page-id-398 .frc .cs-shot.frc-shot {
  margin: 30px auto 0;
  width: 100%;
  max-width: 860px;
}
body.page-id-398 .frc-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: clamp(8px, 1vw, 12px) solid #fff;
  border-radius: var(--r-m);
  box-shadow: 0 0 0 1px var(--hair);
  background: #fff;
}
body.page-id-398 .frc-shot a {
  display: block;
  position: relative;
  border-radius: var(--r-m);
  text-decoration: none;
}
body.page-id-398 .frc-shot a::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 1vw, 12px);
  border-radius: calc(var(--r-m) - 4px);
  background: rgba(11, 28, 48, 0.34);
  opacity: 0;
  transition: opacity 0.3s var(--ease-premium);
  pointer-events: none;
}
body.page-id-398 .frc-shot a::after {
  /* Pill entfernt, siehe yt-shot. */
  content: none;
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 4vw, 48px);
  transform: translate(-50%, 10px);
  padding: 13px 24px;
  border-radius: var(--r-s) !important;
  background: var(--signal);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
  pointer-events: none;
}
body.page-id-398 .frc-shot a:hover::before,
body.page-id-398 .frc-shot a:focus-visible::before { opacity: 1; }
body.page-id-398 .frc-shot a:hover::after,
body.page-id-398 .frc-shot a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
body.page-id-398 .frc-shot a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* @section ueber-final-hell
   @owns    body.page-id-398 .final.light .eyebrow, … h2
   @seealso 03-seiten/ueber-seite
   Warum: Gilt fuer /ueber/, steht aber hier und nicht in 03: die Regel muss
          gegen .bklp .final h2 aus diesem Sheet gewinnen und tut das ueber
          !important. Der wirkungslose Zwilling in 03 ist entfallen. */
/* ── Helle CTA-Sektion: Kontrast (01.08.2026) ─────────────────────────────
   `.bklp .final h2` und `.final .eyebrow` setzen Papierweiss, die
   Seiten-Regel in "Über-Seite" verlor den Kaskadenkampf: auf Lavendel
   war die Ueberschrift fast unsichtbar. !important, weil die Farbwerte
   aus mehreren Sheets kommen. */
body.page-id-398 .bklp .final.light .eyebrow { color: var(--grey) !important; }
body.page-id-398 .bklp .final.light h2 { color: var(--ink) !important; }

/* ── Sicherung ueber die Struktur statt der Klasse (01.08.2026) ──────────
   Die `light`-Klasse ist schon zweimal bei Struktur-Saves abgefallen.
   Die Transparenz-Sektion ist ueber ihr YouTube-Element eindeutig
   identifizierbar, deshalb haengen Kontrast und Icon-Sperre zusaetzlich
   an :has(.yt-shot). Faellt die Klasse erneut, bleibt die Sektion hell. */
body.page-id-398 .bklp .final:has(.yt-shot) .eyebrow { color: var(--grey) !important; }
body.page-id-398 .bklp .final:has(.yt-shot) h2 { color: var(--ink) !important; }
body.page-id-398 .bklp .final:has(.yt-shot)::before,
body.page-id-398 .bklp .final:has(.yt-shot)::after { content: none !important; }

/* ── /ueber/: H1 kompakter (01.08.2026) ──────────────────────────────────
   Die weichen Trennstellen (&shy;) standen schon im Text, wurden aber nie
   genutzt: jede Zeile brach am Wortzwischenraum, die Ueberschrift lief
   ueber fuenf Zeilen. hyphens: auto laesst den Browser an den Fugen
   trennen und die Zeilen fuellen. */
body.page-id-398 .bklp .about-hero-grid { max-width: 940px; }
body.page-id-398 .bklp .about-hero-grid .hero-content { max-width: 920px; }
body.page-id-398 .bklp .about-hero-grid h1 {
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: balance;
  max-width: 100%;
  font-size: clamp(2.4rem, 3.6vw, 3.25rem);
}
body.page-id-398 .bklp .about-hero-grid .lead { margin-inline: auto; }

/* ── /ueber/: YouTube und Laufclub als Links-rechts-Paar (01.08.2026) ────
   ACHTUNG, hier lag ein echter Fehler: die erste Fassung schob den Text
   mit `padding-right: 50%` zur Seite. Prozent-Polsterung rechnet gegen die
   Breite des ENTHALTENDEN Blocks, also gegen die volle Sektion, nicht
   gegen den 1080px-Wrap. Ab etwa 1700px Fensterbreite frass die Polsterung
   den ganzen Wrap auf und die Textspalte fiel auf Zeichenbreite zusammen.
   Jetzt ein echtes Zweispalten-Raster: die Textkinder stapeln sich in der
   einen Spalte, die Bildkarte spannt daneben ueber alle Zeilen.
   Unter 900px greift wieder der zentrierte Stapel. */
@media (min-width: 901px) {
  body.page-id-398 .bklp .final:has(.yt-shot) .wrap,
  body.page-id-398 .bklp .frc .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-content: center;
    max-width: 1080px !important;
    width: 100%;
    text-align: left;
  }
  body.page-id-398 .bklp .final:has(.yt-shot) .wrap > * { grid-column: 1; }
  body.page-id-398 .bklp .final:has(.yt-shot) .wrap > .cs-shot {
    grid-column: 2;
    /* Genau die vier Textzeilen: Augenbraue, H2, Absatz, Schaltflaeche.
       Ein zu grosser Span erzeugt leere Rasterzeilen und schiebt das
       Bild aus dem sichtbaren Bereich. */
    grid-row: 1 / span 4;
    align-self: center;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  body.page-id-398 .bklp .frc .wrap > * { grid-column: 2; }
  body.page-id-398 .bklp .frc .wrap > .cs-shot {
    grid-column: 1;
    /* Genau die vier Textzeilen: Augenbraue, H2, Absatz, Schaltflaeche.
       Ein zu grosser Span erzeugt leere Rasterzeilen und schiebt das
       Bild aus dem sichtbaren Bereich. */
    grid-row: 1 / span 4;
    align-self: center;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  body.page-id-398 .bklp .final:has(.yt-shot) h2,
  body.page-id-398 .bklp .frc h2 {
    margin-left: 0;
    margin-right: 0;
    max-width: 100% !important;
    font-size: clamp(1.7rem, 2.2vw, 2.1rem);
    line-height: 1.2;
    text-wrap: balance;
  }
  body.page-id-398 .bklp .final:has(.yt-shot) .wrap > p,
  body.page-id-398 .bklp .frc .wrap > p {
    margin: 14px 0 0 !important;
    max-width: 48ch;
  }
  body.page-id-398 .bklp .final:has(.yt-shot) .btn-primary,
  body.page-id-398 .bklp .frc .btn-primary {
    justify-self: start;
    margin-top: 26px;
  }
}

/* ── /ueber/: Flaechenwechsel ohne Klassen absichern (01.08.2026) ─────────
   Die Klasse `band-white` an `.statement` ist zweimal bei Struktur-Saves
   abgefallen, danach stiessen zwei papierfarbene Baender aneinander.
   Die Flaeche haengt jetzt am Selektor statt an einer Klasse. */
body.page-id-398 .bklp .statement { background: #fff; }
body.page-id-398 .bklp .about-def { background: var(--paper); }

/* Reste der ersten Fassung neutralisieren: irgendwo im Sheet steht noch
   `padding-right: 50%` auf denselben Wraps. Prozent-Polsterung rechnet
   gegen die Sektionsbreite und wuerde das Raster wieder zusammendruecken. */
@media (min-width: 901px) {
  body.page-id-398 .bklp .final:has(.yt-shot) .wrap,
  body.page-id-398 .bklp .frc .wrap {
    padding-right: 32px !important;
    padding-left: 32px !important;
    min-height: 0 !important;
  }
}

/* ── Blogbeitraege: Autorenzeile mit Gesicht (01.08.2026, neu gesetzt) ────
   Vorbild ist die Radyant-Autorenzeile: rundes Portraet, Name fett, Rolle
   gedaempft darunter, Datum daneben. Liegt im single-Template und gilt
   damit fuer alle Beitraege. Zwei Dinge sind hier wichtig: der ganze Chip
   ist ein Link auf /ueber/, deshalb muessen Farben ausdruecklich gesetzt
   werden, sonst faerbt die Link-Regel Portraet-Rahmen, Name und Rolle in
   Linkblau. Und die Regeln haengen NICHT mehr an `.bklp`: die erste
   Fassung tat das und verschwand bei einem Rollback spurlos. */
body.single-post .post-meta {
  display: flex !important;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}
body.single-post a.author-chip,
body.single-post .author-chip {
  display: flex !important;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
body.single-post .author-avatar {
  flex: none;
  width: 46px !important;
  height: 46px !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--hair);
  margin: 0 !important;
  display: block;
}
body.single-post .author-chip-txt { display: block; }
body.single-post .author-name {
  display: block !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--ink) !important;
}
body.single-post .author-role {
  display: block !important;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--grey) !important;
}
body.single-post .post-date {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--grey);
  white-space: nowrap;
}
body.single-post .post-date::before {
  content: "\00b7";
  margin-right: 14px;
  color: var(--hair);
}
/* Nur der Name reagiert, damit die Zeile ruhig bleibt. */
body.single-post a.author-chip:hover .author-name,
body.single-post a.author-chip:focus-visible .author-name { color: var(--signal) !important; }
body.single-post a.author-chip:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
  border-radius: var(--r-s);
}

/* Mobil: das Datum rutscht unter den Chip, dort stoert der Punkt-Trenner. */
@media (max-width: 560px) {
  body.single-post .post-meta { gap: 10px 14px; }
  body.single-post .post-date { width: 100%; }
  body.single-post .post-date::before { content: none; }
}


/* @section kopfzeile
   @owns    .mh__submenu, .newsbar__link, .mh__inner, .mh__menu, .mh__sub-toggle, .mh__has-sub */
/* ================= MASTHEAD ================= */

.mh__has-sub { position: relative; }

.mh__submenu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-s);
  padding: 8px 0; min-width: 240px; list-style: none; margin: 0;
  box-shadow: 0 8px 28px rgba(26,31,43,.08);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s; z-index: 1020;
}

.mh__has-sub:hover .mh__submenu,
.mh__has-sub:focus-within .mh__submenu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Desktop submenu links: real padding so text doesn't touch the box edges */
.mh__submenu a {
  display: block;
  padding: 10px 20px;
  font-weight: 500; font-size: 0.95rem;
  color: var(--ink); text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.mh__submenu a:hover { color: var(--signal); background: rgba(26,31,43,.03); }

.mh {
  position: sticky !important; top: 0 !important; z-index: 1000 !important;
  background: var(--paper); border-bottom: 1px solid var(--hair);
  font-family: var(--body); width: 100%; align-self: flex-start;
}
.mh__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 32px; max-width: 1280px; margin: 0 auto; padding: 12px 32px;
}
.mh__logo-link { display: inline-flex; align-items: center; flex-shrink: 0; justify-self: start; }
.mh__logo { height: 36px; width: auto; min-width: 120px; display: block; }
.mh__nav { display: contents; }
.mh__menu { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; justify-self: center; }
.mh__menu a { font-weight: 500; font-size: 0.95rem; color: var(--ink); text-decoration: none; white-space: nowrap; transition: color .2s ease; }

/* Menue-Farben (07.08.2026). Im Ruhezustand tritt die Navigation zurueck,
   damit die Ueberschrift die erste Stimme im Bild ist. Sobald der Zeiger
   ins Menue kommt, stehen ALLE Punkte in Tinte, der gezeigte in Blau: so
   sieht man die Auswahl UND behaelt den Ueberblick ueber den Rest.
   Nur mit Zeiger: auf Touch gibt es kein Hover, dort bliebe die
   Navigation sonst dauerhaft im leisen Zustand. --grey liegt mit 8.89:1
   ohnehin weit ueber der Anforderung, ist also kein Lesbarkeitsproblem. */
/* Ausloeser ist die ganze Kopfzeile, nicht die Linkliste: Wer mit der Maus
   in den Bereich faehrt, hat das Menue im Blick, lange bevor er einen Punkt
   trifft. Mit .mh__menu:hover sprang die Farbe erst beim Ueberfahren eines
   Links, was wie ein Fehler wirkte (korrigiert 07.08.2026).
   Unter 821px klappt die Navigation in die Schublade; dort und auf allen
   Geraeten ohne Zeiger steht sie durchgehend in Tinte. */
@media (hover: hover) and (min-width: 821px) {
  .mh__menu a, .mh__sub-toggle { color: var(--grey); }
  .mh:hover .mh__menu a, .mh:focus-within .mh__menu a,
  .mh:hover .mh__sub-toggle, .mh:focus-within .mh__sub-toggle { color: var(--ink); }
}
/* SPEZIFITAET BEACHTEN (Fehler vom 07.08.2026): Die Tinten-Regel oben
   wiegt mit .mh:hover .mh__menu a (0,3,1). Ein schlichtes
   .mh__menu a:hover waere nur (0,2,1) und verloere, denn wer einen Link
   beruehrt, beruehrt auch die Kopfzeile. Blau kam deshalb nie an. Mit
   dem vorangestellten .mh steht es bei (0,3,1) gleichauf und gewinnt
   ueber die Reihenfolge. */
.mh .mh__menu a:hover, .mh .mh__menu a:focus-visible,
.mh .mh__sub-toggle:hover, .mh .mh__sub-toggle:focus-visible { color: var(--signal); }
.mh .mh__cta {
  font-family: var(--display); font-weight: 600; font-size: 0.9rem;
  padding: 10px 20px; border-radius: var(--r-s);
  text-decoration: none !important; white-space: nowrap; justify-self: end;
  transition: background .2s ease, transform .2s ease;

  /* Kontur statt Flaeche: der Kopf bleibt ruhiger, der Button ist
     trotzdem eindeutig die Handlung. Blau auf Paper liegt bei 5,47:1. */
  background: transparent;
  border: 1px solid var(--signal);
  color: var(--signal);
}
.mh .mh__cta:hover { background: var(--signal); color: var(--paper); transform: translateY(-1px); }
.mh__sub-toggle {
  font: inherit; font-weight: 500; font-size: 0.95rem;
  color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: 8px 0; display: inline-flex; align-items: center; gap: 4px;
}
.mh__sub-toggle::after { content: "▾"; font-size: 0.7em; }
.mh__checkbox { display: none !important; }
.mh__burger { display: none; }

/* ---------- Mobile: fullscreen overlay ---------- */
@media (max-width: 820px) {
  .mh__inner { grid-template-columns: auto 1fr !important; padding: 12px 20px !important; }
  .mh__logo-link { justify-self: start !important; position: relative; z-index: 9999; }
  .mh__burger {
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    gap: 5px !important; width: 40px !important; height: 40px !important; padding: 8px !important;
    cursor: pointer !important; position: relative !important; z-index: 9999 !important; justify-self: end !important;
  }
  .mh__burger span { display: block !important; width: 100% !important; height: 2px !important; background-color: var(--ink, #1A1F2B) !important; transition: transform .3s, opacity .3s; }
  .mh__nav {
    box-sizing: border-box; /* keeps the overlay centered (padding counts inside the 100% width) */
    display: flex !important; position: fixed !important; inset: 0; width: 100%; height: 100vh;
    background: var(--paper, #FBFAF8) !important; flex-direction: column;
    align-items: center; justify-content: flex-start; gap: 32px; padding: 120px 20px 40px;
    overflow-y: auto; transform: translateX(100%);
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 9998 !important;
  }
  .mh__menu { flex-direction: column; align-items: center; gap: 36px; width: 100%; }
  .mh__menu a { font-size: 1.15rem; }
  .mh__has-sub { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .mh__sub-toggle { font-size: 1.15rem !important; justify-content: center; padding: 0; pointer-events: auto !important; }
  .mh__sub-toggle::after { display: inline-block !important; transition: transform 0.3s ease; }

  /* Arrow rotates when open (JS toggles .is-open) */
  .mh__has-sub.is-open .mh__sub-toggle::after { transform: rotate(180deg); }

  /* Closed state on mobile (dropdown collapsed) */
  .mh__submenu {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    justify-content: center !important; gap: 14px; position: static !important;
    opacity: 0 !important; visibility: hidden !important; max-height: 0 !important; overflow: hidden !important;
    transform: none !important; left: auto !important; box-shadow: none !important; border: 0 !important; padding: 0 !important;
    min-width: 0 !important; width: 100% !important; text-align: center !important;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease, visibility 0.3s;
  }
  .mh__submenu li { width: 100% !important; text-align: center !important; }

  /* Open state: JS toggles .is-open on tap (reliable on iOS, where buttons
     receive click but not focus) */
  .mh__has-sub.is-open .mh__submenu {
    opacity: 1 !important; visibility: visible !important;
    max-height: 400px !important; padding-top: 14px !important;
  }

  .mh__submenu a {
    display: block !important; font-size: 1.05rem !important; color: var(--grey) !important;
    white-space: normal !important; line-height: 1.4; padding: 8px 0 !important;
    text-align: center !important; width: 100% !important;
  }
  .mh__submenu a:hover { background: transparent !important; }

  .mh__checkbox:checked ~ .mh__nav { transform: translateX(0); }
  .mh__checkbox:checked ~ .mh__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mh__checkbox:checked ~ .mh__burger span:nth-child(2) { opacity: 0; }
  .mh__checkbox:checked ~ .mh__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* mobile-menu-polish start */
@media (max-width: 820px) {
  /* Menue senkrecht mittig. "safe center" faellt auf oben zurueck, sobald der
     Inhalt hoeher wird als das Fenster (aufgeklapptes Untermenue) -- sonst
     waere der obere Teil nicht mehr erreichbar. */
  .mh__nav { padding-top: 100px !important; justify-content: center !important; justify-content: safe center !important; }
  .mh__menu { gap: 40px; }
  .mh__menu a, .mh__sub-toggle { font-size: 1.4rem !important; }
  .mh__submenu a { font-size: 1.05rem !important; }
}
/* mobile-menu-polish end */

/* burger-fade start */
@media (max-width: 820px) {
  .mh__nav { transform: none !important; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease !important; }
  .mh__checkbox:checked ~ .mh__nav { transform: none !important; opacity: 1; visibility: visible; }
}
/* burger-fade end */

/* burger-g-fix start */
@media (max-width: 820px) {
  .mh__sub-toggle { line-height: 1.5 !important; overflow: visible; padding-bottom: 6px !important; }
  .mh__submenu { margin-top: 4px; }
}
/* burger-g-fix end *//* ── CTA als Kontur ── */
/* Blaue Kontur statt gefuellter dunkler Flaeche. Die Basisregel im Kopf ist
   .mh .mh__cta, deshalb hier dieselbe Tiefe plus ein Schritt, sonst gewinnt
   sie. Blau auf Paper liegt bei 5,47:1 und besteht AA fuer normalen Text. */
.mh .mh__inner .mh__cta {
  background: transparent;
  border: 1px solid var(--signal);
  color: var(--signal);
  transition: background-color .3s var(--ease-premium), color .3s var(--ease-premium);
}
.mh .mh__inner .mh__cta:hover,
.mh .mh__inner .mh__cta:focus-visible {
  background: var(--signal);
  color: var(--paper);
  transform: none;
}


/* ── Ankuendigungsleiste ueber der Kopfzeile ──────────────────────────── */
.newsbar {
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1001;
}
.newsbar__in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 11px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 0.92rem;
  line-height: 1.3;
}
.newsbar__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--signal-soft);
}
@keyframes newsbarPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
.newsbar__title { font-weight: 600; color: var(--paper); }
.newsbar__title--short { display: none; }
.newsbar__sep, .newsbar__meta { color: rgba(248, 249, 255, 0.55); }
.newsbar__sep { opacity: 0.6; }
.newsbar__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--signal-soft);
  text-decoration: none;
  white-space: nowrap;
}
.newsbar__arrow { transition: transform 0.3s var(--ease-premium); }
.newsbar__link:hover .newsbar__arrow { transform: translateX(4px); }
.newsbar__link:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--r-s); }
.newsbar__linktext--short { display: none; }

@media (max-width: 1100px) {
  .newsbar__title:not(.newsbar__title--short), .newsbar__sep, .newsbar__meta { display: none; }
  .newsbar__title--short { display: inline; }
}
@media (max-width: 700px) {
  /* Wie bei Radyant: links Punkt, Label und Ort, rechts nur der Pfeil */
  .newsbar__in {
    justify-content: space-between;
    /* 38px: dieselbe Kante wie Logo und Burger in der Kopfzeile */
    padding: 15px 38px;
    gap: 10px;
    font-size: 0.86rem;
  }
  .newsbar__status { font-size: 0.76rem; }
  .newsbar__title--short {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .newsbar__linktext { display: none; }
  .newsbar__link { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
}


/* Footer-Logo: die dunkle SVG wird invertiert weiss ausgegeben */
.site-footer .foot-logo {
  display: block;
  width: clamp(150px, 16vw, 186px);
  height: auto;
  filter: brightness(0) invert(1);
}
.site-footer .foot-brand { margin-bottom: 14px; }


/* Die ganze Leiste ist anklickbar, ohne verschachtelte Links.
   Der Link spannt sich als Pseudo-Element ueber die volle Breite. */
.newsbar__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.newsbar__in > *:not(.newsbar__link) { position: relative; z-index: 2; pointer-events: none; }
.newsbar { cursor: pointer; }

/* Kontrast auf dunklem Grund */
.newsbar__sep, .newsbar__meta { color: rgba(248, 249, 255, 0.72); }
.newsbar__title { color: #fff; }
.newsbar__status { color: #8fa8ff; }
.newsbar__link { color: #8fa8ff; }
.newsbar:hover .newsbar__link { color: #fff; }

@media (max-width: 460px) {
  /* Auf schmalen Schirmen faellt das Label weg, damit "Amberg" nicht
     unter die Ellipse rutscht. Der Ort ist die relevante Information. */
  .newsbar__status { display: none; }
  .newsbar__in { font-size: 0.84rem; }
}


/* ── Eine Achse fuer Kopfzeile, Ankuendigungsleiste und Seiteninhalt ────
   Der Inhalt liegt in einem 1080er Kasten mit 32px Innenabstand. Die
   Kopfzeile lief bisher in einem breiteren Kasten, das Logo stand dadurch
   auf dem Desktop 93px weiter links als Hero, Referenzen und Footer.
   Auf Mobil war es umgekehrt: Logo bei 38px, Inhalt bei 32px. */
.mh__inner {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.newsbar__in { max-width: 1080px; padding-left: 32px; padding-right: 32px; }

@media (max-width: 820px) {
  /* Die Bestandsregel setzt padding mit !important, deshalb hier ebenso.
     18px Kopfzeilen-Rand plus 14px ergeben die 32px des Inhalts. */
  .mh__inner { padding: 12px 14px !important; }
}
@media (max-width: 700px) {
  .newsbar__in { padding-left: 32px; padding-right: 32px; }
}

/* ── Sticky-Kopfzeile nach der Template-Part-Zusammenlegung (01.08.2026) ──
   Der Part rendert <div class="wp-block-template-part"> um <header class="mh">.
   Ein sticky-Element klebt nur innerhalb seines Elternelements, und dieser
   Wrapper ist genau so hoch wie die Kopfzeile selbst: Klebeweg null, also
   scrollt die Kopfzeile weg. display:contents nimmt den Wrapper aus dem
   Box-Baum, damit ist <header> wieder direktes Kind von <body> und klebt
   wie vor der Zusammenlegung. Gilt ebenso fuer den Footer-Part, dort ohne
   Nebenwirkung, weil der Wrapper auch dort nur eine Huelle ist. */
body > div.wp-block-template-part { display: contents; }


/* @section vorher-nachher
   @owns    .bacmp__handle, .bacmp, .bacmp__intro, .bacmp__frame, .bacmp__img--after, .bacmp__img--before */
/* ===== Before/After Slider (.bacmp) ===== */
.bacmp{
  margin:48px 0 0;
  font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --bacmp-primary:#003ec7;
  --bacmp-outline:#c3c5d9;
  --bacmp-variant:#434656;
}
.bacmp *{box-sizing:border-box;}

.bacmp__intro{
  margin:0 0 16px;
  font-size:18px;line-height:1.7;
  color:var(--bacmp-variant);
}

/* Frame height follows the AFTER image's natural ratio instead of a fixed guess */
.bacmp__frame{
  position:relative;
  width:100%;
  overflow:hidden;
  border:1px solid var(--bacmp-outline);
  background:#fff;
  user-select:none;
  touch-action:none;
  line-height:0;
}

/* The after image defines the frame's height (normal flow, not absolute) */
.bacmp__img--after{
  position:relative;
  width:100%;height:auto;max-width:none;
  display:block;margin:0;
  pointer-events:none;
}

/* The before image overlays it at the same size, clipped from the right */
.bacmp__img--before{
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:top left;
  display:block;margin:0;
  pointer-events:none;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}

.bacmp__divider{
  position:absolute;top:0;bottom:0;
  left:var(--pos);
  width:2px;background:var(--bacmp-primary);
  transform:translateX(-1px);
  pointer-events:none;
}

.bacmp__handle{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:var(--r-pill);
  background:var(--bacmp-primary);
  display:flex;align-items:center;justify-content:center;
  gap:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
/* Arrows drawn in pure CSS - no SVG that a sanitizer can strip */
.bacmp__handle::before,
.bacmp__handle::after{
  content:"";
  width:0;height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
.bacmp__handle::before{border-right:7px solid #fff;}
.bacmp__handle::after{border-left:7px solid #fff;}

.bacmp__label{
  position:absolute;bottom:16px;
  padding:4px 10px;
  font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:rgba(11,28,48,.72);
  pointer-events:none;
}
.bacmp__label--before{left:16px;}
.bacmp__label--after{right:16px;}

.bacmp__range{
  position:absolute;inset:0;
  width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:col-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
}

.bacmp__caption{
  margin-top:12px;
  font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--bacmp-variant);
}


/* @section case-study
   @owns    .post-content, .parent-pageid-351, .cs-shot, .cite-text, .narrow, .cite-avatar */
/* ==========================================================================
   THE B2B ANSWER — CASE STUDY
   Scoped to the reference / case-study template. Extends the .bklp core.
   Sections: Layout width · Hero facts · Post content · Testimonials · Responsive
   ========================================================================== */

/* --- LAYOUT WIDTH ----------------------------------------------------------
   Case study reads a touch wider than the global .narrow (680px).
   Scoped to case-study regions only, so other pages are untouched. */
/* Nur die Referenz-Detailseiten. Vorher galt die Breite global und hat
   auf Blogbeitraegen die Titelspalte gegen die Textspalte verschoben. */
body.parent-pageid-351 .bklp .hero-interior .narrow,
body.parent-pageid-351 .bklp .post-content.narrow {
  max-width: 930px !important;
}

/* --- HERO FACTS (aligned 2-column grid) ------------------------------------
   Kunde | Standort  ·  Plattform | Ergebnis */
.bklp .referenz-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 56px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--hair);
}
.bklp .fact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bklp .fact-label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}
.bklp .fact-value {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
  max-width: 34ch;
}

/* --- POST CONTENT ---------------------------------------------------------- */
.bklp .post-content {
  margin-top: 48px;
}
.bklp .post-content h2 {
  margin-top: 64px;
  margin-bottom: 24px;
}
.bklp .post-content p {
  margin-bottom: 24px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
}
.bklp .post-content ul {
  margin-bottom: 32px;
  padding-left: 24px;
  font-size: 1.05rem;
}
.bklp .post-content li {
  margin-bottom: 12px;
  line-height: 1.6;
}
.bklp .post-content strong {
  font-weight: 600;
}

/* --- TESTIMONIAL QUOTES (portrait + content, alternating sides) ------------
   Layout per quote:  [ portrait ] | [ name · role · " · quote ]
   display:contents flattens <cite> so the photo, name/role and quote sit on
   one grid. Even-numbered quotes flip the portrait to the right.

   High specificity + !important on the portrait so any leftover old
   .cite-avatar rule (e.g. the 56px circle) can't shrink it.

   NOTE: uses the blue ornament instead of inline marks — remove the „ and “
   characters from each quote's text in Etch so the mark isn't doubled. */
.bklp .post-content blockquote {
  display: grid;
  grid-template-columns: 260px 1fr;
  column-gap: 44px;
  margin: 56px 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.bklp .post-content blockquote + blockquote {
  margin-top: 64px;
}

/* Flatten <cite> so its <img> and <div> become grid items */
.bklp .post-content blockquote cite {
  display: contents !important;
  font-style: normal;
}

/* Portrait (spans both content rows) */
.bklp .post-content blockquote .cite-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 100% !important;
  max-width: 260px !important;
  height: auto !important;
  border-radius: var(--r-m);
}

/* Name + role (top of content column) */
.bklp .post-content blockquote .cite-text {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 20px;
}
.bklp .post-content blockquote .cite-text strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bklp .post-content blockquote .cite-text span {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--grey);
  max-width: 34ch;
}

/* Quote text with ornament above */
.bklp .post-content blockquote p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.bklp .post-content blockquote p::before {
  content: "\201C";              /* “ — opening quote ornament */
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 0.6;
  color: var(--signal);
  margin: 4px 0 14px;
}
.bklp .post-content blockquote p::after {
  content: none;
}

/* Alternate: even-numbered quotes put the portrait on the right */
.bklp .post-content blockquote:nth-of-type(even) {
  grid-template-columns: 1fr 260px;
}
.bklp .post-content blockquote:nth-of-type(even) .cite-avatar {
  grid-column: 2;
}
.bklp .post-content blockquote:nth-of-type(even) .cite-text,
.bklp .post-content blockquote:nth-of-type(even) p {
  grid-column: 1;
}

/* --- RESPONSIVE ------------------------------------------------------------ */
@media (max-width: 820px) {
  body.parent-pageid-351 .bklp .hero-interior .narrow,
  body.parent-pageid-351 .bklp .post-content.narrow {
    max-width: 100% !important;
  }
  .bklp .referenz-facts {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Quotes stack: portrait · name/role · quote */
  .bklp .post-content blockquote,
  .bklp .post-content blockquote:nth-of-type(even) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 18px;
    margin: 48px 0;
  }
  .bklp .post-content blockquote .cite-avatar,
  .bklp .post-content blockquote:nth-of-type(even) .cite-avatar {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    max-width: 200px !important;
  }
  .bklp .post-content blockquote .cite-text,
  .bklp .post-content blockquote:nth-of-type(even) .cite-text {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 8px;
  }
  .bklp .post-content blockquote p,
  .bklp .post-content blockquote:nth-of-type(even) p {
    grid-column: 1;
    grid-row: 3;
  }
  .bklp .post-content blockquote .cite-text strong { font-size: 1.25rem; }
  .bklp .post-content blockquote p { font-size: 1.15rem; }
}

.bklp .fact-label {
  font-family: var(--display); font-size: 0.88rem; font-weight: 600;
  letter-spacing: 0.01em; text-transform: none;
}


/* ── Case Study: Projekt-Screenshot unter dem Hero (01.08.2026) ────────── */
body.parent-pageid-351 .cs-shot {
  margin: clamp(16px, 2vw, 26px) auto clamp(48px, 6vw, 80px);
  width: 100%;
  max-width: 1080px;
  padding-inline: clamp(20px, 5vw, 32px);
}
body.parent-pageid-351 .cs-shot img {
  display: block;
  width: 100%;
  height: auto;
  /* Weisser Passepartout-Rahmen, aussen eine Haarlinie.
     box-shadow nur als 1px-Ring, kein Schlagschatten. */
  border: clamp(8px, 1vw, 12px) solid #fff;
  border-radius: var(--r-m);
  box-shadow: 0 0 0 1px var(--hair);
  background: #fff;
}

/* Lesespalte breiter, damit Hero und Screenshot naeher beieinander liegen.
   Der Screenshot laeuft auf 1080px, der Text auf 960px. */
body.parent-pageid-351 .wrap.narrow { max-width: 930px; }

/* Fakten-Labels in Satzschreibung, passend zur Schriftregel */
body.parent-pageid-351 .fact-label {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.88rem;
}


/* Hero-Unterkante enger an den Screenshot ruecken */
body.parent-pageid-351 .hero-interior { padding-bottom: clamp(20px, 2.6vw, 32px); }


/* ── Screenshot verlinkt auf die Kundenwebsite ────────────────────────── */
body.parent-pageid-351 .cs-shot a {
  display: block;
  position: relative;
  border-radius: var(--r-m);
  text-decoration: none;
}
/* Abdunkeln nur ueber dem Bild, nicht ueber dem weissen Rahmen */
body.parent-pageid-351 .cs-shot a::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 1vw, 12px);
  border-radius: calc(var(--r-m) - 4px);
  background: rgba(11, 28, 48, 0.34);
  opacity: 0;
  transition: opacity 0.3s var(--ease-premium);
  pointer-events: none;
}
body.parent-pageid-351 .cs-shot a::after {
  content: "Website ansehen \2197\FE0E";
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 4vw, 48px);
  transform: translate(-50%, 10px);
  padding: 13px 24px;
  /* border-radius entfaellt: @section schaltflaechen-radius setzt var(--r-s) !important. */
  background: var(--signal);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
  pointer-events: none;
}
body.parent-pageid-351 .cs-shot a:hover::before,
body.parent-pageid-351 .cs-shot a:focus-visible::before { opacity: 1; }
body.parent-pageid-351 .cs-shot a:hover::after,
body.parent-pageid-351 .cs-shot a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
body.parent-pageid-351 .cs-shot a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }


/* ── /referenzen/ (Seite 351) ─────────────────────────────────────────── */
/* Der 4-Zeilen-Clamp schnitt Saetze mitten im Wort ab */
body.page-id-351 .bklp .ref-card p {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
/* Die frueher hier gesetzte Dreispaltigkeit ist entfallen.
   Das Raster steuert jetzt "Main": zwei Spalten, bei ungerader Anzahl
   laeuft die erste Karte ueber die volle Breite. */


/* @section blog-filter
   @owns    .bc-card, .bc-filter-btn, .bc-featured, .bc-head, .bc-pill, .bc-body */
/* ══ Blog: Kategoriefilter und Karten ═══════════════════════════════
   Kein Foto vorhanden, deshalb traegt ein farbiger Kopf den Titel.
   Farbe je Kategorie aus dem bestehenden System, keine neuen Werte.
   Die Kategorie kommt als JSON in data-cat; ein Block-Skript leitet
   daraus data-slug und den Pill-Text ab (Etch kann keine Einzelfelder
   der Kategorie interpolieren, nur das ganze Objekt). */

/* ── Filterzeile ── */
:is(.bklp, body) .bc-filter {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 32px;
}
:is(.bklp, body) .bc-filter-btn {
  font-family: var(--display); font-size: .9rem; font-weight: 600;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--hair); border-radius: var(--r-pill);
  padding: 9px 18px; cursor: pointer;
  transition: background-color .3s var(--ease-premium), border-color .3s var(--ease-premium), color .3s var(--ease-premium);
}
:is(.bklp, body) .bc-filter-btn:hover { border-color: var(--ink); }
:is(.bklp, body) .bc-filter-btn.is-active {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
:is(.bklp, body) .bc-filter-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ── Karte ── */
:is(.bklp, body) .bc-card {
  padding: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hair);
}
:is(.bklp, body) .bc-head {
  padding: 30px 28px;
  background: var(--ink);
  min-height: 148px;
  display: flex; align-items: flex-end;
}
:is(.bklp, body) .bc-head :is(h2, h3) {
  margin: 0; color: var(--paper);
  font-size: 1.2rem; line-height: 1.3;
}
/* Eine Flaechenfarbe, drei Pill-Farben.
   Alle Koepfe in Navy: das ist die Grundflaeche des Systems (Logo-Band,
   Schluss-CTA, Footer). Signalblau bleibt bewusst frei, es ist fuer CTAs
   und Beleg-Momente reserviert und wuerde als Flaeche auf acht Karten
   seine Bedeutung verlieren.
   Die Kategorie traegt allein die Pill: kleine Flaeche, sofort erkennbar,
   und die Seite bleibt ruhig. */
:is(.bklp, body) .bc-head { background: var(--ink); }

:is(.bklp, body) .bc-card[data-slug="ki-suche"] .bc-pill            { background: var(--signal); color: var(--paper); }
:is(.bklp, body) .bc-card[data-slug="geo-seo-anleitungen"] .bc-pill { background: #0a7d55; color: var(--paper); }
:is(.bklp, body) .bc-card[data-slug="einblicke-vortraege"] .bc-pill { background: #FBBC05; color: var(--ink); }

/* Filterknoepfe bekommen denselben Farbcode als Punkt, damit die
   Zuordnung schon vor dem Klick sichtbar ist. */
:is(.bklp, body) .bc-filter-btn[data-filter]:not([data-filter="alle"])::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
}
:is(.bklp, body) .bc-filter-btn[data-filter="ki-suche"]::before            { background: var(--signal); }
:is(.bklp, body) .bc-filter-btn[data-filter="geo-seo-anleitungen"]::before { background: #0a7d55; }
:is(.bklp, body) .bc-filter-btn[data-filter="einblicke-vortraege"]::before { background: #FBBC05; }

:is(.bklp, body) .bc-body {
  display: flex; flex-direction: column;
  padding: 24px 28px 28px;
  flex: 1;
}
:is(.bklp, body) .bc-pill {
  align-self: flex-start;
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper); background: var(--ink);
  border-radius: var(--r-pill); padding: 6px 14px;
  margin-bottom: 14px;
}
:is(.bklp, body) .bc-body p { color: var(--grey); margin-bottom: 24px; }
:is(.bklp, body) .bc-body .ref-card-action { margin-top: auto; }
:is(.bklp, body) .bc-card .btn-ghost { background: transparent; color: var(--ink) !important; border-color: var(--hair); }
:is(.bklp, body) .bc-card .btn-ghost:hover { background: var(--signal); color: #fff !important; border-color: var(--signal); }
:is(.bklp, body) .bc-card:hover { border-color: var(--ink); box-shadow: 0 10px 30px rgba(11,28,48,.08); }

@media (max-width: 560px) {
  :is(.bklp, body) .bc-filter { gap: 8px; }
  :is(.bklp, body) .bc-filter-btn { font-size: .85rem; padding: 8px 14px; }
  :is(.bklp, body) .bc-head { min-height: 120px; padding: 24px 22px; }
  :is(.bklp, body) .bc-body { padding: 20px 22px 24px; }
}
/* ── Hero ── */
/* Zentrierte Komposition. Die linke Spalte liess rund 45% der Breite
   leer, das las sich als Luecke statt als Weissraum. */
:is(.bklp, body) .bc-intro { text-align: center; }
:is(.bklp, body) .bc-intro h1 {
  max-width: 32ch;
  margin-left: auto; margin-right: auto;
}
:is(.bklp, body) .bc-intro p { margin-left: auto; margin-right: auto; }
:is(.bklp, body) .bc-filter { justify-content: center; }

/* Neuester Beitrag als Pille: ein echter Titel statt einer Kategorie,
   das ist der eigentliche Einladungs-Effekt. */
:is(.bklp, body) .bc-featured-wrap { margin: 0 0 26px; }
:is(.bklp, body) .bc-featured {
  display: inline-flex; align-items: center; gap: 10px;
  max-width: min(620px, calc(100vw - 76px));
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--hair); border-radius: var(--r-pill);
  background: var(--paper);
  font-family: var(--display); font-size: .88rem;
  color: var(--ink); text-decoration: none;
  text-align: left;
  transition: border-color .3s var(--ease-premium);
}
:is(.bklp, body) .bc-featured:hover { border-color: var(--ink); }
:is(.bklp, body) .bc-featured:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
:is(.bklp, body) .bc-featured-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grey);
}

/* Kennzeichnung "Grundlagenbeitrag" in der Pille. Der Punkt daneben faellt
   weg, sobald die Kennzeichnung steht: zwei Marker vor demselben Titel
   waeren einer zu viel. Welcher Beitrag hier landet, entscheidet das
   Schlagwort "grundlagenbeitrag", nicht das Template. */
:is(.bklp, body) .bc-featured-flag {
  flex: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
  padding-right: 12px;
  border-right: 1px solid var(--hair);
}
:is(.bklp, body) .bc-featured:has(.bc-featured-flag) .bc-featured-dot { display: none; }
:is(.bklp, body) .bc-featured[data-slug="ki-suche"] .bc-featured-dot            { background: var(--signal); }
:is(.bklp, body) .bc-featured[data-slug="geo-seo-anleitungen"] .bc-featured-dot { background: #0a7d55; }
:is(.bklp, body) .bc-featured[data-slug="einblicke-vortraege"] .bc-featured-dot { background: #FBBC05; }
:is(.bklp, body) .bc-featured-title {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is(.bklp, body) .bc-featured-cta {
  flex: none;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-pill); padding: 7px 14px;
  font-weight: 600;
}

@media (width < 800px) {
  /* Auf dem Telefon passten Etikett, Titel und Schaltflaeche nicht mehr
     nebeneinander: der Titel wurde auf "K…" gekuerzt (26px Kasten fuer
     287px Text, gemessen 07.08.2026). Die Leiste bricht deshalb um und
     wird zur Karte; der Titel darf jetzt ueber mehrere Zeilen laufen. */
  :is(.bklp, body) .bc-featured {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
    border-radius: var(--r-m);
    padding: 14px 16px;
    font-size: .86rem;
  }
  :is(.bklp, body) .bc-featured-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  :is(.bklp, body) .bc-featured-cta { padding: 8px 14px; }
  /* Der senkrechte Strich zwischen Etikett und Titel ergibt liegend
     keinen Sinn mehr. */
  :is(.bklp, body) .bc-featured-dot { display: none; }
  :is(.bklp, body) .bc-intro h1 { max-width: none; }
}
/* @section blog-breite
   @owns    .bc-wrap
   @seealso 01-fundament/layout-container
   Warum: .wrap traegt "margin: 0 auto". In einem Spalten-Flexcontainer
          sticht ein automatischer Rand die Streckung aus, das Element wird
          damit zum Schrumpf-auf-Inhalt. Die min-content-Breite von .bc-wrap
          liegt bei 1344px, weil ul.ref-grid ein max-width: 1280px mitbringt.
          Folge: zwischen rund 830 und 1144px Fensterbreite blieb der Block
          auf 1080px stehen und wurde von "overflow-x: hidden" rechts
          abgeschnitten, ohne dass die Seite waagerecht scrollte. Betraf iPad
          im Hochformat. width: 100% bindet ihn wieder an den Elternblock,
          max-width: 1080px aus @section layout-container deckelt weiter.
          Die Kategorie-Archive verhielten sich immer schon so, nur der Blog
          nicht. Gemessen 02.08.2026 ueber 390 bis 1440px. */
:is(.bklp, body) .bc-wrap { width: 100%; }

/* ── Mobile Raender ── */
/* Inhalt auf dieselbe Kante wie Logo und Burger legen.
   Kopf: 18px Sektionsrand + 20px .mh__inner = 38px.
   Blog: 18px Sektionsrand + 32px .wrap = 50px. Also .wrap mobil auf 20px. */
@media (width < 800px) {
  :is(.bklp, body) .bc-wrap { padding-left: 20px; padding-right: 20px; min-width: 0; }
}
/* ── Klickbare Karte ── */
/* Muster "stretched link": der Titel ist der echte Link, sein ::after
   spannt sich ueber die ganze Karte. Dadurch ist die Karte komplett
   klickbar, es bleibt aber genau EIN Tab-Stopp, und der vorgelesene
   Linkname ist der Beitragstitel und nicht "Weiterlesen". */
:is(.bklp, body) .bc-card { position: relative; }
:is(.bklp, body) .bc-card-link {
  color: inherit; text-decoration: none;
}
:is(.bklp, body) .bc-card-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* Fokus sichtbar an der ganzen Karte, nicht nur an der Zeile im dunklen Kopf. */
:is(.bklp, body) .bc-card-link:focus-visible { outline: none; }
:is(.bklp, body) .bc-card:has(.bc-card-link:focus-visible) {
  outline: 2px solid var(--signal); outline-offset: 3px;
}
/* Alles Interaktive muss ueber dem Overlay liegen. Wichtig fuer
   "Anmelden" bei Vortraegen, das auf ein anderes Ziel zeigt. */
:is(.bklp, body) .bc-card .ref-card-action { position: relative; z-index: 2; }
/* Ruhiger Hover, kein Anheben: Praezision statt Lift. */
:is(.bklp, body) .bc-card { transition: border-color .3s var(--ease-premium); }
:is(.bklp, body) .bc-card:hover { border-color: var(--grey); }

/* Statuszeile nur fuer Screenreader. */
:is(.bklp, body) .bc-status {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* ── Archiv ── */
/* Rueckweg auf die Uebersicht: zentriert wie der Rest der Spalte und mit
   eigenem Abstand, sonst klebt er am letzten Kartenrand. */
:is(.bklp, body) .arch-back {
  margin: 56px 0 0;
  text-align: center;
}


/* @section beitragsseite
   @owns    .single-post, .pm-pill-cat, .toc-list, .post-layout, .pm-pill, .toc */
/* ══ Beitragsseite ══ */

/* ── Pillen im Kopf ── */
:is(.bklp, body) .pm-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 24px;
}
:is(.bklp, body) .pm-pill {
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  text-decoration: none;
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--hair); background: var(--paper); color: var(--ink);
  transition: border-color .3s var(--ease-premium);
}
:is(.bklp, body) .pm-pill:hover { border-color: var(--ink); }
:is(.bklp, body) .pm-pill:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
/* Kategorie in ihrer Farbe, wie in der Uebersicht und im Archiv. */
:is(.bklp, body) .pm-pill-cat[data-slug] { border-color: transparent; color: var(--paper); }
:is(.bklp, body) .pm-pill-cat[data-slug="ki-suche"]            { background: var(--signal); }
:is(.bklp, body) .pm-pill-cat[data-slug="geo-seo-anleitungen"] { background: #0a7d55; }
:is(.bklp, body) .pm-pill-cat[data-slug="einblicke-vortraege"] { background: #FBBC05; color: var(--ink); }
:is(.bklp, body) .pm-pill-cat[data-slug]:hover { border-color: var(--ink); }

/* ── Inhaltsverzeichnis ── */
/* Einspaltig als Grundzustand. Die Textspalte behaelt ihre 760px und
   bleibt damit exakt unter der Ueberschrift. */
:is(.bklp, body) .post-layout { margin-bottom: 0; padding-left: 0; padding-right: 0; }
:is(.bklp, body) .toc {
  width: calc(100% - 64px); max-width: 696px; margin: 0 auto 48px;
  border: 1px solid var(--hair); border-radius: var(--r-m);
  background: var(--paper); padding: 24px 28px;
}
:is(.bklp, body) .toc-title {
  margin: 0 0 14px;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
}
:is(.bklp, body) .toc-list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
:is(.bklp, body) .toc-item { margin: 0 0 9px; line-height: 1.45; }
:is(.bklp, body) .toc-item:last-child { margin-bottom: 0; }
:is(.bklp, body) .toc-h3 { padding-left: 18px; }
:is(.bklp, body) .toc-list a {
  text-decoration: none; color: var(--grey); font-size: .92rem;
  border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px;
  display: inline-block;
  transition: color .25s var(--ease-premium), border-color .25s var(--ease-premium);
}
:is(.bklp, body) .toc-list a:hover { color: var(--ink); }
:is(.bklp, body) .toc-list a.is-current { color: var(--ink); border-left-color: var(--signal); }
:is(.bklp, body) .toc-list a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Sprungziele duerfen nicht unter dem klebenden Kopf landen (96px). */
:is(.bklp, body) .post-content :is(h2, h3) { scroll-margin-top: 116px; }

/* Ab genug Breite wandert das Verzeichnis in den linken Rand und laeuft mit.
   1fr / 760 / 1fr haelt die Textspalte weiterhin mittig, also buendig mit
   der Ueberschrift darueber. */
/* Ab genug Breite wandert das Verzeichnis in den linken Rand und laeuft mit.
   Der Container laeuft dabei ueber die volle Breite (max-width: none), nur
   so zentriert 1fr/760/1fr die Textspalte auf exakt derselben Achse wie
   .wrap.narrow im Hero. Mit einer eigenen Maximalbreite waeren es zwei
   verschiedene Bezugsrahmen und die Spalten liefen auseinander. */
@media (width >= 1520px) {
  :is(.bklp, body) .post-layout {
    max-width: none;
    padding-left: 32px; padding-right: 32px;
    display: grid;
    grid-template-columns: 1fr 946px 1fr;
    align-items: start;
  }
  :is(.bklp, body) .post-layout.ohne-toc { display: block; }

  /* Autorenkarte in Spalte 3 (07.08.2026). Das Raster hat dort schon eine
     freie Spalte, das Inhaltsverzeichnis klebt spiegelbildlich in Spalte 1.
     Im Markup steht die Karte NACH dem Beitragstext, damit die Lesereihen-
     folge stimmt; hier setzt sie das Raster an ihren Platz. Sichtbar wird
     sie erst hier, weil es die dritte Spalte darunter gar nicht gibt. */
  :is(.bklp, body) .post-autor {
    display: block;
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    width: 244px;
    margin-left: 40px;
    position: sticky;
    top: 148px;
  }

  :is(.bklp, body) .toc {
    grid-column: 1;
    justify-self: end;
    width: 240px; max-width: none;
    margin: 0 40px 0 0;
    position: sticky; top: 148px;
    max-height: calc(100vh - 140px); overflow-y: auto;
    background: transparent; border: 0; border-left: 1px solid var(--hair);
    border-radius: 0; padding: 4px 0 4px 20px;
  }
  :is(.bklp, body) .post-layout .post-content { grid-column: 2; margin: 0; }
}

/* Autorenkarte nur dort, wo es die dritte Rasterspalte gibt. Als globales
   display:none ging es nicht: die Regel steht NACH der Media-Query, hat
   dieselbe Spezifitaet und gewann deshalb auch oberhalb von 1520px. Zwei
   Media-Queries, die sich gegenseitig ausschliessen, sind hier robuster
   als Reihenfolge. Unterhalb traegt die Kopfzeile den Autor ohnehin. */
@media (width < 1520px) {
  :is(.bklp, body) .post-autor { display: none; }
}
/* Die Karte liest sich wie die Autorenzeile im Beitragskopf: rundes Bild,
   Name, Rolle, kein Kasten und kein Etikett (07.08.2026). Die Masse sind
   bewusst dieselben wie dort, damit es dasselbe Element bleibt und nicht
   ein zweites, aehnliches. */
:is(.bklp, body) .post-autor-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
:is(.bklp, body) .post-autor-bild {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--hair);
  display: block;
}
:is(.bklp, body) .post-autor-txt { display: block; min-width: 0; }
:is(.bklp, body) .post-autor-name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}
:is(.bklp, body) .post-autor-rolle {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--grey);
}
:is(.bklp, body) .post-autor-link:hover .post-autor-name { color: var(--signal); }

/* Die Karte blendet ein, sobald die Kopfzeile des Beitrags durchgelaufen
   ist; die Klasse setzt das Template-Skript (07.08.2026). Ohne das stand
   sie schon beim Seitenaufbau neben der Ueberschrift, die dort ohnehin
   Autor und Datum traegt. */
:is(.bklp, body) .post-autor {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-premium), transform .5s var(--ease-premium);
  pointer-events: none;
}
:is(.bklp, body) .post-autor.ist-da {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  :is(.bklp, body) .post-autor { transform: none; transition: opacity .2s linear; }
}

:is(.bklp, body) .post-autor-cta {
  display: block;
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: var(--r-s);
  background: var(--signal);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  transition: background-color .3s var(--ease-premium);
}
:is(.bklp, body) .post-autor-cta:hover { background: #0040c8; }

/* Blaues Haken-Zeichen hinter dem Namen. Es steht auf der eigenen Seite und
   bestaetigt nichts, was eine Plattform geprueft haette, es ist ein reines
   Gestaltungszeichen. Deshalb als Hintergrundbild auf einem leeren ::after:
   Screenreader lesen dort nichts vor und niemand hoert "verifiziert". */
:is(.bklp, body) .author-name::after,
:is(.bklp, body) .author-bar__name::after,
:is(.bklp, body) .post-autor-name::after {
  content: "";
  display: inline-block;
  width: 0.92em; height: 0.92em;
  margin-left: 6px;
  vertical-align: -0.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230052ff'/%3E%3Cpath d='M6.6 12.4l3.3 3.3 7.5-7.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* @section beitrag-galerie
   @owns    .post-content .wp-block-gallery
   Warum: WordPress bringt fuer die Galerie die Figuren-Breite selbst mit
          (width: calc(50% - gap/2), abgesichert per ID-Trick gegen
          Uebersteuern) — aber das display:flex des Containers kommt aus dem
          Layout-System des Themes, und das Etch-Theme druckt es nicht.
          Ohne Flex stapeln sich 50%-breite Figuren untereinander. Hier
          steht deshalb GENAU der fehlende Container-Teil plus Radius,
          nichts, was gegen WordPress' Figuren-Regeln kaempft. */
:is(.bklp, body) .post-content .wp-block-gallery.has-nested-images {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  --wp--style--unstable-gallery-gap: 16px;
  margin: 32px 0;
}
/* Zwei Hochformate nebeneinander bleiben auch schmal lesbar und wirken
   ruhiger als zwei wuchtige Einzelbilder. WordPress stellt sie auf schmalen
   Schirmen untereinander; :not(#i) haelt dagegen, ohne !important. */
:is(.bklp, body) .post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#i) {
  width: calc(50% - 8px);
}
:is(.bklp, body) .post-content .wp-block-gallery img { border-radius: var(--r-m); }

/* @section pillar-bausteine
   @owns    .post-stand, .quellen, .post-cta
   @seealso 02-komponenten/beitrag-lesebreite
   Warum: Bausteine der Pillar-Vorlage, wiederverwendbar fuer alle weiteren
          Pillars. Bewusst ohne eigene Farben: Signalblau bleibt CTA und
          Beleg vorbehalten, der Rest arbeitet mit --hair und --grey. */

/* Stand-Zeile unter der Meta-Zeile, gefuellt aus dem single-Template ueber
   {this.modified}. NICHT ueber einen the_content-Filter: Etch rendert den
   Beitragstext ueber {this.content} und laesst the_content dabei gar nicht
   laufen, ein Filter-Snippet kann hier also nie greifen (geprueft 06.08.2026).
   Der Abstand ist positiv, weil die Zeile jetzt hinter der Autorenzeile im
   Kopf steht und nicht mehr im Fliesstext: -6px liess sie ueberlappen. */
:is(.bklp, body) .post-stand {
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--grey);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Vor der Stand-Zeile stand erst ein Farbquadrat, dann das Favicon.
   Beides wieder raus (07.08.2026): Die Zeile steht direkt unter der
   Autorenzeile und braucht keine zweite Marke. */

/* Inline-SVG-Grafik der Pillar-Vorlage: immer scharf, erbt die Seitenschrift.
   Zwei Fassungen im Markup, die Weiche laeuft hier: breit ab 700px, hoch
   darunter. Beide tragen role="img" mit title/desc, die Figur dazu ein
   aria-label fuer Screenreader, die SVGs selbst sind fuer AT ein Bild. */
:is(.bklp, body) .post-content .phasen-grafik { margin: 40px 0; }
:is(.bklp, body) .post-content .phasen-grafik svg { display: block; width: 100%; height: auto; }
:is(.bklp, body) .post-content .phasen-grafik .grafik-hoch { display: none; }
@media (max-width: 700px) {
  :is(.bklp, body) .post-content .phasen-grafik .grafik-breit { display: none; }
  :is(.bklp, body) .post-content .phasen-grafik .grafik-hoch { display: block; }
}

/* @section beitragsbilder
   @owns    .post-content figure.wp-block-image, .wp-element-caption,
            blockquote.zitat-tacto, .zitat-logo, .zitat-hinweis
   @seealso 02-komponenten/pillar-bausteine
   Warum: Blogbeitraege hatten bis 14.08.2026 keine Bilder, entsprechend
          gab es keine Regeln dafuer. KEINE :has()-Selektoren hier, der
          Minifier wirft sie beim Cache-Neubau. */

:is(.bklp, body) .post-content figure.wp-block-image {
  margin: 40px 0;
}
:is(.bklp, body) .post-content figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-m);
  border: 1px solid var(--hair);
}
:is(.bklp, body) .post-content .wp-element-caption {
  margin: 12px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--grey);
}

/* Kundenstimme mit Firmenzeichen. Das Zeichen steht ueber dem Zitat, der
   Name darunter als <cite>; vorher lief er ohne Trennung direkt an den
   Zitattext an.

   ZWEI STOLPERSTELLEN, beide am 14.08.2026 gemessen:
   1. .bklp .post-content blockquote legt JEDES Zitat als Raster mit
      Portraetspalte an (260px 1fr). Hintergrund und Polster zu
      ueberschreiben reicht nicht, display muss ausdruecklich zurueck auf
      block, sonst stehen Zeichen, Text und Name nebeneinander.
   2. Das Tacto-Zeichen in der Mediathek ist die WEISSE Fassung. Auf
      hellem Grund war es praktisch unsichtbar. Deshalb steht die Karte
      auf Tinte statt auf Panel; Papiertext darauf liegt bei 16,3:1. */
:is(.bklp, body) .post-content blockquote.zitat-tacto {
  display: block;
  margin: 44px 0;
  padding: 32px 34px;
  background: var(--ink);
  border: 0;
  border-radius: var(--r-m);
}
:is(.bklp, body) .post-content blockquote.zitat-tacto p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--paper);
  max-width: none;
}
:is(.bklp, body) .post-content blockquote.zitat-tacto p::before,
:is(.bklp, body) .post-content blockquote.zitat-tacto p::after { content: none; }
:is(.bklp, body) .zitat-logo {
  display: block;
  width: auto;
  height: 26px;
  margin: 0 0 20px;
  border: 0;
  border-radius: 0;
}
:is(.bklp, body) .post-content blockquote.zitat-tacto cite {
  display: block;
  margin-top: 18px;
  font-family: var(--display);
  font-style: normal;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--paper);
}
:is(.bklp, body) .zitat-hinweis {
  font-weight: 400;
  color: rgba(248, 249, 255, 0.62);
}

/* @section leistungsseite
   @owns    .phasen-fragen, .phasen-quelle, .mess-liste, .mess-punkt,
            .quellen-note
   @seealso 02-komponenten/pillar-bausteine
   Warum: Bausteine der neuen Fassung von /ki-suche/ (07.08.2026). Bewusst
          wenige eigene Klassen: Phasen laufen auf .steps, Stufen und
          Befunde auf .reassure-grid, der Abschluss auf .final. Nur die
          Fragenliste und die Messebenen brauchten etwas Eigenes. */

/* Die echten Kundenfragen sehen aus wie im Fragenkasten der Startseite:
   kursiv in Anfuehrungszeichen (das macht .frage-text), hier in einer
   Liste mit Kartenrahmen statt im dunklen Kasten. */
:is(.bklp, body) .phasen-fragen {
  list-style: none;
  margin: 16px 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 70ch;
}
:is(.bklp, body) .phasen-fragen li {
  padding: 10px 16px;
  border: 1px solid var(--hair);
  border-radius: var(--r-s);
  background: var(--paper);
}
:is(.bklp, body) .phasen-fragen li::before { content: none; }
:is(.bklp, body) .phasen-quelle {
  font-size: 0.92rem;
  color: var(--grey);
  max-width: 62ch;
}
:is(.bklp, body) .phasen-quelle strong { color: var(--ink); }

:is(.bklp, body) .mess-liste {
  display: grid;
  gap: 28px;
  margin: 36px 0 32px;
}
:is(.bklp, body) .mess-punkt h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
:is(.bklp, body) .mess-punkt p {
  margin: 0;
  color: var(--grey);
  max-width: 70ch;
}
@media (min-width: 900px) {
  :is(.bklp, body) .mess-liste { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  :is(.bklp, body) .mess-punkt p { max-width: none; }
}

/* Die Einordnung unter den Quellen: derselbe Ton wie im Pillar. */
:is(.bklp, body) .quellen-note {
  margin: 18px 0 0;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--grey);
}

/* TEXTLINKS: Automatic.css faerbt Links im Fliesstext in einem Tuerkis
   (oklch(0.65 0.107 221)), das in dieser Marke nirgends vorkommt. ACSS
   laedt als letzte Quelle und ungeschichtet, deshalb braucht es hier mehr
   Spezifitaet statt einer frueheren Regel. Signalblau liegt auf Papier bei
   5,47:1. Links mit eigener Klasse bleiben ausgenommen, die bringen ihre
   Farbe selbst mit (07.08.2026).
   NUR IN FLIESSTEXT-BEHAELTERN: Als allgemeine Regel ueber p/li/dd traf sie
   auch die Kopfzeilen-Navigation und das Inhaltsverzeichnis der Beitraege,
   deren Punkte ebenfalls in Listen stehen. Wer hier einen Behaelter
   ergaenzt, ergaenzt ihn in beiden Regeln. */
:is(.bklp, body) :is(.post-content, .faq-body, .befund, details.quellen,
  .start-block, .sec-head, .mess-punkt, .author-bar__bio, .step, .test-folge,
  .pain-item, .re-card, .offer-body, .pk-card) :is(p, li, dd) a:not([class]) {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--signal) 45%, transparent);
  transition: text-decoration-color .25s var(--ease-premium);
}
:is(.bklp, body) :is(.post-content, .faq-body, .befund, details.quellen,
  .start-block, .sec-head, .mess-punkt, .author-bar__bio, .step, .test-folge,
  .pain-item, .re-card, .offer-body, .pk-card) :is(p, li, dd) a:not([class]):hover {
  text-decoration-color: var(--signal);
}

/* ── Phasen-Band auf Tinte ─────────────────────────────────────────────
   Die vier Kaufphasen sind das Herz der Seite und bekommen deshalb die
   groesste zusammenhaengende Flaeche in Tinte. Die Fragen bleiben helle
   Karten: dieselbe Umkehr wie im Fragenkasten der Startseite, wo die
   Prompts hell auf dunklem Grund stehen. */
:is(.bklp, body) section.phasen-band { background: var(--ink); }
:is(.bklp, body) .phasen-band h2 { color: var(--paper); }
/* .step h3 setzt Tinte mit !important; auf dem Tinte-Grund waren die
   Phasentitel dadurch unsichtbar. Nur hier gegenhalten, die Regel selbst
   bleibt fuer die hellen .steps-Listen richtig (gemessen 07.08.2026). */
:is(.bklp, body) .phasen-band .step h3 { color: var(--paper) !important; }
:is(.bklp, body) .phasen-band .sec-head p { color: rgba(248, 249, 255, 0.78); }
/* Der Standardabstand unter der Kopfzeile (bis 80px) riss hier ein Loch,
   weil direkt darunter die erste Phase mit eigener Polsterung beginnt. */
:is(.bklp, body) .phasen-band .sec-head { margin-bottom: 34px; }
:is(.bklp, body) .phasen-band .eyebrow { color: rgba(248, 249, 255, 0.72); }
:is(.bklp, body) .phasen-band .step { border-top-color: rgba(248, 249, 255, 0.16); }
:is(.bklp, body) .phasen-band .step:last-child { border-bottom-color: rgba(248, 249, 255, 0.16); }
:is(.bklp, body) .phasen-band .step p { color: rgba(248, 249, 255, 0.78); }
:is(.bklp, body) .phasen-band .step-n { color: var(--signal-soft); }
:is(.bklp, body) .phasen-band .step:hover .step-n { color: var(--signal-soft); }
:is(.bklp, body) .phasen-band .phasen-quelle strong { color: var(--paper); }
/* Signalblau liegt auf Tinte bei 2,99:1 und faellt damit durch; die
   aufgehellte Fassung erreicht 5,58:1. */
:is(.bklp, body) .phasen-band :is(p, li) a:not([class]) {
  color: var(--signal-soft);
  text-decoration-color: color-mix(in srgb, var(--signal-soft) 55%, transparent);
}
:is(.bklp, body) .phasen-band :is(p, li) a:not([class]):hover { text-decoration-color: var(--signal-soft); }
:is(.bklp, body) .phasen-band .start-block { background: rgba(248, 249, 255, 0.08); }
:is(.bklp, body) .phasen-band .start-block p { color: rgba(248, 249, 255, 0.86); }
:is(.bklp, body) .phasen-band .start-block strong { color: var(--paper); }

/* ── Belege unter der Aussage ──────────────────────────────────────────
   Aussage und Belege standen als zwei Abschnitte untereinander, mit einem
   Loch dazwischen und wechselnder Achse: die Schlagzeile zentriert, der
   Text linksbuendig in einem schmaleren Mass. Jetzt ein Abschnitt, eine
   Achse, klare Abstaende zwischen den drei Beobachtungen. */
:is(.bklp, body) .befund-liste {
  max-width: 760px;
  margin: 52px auto 0;
  text-align: left;
  display: grid;
  gap: 26px;
}
:is(.bklp, body) .befund {
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}
:is(.bklp, body) .befund h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
:is(.bklp, body) .befund p {
  margin: 0;
  color: var(--grey);
  line-height: 1.7;
}

/* Testkasten auf /ki-suche/ (07.08.2026): dieselbe Bildsprache wie der
   Fragenkasten im Hero der Startseite, aber ohne dessen Maschinerie. Die
   Klassen .fragen und .frage waeren verlockend, sind hier aber falsch:
   unter 981px stapelt .frage alle Karten in EINE Rasterzelle und blendet
   sie aus, bis das Rotations-Skript die aktive markiert. Auf einer Seite
   ohne dieses Skript bliebe die Karte unsichtbar. Deshalb eigene Klassen,
   die nur das Aussehen teilen, und das Systemzeichen ueber denselben
   Selektor, damit die Bilddaten nicht doppelt im Sheet stehen. */
:is(.bklp, body) .test-kasten {
  background: var(--ink);
  border-radius: var(--r-m);
  padding: 26px 26px 24px;
  margin: 8px 0 24px;
}
:is(.bklp, body) .test-label {
  display: block;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 249, 255, 0.72);
  margin-bottom: 16px;
}
:is(.bklp, body) .test-karte {
  display: block;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
:is(.bklp, body) .test-karte::before { content: "\201E"; }
:is(.bklp, body) .test-karte::after  { content: "\201C"; }
:is(.bklp, body) .test-folge {
  margin: 18px 0 0;
  color: rgba(248, 249, 255, 0.86);
  font-size: 0.98rem;
  line-height: 1.6;
}
:is(.bklp, body) .test-folge strong { color: #fff; }

/* Die Phasen tragen die Seite, deshalb steht die Nummer groesser als in
   den uebrigen .steps-Listen. Die Spalte muss dafuer breiter werden:
   "Phase 1" brach bei 72px auf zwei Zeilen um (gemessen 07.08.2026). */
@media (min-width: 701px) {
  :is(.bklp, body) .phasen-steps .step { grid-template-columns: 116px 1fr; }
}
:is(.bklp, body) .phasen-steps .step-n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--signal);
}
@media (max-width: 700px) {
  :is(.bklp, body) .phasen-steps .step-n { font-size: 1.2rem; }
}

/* @section preisbausteine
   @owns    .preis-tabelle, .pk-grid, .pk-card, .start-block, .agent-view
   @seealso 03-seiten/preise-seite
   Warum: Geteilt zwischen dem Preis-Guide (Blogbeitrag) und der Seite
          /preise. Eine Quelle fuer beide, damit die Zahlen nie in zwei
          Gestaltungen auseinanderlaufen. Blau bleibt CTA und Beleg
          vorbehalten, die Flaechen arbeiten mit --panel und --hair. */

/* Preistabelle. Auf schmalen Schirmen scrollt sie in ihrem eigenen
   Kasten, damit die Seite selbst nie waagerecht scrollt. */
:is(.bklp, body) .preis-tabelle {
  overflow-x: auto;
  margin: 32px 0;
  -webkit-overflow-scrolling: touch;
}
:is(.bklp, body) .preis-tabelle table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.98rem;
}
:is(.bklp, body) .preis-tabelle th {
  text-align: left;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--hair);
}
:is(.bklp, body) .preis-tabelle td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
  line-height: 1.5;
}
:is(.bklp, body) .preis-tabelle tr:last-child td { border-bottom: 0; }
:is(.bklp, body) .preis-tabelle td:first-child { font-weight: 600; color: var(--ink); }
:is(.bklp, body) .preis-tabelle td.preis {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
:is(.bklp, body) .preis-tabelle td.art { color: var(--grey); font-size: 0.92rem; }
/* Zusatz unter dem Preis ("bei sehr grossen Bestaenden nach Aufwand").
   Hebt das nowrap der Preiszelle wieder auf, sonst sprengt der Satz die
   Spalte. */
:is(.bklp, body) .preis-tabelle td.preis .preis-zusatz,
:is(.bklp, body) .preis-zusatz {
  display: block;
  margin-top: 4px;
  font-family: var(--body);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--grey);
  white-space: normal;
  max-width: 22ch;
}

/* Die vier Bausteine als Karten. Karten heben sich nicht an, das ist
   Hausregel; die Abgrenzung macht die Haarlinie. */
:is(.bklp, body) .pk-grid {
  display: grid;
  gap: 20px;
  margin: 32px 0;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  :is(.bklp, body) .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:is(.bklp, body) .pk-card {
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  padding: 26px 28px;
  background: transparent;
  display: flex;
  flex-direction: column;
}
:is(.bklp, body) .pk-card h3 {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
:is(.bklp, body) .pk-card__preis {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.32rem;
  color: var(--ink);
  margin-bottom: 14px;
}
:is(.bklp, body) .pk-card__preis span {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--grey);
  margin-top: 2px;
}
:is(.bklp, body) .pk-card p { margin: 0 0 14px; line-height: 1.6; color: var(--grey); }
:is(.bklp, body) .pk-card__fuer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  font-size: 0.92rem;
  color: var(--ink);
}
:is(.bklp, body) .pk-card__fuer strong { font-family: var(--display); font-weight: 600; }

/* Womit starten? Drei Wenn-dann-Zeilen, bewusst nuechtern. */
:is(.bklp, body) .start-block {
  background: var(--panel);
  border-radius: var(--r-m);
  padding: 28px 32px;
  margin: 32px 0;
}
:is(.bklp, body) .start-block h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 18px;
}
:is(.bklp, body) .start-zeile {
  display: grid;
  gap: 4px 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(11, 28, 48, 0.12);
}
@media (min-width: 720px) {
  :is(.bklp, body) .start-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
}
:is(.bklp, body) .start-zeile__wenn { color: var(--grey); }
:is(.bklp, body) .start-zeile__dann { font-weight: 600; color: var(--ink); }

/* Hinweis auf die Markdown-Fassung. Dezent, aber auffindbar: das ist
   Teil der Positionierung, keine Fussnote. */
:is(.bklp, body) .agent-view {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0;
  padding: 14px 18px;
  border: 1px dashed var(--hair);
  border-radius: var(--r-s);
  font-size: 0.9rem;
  color: var(--grey);
}
:is(.bklp, body) .agent-view::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--signal);
  flex: none;
}
:is(.bklp, body) .agent-view a { color: var(--signal); font-family: var(--display); font-weight: 600; }

/* BREITE SCHIRME: Ab 1500px waechst der Inhaltsbereich mit. Kopfzeile
   und Hero MUESSEN dabei denselben Wert tragen, sonst bricht die
   Buendigkeit von Logo und Ueberschrift. Ohne diese Regel steht auf
   einem 1920er Schirm alles in 1016px in der Mitte und wirkt gedraengt. */
@media (min-width: 1500px) {
  .mh__inner { max-width: 1240px; }
  :is(.bklp, body) .hero .wrap { max-width: 1240px; }
  :is(.bklp, body) .hero .hero-zweispalt { gap: 72px; }
}
@media (min-width: 1800px) {
  .mh__inner { max-width: 1340px; }
  :is(.bklp, body) .hero .wrap { max-width: 1340px; }
  :is(.bklp, body) .hero .hero-zweispalt { gap: 84px; }
}

/* HAUSREGEL PFEILE: Das Zeichen ↗ (U+2197) hat eine Emoji-Variante und
   wird auf iOS und Android bunt gerendert. Immer als "\2197\FE0E"
   schreiben (FE0E = Variantenselektor Textdarstellung) oder gleich als
   SVG (siehe 03-seiten, Vertrauensleiste). Das Zeichen → (U+2192) hat
   keine Emoji-Variante und ist unbedenklich. */

/* @section fragen-band
   @owns    .hero-zweispalt, .hero-links, .fragen, .fragen-liste, .frage,
            .frage-text, .frage-mehr, .fragen-steuer, .fragen-pfeil,
            .fragen-pause, .fragen-hinweis
   @seealso 02-komponenten/hero-akzent
   Warum: Zweispaltiger Startseiten-Hero, rechts der dunkle Fragen-Kasten.
          Die Referenz-Karte (WINtec, data-referenz) steht FEST an erster
          Stelle, darunter wechseln zwei Plaetze durch fuenf weitere
          Kauffragen. Am Zeiger blendet jede Karte auf ihre zweite Ebene
          um (Favicon als Marker), ohne dass sich irgendetwas verschiebt.

   FARBLOGIK: Im Kasten nur die Primaerfarbfamilie (Signal und
   Signal-Soft auf Ink), kein Gelb und kein Raster; der Kasten soll
   ruhiger sein als die Belegwand.

   WARTUNG: keine :has()-Selektoren (Minifier wirft sie), keine
   nachtraeglich ergaenzten Klassen auf Etch-verwalteten Elementen
   (Builder-Speichern wirft sie); Zustand haengt an data-Attributen und
   JS-gesetzten Klassen zur Laufzeit. */

body.home .bklp .hero { padding-block-start: clamp(36px, 3.5vw, 64px); }
body.home .bklp .hero::before,
body.home .bklp .hero::after { display: none !important; }

@media (min-width: 981px) {
  :is(.bklp, body) .hero .hero-zweispalt {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    text-align: left;
  }
  :is(.bklp, body) .hero-zweispalt .hero-links > * {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  :is(.bklp, body) .hero-zweispalt .hero-links .hero-actions { justify-content: flex-start; }
  :is(.bklp, body) .hero-zweispalt .hero-links .tags { justify-content: flex-start; }
  :is(.bklp, body) .hero.centered .hero-zweispalt h1 {
    font-size: clamp(2.2rem, 3.3vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 26px;
  }
  :is(.bklp, body) .hero-zweispalt .hero-links .lead {
    font-size: 1.02rem;
    color: var(--grey);
    max-width: 54ch;
    margin-bottom: 26px;
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
  }
  :is(.bklp, body) .hero-zweispalt .hero-links .eyebrow { font-size: 0.8rem; margin-bottom: 14px; }
  :is(.bklp, body) .hero-zweispalt .hero-links .tags { transform: scale(0.92); transform-origin: left center; }
  :is(.bklp, body) .hero-zweispalt .hero-links .hp3-micro { font-size: 0.85rem; }
}

/* Der Kasten: ruhige Ink-Flaeche ohne Raster. */
:is(.bklp, body) .fragen {
  max-width: 940px;
  margin: 44px auto 0;
  background: var(--ink);
  border-radius: var(--r-m);
  padding: 24px 24px 22px;
}
@media (min-width: 981px) {
  /* Oberkante des Kastens auf Hoehe der H1: die linke Spalte beginnt mit
     dem Eyebrow (0.8rem, 14px Abstand), also sitzt die H1 etwa 33px
     unter der Spaltenoberkante. */
  :is(.bklp, body) .hero-zweispalt .fragen { margin: 33px 0 0; max-width: none; }
  :is(.bklp, body) .hero-zweispalt .fragen-hinweis { text-align: left; }
}
:is(.bklp, body) .fragen-hinweis {
  display: block;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 249, 255, 0.85);
  margin-bottom: 18px;
  text-align: center;
}
/* Vor der Zeile stand erst ein Farbquadrat, dann das Favicon. Beides ist
   wieder raus (06.08.2026): Der Kasten traegt oben rechts schon das
   Systemzeichen, ein zweites Zeichen in derselben Zeile war eine Marke
   zu viel. Die Zeile steht jetzt allein. */

:is(.bklp, body) .fragen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:is(.bklp, body) .frage {
  margin: 0;
  /* 12px oben und unten wirkten in der schmalen Spalte zu luftig, weil
     die Karte ohnehin die hoehere ihrer beiden Ebenen traegt (06.08.2026). */
  padding: 10px 18px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color .3s var(--ease-premium), opacity .45s var(--ease-premium);
  cursor: default;
}
/* GEGEN DEN LADE-BLITZ: Bis das Skript die Plaetze sortiert hat
   (data-bereit am Kasten), sind alle Karten ausser der festen
   unsichtbar; sie erscheinen dann ueber ihre Wechsel-Transition.
   Die feste Karte blendet ueber die Animation ein. */
@keyframes fragenAuf {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Verengt am 31.08.2026: die Regel versteckte ALLE nicht-festen Karten,
   also auch die zwei Ruhekarten, die im Ruhezustand sichtbar sein sollen.
   Der Anfangszustand steht seitdem im HTML (grid-row und slot-an aus dem
   PHP), deshalb muessen nur noch die wartenden Karten der Warteschlange
   verborgen werden. Vorher stand die dunkle Karte bis etwa 700ms leer. */
:is(.bklp, body) .fragen:not([data-bereit]) .frage:not([data-fix]):not(.slot-an) {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}
:is(.bklp, body) .frage[data-fix] {
  opacity: 0;
  animation: fragenAuf 0.55s var(--ease-premium) 0.15s forwards;
}
@media (prefers-reduced-motion: reduce) {
  :is(.bklp, body) .frage[data-fix] { animation: none; opacity: 1; }
}

/* Automatische Silbentrennung statt manueller &shy;: das Dokument ist
   lang="de", also trennt der Browser Komposita wie Radaufstandskraefte
   und Schienenfahrzeugen selbst. Spart Pflege und wirkt bei jedem
   kuenftigen Text. */
:is(.bklp, body) .frage-text,
:is(.bklp, body) .frage-mehr {
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Ohne Grenzen trennt der Browser auch dort, wo es haesslich wird:
     "Medizintech-nik" liess drei Buchstaben allein, "Wel-che" trennte ein
     Wort mit sechs Buchstaben. Die Regel lautet jetzt: erst ab acht
     Buchstaben ueberhaupt trennen, und links wie rechts der Trennstelle
     muessen vier stehen bleiben. Damit wird aus "Medizintech-nik" wieder
     "Medizin-technik" und "Welche" rueckt in die naechste Zeile. */
  hyphenate-limit-chars: 8 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
}
:is(.bklp, body) .frage-text { font-style: italic; }
:is(.bklp, body) .frage-text::before { content: "\201E"; }
:is(.bklp, body) .frage-text::after  { content: "\201C"; }
:is(.bklp, body) .frage:hover,
:is(.bklp, body) .frage:focus-visible { border-color: var(--signal); outline: none; }

:is(.bklp, body) .frage[data-referenz] {
  background: var(--ink);
  border-color: rgba(248, 249, 255, 0.35);
  color: var(--paper);
  position: relative;
  cursor: pointer;
}
/* Etikett im Ruhezustand: sagt, warum diese Karte anders aussieht. */
:is(.bklp, body) .frage-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Zurueckgenommen (06.08.2026): Das Etikett stand in Signalblau und
     las sich als Abzeichen, obwohl es nur einordnet. Blau bleibt dem
     Handlungsaufruf und dem Beleg vorbehalten, hier reicht ein leiser
     Papierton. */
  color: rgba(248, 249, 255, 0.72);
  font-weight: 500;
  margin-bottom: 4px;
}
/* Die ganze Karte klickt: der vorhandene Anker spannt sich unsichtbar
   ueber die Flaeche. Er liegt in der zweiten Ebene, die nur per
   Deckkraft ausgeblendet ist, bleibt also immer klickbar. */
:is(.bklp, body) .frage[data-referenz] .frage-cta::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Die Referenzkarte ist die einzige Karte, die irgendwohin fuehrt. Sie
   traegt deshalb dauerhaft eine blaue Linie: Blau bleibt dem Handlungs-
   aufruf und dem Beleg vorbehalten, beides trifft hier zu. Im Ruhezustand
   leicht zurueckgenommen, beim Zeigen voll. */
:is(.bklp, body) .frage[data-referenz] { border-color: rgba(0, 82, 255, 0.85); }
:is(.bklp, body) .frage[data-referenz]:hover,
:is(.bklp, body) .frage[data-referenz]:focus-visible { border-color: var(--signal); }
/* HIER LAG EIN FOTO (07.08.2026, wieder entfernt). Die Referenzkarte
   zeigte eine Aufnahme aus der WINtec-Zusammenarbeit, erst als Streifen,
   dann als Grund hinter dem Text, zuletzt als Vorschaubild mit groesserer
   Tafel daneben. Raus, weil der Kasten Prompts zeigt und ein Bild darin
   fremd wirkt; nebenbei war es auf Mobil das mit Abstand groesste Bild
   (666px ausgeliefert fuer 91px Anzeige, dazu eager geladen).
   Das Bild bleibt in der Mediathek (id 1666), falls es auf die
   Fallstudienseite soll. */

:is(.bklp, body) .frage[data-referenz] .frage-mehr { color: rgba(248, 249, 255, 0.92); }
:is(.bklp, body) .frage[data-referenz] .frage-text { color: var(--paper); }

/* Zweite Ebene: haengender Einzug, als Marker das Favicon.
   Bewusst die 64px-Fassung als WebP: das 150px-PNG wog 4 KB fuer eine
   Anzeige von 15px und wurde zweimal geladen (21.08.2026). */
/* Die zweite Ebene IST die Belohnung des Hovers und traegt die Aussage.
   Sie stand in Grau bei 0.88rem und wirkte schwaecher als die Frage
   darueber, obwohl der Kontrast mit 8.89:1 unbedenklich war: es fehlte
   Gewicht, nicht Kontrast. Jetzt Tinte und eine Spur groesser. */
:is(.bklp, body) .frage-mehr {
  display: block;
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}
:is(.bklp, body) .frage-mehr::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 15px; height: 15px;
  background: url("https://theb2banswer.de/wp-content/uploads/2026/08/favicon-64.webp") center / contain no-repeat;
}
:is(.bklp, body) .frage-mehr .frage-cta {
  display: table;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--paper);
  border: 1px solid rgba(248, 249, 255, 0.35);
  /* Pille passte nicht: Die Karte laeuft mit 12px, die Schaltflaechen der
     Seite mit 4px, die Pille mit 999px war das dritte Mass in einem Kasten.
     Jetzt derselbe Radius wie jede andere Schaltflaeche (06.08.2026). */
  border-radius: var(--r-s);
  padding: 4px 11px;
  margin-top: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .3s var(--ease-premium);
}
:is(.bklp, body) .frage-mehr .frage-cta:hover { border-color: var(--signal); }

/* System-Zeichen oben rechts in jeder Karte: wo diese Frage gestellt
   wird. Offizielle Marken (Wikimedia Commons), als data-URI eingebettet,
   monochrom auf die Kartenfarbe gesetzt; nur das Gemini-Zeichen behaelt
   seinen Verlauf, es funktioniert auf beiden Grunden. */
:is(.bklp, body) :is(.frage, .test-karte) { position: relative; padding-right: 46px; }
:is(.bklp, body) :is(.frage, .test-karte)::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 13px;
  width: 22px;
  height: 22px;
  background: center / contain no-repeat;
  opacity: 0.85;
}
:is(.bklp, body) :is(.frage, .test-karte)[data-ki="chatgpt"]::after { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQwNiAyNDA2Ij4KCTxwYXRoIGQ9Ik0xIDU3OC40QzEgMjU5LjUgMjU5LjUgMSA1NzguNCAxaDEyNDkuMWMzMTkgMCA1NzcuNSAyNTguNSA1NzcuNSA1NzcuNFYyNDA2SDU3OC40QzI1OS41IDI0MDYgMSAyMTQ3LjUgMSAxODI4LjZWNTc4LjR6IiBmaWxsPSJub25lIi8+Cgk8cGF0aCBpZD0iYSIgZD0iTTExMDcuMyAyOTkuMWMtMTk3Ljk5OSAwLTM3My45IDEyNy4zLTQzNS4yIDMxNS4zTDY1MCA3NDMuNXY0MjcuOWMwIDIxLjQgMTEgNDAuNCAyOS40IDUxLjRsMzQ0LjUgMTk4LjUxNVY4MzMuM2guMXYtMjcuOUwxMzcyLjcgNjA0YzMzLjcxNS0xOS41MiA3MC40NC0zMi44NTcgMTA4LjQ3LTM5LjgyOEwxNDQ3LjYgNDUwLjNDMTM2MSAzNTMuNSAxMjM3LjEgMjk4LjUgMTEwNy4zIDI5OS4xem0wIDExNy41LS42LjZjNzkuNjk5IDAgMTU2LjMgMjcuNSAyMTcuNiA3OC40LTIuNSAxLjItNy40IDQuMy0xMSA2LjFMOTUyLjggNzA5LjNjLTE4LjQgMTAuNC0yOS40IDMwLTI5LjQgNTEuNFYxMjQ4bC0xNTUuMS04OS40Vjc1NS44Yy0uMS0xODcuMDk5IDE1MS42MDEtMzM4LjkgMzM5LTMzOS4yeiIgZmlsbD0iIzBiMWMzMCIvPgoJPHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJyb3RhdGUoNjAgMTIwMyAxMjAzKSIvPgogIAk8dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgMTIwMyAxMjAzKSIvPgoJPHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDEyMDMgMTIwMykiLz4KCTx1c2UgeGxpbms6aHJlZj0iI2EiIHRyYW5zZm9ybT0icm90YXRlKDI0MCAxMjAzIDEyMDMpIi8+Cgk8dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSgzMDAgMTIwMyAxMjAzKSIvPgoKPC9zdmc+"); }
:is(.bklp, body) .frage[data-ki="google"]::after  { background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NSA2NSI+PG1hc2sgaWQ9Im1hc2ttZSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjY1IiBoZWlnaHQ9IjY1Ij48cGF0aCBkPSJNMzIuNDQ3IDBjLjY4IDAgMS4yNzMuNDY1IDEuNDM5IDEuMTI1YTM4LjkwNCAzOC45MDQgMCAwMDEuOTk5IDUuOTA1YzIuMTUyIDUgNS4xMDUgOS4zNzYgOC44NTQgMTMuMTI1IDMuNzUxIDMuNzUgOC4xMjYgNi43MDMgMTMuMTI1IDguODU1YTM4Ljk4IDM4Ljk4IDAgMDA1LjkwNiAxLjk5OWMuNjYuMTY2IDEuMTI0Ljc1OCAxLjEyNCAxLjQzOCAwIC42OC0uNDY0IDEuMjczLTEuMTI1IDEuNDM5YTM4LjkwMiAzOC45MDIgMCAwMC01LjkwNSAxLjk5OWMtNSAyLjE1Mi05LjM3NSA1LjEwNS0xMy4xMjUgOC44NTQtMy43NDkgMy43NTEtNi43MDIgOC4xMjYtOC44NTQgMTMuMTI1YTM4Ljk3MyAzOC45NzMgMCAwMC0yIDUuOTA2IDEuNDg1IDEuNDg1IDAgMDEtMS40MzggMS4xMjRjLS42OCAwLTEuMjcyLS40NjQtMS40MzgtMS4xMjVhMzguOTEzIDM4LjkxMyAwIDAwLTItNS45MDVjLTIuMTUxLTUtNS4xMDMtOS4zNzUtOC44NTQtMTMuMTI1LTMuNzUtMy43NDktOC4xMjUtNi43MDItMTMuMTI1LTguODU0YTM4Ljk3MyAzOC45NzMgMCAwMC01LjkwNS0yQTEuNDg1IDEuNDg1IDAgMDEwIDMyLjQ0OGMwLS42OC40NjUtMS4yNzIgMS4xMjUtMS40MzhhMzguOTAzIDM4LjkwMyAwIDAwNS45MDUtMmM1LTIuMTUxIDkuMzc2LTUuMTA0IDEzLjEyNS04Ljg1NCAzLjc1LTMuNzQ5IDYuNzAzLTguMTI1IDguODU1LTEzLjEyNWEzOC45NzIgMzguOTcyIDAgMDAxLjk5OS01LjkwNUExLjQ4NSAxLjQ4NSAwIDAxMzIuNDQ3IDB6IiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTMyLjQ0NyAwYy42OCAwIDEuMjczLjQ2NSAxLjQzOSAxLjEyNWEzOC45MDQgMzguOTA0IDAgMDAxLjk5OSA1LjkwNWMyLjE1MiA1IDUuMTA1IDkuMzc2IDguODU0IDEzLjEyNSAzLjc1MSAzLjc1IDguMTI2IDYuNzAzIDEzLjEyNSA4Ljg1NWEzOC45OCAzOC45OCAwIDAwNS45MDYgMS45OTljLjY2LjE2NiAxLjEyNC43NTggMS4xMjQgMS40MzggMCAuNjgtLjQ2NCAxLjI3My0xLjEyNSAxLjQzOWEzOC45MDIgMzguOTAyIDAgMDAtNS45MDUgMS45OTljLTUgMi4xNTItOS4zNzUgNS4xMDUtMTMuMTI1IDguODU0LTMuNzQ5IDMuNzUxLTYuNzAyIDguMTI2LTguODU0IDEzLjEyNWEzOC45NzMgMzguOTczIDAgMDAtMiA1LjkwNiAxLjQ4NSAxLjQ4NSAwIDAxLTEuNDM4IDEuMTI0Yy0uNjggMC0xLjI3Mi0uNDY0LTEuNDM4LTEuMTI1YTM4LjkxMyAzOC45MTMgMCAwMC0yLTUuOTA1Yy0yLjE1MS01LTUuMTAzLTkuMzc1LTguODU0LTEzLjEyNS0zLjc1LTMuNzQ5LTguMTI1LTYuNzAyLTEzLjEyNS04Ljg1NGEzOC45NzMgMzguOTczIDAgMDAtNS45MDUtMkExLjQ4NSAxLjQ4NSAwIDAxMCAzMi40NDhjMC0uNjguNDY1LTEuMjcyIDEuMTI1LTEuNDM4YTM4LjkwMyAzOC45MDMgMCAwMDUuOTA1LTJjNS0yLjE1MSA5LjM3Ni01LjEwNCAxMy4xMjUtOC44NTQgMy43NS0zLjc0OSA2LjcwMy04LjEyNSA4Ljg1NS0xMy4xMjVhMzguOTcyIDM4Ljk3MiAwIDAwMS45OTktNS45MDVBMS40ODUgMS40ODUgMCAwMTMyLjQ0NyAweiIgZmlsbD0idXJsKCNwcmVmaXhfX3BhaW50MF9saW5lYXJfMjAwMV82NykiLz48L21hc2s+PGcgbWFzaz0idXJsKCNtYXNrbWUpIj48ZyBmaWx0ZXI9InVybCgjcHJlZml4X19maWx0ZXIwX2ZfMjAwMV82NykiPjxwYXRoIGQ9Ik0tNS44NTkgNTAuNzM0YzcuNDk4IDIuNjYzIDE2LjExNi0yLjMzIDE5LjI0OS0xMS4xNTIgMy4xMzMtOC44MjEtLjQwNi0xOC4xMzEtNy45MDQtMjAuNzk0LTcuNDk4LTIuNjYzLTE2LjExNiAyLjMzLTE5LjI1IDExLjE1MS0zLjEzMiA4LjgyMi40MDcgMTguMTMyIDcuOTA1IDIwLjc5NXoiIGZpbGw9IiNGRkU0MzIiLz48L2c+PGcgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fZmlsdGVyMV9mXzIwMDFfNjcpIj48cGF0aCBkPSJNMjcuNDMzIDIxLjY0OWMxMC4zIDAgMTguNjUxLTguNTM1IDE4LjY1MS0xOS4wNjIgMC0xMC41MjgtOC4zNS0xOS4wNjItMTguNjUxLTE5LjA2MlM4Ljc4LTcuOTQgOC43OCAyLjU4N2MwIDEwLjUyNyA4LjM1IDE5LjA2MiAxOC42NTIgMTkuMDYyeiIgZmlsbD0iI0ZDNDEzRCIvPjwvZz48ZyBmaWx0ZXI9InVybCgjcHJlZml4X19maWx0ZXIyX2ZfMjAwMV82NykiPjxwYXRoIGQ9Ik0yMC4xODQgODIuNjA4YzEwLjc1My0uNTI1IDE4LjkxOC0xMi4yNDQgMTguMjM3LTI2LjE3NC0uNjgtMTMuOTMtOS45NS0yNC43OTctMjAuNzAzLTI0LjI3MUM2Ljk2NSAzMi42ODktMS4yIDQ0LjQwNy0uNTE5IDU4LjMzN2MuNjgxIDEzLjkzIDkuOTUgMjQuNzk3IDIwLjcwMyAyNC4yNzF6IiBmaWxsPSIjMDBCOTVDIi8+PC9nPjxnIGZpbHRlcj0idXJsKCNwcmVmaXhfX2ZpbHRlcjNfZl8yMDAxXzY3KSI+PHBhdGggZD0iTTIwLjE4NCA4Mi42MDhjMTAuNzUzLS41MjUgMTguOTE4LTEyLjI0NCAxOC4yMzctMjYuMTc0LS42OC0xMy45My05Ljk1LTI0Ljc5Ny0yMC43MDMtMjQuMjcxQzYuOTY1IDMyLjY4OS0xLjIgNDQuNDA3LS41MTkgNTguMzM3Yy42ODEgMTMuOTMgOS45NSAyNC43OTcgMjAuNzAzIDI0LjI3MXoiIGZpbGw9IiMwMEI5NUMiLz48L2c+PGcgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fZmlsdGVyNF9mXzIwMDFfNjcpIj48cGF0aCBkPSJNMzAuOTU0IDc0LjE4MWM5LjAxNC01LjQ4NSAxMS40MjctMTcuOTc2IDUuMzg5LTI3LjktNi4wMzgtOS45MjUtMTguMjQxLTEzLjUyNC0yNy4yNTYtOC4wNC05LjAxNSA1LjQ4Ni0xMS40MjggMTcuOTc3LTUuMzkgMjcuOTAyIDYuMDQgOS45MjQgMTguMjQyIDEzLjUyMyAyNy4yNTcgOC4wMzh6IiBmaWxsPSIjMDBCOTVDIi8+PC9nPjxnIGZpbHRlcj0idXJsKCNwcmVmaXhfX2ZpbHRlcjVfZl8yMDAxXzY3KSI+PHBhdGggZD0iTTY3LjM5MSA0Mi45OTNjMTAuMTMyIDAgMTguMzQ2LTcuOTEgMTguMzQ2LTE3LjY2NiAwLTkuNzU3LTguMjE0LTE3LjY2Ny0xOC4zNDYtMTcuNjY3cy0xOC4zNDYgNy45MS0xOC4zNDYgMTcuNjY3YzAgOS43NTcgOC4yMTQgMTcuNjY2IDE4LjM0NiAxNy42NjZ6IiBmaWxsPSIjMzE4NkZGIi8+PC9nPjxnIGZpbHRlcj0idXJsKCNwcmVmaXhfX2ZpbHRlcjZfZl8yMDAxXzY3KSI+PHBhdGggZD0iTS0xMy4wNjUgNDAuOTQ0YzkuMzMgNy4wOTQgMjIuOTU5IDQuODY5IDMwLjQ0Mi00Ljk3MiA3LjQ4My05Ljg0IDUuOTg3LTIzLjU2OS0zLjM0My0zMC42NjNDNC43MDQtMS43ODYtOC45MjQuNDM5LTE2LjQwOCAxMC4yOGMtNy40ODMgOS44NC01Ljk4NiAyMy41NyAzLjM0MyAzMC42NjR6IiBmaWxsPSIjRkJCQzA0Ii8+PC9nPjxnIGZpbHRlcj0idXJsKCNwcmVmaXhfX2ZpbHRlcjdfZl8yMDAxXzY3KSI+PHBhdGggZD0iTTM0Ljc0IDUxLjQzYzExLjEzNSA3LjY1NiAyNS44OTYgNS41MjQgMzIuOTY4LTQuNzY0IDcuMDczLTEwLjI4NyAzLjc3OS0yNC44MzItNy4zNTctMzIuNDg4QzQ5LjIxNSA2LjUyIDM0LjQ1NSA4LjY1NCAyNy4zODIgMTguOTRjLTcuMDcyIDEwLjI4OC0zLjc3OSAyNC44MzMgNy4zNTcgMzIuNDl6IiBmaWxsPSIjMzE4NkZGIi8+PC9nPjxnIGZpbHRlcj0idXJsKCNwcmVmaXhfX2ZpbHRlcjhfZl8yMDAxXzY3KSI+PHBhdGggZD0iTTU0Ljk4NC0yLjMzNmMyLjgzMyAzLjg1Mi0uODA4IDExLjM0LTguMTMxIDE2LjcyNy03LjMyNCA1LjM4Ny0xNS41NTcgNi42MzEtMTguMzkgMi43OC0yLjgzMy0zLjg1My44MDctMTEuMzQyIDguMTMtMTYuNzI4IDcuMzI0LTUuMzg3IDE1LjU1OC02LjYzMSAxOC4zOS0yLjc4eiIgZmlsbD0iIzc0OUJGRiIvPjwvZz48ZyBmaWx0ZXI9InVybCgjcHJlZml4X19maWx0ZXI5X2ZfMjAwMV82NykiPjxwYXRoIGQ9Ik0zMS43MjcgMTYuMTA0QzQzLjA1MyA1LjU5OCA0Ni45NC04LjYyNiA0MC40MS0xNS42NjZjLTYuNTMtNy4wNC0yMS4wMDYtNC4yMzItMzIuMzMyIDYuMjc0cy0xNS4yMTQgMjQuNzMtOC42ODMgMzEuNzdjNi41MyA3LjA0IDIxLjAwNiA0LjIzMiAzMi4zMzItNi4yNzR6IiBmaWxsPSIjRkM0MTNEIi8+PC9nPjxnIGZpbHRlcj0idXJsKCNwcmVmaXhfX2ZpbHRlcjEwX2ZfMjAwMV82NykiPjxwYXRoIGQ9Ik04LjUxIDUzLjgzOGM2LjczMiA0LjgxOCAxNC40NiA1LjU1IDE3LjI2MiAxLjYzNiAyLjgwMi0zLjkxNS0uMzg0LTEwLjk5NC03LjExNi0xNS44MTItNi43MzEtNC44MTgtMTQuNDYtNS41NS0xNy4yNjEtMS42MzYtMi44MDIgMy45MTUuMzgzIDEwLjk5NCA3LjExNSAxNS44MTJ6IiBmaWxsPSIjRkZFRTQ4Ii8+PC9nPjwvZz48ZGVmcz48ZmlsdGVyIGlkPSJwcmVmaXhfX2ZpbHRlcjBfZl8yMDAxXzY3IiB4PSItMTkuODI0IiB5PSIxMy4xNTIiIHdpZHRoPSIzOS4yNzQiIGhlaWdodD0iNDMuMjE3IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyLjQ2IiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMjAwMV82NyIvPjwvZmlsdGVyPjxmaWx0ZXIgaWQ9InByZWZpeF9fZmlsdGVyMV9mXzIwMDFfNjciIHg9Ii0xNS4wMDEiIHk9Ii00MC4yNTciIHdpZHRoPSI4NC44NjgiIGhlaWdodD0iODUuNjg4IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMS44OTEiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8yMDAxXzY3Ii8+PC9maWx0ZXI+PGZpbHRlciBpZD0icHJlZml4X19maWx0ZXIyX2ZfMjAwMV82NyIgeD0iLTIwLjc3NiIgeT0iMTEuOTI3IiB3aWR0aD0iNzkuNDU0IiBoZWlnaHQ9IjkwLjkxNiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTAuMTA5IiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMjAwMV82NyIvPjwvZmlsdGVyPjxmaWx0ZXIgaWQ9InByZWZpeF9fZmlsdGVyM19mXzIwMDFfNjciIHg9Ii0yMC43NzYiIHk9IjExLjkyNyIgd2lkdGg9Ijc5LjQ1NCIgaGVpZ2h0PSI5MC45MTYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUJsZW5kIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEwLjEwOSIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzIwMDFfNjciLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJwcmVmaXhfX2ZpbHRlcjRfZl8yMDAxXzY3IiB4PSItMTkuODQ1IiB5PSIxNS40NTkiIHdpZHRoPSI3OS43MzEiIGhlaWdodD0iODEuNTA1IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMC4xMDkiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8yMDAxXzY3Ii8+PC9maWx0ZXI+PGZpbHRlciBpZD0icHJlZml4X19maWx0ZXI1X2ZfMjAwMV82NyIgeD0iMjkuODMyIiB5PSItMTEuNTUyIiB3aWR0aD0iNzUuMTE3IiBoZWlnaHQ9IjczLjc1OCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iOS42MDYiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8yMDAxXzY3Ii8+PC9maWx0ZXI+PGZpbHRlciBpZD0icHJlZml4X19maWx0ZXI2X2ZfMjAwMV82NyIgeD0iLTM4LjU4MyIgeT0iLTE2LjI1MyIgd2lkdGg9Ijc4LjEzNSIgaGVpZ2h0PSI3OC43NTgiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUJsZW5kIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjguNzA2IiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMjAwMV82NyIvPjwvZmlsdGVyPjxmaWx0ZXIgaWQ9InByZWZpeF9fZmlsdGVyN19mXzIwMDFfNjciIHg9IjguMTA3IiB5PSItNS45NjYiIHdpZHRoPSI3OC44NzciIGhlaWdodD0iNzcuNTM5IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI3Ljc3NSIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzIwMDFfNjciLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJwcmVmaXhfX2ZpbHRlcjhfZl8yMDAxXzY3IiB4PSIxMy41ODciIHk9Ii0xOC40ODgiIHdpZHRoPSI1Ni4yNzIiIGhlaWdodD0iNTEuODEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUJsZW5kIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjYuOTU3IiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMjAwMV82NyIvPjwvZmlsdGVyPjxmaWx0ZXIgaWQ9InByZWZpeF9fZmlsdGVyOV9mXzIwMDFfNjciIHg9Ii0xNS41MjYiIHk9Ii0zMS4yOTciIHdpZHRoPSI3MC44NTYiIGhlaWdodD0iNjkuMzA2IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1Ljg3NiIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzIwMDFfNjciLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJwcmVmaXhfX2ZpbHRlcjEwX2ZfMjAwMV82NyIgeD0iLTE0LjE2OCIgeT0iMjAuOTY0IiB3aWR0aD0iNTUuNTAxIiBoZWlnaHQ9IjUxLjU3MSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNy4yNzMiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8yMDAxXzY3Ii8+PC9maWx0ZXI+PGxpbmVhckdyYWRpZW50IGlkPSJwcmVmaXhfX3BhaW50MF9saW5lYXJfMjAwMV82NyIgeDE9IjE4LjQ0NyIgeTE9IjQzLjQyIiB4Mj0iNTIuMTUzIiB5Mj0iMTUuMDA0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iIzQ4OTNGQyIvPjxzdG9wIG9mZnNldD0iLjI3IiBzdG9wLWNvbG9yPSIjNDg5M0ZDIi8+PHN0b3Agb2Zmc2V0PSIuNzc3IiBzdG9wLWNvbG9yPSIjOTY5REZGIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQkQ5OUZFIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PC9zdmc+"); }
:is(.bklp, body) .frage[data-ki="copilot"]::after { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBDcmVhdGVkIHdpdGggSW5rc2NhcGUgKGh0dHA6Ly93d3cuaW5rc2NhcGUub3JnLykgLS0+CjxzdmcgZmlsbD0iIzBiMWMzMCIgd2lkdGg9IjEzMjIuOSIgaGVpZ2h0PSIxMTQ3LjUiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEzMjIuOSAxMTQ3LjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNzExLjE5IDI2NS4yYy0yNy4zMzMgMC00Ni45MzMgMy4wNy01OC44IDkuMzMgMjcuMDY3LTgwLjI2NyA0Ny42LTIxMC4xMyAxNjgtMjEwLjEzIDExNC45MyAwIDEwOC40IDEzOC4yNyAxNTcuODcgMjAwLjh6bTEwNy4zMyAxMTIuOTNjLTM1LjQ2NyAxMjUuMi03MCAyNTEuMi0xMTAuMTMgMzc1LjMzLTEyLjEzMyAzNi40LTQ1LjczMyA2MS42LTg0IDYxLjZoLTEzNi4yN2M5LjMzMzMtMTQgMTYuOC0yOC45MzMgMjEuNDY3LTQ1LjczMyAzNS40NjctMTI1LjA3IDcwLTI1MS4wNyAxMTAuMTMtMzc1LjMzIDEyLjEzMy0zNi40IDQ1LjczMy02MS42IDg0LTYxLjZoMTM2LjI3Yy05LjMzMzMgMTQtMTYuOCAyOC45MzQtMjEuNDY3IDQ1LjczNG0tMzE2LjEzIDcwNC44Yy0xMTQuOTMgMC0xMDguNC0xMzguMTMtMTU3Ljg3LTIwMC42N2gyNjcuMDdjMjcuNDY3IDAgNDcuMDY3LTMuMDcgNTguOC05LjMzLTI3LjA2NyA4MC4yNjYtNDcuNiAyMTAtMTY4IDIxMG03NzcuNDctNzU4LjkzaDAuOTNjLTMyLjY2Ny0zOC4yNjYtODIuMjY3LTU3Ljg2Ni0xNDYuNjctNTcuODY2aC0zNi40Yy0zNC41MzMtMi44LTY1LjMzMy0yNi4xMzQtNzYuNTMzLTU4LjhsLTM2LjQtMTAzLjZjLTIxLjQ2My02MS43MzctODAuMjYzLTEwMy43NC0xNDUuNzMtMTAzLjc0aC00NzUuMDdjLTE3NS42IDAtMjUxLjIgMjI1LjA3LTI5Mi4yNyAzNjEuMzMtMzguMjY3IDEyNy4wNy0xMjYgMzQxLjczLTI0LjI2NyA0NjIuMTMgNDYuNjY3IDU1LjA2NyAxMTYuNjcgNTcuODY3IDE4My4wNyA1Ny44NjcgMzQuNTMzIDIuOCA2NS4zMzMgMjYuMTMzIDc2LjUzMyA1OC44bDM2LjQgMTAzLjZjMjEuNDY3IDYxLjczMyA4MC4yNjcgMTAzLjczIDE0NS42IDEwMy43M2g0NzUuMmMxNzUuNDcgMCAyNTEuMDctMjI1LjA3IDI5Mi4yNy0zNjEuMzMgMzAuOC0xMDAuOCA2OC4xMzMtMjI0LjkzIDY2LjI2Ny0zMjQuOCAwLTUwLjUzNC0xMS4yLTEwMC00Mi45MzMtMTM3LjMzIi8+Cjwvc3ZnPgo="); }
:is(.bklp, body) .frage[data-referenz][data-ki="chatgpt"]::after { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQwNiAyNDA2Ij4KCTxwYXRoIGQ9Ik0xIDU3OC40QzEgMjU5LjUgMjU5LjUgMSA1NzguNCAxaDEyNDkuMWMzMTkgMCA1NzcuNSAyNTguNSA1NzcuNSA1NzcuNFYyNDA2SDU3OC40QzI1OS41IDI0MDYgMSAyMTQ3LjUgMSAxODI4LjZWNTc4LjR6IiBmaWxsPSJub25lIi8+Cgk8cGF0aCBpZD0iYSIgZD0iTTExMDcuMyAyOTkuMWMtMTk3Ljk5OSAwLTM3My45IDEyNy4zLTQzNS4yIDMxNS4zTDY1MCA3NDMuNXY0MjcuOWMwIDIxLjQgMTEgNDAuNCAyOS40IDUxLjRsMzQ0LjUgMTk4LjUxNVY4MzMuM2guMXYtMjcuOUwxMzcyLjcgNjA0YzMzLjcxNS0xOS41MiA3MC40NC0zMi44NTcgMTA4LjQ3LTM5LjgyOEwxNDQ3LjYgNDUwLjNDMTM2MSAzNTMuNSAxMjM3LjEgMjk4LjUgMTEwNy4zIDI5OS4xem0wIDExNy41LS42LjZjNzkuNjk5IDAgMTU2LjMgMjcuNSAyMTcuNiA3OC40LTIuNSAxLjItNy40IDQuMy0xMSA2LjFMOTUyLjggNzA5LjNjLTE4LjQgMTAuNC0yOS40IDMwLTI5LjQgNTEuNFYxMjQ4bC0xNTUuMS04OS40Vjc1NS44Yy0uMS0xODcuMDk5IDE1MS42MDEtMzM4LjkgMzM5LTMzOS4yeiIgZmlsbD0iI2Y4ZjlmZiIvPgoJPHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJyb3RhdGUoNjAgMTIwMyAxMjAzKSIvPgogIAk8dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgMTIwMyAxMjAzKSIvPgoJPHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDEyMDMgMTIwMykiLz4KCTx1c2UgeGxpbms6aHJlZj0iI2EiIHRyYW5zZm9ybT0icm90YXRlKDI0MCAxMjAzIDEyMDMpIi8+Cgk8dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSgzMDAgMTIwMyAxMjAzKSIvPgoKPC9zdmc+"); }
:is(.bklp, body) .frage[data-referenz][data-ki="copilot"]::after { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBDcmVhdGVkIHdpdGggSW5rc2NhcGUgKGh0dHA6Ly93d3cuaW5rc2NhcGUub3JnLykgLS0+CjxzdmcgZmlsbD0iI2Y4ZjlmZiIgd2lkdGg9IjEzMjIuOSIgaGVpZ2h0PSIxMTQ3LjUiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEzMjIuOSAxMTQ3LjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNzExLjE5IDI2NS4yYy0yNy4zMzMgMC00Ni45MzMgMy4wNy01OC44IDkuMzMgMjcuMDY3LTgwLjI2NyA0Ny42LTIxMC4xMyAxNjgtMjEwLjEzIDExNC45MyAwIDEwOC40IDEzOC4yNyAxNTcuODcgMjAwLjh6bTEwNy4zMyAxMTIuOTNjLTM1LjQ2NyAxMjUuMi03MCAyNTEuMi0xMTAuMTMgMzc1LjMzLTEyLjEzMyAzNi40LTQ1LjczMyA2MS42LTg0IDYxLjZoLTEzNi4yN2M5LjMzMzMtMTQgMTYuOC0yOC45MzMgMjEuNDY3LTQ1LjczMyAzNS40NjctMTI1LjA3IDcwLTI1MS4wNyAxMTAuMTMtMzc1LjMzIDEyLjEzMy0zNi40IDQ1LjczMy02MS42IDg0LTYxLjZoMTM2LjI3Yy05LjMzMzMgMTQtMTYuOCAyOC45MzQtMjEuNDY3IDQ1LjczNG0tMzE2LjEzIDcwNC44Yy0xMTQuOTMgMC0xMDguNC0xMzguMTMtMTU3Ljg3LTIwMC42N2gyNjcuMDdjMjcuNDY3IDAgNDcuMDY3LTMuMDcgNTguOC05LjMzLTI3LjA2NyA4MC4yNjYtNDcuNiAyMTAtMTY4IDIxMG03NzcuNDctNzU4LjkzaDAuOTNjLTMyLjY2Ny0zOC4yNjYtODIuMjY3LTU3Ljg2Ni0xNDYuNjctNTcuODY2aC0zNi40Yy0zNC41MzMtMi44LTY1LjMzMy0yNi4xMzQtNzYuNTMzLTU4LjhsLTM2LjQtMTAzLjZjLTIxLjQ2My02MS43MzctODAuMjYzLTEwMy43NC0xNDUuNzMtMTAzLjc0aC00NzUuMDdjLTE3NS42IDAtMjUxLjIgMjI1LjA3LTI5Mi4yNyAzNjEuMzMtMzguMjY3IDEyNy4wNy0xMjYgMzQxLjczLTI0LjI2NyA0NjIuMTMgNDYuNjY3IDU1LjA2NyAxMTYuNjcgNTcuODY3IDE4My4wNyA1Ny44NjcgMzQuNTMzIDIuOCA2NS4zMzMgMjYuMTMzIDc2LjUzMyA1OC44bDM2LjQgMTAzLjZjMjEuNDY3IDYxLjczMyA4MC4yNjcgMTAzLjczIDE0NS42IDEwMy43M2g0NzUuMmMxNzUuNDcgMCAyNTEuMDctMjI1LjA3IDI5Mi4yNy0zNjEuMzMgMzAuOC0xMDAuOCA2OC4xMzMtMjI0LjkzIDY2LjI2Ny0zMjQuOCAwLTUwLjUzNC0xMS4yLTEwMC00Mi45MzMtMTM3LjMzIi8+Cjwvc3ZnPgo="); }

/* Steuerzeile (Pfeile + Pause in EINER Reihe) nur mobil. */
:is(.bklp, body) .fragen-steuer { display: none; }

@media (min-width: 981px) {
  /* Feste Referenz-Karte oben, zwei Wechselplaetze darunter. Das Skript
     verteilt die Pool-Karten per gridRow auf Platz 2 und 3; Karten im
     selben Platz stapeln sich und wechseln per Deckkraft. */
  :is(.bklp, body) .hero-zweispalt .fragen-liste { display: grid; grid-column: 1; gap: 12px; }
  :is(.bklp, body) .hero-zweispalt .frage { grid-column: 1; }
  :is(.bklp, body) .hero-zweispalt .frage.im-pool {
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    transition:
      opacity .5s var(--ease-premium),
      transform .5s var(--ease-premium),
      visibility 0s linear .5s;
  }
  :is(.bklp, body) .hero-zweispalt .frage.im-pool.slot-an {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity .5s var(--ease-premium) .12s,
      transform .5s var(--ease-premium) .12s,
      visibility 0s;
  }

  /* Der Versatz (links/rechts wie ein Gespraechsverlauf) ist wieder
     raus: er sollte Bewegung andeuten, las sich aber als Fehler.
     Alle Karten laufen ueber die volle Breite. */

  /* Ueberblenden statt Aufklappen: Frage und zweite Ebene im selben
     Feld, Kartenhoehe konstant, der Hover verschiebt nichts. */
  :is(.bklp, body) .hero-zweispalt .frage { display: grid; }
  :is(.bklp, body) .hero-zweispalt .frage > .frage-text,
  :is(.bklp, body) .hero-zweispalt .frage > .frage-mehr {
    grid-area: 1 / 1;
    align-self: center;
    transition: opacity .3s var(--ease-premium);
  }
  /* EINHEITLICHER RHYTHMUS, aber ohne feste Zahl (06.08.2026): Vorher
     stand hier min-height 118px bzw. 152px. Das hielt die Karten zwar
     gleich hoch, war aber ab 1512px viel zu viel: gebraucht wurden 70px,
     also standen 48px leer. Jetzt vergeben die beiden Wechselplaetze
     ihre Hoehe ueber 1fr und messen sich gegenseitig aus, die Referenz
     oben behaelt ihre eigene. Damit bleibt der Rhythmus gleich und die
     Hoehe folgt dem laengsten Text, den ein Platz zeigen kann. */
  :is(.bklp, body) .hero-zweispalt .fragen-liste { grid-template-rows: auto 1fr 1fr; }
  :is(.bklp, body) .hero-zweispalt .frage { align-content: center; }

  /* Karte mit Etikett: das Etikett behaelt Zeile 1, Frage und zweite
     Ebene wechseln in Zeile 2. */
  :is(.bklp, body) .hero-zweispalt .frage[data-referenz] { grid-template-rows: auto auto; }
  :is(.bklp, body) .hero-zweispalt .frage[data-referenz] > .frage-label { grid-area: 1 / 1; }
  :is(.bklp, body) .hero-zweispalt .frage[data-referenz] > .frage-text,
  :is(.bklp, body) .hero-zweispalt .frage[data-referenz] > .frage-mehr { grid-area: 2 / 1; }
  :is(.bklp, body) .hero-zweispalt .frage > .frage-mehr { opacity: 0; }
  :is(.bklp, body) .hero-zweispalt .frage:hover > .frage-text,
  :is(.bklp, body) .hero-zweispalt .frage:focus-visible > .frage-text,
  :is(.bklp, body) .hero-zweispalt .frage:focus-within > .frage-text { opacity: 0; }
  :is(.bklp, body) .hero-zweispalt .frage:hover > .frage-mehr,
  :is(.bklp, body) .hero-zweispalt .frage:focus-visible > .frage-mehr,
  :is(.bklp, body) .hero-zweispalt .frage:focus-within > .frage-mehr { opacity: 1; }
}

@media (max-width: 980px) {
  /* Einspaltig: die zweite Ebene steht offen, es gibt keinen Zeiger,
     auf den sie warten koennte. */
  :is(.bklp, body) .frage-mehr { margin-top: 6px; }

  /* Die Karte ist hier deutlich breiter als in der Spalte, das
     System-Zeichen darf mitwachsen. */
  :is(.bklp, body) .frage::after { width: 28px; height: 28px; top: 14px; right: 16px; }
  :is(.bklp, body) .frage { padding-right: 56px; }

  /* Der Rotationsteil galt frueher erst ab 700px. Zwischen 701 und 980
     fiel der Kasten damit durch beide Raster: keine Wechselplaetze (die
     beginnen bei 981), keine Rotation. Ergebnis waren fuenf Karten
     untereinander mit dauerhaft offenen Antworten. Die Grenze liegt
     jetzt bei 980, passend zum Umbruch auf eine Spalte. */
  /* Mobil: Kasten mit Luft zu den Raendern, eine Karte, Steuerzeile. */
  :is(.bklp, body) .fragen { margin: 40px 10px 0; padding: 20px 18px 18px; }
  :is(.bklp, body) .fragen-liste { display: grid; gap: 0; }
  :is(.bklp, body) .frage {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    transition:
      opacity .5s var(--ease-premium),
      transform .5s var(--ease-premium),
      visibility 0s linear .5s;
  }
  :is(.bklp, body) .frage.ist-aktiv {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity .5s var(--ease-premium) .12s,
      transform .5s var(--ease-premium) .12s,
      visibility 0s;
  }
  :is(.bklp, body) .frage .frage-mehr { margin-top: 0; }
  :is(.bklp, body) .frage .frage-label { margin-bottom: 0; }
  :is(.bklp, body) .frage-mehr { text-align: left; }

  :is(.bklp, body) .fragen-steuer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
  }
  :is(.bklp, body) .fragen-pfeil {
    width: 40px; height: 40px;
    flex: none;
    background: none;
    border: 1px solid rgba(248, 249, 255, 0.3);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
  }
  :is(.bklp, body) .fragen-pfeil::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    border-top: 2px solid var(--signal-soft, #6b8cff);
    border-right: 2px solid var(--signal-soft, #6b8cff);
  }
  :is(.bklp, body) .fragen-pfeil[data-richtung="1"]::before  { transform: translate(-65%, -50%) rotate(45deg); }
  :is(.bklp, body) .fragen-pfeil[data-richtung="-1"]::before { transform: translate(-35%, -50%) rotate(-135deg); }

  :is(.bklp, body) .fragen-pause {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: none;
    border: 1px solid rgba(248, 249, 255, 0.3);
    border-radius: var(--r-pill);
    font-family: var(--display);
    font-size: 0.82rem;
    color: rgba(248, 249, 255, 0.88);
    cursor: pointer;
  }
  :is(.bklp, body) .fragen-pause::before {
    content: "";
    width: 8px; height: 9px;
    border-left: 3px solid var(--signal-soft, #6b8cff);
    border-right: 3px solid var(--signal-soft, #6b8cff);
  }
  :is(.bklp, body) .fragen-pause[aria-pressed="true"]::before {
    border: none;
    width: 0; height: 0;
    border-left: 9px solid var(--signal-soft, #6b8cff);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.bklp, body) .frage { transition: none; transform: none; }
}

/* Chip-Reihe in der Schluss-Sektion: dort steht sie auf Ink, nicht auf
   Papier wie frueher im Hero. Helle Kontur, heller Text. */
:is(.bklp, body) .final .tags { justify-content: center; margin-top: 22px; }
:is(.bklp, body) .final .tags .tag {
  border-color: rgba(248, 249, 255, 0.28);
  color: rgba(248, 249, 255, 0.88);
  background: transparent;
}
:is(.bklp, body) .final .tags .tag.on {
  border-color: rgba(248, 249, 255, 0.6);
  color: var(--paper);
}

/* @section hero-punkte
   @owns    .hero-punkte
   Warum: Drei Zusagen unter dem Vorspann der Startseite (14.08.2026).
          Das Haekchen ist ein Hintergrundbild, KEIN Zeichen im Text:
          ein getipptes Haekchen wird von Screenreadern mitgelesen und
          auf Android als Emoji gerendert, dasselbe Problem wie damals
          beim Pfeil. Die Liste bleibt eine echte ul, damit die drei
          Punkte auch ohne Bild als Aufzaehlung erkennbar sind. */
:is(.bklp, body) .hero-punkte {
  list-style: none;
  margin: 26px 0 30px;
  padding: 0;
  display: grid;
  gap: 10px;
  text-align: left;
}
:is(.bklp, body) .hero-punkte li {
  position: relative;
  padding-left: 30px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--grey);
}
:is(.bklp, body) .hero-punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 19px;
  height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%230052ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 980px) {
  :is(.bklp, body) .hero-punkte { justify-items: start; }
}

/* @section hero-akzent
   @owns    mark.mark-signal, .hero .eyebrow
   @seealso 02-komponenten/textmarker, 03-seiten (H1-Groesse)
   Warum: Die Hero-Ueberschrift der Startseite.
   Historie: Hier lag bis 06.08.2026 auch eine CSS-Wortrotation
   (ChatGPT/Google/Copilot). Auf Wunsch wieder entfernt, samt Markup. */

/* Marker-Variante ohne Flaeche: nur die Signalfarbe auf dem Wort.
   Ausnahme von der Hausregel "Blau nur fuer CTAs", ausdruecklich so
   gewuenscht (06.08.2026). Gewinnt ueber den gelben Strich der
   Ueberschriften-Regel, weil die Klasse mitzaehlt. */
:is(.bklp, body) mark.mark-signal {
  background: none;
  color: var(--signal);
  padding: 0;
  margin: 0;
}

/* Eyebrow im Hero etwas groesser, muss auf einer Zeile bleiben. */
:is(.bklp, body) .hero .eyebrow { font-size: 0.95rem; }

/* @section textmarker
   @owns    mark
   Warum: Der Standard-Hervorhebungsstil der Website neben Fett
          (Entscheidung Oliver, 05.08.2026). Flaeche ist das
          Panel-Lavendel, keine Signalfarbe: Blau bleibt CTAs und Belegen
          vorbehalten. box-decoration-break: clone, damit der Marker bei
          Zeilenumbruch auf beiden Teilzeilen sauber schliesst.
          Gilt WEBSITE-WEIT, nicht nur im Beitrag. */
:is(.bklp, body) mark {
  background: var(--panel);
  color: inherit;
  padding: 0.06em 0.28em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* In Ueberschriften ein Marker-STRICH statt einer Flaeche: derselbe
   Vollton (#FBBC05, das Sternen-Gelb), aber nur im unteren Drittel der
   Zeile. Entscheidung Oliver, 06.08.2026, nach einem Variantenvergleich.

   Warum nicht die Flaeche: Ein geschlossener gelber Block hinter 60px
   Schrift konkurriert mit dem Wort, das er hervorheben soll. Der Strich
   unterstreicht, statt zu ueberlagern; das Wort bleibt das Hellste, das
   Gelb das Lauteste. Passt ausserdem zum Haus, das mit Haarlinien und
   Kanten arbeitet, nicht mit Farbflaechen.

   Der Verlauf statt border-bottom, damit der Strich HINTER den
   Unterlaengen liegt und bei Zeilenumbruch auf jeder Teilzeile neu
   ansetzt (box-decoration-break erbt vom Basis-Marker). Kein
   Innenabstand noetig, damit stimmt der Wortlauf von selbst.
   Signalblau bleibt CTAs vorbehalten. */
:is(.bklp, body) :is(h1, h2, h3) mark {
  background: linear-gradient(transparent 62%, #FBBC05 62%);
  color: var(--ink);
  padding: 0 0.06em;
  margin: 0;
  border-radius: 0;
}

/* FAQ-Akkordeon im Beitrag: die Beitrags-Typografie neutralisieren.
   body.single-post .post-content h3 traegt 44px Aussenabstand und
   .post-content p 24px nach unten; beides wirkt sonst IN die Fragen und
   Antworten hinein. Ergebnis waren doppelt so hohe Zeilen und ein
   Plus-Zeichen, das ueber der Textzeile schwebte statt daneben.
   Auf der Startseite existieren diese Regeln nicht, deshalb sah es dort
   anders aus. */
body.single-post .post-content .faq-stack .faq-q { margin: 0; }
body.single-post .post-content .faq-stack p { margin: 0; }
body.single-post .post-content .faq-stack .faq-body p { margin-bottom: 0; }

/* FAQ-Kopf im Beitrag: zentriert mit Eyebrow, wie der Sektionskopf der
   Startseite. Die H2 verliert hier die Trennlinie der Beitrags-H2. */
/* Abstand nach unten wie der Sektionskopf der Startseite (clamp wie
   .sec-head), vorher klebte der Stapel 8px unter dem Titel. */
:is(.bklp, body) .post-content .faq-kopf { text-align: center; margin: 64px 0 clamp(28px, 2.4vw, 40px); }
/* Nachgemessen gegen die Startseite: dort liegen 34px zwischen H2 und
   Stapel (1440px breit). Der clamp landet bei derselben Groesse. */
:is(.bklp, body) .post-content .faq-kopf .eyebrow { margin-bottom: 12px; }
:is(.bklp, body) .post-content .faq-kopf h2 {
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0 auto;
  max-width: 24ch;
}

/* Quellen-Toggle. Natives <details>, Inhalt steht im DOM und ist crawlbar.
   Als Panel-Flaeche statt Fussnote: Belege sind der Markenkern, sie duerfen
   auffallen. Kein border-top mehr, das gab eine Doppellinie unter dem
   FAQ-Stapel, der selbst mit einer Haarlinie schliesst. */
:is(.bklp, body) details.quellen {
  margin: 40px 0;
  background: var(--panel);
  border-radius: var(--r-m);
  padding: 22px 28px;
  font-size: 0.92rem;
  color: var(--grey);
}
:is(.bklp, body) details.quellen summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  padding: 2px 0;
}
:is(.bklp, body) details.quellen summary::-webkit-details-marker { display: none; }
:is(.bklp, body) details.quellen summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--signal);
  border-bottom: 1.5px solid var(--signal);
  transform: rotate(-45deg);
  transition: transform 0.25s var(--ease-premium);
  flex: none;
}
:is(.bklp, body) details.quellen[open] summary::before { transform: rotate(45deg); }
:is(.bklp, body) details.quellen ul { margin: 18px 0 0; padding-left: 0; list-style: none; font-size: 0.92rem; }
:is(.bklp, body) details.quellen ul li {
  margin-bottom: 12px;
  padding-left: 16px;
  border-left: 1px solid rgba(11, 28, 48, 0.18);
  line-height: 1.55;
}
:is(.bklp, body) details.quellen ul li::before { content: none; }
:is(.bklp, body) details.quellen .quellen-einordnung {
  margin: 20px 0 0;
  font-size: 0.9rem;
  color: var(--grey);
  line-height: 1.6;
}
:is(.bklp, body) details.quellen a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }

/* CTA-Block im Beitrag. Gleiche Sprache wie die Schlusssektionen der Seiten:
   Flaeche in --ink, Kicker, Text, eine Schaltflaeche, Mikrozeile. */
:is(.bklp, body) .post-content .post-cta {
  display: block;
  margin: 48px 0;
  padding: 36px 40px;
  background: var(--ink);
  border-radius: var(--r-m);
}
:is(.bklp, body) .post-content .post-cta__label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 249, 255, 0.75);
  margin-bottom: 12px;
}
:is(.bklp, body) .post-content .post-cta__text {
  margin: 0 0 24px;
  color: var(--paper);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 52ch;
}
:is(.bklp, body) .post-content a.post-cta__btn {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 13px 26px;
  text-decoration: none;
  transition: background-color .3s var(--ease-premium);
}
:is(.bklp, body) .post-content a.post-cta__btn:hover { background: #fff; }
:is(.bklp, body) .post-content .post-cta__micro {
  display: block;
  margin-top: 14px;
  font-size: 0.85rem;
  color: rgba(248, 249, 255, 0.7);
}
@media (max-width: 600px) {
  :is(.bklp, body) .post-content .post-cta { padding: 28px 24px; }
}

/* @section beitrag-lesebreite
   @owns    body.single-post .wrap.narrow
   @seealso 01-fundament/layout-container
   Warum: Lesespalte der Blogbeitraege auf 866px (04.08.2026, Wunsch Oliver).
          !important, weil .bklp .narrow seine 680px selbst mit !important
          setzt. Gilt fuer Hero, Inhalt und Autorenzeile gemeinsam, damit
          alles auf einer Kante laeuft. Die TOC-Rasterspalte oben ist auf
          946px angehoben (Achsen-Paarung 680/760 → 866/946), der
          Umschaltpunkt von 1400 auf 1520px. */
body.single-post .wrap.narrow { max-width: 866px !important; }

/* ── Meta-Zeile ── */
/* Trennpunkt zwischen Datum und Autor, gleiche Schreibweise wie in der
   Autorenbox. Als ::before statt im Text, damit er nicht mitkopiert wird
   und Screenreader ihn nicht vorlesen. */
:is(.bklp, body) .post-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; }
:is(.bklp, body) .post-meta > span + span::before {
  content: "·";
  margin: 0 10px;
  color: var(--grey);
}
/* ── Autorenbox ── */
/* Die Box fiel aus dem System: blaue Auszeichnung, blau unterstrichene
   Links, blaue Pillen. Blau ist bei dir CTAs und Belegen vorbehalten. */
body.single-post .author-bar { border-radius: var(--r-m); padding: 32px; }
body.single-post .author-bar__label {
  color: var(--grey); font-family: var(--display); font-weight: 600;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
}
body.single-post .author-bar__name {
  margin: 6px 0 4px;
  font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink);
}
body.single-post .author-bar__body a {
  border-radius: var(--r-s);
  border: 1px solid var(--hair);
  color: var(--ink); text-decoration: none;
  padding: 9px 16px;
  font-family: var(--display); font-weight: 600; font-size: .9rem;
  transition: border-color .3s var(--ease-premium);
}
body.single-post .author-bar__body a:hover { border-color: var(--ink); }

/* @section autorenzeile-bio-links
   @owns    .author-bar__bio a
   @seealso 02-komponenten/schaltflaechen-radius
   Warum: In .author-bar__body wird JEDER Link zur Pille, das ist fuer die
          Profil-Links zu LinkedIn und YouTube gedacht. Die Biografie liegt
          im selben Kasten; ihre Inline-Links saehen sonst wie Knoepfe
          mitten im Satz aus. Die Regel ist bewusst eine Stufe spezifischer
          als die Pillen-Regel (0,3,2 gegen 0,2,2), damit die Reihenfolge
          keine Rolle spielt. Der !important-Radius aus @section
          schaltflaechen-radius greift weiter, bleibt aber ohne Rahmen und
          ohne Flaeche unsichtbar. */
body.single-post .author-bar__body .author-bar__bio a {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.single-post .author-bar__body .author-bar__bio a:hover { color: #003ec7; }

/* @section autorenzeile-stil
   @owns    .author-bar__label, .author-bar__photo, .author-bar__bio, .author-bar__links, .author-bar__cta, .author-bar__icon
   @seealso 01-fundament/spec-vermerk
   Warum: Zwei Anleihen aus dem Zeichnungskopf-Motiv (Pruefvermerk-Kasten vor
          dem Label, Haarlinien-Fassung ums Portraet). Das Millimeterpapier
          aus der ersten Fassung ist wieder RAUS: hinter Fliesstext macht es
          das Lesen schwerer, das Motiv gehoert auf Flaechen ohne Text.
          Dazu die Handlungszeile: ein CTA als Schaltflaeche, LinkedIn und
          YouTube nur als Icons (CSS-Maske auf currentColor, der Textknoten
          bleibt fuer Screenreader stehen, aria-label liefert den Namen). */
/* Der Pruefvermerk-Kasten vor dem Label ist auf Wunsch wieder raus (04.08.). */
body.single-post .author-bar__photo {
  border: 1px solid var(--hair);
  padding: 4px;
  background: #fff;
}

/* Lesen und Ueberfliegen: etwas groesser, mehr Zeilenluft, klarer Abstand
   zwischen den beiden Absaetzen. */
body.single-post .author-bar__body p.author-bar__bio { font-size: 1rem; line-height: 1.65; }
body.single-post .author-bar__bio + .author-bar__bio { margin-top: 12px; }

/* Handlungszeile */
/* align-items: stretch statt center: die Icon-Chips bekommen automatisch
   dieselbe Hoehe wie die CTA-Schaltflaeche, egal wie die sich aendert. */
body.single-post .author-bar__links { display: flex; align-items: stretch; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
body.single-post .author-bar__body a.author-bar__cta {
  margin: 0;
  display: inline-block;
  background: var(--signal);
  border: 1px solid var(--signal);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 20px;
  text-decoration: none;
  transition: background-color .3s var(--ease-premium), border-color .3s var(--ease-premium);
}
body.single-post .author-bar__body a.author-bar__cta:hover,
body.single-post .author-bar__body a.author-bar__cta:focus-visible { background: #003ec7; border-color: #003ec7; color: #fff; }
body.single-post .author-bar__body a.author-bar__icon {
  margin: 0;
  padding: 0;
  width: 46px;
  height: auto;
  /* Faellt die Zeile um (mobil), streckt align-items nur innerhalb der neuen
     Zeile. Das min-height haelt die Chips auch dann auf Knopfhoehe. */
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hair);
  color: var(--ink);
  font-size: 0;
  transition: border-color .3s var(--ease-premium);
}
body.single-post .author-bar__body a.author-bar__icon:hover,
body.single-post .author-bar__body a.author-bar__icon:focus-visible { border-color: var(--ink); }
body.single-post .author-bar__icon::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ab-icon) no-repeat center / contain;
  mask: var(--ab-icon) no-repeat center / contain;
}
body.single-post .author-bar__icon--in { --ab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.24 8.31h4.52V23H.24zM8.34 8.31h4.33v2h.06c.6-1.14 2.07-2.34 4.26-2.34 4.56 0 5.4 3 5.4 6.9V23h-4.52v-7.12c0-1.7-.03-3.88-2.36-3.88-2.37 0-2.73 1.85-2.73 3.76V23H8.34z'/%3E%3C/svg%3E"); }
body.single-post .author-bar__icon--yt { --ab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.4 31.4 0 0 0 0 12a31.4 31.4 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31.4 31.4 0 0 0 24 12a31.4 31.4 0 0 0-.5-5.8zM9.6 15.6V8.4L15.8 12z'/%3E%3C/svg%3E"); }
body.single-post .author-bar__links { display: flex; gap: 10px; margin-top: 20px; }


/* @section formulare
   @owns    .wsf-form, .kontakt-steps, .newsletter, .kontakt-side, .kontakt, .kontakt-grid */
/* ══ Formulare (01.08.2026) ═══════════════════════════════════════════════
   Gestaltung für WS Form auf theb2banswer.de. Basis kommt von Automatic.css,
   hier steht nur, was darüber hinaus nötig ist. Prefix `:is(.bklp, body)`,
   damit die Regeln live UND im Etch-Canvas greifen (der Canvas hat kein
   .bklp). Signalblau ist ausschließlich für Absenden und Fokus reserviert,
   nicht als Dekoration. Kein Lift, keine Schlagschatten: Flächen reagieren
   über Kante, so wie die Karten der übrigen Website. */

/* ── Kontaktseite: Aufbau ───────────────────────────────────────────────── */
:is(.bklp, body) .kontakt .kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  width: 100%;
}
:is(.bklp, body) .kontakt-form h2,
:is(.bklp, body) .kontakt-side h2 {
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  margin-bottom: 18px;
}
:is(.bklp, body) .kontakt-side {
  padding: 28px 30px;
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  background: var(--paper);
}
/* Nummerierte Schritte über einen Zähler, damit die Ziffern zur Typo passen
   und nicht die Browser-Vorgabe zeigen. */
:is(.bklp, body) .kontakt-steps {
  counter-reset: kstep;
  list-style: none;
  margin: 0;
  padding: 0;
}
:is(.bklp, body) .kontakt-steps li {
  counter-increment: kstep;
  position: relative;
  padding: 0 0 16px 38px;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--grey);
}
:is(.bklp, body) .kontakt-steps li::before {
  content: counter(kstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
:is(.bklp, body) .kontakt-steps li:last-child { padding-bottom: 0; }
:is(.bklp, body) .kontakt-alt {
  margin: 22px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  font-size: 0.95rem;
  color: var(--grey);
}

/* ── Newsletter-Sektion ─────────────────────────────────────────────────── */
:is(.bklp, body) .newsletter { text-align: center; }
:is(.bklp, body) .newsletter h2 {
  margin-inline: auto;
  max-width: 24ch;
}
:is(.bklp, body) .nl-lead {
  margin: 14px auto 26px;
  max-width: 58ch;
  color: var(--grey);
}
:is(.bklp, body) .newsletter .wsf-holder {
  margin-inline: auto;
  max-width: 560px;
  text-align: left;
}
:is(.bklp, body) .nl-note {
  margin: 16px auto 0;
  max-width: 56ch;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--grey);
}

/* ── WS Form: Grundgerüst ───────────────────────────────────────────────── */
/* WS Form arbeitet mit dem klassischen Raster-Trick: -10px Aussenabstand
   am Raster, +10px Innenabstand an den Kacheln. Das macht das Formular
   20px breiter als seinen Kasten (346 statt 326, gemessen 07.08.2026).
   Auf schmalen Schirmen steht ohnehin eine Kachel je Zeile, dort braucht
   es die Rinne nicht. */
:is(.bklp, body) .kontakt-form :is(.wsf-form, .wsf-holder) { max-width: 100%; }
@media (max-width: 700px) {
  :is(.bklp, body) .kontakt-form .wsf-grid { margin-left: 0; margin-right: 0; }
  :is(.bklp, body) .kontakt-form .wsf-tile { padding-left: 0; padding-right: 0; }
}
:is(.bklp, body) .wsf-form .wsf-field-wrapper { margin-bottom: 18px; }

:is(.bklp, body) .wsf-form label,
:is(.bklp, body) .wsf-form .wsf-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}
/* Pflichtstern leise, er ist ein Hinweis und keine Warnung. */
:is(.bklp, body) .wsf-form .wsf-required { color: var(--grey); }

:is(.bklp, body) .wsf-form input[type="text"],
:is(.bklp, body) .wsf-form input[type="email"],
:is(.bklp, body) .wsf-form input[type="tel"],
:is(.bklp, body) .wsf-form input[type="url"],
:is(.bklp, body) .wsf-form select,
:is(.bklp, body) .wsf-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  background: #fff;
  box-shadow: none;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium);
}
:is(.bklp, body) .wsf-form textarea { min-height: 150px; resize: vertical; }

:is(.bklp, body) .wsf-form input::placeholder,
:is(.bklp, body) .wsf-form textarea::placeholder { color: color-mix(in srgb, var(--grey) 62%, #fff); }

/* Fokus ist der eine Moment, in dem Signalblau am Eingabefeld erscheint. */
:is(.bklp, body) .wsf-form input:focus,
:is(.bklp, body) .wsf-form select:focus,
:is(.bklp, body) .wsf-form textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 16%, transparent);
}

/* Kontrollkästchen und Optionsfelder */
:is(.bklp, body) .wsf-form input[type="checkbox"],
:is(.bklp, body) .wsf-form input[type="radio"] {
  width: 17px;
  height: 17px;
  margin-right: 9px;
  accent-color: var(--signal);
  vertical-align: -2px;
}
:is(.bklp, body) .wsf-form .wsf-fieldset label,
:is(.bklp, body) .wsf-form .wsf-checkbox label,
:is(.bklp, body) .wsf-form .wsf-radio label {
  display: inline;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--grey);
}

/* Absenden trägt die Anmutung von .btn.btn-primary. */
:is(.bklp, body) .wsf-form button[type="submit"],
:is(.bklp, body) .wsf-form input[type="submit"] {
  display: inline-block;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-s);
  background: var(--signal);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s var(--ease-premium), background-color 0.25s var(--ease-premium);
}
:is(.bklp, body) .wsf-form button[type="submit"]:hover,
:is(.bklp, body) .wsf-form input[type="submit"]:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--signal) 88%, #000);
}
:is(.bklp, body) .wsf-form button[type="submit"]:focus-visible,
:is(.bklp, body) .wsf-form input[type="submit"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Hinweis- und Fehlertexte */
:is(.bklp, body) .wsf-form .wsf-field-help,
:is(.bklp, body) .wsf-form .wsf-help {
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--grey);
}
:is(.bklp, body) .wsf-form .wsf-error,
:is(.bklp, body) .wsf-form .wsf-field-message-invalid {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #b3261e;
}
:is(.bklp, body) .wsf-form input:user-invalid,
:is(.bklp, body) .wsf-form textarea:user-invalid { border-color: #b3261e; }

/* Erfolgsmeldung wie eine Belegkarte, nicht wie ein Alarm. */
:is(.bklp, body) .wsf-form .wsf-message,
:is(.bklp, body) .wsf-message-success {
  padding: 16px 18px;
  border: 1px solid var(--hair);
  border-left: 2px solid var(--signal);
  border-radius: var(--r-s);
  background: var(--paper);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink);
}

/* Newsletter kompakt: Feld und Schaltfläche nebeneinander, sobald Platz ist. */
@media (min-width: 620px) {
  :is(.bklp, body) .newsletter .wsf-form .wsf-field-wrapper { margin-bottom: 14px; }
}

@media (max-width: 900px) {
  :is(.bklp, body) .kontakt .kontakt-grid { grid-template-columns: 1fr; gap: 32px; }
  :is(.bklp, body) .kontakt-side { padding: 24px 22px; }
}

/* ═══ 03-seiten.036d1e5.css ═══ */
/* ============================================================================
   THE B2B ANSWER — 03 SEITEN   @sheet 03-seiten
   ----------------------------------------------------------------------------
   Seitengebundenes CSS, alles an body.page-id-*, body.parent-pageid-*
   oder body.home gehaengt. Laedt zuletzt vor automatic.css und darf
   deshalb die Komponenten aus 02 gezielt uebersteuern.

   Reihenfolge: 01 → 02 → 03 → automatic.css. Kein @layer, Begruendung in 01.

   INHALT
      editorial-legal   Datenschutz, Impressum, AGB
      crosscheck        /crosscheck-prompt/
      brand-kit-seite   /brand-kit/ und die Brand-Kit-Landeseiten
      startseite-v3     Startseite V3
      ueber-seite       /ueber/
   ----------------------------------------------------------------------------
   Konvention: "@section <kennung>" und "@owns <klassen>" sind maschinenlesbar,
   ein grep findet die zustaendige Stelle statt 150 KB Lesearbeit:
       grep -rn "@section karten" stylesheets/
   Gegenprobe, ob dieses Sheet live wirklich ankommt:
       curl -s <url> | grep -c '@sheet 03-seiten'
   ============================================================================ */


/* @section editorial-legal
   @owns    .agb-accordion, .agb-container, .impressum-container, .accordion-content, .impressum-section, .agb-header */
/* ==========================================================================
   THE B2B ANSWER — 05 LEGAL & EDITORIAL PAGES (Impressum, Datenschutz, AGB)
   ========================================================================== */

/* --- Layout Container --- */
.agb-container,
.impressum-container {
  max-width: 800px; /* Optimal reading width for legal text */
  margin: 96px auto 120px;
  padding: 0 32px;
  font-family: var(--body);
  color: var(--ink);
}

/* --- Headers & Spacing --- */
.agb-header,
.impressum-container .sec-head {
  margin-bottom: 48px;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 24px;
}

.agb-header h1,
.impressum-container h1 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 4vw, 3rem);
}

.agb-section,
.impressum-section {
  margin-bottom: 48px;
}

.agb-section h2,
.impressum-section h2 {
  font-size: 1.5rem;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hair);
}

/* --- Typography --- */
.agb-container p,
.impressum-container p,
.agb-container ul,
.impressum-container ul {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 16px;
  color: var(--ink);
}

.agb-container ul {
  padding-left: 24px;
  list-style-type: disc;
}

.agb-container li {
  margin-bottom: 8px;
}

.impressum-section a,
.accordion-content a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.impressum-section a:hover,
.accordion-content a:hover {
  color: #1E45D8;
}

/* --- Accordions (Datenschutz & AGB) --- */
.agb-accordion {
  border: 1px solid var(--hair);
  border-radius: var(--r-s);
  background: var(--paper);
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.agb-accordion:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, var(--hair));
  box-shadow: 0 4px 12px rgba(26, 31, 43, 0.04);
}

.agb-accordion summary {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none; /* Hides default browser arrow */
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  background: var(--paper);
  transition: background-color 0.2s ease;
}

.agb-accordion summary:hover {
  background: var(--panel);
}

/* Custom Accordion Arrow */
.agb-accordion summary::after {
  content: "▾";
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--signal);
  transition: transform 0.3s ease;
}

/* Hide default arrow in Safari/Webkit */
.agb-accordion summary::-webkit-details-marker {
  display: none;
}

/* Arrow rotation when open */
.agb-accordion[open] summary::after {
  transform: rotate(180deg);
}

.agb-accordion[open] summary {
  border-bottom: 1px solid var(--hair);
  background: var(--panel);
}

.accordion-content {
  padding: 24px;
  background: var(--paper);
}

.accordion-content h3 {
  font-size: 1.15rem;
  margin: 32px 0 16px;
  color: var(--ink);
}

.accordion-content h3:first-child {
  margin-top: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 820px) {
  .agb-container,
  .impressum-container {
    margin: 48px auto 80px;
    padding: 0 20px;
  }
  
  .agb-accordion summary {
    padding: 16px;
    font-size: 1.05rem;
    line-height: 1.4;
  }
  
  .accordion-content {
    padding: 16px;
  }
  
  .agb-container p,
  .impressum-container p,
  .agb-container ul,
  .impressum-container ul {
    font-size: 1rem;
  }
}


/* @section crosscheck
   @owns    .cc-intro, .cc-cta, .cc-sec-head, .cc-copy, .cc-code, .cc-prompt */
/* ══ Crosscheck-Seite (post 1150) ═══════════════════════════════════
   Bewusst schlicht: keine Hero-Grid-Kulisse, keine dunkle Schluss-
   Sektion. Hierarchie nur ueber Ueberschriften und Weissraum.

   Prefix :is(.bklp, body): live greift .bklp, im Etch-Canvas (der
   keinen .bklp-Wrapper hat) greift body. Sonst waere die Seite im
   Builder ungestylt.
   ═════════════════════════════════════════════════════════════════ */

/* .wrap hat margin-inline:auto, das schaltet in flex-column-Sections
   den Cross-Axis-Stretch ab. Ohne width:100% schrumpft er auf
   Inhaltsbreite. */
:is(.bklp, body) :is(.cc-intro, .cc-prompt, .cc-note, .cc-cta) .wrap { width: 100%; }

/* ── 1 Einstieg ───────────────────────────────────────────────── */
:is(.bklp, body) .cc-intro { padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2rem); }
:is(.bklp, body) .cc-intro h1 {
  font-family: var(--display);
  color: var(--ink);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  max-width: 22ch;
  margin: .5rem 0 1.25rem;
}
:is(.bklp, body) .cc-intro .lead { max-width: 62ch; margin: 0; }

/* ── 2 Prompt-Box ─────────────────────────────────────────────── */
:is(.bklp, body) .cc-prompt { padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3rem); }

/* kein Rahmen, Hierarchie ueber Weissraum */
:is(.bklp, body) .cc-sec-head { margin-bottom: 24px; padding-bottom: 0; border-bottom: 0; text-align: left; }
:is(.bklp, body) .cc-sec-head h2 { margin: 0; }
:is(.bklp, body) .cc-sec-head p { margin-top: 10px; }





:is(.bklp, body) button.cc-copy { flex: 0 0 auto; white-space: nowrap; cursor: pointer; }
/* .btn-ghost haengt sonst ein ::after "→" an, hier unerwuenscht */
:is(.bklp, body) button.cc-copy::after { content: none; }
:is(.bklp, body) button.cc-copy.is-copied {
  border-color: var(--signal);
  color: var(--signal) !important;
  background: transparent;
}


:is(.bklp, body) .cc-code:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Rueckmeldung nach dem Kopieren */
:is(.bklp, body) .cc-status {
  margin: 14px 0 0;
  min-height: 1.5em;
  font-size: .95rem;
  color: var(--signal);
  opacity: 0;
  transition: opacity .25s var(--ease-premium);
}
:is(.bklp, body) .cc-status.is-visible { opacity: 1; }

/* ── 4 CTA ────────────────────────────────────────────────────── */
:is(.bklp, body) .cc-cta { padding-block: 0 clamp(4rem, 9vw, 6.5rem); }
:is(.bklp, body) .cc-cta h2 {
  font-family: var(--display);
  color: var(--ink);
  max-width: 20ch;
  margin: 0 0 1rem;
}
:is(.bklp, body) .cc-cta .lead { max-width: 56ch; margin: 0 0 1.75rem; }

@media (max-width: 600px) {
  
  
}

:is(.bklp, body) .cc-box {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  /* Innenluft: unten sichtbarer Abstand zur Rahmenkante, seitlich
     damit die Scrollbar des pre nicht am Rahmen klebt. */
  padding: 0 8px 12px;
}

/* Bewusst NICHT sticky: die Box ist rund 500px hoch und passt in jeden
   Viewport. Sticky liess den Kopf beim Rausscrollen ueber die untere
   Rahmenkante wandern. */
:is(.bklp, body) .cc-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* rechts zusaetzlich die Scrollbar-Breite des pre (~15px),
     damit der Button nicht in die Scrollbar-Spalte ragt */
  padding: 16px 27px 12px 12px;
}

:is(.bklp, body) .cc-code {
  font-family: var(--mono);
  font-size: .875rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  padding: 0 12px 4px;
  max-height: 26rem;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  :is(.bklp, body) .cc-box { padding: 0 6px 10px; }
  :is(.bklp, body) .cc-box-head { padding: 14px 20px 10px 8px; }
  :is(.bklp, body) .cc-code { max-height: 60vh; font-size: .8125rem; padding: 0 8px 4px; }
}

/* ── Auszutauschender Platzhalter im Prompt ───────────────────────
   Bewusst mehrfach kodiert (Farbe, Flaeche, gestrichelter Rahmen,
   Fettung), nicht nur ueber Farbe. Enthaelt keine zusaetzlichen
   Zeichen, damit der kopierte Text unveraendert bleibt. */
:is(.bklp, body) .cc-ph {
  /* als Block, sonst bekommt jede Zeile ihr eigenes Kaestchen.
     Bewusst OHNE font-weight und ohne eigene Textfarbe: die Schrift
     soll identisch zum uebrigen Prompt bleiben, die Markierung
     traegt allein der gestrichelte Rahmen mit leichter Tonung. */
  display: block;
  background: color-mix(in srgb, var(--signal) 5%, transparent);
  color: inherit;
  border: 1px dashed color-mix(in srgb, var(--signal) 45%, transparent);
  border-radius: var(--r-s);
  padding: 10px 12px;
  margin: 2px 0;
}

:is(.bklp, body) .cc-hint {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 14px;
  font-size: .95rem;
  color: var(--ink);
}
:is(.bklp, body) .cc-hint::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  background: var(--signal);
  border-radius: var(--r-xs);
}


/* @section brand-kit-seite
   @owns    .page-id-1174, .kisuche, .brandkit, .ideal, .bk-wrap, .pain */
/* ══ Brand-Kit-Seite (post 1174, /brand-kit/) ═══════════════════════
   Nutzt die Site-Muster (hero centered, sec-head, pain-grid, final)
   aus Main. Hier nur die bk-eigenen Klassen.
   Prefix :is(.bklp, body): live greift .bklp, im Etch-Canvas (ohne
   .bklp-Wrapper) greift body. ═══════════════════════════════════ */

/* .wrap hat margin-inline:auto; ohne width:100% kollabieren Grids
   in flex-column-Sections auf min-content. */
:is(.bklp, body) .bk-wrap { width: 100%; }
/* 01.08.2026: unten stand hier 0, dadurch sass der Text auf der
   Sektionskante. Gilt global, deshalb war es auf allen Loesungsseiten sichtbar. */
:is(.bklp, body) .pain { padding-block: clamp(3rem, 7vw, 5rem); }

@media (max-width: 900px) {
}



/* ── /brand-kit/: ein Rhythmus fuer die ganze Seite (01.08.2026) ──────────
   Die Seite mischte 90er und 52er Sektionsabstaende. Mit der Akquise-Formel
   stiessen ausserdem zwei papierfarbene Baender aneinander, dazwischen
   142px Leerraum ohne sichtbaren Wechsel. Jetzt gilt ueberall der
   52er-Rhythmus der Startseite, und wo zwei gleichfarbige Baender
   aufeinandertreffen, zaehlt nur ein Abstand. */
body.page-id-1174 :is(.ideal, .brandkit, .kisuche, .who) { padding-block: 52px; }
body.page-id-1174 .ideal + .brandkit,
body.page-id-1174 .kisuche + .hp3-ladder-sec { padding-top: 0; }


/* @section startseite-v3
   @owns    .hp3-proof, .hp3-flink, .proof-band, .logo-grid, .hp3-fcard, .hp3-metric */
/* ══ Startseite V3 ═══════════════════════════════════════════════════
   Nur bestehende Tokens (ACSS + Main). Keine neuen Farben/Fonts.
   Prefix :is(.bklp, body): live .bklp, im Etch-Canvas body. */

/* Ruhiger Rhythmus: alternierende Baender statt 14 Sektionen auf einer
   Flaeche. Das ist der groesste Hebel fuer den aufgeraeumten Eindruck. */
:is(.bklp, body) :is(.pain-lead, .hp3-blocks, .hp3-why, .hp3-ladder-sec, .routing, .hp3-proof, .hp3-mgmt, .hp3-honest, .hp3-test) {
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}
:is(.bklp, body) :is(.pain-lead, .hp3-why, .routing, .hp3-mgmt, .hp3-test) { background: #fff; }
:is(.bklp, body) :is(.hp3-blocks, .hp3-ladder-sec, .hp3-proof, .hp3-honest) { background: var(--paper); }
/* Karten auf weissem Band brauchen die Gegenfarbe */
:is(.bklp, body) :is(.hp3-why, .routing, .hp3-mgmt, .hp3-test) .pain-item { background: var(--paper); }
:is(.bklp, body) :is(.hp3-blocks, .hp3-proof) .pain-item,
:is(.bklp, body) .hp3-blocks .hp3-block,
:is(.bklp, body) .hp3-proof .hp3-metric { background: #fff; }
/* Kompaktere Sektionskoepfe */
:is(.bklp, body) :is(.hp3-blocks, .hp3-why, .hp3-ladder-sec, .hp3-proof, .hp3-mgmt, .hp3-test) .sec-head { margin-bottom: 26px; }
:is(.bklp, body) :is(.hp3-blocks, .hp3-why, .hp3-ladder-sec, .hp3-proof, .hp3-mgmt, .hp3-honest, .hp3-test) .wrap { width: 100%; }

/* Metrik-Karten: eigenes Grid, nicht pain-grid */
:is(.bklp, body) .hp3-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
:is(.bklp, body) .hp3-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  padding: 28px 26px;
  text-decoration: none;
  transition: border-color .35s var(--ease-premium), box-shadow .35s var(--ease-premium);
}
:is(.bklp, body) .hp3-metric:hover { border-color: var(--signal); box-shadow: 0 10px 30px rgba(11,28,48,.08); }
:is(.bklp, body) .hp3-metric-l {
  font-family: var(--display); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--signal);
}
:is(.bklp, body) .hp3-metric strong {
  font-family: var(--display); font-weight: 700;
  font-size: 1.15rem; line-height: 1.35; color: var(--ink);
}

/* ── S11 Schluss ─────────────────────────────────────────────── */
:is(.bklp, body) .final .hp3-final-text {
  max-width: 58ch;
  margin: 14px auto 28px;
  color: var(--paper);
  opacity: .82;
}

/* ── Mobil ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :is(.bklp, body) .hp3-ladder { grid-template-columns: 1fr; gap: 12px; }
  :is(.bklp, body) .hp3-step:not(:last-child)::after {
    content: "↓";
    right: auto; left: 50%; top: auto; bottom: -13px;
    transform: translateX(-50%);
  }
  :is(.bklp, body) .hp3-mgmt-list { grid-template-columns: 1fr; }
  :is(.bklp, body) .hp3-metrics,
  :is(.bklp, body) .hp3-blocks .pain-grid { grid-template-columns: 1fr; }
  :is(.bklp, body) .hp3-test-box { flex-direction: column; align-items: flex-start; }
}

/* ── Kompaktere Metrik-Karten ── */
:is(.bklp, body) .hp3-metric { padding: 22px 24px; gap: 6px; }

@media (max-width: 900px) {
}
@media (max-width: 600px) {
  :is(.bklp, body) .hp3-mgmt-list { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :is(.bklp, body) .hp3-blocks .pain-grid { grid-template-columns: 1fr; }
}

/* ══ Beleg-Band: Kennzahlen links, Kundenlogos rechts ══════════════
   Vorbild: Logos in das Layout integriert statt als eigenes Band
   darunter. Kennzahlen und Logos belegen dasselbe, also stehen sie
   nebeneinander und teilen sich eine Flaeche. */
:is(.bklp, body) .proof-band { padding-block: 30px; }
:is(.bklp, body) .proof-band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* Vertrauensleiste: Kennwert gross, Beleg klein darunter, durch
   Haarlinien getrennt. Google-Marke steht an der Bewertung, nicht in
   der Kundenreihe, damit sie nicht als Kunde gelesen wird. */
:is(.bklp, body) .tb-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding-left: 34px;
  border-left: 1px solid rgba(248, 249, 255, .14);
}
:is(.bklp, body) .tb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  text-decoration: none;
}
:is(.bklp, body) .tb-item:first-child { padding-left: 0; }
:is(.bklp, body) .tb-item + .tb-item { border-left: 1px solid rgba(248, 249, 255, .14); }
:is(.bklp, body) .tb-logo {
  /* groesser als vorher (26px), aber bewusst unter der Referenz,
     die das G fast zweizeilig setzt */
  flex: 0 0 auto; width: 38px; height: 38px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23EA4335%22%20d%3D%22M24%209.5c3.54%200%206.71%201.22%209.21%203.6l6.85-6.85C35.9%202.38%2030.47%200%2024%200%2014.62%200%206.51%205.38%202.56%2013.22l7.98%206.19C12.43%2013.72%2017.74%209.5%2024%209.5z%22%2F%3E%3Cpath%20fill%3D%22%234285F4%22%20d%3D%22M46.98%2024.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58%202.96-2.26%205.48-4.78%207.18l7.73%206c4.51-4.18%207.09-10.36%207.09-17.65z%22%2F%3E%3Cpath%20fill%3D%22%23FBBC05%22%20d%3D%22M10.53%2028.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92%2016.46%200%2020.12%200%2024c0%203.88.92%207.54%202.56%2010.78l7.97-6.19z%22%2F%3E%3Cpath%20fill%3D%22%2334A853%22%20d%3D%22M24%2048c6.48%200%2011.93-2.13%2015.89-5.81l-7.73-6c-2.15%201.45-4.92%202.3-8.16%202.3-6.26%200-11.57-4.22-13.47-9.91l-7.98%206.19C6.51%2042.62%2014.62%2048%2024%2048z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
:is(.bklp, body) .tb-text { display: flex; flex-direction: column; gap: 2px; }
:is(.bklp, body) .tb-value {
  font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  color: var(--paper); line-height: 1.2; white-space: nowrap;
}
:is(.bklp, body) .tb-stars { color: #FBBC05; letter-spacing: .04em; font-size: .95em; }
:is(.bklp, body) .tb-caption {
  font-size: .82rem; color: rgba(248, 249, 255, .58); white-space: nowrap;
  transition: color .3s var(--ease-premium);
}
:is(.bklp, body) a.tb-item:hover .tb-caption { color: var(--paper); }

/* Logos: rechts, fuellen den Rest */
/* .wrap schrumpft in der Flex-Spalten-Sektion auf Inhaltsbreite
   (align-items:center schaltet den Stretch ab), deshalb width:100% */
:is(.bklp, body) .proof-band .wrap { width: 100%; flex-wrap: nowrap; }
/* Sechs Logos passen neben der Leiste nicht in eine Zeile (zusammen
   1303px bei 1016px Platz). Also 3x2-Raster: gleiche Spaltenbreiten,
   optische Mitten auf einer Linie. */
:is(.bklp, body) .proof-band .logo-grid {
  flex: 1 1 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  gap: 20px 24px;
}
/* Einzelhoehen kommen aus Main (optisch austariert), hier nur die
   Grundlinie: alle Logos auf gleicher Mitte, gleichmaessiger Abstand. */
:is(.bklp, body) .proof-band .logo-grid img { flex: 0 0 auto; }

@media (max-width: 900px) {
  :is(.bklp, body) .proof-band .wrap { flex-direction: column; align-items: stretch; gap: 24px; }
  :is(.bklp, body) .tb-bar {
    padding: 20px 0 0 0;
    border-left: 0;
    border-top: 1px solid rgba(248, 249, 255, .14);
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  :is(.bklp, body) .proof-band .logo-grid { flex-wrap: wrap; justify-content: center; gap: 18px 26px; }
  :is(.bklp, body) .proof-band .logo-grid { justify-content: center; gap: 18px 26px; }
}

/* H1 auf zwei Zeilen. Bei 4.2rem passen nur ~21 Zeichen je Zeile in
   die 1016px-Spalte, der Satz braucht 29. Also Schriftgrad auf max 3rem
   und volle Spaltenbreite; text-wrap:balance verteilt die zwei Zeilen. */
:is(.bklp, body) .hero.centered h1 {
  max-width: 100%;
  font-size: clamp(2.05rem, 4vw, 3.3rem);
  text-wrap: balance;
}

/* Logo-Groessen optisch ausgeglichen: gleiche Flaeche (~3300px2)
   statt gleicher Hoehe. Die Seitenverhaeltnisse reichen von 1,75
   (Zureck) bis 5,24 (Gridwise), deshalb wirkt gleiche Hoehe ungleich.
   Hoehe bei 38px gedeckelt, damit hochformatige Marken nicht dominieren.
   Ausnahme afa und WiFAm: Beide bestehen aus kleiner Wortmarke plus
   winziger Beschriftung, ihre Box ist also gross, die sichtbare Marke
   klein. Flaechenrechnung ueberschaetzt sie, daher optisch nachjustiert. */
:is(.bklp, body) .proof-band .logo-grid img[alt="Gridwise"] { max-height: 25px; }
:is(.bklp, body) .proof-band .logo-grid img[alt="AiNGEL"]   { max-height: 26px; }
:is(.bklp, body) .proof-band .logo-grid img[alt="WINtec"]   { max-height: 31px; }
:is(.bklp, body) .proof-band .logo-grid img[alt="AFA"]      { max-height: 55px; }
:is(.bklp, body) .proof-band .logo-grid img[alt="WiFAm"]    { max-height: 49px; }
:is(.bklp, body) .proof-band .logo-grid img[alt="Alexander Zureck"] { max-height: 38px; }

@media (max-width: 900px) {
  :is(.bklp, body) .proof-band .wrap { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  :is(.bklp, body) .proof-band .logo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  /* Gestapelt braucht es keine Trennlinie zwischen den Kennwerten */
  :is(.bklp, body) .tb-item { padding: 0; }
  :is(.bklp, body) .tb-item + .tb-item { border-left: 0; margin-top: 14px; }
  :is(.bklp, body) .tb-bar { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ── Mobil: alles mittig ──────────────────────────────────────────
   Zweispaltig wirkte die rechte Logospalte linksbuendig eingerueckt,
   die Kennwerte darunter klebten am linken Rand. */
@media (max-width: 900px) {
  :is(.bklp, body) .proof-band .logo-grid { justify-items: center; }
  :is(.bklp, body) .tb-bar { align-items: center; justify-content: center; }
  :is(.bklp, body) .tb-item { justify-content: center; }
  :is(.bklp, body) .tb-text { align-items: center; text-align: center; }
}
@media (max-width: 560px) {
  :is(.bklp, body) .tb-bar { flex-direction: column; align-items: center; }
  :is(.bklp, body) .tb-item + .tb-item { margin-top: 16px; }
}

/* ── Feinschliff Vertrauensleiste ────────────────────────────────
   1) Pfeil als SVG statt ↗ (U+2197): Das Zeichen wird auf iOS und
      Android als buntes Emoji gerendert, ausserhalb der Typografie.
   2) Mehr Luft zwischen Zahl und Sternen. */
:is(.bklp, body) .tb-stars { margin-left: .42em; }
:is(.bklp, body) .tb-caption::after {
  content: "";
  display: inline-block;
  width: .72em; height: .72em;
  margin-left: .38em;
  vertical-align: -.02em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20stroke%3D%22rgba(248%2C249%2C255%2C0.58)%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%208.5%208.5%203.5%22%2F%3E%3Cpath%20d%3D%22M4.5%203.5h4v4%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
  transition: transform .3s var(--ease-premium);
}
:is(.bklp, body) a.tb-item:hover .tb-caption::after { transform: translate(2px, -2px); }
/* ── Referenztext in den Kacheln ── */
/* Ein Satz je Kachel, wortgleich von /referenzen/ uebernommen. Er steht
   zwischen Kennzahl und Kundenname und erklaert, wodurch die Zahl zustande
   kam. Bewusst der Satz, der die Kennzahl nicht noch einmal nennt. */
:is(.bklp, body) .hp3-metric-text {
  margin: 14px 0 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--grey);
}
/* ── Referenzkarten ── */
/* Styling von /referenzen/: .ref-card bringt Radius, Haarlinie, Flaeche und
   Innenabstand mit. WINtec steht als Beleg vorne, ganze Breite plus
   Signalkontur. Alle Regeln ueber .hp3-proof gefuehrt, sonst gewinnen die
   bestehenden .hp3-metrics-Regeln. */
.bklp .hp3-proof .hp3-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.bklp .hp3-proof .hp3-ref-lead { grid-column: 1 / -1; border-color: var(--signal); }
.bklp .hp3-proof .hp3-metric { text-decoration: none; color: inherit; }
.bklp .hp3-proof .hp3-metric-text {
  margin: 14px 0 0;
  font-size: .95rem; line-height: 1.55;
  color: var(--grey);
  opacity: 1;
}
.bklp .hp3-proof .hp3-ref-cta {
  margin-top: auto; padding-top: 22px;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--signal);
}
.bklp .hp3-proof .hp3-ref-cta::after { content: " →"; }
@media (width < 800px) {
  .bklp .hp3-proof .hp3-metrics { grid-template-columns: 1fr; }
}
/* ── Beweis auf eine Achse ── */
/* Kopf und Zitat sind Lesetext und bleiben linksbuendig. Damit die Sektion
   eine einzige Achse hat, richtet sich auch alles andere links aus. */
.bklp .hp3-proof .sec-head { text-align: left; }
.bklp .hp3-proof .sec-head h2, .bklp .hp3-proof .sec-head p { margin-left: 0; margin-right: 0; }



/* ── Formel-Sektion: zwei Faktoren, ein Ergebnis ──────────────────────── */
:is(.bklp, body) .hp3-fhead {
  text-align: center;
  margin-inline: auto;
}
:is(.bklp, body) .hp3-fhead .eyebrow {
  display: block;
  color: var(--signal);
  font-weight: 700;
  margin-bottom: 10px;
}
:is(.bklp, body) .hp3-fhead h2 {
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
:is(.bklp, body) .hp3-formula {
  list-style: none;
  margin: clamp(30px, 3.4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  column-gap: clamp(42px, 4.6vw, 74px);
  align-items: stretch;
}
:is(.bklp, body) .hp3-fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  background: #fff;
}
:is(.bklp, body) .hp3-fcard::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(clamp(42px, 4.6vw, 74px) / -2);
  transform: translate(50%, -50%);
  width: clamp(30px, 3vw, 44px);
  height: clamp(30px, 3vw, 44px);
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230b1c30'%20stroke-opacity='1'%20stroke-width='4.5'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206%2018%2018M18%206%206%2018'/%3E%3C/svg%3E");
  opacity: 0.3;
  pointer-events: none;
}
:is(.bklp, body) .hp3-fcard:nth-child(2)::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230b1c30'%20stroke-opacity='1'%20stroke-width='4.5'%20stroke-linecap='round'%3E%3Cpath%20d='M4%209H20M4%2015H20'/%3E%3C/svg%3E");
}
:is(.bklp, body) .hp3-fcard:last-child::after { content: none; }
:is(.bklp, body) .hp3-fn {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grey);
}
:is(.bklp, body) .hp3-ft {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
:is(.bklp, body) .hp3-fx {
  margin: 0;
  color: var(--grey);
  line-height: 1.6;
}
:is(.bklp, body) .hp3-fgoal {
  background: var(--signal);
  border-color: var(--signal);
}
:is(.bklp, body) .hp3-fgoal .hp3-fn { color: rgba(255, 255, 255, 0.88); } /* Kontrast: 0.75 ergab 3.85:1 */
:is(.bklp, body) .hp3-fgoal .hp3-ft { color: #fff; }
:is(.bklp, body) .hp3-fgoal .hp3-fx { color: rgba(255, 255, 255, 0.88); }
:is(.bklp, body) .hp3-fcta {
  margin-top: auto;
  align-self: flex-start;
  background: #fff;
  color: var(--signal);
  border-color: #fff;
}
:is(.bklp, body) .hp3-fcta:hover { background: var(--paper); color: var(--signal); }

@media (max-width: 980px) {
  :is(.bklp, body) .hp3-formula { grid-template-columns: 1fr; row-gap: 60px; }
  :is(.bklp, body) .hp3-fcard::after { top: auto; right: 50%; bottom: -60px; transform: translate(50%, 50%); }
}


/* Korrekturen Formel-Sektion */
:is(.bklp, body) .hp3-fhead h2 {
  max-width: min(900px, 100%);
  margin-inline: auto;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
}
:is(.bklp, body) .hp3-fcta.btn.btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--signal);
}
:is(.bklp, body) .hp3-fcta.btn.btn-primary:hover,
:is(.bklp, body) .hp3-fcta.btn.btn-primary:focus-visible {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--signal);
}
:is(.bklp, body) .hp3-fgoal .hp3-fn { white-space: nowrap; }


/* .bklp .btn-primary setzt color mit !important, deshalb hier ebenso */
:is(.bklp, body) .hp3-fcta.btn.btn-primary { color: var(--signal) !important; }
:is(.bklp, body) .hp3-fcta.btn.btn-primary:hover,
:is(.bklp, body) .hp3-fcta.btn.btn-primary:focus-visible { color: var(--signal) !important; }


@media (min-width: 981px) {
  :is(.bklp, body) .hp3-fcta.btn.btn-primary { white-space: nowrap; }
}


@media (max-width: 980px) {
  :is(.bklp, body) .hp3-fcard::after {
    bottom: -30px;
    z-index: 2;
  }
}


/* Dezenter Textlink am Kartenfuß */
:is(.bklp, body) .hp3-flink {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--hair);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
:is(.bklp, body) .hp3-flink::after {
  content: "→";
  display: inline-block;
  transition: transform 0.3s var(--ease-premium);
}
:is(.bklp, body) .hp3-flink:hover,
:is(.bklp, body) .hp3-flink:focus-visible {
  color: var(--signal);
  text-decoration-color: var(--signal);
}
:is(.bklp, body) .hp3-flink:hover::after { transform: translateX(4px); }


/* Spaltenbreite: Abstand und Innenabstand zurücknehmen, damit die Faktor-Karten Textbreite bekommen */
:is(.bklp, body) .hp3-formula {
  --fgap: clamp(26px, 2.8vw, 44px);
  grid-template-columns: 1fr 1fr 1.2fr;
  column-gap: var(--fgap);
}
:is(.bklp, body) .hp3-fcard { padding: clamp(20px, 2.2vw, 30px); }
:is(.bklp, body) .hp3-fcard::after {
  right: calc(var(--fgap) / -2);
  width: clamp(26px, 2.4vw, 34px);
  height: clamp(26px, 2.4vw, 34px);
}
:is(.bklp, body) .hp3-ft { font-size: clamp(1.25rem, 1.8vw, 1.55rem); }

@media (max-width: 980px) {
  :is(.bklp, body) .hp3-formula { grid-template-columns: 1fr; row-gap: 60px; }
  :is(.bklp, body) .hp3-fcard::after {
    top: auto;
    right: 50%;
    bottom: -30px;
    transform: translate(50%, 50%);
    z-index: 2;
  }
}


/* Operatoren in Signalblau */
:is(.bklp, body) .hp3-fcard::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230052ff'%20stroke-width='4.5'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206%2018%2018M18%206%206%2018'/%3E%3C/svg%3E");
  opacity: 1;
}
:is(.bklp, body) .hp3-fcard:nth-child(2)::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230052ff'%20stroke-width='4.5'%20stroke-linecap='round'%3E%3Cpath%20d='M4%209H20M4%2015H20'/%3E%3C/svg%3E");
}
:is(.bklp, body) .hp3-fcard:last-child::after { content: none; }

/* Unterstrich durchgehend bis zum Pfeil: kein Flex-Gap, sondern Inline-Abstand */
:is(.bklp, body) .hp3-flink {
  display: block;
  width: fit-content;
  gap: 0;
}
:is(.bklp, body) .hp3-flink::after { margin-left: 8px; }


/* Pfeil inline halten: in ein inline-block laeuft die Unterstreichung des Links nicht hinein */
:is(.bklp, body) .hp3-flink::after {
  content: "\00a0\00a0→";
  display: inline;
  margin-left: 0;
  padding-left: 0;
  transform: none;
  transition: padding-left 0.3s var(--ease-premium);
}
:is(.bklp, body) .hp3-flink:hover::after,
:is(.bklp, body) .hp3-flink:focus-visible::after {
  transform: none;
  padding-left: 5px;
}



/* ══ Copy-Fassung 31.07.2026: neue Textelemente ══════════════════════════ */

/* Microcopy unter dem Hero-CTA */
:is(.bklp, body) .hp3-micro {
  margin: 16px auto 0;
  max-width: 52ch;
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--grey);
}

/* Einleitungszeile über der Formel */
:is(.bklp, body) .hp3-fintro { margin-inline: auto; }

/* Microcopy unter dem CTA der Ergebnis-Karte */
:is(.bklp, body) .hp3-fmicro {
  display: block;
  margin-top: -4px;
  font-family: var(--display);
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88); /* Kontrast: 0.8 ergab 4.19:1 */
}

/* Ehrlichkeits-Zweizeiler unter der Formel */
:is(.bklp, body) .hp3-guard {
  margin: clamp(22px, 2.2vw, 32px) auto 0;
  max-width: 84ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--grey);
  text-align: center;
}



/* ── Karten-Labels ohne Mono/Versalien ──────────────────────────────────── */
:is(.bklp, body) .hp3-metric-l,
:is(.bklp, body) .hp3-step-n {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Portrait-Regeln (Rahmen/Schatten) liegen jetzt global in "Main". */





/* ── Ergebnis-Karten im Look von /referenzen/: dunkle Karte, weisser Button ── */
:is(.bklp, body) .hp3-proof .hp3-metric {
  background: var(--ink);
  border-color: rgba(255, 255, 255, 0.1);
  padding: 44px 36px;
  gap: 12px;
}
:is(.bklp, body) .hp3-proof .hp3-metric:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}
:is(.bklp, body) .hp3-proof .hp3-ref-lead { border-color: rgba(255, 255, 255, 0.28); }
:is(.bklp, body) .hp3-proof .hp3-metric-l { color: var(--signal-soft); }
:is(.bklp, body) .hp3-proof .hp3-metric strong {
  color: var(--paper);
  font-size: 1.35rem;
}
/* Der geerbte 4-Zeilen-Clamp aus .ref-card wird hier bewusst abgeschaltet:
   kein Text soll mitten im Wort abbrechen. */
:is(.bklp, body) .hp3-proof .hp3-metric-text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  color: rgba(248, 249, 255, 0.66);
  margin-bottom: 8px;
}
:is(.bklp, body) .hp3-proof .hp3-ref-cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  transition: background 0.3s var(--ease-premium), color 0.3s var(--ease-premium);
}
:is(.bklp, body) .hp3-proof .hp3-metric:hover .hp3-ref-cta {
  background: var(--signal);
  color: #fff;
}



/* Der Akkordeon-Block (.hp3-faq, .faq-*) liegt in "Main". */

/* ── Textlinks: Unterstrich laeuft nach rechts aus, Pfeil wandert mit ────
   text-decoration laesst sich nicht animieren, deshalb liegt der Strich
   als Hintergrund-Verlauf darunter. Er ist rechts verankert und schrumpft
   auf null, der Rest der Zeile bleibt dabei stehen. Die Pfeil-Breite
   (--arrow-space) bleibt frei, damit der Strich nur unter dem Text liegt. */
:is(.bklp, body) .hp3-flink {
  --arrow-space: 1.95em;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: right var(--arrow-space) bottom 0.02em;
  background-size: calc(100% - var(--arrow-space)) 1px;
  transition: background-size 0.45s var(--ease-premium), color 0.3s var(--ease-premium);
}
:is(.bklp, body) .hp3-flink:hover,
:is(.bklp, body) .hp3-flink:focus-visible {
  background-size: 0 1px;
  /* Farbe bleibt konstant, Blau ist den Schaltflaechen vorbehalten.
     Die aeltere Regel setzt hier --signal, deshalb ausdruecklich --ink. */
  color: var(--ink);
}
:is(.bklp, body) .hp3-flink::after {
  transition: padding-left 0.45s var(--ease-premium);
}
:is(.bklp, body) .hp3-flink:hover::after,
:is(.bklp, body) .hp3-flink:focus-visible::after {
  padding-left: 10px;
}
@media (prefers-reduced-motion: reduce) {
  :is(.bklp, body) .hp3-flink { transition: none; }
  :is(.bklp, body) .hp3-flink::after { transition: none; }
}



/* ── Formel: mehr Luft um die Operatoren, Ergebnis-Karte kompakter ──────
   Der Operator sitzt ueber calc(var(--fgap) / -2) in der Mitte der Luecke
   und wandert automatisch mit. */
:is(.bklp, body) .hp3-formula {
  --fgap: clamp(34px, 3.8vw, 62px);
  grid-template-columns: 1fr 1fr 1.04fr;
}
:is(.bklp, body) .hp3-fgoal { padding: clamp(18px, 2vw, 26px); }
:is(.bklp, body) .hp3-fgoal .hp3-ft { font-size: clamp(1.18rem, 1.65vw, 1.42rem); }
:is(.bklp, body) .hp3-fgoal .hp3-fx { font-size: 0.95rem; line-height: 1.55; }
:is(.bklp, body) .hp3-fgoal .hp3-fcta { padding: 13px 22px; }

@media (max-width: 980px) {
  :is(.bklp, body) .hp3-formula { grid-template-columns: 1fr; }
}

/* .who-motto liegt jetzt in "Main". */


/* @section ueber-seite
   @owns    .page-id-398, .statement, .hero, .re-card, .re-num, .tl-date */
/* ══ Über-Seite (post 398, /ueber/) ══════════════════════════════════════
   Angleich an das Startseiten-System: getrennte helle Karten, Eyebrows in
   der Display-Schrift, Signalblau nur noch für CTAs. Bewusst auf
   body.page-id-398 begrenzt, damit /finanz/, /technischer-mittelstand/
   und /ki-suche/ (nutzen .re-card ebenfalls) unverändert bleiben. */

/* Karten: helle Einzelflächen statt lavendelfarbener Block */
body.page-id-398 .bklp .re-card {
  background: var(--paper);
}

/* Ziffern 01/02/03: Display-Schrift, ruhig statt blau */
body.page-id-398 .bklp .re-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grey);
}

/* Karten-Labels wie die Eyebrows der Startseite */
body.page-id-398 .bklp .tl-date,
body.page-id-398 .bklp .statement .spec {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grey);
}

/* Statement: Display-Größe im Seitenraster, Blau nicht als Dekoration */
body.page-id-398 .bklp .statement h2 {
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
}
body.page-id-398 .bklp .statement h2 .accent {
  color: var(--ink);
}



/* ── Aufräumen 01.08.2026 ─────────────────────────────────────────────── */

/* BUG: .final erbt die Farben der dunklen CTA-Sektion. In der hellen
   Variante standen Eyebrow und H2 fast weiß auf Lavendel, also unlesbar. */
/* Eyebrow und H2 der hellen .final-Sektion stehen mit !important in
   @section ueber-final-hell (02 Komponenten) und galten schon vorher von
   dort. Die wirkungslosen Zwillinge sind hier entfallen. */
body.page-id-398 .bklp .final.light p { color: var(--grey); }

/* Sektionsabstaende kommen seit 01.08.2026 global aus "Main" (52px). */

/* Mobile: die H1 war 57px groß und brach in sechs Zeilen */
@media (max-width: 640px) {
  body.page-id-398 .bklp .about-hero-grid h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.5rem);
    line-height: 1.12;
  }
  body.page-id-398 .bklp .statement h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}



/* Hero hatte oben 0 Innenabstand und klebte unter der Kopfzeile */
body.page-id-398 .bklp .hero { padding-top: clamp(48px, 6vw, 88px); }



/* Mobile: die Sektionen standen mit Desktop-Abstaenden untereinander */
@media (max-width: 700px) {
  body.page-id-398 .bklp .hero { padding-top: clamp(32px, 8vw, 48px); padding-bottom: clamp(40px, 9vw, 56px); }
  body.page-id-398 .bklp .who-in { gap: 26px; }
  body.page-id-398 .bklp .ach-grid { gap: 14px; }
}

/* ═══ before-after-slider.2503f8e.css ═══ */
/* Zusammengefuehrt am 02.08.2026. Der Inhalt dieses Sheets steht jetzt in
   "01 Fundament", "02 Komponenten" oder "03 Seiten". Dieses Sheet bleibt
   leer stehen, damit die Ladereihenfolge der drei neuen unveraendert bleibt.
   Siehe REFACTOR.md, Schritt 4. */

/* ═══ beitragsseite.aa02db9.css ═══ */
/* Zusammengefuehrt am 02.08.2026. Der Inhalt dieses Sheets steht jetzt in
   "01 Fundament", "02 Komponenten" oder "03 Seiten". Dieses Sheet bleibt
   leer stehen, damit die Ladereihenfolge der drei neuen unveraendert bleibt.
   Siehe REFACTOR.md, Schritt 4. */

/* ═══ blog-filter.5756ed7.css ═══ */
/* Zusammengefuehrt am 02.08.2026. Der Inhalt dieses Sheets steht jetzt in
   "01 Fundament", "02 Komponenten" oder "03 Seiten". Dieses Sheet bleibt
   leer stehen, damit die Ladereihenfolge der drei neuen unveraendert bleibt.
   Siehe REFACTOR.md, Schritt 4. */

/* ═══ brand-kit-page.2ee8e48.css ═══ */
/* Zusammengefuehrt am 02.08.2026. Der Inhalt dieses Sheets steht jetzt in
   "01 Fundament", "02 Komponenten" oder "03 Seiten". Dieses Sheet bleibt
   leer stehen, damit die Ladereihenfolge der drei neuen unveraendert bleibt.
   Siehe REFACTOR.md, Schritt 4. */

/* ═══ case-study.b9b80ac.css ═══ */
/* Zusammengefuehrt am 02.08.2026. Der Inhalt dieses Sheets steht jetzt in
   "01 Fundament", "02 Komponenten" oder "03 Seiten". Dieses Sheet bleibt
   leer stehen, damit die Ladereihenfolge der drei neuen unveraendert bleibt.
   Siehe REFACTOR.md, Schritt 4. */

/* ═══ crosscheck.e340520.css ═══ */
/* Zusammengefuehrt am 02.08.2026. Der Inhalt dieses Sheets steht jetzt in
   "01 Fundament", "02 Komponenten" oder "03 Seiten". Dieses Sheet bleibt
   leer stehen, damit die Ladereihenfolge der drei neuen unveraendert bleibt.
   Siehe REFACTOR.md, Schritt 4. */

/* ═══ formulare.6b632d9.css ═══ */
/* Zusammengefuehrt am 02.08.2026. Der Inhalt dieses Sheets steht jetzt in
   "01 Fundament", "02 Komponenten" oder "03 Seiten". Dieses Sheet bleibt
   leer stehen, damit die Ladereihenfolge der drei neuen unveraendert bleibt.
   Siehe REFACTOR.md, Schritt 4. */

/* ═══ homepage-v3.8cf1809.css ═══ */
/* Zusammengefuehrt am 02.08.2026. Der Inhalt dieses Sheets steht jetzt in
   "01 Fundament", "02 Komponenten" oder "03 Seiten". Dieses Sheet bleibt
   leer stehen, damit die Ladereihenfolge der drei neuen unveraendert bleibt.
   Siehe REFACTOR.md, Schritt 4. */

/* ═══ ueber-seite.fc1e9f3.css ═══ */
/* Zusammengefuehrt am 02.08.2026. Der Inhalt dieses Sheets steht jetzt in
   "01 Fundament", "02 Komponenten" oder "03 Seiten". Dieses Sheet bleibt
   leer stehen, damit die Ladereihenfolge der drei neuen unveraendert bleibt.
   Siehe REFACTOR.md, Schritt 4. */

/* ═══ etch-reste ═══ */
/* @section etch-reste
   Regeln, die in Etch NICHT in den Stylesheets liegen, sondern in der
   Option etch_styles (elementeigene Stile). Sie wandern bei einem Export
   der Stylesheets nicht mit und fehlen deshalb nach einem Umzug.

   Von 568 Eintraegen in etch_styles tragen nur FUENF echtes CSS:
   - vier Etch-Vorgaben ueber :where([data-etch-element="..."]). Dieses
     Attribut kommt im ausgelieferten HTML null Mal vor, sie gelten also
     nur auf der Builder-Leinwand und sind kein Migrationsfall (geprueft
     29.08.2026 an /ueber/).
   - diese eine hier. */
.cite-avatar { width: 60.2px !important; height: 90.4px !important; }

/* Aus einem INLINE-Stylesheet des Etch-Themes, nicht aus den exportierten
   Blaettern. Wirkt auf JEDE Seite:

   scrollbar-gutter: stable laesst 100vw zu 1385px statt 1400px aufloesen
   (der Platz der Bildlaufleiste wird reserviert und aus vw herausgerechnet).
   Alle vw-basierten Abstaende verschieben sich dadurch. Konkret ergab
   clamp(52px, 5.2vw, 96px) live 72,02px und in der Sandbox 72,8px -- 0,78px
   je Sektion, auf jeder einzelnen Seite. Das war ueber Tage der haeufigste
   Layoutunterschied, und ich hatte ihn zweimal als "Rest" abgetan, statt
   die gewinnende Regel zu erfragen.

   Gefunden erst, als die Pruefung Layout mass statt nur Struktur und Text. */
html { text-size-adjust: none; scrollbar-gutter: stable; }

/* ── Bricks-Basisstile neutralisieren ─────────────────────────────────────
   Bricks liefert eigene Grundregeln fuer HTML-Elemente mit (in einer
   Cascade-Layer, also nur wirksam, wo das Projekt-CSS schweigt). Etch hatte
   diese Regeln nicht. Wo das Projekt nichts sagt, entsteht dadurch ein
   Unterschied, den niemand gebaut hat.

   blockquote: Bricks setzt font-family georgia, font-size 1.3em und einen
   linken Rahmen. Auf /referenzen/pflege-und-wohnen-bayern/ wurde das Zitat
   dadurch 23,4px statt 18px (29.08.2026). Etch liess das Element erben.

   Nicht pauschal alles zuruecksetzen: nur die Eigenschaften, die messbar
   abweichen. Ein Rundumschlag wuerde Regeln treffen, die gebraucht werden. */
:is(.bklp, body) blockquote {
  font-family: inherit;
  font-size: inherit;
  border-left: 0;
  /* Bricks setzt zusaetzlich position: relative. Das verschiebt zwar nichts
     sichtbar, aendert aber den Bezugspunkt fuer alles absolut Positionierte
     darin -- und damit die gemessene Lage von cite und .cite-text. */
  position: static;
}

/* Bricks stylt auch die Quellenangabe im Zitat:
   blockquote cite { display:block; font-size:.8em; font-style:normal;
                     margin-top:.5em; opacity:.5; text-transform:uppercase }
   Etch hatte davon nichts. Die Fallstudien bringen ihr eigenes Zitat-Layout
   mit (Avatar links, Name und Rolle rechts), und Bricks' Vorgaben blassten
   es ab und setzten Versalien. Deshalb auf die Ausgangswerte zurueck --
   was das Projekt selbst setzt, gewinnt danach wie gewohnt. */
:is(.bklp, body) blockquote cite {
  display: inline;
  font-size: inherit;
  font-style: inherit;
  margin-top: 0;
  opacity: 1;
  text-transform: none;
}

/* Die Absaetze in "Ueber Kompakt" trugen in Etch Inline-Stile
   (font-size: 1.05rem; line-height: 1.65; margin-bottom). Beim Bau der
   PHP-Komponente habe ich sie entfernt mit der Begruendung, sie gehoerten
   ins Projekt-CSS -- und dann vergessen, sie dort zu ergaenzen. Folge:
   18px statt 16,8px, die Sektion 63px kuerzer, und dieselben 63px fehlten
   auf jeder Seite, die diese Komponente einbindet (29.08.2026 im
   Bildvergleich aufgefallen, nicht in der Struktur- oder Textpruefung).

   Ein entfernter Inline-Stil ist erst dann sauber ersetzt, wenn die Regel
   auch wirklich steht. */
:is(.bklp, body) .who-content > p:not(.who-motto) {
  font-size: 1.05rem;
  line-height: 1.65;
}
/* :not(.who-motto) ist noetig: das Motto ist ebenfalls ein <p> in
   .who-content und hat eine eigene Groesse und Zeilenhoehe. Ohne den
   Ausschluss traf die Regel auch das Motto (55px auf 48px geschrumpft),
   und first-of-type zaehlte das Motto mit, wodurch die Abstaende der
   beiden Textabsaetze um eine Stelle verrutschten. */
:is(.bklp, body) .who-content > p:not(.who-motto):nth-of-type(2) { margin-bottom: 16px; }
:is(.bklp, body) .who-content > p:not(.who-motto):nth-of-type(3) { margin-bottom: 24px; }

/* Der klebende Kopf, richtig verankert.
   ERSTE FASSUNG setzte hier `position: static`, weil Bricks #brx-header auf
   relative stellt. Das war die falsche Diagnose. Der Grund, warum der Kopf
   beim Scrollen verschwand, ist ein anderer: Ein sticky-Element klebt nur
   INNERHALB seines umschliessenden Blocks. Der ist hier #brx-header, und der
   ist genau so hoch wie der Kopf selbst -- gemessen 65 px. Nach 65 px
   gescrollt hat header.mh keinen Platz mehr zum Kleben und faehrt mit hoch.
   Deshalb fiel es immer wieder aus, egal was an header.mh stand.

   Richtig ist, #brx-header selbst kleben zu lassen. Sein umschliessender
   Block ist der body (auf der Startseite 12.488 px hoch), also reicht der
   Halt ueber die ganze Seite. header.mh darf sticky bleiben; innerhalb des
   nun ebenfalls klebenden Elternteils ist das wirkungslos, aber unschaedlich,
   und die Regel muss dafuer nicht angefasst werden.

   z-index hier und nicht nur an header.mh: mit der Positionierung wird
   #brx-header zum Stapelkontext, und dessen Ebene entscheidet gegen den
   Seiteninhalt. */
#brx-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Listen ohne Aufzaehlungszeichen. Steht live im Inline-Stylesheet des
   Etch-Themes, das der Spiegel nicht erfasst -- dieselbe Quelle wie
   scrollbar-gutter. Ohne die Regel zeigte die Blogseite einen Punkt vor
   jeder Beitragskarte (29.08.2026, von Oliver gesehen).

   Dass die Vorgabe "none" ist, laesst sich am Bestand ablesen: die
   Datenschutzseite schaltet Punkte mit
   "body.page-id-222 main.wrap ul { list-style: disc }" eigens WIEDER EIN.
   Eine solche Regel schreibt niemand, wenn Punkte ohnehin erscheinen. */
:is(.bklp, body) :is(ul, ol) { list-style: none; }

/* ═══ aenderungen ═══ */
/* Gestaltungsaenderungen, die in der Sandbox entstanden sind und noch
   NICHT auf der Live-Seite stehen. Bewusst getrennt von etch-reste.css:
   dort steht, was der Umzug wiederherstellt, hier was neu ist. */

/* Filterknoepfe auf der Blogseite: Hover in Signalblau statt Dunkel.
   Die Kartenknoepfe machen das bereits (.bc-card .btn-ghost:hover), die
   Filterknoepfe fielen aus der Reihe. Auf Wunsch von Oliver, 29.08.2026. */
/* :not(.is-active) ist noetig: der aktive Knopf hat dunkelblauen Grund
   (background: var(--ink)) und helle Schrift. Ohne die Ausnahme legte der
   Hover blaue Schrift darauf, Signalblau auf Tintenblau, praktisch
   unlesbar. Beide Regeln haben dieselbe Spezifitaet, der Hover steht
   spaeter und gewann. Befund 29.08.2026. */
:is(.bklp, body) .bc-filter-btn:hover:not(.is-active) {
  border-color: var(--signal);
  color: var(--signal);
}


/* aufklappmenue-breite start
   Bricks gibt jedem eigenen Element `[class*="brxe-"] { max-width: 100% }`.
   Beim Aufklappmenue heisst 100 % die Breite des <li> darueber, also 80 px.
   `min-width: 240px` hebt den Kasten darauf zurueck -- und dort bleibt er
   stehen, obwohl "Fuer Finanz & regulierte Branchen" mit Polster 270 px
   braucht. Gemessen: clientWidth 238, scrollWidth 250, also 12 px Ueberlauf;
   die Wortenden standen rechts ueber dem Kastenrand.
   In Etch gab es die Klasse nicht, dort war der Kasten 266 px breit.
   max-content statt der Deckelung, min-width bleibt als Untergrenze. */
@media (min-width: 821px) {
  .mh__submenu {
    width: max-content;
    max-width: min(360px, 90vw);
  }
}
/* aufklappmenue-breite ende */


/* karte-hebt-knopf start
   Beim Ueberfahren der ganzen Karte soll der Weiterlesen-Knopf mitgehen,
   nicht erst beim Treffen des Knopfes selbst. Dieselben Werte wie
   .bc-card .btn-ghost:hover, damit beide Wege gleich aussehen.
   Das !important bei color ist noetig, weil die Grundregel es ebenfalls
   setzt. Auf Wunsch von Oliver, 29.08.2026. */
:is(.bklp, body) .bc-card:hover .btn-ghost {
  background: var(--signal);
  color: #fff !important;
  border-color: var(--signal);
}
/* karte-hebt-knopf ende */


/* verwaltungsleiste start
   Die Verwaltungsleiste von WordPress liegt fest oben (32 px, unter 783 px
   Fensterbreite 46 px). Der klebende Kopf sass mit top: 0 dahinter und war
   fuer angemeldete Nutzer halb verdeckt. Gilt nur mit .admin-bar, Besucher
   sehen davon nichts. */
body.admin-bar #brx-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #brx-header { top: 46px; }
}
/* verwaltungsleiste ende */


/* yt-hinweis-kontrast start
   Der Hinweis unter der YouTube-Fassade stand auf geerbtem Grau mit
   opacity: .7 -- gemessen 1,86:1 gegen den Seitengrund, gefordert sind 4,5:1.
   Jetzt die Sekundaerfarbe der Seite bei voller Deckkraft: 8,95:1.

   Zwei Klassen im Selektor, nicht !important: das Snippet gibt sein CSS im
   Fussbereich aus und laedt damit NACH dem Customizer. Mit gleicher
   Spezifitaet wuerde es gewinnen, mit 0,2,0 gewinnt diese Regel. */
.yt-facade .yt-facade__hint {
  color: #434656;
  opacity: 1;
}
/* yt-hinweis-kontrast ende */


/* kontrast-blau start
   BEFUND 29.08.2026 (axe-core, alle 36 Seiten): 45 Kontrastfehler, und sie
   haben alle dieselbe Ursache -- die beiden Markenblaus sitzen vertauscht.
   Das helle Blau steht auf hellem Grund, das dunkle auf dunklem:

     .flow .step-n        #6b8cff auf #f8f9ff   2,93:1  (noetig 4,5)
     .phasen-band .step-n #0052ff auf #0b1c30   2,99:1  (noetig 3,0)
     .phasen-band a       #0052ff auf #0b1c30   2,99:1  (noetig 4,5)
     .fundament .flowlabel  Weiss bei 45 %      4,24:1  (noetig 4,5)

   Korrigiert wird mit der vorhandenen Palette, kein neuer Markenton:
   auf dunklem Grund das helle Blau (5,58:1), auf hellem Grund ein Ton
   zwischen soft und signal (#3562ff, 4,60:1) -- der hellste, der die
   Anforderung noch erfuellt, damit die Ziffern weich bleiben. */

/* hell: dunkler als --signal-soft, heller als --signal */
:is(.bklp, body) .flow .step-n,
:is(.bklp, body) .flow .step:hover .step-n { color: #3562ff; }

/* dunkel: das helle Blau gehoert hierher */
:is(.bklp, body) .phasen-band .step-n,
:is(.bklp, body) .phasen-band .step:hover .step-n,
:is(.bklp, body) .phasen-steps .step-n,
:is(.bklp, body) .phasen-band a:not(.btn):not([class*="btn-"]) { color: var(--signal-soft); }

/* dunkel: Weiss bei 45 % reicht nicht, bei 62 % schon */
:is(.bklp, body) .fundament .flowlabel { color: rgba(248, 249, 255, 0.62); }
/* kontrast-blau ende */


/* kontrast-reste start
   Drei Einzelfaelle aus dem axe-Lauf ueber alle 36 Seiten.

   1. Syntaxfarbe im Code-Block: #fc1f49 auf #f5f6f7 sind 3,57:1.
      #e2032d ist der naechstliegende Ton mit 4,53:1.
   2. WordPress-Knopfblock auf dunklem Grund: Signalblau auf #32373c sind
      2,09:1. #709eff bringt 4,59:1. (--signal-soft reicht dort mit 3,90:1
      nicht, deshalb ein eigener, minimal hellerer Wert.)
   3. Link im dunklen Fliesstext: Bricks' Standard-Linkfarbe
      (oklch(0.65 0.107 221)) hebt sich zu wenig vom weissen Text ab.
      Markenblau plus Unterstreichung -- die Unterscheidung darf nicht
      allein an der Farbe haengen. */
:is(.bklp, body) code { color: #e2032d; }

/* Spezifitaet: `body.single-post .post-content a` hat 0,2,2 und schlaegt
   0,2,0. Deshalb hier mit Kontext und Elementteil auf 0,3,2. */
:is(.bklp, body) .post-content a.wp-block-button__link,
:is(.bklp, body) .post-content a.wp-element-button,
:is(.bklp, body) a.wp-block-button__link,
:is(.bklp, body) a.wp-element-button { color: #709eff; }

:is(.bklp, body) .dark p > a:not(.btn):not([class*="btn-"]),
:is(.bklp, body) [class*="dunkel"] p > a:not(.btn):not([class*="btn-"]),
:is(.bklp, body) .final p > a:not(.btn):not([class*="btn-"]) {
  color: var(--signal-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* kontrast-reste ende */


/* katalogseite start
   Auf /komponenten/ laeuft der Inhaltsbereich ueber die volle Breite. Die
   Bausteine bringen ihre Sektionsbreite selbst mit; im normalen Container
   waeren sie dort schmaler als auf der Seite. */
body.tb2b-hat-katalog #brx-content {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}
/* katalogseite ende */

/* linkfarbe start
   Ein Link ohne eigene Klasse bekam bisher Bricks' Standard, ein Tuerkis
   (oklch(0.65 0.107 221)) -- eine Farbe, die im Designsystem nicht vorkommt.
   Sichtbar war das auf der Komponentenseite und ueberall, wo eine Regel
   fehlte. Markenblau ist der richtige Standard und traegt auf hellem Grund
   5,47:1.

   BEWUSST NICHT auf dunklem Grund: dort kommt Markenblau nur auf 2,99:1.
   Die dunklen Baender (.phasen-band, .final, .fundament) haben eigene
   Regeln mit hoeherer Spezifitaet, die weiterhin das helle Blau setzen --
   5,58:1. Deshalb bleibt das helle Blau dort, wo es hingehoert, und
   verschwindet dort, wo es nur Standard war. */
:is(.bklp, body) a:not([class]):not(.skip-link) {
  color: var(--signal);
}
/* linkfarbe ende */


/* routing start
   Der Routing-Abschnitt auf der Startseite trug sein Layout in sieben
   style-Attributen: zwei Spalten, Karten als Flex-Spalte mit Knopf unten,
   Knopf ueber die volle Breite. Inline-Stile sind hier falsch aufgehoben --
   sie stehen im Seitenbaum statt im Stylesheet, lassen sich nicht
   ueberschreiben und hindern jeden Baustein daran, den Abschnitt zu
   uebernehmen.

   Dieselben Werte, nur an der richtigen Stelle. Auf .routing eingegrenzt,
   damit kein anderes Kartenraster davon beruehrt wird. Geprueft ueber
   berechnete Stile in beiden Ansichten: kein Unterschied. */
.bklp .routing .pain-grid { grid-template-columns: 1fr 1fr; }
.bklp .routing .pain-item { display: flex; flex-direction: column; justify-content: space-between; }
.bklp .routing .pain-item > div + div { margin-top: 24px; }
.bklp .routing .pain-item .btn { width: 100%; text-align: center; margin-top: 0; }
/* routing ende */


/* referenzen-drei start
   Dritte Spalte fuer die Referenz-Karten, waehlbar am Baustein. Zwei Spalten
   bleiben die Vorgabe; auf dem Telefon greift weiterhin die bestehende
   Ein-Spalten-Regel. */
@media (min-width: 861px) {
  .bklp .hp3-proof .hp3-metrics--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* referenzen-drei ende */


/* breite-grosse-schirme start
   Bisher wuchsen auf breiten Schirmen nur die Kopfleiste und der Hero
   (1080 -> 1240 ab 1500px -> 1340 ab 1800px). Alle uebrigen Sektionen
   blieben bei 1080. Auf einem 1920er Schirm stand der Hero also 260px
   breiter als der Abschnitt direkt darunter -- die Seite wirkte, als
   rutsche sie nach dem Hero zusammen.

   Jetzt folgen alle Inhaltsbreiten derselben Treppe. Ausgenommen bleibt
   .wrap.narrow: das ist bewusst Lesebreite fuer lange Texte und soll
   NICHT mitwachsen. */
@media (min-width: 1500px) {
  :is(.bklp, body) .wrap:not(.narrow) { max-width: 1240px; }
}
@media (min-width: 1800px) {
  :is(.bklp, body) .wrap:not(.narrow) { max-width: 1340px; }
}
/* breite-grosse-schirme ende */





/* abschluss-varianten start
   Die zwei Schlussbaender auf /ueber/ trugen ihre Farben in style-Attributen:
   eines auf Panel-Grund mit dunkler Schrift, eines auf Tintengrund mit heller.
   Das sind keine Einzelfaelle, sondern zwei Auspraegungen desselben Bausteins.
   Als Variantenklassen kann der Baustein sie fuehren -- und die Redaktion
   waehlt sie im Builder, statt CSS in ein Attribut zu tippen.

   Werte eins zu eins aus den bisherigen Inline-Stilen uebernommen.
   #8FA8FF ist das hellere Blau: Signalblau kaeme auf dunklem Grund nur auf
   2,99:1, dieses auf 7,53:1. */
:is(.bklp, body) .final--hell { background: var(--panel); color: var(--ink); }
/* Spezifitaet: body:not(.home) .bklp .final .mt16 setzt 42ch mit vier
   Klassen. Gleichziehen (body + .bklp + .final.final--hell + .mt16) und
   spaeter stehen genuegt -- mehr Gewicht waere unnoetig. */
body .bklp .final.final--hell .mt16 { max-width: 100%; }
:is(.bklp, body) .final--hell > .wrap > p { color: var(--grey); max-width: 62ch; margin: 0 auto 36px; }

:is(.bklp, body) .final--dunkel { background: var(--ink); color: var(--paper); }
:is(.bklp, body) .final--dunkel .eyebrow { color: #8FA8FF; }
body .bklp .final.final--dunkel .mt16 { color: var(--paper); max-width: 100%; }
:is(.bklp, body) .final--dunkel > .wrap > p { color: rgba(251, 250, 248, 0.7); max-width: 62ch; margin: 0 auto 36px; }
/* abschluss-varianten ende */


/* karte-zustaende start
   Zwei Zustaende einer Rasterkarte, die bisher als style-Attribut im
   Seitenbaum standen:

   --knopf   Text oben, Knopf unten. Damit sitzt der Knopf in jeder Karte
             auf gleicher Hoehe, auch wenn die Texte unterschiedlich lang
             sind. Bisher auf /technischer-mittelstand/, /brand-kit/ und der
             Startseite je einzeln eingetragen.
   --hervor  Die eine Karte, die heraussticht: Rahmen in Signalblau, Grund
             leicht eingefaerbt, Ueberschrift in Signalblau.

   Werte eins zu eins aus den bisherigen Inline-Stilen. */
:is(.bklp, body) .pain-item--knopf { display: flex; flex-direction: column; justify-content: space-between; }
:is(.bklp, body) .pain-item--knopf > div + div { margin-top: 24px; }
/* a.btn.btn-primary mitschreiben: `.bklp a.btn.btn-primary` setzt 12px
   margin-top mit einem Element mehr und gewinnt sonst. Gemessen, nicht
   geraten. */
:is(.bklp, body) .pain-item--knopf a.btn.btn-primary { width: 100%; text-align: center; margin-top: 0; }

:is(.bklp, body) .pain-item--hervor { border: 2px solid var(--signal); background: color-mix(in srgb, var(--signal) 4%, var(--paper)); }
:is(.bklp, body) .pain-item--hervor h3 { color: var(--signal); }
/* karte-zustaende ende */


/* problemlage-optionen start
   Zwei Einstellungen, die auf /ueber/ als style-Attribut standen:
   --gross         etwas groesserer Fliesstext in voller Tintenfarbe. Der
                   Abschnitt traegt dort die Kurzbiografie, die sich lesen
                   soll wie Text und nicht wie eine Bildunterschrift.
   --titel-schmal  Ueberschrift auf 15 Zeichen Breite. Erzwingt den Umbruch,
                   der die zweispaltige Fassung ausbalanciert.
   Werte eins zu eins aus den bisherigen Inline-Stilen. */
:is(.bklp, body) .pain--gross .who-in > div > p { font-size: 1.1rem; line-height: 1.6; color: var(--ink); }
:is(.bklp, body) .pain--titel-schmal .who-in h2 { max-width: 15ch; }
/* problemlage-optionen ende */


/* hero-nachsatz start
   Manche Heros tragen unter dem Lead einen zweiten Absatz. Der hatte keine
   Klasse und lief deshalb ueber die volle Spaltenbreite -- auf /ki-suche/
   1016px gegen 796px des Leads darueber. Das liest sich schlecht und sah
   aus, als gehoere er nicht dazu.

   Gleiche Lesebreite wie der Lead (62ch), gleiche Zentrierung. */
:is(.bklp, body) .hero .hero-nachsatz { max-width: 62ch; margin: 0 auto; }
/* hero-nachsatz ende */


/* Symbole fuer die Karten 3 bis 5 der Ausgangslage auf der Startseite.
   Die Sektion hatte zwei Karten, das CSS entsprechend zwei Symbole. Mit der
   neuen Copy sind es fuenf; die Karten 3 bis 5 zeigten ein leeres Kaestchen,
   weil ::before zwar gezeichnet, aber kein Bild gesetzt wurde.
   Gleicher Stil wie 1 und 2: 24x24, Strich 1.6, Farbe #0b1c30.
   Nur die Startseite hat mehr als zwei .routing-Karten (Brand Kit hat zwei). */
/* 3: Website wird neu gemacht: Wireframe/Layout */
.bklp .routing .pain-item:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230b1c30%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%224.5%22%20width%3D%2217%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3.5%209.5h17%22%2F%3E%3Cpath%20d%3D%22M9.5%2019.5v-10%22%2F%3E%3C%2Fsvg%3E"); }
/* 4: Inhalte kommen nicht nach: gestapelte Ebenen */
.bklp .routing .pain-item:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230b1c30%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l9%204.5-9%204.5-9-4.5z%22%2F%3E%3Cpath%20d%3D%22M3%2012l9%204.5%209-4.5%22%2F%3E%3Cpath%20d%3D%22M3%2016.5L12%2021l9-4.5%22%2F%3E%3C%2Fsvg%3E"); }
/* 5: Alles muss belegbar sein: Waage */
.bklp .routing .pain-item:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230b1c30%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v16%22%2F%3E%3Cpath%20d%3D%22M6.5%2020h11%22%2F%3E%3Cpath%20d%3D%22M4%207.5l8-2.5%208%202.5%22%2F%3E%3Cpath%20d%3D%22M6.8%208.2L4.3%2014h5z%22%2F%3E%3Cpath%20d%3D%22M17.2%208.2L14.7%2014h5z%22%2F%3E%3C%2Fsvg%3E"); }
/* Ausgangslage-Symbole ende */


/* ── Sektionskopf, Mobil ───────────────────────────────
   .pain-lead und Geschwister zentrieren Ueberschrift und Absatz per
   margin:auto. Ab 768px stimmt das, weil der Kopf dort auch
   text-align:center bekommt. Darunter bleibt der Text linksbuendig,
   und die Automargin schiebt nur den Kasten in die Mitte: die
   Ueberschrift steht dann eingerueckt, Eyebrow und Absatz nicht
   (gemessen 30.08.2026 bei 480 bis 767px, Versatz bis 100px).
   Dieselbe Grenze wie die Hausregel, die den Kopf linksbuendig setzt:
   width < 700px. Eine eigene Grenze wuerde dazwischen einen Streifen
   erzeugen, in dem der Text zentriert, der Kasten aber links steht. */
@media (width < 700px) {
	.bklp .pain-lead .sec-head h2, .bklp .ideal .sec-head h2,
	.bklp .brandkit .sec-head h2, .bklp .kisuche .sec-head h2,
	.bklp .pain-lead .sec-head p, .bklp .ideal .sec-head p,
	.bklp .brandkit .sec-head p, .bklp .kisuche .sec-head p {
		margin-left: 0; margin-right: 0;
	}
}
/* Sektionskopf Mobil ende */


/* ── Wegweiser ─────────────────────────────────────────
   Breite Zeilen als Abzweigung kurz vor dem Schluss: Symbol links,
   Titel und ein Satz in der Mitte, Pfeil rechts. Untereinander, weil
   die Zeilen eine Reihenfolge haben.
   Die ganze Zeile ist der Link; der Pfeil ist Dekor und traegt kein
   eigenes Ziel. Karten heben sich beim Hover nicht an (Hausregel),
   deshalb wandert nur der Pfeil ein Stueck. */
:is(.bklp, body) .weg-liste {
	list-style: none; margin: 40px 0 0; padding: 0;
	display: grid; gap: 16px;
	/* Schmaler als der Wrap: die Zeilen sind Text, keine Tabelle. Ueber
	   rund 900px laufen die Saetze zu breit, und der Pfeil steht so weit
	   vom Text weg, dass die Zeile auseinanderfaellt. Linksbuendig unter
	   der Ueberschrift, nicht zentriert. */
	max-width: 880px;
}
:is(.bklp, body) .weg-punkt { margin: 0; }
:is(.bklp, body) .weg-link {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center;
	gap: 28px; padding: 26px 28px;
	background: #fff; border: 1px solid var(--hair); border-radius: 12px;
	color: inherit; text-decoration: none;
	transition: border-color .15s ease;
}
:is(.bklp, body) a.weg-link:hover { border-color: var(--signal); }
:is(.bklp, body) .weg-symbol {
	display: grid; place-items: center;
	width: 58px; height: 58px; color: var(--ink);
}
:is(.bklp, body) .weg-symbol svg { width: 36px; height: 36px; }
:is(.bklp, body) .weg-titel {
	display: block; font-family: var(--display);
	font-weight: 700; font-size: 1.05rem; line-height: 1.3;
	color: var(--ink); margin-bottom: 6px;
}
:is(.bklp, body) .weg-sub { display: block; color: var(--grey); }
:is(.bklp, body) .weg-pfeil {
	display: grid; place-items: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--signal); color: #fff;
	transition: transform .15s ease;
}
:is(.bklp, body) .weg-pfeil svg { width: 18px; height: 18px; }
:is(.bklp, body) a.weg-link:hover .weg-pfeil { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
	:is(.bklp, body) .weg-link, :is(.bklp, body) .weg-pfeil { transition: none; }
	:is(.bklp, body) a.weg-link:hover .weg-pfeil { transform: none; }
}
/* Schmal: der Pfeil ist Dekor und kostet hier nur Breite, die der
   Text besser gebrauchen kann. */
@media (max-width: 560px) {
	:is(.bklp, body) .weg-link {
		grid-template-columns: auto 1fr; gap: 18px; padding: 22px 20px;
	}
	:is(.bklp, body) .weg-pfeil { display: none; }
}
/* Wegweiser ende */


/* ── WS Form im Hausstil ────────────────────────────────
   Das Formular auf /kontakt/ kam mit den Vorgaben des Plugins: schwarze
   Feldrahmen, ein fremdes Marineblau #205493 am Knopf, ein rotes
   Pflicht-Sternchen und ein Platzhalter in #ceced2, der auf Weiss auf
   1,57:1 kommt und praktisch nicht lesbar ist (gemessen 31.08.2026).

   WS Form ist durchgaengig ueber CSS-Variablen gebaut und leitet fast
   alles per color-mix aus wenigen Grundfarben ab. Deshalb werden hier
   diese Variablen gesetzt und NICHT die Regeln des Plugins ueberschrieben:
   ein Ueberschreiben muesste jede Regel einzeln schlagen und ginge beim
   naechsten Plugin-Update kaputt. So bleiben Zustaende, die hier gar nicht
   vorkommen (deaktiviert, ungueltig, Passwortstaerke), automatisch stimmig. */
:is(.bklp, body) .wsf-form {
	/* Grundfarben der Marke */
	--wsf-form-color-primary:   var(--signal);
	--wsf-form-color-accent:    var(--signal);
	--wsf-form-color-base:      var(--ink);
	--wsf-form-color-secondary: var(--grey);
	--wsf-form-color-danger:    #b3121b;

	/* Felder: Rahmen wie die Karten, nicht schwarz */
	--wsf-field-border:              1px solid var(--hair);
	--wsf-field-border-color:        var(--hair);
	--wsf-field-border-color-hover:  #9aa0b8;
	--wsf-field-border-color-focus:  var(--signal);
	--wsf-field-color:               var(--ink);
	--wsf-field-color-hover:         var(--ink);
	--wsf-field-color-focus:         var(--ink);
	/* Der Platzhalter muss sich vom eingegebenen Text unterscheiden und
	   trotzdem lesbar sein: #6f7484 kommt auf Weiss auf rund 4,9:1. */
	--wsf-field-color-placeholder:   #6f7484;
	--wsf-field-padding-vertical:    12px;
	--wsf-field-padding-horizontal:  14px;

	/* Der Einwilligungssatz steckt in einem Rich-Text-Feld von WS Form
	   und ist Nebentext, kein Fliesstext. Ueber die Regel des Plugins
	   kommt man nur mit gleicher Spezifitaet, also ueber die Variable. */
	--wsf-field-texteditor-color:       var(--grey);
	--wsf-field-texteditor-font-size:   .9rem;
	--wsf-field-texteditor-line-height: 1.55;
}

/* Kein eigener Fokusring: WS Form bringt einen 4px-Ring mit und faerbt
   ihn aus --wsf-field-border-color-focus, das oben auf --signal steht.
   Eine zweite Regel wuerde nur einen zweiten Ring danebenlegen.
   Nachgemessen 31.08.2026: Feld im Fokus rgb(0,82,255), Ring 4px. */

/* Das Sternchen traegt keine Bedeutung ausser "Pflicht", und die steht
   zusaetzlich im required-Attribut. Rot ist in dieser Marke sonst
   nirgends und zieht mehr Blick auf sich als der Feldname. */
:is(.bklp, body) .wsf-form .wsf-required-wrapper .wsf-text-danger { color: var(--grey); }

/* Mehr Luft zwischen den Feldern als die 18px des Plugins. */
:is(.bklp, body) .wsf-form .wsf-field-wrapper { margin-bottom: 22px; }
:is(.bklp, body) .wsf-form textarea.wsf-field { min-height: 150px; resize: vertical; }

/* WS Form ende */


/* ── Einordnungszeile der Kundenstimmen ─────────────────
   Stand im Bestand als style-Anhang an genau diesem Absatz, zweimal auf
   /technischer-mittelstand/ und zweimal auf der Brand-Kit-Seite, jedes Mal
   mit denselben sechs Deklarationen. Mit dem Umbau auf TB2B Stimmen
   (31.08.2026) steht sie einmal hier. */
:is(.bklp, body) .testi-label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--grey);
	margin-bottom: 12px;
	font-weight: 600;
}
/* testi-label ende */


/* ── Wegleiter: Stationszustaende ──────────────────────
   Die Links der Leiter trugen im Bestand style-Anhaenge: einmal nur
   text-decoration:none, einmal zusaetzlich border-color und color in
   --grey fuer die entfernte Station. Mit dem Umbau auf TB2B Paket
   (31.08.2026) sind das Klassen: .now fuer "hier stehen Sie" (gab es
   schon), .node--matt fuer "spaeter". */
:is(.bklp, body) .ladder .node { text-decoration: none; }
:is(.bklp, body) .ladder .node--matt { border-color: var(--grey); color: var(--grey); }
/* Wegleiter-Zustaende ende */


/* ── Raster der Kundenstimmen ──────────────────────────
   Im Bestand lag das Raster als style-Anhang am Div, auf beiden Seiten
   unterschiedlich: /technischer-mittelstand/ hatte pain-grid mit einem
   Anhang, der auf eine Spalte zurueckstellte und Hintergrund, Rand und
   overflow von pain-grid wieder neutralisierte; die Brand-Kit-Seite hatte
   gar keine Klasse und das ganze Raster im Anhang.
   Beides steht jetzt als zwei Klassen hier (gemessen 31.08.2026:
   1016px einspaltig mit 24px gap gegen 492+492px mit 32px gap). */
:is(.bklp, body) .testi-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 32px;
	margin-top: 40px;
}
/* Volle Breite statt zwei Spalten: zwei lange Zitate nebeneinander
   zwingen den Leser zum Springen, untereinander liest er sie. */
:is(.bklp, body) .testi-raster--breit {
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 0;
}

/* Abstand ueber der Angebotssektion auf der Brand-Kit-Seite. Lag dort als
   style-Anhang an der Sektion; das Gegenstueck .mt16 gibt es schon. */
:is(.bklp, body) .mt60 { margin-top: 60px; }
/* Stimmen-Raster ende */


/* ── Ablauf: Aufwandszeile ─────────────────────────────
   Was eine Stufe den Kunden an eigener Zeit kostet. Steht unter dem Text
   der Stufe, kleiner und ruhiger: es ist eine Nebenangabe, aber eine, die
   in der Entscheidung zaehlt. Zusammen mit den Stufen ersetzt das auf der
   Startseite einen eigenen Abschnitt (31.08.2026). */
:is(.bklp, body) .step .step-aufwand {
	margin-top: 10px;
	font-family: var(--display);
	font-size: 0.82rem;
	font-weight: 500;
	/* Nicht im Signalblau: das gehoert den Knoepfen. Ein ganzer Satz in der
	   CTA-Farbe zieht mehr Blick als die Stufe selbst. */
	color: var(--grey);
}

/* Schlusszeile unter den Stufen: gleiche Lesebreite wie die Stufentexte,
   sonst laeuft sie ueber die volle Spalte und faellt aus dem Satzbild. */
:is(.bklp, body) .flow-schluss {
	max-width: 68ch;
	margin-top: 30px;
	color: var(--grey);
}
/* step-aufwand ende */


/* ── Hero auf grossen Schirmen ─────────────────────────
   Gemessen am 31.08.2026 gegen stefangerlach.de bei 2000px Fenster:
   deren H1 steht auf 90px mit Zeilenhoehe 0,94, der Lead auf 23px, der
   Hero fuellt 1100px Hoehe. Unserer stand auf 51px, 16,3px und 400px.
   Deren Container ist mit 1200px sogar SCHMALER als unsere 1340px: die
   Grosszuegigkeit kommt nicht aus der Breite, sondern aus Schriftgrad und
   vertikaler Ruhe. Das ist hier nachgezogen, in Massen.

   Die Deckelung lag in .hero.centered .hero-zweispalt h1 bei 3,2rem; diese
   Regel braucht dieselbe Spezifitaet, sonst greift sie nicht.
   Unter 1500px bleibt alles wie bisher, geprueft bei 1440, 1500, 1700,
   1920 und 2400px: kein Ueberlauf, H1 durchgehend dreizeilig. */
@media (min-width: 1500px) {
	:is(.bklp, body) .hero .hero-zweispalt {
		grid-template-columns: 1.55fr 1fr;
		align-items: center;
		gap: 72px;
	}
	:is(.bklp, body) .hero.centered .hero-zweispalt h1 {
		font-size: clamp(3rem, 4.1vw, 4.1rem);
		line-height: 1.02;
		letter-spacing: -0.015em;
	}
	:is(.bklp, body) .hero.centered .hero-zweispalt .lead {
		font-size: 1.16rem;
		line-height: 1.65;
		max-width: 36em;
	}
	:is(.bklp, body) .hero { padding-block: 88px 80px; }

	/* Das dunkle Belegband laeuft ueber die volle Breite, sein Inhalt stand
	   aber im normalen 1340er Wrap: bei 2200px blieben links und rechts je
	   423px dunkles Nichts. Logos brauchen keine Lesebreite, also duerfen
	   sie hier weiter aussen stehen. */
	:is(.bklp, body) .proof-band .wrap { max-width: 1660px; }
}
@media (min-width: 1900px) {
	:is(.bklp, body) .hero .wrap { max-width: 1400px; }
}
/* Hero gross ende */


/* ── Grosse Schirme: Hero mittig, H2 waechst mit ───────
   Gemessen 31.08.2026: stefangerlach.de fuellt mit seinem Hero das ganze
   erste Bild (1100px) und setzt den Inhalt mittig hinein; unserer sass mit
   610px oben am Kopf und liess darunter Luft ohne Aufgabe. Das ist der
   Unterschied, der eine Seite grosszuegig wirken laesst, mehr als jede
   Breite. Deren H2 waechst ausserdem von 49 auf 52px mit; unsere stand fest
   auf 36,8px, egal wie gross der Schirm war.

   Der Hero ist nur auf der Startseite zweispaltig; .hero.centered allein
   traefe auch /preise/, deshalb die Eingrenzung ueber :has(). Die H2-Regel
   bleibt in .bklp: die zwei H2 im Fussbereich liegen ausserhalb und sollen
   bei 13,6px bleiben. */
@media (min-width: 1500px) {
	.bklp h2 { font-size: clamp(2.1rem, 2.9vw, 2.9rem); }
}
/* Grosse Schirme ende */


/* Der obere Rand des Logobandes muss weg, damit Hero plus Band exakt eine
   Bildhoehe ergeben. Die Ausgangsregel steht als body.home .bklp .logos und
   braucht dieselbe Spezifitaet. */
@media (min-width: 1400px) {
	body.home .bklp .logos { margin-top: 0; }
	:is(.bklp, body) .hero:has(.hero-zweispalt) {
		/* Hero und Logoband fuellen zusammen genau das erste Bild, das Band
		   schliesst buendig mit der Falzkante ab. Die Rechnung: 114px fuer
		   Vortragsleiste und Kopf, 184px fuer das Band. Der obere Rand des
		   Bandes (clamp bis 64px) faellt dafuer weg, sonst geht sie nicht auf.
		   Geprueft bei 2560x1440, 2000x1120, 1920x1080, 1512x982 und 1440x900:
		   Abweichung zur Falzkante jeweils 0px.
		   Unter 1400px greift die Regel nicht: dort reicht die Bildhoehe fuer
		   Hero plus Band nicht aus, und Erzwingen wuerde nur abschneiden. */
		min-height: calc(100svh - 298px);
		justify-content: center;
		padding-block: 64px;
	}
}


/* ── Ein Maß für den Fließtext ─────────────────────────
   Gemessen 31.08.2026 auf der Startseite: fuenf verschiedene Fliesstext-
   groessen (15,2 / 15,36 / 16,8 / 18 / 18,56px) und neun verschiedene
   Lesebreiten, darunter ein Absatz mit 1202px in den Referenzen. Zum
   Vergleich Raumgleiter: durchgehend 20px, gedeckelt bei 736px.

   Hier steht jetzt ein Maß: 18px. Angehoben wurde nur, nichts verkleinert.
   Bewusst ausgenommen bleiben der Hero-Microtext (13,6px), die
   Aufwandszeilen im Ablauf (13,1px) und die Punchlines (30,4px) - das sind
   eigene Stufen, keine Zufaelle.

   Das Sektionspolster geht von 96 auf 130px. Die Seite wird dadurch von
   8668 auf 10718px lang; das ist der Preis fuer die Luft und beabsichtigt. */
@media (min-width: 1000px) {
  :is(.bklp, body) .sec-head p,
  :is(.bklp, body) .pain-item p,
  :is(.bklp, body) .mess-punkt p,
  :is(.bklp, body) .hp3-metric p,
  :is(.bklp, body) .step > div > p,
  :is(.bklp, body) .who-content p,
  :is(.bklp, body) .testi-body p,
  :is(.bklp, body) .offer-body li > span:not(.tick) {
    font-size: 1.125rem;
    line-height: 1.62;
  }
  :is(.bklp, body) .who-content > p:not(.who-motto),
  :is(.bklp, body) .hp3-proof .hp3-metric-text {
    font-size: 1.125rem;
    line-height: 1.62;
  }
  :is(.bklp, body) .sec-head p,
  :is(.bklp, body) .hp3-metric p,
  :is(.bklp, body) .who-content p,
  :is(.bklp, body) .flow-schluss,
  :is(.bklp, body) .final p {
    max-width: 70ch;
  }
  /* Das Logoband ist ein kompaktes Belegband, kein Inhaltsabschnitt. Mit
     den 130px wuchs es von 184 auf 384px, und genau diese 200px fehlten
     unten: der Hero rechnet mit der Bandhoehe, damit beide zusammen
     ein Bild fuellen (gemeldet 31.08.2026). */
  :is(.bklp, body) #brx-content > div > *:not(.logos) section,
  :is(.bklp, body) #brx-content > div > section:not(.logos) {
    padding-block: 130px;
  }
}
/* Ein Maß ende */


/* ── Eine Achse für die ganze Seite ────────────────────
   Zwei Abschnitte hatten einen zentrierten Kopf, waehrend die uebrigen
   sieben linksbuendig standen: der Status quo und die FAQ. Beim Scrollen
   sprang die Achse dadurch zweimal.

   Beim Status quo kam zweierlei dazu (gemessen 31.08.2026): drei Breiten
   nebeneinander (Kopftext 590px, Kartenraster 1276px, Schlusssatz 920px)
   und drei Schriftgrade uebereinander (46 / 18 / 30,4px). Der Schlusssatz
   war der dritte Grad und wiederholte nur die Praemisse aus dem Hero; er
   ist aus dem INHALT entfernt, nicht per display:none versteckt. Versteckter
   Text stuende weiter im Quelltext und wuerde von KI-Crawlern gelesen, was
   ausgerechnet auf dieser Seite die falsche Loesung waere.

   Die Ueberschrift ist auf 26 Zeichen gedeckelt, damit sie zweizeilig
   bricht wie in der zentrierten Fassung; ohne Deckel liefe sie einzeilig
   ueber die volle Spalte. */
:is(.bklp, body) .pain-lead .sec-head,
:is(.bklp, body) .hp3-faq .sec-head { text-align: left; }
:is(.bklp, body) .pain-lead .sec-head h2 { margin-left: 0; margin-right: 0; max-width: 26ch; }
:is(.bklp, body) .pain-lead .sec-head p { margin-left: 0; margin-right: 0; max-width: 70ch; }
:is(.bklp, body) .hp3-faq .sec-head,
:is(.bklp, body) .hp3-faq .sec-head h2 { margin-left: 0; margin-right: 0; }

/* Die zwei Rollenkarten tragen die staerkste Beobachtung des Abschnitts und
   standen in einem fast weissen Ton auf weissem Grund. Nur hier: der
   Selbsttest sitzt selbst auf Panel-Blau, dort waeren blaue Karten weg. */
:is(.bklp, body) .pain-lead .pain-item { background: var(--panel); border-color: transparent; }
/* Eine Achse ende */


/* ── Fragenkarten: kein doppelter Text beim Wechsel ────
   Die ausgehende Karte blendete 0,5s aus, die eingehende startete schon
   nach 0,12s. Dazwischen standen beide Texte halbdurchsichtig im selben
   Feld uebereinander und waren beide lesbar - gemeldet und im Screenshot
   belegt am 31.08.2026. Ein Ueberblenden von TEXT auf TEXT vertraegt keine
   Ueberlappung: Bilder mischen sich, Buchstaben werden zu Matsch.

   Jetzt nacheinander: 0,26s aus, dann 0,3s Pause bis die neue anfaengt.
   Gesamtdauer bleibt bei rund einer halben Sekunde. */
@media (min-width: 981px) {
	:is(.bklp, body) .hero-zweispalt .frage.im-pool {
		transition:
			opacity .26s var(--ease-premium),
			transform .26s var(--ease-premium),
			visibility 0s linear .26s;
	}
	:is(.bklp, body) .hero-zweispalt .frage.im-pool.slot-an {
		transition:
			opacity .3s var(--ease-premium) .3s,
			transform .3s var(--ease-premium) .3s,
			visibility 0s;
	}
}
@media (max-width: 980px) {
	:is(.bklp, body) .frage {
		transition:
			opacity .26s var(--ease-premium),
			transform .26s var(--ease-premium),
			visibility 0s linear .26s;
	}
	:is(.bklp, body) .frage.ist-aktiv {
		transition:
			opacity .3s var(--ease-premium) .3s,
			transform .3s var(--ease-premium) .3s,
			visibility 0s;
	}
}

/* ── Eine Typo-Treppe ──────────────────────────────────
   Nach der Anhebung des Fliesstexts auf 18px standen die Kartentitel mit
   16,8px UNTER ihrem eigenen Absatz - eine umgekehrte Hierarchie in zwoelf
   Karten (.pain-item, .mess-punkt, .weg-titel). Der Ablauf machte es schon
   richtig mit 20px, die anderen ziehen nach.
   Die FAQ-Fragen standen auf 18,4px, einem Wert, den es sonst nirgends
   gibt; sie gehoeren zur Titelstufe.
   Das Eyebrow stand im Hero auf 12,8px und in allen anderen Abschnitten
   auf 15,2px - dasselbe Element in zwei Maszen.

   Ergebnis: 46,4 Ueberschrift / 20 Titel / 18 Text / 15,2 Eyebrow /
   13 Kleingedrucktes. Fuenf Stufen mit je einer Aufgabe. */
@media (min-width: 1000px) {
	:is(.bklp, body) .pain-item h3,
	:is(.bklp, body) .mess-punkt h3,
	:is(.bklp, body) .weg-titel,
	:is(.bklp, body) .faq-q {
		font-size: 1.25rem;
		line-height: 1.35;
	}
	/* Die gewinnende Regel steht als .hero-zweispalt .hero-links .eyebrow
	   bei 0,8rem und braucht dieselbe Spezifitaet. */
	:is(.bklp, body) .hero-zweispalt .hero-links .eyebrow { font-size: .95rem; }
}
/* Typo-Treppe ende */


/* ── FAQ: Kopf und Liste auf eine Kante ────────────────
   Der Kopf steht linksbuendig bei 355px, die Fragenliste hatte 188px
   Einzug aus ihrer Zentrierung und begann bei 543px. Zwei Kanten in einem
   Abschnitt, gemeldet 31.08.2026. */
:is(.bklp, body) .hp3-faq .faq-stack { margin-left: 0; margin-right: 0; }
/* FAQ-Kante ende */


/* ── Fragenkarte: sichtbar ab dem ersten Anstrich ──────
   Die Karten trugen im Ruhezustand opacity:0 und wurden erst sichtbar,
   wenn das Skript sie auf Plaetze verteilt hatte. Gemessen 31.08.2026:
   erster Anstrich bei 464ms, Karten sichtbar ab etwa 704ms - die dunkle
   Karte stand also eine Viertelsekunde leer neben der Ueberschrift. Ohne
   JavaScript blieb sie dauerhaft leer.

   Der Anfangszustand kommt jetzt aus dem PHP (grid-row und slot-an stehen
   im HTML). Diese Regel sorgt dafuer, dass er auch ohne Skript gilt und
   ohne Einblendung erscheint: solange das Band kein data-bereit traegt,
   sind die Ruhekarten einfach da. Sobald das Skript uebernimmt, greifen
   wieder die normalen Uebergaenge. */
@media (min-width: 981px) {
	:is(.bklp, body) .fragen:not([data-bereit]) .frage[data-fix],
	:is(.bklp, body) .fragen:not([data-bereit]) .frage.im-pool.slot-an {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
}
@media (max-width: 980px) {
	/* Mobil zeigt das Skript genau eine Karte. Vor dem Skript ist das die
	   erste, damit auch dort nichts leer bleibt. */
	:is(.bklp, body) .fragen:not([data-bereit]) .frage:first-child {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
}
/* Fragenkarte ende */


/* Rechtsseiten: kein Bandabstand auf Textgruppen (08.09.2026) */
.bklp section.impressum-section,
.bklp section.agb-section { padding-block: 0; }
.bklp .post-content > section.impressum-section > h2:first-child { margin-top: 0; }