/* Kundenportal. Markenbezug über lokale Schriften, Monogramm und Navy.
   Ruhige Lesefläche, Listen statt Karten. Keine globalen Beraterportal-Regeln. */
:root {
  color-scheme: light;
  --kp-ink: #183047;
  --kp-muted: #56626b;
  --kp-paper: #faf9f6;
  --kp-line: #d9dcd9;
  --kp-accent: #8a7047;
  --kp-error: #942d2d;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--kp-paper); color: var(--kp-ink); font: 400 16px/1.65 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: .25em; 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: .6; cursor: wait; }
:focus-visible { outline: 3px solid #875f25; outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1 { font: 400 clamp(2rem, 5vw, 3.25rem)/1.2 'PT Serif', serif; letter-spacing: -.035em; overflow-wrap: anywhere; }
h2 { font-size: 1.15rem; line-height: 1.4; font-weight: 600; }
h3 { font-size: 1rem; line-height: 1.5; font-weight: 600; }
p + p { margin-top: .7rem; }
.kp-muted { color: var(--kp-muted); font-size: .875rem; }
.kp-skip { position: absolute; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: white; }
.kp-skip:focus { top: 8px; }
.kp-header { background: #fff; border-top: 3px solid var(--kp-ink); }
.kp-header-inner, .kp-nav, .kp-main, .kp-footer { width: min(100%, 1152px); margin-inline: auto; padding-inline: 20px; }
.kp-header-inner { min-height: 96px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-block: 16px; }
.kp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.kp-brand img { object-fit: contain; flex-shrink: 0; }
.kp-brand-name { display: block; font: 500 1.5rem/1.15 'Barlow Condensed', sans-serif; letter-spacing: .035em; }
.kp-brand-sub { display: block; font-size: .625rem; text-transform: uppercase; letter-spacing: .14em; margin-top: 3px; }
.kp-area-label { display: none; font-size: .75rem; letter-spacing: .05em; color: var(--kp-muted); border-left: 1px solid var(--kp-line); padding-left: 24px; margin-left: 8px; }
.kp-text-button { border: 0; background: none; color: var(--kp-ink); text-decoration: underline; text-underline-offset: .25em; padding: 10px 0 10px 10px; min-height: 44px; font-size: .8125rem; margin-left: auto; }
.kp-nav-wrap { background: #fff; border-bottom: 1px solid var(--kp-line); }
.kp-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.kp-nav a { display: flex; min-height: 48px; align-items: center; padding-block: 9px; font-size: .875rem; text-decoration: none; color: var(--kp-muted); border-bottom: 2px solid transparent; }
.kp-nav a[aria-current] { color: var(--kp-ink); border-bottom-color: var(--kp-accent); font-weight: 600; }
.kp-nav a:focus-visible { outline-offset: -3px; }
.kp-main { flex: 1; padding-top: 36px; padding-bottom: 64px; }
.kp-heading { padding-bottom: 32px; }
.kp-name { margin-top: 14px; color: var(--kp-muted); overflow-wrap: anywhere; }
.kp-overview { display: grid; gap: 44px; }
.kp-overview-main, .kp-pane { min-width: 0; }
.kp-section { border-top: 1px solid var(--kp-ink); margin-bottom: 40px; }
.kp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 20px 14px; }
.kp-section-head > a { font-size: .8125rem; min-height: 44px; display: inline-flex; align-items: center; }
.kp-section-title { border-top: 1px solid var(--kp-ink); padding-top: 24px; margin-bottom: 12px; }
.kp-list { padding: 0; margin: 0; list-style: none; }
.kp-row { padding: 22px 0; display: flex; gap: 18px; flex-direction: column; align-items: flex-start; border-bottom: 1px solid var(--kp-line); }
.kp-row-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kp-row-content p { color: var(--kp-muted); font-size: .875rem; margin-top: 6px; white-space: pre-line; }
.kp-row-meta { color: var(--kp-muted); font-size: .75rem; margin-top: 9px; }
.kp-row-action { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid #9ba5a9; border-radius: 3px; background: transparent; font-size: .8125rem; color: var(--kp-ink); max-width: 100%; white-space: normal; }
.kp-row-action:hover { background: #eceeea; }
.kp-status { font-size: .8125rem; color: #306044; }
.kp-empty { color: var(--kp-muted); font-size: .875rem; padding: 24px 0; border-bottom: 1px solid var(--kp-line); }
.kp-advisor { border-top: 1px solid var(--kp-line); padding-top: 24px; align-self: start; }
.kp-advisor h2 { font-size: .8125rem; font-weight: 500; margin-bottom: 24px; color: var(--kp-muted); }
.kp-advisor img { display: block; object-fit: cover; object-position: center 25%; border-radius: 2px; margin-bottom: 18px; }
.kp-advisor-name { font: 400 1.375rem/1.4 'PT Serif', serif; }
.kp-advisor > a { display: block; font-size: .875rem; min-height: 44px; padding-top: 12px; overflow-wrap: anywhere; }
.kp-advisor-note { border-top: 1px solid var(--kp-line); padding-top: 20px; margin-top: 20px; color: var(--kp-muted); font-size: .8125rem; max-width: 35ch; }
.kp-footer { padding-block: 22px max(22px, env(safe-area-inset-bottom)); border-top: 1px solid var(--kp-line); font-size: .75rem; color: var(--kp-muted); display: flex; justify-content: space-between; align-items: center; gap: 8px 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; }
.kp-alert { border-left: 3px solid var(--kp-accent); background: #efeee8; padding: 16px 18px; margin-bottom: 24px; font-size: .875rem; overflow-wrap: anywhere; }
.kp-alert.error { color: var(--kp-error); border-color: var(--kp-error); background: #f9eeee; }
.kp-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border: 1px solid var(--kp-ink); border-radius: 3px; background: var(--kp-ink); color: #fff; font-size: .875rem; font-weight: 500; max-width: 100%; white-space: normal; }
.kp-button:hover { background: #294b62; }
.kp-secondary { color: var(--kp-ink); background: transparent; }
.kp-secondary:hover { background: #eceeea; }
input, select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #929ea4; border-radius: 3px; background: white; color: var(--kp-ink); font-size: 16px; }
label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: 8px; }
.kp-filter { width: 100%; max-width: 280px; }
.kp-filter label { font-size: .75rem; }
.kp-access { max-width: 640px; border-top: 1px solid var(--kp-ink); padding-top: 24px; }
.kp-access dl { margin-block: 16px 24px; }
.kp-access dl > div { padding-block: 16px; border-bottom: 1px solid var(--kp-line); }
.kp-access dt { font-size: .75rem; color: var(--kp-muted); }
.kp-access dd { margin: 6px 0 0; overflow-wrap: anywhere; }
.kp-session-actions { margin-top: 48px; }
.kp-session-actions p { margin-block: 16px 24px; font-size: .875rem; color: var(--kp-muted); }
/* Anmeldung und Aktivierung: ein Panel, links die Marke, rechts der Vorgang.
   Eigene Klassen, nicht die kp-auth-*-Regeln der 404-Seite: Die 404-Seite ist
   eine Portalseite mit Kopfleiste, die Anmeldung ist der Eingang und trägt die
   Marke selbst. Unter 900px wird aus der linken Spalte ein schmales Band; eine
   Heldenfläche auf dem Telefon hätte hier keinen Zweck. */
.kp-anmeldung { flex: 1; display: flex; padding: 20px 16px 32px; }
.kp-panel { width: min(100%, 1000px); margin: auto; display: grid; background: #fff; border: 1px solid var(--kp-line); }
.kp-panel-marke { background: var(--kp-ink); color: #fff; padding: 22px 20px; display: flex; flex-direction: column; gap: 32px; }
.kp-brand-hell .kp-brand-sub { color: rgba(255, 255, 255, .74); }
.kp-marke-mitte, .kp-marke-person { display: none; }
.kp-marke-mitte::before { content: ''; display: block; width: 44px; height: 2px; background: var(--kp-accent); margin-bottom: 24px; }
.kp-marke-satz { font: 400 1.625rem/1.3 'PT Serif', serif; letter-spacing: -.01em; max-width: 16ch; }
.kp-marke-text { margin-top: 16px; font-size: .9375rem; color: rgba(255, 255, 255, .74); max-width: 30ch; }
.kp-marke-person { align-items: center; gap: 14px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 22px; }
/* Fester Ausschnitt auf Kopf und Schultern. object-fit allein zeigt bei einem
   Hochformat 2:3 in einem quadratischen Feld zu viel Umgebung; hier wird das
   Bild in 112x168 gerechnet und das Fenster auf das Gesicht geschoben. */
.kp-portrait { display: block; width: 56px; height: 56px; overflow: hidden; flex-shrink: 0; }
.kp-portrait img { display: block; width: 112px; height: 168px; margin: -13px 0 0 -29px; }
.kp-person-name { display: block; font-size: .9375rem; font-weight: 500; }
.kp-person-rolle { display: block; margin-top: 3px; font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .7); }
.kp-panel-form { min-width: 0; padding: 28px 20px 32px; }
.kp-panel-form h1 { font-size: clamp(1.875rem, 3.4vw, 2.5rem); }
.kp-lead { margin-top: 16px; color: var(--kp-muted); font-size: .9375rem; max-width: 44ch; }
.kp-panel-form .kp-alert { margin-top: 24px; margin-bottom: 0; }
.kp-panel-form form { margin-top: 28px; }
.kp-panel-form .kp-button { width: 100%; margin-top: 20px; }
.kp-panel-form form > .kp-muted { margin-top: 14px; }
/* Der Bestätigungscode ist kein Kennwort und wird nirgends eingegeben. Er
   steht auf beiden Geräten und in der E-Mail, damit ein Kunde erkennt, ob der
   geöffnete Link zu seiner eigenen Anmeldung gehört. */
.kp-code { margin-top: 26px; border: 1px solid var(--kp-line); border-left: 2px solid var(--kp-accent); padding: 16px 18px; }
.kp-code-label { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--kp-muted); }
.kp-code-wert { display: block; margin-top: 8px; font-size: 1.625rem; font-weight: 600; letter-spacing: .3em; line-height: 1.1; }
.kp-code-hinweis { margin-top: 12px; font-size: .8125rem; color: var(--kp-muted); }
.kp-status-zeile { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: .9375rem; }
.kp-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--kp-accent); flex-shrink: 0; animation: kp-puls 2.4s ease-in-out infinite; }
@keyframes kp-puls { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media screen and (prefers-reduced-motion: reduce) { .kp-punkt { animation: none; } }
#auth-frist { margin-top: 6px; }
.kp-warten-text { margin-top: 18px; font-size: .875rem; color: var(--kp-muted); max-width: 42ch; }
.kp-link-button { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 10px 0; border: 0; background: none; color: var(--kp-ink); font-size: .875rem; text-decoration: underline; text-underline-offset: .25em; }
#auth-fertig p:first-child { margin-top: 24px; max-width: 40ch; }
#auth-fertig .kp-muted { margin-top: 12px; }
.kp-hilfe { border-top: 1px solid var(--kp-line); margin-top: 36px; padding-top: 20px; font-size: .8125rem; color: var(--kp-muted); }
.kp-hilfe a { display: block; min-height: 44px; padding-block: 10px; }
.kp-auth-main { width: min(100%, 1000px); margin-inline: auto; padding: 48px 20px 64px; flex: 1; display: grid; align-content: start; gap: 32px; }
.kp-auth-intro > p:last-child { color: var(--kp-muted); font-size: .9375rem; max-width: 38ch; margin-top: 20px; }
.kp-auth-form { border-top: 1px solid var(--kp-ink); padding-top: 28px; min-width: 0; }
.kp-auth-form .kp-button { width: 100%; margin-top: 24px; }
.kp-auth-form form > p { margin-top: 16px; }
.kp-auth-help { border-top: 1px solid var(--kp-line); padding-top: 24px; margin-top: 32px; font-size: .8125rem; color: var(--kp-muted); }
.kp-auth-help a { display: block; min-height: 44px; padding-block: 10px; }
@media screen and (min-width: 375px) {
  .kp-nav { display: flex; gap: 20px; flex-wrap: wrap; }
}
@media screen and (min-width: 640px) {
  .kp-header-inner, .kp-nav, .kp-main, .kp-footer { padding-inline: 36px; }
  .kp-area-label { display: block; }
  .kp-nav { gap: 32px; }
  .kp-main { padding-top: 52px; }
  .kp-heading { padding-bottom: 40px; }
  .kp-row { flex-direction: row; align-items: center; }
  .kp-row-action { max-width: 170px; }
  .kp-auth-main { padding: 72px 36px 96px; }
  .kp-auth-form { max-width: 440px; }
  .kp-anmeldung { padding: 36px 28px 56px; }
  /* Auf dem Tablet bleibt es einspaltig, aber ein 700 px breites Eingabefeld
     samt Knopf über die ganze Fläche liest sich schlecht. Das Panel bleibt
     deshalb schmal, bis die zweite Spalte dazukommt. */
  .kp-panel { width: min(100%, 560px); }
  .kp-panel-marke { padding: 24px 36px; }
  .kp-panel-form { padding: 44px 40px 48px; }
}
@media screen and (min-width: 900px) {
  .kp-overview { grid-template-columns: minmax(0, 1fr) 248px; gap: 64px; }
  .kp-advisor { border-left: 1px solid var(--kp-line); border-top: 0; padding: 0 0 0 32px; }
  .kp-auth-main { grid-template-columns: 1fr 1fr; gap: 80px; padding-top: 104px; }
  .kp-auth-form { margin-top: 4px; }
  .kp-anmeldung { padding: 48px 36px 64px; }
  .kp-panel { width: min(100%, 1000px); grid-template-columns: 42fr 58fr; }
  .kp-panel-marke { padding: 44px 40px; min-height: 520px; justify-content: space-between; gap: 40px; }
  .kp-marke-mitte { display: block; }
  .kp-marke-person { display: flex; }
  .kp-panel-form { padding: 52px 52px 56px; }
}
@media print { .kp-nav-wrap, .kp-footer, .kp-header button, .kp-row-action { display: none; } }