:root{
  /* Stiftungsfarben (aus dem IKiM-Logo) */
  --blue:#003E77;        /* Stiftungsblau – Hauptfarbe */
  --blue-deep:#002C55;
  --blue-tint:#E4EDF6;
  --yellow:#FFD405;
  --yellow-ink:#8F7400;
  --yellow-tint:#FFF7D1;
  --green:#4DAF45;
  --green-ink:#2F7A29;
  --green-tint:#E7F5E5;
  --lightblue:#70CAF3;
  --purple:#A862A4;
  --red:#B2452F;
  --red-tint:#F9E9E5;
  --gray-ink:#5A6B70;
  --gray-tint:#ECEFF0;

  --bg:#F4F7FA;
  --surface:#FFFFFF;
  --ink:#17262B;
  --ink-soft:#5A6B70;
  --line:#DFE6EC;
  --radius:14px;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;flex-direction:column;
}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:15.5px;color:var(--ink)}

/* ---------- Kopfbereich ---------- */
header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
/* CI-Streifen in den vier Rautenfarben des Logos */
header::before{
  content:"";display:block;height:4px;
  background:linear-gradient(90deg,
    var(--yellow) 0 25%, var(--green) 25% 50%,
    var(--lightblue) 50% 75%, var(--purple) 75% 100%);
}
.header-inner{
  max-width:1060px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:18px;min-width:0}
.header-right{display:flex;align-items:center;gap:9px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
/* Das Logo traegt die Institutsbezeichnung als Feinschrift. Unter ~70px
   (46% der Originalhoehe von 151px) ist sie nicht mehr lesbar. */
.brand img{height:70px;width:auto;display:block}
.brand .title-block{display:flex;flex-direction:column}
.brand h1{
  font-family:var(--font-display);
  font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--blue);
}
.brand .sub{font-size:12.5px;color:var(--ink-soft)}
.mode-switch{
  display:none;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:3px;
}
body.logged-in .mode-switch{display:flex}
.mode-switch button{
  border:none;background:transparent;border-radius:999px;
  padding:7px 16px;font-size:14.5px;font-weight:600;color:var(--ink-soft);
  transition:background .15s,color .15s;
}
.mode-switch button.active{background:var(--blue);color:#fff}
body.role-board .mode-switch{display:none}
/* Knoepfe in der Kopfzeile: eigener Bereich und Posteingang.
   Beide tragen einen Zaehler, der nur erscheint, wenn es etwas zu tun gibt. */
.role-label,.kopf-chip{
  align-self:center;display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:13px;font-weight:600;
  background:var(--blue-tint);border:1px solid transparent;border-radius:999px;
  padding:5px 12px;color:var(--blue);cursor:pointer;
  transition:background .12s,border-color .12s;
}
.role-label:hover:not(:disabled),.kopf-chip:hover{background:#D6E4F2;border-color:var(--blue)}
.role-label:focus-visible,.kopf-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.role-label:disabled{cursor:default}
.kopf-chip{background:#F1E4F0;color:#6E3F6B}
.chip-symbol{font-size:15px;line-height:1}
.chip-text{display:none}
/* Lange Namen kuerzen statt die Kopfzeile umbrechen zu lassen. Der Zaehler
   bleibt dabei immer sichtbar -- er ist die eigentliche Information. */
.chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.chip-zahl{flex:none}
/* Der Knopf traegt nur das Symbol: Bei 1060px Inhaltsbreite bleibt neben Logo,
   Name, Umschalter und Menue kein Platz fuer das Wort, ohne dass die Kopfzeile
   umbricht. Ausgeschrieben steht der Posteingang im Menue. */
.kopf-chip:hover{background:#E6D2E4;border-color:var(--purple)}
.chip-zahl{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;
  height:20px;padding:0 6px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--blue);color:#fff;
}
.kopf-chip .chip-zahl{background:var(--purple)}
/* Fensterkopf mit Schliessen-Kreuz */
.fenster-kopf{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fenster-kopf h3{margin:0;flex:1}
.fenster-zu{
  background:none;border:none;font-size:20px;line-height:1;color:var(--ink-soft);
  cursor:pointer;padding:2px 8px;border-radius:8px;
}
.fenster-zu:hover{background:var(--gray-tint);color:var(--ink)}
.modal.wide{max-width:580px}
/* Posteingang und "Fuer mich" auf dieselbe Breite wie der Seiteninhalt --
   die Auswertungen sind sonst zu schmal und laufen endlos nach unten. */
.modal.breit{max-width:1060px;width:min(96vw,1060px)}
/* Einstellungen: breit genug fuer die Benutzertabelle (braucht ~750px neben der
   190px-Seitenleiste) und mit fester Hoehe -- sonst springt der mittig
   zentrierte Dialog beim Wechseln der Bereiche zwischen ~300 und ~720 px.
   Gescrollt wird innen, Kopf und Schaltflaechen bleiben stehen. */
.modal.xl{
  max-width:1120px;width:min(96vw,1120px);
  height:min(88vh,760px);
  display:flex;flex-direction:column;overflow:hidden;
}
.modal.xl > h3{flex:none}
.modal.xl .mnav-layout{flex:1;min-height:0;align-items:stretch;margin-bottom:0}
.modal.xl .mnav{overflow-y:auto}
.modal.xl .mnav-body{overflow-y:auto;overflow-x:auto;padding-right:6px}
.modal.xl .error{flex:none}
.modal.xl .modal-actions{
  flex:none;padding-top:14px;margin-top:4px;border-top:1px solid var(--line);
}
/* Jeder Abschnitt als eigene Karte: In den langen Bereichen (KI, Vorstand)
   liefen die Themen sonst ineinander und man sah nicht, wo eines endet.
   Die Ueberschrift sitzt im Rahmen, abgesetzt durch eine Trennlinie. */
.admin-section{
  border:1px solid var(--line);border-radius:12px;
  padding:0 0 15px;margin-bottom:18px;background:var(--surface);
  overflow:hidden;
}
.admin-section:last-child{margin-bottom:4px}
.admin-section h4{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;padding:11px 18px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
/* Inhalt einruecken -- die Ueberschriftzeile spannt bewusst ueber die volle Breite */
.admin-section > *:not(h4){margin-left:18px;margin-right:18px}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:14px 0 18px;flex-wrap:wrap}
.tab{
  background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;
  padding:9px 14px;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;
}
.tab:hover{color:var(--blue)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.thema-row{display:grid;grid-template-columns:1fr 110px 150px auto;gap:9px;align-items:center;
  padding:5px 0;border-top:1px solid var(--line)}
.thema-row:first-child{border-top:none}
.thema-row .t-name{font-size:14.5px;font-weight:600;color:var(--blue)}
.thema-row .t-anz{font-size:13px;color:var(--ink-soft)}
.thema-row select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:14px;width:100%}
.thema-row .t-mix{color:#8A6D1F;font-weight:600}
.mt-user{border-top:1px solid var(--line);padding:9px 0;margin-top:6px}
.mt-user-name{font-size:14px;font-weight:700;color:var(--blue);margin-bottom:5px}
.mt-chips{display:flex;flex-wrap:wrap;gap:6px}
.mt-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer;background:#fff}
.mt-chip input{margin:0}
.mt-chip.an{border-color:var(--blue);background:var(--blue-tint);color:var(--blue);font-weight:600}
.adm-check{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;margin-bottom:8px;cursor:pointer}
.adm-check input{margin-top:3px;flex:none}
.adm-note{font-size:13px;color:var(--ink-soft);line-height:1.5}
.adm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#mailFields.off{opacity:.45;pointer-events:none}
.admin-section .field{margin-bottom:8px}
.admin-section .field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.admin-section .field input, .admin-section .field select{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:14.5px}
.xlsx-lists{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.xl-list{font-size:12.5px;border-radius:999px;padding:3px 10px;white-space:nowrap;font-weight:600}
.xl-arbeit{background:var(--blue-tint);color:var(--blue);border:1px solid var(--blue)}
.xl-erledigt{background:#E8F4E6;color:#2F6B29;border:1px solid var(--green)}
.xl-ablage{background:#F1F0EE;color:var(--ink-soft);border:1px solid var(--line)}
/* Die Tabelle braucht ~750px. Neben der Seitenleiste des Dialogs bleibt davon
   erst ab gut 1080px Fensterbreite genug uebrig -- darunter je Benutzer eine
   Karte statt einer Zeile. */
@media (max-width:1160px){
}
.admin-row{
  display:flex;gap:8px;align-items:center;padding:5px 0;flex-wrap:wrap;
}
.admin-row input{
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fff;
}
.admin-row input.a-name{flex:1;min-width:130px}
.admin-row input.a-pw{width:160px}
.welcome-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 28px;text-align:center;max-width:520px;margin:30px auto;
}
.welcome-card h2{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--blue);margin-bottom:8px}
.welcome-card p{font-size:15.5px;color:var(--ink-soft);margin-bottom:18px}
.mode-switch button:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}
body:not(.logged-in) .role-label{display:none}

/* ---------- Burger-Menü im Kopfbereich ---------- */
.menu-wrap{position:relative}
.burger{
  display:none;background:var(--surface);border:1px solid var(--line);border-radius:9px;
  width:42px;height:38px;align-items:center;justify-content:center;
  font-size:20px;color:var(--ink);cursor:pointer;transition:border-color .12s,color .12s,background .12s;
}
body.logged-in .burger{display:inline-flex}
.burger:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)}
.burger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:200px;z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 38px rgba(0,44,85,.20);padding:6px;display:none;
}
.menu.open{display:block}
.menu-item{
  display:block;width:100%;text-align:left;background:none;border:none;border-radius:8px;
  padding:9px 12px;font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;
}
.menu-item:hover{background:var(--blue-tint);color:var(--blue)}
.menu-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.menu-item.danger{color:var(--red)}
.menu-item.danger:hover{background:var(--red-tint);color:var(--red)}
.menu-sep{height:1px;background:var(--line);margin:5px 4px}

/* ---------- Aktionsleiste unter der Projektliste ---------- */
.aktionsleiste{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mehr-wrap{position:relative}
.mehr-chev{font-size:11px;opacity:.7}
.mehr-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:290px;z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 38px rgba(0,44,85,.20);padding:6px;display:none;
}
.mehr-menu.open{display:block}
/* Der Knopf steht am Seitenende. Nach unten geoeffnet liegt das Menue dann
   unterhalb des Sichtfensters -- es klappt deshalb nach oben, wenn unten
   kein Platz ist (gesetzt in toggleMehr). */
.mehr-menu.nach-oben{top:auto;bottom:calc(100% + 6px)}
.mehr-menu button{
  display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;
  background:none;border:none;border-radius:8px;padding:9px 12px;font:inherit;cursor:pointer;
}
.mehr-menu button strong{font-size:14.5px;font-weight:600;color:var(--ink)}
.mehr-menu button span{font-size:12.5px;color:var(--ink-soft)}
.mehr-menu button:hover{background:var(--blue-tint)}
.mehr-menu button:hover strong{color:var(--blue)}
.mehr-menu button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
@media (max-width:680px){
  .mehr-menu{left:auto;right:0;min-width:min(290px,86vw)}
}
.btn{
  border:1px solid var(--line);background:var(--surface);
  border-radius:9px;padding:7px 13px;font-size:14.5px;font-weight:600;
  color:var(--ink);transition:border-color .15s,background .15s;
}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-deep)}
.btn.primary:disabled{opacity:.55;cursor:wait}
.btn.danger{color:var(--red)}
.btn.danger:hover{border-color:var(--red)}
.btn.small{padding:4px 10px;font-size:13px}

/* ---------- Übersichtsleiste ---------- */
main{max-width:1060px;margin:0 auto;padding:26px 24px 60px;width:100%;flex:1;overflow-x:clip}
.summary{
  display:flex;flex-wrap:wrap;
  gap:12px;margin-bottom:26px;
}
/* Kennzahlen-Zeile: nur auf dem Handy sichtbar */
.kennzahl-zeile{
  display:none;width:100%;align-items:center;gap:6px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 14px;font:inherit;font-size:14.5px;color:var(--ink);cursor:pointer;text-align:left;
}
.kz-chev{color:var(--blue);font-size:11px}
.kennzahl-zeile strong{font-family:var(--font-display);font-size:17px;color:var(--blue)}
.kz{
  display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;
  border-radius:999px;padding:2px 7px;background:var(--bg);
}
.kz::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.kz-plan{color:var(--green-ink)}   .kz-plan::before{background:var(--green)}
.kz-watch{color:var(--yellow-ink)} .kz-watch::before{background:var(--yellow)}
.kz-crit{color:var(--red)}         .kz-crit::before{background:var(--red)}
.kz-stop{color:var(--gray-ink)}    .kz-stop::before{background:var(--gray-ink)}
.kz-await{color:var(--purple)}     .kz-await::before{background:var(--purple)}
.kz-filter{
  margin-left:auto;font-size:11.5px;font-weight:700;color:var(--blue);
  background:var(--blue-tint);border-radius:999px;padding:2px 9px;
}
.summary .tile{
  flex:1 1 140px;min-width:0;text-align:left;display:block;font:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;transition:border-color .12s,background .12s,box-shadow .12s,transform .06s;
}
.summary .tile:hover{border-color:var(--blue);background:var(--blue-tint)}
.summary .tile:active{transform:translateY(1px)}
.summary .tile.active{border-color:var(--blue);background:var(--blue-tint);box-shadow:inset 0 0 0 1px var(--blue)}
.summary .tile:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.summary .tile .num{
  font-family:var(--font-display);font-size:33px;font-weight:700;line-height:1.1;
  color:var(--blue);
}
.summary .tile .lbl{font-size:14px;color:var(--ink-soft);font-weight:500}
.summary .tile.t-plan .num{color:var(--green-ink)}
.summary .tile.t-watch .num{color:var(--yellow-ink)}
.summary .tile.t-crit .num{color:var(--red)}
.summary .tile.t-stop .num{color:var(--gray-ink)}
.summary .tile.t-await{border-color:var(--purple)}
.summary .tile.t-await .num{color:var(--purple)}
/* Hover/aktiv in der jeweiligen Statusfarbe */
.summary .tile.t-plan:hover,.summary .tile.t-plan.active{border-color:var(--green-ink);background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--green-ink)}
.summary .tile.t-watch:hover,.summary .tile.t-watch.active{border-color:var(--yellow-ink);background:var(--yellow-tint);box-shadow:inset 0 0 0 1px var(--yellow-ink)}
.summary .tile.t-crit:hover,.summary .tile.t-crit.active{border-color:var(--red);background:var(--red-tint);box-shadow:inset 0 0 0 1px var(--red)}
.summary .tile.t-stop:hover,.summary .tile.t-stop.active{border-color:var(--gray-ink);background:var(--gray-tint);box-shadow:inset 0 0 0 1px var(--gray-ink)}
.summary .tile.t-await:hover,.summary .tile.t-await.active{border-color:var(--purple);background:#F7EEF6;box-shadow:inset 0 0 0 1px var(--purple)}
@media (max-width:680px){
  .kennzahl-zeile{display:flex}
  .summary > .tile{display:none}
  .summary.offen > .tile{display:block;flex-basis:calc(50% - 6px)}
  .summary{gap:8px;margin-bottom:16px}
}

.filter-hint{font-size:14px;color:var(--ink-soft);margin:-4px 0 14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.filter-hint strong{color:var(--blue)}
.linklike{background:none;border:none;padding:0;font:inherit;color:var(--blue);cursor:pointer;text-decoration:underline;font-weight:600}
.linklike:hover{color:var(--blue-deep)}

/* ---------- „Vorstand gefragt"-Markierung ---------- */
.await-banner{
  display:flex;align-items:center;gap:10px;
  margin-top:12px;padding:9px 14px;border-radius:10px;
  background:#F6EEF6;border:1px solid var(--purple);
  font-size:14.5px;color:#6E3F6B;
}
.await-banner .await-dot{
  flex:none;width:10px;height:10px;border-radius:50%;
  background:var(--purple);
  box-shadow:0 0 0 0 rgba(168,98,164,.5);
  animation:pulsePurple 2.2s ease-out infinite;
}
.await-banner strong{font-weight:700}
@keyframes pulsePurple{
  0%{box-shadow:0 0 0 0 rgba(168,98,164,.5)}
  70%{box-shadow:0 0 0 9px rgba(168,98,164,0)}
  100%{box-shadow:0 0 0 0 rgba(168,98,164,0)}
}

/* ---------- Kippschalter (Vorstands-Rückmeldung) ---------- */
.await-edit{
  border:1px solid var(--purple);border-radius:12px;background:#FBF7FB;
  padding:12px 16px;margin-bottom:16px;
}
.await-edit .switch-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.await-edit .switch-label{font-size:15px;font-weight:600;color:#6E3F6B}
.await-edit input[type=text]{
  width:100%;border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;background:#fff;margin-top:10px;
}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .slider{
  position:absolute;inset:0;border-radius:999px;background:#D5DBE0;
  transition:background .15s;cursor:pointer;
}
.switch .slider::before{
  content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .slider{background:var(--purple)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.switch input:focus-visible + .slider{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- Aktuelles (Neuigkeiten & Überfälliges) ---------- */
.news-block{
  background:linear-gradient(180deg,var(--blue-tint),var(--surface) 60%);
  border:1px solid var(--blue);border-left:4px solid var(--blue);
  border-radius:var(--radius);margin-bottom:26px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,62,119,.06);
}
.news-head{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:15px 22px;font:inherit;
}
.news-head .nh-chev{
  flex:none;color:var(--blue);font-size:13px;transition:transform .18s;
  transform:rotate(90deg);
}
.news-block.collapsed .nh-chev{transform:rotate(0deg)}
.news-head h3{
  font-family:var(--font-display);font-size:17.5px;font-weight:700;color:var(--blue);
  margin:0;display:flex;align-items:baseline;gap:10px;flex:1;
}
.news-head h3 .nb-sub{font-family:var(--font-body);font-size:13px;font-weight:400;color:var(--ink-soft)}
.news-head .nh-count{
  flex:none;background:var(--blue);color:#fff;font-size:12px;font-weight:800;
  border-radius:999px;padding:3px 10px;letter-spacing:.04em;
}
.news-body{padding:2px 24px 18px}
.news-block.collapsed .news-body{display:none}
.nb-await-head{color:#6E3F6B !important}
.news-item.await .ni-await-dot{
  flex:none;width:9px;height:9px;border-radius:50%;background:var(--purple);
  margin-right:1px;align-self:center;
}
.news-item.await{
  background:#FBF5FB;border-radius:8px;padding:6px 10px;border-top:none;margin-bottom:3px;
}
.news-block h4{
  font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);margin:14px 0 6px;
}
.news-block h4:first-child{margin-top:6px}
.news-item{
  display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:15px;color:var(--ink);
  border-top:1px solid rgba(0,62,119,.06);
}
.news-item:first-of-type{border-top:none}
.news-item .ni-date{flex:none;font-size:13px;color:var(--ink-soft);width:78px}
.news-link{
  background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--blue);
  cursor:pointer;border-bottom:1px solid var(--blue-tint);
}
.news-link:hover{border-bottom-color:var(--blue)}
.news-item.overdue .ni-date{color:var(--red);font-weight:600}
.news-item .ni-days{
  flex:none;font-size:12.5px;font-weight:700;color:var(--red);
  background:#F9E9E5;border-radius:999px;padding:2px 9px;white-space:nowrap;margin-left:auto;
}
.news-more{font-size:13px;color:var(--ink-soft);margin-top:6px}
.t-await-chip{
  background:#F1E4F0;color:#6E3F6B;font-size:11.5px;font-weight:800;
  letter-spacing:.04em;border-radius:999px;padding:3px 9px;white-space:nowrap;
  border:1px solid var(--purple);
}
.t-new{
  background:var(--yellow);color:#5C4A00;font-size:11.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 9px;
  white-space:nowrap;
}
.theme-new-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--yellow);margin-left:9px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(255,212,5,.6);animation:newDot 2s ease-out infinite;
}
@keyframes newDot{
  0%{box-shadow:0 0 0 0 rgba(255,212,5,.6)}
  70%{box-shadow:0 0 0 7px rgba(255,212,5,0)}
  100%{box-shadow:0 0 0 0 rgba(255,212,5,0)}
}
@media (prefers-reduced-motion: reduce){ .theme-new-dot{animation:none} }
.weekly-wrap{margin-top:16px;padding-top:14px;border-top:1px solid rgba(0,62,119,.12)}
.weekly-themen{
  background:none;border:none;font:inherit;font-size:13px;color:var(--ink-soft);
  cursor:pointer;border-bottom:1px dotted var(--ink-soft);padding:0;
}
.weekly-themen:hover{color:var(--blue);border-bottom-color:var(--blue)}
.weekly-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.weekly-len{font-size:14px;color:var(--ink-soft);display:flex;align-items:center;gap:5px}
.len-opt{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:4px 11px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink-soft);
}
.len-opt.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.len-opt:hover:not(.active){border-color:var(--blue);color:var(--blue)}
.weekly-btn{font-size:15px}
.weekly-box{
  background:#fff;border:1px solid var(--blue);border-radius:12px;
  padding:16px 18px;margin-top:4px;
}
.weekly-box.error{border-color:var(--red);color:var(--red);font-size:15px}
.weekly-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.weekly-head h4{margin:0;font-family:var(--font-display);font-size:16.5px;color:var(--blue)}
.weekly-ki{font-size:12.5px;color:var(--ink-soft)}
.weekly-text{font-size:15px;line-height:1.62;color:var(--ink);white-space:pre-wrap}
.weekly-text strong{color:var(--blue)}
.weekly-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.chip-new{
  background:var(--yellow);color:#5C4A00;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px;
}
.suche{position:relative;flex:1;max-width:440px;margin:0 16px}
.suche input{
  width:100%;border:1px solid var(--line);border-radius:999px;
  padding:8px 34px 8px 14px;font:inherit;font-size:14.5px;background:#fff;
}
.suche input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.suche-x{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:14.5px;padding:2px 4px;
}
.suche-x:hover{color:var(--blue)}
.suche-info{
  font-size:14px;color:var(--ink-soft);margin:-8px 0 14px;
  display:flex;align-items:center;gap:10px;
}
.suche-info strong{color:var(--blue)}
mark{background:var(--yellow);color:var(--ink);border-radius:3px;padding:0 2px}
.treffer-wo{
  font-size:13px;color:var(--ink-soft);margin-top:6px;padding-left:2px;
  border-left:2px solid var(--yellow);padding-left:9px;line-height:1.6;
}
.treffer-wo b{color:var(--ink);font-weight:600}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:14px;gap:12px;flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--font-display);font-size:18.5px;font-weight:700;color:var(--blue);
}
.section-head .stand{font-size:14px;color:var(--ink-soft)}

/* ---------- Oberthemen ---------- */
/* Der Abstand ZWISCHEN den Themen muss deutlich groesser sein als der zwischen
   Thema und seiner Kontaktzeile -- sonst ist nicht erkennbar, wozu die Zeile
   gehoert, und zugeklappte Themen wirken ineinandergeschoben. */
.theme-section{margin-bottom:36px}
.theme-section:last-child{margin-bottom:12px}
.theme-toolbar{display:flex;justify-content:flex-end;margin:-6px 0 14px}
.collapse-all-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;font:inherit;font-size:14px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:border-color .15s,color .15s;
}
.collapse-all-btn:hover{border-color:var(--blue);color:var(--blue)}
.collapse-all-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.collapse-all-btn .ca-chev{font-size:11px}
.theme-head{
  width:100%;display:grid;
  grid-template-columns:18px 240px 52px 200px 1fr auto;
  align-items:center;gap:14px;padding-right:6px;
  border:none;background:transparent;text-align:left;
  padding:9px 2px;border-bottom:2px solid var(--blue);margin-bottom:12px;
}
.theme-head .chev{color:var(--blue);font-size:12px;transition:transform .2s}
.theme-section.open .theme-head .chev{transform:rotate(90deg)}
.theme-head h3{
  font-family:var(--font-display);font-size:17.5px;font-weight:700;color:var(--blue);
  margin:0;display:flex;align-items:center;
}
@media (max-width:960px){
  .theme-head{grid-template-columns:18px 1fr auto;row-gap:8px}
  .theme-head h3{grid-column:2}
  .theme-head .theme-pct{grid-column:2;text-align:left}
  .theme-head .theme-ray{grid-column:1 / -1;width:auto}
  .theme-head .theme-stats{grid-column:1 / -1;justify-content:flex-start}
}
.theme-stats{
  display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft);
  font-weight:500;justify-content:flex-end;flex-wrap:wrap;
}
.theme-stats .t-dots{display:flex;align-items:center;gap:8px}
.theme-stats .t-dot{display:inline-flex;align-items:center;gap:4px}
.theme-stats .t-dot::before{content:"";width:8px;height:8px;border-radius:50%;display:inline-block}
.theme-stats .t-dot.d-plan::before{background:var(--green)}
.theme-stats .t-dot.d-watch::before{background:var(--yellow)}
.theme-stats .t-dot.d-crit::before{background:var(--red)}
.theme-stats .t-dot.d-stopp::before{background:var(--gray-ink)}
.theme-body{display:none}
.theme-section.open .theme-body{display:block}
.theme-contact{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  font-size:14px;color:var(--ink-soft);
  margin:-8px 2px 12px;
}
.theme-contact strong{color:var(--ink);font-weight:600}
.theme-contact a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid var(--blue-tint)}
.theme-contact a:hover{border-bottom-color:var(--blue)}
.theme-ray{
  position:relative;height:8px;width:200px;min-width:120px;
  background:var(--line);border-radius:99px;overflow:hidden;align-self:center;
}
.theme-ray .fill{
  position:absolute;left:0;top:0;bottom:0;border-radius:99px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue));
  transition:width .5s ease;
}
.theme-pct{
  font-family:var(--font-display);font-size:18.5px;font-weight:700;color:var(--blue);
  white-space:nowrap;text-align:right;
}
.theme-pflege{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 22px;margin-bottom:14px;
}
.theme-pflege textarea{
  width:100%;min-height:96px;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font:inherit;resize:vertical;margin-bottom:10px;
}
.tp-project{
  border-left:3px solid var(--blue);padding:6px 0 6px 12px;margin:10px 0;
}
.tp-project-name{font-weight:700;color:var(--blue);font-size:15px;margin-bottom:4px}
.theme-chat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:14px;
}
.theme-chat .chat-block{border-top:none;padding:16px 22px}

/* ---------- Projektkarte ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:14px;overflow:hidden;
  transition:box-shadow .15s,border-color .15s;
}
.card:hover{border-color:#B9C9D8}
.card-head{
  width:100%;text-align:left;border:none;background:transparent;
  padding:18px 22px 20px;display:block;
}
.card-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.card-top h3{
  font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;
  margin-right:auto;color:var(--blue);
}
.badge{
  font-size:12.5px;font-weight:600;border-radius:999px;padding:3px 11px;white-space:nowrap;
}
.badge.phase{background:var(--blue-tint);color:var(--blue)}
.badge.s-plan{background:var(--green-tint);color:var(--green-ink)}
.badge.s-watch{background:var(--yellow-tint);color:var(--yellow-ink)}
.badge.s-crit{background:var(--red-tint);color:var(--red)}
.badge.s-stopp{background:var(--gray-tint);color:var(--gray-ink)}
.badge.s-plan::before,.badge.s-watch::before,.badge.s-crit::before,.badge.s-stopp::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:6px;vertical-align:1px;
}
.badge.s-plan::before{background:var(--green)}
.badge.s-watch::before{background:var(--yellow)}
.badge.s-crit::before{background:var(--red)}
.badge.s-stopp::before{background:var(--gray-ink)}
.card-desc{font-size:15px;color:var(--ink-soft);max-width:640px}
.card-meta{
  display:flex;gap:18px;font-size:14px;color:var(--ink-soft);
  margin-top:6px;flex-wrap:wrap;
}
.card-meta strong{color:var(--ink);font-weight:600}
.card-meta a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid var(--blue-tint)}
.card-meta a:hover{border-bottom-color:var(--blue)}
.region-note{
  font-size:12.5px;color:var(--blue);background:var(--blue-tint);
  border-radius:8px;padding:7px 11px;margin-top:8px;
}
.ki-disclaimer{
  font-size:12px;color:var(--ink-soft);margin-top:8px;
}

/* ---------- Der Meilenstein-Strahl ---------- */
.ray-wrap{margin-top:18px}
.ray-labels{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--ink-soft);margin-bottom:8px;
}
.ray-labels .pct{
  font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--blue);
}
.ray-labels .pct small{font-size:13px;font-weight:500;color:var(--ink-soft);margin-left:6px}
.ray{position:relative;height:34px}
.ray .track{
  position:absolute;left:0;right:0;top:13px;height:8px;border-radius:99px;
  background:var(--line);
}
.ray .fill{
  position:absolute;left:0;top:13px;height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue));
  transition:width .5s ease;
}
.ray.is-stopped .fill{background:linear-gradient(90deg,#7C8A91,#9AA7AD)}
.ray .node{
  position:absolute;top:9px;width:16px;height:16px;border-radius:50%;
  background:var(--surface);border:2.5px solid var(--line);
  transform:translateX(-50%);z-index:2;
}
.ray .node.done{border-color:var(--blue);background:var(--blue)}
.ray .node.done::after{
  content:"";position:absolute;inset:3px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(0,-1px);width:6px;height:3px;
  border-radius:1px;
}
.ray .node .tip{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:12px;font-weight:500;
  padding:4px 9px;border-radius:6px;
  white-space:normal;width:max-content;max-width:220px;text-align:center;line-height:1.35;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:6;
}
.ray .node:hover .tip{opacity:1}

/* Pulsierender Fortschrittspunkt: zeigt, wo das Projekt gerade steht */
.ray .marker{
  position:absolute;top:10.5px;width:13px;height:13px;border-radius:50%;
  background:var(--blue);border:2px solid #fff;
  transform:translateX(-50%);z-index:3;
  box-shadow:0 0 0 0 rgba(0,62,119,.45);
  animation:pulseBlue 2.2s ease-out infinite;
}
.ray .marker.stopped{
  background:var(--red);
  box-shadow:0 0 0 0 rgba(178,69,47,.5);
  animation:pulseRed 2.2s ease-out infinite;
}
@keyframes pulseBlue{
  0%{box-shadow:0 0 0 0 rgba(0,62,119,.45)}
  70%{box-shadow:0 0 0 11px rgba(0,62,119,0)}
  100%{box-shadow:0 0 0 0 rgba(0,62,119,0)}
}
@keyframes pulseRed{
  0%{box-shadow:0 0 0 0 rgba(178,69,47,.5)}
  70%{box-shadow:0 0 0 11px rgba(178,69,47,0)}
  100%{box-shadow:0 0 0 0 rgba(178,69,47,0)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ray .marker{box-shadow:0 0 0 4px rgba(0,62,119,.18)}
  .ray .marker.stopped{box-shadow:0 0 0 4px rgba(178,69,47,.2)}
  .await-banner .await-dot{box-shadow:0 0 0 3px rgba(168,98,164,.25)}
}
.expand-hint{
  font-size:13px;color:var(--ink-soft);margin-top:10px;
  display:flex;align-items:center;gap:6px;
}
.expand-hint .chev{transition:transform .2s;font-size:11px}
.card.open .expand-hint .chev{transform:rotate(90deg)}

/* ---------- Detailbereich ---------- */
.card-detail{display:none;border-top:1px solid var(--line);background:#FAFCFD}
.card.open .card-detail{display:block}
.detail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
}
.detail-col{padding:18px 22px}
.detail-col + .detail-col{border-left:1px solid var(--line)}
/* Abschnittskopf mit Stift zum Bearbeiten an Ort und Stelle */
.abschnitt-kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.abschnitt-kopf h4{margin:0!important;flex:1}
.stift{
  flex:none;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:3px 9px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:border-color .12s,color .12s,background .12s;
}
.stift:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)}
.stift:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.stift.aktiv{background:var(--blue);border-color:var(--blue);color:#fff}
.werkzeug-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.werkzeug-schalter{
  flex:1;display:flex;align-items:center;gap:8px;background:none;border:none;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);cursor:pointer;padding:4px 0;text-align:left;
}
.wz-chev{font-size:11px}
.edit-panel.zu{padding-bottom:14px}
.inline-edit{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:4px;
}
.inline-edit .edit-row:last-of-type{margin-bottom:8px}
.detail-col h4{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:10px;
}
.ms-list{list-style:none}
.ms-list li{
  display:flex;gap:10px;align-items:flex-start;
  padding:7px 0;border-bottom:1px dashed var(--line);font-size:15px;
}
.ms-list li:last-child{border-bottom:none}
.ms-list .dot{
  flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px;
  background:var(--line);
}
.ms-list li.done .dot{background:var(--blue)}
.ms-list li.done .ms-title{color:var(--ink-soft)}
.ms-list .ms-date{margin-left:auto;font-size:13px;color:var(--ink-soft);white-space:nowrap;padding-top:1px}
.updates{padding:18px 22px;border-top:1px solid var(--line)}
.updates h4{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:10px;
}
.upd-list{list-style:none}
.upd-list li{
  display:flex;gap:14px;padding:8px 0;font-size:15px;
  border-bottom:1px dashed var(--line);align-items:flex-start;
}
.upd-list li:last-child{border-bottom:none}
.upd-list .upd-date{
  flex:none;width:86px;font-size:13px;font-weight:600;color:var(--blue);
  padding-top:1px;
}
.empty-note{font-size:14.5px;color:var(--ink-soft);font-style:italic}

/* ---------- Pflegemodus ---------- */
.edit-panel{padding:18px 22px;border-top:1px solid var(--line);background:#F2F6FA}
.edit-panel h4{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue);margin-bottom:12px;
}
.form-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;margin-bottom:16px;
}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;
}
.field textarea{resize:vertical;min-height:56px}
.field.wide{grid-column:1/-1}
.edit-block{margin-top:18px}
.edit-row{
  display:flex;gap:8px;align-items:center;padding:6px 0;
  border-bottom:1px dashed var(--line);flex-wrap:wrap;
}
.edit-row input[type=text]{flex:1;min-width:160px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;background:#fff}
.edit-row input[type=date]{border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:#fff}
.edit-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue)}
.add-row{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.add-row input[type=text]{flex:1;min-width:180px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fff}
.add-row input[type=date]{border:1px solid var(--line);border-radius:8px;padding:6px 9px;background:#fff}
.edit-footer{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}

.btn.mic.recording{
  background:var(--red);border-color:var(--red);color:#fff;
  animation:micPulse 1.4s ease-out infinite;
}
@keyframes micPulse{
  0%{box-shadow:0 0 0 0 rgba(178,69,47,.4)}
  70%{box-shadow:0 0 0 9px rgba(178,69,47,0)}
  100%{box-shadow:0 0 0 0 rgba(178,69,47,0)}
}
/* ---------- KI-Pflege ---------- */
.ki-block{
  border:1px solid var(--blue);border-radius:12px;background:#fff;
  padding:14px 16px;margin-top:18px;
}
.ki-block h4{margin-bottom:8px}
.ki-block .ki-intro{font-size:14px;color:var(--ink-soft);margin-bottom:10px}
.ki-block textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;background:#fff;min-height:74px;resize:vertical;
}
.ki-actions{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ki-status{font-size:14px;color:var(--ink-soft)}
.ki-status.error{color:var(--red)}
.proposal{
  margin-top:14px;border:1px solid var(--blue);border-radius:10px;
  background:var(--blue-tint);padding:14px 16px;
}
.proposal h5{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue);margin-bottom:6px;
}
.proposal .hinweis{font-size:14px;color:var(--ink-soft);margin-bottom:10px}
.proposal label.pi{
  display:flex;gap:9px;align-items:flex-start;font-size:15px;
  padding:5px 0;cursor:pointer;
}
.proposal label.pi input[type=checkbox]{
  width:16px;height:16px;accent-color:var(--blue);margin-top:2px;flex:none;
}
.proposal .p-actions{display:flex;gap:8px;margin-top:12px}

.mein-block{
  border:1px solid var(--blue);border-radius:var(--radius);background:var(--blue-tint);
  margin-bottom:22px;overflow:hidden;
}
.mein-kopf{
  width:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:none;border:none;text-align:left;padding:13px 18px;cursor:pointer;
}
.mein-kopf h3{font-family:var(--font-display);font-size:17px;color:var(--blue);margin:0}
.mein-chev{color:var(--blue);font-size:11px;transition:transform .2s}
.mein-block.zu .mein-chev{transform:rotate(-90deg)}
.mein-block.zu .mein-koerper{display:none}
.mein-sub{font-size:13px;color:var(--ink-soft)}
.mein-warn{
  font-size:12px;font-weight:700;color:var(--red);background:var(--red-tint);
  border-radius:999px;padding:2px 10px;
}
.mein-zahl{
  margin-left:auto;background:var(--blue);color:#fff;font-size:12.5px;font-weight:700;
  border-radius:999px;padding:2px 10px;
}
.mein-koerper{padding:0 18px 16px}
.mein-koerper h4{
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);margin:14px 0 7px;
}
.mein-koerper h4:first-child{margin-top:0}
.mein-todos{display:flex;flex-direction:column;gap:4px}
.mein-todo{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:8px 11px;font-size:14px;cursor:pointer;
}
.mein-todo input[type=checkbox]{width:17px;height:17px;accent-color:var(--green-ink);flex:none}
.mt-text{flex:1;min-width:0}
.mt-projekt{
  flex:none;background:none;border:none;font:inherit;font-size:12px;font-weight:600;
  color:var(--blue);cursor:pointer;border-bottom:1px solid var(--blue-tint);
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mt-projekt:hover{border-bottom-color:var(--blue)}
.mein-ms{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:7px 11px;margin-bottom:4px;font-size:14px;
}
.mein-ms.ueberfaellig{border-color:var(--red)}
.mm-datum{flex:none;font-size:12.5px;color:var(--ink-soft);width:88px}
.mein-ms.ueberfaellig .mm-datum{color:var(--red);font-weight:600}
.mm-titel{flex:1;min-width:0}
.mein-projekte{display:flex;flex-wrap:wrap;gap:7px}
.mein-projekt{
  display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  font:inherit;font-size:13.5px;cursor:pointer;max-width:100%;
}
.mein-projekt:hover{border-color:var(--blue)}
.mp-name{font-weight:600;color:var(--blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-pct{font-size:12.5px;color:var(--ink-soft)}
.mein-mehr,.mein-leer{font-size:13px;color:var(--ink-soft);margin-top:6px}
@media (max-width:680px){
  .mein-todo,.mein-ms{flex-wrap:wrap}
  .mt-projekt{max-width:100%}
  .mm-datum{width:auto}
}

.arch-eintrag{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}
.arch-eintrag.offen{border-color:var(--blue)}
.arch-kopf{
  width:100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:none;border:none;text-align:left;padding:10px 13px;cursor:pointer;font:inherit;
}
.arch-kopf:hover{background:var(--bg)}
.arch-chev{color:var(--blue);font-size:11px;flex:none}
.arch-datum{font-size:14px;font-weight:600;color:var(--blue);flex:none}
.arch-meta{font-size:13px;color:var(--ink-soft);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arch-wer{font-size:12px;color:var(--ink-soft);background:var(--gray-tint);
  border-radius:999px;padding:2px 9px;flex:none}
.arch-text{
  white-space:pre-wrap;font-size:14px;line-height:1.62;color:var(--ink);
  padding:0 13px 12px;max-height:420px;overflow:auto;
}
.arch-aktionen{display:flex;gap:8px;padding:0 13px 12px}

/* ---------- Posteingang ---------- */
.eingang-block{
  border:1px solid var(--purple);border-radius:var(--radius);background:#FCF7FB;
  padding:14px 18px;margin-bottom:22px;
}
.eingang-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.eingang-head h3{font-family:var(--font-display);font-size:17px;color:#6E3F6B;margin:0}
.eingang-zahl{
  background:var(--purple);color:#fff;font-size:12.5px;font-weight:700;
  border-radius:999px;padding:2px 10px;
}
.eingang-sub{font-size:13px;color:var(--ink-soft)}
/* Abrufen sitzt rechts in der Kopfzeile -- im Stil der uebrigen Knoepfe,
   nur zurueckhaltender, weil es eine Nebenhandlung ist. */
.eingang-abruf{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--purple);border-radius:999px;
  padding:5px 13px;font:inherit;font-size:13px;font-weight:600;color:#6E3F6B;
  cursor:pointer;transition:background .12s,color .12s;
}
.eingang-abruf:hover:not(:disabled){background:#F1E4F0}
.eingang-abruf:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.eingang-abruf:disabled{opacity:.6;cursor:wait}
.abruf-symbol{font-size:14px;line-height:1;display:inline-block}
.eingang-abruf.laeuft .abruf-symbol{animation:abrufDreht 1s linear infinite}
@keyframes abrufDreht{ to{transform:rotate(360deg)} }
@media (prefers-reduced-motion: reduce){ .eingang-abruf.laeuft .abruf-symbol{animation:none} }
.eingang-abruf-status{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
/* Leerzustand: eine Zeile, kein Kasten-Gefuehl */
.eingang-block.leer{background:none;border-style:dashed;padding:10px 18px}
.eingang-block.leer .eingang-head{margin-bottom:0}
.eingang-item{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:10px;
}
.eingang-item:last-child{margin-bottom:0}
.eingang-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.eingang-quelle{
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#6E3F6B;background:#F1E4F0;border-radius:999px;padding:2px 9px;
}
.eingang-titel{font-size:15px;color:var(--blue);margin-right:auto;overflow-wrap:anywhere}
.eingang-datum{font-size:12.5px;color:var(--ink-soft)}
.eingang-offen{
  font-size:11.5px;font-weight:700;color:var(--yellow-ink);
  background:var(--yellow-tint);border-radius:999px;padding:2px 9px;white-space:nowrap;
}
.eingang-mehr{
  background:none;border:none;padding:0;font:inherit;font-size:12.5px;
  color:var(--ink-soft);cursor:pointer;text-decoration:underline dotted;
}
.eingang-mehr:hover{color:var(--blue)}
.eingang-text{
  white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.55;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin:8px 0;max-height:260px;overflow:auto;
}
.eingang-aktionen{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.eingang-fehler{font-size:13px;color:var(--red);margin-top:8px}
.eingang-vorschlag{border-color:var(--purple);background:#FBF5FB}
.eingang-vorschlag h5{color:#6E3F6B}
.eingang-zuord{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.eingang-zuord label{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.eingang-zuord select{
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;font:inherit;
  font-size:14px;background:#fff;max-width:100%;
}
.eingang-anzahl{font-size:12.5px;font-weight:600;color:#6E3F6B;margin-bottom:10px}
.zuord-karte{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;margin-bottom:10px;
}
.zuord-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.zuord-abschnitt{
  font-size:13px;font-weight:700;color:var(--blue);margin-right:auto;overflow-wrap:anywhere;
}
/* Bearbeitbare Vorschlagszeilen: Haekchen links, Feld daneben */
.vs-zeile{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.vs-zeile > input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);margin-top:9px;flex:none}
.vs-feld{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vs-marke{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);
}
.vs-feld input,.vs-feld textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 9px;
  font:inherit;font-size:14px;background:#fff;
}
.vs-feld textarea{min-height:62px;resize:vertical;line-height:1.5}
.vs-paar{display:flex;gap:8px;align-items:center}
.vs-paar input[type=text]{flex:1;min-width:0}
/* Das Datumsfeld braucht eine EIGENE Breite.
   Darueber steht ".vs-feld input{width:100%}". Mit "flex:none" ist die
   Flex-Basis "auto" -- und die loest sich auf die width-Angabe auf, also auf
   100 % der Zeile. Das Datumsfeld nahm damit die ganze Breite, und das
   Titelfeld daneben wurde auf null gequetscht: Der Meilensteintext war nicht
   mehr zu sehen. Deshalb hier width ausdruecklich zuruecknehmen. */
.vs-paar input[type=date]{flex:0 0 auto;width:auto;min-width:142px}
@media (max-width:680px){
  .vs-paar{flex-direction:column;align-items:stretch}
  /* min-width hier ausdruecklich zurueck: Untereinander ist der Platz oft
     schmaler als die 142px von oben -- sonst ragt das Datumsfeld wieder raus,
     nur eben aus einer anderen Richtung. */
  .vs-paar input[type=date]{width:100%;min-width:0}
}
.zuord-offen{
  font-size:12.5px;color:var(--ink-soft);background:#fff;border:1px dashed var(--line);
  border-radius:8px;padding:8px 11px;margin-bottom:4px;
}
.zuord-offen strong{color:var(--ink)}
.eingang-sicher{font-size:12px;font-weight:600}
.eingang-sicher.s-hoch{color:var(--green-ink)}
.eingang-sicher.s-mittel{color:var(--yellow-ink)}
.eingang-sicher.s-niedrig{color:var(--red)}

/* ---------- KI & Kosten (Verwaltung) ---------- */
/* ---------- Dialog "Mein Konto" ---------- */
.modal.mein-konto{max-width:620px}
.mk-block{
  border:1px solid var(--line);border-radius:12px;padding:0 0 14px;margin-bottom:16px;
}
.mk-titel{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);margin:0 0 10px;padding:10px 16px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.mk-hilfe{font-size:13px;color:var(--ink-soft);margin:0 16px 10px;line-height:1.5}
.mk-fein{font-size:12px;color:var(--ink-soft);margin:8px 16px 0}
.mk-haupt{
  display:flex;align-items:center;gap:9px;margin:0 16px 8px;padding:9px 11px;
  background:var(--blue-tint);border-radius:9px;font-size:14px;overflow-wrap:anywhere;
}
.mk-marke{
  flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--blue);color:#fff;border-radius:999px;padding:2px 9px;
}
.mk-marke.fehlt{background:var(--red)}
.mk-liste{margin:0 16px}
.mk-zeile{
  display:flex;align-items:center;gap:9px;padding:8px 11px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:9px;font-size:14px;overflow-wrap:anywhere;
}
.mk-zeile span{flex:1;min-width:0}
.mk-weg{
  flex:none;background:none;border:none;color:var(--ink-soft);cursor:pointer;
  font-size:14px;padding:2px 6px;border-radius:6px;
}
.mk-weg:hover{color:var(--red);background:var(--red-tint)}
.mk-leer{font-size:13px;color:var(--ink-soft);font-style:italic;margin:0 0 6px}
.mk-zufuegen{display:flex;gap:8px;margin:10px 16px 0}
.mk-zufuegen input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font:inherit;font-size:14px;background:#fff;
}
.mk-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mk-fuss .modal-actions{margin-left:auto}
.mk-rueckmeldung{font-size:13px;font-weight:600;color:var(--ink-soft)}
.mk-rueckmeldung.ok{color:var(--green-ink)}
.mk-rueckmeldung.offen{color:var(--yellow-ink)}
#myThemesBody{margin:0 16px}

/* ---------- Zweiter Faktor ---------- */
.qr-box{
  display:flex;justify-content:center;padding:12px;margin:8px 0;
  background:#fff;border:1px solid var(--line);border-radius:10px;
}
.qr-box svg{width:200px;height:200px;display:block}
.qr-alternativ{margin-top:6px}
.qr-alternativ summary{
  font-size:13px;color:var(--ink-soft);cursor:pointer;
}
.qr-alternativ summary:hover{color:var(--blue)}
.secret-box{
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin:6px 0;text-align:center;
}
.secret-box code{
  font-family:ui-monospace,"Consolas",monospace;font-size:17px;font-weight:700;
  letter-spacing:.12em;color:var(--blue);word-break:break-all;
}
.code-liste{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;
  margin:12px 0;
}
.code-liste code{
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;text-align:center;font-family:ui-monospace,"Consolas",monospace;
  font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.05em;
}
/* Handy: Logo und Titel weiter verkleinern. Bei 375px stehen nur ~343px zur
   Verfuegung -- Logo in voller Groesse plus Titel passen dort nicht. */
@media (max-width:520px){
  .brand img{height:40px}
  .brand h1{font-size:15.5px}
  .brand{gap:10px}
  header .header-inner{padding:8px 14px;gap:8px}
}
@media print{
  /* Beim Drucken der Codes nur diese aufs Papier bringen */
  body.codes-drucken > *:not(.modal-overlay){display:none!important}
  .modal-overlay#totpEinrichtenModal{position:static;background:none;padding:0}
  .modal-overlay#totpEinrichtenModal .modal{box-shadow:none;max-width:none;height:auto}
}

.alias-head,.alias-row{
  display:grid;grid-template-columns:minmax(120px,1fr) minmax(140px,1.2fr) minmax(200px,2fr);
  gap:9px;align-items:center;padding:5px 0;border-top:1px solid var(--line);
}
.alias-head{
  border-top:none;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);
}
.alias-name{font-size:14px;font-weight:600;color:var(--blue)}
.alias-haupt{font-size:13px;color:var(--ink-soft);overflow-wrap:anywhere}
.alias-haupt em{color:var(--red);font-style:normal}
.alias-row input{
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;
  font-size:13.5px;width:100%;
}
@media (max-width:1160px){
  .alias-head{display:none}
  .alias-row{grid-template-columns:1fr;row-gap:4px;
    border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px}
}

/* Einrichtung Leexi: Schrittfolge statt loser Felder */
.leexi-empfang{
  border-radius:10px;padding:9px 12px;font-size:13.5px;margin-bottom:12px;
  border:1px solid var(--line);background:var(--bg);
}
.leexi-empfang.ok{border-color:var(--green-ink);background:var(--green-tint);color:var(--green-ink)}
.leexi-empfang.wartet{border-color:var(--yellow-ink);background:var(--yellow-tint);color:var(--yellow-ink)}
.leexi-empfang.aus{color:var(--ink-soft)}
.einricht-schritte{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.einricht-schritte li{font-size:14px}
.einricht-schritte li::marker{color:var(--blue);font-weight:700}
.einricht-schritte > li > strong{color:var(--blue)}
.schritt-hinweis{display:block;font-size:13px;color:var(--ink-soft);margin-top:3px;line-height:1.5}
.leexi-felder{border-collapse:collapse;margin-top:7px;width:100%;font-size:13.5px}
.leexi-felder td{border-top:1px solid var(--line);padding:5px 8px 5px 0;vertical-align:top}
.leexi-felder td:first-child{
  width:120px;font-weight:600;color:var(--ink-soft);white-space:nowrap;
}
.leexi-felder .frei{color:var(--ink-soft);font-style:italic}
.webhook-zeile{display:flex;gap:8px;align-items:center}
.webhook-zeile input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:7px 9px;
  font:inherit;font-size:13px;background:var(--bg);color:var(--ink-soft);
}
.ki-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.ki-status-grid > div{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;display:flex;flex-direction:column;gap:2px;min-width:0;
}
.kf-label{font-size:12px;color:var(--ink-soft);font-weight:600}
.kf-val{font-size:14.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.kf-klein{font-size:12.5px;font-weight:500;color:var(--ink-soft);overflow-wrap:anywhere}
.ki-ok{color:var(--green-ink)}
.ki-fehlt{color:var(--red)}
.preis-head,.preis-row{
  display:grid;grid-template-columns:minmax(120px,1.4fr) 120px 120px 150px 28px;
  gap:7px;align-items:center;margin-bottom:6px;
}
.preis-head{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:4px}
.preis-row input{
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:14px;width:100%;
}
.kosten-head,.kosten-row{
  display:grid;grid-template-columns:minmax(130px,1.5fr) minmax(90px,1fr) 80px 100px 100px 100px;
  gap:8px;align-items:center;padding:6px 0;
}
.kosten-head{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--line)}
.kosten-row{border-bottom:1px solid var(--line);font-size:14px}
.kosten-row .r,.kosten-head .r{text-align:right}
.kosten-summe{font-weight:700;color:var(--blue);border-bottom:none;border-top:2px solid var(--blue)}
@media (max-width:1080px){
  .preis-head,.kosten-head{display:none}
  .preis-row,.kosten-row{
    grid-template-columns:1fr 1fr;row-gap:6px;
    border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;
  }
  .kosten-row .r,.kosten-head .r{text-align:left}
}

/* ---------- Planungsassistent (vorausschauend) ---------- */
.plan-block{border-color:var(--green-ink)}
.plan-block > h4{color:var(--green-ink)}
.proposal.plan-result{border-color:var(--green-ink);background:var(--green-tint)}
.proposal.plan-result h5{color:var(--green-ink)}
.plan-sec{margin-top:12px}
.plan-sec h6{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:5px;
}
.plan-sec h6 .plan-hint{font-weight:600;letter-spacing:0;text-transform:none;opacity:.8}
.plan-list{margin:0;padding-left:18px;font-size:15px;line-height:1.55}
.plan-list li{margin:2px 0}
.plan-list.plan-risk li::marker{color:var(--red)}
.plan-result .pi-date{color:var(--ink-soft);font-weight:500}
.prognose{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:4px;padding:8px 11px;border-radius:8px;background:#fff;border:1px solid var(--line);
}
.prognose .prog-badge{
  font-size:13px;font-weight:700;border-radius:999px;padding:3px 11px;white-space:nowrap;
}
.prognose .prog-text{font-size:14px;color:var(--ink)}
.prog-kurs .prog-badge{background:var(--green-tint);color:var(--green-ink)}
.prog-knapp .prog-badge{background:var(--yellow-tint);color:var(--yellow-ink)}
.prog-kritisch .prog-badge{background:var(--red-tint);color:var(--red)}

/* ---------- Projekt-Chat (Nachfragen) ---------- */
.chat-block{padding:18px 22px;border-top:1px solid var(--line)}
.chat-block h4{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:10px;
}
.chat-log{
  display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;
  margin-bottom:10px;
}
.chat-msg{
  max-width:85%;padding:8px 12px;border-radius:12px;font-size:15px;
  white-space:pre-wrap;word-wrap:break-word;
}
.chat-msg.from-user{
  align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px;
}
.chat-msg.from-ki{
  align-self:flex-start;background:var(--blue-tint);color:var(--ink);border-bottom-left-radius:4px;
}
.chat-row{display:flex;gap:8px}
.chat-row input{
  flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:#fff;
}
/* Titelzeile im Themendialog: Name als Ueberschrift, Stift daneben */
.thema-titelzeile{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
.tt-links{flex:1;min-width:0}
.tt-marke{
  display:block;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px;
}
.thema-titelzeile h3{margin:0;overflow-wrap:anywhere}
.tt-eingabe{
  width:100%;border:1px solid var(--blue);border-radius:9px;padding:7px 10px;
  font-family:var(--font-display);font-size:19.5px;font-weight:700;color:var(--blue);
  background:#fff;
}
.thema-titelzeile .stift{margin-top:14px}
.modal textarea{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  background:#fff;min-height:200px;resize:vertical;margin-bottom:6px;font-size:14.5px;
}

/* ---------- Fußzeile & Login ---------- */
footer{
  border-top:1px solid var(--line);background:var(--surface);
}
.footer-inner{
  max-width:1060px;margin:0 auto;padding:14px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;color:var(--ink-soft);
}
.login-link{
  border:none;background:none;font-size:13px;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:3px;padding:2px;
}
.login-link:hover{color:var(--blue)}
.storage-note{display:none;font-size:13px;color:var(--ink-soft);max-width:640px}
body.logged-in .storage-note{display:block}

.modal-overlay{
  position:fixed;inset:0;background:rgba(0,44,85,.45);z-index:100;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.show{display:flex}
.modal{
  background:var(--surface);border-radius:var(--radius);padding:26px;
  width:100%;max-width:420px;box-shadow:0 18px 50px rgba(0,44,85,.25);
  max-height:90vh;overflow:auto;
}
.modal h3{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:4px;color:var(--blue)}
.modal p{font-size:14.5px;color:var(--ink-soft);margin-bottom:16px}
.modal input[type=password],.modal input[type=text]{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  margin-bottom:6px;background:#fff;
}
.modal .field{margin-bottom:10px}
.modal .field label{font-size:13px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:3px}
.modal .error{font-size:14px;color:var(--red);min-height:18px;margin-bottom:8px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}

/* ---------- Einheitliche Seitenleisten-Navigation (Einstellungen + Fokus) ---------- */
.mnav-layout{display:flex;gap:18px;align-items:flex-start;margin-top:14px}
.mnav{
  flex:none;width:190px;display:flex;flex-direction:column;gap:2px;
  border-right:1px solid var(--line);padding-right:12px;
}
.mnav button{
  text-align:left;background:none;border:none;border-radius:8px;width:100%;
  padding:9px 12px;font:inherit;font-size:15px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:background .12s,color .12s;display:flex;align-items:center;gap:9px;
}
.mnav button:hover{background:var(--blue-tint);color:var(--blue)}
.mnav button.active{background:var(--blue);color:#fff}
.mnav button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mnav .mnav-badge{
  margin-left:auto;font-size:12px;font-weight:700;background:var(--blue-tint);
  color:var(--blue);border-radius:999px;padding:1px 7px;
}
.mnav button.active .mnav-badge{background:rgba(255,255,255,.28);color:#fff}
.mnav-body{flex:1;min-width:0}

/* ---------- Fokus-Fenster ---------- */
.modal.focus{
  max-width:1000px;width:min(96vw,1000px);height:min(90vh,860px);
  display:flex;flex-direction:column;padding:0;overflow:hidden;
}
.focus-head{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.focus-head h3{margin:0;font-size:18.5px}
.focus-close{margin-left:auto;background:none;border:none;font-size:24px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:2px 8px;border-radius:8px}
.focus-close:hover{background:var(--gray-tint);color:var(--ink)}
.focus-body{flex:1;min-height:0;display:flex}
.focus-body .mnav{width:210px;padding:16px 12px;border-right:1px solid var(--line);overflow-y:auto;margin:0}
.focus-pane{flex:1;min-width:0;overflow-y:auto;overflow-x:clip;padding:20px 24px}
.focus-pane > h4:first-child{margin-top:0}
.focus-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.focus-desc{font-size:15.5px;color:var(--ink);margin-bottom:14px;line-height:1.55}
.focus-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0}
.focus-facts > div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 13px;display:flex;flex-direction:column;gap:2px}
.focus-facts .ff-label{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.focus-facts .ff-val{font-size:17.5px;font-weight:700;color:var(--blue);font-family:var(--font-display)}
.focus-contact{font-size:14.5px;color:var(--ink-soft);display:flex;gap:6px;flex-wrap:wrap}
.focus-contact strong{color:var(--ink)}

/* ---------- To-do-Checkliste ---------- */
.todo-list{display:flex;flex-direction:column;margin-bottom:12px}
.todo-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.todo-item:first-child{border-top:none}
.todo-item input[type=checkbox]{width:17px;height:17px;accent-color:var(--green-ink);margin-top:2px;flex:none;cursor:pointer}
.todo-item .todo-text{flex:1;font-size:15.5px;line-height:1.5}
.todo-item.done .todo-text{text-decoration:line-through;color:var(--ink-soft)}
.todo-del{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:15.5px;padding:0 4px;flex:none;opacity:.55}
.todo-del:hover{color:var(--red);opacity:1}
.todo-add{display:flex;gap:8px;margin-top:8px}
.todo-add input{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:#fff}
.todo-empty{font-size:14.5px;color:var(--ink-soft);font-style:italic;margin-bottom:10px}

/* ---------- Fokus-Auslöser auf der Karte ---------- */
.card{position:relative}
.card-top{padding-right:40px}
.focus-btn{
  position:absolute;top:12px;right:12px;z-index:3;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-soft);cursor:pointer;font-size:16.5px;line-height:1;
  transition:border-color .12s,color .12s,background .12s;
}
.focus-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)}
.focus-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

@media (max-width:680px){
  .mnav-layout{flex-direction:column;gap:12px}
  .mnav-layout .mnav{width:auto;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--line);padding:0 0 10px}
  .modal.focus{width:100vw;height:100dvh;max-width:none;border-radius:0}
  .focus-body{flex-direction:column}
  .focus-body .mnav{width:auto;flex-direction:row;flex-wrap:nowrap;border-right:none;border-bottom:1px solid var(--line);overflow-x:auto;padding:10px 12px}
  .focus-body .mnav button{flex:none}
}

/* Zwischenstufe: Unter ~1100px reicht der Platz fuer Logo in voller Groesse
   plus Name, Umschalter und Menue nicht mehr. Statt die Kopfzeile umbrechen zu
   lassen, wird das Logo hier etwas kleiner -- auf dem Desktop bleibt es gross. */
@media (max-width:1100px){
  .brand img{height:58px}
  .brand h1{font-size:18px}
  .brand{gap:14px}
}
@media (max-width:680px){
  /* Bearbeiten an Ort und Stelle: Auf schmalen Geraeten untereinander statt
     nebeneinander -- die Datumsfelder lassen sich sonst nicht genug stauchen. */
  .inline-edit .edit-row,.inline-edit .add-row{flex-direction:column;align-items:stretch}
  .inline-edit .edit-row input,.inline-edit .add-row input{min-width:0;width:100%}
  .inline-edit .edit-row input[type=checkbox]{width:20px;align-self:flex-start}
  .inline-edit .edit-row .btn,.inline-edit .add-row .btn{align-self:flex-end}
  .detail-grid{grid-template-columns:1fr}
  .detail-col + .detail-col{border-left:none;border-top:1px solid var(--line)}
  /* Kopfbereich kompakter */
  header .header-inner{padding:10px 16px;gap:8px 12px}
  header .header-actions{padding:0 16px 10px}
  .brand{gap:12px}
  .brand img{height:54px}
  .brand h1{font-size:18px;line-height:1.2}
  .brand .sub{display:none}
  /* Suchleiste volle Breite unter der Überschrift */
  .section-head{gap:8px}
  .section-head .suche{max-width:none;flex-basis:100%;margin:0}
  .section-head .stand{flex-basis:100%}
  /* „Aktuelles“: Datum + Tage nebeneinander, Text darunter statt gequetscht */
  .news-item:not(.await){flex-wrap:wrap;column-gap:10px;row-gap:2px}
  .news-item:not(.await) .ni-date{order:1}
  .news-item:not(.await) .ni-days{order:2;margin-left:auto}
  .news-item:not(.await) > span:not([class]){order:3;flex-basis:100%}
}
/* Handy: Logo und Titel weiter verkleinern. Bei 375px stehen nur ~343px zur
   Verfuegung -- Logo in voller Groesse plus Titel passen dort nicht. */
@media (max-width:520px){
  .brand img{height:40px}
  .brand h1{font-size:15.5px}
  .brand{gap:10px}
  header .header-inner{padding:8px 14px;gap:8px}
}
@media print{
  header .mode-switch,header .menu-wrap,.expand-hint,.edit-panel,footer{display:none!important}
  .card{break-inside:avoid}
  .card-detail{display:block!important}
  body{background:#fff}
}

/* ---------- Papierkorb ---------- */
.korb-eintrag{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin-bottom:8px;
}
.korb-art{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--gray-tint);color:var(--gray-ink);border-radius:999px;padding:2px 9px;
}
.korb-name{font-weight:600;flex:1;min-width:200px}
.korb-eintrag .btn{white-space:nowrap}
.korb-meta{font-size:12.5px;color:var(--ink-soft)}
.korb-frist{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.korb-frist.knapp{color:var(--red);font-weight:600}
.korb-leer{color:var(--ink-soft);padding:16px 0}

/* ---------- Erledigte Aufgaben in "Für mich" ---------- */
.mein-erledigt .mein-todo{opacity:.62}
.mein-erledigt .mt-text{text-decoration:line-through}
.mein-erledigt .mein-todo:hover{opacity:1}

/* ---------- Protokoll ---------- */
.prot-liste{margin-top:12px;max-height:460px;overflow-y:auto;border:1px solid var(--line);border-radius:10px}
.prot-zeile{
  display:grid;grid-template-columns:150px 150px 1fr;gap:10px;
  padding:7px 12px;font-size:13.5px;border-bottom:1px solid var(--line);
}
.prot-zeile:last-child{border-bottom:none}
.prot-zeile:nth-child(even){background:var(--bg)}
.prot-zeit{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.prot-wer{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.prot-was{color:var(--ink)}
.prot-zeile.wichtig .prot-was{color:var(--red);font-weight:600}
@media (max-width:680px){
  .prot-zeile{grid-template-columns:1fr;gap:2px;padding:9px 12px}
  .prot-zeit{font-size:12px}
}

/* ---------- Blickfeld-Auswahl ---------- */
.blickfeld{
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  padding:5px 8px;font-size:13px;color:var(--ink);max-width:130px;
}
.blickfeld:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.blickfeld.aktiv{border-color:var(--blue);color:var(--blue);font-weight:600}

/* Steht der Team-Waehler in der Kopfzeile, ist ein Element mehr unterzubringen.
   Die Inhaltsbreite ist auf 1060px gedeckelt (also 1012px netto), gebraucht
   wurden ohne Gegenmassnahme 1095px -- die Zeile brach um. Also Logo, Name
   und Abstaende genau dann kuerzen, wenn der Waehler wirklich da ist. */
body.mit-blickfeld .brand img{height:58px}
body.mit-blickfeld .header-right{gap:6px}
body.mit-blickfeld .chip-name{max-width:96px}
body.mit-blickfeld .kopf-chip{padding:5px 9px}
body.mit-blickfeld .blickfeld{max-width:88px}
/* Auch der Abstand zwischen Marke und rechter Gruppe zaehlt mit: 447 + 12 + 561
   waren 1020 bei 1012 nutzbaren Pixeln -- daran allein brach die Zeile um. */
body.mit-blickfeld .header-inner{gap:8px}

/* Pluszeichen am Oberthema -- gleiche Machart wie der Stift daneben, aber
   in der Hauptfarbe, weil es etwas anlegt statt nur zu oeffnen. */
.stift.plus{color:var(--blue);font-weight:700}
.stift.plus:hover{background:var(--blue-tint);border-color:var(--blue)}

/* Neues Projekt aus dem Posteingang heraus */
.zuord-neu{
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;
  background:var(--blue-tint);border-radius:10px;padding:10px 12px;margin-top:8px;
}
.zuord-neu label{display:block;font-size:12px;font-weight:700;color:var(--blue);margin-bottom:3px}
.zuord-neu input,.zuord-neu select{
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:14px;background:var(--surface);
}
.zuord-neu .zn-name{flex:1;min-width:170px}
.zuord-neu .zn-name input{width:100%}
.zuord-neu .zn-thema{min-width:170px}

/* Ergebnis der Verbindungsprobe */
.pruef-kasten{
  display:flex;flex-direction:column;gap:4px;
  border-radius:10px;padding:12px 14px;margin-top:10px;border:1px solid;
}
.pruef-kasten.gut{background:var(--green-tint);border-color:var(--green-ink)}
.pruef-kasten.gut strong{color:var(--green-ink)}
.pruef-kasten.schlecht{background:var(--red-tint);border-color:var(--red)}
.pruef-kasten.schlecht strong{color:var(--red)}
.pruef-kasten .adm-note{margin:0}

/* Hinweis- und Rueckfragefenster */
#sagModal .modal{max-width:520px}
.sag-text p{font-size:15px;color:var(--ink);margin:0 0 8px}
.sag-text p:last-child{margin-bottom:0}
.sag-text .sag-luecke{height:6px;margin:0}
.sag-text strong{color:var(--blue)}
/* Es liegt ueber allen anderen Fenstern -- es unterbricht sie ja. */
#sagModal{z-index:200}

/* Zustaendigkeit an einer Aufgabe */
.todo-wer{
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
  font:inherit;font-size:12.5px;color:var(--ink-soft);padding:3px 6px;
  max-width:150px;flex:0 0 auto;
}
.todo-wer:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.todo-item.done .todo-wer{opacity:.6}
.todo-wer-fest{
  font-size:12.5px;font-weight:600;color:var(--blue);
  background:var(--blue-tint);border-radius:999px;padding:2px 9px;flex:0 0 auto;
}
.mt-zugewiesen{
  margin-left:8px;font-size:11px;font-weight:700;color:var(--purple);
  background:#F7EEF6;border-radius:999px;padding:1px 8px;white-space:nowrap;
}
@media (max-width:680px){
  .todo-wer{max-width:110px}
}

.todo-wer-leer{
  font-size:12px;color:var(--ink-soft);font-style:italic;flex:0 0 auto;white-space:nowrap;
}

/* Vorschau eines Zeitplans */
.zp-tabelle{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
.zp-tabelle th{
  text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);padding:4px 8px;border-bottom:1px solid var(--line);
}
.zp-tabelle td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.zp-tabelle tr:last-child td{border-bottom:none}
.zp-tabelle tr.ohne-datum td{color:var(--ink-soft)}
.zp-name{font-weight:600;color:var(--ink)}
.zp-marke{
  margin-left:8px;font-size:11.5px;font-weight:600;color:var(--blue);
  background:var(--blue-tint);border-radius:999px;padding:1px 8px;white-space:nowrap;
}
@media (max-width:680px){
  .zp-tabelle{font-size:13px}
  .zp-tabelle th:nth-child(5),.zp-tabelle td:nth-child(5){display:none}
}

.zp-ziel{
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
  font:inherit;font-size:13px;padding:4px 6px;max-width:230px;width:100%;
}
.zp-treffer{
  display:block;margin-top:3px;font-size:11px;font-weight:700;color:var(--green-ink);
}
@media (max-width:680px){
  .zp-tabelle th:nth-child(4),.zp-tabelle td:nth-child(4){display:none}
  .zp-ziel{max-width:150px}
}

.korb-eintrag.erledigt{opacity:.6}
.korb-name .adm-note{display:block;margin:2px 0 0;font-weight:400}

.korb-alle{
  display:inline-flex;align-items:center;gap:5px;margin-left:8px;
  font-size:12.5px;color:var(--blue);cursor:pointer;white-space:nowrap;
}
.korb-fremd{
  margin-left:6px;font-size:11px;font-weight:700;color:var(--purple);
  background:#F7EEF6;border-radius:999px;padding:1px 8px;white-space:nowrap;
}

/* Frist an einer Aufgabe */
.todo-frist{
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
  font:inherit;font-size:12.5px;color:var(--ink-soft);padding:3px 6px;flex:0 0 auto;
}
.todo-frist.spaet,.todo-frist-fest.spaet{border-color:var(--red);color:var(--red)}
.todo-frist-fest{
  font-size:12.5px;color:var(--ink-soft);white-space:nowrap;flex:0 0 auto;
}
.todo-item.done .todo-frist{opacity:.6}
.ms-wer{
  margin-left:8px;font-size:11.5px;font-weight:600;color:var(--blue);
  background:var(--blue-tint);border-radius:999px;padding:1px 8px;white-space:nowrap;
}
.ms-date.spaet{color:var(--red);font-weight:600}
.mt-art{
  margin-left:8px;font-size:11px;font-weight:700;color:var(--blue);
  background:var(--blue-tint);border-radius:999px;padding:1px 8px;white-space:nowrap;
}
.mt-frist{
  margin-left:8px;font-size:11.5px;color:var(--ink-soft);white-space:nowrap;
}
.mt-frist.spaet{color:var(--red);font-weight:700}
@media (max-width:680px){
  .todo-frist{max-width:120px}
}

.mk-wartet{
  margin-left:8px;font-size:11px;font-weight:700;color:var(--yellow-ink);
  background:var(--yellow-tint);border-radius:999px;padding:1px 8px;white-space:nowrap;
}

/* ---------- Unterlagen (Dokumente an Projekt oder Oberthema) ---------- */
.dok-liste{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.dok-zeile{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;
}
.dok-art{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--blue-tint);color:var(--blue);border-radius:999px;padding:2px 9px;
  white-space:nowrap;
}
.dok-titel{
  flex:1;min-width:180px;text-align:left;font:inherit;font-weight:600;
  color:var(--blue);background:none;border:none;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;
}
.dok-titel:hover{text-decoration-color:var(--blue)}
.dok-meta{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.dok-zeile .btn{white-space:nowrap}
.dok-aktionen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.dok-hinweis{font-size:12.5px;color:var(--ink-soft)}
.dok-status{font-size:13.5px;color:var(--blue);margin-top:8px;min-height:18px}
.dok-text{
  margin:12px 0;max-height:min(58vh,560px);overflow-y:auto;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);
  padding:16px 18px;font-size:14.5px;line-height:1.65;
  white-space:pre-wrap;word-break:break-word;
}

/* Fundstellen in Unterlagen, unter der Suchleiste */
.dok-treffer{
  border:1px solid var(--line);border-left:3px solid var(--yellow);
  border-radius:10px;background:var(--surface);padding:14px 18px;margin-bottom:16px;
}
.dok-treffer h3{
  font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--blue);
  margin-bottom:10px;
}
.dt-eintrag{padding:9px 0;border-top:1px solid var(--line)}
.dt-eintrag:first-of-type{border-top:none;padding-top:0}
.dt-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dt-wo{font-size:12.5px;color:var(--ink-soft)}
.dt-orig{font-size:12.5px;color:var(--blue);white-space:nowrap}
.dt-stelle{
  font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin-top:5px;
  padding-left:10px;border-left:2px solid var(--line);
}
.dt-nr{
  display:inline-block;font-size:11px;font-weight:700;color:var(--gray-ink);
  background:var(--gray-tint);border-radius:999px;padding:1px 8px;margin-right:7px;
  white-space:nowrap;
}
@media (max-width:680px){
  .dok-meta{white-space:normal}
  .dok-titel{min-width:140px}
}

/* Quellenangabe unter einer KI-Antwort */
.chat-quellen{
  font-size:12.5px;color:var(--ink-soft);margin:-2px 0 10px;line-height:1.6;
}
.chat-quelle{
  font:inherit;font-weight:600;color:var(--blue);background:none;border:none;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}

/* Haken „auch als Unterlage ablegen“ im Posteingang */
.eingang-ablegen{
  display:flex;align-items:flex-start;gap:8px;margin:10px 0 2px;
  font-size:13.5px;color:var(--ink-soft);line-height:1.5;
}
.eingang-ablegen strong{color:var(--ink)}

/* Marke „gibt es schon“ an einem Vorschlag */
.vs-doppelt{
  display:inline-block;margin-left:8px;font-size:11px;font-weight:700;
  color:var(--yellow-ink);background:var(--yellow-tint);
  border-radius:999px;padding:1px 8px;white-space:nowrap;vertical-align:middle;
}

/* ---------- Balkenplan (Gantt) ---------- */
.gantt{
  --gt-name:230px;
  overflow-x:auto;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);margin:12px 0 6px;
}
.gt-kopf,.gt-zeile{display:flex;align-items:stretch;min-width:max-content}
.gt-kopf{
  position:sticky;top:0;z-index:3;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.gt-name{
  width:var(--gt-name);min-width:var(--gt-name);padding:6px 10px;
  font-size:13px;line-height:1.35;color:var(--ink);
  border-right:1px solid var(--line);background:var(--surface);
  position:sticky;left:0;z-index:2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gt-ecke{background:var(--bg);font-weight:700;color:var(--blue)}
.gt-spur{position:relative;width:var(--gt-spur);min-width:var(--gt-spur)}
.gt-achse{display:flex}
.gt-monat{
  width:var(--gt-breite);min-width:var(--gt-breite);padding:4px 0 5px;
  text-align:center;font-size:10.5px;color:var(--ink-soft);
  border-left:1px solid transparent;
}
.gt-monat.jahr-start{border-left:1px solid var(--line)}
.gt-jahr{display:block;font-size:10px;font-weight:700;color:var(--blue)}
.gt-mon{display:block}
.gt-koerper .gt-zeile{border-top:1px solid var(--line);min-height:26px}
.gt-koerper .gt-zeile:hover .gt-name{background:var(--blue-tint)}
.gt-projektzeile .gt-name{font-weight:700;color:var(--blue)}
.gt-gruppe .gt-name{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);background:var(--bg);
}
.gt-gruppe{min-height:22px}
.gt-balken{
  position:absolute;top:6px;height:13px;border-radius:7px;
  background:var(--blue);opacity:.85;
}
.gt-balken.sammel{background:var(--purple);height:9px;top:8px;border-radius:5px}
.gt-balken.fertig{background:var(--green-ink);opacity:.55}
.gt-balken.spaet{background:var(--red)}
.gt-raute{
  position:absolute;top:7px;width:12px;height:12px;
  background:var(--blue);transform:rotate(45deg);border-radius:2px;
}
.gt-raute.fertig{background:var(--green-ink);opacity:.6}
.gt-raute.spaet{background:var(--red)}
.gt-heute{
  position:absolute;top:0;bottom:-2000px;width:2px;background:var(--red);
  opacity:.55;z-index:1;pointer-events:none;
}
.gt-legende{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-soft);margin-bottom:4px;
}
.gt-lg{display:inline-block;width:16px;height:9px;border-radius:5px;margin-left:10px}
.gt-lg:first-child{margin-left:0}
.gt-lg.balken{background:var(--blue)}
.gt-lg.raute{width:10px;height:10px;border-radius:2px;background:var(--blue);transform:rotate(45deg)}
.gt-lg.fertig{background:var(--green-ink);opacity:.55}
.gt-lg.spaet{background:var(--red)}
.gt-lg.heute{width:2px;height:13px;background:var(--red);border-radius:0}
.gantt-modal{max-width:min(1180px,96vw)}
@media (max-width:680px){
  .gantt{--gt-name:132px}
}
/* Beim Drucken zaehlt der Plan, nicht die Bedienung. */
@media print{
  body > *:not(.modal-overlay){display:none !important}
  .modal-overlay{position:static;display:block;background:none;padding:0}
  .modal-overlay:not(.show){display:none !important}
  .modal{box-shadow:none;max-width:100%;max-height:none}
  .modal-actions,.focus-close,.gt-legende button{display:none !important}
  .gantt{overflow:visible;border-color:#999}
  .gt-heute{bottom:0}
}

/* ---------- Meilenstein: Zeitpunkt oder Zeitraum ---------- */
.ms-art{
  flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink-soft);font-size:13px;line-height:1;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.ms-art:hover{border-color:var(--blue);color:var(--blue)}
.ms-art.spanne{background:var(--blue-tint);border-color:var(--blue);color:var(--blue)}
.ms-art:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.edit-row .ms-von{border-color:var(--blue);background:#FBFDFF}
.ms-dauer{
  flex:none;font-size:11.5px;font-weight:700;color:var(--blue);
  background:var(--blue-tint);border-radius:999px;padding:2px 8px;white-space:nowrap;
}
.add-row .ms-von{border-style:dashed}
/* Der Zeitraum darf im Termin-Text umbrechen, statt die Zeile zu sprengen. */
.ms-date{white-space:nowrap}
@media (max-width:680px){
  .ms-date{white-space:normal}
}

/* Optionaler Projekt-Tipp vor der KI-Auswertung */
.eingang-tipp{
  display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-soft);margin-right:4px;
}
.eingang-tipp select{
  border:1px solid var(--line);border-radius:8px;padding:5px 8px;
  font:inherit;font-size:13px;background:var(--surface);max-width:min(280px,52vw);
}
.eingang-tipp select:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

/* Rohantwort der KI, wenn das Format nicht stimmte */
.ki-roh{margin:6px 0 10px;font-size:12.5px;color:var(--ink-soft)}
.ki-roh summary{cursor:pointer;color:var(--blue);font-weight:600}
.ki-roh pre{
  margin-top:6px;max-height:220px;overflow:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:12px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
}

/* Nebensächlicher Knopf -- "Passwort vergessen?" soll nicht mit "Anmelden"
   um Aufmerksamkeit ringen. */
.btn.schlicht{
  border-color:transparent;background:none;color:var(--ink-soft);
  padding-left:0;padding-right:0;font-weight:500;
}
.btn.schlicht:hover{color:var(--blue);text-decoration:underline;background:none}

/* Rückmeldung zur Passwortgüte */
#npwGuete{margin-top:6px;min-height:16px}

/* ---------- Konten (nachgebaut aus MD-Assist) ----------

   Vorher trug jede Zeile sechs Eingabefelder, war acht Spalten breit und
   brach auf mehrere Höhen um. Jetzt vier Spalten -- Name, E-Mail, Rolle,
   Stand -- und alles Seltene hinter dem Klick auf die Zeile. */
.karte-kopf{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px;
}
.karte-kopf h4{margin:0}
.abschnitt-zusatz{font-size:12.5px;color:var(--ink-soft)}

.konto-suche{
  width:100%;max-width:340px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;
  font:inherit;font-size:14px;background:var(--surface);
}
.konto-suche:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

.datentabelle{
  width:100%;border-collapse:collapse;font-size:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;
}
.datentabelle thead th{
  text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);
  padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg);
}
.datentabelle td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:middle}
.datentabelle tbody tr:first-child td{border-top:none}

.datentabelle.konten tr.konto-zeile{cursor:pointer}
.datentabelle.konten tr.konto-zeile:hover,
.datentabelle.konten tr.konto-zeile:focus-visible{background:var(--blue-tint);outline:none}
.datentabelle.konten tr.still{opacity:.55}
.konto-name{font-weight:600}
.konto-login,
.datentabelle.konten td.konto-mail{color:var(--ink-soft);font-size:12px}
/* Die Marken tragen Text ("2FA fehlt"): eine Pille je Marke, nebeneinander
   und umbrechend. */
.datentabelle.konten td.konto-stand{white-space:normal}
.datentabelle.konten .marke{
  display:inline-block;font-size:10.5px;line-height:1.7;font-weight:700;
  padding:1px 8px;border-radius:999px;white-space:nowrap;margin:2px 4px 2px 0;
  background:var(--gray-tint);color:var(--gray-ink);
}
.datentabelle.konten .marke.warnung{background:var(--yellow-tint);color:var(--yellow-ink)}
.datentabelle.konten .marke.fehler{background:var(--red-tint);color:var(--red)}
.datentabelle.konten .marke.unklar{background:var(--gray-tint);color:var(--gray-ink)}
.hinweis-klein{font-size:12.5px;color:var(--ink-soft);margin-top:8px}

/* Kennzahlen im Kopf eines Fensters: Beschriftung klein davor, Wert dahinter */
.kennzahlen{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin:2px 0 14px;
  font-size:13px;
}
.kennzahlen span{display:inline-flex;align-items:baseline;gap:6px}
.kennzahlen i{font-style:normal;font-size:11.5px;color:var(--ink-soft)}
.kennzahlen b{color:var(--ink);font-weight:600}
.kennzahlen:empty{display:none}

/* Die Handlungen zu einem Konto: untereinander, jede mit ihrem Satz. Was
   sie bewirkt, steht dabei -- wer den zweiten Faktor zurücksetzt, soll es
   vorher wissen. */
.dialog-menue{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.dialog-menue-eintrag{
  display:block;width:100%;text-align:left;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;
}
.dialog-menue-eintrag:hover{border-color:var(--blue);background:var(--blue-tint)}
.dialog-menue-eintrag:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.dialog-menue-eintrag b{display:block;font-size:14px}
.dialog-menue-eintrag i{
  display:block;margin-top:2px;font-style:normal;font-size:12px;
  color:var(--ink-soft);line-height:1.5;
}
.dialog-menue-eintrag.gefahr b{color:var(--red)}
.dialog-menue-eintrag.gefahr:hover{border-color:var(--red);background:var(--red-tint)}

@media (max-width:680px){
  /* Auf dem Handy trägt die Rolle die wenigste Information -- sie geht
     zuerst. Name, E-Mail und Stand bleiben. */
  .datentabelle.konten th:nth-child(3),
  .datentabelle.konten td:nth-child(3){display:none}
  .datentabelle{font-size:13px}
  .datentabelle td,.datentabelle thead th{padding:8px 9px}
  /* Lange Adressen umbrechen und Marken untereinander -- sonst zwingen sie
     die Tabelle breiter als das Fenster. */
  .datentabelle.konten td.konto-mail{overflow-wrap:anywhere}
  .datentabelle.konten .marke{white-space:normal}
}