/* Aufbau und Farben wie die Server-Doku: Seitenleiste links, Inhalt, Inhaltsverzeichnis rechts.
   Immer hell (unabhängig vom System). */
:root {
  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f0f3f7; --text: #1b2230; --muted: #5d6878; --border: #e1e6ed;
  --accent: #3550d6; --accent-soft: #eaeefd; --accent-text: #2a40ad;
  --bad: #bf2a2a; --bad-bg: #fcecec; --marke: #6b4fa0; --marke-bg: #f0ebf8;
  --inline-code: #eceff5; --code-bg: #f3f5f8;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 2px 8px rgba(16,24,40,.06);
  --radius: 12px; --sidebar: 276px; --toc: 224px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 20px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15.5px/1.62 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
.icon { width: 18px; height: 18px; flex: none; }

/* Raster */
.layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--toc); min-height: 100vh; }
.layout.no-toc { grid-template-columns: var(--sidebar) minmax(0, 1fr); }

/* Seitenleiste */
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border);
  padding: 18px 14px 28px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #2f47c7, #6a4bd6); flex: none; }
.brand-mark .icon { width: 20px; height: 20px; }
.brand-title { display: block; font-weight: 680; font-size: 15.5px; line-height: 1.2; }
.brand-sub { display: block; font-size: 12px; color: var(--muted); }
.sb-suche { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--muted); }
.sb-suche:focus-within { border-color: var(--accent); background: var(--surface); }
.sb-suche input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); padding: 8px 0; outline: none; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text); font-size: 14.2px; line-height: 1.3; }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a .icon { color: var(--muted); }
.nav a.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 620; }
.nav a.active .icon { color: var(--accent); }
.nav-group-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 16px 10px 5px; }

/* Seitenbaum */
.baum { flex: 1; }
.baum ul { list-style: none; margin: 0; padding: 0; }
.baum ul ul { padding-left: 14px; margin-left: 9px; border-left: 1px solid var(--border); }
.baum a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--text); font-size: 14.2px; line-height: 1.3; }
.baum a:hover { background: var(--surface-2); text-decoration: none; }
.baum a.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 620; }
.baum li.blatt > a { margin-left: 18px; }
.baum summary { display: flex; align-items: center; list-style: none; cursor: pointer; border-radius: 8px; }
.baum summary::-webkit-details-marker { display: none; }
.baum summary::before { content: ""; flex: none; width: 18px; height: 18px; margin-right: 0;
  background: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6878' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  transition: transform .15s ease; }
.baum details[open] > summary::before { transform: rotate(90deg); }
.baum summary a { flex: 1; min-width: 0; }
.sb-fuss { margin-top: 22px; padding: 12px 10px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.sb-fuss form { margin: 0; }

/* Inhalt */
.content { padding: 36px 48px 80px; min-width: 0; }
.page { max-width: 860px; margin: 0 auto; }
.page-head { margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.crumb { font-size: 12.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.crumb a { color: inherit; }
h1 { font-size: 30px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.015em; }
.meta { color: var(--muted); font-size: 14px; }
h2 { font-size: 21px; line-height: 1.3; margin: 36px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 16.5px; margin: 26px 0 8px; }
.inhalt { overflow-wrap: anywhere; }
.inhalt > :first-child { margin-top: 0; }
.inhalt h1 { font-size: 24px; margin: 30px 0 10px; }
.inhalt ul, .inhalt ol { padding-left: 1.4em; }
.inhalt li { margin: 3px 0; }
.tabelle { overflow-x: auto; margin: 14px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.inhalt table { border-collapse: collapse; width: 100%; }
.inhalt th, .inhalt td { border-bottom: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
.inhalt tr:last-child td { border-bottom: 0; }
.inhalt th { background: var(--surface-2); font-weight: 650; white-space: nowrap; }
.inhalt code { font: 13.5px var(--mono); background: var(--inline-code); padding: 1px 5px; border-radius: 5px; }
.inhalt pre { background: var(--code-bg); border: 1px solid var(--border); padding: 12px 14px; border-radius: 10px; overflow-x: auto; }
.inhalt pre code { background: none; padding: 0; }
.inhalt blockquote { margin: 14px 0; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; color: var(--text); }
.inhalt img { max-width: 100%; height: auto; border-radius: 8px; }
.inhalt hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
.unterseiten { margin-top: 36px; padding-top: 4px; border-top: 1px solid var(--border); }
.unterseiten ul { padding-left: 1.2em; }
.marke { display: inline-block; font-size: 11.5px; font-weight: 650; color: var(--marke); background: var(--marke-bg); border-radius: 999px; padding: 1px 8px; vertical-align: 1px; }
.hint { color: var(--muted); font-size: 14px; padding: 8px 10px; }
.liste { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.liste li { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.liste li:last-child { border-bottom: 0; }
.liste .zeit { display: block; color: var(--muted); font-size: 13px; }
.treffer { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin: 10px 0; color: var(--text); box-shadow: var(--shadow); }
.treffer:hover { border-color: var(--accent); text-decoration: none; }
.treffer-titel { display: block; font-weight: 650; color: var(--accent-text); }
.r-snip { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; line-height: 1.45; }
mark { background: #dfe5fd; color: var(--text); border-radius: 3px; padding: 0 2px; }

/* Inhaltsverzeichnis rechts */
.toc { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 40px 18px 24px 4px; font-size: 13.5px; }
.toc-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc a { display: block; padding: 4px 10px; color: var(--muted); line-height: 1.35; }
.toc a:hover { color: var(--accent-text); text-decoration: none; }
.toc .toc-3 a { padding-left: 22px; font-size: 13px; }

/* Einfache Seiten: Anmeldung, Zugriff erlauben */
.kopf { display: flex; align-items: center; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.kopf .brand { padding: 0; }
.einfach-main { padding: 24px 16px 48px; }
.karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.schmal { max-width: 440px; margin: 24px auto; }
.karte h1 { font-size: 24px; }
label { display: block; font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }
input[type=email], input[type=password] { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; color: var(--text);
  background: #fff; border: 1px solid #cdd4de; border-radius: 9px; }
input[type=email]:focus, input[type=password]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
button { font: inherit; font-weight: 620; padding: 10px 16px; border-radius: 9px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; margin-top: 18px; }
button.zweit { background: #fff; color: var(--accent-text); }
button.link { background: none; border: 0; color: var(--accent-text); padding: 0; margin: 0; font-weight: 400; font-size: inherit; }
button.link:hover { text-decoration: underline; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.fehler { color: var(--bad); background: var(--bad-bg); border-radius: 9px; padding: 8px 12px; }
.hinweis { color: var(--muted); font-size: 14px; }
.rechte { padding-left: 1.2em; }

/* Mobil */
.topbar, .backdrop { display: none; }
.icon-btn { display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; }
@media (max-width: 1200px) { .layout { grid-template-columns: var(--sidebar) minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 860px) {
  .layout, .layout.no-toc { display: block; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .topbar-title { flex: 1; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: 290px; max-width: 86vw; height: auto; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .sidebar.open { transform: none; }
  .backdrop.show { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(8,12,20,.45); }
  .content { padding: 20px 16px 60px; }
  h1 { font-size: 25px; }
  html { scroll-padding-top: 70px; }
}
@media print {
  .sidebar, .toc, .topbar, .backdrop { display: none !important; }
  .layout { display: block; } .content { padding: 0; } body { background: #fff; }
}

/* ---------------------------------------------------------------- Bearbeiten */
[hidden] { display: none !important; }
.zahl { margin-left: auto; font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 0 7px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
a.knopf, .aktionen a { display: inline-flex; align-items: center; gap: 7px; font-weight: 620; font-size: 14px; padding: 7px 12px; border-radius: 9px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; text-decoration: none; }
a.knopf .icon { width: 16px; height: 16px; }
a.knopf.zweit { background: var(--surface); color: var(--accent-text); border-color: var(--border); }
a.knopf.zweit:hover { border-color: var(--accent); }
a.knopf.leise { color: var(--muted); }
a.knopf:hover { text-decoration: none; }
button.gefahr { background: var(--bad); border-color: var(--bad); }
.erfolg { color: #157a3a; background: #e6f5ea; border-radius: 9px; padding: 8px 12px; margin: 0 0 16px; }
.warnung { color: #6b4500; background: #fff3d4; border: 1px solid #f1d79a; border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; }
.warnung form.inline { display: inline; }
.warnung button { margin: 0 8px 0 4px; padding: 5px 10px; font-size: 13.5px; }
.liste li.mit-knopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.liste li.mit-knopf button { margin: 0; padding: 6px 12px; font-size: 13.5px; }
.liste li.frisch { background: var(--accent-soft); }

.editor-form .felder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px 16px; margin-bottom: 14px; }
.editor-form label { margin: 0; }
.editor-form input[type=text], .editor-form select { display: block; width: 100%; margin-top: 4px; padding: 9px 12px; font: inherit; color: var(--text);
  background: #fff; border: 1px solid #cdd4de; border-radius: 9px; }
.editor-form .titel input { font-size: 18px; font-weight: 620; }
.editor-form input:focus, .editor-form select:focus, .quelltext:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.werkzeuge { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; }
.werkzeuge .gruppe { display: flex; gap: 2px; padding-right: 6px; border-right: 1px solid var(--border); }
.werkzeuge .gruppe:last-child, .werkzeuge .gruppe.rechts { border-right: 0; }
.werkzeuge .gruppe.rechts { margin-left: auto; }
.werkzeuge button { margin: 0; padding: 5px 9px; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 7px; white-space: nowrap; }
.werkzeuge button:hover { background: var(--surface-2); border-color: var(--border); }
.werkzeuge button.aktiv, .werkzeuge button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); border-color: #c9d3fb; }
.werkzeuge button:disabled { opacity: .35; cursor: default; background: transparent; border-color: transparent; }
.werkzeuge .nur-tabelle { display: none; }
.werkzeuge.in-tabelle .nur-tabelle { display: flex; }
.werkzeuge.nur-quelltext .gruppe:not(.rechts) { opacity: .35; pointer-events: none; }
.editor, .quelltext { display: block; width: 100%; min-height: 55vh; background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.quelltext { padding: 14px 16px; font: 14px/1.6 var(--mono); color: var(--text); resize: vertical; border-radius: 10px; }
#werkzeuge:not([hidden]) ~ .quelltext { border-radius: 0 0 10px 10px; }
.editor-flaeche { min-height: 55vh; padding: 16px 20px 40px; outline: none; }
.editor-flaeche p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--muted); pointer-events: none; }
.editor-flaeche ul[data-type="taskList"], .inhalt ul.contains-task-list { list-style: none; padding-left: 4px; }
.editor-flaeche ul[data-type="taskList"] li { display: flex; gap: 8px; align-items: flex-start; }
.editor-flaeche ul[data-type="taskList"] li > label { margin: 3px 0 0; }
.editor-flaeche ul[data-type="taskList"] li > div { flex: 1; }
.editor-flaeche .tableWrapper { overflow-x: auto; margin: 14px 0; border: 1px solid var(--border); border-radius: 10px; }
.editor-flaeche table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.editor-flaeche th, .editor-flaeche td { border: 1px solid var(--border); padding: 7px 10px; vertical-align: top; position: relative; min-width: 4em; }
.editor-flaeche th { background: var(--surface-2); }
.editor-flaeche .selectedCell { background: var(--accent-soft); }
.editor-flaeche hr.ProseMirror-selectednode { outline: 2px solid var(--accent); }
.editor-flaeche a { text-decoration: underline; }
.knoepfe.fuss { position: sticky; bottom: 0; align-items: center; padding: 12px 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.knoepfe.fuss button, .knoepfe a.knopf { margin-top: 0; }
.tipp { color: var(--muted); font-size: 13px; }
@media (max-width: 860px) {
  .editor-form .felder { grid-template-columns: 1fr; }
  .werkzeuge { flex-wrap: nowrap; overflow-x: auto; top: 59px; }
  .werkzeuge .gruppe.rechts { margin-left: 0; }
  .editor-flaeche { padding: 12px 14px 32px; }
  .tipp { display: none; }
}
.editor-flaeche li > p, .editor-flaeche td > p, .editor-flaeche th > p { margin: 0; }
.editor-flaeche td, .editor-flaeche th { padding: 8px 12px; }
.werkzeuge button[data-cmd="rueck"], .werkzeuge button[data-cmd="vor"] { font-size: 17px; line-height: 1; padding: 4px 9px; }

/* ---------------------------------------------------------------- Dateien */
.anhaenge { margin-top: 36px; }
.anhaenge .liste li { padding: 8px 12px; }
a.anhang { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); }
a.anhang:hover { text-decoration: none; }
a.anhang:hover .anhang-name { color: var(--accent-text); text-decoration: underline; }
.anhang > span { display: flex; flex-direction: column; min-width: 0; }
.anhang-name { font-weight: 600; overflow-wrap: anywhere; }
.vorschau { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex: none; background: var(--surface-2); }
.datei-typ { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.anhang-knoepfe { display: flex; align-items: center; gap: 14px; flex: none; font-size: 13.5px; }
.anhang-knoepfe form { margin: 0; }
button.link.leise { color: var(--muted); font-size: 13.5px; }
.inhalt img { display: block; margin: 14px 0; box-shadow: var(--shadow); }
.editor-flaeche img { max-width: 100%; height: auto; border-radius: 8px; }
.editor-flaeche img.ProseMirror-selectednode { outline: 3px solid var(--accent); }
.editor.ziehen { outline: 3px dashed var(--accent); outline-offset: -6px; background: var(--accent-soft); }
.werkzeuge button.laedt { opacity: .6; cursor: progress; }
@media (max-width: 560px) {
  .anhaenge .liste li.mit-knopf { flex-direction: column; align-items: stretch; }
  .anhang-knoepfe { padding-left: 60px; }
}

/* Inhaltsverzeichnis als Schublade unter 1200 px (iPad, Handy) */
.toc-btn { display: none; }
@media (max-width: 1200px) {
  .toc { display: block; position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh; width: 290px; max-width: 86vw; max-height: none; align-self: auto;
    padding: 24px 18px; background: var(--surface); border-left: 1px solid var(--border); box-shadow: 0 0 40px rgba(0,0,0,.25);
    transform: translateX(102%); transition: transform .22s ease; }
  .toc.open { transform: none; }
  .toc a { padding: 8px 10px; font-size: 15px; }
  .toc-btn { display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 40; right: 18px; bottom: 18px; margin: 0;
    padding: 11px 16px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-weight: 620;
    box-shadow: 0 6px 20px rgba(53,80,214,.35); }
  .toc-btn .icon { width: 18px; height: 18px; }
  .backdrop.show { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(8,12,20,.45); }
}

/* ======================================================================
   Design 0.5 (10.11.2026): freundlicher Look nach dem Mockup
   Salbei-Hintergrund, Petrol-Akzent, Outfit für Überschriften, Inter für Text,
   runde Karten, eine Farbe je Bereich (b0–b5). Bewusst nur hell.
   ====================================================================== */
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #f2f6f4; --surface: #ffffff; --surface-2: #f2f6f4; --text: #1f2a27; --muted: #61706b; --border: #e1e9e5;
  --accent: #2f7d6d; --accent-soft: #e2f1ec; --accent-text: #22604f;
  --marke: #6a4ee0; --marke-bg: #efebfe;
  --inline-code: #edf2ef; --code-bg: #f4f7f5;
  --shadow: 0 1px 2px rgba(31,42,39,.04), 0 8px 24px rgba(31,42,39,.06);
  --radius: 18px; --sidebar: 268px; --toc: 220px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kopf: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --b: #2f7d6d; --b-w: #e2f1ec; --b-t: #22604f;
}
.b0 { --b: #2f9e83; --b-w: #dff4ee; --b-t: #1f6d5a; }
.b1 { --b: #5b7cfa; --b-w: #e8edff; --b-t: #3651c4; }
.b2 { --b: #e59a2f; --b-w: #fdf0dc; --b-t: #95600f; }
.b3 { --b: #d0607e; --b-w: #fbe8ee; --b-t: #9c3653; }
.b4 { --b: #8a63d2; --b-w: #f0eafb; --b-t: #5f3fa6; }
.b5 { --b: #2e93b8; --b-w: #e0f2f8; --b-t: #1d6886; }

body { font-family: var(--font); }
h1, h2, h3, .brand-title, .nav-group-title, .toc-title { font-family: var(--kopf); }
h1 { font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
h2, h3 { font-weight: 600; }

/* Raster mit Abstand: Leiste, Inhalt und Verzeichnis als Karten */
@media (min-width: 861px) {
  .layout { gap: 20px; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
  .sidebar { top: 16px; height: calc(100vh - 32px); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
  .content { padding: 0; }
  .page { max-width: 900px; }
}
.sidebar { padding: 20px 14px 22px; }
.brand { padding: 4px 8px 16px; }
.brand-mark { width: 40px; height: 40px; border-radius: 14px; background: var(--accent); font: 700 19px var(--kopf); color: #fff; }
.brand-title { font-size: 17px; font-weight: 600; }
.brand-sub { font-size: 12.5px; }
.sb-suche { border: 0; border-radius: 999px; background: var(--bg); padding: 0 14px; margin-bottom: 12px; }
.sb-suche:focus-within { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.neu-knopf { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; padding: 10px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14.5px; }
.neu-knopf:hover { text-decoration: none; background: var(--accent-text); }
.neu-knopf .icon { width: 17px; height: 17px; }
.nav a { border-radius: 12px; }
.nav-group-title { font-weight: 600; font-size: 12px; letter-spacing: .06em; padding: 14px 10px 6px; }
.baum a { border-radius: 10px; padding: 6px 10px; }
.baum > ul > li > a, .baum > ul > li > details > summary > a { font-weight: 500; }
.baum ul ul { border-left: 2px solid var(--border); margin-left: 13px; }
.baum a.active { background: var(--accent-soft); color: var(--accent-text); }
.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 4px; background: var(--b); margin-right: 10px; vertical-align: 0; flex: none; }
.sb-fuss { border-top: 1px solid var(--border); }

/* Artikel als Karte mit getöntem Kopf in der Bereichsfarbe */
.karte-artikel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.karte-artikel .band { margin: 0; padding: 28px 36px 24px; border-bottom: 0; background: linear-gradient(180deg, var(--b-w), var(--surface)); }
.karte-artikel h1 { font-size: 34px; line-height: 1.15; }
.artikel-inhalt { padding: 6px 36px 36px; }
.artikel-inhalt > .inhalt { max-width: 74ch; }
.crumb { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.crumb a { color: var(--muted); }
.bereich-chip { display: inline-flex; padding: 3px 11px; border-radius: 999px; background: var(--surface); color: var(--b-t) !important; font-weight: 600; font-size: 12.5px; }
.marke { background: var(--marke-bg); color: var(--marke); font-size: 12px; padding: 2px 10px; }
.aktionen { margin-top: 18px; }
a.knopf, .aktionen a, button { border-radius: 999px; }
a.knopf.zweit { border-color: var(--border); }
.knoepfe.fuss button, .knoepfe a.knopf { border-radius: 999px; }
.inhalt h2 { font-size: 22px; margin: 30px 0 10px; }
.inhalt blockquote { border: 0; border-radius: 14px; background: #fdf0dc; color: var(--text); padding: 12px 16px; }
.inhalt blockquote::before { content: "Merke"; display: block; font: 600 13px var(--kopf); color: #95600f; margin-bottom: 2px; }
.tabelle { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border); }
.inhalt th { background: var(--bg); }
.inhalt img { border-radius: 14px; }
.anhaenge .liste, .liste { border: 0; border-radius: 16px; background: var(--bg); box-shadow: none; }
.liste li { border-bottom-color: var(--border); }
.liste .punkt { margin-right: 8px; }
.datei-typ { border-radius: 12px; background: var(--surface); }
.erfolg { border-radius: 14px; }

/* Inhaltsverzeichnis als Karte */
@media (min-width: 1201px) {
  .toc { padding: 18px 14px; top: 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); max-height: calc(100vh - 32px); }
  .toc ul { border-left: 0; }
}
.toc a { border-radius: 10px; }
.toc a:hover { background: var(--accent-soft); color: var(--accent-text); }

/* Suche, Formulare, Editor im selben Look */
.treffer { border: 0; border-radius: 16px; }
.karte, .editor-form input[type=text], .editor-form select { border-radius: 14px; }
.werkzeuge { border-radius: 16px 16px 0 0; }
.editor, .quelltext { border-radius: 0 0 16px 16px; }
.toc-btn { background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 20px rgba(47,125,109,.35); }

@media (max-width: 860px) {
  .karte-artikel { border-radius: 16px; }
  .karte-artikel .band, .artikel-inhalt { padding-left: 18px; padding-right: 18px; }
  .karte-artikel h1 { font-size: 27px; }
}

/* Textmarker (==Text==): gelb, wie mit dem Stift über die Zeile gezogen */
.inhalt mark, .editor-flaeche mark {
  background: linear-gradient(transparent 12%, #fff07a 12%, #ffe75c 88%, transparent 88%);
  color: inherit; padding: 0 .12em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.werkzeuge .tm { background: linear-gradient(transparent 15%, #fff07a 15%, #ffe75c 85%, transparent 85%); padding: 0 3px; border-radius: 2px; }

/* Freigaben */
.freigabe-neu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px 14px; align-items: end; margin-bottom: 8px; }
.freigabe-neu label, .karte label { margin: 0; }
.freigabe-neu button { margin: 0; }
.freigabe-neu input, .kopierfeld input { display: block; width: 100%; margin-top: 4px; padding: 9px 12px; font: inherit; color: var(--text);
  background: #fff; border: 1px solid #cdd4de; border-radius: 12px; }
.leser { margin: 16px 0; padding: 16px 18px; border-radius: 16px; background: var(--bg); }
.leser-kopf strong { display: block; font-family: var(--kopf); font-size: 17px; }
.leser .zeit { display: block; color: var(--muted); font-size: 13px; }
.freigabe-baum { margin: 12px 0 4px; padding: 10px 14px; background: var(--surface); border-radius: 12px; max-height: 360px; overflow: auto; }
.freigabe-baum ul { list-style: none; margin: 0; padding-left: 20px; }
.freigabe-baum > ul { padding-left: 0; }
.freigabe-baum label { display: flex; align-items: center; gap: 8px; margin: 3px 0; color: var(--text); font-size: 14.5px; cursor: pointer; }
.freigabe-baum input { width: 17px; height: 17px; accent-color: var(--accent); }
.leser .knoepfe button { margin-top: 8px; }
.leser-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 10px; font-size: 14px; }
.leser-aktionen form { margin: 0; }
.leser-aktionen details summary { cursor: pointer; color: var(--muted); }
.leser-aktionen details button { margin-top: 6px; }
.einladung { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #fdf0dc; }
.kopierfeld { display: flex; gap: 8px; margin-top: 8px; }
.kopierfeld input { margin: 0; font-size: 13.5px; }
.kopierfeld button { margin: 0; white-space: nowrap; }
@media (max-width: 760px) { .freigabe-neu { grid-template-columns: 1fr; } }

/* ======================================================================
   Design Noir (12.11.2026, Roman „Jack“): Anthrazit für Hintergrund, Seitenleiste
   und Inhaltsverzeichnis, Lese- und Arbeitsflächen papierhell, Akzent Ochsenblut,
   Überschriften in einer Buchschrift. Feste Gestaltung, folgt nicht dem Systemschema.
   ====================================================================== */
:root {
  --noir: #212429; --noir-2: #2a2e34; --noir-3: #353a41; --noir-rand: #3f454d; --noir-text: #e9e6df; --noir-leise: #a3a8ae;
  --bg: #ece8e0; --surface: #fbf9f5; --surface-2: #f1ede6; --text: #1d1e21; --muted: #6a665f; --border: #e0dad0;
  --accent: #8e2a2b; --accent-soft: #f4e4e1; --accent-text: #7a2224;
  --marke: #7a2224; --marke-bg: #f4e4e1;
  --inline-code: #ece7de; --code-bg: #f1ede6;
  --shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 30px rgba(0,0,0,.28);
  --kopf: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, Georgia, serif;
  --b: #8e2a2b; --b-w: #f1e2df; --b-t: #7a2224;
}
/* Bereichsfarben gedämpft, wie Spielkarten auf altem Papier */
.b0 { --b: #8e2a2b; --b-w: #f1e2df; --b-t: #7a2224; }
.b1 { --b: #a8874f; --b-w: #f1e9da; --b-t: #6f5527; }
.b2 { --b: #5d7088; --b-w: #e4e9ef; --b-t: #3d4f66; }
.b3 { --b: #7b7f86; --b-w: #e8e7e4; --b-t: #4c5057; }
.b4 { --b: #6e3b52; --b-w: #eee1e6; --b-t: #5a2c41; }
.b5 { --b: #5f7466; --b-w: #e3eae4; --b-t: #3f5446; }

body, body.einfach { background: var(--noir); }
h1, h2, h3 { font-weight: 600; letter-spacing: 0; }
.karte-artikel h1 { font-weight: 600; letter-spacing: -.005em; }

/* Dunkle Flächen: Variablen dort umdrehen, damit alle Bausteine darin mitziehen */
.sidebar, .toc, .topbar, .kopf {
  --surface: var(--noir-2); --surface-2: var(--noir-3); --bg: var(--noir); --text: var(--noir-text); --muted: var(--noir-leise);
  --border: var(--noir-rand); --accent-soft: rgba(201,92,88,.2); --accent-text: #f0bdb7;
  background: var(--noir-2); color: var(--noir-text);
}
.sidebar, .toc { box-shadow: 0 0 0 1px var(--noir-rand); }
.brand-mark { background: var(--accent); font: 600 21px var(--kopf); }
.kopf .brand-mark { color: #fff; }
.sb-suche { background: var(--noir); }
.sb-suche:focus-within { background: var(--noir); box-shadow: inset 0 0 0 2px #c95c58; }
.neu-knopf { background: var(--accent); }
.neu-knopf:hover { background: #a63435; }
.baum summary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a8ae' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}
.icon-btn { background: var(--noir-3); color: var(--noir-text); border-color: var(--noir-rand); }
button.link { color: var(--accent-text); }

/* Seiten ohne eigene Karte (Suche, Bearbeiten, Versionen, Papierkorb) bekommen eine Papierfläche */
.page:not(:has(> .karte-artikel)) { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 36px 32px; }
.karte-artikel .band { background: linear-gradient(180deg, var(--b-w), var(--surface)); }
.knoepfe.fuss { background: linear-gradient(to top, var(--surface) 70%, transparent); }
.treffer { background: var(--bg); }

/* Zitate und Hinweise ohne „Merke“, als Randnotiz mit Ochsenblut-Strich */
.inhalt blockquote { border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--surface-2); }
.inhalt blockquote::before { content: none; }
.inhalt hr { border-top-color: var(--border); }
.toc-btn { box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.toc a:hover { background: var(--noir-3); color: var(--noir-text); }

@media (max-width: 860px) {
  .page:not(:has(> .karte-artikel)) { padding: 20px 18px; border-radius: 16px; }
}
@media print {
  body { background: #fff; }
  .page:not(:has(> .karte-artikel)), .karte-artikel { box-shadow: none; }
}
mark { background: var(--accent-soft); color: var(--accent-text); }