/* ========================================================================= MkDocs-Theme "kern-ux" - Bridge-Stylesheet ------------------------------------------------------------------------- Das eigentliche Design kommt aus dem KERN-Kit (kern-ux/vendor/kern/kern.min.css). Diese Datei "uebersetzt" nur das von MkDocs und Python-Markdown erzeugte Markup auf die KERN-Design-Token (--kern-*). Sie enthaelt KEINE eigenen Designwerte, sondern referenziert ausschliesslich KERN-Variablen - damit wirken heller/dunkler Modus und kuenftige KERN-Updates automatisch. Aufbau: 1. Grundgeruest und Layout 2. Sprunglink und Hilfen fuer Screenreader 3. Kopfbereich und Marke 4. Navigation (Seitenleiste) 5. Gliederung (rechte Spalte) 6. Brotkrumenpfad 7. Kopfleisten-Knoepfe (Design, Suche, Menue) 8. Fliesstext (.kux-prose) - Bruecke zur KERN-Typografie 9. Code und Syntaxhervorhebung 10. Tabellen 11. Hinweise (admonitions) 12. Aufklappbereiche (details) 13. Fussnoten 14. Zurueck / Weiter und Bearbeiten-Link 15. Suche 16. Fusszeile, Druck, Kontrastmodus, reduzierte Bewegung Merkposten zum Kit: * Jedes Element mit einer kern-*-Klasse setzt den "-contextual"-Satz auf Level 0 zurueck. Die ganze Seite bleibt deshalb bewusst auf Level 0; erhoehte Flaechen holen sich direkt --kern-color-layout-layer-surface- contextual statt kern-level-1 zu benutzen. * Ueber gibt es keine -contextual-Werte: body nutzt die nicht-kontextuellen Token. * kern.css setzt "*:not(i) { font-family: ... }" - eine Monospace-Regel braucht mindestens Spezifitaet (0,1,1), sonst verliert sie. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Grundgeruest und Layout ------------------------------------------------------------------------- */ :root { /* Pfeil nach unten, gleiche Form wie kern-icon--arrow-down. Einmal hier, damit ihn Hinweise und Aufklappbereiche teilen. */ --kux-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E"); } body.kux-body { color: var(--kern-color-layout-text-default, #131525); background-color: var(--kern-color-layout-background-default, #fff); margin: 0; min-height: 100vh; display: flex; flex-direction: column; } /* * Der Seitenrahmen: Zentrierung, Breitenbegrenzung, seitliches Polster. * * Bewusst OHNE .kern-container, obwohl der Kit dieselbe Aufgabe erfuellen * wuerde - aus zwei Gruenden: * * 1. Der Kit kappt .kern-container ab 576px auf 96% der Fensterbreite; auf * einem grossen Bildschirm ergaebe das eine unlesbar breite Seite. * 2. kern.css:12768 setzt ".kern-container:has(.kern-grid) { padding: 0 }". * Traegt der Seitenrahmen diese Klasse, verliert er sein Polster, sobald * IRGENDEIN Inhalt ein kern-grid enthaelt - der Inhalt griffe damit ins * Seitenlayout durch. Innerhalb des KERN-Layoutsystems ist die Regel * sinnvoll, fuer einen Dokumentationsrahmen nicht. */ .kux-shell { width: 100%; max-width: var(--kux-max-width, 90rem); margin-inline: auto; padding-inline: var(--kern-metric-space-default, 16px); box-sizing: border-box; } .kux-layout { flex: 1 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kern-metric-space-x-large, 32px); align-items: start; padding-top: var(--kern-metric-space-large, 24px); padding-bottom: var(--kern-metric-space-3x-large, 48px); } .kux-main { min-width: 0; outline: none; } .kux-sidebar, .kux-toc-rail { min-width: 0; } /* Ein einzelner langer String (URL, Kompositum, Dateiname) darf das Layout nicht auseinanderziehen. "anywhere" statt "break-word", weil nur das auch die intrinsische Mindestbreite senkt - und genau darauf reagieren Grid und Flex. */ .kux-prose, .kux-sidebar, .kux-toc, .kux-breadcrumb, .kux-prevnext, .kux-footer { overflow-wrap: anywhere; } /* Zweispaltig ab 64rem: Navigation + Inhalt. */ @media (min-width: 64rem) { .kux-layout { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--kern-metric-space-2x-large, 40px); } .kux-body--single .kux-layout { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); } } /* Dreispaltig ab 85rem: Navigation + Inhalt + Gliederung. */ @media (min-width: 85rem) { .kux-layout { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) minmax(0, 15rem); } } /* Die Gliederungsspalte erscheint erst, wenn dafuer Platz ist. */ .kux-toc-rail { display: none; } @media (min-width: 85rem) { .kux-toc-rail { display: block; } } /* Mitlaufende Spalten. Der Schalter kommt aus sticky_navigation. */ [data-kux-sticky] .kux-sidebar__inner, [data-kux-sticky] .kux-toc { position: sticky; top: var(--kern-metric-space-default, 16px); max-height: calc(100vh - var(--kern-metric-space-x-large, 32px)); overflow-y: auto; overscroll-behavior: contain; } /* ------------------------------------------------------------------------- 2. Sprunglink und Hilfen fuer Screenreader Die Klasse .kern-sr-only bringt der Kit selbst mit - hier nur der Sprunglink, der sichtbar werden muss, sobald er den Fokus hat. ------------------------------------------------------------------------- */ .kux-skip-link { position: absolute; left: -9999rem; top: 0; z-index: 1000; } .kux-skip-link:focus { left: var(--kern-metric-space-small, 8px); top: var(--kern-metric-space-small, 8px); } /*
bekommt den Fokus nur programmatisch (Sprunglink) - ein Fokusring waere hier irrefuehrend. */ .kux-main:focus { outline: none; } /* ------------------------------------------------------------------------- 3. Kopfbereich und Marke ------------------------------------------------------------------------- */ .kux-header { border-bottom: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #c0c3d5); background-color: var(--kern-color-layout-background-default, #fff); } .kux-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kern-metric-space-default, 16px); padding-top: var(--kern-metric-space-small, 8px); padding-bottom: var(--kern-metric-space-small, 8px); } .kux-branding__link { display: flex; align-items: center; gap: var(--kern-metric-space-small, 8px); color: inherit; text-decoration: none; } .kux-branding__logo { max-height: var(--kern-metric-dimension-large, 32px); width: auto; } .kux-branding__text { display: flex; flex-direction: column; } .kux-branding__title { font-size: var(--kern-typography-font-size-medium-adaptive, 21px); font-weight: var(--kern-typography-font-weight-title-default, 600); line-height: 1.2; } .kux-branding__description { color: var(--kern-color-layout-text-muted-contextual, #404565); font-size: var(--kern-typography-font-size-small-static, 16px); } .kux-header__actions { display: flex; align-items: center; gap: var(--kern-metric-space-small, 8px); } /* ------------------------------------------------------------------------- 4. Navigation (Seitenleiste) ------------------------------------------------------------------------- */ .kux-sidebar__title { color: var(--kern-color-layout-text-muted-contextual, #404565); margin: 0 0 var(--kern-metric-space-small, 8px); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--kern-typography-font-size-small-static, 16px); } .kux-nav__list { list-style: none; margin: 0; padding: 0; } /* Einrueckung erst ab der zweiten Ebene - die oberste Ebene sitzt buendig. */ .kux-nav__list--l2, .kux-nav__list--l3, .kux-nav__list--l4, .kux-nav__list--l5 { padding-left: var(--kern-metric-space-default, 16px); border-left: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #c0c3d5); margin-left: var(--kern-metric-space-x-small, 4px); } .kux-nav__link, .kux-nav__summary { display: flex; align-items: center; gap: var(--kern-metric-space-x-small, 4px); /* 44px Mindesthoehe: bequeme Trefferflaeche auch am Touchscreen. */ min-height: var(--kern-metric-dimension-large, 32px); padding: var(--kern-metric-space-x-small, 4px) var(--kern-metric-space-small, 8px); border-radius: var(--kern-metric-border-radius-default, 4px); border-left: var(--kern-metric-border-width-default, 2px) solid transparent; text-decoration: none; color: var(--kern-color-layout-text-default-contextual, #131525); font-size: var(--kern-typography-font-size-small-static, 16px); line-height: 1.4; } .kux-nav__link:hover, .kux-nav__summary:hover { background-color: var(--kern-color-action-state-indicator-tint-hover-opacity, rgba(32, 68, 170, 0.08)); } /* Aktuelle Seite: Farbe allein reicht nicht (WCAG 1.4.1), deshalb zusaetzlich Balken und Schriftschnitt. */ .kux-nav__link.is-current { color: var(--kern-color-action-default-contextual, #2044aa); border-left-color: var(--kern-color-action-default-contextual, #2044aa); font-weight: var(--kern-typography-font-weight-body-strong, 600); background-color: var(--kern-color-layout-layer-surface-contextual, #f7f7f9); } .kux-nav__group { margin: 0; } .kux-nav__summary { cursor: pointer; justify-content: space-between; font-weight: var(--kern-typography-font-weight-body-strong, 600); list-style: none; } /* Eigenes Dreieck des Browsers entfernen - wir zeichnen ein KERN-Icon. */ .kux-nav__summary::-webkit-details-marker { display: none; } .kux-nav__summary::marker { content: ''; } .kux-nav__chevron { flex: none; transition: transform 0.15s ease-in-out; } .kux-nav__group[open] > .kux-nav__summary .kux-nav__chevron { transform: rotate(180deg); } .kux-nav__item--section.is-active > .kux-nav__group > .kux-nav__summary { color: var(--kern-color-layout-text-default-contextual, #131525); } .kux-nav__link--external .kern-icon { flex: none; } /* Gliederung der aktiven Seite in der Seitenleiste (titles_only: false). */ .kux-nav__toc { list-style: none; margin: var(--kern-metric-space-2x-small, 2px) 0 var(--kern-metric-space-small, 8px); padding-left: var(--kern-metric-space-default, 16px); border-left: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #c0c3d5); } /* Unter 64rem klappt die Navigation ueber den Knopf auf - im Textfluss, ohne Overlay: kein Fokusfang, keine Scroll-Sperre noetig. */ @media (max-width: 63.999rem) { .kux-sidebar { display: none; } .kux-sidebar.is-open { display: block; padding-bottom: var(--kern-metric-space-default, 16px); border-bottom: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #c0c3d5); } } @media (min-width: 64rem) { .kux-nav-toggle { display: none; } } /* ------------------------------------------------------------------------- 5. Gliederung (rechte Spalte) ------------------------------------------------------------------------- */ .kux-toc__title { color: var(--kern-color-layout-text-muted-contextual, #404565); margin: 0 0 var(--kern-metric-space-small, 8px); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--kern-typography-font-size-small-static, 16px); } .kux-toc__list { list-style: none; margin: 0; padding: 0; } .kux-toc__list--l2 { padding-left: var(--kern-metric-space-default, 16px); } .kux-toc__list--l3, .kux-toc__list--l4 { padding-left: var(--kern-metric-space-default, 16px); } .kux-toc__link { display: block; padding: var(--kern-metric-space-2x-small, 2px) var(--kern-metric-space-small, 8px); border-left: var(--kern-metric-border-width-default, 2px) solid transparent; color: var(--kern-color-layout-text-muted-contextual, #404565); font-size: var(--kern-typography-font-size-small-static, 16px); line-height: 1.4; text-decoration: none; } .kux-toc__link:hover { color: var(--kern-color-action-default-contextual, #2044aa); text-decoration: underline; } .kux-toc__link.is-active { color: var(--kern-color-layout-text-default-contextual, #131525); border-left-color: var(--kern-color-action-default-contextual, #2044aa); font-weight: var(--kern-typography-font-weight-body-strong, 600); } /* ------------------------------------------------------------------------- 6. Brotkrumenpfad ------------------------------------------------------------------------- */ .kux-breadcrumb { margin-bottom: var(--kern-metric-space-default, 16px); } .kux-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kern-metric-space-x-small, 4px); list-style: none; margin: 0; padding: 0; color: var(--kern-color-layout-text-muted-contextual, #404565); font-size: var(--kern-typography-font-size-small-static, 16px); } /* Trenner als Text und nicht als Icon: er darf nicht vorgelesen werden und soll beim Vergroessern mitwachsen. */ .kux-breadcrumb__item + .kux-breadcrumb__item::before { content: '/'; margin-right: var(--kern-metric-space-x-small, 4px); color: var(--kern-color-layout-text-muted-contextual, #404565); } .kux-breadcrumb__link { color: var(--kern-color-action-default-contextual, #2044aa); } /* ------------------------------------------------------------------------- 7. Kopfleisten-Knoepfe ------------------------------------------------------------------------- */ @media (max-width: 47.999rem) { .kern-sr-only-mobile { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* ------------------------------------------------------------------------- 8. Fliesstext - Bruecke zur KERN-Typografie ------------------------------------------------------------------------- */ .kux-prose { color: var(--kern-color-layout-text-default-contextual, #131525); font-size: var(--kern-typography-font-size-medium-static, 18px); line-height: 1.6; /* Zeilenlaenge begrenzen: WCAG 1.4.8 nennt hoechstens 80 Zeichen. */ max-width: var(--kux-content-width, 50rem); } .kux-prose > *:first-child { margin-top: 0; } .kux-prose > *:last-child { margin-bottom: 0; } .kux-prose p, .kux-prose ul, .kux-prose ol, .kux-prose dl, .kux-prose table, .kux-prose figure, .kux-prose pre, .kux-prose blockquote, .kux-prose .admonition, .kux-prose details, .kux-prose .kux-code { margin: 0 0 var(--kern-metric-space-default, 16px); } .kux-prose h1, .kux-prose h2, .kux-prose h3, .kux-prose h4, .kux-prose h5, .kux-prose h6 { color: var(--kern-color-layout-text-default-contextual, #131525); font-weight: var(--kern-typography-font-weight-heading-default, 600); line-height: 1.25; margin: var(--kern-metric-space-x-large, 32px) 0 var(--kern-metric-space-small, 8px); scroll-margin-top: var(--kern-metric-space-default, 16px); } .kux-prose h1 { font-size: var(--kern-typography-font-size-x-large-adaptive, 32px); } .kux-prose h2 { font-size: var(--kern-typography-font-size-large-adaptive, 26px); } .kux-prose h3 { font-size: var(--kern-typography-font-size-medium-adaptive, 21px); } .kux-prose h4 { font-size: var(--kern-typography-font-size-medium-static, 18px); } .kux-prose h5, .kux-prose h6 { font-size: var(--kern-typography-font-size-small-static, 16px); } .kux-prose a { color: var(--kern-color-action-default-contextual, #2044aa); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .kux-prose a:hover { text-decoration-thickness: 3px; } .kux-prose a:visited { color: var(--kern-color-action-visited-contextual, #75009e); } /* Der Ankerlink aus der toc-Erweiterung. Nie display:none - er muss mit der Tastatur erreichbar bleiben; er tritt nur optisch zurueck. */ .kux-prose .headerlink { margin-left: var(--kern-metric-space-x-small, 4px); opacity: 0; text-decoration: none; font-weight: normal; } .kux-prose :is(h1, h2, h3, h4, h5, h6):hover .headerlink, .kux-prose .headerlink:focus-visible { opacity: 1; } .kux-prose ul, .kux-prose ol { padding-left: var(--kern-metric-space-x-large, 32px); } .kux-prose li + li { margin-top: var(--kern-metric-space-2x-small, 2px); } .kux-prose li > ul, .kux-prose li > ol { margin-top: var(--kern-metric-space-2x-small, 2px); margin-bottom: 0; } /* Aufgabenlisten (pymdownx.tasklist) ohne haengenden Aufzaehlungspunkt. */ .kux-prose .task-list { list-style: none; padding-left: var(--kern-metric-space-small, 8px); } .kux-prose .task-list-item { display: flex; align-items: baseline; gap: var(--kern-metric-space-small, 8px); } .kux-prose dt { font-weight: var(--kern-typography-font-weight-heading-default, 600); } .kux-prose dd { margin: 0 0 var(--kern-metric-space-small, 8px) var(--kern-metric-space-x-large, 32px); } .kux-prose dd:last-child { margin-bottom: 0; } .kux-prose blockquote { padding: var(--kern-metric-space-default, 16px) var(--kern-metric-space-large, 24px); border-left: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-action-default-contextual, #2044aa); background-color: var(--kern-color-layout-layer-surface-contextual, #f7f7f9); } .kux-prose blockquote > :last-child { margin-bottom: 0; } .kux-prose blockquote cite { display: block; margin-top: var(--kern-metric-space-small, 8px); font-size: var(--kern-typography-font-size-small-static, 16px); font-style: normal; color: var(--kern-color-layout-text-muted-contextual, #404565); } .kux-prose hr { border: 0; height: var(--kern-metric-border-width-light, 1px); background-color: var(--kern-color-decorative-border-contextual, #c0c3d5); margin: var(--kern-metric-space-x-large, 32px) 0; } .kux-prose img { height: auto; max-width: 100%; border-radius: var(--kern-metric-border-radius-default, 4px); } .kux-prose figure { max-width: 100%; } .kux-prose figcaption { margin-top: var(--kern-metric-space-x-small, 4px); color: var(--kern-color-layout-text-muted-contextual, #404565); font-size: var(--kern-typography-font-size-small-static, 16px); } .kux-prose :is(iframe, video, embed, object) { max-width: 100%; } .kux-prose abbr[title] { text-decoration: underline dotted; cursor: help; } .kux-prose mark { background-color: var(--kern-color-feedback-warning-background-contextual, #fdf3d7); color: inherit; padding: 0 var(--kern-metric-space-2x-small, 2px); } .kux-prose kbd { border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #c0c3d5); border-bottom-width: var(--kern-metric-border-width-default, 2px); } /* ------------------------------------------------------------------------- 9. Code und Syntaxhervorhebung kern.css setzt "*:not(i) { font-family: ... }" mit Spezifitaet (0,0,1). Eine Regel "code { font-family }" wuerde deshalb verlieren - die Selektoren hier liegen bei mindestens (0,1,1). Der Kit liefert keine Monospace-Schrift mit; das Token --kern-typography-font-family-fira-mono zeigt ins Leere. Deshalb ein Systemstapel. ------------------------------------------------------------------------- */ .kux-prose code, .kux-prose kbd, .kux-prose samp, .kux-prose pre, .kux-prose pre code { font-family: ui-monospace, 'Cascadia Code', 'Fira Code', 'Fira Mono', Consolas, 'DejaVu Sans Mono', monospace; } .kux-prose code, .kux-prose kbd, .kux-prose samp { font-size: 0.9em; background-color: var(--kern-color-layout-layer-surface-contextual, #f7f7f9); padding: 0.1em 0.35em; border-radius: var(--kern-metric-border-radius-small, 2px); } /* .kux-prose vererbt overflow-wrap: anywhere. Chrome bricht damit auch in einem 
 mitten im Wort um - eine lange Kommandozeile stuende dann
   still umbrochen da, ohne dass der Umbruch als solcher erkennbar waere.
   Codebloecke sollen stattdessen scrollen; kern-ux.js macht sie dafuer mit
   der Tastatur erreichbar (WCAG 2.1.1). Inline-Code behaelt "anywhere",
   damit ein langer Pfad im Fliesstext das Layout nicht sprengt. */
.kux-prose pre,
.kux-prose pre code {
  overflow-wrap: normal;
  word-break: normal;
}

.kux-prose pre {
  background-color: var(--kern-color-layout-layer-surface-contextual, #f7f7f9);
  border: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-decorative-border-contextual, #c0c3d5);
  border-radius: var(--kern-metric-border-radius-default, 4px);
  padding: var(--kern-metric-space-default, 16px);
  overflow-x: auto;
  font-size: var(--kern-typography-font-size-small-static, 16px);
  line-height: 1.5;
}

.kux-prose pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* highlight.js faerbt nur den Text; Flaeche, Polster und Scrollen bleiben bei
   uns, damit Codebloecke zum uebrigen Design passen.
   Wichtig ist das dritte Feld: die Stylesheets von highlight.js setzen
   ".hljs { display: block; overflow-x: auto }" und machen damit das 
   zum Scrollcontainer. Dann scrollt der Block innerhalb seines Rahmens, und
   das 
 meldet keinen Ueberlauf mehr - kern-ux.js koennte ihn nicht als
   Tastaturregion auszeichnen (WCAG 2.1.1). Es bleibt deshalb bei genau einem
   Scrollcontainer je Block: dem 
. */
.kux-prose pre code.hljs {
  background: transparent;
  padding: 0;
  overflow: visible;
}

/* Serverseitige Hervorhebung (codehilite / pymdownx.highlight). Der aeussere
   Container traegt Rahmen und Flaeche, das innere 
 nicht noch einmal. */
.kux-prose .codehilite,
.kux-prose .highlight {
  background-color: var(--kern-color-layout-layer-surface-contextual, #f7f7f9);
  border: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-decorative-border-contextual, #c0c3d5);
  border-radius: var(--kern-metric-border-radius-default, 4px);
  margin: 0 0 var(--kern-metric-space-default, 16px);
}

.kux-prose .codehilite > pre,
.kux-prose .highlight > pre,
.kux-prose .codehilitetable pre,
.kux-prose .highlighttable pre {
  border: 0;
  margin: 0;
  background: none;
}

/* Zeilennummern-Variante: Pygments legt zwei Zellen nebeneinander. */
.kux-prose .codehilitetable,
.kux-prose .highlighttable {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.kux-prose .codehilitetable td,
.kux-prose .highlighttable td {
  border: 0;
  padding: 0;
  vertical-align: top;
}

.kux-prose .linenos,
.kux-prose .linenodiv {
  color: var(--kern-color-layout-text-muted-contextual, #404565);
  border-right: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-decorative-border-contextual, #c0c3d5);
  user-select: none;
}

.kux-prose .linenos pre,
.kux-prose .linenodiv pre {
  padding-right: var(--kern-metric-space-small, 8px);
}

/* Wrapper um 
 herum, den kern-ux.js fuer den Kopierknopf einzieht. */
.kux-code {
  position: relative;
}

.kux-code__copy {
  position: absolute;
  top: var(--kern-metric-space-x-small, 4px);
  right: var(--kern-metric-space-x-small, 4px);
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.kux-code:hover .kux-code__copy,
.kux-code__copy:focus-visible,
.kux-code__copy.is-copied {
  opacity: 1;
}

/* Ohne Zeigegeraet gibt es kein Hover - dort bleibt der Knopf sichtbar. */
@media (hover: none) {
  .kux-code__copy {
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------
   10. Tabellen

   Markdown kann den Wrapper .kern-table-responsive nicht erzeugen und setzt
   keine Klassen an th/td. Deshalb wird das  selbst zum Scrollbereich
   und die Zellenregeln bilden .kern-table__cell / __header nach.
   ------------------------------------------------------------------------- */

.kux-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--kern-typography-font-size-small-static, 16px);
}

.kux-prose th,
.kux-prose td {
  border-bottom: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-layout-border-contextual, #6a6f8e);
  padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px);
  text-align: left;
  vertical-align: top;
}

/* .kux-prose vererbt overflow-wrap: anywhere - in Zellen zerlegt das sonst
   auch kurze Spaltenueberschriften mitten im Wort. break-word bricht nur,
   wenn ein Wort allein nicht passt. */
.kux-prose th,
.kux-prose td {
  overflow-wrap: break-word;
}

.kux-prose thead th {
  background-color: var(--kern-color-layout-layer-surface-contextual, #f7f7f9);
  font-weight: var(--kern-typography-font-weight-body-strong, 600);
}

.kux-prose caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--kern-metric-space-small, 8px);
  color: var(--kern-color-layout-text-muted-contextual, #404565);
}

/* -------------------------------------------------------------------------
   11. Hinweise (admonitions)

   Nachbau von .kern-alert: farbige Flaeche mit Kopfzeile, darunter ein
   abgesetzter Koerper. Die Variante bestimmt die Farbe; das Icon setzt
   kern-ux.js ein (KERN liefert seine Symbole als mask-image, ein Nachbau
   wuerde die Kit-Grafiken in diese Datei kopieren).

   Die Erweiterung "admonition" erzeugt 
,
   "pymdownx.details" dagegen 
. Die Variantenliste steht
   deshalb ausgeschrieben - ein blosses details[class] wuerde auch Komponenten
   des Kits treffen, etwa 
.
   ------------------------------------------------------------------------- */

.kux-prose .admonition,
.kux-prose details:is(.note, .info, .todo, .seealso, .tip, .hint, .success,
  .check, .done, .important, .warning, .caution, .attention, .danger, .error,
  .failure, .fail, .missing, .bug, .abstract, .summary, .question, .help,
  .faq, .example, .quote, .cite) {
  --kux-admonition-color: var(--kern-color-feedback-info-contextual, #2044aa);
  --kux-admonition-background: var(--kern-color-feedback-info-background-contextual, #e7ecfb);
  background-color: var(--kux-admonition-background);
  border-radius: var(--kern-metric-border-radius-default, 4px);
  outline: var(--kern-metric-border-width-default, 2px) solid var(--kux-admonition-color);
  outline-offset: 0;
  padding: 0;
}

.kux-prose .admonition-title,
.kux-prose details:is(.note, .info, .todo, .seealso, .tip, .hint, .success,
  .check, .done, .important, .warning, .caution, .attention, .danger, .error,
  .failure, .fail, .missing, .bug, .abstract, .summary, .question, .help,
  .faq, .example, .quote, .cite) > summary {
  display: flex;
  align-items: center;
  gap: var(--kern-metric-space-small, 8px);
  /* Hoehe des Icon-Kastens vorhalten, damit das nachtraeglich eingesetzte
     Icon nichts verschiebt. */
  min-height: var(--kern-metric-dimension-large, 32px);
  margin: 0;
  padding: var(--kern-metric-space-default, 16px);
  font-weight: var(--kern-typography-font-weight-heading-default, 600);
  color: var(--kern-color-layout-text-default-contextual, #131525);
  list-style: none;
}

/* Der Koerper: ruhige Flaeche innerhalb der farbigen Umrandung. */
.kux-prose .admonition > :not(.admonition-title),
.kux-prose details:is(.note, .info, .todo, .seealso, .tip, .hint, .success,
  .check, .done, .important, .warning, .caution, .attention, .danger, .error,
  .failure, .fail, .missing, .bug, .abstract, .summary, .question, .help,
  .faq, .example, .quote, .cite) > :not(summary) {
  background-color: var(--kern-color-layout-background-default-contextual, #fff);
  margin: 0;
  padding: 0 var(--kern-metric-space-default, 16px);
}

.kux-prose .admonition > :not(.admonition-title):first-of-type,
.kux-prose details:is(.note, .info, .todo, .seealso, .tip, .hint, .success,
  .check, .done, .important, .warning, .caution, .attention, .danger, .error,
  .failure, .fail, .missing, .bug, .abstract, .summary, .question, .help,
  .faq, .example, .quote, .cite) > :not(summary):first-of-type {
  padding-top: var(--kern-metric-space-default, 16px);
}

.kux-prose .admonition > :last-child:not(.admonition-title),
.kux-prose details:is(.note, .info, .todo, .seealso, .tip, .hint, .success,
  .check, .done, .important, .warning, .caution, .attention, .danger, .error,
  .failure, .fail, .missing, .bug, .abstract, .summary, .question, .help,
  .faq, .example, .quote, .cite) > :last-child:not(summary) {
  padding-bottom: var(--kern-metric-space-default, 16px);
  border-bottom-left-radius: var(--kern-metric-border-radius-default, 4px);
  border-bottom-right-radius: var(--kern-metric-border-radius-default, 4px);
}

.kux-admonition__icon {
  flex: none;
  background-color: var(--kux-admonition-color);
}

/* Varianten. Die Zuordnung entspricht der Tabelle in kern-ux.js. */
.kux-prose :is(.admonition, details).tip,
.kux-prose :is(.admonition, details).hint,
.kux-prose :is(.admonition, details).success,
.kux-prose :is(.admonition, details).check,
.kux-prose :is(.admonition, details).done,
.kux-prose :is(.admonition, details).important {
  --kux-admonition-color: var(--kern-color-feedback-success-contextual, #17663a);
  --kux-admonition-background: var(--kern-color-feedback-success-background-contextual, #e3f2e9);
}

.kux-prose :is(.admonition, details).warning,
.kux-prose :is(.admonition, details).caution,
.kux-prose :is(.admonition, details).attention {
  --kux-admonition-color: var(--kern-color-feedback-warning-contextual, #8a5a00);
  --kux-admonition-background: var(--kern-color-feedback-warning-background-contextual, #fdf3d7);
}

.kux-prose :is(.admonition, details).danger,
.kux-prose :is(.admonition, details).error,
.kux-prose :is(.admonition, details).failure,
.kux-prose :is(.admonition, details).fail,
.kux-prose :is(.admonition, details).missing,
.kux-prose :is(.admonition, details).bug {
  --kux-admonition-color: var(--kern-color-feedback-danger-contextual, #b3261e);
  --kux-admonition-background: var(--kern-color-feedback-danger-background-contextual, #fbe6e5);
}

.kux-prose :is(.admonition, details).abstract,
.kux-prose :is(.admonition, details).summary,
.kux-prose :is(.admonition, details).question,
.kux-prose :is(.admonition, details).help,
.kux-prose :is(.admonition, details).faq,
.kux-prose :is(.admonition, details).example,
.kux-prose :is(.admonition, details).quote,
.kux-prose :is(.admonition, details).cite {
  --kux-admonition-color: var(--kern-color-layout-border-contextual, #6a6f8e);
  --kux-admonition-background: var(--kern-color-layout-layer-surface-contextual, #f7f7f9);
}

/* Aufklappbarer Hinweis (pymdownx.details): anklickbare Kopfzeile mit Pfeil,
   damit erkennbar ist, dass sich hier etwas oeffnen laesst. */
.kux-prose details:is(.note, .info, .todo, .seealso, .tip, .hint, .success,
  .check, .done, .important, .warning, .caution, .attention, .danger, .error,
  .failure, .fail, .missing, .bug, .abstract, .summary, .question, .help,
  .faq, .example, .quote, .cite) > summary {
  cursor: pointer;
}

.kux-prose details:is(.note, .info, .todo, .seealso, .tip, .hint, .success,
  .check, .done, .important, .warning, .caution, .attention, .danger, .error,
  .failure, .fail, .missing, .bug, .abstract, .summary, .question, .help,
  .faq, .example, .quote, .cite) > summary::-webkit-details-marker {
  display: none;
}

.kux-prose details:is(.note, .info, .todo, .seealso, .tip, .hint, .success,
  .check, .done, .important, .warning, .caution, .attention, .danger, .error,
  .failure, .fail, .missing, .bug, .abstract, .summary, .question, .help,
  .faq, .example, .quote, .cite) > summary::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-default, 24px);
  background-color: currentColor;
  mask: var(--kux-chevron) no-repeat center / contain;
  -webkit-mask: var(--kux-chevron) no-repeat center / contain;
  transition: transform 0.15s ease-in-out;
}

.kux-prose details[open]:is(.note, .info, .todo, .seealso, .tip, .hint, .success,
  .check, .done, .important, .warning, .caution, .attention, .danger, .error,
  .failure, .fail, .missing, .bug, .abstract, .summary, .question, .help,
  .faq, .example, .quote, .cite) > summary::after {
  transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   12. Aufklappbereiche ohne Variante (schlichtes 
)
   Optik nach dem Vorbild von .kern-accordion.
   ------------------------------------------------------------------------- */

.kux-prose details:not([class]) {
  border-top: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-decorative-border-contextual, #c0c3d5);
  border-bottom: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-decorative-border-contextual, #c0c3d5);
}

.kux-prose details:not([class]) > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kern-metric-space-small, 8px);
  padding: var(--kern-metric-space-default, 16px) 0;
  cursor: pointer;
  font-weight: var(--kern-typography-font-weight-heading-default, 600);
  color: var(--kern-color-action-default-contextual, #2044aa);
}

.kux-prose details:not([class]) > summary::after {
  content: '';
  flex: none;
  width: var(--kern-metric-dimension-default, 24px);
  height: var(--kern-metric-dimension-default, 24px);
  background-color: currentColor;
  mask: var(--kux-chevron) no-repeat center / contain;
  -webkit-mask: var(--kux-chevron) no-repeat center / contain;
  transition: transform 0.15s ease-in-out;
}

.kux-prose details:not([class])[open] > summary::after {
  transform: rotate(180deg);
}

.kux-prose details:not([class]) > :last-child {
  margin-bottom: var(--kern-metric-space-default, 16px);
}

/* -------------------------------------------------------------------------
   13. Fussnoten
   ------------------------------------------------------------------------- */

.kux-prose .footnote {
  margin-top: var(--kern-metric-space-x-large, 32px);
  padding-top: var(--kern-metric-space-default, 16px);
  border-top: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-decorative-border-contextual, #c0c3d5);
  color: var(--kern-color-layout-text-muted-contextual, #404565);
  font-size: var(--kern-typography-font-size-small-static, 16px);
}

.kux-prose .footnote ol {
  margin: 0;
}

.kux-prose .footnote-ref {
  text-decoration: none;
  padding: 0 var(--kern-metric-space-2x-small, 2px);
}

.kux-prose .footnote-backref {
  text-decoration: none;
  /* Ausreichend grosse Trefferflaeche fuer den Ruecksprung. */
  display: inline-block;
  min-width: var(--kern-metric-dimension-default, 24px);
  text-align: center;
}

/* Sprungziel sichtbar machen. */
.kux-prose .footnote li:target,
.kux-prose sup[id]:target {
  background-color: var(--kern-color-feedback-info-background-contextual, #e7ecfb);
  border-radius: var(--kern-metric-border-radius-small, 2px);
}

/* -------------------------------------------------------------------------
   14. Zurueck / Weiter und Bearbeiten-Link
   ------------------------------------------------------------------------- */

.kux-edit-link {
  margin-top: var(--kern-metric-space-large, 24px);
}

.kux-prevnext {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kern-metric-space-default, 16px);
  margin-top: var(--kern-metric-space-x-large, 32px);
  padding-top: var(--kern-metric-space-default, 16px);
  border-top: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-decorative-border-contextual, #c0c3d5);
}

.kux-prevnext__link {
  display: flex;
  align-items: center;
  gap: var(--kern-metric-space-small, 8px);
  /* min-width: 0 - sonst laesst der Flex-Default lange Titel ueberlaufen. */
  flex: 1 1 16rem;
  min-width: 0;
  padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px);
  border: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-decorative-border-contextual, #c0c3d5);
  border-radius: var(--kern-metric-border-radius-default, 4px);
  color: var(--kern-color-action-default-contextual, #2044aa);
  text-decoration: none;
}

.kux-prevnext__link:hover {
  background-color: var(--kern-color-layout-layer-surface-contextual, #f7f7f9);
}

.kux-prevnext__link--next {
  justify-content: flex-end;
  text-align: right;
  margin-left: auto;
}

.kux-prevnext__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kux-prevnext__label {
  color: var(--kern-color-layout-text-muted-contextual, #404565);
  font-size: var(--kern-typography-font-size-small-static, 16px);
}

.kux-prevnext__title {
  font-weight: var(--kern-typography-font-weight-body-strong, 600);
}

/* -------------------------------------------------------------------------
   15. Suche
   ------------------------------------------------------------------------- */

.kux-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--kern-metric-space-small, 8px);
}

.kux-search__field {
  flex: 1 1 16rem;
  min-width: 0;
}

.kux-search-dialog {
  width: min(46rem, 92vw);
  max-width: 92vw;
  border: 0;
  border-radius: var(--kern-metric-border-radius-large, 8px);
  padding: 0;
}

.kux-search-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.kux-search-dialog .kern-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kern-metric-space-default, 16px);
}

/* Trefferliste - genau das Markup, das search/main.js erzeugt:
    */
.kux-search__results {
  margin-top: var(--kern-metric-space-default, 16px);
  max-height: 60vh;
  overflow-y: auto;
}

.kux-search__results article {
  padding: var(--kern-metric-space-small, 8px) 0;
  border-top: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-decorative-border-contextual, #c0c3d5);
}

.kux-search__results article:first-child {
  border-top: 0;
}

.kux-search__results h3 {
  margin: 0 0 var(--kern-metric-space-2x-small, 2px);
  font-size: var(--kern-typography-font-size-medium-static, 18px);
}

.kux-search__results h3 a {
  color: var(--kern-color-action-default-contextual, #2044aa);
}

.kux-search__results p {
  margin: 0;
  color: var(--kern-color-layout-text-muted-contextual, #404565);
  font-size: var(--kern-typography-font-size-small-static, 16px);
}

.kux-search__hint {
  color: var(--kern-color-layout-text-muted-contextual, #404565);
  font-size: var(--kern-typography-font-size-small-static, 16px);
}

/* -------------------------------------------------------------------------
   16. Fusszeile, Druck, Kontrastmodus, reduzierte Bewegung
   ------------------------------------------------------------------------- */

.kux-footer {
  margin-top: auto;
  background-color: var(--kern-color-layout-layer-surface-contextual, #f7f7f9);
  border-top: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-decorative-border-contextual, #c0c3d5);
}

.kux-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--kern-metric-space-small, 8px);
  padding-top: var(--kern-metric-space-x-large, 32px);
  padding-bottom: var(--kern-metric-space-x-large, 32px);
}

.kux-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kern-metric-space-default, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kux-footer__meta {
  color: var(--kern-color-layout-text-muted-contextual, #404565);
  font-size: var(--kern-typography-font-size-small-static, 16px);
}

.kux-footer__meta p {
  margin: 0;
}

@media print {
  .kux-header__actions,
  .kux-sidebar,
  .kux-toc-rail,
  .kux-skip-link,
  .kux-prevnext,
  .kux-code__copy,
  .kux-search-dialog {
    display: none !important;
  }

  .kux-prose {
    max-width: none;
  }

  .kux-prose details {
    /* Im Druck ist zugeklappter Inhalt verlorener Inhalt. */
    display: block;
  }

  .kux-prose details > *:not(summary) {
    display: block !important;
  }

  .kux-prose a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    word-break: break-all;
  }
}

@media (forced-colors: active) {
  .kux-nav__link.is-current,
  .kux-toc__link.is-active {
    border-left-color: Highlight;
  }

  .kux-prose .admonition,
  .kux-prose details {
    outline-color: CanvasText;
  }

  .kux-admonition__icon {
    background-color: CanvasText;
  }

  .kux-prose th,
  .kux-prose td {
    border-bottom-color: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kux-nav__chevron,
  .kux-code__copy,
  .kux-prose details:not([class]) > summary::after {
    transition: none;
  }
}