/* ==========================================================================
   SPIDO · SYSTEMHÜLLE (Alpha 1) — Login, Spido-Startseite, Pflegedienst-
   profil, Administration, Betreiberverwaltung und Aufschaltzustand.
   Baut vollständig auf designsystem/spido-system.css auf.
   ========================================================================== */

/* Pfad innerhalb einer Arbeitsseite: ohne Flächenbalken */
.page .crumbs { background: none; padding: 0 0 10px; }

/* --------------------------------- Login --------------------------------- */

.login-body { margin: 0; background: var(--sp-bg); font-family: var(--sp-font); }
.login {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; padding: 24px;
}
.login__card {
  width: 360px; max-width: calc(100vw - 48px);
  background: var(--sp-surface-raised); border: 1px solid var(--sp-line-strong);
  border-radius: 16px; padding: 30px 32px 26px;
  box-shadow: 0 18px 50px rgba(44, 36, 24, 0.08);
}
.login__brand {
  display: flex; align-items: center; gap: 7px; margin: 0 0 18px;
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--sp-ink);
}
.login__title { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: var(--sp-ink); }
.login__form { display: flex; flex-direction: column; gap: 12px; }
.login__form .btn { margin-top: 6px; justify-content: center; text-align: center; }
.login__field { display: flex; flex-direction: column; gap: 5px; }
.login__field span {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sp-ink-3);
}
.login__field input {
  padding: 9px 12px; border: 1px solid var(--sp-line-strong); border-radius: 9px;
  font: inherit; font-size: 13.5px; background: var(--sp-surface); color: var(--sp-ink);
}
.login__field input:focus { outline: 2px solid var(--sp-primary); outline-offset: 1px; border-color: var(--sp-primary); }
.login__field input::placeholder { color: var(--sp-ink-3); }
.login__note { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--sp-ink-3); }
/* --- Die Zugangskarte: Einladung einlösen (MYS-256, Julia 26.10.2026) ----- */
/* Sie ist die Anmeldekarte mit mehr Inhalt - vier Felder statt zwei und die
   zwei Vereinbarungen. Deshalb eine BREITERE Karte und sonst nichts Neues;
   Marke, Titel, Feld, Fuß und Knopf sind dieselben Bauteile. */
.login__card--weit { width: 480px; }
.login__lede { margin: -6px 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--sp-ink-2); }
.login__card--weit .login__note:first-of-type { margin-top: 0; }
/* DER ZUSTIMMUNGSBLOCK BEHÄLT SEIN MARKUP. `zustimmung_block()` ist die EINE
   Stelle, an der die zwei Vereinbarungen stehen - mit den Texten aus
   `rechtstexte`. Hier bekommen seine Klassen eine Regel FÜR DIESE KARTE
   (`.login__card` davor), damit dieselbe Herkunft in beiden Hüllen aussieht,
   wie sie soll. Eine zweite Fassung des Blocks wäre zwei Orte für einen
   Rechtstext, und der zweite wäre der veraltete. */
.login__card .kostenfrei-hinweis {
  margin: 4px 0 14px; padding: 12px 14px; border-radius: 10px;
  border-left: 4px solid #1F7A4C; background: #EAF6EF;
  font-size: 13px; line-height: 1.45; color: var(--sp-ink);
}
.login__card .vereinbarungen { margin: 0 0 4px; }
.login__card .vereinbarungen .badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sp-primary-deep);
}
.login__card .vereinbarungen h3 { font-size: 15px; font-weight: 700; color: var(--sp-ink); }
.login__card .vereinbarung {
  display: flex; align-items: flex-start; gap: 9px; margin: 0 0 9px;
  font-size: 12.5px; line-height: 1.45; color: var(--sp-ink-2); cursor: pointer;
}
.login__card .vereinbarung input { margin: 2px 0 0; width: 15px; height: 15px; flex: none;
                                   accent-color: var(--sp-primary); }
/* Die zwei Vertragslinks tragen die Farbe des Systems statt des Browsers.
   Ohne diese Zeile stehen sie blau-unterstrichen in einer violetten Karte —
   das einzige Blau auf der Seite, und ausgerechnet auf dem Text, den der
   Nutzer rechtsverbindlich bestätigt. */
.login__card .vereinbarung a, .login__card .login__note a {
  color: var(--sp-primary-deep); text-decoration: underline;
  text-underline-offset: 2px;
}
.login__card .vereinbarung a:hover, .login__card .login__note a:hover {
  color: var(--sp-primary);
}
@media (max-width: 560px) {
  .login__card--weit { width: 100%; }
}
.login__foot { margin: 0; font-size: 11.5px; color: var(--sp-ink-3); }

/* ------------------- Angemeldeter Benutzer in der Navigation ------------- */
/* Unten in der Navigation: wer angemeldet ist und der direkte Weg zum
   Abmelden — kein eigenes Kontomenü. */

.nav__user {
  display: flex; align-items: center; gap: 9px;
  margin-top: 10px; padding: 9px 10px 2px;
  border-top: 1px solid var(--sp-line);
}
.nav__avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sp-chip-bg); color: var(--sp-primary-deep);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.nav__user-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.nav__user-name { font-size: 12px; font-weight: 650; color: var(--sp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__user-role { font-size: 10.5px; color: var(--sp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__logout {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; color: var(--sp-ink-3);
}
.nav__logout:hover { background: var(--sp-surface); color: var(--sp-primary-deep); }

/* -------------------------- Spido-Startseite ----------------------------- */

.hello__title { margin: 2px 0 0; font-size: 27px; font-weight: 750; letter-spacing: -0.02em; color: var(--sp-ink); }
.hello .page__lede { margin-top: 6px; }

/* Funktionskacheln: ruhige Einstiege, keine Dashboard-Flächen */
.sh-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin: 20px 0 6px;
}
.sh-tiles .tile { margin: 0; }

/* Hinweiszeile unter Zonen */
.shnote { margin: 14px 2px 0; font-size: 12.5px; color: var(--sp-ink-3); }

/* ------------------ Verwaltungs-/Zugangslisten (vl) ---------------------- */
/* Gleiche Listengrammatik wie die Objektlisten: Kopf in Kapitälchen,
   Haarlinien, Name = Einstieg. */

.vl { margin-top: 6px; }
.vl--zugaenge { --vl-cols: minmax(170px, 1.1fr) 140px minmax(150px, 1fr) 120px minmax(150px, .9fr) max-content; }
.vl--dienste  { --vl-cols: minmax(230px, 1.4fr) 120px minmax(150px, 1fr) 150px max-content; }

.vl__head, .vl__row {
  display: grid; grid-template-columns: var(--vl-cols);
  gap: 0 16px; align-items: center;
}
.vl__head {
  padding: 0 10px 8px;
  border-bottom: 2px solid var(--sp-ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sp-ink-3);
}
.vl__row { padding: 10px; border-bottom: 1px solid var(--sp-line); font-size: 13.5px; }
.vl__row:hover { background: var(--sp-surface); }
.vl__name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.vl__name .obj { font-weight: 650; }
.vl__plain { font-weight: 650; color: var(--sp-ink); }
.vl__cell { color: var(--sp-ink-2); min-width: 0; }
.vl__aside { justify-self: end; display: inline-flex; gap: 8px; }

@media (max-width: 1080px) {
  .vl--zugaenge { --vl-cols: minmax(150px, 1.1fr) 110px minmax(120px, 1fr) 100px minmax(120px, .9fr) max-content; }
  .vl--dienste  { --vl-cols: minmax(200px, 1.4fr) 110px minmax(130px, 1fr) 130px max-content; }
}

/* -------------------- Objektkopf-Stammdatenzeile (geteilt) --------------- */
/* identisch zur Objektschicht — hier für die Betreiber-Detailsicht */

.ostam {
  display: flex; flex-wrap: wrap; gap: 4px 30px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--sp-line);
  margin-bottom: 4px;
}
.ostam__item { display: inline-flex; flex-direction: column; gap: 1px; }
.ostam__k {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sp-ink-3);
}
.ostam__v { font-size: 13.5px; color: var(--sp-ink); }

/* ------------------- Dialogformular (Pflegedienst einladen) -------------- */

.frm--dialog {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px 14px; align-items: center; margin-top: 16px;
}
.frm--dialog label { font-size: 12.5px; color: var(--sp-ink-2); }
.dialog__hintline {
  display: flex; align-items: center; gap: 7px;
  margin: 14px 0 0; font-size: 12.5px; color: var(--sp-ink-2);
}

/* --------------------- Aufschaltzustand des Betreibers ------------------- */
/* Deutlich, aber nicht störend: schmales dunkles Band über der gesamten
   Oberfläche, solange der Betreiber die Ansicht eines Pflegedienstes sieht. */

.opband {
  height: 42px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 18px;
  background: #352753; color: #F3EFFA;
}
.opband__text { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; }
.opband__text svg { color: #C4B5FD; }
.opband__text strong { font-weight: 700; color: #FFFFFF; }
.opband__back {
  flex: none; font-size: 12px; font-weight: 650; text-decoration: none;
  color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px; padding: 5px 13px;
}
.opband__back:hover { background: rgba(255, 255, 255, 0.12); }
body.has-opband { margin: 0; }
/* MYS-249 — `100 %` UND NICHT `100dvh`, derselbe Grund wie an `.app` selbst
   (`spido-system.css`, Abschnitt MYS-249). Die 42 px des Bandes abzuziehen war
   immer richtig; die Bezugsgröße war es nicht. `body` trägt `overflow-x: auto`,
   und erscheint dort der waagerechte Balken, nimmt er 15 px aus dem
   Inhaltskasten des Körpers. `100dvh - 42px` kennt diese 15 px nicht, die
   Schale ragt hinaus, und die Seite bekommt rechts einen Balken ohne Inhalt —
   im Aufschaltzustand also derselbe Befund wie der, über den Julia gestolpert
   ist, nur eine Zeile tiefer versteckt.
   `calc(100% - 42px)` rechnet gegen die verfügbare Höhe. Gemessen
   (`werkzeuge/mys249-seite-rollt-nicht-probe.py`, Abschnitt „Der
   Aufschaltzustand"): mit `100dvh` 15 px Überhang in den Fenstern mit
   waagerechtem Balken, mit `100 %` null — und das Band bleibt 42 px hoch.
   GEMESSEN IST DER ZUSTAND NACHGEBAUT, nicht aufgeschaltet: die Probe setzt
   `class="has-opband"` und legt das Band nach `systemhuelle/*.html` selbst in
   die Seite. Eine echte Aufschaltung wäre eine Schreibung im Namen eines
   Betreibers und gehört nicht in eine nur lesende Messung. */
body.has-opband .app { height: calc(100% - 42px); }

/* Hinweiszeilen: Marke und Weiter-Link sauber auf einer Mittellinie */
.zone .list-row__aside { align-items: center; }
.zone .list-row__aside .module__more { white-space: nowrap; }
.list-row__aside .module__more { margin-top: 0; }

/* Dialogfelder: solide Eingaben (nicht der Blattlinien-Stil des Blatts) */
.frm--dialog .finput {
  border: 1px solid var(--sp-line-strong); border-radius: 9px;
  padding: 8px 11px; font: inherit; font-size: 13.5px;
  background: var(--sp-surface); color: var(--sp-ink); width: 100%; box-sizing: border-box;
}
.frm--dialog .finput:focus { outline: 2px solid var(--sp-primary); outline-offset: 1px; border-color: var(--sp-primary); }
.dialog__hintline svg { flex: none; }

/* ---- MULTICA-INTEGRATION (05.10.2026) ------------------------------------
   Abmelden und „Zurück zur Verwaltung" sind im Core POST + CSRF (kein GET-Link).
   Dieselben Klassen sitzen deshalb an einem <button> in einem Formular, das
   mit display:contents das Layout nicht beruehrt; hier nur der Reset der
   Browser-Knopfoptik - Aussehen wie im Entwurf. */
.nav__logoutform, .opband__form { display: contents; }
button.nav__logout { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
button.opband__back { background: none; cursor: pointer; font-family: inherit; line-height: inherit; }
/* Profil: „Logo entfernen" ist ein POST (Knopf mit Claudes Linkklasse), der
   Farbwaehler ist das Farbfeld selbst, das schreibgeschuetzte Profil ein
   rahmenloses fieldset. */
button.module__more { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
input.pf__swatch { padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
input.pf__swatch::-webkit-color-swatch-wrapper { padding: 0; }
input.pf__swatch::-webkit-color-swatch { border: 0; border-radius: 7px; }
.pf__nurlesen { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Das vorhandene Autosave-Skript blendet den Speichern-Knopf aus (`hidden`);
   `.btn` setzt display und wuerde ihn sonst stehen lassen. */
.btn[hidden] { display: none; }
/* Verwaltungslisten mit echten Daten (05.10.2026): die letzte Spalte war
   `max-content` - jede Zeile ist ein eigenes Raster, breitere Aktionen
   verschoben die Spalten, und bei 960 px liefen Knoepfe aus dem Bild. Feste
   Aktionsspalte, Aktionen und lange Namen duerfen umbrechen. */
.vl--zugaenge { --vl-cols: minmax(170px, 1.1fr) 140px minmax(150px, 1fr) 110px minmax(140px, .9fr) 132px; }
.vl--dienste  { --vl-cols: minmax(230px, 1.4fr) 120px minmax(150px, 1fr) 150px 96px; }
.vl__name { min-width: 0; overflow-wrap: anywhere; }
.vl__aside { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1080px) {
  .vl--zugaenge { --vl-cols: minmax(120px, 1.1fr) 95px minmax(110px, 1fr) 90px minmax(105px, .9fr) 120px; }
  .vl--dienste  { --vl-cols: minmax(150px, 1.4fr) 96px minmax(110px, 1fr) 110px 86px; }
}

/* ---- „LETZTE CHATS" IN DER LEISTE (MYS-240, Julia, 15.10.2026) -----------
   „«Neues Gespräch» beendet den laufenden Chat. Er bekommt ein Thema und
   erscheint links unter «Letzte Chats», mit Rollbalken."
   (Ihr Wortlaut vom 15.10.; der Knopf heißt seit dem 22.10. „Neuer Chat".)

   AM 22.10.2026 HAT JULIA DEN ROLLBALKEN VERMISST, UND DAS IST EINE
   BERICHTIGUNG WERT: er steht hier und stand hier seit dem 15.10. Nicht
   erschienen ist er, weil zehn Zeilen unter `max-height: 30vh` bleiben -
   gerollt wird erst, was nicht mehr passt. Die Zahl der gelesenen Zeilen
   steigt deshalb von 20 auf 50 (`web._CHATS_SICHTBAR`); an diesen Regeln
   ändert sich nichts.

   DIE REGELN STEHEN HIER UND NICHT IM DESIGNSYSTEM: der Abschnitt ist Teil
   der Systemhülle (sie baut die Leiste, `nka_claude._mit_letzten_chats`), und
   `spido-system.css` bleibt die unveränderte Übergabe. Nichts davon definiert
   eine Farbe oder einen Abstand neu — Schrift, Farbe und Radius kommen aus
   `.nav__item`.

   DER ROLLBALKEN IST IHR WORT und braucht genau drei Angaben: eine Höhe, ab
   der gerollt wird (`max-height`), das Rollen selbst (`overflow-y`) und
   `min-height: 0` — ohne das Letzte wächst ein Flex-Kind über seine
   Grenze hinaus und die Leiste wird unten abgeschnitten statt innen gerollt.

   EIN THEMA IST EINE ZEILE. Der Titel kommt wörtlich aus der ersten Frage;
   zwei oder drei umgebrochene Zeilen je Gespräch machen aus einer Liste eine
   Wand. Was nicht passt, endet in `…` — der ganze Satz steht im `title`. */
.nav__chats { flex: 0 1 auto; min-height: 0; margin-top: 16px; }
.nav__caption {
  margin: 0 0 5px; padding: 0 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sp-ink-3);
}
.nav__chatlist {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 30vh; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav__item--chat {
  display: block;
  padding: 6px 12px;
  font-size: 12.5px; color: #6F6860;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}