/* Wissen & Praxis — Seiten-Datei zum Leiterbahn-Design (v2.1).
   Kopfleiste, Sprunglink, Fuß, Rahmen, Reiter, Baugruppe, ganz klickbare Karten und Abstände
   kommen aus circuit-site.min.css (v1.4, Abschnitt 13). */
.knowledge-page { margin:0; background:var(--x-bg); color:var(--x-ink); font-size:var(--x-fs-body); }
.knowledge-page a { text-underline-offset:4px; }

.knowledge-page main { max-width:1120px; padding:0 24px 64px; margin:auto; }
.knowledge-page h1,.knowledge-page h2,.knowledge-page h3 { color:var(--x-ink-bright); line-height:var(--x-lh-head); }
.knowledge-eyebrow { margin:0 0 14px; color:var(--x-blue-light); font-size:var(--x-fs-ui); font-weight:600; line-height:1.6; }

/* W3 Seitenpfad: ruhige Zeile */
.knowledge-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; font-size:var(--x-fs-ui); color:var(--x-ink-soft); }

/* W4 Einleitung ohne Rahmen */
.knowledge-intro { max-width:820px; padding:40px 0 0; }
.knowledge-intro h1 { margin:0 0 22px; font-size:clamp(30px, 4.2vw, var(--x-fs-h1)); font-weight:700; letter-spacing:0; text-wrap:balance; }
.knowledge-intro > p:last-child { max-width:740px; margin:0; font-size:var(--x-fs-lead); color:var(--x-ink-soft); }

/* W11 Abstand vor Abschnitten mit Reiter nur über die Tokens */
.knowledge-page .tabbed { margin-top:calc(var(--x-tab-h) + var(--x-section-gap)); }

/* W5 KI-Kompass: gefüllter Rahmen mit Reiter „Leitfaden“ */
.knowledge-feature { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); border:1px solid var(--x-line-quiet); border-radius:var(--x-radius); background:var(--x-bg-terminal); }
.knowledge-feature-copy { padding:34px; }
.knowledge-feature h2 { margin:0 0 14px; font-size:var(--x-fs-h1); }
.knowledge-feature p { margin:0 0 18px; }
.knowledge-feature .knowledge-feature-lead { color:var(--x-ink-bright); font-size:var(--x-fs-lead); font-weight:600; }
.knowledge-primary { display:inline-flex; align-items:center; gap:24px; min-height:46px; padding:10px 18px; margin-top:8px; border:1px solid var(--x-cyan-doc); border-radius:6px; background:var(--x-cyan-doc); color:var(--x-bg-terminal); font-size:var(--x-fs-body-sm); font-weight:600; text-decoration:none; }
.knowledge-primary:hover { background:var(--x-cyan-doc-hover); border-color:var(--x-cyan-doc-hover); box-shadow:0 0 14px color-mix(in srgb, var(--x-cyan-doc) 45%, transparent); }
.knowledge-primary:focus-visible { outline:2px solid var(--x-blue-light); outline-offset:3px; }
.knowledge-text-link { display:block; width:fit-content; margin-top:16px; font-size:var(--x-fs-body-sm); }
.knowledge-feature-detail { margin:10px; padding:26px 24px; border-radius:calc(var(--x-radius) - 4px); background:var(--x-bg-raised); }
.knowledge-feature-detail h3 { margin:0 0 18px; font-size:var(--x-fs-h3); }
.knowledge-feature-detail ul { list-style:none; margin:0 0 20px; padding:0; }
.knowledge-feature-detail li { display:flex; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--x-line-hair); }
.knowledge-step { color:var(--x-blue-light); font-size:var(--x-fs-ui); }
.knowledge-feature-detail p { color:var(--x-ink-soft); }

/* W6 Sechs Karten als Baugruppe mit Reiter „Praxis“ */
.knowledge-resources.group { display:block; padding:26px 22px 22px; }
.knowledge-section-heading h2 { margin:0 0 8px; font-size:var(--x-fs-h2); }
.knowledge-section-heading p { margin:0 0 22px; color:var(--x-ink-soft); }
.knowledge-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }

/* W7 Karte mit genau einem Link: ganz klickbar über .x-card-link (circuit-site), Pfeil › kommt vom Funktions-Rahmen.
   position:relative bleibt hier, damit die Klickfläche auch ohne circuit-bg (Skript blockiert, noch nicht geladen) auf der Karte bleibt. */
.knowledge-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:26px 44px 26px 26px; border:1px solid var(--x-line-quiet); border-radius:var(--x-radius); background:var(--x-bg-terminal); }
.knowledge-card h3 { margin:0 0 14px; font-size:var(--x-fs-h3); }
.knowledge-card > p:not(.knowledge-eyebrow) { margin:0 0 20px; color:var(--x-ink-soft); }
.knowledge-card a { display:flex; align-items:center; min-height:44px; margin-top:auto; font-size:var(--x-fs-body-sm); font-weight:600; }

/* W8 Erstgespräch: gefüllter Rahmen mit Reiter, nur der Knopf leuchtet */
.knowledge-page .resource-contact { padding:28px; border:1px solid var(--x-line-quiet); border-radius:var(--x-radius); background:var(--x-bg-terminal); }
.knowledge-page .resource-contact-primary:hover { box-shadow:0 0 14px color-mix(in srgb, var(--x-cyan-doc) 45%, transparent); }
.knowledge-page .resource-contact-primary:focus-visible { outline:2px solid var(--x-blue-light); outline-offset:3px; }

/* W14 Licht an */
[data-mode=light] .knowledge-feature,[data-mode=light] .knowledge-card,[data-mode=light] .knowledge-page .resource-contact { border-color:var(--x-line); }

@media (max-width:760px) {
  .knowledge-page main { padding:0 16px 36px; }
  .knowledge-intro { padding-top:28px; }
  .knowledge-feature,.knowledge-grid { grid-template-columns:minmax(0,1fr); }
  .knowledge-feature-copy { padding:24px 20px; }
  .knowledge-feature-detail { margin:0 10px 10px; padding:20px; }
  .knowledge-feature h2 { font-size:var(--x-fs-h2); }
  .knowledge-resources.group { padding:24px 10px 10px; }
  .knowledge-section-heading { padding:0 10px; }
  .knowledge-card { padding:22px 40px 22px 20px; }
  .knowledge-page .resource-contact { padding:22px 18px; }
}

/* W15 Druck */
@media print {
  .knowledge-page { background:#fff; color:#111; }
  .knowledge-page * { background:transparent !important; color:#111 !important; box-shadow:none !important; border-color:#aaa !important; }
  .knowledge-breadcrumb,.knowledge-page .tab-label { display:none !important; }
  .knowledge-page main { max-width:none; padding:0; }
  .knowledge-page .tabbed { margin-top:20px; }
  .knowledge-intro { padding:0 0 20px; }
  .knowledge-feature,.knowledge-grid { display:block; }
  .knowledge-feature-detail { margin:0; padding:20px; }
  .knowledge-card { margin-bottom:15px; padding-right:26px; break-inside:avoid; }
  .knowledge-page h1,.knowledge-page h2,.knowledge-page h3 { break-after:avoid; }
}