/* Kundenportal der Honorarberatung Timo Meier.
   Mandantenbereich, kein Verwaltungswerkzeug: eine ruhige Papierfläche, wenige
   klar begrenzte Blätter darauf, ein dunkles Marine-Feld als Kopf und als
   Anmeldefläche. Die Wertigkeit kommt aus Typografie, Rhythmus und Haarlinien,
   nicht aus Verläufen, Schatten oder Farbflächen.

   Drei Ebenen:
     Marine  Kopfleiste des Portals, Anmeldefläche, Beraterblatt.
     Papier  der Grund, auf dem alles liegt (kühl-stahlig wie auf der Website).
     Blatt   weiß, haarlinienbegrenzt, trägt Inhalte.

   Gold ist Auszeichnung, kein Schmuck. Es erscheint an genau einer Stelle:
   unter dem aktiven Navigationspunkt.

   Lokale Markenschriften 1:1 zur Website:
   Plus Jakarta Sans (Überschriften & Markenname),
   Inter (Lesetext & Navigation),
   Barlow Condensed (Wortmarke & Labels). */

:root {
  color-scheme: light;

  /* ── Website-Markenfarben (1:1 aus 004 Webseite/style.css) ── */
  --brand-navy: #0d2f58;
  --brand-navy-deep: #050d17;
  --brand-navy-mid: #1a4070;

  --brand-gold: #a68a5b;
  --brand-gold-light: #bfa06e;
  --brand-gold-dark: #8a7047;
  --brand-gold-pale: rgba(166, 138, 91, .12);

  --brand-paper: #edf0f6;
  --brand-sheet: #ffffff;
  --brand-sheet-still: #f4f6fa;

  --brand-text: #0d2f58;
  --brand-text-soft: #3b5270;
  --brand-muted: #56687e;
  --brand-white: #ffffff;

  --brand-border: rgba(13, 47, 88, .11);
  --brand-border-soft: rgba(13, 47, 88, .06);
  --brand-border-stark: rgba(13, 47, 88, .22);
  --brand-border-hell: rgba(255, 255, 255, .16);

  --brand-error: #9b4040;
  --brand-error-flaeche: #fbf1f1;
  --brand-erfolg: #2a7a50;

  /* ── Typografie Tokens ── */
  --f-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-label: 'Barlow Condensed', sans-serif;

  /* ── Aliasse für bestehende Portal-Komponenten ── */
  --kp-ink: var(--brand-navy);
  --kp-ink-tief: var(--brand-navy-deep);
  --kp-ink-hoch: var(--brand-navy-mid);
  --kp-paper: var(--brand-paper);
  --kp-sheet: var(--brand-sheet);
  --kp-sheet-still: var(--brand-sheet-still);
  --kp-line: var(--brand-border);
  --kp-line-stark: var(--brand-border-stark);
  --kp-line-hell: var(--brand-border-hell);
  --kp-muted: var(--brand-muted);
  --kp-text-2: var(--brand-text-soft);
  --kp-accent: var(--brand-gold-dark);
  --kp-accent-hell: var(--brand-gold-light);
  --kp-erfolg: var(--brand-erfolg);
  --kp-error: var(--brand-error);
  --kp-error-flaeche: var(--brand-error-flaeche);

  /* Maß */
  --kp-breite: 1180px;
  --kp-rand: 20px;
  --kp-radius: 4px;
  --kp-radius-klein: 3px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Platz der senkrechten Bildlaufleiste immer freihalten. Sonst rutscht der
   ganze Inhalt beim Wechsel von einer langen zu einer kurzen Seite (etwa von
   „Ihre Angaben“ zu „Dokumente“) um die Leistenbreite zur Seite. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--kp-paper);
  color: var(--kp-ink);
  font: 400 16px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
img { max-width: 100%; }

/* Fokus: sichtbar nur bei echtem Tastaturfokus. Programmatische Fokusziele
   (Überschriften, Hauptbereich) bekommen keinen Rahmen. */
:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
#kp-title:focus, #inhalt:focus, #auth-titel:focus { outline: none; }

h1, h2, h3, p { margin: 0; }
h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 1.25rem + 1.9vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
h2 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.01em;
}
h3 {
  font-family: var(--f-display);
  font-size: .9375rem;
  line-height: 1.45;
  font-weight: 600;
}
p + p { margin-top: .7rem; }

.kp-muted { color: var(--kp-muted); font-size: .875rem; }

/* Strukturlabel. Klein, gesperrt, grau. Nie Gold, nie mehr als eines je Fläche. */
.kp-label {
  font: 600 .6875rem/1.2 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--kp-muted);
}

.kp-skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--kp-sheet);
  color: var(--kp-ink);
  border: 1px solid var(--kp-line-stark);
  border-radius: var(--kp-radius-klein);
}
.kp-skip:focus { top: 8px; }

/* ------------------------------------------------------------------ *
 *  Kopfleiste des Portals: ein Marinefeld, Wortmarke und Reiter darin.
 *  Dieselbe Lockup-Zeile trägt die Anmeldefläche, damit Anmeldung und
 *  Portal erkennbar dieselbe Oberfläche sind.
 * ------------------------------------------------------------------ */
.kp-masthead { background: var(--kp-ink); color: #fff; }
.kp-masthead a { color: inherit; }
.kp-masthead :focus-visible { outline-color: var(--kp-accent-hell); }

.kp-masthead-inner, .kp-nav, .kp-main, .kp-footer {
  width: min(100%, var(--kp-breite));
  margin-inline: auto;
  padding-inline: var(--kp-rand);
}
.kp-masthead-inner {
  min-height: 72px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding-block: max(14px, env(safe-area-inset-top, 0px)) 14px;
  padding-inline: max(var(--kp-rand), env(safe-area-inset-left, 0px)) max(var(--kp-rand), env(safe-area-inset-right, 0px));
}

/* 1:1 Marken-Lockup der Website (004 Webseite) */
.kp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 0 0 auto;
}
.kp-brand-mono, .kp-brand img {
  height: 41.23px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.kp-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.kp-brand-label, .kp-brand-name {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-white);
  white-space: nowrap;
}
.kp-brand-sub {
  display: inline-block;
  font-family: var(--f-label);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand-white);
  white-space: nowrap;
}
.kp-brand-sub::before {
  content: '';
  display: block;
  height: 1px;
  margin: 4px 0 3px;
  transform: scaleY(.5);
  background: linear-gradient(90deg, #987c53, #ab8f5f 35%, #a48859 65%, transparent);
}

.kp-area-label {
  display: none;
  font: 500 .6875rem/1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, .72);
  border-left: 1px solid var(--kp-line-hell);
  padding-left: 18px;
  margin-left: 4px;
}

.kp-text-button {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .78);
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .25em;
  padding: 10px 0 10px 12px;
  min-height: 44px;
  margin-left: auto;
  transition: color .15s ease;
}
.kp-text-button:hover { color: #fff; }

/* Reiter im selben Marinefeld, durch eine Haarlinie abgesetzt. */
.kp-nav-wrap { border-top: 1px solid var(--kp-line-hell); }
.kp-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.kp-nav a {
  display: flex;
  min-height: 50px;
  align-items: center;
  padding-block: 10px;
  font-size: .875rem;
  text-decoration: none;
  color: rgba(255, 255, 255, .72);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.kp-nav a:hover { color: #fff; }
.kp-nav a[aria-current] {
  color: #fff;
  font-weight: 600;
  border-bottom-color: var(--kp-accent-hell);
}
.kp-nav a:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------------ *
 *  Mobile Bottom-Tab-Bar (Desktop: ausgeblendet)
 * ------------------------------------------------------------------ */
.kp-bottom-nav { display: none; }

/* ------------------------------------------------------------------ *
 *  Hauptbereich
 * ------------------------------------------------------------------ */
.kp-main {
  flex: 1;
  padding-top: 32px;
  padding-bottom: 72px;
}

/* Titelband: Seitenname, Haushalt und zwei belegte Kennzahlen. Nur echte
   Werte, keine Fortschrittsbalken und keine geratenen Meilensteine. */
.kp-titelband {
  display: grid;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--kp-line-stark);
}
.kp-name {
  margin-top: 10px;
  color: var(--kp-text-2);
  font-size: 1.0625rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* Schmal stehen die Kennzahlen als Paar unter dem Namen, durch eine Linie
   vom Titel getrennt. Breit rücken sie neben den Titel und tragen dann
   senkrechte Trennlinien statt der waagerechten. */
.kp-kennzahlen {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--kp-line);
}
/* Die Zellen sind gleich hoch, der Wert sitzt unten. Sonst stünden die
   Zahlen versetzt, sobald ein Label über zwei Zeilen läuft. */
.kp-kennzahlen > div { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.kp-kennzahlen dt {
  font: 600 .6875rem/1.2 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--kp-muted);
}
.kp-kennzahlen dd {
  margin: 8px 0 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--kp-ink);
  white-space: nowrap;
}

/* Übersicht: Inhalt und Berater. Der Berater ist ein eigenes Blatt in
   Marine, keine schmale Randspalte. */
.kp-overview { display: grid; gap: 28px; }
.kp-overview-main { min-width: 0; display: grid; gap: 28px; }
.kp-pane { min-width: 0; }
/* Aufgaben und Dokumente stehen ohne Beraterspalte. Ohne Grenze zöge sich
   eine Liste über 1180 px und der Filter stünde allein am rechten Rand.
   860 px entsprechen der Inhaltsspalte der Übersicht. */
.kp-pane > .kp-blatt { max-width: 860px; }
/* Der Reiter "Aufgaben" trägt zwei Blätter untereinander: Offenes und
   Erledigtes. Gleicher Abstand wie im Reiter "Ihr Zugang". */
.kp-aufgaben { display: grid; gap: 24px; max-width: 860px; }

/* ------------------------------------------------------------------ *
 *  Blatt: die einzige Inhaltsfläche des Portals
 * ------------------------------------------------------------------ */
.kp-blatt {
  background: var(--kp-sheet);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
}
/* Das stille Blatt: erledigte Aufgaben. Keine eigene Ebene, dieselbe Form,
   nur auf dem ruhigeren Papierton und ohne Aktion in der Zeile. */
.kp-blatt-still { background: var(--kp-sheet-still); }
.kp-blatt-still .kp-row-content h3 { color: var(--kp-text-2); font-weight: 500; }

.kp-blatt-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  flex-wrap: wrap;
  padding: 20px var(--kp-rand) 16px;
  border-bottom: 1px solid var(--kp-line);
}
.kp-blatt-kopf h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.kp-blatt-kopf > a {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--kp-muted);
  text-decoration: underline;
  text-underline-offset: .25em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color .15s ease;
}
.kp-blatt-kopf > a:hover { color: var(--kp-ink); }
.kp-blatt-koerper { padding: 20px var(--kp-rand); }
.kp-blatt-koerper > p { color: var(--kp-text-2); font-size: .9375rem; }
.kp-blatt-koerper > .kp-button { margin-top: 20px; }

/* Zeilen im Blatt. Die Datumszeile steht oben als Vorspann, darunter der
   Titel als schwerstes Element, dann der erklärende Satz. */
.kp-list { padding: 0; margin: 0; list-style: none; }
.kp-row {
  padding: 18px var(--kp-rand);
  display: flex;
  gap: 14px;
  flex-direction: column;
  align-items: flex-start;
  border-bottom: 1px solid var(--kp-line);
}
.kp-list > .kp-row:last-child { border-bottom: 0; }
.kp-row-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Vorspann: steht als erstes Kind der Zeile, nicht als Nachsatz. Das Datum
   ordnet die Zeile ein, bevor der Titel gelesen wird. */
.kp-row-meta {
  font: 500 .75rem/1.4 'Inter', sans-serif;
  letter-spacing: .02em;
  color: var(--kp-muted);
  margin-bottom: 7px;
}
.kp-row-content h3 { color: var(--kp-ink); }
.kp-row-content p {
  color: var(--kp-text-2);
  font-size: .875rem;
  line-height: 1.6;
  margin-top: 7px;
  white-space: pre-line;
  max-width: 62ch;
}
/* Der Hinweis "an Ihren Berater wenden" ist ein Nachsatz und trägt dieselbe
   Klasse. Er steht nie an erster Stelle. */
.kp-row-content > .kp-row-meta:not(:first-child) {
  margin: 10px 0 0;
  font-weight: 400;
}

.kp-row-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--kp-line-stark);
  border-radius: var(--kp-radius-klein);
  background: var(--kp-sheet);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--kp-ink);
  text-decoration: none;
  max-width: 100%;
  white-space: normal;
  transition: border-color .15s ease, background-color .15s ease;
}
.kp-row-action:hover { border-color: var(--kp-ink); background: var(--kp-sheet-still); }

/* Überfällig steht als Wort im Vorspann, nicht als Farbfläche. Betont wird
   allein durch Gewicht und die volle Textfarbe: Eine offene Unterlage ist
   kein Alarm, und Rot hätte im Portal keine zweite Stufe mehr über sich. */
.kp-ueberfaellig { color: var(--kp-ink); font-weight: 600; }

.kp-empty {
  color: var(--kp-muted);
  font-size: .9375rem;
  line-height: 1.6;
  padding: 30px var(--kp-rand);
  max-width: 52ch;
}

/* ------------------------------------------------------------------ *
 *  Beraterblatt
 * ------------------------------------------------------------------ */
.kp-berater {
  align-self: start;
  background: var(--kp-ink);
  color: #fff;
  border-radius: var(--kp-radius);
  padding: 22px var(--kp-rand) 20px;
}
.kp-berater :focus-visible { outline-color: var(--kp-accent-hell); }
.kp-berater-titel {
  font: 600 .6875rem/1.2 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255, 255, 255, .68);
}
.kp-berater-kopf {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.kp-berater-bild {
  width: 84px;
  height: 104px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--kp-ink-hoch);
}
.kp-berater-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}
.kp-berater-name {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.kp-berater-rolle {
  display: block;
  margin-top: 6px;
  font-size: .8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .72);
}
.kp-berater-kontakt { margin-top: 22px; border-top: 1px solid var(--kp-line-hell); }
.kp-kontakt-zeile {
  display: block;
  padding: 12px 0;
  min-height: 44px;
  border-bottom: 1px solid var(--kp-line-hell);
  text-decoration: none;
  transition: color .15s ease;
}
.kp-kontakt-zeile:hover { color: var(--kp-accent-hell); }
.kp-kontakt-label {
  display: block;
  font: 600 .625rem/1.2 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255, 255, 255, .68);
}
.kp-kontakt-wert {
  display: block;
  margin-top: 5px;
  font-size: .9375rem;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-color: rgba(255, 255, 255, .4);
}
.kp-berater-notiz {
  margin-top: 18px;
  font-size: .8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  max-width: 40ch;
}

/* ------------------------------------------------------------------ *
 *  Zugang und Sitzung
 * ------------------------------------------------------------------ */
.kp-zugang { display: grid; gap: 24px; max-width: 680px; }
.kp-daten { margin: 0; padding: 4px var(--kp-rand) 8px; }
.kp-daten > div { padding-block: 16px; border-bottom: 1px solid var(--kp-line); }
.kp-daten > div:last-child { border-bottom: 0; }
.kp-daten dt {
  font: 600 .6875rem/1.2 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--kp-muted);
}
.kp-daten dd {
  margin: 8px 0 0;
  font-size: .9375rem;
  color: var(--kp-ink);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ *
 *  Beratung & Werkzeuge (Fragebogen & Haushaltsplan)
 * ------------------------------------------------------------------ */
.kp-tools-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px var(--kp-rand);
  box-sizing: border-box;
  min-width: 0;
}
@media screen and (min-width: 680px) {
  .kp-tools-list { grid-template-columns: repeat(2, 1fr); }
}
.kp-tool-card {
  background: var(--kp-sheet);
  border: 1px solid var(--kp-line-stark);
  border-radius: var(--kp-radius);
  padding: 16px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kp-tool-card:hover {
  border-color: var(--brand-gold);
}
.kp-tool-kopf {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kp-tool-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 4px;
  min-width: 0;
}
.kp-tool-kicker {
  font-family: var(--f-label);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--kp-muted);
}
.kp-tool-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--kp-ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kp-tool-sub {
  margin: 0;
  font-size: .84rem;
  color: var(--kp-text-2);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kp-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.kp-badge-success {
  background: rgba(42, 122, 80, .12);
  color: var(--kp-erfolg);
  border: 1px solid rgba(42, 122, 80, .25);
}
.kp-badge-progress {
  background: rgba(166, 138, 91, .14);
  color: var(--kp-accent);
  border: 1px solid rgba(166, 138, 91, .3);
}
.kp-badge-neutral {
  background: rgba(13, 47, 88, .06);
  color: var(--kp-muted);
  border: 1px solid var(--kp-line);
}
.kp-tool-action {
  align-self: flex-start;
}

/* Toolbar & Status */
.kp-pane-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.kp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--kp-ink);
  text-decoration: none;
  padding: 8px 14px;
  background: var(--kp-sheet);
  border: 1px solid var(--kp-line-stark);
  border-radius: var(--kp-radius);
  min-height: 44px;
  box-sizing: border-box;
  transition: border-color .15s ease, color .15s ease;
}
.kp-back-link:hover {
  border-color: var(--brand-gold);
  color: var(--kp-ink-tief);
}
.kp-save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--kp-muted);
}
.kp-save-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kp-erfolg);
  transition: background-color .2s ease;
}
.kp-save-dot.saving {
  background: var(--brand-gold);
}
.kp-save-dot.error {
  background: var(--kp-error);
}

/* Fragebogen Formulardesign */
.kp-form-questions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.kp-q-card {
  background: var(--kp-sheet-still);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kp-q-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kp-q-title {
  font-size: .98rem;
  font-weight: 600;
  color: var(--kp-ink);
  margin: 0;
}
.kp-q-hint {
  font-size: .82rem;
  color: var(--kp-muted);
  margin: 0;
}
.kp-q-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kp-q-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  min-height: 44px;
  background: var(--kp-sheet);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius-klein);
  cursor: pointer;
  font-size: .92rem;
  user-select: none;
  box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease;
}
.kp-q-option:hover {
  border-color: var(--brand-gold);
  background: rgba(166, 138, 91, .04);
}
.kp-q-option input[type="radio"],
.kp-q-option input[type="checkbox"] {
  width: 20px;
  height: 44px;
  margin: 0;
  accent-color: var(--brand-gold);
  cursor: pointer;
  flex-shrink: 0;
}
.kp-q-textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--kp-ink);
  background: var(--kp-sheet);
  border: 1px solid var(--kp-line-stark);
  border-radius: var(--kp-radius-klein);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color .15s ease;
}
.kp-q-textarea:focus {
  outline: none;
  border-color: var(--brand-gold);
}
.kp-form-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--kp-line);
}
.kp-form-feedback {
  font-size: .88rem;
  font-weight: 500;
}
.kp-form-feedback.success { color: var(--kp-erfolg); }
.kp-form-feedback.error { color: var(--kp-error); }
.kp-form-notice {
  padding: 12px 16px;
  background: rgba(42, 122, 80, .08);
  border-left: 3px solid var(--kp-erfolg);
  font-size: .88rem;
  margin-top: 16px;
  color: var(--kp-ink);
  border-radius: 2px;
}

/* Haushaltsplan KPI Strip */
.kp-hp-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
@media screen and (max-width: 360px) {
  .kp-hp-strip { grid-template-columns: 1fr; }
}
@media screen and (min-width: 640px) {
  .kp-hp-strip { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media screen and (min-width: 960px) {
  .kp-hp-strip { grid-template-columns: repeat(6, 1fr); gap: 14px; }
}
.kp-hp-cell {
  background: var(--kp-sheet);
  border: 1px solid var(--kp-line);
  border-top: 3px solid var(--brand-gold);
  border-radius: var(--kp-radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  box-sizing: border-box;
}
.kp-hp-label {
  font-family: var(--f-label);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--kp-muted);
  margin-bottom: 4px;
}
.kp-hp-val {
  font-family: monospace, system-ui;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kp-ink);
  letter-spacing: -.01em;
}
.kp-hp-sub {
  font-size: .75rem;
  color: var(--kp-muted);
  margin-top: 2px;
}

/* Haushaltsplan Tabellen & Sektionen */
.kp-hp-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 24px;
}
.kp-hp-group-title {
  font-family: var(--f-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--kp-ink);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--brand-gold);
}
.kp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  background: var(--kp-sheet);
}
.kp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.kp-table th {
  background: var(--kp-sheet-still);
  color: var(--kp-muted);
  font-family: var(--f-label);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--kp-line);
}
.kp-table th.num { text-align: right; }
.kp-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--kp-line);
  vertical-align: middle;
}
.kp-table tr.grp-head td {
  background: rgba(13, 47, 88, .03);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--kp-ink-hoch);
  padding: 10px 12px 6px;
}
.kp-table tr.sub-total td {
  background: rgba(166, 138, 91, .06);
  font-weight: 600;
  font-size: .85rem;
  color: var(--kp-ink);
  padding: 8px 12px;
}
.kp-table tr.grand-total td {
  background: var(--brand-navy);
  color: var(--brand-white);
  font-weight: 700;
  font-size: .92rem;
  padding: 10px 12px;
}
.kp-table tr.grand-total td .kp-num-display {
  color: var(--brand-white);
}
.kp-num-input {
  width: 100%;
  min-width: 90px;
  min-height: 44px;
  padding: 7px 10px;
  font-family: monospace, system-ui;
  font-size: .88rem;
  text-align: right;
  color: var(--kp-ink);
  background: var(--kp-paper);
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius-klein);
  box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease;
}
.kp-num-input:focus {
  outline: none;
  border-color: var(--brand-gold);
  background: var(--kp-sheet);
}
.kp-note-input {
  width: 100%;
  min-width: 120px;
  min-height: 44px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: .85rem;
  color: var(--kp-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--kp-radius-klein);
  box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease;
}
.kp-note-input:focus {
  outline: none;
  border-color: var(--kp-line-stark);
  background: var(--kp-sheet);
}
.kp-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media screen and (min-width: 768px) {
  .kp-two-col { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ *
 *  Fußzeile
 * ------------------------------------------------------------------ */
.kp-footer {
  padding-block: 20px max(20px, env(safe-area-inset-bottom, 0px));
  padding-inline: max(var(--kp-rand), env(safe-area-inset-left, 0px)) max(var(--kp-rand), env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--kp-line);
  font-size: .75rem;
  color: var(--kp-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px 24px;
  flex-wrap: wrap;
}
.kp-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.kp-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--kp-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.kp-footer a:hover { color: var(--kp-ink); text-decoration: underline; }

/* ------------------------------------------------------------------ *
 *  Meldungen, Laden, Bedienelemente
 * ------------------------------------------------------------------ */
.kp-alert {
  border: 1px solid var(--kp-line-stark);
  border-radius: var(--kp-radius);
  background: var(--kp-sheet);
  padding: 15px 18px;
  margin-bottom: 24px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--kp-text-2);
  overflow-wrap: anywhere;
  /* Ein Satz über die volle Portalbreite ist keine Meldung mehr, sondern
     ein Band. Im Anmeldeblatt greift die Grenze ohnehin nicht. */
  max-width: 78ch;
}
.kp-alert.error {
  color: var(--kp-error);
  border-color: #d9b6b6;
  background: var(--kp-error-flaeche);
}
#kp-loading {
  padding-block: 8px 24px;
}
#kp-retry { margin-bottom: 24px; }

.kp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--kp-ink);
  border-radius: var(--kp-radius-klein);
  background: var(--kp-ink);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  max-width: 100%;
  white-space: normal;
  transition: background-color .15s ease, border-color .15s ease;
}
.kp-button:hover { background: var(--kp-ink-hoch); border-color: var(--kp-ink-hoch); }
.kp-secondary {
  color: var(--kp-ink);
  background: transparent;
  border-color: var(--kp-line-stark);
}
.kp-secondary:hover { background: var(--kp-sheet-still); border-color: var(--kp-ink); }

input, select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--kp-line-stark);
  border-radius: var(--kp-radius-klein);
  background: var(--kp-sheet);
  color: var(--kp-ink);
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover { border-color: #a9a396; }
input:focus, select:focus { border-color: var(--kp-ink); }
label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: 8px; }

.kp-filter { width: 100%; max-width: 280px; }
.kp-filter label {
  font: 600 .6875rem/1.2 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--kp-muted);
  margin-bottom: 8px;
}

/* ------------------------------------------------------------------ *
 *  Anmeldung, Aktivierung und Fehlerseite
 *
 *  Kein zweigeteiltes Panel und kein Formular an einer Blattkante: die
 *  ganze Seite ist ein Marinefeld, darin steht ein einzelnes helles Blatt
 *  mit dem Vorgang. Über dem Blatt dieselbe Lockup-Zeile wie im Portal,
 *  darunter der Berater. Vier Zustände teilen sich dieselbe Fläche.
 * ------------------------------------------------------------------ */
.kp-auth-page { background: var(--kp-ink-tief); color: #fff; }
.kp-anmeldung {
  flex: 1;
  min-height: 100dvh;
  display: flex;
  padding-top: max(24px, env(safe-area-inset-top, 0px));
  padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
  padding-inline: max(var(--kp-rand), env(safe-area-inset-left, 0px)) max(var(--kp-rand), env(safe-area-inset-right, 0px));
}
.kp-anmeldung-shell {
  width: min(100%, 520px);
  margin: auto;
  display: grid;
  gap: 22px;
  align-content: center;
}
.kp-anmeldung-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.kp-auth-page :focus-visible { outline-color: var(--kp-accent-hell); }

.kp-sheet {
  background: var(--kp-sheet);
  color: var(--kp-ink);
  border-radius: var(--kp-radius);
  box-shadow: 0 22px 60px rgba(6, 17, 27, .34);
}
.kp-sheet :focus-visible { outline-color: var(--kp-accent); }
.kp-sheet-kopf { padding: 28px var(--kp-rand) 0; }
.kp-sheet-kopf h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.375rem); }
.kp-lead {
  margin-top: 14px;
  color: var(--kp-text-2);
  font-size: .9375rem;
  line-height: 1.6;
  max-width: 46ch;
}
.kp-sheet-koerper { padding: 0 var(--kp-rand) 28px; }
.kp-sheet-koerper > .kp-alert { margin: 24px 0 0; }
.kp-sheet-koerper form { margin-top: 26px; }
.kp-sheet-koerper .kp-button { width: 100%; margin-top: 18px; }
.kp-sheet-koerper form > .kp-muted { margin-top: 14px; }

/* Die Eingabe des sechsstelligen Anmeldecodes: sechs Kästchen, eines je
   Ziffer (Betreiberentscheidung 06.09.2026, vorher ein einzelnes Feld). Der
   Code aus der Mail ist damit schon vor dem Tippen abgezählt, und beim
   Abtippen sieht man, an welcher Stelle man steht.
   Was das einzelne Feld von sich aus konnte, muss die Gruppe mitbringen und
   erledigt anmeldung.js: Wandern des Fokus in beide Richtungen, Einfügen des
   ganzen Codes in ein beliebiges Kästchen, und der Vorschlag der
   Mobiltastatur, der als sechsstelliger Wert in einem Feld ankommt. Für den
   Bildschirmleser ist die Gruppe über "Anmeldecode" benannt und jedes
   Kästchen sagt seine Stelle ("Ziffer 3 von 6"). */
.kp-label-code {
  display: block;
  margin-top: 22px;
  margin-bottom: 8px;
  font-size: .875rem;
  font-weight: 500;
}
.kp-code-gruppe {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.kp-code-ziffer {
  padding-inline: 0;
  box-sizing: border-box;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  min-height: 60px;
}
/* Die gefüllte Ziffer steht ruhiger als die leere Stelle daneben. */
.kp-code-ziffer:not(:placeholder-shown) { border-color: var(--kp-ink); }
.kp-code-ziffer:focus {
  border-color: var(--kp-ink);
  box-shadow: 0 0 0 3px rgba(13, 47, 88, .14);
}
@media screen and (max-width: 360px) {
  .kp-code-gruppe { gap: 5px; }
  .kp-code-ziffer { font-size: 1.25rem; }
}
.kp-code-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--kp-line);
}
.kp-link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--kp-ink);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.kp-link-button[disabled] { color: var(--kp-muted); text-decoration: none; }

/* Die Fehlerseite besteht nur aus Kopf und Hilfeblock; ohne diesen Abstand
   stiessen Vorspann und Trennlinie aneinander. */
.kp-sheet-kopf + .kp-hilfe { margin-top: 28px; }
.kp-hilfe {
  border-top: 1px solid var(--kp-line);
  padding: 16px var(--kp-rand) 12px;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--kp-muted);
}
.kp-hilfe p { padding-block: 6px; }
.kp-hilfe a {
  display: block;
  min-height: 44px;
  padding-block: 11px;
  color: var(--kp-ink);
  text-underline-offset: .25em;
}

.kp-auth-page .kp-footer {
  border-top-color: var(--kp-line-hell);
  color: rgba(255, 255, 255, .68);
  width: min(100%, 620px);
  margin-inline: auto;
  padding-inline: var(--kp-rand);
}
.kp-auth-page .kp-footer a { color: rgba(255, 255, 255, .68); }
.kp-auth-page .kp-footer a:hover { color: #fff; }

/* ------------------------------------------------------------------ *
 *  Breakpoints & Mobile Navigation
 * ------------------------------------------------------------------ */
/* Mobile Ansicht (< 640px):
   Feste Bottom-Tab-Bar am unteren Bildschirmrand, vereinfachter
   Header (Logo, Kundenportal, Abmelden) und Ausblenden der oberen
   Reiterzeile. */
@media screen and (max-width: 639px) {
  .kp-nav-wrap {
    display: none;
  }

  .kp-masthead-inner {
    min-height: 56px;
    padding-block: max(8px, env(safe-area-inset-top, 0px)) 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .kp-masthead-inner .kp-brand {
    gap: 8px;
    min-width: 0;
    flex-shrink: 0;
  }
  .kp-masthead-inner .kp-brand-lockup {
    display: none;
  }
  .kp-masthead-inner .kp-brand-mono,
  .kp-masthead-inner .kp-brand img {
    height: 36px;
    width: 36px;
  }
  .kp-masthead-inner .kp-area-label {
    display: block;
    border-left: 0;
    padding-left: 0;
    margin-left: 4px;
    margin-right: auto;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--brand-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kp-masthead-inner .kp-text-button {
    padding: 10px 0 10px 10px;
    margin-left: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Feste Bottom-Tab-Bar */
  /* minmax(0, 1fr) statt 1fr: Mit fünf Reitern ist die Summe der
     Mindestbreiten der Beschriftungen bei 320px am Anschlag. Ohne die
     Null-Untergrenze würde eine Zelle die Leiste breiter machen als den
     Bildschirm. Die Beschriftung kürzt dann lieber, als die Seite
     waagerecht scrollen zu lassen. */
  .kp-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--kp-ink);
    border-top: 1px solid var(--kp-line-hell);
    box-shadow: 0 -2px 12px rgba(5, 13, 23, .25), inset 0 1px 0 0 rgba(166, 138, 91, .25);
    padding-top: 6px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    width: 100%;
  }

  .kp-tab-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    padding: 4px 2px;
    text-decoration: none;
    color: rgba(255, 255, 255, .68);
    border-radius: var(--kp-radius-klein);
    transition: color .15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .kp-tab-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    transition: stroke .15s ease;
  }

  .kp-tab-label {
    font-family: var(--f-body);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .015em;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kp-tab-item:hover {
    color: rgba(255, 255, 255, .92);
  }
  .kp-tab-item:focus-visible {
    outline: 2px solid var(--kp-accent-hell);
    outline-offset: -2px;
  }

  .kp-tab-item[aria-current="page"] {
    color: #fff;
  }
  .kp-tab-item[aria-current="page"] .kp-tab-icon {
    color: var(--kp-accent-hell);
    stroke: var(--kp-accent-hell);
  }
  .kp-tab-item[aria-current="page"] .kp-tab-label {
    font-weight: 600;
    color: #fff;
  }
  .kp-tab-item[aria-current="page"]::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--kp-accent-hell);
    border-radius: 1px;
  }

  .kp-main {
    padding-bottom: calc(72px + 64px + env(safe-area-inset-bottom, 0px));
  }
  .kp-footer {
    padding-bottom: calc(24px + 64px + env(safe-area-inset-bottom, 0px));
  }
}

/* Fünf Reiter auf schmalen Geräten. Eine Stufe kleiner gesetzt, damit
   "Dokumente" ganz dasteht und nicht als "Dokume…" abbricht. */
@media screen and (max-width: 400px) {
  .kp-tab-item {
    padding-inline: 1px;
  }
  .kp-tab-label {
    font-size: .625rem;
    letter-spacing: 0;
  }
}

/* Standalone PWA auf Tablets bis 767px */
@media screen and (min-width: 640px) and (max-width: 767px) {
  .kp-standalone .kp-nav-wrap {
    display: none;
  }
  .kp-standalone .kp-masthead-inner {
    min-height: 56px;
    padding-block: max(8px, env(safe-area-inset-top, 0px)) 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .kp-standalone .kp-masthead-inner .kp-brand {
    gap: 8px;
    min-width: 0;
    flex-shrink: 0;
  }
  .kp-standalone .kp-masthead-inner .kp-brand-lockup {
    display: none;
  }
  .kp-standalone .kp-masthead-inner .kp-brand-mono,
  .kp-standalone .kp-masthead-inner .kp-brand img {
    height: 36px;
    width: 36px;
  }
  .kp-standalone .kp-masthead-inner .kp-area-label {
    display: block;
    border-left: 0;
    padding-left: 0;
    margin-left: 4px;
    margin-right: auto;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--brand-white);
    white-space: nowrap;
  }
  .kp-standalone .kp-masthead-inner .kp-text-button {
    padding: 10px 0 10px 10px;
    margin-left: 0;
    flex-shrink: 0;
  }
  .kp-standalone .kp-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--kp-ink);
    border-top: 1px solid var(--kp-line-hell);
    box-shadow: 0 -2px 12px rgba(5, 13, 23, .25), inset 0 1px 0 0 rgba(166, 138, 91, .25);
    padding-top: 6px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    width: 100%;
  }
  .kp-standalone .kp-tab-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    padding: 4px 2px;
    text-decoration: none;
    color: rgba(255, 255, 255, .68);
    border-radius: var(--kp-radius-klein);
    transition: color .15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .kp-standalone .kp-tab-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    transition: stroke .15s ease;
  }
  .kp-standalone .kp-tab-label {
    font-family: var(--f-body);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .015em;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
  }
  .kp-standalone .kp-tab-item:hover { color: rgba(255, 255, 255, .92); }
  .kp-standalone .kp-tab-item:focus-visible { outline: 2px solid var(--kp-accent-hell); outline-offset: -2px; }
  .kp-standalone .kp-tab-item[aria-current="page"] { color: #fff; }
  .kp-standalone .kp-tab-item[aria-current="page"] .kp-tab-icon { color: var(--kp-accent-hell); stroke: var(--kp-accent-hell); }
  .kp-standalone .kp-tab-item[aria-current="page"] .kp-tab-label { font-weight: 600; color: #fff; }
  .kp-standalone .kp-tab-item[aria-current="page"]::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--kp-accent-hell);
    border-radius: 1px;
  }
  .kp-standalone .kp-main {
    padding-bottom: calc(72px + 64px + env(safe-area-inset-bottom, 0px));
  }
  .kp-standalone .kp-footer {
    padding-bottom: calc(24px + 64px + env(safe-area-inset-bottom, 0px));
  }
}

/* Ab 480px passen im Anmeldekopf Wortmarke und Bereichsname nebeneinander */
@media screen and (min-width: 480px) {
  .kp-anmeldung-kopf .kp-area-label { display: block; }
}

@media screen and (min-width: 640px) {
  .kp-area-label { display: block; }
  :root { --kp-rand: 28px; }
  .kp-masthead-inner { min-height: 84px; }
  .kp-nav { display: flex; gap: 34px; flex-wrap: wrap; }
  .kp-blatt-kopf { gap: 8px 28px; }
  .kp-main { padding-top: 44px; }
  .kp-titelband { padding-bottom: 32px; margin-bottom: 32px; }
  /* Die Aktion sitzt oben auf Höhe des Vorspanns, nicht in der Mitte eines
     langen Absatzes. Bei kurzen Zeilen fällt beides zusammen. */
  .kp-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding-block: 20px;
  }
  .kp-row-action { max-width: 190px; }
  .kp-anmeldung { padding: 40px 32px 48px; }
  .kp-anmeldung-shell { gap: 26px; }
  .kp-sheet-kopf { padding-top: 36px; }
  .kp-sheet-koerper { padding-bottom: 32px; }
  .kp-berater { padding: 26px 28px 24px; }
  .kp-berater-bild { width: 96px; height: 118px; }
}
@media screen and (min-width: 900px) {
  .kp-titelband { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 48px; }
  .kp-kennzahlen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 36px;
    padding-top: 0;
    border-top: 0;
  }
  .kp-kennzahlen > div { padding-left: 20px; border-left: 1px solid var(--kp-line-stark); }
  .kp-overview { grid-template-columns: minmax(0, 1fr) 304px; gap: 32px; align-items: start; }
  /* In der schmalen Spalte steht das Porträt über dem Namen. Nebeneinander
     bliebe für "Honorar-Finanzanlagenberater" ein Streifen von 130 px. */
  .kp-berater-kopf { flex-direction: column; align-items: flex-start; gap: 18px; }
  .kp-berater-bild { width: 104px; height: 128px; }
  .kp-anmeldung { padding: 56px 36px; }
  .kp-anmeldung-shell { width: min(100%, 560px); gap: 30px; }
  .kp-sheet-kopf, .kp-sheet-koerper, .kp-hilfe { padding-inline: 40px; }
  .kp-sheet-kopf { padding-top: 44px; }
  .kp-sheet-kopf h1 { font-size: 2.5rem; }
  .kp-lead { max-width: 54ch; }
  .kp-auth-page .kp-footer { width: min(100%, 660px); }
}
@media screen and (min-width: 1100px) {
  :root { --kp-rand: 32px; }
  .kp-main { padding-top: 56px; padding-bottom: 88px; }
  .kp-titelband { padding-bottom: 36px; margin-bottom: 36px; }
  .kp-overview { grid-template-columns: minmax(0, 1fr) 336px; gap: 40px; }
  .kp-overview-main { gap: 32px; }
  .kp-blatt-kopf { padding-top: 24px; padding-bottom: 18px; }
  .kp-row { padding-block: 22px; }
}

/* Beratungsstand und Aktivität: flache, belegte Zeilen statt Kennzahlenkarten. */
.kp-status-list, .kp-activity-list { border-top: 1px solid var(--kp-line); }
.kp-status-row {
  display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr);
  gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--kp-line);
}
.kp-status-row span { color: var(--kp-muted); font-size: .78rem; }
.kp-status-row strong { font-size: .84rem; font-weight: 650; }
.kp-activity-list { list-style: none; margin: 0; padding: 0; }
.kp-activity-list li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--kp-line);
}
.kp-activity-list time { color: var(--kp-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.kp-activity-list div { display: flex; flex-direction: column; gap: 3px; }
.kp-activity-list strong { font-size: .82rem; font-weight: 650; }
.kp-activity-list span { color: var(--kp-muted); font-size: .76rem; }

/* Upload nur an einer konkreten Anforderung. Das Dateifeld bleibt nativ und
   damit auch mit Tastatur und Assistenztechnik zuverlässig bedienbar. */
.kp-upload-row { align-items: flex-start; }
.kp-upload-form { display: flex; align-items: flex-end; gap: 12px; min-width: min(100%, 310px); }
.kp-file-label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kp-file-label > span { color: var(--kp-muted); font-size: .7rem; }
.kp-file-label input {
  width: 100%; min-height: 44px; color: var(--kp-ink); font: inherit; font-size: .76rem;
  border: 1px solid var(--kp-line-stark); padding: 7px; background: var(--kp-sheet);
}
.kp-file-label input::file-selector-button {
  min-height: 30px; margin-right: 9px; border: 0; background: var(--brand-gold-pale);
  color: var(--kp-ink); font: inherit; font-weight: 650; cursor: pointer;
}

/* Geprüfte Kontaktdaten. E-Mail und Identitätsdaten stehen bewusst nicht in
   diesem Formular. */
.kp-profile-form { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: 16px 20px; }
.kp-profile-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kp-profile-form label > span { color: var(--kp-muted); font-size: .72rem; font-weight: 650; }
.kp-profile-form input {
  width: 100%; min-height: 44px; border: 1px solid var(--kp-line-stark);
  background: var(--kp-sheet); color: var(--kp-ink); padding: 10px 12px; font: inherit; font-size: 1rem;
}
.kp-profile-form input:focus { outline: 2px solid var(--kp-accent); outline-offset: 2px; }
.kp-profile-wide { grid-column: 1 / -1; }
.kp-profile-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kp-inline-status {
  color: var(--kp-muted); border: 1px solid var(--kp-line-stark); padding: 4px 8px;
  font-family: var(--f-label); font-size: .68rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase;
}
.kp-inline-status.pending { color: #805600; border-color: #c9a35a; }
.kp-inline-status.success { color: var(--kp-erfolg); border-color: #6fa485; }

/* ── Termin-Karte & Vorschläge ── */
.kp-termin-card {
  padding: 16px 0 6px;
}
.kp-termin-datum {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--kp-ink);
  line-height: 1.3;
}
.kp-termin-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: .84rem;
}
.kp-termin-zeile {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.kp-termin-label {
  color: var(--kp-muted);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  min-width: 72px;
  flex-shrink: 0;
}
.kp-termin-wert {
  color: var(--kp-ink);
  word-break: break-word;
}
.kp-termin-notiz {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--kp-sheet-still);
  border-left: 3px solid var(--kp-accent);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--brand-text-soft);
}
.kp-termin-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.kp-btn-danger {
  background: var(--brand-error);
  color: #fff;
  border: 1px solid var(--brand-error);
}
.kp-btn-danger:hover {
  opacity: .9;
}
.kp-button.kp-secondary {
  background: var(--kp-sheet);
  border: 1px solid var(--kp-line-stark);
  color: var(--kp-ink);
}
.kp-button.kp-secondary:hover {
  background: var(--kp-sheet-still);
}

/* ── Badges & Status ── */
.kp-badge-kategorie {
  display: inline-block;
  font-family: var(--f-label);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--brand-gold-pale);
  color: var(--kp-ink);
  vertical-align: middle;
}
.kp-badge-unread {
  display: inline-block;
  background: var(--kp-accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.kp-head-action {
  font-size: .78rem;
  padding: 8px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
}
.kp-dialog-kicker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* ── Thread-Liste in Übersicht ── */
.kp-thread-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--kp-line);
}
.kp-thread-row:last-child {
  border-bottom: none;
}
.kp-thread-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.kp-thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kp-thread-title {
  font-family: var(--f-display);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--kp-ink);
  margin: 0;
}
.kp-thread-preview {
  font-size: .8rem;
  color: var(--kp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50ch;
}
.kp-thread-time {
  font-size: .72rem;
  color: var(--kp-muted);
}
.kp-task-inquiry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--kp-text-2);
  background: transparent;
  border: 1px dashed var(--kp-line-stark);
  padding: 8px 14px;
  border-radius: 3px;
  cursor: pointer;
  min-height: 44px;
  margin-top: 8px;
  text-decoration: none;
}
.kp-task-inquiry-btn:hover {
  border-color: var(--kp-accent);
  color: var(--kp-ink);
  background: var(--brand-gold-pale);
}

/* ── Dialog & Modal Komponente (HTML5 dialog) ── */
dialog.kp-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  margin: auto;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
dialog.kp-dialog::backdrop {
  background: rgba(5, 13, 23, .65);
  backdrop-filter: blur(4px);
}
.kp-dialog-box {
  background: var(--kp-sheet);
  border: 1px solid var(--kp-line-stark);
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(13, 47, 88, .2);
  width: min(94vw, 620px);
  max-height: min(90vh, 740px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kp-dialog-kopf {
  padding: 18px 24px;
  border-bottom: 1px solid var(--kp-line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  background: var(--kp-sheet);
  flex-shrink: 0;
}
.kp-dialog-titel {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--kp-ink);
  line-height: 1.3;
}
.kp-dialog-close {
  border: 0;
  background: transparent;
  color: var(--kp-muted);
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}
.kp-dialog-close:hover {
  color: var(--kp-ink);
  background: var(--kp-sheet-still);
}
.kp-dialog-koerper {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.kp-dialog-fuss {
  padding: 16px 24px;
  border-top: 1px solid var(--kp-line);
  background: var(--kp-sheet-still);
  flex-shrink: 0;
}
.kp-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kp-dialog-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kp-dialog-form label > span {
  color: var(--kp-muted);
  font-size: .75rem;
  font-weight: 650;
}
.kp-dialog-form input,
.kp-dialog-form select,
.kp-dialog-form textarea {
  width: 100%;
  border: 1px solid var(--kp-line-stark);
  background: var(--kp-sheet);
  color: var(--kp-ink);
  padding: 10px 12px;
  font: inherit;
  font-size: .92rem;
  border-radius: 3px;
}
.kp-dialog-form input:focus,
.kp-dialog-form select:focus,
.kp-dialog-form textarea:focus,
.kp-reply-form textarea:focus {
  outline: 2px solid var(--kp-accent);
  outline-offset: 1px;
}
.kp-dialog-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ── Nachrichten-Verlauf (Stream) ── */
.kp-message-stream {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 160px;
}
.kp-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
}
.kp-msg-client {
  align-self: flex-end;
  align-items: flex-end;
}
.kp-msg-client .kp-msg-bubble {
  background: var(--brand-navy-mid);
  color: #fff;
  border-radius: 12px 12px 2px 12px;
}
.kp-msg-client .kp-msg-meta {
  color: var(--kp-muted);
  font-size: .72rem;
  margin-bottom: 4px;
  text-align: right;
}
.kp-msg-berater {
  align-self: flex-start;
  align-items: flex-start;
}
.kp-msg-berater .kp-msg-bubble {
  background: var(--kp-sheet-still);
  color: var(--kp-ink);
  border: 1px solid var(--kp-line);
  border-radius: 12px 12px 12px 2px;
}
.kp-msg-berater .kp-msg-meta {
  color: var(--kp-muted);
  font-size: .72rem;
  margin-bottom: 4px;
}
.kp-msg-bubble {
  padding: 12px 16px;
  font-size: .88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.kp-reply-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kp-reply-form textarea {
  width: 100%;
  border: 1px solid var(--kp-line-stark);
  border-radius: 3px;
  padding: 10px 12px;
  font: inherit;
  font-size: .88rem;
  background: var(--kp-sheet);
  resize: vertical;
  min-height: 72px;
}
.kp-reply-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.kp-char-count {
  font-size: .75rem;
  color: var(--kp-muted);
}
.kp-closed-note {
  padding: 12px 16px;
  background: var(--brand-gold-pale);
  border: 1px solid var(--brand-gold-light);
  font-size: .82rem;
  color: var(--kp-ink);
  border-radius: 4px;
  margin-bottom: 10px;
}
.kp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media screen and (max-width: 640px) {
  .kp-status-row, .kp-activity-list li { grid-template-columns: 1fr; gap: 4px; }
  .kp-upload-row, .kp-upload-form { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .kp-upload-form .kp-row-action { width: 100%; justify-content: center; }
  .kp-profile-form { grid-template-columns: 1fr; }
  .kp-profile-wide, .kp-profile-actions { grid-column: auto; }
  .kp-msg { max-width: 95%; }
  .kp-dialog-box { width: 98vw; max-height: 94vh; }
  .kp-dialog-kopf, .kp-dialog-koerper, .kp-dialog-fuss { padding-inline: 16px; }
  .kp-termin-actions { flex-direction: column; align-items: stretch; }
  .kp-termin-actions .kp-row-action, .kp-termin-actions .kp-button { width: 100%; text-align: center; }
}

@media print {
  .kp-nav-wrap, .kp-footer, .kp-masthead button, .kp-row-action, .kp-berater { display: none; }
  .kp-masthead { background: none; color: #000; }
  .kp-blatt { border-color: #999; }
}