:root {
  --bg: #f8f9fa; --page: #ffffff; --text: #202122; --dim: #54595d; --link: #3366cc; --visited: #795cb2;
  --new: #d73333; --border: #a2a9b1; --soft: #eaecf0; --box: #f8f9fa;
  --note-bg: #eaf3ff; --note-bd: #3366cc; --warn-bg: #fef6e7; --warn-bd: #fc3; --info-bg: #eaf3ff;
  --serif: 'Linux Libertine', 'Georgia', 'Times', serif;
  --sans: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101418; --page: #16191d; --text: #eaecf0; --dim: #a2a9b1; --link: #88a3e8; --visited: #a799cd;
    --new: #fd7865; --border: #54595d; --soft: #27292d; --box: #202122;
    --note-bg: #1b2433; --note-bd: #6485d1; --warn-bg: #2b2414; --warn-bd: #ab7f2a; --info-bg: #1b2433;
  }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--sans); font-size: 15px; line-height: 1.6; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--visited); }
a.new, a.new:visited { color: var(--new); cursor: help; }

.top { display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: var(--page); border-bottom: 1px solid var(--border); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text) !important; text-decoration: none !important; }
.logo-img { width: 44px; height: 44px; flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-img { filter: invert(1); } }
.logo strong { display: block; font-family: var(--serif); font-weight: normal; font-size: 20px; line-height: 1.1; }
.logo small { display: block; color: var(--dim); font-size: 12px; }
.search { position: relative; flex: 1; max-width: 480px; }
.search input { width: 100%; padding: 7px 10px; font: inherit; color: var(--text); background: var(--page); border: 1px solid var(--border); border-radius: 2px; }
.search input:focus { outline: 2px solid var(--link); outline-offset: -1px; }
#results { display: none; position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin: 2px 0 0; padding: 0; list-style: none; background: var(--page); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
#results a { display: block; padding: 6px 10px; color: var(--text); text-decoration: none; }
#results a:hover { background: var(--soft); }
#results span { display: block; color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wrap { display: flex; max-width: 1400px; margin: 0 auto; }
.side { width: 176px; flex: none; padding: 20px 12px 20px 24px; font-size: 14px; }
.side ul { list-style: none; margin: 0 0 16px; padding: 0; }
.side li { padding: 3px 0; }
.side-h { color: var(--dim); font-size: 12px; border-bottom: 1px solid var(--soft); margin-bottom: 4px; }
main { flex: 1; min-width: 0; background: var(--page); border: 1px solid var(--soft); border-top: 0; padding: 20px 32px 24px; }

h1, h2 { font-family: var(--serif); font-weight: normal; border-bottom: 1px solid var(--border); line-height: 1.3; }
.firstHeading { font-size: 1.9em; margin: 0 0 2px; }
.subtitle { color: var(--dim); font-size: 13px; margin-bottom: 16px; }
.content h2 { font-size: 1.5em; margin: 1.1em 0 .4em; }
.content h3 { font-size: 1.15em; margin: 1em 0 .3em; }
.content p { margin: .5em 0; }
.content ul, .content ol { padding-left: 1.6em; margin: .3em 0 .6em; }
.content li { margin: .15em 0; }
.content blockquote { margin: .6em 0; padding: .2em 1em; border-left: 3px solid var(--border); color: var(--dim); }
.content img { max-width: 100%; }
code { font-family: Consolas, 'Courier New', monospace; font-size: .9em; background: var(--box); border: 1px solid var(--soft); padding: 1px 4px; border-radius: 2px; }
pre { background: var(--box); border: 1px solid var(--soft); padding: 10px 14px; overflow-x: auto; }
pre code { border: 0; padding: 0; background: none; }

.lead { font-size: 1.05em; }
.lead::first-letter { font-weight: normal; }

.infobox { float: right; clear: right; width: 290px; margin: 0 0 16px 20px; font-size: 13px; line-height: 1.45; background: var(--box); border: 1px solid var(--border); border-collapse: collapse; }
.infobox caption { font-weight: bold; font-size: 1.15em; padding: 6px; background: var(--soft); border: 1px solid var(--border); border-bottom: 0; }
.infobox th, .infobox td { text-align: left; vertical-align: top; padding: 4px 8px; border-top: 1px solid var(--soft); }
.infobox th { width: 36%; }

.toc { display: inline-block; min-width: 240px; max-width: 100%; margin: 12px 0; padding: 8px 14px 10px; font-size: 14px; background: var(--box); border: 1px solid var(--border); }
.toc-title { font-weight: bold; text-align: center; margin-bottom: 4px; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc .toc-3 { padding-left: 1.6em; }
.tocnum { color: var(--text); padding-right: 4px; }

.wikitable { border-collapse: collapse; margin: 1em 0; background: var(--box); font-size: 14px; display: block; overflow-x: auto; max-width: 100%; }
.wikitable th, .wikitable td { border: 1px solid var(--border); padding: 5px 9px; vertical-align: top; }
.wikitable th { background: var(--soft); text-align: center; }

.callout { margin: 1em 0; padding: 8px 14px; background: var(--note-bg); border-left: 4px solid var(--note-bd); }
.callout-warning { background: var(--warn-bg); border-left-color: var(--warn-bd); }
.callout-info { background: var(--info-bg); }
.callout-title { font-weight: bold; margin-bottom: 2px; }
.callout p:first-of-type { margin-top: 0; }
.callout > *:last-child { margin-bottom: 0; }

.welcome { margin: 0 0 16px; padding: 12px 16px; text-align: center; background: var(--box); border: 1px solid var(--soft); }
.welcome-h { font-family: var(--serif); font-size: 1.6em; }

.backlinks { clear: both; margin-top: 2em; }
.backlinks h2 { font-size: 1.2em; }
.backlinks ul, .cols { columns: 3 200px; padding-left: 1.4em; }
.catlinks { clear: both; margin-top: 1.5em; padding: 6px 10px; font-size: 13px; background: var(--box); border: 1px solid var(--border); }
.listing .dim, .dim { color: var(--dim); }
footer { clear: both; margin-top: 2em; padding-top: 10px; font-size: 12px; color: var(--dim); border-top: 1px solid var(--soft); }

@media (max-width: 800px) {
  .top { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .search { max-width: none; flex-basis: 100%; order: 3; }
  .wrap { display: block; }
  .side { width: auto; padding: 8px 16px; }
  .side ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; }
  .side-h { display: none; }
  main { padding: 16px; border-left: 0; border-right: 0; }
  .infobox { float: none; width: 100%; margin: 0 0 16px; }
}

/* ---------- Layout-Umschalter ---------- */
.layout-switch { margin-left: auto; padding: 5px 8px; font: inherit; font-size: 13px; color: var(--text); background: var(--page); border: 1px solid var(--border); border-radius: 2px; }

/* ---------- Layout „Modern“ (data-layout="docs") ---------- */
html[data-layout="docs"] {
  --bg: #ffffff; --page: #ffffff; --text: #1f2328; --dim: #656d76; --link: #5b4fe0; --visited: #5b4fe0;
  --new: #cf222e; --border: #d0d7de; --soft: #eef0f3; --box: #f6f8fa; --side: #f7f7f9;
  --note-bg: #f1efff; --note-bd: #7c6ff0; --warn-bg: #fff8e5; --warn-bd: #d4a72c; --info-bg: #eef6ff;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  html[data-layout="docs"]:not([data-theme="light"]) {
    --bg: #0f1115; --page: #0f1115; --text: #e6e8eb; --dim: #9aa3ad; --link: #a59bff; --visited: #a59bff;
    --new: #ff7b72; --border: #2d333b; --soft: #1d2127; --box: #161a20; --side: #13161b;
    --note-bg: #1e1b3a; --note-bd: #7c6ff0; --warn-bg: #2a2313; --warn-bd: #b8892a; --info-bg: #15202e;
  }
}
html[data-layout="docs"] body { font-size: 16px; line-height: 1.7; }
html[data-layout="docs"] .top { position: sticky; top: 0; z-index: 20; height: 60px; padding: 0 24px; border-bottom-color: var(--soft); }
html[data-layout="docs"] .logo-img { width: 34px; height: 34px; }
html[data-layout="docs"] .logo strong { font-family: var(--sans); font-weight: 600; font-size: 17px; }
html[data-layout="docs"] .search input, html[data-layout="docs"] .layout-switch { border-radius: 8px; background: var(--box); border-color: var(--soft); }
html[data-layout="docs"] #results { border-radius: 8px; overflow: hidden; }

html[data-layout="docs"] .wrap { max-width: none; }
html[data-layout="docs"] .side { position: sticky; top: 60px; align-self: flex-start; width: 250px; height: calc(100vh - 60px); overflow-y: auto; padding: 24px 16px 24px 24px; background: var(--side); border-right: 1px solid var(--soft); }
html[data-layout="docs"] .side li { padding: 0; }
html[data-layout="docs"] .side a { display: block; padding: 4px 10px; border-radius: 6px; color: var(--text); }
html[data-layout="docs"] .side a:hover { background: var(--soft); text-decoration: none; }
html[data-layout="docs"] .side-h { margin: 8px 10px 6px; border: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
html[data-layout="docs"] main { border: 0; padding: 40px 48px 32px; }
html[data-layout="docs"] main > * { max-width: 760px; }

html[data-layout="docs"] h1, html[data-layout="docs"] h2 { font-family: var(--sans); border-bottom: 0; }
html[data-layout="docs"] .firstHeading { font-size: 2.2em; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
html[data-layout="docs"] .subtitle { display: none; }
html[data-layout="docs"] .lead { font-size: 1.15em; color: var(--dim); margin-bottom: 1.5em; }
html[data-layout="docs"] .content h2 { font-size: 1.45em; font-weight: 650; margin: 1.8em 0 .5em; padding-top: .8em; border-top: 1px solid var(--soft); }
html[data-layout="docs"] .content h3 { font-size: 1.15em; font-weight: 600; }
html[data-layout="docs"] .content blockquote { border-left-color: var(--link); }
html[data-layout="docs"] code { border: 0; border-radius: 4px; background: var(--soft); }
html[data-layout="docs"] pre { border-radius: var(--radius); }

html[data-layout="docs"] .infobox { width: 270px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--soft); border-radius: var(--radius); overflow: hidden; }
html[data-layout="docs"] .infobox caption { text-align: left; padding: 10px 12px 4px; background: none; border: 0; }
html[data-layout="docs"] .infobox th { color: var(--dim); font-weight: 500; }
html[data-layout="docs"] .wikitable { border-radius: var(--radius); border: 1px solid var(--soft); border-collapse: separate; border-spacing: 0; }
html[data-layout="docs"] .wikitable th, html[data-layout="docs"] .wikitable td { border: 0; border-bottom: 1px solid var(--soft); text-align: left; }
html[data-layout="docs"] .callout { border-radius: var(--radius); border-left-width: 3px; padding: 12px 16px; }
html[data-layout="docs"] .welcome { text-align: left; padding: 20px 24px; border-radius: var(--radius); }
html[data-layout="docs"] .welcome-h { font-family: var(--sans); font-weight: 700; }
html[data-layout="docs"] .catlinks { border-radius: var(--radius); border-color: var(--soft); }

html[data-layout="docs"] .toc { display: block; min-width: 0; padding: 12px 16px; border: 1px solid var(--soft); border-radius: var(--radius); }
html[data-layout="docs"] .toc-title { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
html[data-layout="docs"] .toc a { color: var(--dim); }
html[data-layout="docs"] .toc a:hover { color: var(--link); text-decoration: none; }
html[data-layout="docs"] .tocnum { display: none; }
@media (min-width: 1200px) {
  html[data-layout="docs"] main:has(.toc) { padding-right: 290px; }
  html[data-layout="docs"] .toc { position: fixed; top: 100px; right: 32px; width: 230px; max-height: calc(100vh - 130px); overflow-y: auto; margin: 0; background: none; border: 0; border-left: 1px solid var(--soft); border-radius: 0; font-size: 13px; }
}
@media (max-width: 800px) {
  html[data-layout="docs"] .top { position: static; height: auto; padding: 10px 16px; }
  html[data-layout="docs"] .side { position: static; width: auto; height: auto; padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--soft); }
  html[data-layout="docs"] .side a { padding: 2px 0; }
  html[data-layout="docs"] main { padding: 20px 16px; }
  html[data-layout="docs"] .infobox { width: 100%; }
}