/* infraCore Studio — Hilfe-Wiki (plandx.at). Quelle: site/hilfe/wiki.css, kopiert von
   scripts/build-help-site.tsx nach deploy/homepage/hilfe/wiki.css.
   Design.md-konform: ruhig, gedämpft, EIN Akzent (System-Blau), keine Verläufe, kein Glow,
   kein Blur. Dark Mode über prefers-color-scheme. Schriften lokal (../fonts/). */

@font-face {
  font-family: 'Inter var'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono var'; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --bg:#F1F1F4; --bg-alt:#E7E7EB; --card:#FCFCFD; --card-2:#F7F7F9;
  --border:#DEDEE3; --border-soft:#E7E7EB;
  --text:#141416; --text-2:#3A3A40; --muted:#68686E; --faint:#8B8B92;
  --primary:#0071E3; --primary-hover:#005FCC; --tint:#EAF2FD; --tint-border:#C9DDF7;
  --warn:#9A5B00; --warn-tint:#FBF1E1; --warn-border:#EED3A6;
  --ok:#2E7D4F; --ok-tint:#E6F3EB; --danger:#B03A2E; --danger-tint:#F8E7E5;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --head-h:60px;
  --shadow-soft:0 1px 2px rgba(16,16,20,.04);
  --ease:cubic-bezier(.4,0,.2,1);
  --mono:'JetBrains Mono var',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#101013; --bg-alt:#16161A; --card:#1A1A1E; --card-2:#1E1E23;
    --border:#2E2E35; --border-soft:#26262B;
    --text:#F3F3F5; --text-2:#D2D2D7; --muted:#9C9CA4; --faint:#787881;
    --primary:#4DA3FF; --primary-hover:#7CBBFF; --tint:#16222F; --tint-border:#23384F;
    --warn:#E0A43A; --warn-tint:#2A2115; --warn-border:#4A3A1E;
    --ok:#5CB88A; --ok-tint:#15261D; --danger:#E57368; --danger-tint:#2C1917;
    --shadow-soft:0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--head-h) + 16px); }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter var',-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  font-size:15.5px; line-height:1.65; font-feature-settings:'cv05' 1,'ss01' 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-hover); text-decoration:underline; text-underline-offset:2px; }
code { font-family:var(--mono); font-size:.88em; background:var(--bg-alt); border-radius:4px; padding:.08em .35em; }
strong { font-weight:600; color:var(--text); }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }
svg { flex-shrink:0; }
.wk-skip { position:absolute; left:-9999px; }
.wk-skip:focus { left:16px; top:8px; z-index:100; background:var(--card); padding:8px 12px; border-radius:var(--r-sm); }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.wk-header {
  position:sticky; top:0; z-index:40; height:var(--head-h);
  background:var(--bg); border-bottom:1px solid var(--border-soft);
}
.wk-header-in { display:flex; align-items:center; gap:16px; height:100%; max-width:1440px; margin:0 auto; padding:0 24px; }
.wk-brand { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:650; font-size:15px; letter-spacing:-.01em; white-space:nowrap; }
.wk-brand:hover { color:var(--text); text-decoration:none; }
.wk-brand-sub { color:var(--muted); font-weight:400; }
.wk-logo { width:28px; height:28px; display:block; flex:none; }
.wk-search { position:relative; flex:1; max-width:520px; margin-left:auto; }
.wk-search input {
  width:100%; height:38px; padding:0 64px 0 36px; font:inherit; font-size:16px; color:var(--text);
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md);
}
.wk-search input::placeholder { color:var(--faint); }
.wk-search input:focus { outline:none; border-color:var(--primary); }
.wk-search .wk-search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; display:flex; }
.wk-search input:not(:placeholder-shown) ~ .wk-search-kbd { display:none; }
.wk-search .wk-search-kbd { position:absolute; right:9px; top:50%; transform:translateY(-50%); pointer-events:none; }
.wk-results {
  position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:min(70vh,560px); overflow:auto;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 12px 32px rgba(16,16,20,.12);
  padding:6px; margin:0; list-style:none;
}
.wk-results[hidden] { display:none; }
.wk-results li a { display:block; padding:9px 11px; border-radius:var(--r-sm); color:var(--text); }
.wk-results li a:hover, .wk-results li[aria-selected="true"] a { background:var(--tint); text-decoration:none; }
.wk-res-title { font-weight:600; font-size:14.5px; }
.wk-res-group { color:var(--faint); font-size:12.5px; margin-left:6px; font-weight:400; }
.wk-res-snip { display:block; color:var(--muted); font-size:13.5px; line-height:1.5; margin-top:2px; }
.wk-res-snip mark { background:transparent; color:var(--text); font-weight:600; }
.wk-res-empty { padding:12px; color:var(--muted); font-size:14px; }
.wk-btn {
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border-radius:var(--r-md);
  background:var(--primary); color:#FAFAFA; font-weight:550; font-size:14.5px; white-space:nowrap;
  border:1px solid transparent; transition:background-color .15s var(--ease);
}
.wk-btn:hover { background:var(--primary-hover); color:#FAFAFA; text-decoration:none; }
@media (prefers-color-scheme: dark) { .wk-btn, .wk-btn:hover { color:#0E1116; } }
.wk-btn-lg { height:44px; padding:0 20px; font-size:15.5px; }

/* ── Raster ───────────────────────────────────────────────────────────── */
.wk-layout { display:grid; grid-template-columns:260px minmax(0,1fr) 220px; gap:40px; max-width:1440px; margin:0 auto; padding:0 24px; }
.wk-side { position:sticky; top:var(--head-h); align-self:start; max-height:calc(100vh - var(--head-h)); overflow:auto; padding:24px 4px 40px 0; }
.wk-navtoggle, .wk-navlabel { display:none; }
.wk-navgroup { margin-bottom:18px; }
.wk-navgroup-title { font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0 0 6px 10px; }
.wk-navgroup ul { list-style:none; margin:0; padding:0; }
.wk-navgroup a { display:flex; align-items:center; gap:9px; padding:5px 10px; border-radius:var(--r-sm); color:var(--text-2); font-size:14.5px; line-height:1.4; }
.wk-navgroup a svg { color:var(--faint); }
.wk-navgroup a:hover { background:var(--bg-alt); color:var(--text); text-decoration:none; }
.wk-navgroup a[aria-current="page"] { background:var(--tint); color:var(--primary); font-weight:550; }
.wk-navgroup a[aria-current="page"] svg { color:var(--primary); }
.wk-main { min-width:0; padding:36px 0 56px; overflow-wrap:break-word; }
.wk-cl-entry, .wk-code { overflow-wrap:anywhere; }
.wk-article { max-width:78ch; }
.wk-toc { position:sticky; top:var(--head-h); align-self:start; max-height:calc(100vh - var(--head-h)); overflow:auto; padding:36px 0 40px; font-size:13.5px; }
.wk-toc-title { font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0 0 8px; }
.wk-toc ul { list-style:none; margin:0; padding:0; border-left:1px solid var(--border); }
.wk-toc a { display:block; padding:4px 0 4px 12px; margin-left:-1px; border-left:1px solid transparent; color:var(--muted); line-height:1.4; }
.wk-toc a:hover { color:var(--text); text-decoration:none; }
.wk-toc a.is-active { color:var(--primary); border-left-color:var(--primary); }

@media (max-width:1180px) {
  .wk-layout { grid-template-columns:240px minmax(0,1fr); }
  .wk-toc { display:none; }
}
@media (max-width:860px) {
  .wk-header-in { padding:0 16px; gap:10px; }
  .wk-brand-sub { display:none; }
  .wk-brand-name { display:none; }
  .wk-search .wk-search-kbd { display:none; }
  .wk-search input { padding-right:12px; }
  .wk-btn-app span { display:none; }
  .wk-btn-app { padding:0 12px; }
  .wk-layout { display:block; padding:0 16px; }
  .wk-side { position:static; max-height:none; overflow:visible; padding:14px 0 0; }
  .wk-navlabel {
    display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none;
    padding:10px 14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--card); font-weight:550; font-size:15px;
  }
  .wk-navlabel svg { transition:transform .15s var(--ease); color:var(--muted); }
  .wk-navtoggle:checked + .wk-navlabel svg { transform:rotate(180deg); }
  .wk-navtoggle:focus-visible + .wk-navlabel { outline:2px solid var(--primary); outline-offset:2px; }
  .wk-navtoggle { display:block; position:absolute; opacity:0; width:1px; height:1px; }
  .wk-navlist { display:none; padding:12px 0 0; }
  .wk-navtoggle:checked ~ .wk-navlist { display:block; }
  .wk-main { padding-top:20px; }
}

/* ── Inhalt ───────────────────────────────────────────────────────────── */
.wk-crumb { font-size:13px; color:var(--faint); margin:0 0 8px; }
.wk-head { margin:0 0 26px; }
.wk-h1 { font-size:30px; line-height:1.2; letter-spacing:-.02em; font-weight:650; margin:0; }
.wk-sub { font-size:17px; color:var(--muted); margin:10px 0 0; line-height:1.55; }
.wk-h2 { font-size:20px; line-height:1.3; letter-spacing:-.01em; font-weight:620; margin:36px 0 12px; padding-top:4px; }
.wk-head + .wk-h2, .wk-article > div > .wk-h2:first-child { margin-top:0; }
.wk-p { margin:0 0 14px; color:var(--text-2); }
.wk-muted { color:var(--muted); }
.wk-mono { font-family:var(--mono); }
.wk-mt { margin-top:24px; }
.wk-inline { display:inline; vertical-align:-2px; }
.wk-stack { display:flex; flex-direction:column; gap:14px; }
.wk-stack > .wk-h2 { margin-bottom:0; }
.wk-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.wk-step { display:flex; gap:14px; margin:0 0 16px; }
.wk-step-n {
  width:26px; height:26px; border-radius:var(--r-sm); background:var(--bg-alt); border:1px solid var(--border);
  display:grid; place-items:center; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; flex-shrink:0; margin-top:1px;
}
.wk-step-body { min-width:0; }
.wk-step-title { font-weight:600; margin-bottom:2px; }
.wk-step-text { color:var(--text-2); }

.wk-kbd {
  display:inline-flex; align-items:center; justify-content:center; min-width:1.6em; height:1.55em; padding:0 .4em; margin:0 .12em;
  font-family:var(--mono); font-size:.8em; font-weight:500; color:var(--text); line-height:1;
  background:var(--card); border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; vertical-align:.08em;
}
.wk-path {
  display:inline-flex; align-items:center; gap:5px; padding:.12em .5em; margin:0 .1em;
  font-size:.88em; font-weight:500; color:var(--text); line-height:1.4; white-space:nowrap;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:5px; vertical-align:.05em;
}
.wk-path svg { color:var(--faint); }

.wk-callout { display:flex; gap:12px; margin:0 0 18px; padding:13px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--card-2); color:var(--text-2); }
.wk-callout-icon { display:flex; margin-top:4px; }
.wk-callout-body { min-width:0; }
.wk-callout-body > :last-child { margin-bottom:0; }
.wk-note { background:var(--tint); border-color:var(--tint-border); }
.wk-note .wk-callout-icon { color:var(--primary); }
.wk-tip .wk-callout-icon { color:var(--muted); }
.wk-warn { background:var(--warn-tint); border-color:var(--warn-border); }
.wk-warn .wk-callout-icon { color:var(--warn); }

.wk-rows { margin:0 0 20px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--card); padding:2px 16px; }
.wk-row { display:flex; gap:14px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.wk-row:last-child { border-bottom:0; }
.wk-row-icon { color:var(--muted); display:flex; margin-top:4px; }
.wk-row-label { width:10.5em; flex-shrink:0; font-weight:600; }
.wk-row-text { flex:1; min-width:0; color:var(--text-2); }
@media (max-width:600px) {
  .wk-row { flex-wrap:wrap; gap:4px 12px; }
  .wk-row-label { width:auto; flex:1; }
  .wk-row-text { flex-basis:100%; }
  .wk-grid-2 { grid-template-columns:1fr; }
}

.wk-table-wrap { overflow-x:auto; margin:0 0 20px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--card); }
.wk-table { width:100%; border-collapse:collapse; font-size:14.5px; }
.wk-table th { text-align:left; padding:9px 14px; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--card-2); border-bottom:1px solid var(--border); white-space:nowrap; }
.wk-table td { padding:9px 14px; vertical-align:top; color:var(--text-2); border-bottom:1px solid var(--border-soft); }
.wk-table tr:last-child td { border-bottom:0; }

.wk-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 20px; }
.wk-cards-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:700px) { .wk-cards, .wk-cards-3 { grid-template-columns:1fr; } }
.wk-card { border:1px solid var(--border); border-radius:var(--r-md); background:var(--card); padding:14px 16px; }
.wk-card-title { display:flex; align-items:center; gap:8px; font-weight:600; margin-bottom:4px; }
.wk-card-icon { color:var(--primary); display:flex; }
.wk-card-text { margin:0; font-size:14px; color:var(--muted); line-height:1.55; }

.wk-code { display:block; margin:0 0 8px; padding:9px 12px; overflow-x:auto; white-space:pre-wrap; font-size:13.5px; color:var(--text-2); background:var(--card-2); border:1px solid var(--border); border-radius:var(--r-sm); }
.wk-docref { margin:32px 0 0; padding-top:12px; border-top:1px solid var(--border-soft); font-size:13px; color:var(--faint); }
.wk-colophon { margin-top:32px; padding-top:16px; border-top:1px solid var(--border-soft); text-align:center; font-size:13.5px; }
.wk-article ul, .wk-article ol { padding-left:1.3em; color:var(--text-2); margin:0 0 14px; }
.wk-article li { margin:0 0 4px; }

/* ── Neuerungen ───────────────────────────────────────────────────────── */
.wk-cl-filter { position:sticky; top:var(--head-h); z-index:5; background:var(--bg); padding:10px 0 12px; margin:0 0 6px; }
.wk-cl-filter[hidden], .wk-cl-empty[hidden], .wk-cl-group[hidden], .wk-cl-entry[hidden] { display:none; }
.wk-cl-filter input { width:100%; height:38px; padding:0 12px; font:inherit; font-size:16px; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); }
.wk-cl-filter input:focus { outline:none; border-color:var(--primary); }
.wk-cl-count { font-size:13px; margin-top:6px; min-height:1em; }
.wk-cl-group { margin:0 0 28px; }
.wk-cl-date { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:620; margin:0 0 12px; padding-top:8px; }
.wk-cl-date svg { color:var(--primary); }
.wk-cl-entry { border:1px solid var(--border); border-radius:var(--r-md); background:var(--card); padding:14px 16px; margin:0 0 10px; }
.wk-cl-title { display:flex; align-items:baseline; gap:10px; font-weight:600; margin-bottom:6px; line-height:1.45; }
.wk-cl-long { margin:0 0 10px; font-size:14.5px; color:var(--text-2); }
.wk-cl-ba { display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:14px; color:var(--text-2); line-height:1.55; }
@media (max-width:600px) { .wk-cl-ba { grid-template-columns:1fr; } }
.wk-cl-before, .wk-cl-after { border-radius:var(--r-sm); padding:9px 12px; border:1px solid var(--border-soft); background:var(--card-2); }
.wk-cl-after { background:var(--tint); border-color:var(--tint-border); }
.wk-cl-ba-label { font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.wk-cl-after .wk-cl-ba-label { color:var(--primary); }
.wk-tag { flex-shrink:0; font-size:11.5px; font-weight:600; padding:2px 7px; border-radius:5px; border:1px solid var(--border); background:var(--bg-alt); color:var(--muted); line-height:1.4; }
.wk-tag-neu { color:var(--ok); background:var(--ok-tint); border-color:transparent; }
.wk-tag-verbessert, .wk-tag-performance { color:var(--primary); background:var(--tint); border-color:transparent; }
.wk-tag-behoben { color:var(--warn); background:var(--warn-tint); border-color:transparent; }
.wk-tag-entfernt { color:var(--danger); background:var(--danger-tint); border-color:transparent; }

/* ── Seitenfuß ────────────────────────────────────────────────────────── */
.wk-pager { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:44px 0 0; max-width:78ch; }
.wk-pager a { display:block; padding:12px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--card); color:var(--text); }
.wk-pager a:hover { border-color:var(--primary); text-decoration:none; }
.wk-pager small { display:block; font-size:12.5px; color:var(--faint); }
.wk-pager .wk-next { text-align:right; grid-column:2; }
.wk-footer { border-top:1px solid var(--border-soft); margin-top:24px; }
.wk-footer-in { display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; max-width:1440px; margin:0 auto; padding:20px 24px 32px; font-size:13.5px; color:var(--muted); }
.wk-footer-in .wk-spacer { flex:1; }
.wk-footer a { color:var(--muted); }
.wk-footer a:hover { color:var(--text); }

/* ── Startseite ───────────────────────────────────────────────────────── */
.wk-home { max-width:1120px; margin:0 auto; padding:56px 24px 40px; }
.wk-hero { max-width:720px; margin:0 0 44px; }
.wk-hero h1 { font-size:36px; line-height:1.15; letter-spacing:-.025em; font-weight:680; margin:0 0 12px; }
.wk-hero p { font-size:17.5px; color:var(--muted); margin:0 0 24px; line-height:1.55; }
.wk-hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.wk-hero-actions .wk-link { font-weight:550; font-size:15px; }
.wk-home-group { margin:0 0 36px; }
.wk-home-group h2 { font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin:0 0 12px; }
.wk-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; list-style:none; margin:0; padding:0; }
.wk-tile { display:flex; gap:12px; height:100%; padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--card); color:var(--text); transition:border-color .15s var(--ease); }
.wk-tile:hover { border-color:var(--primary); text-decoration:none; color:var(--text); }
.wk-tile-icon { width:32px; height:32px; border-radius:8px; background:var(--tint); color:var(--primary); display:grid; place-items:center; flex-shrink:0; }
.wk-tile-title { font-weight:600; font-size:15px; }
.wk-tile-text { display:block; color:var(--muted); font-size:13.5px; line-height:1.5; margin-top:2px; }
@media (max-width:860px) {
  .wk-home { padding:32px 16px 24px; }
  .wk-hero h1 { font-size:28px; }
  .wk-hero p { font-size:16px; }
}
