/* Eigenständiges Layout mit der dunklen Sidebar, Akzentfarbe und Kartenstruktur des UCNG-Projekts. */
:root {
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --canvas: #f2f3f7;
  --surface: #fff;
  --ink: #15172e;
  --ink-raised: #21243f;
  --ink-text: #b7bad0;
  --ink-muted: #777b98;
  --ink-strong: #fff;
  --text: #171927;
  --muted: #6e7287;
  --line: #e4e6ee;
  --accent: #5848f4;
  --accent-hover: #4a3be0;
  --accent-soft: #ecebfe;
  --online: #16b67a;
  --danger: #d93f4c;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--text); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
input,textarea,button { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.muted { color: var(--muted); }
.brand-icon { background: var(--accent); color: #fff; width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.brand-icon svg { height: 22px; width: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.brand-icon.large { height: 48px; width: 48px; border-radius: 15px; }
.brand-icon.large svg { width: 28px; height: 28px; }

/* Öffentliche Seiten */
.site-header { height: 76px; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header-inner { max-width: 1100px; height: 100%; margin: auto; padding: 0 28px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.site-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 730; font-size: 18px; letter-spacing: -.03em; }
.top-links { display: flex; align-items: center; gap: 26px; font-size: 13.5px; color: var(--muted); }
.top-links a { text-decoration: none; }
.top-links a:hover { color: var(--accent); }
.public-container { width: min(840px, 100%); margin: 72px auto 110px; padding: 0 24px; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.small-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; display: inline-block; }
.public-heading { margin: 14px 0 8px; font-size: clamp(31px, 5vw, 44px); font-weight: 760; line-height: 1.17; letter-spacing: -.045em; }
.public-sub { color: var(--muted); margin: 15px 0 34px; }
.links-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 16px; }
.link-card { min-height: 174px; padding: 25px; display: flex; flex-direction: column; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 4px 16px rgba(21,23,46,.025); position: relative; text-decoration: none; transition: transform .16s,border .16s,box-shadow .16s; }
.link-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 30px rgba(21,23,46,.08); }
.card-symbol { width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); font-size: 20px; margin-bottom: 12px; }
.link-card strong { font-size: 17px; font-weight: 680; }
.card-path { color: var(--muted); font-size: 13px; }
.card-arrow { position: absolute; right: 24px; bottom: 24px; color: var(--accent); font-size: 20px; }
.empty-public { grid-column: 1/-1; padding: 28px; background: var(--surface); border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); }
.empty-public a { color: var(--accent); }
.public-footer { max-width: 1100px; margin: 0 auto; padding: 20px 28px 35px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; color: var(--muted); font-size: 13px; }
.public-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.public-footer a { text-decoration: none; }
.public-footer a:hover { color: var(--accent); }
.article-layout { margin-top: 45px; }
.back-link { display: inline-block; font-size: 13.5px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--accent); }
.article-top { margin-top: 48px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center; }
.label-pill { border-radius: 16px; color: var(--accent); background: var(--accent-soft); padding: 5px 12px; display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 12px; }
.updated { font-size: 12.5px; color: var(--muted); margin: 0; }
.article-layout .public-heading { margin: 18px 0 26px; }
.article-card { background: var(--surface); border: 1px solid var(--line); border-radius: 19px; padding: clamp(24px, 5vw, 46px); box-shadow: 0 2px 12px rgba(21,23,46,.025); }
.article-bottom { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; margin-top: 25px; }
.article-bottom a { color: var(--accent); text-decoration: none; font-size: 14px; }
.article-bottom a:hover { text-decoration: underline; }

/* Rendered Markdown, restricted to known safe HTML */
.prose { font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1,.prose h2,.prose h3 { line-height: 1.35; letter-spacing: -.025em; }
.prose h1 { font-size: 26px; margin: 0 0 20px; }
.prose h2 { font-size: 21px; margin: 34px 0 13px; }
.prose h3 { font-size: 17px; margin: 28px 0 12px; }
.prose p { margin: 0 0 19px; }
.prose ul,.prose ol { padding-left: 25px; margin: 12px 0 20px; }
.prose li { padding-left: 4px; margin: 5px 0; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose blockquote { border-left: 3px solid var(--accent); background: var(--canvas); color: var(--muted); padding: 12px 18px; border-radius: 0 10px 10px 0; margin: 20px 0; }
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 25px 0; }
.prose code { border-radius: 4px; background: var(--canvas); padding: 2px 5px; font-size: .92em; }
.prose pre { background: var(--ink); color: #f0f1f8; padding: 16px 19px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.prose pre code { color: inherit; background: none; padding: 0; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 26px; }
.login-card { width: min(430px,100%); display: grid; gap: 12px; padding: 36px; border-radius: 23px; background: var(--surface); box-shadow: 0 2px 4px rgba(21,23,46,.04), 0 15px 40px rgba(21,23,46,.09); }
.login-card h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.035em; margin: 11px 0 0; }
.login-card > p.muted { margin: 0 0 18px; }
.login-card .field { margin-top: 1px; }
.center { text-align: center; margin-top: 10px; }

/* Administration: genau ein Scrollkontext für den Seiteninhalt.
   Die Seite selbst scrollt; die Navigation bleibt sticky. */
.admin-body { min-height: 100vh; height: auto; }
.admin-shell { display: flex; min-height: 100vh; height: auto; overflow: visible; align-items: stretch; }
.sidebar { background: var(--ink); color: var(--ink-text); width: 258px; padding: 20px 14px 15px; display: flex; flex-direction: column; flex: none; position: sticky; top: 0; height: 100vh; height: 100dvh; }
.side-brand { display: flex; gap: 11px; align-items: center; margin: 0 8px 35px; color: var(--ink-strong); font-weight: 720; font-size: 19px; letter-spacing: -.03em; text-decoration: none; }
.side-label { margin: 0 11px 10px; font-size: 10.5px; font-weight: 730; letter-spacing: .1em; color: var(--ink-muted); }
.side-link { padding: 10px 13px; font-size: 14px; border-radius: 10px; display: flex; align-items: center; gap: 11px; text-decoration: none; }
.side-link.selected { color: var(--ink-strong); background: var(--accent); font-weight: 600; }
.side-link-icon { font-size: 18px; font-weight: 500; }
.sidebar-pages { min-height: 0; flex: 1; margin-top: 34px; overflow-y: auto; scrollbar-width: thin; }
.side-count { float: right; background: var(--ink-raised); border-radius: 20px; font-size: 10px; padding: 0 7px; line-height: 17px; }
.page-link,.add-page { text-decoration: none; display: flex; align-items: center; gap: 8px; border-radius: 9px; padding: 10px 12px; margin: 1px 0; font-size: 13.5px; color: var(--ink-text); }
.page-link:hover,.add-page:hover,.page-link.active,.add-page.active { background: var(--ink-raised); color: var(--ink-strong); }
.page-link.active { font-weight: 650; }
.side-doc { color: var(--ink-muted); font-weight: 700; }
.page-link-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pub-dot,.draft-dot { width: 7px; height: 7px; border-radius: 100%; background: var(--online); flex: none; }
.draft-dot { background: var(--ink-muted); }
.add-page { color: #b0a8ff; border: 1px dashed var(--ink-raised); margin-top: 12px; font-weight: 600; }
.add-page span { font-size: 19px; line-height: 1; }
.sidebar-foot { border-top: 1px solid var(--ink-raised); padding: 17px 8px 0; display: grid; gap: 9px; }
.sidebar-foot a,.sidebar-foot button { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: none; padding: 5px; font-size: 13.5px; text-align: left; text-decoration: none; color: var(--ink-text); }
.sidebar-foot a:hover,.sidebar-foot button:hover { color: var(--ink-strong); }
.admin-main { flex: 1; overflow: visible; min-width: 0; padding: 0 clamp(20px, 3.8vw, 56px) 50px; }
.admin-header { margin: 0 auto; max-width: 1250px; padding: 38px 0 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.crumb { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.crumb span { color: #a5a9b7; padding: 0 8px; }
.admin-header h1 { margin: 0; font-size: clamp(24px,3vw,29px); line-height: 1.2; letter-spacing: -.035em; }
.admin-desc { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
#pageForm { display: grid; gap: 19px; max-width: 1250px; margin: auto; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 17px; padding: 25px 27px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 15px; margin-bottom: 23px; }
.panel-title > span { font-size: 12px; font-weight: 600; color: #a3a7b7; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 7px; font-size: 13px; font-weight: 650; }
.field small { font-weight: 500; color: var(--muted); }
.field > input,.url-input { width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--canvas); padding: 0 13px; outline: none; font-size: 14px; font-weight: 450; }
.field > input:focus,.url-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.url-input { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.url-input input { width: 100%; min-width: 0; background: none; border: 0; outline: 0; padding: 0; }
.url-input input[readonly] { cursor: default; color: var(--muted); }
.helper { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.editor-panel { padding: 0; overflow: hidden; }
.editor-panel > .panel-title { padding: 23px 27px 0; }
.editor-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px 20px; }
.toolbar-buttons { display: flex; gap: 2px; }
.toolbar-buttons button { border: none; background: transparent; border-radius: 7px; height: 32px; min-width: 33px; padding: 0 8px; font-size: 14px; }
.toolbar-buttons button:hover { color: var(--accent); background: var(--accent-soft); }
.editor-format { font-size: 10px; letter-spacing: .06em; font-weight: 700; color: #999dae; }
/* Editor und Vorschau nehmen natürliche Höhe an: keine inneren Scroller.
   Das Grid hält trotzdem beide Spalten auf gleicher visueller Höhe. */
.edit-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: clamp(430px, 60vh, 720px); }
.edit-col,.preview-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.edit-col { border-right: 1px solid var(--line); }
.edit-col > label,.preview-label { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 14px 20px; color: var(--muted); font-size: 10.5px; letter-spacing: .085em; font-weight: 730; }
#previewState { letter-spacing: 0; font-weight: 500; text-transform: none; }
#body { display: block; width: 100%; height: auto; min-height: clamp(380px, 54vh, 672px); flex: 0 0 auto; resize: none; overflow: hidden; background: var(--surface); border: 0; outline: 0; padding: 4px 20px 22px; font: 13.5px/1.9 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; tab-size: 2; }
#body::placeholder { color: #a3a7b7; }
.preview-body { flex: 1 0 auto; height: auto; min-height: 0; padding: 4px 23px 20px; overflow: visible; font-size: 14px; }
.preview-body h1 { font-size: 22px; }
.preview-body h2 { font-size: 19px; }
.padded { border-top: 1px solid var(--line); margin: 0; padding: 14px 20px; }
.publish-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.publish-panel .panel-title { margin-bottom: 0; }
.publish-panel .helper { margin-top: 4px; }
.publish-toggle { display: flex; align-items: center; gap: 11px; white-space: nowrap; cursor: pointer; font-size: 13.5px; font-weight: 650; }
.publish-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 42px; height: 26px; display: inline-flex; align-items: center; padding: 3px; border-radius: 50px; background: #d5d8e2; transition: background .16s; }
.switch-track:before { content: ''; display: block; background: white; box-shadow: 0 1px 4px #0002; border-radius: 50%; width: 20px; height: 20px; transition: transform .16s; }
.publish-toggle input:checked + .switch-track { background: var(--accent); }
.publish-toggle input:checked + .switch-track:before { transform: translateX(16px); }
.publish-toggle input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.action-right { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.unsaved { font-size: 12.5px; color: #9c6500; }
.btn { min-height: 43px; display: inline-flex; gap: 10px; align-items: center; justify-content: center; white-space: nowrap; padding: 0 17px; border-radius: 10px; border: 1px solid var(--line); font-weight: 630; font-size: 13.5px; background: var(--surface); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { color: var(--text); }
.btn.ghost:not(.disabled):hover { border-color: var(--accent); color: var(--accent); }
.btn.disabled { color: #a1a4b2; cursor: default; }
.btn.danger-outline { color: var(--danger); border-color: #f0c6cc; }
.btn.danger-outline:hover { background: #fff0f1; }
.btn.full { width: 100%; margin-top: 12px; }
.alert { padding: 12px 16px; margin: 0 auto 18px; max-width: 1250px; border-radius: 10px; font-size: 13.5px; }
.alert.success { background: #ddf7ec; color: #096745; border: 1px solid #b4e5ce; }
.alert.danger { background: #fff1f2; color: #ae2735; border: 1px solid #f2c8cd; }
.editor-footer { color: var(--muted); font-size: 12px; text-align: center; margin: 22px 0 0; }
#deleteForm { display: none; }
@media (max-width: 1000px) { .sidebar { width: 228px; }.admin-main { padding: 0 24px 40px; }.edit-split { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; min-height: 0; }.edit-col,.preview-col { height: auto; min-height: clamp(300px, 48vh, 540px); }.edit-col { border-right: none; border-bottom: 1px solid var(--line); } }
@media (max-width: 670px) { .admin-body { height: auto; }.admin-shell { display: block; height: auto; overflow: visible; }.sidebar { width: 100%; padding: 12px 17px; display: block; position: static; height: auto; }.side-brand { margin: 0 0 15px; }.sidebar-section { display: none; }.sidebar-pages { margin: 0; }.sidebar-pages .side-label { display: none; }.sidebar-pages { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 8px; }.page-link,.add-page { flex: none; margin: 0; padding: 7px 11px; }.page-link-name { max-width: 160px; }.add-page { margin: 0; }.sidebar-foot { display: flex; gap: 14px; border-top: 1px solid var(--ink-raised); padding: 7px 0 0; margin-top: 7px; }.sidebar-foot form { min-width: 0; }.sidebar-foot a,.sidebar-foot button { white-space: nowrap; font-size: 12px; padding: 3px; }.admin-main { overflow: visible; padding: 0 15px 35px; }.admin-header { padding: 23px 0 22px; align-items: flex-start; }.admin-header .view-link { font-size: 11px; padding: 0 9px; min-height: 36px; }.panel { padding: 20px; }.field-row { grid-template-columns: 1fr; gap: 16px; }.editor-panel { padding: 0; }.editor-toolbar { padding: 7px 12px; }.publish-panel { flex-wrap: wrap; }.editor-actions { flex-wrap: wrap; }.action-right { flex: 1; }.unsaved { display: none; }.public-container { margin-top: 42px; }.article-layout { margin-top: 30px; }.site-header-inner { padding: 0 17px; }.top-links { gap: 14px; }.public-footer { padding: 20px 18px; }.login-card { padding: 28px 24px; } }
@media (prefers-color-scheme: dark) {
  :root { --canvas:#11131d; --surface:#1a1d2b; --text:#eeeff8; --muted:#a1a6ba; --line:#35394e; --accent-soft:#282449; color-scheme:dark; }
  .field > input,.url-input { color: var(--text); }
  .btn.primary { color: #fff; }
  .alert.success { background: #103a2c; color: #8bdbb9; border-color: #245543; }
  .alert.danger { background: #40232b; color: #ffabb4; border-color: #7d3942; }
  .unsaved { color: #f2c66c; }
  .btn.danger-outline:hover { background: #40232b; }
  #body::placeholder { color: #868ba2; }
  .switch-track { background: #54586a; }
}

/* Hosted-Content-CMS: Website-Einstellungen und Sichtbarkeitsregeln */
.public-intro { color: var(--muted); margin: 17px 0 34px; }
.public-intro a { color: var(--accent); }
.placement-row { margin-top: 21px; padding-top: 19px; border-top: 1px solid var(--line); }
.placement-row > .field { max-width: 580px; }
.field select,.field textarea { width: 100%; background: var(--canvas); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; outline: none; font-size: 14px; font-weight: 450; }
.field select { min-height: 44px; }
.field select:focus,.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field textarea { resize: vertical; min-height: 125px; }
.settings-form { display: grid; gap: 20px; max-width: 1250px; margin: auto; }
.settings-form .panel { display: grid; gap: 19px; }
.settings-form .panel-title { margin-bottom: 3px; }
.settings-form .field small { display: block; }
.settings-form .field.stacked { margin-top: 7px; }
.settings-form .helper { margin: -5px 0 0; }
@media (max-width: 670px) {
  .public-intro { margin-bottom: 27px; }
  .settings-form .panel { padding: 20px; }
}

/* Die Admin-Navigation bleibt auch auf schmalen Bildschirmen erreichbar. */
@media (max-width: 670px) {
  .sidebar-section { display: flex; gap: 6px; margin-bottom: 12px; }
  .sidebar-section .side-label { display: none; }
  .sidebar-section .side-link { font-size: 12px; padding: 9px 11px; }
  .sidebar-section .side-link-icon { font-size: 16px; }
}

/* Interne Wiki-Verweise: Such-/Einfügefunktion im Editor und sichere Ausgabe. */
.prose a.wiki-link { color: var(--accent); font-weight: 590; text-decoration: underline; text-decoration-color: #9a91fb; text-underline-offset: 3px; }
.prose .wiki-missing { border-bottom: 1px dashed var(--danger); color: var(--muted); cursor: help; }
.wiki-picker { padding: 16px 20px 17px; background: var(--surface); border-bottom: 1px solid var(--line); }
.wiki-picker-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.wiki-picker-top strong { display: block; font-size: 13.5px; }
.wiki-picker-top .helper { margin: 2px 0 0; }
.wiki-syntax { white-space: nowrap; background: var(--accent-soft); color: var(--accent); font: 12px/1.4 ui-monospace, monospace; border-radius: 7px; padding: 5px 9px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#wikiSearch { display: block; width: 100%; min-height: 41px; border: 1px solid var(--line); background: var(--canvas); border-radius: 9px; padding: 9px 12px; font-size: 13px; }
#wikiSearch:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.wiki-results { display: grid; grid-template-columns: repeat(auto-fit,minmax(195px,1fr)); gap: 7px; margin-top: 10px; max-height: 182px; overflow-y: auto; }
.wiki-choice { border: 1px solid var(--line); border-radius: 9px; padding: 10px; text-align: left; background: var(--surface); min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wiki-choice:hover,.wiki-choice:focus-visible { background: var(--accent-soft); border-color: var(--accent); }
.wiki-choice-name { font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.wiki-choice-name small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-status { font-size: 10px; white-space: nowrap; border-radius: 30px; padding: 3px 6px; flex: none; }
.wiki-status.published { color: #157653; background: #d8f4e8; }
.wiki-status.draft { color: var(--muted); background: var(--canvas); }
.wiki-tip { color: var(--muted); margin: 10px 0 0; font-size: 12px; line-height: 1.7; }
.wiki-tip code,.padded code { background: var(--canvas); border-radius: 5px; padding: 2px 4px; }
.wiki-diagnostics { font-size: 12px; padding: 10px 20px; border-top: 1px solid var(--line); color: var(--muted); }
.wiki-diagnostics.has-warnings { color: #9d5500; background: #fff8e6; }
.wiki-diagnostics ul { margin: 3px 0 0 15px; padding: 0; }
@media (max-width: 670px) { .wiki-picker { padding: 14px; }.wiki-picker-top { display: block; }.wiki-syntax { display: inline-block; margin-top: 8px; }.wiki-results { grid-template-columns: 1fr; max-height: 210px; } }
@media (prefers-color-scheme: dark) { .wiki-status.published { background: #173a2d; color: #8de2b9; }.wiki-diagnostics.has-warnings { background: #392f20; color: #ffd49b; } }

.wiki-count { margin: 6px 0 0; color: var(--muted); font-size: 11.5px; }

/* Markdown-Bilder und zugängliche Lightbox */
.prose .cms-image { display: block; max-width: 100%; margin: 20px 0; }
.prose .cms-image img { display: block; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); cursor: zoom-in; }
.prose .cms-caption { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.image-lightbox { border: 0; padding: 50px 20px 18px; max-width: min(98vw, 1350px); max-height: 95vh; border-radius: 15px; background: var(--surface); color: var(--text); position: fixed; }
.image-lightbox::backdrop { background: rgba(6,8,20,.86); }
.image-lightbox img { display: block; max-width: min(92vw, 1280px); max-height: 74vh; object-fit: contain; }
.image-lightbox p { text-align: center; font-size: 13px; margin: 12px 0 0; }
.lightbox-close { position: absolute; top: 8px; right: 12px; border: 0; background: var(--canvas); color: var(--text); border-radius: 7px; padding: 5px 10px; }
/* Medienverwaltung und Medienauswahl im Editor */
.media-add-grid { max-width: 1250px; margin: 0 auto 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.media-add-panel { padding: 22px; min-width: 0; }
.media-add-form { display: grid; gap: 15px; }
.media-add-form .helper { margin: 0; }
.media-add-form input[type=file] { width: 100%; font-size: 13px; padding: 12px; border-radius: 9px; border: 1px dashed var(--line); background: var(--canvas); }
.media-add-form code { word-break: break-word; }
.media-library-panel { max-width: 1250px; margin: 0 auto; padding: 22px; }
.media-list-top { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.media-list-top .field { flex: 1; max-width: 480px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 17px; margin-top: 19px; }
.media-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; min-width: 0; background: var(--surface); }
.media-card-image { display: grid; place-items: center; background: var(--canvas); height: 180px; }
.media-card-image img { max-height: 100%; max-width: 100%; object-fit: contain; cursor: zoom-in; }
.media-card-detail { display: grid; gap: 7px; padding: 13px; }
.media-card-detail strong { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.media-card-detail small { color: var(--muted); }
.media-card-detail code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.media-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.media-card-actions .btn { min-height: 35px; padding: 0 10px; font-size: 11px; }
.media-picker { padding: 14px 20px 17px; border-bottom: 1px solid var(--line); }
.media-library-link { color: var(--accent); white-space: nowrap; font-size: 12px; }
.media-picker-grid { display: flex; align-items: stretch; gap: 10px; max-width: 100%; overflow-x: auto; padding: 5px 1px 8px; }
.media-picker-item { flex: 0 0 115px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); padding: 0; text-align: left; }
.media-picker-item:hover { border-color: var(--accent); }
.media-picker-item img { width: 100%; height: 70px; object-fit: contain; background: var(--canvas); }
.media-picker-item span { padding: 5px 8px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
@media (max-width: 850px) { .media-add-grid { grid-template-columns: 1fr; } }
@media (max-width: 670px) { .media-library-panel, .media-add-panel { padding: 18px; } .media-list-top { display: block; } .media-picker { padding: 14px; } }

.media-rename-form { display: flex; gap: 5px; min-width: 0; }
.media-rename-form input { border: 1px solid var(--line); background: var(--canvas); border-radius: 7px; min-width: 0; width: 100%; padding: 6px 8px; font-size: 11px; }
.media-rename-form .btn { padding: 0 7px; min-height: 32px; font-size: 10px; }