:root {
    --bg: #f7f5f1;
    --surface: #fffefb;
    --surface-2: #f0ede6;
    --ink: #2c2823;
    --ink-2: #5f574e;
    --ink-3: #8f867b;
    --border: #e7e1d7;
    --border-strong: #d6cec0;
    --accent: #bf7268;
    --accent-ink: #9c574e;
    --accent-wash: #f3e8e4; --tok-ink: #4f6b5c; --file-ink: #2563eb; --url-ink: #0a9d62;
    --blue: #7189a4;
    --blue-wash: #e9edf1;
    --ok: #5f8a6c;
    --code-bg: #2a2723;
    --code-ink: #ece6dc;
    --shadow: 0 1px 2px rgba(44,40,35,.03), 0 8px 24px -16px rgba(44,40,35,.14);
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #1a1714; --surface: #221f1b; --surface-2: #2b2722;
      --ink: #e9e3d9; --ink-2: #b0a79b; --ink-3: #82786d;
      --border: #332e27; --border-strong: #474137;
      --accent: #d69d94; --accent-ink: #e2b3ab; --accent-wash: #2c211d; --tok-ink: #9db9a9; --file-ink: #7fa8f5; --url-ink: #4fd6a0;
      --blue: #94a9c1; --blue-wash: #1f2731;
      --ok: #82b691; --code-bg: #14120f;
      --shadow: 0 1px 2px rgba(0,0,0,.25), 0 12px 32px -18px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"] {
    --bg: #1a1714; --surface: #221f1b; --surface-2: #2b2722;
    --ink: #e9e3d9; --ink-2: #b0a79b; --ink-3: #82786d;
    --border: #332e27; --border-strong: #474137;
    --accent: #d69d94; --accent-ink: #e2b3ab; --accent-wash: #2c211d; --tok-ink: #9db9a9; --file-ink: #7fa8f5; --url-ink: #4fd6a0;
    --blue: #94a9c1; --blue-wash: #1f2731;
    --ok: #82b691; --code-bg: #14120f;
    --shadow: 0 1px 2px rgba(0,0,0,.25), 0 12px 32px -18px rgba(0,0,0,.6);
  }

  * { box-sizing: border-box; }
  html { overflow-x: clip; }
  [hidden] { display: none !important; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 4rem) clamp(1.1rem, 4vw, 2rem) 5rem;
  }
  a { color: var(--accent-ink); text-underline-offset: 2px; }

  header { border-bottom: 1px solid var(--border); padding-bottom: 1.8rem; margin-bottom: 1.8rem; }
  .eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin: 0 0 .9rem;
  }
  h1 {
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 .8rem;
  }
  .lede { color: var(--ink-2); max-width: 64ch; margin: 0; font-size: 1.02rem; }
  .lede code, .note code, .files code, footer code, .card__what code, .card__for code {
    font-family: var(--font-mono);
    font-size: .86em;
    color: var(--tok-ink);
  }
  /* Dateinamen und Pfade - Blau, kein Rahmen */
  .lede code.file, .note code.file, .files code.file, footer code.file, .card__what code.file, .card__for code.file { color: var(--file-ink); }
  /* Befehle und URLs - eingerahmt, klar als "hier klicken zum Kopieren" erkennbar */
  .lede code.cmd, .note code.cmd, .files code.cmd, footer code.cmd, .card__what code.cmd, .card__for code.cmd,
  .lede code.url, .note code.url, .files code.url, footer code.url, .card__what code.url, .card__for code.url {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: .05em .35em;
    border-radius: 4px;
  }
  .lede code.url, .note code.url, .files code.url, footer code.url, .card__what code.url, .card__for code.url { color: var(--url-ink); font-weight: 500; }

  h2 {
    font-size: .8rem;
    font-family: var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--edge, var(--ink-3)) 42%, var(--ink-2));
    font-weight: 500;
    margin: 2.8rem 0 1rem;
    scroll-margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  h2::before {
    content: "";
    flex: none;
    width: 1.6rem;
    height: 3px;
    border-radius: 2px;
    background: var(--edge, var(--border-strong));
  }
  .group__count { color: var(--ink-3); margin-left: .1rem; opacity: .8; }

  /* ---------- Themenfarben (weich) ---------- */
  #ki,         [data-group="ki"]         { --edge: #7c78b8; --edge-strong: #595590; }
  #grundlagen, [data-group="grundlagen"] { --edge: #93a066; --edge-strong: #6f7c48; }
  #container,  [data-group="container"]  { --edge: #7290b0; --edge-strong: #52698a; }
  #dienste,    [data-group="dienste"]    { --edge: #c17a6e; --edge-strong: #9c574e; }
  #domain,     [data-group="domain"]     { --edge: #5fa197; --edge-strong: #427a71; }
  #betrieb,    [data-group="betrieb"]    { --edge: #a07b9c; --edge-strong: #7a5776; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #ki,         :root:not([data-theme="light"]) [data-group="ki"]         { --edge: #aaa6df; --edge-strong: #cbc8f0; }
    :root:not([data-theme="light"]) #grundlagen, :root:not([data-theme="light"]) [data-group="grundlagen"] { --edge: #a9b781; --edge-strong: #c6d3a3; }
    :root:not([data-theme="light"]) #container,  :root:not([data-theme="light"]) [data-group="container"]  { --edge: #8ca6c4; --edge-strong: #b0cfec; }
    :root:not([data-theme="light"]) #dienste,    :root:not([data-theme="light"]) [data-group="dienste"]    { --edge: #d19a90; --edge-strong: #e6b8ad; }
    :root:not([data-theme="light"]) #domain,     :root:not([data-theme="light"]) [data-group="domain"]     { --edge: #7fbdb2; --edge-strong: #a6d8cd; }
    :root:not([data-theme="light"]) #betrieb,    :root:not([data-theme="light"]) [data-group="betrieb"]    { --edge: #c09bba; --edge-strong: #dabdd4; }
  }
  :root[data-theme="dark"] #ki,         :root[data-theme="dark"] [data-group="ki"]         { --edge: #aaa6df; --edge-strong: #cbc8f0; }
  :root[data-theme="dark"] #grundlagen, :root[data-theme="dark"] [data-group="grundlagen"] { --edge: #a9b781; --edge-strong: #c6d3a3; }
  :root[data-theme="dark"] #container,  :root[data-theme="dark"] [data-group="container"]  { --edge: #8ca6c4; --edge-strong: #b0cfec; }
  :root[data-theme="dark"] #dienste,    :root[data-theme="dark"] [data-group="dienste"]    { --edge: #d19a90; --edge-strong: #e6b8ad; }
  :root[data-theme="dark"] #domain,     :root[data-theme="dark"] [data-group="domain"]     { --edge: #7fbdb2; --edge-strong: #a6d8cd; }
  :root[data-theme="dark"] #betrieb,    :root[data-theme="dark"] [data-group="betrieb"]    { --edge: #c09bba; --edge-strong: #dabdd4; }

  /* ---------- toolbar ---------- */
  .toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: .8rem 0 .7rem;
    margin: 0 0 .4rem;
    border-bottom: 1px solid var(--border);
  }
  .toolbar__row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
  .search {
    flex: 1 1 14rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    padding: .45rem .7rem;
  }
  .search:focus-within { border-color: var(--accent); }
  .search svg { flex: none; opacity: .5; }
  .search input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
    outline: 0;
    min-width: 0;
  }
  .chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
  .chips--formats { align-items: center; }
  .chips__label {
    flex: 0 0 auto;
    color: var(--ink-3);
    font: .72rem var(--font-mono);
  }
  .chip {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: .22rem .7rem;
    cursor: pointer;
    transition: background .1s, border-color .1s, color .1s;
  }
  .chip:hover { border-color: var(--ink-3); }
  .chip[aria-pressed="true"] {
    background: var(--accent-wash);
    border-color: var(--accent);
    color: var(--accent-ink);
  }
  .chip--clear { border-style: dashed; }
  .filter-count {
    flex: 0 0 auto;
    color: var(--ink-2);
    font: 600 .74rem var(--font-mono);
    white-space: nowrap;
  }
  .toolbar__row--dates { margin-top: .6rem; align-items: center; }
  .date-filter__title, .date-filter {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--ink-2);
  }
  .date-filter { display: inline-flex; align-items: center; gap: .4rem; }
  .date-filter input {
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    padding: .22rem .4rem;
  }
  .date-filter input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Mobil: die Themen-Chips in EINE seitlich scrollbare Zeile, damit die
     sticky-Toolbar nicht den halben Schirm belegt. */
  @media (max-width: 680px) {
    .toolbar { padding: .6rem 0 .5rem; }
    .chips {
      flex-wrap: nowrap;
      overflow-x: auto;
      margin-top: .45rem;
      padding-bottom: .2rem;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }
    .chip { flex: 0 0 auto; font-size: .7rem; padding: .2rem .6rem; }
    .toolbar__row--dates { margin-top: .45rem; font-size: .7rem; }
  }

  /* ---------- guide cards ---------- */
  .cards {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    align-items: stretch;
  }
  @media (max-width: 520px) { .cards { grid-template-columns: 1fr; } }
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--edge, var(--border-strong)) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--edge, var(--border-strong)) 26%, var(--border));
    border-left: 4px solid var(--edge, var(--border-strong));
    border-radius: 10px;
    padding: .8rem .95rem;
    box-shadow: var(--shadow);
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .card { transition: border-color .12s ease, background .12s ease; }
    .card:hover { transform: none; }
  }
  .card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--edge, var(--border-strong)) 45%, var(--border));
    border-left-color: var(--edge-strong, var(--accent));
    background: color-mix(in srgb, var(--edge, var(--border-strong)) 15%, var(--surface));
    box-shadow: 0 2px 4px rgba(44,40,35,.05), 0 14px 32px -18px rgba(44,40,35,.22);
  }

  .card__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .55rem;
    margin-bottom: .4rem;
  }
  .card__lvl {
    font-family: var(--font-mono);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .09em;
    color: var(--edge-strong, var(--ink-3));
    background: color-mix(in srgb, var(--edge, var(--border-strong)) 20%, var(--surface));
    border-radius: 999px;
    padding: .12rem .5rem;
  }
  .card__title { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; margin: 0; line-height: 1.28; }
  .card__title a {
    color: inherit;
    text-decoration: none;
  }
  .card__title a::after { content: ""; position: absolute; inset: 0; }
  .card:hover .card__title a { color: var(--edge-strong, var(--accent-ink)); }
  .card__title a:focus-visible { outline: 2px solid var(--edge-strong, var(--accent)); outline-offset: 3px; }
  .card__cli {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--ink-3);
    border: 1px solid color-mix(in srgb, var(--edge, var(--border-strong)) 40%, var(--border));
    border-radius: 999px;
    padding: .1rem .55rem;
  }
  .card__cost {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--ink-2);
    white-space: nowrap;
  }
  .card__updated {
    flex-basis: 100%;
    margin-top: -.2rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--ink-3);
  }
  /* Beschreibung als Teaser: auf wenige Zeilen gekuerzt, damit die Kacheln
     gleich hoch und die Uebersicht kompakt bleibt. Voller Text steht in der
     Anleitung selbst; die Volltextsuche liest den ungekuerzten Inhalt weiter. */
  .card__what {
    color: var(--ink-2); margin: .1rem 0 .45rem; font-size: .84rem; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
  .card__for {
    font-size: .79rem; color: var(--ink-2); line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .card__for b { color: var(--ink); font-weight: 600; }

  /* ---------- terminal launcher + files ---------- */
  .terminal-launcher {
    margin: 0 0 1rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--blue) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--border));
    border-radius: 12px;
  }
  .terminal-launcher__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
  }
  .terminal-launcher__head h3 { margin: 0; font-size: 1rem; }
  .terminal-launcher__head p { margin: 0; color: var(--ink-3); font-size: .82rem; }
  .terminal-directory {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    margin-bottom: .7rem;
  }
  .terminal-directory label {
    color: var(--ink-2);
    font: .72rem var(--font-mono);
  }
  .terminal-directory input {
    min-width: 0;
    width: 100%;
    padding: .46rem .58rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    font: .76rem var(--font-mono);
  }
  .terminal-directory input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .terminal-directory button {
    padding: .43rem .62rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    font: 600 .7rem var(--font-mono);
    cursor: pointer;
  }
  .terminal-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
  .terminal-button {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 3.2rem;
    padding: .65rem .8rem;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    box-shadow: 0 4px 12px -10px rgba(0,0,0,.5);
  }
  .terminal-button:hover { border-color: var(--blue); background: var(--blue-wash); }
  .terminal-button:focus-visible, .copy-btn:focus-visible, .run-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .terminal-button__icon {
    display: grid;
    place-items: center;
    flex: 0 0 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 6px;
    color: #fff;
    background: var(--blue);
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 600;
  }
  .terminal-button strong { display: block; font-size: .86rem; }
  .terminal-button small { display: block; margin-top: .08rem; color: var(--ink-3); font-size: .7rem; }
  .terminal-setup {
    margin-top: .8rem;
    padding-top: .75rem;
    border-top: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border));
  }
  .terminal-setup p { margin: 0 0 .45rem; color: var(--ink-2); font-size: .82rem; }
  .terminal-setup kbd {
    padding: .05rem .28rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    font: .72rem var(--font-mono);
  }
  .terminal-status { min-height: 1.2em; margin: .45rem 0 0; color: var(--ink-3); font-size: .76rem; }

  .files { display: grid; gap: 1rem; }
  .file-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .file-group > h3 {
    margin: 0;
    padding: .7rem 1rem;
    color: var(--ink-2);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .file-entry { padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
  .file-entry:last-child { border-bottom: 0; }
  .file-entry__head { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem; }
  .file-entry__head > code {
    color: var(--ink);
    background: none;
    border: 0;
    padding: 0;
    font-size: .87rem;
    font-weight: 600;
  }
  .file-kind {
    padding: .08rem .42rem;
    color: var(--ink-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .64rem;
  }
  .file-entry p { margin: .4rem 0 0; color: var(--ink-2); font-size: .87rem; line-height: 1.48; }
  .file-entry p strong { color: var(--ink); font-weight: 600; }
  .file-warning { color: var(--danger, #9c2f22) !important; }
  .source-files { display: grid; gap: .45rem; margin-top: .7rem; }
  .source-view {
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .source-view summary {
    padding: .52rem .65rem;
    color: var(--ink-2);
    font: 600 .7rem var(--font-mono);
    cursor: pointer;
    user-select: none;
  }
  .source-view summary:hover { color: var(--accent-ink); background: var(--blue-wash); }
  .source-view summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .source-view[open] summary { border-bottom: 1px solid var(--border); }
  .source-view__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .35rem .5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .source-view__toolbar input[type="search"] {
    min-width: min(15rem, 100%);
    flex: 1 1 12rem;
    padding: .38rem .48rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font: .7rem var(--font-mono);
  }
  .source-search-count { min-width: 4.5rem; color: var(--ink-3); font: .66rem var(--font-mono); text-align: center; }
  .source-view__toolbar button {
    padding: .35rem .52rem;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font: 600 .68rem var(--font-mono);
    cursor: pointer;
  }
  .source-view__toolbar button:hover:not(:disabled) { color: var(--accent-ink); border-color: var(--accent); }
  .source-view__toolbar button:disabled { opacity: .45; cursor: default; }
  .source-view__toolbar .source-copy { margin-left: auto; }
  .source-view pre {
    max-height: 34rem;
    margin: 0;
    overflow: auto;
    tab-size: 2;
  }
  .source-view pre code {
    display: block;
    min-width: max-content;
    padding: .75rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    font: .7rem/1.5 var(--font-mono);
    white-space: pre;
  }
  .source-line {
    position: relative;
    display: block;
    min-height: 1.5em;
    padding: 0 .75rem 0 4.5rem;
  }
  .source-line::before {
    content: attr(data-line);
    position: absolute;
    left: 0;
    width: 3.5rem;
    padding-right: .65rem;
    color: color-mix(in srgb, var(--ink-3) 65%, transparent);
    border-right: 1px solid var(--border);
    text-align: right;
    user-select: none;
  }
  .source-line.is-match { background: color-mix(in srgb, #e4b849 20%, transparent); }
  .source-line.is-current { background: color-mix(in srgb, var(--accent) 28%, transparent); }
  .source-view.is-wrapped pre code { min-width: 0; width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
  .source-view.is-wrapped .source-line { white-space: pre-wrap; }
  .source-view .tok-comment { color: var(--ink-3); font-style: italic; }
  .source-view .tok-string { color: var(--ok); }
  .source-view .tok-keyword { color: var(--accent-ink); font-weight: 600; }
  .source-view .tok-variable { color: var(--blue); }
  .source-view .tok-type { color: color-mix(in srgb, var(--blue) 72%, var(--ink)); font-weight: 600; }
  .source-view .tok-command { color: color-mix(in srgb, var(--accent) 72%, var(--ink)); }
  .source-view .tok-key { color: var(--blue); font-weight: 600; }
  .source-view .tok-number { color: color-mix(in srgb, var(--accent-ink) 72%, var(--ink)); }
  .source-view .tok-operator { color: color-mix(in srgb, var(--ink-2) 75%, var(--accent)); }
  .script-parameters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: .55rem;
    margin-top: .65rem;
    padding: .65rem;
    background: color-mix(in srgb, var(--blue) 5%, var(--surface-2));
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .script-parameters__intro {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .65rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--border);
  }
  .script-parameters__intro strong { color: var(--ink); font-size: .78rem; }
  .script-parameters__intro span { color: var(--ink-3); font-size: .68rem; line-height: 1.35; }
  .script-preset { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; }
  .script-preset span { color: var(--ink-3); font: .66rem var(--font-mono); }
  .script-preset select {
    min-width: min(18rem, 100%);
    padding: .38rem .44rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font: .72rem var(--font-mono);
  }
  .script-parameter { display: grid; align-content: start; gap: .22rem; }
  .script-parameter > span {
    color: var(--ink-3);
    font: .66rem var(--font-mono);
  }
  .script-parameter input:not([type="checkbox"]), .script-parameter select {
    min-width: 0;
    width: 100%;
    padding: .38rem .44rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font: .74rem var(--font-mono);
  }
  .script-parameter input:focus-visible, .script-parameter select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  .script-parameter--switch {
    grid-template-columns: auto 1fr;
    align-items: center;
    align-content: center;
    padding: .38rem .44rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
  }
  .script-parameter--switch input { margin: 0; accent-color: var(--accent); }
  .script-parameter--switch > span { color: var(--ink-2); }
  .script-parameter__hint { color: var(--ink-3); font-size: .65rem; line-height: 1.3; }
  .script-parameter--switch .script-parameter__hint { grid-column: 1 / -1; }
  .script-parameter-warning {
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: .45rem .55rem;
    color: var(--danger, #9c2f22) !important;
    background: color-mix(in srgb, #b43b2d 8%, var(--surface));
    border-left: 3px solid currentColor;
    border-radius: 4px;
    font-size: .75rem !important;
  }
  .script-parameter-warning:empty { display: none; }
  .file-entry.has-danger .command-copy code { border-color: color-mix(in srgb, #b43b2d 55%, var(--border)); }
  .file-entry.has-errors .command-copy code { border-color: #b43b2d; }
  .script-parameter.is-disabled { opacity: .48; }
  .script-risk-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
  .script-risk-filter button {
    padding: .35rem .58rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font: 600 .68rem var(--font-mono);
    cursor: pointer;
  }
  .script-risk-filter button[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-wash); }
  .risk-badge { margin-left: auto; padding: .08rem .42rem; border-radius: 999px; font: 600 .62rem var(--font-mono); }
  .risk-read { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
  .risk-change { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
  .risk-cost { color: #9b6a16; background: color-mix(in srgb, #d9a52a 16%, transparent); }
  .risk-delete { color: #a53a2d; background: color-mix(in srgb, #b43b2d 14%, transparent); }
  .script-anchor { color: var(--ink-3); text-decoration: none; font: 600 .68rem var(--font-mono); }
  .script-anchor:hover { color: var(--accent-ink); }
  .source-view[id] { scroll-margin-top: 1rem; }
  .command-copy {
    display: flex;
    align-items: stretch;
    gap: .4rem;
    margin-top: .55rem;
  }
  .command-copy code {
    min-width: 0;
    flex: 1;
    overflow-x: auto;
    padding: .48rem .62rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-family: var(--font-mono);
    font-size: .76rem;
    white-space: nowrap;
  }
  .copy-btn, .run-btn {
    flex: 0 0 auto;
    padding: .4rem .68rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    font: 600 .72rem var(--font-mono);
    cursor: pointer;
  }
  .copy-btn:hover, .run-btn:hover { color: var(--accent-ink); border-color: var(--accent); }
  .copy-btn.is-copied { color: var(--ok); border-color: var(--ok); }
  .run-btn {
    color: color-mix(in srgb, var(--ok) 80%, var(--ink));
    border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
  }
  .run-btn[hidden] { display: none; }
  @media (max-width: 680px) {
    .terminal-actions { grid-template-columns: 1fr; }
    .terminal-launcher__head { display: block; }
    .terminal-launcher__head p { margin-top: .25rem; }
    .terminal-directory { grid-template-columns: 1fr auto; }
    .terminal-directory label { grid-column: 1 / -1; }
  }
  @media (max-width: 460px) {
    .command-copy { display: grid; }
    .copy-btn, .run-btn { width: 100%; }
  }

  .note {
    background: var(--blue-wash);
    border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--border));
    border-radius: 10px;
    padding: 1rem 1.2rem;
    font-size: .93rem;
    color: var(--ink-2);
    margin-top: 1rem;
  }
  .note b { color: var(--ink); }

  #noresult {
    text-align: center;
    color: var(--ink-3);
    padding: 2.5rem 1rem;
    font-size: .95rem;
  }

  footer {
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    font-size: .84rem;
    color: var(--ink-3);
  }
  footer a { color: var(--ink-2); }

  /* ---------- Umschalter: nach Thema  <->  nach Lernreihenfolge ---------- */
  .cardview {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
  }
  .cardview button {
    border: 0;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: .76rem;
    letter-spacing: .01em;
    padding: .3rem .85rem;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
  }
  .cardview button + button { border-left: 1px solid var(--border); }
  .cardview button:hover { color: var(--ink); }
  .cardview button[aria-pressed="true"] {
    background: var(--accent-wash);
    color: var(--accent-ink);
    font-weight: 600;
  }
  .cardview button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  .lp-phase { display: none; }

  html[data-cardview="order"] .cards.group {
    counter-reset: lpnum;
    display: flex;
    flex-direction: column;
    gap: .55rem;
  }
  html[data-cardview="order"] h2.lp-topic-heading { display: none !important; }
  html[data-cardview="order"] .cards.group > .card { counter-increment: lpnum; }
  html[data-cardview="order"] .card__top::before {
    content: counter(lpnum);
    flex: 0 0 auto;
    min-width: 1.55rem;
    height: 1.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
    color: var(--bg, #fff);
    background: var(--edge-strong, var(--accent));
    border-radius: 50%;
  }
  html[data-cardview="order"] .lp-phase {
    display: block;
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ink-2);
    margin: 1.5rem 0 .2rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--border);
  }
  html[data-cardview="order"] .cards.group > .lp-phase:first-child { margin-top: 0; }