/* Mindmap (Physio+) — ruhig und schlicht: weiße Flächen, eine Akzentfarbe, Farbe nur für Äste. */
:root {
  --akzent: #0b6b5f;
  --akzent-hell: #e3f1ee;
  --akzent-dunkel: #08524a;
  --text: #1c2127;
  --grau: #5b6470;
  --leise: #8a929c;
  --rand: #e2e5e9;
  --rand-stark: #c9ced5;
  --flaeche: #ffffff;
  --hinter: #f5f7f9;
  --fehler: #b3261e;
  --fehler-hell: #fcebeb;
  --warn: #8a5a00;
  --warn-hell: #fdf3d8;
  --ok: #2e7d32;
  --radius: 8px;
  --kopf-h: 56px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0; color: var(--text); background: var(--hinter); line-height: 1.5; font-size: 15px;
}
[hidden] { display: none !important; }
h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .75rem; }
a { color: var(--akzent); }
.spacer { flex: 1; }
.hinweis { color: var(--grau); font-size: .9rem; margin: .25rem 0; }
.hinweis.klein { font-size: .8rem; }
.fehler { color: var(--fehler); min-height: 1.2em; margin: 0; font-size: .9rem; }
.leise-text { color: var(--leise); font-size: .85rem; padding: .25rem .75rem; }

/* ---------- Formulare und Knöpfe ---------- */
input, select, textarea {
  font: inherit; color: inherit; padding: .5rem .65rem; border: 1px solid var(--rand-stark);
  border-radius: var(--radius); background: #fff; min-height: 38px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: transparent; }
textarea { resize: vertical; width: 100%; }
button {
  font: inherit; cursor: pointer; padding: .45rem .85rem; min-height: 38px;
  border: 1px solid var(--rand-stark); border-radius: var(--radius); background: #fff; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap;
}
button:hover:not(:disabled) { background: var(--hinter); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
button.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button.primaer:hover:not(:disabled) { background: var(--akzent-dunkel); }
button.leise { border-color: transparent; color: var(--akzent); }
button.gefahr { color: var(--fehler); border-color: #f0c4c1; }
button.gefahr-voll { background: var(--fehler); border-color: var(--fehler); color: #fff; }
button.symbol { padding: .3rem .55rem; min-width: 38px; border-color: transparent; background: transparent; font-size: 1.05rem; text-decoration: none; color: var(--text); }
a.symbol { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; border-radius: var(--radius); text-decoration: none; color: var(--text); font-size: 1.15rem; }
a.symbol:hover { background: var(--hinter); }
button.symbol.klein { min-width: 28px; min-height: 28px; padding: 0 .3rem; font-size: .95rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--grau); }
label.kontroll { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); }
label.kontroll input { min-height: auto; width: 18px; height: 18px; accent-color: var(--akzent); }
.zeile { display: flex; gap: .5rem; flex-wrap: wrap; }
.zeile > select:first-child { flex: 1; min-width: 10rem; }

/* ---------- Logo ---------- */
.logo { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: 1.05rem; white-space: nowrap; }
.logo.gross { font-size: 1.5rem; justify-content: center; margin-bottom: 1.5rem; }
.logo-zeichen {
  width: 26px; height: 26px; display: inline-block;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='10' y='12' width='12' height='8' rx='3' fill='%230b6b5f'/%3E%3Cpath d='M10 16H4M22 16h6M16 12V5M16 20v7' stroke='%230b6b5f' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='4' cy='16' r='2.5' fill='%231d9e75'/%3E%3Ccircle cx='28' cy='16' r='2.5' fill='%23d0602f'/%3E%3Ccircle cx='16' cy='4' r='2.5' fill='%232f7fc1'/%3E%3Ccircle cx='16' cy='28' r='2.5' fill='%23c2417a'/%3E%3C/svg%3E");
}
.logo.gross .logo-zeichen { width: 36px; height: 36px; }

/* ---------- Anmeldung ---------- */
.anmelde-karte {
  max-width: 22rem; margin: 12vh auto; background: #fff; padding: 2rem;
  border: 1px solid var(--rand); border-radius: 14px;
}
.anmelde-karte form { display: flex; flex-direction: column; gap: .9rem; }

/* ---------- Kopfzeile Übersicht ---------- */
.kopf {
  height: var(--kopf-h); display: flex; align-items: center; gap: 1rem; padding: 0 1rem 0 1.25rem;
  background: #fff; border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 20;
}
.suche { flex: 1; max-width: 36rem; margin: 0 auto; }
.suche input { width: 100%; background: var(--hinter); border-color: transparent; }
.avatar {
  width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; border: 0;
  background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.avatar.klein { width: 30px; height: 30px; min-height: 30px; font-size: .75rem; }
.benutzer-menue { position: relative; }

/* ---------- Menüs ---------- */
.menue {
  position: absolute; z-index: 60; min-width: 13rem; background: #fff; border: 1px solid var(--rand);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .3rem; display: flex; flex-direction: column;
}
.benutzer-menue .menue { right: 0; top: calc(100% + 6px); }
.menue.rechts { right: 0; top: calc(100% + 4px); }
.menue.schwebend { position: absolute; }
#export-menue { position: fixed; }
.menue button { justify-content: flex-start; border: 0; background: transparent; min-height: 36px; width: 100%; }
.menue button:hover { background: var(--hinter); }
.menue button.gefahr { color: var(--fehler); }
.menue-kopf { padding: .45rem .8rem .55rem; font-weight: 600; border-bottom: 1px solid var(--rand); margin-bottom: .25rem; }
.aufklapp { position: relative; }

/* ---------- Übersicht ---------- */
.uebersicht-raster { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - var(--kopf-h)); }
.seitenleiste { padding: 1rem .6rem; border-right: 1px solid var(--rand); background: #fff; display: flex; flex-direction: column; gap: 2px; }
.seitenleiste a {
  display: flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: .93rem; min-height: 38px;
}
.seitenleiste a:hover { background: var(--hinter); }
.seitenleiste a.aktiv { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; }
.seitenleiste a.ziel { outline: 2px dashed var(--akzent); background: var(--akzent-hell); }
.seitenleiste a.ordner span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anzahl { color: var(--leise); font-size: .8rem; }
.zaehler { background: var(--akzent); color: #fff; border-radius: 10px; font-size: .72rem; padding: 0 .45rem; margin-left: auto; font-weight: 600; }
.leisten-titel {
  display: flex; align-items: center; justify-content: space-between; margin: 1.1rem .75rem .25rem;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); font-weight: 600;
}
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
#schlagwort-liste { padding: 0 .6rem; }
.chip {
  display: inline-block; padding: .1rem .55rem; border-radius: 20px; background: var(--hinter);
  border: 1px solid var(--rand); font-size: .8rem; color: var(--grau); text-decoration: none; min-height: 0 !important;
}
.seitenleiste a.chip { padding: .1rem .55rem; }
.seitenleiste a.chip.aktiv { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent-dunkel); }
.chip.klein { font-size: .72rem; padding: 0 .45rem; }

.uebersicht-inhalt { padding: 1.5rem 2rem 3rem; min-width: 0; }
.inhalt-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.umschalter { display: inline-flex; border: 1px solid var(--rand-stark); border-radius: var(--radius); overflow: hidden; }
.umschalter button { border: 0; border-radius: 0; min-width: 38px; background: #fff; }
.umschalter button + button { border-left: 1px solid var(--rand-stark); }
.umschalter button.aktiv { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.karte-map {
  position: relative; background: #fff; border: 1px solid var(--rand); border-radius: 12px; overflow: hidden;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.karte-map:hover { border-color: var(--rand-stark); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.vorschau { background: #f8fafb; border-bottom: 1px solid var(--rand); color: var(--grau); }
.vorschau svg { display: block; width: 100%; height: auto; }
.vorschau-wurzel { fill: var(--akzent); }
.vorschau-wurzel-text { fill: #fff; font-weight: 600; }
.karte-text { padding: .65rem .85rem .8rem; }
.kacheln .karte-text { padding-right: 4.6rem; }
.karte-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte-meta { color: var(--grau); font-size: .8rem; margin-top: .1rem; }
.karte-treffer { font-size: .8rem; color: var(--akzent-dunkel); margin-top: .2rem; font-style: italic; }
.karte-text .chips { margin-top: .4rem; }
.neu { background: var(--akzent); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 4px; padding: .05rem .35rem; margin-right: .4rem; vertical-align: 2px; }
.karte-map .stern, .karte-map .mehr { position: absolute; min-width: 32px; min-height: 32px; padding: 0; font-size: 1rem; }
.kacheln .karte-map .mehr { right: .35rem; bottom: .45rem; }
.kacheln .karte-map .stern { right: 2.4rem; bottom: .45rem; color: var(--leise); }
.stern.an { color: #c08a10 !important; }
.kacheln .karte-map .stern:not(.an) { opacity: 0; }
.kacheln .karte-map:hover .stern, .kacheln .karte-map:focus-within .stern { opacity: 1; }

.liste { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; }
.liste .karte-map { display: flex; align-items: center; border: 0; border-radius: 0; border-bottom: 1px solid var(--rand); }
.liste .karte-map:last-child { border-bottom: 0; }
.liste .karte-map:hover { box-shadow: none; background: var(--hinter); }
.liste .vorschau { width: 96px; flex: none; border: 0; border-right: 1px solid var(--rand); }
.liste .karte-text { flex: 1; min-width: 0; padding: .55rem .9rem; }
.liste .karte-map .stern, .liste .karte-map .mehr { position: static; margin-right: .3rem; }

.leer { text-align: center; padding: 4rem 1rem; color: var(--grau); }
.leer h2 { color: var(--text); }
.leer button { margin-top: 1rem; }

.tabelle { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; }
.tabelle th, .tabelle td { padding: .6rem .9rem; text-align: left; border-bottom: 1px solid var(--rand); font-size: .92rem; }
.tabelle th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--leise); font-weight: 600; background: #fafbfc; }
.tabelle tr.inaktiv td { color: var(--leise); }
.tabelle td:last-child { text-align: right; }

/* ---------- Editor ---------- */
#editor { height: 100vh; display: flex; flex-direction: column; background: #fff; }
.editor-kopf {
  height: var(--kopf-h); display: flex; align-items: center; gap: .5rem; padding: 0 .75rem;
  border-bottom: 1px solid var(--rand); flex: none;
}
.titel-eingabe {
  font-weight: 600; font-size: 1.05rem; border-color: transparent; background: transparent;
  min-width: 6rem; width: min(28rem, 40vw); padding: .35rem .5rem;
}
.titel-eingabe:hover:not([readonly]) { border-color: var(--rand); }
.titel-eingabe[readonly] { cursor: default; }
.status { font-size: .82rem; color: var(--leise); white-space: nowrap; }
.status.ok { color: var(--ok); }
.status.ok::before { content: "✓ "; }
.status.fehler { color: var(--fehler); }
.sperr-hinweis {
  background: var(--warn-hell); color: var(--warn); padding: .25rem .65rem; border-radius: var(--radius);
  font-size: .82rem; white-space: nowrap;
}
#favorit-knopf.an { color: #c08a10; }
.banner { display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; font-size: .9rem; flex: none; }
.banner.warnung { background: var(--warn-hell); color: var(--warn); border-bottom: 1px solid #f1dfae; }

.werkzeugleiste {
  display: flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-bottom: 1px solid var(--rand);
  flex: none; overflow-x: auto; scrollbar-width: thin;
}
.werkzeugleiste .gruppe { display: flex; align-items: center; gap: 2px; padding-right: .35rem; margin-right: .1rem; border-right: 1px solid var(--rand); }
.werkzeugleiste .gruppe:last-child { border-right: 0; }
.werkzeugleiste button:not(.umschalter button) { border-color: transparent; background: transparent; min-height: 34px; padding: .25rem .55rem; font-size: .9rem; }
.werkzeugleiste button:not(.umschalter button):hover:not(:disabled) { background: var(--hinter); }
.werkzeugleiste .umschalter button { min-height: 32px; font-size: .88rem; padding: .2rem .75rem; }
.zoom { font-size: .82rem; color: var(--grau); min-width: 3.2rem; text-align: center; }
.nur-lesen .nur-bearbeiten { display: none !important; }
.sicht-gliederung .nur-karte { display: none !important; }

.arbeitsbereich { flex: 1; display: flex; min-height: 0; }
.flaeche { flex: 1; position: relative; min-width: 0; background: #f6f8f9; }
/* Mind Elixir setzt position:relative als Inline-Stil — daher !important, sonst schrumpft die Fläche. */
#karte { position: absolute !important; inset: 0; }
#karte .map-container:focus-visible { outline: none; }
#karte .map-container { background: #f6f8f9; }
#cm-summary { display: none !important; }      /* Zusammenfassungen speichert V1 nicht */
.verbinden #karte { cursor: crosshair; }
#karte me-tpc.treffer, #karte .treffer { outline: 3px solid #f2b705 !important; outline-offset: 2px; }
.tipp {
  position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 10;
  background: var(--text); color: #fff; padding: .4rem .9rem; border-radius: 20px; font-size: .85rem;
}
.suchleiste {
  position: absolute; top: .75rem; right: .75rem; z-index: 12; display: flex; align-items: center; gap: .25rem;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: .3rem; box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.suchleiste input { width: 13rem; min-height: 32px; padding: .25rem .5rem; }
.such-zahl { font-size: .8rem; color: var(--grau); min-width: 4.5rem; text-align: center; }

.panel { width: 270px; flex: none; border-left: 1px solid var(--rand); background: #fff; position: relative; overflow-y: auto; }
.panel.zu { width: 18px; overflow: visible; }
.panel.zu .panel-inhalt { display: none; }
.panel-griff {
  position: absolute; left: -1px; top: 50%; transform: translate(-100%, -50%); z-index: 5;
  min-height: 44px; min-width: 18px; width: 18px; padding: 0; border-radius: 6px 0 0 6px; border-right: 0; background: #fff; color: var(--grau);
}
.panel.zu .panel-griff { transform: translate(-100%, -50%) scaleX(-1); border-radius: 0 6px 6px 0; }
.panel-inhalt { padding: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.panel-inhalt > div { display: flex; flex-direction: column; gap: .9rem; }
.panel-leer { color: var(--leise); font-size: .88rem; padding-top: .5rem; }
.panel-titel { font-weight: 600; overflow-wrap: anywhere; }
.feld { display: flex; flex-direction: column; gap: .35rem; }
.feld-name { font-size: .78rem; color: var(--leise); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.farben { display: flex; flex-wrap: wrap; gap: .35rem; }
.farben button { width: 26px; height: 26px; min-height: 26px; min-width: 26px; padding: 0; border-radius: 50%; border: 2px solid transparent; }
.farben button.an { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text); }
.farben button.keine { border: 1px solid var(--rand-stark); background: #fff; color: var(--leise); font-size: .85rem; }
.symbole { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; }
.symbole button { min-height: 34px; padding: 0; font-size: 1.05rem; border-color: var(--rand); }
.symbole button.an { background: var(--akzent-hell); border-color: var(--akzent); }
.farben button[data-farbe="#ffffff"] { border: 1px solid var(--rand-stark); }
.schrift-zeile { display: flex; gap: .35rem; }
.schrift-zeile select { flex: 1; min-width: 0; }
.ausrichtung { display: flex; flex: none; }
.ausrichtung button { min-width: 34px; width: 34px; padding: 0; border-radius: 0; border-color: var(--rand); color: var(--text); }
.ausrichtung button + button { margin-left: -1px; }
.ausrichtung button:first-child { border-radius: 6px 0 0 6px; }
.ausrichtung button:last-child { border-radius: 0 6px 6px 0; }
.ausrichtung button.an { background: var(--akzent-hell); border-color: var(--akzent); position: relative; }
.ausrichtung svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.fussleiste {
  flex: none; display: flex; gap: 1.25rem; padding: .35rem 1rem; border-top: 1px solid var(--rand);
  font-size: .76rem; color: var(--leise); overflow-x: auto; white-space: nowrap;
}
.nur-lesen .fussleiste { visibility: hidden; }

/* ---------- Gliederung ---------- */
.gliederung { position: absolute; inset: 0; overflow: auto; background: #fff; padding: 1.5rem 2rem 4rem; }
.gliederung ul { list-style: none; margin: 0; padding: 0; }
.g-baum { max-width: 52rem; }
.g-zeile {
  display: flex; align-items: center; gap: .4rem; padding: .15rem .25rem .15rem calc(var(--tiefe) * 1.6rem);
  border-radius: 6px; min-height: 34px;
}
.g-zeile:hover { background: #fafbfc; }
.g-zeile.treffer { background: #fff4c2; }
.g-pfeil {
  min-width: 22px; min-height: 22px; width: 22px; padding: 0; border: 0; background: transparent; color: var(--leise);
  font-size: .8rem; transition: transform .1s; transform: rotate(90deg);
}
.g-pfeil.zu { transform: rotate(0); }
.g-punkt { width: 7px; height: 7px; border-radius: 50%; margin: 0 7.5px; flex: none; }
.g-text { flex: 0 1 auto; min-width: 2rem; padding: .1rem .3rem; border-radius: 4px; outline: none; overflow-wrap: anywhere; }
.g-text:focus { background: var(--akzent-hell); }
.g-text:empty::before { content: "…"; color: var(--leise); }
.wurzel > .g-zeile .g-text { font-weight: 650; font-size: 1.2rem; }
.g-notiz { color: var(--leise); font-size: .85rem; }
.g-symbole { font-size: .95rem; }
.verweis { font-size: .75rem; color: var(--akzent-dunkel); background: var(--akzent-hell); border-radius: 10px; padding: 0 .5rem; white-space: nowrap; }
.g-tipp { margin-top: 2rem; }

/* ---------- Dialoge ---------- */
.dialog {
  border: 0; border-radius: 14px; padding: 1.5rem; width: min(30rem, calc(100vw - 2rem));
  box-shadow: 0 20px 50px rgba(0,0,0,.25); color: var(--text);
}
.dialog.breit { width: min(36rem, calc(100vw - 2rem)); }
.dialog::backdrop { background: rgba(20, 25, 30, .4); }
.dialog form { display: flex; flex-direction: column; gap: .9rem; }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }
.dialog select { width: 100%; }
.dialog .zeile select { width: auto; }
.personen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rand); border-radius: 10px; }
.personen li { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--rand); }
.personen li:last-child { border-bottom: 0; }
.person-name { flex: 1; }
.rolle { color: var(--grau); font-size: .88rem; }
.personen select { min-height: 32px; padding: .2rem .4rem; width: auto; }
.eigentum summary { cursor: pointer; color: var(--grau); font-size: .9rem; }
.eigentum .zeile { margin-top: .6rem; }
.tasten { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tasten td { padding: .3rem .4rem; border-bottom: 1px solid var(--rand); }
.tasten td:first-child { white-space: nowrap; width: 45%; }
.tasten .unterzeile { font-weight: 600; padding-top: .9rem; color: var(--grau); }
kbd { font-family: inherit; font-size: .8rem; background: var(--hinter); border: 1px solid var(--rand-stark); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35rem; }

/* ---------- Meldung ---------- */
.meldung {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 100;
  background: var(--text); color: #fff; padding: .6rem 1.1rem; border-radius: 10px; font-size: .9rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: calc(100vw - 2rem);
}
.meldung.fehler { background: var(--fehler); }

/* ---------- Druck ---------- */
#druckbereich { display: none; }
@media print {
  body > *:not(#druckbereich) { display: none !important; }
  #druckbereich { display: block !important; }
  .druck-kopf { display: flex; justify-content: space-between; font-size: 11pt; margin-bottom: 4mm; border-bottom: 1px solid #ccc; padding-bottom: 2mm; }
  #druckbereich img { width: 100%; max-height: 180mm; object-fit: contain; display: block; }
}

/* ---------- Schmale Bildschirme (Tablet hoch / Handy) ---------- */
.nur-mobil { display: none !important; }
@media (max-width: 900px) {
  .panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 15; box-shadow: -6px 0 18px rgba(0,0,0,.08); }
  .arbeitsbereich { position: relative; }
  .fussleiste { display: none; }
  .breit-nur { display: none !important; }
}
@media (max-width: 760px) {
  .nur-mobil { display: inline-flex !important; }
  .uebersicht-raster { grid-template-columns: 1fr; }
  .seitenleiste {
    position: fixed; top: var(--kopf-h); bottom: 0; left: 0; width: 260px; z-index: 30;
    transform: translateX(-100%); transition: transform .18s; box-shadow: 6px 0 18px rgba(0,0,0,.1); overflow-y: auto;
  }
  .seitenleiste.offen { transform: none; }
  .kopf { gap: .5rem; padding: 0 .5rem; }
  .kopf .logo { display: none; }
  .uebersicht-inhalt { padding: 1rem; }
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .65rem; }
  .inhalt-kopf h1 { width: 100%; }
  .titel-eingabe { width: 100%; }
  .editor-kopf .status { display: none; }
  .gliederung { padding: 1rem; }
  .panel { width: 100%; top: auto; height: 55%; border-left: 0; border-top: 1px solid var(--rand); }
  .panel.zu { height: 0; width: 100%; }
  .panel-griff { left: 50%; top: 0; transform: translate(-50%, -100%) rotate(90deg); }
  .panel.zu .panel-griff { transform: translate(-50%, -100%) rotate(-90deg); }
  #schlagwort-knopf { display: none; }
}

/* ================= Stufe 2 ================= */

/* ---------- Glocke ---------- */
.glocke-wrap { position: relative; }
.glocke { position: relative; }
.glocke-zahl {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #c2417a; color: #fff; font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center;
}
.glocken-menue { position: fixed; width: min(24rem, calc(100vw - 1rem)); max-height: 70vh; overflow-y: auto; padding: .3rem; }
.glocken-kopf { display: flex; align-items: center; justify-content: space-between; }
.klein-knopf { min-height: 28px; padding: .1rem .5rem; font-size: .8rem; }
.glocken-eintrag { align-items: flex-start !important; gap: .55rem !important; white-space: normal !important; text-align: left; padding: .5rem .6rem !important; }
.glocken-eintrag.ungelesen { background: var(--akzent-hell) !important; }
.glocken-symbol { flex: none; width: 1.3rem; text-align: center; }
.glocken-text { font-size: .86rem; line-height: 1.4; }
.glocken-text small { display: block; color: var(--leise); font-size: .75rem; margin-top: .1rem; }
.glocken-leer { padding: 1rem; text-align: center; }

/* ---------- Seitenleiste / Aufgaben ---------- */
.zaehler.leise-zaehler { background: var(--rand-stark); color: var(--text); }
.aufgaben-liste { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; }
.aufgaben-liste .leer { border: 0; }
.aufgabe-zeile { display: flex; align-items: center; gap: .8rem; padding: .65rem .95rem; border-bottom: 1px solid var(--rand); }
.aufgabe-zeile:last-child { border-bottom: 0; }
.aufgabe-zeile input[type=checkbox] { width: 20px; height: 20px; min-height: auto; accent-color: var(--akzent); flex: none; }
.aufgabe-text { flex: 1; min-width: 0; }
.aufgabe-text a { color: var(--text); text-decoration: none; font-weight: 500; }
.aufgabe-text a:hover { color: var(--akzent); text-decoration: underline; }
.aufgabe-meta { font-size: .8rem; color: var(--grau); }
.aufgabe-zeile.erledigt .aufgabe-text a { text-decoration: line-through; color: var(--leise); }
.faellig { font-size: .8rem; color: var(--grau); white-space: nowrap; background: var(--hinter); border-radius: 12px; padding: .05rem .55rem; }
.faellig.ueberfaellig { color: var(--fehler); background: var(--fehler-hell); font-weight: 600; }

/* ---------- Editor: Verlauf-Vorschau ---------- */
.banner.info { background: var(--akzent-hell); color: var(--akzent-dunkel); border-bottom: 1px solid #bfe0d9; }
.vorschau-modus .werkzeugleiste .nur-bearbeiten { display: none !important; }
.vorschau-modus #karte .map-container { background: repeating-linear-gradient(45deg, #f6f8f9, #f6f8f9 14px, #f0f3f5 14px, #f0f3f5 28px); }
.verlauf-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rand); border-radius: 10px; max-height: 55vh; overflow-y: auto; }
.verlauf-liste li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid var(--rand); }
.verlauf-liste li:last-child { border-bottom: 0; }
.verlauf-liste li div { display: flex; flex-direction: column; }
.verlauf-liste .leise-text { padding: 0; }

/* ---------- Markierungen an Knoten ---------- */
#karte me-tpc { position: relative; }
.deko { position: absolute; top: -9px; right: -9px; display: flex; gap: 2px; pointer-events: none; z-index: 2; }
.deko > span {
  background: #fff; border: 1px solid var(--rand-stark); border-radius: 9px; font-size: 11px; line-height: 15px;
  padding: 0 4px; color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); pointer-events: auto;
}
.deko-aufgabe.erledigt { color: var(--ok); border-color: #a9d3ab; }
.deko-aufgabe.ueberfaellig { color: #fff; background: var(--fehler); border-color: var(--fehler); }

/* ---------- Panel: Aufgabe und Kommentare ---------- */
.aufgabe-details { display: flex; flex-direction: column; gap: .55rem; margin-top: .4rem; padding: .6rem; background: var(--hinter); border-radius: var(--radius); }
.aufgabe-details label:not(.kontroll) { font-size: .82rem; }
.kommentare-bereich { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--rand); padding-top: .8rem; }
#map-kommentare { margin-top: .5rem; }
.kommentar-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.kommentar { background: var(--hinter); border-radius: var(--radius); padding: .45rem .6rem; font-size: .86rem; }
.kommentar.erledigt { opacity: .6; }
.kommentar.erledigt .kommentar-text { text-decoration: line-through; }
.kommentar-kopf { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--grau); }
.kommentar-kopf strong { color: var(--text); }
.kommentar-kopf span { flex: 1; }
.kommentar-kopf .symbol.klein { min-width: 24px; min-height: 24px; font-size: .8rem; }
.kommentar-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .15rem; }
.kommentar-ort {
  display: inline-block; min-height: 0; padding: 0 .45rem; margin-top: .2rem; border: 0; border-radius: 10px;
  background: var(--akzent-hell); color: var(--akzent-dunkel); font-size: .75rem;
}
.k-form { display: flex; flex-direction: column; gap: .4rem; }
.k-form button { align-self: flex-end; min-height: 32px; padding: .2rem .8rem; font-size: .85rem; }
.k-unter { margin-top: .5rem; }

/* ---------- Gliederung ---------- */
.g-aufgabe { min-height: 22px; min-width: 22px; padding: 0; border: 0; background: transparent; font-size: 1rem; color: var(--grau); }
.g-aufgabe.erledigt { color: var(--ok); }
.g-kommentare { font-size: .75rem; color: var(--grau); }

/* ================= Stufe 2, Etappe 2 ================= */

/* ---------- Neu-Dialog mit Vorlagen ---------- */
.dialog.sehr-breit { width: min(52rem, calc(100vw - 2rem)); }
.vorlagen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; max-height: 52vh; overflow-y: auto; padding: 2px; }
.vorlage-kachel {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .15rem; padding: 0 0 .5rem;
  white-space: normal; text-align: left; border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; min-height: 0;
}
.vorlage-kachel.an { border: 2px solid var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }
.vorlage-bild { display: block; background: #f8fafb; border-bottom: 1px solid var(--rand); color: var(--grau); aspect-ratio: 2 / 1; }
.vorlage-bild svg { width: 100%; height: 100%; display: block; }
.vorlage-leer { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.6rem; color: var(--leise); }
.vorlage-name { font-weight: 600; font-size: .88rem; padding: .3rem .6rem 0; }
.vorlage-text { font-size: .75rem; color: var(--grau); padding: 0 .6rem; line-height: 1.35; }
.vorlage-loeschen { position: absolute; top: .3rem; right: .3rem; background: #fff; border-radius: 6px; padding: 0 .3rem; font-size: .85rem; cursor: pointer; }
.vorlage-abzeichen { position: absolute; top: .3rem; left: .3rem; background: var(--akzent); color: #fff; border-radius: 6px; font-size: .68rem; font-weight: 700; padding: 0 .35rem; }
.menue-trenner { border-top: 1px solid var(--rand) !important; border-radius: 0 !important; margin-top: .2rem; }

/* ---------- Bilder im Panel ---------- */
.bild-vorschau { display: flex; flex-direction: column; gap: .4rem; }
.bild-vorschau img { max-width: 100%; max-height: 140px; object-fit: contain; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--hinter); }
.bild-groesse { flex-direction: row; align-items: center; gap: .5rem; font-size: .82rem; }
.bild-groesse input { flex: 1; min-height: auto; padding: 0; accent-color: var(--akzent); }
#karte me-tpc img { border-radius: 6px; }

/* ---------- Gruppen ---------- */
.inhalt-kopf.abschnitt { margin-top: 2rem; margin-bottom: .4rem; }
.gruppen-liste { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.gruppe-karte { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .45rem; }
.gruppe-kopf { display: flex; align-items: center; gap: .5rem; }
.gruppe-kopf button { min-height: 32px; padding: .2rem .6rem; font-size: .85rem; }
.auswahl-liste { display: flex; flex-direction: column; gap: .3rem; max-height: 40vh; overflow-y: auto; border: 1px solid var(--rand); border-radius: 10px; padding: .5rem .7rem; }
.avatar.gruppe { background: var(--hinter); font-size: .85rem; }