/* MOTHER-NASSIMAI-MASTER-001-P3 — Komponenten- und Layout-Stylesheet */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-familie); font-size: var(--fs-text); line-height: var(--lh-normal);
  background: var(--f-hintergrund); color: var(--f-text);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1,h2,h3,h4 { line-height: var(--lh-eng); margin: 0 0 var(--ab-3); }
h1 { font-size: var(--fs-haupttitel); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-seitentitel); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-abschnitt); font-weight: var(--fw-semibold); }
a { color: var(--f-akzent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--f-fokus); outline-offset: 2px; border-radius: var(--rad-s); }
.hilfetext { color: var(--f-text-2); font-size: var(--fs-hilfe); }
.boot { display: grid; place-items: center; height: 100vh; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--f-linie); border-top-color: var(--f-akzent);
  border-radius: 50%; animation: dreh .8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- App-Shell (§11) ---------- */
.shell { display: grid; grid-template-columns: var(--nav-breite) 1fr; min-height: 100vh;
  transition: grid-template-columns var(--dauer-normal) var(--kurve); }
.shell.nav-schmal { grid-template-columns: var(--nav-schmal) 1fr; }
.inhalt { min-width: 0; display: flex; flex-direction: column; }
.seite { padding: var(--ab-5); max-width: 1480px; width: 100%; margin: 0 auto; animation: einblenden var(--dauer-normal) var(--kurve); flex: 1; }

/* ---------- Header (§15) ---------- */
.header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-hoehe);
  display: flex; align-items: center; gap: var(--ab-3); padding: 0 var(--ab-4);
  background: var(--header-verlauf); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--f-linie); }
.header .marke { font-weight: var(--fw-bold); font-size: 1.02rem; white-space: nowrap; }
.header .bereich { color: var(--f-text-2); font-size: var(--fs-hilfe); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.header .wachsen { flex: 1; min-width: 0; }
.kopf-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--ab-2);
  min-width: var(--touch-min); min-height: var(--touch-min); padding: 0 var(--ab-2);
  background: none; border: none; border-radius: var(--rad-s); color: var(--f-text);
  cursor: pointer; font-size: var(--fs-button); font-family: inherit; position: relative; }
.kopf-knopf:hover { background: var(--f-sekundaer); }
.kopf-knopf .punkt { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--f-fehler); }
.suchfeld { display: flex; align-items: center; gap: var(--ab-2); background: var(--f-sekundaer);
  border-radius: var(--rad-voll); padding: 0 var(--ab-4); height: 38px; max-width: 420px; flex: 1; }
.suchfeld input { background: none; border: none; color: var(--f-text); width: 100%;
  font-size: var(--fs-text); font-family: inherit; outline: none; }

/* ---------- Navigation (§12/14) ---------- */
.nav { background: var(--f-flaeche); border-right: 1px solid var(--f-linie);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: var(--z-nav); }
.nav .nav-kopf { display: flex; align-items: center; gap: var(--ab-3); padding: var(--ab-4);
  min-height: var(--header-hoehe); border-bottom: 1px solid var(--f-linie); }
.nav .logo { width: 34px; height: 34px; border-radius: var(--rad-s); background: var(--f-primaer);
  color: var(--f-primaer-text); display: grid; place-items: center; font-weight: var(--fw-bold); flex-shrink: 0; }
.nav .nav-titel { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; }
.nav-liste { flex: 1; overflow-y: auto; padding: var(--ab-3) var(--ab-2); }
.nav-eintrag { display: flex; align-items: center; gap: var(--ab-3); width: 100%;
  min-height: var(--touch-min); padding: 0 var(--ab-3); border: none; background: none;
  border-radius: var(--rad-s); color: var(--f-text); font-size: var(--fs-text); font-family: inherit;
  cursor: pointer; text-align: left; white-space: nowrap; }
.nav-eintrag:hover { background: var(--f-sekundaer); }
.nav-eintrag.aktiv { background: var(--f-sekundaer); color: var(--f-akzent); font-weight: var(--fw-semibold); }
.nav-eintrag .ico { width: 20px; height: 20px; flex-shrink: 0; }
.nav-eintrag .pfeil { margin-left: auto; transition: transform var(--dauer-schnell); width: 14px; height: 14px; }
.nav-eintrag.offen .pfeil { transform: rotate(90deg); }
.nav-eintrag .badge-prep { margin-left: auto; }
.nav-gruppe { overflow: hidden; max-height: 0; transition: max-height var(--dauer-normal) var(--kurve); }
.nav-gruppe.offen { max-height: 480px; }
.nav-gruppe .nav-eintrag { padding-left: 44px; font-size: var(--fs-untertitel); min-height: 40px; }
.nav-fuss { padding: var(--ab-3); border-top: 1px solid var(--f-linie); font-size: var(--fs-hilfe); color: var(--f-text-2); white-space: nowrap; overflow: hidden; }
.shell.nav-schmal .nav-titel, .shell.nav-schmal .nav-eintrag span.txt, .shell.nav-schmal .nav-eintrag .pfeil,
.shell.nav-schmal .nav-fuss, .shell.nav-schmal .nav-gruppe, .shell.nav-schmal .badge-prep { display: none; }

/* ---------- Karten / Dashboard (§17/18) ---------- */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ab-4); }
.karte { background: var(--f-karte); border: 1px solid var(--f-linie); border-radius: var(--rad-m);
  padding: var(--ab-4); box-shadow: var(--schatten-karte); }
.karte .karten-titel { display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-kartentitel); font-weight: var(--fw-semibold); margin-bottom: var(--ab-3); }
.karte .gross { font-size: 1.9rem; font-weight: var(--fw-bold); }
.stat-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: var(--ab-2) 0; border-bottom: 1px solid var(--f-linie); font-size: var(--fs-untertitel); }
.stat-zeile:last-child { border-bottom: none; }
.stat-zeile > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stat-zeile > :last-child { flex-shrink: 0; }

/* ---------- Badges / Status (§38) ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--rad-voll);
  font-size: var(--fs-badge); font-weight: var(--fw-semibold); background: var(--f-sekundaer); color: var(--f-text-2); }
.badge.ok, .badge.erfolg, .badge.aktiv, .badge.erledigt { background: var(--f-erfolg-bg); color: var(--f-erfolg); }
.badge.warnung, .badge.vorbereitet, .badge.entwurf, .badge.prueft { background: var(--f-warnung-bg); color: var(--f-warnung); }
.badge.fehler, .badge.gesperrt, .badge.fehlerhaft, .badge.fehlgeschlagen, .badge.kritisch { background: var(--f-fehler-bg); color: var(--f-fehler); }
.badge.info, .badge.in_arbeit { background: var(--f-info-bg); color: var(--f-info); }
.fortschritt { height: 6px; border-radius: var(--rad-voll); background: var(--f-sekundaer); overflow: hidden; }
.fortschritt > div { height: 100%; background: var(--f-akzent); border-radius: var(--rad-voll);
  transition: width var(--dauer-langsam) var(--kurve); }

/* ---------- Buttons ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--ab-2);
  min-height: 40px; padding: 0 var(--ab-4); border-radius: var(--rad-s); border: 1px solid transparent;
  font-size: var(--fs-button); font-weight: var(--fw-medium); font-family: inherit; cursor: pointer;
  transition: filter var(--dauer-schnell), background var(--dauer-schnell); }
.knopf.primaer { background: var(--f-primaer); color: var(--f-primaer-text); }
.knopf.primaer:hover { filter: brightness(1.08); }
.knopf.sekundaer { background: var(--f-sekundaer); color: var(--f-text); }
.knopf.sekundaer:hover { filter: brightness(1.1); }
.knopf.gefahr { background: var(--f-fehler-bg); color: var(--f-fehler); }
.knopf.geist { background: none; color: var(--f-text-2); }
.knopf.geist:hover { background: var(--f-sekundaer); color: var(--f-text); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf .spinner { width: 16px; height: 16px; border-width: 2px; }

/* ---------- Formulare (§31) ---------- */
.formular { display: grid; gap: var(--ab-4); }
.feld { display: grid; gap: 6px; }
.feld label { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--f-text-2); }
.feld label .pflicht { color: var(--f-fehler); }
.feld input, .feld select, .feld textarea {
  min-height: 42px; padding: var(--ab-2) var(--ab-3); border: 1px solid var(--f-linie);
  border-radius: var(--rad-s); background: var(--f-flaeche-2); color: var(--f-text);
  font-size: var(--fs-text); font-family: inherit; width: 100%; }
.feld textarea { min-height: 110px; resize: vertical; line-height: var(--lh-normal); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--f-fokus); outline-offset: 0; border-color: transparent; }
.feld .fehler-text { color: var(--f-fehler); font-size: var(--fs-hilfe); }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: var(--f-fehler); }
.formular-fuss { display: flex; gap: var(--ab-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--ab-2); }
.zeile-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab-4); }
.schalter { display: inline-flex; align-items: center; gap: var(--ab-3); cursor: pointer; min-height: var(--touch-min); }
.schalter input { position: absolute; opacity: 0; }
.schalter .bahn { width: 44px; height: 26px; border-radius: var(--rad-voll); background: var(--f-sekundaer);
  position: relative; transition: background var(--dauer-schnell); flex-shrink: 0; }
.schalter .bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--f-text-2); transition: transform var(--dauer-schnell), background var(--dauer-schnell); }
.schalter input:checked + .bahn { background: var(--f-primaer); }
.schalter input:checked + .bahn::after { transform: translateX(18px); background: var(--f-primaer-text); }
.schalter input:focus-visible + .bahn { outline: 2px solid var(--f-fokus); outline-offset: 2px; }

/* ---------- Tabellen (§33) ---------- */
.tab-wrap { background: var(--f-karte); border: 1px solid var(--f-linie); border-radius: var(--rad-m); overflow: hidden; }
.tab-kopf { display: flex; gap: var(--ab-3); align-items: center; padding: var(--ab-3) var(--ab-4);
  border-bottom: 1px solid var(--f-linie); flex-wrap: wrap; }
.tab-scroll { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-tabelle); }
.tabelle th { text-align: left; padding: var(--ab-3) var(--ab-4); font-size: var(--fs-label);
  color: var(--f-text-2); border-bottom: 1px solid var(--f-linie); white-space: nowrap; cursor: pointer; user-select: none; }
.tabelle th.unsortierbar { cursor: default; }
.tabelle td { padding: var(--ab-3) var(--ab-4); border-bottom: 1px solid var(--f-linie); vertical-align: middle; }
.tabelle tbody tr { cursor: pointer; transition: background var(--dauer-schnell); }
.tabelle tbody tr:hover { background: var(--f-flaeche-2); }
.tabelle tbody tr:last-child td { border-bottom: none; }
.tab-fuss { display: flex; align-items: center; gap: var(--ab-3); padding: var(--ab-3) var(--ab-4);
  border-top: 1px solid var(--f-linie); font-size: var(--fs-hilfe); color: var(--f-text-2); flex-wrap: wrap; }
.mobil-karten { display: none; }

/* ---------- Dialoge (§36) ---------- */
.dialog-hintergrund { position: fixed; inset: 0; background: var(--f-overlay); z-index: var(--z-dialog);
  display: grid; place-items: center; padding: var(--ab-4); animation: einblenden var(--dauer-schnell); }
.dialog { background: var(--f-flaeche); border: 1px solid var(--f-linie); border-radius: var(--rad-l);
  box-shadow: var(--schatten-dialog); width: 100%; max-width: 560px; max-height: 92vh;
  display: flex; flex-direction: column; animation: einblenden var(--dauer-normal) var(--kurve); }
.dialog.breit { max-width: 860px; }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between;
  padding: var(--ab-4) var(--ab-5); border-bottom: 1px solid var(--f-linie); }
.dialog-kopf h3 { margin: 0; }
.dialog-inhalt { padding: var(--ab-5); overflow-y: auto; }
.dialog-fuss { display: flex; gap: var(--ab-3); justify-content: flex-end; padding: var(--ab-4) var(--ab-5);
  border-top: 1px solid var(--f-linie); flex-wrap: wrap; }

/* ---------- Toasts (§37) ---------- */
.toasts { position: fixed; bottom: var(--ab-5); right: var(--ab-5); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--ab-3); max-width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; gap: var(--ab-3); align-items: flex-start; background: var(--f-flaeche);
  border: 1px solid var(--f-linie); border-left: 4px solid var(--f-info); border-radius: var(--rad-m);
  padding: var(--ab-3) var(--ab-4); box-shadow: var(--schatten-karte); animation: einblenden var(--dauer-normal) var(--kurve); }
.toast.erfolg { border-left-color: var(--f-erfolg); }
.toast.warnung { border-left-color: var(--f-warnung); }
.toast.fehler { border-left-color: var(--f-fehler); }

/* ---------- Panels (Benachrichtigungen, Suche, Mother) ---------- */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--f-flaeche);
  border-left: 1px solid var(--f-linie); box-shadow: var(--schatten-dialog); z-index: var(--z-panel);
  display: flex; flex-direction: column; animation: panel-ein var(--dauer-normal) var(--kurve); }
@keyframes panel-ein { from { transform: translateX(100%); } to { transform: none; } }
.panel-kopf { display: flex; align-items: center; justify-content: space-between;
  padding: var(--ab-4); border-bottom: 1px solid var(--f-linie); min-height: var(--header-hoehe); }
.panel-inhalt { flex: 1; overflow-y: auto; padding: var(--ab-4); }
.panel-fuss { padding: var(--ab-3) var(--ab-4); border-top: 1px solid var(--f-linie); }
.listenzeile { display: flex; gap: var(--ab-3); align-items: flex-start; padding: var(--ab-3);
  border-radius: var(--rad-s); cursor: pointer; }
.listenzeile:hover { background: var(--f-sekundaer); }
.listenzeile .meta { color: var(--f-text-2); font-size: var(--fs-hilfe); }

/* ---------- Zustände (§55) ---------- */
.zustand { display: grid; place-items: center; gap: var(--ab-3); text-align: center;
  padding: var(--ab-7) var(--ab-4); color: var(--f-text-2); }
.zustand .zeichen { font-size: 2rem; opacity: .6; }
.skeleton { border-radius: var(--rad-s); background: linear-gradient(90deg, var(--f-sekundaer) 25%, var(--f-flaeche-2) 50%, var(--f-sekundaer) 75%);
  background-size: 200% 100%; animation: schimmer 1.3s infinite; min-height: 16px; }
@keyframes schimmer { to { background-position: -200% 0; } }

/* ---------- Kalender (§39) ---------- */
.kal-kopf { display: flex; align-items: center; gap: var(--ab-3); margin-bottom: var(--ab-4); flex-wrap: wrap; }
.kal-titel { font-size: var(--fs-abschnitt); font-weight: var(--fw-semibold); min-width: 180px; }
.kal-ansichten { display: flex; background: var(--f-sekundaer); border-radius: var(--rad-s); padding: 3px; }
.kal-ansichten button { border: none; background: none; padding: 7px 14px; border-radius: 6px;
  color: var(--f-text-2); cursor: pointer; font-family: inherit; font-size: var(--fs-hilfe); font-weight: var(--fw-medium); }
.kal-ansichten button.aktiv { background: var(--f-flaeche); color: var(--f-text); box-shadow: var(--schatten-karte); }
.kal-monat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--f-linie);
  border: 1px solid var(--f-linie); border-radius: var(--rad-m); overflow: hidden; }
.kal-wt { background: var(--f-flaeche-2); padding: var(--ab-2); text-align: center;
  font-size: var(--fs-label); color: var(--f-text-2); font-weight: var(--fw-semibold); }
.kal-tag { background: var(--f-karte); min-height: 96px; padding: var(--ab-2); cursor: pointer; transition: background var(--dauer-schnell); }
.kal-tag:hover { background: var(--f-flaeche-2); }
.kal-tag .nr { font-size: var(--fs-hilfe); color: var(--f-text-2); font-weight: var(--fw-semibold); }
.kal-tag.heute .nr { display: inline-grid; place-items: center; width: 24px; height: 24px;
  background: var(--f-primaer); color: var(--f-primaer-text); border-radius: 50%; }
.kal-tag.fremd { opacity: .4; }
.kal-termin { font-size: var(--fs-badge); background: var(--f-info-bg); color: var(--f-info);
  border-radius: 5px; padding: 2px 6px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-agenda .listenzeile { border-bottom: 1px solid var(--f-linie); border-radius: 0; }

/* ---------- Mother-Chat (§46) ---------- */
.chat { display: flex; flex-direction: column; height: calc(100vh - var(--header-hoehe) - 48px); max-height: 760px; }
.chat-verlauf { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--ab-3); padding: var(--ab-4) 0; }
.chat-nachricht { max-width: 78%; padding: var(--ab-3) var(--ab-4); border-radius: var(--rad-m); }
.chat-nachricht.ich { align-self: flex-end; background: var(--f-primaer); color: var(--f-primaer-text); }
.chat-nachricht.system { align-self: flex-start; background: var(--f-flaeche-2); color: var(--f-text-2); }
.chat-eingabe { display: flex; gap: var(--ab-3); align-items: flex-end; }
.chat-eingabe textarea { flex: 1; min-height: 48px; max-height: 140px; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--ab-4);
  background: radial-gradient(1200px 600px at 70% -10%, var(--f-flaeche-2), var(--f-hintergrund)); }
.login-karte { width: 100%; max-width: 400px; background: var(--f-karte); border: 1px solid var(--f-linie);
  border-radius: var(--rad-l); padding: var(--ab-6); box-shadow: var(--schatten-dialog); }
.login-karte .logo { width: 46px; height: 46px; border-radius: var(--rad-m); background: var(--f-primaer);
  color: var(--f-primaer-text); display: grid; place-items: center; font-weight: var(--fw-bold);
  font-size: 1.2rem; margin-bottom: var(--ab-4); }

/* ---------- Matrix ---------- */
.matrix-scroll { overflow-x: auto; }
.matrix { border-collapse: collapse; font-size: var(--fs-hilfe); }
.matrix th, .matrix td { border: 1px solid var(--f-linie); padding: 6px 10px; text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; white-space: nowrap; }
.matrix .ja { color: var(--f-erfolg); font-weight: var(--fw-bold); }
.matrix .nein { color: var(--f-text-2); opacity: .45; }

/* ---------- Responsive (§30): Tablet ---------- */
@media (max-width: 1100px) {
  .shell { grid-template-columns: var(--nav-schmal) 1fr; }
  .shell .nav-titel, .shell .nav-eintrag span.txt, .shell .nav-eintrag .pfeil,
  .shell .nav-fuss, .shell .nav-gruppe, .shell .badge-prep { display: none; }
  .zeile-2 { grid-template-columns: 1fr; }
}

/* ---------- Responsive: Mobil ---------- */
@media (max-width: 760px) {
  .shell, .shell.nav-schmal { grid-template-columns: 1fr; }
  .nav { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-100%);
    transition: transform var(--dauer-normal) var(--kurve); height: 100vh; height: 100dvh; }
  .shell.nav-offen .nav { transform: none; box-shadow: var(--schatten-dialog); }
  .shell.nav-offen::after { content: ""; position: fixed; inset: 0; background: var(--f-overlay); z-index: calc(var(--z-nav) - 1); }
  .shell .nav .nav-titel, .shell .nav .nav-eintrag span.txt, .shell .nav .nav-eintrag .pfeil,
  .shell .nav .nav-fuss, .shell .nav .nav-gruppe, .shell .nav .badge-prep { display: revert; }
  .shell .nav .nav-gruppe { display: block; }
  .header .bereich, .header .marke { display: none; }
  .suchfeld { max-width: none; }
  .seite { padding: var(--ab-4); }
  .karten { grid-template-columns: 1fr; }
  .dialog-hintergrund { padding: 0; align-items: end; }
  .dialog { max-width: none; border-radius: var(--rad-l) var(--rad-l) 0 0; max-height: 94vh; max-height: 94dvh; }
  .tab-scroll { display: none; }
  .mobil-karten { display: flex; flex-direction: column; }
  .mobil-karten .listenzeile { border-bottom: 1px solid var(--f-linie); border-radius: 0; padding: var(--ab-4); flex-direction: column; gap: var(--ab-2); }
  .kal-tag { min-height: 58px; }
  .chat-nachricht { max-width: 92%; }
  .formular-fuss .knopf, .dialog-fuss .knopf { flex: 1; }
}

/* ---------- Druck (§44) ---------- */
@media print {
  .nav, .header, .toasts, .panel, .tab-kopf, .tab-fuss, .formular-fuss, .knopf { display: none !important; }
  .shell { display: block; }
  body { background: #fff; color: #000; }
  .karte, .tab-wrap { box-shadow: none; border-color: #ccc; }
  .druck-kopf { display: block !important; border-bottom: 1px solid #000; margin-bottom: 12px; padding-bottom: 8px; }
}
.druck-kopf { display: none; }

/* ---------- Reparatur Doc1 (22.07.2026): Tech-Karten, Health, Mother-Chatblase, Spracheingabe ---------- */
.karte.tech { position: relative; overflow: hidden; }
.karte.tech::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--f-primaer), #8b7bff, #4dd8ff); opacity: .85; }
.karte.tech .kt { display: inline-flex; align-items: center; gap: 8px; }
.karte.klick { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.karte.klick:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.erklaerung { font-size: .78rem; color: var(--f-text-2); margin-top: 8px; line-height: 1.45; }
.health-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.health-zelle { text-align: left; border: 1px solid var(--f-linie); background: var(--f-flaeche-2);
  border-radius: 12px; padding: 12px; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s; }
.health-zelle:hover { border-color: var(--f-primaer); }
.hz-wert { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hz-label { font-size: .8rem; font-weight: 600; margin-top: 2px; }
.hz-sub { font-size: .72rem; color: var(--f-text-2); margin-top: 2px; }
.health-balken { height: 5px; background: var(--f-linie); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.health-balken > div { height: 100%; background: linear-gradient(90deg, #4dd8ff, #8b7bff); border-radius: 99px; }
.health-projekt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--f-linie); }
.health-projekt:first-child { border-top: none; }
.hp-name { font-weight: 700; min-width: 160px; }
.hp-metriken { display: flex; gap: 8px; flex-wrap: wrap; }
.metric-knopf { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--f-linie);
  background: var(--f-flaeche-2); border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit;
  color: inherit; font-size: .82rem; transition: border-color .15s; }
.metric-knopf b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.metric-knopf.warn { border-color: rgba(222,160,60,.55); }
.metric-knopf:hover { border-color: var(--f-primaer); }
.health-detail-liste { display: flex; flex-direction: column; gap: 10px; }
.health-detail-zeile { display: flex; align-items: center; gap: 14px; }
.health-detail-zeile .hd-haupt { flex: 1; min-width: 0; }
/* Chat (wiederverwendbares Fenster) */
.chat { display: flex; flex-direction: column; min-height: 0; }
.chat .chat-verlauf { min-height: 170px; max-height: 320px; }
.chat.gross .chat-verlauf { min-height: 300px; max-height: 52vh; }
.chat.gross textarea { min-height: 64px; font-size: 1rem; }
.chat-nachricht { border-radius: 16px; }
.chat-nachricht.ich { border-bottom-right-radius: 4px; }
.chat-nachricht.system { border-bottom-left-radius: 4px; }
.chat-karte { display: flex; flex-direction: column; }
.chat-eingabe .mic { flex: 0 0 auto; }
.chat-eingabe .mic.aufnahme { color: #fff; background: linear-gradient(135deg, #e2574c, #c23b3b);
  border-color: transparent; animation: mic-puls 1.2s infinite; }
@keyframes mic-puls { 0%,100% { box-shadow: 0 0 0 0 rgba(194,59,59,.5); } 50% { box-shadow: 0 0 0 8px rgba(194,59,59,0); } }
/* Mother-Chatblase unten rechts (jede Seite, mobil + Desktop) */
.mother-fab { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: 56px; height: 56px;
  border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, #4dd8ff, #8b7bff);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(93,110,255,.45); transition: transform .15s; }
.mother-fab:hover { transform: scale(1.07); }
.mother-panel { position: fixed; right: 20px; bottom: 88px; z-index: 96;
  width: min(420px, calc(100vw - 24px)); height: min(560px, calc(100vh - 120px));
  background: var(--f-karte); border: 1px solid var(--f-linie); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.32); display: none; flex-direction: column; overflow: hidden; }
.mother-panel.offen { display: flex; }
.mother-panel-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--f-linie); }
.mother-panel .chat { flex: 1; padding: 0 12px 12px; min-height: 0; }
.mother-panel .chat-verlauf { max-height: none; flex: 1; }
.mother-punkt { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #4dd8ff, #8b7bff); flex: 0 0 auto; }
@media (max-width: 760px) {
  .mother-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .mother-panel { right: 8px; left: 8px; width: auto; bottom: 76px; height: min(70vh, calc(100vh - 100px)); }
}
@media print { .mother-fab, .mother-panel { display: none !important; } }