/*
  Gestaltung der geteilten Oberfläche.

  Ruhig, schlicht, unterstützend — angelehnt an docs/prototype/assets/app.css, aber ohne
  externe Schriften und ohne Icon-CDN: die Anwendung muss auch ohne Internetverbindung
  vollständig aussehen (und ein CDN wäre ein Datenabfluss, den niemand gebraucht hat).

  Ton: sachlich-neutral, keine Belohnungssprache, keine Gamification (F-19/F-23).
*/

:root {
  --grund: #faf9f7;
  --flaeche: #ffffff;
  --rand: #e4e0da;
  --text: #23201c;
  --text-leise: #6b645c;
  --akzent: #2f5d50;
  --akzent-leise: #eaf1ee;
  --warnung: #8a4b1f;
  --warnung-leise: #fdf3e8;
  --fehler: #8c2f2f;
  --fehler-leise: #fbeeee;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.huelle { display: flex; flex-direction: column; min-height: 100vh; }

/* -- Kopf ---------------------------------------------------------------- */
.kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}

.kopf-marke { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.marke-zeichen { color: var(--akzent); font-size: 20px; }
.kopf-nav { display: flex; gap: 6px; }

.nav-punkt {
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--text-leise);
  text-decoration: none;
}

.nav-punkt:hover { background: var(--akzent-leise); color: var(--akzent); }
.nav-punkt.active { background: var(--akzent-leise); color: var(--akzent); font-weight: 600; }

.kopf-konto { display: flex; align-items: center; gap: 12px; }
.konto-name { color: var(--text-leise); font-size: 15px; }

/* -- Inhalt -------------------------------------------------------------- */
.inhalt { flex: 1; width: 100%; max-width: 940px; margin: 0 auto; padding: 32px 24px 56px; }

h1 { font-size: 28px; margin: 0 0 6px; font-weight: 600; }
h2 { font-size: 21px; margin: 36px 0 10px; font-weight: 600; }
h3 { font-size: 17px; margin: 0 0 4px; font-weight: 600; }

.fuehrung { color: var(--text-leise); margin: 0 0 20px; max-width: 62ch; }
.klein { font-size: 14px; color: var(--text-leise); }
.laden, .leer { color: var(--text-leise); }

/* -- Regelstand (F-10) --------------------------------------------------- */
.regelstand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 24px;
  padding: 10px 14px;
  background: var(--akzent-leise);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-leise);
}

.regelstand-marke { font-weight: 600; color: var(--akzent); }
.regelstand-wert { font-variant-numeric: tabular-nums; }
.regelstand-trenner { color: var(--rand); }
.regelstand-hinweis { flex-basis: 100%; margin: 6px 0 0; }

/* -- Formular ------------------------------------------------------------ */
.feldgruppe {
  margin: 0 0 20px;
  padding: 18px 20px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}

.feldgruppe legend { padding: 0 6px; font-weight: 600; }
.feldgruppe-hinweis { margin: 0 0 14px; font-size: 14px; color: var(--text-leise); max-width: 68ch; }
.feldgruppe label { display: block; margin: 0 0 14px; font-size: 15px; }

.feld {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-top: 4px;
  padding: 9px 11px;
  font: inherit;
  color: inherit;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 8px;
}

.feld:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Fehlermeldung am Feld. .validation-message rendert Blazors <ValidationMessage>,
   .feld-fehler die Befunde der Regel-Engine — beide sehen gleich aus, damit die Herkunft
   der Meldung für die beratende Person keinen Unterschied macht. */
.validation-message,
.feld-fehler {
  margin: 5px 0 0;
  max-width: 420px;
  font-size: 14px;
  color: var(--fehler);
}

/* Blazor setzt invalid/valid zusätzlich zur eigenen Klasse, sobald ein Feld geprüft wurde. */
.feld.invalid { border-color: var(--fehler); }
.feld.invalid:focus-visible { outline-color: var(--fehler); }
.schalter input.invalid { outline: 2px solid var(--fehler); outline-offset: 2px; }

/* Sammelmeldung über der Knopfleiste: bei langen Formularen liegt der erste Fehler sonst
   außerhalb des Sichtfelds, wenn abgeschickt wird. */
.validation-errors {
  margin: 20px 0;
  padding: 14px 18px 14px 34px;
  background: var(--fehler-leise);
  border: 1px solid var(--fehler);
  border-radius: var(--radius);
  color: var(--fehler);
  font-size: 15px;
}

.validation-errors:empty { display: none; }

.schalter { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.schalter input { margin-top: 5px; }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }

.knopfleiste { display: flex; gap: 12px; margin: 24px 0; }

.knopf {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font: inherit;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.knopf-primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.knopf-primaer:disabled { opacity: 0.6; cursor: progress; }
.knopf-schlicht { padding: 6px 12px; font-size: 15px; }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* -- Pflegegrad ---------------------------------------------------------- */
.pflegegrad {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid var(--rand);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--flaeche);
}

.pflegegrad-anerkannt { border-left-color: var(--akzent); }
.pflegegrad-schaetzung { border-left-color: var(--warnung); background: var(--warnung-leise); }
.pflegegrad-zahl { font-size: 22px; font-weight: 600; }
.pflegegrad-text { margin: 6px 0 0; font-size: 15px; max-width: 70ch; }
.pflegegrad-module { margin-top: 12px; font-size: 15px; }

/* -- Leistungen ---------------------------------------------------------- */
.gruppe-titel { margin: 28px 0 10px; color: var(--text-leise); text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; }

.leistung {
  margin: 0 0 12px;
  padding: 16px 18px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}

.leistung-kopf { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.leistung-titel { margin: 0; }
.leistung-meta { margin: 4px 0 0; font-size: 14px; color: var(--text-leise); }
.leistung-trenner { color: var(--rand); margin: 0 6px; }
.leistung-betrag { margin: 10px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.leistung-frist { margin: 8px 0 0; font-size: 15px; }
.leistung-hinweis { margin: 8px 0 0; font-size: 15px; color: var(--warnung); }
.leistung-warum { margin-top: 10px; font-size: 15px; }
.leistung-warum summary { cursor: pointer; color: var(--akzent); }
.leistung-begruendung { margin: 8px 0 8px; font-size: 16px; }
.leistung-technik { margin: 0 0 8px; font-size: 13px; color: var(--text-leise); }
.leistung-technik summary { cursor: pointer; color: var(--text-leise); }
.leistung-herleitung { margin: 0 0 8px; font-size: 13px; color: var(--text-leise); }
.leistung-regel { margin: 0; font-size: 14px; color: var(--text-leise); }
.leistung-regel code { font-size: 13px; background: var(--grund); padding: 1px 5px; border-radius: 4px; }

.marke { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 13px; background: var(--grund); border: 1px solid var(--rand); color: var(--text-leise); }
.marke-sofort { background: var(--warnung-leise); border-color: var(--warnung); color: var(--warnung); }
.marke-kurzfristig { background: var(--akzent-leise); border-color: var(--akzent); color: var(--akzent); }

/* -- Tabellen, Hinweise, Fehler ------------------------------------------ */
.tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }
.tabelle th, .tabelle td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rand); font-size: 15px; }
.tabelle th { background: var(--grund); font-weight: 600; }
.tabelle tr:last-child td { border-bottom: none; }

.hinweiskasten { margin: 20px 0; padding: 16px 18px; background: var(--warnung-leise); border: 1px solid var(--warnung); border-radius: var(--radius); }
.hinweiskasten h3 { color: var(--warnung); }

.fehler { margin: 20px 0; padding: 16px 18px; background: var(--fehler-leise); border: 1px solid var(--fehler); border-radius: var(--radius); }
.fehler h2 { margin: 0 0 8px; font-size: 17px; color: var(--fehler); }

.ergebnis-zusammenfassung { max-width: 70ch; }
.ergebnis-profil { color: var(--text-leise); font-size: 15px; }
.geprueft { margin: 28px 0; }
.geprueft summary { cursor: pointer; color: var(--akzent); }

/* -- Zeitstrahl ------------------------------------------------------------ */
.zeitstrahl { list-style: none; margin: 0 0 24px; padding: 0 0 0 4px; border-left: 2px solid var(--rand); }

.zeitstrahl li {
  position: relative;
  margin: 0 0 16px;
  padding: 0 0 0 20px;
  font-size: 15px;
}

.zeitstrahl li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--flaeche);
  border: 2px solid var(--rand);
}

.zeitstrahl-datum { display: block; font-size: 13px; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.zeitstrahl-titel { font-weight: 600; color: inherit; text-decoration: none; }
a.zeitstrahl-titel { color: var(--akzent); text-decoration: underline; }

.zeitstrahl li.heute::before { background: var(--akzent); border-color: var(--akzent); }
.zeitstrahl li.vergangen { color: var(--text-leise); }
.zeitstrahl li.vergangen::before { background: var(--rand); border-color: var(--rand); }

/* -- Anmeldung ----------------------------------------------------------- */
.anmelden { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.anmelden-karte { width: 100%; max-width: 400px; padding: 28px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px; }
.anmelden-karte h1 { font-size: 22px; }
.anmelden-oder { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-leise); font-size: 14px; }
.anmelden-oder::before, .anmelden-oder::after { content: ""; flex: 1; height: 1px; background: var(--rand); }
.anmelden-fuss { margin: 20px 0 0; font-size: 13px; color: var(--text-leise); text-align: center; }

/* -- Fuß ----------------------------------------------------------------- */
.fuss { padding: 20px 24px; border-top: 1px solid var(--rand); background: var(--flaeche); }
.fuss p { margin: 0 auto; max-width: 940px; font-size: 14px; color: var(--text-leise); }

@media (max-width: 640px) {
  .inhalt { padding: 24px 16px 40px; }
  .leistung-kopf { flex-direction: column; }
}