/* =====================================================================
   BedarfsKompass — „Kompass · Editorial" (v2)
   Source Serif 4 (display) + Inter Tight (UI). Warm off-white, deep indigo,
   amber accents, sage trust. Wide whitespace, editorial composition.
   ===================================================================== */

:root {
  /* Marken-Variablen (vom Vermittler überschreibbar) — sind so default als v2 */
  --brand-primary: #1B2A4E;
  --brand-primary-dark: #0F1A35;
  --brand-primary-hover: #2C3E63;
  --brand-primary-soft: #EAEDF5;
  --brand-primary-tint: #F2EDE4;
  --brand-accent: #C68F4D;
  --brand-accent-dark: #A87B3F;
  --brand-accent-soft: #E8D9C3;

  /* v2-Palette */
  --v2-bg: #FAF7F2;
  --v2-bg-alt: #F2EDE4;
  --v2-ink: #1B2A4E;
  --v2-ink-2: #2C3E63;
  --v2-ink-soft: #5C6B85;
  --v2-ink-mute: #8C95A8;
  --v2-amber: #C68F4D;
  --v2-amber-soft: #E8D9C3;
  --v2-sage: #5A7A6E;
  --v2-sage-soft: #DCE6E0;
  /* Schriftfarbe auf sage-soft. Kam mit dem Beratungsplan-Design (August 2026)
     dazu — der einzige Ton, den die Palette dafuer noch nicht hatte. */
  --v2-sage-ink: #34534A;
  --v2-rust: #B45A3C;
  --v2-rust-soft: #F0DED5;
  --v2-line: rgba(27,42,78,.10);
  --v2-line-soft: rgba(27,42,78,.06);

  /* Semantik */
  --color-bg: var(--v2-bg);
  --color-bg-panel: var(--v2-bg-alt);
  --color-surface: #ffffff;
  --color-text: var(--v2-ink);
  --color-text-soft: var(--v2-ink-soft);
  --color-text-mute: var(--v2-ink-mute);
  --color-border: var(--v2-line);
  --color-border-strong: rgba(27,42,78,.18);
  --color-success: var(--v2-sage);
  --color-warning: var(--v2-amber);
  --color-danger:  var(--v2-rust);
  --color-info:    var(--v2-ink);

  /* Radien */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* Schatten */
  --shadow-sm: 0 1px 0 rgba(27,42,78,.04), 0 1px 2px rgba(27,42,78,.04);
  --shadow-md: 0 4px 24px -6px rgba(27,42,78,.10);
  --shadow-lg: 0 24px 60px -20px rgba(27,42,78,.18);

  /* Schriften */
  --font-serif: 'Source Serif 4','Source Serif Pro',Georgia,serif;
  --font-sans:  'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
  --container: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--color-text); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-accent); }
.text-link { border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* === Typography === */
h1, h2, h3, h4 { color: var(--color-text); margin: 0 0 .5em; }
h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.6rem,5.5vw,4.6rem); line-height: 1.04; letter-spacing: -.028em; }
h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem,3vw,2.6rem); line-height: 1.12; letter-spacing: -.022em; }
h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; line-height: 1.25; letter-spacing: -.012em; }
h4 { font-family: var(--font-sans); font-weight: 600; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-soft); }
p  { margin: 0 0 1em; color: var(--v2-ink-2); max-width: 62ch; }
.lead { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.15rem,1.6vw,1.45rem); line-height: 1.5; color: var(--v2-ink-2); letter-spacing: -.005em; font-style: italic; }
.eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-accent); display: inline-flex; gap: 10px; align-items: center; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.display { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.025em; line-height: 1.05; }
.italic, em { font-style: italic; }
.text-center { text-align: center; }
.text-mute { color: var(--color-text-mute); }
.text-soft { color: var(--color-text-soft); }
.text-small { font-size: .86rem; }
.micro { font-size: .74rem; color: var(--color-text-mute); letter-spacing: .04em; }

/* === Layout === */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section-lg { padding: 128px 0; }
.section-alt { background: var(--v2-bg-alt); }
.rule { height: 1px; background: var(--v2-line); border: 0; margin: 0; }
.rule-amber { height: 1px; background: var(--brand-accent); border: 0; width: 48px; margin: 0 0 18px; }
.divider { height: 1px; background: var(--v2-line); margin: 24px 0; }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 500; font-size: .95rem;
  letter-spacing: -.005em; cursor: pointer;
  border: 1px solid transparent;
  transition: all .25s var(--ease);
  text-decoration: none; background: transparent; color: inherit;
  line-height: 1;
}
/* Primary CTA — bleibt gefuellt-blau (Hierarchie!). Hover wirkt HELLER statt
   dunkler (klassisches Highlight-Pattern, intuitivere UX). Text auf pure weiss
   fuer maximalen Kontrast — frueher fiel die cremeweisse Schrift bei dunklerem
   Hover-BG visuell ein. Aktiv-State: Background zurueck auf primary + Lift weg. */
.btn-primary { background: var(--brand-primary); color: var(--v2-bg); }
.btn-primary:hover {
  background: #2A3B5F;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(27, 42, 78, .18);
  color: #ffffff;
}
.btn-primary:active {
  background: var(--brand-primary);
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(27, 42, 78, .12);
  color: #ffffff;
}

/* Ghost — sekundaere Aktion: outline mit dezenter Border. Hover NICHT mehr
   full-fill blau (das wirkte erschlagend), sondern Chip-artige zarte Toenung
   plus minimaler Lift + softer Schatten. Konsistent mit btn-chip-Aesthetik. */
.btn-ghost {
  background: #fff;
  border-color: rgba(27, 42, 78, .35);
  color: var(--brand-primary);
}
.btn-ghost:hover {
  background: rgba(27, 42, 78, .06);
  border-color: rgba(27, 42, 78, .55);
  color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(27, 42, 78, .10);
}
.btn-ghost:active { background: rgba(27, 42, 78, .10); transform: translateY(0); }

/* Accent — analog zu primary, weicher Hover */
.btn-accent { background: var(--brand-accent); color: var(--brand-primary); }
.btn-accent:hover {
  background: var(--brand-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(198, 143, 77, .18);
  color: var(--brand-primary);
}
.btn-accent:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(198, 143, 77, .12); }

/* Danger — schon zurueckhaltend, aber Hover-Lift fuer Konsistenz */
.btn-danger { background: #fff; color: var(--color-danger); border-color: rgba(180,90,60,.35); }
.btn-danger:hover {
  background: var(--v2-rust-soft);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(180, 90, 60, .10);
}
.btn-danger:active { transform: translateY(0); }

/* Tastatur-Zugaenglichkeit fuer alle Button-Varianten */
.btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.btn-link {
  padding: 0; border: 0; border-radius: 0; background: none; color: var(--color-text);
  border-bottom: 1px solid var(--color-text); padding-bottom: 2px;
}
.btn-link:hover { color: var(--brand-accent); border-color: var(--brand-accent); background: transparent; transform: none; box-shadow: none; }
/* Chip — flache Schnell-Auswahl-Pille fuer „+ Neuer Vorgang"-Reihen.
   Anders als btn-primary (solid blue) oder btn-ghost (fill on hover) bleibt
   der Chip im Hover zurueckhaltend: nur eine zarte Toenung, kein Farbwechsel.
   Wird in client.php auf den drei Buttonreihen (Schnell-Check, produktbezogen,
   anlassbezogen) genutzt — damit die ~19 Pillen das Layout nicht erschlagen. */
.btn-chip {
  background: #fff;
  color: var(--brand-primary);
  border: 1px solid rgba(27, 42, 78, .22);
  font-weight: 500;
  transition: background .18s ease, border-color .18s ease,
              transform .15s ease, box-shadow .18s ease;
}
.btn-chip:hover {
  background: rgba(27, 42, 78, .06);
  border-color: rgba(27, 42, 78, .42);
  color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(27, 42, 78, .10);
}
.btn-chip:active {
  background: rgba(27, 42, 78, .10);
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(27, 42, 78, .08);
}
.btn-chip:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
/* Danger-Variante des Chips — fuer destructive Aktionen wie „Löschen".
   Gleiche zurueckhaltende Hover-Aesthetik wie btn-chip, aber in rust statt brand. */
.btn-chip-danger {
  background: #fff;
  color: var(--color-danger, #B45A3C);
  border: 1px solid rgba(180, 90, 60, .28);
  font-weight: 500;
  transition: background .18s ease, border-color .18s ease,
              transform .15s ease, box-shadow .18s ease;
}
.btn-chip-danger:hover {
  background: rgba(180, 90, 60, .06);
  border-color: rgba(180, 90, 60, .50);
  color: var(--color-danger, #B45A3C);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(180, 90, 60, .10);
}
.btn-chip-danger:active {
  background: rgba(180, 90, 60, .10);
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(180, 90, 60, .08);
}
.btn-chip-danger:focus-visible {
  outline: 2px solid var(--color-danger, #B45A3C);
  outline-offset: 2px;
}

.btn-sm { padding: 9px 14px; font-size: .85rem; }
.btn-lg { padding: 16px 28px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; justify-content: center; }
a.btn { text-decoration: none; }
/* Mai 2026: KEIN `color: inherit` mehr beim Button-Hover. `a.btn:hover` hatte
   hoehere Spezifitaet (0,2,1) als `.btn-primary:hover` (0,2,0) und liess den
   Button-Text die DUNKLE Container-Textfarbe erben → cremeweisse Schrift wurde
   auf dunklem Button unsichtbar. Die Farbsteuerung gehoert zu den `.btn-*:hover`-
   Varianten (alle setzen explizit color + schlagen das globale `a:hover`). */
a.btn:hover { text-decoration: none; }

/* === Forms === */
.form-row { margin-bottom: 18px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
label { display: block; font-family: var(--font-sans); font-weight: 500; font-size: .82rem; color: var(--color-text-soft); margin-bottom: 8px; letter-spacing: .01em; }
.form-hint { font-size: .8rem; color: var(--color-text-mute); margin-top: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=url], input[type=color], select, textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--v2-line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(27,42,78,.08);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
input[type=color] { height: 46px; padding: 4px; }
/* Ankreuzfelder.
   August 2026: Das Kaestchen hatte keine Groessenangabe und rendelte in der
   Vorgabe des Browsers — rund 13 Pixel neben einem mehrzeiligen Text. Auf dem
   Telefon war die Einwilligung unter dem Lead-Formular dadurch weder gut zu
   sehen noch sicher zu treffen. Der DIN-Bogen loest das seit jeher selbst
   (16 Pixel plus accent-color); die uebrigen Formulare bekommen es hier.
   `flex-start` statt `center`, weil ein zweizeiliges Label das Kaestchen sonst
   auf halbe Hoehe schiebt. */
.form-check { display: flex; align-items: flex-start; gap: 10px; }
.form-check input[type=checkbox], .form-check input[type=radio] {
  width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0;
  accent-color: var(--brand-primary); cursor: pointer;
}
.form-check input { width: auto; }
.form-check label { margin-bottom: 0; font-weight: 400; color: var(--v2-ink-2); cursor: pointer; }
/* Der Einwilligungstext unter den oeffentlichen Formularen: kleiner gesetzt
   als eine Feldbeschriftung, aber lesbar. Ersetzt die frueher an beiden
   Stellen kopierten style-Attribute. */
.form-check-consent label { font-size: .9rem; line-height: 1.5; }

@media (max-width: 640px) {
  /* Auf dem Telefon wird das Kaestchen zum Tippziel — 24 Pixel sind die
     kleinste Flaeche, die sich mit dem Daumen zuverlaessig treffen laesst. */
  .form-check input[type=checkbox], .form-check input[type=radio] {
    width: 24px; height: 24px;
  }
}

/* === Cards === */
.card {
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.card + .card { margin-top: 16px; }
.card-soft {
  background: rgba(255,255,255,.5);
  border: 1px solid var(--v2-line-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.card-ink {
  background: var(--brand-primary);
  color: var(--v2-bg);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.card-ink h2, .card-ink h3, .card-ink h4 { color: var(--v2-bg); }
.card-ink p { color: rgba(250,247,242,.78); }
.card-ink a { color: var(--v2-bg); border-bottom-color: rgba(250,247,242,.4); }
.card-ink a:hover { color: var(--brand-accent); border-bottom-color: var(--brand-accent); }
.card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--v2-line-soft);
}
.card-header h2, .card-header h3, .card-header h4 { margin: 0; }

/* === Alerts === */
.alert {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  border-left-width: 3px;
  margin-bottom: 16px;
  font-size: .92rem;
}
.alert-success { background: var(--v2-sage-soft); border-color: var(--v2-sage); color: #34534a; }
.alert-danger  { background: var(--v2-rust-soft); border-color: var(--v2-rust); color: #76341c; }
.alert-warning { background: var(--v2-amber-soft); border-color: var(--brand-accent); color: #7a5224; }
.alert-info    { background: var(--brand-primary-soft); border-color: var(--brand-primary); color: var(--brand-primary); }

/* === Pills / Badges === */
.pill, .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .02em;
  background: var(--v2-bg-alt);
  color: var(--v2-ink-2);
  border: 1px solid var(--v2-line-soft);
}
.pill-sage,    .badge-success { background: var(--v2-sage-soft);  color: #34534a; border-color: transparent; }
.pill-amber,   .badge-warning { background: var(--v2-amber-soft); color: #7a5224; border-color: transparent; }
.pill-rust,    .badge-danger  { background: var(--v2-rust-soft);  color: #76341c; border-color: transparent; }
.pill-ink,     .badge-info    { background: var(--brand-primary-soft); color: var(--brand-primary); border-color: transparent; }
.badge-neutral { background: var(--v2-bg-alt); color: var(--v2-ink-2); }

/* === Tables === */
.table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-family: var(--font-sans);
}
.table th, .table td {
  text-align: left;
  padding: 14px 22px;
  border-bottom: 1px solid var(--v2-line-soft);
  vertical-align: middle;
}
.table th {
  background: var(--v2-bg-alt);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--v2-ink-soft);
}
.table tbody tr { transition: background .15s var(--ease); }
.table tbody tr:hover { background: var(--v2-bg-alt); }
.table tbody td strong { font-family: var(--font-serif); font-weight: 500; font-size: 1.02rem; letter-spacing: -.008em; color: var(--color-text); }

/* === Trust strip === */
.trust { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-family: var(--font-sans); font-size: .8rem; letter-spacing: .04em; color: var(--v2-ink-soft); }
.trust-dot { display: inline-flex; align-items: center; gap: 8px; }
.trust-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v2-sage); }

/* ========================================================
   PUBLIC MARKETING LAYOUT
   ======================================================== */

.public-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,247,242,.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--v2-line-soft);
}
.public-header .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; }
.public-header .logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: 1.28rem; letter-spacing: -.012em; color: var(--color-text); border-bottom: 0; }
.public-header .logo:hover { color: var(--brand-accent); }
.public-header nav ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.public-header nav a { font-size: .92rem; color: var(--v2-ink-2); border-bottom: 0; }
.public-header nav a:hover { color: var(--brand-accent); }
.public-header .actions { display: flex; gap: 14px; align-items: center; }

.hero { padding: 80px 0 96px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
.hero h1 em { color: var(--brand-accent); }
.hero .lead { margin-top: 24px; margin-bottom: 36px; max-width: 52ch; }
.hero .cta-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-visual { display: flex; justify-content: center; align-items: center; position: relative; }
.hero-visual::before {
  content: ""; position: absolute; inset: -40px;
  background: radial-gradient(circle, rgba(198,143,77,.10), transparent 65%);
  filter: blur(20px);
}

.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--v2-line);
}
.feature {
  padding: 36px 32px 36px 0;
  display: flex; flex-direction: column; gap: 14px;
}
.feature-num { font-family: var(--font-serif); font-style: italic; color: var(--brand-accent); font-size: 1.2rem; }
.feature h3 { margin: 0; }
.feature p { margin: 0; font-size: .95rem; }

.pricing-card { padding: 48px 56px; text-align: left; position: relative; }
.pricing-card .badge-top {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--brand-accent); color: var(--brand-primary);
  padding: 6px 18px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
}
.pricing-amount { font-family: var(--font-serif); font-size: 4.5rem; line-height: 1; letter-spacing: -.03em; color: var(--brand-primary); }
.pricing-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; font-size: .92rem; }
.pricing-list li { display: flex; gap: 12px; align-items: flex-start; }
.pricing-list li::before { content: "✓"; color: var(--v2-sage); font-family: var(--font-serif); font-style: italic; margin-top: -2px; }

.public-footer { padding: 80px 0 40px; border-top: 1px solid var(--v2-line); margin-top: 80px; }
.public-footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.public-footer h4 { margin: 0 0 14px; }
.public-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.public-footer a { font-size: .86rem; color: var(--v2-ink-2); border-bottom: 0; }
.public-footer .copy { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--v2-line-soft); display: flex; justify-content: space-between; font-size: .78rem; color: var(--color-text-mute); }

/* ========================================================
   APP SHELL (eingeloggter Vermittler)
   ======================================================== */

.app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--v2-bg); }
.sidebar {
  background: var(--brand-primary);
  color: rgba(250,247,242,.78);
  padding: 24px 16px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.sidebar .brand {
  padding: 4px 8px 22px; display: flex; align-items: center; gap: 12px;
  font-family: var(--font-serif); font-size: 1.18rem; color: #fff; letter-spacing: -.012em;
  text-decoration: none;
}
.sidebar .brand:hover { color: #fff; }
.sidebar nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar nav .nav-section {
  padding: 18px 14px 8px;
  font-family: var(--font-sans);
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(250,247,242,.45);
}
.sidebar nav a {
  text-align: left; padding: 10px 14px;
  font-family: var(--font-sans); font-size: .92rem;
  color: rgba(250,247,242,.72);
  border-radius: 6px;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sidebar nav a:hover { background: rgba(250,247,242,.06); color: #fff; }
/* Abmelden ist seit dem 28.09.2026 ein Formular (POST mit CSRF), sieht aber aus wie die Links. */
.sidebar nav .nav-abmelden { margin: 0; display: flex; flex-direction: column; }
.sidebar nav .nav-abmelden-knopf {
  text-align: left; padding: 10px 14px; width: 100%;
  font-family: var(--font-sans); font-size: .92rem;
  color: rgba(250,247,242,.72); background: none; cursor: pointer;
  border: 0; border-radius: 6px; border-left: 2px solid transparent;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sidebar nav .nav-abmelden-knopf:hover { background: rgba(250,247,242,.06); color: #fff; }
.sidebar nav a.active {
  background: rgba(250,247,242,.08);
  color: #fff;
  font-weight: 500;
  border-left-color: var(--brand-accent);
}
/* User-Block ganz unten in der Sidebar:
   Firmenlogo (oder Initialen) + Vermittler-Name + Firmenname,
   kompakt nebeneinander auf dem Indigo-Navy-Hintergrund der Sidebar. */
.sidebar .sidebar-user {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px;
  border-top: 1px solid rgba(250,247,242,.10);
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  transition: background .15s var(--ease);
}
.sidebar .sidebar-user:hover { background: rgba(250,247,242,.06); }
.sidebar .sidebar-user-logo {
  width: 40px; height: 40px; flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sidebar .sidebar-user-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.sidebar .sidebar-user-initials {
  font-family: var(--font-sans);
  font-size: .82rem; font-weight: 600;
  color: var(--brand-primary);
  letter-spacing: .02em;
}
.sidebar .sidebar-user-text {
  display: flex; flex-direction: column;
  min-width: 0; line-height: 1.25;
}
.sidebar .sidebar-user-text strong {
  font-family: var(--font-sans);
  font-size: .86rem; font-weight: 500;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar .sidebar-user-text small {
  font-size: .72rem;
  color: rgba(250,247,242,.55);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
  background: var(--v2-bg);
  border-bottom: 1px solid var(--v2-line);
  padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: sticky; top: 0; z-index: 30;
}
.app-topbar .crumbs { font-size: .9rem; color: var(--v2-ink-soft); }
.app-topbar .crumbs a { color: var(--v2-ink-soft); border-bottom: 0; }
.app-topbar .crumbs a:hover { color: var(--brand-accent); }
.app-topbar .user-menu { display: flex; align-items: center; gap: 14px; }
.app-topbar .user-menu a { border-bottom: 0; }

.app-content { padding: 28px 32px; flex: 1; }
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px; flex-wrap: wrap; gap: 16px;
}
.page-header h1 { margin: 0; font-size: clamp(1.8rem,2.6vw,2.4rem); line-height: 1.1; }
.page-header .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* === KPI Cards (Editorial-Stil) === */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi {
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 140px;
  text-decoration: none; color: inherit;
}
.kpi:hover { border-color: var(--color-border-strong); }
.kpi .label { font-family: var(--font-sans); font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--v2-ink-soft); }
.kpi .value { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 400; color: var(--color-text); letter-spacing: -.025em; line-height: 1.05; margin-top: 4px; }
.kpi .delta { font-size: .78rem; color: var(--v2-ink-mute); margin-top: 6px; letter-spacing: .02em; }

/* === Tabs === */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--v2-line); margin-bottom: 24px; }
.tabs a {
  padding: 14px 20px;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 500;
  color: var(--v2-ink-soft);
  border-bottom: 2px solid transparent;
  border: 0;
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tabs a:hover { color: var(--brand-primary); }
.tabs a.active { color: var(--brand-primary); border-bottom-color: var(--brand-accent); }

/* ========================================================
   AUTH LAYOUT
   ======================================================== */

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side {
  background: var(--brand-primary);
  color: var(--v2-bg);
  padding: 64px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-side .logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: 1.4rem; letter-spacing: -.012em; color: #fff; border-bottom: 0; }
.auth-side .logo:hover { color: #fff; }
.auth-side h2 { color: #fff; font-size: 2.2rem; margin: 0 0 14px; }
.auth-side p { color: rgba(250,247,242,.78); }
.auth-side .check-list { list-style: none; padding: 0; margin: 28px 0; display: flex; flex-direction: column; gap: 12px; }
.auth-side .check-list li { padding: 0; display: flex; gap: 12px; color: rgba(250,247,242,.92); font-size: .95rem; }
.auth-side .check-list li::before { content: "✓"; color: var(--brand-accent); font-family: var(--font-serif); font-style: italic; flex-shrink: 0; }
.auth-form-area { display: flex; align-items: center; justify-content: center; padding: 60px; background: var(--v2-bg); }
.auth-form { width: 100%; max-width: 440px; }
.auth-form h1 { margin-bottom: 8px; font-size: 2.2rem; }
.auth-form .sub { color: var(--v2-ink-soft); margin-bottom: 32px; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; }

/* ========================================================
   PUBLIC FORM (Mandantenstrecke)
   ======================================================== */

.public-form-shell { min-height: 100vh; background: var(--v2-bg); padding: 32px 16px; }
.public-form-card {
  max-width: 800px; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.public-form-card .branding-bar {
  background: var(--brand-primary);
  color: var(--v2-bg);
  padding: 22px 30px;
  display: flex; align-items: center; gap: 18px;
}
.public-form-card .branding-bar img { max-height: 48px; max-width: 160px; background: #fff; padding: 5px 10px; border-radius: 6px; }
.public-form-card .branding-bar .who { font-size: .76rem; opacity: .8; letter-spacing: .04em; text-transform: uppercase; }
.public-form-card .branding-bar .who strong { display: block; font-size: 1.1rem; font-family: var(--font-serif); text-transform: none; letter-spacing: -.012em; margin-top: 4px; opacity: 1; }
.public-form-progress { height: 3px; background: var(--v2-line); }
.public-form-progress > span { display: block; height: 100%; background: var(--brand-accent); transition: width .4s var(--ease); }
.public-form-body { padding: 40px; }

/* === Empty/utility === */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.empty { text-align: center; padding: 56px 16px; color: var(--v2-ink-mute); font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; }

/* === Confirm-Modal === */
.bk-modal-overlay { position: fixed; inset: 0; background: rgba(27,42,78,.55); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.bk-modal-overlay.is-open { display: flex; animation: bkModalFade .15s var(--ease); }
.bk-modal-dialog { background: #fff; border-radius: var(--radius-lg); padding: 36px 32px 28px; max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); animation: bkModalScale .2s var(--ease); }
.bk-modal-dialog .bk-modal-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-family: var(--font-serif); font-size: 26px; }
.bk-modal-dialog .bk-modal-icon.is-warn   { background: var(--v2-amber-soft); color: var(--brand-accent); }
.bk-modal-dialog .bk-modal-icon.is-danger { background: var(--v2-rust-soft);  color: var(--v2-rust); }
.bk-modal-dialog h3 { margin: 0 0 10px; text-align: center; font-size: 1.35rem; font-family: var(--font-serif); font-weight: 500; letter-spacing: -.012em; }
.bk-modal-dialog .bk-modal-msg { color: var(--v2-ink-2); text-align: center; margin: 0 0 24px; line-height: 1.55; max-width: none; }
.bk-modal-dialog .bk-modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@keyframes bkModalFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bkModalScale { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ========================================================
   RESPONSIVE
   ======================================================== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .public-footer .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
  .container, .container-narrow { padding: 0 20px; }
  .section { padding: 64px 0; }
  .section-lg { padding: 80px 0; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { padding: 40px; }
  .auth-form-area { padding: 40px 20px; }
  /* Die Navigation war hier bis Juli 2026 mit `display: none` ausgeblendet, und
     zwar ersatzlos: „Funktionen", „Preise" und „Über uns" waren auf dem Telefon
     ueberhaupt nicht erreichbar. Statt eines Klappmenues, das neuen
     JavaScript-Code braeuchte, bricht der Kopf jetzt um und die Navigation
     steht als eigene Zeile darunter. */
  .public-header .nav { flex-wrap: wrap; gap: 10px 16px; padding: 12px 0; }
  .public-header .logo { font-size: 1.12rem; }
  .public-header nav { order: 3; width: 100%; }
  .public-header nav ul { gap: 18px; flex-wrap: wrap; }
  .public-header nav a { font-size: .88rem; }
  .public-header .actions { gap: 10px; }

  .app-shell { grid-template-columns: 1fr; }

  /* Die Seitenleiste blieb hier in voller Hoehe stehen und legte sich als rund
     600 Pixel hoher dunkler Block ueber JEDEN Seiteninhalt. Man musste auf
     jeder Seite erst daran vorbeiscrollen. Jetzt wird sie zu einer waagerecht
     rollbaren Leiste von etwa 60 Pixeln Hoehe. Die Abschnitts-Ueberschriften
     entfallen dabei, weil sie in einer Zeile keinen Sinn ergeben. */
  .sidebar {
    position: relative; height: auto; min-height: auto;
    flex-direction: row; align-items: center; gap: 10px;
    padding: 8px 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .sidebar .brand { padding: 0 6px 0 0; font-size: 1.02rem; flex: 0 0 auto; }
  .sidebar nav { flex-direction: row; gap: 2px; flex: 0 0 auto; }
  .sidebar nav .nav-section { display: none; }
  .sidebar nav a {
    white-space: nowrap; padding: 8px 12px;
    border-left: 0; border-bottom: 2px solid transparent; border-radius: 4px;
  }
  .sidebar nav a.active { border-left-color: transparent; border-bottom-color: var(--brand-accent); }
  .sidebar .sidebar-user { flex: 0 0 auto; margin: 0 0 0 auto; padding: 6px 8px; }
  .sidebar .sidebar-user-text { display: none; }

  /* Unter 16px zoomt Safari auf dem iPhone beim Antippen eines Feldes
     automatisch hinein und zoomt danach nicht von selbst zurueck. Der Kunde
     muss dann bei jedem Feldwechsel von Hand herauszoomen. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=tel], input[type=date], input[type=url], select, textarea {
    font-size: 16px;
  }
  .feature-grid { grid-template-columns: 1fr; }
  .feature { border-bottom: 1px solid var(--v2-line); padding: 28px 0; }
  .pricing-card { padding: 32px 24px; }
  .pricing-card > div[style*="grid"] { display: block !important; }
  .public-footer .footer-grid { grid-template-columns: 1fr; }
  .public-form-body { padding: 24px; }
  .app-content { padding: 20px 16px; }
}

/* =====================================================================
   Kundenakte „2a Inline-Kompass" (Mai 2026)
   Ein Einstieg über 4 Kategorie-Kacheln, Aufklapp-Panel mit
   Weiterführen/Neu-anlegen, gefilterte Alle-Vorgänge-Tabelle.
   ===================================================================== */

/* --- Akte-Kopf --- */
.akte-head { display: grid; grid-template-columns: 1fr auto auto; gap: 34px; align-items: center; }
.akte-head-id { display: flex; gap: 18px; align-items: center; min-width: 0; }
.akte-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--v2-bg-alt);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.2rem; color: var(--v2-ink-2);
}
.akte-head h1 { margin: 0; font-size: 2.1rem; line-height: 1.1; letter-spacing: -.024em; }
.akte-contact { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: .86rem; color: var(--v2-ink-soft); }
.akte-head-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }

/* Beiblatt-Zugang: Status und Sperre, eine Zeile unter den Kopf-Aktionen.
   Der Token steckt in den QR-Codes der Beratungsdokumentation, deshalb liegt
   die Verwaltung in der Akte und nicht in den broker-weiten Einstellungen. */
.akte-ktoken {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--v2-line);
  font-size: .82rem;
}
.akte-ktoken-lbl {
  font-size: .69rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v2-ink-soft);
}
.akte-kompass {
  display: flex; gap: 18px; align-items: center;
  padding-left: 34px; border-left: 1px solid var(--v2-line);
}
.akte-kompass.is-faded svg { opacity: .35; }
.akte-legend { display: flex; flex-direction: column; gap: 9px; }
.akte-legend-title { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-accent); }
.akte-legend-row { display: flex; align-items: baseline; gap: 8px; }
.akte-legend-row .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.akte-legend-row .lbl { font-size: .82rem; color: var(--v2-ink-soft); white-space: nowrap; }
.akte-legend-row .val { font-family: var(--font-serif); font-size: .95rem; font-variant-numeric: tabular-nums; }
.akte-legend-date { font-size: .74rem; color: var(--v2-ink-mute); margin-top: 2px; }
.akte-open-stat { text-align: right; padding-left: 34px; border-left: 1px solid var(--v2-line); }
.akte-open-stat .k { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--v2-ink-mute); white-space: nowrap; }
.akte-open-stat .n { font-family: var(--font-serif); font-size: 2rem; line-height: 1.15; }
.akte-open-stat .s { font-size: .78rem; color: var(--v2-ink-mute); white-space: nowrap; }

/* Kunden-Link-Copy-Widget (Vorgangs-Cards) — Mai 2026.
   Kompakte Zeile mit gekuerztem Link, Kopieren-Button und Ablaufdatum. */
.akte-copy {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 7px 10px;
  background: var(--brand-primary-tint, #F2EDE4);
  border: 1px solid rgba(27,42,78,.10); border-radius: 8px;
  font-size: .78rem;
}
.akte-copy .lbl { color: var(--brand-primary); font-weight: 500; white-space: nowrap; }
.akte-copy .lnk {
  flex: 1; min-width: 120px; color: var(--v2-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: Menlo, Consolas, monospace; font-size: .74rem;
}
.akte-copy button {
  background: #fff; border: 1px solid rgba(27,42,78,.18); color: var(--brand-primary);
  font: inherit; font-size: .74rem; padding: 4px 10px; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.akte-copy button:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #FAF7F2; }
.akte-copy .exp { color: var(--v2-ink-mute); white-space: nowrap; }
.akte-copy.is-expired { background: #F0DED5; border-color: rgba(180,90,60,.30); }
.akte-copy.is-expired .lbl { color: #B45A3C; }

/* --- Kategorie-Kacheln --- */
.akte-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 0; }
.akte-cat {
  text-align: left; padding: 18px 18px 16px; border-radius: 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 12px; min-height: 124px;
  background: #fff; border: 1px solid rgba(27,42,78,.12); color: var(--v2-ink);
  box-shadow: 0 1px 2px rgba(27,42,78,.04);
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  font: inherit;
}
.akte-cat:hover { border-color: rgba(27,42,78,.28); }
.akte-cat .akte-cat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.akte-cat .akte-cat-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v2-bg-alt); color: var(--v2-ink-2);
}
.akte-cat .akte-cat-pill {
  font-size: .74rem; padding: 3px 9px; border-radius: 999px;
  background: #F7F4EE; color: var(--v2-ink-soft); white-space: nowrap;
}
.akte-cat .akte-cat-name { font-family: var(--font-serif); font-size: 1.12rem; letter-spacing: -.012em; }
.akte-cat .akte-cat-sub { font-size: .84rem; line-height: 1.4; margin-top: 4px; color: var(--v2-ink-soft); }
.akte-cat.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #FAF7F2; box-shadow: 0 8px 26px -10px rgba(27,42,78,.35); }
.akte-cat.is-active .akte-cat-ico { background: rgba(250,247,242,.12); color: var(--brand-accent); }
.akte-cat.is-active .akte-cat-pill { background: rgba(250,247,242,.10); color: rgba(250,247,242,.75); }
.akte-cat.is-active .akte-cat-sub { color: rgba(250,247,242,.72); }

/* --- Aufklapp-Panel --- */
.akte-panel { margin-top: 18px; border: 1px solid rgba(27,42,78,.14); border-radius: 16px; background: #fff; overflow: hidden; }
.akte-panel[hidden] { display: none; }
.akte-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; border-bottom: 1px solid rgba(27,42,78,.08); background: #FBF9F5;
}
.akte-panel-head .kicker { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-accent); }
.akte-panel-head .headline { font-family: var(--font-serif); font-size: 1.25rem; letter-spacing: -.014em; margin-top: 2px; }
.akte-panel-close { border: 0; background: transparent; color: var(--v2-ink-mute); font-size: .84rem; cursor: pointer; padding: 6px 8px; font: inherit; }
.akte-panel-close:hover { color: var(--brand-primary); }
.akte-panel-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; }
/* Mai 2026: kein Scroll-Container mehr — das Panel zeigt bewusst nur die
   3 relevantesten Vorgaenge (offene zuerst), alles weitere steht in der
   Alle-Vorgaenge-Tabelle darunter. */
.akte-panel-list { padding: 22px 24px; border-right: 1px solid rgba(27,42,78,.08); }
.akte-list-more {
  margin-top: 12px; padding: 10px 14px;
  border: 1px dashed var(--color-border-strong); border-radius: 10px;
  background: #FBF9F5; font-size: .84rem; color: var(--v2-ink-soft);
  cursor: pointer; width: 100%; text-align: left; font-family: inherit;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.akte-list-more:hover { background: #F7F4EE; border-color: var(--brand-primary); color: var(--brand-primary); }
.akte-panel-list .list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.akte-panel-list .list-sub { font-size: .82rem; color: var(--v2-ink-mute); margin-bottom: 14px; }

/* Vorgangs-Card */
.akte-vorgang {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 15px 16px; border-radius: 12px;
  border: 1px solid rgba(27,42,78,.12); background: #fff;
}
.akte-vorgang + .akte-vorgang { margin-top: 10px; }
.akte-vorgang .v-title { font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: -.01em; }
.akte-vorgang .v-meta { font-size: .8rem; color: var(--v2-ink-mute); margin-top: 3px; }
.akte-vorgang .v-who { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: .8rem; }
.akte-vorgang .v-who .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.akte-vorgang .v-who.is-link { color: #7a5224; }
.akte-vorgang .v-who.is-link .dot { background: var(--brand-accent); }
.akte-vorgang .v-who.is-berater { color: var(--v2-ink-soft); }
.akte-vorgang .v-who.is-berater .dot { background: var(--v2-ink-mute); }
.akte-vorgang .v-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.akte-vorgang .v-progress .track { display: block; width: 150px; height: 3px; border-radius: 2px; background: rgba(27,42,78,.10); overflow: hidden; }
.akte-vorgang .v-progress .fill { display: block; height: 100%; }
.akte-vorgang .v-progress .pct { font-size: .78rem; color: var(--v2-ink-soft); font-variant-numeric: tabular-nums; }
.akte-vorgang .v-actions { display: flex; flex-direction: column; gap: 7px; align-items: stretch; min-width: 186px; }
.akte-vorgang .v-actions .hint { font-size: .74rem; color: var(--v2-ink-mute); text-align: center; line-height: 1.35; }
.akte-empty {
  padding: 20px 18px; border: 1px dashed var(--color-border-strong);
  border-radius: 12px; background: #FBF9F5;
}
.akte-empty .t { font-family: var(--font-serif); font-size: 1.02rem; margin-bottom: 4px; }
.akte-empty .b { font-size: .86rem; color: var(--v2-ink-soft); }

/* Neu-anlegen-Spalte */
.akte-panel-new { padding: 22px 24px; background: #FBF9F5; border-left: 2px solid rgba(198,143,77,.35); }
.akte-new-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.akte-new-head .plus {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--brand-primary); color: #FAF7F2;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1;
}
.akte-new-head .t { font-family: var(--font-serif); font-size: 1.15rem; letter-spacing: -.012em; }
.akte-new-head .s { font-size: .82rem; color: var(--v2-ink-mute); margin-top: 1px; }
.akte-step-label { font-size: .78rem; font-weight: 500; color: var(--v2-ink-soft); margin: 16px 0 8px; }
.akte-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.akte-mode-btn {
  text-align: left; padding: 12px 14px; border-radius: 10px; cursor: pointer;
  background: #fff; border: 1px solid rgba(27,42,78,.14); color: var(--v2-ink); font: inherit;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.akte-mode-btn .t { display: block; font-size: .9rem; font-weight: 500; }
.akte-mode-btn .s { display: block; font-size: .78rem; margin-top: 2px; color: var(--v2-ink-mute); }
.akte-mode-btn.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #FAF7F2; }
.akte-mode-btn.is-active .s { color: rgba(250,247,242,.7); }
.akte-mode-btn:disabled { opacity: .55; cursor: not-allowed; }
.akte-send-box {
  margin: 14px 0 2px; padding: 12px 14px;
  border: 1px solid rgba(198,143,77,.45); border-radius: 10px; background: #FBF6EE;
  font-size: .82rem; color: #7a5224;
  display: none;
}
.akte-panel[data-mode="kunde"] .akte-send-box { display: block; }
.akte-variant {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(27,42,78,.12); background: #fff;
}
.akte-variant + .akte-variant, .akte-variant-group + .akte-variant { margin-top: 8px; }
.akte-variant .n { font-size: .94rem; font-weight: 500; }
.akte-variant .tag { font-size: .74rem; padding: 3px 9px; border-radius: 999px; background: var(--v2-bg-alt); color: var(--v2-ink-soft); white-space: nowrap; }
.akte-variant .note { font-size: .8rem; color: var(--v2-ink-mute); margin-top: 3px; }
.akte-variant.is-running { border-color: rgba(198,143,77,.45); background: #FBF6EE; }
.akte-variant.is-running .n { color: #7a5224; }
.akte-variant.is-running .tag { background: #F3E7D6; color: #7a5224; }
.akte-variant.is-done { border-color: rgba(90,122,110,.45); background: #F4F8F5; }
.akte-variant.is-done .n { color: #34534a; }
.akte-variant.is-done .tag { background: var(--v2-sage-soft); color: #34534a; }
.akte-variant-group {
  font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--v2-ink-mute); margin: 14px 0 6px;
}
.akte-mode-hint { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(27,42,78,.08); font-size: .82rem; color: var(--v2-ink-soft); }

/* --- Alle Vorgänge --- */
.akte-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.akte-chip {
  padding: 6px 13px; border-radius: 999px; font-size: .8rem; cursor: pointer; white-space: nowrap;
  background: #fff; border: 1px solid rgba(27,42,78,.14); color: var(--v2-ink-soft); font: inherit;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.akte-chip.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #FAF7F2; }
.akte-table tr[hidden] { display: none; }

/* Die Vorgangs-Tabelle hat 7 Spalten und damit eine intrinsische Mindestbreite.
   Sie scrollt deshalb in ihrem EIGENEN Container — sonst schiebt sie das
   gesamte Seiten-Layout nach rechts (horizontaler Body-Scrollbalken). */
.akte-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Kopfzeile darf umbrechen: Titel + 5 Filter-Chips passen sonst nicht in eine
   Zeile und wuerden die Card-Breite hochtreiben. */
.akte-table .card-header { flex-wrap: wrap; }
.akte-vorgang-table { min-width: 780px; }
.akte-vorgang-table th, .akte-vorgang-table td { padding: 11px 12px; }
.akte-vorgang-table .col-nowrap { white-space: nowrap; }
/* Titel darf umbrechen und traegt die flexible Restbreite. */
.akte-vorgang-table .col-title { min-width: 190px; }
/* Personen-Spalte: bei sehr langen Namen kuerzen statt die Tabelle zu sprengen. */
.akte-vorgang-table .col-person {
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Responsive */
@media (max-width: 1080px) {
  .akte-head { grid-template-columns: 1fr; gap: 20px; }
  .akte-kompass, .akte-open-stat { padding-left: 0; border-left: 0; }
  .akte-open-stat { text-align: left; }
  .akte-cats { grid-template-columns: repeat(2, 1fr); }
  .akte-panel-grid { grid-template-columns: 1fr; }
  .akte-panel-list { border-right: 0; border-bottom: 1px solid rgba(27,42,78,.08); }
}

/* =====================================================================
   Schmale Bildschirme (Juli 2026)
   =====================================================================
   Bis hierher endete die Anpassung bei 768px. Fuer ein Telefon mit 375px
   gab es keine einzige Regel, und alle Listentabellen ausser einer haben
   die ganze Seite waagerecht verschoben.
   ===================================================================== */

/* --- Tabellen: eine Regel statt fuenfzehn Einzeleingriffen ---
   Ein `display: block` auf dem <table> macht daraus einen rollbaren Kasten,
   waehrend die Zeilen darin ueber anonyme Tabellenboxen ihr Tabellenverhalten
   behalten. Damit rollt die Tabelle in sich statt die Seite mitzunehmen, ohne
   dass fuenfzehn Stellen einen Wrapper brauchen. `min-width: 100%` sorgt
   dafuer, dass kurze Tabellen weiterhin die volle Breite fuellen.
   Vorbild ist .akte-table-scroll in public/client.php, nur ohne Extra-Markup. */
@media (max-width: 900px) {
  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
  }
}

@media (max-width: 560px) {
  /* Innenabstaende: 32px Kartenrand und 22px Zellenrand kosten bei 375px
     Bildschirmbreite 64 bzw. 44 Pixel, bevor ein Zeichen zu sehen ist. */
  .card { padding: 18px 16px; }
  .card-header { padding-bottom: 12px; margin-bottom: 14px; }
  .table th, .table td { padding: 11px 12px; }
  .page-header { margin-bottom: 18px; }
  .public-form-body { padding: 20px 14px; }
  .public-form-shell { padding: 16px 10px; }

  /* Umbruch erlauben, wo zwei Elemente nebeneinander nicht mehr passen. */
  .akte-head-actions { flex-wrap: wrap; }
  .public-form-card .branding-bar { flex-wrap: wrap; padding: 16px 18px; gap: 12px; }
  .flex-between { flex-wrap: wrap; gap: 10px; }

  /* Kategorie-Kacheln: zweispaltig blieben 129px Inhalt, der Zaehler-Pill
     traegt aber `white-space: nowrap` und braucht rund 156px. */
  .akte-cats { grid-template-columns: 1fr; }
  .akte-mode-toggle { grid-template-columns: 1fr; }

  /* Vorgangs-Karten: die feste Knopfspalte mit 186px und der Fortschrittsbalken
     mit 150px liessen fuer Titel und Inhalt 61 Pixel uebrig. */
  .akte-vorgang { grid-template-columns: 1fr; gap: 12px; }
  .akte-vorgang .v-actions { min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .akte-vorgang .v-progress .track { width: 100%; }
  .akte-variant { grid-template-columns: 1fr; gap: 8px; }

  /* Kennzahlen und Formulare einspaltig statt zweispaltig gequetscht. */
  .kpi-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .form-row[style*="span 2"] { grid-column: auto !important; }
}

/* =====================================================================
   Startseite: Raster als Klassen statt Inline-Stile
   =====================================================================
   Inline gesetzte `grid-template-columns` lassen sich von einer Media-Query
   nicht ueberschreiben, ohne `!important` zu benutzen. Genau daran hing der
   waagerechte Ueberlauf der Startseite: die Personenkarten forderten 220px
   Spalte plus 48px Abstand plus 96px Innenabstand, also 364px, verfuegbar
   waren 335px.
   Die Spaltenaufteilung kommt jetzt ueber eine Custom-Property herein, die
   eigentliche Eigenschaft steht im Stylesheet. Damit bleibt die Optik am
   grossen Bildschirm unveraendert und der Umbruch trotzdem moeglich.
   ===================================================================== */
.lp-split {
  display: grid;
  grid-template-columns: var(--lp-cols, 1fr 1fr);
  gap: var(--lp-gap, 64px);
}
.lp-person {
  display: grid;
  grid-template-columns: var(--lp-cols, 220px 1fr);
  gap: var(--lp-gap, 48px);
  align-items: flex-start;
}

@media (max-width: 900px) {
  .lp-split, .lp-person { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .lp-person { gap: 20px; }
  .lp-person img, .lp-person > div:first-child > div { margin: 0 auto; }
}

/* =====================================================================
   Status-Auswahl in der Vorgangsuebersicht (Juli 2026)
   Faerbt sich wie die Badges, damit der Status auf einen Blick lesbar
   bleibt, obwohl er jetzt direkt in der Zeile umstellbar ist. Die
   Farbwerte entsprechen den Pastell-Pills der Vorgangs-Detailseite.
   ===================================================================== */
.bk-status-select {
  width: auto; padding: 6px 26px 6px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--v2-line); background-color: #fff;
}
.bk-status-select.bk-status-abgeschlossen  { background-color: #E6F2EC; color: #1F6A45; border-color: #A7D5BA; }
.bk-status-select.bk-status-versendet      { background-color: #E5EAF4; color: #1B2A4E; border-color: #B4C2DA; }
.bk-status-select.bk-status-in_bearbeitung { background-color: #FCF3E0; color: #8A5A14; border-color: #E8C988; }
.bk-status-select.bk-status-entwurf        { background-color: #F1F3F8; color: #5A6678; border-color: #D7DBE3; }
/* 26.08.2026: „Ausschreibung laeuft". Fehlte bis dahin — das Feld blieb weiss
   und war damit das einzige ohne Farbe, ausgerechnet in dem Zustand, in dem
   etwas draussen ist. Ein eigener Ton, nicht der von `versendet`: Das eine
   heisst „beim Kunden", das andere „bei Versicherern". */
.bk-status-select.bk-status-ausschreibung_versendet { background-color: #E3EFF3; color: #155E75; border-color: #A8CEDD; }

/* =====================================================================
   Beratungsplan — Schritt 2 der anlassbezogenen Beratung (August 2026)
   =====================================================================
   Dritte Fassung, diesmal nach einem Entwurf des Nutzers.

   Fassung 1 rechnete eine Zeile je Sparte und haengte alle vorhandenen
   Vorgaenge als Knoepfe daneben — drei gleich beschriftete Knoepfe
   nebeneinander. Fassung 2 machte daraus einen Klickweg, der die
   Sparten-Auswahl beim Aufklappen ausblendete.

   Jetzt bleibt beides gleichzeitig stehen: eine Karte je Thema, darin die
   Sparten als Kacheln, und unter der gewaehlten Kachel klappt das Erfassen
   auf. Daneben eine schmale Spalte mit Fortschritt und Zurueckgestelltem,
   unten eine klebende Leiste mit dem Weg hinaus.

   Alle Farben kommen aus der vorhandenen Palette. Der Entwurf nutzt exakt
   dieselben Werte, nur --v2-sage-ink kam neu dazu.
   ===================================================================== */

/* --- Das zweispaltige Raster ---------------------------------------- */
.plan-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(280px, 1fr);
  gap: 32px;
  align-items: start;
}
.plan-spalte { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.plan-seite   { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; min-width: 0; }

/* Unter 1100 Pixeln rutscht die schmale Spalte unter die Themen. Sie ist
   Begleitung, nicht Bedienung — nichts geht dabei verloren. */
@media (max-width: 1100px) {
  .plan-layout { grid-template-columns: 1fr; }
  .plan-seite  { position: static; }
}

/* --- Der Kopf der Seite --------------------------------------------- */
.plan-kopf { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.plan-kopf h1 { margin: 0; font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.08; }
.plan-kopf .lead {
  margin: 4px 0 0; max-width: 60ch;
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: 1.15rem; line-height: 1.5; color: var(--v2-ink-2);
}

/* --- Eine Karte je Thema -------------------------------------------- */
.plan-karte {
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(27,42,78,.04), 0 1px 2px rgba(27,42,78,.04);
  overflow: hidden;
}
.plan-karte-kopf {
  padding: 22px 26px 18px;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 12px 20px;
}
.plan-karte-titel {
  margin: 0 0 2px; font-family: var(--font-serif); font-weight: 500;
  font-size: 1.32rem; line-height: 1.25; letter-spacing: -.014em; color: var(--v2-ink);
}
.plan-karte-hinweis { font-size: .82rem; color: var(--v2-ink-mute); }
.plan-karte-trenner { height: 1px; background: var(--v2-line); margin: 0 26px 18px; }

.plan-pille {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: .76rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  background: var(--v2-bg-alt); color: var(--v2-ink-soft);
}
.plan-pille.is-erfasst { background: var(--v2-sage-soft); color: var(--v2-sage-ink); }

/* --- Schritt 1: die Sparten als Kacheln ------------------------------ */
/* Sie bleiben stehen, auch wenn unten das Erfassen aufgeklappt ist. Genau
   das war der Unterschied zur Vorfassung: der Ueberblick geht nicht weg,
   nur weil man eine Sparte anfasst. */
.plan-kacheln {
  padding: 0 26px 22px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
}
.plan-kachel {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  text-align: left; padding: 12px 18px; border-radius: 12px;
  flex: 1 1 220px; min-width: 0; max-width: 340px;
  background: #fff; color: var(--v2-ink);
  border: 1px solid rgba(27,42,78,.14);
  text-decoration: none; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              box-shadow .15s var(--ease), transform .15s var(--ease);
}
.plan-kachel:hover { border-color: var(--v2-ink-2); transform: translateY(-1px); color: var(--v2-ink); }
.plan-kachel.is-aktiv {
  background: var(--brand-primary); color: var(--v2-bg);
  border-color: var(--brand-primary);
  box-shadow: 0 4px 24px -6px rgba(27,42,78,.22);
}
.plan-kachel.is-aktiv:hover { color: var(--v2-bg); }
.plan-kachel-name { font-size: .94rem; font-weight: 500; line-height: 1.3; }
.plan-kachel-meta { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--v2-ink-mute); }
.plan-kachel.hat-bestand .plan-kachel-meta { color: var(--v2-sage); }
.plan-kachel.is-aktiv .plan-kachel-meta { color: rgba(250,247,242,.72); }

.plan-punkt { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: rgba(27,42,78,.18); }
.plan-kachel.hat-bestand .plan-punkt { background: var(--v2-sage); }
.plan-kachel.is-aktiv .plan-punkt { background: var(--brand-accent); }

/* Beim Krankenversicherungs-Leitfaden ist jede Kachel eine eigene kleine
   Absendung — die Wahl des Beratungsthemas aendert den Datensatz. Das Formular
   darf die Reihe dabei nicht auseinanderziehen. */
.plan-kachel-form { margin: 0; display: contents; }
button.plan-kachel { font: inherit; text-align: left; }

/* Die gestrichelte Kachel am Reihenende. Ersetzt das frühere <details>. */
.plan-kachel-mehr {
  align-self: stretch; display: inline-flex; align-items: center;
  padding: 12px 16px; border-radius: 12px;
  border: 1px dashed rgba(27,42,78,.22); background: transparent;
  color: var(--v2-ink-soft); font-size: .86rem; text-decoration: none; cursor: pointer;
}
.plan-kachel-mehr:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.plan-weitere[hidden] { display: none !important; }
.plan-weitere { display: contents; }

/* --- Schritt 2: erfassen, im selben Kasten --------------------------- */
.plan-panel {
  border-top: 1px solid var(--v2-line);
  background: var(--v2-bg);
  padding: 22px 26px 24px;
  animation: plan-ein .18s var(--ease);
}
.plan-panel[hidden] { display: none !important; }
@keyframes plan-ein {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

.plan-panel-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.plan-head {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--v2-ink-soft); font-weight: 600; margin: 0;
}
.plan-zu {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: .82rem; color: var(--v2-ink-mute);
  text-decoration: none;
}
.plan-zu:hover { color: var(--v2-ink); }

.plan-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-item {
  background: #fff; border: 1px solid var(--v2-line);
  border-left: 3px solid var(--v2-sage); border-radius: 12px;
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.plan-item.is-zugeordnet { border-left-color: var(--brand-primary); }
.plan-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.plan-item-body strong { font-size: .96rem; font-weight: 500; color: var(--v2-ink); }
.plan-meta { font-size: .8rem; color: var(--v2-ink-mute); }
.plan-flag { color: var(--brand-primary); }

.plan-item-aktionen { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.plan-item-form { margin: 0; display: inline-flex; }

.plan-unlink {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: .82rem; color: var(--v2-ink-mute);
}
.plan-unlink:hover { color: var(--v2-rust); }

.plan-empty { font-size: .9rem; color: var(--v2-ink-mute); font-style: italic; margin: 0; padding: 2px 0 4px; }

/* --- „Oder neu erfassen" ---------------------------------------------
   27.08.2026: Der Block sah aus wie ein Nachtrag. Das Textfeld war weiß auf
   weiß, der Knopf daneben ein schmuckloses „btn" — dieselbe Anmutung wie
   „entfernen" ein paar Zeilen darüber. Wer eine neue Risikoanalyse anlegen
   wollte, suchte danach.

   Jetzt sitzt er in einem eigenen, leicht abgesetzten Feld, und der Knopf ist
   gefüllt. Er ist die HANDLUNG dieses Blocks — alles andere darin ist Eingabe.
   Der Ton ist bewusst der Akzent und nicht das Primärblau: „Beratung
   abschließen" unten in der Fußleiste bleibt damit der eine dunkle Knopf der
   Seite, und die beiden konkurrieren nicht. */
.plan-neu-feld {
  margin-top: 18px; padding: 16px 18px;
  background: var(--v2-bg-alt, #FAF7F2);
  border: 1px solid var(--v2-line-soft, rgba(27,42,78,.10));
  border-radius: 14px;
}
.plan-neu-feld .plan-head { margin: 0 0 10px; }

.plan-new { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }
.plan-new input[type="text"] {
  flex: 1 1 180px; min-width: 0; width: auto;
  padding: 12px 16px; border: 1px solid rgba(27,42,78,.14);
  border-radius: 12px; background: #fff; font-size: .92rem;
}
.plan-new .btn-neu {
  background: var(--brand-accent, #C8963E); color: #fff;
  border: 1px solid var(--brand-accent, #C8963E);
  padding: 12px 20px; border-radius: 12px;
  font-weight: 600; font-size: .92rem; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(27,42,78,.14);
}
.plan-new .btn-neu:hover { filter: brightness(1.06); }

/* --- Die schmale Spalte --------------------------------------------- */
.plan-karte-schmal {
  background: #fff; border: 1px solid var(--v2-line);
  border-radius: 18px; padding: 22px;
}
.plan-karte-schmal.ist-beige { background: var(--v2-bg-alt); border-color: var(--v2-line-soft); }
.plan-schmal-titel {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--v2-ink-soft); font-weight: 600; margin: 0 0 14px;
}
.plan-zahl { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.plan-zahl b {
  font-family: var(--font-serif); font-size: 2.4rem; font-weight: 400;
  line-height: 1; letter-spacing: -.025em; color: var(--v2-ink);
}
.plan-zahl span { font-size: .88rem; color: var(--v2-ink-mute); }

.plan-uebersicht { display: flex; flex-direction: column; gap: 2px; }
.plan-uebersicht-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--v2-line-soft);
  text-decoration: none;
}
.plan-uebersicht-zeile:hover .plan-uebersicht-name { color: var(--brand-primary); }
.plan-uebersicht-name { flex: 1; min-width: 0; font-size: .86rem; color: var(--v2-ink-2); line-height: 1.3; }
.plan-uebersicht-wert { font-size: .78rem; color: var(--v2-ink-mute); white-space: nowrap; }
.plan-punkt-gross { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: rgba(27,42,78,.18); }
.plan-punkt-gross.is-erfasst { background: var(--v2-sage); }

.plan-zurueck-item { background: rgba(255,255,255,.7); border-radius: 12px; padding: 12px 14px; }
.plan-zurueck-item + .plan-zurueck-item { margin-top: 10px; }
.plan-zurueck-titel { font-size: .88rem; color: var(--v2-ink); line-height: 1.35; }
.plan-zurueck-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 6px;
}
.plan-zurueck-grund { font-size: .76rem; color: var(--v2-ink-mute); }

/* --- Die klebende Leiste unten --------------------------------------- */
.plan-fussleiste {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; justify-content: flex-end;
  padding: 0 0 24px; margin-top: 24px; pointer-events: none;
}
.plan-fussleiste > div {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--v2-line); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(27,42,78,.28);
  padding: 14px 18px; max-width: 100%;
}
.plan-fuss-stand { font-size: .88rem; color: var(--v2-ink-soft); }

@media (max-width: 620px) {
  .plan-karte-kopf, .plan-kacheln, .plan-panel { padding-left: 18px; padding-right: 18px; }
  .plan-karte-trenner { margin-left: 18px; margin-right: 18px; }
  .plan-kachel { max-width: none; flex-basis: 100%; }
  .plan-new input[type="text"] { flex-basis: 100%; }
  .plan-new .btn { width: 100%; justify-content: center; }
  .plan-fussleiste { justify-content: stretch; }
  .plan-fussleiste > div { width: 100%; }
}

/* =====================================================================
   Nächste Schritte (August 2026)
   =====================================================================
   Die Folgeseite der beiden ganzheitlichen Schnellchecks. Sie nutzt die
   `plan-*`-Bausteine des Beratungsplans — dieselbe Zweistufigkeit, also
   dieselbe Optik. Ergaenzt werden nur die Themenliste und die Wege, die
   sich daraus ergeben. Die Seite laeuft in beiden Layouts: beim Kunden in
   der schmalen public-form-Huelle, beim Vermittler in der App.

   August 2026, zweite Fassung: eine Karte JE THEMA statt zweier langer
   Listen mit einem Sammelkasten „Dazu passt". Welche Analyse zu welchem
   Thema gehoert, war vorher berechnet, aber nicht zu sehen. */

/* In der Kundenhuelle (800px breit) waere die schmale Spalte daneben zu eng.
   Dort steht die Uebersicht oben, ueber den Karten — erst der Ueberblick,
   dann die Themen im Einzelnen. */
.plan-layout.ist-schmal { grid-template-columns: 1fr; }
.plan-layout.ist-schmal .plan-seite { position: static; order: -1; }
/* Die Karten stehen dort auf weissem Grund und braeuchten sonst eine
   Kante, um ueberhaupt als Karten zu wirken. */
.plan-layout.ist-schmal .plan-karte,
.plan-layout.ist-schmal .plan-karte-schmal { background: var(--v2-bg-alt); }
.plan-layout.ist-schmal .plan-kachel { background: #fff; }

/* Die Zwischenueberschrift vor jeder der beiden Gruppen. */
.ns-abschnitt { padding: 14px 2px 0; }
.ns-abschnitt-titel {
  margin: 0 0 4px; font-family: var(--font-serif); font-weight: 500;
  font-size: 1.5rem; line-height: 1.2; letter-spacing: -.014em; color: var(--v2-ink);
}
.ns-abschnitt-text { margin: 0; max-width: 62ch; font-size: .88rem; line-height: 1.55; color: var(--v2-ink-mute); }

/* Farbiger Streifen links: rot fuer offene, gruen fuer vorhandene Themen —
   dieselbe Bedeutung wie die Ampel im Kompass. */
.ns-karte.ist-offen    { border-left: 3px solid #D64545; }
.ns-karte.ist-erfuellt { border-left: 3px solid #2F8F5F; }
.ns-karte.ist-rest     { border-left: 3px solid var(--v2-line); padding-bottom: 20px; }

/* Die Nummer vor dem Themennamen — Rang bzw. A-Nummer der Norm. */
.ns-nr {
  display: inline-block; padding: 1px 8px; margin-right: 2px;
  border-radius: 100px; background: var(--v2-bg-alt);
  font-family: var(--font-sans, inherit); font-size: .74rem; font-weight: 600;
  color: var(--v2-ink-soft); font-variant-numeric: tabular-nums;
  vertical-align: 3px;
}
.plan-layout.ist-schmal .ns-nr { background: #fff; }

.ns-themen { list-style: none; margin: 0; padding: 0 24px; }
.ns-thema { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--v2-line); }
.ns-thema:last-child { border-bottom: 0; }
.ns-thema-nr {
  flex: 0 0 auto; min-width: 30px; padding: 1px 7px; height: fit-content;
  border-radius: 100px; background: var(--v2-paper, #f4f6fa);
  font-size: .72rem; font-weight: 600; color: var(--v2-ink-soft);
  font-variant-numeric: tabular-nums; text-align: center;
}
.ns-thema-text { min-width: 0; }
.ns-thema-titel { display: block; font-size: .92rem; color: var(--v2-ink); line-height: 1.4; }
.ns-thema-soll { display: block; font-size: .8rem; color: var(--v2-ink-mute); margin-top: 2px; line-height: 1.45; }

/* Personenbezogene Themen: je Person Soll-Wert und Haken. Acht Raenge der
   Norm gelten je Person, mit eigenem Soll und eigenem Haken. Dieselbe Aussage
   wie im Bogen und auf dem Beiblatt (dort `.t-item-person`). */
.ns-personen { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ns-person {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: .82rem; line-height: 1.45; color: var(--v2-ink-mute);
}
.ns-person-name { font-weight: 500; color: var(--v2-ink-2); }
/* Der Status als Marke, nicht als blosser Text: „✓ vorhanden" stand vorher in
   einem kaum unterscheidbaren Grau neben „○ offen". Dieselben Farben wie die
   Pille oben rechts an der Karte (`plan-pille.is-erfasst`), damit beide
   Aussagen im selben Kasten zusammenpassen. */
.ns-person-status {
  margin-left: auto; white-space: nowrap;
  padding: 2px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 500; letter-spacing: .01em;
  background: var(--v2-bg-alt); color: var(--v2-ink-soft);
}
.ns-person.ist-erfuellt .ns-person-status {
  background: var(--v2-sage-soft); color: var(--v2-sage-ink);
}
/* Auch der Name und der Soll-Wert einer abgedeckten Person treten hervor —
   sonst liest man die Zeile trotz gruener Marke als unerledigt. */
.ns-person.ist-erfuellt { color: var(--v2-ink-2); }
.ns-person.ist-erfuellt .ns-person-name { color: var(--v2-ink); }

/* Dieselbe Marke in der Kachel. Sie steht dort, wo gehandelt wird: wer eine
   Person anklickt, sieht ohne Blick nach oben, ob fuer sie schon etwas
   besteht. Der gruene Streifen an der Kante macht das Muster erkennbar,
   bevor man liest — dieselbe Bedeutung wie am linken Rand einer Karte. */
.ns-kachel-status {
  padding: 1px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 500;
  background: var(--v2-bg-alt); color: var(--v2-ink-soft);
}
.ns-kachel-status.ist-erfuellt { background: var(--v2-sage-soft); color: var(--v2-sage-ink); }
/* Inset statt border-left: eine echte Kante wuerde den Inhalt der Kachel um
   drei Pixel verschieben und die Reihe uneben machen. */
.plan-kachel.ist-vorhanden { box-shadow: inset 3px 0 0 var(--v2-sage); }
.plan-kachel.ist-vorhanden.is-aktiv { box-shadow: inset 3px 0 0 var(--brand-accent); }

@media (max-width: 620px) {
  .ns-themen { padding-left: 18px; padding-right: 18px; }
  .ns-abschnitt-titel { font-size: 1.3rem; }
  .ns-person-status { margin-left: 0; }
}

/* ── Schrittfenster ────────────────────────────────────────────────────
   Das grosse Fenster mit Schrittleiste, in dem man sich durchklickt.
   Zuerst fuer den Wert-1914-Rechner im Wohngebaeudebogen gebaut, seit
   August 2026 auch fuer die Ausschreibung. Deshalb steht es hier und nicht
   mehr in `WohngebaeudeRenderer::extraStyles()`: eine Aenderung am Fenster
   soll beide erreichen.

   Nicht zu verwechseln mit `.bk-modal-*` weiter oben. Das ist der kleine
   Bestaetigungsdialog („wirklich loeschen?"), dieses hier ist der gefuehrte
   Ablauf ueber mehrere Schritte.

   ── Die Variablennamen ──────────────────────────────────────────────
   Der Block kam aus `WohngebaeudeRenderer::extraStyles()` und benutzte dort
   `--brand`, `--line`, `--text-muted`, `--text`. Die gibt es nur auf der
   Bogenseite, die eigene Variablen mitbringt. In der App heissen sie anders,
   und ein `var(--brand)` ohne Wert liefert nichts: Der aktive Schritt stand
   dadurch weiss auf weiss und war unsichtbar (14.08.2026 im Browser
   aufgefallen). Jeder Wert hat jetzt zusaetzlich einen festen Rueckfall,
   damit derselbe Block auch ausserhalb der App traegt. */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(26,35,50,.55); z-index:9000; align-items:flex-start; justify-content:center; overflow-y:auto; padding:30px 16px; }
.modal-overlay.show { display:flex; }
/* Radius und Schatten folgen seit August 2026 dem Design: dieselbe Kante
   wie die Karten der Seite darunter, damit das Fenster nicht wie ein
   Fremdkoerper darauf liegt. */
.modal { background:#fff; max-width:880px; width:100%; border-radius:var(--radius-lg,18px); padding:28px 32px; box-shadow:0 24px 60px -20px rgba(27,42,78,.40); }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--color-border,rgba(27,42,78,.10)); }
.modal-head h2 { margin:0; font-size:1.5rem; border:0; padding:0; }
.modal-close { background:none; border:none; font-size:1.4rem; color:var(--color-text-mute,#8C95A8); cursor:pointer; line-height:1; }
.modal-close:hover { color:var(--color-text,#1B2A4E); }
.modal-step-bar { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
/* `wr-schritt` ist der Name aus dem Rechner, `mstep` der allgemeine. Beide
   fuehren zum selben Aussehen, damit der geprueft laufende Rechner nicht
   angefasst werden muss. Keiner der beiden heisst `step`: Damit sucht die
   Bogen-Basisklasse nach Formularschritten. */
.modal-step-bar .mstep,
.modal-step-bar .wr-schritt { font-size:.78rem; padding:5px 12px; background:var(--color-bg-panel,#F2EDE4); border-radius:999px; color:var(--color-text-mute,#8C95A8); font-weight:500; }
.modal-step-bar .mstep.is-active,
.modal-step-bar .wr-schritt.is-active { background:var(--brand-primary,#1B2A4E); color:#FAF7F2; }
/* Erledigt in der Salbeifarbe der Palette statt im alten Gruen: dieselbe
   Bedeutung wie die Statuspille „Angebot liegt vor" — hier ist etwas
   fertig. */
.modal-step-bar .mstep.is-done,
.modal-step-bar .wr-schritt.is-done { background:var(--v2-sage-soft,#DCE6E0); color:var(--v2-sage-ink,#34534A); }
.modal-step { display:none; }
.modal-step.is-active { display:block; }
.modal-foot { display:flex; gap:12px; justify-content:space-between; margin-top:28px; padding-top:18px; border-top:1px solid var(--color-border,rgba(27,42,78,.10)); align-items:center; }
.summary-box { padding:14px 18px; background:rgba(47,143,95,.08); border-left:3px solid #2F8F5F; border-radius:0 6px 6px 0; }
.summary-box .v { font-family:inherit; font-size:1.3rem; color:var(--color-text,#1B2A4E); font-weight:600; letter-spacing:-0.01em; }

/* Ohne diese Regel bleibt ein Knopf mit `hidden` sichtbar: `.btn` setzt
   `display:inline-flex`, und eine Klassenregel schlaegt die eingebaute Regel
   des Browsers fuer das `hidden`-Attribut. Genau daran standen „Weiter" und
   „Ausschreibung anlegen" gleichzeitig im Fenster. Dieselbe Loesung wie bei
   `.plan-weitere[hidden]` weiter oben. */
.btn[hidden] { display: none !important; }

/* ── Ausschreibung: Auswahl im Schrittfenster ──────────────────────────
   Seit August 2026 in derselben Formensprache wie das Verzeichnis: runder
   Rahmen, Initialen-Kachel, Name und Metazeile darunter. Wer im
   Verzeichnis ein Haus sucht und es hier wiederfinden soll, soll es
   wiedererkennen. */
.as-liste { display:grid; gap:8px; max-height:none; }
.as-zeile { display:grid; grid-template-columns:auto auto 1fr; gap:12px; padding:11px 14px; border:1px solid var(--color-border,rgba(27,42,78,.10)); border-radius:var(--radius-md,10px); align-items:center; cursor:pointer; transition:border-color .12s var(--ease), background .12s var(--ease); background:#fff; }
.as-zeile:hover { border-color:var(--brand-primary,#1B2A4E); }
.as-zeile.is-gewaehlt { border-color:var(--brand-primary,#1B2A4E); background:var(--v2-bg,#FAF7F2); }
.as-zeile input[type="checkbox"] { margin:0; }
.as-zeile .as-init {
  width:34px; height:34px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-bg-panel,#F2EDE4); color:var(--v2-ink-2,#2C3E63);
  font-family:var(--font-serif); font-size:.82rem; font-weight:600; letter-spacing:.01em;
}
.as-zeile.is-gewaehlt .as-init { background:var(--brand-primary,#1B2A4E); color:#FAF7F2; }
.as-zeile .as-haus { font-weight:600; font-size:.94rem; display:block; }
.as-zeile .as-detail { font-size:.83rem; color:var(--color-text-mute,#8C95A8); margin-top:2px; display:block; }
.as-nummer { display:grid; grid-template-columns:1fr auto; gap:12px; padding:10px 14px; border:1px solid var(--color-border,rgba(27,42,78,.10)); border-radius:var(--radius-md,10px); align-items:center; margin-bottom:8px; }
.as-nummer select { min-width:200px; }
.as-pruefen { width:100%; border-collapse:collapse; font-size:.88rem; }
.as-pruefen th { text-align:left; font-weight:600; color:var(--color-text-mute,#8C95A8); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:0 8px 8px 0; }
.as-pruefen td { padding:9px 8px 9px 0; border-top:1px solid var(--color-border,rgba(27,42,78,.10)); vertical-align:top; }

/* ── Der Nachrichtenverlauf einer Ausschreibung ────────────────────────
   Eine Zeile je Nachricht, darunter aufklappbar ihr Inhalt. Die Zeile ist
   anklickbar, deshalb der Zeigefinger und der Wechsel beim Ueberfahren —
   ohne beides sieht sie aus wie eine gewoehnliche Tabelle. */
.aus-nachrichten { width:100%; border-collapse:collapse; font-size:.88rem; margin:6px 0 0; }
.aus-zeile { cursor:pointer; border-top:1px solid var(--color-border,rgba(27,42,78,.10)); transition:background .12s; }
.aus-zeile:hover { background:var(--color-bg-panel,#F4F6FA); }
.aus-zeile.ist-offen { background:var(--color-bg-panel,#F4F6FA); }
.aus-zeile td { padding:9px 10px 9px 0; vertical-align:top; }
/* Eingegangene Post faellt auf: Sie ist das, worauf jemand reagieren muss. */
.aus-zeile .aus-richtung { white-space:nowrap; color:var(--color-text-mute,#8C95A8); font-size:.82rem; }
.aus-zeile.ist-eingang .aus-richtung { color:#2F8F5F; font-weight:600; }
.aus-zeile .aus-datum { white-space:nowrap; color:var(--color-text-mute,#8C95A8); font-size:.82rem; }
.aus-zeile .aus-partner { font-size:.82rem; word-break:break-word; }
.aus-zeile .aus-betreff { word-break:break-word; }
/* Die Knoepfe je Nachricht: Lesen, Antworten, Weiterleiten.
   Bis August 2026 standen hier zwei Symbolknoepfe `←` und `→`. Welcher
   welcher war, sagte nur der Tooltip — man musste ihn abwarten, um einen
   Knopf zu treffen, der eine Mail verschickt. Jetzt stehen die Woerter da. */
.aus-zeile-aktionen { white-space:nowrap; text-align:right; }
.aus-zeile-aktionen .btn { margin-left:5px; }
/* Auf schmalen Geraeten brechen die drei Knoepfe um, statt die Zeile zu
   sprengen. */
@media (max-width: 720px) {
  .aus-zeile-aktionen { white-space:normal; }
  .aus-zeile-aktionen .btn { margin:2px 0 2px 5px; }
}

/* Der aufgeklappte Inhalt. */
.aus-inhalt td { padding:4px 0 18px; }

/* Anlagen als Karten statt als Liste: Bei drei Dateien mit langen Namen
   wird eine Aufzaehlung unuebersichtlich, Karten bleiben lesbar und zeigen
   die Groesse gleich mit. */
.aus-anlagen { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
/* Stehen sie ganz oben, sitzen sie direkt unter der Zeile — dort braucht es
   den Abstand nach unten statt nach oben. */
.aus-anlagen.ist-oben { margin:2px 0 14px; }
.aus-anlage-karte { display:inline-flex; align-items:center; gap:9px; padding:8px 13px 8px 10px;
                    border:1px solid var(--color-border,rgba(27,42,78,.10)); border-radius:8px;
                    background:#fff; text-decoration:none; color:var(--color-text,#1B2A4E);
                    max-width:100%; transition:.12s; }
.aus-anlage-karte:hover { border-color:var(--brand-primary,#1B2A4E); background:var(--color-bg-panel,#F4F6FA); }
.aus-anlage-symbol { font-size:1.1rem; flex:none; }
.aus-anlage-text { display:flex; flex-direction:column; min-width:0; }
.aus-anlage-name { font-size:.85rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aus-anlage-groesse { font-size:.75rem; color:var(--color-text-mute,#8C95A8); }

@media (max-width: 640px) {
  /* Auf schmalen Geräten fällt die Datumsspalte weg — sie steht ohnehin im
     aufgeklappten Inhalt, und der Betreff braucht den Platz. */
  .aus-zeile .aus-datum, .aus-zeile .aus-partner { display:none; }
  .aus-anlage-karte { width:100%; }
}

/* Beigefuegte Unterlagen: was mitgeht, mit Summe. Die Summe steht bewusst
   unter der Liste und nicht neben dem Feld — dort liest man sie erst, wenn
   man alle Dateien beisammen hat, und genau dann zaehlt sie. */
.as-dateiliste { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; font-size:.85rem; }
.as-dateiliste li { padding:6px 10px; border-radius:6px; background:rgba(27,42,78,.04); color:var(--color-text,#1B2A4E); }
.as-dateiliste .as-datei-summe { background:none; padding:6px 0 0; color:var(--color-text-mute,#8C95A8); font-size:.82rem; }
.as-dateiliste .as-datei-summe.ist-zuviel { color:#B42318; font-weight:600; }

/* =====================================================================
   Ausschreibung — die Seite im Design vom August 2026
   =====================================================================

   Bis hierher standen diese Regeln als <style>-Block in ausschreibung.php.
   Sie sind mit dem Umbau hierher gezogen, aus demselben Grund wie beim
   akte-Block: Ein Stilblock mitten in einer Seite wird beim naechsten Umbau
   uebersehen, und niemand findet ihn, wenn er sucht, warum etwas anders
   aussieht.

   Drei Regeln sind dabei entfallen, weil ihre Markup-Stellen es sind:
   .aus-angebot (Angebotsformular, am 15.08. entfernt), .aus-anlage (alte
   Anlagenzeile, durch Karten ersetzt) und .aus-aktionen (Aktionsspalte der
   alten Uebersichtstabelle).                                             */

/* --- Das Raster: links die Haeuser, rechts das gewaehlte ------------- */
.aus-raster { display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width: 980px) { .aus-raster { grid-template-columns:1fr; } }

/* --- Die vier Kennzahlen -------------------------------------------- */
.aus-kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:0 0 18px; }
.aus-kachel {
  background:var(--color-surface,#fff); border:1px solid var(--color-border,rgba(27,42,78,.10));
  border-radius:var(--radius-lg,18px); padding:14px 18px; box-shadow:var(--shadow-sm);
}
.aus-kachel .k { font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--color-text-mute,#8C95A8); }
.aus-kachel .v { font-family:var(--font-serif); font-size:1.9rem; line-height:1.15; font-variant-numeric:tabular-nums; }
.aus-kachel .s { font-size:.8rem; color:var(--color-text-mute,#8C95A8); }
.aus-kachel.ist-faellig .v, .aus-kachel.ist-faellig .s { color:var(--v2-rust,#B45A3C); }

/* --- Die Haeuserliste ------------------------------------------------ */
.aus-liste { background:var(--color-surface,#fff); border:1px solid var(--color-border,rgba(27,42,78,.10));
             border-radius:var(--radius-lg,18px); overflow:hidden; box-shadow:var(--shadow-sm); }
.aus-liste-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
                  padding:13px 16px; border-bottom:1px solid var(--color-border,rgba(27,42,78,.10)); }
.aus-liste-kopf .t { font-weight:600; }
.aus-liste-kopf .n { font-size:.79rem; color:var(--color-text-mute,#8C95A8); }

.aus-haus { position:relative; display:block; padding:12px 16px 12px 18px; text-decoration:none;
            color:inherit; border-bottom:1px solid var(--v2-line-soft,rgba(27,42,78,.06)); }
.aus-haus:last-of-type { border-bottom:0; }
.aus-haus:hover { background:var(--v2-bg,#FAF7F2); color:inherit; }
.aus-haus.is-active { background:var(--v2-bg,#FAF7F2); }
.aus-haus.is-active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--brand-accent,#C68F4D); }
.aus-haus-kopf { display:flex; align-items:center; gap:7px; }
.aus-haus-name { font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aus-haus-zeit { margin-left:auto; font-size:.75rem; color:var(--color-text-mute,#8C95A8); white-space:nowrap; }
.aus-haus-meta { margin-top:5px; font-size:.78rem; color:var(--color-text-mute,#8C95A8); }
.aus-haus-unten { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px; }
/* Der Punkt fuer eine Antwort, die noch niemand gesehen hat. Er steht vor dem
   Namen, weil das Auge dort ohnehin anfaengt. */
.aus-neu { width:7px; height:7px; border-radius:50%; background:var(--brand-accent,#C68F4D); flex:none; }

/* --- Statuspillen: fuenf Toene aus Tender::statusTon() --------------- */
.aus-ton { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.74rem;
           font-weight:500; line-height:1.45; max-width:100%; }
.aus-ton-wait  { background:var(--v2-amber-soft,#E8D9C3); color:#7A5224; }
.aus-ton-offer { background:var(--v2-sage-soft,#DCE6E0); color:var(--v2-sage-ink,#34534A); }
/* Die Empfehlung ist der einzige Zustand, in dem eine Entscheidung gefallen
   ist. Gleiche Farbfamilie wie „Angebot liegt vor", aber mit Kante. */
.aus-ton-rec   { background:var(--v2-sage-soft,#DCE6E0); color:var(--v2-sage-ink,#34534A);
                 box-shadow:inset 0 0 0 1px rgba(52,83,74,.28); font-weight:600; }
.aus-ton-no    { background:var(--v2-rust-soft,#F0DED5); color:#76341C; }
/* `neu` = eine Antwort ist da, aber noch niemand hat sie eingestuft. Bewusst
   auffaelliger als `wait`: Hier liegt der Ball beim Vermittler, nicht mehr
   beim Versicherer. */
.aus-ton-neu   { background:var(--v2-sage-soft,#DCE6E0); color:var(--v2-sage-ink,#34534A);
                 font-weight:600; }
.aus-ton-fail  { background:var(--v2-rust-soft,#F0DED5); color:#B42318; font-weight:600;
                 box-shadow:inset 0 0 0 1px rgba(180,35,24,.28); }

/* --- Die Fusszeile mit der Frist ------------------------------------- */
.aus-frist-fuss { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
                  padding:12px 16px; border-top:1px solid var(--color-border,rgba(27,42,78,.10));
                  background:var(--v2-bg,#FAF7F2); font-size:.82rem; }
.aus-frist-fuss.ist-faellig { background:var(--v2-rust-soft,#F0DED5); color:#76341C; }
.aus-frist-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.aus-frist-form input[type=date] { padding:5px 9px; font-size:.82rem; }

/* --- Die rechte Karte ------------------------------------------------ */
.aus-detail-kopf { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
                   flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--color-border,rgba(27,42,78,.10)); }
.aus-detail-name { font-family:var(--font-serif); font-size:1.3rem; letter-spacing:-.012em; }
.aus-detail-meta { margin-top:3px; font-size:.8rem; color:var(--color-text-mute,#8C95A8); word-break:break-word; }
.aus-status select { min-width:280px; max-width:100%; }
.aus-verlauf-kopf { display:flex; align-items:center; justify-content:space-between; gap:12px;
                    flex-wrap:wrap; margin:16px 0 10px; }
.aus-verlauf-kopf .t { font-size:.72rem; font-weight:600; letter-spacing:.13em;
                       text-transform:uppercase; color:var(--color-text-mute,#8C95A8); }

/* --- Aus dem Inline-Block uebernommen -------------------------------- */
.aus-verlauf { padding-top:14px; border-top:1px solid var(--color-border,rgba(27,42,78,.10)); }
.aus-text-kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.aus-feld { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:8px 0; font-size:.88rem; }
.aus-feld dt { color:var(--color-text-mute,#8C95A8); }
.aus-feld dd { margin:0; word-break:break-word; }
.aus-text { white-space:pre-wrap; word-break:break-word; background:var(--color-bg-panel,#F2EDE4);
            padding:14px 16px; border-radius:var(--radius-md,10px); font-size:.86rem;
            line-height:1.55; margin:0; font-family:inherit; }
.aus-versendet { color:var(--v2-sage,#5A7A6E); font-weight:600; }
.aus-faellig { color:var(--v2-rust,#B45A3C); font-weight:600; }
.aus-marke { display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px;
             background:var(--v2-sage-soft,#DCE6E0); color:var(--v2-sage-ink,#34534A);
             font-size:.72rem; font-weight:600; vertical-align:middle; }

/* --- Kopie/Blindkopie: der Aufklapper neben dem An-Feld -------------- */
.aus-kopie > summary {
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:999px; border:1px dashed var(--color-border-strong,rgba(27,42,78,.18));
  font-size:.78rem; color:var(--color-text-soft,#5C6B85); background:none;
}
.aus-kopie > summary::-webkit-details-marker { display:none; }
.aus-kopie > summary:hover { background:var(--color-bg-panel,#F2EDE4); color:var(--color-text,#1B2A4E); }
.aus-kopie[open] > summary { border-style:solid; margin-bottom:10px; }

/* --- Ablegeflaeche fuer Dateien -------------------------------------- */
/* Die Flaeche ist ein Label auf dem vorhandenen <input type=file>. Es gibt
   keinen zweiten Uebertragungsweg: Was hineingezogen wird, landet in
   demselben Feld, das der Knopf auch fuellt. */
.aus-ablage {
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:20px 16px; border:1.5px dashed var(--color-border-strong,rgba(27,42,78,.18));
  border-radius:var(--radius-md,10px); background:var(--v2-bg,#FAF7F2);
  color:var(--color-text-mute,#8C95A8); font-size:.86rem; cursor:pointer; text-align:center;
  transition:border-color .12s var(--ease), background .12s var(--ease);
}
.aus-ablage:hover { border-color:var(--brand-primary,#1B2A4E); color:var(--color-text-soft,#5C6B85); }
.aus-ablage.ist-drueber { border-color:var(--brand-accent,#C68F4D); background:var(--v2-amber-soft,#E8D9C3); color:#7A5224; }

/* --- Das Zitat im Schreibfenster ------------------------------------- */
/* Frueher stand die zitierte Nachricht mit im Textfeld und schob den Cursor
   nach unten weg. Jetzt steht sie darunter und geht trotzdem mit — das Feld
   enthaelt nur, was man selbst schreibt. */
.aus-zitat > summary {
  cursor:pointer; list-style:none; font-size:.8rem; color:var(--color-text-soft,#5C6B85);
  padding:6px 0; user-select:none;
}
.aus-zitat > summary::-webkit-details-marker { display:none; }
.aus-zitat > summary:hover { color:var(--color-text,#1B2A4E); }
.aus-zitat pre {
  white-space:pre-wrap; word-break:break-word; margin:0 0 4px; padding:12px 14px;
  border-left:2px solid var(--color-border,rgba(27,42,78,.10));
  background:var(--v2-bg,#FAF7F2); border-radius:0 var(--radius-md,10px) var(--radius-md,10px) 0;
  font-family:inherit; font-size:.82rem; line-height:1.5; color:var(--color-text-soft,#5C6B85);
  max-height:280px; overflow:auto;
}

/* =====================================================================
   Versicherer-Verzeichnis — die Seite im Design vom August 2026
   =====================================================================

   Auch dieser Block stand bis dahin als <style> in der Seite selbst
   (versicherer.php, Z. 554–599) und ist mit dem Umbau hierher gezogen.

   ── Warum das Verzeichnis grau aussah ────────────────────────────────

   Der alte Block benutzte durchgaengig `var(--line)`, `var(--text-muted)`,
   `var(--brand)` und `var(--bg-soft)`. **Keine dieser vier Variablen gibt
   es in app.css** — sie stammen aus den Bogenseiten, die eigene mitbringen.
   Jeder Wert fiel auf seinen Rueckfall zurueck (#E3E8F0, #5A6678, #F4F6FA),
   und die Seite lief damit auf einer grauen Ersatzpalette statt auf der
   Hausfarbe. Aufgefallen ist es erst beim Umzug.

   Dieselbe Ursache hatte am 14.08.2026 der unsichtbare Schritt im
   Ausschreibungsfenster. Deshalb steht hier jetzt jeder Wert mit dem
   richtigen Namen — `--color-border`, `--color-text-mute`,
   `--brand-primary`, `--color-bg-panel` — und behaelt trotzdem einen
   festen Rueckfall, damit der Block auch ausserhalb der App traegt.     */

/* --- Das Raster ------------------------------------------------------ */
.vz-layout { display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width: 980px) { .vz-layout { grid-template-columns:1fr; } }

/* --- Die linke Spalte ------------------------------------------------ */
.vz-liste { background:var(--color-surface,#fff); border:1px solid var(--color-border,rgba(27,42,78,.10));
            border-radius:var(--radius-lg,18px); overflow:hidden; box-shadow:var(--shadow-sm); }
.vz-liste-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px;
                 padding:13px 16px; border-bottom:1px solid var(--color-border,rgba(27,42,78,.10)); }
.vz-liste-kopf .t { font-weight:600; }

/* Suche, Filter und Alphabet sitzen im Kopf der Liste, nicht ueber der
   ganzen Seite: Sie wirken nur auf die Liste darunter, und das soll man
   sehen. */
.vz-werkzeuge { padding:12px 16px; border-bottom:1px solid var(--color-border,rgba(27,42,78,.10));
                display:grid; gap:10px; }
.vz-suche { display:flex; gap:7px; }
.vz-suche input { flex:1; min-width:0; padding:7px 11px; font-size:.86rem;
                  border-radius:999px; border:1px solid var(--color-border-strong,rgba(27,42,78,.18)); }
.vz-filter { display:flex; gap:5px; flex-wrap:wrap; }
.vz-filter a { padding:4px 11px; border-radius:999px; font-size:.76rem; text-decoration:none;
               background:var(--color-bg-panel,#F2EDE4); color:var(--color-text-soft,#5C6B85); }
.vz-filter a:hover { background:var(--v2-line,rgba(27,42,78,.10)); color:var(--color-text,#1B2A4E); }
.vz-filter a.is-active { background:var(--brand-primary,#1B2A4E); color:#FAF7F2; }

/* Die Alphabetleiste zeigt nur Buchstaben, die vorkommen. Ein „Q", auf das
   nie ein Haus faellt, ist ein totes Ziel. */
.vz-alphabet { display:flex; gap:2px; flex-wrap:wrap; }
.vz-alphabet a { min-width:22px; padding:2px 5px; border-radius:6px; text-align:center;
                 font-size:.75rem; text-decoration:none; color:var(--color-text-mute,#8C95A8); }
.vz-alphabet a:hover { background:var(--color-bg-panel,#F2EDE4); color:var(--color-text,#1B2A4E); }
.vz-alphabet a.is-active { background:var(--brand-primary,#1B2A4E); color:#FAF7F2; font-weight:600; }
.vz-zaehler { display:flex; align-items:baseline; justify-content:space-between; gap:8px;
              padding:8px 16px; font-size:.76rem; color:var(--color-text-mute,#8C95A8);
              border-bottom:1px solid var(--v2-line-soft,rgba(27,42,78,.06)); }

/* --- Ein Eintrag ----------------------------------------------------- */
.vz-eintrag { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px;
              align-items:center; padding:11px 16px 11px 18px; text-decoration:none; color:inherit;
              border-bottom:1px solid var(--v2-line-soft,rgba(27,42,78,.06)); }
.vz-eintrag:last-of-type { border-bottom:0; }
.vz-eintrag:hover { background:var(--v2-bg,#FAF7F2); color:inherit; }
.vz-eintrag.is-active { background:var(--v2-bg,#FAF7F2); }
.vz-eintrag.is-active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
                                background:var(--brand-accent,#C68F4D); }
.vz-eintrag.is-inaktiv .vz-name { color:var(--color-text-mute,#8C95A8); }

/* Die Initialen-Kachel. Bei fuenfzig Haeusern findet das Auge den gesuchten
   Namen daran schneller als an der Zeile. */
.vz-kachel { width:34px; height:34px; border-radius:50%; flex:none;
             display:inline-flex; align-items:center; justify-content:center;
             background:var(--color-bg-panel,#F2EDE4); color:var(--v2-ink-2,#2C3E63);
             font-family:var(--font-serif); font-size:.82rem; font-weight:600; }
.vz-eintrag.is-active .vz-kachel { background:var(--brand-primary,#1B2A4E); color:#FAF7F2; }
.vz-eintrag.is-inaktiv .vz-kachel { opacity:.55; }
.vz-name { display:block; font-weight:600; font-size:.94rem;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vz-meta { display:block; margin-top:3px; font-size:.78rem; color:var(--color-text-mute,#8C95A8); }
.vz-tag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:.7rem;
          background:var(--v2-line,rgba(27,42,78,.10)); color:var(--brand-primary,#1B2A4E);
          margin-right:4px; vertical-align:middle; }
.vz-tag-aus  { background:var(--v2-amber-soft,#E8D9C3); color:#7A5224; }
/* „ohne Abteilung" ist kein Zustand, sondern ein Mangel: An so ein Haus
   laesst sich nicht ausschreiben. Deshalb die Warnfarbe. */
.vz-tag-warn { background:var(--v2-rust-soft,#F0DED5); color:#76341C; }
.vz-hinweis { padding:12px 16px; font-size:.78rem; color:var(--color-text-mute,#8C95A8);
              border-top:1px solid var(--color-border,rgba(27,42,78,.10));
              background:var(--v2-bg,#FAF7F2); }

/* --- Die rechte Spalte ----------------------------------------------- */
.vz-kopf { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
           flex-wrap:wrap; }
.vz-kopf h2 { margin:0; font-family:var(--font-serif); font-size:1.45rem; letter-spacing:-.014em; }
.vz-kopf-meta { display:flex; gap:14px; flex-wrap:wrap; margin-top:5px;
                font-size:.8rem; color:var(--color-text-mute,#8C95A8); }

/* Drei Reiter statt drei Karten untereinander: Abteilungen und Nummern
   pflegt man selten gleichzeitig, und untereinander schoben sie die
   Stammdaten aus dem Bild. */
.vz-reiter { display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 18px;
             border-bottom:1px solid var(--color-border,rgba(27,42,78,.10)); }
.vz-reiter a { padding:8px 14px; font-size:.86rem; text-decoration:none;
               color:var(--color-text-soft,#5C6B85); border-bottom:2px solid transparent;
               margin-bottom:-1px; }
.vz-reiter a:hover { color:var(--color-text,#1B2A4E); }
.vz-reiter a.is-active { color:var(--color-text,#1B2A4E); font-weight:600;
                         border-bottom-color:var(--brand-accent,#C68F4D); }

.vz-daten { display:grid; grid-template-columns:150px minmax(0,1fr); gap:7px 14px;
            margin:12px 0 0; font-size:.9rem; }
.vz-daten dt { color:var(--color-text-mute,#8C95A8); }
.vz-daten dd { margin:0; word-break:break-word; }

/* Die Fusszeile der Stammdaten: links wann und von wem, rechts die Knoepfe. */
.vz-fuss { display:flex; align-items:center; justify-content:space-between; gap:12px;
           flex-wrap:wrap; margin-top:18px; padding-top:14px;
           border-top:1px solid var(--color-border,rgba(27,42,78,.10)); }
.vz-fuss .wann { font-size:.78rem; color:var(--color-text-mute,#8C95A8); }

/* --- Abteilungen und Nummern ----------------------------------------- */
.vz-abt { padding:13px 15px; margin-bottom:9px; border-radius:var(--radius-md,10px);
          border:1px solid var(--color-border,rgba(27,42,78,.10)); background:var(--color-surface,#fff); }
.vz-abt.is-inaktiv { opacity:.62; }
.vz-abt-kopf { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vz-abt-zeile { margin-top:4px; font-size:.86rem; word-break:break-word; }
.vz-abt-aktionen { margin-top:9px; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.vz-sparte { display:inline-block; padding:2px 9px; margin:2px 4px 2px 0; border-radius:999px;
             background:var(--color-bg-panel,#F2EDE4); font-size:.75rem;
             color:var(--color-text-soft,#5C6B85); }

/* Die Rueckfrage vor dem Entfernen steht an Ort und Stelle, nicht in einem
   Fenster ueber der Seite: Man sieht dabei weiter, was man entfernt. */
.vz-bestaetigen { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:9px;
                  padding:9px 12px; border-radius:var(--radius-md,10px);
                  background:var(--v2-rust-soft,#F0DED5); color:#76341C; font-size:.83rem; }

.vz-neu { margin-top:14px; }
.vz-neu > summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
                    padding:7px 14px; border-radius:999px;
                    border:1px dashed var(--color-border-strong,rgba(27,42,78,.18));
                    font-size:.85rem; font-weight:500; color:var(--color-text-soft,#5C6B85); }
.vz-neu > summary::-webkit-details-marker { display:none; }
.vz-neu > summary:hover { background:var(--color-bg-panel,#F2EDE4); color:var(--color-text,#1B2A4E); }
.vz-neu[open] > summary { border-style:solid; margin-bottom:14px; }
.vz-sparten { border:1px solid var(--color-border,rgba(27,42,78,.10));
              border-radius:var(--radius-md,10px); padding:12px 14px; }
.vz-sparten legend { padding:0 6px; font-size:.85rem; color:var(--color-text-mute,#8C95A8); }
.vz-sparten-gruppe { margin-bottom:10px; }
.vz-sparten-gruppe:last-child { margin-bottom:0; }
.vz-sparten-titel { font-size:.8rem; font-weight:600; color:var(--color-text-mute,#8C95A8); margin-bottom:5px; }

/* --- Zwei allgemeine Helfer -----------------------------------------
   Beide standen im Stilblock des Verzeichnisses und wurden dadurch global
   definiert, obwohl sie nach nichts aussahen, das dorthin gehoert. Sie
   sind allgemein genug fuer jedes Formular und stehen deshalb hier. */
.check-inline { display:inline-flex; align-items:center; gap:5px; margin:0 14px 5px 0; font-size:.85rem; }
.req { color:var(--v2-rust,#B45A3C); margin-left:2px; }

/* =====================================================================
   E-Mail-Marketing: Filterblöcke und das Übergabe-Fenster
   =====================================================================
   17.08.2026. Die Fensterhülle selbst (.modal-overlay, .modal-step-bar,
   .as-liste, .as-zeile, .as-pruefen) wird mit dem Ausschreibungs-Fenster
   geteilt und steht weiter oben — hier stehen nur die Ergänzungen, die es
   dort nicht braucht: aufklappbare Filterblöcke, eine Liste mit eigenem
   Bildlauf, gesperrte Zeilen und die Zeile mit Suchfeld und Zähler.        */

/* Aufklappbare Blöcke — im Kriterienformular und für „weitere Kunden".
   Vierzig Haken untereinander sind keine Liste mehr, sondern eine Wand. */
.mk-block { border:1px solid var(--color-border,rgba(27,42,78,.10));
            border-radius:var(--radius-md,10px); margin-bottom:8px; background:#fff; }
.mk-block > summary { cursor:pointer; list-style:none; padding:10px 14px;
                      font-size:.88rem; font-weight:600; display:flex;
                      align-items:center; gap:8px; flex-wrap:wrap;
                      color:var(--color-text,#1B2A4E); }
.mk-block > summary::-webkit-details-marker { display:none; }
.mk-block > summary::before { content:'▸'; color:var(--color-text-mute,#8C95A8);
                              font-size:.8rem; transition:transform .12s var(--ease); }
.mk-block[open] > summary::before { transform:rotate(90deg); }
.mk-block > summary:hover { background:var(--color-bg-panel,#F2EDE4); }
.mk-block[open] > summary { border-bottom:1px solid var(--color-border,rgba(27,42,78,.10)); }
.mk-block-inhalt { padding:10px 14px 12px; }
.mk-block-inhalt .form-check { margin-bottom:4px; }

/* Suchfeld, Alle-Kästchen und Zähler in einer Zeile über der Liste. */
.mk-werkzeuge { display:flex; gap:14px; align-items:center; flex-wrap:wrap;
                margin:12px 0 10px; }
.mk-werkzeuge input[type="search"] { flex:1; min-width:180px; margin:0; }
.mk-alle { margin:0; font-size:.86rem; font-weight:600; white-space:nowrap; }
.mk-zaehler { font-size:.83rem; color:var(--color-text-mute,#8C95A8);
              white-space:nowrap; font-variant-numeric:tabular-nums; }
.mk-zaehler.ist-leer { color:var(--v2-rust,#B45A3C); }

/* Eigener Bildlauf: Bei 300 Empfängern schiebt die Liste sonst den
   Weiter-Knopf aus dem Fenster, und man sucht ihn unter der Seite. */
.mk-liste { max-height:46vh; overflow-y:auto; padding-right:4px; }

/* Gesperrte Zeilen. Sie werden bewusst GEZEIGT und nicht weggelassen:
   „Warum steht Herr Meier nicht in der Liste?" ist genau die Frage, die
   diese Seite beantworten muss. Das Kästchen trägt zusätzlich `disabled`,
   die Sperre wirkt also nicht nur optisch. */
.mk-zeile.ist-gesperrt { background:var(--color-bg-panel,#F2EDE4); opacity:.72;
                         cursor:not-allowed; }
.mk-zeile.ist-gesperrt:hover { border-color:var(--color-border,rgba(27,42,78,.10)); }
.mk-zeile.ist-gesperrt .as-init { background:transparent;
                                  border:1px dashed var(--color-border-strong,rgba(27,42,78,.18));
                                  color:var(--color-text-mute,#8C95A8); }
.mk-grund { color:var(--v2-rust,#B45A3C); font-weight:500; }

@media (max-width:640px) {
  .mk-liste { max-height:none; }
  .mk-werkzeuge { gap:8px; }
  .mk-werkzeuge input[type="search"] { min-width:0; width:100%; }
}

/* Der Zeit-Regler im E-Mail-Marketing.
   Regler und Beschriftung stehen in einer Zeile: Ein Regler ohne Zahl daneben
   sagt nicht, wo er steht, und die Zahl darunter wäre beim Ziehen im Blick
   verloren. Die Zahl ist tabellarisch gesetzt, damit die Zeile beim Ziehen
   nicht springt. */
.mk-regler { display:flex; align-items:center; gap:14px; }
.mk-regler input[type="range"] { flex:1; min-width:120px; margin:0; accent-color:var(--brand-primary,#1B2A4E); }
.mk-regler output { font-size:.92rem; font-weight:600; white-space:nowrap;
                    font-variant-numeric:tabular-nums; min-width:8.5em;
                    color:var(--color-text,#1B2A4E); }
.mk-regler output.ist-aus { font-weight:400; color:var(--color-text-mute,#8C95A8); }

@media (max-width:640px) {
  .mk-regler { flex-wrap:wrap; gap:8px; }
  .mk-regler output { min-width:0; }
}


/* ===================================================================
   RISIKOLANDSCHAFT (27.09.2026, Masse nach dem Entwurf)

   Die 51 Finanzthemen eines Betriebs nach DIN 77235, in der Gewerbeakte
   und im Kundenportal. Markup: templates/partials/risikolandschaft.php,
   risikolandschaft_thema.php und risikolandschaft_schublade.php.

   Alle Masse und Farben stammen woertlich aus
   `Gewerbekunde Risikolandschaft v3.dc.html` (Spalten und Kacheln, Zeile
   283-318; Leiste, Zeile 252-280) und `Kundenakte v4 Risikolandschaft.dc.html`
   (Schublade). Die Farben des Entwurfs sind dieselben, die app.css schon
   fuehrt: #B45A3C ist --v2-rust, #C68F4D --v2-amber, #5A7A6E --v2-sage.

   ── Zwei Grenzen ────────────────────────────────────────────────────
   Die Klassenfarbe ist je Thema verschieden und kann deshalb nicht in
   einer statischen Regel stehen; PHP schreibt sie als --rl-farbe an die
   Kachel. Und `--brand-*` wird hier nur GELESEN, nie gesetzt:
   Branding::cssVars() schreibt diese Variablen inline auf <body>, eine
   Zuweisung hier wuerde davon ueberschrieben — oder, mit !important, das
   Branding des Maklers aushebeln.
   =================================================================== */

.rl { --rl-karte: #F2EEE6; --rl-kante: rgba(27,42,78,.08); --rl-grau: #8C95A8; }

/* ── Kopf ─────────────────────────────────────────────────────────── */
.rl-kopf { display: flex; justify-content: space-between; align-items: flex-start;
           gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.rl-titel { font-family: var(--font-serif); font-weight: 400; font-size: 28px;
            letter-spacing: -.02em; line-height: 1.12; margin: 6px 0 4px; }
.rl-sub { font-size: 13.5px; color: var(--v2-ink-soft); margin: 0; }

.rl-umschalter { display: flex; gap: 4px; background: var(--v2-bg-alt);
                 border-radius: 999px; padding: 4px; flex-shrink: 0; }
.rl-um-btn { white-space: nowrap; padding: 6px 14px; border-radius: 999px; border: 0;
             background: transparent; color: var(--v2-ink); font: inherit; font-size: 13px;
             cursor: pointer; }
.rl-um-btn.is-active { background: #fff; box-shadow: 0 1px 3px rgba(27,42,78,.10); }

/* ── Grundlage ────────────────────────────────────────────────────── */
.rl-grundlage { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
                margin-bottom: 12px; }
.rl-grundlage-l { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
                  color: var(--v2-ink-soft); }
.rl-basis { white-space: nowrap; padding: 6px 12px; border-radius: 999px;
            border: 1px solid rgba(27,42,78,.12); background: #fff; font-size: 13px;
            display: inline-flex; gap: 8px; align-items: center; color: var(--v2-ink); }
a.rl-basis:hover { border-color: var(--v2-ink-soft); }

/* ── Leiste ───────────────────────────────────────────────────────── */
.rl-leiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
             margin-bottom: 14px; }
.rl-zahl { white-space: nowrap; flex-shrink: 0; padding: 6px 12px 6px 8px;
           border-radius: 999px; border: 1px solid var(--rl-kante); background: #fff;
           color: var(--v2-ink); font: inherit; font-size: 13px; cursor: pointer;
           display: flex; gap: 8px; align-items: center; transition: border-color .15s; }
.rl-zahl:hover { border-color: var(--v2-ink-soft); }
.rl-zahl.is-active { border-color: var(--v2-ink); background: var(--v2-ink); color: #FAF7F2; }
.rl-punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rl-zahl-n { font-size: 12px; color: var(--rl-grau); }
.rl-zahl.is-active .rl-zahl-n { color: rgba(250,247,242,.7); }

.rl-trenner { width: 1px; height: 22px; background: rgba(27,42,78,.12); margin: 0 4px; }

.rl-schalter { white-space: nowrap; flex-shrink: 0; display: flex; gap: 7px;
               align-items: center; border: 0; background: transparent; padding: 0 4px;
               cursor: pointer; font: inherit; font-size: 13px; color: var(--v2-ink-2); }
.rl-kaestchen { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
                border: 1.5px solid rgba(27,42,78,.28); background: #fff;
                display: flex; align-items: center; justify-content: center; }
.rl-schalter[aria-pressed="true"] .rl-kaestchen { background: var(--v2-ink);
                border-color: var(--v2-ink); }
.rl-schalter[aria-pressed="true"] .rl-kaestchen::after { content: "✓"; color: #fff;
                font-size: 10px; line-height: 1; }

/* ── Spalten ──────────────────────────────────────────────────────── */
.rl-rahmen { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.rl-spalten { display: grid; gap: 10px; align-items: start;
              grid-template-columns: repeat(var(--rl-spalten, 5), minmax(200px, 1fr));
              min-width: calc(var(--rl-spalten, 5) * 212px); }
.rl-spalte { background: var(--rl-karte); border-radius: 14px; padding: 12px 10px 10px;
             display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rl-spalte-kopf { display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 6px; }
.rl-spalte-oben { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
                  color: var(--rl-grau); }
.rl-spalte-name { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.25; }
.rl-spalte-meta { font-size: 12px; color: var(--v2-ink-soft); }
.rl-balken { display: flex; height: 5px; border-radius: 3px; overflow: hidden;
             margin-top: 3px; background: rgba(27,42,78,.08); }
.rl-verborgen { font-size: 12px; color: var(--rl-grau); padding: 2px 4px; }
.rl-spalte-leer { border: 1.5px dashed rgba(27,42,78,.16); border-radius: 10px;
                  padding: 16px; text-align: center; font-size: 12.5px; color: var(--rl-grau); }

/* ── Themenkachel ─────────────────────────────────────────────────── */
.rl-thema { background: #fff; border: 1px solid var(--rl-kante);
            border-left: 4px solid var(--rl-farbe, #8C95A8); border-radius: 10px;
            padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
            cursor: pointer; transition: transform .2s, box-shadow .2s; }
.rl-thema:hover { transform: translateY(-1px);
                  box-shadow: 0 8px 22px -12px rgba(27,42,78,.25); }
.rl-thema:focus-visible { outline: 2px solid var(--v2-ink); outline-offset: 2px; }
.rl-thema.is-offen { box-shadow: 0 0 0 2px var(--v2-ink); }

.rl-meta { display: flex; gap: 6px; align-items: center; min-width: 0;
           font-size: 11.5px; color: var(--rl-grau); white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
.rl-kl { color: var(--rl-farbe, #8C95A8); font-weight: 600; }
/* `text-transform` ausdruecklich zuruecksetzen: app.css:91 macht aus JEDEM
   h4 eine Versalzeile. Der Titel einer Kachel ist aber ein Name. */
.rl-name { font-family: var(--font-serif); font-weight: 400; font-size: 15px;
           line-height: 1.3; margin: 0; text-transform: none;
           letter-spacing: -.01em; color: var(--v2-ink); }
.rl-ana { font-size: 12.5px; color: var(--v2-ink-soft); margin: 0; }

/* ── Kopfzeile der Privatkachel ───────────────────────────────────────
   Der Entwurf setzt dort die laufende Nummer in der Serifenschrift, die
   Gruppe gesperrt in Kapitaelchen und rechts die Statuspille. Die Farbe der
   Pille kommt aus dem Zustand und reist deshalb als Inline-Stil. */
.rl-nr { font-family: var(--font-serif); font-size: 15px; color: var(--rl-grau); }
.rl-gruppe-l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
               color: var(--rl-grau); overflow: hidden; text-overflow: ellipsis; }
.rl-st { margin-left: auto; font-size: 11px; font-weight: 500; padding: 2px 8px;
         border-radius: 999px; white-space: nowrap; }
.rl-suffix { font-size: 12.5px; color: var(--rl-grau); font-family: var(--font-sans); }

/* ── Personen (in der Schublade) ──────────────────────────────────────
   Acht Raenge der DIN 77230 gelten je Person. „Fuer Person 1 erfuellt, fuer
   Person 2 offen" ist eine Aussage, die man sehen koennen muss. */
.rl-personen { display: flex; flex-direction: column; gap: 6px; }
.rl-person { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
             border-radius: 8px; background: #fff; border: 1px solid var(--v2-line); }
.rl-person.is-ok { border-color: rgba(90,122,110,.35); background: #FBFCFB; }
.rl-person-name { font-size: 13px; font-weight: 600; }
.rl-person-soll { font-size: 12.5px; color: var(--v2-ink-soft); }
.rl-person .rl-pille { margin-left: auto; }

.rl-flaggen { display: flex; gap: 5px; flex-wrap: wrap; }
.rl-flagge { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.rl-flagge.is-aus { background: #E8ECF5; color: #2C3E63; }
.rl-flagge.is-angepasst { border: 1px dashed rgba(27,42,78,.3); color: var(--v2-ink-soft); }
/* „2 Maßnahmen · 1 umgesetzt" — Maße aus dem Entwurf. */
.rl-flagge.is-massnahmen { background: #E6EEE9; color: #34534a; }
.rl-flagge.is-ungeprueft { background: #F0DED5; color: #8A3D22; }

/* ── „Stand nach DIN 77235" — der Kompass der Kundensicht ─────────────
   Der Entwurf eroeffnet die Portalseite damit: links die drei Quoten,
   rechts die Ringe. */
.kg { display: flex; justify-content: space-between; align-items: center;
      gap: 24px; flex-wrap: wrap; }
.kg-text { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.kg-liste { list-style: none; margin: 0; padding: 0; display: flex;
            flex-direction: column; gap: 9px; }
.kg-zeile { display: flex; align-items: baseline; gap: 10px; }
.kg-punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
            align-self: center; }
.kg-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kg-name strong { font-weight: 500; font-size: 14px; }
.kg-was { font-size: 12.5px; color: var(--rl-grau); }
.kg-wert { text-align: right; display: flex; flex-direction: column; gap: 1px;
           white-space: nowrap; }
.kg-wert strong { font-family: var(--font-serif); font-weight: 400; font-size: 20px; }
.kg-klein, .kg-keins { font-size: 11.5px; color: var(--rl-grau); }
.kg-fuss, .kg-leer { margin: 0; font-size: 12.5px; color: var(--rl-grau); }
.kg-ringe { flex-shrink: 0; }
@media (max-width: 560px) { .kg-ringe { margin: 0 auto; } }

/* ── Mitwirken: die beiden Haekchen je Zugang ─────────────────────────
   Der Entwurf setzt sie beim Einladen und laesst sie spaeter aendern —
   Vertrauen waechst und schrumpft. */
.pk-rechte { border: 1px solid rgba(27,42,78,.14); border-radius: 10px;
             padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
             margin: 4px 0 10px; }
.pk-rechte legend { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
                    color: var(--rl-grau); padding: 0 4px; }
.pk-recht { display: flex; align-items: center; gap: 8px; font-size: 13px;
            font-weight: 400; cursor: pointer; }
.pk-recht input { margin: 0; }
.pk-zeile-rechte { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                   margin: 6px 0; }

/* ── Der Kopf der Kundensicht ─────────────────────────────────────────
   Der Entwurf begrüßt und stellt den Berater daneben. */
.pt-mandant { display: flex; justify-content: space-between; align-items: flex-start;
              gap: 20px; flex-wrap: wrap; }
.pt-mandant-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 64ch; }
.pt-gruss { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
            color: var(--v2-amber, #C68F4D); }
.pt-mandant-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55;
                  color: var(--v2-ink-soft, #2C3E63); }
.pt-mandant-firma { font-size: 12.5px; color: var(--rl-grau, #8C95A8); margin-top: 6px; }

.pt-berater { display: flex; gap: 12px; align-items: flex-start;
              background: rgba(255,255,255,.08); border-radius: 12px; padding: 12px 16px; }
.pt-berater-kreis {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16); font-size: 14px; letter-spacing: .04em;
}
.pt-berater-text { display: flex; flex-direction: column; gap: 2px; }
.pt-berater-rolle { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.pt-berater-name { font-size: 15px; }
.pt-berater-link { font-size: 12.5px; text-decoration: underline; opacity: .85; }
.pt-berater-link:hover { opacity: 1; }

@media (max-width: 640px) {
    .pt-berater { width: 100%; }
}

/* ── „Fristen, Nachweise und Verlauf" ─────────────────────────────────
   Zweispaltig wie im Entwurf: links die Aufgaben, rechts der Verlauf.
   Kartenrahmen wörtlich: 1px rgba(27,42,78,.10), 3px farbige Kante links,
   10px Radius, 11/14px Polsterung. */
.ag { display: flex; flex-direction: column; gap: 18px; }
.ag-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ag-titel { margin: 0; font-family: var(--font-serif); font-weight: 400;
            font-size: 1.5rem; letter-spacing: -.016em; }
.ag-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--v2-ink-soft); max-width: 62ch; }
.ag-zahlen { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-zahl { font-size: 12.5px; padding: 4px 11px; border-radius: 999px;
           background: var(--v2-bg-alt); color: var(--v2-ink-soft); white-space: nowrap; }
.ag-zahl.is-spaet { background: #FBE9E9; color: #9A3030; }
.ag-zahl.is-bald  { background: #F7EDDC; color: #7a5224; }

.ag-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.ag-liste, .ag-verlauf { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.ag-gruppe { display: flex; flex-direction: column; gap: 7px; }
.ag-gruppe-kopf {
    display: flex; align-items: center; gap: 8px; background: none; border: 0;
    padding: 0; font: inherit; cursor: pointer; text-align: left; color: inherit;
}
.ag-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--ag-farbe, #8C95A8); flex-shrink: 0; }
.ag-gruppe-name { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
                  color: var(--ag-farbe, var(--rl-grau)); }
.ag-gruppe-zahl { font-size: 12px; color: var(--rl-grau); }
.ag-gruppe-schalter { font-size: 12px; color: var(--v2-ink-soft);
                      border-bottom: 1px solid var(--v2-line); margin-left: auto; }
.ag-gruppe-leib { display: flex; flex-direction: column; gap: 7px; }
.ag-gruppe-leib[hidden] { display: none; }

.ag-zeile {
    background: #fff; border: 1px solid rgba(27,42,78,.10);
    border-left: 3px solid var(--ag-farbe, rgba(27,42,78,.12));
    border-radius: 10px; padding: 11px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.ag-zeile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-zeile-oben { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ag-art { font-size: 11px; padding: 2px 8px; border-radius: 999px;
          background: var(--v2-bg-alt); color: var(--v2-ink-soft); white-space: nowrap; }
.ag-thema { font-size: 11.5px; color: var(--rl-grau);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-name { font-size: 14px; color: var(--v2-ink); }
.ag-meta { font-size: 12px; color: var(--rl-grau); }
.ag-zeile-tun { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Mit `.ag-zeile-tun` davor — sonst gewinnt `input[type=text]`. */
.ag-zeile-tun .ag-notiz, .ag-zeile-tun .ag-kz-wert {
    width: auto; flex: 1; min-width: 140px; font: inherit; font-size: 13px; padding: 7px 10px;
    border: 1px solid rgba(27,42,78,.16); border-radius: 8px; background: #fff; color: var(--v2-ink);
}
.ag-stand { font-size: 12px; color: var(--rl-grau); min-height: 1em; }

/* „Unterlage" — der Dateiknopf des Entwurfs. Das echte Feld liegt unsichtbar
   darüber, damit der Knopf aussieht wie ein Knopf und nicht wie ein
   Formularelement des Betriebssystems. */
.ag-datei {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(27,42,78,.16); border-radius: 999px; padding: 6px 12px;
    font-size: 12.5px; color: var(--v2-ink-soft); cursor: pointer; background: #fff;
    max-width: 220px;
}
.ag-datei:hover { border-color: var(--v2-ink-soft); }
.ag-datei.is-gewaehlt { border-color: var(--v2-sage); color: var(--v2-ink); background: #E6EEE9; }
.ag-datei-feld { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ag-datei-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-datei-text::before { content: "📎"; margin-right: 5px; }

.ag-laeufe { list-style: none; margin: 6px 0 0; padding: 0; display: flex;
             flex-direction: column; gap: 3px; font-size: 12px; color: var(--v2-ink-soft); }
.ag-datei-link { color: var(--v2-ink); text-decoration: underline; }
.ag-klein { color: var(--rl-grau); font-size: 11.5px; }

.ag-abschnitt-titel { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
                      color: var(--rl-grau); }
.ag-log { display: grid; grid-template-columns: 10px 1fr; gap: 9px; align-items: start; }
.ag-log-punkt { width: 8px; height: 8px; border-radius: 50%;
                background: var(--v2-ink); margin-top: 5px; }
.ag-log-punkt.is-kunde { background: var(--v2-amber); }
.ag-log-text { display: block; font-size: 13.5px; color: var(--v2-ink); line-height: 1.45; }
.ag-log-meta { display: block; font-size: 11.5px; color: var(--rl-grau); margin-top: 2px; }

@media (max-width: 560px) {
    .ag-spalten { grid-template-columns: 1fr; }
    .ag-zeile-tun > * { flex-basis: 100%; }
}

/* Seit dem 27.09.2026 ist das Panel einspaltig: Der Entwurf kennt neben
   dem Ablauf keine zweite Spalte. */
.akte-panel-grid.is-einspaltig { grid-template-columns: 1fr; display: block; }
/* Der Entwurf gibt der Karte max-width:1080px. Mit 720 blieb rechts ein
   leeres Drittel stehen, das nach einer fehlenden Spalte aussah. */
.akte-panel-grid.is-einspaltig .akte-panel-new { max-width: 1080px; }
.akte-new-head { align-items: flex-start; flex-wrap: wrap; }
.akte-new-head .akte-list-more { flex-basis: 100%; margin-top: 6px; }

/* ── Der geführte Anlege-Ablauf ───────────────────────────────────────
   Maße aus `Gewerbekunde Risikolandschaft v3.dc.html`: dreispaltiges
   Raster, je ein 3px-Balken über Beschriftung und gewähltem Wert. */
.akte-segmente {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-bottom: 14px;
}
.akte-segment {
    display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
    background: none; border: 0; padding: 0; font: inherit; text-align: left;
    cursor: pointer; min-width: 0;
}
.akte-segment:disabled { cursor: default; }
.akte-segment-balken {
    height: 3px; width: 100%; border-radius: 2px;
    background: rgba(27,42,78,.12);
}
.akte-segment.is-aktiv .akte-segment-balken,
.akte-segment.is-fertig .akte-segment-balken { background: var(--v2-ink); }
.akte-segment-name {
    font-size: 10.5px; letter-spacing: .1em; color: var(--rl-grau);
}
.akte-segment.is-aktiv .akte-segment-name { color: var(--v2-ink); }
.akte-segment-wert {
    font-size: 12.5px; color: var(--v2-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}

.akte-schritt { display: flex; flex-direction: column; gap: 8px; }
.akte-schritt[hidden] { display: none; }
.akte-wahl-liste { display: flex; flex-direction: column; gap: 7px; max-height: 360px; overflow-y: auto; }

.akte-wahl {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; text-align: left; font: inherit; cursor: pointer;
    background: none; border: 0; padding: 0; color: inherit; min-width: 0;
}
.akte-wahl-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.akte-wahl-pfeil { color: var(--rl-grau); font-size: 15px; flex-shrink: 0; }
.akte-wahl:hover .akte-wahl-pfeil { color: var(--v2-ink); }
.akte-variant.is-gewaehlt { border-color: var(--v2-ink); }
.akte-wahl-weiter { margin-top: 6px; align-self: flex-start; }

/* Die Einordnung nach der Norm — der Zwischenschritt bei Risikoanalysen. */
.akte-din { display: flex; flex-direction: column; gap: 12px; }
.akte-din[hidden] { display: none; }
.akte-din-thema {
    border: 1px solid rgba(27,42,78,.12); border-radius: 10px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 9px; background: #fff;
}
.akte-din-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.akte-din-code { font-size: 11.5px; color: var(--rl-grau); letter-spacing: .04em; }
.akte-din-titel { font-family: var(--font-serif); font-size: 15px; }
.akte-din-feld { display: flex; flex-direction: column; gap: 4px;
                 font-size: 12.5px; font-weight: 600; color: var(--v2-ink-soft); }
.akte-din-feld select, .akte-din-feld input {
    font: inherit; font-weight: 400; font-size: 13.5px; padding: 8px 10px;
    border: 1px solid rgba(27,42,78,.16); border-radius: 8px;
    background: #fff; color: var(--v2-ink); width: 100%;
}
.akte-din-stand { font-size: 12px; color: var(--rl-grau); margin-right: auto; }

.akte-flow-feld {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--v2-ink-soft);
}
.akte-flow-feld input {
    font: inherit; font-weight: 400; font-size: .92rem; padding: 10px 12px;
    border: 1px solid rgba(27,42,78,.16); border-radius: 8px;
    background: #fff; color: var(--v2-ink); width: 100%;
}
.akte-flow-fuss {
    display: flex; gap: 8px; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; margin-top: 6px;
}

@media (max-width: 560px) {
    .akte-segmente { grid-template-columns: 1fr; gap: 6px; }
    .akte-flow-fuss { justify-content: stretch; }
    .akte-flow-fuss .btn { flex: 1; justify-content: center; }
}
.rl-flagge.is-vomkunden  { background: #E8D9C3; color: #7a5224; }

/* ── Eigene Risiken ───────────────────────────────────────────────────
   Die Spalte trägt im Entwurf #F6EEE2 statt #F2EEE6 — ein kleiner
   Unterschied, der sagt: Das hier kommt nicht aus der Norm. */
.rl-spalte.is-eigen { background: #F6EEE2; }
.rl-thema.is-eigen { border-left-style: dashed; }

.rl-eigen-fuss { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.rl-eigen-auf {
    align-self: stretch; border: 1.5px dashed rgba(27,42,78,.2); background: transparent;
    color: var(--v2-ink-soft); border-radius: 10px; padding: 9px 12px;
    font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.rl-eigen-auf:hover { border-color: var(--v2-ink-soft); color: var(--v2-ink); }
.rl-eigen-auf[hidden] { display: none; }

.rl-eigen-form {
    background: #fff; border: 1px solid rgba(27,42,78,.12); border-radius: 12px;
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.rl-eigen-form[hidden] { display: none; }
.rl-eigen-feld { display: flex; flex-direction: column; gap: 5px;
                 font-size: 12.5px; font-weight: 600; color: var(--v2-ink-soft); }
.rl-eigen-feld input, .rl-eigen-feld textarea {
    font: inherit; font-weight: 400; font-size: 13.5px; padding: 9px 11px;
    border: 1px solid rgba(27,42,78,.16); border-radius: 8px;
    background: #fff; color: var(--v2-ink); width: 100%;
}
.rl-eigen-feld textarea { resize: vertical; min-height: 60px; }
.rl-eigen-klassen, .rl-eigen-stufen { display: flex; gap: 6px; flex-wrap: wrap; }
.rl-eigen-punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rl-chip .rl-eigen-punkt { margin-right: 6px; vertical-align: -1px; }
.rl-eigen-fuss-zeile, .rl-eigen-weg-zeile {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.rl-eigen-stand, .rl-eigen-aktion-stand {
    font-size: 12px; color: var(--rl-grau); min-height: 1em;
}
.rl-eigen-aktion { display: flex; flex-direction: column; gap: 9px; }
.rl-eigen-aktion[hidden] { display: none; }
.rl-flagge.is-spaet { background: var(--v2-rust); color: #fff; }

/* ── Schublade ────────────────────────────────────────────────────── */
.rl-schleier { position: fixed; inset: 0; background: rgba(27,42,78,.28);
               z-index: 59; }
.rl-schleier[hidden] { display: none; }

.rl-status { padding: 18px 24px 0; display: flex; flex-direction: column; gap: 8px; }
.rl-status[hidden] { display: none; }
.rl-status-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.rl-status-btn { padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13px;
                 cursor: pointer; border: 1px solid var(--v2-line);
                 background: #fff; color: var(--v2-ink-soft); }
.rl-status-btn:hover { border-color: var(--rl-st-farbe, var(--v2-ink-soft)); }
.rl-status-btn.is-active { background: var(--rl-st-grund, #F2EDE4);
                           color: var(--rl-st-farbe, var(--v2-ink));
                           border-color: var(--rl-st-farbe, var(--v2-ink)); font-weight: 500; }
.rl-status-btn[disabled] { opacity: .5; cursor: default; }
.rl-status-stand { font-size: 12px; color: var(--rl-grau); min-height: 1em; }

/* ── Von der Norm abweichen ───────────────────────────────────────────
   Der Abschnitt sitzt zwischen Bedarfsstatus und Fragen: erst sagen, wie es
   steht, dann gegebenenfalls von der Norm abweichen, dann arbeiten. */
.rl-prio { padding: 14px 24px 0; display: flex; flex-direction: column; gap: 10px; }
.rl-prio[hidden] { display: none; }
.rl-prio-auf { align-self: flex-start; border: 1px solid var(--v2-line); background: #fff;
               color: var(--v2-ink); border-radius: 999px; padding: 6px 14px;
               font: inherit; font-size: 12.5px; cursor: pointer; }
.rl-prio-auf:hover { border-color: var(--v2-ink-soft); }
.rl-prio-jetzt { background: var(--v2-bg-alt); border-radius: 10px; padding: 12px 14px;
                 display: flex; flex-direction: column; gap: 6px; }
.rl-prio-jetzt[hidden] { display: none; }
.rl-prio-grund-text { font-size: 13px; line-height: 1.55; color: var(--v2-ink);
                      margin: 0; font-style: italic; }
.rl-prio-form { display: flex; flex-direction: column; gap: 10px; }
.rl-prio-form[hidden] { display: none; }
.rl-prio-feld { display: flex; flex-direction: column; gap: 4px;
                font-size: 12.5px; font-weight: 600; }
.rl-prio-feld select, .rl-prio-feld input, .rl-prio-feld textarea {
    font: inherit; font-weight: 400; font-size: 13.5px; padding: 8px 10px;
    border: 1px solid rgba(27,42,78,.16); border-radius: 8px; background: #fff;
    color: var(--v2-ink); width: 100%; }
.rl-prio-feld textarea { resize: vertical; min-height: 64px; }
.rl-prio-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rl-prio-stand { font-size: 12px; color: var(--rl-grau); min-height: 1em; }
.rl-prio-weg { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 2px; }

.rl-textknopf { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px;
                color: var(--v2-ink-soft); cursor: pointer;
                border-bottom: 1px solid var(--v2-line); }
.rl-textknopf:hover { color: var(--v2-ink); border-bottom-color: var(--v2-ink-soft); }
.rl-textknopf.is-warn { color: var(--v2-rust); }
.rl-textknopf.is-warn:hover { border-bottom-color: var(--v2-rust); }
.rl-textknopf[hidden] { display: none; }

.rl-norm-zurueck { white-space: nowrap; }

/* ── Orientierungsgröße ───────────────────────────────────────────────
   Der Maßstab, an dem das Thema gemessen wird. Steht vor dem
   Bedarfsstatus: „gedeckt oder nicht" ohne ihn ist eine Ratefrage. */
.rl-orient { padding: 14px 24px 0; display: flex; flex-direction: column; gap: 5px; }
.rl-orient[hidden] { display: none; }
.rl-orient-text {
    margin: 0; font-size: 14px; line-height: 1.5; color: var(--v2-ink);
    background: var(--v2-bg-alt); border-radius: 10px; padding: 10px 12px;
    border-left: 3px solid var(--v2-amber);
}

/* ── Prävention & Schutzmaßnahmen ─────────────────────────────────────
   Der Block sitzt zwischen den Fragen und den Vorgängen: erst sagen, wie es
   steht, dann was zu tun ist, dann was schon läuft. */
.rl-mass { display: flex; flex-direction: column; gap: 9px; }
.rl-mass[hidden] { display: none; }
.rl-mass-liste { display: flex; flex-direction: column; gap: 7px; }

.rl-mass-zeile-eintrag {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 11px 12px; border: 1px solid rgba(27,42,78,.10); border-radius: 10px;
    background: #fff;
}
.rl-mass-zeile-eintrag.is-fertig { background: var(--v2-bg-alt); }

.rl-mass-haken {
    width: 20px; height: 20px; border-radius: 6px;
    border: 1.5px solid rgba(27,42,78,.3); background: #fff; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; cursor: pointer; flex-shrink: 0; margin-top: 1px; padding: 0;
    font-family: inherit; line-height: 1;
}
.rl-mass-haken.is-an { background: var(--v2-sage); border-color: var(--v2-sage); }
.rl-mass-haken:disabled { cursor: default; opacity: .55; }

.rl-mass-mitte { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rl-mass-name { font-size: 14px; color: var(--v2-ink); }
.rl-mass-meta { font-size: 12px; color: var(--rl-grau); }
.rl-mass-notiz { font-size: 12.5px; color: var(--v2-ink-soft); font-style: italic; }

.rl-mass-herkunft {
    font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    align-self: flex-start;
}
.rl-mass-herkunft.is-makler { background: #E8ECF5; color: #2C3E63; }
.rl-mass-herkunft.is-kunde  { background: #E8D9C3; color: #7a5224; }

.rl-mass-weg {
    border: 0; background: transparent; color: var(--rl-grau);
    cursor: pointer; font-size: 15px; padding: 0 2px; line-height: 1;
    font-family: inherit;
}
.rl-mass-weg:hover { color: var(--v2-rust); }

/* Das Erfassungsformular. Gestrichelt, damit es sich von den Einträgen
   darüber abhebt, ohne wie ein weiterer Eintrag auszusehen. */
.rl-mass-form {
    border: 1.5px dashed rgba(27,42,78,.16); border-radius: 12px;
    padding: 12px; display: flex; flex-direction: column; gap: 9px;
    background: #FBF9F5;
}
.rl-mass-form input[type="text"],
.rl-mass-form input[type="date"] {
    font: inherit; font-size: 13.5px; padding: 8px 10px;
    border: 1px solid rgba(27,42,78,.16); border-radius: 8px;
    background: #fff; color: var(--v2-ink); min-width: 0;
}
.rl-mass-form .rl-mass-titel { font-size: 14px; padding: 9px 11px; width: 100%; }

.rl-mass-wahl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rl-mass-hinweis { flex-basis: 100%; font-size: 11.5px; color: var(--rl-grau); }

.rl-chip {
    padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12.5px;
    border: 1px solid rgba(27,42,78,.14); background: #fff; color: var(--v2-ink);
    cursor: pointer;
}
.rl-chip.is-klein { padding: 4px 10px; font-size: 12px; }
.rl-chip[aria-pressed="true"] { background: var(--v2-ink); color: #FAF7F2; border-color: var(--v2-ink); }

.rl-mass-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rl-mass-wer { flex: 1; min-width: 110px; }
.rl-mass-frist { width: 140px; }
.rl-mass-stand { font-size: 12px; color: var(--rl-grau); min-height: 1em; }
/* Der Hinweis unter Freitextfeldern: keine Namen, keine Gesundheitsdaten. */
.rl-frei-hinweis { margin: 0; font-size: 11.5px; color: var(--rl-grau); }
.rl-mass-nurlesen { margin: 0; }

@media (max-width: 480px) {
    .rl-mass-zeile > * { flex-basis: 100%; }
    .rl-mass-frist { width: auto; }
}

.rl-abschnitt { display: flex; flex-direction: column; gap: 8px; }
.rl-abschnitt-titel { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
                      color: var(--v2-ink-soft); }

.rl-schublade { position: fixed; top: 0; right: 0; bottom: 0; width: 420px;
                max-width: 92vw; background: #fff; border-left: 1px solid var(--v2-line);
                box-shadow: -24px 0 60px -30px rgba(27,42,78,.35);
                display: flex; flex-direction: column; z-index: 60; overflow-y: auto; }
.rl-schublade[hidden] { display: none; }
.rl-schublade-kopf { display: flex; justify-content: space-between; align-items: flex-start;
                     gap: 12px; padding: 22px 24px 16px;
                     border-bottom: 1px solid var(--v2-line-soft); }
.rl-schublade-augenbraue { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
                           color: var(--v2-amber); }
.rl-schublade-titel { font-family: var(--font-serif); font-weight: 400; font-size: 23px;
                      line-height: 1.15; margin: 6px 0 4px; }
.rl-schublade-sub { font-size: 13px; color: var(--v2-ink-soft); margin: 0; }
.rl-schublade-zu { border: 0; background: none; font-size: 22px; line-height: 1;
                   color: var(--v2-ink-mute); cursor: pointer; padding: 0 2px; }
.rl-schublade-zu:hover { color: var(--v2-ink); }
.rl-schublade-leib { padding: 18px 24px 26px; display: flex; flex-direction: column;
                     gap: 18px; }

/* ── Vorgänge (in der Schublade) ──────────────────────────────────── */
.rl-vorgaenge { display: flex; flex-direction: column; gap: 6px; }

/* [hidden] schlaegt sonst nicht durch: Eine eigene display-Regel ueberschreibt
   die Vorgabe des Browsers. Ohne diese Zeilen stehen Formular und Vorgaenge
   offen in der Kachel — der Fehler faellt erst auf, wenn alles gleichzeitig
   dasteht, und dann sieht es aus wie der alte Stand. */
.rl-fragen[hidden], .rl-vorgaenge[hidden], .rl-personen[hidden], .rl-thema[hidden],
.rl-spalte[hidden], .rl-verborgen[hidden],
.rl-leiste [hidden], [data-rl-ansicht][hidden] { display: none; }
.rl-vorgang { display: flex; justify-content: space-between; align-items: center;
              gap: 10px; padding: 9px 12px; border-radius: 8px; background: #fff;
              border: 1px solid var(--v2-line); color: inherit; }
a.rl-vorgang:hover { border-color: var(--v2-ink-soft); }
.rl-vorgang-titel { font-size: 13px; font-weight: 600; }
.rl-leerzeile { font-size: 12.5px; color: var(--rl-grau); margin: 0; }

.rl-pille { font-size: 11px; padding: 2px 8px; border-radius: 999px;
            text-decoration: none; display: inline-block; white-space: nowrap; }
.rl-pille.is-gruen { background: #DCE6E0; color: #34534a; }
.rl-pille.is-blau  { background: #E8ECF5; color: #2C3E63; }
.rl-pille.is-kunde { background: #E3E8F1; color: #1E4785; }
.rl-pille.is-offen { background: #E8D9C3; color: #7a5224; }

/* ── Fragen (in der Schublade) ────────────────────────────────────── */
.rl-fragen { display: flex; flex-direction: column; gap: 12px; }
.rl-feld { display: flex; flex-direction: column; gap: 4px; }
.rl-feld label { font-size: 12.5px; font-weight: 600; margin: 0; }
.rl-feld select, .rl-feld input { font: inherit; font-size: 13.5px; padding: 8px 10px;
                                  border: 1px solid rgba(27,42,78,.16); border-radius: 8px;
                                  background: #fff; color: var(--v2-ink); width: 100%; }
.rl-feld select:focus, .rl-feld input:focus { outline: none; border-color: var(--v2-ink-soft); }
.rl-hint { font-size: 11.5px; color: var(--rl-grau); }
.rl-fragen-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                  padding-top: 4px; }
.rl-btn { border: 1px solid rgba(27,42,78,.14); background: #fff; color: var(--v2-ink);
          border-radius: 999px; padding: 8px 18px; font: inherit; font-size: 13px;
          cursor: pointer; }
.rl-btn.is-primaer { background: var(--v2-ink); border-color: var(--v2-ink); color: #FAF7F2; }
.rl-fragen-stand { font-size: 12px; color: var(--rl-grau); min-height: 1em; }

/* ── Fuß ──────────────────────────────────────────────────────────────
   Der Abschnitt „Weitere Vorgänge“ ist seit dem 15.10.2026 entfallen (Leon),
   mit ihm seine Regeln (Gruppe, Zeilen, Titel, Meta). */
.rl-fuss { font-size: 12px; color: var(--rl-grau); margin: 12px 0 0; }

.rl-leer { margin-bottom: 14px; }

@media (max-width: 900px) {
  .rl-schublade { width: 100%; max-width: 100%; }
  .rl-kopf { flex-direction: column; }
}

/* ===================================================================
   GEWERBEAKTE: FIRMENPROFIL UND KONTEXT (26.09.2026)

   Drei Bausteine aus dem Entwurf „Gewerbekunde Risikolandschaft v3":
   das Firmenprofil im Kopf, die Zugaenge zur Risikolandschaft, der
   rechtliche Hintergrund und das Aenderungsprotokoll.

   Markup: templates/partials/gewerbe_profil.php und gewerbe_kontext.php.
   Praefixe gp- und gk-, kollisionsfrei zu akte-, rl-, plan-, ns-.
   =================================================================== */

.gp-profil { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gp-chip { font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
           background: #F2EEE6; color: #5C6B85; white-space: nowrap; }
.gp-web { text-decoration: none; }
.gp-web:hover { text-decoration: underline; }

.gk-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
              gap: 14px; margin-top: 16px; }
.gk-block { padding: 18px 20px; margin-bottom: 0; }
.gk-block .eyebrow { margin-bottom: 10px; }
.gk-block p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: #5C6B85; }
.gk-block p:last-child { margin-bottom: 0; }

.gk-leer { font-style: italic; }
.gk-hinweis { font-size: 11.5px; color: #8C95A8; }

.gk-recht strong { color: var(--v2-ink); font-weight: 600; }

.gk-liste { list-style: none; margin: 0; padding: 0; display: flex;
            flex-direction: column; gap: 9px; }

.gk-zugang, .gk-log { display: flex; flex-direction: column; gap: 2px; }
.gk-zugang-name, .gk-log-text { font-size: 12.5px; font-weight: 600; color: var(--v2-ink); }
.gk-zugang-meta, .gk-log-meta { font-size: 11.5px; color: #8C95A8; }
.gk-zugang.is-gesperrt .gk-zugang-name { text-decoration: line-through; color: #8C95A8; }

/* Zugaenge verwalten. Die Knoepfe sind absichtlich klein und textnah: Sie
   stehen an einer Person, nicht an einem Abschnitt, und ein Knopf in
   Knopfgroesse wuerde die Liste zerreissen. */
.gk-zugang-tun { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.gk-zugang-tun form { margin: 0; }
.gk-zugang-knopf { background: none; border: 0; padding: 0; font: inherit;
                   font-size: 11.5px; color: var(--v2-ink-soft); cursor: pointer;
                   border-bottom: 1px solid var(--v2-line); }
.gk-zugang-knopf:hover { color: var(--v2-ink); border-bottom-color: var(--v2-ink-soft); }
.gk-zugang-knopf.is-warn { color: var(--v2-rust); }
.gk-zugang-knopf.is-warn:hover { border-bottom-color: var(--v2-rust); }

.gk-einladen { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v2-line-soft); }
.gk-einladen > summary { font-size: 12px; color: var(--v2-ink-soft); cursor: pointer; }
.gk-einladen > summary:hover { color: var(--v2-ink); }
.gk-einladen-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.gk-einladen-form label { display: flex; flex-direction: column; gap: 4px;
                          font-size: 11.5px; color: var(--v2-ink-mute); }
.gk-einladen-form input, .gk-einladen-form select {
    font: inherit; font-size: 13px; padding: 7px 10px;
    border: 1px solid var(--v2-line); border-radius: 8px; background: #fff;
    color: var(--v2-ink); }
.gk-einladen-form input:focus, .gk-einladen-form select:focus {
    outline: none; border-color: var(--v2-ink-soft); }
.gk-einladen-form .btn { align-self: flex-start; }

@media (max-width: 720px) {
  .gk-spalten { grid-template-columns: 1fr; }
  .gk-zugang-tun { gap: 14px; }
}



/* ===================================================================
   DAS KUNDENPORTAL (26.09.2026)

   Vier Praefixe, kollisionsfrei zu akte-, rl-, gp-, gk-, plan-, ns-:
     pa-  die Anmeldung (templates/layout/portal_auth.php)
     pt-  die Huelle des angemeldeten Portals (layout/portal.php)
     pw-  die Mandantenauswahl (public/portal/index.php)
     pk-  die Akte selbst (public/portal/akte.php)

   Die Marken-Variablen (--brand-*) schreibt Branding::cssVars() INLINE auf
   <body>. Hier werden sie gelesen, nie gesetzt — ein `body{}` oder ein
   `!important` an dieser Stelle huebelte das Branding des Maklers aus.
   =================================================================== */

/* ── Anmeldung ────────────────────────────────────────────────────── */

.pa-shell { min-height: 100vh; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            padding: 40px 16px; background: var(--v2-bg); }

.pa-card { width: 100%; max-width: 420px; background: #fff;
           border: 1px solid var(--v2-line); border-radius: 16px;
           padding: 32px 30px; }

.pa-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.pa-mark span { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px;
                font-weight: 600; color: var(--v2-ink); }

.pa-card h1 { font-size: 23px; margin: 0 0 6px; }
.pa-card .sub { font-size: 13px; color: var(--v2-ink-soft); margin: 0 0 22px; line-height: 1.55; }

.pa-nebenweg { margin: 16px 0 0; text-align: center; font-size: 12.5px; }
.pa-hinweis { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--v2-line-soft);
              font-size: 11.5px; line-height: 1.6; color: var(--v2-ink-mute); }

.pa-fuss { margin-top: 22px; font-size: 11.5px; color: var(--v2-ink-mute);
           display: flex; gap: 8px; }
.pa-fuss a { color: inherit; }

/* ── Huelle ───────────────────────────────────────────────────────── */

.pt-shell { min-height: 100vh; display: flex; flex-direction: column;
            background: var(--v2-bg); }

.pt-kopf { background: #fff; border-bottom: 1px solid var(--v2-line); }
.pt-kopf-innen { max-width: 1180px; margin: 0 auto; padding: 14px 24px;
                 display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.pt-haus { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pt-haus img { max-height: 30px; max-width: 150px; width: auto; }
.pt-haus-name { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px;
                font-weight: 600; color: var(--v2-ink); overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }

.pt-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px;
             flex-wrap: wrap; font-size: 12px; }
.pt-rolle { padding: 3px 10px; border-radius: 999px; background: var(--v2-bg-alt);
            color: var(--v2-ink-soft); font-size: 11.5px; white-space: nowrap; }
.pt-wechsel { font-size: 12px; }
.pt-wer { color: var(--v2-ink-mute); max-width: 190px; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }

.pt-ab { margin: 0; }
.pt-ab-knopf { background: none; border: 1px solid var(--v2-line); border-radius: 999px;
               padding: 5px 14px; font: inherit; font-size: 12px; cursor: pointer;
               color: var(--v2-ink-soft); }
.pt-ab-knopf:hover { border-color: var(--v2-ink-soft); color: var(--v2-ink); }

.pt-mandant { max-width: 1180px; margin: 0 auto; padding: 4px 24px 22px; }
.pt-mandant h1 { font-size: 30px; margin: 4px 0 0; }

.pt-inhalt { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 24px 50px; }

.pt-fuss { border-top: 1px solid var(--v2-line); background: #fff;
           font-size: 11.5px; color: var(--v2-ink-mute); }
.pt-fuss > span { display: block; }
.pt-fuss { padding: 16px 24px; display: flex; gap: 14px; flex-wrap: wrap;
           justify-content: space-between; }
.pt-fuss a { color: inherit; }

/* ── Mandantenauswahl ─────────────────────────────────────────────── */

.pw-kopf { margin-bottom: 26px; }
.pw-kopf h1 { font-size: 27px; margin: 4px 0 6px; }
.pw-sub { font-size: 13px; color: var(--v2-ink-soft); margin: 0; }

.pw-haus { margin-bottom: 26px; }
.pw-haus-name { font-size: 12px; font-weight: 600; letter-spacing: .06em;
                text-transform: uppercase; color: var(--v2-ink-mute);
                margin: 0 0 10px; }

.pw-liste { list-style: none; margin: 0; padding: 0; display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.pw-karte { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px;
            background: #fff; border: 1px solid var(--v2-line); border-left: 4px solid var(--brand-primary);
            border-radius: 12px; text-decoration: none; }
.pw-karte:hover { border-color: var(--v2-ink-soft); }
.pw-karte-name { font-family: 'Source Serif 4', Georgia, serif; font-size: 16px;
                 font-weight: 600; color: var(--v2-ink); }
.pw-karte-rolle { font-size: 12px; color: var(--v2-ink-soft); }
.pw-karte-meta { font-size: 11px; color: var(--v2-ink-mute); }

/* ── Akte ─────────────────────────────────────────────────────────── */

.pk-anfang { margin-bottom: 20px; }
.pk-anfang h2 { font-size: 20px; margin: 4px 0 10px; }
.pk-anfang p { font-size: 13px; line-height: 1.6; color: var(--v2-ink-soft); margin: 0 0 10px; }
.pk-anfang p:last-child { margin-bottom: 0; }

.pk-fusszeile { margin-top: 26px; }
/* Zugaenge fuer Dritte. Nur der Betrieb sieht diesen Abschnitt. */
.pk-dritte { margin-top: 26px; }
.pk-dritte h2 { font-size: 20px; margin: 4px 0 8px; }
.pk-dritte-sub { font-size: 12.5px; line-height: 1.6; color: var(--v2-ink-soft); margin: 0 0 14px; }
.pk-leer { font-size: 12.5px; font-style: italic; color: var(--v2-ink-mute); margin: 0; }

.pk-liste { list-style: none; margin: 0; padding: 0; display: flex;
            flex-direction: column; gap: 10px; }
.pk-zeile { display: flex; flex-direction: column; gap: 2px; }
.pk-zeile-name { font-size: 13px; font-weight: 600; color: var(--v2-ink); }
.pk-zeile-meta { font-size: 11.5px; color: var(--v2-ink-mute); }
.pk-zeile.is-gesperrt .pk-zeile-name { text-decoration: line-through; color: var(--v2-ink-mute); }
.pk-zeile-tun { margin: 2px 0 0; }

.pk-knopf { background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px;
            color: var(--v2-ink-soft); cursor: pointer;
            border-bottom: 1px solid var(--v2-line); }
.pk-knopf:hover { color: var(--v2-ink); border-bottom-color: var(--v2-ink-soft); }
.pk-knopf.is-warn { color: var(--v2-rust); }
.pk-knopf.is-warn:hover { border-bottom-color: var(--v2-rust); }

.pk-einladen { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--v2-line-soft); }
.pk-einladen > summary { font-size: 12.5px; color: var(--v2-ink-soft); cursor: pointer; }
.pk-einladen > summary:hover { color: var(--v2-ink); }
.pk-einladen-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
                    max-width: 380px; }
.pk-einladen-form label { display: flex; flex-direction: column; gap: 4px;
                          font-size: 11.5px; color: var(--v2-ink-mute); }
.pk-einladen-form input, .pk-einladen-form select {
    font: inherit; font-size: 13px; padding: 7px 10px;
    border: 1px solid var(--v2-line); border-radius: 8px; background: #fff;
    color: var(--v2-ink); }
.pk-einladen-form input:focus, .pk-einladen-form select:focus {
    outline: none; border-color: var(--v2-ink-soft); }
.pk-einladen-form .btn { align-self: flex-start; }
.pk-hinweis { font-size: 11.5px; line-height: 1.6; color: var(--v2-ink-mute); margin: 0; }

.pk-fusszeile p { font-size: 12.5px; line-height: 1.6; color: var(--v2-ink-soft); margin: 6px 0 0; }
.pk-fusszeile p.pk-fuss-mute { color: var(--v2-ink-mute); font-size: 11.5px; }

@media (max-width: 720px) {
  .pt-kopf-innen { padding: 12px 16px; }
  .pt-mandant { padding: 4px 16px 18px; }
  .pt-mandant h1 { font-size: 23px; }
  .pt-inhalt { padding: 20px 16px 40px; }
  .pt-rechts { width: 100%; margin-left: 0; }
  .pw-liste { grid-template-columns: 1fr; }
  .pa-card { padding: 26px 20px; }
}


/* =====================================================================
   Frühwarnsystem, Kostenrechnung und „Neues Thema" im Portal (27.09.2026)
   Maße und Farben aus den Entwürfen der Gewerbeakte (v3) und des Portals.
   ===================================================================== */

/* ── Der Punkt auf der Kachel ─────────────────────────────────────────── */
.rl-fwpunkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-left: auto; }
.rl-fwpunkt[hidden] { display: none; }

/* ── Die Reiter der Schublade ─────────────────────────────────────────── */
.rl-reiter { display: flex; gap: 18px; padding: 0 24px; border-bottom: 1px solid var(--v2-line-soft); }
.rl-reiter-knopf {
    border: 0; background: none; font: inherit; font-size: 13.5px; padding: 11px 0 10px;
    color: var(--v2-ink-mute); border-bottom: 2px solid transparent; cursor: pointer;
}
.rl-reiter-knopf[aria-selected="true"] { color: var(--v2-ink); font-weight: 600; border-bottom-color: var(--v2-ink); }

/* Umgeschaltet wird über ein Attribut an der Schublade. Die Kinder bleiben,
   wo sie sind — Maßnahmen und eigenes Risiko wandern beim Öffnen schon. */
.rl-schublade[data-rl-reiter="ov"] > .rl-fw,
.rl-schublade[data-rl-reiter="ov"] > .rl-tcor { display: none; }
.rl-schublade[data-rl-reiter="rfs"] > :not(.rl-schublade-kopf):not(.rl-reiter):not(.rl-fw),
.rl-schublade[data-rl-reiter="tcor"] > :not(.rl-schublade-kopf):not(.rl-reiter):not(.rl-tcor) { display: none; }

/* ── Früherkennung ────────────────────────────────────────────────────── */
.rl-fw { padding: 18px 24px 26px; display: flex; flex-direction: column; gap: 18px; }
.rl-fw[hidden] { display: none; }
.rl-fw-schritt { display: flex; flex-direction: column; gap: 10px; }
.rl-fw-kopf { display: flex; gap: 10px; align-items: center; }
.rl-fw-nr {
    width: 24px; height: 24px; border-radius: 50%; background: var(--v2-ink); color: #fff;
    font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rl-fw-kopftext { display: flex; flex-direction: column; }
.rl-fw-titel { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--v2-ink-soft); }
.rl-fw-unter { font-size: 13px; color: var(--v2-ink-mute); }
.rl-fw-feld {
    padding: 11px 13px; border: 1px solid rgba(27,42,78,.16); border-radius: 10px; background: #fff;
    color: var(--v2-ink); font: inherit; font-size: 14px; line-height: 1.5; resize: vertical;
}
.rl-fw-wer-zeile { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* `.rl-fw` davor: Die allgemeine Regel `input[type=text]` (Zeile ~258) ist
   sonst spezifischer als eine einzelne Klasse und setzt Breite und
   Innenabstand zurück. */
.rl-fw .rl-fw-wer {
    flex: 1; min-width: 150px; width: auto; padding: 7px 10px; border: 1px solid rgba(27,42,78,.16);
    border-radius: 8px; font: inherit; font-size: 13px; color: var(--v2-ink); background: #fff;
}
.rl-fw-feldtext {
    margin: 0; font-size: 13.5px; color: #2C3E63; line-height: 1.5;
    background: #FAF7F2; border-radius: 10px; padding: 10px 12px;
}
.rl-fw-wertext { margin: 0; font-size: 12.5px; color: var(--v2-ink-soft); }
.rl-fw-feldtext[hidden], .rl-fw-wertext[hidden] { display: none; }

.rl-fw-liste, .rl-fw-grenzen { display: flex; flex-direction: column; gap: 10px; }
.rl-fw-karte {
    border: 1px solid var(--v2-line); border-radius: 12px; padding: 12px 13px;
    display: flex; flex-direction: column; gap: 9px;
}
.rl-fw-karte-kopf { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.rl-fw-karte-name { font-size: 14px; font-weight: 500; }
.rl-fw .rl-fw-name {
    flex: 1; min-width: 0; width: auto; padding: 6px 9px; border: 1px solid transparent; border-radius: 7px;
    background: #FAF7F2; color: var(--v2-ink); font: inherit; font-size: 14px; font-weight: 500;
}
.rl-fw .rl-fw-name:focus { border-color: rgba(27,42,78,.2); background: #fff; }
.rl-fw .rl-fw-einheit {
    width: 110px; padding: 6px 9px; border: 1px solid rgba(27,42,78,.12); border-radius: 7px;
    background: #fff; color: var(--v2-ink-soft); font: inherit; font-size: 12.5px;
}
.rl-fw-ampel { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rl-fw-ampel-punkt { width: 9px; height: 9px; border-radius: 50%; }
.rl-fw-karte-unten { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.rl-fw-linie { display: flex; gap: 3px; align-items: flex-end; height: 30px; }
.rl-fw-linie-balken { width: 8px; border-radius: 2px; display: block; }
.rl-fw-stand-wert { display: flex; flex-direction: column; }
.rl-fw-letzter { font-size: 15px; font-weight: 600; }
.rl-fw-klein { font-size: 11.5px; color: var(--v2-ink-mute); }
.rl-fw-luecke { flex: 1; }
.rl-fw-eingabe { display: flex; gap: 6px; align-items: center; }
.rl-fw .rl-fw-wert {
    width: 110px; padding: 7px 9px; border: 1px solid rgba(27,42,78,.16); border-radius: 8px;
    background: #fff; color: var(--v2-ink); font: inherit; font-size: 13px;
}
.rl-btn.is-klein { padding: 6px 12px; font-size: 12.5px; }
.rl-fw .rl-fw-wert:disabled { background: #F7F5F0; color: var(--v2-ink-mute); }
.rl-btn:disabled { opacity: .45; cursor: default; }
.rl-fw-messer { position: relative; height: 12px; border-radius: 6px; background: #EEF0F4; }
.rl-fw-messer-fuell { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; opacity: .85; transition: width .4s; }
.rl-fw-messer-tol, .rl-fw-messer-ein { position: absolute; top: -4px; bottom: -4px; width: 2px; }
.rl-fw-messer-tol { background: #E8A53E; }
.rl-fw-messer-ein { background: #D64545; }
.rl-fw-grenz-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--v2-ink-soft); }
.rl-fw-grenze { display: flex; gap: 6px; align-items: center; margin: 0; }
.rl-fw-grenz-marke { width: 8px; height: 8px; border-radius: 2px; }
.rl-fw-grenze.is-tol .rl-fw-grenz-marke { background: #E8A53E; }
.rl-fw-grenze.is-ein .rl-fw-grenz-marke { background: #D64545; }
.rl-fw .rl-fw-grenz-wert {
    width: 64px; padding: 5px 7px; border: 1px solid rgba(27,42,78,.16); border-radius: 7px;
    font: inherit; font-size: 13px; color: var(--v2-ink);
}
.rl-fw-archiv { display: flex; flex-direction: column; gap: 6px; }
.rl-fw-archiv[hidden], .rl-fw-archiv-liste[hidden] { display: none; }
.rl-fw-archiv-auf { align-self: flex-start; }
.rl-fw-archiv-liste { display: flex; flex-direction: column; gap: 6px; }
.rl-fw-archiv-zeile {
    display: flex; justify-content: space-between; gap: 8px; align-items: center;
    padding: 8px 11px; border-radius: 9px; background: #F7F5F0; font-size: 13px; color: var(--v2-ink-soft);
}
.rl-fw-archiv-text { display: flex; flex-direction: column; }
.rl-fw-archiv-name { color: var(--v2-ink); }
.rl-fw-bib { display: flex; gap: 6px; flex-wrap: wrap; }
.rl-chip.is-gestrichelt { border-style: dashed; border-color: rgba(27,42,78,.25); color: #2C3E63; }
.rl-fw-eigen-auf { align-self: flex-start; background: #FAF7F2; border-style: dashed; }
.rl-fw-eigen {
    border: 1.5px dashed rgba(27,42,78,.16); border-radius: 12px; padding: 12px;
    display: flex; flex-direction: column; gap: 8px; background: #FBF9F5;
}
.rl-fw-eigen[hidden] { display: none; }
.rl-fw-eigen-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rl-fw-eigen-zeile input, .rl-fw-eigen-zeile select {
    font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid rgba(27,42,78,.16);
    border-radius: 8px; background: #fff; color: var(--v2-ink); min-width: 0;
}
.rl-fw-e-name { flex: 1; }
.rl-fw-e-einheit { width: 110px; }
.rl-fw-e-tol, .rl-fw-e-ein { width: 90px; }
.rl-fw-bericht {
    background: #FAF7F2; border-radius: 12px; padding: 13px 15px;
    display: flex; flex-direction: column; gap: 8px;
}
.rl-fw-bericht .rl-hint { margin: 0; }
.rl-fw-turnus { display: flex; gap: 6px; flex-wrap: wrap; }
.rl-fw-stand { font-size: 12px; color: var(--v2-ink-mute); min-height: 1em; }

/* ── Kosten der Absicherung ───────────────────────────────────────────── */
.rl-tcor { padding: 18px 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.rl-tcor[hidden] { display: none; }
.rl-tcor-kopf { display: flex; flex-direction: column; gap: 4px; }
.rl-tcor-sub { margin: 0; font-size: 13.5px; color: #2C3E63; line-height: 1.5; }
.rl-tcor-urteil { border-radius: 12px; padding: 13px 15px; font-size: 14px; line-height: 1.5; font-weight: 500; }
.rl-tcor-warnungen { display: flex; flex-direction: column; gap: 8px; }
.rl-tcor-warnungen:empty { display: none; }
.rl-tcor-warnung {
    background: #FBE9E9; border: 1.5px solid #D64545; color: #9A3030; border-radius: 12px;
    padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start;
}
.rl-tcor-warn-zeichen {
    width: 22px; height: 22px; border-radius: 50%; background: #D64545; color: #fff; font-weight: 700;
    font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rl-tcor-warn-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.5; }
.rl-tcor-warn-titel { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
.rl-tcor-balken { display: flex; gap: 18px; align-items: flex-end; padding: 6px 4px 0; }
.rl-tcor-saeule { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rl-tcor-saeule.is-blass { opacity: .55; }
.rl-tcor-summe { font-family: var(--font-serif); font-size: 17px; }
.rl-tcor-stapel {
    width: 100%; max-width: 120px; display: flex; flex-direction: column-reverse;
    border-radius: 6px; overflow: hidden; min-height: 4px;
}
.rl-tcor-seg { display: block; transition: height .4s; }
.rl-tcor-saeule-label { font-size: 12.5px; color: var(--v2-ink-soft); }
.rl-tcor-legende { display: flex; flex-direction: column; gap: 4px; }
.rl-tcor-leg-zeile { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #2C3E63; }
.rl-tcor-leg-farbe { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.rl-tcor-leg-label { flex: 1; }
.rl-tcor-leg-wert { font-variant-numeric: tabular-nums; }
.rl-tcor-gruppe { display: flex; flex-direction: column; gap: 8px; }
.rl-tcor-feld { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; margin: 0; }
.rl-tcor-was { display: flex; flex-direction: column; gap: 1px; }
.rl-tcor-label { font-size: 13.5px; color: var(--v2-ink); }
.rl-tcor-hinweis { font-size: 11.5px; color: var(--v2-ink-mute); }
.rl-tcor-eingabe {
    display: flex; align-items: center; border: 1px solid rgba(27,42,78,.16); border-radius: 8px;
    background: #fff; padding-right: 9px;
}
.rl-tcor-eingabe input {
    flex: 1; min-width: 0; padding: 8px 9px; border: 0; background: transparent; color: var(--v2-ink);
    font: inherit; font-size: 13.5px; text-align: right; outline: none;
}
.rl-tcor-einheit { font-size: 12px; color: var(--v2-ink-mute); white-space: nowrap; }
.rl-tcor-tipp {
    margin: 0; font-size: 12.5px; color: var(--v2-ink-soft); line-height: 1.5;
    background: #FAF7F2; border-radius: 10px; padding: 11px 13px;
}
.rl-tcor-stand { font-size: 12px; color: var(--v2-ink-mute); min-height: 1em; }

/* ── Der Abschnitt „Frühwarnsystem" ───────────────────────────────────── */
.fw { display: flex; flex-direction: column; gap: 16px; }
.fw-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fw-titel { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; letter-spacing: -.015em; }
.fw.is-kunde .fw-titel { font-size: 21px; }
.fw-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--v2-ink-soft); }
.fw-zahlen { display: flex; gap: 8px; flex-wrap: wrap; }
.fw-zahl {
    display: flex; gap: 8px; align-items: center; padding: 7px 13px; border-radius: 999px;
    background: #fff; border: 1px solid var(--v2-line); font-size: 13px; white-space: nowrap;
}
.fw-zahl b { font-weight: 600; }
.fw-zahl-punkt { width: 10px; height: 10px; border-radius: 50%; }
.fw-stufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.fw-stufe {
    background: #fff; border: 1px solid var(--v2-line); border-radius: 12px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.fw-stufe-nr { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v2-amber); }
.fw-stufe-titel { font-size: 14px; font-weight: 500; }
.fw-stufe-text { font-size: 12.5px; color: var(--v2-ink-mute); }
.fw-tabelle[hidden], .fw-leer[hidden] { display: none; }
.fw-leer { margin: 0; padding: 18px; text-align: center; font-size: 13.5px; color: var(--v2-ink-mute); }

/* Kundenakte: eine Tabelle, wie im Entwurf. */
.fw:not(.is-kunde) .fw-tabelle { background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; overflow-x: auto; }
.fw-tabellenkopf, .fw:not(.is-kunde) .fw-zeile {
    display: grid; min-width: 880px;
    grid-template-columns: 28px minmax(140px, 1fr) minmax(170px, 1.2fr) 130px 80px 100px 90px 100px;
    gap: 12px; padding: 12px 20px; align-items: center;
}
.fw-tabellenkopf { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v2-ink-mute);
                   border-bottom: 1px solid var(--v2-line-soft); }
.fw-zeile {
    width: 100%; text-align: left; border: 0; background: #fff; font: inherit; color: var(--v2-ink);
    cursor: pointer; font-size: 14px;
}
.fw:not(.is-kunde) .fw-zeile { border-bottom: 1px solid var(--v2-line-soft); }
.fw:not(.is-kunde) .fw-zeile:hover { background: #FBF9F5; }
.fw-zeile-punkt { width: 12px; height: 12px; border-radius: 50%; }
.fw-zeile-thema { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-zeile-ind { color: #2C3E63; }
.fw-zeile-wer, .fw-zeile-grenzen, .fw-zeile-turnus { color: var(--v2-ink-soft); font-size: 13px; }
.fw-zeile-wert { font-weight: 600; white-space: nowrap; }
.fw-zeile .rl-fw-linie { height: 22px; }
.fw-zeile .rl-fw-linie-balken { width: 7px; }
.fw:not(.is-kunde) .fw-zeile-ampel { display: none; }

/* Portal: Karten mit farbiger Kante links, wie im Entwurf. */
.fw.is-kunde .fw-zeilen { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.fw.is-kunde .fw-zeile {
    border: 1px solid var(--v2-line); border-left: 4px solid var(--fw-farbe, #B8BFCC); border-radius: 12px;
    padding: 13px 15px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px;
}
.fw.is-kunde .fw-zeile:hover { box-shadow: 0 8px 22px -12px rgba(27,42,78,.25); }
/* Oben Thema und Ampel, dann der Name, unten Verlauf, Wert und
   „Grenzen 90 / 180 · monatlich" — die Reihenfolge des Entwurfs. Die
   Spans kommen in der Reihenfolge der Tabelle aus dem Skript; `order`
   stellt sie für die Karte um. */
.fw.is-kunde .fw-zeile-punkt, .fw.is-kunde .fw-zeile-wer, .fw.is-kunde .fw-zeile-turnus { display: none; }
.fw.is-kunde .fw-zeile-thema { order: 1; flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--v2-ink-mute); font-weight: 400; }
.fw.is-kunde .fw-zeile-ampel { order: 2; font-size: 12px; font-weight: 600; color: var(--fw-farbe); white-space: nowrap; }
.fw.is-kunde .fw-zeile-ind { order: 3; flex-basis: 100%; font-size: 14.5px; font-weight: 500; color: var(--v2-ink); }
.fw.is-kunde .rl-fw-linie { order: 4; }
.fw.is-kunde .fw-zeile-wert { order: 5; font-size: 15px; }
.fw.is-kunde .fw-zeile-grenzen { order: 6; margin-left: auto; font-size: 12px; color: var(--v2-ink-mute); white-space: nowrap; }
.fw.is-kunde .fw-zeile-grenzen::before { content: "Grenzen "; }
.fw.is-kunde .fw-zeile-grenzen::after { content: " · " attr(data-turnus); }

/* ── „Neues Thema oder Anlass hinzufügen" (Portal) ────────────────────── */
.pn { display: flex; flex-direction: column; gap: 14px; }
.pn-titel { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 21px; }
.pn-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pn-kacheln[hidden] { display: none; }
.pn-kachel {
    text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--v2-line);
    border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
    font: inherit; color: var(--v2-ink); transition: transform .2s, box-shadow .2s;
}
.pn-kachel:hover { transform: translateY(-2px); box-shadow: 0 4px 24px -6px rgba(27,42,78,.14); }
.pn-los { font-size: 13px; color: var(--v2-ink-mute); align-self: flex-end; margin-bottom: 8px; }
.pn-kachel-label { font-family: var(--font-serif); font-size: 19px; }
.pn-kachel-text { font-size: 13px; color: var(--v2-ink-soft); }
.pn-ablauf {
    background: #fff; border: 1.5px solid var(--v2-ink); border-radius: 14px;
    box-shadow: 0 24px 60px -24px rgba(27,42,78,.28); display: flex; flex-direction: column; max-width: 1000px;
}
.pn-ablauf[hidden] { display: none; }
.pn-kopf { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.pn-kopf > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pn-augenbraue { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-amber); }
.pn-schritt-titel { font-family: var(--font-serif); font-size: 21px; }
.pn-zu { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent;
         color: var(--v2-ink-soft); font-size: 20px; cursor: pointer; }
.pn-zu:hover { background: #F2EDE4; }
.pn-segmente { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 22px 0; }
.pn-segment { display: flex; flex-direction: column; gap: 6px; color: var(--v2-ink-mute); }
.pn-seg-balken { height: 3px; border-radius: 3px; background: rgba(27,42,78,.12); }
.pn-seg-name { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.pn-segment.is-an { color: var(--v2-ink); }
.pn-segment.is-an .pn-seg-balken { background: var(--v2-ink); }
.pn-leib { padding: 16px 22px 20px; border-top: 1px solid var(--v2-line-soft); margin-top: 12px; }
.pn-schritt { display: flex; flex-direction: column; gap: 16px; }
.pn-schritt[hidden] { display: none; }
.pn-text { margin: 0; font-size: 14.5px; color: #2C3E63; line-height: 1.55; }
.pn-text[hidden] { display: none; }
.pn-optionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pn-option-halter { display: flex; flex-direction: column; }
.pn-option {
    width: 100%; text-align: left; padding: 13px 15px; border-radius: 10px; border: 1px solid rgba(27,42,78,.12);
    background: #fff; cursor: pointer; font: inherit; color: var(--v2-ink);
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.pn-option:hover { border-color: var(--v2-ink); background: #FAF7F2; }
.pn-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pn-option-label { font-size: 14.5px; font-weight: 500; }
.pn-option-sub { font-size: 12.5px; color: var(--v2-ink-mute); }
.pn-fuss { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin: 0; }
.pn-knopf {
    padding: 11px 22px; border-radius: 999px; border: 0; background: var(--v2-ink); color: #fff;
    font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none;
}
.pn-knopf.is-leise { background: transparent; color: var(--v2-ink-soft); font-weight: 400; padding: 11px 16px; }
.pn-stand { font-size: 12.5px; color: var(--v2-ink-mute); margin-right: auto; }
.pn-fertig { padding: 18px 22px; gap: 14px; }
.pn-fertig-zeile { display: flex; gap: 14px; align-items: center; }
.pn-haken {
    width: 42px; height: 42px; border-radius: 50%; background: #DCE6E0; color: #34534a;
    display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.pn-fertig-text { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--v2-ink-soft); }
.pn-fertig-text strong { font-size: 15.5px; color: var(--v2-ink); font-weight: 600; }

@media (max-width: 560px) {
    .rl-tcor-feld { grid-template-columns: 1fr; }
    .rl-reiter { gap: 12px; overflow-x: auto; }
}

/* ── Startseite: das Band zum Kundenportal (27.09.2026) ────────────────── */
.lp-portal { background: #fff; border-top: 1px solid var(--v2-line-soft); border-bottom: 1px solid var(--v2-line-soft); }
.lp-portal-innen { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 22px 0; flex-wrap: wrap; }
.lp-portal-text { display: flex; flex-direction: column; gap: 4px; max-width: 70ch; }
.lp-portal-augenbraue { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-amber); }
.lp-portal-text strong { font-family: var(--font-serif); font-weight: 400; font-size: 1.2rem; color: var(--v2-ink); }
.lp-portal-text span:last-child { font-size: .92rem; color: var(--v2-ink-soft); }


/* =====================================================================
   Finanzthemen, Weiterarbeiten, Einordnungsfelder (27.09.2026, Abend)
   ===================================================================== */

/* ── Der Ablauf „Finanzthemen" ────────────────────────────────────────── */
/* Innenabstand wie die anderen Panels der Akte (.akte-panel-new, 22px 24px).
   Bis zum 15.10.2026 saß der Inhalt ohne Rand an der Kante (Leon). */
.ft-innen { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 24px; }
@media (max-width: 560px) { .ft-innen { padding: 16px 14px 18px; } }
.ft-schritt { display: flex; flex-direction: column; gap: 14px; }
.ft-schritt[hidden] { display: none; }
.ft .akte-segment { cursor: default; }
.ft .akte-segment.is-fertig .akte-segment-balken,
.ft .akte-segment.is-aktiv .akte-segment-balken { background: var(--v2-ink); }
.ft-suche {
    width: 100%; padding: 11px 14px; border: 1px solid rgba(27,42,78,.16); border-radius: 10px;
    font: inherit; font-size: 14px; background: #fff; color: var(--v2-ink);
}
.ft-gruppe { display: flex; flex-direction: column; gap: 8px; }
.ft-gruppe[hidden] { display: none; }
.ft-gruppe-kopf { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v2-amber); }
.ft-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ft-wahl {
    display: flex; gap: 10px; align-items: baseline; text-align: left; padding: 10px 12px;
    border: 1px solid var(--v2-line); border-radius: 10px; background: #fff; cursor: pointer;
    font: inherit; color: var(--v2-ink);
}
.ft-wahl[hidden] { display: none; }
.ft-wahl:hover { border-color: var(--v2-ink); background: #FAF7F2; }
.ft-wahl-code { font-size: 11.5px; color: var(--v2-ink-mute); white-space: nowrap; min-width: 44px; }
.ft-wahl-titel { font-size: 13.5px; flex: 1; }
.ft-wahl-dabei { color: var(--v2-sage); font-weight: 600; }
.ft-thema-kopf { display: flex; gap: 10px; align-items: baseline; }
.ft-thema-code { font-size: 12px; color: var(--v2-ink-mute); }
.ft-thema-titel { font-family: var(--font-serif); font-size: 20px; }
.ft-orient {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px;
    background: #F2EDE4; border-left: 3px solid var(--v2-amber);
}
.ft-orient-titel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--v2-ink-soft); }
.ft-orient-text { font-size: 14.5px; color: var(--v2-ink); line-height: 1.45; }
.ft-orient-formel[hidden] { display: none; }
.ft-fragen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ft-fragen .akte-din-thema { display: contents; }
.ft-feld[hidden] { display: none; }
.ft-feld { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 13px; color: var(--v2-ink-soft); }
.ft .ft-feld select, .ft .ft-feld input { padding: 9px 11px; font-size: 14px; border-radius: 8px; }
.ft-ohne { margin: 0; }
.ft-ohne[hidden] { display: none; }
.ft-stand { font-size: 12.5px; color: var(--v2-ink-mute); margin-right: auto; }
.ft-ergebnis { display: flex; flex-direction: column; gap: 12px; }
.ft-eingruppierung {
    display: flex; flex-direction: column; gap: 3px; padding: 12px 15px; border-radius: 10px;
    background: #FAF7F2; border-left: 4px solid var(--ft-farbe, #8C95A8);
}
.ft-eingr-titel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--v2-ink-soft); }
.ft-eingr-wert { font-size: 15px; font-weight: 600; color: var(--ft-farbe, var(--v2-ink)); }
.ft-eingr-grund { font-size: 12.5px; color: var(--v2-ink-soft); }
.ft-personen { margin: 0; padding-left: 18px; font-size: 13px; color: var(--v2-ink-soft); }
.ft-personen[hidden] { display: none; }
.ft-fertig { display: flex; flex-direction: column; gap: 10px; }
.ft-fertig[hidden] { display: none; }
.ft-haken {
    width: 40px; height: 40px; border-radius: 50%; background: #DCE6E0; color: #34534a;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    animation: ft-herein .35s ease-out;
}
.ft-fertig-text { font-size: 15px; font-weight: 600; color: var(--v2-ink); }
.ft-aufnehmen[hidden] { display: none; }
@keyframes ft-herein { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── „Weiterarbeiten" in der Schublade ────────────────────────────────── */
.rl-weiter-karte {
    display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
    border: 1px solid var(--v2-line); border-radius: 12px; background: #fff;
}
.rl-weiter-name { font-size: 14.5px; font-weight: 500; color: var(--v2-ink); }
.rl-weiter-meta { font-size: 12.5px; color: var(--v2-ink-mute); }
.rl-weiter-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rl-weiter-knoepfe a { text-decoration: none; }
.rl-weiter-form { margin: 0; }
.rl-weiter .rl-hint { margin: 0; }

/* ── Einordnungsfelder: Herkunft und Liste ────────────────────────────── */
.rl-feld.is-ausloeser label, .rl-feld.is-stammdatum label { color: var(--v2-ink-soft); }
.rl-feld.is-stammdatum { border-left: 2px solid rgba(27,42,78,.12); padding-left: 10px; }
.rl-liste { display: flex; flex-direction: column; gap: 8px; grid-column: 1 / -1; }
.rl-liste-kopf { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-ink-soft); }
.rl-liste-zeilen { display: flex; flex-direction: column; gap: 8px; }
.rl-liste-zeile {
    display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 10px;
    border: 1px solid var(--v2-line); border-radius: 10px; background: #FBF9F5;
}
.rl-liste-feld { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; color: var(--v2-ink-soft); flex: 1; min-width: 130px; }
.rl-liste-zeile input, .rl-liste-zeile select { padding: 7px 9px; font-size: 13px; border-radius: 7px; }
.rl-liste-weg { border: 0; background: none; font-size: 18px; color: var(--v2-ink-mute); cursor: pointer; padding: 4px 6px; }
.rl-liste-hinzu { align-self: flex-start; }
.rl-orient-formel { margin: 6px 0 0; }
.rl-orient-formel[hidden] { display: none; }


/* =====================================================================
   Lücken aus dem Entwurf (27.09.2026, Nacht)
   ===================================================================== */

/* „Schnell-Check erneut durchführen" rechts in der Zeile „Grundlage" */
.rl-grundlage .rl-neucheck { margin-left: auto; text-decoration: none; }

/* Das Thema einer Aufgabe öffnet seine Schublade */
.ag-thema-link {
    border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px;
    color: var(--v2-ink-soft); cursor: pointer; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.ag-thema-link:hover { color: var(--v2-ink); text-decoration: underline; }

/* Portal: „Erster Schritt" über der Landschaft */
.pk-start {
    display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
    background: #FBF7F0; border: 1px solid #E8D9C3;
}
.pk-start-text { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; min-width: 0; }
.pk-start-pille {
    align-self: flex-start; padding: 4px 11px; border-radius: 999px;
    background: #E8D9C3; color: #7a5224; font-size: 12.5px; font-weight: 500;
}
.pk-start-titel { font-family: var(--font-serif); font-size: 21px; margin: 2px 0 0; color: var(--v2-ink); }
.pk-start-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--v2-ink-soft); }
.pk-start-tun form { margin: 0; }

/* Portal: das Band „Monitoring · Nur Ansicht" */
.pt-monitor {
    max-width: 1180px; margin: 0 auto 18px; padding: 12px 18px; border-radius: 12px;
    display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap;
    background: #EEF2F8; border: 1px solid #D5DEEC;
}
.pt-monitor-l { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #1F3A5F; }
.pt-monitor-text { font-size: 14px; color: #2C3E63; flex: 1; min-width: 240px; }
.pt-monitor-druck {
    white-space: nowrap; padding: 8px 15px; border-radius: 999px; border: 1px solid #1F3A5F;
    background: #fff; color: #1F3A5F; font: inherit; font-size: 13px; cursor: pointer;
}
.pt-monitor-druck:hover { background: #1F3A5F; color: #fff; }

/* Druckbild des Portals: die Landschaft und ihre Zahlen, ohne Bedienung */
@media print {
    .pt-shell .pt-rechts, .pt-shell .pt-monitor-druck, .pt-shell .pt-berater-link,
    .pt-shell .pn, .pt-shell .pk-start-tun, .pt-shell .pk-dritte, .pt-shell .rl-schublade,
    .pt-shell .rl-schleier, .pt-shell .rl-umschalter, .pt-shell .ag-zeile-tun,
    .pt-shell .pt-fuss a, .pt-shell form { display: none; }
    .pt-shell .card { box-shadow: none; break-inside: avoid; }
    .pt-shell .rl-thema { break-inside: avoid; }
    .pt-monitor { background: none; border-color: #999; }
}

/* ── Ausschreibung: Lücken zum Entwurf (27.09.2026) ─────────────────────
   Frist-Schnellwahl, Eckdaten und Betreff je Haus im Schrittfenster;
   Satz am Fristfuß, Kachel „Rückfragen" und Pille im Kopf der Seite. */

/* Die Frist-Knöpfe stehen neben dem Datumsfeld. Das Feld ist sonst auf
   volle Breite gesetzt und schöbe sie in die nächste Zeile. */
.as-frist-zeile { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.as-frist-zeile input[type=date] { width:auto; flex:0 0 auto; }
.as-frist-chips { display:inline-flex; gap:6px; flex-wrap:wrap; }
.as-frist-chips .btn-chip[aria-pressed="true"] { background:var(--brand-primary,#1B2A4E); border-color:var(--brand-primary,#1B2A4E); color:#FAF7F2; }

/* Eckdaten über der Prüftabelle: einmal für alle Häuser. */
.as-eckdaten { max-width:none; display:flex; gap:8px 24px; flex-wrap:wrap; margin:0 0 14px; padding:12px 16px; border-radius:var(--radius-md,10px); background:var(--v2-bg,#FAF7F2); font-size:.88rem; }
.as-eckdaten strong { font-weight:500; color:var(--color-text,#1B2A4E); margin-left:6px; }

/* Der Betreff je Haus gehört zur Zeile darüber, deshalb ohne Trennlinie. */
.as-pruefen tr.as-betreff-zeile td { border-top:0; padding-top:0; }
.as-betreff-marke { color:var(--color-text-mute,#8C95A8); margin-right:4px; }
.as-betreff-text { color:var(--color-text,#1B2A4E); }
.as-betreff-warnung { display:block; margin-top:3px; font-size:.8rem; color:var(--v2-rust,#B45A3C); }
.as-betreff-warnung[hidden] { display:none; }

/* Der Satz am Fristfuß steht unter Feld und Knopf. */
.aus-frist-hinweis { flex-basis:100%; font-size:.76rem; color:var(--color-text-mute,#8C95A8); }
.aus-frist-fuss.ist-faellig .aus-frist-hinweis { color:inherit; opacity:.8; }

/* „Rückfragen" hebt sich ab, solange welche auf den Vermittler warten. */
.aus-kachel.ist-dran .v, .aus-kachel.ist-dran .s { color:#1E4785; }

/* Die Pille im Kopf, neben „für …". */
.aus-kopf-pille { vertical-align:middle; margin-left:8px; padding:4px 11px; font-size:.74rem; }

/* Nachweise an der Maßnahme in der Schublade */
.rl-mass-laeufe { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--v2-ink-soft); }
.rl-mass-laeufe a { color: inherit; }

/* Anlass: Betroffene Finanzthemen (28.09.2026), templates/partials/anlass_landschaft.php.
   Ersetzt die einfache Karte vom 27.09.2026 (.aft-*). */
.al-landschaft.is-auftritt .rl-spalte { animation: al-auftritt .45s var(--ease) backwards; }
.al-landschaft.is-auftritt .rl-thema {
  animation: al-einflug .55s var(--ease) backwards;
  animation-delay: calc(var(--al-i, 0) * 55ms + 120ms);
}
@keyframes al-auftritt { from { opacity: 0; transform: translateY(6px); } }
@keyframes al-einflug  { from { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(3px); } }
.al-landschaft .rl-thema.is-zurueck { opacity: .62; border-style: dashed; border-left-style: solid; }
.al-landschaft .rl-thema.is-zurueck:hover,
.al-landschaft .rl-thema.is-zurueck.is-offen { opacity: .92; }
.rl-flagge.is-neu     { background: #E8ECF5; color: #2C3E63; }
.rl-flagge.is-zurueck { border: 1px dashed rgba(27,42,78,.3); color: var(--v2-ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .al-landschaft .rl-spalte, .al-landschaft .rl-thema { animation: none; }
}

/* BK_TEILE: Ein passiver Teil, den die neu gerenderte Seite nicht mehr
   enthält, wird ausgeblendet, nicht gelöscht. Taucht er wieder auf, nimmt
   der Abgleich das Attribut zurück. */
[data-bk-teil][hidden] { display: none; }

/* Kleinigkeiten aus dem Entwurf (28.09.2026) */
/* Kopf der Schublade: gewerblich Balken in der Klassenfarbe, privat Augenbraue in der Stufenfarbe (--rl-kopf setzt kopfSetzen). */
.rl-schublade[data-rl-kopf="klasse"] .rl-schublade-kopf { border-top: 4px solid var(--rl-kopf, transparent); }
.rl-schublade[data-rl-kopf="stufe"] .rl-schublade-augenbraue { color: var(--rl-kopf, var(--v2-amber)); }
.rl-schublade-kopftext { min-width: 0; }
.rl-schublade-besch { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #2C3E63;
                      background: #FAF7F2; border-radius: 10px; padding: 10px 12px; }
/* Version und Datum unter dem Titel eines Vorgangs. */
.rl-vorgang-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-vorgang-meta { font-size: 12px; color: var(--rl-grau); }
/* „Frist setzen" an einer Aufgabe ohne Frist. */
.ag-zeile-tun .ag-frist { font: inherit; font-size: 13px; padding: 6px 10px;
    border: 1px solid rgba(27,42,78,.16); border-radius: 8px; background: #fff; color: var(--v2-ink); }
/* PFLICHT: .ag-log hat display:grid und schlägt [hidden]. Ohne diese Zeile klappt der Verlauf nicht zu. */
.ag-log[hidden] { display: none; }
.ag-verlauf-mehr { align-self: flex-start; border: 0; background: transparent; padding: 0;
                   color: var(--v2-ink-soft); font: inherit; font-size: 12.5px;
                   text-decoration: underline; cursor: pointer; }
/* ── Ausschreibung: Archiv als ZIP und Vorwarnung (28.09.2026) ───────── */
.aus-zip-knopf { display:inline-flex; align-items:center; }
.aus-zip-modal { max-width:640px; }
.aus-zip-eyebrow { font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-accent,#C68F4D); margin-bottom:4px; }
.aus-zip-baum { list-style:none; margin:0; padding:4px 0; max-height:52vh; overflow-y:auto; }
.aus-zip-zeile { display:flex; align-items:center; gap:9px; padding-top:6px; padding-bottom:6px; font-size:.84rem; color:var(--color-text,#1B2A4E); border-bottom:1px solid rgba(27,42,78,.04); }
.aus-zip-zeile.ist-ordner .aus-zip-name { font-weight:600; }
.aus-zip-symbol { flex-shrink:0; width:16px; text-align:center; }
.aus-zip-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aus-zip-meta { font-size:.75rem; color:var(--color-text-mute,#8C95A8); white-space:nowrap; }
.aus-kachel.ist-bald .v, .aus-kachel.ist-bald .s { color:var(--v2-rust,#B45A3C); }
.aus-vorwarnung { display:inline-block; margin-top:2px; }
.aus-vorwarnung-lauf { font-style:italic; }
.as-vorwarnung-hinweis { display:block; margin-top:6px; }
/* ── Vorgangs-Schublade (28.09.2026) ─────────────────────────────── */
.rl-schublade.vs { width: 480px; z-index: 62; }
.vs-schleier { z-index: 61; }
.vs-zurueck { border: 0; background: none; padding: 0 0 6px; font: inherit; font-size: 13px;
              color: var(--v2-ink-soft); cursor: pointer; text-align: left; }
.vs-zurueck[hidden] { display: none; }
.vs-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vs-voll-zeile { margin: 10px 0 0; }
.vs-stand:empty { display: none; }
.vs-stand.is-fehler { color: var(--v2-rust, #B45A3C); }
.rl-status-knoepfe { margin: 0; }
.vs-naechst { background: #FAF7F2; border-radius: 12px; padding: 16px 18px;
              display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.vs-naechst form { margin: 0; }
.vs-naechst-text { font-size: 14.5px; color: #2C3E63; margin: 0; }
.vs-link-zeile { display: flex; gap: 8px; align-items: center; border: 1px solid rgba(27,42,78,.12);
                 border-radius: 10px; padding: 8px 8px 8px 12px; }
.vs-link-text { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #2C3E63;
                flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-link-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.vs-link-knoepfe form { margin: 0; }
.vs-link-gesperrt { background: #FBEFE8; color: #8A5A14; border-radius: 8px; padding: 8px 12px; }
.vs-verlauf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vs-eintrag { position: relative; padding: 0 0 14px 22px; display: flex; flex-direction: column; gap: 1px; }
.vs-eintrag::before { content: ""; position: absolute; left: 4px; top: 6px; width: 9px; height: 9px;
                      border-radius: 50%; background: var(--vs-punkt, #8C95A8); }
.vs-eintrag::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 1px;
                     background: rgba(27,42,78,.12); }
.vs-eintrag:last-child::after { display: none; }
.vs-eintrag.is-makler  { --vs-punkt: #1B2A4E; }
.vs-eintrag.is-mandant { --vs-punkt: #C68F4D; }
.vs-eintrag.is-dritter { --vs-punkt: #1E4785; }
.vs-eintrag-text { font-size: 14px; color: var(--v2-ink); }
.vs-eintrag-wann { font-size: 12.5px; color: var(--rl-grau, #8C95A8); }
.vs-aktionen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vs-aktionen-liste form { margin: 0; }
.vs-aktion { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
             padding: 11px 12px; border: 0; border-radius: 8px; background: transparent; font: inherit;
             font-size: 14px; color: var(--v2-ink); cursor: pointer; text-decoration: none; }
a.vs-aktion:hover, button.vs-aktion:hover { background: #FAF7F2; text-decoration: none; }
.vs-aktion.is-aus { color: var(--rl-grau, #8C95A8); cursor: default; }
.vs-aktion.is-gefahr { color: #B45A3C; }
.vs-aktion-hinweis { color: #8C95A8; font-size: 13px; }
.vs-umbenennen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 4px 12px 10px; }
.vs-umbenennen[hidden] { display: none; }
.vs-umbenennen-titel { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 13.5px; padding: 8px 10px;
                       border: 1px solid rgba(27,42,78,.16); border-radius: 8px; }
.vs-umbenennen-knoepfe { display: inline-flex; gap: 6px; }
@media (max-width: 560px) { .rl-schublade.vs { width: 100%; max-width: 100%; } }

/* ── Anlege-Ablauf: Kundenfeld, Abschluss, Tabelle (28.09.2026) ──── */
.akte-send-box { background: #FAF7F2; border: 0; color: var(--v2-ink-soft); }
.akte-send-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.akte-send-gueltig { display: flex; flex-direction: column; gap: 5px; }
.akte-send-gueltig-l { font-size: 12.5px; font-weight: 600; color: var(--v2-ink-soft); }
.akte-send-gueltig-w { font-size: 14px; padding: 10px 0; color: var(--v2-ink); }
.akte-send-hinweis { margin: 8px 0 0; font-size: 12.5px; color: var(--v2-ink-mute); }
.akte-titel-hinweis { color: #8A5A14; }
.akte-flow-stand { margin-right: auto; }
.akte-fertig-kopf { display: flex; gap: 14px; align-items: center; padding: 6px 0; }
.akte-thema-oeffnen[hidden] { display: none; }
.akte-vorgang-link { color: inherit; }
.akte-vorgang-link:hover { text-decoration: underline; }

/* ── Landschaft: Abzeichen, Abgleich, eigene Risiken, Unterlagen (28.09.2026) ── */
/* Abzeichen und Neu-Punkt */
.rl-neupunkt { width: 6px; height: 6px; border-radius: 50%; background: #C68F4D; flex-shrink: 0; }
.rl-flagge.is-chance { border: 1px solid rgba(90,122,110,.4); color: #34534a; }
.rl-flagge.is-kundenanalyse { background: #C68F4D; color: #fff; }
/* Abgleich über der Landschaft (Kundenakte v4:230-260) */
.rl-abgleich { background: #fff; border: 1.5px solid #1B2A4E; border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(27,42,78,.28); margin: 0 0 16px; display: flex; flex-direction: column; }
.rl-abgleich-kopf { padding: 18px 22px 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid rgba(27,42,78,.06); }
.rl-abgleich-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rl-abgleich-augenbraue { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #C68F4D; }
.rl-abgleich-titel { font-family: 'Source Serif 4', Georgia, serif; font-size: 20px; color: #1B2A4E; }
.rl-abgleich-sub { font-size: 13.5px; color: #5C6B85; }
.rl-abgleich-zahlen { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.rl-abgleich-zahl { padding: 6px 12px; border-radius: 10px; background: #F2EDE4; color: #5C6B85; font-size: 12px; }
.rl-abgleich-zahl b { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 400; margin-right: 4px; }
.rl-abgleich-zahl.is-art-hoeher, .rl-abgleich-zahl.is-art-neu { background: #F3DDD3; color: #9A4A30; }
.rl-abgleich-zahl.is-art-niedriger, .rl-abgleich-zahl.is-art-weg { background: #DCE6E0; color: #34534a; }
.rl-abgleich-zeilen { display: flex; flex-direction: column; }
.rl-abgleich-zeile { display: grid; grid-template-columns: minmax(160px,1.3fr) minmax(0,2fr) auto; gap: 14px; align-items: center; padding: 10px 22px; border: 0; border-bottom: 1px solid rgba(27,42,78,.05); background: transparent; text-align: left; font: inherit; color: #1B2A4E; cursor: pointer; }
.rl-abgleich-zeile:hover { background: #FAF7F2; }
.rl-abgleich-zeile[hidden] { display: none; }
.rl-abgleich-thema { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rl-abgleich-name { font-size: 14.5px; font-weight: 500; }
.rl-abgleich-unter { font-size: 12px; color: #8C95A8; }
.rl-abgleich-wechsel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rl-abgleich-alt, .rl-abgleich-neu { font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: #F2EDE4; color: #5C6B85; white-space: nowrap; }
.rl-abgleich-neu { background: #E8ECF5; color: #2C3E63; }
.rl-abgleich-pfeil { color: #8C95A8; }
.rl-abgleich-richtung { font-size: 12.5px; white-space: nowrap; color: #5C6B85; }
.rl-abgleich-zeile.is-ton-ab .rl-abgleich-richtung { color: #9A4A30; }
.rl-abgleich-zeile.is-ton-auf .rl-abgleich-richtung { color: #34534a; }
.rl-abgleich-gleich { margin: 0; padding: 10px 22px; font-size: 13px; color: #8C95A8; }
.rl-abgleich-fuss { padding: 12px 22px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rl-abgleich-fuss .rl-abgleich-mehr { margin-right: auto; }
.rl-abgleich-stand { font-size: 12.5px; color: #5C6B85; }
@media (max-width: 640px) { .rl-abgleich-zeile { grid-template-columns: 1fr; gap: 6px; } }
/* Banner eigene Risiken (v3:146-152) */
.rl-eigenneu { background: #fff; border: 1px solid rgba(27,42,78,.10); border-left: 3px solid #C68F4D; border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rl-eigenneu-kuerzel { width: 34px; height: 34px; border-radius: 50%; background: #E8D9C3; color: #7a5224; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.rl-eigenneu-text { font-size: 14.5px; color: #1B2A4E; flex: 1; min-width: 220px; }
.rl-eigenneu-stand { font-size: 12.5px; color: #5C6B85; }
/* Unterlage am Kennzahlwert und Verlauf in eigenen Zeilen */
.rl-fw-datei { flex-shrink: 0; }
.rl-fw-unterlage { display: block; font-size: 12px; color: #5C6B85; margin-top: 4px; }
.ag-log-notiz { display: block; font-size: 13px; color: #2C3E63; font-style: italic; margin-top: 2px; }
.ag-log-dateien { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ag-log-datei { display: inline-flex; gap: 5px; align-items: center; padding: 3px 9px; border-radius: 8px; background: #F2F4F8; font-size: 12px; color: #2C3E63; }
.ag-log-datei::before { content: "\1F4CE"; }

/* ── Landschaft: Grundlagen, Priorität, Ziehen, Begründungsdialog (28.09.2026) ── */
/* Grundlagen */
.rl-basis-punkt { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rl-basis.is-ganzheitlich .rl-basis-punkt { background: #1B2A4E; }
.rl-basis.is-anlass .rl-basis-punkt { background: #C68F4D; }
.rl-basis-titel { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.rl-grund-rest { display: contents; }
.rl-grund-rest[hidden] { display: none; }
/* Priorität in der Schublade */
.rl-prio-wahl { padding: 14px 24px 0; display: flex; flex-direction: column; gap: 9px; }
.rl-prio-wahl[hidden] { display: none; }
.rl-prio-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rl-prio-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px; font-size: 13px; }
.rl-prio-chip .rl-eigen-punkt { margin-right: 0; }
.rl-prio-chip[aria-pressed="true"] { background: #FAF7F2; color: var(--v2-ink); border-color: var(--v2-ink); font-weight: 600; }
.rl-prio-chip.is-din::after { content: "DIN"; font-size: 10px; letter-spacing: .08em; color: var(--v2-ink-mute); }
.rl-prio-chip:disabled { cursor: default; }
.rl-prio-chip:disabled:not([aria-pressed="true"]) { opacity: .45; }
.rl-prio-stelle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--v2-ink-soft); }
.rl-prio-stelle[hidden], .rl-prio-schritt[hidden] { display: none; }
.rl-prio-angepasst { border: 1px dashed rgba(27,42,78,.25); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.rl-prio-angepasst[hidden] { display: none; }
.rl-prio-weg-text, .rl-prio-von { margin: 0; }
.rl-prio-weg-text { font-size: 13.5px; }
.rl-prio-angepasst .rl-prio-grund-text { margin: 0; font-size: 14px; font-style: italic; color: #2C3E63; line-height: 1.5; }
.rl-prio-wahl-stand { font-size: 12px; color: var(--rl-grau, #8C95A8); min-height: 1em; }
/* Ziehen */
.rl-rahmen[data-rl-ziehen] .rl-thema[draggable="true"] { cursor: grab; }
.rl-thema.is-gezogen { opacity: .35; }
.rl-spalte.is-ziel { background: #EDE6DA; transition: background .15s; }
.rl-thema.is-davor { border-color: var(--v2-ink); box-shadow: 0 -3px 0 0 var(--v2-ink); }
/* Begründungsdialog */
.rl-prio-dialog { border: 0; border-radius: 18px; width: min(520px, calc(100% - 48px)); padding: 26px 28px; box-shadow: 0 30px 80px -20px rgba(27,42,78,.45); color: var(--v2-ink); }
.rl-prio-dialog::backdrop { background: rgba(27,42,78,.32); }
.rl-prio-dialog-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.rl-prio-dialog-augenbraue { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-amber); }
.rl-prio-dialog-titel { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.25; }
.rl-prio-dialog-weg { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.rl-prio-dialog-von { padding: 5px 11px; border-radius: 999px; background: #F2EDE4; color: var(--v2-ink-soft); }
.rl-prio-dialog-pfeil { color: var(--rl-grau, #8C95A8); }
.rl-prio-dialog-nach { padding: 5px 11px; border-radius: 999px; background: var(--v2-ink); color: #FAF7F2; }
.rl-prio-dialog-satz { margin: 0; font-size: 13.5px; color: var(--v2-ink-soft); }
.rl-prio-dialog-fuss { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-prio-dialog-stand { margin-right: auto; font-size: 12px; color: var(--rl-grau, #8C95A8); }

/* ── Schublade: Versicherungsschutz, Kundenangaben, Verlauf je Thema (28.09.2026) ── */
/* Versicherungsschutz: Kasten in der Farbe des Bedarfsstatus (Portal-Entwurf,
   „VERSICHERUNGSSCHUTZ"). Farbe und Grund setzt das Skript aus ThemaStatus::STATUS. */
.rl-schutz { margin: 10px 24px 0; padding: 14px 16px; border-radius: 12px;
             background: var(--rl-schutz-grund, #F2EDE4);
             display: flex; flex-direction: column; gap: 8px; }
.rl-schutz[hidden] { display: none; }
.rl-schutz-titel { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
                   color: var(--rl-schutz-farbe, var(--v2-ink-soft)); }
.rl-schutz-text { margin: 0; font-size: 14px; line-height: 1.5; color: #2C3E63; }
.rl-schutz-weg { align-self: flex-start; font-size: 13.5px; font-weight: 500; }

/* Kundenangaben prüfen / Neue Angaben (Entwurf: „NEU VOM KUNDEN"). */
.rl-angaben { background: #F6EEE2; border-radius: 10px; padding: 11px 13px;
              display: flex; flex-direction: column; gap: 7px; }
.rl-angaben-satz { margin: 0; font-size: 13.5px; line-height: 1.45; color: #2C3E63; }
.rl-angaben-liste { display: flex; flex-direction: column; gap: 4px; }
.rl-angaben-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
                    font-size: 12.5px; color: #2C3E63; }
.rl-angaben-wert { white-space: nowrap; }
.rl-angaben-wert s { color: #8C95A8; }
.rl-angaben-wert b { font-weight: 600; }
.rl-angaben-einordnung { margin: 0; font-size: 13px; font-weight: 600; color: #7a5224; }
.rl-angaben-vorgang { font-size: 12.5px; white-space: nowrap; }
.rl-angaben-fuss { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rl-angaben-stand { font-size: 12px; color: var(--rl-grau, #8C95A8); }
.rl-angaben-fertig { margin: 0; font-size: 13.5px; color: #34534a; }
.rl-angaben .rl-hint { margin: 0; }

/* Der Verlauf des Themas: dieselben Zeilen wie „Fristen, Nachweise und Verlauf" (.ag-log). */
.rl-verlauf { display: flex; flex-direction: column; gap: 10px; }

/* „Weiterarbeiten" mit mehreren Bögen je Thema (28.09.2026): Abstand zwischen den Karten */
.rl-weiter:not([hidden]) { display: flex; flex-direction: column; gap: 10px; }

/* ── Wege des Quellvorgangs in der Schublade (29.09.2026) ─────────────
   templates/partials/quelle_wege.php. Vorgänge, Anlegen und „entfernen"
   tragen die Klassen der früheren Karten (plan-*), hier für die 420 px
   breite Schublade verdichtet. */
.qw-gruppe, .qw-kv { gap: 10px; }
.qw-sparte > summary, .qw-weitere > summary { list-style: none; cursor: pointer; }
.qw-sparte > summary::-webkit-details-marker,
.qw-weitere > summary::-webkit-details-marker { display: none; }
.qw-sparte-kopf { user-select: none; }
.qw-sparte-kopf:hover { border-color: var(--v2-ink-soft); }
.qw-sparte[open] > .qw-sparte-kopf { border-color: var(--v2-ink); }
.qw-sparte-leib { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 6px; }
.qw-sparte-leib .plan-items { gap: 8px; }
.qw-sparte-leib .plan-item { padding: 10px 12px; gap: 8px 12px; border-radius: 10px; }
.qw-sparte-leib .plan-item-body strong { font-size: 13.5px; }
.qw-sparte-leib .plan-meta { font-size: 12px; }
.qw-sparte-leib .plan-item-aktionen { gap: 12px; }
.qw-sparte-leib .plan-neu-feld { margin-top: 2px; padding: 12px 14px; border-radius: 12px; }
.qw-sparte-leib .plan-new { gap: 8px; }
.qw-sparte-leib .plan-new input[type="text"] { flex: 1 1 100%; padding: 9px 12px; font-size: 13px; border-radius: 10px; }
.qw-sparte-leib .plan-new .btn-neu { padding: 9px 16px; font-size: 13px; border-radius: 10px; }
.qw-weitere > summary { display: inline-block; font-size: 12.5px; color: var(--v2-ink-soft); padding: 2px 0; }
.qw-weitere > summary:hover { color: var(--v2-ink); }
.qw-weitere-leib { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.qw-hinweis { font-style: italic; }
.qw-stand:empty { display: none; }
.qw-kv-wahl { flex-direction: column; align-items: stretch; }
.qw-kv-wahl .rl-weiter-form { display: flex; }
.qw-kv-wahl .rl-chip { width: 100%; text-align: left; border-radius: 10px; padding: 8px 12px; }
/* Spalte rechts: eine Zeile ohne Kachel ist Text, kein Verweis. */
div.plan-uebersicht-zeile { cursor: default; }
div.plan-uebersicht-zeile:hover .plan-uebersicht-name { color: inherit; }
.plan-zurueck-titel a { color: inherit; text-decoration: none; }
.plan-zurueck-titel a:hover { color: var(--brand-primary); }

/* In der Akte entfernt (Anlass-Seite, 29.09.2026) */
.rl-flagge.is-entfernt { border: 1px dashed rgba(180,90,60,.45); color: #8a3b22; }
.al-landschaft .rl-thema.is-entfernt { opacity: .7; border-style: dashed; border-left-style: solid; }
.al-landschaft .rl-thema.is-entfernt.is-offen, .al-landschaft .rl-thema.is-entfernt:hover { opacity: .95; }
.qw-entfernt { border-color: rgba(180,90,60,.35); background: #FBF4F0; }
/* „+ Weitere Sparten": Rückfall-Verweis und Laden */
.qw-weitere-rueckfall { font-size: 12.5px; }
.qw-laedt { display: block; margin-top: 6px; }
/* In der Akte entfernt, auch auf der Folgeseite des Checks (29.09.2026) */
.ck-landschaft .rl-thema.is-entfernt { opacity: .7; border-style: dashed; border-left-style: solid; }
.ck-landschaft .rl-thema.is-entfernt.is-offen, .ck-landschaft .rl-thema.is-entfernt:hover { opacity: .95; }

/* =====================================================================
   Team-Seite, Rolle im Profil, Einladungsannahme, Vorlagen lesend
   (02.10.2026)
   ---------------------------------------------------------------------
   templates/settings/team.php und profile.php, public/accept-invite.php,
   public/templates.php. Ohne JavaScript und ohne Style-Block (CSP):
   Bearbeiten, Einladen, 2FA zurücksetzen und Umbenennen klappen über
   einen Anker und :target auf, „Abbrechen" springt zur Tabelle zurück.
   Die Tabellen werden zu Karten, sobald ihre Karte schmal ist, und zwar
   über die Breite der Karte (container query), nicht des Fensters: Die
   Einstellungen haben links eine eigene Navigation, die Breite des
   Fensters sagt hier wenig.
   ===================================================================== */
.tm-karte { padding: 0; container-type: inline-size; }
.tm-karte, .tm-klappe, .tm-klappzeile { scroll-margin-top: 96px; }
.tm-kopf { padding: 18px 24px; margin-bottom: 0; align-items: center; flex-wrap: wrap; }
.tm-kopf h3 { margin: 0; }
.tm-leer { margin: 0; padding: 18px 24px; }
.tm-fuss { padding: 16px 24px 20px; border-top: 1px solid var(--v2-line-soft); }
.tm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
         clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Aufklappen ohne Skript */
.tm-klappe { display: none; padding: 18px 24px 20px; background: var(--v2-bg);
             border-bottom: 1px solid var(--v2-line-soft); }
.tm-klappe:target { display: block; }
.tm-klappe h4 { margin: 0 0 12px; }
.tm-klappzeile { display: none; }
.tm-klappzeile:target { display: table-row; }
.table tbody tr.tm-klappzeile, .table tbody tr.tm-klappzeile:hover { background: var(--v2-bg); }
.tm-tabelle .tm-klappzeile > td { padding: 16px 24px 18px; }

/* Formulare in den Klappen */
.tm-raster { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
.tm-raster .form-row { margin: 0; min-width: 0; }
.tm-check { align-self: center; }
.tm-check .form-check { margin: 0; align-items: center; }
.tm-hinweis { margin: 12px 0 0; }
.tm-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.tm-zeilenform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-zeilenform input[type=text] { flex: 1 1 220px; min-width: 0; width: auto; }
.tm-routing-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.tm-routing-form .form-row { margin: 0; }

/* Tabelle */
.tm-tabelle th, .tm-tabelle td { padding: 12px 14px; }
.tm-tabelle th:first-child, .tm-tabelle td:first-child { padding-left: 24px; }
.tm-tabelle th:last-child, .tm-tabelle td:last-child { padding-right: 24px; }
.tm-tabelle .badge { padding: 4px 10px; white-space: nowrap; }
.tm-umbruch { overflow-wrap: anywhere; }
.tm-zusatz { display: block; margin-top: 4px; font-size: .76rem; color: var(--v2-ink-soft); }
.tm-aktionen { text-align: right; }
.tm-aktionen > * { margin: 2px 0 2px 4px; }
.tm-inline { display: inline; margin: 0; }

/* Schmale Karte: jede Zeile wird eine Karte, kein Querscrollen (375 px).
   900 px, weil die Vermittler-Tabelle mit echten Daten (offene Einladung mit
   zwei Knöpfen, lange Namen) rund 840 px braucht. Das ist ab etwa 1500 px
   Fensterbreite der Fall, darunter stehen Karten. */
@container (max-width: 900px) {
  .tm-kopf { padding: 14px 16px; }
  .tm-klappe, .tm-leer, .tm-fuss { padding-left: 16px; padding-right: 16px; }
  .tm-tabelle, .tm-tabelle tbody { display: block; width: 100%; }
  .tm-tabelle thead { display: none; }
  .tm-tabelle tr.tm-zeile { display: block; padding: 12px 16px; border-bottom: 1px solid var(--v2-line-soft); }
  .tm-tabelle tr.tm-zeile > td { display: block; position: relative; min-height: 1.6em;
                                 padding: 5px 0 5px 8.5em; border: 0; text-align: left;
                                 overflow-wrap: break-word; hyphens: auto; }
  .tm-tabelle tr.tm-zeile > td::before { content: attr(data-label); position: absolute; left: 0; top: 8px; width: 8em;
                                         font-size: .7rem; font-weight: 600; letter-spacing: .08em;
                                         text-transform: uppercase; color: var(--v2-ink-soft); }
  .tm-tabelle tr.tm-zeile > td.tm-aktionen { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 2px; }
  .tm-tabelle tr.tm-zeile > td.tm-aktionen::before { content: none; }
  .tm-aktionen > * { margin: 0; }
  .tm-tabelle tr.tm-klappzeile:target { display: block; }
  .tm-tabelle .tm-klappzeile > td { display: block; padding: 14px 16px; border-bottom: 1px solid var(--v2-line-soft); }
  .tm-routing-form { grid-template-columns: 1fr; }
}

/* Mein Profil: Rolle und Team, nur lesend */
.pf-rolle { padding: 18px 24px; margin-bottom: 16px; }
.pf-rolle-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-bottom: 8px; }
.pf-rolle-zeile > span { display: inline-flex; align-items: center; gap: 10px; }

/* Einladungsannahme: die beiden Schritte */
.auth-form .ai-schritte { margin: -16px 0 24px; padding-left: 20px; line-height: 1.5; }
.auth-form .ai-schritte li { margin-bottom: 8px; }

/* E-Mail-Vorlagen für Nicht-Admins: lesen statt bearbeiten */
.tv-lesend { padding: 10px 14px; background: var(--v2-bg); border: 1px solid var(--v2-line); border-radius: var(--radius-md); }
.tv-lesend-text { white-space: pre-wrap; line-height: 1.6; overflow-wrap: break-word; }

/* E-Mail-Vorlagen auf schmalen Bildschirmen (03.10.2026). Die Seite scrollte
   bei 375 px rund 40 px quer: Die drei Reiter standen in einer Zeile, und im
   Kartenkopf schob das Abzeichen „Plattform-Standard" neben einem langen
   Titel über den Rand. Jetzt brechen die Reiter um, das Abzeichen rutscht
   unter den Titel, und das Tage-Feld der Erinnerungen darf schmaler werden
   als 240 px (vorher eine feste Mindestbreite im Markup). */
.tv-tage { flex: 1 1 240px; min-width: 0; }
@media (max-width: 640px) {
  .tv-reiter { flex-wrap: wrap; }
  .tv-reiter a { padding: 10px 12px; }
  .tv-karte { padding: 20px 16px; }
  .tv-kopf { flex-wrap: wrap; gap: 8px 16px; }
  .tv-kopf > div { flex: 1 1 100%; min-width: 0; }
  .tv-kopf h3 { overflow-wrap: break-word; hyphens: auto; }
  .tv-platzhalter .table th, .tv-platzhalter .table td { padding: 8px 10px; overflow-wrap: anywhere; }
}
/* ── Ende Team-Seite (02.10.2026) ───────────────────────────────────── */

/* ── Installierbare App: der Knopf „Als App installieren“ (02.10.2026) ──
   Seit dem 03.10.2026 immer sichtbar. Verborgen ist er nur im App-Fenster
   (display-mode, weiter unten) und nach dem Installieren (hidden, gesetzt
   von assets/js/app-installieren.js). Bis dahin erschien er erst, wenn der
   Browser das Installieren anbot, und wurde im Portal nicht gefunden. Das
   hidden-Attribut muss gegen die display-Regeln unten gewinnen. Das geschieht
   über die Spezifität, nicht über !important: Der Portalblock setzt kein
   !important (landschaftcheck). */
.sidebar .bk-app-knopf[hidden], .bk-app-knopf[hidden], .pt-app-knopf[hidden] { display: none; }

/* Vermittler: unten in der Seitenleiste, über dem Nutzerkasten. Der Knopf
   ist ein Verweis auf die Karte unter „Mein Profil“ (ohne Angebot des
   Browsers führt er dorthin). Er übernimmt margin-top:auto vom Nutzerkasten,
   damit beide zusammen unten stehen. */
.sidebar .bk-app-knopf {
  margin-top: auto; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 14px;
  font-family: var(--font-sans); font-size: .86rem; text-align: left; text-decoration: none;
  color: rgba(250,247,242,.85); background: rgba(250,247,242,.06);
  border: 1px solid rgba(250,247,242,.16); border-radius: 8px; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sidebar .bk-app-knopf:hover { background: rgba(250,247,242,.12); color: #fff; }
.sidebar .bk-app-knopf:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.sidebar .bk-app-knopf:not([hidden]) + .sidebar-user { margin-top: 0; }
/* Schmal ist die Seitenleiste eine waagerechte Zeile (siehe oben, 768px). */
@media (max-width: 768px) {
  .sidebar .bk-app-knopf { margin: 0 0 0 auto; width: auto; flex: 0 0 auto; white-space: nowrap; padding: 7px 12px; }
  .sidebar .bk-app-knopf:not([hidden]) + .sidebar-user { margin-left: 0; }
}

/* Portal: eine Pille wie „Abmelden“, im Kopf rechts. */
.pt-app-knopf { background: none; border: 1px solid var(--v2-line); border-radius: 999px;
                padding: 5px 14px; font: inherit; font-size: 12px; cursor: pointer;
                color: var(--v2-ink-soft); white-space: nowrap; }
.pt-app-knopf:hover { border-color: var(--v2-ink-soft); color: var(--v2-ink); }

/* Im App-Fenster gibt es nichts zu installieren. Per CSS, damit der Knopf
   dort nicht aufblitzt, bevor das Skript ihm hidden setzt. Der Nutzerkasten
   bekommt seinen Platz unten (schmal: rechts) zurück. Steht NACH den Regeln
   oben, bei gleicher Spezifität gewinnt die spätere. */
@media (display-mode: standalone), (display-mode: window-controls-overlay), (display-mode: minimal-ui) {
  .sidebar .bk-app-knopf, .bk-app-knopf, .pt-app-knopf { display: none; }
  .sidebar .bk-app-knopf:not([hidden]) + .sidebar-user { margin-top: auto; }
  @media (max-width: 768px) {
    .sidebar .bk-app-knopf:not([hidden]) + .sidebar-user { margin: 0 0 0 auto; }
  }
}

/* Portal: das Hilfefenster zum Knopf (03.10.2026), ein <dialog> wie
   .rl-prio-dialog. Es öffnet sich, wenn der Browser das Installieren nicht
   von selbst anbietet. Kein display auf dem Fenster selbst: Geschlossen
   verbirgt es der Browser, und eine eigene Angabe hielte es offen. */
.pt-app-hilfe { border: 0; border-radius: 18px; width: min(520px, calc(100% - 48px)); padding: 26px 28px;
                box-shadow: 0 30px 80px -20px rgba(27,42,78,.45); color: var(--v2-ink); }
.pt-app-hilfe::backdrop { background: rgba(27,42,78,.32); }
.pt-app-hilfe-titel { margin: 0 0 14px; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.25; }
/* Der direkte Weg: Knopf „Jetzt installieren“ mit dem Stand daneben. Im HTML
   verborgen (hidden), das Skript zeigt ihn nur in Browsern, die das
   Installieren selbst anbieten. Kein display auf dem Block: hidden gilt so
   ohne weitere Regel. */
.pt-app-hilfe-direkt { margin: 0 0 14px; }
.pt-app-hilfe-direkt .btn[disabled] { opacity: .55; cursor: default; }
.pt-app-hilfe-stand { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--v2-ink-soft); min-height: 1.5em; }
.pt-app-hilfe-oder { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--v2-line);
                     font-size: 13px; color: var(--v2-ink-soft); }
.pt-app-hilfe-wege { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px;
                     font-size: 14px; line-height: 1.55; }
.pt-app-hilfe-hinweis { margin: 0 0 18px; font-size: 13px; color: var(--v2-ink-soft); }
.pt-app-hilfe-zu { margin: 0; display: flex; justify-content: flex-end; }

/* Druck: weder Knopf noch Hilfefenster. */
@media print { .sidebar .bk-app-knopf, .bk-app-knopf, .pt-app-knopf, .pt-app-hilfe { display: none; } }