/* KI-Kompass 3.0 im Leiterbahn-Design (v2.0) | Stand: 2026-10-15
   Lädt nach kompass-3.css, supporting-pages.css und circuit-site.min.css.
   Rolle wie kontaktdaten/karte.css: nur Seitenanpassung, circuit-site bleibt unverändert.
   [allgemein] markiert Regeln, die sich für alle Erklärseiten eignen (Übernahme in circuit-site.css). */

/* Hintergrund trägt html, damit die Leiterbahnen (Canvas, z-index -1) sichtbar bleiben */
html { background: var(--x-bg); scroll-padding-top: calc(var(--kc-top) + 12px); }
body { background: transparent; }
:root {
  --kc-top: 64px;                                   /* Höhe der Kopfleiste */
  --kc-accent: var(--x-cyan-doc, #7dd3e8);
  --x-sig-stop: #e5675a;                            /* [allgemein] Signalfarbe Achtung, getrennt von den Markenfarben */
}
html:root[data-mode=light] { --x-sig-stop: #a8322b; }
:target { scroll-margin-top: calc(var(--kc-top) + 16px); }

/* 1 · Kopfleiste kommt aus circuit-site (nav.dos-nav.topbar, fest); „Seite drucken“ steht unter der Versionszeile (v2.7) */
button.kc-print { min-height: 40px; margin: 0 0 18px; padding: 6px 14px; font-size: var(--x-fs-ui); }

/* 3 · Zwei Spalten: Seitenleiste ~260 px, Lese-Rahmen höchstens 760 px; außen Platz für Leiterbahnen */
.kc-layout { grid-template-columns: 260px minmax(0, 760px); justify-content: center; gap: 40px; max-width: 1160px; padding: 0 20px; }

/* 4 · Lese-Rahmen: Inhalt gefüllt, keine Bahnen darin */
.kc-main.reading-frame { display: block; max-width: 760px; margin: calc(var(--x-tab-h) + var(--x-section-gap)) 0 48px; padding: clamp(22px, 4.5vw, 48px); }
.kc-main.reading-frame h2 { margin-top: 2.6rem; }
.kc-main.reading-frame h3 { margin-top: 1.9rem; }
.kc-main.reading-frame p, .kc-main.reading-frame li { max-width: none; }
.kc-breadcrumb, .kc-meta { font-size: var(--x-fs-ui); color: var(--x-ink-soft); }
.kc-eyebrow { font: 20px/1.2 var(--x-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--x-blue-light); }

/* 5 · Seitenleiste: Inhaltsrahmen mit Reiter „Inhalt“, sticky unter der Kopfleiste */
.kc-sidebar.tabbed { position: sticky; top: calc(var(--kc-top) + var(--x-tab-h) + 8px); align-self: start; margin-top: calc(var(--x-tab-h) + var(--x-section-gap)); max-height: none; padding: 6px 4px; overflow: visible; border: 1px solid var(--x-line-quiet); border-radius: var(--x-radius, 10px); }
.kc-sidebar > details { max-height: calc(100vh - var(--kc-top) - var(--x-tab-h) - 40px); overflow-y: auto; scrollbar-gutter: stable; }
.kc-sidebar summary { color: var(--x-ink-soft); font-size: var(--x-fs-ui); }
.kc-sidebar nav { font-size: var(--x-fs-body-sm); }
.kc-navgroup strong { display: block; margin: 0 .65rem .2rem; font: 18px/1.3 var(--x-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--x-blue-light); }
.kc-sidebar nav a[aria-current] { border-left: 3px solid var(--x-establish); color: var(--x-establish); background: color-mix(in srgb, var(--x-establish) 10%, transparent); }

/* 6 / 10 / 11 · Funktions-Rahmen: Karten, Inhaltsverzeichnis, Weiter/Zurück. Pfeil braucht rechts ≥ 36 px */
.kc-route-card, .kc-card { padding-right: 40px; border-color: var(--x-line); }
.kc-route-card:hover, .kc-card:hover { transform: none; background: var(--x-bg-raised); }
.kc-route-card small, .kc-card small { font-size: var(--x-fs-ui); }
.kc-route-card p, .kc-card p, .kc-route-card span { font-size: var(--x-fs-body-sm); }
.kc-toc { position: relative; background: var(--x-bg-raised); }
.kc-pagination { border-top: 0; padding-top: 0; }
.kc-pagination a { position: relative; padding: 14px 40px 14px 16px; text-decoration: none; color: var(--x-ink-bright); font-size: var(--x-fs-body); }
.kc-pagination .kc-next { text-align: left; }
@media (max-width: 600px) { .kc-pagination { grid-template-columns: minmax(0, 1fr); } .kc-pagination .kc-next { grid-column: 1; } }

/* 12 · Leseweg: ruhige Statuszeile ohne Rahmen */
.kc-current-route { padding: 0; border: 0; background: none; color: var(--x-ink-soft); font-size: var(--x-fs-body-sm); }

/* 7 · Tabellen: Anzeige, leuchtet nie [allgemein] */
.kc-table-scroll { border: .5px solid var(--x-line-quiet); background: var(--x-bg-terminal); }
.kc-article table { font-size: var(--x-fs-body); }
.kc-article th { background: var(--x-bg-raised); color: var(--x-ink-bright); }
.kc-article th, .kc-article td { border-bottom-color: var(--x-line-quiet); }
.kc-article th, .kc-article td { overflow-wrap: break-word; hyphens: auto; } /* nicht mitten im Wort umbrechen (Glossar: „Anwendungsfa|ll“) */

/* 8 · Hinweis- und Warnboxen mit Reiter [allgemein] */
.kc-notice, .kc-legacy { position: relative; margin: calc(var(--x-tab-h) + 1.4rem) 0 1.4rem; padding: 1rem 1.15rem; border: 1px solid var(--x-blue-light); border-radius: var(--x-radius, 10px); background: var(--x-bg-terminal); }
.kc-notice::before, .kc-legacy::before { content: "Hinweis"; position: absolute; bottom: 100%; left: 14px; padding: 3px 12px 1px; border: 1px solid; border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--x-bg-terminal); color: var(--x-blue-light); font: 18px/1.3 var(--x-font-display); letter-spacing: .08em; text-transform: uppercase; }
.kc-notice.kc-warn { border-color: var(--x-sig-stop); }
.kc-notice.kc-warn::before { content: "Achtung"; color: var(--x-sig-stop); }

/* 9 · Abbildungen: Die Mermaid-SVGs sind für dunklen Grund gezeichnet (transparent, Linien #7dd3e8, Schrift creme).
   Auf heller Platte verschwinden die Linien; daher in beiden Modi eine Platte in ihrer Entwurfsfarbe #2a2420 [allgemein] */
.kc-figure { background: var(--x-bg-terminal); border-color: var(--x-line-quiet); }
.kc-diagram-scroll { padding: 16px; border-radius: var(--x-radius, 10px); background: #2a2420; }
.kc-figure .kc-diagram-scrollhint, .kc-figure figcaption { font-size: var(--x-fs-body-sm); }
.kc-figure details { font-size: var(--x-fs-body); }

/* 14 · Schrift: nichts unter 14 px */
.kc-button, .kc-footer { font-size: var(--x-fs-ui); }

/* 15 · Footer */
.kc-footer { max-width: 1160px; border-top-color: var(--x-line-hair); }
.kc-footer .linklike { min-height: 44px; color: var(--kc-accent); }

/* 3 · Unter 1000 px eine Spalte, Seitenleiste über dem Inhalt */
@media (max-width: 1000px) {
  .kc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 800px; padding: 0 16px; }
  .kc-sidebar.tabbed { position: relative; top: auto; padding: 0; }
  .kc-sidebar > details { max-height: none; overflow: visible; border: 0; background: none; }
  .kc-main.reading-frame { margin-top: calc(var(--x-tab-h) + var(--x-section-gap)); }
}
@media (max-width: 600px) { .kc-layout { padding: 0 12px; } .kc-main.reading-frame { padding: 20px 16px; } }

/* 16 · Licht an */
[data-mode=light] .kc-sidebar.tabbed { border-color: var(--x-line); }

/* 17 · Druck: hell, vollständig, ohne Navigation; Hinweise behalten den Reitertext */
@media print {
  html { background: #fff; }
  .kc-print, .kc-sidebar, .kc-toc, .kc-pagination, .kc-current-route, .resource-contact, .kc-footer nav, .kc-footer .linklike { display: none !important; }
  .kc-layout { display: block; max-width: none; padding: 0; }
  .kc-main.reading-frame { max-width: none; margin: 0; padding: 0; border: 0 !important; background: #fff !important; }
  .kc-table-scroll { overflow: visible; background: #fff; }
  .kc-article th { background: #eee; color: #000; }
  .kc-diagram-scroll { padding: 0; background: #fff; }
  .kc-notice, .kc-legacy { margin-top: 10mm; border-color: #777; background: #fff; break-inside: avoid; }
  .kc-notice::before, .kc-legacy::before { position: static; display: block; margin: 0 0 2mm; padding: 0; border: 0; background: none; color: #000; font: 700 9pt/1.3 var(--x-font-ui); letter-spacing: .06em; }
}