/*
 * Voyane Docs – Theme (Nextra-Optik, ein File, keine Webfonts, kein JS noetig).
 * Aufbau: 1 Tokens · 2 Basis · 3 Seitenstruktur · 4 Inhalte (.docs-content) · 5 Bausteine · 6 Templates · 7 Responsiv · 8 Print/Motion
 * Marken-Farbe: nur --primary-h / --primary-s aendern.
 * Inhalte werden ausschliesslich unter .docs-content gestylt, damit <style data-page> sie leicht ueberschreiben kann.
 */

/* ============================== 1. Tokens ============================== */
:root {
  --primary-h: 248;
  --primary-s: 74%;

  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius: 6px;
  --navbar-h: 64px;

  /* hell */
  --bg: #fafafa;
  --surface: #ffffff;
  --text: #314158;            /* slate-700 */
  --heading: #0f172b;         /* slate-900 */
  --fg-strong: #000;
  --muted: #4a5565;           /* gray-600 */
  --muted-soft: #6a7282;      /* gray-500, nur Deko/grosse Schrift */
  --border: #e5e7eb;          /* gray-200 */
  --border-strong: #d1d5dc;   /* gray-300 */
  --hover-bg: #f3f4f6;        /* gray-100 */
  --hover-text: #101828;      /* gray-900 */
  --navbar-bg: rgb(250 250 250 / .7);

  --primary: hsl(var(--primary-h) var(--primary-s) 45%);
  --primary-text: hsl(var(--primary-h) var(--primary-s) 45%);
  --primary-soft: hsl(var(--primary-h) var(--primary-s) 45% / .1);
  --on-primary: #fff;
  --sb-active-bg: hsl(var(--primary-h) var(--primary-s) 94%);
  --sb-active-text: hsl(var(--primary-h) var(--primary-s) 32%);
  --sb-hover-bg: #f3f4f6;
  --focus: hsl(var(--primary-h) var(--primary-s) 45%);

  --sb-text: #4a5565;
  --sb-heading: #101828;
  --toc-text: #4a5565;
  --toc-hover: #101828;
  --tab-text: #4a5565;
  --tab-hover: #000;
  --tab-active: #000;

  --input-bg: rgb(0 0 0 / .05);
  --placeholder: #4a5565;
  --kbd-bg: #fafafa;
  --nav-icon: #737373;        /* Navbar-Icons: Theme, GitHub */
  --nav-icon-hover: #171717;
  --nav-hover-bg: #f5f5f5;

  --code-bg: rgb(0 0 0 / .03);
  --code-border: rgb(0 0 0 / .04);
  --pre-bg: #fff;
  --pre-fg: #24292e;          /* Shiki github-light: Standardfarbe im Codeblock */
  --pre-ring: #d1d5dc;
  --quote-text: #364153;      /* gray-700 */
  --quote-border: #d1d5dc;
  --table-border: #d1d5dc;
  --table-stripe: #f3f4f6;
  --hr: rgb(229 229 229 / .7);
  --mark-bg: rgb(250 204 21 / .4);
  --scroll-thumb: rgb(0 0 0 / .2);

  --ok: #166534;      --ok-soft: rgb(22 163 74 / .1);
  --warn: #92400e;    --warn-soft: rgb(217 119 6 / .12);
  --danger: #b91c1c;  --danger-soft: rgb(220 38 38 / .1);
  --danger-solid: #dc2626;

  /* Callout-Varianten: RGB (fuer Rahmen/Flaeche/Icon) + Titelfarbe */
  --callout-bg-a: .08; --callout-bd-a: .3;
  --co-info: 37 99 235;     --co-info-t: #1d4ed8;
  --co-tip: 13 148 136;     --co-tip-t: #0f766e;
  --co-success: 22 163 74;  --co-success-t: #166534;
  --co-warning: 217 119 6;  --co-warning-t: #92400e;
  --co-danger: 220 38 38;   --co-danger-t: #b91c1c;
  --co-quote: 107 114 128;  --co-quote-t: #374151;
  --co-example: 124 58 237; --co-example-t: #6d28d9;

  /* Syntax (GitHub light) */
  --tok-kw: #d73a49; --tok-str: #032f62; --tok-fn: #6f42c1; --tok-const: #005cc5; --tok-com: #6a737d;
  --tok-var: #bd4f00; --tok-tag: #22863a; --tok-attr: #6f42c1;

  /* Icons (Masken, Lucide-aehnlich, Strichstaerke 2) */
  --i-chevron-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  --i-chevron-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
  --i-chevron-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --i-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M10 7h7v7'/%3E%3C/svg%3E");
  --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --i-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3C/svg%3E");
  --i-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --i-octagon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86z'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
  --i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.25-.76-2.02-2-2H4c-1.25 0-2 .75-2 1.97V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .01-1 1.03V21z'/%3E%3Cpath d='M15 21c3 0 7-1 7-8V5c0-1.25-.76-2.02-2-2h-4c-1.25 0-2 .75-2 1.97V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z'/%3E%3C/svg%3E");
  --i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* dunkel: Attribut ... */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111;
  --surface: #171717;
  --text: #e2e8f0;            /* slate-200 */
  --heading: #f1f5f9;         /* slate-100 */
  --fg-strong: #fff;
  --muted: #99a1af;           /* gray-400 */
  --muted-soft: #99a1af;
  --border: #262626;          /* neutral-800 */
  --border-strong: #4a5565;   /* gray-600 */
  --hover-bg: rgb(255 255 255 / .06);
  --hover-text: #f9fafb;
  --navbar-bg: rgb(17 17 17 / .7);

  --primary: hsl(var(--primary-h) var(--primary-s) 55%);
  --primary-text: hsl(var(--primary-h) var(--primary-s) 74%);
  --primary-soft: hsl(var(--primary-h) var(--primary-s) 76% / .1);
  --sb-active-bg: hsl(var(--primary-h) var(--primary-s) 76% / .1);
  --sb-active-text: hsl(var(--primary-h) var(--primary-s) 74%);
  --sb-hover-bg: hsl(var(--primary-h) var(--primary-s) 76% / .05);
  --focus: hsl(var(--primary-h) var(--primary-s) 74%);

  --sb-text: #a1a1a1;         /* neutral-400 */
  --sb-heading: #f3f4f6;
  --toc-text: #99a1af;
  --toc-hover: #e5e7eb;
  --tab-text: #99a1af;
  --tab-hover: #e5e7eb;
  --tab-active: #fff;

  --input-bg: rgb(255 255 255 / .1);
  --placeholder: #a1a1a1;
  --kbd-bg: #111;
  --nav-icon: #a1a1a1;
  --nav-icon-hover: #fafafa;
  --nav-hover-bg: #404040;

  --code-bg: rgb(255 255 255 / .1);
  --code-border: rgb(255 255 255 / .1);
  --pre-bg: #000;
  --pre-fg: #e1e4e8;
  --pre-ring: #404040;
  --quote-text: #99a1af;
  --quote-border: #364153;
  --table-border: #4a5565;
  --table-stripe: rgb(74 85 101 / .2);
  --hr: rgb(255 255 255 / .1);
  --mark-bg: rgb(250 204 21 / .32);
  --scroll-thumb: rgb(255 255 255 / .2);

  --ok: #4ade80;      --ok-soft: rgb(74 222 128 / .12);
  --warn: #fbbf24;    --warn-soft: rgb(251 191 36 / .12);
  --danger: #f87171;  --danger-soft: rgb(248 113 113 / .12);
  --danger-solid: #b91c1c;

  --callout-bg-a: .12; --callout-bd-a: .35;
  --co-info: 96 165 250;    --co-info-t: #93c5fd;
  --co-tip: 45 212 191;     --co-tip-t: #5eead4;
  --co-success: 74 222 128; --co-success-t: #86efac;
  --co-warning: 251 191 36; --co-warning-t: #fcd34d;
  --co-danger: 248 113 113; --co-danger-t: #fca5a5;
  --co-quote: 156 163 175;  --co-quote-t: #d1d5db;
  --co-example: 167 139 250; --co-example-t: #c4b5fd;

  --tok-kw: #f97583; --tok-str: #9ecbff; --tok-fn: #b392f0; --tok-const: #79b8ff; --tok-com: #8b949e;
  --tok-var: #ffab70; --tok-tag: #85e89d; --tok-attr: #b392f0;
}

/* ... und dieselben Werte automatisch, solange kein Cookie-Theme gesetzt ist */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111;
    --surface: #171717;
    --text: #e2e8f0;
    --heading: #f1f5f9;
    --fg-strong: #fff;
    --muted: #99a1af;
    --muted-soft: #99a1af;
    --border: #262626;
    --border-strong: #4a5565;
    --hover-bg: rgb(255 255 255 / .06);
    --hover-text: #f9fafb;
    --navbar-bg: rgb(17 17 17 / .7);

    --primary: hsl(var(--primary-h) var(--primary-s) 55%);
    --primary-text: hsl(var(--primary-h) var(--primary-s) 74%);
    --primary-soft: hsl(var(--primary-h) var(--primary-s) 76% / .1);
    --sb-active-bg: hsl(var(--primary-h) var(--primary-s) 76% / .1);
    --sb-active-text: hsl(var(--primary-h) var(--primary-s) 74%);
    --sb-hover-bg: hsl(var(--primary-h) var(--primary-s) 76% / .05);
    --focus: hsl(var(--primary-h) var(--primary-s) 74%);

    --sb-text: #a1a1a1;
    --sb-heading: #f3f4f6;
    --toc-text: #99a1af;
    --toc-hover: #e5e7eb;
    --tab-text: #99a1af;
    --tab-hover: #e5e7eb;
    --tab-active: #fff;

    --input-bg: rgb(255 255 255 / .1);
    --placeholder: #a1a1a1;
    --kbd-bg: #111;
    --nav-icon: #a1a1a1;
    --nav-icon-hover: #fafafa;
    --nav-hover-bg: #404040;

    --code-bg: rgb(255 255 255 / .1);
    --code-border: rgb(255 255 255 / .1);
    --pre-bg: #000;
    --pre-fg: #e1e4e8;
    --pre-ring: #404040;
    --quote-text: #99a1af;
    --quote-border: #364153;
    --table-border: #4a5565;
    --table-stripe: rgb(74 85 101 / .2);
    --hr: rgb(255 255 255 / .1);
    --mark-bg: rgb(250 204 21 / .32);
    --scroll-thumb: rgb(255 255 255 / .2);

    --ok: #4ade80;      --ok-soft: rgb(74 222 128 / .12);
    --warn: #fbbf24;    --warn-soft: rgb(251 191 36 / .12);
    --danger: #f87171;  --danger-soft: rgb(248 113 113 / .12);
    --danger-solid: #b91c1c;

    --callout-bg-a: .12; --callout-bd-a: .35;
    --co-info: 96 165 250;    --co-info-t: #93c5fd;
    --co-tip: 45 212 191;     --co-tip-t: #5eead4;
    --co-success: 74 222 128; --co-success-t: #86efac;
    --co-warning: 251 191 36; --co-warning-t: #fcd34d;
    --co-danger: 248 113 113; --co-danger-t: #fca5a5;
    --co-quote: 156 163 175;  --co-quote-t: #d1d5db;
    --co-example: 167 139 250; --co-example-t: #c4b5fd;

    --tok-kw: #f97583; --tok-str: #9ecbff; --tok-fn: #b392f0; --tok-const: #79b8ff; --tok-com: #8b949e;
    --tok-var: #ffab70; --tok-tag: #85e89d; --tok-attr: #b392f0;
  }
}

/* ============================== 2. Basis ============================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-feature-settings: "rlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { padding: 0; }
::selection { background: hsl(var(--primary-h) var(--primary-s) 60% / .28); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 8px 16px;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline-color: var(--fg-strong); }

/* ============================== 3. Seitenstruktur ============================== */

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  height: var(--navbar-h);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--border);
  background: var(--navbar-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  height: var(--navbar-h);
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 max(env(safe-area-inset-right), 1.5rem) 0 max(env(safe-area-inset-left), 1.5rem);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  flex-shrink: 0;
  color: var(--fg-strong);
  text-decoration: none;
  transition: opacity .15s;
}
.site-logo:hover { opacity: .75; }
.site-logo img { display: block; width: 32px; height: 32px; }
.site-logo-text { font-size: 1.3rem; line-height: 32px; font-weight: 400; white-space: nowrap; }

.site-tabs {
  display: flex;
  gap: 16px;
  min-width: 0;
  margin: 0 -4px;
  padding: 6px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-tabs::-webkit-scrollbar { display: none; }
.site-tab {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--tab-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.site-tab:hover { color: var(--tab-hover); }
.site-tab[aria-current] { color: var(--tab-active); font-weight: 500; }

.site-search {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 240px;
  margin: 0;
}
.site-search input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 12px 8px 36px;
  border: 0;
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--fg-strong);
  font-size: 14px;
  line-height: 17.5px;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s;
}
.site-search input::placeholder { color: var(--placeholder); opacity: 1; }
.site-search input::-webkit-search-cancel-button { display: none; }
.site-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-radius: 8px; }
.site-search-btn {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 36px;
  padding: 0 0 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-soft);
  cursor: pointer;
}
.site-search-btn svg { display: block; width: 16px; height: 16px; }
.search-kbd {
  position: absolute;
  top: 50%;
  right: 6px;
  display: none;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--kbd-bg);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}
html.js .search-kbd { display: flex; }
.search-kbd .kbd-mod { font-size: 12px; }
html.js .site-search input { padding-right: 48px; }

.site-gh {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--nav-icon);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.site-gh:hover { color: var(--nav-icon-hover); }
.site-gh svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.site-gh span { font-size: 12px; line-height: 16px; font-weight: 500; }

.theme-link, .nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--nav-icon);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.theme-link:hover, .nav-burger:hover { background: var(--nav-hover-bg); color: var(--nav-icon-hover); }
.theme-link svg, .nav-burger svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Icon je nach effektivem Theme: Mond im Hellen (-> dunkel), Sonne im Dunklen (-> hell) */
.theme-to-light { display: none; }
:root[data-theme="dark"] .theme-to-light { display: inline-flex; }
:root[data-theme="dark"] .theme-to-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-to-light { display: inline-flex; }
  :root:not([data-theme="light"]) .theme-to-dark { display: none; }
}

.nav-toggle {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.nav-burger { display: none; }
.nav-burger .ico-close { display: none; }
.nav-toggle:checked ~ .site-header .nav-burger .ico-open { display: none; }
.nav-toggle:checked ~ .site-header .nav-burger .ico-close { display: block; }
.nav-toggle:focus-visible ~ .site-header .nav-burger { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- Shell ---- */
.site-shell {
  display: flex;
  align-items: flex-start;
  max-width: 90rem;
  margin: 0 auto;
}

/* ---- Sidebar ---- */
.site-sidebar {
  position: sticky;
  top: var(--navbar-h);
  flex: 0 0 256px;
  display: none;
  flex-direction: column;
  width: 256px;
  height: calc(100vh - var(--navbar-h));
  height: calc(100dvh - var(--navbar-h));
}
.sb-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: var(--scroll-thumb) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
}
.sb-tabs { display: none; margin: 0 0 12px; padding: 0 0 12px; list-style: none; border-bottom: 1px solid var(--border); }
.sb-tabs a { display: block; padding: 6px 8px; border-radius: 4px; color: var(--sb-text); font-size: 14px; line-height: 20px; text-decoration: none; }
.sb-tabs a:hover { background: var(--sb-hover-bg); color: var(--hover-text); }
.sb-tabs a[aria-current] { background: var(--sb-active-bg); color: var(--sb-active-text); font-weight: 600; }
.sb-list, .sb-children {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sb-list > li { min-width: 0; }
.sb-heading {
  display: block;
  margin: 20px 0 8px;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--sb-heading);
  text-decoration: none;
  word-break: break-word;
}
.sb-list > li:first-child > .sb-heading { margin-top: 0; }
a.sb-heading:hover { color: var(--primary-text); }
.sb-heading[aria-current="page"] { color: var(--sb-active-text); }

.sb-link, .sb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sb-text);
  text-decoration: none;
  word-break: break-word;
  transition: color .15s, background-color .15s;
}
.sb-link { padding: 6px 8px; }
.sb-link:hover, .sb-row:hover { background: var(--sb-hover-bg); color: var(--hover-text); }
.sb-link[aria-current="page"], .sb-row.is-current {
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  font-weight: 600;
}
.sb-link .badge, .sb-row .badge { flex-shrink: 0; }

.sb-group > summary {
  list-style: none;
  cursor: pointer;
}
.sb-group > summary::-webkit-details-marker { display: none; }
.sb-group > summary::marker { content: ""; }
.sb-row { padding: 0; }
.sb-row > a {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 0 6px 8px;
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.sb-chevron {
  flex-shrink: 0;
  display: flex;
  padding: 6px 8px 6px 4px;
}
.sb-chevron::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  padding: 2px;
  background: currentColor;
  background-clip: content-box;
  -webkit-mask: var(--i-chevron-r) center / 18px 18px no-repeat;
  mask: var(--i-chevron-r) center / 18px 18px no-repeat;
  transition: transform .15s;
}
.sb-group[open] > summary .sb-chevron::before { transform: rotate(90deg); }
.sb-children {
  position: relative;
  margin-left: 12px;
  padding: 4px 0 0 12px;
}
.sb-children::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: 1px;
  background: var(--border);
}

/* ---- Hauptbereich ---- */
.site-main {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  min-height: calc(100vh - var(--navbar-h));
  padding: 16px 16px 32px;
}
.shell-solo { justify-content: center; }
.shell-solo.shell-article .site-main { flex: 0 1 913px; }
.shell-solo.shell-tpl .site-main { max-width: 72rem; margin: 0 auto; }

.draft-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
}
.draft-banner a { color: var(--primary-text); font-weight: 500; }

.breadcrumb { margin-top: 6px; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.breadcrumb li { display: flex; align-items: center; gap: 4px; min-width: 0; }
.breadcrumb li + li::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--i-chevron-r) center / contain no-repeat;
  mask: var(--i-chevron-r) center / contain no-repeat;
}
.breadcrumb a { padding: 2px 0; margin: -2px 0; color: inherit; text-decoration: none; transition: color .15s; } /* Trefferflaeche 24 px, Layout unveraendert */
.breadcrumb a:hover { color: var(--heading); }
.breadcrumb [aria-current="page"] { color: var(--fg-strong); font-weight: 500; }

.docs-updated {
  margin: 48px 0 32px;
  font-size: 12px;
  line-height: 16px;
  text-align: end;
  color: var(--muted);
}
.docs-pager {
  display: flex;
  align-items: center;
  margin: 0 0 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.docs-updated + .docs-pager { margin-top: 0; }
.pager-link {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 50%;
  padding: 16px 16px 16px 0;
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  word-break: break-word;
  transition: color .15s;
}
.pager-link:hover { color: var(--hover-text); }
.pager-next { margin-left: auto; padding: 16px 0 16px 16px; text-align: end; }
.pager-link::before, .pager-link::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: currentColor;
}
.pager-prev::before { -webkit-mask: var(--i-chevron-l) center / contain no-repeat; mask: var(--i-chevron-l) center / contain no-repeat; }
.pager-next::after  { -webkit-mask: var(--i-chevron-r) center / contain no-repeat; mask: var(--i-chevron-r) center / contain no-repeat; }
.pager-prev::after, .pager-next::before { display: none; }

/* ---- TOC ---- */
.site-toc {
  position: sticky;
  top: var(--navbar-h);
  flex: 0 0 256px;
  display: none;
  flex-direction: column;
  width: 256px;
  max-height: calc(100vh - var(--navbar-h));
  max-height: calc(100dvh - var(--navbar-h));
}
.toc-title {
  margin: 0;
  padding: 24px 16px 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--fg-strong);
}
.toc-scroll {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.toc-list { margin: 0; padding: 0; list-style: none; }
.toc-list li { margin: 8px 0; }
.toc-list a {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--toc-text);
  text-decoration: none;
  word-break: break-word;
  transition: color .15s;
}
.toc-list a:hover { color: var(--toc-hover); }
.toc-l2 > a { font-weight: 600; }
.toc-l3 > a { margin-left: 12px; }
.toc-l4 > a { margin-left: 24px; }
.toc-list a.is-active, .toc-list a[aria-current="true"] { color: var(--primary-text); }
.toc-foot {
  display: grid;
  gap: 8px;
  margin: 0 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.toc-foot a {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--toc-text);
  text-decoration: none;
  transition: color .15s;
}
.toc-foot a:hover { color: var(--toc-hover); }
.toc-foot a.ext::after {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  margin-left: 4px;
  vertical-align: -.125em;
  background: currentColor;
  -webkit-mask: var(--i-external) center / contain no-repeat;
  mask: var(--i-external) center / contain no-repeat;
}
.site-toc-empty { visibility: hidden; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--border); }
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  max-width: 90rem;
  margin: 0 auto;
  padding: 24px max(env(safe-area-inset-right), 1.5rem) 24px max(env(safe-area-inset-left), 1.5rem);
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
.site-footer-inner a { color: inherit; text-decoration: none; }
.site-footer-inner a:hover { color: var(--heading); text-decoration: underline; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 0 auto; padding: 0; list-style: none; }

/* ============================== 4. Inhalte (.docs-content) ============================== */
.docs-content { color: var(--text); }
.docs-content > :first-child { margin-top: 0; }

/* Ueberschriften */
.docs-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--heading);
  letter-spacing: -.025em;
}
.docs-content h1 { margin: 8px 0 0; font-size: 36px; line-height: 40px; font-weight: 700; }
.docs-content h2 { margin: 40px 0 0; padding-bottom: 4px; font-size: 30px; line-height: 36px; font-weight: 600; border-bottom: 1px solid var(--border); }
.docs-content h3 { margin: 32px 0 0; font-size: 24px; line-height: 32px; font-weight: 600; }
.docs-content h4 { margin: 32px 0 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.docs-content h5 { margin: 28px 0 0; font-size: 18px; line-height: 28px; font-weight: 600; }
.docs-content h6 { margin: 24px 0 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--muted); }
.docs-content > h1:first-child { margin-top: 8px; }
.docs-content :is(h1, h2, h3, h4, h5, h6) code { font-size: .9em; }

/* Anker-"#" beim Hover */
.docs-content a.anchor {
  margin-left: 4px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 400;
}
.docs-content a.anchor::after { content: "#"; padding: 0 4px; opacity: 0; transition: opacity .15s; }
.docs-content :is(h1, h2, h3, h4, h5, h6):hover > a.anchor::after,
.docs-content a.anchor:focus-visible::after { opacity: 1; }
.docs-content a.anchor:hover { color: var(--heading); }

/* Text */
.docs-content p { margin: 20px 0 0; line-height: 28px; }
.docs-content strong, .docs-content b { font-weight: 700; }
.docs-content small { font-size: .875em; }
.docs-content sub, .docs-content sup { line-height: 0; }
.docs-content abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.docs-content a {
  color: var(--primary-text);
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
}
.docs-content a:hover { text-decoration: none; }
.docs-content a.external::after {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  margin-left: .2em;
  vertical-align: -.1em;
  background: currentColor;
  -webkit-mask: var(--i-external) center / contain no-repeat;
  mask: var(--i-external) center / contain no-repeat;
}
.docs-content hr { margin: 32px 0; border: 0; border-top: 1px solid var(--hr); }

/* Listen */
.docs-content ul, .docs-content ol { margin: 20px 0 0 24px; padding: 0; }
.docs-content ul { list-style: disc; }
.docs-content ol { list-style: decimal; }
.docs-content li { margin: 8px 0; }
.docs-content li > :is(ul, ol) { margin-top: 12px; margin-bottom: 12px; }
.docs-content li > p:first-child { margin-top: 0; }
.docs-content li > p + p { margin-top: 12px; }
.docs-content dl { margin: 20px 0 0; }
.docs-content dt { margin-top: 12px; font-weight: 600; color: var(--heading); }
.docs-content dd { margin: 4px 0 0 24px; }

/* Task-Listen */
.docs-content ul.task-list { margin-left: 0; list-style: none; }
.docs-content li.task-list-item { position: relative; padding-left: 28px; }
.docs-content li.task-list-item > input[type="checkbox"] {
  position: absolute;
  left: 4px; top: 5px;
  width: 16px; height: 16px;
  margin: 0;
  accent-color: var(--primary);
}
.docs-content li.task-list-item > input[type="checkbox"]:disabled { opacity: 1; }

/* Inline-Code */
.docs-content :not(pre) > code {
  padding: .12em .25em;
  border: 1px solid var(--code-border);
  border-radius: .375em;
  background: var(--code-bg);
  color: inherit;
  font-family: var(--font-mono);
  font-size: .9em;
  line-height: 1.42857;
  overflow-wrap: break-word;
}
.docs-content kbd {
  display: inline-block;
  padding: .1em .45em;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--heading);
  font-family: var(--font-mono);
  font-size: .85em;
  line-height: 1.4;
  vertical-align: baseline;
}
.docs-content mark {
  padding: 0 .2em;
  border-radius: 3px;
  background: var(--mark-bg);
  color: inherit;
}
.docs-content .md-tag {
  display: inline-block;
  padding: 0 .55em;
  border-radius: 999px;
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  font-size: .85em;
  font-weight: 500;
  line-height: 1.7;
  vertical-align: baseline;
}
.docs-content .wikilink { color: var(--primary-text); }
.docs-content span.wikilink-missing {
  color: var(--muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

/* Codebloecke */
.docs-content .code-block { position: relative; margin-top: 20px; }
.docs-content pre {
  margin: 20px 0 0;
  padding: 16px 0;
  overflow-x: auto;
  border-radius: 6px;
  background: var(--pre-bg);
  box-shadow: inset 0 0 0 1px var(--pre-ring);
  color: var(--pre-fg);
  font-family: var(--font-mono);
  font-size: .9em;
  line-height: 20px;
  tab-size: 4;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.docs-content .code-block pre { margin: 0; }
.docs-content pre code {
  display: block;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  padding: 0 16px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  white-space: pre;
}
.docs-content pre:not(:has(> code)) { padding: 16px; }
.docs-content :is(pre, div.math):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.docs-content .tok-kw { color: var(--tok-kw); }
.docs-content .tok-str { color: var(--tok-str); }
.docs-content .tok-fn { color: var(--tok-fn); }
.docs-content :is(.tok-const, .tok-num, .tok-flag, .tok-prop) { color: var(--tok-const); }
.docs-content .tok-com { color: var(--tok-com); }
.docs-content :is(.tok-var, .tok-type) { color: var(--tok-var); }
.docs-content .tok-tag { color: var(--tok-tag); }
.docs-content .tok-attr { color: var(--tok-attr); }
.docs-content :is(.tok-op, .tok-punct) { color: inherit; }
.docs-content .tok-com { font-style: normal; }

.code-copy {
  position: absolute;
  top: 8px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--pre-ring);
  border-radius: var(--radius);
  background: var(--pre-bg);
  color: var(--pre-fg);
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
}
.code-copy::before {
  content: "";
  width: 14.4px;
  height: 14.4px;
  background: currentColor;
  -webkit-mask: var(--i-copy) center / contain no-repeat;
  mask: var(--i-copy) center / contain no-repeat;
}
.code-copy:hover { color: var(--heading); border-color: var(--muted); }
.code-block:hover .code-copy, .code-block:focus-within .code-copy, .code-copy.is-copied { opacity: 1; }
.code-copy.is-copied { color: var(--ok); }
.code-copy.is-copied::before { -webkit-mask-image: var(--i-check); mask-image: var(--i-check); }
.code-copy-msg:empty { display: none; }
@media (hover: none) { .code-copy { opacity: 1; } }

/* Fehlende Embeds, Formeln, Mermaid-Quelltext (vom Markdown-Modul erzeugt) */
.docs-content .embed-missing {
  display: inline-block;
  padding: 0 .5em;
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  color: var(--muted);
  font-size: .875em;
  line-height: 1.6;
  cursor: help;
}
.docs-content .math {
  font-family: var(--font-mono);
  white-space: nowrap;
}
.docs-content span.math { padding: 0 .15em; font-size: .95em; }
.docs-content div.math {
  display: block;
  margin: 20px 0 0;
  padding: 12px 16px;
  overflow-x: auto;
  border: 1px solid var(--code-border);
  border-radius: 6px;
  background: var(--code-bg);
  line-height: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.docs-content pre.mermaid {
  margin: 20px 0 0;
  padding: 16px;
  overflow-x: auto;
  border-radius: 6px;
  background: var(--pre-bg);
  box-shadow: inset 0 0 0 1px var(--pre-ring);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  white-space: pre;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* Tabellen */
.docs-content table {
  display: block;
  max-width: 100%;
  margin: 20px 0 0;
  overflow-x: auto;
  border-collapse: collapse;
  text-indent: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.docs-content .table-wrap {
  max-width: 100%;
  margin-top: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.docs-content .table-wrap > table { display: table; margin: 0; overflow: visible; }
.docs-content :is(th, td) { margin: 0; padding: 8px 16px; border: 1px solid var(--table-border); }
.docs-content th { font-weight: 600; text-align: center; }
.docs-content th[align="left"] { text-align: left; }
.docs-content th[align="right"] { text-align: right; }
.docs-content tr { margin: 0; padding: 0; border-top: 1px solid var(--table-border); }
.docs-content tbody tr:nth-child(even) { background: var(--table-stripe); }
.docs-content :is(td, th) > :is(p, ul, ol):first-child { margin-top: 0; }
.docs-content caption { padding: 8px 0; color: var(--muted); font-size: 14px; caption-side: bottom; }

/* Blockquote */
.docs-content blockquote {
  margin: 20px 0 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--quote-border);
  color: var(--quote-text);
  font-style: italic;
}
.docs-content blockquote > :first-child { margin-top: 0; }

/* Medien */
.docs-content img { max-width: 100%; height: auto; }
.docs-content figure { margin: 20px 0 0; }
.docs-content figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 20px; text-align: center; }
.docs-content video, .docs-content canvas { max-width: 100%; height: auto; }
.docs-content iframe { max-width: 100%; border: 0; }
.docs-content iframe[src*="youtube"], .docs-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.docs-content svg { height: auto; }
.docs-content :is(p, figure, li) > :is(img, video, svg):only-child { display: block; }
.docs-content :is(img, video, iframe):not(:first-child) { margin-top: 20px; }
.docs-content :is(p, li, td, th, a, figure, span, h1, h2, h3, h4, h5, h6) > :is(img, video, iframe):not(:only-child) { margin-top: 0; }
.docs-content :is(p, figure, td) > :is(img, video, iframe):first-child { margin-top: 0; }

/* details/summary (generisch) */
.docs-content details:not(.callout) {
  margin: 20px 0 0;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
}
.docs-content details:not(.callout) > summary {
  position: relative;
  padding: 10px 24px 10px 0;
  list-style: none;
  font-weight: 500;
  color: var(--heading);
  cursor: pointer;
  user-select: none;
}
.docs-content details > summary::-webkit-details-marker { display: none; }
.docs-content details > summary::marker { content: ""; }
.docs-content details:not(.callout) > summary::after {
  content: "";
  position: absolute;
  top: 50%; right: 0;
  width: 16px; height: 16px;
  margin-top: -8px;
  background: currentColor;
  -webkit-mask: var(--i-chevron-d) center / contain no-repeat;
  mask: var(--i-chevron-d) center / contain no-repeat;
  transition: transform .15s;
}
.docs-content details[open]:not(.callout) > summary::after { transform: rotate(180deg); }
.docs-content details:not(.callout)[open] > summary { border-bottom: 1px solid var(--border); }
.docs-content details:not(.callout) > summary + * { margin-top: 16px; }
.docs-content details:not(.callout) > :last-child { margin-bottom: 16px; }

/* Callouts */
.docs-content .callout {
  --c-rgb: var(--co-info);
  --c-text: var(--co-info-t);
  --c-icon: var(--i-info);
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid rgb(var(--c-rgb) / var(--callout-bd-a));
  border-radius: 8px;
  background: rgb(var(--c-rgb) / var(--callout-bg-a));
  color: var(--text);
}
.docs-content .callout-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  line-height: 24px;
  color: var(--c-text);
}
.docs-content .callout-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--c-icon) center / contain no-repeat;
  mask: var(--c-icon) center / contain no-repeat;
}
.docs-content .callout-content { margin-top: 6px; }
.docs-content .callout-content > :first-child { margin-top: 0; }
.docs-content .callout-content > p, .docs-content .callout-content > ul, .docs-content .callout-content > ol { line-height: 26px; }
.docs-content details.callout > summary { list-style: none; cursor: pointer; user-select: none; }
.docs-content details.callout > summary::after {
  content: "";
  margin-left: auto;
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: var(--i-chevron-d) center / contain no-repeat;
  mask: var(--i-chevron-d) center / contain no-repeat;
  transition: transform .15s;
}
.docs-content details.callout[open] > summary::after { transform: rotate(180deg); }
.docs-content .callout-info    { --c-rgb: var(--co-info);    --c-text: var(--co-info-t);    --c-icon: var(--i-info); }
.docs-content .callout-tip     { --c-rgb: var(--co-tip);     --c-text: var(--co-tip-t);     --c-icon: var(--i-bulb); }
.docs-content .callout-success { --c-rgb: var(--co-success); --c-text: var(--co-success-t); --c-icon: var(--i-check-circle); }
.docs-content .callout-warning { --c-rgb: var(--co-warning); --c-text: var(--co-warning-t); --c-icon: var(--i-alert); }
.docs-content .callout-danger  { --c-rgb: var(--co-danger);  --c-text: var(--co-danger-t);  --c-icon: var(--i-octagon); }
.docs-content .callout-quote   { --c-rgb: var(--co-quote);   --c-text: var(--co-quote-t);   --c-icon: var(--i-quote); }
.docs-content .callout-quote .callout-content { font-style: italic; }
.docs-content .callout-example { --c-rgb: var(--co-example); --c-text: var(--co-example-t); --c-icon: var(--i-list); }

/* Auto-Index */
.docs-content ul.auto-index {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  list-style: none;
}
.docs-content ul.auto-index > li {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color .15s;
}
.docs-content ul.auto-index > li:hover,
.docs-content ul.auto-index > li:focus-within { border-color: var(--border-strong); }
.docs-content ul.auto-index a { font-size: 18px; line-height: 28px; font-weight: 600; text-decoration: none; }
.docs-content ul.auto-index a:hover { text-decoration: underline; }
.docs-content ul.auto-index p { margin: 4px 0 0; font-size: 14px; line-height: 22px; color: var(--muted); }

/* Fussnoten */
.docs-content .footnotes {
  margin-top: 40px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}
.docs-content .footnotes hr { display: none; }
.docs-content .footnotes ol { margin-top: 12px; }
.docs-content .footnotes li { margin: 6px 0; }
.docs-content .footnotes p { margin: 0; line-height: inherit; }
.docs-content sup.footnote-ref, .docs-content .footnote-ref { font-size: .75em; line-height: 0; }
.docs-content .footnote-backref { margin-left: .25em; text-decoration: none; font-family: var(--font-sans); font-variant-emoji: text; }

/* ============================== 5. Bausteine (auch Admin) ============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--heading);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--hover-bg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: hsl(var(--primary-h) var(--primary-s) 38%); border-color: hsl(var(--primary-h) var(--primary-s) 38%); }
.btn-danger { border-color: var(--danger-solid); background: var(--danger-solid); color: #fff; }
.btn-danger:hover { background: #991b1b; border-color: #991b1b; }
:root[data-theme="dark"] .btn-primary:hover { background: hsl(var(--primary-h) var(--primary-s) 62%); border-color: hsl(var(--primary-h) var(--primary-s) 62%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary:hover { background: hsl(var(--primary-h) var(--primary-s) 62%); border-color: hsl(var(--primary-h) var(--primary-s) 62%); }
}

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--hover-bg);
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-primary { background: var(--sb-active-bg); color: var(--sb-active-text); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

.input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
}
.input::placeholder { color: var(--placeholder); opacity: 1; }
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); border-radius: var(--radius); }
textarea.input { min-height: 8em; font-family: var(--font-mono); line-height: 20px; resize: vertical; }

.card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

/* ============================== 6. Seiten-Templates ============================== */
/* Alle Regeln mit .docs-content-Praefix, damit sie die allgemeinen Inhaltsregeln (Listen, Links, Absaetze) sicher schlagen. */
.docs-content a.card { text-decoration: none; color: inherit; }
.docs-content .tpl-narrow { max-width: 48rem; margin-inline: auto; }

/* Startseite */
.docs-content .tpl-home { padding-bottom: 16px; }
.docs-content .home-hero { padding: 40px 0 8px; text-align: center; }
.docs-content .home-hero h1 { margin: 0; font-size: 48px; line-height: 1.1; letter-spacing: -.03em; }
.docs-content .home-tagline { max-width: 40rem; margin: 16px auto 0; font-size: 20px; line-height: 30px; color: var(--muted); }
.docs-content .home-hero .search-form { max-width: 30rem; margin: 28px auto 0; }
.docs-content ul.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.docs-content ul.cards > li { margin: 0; }
.docs-content .card-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
  transition: border-color .15s, box-shadow .15s;
}
.docs-content .card-link:hover { border-color: var(--primary-text); box-shadow: 0 4px 14px rgb(0 0 0 / .06); }
.docs-content .card-title { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--heading); letter-spacing: -.01em; }
.docs-content .card-desc { font-size: 14px; line-height: 22px; color: var(--muted); }
.docs-content .card-more { margin-top: auto; padding-top: 8px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--primary-text); }
.docs-content .card-more::after { content: " \2192"; }

/* Suchformular (Start, 404, Suche) */
.docs-content .search-form { display: flex; gap: 8px; margin: 24px 0 0; }
.docs-content .search-form .input { flex: 1 1 auto; width: auto; padding: 10px 14px; font-size: 16px; line-height: 24px; border-radius: 8px; }
.docs-content .search-form .btn { flex-shrink: 0; padding-inline: 18px; font-size: 15px; border-radius: 8px; }

/* Suche */
.docs-content .search-count { margin: 20px 0 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.docs-content ol.search-results { margin: 8px 0 0; padding: 0; list-style: none; }
.docs-content ol.search-results > li { margin: 0; padding: 20px 0; border-top: 1px solid var(--border); }
.docs-content ol.search-results > li:first-child { border-top: 0; }
.docs-content .search-result-title { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.docs-content .search-result-title:hover { text-decoration: underline; }
.docs-content .search-result-path { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--muted); }
.docs-content .search-snippet { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--text); }
.docs-content .search-empty { margin-top: 32px; padding: 8px 24px 24px; text-align: center; }
.docs-content .search-note { margin: 8px 0 0; font-size: 14px; line-height: 22px; color: var(--muted); }
.docs-content .search-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.docs-content .search-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  font-size: 14px; line-height: 20px; color: var(--text); text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: 999px;
}
.docs-content .search-chip span { font-size: 12px; color: var(--muted); }
.docs-content .search-chip:hover { background: var(--hover-bg); color: var(--hover-text); }
.docs-content .search-chip[aria-current] { background: var(--sb-active-bg); border-color: transparent; color: var(--sb-active-text); font-weight: 500; }
.docs-content .search-chip[aria-current] span { color: inherit; }
.docs-content .search-sections { margin: 6px 0 0; font-size: 13px; line-height: 20px; color: var(--muted); }
.docs-content .search-sections a { margin-left: 8px; }
.docs-content .search-sections a::before { content: "# "; opacity: .6; }

/* 404 */
.docs-content .tpl-404 { padding-top: 32px; }
.docs-content .notfound-code { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-text); }
.docs-content ul.notfound-links { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.docs-content ul.notfound-links > li { margin: 0; }
.docs-content .notfound-links .btn { text-decoration: none; color: var(--heading); }

/* Sitemap */
.docs-content ul.sitemap-list { margin: 24px 0 0; padding: 0; list-style: none; }
.docs-content ul.sitemap-list ul { position: relative; margin: 4px 0 8px 4px; padding: 0 0 0 16px; list-style: none; }
.docs-content ul.sitemap-list ul::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: 1px; background: var(--border); }
.docs-content .sitemap-list li { margin: 0; }
.docs-content ul.sitemap-list > li { padding: 16px 0 4px; border-top: 1px solid var(--border); }
.docs-content ul.sitemap-list > li:first-child { border-top: 0; padding-top: 0; }
.docs-content .sitemap-list a { display: inline-block; padding: 3px 0; text-decoration: none; }
.docs-content .sitemap-list a:hover { text-decoration: underline; }
.docs-content .sitemap-list > li > a { font-size: 18px; line-height: 28px; font-weight: 600; }
.docs-content .sitemap-list ul > li > a { font-weight: 500; }
.docs-content .sitemap-list ul ul > li > a { font-weight: 400; }

/* ============================== 7. Responsiv ============================== */
@media (min-width: 768px) {
  .site-sidebar { display: flex; }
  .site-sidebar-mobile { display: none; }
  .site-main { padding-left: 48px; padding-right: 48px; }
  .pager-link { font-size: 18px; }
  .nav-toggle { display: none; }
}
@media (min-width: 1280px) {
  .site-toc { display: flex; }
}

/* Tablet: etwas schmaleres Suchfeld; die Tab-Leiste scrollt nur, daher Wortmarke weg (wie im Original) und Hauptbereiche in der Sidebar */
@media (max-width: 1023.98px) {
  .site-search { width: 200px; }
  .site-gh span { display: none; }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .site-logo-text { display: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sb-tabs { display: grid; gap: 4px; }
}

/* Mobil: Off-Canvas-Menue per Checkbox */
@media (max-width: 767.98px) {
  .site-header-inner { gap: 8px; }
  .site-tabs { display: none; }
  .site-search { width: 36px; }
  .site-search input { position: absolute; width: 1px; height: 1px; padding: 0 !important; opacity: 0; pointer-events: none; }
  html.js .site-search input { padding: 0; }
  .site-search-btn { position: static; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--nav-icon); border-radius: var(--radius); }
  .site-search-btn:hover { background: var(--nav-hover-bg); color: var(--nav-icon-hover); }
  .search-kbd { display: none !important; }
  .nav-burger { display: inline-flex; }

  .site-sidebar {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    width: auto;
    height: auto;
    padding-top: var(--navbar-h);
    background: var(--bg);
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .nav-toggle:checked ~ .site-shell .site-sidebar {
    visibility: visible;
    transform: none;
    transition: transform .2s ease;
  }
  body:has(.nav-toggle:checked) { overflow: hidden; }
  .sb-scroll { -webkit-mask-image: none; mask-image: none; }
  .sb-tabs { display: grid; gap: 4px; }
  .sb-tabs a { padding: 10px 12px; border-radius: 6px; font-size: 16px; line-height: 24px; }
  .docs-content .home-hero { padding-top: 24px; }
  .docs-content .home-hero h1 { font-size: 36px; }
  .docs-content .home-tagline { font-size: 18px; line-height: 28px; }
  .docs-content .search-form { flex-direction: column; }
  .site-footer-links { margin-left: 0; }
}
@media (max-width: 479.98px) {
  .site-logo-text { font-size: 1.15rem; }
}

/* ============================== 8. Print & Motion ============================== */
@media print {
  /* Auch bei Dunkelmodus hell drucken: Token-, Callout- und Textfarben auf Papier zuruecksetzen */
  :root:root:root {
    --text: #000; --heading: #000; --muted: #4a5565; --muted-soft: #4a5565; --quote-text: #364153; --pre-fg: #24292e; --ok: #166534;
    --co-info-t: #1d4ed8; --co-tip-t: #0f766e; --co-success-t: #166534; --co-warning-t: #92400e; --co-danger-t: #b91c1c; --co-quote-t: #374151; --co-example-t: #6d28d9;
    --tok-kw: #d73a49; --tok-str: #032f62; --tok-fn: #6f42c1; --tok-const: #005cc5; --tok-com: #6a737d; --tok-var: #bd4f00; --tok-tag: #22863a; --tok-attr: #6f42c1;
  }
  .site-header, .site-sidebar, .site-toc, .site-footer, .skip-link, .docs-pager, .code-copy, .nav-toggle, .draft-banner { display: none !important; }
  html, body { background: #fff !important; }
  body { color: #000; font-size: 12pt; line-height: 1.5; }
  .site-shell { display: block; max-width: none; }
  .site-main { min-height: 0; padding: 0; max-width: none !important; }
  .docs-content { color: #000; }
  .docs-content :is(h1, h2, h3, h4, h5, h6) { color: #000; break-after: avoid; page-break-after: avoid; }
  .docs-content pre, .docs-content table, .docs-content img, .docs-content .callout, .docs-content figure { break-inside: avoid; page-break-inside: avoid; }
  .docs-content pre { white-space: pre-wrap; word-break: break-word; box-shadow: none; border: 1px solid #bbb; background: #fff; }
  .docs-content pre code { width: auto; white-space: pre-wrap; }
  .docs-content pre.mermaid { white-space: pre-wrap; word-break: break-word; box-shadow: none; border: 1px solid #bbb; background: #fff; color: #000; }
  .docs-content div.math { overflow: visible; white-space: pre-wrap; border-color: #bbb; background: none; break-inside: avoid; page-break-inside: avoid; }
  .docs-content .embed-missing { color: #000; border-color: #888; }
  .docs-content a { color: #000; text-decoration: underline; }
  .docs-content a.external::after { content: " (" attr(href) ")"; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; font-size: .85em; word-break: break-all; }
  .docs-content a.anchor { display: none; }
  .docs-updated { margin: 24px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

@media (prefers-contrast: more) {
  :root { --border: #9ca3af; --border-strong: #6b7280; }
  .docs-content a, .docs-content a:hover { text-decoration: underline; }
}