/* Oberfläche des Assistenten nach dem MAIE-Vertrag (docs/contract/design, Stand 27.10.2026).
   Farben, Schrift, Radien, Schatten nur aus tokens.css; Bewegung nur aus motion.css (mai-*).
   Hier stehen keine Hex-Werte, keine festen Radien und keine eigenen Keyframes (test/oberflaeche.test.ts prüft das).
   Rot (--maie-accent) nur für die Primär-Aktion, ein betontes Wort, Live-Zustände und Hinweise. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--maie-white); color: var(--maie-ink); font: var(--maie-body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--maie-accent); outline-offset: 2px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h1, h2, h3 { margin: 0; }
.mono { font-family: var(--maie-font-mono); }

/* ---------------------------------------------------------------- Knöpfe, Chips */
.knopf { height: var(--maie-btn); padding: 0 var(--maie-s-6); border: 0; border-radius: var(--maie-r-chip); font: var(--maie-ui); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--maie-s-2); transition: background var(--mai-t-state) ease, color var(--mai-t-state) ease; }
.knopf.klein { height: var(--maie-btn-sm); padding: 0 var(--maie-s-4); }
.knopf.primaer, .knopf.ja { background: var(--maie-accent); color: var(--maie-white); }
.knopf.primaer:hover, .knopf.ja:hover { background: color-mix(in srgb, var(--maie-accent) 88%, var(--maie-ink)); }
.knopf.sekundaer { background: var(--maie-white); color: var(--maie-ink); box-shadow: inset 0 0 0 1.5px var(--maie-ink); }
.knopf.tertiaer, .knopf.nein { background: var(--maie-mist); color: var(--maie-grey); }
.knopf.tertiaer:hover, .knopf.nein:hover { color: var(--maie-ink); }
.knopf:disabled { opacity: .45; cursor: progress; }
.freigabe .knopf { height: var(--maie-btn-sm); padding: 0 var(--maie-s-4); }
.chip { min-height: var(--maie-btn-sm); padding: var(--maie-s-2) 14px; border: 0; border-radius: var(--maie-r-chip); background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line); font: var(--maie-ui); color: var(--maie-ink); cursor: pointer; transition: box-shadow var(--mai-t-state) ease; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--maie-ink); }
.mehr { background: none; border: 0; padding: 0; color: var(--maie-ink); font: var(--maie-small); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.schalter { display: inline-flex; align-items: center; gap: var(--maie-s-2); font: var(--maie-small); color: var(--maie-grey); cursor: pointer; white-space: nowrap; }
.schalter input { accent-color: var(--maie-accent); }

/* Kachel-Marke „MAI“ (Logo-Icon: schwarze Kachel, roter I-Strich) */
.kachel-marke { width: 48px; height: 48px; flex: none; border-radius: 25%; background: var(--maie-ink); color: var(--maie-white); display: inline-grid; place-items: center; font: 500 15px/1 var(--maie-font-display); letter-spacing: -.04em; }
.kachel-marke i { font-style: normal; color: var(--maie-accent); }
.kachel-marke.klein { width: 32px; height: 32px; font-size: 11px; }

/* ---------------------------------------------------------------- Anmeldung */
/* Bühne: Lichtschimmer (Koralle → Rot, stark geblurrt) und Wellen am unteren Rand, fest hinter allem */
body { background: var(--maie-mist); }
.buehne { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.buehne-licht { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); animation: mai-glow 18s ease-in-out infinite; }
.buehne-licht.eins { top: -30vmax; right: -22vmax; background: radial-gradient(circle, color-mix(in srgb, var(--maie-accent-2) 24%, transparent), transparent 62%); }
.buehne-licht.zwei { bottom: -38vmax; left: -26vmax; background: radial-gradient(circle, color-mix(in srgb, var(--maie-accent) 16%, transparent), transparent 62%); animation-duration: 24s; animation-direction: reverse; }
.buehne-wellen { position: absolute; left: -4%; right: -4%; bottom: -6vh; width: 108%; height: 78vh; filter: blur(14px); }
.v-koralle { stop-color: var(--maie-accent-2); }
.v-rot { stop-color: var(--maie-accent); }
.v-hell { stop-color: var(--maie-mist); }
.welle-1 { opacity: .30; }
.welle-2 { opacity: .22; }
.welle-3 { opacity: .34; }
.welle-linie { fill: none; stroke: color-mix(in srgb, var(--maie-accent) 55%, transparent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
body.angemeldet .buehne { opacity: .55; }
.anmeldung, .shell { position: relative; z-index: 1; }

.anmeldung { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); }
.anmelde-marke { display: flex; flex-direction: column; justify-content: center; gap: var(--maie-s-3); padding: var(--maie-s-12) clamp(24px, 6vw, 96px); }
.anmelde-titel { font: var(--maie-display-l); font-weight: 300; letter-spacing: -.035em; margin-top: var(--maie-s-6); max-width: 12ch; }
.anmelde-titel em { font-style: normal; font-weight: 400; color: var(--maie-accent); }
.anmelde-text { font: var(--maie-lead); color: var(--maie-grey); max-width: 34ch; margin: 0; }
.anmelde-seite { display: grid; place-items: center; padding: var(--maie-s-6) var(--maie-s-4); background: color-mix(in srgb, var(--maie-white) 62%, transparent); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); border-left: 1px solid color-mix(in srgb, var(--maie-white) 70%, transparent); }
.anmeldekarte { width: min(380px, 100%); display: grid; gap: var(--maie-s-3); animation: mai-rise var(--mai-t-enter) var(--mai-ease-in) both; }
.wortmarke { width: 132px; height: auto; display: block; }
.anmelde-symbol { width: 48px; height: 48px; display: block; border-radius: 25%; box-shadow: var(--maie-shadow-card); }
.wortmarke.gross { width: 168px; }
.wortmarke-linien { fill: none; stroke: var(--maie-ink); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.stop-koralle { stop-color: var(--maie-accent-2); }
.stop-rot { stop-color: var(--maie-accent); }
.wortmarke-zeile { font: 500 11px/1 var(--maie-font-text); letter-spacing: .35em; color: var(--maie-grey); }
.google-knopf { background: var(--maie-white); color: var(--maie-ink); box-shadow: inset 0 0 0 1px var(--maie-line); text-decoration: none; }
.google-knopf:hover { box-shadow: inset 0 0 0 1.5px var(--maie-ink); }
.oder { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--maie-s-3); font: var(--maie-small); color: var(--maie-grey); }
.oder::before, .oder::after { content: ""; height: 1px; background: var(--maie-line); }
@media (max-width: 900px) {
  .anmeldung { grid-template-columns: 1fr; }
  .anmelde-marke { padding: var(--maie-s-8) var(--maie-s-4) var(--maie-s-4); }
  .anmelde-titel { font-size: 40px; margin-top: var(--maie-s-4); }
  .anmelde-seite { border-left: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-bottom: var(--maie-s-12); }
}
.anmelde-zeile { margin: calc(-1 * var(--maie-s-2)) 0 var(--maie-s-2); font: var(--maie-small); color: var(--maie-grey); }
.anmeldekarte h1 { font: var(--maie-heading); font-weight: 300; letter-spacing: -.025em; margin: var(--maie-s-5) 0 var(--maie-s-2); }
.anmeldekarte label { font: var(--maie-small); color: var(--maie-grey); }
.anmeldekarte input { height: var(--maie-btn); border: 1px solid var(--maie-idle); border-radius: var(--maie-r-input); padding: 0 14px; background: var(--maie-white); }
.anmeldekarte input:focus { outline: 2px solid var(--maie-accent); outline-offset: 0; }
.anmeldekarte .knopf { margin-top: var(--maie-s-2); }
.fehler { margin: 0; min-height: 1.4em; font: var(--maie-small); color: var(--maie-ink); }
.fehler:not(:empty)::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--maie-warn); margin-right: var(--maie-s-2); }

/* ---------------------------------------------------------------- Shell: Navigation links, Inhalt, Leiste unten */
.shell { min-height: 100%; display: grid; grid-template-columns: var(--maie-sidebar-w) minmax(0, 1fr); transition: grid-template-columns var(--mai-t-state) var(--mai-ease-in); }
.shell.nav-zieht { transition: none; }
.navigation { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--maie-white); border-right: 1px solid var(--maie-line-soft); padding: var(--maie-s-6) var(--maie-s-4); display: flex; flex-direction: column; gap: var(--maie-s-1); }
.kennung { display: flex; align-items: center; gap: var(--maie-s-3); font: var(--maie-ui); padding: 0 var(--maie-s-1) var(--maie-s-5); min-width: 0; }
.kennung-logo { width: 36px; height: 36px; flex: none; border-radius: 25%; object-fit: contain; }
.kennung-text { display: grid; min-width: 0; flex: 1; }
.kennung-text #name { font: var(--maie-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kennung-text small { font: var(--maie-small); font-size: 12px; color: var(--maie-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-klappe { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--maie-r-input); background: transparent; color: var(--maie-grey); cursor: pointer; }
.nav-klappe:hover { background: var(--maie-mist); color: var(--maie-ink); }
.nav-klappe svg, .nav-symbol { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-griff { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 2; }
.nav-griff::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background var(--mai-t-state) ease; }
.nav-griff:hover::after, .nav-griff:focus-visible::after, .shell.nav-zieht .nav-griff::after { background: var(--maie-accent); }
.shell.nav-zieht { user-select: none; cursor: col-resize; }
.nav-eintrag .punkt { display: none; }
.nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell.nav-eingeklappt { grid-template-columns: 76px minmax(0, 1fr); }
.shell.nav-eingeklappt .kennung { flex-direction: column; }
.shell.nav-eingeklappt .kennung-text, .shell.nav-eingeklappt .nav-text, .shell.nav-eingeklappt .nav-unten, .shell.nav-eingeklappt .nav-titel { display: none; }
.shell.nav-eingeklappt .nav-eintrag { justify-content: center; padding: 0; }
.nav-gruppe, .bereiche { display: grid; gap: 2px; }
.nav-titel { font: var(--maie-micro); color: var(--maie-grey); text-transform: uppercase; letter-spacing: .08em; padding: var(--maie-s-5) var(--maie-s-3) var(--maie-s-2); }
.nav-eintrag, .bereich { min-height: var(--maie-touch); width: 100%; display: flex; align-items: center; gap: var(--maie-s-3); padding: 0 var(--maie-s-3); border: 0; border-radius: var(--maie-r-input); background: transparent; color: var(--maie-grey); font: var(--maie-ui); text-align: left; cursor: pointer; transition: background var(--mai-t-state) ease, color var(--mai-t-state) ease; }
.nav-eintrag:hover, .bereich:hover { color: var(--maie-ink); }
.nav-eintrag[aria-pressed="true"], .bereich[aria-pressed="true"] { background: var(--maie-mist); color: var(--maie-ink); }
.nav-eintrag .punkt, .bereich .punkt { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--maie-idle); }
.nav-eintrag[aria-pressed="true"] .punkt, .bereich[aria-pressed="true"] .punkt { background: var(--maie-accent); }
.bereich.zuletzt .punkt { background: var(--maie-ink); }
.bereich .zusatz { margin-left: auto; font: var(--maie-small); color: var(--maie-grey); }
.nav-unten { margin-top: auto; padding-top: var(--maie-s-6); display: grid; gap: var(--maie-s-3); }
.agenten-karte { border-radius: var(--maie-r-card); padding: var(--maie-s-4); display: grid; gap: var(--maie-s-3); }
.agenten-kopf { display: flex; align-items: center; gap: var(--maie-s-2); font: var(--maie-ui); }
.kennung-punkt { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--maie-idle); }
.kennung-punkt.lebt { background: var(--maie-ok); }
.kennung-punkt.getrennt { background: var(--maie-warn); }
.puls-takt { margin-left: auto; font: var(--maie-micro); color: var(--maie-grey); font-variant-numeric: tabular-nums; }
.status { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--maie-s-2); }
.status li { display: flex; align-items: center; gap: var(--maie-s-2); font: var(--maie-small); color: var(--maie-grey); }
.status li::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--maie-idle); }
.status li.an::before { background: var(--maie-ok); }
.status li.warn::before { background: var(--maie-warn); }
.nav-hinweis { margin: 0; padding: 0 var(--maie-s-2); font: var(--maie-small); color: var(--maie-grey); }
.nav-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--maie-s-2); padding: 0 var(--maie-s-2); }
.benutzer { margin-top: var(--maie-s-3); display: flex; align-items: center; gap: var(--maie-s-3); padding: var(--maie-s-2); border-radius: var(--maie-r-card); background: var(--maie-mist); min-width: 0; }
.benutzer-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--maie-ink); color: var(--maie-white); font: 600 12px/1 var(--maie-font-text); }
.benutzer-text { display: grid; min-width: 0; flex: 1; }
.benutzer-text strong { font: var(--maie-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.benutzer-text small { font: var(--maie-small); font-size: 12px; color: var(--maie-grey); }
.benutzer-abmelden { height: 36px; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: var(--maie-r-chip); background: var(--maie-white); color: var(--maie-ink); font: var(--maie-small); cursor: pointer; box-shadow: inset 0 0 0 1px var(--maie-line); }
.benutzer-abmelden:hover { box-shadow: inset 0 0 0 1.5px var(--maie-accent); color: var(--maie-accent); }
.benutzer-abmelden svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell.nav-eingeklappt .benutzer { flex-direction: column; padding: var(--maie-s-2) 0; background: transparent; }
.shell.nav-eingeklappt .benutzer-text { display: none; }
.shell.nav-eingeklappt .benutzer-abmelden { padding: 0; width: 36px; justify-content: center; }
.uhr { font: var(--maie-small); font-family: var(--maie-font-mono); color: var(--maie-grey); }

.inhalt { min-width: 0; padding: 28px 36px 120px; background: transparent; }
.seite { display: grid; gap: var(--maie-s-5); max-width: none; margin: 0; }
.seite.heute { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: var(--maie-s-6); max-width: none; }
.seiten-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--maie-s-4) var(--maie-s-6); }
.seiten-kopf h1 { font: var(--maie-heading); letter-spacing: -.025em; }
.unterzeile { margin: var(--maie-s-1) 0 0; font: var(--maie-small); color: var(--maie-grey); max-width: 70ch; }
.kopf-aktionen { display: flex; align-items: center; gap: var(--maie-s-4); flex-wrap: wrap; }
.kernzustand { margin: 0; display: inline-flex; align-items: center; gap: var(--maie-s-2); font: var(--maie-small); color: var(--maie-grey); }
.kernzustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--maie-ok); }
.kernzustand[data-modus="hoert"]::before, .kernzustand[data-modus="denkt"]::before, .kernzustand[data-modus="spricht"]::before { background: var(--maie-busy); }
.abschnitt { font: var(--maie-card-title); letter-spacing: -.02em; margin-top: var(--maie-s-4); }
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--maie-s-6); }

/* ---------------------------------------------------------------- Gespräch (Verlauf; Eingabe nur über die Leiste) */
.gespraech { display: grid; gap: var(--maie-s-5); min-width: 0; }
.verlauf { display: flex; flex-direction: column; gap: var(--maie-s-4); min-height: 50vh; }
.leer-karte { margin: var(--maie-s-8) auto; max-width: 560px; width: 100%; display: grid; gap: var(--maie-s-3); text-align: center; padding: var(--maie-s-10) var(--maie-s-8); border: 1.5px dashed var(--maie-line); border-radius: var(--maie-r-card); }
.leer-karte h2 { font: var(--maie-display-l); letter-spacing: -.035em; }
.leer-karte p { margin: 0; color: var(--maie-grey); }
.vorschlaege { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--maie-s-2); margin-top: var(--maie-s-2); }
.beitrag { max-width: min(82%, 720px); padding: var(--maie-s-3) var(--maie-s-4); border-radius: var(--maie-r-card); background: var(--maie-white); animation: mai-rise var(--mai-t-enter) var(--mai-ease-in) both; }
.beitrag.chef { align-self: flex-end; background: var(--maie-ink); color: var(--maie-white); }
.beitrag.chef .wer { display: none; }
.beitrag.assistent { align-self: flex-start; }
.beitrag.fehler { align-self: flex-start; background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line); }
.beitrag.fehler .wer::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--maie-warn); margin-right: var(--maie-s-2); }
.beitrag .wer { display: block; font: var(--maie-micro); color: var(--maie-grey); margin-bottom: var(--maie-s-1); }
.beitrag .schritt { display: block; margin-top: var(--maie-s-2); font: var(--maie-small); color: var(--maie-grey); }
.bereich-marke { color: var(--maie-ink); }

/* ---------------------------------------------------------------- Jarvis-Leiste (eine Komponente in der Shell) */
.jarvis-leiste { position: fixed; z-index: 20; left: calc(50% + var(--maie-sidebar-w) / 2); bottom: var(--maie-s-5); transform: translateX(-50%); width: min(var(--maie-jarvis-bar-w), calc(100% - var(--maie-sidebar-w) - 72px)); display: flex; align-items: center; gap: 10px; padding: var(--maie-s-2) var(--maie-s-2) var(--maie-s-2) 10px; border-radius: var(--maie-r-chip); background: color-mix(in srgb, var(--maie-ink) 94%, transparent); color: var(--maie-white); box-shadow: var(--maie-shadow-float); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.jarvis-leiste input { flex: 1; min-width: 0; height: var(--maie-btn-sm); border: 0; background: transparent; color: var(--maie-white); font: var(--maie-ui); font-weight: 400; outline: none; }
.jarvis-leiste input::placeholder { color: var(--maie-grey-soft); }
.leisten-hinweis { flex: none; font: var(--maie-micro); font-weight: 400; color: var(--maie-grey-soft); white-space: nowrap; }
.rund-knopf { width: var(--maie-btn-sm); height: var(--maie-btn-sm); flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--maie-white); cursor: pointer; transition: background var(--mai-t-state) ease; }
.rund-knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rund-knopf.mikro { box-shadow: inset 0 0 0 1px var(--maie-line); }
.jarvis-leiste .rund-knopf.mikro { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--maie-white) 22%, transparent); }
.rund-knopf.mikro[aria-pressed="true"] { background: var(--maie-accent); box-shadow: none; }
.rund-knopf.senden { background: var(--maie-accent); }
.rund-knopf:disabled { opacity: .45; cursor: progress; }
.rund-knopf.dunkel { width: 32px; height: 32px; background: var(--maie-ink-2); }

/* Avatar (mai-avatar aus motion.css): idle roter Punkt, thinking drei Punkte, speaking fünf Balken */
.mai-avatar { flex: none; border: 0; padding: 0; cursor: pointer; }
.leisten-avatar { width: var(--maie-btn-sm); height: var(--maie-btn-sm); }
.schublade-avatar { width: 36px; height: 36px; }
.avatar-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--maie-accent); }
.mai-avatar .mai-dots, .mai-avatar .mai-talk { display: none; align-items: center; gap: 3px; }
.mai-avatar .mai-dots > span { width: 5px; height: 5px; }
.mai-avatar .mai-talk > span { height: 14px; width: 3px; }
.mai-avatar[data-state="thinking"] .avatar-punkt, .mai-avatar[data-state="speaking"] .avatar-punkt { display: none; }
.mai-avatar[data-state="thinking"] .mai-dots { display: flex; }
.mai-avatar[data-state="speaking"] .mai-talk { display: flex; }

/* ---------------------------------------------------------------- Denkweg-Schublade */
.schublade { position: fixed; z-index: 30; right: var(--maie-s-5); top: var(--maie-s-5); bottom: 92px; width: var(--maie-drawer-w); border-radius: var(--maie-r-panel); box-shadow: var(--maie-shadow-deep); display: flex; flex-direction: column; overflow: hidden; animation: mai-drawer .35s var(--mai-ease-in) both; }
.schublade-kopf { display: flex; align-items: center; gap: var(--maie-s-3); padding: 18px var(--maie-s-5) 14px; border-bottom: 1px solid var(--maie-ink-2); }
.schublade-titel { flex: 1; min-width: 0; display: grid; gap: 2px; }
.schublade-titel strong { font: var(--maie-ui); }
.schublade-titel span { font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.schublade-frage { padding: 14px var(--maie-s-5); display: grid; gap: var(--maie-s-3); }
.schublade-frage p { margin: 0; padding: 10px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-ink-2); font: var(--maie-small); }
.phasen { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.phasen li { padding: 6px 10px; border-radius: var(--maie-r-chip); background: var(--maie-ink-2); color: var(--maie-grey); font: var(--maie-micro); white-space: nowrap; transition: background var(--mai-t-state) ease, color var(--mai-t-state) ease; }
.phasen li.erledigt { background: var(--maie-white); color: var(--maie-ink); }
.phasen li.aktiv { background: var(--maie-accent); color: var(--maie-white); }
.phasen .linie { flex: 1; min-width: var(--maie-s-2); height: 2px; padding: 0; border-radius: 0; background: var(--maie-ink-2); }
.phasen .linie.erledigt { background: var(--maie-white); }
.fortschritt { height: 3px; border-radius: var(--maie-r-chip); background: var(--maie-ink-2); overflow: hidden; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--maie-accent); transition: width .4s ease; }
.schublade-koerper { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--maie-s-5) var(--maie-s-4); display: flex; flex-direction: column; gap: var(--maie-s-2); }
.antwort-karte { padding: 14px; border-radius: var(--maie-r-input); background: var(--maie-white); color: var(--maie-ink); display: grid; gap: 10px; font: var(--maie-small); animation: mai-rise .4s var(--mai-ease-in) both; }
.antwort-marke { display: flex; align-items: center; gap: 6px; font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.antwort-marke i { width: 6px; height: 6px; border-radius: 50%; background: var(--maie-accent); }
.antwort-karte .md { max-height: 40vh; overflow-y: auto; }
.antwort-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.antwort-knoepfe:empty { display: none; }
.antwort-knoepfe .knopf { height: 34px; padding: 0 14px; font: var(--maie-micro); font-size: 12px; }
.protokoll { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--maie-s-2); }
.protokoll li { display: grid; gap: 3px; padding: 9px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-ink-2); border-left: 3px solid var(--maie-line); animation: mai-rise .35s var(--mai-ease-in) both; }
.protokoll li:first-child { border-left-color: var(--maie-accent); }
.protokoll .zeile-kopf { display: flex; align-items: center; gap: var(--maie-s-2); }
.protokoll strong { font: var(--maie-micro); font-size: 12px; }
.protokoll .zeile-text { font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); overflow-wrap: anywhere; }
.protokoll .zeile-zeit { margin-left: auto; font: var(--maie-micro); font-family: var(--maie-font-mono); font-weight: 400; color: var(--maie-grey); }
.phase-tag { padding: 2px 6px; border-radius: var(--maie-r-chip); font: var(--maie-micro); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--maie-white); color: var(--maie-ink); }
.phase-tag[data-phase="quellen"] { background: var(--maie-line); }
.phase-tag[data-phase="abgleich"], .phase-tag[data-phase="regel"] { background: var(--maie-warn); }
.phase-tag[data-phase="antwort"], .phase-tag[data-phase="aktion"] { background: var(--maie-accent); color: var(--maie-white); }
.schublade-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--maie-s-2); padding: 10px var(--maie-s-5) 14px; border-top: 1px solid var(--maie-ink-2); font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }

/* ---------------------------------------------------------------- Rechte Spalte: Panels */
.wartet { display: grid; gap: var(--maie-s-4); min-width: 0; }
.panel { background: var(--maie-white); border-radius: var(--maie-r-panel); padding: 22px; display: grid; gap: var(--maie-s-3); min-width: 0; }
.panel-titel { font: var(--maie-ui); font-weight: 600; display: flex; align-items: center; gap: var(--maie-s-2); }
.panel-untertitel { font: var(--maie-small); font-weight: 600; display: flex; align-items: center; gap: var(--maie-s-2); margin-top: var(--maie-s-2); }
.live-marke { color: var(--maie-accent); font-size: 10px; }
.zaehler { min-width: 22px; padding: 1px 7px; border-radius: var(--maie-r-chip); background: var(--maie-mist); color: var(--maie-ink); font: var(--maie-micro); text-align: center; font-variant-numeric: tabular-nums; }
.zaehler.aktiv { background: var(--maie-accent-soft); box-shadow: inset 0 0 0 1.5px var(--maie-accent); }
.tafel { font: var(--maie-small); min-width: 0; }
.tafel summary { cursor: pointer; font-weight: 600; }
.leer { margin: 0; font: var(--maie-small); color: var(--maie-grey); }

/* Markdown */
.md { overflow-wrap: anywhere; }
.md h1, .md h2, .md h3 { font: var(--maie-micro); color: var(--maie-grey); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 4px; }
.md h1:first-child, .md h2:first-child, .md h3:first-child, .md p:first-child { margin-top: 0; }
.md p { margin: 6px 0; }
.md p:last-child { margin-bottom: 0; }
.md ul { margin: 6px 0; padding-left: 20px; }
.md li { margin: 3px 0; }
.md code { font-family: var(--maie-font-mono); font-size: .86em; background: var(--maie-mist); padding: 1px 5px; border-radius: var(--maie-r-chip); }
.md .tabelle { overflow-x: auto; }
.md table { border-collapse: collapse; font: var(--maie-small); margin: var(--maie-s-2) 0; }
.md td, .md th { border-bottom: 1px solid var(--maie-line-soft); padding: 5px var(--maie-s-2); text-align: left; font-variant-numeric: tabular-nums; }
.md blockquote { margin: 6px 0; padding-left: 10px; border-left: 2px solid var(--maie-line); color: var(--maie-grey); }

/* Freigaben: Stand-Rand links, Aktion nötig = accent-soft */
.freigaben { display: grid; gap: 10px; }
.freigabe { display: grid; gap: var(--maie-s-2); padding: 14px var(--maie-s-4); border-radius: var(--maie-r-input); background: var(--maie-accent-soft); border-left: 4px solid var(--maie-accent); font: var(--maie-small); min-width: 0; transition: opacity var(--mai-t-state) ease, transform var(--mai-t-state) ease; animation: mai-rise var(--mai-t-enter) var(--mai-ease-in) both; }
.freigabe.geht { opacity: 0; transform: translateX(24px); }
.freigabe h3 { font: var(--maie-ui); }
.freigabe .meta { font: var(--maie-micro); color: var(--maie-grey); font-variant-numeric: tabular-nums; }
.freigabe pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--maie-small); max-height: 8.6em; overflow: hidden; background: var(--maie-white); border-radius: var(--maie-r-input); padding: 10px var(--maie-s-3); }
.freigabe.offen pre { max-height: none; }
.freigabe .zeilen { display: flex; flex-wrap: wrap; gap: var(--maie-s-2); }
.mitteilungen, .entschieden, .fristen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--maie-s-2); }
.mitteilungen li, .entschieden li { padding: 10px 14px; border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); overflow-wrap: anywhere; white-space: pre-line; min-width: 0; }
.mitteilungen time, .entschieden time { display: block; font: var(--maie-micro); font-family: var(--maie-font-mono); font-weight: 400; color: var(--maie-grey); margin-bottom: 3px; }
.entschieden .s-freigegeben { color: var(--maie-ink); font-weight: 600; }
.entschieden .s-abgelehnt { color: var(--maie-grey); }
.entschieden .s-fehlgeschlagen::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--maie-warn); margin-right: 6px; }

/* Kennzahlen: dunkle Karten, Wert in --maie-kpi */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kachel { background: var(--maie-ink); color: var(--maie-white); border-radius: var(--maie-r-card); padding: 14px var(--maie-s-4); display: grid; gap: var(--maie-s-1); min-width: 0; }
.kachel .k-titel { font: var(--maie-micro); font-weight: 400; color: var(--maie-grey-soft); }
.kachel .k-wert { font: var(--maie-kpi); font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kachel .k-ziel { font: var(--maie-micro); font-weight: 400; color: var(--maie-grey-soft); font-variant-numeric: tabular-nums; }
.kachel .balken, .verbrauch .balken { height: 4px; border-radius: var(--maie-r-chip); overflow: hidden; background: var(--maie-ink-2); }
.kachel .balken i, .verbrauch .balken i { display: block; height: 100%; background: var(--maie-white); transform-origin: left; animation: mai-bar 1.2s var(--mai-ease-in) both; transition: width var(--mai-t-state) ease; }
.kachel.knapp .balken i { background: var(--maie-warn); }
.kachel.schlecht .balken i { background: var(--maie-accent); }
.kachel .hoch, .kachel .runter { color: var(--maie-white); }

/* Verbrauch in der Agenten-Karte */
.verbrauch { display: grid; gap: 6px; font: var(--maie-micro); font-weight: 400; font-variant-numeric: tabular-nums; }
.verbrauch .zeile { display: flex; justify-content: space-between; gap: 10px; }
.verbrauch .zeile span:first-child { color: var(--maie-grey); }
.verbrauch .balken.knapp i { background: var(--maie-warn); }
.verbrauch .balken.voll i { background: var(--maie-accent); }
.verbrauch .klein { margin: 0; color: var(--maie-grey); }

/* Live-Puls: neue Einträge klappen von oben auf (mai-feed) */
.puls-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.puls-liste li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); }
.puls-liste li::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--maie-work); }
.puls-liste li[data-art="freigabe"] { background: var(--maie-accent-soft); }
.puls-liste li[data-art="freigabe"]::before { background: var(--maie-accent); }
.puls-liste li[data-art="warnung"]::before, .puls-liste li[data-art="fehler"]::before { background: var(--maie-warn); }
.puls-liste li[data-art="erledigt"]::before { background: var(--maie-ok); }
.puls-liste li.neu { animation: mai-feed .5s ease both; }
.puls-liste b { font-weight: 500; overflow-wrap: anywhere; }
.puls-liste small { display: block; color: var(--maie-grey); margin-top: 2px; overflow-wrap: anywhere; }
.puls-liste time { font: var(--maie-micro); font-family: var(--maie-font-mono); font-weight: 400; color: var(--maie-grey); white-space: nowrap; }
.puls-liste li.leer { grid-template-columns: 1fr; color: var(--maie-grey); }
.puls-liste li.leer::before { display: none; }

/* ---------------------------------------------------------------- Unternehmen */
.ziele { display: grid; gap: 6px; min-width: min(360px, 100%); }
.ziel { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--maie-s-3); padding: var(--maie-s-2) var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); }
.ziel b { font-weight: 600; }
.ziel span { color: var(--maie-grey); text-align: right; font-variant-numeric: tabular-nums; }
.organigramm { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--maie-s-3); }
.bereich-karte { display: grid; gap: var(--maie-s-2); padding: var(--maie-s-4); border-radius: var(--maie-r-card); background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line); font: var(--maie-small); animation: mai-pop .5s var(--mai-ease-pop) both; }
.bereich-karte h3 { font: var(--maie-ui); font-size: 16px; }
.bereich-karte .person { display: flex; align-items: center; gap: var(--maie-s-2); }
.bereich-karte .avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--maie-mist); font: var(--maie-micro); }
.bereich-karte .person small { display: block; color: var(--maie-grey); }
.bereich-karte ul { margin: 0; padding-left: var(--maie-s-4); color: var(--maie-grey); display: grid; gap: 2px; }
.bereich-karte .etikett { font: var(--maie-micro); color: var(--maie-grey); text-transform: uppercase; letter-spacing: .06em; }
.marken { display: flex; flex-wrap: wrap; gap: var(--maie-s-1); }
.marke-klein { padding: 2px var(--maie-s-2); border-radius: var(--maie-r-chip); background: var(--maie-mist); font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.frist { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--maie-s-3); align-items: start; padding: 10px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line); border-left: 4px solid var(--maie-line); font: var(--maie-small); }
.frist .wann { padding: 3px var(--maie-s-2); border-radius: var(--maie-r-chip); background: var(--maie-mist); font: var(--maie-micro); white-space: nowrap; font-variant-numeric: tabular-nums; }
.frist.s-7, .frist.s-ueberfaellig { border-left-color: var(--maie-accent); }
.frist.s-7 .wann, .frist.s-ueberfaellig .wann { background: var(--maie-accent-soft); }
.frist.s-30 { border-left-color: var(--maie-warn); }
.frist.s-90 { border-left-color: var(--maie-ink); }
.frist small { grid-column: 2; color: var(--maie-grey); }
.karten-liste, .vault-liste { display: grid; gap: var(--maie-s-2); }
.karte-zeile { display: grid; gap: 2px; padding: 10px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); }
.karte-zeile b { font-weight: 600; }
.karte-zeile span { color: var(--maie-grey); }
.tabelle-huelle { overflow-x: auto; border-radius: var(--maie-r-card); box-shadow: inset 0 0 0 1px var(--maie-line); }
.tabelle { width: 100%; min-width: 640px; border-collapse: collapse; font: var(--maie-small); font-size: 14px; }
.tabelle th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--maie-line-soft); font: var(--maie-micro); color: var(--maie-grey); text-transform: uppercase; letter-spacing: .06em; }
.tabelle td { padding: 10px 14px; border-bottom: 1px solid var(--maie-line-soft); vertical-align: top; color: var(--maie-grey); }
.tabelle td:first-child { color: var(--maie-ink); font-weight: 600; white-space: nowrap; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tr:hover td { background: var(--maie-mist); }

/* ---------------------------------------------------------------- Gedächtnis */
.zahlen-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.zahl-kachel { display: grid; gap: var(--maie-s-1); padding: 14px var(--maie-s-4); border-radius: var(--maie-r-card); background: var(--maie-ink); color: var(--maie-white); }
.zahl-kachel b { font: var(--maie-kpi); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zahl-kachel span { font: var(--maie-micro); font-weight: 400; color: var(--maie-grey-soft); }
.graph-huelle { overflow-x: auto; padding: var(--maie-s-3); border-radius: var(--maie-r-card); box-shadow: inset 0 0 0 1px var(--maie-line); }
.graph-huelle svg { display: block; width: 100%; min-width: 600px; height: auto; font-family: var(--maie-font-text); }
.graph-huelle .knoten-text { font-size: 13px; font-weight: 600; fill: var(--maie-ink); }
.graph-huelle .knoten-text.hell { fill: var(--maie-white); }
.graph-huelle .knoten-sub { font-size: 11px; fill: var(--maie-grey); }
.graph-huelle .kante { fill: none; stroke: var(--maie-line); stroke-width: 1.5; }
.graph-huelle .kante-aktiv { stroke: var(--maie-accent); stroke-width: 2; }
.graph-huelle .punkt { fill: var(--maie-white); stroke: var(--maie-line); stroke-width: 1.5; }
.graph-huelle .punkt-kern { fill: var(--maie-ink); }
.graph-huelle .punkt-kern.mitte { fill: var(--maie-accent); }
.graph-huelle .punkt-glanz { fill: var(--maie-accent-soft); }
.vault-ordner { padding: 10px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); }
.vault-ordner summary { cursor: pointer; font: var(--maie-ui); }
.vault-ordner summary span { color: var(--maie-grey); font-weight: 400; }
.vault-ordner ul { margin: var(--maie-s-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--maie-s-1); font: var(--maie-small); }
.vault-ordner li { display: flex; justify-content: space-between; gap: 10px; color: var(--maie-grey); }
.vault-ordner li b { color: var(--maie-ink); font-weight: 500; }

/* Seitenwechsel: weich überblenden, Kurve aus dem Motion-Kit */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--mai-t-state); animation-timing-function: var(--mai-ease-in); }

/* ---------------------------------------------------------------- Organigramm (/org), Maße aus der Referenz (Fläche 980 × 520) */
.titel-leise { color: var(--maie-grey); }
.legende { display: flex; flex-wrap: wrap; gap: var(--maie-s-2); }
.legende-chip { display: inline-flex; align-items: center; gap: var(--maie-s-2); padding: var(--maie-s-2) 14px; border-radius: var(--maie-r-chip); background: var(--maie-white); font: var(--maie-small); }
.legende .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--maie-idle); }
.legende .punkt.aktiv { background: var(--maie-accent); }
.legende .punkt.mensch { background: var(--maie-ink); }
.org-regler { align-self: flex-start; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: var(--maie-s-3); padding: 10px 14px; border-radius: var(--maie-r-card); background: var(--maie-white); }
.regler-titel { font: var(--maie-micro); font-size: 12px; font-weight: 400; color: var(--maie-grey); margin-right: var(--maie-s-1); }
.regler { display: flex; align-items: center; gap: 6px; padding: var(--maie-s-1) 6px var(--maie-s-1) var(--maie-s-3); border-radius: var(--maie-r-chip); background: var(--maie-mist); font: var(--maie-small); }
.regler strong { width: 18px; text-align: center; font-size: 14px; }
.org-info { font: var(--maie-micro); font-size: 12px; font-weight: 400; color: var(--maie-grey); margin-left: var(--maie-s-2); }
.knopf.kompakt { height: 34px; padding: 0 14px; font-size: 13px; margin-left: var(--maie-s-2); }
.mini-knopf { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; font: var(--maie-ui); font-size: 13px; line-height: 1; cursor: pointer; }
.mini-knopf.gross { width: 28px; height: 28px; font-size: 16px; }
.mini-knopf.hell { background: var(--maie-mist); color: var(--maie-ink); }
.regler .mini-knopf.hell { background: var(--maie-white); }
.mini-knopf.dunkel { background: var(--maie-ink); color: var(--maie-white); }
.mini-knopf:disabled { opacity: .45; cursor: progress; }
.hinweis-fehler { margin: 0; font: var(--maie-small); }
.hinweis-fehler::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--maie-warn); margin-right: var(--maie-s-2); }

.org-buehne { --skala: 1; position: relative; min-height: calc(560px * var(--skala) + 40px); border-radius: var(--maie-r-frame); background: var(--maie-white); overflow: hidden; perspective: 1400px; display: flex; align-items: center; justify-content: center; }
.org-raster { position: absolute; inset: 0; background-image: linear-gradient(var(--maie-line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--maie-line-soft) 1px, transparent 1px); background-size: 48px 48px; transform: rotateX(60deg) translateY(-120px) scale(1.6); opacity: .5; -webkit-mask-image: radial-gradient(ellipse at center, var(--maie-ink) 30%, transparent 70%); mask-image: radial-gradient(ellipse at center, var(--maie-ink) 30%, transparent 70%); pointer-events: none; }
.org-skala { width: calc(980px * var(--skala)); height: calc(520px * var(--skala)); transform-style: preserve-3d; }
.org-zoom { width: 980px; height: 520px; transform: scale(var(--skala)); transform-origin: 0 0; transform-style: preserve-3d; }
/* Schweben (mai-float) an der Hülle, Neigung an der Fläche: bei reduzierter Bewegung bleibt die Neigung stehen */
.org-schweben { width: 980px; height: 520px; transform-style: preserve-3d; }
.org-flaeche { position: relative; width: 980px; height: 520px; transform: rotateX(14deg) rotateZ(-6deg); transform-style: preserve-3d; }
.org-linien { position: absolute; inset: 0; fill: none; stroke: var(--maie-idle); stroke-width: 2; }
.org-ort { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform-style: preserve-3d; }
.org-ort.tiefe-60 { transform: translateZ(60px); }
.org-ort.tiefe-40 { transform: translateZ(40px); }
.org-ort.tiefe-20 { transform: translateZ(20px); }
.org-ort.tiefe-10 { transform: translateZ(10px); }
.org-ort > * { width: 100%; height: var(--h, auto); }
.org-leitung { border-radius: var(--maie-r-card); background: var(--maie-ink); color: var(--maie-white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: var(--maie-shadow-float); }
.org-leitung strong { font: var(--maie-ui); font-size: 15px; font-weight: 600; }
.org-leitung span { font: var(--maie-micro); font-size: 12px; font-weight: 400; color: var(--maie-grey-soft); }
.org-bereich { border: 0; border-radius: var(--maie-r-card); background: var(--maie-white); box-shadow: var(--maie-shadow-card); padding: var(--maie-s-4); display: flex; flex-direction: column; justify-content: space-between; text-align: left; cursor: pointer; font: var(--maie-small); color: var(--maie-ink); transition: box-shadow var(--mai-t-state) ease; }
.org-bereich.aktiv { box-shadow: var(--maie-shadow-card), inset 0 0 0 1.5px var(--maie-accent); }
.org-bereich:hover { box-shadow: var(--maie-shadow-float); }
.org-bereich.aktiv:hover { box-shadow: var(--maie-shadow-float), inset 0 0 0 1.5px var(--maie-accent); }
.org-bereich.platzhalter { cursor: default; color: var(--maie-grey); }
.org-bereich:disabled { opacity: 1; }
.org-bereich-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--maie-s-2); }
.org-bereich-kopf strong { font: var(--maie-ui); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.org-bereich .punkt { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--maie-idle); }
.org-bereich .punkt.aktiv { background: var(--maie-accent); }
.org-bereich-fuss { display: flex; align-items: center; gap: 6px; padding-left: var(--maie-s-2); }
.kopf-kreis { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--maie-white); margin-left: calc(var(--maie-s-2) * -1); background: var(--maie-grey); }
.kopf-kreis.art-leitung { background: var(--maie-ink); }
.kopf-kreis.art-agent { background: var(--maie-accent); }
.kopf-kreis.art-workflow { background: var(--maie-work); }
.org-zahl { font: var(--maie-micro); font-size: 12px; font-weight: 400; color: var(--maie-grey); margin-left: var(--maie-s-1); line-height: 1.3; }
.org-gruppen-regler { display: flex; justify-content: center; align-items: center; gap: 6px; font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.org-gruppe { border-radius: var(--maie-r-input); background: var(--maie-mist); display: flex; align-items: center; justify-content: center; padding: 0 var(--maie-s-2); font: var(--maie-micro); font-size: 12px; font-weight: 400; color: var(--maie-grey); text-align: center; }
.org-team { border-radius: var(--maie-r-input); border: 1px dashed var(--maie-idle); display: flex; align-items: center; justify-content: center; font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.zurueck { justify-self: start; border: 0; background: none; padding: 0; font: var(--maie-small); color: var(--maie-grey); cursor: pointer; }
.zurueck:hover { color: var(--maie-ink); }

/* ---------------------------------------------------------------- Bereich live (/bereich/:id), Aufbau wie in der Referenz */
.kopf-spalte { display: flex; flex-direction: column; gap: 6px; }
.kopf-spalte .zurueck { padding: var(--maie-s-1) 0; font: var(--maie-ui); font-size: 13px; }
.knopf.dunkel { background: var(--maie-ink); color: var(--maie-white); }
.knopf.mittel { height: var(--maie-btn-sm); padding: 0 18px; font-size: 13px; }
.knopf .punkt, .legende-chip .punkt { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--maie-idle); }
.knopf .punkt.aktiv, .legende-chip .punkt.aktiv { background: var(--maie-accent); }
.knopf.klein-34 { height: 34px; padding: 0 14px; font-size: 12px; gap: 6px; }
.knopf.klein-34 svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.knopf.weiss { background: var(--maie-white); color: var(--maie-ink); }
.knopf.mini { height: 26px; padding: 0 10px; font-size: 11px; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 6px; }

.bereich-raster { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: auto 1fr; gap: var(--maie-s-5); align-items: stretch; }
.panel-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--maie-s-2) var(--maie-s-4); }
.panel-klein { margin: 0; font: var(--maie-small); color: var(--maie-grey); }
h2.panel-klein { font-size: 13px; }
.panel-titel-gross { margin: 0 0 2px; font: var(--maie-ui); font-size: 15px; font-weight: 600; }
.panel.gross { border-radius: var(--maie-r-frame); padding: var(--maie-s-6) 28px; gap: 22px; }

.leute-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.leute-chip { display: flex; align-items: center; gap: 10px; padding: var(--maie-s-2) 14px var(--maie-s-2) var(--maie-s-2); border-radius: var(--maie-r-chip); background: var(--maie-mist); }
.kopf-kreis.gross, .kopf-kreis.klein { margin: 0; border: 0; display: grid; place-items: center; color: var(--maie-white); font: var(--maie-micro); font-size: 12px; font-weight: 600; }
.kopf-kreis.gross { width: 32px; height: 32px; }
.kopf-kreis.klein { width: 22px; height: 22px; font-size: 10px; }
.kopf-kreis.art-mensch { background: var(--maie-grey); }
.kopf-kreis.art-extern { background: var(--maie-grey); }
.leute-text { display: flex; flex-direction: column; }
.leute-text strong { font: var(--maie-ui); font-size: 13px; font-weight: 600; line-height: 1.2; }
.leute-taetig { display: flex; align-items: center; gap: 6px; font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.leute-taetig .punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--maie-ink); }
.leute-taetig .punkt.art-agent { background: var(--maie-accent); }
.leute-taetig .punkt.art-workflow { background: var(--maie-idle); }
.skel-chip { width: 150px; height: 48px; border-radius: var(--maie-r-chip); }

.kpi-karte { border-radius: var(--maie-r-panel); padding: 22px var(--maie-s-6); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--maie-s-4); }
.kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi-titel { font: var(--maie-micro); font-weight: 400; color: var(--maie-grey-soft); line-height: 1.3; }
.kpi-wert { font: var(--maie-kpi); font-size: 30px; letter-spacing: -.02em; color: var(--kpi-ton, var(--maie-white)); }
.kpi-balken { height: 4px; border-radius: var(--maie-r-chip); background: var(--maie-line); overflow: hidden; }
.kpi-balken i { display: block; height: 100%; background: var(--kpi-ton, var(--maie-white)); }
.kpi.ton-akzent { --kpi-ton: var(--maie-accent); }
.kpi.ton-gut { --kpi-ton: var(--maie-ok); }
.kpi.ton-warn { --kpi-ton: var(--maie-warn); }
.kpi.ton-aus { --kpi-ton: var(--maie-work); }
.mai-counter-col > span > span { display: block; height: 1em; line-height: 1; }

.zaehl-chip { padding: 6px var(--maie-s-3); border-radius: var(--maie-r-chip); background: var(--maie-mist); font: var(--maie-small); font-size: 12px; }
.tool-fluss { display: flex; align-items: stretch; }
.tool-fluss > .mai-flow-line { flex: 0 0 36px; align-self: center; background: var(--maie-line); }
.tool-karte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--maie-s-3); padding: var(--maie-s-4); border-radius: var(--maie-r-card); background: var(--maie-mist); color: var(--maie-ink); text-decoration: none; transition: box-shadow var(--mai-t-state) ease; }
a.tool-karte:hover { box-shadow: inset 0 0 0 1.5px var(--maie-ink); }
.tool-karte.agent, a.tool-karte.agent:hover { box-shadow: inset 0 0 0 1.5px var(--maie-accent); }
.tool-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--maie-s-2); }
.tool-kachel { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--maie-r-input); background: var(--maie-ink); color: var(--maie-white); font: var(--maie-ui); font-size: 13px; font-weight: 700; }
.tool-kachel.agent { background: var(--maie-accent); }
.tool-pfeil svg { width: 16px; height: 16px; fill: none; stroke: var(--maie-grey); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.platzhalter-text { font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.tool-name { display: flex; flex-direction: column; gap: 2px; }
.tool-name strong { font: var(--maie-ui); font-weight: 600; overflow-wrap: anywhere; }
.tool-name span, .tool-daten { font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); line-height: 1.4; }

.bausteine, .verteilen { display: flex; flex-direction: column; gap: var(--maie-s-2); }
.baustein-liste { display: flex; flex-wrap: wrap; gap: var(--maie-s-2); }
.baustein { display: flex; align-items: center; gap: 10px; padding: var(--maie-s-2) var(--maie-s-3) var(--maie-s-2) 10px; border-radius: var(--maie-r-input); background: var(--maie-mist); border-left: 3px solid var(--maie-work); font: var(--maie-small); font-size: 12px; }
.baustein.aktiv { border-left-color: var(--maie-ink); }
.baustein-text { display: flex; flex-direction: column; gap: 1px; }
.baustein-text span { color: var(--maie-grey); }
.leer-hinweis { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--maie-r-input); border: 1px dashed var(--maie-idle); font: var(--maie-small); font-size: 12px; color: var(--maie-grey); }
.punkt.warn { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--maie-warn); }
.wer-baut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--maie-s-2); padding: var(--maie-s-2) var(--maie-s-3); border-radius: var(--maie-r-input); border: 1px solid var(--maie-line-soft); font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.wer-baut strong { color: var(--maie-ink); font-weight: 600; }
.wer-chip { padding: 3px var(--maie-s-2); border-radius: var(--maie-r-chip); background: var(--maie-mist); }
.wer-chip.dunkel { background: var(--maie-ink); color: var(--maie-white); }
.verteil-liste { display: grid; gap: var(--maie-s-2); }
.verteil-zeile { display: grid; grid-template-columns: 1fr 150px 110px; gap: var(--maie-s-3); align-items: center; padding: 10px 14px; border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); font-size: 13px; }
.verteil-wer { display: flex; align-items: center; gap: var(--maie-s-2); }
.akteur-tag { justify-self: end; flex: none; padding: 3px var(--maie-s-2); border-radius: var(--maie-r-chip); font: var(--maie-micro); font-weight: 600; background: var(--maie-line); color: var(--maie-ink); }
.verteil-zeile .akteur-tag { padding: var(--maie-s-1) 10px; }
.akteur-tag.agent { background: var(--maie-accent); color: var(--maie-white); }
.akteur-tag.mensch { background: var(--maie-ink); color: var(--maie-white); }
.akteur-tag.hinweis { background: var(--maie-warn); color: var(--maie-ink); }

.feed-panel { align-content: start; grid-template-rows: auto 1fr auto; }
.feed-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--maie-s-3); align-content: start; }
.feed-liste li { display: flex; align-items: flex-start; gap: var(--maie-s-3); padding: 10px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); overflow: hidden; }
.feed-liste li.neu { background: var(--maie-accent-soft); }
.feed-liste li.leer { color: var(--maie-grey); font: var(--maie-small); }
.feed-liste time { flex: none; padding-top: 2px; font: var(--maie-micro); font-family: var(--maie-font-mono); font-weight: 400; color: var(--maie-grey); }
.feed-text { font: var(--maie-small); font-size: 13px; line-height: 1.4; }
.feed-liste .akteur-tag { margin-left: auto; }
.ablauf { display: flex; flex-direction: column; gap: var(--maie-s-2); padding-top: var(--maie-s-3); }
.ablauf-reihe { display: flex; align-items: center; }
.ablauf-reihe > .mai-flow-line { min-width: 16px; background: var(--maie-line); }
.ablauf-schritt { padding: 7px 10px; border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-micro); font-weight: 500; white-space: nowrap; }
.ablauf-schritt.erster { background: var(--maie-ink); color: var(--maie-white); }
.ablauf-schritt.letzter { background: var(--maie-accent); color: var(--maie-white); }

/* ---------------------------------------------------------------- Anbindungen (/anbindungen): Katalog links, Einrichtung rechts */
.hinweis-fehler.gut::before { background: var(--maie-ok); }
.anb-raster { display: grid; grid-template-columns: minmax(0, 1fr) var(--maie-drawer-w); gap: var(--maie-s-5); align-items: start; }
.anb-katalog { display: grid; gap: var(--maie-s-5); }
.anb-gruppe .nav-titel { padding: 0 0 var(--maie-s-2); }
.anb-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--maie-s-3); }
.anb-karte { display: flex; flex-direction: column; gap: var(--maie-s-2); padding: var(--maie-s-4); border: 0; border-radius: var(--maie-r-card); background: var(--maie-white); border-left: 4px solid var(--maie-idle); text-align: left; cursor: pointer; font: var(--maie-small); color: var(--maie-ink); transition: box-shadow var(--mai-t-state) ease; }
.anb-karte:hover { box-shadow: var(--maie-shadow-card); }
.anb-karte.gewaehlt { box-shadow: inset 0 0 0 1.5px var(--maie-ink); }
.anb-karte.status-verbunden { border-left-color: var(--maie-ok); }
.anb-karte.status-fehler, .anb-karte.status-unvollstaendig { border-left-color: var(--maie-warn); }
.anb-karte.status-gespeichert { border-left-color: var(--maie-ink); }
.anb-karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--maie-s-2); }
.anb-karte-kopf strong { font: var(--maie-ui); font-weight: 600; }
.anb-beschreibung { color: var(--maie-grey); font-size: 12px; line-height: 1.45; }
.anb-status { flex: none; padding: 2px var(--maie-s-2); border-radius: var(--maie-r-chip); background: var(--maie-mist); font: var(--maie-micro); white-space: nowrap; }
.anb-status.verbunden { background: color-mix(in srgb, var(--maie-ok) 22%, var(--maie-white)); }
.anb-status.fehler, .anb-status.unvollstaendig { background: color-mix(in srgb, var(--maie-warn) 30%, var(--maie-white)); }
.anb-status.gespeichert { background: var(--maie-ink); color: var(--maie-white); }
.anb-detail { position: sticky; top: var(--maie-s-5); max-height: calc(100vh - 140px); overflow-y: auto; }
.leer-karte.klein { margin: 0; padding: var(--maie-s-6); }
.leer-karte.klein h2 { font: var(--maie-card-title); }
.anb-test { margin: 0; display: flex; gap: var(--maie-s-2); align-items: baseline; font: var(--maie-small); }
.anb-test .punkt { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--maie-warn); }
.anb-test.gut .punkt { background: var(--maie-ok); }
.anb-anleitung { border-radius: var(--maie-r-input); background: var(--maie-mist); padding: var(--maie-s-3) var(--maie-s-4); font: var(--maie-small); }
.anb-anleitung summary { cursor: pointer; font-weight: 600; }
.anb-schritte { margin: var(--maie-s-2) 0; padding-left: var(--maie-s-5); display: grid; gap: var(--maie-s-1); }
.anb-link { color: var(--maie-ink); font-weight: 500; text-underline-offset: 3px; }
.anb-rueckruf { display: grid; gap: var(--maie-s-1); }
.anb-rueckruf code { padding: var(--maie-s-2) var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); font-size: 12px; overflow-wrap: anywhere; user-select: all; }
.anb-formular { display: grid; gap: var(--maie-s-4); }
.anb-feld { display: grid; gap: 6px; }
.anb-feld label { font: var(--maie-ui); font-weight: 600; }
.anb-feld input { height: var(--maie-btn); padding: 0 14px; border: 1px solid var(--maie-idle); border-radius: var(--maie-r-input); background: var(--maie-white); font: var(--maie-body); font-size: 15px; }
.anb-feld input:focus { outline: 2px solid var(--maie-accent); outline-offset: 0; }
.anb-feld input:disabled { background: var(--maie-mist); color: var(--maie-grey); }
.anb-hilfe { margin: 0; font: var(--maie-small); font-size: 12px; color: var(--maie-grey); }
.anb-feldfehler { margin: 0; font: var(--maie-small); font-size: 12px; font-weight: 600; }
.zug { margin-top: var(--maie-s-5); display: grid; gap: var(--maie-s-4); }
.zug-wege { display: grid; gap: var(--maie-s-2); }
.zug-formular { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: var(--maie-s-3); align-items: end; }
.zug-formular input, .zug-formular select { width: 100%; min-width: 0; box-sizing: border-box; }
.zug-formular select { height: var(--maie-btn); padding: 0 14px; border: 1px solid var(--maie-idle); border-radius: var(--maie-r-input); background: var(--maie-white); font: var(--maie-body); font-size: 15px; }
.zug-neu { display: grid; gap: var(--maie-s-2); padding: var(--maie-s-4); border-radius: var(--maie-r-input); background: var(--maie-accent-soft); box-shadow: inset 0 0 0 1.5px var(--maie-accent); }
.zug-neu code { padding: var(--maie-s-2) var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-white); font-size: 12px; overflow-wrap: anywhere; user-select: all; }
.zug .tabelle { min-width: 720px; }
.zug .tabelle tr.aus td { color: var(--maie-grey-soft); }
.zug-ereignisse td.zug-felder { font-size: 12px; }
.zug-ereignisse tr.offen td:nth-child(3) { color: var(--maie-ink); }
.anb-ereignisse { display: grid; gap: var(--maie-s-2); margin-top: var(--maie-s-4); }
.eb-datum { height: var(--maie-btn-sm); padding: 0 12px; border: 1px solid var(--maie-idle); border-radius: var(--maie-r-input); background: var(--maie-white); font: var(--maie-small); }
.anb-ereignisse .tabelle { min-width: 520px; }
@media (max-width: 1100px) { .zug-formular { grid-template-columns: 1fr; } }
.anb-feldfehler:not(:empty)::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--maie-warn); margin-right: 6px; }
a.knopf { text-decoration: none; }
a.knopf.aus { opacity: .45; pointer-events: none; }

/* ---------------------------------------------------------------- Agenten-Karte (Navigation unten) */
.agenten-karte { gap: var(--maie-s-2); }
.agenten-titel { font: var(--maie-micro); font-weight: 400; color: var(--maie-grey-soft); }
.agenten-zahl { display: flex; align-items: baseline; gap: var(--maie-s-2); }
.agenten-zahl strong { font: var(--maie-kpi); letter-spacing: -.02em; }
.agenten-zahl span { font: var(--maie-small); color: var(--maie-grey-soft); }
.agenten-jetzt { margin: 0; font: var(--maie-small); font-size: 12px; color: var(--maie-white); }

/* ---------------------------------------------------------------- Heute: Startseite */
.heute-links { display: grid; gap: var(--maie-s-5); min-width: 0; }
.kacheln.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kachel.gut .balken i { background: var(--maie-gruen); }
.kachel.gut .k-wert { color: var(--maie-gruen); }
.kachel.knapp .balken i { background: var(--maie-gelb); }
.kachel.knapp .k-wert { color: var(--maie-gelb); }
.kachel .hoch { color: var(--maie-gruen); }
.kachel .runter { color: var(--maie-accent); }
.punkt.ok { background: var(--maie-ok); }

/* ---------------------------------------------------------------- CEO-Assistent */
.assistent-raster { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: var(--maie-s-5); align-items: stretch; min-height: calc(100vh - 220px); }
.avatar-karte { position: relative; overflow: hidden; border-radius: var(--maie-r-panel); padding: var(--maie-s-8) var(--maie-s-5) var(--maie-s-5); display: flex; flex-direction: column; align-items: center; gap: var(--maie-s-5); }
.avatar-glanz { position: absolute; top: 60px; left: 50%; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--maie-accent) 28%, transparent), transparent); filter: blur(24px); pointer-events: none; }
.avatar-gross { width: 132px; height: 132px; margin-top: var(--maie-s-4); }
.avatar-gross .avatar-punkt { width: 18px; height: 18px; }
.avatar-gross .mai-dots > span { width: 10px; height: 10px; }
.avatar-gross .mai-talk > span { width: 5px; height: 28px; }
.avatar-name { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.avatar-name strong { font: var(--maie-card-title); font-size: 22px; }
.avatar-name span { font: var(--maie-small); font-size: 12px; color: var(--maie-grey); }
.kann { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.kann-zeile { display: flex; align-items: center; gap: var(--maie-s-2); padding: 9px 12px; border-radius: var(--maie-r-input); background: var(--maie-ink-2); font: var(--maie-small); font-size: 12px; color: var(--maie-white); }
.kann-zeile svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--maie-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kanal-chips { margin-top: auto; display: flex; gap: 6px; }
.kanal-chip { padding: 4px 10px; border-radius: var(--maie-r-chip); background: var(--maie-ink-2); font: var(--maie-micro); font-weight: 500; color: var(--maie-grey-soft); }
.kanal-chip.an { background: var(--maie-white); color: var(--maie-ink); }

.chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: var(--maie-r-panel); background: var(--maie-white); padding: var(--maie-s-4) var(--maie-s-5) var(--maie-s-4); min-height: 0; }
.chat-kopf { padding-bottom: var(--maie-s-3); border-bottom: 1px solid var(--maie-line-soft); }
.chat-panel .verlauf { overflow-y: auto; padding: var(--maie-s-4) 0; min-height: 320px; max-height: calc(100vh - 340px); }
.chat-panel .beitrag.assistent { background: var(--maie-mist); }
.chat-panel .beitrag.chef { background: var(--maie-ink); color: var(--maie-white); }
.chat-eingabe-ort { padding-top: var(--maie-s-3); border-top: 1px solid var(--maie-line-soft); }
.jarvis-leiste.im-panel { position: static; transform: none; width: 100%; max-width: none; background: var(--maie-mist); color: var(--maie-ink); box-shadow: none; backdrop-filter: none; }
.jarvis-leiste.im-panel input { color: var(--maie-ink); }
.jarvis-leiste.im-panel input::placeholder { color: var(--maie-grey); }
.jarvis-leiste.im-panel .leisten-avatar, .jarvis-leiste.im-panel .leisten-hinweis { display: none; }
.jarvis-leiste.im-panel .rund-knopf.mikro { color: var(--maie-ink); box-shadow: inset 0 0 0 1px var(--maie-idle); }

.thema-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--maie-s-2); font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.thema-zeile .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--maie-accent); }
.thema-chip { padding: 2px var(--maie-s-2); border-radius: var(--maie-r-chip); background: var(--maie-white); font-weight: 600; color: var(--maie-ink); }
.thema-chip.bereich { background: var(--maie-blau); color: var(--maie-white); }
.thema-pfeil { color: var(--maie-idle); }
.thema-linie { flex: 1; min-width: 24px; height: 1px; background: var(--maie-line); }
.denkweg-knopf { display: inline-flex; align-items: center; gap: var(--maie-s-2); margin-top: var(--maie-s-2); padding: 6px 12px; border: 0; border-radius: var(--maie-r-chip); background: var(--maie-ink); color: var(--maie-white); font: var(--maie-micro); font-size: 12px; cursor: pointer; }
.denkweg-knopf .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--maie-accent); }
.antwort-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--maie-s-2); margin-top: var(--maie-s-3); }
.antwort-karte { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: var(--maie-r-input); background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line); text-decoration: none; color: var(--maie-ink); text-align: left; cursor: pointer; font: var(--maie-small); transition: box-shadow var(--mai-t-state) ease; }
.antwort-karte:hover { box-shadow: inset 0 0 0 1.5px var(--maie-ink); }
.karte-kuerzel { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--maie-r-input); background: var(--maie-blau); color: var(--maie-white); font: var(--maie-micro); font-weight: 700; }
.karte-kuerzel.dunkel { background: var(--maie-ink); }
.karte-text { display: flex; flex-direction: column; min-width: 0; }
.karte-text strong { font-weight: 600; }
.karte-text span { font-size: 12px; color: var(--maie-grey); }
.rueckfrage { margin-top: var(--maie-s-3); display: grid; gap: var(--maie-s-2); }
.rueckfrage p { margin: 0; padding: 10px 12px; border-radius: var(--maie-r-input); background: var(--maie-white); font: var(--maie-small); }
.rueckfrage .knopf.gewaehlt { box-shadow: inset 0 0 0 2px var(--maie-ink); }
.uebergabe { margin-top: var(--maie-s-3); display: flex; align-items: center; gap: var(--maie-s-2); padding: 10px 12px; border-radius: var(--maie-r-input); background: color-mix(in srgb, var(--maie-ok) 18%, var(--maie-white)); font: var(--maie-small); }
.uebergabe .haken { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--maie-gruen); }
.uebergabe .haken svg { width: 12px; height: 12px; fill: none; stroke: var(--maie-white); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.shell.schublade-offen .assistent-raster, .shell.schublade-offen .heute-links { margin-right: calc(var(--maie-drawer-w) + var(--maie-s-5)); }
.shell.schublade-offen .seite.heute { grid-template-columns: minmax(0, 1fr); }
.shell.schublade-offen .seite.heute .wartet { margin-right: calc(var(--maie-drawer-w) + var(--maie-s-5)); }

/* Platzhalter-Ansichten */
.leer-karte[data-ansicht] { margin: 0; text-align: left; justify-self: start; max-width: 620px; }

/* ---------------------------------------------------------------- Posteingang */
.post-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.post-pill { height: 34px; padding: 0 14px; border: 0; border-radius: var(--maie-r-chip); background: var(--maie-white); font: var(--maie-small); color: var(--maie-ink); cursor: pointer; }
.post-pill strong { font-weight: 600; }
.post-pill.aktiv { background: var(--maie-ink); color: var(--maie-white); }
.post-pill.aus { color: var(--maie-grey); }
.post-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: var(--maie-s-5); align-items: start; }
.post-liste { display: grid; background: var(--maie-white); border-radius: var(--maie-r-panel); overflow: hidden; }
.post-zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: var(--maie-s-3); align-items: center; padding: 12px var(--maie-s-4) 12px 14px; border: 0; border-bottom: 1px solid var(--maie-line-soft); border-left: 4px solid transparent; background: var(--maie-white); text-align: left; cursor: pointer; font: var(--maie-small); color: var(--maie-ink); transition: background var(--mai-t-state) ease; }
.post-zeile:hover { background: var(--maie-mist); }
.post-zeile.gewaehlt { background: var(--maie-accent-soft); }
.post-zeile.stand-neu { border-left-color: var(--maie-accent); }
.post-zeile.stand-gelesen { border-left-color: var(--maie-ink); }
.kanal-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--maie-ink); color: var(--maie-white); }
.kanal-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kanal-icon.whatsapp { background: var(--maie-whatsapp); }
.kanal-icon.telefon { background: var(--maie-accent); }
.kanal-icon.sms { background: var(--maie-grey); }
.post-text { display: grid; gap: 2px; min-width: 0; }
.post-kopf { display: flex; gap: var(--maie-s-2); align-items: baseline; min-width: 0; }
.post-kopf strong { font-weight: 600; white-space: nowrap; }
.post-betreff { color: var(--maie-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-vorschau { font-size: 12px; color: var(--maie-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-zuordnung { display: grid; gap: 4px; justify-items: start; }
.zuordnung-tag { padding: 3px 10px; border-radius: var(--maie-r-chip); background: var(--maie-mist); font: var(--maie-micro); color: var(--maie-ink); border-left: 3px solid var(--tag-farbe, var(--maie-ink)); }
.zugeordnet { display: flex; align-items: center; gap: 6px; font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.zugeordnet .punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--maie-accent); }
.post-zeit { font-size: 11px; color: var(--maie-grey); }
.post-detail { position: sticky; top: var(--maie-s-5); display: grid; gap: var(--maie-s-4); align-content: start; min-height: 300px; }
.skel-block { height: 200px; border-radius: var(--maie-r-input); }
.detail-kopf { display: flex; align-items: center; gap: var(--maie-s-3); }
.detail-wer { display: grid; gap: 2px; min-width: 0; }
.detail-wer strong { font: var(--maie-ui); font-weight: 600; overflow-wrap: anywhere; }
.detail-wer span { font: var(--maie-small); font-size: 12px; color: var(--maie-grey); }
.detail-verlauf { display: grid; gap: var(--maie-s-3); }
.detail-nachricht { display: grid; gap: 6px; padding: var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); }
.detail-meta { font-size: 11px; color: var(--maie-grey); }
.detail-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--maie-small); max-height: 40vh; overflow-y: auto; }
.post-vorschlag { display: flex; align-items: center; gap: var(--maie-s-2); padding: 10px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-accent-soft); font: var(--maie-small); }
.post-vorschlag .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--maie-accent); }
.leer-karte .knopf { justify-self: center; }

/* ---------------------------------------------------------------- Belege */
.svg-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.typ-kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--maie-s-3); }
.typ-kachel { display: grid; gap: var(--maie-s-2); padding: var(--maie-s-4); border: 0; border-radius: var(--maie-r-card); background: var(--maie-white); text-align: left; cursor: pointer; color: var(--maie-ink); font: var(--maie-small); }
.typ-kachel.aktiv { background: var(--maie-ink); color: var(--maie-white); }
.typ-kopf { display: flex; justify-content: space-between; align-items: center; }
.typ-badge { min-width: 20px; padding: 1px 6px; border-radius: var(--maie-r-chip); background: var(--maie-accent); color: var(--maie-white); font: var(--maie-micro); text-align: center; }
.typ-zahl { display: flex; align-items: baseline; gap: 6px; }
.typ-zahl strong { font: var(--maie-kpi); font-size: 28px; }
.typ-sub { font-size: 12px; color: var(--maie-grey); }
.typ-kachel.aktiv .typ-sub { color: var(--maie-grey-soft); }
.belege-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: var(--maie-s-5); align-items: start; }
.belege-liste { display: grid; background: var(--maie-white); border-radius: var(--maie-r-panel); overflow: hidden; }
.beleg-zeile { display: grid; grid-template-columns: 32px 100px minmax(0, 1fr) 110px minmax(0, 1fr) 70px; gap: var(--maie-s-3); align-items: center; padding: 12px var(--maie-s-4); border: 0; border-bottom: 1px solid var(--maie-line-soft); border-left: 4px solid transparent; background: var(--maie-white); text-align: left; cursor: pointer; font: var(--maie-small); color: var(--maie-ink); }
.beleg-zeile.kopf { cursor: default; font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); padding-block: var(--maie-s-3); }
.beleg-zeile:not(.kopf):hover { background: var(--maie-mist); }
.beleg-zeile.gewaehlt { background: var(--maie-accent-soft); }
.beleg-zeile.stand-done { border-left-color: var(--maie-ink); }
.beleg-zeile.stand-work { border-left-color: var(--maie-work); }
.beleg-zeile.stand-action { border-left-color: var(--maie-accent); }
.beleg-icon { color: var(--maie-grey); }
.beleg-partner { font-size: 12px; color: var(--maie-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beleg-betrag { font-variant-numeric: tabular-nums; }
.beleg-stand { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.punkt.s-done { background: var(--maie-ink); } .punkt.s-work { background: var(--maie-work); } .punkt.s-action { background: var(--maie-accent); }
.punkt.s-ok { background: var(--maie-ok); } .punkt.s-warn { background: var(--maie-warn); } .punkt.s-idle { background: var(--maie-idle); } .punkt.aus { background: var(--maie-idle); }
.beleg-stand .punkt, .status-pill .punkt, .arch-knoten .punkt, .kal-termin .punkt { width: 8px; height: 8px; flex: none; border-radius: 50%; display: inline-block; }
.beleg-links { display: flex; gap: 4px; }
.link-chip { padding: 2px 6px; border-radius: var(--maie-r-chip); background: var(--maie-mist); font: var(--maie-micro); font-size: 9px; }
.beleg-detail { position: sticky; top: var(--maie-s-5); display: grid; gap: var(--maie-s-4); align-content: start; }
.beleg-nummer { font: var(--maie-card-title); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--maie-r-chip); background: var(--maie-mist); font: var(--maie-micro); white-space: nowrap; }
.status-pill.s-action { background: var(--maie-accent-soft); box-shadow: inset 0 0 0 1.5px var(--maie-accent); }
.status-pill.s-done { background: var(--maie-ink); color: var(--maie-white); }
.kette { display: flex; flex-wrap: wrap; gap: 4px; }
.ketten-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--maie-r-chip); background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line); font: var(--maie-micro); }
.ketten-chip.erledigt { background: var(--maie-ink); color: var(--maie-white); box-shadow: none; }
.ketten-chip.aktiv { background: var(--maie-accent); color: var(--maie-white); box-shadow: none; }
.ketten-chip .punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--maie-white); }
.pdf-vorschau { position: relative; aspect-ratio: 4 / 3; border-radius: var(--maie-r-input); background: var(--maie-mist); overflow: hidden; display: grid; place-items: center; }
.pdf-linien { width: 60%; height: 50%; border-radius: var(--maie-r-input); background: repeating-linear-gradient(var(--maie-white) 0 8px, var(--maie-mist) 8px 14px); }
.pdf-marke { position: absolute; left: 10px; bottom: 10px; padding: 2px 8px; border-radius: var(--maie-r-chip); background: var(--maie-ink); color: var(--maie-white); font: var(--maie-micro); font-size: 10px; }
.pdf-balken { position: absolute; right: 10px; bottom: 14px; width: 48px; height: 4px; border-radius: var(--maie-r-chip); background: var(--maie-accent); }
.felder, .wege { display: grid; gap: 6px; }
.feld-zeile { display: grid; grid-template-columns: 90px minmax(0, 1fr) 40px; gap: var(--maie-s-2); align-items: center; font: var(--maie-small); font-size: 12px; }
.feld-k { color: var(--maie-grey); }
.feld-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vertrauen { height: 4px; border-radius: var(--maie-r-chip); background: var(--maie-line-soft); overflow: hidden; }
.vertrauen i { display: block; height: 100%; }
.vertrauen .hoch { background: var(--maie-ink); } .vertrauen .mittel { background: var(--maie-gelb); } .vertrauen .niedrig { background: var(--maie-accent); }
.weg-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); font-size: 12px; }
.weg-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--maie-r-chip); background: var(--maie-ink); color: var(--maie-white); }
.weg-icon svg { width: 14px; height: 14px; }
.weg-icon.in { background: var(--maie-blau); } .weg-icon.out { background: var(--maie-accent); } .weg-icon.phone { background: var(--maie-gruen); }
.weg-text { display: grid; min-width: 0; }
.weg-text span { color: var(--maie-grey); }
.weg-pfeil { margin-left: auto; color: var(--maie-grey); }

/* ---------------------------------------------------------------- Projekte */
.projekte-raster { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: var(--maie-s-5); align-items: start; }
.projekte-liste { display: grid; background: var(--maie-white); border-radius: var(--maie-r-panel); overflow: hidden; }
.projekt-zeile { display: grid; gap: 4px; padding: 14px var(--maie-s-4); border: 0; border-bottom: 1px solid var(--maie-line-soft); border-left: 4px solid transparent; background: var(--maie-white); text-align: left; cursor: pointer; font: var(--maie-small); color: var(--maie-ink); }
.projekt-zeile span { font-size: 12px; color: var(--maie-grey); }
.projekt-zeile.gewaehlt { background: var(--maie-accent-soft); }
.projekt-zeile.stand-done { border-left-color: var(--maie-ink); } .projekt-zeile.stand-work { border-left-color: var(--maie-work); } .projekt-zeile.stand-action { border-left-color: var(--maie-accent); }
.projekt-balken { height: 3px; border-radius: var(--maie-r-chip); background: var(--maie-line-soft); overflow: hidden; margin-top: 4px; }
.projekt-balken i { display: block; height: 100%; background: var(--maie-ink); }
.akte-titel { font: var(--maie-card-title); }
.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--maie-s-2); }
.fakt { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); }
.fakt span { font-size: 11px; color: var(--maie-grey); }
.team-chips, .chip-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.team-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: var(--maie-r-chip); background: var(--maie-mist); font: var(--maie-small); font-size: 12px; }
.meilensteine, .ordner { display: grid; gap: var(--maie-s-2); }
.ms-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chip { display: grid; padding: 6px 12px; border-radius: var(--maie-r-chip); background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line); font: var(--maie-micro); }
.ms-chip span { font-weight: 400; color: var(--maie-grey); }
.ms-chip.done { background: var(--maie-ink); color: var(--maie-white); box-shadow: none; } .ms-chip.done span { color: var(--maie-grey-soft); }
.ms-chip.action { background: var(--maie-accent); color: var(--maie-white); box-shadow: none; } .ms-chip.action span { color: var(--maie-white); }
.ordner-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--maie-s-2); }
.ordner-karte { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--maie-r-input); background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line-soft); font: var(--maie-small); font-size: 12px; }
.ordner-kopf { display: flex; align-items: center; gap: 6px; }
.ordner-kopf span { margin-left: auto; color: var(--maie-grey); }
.ordner-datei { color: var(--maie-grey); }
.projekt-chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--maie-s-3); max-height: calc(100vh - 220px); }
.projekt-chat { overflow-y: auto; display: grid; gap: var(--maie-s-2); align-content: start; }
.chat-nachricht { padding: 10px 12px; border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); }
.chat-nachricht.jarvis { background: var(--maie-ink); color: var(--maie-white); }
.chat-nachricht p { margin: 4px 0 0; }
.chat-wer { font: var(--maie-micro); font-weight: 400; color: var(--maie-grey); }
.chat-nachricht.jarvis .chat-wer { color: var(--maie-grey-soft); }
.team-feld { display: flex; gap: 6px; }
.team-feld input { flex: 1; min-width: 0; height: var(--maie-btn-sm); padding: 0 14px; border: 1px solid var(--maie-idle); border-radius: var(--maie-r-chip); font: var(--maie-small); }

/* ---------------------------------------------------------------- Kalender */
.kalender-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--maie-s-5); align-items: start; }
.kal-raster { display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); background: var(--maie-white); border-radius: var(--maie-r-panel); overflow: hidden; }
.kal-ecke, .kal-tag { padding: 10px 6px; border-bottom: 1px solid var(--maie-line-soft); font: var(--maie-small); text-align: center; }
.kal-tag.heute { font-weight: 600; } .kal-tag.heute::after { content: ""; display: block; width: 24px; height: 3px; margin: 4px auto 0; border-radius: var(--maie-r-chip); background: var(--maie-ink); }
.kal-stunde { padding: 4px 6px; height: 60px; border-right: 1px solid var(--maie-line-soft); border-bottom: 1px solid var(--maie-line-soft); font-size: 11px; color: var(--maie-grey); }
.kal-zelle { position: relative; height: 60px; border-right: 1px solid var(--maie-line-soft); border-bottom: 1px solid var(--maie-line-soft); }
.kal-termin { position: absolute; left: 3px; right: 3px; z-index: 1; display: grid; gap: 1px; padding: 4px 8px; border-radius: var(--maie-r-input); background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line); font: var(--maie-micro); overflow: hidden; }
.kal-termin span { font-weight: 400; color: var(--maie-grey); }
.kal-termin.agentbooked { background: var(--maie-ink); color: var(--maie-white); box-shadow: none; } .kal-termin.agentbooked span { color: var(--maie-grey-soft); } .kal-termin.agentbooked .punkt { background: var(--maie-accent); position: absolute; left: -2px; top: 6px; }
.kal-termin.task { background: var(--maie-accent-soft); box-shadow: inset 0 0 0 1.5px var(--maie-accent); }
.kal-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--maie-accent); z-index: 2; }
.kal-jetzt .punkt { position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--maie-accent); }
.vorschlag-karte { display: grid; gap: 4px; padding: 12px; border-radius: var(--maie-r-input); background: var(--maie-ink-2); font: var(--maie-small); }
.vorschlag-karte p { margin: 0; font-size: 12px; color: var(--maie-grey-soft); }
.vorschlag-wann { font-size: 11px; color: var(--maie-grey-soft); }
.dunkel-tertiaer { background: var(--maie-ink-2); color: var(--maie-white); }
.zahl-zeile { display: flex; justify-content: space-between; font: var(--maie-small); }
.kal-nav { display: flex; gap: 6px; align-items: center; }

/* ---------------------------------------------------------------- Finanzen */
.fin-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--maie-s-5); align-items: start; }
.fin-balken { width: 100%; height: auto; display: block; }
.fin-balken .umsatz { fill: var(--maie-ink); } .fin-balken .ausgaben { fill: var(--maie-idle); }
.fin-balken .wert { font-size: 10px; fill: var(--maie-ink); } .fin-balken .monat { font-size: 11px; fill: var(--maie-grey); }
.offen-zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--maie-s-2); padding: 10px 12px; border-radius: var(--maie-r-input); background: var(--maie-mist); border-left: 4px solid var(--maie-ink); font: var(--maie-small); }
.offen-zeile.gelb { border-left-color: var(--maie-gelb); } .offen-zeile.rot { border-left-color: var(--maie-accent); }
.offen-text { display: grid; } .offen-text span { font-size: 12px; color: var(--maie-grey); }
.offen-betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-hinweis { display: flex; align-items: center; gap: var(--maie-s-2); padding: 12px 14px; border-radius: var(--maie-r-input); font: var(--maie-small); font-size: 12px; }
.fin-hinweis .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--maie-accent); flex: none; }

/* ---------------------------------------------------------------- Architektur */
.arch-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--maie-s-5); align-items: start; }
.arch-flaeche { position: relative; border-radius: var(--maie-r-panel); background: var(--maie-white); overflow: hidden; min-height: 590px; }
.arch-ebene { position: absolute; left: 0; width: 130px; height: 118px; display: flex; align-items: center; padding-left: var(--maie-s-4); border-right: 1px solid var(--maie-line-soft); font: var(--maie-small); font-size: 12px; color: var(--maie-grey); }
.arch-kanten { position: absolute; inset: 0; }
.arch-kanten .kante { fill: none; stroke: var(--maie-idle); stroke-width: 1.5; }
.arch-kanten .kante.hot { stroke: var(--maie-accent); stroke-width: 2.5; }
.arch-kanten .kante.fluss { stroke: var(--maie-white); stroke-width: 2; }
.arch-knoten { position: absolute; width: 190px; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 0; border-radius: var(--maie-r-input); background: var(--maie-white); box-shadow: var(--maie-shadow-card); text-align: left; cursor: pointer; font: var(--maie-small); color: var(--maie-ink); }
.arch-knoten.gewaehlt { box-shadow: inset 0 0 0 2px var(--maie-accent), var(--maie-shadow-float); }
.arch-text { display: grid; min-width: 0; } .arch-text strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arch-text span { font-size: 11px; color: var(--maie-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arch-detail { display: grid; gap: var(--maie-s-3); border-radius: var(--maie-r-panel); padding: var(--maie-s-5); }
.arch-detail p { margin: 0; font: var(--maie-small); }
.arch-hinweis { padding: 8px 10px; border-radius: var(--maie-r-input); background: var(--maie-ink-2); font-size: 12px; overflow-wrap: anywhere; }
.arch-fluss { display: grid; gap: var(--maie-s-2); }
.schild-hinweis { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); font-size: 12px; color: var(--maie-grey); }

/* ---------------------------------------------------------------- Mittel: rechte Spalte unter das Gespräch */
@media (max-width: 1180px) {
  .seite.heute { grid-template-columns: minmax(0, 1fr); }
  .bereich-raster { grid-template-columns: minmax(0, 1fr); }
  .anb-raster { grid-template-columns: minmax(0, 1fr); }
  .assistent-raster { grid-template-columns: minmax(0, 1fr); }
  .post-raster, .belege-raster, .projekte-raster, .kalender-raster, .fin-raster, .arch-raster { grid-template-columns: minmax(0, 1fr); }
  .typ-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beleg-detail { position: static; }
  .post-detail { position: static; }
  .kacheln.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anb-detail { position: static; max-height: none; }
  .schublade { width: min(var(--maie-drawer-w), calc(100% - 40px)); }
}
/* Phone: Navigation oben als Leiste, Spalten gestapelt, Jarvis-Leiste volle Breite minus 32 px */
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .navigation { position: static; height: auto; flex-direction: row; align-items: center; gap: var(--maie-s-2); padding: var(--maie-s-3) var(--maie-s-4); overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--maie-line-soft); }
  .kennung { padding: 0; }
  .kennung #name, .nav-titel, .nav-unten, .bereiche { display: none; }
  .nav-gruppe { display: flex; gap: var(--maie-s-1); }
  .nav-eintrag { width: auto; white-space: nowrap; }
  .inhalt { padding: var(--maie-s-5) var(--maie-s-4) 120px; }
  .seiten-kopf h1 { font-size: 26px; }
  .jarvis-leiste { left: 50%; width: calc(100% - 32px); bottom: var(--maie-s-4); }
  .leisten-hinweis { display: none; }
  .schublade { left: var(--maie-s-2); right: var(--maie-s-2); top: var(--maie-s-2); width: auto; bottom: 84px; }
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .kpi-karte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-fluss { flex-direction: column; }
  .tool-fluss > .mai-flow-line { flex: 0 0 24px; width: 2px; height: auto; min-height: 24px; }
  .tool-fluss > .mai-flow-line .mai-flow-dot { left: -4px; top: 0; animation-name: mai-drop; }
  .verteil-zeile { grid-template-columns: 1fr auto; }
  .verteil-zeile .verteil-wer { grid-column: 1; }
  .ablauf-reihe { flex-wrap: wrap; row-gap: var(--maie-s-2); }
}


/* ---------------------------------------------------------------- Dialog (Formulare außerhalb der Shell) */
.dialog { border: 0; padding: 0; border-radius: var(--maie-r-panel); box-shadow: var(--maie-shadow-float); width: min(520px, calc(100vw - 32px)); background: var(--maie-white); color: var(--maie-ink); }
.dialog::backdrop { background: color-mix(in srgb, var(--maie-ink) 40%, transparent); }
.dialog-form { display: grid; gap: var(--maie-s-4); padding: var(--maie-s-6); }
.dialog-form h2 { margin: 0; font: var(--maie-heading); letter-spacing: -.025em; }
.dialog-form p { margin: 0; }
.dialog-felder { display: grid; gap: var(--maie-s-4); }
.dialog-felder select, .dialog-felder textarea, .stufe-wahl, .persona-felder select, .vorlage-aktiv select, .farbe-zeile select, .tabelle select { min-height: var(--maie-btn-sm); padding: 0 10px; border: 1px solid var(--maie-idle); border-radius: var(--maie-r-input); background: var(--maie-white); font: var(--maie-small); color: var(--maie-ink); }
.dialog-felder textarea { padding: 10px 14px; font: var(--maie-body); font-size: 15px; resize: vertical; }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: var(--maie-s-2); }
.anmeldekarte .leise { font-weight: 400; color: var(--maie-grey); }
.hinweis-fehler.gut { color: var(--maie-ink); }
.hinweis-fehler.gut::before { background: var(--maie-ok); }

/* ---------------------------------------------------------------- Mehrfenster (?window=detached) */
.abgedockt .navigation { display: none; }
.abgedockt .shell { grid-template-columns: minmax(0, 1fr); }
.abgedockt .jarvis-leiste { left: 0; }

/* ---------------------------------------------------------------- Vorlagen & Bausteine */
.vorlagen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--maie-s-5); align-items: start; }
.vorlagen-liste, .bausteine-liste { display: grid; gap: var(--maie-s-3); }
.vorlage-karte, .baustein-karte { display: grid; gap: var(--maie-s-2); padding: var(--maie-s-4); border-radius: var(--maie-r-card); background: var(--maie-mist); border-left: 4px solid var(--maie-idle); font: var(--maie-small); }
.vorlage-karte strong, .baustein-karte strong { font: var(--maie-ui); font-weight: 600; }
.baustein-karte.status-active { border-left-color: var(--maie-ok); background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line); }
.baustein-karte.status-draft { border-left-color: var(--maie-warn); }
.vorlage-schritte { margin: 0; padding-left: var(--maie-s-5); display: grid; gap: 4px; color: var(--maie-grey); font-size: 12px; }
.vorlage-schritte li { display: flex; justify-content: space-between; gap: var(--maie-s-2); }
.stufe-tag { flex: none; padding: 1px 8px; border-radius: var(--maie-r-chip); background: var(--maie-white); font: var(--maie-micro); color: var(--maie-grey); }
.stufe-tag.ask { background: var(--maie-accent-soft); color: var(--maie-ink); }
.stufe-tag.self { background: var(--maie-ink); color: var(--maie-white); }
.vorlage-aktiv { display: flex; gap: var(--maie-s-2); align-items: center; }
.vorlage-aktiv select { flex: 1; }
.baustein-gruppe { display: grid; gap: var(--maie-s-2); }
.baustein-gruppe .nav-titel { padding: var(--maie-s-2) 0 0; }
@media (max-width: 980px) { .vorlagen-raster { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Admin */
.admin-reiter { display: grid; gap: var(--maie-s-5); }
.rechte-tabelle td { white-space: nowrap; }
.rechte-key { font-size: 11px; color: var(--maie-grey); font-weight: 400; }
.stufe-wahl[data-stufe="self"] { background: var(--maie-ink); color: var(--maie-white); border-color: var(--maie-ink); }
.stufe-wahl[data-stufe="ask"] { background: var(--maie-accent-soft); border-color: var(--maie-accent-soft); }
.persona-felder { display: grid; gap: var(--maie-s-4); }
.regel-liste, .schritt-liste, .frage-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--maie-s-2); }
.regel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--maie-s-1) var(--maie-s-3); align-items: center; padding: 10px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); }
.regel .panel-klein { grid-column: 1; }
.regel .knopf-reihe { grid-column: 2; grid-row: 1 / span 2; }
.regel.aus .regel-text { color: var(--maie-grey); text-decoration: line-through; }
.quellen-liste { display: grid; gap: var(--maie-s-2); }
.quelle-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--maie-s-3); padding: 8px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); }
.quelle-zeile .schalter { min-width: 11em; }
.quelle-zeile .knopf { margin-left: auto; }
.kal-termin[role="button"] { cursor: pointer; }
.kal-termin[role="button"]:focus-visible { outline: 2px solid var(--maie-accent); outline-offset: 1px; }
.farben-liste { display: grid; gap: var(--maie-s-2); }
.farbe-zeile { display: grid; grid-template-columns: 16px minmax(0, 1fr) 160px; gap: var(--maie-s-3); align-items: center; padding: 10px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); }
.farbe-marke { width: 14px; height: 14px; border-radius: 50%; background: var(--maie-idle); }
.farbe-marke.farbe-blau { background: var(--maie-blau); } .farbe-marke.farbe-gelb { background: var(--maie-gelb); } .farbe-marke.farbe-gruen { background: var(--maie-gruen); }
.farbe-marke.farbe-lila { background: var(--maie-lila); } .farbe-marke.farbe-orange { background: var(--maie-orange); } .farbe-marke.farbe-tuerkis { background: var(--maie-tuerkis); }
.schritt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--maie-s-3); align-items: start; padding: 10px var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-mist); font: var(--maie-small); }
.schritt input { margin-top: 3px; accent-color: var(--maie-accent); }
.schritt.erledigt { background: var(--maie-white); box-shadow: inset 0 0 0 1px var(--maie-line); }
.schritt.erledigt strong { color: var(--maie-grey); }
.schritt-text { display: grid; gap: 2px; }
.abnahme-stand { margin: 0; font: var(--maie-ui); font-weight: 600; }
.abnahme-stand.gut::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--maie-ok); margin-right: 8px; }
.frage { display: grid; gap: var(--maie-s-2); padding: var(--maie-s-3) var(--maie-s-4); border-radius: var(--maie-r-card); background: var(--maie-mist); border-left: 4px solid var(--maie-idle); font: var(--maie-small); }
.frage.richtig { border-left-color: var(--maie-ok); }
.frage.falsch { border-left-color: var(--maie-warn); }
.frage-antwort { padding: var(--maie-s-3); border-radius: var(--maie-r-input); background: var(--maie-white); }

.ampel { font-size: 14px; color: var(--maie-idle); }
.ampel.gruen { color: var(--maie-ok); }
.ampel.gelb { color: var(--maie-warn); }
.tabelle tr.ausfall td { color: var(--maie-ink); background: var(--maie-accent-soft); }

/* ---------------------------------------------------------------- Organigramm als bearbeitbare Karten */
#h-gruss #gruss { background: linear-gradient(100deg, var(--maie-ink), var(--maie-grey) 70%, var(--maie-grey-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 400; }
#h-gruss { font: var(--maie-display-l); font-weight: 300; letter-spacing: -.035em; }
.bearbeitbar { border: 0; background: none; padding: 2px 6px; margin: -2px -6px; border-radius: var(--maie-r-input); font: inherit; color: inherit; text-align: left; cursor: text; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bearbeitbar:hover { background: color-mix(in srgb, var(--maie-ink) 6%, transparent); }
.bearbeitbar.gross { font: var(--maie-card-title); font-weight: 300; letter-spacing: -.02em; }
.bearbeitbar.titel { font: var(--maie-ui); font-size: 16px; font-weight: 600; flex: 1; }
.bearbeitbar-feld { font: inherit; height: 36px; padding: 0 10px; border: 1px solid var(--maie-idle); border-radius: var(--maie-r-input); background: var(--maie-white); min-width: 0; width: 100%; }
.bearbeitbar-feld.gross { height: 44px; font: var(--maie-card-title); font-weight: 300; }
.bearbeitbar-feld:focus { outline: 2px solid var(--maie-accent); outline-offset: 0; }
.org-oben { margin-bottom: var(--maie-s-5); }
.org-spitze { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--maie-s-6); align-items: center; padding: var(--maie-s-6) var(--maie-s-8); border-radius: var(--maie-r-panel); background: var(--maie-ink); color: var(--maie-white); box-shadow: var(--maie-shadow-card); }
.org-spitze .bearbeitbar:hover { background: color-mix(in srgb, var(--maie-white) 12%, transparent); }
.org-spitze .bearbeitbar-feld { color: var(--maie-ink); }
.org-spitze-firma, .org-spitze-leitung { display: grid; gap: var(--maie-s-1); min-width: 0; }
.org-etikett { font: var(--maie-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--maie-grey-soft); }
.org-spitze-zahlen { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: var(--maie-s-6); text-align: right; }
.org-spitze-zahlen strong { font: var(--maie-kpi); font-variant-numeric: tabular-nums; }
.org-spitze-zahlen span { font: var(--maie-small); font-size: 12px; color: var(--maie-grey-soft); }
.org-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--maie-s-5); align-items: start; }
.org-karte { display: grid; gap: var(--maie-s-3); padding: var(--maie-s-5); border-radius: var(--maie-r-card); background: color-mix(in srgb, var(--maie-white) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--maie-shadow-card); border-top: 3px solid var(--maie-line); transition: box-shadow var(--mai-t-state) ease; }
.org-karte:hover { box-shadow: var(--maie-shadow-float); }
.org-karte.aktiv { border-top-color: var(--maie-accent); }
.org-karte.farbe-blau { border-top-color: var(--maie-blau); }
.org-karte.farbe-gelb { border-top-color: var(--maie-gelb); }
.org-karte.farbe-gruen { border-top-color: var(--maie-gruen); }
.org-karte.farbe-lila { border-top-color: var(--maie-lila); }
.org-karte.farbe-orange { border-top-color: var(--maie-orange); }
.org-karte.farbe-tuerkis { border-top-color: var(--maie-tuerkis); }
.org-karte-kopf { display: flex; align-items: center; gap: var(--maie-s-2); min-width: 0; }
.org-karte-kopf .punkt { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--maie-idle); }
.org-karte-kopf .punkt.aktiv { background: var(--maie-accent); }
.org-karte-zahl { margin: 0; font: var(--maie-small); color: var(--maie-grey); }
.org-abschnitt { margin: var(--maie-s-2) 0 0; font: var(--maie-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--maie-grey); }
.org-chips { display: flex; flex-wrap: wrap; gap: var(--maie-s-2); }
.org-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 6px 0 12px; border-radius: var(--maie-r-chip); background: var(--maie-mist); font: var(--maie-small); border: 0; color: var(--maie-ink); }
.org-chip.neu { padding: 0 12px; cursor: pointer; color: var(--maie-grey); box-shadow: inset 0 0 0 1px var(--maie-line); background: transparent; }
.org-chip.neu:hover { color: var(--maie-ink); box-shadow: inset 0 0 0 1.5px var(--maie-ink); }
.org-chip-weg { width: 24px; height: 24px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--maie-grey); cursor: pointer; font-size: 16px; line-height: 1; }
.org-chip-weg:hover { background: color-mix(in srgb, var(--maie-ink) 8%, transparent); color: var(--maie-ink); }
.org-leute { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.org-person { display: flex; align-items: center; gap: var(--maie-s-3); padding: 6px; border-radius: var(--maie-r-input); }
.org-person:hover { background: var(--maie-mist); }
.org-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--maie-mist); font: 600 12px/1 var(--maie-font-text); color: var(--maie-ink); }
.org-person.art-agent .org-avatar { background: var(--maie-ink); color: var(--maie-white); }
.org-person.art-workflow .org-avatar { background: var(--maie-accent-soft); color: var(--maie-accent); }
.org-person-text { display: grid; min-width: 0; flex: 1; }
.org-person-text .bearbeitbar { font: var(--maie-ui); font-weight: 500; }
.org-person-text small { font: var(--maie-small); font-size: 12px; color: var(--maie-grey); }
.org-neu-zeile, .org-leise { border: 0; background: none; padding: 6px; text-align: left; font: var(--maie-small); color: var(--maie-grey); cursor: pointer; border-radius: var(--maie-r-input); }
.org-neu-zeile:hover, .org-leise:hover { color: var(--maie-ink); background: var(--maie-mist); }
.org-leise { justify-self: start; font-size: 12px; }
.org-karte.neu { place-items: center; text-align: center; min-height: 220px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--maie-line); border-top: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.org-neu-gross { border: 0; background: none; font: var(--maie-card-title); font-weight: 300; color: var(--maie-ink); cursor: pointer; }
.org-inline { display: flex; flex-wrap: wrap; gap: var(--maie-s-2); align-items: center; width: 100%; }
.org-inline-feld { flex: 1 1 140px; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--maie-idle); border-radius: var(--maie-r-input); background: var(--maie-white); font: var(--maie-small); }
.org-inline-feld:focus { outline: 2px solid var(--maie-accent); outline-offset: 0; }
@media (max-width: 900px) {
  .org-spitze { grid-template-columns: 1fr; text-align: left; }
  .org-spitze-zahlen { text-align: left; }
}