/* Notizkladde – Farbschemata und Grundgerüst aus Carekept übernommen (light-dark je Schema),
   darunter die Arbeitsfläche mit Baum, Editor, Vorschau und Inspektor. */

@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-wght-italic.woff2") format("woff2-variations"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root { color-scheme: light dark; }
:root[data-theme="hell"] { color-scheme: light; }
:root[data-theme="dunkel"] { color-scheme: dark; }

/* Gemeinsam: Statusfarben, Markergelb, Personenfarben */
:root {
  --gelb: light-dark(#e9c766, #d9b85a);
  --gelb-tief: light-dark(#8a6a12, #f0d690);
  --gelb-hell: light-dark(#fcf5de, #3c3727);
  --rot: light-dark(#c2525a, #ec9aa0);        --rot-hell: light-dark(#fbe9ea, #47302f);
  --orange: light-dark(#c47437, #eeb07f);     --orange-hell: light-dark(#fcefe4, #46372b);
  --gruen: light-dark(#4b8a5c, #9fd2ab);      --gruen-hell: light-dark(#e6f3e9, #2d3f32);
  --grau: light-dark(#76808f, #a9b2bf);       --grau-hell: light-dark(#f0f2f5, #363c46);
  --auf-akzent: #ffffff;
  --schatten: 0 1px 2px light-dark(rgba(40, 48, 64, .05), rgba(0, 0, 0, .25)), 0 6px 18px light-dark(rgba(40, 48, 64, .05), rgba(0, 0, 0, .15));
  --r: 12px;
  --p-frost: #6f9bd1; --p-aurora: #d9727c; --p-moos: #7fae6a; --p-sand: #d9ae45;
  --p-beere: #b07aa9; --p-fjord: #4fb0bd; --p-rost: #e08a5a; --p-lavendel: #8d86d8;
}

/* Salbei – ruhiges Grün, warmes Weiß (Vorgabe) */
:root, :root[data-design="salbei"], [data-design="salbei"] {
  --bg: light-dark(#f5f7f3, #262b28);
  --flaeche: light-dark(#ffffff, #2f3531);
  --flaeche-2: light-dark(#f2f5f0, #343b36);
  --tinte: light-dark(#2c3a32, #e8eee9);
  --leise: light-dark(#66766c, #a7b4ab);
  --linie: light-dark(#dde5da, #434c46);
  --linie-2: light-dark(#ebf0e8, #3a423c);
  --akzent: light-dark(#4f8a68, #8fc6a4);
  --akzent-hell: light-dark(#e4f0e7, #34463b);
}
:root { --auf-akzent: light-dark(#ffffff, #1d2420); }

/* Himmel – frisches Blau, klares Weiß */
:root[data-design="himmel"], [data-design="himmel"] {
  --bg: light-dark(#f4f7fb, #252a31);
  --flaeche: light-dark(#ffffff, #2e343d);
  --flaeche-2: light-dark(#f0f4fa, #333a44);
  --tinte: light-dark(#26354a, #e7edf5);
  --leise: light-dark(#5f6f86, #a6b2c3);
  --linie: light-dark(#dbe3ee, #424b58);
  --linie-2: light-dark(#e9eef5, #39404b);
  --akzent: light-dark(#3f7fd0, #8ab8f0);
  --akzent-hell: light-dark(#e3eefb, #31425a);
}

/* Minze – Türkis, kühl und hell */
:root[data-design="minze"], [data-design="minze"] {
  --bg: light-dark(#f2f9f8, #232b2b);
  --flaeche: light-dark(#ffffff, #2c3535);
  --flaeche-2: light-dark(#edf6f5, #313b3b);
  --tinte: light-dark(#203a3a, #e5f0ef);
  --leise: light-dark(#5b7676, #a2b8b7);
  --linie: light-dark(#d5e7e5, #3f4e4d);
  --linie-2: light-dark(#e6f1f0, #364443);
  --akzent: light-dark(#21927f, #7fd1c2);
  --akzent-hell: light-dark(#dcf1ed, #2c4743);
}

/* Pfirsich – warmes Koralle auf hellem Sand */
:root[data-design="pfirsich"], [data-design="pfirsich"] {
  --bg: light-dark(#fcf8f5, #2c2826);
  --flaeche: light-dark(#ffffff, #35302d);
  --flaeche-2: light-dark(#faf3ee, #3b3532);
  --tinte: light-dark(#3d302c, #f2e9e5);
  --leise: light-dark(#7c6a63, #bcaca5);
  --linie: light-dark(#efe2da, #4d4440);
  --linie-2: light-dark(#f6ece6, #433b37);
  --akzent: light-dark(#d9694f, #f2a28c);
  --akzent-hell: light-dark(#fbe8e1, #4c3530);
}

/* Lavendel – sanftes Violett */
:root[data-design="lavendel"], [data-design="lavendel"] {
  --bg: light-dark(#f7f6fc, #29283a);
  --flaeche: light-dark(#ffffff, #322f44);
  --flaeche-2: light-dark(#f2f0fa, #38354b);
  --tinte: light-dark(#302d47, #ecebf6);
  --leise: light-dark(#6b6788, #b1aec8);
  --linie: light-dark(#e3e0f0, #484561);
  --linie-2: light-dark(#eeecf7, #3e3b55);
  --akzent: light-dark(#7364c9, #b0a6f0);
  --akzent-hell: light-dark(#ece9fa, #3f3a62);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tinte);
  font: 16px/1.55 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; -webkit-font-smoothing: antialiased;
}
a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.75rem; font-weight: 650; letter-spacing: -.015em; }
h2, h3 { font-weight: 600; }
b, strong { font-weight: 600; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
small, .leise { color: var(--leise); }
.leise { font-size: .9rem; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 1.5rem 0; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------- Gerüst */
.geruest { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.geruest > * { min-width: 0; }
@media (min-width: 881px) {
  /* Seitenleiste läuft auch bei langen Seiten bis ganz nach unten */
  .geruest { background: linear-gradient(to right, var(--flaeche) 259px, var(--linie) 259px, var(--linie) 260px, transparent 260px); }
}
.seite { padding: 28px 40px 80px; max-width: 1180px; width: 100%; }
.leiste {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--flaeche); border-right: 1px solid var(--linie);
  display: flex; flex-direction: column; padding: 20px 14px;
}
.marke { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; color: var(--tinte); text-decoration: none; }
.marke svg { flex: none; }
.marke b { font-size: 1.15rem; letter-spacing: -.01em; }
.leiste nav { display: flex; flex-direction: column; gap: 2px; }
.leiste .gruppe { font-size: .82rem; color: var(--leise); padding: 18px 10px 6px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--tinte); text-decoration: none;
}
.nav-link:hover { background: var(--flaeche-2); }
.nav-link { white-space: nowrap; min-width: 0; }
.nav-link .zusatz { font-weight: 400; }
.nav-link.aktiv { background: var(--akzent-hell); font-weight: 600; }
.nav-link svg { width: 18px; height: 18px; flex: none; color: var(--leise); }
.nav-link .zusatz { margin-left: auto; font-size: .8rem; color: var(--leise); }
.leiste .unten { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.leiste form { margin: 0; }
.leiste button.nav-link { width: 100%; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }

.oben { display: none; }
@media (max-width: 880px) {
  .geruest { grid-template-columns: minmax(0, 1fr); }
  .leiste { position: fixed; z-index: 40; left: 0; top: 0; width: 280px; transform: translateX(-102%);
    transition: transform .2s ease; box-shadow: var(--schatten); }
  body.nav-offen .leiste { transform: none; }
  body.nav-offen .schleier { display: block; }
  .schleier { display: none; position: fixed; inset: 0; background: rgba(20, 24, 32, .35); z-index: 30; }
  .oben { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20;
    background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: 10px 16px; }
  .oben .marke { padding: 0; }
  .oben .rechts { margin-left: auto; display: flex; gap: 6px; }
  .seite { padding: 18px 16px 80px; }
  h1 { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- Elemente */
.knopf, button.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--linie); min-height: 38px;
  background: var(--flaeche); color: var(--tinte); font: inherit; font-weight: 600; font-size: .93rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knopf:hover { border-color: var(--akzent); }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.knopf.haupt:hover { filter: brightness(1.08); }
.knopf.klein { padding: 4px 10px; min-height: 30px; font-size: .85rem; }
.knopf.gefahr { color: var(--rot); }
.knopf.gefahr:hover { border-color: var(--rot); }
.knopf.still { border-color: transparent; background: transparent; }
.knopf.still:hover { background: var(--flaeche-2); }
.knopf svg { width: 16px; height: 16px; }
.icon-knopf { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--tinte); cursor: pointer; }
.icon-knopf:hover { background: var(--flaeche-2); }
.icon-knopf svg { width: 20px; height: 20px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.kopfzeile p { margin: 4px 0 0; color: var(--leise); }

.block { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 20px 22px; margin-bottom: 18px; }
.block > h2:first-child, .block > header:first-child { margin-bottom: 12px; }
.block header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.block header h2 { margin: 0; }
.block.flach { padding: 0; overflow: hidden; }
.block.flach > header { padding: 16px 22px 0; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; align-items: start; }
.spalten > .block { margin-bottom: 0; }
.abstand { margin-top: 18px; }

.hinweis { padding: 12px 16px; border-radius: 8px; background: var(--akzent-hell); margin-bottom: 16px; }
.hinweis.ok { background: var(--gruen-hell); }
.hinweis.fehler { background: var(--rot-hell); color: var(--tinte); border-left: 4px solid var(--rot); }
.hinweis.gelb { background: var(--gelb-hell); border-left: 4px solid var(--gelb); }

.leer { padding: 22px; text-align: left; color: var(--leise); }
.leer p { margin-bottom: 10px; }

/* Listen statt Kartenstapel */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--linie-2); }
.liste > li:first-child { border-top: 0; }
.block.flach .liste > li { padding: 12px 22px; }
.liste .haupt { flex: 1; min-width: 0; }
.liste .titel { font-weight: 600; }
.liste .titel a { color: var(--tinte); text-decoration: none; }
.liste .titel a:hover { text-decoration: underline; }
.liste .meta { color: var(--leise); font-size: .9rem; display: flex; flex-wrap: wrap; column-gap: 12px; }
.liste .rechts { margin-left: auto; text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.liste .datum { font-weight: 600; white-space: nowrap; }

/* Statusmarken */
.marke-status { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600;
  padding: 2px 9px; border-radius: 99px; white-space: nowrap; background: var(--grau-hell); color: var(--grau); }
.marke-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-ueberfaellig { background: var(--rot-hell); color: var(--rot); }
.st-faellig { background: var(--orange-hell); color: var(--orange); }
.st-bald, .st-empfohlen { background: var(--gelb-hell); color: var(--gelb-tief); }
.st-termin { background: var(--akzent-hell); color: var(--akzent); }
.st-ok { background: var(--gruen-hell); color: var(--gruen); }
.st-spaeter, .st-offen, .st-verpasst { background: var(--grau-hell); color: var(--grau); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px;
  background: var(--flaeche-2); border: 1px solid var(--linie); font-size: .85rem; }
.chip.warn { background: var(--rot-hell); border-color: transparent; color: var(--rot); font-weight: 600; }
.chip.gelb { background: var(--gelb-hell); border-color: transparent; color: var(--gelb-tief); font-weight: 600; }

/* Personenzeichen */
.avatar { --farbe: var(--p-frost); flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .95rem;
  background: color-mix(in srgb, var(--farbe) 22%, var(--flaeche)); color: color-mix(in srgb, var(--farbe) 75%, var(--tinte));
  border: 2px solid var(--farbe); }
.avatar.klein { width: 26px; height: 26px; font-size: .7rem; border-width: 1.5px; }
.avatar.gross { width: 64px; height: 64px; font-size: 1.4rem; border-width: 3px; }
.f-frost { --farbe: var(--p-frost); } .f-aurora { --farbe: var(--p-aurora); } .f-moos { --farbe: var(--p-moos); }
.f-sand { --farbe: var(--p-sand); } .f-beere { --farbe: var(--p-beere); } .f-fjord { --farbe: var(--p-fjord); }
.f-rost { --farbe: var(--p-rost); } .f-lavendel { --farbe: var(--p-lavendel); }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--farbe); flex: none; }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; }
.kennzahl { padding: 4px 18px 4px 0; }
.kennzahl + .kennzahl { border-left: 1px solid var(--linie-2); padding-left: 18px; }
.kennzahl .wert { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.kennzahl .wert small { font-size: .9rem; font-weight: 400; color: var(--leise); }
.kennzahl .zu { font-size: .85rem; color: var(--leise); }
@media (max-width: 560px) {
  .kennzahlen { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .kennzahl:nth-child(odd) { border-left: 0; padding-left: 0; }
}

.felder { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.felder dt { color: var(--leise); }
.felder dd { margin: 0; white-space: pre-line; }
@media (max-width: 560px) { .felder { grid-template-columns: 1fr; gap: 0; } .felder dd { margin-bottom: 8px; } }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; font-variant-numeric: tabular-nums; }
.tabelle th { text-align: left; font-weight: 600; color: var(--leise); font-size: .85rem; padding: 8px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--linie-2); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .zahl { text-align: right; white-space: nowrap; }
.tabelle .gruppe td { background: var(--flaeche-2); font-weight: 600; font-size: .85rem; color: var(--leise); padding-top: 6px; padding-bottom: 6px; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wert-hoch, .wert-niedrig { font-weight: 600; color: var(--rot); }
.wert-hoch::after { content: " ↑"; }
.wert-niedrig::after { content: " ↓"; }

/* Formulare */
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.formular .breit { grid-column: 1 / -1; }
.formular.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 680px) { .formular, .formular.drei { grid-template-columns: 1fr; } }
label { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; font-weight: 600; }
.formular > label { justify-content: flex-end; }
label .einheit { font-weight: 400; color: var(--leise); margin-left: 4px; }
label .hilfe { font-weight: 400; color: var(--leise); font-size: .85rem; }
input, select, textarea {
  font: inherit; font-weight: 400; font-size: 1rem; color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 8px; padding: 9px 11px; width: 100%; min-height: 42px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { height: 44px; }
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; line-height: 1.2; }
textarea { min-height: 90px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 0; border-color: var(--akzent); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--akzent); flex: none; }
label.haken { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
fieldset { border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px; margin: 0; }
legend { font-weight: 600; font-size: .9rem; padding: 0 6px; }
.haken-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.formular-ende { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.formular-ende .rechts { margin-left: auto; }
.doppel { display: flex; gap: 8px; align-items: center; }
.doppel span { color: var(--leise); }
details.mehr > summary { cursor: pointer; color: var(--akzent); font-weight: 600; padding: 6px 0; list-style: none; }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary::before { content: "+ "; }
details.mehr[open] > summary::before { content: "– "; }

dialog { border: 1px solid var(--linie); border-radius: 12px; padding: 0; background: var(--flaeche); color: var(--tinte);
  width: min(560px, calc(100vw - 24px)); box-shadow: var(--schatten); }
dialog::backdrop { background: rgba(20, 24, 32, .45); }
dialog form.inhalt { padding: 20px 22px; }
dialog h2 { margin-bottom: 14px; }

/* Zeitstrahl */
.zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.zeitstrahl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--linie); }
.zeitstrahl li { position: relative; padding: 0 0 16px 10px; }
.zeitstrahl li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--flaeche); border: 2px solid var(--akzent); }
.zeitstrahl .jahr { list-style: none; padding: 8px 0 10px; font-weight: 600; font-size: 1.1rem; }
.zeitstrahl .jahr::before { display: none; }

/* Anmeldung */
.einzel { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.einzel .karte { width: min(440px, 100%); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 30px 28px; box-shadow: var(--schatten); }
.einzel .karte.breit { width: min(620px, 100%); }
.einzel .marke { padding: 0 0 22px; }
.einzel h1 { font-size: 1.4rem; margin-bottom: 8px; }
.einzel form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.qr { background: #fff; padding: 6px; border-radius: 8px; width: 240px; border: 1px solid var(--linie); }
.qr svg { width: 100%; height: auto; display: block; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 1.15rem; font-weight: 600; letter-spacing: .04em;
  background: var(--gelb-hell); padding: 16px 18px; border-radius: 8px; }
.code-eingabe { font-size: 1.6rem; letter-spacing: .3em; text-align: center; font-weight: 600; }

@media print {
  :root, :root[data-theme], :root[data-design] { color-scheme: light; --bg: #fff; --flaeche: #fff; --flaeche-2: #fff; --tinte: #000; --leise: #333; --linie: #999; --linie-2: #ccc; }
  .leiste, .oben, .reiter, .knopf, .knopfreihe, .formular-ende, .nicht-drucken { display: none !important; }
  .geruest { display: block; }
  .seite { padding: 0; max-width: none; }
  .block { border: 0; padding: 0; }
  body { font-size: 11pt; }
  a { color: #000; text-decoration: none; }
}

/* Farbschema-Auswahl */
.designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 14px; }
.design-wahl { display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--tinte); background: none;
  border: 2px solid var(--linie-2); border-radius: var(--r); padding: 8px 8px 10px; cursor: pointer; }
.design-wahl:hover { border-color: var(--linie); }
.design-wahl.gewaehlt { border-color: var(--akzent); }
.design-wahl .leise { font-size: .82rem; }
.design-name { font-weight: 600; margin-top: 4px; }
.vorschau { display: flex; gap: 6px; height: 86px; border-radius: 8px; padding: 6px; border: 1px solid rgba(0, 0, 0, .06); }
.v-leiste { width: 30%; border-radius: 5px; padding: 6px 5px; display: flex; flex-direction: column; gap: 4px; }
.v-leiste i { display: block; height: 6px; border-radius: 3px; }
.v-inhalt { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.v-karte { flex: 1; border-radius: 5px; padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.v-karte b { display: block; height: 6px; width: 60%; border-radius: 3px; opacity: .8; }
.v-karte em { display: block; height: 14px; border-radius: 3px; }
.v-knopf { height: 12px; width: 45%; border-radius: 4px; }

/* Zeitraum und große Ansicht */
.zeitraum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -6px 0 18px; }
.zeitraum label.haken { gap: 6px; }
.zeitraum input[type="date"] { width: auto; height: 36px; padding: 4px 8px; }
.segmente { display: inline-flex; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 3px; }
.segmente button { font: inherit; font-size: .9rem; border: 0; background: none; color: var(--leise); padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.segmente button.aktiv { background: var(--flaeche); color: var(--tinte); font-weight: 600; box-shadow: var(--schatten); }
.icon-knopf.klein { width: 32px; height: 32px; }
.icon-knopf.klein svg { width: 18px; height: 18px; }
dialog.gross { width: min(1280px, 96vw); max-height: 94vh; padding: 18px 22px 22px; }
.gross-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; }
.gross-kopf h2 { margin: 0; }
.gross-kopf .icon-knopf { margin-left: auto; }
@media (max-width: 680px) {
  dialog.gross { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 12px; }
}

/* ================================================================ Notizkladde */
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 800; font-display: swap; }

:root {
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lb: var(--lb-breite, 272px);
  /* Syntaxfarben – ruhig, in hell und dunkel lesbar */
  --sx-kw: light-dark(#a1366c, #f2a3c9);
  --sx-str: light-dark(#3c7a3c, #a8d9a1);
  --sx-num: light-dark(#a0561a, #f1bb84);
  --sx-fn: light-dark(#2e6bb0, #8fbcf2);
  --sx-attr: light-dark(#6f52c0, #c4b5f7);
  --sx-var: light-dark(#ad4a1f, #f2a585);
  --sx-kom: var(--leise);
  --marke-gelb: light-dark(#f8eec9, #4a432c);
}
code, kbd, pre { font-family: var(--mono); font-variant-ligatures: none; }
code { font-size: .88em; }
kbd { font-size: .78rem; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--linie); border-bottom-width: 2px; background: var(--flaeche); color: var(--tinte); }

/* ---------------------------------------------------------------- Seitenleiste: breiter, einklappbar */
.geruest { grid-template-columns: var(--lb) minmax(0, 1fr); }
@media (max-width: 880px) { .geruest { grid-template-columns: minmax(0, 1fr); } body.werk .oben { display: none; } }
@media (min-width: 881px) {
  .geruest { background: linear-gradient(to right, var(--flaeche) calc(var(--lb) - 1px), var(--linie) calc(var(--lb) - 1px), var(--linie) var(--lb), transparent var(--lb)); }
  :root.leiste-zu { --lb: 64px; }
  .leiste-zu .leiste { padding: 20px 10px; }
  .leiste-zu .leiste .text, .leiste-zu .leiste .zusatz, .leiste-zu .leiste .marke b, .leiste-zu .baum-bereich,
  .leiste-zu .leiste .version, .leiste-zu .leiste .gruppe { display: none; }
  .leiste-zu .nav-link { justify-content: center; padding: 9px; }
  .leiste-zu .leiste-kopf { flex-direction: column; gap: 8px; }
  .leiste-zu .leiste-kopf .marke { padding: 4px 0 0; }
  .leiste-zu .einklappen svg { transform: scaleX(-1); }
}
.leiste-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 14px; }
.leiste-kopf .marke { padding: 4px 10px; }
.einklappen { color: var(--leise); }
.leiste-fuell { flex: 1; }
.leiste .unten { margin-top: 0; }
.leiste .version { padding: 10px 10px 0; font-size: .78rem; }
.nav-link .text { overflow: hidden; text-overflow: ellipsis; }
.nav-link .taste { font-size: .72rem; letter-spacing: .02em; }
.logo { flex: none; display: block; }
.nur-zu, .nur-mobil { display: none !important; }
@media (min-width: 881px) { .leiste-zu .nur-zu { display: inline-flex !important; } .leiste-zu .einklappen { display: inline-flex; } }
@media (max-width: 880px) {
  .nur-mobil { display: inline-flex !important; }
  .nicht-mobil { display: none !important; }
  .einklappen { display: none; }
  .leiste .text { display: inline; }
}

/* ---------------------------------------------------------------- Baum */
body.werk .leiste { overflow: hidden; }
.baum-bereich { flex: 1 1 auto; min-height: 60px; overflow-y: auto; margin: 6px -8px 0; padding: 0 8px 12px;
  border-top: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie-2); scrollbar-width: thin; }
.baum-kopf { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 4px 10px; font-size: .82rem; color: var(--leise); }
.baum-knoepfe { display: flex; gap: 0; }
.icon-knopf.mini { width: 26px; height: 26px; color: var(--leise); }
.icon-knopf.mini svg { width: 16px; height: 16px; }
.icon-knopf.mini:hover { color: var(--tinte); }
.baum, .baum ul { list-style: none; margin: 0; padding: 0; }
.baum-laedt { padding: 6px 10px; }
.knoten { --t: 0; display: flex; align-items: center; gap: 6px; min-height: 27px; padding: 2px 4px 2px calc(8px + var(--t) * 13px);
  border-radius: 6px; color: var(--tinte); text-decoration: none; font-size: .86rem; line-height: 1.3; cursor: pointer; user-select: none; position: relative; }
.knoten:hover { background: var(--flaeche-2); }
.knoten:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.knoten.aktiv { background: var(--akzent-hell); font-weight: 600; }
.knoten > svg { width: 15px; height: 15px; flex: none; color: var(--leise); }
.knoten.aktiv > svg { color: var(--akzent); }
.knoten .pfeil { width: 14px; height: 14px; flex: none; color: var(--leise); transition: transform .15s ease; }
.knoten.offen .pfeil { transform: rotate(90deg); }
.knoten .pfeil-platz { width: 14px; flex: none; }
.knoten .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knoten.fremd .name { color: var(--leise); }
.knoten .mehr-knopf { width: 24px; height: 24px; flex: none; border-radius: 6px; border: 0; background: none; color: var(--leise); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; opacity: 0; padding: 0; }
.knoten .mehr-knopf svg { width: 16px; height: 16px; }
.knoten:hover .mehr-knopf, .knoten .mehr-knopf:focus-visible, .knoten.menue-offen .mehr-knopf { opacity: 1; }
.knoten .mehr-knopf:hover { background: var(--linie-2); color: var(--tinte); }
@media (hover: none) { .knoten .mehr-knopf { opacity: .6; } }
.knoten .punkt-extern { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }
.knoten.ziel-drop { outline: 2px dashed var(--akzent); outline-offset: -2px; }

/* Kontextmenü */
.menue { position: absolute; z-index: 60; min-width: 210px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: var(--schatten); padding: 5px; display: flex; flex-direction: column; }
.menue button, .menue a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: 6px;
  font: inherit; font-size: .92rem; color: var(--tinte); text-align: left; cursor: pointer; text-decoration: none; white-space: nowrap; }
.menue button:hover, .menue a:hover, .menue button:focus-visible { background: var(--flaeche-2); outline: none; }
.menue svg { width: 16px; height: 16px; color: var(--leise); flex: none; }
.menue .gefahr, .menue .gefahr svg { color: var(--rot); }
.menue hr { margin: 4px 2px; border-color: var(--linie-2); }
.menue form { margin: 0; }
details.aktionen-menue { position: relative; }
details.aktionen-menue > summary { list-style: none; }
details.aktionen-menue > summary::-webkit-details-marker { display: none; }
details.aktionen-menue .menue { right: 0; top: 36px; }

/* ---------------------------------------------------------------- Arbeitsfläche */
body.werk { overflow: hidden; }
body.werk .geruest { height: 100vh; height: 100dvh; min-height: 0; }
body.werk .leiste { height: 100vh; height: 100dvh; }
.seite.arbeit { padding: 0; max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; min-width: 0; }
.werkkopf { display: flex; align-items: center; gap: 6px; padding: 9px 14px 9px 18px; min-height: 58px; flex: none;
  background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.brotkrumen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; color: var(--leise); font-size: .88rem; overflow: hidden; }
.brotkrumen .krume { white-space: nowrap; cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.brotkrumen .krume:hover { background: var(--flaeche-2); color: var(--tinte); }
.brotkrumen .sep { opacity: .5; }
.brotkrumen b { color: var(--tinte); font-size: 1.02rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 4px; border-radius: 5px; }
.brotkrumen b.umbenennbar { cursor: text; }
.brotkrumen b.umbenennbar:hover { background: var(--flaeche-2); }
.speicherstand { font-size: .82rem; color: var(--leise); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 6px; }
.speicherstand::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); display: none; }
.speicherstand.gespeichert::before { display: block; }
.speicherstand.ungespeichert::before, .speicherstand.speichert::before { display: block; background: var(--orange); }
.speicherstand.fehler { color: var(--rot); }
.speicherstand.fehler::before { display: block; background: var(--rot); }
.werk-knoepfe { display: flex; align-items: center; gap: 4px; }
.ansicht-wahl button { display: inline-flex; align-items: center; gap: 6px; }
.ansicht-wahl svg { width: 16px; height: 16px; }
@media (max-width: 1280px) { .ansicht-wahl span { display: none; } .ansicht-wahl button { padding: 5px 9px; } }
.icon-knopf[aria-pressed="true"] { background: var(--akzent-hell); color: var(--akzent); }
#favorit-knopf[aria-pressed="true"] { background: none; color: var(--gelb); }
#favorit-knopf[aria-pressed="true"]:hover { background: var(--flaeche-2); }

.formatleiste { display: flex; align-items: center; gap: 1px; padding: 5px 12px; flex: none; background: var(--flaeche);
  border-bottom: 1px solid var(--linie-2); overflow-x: auto; scrollbar-width: none; }
.formatleiste::-webkit-scrollbar { display: none; }
.formatleiste .icon-knopf { width: 34px; height: 32px; flex: none; color: var(--leise); position: relative; }
.formatleiste .icon-knopf:hover { color: var(--tinte); }
.formatleiste .icon-knopf svg { width: 18px; height: 18px; }
.formatleiste .icon-knopf small { position: absolute; right: 1px; bottom: 0; font-size: .58rem; font-weight: 700; }
.formatleiste .trenner { width: 1px; height: 20px; background: var(--linie); margin: 0 6px; flex: none; }
.formatleiste-tipp { margin-left: auto; font-size: .8rem; white-space: nowrap; padding-left: 12px; }
@media (max-width: 1100px) { .formatleiste-tipp { display: none; } }

.hinweisband { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 18px; background: var(--orange-hell);
  border-bottom: 1px solid var(--linie); font-size: .92rem; flex: none; }
.hinweisband.rot { background: var(--rot-hell); }
.hinweisband svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
.hinweisband .knopfreihe { margin-left: auto; }

.werkflaeche { flex: 1; min-height: 0; display: flex; position: relative; }
.werkflaeche > * { min-width: 0; min-height: 0; }
.editor-flaeche { flex: 1 1 0; background: var(--flaeche); overflow: hidden; display: flex; }
.vorschau-flaeche { flex: 1 1 0; overflow-y: auto; background: var(--bg); scroll-behavior: auto; }
.werkflaeche[data-ansicht="geteilt"] .vorschau-flaeche { border-left: 1px solid var(--linie); }
.werkflaeche[data-ansicht="editor"] .vorschau-flaeche, .werkflaeche[data-ansicht="vorschau"] .editor-flaeche { display: none; }
.anzeige-flaeche { flex: 1; overflow: auto; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px; }
.anzeige-flaeche img { max-width: 100%; max-height: 70vh; border-radius: 8px; box-shadow: var(--schatten); background: repeating-conic-gradient(var(--flaeche-2) 0% 25%, var(--flaeche) 0% 50%) 50% / 20px 20px; }

.startflaeche { flex: 1; overflow-y: auto; background: var(--bg); }
.start-inhalt { max-width: 760px; padding: 48px 40px 80px; }
.start-inhalt h1 { margin-bottom: 8px; }
.start-inhalt .liste .titel { cursor: pointer; }
.listen-icon svg { width: 20px; height: 20px; color: var(--leise); margin-top: 2px; }

/* ---------------------------------------------------------------- Inspektor */
.inspektor { width: var(--ib, 360px); flex: none; position: relative; display: flex; flex-direction: column; background: var(--flaeche); border-left: 1px solid var(--linie); }
.inspektor-kopf { display: flex; align-items: center; gap: 4px; padding-right: 6px; border-bottom: 1px solid var(--linie); flex: none; }
.inspektor .reiter { border: 0; margin: 0; padding: 0 6px; flex: 1; }
.reiter button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 9px 9px; border: 0; border-bottom: 3px solid transparent; background: none;
  color: var(--leise); font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; white-space: nowrap; position: relative; }
.reiter button svg { width: 16px; height: 16px; flex: none; }
.reiter button:hover { color: var(--tinte); }
.reiter button.aktiv { color: var(--tinte); border-bottom-color: var(--akzent); }
.reiter button .zahl { font-style: normal; font-size: .72rem; background: var(--orange-hell); color: var(--orange); border-radius: 99px; padding: 0 6px; }
.inspektor .reiter { display: flex; overflow-x: auto; scrollbar-width: none; }
.inspektor .reiter::-webkit-scrollbar { display: none; }
.inspektor .reiter button:not(.aktiv) span { display: none; }
.inspektor .reiter button:not(.aktiv) { padding: 10px 10px 9px; }
.inspektor-inhalt { flex: 1; overflow-y: auto; padding: 16px 18px 60px; }
.inspektor-inhalt h3 { font-size: .8rem; font-weight: 600; color: var(--leise); text-transform: none; margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.inspektor-inhalt h3:first-child { margin-top: 0; }
.inspektor-inhalt h3 svg { width: 15px; height: 15px; flex: none; }
.inspektor-inhalt .leer { padding: 6px 0; }
.i-titel { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.i-titel h2 { font-size: 1rem; }

/* Ghost-Felder */
.g-feld { margin-bottom: 14px; }
.g-feld .kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.g-feld .kopf label { font-size: .85rem; font-weight: 600; flex: 1; min-width: 0; display: block; }
.g-feld .kopf label small { font-weight: 400; }
.zaehler { font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--leise); padding: 1px 7px; border-radius: 99px; background: var(--flaeche-2); white-space: nowrap; }
.zaehler.nah { background: var(--gelb-hell); color: var(--gelb-tief); }
.zaehler.drueber { background: var(--rot-hell); color: var(--rot); }
.g-feld input, .g-feld textarea { font-size: .93rem; padding: 7px 9px; min-height: 0; }
.g-feld input { height: 36px !important; }
.g-feld textarea { min-height: 60px; resize: vertical; field-sizing: content; max-height: 260px; }
.g-feld input.mono { font-family: var(--mono); font-size: .85rem; }
.g-feld .notiz { font-size: .8rem; color: var(--leise); margin-top: 4px; display: flex; gap: 6px; align-items: flex-start; }
.g-feld .notiz svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--gelb-tief); }
.icon-knopf.kopier { width: 28px; height: 28px; color: var(--leise); }
.icon-knopf.kopier svg { width: 16px; height: 16px; }
.icon-knopf.kopiert { color: var(--gruen); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tags .chip { font-size: .8rem; padding: 2px 9px; }
.tags .chip.primaer { background: var(--akzent-hell); border-color: transparent; color: var(--akzent); font-weight: 600; }
.tags .chip.intern { font-family: var(--mono); font-size: .76rem; }
.schalterzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 0; border-top: 1px solid var(--linie-2); margin-top: 6px; }
.schalterzeile label { font-weight: 400; font-size: .88rem; }

/* Stand */
.stempel { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; background: var(--flaeche-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.stempel .gross { grid-row: span 2; font-size: 1.6rem; font-weight: 650; line-height: 1.1; color: var(--akzent); }
.stempel .gross small { display: block; font-size: .72rem; font-weight: 600; color: var(--leise); }
.stempel span { font-size: .86rem; }
.stand-liste { font-size: .9rem; line-height: 1.5; }
.stand-liste > ul { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; }
.stand-liste > ul::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--linie); }
.stand-liste > ul > li { position: relative; padding: 0 0 14px 8px; }
.stand-liste > ul > li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--akzent); }
.stand-liste ul ul { padding-left: 16px; margin: 4px 0 0; }
.stand-liste ul ul li { margin: 3px 0; color: var(--tinte); }
.stand-liste p { margin: 0 0 4px; }
.stand-liste code { font-size: .82em; background: var(--flaeche-2); padding: 0 4px; border-radius: 4px; }

/* Marker */
.marker-zahlen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.marker-zahlen button { cursor: pointer; font: inherit; }
.m-liste { list-style: none; margin: 0; padding: 0; }
.m-liste li { display: flex; gap: 10px; padding: 8px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; font-size: .88rem; line-height: 1.45; }
.m-liste li:hover { background: var(--flaeche-2); }
.m-liste .zeile { font-size: .75rem; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px; min-width: 34px; text-align: right; }
.m-liste .text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.m-liste code { font-size: .82em; }
.m-art { display: inline-block; font-size: .7rem; font-weight: 700; padding: 0 6px; border-radius: 99px; margin-right: 4px; letter-spacing: .02em; vertical-align: 1px; }
.m-art, .zw-m { background: var(--marke-gelb); color: var(--gelb-tief); }
.m-art.neu, .zw-m.neu { background: var(--gruen-hell); color: var(--gruen); }
.m-art.gestrichen, .zw-m.gestrichen, .m-art.bleibt, .zw-m.bleibt { background: var(--grau-hell); color: var(--grau); }
.m-art.pruefen, .zw-m.pruefen { background: var(--orange-hell); color: var(--orange); }
details.m-gruppe { border-top: 1px solid var(--linie-2); }
details.m-gruppe > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 0; font-weight: 600; font-size: .9rem; }
details.m-gruppe > summary::-webkit-details-marker { display: none; }
details.m-gruppe > summary svg { width: 14px; height: 14px; color: var(--leise); transition: transform .15s; }
details.m-gruppe[open] > summary svg { transform: rotate(90deg); }
details.m-gruppe > summary .zaehler { margin-left: auto; }

/* Gliederung */
.kennzahlen.klein { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.kennzahlen.klein .kennzahl { padding: 0 10px 0 0; }
.kennzahlen.klein .kennzahl + .kennzahl { padding-left: 12px; }
.kennzahlen.klein .wert { font-size: 1.25rem; }
.kennzahlen.klein .zu { font-size: .78rem; }
.gliederung { list-style: none; margin: 0; padding: 0; }
.gliederung li { --e: 1; padding: 5px 8px 5px calc(8px + (var(--e) - 1) * 14px); margin: 0 -8px; border-radius: 7px; cursor: pointer; font-size: .9rem; line-height: 1.35; }
.gliederung li:hover { background: var(--flaeche-2); }
.gliederung li.e1 { font-weight: 650; }
.gliederung li.e2 { font-weight: 600; }
.gliederung li.e3, .gliederung li.e4 { color: var(--leise); }
.gliederung li.hier { background: var(--akzent-hell); }

/* Verlauf */
.v-liste { list-style: none; margin: 0; padding: 0; }
.v-liste li { padding: 9px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.v-liste li:hover { background: var(--flaeche-2); }
.v-liste .betreff { font-size: .9rem; overflow-wrap: anywhere; }
.v-liste .meta { font-size: .78rem; color: var(--leise); display: flex; gap: 10px; }
.v-liste .meta code { font-size: .74rem; }

/* ---------------------------------------------------------------- Editor (CodeMirror) */
.editor-flaeche .cm-editor { flex: 1; height: 100%; background: var(--flaeche); color: var(--tinte); font-size: 14.5px; }
.editor-flaeche .cm-editor.cm-focused { outline: none; }
.editor-flaeche .cm-scroller { font-family: var(--mono); font-variant-ligatures: none; line-height: 1.7; padding: 22px 0 45vh; scrollbar-width: thin; }
.editor-flaeche .cm-content { max-width: 900px; margin: 0 auto; padding: 0 34px; caret-color: var(--akzent); width: 100%; }
.werkflaeche[data-ansicht="geteilt"] .cm-content { max-width: none; padding: 0 26px; }
.editor-flaeche .cm-line { padding: 0; }
.editor-flaeche .cm-cursor { border-left: 2px solid var(--akzent); }
.editor-flaeche .cm-activeLine { background: color-mix(in srgb, var(--akzent-hell) 40%, transparent); }
.editor-flaeche .cm-selectionBackground, .editor-flaeche .cm-focused .cm-selectionBackground { background: color-mix(in srgb, var(--akzent) 24%, transparent) !important; }
.editor-flaeche .cm-content ::selection { background: color-mix(in srgb, var(--akzent) 24%, transparent); }
.editor-flaeche .cm-matchingBracket { background: var(--akzent-hell); outline: 1px solid var(--linie); }
.editor-flaeche .cm-searchMatch { background: var(--gelb-hell); outline: 1px solid var(--gelb); }
.editor-flaeche .cm-searchMatch-selected { background: var(--gelb); }
.cm-zw-marke { background: var(--marke-gelb); border-radius: 4px; color: var(--gelb-tief); }
.cm-zw-shot { background: var(--grau-hell); border-radius: 4px; color: var(--leise); }
.cm-zw-kopf { color: var(--akzent); font-weight: 650; }
.cm-zw-h1 { font-size: 1.22em; }
.cm-zw-h2 { font-size: 1.1em; }
.cm-zw-zaun { color: var(--leise); }
.cm-zw-codezeile { background: color-mix(in srgb, var(--flaeche-2) 85%, transparent); }
.editor-flaeche .cm-foldPlaceholder { background: var(--akzent-hell); border: 0; color: var(--akzent); font-family: "Figtree", sans-serif; font-size: .82rem;
  font-weight: 600; padding: 1px 9px; border-radius: 99px; margin-left: 6px; cursor: pointer; }
.editor-flaeche .cm-panels { background: var(--flaeche-2); color: var(--tinte); border-color: var(--linie) !important; font-family: "Figtree", sans-serif; }
.editor-flaeche .cm-panel.cm-search { padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .88rem; }
.editor-flaeche .cm-panel.cm-search input[type="text"], .editor-flaeche .cm-textfield { height: 32px !important; min-height: 0; width: 200px; padding: 4px 8px; font-size: .9rem; margin: 0; }
.editor-flaeche .cm-panel.cm-search input[type="checkbox"] { width: 15px; height: 15px; }
.editor-flaeche .cm-panel.cm-search label { flex-direction: row; align-items: center; gap: 4px; font-weight: 400; font-size: .85rem; }
.editor-flaeche .cm-button { background: var(--flaeche); background-image: none; border: 1px solid var(--linie); border-radius: 7px; color: var(--tinte); font: inherit; font-size: .85rem; padding: 4px 10px; margin: 0; }
.editor-flaeche .cm-panel.cm-search [name="close"] { font-size: 1.2rem; color: var(--leise); cursor: pointer; position: static; margin-left: auto; padding: 0 6px; background: none; border: 0; }

/* Slash-Menü */
.cm-tooltip.cm-tooltip-autocomplete { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; box-shadow: var(--schatten); padding: 5px; font-family: "Figtree", sans-serif; }
.cm-tooltip.cm-tooltip-autocomplete > ul { max-height: 340px !important; min-width: 300px; font-family: "Figtree", sans-serif !important; }
.cm-tooltip.cm-tooltip-autocomplete > ul > li { display: flex !important; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 7px; line-height: 1.3; }
.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] { background: var(--akzent-hell); color: var(--tinte); }
.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section { display: block; padding: 8px 10px 3px; font-size: .74rem; font-weight: 600; color: var(--leise); border: 0; }
.cm-completionLabel { font-size: .92rem; font-weight: 600; font-family: var(--mono); }
.cm-completionDetail { margin-left: auto !important; font-style: normal !important; font-size: .82rem; color: var(--leise); padding-left: 14px; font-family: "Figtree", sans-serif; }
.cm-completionMatchedText { text-decoration: none; color: var(--akzent); }
.zw-slash-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--flaeche-2); border: 1px solid var(--linie-2); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--leise); }
.zw-slash-icon svg { width: 16px; height: 16px; }
.cm-tooltip { background: var(--flaeche); border-color: var(--linie); color: var(--tinte); }

/* CodeMirror-Syntax */
.tok-heading { color: var(--tinte); font-weight: 650; }
.tok-emphasis { font-style: italic; }
.tok-strong { font-weight: 700; }
.tok-strikethrough { text-decoration: line-through; color: var(--leise); }
.tok-link, .tok-url { color: var(--akzent); }
.tok-url { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--akzent) 40%, transparent); }
.tok-monospace { color: var(--sx-var); }
.tok-quote { color: var(--leise); }
.tok-list { color: var(--akzent); font-weight: 650; }
.tok-meta, .tok-processingInstruction { color: var(--leise); }
.tok-keyword { color: var(--sx-kw); }
.tok-string, .tok-string2 { color: var(--sx-str); }
.tok-number, .tok-bool, .tok-atom { color: var(--sx-num); }
.tok-comment { color: var(--sx-kom); font-style: italic; }
.tok-variableName.tok-definition, .tok-function { color: var(--sx-fn); }
.tok-propertyName, .tok-attributeName { color: var(--sx-attr); }
.tok-typeName, .tok-className, .tok-tagName { color: var(--sx-fn); }
.tok-operator, .tok-punctuation { color: var(--leise); }
.tok-contentSeparator { color: var(--leise); }

/* ---------------------------------------------------------------- Vorschau (Artikel) */
.artikel { max-width: 780px; margin: 0 auto; padding: 34px 44px 50vh; font-size: 1.02rem; line-height: 1.72; overflow-wrap: break-word; }
.werkflaeche[data-ansicht="geteilt"] .artikel { padding: 28px 34px 50vh; }
.artikel > :first-child { margin-top: 0; }
.artikel h1 { font-size: 2rem; margin: 0 0 .7em; line-height: 1.2; }
.artikel h2 { font-size: 1.42rem; margin: 1.9em 0 .6em; line-height: 1.25; }
.artikel h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
.artikel h4 { font-size: 1rem; margin: 1.4em 0 .4em; }
.artikel p, .artikel ul, .artikel ol, .artikel pre, .artikel blockquote, .artikel table, .artikel .zw-shot { margin: 0 0 1.05em; }
.artikel ul, .artikel ol { padding-left: 1.45em; }
.artikel li { margin: .25em 0; }
.artikel li > ul, .artikel li > ol { margin: .2em 0; }
.artikel a { overflow-wrap: anywhere; }
.artikel code { background: var(--flaeche-2); border: 1px solid var(--linie-2); padding: .08em .36em; border-radius: 5px; font-size: .86em; }
.artikel pre { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: .84rem; line-height: 1.6; position: relative; }
.artikel pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.artikel pre .sprache { position: absolute; top: 6px; right: 10px; font-family: "Figtree", sans-serif; font-size: .7rem; font-weight: 600; color: var(--leise); }
.artikel blockquote { border-left: 4px solid var(--akzent); background: var(--akzent-hell); padding: 12px 16px; border-radius: 0 10px 10px 0; margin-left: 0; margin-right: 0; }
.artikel blockquote > :last-child { margin-bottom: 0; }
.artikel blockquote.warn { border-left-color: var(--orange); background: var(--orange-hell); }
.artikel table { border-collapse: collapse; width: 100%; font-size: .92rem; display: block; overflow-x: auto; }
.artikel th, .artikel td { border: 1px solid var(--linie); padding: 7px 10px; text-align: left; vertical-align: top; }
.artikel th { background: var(--flaeche-2); font-weight: 600; }
.artikel hr { margin: 2.2em 0; }
.artikel img { max-width: 100%; height: auto; border-radius: 6px; }
.artikel img.fehlt { min-width: 220px; min-height: 60px; border: 1.5px dashed var(--rot); }
.artikel .task-list-item { list-style: none; }
.artikel .task-list-item > input { margin: 0 .5em 0 -1.4em; vertical-align: -2px; cursor: pointer; }
.artikel ul.contains-task-list { padding-left: 1.45em; }
.artikel .mermaid { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 14px; text-align: center; margin: 0 0 1.05em; overflow-x: auto; }
.artikel .mermaid.fehler { color: var(--rot); font-size: .85rem; text-align: left; white-space: pre-wrap; }
.artikel details { border: 1px solid var(--linie); border-radius: 10px; padding: 8px 14px; margin: 0 0 1.05em; background: var(--flaeche); }
.artikel details > summary { cursor: pointer; font-weight: 600; }
.artikel .fn { font-size: .85rem; }
.zw-m { display: inline-block; font-family: "Figtree", sans-serif; font-size: .7rem; font-weight: 700; line-height: 1.6; padding: 0 7px; border-radius: 99px; vertical-align: 1px; cursor: help; white-space: nowrap; letter-spacing: .01em; }
.zw-shot { display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--linie); border-radius: 10px; padding: 12px 14px; color: var(--leise); font-size: .9rem; line-height: 1.45; background: var(--flaeche); }
.zw-shot svg { width: 22px; height: 22px; flex: none; }
.artikel.lesen .zw-m { display: none; }
.artikel .zw-ausgeblendet { display: flex; align-items: center; gap: 8px; color: var(--leise); font-size: .85rem; border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 2em; }
.artikel .zw-ausgeblendet svg { width: 16px; height: 16px; }

/* highlight.js */
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-literal { color: var(--sx-kw); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-string { color: var(--sx-str); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--sx-num); }
.hljs-comment, .hljs-quote, .hljs-meta { color: var(--sx-kom); font-style: italic; }
.hljs-title, .hljs-section, .hljs-function .hljs-title, .hljs-title.function_ { color: var(--sx-fn); }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-selector-attr, .hljs-name, .hljs-tag { color: var(--sx-attr); }
.hljs-variable, .hljs-template-variable, .hljs-params, .hljs-subst { color: var(--sx-var); }
.hljs-deletion { color: var(--rot); }
.hljs-type, .hljs-class .hljs-title { color: var(--sx-fn); }

/* ---------------------------------------------------------------- Dialoge: Suche, Konflikt, Eingaben */
dialog.zw { width: min(560px, calc(100vw - 24px)); }
dialog.zw .inhalt { padding: 20px 22px; }
dialog.zw .inhalt > label + label { margin-top: 12px; }
dialog.zw .formular-ende { margin-top: 18px; }
dialog.suche { width: min(680px, calc(100vw - 24px)); margin-top: 10vh; }
.suche-feld { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.suche-feld svg { width: 20px; height: 20px; color: var(--leise); flex: none; }
.suche-feld input { border: 0; outline: none !important; padding: 4px 0; font-size: 1.1rem; height: 36px !important; background: none; }
.suche-ergebnisse { max-height: min(60vh, 520px); overflow-y: auto; padding: 6px; }
.suche-gruppe { font-size: .76rem; font-weight: 600; color: var(--leise); padding: 10px 10px 4px; }
.treffer { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.treffer svg { width: 18px; height: 18px; color: var(--leise); flex: none; margin-top: 2px; }
.treffer.aktiv { background: var(--akzent-hell); }
.treffer .t { font-weight: 600; font-size: .95rem; }
.treffer .p { font-size: .8rem; color: var(--leise); }
.treffer .a { font-size: .85rem; color: var(--leise); margin-top: 2px; line-height: 1.45; }
.treffer mark { background: var(--gelb-hell); color: var(--tinte); border-radius: 3px; padding: 0 2px; }
.suche-fuss { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--linie-2); font-size: .78rem; color: var(--leise); }
.suche-leer { padding: 18px 12px; color: var(--leise); font-size: .92rem; }

dialog.gross { display: flex; flex-direction: column; }
dialog.gross:not([open]) { display: none; }
.diff { font-family: var(--mono); font-size: .8rem; line-height: 1.55; border: 1px solid var(--linie); border-radius: 10px; overflow: auto; flex: 1; min-height: 200px; max-height: 62vh; background: var(--flaeche); }
.diff div { padding: 0 12px 0 46px; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; min-height: 1.55em; }
.diff div::before { position: absolute; left: 0; width: 38px; text-align: right; color: var(--leise); content: attr(data-n); font-size: .72rem; }
.diff .plus { background: var(--gruen-hell); }
.diff .minus { background: var(--rot-hell); }
.diff .plus::after, .diff .minus::after { position: absolute; left: 40px; top: 0; font-weight: 700; }
.diff .plus::after { content: "+"; color: var(--gruen); }
.diff .minus::after { content: "−"; color: var(--rot); }
.diff .luecke { color: var(--leise); background: var(--flaeche-2); font-style: italic; padding-left: 12px; }
.diff-legende { display: flex; gap: 16px; font-size: .82rem; color: var(--leise); margin: 0 0 10px; flex-wrap: wrap; }
.diff-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }

.ordnerwahl { max-height: 280px; overflow-y: auto; border: 1px solid var(--linie); border-radius: 8px; padding: 4px; }
.ordnerwahl button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; font: inherit; font-size: .92rem; color: var(--tinte);
  padding: 6px 8px 6px calc(8px + var(--t, 0) * 14px); border-radius: 6px; cursor: pointer; text-align: left; }
.ordnerwahl button svg { width: 16px; height: 16px; color: var(--leise); }
.ordnerwahl button:hover { background: var(--flaeche-2); }
.ordnerwahl button.gewaehlt { background: var(--akzent-hell); font-weight: 600; }

.meldungen { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.meldung { background: var(--tinte); color: var(--bg); padding: 9px 16px; border-radius: 10px; font-size: .9rem; box-shadow: var(--schatten); pointer-events: auto;
  animation: einblenden .18s ease; max-width: min(520px, 92vw); }
.meldung.fehler { background: var(--rot); color: #fff; }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.zweifa-raster { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; margin-top: 18px; }
.zweifa-raster form { margin-top: 10px; }
.geheim { font-family: var(--mono); font-size: .95rem; letter-spacing: .05em; background: var(--flaeche-2); padding: 8px 10px; border-radius: 8px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .zweifa-raster { grid-template-columns: 1fr; } }
.codes { font-family: var(--mono); }
.gross-code { font-size: 1.05rem; font-weight: 600; padding: 2px 8px; background: var(--flaeche); border-radius: 6px; margin: 0 6px; }
.knopf.kopiert { border-color: var(--gruen); color: var(--gruen); }
.rolle-wahl select { height: 34px !important; min-height: 0; padding: 4px 8px; font-size: .88rem; width: auto; }
.liste > li { align-items: center; }
.neues-konto { padding: 16px 22px 20px; border-top: 1px solid var(--linie); }
.neues-konto .breit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Mobil */
@media (max-width: 880px) {
  .werkkopf { padding: 8px 10px; min-height: 54px; }
  .werk-knoepfe { gap: 2px; }
  .werk-knoepfe .icon-knopf { width: 34px; }
  .inspektor { position: absolute; inset: 0; width: auto; z-index: 25; border-left: 0; }
  .editor-flaeche .cm-content, .werkflaeche[data-ansicht="geteilt"] .cm-content { padding: 0 16px; }
  .editor-flaeche .cm-editor { font-size: 14px; }
  .brotkrumen b { font-size: .98rem; }
  .artikel, .werkflaeche[data-ansicht="geteilt"] .artikel { padding: 22px 18px 40vh; }
  .start-inhalt { padding: 28px 18px 60px; }
  .brotkrumen .krume, .brotkrumen .sep { display: none; }
  .speicherstand span { display: none; }
  #lesen-knopf { display: none; }
}
@media (max-width: 420px) { #favorit-knopf { display: none; } }
@media print {
  .werkkopf, .formatleiste, .inspektor, .editor-flaeche, .hinweisband { display: none !important; }
  body.werk, .seite.arbeit, body.werk .geruest { height: auto; overflow: visible; }
  .vorschau-flaeche { display: block !important; overflow: visible; }
  .artikel { padding: 0; max-width: none; }
  .zw-m { display: none; }
}

/* ---------------------------------------------------------------- Breite per Ziehen */
.griff { position: absolute; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 15; touch-action: none; }
.griff::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: transparent; transition: background .15s; }
.griff:hover::after, .griff.aktiv::after { background: var(--akzent); width: 2px; left: 2px; }
.leiste > .griff { right: -1px; }
.inspektor > .griff { left: -4px; }
body.zieht, body.zieht * { cursor: col-resize !important; user-select: none !important; }
@media (max-width: 880px) { .griff { display: none; } }
.leiste-zu .leiste > .griff { display: none; }

.unterkopf { font-size: .88rem; font-weight: 600; color: var(--leise); margin: 6px 0 10px; }
.block .unterkopf + form { margin-bottom: 18px; }
.modus-wahl button { display: inline-flex; align-items: center; gap: 6px; }
.modus-wahl svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- Tags bearbeiten */
.chip.tag { gap: 4px; padding-right: 4px; }
.chip.tag[data-i="tag-primaer"] { cursor: pointer; }
.chip.tag[data-i="tag-primaer"]:hover { border-color: var(--akzent); }
.chip-weg { border: 0; background: none; padding: 0; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: inherit; opacity: .55; cursor: pointer; }
.chip-weg:hover { opacity: 1; background: var(--linie-2); }
.chip-weg svg { width: 11px; height: 11px; }
.tag-neu { margin-top: 6px; }
.tag-neu input { height: 32px !important; min-height: 0; font-size: .86rem; padding: 4px 9px; }

/* ---------------------------------------------------------------- Korrekturnotizen */
.k-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.k-form textarea { min-height: 70px; font-size: .92rem; padding: 8px 10px; }
.k-tipp { font-size: .8rem; margin: 0; }
.k-bezug { display: flex; align-items: flex-start; gap: 8px; background: var(--flaeche-2); border-radius: 8px; padding: 7px 6px 7px 10px; font-size: .84rem; line-height: 1.4; }
.k-bezug > svg { width: 15px; height: 15px; color: var(--akzent); flex: none; margin-top: 2px; }
.k-bezug span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.k-liste { list-style: none; margin: 0; padding: 0; }
.k-liste li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--linie-2); }
.k-liste li input { margin-top: 3px; }
.k-inhalt { flex: 1; min-width: 0; }
.k-text { font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.k-ort { font-size: .8rem; color: var(--leise); margin-top: 3px; overflow-wrap: anywhere; }
.k-ort[data-sprung] { cursor: pointer; }
.k-ort[data-sprung]:hover { color: var(--akzent); }
.k-meta { font-size: .74rem; color: var(--leise); margin-top: 2px; }
.k-liste li.erledigt .k-text { text-decoration: line-through; color: var(--leise); }
.knopf[disabled] { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- Code-Dateien und Bereiche */
.werkflaeche.code .cm-content { max-width: none; padding: 0 22px; }
.werkflaeche.code .editor-flaeche .cm-editor { font-size: 13.5px; }
.werkflaeche.code .cm-scroller { line-height: 1.6; }
.knoten.bereich { font-weight: 600; }
.knoten.bereich > svg { color: var(--akzent); }

/* ---------------------------------------------------------------- Partnerlinks */
.p-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.p-liste li { padding: 10px 0; border-top: 1px solid var(--linie-2); }
.p-kopf { display: flex; gap: 8px; align-items: baseline; cursor: pointer; font-size: .92rem; }
.p-kopf b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.p-kopf:hover b { color: var(--akzent); }
.p-kopf .zeile { font-size: .75rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.p-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 5px; }
.p-meta code { font-size: .78rem; background: var(--flaeche-2); padding: 1px 6px; border-radius: 5px; }
.p-meta .marke-status { font-size: .74rem; }
.p-aktionen { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: .8rem; flex-wrap: wrap; }
.p-aktionen > span { margin-right: auto; }
.p-aktionen .knopf { min-height: 28px; padding: 2px 8px; font-size: .8rem; }
.st-text-alt { color: var(--orange); font-weight: 600; }
.p-hinweis { font-size: .86rem; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.abstand-unten { margin-bottom: 6px; }
.produkt-tabelle td { vertical-align: middle; }
.produkt-tabelle form { margin: 0; }

/* ---------------------------------------------------------------- Seitenleiste 0.5.1: Baum oben, Rest knapp */
.leiste-kopf { padding-bottom: 8px; }
.leiste-kopf .marke { padding: 4px 4px 4px 8px; gap: 8px; min-width: 0; }
.leiste-kopf .marke b { font-size: 1.05rem; }
.kopf-knoepfe .icon-knopf.klein { width: 30px; height: 30px; }
.leiste-kopf .marke b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-knoepfe { display: flex; align-items: center; gap: 0; flex: none; }
.kopf-knoepfe .icon-knopf { color: var(--leise); }
.kopf-knoepfe .icon-knopf:hover { color: var(--tinte); }
.leiste nav.haupt { margin-top: 4px; }
.leiste nav.neben { display: flex; flex-direction: column; gap: 0; padding: 6px 0 4px; }
.leiste nav.neben .nav-link { padding: 5px 10px; font-size: .88rem; gap: 9px; }
.leiste nav.neben .nav-link svg { width: 16px; height: 16px; }
.konto-zeile { display: flex; align-items: center; gap: 2px; padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--linie-2); }
.konto-zeile .konto-link { flex: 1; min-width: 0; font-weight: 600; padding: 6px 8px; }
.konto-zeile .avatar.klein { width: 24px; height: 24px; margin: -2px 0; }
.konto-zeile form { margin: 0; display: flex; }
.konto-zeile .icon-knopf { color: var(--leise); flex: none; }
.konto-zeile .icon-knopf:hover { color: var(--tinte); }
.konto-zeile .icon-knopf.aktiv { background: var(--akzent-hell); color: var(--tinte); }
body.werk .baum-bereich { margin-top: 0; border-top: 0; }
body.werk .baum-bereich .baum-gruppe:first-child .baum-kopf { padding-top: 4px; }
@media (min-width: 881px) {
  .leiste-zu .kopf-knoepfe { flex-direction: column; gap: 4px; }
  .leiste-zu .leiste nav.neben .nav-link { justify-content: center; padding: 9px; }
  .leiste-zu .leiste nav.neben .nav-link svg { width: 18px; height: 18px; }
  .leiste-zu .konto-zeile { flex-direction: column; gap: 4px; }
  .leiste-zu .konto-zeile .konto-link { flex: none; }
}
/* Im eingeklappten Zustand braucht die Notizen-Seite einen Platzhalter statt des Baums */
@media (min-width: 881px) { .leiste-zu body.werk .neben { margin-top: auto; } }

/* ---------------------------------------------------------------- Vergleich nebeneinander (0.5.2) */
dialog.riesig { width: min(1680px, 97vw); height: 94vh; max-height: 94vh; padding: 16px 20px 18px; display: flex; flex-direction: column; }
dialog.riesig:not([open]) { display: none; }
dialog.riesig > .inhalt { flex: 1; min-height: 0; }
@media (max-width: 880px) { dialog.riesig { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 12px; } }
.vg { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.vg-leiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.segmente.klein button { font-size: .84rem; padding: 4px 10px; }
.vg-zahl { font-size: .85rem; color: var(--leise); }
.vg-zahl .plus { color: var(--gruen); } .vg-zahl .minus { color: var(--rot); }
.vg-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.vg-pos { font-size: .85rem; color: var(--leise); margin-right: 6px; font-variant-numeric: tabular-nums; }
.vg-spalten, .vg-z { display: grid; grid-template-columns: 3.1em minmax(0, 1fr) 3.1em minmax(0, 1fr); }
.vg-spalten { font-size: .78rem; color: var(--leise); padding: 0 0 4px; }
.vg-spalten b { font-weight: 600; padding-left: 10px; }
.vg-flaeche { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche);
  font-family: var(--mono); font-size: .8rem; line-height: 1.55; scrollbar-width: thin; outline: none; }
.vg-n { color: var(--leise); font-size: .7rem; text-align: right; padding: 2px 8px 0 0; user-select: none; font-variant-numeric: tabular-nums; }
.vg-t { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 12px 0 8px; min-height: 1.55em; }
.vg-a { border-right: 1px solid var(--linie-2); }
.vg-z.weg .vg-a, .vg-z.anders .vg-a { background: var(--rot-hell); }
.vg-z.dazu .vg-b, .vg-z.anders .vg-b { background: var(--gruen-hell); }
.vg-z.anders.wort .vg-a { background: color-mix(in srgb, var(--rot-hell) 45%, transparent); }
.vg-z.anders.wort .vg-b { background: color-mix(in srgb, var(--gruen-hell) 45%, transparent); }
.vg-z.weg .vg-b, .vg-z.dazu .vg-a { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--linie-2) 6px 7px); }
.vg-t del { background: color-mix(in srgb, var(--rot) 28%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--rot) 60%, transparent); border-radius: 3px; }
.vg-t ins { background: color-mix(in srgb, var(--gruen) 30%, transparent); text-decoration: none; border-radius: 3px; }
.vg-z.hier .vg-n { color: var(--tinte); font-weight: 700; box-shadow: inset 3px 0 0 var(--akzent); }
.vg-luecke { display: none; }
.vg[data-modus="aenderungen"] .vg-z.fern:not(.offen) { display: none; }
.vg[data-modus="aenderungen"] .vg-luecke:not(.offen) { display: block; }
.vg-luecke button { all: unset; display: block; width: 100%; box-sizing: border-box; cursor: pointer; text-align: center; font-family: var(--schrift, inherit); font-size: .78rem;
  color: var(--leise); padding: 4px; background: var(--flaeche-2); border-block: 1px solid var(--linie-2); }
.vg-luecke button:hover { color: var(--tinte); }
@media (max-width: 760px) {
  .vg-spalten { display: none; }
  .vg-z { grid-template-columns: 2.6em minmax(0, 1fr); }
  .vg-a { border-right: 0; }
  .vg-z.gleich > :nth-child(1), .vg-z.gleich > :nth-child(2),
  .vg-z.dazu > :nth-child(1), .vg-z.dazu > :nth-child(2),
  .vg-z.weg > :nth-child(3), .vg-z.weg > :nth-child(4) { display: none; }
}
.vg-kopf { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

/* ---------------------------------------------------------------- Marker: erledigen und Protokoll (0.5.2) */
.m-liste li .m-knopf { opacity: 0; flex: none; align-self: flex-start; margin: -4px -4px 0 0; }
.m-liste li:hover .m-knopf, .m-liste li:focus-within .m-knopf { opacity: 1; }
@media (hover: none) { .m-liste li .m-knopf { opacity: 1; } }
.m-titel { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.m-titel h3 { margin-bottom: 4px; }
.m-erledigt { margin-top: 18px; border-top: 1px solid var(--linie-2); padding-top: 4px; }
.m-erledigt .m-liste li { cursor: default; }
.m-erledigt .m-satz { display: block; color: var(--leise); font-size: .8rem; margin-top: 2px; }
.m-gruppe .g-meta { display: block; font-size: .76rem; color: var(--leise); font-weight: 400; margin-top: 1px; }
.m-gruppe .g-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 8px 22px; }
.m-art.anlass { background: var(--flaeche-2); color: var(--leise); font-weight: 600; }

/* ---------------------------------------------------------------- Umzug (0.5.3) */
.umzug-teil { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.umzug-teil p { margin: 0; font-size: .85rem; }
.haken-zeile { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
#umzug-vorschau:not(:empty) { margin-top: 18px; border-top: 1px solid var(--linie); padding-top: 14px; }
.u-zahlen { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.u-liste { list-style: none; margin: 6px 0 12px; padding: 0; max-height: 320px; overflow: auto; border: 1px solid var(--linie-2); border-radius: 8px; }
.u-liste li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--linie-2); font-size: .85rem; }
.u-liste li:last-child { border-bottom: 0; }
.u-liste code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .8rem; }
.u-zuordnung { display: grid; grid-template-columns: max-content max-content; gap: 6px 14px; align-items: center; margin: 8px 0 12px; font-size: .9rem; }
.u-zuordnung select { font: inherit; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); }
.umzug-teil label.haken-zeile { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; margin: 0; }
.umzug-teil label.haken-zeile input { width: auto; margin: 0; flex: none; }

/* ---------------------------------------------------------------- Zeilennummern (0.5.4) */
.editor-flaeche .cm-gutters { background: var(--flaeche); border-right: 1px solid var(--linie-2); color: var(--leise); position: sticky; left: 0; }
.editor-flaeche .cm-lineNumbers .cm-gutterElement { font-family: var(--mono); font-size: .72rem; padding: 0 8px 0 10px; min-width: 2.6em; font-variant-numeric: tabular-nums; }
.editor-flaeche .cm-activeLineGutter { background: var(--flaeche-2); color: var(--tinte); }
.editor-flaeche .cm-line.zw-blitz, .editor-flaeche .cm-gutterElement.zw-blitz { background: var(--marke-gelb); }
.r-liste { max-height: 56vh; }
.r-liste li { align-items: flex-start; }
.r-liste input { margin-top: 3px; }
.r-liste label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.r-liste label .leise { font-size: .78rem; overflow-wrap: anywhere; }
.r-zahlen { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.r-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.r-kopf .leise { font-size: .85rem; }

/* ---------------------------------------------------------------- Status und übergebene Notizen (0.5.7) */
.st-marke { flex: none; display: inline-flex; position: relative; }
.st-marke svg { width: 14px; height: 14px; }
.st-marke.arbeit { color: var(--gelb-tief, #a07a12); }
.st-marke.geprueft { color: var(--gruen); }
.st-marke.online { color: var(--akzent); }
.st-marke.geaendert::after { content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 1.5px var(--flaeche); }
.knoten .st-marke + .mehr-knopf { margin-left: 2px; }
.status-knopf { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .82rem; border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--leise); border-radius: 99px; padding: 3px 10px 3px 7px; cursor: pointer; position: relative; white-space: nowrap; }
.status-knopf:hover { color: var(--tinte); background: var(--flaeche-2); }
.status-knopf svg { width: 15px; height: 15px; }
.status-knopf.arbeit { color: var(--gelb-tief, #a07a12); background: var(--gelb-hell); border-color: transparent; }
.status-knopf.geprueft { color: var(--gruen); background: var(--gruen-hell); border-color: transparent; }
.status-knopf.online { color: var(--akzent); background: var(--akzent-hell); border-color: transparent; }
.status-knopf i { width: 7px; height: 7px; border-radius: 50%; background: var(--rot); }
@media (max-width: 1100px) { .status-knopf span { display: none; } .status-knopf { padding: 4px 6px; } }
.k-uebergeben { display: inline-flex; align-items: center; gap: 3px; color: var(--akzent); }
.k-uebergeben svg { width: 12px; height: 12px; }
.n-abhaken { margin: 10px 0 0; font-size: .9rem; }
.n-abhaken input { flex: none; }
dialog label.haken-zeile { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; text-align: left; justify-content: flex-start; }
dialog label.haken-zeile input { width: auto; margin: 3px 0 0; flex: none; }