/* ============================================================================
   KUMMERKASTEN BRAND — Marken-Fundament für den Kauf-/Auth-Funnel der Next-App
   ============================================================================
   Die statischen Marketing-Seiten (public/*.html) tragen ihr CSS inline. Die
   App-Seiten des Funnels (/login, Passwort-Wege, 404) sollen exakt so aussehen —
   ohne die 60 HTML-Seiten anzufassen. Diese Datei ist die gemeinsame Quelle.

   HARTE REGEL (Review-Kriterium, per Test abgesichert):
   Außer dem Token-Block ganz oben steht hier KEINE Regel ohne `.kk-site`-Präfix.
   Ein versehentlich mitkopierter Elementselektor (`body`, `a`, `html`) würde
   sonst global greifen und Dashboard bzw. Mitarbeiter-Seiten brechen
   (Design-System §0: zwei Welten, niemals vermischen).

   Eingebunden per <link> im Root-Layout — same-origin, die CSP erlaubt
   `style-src 'self'` bereits. Kein CDN, keine Library.

   Schrift: bewusst NICHT gesetzt. Die App lädt Inter heute über next/font, die
   Marketing-Seiten über /fonts/inter.css. Die Vereinheitlichung auf eine Quelle
   ist ein eigener, kleiner Schritt (Welle 4) — bis dahin erbt der Funnel die
   App-Schrift, statt hier ein 'Inter' zu behaupten, das im App-Kontext gar
   nicht definiert ist (Ergebnis wäre system-ui = größerer Bruch, nicht kleinerer).
   ============================================================================ */

/* ── 1. Tokens ────────────────────────────────────────────────────────────
   Werte 1:1 aus public/index.html (:root). Bewusst auf `.kk-site` statt auf
   `:root`, damit nichts mit Tailwind v4 / globals.css kollidiert und nichts
   ins Dashboard leckt. `tests/brand-consistency.test.cjs` hält beide Listen
   Wert für Wert identisch. */
/* Hinweis zu --text-tertiary (26.08.2026)
   ────────────────────────────────────────
   War #86868b. Gemessen erreichte das auf dem hellgrauen Grund (#f5f5f7) nur
   3,33:1 und auf Weiß 3,62:1 — lesbar sind nach WCAG AA erst 4,5:1. Betroffen
   waren die gesamte Navigation und die Fußzeile. #6e6e73 schafft 4,66:1 bzw.
   5,07:1 und bleibt derselbe neutrale Grauton.
   ⚠️ Der Wert steht auch in public/index.html — beide müssen gleich bleiben
   (tests/brand-consistency.test.cjs hält das fest). */
.kk-site {
  --bg: #fafafa;
  --bg-alt: #f5f5f7;
  --surface: #fff;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #6e6e73;
  --accent: #0071e3;
  --accent-hover: #0077ED;
  --border: rgba(0, 0, 0, .08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, .08);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, .12);
  --radius: 20px;
  --max-w: 1120px;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  /* Akzent als Textfarbe: #0071e3 kommt auf dem grauen Kasten (#f5f5f7)
     nur auf 4,31:1 — AA verlangt 4,5:1. Flächen und Knöpfe bleiben #0071e3. */
  --accent-text: #0064c9;
}

/* ── 2. Grundfläche ──────────────────────────────────────────────────────
   Ersetzt die `body`-Regel der Marketing-Seiten, ohne global zu werden. */
.kk-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
.kk-site > main {
  flex: 1 0 auto;
}
.kk-site a {
  color: inherit;
  text-decoration: none;
}
/* Fokus-Ring: im Funnel Marken-Blau statt des Dashboard-Indigos aus globals.css */
.kk-site :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 3. Typografie (wörtlich aus public/index.html) ──────────────────────── */
.kk-site .headline-lg { font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.kk-site .headline-md { font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.kk-site .headline-sm { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.kk-site .subline { font-size: clamp(18px, 2.2vw, 24px); color: var(--text-secondary); font-weight: 400; line-height: 1.4; max-width: 680px; }
.kk-site .body-text { font-size: 17px; color: var(--text-secondary); line-height: 1.7; }
.kk-site .label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }

/* Textlink in Akzentfarbe — im Marketing gibt es dafür keine eigene Klasse,
   dort sind Links Teil von Navigation/Footer. */
.kk-site .text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kk-site .text-link:hover { color: var(--accent-hover); text-decoration: underline; }
.kk-site .text-link:disabled { opacity: .6; cursor: not-allowed; text-decoration: none; }

/* ── 4. Layout-Bausteine ─────────────────────────────────────────────────── */
.kk-site .container { max-width: var(--max-w); margin: 0 auto; }
.kk-site .stack > * + * { margin-top: 20px; }
.kk-site .stack-sm > * + * { margin-top: 12px; }

/* ── 5. Buttons (wörtlich aus public/index.html, inkl. Glow) ─────────────── */
.kk-site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all .25s;
}
.kk-site .btn:hover { transform: translateY(-2px); }
.kk-site .btn-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 16px rgba(0, 113, 227, .3);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.kk-site .btn-primary::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  z-index: -1;
  opacity: 0;
  transition: opacity .35s, filter .35s;
  filter: blur(0);
}
.kk-site .btn-primary:hover::after { opacity: .85; filter: blur(14px); }
.kk-site .btn-secondary { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.kk-site .btn-secondary:hover { background: var(--accent); color: white; }
.kk-site .btn--block { width: 100%; }
.kk-site .btn:disabled,
.kk-site .btn[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.kk-site .btn:disabled:hover { transform: none; }
.kk-site .btn:disabled::after { opacity: 0; }

/* ── 6. Cards ────────────────────────────────────────────────────────────── */
.kk-site .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: all .3s;
}
.kk-site .card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
/* Formular-Cards dürfen beim Überfahren nicht hüpfen. */
.kk-site .card--static:hover { box-shadow: var(--shadow-sm); transform: none; }

/* ── 7. Check-Liste (wörtlich aus public/index.html) ─────────────────────── */
.kk-site .check-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.kk-site .check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--text-secondary); }
.kk-site .check-list li::before { content: "✓"; color: #22c55e; font-weight: 800; flex-shrink: 0; margin-top: 2px; }

/* ── 8. Navigation (Höhe/Padding/Glas exakt wie public/index.html) ──────────
   Ein Pixel Abweichung macht den Wechsel statische Seite → App sichtbar. */
.kk-site .nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 250, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.kk-site .nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kk-site .nav-left { display: flex; align-items: center; gap: 16px; }
.kk-site .nav-brand { font-weight: 800; font-size: 18px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.kk-site .nav-brand span { font-size: 22px; }
.kk-site .nav-center { display: flex; gap: 28px; align-items: center; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.kk-site .nav-center a:hover { color: var(--text); }
.kk-site .nav-right { display: flex; align-items: center; gap: 12px; }
.kk-site .nav-login { font-size: 14px; font-weight: 600; color: var(--text); }
.kk-site .nav-cta { padding: 8px 18px; border-radius: 999px; background: var(--accent); color: white; font-weight: 600; font-size: 14px; transition: all .2s; }
.kk-site .nav-cta:hover { transform: scale(1.02); }
/* Die Pille darf nie umbrechen — sonst wächst die 52-px-Leiste auf zwei Zeilen
   und der Wechsel von der Website wird wieder sichtbar. */
.kk-site .nav-brand,
.kk-site .nav-cta { white-space: nowrap; flex-shrink: 0; }
/* Marketing blendet die CTA unter 768px aus und zeigt stattdessen das
   Hamburger-Menü. Der Funnel hat kein Hamburger-Menü (keine mittleren Links),
   deshalb bleibt die CTA sichtbar — nur mit kürzerer Beschriftung. */
.kk-site .nav-cta-short { display: none; }
@media (max-width: 768px) {
  .kk-site .nav-center { display: none; }
}
@media (max-width: 600px) {
  .kk-site .nav-cta-full { display: none; }
  .kk-site .nav-cta-short { display: inline; }
}
/* Unter 360 px reicht der Platz neben der Wortmarke nicht mehr. Dann zählt die
   Marke — die CTA steht ohnehin auch im Formular. */
@media (max-width: 360px) {
  .kk-site .nav-cta { display: none; }
}

/* ── 9. Footer (wörtlich aus public/index.html) ──────────────────────────── */
.kk-site footer { padding: 48px 24px; border-top: 1px solid var(--border); background: var(--bg-alt); }
.kk-site .footer-inner { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.kk-site .footer-brand { font-size: 14px; color: var(--text-tertiary); }
.kk-site .footer-brand strong { color: var(--text); }
.kk-site .footer-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--text-tertiary); }
.kk-site .footer-links a:hover { color: var(--text); }

/* ── 10. Formular-Vokabular (NEU) ────────────────────────────────────────────
   Die Marketing-Welt hat keins: in allen public/*.html steht kein einziges
   <input> und keine :focus-visible-Regel. Die Stile sind deshalb hier aus den
   Marken-Tokens abgeleitet und stehen dem Marketing später zur Verfügung. */
.kk-site .field-label { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.kk-site .field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kk-site .field-head .field-label { margin-bottom: 0; }
.kk-site .field-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 17px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kk-site .field-input::placeholder { color: var(--text-tertiary); opacity: 1; }
.kk-site .field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 113, 227, .12); }
.kk-site .field-input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 4px rgba(239, 68, 68, .10); }
.kk-site .field-input:disabled { background: var(--bg-alt); color: var(--text-tertiary); cursor: not-allowed; }
.kk-site .field-hint { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.kk-site .field-note { font-size: 13px; color: var(--text-tertiary); line-height: 1.6; }
.kk-site .field-error { font-size: 13px; color: #b91c1c; line-height: 1.6; margin-top: 8px; }
.kk-site .field-ok { font-size: 13px; color: #166534; line-height: 1.6; margin-top: 8px; }

/* Feld mit Aktionsknopf (Passwort anzeigen) — Touch-Ziel 44×44 px. */
.kk-site .field-with-action { position: relative; }
.kk-site .field-with-action .field-input { padding-right: 56px; }
.kk-site .field-action {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.kk-site .field-action:hover { color: var(--text); background: var(--bg-alt); }
.kk-site .field-action:disabled { cursor: not-allowed; opacity: .5; }

/* Code-Eingabe (2FA) */
.kk-site .code-input { text-align: center; font-size: 26px; font-weight: 600; letter-spacing: .4em; }
.kk-site .code-input--recovery { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .12em; }

/* ── 11. Banner (Statusfarben-Trio nach Design-System §4.2) ──────────────── */
.kk-site .form-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid;
  font-size: 15px;
  line-height: 1.6;
}
.kk-site .form-banner--error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.kk-site .form-banner--success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.kk-site .form-banner--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.kk-site .form-banner strong { font-weight: 700; }
.kk-site .form-banner .banner-body > * + * { margin-top: 6px; }

/* Icon-Plakette vor einer Überschrift (Schloss, Schild, Warnung …) */
.kk-site .auth-badge {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
}
.kk-site .auth-badge--warn { color: var(--red); border-color: #fecaca; background: #fef2f2; }

/* ── 12. Auth-Band: Nutzenversprechen links, Formular rechts ─────────────── */
.kk-site .auth-band { padding: 96px 24px 80px; }
.kk-site .auth-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.kk-site .auth-card { width: 100%; max-width: 460px; margin-left: auto; }
.kk-site .auth-card--center { margin-left: auto; margin-right: auto; }
.kk-site .auth-head { display: flex; align-items: center; gap: 14px; }
/* Der Abstand nach oben kommt aus `.stack` — hier nur die Trennlinie. */
.kk-site .auth-alt { padding-top: 24px; border-top: 1px solid var(--border); text-align: center; }
.kk-site .auth-alt > * + * { margin-top: 12px; }
/* Variante für erklärende Nachsätze (z. B. „So geht es weiter") — Fließtext
   liest sich mittig zentriert schlecht. */
.kk-site .auth-alt--left { text-align: left; }
.kk-site .auth-steps { margin: 0; padding: 0; list-style: none; }
.kk-site .auth-steps li { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

/* Live-Checkliste unter dem Passwortfeld */
.kk-site .check-rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.kk-site .check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); }
.kk-site .check-row--ok { color: #166534; }

@media (max-width: 900px) {
  /* Formular zuerst, Nutzenversprechen darunter — die H1 bleibt im DOM davor,
     Screenreader hören sie also weiterhin zuerst. */
  .kk-site .auth-split { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  /* Einspaltig läuft das Nutzenversprechen auf dieselbe Breite wie die Karte,
     sonst steht der Text auf 768 px randlos neben einer schmalen Karte. */
  .kk-site .auth-pitch { order: 2; width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
  .kk-site .auth-form-col { order: 1; }
  .kk-site .auth-card { margin-left: auto; margin-right: auto; }
  .kk-site .auth-band { padding: 56px 20px 64px; }
}
@media (max-width: 600px) {
  .kk-site .auth-band { padding: 40px 16px 48px; }
  .kk-site .card { padding: 24px; }
  .kk-site .btn { width: 100%; }
  .kk-site .footer-inner { justify-content: flex-start; }
}
@media (max-width: 400px) {
  .kk-site .btn { font-size: 15px; padding: 14px 24px; }
  .kk-site .card { padding: 20px; }
  .kk-site .code-input { letter-spacing: .3em; font-size: 22px; }
}

/* --- feat/w4-funnel ---
   ── 13. Kauf-Funnel: Raster, Preis-Karten, Vertrauens-Zeile ─────────────────
   Die Auth-Seiten brauchten nur eine Karte neben einem Textblock (§12). /signup
   und /pricing zeigen drei Plan-Karten nebeneinander — dafür fehlte hier das
   Vokabular komplett, und genau daran hingen die beiden letzten Fremdkörper im
   Funnel (Glas-Karten, Indigo-Verläufe, schwarze Rechteck-Buttons).

   Alle Werte sind wörtlich aus `public/preise.html` übernommen, damit
   `/pricing` und `/preise` denselben Preis in derselben Größe zeigen.
   `tests/brand-consistency.test.cjs` friert sie gegen die statische Seite ein. */
.kk-site .text-center { text-align: center; }
.kk-site .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kk-site .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* Vier- und Fünf-Spalter gibt es für die Tarif-Karten: Wie viele Karten /pricing
   zeigt, hängt an der aktiven Preisstufe (SELLABLE_PLAN_ORDER) — drei heute,
   fünf in der Fünf-Tarife-Struktur. Die Seite wählt die Klasse selbst; hier darf
   deshalb nichts fehlen, sonst stünden die Karten später untereinander. */
.kk-site .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kk-site .grid-5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* Umschalter Jahres-/Monatszahlung. Erscheint nur, wenn es zu beiden Zahlweisen
   wirklich eine Stripe-Price gibt — sonst rendert die Seite ihn gar nicht.
   44 px Mindesthöhe: Touch-Ziel nach Design-System §11. */
.kk-site .kk-billing { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); }
.kk-site .kk-billing-option {
  min-height: 44px;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.kk-site .kk-billing-option.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* Band für die breiten Funnel-Seiten. Schmaler als `.auth-band`, weil hier
   direkt unter der Navi Inhalt kommt und nicht ein zentriertes Formular. */
.kk-site .funnel-band { padding: 72px 24px 88px; }
.kk-site .funnel-head { max-width: 720px; margin: 0 auto; text-align: center; }
.kk-site .funnel-head > * + * { margin-top: 16px; }
/* Abstandshalter zwischen den Blöcken einer Funnel-Seite (Karten → Erklärung
   → Vertrauens-Zeile → Add-ons). */
.kk-site .funnel-section { margin-top: 72px; }
/* Mitteilung über der Karten-Reihe (z. B. „Checkout abgebrochen"). */
.kk-site .funnel-notice { max-width: 720px; margin: 24px auto 0; }
/* Fußzeile eines Blocks: eine Zeile, mittig, klein. */
.kk-site .funnel-foot { margin-top: 24px; text-align: center; }

/* Preis-Karte (wörtlich aus public/preise.html) */
/* Werte 1:1 aus public/preise.html — die Tarif-Reihe dort wurde am 24.08.2026
   repariert (fuenf gleich breite Karten statt min-content-Spalten, fluide
   Preisschrift statt fester 56px). tests/brand-consistency.test.cjs haelt beide
   Seiten Wert fuer Wert zusammen. */
.kk-site .price-card { text-align: center; position: relative; padding: 28px 22px; min-width: 0; }
.kk-site .price-card .price { font-size: clamp(30px, 2.5vw, 48px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin: 16px 0 4px; white-space: nowrap; }
.kk-site .price-card .price-sub { font-size: 14px; color: var(--text-tertiary); line-height: 1.45; }
.kk-site .price-card.featured { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); }
.kk-site .price-card.featured .price { color: var(--accent); }
.kk-site .price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  padding: 6px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
/* Im Raster stehen die Karten unterschiedlich hoch — der Knopf soll trotzdem
   auf einer Linie sitzen. Die Merkmalsliste steht links, sonst „flattert" sie.
   `padding-top` statt Abstand über der Liste: `margin-top:auto` wird 0, sobald
   die Karte die höchste im Raster ist — der Knopf klebte dann an der Liste. */
.kk-site .grid-2 > .card,
.kk-site .grid-3 > .card,
.kk-site .grid-4 > .card,
.kk-site .grid-5 > .card { display: flex; flex-direction: column; }
.kk-site .price-card .check-list { text-align: left; margin: 28px 0 0; }
.kk-site .price-cta { margin-top: auto; padding-top: 28px; }
/* Die Badge-Pille überlappt den oberen Kartenrand — die Reihe braucht deshalb
   oben Luft, sonst schneidet der vorherige Abschnitt sie an. */
.kk-site .card-grid { margin-top: 28px; }

/* Vertrauens-Zeile (SSL, Stripe, kündbar …) */
.kk-site .trust-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.kk-site .trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 14px;
  color: var(--text-secondary);
}
.kk-site .trust-item svg { color: var(--accent); flex-shrink: 0; }

/* Deutsche Komposita sind der haeufigste Grund, warum ein Kasten auf schmalen
   Handys ueberlaeuft: „Mitarbeiterbefragung", „Verbesserungsvorschlaege",
   „Betriebsvereinbarung". `break-word` bricht sie erst, wenn es sonst nicht
   passt — normale Zeilen bleiben unveraendert. */
.kk-site h1, .kk-site h2, .kk-site h3, .kk-site h4,
.kk-site p, .kk-site li, .kk-site dd, .kk-site dt { overflow-wrap: break-word; }

/* Add-on-Karte: Name links, Preis rechts */
.kk-site .addon-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* `min-width: 0` hebt die Voreinstellung `min-width: auto` von Flex-Kindern auf.
   Ohne sie kann der Textblock nicht unter die Breite seines laengsten Wortes
   schrumpfen — und „Verbesserungsvorschlaege" schob die Karte auf einem
   320-px-Handy 9 px aus dem Bild. */
.kk-site .addon-head > div { min-width: 0; }
.kk-site .addon-price { flex-shrink: 0; text-align: right; }
.kk-site .addon-price strong { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.kk-site .addon-price span { font-size: 13px; color: var(--text-tertiary); }

/* Gewählter Plan auf Schritt 2 der Registrierung — anklickbar zum Ändern.
   Mindesthöhe 44 px, damit das Touch-Ziel auch auf dem Handy trägt. */
.kk-site .plan-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-alt);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease;
}
.kk-site .plan-summary:hover { border-color: var(--accent); }
.kk-site .plan-summary .plan-summary-change { font-size: 13px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }

/* Neutraler Hinweis-Ton — das Trio aus §11 kennt nur Fehler/Erfolg/Warnung. */
.kk-site .form-banner--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
/* Erfolgs-Plakette (Registrierung abgeschlossen) */
.kk-site .auth-badge--ok { color: #166534; border-color: #a7f3d0; background: #ecfdf5; }

@media (max-width: 1100px) {
  .kk-site .grid-4,
  .kk-site .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kk-site .grid-2,
  .kk-site .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .kk-site .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-site .funnel-band { padding: 48px 20px 64px; }
  .kk-site .funnel-section { margin-top: 56px; }
}
@media (max-width: 700px) {
  .kk-site .grid-4,
  .kk-site .grid-5 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .kk-site .funnel-band { padding: 36px 16px 48px; }
  .kk-site .price-card .price { font-size: 44px; }
}
@media (max-width: 520px) {
  .kk-site .trust-row { grid-template-columns: minmax(0, 1fr); }
}
/* --- feat/w4-funnel Ende --- */

/* ── 14. Motion ──────────────────────────────────────────────────────────────
   Bewusst reines CSS: premium.js läuft auf App-Routen nicht (es ist ein
   einmaliges IIFE und würde bei Client-Navigation kein zweites Mal laufen).
   Alle Animationen laufen mit `backwards`, das heißt: Der RUHEZUSTAND ist
   sichtbar. Fällt eine Animation aus (Energiesparmodus, alter Browser,
   reduzierte Bewegung), steht der Text trotzdem da — unsichtbarer Text ist
   strukturell unmöglich. */
.kk-site .pv-word { display: inline-block; }
.kk-site .pv-words .pv-word {
  animation: kkWordIn .7s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--pv-i, 0) * 70ms);
}
@keyframes kkWordIn {
  from { opacity: 0; filter: blur(8px); transform: translateY(.35em); }
}
.kk-site .kk-rise { animation: kkRise .7s cubic-bezier(.16, 1, .3, 1) backwards; }
.kk-site .kk-rise-2 { animation: kkRise .7s cubic-bezier(.16, 1, .3, 1) 80ms backwards; }
@keyframes kkRise {
  from { opacity: 0; transform: translateY(24px); }
}
/* Schrittwechsel (Passwort → Zwei-Faktor): kurz und sachlich, kein Wackeln. */
.kk-site .kk-step { animation: kkStepIn .38s cubic-bezier(.16, 1, .3, 1) 60ms backwards; }
@keyframes kkStepIn {
  from { opacity: 0; transform: translateY(16px); }
}

/* ── 15. Reduzierte Bewegung ─────────────────────────────────────────────────
   globals.css setzt Dauern auf 0,01 ms — bei `backwards` plus Verzögerung
   wäre ein Element in dieser Zeit noch unsichtbar. Deshalb hier hart aus. */
@media (prefers-reduced-motion: reduce) {
  .kk-site .pv-words .pv-word,
  .kk-site .kk-rise,
  .kk-site .kk-rise-2,
  .kk-site .kk-step { animation: none; }
  .kk-site .btn:hover,
  .kk-site .card:hover,
  .kk-site .nav-cta:hover { transform: none; }
}


/* Kasten-Überschriften (26.08.2026)
   ────────────────────────────────
   Standen als <h4> direkt unter einem <h2> — ein Vorleseprogramm springt dann
   von Ebene 2 auf Ebene 4 und lässt eine aus. Wer sich per Überschriften durch
   die Seite bewegt, verliert dabei die Orientierung.

   Die Auszeichnung ist jetzt <h3>, das Aussehen bleibt exakt wie vorher
   (18 px, Gewicht 700) — die Korrektur betrifft die Bedeutung, nicht das Bild. */
.kk-site .box-titel {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}