/* dieCouch – Gestaltung „陶土“ (Terrakotta): Leinen und Creme, Text in warmem Dunkelbraun, gebrannter Ton
   als Akzent; Dunkelmodus in tiefem Braun. Weitere Farbwelten (靛蓝, 玉) über data-farbe, siehe unten.
   Die Variablen heißen aus historischen Gründen --jade (= Akzentfarbe). Keine externen Schriften. */

:root {
  --paper: #f6f0e8; --sheet: #fdfaf5; --wash: #efe5d9; --wash-2: #e6d8c7; --rule: #e6dacb;
  --ink: #2b2320; --ink-2: #5c4e47; --mute: #93857a;
  --jade: #b4532f; --jade-soft: #f6e0d4; --on-jade: #fff;
  --high: #c8352a; --mid: #d99a00; --low: #2f6bd3; --none: #a8998d; --danger: #b03a2a;
  --add-bg: #e3efdf; --del-bg: #f8dfd8;
  --shadow: 0 1px 2px rgb(70 40 20 / 0.07), 0 8px 24px rgb(70 40 20 / 0.1);
  --radius: 8px; --radius-lg: 14px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  --schrift: 16px;
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
/* Andere Farbwelten, hell (stehen vor den dunklen Regeln, damit der Dunkelmodus sie überschreibt) */
:root[data-farbe="indigo"] {
  --paper: #f2f2f6; --sheet: #fbfbfd; --wash: #e8e8f0; --wash-2: #dcdce8; --rule: #dfdfe8;
  --ink: #22232b; --ink-2: #4c4e5c; --mute: #85879a; --jade: #3f4fa8; --jade-soft: #e1e4f6; --none: #9a9cac;
  --shadow: 0 1px 2px rgb(20 25 60 / 0.07), 0 8px 24px rgb(20 25 60 / 0.1);
}
:root[data-farbe="jade"] {
  --paper: #f3efe6; --sheet: #fbf9f4; --wash: #ebe5d8; --wash-2: #e1d9c8; --rule: #e0d8c8;
  --ink: #2a2622; --ink-2: #57504a; --mute: #8f867b; --jade: #2c6655; --jade-soft: #dfeae2; --none: #a59d92;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1a1514; --sheet: #211b19; --wash: #2a2220; --wash-2: #342a27; --rule: #352b28;
    --ink: #ece4de; --ink-2: #c2b5ac; --mute: #8d7f76; --jade: #e08a63; --jade-soft: #3d2720; --on-jade: #1e120d;
    --high: #ef5a4e; --mid: #f2c230; --low: #5d9cf2; --none: #6f625b; --danger: #e8705f;
    --add-bg: #22382a; --del-bg: #47221d;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
  :root[data-farbe="indigo"]:not([data-theme="light"]) {
    --paper: #14151c; --sheet: #1a1c25; --wash: #22242f; --wash-2: #2a2d3a; --rule: #2b2e3b;
    --ink: #e4e5ee; --ink-2: #b5b8c8; --mute: #7e8194; --jade: #8e9cf0; --jade-soft: #262b48; --on-jade: #10132a; --none: #646779;
  }
  :root[data-farbe="jade"]:not([data-theme="light"]) {
    --paper: #151816; --sheet: #1b1f1d; --wash: #232826; --wash-2: #2b312e; --rule: #2c322f;
    --ink: #e4e7e4; --ink-2: #b4bbb6; --mute: #7d857f; --jade: #6db69c; --jade-soft: #22362f; --on-jade: #10211b; --none: #6b736d;
  }
}
:root[data-theme="dark"] {
  --paper: #1a1514; --sheet: #211b19; --wash: #2a2220; --wash-2: #342a27; --rule: #352b28;
  --ink: #ece4de; --ink-2: #c2b5ac; --mute: #8d7f76; --jade: #e08a63; --jade-soft: #3d2720; --on-jade: #1e120d;
  --high: #ef5a4e; --mid: #f2c230; --low: #5d9cf2; --none: #6f625b; --danger: #e8705f;
  --add-bg: #22382a; --del-bg: #47221d;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}
:root[data-farbe="indigo"][data-theme="dark"] {
  --paper: #14151c; --sheet: #1a1c25; --wash: #22242f; --wash-2: #2a2d3a; --rule: #2b2e3b;
  --ink: #e4e5ee; --ink-2: #b5b8c8; --mute: #7e8194; --jade: #8e9cf0; --jade-soft: #262b48; --on-jade: #10132a; --none: #646779;
}
:root[data-farbe="jade"][data-theme="dark"] {
  --paper: #151816; --sheet: #1b1f1d; --wash: #232826; --wash-2: #2b312e; --rule: #2c322f;
  --ink: #e4e7e4; --ink-2: #b4bbb6; --mute: #7d857f; --jade: #6db69c; --jade-soft: #22362f; --on-jade: #10211b; --none: #6b736d;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper); color: var(--ink); font: 14px/1.55 var(--font); letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.55; }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--jade-soft); }
h1, h2, h3 { font-weight: 600; margin: 0; }
a { color: var(--jade); }
.icon { display: block; flex-shrink: 0; }
kbd { font: 11px var(--font); border: 1px solid var(--rule); border-radius: 6px; padding: 1px 6px; color: var(--mute); background: var(--sheet); }

input, select, textarea {
  font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 6px 9px; width: 100%; transition: background 0.12s, border-color 0.12s;
}
input:hover, select:hover { background-color: var(--wash); }
input:focus, select:focus, textarea:focus { outline: none; background-color: var(--sheet); border-color: var(--jade); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--jade) 35%, transparent); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--mute); }
select { appearance: none; padding-right: 24px; width: auto;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 12px) 52%, calc(100% - 8px) 52%; background-size: 4px 4px; background-repeat: no-repeat; }
option { background: var(--sheet); color: var(--ink); }

.primaer { background: var(--jade); color: var(--on-jade); border: 1px solid var(--jade); border-radius: var(--radius); padding: 6px 14px; font-weight: 550; min-height: 32px; }
.primaer:hover:not(:disabled) { filter: brightness(1.08); }
:where(button) { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px 12px; line-height: 1.3; }
:where(button:hover:not(:disabled)) { background: var(--wash); }
button.gefahr { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--rule)); }
.link { background: none; border: none; color: var(--jade); padding: 3px 6px; border-radius: 6px; }
.link:hover { background: var(--jade-soft); }
.gefahr-text { color: var(--danger) !important; }

.werkzeug {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; background: none; border: 0; border-radius: 7px;
  color: var(--ink-2); transition: background 0.12s, color 0.12s;
}
.werkzeug:hover:not(:disabled) { background: var(--jade-soft); color: var(--jade); }
.werkzeug.klein { width: 26px; height: 26px; }

.knopf-gruppe { display: inline-flex; background: var(--wash); border: 1px solid var(--rule); border-radius: 9px; padding: 2px; gap: 2px; flex-shrink: 0; }
.knopf-gruppe button { background: none !important; border: 0 !important; padding: 3px 11px !important; min-height: 26px !important; border-radius: 6px !important; color: var(--ink-2); font-size: 13px; }
.knopf-gruppe button.aktiv { background: var(--sheet) !important; color: var(--jade); box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); font-weight: 550; }

.fehler { color: var(--danger); }
.laedt, .leer-text { color: var(--mute); text-align: center; padding: 24px 12px; }
.klein-text { font-size: 12px; color: var(--mute); }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--none); flex: none; }
.punkt.tief { background: var(--high); } .punkt.mitte { background: var(--mid); } .punkt.hoch { background: var(--jade); }
.etikett { font-size: 11px; color: var(--ink-2); background: var(--wash); border-radius: 99px; padding: 1px 8px; }

/* ---------- Anmeldung ---------- */
.anmeldung { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: var(--paper); overflow: auto; z-index: 300; }
.anmelde-karte { width: min(360px, 100%); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.anmelde-karte .logo { align-self: center; border-radius: 16px; }
.anmelde-karte h1 { text-align: center; font: 600 24px var(--serif); margin: 4px 0 12px; }
.anmelde-karte label { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.anmelde-karte input { font-size: 16px; padding: 10px 12px; }
.anmelde-karte .primaer { margin-top: 10px; min-height: 44px; font-size: 16px; }
.anmelde-karte .fehler { margin: 4px 0 0; font-size: 13px; }

/* ---------- Layout ---------- */
.app {
  display: grid; height: 100vh; height: 100dvh; overflow: hidden;
  grid-template-columns: var(--seite-breite, 280px) 5px 0 minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
.app.seite-zu { grid-template-columns: 0 0 46px minmax(0, 1fr); }
.seitenleiste { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--paper); padding: 10px 8px 6px; gap: 2px; }
.app.seite-zu .seitenleiste, .app.seite-zu .seiten-trenner { display: none; }
.seiten-trenner { grid-column: 2; grid-row: 1; position: relative; cursor: col-resize; touch-action: none; background: transparent; border-left: 1px solid var(--rule); z-index: 5; }
.seiten-trenner::after { content: ''; position: absolute; inset: 0 -4px; }
.seiten-trenner:hover, .seiten-trenner:focus-visible { border-left-color: var(--jade); }
.schiene { grid-column: 3; grid-row: 1; display: none; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border-right: 1px solid var(--rule); background: var(--paper); }
.app.seite-zu .schiene { display: flex; }
.arbeitsflaeche { grid-column: 4; grid-row: 1; min-width: 0; min-height: 0; padding: 6px; overflow: hidden; }
.arbeitsflaeche > .gruppe, .arbeitsflaeche > .teilung { height: 100%; }
body.zieht-trenner { user-select: none; -webkit-user-select: none; }
body.zieht-trenner.spalte { cursor: col-resize; }
body.zieht-trenner.zeile { cursor: row-resize; }

/* ---------- Seitenleiste ---------- */
.seite-kopf { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.suchknopf {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; min-height: 38px; padding: 6px 10px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; color: var(--ink-2); font-size: 13px;
}
.suchknopf:hover { border-color: color-mix(in srgb, var(--jade) 42%, var(--rule)); }
.suchknopf .s-text { flex: 1; }
.suchknopf .s-icon { color: var(--mute); display: flex; }
.nav-punkt {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; min-height: 34px; padding: 5px 9px;
  background: none; border: 1px solid transparent; border-radius: 9px; color: var(--ink-2);
}
.nav-punkt:hover { background: var(--wash); color: var(--ink); }
.nav-punkt .n-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-punkt > span:first-child { display: flex; color: var(--mute); }
.nav-punkt:hover > span:first-child { color: var(--jade); }
.baum-kopf { display: flex; align-items: center; gap: 2px; margin: 10px 4px 2px 9px; }
.baum-titel { flex: 1; font-size: 12px; color: var(--mute); letter-spacing: 0.08em; }
.baum-huelle { flex: 1; min-height: 0; overflow: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.seite-fuss { border-top: 1px solid var(--rule); padding-top: 6px; margin-top: 4px; display: flex; flex-direction: column; gap: 1px; }
.kosten-zeile { font-size: 12px; color: var(--mute); padding: 4px 9px 2px; font-variant-numeric: tabular-nums; }
.kosten-zeile.warn { color: var(--danger); }

.baum { font-size: 13.5px; }
.baum-zeile { display: flex; align-items: center; border-radius: 7px; position: relative; padding-left: calc(var(--tiefe, 0) * 14px); }
.baum-zeile:hover { background: var(--wash); }
.baum-zeile.aktiv { background: var(--wash-2); }
.baum-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; min-height: 28px; padding: 2px 4px; text-align: left; background: none; border: 0; color: var(--ink); }
.baum-name .icon { color: var(--mute); }
.baum-zeile.aktiv .baum-name .icon { color: var(--jade); }
.baum-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfeil { width: 14px; display: flex; color: var(--mute); }
.baum-mehr { display: none; width: 26px; height: 26px; margin-right: 2px; padding: 0; place-items: center; background: none; border: 0; border-radius: 6px; color: var(--mute); }
.baum-zeile:hover .baum-mehr, .baum-zeile:focus-within .baum-mehr, .baum-mehr.immer { display: grid; }
.baum-mehr:hover { background: var(--jade-soft); color: var(--jade); }
.baum-info { color: var(--mute); font-size: 12px; padding: 4px 8px 4px calc(var(--tiefe, 0) * 14px + 28px); }
.baum-weiter { display: block; margin: 2px 0 4px calc(var(--tiefe, 0) * 14px + 22px); background: none; border: 0; color: var(--jade); font-size: 12px; padding: 4px 6px; }

/* ---------- Arbeitsflaeche ---------- */
.teilung { display: grid; min-width: 0; min-height: 0; }
.teilung > * { min-width: 0; min-height: 0; overflow: hidden; }
.teilung > .gruppe, .teilung > .teilung { height: 100%; }
.trenner { position: relative; z-index: 4; cursor: col-resize; touch-action: none; background: transparent; overflow: visible !important; }
.teilung.vertikal > .trenner { cursor: row-resize; }
.trenner::before { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 36px; transform: translate(-50%, -50%); border-radius: 99px; background: transparent; transition: background 0.14s; }
.teilung.vertikal > .trenner::before { width: 36px; height: 3px; }
.trenner:hover::before, .trenner:focus-visible::before, body.zieht-trenner .trenner::before { background: var(--jade); }
.trenner::after { content: ''; position: absolute; inset: 0 -3px; }
.teilung.vertikal > .trenner::after { inset: -3px 0; }

.gruppe {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 10px; transition: border-color 0.14s, box-shadow 0.14s;
}
.gruppe.fokus { border-color: color-mix(in srgb, var(--jade) 45%, var(--rule)); box-shadow: 0 2px 12px color-mix(in srgb, var(--jade) 8%, transparent); }
.gruppen-leiste { display: flex; align-items: center; gap: 4px; height: 40px; min-height: 40px; padding: 0 6px; background: var(--wash); border-bottom: 1px solid var(--rule); }
.gruppen-griff { display: grid; place-items: center; width: 18px; height: 24px; color: var(--mute); cursor: grab; border-radius: 5px; flex: none; }
.gruppen-griff:hover { color: var(--jade); background: var(--jade-soft); }
.tabs { display: flex; align-items: center; flex: 1; min-width: 0; align-self: stretch; overflow-x: auto; scrollbar-width: none; gap: 2px; border-radius: 7px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.ziel { background: color-mix(in srgb, var(--jade) 12%, transparent); }
.tab { display: flex; align-items: center; flex: none; max-width: 220px; height: 30px; border: 1px solid transparent; border-radius: 7px; }
.tab:hover:not(.gewaehlt) { background: color-mix(in srgb, var(--sheet) 60%, transparent); }
.tab.gewaehlt { background: var(--sheet); border-color: color-mix(in srgb, var(--jade) 25%, var(--rule)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.tab-name { display: flex; align-items: center; gap: 6px; min-width: 0; height: 100%; padding: 0 4px 0 9px; background: none; border: 0; border-radius: inherit; font-size: 12.5px; color: var(--ink-2); }
.tab.gewaehlt .tab-name { color: var(--ink); font-weight: 550; }
.tab.gewaehlt .tab-name .icon { color: var(--jade); }
.tab-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-zu { display: grid; place-items: center; width: 20px; height: 20px; margin-right: 4px; padding: 0; background: none; border: 0; border-radius: 5px; color: var(--mute); opacity: 0; }
.tab:hover .tab-zu, .tab.gewaehlt .tab-zu, .tab-zu:focus-visible { opacity: 1; }
.tab-zu:hover { background: var(--wash); color: var(--ink); }
.werkzeuge { display: flex; align-items: center; gap: 1px; flex: none; }
.gruppen-koerper { flex: 1; min-height: 0; position: relative; display: flex; }
.tafel { flex: 1; min-width: 0; min-height: 0; display: flex; }
.tafel[hidden] { display: none; }
.tafel > .ansicht { flex: 1; min-width: 0; min-height: 0; }
.ansicht { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.leer-gruppe { margin: auto; text-align: center; color: var(--mute); padding: 24px; }
.leer-knoepfe { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

.abwurf { display: none; position: absolute; inset: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 40%, transparent); }
body.zieht .abwurf { display: block; }
.abwurf-zone { position: absolute; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-2); background: color-mix(in srgb, var(--sheet) 92%, transparent); border: 1px dashed color-mix(in srgb, var(--jade) 40%, var(--rule)); border-radius: 10px; }
.abwurf-zone.mitte { inset: 27%; } .abwurf-zone.links { left: 0; top: 26%; bottom: 26%; width: 25%; } .abwurf-zone.rechts { right: 0; top: 26%; bottom: 26%; width: 25%; }
.abwurf-zone.oben { left: 0; right: 0; top: 0; height: 25%; } .abwurf-zone.unten { left: 0; right: 0; bottom: 0; height: 25%; }
.abwurf-zone.ueber { color: var(--jade); background: var(--jade-soft); border-color: var(--jade); }

/* ---------- Dialoge, Menues, Meldungen ---------- */
.ueberzug { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgb(20 18 14 / 0.38); }
.ueberzug.oben { align-items: start; padding-top: 12vh; }
.dialog { width: min(400px, 100%); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.dialog h2 { font: 600 17px var(--serif); }
.dialog p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.dialog-feld { font-size: 16px; padding: 8px 10px; }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.menue { position: fixed; z-index: 250; min-width: 180px; padding: 5px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); }
.menue button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; padding: 5px 10px; background: none; border: 0; border-radius: 6px; text-align: left; color: var(--ink); }
.menue button:hover, .menue button:focus-visible { background: var(--wash); outline: none; }
.menue button.gefahr { color: var(--danger); }
.menue button span:not(.menue-leer) { flex: 1; }
.menue-leer { width: 16px; }
.menue-trenner { height: 1px; background: var(--rule); margin: 4px 2px; }
.meldungen { position: fixed; z-index: 400; left: 50%; transform: translateX(-50%); bottom: calc(76px + var(--sa-b)); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.meldung { background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); }
.meldung.fehler { background: var(--danger); color: #fff; }

.palette { width: min(620px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.palette-kopf { display: flex; align-items: center; gap: 10px; padding: 4px 14px; border-bottom: 1px solid var(--rule); color: var(--mute); }
.palette-eingabe { border: 0 !important; font-size: 16px; padding: 12px 0; background: transparent !important; }
.palette-eingabe:focus { outline: none !important; }
.palette-liste { overflow: auto; padding: 6px; }
.palette-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.palette-zeile.gewaehlt { background: var(--wash-2); }
.palette-zeile .icon { color: var(--mute); }
.p-name { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-pfad { flex: 1; min-width: 0; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.palette-leer { color: var(--mute); padding: 10px; text-align: center; }
.palette-hilfe { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--mute); }

/* ---------- Handy ---------- */
.untere-leiste, .s-hintergrund { display: none; }
@media (max-width: 760px) {
  body { font-size: 15px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .app.seite-zu { grid-template-columns: minmax(0, 1fr); }
  .seiten-trenner, .schiene, .app.seite-zu .schiene, .fab, .nur-desktop { display: none !important; }
  .arbeitsflaeche { grid-column: 1; padding: var(--sa-t) 0 calc(58px + var(--sa-b)); }
  .gruppe { border-radius: 0; border-left: 0; border-right: 0; }
  .seitenleiste, .app.seite-zu .seitenleiste {
    display: flex; position: fixed; z-index: 120; left: 0; top: 0; bottom: 0; width: min(88vw, 340px); padding-top: calc(10px + var(--sa-t)); padding-bottom: calc(6px + var(--sa-b));
    transform: translateX(-102%); transition: transform 0.2s ease; box-shadow: var(--shadow); border-right: 1px solid var(--rule);
  }
  .app.schublade-offen .seitenleiste { transform: none; }
  .app.schublade-offen .s-hintergrund { display: block; position: fixed; inset: 0; z-index: 110; background: rgb(20 18 14 / 0.4); }
  .untere-leiste {
    display: flex; position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; padding: 4px 6px calc(4px + var(--sa-b)); background: var(--sheet); border-top: 1px solid var(--rule);
  }
  body.chat-offen .untere-leiste { display: none; }
  .untere-leiste button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 50px; padding: 4px 0; background: none; border: 0; color: var(--ink-2); font-size: 11px; border-radius: 10px; }
  .untere-leiste button:active { background: var(--wash); color: var(--jade); }
  .nav-punkt { min-height: 44px; }
  .baum-name { min-height: 40px; }
  .werkzeug { width: 40px; height: 40px; }
  .werkzeug.klein { width: 36px; height: 36px; }
  .gruppen-leiste { height: 46px; min-height: 46px; padding: 0 4px; }
  .gruppen-griff { display: none; }
  .tab { height: 36px; max-width: 170px; }
  .tab-zu { opacity: 1; width: 28px; height: 28px; }
  .meldungen { bottom: calc(70px + var(--sa-b)); }
  .palette { max-height: 80vh; }
  .ueberzug.oben { padding-top: calc(8vh + var(--sa-t)); }
  input, select, textarea { font-size: 16px; }
  .primaer { min-height: 42px; }
  .dialog-knoepfe button { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Tastenkürzel-Hilfe (⌘/) ---------- */
.th-ueberzug { position: fixed; inset: 0; z-index: 210; display: grid; place-items: start center; padding: 8vh 16px 16px; background: rgb(20 18 14 / 0.38); }
.tasten-hilfe { width: min(760px, 100%); max-height: 84vh; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.th-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.th-kopf h2 { font: 600 17px var(--serif); flex-shrink: 0; }
.th-suche { flex: 1; min-width: 0; font-size: 14px; padding: 6px 10px; }
.th-reset { border: 1px solid var(--rule); background: var(--wash); border-radius: var(--radius); padding: 5px 10px; font-size: 13px; color: var(--ink-2); }
.th-liste { overflow: auto; padding: 6px 18px 12px; columns: 2 320px; column-gap: 28px; }
.th-abschnitt { break-inside: avoid; padding-top: 10px; }
.th-abschnitt h3 { font-size: 12px; color: var(--mute); font-weight: 600; margin-bottom: 4px; letter-spacing: 0.05em; }
.th-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--rule); }
.th-text { color: var(--ink-2); font-size: 13px; }
.th-taste { border: 0; background: none; padding: 2px; border-radius: 6px; flex-shrink: 0; }
.th-taste:hover kbd { border-color: var(--jade); color: var(--ink); }
.th-taste.eigen kbd { color: var(--jade); border-color: var(--jade); }
.th-taste.nimmt-auf kbd { background: var(--jade-soft); color: var(--jade); }
.th-fuss { margin: 0; padding: 10px 18px; border-top: 1px solid var(--rule); color: var(--mute); font-size: 12px; }

/* ---------- Schnellnotiz (⌥G) ---------- */
.gd-ueberzug { position: fixed; inset: 0; z-index: 205; display: grid; place-items: start center; padding: 18vh 16px 16px; background: rgb(20 18 14 / 0.22); }
.gd-karte { width: min(620px, 100%); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 10px 10px 8px 14px; }
.gd-zeile { display: flex; align-items: flex-end; gap: 8px; color: var(--jade); }
.gd-zeile > .icon { margin-bottom: 9px; }
.gd-feld { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--ink); font: 17px/1.5 var(--font); padding: 6px 0; max-height: 220px; }
.gd-feld:focus-visible { outline: none; }
.gd-hinweis { color: var(--mute); font-size: 12px; padding: 4px 0 0 26px; }
.gd-tarn { color: var(--mute); }
.gd-tarn[aria-pressed="true"] { color: var(--jade); }
/* Tarnmodus: Text nur als Unschärfe sichtbar, Cursor bleibt */
.getarnt .gd-feld { color: transparent; text-shadow: 0 0 9px var(--ink-2); caret-color: var(--jade); }
.getarnt .gd-feld::selection { background: transparent; }
.getarnt .gd-hinweis { visibility: hidden; }
@media (max-width: 760px) {
  .gd-ueberzug { padding-top: calc(10px + var(--sa-t)); }
  .gd-feld { font-size: 17px; }
}
.schluessel-feld { flex: 1; min-width: 0; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 6px 8px; }