/* ==========================================================================
   BP24 PflegeKompass — Design-Tokens & Basislayout
   Farbwelt: durchgängig die Markenfarben Blau (#1C3A78) und Gold (#A4813A),
   sowohl in der internen Arbeitsoberfläche als auch im Kundenbericht/PDF
   (siehe .report-page weiter unten sowie docs/spezifikation.md, Annahme 20 —
   ursprünglich bewusst auf den Bericht beschränkt, auf ausdrücklichen Wunsch
   danach auf die gesamte Anwendung ausgeweitet).
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-surface: #f2f5f7;         /* hellgraue Flächen */
  --color-surface-strong: #e6ebee;
  --color-border: #d7dfe4;

  --color-primary: #1C3A78;         /* Markenfarbe Blau */
  --color-primary-strong: #152c5a;
  --color-primary-contrast: #ffffff;

  --color-accent: #A4813A;          /* Markenfarbe Gold */
  --color-accent-strong: #83672e;
  --color-accent-soft: #f8f2e7;

  --color-text: #1b2733;
  --color-text-muted: #57697a;
  --color-text-faint: #7c8b99;

  --color-success: #2f7a4f;
  --color-success-bg: #e7f3ec;
  --color-warning: #9a6b17;
  --color-warning-bg: #faf1de;
  --color-danger: #a13f3f;
  --color-danger-bg: #f7e9e9;

  --font-display: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15, 44, 70, 0.08), 0 1px 6px rgba(15, 44, 70, 0.06);
  /* ÄNDERUNG (Design-Angleich an das Bewertungen-Portal, Pilot: Login + Dashboard):
     weicherer, stärker getönter Schatten für größere Karten (Login-Karte,
     Kunden-Zeilen, Stat-Kacheln) — die alte --shadow-card bleibt für Stellen
     erhalten, die (noch) nicht Teil dieses ersten Durchgangs sind. */
  --shadow-card-soft: 0 10px 30px -18px rgba(28, 58, 120, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--color-primary); text-wrap: balance; margin: 0 0 0.5em; }
p { margin: 0 0 0.75em; }

button { font-family: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: 0.9rem 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
/* ÄNDERUNG (Abschnitt 42): .app-brand ist jetzt eine Zeile (Logo + Text)
   statt nur des Textblocks; der bisherige Spalten-Textblock lebt als
   .app-brand-text weiter. Das Logo bekommt einen kleinen weißen
   Hintergrund-Chip, weil sein Wortlaut/Umriss teils in dunklem Blau
   gestaltet ist (siehe assets/logo.png) und auf dem dunkelblauen
   Header-Hintergrund (--color-primary) sonst kaum lesbar wäre — auf dem
   weißen PDF-Berichtskopf (.report-logo) besteht dieses Problem nicht,
   dort wird das Logo unverändert ohne Chip verwendet. */
.app-brand { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; }
.app-brand-logo { height: 30px; width: auto; display: block; background: #fff; padding: 3px 7px; border-radius: 6px; }
.app-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.app-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.app-brand-sub { font-size: 0.8rem; color: #b9cadb; }
.app-nav { display: flex; gap: 0.6rem; align-items: center; }
.nav-link {
  background: transparent; border: 1px solid rgba(255,255,255,0.35); color: #fff;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.9rem;
}
.nav-link-active { background: rgba(255,255,255,0.15); }

/* "Eyebrow"-Text: kleine, groß geschriebene Kennzeichnung über einer
   Überschrift — Design-Angleich an das Bewertungen-Portal (dort
   .bp24r-eyebrow). Pilot-Einsatz zunächst nur auf Login/Dashboard. */
.eyebrow {
  display: block; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.75rem; font-weight: 700; color: var(--color-accent-strong);
  margin: 0 0 0.4em;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
  border: none; border-radius: var(--radius-pill); padding: 0.6rem 1.3rem;
  font-size: 0.95rem; font-weight: 700; transition: background 0.15s ease, transform 0.15s ease;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-strong); transform: translateY(-1px); }
.btn-primary:disabled { background: var(--color-border); color: var(--color-text-faint); cursor: not-allowed; transform: none; }
.btn-secondary { background: #fff; color: var(--color-primary); border: 2px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-surface); border-color: var(--color-accent); }
.btn-large { padding: 0.85rem 1.6rem; font-size: 1.0rem; }
.btn-small { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.btn-link { background: none; border: none; color: var(--color-accent-strong); text-decoration: underline; padding: 0; font-size: 0.85rem; }

/* -------------------------------------------------------------------------
   Anmeldung / Passwort ändern / Benutzerverwaltung
   ------------------------------------------------------------------------- */

.auth-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); padding: 1.5rem;
}
.auth-card {
  background: linear-gradient(180deg, #ffffff 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 2.4rem 2.2rem; max-width: 400px; width: 100%; display: flex; flex-direction: column; gap: 0.9rem;
  box-shadow: var(--shadow-card-soft);
}
.app-brand-center { align-items: center; text-align: center; color: var(--color-primary); }
.app-brand-center .eyebrow { text-align: center; }
.app-brand-center .app-brand-name { font-size: 1.4rem; }
.auth-error {
  background: var(--color-danger-bg); color: var(--color-danger); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; font-size: 0.85rem; margin: 0;
}
.app-nav-user { font-size: 0.85rem; color: #dce6ef; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #8a3535; }
.inline-reset-form { display: inline-flex; align-items: center; gap: 0.4rem; }
.inline-reset-form input {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.3rem 0.5rem;
  font-family: inherit; font-size: 0.82rem;
}

/* -------------------------------------------------------------------------
   Dashboard
   ------------------------------------------------------------------------- */

.dashboard {
  display: grid; grid-template-columns: 1fr 320px; gap: 2rem;
  /* Nutzerwunsch "etwas breiter machen, die Ansicht ist sehr schmal":
     max-width angehoben von 1100px auf 1500px. */
  padding: 2rem; max-width: 1500px; margin: 0 auto; width: 100%;
}
.section-title { font-size: 1.1rem; margin-top: 1.5rem; }
.customer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.customer-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 0.9rem 1.2rem; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.customer-row:hover { border-color: var(--color-accent); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.customer-name { font-weight: 500; flex: 1; }
.customer-delete-btn { margin-left: 0.8rem; }
.delete-case-panel {
  background: var(--color-danger-bg); border: 1px solid var(--color-danger); border-radius: var(--radius-md);
  padding: 0.8rem 1rem; margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.delete-case-panel textarea {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem; font-family: inherit; font-size: 0.88rem; resize: vertical;
}
.delete-case-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }

.new-case-dialog {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 1rem 1.2rem; margin: 0.8rem 0 1.2rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.new-case-dialog .section-subtitle { margin-top: 0; }

/* To-Dos (siehe createTodoItem(), js/data.js) ----------------------------- */
.todo-badge {
  font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-weight: 500;
  background: var(--color-warning-bg); color: var(--color-warning); margin-left: 0.6rem;
}
.todo-panel {
  margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border);
}
.todo-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; color: var(--color-primary); margin-bottom: 0.5rem;
}
.todo-dialog {
  display: flex; flex-direction: column; gap: 0.4rem;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.6rem; margin-bottom: 0.6rem;
}
.todo-dialog input[type="text"], .todo-dialog input[type="date"] {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.4rem 0.5rem; font-family: inherit;
}
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.todo-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem; font-size: 0.85rem;
}
.todo-item-overdue { border-color: var(--color-danger); background: var(--color-danger-bg); }
.todo-item-check { display: flex; align-items: center; gap: 0.4rem; flex: 1; cursor: pointer; }
.todo-due { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; }
.todo-item-overdue .todo-due { color: var(--color-danger); font-weight: 600; }
.todo-due-none { color: var(--color-text-faint); }

.dash-todo-section { margin-bottom: 1.2rem; }
.dash-todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.dash-todo-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem; cursor: pointer;
}
.dash-todo-row:hover { border-color: var(--color-accent); }
.dash-todo-row .todo-item-check { flex: 1 1 auto; min-width: 12rem; }
.dash-todo-overdue { border-color: var(--color-danger); background: var(--color-danger-bg); }
.dash-todo-overdue .todo-due { color: var(--color-danger); font-weight: 600; }
.dash-todo-customer { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 500; }

.status-pill { font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-weight: 500; }
.status-entwurf { background: var(--color-surface-strong); color: var(--color-text-muted); }
.status-in_bearbeitung { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.status-bericht_zu_pruefen { background: var(--color-warning-bg); color: var(--color-warning); }
.status-abgeschlossen { background: var(--color-success-bg); color: var(--color-success); }

.dashboard-stats { display: flex; flex-direction: column; gap: 1rem; }
.stat-tile {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1.1rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  box-shadow: var(--shadow-card);
}
.stat-tile-warning { border-color: var(--color-warning); box-shadow: inset 4px 0 0 var(--color-warning); }
.stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: 0.85rem; color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   Interne Qualitätssicherung (Dashboard)
   ------------------------------------------------------------------------- */

.dashboard-qs-wrapper { max-width: 1500px; margin: 0 auto; width: 100%; padding: 0 2rem 2rem; }
.qs-section { border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
.qs-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 0.5rem; }
.qs-group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; }
.qs-tiles { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.qs-tile {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 108px; flex: 1 1 108px;
}
.qs-tile-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 600; color: var(--color-primary); }
.qs-tile-label { font-size: 0.72rem; color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   Wizard
   ------------------------------------------------------------------------- */

.wizard { display: grid; grid-template-columns: 260px 1fr; gap: 0; flex: 1; }
.wizard-nav { background: var(--color-surface); border-right: 1px solid var(--color-border); padding: 1.2rem; }
.wizard-patient { font-weight: 600; color: var(--color-primary); margin-bottom: 0.8rem; }
.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.step-nav-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--color-text-muted); cursor: pointer;
}
.step-nav-item:hover { background: var(--color-surface-strong); }
.step-nav-active { background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 600; }
.step-nav-done .step-number { background: var(--color-success); color: #fff; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--color-border);
  font-size: 0.75rem; font-family: var(--font-mono); flex-shrink: 0;
}

/* Nutzerwunsch "etwas breiter machen, die Ansicht ist sehr schmal":
   max-width angehoben von 760px auf 1200px — betrifft insbesondere die
   MDK-Einschätzung mit ihren langen Kriterienlisten und Freitextfeldern. */
.wizard-content { padding: 1.8rem 2.2rem; max-width: 1200px; }
.progress-bar { height: 6px; background: var(--color-surface-strong); border-radius: 999px; margin-bottom: 1rem; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--color-accent); }
.wizard-actions { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }

.section-subtitle { font-size: 0.95rem; margin-top: 1.5rem; color: var(--color-primary); }

/* -------------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.2rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.field-wide { grid-column: 1 / -1; }
.field-label { font-weight: 500; color: var(--color-text-muted); }
.field input[type="text"], .field input[type="date"], .field input[type="email"],
.field input[type="password"], .field input[type="number"], .field select, .field textarea {
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem; font-family: inherit; font-size: 0.92rem;
  background: var(--color-surface); color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-accent); background: #fff;
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}
.field textarea { resize: vertical; }
.field-checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
.field-checkbox input { width: 1.05rem; height: 1.05rem; }

.hint-note { font-size: 0.85rem; color: var(--color-text-muted); background: var(--color-surface); border-left: 3px solid var(--color-accent); padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); }

/* -------------------------------------------------------------------------
   Red Flags — rein hinweisgebend, keine automatische Entscheidung
   ------------------------------------------------------------------------- */

.redflag-banner {
  background: var(--color-danger-bg); border: 1px solid var(--color-danger);
  border-radius: var(--radius-md); padding: 0.9rem 1.1rem; margin-bottom: 1.2rem;
}
.redflag-title { font-weight: 700; color: var(--color-danger); margin: 0 0 0.4rem; font-size: 0.95rem; }
.redflag-banner ul { margin: 0 0 0.5rem; padding-left: 1.3rem; color: var(--color-danger); font-size: 0.9rem; }
.redflag-hint { font-size: 0.78rem; color: var(--color-text-muted); font-style: italic; margin: 0; }

/* -------------------------------------------------------------------------
   Versorgungsmatrix
   ------------------------------------------------------------------------- */

.matrix { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.matrix-row { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; background: var(--color-surface); }
.matrix-row-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }

.badge { font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-weight: 600; }
.badge-suggestion { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-ai { background: var(--color-accent-soft); color: var(--color-accent-strong); }

.hints-explainer { margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.4rem; }

/* -------------------------------------------------------------------------
   Baustein "Pflegefachliche Einschätzung MDK" (mdk-assessment.js)
------------------------------------------------------------------------- */
.mdk-module-card .matrix-row-head { justify-content: space-between; }
.mdk-module-progress { font-size: 0.8rem; color: var(--color-text-muted); }
.mdk-item-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.8rem; }
.mdk-item-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); background: var(--color-bg);
}
.mdk-item-row:nth-child(odd) { background: var(--color-surface-strong); }
.mdk-item-label { font-size: 0.86rem; flex: 1; }
.mdk-item-id { font-family: var(--font-mono, monospace); color: var(--color-text-muted); margin-right: 0.4rem; }
.mdk-item-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.mdk-item-select { min-width: 260px; max-width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.3rem 0.5rem; font-family: inherit; font-size: 0.82rem; }
.mdk-item-points {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--report-blue, var(--color-primary));
  background: var(--color-accent-soft); border-radius: 999px; padding: 0.15rem 0.5rem; white-space: nowrap; cursor: help;
}
.mdk-item-points-unverified { color: var(--color-text-muted); background: var(--color-surface-strong); font-style: italic; }
.mdk-module-note { margin-top: -0.3rem; margin-bottom: 0.5rem; }
@media (max-width: 720px) {
  .mdk-item-row { flex-direction: column; align-items: stretch; }
  .mdk-item-controls { flex-wrap: wrap; }
  .mdk-item-select { min-width: 0; width: 100%; }
}

/* Modul-5-Häufigkeitserfassung (5.1–5.15): Auswahl + Anzahl + Einheit */
.mdk-item-controls-freq { flex-wrap: wrap; }
.mdk-freq-count { width: 5.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.3rem 0.5rem; font-family: inherit; font-size: 0.82rem; }
.mdk-freq-unit { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.3rem 0.5rem; font-family: inherit; font-size: 0.82rem; }

/* Besondere Bedarfskonstellation (Modul 1, F 4.1.B) */
.mdk-bedarfskonstellation { background: var(--color-warning-bg); border: 1px solid var(--color-warning); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; }
.mdk-bedarfskonstellation .field-checkbox { align-items: flex-start; }
.mdk-bedarfskonstellation .hint-note { margin: 0.4rem 0 0; background: transparent; border: none; padding: 0; }

/* Live berechnetes Ergebnis (Wizard) */
.mdk-result-box { border: 1px solid var(--report-blue, var(--color-primary)); border-radius: var(--radius-md); padding: 1rem 1.2rem; margin: 1.2rem 0; background: var(--color-surface); }
.mdk-result-box h4 { margin: 0 0 0.5rem; color: var(--report-blue, var(--color-primary)); }
.mdk-result-modules { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.8rem 0; }
.mdk-result-row { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.85rem; padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); background: var(--color-surface-strong); }
.mdk-result-row-title em { font-style: normal; color: var(--color-text-muted); font-size: 0.78rem; }
.mdk-result-row-excluded { opacity: 0.6; }
.mdk-result-excluded-note { font-size: 0.75rem; color: var(--color-text-muted); }
.mdk-result-total { display: flex; justify-content: space-between; font-size: 1.0rem; font-weight: 600; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); }
.mdk-result-total-value { font-family: var(--font-mono); }
.mdk-result-pflegegrad { margin-top: 0.4rem; font-size: 0.95rem; }

/* Kontinenz-Zusatzangaben zu Modul 4 (Abschnitt 35.2) */
.mdk-kontinenz-section {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem; margin: 0.8rem 0; background: var(--color-surface-strong);
}
.mdk-kontinenz-section h4 { margin: 0 0 0.3rem; font-size: 0.95rem; }

/* -------------------------------------------------------------------------
   Tabellen (Zeiterfassung / Rechnung)
   ------------------------------------------------------------------------- */

.time-entry-form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.time-entry-form input, .time-entry-form select {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; font-family: inherit;
}

.service-add-form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; }
.service-add-form input, .service-add-form select {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; font-family: inherit;
}
.svc-price-input { width: 6.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.35rem 0.5rem; font-family: inherit; }

.data-transfer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1rem; }
.data-transfer-box {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.data-transfer-box h4 { margin: 0; color: var(--color-primary); }
.data-transfer-success { color: var(--color-success); }
@media (max-width: 720px) { .data-transfer-grid { grid-template-columns: 1fr; } }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-bottom: 1.2rem; }
.data-table th, .data-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--color-border); }
.data-table thead th { color: var(--color-text-muted); font-weight: 500; }
.data-table td.num, .data-table th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.data-table tfoot td { font-weight: 600; border-top: 2px solid var(--color-border); border-bottom: none; }
.empty { color: var(--color-text-faint); font-style: italic; }

/* -------------------------------------------------------------------------
   Pflege-Fahrplan
   ------------------------------------------------------------------------- */

.plan-add-form { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.6rem; margin-bottom: 1.2rem; }
.plan-add-form input, .plan-add-form select { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; font-family: inherit; }
.plan-add-form .wide { grid-column: 1 / -1; }

.plan-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.plan-column { background: var(--color-surface); border-radius: var(--radius-md); padding: 0.9rem; }
.plan-item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.7rem; margin-bottom: 0.6rem; }
.plan-item-done { opacity: 0.55; }
.plan-meta { font-size: 0.78rem; color: var(--color-text-muted); }

.plan-item-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.plan-item-title-input {
  flex: 1; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 0.3rem 0.4rem; font-family: inherit; font-size: 0.95rem; background: transparent;
}
.plan-item-title-input:hover, .plan-item-title-input:focus { border-color: var(--color-border); background: #fff; }
.plan-item-desc-input {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.4rem 0.5rem; font-family: inherit; font-size: 0.85rem; margin-bottom: 0.5rem; resize: vertical;
}
.plan-item-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.6rem; margin-bottom: 0.5rem; }
.plan-item-subfield {
  display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.72rem; color: var(--color-text-muted);
}
.plan-item-subfield input, .plan-item-subfield select {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.35rem 0.4rem;
  font-family: inherit; font-size: 0.82rem; color: var(--color-text);
}

/* -------------------------------------------------------------------------
   Checkliste / Interessenkonflikt
   ------------------------------------------------------------------------- */

.checklist { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.checklist-item { font-size: 0.92rem; padding: 0.3rem 0; }
.checklist-mark { font-family: var(--font-mono); margin-right: 0.3rem; }
.checklist-done { color: var(--color-success); }
.checklist-open { color: var(--color-warning); font-weight: 500; }

.conflict-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }

/* -------------------------------------------------------------------------
   KI-Entwurf
   ------------------------------------------------------------------------- */

.ai-draft-box { border: 1px dashed var(--color-accent); border-radius: var(--radius-md); padding: 0.8rem; margin-top: 0.8rem; background: var(--color-accent-soft); }
.ai-draft-text { white-space: pre-wrap; font-size: 0.9rem; }
.ai-draft-actions { display: flex; gap: 0.8rem; align-items: center; }

/* -------------------------------------------------------------------------
   Bericht (Bildschirm)
   ------------------------------------------------------------------------- */

.report-wrapper { display: flex; justify-content: center; padding: 2rem; background: var(--color-surface); }

/* Markenfarben des Berichts/PDF (Blau/Gold). Bewusst nur auf ".report-page"
   als eigene CSS-Variablen gesetzt — die interne Anwendungsoberfläche
   (Dashboard, Assistent) bleibt bei der neutralen Arbeitsfarbwelt oben in
   :root, siehe Annahme in docs/spezifikation.md. */
.report-page {
  --report-blue: #1C3A78;
  --report-blue-soft: #eef1f8;
  --report-gold: #A4813A;
  --report-gold-soft: #f8f2e7;

  /* Nutzerwunsch "soll schon ein wenig wie ein Gutachten aussehen": kompaktere
     Grundschriftgröße/Zeilenhöhe für den gesamten Bericht (gilt nur innerhalb
     von .report-page, nicht für die interne Arbeitsoberfläche). */
  background: #fff; box-shadow: var(--shadow-card); padding: 2rem; width: 210mm; min-height: 297mm; max-width: 100%;
  font-size: 0.77rem; line-height: 1.42;
}
.report-header { border-bottom: 3px solid var(--report-blue); padding-bottom: 0.7rem; margin-bottom: 1rem; }
/* ÄNDERUNG (Abschnitt 42): ersetzt die frühere Textzeile ".report-brand"
   ("BETREUUNGSPORTAL 24") durch das Logo als Bild. Höhe bewusst fest
   (statt z. B. Prozent der Seitenbreite), damit das Logo unabhängig von
   seinem Seitenverhältnis kompakt über dem Berichtstitel bleibt und nicht
   mit dem restlichen Kopfbereich konkurriert; Breite ergibt sich
   automatisch aus dem Seitenverhältnis der Bilddatei. */
.report-logo { height: 34px; width: auto; display: block; margin-bottom: 0.35rem; }
.report-header h1 { margin: 0.2rem 0 0; font-size: 1.23rem; color: var(--report-blue); }
.report-header h2 { margin: 0; font-size: 0.89rem; color: var(--color-text-muted); font-weight: 500; }
.report-meta { font-size: 0.71rem; color: var(--color-text-muted); margin-top: 0.5rem; }
.report-section { margin-bottom: 1rem; }
/* ÄNDERUNG (Abschnitt 42): Schriftgröße der Abschnitts-Überschriften
   (Stammdaten, Angaben der Familie, Allgemeine Informationen, Fachliche
   Einschätzung, Empfehlungen / nächste Schritte, sowie dieselbe Klasse in
   der MDK-Einschätzung und im Pflegetagebuch) auf ausdrücklichen Wunsch
   von 0.73rem auf 0.95rem angehoben — deutlich sichtbar größer als der
   Fließtext (0.77rem Basisgröße des Berichts), ohne die bestehenden
   Seitenumbruch-Regeln (break-after: avoid-page) zu berühren. */
.report-section h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--report-blue); border-bottom: 1px solid var(--report-gold); padding-bottom: 0.25rem; break-after: avoid-page; page-break-after: avoid; }

/* Nutzerwunsch nach wiederholten willkürlichen Umbrüchen ("manche
   Überschriften ganz unten auf Seite 3, das Wichtige erst auf Seite 4"):
   statt weiter auf Orphan-/Widow-Heuristiken zu vertrauen, beginnt jedes
   der sechs MDK-Module (sowie der Kontinenz-Zusatzabschnitt, der dieselbe
   Klasse trägt) jetzt IMMER auf einer neuen Seite — "im Zweifel beginne
   jedes Modul auf einer neuen Seite". Das kostet unter Umständen etwas
   Weißraum am Ende der vorherigen Seite, verhindert dafür zuverlässig, dass
   eine Modul-Überschrift von ihrem Inhalt getrennt wird. */
.report-mdk-module { break-before: page; page-break-before: always; }
/* Entsprechend für die umfangreicheren Abschnitte des Pflege-Fahrplan-
   Berichts (Allgemeine Informationen/Versorgungsmatrix, Fachliche
   Einschätzung, Empfehlungen) — die kurzen Listen-Abschnitte (Angaben der
   Familie, Offene Punkte, Familien-Checkliste) bleiben bewusst ohne
   erzwungenen Umbruch, da dort kein Platz verschenkt werden muss. */
.report-page-start { break-before: page; page-break-before: always; }
.report-row { margin-bottom: 0.45rem; font-size: 0.75rem; }
.report-row strong { display: block; color: var(--color-text-muted); font-size: 0.67rem; font-weight: 500; }
.report-mdk-points { font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-text-muted); font-weight: 400; }
.report-open-points ul { margin: 0; padding-left: 1.2rem; }
.report-disclaimer { margin-top: 1.5rem; padding-top: 0.8rem; border-top: 1px solid var(--color-border); font-size: 0.66rem; color: var(--color-text-muted); font-style: italic; }

/* -------------------------------------------------------------------------
   MDK-Bericht: rechtlicher Hinweis (Kopf), Gesamtergebnis-Abschnitt (Ende)
   ------------------------------------------------------------------------- */
.report-legal-notice { background: var(--color-warning-bg); border: 1px solid var(--color-warning); border-radius: var(--radius-md); padding: 0.75rem 0.95rem; margin-bottom: 1rem; break-inside: avoid; }
.report-legal-notice h3 { margin: 0 0 0.4rem; font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-warning); border: none; padding: 0; }
.report-legal-notice p { margin: 0 0 0.4rem; font-size: 0.73rem; color: var(--color-text); }
.report-legal-notice p:last-child { margin-bottom: 0; }
.report-legal-notice-clarifier { font-weight: 600; color: var(--color-warning); }
.report-mdk-gesamtergebnis { break-inside: avoid; }
.report-mdk-ergebnis { background: var(--report-blue-soft); border-radius: var(--radius-sm); padding: 0.75rem 0.95rem; break-inside: avoid; }
.report-mdk-ergebnis-note { font-size: 0.66rem; color: var(--color-text-muted); margin: 0 0 0.55rem; }
.report-mdk-ergebnis-total { font-size: 0.77rem; margin: 0.35rem 0 0; }
.report-legal-closing { font-size: 0.68rem; color: var(--color-text-muted); background: var(--color-surface); border-left: 3px solid var(--color-warning); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-top: 0.75rem; }
.report-signature { margin-top: 1.7rem; max-width: 22rem; }
.report-signature-line { border-bottom: 1px solid var(--color-text); height: 2rem; }
.report-signature-label { margin: 0.3rem 0 0; font-size: 0.64rem; color: var(--color-text-muted); }

.report-redflags { background: var(--color-danger-bg); border: 1px solid var(--color-danger); border-radius: var(--radius-md); padding: 1rem 1.2rem; }
.report-redflags h3 { color: var(--color-danger); border-bottom-color: var(--color-danger); }
.report-redflags ul { margin: 0 0 0.4rem; padding-left: 1.3rem; color: var(--color-danger); }
.report-redflags-hint { font-size: 0.71rem; color: var(--color-text-muted); font-style: italic; margin: 0; }

/* -------------------------------------------------------------------------
   Pflegetagebuch-Vorlage (leeres, ausdruckbares Formular, report.js)
   ------------------------------------------------------------------------- */
.pflegetagebuch-page-break { break-after: page; page-break-after: always; }
.pflegetagebuch-fill-line { border-bottom: 1px solid var(--color-border); min-width: 220px; min-height: 1.1em; display: inline-block; }
.pflegetagebuch-fill-line-short { min-width: 140px; }
.pflegetagebuch-module-hint { font-size: 0.71rem; color: var(--color-text-muted); font-style: italic; display: block; }
.pflegetagebuch-table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; table-layout: fixed; }
.pflegetagebuch-table th, .pflegetagebuch-table td { border: 1px solid var(--color-border); padding: 0.4rem 0.5rem; vertical-align: top; font-size: 0.71rem; }
.pflegetagebuch-table th { background: var(--color-surface); color: var(--report-blue); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.66rem; }
.pflegetagebuch-table .pflegetagebuch-module-cell { width: 22%; }
.pflegetagebuch-table .pflegetagebuch-note-cell { height: 4.4rem; }
.pflegetagebuch-freitext { margin-top: 1rem; }
.pflegetagebuch-freitext-lines { border: 1px solid var(--color-border); border-radius: var(--radius-sm); height: 3.2rem; margin-top: 0.3rem; }

.report-domain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.report-domain-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; break-inside: avoid; }
.report-domain-card h4 { margin: 0 0 0.4rem; font-size: 0.71rem; color: var(--report-blue); text-transform: uppercase; letter-spacing: 0.03em; }
/* Bewusst kein Flex-/Grid-Container mehr für die Kriterienzeilen: Flex-Boxen
   werden von Druck-Engines beim Seitenumbruch oft als ein einziger,
   unteilbarer Block behandelt — passt eine lange Zeilenliste nicht mehr auf
   die restliche Seite, wird der GESAMTE Block auf die nächste Seite
   verschoben, was genau die vom Nutzer bemängelten großen Leerräume erzeugt
   (z. B. Modul 3 im ursprünglichen Bericht). Als normale Blockelemente
   fragmentieren die einzelnen Zeilen sauber zwischen Seiten. */
.report-field-grid { margin-bottom: 0.3rem; }
.report-field { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.69rem; border-bottom: 1px dotted var(--color-border); padding-bottom: 0.15rem; margin-bottom: 0.3rem; break-inside: avoid; }
.report-field-label { color: var(--color-text-muted); }
.report-field-value { font-weight: 500; text-align: right; }

/* Stammdaten-Layout auf Nutzerwunsch: "nebeneinander, bis die Zeile voll
   ist, dann darunter" statt einer Zeile pro Feld (renderFieldsWrap(),
   js/report.js) — für kurze Einzelangaben wie Name/Geburtsdatum/
   Versicherungsnummer platzsparender als der vertikale .report-row-Stil. */
.report-field-wrap { display: flex; flex-wrap: wrap; column-gap: 1.4rem; row-gap: 0.35rem; break-inside: avoid; }
.report-field-wrap-item { font-size: 0.71rem; white-space: nowrap; }
.report-field-wrap-item strong { color: var(--color-text-muted); font-weight: 600; }

/* -------------------------------------------------------------------------
   Fachliche Einschätzung — ein klar abgegrenzter Textblock statt loser Zeilen
   ------------------------------------------------------------------------- */

.report-assessment-box { background: var(--report-blue-soft); border-left: 3px solid var(--report-blue); border-radius: var(--radius-sm); padding: 0.7rem 0.95rem; }
.report-assessment-box p { margin: 0 0 0.45rem; font-size: 0.75rem; orphans: 3; widows: 3; }
.report-assessment-box p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Orientierung & Empfehlungen — Unterabschnitte, Karten statt Fließtext
   (Abschnitt bis Abschnitt 42 "Empfehlungen / nächste Schritte" genannt,
   siehe Umbenennung in Abschnitt 44)
   ------------------------------------------------------------------------- */

.report-recommend-subgroup { margin-bottom: 0.9rem; }
.report-recommend-subgroup:last-child { margin-bottom: 0; }
/* ÄNDERUNG (Abschnitt 44): Einleitender Absatz direkt unter der
   Abschnittsüberschrift "Orientierung & Empfehlungen", ersetzt die vorher
   hier über der Liste gezeigte Zwischenüberschrift (Klasse
   .report-subheading, aus Abschnitt 42) — diese Klasse hat dadurch keinen
   Verwendungsort mehr und wurde entfernt (siehe Kommentar in js/report.js
   bei renderPlanRecommendationList()). */
.report-recommend-intro { margin: 0 0 0.7rem; font-size: 0.73rem; color: var(--color-text-muted); }

.report-option-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.report-option-card { background: #fff; border: 1px solid var(--color-border); border-left: 3px solid var(--report-gold); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; break-inside: avoid; }
.report-option-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.report-option-card-head strong { color: var(--report-blue); font-size: 0.76rem; }
.report-option-card p { margin: 0; font-size: 0.73rem; }
.report-suitability-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; display: inline-block; }
.report-dot-green { background: var(--color-success); }
.report-dot-yellow { background: var(--color-warning); }
.report-dot-red { background: var(--color-danger); }
.report-suitability-label { margin-left: auto; font-size: 0.64rem; color: var(--color-text-muted); font-style: italic; }

.report-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.report-plan-list li { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; break-inside: avoid; }
.report-plan-item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.report-plan-item-head strong { font-size: 0.75rem; color: var(--color-text); }
.report-plan-list li p { margin: 0.25rem 0 0; font-size: 0.71rem; }
.report-priority-tag { flex: none; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--report-gold); border: 1px solid var(--report-gold); border-radius: 999px; padding: 0.1rem 0.5rem; }
.report-plan-meta { color: var(--color-text-muted); font-size: 0.66rem !important; font-style: italic; }

/* -------------------------------------------------------------------------
   Ihre nächsten Schritte (bis Abschnitt 43 "Nächste Schritte für die
   Familie" genannt, siehe Umbenennung in Abschnitt 44) — abhakbare
   Checkliste, eigener Abschnitt
   ------------------------------------------------------------------------- */

.report-family-checklist { background: var(--report-gold-soft); border: 1px solid var(--report-gold); border-radius: var(--radius-md); padding: 0.85rem 1.05rem; }
.report-family-checklist h3 { border-bottom-color: var(--report-blue); }
.report-family-hint { font-size: 0.67rem; color: var(--color-text-muted); font-style: italic; margin: 0 0 0.6rem; }
.report-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.report-checklist li { display: flex; align-items: flex-start; gap: 0.6rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; break-inside: avoid; }
.report-checkbox { flex: none; font-size: 0.91rem; line-height: 1.3; color: var(--report-blue); }
.report-checklist-item-body { flex: 1; }
.report-checklist-item-body p { margin: 0.25rem 0 0; font-size: 0.71rem; }

/* -------------------------------------------------------------------------
   Druckansicht / A4-PDF
   ------------------------------------------------------------------------- */

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .report-wrapper { padding: 0; background: #fff; display: block; }
  .report-page { box-shadow: none; width: auto; min-height: auto; padding: 0; }
  /* .report-assessment-box bewusst NICHT (mehr) hier: Diese Boxen enthalten
     den zusammengeführten Modul-Fließtext und sind oft länger als eine
     Seite. "break-inside: avoid" auf dem gesamten, unbekannt langen Block
     führte dazu, dass Druck-Engines den kompletten Block auf die nächste
     Seite verschoben, sobald er nicht mehr in den Rest der aktuellen Seite
     passte — das erzeugte genau die vom Nutzer bemängelten großen
     Leerräume am Seitenende. Stattdessen bricht die Box jetzt frei
     zwischen ihren Absätzen um; break-inside: avoid sitzt stattdessen auf
     den einzelnen, kurzen <p>-Absätzen selbst (.report-assessment-box p),
     die problemlos als Ganzes auf eine Seite passen. */
  .report-option-card, .report-plan-list li, .report-checklist li, .report-family-checklist { break-inside: avoid; }
  .report-legal-notice, .report-mdk-gesamtergebnis, .report-mdk-ergebnis, .report-signature { break-inside: avoid; }
  .report-assessment-box p { break-inside: avoid; }
  @page { size: A4; margin: 16mm 15mm; }
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .dashboard { grid-template-columns: 1fr; }
  .wizard { grid-template-columns: 1fr; }
  .wizard-nav { border-right: none; border-bottom: 1px solid var(--color-border); }
  .form-grid { grid-template-columns: 1fr; }
  .plan-board { grid-template-columns: 1fr; }
  .plan-add-form { grid-template-columns: 1fr 1fr; }
  .plan-item-fields { grid-template-columns: 1fr; }
  .qs-groups { grid-template-columns: 1fr; }
  .report-domain-grid { grid-template-columns: 1fr; }
}