/* Die Hausschrift der DLRG (Univers 55 Roman) liegt als WOFF2 im Projekt. Sie wird für die
   Bauchbinde, die Wortmarke auf der Anmeldeseite und für alle Überschriften benutzt – in der
   Leseansicht und im Editor gleichermaßen, sonst verschöbe sich der Text beim Umschalten. */
@font-face {
  font-family: "DLRG Univers";
  src: url("/static/fonts/dlrg-univers-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DLRG Univers";
  src: url("/static/fonts/dlrg-univers-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DLRG Univers";
  src: url("/static/fonts/dlrg-univers-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* strömis.de – Gestaltung nach dem DLRG-Handbuch Corporate Design (Stand 09/2024):
   Hausfarben Rot #e30613 und Gelb #ffed00 (Gelb nur für die Wortmarke in der roten Bauchbinde),
   Text in 80 % Schwarz #575756, Blau #0069b4 nur als Kennfarbe für Gewässer, Hausschrift Univers – Arial als Alternative. */
:root {
  --rot: #e30613;
  --rot-dunkel: #b3000e;
  --rot-hell: #fdeaec;
  --gelb: #ffed00;
  --gelb-dunkel: #e0cf00;
  --anthrazit: #575756;   /* 80 % Schwarz */
  --schwarz: #3c3c3b;
  --grau: #6d6d6c;
  --grau-hell: #f3f3f3;
  --linie: #dadada;
  --weiss: #ffffff;
  --wasser: #0069b4;      /* DLRG-Blau */
  --ok: #2b7a3d;
  --font: Univers, "Univers Next", "Univers LT Std", Arial, Helvetica, sans-serif;
  --font-marke: "DLRG Univers", Univers, "Univers Next", Arial, Helvetica, sans-serif;
  --topbar: 52px;
  /* Eine Textspalte für Lesen und Schreiben – feste Zahl statt ch, weil ch von der
     geladenen Schrift abhängt und Editor und Ansicht dann auseinanderlaufen. */
  --lesebreite: 690px;
  --lesetext: 1.02rem;
  --lesezeile: 1.45;
  --lesepad: 36px;
  --panel-w: 400px;
  --radius: 2px;
}

* { box-sizing: border-box; }
/* Der Platz des Scrollbalkens wird immer freigehalten: sonst rückt der ganze Text um
   die halbe Balkenbreite, sobald eine Seite länger oder kürzer als das Fenster wird –
   etwa beim Wechsel zwischen Lesen und Bearbeiten. */
html { height: 100%; scrollbar-gutter: stable; }
body { min-height: 100%; }  /* nicht height: sonst endet die sticky-Kopfzeile nach einer Bildschirmhöhe */
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--anthrazit);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--rot); }
a:hover { color: var(--rot-dunkel); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.7rem; font-weight: 700; color: var(--rot); }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 .9em; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 1px; }
.hidden { display: none !important; }
.muted { color: var(--grau); }
.small { font-size: .85rem; }

/* --- Kopfzeile: die rote Bauchbinde ---------------------------------- */
.bauchbinde {
  position: sticky; top: 0; z-index: 1200;
  height: var(--topbar);
  background: var(--rot);
  color: var(--weiss);
  display: flex; align-items: stretch; gap: 8px;
  padding: 0 12px 0 0;
}
.bauchbinde, .bauchbinde a, .login-marke { font-family: var(--font-marke); }
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  color: var(--weiss); text-decoration: none;
}
.brand:hover { color: var(--weiss); }
.wortmarke { color: var(--gelb); font-weight: 700; font-size: 1.45rem; letter-spacing: .02em; line-height: 1; display: flex; align-items: center; }
.wortmarke img { height: 24px; width: auto; display: block; }
.trenner { width: 2px; height: 30px; background: var(--gelb); opacity: .9; flex: none; }
.funktion { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; font-size: 1.02rem; }
.funktion small { font-weight: 400; font-size: .72rem; opacity: .9; }
.nav { display: flex; align-items: stretch; margin-left: auto; }
.nav a {
  display: flex; align-items: center; padding: 0 12px;
  color: var(--weiss); text-decoration: none; font-weight: 600;
  border-bottom: 4px solid transparent;
}
.nav a:hover { background: rgba(255,255,255,.12); color: var(--weiss); }
.nav a.active { border-bottom-color: var(--gelb); }
.nav .user { color: rgba(255,255,255,.85); font-weight: 400; }
.nav button {
  background: none; border: 0; color: var(--weiss); font: inherit; font-weight: 600;
  padding: 0 12px; cursor: pointer;
}
.nav button:hover { background: rgba(255,255,255,.12); }
@media (max-width: 640px) {
  .funktion small { display: none; }
  .brand { padding: 0 12px; gap: 9px; }
  .wortmarke { font-size: 1.25rem; }
  .nav a, .nav button { padding: 0 9px; font-size: .9rem; }
  .nav .user { display: none; }
}

/* --- Bausteine --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--rot); color: var(--weiss);
  border: 1px solid var(--rot); border-radius: var(--radius);
  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; line-height: 1.2;
}
.btn:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: var(--weiss); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.secondary { background: var(--weiss); color: var(--anthrazit); border-color: var(--anthrazit); }
.btn.secondary:hover { background: var(--grau-hell); }
.btn.ghost { background: transparent; color: var(--rot); border-color: transparent; padding: 6px 8px; }
.btn.ghost:hover { background: var(--rot-hell); }
.btn.danger { background: var(--weiss); color: var(--rot); border-color: var(--rot); }
.btn.danger:hover { background: var(--rot-hell); }
.btn.small { padding: 5px 10px; font-size: .85rem; }
.btn.yellow { background: var(--gelb); color: var(--anthrazit); border-color: var(--gelb); }
.btn.yellow:hover { background: var(--gelb-dunkel); border-color: var(--gelb-dunkel); color: var(--anthrazit); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 4px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 6px 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search],
input[type=tel], input[type=datetime-local], select, textarea {
  width: 100%; font: inherit; color: var(--anthrazit);
  border: 1px solid var(--grau); border-radius: var(--radius);
  padding: 8px 10px; background: var(--weiss);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--anthrazit); outline: 3px solid var(--gelb); outline-offset: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.help { color: var(--grau); font-size: .82rem; margin-top: 3px; }
.error { color: var(--rot); font-weight: 600; margin: 10px 0; }
.notice { background: var(--grau-hell); border-left: 4px solid var(--gelb); padding: 10px 12px; margin: 12px 0; }

.badge {
  display: inline-block; background: var(--gelb); color: var(--anthrazit);
  font-size: .75rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; vertical-align: middle;
}
.badge.grey { background: var(--grau-hell); color: var(--grau); }
.cat { display: inline-block; font-size: .78rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius); color: var(--weiss); background: var(--grau); }
.cat.seil { background: var(--rot); }
.cat.wasser { background: var(--wasser); }

table.list { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.list th, table.list td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.list th { font-weight: 700; color: var(--grau); font-size: .8rem; border-bottom: 2px solid var(--anthrazit); }
table.list tr:hover td { background: var(--grau-hell); }

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--anthrazit); color: var(--weiss); padding: 10px 16px; border-radius: var(--radius);
  font-weight: 600; z-index: 3000; opacity: 0; pointer-events: none; transition: opacity .2s;
  max-width: 90vw;
}
#toast.show { opacity: 1; }
#toast.err { background: var(--rot); }

/* Dialog */
dialog {
  border: 0; border-top: 6px solid var(--rot); border-radius: var(--radius); padding: 0;
  width: min(560px, 94vw); color: var(--anthrazit);
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
dialog::backdrop { background: rgba(60,60,59,.55); }
dialog .dlg-body { padding: 18px 20px 20px; max-height: 80vh; overflow: auto; }
dialog h2 { margin-bottom: 4px; }
dialog .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
dialog.wide { width: min(1100px, 96vw); }

/* Seiten mit normalem Inhalt */
.page { max-width: 860px; margin: 0 auto; padding: 28px 20px 60px; }
.page.narrow { max-width: 520px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--anthrazit); padding-bottom: 8px; margin-bottom: 20px; }
.section { margin: 26px 0; }
.section h2 { border-bottom: 1px solid var(--linie); padding-bottom: 4px; }

/* --- Anmeldung --------------------------------------------------------- */
.login-shell { min-height: calc(100vh - var(--topbar)); display: grid; grid-template-columns: 1fr minmax(340px, 33%); }
.login-side {
  background: var(--rot); color: var(--weiss); padding: 48px 40px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.login-marke { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.login-marke .wortmarke { font-size: 2.4rem; }
.login-marke .wortmarke img { height: 40px; }
.login-marke .trenner { height: 46px; }
.login-marke .funktion { font-size: 1.3rem; }
.login-side h1 { color: var(--weiss); font-weight: 700; font-size: 2.2rem; }
.login-side p { max-width: 38ch; font-size: 1.05rem; }
.login-form {
  padding: 48px 40px; max-width: 420px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
}
.login-form h2 { margin-bottom: 14px; }
.login-form .btn { width: 100%; justify-content: center; margin-top: 16px; }
.login-links { margin-top: 18px; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-side { padding: 28px 22px; }
  .login-side h1 { font-size: 2rem; }
  .login-form { padding: 24px 22px 40px; }
}

/* --- Karte ------------------------------------------------------------- */
.map-shell { position: relative; height: calc(100vh - var(--topbar)); height: calc(100dvh - var(--topbar)); overflow: hidden; }
#map { position: absolute; inset: 0; background: #e6e2d8; }
.map-tools {
  position: absolute; top: 12px; left: 12px; z-index: 900;
  display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 24px);
}
.map-tools .btn, .chip {
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.chip {
  background: var(--weiss); color: var(--anthrazit); border: 1px solid var(--weiss);
  border-radius: var(--radius); padding: 7px 11px; font: inherit; font-weight: 600; cursor: pointer; font-size: .88rem;
}
.chip.active { background: var(--anthrazit); color: var(--weiss); border-color: var(--anthrazit); }
.chip.active.seil { background: var(--rot); border-color: var(--rot); }
.chip.active.wasser { background: var(--wasser); border-color: var(--wasser); }

.locate-banner {
  position: absolute; left: 50%; transform: translateX(-50%); top: 60px; z-index: 950;
  background: var(--gelb); color: var(--anthrazit); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.35);
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px);
}
.locate-banner img { width: 44px; height: 44px; object-fit: cover; border: 2px solid var(--weiss); }
.locate-banner strong { display: block; }
.locate-banner .btn-row { margin-left: 6px; }
#map.locating { cursor: crosshair; }

/* Thumbnail-Marker */
.thumb-marker { background: none !important; border: 0 !important; }
.thumb-marker .tm {
  width: 64px; height: 64px; border: 3px solid var(--weiss); border-radius: 3px;
  background-size: cover; background-position: center; background-color: var(--grau-hell);
  box-shadow: 0 0 0 1px var(--anthrazit), 0 2px 6px rgba(0,0,0,.4);
  transition: transform .12s;
}
.thumb-marker:hover .tm, .thumb-marker.hi .tm { transform: scale(1.12); z-index: 5; }
.thumb-marker .tm.seil { border-color: var(--weiss); box-shadow: 0 0 0 2px var(--rot), 0 2px 6px rgba(0,0,0,.4); }
.thumb-marker .tm.wasser { box-shadow: 0 0 0 2px var(--wasser), 0 2px 6px rgba(0,0,0,.4); }
.thumb-marker .tm.temp { box-shadow: 0 0 0 3px var(--gelb), 0 2px 6px rgba(0,0,0,.4); }
/* Cluster: gestapelte Bilder + gelbe Anzahl als Hinweis, dass zusammengefasst wurde */
.cluster-marker { background: none !important; border: 0 !important; }
.cluster-marker .cm { position: relative; width: 71px; height: 71px; }
.cluster-marker .cm .stack {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px;
  border: 3px solid var(--weiss); border-radius: 3px; background: var(--grau-hell);
  box-shadow: 0 0 0 1px var(--anthrazit), 0 2px 6px rgba(0,0,0,.4);
  background-size: cover; background-position: center;
}
.cluster-marker .cm .stack.s2 { transform: translate(5px, -5px) rotate(4deg); z-index: 0; }
.cluster-marker .cm .stack.s3 { transform: translate(10px, -10px) rotate(8deg); z-index: -1; }
.cluster-marker .cm .stack.s1 { z-index: 1; }
.cluster-marker .cm .count {
  position: absolute; right: -6px; bottom: -6px; z-index: 2;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  background: var(--gelb); color: var(--anthrazit); font-weight: 800; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--weiss), 0 1px 4px rgba(0,0,0,.4);
}
.cluster-marker:hover .cm { transform: scale(1.06); }
.leaflet-container { font-family: var(--font); }
.leaflet-control-layers, .leaflet-bar { border: 1px solid var(--linie) !important; border-radius: var(--radius) !important; box-shadow: 0 1px 4px rgba(0,0,0,.2) !important; }
.leaflet-bar a { color: var(--anthrazit); }
.locate-me { font-weight: 700; font-size: 15px; }
.leaflet-control-attribution { font-size: 10px; }

/* Seitenleiste */
.panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--panel-w); max-width: 100%;
  background: rgba(255,255,255,.96); z-index: 1000; box-shadow: -2px 0 12px rgba(0,0,0,.25);
  border-radius: 6px 0 0 6px;
  transform: translateX(105%); transition: transform .2s ease-out;
  display: flex; flex-direction: column;
}
.panel.open { transform: translateX(0); }
.panel-head {
  display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px 10px;
  border-bottom: 2px solid var(--anthrazit);
}
.panel-head h2 { margin: 0; flex: 1; font-size: 1.2rem; }
.panel-head .close { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--anthrazit); padding: 0 4px; }
.panel-body { flex: 1; overflow: auto; padding: 14px 16px 30px; }
.panel-body h3 { margin-top: 18px; color: var(--grau); font-size: .8rem; text-transform: none; border-bottom: 1px solid var(--linie); padding-bottom: 3px; }
.panel-body h3:first-child { margin-top: 0; }
.contact { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: .92rem; }
.contact dt { color: var(--grau); }
.contact dd { margin: 0; }
.meta { font-size: .82rem; color: var(--grau); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin-top: 8px; }
.photo-grid button {
  position: relative; border: 0; padding: 0; background: var(--grau-hell); aspect-ratio: 1; cursor: pointer;
  overflow: hidden; border-radius: 2px;
}
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid button.hi { outline: 4px solid var(--gelb); }
.photo-grid .nogeo { position: absolute; left: 4px; top: 4px; }
.photo-grid .cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(60,60,59,.75); color: var(--weiss); font-size: .72rem; padding: 2px 5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-list { list-style: none; margin: 0; padding: 0; }
.album-list li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); cursor: pointer; }
.album-list li:hover { background: var(--grau-hell); }
.album-list img, .album-list .noimg { width: 56px; height: 56px; object-fit: cover; flex: none; background: var(--grau-hell); border-radius: 2px; }
.album-list .t { font-weight: 600; }
.empty { color: var(--grau); padding: 20px 0; text-align: center; }
.empty strong { display: block; color: var(--anthrazit); margin-bottom: 4px; }
@media (max-width: 640px) {
  .panel {
    top: auto; left: 0; width: 100%; height: 70%;
    transform: translateY(105%); box-shadow: 0 -2px 12px rgba(0,0,0,.25);
    border-top: 4px solid var(--rot);
  }
  .panel.open { transform: translateY(0); }
}

/* Bild-Detail (Lightbox) */
dialog.lightbox { width: min(1200px, 97vw); border-top: 0; background: var(--anthrazit); color: var(--weiss); }
.lb { display: grid; grid-template-columns: 1fr 340px; max-height: 92vh; }
.lb-img { background: #222; display: flex; align-items: center; justify-content: center; min-height: 240px; position: relative; }
.lb-img img { max-width: 100%; max-height: 92vh; object-fit: contain; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.5); color: var(--weiss); border: 0; font-size: 2rem; padding: 8px 12px; cursor: pointer; }
.lb-nav.prev { left: 0; } .lb-nav.next { right: 0; }
.lb-side { background: var(--weiss); color: var(--anthrazit); padding: 16px 18px; overflow: auto; }
.lb-side h2 { font-size: 1.1rem; }
.lb-side .close { float: right; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--anthrazit); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .9rem; margin: 10px 0; }
.kv dt { color: var(--grau); } .kv dd { margin: 0; white-space: pre-wrap; }
.note-box { background: var(--grau-hell); border-left: 4px solid var(--gelb); padding: 8px 10px; white-space: pre-wrap; margin: 8px 0; }
@media (max-width: 760px) {
  .lb { grid-template-columns: 1fr; max-height: none; }
  .lb-img img { max-height: 55vh; }
}

/* Upload-Liste */
.upload-list { margin: 10px 0; font-size: .9rem; }
.upload-list li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--linie); }
progress { width: 100%; height: 10px; accent-color: var(--rot); }

/* --- Wiki -------------------------------------------------------------- */
.wiki-shell { --side-w: 300px; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) 260px; min-height: calc(100vh - var(--topbar)); }
.wiki-side { border-right: 1px solid var(--linie); background: var(--grau-hell); padding: 14px 12px 40px; position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow: auto; }
.wiki-side input[type=search] { margin-bottom: 10px; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 14px; border-left: 1px solid var(--linie); margin-left: 6px; }
.tree li { margin: 1px 0; }
.tree .row { display: flex; align-items: center; gap: 2px; min-width: 0; }
/* Lange Seitentitel brechen nicht um, sondern enden mit … – sonst wird der Baum unruhig
   und die Zeilen springen beim Auf- und Zuklappen. Der volle Titel steht im Tooltip. */
.tree a {
  flex: 1 1 auto; min-width: 0; display: block; padding: 4px 6px; color: var(--anthrazit);
  text-decoration: none; border-radius: var(--radius); font-size: .93rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tree a:hover { background: var(--weiss); }
.tree a.active { background: var(--weiss); border-left: 3px solid var(--rot); font-weight: 600; }
.tree .tg { background: none; border: 0; width: 20px; height: 22px; cursor: pointer; color: var(--grau); font-size: .75rem; padding: 0; flex: none; }
.tree li.collapsed > ul { display: none; }
.tree li.collapsed > .row .tg::before { content: "▸"; }
.tree li:not(.collapsed) > .row .tg::before { content: "▾"; }
.tree li.leaf > .row .tg { visibility: hidden; }
.search-results { list-style: none; margin: 0 0 12px; padding: 0; }
.search-results li { padding: 6px 6px; border-bottom: 1px solid var(--linie); font-size: .9rem; }
/* Lange Titel enden mit … statt umzubrechen – wie im Seitenbaum darunter. */
.search-results a { font-weight: 600; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results .snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-results .snip { color: var(--grau); font-size: .82rem; }
.wiki-meta { font-size: .82rem; color: var(--grau); border-bottom: 2px solid var(--anthrazit); padding-bottom: 8px; margin-bottom: 20px; }
.wiki-content h1 { font-size: 1.7rem; margin-top: 1.2em; }
.wiki-content h2 { font-size: 1.35rem; margin-top: 1.4em; border-bottom: 1px solid var(--linie); padding-bottom: 3px; }
.wiki-content h3 { font-size: 1.1rem; margin-top: 1.2em; }
.wiki-content h4 { font-size: 1rem; margin-top: 1em; }
.wiki-content hr { border: 0; border-top: 2px solid var(--linie); margin: 1.6em 0; }
.wiki-content table { border-collapse: collapse; margin: 1em 0; font-size: .93rem; }
/* text-align nur, wo die Tabelle keine eigene Spaltenausrichtung vorgibt:
   ein pauschales text-align:left hat das align-Attribut aus "| :---: |" überschrieben. */
.wiki-content th, .wiki-content td { border: 1px solid var(--linie); padding: 6px 9px; vertical-align: top; }
.wiki-content th:not([align]), .wiki-content td:not([align]) { text-align: left; }
.wiki-content th[align=center], .wiki-content td[align=center] { text-align: center; }
.wiki-content th[align=right], .wiki-content td[align=right] { text-align: right; }
.wiki-content th[align=left], .wiki-content td[align=left] { text-align: left; }
.wiki-content th { background: var(--grau-hell); }
.wiki-content blockquote { margin: 1em 0; padding: 6px 14px; border-left: 4px solid var(--grau); background: var(--grau-hell); }
.wiki-content code { background: var(--grau-hell); padding: 1px 4px; border-radius: 2px; font-size: .9em; }
.wiki-content pre { background: var(--grau-hell); padding: 10px 12px; overflow: auto; }
.wiki-content pre code { background: none; padding: 0; }
/* Breite Tabellen scrollen in ihrem eigenen Bereich, statt die Textspalte aufzuschieben. */
.table-scroll { overflow-x: auto; margin: 1em 0; }
.table-scroll table { margin: 0; }
/* Codeblock mit Kopierknopf – der Knopf sitzt am Rahmen, nicht im scrollenden Text. */
.code-block { position: relative; margin: 1em 0; }
.code-block pre { margin: 0; }
.code-copy {
  position: absolute; top: 6px; right: 6px; padding: 2px 8px;
  font: inherit; font-size: .78rem; line-height: 1.6;
  background: var(--weiss); color: var(--grau); border: 1px solid var(--linie);
  border-radius: var(--radius); cursor: pointer; opacity: 0; transition: opacity .15s;
}
.code-block:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
/* Anker an Überschriften – nur beim Überfahren sichtbar, im Druck nie. */
.h-anchor { margin-left: .35em; color: var(--linie); text-decoration: none; opacity: 0; font-weight: 400; }
h1:hover > .h-anchor, h2:hover > .h-anchor, h3:hover > .h-anchor, h4:hover > .h-anchor,
.h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover { color: var(--rot); }
/* Seitenauswahl im Link-Dialog */
.link-pages { list-style: none; padding: 0; margin: 6px 0 0; max-height: 168px; overflow: auto; border: 1px solid var(--linie); }
.link-pages:empty { display: none; }
.link-pages li { border-bottom: 1px solid var(--linie); }
.link-pages li:last-child { border-bottom: 0; }
.link-pages button {
  display: block; width: 100%; text-align: left; padding: 6px 9px;
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
}
.link-pages button:hover, .link-pages button.sel { background: var(--rot-hell); }
/* Adresse im Link-Kontextmenü */
.ed-link-url { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--grau); font-size: .8rem; }
/* Anhänge im Artikel */
.wiki-content a.attachment {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  margin: .3em 0; padding: 7px 12px 7px 10px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--grau-hell); color: var(--anthrazit); text-decoration: none; vertical-align: middle;
}
.wiki-content a.attachment:hover { border-color: var(--rot); color: var(--rot); }
.wiki-content .att-icon { font-size: 1.15em; line-height: 1; }
.wiki-content .att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-content .att-ext { color: var(--grau); font-size: .74rem; letter-spacing: .04em; flex: none; }
.wiki-content img { display: block; margin: .6em 0; max-height: 70vh; }
.wiki-content img + em, .wiki-content p > em:only-child { color: var(--grau); font-size: .9em; }
.wiki-content input[type=checkbox] { margin-right: 6px; }
/* Aufgabenlisten: der Haken ersetzt den Aufzählungspunkt, sonst steht beides nebeneinander. */
.wiki-content li:has(> input[type=checkbox]) { list-style: none; margin-left: -1.35em; }
/* Auszeichnungen ohne Markdown-Entsprechung: ++unterstrichen++ ==hervorgehoben== 10^3^ H~2~O.
   Im Editor stehen sie als Widget (contenteditable=false) und sehen dort genauso aus. */
.wiki-content mark, .toastui-editor-contents mark {
  background: #fff3a8; color: inherit; padding: 0 2px; border-radius: 2px;
}
.wiki-content u, .toastui-editor-contents u { text-underline-offset: 2px; }
.wiki-content sub, .wiki-content sup, .toastui-editor-contents sub, .toastui-editor-contents sup { font-size: .75em; line-height: 0; }
.toastui-editor-contents .tui-widget { white-space: pre-wrap; }
.callout { margin: 1.1em 0; padding: 10px 14px; border-left: 5px solid var(--grau); background: var(--grau-hell); }
.callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; }
.callout h3, .callout h4 { margin-top: 0; }
.callout-info, .callout-tip { border-color: var(--wasser); background: #eaf2f9; }
.callout-warning { border-color: var(--gelb); background: #fffbd6; }
.callout-danger { border-color: var(--rot); background: var(--rot-hell); }
.callout-success { border-color: var(--ok); background: #e9f5ec; }
.children-list { margin-top: 30px; border-top: 1px solid var(--linie); padding-top: 12px; }
.children-list ul { columns: 2; list-style: none; padding: 0; margin: 6px 0; }
.children-list li { padding: 2px 0; break-inside: avoid; }
.wiki-editor textarea.plain { min-height: 480px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.rev-list li { padding: 6px 0; border-bottom: 1px solid var(--linie); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wiki-menu-btn { display: none; }
@media (max-width: 1180px) {
  .wiki-shell { grid-template-columns: 300px minmax(0, 1fr); }
  .wiki-rail { display: none; }
}
@media (max-width: 800px) {
  .wiki-shell, body.editing .wiki-shell { grid-template-columns: 1fr; }
  .wiki-side { position: fixed; left: 0; top: var(--topbar); bottom: 0; width: min(320px, 90vw); transform: translateX(-105%); transition: transform .2s; z-index: 1100; box-shadow: 2px 0 10px rgba(0,0,0,.25); height: auto; }
  .wiki-side.open { transform: translateX(0); }
  .wiki-menu-btn { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* --- Wiki: Artikel mittig, rechte Leiste mit Inhalt und Kommentaren ------------ */
/* Beim Bearbeiten bleibt die rechte Leiste stehen: dort stehen die Kommentare, die man beim
   Überarbeiten lesen will, und die Angaben zur Seite. Das Inhaltsverzeichnis ist dort leer. */
.wiki-rail { padding: 32px 18px 40px 6px; position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow: auto; font-size: .86rem; }
.rail-title { font-weight: 700; color: var(--grau); font-size: .78rem; margin: 0 0 6px; border-bottom: 1px solid var(--linie); padding-bottom: 3px; }
.toc { margin-bottom: 26px; }
.toc-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linie); }
.toc-list li { margin: 0; }
.toc-list a { display: block; padding: 3px 8px; color: var(--anthrazit); text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; line-height: 1.3; }
.toc-list a:hover { border-left-color: var(--rot); color: var(--rot); }
.toc-list .l1 a { padding-left: 18px; } .toc-list .l2 a { padding-left: 28px; font-size: .82rem; } .toc-list .l3 a { padding-left: 38px; font-size: .8rem; }
.wiki-head h1 .pubbadge { font-size: .7rem; vertical-align: middle; background: var(--grau-hell); color: var(--anthrazit); }
.tree .pub { font-size: .75em; }

/* Kommentare */
.comment { border-left: 3px solid var(--linie); padding: 6px 10px; margin: 8px 0; background: var(--weiss); }
.comment.reply { margin-left: 14px; border-left-color: var(--grau-hell); }
.comment.resolved { opacity: .6; }
.comment.flash, mark.cq.flash, .cbadge.flash { outline: 3px solid var(--gelb); }
.c-head { margin-bottom: 2px; }
.c-quote { margin: 4px 0; padding: 4px 8px; font-size: .82rem; color: var(--grau); border-left: 3px solid var(--gelb); background: #fffbd6; cursor: pointer; white-space: pre-wrap; max-height: 5.4em; overflow: hidden; }
.c-body { white-space: pre-wrap; }
.c-actions { display: flex; gap: 10px; margin-top: 4px; }
.lnk { background: none; border: 0; color: var(--rot); font: inherit; font-size: .8rem; padding: 0; cursor: pointer; }
.lnk:hover { text-decoration: underline; }
mark.cq { background: #fff3a8; padding: 0 1px; cursor: pointer; border-bottom: 2px solid var(--gelb); }
.cbadge { cursor: pointer; font-size: .8em; margin-right: 2px; }
.comment-fab { position: absolute; z-index: 1150; background: var(--anthrazit); color: var(--weiss); border: 0; border-radius: var(--radius); padding: 6px 12px; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.comment-fab:hover { background: var(--rot); }

/* Callouts mit Emoji oben links (wie Docmost), mehrspaltige Abschnitte */
.callout { display: flex; gap: 10px; align-items: flex-start; }
/* Das Zeichen ist so hoch wie eine fette Textzeile: die Emoji-Schrift zeichnet 1.29 em hoch,
   eine fette Zeile misst 0.92 em von der Versalhöhe bis zur Unterlänge – daraus 0.72 em.
   Die Zeilenhöhe ist die der Textzeile: dann liegt das Zeichen auf deren Mitte.
   Die Spalte behält die Breite des früheren, größeren Zeichens (1.56 × Lesegröße), damit der
   Text an derselben Stelle beginnt; das kleinere Zeichen steht darin mittig. */
.callout-emoji {
  font-size: .72em; line-height: calc(var(--lesetext) * var(--lesezeile)); flex: none;
  width: calc(var(--lesetext) * 1.56); text-align: center;
}
.callout-body { flex: 1; min-width: 0; }
.callout-body > :first-child { margin-top: 0; } .callout-body > :last-child { margin-bottom: 0; }
/* Oben knapper als unten: der Absatz darüber bringt seinen eigenen Abstand schon mit. */
.columns { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .35em 0 1em; }
.columns.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.columns.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Auch die Spalte ist ein Raster – dann fallen ihre Ränder so wenig zusammen wie im
   Editor, und beide Ansichten zeigen dieselben Abstände. */
.columns .col { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-content: start; }
.columns .col > :first-child { margin-top: 0; }
@media (max-width: 640px) { .columns, .columns.cols-3 { grid-template-columns: 1fr; } }
.wiki-content video { display: block; max-width: 100%; max-height: 70vh; margin: .6em 0; background: #000; }
.wiki-content.boxed { border: 1px solid var(--linie); padding: 12px; max-height: 50vh; overflow: auto; }

/* Editor (Toast UI) im Look der Seite */
.wiki-editor .toastui-editor-defaultUI { border-radius: var(--radius); font-family: var(--font); }
.wiki-editor .toastui-editor-contents { font-family: var(--font); font-size: 1rem; color: var(--anthrazit); }
.callout-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* Teilen */
.user-pick { max-height: 240px; overflow: auto; border: 1px solid var(--linie); padding: 4px 10px; margin-top: 6px; }
.user-pick label { display: flex; }
.share-link { display: flex; gap: 8px; margin-top: 8px; }
.share-link input { flex: 1; }

/* Kontoanfragen im Adminbereich */
.request { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--linie); border-left: 4px solid var(--gelb); margin: 8px 0; }

/* Öffentliches Wiki */
body.public .wiki-shell { grid-template-columns: 250px minmax(0, 1fr) 240px; }

/* Anmeldeseite: Slideshow aus den Spots */
.login-side { position: relative; overflow: hidden; }
.login-side-text { position: relative; z-index: 2; }
.login-side .login-marke .funktion small { font-weight: 400; font-size: .8rem; opacity: .9; }
.slideshow { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.2s; }
.slideshow.on { opacity: 1; }
.slideshow .slide { position: absolute; inset: -6%; background-size: cover; background-position: center; opacity: 0; transition: opacity 2.5s ease-in-out; }
.slideshow .slide.show { opacity: 1; }
.slideshow .slide.pan-a { animation: pan-a 20s linear forwards; }
.slideshow .slide.pan-b { animation: pan-b 20s linear forwards; }
@keyframes pan-a { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, 1.5%); } }
@keyframes pan-b { from { transform: scale(1.12) translate(2%, -1.5%); } to { transform: scale(1) translate(0, 0); } }
.slideshow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(227,6,19,.25) 0%, rgba(227,6,19,.55) 55%, rgba(120,0,10,.85) 100%); }
.login-side-text a { color: var(--weiss); text-decoration: underline; }

/* Karte: Video-Kennzeichnung */
.thumb-marker .tm { position: relative; }
.thumb-marker .play, .photo-grid .play { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.6); color: var(--weiss); font-size: .65rem; line-height: 1; padding: 3px 4px; border-radius: 3px; }
.lb-img video { max-width: 100%; max-height: 92vh; }

/* Einklappbare Boxen, Emoji-Auswahl */
details.accordion { border: 1px solid var(--linie); border-left: 4px solid var(--grau); margin: 1em 0; background: var(--weiss); }
details.accordion > summary {
  cursor: pointer; padding: 8px 12px 8px 32px; font-weight: 600; background: var(--grau-hell);
  position: relative; list-style: none;
}
details.accordion > summary::-webkit-details-marker { display: none; }
/* Der Pfeil wird selbst gezeichnet – der Editor zeigt denselben, dort aufgeklappt. */
details.accordion > summary::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 6px; height: 6px;
  border-right: 2px solid var(--grau); border-bottom: 2px solid var(--grau);
  transform: translateY(-70%) rotate(-45deg); transition: transform .15s;
}
details.accordion[open] > summary::before { transform: translateY(-70%) rotate(45deg); }
details.accordion > summary:hover { color: var(--rot); }
details.accordion .accordion-body { padding: 10px 12px; }
details.accordion .accordion-body > :first-child { margin-top: 0; } details.accordion .accordion-body > :last-child { margin-bottom: 0; }
.em-row { display: flex; align-items: center; gap: 10px; }
.em-row input { width: 5em; font-size: 1.6rem; text-align: center; padding: 4px; }
.em-grid { display: flex; flex-wrap: wrap; gap: 2px; max-height: 40vh; overflow: auto; border: 1px solid var(--linie); padding: 6px; margin-top: 8px; }
.em-grid .em { width: 34px; height: 34px; font-size: 1.35rem; line-height: 1; background: none; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; padding: 0; }
.em-grid .em:hover, .em-grid .em.sel { border-color: var(--rot); background: var(--rot-hell); }

/* Editor: nur WYSIWYG – die eingebaute Werkzeugleiste ist abgeschaltet. */
.wiki-editor .toastui-editor-defaultUI { display: flex; flex-direction: column; overflow: visible; }
.wiki-editor .toastui-editor-main { order: 1; }
.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; }
.align-center img, .align-center video { margin-left: auto; margin-right: auto; }
.align-right img, .align-right video { margin-left: auto; }

/* Schwebende Formatleiste bei Textauswahl */
.ed-bubble { position: absolute; z-index: 1300; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
/* Knöpfe, Symbole und Trenner sind für Text-, Kontext- und Blockmenü dieselben – siehe den
   gemeinsamen Block weiter unten. Hier steht nur, was die Textleiste allein betrifft. */

/* "/"-Einfügemenü */
.ed-slash { position: absolute; z-index: 1300; width: 300px; max-height: 60vh; overflow: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.22); padding: 6px; }
.ed-slash-title { font-size: .78rem; color: var(--grau); padding: 4px 8px 6px; }
.ed-slash button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: 4px; background: none; font: inherit; color: var(--anthrazit); cursor: pointer; }
.ed-slash button span { font-size: .8rem; color: var(--grau); }
.ed-slash button:hover, .ed-slash button.sel { background: var(--grau-hell); }
.ed-slash button.sel strong { color: var(--rot); }

/* Editor ohne obere Toolbar; Tabellen volle Breite; Kontextmenüs für Tabellen, Blöcke und Bilder */
/* Es gibt keine feste Werkzeugleiste mehr – der leere Balken darf auch keinen Platz
   beanspruchen, sonst beginnt der Text im Editor 46 px tiefer als in der Ansicht. */
.wiki-editor .toastui-editor-defaultUI-toolbar,
.wiki-editor .toastui-editor-toolbar { display: none !important; }
.wiki-editor .toastui-editor-defaultUI .toastui-editor-main { border-top: 0; }
.wiki-content table, .toastui-editor-contents table { width: 100% !important; table-layout: auto; }
.wiki-content th, .wiki-content td, .toastui-editor-contents th, .toastui-editor-contents td { width: auto !important; }
.ed-bubble { max-width: min(96vw, 560px); flex-wrap: wrap; }
.ed-ctx { position: absolute; z-index: 1300; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; max-width: min(96vw, 480px); padding: 4px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); font-size: .85rem; }

/* --- Eine Formensprache für alle schwebenden Leisten --------------------------------
   Die Symbole sind Inline-SVG in currentColor: die Hausschrift (Univers, ersatzweise
   Arial) enthält für Ausrichtung, Tabellenbefehle und die meisten Verben keine Zeichen,
   jedes Unicode-Symbol käme aus einer zufälligen Ersatzschrift und brächte eine fremde
   Strichstärke mit. Ein Raster, eine Strichstärke, eine Grundlinie. */
.ed-bubble, .ed-ctx { --ed-knopf: 30px; --ed-hoehe: 28px; }
.ed-bubble button, .ed-ctx button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--ed-knopf); height: var(--ed-hoehe); padding: 0;
  border: 0; border-radius: 4px; background: none; cursor: pointer;
  font: inherit; color: var(--anthrazit); white-space: nowrap;
}
.ed-bubble button:hover, .ed-ctx button:hover { background: var(--grau-hell); color: var(--rot); }
.ed-bubble button.on, .ed-ctx button.on { background: var(--rot-hell); color: var(--rot); }
.ed-ctx button.danger { color: var(--rot); }
.ed-bubble svg, .ed-ctx svg, .ed-grip svg {
  width: 16px; height: 16px; display: block; flex: none; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* Wo eine Fläche gemeint ist – Farbbalken, Griffpunkte – gilt das Gegenteil. */
.ed-bubble svg .voll, .ed-ctx svg .voll, .ed-grip svg .voll { fill: currentColor; stroke: none; }
/* Die wenigen Knöpfe, die eine Zahl oder ein Kürzel tragen müssen. */
.ed-ctx button.num { padding: 0 6px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.ed-ctx button.abbr { padding: 0 6px; font-size: .72rem; letter-spacing: .07em; }
/* Gruppenkopf: kein Wort, sondern ein blasses Symbol vor der Gruppe. */
.ed-ctx .lbl { display: inline-flex; align-items: center; height: var(--ed-hoehe); padding: 0 4px; color: var(--grau); }
.ed-ctx .lbl svg { width: 16px; height: 16px; opacity: .7; }
.ed-bubble .sep, .ed-ctx .sep { flex: none; width: 1px; height: 18px; background: var(--linie); margin: 0 4px; }
.ed-bubble button:focus-visible, .ed-ctx button:focus-visible { outline-offset: -2px; }
/* Fingerbedienung: ohne Hover gibt es kein title, der Knopf muss groß genug sein. */
@media (pointer: coarse) {
  .ed-bubble, .ed-ctx { --ed-knopf: 36px; --ed-hoehe: 36px; }
  .ed-bubble svg, .ed-ctx svg { width: 18px; height: 18px; }
}
/* Hoher Kontrast: Flächenfarben fallen weg, der aktive Zustand braucht eine Kante. */
@media (forced-colors: active) {
  .ed-bubble button.on, .ed-ctx button.on { border: 1px solid currentColor; }
}

/* Emoji-Auswahl direkt am Knopf, ohne Dialog. */
.ed-emoji { position: absolute; z-index: 1310; width: min(92vw, 360px); padding: 6px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.ed-emoji .em-row { gap: 8px; margin-bottom: 6px; }
.ed-emoji .em-inp { width: 5em; }
.ed-emoji .em-grid { max-height: min(46vh, 300px); }
/* Die Ziehgriffe stehen neben dem roten Auswahlrahmen – deshalb Gelb, die zweite Kennfarbe
   der Anwendung, mit dunklem Rand, damit sie auch auf hellen Bildern stehen. */
.ed-resize { position: absolute; z-index: 1299; width: 14px; height: 44px; border-radius: 7px; background: var(--gelb); border: 2px solid var(--anthrazit); box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: ew-resize; }
/* Ein angeklicktes Bild soll man auf einen Blick erkennen – deshalb der Ring in der
   Kennfarbe der Anwendung, mit hellem Hof darum, damit er auch auf dunklen Bildern steht. */
.ed-resize-frame {
  position: absolute; z-index: 1298; pointer-events: none; border-radius: 2px;
  outline: 2px solid var(--rot); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--weiss), 0 0 0 6px rgba(227, 6, 19, .18);
}
.toastui-editor-contents img.ed-selected,
.toastui-editor-contents video.ed-selected {
  outline: 2px solid var(--rot); outline-offset: 2px; border-radius: 2px;
  box-shadow: 0 0 0 2px var(--weiss), 0 0 0 6px rgba(227, 6, 19, .18);
}
/* Ein angeklickter Link bleibt dezent – dort geht es nicht um eine Fläche. */
.toastui-editor-contents a.ed-selected { outline: 2px solid var(--gelb); outline-offset: 1px; border-radius: 2px; }
/* Toast UI zeichnet einen ausgewählten Knoten hellblau. Neben dem roten Auswahlrahmen der
   Anwendung liest sich das wie ein Fremdkörper – auch hier Gelb. */
.wiki-editor .ProseMirror-selectednode { outline-color: var(--gelb); }
.wiki-editor .ProseMirror-selectednode::after { border-color: var(--gelb); }
.block-edit textarea { min-height: 120px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.block-edit .cols { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* --- Seitenbaum: Symbole, Merkliste, Zeilenaktionen, Ziehen ------------------------ */
.tree-icon { margin-right: 5px; }
.tree .fav { color: var(--gelb-dunkel); }
.tree .row { position: relative; }
.tree .row-add, .tree .row-menu {
  opacity: 0; flex: none; width: 20px; height: 20px; padding: 0; margin-left: 2px;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--grau); font: inherit; font-size: .95rem; line-height: 1; cursor: pointer;
}
.tree .row:hover .row-add, .tree .row:hover .row-menu,
.tree .row-add:focus-visible, .tree .row-menu:focus-visible { opacity: 1; }
.tree .row-add:hover, .tree .row-menu:hover { background: var(--linie); color: var(--anthrazit); }
.tree .row.dragging { opacity: .45; }
.tree .row.drop-into { outline: 2px solid var(--rot); outline-offset: -2px; border-radius: var(--radius); }
.tree .row.drop-before { box-shadow: inset 0 2px 0 var(--rot); }
.tree .row.drop-after { box-shadow: inset 0 -2px 0 var(--rot); }
.tree-menu {
  position: absolute; z-index: 1400; min-width: 210px; padding: 4px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.tree-menu button {
  display: block; width: 100%; text-align: left; padding: 6px 10px;
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius);
}
.tree-menu button:hover { background: var(--grau-hell); }
.tree-menu button.danger { color: var(--rot); }
.side-title { margin: 4px 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.fav-list { list-style: none; padding: 0; margin: 0 0 12px; }
.fav-list a { display: block; padding: 3px 6px; color: inherit; text-decoration: none; border-radius: var(--radius); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-list a:hover { background: var(--grau-hell); }

/* --- Startseite: zuletzt besucht / geändert ---------------------------------------- */
.home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
@media (max-width: 700px) { .home-cols { grid-template-columns: 1fr; } }
.home-cols ul { list-style: none; padding: 0; margin: 0; }
.home-cols li { padding: 4px 0; border-bottom: 1px solid var(--linie); }
.home-cols li:last-child { border-bottom: 0; }
/* Seitensymbol im Kopf und Papierkorb-Liste */
.page-icon {
  background: none; border: 0; padding: 0 6px 0 0; font: inherit; font-size: 1em;
  line-height: 1; cursor: pointer; color: var(--linie);
}
.page-icon:hover { color: var(--rot); }
.trash-list { list-style: none; padding: 0; margin: 12px 0 0; }
.trash-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.trash-list li:last-child { border-bottom: 0; }

/* --- Statusmarken, Bildunterschriften, Inhaltsblock, Vollbild --------------------- */
.status-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .78rem; font-weight: 700; vertical-align: middle; }
.status-warn { background: var(--gelb); color: var(--anthrazit); }
.status-ok { background: #dff0e2; color: var(--ok); }
.status-danger { background: var(--rot-hell); color: var(--rot); }
.status-grau { background: var(--grau-hell); color: var(--grau); }

.wiki-content figure { margin: 1em 0; }
.wiki-content figure img { margin: 0; }
.wiki-content figcaption { color: var(--grau); font-size: .88rem; margin-top: 4px; }

.inline-toc { border: 1px solid var(--linie); border-left: 4px solid var(--rot); padding: 10px 14px; margin: 1.2em 0; background: var(--grau-hell); }
.inline-toc .toc-list { margin: 6px 0 0; }
.page-break { border-top: 1px dashed var(--linie); margin: 1.6em 0; }

.wiki-content img.zoomable { cursor: zoom-in; }
.md-lightbox {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  background: rgba(60,60,59,.9); padding: 24px; cursor: zoom-out;
}
.md-lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; cursor: default; }
.md-lightbox-close {
  position: absolute; top: 12px; right: 16px; width: 36px; height: 36px;
  background: none; border: 0; color: var(--weiss); font-size: 2rem; line-height: 1; cursor: pointer;
}
.toc-list a.active { color: var(--rot); font-weight: 700; }

/* --- Druckansicht ----------------------------------------------------------------- */
@media print {
  .bauchbinde, .wiki-side, .wiki-rail, .comment-fab, .wiki-menu-btn, .btn-row,
  .ed-bubble, .ed-slash, .ed-ctx, #toast, .code-copy, .h-anchor, .page-icon { display: none !important; }
  .wiki-shell { display: block; }
  .wiki-content a { color: inherit; text-decoration: underline; }
  .wiki-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .page-break { break-after: page; border: 0; margin: 0; }
  .callout, .accordion, table, figure, .columns { break-inside: avoid; }
  details.accordion > .accordion-body { display: block !important; }
  .table-scroll { overflow: visible; }
}
/* Kommentar-Reiter */
.c-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.c-tabs button {
  flex: 1; padding: 4px 6px; background: none; border: 1px solid var(--linie);
  border-radius: var(--radius); font: inherit; font-size: .8rem; color: var(--grau); cursor: pointer;
}
.c-tabs button.sel { background: var(--rot-hell); border-color: var(--rot); color: var(--rot); font-weight: 700; }
.ed-stats { margin-top: 8px; text-align: right; }
/* Textfarben – nur die Hausfarben aus dem Handbuch CD */
.tc-rot { color: var(--rot); }
.tc-blau { color: var(--wasser); }
.tc-gruen { color: var(--ok); }
.tc-grau { color: var(--grau); }
/* Gelb ist Hinweisfarbe: die Schrift darauf wird rot, sonst trägt die Marke keine Aussage. */
.tc-gelb { background: var(--gelb); color: var(--rot); font-weight: 600; padding: 0 3px; }
.wiki-content audio { display: block; width: 100%; margin: .8em 0; }
.th-sort { margin-left: 6px; padding: 0 2px; background: none; border: 0; color: var(--grau); font: inherit; font-size: .8em; cursor: pointer; opacity: .5; }
.wiki-content th:hover .th-sort, .th-sort:focus-visible { opacity: 1; }
.th-sort:hover { color: var(--rot); }
.columns.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .columns.cols-5, .columns.cols-4 { grid-template-columns: 1fr 1fr; } }
/* Versionsvergleich */
.diff { white-space: pre-wrap; font-size: .93rem; line-height: 1.5; }
.diff ins { background: #dff0e2; color: var(--ok); text-decoration: none; }
.diff del { background: var(--rot-hell); color: var(--rot); }


/* --- Sidebar in der Breite verstellbar ---------------------------------------------- */
.side-grip {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: col-resize; z-index: 5;
}
.side-grip:hover, .side-grip.dragging { background: var(--rot); opacity: .4; }
/* Automatische Textrichtung: importierte Inhalte können auch rechtsläufig sein. */
.wiki-content { unicode-bidi: plaintext; }
.wiki-content p, .wiki-content li, .wiki-content td, .wiki-content th, .wiki-content blockquote { unicode-bidi: plaintext; }
/* Ziehgriff für Blöcke im Editor */
.ed-grip {
  position: absolute; z-index: 1250; width: 18px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--grau); cursor: grab; user-select: none; border-radius: var(--radius);
  font-size: .95rem; line-height: 1;
}
.ed-grip:hover { background: var(--grau-hell); color: var(--anthrazit); }
.ed-grip:active { cursor: grabbing; }
.toastui-editor-contents .blk-before { box-shadow: 0 -2px 0 var(--rot); }
.toastui-editor-contents .blk-after { box-shadow: 0 2px 0 var(--rot); }
/* Import: Dateiliste und Fortschritt */
.imp-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: .88rem; }
.imp-list li { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--linie); }
.imp-list li:last-child { border-bottom: 0; }
.imp-list progress { flex: 1; }

/* --- Editor auf schmalen Bildschirmen ---------------------------------------------- */
@media (max-width: 760px) {
  .ed-bubble { max-width: 96vw; flex-wrap: wrap; justify-content: center; left: 2vw !important; }
  .ed-slash { width: min(94vw, 320px); left: 3vw !important; }
  .ed-ctx { max-width: 94vw; left: 3vw !important; flex-wrap: wrap; }
  .ed-grip { display: none; }                 /* Ziehen per Finger kollidiert mit dem Scrollen */
  .tree-menu { width: min(94vw, 260px); }
}
/* Markenblöcke im Editor: nur ein Hinweis, gefüllt wird erst in der Ansicht */
.toastui-editor-contents .ed-marker { border: 1px dashed var(--linie); padding: 8px 12px; margin: 1em 0; }
.toastui-editor-contents .page-break.ed-marker { border-top: 1px dashed var(--linie); text-align: center; }
/* Marken der Spalten- und Ausrichtungsabschnitte: nur eine schmale Linie mit Beschriftung,
   damit der Inhalt dazwischen der Blickfang bleibt – bearbeitet wird er ganz normal. */
/* Die Marke eines Abschnitts ist im Editor nur noch ein schmaler, unsichtbarer Anfasser:
   sichtbar wird der Abschnitt durch seine Wirkung, nicht durch eine Linie. Beim Überfahren
   blitzt eine feine Linie auf, damit man ihn findet und ziehen kann. */
.toastui-editor-contents .sek-marke {
  display: flex; align-items: center; height: 6px;
  border: 0; padding: 0; margin: .35em 0; line-height: 1; color: var(--rot);
}
.toastui-editor-contents .sek-marke::after {
  content: ""; flex: 1; border-top: 1px solid currentColor; opacity: 0; transition: opacity .12s;
}
.toastui-editor-custom-block:hover .sek-marke::after { opacity: .35; }
.toastui-editor-custom-block:has(.sek-marke) { margin: 0; }
/* An einer Marke gibt es nichts zu bearbeiten, und auch der Hinweis wird direkt im Text
   bearbeitet: die Leiste mit Blockname und Stift entfällt im Editor durchgehend. */
.wiki-editor .toastui-editor-custom-block .tool { display: none !important; }
/* Auswahlfelder in der Auswahlleiste */
.ed-bubble select.ed-style, .ed-bubble select.ed-align {
  width: auto; padding: 3px 4px; font-size: .85rem; border-color: var(--linie);
}
.ed-bubble select.ed-align { width: 3.2em; text-align: center; }
/* Ein einzelner Spaltenblock (fehlender ||| -Trenner) darf nicht in die halbe Breite gequetscht werden. */
.columns.cols-1 { grid-template-columns: minmax(0, 1fr); }

/* ============================================================================
   Eine Textspalte für Lesen und Schreiben. Beide Ansichten teilen sich Raster,
   Breite, linke Kante, Schriftgröße und Zeilenhöhe – beim Umschalten darf sich
   kein Wort bewegen. Deshalb steht hier alles beieinander statt verstreut.
   ============================================================================ */
/* Die rechte Spur behält ihre 260 px, auch wenn das Inhaltsverzeichnis darin
   ausgeblendet ist – nur so bleibt das Raster in beiden Ansichten dasselbe. */
.wiki-main {
  padding: 28px var(--lesepad) 80px;
  max-width: calc(var(--lesebreite) + 2 * var(--lesepad));
  width: 100%; margin: 0 auto; justify-self: center;
}
/* Der Editor legt seine Blöcke in ein Raster (für die Spalten). Dort fallen Ränder nicht
   zusammen. Damit die Ansicht dieselben Abstände zeigt, ist auch sie ein Raster – sonst
   verschöbe sich der Text ab der ersten Überschrift beim Umschalten. */
.wiki-content {
  max-width: none; font-size: var(--lesetext); line-height: var(--lesezeile);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-content: start;
}

/* Kopfzeile: eine Zeile – links der Pfad, rechts die Knöpfe. Sie bleibt beim Blättern
   unter der Bauchbinde stehen, damit Umschalter und Aktionen immer erreichbar sind.
   Beide Ansichten bauen dieselbe eine Zeile; nur so beginnt der Titel beim Umschalten
   an derselben Stelle. Deshalb auch kein Umbruch: der Pfad weicht mit … zurück. */
.wiki-head, .wiki-head.editing-head {
  display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: nowrap;
  margin: 0 0 20px; padding: 6px 0 8px; border-bottom: 2px solid var(--anthrazit);
  /* Über allem, was im Text liegt, aber unter der Bauchbinde (z-index 1200). */
  position: sticky; top: var(--topbar); z-index: 40; background: var(--weiss);
}
.wiki-head .wiki-meta {
  margin: 0; padding: 0; border: 0; min-width: 0; flex: 1 1 auto;
  font-size: .82rem; color: var(--grau);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Pfad steht links, alles andere rechtsbündig am Rand der Textspalte – wie in Docmost.
   Der Innenabstand nach links schiebt die Knöpfe ans Ende, egal wie lang der Pfad ist; ist er
   zu lang für die Zeile, wird er gekürzt statt umzubrechen. */
.wiki-head .krumen { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
/* Wird es eng, schrumpfen die Ebenen darüber – der Titel der Seite selbst zuletzt. */
.wiki-head .krumen .krume { flex: 0 8 auto; }
.wiki-head .krumen .krume[aria-current] { flex: 0 1 auto; }
.wiki-head .krumen .krume-sep { flex: none; }
.wiki-head .btn-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin: 0 0 0 auto; flex: none; }
/* Die Symbolknöpfe der Kopfzeile sind quadratisch – wie die Symbole in Docmost. */
/* Sprungziele (Inhaltsverzeichnis, Kommentaranker) dürfen nicht unter der klebenden
   Bauchbinde und Kopfzeile landen. */
.wiki-content h1, .wiki-content h2, .wiki-content h3, .wiki-content h4,
.wiki-content h5, .wiki-content h6, .wiki-content [id] { scroll-margin-top: calc(var(--topbar) + 60px); }
/* Der Knopf in der Kopfzeile blendet die Gliederung aus; die rechte Spur behält ihre
   Breite, damit sich der Text dabei nicht verschiebt. */
body.toc-aus .wiki-rail .toc { display: none; }
/* Der Speicherstand steht links neben den Knöpfen – ruhig, außer es klemmt. */
.wiki-head #ed-status { flex: none; white-space: nowrap; }
.wiki-head #ed-status.warn { color: var(--rot); font-weight: 600; }
.wiki-head .kopfknopf {
  width: 30px; padding: 0; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Knöpfe mit gezeichnetem Symbol statt Schriftzeichen – dieselben Regeln wie in den
   schwebenden Leisten: 16er-Raster, currentColor, damit das Symbol die Farbe des Knopfes
   annimmt (auch beim Überfahren). */
.wiki-head .kopfknopf svg {
  width: 16px; height: 16px; display: block; flex: none; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Der Seitentitel ist die erste Überschrift der Textspalte – in beiden Ansichten. */
.wiki-content h1, .wiki-content h2, .wiki-content h3, .wiki-content h4,
.wiki-content h5, .wiki-content h6, h1.seitentitel,
.wiki-editor .toastui-editor-contents h1, .wiki-editor .toastui-editor-contents h2,
.wiki-editor .toastui-editor-contents h3, .wiki-editor .toastui-editor-contents h4,
.wiki-editor .toastui-editor-contents h5, .wiki-editor .toastui-editor-contents h6 {
  font-family: var(--font-marke);
}
h1.seitentitel,
.wiki-editor .toastui-editor-contents h1:first-child {
  font-size: 1.7rem; line-height: 1.2; font-weight: 700; color: var(--rot);
  letter-spacing: -.01em; margin: 0 0 .5em; padding: 0; border: 0;
}
h1.seitentitel .page-icon { margin-right: 6px; }

/* Brotkrumen oben links – Symbol und Titel je Ebene, getrennt durch einen Schrägstrich. */
.krumen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .84rem; min-width: 0; }
.krumen .krume { display: inline-flex; align-items: center; gap: 5px; color: var(--grau); text-decoration: none; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.krumen a.krume:hover { color: var(--rot); text-decoration: underline; }
.krumen .krume[aria-current] { color: var(--schwarz); font-weight: 700; }
.krumen .krume-icon { font-size: 1em; line-height: 1; }
.krumen .krume-sep { color: var(--linie); }

/* Autorzeile unter der Überschrift – in der Ansicht und im Editor dieselbe. */
.autorzeile { display: flex; align-items: center; gap: 8px; height: 24px; line-height: 1; margin: 0 0 1.2em; font-size: .86rem; color: var(--grau); }
.autorzeile .avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--rot-hell); color: var(--rot); font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.autorzeile .autorname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Name und Zeichen sind zusammen ein Knopf: ein Klick zeigt, wer an der Seite geschrieben hat. */
.autorzeile .autor-knopf {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; border-radius: var(--radius);
}
.autorzeile .autor-knopf:hover .autorname { color: var(--anthrazit); text-decoration: underline; }

/* Die Tafel darunter: oben der Ersteller, darunter die Mitwirkenden. Sie hängt an der
   Autorenzeile und blättert mit ihr mit; deshalb liegt sie – wie der Text selbst – unter
   der Kopfzeile (z-index 40) und der Bauchbinde (1200) und verschwindet beim Blättern
   dahinter, statt darüber hinwegzuwandern. */
.autor-tafel {
  position: absolute; z-index: 30; min-width: 230px; max-width: 320px;
  padding: 10px 12px; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.autor-tafel .autor-person { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.autor-tafel .avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--rot-hell); color: var(--rot); font-size: .74rem; font-weight: 700;
}
.autor-tafel .avatar.mit { background: var(--grau-hell); color: var(--grau); }
.autor-tafel .autor-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.autor-tafel .autor-nam { font-weight: 600; color: var(--anthrazit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autor-tafel .autor-rolle { font-size: .8rem; color: var(--grau); }
.autor-tafel .autor-trenner { border-top: 1px solid var(--linie); margin: 8px 0; }
.autor-tafel .autor-titel {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grau); margin-bottom: 2px;
}
.rundknopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; padding: 0;
  border: 1px solid var(--linie); border-radius: 50%; background: none;
  font: inherit; font-size: .74rem; font-style: italic; font-weight: 700;
  color: var(--grau); cursor: pointer; line-height: 1;
}
.rundknopf:hover { border-color: var(--rot); color: var(--rot); }
.rundknopf.on { border-color: var(--rot); background: var(--rot-hell); color: var(--rot); }
.rundknopf.still { cursor: default; font-style: normal; }

/* Angaben zur Seite in der rechten Leiste. */
.seiten-info { margin-bottom: 22px; }
.info-liste { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 14px; font-size: .82rem; }
.info-liste dt { color: var(--grau); }
.info-liste dd { margin: 0; color: var(--schwarz); text-align: right; }
.info-links { margin: 0 0 12px; padding-left: 16px; font-size: .82rem; }
.info-links a { color: var(--anthrazit); }
.info-links a:hover { color: var(--rot); }

/* Im Editor ist die Autorzeile ein eingehängtes Stück DOM, kein Dokumentinhalt. */
.toastui-editor-contents .autorzeile { user-select: none; }

/* Der Editor IST die Textspalte. Vier Klassen tief, weil das Vendor-CSS nach app.css
   geladen wird: bei gleicher Spezifität gewänne sonst dessen padding von 16px 25px. */
.wiki-editor .toastui-editor-ww-container .ProseMirror.toastui-editor-contents {
  max-width: none; margin: 0; padding: 0;
  font-size: var(--lesetext); line-height: var(--lesezeile);
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents :not(table) {
  line-height: var(--lesezeile); box-sizing: border-box;
}
/* Überschriften und die Autorzeile behalten ihre eigene Zeilenhöhe – die Regel darüber ist
   spezifischer als die Überschriftenregeln weiter unten und würde sie sonst überschreiben. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents h1,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents h2,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents h3,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents h4 { line-height: 1.2; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents .autorzeile { line-height: 1; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents p { margin: 0 0 .9em; color: inherit; }
.wiki-editor .toastui-editor-contents h1, .wiki-editor .toastui-editor-contents h2,
.wiki-editor .toastui-editor-contents h3, .wiki-editor .toastui-editor-contents h4 {
  color: var(--anthrazit); font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; border: 0; padding: 0; margin: 0 0 .5em;
}
.wiki-editor .toastui-editor-contents h1 { font-size: 1.7rem; color: var(--rot); margin-top: 1.2em; }
.wiki-editor .toastui-editor-contents h2 { font-size: 1.35rem; margin-top: 1.4em; border-bottom: 1px solid var(--linie); padding-bottom: 3px; }
.wiki-editor .toastui-editor-contents h3 { font-size: 1.1rem; margin-top: 1.2em; }
.wiki-editor .toastui-editor-contents h4 { font-size: 1rem; margin-top: 1em; }
.wiki-editor .toastui-editor-contents h1:first-child { margin-top: 0; }
.wiki-editor .toastui-editor-contents ul, .wiki-editor .toastui-editor-contents ol {
  margin: 1em 0; padding-left: 40px; color: inherit;
}
.wiki-editor .toastui-editor-contents ul { list-style: disc outside; }
.wiki-editor .toastui-editor-contents ol { list-style: decimal outside; }
.wiki-editor .toastui-editor-contents ul > li::before,
.wiki-editor .toastui-editor-contents ol > li::before { content: none; }
.wiki-editor .toastui-editor-contents li { min-height: 0; }
/* Im Editor steckt jeder Listenpunkt in einem Absatz, in der Leseansicht nicht. Dessen
   unterer Rand zöge die Punkte um eine knappe Zeile auseinander. Mehrere Absätze in einem
   Punkt behalten ihren Abstand – nur der letzte gibt ihn ab. */
.wiki-editor .toastui-editor-contents li > p:last-child { margin-bottom: 0; }
.wiki-editor .toastui-editor-contents .task-list-item { margin-left: -24px; padding-left: 24px; }
.wiki-editor .toastui-editor-contents .task-list-item::before { content: ""; }
@media print { .wiki-main { max-width: none; } }

/* --- Der Editor zeigt, was dasteht --------------------------------------------------
   Ausrichtung, Hinweiskisten und Spalten werden im Editor wirklich dargestellt, nicht
   beschriftet. Die Klassen kommen aus Node-Dekorationen (siehe layoutPlugin in wiki.js);
   das Dokument selbst weiß davon nichts. */
.wiki-editor .toastui-editor-ww-container .ProseMirror {
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: 0; row-gap: 0; align-content: start; align-items: start;
  /* Bezugsrahmen für die absolut liegenden Spaltenblöcke (siehe layoutPlugin). */
  position: relative;
  /* Toast UI setzt auf .toastui-editor-contents z-index: 20. Ohne Positionierung blieb das
     wirkungslos; mit dem Bezugsrahmen oben griffe es plötzlich – und der Text stünde auf
     gleicher Stufe wie die klebende Kopfzeile, also (später im Text) über ihr. */
  z-index: auto;
}
.wiki-editor .toastui-editor-ww-container .ProseMirror > * { grid-column: 1 / -1; min-width: 0; }
/* Die Autorzeile ist ein Widget ohne Dekoration – ihre Zeile hält das Plugin frei. */
.wiki-editor .toastui-editor-ww-container .ProseMirror > .autorzeile { grid-column: 1 / -1; grid-row: 2; }

/* Hinweiskiste: die Fläche liegt auf jedem Block, die beiden Marken bilden ihren oberen und
   unteren Rand. Das Symbol steht groß am ersten Absatz – wie in der Leseansicht, wo es links
   neben dem Text sitzt. Beschriftungen wie "HINWEIS" gibt es nicht: der Editor soll zeigen,
   was dasteht, nicht was es heißt. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-marke {
  --co-flaeche: #eaf2f9; --co-kante: var(--wasser);
  background: var(--co-flaeche); border-left: 4px solid var(--co-kante);
  margin: 0; padding: 0 16px 0 46px; align-self: stretch;
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-warning { --co-flaeche: #fffbd6; --co-kante: var(--gelb-dunkel); }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-danger { --co-flaeche: var(--rot-hell); --co-kante: var(--rot); }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-success { --co-flaeche: #e9f5ec; --co-kante: var(--ok); }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-note { --co-flaeche: var(--grau-hell); --co-kante: var(--grau); }
/* Selbst gewählte Pastellfarbe schlägt die Farbe der Hinweisart. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .cofarbe-rosa { --co-flaeche: #fde8ee; --co-kante: #e08fa8; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .cofarbe-pfirsich { --co-flaeche: #fdeee0; --co-kante: #e2a066; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .cofarbe-sonne { --co-flaeche: #fdf6d8; --co-kante: #d8c400; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .cofarbe-mint { --co-flaeche: #e4f5ea; --co-kante: #5fb27a; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .cofarbe-himmel { --co-flaeche: #e4f0fa; --co-kante: #5f9ccd; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .cofarbe-flieder { --co-flaeche: #efe6f7; --co-kante: #9a76bd; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .cofarbe-sand { --co-flaeche: #f3ede3; --co-kante: #bfa780; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .cofarbe-stein { --co-flaeche: #f0f0f0; --co-kante: #a0a0a0; }

/* Dieselben Farben in der Leseansicht. */
.callout.co-farbe-rosa { background: #fde8ee; border-color: #e08fa8; }
.callout.co-farbe-pfirsich { background: #fdeee0; border-color: #e2a066; }
.callout.co-farbe-sonne { background: #fdf6d8; border-color: #d8c400; }
.callout.co-farbe-mint { background: #e4f5ea; border-color: #5fb27a; }
.callout.co-farbe-himmel { background: #e4f0fa; border-color: #5f9ccd; }
.callout.co-farbe-flieder { background: #efe6f7; border-color: #9a76bd; }
.callout.co-farbe-sand { background: #f3ede3; border-color: #bfa780; }
.callout.co-farbe-stein { background: #f0f0f0; border-color: #a0a0a0; }

/* Auswahlfeld für die Pastellfarben. */
.ed-farben { position: absolute; z-index: 1310; display: grid; grid-template-columns: repeat(3, 30px); gap: 6px;
  padding: 8px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.ed-farben .farbe { width: 30px; height: 30px; border: 1px solid var(--linie); border-radius: 4px; cursor: pointer; padding: 0;
  font: inherit; font-size: .8rem; color: var(--grau); }
.ed-farben .farbe:hover { border-color: var(--rot); }
.ed-farben .farbe.on { border: 2px solid var(--rot); }
.ed-farben .farbe.leer { background: var(--weiss); }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-marke:not(.co-schluss) { padding-top: 6px; margin-top: 1.1em; border-top-right-radius: 4px; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-schluss { padding-bottom: 6px; margin-bottom: 1.1em; border-bottom-right-radius: 4px; }
/* Die Marke ist nur noch ein schmaler Anfasser am oberen und unteren Rand der Kiste.
   Toast UI polstert die Hülle jedes Custom-Blocks; hier wäre das sichtbarer Leerraum und
   die Kiste stünde höher als in der Leseansicht. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-marke .sek-marke { margin: 0; height: 4px; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-marke .sek-marke::after { display: none; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-marke .toastui-editor-custom-block-view { padding: 0; }
/* Das Symbol steht im linken Einzug der Kiste, auf Höhe der ersten Zeile – wie in der
   Leseansicht, wo es neben dem Text sitzt. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-erst { position: relative; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .co-erst::before {
  content: attr(data-emoji); position: absolute; left: 12px; top: 0;
  /* Größe und Zeilenhöhe wie in der Leseansicht; die Spalte ist so breit wie das frühere
     Zeichen, damit das kleinere an genau derselben Stelle steht. */
  font-size: .72em; line-height: calc(var(--lesetext) * var(--lesezeile));
  width: calc(var(--lesetext) * 1.68); text-align: center;
}

/* In Kiste und Box tragen die Blöcke die Fläche selbst; ihre Ränder sind deshalb auf null
   gesetzt, sonst risse die Fläche zwischen zwei Absätzen auf. Den Abstand übernimmt ein
   Innenabstand – mit denselben Werten, die der Block in der Leseansicht als oberen Rand hätte.
   Ohne ihn klebte eine Liste unmittelbar am Absatz darüber. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .kasten:not(.kasten-erst) { padding-top: .9em; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > ul.kasten:not(.kasten-erst),
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > ol.kasten:not(.kasten-erst),
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > h4.kasten:not(.kasten-erst) { padding-top: 1em; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > h1.kasten:not(.kasten-erst),
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > h3.kasten:not(.kasten-erst) { padding-top: 1.2em; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > h2.kasten:not(.kasten-erst) { padding-top: 1.4em; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .kasten.ed-leerzeile { padding-top: 0; }

/* Aufzählungen in der Kiste brauchen ihren gewohnten Einzug – ohne ihn klebten die Punkte
   am linken Rand der Kiste. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > ul.co,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > ol.co { padding-left: 78px; }
/* Auch in der Leseansicht stehen Aufzählungen der Kiste eingerückt zum Fließtext daneben. */
.wiki-content .callout-body > ul, .wiki-content .callout-body > ol { padding-left: 32px; }

/* Einklappbare Box: im Editor immer aufgeklappt – nur so laesst sich ihr Inhalt bearbeiten.
   Titel und Inhalt sind gewoehnliche Bloecke; Rahmen, Flaeche und Pfeil kommen aus diesen
   Klassen und zeigen dasselbe Bild wie die aufgeklappte Box in der Leseansicht. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-titel,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-marke {
  background: var(--weiss); border-left: 4px solid var(--grau); border-right: 1px solid var(--linie);
  margin: 0; padding: 0 12px; align-self: stretch;
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-titel,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-auf { background: var(--grau-hell); }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-titel {
  font-weight: 600; padding: 0 12px 8px 32px; position: relative;
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-erst::before {
  content: ""; position: absolute; left: 14px; top: .45em; width: 6px; height: 6px;
  border-right: 2px solid var(--grau); border-bottom: 2px solid var(--grau); transform: rotate(45deg);
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-auf {
  border-top: 1px solid var(--linie); border-top-right-radius: 4px; padding-top: 4px; margin-top: 1em;
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-mitte { padding-bottom: 6px; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-schluss {
  border-bottom: 1px solid var(--linie); border-bottom-right-radius: 4px; padding-bottom: 6px; margin-bottom: 1em;
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-marke .sek-marke { margin: 0; height: 4px; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-marke .sek-marke::after { display: none; }
/* Toast UI polstert die Huelle jedes Custom-Blocks; an der Marke waere das sichtbarer Leerraum. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .ak-marke .toastui-editor-custom-block-view { padding: 0; }
/* Aufzaehlungen in der Box eingerueckt wie im Fliesstext daneben. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > ul.ak,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > ol.ak { padding-left: 52px; }

/* Ausrichtung */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .al-left { text-align: left; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .al-center { text-align: center; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .al-right { text-align: right; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .al-justify { text-align: justify; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .al-center img { margin-left: auto; margin-right: auto; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .al-right img { margin-left: auto; }

/* Die Beschriftungen der Marken ("SPALTE 1", "ENDE", "MITTIG") gehören nicht in den Text –
   der Editor zeigt ja bereits, was sie bewirken. Für Vorlesehilfen bleiben sie erhalten. */
.toastui-editor-contents .sek-marke > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sek-still .sek-marke,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-fuss .sek-marke,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-kopf .sek-marke { margin: .5em 0; opacity: .35; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sek-still:hover .sek-marke,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-kopf:hover .sek-marke,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-fuss:hover .sek-marke { opacity: .9; }

/* Spalten: der ganze Abschnitt bekommt EINE Rasterzeile, seine Blöcke liegen darin absolut.
   Die Waagerechte rechnet CSS (--sp-l/--sp-b, aus dem Verschachtelungspfad), die Senkrechte
   misst das Plugin und schreibt sie in ein eigenes Stilblatt. Nur so fließt jede Spalte für
   sich: eine Rasterzeile wäre über alle Spalten hinweg gleich hoch. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-kopf .toastui-editor-custom-block-view,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-fuss .toastui-editor-custom-block-view { padding: 0; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-kopf .sek-marke { margin: 0; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-fuss .sek-marke { margin: 0 0 .6em; }
/* Toast UI polstert die Hülle jedes Custom-Blocks. An den Spaltenmarken sind das oben und
   unten je 17 px sichtbarer Leerraum – der Abschnitt rückte damit weit vom Absatz davor ab. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-kopf .toastui-editor-custom-block-view,
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-fuss .toastui-editor-custom-block-view { padding: 0; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-abs {
  position: absolute; top: 0; left: var(--sp-l, 0px); width: var(--sp-b, 100%);
}
/* Wie in der Leseansicht (.columns .col > :first-child) beginnt jede Spalte ohne oberen Rand.
   Das gilt auch, wenn dort eine Hinweiskiste oder eine Box anfängt – deren eigene Regel ist
   spezifischer, deshalb hier ausnahmsweise !important. */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-erst { margin-top: 0 !important; }
/* Die Schlussmarke bleibt im Fluss und hält die Zeile auf: ihr oberer Rand ist die
   gemessene Abschnittshöhe (wird vom Plugin gesetzt). */
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents > .sp-fuss { margin-top: 0; }

/* Der Editor erbt das Aussehen der Leseansicht, wo es geht: Anhänge, Bildunterschriften,
   Tabellenköpfe, Zitate und Codeblöcke sahen sonst anders aus als im fertigen Artikel. */
.wiki-editor .toastui-editor-contents a.attachment {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 5px 10px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--weiss); color: var(--anthrazit); text-decoration: none;
}
.wiki-editor .toastui-editor-contents a.attachment:hover { border-color: var(--rot); color: var(--rot); }
.wiki-editor .toastui-editor-contents .att-icon { font-size: 1.15em; line-height: 1; }
.wiki-editor .toastui-editor-contents .att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-editor .toastui-editor-contents .att-ext { color: var(--grau); font-size: .74rem; letter-spacing: .04em; flex: none; }
.wiki-editor .toastui-editor-contents img { max-height: 70vh; }
.wiki-editor .toastui-editor-contents video, .wiki-editor .toastui-editor-contents audio { max-width: 100%; }
.wiki-editor .toastui-editor-contents p > em:only-child { color: var(--grau); font-size: .9em; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents th {
  background: var(--grau-hell); color: var(--anthrazit); font-weight: 700; padding: 6px 9px; border: 1px solid var(--linie);
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents td { padding: 6px 9px; border: 1px solid var(--linie); }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents blockquote {
  margin: 1em 0; padding: 6px 14px; border-left: 4px solid var(--grau); background: var(--grau-hell); color: inherit;
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents blockquote p { color: inherit; }
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents pre {
  background: var(--grau-hell); padding: 10px 12px;
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents code {
  background: var(--grau-hell); padding: 1px 4px; border-radius: 2px; font-size: .9em; color: inherit;
}
.wiki-editor .toastui-editor-ww-container .toastui-editor-contents pre code { background: none; padding: 0; }

/* --- Editor im Docmost-Zuschnitt --------------------------------------------------- */
/* Umschalter Lesen/Bearbeiten oben rechts – wie in Docmost der kurze Weg zwischen beidem. */
.mode-toggle { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; margin-left: 6px; }
.mode-toggle button {
  border: 0; background: var(--weiss); color: var(--grau); cursor: pointer;
  font: inherit; font-size: .82rem; padding: 5px 12px; line-height: 1.2;
}
.mode-toggle button + button { border-left: 1px solid var(--linie); }
.mode-toggle button:hover { background: var(--grau-hell); color: var(--schwarz); }
.mode-toggle button.on { background: var(--rot); color: var(--weiss); cursor: default; }
.mode-toggle button.on:hover { background: var(--rot); color: var(--weiss); }
.wiki-editor .toastui-editor-defaultUI { border: 0; }
.wiki-editor .toastui-editor-ww-container { background: transparent; }