/* CST-Lab – "Leitsystem". Hell, kontrastreich, Beamer-tauglich. Jedes Lab eine Linienfarbe. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400.woff2") format("woff2") }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-500.woff2") format("woff2") }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600.woff2") format("woff2") }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlowsc-600.woff2") format("woff2") }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlowsc-700.woff2") format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/jbmono-400.woff2") format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url("/assets/fonts/jbmono-600.woff2") format("woff2") }

:root {
  --bg: #f2f4f5; --surface: #ffffff; --ink: #0f1316; --muted: #4b555d; --line: #cdd3d8;
  --plate: #14191d; --plate-ink: #ffffff; --accent: #0064b0; --accent-ink: #ffffff;
  --l1: #0064b0; --l2: #c98a00; --l3: #d22a1f;
  --ok: #1a7a3a; --ok-bg: #e7f4ec; --bad: #d22a1f; --bad-bg: #fbeae9; --warn: #9a6b00; --warn-bg: #fdf3dd;
  --code: #14191d; --code-ink: #e7ecef; --c-key: #8cc8ff; --c-str: #ffd46b; --c-num: #ffb38a; --c-hl: #3a3410;
  --display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r: 4px; --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1215; --surface: #171d22; --ink: #eef2f4; --muted: #a0abb3; --line: #2c363d;
    --plate: #0b0f12; --plate-ink: #eef2f4; --accent: #3d9bff; --accent-ink: #06121e;
    --l1: #3d9bff; --l2: #f2b300; --l3: #ff5f52;
    --ok: #4cc276; --ok-bg: #0f2418; --bad: #ff5f52; --bad-bg: #2a1210; --warn: #e3b341; --warn-bg: #241c08;
    --code: #080b0d; --code-ink: #e7ecef; --c-hl: #37320f;
    color-scheme: dark;
  }
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased }
h1, h2, h3 { margin: 0; font-family: var(--display); letter-spacing: -0.01em; text-wrap: balance; line-height: 1.12 }
a { color: inherit }
p { margin: 0 }
code, pre, kbd { font-family: var(--mono) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* ---------- Navigation (Schilderband) ---------- */
.nav { display: flex; align-items: center; gap: 24px; padding: 0 clamp(16px, 4vw, 44px); height: 60px; background: var(--plate); color: var(--plate-ink); position: sticky; top: 0; z-index: 20 }
.brand { font: 700 21px/1 var(--display); display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--plate-ink); white-space: nowrap }
.brand .mark { width: 28px; height: 28px; border-radius: calc(var(--r) * .8); background: var(--plate-ink); color: var(--plate); display: grid; place-items: center; font: 700 11px/1 var(--mono); flex: none }
.brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1 }
.brand-text b { font: 700 18px/1 var(--display) }
.brand-text small { font: 500 10.5px/1 var(--mono); opacity: .62; letter-spacing: .02em; white-space: nowrap }
.navlinks { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0 }
.navlinks .spacer { flex: 1 }
.grp { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .55; padding: 0 8px 0 2px }
.navlink { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r); color: var(--plate-ink); text-decoration: none; font: 600 16px/1 var(--display); opacity: .82; white-space: nowrap; transition: background-color 160ms var(--ease), opacity 160ms var(--ease) }
.navlink:hover { opacity: 1; background: rgb(255 255 255 / .08) }
.navlink.on { opacity: 1; background: rgb(255 255 255 / .14) }
.navlink.tool { font-family: var(--mono); font-size: 14px; font-weight: 500 }
.ln { min-width: 22px; height: 22px; padding: 0 5px; display: inline-grid; place-items: center; font: 700 12px/1 var(--mono); border-radius: calc(var(--r) * .7); color: #fff }
.ln.l1 { background: var(--l1) } .ln.l2 { background: var(--l2); color: #14191d } .ln.l3 { background: var(--l3) }
.navend { display: flex; align-items: center; gap: 14px; white-space: nowrap }
.who { font: 500 14px/1 var(--mono); opacity: .7 }
.who-act { font: 600 14px/1 var(--display); color: var(--plate-ink); text-decoration: none; opacity: .9; border-bottom: 1px solid currentColor; padding-bottom: 2px }
.navtoggle { display: none; background: transparent; border: 0; color: var(--plate-ink); font-size: 24px; cursor: pointer; line-height: 1 }
@media (max-width: 820px) {
  .nav { flex-wrap: wrap; height: auto; min-height: 56px; padding-block: 10px }
  .navtoggle { display: block; margin-left: auto }
  .navlinks, .navend { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; display: none }
  .nav.open .navlinks, .nav.open .navend { display: flex }
  .navlinks .spacer { display: none }
  .grp { padding: 12px 8px 4px }
  .navlink { font-size: 18px; padding: 11px 10px }
  .navend { border-top: 1px solid rgb(255 255 255 / .12); margin-top: 6px; padding-top: 10px; flex-direction: row; align-items: center; justify-content: space-between }
}

/* ---------- Grundgeruest ---------- */
.wrap { max-width: 1160px; margin: 0 auto; padding: clamp(28px, 5vw, 48px) clamp(16px, 4vw, 44px) 80px }
.lead { font-size: clamp(19px, 2.4vw, 22px); color: var(--muted); max-width: 54ch }
.sub { color: var(--muted); font-size: 15px }
.h1 { font-size: clamp(34px, 5.4vw, 52px); font-weight: 700 }
.page-head { display: grid; gap: 14px; margin-bottom: 36px; max-width: 70ch }
.stack { display: grid; gap: 16px }
.muted { color: var(--muted) }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 36px 0 }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 18px/1 var(--display); padding: 15px 22px; border-radius: var(--r); border: 1.5px solid transparent; background: var(--accent); color: var(--accent-ink); text-decoration: none; cursor: pointer; transition: transform 140ms var(--ease), filter 160ms ease }
.btn:hover { filter: brightness(1.06) }
.btn:active { transform: scale(0.97) }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line) }
.btn.ghost:hover { border-color: var(--ink); filter: none }
.btn.sm { font-size: 15px; padding: 9px 14px }
.btn.go::after { content: "\2192"; font-size: 20px; line-height: 0 }
.btn.copied { background: var(--ok); color: #fff; border-color: transparent }
.actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center }

/* ---------- Karten ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px clamp(18px, 3vw, 26px); display: grid; gap: 14px; align-content: start; min-width: 0 }
.card > h2 { font-size: 24px }
.card.pad-sm { padding: 18px 20px }
.grid { display: grid; gap: 20px }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.span-all { grid-column: 1 / -1 }
@media (max-width: 880px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr } }

/* ---------- Code ---------- */
pre { margin: 0; background: var(--code); color: var(--code-ink); border-radius: var(--r); padding: 16px 18px; font-size: 14px; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-all }
pre .k { color: var(--c-key) } pre .s { color: var(--c-str) } pre .n { color: var(--c-num) }
pre .hl { background: var(--c-hl); outline: 1px solid var(--c-str); border-radius: 3px }
.kbd { font: 500 14px/1 var(--mono); padding: 4px 8px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 5px; background: var(--surface); color: var(--ink); white-space: nowrap }
.pill { display: inline-block; font: 600 14px/1 var(--mono); padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent) }
.pill.ok { background: var(--ok-bg); color: var(--ok) } .pill.bad { background: var(--bad-bg); color: var(--bad) }

/* ---------- Definitionsliste (Claims) ---------- */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; font-size: 15px }
.dl dt { font: 500 13px/1.4 var(--mono); color: var(--muted); padding-top: 3px }
.dl dd { margin: 0; font: 500 14px/1.45 var(--mono); word-break: break-word }
.dl dd small { display: block; font-family: var(--body); color: var(--muted); font-size: 13.5px }

/* ---------- Tabellen ---------- */
table { border-collapse: collapse; width: 100%; font-size: 15px }
th, td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top }
th { font-family: var(--display); font-weight: 600; background: color-mix(in srgb, var(--ink) 4%, transparent) }
.table-wrap { overflow-x: auto }

/* ---------- Hinweiskaesten ---------- */
.note { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 14px 16px; border-radius: var(--r) }
.note.ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); background: var(--ok-bg) }
.note.bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); background: var(--bad-bg) }
.note.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: var(--warn-bg) }

/* ---------- Start: Linienplan ---------- */
.start { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 60px); align-items: start }
@media (max-width: 900px) { .start { grid-template-columns: 1fr } }
.cred { font-size: 16px; color: var(--muted) }
.cred code { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 2px 7px; border-radius: 4px; font-size: 15px }
.tip { display: flex; gap: 12px; align-items: baseline; font-size: 16px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; max-width: 54ch }
.route { list-style: none; margin: 0; padding: 0; display: grid; position: relative }
.route li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 26px; position: relative }
.route li:last-child { padding-bottom: 0 }
.route li:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 42px; bottom: -4px; width: 8px; background: var(--l1); border-radius: 4px }
.route .dot { width: 44px; height: 44px; display: grid; place-items: center; font: 700 15px/1 var(--mono); border-radius: 50%; background: var(--surface); border: 6px solid var(--l1); color: var(--ink); position: relative; z-index: 1 }
.route li.here .dot { background: var(--l1); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--l1) 22%, transparent) }
.route b { display: block; font-family: var(--display); font-size: 21px; line-height: 1.18 }
.here-badge { display: inline-block; margin-left: 10px; font: 600 12px/1 var(--body); background: var(--l2); color: #14191d; padding: 4px 8px; border-radius: 3px; vertical-align: 2px; white-space: nowrap }
.route code { font-size: 13.5px; color: var(--muted) }
.route p { font-size: 15px; color: var(--muted); margin-top: 2px }

/* ---------- Dashboard ---------- */
.dash-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px }
.dash-head .who-block p { color: var(--muted); font-size: 16px }
.timer { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px; border-radius: var(--r); background: var(--plate); color: var(--plate-ink); margin-left: auto }
.timer span { font-size: 14px; opacity: .8 }
.timer strong { font: 600 26px/1 var(--mono); font-variant-numeric: tabular-nums }
.timer.low strong { color: var(--l2) }
.timer.dead { background: var(--bad-bg); color: var(--bad) }
.timer.dead strong { color: var(--bad) }
.tok { font-size: 13px }
.tok .p1 { color: #ff8fa3 } .tok .p2 { color: var(--c-key) } .tok .p3 { color: var(--c-str) }
.mrz { font: 400 12px/1.6 var(--mono); letter-spacing: .12em; color: var(--muted); word-break: break-all; border-top: 1px solid var(--line); padding-top: 10px; margin: 0 }

/* ---------- Befehls-Block ---------- */
.cmd { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; padding-block: 16px; border-top: 1px solid var(--line) }
.cmd:first-of-type { border-top: 0; padding-top: 4px }
.cmd-lbl b { display: block; font: 600 16px/1.2 var(--display) }
.cmd-lbl small { color: var(--muted); font-size: 13.5px }
.cmd-code { padding: 12px 14px; font-size: 13px }
.cmd-acts { display: flex; gap: 8px }
.cmd-out { grid-column: 1 / -1; font-size: 13px }
.cmd-out.ok { outline: 2px solid var(--ok) } .cmd-out.bad { outline: 2px solid var(--bad) }
@media (max-width: 760px) { .cmd { grid-template-columns: 1fr } .cmd-acts { justify-self: start } }

/* ---------- Shell-Umschalter ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); padding: 3px; gap: 2px; background: var(--surface) }
.seg button { font: 500 14px/1 var(--mono); padding: 8px 12px; border-radius: calc(var(--r) * .7); color: var(--muted); cursor: pointer; background: transparent; border: 0 }
.seg button.on { background: var(--ink); color: var(--surface) }

/* ---------- Forge ---------- */
.forge { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start }
.forge .wide3 { grid-column: 1 / -1 }
@media (max-width: 760px) { .forge { grid-template-columns: 1fr } }
.step-h { display: flex; gap: 12px; align-items: center }
.step-n { font: 700 15px/1 var(--mono); width: 32px; height: 32px; display: grid; place-items: center; border-radius: calc(var(--r) * .8); background: var(--l2); color: #14191d; flex: none }
textarea.field, input.field { width: 100%; font: 500 13px/1.6 var(--mono); color: var(--ink); background: var(--code); color: var(--code-ink); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; resize: vertical }
textarea.field { min-height: 150px }
.tok-out-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start }
textarea.tok-out { min-height: 0; height: auto; white-space: pre; overflow: auto; resize: vertical }
.result { display: grid; gap: 8px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); position: relative }
.result .row { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.result.win { border-color: var(--ok); background: var(--ok-bg) }
.result.lose { border-color: var(--bad); background: var(--bad-bg) }
.flag { font: 600 15px/1.4 var(--mono); color: var(--ok); word-break: break-all }

/* ---------- Decode ---------- */
.decode-out { display: grid; gap: 16px }
.jpart h3 { font-size: 15px; font-family: var(--mono); color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em }