/* app-w8.css — UX-Politur der Welle 8 (Strang U8): Hover-Blase, Skelette,
   Toast, weicher Ansichtswechsel, Fragezeichen-Knopf, Drop-Zone, Tippziele.

   Eigene Datei statt Anhängen an app.css/huelle.css (beide an der 700er-Grenze,
   G6). Farben kommen wie überall aus den Variablen in app.css. */

/* --- Ansicht „Rechte" zeigen (Punkt A3) ------------------------------------
   Dieselbe Regel wie in huelle.css für die anderen Ansichten
   (`body[data-ansicht="X"] #ansichtX { display: block; }`) — huelle.css
   gehört dieser Runde nicht U8b, darum steht die Zeile hier. */
body[data-ansicht="rechte"] #ansichtRechte { display: block; flex: 1; min-height: 0; overflow-y: auto; }

/* --- Hover-Blase (app-hover.js) -------------------------------------------- */
.w8HoverBlase { position: fixed; z-index: 500; max-width: 280px; padding: 6px 10px;
  border-radius: var(--rundKlein); background: var(--kopf); color: var(--bg);
  font: 400 12.5px var(--schrift); line-height: 1.4; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.22); }

/* --- Skelette statt „lade …" (app-skelett.js) ------------------------------ */
.w8Skelett { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.w8SkelettZeile { height: 13px; width: var(--w8-breite, 70%); border-radius: 6px;
  background: linear-gradient(90deg, var(--zeile) 25%, var(--panel) 50%, var(--zeile) 75%);
  background-size: 200% 100%; animation: w8Schimmer 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .w8SkelettZeile { animation: none; } }
.keine-animation .w8SkelettZeile { animation: none; }
@keyframes w8Schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.w8SkelettNeuLaden { margin-top: 12px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--linie); border-radius: var(--rundKlein); background: var(--panel);
  color: var(--text); font: 500 13px var(--schrift); cursor: pointer; }
.w8SkelettNeuLaden:hover, .w8SkelettNeuLaden:focus-visible { border-color: var(--gold); outline: none; }

/* --- Toast (app-kosten-blasen.js: toast()) --------------------------------- */
.w8ToastStapel { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 600; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; }
.w8Toast { display: flex; align-items: center; gap: 12px; min-height: 40px;
  padding: 0 16px; border-radius: 999px; background: var(--kopf); color: var(--bg);
  font: 500 13.5px var(--schrift); box-shadow: 0 8px 24px rgba(0,0,0,.28);
  pointer-events: auto; animation: w8ToastAuf .16s ease; }
@media (prefers-reduced-motion: reduce) { .w8Toast { animation: none; } }
.keine-animation .w8Toast { animation: none; }
@keyframes w8ToastAuf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.w8ToastRueckgaengig { background: transparent; border: 0; color: var(--goldText);
  font: 600 13px var(--schrift); cursor: pointer; padding: 4px 0; }
.w8ToastRueckgaengig:hover, .w8ToastRueckgaengig:focus-visible { text-decoration: underline; outline: none; }

/* --- Weicher Ansichtswechsel (huelle.js: setzeAnsicht) --------------------- */
.ansichtWechselt { animation: w8Einblenden 120ms ease; }
@media (prefers-reduced-motion: reduce) { .ansichtWechselt { animation: none; } }
.keine-animation .ansichtWechselt { animation: none; }
@keyframes w8Einblenden { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --- Phasenzeile bei langer Wartezeit (app-senden.js) ---------------------- */
.w8PhaseZeile { margin-top: 6px; font-size: 12px; color: var(--dim); }

/* --- Fragezeichen statt Textwand (U-a, Muster abHinweisKnopf) -------------- */
.abHinweisKnopf { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid var(--linie);
  background: transparent; color: var(--dim); cursor: pointer; margin-left: 6px; }
.abHinweisKnopf .ikon { width: 13px; height: 13px; }
.abHinweisKnopf:hover, .abHinweisKnopf:focus-visible { color: var(--text); border-color: var(--gold); outline: none; }
.abHinweisText { margin-top: 8px; padding: 10px 12px; border-radius: var(--rundKlein);
  background: var(--zeile); color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.abHinweisKurz { color: var(--dim); font-size: 12.5px; }

/* --- Titel umbenennen (huelle.js: Doppelklick im Kopf) --------------------- */
.ansichtTitelFeld { font: inherit; font-weight: 700; color: var(--kopf); background: var(--panel);
  border: 1px solid var(--gold); border-radius: 6px; padding: 0 6px; min-height: 28px;
  width: min(60vw, 420px); }
.ansichtTitelFeld:focus-visible { outline: none; }

/* --- Admin-Bereich beruhigt (huelle-admin.js: adminBeruhigen) -------------- */
.w8Falte { border: 1px solid var(--linie); border-radius: var(--rund); margin-bottom: 12px;
  background: var(--panel); overflow: hidden; }
.w8Falte > summary { list-style: none; cursor: pointer; padding: 12px 16px;
  font: 700 14px var(--schrift); color: var(--kopf); display: flex; align-items: center;
  min-height: 44px; }
.w8Falte > summary::-webkit-details-marker { display: none; }
.w8Falte > summary::before { content: ""; width: 0; height: 0; margin-right: 9px;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 6px solid currentColor; transition: transform .12s ease; }
.w8Falte[open] > summary::before { transform: rotate(90deg); }
.w8Falte > *:not(summary) { padding: 0 16px 16px; }

/* --- Ablage: Drop-Zone (huelle-ablage.js) ---------------------------------- */
.ablageDropZone { display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px; margin-bottom: 12px; padding: 14px; border: 1px dashed var(--randStark);
  border-radius: var(--rund); color: var(--dim); font-size: 13px; text-align: center; }
.ablageDropZone .ikon { width: 18px; height: 18px; }
.ablageDropZone.ueber { border-color: var(--gold); color: var(--goldText);
  background: color-mix(in srgb, var(--gold) 8%, transparent); }

/* --- Anlegen ohne alten Verlauf (Punkt C5, Runde 3) -------------------------
   Anders als `keinGespraech` (blendet jedes `aside` aus, auch das gerade
   geöffnete Anlege-Panel) trifft diese Klasse NUR Verlauf und Eingabe. */
body.anlegen #verlauf, body.anlegen #eingabe { display: none; }

/* --- Tippziele 44px (U-d, Punkt 13) unter dem kleinsten Breakpoint -------- */
@media (max-width: 390px) {
  .aktion, .zAktion, .wlKnopf { min-height: 44px; }
}

/* --- Admin-Reiter „Mehr" (N7, Runde 2) -------------------------------------- */
.adminMehrKnopf { display: inline-flex; align-items: center; gap: 4px; }
.adminMehrKnopf::after { content: "▾"; font-size: 10px; }
.adminMehrKnopf[aria-expanded="true"]::after { content: "▴"; }
.adminMehrListe { display: inline-flex; gap: 6px; }
.adminMehrListe[hidden] { display: none; }

/* --- Ansicht Rechte (Runde 2, Punkt A3, huelle-rechte.js) ------------------ */
.rechteAufklappKnopf { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 4px 0; background: transparent; border: 0; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.rechtePfeil { flex: none; width: 12px; height: 12px; display: grid; place-items: center;
  color: var(--dim); transition: transform .12s ease; }
.rechteAufklappKnopf.offen .rechtePfeil { transform: rotate(90deg); }
.rechteNameWoerter { display: flex; flex-direction: column; gap: 1px; }
.rechteName { font-weight: 600; }
.rechteRolle { font-size: 12px; color: var(--dim); }
.rechteMarkeKlein { font-size: 10.5px; color: var(--goldText); border: 1px solid var(--gold);
  border-radius: 999px; padding: 1px 7px; width: fit-content; }
.rechteDetailZeile td { background: var(--zeile); }
.rechteDetail { padding: 10px 4px; }

/* --- Sonderrunde „Symbole statt Text", Punkt 1: Rechte als Chips ----------- */
.rechteChips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rechteChip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px;
  padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--linie); background: var(--panel);
  color: var(--text); font-size: 12.5px; cursor: default; }
.rechteChip .ikon { width: 13px; height: 13px; flex: none; }
.rechteChip.entziehbar { cursor: pointer; }
.rechteChip.entziehbar:hover, .rechteChip.entziehbar:focus-visible {
  border-color: var(--warn, #e2725b); color: var(--warnText, var(--warn)); outline: none; }
.rechteChip:disabled { cursor: default; }
/* Herkunft als Randfarbe (gold: vom Inhaber gesetzt, orange: aus alter
   Vorgabe, grau: aus Rolle oder Meeting) — das Wort steht nur im Hover. */
.rechteChip.rand-gold { border-color: var(--gold); }
.rechteChip.rand-orange { border-color: var(--warn, #e2725b); }
.rechteChip.rand-grau { border-color: var(--linie); color: var(--dim); }
.rechtePlusKnopf, .rechteChip-rest { border-style: dashed; color: var(--dim); cursor: pointer; }
.rechtePlusKnopf:hover, .rechtePlusKnopf:focus-visible,
.rechteChip-rest:hover, .rechteChip-rest:focus-visible {
  border-color: var(--gold); color: var(--goldText); outline: none; }
.rechteFreigebenWrap { display: inline-flex; }
.rechteRest { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; }
.rechteRest[hidden] { display: none; }

/* --- Sonderrunde Punkt 2: EIN Umschalt-Knopf je Projekt-Zelle -------------- */
.rechteUmschaltKnopf { display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 8px; border: 1px solid var(--linie); background: transparent; cursor: pointer; }
.rechteUmschaltKnopf .ikon { width: 15px; height: 15px; }
.rechteUmschaltKnopf.zugang-gruen { color: var(--gruen, #5fbf7f); border-color: var(--gruen, #5fbf7f); }
.rechteUmschaltKnopf.zugang-rot { color: var(--warn, #e2725b); border-color: var(--warn, #e2725b); }
.rechteUmschaltKnopf.zugang-grau { color: var(--dim); }
.rechteUmschaltKnopf:hover, .rechteUmschaltKnopf:focus-visible { outline: none; opacity: .8; }

/* --- O8: der Öffentlich-Umschalter im Spaltenkopf, ein Symbol, kein Wort -- */
.rechteProjektKopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rechteOeffentlichKnopf { display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 8px; border: 1px solid var(--linie); background: transparent; cursor: pointer;
  color: var(--dim); flex: none; }
.rechteOeffentlichKnopf .ikon { width: 13px; height: 13px; }
.rechteOeffentlichKnopf.an { color: var(--gold); border-color: var(--gold); }
.rechteOeffentlichKnopf:hover, .rechteOeffentlichKnopf:focus-visible { outline: none; opacity: .8; }

/* --- Eigene Ansichten (ansichten.js, 17.10.2026) ---------------------------- */
body[data-ansicht="ansicht"] #ansichtMeine { display: block; flex: 1; min-height: 0; overflow-y: auto; }
.navAnsichten { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.navAnsichtenKopf { font-size: 11.5px; color: var(--dim); padding: 4px 10px 2px; letter-spacing: .02em; }
.navAnsichtNeu { color: var(--dim); }
.navAnsichtFeld { margin: 2px 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linie); font: inherit; }
.navAnsichtFeld.fehlt { border-color: #D85A30; }
#meineInhalt .anWeg.scharf { color: #b3261e; }
#meineInhalt.ansichtBahn { padding-bottom: 6px; }   /* sonst rechnet der Desktop am Rand vorbei: ein Scrollbalken */
#meineInhalt .prommKopf { justify-content: flex-end; min-height: 0; margin: 0 0 6px; padding: 0; border: 0; gap: 6px; }
#meineInhalt .prommKopf .prommKopfTitel { display: none; }
/* Der Desktop passt die Zeilen in die Höhe ein; Rundung auf ganze Pixel ließ zwei Pixel überstehen und damit einen
   Scrollbalken. Auf breiten Schirmen gibt es darum keinen; auf dem Telefon stapeln die Widgets und dürfen rollen. */
@media (min-width: 701px) { body[data-ansicht="ansicht"] #ansichtMeine[data-raster="1"] { overflow-y: hidden; } }

/* --- Mein Bereich (meinbereich.js, 18.10.2026) ------------------------------ */
.navMeinBereich { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.navMeinBereich[hidden] { display: none; }
.navMeinKopf.offen { font-weight: 600; }
.mbZone { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border: 2px dashed var(--linie);
  border-radius: 14px; color: var(--dim); cursor: pointer; transition: border-color .2s, background .2s; }
.mbZone.drauf, .mbZone:hover { border-color: #1D9E75; background: rgba(29,158,117,.06); color: #0F6E56; }
.mbZoneBild svg, .mbHinweisBild svg, .mbRolleBild svg { width: 22px; height: 22px; }
.mbMeldung { min-height: 1.2em; font-size: 12.5px; color: var(--dim); margin: 6px 0; }
.mbDateien { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mbDatei { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--linie);
  border-radius: 12px; background: var(--flaeche, #fff); }
.mbDateiBild { height: 72px; display: grid; place-items: center; border-radius: 8px; background: rgba(127,119,221,.08); color: #534AB7; overflow: hidden; }
.mbDateiBild svg { width: 30px; height: 30px; }
.mbDateiBild img { width: 100%; height: 100%; object-fit: cover; }
.mbDateiName { text-align: left; font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.mbDateiMass { font-size: 11.5px; color: var(--dim); }
.mbDateiWeg { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; display: grid;
  place-items: center; background: transparent; color: var(--dim); opacity: 0; }
.mbDatei:hover .mbDateiWeg, .mbDateiWeg.scharf { opacity: 1; }
.mbDateiWeg.scharf { color: #b3261e; background: rgba(216,90,48,.12); }
.mbDateiWeg svg { width: 14px; height: 14px; }
.mbHinweis { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(127,119,221,.08);
  color: #3C3489; font-size: 13px; margin-bottom: 10px; }
.mbSteckbriefFeld { width: 100%; box-sizing: border-box; min-height: 46vh; padding: 12px; border-radius: 12px; border: 1px solid var(--linie);
  font: inherit; line-height: 1.55; resize: vertical; }
.mbRolle { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mbRolleBild { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(29,158,117,.12); color: #0F6E56; }
.mbRolleWort { font-size: 20px; font-weight: 600; }
.mbLeise { font-size: 12.5px; color: var(--dim); }
.mbRechte { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mbGruppe { border: 1px solid var(--linie); border-radius: 12px; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.mbGruppeKopf { width: 100%; display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; }
.mbGruppeZahl { font-weight: 500; color: var(--dim); }
.mbRecht, .mbProjekt { font-size: 12px; padding: 3px 8px; border-radius: 8px; }
.mbRecht.ja, .mbProjekt.ja { background: rgba(29,158,117,.14); color: #085041; }
.mbRecht.nein, .mbProjekt.nein { background: rgba(0,0,0,.04); color: var(--dim); text-decoration: line-through; }
.mbProjekte { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 6px; }
.mbArbeit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.mbSpalte h3 { font-size: 14px; margin: 0 0 8px; }
.mbWartet { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: 13px; }
.mbWartet input { accent-color: #1D9E75; }
.mbWartetTitel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbChip { font-size: 11.5px; padding: 2px 7px; border-radius: 7px; background: rgba(127,119,221,.12); color: #3C3489; }
.mbZeile { display: flex; gap: 8px; margin-top: 10px; }
.mbTitelFeld { flex: 1; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linie); font: inherit; }
.mbTitelFeld.fehlt { border-color: #D85A30; }
.mbHaupt { padding: 6px 14px; border-radius: 8px; border: 0; background: #1D9E75; color: #fff; font: inherit; cursor: pointer; }
.mbVorschlag { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: 13px; }
.mbZustand { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--dim); }
.mbZustand.z-offen { background: #EF9F27; animation: dvPuls 2s ease-in-out infinite; }
.mbZustand.z-angenommen { background: #1D9E75; }
.mbZustand.z-abgelehnt { background: #D85A30; }
/* Mein Bereich als eine Liste mit den Reitern (18.10.2026) */
#navMeinBereich { margin-top: -2px; }
.navEigen { position: relative; }
.navEigenMarke { margin-left: auto; display: inline-grid; place-items: center; color: #1D9E75; }
.navEigenMarke svg { width: 13px; height: 13px; }
.navNeuWahl { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 10px; background: rgba(127,119,221,.07); }
.mbFach { font-size: 14px; margin: 16px 0 8px; }
.mbFach:first-child { margin-top: 0; }
.mbProjektFach { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mbProjektFach .mbDateien { width: 100%; }
.mbProjektKopf { display: flex; align-items: baseline; gap: 8px; }
.mbRechteTeil .mbRolle { margin-top: 4px; }
.mbRollen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.mbRollenBild { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(29,158,117,.14); color: #1D9E75; }
.mbRollenBild svg { width: 15px; height: 15px; }
.mbRolleMarke { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: rgba(29,158,117,.12); color: var(--text); font-size: 13px; }
.mbRolleWeg { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
.mbRolleWeg:hover { color: #D85A30; }
.mbRolleNeu { border: 1px dashed var(--linie); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px;
  background: transparent; color: var(--text); min-width: 260px; }

/* --- Das Menü steht fest (Flow, 18.10.2026) ---------------------------------
   „Ich will echt nicht die Menü-Leiste scrollen müssen … Scrollbar maximal innerhalb der Reiter des eigenen Bereiches,
   weil da eine dynamische Menge machbar sein muss. Aber die festen Reiter sollten fest auf ihrer Position bleiben.“
   Das Menü rollt nie; die Liste unter „Mein Bereich“ (Reiter des Projekts und die eigenen Einträge) nimmt den freien
   Platz und rollt in sich, alle festen Punkte darüber und darunter bleiben stehen. Am oberen oder unteren Rand liegt
   das Menü quer; dort reiht sich die Liste ein wie bisher. */
body:not([data-menuerand="oben"]):not([data-menuerand="unten"]) #seitenmenue { overflow-y: hidden; }
body:not([data-menuerand="oben"]):not([data-menuerand="unten"]) .navFlach {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body:not([data-menuerand="oben"]):not([data-menuerand="unten"]) .navFlach > * { flex: none; }
body:not([data-menuerand="oben"]):not([data-menuerand="unten"]) .navFlach > .navListe {
  flex: 0 1 auto; min-height: 60px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
body[data-menuerand="oben"] .navListe, body[data-menuerand="unten"] .navListe { display: contents; }
/* Das Menü ist so hoch wie das Fenster: Erst dann hat die Liste ihren Platz, und Konto und Fuß stehen unten fest. */
@media (min-width: 901px) {
  body:not([data-menuerand="oben"]):not([data-menuerand="unten"]) #seitenmenue {
    height: 100vh; max-height: 100vh; box-sizing: border-box; position: sticky; top: 0; display: flex; flex-direction: column; }
}

/* Anheften (Hierarchie Stufe 2, 18.10.2026): die Wahl am Kopf einer eigenen Ansicht und die Marke des Gebers */
.mbAnheftWahl { position: fixed; z-index: 60; width: 232px; max-height: 60vh; overflow-y: auto; padding: 6px;
  border-radius: 12px; border: 1px solid var(--linie); background: var(--panel); box-shadow: var(--schatten);
  display: flex; flex-direction: column; gap: 2px; }
.mbAnheftZeile { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.mbAnheftZeile:hover { background: var(--zeile, rgba(127,119,221,.08)); }
.mbAnheftZeile svg { width: 15px; height: 15px; flex: none; color: var(--dim); }
.mbAnheftZeile span:first-of-type { flex: 1; min-width: 0; }
.mbAnheftHaken { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--linie); flex: none; }
.mbAnheftZeile.an .mbAnheftHaken { background: #1D9E75; border-color: #1D9E75; box-shadow: inset 0 0 0 3px var(--panel); }
.mbAnheftZeile.an svg { color: #1D9E75; }
.zAktion.angeheftet { color: #1D9E75; position: relative; }
.zAktion.angeheftet .navZahl { position: absolute; top: -5px; right: -6px; transform: scale(.85); }
.mbAngeheftetVon { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); margin-right: 6px; }
.mbAngeheftetVon svg { width: 14px; height: 14px; color: #1D9E75; }
.navAngeheftet svg { color: #1D9E75; }

/* Protokoll (Hierarchie Stufe 3, 18.10.2026) */
.mbPkLeiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.mbPkGruppe { display: flex; flex-wrap: wrap; gap: 4px; }
.mbPkExport { margin-left: auto; }
.mbPkFilter { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie); background: transparent; color: var(--dim); font: inherit; font-size: 12px; text-decoration: none; }
.mbPkFilter svg { width: 13px; height: 13px; color: var(--pkFarbe, var(--dim)); }
.mbPkFilter.an { color: var(--text); border-color: var(--pkFarbe, var(--goldhell, #a78bfa));
  background: color-mix(in srgb, var(--pkFarbe, #7F77DD) 16%, transparent); }
.mbPkSchild { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.mbPkSchild svg { width: 17px; height: 17px; }
.mbPkSchild.heil { color: #1D9E75; background: rgba(29,158,117,.14); }
.mbPkSchild.gebrochen { color: #E24B4A; background: rgba(226,75,74,.14); animation: plPuls 1.4s ease-in-out infinite; }
.mbPkListe { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--linie); display: flex;
  flex-direction: column; gap: 2px; }
.mbPkZeile { position: relative; display: grid; grid-template-columns: 28px auto 1fr auto; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 10px; }
.mbPkZeile:hover { background: var(--zeile, rgba(127,119,221,.06)); }
.mbPkZeile::before { content: ''; position: absolute; left: -21px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--pkFarbe); box-shadow: 0 0 0 3px var(--bg, #05060d); }
.mbPkArt { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--pkFarbe);
  background: color-mix(in srgb, var(--pkFarbe) 15%, transparent); }
.mbPkArt svg { width: 14px; height: 14px; }
.mbPkWer { display: inline-flex; align-items: center; gap: 5px; }
.mbPkKopf { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff;
  font-size: 10px; font-weight: 700; }
.mbPkPfeil { color: var(--dim); font-size: 12px; }
.mbPkWas { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.mbPkWas b { font-weight: 600; }
.mbPkDetail { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbPkWann { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.mbPkWeg svg { width: 12px; height: 12px; }

/* Weitergeben (Hierarchie Stufe 4, 18.10.2026) */
.wgbBereich { display: flex; flex-direction: column; gap: 8px; }
.wgbUnter { font-size: 12.5px; color: var(--dim); font-weight: 600; margin: 12px 0 4px; }
.wgbWarnung { color: #EF9F27; }
.wgbVorschlag { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, #7F77DD 45%, transparent); background: color-mix(in srgb, #7F77DD 10%, transparent); }
.wgbFunke svg { width: 16px; height: 16px; color: #a78bfa; }
.wgbRecht { padding: 2px 9px; border-radius: 999px; font-size: 12px; background: color-mix(in srgb, #7F77DD 18%, transparent); color: var(--text); }
.wgbKnopf { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie); background: transparent; color: var(--dim); font: inherit; font-size: 12px; }
.wgbKnopf svg { width: 13px; height: 13px; }
.wgbKnopf.ja { color: #1D9E75; border-color: color-mix(in srgb, #1D9E75 50%, transparent); }
.wgbKnopf:first-of-type { margin-left: auto; }
.wgbRechte, .wgbLeute { display: flex; flex-wrap: wrap; gap: 6px; }
.wgbOptionen { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.wgbBisFeld { border: 1px solid var(--linie); border-radius: 8px; padding: 3px 6px; font: inherit; font-size: 12px; }
.wgbPerson { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie); background: transparent; color: var(--text); font: inherit; font-size: 12.5px; }
.wgbPerson:hover { border-color: #1D9E75; }
.wgbListe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wgbZeile { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 10px; }
.wgbZeile.verwaist { background: color-mix(in srgb, #EF9F27 10%, transparent); }
.wgbMarken { display: inline-flex; gap: 6px; color: var(--dim); font-size: 11.5px; }
.wgbMarke { display: inline-flex; align-items: center; gap: 3px; }
.wgbMarke svg { width: 12px; height: 12px; }
.wgbBaum, .wgbAst { list-style: none; margin: 0; padding: 0; }
.wgbAst { margin-left: 13px; padding-left: 14px; border-left: 2px solid var(--linie); }
.wgbAst > li { position: relative; padding: 3px 0; }
.wgbAst > li::before { content: ''; position: absolute; left: -14px; top: 15px; width: 12px; border-top: 2px solid var(--linie); }
.wgbAst > li.verwaist > .wgbKnoten { opacity: .65; }
.wgbKnoten { display: inline-flex; align-items: center; gap: 6px; }
.wgbWurzel { font-weight: 600; font-size: 13px; }

/* Menü aufgeräumt (19.10.2026): Plus neben „Mein Bereich“, Code mit Unterseiten, Mein-Bereich-Seiten im Kontomenü */
.navZeilePlus { display: flex; align-items: center; gap: 4px; }
.navZeilePlus > .navKnopf { flex: 1; min-width: 0; }
.navPlus { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--dim); }
.navPlus:hover { color: #1D9E75; border-color: var(--linie); background: color-mix(in srgb, #1D9E75 10%, transparent); }
.navPlus[hidden] { display: none; }
.navPlus .ikon { width: 16px; height: 16px; }
.navUnter { padding-left: 28px !important; font-size: 12.5px; }
.cmGruppe { display: flex; flex-direction: column; gap: 1px; }
.cmGruppe:empty { display: none; }
.chipMenue .navKnopf.railKnopf { min-height: 34px; padding: 6px 10px; }
.chipMenue .navKnopf.railKnopf .navZahl { margin-left: auto; }
#menueMeinBereich:not(:empty) + #menueVerwaltung { border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 4px; }
#nutzerChip { position: relative; }
#nutzerChip.hatWartendes::after { content: ''; position: absolute; top: 6px; left: 28px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold, #6366f1); box-shadow: 0 0 0 2px var(--panel); }