/* ============================================================
   KI-Potenzialnavigator · Stylesheet · v5.6.2
   („Der interaktive KI-Praxisplan 90 für den Mittelstand“)
   ------------------------------------------------------------
   Architektur:
   1. Design-Tokens        (alle Markenwerte an einer Stelle)
   2. Basis & Utilities
   3. Komponenten           (Toolbar → Progress → Screens → …)
   4. Ergebnis-Report
   4c. KI-Praxisberater     (nur sichtbar, wenn im Backend aktiviert)
   5. Druck-Report          (Quelle: isoliertes Druckdokument, s. JS)
   5b. Kleine Viewports     (≤480 px / ≤360 px Härtung)
   6. Desktop-Erweiterungen (mobile-first: min-width Queries)
   7. Reduzierte Bewegung
   8. Kapselung und Zustandsfarben gegen Theme-Regeln (5.4.2)
   9. Kontrollierter Ladefehler des Profil-Bootstraps (5.4.2)
   10. Raster, Gruppenabstände, Formularfehler (5.4.2)
   11. Kopfzeile, Slider, Formular (5.4.2)
   12. Schnellcheck und Ergebnisstruktur (5.5.0) — der Einstieg mit
       zwei Wegen steht seit 5.5.0 direkt in Abschnitt 3

   Alle Regeln sind unter .kipn gescoped — keine Kollisionen
   mit Theme oder Elementor. Buttons sind doppelt gescoped
   (.kipn .kipn-btn), damit Theme-/Elementor-Globalstile wie
   `.elementor-kit-x button` (Spezifität 0,1,1) sie nicht
   überschreiben können.

   Zu `!important` (4.3.0, erweitert 5.4.2): Diese Datei verwendet
   !important in der Formular-Kapselung (§5), in der Logo- und
   Schalenkapselung (5.2.x/5.3.1) und seit 5.4.2 in Abschnitt 8
   für Textfarbe und Schriftschnitt der Bedienelemente — jeweils
   nur für Eigenschaften, die nachweislich von globalen Theme-/
   Elementor-Regeln MIT !important angegriffen werden, und immer
   eng auf .kipn begrenzt. Jede Ausnahme ist an Ort und Stelle
   begründet; die Reproduktion liegt in tests/fixtures/
   hostile-theme.css und tests/visual-542.test.js.
   ============================================================ */

/* ==================== 1. DESIGN-TOKENS ==================== */
.kipn {
  /* Farben (Brand Guideline v2.0) */
  --kipn-primary:      #0F172A;
  --kipn-accent:       #06B6D4;
  --kipn-accent-ink:   #0E7490;   /* Cyan-Ton mit AA-Kontrast für Text */
  --kipn-accent-soft:  #ECFEFF;
  --kipn-bg:           #F8FAFC;
  --kipn-text:         #1E293B;
  --kipn-muted:        #64748B;
  --kipn-line:         #E2E8F0;
  --kipn-line-strong:  #CBD5E1;
  --kipn-white:        #FFFFFF;
  --kipn-danger:       #B91C1C;
  --kipn-danger-soft:  #FEF2F2;

  /* Typografie */
  --kipn-font-head: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kipn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Abstände (4er-Raster) */
  --kipn-s1: 4px;  --kipn-s2: 8px;  --kipn-s3: 12px; --kipn-s4: 16px;
  --kipn-s5: 20px; --kipn-s6: 24px; --kipn-s7: 32px; --kipn-s8: 40px;

  /* Form & Tiefe */
  --kipn-radius:    10px;
  --kipn-radius-sm: 8px;
  --kipn-radius-lg: 16px;
  --kipn-shadow:      0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --kipn-shadow-lift: 0 2px 4px rgba(15,23,42,.06), 0 14px 34px rgba(15,23,42,.10);

  /* Bewegung */
  --kipn-ease:      cubic-bezier(.22, .8, .3, 1);
  --kipn-t-fast:    .16s;
  --kipn-t-med:     .32s;
}

/* ==================== 2. BASIS & UTILITIES ==================== */
.kipn {
  font-family: var(--kipn-font-body);
  color: var(--kipn-text);
  max-width: 860px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.kipn *, .kipn *::before, .kipn *::after { box-sizing: border-box; }
.kipn button { font-family: inherit; }

/* Theme-/Elementor-Robustheit (§3.0.2): niedrigspezifische Resets über
   :where() (Spezifität 0). Sie verhindern, dass globale Theme-Regeln
   (feste img-Höhen, fieldset-Rahmen, legend-Einzüge, details/summary-
   Marker, Heading-Margins, fremde Schriftarten) in den Navigator
   durchsickern — ohne die eigenen Komponentenstile (Klassen) zu
   überschreiben, die dank höherer Spezifität immer gewinnen. Alles ist
   auf .kipn gescoped und wirkt nie außerhalb des Root-Containers. */
.kipn :where(img) { max-width: 100%; height: auto; }
.kipn :where(fieldset) { margin: 0; padding: 0; border: 0; min-width: 0; }
.kipn :where(legend) { padding: 0; }
.kipn :where(h1, h2, h3, h4, h5, h6) { margin: 0; }
.kipn :where(details) { margin: 0; }
.kipn :where(summary) { display: block; list-style: none; cursor: pointer; }
.kipn :where(summary)::-webkit-details-marker { display: none; }
.kipn :where(input, textarea, select, button) { font-family: inherit; }
/* Lange Wörter/Werte dürfen nie horizontales Scrollen erzeugen.

   `anywhere` statt `break-word` (5.2.0): Beide brechen ein zu langes
   Wort optisch um, aber nur `anywhere` verringert auch die
   MINDESTBREITE des Elements. Mit `break-word` bleibt ein sehr langes
   deutsches Kompositum („Verwaltungsdokumentationssystem…") für die
   Layoutberechnung so breit wie ungebrochen — und drückt Grid- und
   Flex-Spuren über den Bildschirmrand hinaus, obwohl min-width:0
   gesetzt ist. Genau dieser Fall wurde auf 320 px messbar. */
.kipn { overflow-wrap: anywhere; }
/* Grid-/Flex-Kinder dürfen unter ihre Inhaltsbreite schrumpfen —
   ohne min-width:0 erzwingt langer Inhalt Overflow (320-px-Schutz). */
.kipn-opt, .kipn .kipn-opt label, .kipn-field > div, .kipn-form > div,
.kipn-kpi, .kipn-savings__cell, .kipn .kipn-benefits li,
.kipn .kipn-form__consent label, .kipn-dim__label, .kipn-q__hint > span,
.kipn-result__actions > * { min-width: 0; }
.kipn :focus { outline: none; }
.kipn :focus-visible {
  outline: 2px solid var(--kipn-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Das hidden-Attribut muss immer gewinnen.

   Der Browser-Standard `[hidden] { display: none }` hat Spezifität 0,0,1
   und wird von jeder Komponentenregel mit `display: flex` oder `grid`
   überschrieben. Genau das führte dazu, dass die ausgeblendete
   Reveal-Bühne im Ergebnis 300 px Leerraum hinterließ. Diese Regel
   stellt das Attribut wieder her — für alle Elemente im Navigator. */
.kipn [hidden] { display: none !important; }

.kipn .kipn-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ==================== 3. EINSTIEG (im Seitenfluss) ====================
   Der Einstieg ist KEIN Overlay. Er steht ruhig in der Seite, ist ohne
   JavaScript lesbar und öffnet den Navigator erst auf Klick.

   NEU IN 5.5.0 — EIN WERKZEUGBEREICH MIT ZWEI WEGEN
   ==================================================
   Nutzenüberschrift, zwei klar unterscheidbare Wege (Schnellcheck und
   Detailanalyse), eine als Beispiel gekennzeichnete Vorschau der
   Ergebnisstruktur und ein konfigurationsgerechter Hinweis.

     prominent  eigenständiger Bereich: dunkelblaue Einführung als
                Anker, Wege daneben (ab 720 px Containerbreite) oder
                darunter
     embedded   für Landingpages mit eigener Überschrift: keine eigene
                Kartenfläche, kompakte Überschrift, Wege nebeneinander
                ab 600 px Containerbreite

   Reihenfolge auf schmalen Breiten: Einführung → Wege → Vorschau →
   Hinweis. Die erste Startaktion steht damit früh; die Vorschau
   schiebt sie nicht nach unten.

   CONTAINERBASIERT (seit 5.3.0): `.kipn-launch` ist Abfragecontainer.
   Bewusst dieses Element und nicht `.kipn` — `.kipn` umschließt auch den
   Dialog; Containment dort läge über dem Overlay. Elementor-, Grid- und
   Flex-Layouts AUSSERHALB von `.kipn` bleiben unberührt.

   SCHRIFTGRÖSSEN: `max(16px, 1rem)` — wächst mit einer größeren
   Browser-/Systemschrift mit, fällt aber nie unter 16 px, auch wenn ein
   Theme die Wurzelschrift verkleinert. */

.kipn-launch {
  container-type: inline-size;
  container-name: kipnlaunch;
  background: var(--kipn-white);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-lg);
  box-shadow: var(--kipn-shadow);
}
/* Der Innenabstand liegt am KIND, nicht am Container: Ein Element kann
   seinen eigenen Container nicht abfragen. Fläche außen, Polster innen. */
.kipn-launch__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "paths" "preview" "note";
  gap: var(--kipn-s5);
  padding: var(--kipn-s5);
}
.kipn-launch__intro   { grid-area: intro; min-width: 0; }
.kipn-launch__paths   { grid-area: paths; min-width: 0; }
.kipn-launch__preview { grid-area: preview; min-width: 0; }
.kipn-launch__note    { grid-area: note; min-width: 0; }

/* --- Einführung: dunkelblauer Anker (prominent) --- */
.kipn-launch--prominent .kipn-launch__intro {
  background: var(--kipn-primary);
  color: var(--kipn-white);
  border-radius: var(--kipn-radius);
  padding: var(--kipn-s6) var(--kipn-s5);
}
.kipn .kipn-launch__eyebrow {
  margin: 0 0 var(--kipn-s3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
/* Auf Dunkelblau: helles Cyan (#67E8F9 auf #0F172A ≈ 12,1:1). */
.kipn .kipn-launch--prominent .kipn-launch__eyebrow { color: #67E8F9; }
.kipn .kipn-launch__title {
  font-family: var(--kipn-font-head);
  font-size: clamp(max(22px, 1.375rem), 5.4cqi, max(32px, 2rem));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--kipn-primary);
  margin: 0 0 var(--kipn-s4);
  max-width: 24ch;
}
.kipn .kipn-launch--prominent .kipn-launch__title { color: var(--kipn-white); }
.kipn .kipn-launch__title--compact {
  font-size: max(20px, 1.25rem);
  margin: 0;
  max-width: none;
}
.kipn .kipn-launch__lead {
  margin: 0;
  font-size: max(16px, 1rem);
  line-height: 1.6;
  color: var(--kipn-text);
  max-width: 56ch;
}
/* #E2E8F0 auf #0F172A ≈ 14,8:1 */
.kipn .kipn-launch--prominent .kipn-launch__lead { color: #E2E8F0; }

/* --- Zwei Wege --- */
.kipn-launch__paths {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kipn-s3);
}
.kipn .kipn-path {
  display: flex;
  flex-direction: column;
  gap: var(--kipn-s2);
  padding: var(--kipn-s5);
  border: 1px solid var(--kipn-line-strong);
  border-radius: var(--kipn-radius);
  background: var(--kipn-bg);
  min-width: 0;
}
.kipn .kipn-path--primary {
  background: var(--kipn-white);
  border: 2px solid var(--kipn-accent-ink);
  box-shadow: var(--kipn-shadow);
}
.kipn .kipn-path__title {
  font-family: var(--kipn-font-head);
  font-size: max(19px, 1.1875rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--kipn-primary);
  margin: 0;
}
.kipn .kipn-path__meta {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--kipn-accent-ink);
}
.kipn .kipn-path__text {
  margin: 0 0 var(--kipn-s2);
  font-size: max(16px, 1rem);
  line-height: 1.55;
  color: var(--kipn-text);
}
.kipn .kipn-path__start {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
}
/* Nebenaktion „neu beginnen" — Textschaltfläche, 44 px Trefferfläche. */
.kipn .kipn-launch__discard {
  align-self: center;
  min-height: 44px;
  padding: 0 var(--kipn-s3);
  border: 0;
  background: transparent;
  color: var(--kipn-primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --- Vorschau der Ergebnisstruktur (ausdrücklich ein Beispiel) --- */
.kipn .kipn-launch__preview {
  margin: 0;
  padding: var(--kipn-s4) var(--kipn-s5);
  border: 1px dashed var(--kipn-line-strong);
  border-radius: var(--kipn-radius);
  background: var(--kipn-white);
}
.kipn .kipn-launch__preview-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kipn-s2);
  margin: 0 0 var(--kipn-s3);
  font-size: 15px;
  font-weight: 700;
  color: var(--kipn-primary);
}
.kipn .kipn-launch__tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--kipn-accent-soft);
  color: var(--kipn-accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.kipn .kipn-launch__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--kipn-s2);
  counter-reset: kipnstep;
}
.kipn .kipn-launch__step {
  position: relative;
  padding-left: 34px;
  min-height: 26px;
  counter-increment: kipnstep;
}
.kipn .kipn-launch__step::before {
  content: counter(kipnstep);
  position: absolute;
  left: 0; top: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--kipn-primary);
  color: var(--kipn-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}
.kipn .kipn-launch__step-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--kipn-primary);
}
.kipn .kipn-launch__step-text {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--kipn-muted);
}

.kipn .kipn-launch__note {
  margin: 0;
  font-size: max(16px, 1rem);
  line-height: 1.55;
  color: var(--kipn-muted);
  max-width: 72ch;
}

/* --- Darstellung „embedded": keine zweite große Kartenfläche --- */
.kipn-launch--embedded {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.kipn-launch--embedded .kipn-launch__inner { padding: 0; gap: var(--kipn-s4); }

/* --- Breitere Container ---------------------------------------------- */
@container kipnlaunch (min-width: 600px) {
  .kipn-launch--embedded .kipn-launch__paths { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kipn-launch--embedded .kipn-launch__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kipn-launch__inner { padding: var(--kipn-s6); }
  .kipn-launch--embedded .kipn-launch__inner { padding: 0; }
}
@container kipnlaunch (min-width: 720px) {
  .kipn-launch--prominent .kipn-launch__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "intro paths" "preview paths" "note note";
    column-gap: var(--kipn-s7);
    align-items: start;
    padding: var(--kipn-s7);
  }
  .kipn-launch--prominent .kipn-launch__intro { padding: var(--kipn-s7) var(--kipn-s6); }
}
/* Schmale Container bis 460 px (Werte der 5.3.0-Abnahme): 16 px
   Innenabstand, Datenschutzhinweis deutlich abgesetzt — Linie plus
   24 + 16 px Abstand — statt in einer eigenen engen Box. */
@container kipnlaunch (max-width: 460px) {
  .kipn-launch__inner { padding: var(--kipn-s4); }
  .kipn-launch--embedded .kipn-launch__inner { padding: 0; }
  .kipn .kipn-launch__note {
    margin-top: var(--kipn-s6);
    padding-top: var(--kipn-s4);
    border-top: 1px solid var(--kipn-line);
  }
}
/* Sehr schmale Spalte (≈ 280 px): nur die Polster geben nach. */
@container kipnlaunch (max-width: 320px) {
  .kipn-launch__inner { padding: var(--kipn-s4); gap: var(--kipn-s4); }
  .kipn-launch--embedded .kipn-launch__inner { padding: 0; }
  .kipn-launch--prominent .kipn-launch__intro { padding: var(--kipn-s5) var(--kipn-s4); }
  .kipn .kipn-path { padding: var(--kipn-s4); }
  .kipn .kipn-launch__eyebrow { font-size: 12px; letter-spacing: .04em; }
}
/* Unter 280 px (Seitenleiste): Überschrift auf drei Zeilen begrenzen. */
@container kipnlaunch (max-width: 279px) {
  .kipn-launch--prominent .kipn-launch__intro { padding: var(--kipn-s4) var(--kipn-s3); }
  .kipn .kipn-launch__title { font-size: max(20px, 1.25rem); max-width: none; }
}

/* Rückfallebene ohne Container-Queries: einspaltig, ohne Überlauf. */
@supports not (container-type: inline-size) {
  .kipn .kipn-launch__title { font-size: max(24px, 1.5rem); }
}

/* Seite hinter dem geöffneten Overlay stillstellen.

   Bewusst auf <html> und nicht auf <body>: Manche Themes setzen auf
   body eigene Overflow-Regeln, die sonst gewinnen würden. Die Klasse
   setzt und entfernt ausschließlich JavaScript beim Öffnen/Schließen —
   auch dann, wenn der Dialog über Escape geschlossen wird. */
html.kipn-locked { overflow: hidden; }

/* ==================== 4. OVERLAY ====================

   Aufbau: <dialog> → .kipn-shell (Raster) → Kopf / Inhalt / Fuß.

   Die Höhe wird über ein Raster mit drei Zeilen verteilt:
   `auto 1fr auto`. Nur die mittlere Zeile bekommt `overflow-y: auto`.
   Dadurch scrollt ausschließlich der Inhalt, während Kopf- und Fußzeile
   immer sichtbar bleiben — ohne `position: fixed`, das auf iOS bei
   eingeblendeter Tastatur unzuverlässig ist. */

.kipn-overlay {
  /* dialog bringt eigene Browser-Standards mit, die vollständig
     zurückgesetzt werden müssen. */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kipn-text);
  max-width: none;
  max-height: none;
  width: 100%;
  overflow: visible;
}
.kipn-overlay:not([open]) { display: none; }

.kipn-overlay::backdrop {
  /* Ruhig abgedunkelt, nicht schwarz — die Seite darunter soll erkennbar
     bleiben, damit das Overlay als Ebene wirkt und nicht als Bruch. */
  background: rgba(15, 23, 42, .58);
}
@supports (backdrop-filter: blur(2px)) {
  .kipn-overlay::backdrop { backdrop-filter: blur(3px); }
}

/* ---- Mobil zuerst: echtes Vollbild ----

   `100dvh` folgt der tatsächlich sichtbaren Höhe, wenn die
   Adressleiste ein- oder ausfährt. `100vh` bleibt als Rückfallebene
   für ältere Browser davor stehen. */
.kipn-overlay {
  position: fixed;
  inset: 0;
  margin: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}

.kipn-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  min-height: 0;          /* erlaubt der Inhaltszeile zu schrumpfen */
  background: var(--kipn-white);
  font-family: var(--kipn-font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;       /* nie horizontal scrollen */
  -webkit-font-smoothing: antialiased;
}

/* Feste Rasterplätze (5.1.0).

   Die Ladefläche liegt in DERSELBEN Zeile wie der Inhalt und deckt ihn
   ab. Ohne ausdrückliche Zuweisung würde sie automatisch in einer
   vierten Zeile landen und den Aufbau auseinanderziehen. */
.kipn-shell__head { grid-row: 1; grid-column: 1; }
.kipn-shell__body { grid-row: 2; grid-column: 1; }
.kipn-shell__busy { grid-row: 2; grid-column: 1; }
.kipn-shell__foot { grid-row: 3; grid-column: 1; }
.kipn-shell *, .kipn-shell *::before, .kipn-shell *::after { box-sizing: border-box; }
/* Gleiche Begründung wie oben bei `.kipn`: Im Overlay stehen die
   Fragetexte und Antwortkarten — dort muss die Mindestbreite mit
   umbrechen, sonst wächst das Raster über den Bildschirm hinaus. */
.kipn-shell { overflow-wrap: anywhere; }

/* ---- Kopfzeile ----

   URSACHE DES ÜBERGROSSEN LOGOS (behoben in 5.2.0)

   Bis 5.1.1 begrenzte das Plugin das Logo über `height` und `max-width`
   ohne Priorität. Themes und Seitenbaukästen setzen jedoch häufig eine
   globale Bildregel MIT `!important`:

       img { width: 100% !important; height: auto !important;
             max-width: none !important; }

   Eine solche Regel gewinnt gegen jede Autorenregel ohne `!important`,
   unabhängig von der Spezifität. Das Logo wuchs dadurch auf die volle
   Spaltenbreite, die Kopfzeile auf ein Vielfaches ihrer Höhe — auf der
   Produktivseite nahm sie fast den halben Dialog ein. Lokal fiel das
   nicht auf, weil die Testumgebung keine solche Regel mitbringt.

   GEGENMASSNAHME

   Die Abmessungen des Logos werden als EINZIGE Stelle im Stylesheet
   ausdrücklich mit `!important` festgeschrieben — eng auf
   `.kipn .kipn-shell__logo` begrenzt, damit außerhalb des Navigators
   nichts beeinflusst wird. `width`/`height` stehen auf `auto`, begrenzt
   wird ausschließlich über `max-width`/`max-height`; zusammen mit
   `object-fit: contain` bleibt das Seitenverhältnis in jedem Fall
   erhalten.

   ZIELMASSE (Logo 361 × 102 px, Verhältnis 3,54 : 1)

     ab 768 px   Logo bis 240 × 68 px   → Kopfzeile rund 98 px
     480–767 px  Logo bis 150 × 48 px   → Kopfzeile rund 62 px
     unter 480px Logo bis 125 × 40 px   → Kopfzeile rund 57 px
     Querformat  Logo bis 110 × 32 px   → Kopfzeile rund 53 px

   Auf dem Desktop ist die Kopfzeile damit bewusst höher als in 5.1.1:
   Das Logo trägt eine Unterzeile, die lesbar bleiben muss. Die
   Schließen-Schaltfläche behält überall ihre 44 × 44 px. */
.kipn-shell__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kipn-s3);
  padding: 6px var(--kipn-s4);
  /* iOS-Kerbe und Statusleiste nicht überdecken. */
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  padding-left: calc(var(--kipn-s4) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--kipn-s4) + env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--kipn-line);
  background: var(--kipn-white);
  min-width: 0;
}
/* Die Marke darf nie über ihre Inhaltsbreite hinauswachsen — sonst
   drückt sie Fortschritt und Schließen aus der Zeile. */
.kipn .kipn-shell__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

/* DIE Stelle mit `!important` — bewusst und eng begrenzt.
   Ohne sie gewinnt eine globale `img`-Regel des Themes.

   Der Selektor hat bewusst GENAU zwei Klassen. Er schlägt damit jede
   Elementregel (`img`), und die Größen der Haltepunkte weiter unten
   verwenden denselben Selektor — sie gewinnen dann über die
   Reihenfolge. Ein spezifischerer Basisselektor würde die
   Haltepunkte aushebeln. */
.kipn .kipn-shell__logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 125px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  float: none !important;
  vertical-align: middle !important;
}
.kipn-shell__wordmark {
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--kipn-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fortschritt sitzt mittig und darf schrumpfen. */
.kipn-shell__progress { min-width: 0; }
.kipn-progress__track {
  height: 3px;
  border-radius: 99px;
  background: var(--kipn-line);
  overflow: hidden;
}
.kipn-progress__bar {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--kipn-accent);
  transition: width var(--kipn-t-med) var(--kipn-ease);
}
.kipn .kipn-progress__label {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--kipn-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kipn .kipn-shell__close {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px: verlässlich treffbares Ziel auch mit dem Daumen. */
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--kipn-radius-sm);
  background: transparent;
  color: var(--kipn-muted);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--kipn-t-fast) ease, color var(--kipn-t-fast) ease;
}
.kipn .kipn-shell__close:hover { background: var(--kipn-bg); color: var(--kipn-primary); }

/* ---- Inhalt: der einzige scrollbare Bereich ---- */
.kipn-shell__body {
  min-height: 0;          /* zwingend, sonst wächst das Raster über die Höhe */
  overflow-y: auto;
  overflow-x: hidden;
  /* Scrollen darf nicht auf die Seite dahinter überspringen. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.kipn-shell__body:focus { outline: none; }

/* ---- Fußzeile: feste Aktionsleiste ---- */
.kipn-shell__foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--kipn-s3);
  padding: var(--kipn-s3) var(--kipn-s4);
  /* Home-Indicator auf iOS nicht überdecken. */
  padding-bottom: calc(var(--kipn-s3) + env(safe-area-inset-bottom, 0px));
  padding-left: calc(var(--kipn-s4) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--kipn-s4) + env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--kipn-line);
  background: var(--kipn-white);
  min-width: 0;
}
.kipn-shell__foot .kipn-btn { flex: 0 0 auto; }
.kipn .kipn-shell__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--kipn-muted);
  text-align: center;
  min-width: 0;
  /* Auf ganz schmalen Geräten darf der Hinweis nie die Schaltflächen
     verdrängen — er weicht als Erstes. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Im Ergebniszustand entfällt die Zurück/Weiter-Leiste vollständig. */
.kipn-shell__foot[hidden] { display: none; }

/* Einzelauswahl ohne Weiter-Knopf (5.1.0).

   Fällt die Vorwärtsaktion weg, bliebe rechts eine leere Ecke. Statt
   dessen rückt der Hinweis nach rechts und erklärt, warum dort nichts
   steht. Die Fußzeile behält dabei ihre Höhe: Sie wird ohnehin von der
   Zurück-Schaltfläche bestimmt, und die bleibt. Nichts springt, nichts
   ändert seine Breite. */
.kipn-shell__foot.is-auto { grid-template-columns: auto minmax(0, 1fr); }
.kipn-shell__foot.is-auto .kipn-shell__hint { text-align: right; }

/* ---- Kopf- und Fußzeile gegen Fremdregeln absichern (5.3.1) ----

   URSACHE DES GEMELDETEN FEHLERS

   Auf der Produktivseite blendet ein Header/Footer-Builder die
   Theme-Bereiche über GLOBALE Elementregeln aus:

       body.turbo-hide-theme-header    header { display: none !important; }
       body.tahefobu-hide-theme-footer footer { display: none !important; }

   Bis 5.3.0 zeichnete templates/navigator.php seine eigene Kopf- und
   Fußzeile als header- und footer-Element aus. Beide Regeln trafen sie
   deshalb mit: Auf einem Android-Telefon verschwanden Logo, Fortschritt,
   Schließen, Zurück UND die Vorwärtsaktion. Beim Mitarbeitenden-
   Schieberegler blieb unter der Bestätigungs-Checkbox nur leere Fläche.

   DIE EIGENTLICHE KORREKTUR STEHT IM TEMPLATE: Beide Bereiche sind seit
   5.3.1 neutrale div-Elemente. Keine Elementregel greift mehr.

   WARUM HIER TROTZDEM `!important` STEHT

   Dieselbe Absicht wird von Themes und Baukästen auch über KLASSEN
   ausgedrückt — `.site-header`, `.site-footer`,
   `.elementor-location-header`, `[class*="header"]`. Solche Regeln
   tragen in freier Wildbahn nahezu immer `!important`; eine Autorenregel
   ohne dieselbe Priorität verliert dagegen unabhängig von der
   Spezifität. Das ist derselbe Grund, aus dem die Logogröße weiter oben
   mit `!important` festgeschrieben ist.

   Die Absicherung ist deshalb bewusst mit `!important` gesetzt — aber
   ENG auf `.kipn` begrenzt. Es gibt hier keine Regel für `header`,
   `footer`, `button`, `dialog`, `body` oder irgendetwas außerhalb des
   Navigators; die Seite bleibt unberührt, und der Builder blendet seine
   Theme-Bereiche weiterhin aus.

   DAS NATIVE `hidden` BLEIBT MASSGEBLICH

   Das Skript blendet die Fußzeile in Auswertung, Ladeansicht und
   Ergebnis über `hidden` aus. Die Schutzregel greift deshalb
   ausdrücklich NUR bei `:not([hidden])`, und das Gegenstück setzt
   `[hidden]` mit derselben Priorität durch. Eine Schutzregel kann
   `hidden` damit nie überstimmen. */
.kipn .kipn-shell__head { display: grid !important; }
.kipn .kipn-shell__foot:not([hidden]) { display: grid !important; }
.kipn .kipn-shell__foot[hidden] { display: none !important; }

/* ---- Blockierende Ladefläche (5.1.0) ----

   URSACHE DES GEMELDETEN PROBLEMS
   Bis 5.0.1 stand der Ladehinweis als Statuszeile am Anfang des
   KI-Blocks. Wer auf dem Telefon eine Antwort weiter unten anklickte,
   sah danach nichts: Der Hinweis lag oberhalb des Sichtfelds. Der
   Navigator wirkte eingefroren, obwohl er arbeitete.

   LÖSUNG
   Diese Fläche liegt im selben Rasterfeld wie der Inhalt — unterhalb
   der Kopfzeile, oberhalb der Fußzeile — und ist deshalb unabhängig von
   der Scrollposition sofort sichtbar. Sie deckt ausschließlich den
   Navigator ab, nie die Seite dahinter.

   Das `hidden`-Attribut muss gewinnen: Ein Autoren-`display: flex`
   schlüge sonst die Regel des Browser-Stylesheets, und die Fläche bliebe
   dauerhaft stehen. */
.kipn .kipn-shell__busy[hidden] { display: none; }
.kipn-shell__busy {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--kipn-s6) var(--kipn-s5);
  background: var(--kipn-white);
  /* Über dem Inhalt derselben Rasterzeile. */
  z-index: 2;
  overflow-y: auto;
}
/* Ruhige Karte statt einer nackten leeren Fläche: Der Zustand soll
   gestaltet wirken, nicht wie ein abgestürzter Bildschirm. */
.kipn-busy {
  width: 100%;
  max-width: 420px;
  min-width: 0;
  text-align: center;
  padding: var(--kipn-s7) var(--kipn-s5);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  background: var(--kipn-bg);
  box-shadow: var(--kipn-shadow);
}
.kipn-busy__spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto var(--kipn-s4);
  border: 3px solid var(--kipn-line);
  border-top-color: var(--kipn-accent-ink);
  border-radius: 50%;
  animation: kipn-ai-spin .9s linear infinite;
}
.kipn .kipn-busy__spinner[hidden] { display: none; }
/* Der Text ist die eigentliche Statusinformation — der Kreisel allein
   würde nichts erklären. */
.kipn .kipn-busy__status {
  margin: 0;
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--kipn-primary);
  overflow-wrap: anywhere;
}
.kipn .kipn-busy__status:focus { outline: none; }
.kipn .kipn-busy__hint[hidden] { display: none; }
.kipn .kipn-busy__hint {
  margin: var(--kipn-s3) 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--kipn-muted);
}
.kipn .kipn-busy__actions[hidden] { display: none; }
.kipn-busy__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kipn-s2);
  margin-top: var(--kipn-s5);
}
/* Fehlerzustand: erkennbar, aber ohne Alarmfläche über den ganzen
   Bildschirm — eingefärbt wird nur die Karte. */
.kipn-shell__busy.is-error .kipn-busy__status { color: var(--kipn-danger); }
.kipn-shell__busy.is-error .kipn-busy {
  background: var(--kipn-danger-soft);
  border-color: #FECACA;
}

/* ---- Mittlere Telefone und kleine Tablets (480–767 px) ---- */
@media (min-width: 480px) and (max-width: 767px) {
  .kipn .kipn-shell__logo { max-width: 150px !important; max-height: 48px !important; }
}

/* ---- Sehr schmale Geräte (320 px) ---- */
@media (max-width: 359px) {
  .kipn-shell__head { padding-left: var(--kipn-s3); padding-right: var(--kipn-s3); }
  .kipn-shell__foot { padding-left: var(--kipn-s3); padding-right: var(--kipn-s3); }
  /* Bei 320 px müssen Logo, Fortschritt und Schließen nebeneinander
     passen, ohne sich zu berühren — das Logo weicht zuerst. */
  .kipn .kipn-shell__logo { max-width: 110px !important; max-height: 36px !important; }
  /* Der Hinweis in der Fußzeile weicht zugunsten der Schaltflächen. */
  .kipn .kipn-shell__hint { display: none; }
  .kipn-shell__foot { grid-template-columns: auto auto; justify-content: space-between; }
}

/* ---- Ab Tablet: zentriertes Fenster ---- */
@media (min-width: 768px) {
  .kipn-overlay {
    /* Als Flex-Container zentriert; inset:0 bleibt für die Abdeckung. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kipn-s6);
  }
  .kipn-overlay:not([open]) { display: none; }

  .kipn-shell {
    width: 100%;
    max-width: 960px;
    /* Nutzt die verfügbare Höhe, ohne den Rand zu berühren. */
    height: min(88dvh, 860px);
    max-height: 88dvh;
    border-radius: var(--kipn-radius-lg);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
  }
  /* Ab hier trägt die Kopfzeile das vollständige Logo samt Unterzeile
     (5.2.0): 240 × 68 px zuzüglich 2 × 14 px Innenabstand ergibt rund
     98 px — innerhalb des Zielbereichs von 90 bis 110 px. */
  .kipn-shell__head { padding: 14px var(--kipn-s6); }
  .kipn-shell__foot { padding: var(--kipn-s3) var(--kipn-s6); }
  .kipn .kipn-shell__logo { max-width: 240px !important; max-height: 68px !important; }
}

/* Große Bildschirme: nicht unnötig in die Breite laufen. */
@media (min-width: 1280px) {
  .kipn-shell { max-width: 1000px; }
}

/* ---- Querformat auf dem Telefon ----

   Sehr wenig Höhe: Kopf- und Fußzeile werden flacher, damit vom Inhalt
   noch etwas übrig bleibt.

   REIHENFOLGE (korrigiert in 5.1.0): Dieser Block stand vorher VOR dem
   768-px-Block. Ein Telefon im Querformat ist aber breiter als 768 px
   (z. B. 844 × 390) — die Tabletregel überschrieb die Querformatwerte
   und die Kopfzeile blieb unnötig hoch. Beide Abfragen treffen zu; bei
   gleicher Spezifität gewinnt die spätere. Deshalb steht sie jetzt
   hinten. */
@media (max-height: 480px) and (orientation: landscape) {
  .kipn-shell__head, .kipn-shell__foot { padding-top: 4px; padding-bottom: 4px; }
  .kipn-shell__head { padding-top: calc(4px + env(safe-area-inset-top, 0px)); }
  .kipn-shell__foot { padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .kipn .kipn-progress__label { display: none; }
  /* Im Querformat zählt jede Zeile Inhalt — das Logo weicht am stärksten. */
  .kipn .kipn-shell__logo { max-width: 110px !important; max-height: 32px !important; }
}

/* ---- Bewegung ---- */
.kipn-overlay[open] { animation: kipn-overlay-in var(--kipn-t-med) var(--kipn-ease); }
.kipn-overlay[open]::backdrop { animation: kipn-backdrop-in var(--kipn-t-med) var(--kipn-ease); }

@keyframes kipn-overlay-in {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
@keyframes kipn-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==================== 5. SCREENS ==================== */
.kipn-screen {
  display: none;
  padding: var(--kipn-s6) var(--kipn-s5) var(--kipn-s7);
}
.kipn-screen.is-active {
  display: block;
  animation: kipn-screen-in var(--kipn-t-med) var(--kipn-ease);
}
@keyframes kipn-screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Desktop-Innenabstand (verdichtet in 5.2.0).

   Ziel: Eine normale Frage soll auf üblichen Notebookgrößen (ab
   1240 × 816, 1366 × 768) vollständig sichtbar sein, ohne dass im
   Fragenbereich gescrollt werden muss. Zusammen mit der etwas
   ruhigeren Abstandsfolge unten spart das rund 40 px Höhe — genug,
   damit auch die längste Etappenfrage ohne Scrollen passt.

   Der Inhaltsbereich bleibt ausdrücklich scrollfähig: Bei Zoom, großen
   Systemschriften, langen Texten, Formularen, KI-Rückfragen und der
   Ergebnisansicht ist er weiterhin die sichere Rückfallebene. */
@media (min-width: 768px) {
  .kipn-screen { padding: var(--kipn-s6) var(--kipn-s7) var(--kipn-s7); }
}
@media (max-width: 359px) {
  .kipn-screen { padding: var(--kipn-s5) var(--kipn-s4) var(--kipn-s6); }
}

/* ==================== 6. ETAPPE ====================
   Eine Etappe fasst mehrere fachlich zusammengehörige Fragen zusammen.
   Ziel: sechs Etappen statt neunzehn gefühlten Einzelschritten, ohne
   dass eine für die Berechnung nötige Angabe entfällt.

   SEIT 5.1.0 zeigt eine Ansicht genau EINE Frage. Die sechs Etappen und
   ihre fachliche Bedeutung bleiben unverändert — sie sind nur nicht mehr
   eine Bildschirmseite, sondern eine Folge von Ansichten. Die
   Gestaltung der Auswahlkarten (.kipn-opt) ist davon ausdrücklich nicht
   betroffen und bleibt unverändert. */

/* ---- Etappenkontext (5.3.0) ----------------------------------------

   AUSGANGSLAGE
   Wo stehen Sie heute mit KI?
   ↓ 16 px
   Wie schätzen Sie die KI-Kompetenz im Team ein?

   Bis 5.2.2 war der Etappentitel mit bis zu 25 px der größte Text der
   Ansicht, die eigentliche Frage stand mit 17 px darunter. Ab der
   zweiten Frage einer Etappe entfiel der Einleitungssatz — beide
   rückten unmittelbar zusammen und die Etappe las sich wie die
   Hauptfrage.

   Jetzt fasst ein flaches Kontextband die drei Kontextangaben
   zusammen. Es ist bewusst KEINE Karte: kein Schatten, geringe Polster,
   nur ein schmaler Akzentstrich links. Die Höhenbilanz gegenüber 5.2.2
   ist ausgeglichen — was das Band kostet, gibt der verringerte
   Innenabstand des Fragenbildschirms zurück (siehe Abschnitt 6, ganz
   unten). Das ist keine Kosmetik: Bei 1366 × 768 und 1024 × 768 blieben
   in 5.2.2 nur 12 px Reserve, bevor eine Frage scrollen müsste. */
.kipn-stage__context {
  margin: 0 0 var(--kipn-s4);
  padding: 11px var(--kipn-s4);
  border: 1px solid var(--kipn-line);
  border-left: 3px solid var(--kipn-accent);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-accent-soft);
}
.kipn .kipn-stage__eyebrow {
  margin: 0 0 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
  line-height: 1.2;
}
.kipn .kipn-stage__title {
  font-family: var(--kipn-font-head);
  /* 5.2.0 senkte die Obergrenze von 27 auf 25 px. In 5.3.0 ist der
     Etappentitel kein Hauptelement mehr, sondern Orientierung: 15,5 px
     im geforderten Korridor 14–16 px, halbfett statt fett. */
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--kipn-primary);
  margin: 0;
}
.kipn .kipn-stage__title:focus-visible { outline: none; }
.kipn .kipn-stage__lead {
  margin: 5px 0 0;
  color: var(--kipn-muted);
  font-size: 14px;
  line-height: 1.45;
  max-width: 60ch;
}

/* Einzelne Frage innerhalb der Etappe.

   Die Trennlinien-Regel bleibt für den unwahrscheinlichen Fall
   erhalten, dass eine Erweiterung wieder mehrere Blöcke rendert; im
   Auslieferungszustand von 5.1.0 greift sie nicht mehr, weil immer nur
   ein Block existiert. */
.kipn-qblock + .kipn-qblock {
  margin-top: var(--kipn-s7);
  padding-top: var(--kipn-s6);
  border-top: 1px solid var(--kipn-line);
}
/* Eine Frage je Ansicht (5.1.0): Sie darf ruhig atmen, muss aber auf
   kleinen Geräten ohne inneren Scrollbalken auskommen.

   Seit 5.3.0 trägt das Kontextband darüber den Abstand (16 px). Ein
   zusätzlicher Rand hier käme obendrauf und läge über dem geforderten
   Korridor von 16–20 px. */
.kipn-qblock--single { margin-top: 0; }
/* DIE FRAGE ist seit 5.3.0 die dominante Information der Ansicht: rund
   21–22 px gegenüber 15,5 px des Etappentitels. Auf sehr schmalen
   Geräten darf sie auf 19 px zurückgehen — sie bleibt damit immer noch
   deutlich größer als der Etappentitel, der seine 15,5 px behält. */
.kipn .kipn-qblock__legend {
  display: block;
  font-family: var(--kipn-font-head);
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--kipn-primary);
  margin: 0 0 var(--kipn-s3);
}
.kipn .kipn-qblock__hint {
  margin: -6px 0 var(--kipn-s4);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--kipn-muted);
}

/* Nachgeladene Folgefrage: erscheint ruhig, ohne das Layout zu reißen. */
.kipn-qblock--revealed { animation: kipn-reveal-in var(--kipn-t-med) var(--kipn-ease); }
@keyframes kipn-reveal-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ==================== 6b. KOMPAKTES ERGEBNIS ====================
   Eine Aussage, eine Zahl, drei Gründe, ein Schritt. Alles Weitere
   steht in den PDF-Ausgaben. */

.kipn-outcome {
  padding: var(--kipn-s6) var(--kipn-s5);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-lg);
  background: var(--kipn-white);
  box-shadow: var(--kipn-shadow);
}
.kipn .kipn-outcome__eyebrow {
  margin: 0 0 var(--kipn-s2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
.kipn .kipn-outcome__lever {
  font-family: var(--kipn-font-head);
  font-size: clamp(21px, 3.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.014em;
  color: var(--kipn-primary);
  margin: 0 0 var(--kipn-s2);
}
.kipn .kipn-outcome__lever:focus-visible { outline: none; }
.kipn .kipn-outcome__scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kipn-s2) var(--kipn-s3);
  margin: 0 0 var(--kipn-s4);
  font-size: 14px;
  color: var(--kipn-muted);
}

/* Der Zielkorridor — die einzige Zahl auf dem Bildschirm. */
.kipn-outcome__target {
  display: grid;
  gap: 2px;
  margin: var(--kipn-s5) 0;
  padding: var(--kipn-s4) var(--kipn-s5);
  border-radius: var(--kipn-radius);
  background: var(--kipn-accent-soft);
  border-left: 3px solid var(--kipn-accent);
}
.kipn-outcome__target-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--kipn-accent-ink);
}
.kipn-outcome__target-value {
  font-family: var(--kipn-font-head);
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--kipn-primary);
  /* Zahlen dürfen nie umbrechen und nie überlaufen. */
  overflow-wrap: normal;
  word-break: keep-all;
}
.kipn-outcome__target-note {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--kipn-muted);
}

.kipn .kipn-outcome__reasons {
  list-style: none;
  margin: var(--kipn-s3) 0 var(--kipn-s4);
  padding: 0;
  display: grid;
  gap: var(--kipn-s2);
}
.kipn .kipn-outcome__reasons li {
  position: relative;
  padding-left: 26px;
  font-size: max(16px, 1rem);
  line-height: 1.55;
  min-width: 0;
}
.kipn .kipn-outcome__reasons li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kipn-accent);
}

.kipn-outcome__step {
  margin-top: var(--kipn-s5);
  padding: var(--kipn-s4) var(--kipn-s5);
  border: 1px solid var(--kipn-line-strong);
  border-radius: var(--kipn-radius);
  background: var(--kipn-bg);
}
.kipn .kipn-outcome__step-label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn .kipn-outcome__step-text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--kipn-primary);
}
.kipn .kipn-outcome__step-meta {
  margin: var(--kipn-s2) 0 0;
  font-size: 13px;
  color: var(--kipn-muted);
}
.kipn .kipn-outcome__confidence {
  margin: var(--kipn-s4) 0 0;
  font-size: 12.5px;
  color: var(--kipn-muted);
}

@media (min-width: 768px) {
  .kipn-outcome { padding: var(--kipn-s7) var(--kipn-s7); }
}
@media (max-width: 359px) {
  .kipn-outcome { padding: var(--kipn-s5) var(--kipn-s4); }
  .kipn-outcome__target { padding: var(--kipn-s3) var(--kipn-s4); }
  .kipn-outcome__step { padding: var(--kipn-s3) var(--kipn-s4); }
}

/* Validierungsfehler an der Etappe. */
.kipn .kipn-stage__error {
  margin: var(--kipn-s5) 0 0;
  padding: var(--kipn-s3) var(--kipn-s4);
  border: 1px solid var(--kipn-danger);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-danger-soft);
  color: var(--kipn-danger);
  font-size: 14px;
  line-height: 1.45;
}
.kipn .kipn-stage__error:focus-visible { outline: none; }
.kipn-qblock.is-invalid .kipn-qblock__legend { color: var(--kipn-danger); }

/* --- Buttons ---
   Doppelt gescoped (.kipn .kipn-btn = Spezifität 0,2,0): gewinnt
   gegen Theme-/Elementor-Globalstile wie `.elementor-kit-x button`
   oder `.site-content button` (0,1,1) — ohne !important.
   Zusätzlich vollständiger Eigenschafts-Reset (appearance, margin,
   text-transform, box-shadow), damit kein Theme-Stil durchsickert. */
.kipn .kipn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kipn-s2);
  min-height: 50px;
  min-width: 0;
  max-width: 100%;
  width: auto;
  margin: 0;
  padding: 10px var(--kipn-s6);
  border-radius: var(--kipn-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--kipn-text);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--kipn-t-fast) ease, box-shadow var(--kipn-t-fast) ease,
              background var(--kipn-t-fast) ease, border-color var(--kipn-t-fast) ease;
}
.kipn .kipn-btn--lg { min-height: 54px; padding: 12px var(--kipn-s7); font-size: 16px; }
.kipn-btn__icon { flex: 0 0 auto; transition: transform var(--kipn-t-fast) ease; }
.kipn .kipn-btn--primary { background: var(--kipn-primary); color: var(--kipn-white); border-color: var(--kipn-primary); }
.kipn .kipn-btn--primary:hover { background: var(--kipn-primary); color: var(--kipn-white); transform: translateY(-1px); box-shadow: var(--kipn-shadow-lift); }
.kipn .kipn-btn--primary:hover .kipn-btn__icon { transform: translateX(2px); }
.kipn .kipn-btn--primary:active { transform: translateY(0); box-shadow: var(--kipn-shadow); }
.kipn .kipn-btn--ghost { background: transparent; color: var(--kipn-primary); border-color: var(--kipn-line-strong); }
.kipn .kipn-btn--ghost:hover { color: var(--kipn-primary); border-color: var(--kipn-muted); background: var(--kipn-bg); }
.kipn .kipn-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
/* Der Bestätigungsknopf der Mehrfachauswahl ist so lange gesperrt, bis
   mindestens eine Antwort gewählt ist (5.1.0). Reines Ausgrauen über
   Deckkraft wäre hier zu blass — der Knopf ist der einzige Weg nach
   vorn und muss auch im gesperrten Zustand gut lesbar bleiben. Der
   Grund steht daneben in der Fußzeile und im Zähler über den
   Antworten. */
.kipn .kipn-shell__foot .kipn-btn[disabled] {
  opacity: 1;
  background: var(--kipn-bg);
  border-color: var(--kipn-line-strong);
  color: var(--kipn-muted);
}
.kipn .kipn-shell__foot .kipn-btn[disabled]:hover { background: var(--kipn-bg); }

/* --- Fragen --- */
.kipn-step__eyebrow {
  margin: 0 0 var(--kipn-s2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn-step__title {
  margin: 0 0 var(--kipn-s6);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: clamp(20px, 4.5vw, 26px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--kipn-primary);
}
.kipn-step__title:focus-visible { outline: none; }
.kipn-q { border: 0; margin: 0; padding: 0; }
.kipn-q__hint {
  display: flex;
  justify-content: space-between;
  gap: var(--kipn-s3);
  margin: 0 0 var(--kipn-s4);
  font-size: 14px;
  color: var(--kipn-muted);
}
.kipn-q__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* AUSNAHME FÜR SEHR SCHMALE ANSICHTEN (5.3.1)

   `nowrap` hält „3 von 4 ausgewählt" zusammen — richtig, solange die
   Zeile breit genug ist. Im Nullzustand steht hier jedoch der deutlich
   längere Satz „Bitte mindestens eine Antwort auswählen". Unterhalb von
   rund 260 CSS-Pixeln passt er nicht mehr in eine Zeile und schob die
   Fragenansicht waagerecht auf (gemessen bei 195 px, also 390 px bei
   Browser-Zoom 200 %).

   Der Umbruch wird deshalb NUR dort erlaubt, wo `nowrap` echten Schaden
   anrichtet. Ab 260 px bleibt die Darstellung aus 5.3.0 unverändert. */
@media (max-width: 259px) {
  .kipn .kipn-q__count { white-space: normal; }
}

/* Options-Karten */
.kipn-opts { display: grid; gap: 10px; }
.kipn-opt { position: relative; }
.kipn-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kipn .kipn-opt label {
  display: flex;
  align-items: center;
  gap: var(--kipn-s3);
  min-height: 52px;
  padding: 13px var(--kipn-s4);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  background: var(--kipn-white);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--kipn-t-fast) ease, background var(--kipn-t-fast) ease,
              box-shadow var(--kipn-t-fast) ease, transform var(--kipn-t-fast) ease;
}
.kipn .kipn-opt label:hover { border-color: var(--kipn-line-strong); transform: translateY(-1px); box-shadow: var(--kipn-shadow); }
.kipn .kipn-opt label:active { transform: none; }
.kipn .kipn-opt input:focus-visible + label { outline: 2px solid var(--kipn-accent); outline-offset: 2px; }
/* DIE AUSWAHL MUSS VOR DEM WECHSEL ANKOMMEN (5.3.0)
   =================================================
   Bei Einzelauswahl schaltet der Navigator selbsttätig weiter. Bis
   5.2.2 geschah das nach 160 ms, und der ausgewählte Zustand blendete
   in weiteren 160 ms ein — die Karte war praktisch nie vollständig
   markiert zu sehen. Zwei Dinge ändern sich, beide klein:

     1. Der gewählte Zustand erscheint SOFORT (60 ms statt 160 ms).
     2. Der Ring ist 2 px statt 1 px stark und damit auch aus der
        Bewegung heraus eindeutig.

   Die Wartezeit selbst liegt weiterhin an genau EINEM Zeitgeber in
   navigator.js (CONFIG.autoAdvanceMs, jetzt 300 ms). Hier kommt kein
   zweiter dazu. `prefers-reduced-motion` greift unverändert über die
   Sammelregel in Abschnitt 7: Dort werden Übergänge stillgelegt — der
   Zustand erscheint dann ohne jede Bewegung, also erst recht sofort. */
.kipn .kipn-opt input:checked + label {
  border-color: var(--kipn-accent);
  background: var(--kipn-accent-soft);
  box-shadow: inset 0 0 0 2px var(--kipn-accent);
  transition-duration: 60ms;
}
.kipn-opt__mark {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  border: 2px solid var(--kipn-line-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--kipn-t-fast) ease, background var(--kipn-t-fast) ease;
}
.kipn-opt--multi .kipn-opt__mark { border-radius: 6px; }
.kipn .kipn-opt input:checked + label .kipn-opt__mark {
  border-color: var(--kipn-accent);
  background: var(--kipn-accent);
}
.kipn .kipn-opt input:checked + label .kipn-opt__mark::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kipn-white);
  animation: kipn-mark-in .18s var(--kipn-ease);
}
.kipn .kipn-opt--multi input:checked + label .kipn-opt__mark::after {
  width: 10px; height: 6px;
  border-radius: 0;
  background: transparent;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
@keyframes kipn-mark-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kipn .kipn-opt--multi input:checked + label .kipn-opt__mark::after { animation: none; }

/* Slider */
.kipn-slider { margin-top: var(--kipn-s2); }
.kipn-slider__value {
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -.02em;
  color: var(--kipn-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kipn-slider__unit { font-size: 15px; font-weight: 500; color: var(--kipn-muted); margin-left: 6px; }
.kipn-slider input[type="range"] {
  width: 100%;
  margin: var(--kipn-s5) 0 var(--kipn-s2);
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--kipn-accent) var(--kipn-fill, 30%), var(--kipn-line) var(--kipn-fill, 30%));
  cursor: pointer;
}
.kipn-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--kipn-white);
  border: 2px solid var(--kipn-accent);
  box-shadow: var(--kipn-shadow);
  cursor: grab;
  transition: transform var(--kipn-t-fast) ease;
}
.kipn-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.08); }
.kipn-slider input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); }
.kipn-slider input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--kipn-white);
  border: 2px solid var(--kipn-accent);
  box-shadow: var(--kipn-shadow);
  cursor: grab;
}
.kipn-slider__scale {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--kipn-muted);
}
/* Aktive Bestätigung des Schätzwerts (§3.5) */
.kipn-slider__confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--kipn-s5);
  padding: var(--kipn-s3) var(--kipn-s4);
  background: var(--kipn-bg);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-sm);
}
.kipn-slider__confirm input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--kipn-accent); cursor: pointer; }
.kipn .kipn-slider__confirm label { font-size: 14px; font-weight: 600; color: var(--kipn-text); cursor: pointer; }
.kipn .kipn-slider__confirmhint { margin: var(--kipn-s2) 0 0; font-size: 12.5px; color: var(--kipn-muted); }

/* Navigation */
.kipn-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kipn-s3);
  margin-top: var(--kipn-s7);
  padding-top: var(--kipn-s5);
  border-top: 1px solid var(--kipn-line);
}
/* Auto-Advance-Radiofrage: nur „Zurück" linksbündig + ruhiger Hinweis.
   Der „Weiter"-Button wird gar nicht erst ausgegeben (siehe JS). */
.kipn-nav--single { justify-content: flex-start; gap: var(--kipn-s4); }
.kipn-nav--single .kipn-btn { flex: 0 0 auto; }
.kipn-nav__hint {
  font-size: 13px;
  color: var(--kipn-muted);
  line-height: 1.35;
}

/* --- Auswertung --- */
.kipn-analysis {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kipn-s5);
  text-align: center;
}
.kipn-analysis__spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid var(--kipn-line);
  border-top-color: var(--kipn-accent);
  animation: kipn-spin .85s linear infinite;
}
@keyframes kipn-spin { to { transform: rotate(360deg); } }
.kipn .kipn-analysis__status { font-size: 15.5px; color: var(--kipn-muted); margin: 0; }

/* ==================== 4. ERGEBNIS-REPORT ==================== */

/* Choreografie: Sektionen bauen sich nacheinander auf */
.kipn .kipn-reveal { opacity: 0; transform: translateY(14px); }
.kipn .kipn-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--kipn-ease), transform .5s var(--kipn-ease);
}

.kipn-result__eyebrow {
  margin: 0 0 var(--kipn-s1);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
.kipn-result__title {
  margin: 0 0 var(--kipn-s1);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: clamp(23px, 4.5vw, 30px);
  letter-spacing: -.015em;
  color: var(--kipn-primary);
}
.kipn .kipn-result__date { margin: 0 0 var(--kipn-s6); font-size: 13.5px; color: var(--kipn-muted); }

.kipn-card {
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  padding: var(--kipn-s5);
  margin-bottom: var(--kipn-s4);
  background: var(--kipn-white);
}
.kipn-card--tinted { background: var(--kipn-bg); }
.kipn .kipn-h3 {
  margin: 0 0 var(--kipn-s4);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.005em;
  color: var(--kipn-primary);
}

/* Executive Summary */
.kipn-summary { border-left: 3px solid var(--kipn-accent); }
.kipn-summary__kpis {
  display: grid;
  gap: var(--kipn-s3);
  margin: 0 0 var(--kipn-s4);
}
.kipn-kpi { padding: var(--kipn-s3) var(--kipn-s4); background: var(--kipn-white); border: 1px solid var(--kipn-line); border-radius: var(--kipn-radius-sm); }
.kipn-kpi__num {
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--kipn-primary);
  font-variant-numeric: tabular-nums;
}
.kipn-kpi__label { font-size: 12.5px; color: var(--kipn-muted); margin-top: 2px; }
.kipn-summary__text { margin: 0; font-size: 15px; }
.kipn-summary__link {
  color: var(--kipn-accent-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Scorecard */
.kipn-scorecard { display: grid; gap: var(--kipn-s5); text-align: center; }
.kipn-dial { width: 180px; margin: 0 auto; }
.kipn-dial svg { display: block; width: 100%; height: auto; }
.kipn-dial__track { stroke: var(--kipn-line); }
.kipn-dial__value {
  stroke: var(--kipn-accent);
  transition: stroke-dashoffset 1.25s var(--kipn-ease);
}
.kipn-dial__num {
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 44px;
  fill: var(--kipn-primary);
}
.kipn-dial__of { font-size: 13px; fill: var(--kipn-muted); }
.kipn-scorecard__level {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--kipn-primary);
  color: var(--kipn-white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: var(--kipn-s3);
}
.kipn .kipn-scorecard__text { margin: 0; font-size: 15px; }

/* Dimensionen */
.kipn-dim {
  display: grid;
  gap: 5px;
  margin-bottom: var(--kipn-s3);
}
.kipn-dim:last-child { margin-bottom: 0; }
.kipn-dim__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--kipn-s3); }
.kipn-dim__label { font-size: 14px; }
.kipn-dim__num { font-size: 13px; font-weight: 600; color: var(--kipn-muted); font-variant-numeric: tabular-nums; }
.kipn-dim__track { height: 8px; background: var(--kipn-line); border-radius: 4px; overflow: hidden; }
.kipn-dim__bar {
  height: 100%;
  width: 0;
  background: var(--kipn-primary);
  border-radius: 4px;
  transition: width .9s var(--kipn-ease);
}
.kipn-dim--accent { margin-top: var(--kipn-s4); padding-top: var(--kipn-s4); border-top: 1px dashed var(--kipn-line); }
.kipn-dim--accent .kipn-dim__label { font-weight: 600; color: var(--kipn-primary); }
.kipn-dim--accent .kipn-dim__bar { background: var(--kipn-accent); }

/* Einsparpotenzial */
/* Drei fachlich getrennte Wochenwerte (§2): das 90-Tage-Ziel
   (realistisch) ist hervorgehoben, die Obergrenze klar als „bis zu“. */
.kipn-savings__week {
  display: grid;
  gap: var(--kipn-s2);
  margin: 0 0 var(--kipn-s4);
}
.kipn-savings__weekrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kipn-s2);
  padding: var(--kipn-s3) var(--kipn-s4);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-bg);
}
.kipn-savings__weekrow--goal { border-color: var(--kipn-accent); background: var(--kipn-accent-soft); }
.kipn-savings__weeknum {
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--kipn-primary);
  font-variant-numeric: tabular-nums;
}
.kipn-savings__weeklabel { font-size: 13px; color: var(--kipn-muted); }
.kipn-savings__weekrow--goal .kipn-savings__weeklabel { color: var(--kipn-accent-ink); font-weight: 600; }
.kipn-savings__grid { display: grid; gap: var(--kipn-s3); margin: 0 0 var(--kipn-s5); }
.kipn-savings__cell {
  padding: var(--kipn-s4) var(--kipn-s5);
  background: var(--kipn-bg);
  border-radius: var(--kipn-radius-sm);
  border: 1px solid var(--kipn-line);
}
.kipn-savings__num {
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: clamp(24px, 5vw, 30px);
  letter-spacing: -.015em;
  color: var(--kipn-primary);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kipn-savings__label { font-size: 13px; color: var(--kipn-muted); margin-top: 3px; }
.kipn .kipn-savings__rate label {
  font-size: 13.5px;
  font-weight: 600;
  display: block;
  margin-bottom: var(--kipn-s1);
}
.kipn-savings__method {
  font-size: 13px;
  color: var(--kipn-muted);
  margin: var(--kipn-s3) 0 0;
}

/* Handlungsfelder */
.kipn-fields { display: grid; gap: var(--kipn-s3); }
.kipn-field {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--kipn-s3);
  padding: var(--kipn-s4) var(--kipn-s5);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  transition: border-color var(--kipn-t-fast) ease, box-shadow var(--kipn-t-fast) ease;
}
.kipn-field:hover { border-color: var(--kipn-line-strong); box-shadow: var(--kipn-shadow); }
.kipn-field__rank {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--kipn-primary);
  color: var(--kipn-white);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 13.5px;
  display: flex; align-items: center; justify-content: center;
}
.kipn .kipn-field__title { margin: 3px 0 4px; font-weight: 600; font-size: 15.5px; color: var(--kipn-primary); }
.kipn .kipn-field__text { margin: 0; font-size: 14px; color: var(--kipn-muted); }

/* Branchen-Einordnung */
.kipn-bench { margin-top: var(--kipn-s4); padding-top: var(--kipn-s4); border-top: 1px dashed var(--kipn-line); }
.kipn .kipn-bench__label {
  margin: 0 0 var(--kipn-s2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn-bench__track {
  position: relative;
  height: 10px;
  background: var(--kipn-line);
  border-radius: 5px;
}
.kipn-bench__band {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--kipn-line-strong);
  border-radius: 5px;
}
.kipn-bench__marker {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--kipn-accent);
  border: 2.5px solid var(--kipn-white);
  box-shadow: var(--kipn-shadow);
  transform: translate(-50%, -50%);
}
.kipn-bench__scale {
  display: flex;
  justify-content: space-between;
  gap: var(--kipn-s2);
  margin-top: 6px;
  font-size: 12px;
  color: var(--kipn-muted);
}
.kipn-bench__scale span:nth-child(2) { text-align: center; }
.kipn .kipn-bench__text { margin: var(--kipn-s3) 0 0; font-size: 14px; }
.kipn .kipn-bench__source { margin: var(--kipn-s1) 0 0; font-size: 11.5px; color: var(--kipn-muted); }

/* Quick Win im Top-Handlungsfeld */
.kipn-field__quickwin {
  margin: var(--kipn-s2) 0 0;
  padding: var(--kipn-s2) var(--kipn-s3);
  background: var(--kipn-accent-soft);
  border-left: 2px solid var(--kipn-accent);
  border-radius: 0 var(--kipn-radius-sm) var(--kipn-radius-sm) 0;
  font-size: 13.5px;
  color: var(--kipn-text);
}
.kipn-field__quickwin span { font-weight: 700; color: var(--kipn-accent-ink); }

/* Fortsetzen-Hinweis auf dem Einstiegs-Screen */
.kipn-resume-note {
  margin: var(--kipn-s3) 0 0;
  padding: var(--kipn-s3) var(--kipn-s4);
  background: var(--kipn-accent-soft);
  border: 1px solid var(--kipn-accent);
  border-radius: var(--kipn-radius-sm);
  font-size: 13.5px;
  max-width: 58ch;
}
.kipn .kipn-resume-note__restart {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--kipn-accent-ink);
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Konzepttext */
.kipn-concept { border-left: 3px solid var(--kipn-accent); }
.kipn .kipn-concept h4 {
  margin: var(--kipn-s4) 0 var(--kipn-s1);
  font-family: var(--kipn-font-head);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kipn-primary);
}
.kipn .kipn-concept h4:first-of-type { margin-top: 0; }
.kipn .kipn-concept p { margin: 0 0 var(--kipn-s2); font-size: 14.5px; }
.kipn .kipn-concept__note { font-size: 12.5px; color: var(--kipn-muted); }

/* CTA + Formular */
.kipn-cta {
  padding: var(--kipn-s6) var(--kipn-s5);
  background: var(--kipn-primary);
  border-radius: var(--kipn-radius);
  color: var(--kipn-white);
  margin-bottom: var(--kipn-s4);
}
.kipn .kipn-cta__title {
  margin: 0 0 var(--kipn-s2);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--kipn-white);
}
.kipn .kipn-cta__text { margin: 0 0 var(--kipn-s5); font-size: 14.5px; color: rgba(248,250,252,.78); max-width: 60ch; }
.kipn-form { display: grid; gap: var(--kipn-s3); }
.kipn .kipn-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: rgba(248,250,252,.85);
}
.kipn-form input, .kipn-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px var(--kipn-s4);
  border-radius: var(--kipn-radius-sm);
  border: 1px solid rgba(248,250,252,.22);
  background: rgba(248,250,252,.06);
  color: var(--kipn-white);
  font-family: var(--kipn-font-body);
  font-size: 15px;
  transition: border-color var(--kipn-t-fast) ease, background var(--kipn-t-fast) ease;
}
.kipn-form input:hover, .kipn-form textarea:hover { border-color: rgba(248,250,252,.4); }
.kipn-form input:focus-visible, .kipn-form textarea:focus-visible {
  outline: 2px solid var(--kipn-accent);
  outline-offset: 1px;
  background: rgba(248,250,252,.1);
}
.kipn-form input[aria-invalid="true"], .kipn-form textarea[aria-invalid="true"] {
  border-color: #FCA5A5;
}
.kipn-form input::placeholder, .kipn-form textarea::placeholder { color: rgba(248,250,252,.4); }
.kipn-form textarea { min-height: 92px; resize: vertical; }

/* ---------------------------------------------------------------
   §5 EINWILLIGUNGSZEILEN — gehärtete Kapselung (4.3.0)
   ---------------------------------------------------------------
   Gemeldeter Release-Blocker: In der realen WordPress-/Elementor-
   Darstellung entstand nach der Datenschutzeinwilligung eine extrem
   hohe leere Fläche, die Beschriftungen liefen zeichenweise am rechten
   Rand nach unten, die Checkboxen standen weit auseinander und der
   Absende-Button war erst nach langem Scrollen erreichbar.

   Nachgewiesene Ursache (tests/form-layout.test.js, Szenario A):
   eine Theme-Regel `form label { writing-mode: vertical-rl }`
   (Spezifität 0,0,2) kippt die Schreibrichtung der Labels. Der Text
   läuft dann vertikal, die Zeile wird ~1.836 px hoch statt ~330 px.
   Die Messung reproduziert alle vier gemeldeten Symptome exakt.
   Weitere real vorkommende Regeln erzeugen dasselbe Schadensbild:
   feste Mini-Label-Breiten (B), absolut positionierte Custom-Check-
   boxen (C), Float-Labels (D), Elementor-Kit-Eingabefeldregeln (E),
   RTL-Umschaltung (H).

   Lösung: eigenes zweispaltiges Grid statt Flex, plus vollständige
   Rücksetzung genau der Eigenschaften, über die die Konflikte laufen.
   `!important` steht NUR dort, wo die Gegenregel selbst !important
   nutzt oder eine höhere Spezifität besitzt (C, E, F, H) — jede
   Ausnahme ist unten einzeln markiert. Es wird keine feste
   Gesamthöhe gesetzt und kein Text abgeschnitten.
   --------------------------------------------------------------- */

/* Grid-Zeilen dürfen nie auf gleiche Höhe gestreckt werden.
   !important: Szenario F/I setzt `grid-auto-rows: 1fr !important`. */
.kipn .kipn-form {
  grid-auto-rows: auto !important;
  align-items: start !important;
}

.kipn .kipn-form__consent,
.kipn .kipn-form__opt {
  display: grid !important;          /* !important: Szenario E/F erzwingt display:block */
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
  /* !important: Szenario H (`form * { direction: rtl !important }`). */
  direction: ltr !important;
  text-align: left !important;
  writing-mode: horizontal-tb;
}
.kipn .kipn-form__consent { font-size: 12.5px; color: rgba(248,250,252,.75); }
.kipn .kipn-form__opt     { font-size: 13px;   color: rgba(248,250,252,.8); }

/* Kästchen: feste, sichtbare Größe in Spalte 1. Die allgemeine Regel
   `.kipn-form input { width:100%; min-height:48px; padding:11px 16px }`
   und fremde Custom-Checkbox-Patterns werden vollständig neutralisiert.
   !important: Szenario C und E setzen genau diese Eigenschaften mit
   !important (position/width/height/min-height/opacity/margin/padding).

   Zur Selektorlänge: Elementor-Kits liefern Regeln der Form
   `.elementor-kit-N input:not([type="button"]):not([type="submit"])`
   — Spezifität (0,4,1) MIT !important. Eine kürzere eigene Regel
   verliert den Gleichstand je nach Ladereihenfolge. Die zusätzliche
   Klasse `.kipn-form__box` hebt diese Regel deshalb bewusst auf
   (0,5,1) und gewinnt damit unabhängig von der Reihenfolge. */
.kipn .kipn-form .kipn-form__consent input[type="checkbox"].kipn-form__box,
.kipn .kipn-form .kipn-form__opt input[type="checkbox"].kipn-form__box {
  position: static !important;
  display: block !important;
  grid-column: 1;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  inset: auto !important;
  flex: none;
  float: none;
  -webkit-appearance: checkbox;
  appearance: checkbox;
  accent-color: var(--kipn-accent);
}

/* Beschriftung: darf immer die volle Restbreite nutzen, bricht an
   Leerzeichen um und behält horizontale Schreibrichtung.
   !important: Szenario A (writing-mode), E (display/width/margin mit
   !important), H (direction/text-align mit !important).
   Spezifität analog zum Kästchen auf (0,5,0) angehoben. */
.kipn .kipn-form .kipn-form__consent label.kipn-form__boxlabel,
.kipn .kipn-form .kipn-form__opt label.kipn-form__boxlabel {
  position: static !important;
  display: block !important;
  grid-column: 2;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  text-align: left !important;
  text-orientation: mixed;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  font-weight: 400;
  font-size: inherit;
  line-height: 1.45 !important;   /* !important: Szenario G (line-height: 3) */
  color: inherit;
}
.kipn .kipn-form__consent a { color: inherit; }

/* Hinweiszeile unter den optionalen Einwilligungen: kompakt halten.
   !important: Szenario G setzt `p { margin: 0 0 3em !important }`. */
.kipn .kipn-form__optnote {
  margin: 0 !important;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(248,250,252,.5);
}
.kipn-form .kipn-btn--submit {
  background: var(--kipn-accent);
  color: var(--kipn-primary);
  font-weight: 700;
  width: 100%;
}
.kipn-form .kipn-btn--submit:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(6,182,212,.35); }
.kipn .kipn-form__error {
  margin: 0;
  padding: var(--kipn-s3) var(--kipn-s4);
  border-radius: var(--kipn-radius-sm);
  background: rgba(252,165,165,.12);
  border: 1px solid rgba(252,165,165,.45);
  font-size: 13.5px;
  color: #FECACA;
}
.kipn-form__success {
  padding: var(--kipn-s4);
  background: rgba(6,182,212,.14);
  border: 1px solid rgba(6,182,212,.5);
  border-radius: var(--kipn-radius-sm);
  font-size: 15px;
}
.kipn .kipn-form__success-cta { margin: var(--kipn-s4) 0 0; }
.kipn .kipn-form__success-copy { margin: var(--kipn-s3) 0 0; font-size: 13.5px; color: rgba(248,250,252,.85); }
.kipn .kipn-form__success-copy--fail { color: #FECACA; }
.kipn .kipn-form__success-ref { margin: var(--kipn-s3) 0 0; font-size: 12px; color: rgba(248,250,252,.55); }
/* Optionale Einwilligungen (§13/§14) werden gemeinsam mit der
   Pflicht-Datenschutzeinwilligung in der gehärteten Kapselung weiter
   oben gestylt (§5, 4.3.0) — hier bewusst keine zweite Definition,
   damit es genau eine Quelle der Wahrheit gibt. */

/* Sekundäre Aktionen */
.kipn-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kipn-s3);
  align-items: center;
}
.kipn .kipn-result__disclaimer { margin: var(--kipn-s4) 0 0; font-size: 12.5px; color: var(--kipn-muted); }

/* ==================== 4b. ZUKUNFTSPLAN-KOMPONENTEN (v3) ====================
   Alle Animationen nutzen ausschließlich transform/opacity (keine
   Layoutverschiebung), respektieren prefers-reduced-motion (Sektion 7)
   und blockieren keine Bedienung. */

/* --- Zwischeninsight (§6.3) --- */
.kipn-insight {
  margin: 0 0 var(--kipn-s5);
  padding: var(--kipn-s3) var(--kipn-s4);
  background: var(--kipn-accent-soft);
  border: 1px solid var(--kipn-accent);
  border-radius: var(--kipn-radius-sm);
  animation: kipn-screen-in var(--kipn-t-med) var(--kipn-ease);
}
.kipn-insight__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
  margin-bottom: 2px;
}
.kipn-insight__text { margin: 0; font-size: 14px; }

/* --- Reveal-Bühne (§5): ruhiger, reduzierter Moment --- */
.kipn-staging > :not(.kipn-stage) { display: none; }
.kipn-stage {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kipn-s6);
  text-align: center;
  opacity: 0;
}
.kipn-stage.is-in { opacity: 1; transition: opacity .5s var(--kipn-ease); }
.kipn .kipn-stage__line {
  margin: 0;
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: clamp(20px, 4.5vw, 28px);
  letter-spacing: -.01em;
  color: var(--kipn-primary);
  max-width: 24ch;
  opacity: 1;
  transform: none;
  transition: opacity .24s ease, transform .24s ease;
}
.kipn .kipn-stage__line.is-swap { opacity: 0; transform: translateY(6px); }
.kipn .kipn-stage__skip {
  background: none; border: 0; margin: 0; padding: 4px 8px;
  font: inherit; font-size: 13px; color: var(--kipn-muted);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}

/* --- Hero: größter KI-Hebel (§8.1) --- */
.kipn-hero { margin-bottom: var(--kipn-s6); }
.kipn .kipn-hero__eyebrow {
  margin: 0 0 var(--kipn-s1);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
.kipn .kipn-hero__title {
  margin: 0 0 var(--kipn-s4);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--kipn-primary);
}
.kipn .kipn-hero__title:focus-visible { outline: none; }
.kipn-hero__chips { display: flex; flex-wrap: wrap; gap: var(--kipn-s2); margin: 0 0 var(--kipn-s3); }
.kipn-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 6px 12px;
  border: 1px solid var(--kipn-line);
  border-radius: 999px;
  background: var(--kipn-bg);
  font-size: 13px;
  color: var(--kipn-text);
}
.kipn-chip--time { background: var(--kipn-primary); color: var(--kipn-white); border-color: var(--kipn-primary); font-weight: 600; }
.kipn-chip--time b { font-weight: 700; margin: 0 3px; font-variant-numeric: tabular-nums; }
/* Risiko-Chips (§2): dekorative Grün-/Gelbtöne entfernt. niedrig/mittel
   ruhig neutral; nur „hoch" behält einen zurückhaltenden Warnton, weil
   es eine echte Bedeutung transportiert. */
.kipn-chip--risk-niedrig { border-color: var(--kipn-line-strong); background: var(--kipn-bg); }
.kipn-chip--risk-mittel  { border-color: var(--kipn-line-strong); background: var(--kipn-bg); }
.kipn-chip--risk-hoch    { border-color: #FCA5A5; background: var(--kipn-danger-soft); }
.kipn-hero__note { margin: var(--kipn-s2) 0 0; font-size: 12.5px; color: var(--kipn-muted); }
/* §5.2: realistisches 90-Tage-Ziel als zentraler Ergebniswert.
   Die zentrale Kennzahl erhält den sparsam eingesetzten Cyan-Akzent. */
.kipn .kipn-hero__goal {
  margin: 0 0 var(--kipn-s4);
  font-size: clamp(17px, 3vw, 20px);
  line-height: 1.4;
  color: var(--kipn-text);
  max-width: 46ch;
}
.kipn .kipn-hero__goal b {
  font-family: var(--kipn-font-head);
  font-weight: 800;
  font-size: 1.5em;
  color: var(--kipn-accent-ink);
  font-variant-numeric: tabular-nums;
}
/* Hero-Hierarchie 4.0.1: Ergebnislabel, kompakte Belastbarkeit, CTA */
.kipn .kipn-hero__label {
  margin: 0 0 var(--kipn-s1);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn-hero__confidence {
  display: block;
  margin: var(--kipn-s3) 0 0;
  padding: var(--kipn-s3) var(--kipn-s4);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-bg);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 62ch;
}
.kipn-hero__confidence .kipn-confidence__label { font-weight: 700; color: var(--kipn-primary); margin-right: 6px; }
.kipn-hero__confidence .kipn-confidence__level {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--kipn-line-strong);
  background: var(--kipn-white);
  color: var(--kipn-text);
  margin-right: 8px;
}
.kipn-hero__confidence.kipn-confidence--hoch { border-left: 3px solid var(--kipn-accent); }
.kipn-hero__confidence.kipn-confidence--hoch .kipn-confidence__level { border-color: var(--kipn-accent-ink); color: var(--kipn-accent-ink); background: var(--kipn-accent-soft); }
.kipn-hero__confidence.kipn-confidence--mittel { border-left: 3px solid var(--kipn-line-strong); }
.kipn-hero__confidence.kipn-confidence--orientierend { border-left: 3px solid var(--kipn-muted); }
.kipn-hero__confidence .kipn-confidence__text { color: var(--kipn-muted); }
.kipn-hero__cta { margin: var(--kipn-s4) 0 var(--kipn-s2); }

/* --- Drei getrennte Bewertungen (§7.1) --- */
.kipn-scores { display: grid; gap: var(--kipn-s3); }
.kipn-score {
  padding: var(--kipn-s4);
  background: var(--kipn-white);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-sm);
  min-width: 0;
}
.kipn-score__num {
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.01em;
  color: var(--kipn-primary);
  font-variant-numeric: tabular-nums;
  text-transform: capitalize;
}
.kipn-score__num span { font-size: 13px; font-weight: 600; color: var(--kipn-muted); text-transform: none; }
.kipn-score__label { font-size: 13px; font-weight: 600; color: var(--kipn-text); margin-top: 2px; }
.kipn-score__hint { font-size: 12.5px; color: var(--kipn-muted); margin-top: 4px; }
.kipn-score--risk-niedrig { border-left: 3px solid var(--kipn-accent); }
.kipn-score--risk-mittel  { border-left: 3px solid var(--kipn-line-strong); }
.kipn-score--risk-hoch    { border-left: 3px solid #F87171; }

/* --- Heute / in 90 Tagen (§8.2) --- */
.kipn .kipn-compare__intro { margin: 0 0 var(--kipn-s4); font-size: 14.5px; }
.kipn-compare { display: grid; gap: var(--kipn-s3); }
.kipn-compare__col {
  min-width: 0;
  padding: var(--kipn-s4);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  background: var(--kipn-bg);
}
.kipn-compare__col--after { background: var(--kipn-accent-soft); border-color: var(--kipn-accent); }
.kipn .kipn-compare__head {
  margin: 0 0 var(--kipn-s2);
  font-family: var(--kipn-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-primary);
}
.kipn .kipn-compare__col ol { margin: 0; padding-left: 18px; }
.kipn .kipn-compare__step { font-size: 14px; margin-bottom: 6px; }
.kipn .kipn-compare__step:last-child { margin-bottom: 0; }
.kipn .kipn-compare__metric {
  margin: var(--kipn-s3) 0 0;
  padding: var(--kipn-s2) var(--kipn-s3);
  background: var(--kipn-bg);
  border-left: 2px solid var(--kipn-accent);
  border-radius: 0 var(--kipn-radius-sm) var(--kipn-radius-sm) 0;
  font-size: 13.5px;
}
.kipn .kipn-compare__metric b { color: var(--kipn-primary); }
.kipn .kipn-compare__note { margin: var(--kipn-s3) 0 0; font-size: 12.5px; color: var(--kipn-muted); }

/* --- So könnte Ihr Unternehmen in 90 Tagen arbeiten (Szenario) --- */
.kipn .kipn-days__scenario {
  margin: 0 0 var(--kipn-s4);
  font-size: 13px;
  color: var(--kipn-muted);
  font-style: italic;
}
.kipn .kipn-days { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kipn-s3); }
.kipn .kipn-days__item {
  padding: var(--kipn-s3) var(--kipn-s4);
  background: var(--kipn-white);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-sm);
  font-size: 14.5px;
  min-width: 0;
}
.kipn-days__num { font-weight: 700; color: var(--kipn-primary); }
.kipn-days__num b { font-variant-numeric: tabular-nums; }

/* --- Belastbarkeit der Schätzung (§6) --- */
.kipn-confidence__head { display: flex; align-items: center; gap: var(--kipn-s3); flex-wrap: wrap; margin-bottom: var(--kipn-s2); }
.kipn-confidence__label {
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--kipn-primary);
}
.kipn-confidence__level {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid var(--kipn-line-strong);
  color: var(--kipn-text);
  background: var(--kipn-bg);
}
.kipn-confidence--hoch .kipn-confidence__level { border-color: var(--kipn-accent-ink); color: var(--kipn-accent-ink); background: var(--kipn-accent-soft); }
.kipn-confidence--hoch { border-left: 3px solid var(--kipn-accent); }
.kipn-confidence--mittel { border-left: 3px solid var(--kipn-line-strong); }
.kipn-confidence--orientierend { border-left: 3px solid var(--kipn-muted); }
.kipn-confidence__text { margin: 0; font-size: 14.5px; color: var(--kipn-text); }

/* --- Kosten des Weiter-so (§7) — kein Warnton --- */
.kipn .kipn-cost__value { margin: 0 0 var(--kipn-s2); font-size: 15.5px; color: var(--kipn-text); }
.kipn .kipn-cost__value b { font-family: var(--kipn-font-head); font-weight: 800; color: var(--kipn-primary); font-variant-numeric: tabular-nums; }
.kipn .kipn-cost__note { margin: var(--kipn-s1) 0 0; font-size: 12.5px; color: var(--kipn-muted); }

/* --- Plausibilitätshinweis (§3.6) --- */
.kipn-plauswarn {
  border-left: 3px solid var(--kipn-accent-ink);
  background: var(--kipn-accent-soft);
}
.kipn .kipn-plauswarn p { margin: 0; font-size: 14px; color: var(--kipn-text); }

/* --- KI-Prioritätenkarte (§6, entzerrt in 4.3.0) ---
   Vier klar benannte Bereiche statt frei positionierter Punkte.

   Das Layout richtet sich nach der TATSÄCHLICHEN Breite des
   Board-Containers (CSS Container Queries), nie nach window.innerWidth
   — dadurch funktioniert es auch in schmalen Elementor-Spalten in
   einem breiten Browserfenster. Drei Stufen:

     schmal  (< 540px Container): KEINE gequetschte 2×2-Matrix, sondern
             eine priorisierte Kartenliste untereinander. Die Einordnung
             wandert als kleiner Badge auf jede Karte, leere Bereiche
             entfallen. Startempfehlung zuerst (`order` aus dem JS).
     mittel  (≥ 540px): 2×2-Raster, Detailansicht DARUNTER über die
             volle Breite. Das ist die Standarddarstellung im normalen
             Plugin-Container (dort ist das Board ca. 796px breit).
             Die Schwelle 540px ist gemessen, nicht geschätzt: darunter
             fällt die Kartenbreite unter 190px, und deutsche Titel wie
             „Angebote & Dokumente erstellen" beginnen zu zerfallen
             (siehe tests/board-layout.test.js, MIN_CARD_WIDTH).
     breit   (≥ 980px): erst hier optional Matrix links / Detail rechts
             (60/40). Bis 4.0.2 lag diese Schwelle bei 660px — genau
             das erzeugte die gemeldete dreispaltige Quetschung bei
             860–900px Plugin-Breite (Matrix bekam nur noch 2×~225px).
             Bei 980px erhält die Matrix ~578px und das Detail ~386px,
             also die in §6.2 geforderten Mindestbreiten.

   Fallback ohne Container-Query-Support: einspaltiges Layout, Matrix
   oben, Detail unten — ebenfalls unkritisch.
   Alle Karten sind echte Buttons (Tastaturbedienung, sichtbarer Fokus,
   aria-pressed); Kennzeichnungen funktionieren auch ohne Farbe. */
.kipn [data-kipn="board"] {
  container-type: inline-size;
  container-name: kipnboard;
}
.kipn .kipn-board__hint { margin: 0 0 var(--kipn-s3); font-size: 13.5px; color: var(--kipn-muted); }
/* Abweichungs- bzw. Übereinstimmungshinweis (§6.3): informativ, keine
   Warnung → ruhige Markenfarben, kein Orange. Erscheint GENAU EINMAL;
   die Detailansicht wiederholt ihn nicht. */
.kipn .kipn-board__divergence,
.kipn .kipn-board__converge {
  margin: 0 0 var(--kipn-s4);
  padding: var(--kipn-s3);
  border-radius: var(--kipn-radius-sm);
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.kipn .kipn-board__divergence {
  background: var(--kipn-accent-soft);
  border: 1px solid var(--kipn-line-strong);
  border-left: 3px solid var(--kipn-accent-ink);
}
.kipn .kipn-board__converge {
  background: var(--kipn-bg);
  border: 1px solid var(--kipn-line);
  border-left: 3px solid var(--kipn-line-strong);
  color: var(--kipn-text);
}
.kipn-board { display: grid; gap: var(--kipn-s4); min-width: 0; align-items: start; }
.kipn-board__grid { display: grid; gap: var(--kipn-s4); min-width: 0; align-items: start; }

/* Stufe „schmal": priorisierte Kartenliste statt Quadrantenraster.
   Alle Selektoren sind hier bewusst mit `.kipn` vorangestellt: Die
   Basisdefinitionen der Komponenten stehen weiter unten in dieser
   Datei und haben dieselbe Spezifität (0,1,0) — bei Gleichstand
   gewinnt die SPÄTERE Regel. Ohne diese Anhebung würden
   `.kipn-board-quad__cards { display: grid }` und
   `.kipn-board-card__quad { display: none }` den Listenmodus wieder
   aushebeln (dann greift `order` nicht und die Einordnung fehlt). */
@container kipnboard (max-width: 539px) {
  .kipn .kipn-board__grid { display: flex; flex-direction: column; gap: var(--kipn-s2); }
  /* Quadranten lösen sich auf, ihre Karten werden direkte Listenkinder
     und ordnen sich über `order` nach Priorität. */
  .kipn .kipn-board-quad,
  .kipn .kipn-board-quad__cards { display: contents; }
  .kipn .kipn-board-quad__head { display: none; }
  /* Leere Bereiche liefern in der Liste keine Information mehr und
     dürfen keine Fläche beanspruchen (§6.5). */
  .kipn .kipn-board-quad.is-empty { display: none; }
  /* Einordnung wandert als kleiner Text auf die Karte (§6.2). */
  .kipn .kipn-board-card__quad { display: block; }
}
/* Stufe „mittel": 2×2-Raster, Detail darunter über volle Breite. */
@container kipnboard (min-width: 540px) {
  .kipn .kipn-board__grid { grid-template-columns: 1fr 1fr; }
}
/* Stufe „breit": nur bei nachweislich ausreichender Containerbreite. */
@container kipnboard (min-width: 980px) {
  .kipn .kipn-board { grid-template-columns: minmax(580px, 3fr) minmax(380px, 2fr); }
  .kipn .kipn-board__detail { position: sticky; top: var(--kipn-s4); }
}

.kipn-board-quad {
  min-width: 0;
  max-width: 100%;
  align-self: start;              /* §6.5: keine erzwungene Gleichhöhe */
  padding: var(--kipn-s5);        /* §6.2: Innenabstand 16–20px */
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  background: var(--kipn-bg);
}
/* Markenfarben (§2): Cyan nur für die wichtigste Kategorie „Sofort
   starten"; die übrigen Bereiche in ruhigen Schieferblau-Abstufungen. */
.kipn-board-quad--sofort      { border-top: 3px solid var(--kipn-accent); }
.kipn-board-quad--strategisch { border-top: 3px solid var(--kipn-primary); }
.kipn-board-quad--ergaenzen   { border-top: 3px solid var(--kipn-muted); }
.kipn-board-quad--spaeter     { border-top: 3px solid var(--kipn-line-strong); }
/* §6.5: leere Bereiche kompakt — sie dürfen die Aufmerksamkeit nicht
   dominieren, bleiben aber als Einordnungsraster erkennbar. */
.kipn-board-quad.is-empty {
  padding: var(--kipn-s3) var(--kipn-s4);
  background: transparent;
  border-style: dashed;
  opacity: .68;
}
.kipn-board-quad.is-empty .kipn-board-quad__head { margin-bottom: 2px; }
.kipn-board-quad.is-empty .kipn-board-quad__sub { display: none; }
.kipn-board-quad__head { margin: 0 0 var(--kipn-s3); }
.kipn-board-quad__title {
  display: block;
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--kipn-primary);
}
.kipn-board-quad__sub { display: block; font-size: 11.5px; color: var(--kipn-muted); margin-top: 1px; }
.kipn-board-quad__cards { display: grid; gap: var(--kipn-s3); align-content: start; }
.kipn .kipn-board-quad__empty { margin: 0; font-size: 12px; color: var(--kipn-muted); }

.kipn .kipn-board-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;                  /* §6.5: natürliche Inhaltshöhe */
  align-self: start;
  margin: 0;
  padding: var(--kipn-s4);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--kipn-t-fast) ease, box-shadow var(--kipn-t-fast) ease, transform var(--kipn-t-fast) ease;
}
.kipn .kipn-board-card:hover { border-color: var(--kipn-line-strong); box-shadow: var(--kipn-shadow); transform: translateY(-1px); }
.kipn .kipn-board-card[aria-pressed="true"] { border-color: var(--kipn-accent); box-shadow: inset 0 0 0 1px var(--kipn-accent); }
.kipn .kipn-board-card--reco {
  border-color: var(--kipn-accent-ink);
  box-shadow: inset 0 0 0 1px var(--kipn-accent-ink), var(--kipn-shadow);
  background: var(--kipn-accent-soft);
}
.kipn .kipn-board-card--main { border-color: var(--kipn-primary); }
/* §6.5: seriöse, nicht übergroße Kennzeichnung; §6.4: einzeilig. */
.kipn-board-card__flag {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kipn-board-card__flag--start { background: var(--kipn-accent-ink); color: var(--kipn-white); }
.kipn-board-card__flag--reco  { background: var(--kipn-accent-ink); color: var(--kipn-white); }
/* „Größter Zeitfresser": zurückhaltender, in Markenfarbe statt Amber
   (§2) — die Empfehlung bleibt der einzige Cyan-Akzent. */
.kipn-board-card__flag--main  { background: var(--kipn-white); color: var(--kipn-primary); border: 1px solid var(--kipn-primary); }

/* §6.4 TEXT & UMBRÜCHE — die Kernkorrektur gegen „Doku-mente":
   Bis 4.0.2 galt hier `overflow-wrap: anywhere; hyphens: auto`. Das
   erlaubt Umbrüche MITTEN IM WORT und erzeugte in schmalen Spalten
   zerfallende Titel. Ab 4.3.0 wird ausschließlich an Leerzeichen
   umbrochen; nur überlange Einzelwörter ohne jede Umbruchchance
   dürfen brechen (break-word statt anywhere). */
.kipn-board-card__title,
.kipn-board-card__quad,
.kipn-board-card__mk,
.kipn-board-card__mv,
.kipn-board-card__flag,
.kipn-board-quad__title,
.kipn-board-quad__sub,
.kipn-board-badge,
.kipn .kipn-board-detail__title,
.kipn .kipn-board-detail__row dt,
.kipn .kipn-board-detail__row dd,
.kipn .kipn-board-detail__text {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}
.kipn-board-card__flag, .kipn-board-badge, .kipn-board-quad__title { white-space: nowrap; }
.kipn-board-quad__title { white-space: normal; }
/* Einordnungs-Badge: nur im schmalen Listenmodus sichtbar. */
.kipn-board-card__quad {
  display: none;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn-board-card__title {
  display: block;
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--kipn-primary);
}
/* §6.4: Kennzahlen als klare Zeilenstruktur statt Inline-Kette,
   §6.5: ausreichend Weißraum zwischen Titel und Kennzahlen. */
.kipn-board-card__metrics {
  display: grid;
  gap: 3px;
  margin-top: var(--kipn-s3);
  padding-top: var(--kipn-s2);
  border-top: 1px solid var(--kipn-line);
}
.kipn-board-card__metric { display: flex; justify-content: space-between; gap: var(--kipn-s3); font-size: 12.5px; }
.kipn-board-card__mk { color: var(--kipn-muted); }
.kipn-board-card__mv { font-weight: 600; color: var(--kipn-text); text-align: right; }

/* --- Detailansicht (§6.6): kompakter Beratungsbaustein --- */
.kipn-board__detail {
  min-width: 0;
  max-width: 100%;
  padding: var(--kipn-s5);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  background: var(--kipn-white);
  /* eigener Container: die Detailansicht entscheidet selbst, ob zwei
     Informationsspalten sinnvoll sind — unabhängig vom Board. */
  container-type: inline-size;
  container-name: kipndetail;
}
.kipn-board-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--kipn-s2) var(--kipn-s3);
  margin-bottom: var(--kipn-s4);
}
.kipn-board-detail__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.kipn-board-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.kipn-board-badge--reco { background: var(--kipn-accent-ink); color: var(--kipn-white); }
.kipn-board-badge--main { background: var(--kipn-white); color: var(--kipn-primary); border: 1px solid var(--kipn-primary); }
.kipn .kipn-board-detail__title {
  margin: 0;
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--kipn-primary);
}
.kipn-board-detail__cols { display: grid; gap: var(--kipn-s5); align-items: start; }
/* Zwei ruhige Informationsspalten erst, wenn die Detailansicht wirklich
   breit genug ist: links Einordnung/Kennzahlen, rechts erster Schritt
   und Begründung (§6.1). */
@container kipndetail (min-width: 560px) {
  .kipn-board-detail__cols { grid-template-columns: 1fr 1fr; gap: var(--kipn-s7); }
}
.kipn-board-detail__col { min-width: 0; }
.kipn .kipn-board-detail__collabel {
  margin: 0 0 var(--kipn-s2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
.kipn-board-detail__col .kipn-board-detail__collabel:not(:first-child) { margin-top: var(--kipn-s4); }
.kipn .kipn-board-detail__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--kipn-text); }
/* §6.6: ruhige KPI-/Definitionsstruktur statt Tabellenoptik mit vielen
   horizontalen Linien — nur eine feine Trennlinie zwischen den Zeilen. */
.kipn-board-detail__list { margin: 0; }
.kipn-board-detail__row {
  display: flex;
  justify-content: space-between;
  gap: var(--kipn-s4);
  padding: 7px 0;
}
.kipn-board-detail__row + .kipn-board-detail__row { border-top: 1px solid var(--kipn-line); }
.kipn .kipn-board-detail__row dt { margin: 0; font-size: 13px; color: var(--kipn-muted); }
.kipn .kipn-board-detail__row dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--kipn-text); text-align: right; }
/* Sehr schmale Detailansicht: Bezeichnung und Wert untereinander. */
@container kipndetail (max-width: 340px) {
  .kipn-board-detail__row { flex-direction: column; gap: 1px; }
  .kipn .kipn-board-detail__row dd { text-align: left; }
}
/* Ruhiger, gestaffelter Aufbau der Karten (kein Springen/Rotieren) */
.kipn .kipn-reveal.is-in .kipn-board-card { animation: kipn-card-in .45s var(--kipn-ease) backwards; }
.kipn .kipn-reveal.is-in .kipn-board-quad--sofort .kipn-board-card { animation-delay: .05s; }
.kipn .kipn-reveal.is-in .kipn-board-quad--strategisch .kipn-board-card { animation-delay: .12s; }
.kipn .kipn-reveal.is-in .kipn-board-quad--ergaenzen .kipn-board-card { animation-delay: .19s; }
.kipn .kipn-reveal.is-in .kipn-board-quad--spaeter .kipn-board-card { animation-delay: .26s; }
@keyframes kipn-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Barrierefreie Detail-Sektionen <details> (§8) --- */
.kipn-details {
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  background: var(--kipn-white);
  margin-bottom: var(--kipn-s4);
}
.kipn-details--block { background: transparent; border: 0; }
.kipn-details__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--kipn-s4) var(--kipn-s5);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--kipn-primary);
  display: flex;
  align-items: center;
  gap: var(--kipn-s2);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  background: var(--kipn-bg);
}
.kipn-details--block > .kipn-details__summary { background: var(--kipn-bg); }
.kipn-details__summary::-webkit-details-marker { display: none; }
.kipn-details__summary::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--kipn-accent-ink);
  border-bottom: 2px solid var(--kipn-accent-ink);
  transform: rotate(45deg);
  transition: transform var(--kipn-t-fast) ease;
}
.kipn-details[open] > .kipn-details__summary::before { transform: rotate(225deg); }
.kipn-details__summary:focus-visible { outline: 2px solid var(--kipn-accent); outline-offset: 2px; }
.kipn-details__body { padding-top: var(--kipn-s3); }
.kipn-details:not(.kipn-details--block) .kipn-details__summary { border: 0; border-top: 1px dashed var(--kipn-line); border-radius: 0; padding-left: 0; padding-right: 0; background: transparent; }
.kipn-details:not(.kipn-details--block) .kipn-details__body { padding: 0; }

/* --- Einsparung: Spanne + transparente Annahmen (§7.3) --- */
.kipn-savings__cell--range { border-color: var(--kipn-accent); background: var(--kipn-accent-soft); }
.kipn-assume {
  margin-top: var(--kipn-s4);
  padding-top: var(--kipn-s4);
  border-top: 1px dashed var(--kipn-line);
}
.kipn .kipn-assume__title {
  margin: 0 0 var(--kipn-s2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn .kipn-assume ul { margin: 0; padding-left: 18px; }
.kipn .kipn-assume li { font-size: 13px; color: var(--kipn-muted); margin-bottom: 4px; }

/* --- Prioritäten (§8.4) --- */
.kipn-field--start { border-color: var(--kipn-accent); }
.kipn .kipn-field__kicker {
  margin: 2px 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
.kipn-qwgrid { display: grid; gap: var(--kipn-s2); margin-top: var(--kipn-s3); }
.kipn-qw {
  min-width: 0;
  padding: var(--kipn-s2) var(--kipn-s3);
  background: var(--kipn-accent-soft);
  border-left: 2px solid var(--kipn-accent);
  border-radius: 0 var(--kipn-radius-sm) var(--kipn-radius-sm) 0;
}
.kipn-qw__k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kipn-accent-ink); }
.kipn-qw__v { font-size: 13.5px; }

/* --- Workshop-Fahrplan (§9) --- */
.kipn-card--plan { border-color: var(--kipn-line-strong); }
.kipn .kipn-plan__preconfig {
  margin: 0 0 var(--kipn-s2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
.kipn .kipn-plan__intro { margin: 0 0 var(--kipn-s2); font-size: 14.5px; }
.kipn .kipn-plan__focus { margin: 0 0 var(--kipn-s5); padding-left: 20px; }
.kipn .kipn-plan__prep { margin: 0 0 var(--kipn-s2); padding-left: 20px; }
.kipn .kipn-plan__prep li { font-size: 13.5px; margin-bottom: 4px; }
.kipn .kipn-plan__focus li { font-weight: 600; color: var(--kipn-primary); font-size: 15px; margin-bottom: 4px; }
.kipn .kipn-plan__label {
  margin: var(--kipn-s5) 0 var(--kipn-s3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn-plan__modules { display: grid; gap: var(--kipn-s3); }
.kipn-module {
  min-width: 0;
  padding: var(--kipn-s4);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-bg);
}
.kipn .kipn-module__name { margin: 0 0 4px; font-weight: 700; font-size: 14.5px; color: var(--kipn-primary); }
.kipn .kipn-module__line { margin: 0 0 2px; font-size: 13.5px; }
.kipn-plan__meta { display: grid; gap: var(--kipn-s4); margin-top: var(--kipn-s4); }
.kipn-plan__meta > div { min-width: 0; }
.kipn-plan__k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kipn-muted); margin: var(--kipn-s2) 0 2px; }
.kipn .kipn-plan__meta ul { margin: 0; padding-left: 18px; }
.kipn .kipn-plan__meta li, .kipn .kipn-plan__meta p { font-size: 13.5px; margin: 0 0 3px; }
.kipn-roadmap { display: grid; gap: var(--kipn-s3); }
.kipn-roadmap__phase {
  min-width: 0;
  padding: var(--kipn-s4);
  border: 1px solid var(--kipn-line);
  border-left: 3px solid var(--kipn-accent);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-white);
}
.kipn .kipn-roadmap__days {
  margin: 0 0 var(--kipn-s2);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--kipn-primary);
}
.kipn .kipn-roadmap__phase ul { margin: 0; padding-left: 18px; }
.kipn .kipn-roadmap__phase li { font-size: 13.5px; margin-bottom: 4px; }
.kipn .kipn-plan__desc { margin: var(--kipn-s4) 0 0; font-size: 13.5px; color: var(--kipn-muted); }
.kipn-plan__actions { display: flex; flex-wrap: wrap; gap: var(--kipn-s3); margin-top: var(--kipn-s4); }

/* --- Dynamischer CTA-Abschluss (§10) --- */
.kipn-cta__alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kipn-s2) var(--kipn-s5);
  margin-top: var(--kipn-s4);
}
.kipn .kipn-cta__altlink {
  background: none; border: 0; margin: 0; padding: 0;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: rgba(248,250,252,.85);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.kipn .kipn-cta__altlink:hover { color: var(--kipn-white); }

/* --- Honeypot: für Menschen unsichtbar --- */
.kipn-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==================== 4c. KI-PRAXISBERATER (§9) ====================
   Dieser gesamte Block ist nur im DOM, wenn der Betreiber die KI im
   Backend aktiviert UND vollständig konfiguriert hat. Im Standard-
   zustand (KI aus) existiert kein einziges dieser Elemente — die
   Ergebnisdramaturgie ist dann bitgleich zu 4.0.2.

   Gestaltung bewusst als ruhiger Beratungsbaustein, nicht als Chat:
   keine Sprechblasen, keine Avatare, keine Tipp-Animation, kein Neon. */
.kipn-ai {
  margin: 0 0 var(--kipn-s4);
  padding: var(--kipn-s6) var(--kipn-s5);
  border: 1px solid var(--kipn-line-strong);
  border-left: 3px solid var(--kipn-accent-ink);
  border-radius: var(--kipn-radius);
  background: var(--kipn-white);
  min-width: 0;
  /* eigener Layout-Container: die KI-Sektion entscheidet anhand ihrer
     TATSÄCHLICHEN Breite über ein- oder zweispaltige Kennzahlen. */
  container-type: inline-size;
  container-name: kipnai;
}
.kipn .kipn-ai__eyebrow {
  margin: 0 0 var(--kipn-s1);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
.kipn .kipn-ai__title {
  margin: 0 0 var(--kipn-s2);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--kipn-primary);
}
.kipn .kipn-ai__lead { margin: 0 0 var(--kipn-s4); font-size: 14.5px; color: var(--kipn-text); max-width: 62ch; }
/* §19: Transparenz VOR dem ersten Aufruf — sichtbar, nicht versteckt. */
.kipn .kipn-ai__disclosure {
  margin: 0 0 var(--kipn-s2);
  padding: var(--kipn-s3);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-bg);
  border: 1px solid var(--kipn-line);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kipn-text);
}
.kipn .kipn-ai__disclosure a { color: var(--kipn-accent-ink); }
.kipn .kipn-ai__provider { margin: 0 0 var(--kipn-s4); font-size: 12px; color: var(--kipn-muted); }

/* Ladezustand (§17): ruhig, kurz, ohne Fake-Prozentanzeige.

   WICHTIG: Die Statuszeile trägt im Ruhezustand das `hidden`-Attribut.
   Ein Autoren-`display: flex` schlägt jedoch die `[hidden]`-Regel des
   Browser-Stylesheets — ohne die folgende Regel erschiene dauerhaft ein
   leerer Kasten. Deshalb wird `hidden` hier ausdrücklich wieder
   durchgesetzt; das gilt ebenso für den Einstiegsblock, der nach dem
   Start ausgeblendet wird. */
.kipn .kipn-ai__status[hidden],
.kipn .kipn-ai__intro[hidden] { display: none; }
.kipn .kipn-ai__status {
  display: flex;
  align-items: center;
  gap: var(--kipn-s3);
  margin: var(--kipn-s4) 0 0;
  padding: var(--kipn-s3) var(--kipn-s4);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-bg);
  border: 1px solid var(--kipn-line);
  font-size: 14px;
  color: var(--kipn-text);
}
.kipn-ai__status--error { background: var(--kipn-danger-soft); border-color: #FECACA; }
.kipn-ai__spinner {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border: 2px solid var(--kipn-line-strong);
  border-top-color: var(--kipn-accent-ink);
  border-radius: 50%;
  animation: kipn-ai-spin .9s linear infinite;
}
@keyframes kipn-ai-spin { to { transform: rotate(360deg); } }
.kipn-ai__statustext { min-width: 0; }
.kipn-ai__retry { margin-left: auto; flex: 0 0 auto; }

/* ---- Beratungsdialog (5.1.1) ----

   Der KI-Praxisberater wird als geführtes Gespräch dargestellt. Ruhig
   und seriös, nicht als verspielter Messenger: keine Sprechblasen mit
   Zipfeln, keine Avatarbilder, keine Tippanimation.

   Nutzer- und Assistentenbeiträge unterscheiden sich AUSDRÜCKLICH NICHT
   NUR über die Farbe — sie haben eine ausgeschriebene Rollenzeile, eine
   eigene Ausrichtung und eine eigene Rahmenform. Wer Farben nicht
   unterscheiden kann, erkennt den Sprecher trotzdem.

   Es gibt kein freies Eingabefeld: Die kontrollierten
   Antwortmöglichkeiten und die drei festen Vertiefungen bleiben die
   einzigen Eingaben. */
.kipn-chat {
  display: flex;
  flex-direction: column;
  gap: var(--kipn-s4);
  margin-top: var(--kipn-s5);
  min-width: 0;
}
.kipn-chat:empty { margin-top: 0; }
.kipn-chat__pair { display: contents; }
.kipn .kipn-chat__pair[hidden] { display: none; }

.kipn-chat__turn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.kipn-chat__turn:focus { outline: none; }
.kipn-chat__turn:focus-visible { outline: 2px solid var(--kipn-accent-ink); outline-offset: 4px; border-radius: var(--kipn-radius-sm); }

/* Rollenzeile: die eigentliche Unterscheidung. */
.kipn .kipn-chat__who {
  display: flex;
  align-items: center;
  gap: var(--kipn-s2);
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn-chat__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  flex: 0 0 auto;
}
.kipn-chat__turn--ai .kipn-chat__badge { background: var(--kipn-primary); color: var(--kipn-white); }
.kipn-chat__turn--ai .kipn-chat__who { color: var(--kipn-accent-ink); }
.kipn-chat__turn--user .kipn-chat__badge {
  background: var(--kipn-white);
  color: var(--kipn-primary);
  border: 1px solid var(--kipn-line-strong);
}

.kipn-chat__bubble {
  min-width: 0;
  padding: var(--kipn-s4) var(--kipn-s5);
  border: 1px solid var(--kipn-line-strong);
  background: var(--kipn-white);
  overflow-wrap: break-word;
}
/* Assistent: links, mit betonter Kante zur Markenfarbe. */
.kipn-chat__turn--ai .kipn-chat__bubble {
  border-radius: var(--kipn-radius) var(--kipn-radius) var(--kipn-radius) 4px;
  border-left: 3px solid var(--kipn-accent-ink);
}
/* Nutzer: rechts ausgerichtet, ruhig eingefärbt, gespiegelte Kante. */
.kipn-chat__turn--user { align-items: flex-end; }
.kipn-chat__turn--user .kipn-chat__who { flex-direction: row-reverse; }
.kipn-chat__turn--user .kipn-chat__bubble {
  border-radius: var(--kipn-radius) var(--kipn-radius) 4px var(--kipn-radius);
  border-right: 3px solid var(--kipn-line-strong);
  background: var(--kipn-bg);
  max-width: 88%;
}
.kipn .kipn-chat__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--kipn-text);
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .kipn-chat__bubble { padding: var(--kipn-s3) var(--kipn-s4); }
  .kipn-chat__turn--user .kipn-chat__bubble { max-width: 100%; }
}

/* Stufe 1: genau eine Rückfrage mit kontrollierten Auswahlkarten. */
.kipn-ai__block { margin-top: var(--kipn-s5); }
.kipn .kipn-ai__introtext { margin: 0 0 var(--kipn-s3); font-size: 14px; color: var(--kipn-muted); max-width: 62ch; }
.kipn .kipn-ai__question {
  margin: 0 0 var(--kipn-s4);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--kipn-primary);
  hyphens: none;
}
/* Eine Auswahl je Zeile. Der Container darf selbst nicht breiter
   werden als der Platz, den er tatsächlich hat. */
.kipn-ai__options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kipn-s2);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.kipn .kipn-ai-opt {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: var(--kipn-s4);
  border: 1px solid var(--kipn-line-strong);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-white);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  color: var(--kipn-text);
  cursor: pointer;
  /* Höhe folgt dem Text; die Untergrenze sichert das Touch-Ziel. */
  min-height: 44px;
  white-space: normal;
  /* `anywhere` statt des geerbten `break-word`: Nur `anywhere` wirkt
     auch auf die min-content-Breite. Ein einzelnes langes Kompositum
     oder eine URL kann das Feld dadurch nicht mehr aufblähen. */
  overflow-wrap: anywhere;
  transition: border-color var(--kipn-t-fast) ease, background var(--kipn-t-fast) ease;
}
/* Hover NUR im bedienbaren Zustand (5.1.0). Ein Hover-Effekt auf einer
   gesperrten Schaltfläche verspricht eine Reaktion, die nicht kommt. */
.kipn .kipn-ai-opt:not([disabled]):hover { border-color: var(--kipn-accent-ink); background: var(--kipn-accent-soft); }
.kipn .kipn-ai-opt[aria-pressed="true"] { border-color: var(--kipn-accent-ink); background: var(--kipn-accent-soft); font-weight: 600; }
.kipn .kipn-ai-opt:focus-visible { outline: 2px solid var(--kipn-accent-ink); outline-offset: 2px; }
/* Deaktiviert: klar erkennbar, aber mit ausreichendem Kontrast. .55
   Deckkraft unterschritt bei grauer Schrift die Lesbarkeitsgrenze —
   deshalb .72 plus zurückgenommene Kontur statt reinem Ausgrauen. */
.kipn .kipn-ai-opt[disabled] {
  opacity: .72;
  cursor: default;
  background: var(--kipn-bg);
  border-color: var(--kipn-line);
}
/* Die getroffene Wahl bleibt auch gesperrt erkennbar — sie ist die
   Bestätigung, dass der Klick angekommen ist. */
.kipn .kipn-ai-opt[disabled][aria-pressed="true"] {
  opacity: 1;
  background: var(--kipn-accent-soft);
  border-color: var(--kipn-accent-ink);
}

/* Stufe 2: Praxisplan.
   Seit 5.1.1 steht er innerhalb eines Assistentenbeitrags; der frühere
   Außenabstand entfällt, die Sprechblase bringt ihn mit. */
.kipn-ai-plan { margin-top: 0; }
.kipn-ai-plan__sec { margin: 0 0 var(--kipn-s5); }
.kipn .kipn-ai-plan__label {
  margin: 0 0 var(--kipn-s2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
.kipn .kipn-ai-plan__h {
  margin: 0 0 var(--kipn-s2);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--kipn-primary);
}
.kipn .kipn-ai-plan__text { margin: 0 0 var(--kipn-s2); font-size: 14.5px; line-height: 1.6; color: var(--kipn-text); }
.kipn .kipn-ai-plan__goal {
  margin: 0 0 var(--kipn-s3);
  padding: var(--kipn-s3);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-accent-soft);
  border-left: 2px solid var(--kipn-accent);
  font-size: 14.5px;
  color: var(--kipn-text);
}
.kipn .kipn-ai-plan__steps { margin: 0 0 var(--kipn-s3); padding-left: 1.2em; }
.kipn .kipn-ai-plan__steps li { margin-bottom: var(--kipn-s2); font-size: 14.5px; line-height: 1.55; }
.kipn-ai-plan__kpis { display: grid; gap: var(--kipn-s3); margin: 0; }
@container kipnai (min-width: 520px) {
  .kipn-ai-plan__kpis { grid-template-columns: 1fr 1fr; gap: var(--kipn-s3) var(--kipn-s5); }
}
.kipn-ai-plan__kpi { min-width: 0; }
.kipn .kipn-ai-plan__kpi dt { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kipn-muted); }
.kipn .kipn-ai-plan__kpi dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--kipn-text); }
.kipn .kipn-ai-plan__list { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.55; }
.kipn .kipn-ai-plan__list li { margin-bottom: 4px; }
.kipn .kipn-ai-plan__decision {
  margin: 0 0 var(--kipn-s4);
  padding: var(--kipn-s4);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-primary);
  color: var(--kipn-white);
  font-family: var(--kipn-font-head);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.45;
}

/* §9.5: maximal drei feste Vertiefungsaktionen, kein freier Chat. */
/* URSACHE DES ÜBERLAUFS (behoben in 5.0.1)
 *
 * Diese Pillen sind Flex-Kinder. Ein Flex-Item hat standardmäßig
 * `min-width: auto` und schrumpft deshalb NICHT unter seine
 * min-content-Breite. Bei einem langen zusammengesetzten Begriff oder
 * einer URL ohne Leerzeichen ist min-content die volle Wortbreite — das
 * Element wuchs auf 503 px in einem 244 px breiten Container und schob
 * den gesamten Inhaltsbereich seitlich heraus.
 *
 * Das geerbte `overflow-wrap: break-word` konnte das nicht verhindern:
 * Es bricht erst, wenn die Zeile zu schmal ist, beeinflusst aber die
 * min-content-Breite nicht. Nur `anywhere` tut das.
 *
 * `flex-wrap: wrap` bleibt erhalten: Kurze Pillen stehen weiterhin
 * nebeneinander, eine lange nimmt die ganze Zeile ein. */
.kipn-ai__followups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kipn-s2);
  margin: 0 0 var(--kipn-s4);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.kipn .kipn-ai-fu {
  /* inline-flex statt des Standardverhaltens: Damit bleibt der Text
     auch dann mittig, wenn die Mindesthöhe für das Touch-Ziel greift
     oder der Text auf zwei Zeilen umbricht. */
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 9px var(--kipn-s4);
  border: 1px solid var(--kipn-line-strong);
  border-radius: 999px;
  background: var(--kipn-white);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--kipn-text);
  cursor: pointer;
  /* Der Kern der Korrektur. */
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  min-height: 44px;
  transition: border-color var(--kipn-t-fast) ease, background var(--kipn-t-fast) ease;
}
.kipn .kipn-ai-fu:not([disabled]):hover { border-color: var(--kipn-accent-ink); background: var(--kipn-accent-soft); }
.kipn .kipn-ai-fu[aria-expanded="true"] { border-color: var(--kipn-accent-ink); background: var(--kipn-accent-soft); font-weight: 600; }
.kipn .kipn-ai-fu:focus-visible { outline: 2px solid var(--kipn-accent-ink); outline-offset: 2px; }
/* Deaktiviert (5.1.0): kein Hover, kein Zeigefinger, klar erkennbar. */
.kipn .kipn-ai-fu[disabled] {
  opacity: .72;
  cursor: default;
  background: var(--kipn-bg);
  border-color: var(--kipn-line);
}
.kipn .kipn-ai-fu[disabled][aria-expanded="true"] {
  opacity: 1;
  background: var(--kipn-accent-soft);
  border-color: var(--kipn-accent-ink);
}

/* MOBIL: jede Vertiefung einzeln untereinander (5.1.0)
 *
 * Die Überlaufkorrektur aus 5.0.1 (overflow-wrap: anywhere, min-width: 0)
 * bleibt vollständig erhalten — sie verhindert, dass ein langes
 * Kompositum den Container sprengt. Sie regelte aber nicht, dass mehrere
 * KURZE Pillen nebeneinander stehen. Auf schmalen Geräten ergibt das
 * gequetschte, schwer treffbare Ziele. Deshalb wird der Flexverbund hier
 * durch ein einspaltiges Raster ersetzt.
 *
 * Die Regel gilt ausdrücklich NUR für die dynamisch erzeugten
 * KI-Elemente. Die Auswahlkarten der sechs Basisetappen (.kipn-opt)
 * werden davon nicht berührt. */
@media (max-width: 767px) {
  .kipn .kipn-ai__followups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kipn-s2);
  }
  .kipn .kipn-ai-fu {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 11px var(--kipn-s4);
  }
  /* Die Auswahlkarten der Rückfrage stehen bereits einspaltig; hier nur
     ausdrücklich festgehalten, damit eine spätere Änderung am Raster
     nicht unbemerkt zu zwei Spalten führt. */
  .kipn .kipn-ai__options { grid-template-columns: minmax(0, 1fr); }
}

/* TABLET UND DESKTOP: Die bestehende Darstellung bleibt erhalten. Kurze
   Pillen stehen weiterhin nebeneinander, eine lange nimmt die ganze
   Zeile ein — gequetschte Pillen entstehen dabei nicht, weil jede Pille
   ihren Text vollständig umbrechen darf. */

/* Die Vertiefungsantwort ist seit 5.1.1 der Inhalt eines
   Assistentenbeitrags. Rahmen und Hintergrund bringt die Sprechblase
   mit — der eigene Kasten entfällt. */
.kipn-ai-fu__panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.kipn .kipn-ai-fu__title { margin: 0 0 var(--kipn-s2); font-family: var(--kipn-font-head); font-weight: 700; font-size: 14.5px; color: var(--kipn-primary); }
.kipn .kipn-ai-fu__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kipn-text); }

/* §9.6: Übergang zum vorhandenen Leadformular — kein zweites Formular. */
.kipn-ai__cta { margin: var(--kipn-s5) 0 var(--kipn-s2); }
.kipn .kipn-ai__ctareason { margin: 0 0 var(--kipn-s4); font-size: 13px; color: var(--kipn-muted); max-width: 62ch; }
.kipn .kipn-ai__note { margin: 0; padding-top: var(--kipn-s3); border-top: 1px solid var(--kipn-line); font-size: 12px; line-height: 1.5; color: var(--kipn-muted); }

/* ==================== 5. DRUCK-REPORT ====================
   Der PDF-Export läuft seit v2.2 über ein isoliertes Druckdokument
   (unsichtbares same-origin iframe, das ausschließlich den Report
   und sein eigenes Print-CSS enthält — siehe navigator.js, Modul 10).

   Der frühere In-Page-Ansatz (`body * { visibility: hidden }` +
   absolut positionierter Report) ließ Theme-, Elementor- und
   Seitenelemente im Layoutfluss: `visibility: hidden` kollabiert
   keine Höhe, die unsichtbare Gesamtseite erzeugte daher zusätzliche
   leere Druckseiten. Er ist deshalb vollständig entfernt.

   Dieser Container dient nur noch als Datenquelle für das
   Druckdokument und ist in jedem Medium unsichtbar. */
.kipn-print-report { display: none !important; }

@media print {
  /* Fallback für direktes Strg/Cmd+P auf der Gesamtseite: rein
     interaktive Elemente ausblenden, Report-Sektionen sichtbar
     lassen. Der eigentliche PDF-Export nutzt das isolierte
     Druckdokument und ist hiervon unabhängig. */
  .kipn { box-shadow: none; border-color: #CBD5E1; }
  .kipn-toolbar__meta,
  .kipn-progress,
  .kipn-nav,
  .kipn-result__actions,
  .kipn-analysis__spinner,
  /* KI-Bedienelemente sind im Druck bedeutungslos; die INHALTE des
     Praxisplans bleiben sichtbar (§20). */
  .kipn-ai__intro,
  .kipn-ai__options,
  .kipn-ai__followups,
  .kipn-ai__cta,
  .kipn-ai__spinner { display: none; }
  .kipn-ai { border-left-width: 2pt; }
  .kipn .kipn-reveal { opacity: 1 !important; transform: none !important; }
  .kipn-card, .kipn-field, .kipn-cta { break-inside: avoid; page-break-inside: avoid; }
  /* §8: aufklappbare Detailbereiche im Druck IMMER vollständig zeigen,
     nie eingeklappt oder verborgen. Gilt für den Fallback-Direktdruck
     der Seite; der eigentliche PDF-Export nutzt ohnehin das statische
     Druckdokument (renderPrintReport) mit voll ausgeschriebenem Inhalt. */
  .kipn-details:not([open]) > .kipn-details__body { display: block !important; }
  .kipn-details__summary::before { display: none; }
}

/* ==================== 5b. KLEINE VIEWPORTS ====================
   Härtung für 320–480 px: nichts ragt über den Container hinaus,
   Buttons bleiben vollflächig bedienbar, Formular und Einwilligung
   bekommen Luft. Desktop/Tablet bleiben unberührt (max-width). */
@media (max-width: 480px) {
  /* Sekundäre Aktionen: untereinander, volle Breite statt Overflow */
  .kipn-result__actions { flex-direction: column; align-items: stretch; }
  .kipn-result__actions .kipn-btn { width: 100%; }

  /* Fragen-Navigation: beide Buttons teilen sich die Breite */
  .kipn-nav .kipn-btn { flex: 1 1 0; padding-left: var(--kipn-s4); padding-right: var(--kipn-s4); }
  /* Einzelner Zurück-Button (Auto-Advance) NICHT auf volle Breite ziehen
     (§3.3) — muss nach der obigen Regel stehen, um sie zu überschreiben. */
  .kipn-nav--single .kipn-btn { flex: 0 0 auto; }

  /* Formular: 16px verhindert iOS-Auto-Zoom beim Fokussieren */
  .kipn-form input, .kipn-form textarea { font-size: 16px; }

  /* Einwilligung: größeres Touch-Ziel, mehr Abstand zum Text.
     Die Spaltenbreite wandert mit, damit das Grid exakt bleibt. */
  .kipn .kipn-form__consent,
  .kipn .kipn-form__opt { grid-template-columns: 22px minmax(0, 1fr); gap: var(--kipn-s3); }
  .kipn .kipn-form .kipn-form__consent input[type="checkbox"].kipn-form__box,
  .kipn .kipn-form .kipn-form__opt input[type="checkbox"].kipn-form__box {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }
}

@media (max-width: 360px) {
  .kipn-toolbar { padding-left: var(--kipn-s4); padding-right: var(--kipn-s4); }
  .kipn-progress { padding-left: var(--kipn-s4); padding-right: var(--kipn-s4); }
  .kipn-screen { padding-left: var(--kipn-s4); padding-right: var(--kipn-s4); }
  .kipn .kipn-btn { padding-left: var(--kipn-s4); padding-right: var(--kipn-s4); }
  .kipn-card { padding: var(--kipn-s4); }
  .kipn-cta { padding: var(--kipn-s5) var(--kipn-s4); }
  .kipn-field { grid-template-columns: 28px 1fr; padding: var(--kipn-s3) var(--kipn-s4); }
  .kipn .kipn-opt label { padding: 12px var(--kipn-s3); }
}

/* ==================== 6. DESKTOP (min-width) ==================== */
@media (min-width: 721px) {
  /* `.kipn` ist seit 5.0.0 nur noch ein Wrapper ohne eigene Fläche —
     Rahmen und Schatten trägt der Einstieg (.kipn-launch) bzw. die
     Overlay-Hülle (.kipn-shell). Eine Kastenoptik auf dem Wrapper würde
     hier einen zweiten, leeren Rahmen erzeugen. */
  .kipn { font-size: 17px; }
  .kipn-toolbar { padding: var(--kipn-s4) var(--kipn-s6); }
  /* Logo Desktop (§7.3): sichtbare Höhe 56px → 198px Breite beim
     gebündelten Standardlogo. Enthält ein BENUTZERDEFINIERTES Logo viel
     eigenen Innenrand, wirkt es optisch kleiner — dann eine enger
     beschnittene Datei hinterlegen oder das Feld leeren, um auf das
     optimierte Standardlogo zurückzufallen (Hinweis in der
     Admin-Beschreibung). Fremde Markendateien verändert das Plugin nie. */
  .kipn-toolbar__brand .kipn-toolbar__logo { max-height: 56px; max-width: 260px; }
  .kipn-toolbar__meta { display: inline; }
  .kipn-progress { padding: var(--kipn-s5) var(--kipn-s6) 0; }
  .kipn .kipn-progress__phases li span { display: inline; margin-left: 6px; }
  /* 5.3.0: oben und unten von 40 auf 24 px verdichtet.
     Das ist die Gegenfinanzierung des Kontextbands (Abschnitt 6): Bei
     1366 × 768 und 1024 × 768 lagen in 5.2.2 nur 12 px zwischen der
     höchsten Frage und dem Scrollbalken. Der Bildschirm beginnt jetzt
     mit einer sichtbaren Fläche statt mit Leerraum — die Ansicht wirkt
     dadurch nicht enger, sondern geordneter. */
  .kipn-screen { padding: var(--kipn-s6) var(--kipn-s7) var(--kipn-s6); }
  .kipn .kipn-benefits li { grid-template-columns: 190px 1fr; gap: var(--kipn-s4); align-items: baseline; }
  .kipn-opts--2col { grid-template-columns: 1fr 1fr; }
  .kipn-scorecard { grid-template-columns: 220px 1fr; text-align: left; align-items: center; }
  .kipn-summary__kpis { grid-template-columns: repeat(3, 1fr); }
  .kipn-savings__grid { grid-template-columns: repeat(3, 1fr); }
  .kipn-scores { grid-template-columns: repeat(3, 1fr); }
  .kipn-compare { grid-template-columns: 1fr 1fr; }
  /* Das Opportunity-Board-Layout ist seit 3.0.2 containerbasiert
     (siehe @container kipnboard weiter oben) und nicht mehr an die
     Browserbreite gekoppelt. */
  .kipn-qwgrid { grid-template-columns: 1fr 1fr; }
  .kipn-plan__modules { grid-template-columns: repeat(3, 1fr); }
  .kipn-plan__meta { grid-template-columns: 1fr 1fr; }
  .kipn-roadmap { grid-template-columns: repeat(3, 1fr); }
  .kipn-form { grid-template-columns: 1fr 1fr; }
  .kipn-form > div { grid-column: auto; }
  .kipn-form .kipn-form__full { grid-column: 1 / -1; }
  .kipn-dim {
    grid-template-columns: 200px 1fr 44px;
    grid-template-areas: "label track num";
    align-items: center;
    gap: var(--kipn-s3);
  }
  .kipn-dim__head { display: contents; }
  .kipn-dim__label { grid-area: label; }
  .kipn-dim__track { grid-area: track; }
  .kipn-dim__num { grid-area: num; text-align: right; }
  .kipn-card { padding: var(--kipn-s6); }
}

/* ==================== 7. REDUZIERTE BEWEGUNG ==================== */
@media (prefers-reduced-motion: reduce) {
  .kipn *, .kipn *::before, .kipn *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Das Overlay und sein Hintergrund erscheinen ohne Bewegung.
     `::backdrop` ist KEIN Nachfahre von .kipn und wird deshalb von der
     Regel oben nicht erfasst — es braucht einen eigenen Eintrag. */
  .kipn-overlay[open],
  .kipn-overlay[open]::backdrop {
    animation: none !important;
  }
  .kipn .kipn-reveal { opacity: 1; transform: none; }
  /* Keine Information ausschließlich über Animation: die gestaffelten
     Board-Karten (backwards-Fill hält sie sonst bis zum Delay
     unsichtbar) sind hier sofort vollständig sichtbar. */
  .kipn-board-card { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* §17: Der KI-Ladezustand bleibt erkennbar, aber ohne Dauerrotation.
     Der Status wird ohnehin als Text ausgegeben und per aria-live
     angesagt — die Animation trägt keine eigene Information. */
  .kipn-ai__spinner,
  .kipn-busy__spinner {
    animation: none !important;
    border-top-color: var(--kipn-accent-ink);
    border-radius: 2px;
  }
}

/* ============================================================
   HOTELVARIANTE (5.4.0, erweitert 5.4.1)

   Nur, was die Hotelvariante wirklich braucht und wofür es keine
   passende Komponente gab. Alles andere — Karten, Abschnitte,
   Schaltflächen, Formular, Schieberegler, Fortschritt, Overlay —
   benutzt sie unverändert mit.

   Die Regeln stehen bewusst am Ende der Datei und ausschließlich
   unter `.kipn`: Sie können nichts überschreiben, was die allgemeine
   Variante benutzt, und greifen nur in Markup, das es dort nicht gibt.
   ============================================================ */

/* Die drei Stufen der Priorisierung. Farblich derselbe Gedanke wie bei
   der Prioritätenkarte: Cyan nur für das, was sofort geprüft werden
   kann; alles Weitere in ruhigen Abstufungen. */
.kipn .kipn-board-quad--sofort        { border-top: 3px solid var(--kipn-accent); }
.kipn .kipn-board-quad--vorbereitung  { border-top: 3px solid var(--kipn-primary); }
.kipn .kipn-board-quad--systempruefung{ border-top: 3px solid var(--kipn-line-strong); }
/* 5.4.1: „Erst nach Systemprüfung" heißt jetzt „Noch nicht startklar".
   Die alte Regel bleibt für zwischengespeicherte Ausgaben stehen. */
.kipn .kipn-board-quad--nicht_startklar{ border-top: 3px solid var(--kipn-line-strong); }
.kipn .kipn-board-quad + .kipn-board-quad { margin-top: var(--kipn-s4); }

/* Ein Anwendungsfall in der Stufenliste.

   Bewusst NICHT `.kipn-field`: Das ist ein zweispaltiges Raster mit
   einer Rangnummer in der ersten Spalte. Ohne Rangnummer landete der
   Inhalt in der schmalen Spalte und die Karte wurde meterhoch. */
.kipn-hotel-case {
  padding: var(--kipn-s3) 0;
  border-top: 1px solid var(--kipn-line);
}
.kipn-hotel-case:first-child { border-top: 0; padding-top: 0; }
.kipn .kipn-hotel-case__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--kipn-primary);
}
.kipn .kipn-hotel-case__text {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--kipn-text);
}
.kipn-hotel-case__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.kipn .kipn-hotel-case__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--kipn-s2);
  margin: var(--kipn-s3) 0 0;
  padding: 0;
  list-style: none;
}
.kipn .kipn-hotel-case__facts li { margin: 0; }
.kipn-hotel-case__fk {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn-hotel-case__fv { font-size: 13px; color: var(--kipn-primary); }

/* Der empfohlene Pilot: Beschriftung und Inhalt untereinander. Die
   Werte sind hier ganze Absätze und Aufzählungen — deshalb ein
   eigener Block statt der einzeiligen Quick-Win-Zeile. */
.kipn-hotel-pilot { display: grid; gap: var(--kipn-s3); margin-top: var(--kipn-s3); }
.kipn-hotel-pilot__block {
  padding: var(--kipn-s3) var(--kipn-s4);
  background: var(--kipn-bg);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-sm);
}
.kipn-hotel-pilot__k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
  margin-bottom: 4px;
}
.kipn .kipn-hotel-pilot__block p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.kipn .kipn-hotel-pilot__block ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.kipn .kipn-hotel-pilot__block li + li { margin-top: 3px; }

/* Im Druck bleibt alles einfarbig und ohne Flächen. */
@media print {
  .kipn-hotel-pilot__block { background: none; border: 0; padding: 0; }
  .kipn-hotel-case { break-inside: avoid; }
}


/* ============================================================
   HOTELVARIANTE 5.4.1 · DREI PRIMÄRE EMPFEHLUNGEN

   Das Ergebnis konzentriert sich auf höchstens drei Entscheidungen.
   Alles Weitere steht in einem standardmäßig geschlossenen
   <details>-Bereich — nativ, damit Tastatur und Screenreader ohne
   eigenes Skript funktionieren.
   ============================================================ */

.kipn-hotel-recos { display: grid; gap: var(--kipn-s4); margin-top: var(--kipn-s3); }

.kipn-hotel-reco {
  padding: var(--kipn-s4);
  background: var(--kipn-bg);
  border: 1px solid var(--kipn-line);
  border-left: 4px solid var(--kipn-line-strong);
  border-radius: var(--kipn-radius-sm);
}
.kipn-hotel-reco--start     { border-left-color: var(--kipn-accent); }
.kipn-hotel-reco--potenzial { border-left-color: var(--kipn-primary); }
.kipn-hotel-reco--danach    { border-left-color: var(--kipn-line-strong); }

.kipn .kipn-hotel-reco__role {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
.kipn .kipn-hotel-reco__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kipn-primary);
}
.kipn .kipn-hotel-reco__text,
.kipn .kipn-hotel-reco__why,
.kipn .kipn-hotel-reco__block,
.kipn .kipn-hotel-reco__human,
.kipn .kipn-hotel-reco__test {
  margin: 0 0 var(--kipn-s2);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--kipn-text);
}
.kipn .kipn-hotel-reco__why span,
.kipn .kipn-hotel-reco__block span,
.kipn .kipn-hotel-reco__human span,
.kipn .kipn-hotel-reco__test span { font-weight: 700; }
.kipn .kipn-hotel-reco__block { color: var(--kipn-primary); }

/* Potenzial · Startfähigkeit · Einordnung nebeneinander, solange
   Platz ist — auf schmalen Geräten untereinander. */
.kipn .kipn-hotel-reco__meter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kipn-s2) var(--kipn-s4);
  margin: 0 0 var(--kipn-s3);
  padding: 0;
  list-style: none;
}
.kipn .kipn-hotel-reco__meter li { display: flex; flex-direction: column; min-width: 90px; }
.kipn .kipn-hotel-reco__meter span {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn .kipn-hotel-reco__meter strong { font-size: 14px; color: var(--kipn-primary); }

.kipn-hotel-reco__prereq { display: grid; gap: var(--kipn-s2); margin-bottom: var(--kipn-s3); }
.kipn .kipn-hotel-reco__ph {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kipn-muted);
}
.kipn .kipn-hotel-reco__pgroup ul { margin: 0; padding-left: 18px; }
.kipn .kipn-hotel-reco__pgroup li { font-size: 13px; line-height: 1.55; }

/* Weitere Fälle: geschlossen, tastaturbedienbar, ausreichend groß
   zum Antippen (44 px Mindesthöhe). */
.kipn-hotel-more { margin-top: var(--kipn-s4); }
.kipn-hotel-more__summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--kipn-s2) var(--kipn-s3);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--kipn-primary);
  background: var(--kipn-bg);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-sm);
  cursor: pointer;
}
.kipn-hotel-more__summary:focus-visible {
  outline: 2px solid var(--kipn-accent);
  outline-offset: 2px;
}
.kipn-hotel-more__body { margin-top: var(--kipn-s3); }

@media print {
  /* Im Druck ist Platz — dort wird nichts zugeklappt. */
  .kipn-hotel-more[open] .kipn-hotel-more__body,
  .kipn-hotel-more .kipn-hotel-more__body { display: block; }
  .kipn-hotel-more__summary { border: 0; background: none; padding: 0; }
  .kipn-hotel-reco { break-inside: avoid; background: none; }
}

/* ==================== 8. KAPSELUNG UND ZUSTANDSFARBEN (5.4.2) ====================

   Rein ANGEHÄNGT, wie schon die Ergänzungen aus 5.4.1: Kein
   bestehender Selektor wurde umgeschrieben; die Regeln hier präzisieren
   und härten.

   WARUM
   -----
   Reale Theme- und Elementor-Kits liefern globale Regeln wie

     button:hover { color: #fff !important; }
     button { text-transform: uppercase !important; line-height: 3 !important; }
     img { width: 100% !important; }
     input, textarea, select { max-width: none !important; }

   Bis 5.4.1 setzte der Navigator für die Auswahlmöglichkeiten der
   persönlichen KI-Einordnung beim Hover einen sehr hellen cyanfarbenen
   Hintergrund (--kipn-accent-soft), die Schriftfarbe aber NICHT
   ausdrücklich. Mit `button:hover { color:#fff !important }` aus dem
   Theme wurde die Option nahezu unlesbar (Weiß auf #ECFEFF).

   REGEL
   -----
   Für jeden Zustand — Standard, Hover, focus-visible, aktiv,
   ausgewählt (aria-pressed / aria-expanded), deaktiviert — werden
   Hintergrund, Rahmen UND Textfarbe ausdrücklich gesetzt. `!important`
   nur dort, wo ein Theme mit `!important` angreift, und nur auf der
   engsten Stelle: Textfarbe, Schriftschnitt (text-transform,
   letter-spacing, line-height) und Größe von Bedienelementen INNERHALB
   von .kipn. Außerhalb von .kipn wirkt nichts davon.

   Hover-Effekte nur, wenn das Gerät Hover wirklich kann
   (`@media (hover: hover)`): Auf Touchgeräten bleibt sonst nach dem
   Tippen ein „hängender" Hover-Zustand stehen.

   Kontrast (WCAG AA, Text ≥ 4,5:1) der kritischen Kombinationen:
     #1E293B auf #ECFEFF (KI-Option Hover/ausgewählt) ≈ 14,6:1
     #0E7490 auf #ECFEFF (Akzenttext auf Akzentfläche)  ≈ 4,9:1
     #0F172A auf #F8FAFC (Ghost-Button Hover)            ≈ 16,9:1
     #64748B auf #F8FAFC (deaktivierter Fußzeilenknopf)  ≈ 4,6:1
     #FFFFFF auf #0F172A (Primärbutton)                  ≈ 17,9:1
   ================================================================ */

/* --- Schrift und Form aller Schaltflächen im Navigator --- */
.kipn button,
.kipn .kipn-btn,
.kipn .kipn-ai-opt,
.kipn .kipn-ai-fu,
.kipn .kipn-cta__altlink,
.kipn .kipn-board-card,
.kipn .kipn-stage__skip,
.kipn .kipn-shell__close {
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  font-family: inherit !important;
}
/* Nur die Zeilenhöhe braucht !important (Kit: `line-height: 3 !important`);
   Größe, Innenabstand und Radius gewinnen über die Spezifität (0,2,0)
   und bleiben in den Media Queries (z. B. 320 px) anpassbar. */
.kipn .kipn-btn { line-height: 1.3 !important; }
.kipn .kipn-ai-opt { line-height: 1.5 !important; }
.kipn .kipn-ai-fu { line-height: 1.4 !important; }
.kipn .kipn-cta__altlink { line-height: 1.5 !important; padding: 0 !important; }
.kipn .kipn-shell__close { line-height: 1 !important; padding: 0 !important; }
.kipn .kipn-stage__skip { line-height: 1.4 !important; }
.kipn .kipn-board-card { line-height: 1.4 !important; }

/* --- Textfarben je Zustand: ausdrücklich, auch gegen `!important` --- */
.kipn .kipn-btn--primary,
.kipn .kipn-btn--primary:hover,
.kipn .kipn-btn--primary:focus-visible,
.kipn .kipn-btn--primary:active { color: var(--kipn-white) !important; background: var(--kipn-primary); border-color: var(--kipn-primary); }
.kipn .kipn-btn--submit,
.kipn .kipn-btn--submit:hover,
.kipn .kipn-btn--submit:focus-visible { color: var(--kipn-primary) !important; }

.kipn .kipn-btn--ghost { color: var(--kipn-primary) !important; background: transparent; border-color: var(--kipn-line-strong); }
.kipn .kipn-btn--ghost:focus-visible,
.kipn .kipn-btn--ghost:active { color: var(--kipn-primary) !important; background: var(--kipn-bg); border-color: var(--kipn-muted); }
.kipn .kipn-shell__foot .kipn-btn[disabled],
.kipn .kipn-shell__foot .kipn-btn[disabled]:hover { color: var(--kipn-muted) !important; background: var(--kipn-bg); border-color: var(--kipn-line-strong); }
.kipn .kipn-btn[disabled]:not(.kipn-btn--primary) { color: var(--kipn-muted) !important; }

/* KI-Auswahlmöglichkeiten: jeder Zustand mit Hintergrund, Rahmen UND Text */
.kipn .kipn-ai-opt,
.kipn .kipn-ai-fu { color: var(--kipn-text) !important; background: var(--kipn-white); border-color: var(--kipn-line-strong); }
.kipn .kipn-ai-opt:focus-visible,
.kipn .kipn-ai-fu:focus-visible { color: var(--kipn-text) !important; background: var(--kipn-accent-soft); border-color: var(--kipn-accent-ink); outline: 2px solid var(--kipn-accent-ink); outline-offset: 2px; }
.kipn .kipn-ai-opt:active,
.kipn .kipn-ai-fu:active { color: var(--kipn-text) !important; background: var(--kipn-accent-soft); border-color: var(--kipn-accent-ink); }
.kipn .kipn-ai-opt[aria-pressed="true"],
.kipn .kipn-ai-fu[aria-expanded="true"] { color: var(--kipn-primary) !important; background: var(--kipn-accent-soft); border-color: var(--kipn-accent-ink); font-weight: 600; }
/* Deaktiviert: erkennbar über zurückgenommene Kontur UND leicht reduzierte
   Deckkraft (.8 — die Schrift bleibt bei #1E293B weit über AA), nie
   nur über Farbe. */
.kipn .kipn-ai-opt[disabled],
.kipn .kipn-ai-fu[disabled] { color: var(--kipn-text) !important; background: var(--kipn-bg); border-color: var(--kipn-line); opacity: .8; }
.kipn .kipn-ai-opt[disabled][aria-pressed="true"],
.kipn .kipn-ai-fu[disabled][aria-expanded="true"] { color: var(--kipn-primary) !important; background: var(--kipn-accent-soft); border-color: var(--kipn-accent-ink); opacity: 1; }

/* Hover NUR auf Geräten mit Hover — und nie im gesperrten Zustand */
@media (hover: hover) {
  .kipn .kipn-ai-opt:not([disabled]):hover,
  .kipn .kipn-ai-fu:not([disabled]):hover { color: var(--kipn-text) !important; background: var(--kipn-accent-soft); border-color: var(--kipn-accent-ink); }
  .kipn .kipn-ai-opt[aria-pressed="true"]:not([disabled]):hover,
  .kipn .kipn-ai-fu[aria-expanded="true"]:not([disabled]):hover { color: var(--kipn-primary) !important; }
  .kipn .kipn-btn--ghost:hover { color: var(--kipn-primary) !important; background: var(--kipn-bg); border-color: var(--kipn-muted); }
  .kipn .kipn-shell__close:hover { color: var(--kipn-primary) !important; background: var(--kipn-bg); }
  .kipn .kipn-cta__altlink:hover { color: var(--kipn-white) !important; }
  .kipn .kipn-stage__skip:hover { color: var(--kipn-primary) !important; }
  .kipn .kipn-board-card:hover { color: var(--kipn-text) !important; }
  .kipn .kipn-opt label:hover { color: var(--kipn-text) !important; }
}
/* Ohne Hover-Fähigkeit (Touch): Hover-Regeln des Themes dürfen keinen
   hängenden Zustand hinterlassen — Farben bleiben die des Standards. */
@media (hover: none) {
  .kipn .kipn-ai-opt:hover,
  .kipn .kipn-ai-fu:hover { color: var(--kipn-text) !important; background: var(--kipn-white); border-color: var(--kipn-line-strong); transform: none; }
  .kipn .kipn-ai-opt[aria-pressed="true"]:hover,
  .kipn .kipn-ai-fu[aria-expanded="true"]:hover { color: var(--kipn-primary) !important; background: var(--kipn-accent-soft); border-color: var(--kipn-accent-ink); }
  .kipn .kipn-btn--ghost:hover { color: var(--kipn-primary) !important; background: transparent; border-color: var(--kipn-line-strong); }
  .kipn .kipn-btn--primary:hover { transform: none; box-shadow: none; }
  .kipn .kipn-opt label:hover { transform: none; box-shadow: none; }
}
.kipn .kipn-shell__close { color: var(--kipn-muted) !important; }
.kipn .kipn-shell__close:focus-visible { color: var(--kipn-primary) !important; }
.kipn .kipn-cta__altlink { color: rgba(248,250,252,.85) !important; }
.kipn .kipn-cta__altlink:focus-visible { color: var(--kipn-white) !important; }
.kipn .kipn-stage__skip { color: var(--kipn-muted) !important; }
.kipn .kipn-board-card { color: var(--kipn-text) !important; }
.kipn .kipn-board-card[aria-pressed="true"] { color: var(--kipn-primary) !important; }
.kipn .kipn-opt label { color: var(--kipn-text) !important; }
.kipn .kipn-opt input:checked + label { color: var(--kipn-primary) !important; }

/* --- Bilder und Eingabefelder gegen globale Größenregeln --- */
.kipn .kipn-shell__logo { width: auto !important; }
.kipn img { max-width: 100% !important; }
.kipn .kipn-form input,
.kipn .kipn-form textarea,
.kipn .kipn-form select { max-width: 100% !important; box-sizing: border-box !important; }
.kipn input[type="range"] { max-width: 100% !important; width: 100% !important; }

/* --- Element-Resets gegen Kit-Regeln für Formulare/Listen/Beschriftungen
   (Spezifität (0,2,1) mit !important nur dort, wo Kits selbst !important
   setzen: label). Typografie-Komponenten auf p/h/li/legend/label sind
   seit 5.4.2 durchgängig mit `.kipn ` vorangestellt (build/css-scope.js),
   damit `.elementor-kit-N p|h3|a` sie nicht überschreibt. --- */
.kipn .kipn-shell fieldset, .kipn .kipn-launch fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.kipn .kipn-qblock__legend { padding: 0; float: none; width: auto; }
.kipn .kipn-shell label, .kipn .kipn-launch label { color: inherit !important; font-size: inherit !important; }
.kipn .kipn-opt label { display: flex !important; font-size: 15px !important; color: var(--kipn-text) !important; }
.kipn .kipn-slider__confirm label { display: inline !important; font-size: 14px !important; color: var(--kipn-text) !important; }
.kipn .kipn-form label:not(.kipn-form__boxlabel) { display: block !important; font-size: 13px !important; color: rgba(248,250,252,.85) !important; }
.kipn .kipn-form label.kipn-form__boxlabel { font-size: inherit !important; color: inherit !important; }
.kipn .kipn-shell a:not(.kipn-btn):not(.kipn-cta__altlink), .kipn .kipn-launch a:not(.kipn-btn) { font-weight: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Versteckte Auswahl-Inputs der Antwortkarten und das Bestätigungskästchen
   des Schiebereglers: Kit-Regeln wie
   `.elementor-kit-N input:not([type=button]):not([type=submit])
   { width:100% !important; min-height:70px !important; padding:30px !important }`
   würden das 1×1-Pixel-Radio über die ganze Karte legen und das Kästchen
   aufblähen. Spezifität (0,4,1) mit !important. */
.kipn .kipn-opts .kipn-opt input[type="radio"],
.kipn .kipn-opts .kipn-opt input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 1px !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.kipn .kipn-qblock .kipn-slider__confirm input[type="checkbox"] {
  position: static !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  margin: 0 8px 0 0 !important;
  border: 0 !important;
  opacity: 1 !important;
  -webkit-appearance: checkbox;
  appearance: checkbox;
  accent-color: var(--kipn-accent);
  vertical-align: middle;
}

/* Überschriften: Schriftfamilie, Schnitt und Versalien gegen Kit-Regeln
   (`.elementor-kit-N h3 { text-transform:uppercase; font-family:… }`).
   Größe und Abstände setzen die Komponenten selbst (seit 5.4.2 mit
   ausreichender Spezifität, siehe build/css-scope.js). */
.kipn .kipn-shell :is(h1, h2, h3, h4, h5, h6),
.kipn .kipn-launch :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--kipn-font-head);
  text-transform: none;
  text-shadow: none;
}
.kipn .kipn-shell :is(p, li, legend, label),
.kipn .kipn-launch :is(p, li, label) { font-family: var(--kipn-font-body); }

/* --- Links im Navigator: keine Theme-Unterstreichung in Buttons --- */
.kipn .kipn-btn,
.kipn .kipn-btn:hover { text-decoration: none !important; }

/* ==================== 9. KONTROLLIERTER LADEFEHLER (5.4.2) ==================== */
.kipn .kipn-launch__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kipn-s3) var(--kipn-s4);
  margin-top: var(--kipn-s4);
  padding: var(--kipn-s3) var(--kipn-s4);
  border: 1px solid #FECACA;
  border-left: 3px solid var(--kipn-danger);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-danger-soft);
  color: var(--kipn-text);
}
.kipn .kipn-launch__error[hidden] { display: none !important; }
.kipn .kipn-launch__error-text { margin: 0; flex: 1 1 220px; font-size: 14.5px; line-height: 1.5; color: var(--kipn-text) !important; }
.kipn .kipn-launch__error .kipn-btn { min-height: 44px; }
.kipn .kipn-btn[aria-busy="true"] { cursor: progress; }
.kipn .kipn-btn[disabled][aria-describedby] { opacity: .6; }

/* ==================== 10. RASTER UND ABSTÄNDE (5.4.2) ====================
   Ergänzungen für ein ruhiges Bild: Gruppenabstände zwischen Ergebnis,
   KI-Bereich, CTA, Formular und Sekundäraktionen; Formularfehler als
   eigener Block; Touch-Ziele ≥ 44 px. */
.kipn .kipn-result__actions { margin-top: var(--kipn-s6); padding-top: var(--kipn-s5); border-top: 1px solid var(--kipn-line); }
.kipn .kipn-result__disclaimer { margin-top: var(--kipn-s5); }
.kipn .kipn-form__error[hidden] { display: none !important; }
.kipn .kipn-form input[aria-invalid="true"],
.kipn .kipn-form textarea[aria-invalid="true"] { border-color: #F87171 !important; box-shadow: 0 0 0 2px rgba(248,113,113,.35) !important; }
.kipn .kipn-form input[type="checkbox"][aria-invalid="true"] { outline: 2px solid #F87171 !important; outline-offset: 2px !important; }
.kipn .kipn-form input[type="checkbox"][aria-invalid="true"] + label { color: #FCA5A5 !important; }
.kipn .kipn-cta__altlink { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
.kipn .kipn-shell__close { min-width: 44px; min-height: 44px; }

/* ==================== 11. KOPFZEILE, SLIDER, FORMULAR (5.4.2) ==================== */

/* Fortschrittstext: Kurzform per Skript, Umbruch nur als letzte Stufe
   (siehe updateProgress in navigator.js). Der Umbruch bleibt auf zwei
   Zeilen begrenzt, damit die Kopfzeile flach bleibt. */
.kipn .kipn-progress__label--wrap { white-space: normal; text-overflow: clip; line-height: 1.2; }
@media (max-width: 359px) {
  /* Bei 320 px weicht das Logo weiter, damit der Fortschritt eine Zeile bekommt. */
  .kipn .kipn-shell__logo { max-width: 96px !important; max-height: 32px !important; }
  .kipn .kipn-shell__head { gap: var(--kipn-s2); }
}

/* Schieberegler: 44 px hohes Touch-Ziel. Die sichtbare Spur bleibt
   6 px, gezeichnet auf der Laufbahn; der Daumen (28 px) sitzt mittig.
   Spezifität (0,4,1) mit !important gegen Elementor-Kit-Regeln wie
   `.elementor-kit-N input:not([type=button]):not([type=submit])`
   (min-height/padding/border mit !important). */
.kipn .kipn-qblock .kipn-slider input[type="range"] {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: var(--kipn-s3) 0 var(--kipn-s1) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline-offset: -2px;
}
.kipn .kipn-qblock .kipn-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--kipn-accent) var(--kipn-fill, 30%), var(--kipn-line) var(--kipn-fill, 30%));
}
.kipn .kipn-qblock .kipn-slider input[type="range"]::-webkit-slider-thumb { margin-top: -11px; }
.kipn .kipn-qblock .kipn-slider input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--kipn-accent) var(--kipn-fill, 30%), var(--kipn-line) var(--kipn-fill, 30%));
}
.kipn .kipn-qblock .kipn-slider input[type="range"]:focus-visible { outline: 2px solid var(--kipn-accent); outline-offset: 0; border-radius: 6px; }


/* Kopfzeile im Ergebnis (5.4.2): Ist der Fortschritt ausgeblendet, blieb
   die Schließen-Schaltfläche bis 5.4.1 in der mittleren Spalte direkt
   neben dem Logo stehen. Sie gehört immer in die rechte Spalte. */
.kipn .kipn-shell__brand { grid-column: 1; }
.kipn .kipn-shell__progress { grid-column: 2; }
.kipn .kipn-shell__close { grid-column: 3; justify-self: end; }

/* ==================== 12. SCHNELLCHECK UND ERGEBNISSTRUKTUR (5.5.0) ====================

   Gemeinsame Bausteine der ersten Ergebniszusammenfassung beider
   Varianten und beider Modi: Ansatzpunkt → Gründe → was vor dem Start
   zu klären ist → nächster Schritt. Dazu Testkarte, Alltagsvergleich,
   Lösungsweg-Chip, Übernahmehinweis, „Warum wir das fragen",
   Zahleneingabe am Schieberegler und die Nebenschaltfläche.

   Alles unter .kipn, keine globalen Regeln. Lesetexte mindestens
   16 px (max(16px, 1rem)), Bedienziele mindestens 44 px.
   ================================================================ */

/* --- Nebenschaltfläche: weiß mit dunkelblauem Rand ---
   Zwei gleich dunkle Hauptaktionen nebeneinander gibt es nicht. */
.kipn .kipn-btn--secondary {
  background: var(--kipn-white);
  color: var(--kipn-primary) !important;
  border: 1.5px solid var(--kipn-primary);
}
.kipn .kipn-btn--secondary:focus-visible,
.kipn .kipn-btn--secondary:active { color: var(--kipn-primary) !important; background: var(--kipn-bg); }
@media (hover: hover) {
  .kipn .kipn-btn--secondary:hover { color: var(--kipn-primary) !important; background: var(--kipn-bg); border-color: var(--kipn-primary); }
}

/* --- Chips (Lösungsweg) --- */
.kipn .kipn-chip--weg {
  background: var(--kipn-accent-soft);
  color: var(--kipn-accent-ink);
  border: 1px solid #A5F3FC;
  font-weight: 700;
}
.kipn .kipn-quick__chips,
.kipn .kipn-outcome__chips,
.kipn .kipn-hotel-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kipn-s2);
  margin: 0 0 var(--kipn-s4);
}

/* --- Schnellcheck-Ergebnis --- */
.kipn .kipn-quick {
  padding: var(--kipn-s6) var(--kipn-s5);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-lg);
  background: var(--kipn-white);
  box-shadow: var(--kipn-shadow);
  margin-bottom: var(--kipn-s5);
}
.kipn .kipn-quick__badge {
  display: inline-block;
  margin: 0 0 var(--kipn-s3);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--kipn-primary);
  color: var(--kipn-white);
  font-size: 13px;
  font-weight: 600;
}
.kipn .kipn-quick__label,
.kipn .kipn-hotel-summary__label,
.kipn .kipn-outcome__mode {
  margin: 0 0 var(--kipn-s1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--kipn-accent-ink);
}
.kipn .kipn-outcome__mode { color: var(--kipn-muted); letter-spacing: .03em; }
.kipn .kipn-quick__title,
.kipn .kipn-hotel-summary__title {
  font-family: var(--kipn-font-head);
  font-size: clamp(max(21px, 1.3125rem), 3.4vw, max(28px, 1.75rem));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--kipn-primary);
  margin: 0 0 var(--kipn-s2);
}
.kipn .kipn-quick__title:focus-visible,
.kipn .kipn-hotel-summary__title:focus-visible { outline: none; }
.kipn .kipn-quick__scope,
.kipn .kipn-hotel-summary__lead {
  margin: 0 0 var(--kipn-s3);
  font-size: max(16px, 1rem);
  color: var(--kipn-text);
}
.kipn .kipn-quick__lw {
  margin: 0 0 var(--kipn-s4);
  font-size: max(16px, 1rem);
  line-height: 1.55;
  color: var(--kipn-muted);
}
.kipn .kipn-quick__part,
.kipn .kipn-hotel-summary__part,
.kipn .kipn-outcome__clarify {
  margin: 0 0 var(--kipn-s4);
}
.kipn .kipn-quick__h,
.kipn .kipn-hotel-summary__h,
.kipn .kipn-outcome__h {
  margin: 0 0 var(--kipn-s2);
  font-family: var(--kipn-font-head);
  font-size: max(16px, 1rem);
  font-weight: 700;
  color: var(--kipn-primary);
}
.kipn .kipn-quick__part ul,
.kipn .kipn-hotel-summary__part ul {
  margin: 0;
  padding-left: 1.2em;
}
.kipn .kipn-quick__part li,
.kipn .kipn-hotel-summary__part li,
.kipn .kipn-hotel-summary__part p,
.kipn .kipn-outcome__clarify p {
  margin: 0 0 var(--kipn-s2);
  font-size: max(16px, 1rem);
  line-height: 1.55;
}
.kipn .kipn-quick__part--test,
.kipn .kipn-hotel-summary__part--next {
  padding: var(--kipn-s4);
  border-radius: var(--kipn-radius);
  background: var(--kipn-accent-soft);
  border-left: 4px solid var(--kipn-accent);
}
.kipn .kipn-quick__time {
  margin: 0 0 var(--kipn-s4);
  padding: var(--kipn-s3) var(--kipn-s4);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  background: var(--kipn-bg);
  font-size: max(16px, 1rem);
  line-height: 1.55;
}
.kipn .kipn-quick__note {
  margin: var(--kipn-s4) 0 0;
  font-size: max(16px, 1rem);
  line-height: 1.55;
  color: var(--kipn-muted);
}

/* --- Testkarte (Definitionsliste) --- */
.kipn .kipn-testcard {
  margin-bottom: var(--kipn-s5);
}
.kipn .kipn-testcard__rows {
  display: grid;
  gap: var(--kipn-s3);
  margin: 0;
}
.kipn .kipn-testcard__rows > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.kipn .kipn-testcard__rows dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--kipn-accent-ink);
}
.kipn .kipn-testcard__rows dd {
  margin: 0;
  font-size: max(16px, 1rem);
  line-height: 1.5;
  color: var(--kipn-text);
}

/* --- Alltag: heute · unterstützt · Mensch --- */
.kipn .kipn-alltag__note {
  margin: 0 0 var(--kipn-s3);
  font-size: max(16px, 1rem);
  color: var(--kipn-muted);
}
.kipn .kipn-alltag {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kipn-s3);
}
@media (min-width: 720px) {
  .kipn .kipn-alltag { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kipn .kipn-alltag__col {
  padding: var(--kipn-s3) var(--kipn-s4);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-white);
  min-width: 0;
}
.kipn .kipn-alltag__col--mensch { border-color: var(--kipn-accent-ink); }
.kipn .kipn-alltag__h {
  margin: 0 0 var(--kipn-s2);
  font-weight: 700;
  font-size: max(16px, 1rem);
  color: var(--kipn-primary);
}
.kipn .kipn-alltag ul { margin: 0; padding-left: 1.1em; }
.kipn .kipn-alltag li { font-size: max(16px, 1rem); line-height: 1.5; margin-bottom: 4px; }

/* --- Hotel: erste Zusammenfassung, Kennzahlen mit Bezug, Abweichung --- */
.kipn .kipn-hotel-summary { margin-bottom: var(--kipn-s5); }
.kipn .kipn-hotel-summary__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kipn-s2) var(--kipn-s5);
}
.kipn .kipn-hotel-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kipn-s2);
  margin: var(--kipn-s2) 0 0;
  padding: var(--kipn-s4);
  border-radius: var(--kipn-radius);
  background: var(--kipn-bg);
  border: 1px solid var(--kipn-line);
}
@media (min-width: 720px) {
  .kipn .kipn-hotel-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kipn .kipn-hotel-facts > div { min-width: 0; }
.kipn .kipn-hotel-facts dt { font-size: 13.5px; font-weight: 700; color: var(--kipn-muted); }
.kipn .kipn-hotel-facts dd { margin: 0; font-size: max(16px, 1rem); font-weight: 600; color: var(--kipn-primary); }
.kipn .kipn-hotel-facts__note { display: block; margin-top: 2px; font-size: max(16px, 1rem); font-weight: 400; color: var(--kipn-text); }
.kipn .kipn-hotel-compare {
  margin: var(--kipn-s4) 0 0;
  padding: var(--kipn-s4);
  border-radius: var(--kipn-radius);
  border: 1px solid var(--kipn-line-strong);
}
.kipn .kipn-hotel-compare__list {
  list-style: none;
  margin: 0 0 var(--kipn-s3);
  padding: 0;
  display: grid;
  gap: 6px;
}
.kipn .kipn-hotel-compare__list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--kipn-s3);
  font-size: max(16px, 1rem);
}
.kipn .kipn-hotel-compare__list span { color: var(--kipn-muted); }
.kipn .kipn-hotel-compare__list strong { color: var(--kipn-primary); }
.kipn .kipn-hotel-sections { margin-bottom: var(--kipn-s4); }
.kipn .kipn-hotel-section { margin-bottom: var(--kipn-s3); }
.kipn .kipn-hotel-section > .kipn-details__body > .kipn-h3:first-child,
.kipn .kipn-hotel-section > .kipn-details__body > h4:first-child { margin-top: var(--kipn-s2); }
.kipn .kipn-dims__title { margin: var(--kipn-s4) 0 var(--kipn-s2); font-weight: 700; color: var(--kipn-primary); }
.kipn .kipn-dim--unknown .kipn-dim__num { font-size: 14px; font-weight: 600; color: var(--kipn-muted); }
.kipn .kipn-time__bezug { margin: 0 0 var(--kipn-s2); font-weight: 700; color: var(--kipn-primary); }
.kipn .kipn-time__pilot,
.kipn .kipn-result__recomputed {
  margin: 0 0 var(--kipn-s4);
  padding: var(--kipn-s3) var(--kipn-s4);
  border-left: 4px solid var(--kipn-accent);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-accent-soft);
  font-size: max(16px, 1rem);
  line-height: 1.55;
}

/* --- Details-Zusammenfassungen: mindestens 44 px Trefferfläche --- */
.kipn .kipn-details__summary { min-height: 44px; }

/* --- Übernahme aus dem Schnellcheck --- */
.kipn .kipn-imported {
  margin: 0 0 var(--kipn-s4);
  padding: var(--kipn-s3) var(--kipn-s4);
  border-radius: var(--kipn-radius);
  background: var(--kipn-accent-soft);
  border: 1px solid #A5F3FC;
  font-size: max(16px, 1rem);
  line-height: 1.55;
}
.kipn .kipn-imported p { margin: 0 0 4px; }
.kipn .kipn-imported__title { font-weight: 700; color: var(--kipn-primary); }
.kipn .kipn-qblock__imported {
  margin: 0 0 var(--kipn-s3);
  font-size: max(16px, 1rem);
  font-weight: 600;
  color: var(--kipn-accent-ink);
}

/* --- „Warum wir das fragen" --- */
.kipn .kipn-why { margin: 0 0 var(--kipn-s3); }
.kipn .kipn-why__summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 6px;
  font-size: max(16px, 1rem);
  font-weight: 600;
  color: var(--kipn-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.kipn .kipn-why__text {
  margin: 0 0 var(--kipn-s2);
  padding: var(--kipn-s3) var(--kipn-s4);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-bg);
  font-size: max(16px, 1rem);
  line-height: 1.55;
}

/* --- Zahleneingabe am Schieberegler --- */
.kipn .kipn-slider__direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kipn-s2) var(--kipn-s3);
  margin: var(--kipn-s3) 0 0;
}
.kipn .kipn-slider__inputlabel { font-size: max(16px, 1rem); color: var(--kipn-text); }
.kipn .kipn-slider__input {
  width: 7.5em !important;
  max-width: 100% !important;
  min-height: 44px;
  padding: 8px 10px;
  border: 1.5px solid var(--kipn-line-strong);
  border-radius: var(--kipn-radius-sm);
  background: var(--kipn-white);
  color: var(--kipn-text);
  font-size: max(16px, 1rem);
}
.kipn .kipn-slider__input[aria-invalid="true"] { border-color: var(--kipn-danger); }
.kipn .kipn-slider__inputerror {
  margin: var(--kipn-s2) 0 0;
  font-size: max(16px, 1rem);
  color: var(--kipn-danger);
}

/* --- Ergebnis: Wechsel in die Detailanalyse, KI nicht verfügbar --- */
.kipn .kipn-cta__switch { width: 100%; justify-content: center; white-space: normal; margin-bottom: var(--kipn-s2); }

/* --- Sekundäre Schaltfläche im dunklen Kontaktbereich (5.5.1) ---
   Gemeldet: „Mit der Detailanalyse genauer prüfen“ war im Normalzustand
   kaum lesbar, nur beim Hover.

   Ursache (berechnete Stile, tests/kontrast-551.test.js): Die Härtung
   `.kipn .kipn-btn--ghost { color: var(--kipn-primary) !important }`
   (Abschnitt 8) ist für Ghost-Schaltflächen auf hellen Flächen gedacht,
   griff aber auch im dunkelblauen .kipn-cta (#0F172A): Schrift #0F172A
   auf #0F172A = 1:1. Nur Hover und Fokus setzten einen hellen
   Hintergrund — auf Touchgeräten (hover: none) blieb der Knopf
   unlesbar.

   Korrektur NUR für Ghost-Schaltflächen innerhalb von .kipn-cta
   (Spezifität ab 0,3,0). Auf hellen Flächen bleibt der Ghost-Button
   dunkel. `!important` bei Farbe, Hintergrund, Rahmen und Fokusring,
   weil die Gegenregeln es selbst nutzen: die Plugin-Härtung oben,
   `button:hover { color:#fff !important }` und Elementor-Kit-Regeln
   wie `.elementor-kit-N button { background-color: … !important }`.

   Kontrast (gemessen, WCAG):
     #FFFFFF auf #0F172A  Standard, Fokus      17,85:1
     #0F172A auf #F8FAFC  Hover                17,06:1
     #0F172A auf #ECFEFF  Active               17,16:1
     #CBD5E1 auf #1D2537  Disabled             10,35:1 (Grund mit 6 % Weiß)
     Rahmen #F8FAFC / Fokusring #06B6D4 auf #0F172A  17,06:1 / 7,35:1 */
.kipn .kipn-cta .kipn-btn--ghost,
.kipn .kipn-cta .kipn-btn--ghost:hover,
.kipn .kipn-cta .kipn-btn--ghost:focus,
.kipn .kipn-cta .kipn-btn--ghost:focus-visible {
  color: var(--kipn-white) !important;
  background: transparent !important;
  border: 1.5px solid var(--kipn-bg) !important;
  box-shadow: none;
  transform: none;
  opacity: 1;
}
/* Hover nur auf Geräten, die Hover können — auf Touch bleibt der
   Standard stehen, statt eines „hängenden“ Hover-Zustands. */
@media (hover: hover) {
  .kipn .kipn-cta .kipn-btn--ghost:not([disabled]):hover {
    color: var(--kipn-primary) !important;
    background: var(--kipn-bg) !important;
    border-color: var(--kipn-bg) !important;
  }
}
.kipn .kipn-cta .kipn-btn--ghost:not([disabled]):active {
  color: var(--kipn-primary) !important;
  background: var(--kipn-accent-soft) !important;
  border-color: var(--kipn-accent) !important;
  transform: translateY(1px);
}
.kipn .kipn-cta .kipn-btn--ghost:focus-visible {
  outline: 3px solid var(--kipn-accent) !important;
  outline-offset: 3px !important;
}
/* Gesperrt: gestrichelter Rahmen, gedämpfte (weiter gut lesbare)
   Schrift, kein Ausblenden über Deckkraft. */
.kipn .kipn-cta .kipn-btn--ghost[disabled],
.kipn .kipn-cta .kipn-btn--ghost[disabled]:hover,
.kipn .kipn-cta .kipn-btn--ghost[disabled]:active {
  color: var(--kipn-line-strong) !important;
  background: rgba(248,250,252,.06) !important;
  border: 1.5px dashed rgba(203,213,225,.7) !important;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}
.kipn .kipn-ai--unavailable {
  padding: var(--kipn-s4) var(--kipn-s5);
  border: 1px solid var(--kipn-line);
  border-radius: var(--kipn-radius);
  background: var(--kipn-bg);
  margin-bottom: var(--kipn-s5);
}

/* --- Lesetexte auf schmalen Bildschirmen (5.5.0, §10) ---
   Wichtige Lesetexte mindestens 16 px — Antworten, Empfehlungen,
   Pilotdetails, Fahrplan, Annahmen, Begründungen und die Einwilligung.
   Bewusst NICHT angehoben: reine Etiketten (Eyebrows, Gruppen-
   überschriften, Fortschritt) und sekundäre Fußnoten. Auf dem Desktop
   bleibt die erprobte Dichte (alle Fragen ohne Scrollen bei 1366×768).
   Niedrige Höhe (Smartphone quer, 200 % Zoom) gilt ebenfalls als mobil. */
@media (max-width: 600px), (max-height: 500px) {
  .kipn .kipn-opt label,
  .kipn .kipn-details__summary,
  .kipn .kipn-hotel-more__summary,
  .kipn .kipn-hotel-pilot__block p,
  .kipn .kipn-hotel-pilot__block li,
  .kipn .kipn-hotel-reco__text,
  .kipn .kipn-hotel-reco__why,
  .kipn .kipn-hotel-reco__block,
  .kipn .kipn-hotel-reco__human,
  .kipn .kipn-hotel-reco__test,
  .kipn .kipn-hotel-reco__pgroup li,
  .kipn .kipn-hotel-case__title,
  .kipn .kipn-hotel-case__text,
  .kipn .kipn-roadmap__phase li,
  .kipn .kipn-roadmap__days,
  .kipn .kipn-assume li,
  .kipn .kipn-field__text,
  .kipn .kipn-scorecard__text,
  .kipn .kipn-board__hint,
  .kipn .kipn-cta__text,
  .kipn .kipn-outcome__confidence,
  .kipn .kipn-outcome__target-note,
  .kipn .kipn-slider__confirm label {
    font-size: max(16px, 1rem);
  }
  /* Gegenstück zur Schutzregel `.kipn .kipn-opt label { font-size: 15px
     !important }` (Theme-Härtung): gleich stark, später im Stylesheet. */
  .kipn .kipn-opt label { font-size: max(16px, 1rem) !important; }
  .kipn .kipn-slider__confirm label { font-size: max(16px, 1rem) !important; }
  /* Einwilligung und Optionen: rechtlich relevant, deshalb gut lesbar. */
  .kipn .kipn-form__consent,
  .kipn .kipn-form__opt { font-size: max(15px, .9375rem); }
}

/* --- Bewegung zurückhaltend --- */
@media (prefers-reduced-motion: reduce) {
  .kipn .kipn-path,
  .kipn .kipn-btn--secondary { transition: none; }
}

/* ==================== 13. SCHALTFLÄCHEN GEGEN THEME-REGELN (5.5.2) ====================

   BEFUND (Darstellungsabnahme 5.5.2, tests/darstellung-552.test.js, B)

   Die Härtung aus 5.4.2 (Abschnitt 8) sichert bei Primär-, Neben- und
   Absendeschaltfläche nur die TEXTFARBE mit !important. Elementor-Kits
   setzen aber auch den Hintergrund mit !important
   (`.elementor-kit-N button { background-color: … !important }`, beim
   Hover/Fokus zusätzlich `outline: none !important`). Gemessen unter
   Hello-Elementor- und Kit-Regeln:

     Nebenschaltfläche „Detailanalyse starten"   1,3 : 1 (dunkel auf dunkel)
     Primär Hover/Fokus (weiß auf Kit-Türkis)    2,9–3,3 : 1
     Absenden, „Schnellcheck neu starten"        1 : 1
     Fokusring                                   entfernt

   Unabhängig vom Theme, im Plugin selbst:

     „Absenden" gesperrt während des Versands    1,38 : 1 (Grau auf Türkis,
                                                  zusätzlich Deckkraft .45)
     „Weiter" gesperrt mit Hinweis               ≈ 2,4 : 1 (Deckkraft .6)
     Fokusring Türkis #06B6D4 auf Weiß           2,43 : 1 (< 3 : 1, WCAG 1.4.11)

   UMSETZUNG

   Hintergrund, Rahmen und Text jeder Plugin-Schaltfläche stehen je
   Zustand ausdrücklich fest, mit !important nur dort, wo Gegenregeln es
   selbst benutzen. Alles bleibt unter .kipn; Spezifität ≥ 0,2,0 gegen
   die Kit-Regeln (0,1,1 bzw. 0,2,1). Die gezielte Korrektur für den
   dunklen Kontaktbereich aus 5.5.1 (Abschnitt 12, nach
   .kipn-cta__switch) hat höhere Spezifität
   (.kipn .kipn-cta …) und gilt unverändert weiter.

   Fokusring: hell → #0E7490 (--kipn-accent-ink, 5,36 : 1 auf Weiß),
   dunkel → #06B6D4 (7,35 : 1 auf #0F172A). Beides Türkis — das
   Corporate Design bleibt erhalten.

   Gemessene Werte nach der Korrektur (ohne und mit Theme gleich):
     Primär            #FFFFFF auf #0F172A          17,85 : 1
     Neben             #0F172A auf #FFFFFF / #F8FAFC 17,85 / 17,06 : 1
     Ghost hell        #0F172A auf #FFFFFF / #F8FAFC 17,85 / 17,06 : 1
     Absenden          #0F172A auf #06B6D4           7,35 : 1
     Absenden gesperrt #0F172A auf #ECFEFF          17,16 : 1
     Weiter gesperrt   #64748B auf #F8FAFC           4,55 : 1
   ======================================================================= */

/* --- Fokusring: sichtbar, ≥ 3 : 1, gegen `outline: none !important` ---
   Kit-Regeln wie `.elementor-kit-N button:focus` haben 0,2,1 — die
   Klassenselektoren unten (0,3,0) gewinnen auch dann, wenn das Kit-CSS
   später geladen wird. Die Elementregeln darunter sind die Rückfallebene
   für Schaltflächen ohne eigene Klasse. */
.kipn .kipn-btn:focus-visible,
.kipn .kipn-shell__close:focus-visible,
.kipn .kipn-cta__altlink:focus-visible,
.kipn .kipn-launch__discard:focus-visible,
.kipn .kipn-stage__skip:focus-visible,
.kipn .kipn-ai-opt:focus-visible,
.kipn .kipn-ai-fu:focus-visible,
.kipn .kipn-board-card:focus-visible,
.kipn .kipn-details__summary:focus-visible,
.kipn button:focus-visible,
.kipn a:focus-visible,
.kipn summary:focus-visible,
.kipn .kipn-opt input:focus-visible + label,
.kipn .kipn-slider__confirm input:focus-visible + label,
.kipn .kipn-qblock .kipn-slider input[type="range"]:focus-visible {
  outline: 3px solid var(--kipn-accent-ink) !important;
  outline-offset: 2px !important;
}
/* Auf dunklen Flächen (Kontaktbereich) das helle Türkis. */
.kipn .kipn-cta .kipn-btn:focus-visible,
.kipn .kipn-cta .kipn-cta__altlink:focus-visible,
.kipn .kipn-cta button:focus-visible,
.kipn .kipn-cta a:focus-visible,
.kipn .kipn-cta .kipn-form__box:focus-visible + label { outline-color: var(--kipn-accent) !important; }

/* --- Primär (dunkel, weiße Schrift) --- */
.kipn .kipn-btn--primary,
.kipn .kipn-btn--primary:hover,
.kipn .kipn-btn--primary:focus,
.kipn .kipn-btn--primary:focus-visible,
.kipn .kipn-btn--primary:active {
  color: var(--kipn-white) !important;
  background: var(--kipn-primary) !important;
  border-color: var(--kipn-primary) !important;
}

/* --- Neben (weiß, dunkelblauer Rand) --- */
.kipn .kipn-btn--secondary,
.kipn .kipn-btn--secondary:hover,
.kipn .kipn-btn--secondary:focus {
  color: var(--kipn-primary) !important;
  background: var(--kipn-white) !important;
  border-color: var(--kipn-primary) !important;
}
@media (hover: hover) {
  .kipn .kipn-btn--secondary:hover { background: var(--kipn-bg) !important; }
}
.kipn .kipn-btn--secondary:focus-visible,
.kipn .kipn-btn--secondary:active { background: var(--kipn-bg) !important; }

/* --- Ghost auf hellen Flächen („Zurück", „… neu starten") --- */
.kipn .kipn-btn--ghost,
.kipn .kipn-btn--ghost:focus {
  color: var(--kipn-primary) !important;
  background: transparent !important;
  border-color: var(--kipn-line-strong) !important;
}
@media (hover: hover) {
  .kipn .kipn-btn--ghost:not([disabled]):hover { background: var(--kipn-bg) !important; border-color: var(--kipn-muted) !important; }
}
@media (hover: none) {
  .kipn .kipn-btn--ghost:hover { background: transparent !important; }
}
.kipn .kipn-btn--ghost:focus-visible,
.kipn .kipn-btn--ghost:active { background: var(--kipn-bg) !important; border-color: var(--kipn-muted) !important; }

/* --- Gesperrt in der Fußzeile („Weiter" vor Bestätigung) ---
   Der einzige Weg nach vorn bleibt lesbar: keine zusätzliche Deckkraft
   (bis 5.5.1 setzte [aria-describedby] .6 darüber). */
.kipn .kipn-shell__foot .kipn-btn[disabled],
.kipn .kipn-shell__foot .kipn-btn[disabled]:hover,
.kipn .kipn-shell__foot .kipn-btn[disabled]:focus {
  color: var(--kipn-muted) !important;
  background: var(--kipn-bg) !important;
  border-color: var(--kipn-line-strong) !important;
  opacity: 1 !important;
}

/* --- Absenden (Türkis, dunkle Schrift) --- */
.kipn .kipn-form .kipn-btn--submit,
.kipn .kipn-form .kipn-btn--submit:hover,
.kipn .kipn-form .kipn-btn--submit:focus,
.kipn .kipn-form .kipn-btn--submit:focus-visible,
.kipn .kipn-form .kipn-btn--submit:active {
  color: var(--kipn-primary) !important;
  background: var(--kipn-accent) !important;
  border-color: var(--kipn-accent) !important;
}
/* Während des Versands („Wird gesendet …") lesbar statt ausgegraut. */
.kipn .kipn-form .kipn-btn--submit[disabled],
.kipn .kipn-form .kipn-btn--submit[disabled]:hover,
.kipn .kipn-form .kipn-btn--submit[disabled]:focus {
  color: var(--kipn-primary) !important;
  background: var(--kipn-accent-soft) !important;
  border-color: var(--kipn-accent) !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Textlinks im Kontaktbereich (PDF, Vorgespräch) ---
   Auch :focus nach einem Antippen und ein hängendes :hover auf Touch-
   geräten behalten die helle Schrift (Kit: `button:focus { color: … }`). */
.kipn .kipn-cta__altlink,
.kipn .kipn-cta__altlink:hover,
.kipn .kipn-cta__altlink:focus,
.kipn .kipn-cta__altlink:focus-visible,
.kipn .kipn-cta__altlink:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.kipn .kipn-cta__altlink:hover,
.kipn .kipn-cta__altlink:focus,
.kipn .kipn-cta__altlink:active { color: var(--kipn-white) !important; }

/* --- Schließen (Symbol) --- */
.kipn .kipn-shell__close,
.kipn .kipn-shell__close:focus { background: transparent !important; border-color: transparent !important; }
.kipn .kipn-shell__close:hover,
.kipn .kipn-shell__close:focus,
.kipn .kipn-shell__close:active { color: var(--kipn-primary) !important; }
@media (hover: hover) {
  .kipn .kipn-shell__close:hover { background: var(--kipn-bg) !important; }
}
.kipn .kipn-shell__close:focus-visible,
.kipn .kipn-shell__close:active { background: var(--kipn-bg) !important; }

/* --- Einwilligung und Formularbeschriftungen lesbar (5.5.2) ---
   Gemessen ab 601 px Breite: Einwilligung 12,5 px, Zusatzoptionen 13 px,
   Hinweis 12 px bei halber Deckkraft — für rechtlich relevante Texte zu
   klein. Mobil gilt weiter die eigene Regel (max(15px, .9375rem)). */
.kipn .kipn-form label:not(.kipn-form__boxlabel) { font-size: 14px !important; }
@media (min-width: 601px) and (min-height: 501px) {
  .kipn .kipn-form__consent { font-size: 14.5px; line-height: 1.5; }
  .kipn .kipn-form__opt { font-size: 14px; line-height: 1.5; }
}
.kipn .kipn-form__optnote { font-size: 13px; color: rgba(248,250,252,.72); }

/* --- Schnellcheck: Abschnitt „Einstieg passend zu Ihrem KI-Einsatz" (5.5.2) ---
   Die eigene Angabe steht als ruhige Bezugszeile unter der Überschrift,
   der Einstieg darunter im normalen Lesetext. !important nur bei den
   Abständen (Builder-Regel `p { margin: 0 0 3em !important }`). */
.kipn .kipn-quick__einstieg .kipn-quick__given {
  margin: 0 0 var(--kipn-s2) !important;
  font-size: max(16px, 1rem);   /* Lesetexte ≥ 16 px (5.5.0, matrix-550) */
  line-height: 1.45;
  color: var(--kipn-muted);
}
.kipn .kipn-quick__einstieg .kipn-quick__text {
  margin: 0 !important;
  font-size: max(16px, 1rem);
  line-height: 1.55;
  color: var(--kipn-text);
}

/* --- Übernahmehinweis nach dem Wechsel aus dem Schnellcheck (5.5.2) ---
   Ein Absatz statt zwei Zeilen; auf niedrigen Bildschirmen ohne den
   Einleitungssatz der Etappe, damit die erste Frage im Bild beginnt
   (gemessen bei 320 × 568: vorher 416 px unter dem Inhaltsanfang).
   Schrift des Absatzes gegen Kit-Regeln wie `.elementor-kit-N p
   { font-size: 22px; line-height: 3 }` gesichert (390 px mit Kit: vorher
   857 px). */
.kipn .kipn-imported p { margin: 0 !important; font-size: inherit !important; line-height: inherit !important; }
.kipn .kipn-imported__title { font-weight: 700; color: var(--kipn-primary); }
@media (max-height: 700px) {
  .kipn .kipn-stage__context--imported .kipn-stage__lead { display: none; }
}

/* --- Marketing-Hinweis, Double-Opt-in und erneutes Senden (5.6.0) ---
   Der Link zur Datenschutzerklärung im Hinweis erbt die Hinweisfarbe
   (wie im Pflichthinweis) und bleibt durch die Unterstreichung als Link
   erkennbar. Das erneute Senden erscheint erst nach der Wartezeit; der
   Statusabsatz ist leer unsichtbar und meldet sich per aria-live. */
.kipn .kipn-form__optnote a { color: inherit; text-decoration: underline; }
.kipn .kipn-form__resend { margin: var(--kipn-s3) 0 0 !important; }
.kipn .kipn-form__resend[hidden] { display: none !important; }
.kipn .kipn-cta .kipn-form__resend-btn { width: 100%; justify-content: center; white-space: normal; min-height: 44px; }
.kipn .kipn-form__resend-status:empty { display: none; }