/*
 * ZEDAL Technical Documentation — Material im Rahmen des neuen Portal-Designs.
 *
 * Arbeitsteilung mit stylesheets/synqony_brand.css:
 *   synqony_brand.css = die Markenschicht des ZEDAL-Portals, unverändert
 *                       übernommen (nur die Font-Pfade sind umgebogen). Sie
 *                       setzt ausschließlich Custom Properties und lädt die
 *                       Hausschrift — keine einzige Regel auf ein Element.
 *   extra.css         = diese Datei: die dunkle Darstellung und der Rahmen des
 *                       Portals und Materials Bauteile auf diesen Tokens.
 *
 * Der Aufbau folgt dem neuen Design des Portals: Kopf, Reiter und Seitenmenü
 * bilden einen Rahmen auf dem Markenverlauf, der Inhalt liegt als umrandete
 * Fläche darin. Die Reiter tragen die Bereiche der Doku, das Seitenmenü die
 * Seiten des aktuellen Bereichs. Vorlage im Portal: htdocs/css/
 * display_view.css, Abschnitte „Das Seitenmenue" und „Verlauf als Rahmen,
 * Uebersicht als Karte davor", die Kacheln in zedal.css, dazu
 * htdocs/css/darstellung/dunkel.css und die Direktsuche in sideBar.css.
 *
 * Eine bewusste Abweichung vom Portal: Fließtext ist Roboto statt Arial. Eine
 * Doku ist Lesetext; Chillax trägt wie im Portal Überschriften, Menü und
 * Knöpfe.
 *
 * Material rechnet mit 1rem = 20px. Werte aus dem Portal sind deshalb durch
 * 20 geteilt (264px Seitenmenü = 13.2rem).
 */

/* ===================================================================
   Schrift
   =================================================================== */

/* Chillax kommt aus synqony_brand.css (vier Schnitte, wie im Portal).
   Der Fließtext ist Roboto — Material lädt es selbst. */
:root {
  --syn-font-doc: "Roboto", system-ui, sans-serif;
}

/* ===================================================================
   Dunkle Darstellung — die Werte des Portals
   ===================================================================

   Zwei Schichten wie im Portal: zuerst die dunklen Tokens aus
   darstellung/dunkel.css, darüber die Werte, mit denen der Rahmen die Fläche
   grafitgrau stellt (display_view.css, html[data-darstellung="dunkel"]:has(
   #seitenmenue)). Beide Blöcke sind wörtlich übernommen; bei Änderungen im
   Portal hier neu ziehen. */

[data-md-color-scheme="slate"] {
  color-scheme: dark;
  --syn-bg: #091123;
  --syn-bg-muted: #0d3440;
  --syn-surface: #0a2d37;
  --syn-surface-sunken: #091123;
  --syn-primary-soft: #0d3440;
  --syn-bar-ink-muted: #eef9f6;
  --syn-bar-field-ink: #091123;
  --syn-footer-rule: rgba(15, 216, 177, .4);
  --syn-primary-tint: #1a4540;
  --syn-watermark: #22524b;
  --syn-primary-ink: #6fe6cf;
  --syn-text: #e6ecf2;
  --syn-text-secondary: #c4cdd8;
  --syn-text-muted: #a3afbe;
  --syn-text-brand: #e6ecf2;
  --syn-placeholder: #8793a1;
  --syn-link: #3fdcbc;
  --syn-link-hover: #ffffff;
  --syn-border: #285563;
  --syn-line: #285563;
  --syn-line-strong: #376674;
  --syn-line-field: #7f96a0;
  --syn-row-stripe: #0d3440;
  --syn-row-hover: #114050;
  --syn-row-hover-strong: #154b5b;
  --syn-danger: #ff8f84;
  --syn-danger-bg: #3b1a1a;
  --syn-warning: #ffd35c;
  --syn-warning-bg: #3a3010;
  --syn-success: #5fd6a9;
  --syn-success-bg: #0f2e25;
  --syn-info: #8cc4f2;
  --syn-info-bg: #12283d;
  --syn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --syn-shadow-dialog: 0 8px 32px rgba(0, 0, 0, 0.55);
  --syn-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.45);
  --syn-tooltip-bg: #154b5b;
  --syn-tooltip-border: var(--syn-line-strong);
  --syn-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

[data-md-color-scheme="slate"] {
  --syn-bg: #0f1318;
  --syn-bg-muted: #1b2129;
  --syn-surface: #161b22;
  --syn-surface-sunken: #0f1318;
  --syn-border: #2a323c;
  --syn-line: #2a323c;
  --syn-line-strong: #3a4450;
  --syn-row-stripe: #1a1f26;
  --syn-row-hover: #222a33;
  --syn-row-hover-strong: #29323d;
  --syn-tooltip-bg: #222a33;
}

/* ===================================================================
   Rahmen und Fläche
   ===================================================================

   Hell ist der Verlauf aufgehellt und endet in Abstufung 2 (#09826a) statt
   in Mint: er läuft fest über das ganze Fenster, und rechts oben im Kopf
   eines breiten, niedrigen Fensters hält nur Abstufung 2 für die weiße
   Schrift noch 4,8:1. Dunkel trägt der Rahmen den Verlauf der Balken.

   Die Werte hängen an body und nicht an :root, weil Material das Schema
   dort setzt: --flaeche löst so in beiden Darstellungen gegen die richtige
   --syn-surface auf. */

body {
  --seitenmenue-breite: 13.2rem;
  --flaeche-abstand: .4rem;
  --rahmen-grund: linear-gradient(135deg, var(--syn-secondary) -10%, #09826a 75%);
  --flaeche: var(--syn-surface);
  --flaeche-rand: rgba(255, 255, 255, .12);
  --flaeche-schatten: 0 8px 32px rgba(0, 0, 0, .25);
}

[data-md-color-scheme="slate"] {
  --rahmen-grund: var(--syn-login-bar);
  --flaeche-rand: rgba(255, 255, 255, .09);
  --flaeche-schatten: 0 8px 32px rgba(0, 0, 0, .35);
}

/* Der Kopf trägt denselben festen Verlauf wie die Seite. Beide messen ihn am
   Fenster, deshalb geht er nahtlos ineinander über — und der Kopf deckt
   trotzdem ab, was beim Scrollen unter ihm durchläuft. */
body,
.md-header {
  background-color: var(--syn-secondary);
  background-image: var(--rahmen-grund);
  background-attachment: fixed;
}

/* Unter Materials Desktop-Breite ist das Seitenmenü eine Schublade, und die
   Hauptzeile ist selbst die Fläche. Ab Desktop-Breite steht das Menü in ihr
   (Abschnitt „Seitenmenü"). Die Fläche reicht auch auf kurzen Seiten bis an
   den Fuß. */
.md-main {
  display: flex;
  flex-direction: column;
}

.md-main__inner {
  flex-grow: 1;
  margin: 0 var(--flaeche-abstand) var(--flaeche-abstand);
  border: 1px solid var(--flaeche-rand);
  border-radius: var(--syn-radius-large);
  background: var(--flaeche);
  box-shadow: var(--flaeche-schatten);
}

/* Der Rahmen läuft über die ganze Fensterbreite wie im Portal. Lesbar bleibt
   der Text über die Breite des Inhalts: der steht mit dem Inhaltsverzeichnis
   mittig in der Fläche und wird nicht breiter als eine Lesezeile. */
.md-grid {
  max-width: none;
}

.md-content {
  max-width: 46rem;
  margin-left: auto;
}

.md-sidebar--secondary {
  margin-right: auto;
}

.md-content__inner {
  padding-top: 1.2rem;
}

/* ===================================================================
   Material-Grundfarben auf die Marken-Tokens
   =================================================================== */

:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-bg-color:          var(--syn-surface);
  --md-default-fg-color:          var(--syn-text);
  --md-default-fg-color--light:   var(--syn-text-secondary);
  --md-default-fg-color--lighter: var(--syn-text-muted);
  --md-typeset-color:             var(--syn-text);
  --md-typeset-a-color:           var(--syn-link);
  --md-primary-fg-color:          var(--syn-link);
  --md-primary-bg-color:          var(--syn-bar-ink);
  --md-accent-fg-color:           var(--syn-link);
  --md-code-bg-color:             var(--syn-surface-sunken);
  --md-code-fg-color:             var(--syn-text);
  --md-footer-bg-color:           transparent;
  --md-footer-bg-color--dark:     transparent;
  --md-footer-fg-color:           var(--syn-bar-ink);
  --md-footer-fg-color--light:    var(--syn-bar-ink-muted);
  --md-footer-fg-color--lighter:  var(--syn-bar-ink-muted);
}

body,
.md-typeset {
  font-family: var(--syn-font-doc);
  line-height: var(--syn-line-height);
}

.md-typeset {
  font-size: .78rem;
}

/* ===================================================================
   Kopf — Logo links, Suche daneben, auf dem Verlauf
   =================================================================== */

.md-header,
.md-header--shadow {
  color: var(--syn-bar-ink);
  box-shadow: none;
}

.md-header__title {
  font-family: var(--syn-font-display);
  font-weight: 500;
  font-size: .9rem;
  color: var(--syn-bar-ink);
}

.md-header__button {
  color: var(--syn-bar-ink);
}

.md-header__button.md-logo {
  background: none;
  padding: 0;
  margin-right: .6rem;
}

/* Die weiße Wortmarke auf 34px wie im Portalkopf. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  width: auto;
  height: 1.7rem;
}

/* Auf dem dunklen Rahmen trägt der helle Fokusring (--syn-focus), nicht der
   dunkle der Fläche. */
.md-header :focus-visible {
  outline: 2px solid var(--syn-focus);
  outline-offset: 1px;
}

/* Das Suchfeld wie die Direktsuche im Portalkopf: auf dem Verlauf hell
   durchscheinend, mit dem Fokus weiß. */
.md-search__form {
  height: 1.8rem;
  border: 1px solid var(--syn-bar-divider);
  border-radius: var(--syn-radius);
  background-color: var(--syn-bar-control);
  transition: background-color .15s ease, border-color .15s ease;
}

.md-search__form:hover {
  background-color: var(--syn-bar-control-hover);
}

.md-search__input {
  color: var(--syn-bar-ink);
  font-family: var(--syn-font-doc);
}

.md-search__input::placeholder {
  color: var(--syn-bar-ink);
  opacity: .75;
}

.md-search__input + .md-search__icon,
.md-search__icon {
  color: var(--syn-bar-ink);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-color: var(--syn-focus);
  background-color: var(--syn-surface);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  color: var(--syn-text);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__input::placeholder {
  color: var(--syn-placeholder);
  opacity: 1;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__icon {
  color: var(--syn-text-secondary);
}

/* ===================================================================
   Reiter — die Bereiche der Doku auf dem Rahmen
   ===================================================================

   Wie die Kacheln der Hauptbereiche im Portal: beim Überfahren eine leichte
   Fläche, der aktive Bereich die hellere Fläche und unten den Strich in
   Mint. Material blendet die Reiter unterhalb der Desktop-Breite aus; dort
   stehen die Bereiche in der Schublade. */

.md-tabs {
  background: transparent;
  color: var(--syn-bar-ink);
}

.md-tabs__list {
  margin-left: .3rem;
}

.md-tabs__item {
  height: auto;
  padding: 0;
}

.md-tabs__link {
  display: block;
  margin: .3rem .1rem 0;
  padding: .45rem .7rem;
  border-radius: var(--syn-radius) var(--syn-radius) 0 0;
  color: var(--syn-bar-ink-muted);
  font-family: var(--syn-font-display);
  font-size: .65rem;
  font-weight: 500;
  opacity: 1;
  transition: background-color .15s ease, color .15s ease;
}

.md-tabs__link:hover,
.md-tabs__link:focus-visible {
  background-color: var(--syn-bar-control);
  color: var(--syn-bar-ink);
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__item--active .md-tabs__link:hover {
  background-color: var(--syn-bar-control-hover);
  color: var(--syn-bar-ink);
  box-shadow: inset 0 -3px 0 var(--syn-primary);
  font-weight: 600;
}

.md-tabs :focus-visible {
  outline: 2px solid var(--syn-focus);
  outline-offset: -2px;
}

/* ===================================================================
   Seitenmenü — die Seiten des aktuellen Bereichs auf dem Rahmen
   ===================================================================

   Nur ab Materials Desktop-Breite; darunter wird das Menü zur Schublade
   und steht auf der hellen Fläche (Abschnitt „Navigation" weiter unten).

   Wie im Portal: oben der Bereich weiß in Chillax Semibold, die Seiten
   darunter gedämpft, beim Überfahren eine leichte Fläche. Die aktuelle Seite
   trägt die hellere Fläche und den Strich in Mint davor — Farbe allein wäre
   kein ausreichendes Unterscheidungsmerkmal. */

@media screen and (min-width: 76.25em) {
  /* Die Fläche hängt hinter Inhalt und Inhaltsverzeichnis, das Menü steht
     links daneben auf dem Verlauf. isolation hält sie (z-index -1) vor dem
     Verlauf; unterhalb dieser Breite stünde die Schublade dann in diesem
     Stapelkontext unter Kopf und Abdunklung, deshalb erst hier. */
  .md-main__inner {
    position: relative;
    isolation: isolate;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .md-main__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: var(--flaeche-abstand);
    bottom: var(--flaeche-abstand);
    left: var(--seitenmenue-breite);
    border: 1px solid var(--flaeche-rand);
    border-radius: var(--syn-radius-large);
    background: var(--flaeche);
    box-shadow: var(--flaeche-schatten);
  }

  .md-sidebar--primary {
    width: var(--seitenmenue-breite);
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    margin: 0;
    scrollbar-color: var(--syn-bar-control-line) transparent;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap:hover {
    scrollbar-color: var(--syn-bar-divider) transparent;
  }

  /* Der Titel der Site steht schon im Kopf. */
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: none;
  }

  /* Mit Reitern hebt Material den aktuellen Bereich als Kopf des Menüs an
     (md-nav--lifted) und legt ihn klebend auf eine weiße Fläche. Auf dem
     Rahmen steht er wie die Bereichsköpfe im Portal ohne eigene Fläche und
     scrollt mit. */
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    position: static;
    margin-top: 0;
    background: none;
    box-shadow: none;
  }

  /* Ist die Startseite des Bereichs offen, trägt sein Kopf die Pille. */
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__container:has(> .md-nav__link--active),
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link--active {
    background-color: var(--syn-bar-control-hover);
    box-shadow: inset 3px 0 0 var(--syn-primary);
  }

  .md-sidebar--primary .md-nav__item {
    padding: 0;
  }

  .md-sidebar--primary .md-nav__link {
    align-items: center;
    margin: 0 .3rem .1rem;
    padding: .45rem .55rem;
    border-radius: var(--syn-radius);
    color: var(--syn-bar-ink-muted);
    font-family: var(--syn-font-display);
    font-size: .625rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
  }

  .md-sidebar--primary .md-nav__link:hover,
  .md-sidebar--primary .md-nav__link:focus-visible {
    background-color: var(--syn-bar-control);
    color: var(--syn-bar-ink);
  }

  .md-sidebar--primary :focus-visible {
    outline: 2px solid var(--syn-focus);
    outline-offset: -2px;
  }

  /* Ein Abschnitt mit eigener Startseite (navigation.indexes) ist ein
     Container aus Verweis und Umschalter, und Material gibt dem Container
     selbst die Klasse md-nav__link. Er trägt Rand und Fläche der Zeile, die
     beiden darin nur den Innenabstand. */
  .md-sidebar--primary .md-nav__container {
    padding: 0;
  }

  .md-sidebar--primary .md-nav__container > .md-nav__link {
    margin: 0;
  }

  .md-sidebar--primary .md-nav__container > a.md-nav__link {
    flex-grow: 1;
    padding-right: .2rem;
  }

  .md-sidebar--primary .md-nav__container > label.md-nav__link {
    padding-left: .3rem;
  }

  .md-sidebar--primary .md-nav__container > .md-nav__link:hover,
  .md-sidebar--primary .md-nav__container > .md-nav__link:focus-visible {
    background-color: transparent;
  }

  /* Die Bereiche */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > .md-nav__link {
    color: var(--syn-bar-ink);
    font-size: .65rem;
    font-weight: 600;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link:hover {
    background-color: var(--syn-bar-control-hover);
  }

  /* Die Seiten eines Bereichs leicht eingerückt, jede Ebene darunter mit
     einer Führungslinie wie die Gruppen im Servicebereich des Portals. Die
     oberste Navigation trägt selbst data-md-level="0". */
  .md-sidebar--primary .md-nav[data-md-level="1"] {
    margin-left: .5rem;
  }

  .md-sidebar--primary .md-nav[data-md-level="1"] .md-nav[data-md-level] {
    margin-left: .9rem;
    box-shadow: inset 2px 0 0 var(--syn-bar-control-line);
  }

  /* Eine zugeklappte Liste bleibt mit Höhe 0 im Fluss; Luft darunter nur,
     wenn sie offen steht. */
  .md-sidebar--primary .md-nav__toggle:checked ~ .md-nav[data-md-level="1"] {
    margin-bottom: .3rem;
  }

  .md-sidebar--primary .md-nav__link--active,
  .md-sidebar--primary .md-nav__link--active:hover,
  .md-sidebar--primary .md-nav__container:has(> .md-nav__link--active) {
    background-color: var(--syn-bar-control-hover);
    color: var(--syn-bar-ink);
    box-shadow: inset 3px 0 0 var(--syn-primary);
    font-weight: 600;
  }

  .md-sidebar--primary .md-nav__container > .md-nav__link--active,
  .md-sidebar--primary .md-nav__container > .md-nav__link--active:hover {
    background-color: transparent;
    box-shadow: none;
  }

  /* Die Ebenen über der aktuellen Seite stehen offen und in voller Schrift. */
  .md-sidebar--primary .md-nav__item--active > .md-nav__link,
  .md-sidebar--primary .md-nav__item--active > .md-nav__container > .md-nav__link {
    color: var(--syn-bar-ink);
  }

  /* Das Inhaltsverzeichnis steht in der Fläche. */
  .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
    margin-left: 1.6rem;
  }
}

/* ===================================================================
   Navigation auf der Fläche: Inhaltsverzeichnis und Schublade
   =================================================================== */

.md-nav {
  font-size: .68rem;
}

.md-nav__title {
  font-family: var(--syn-font-display);
  font-weight: 600;
  color: var(--syn-text);
}

.md-nav__link {
  color: var(--syn-text-secondary);
}

.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--syn-link);
}

.md-nav__item--active > .md-nav__link,
.md-nav__link--active {
  color: var(--syn-primary-ink);
  font-weight: 600;
}

.md-nav--secondary .md-nav__link--active {
  border-left: 2px solid var(--syn-primary);
  padding-left: .4rem;
  margin-left: -.6rem;
}

/* Der Kopf der Schublade auf dem Telefon und Tablet trägt den Verlauf der
   Balken, mit der weißen Wortmarke darauf. */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background-color: var(--syn-secondary);
    background-image: var(--syn-login-bar);
    color: var(--syn-bar-ink);
  }
}

/* ===================================================================
   Typografie
   =================================================================== */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
  font-family: var(--syn-font-display);
  color: var(--syn-text);
}

.md-typeset h1 {
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -.02em;
  margin-bottom: .5em;
}

.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: 2.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--syn-line);
}

.md-typeset h1 + h2 {
  margin-top: 1.2em;
  padding-top: 0;
  border-top: 0;
}

.md-typeset h3 {
  font-weight: 600;
  margin-top: 1.8em;
}

.md-typeset a {
  color: var(--syn-link);
  text-decoration: none;
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--syn-link-hover);
  text-decoration: underline;
}

.md-typeset .lead,
.md-typeset p.lead {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--syn-text-secondary);
  max-width: 44em;
  margin-block: .2em 1.6em;
}

/* ===================================================================
   Tabellen — Signature-Mint im Kopf, wie die Raster im Portal
   =================================================================== */

.md-typeset table:not([class]) {
  border: 1px solid var(--syn-line-strong);
  border-radius: var(--syn-radius);
  box-shadow: none;
  font-size: .7rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--syn-grid-header);
  color: var(--syn-grid-header-ink);
  font-family: var(--syn-font-display);
  font-weight: 600;
  border: none;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--syn-line);
  color: var(--syn-text);
}

.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background: var(--syn-row-stripe);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--syn-row-hover);
}

/* ===================================================================
   Knöpfe — Pill in Mint mit Navy-Schrift
   =================================================================== */

.md-typeset .md-button {
  font-family: var(--syn-font-display);
  font-weight: 500;
  font-size: .72rem;
  border-radius: var(--syn-radius-pill);
  padding: .55em 1.6em;
  border: 1px solid var(--syn-primary);
  background: var(--syn-primary);
  color: var(--syn-secondary);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background: var(--syn-primary-strong);
  border-color: var(--syn-primary-strong);
  color: var(--syn-secondary);
}

/* Die zweite Stufe ist im Portal der Geist-Knopf: Kontur statt Fläche. */
.md-typeset .md-button--ghost,
.md-typeset .md-button:not(.md-button--primary):not(.md-button--ghost) {
  background: transparent;
  border-color: var(--syn-line-field);
  color: var(--syn-primary-ink);
}

.md-typeset .md-button--ghost:hover,
.md-typeset .md-button:not(.md-button--primary):not(.md-button--ghost):hover {
  background: var(--syn-primary-soft);
  border-color: var(--syn-primary-strong);
  color: var(--syn-primary-ink);
}

/* ===================================================================
   Hinweisblöcke auf die Statusfarben des Portals
   ===================================================================

   Statusfarben sind funktionale Kodierung, keine Markenfläche — sie werden
   nicht eingefärbt, sondern aus den dafür vorgesehenen Tokens bedient. */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--syn-line-strong);
  border-left-width: 3px;
  border-radius: var(--syn-radius);
  box-shadow: none;
  font-size: .72rem;
  background: var(--syn-surface);
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-family: var(--syn-font-display);
  font-weight: 600;
  background: var(--syn-surface-sunken);
}

.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.abstract,
.md-typeset details.abstract,
.md-typeset .admonition.todo,
.md-typeset details.todo {
  border-left-color: var(--syn-info);
}

.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary,
.md-typeset .admonition.info > .admonition-title,
.md-typeset details.info > summary,
.md-typeset .admonition.abstract > .admonition-title,
.md-typeset details.abstract > summary,
.md-typeset .admonition.todo > .admonition-title,
.md-typeset details.todo > summary {
  background: var(--syn-info-bg);
  color: var(--syn-info);
}

.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.success,
.md-typeset details.success,
.md-typeset .admonition.check,
.md-typeset details.check,
.md-typeset .admonition.done,
.md-typeset details.done {
  border-left-color: var(--syn-success);
}

.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary,
.md-typeset .admonition.success > .admonition-title,
.md-typeset details.success > summary,
.md-typeset .admonition.check > .admonition-title,
.md-typeset details.check > summary,
.md-typeset .admonition.done > .admonition-title,
.md-typeset details.done > summary {
  background: var(--syn-success-bg);
  color: var(--syn-success);
}

.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.caution,
.md-typeset details.caution,
.md-typeset .admonition.attention,
.md-typeset details.attention {
  border-left-color: var(--syn-warning);
}

.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary,
.md-typeset .admonition.caution > .admonition-title,
.md-typeset details.caution > summary,
.md-typeset .admonition.attention > .admonition-title,
.md-typeset details.attention > summary {
  background: var(--syn-warning-bg);
  color: var(--syn-warning);
}

.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.failure,
.md-typeset details.failure,
.md-typeset .admonition.bug,
.md-typeset details.bug,
.md-typeset .admonition.error,
.md-typeset details.error {
  border-left-color: var(--syn-danger);
}

.md-typeset .admonition.danger > .admonition-title,
.md-typeset details.danger > summary,
.md-typeset .admonition.failure > .admonition-title,
.md-typeset details.failure > summary,
.md-typeset .admonition.bug > .admonition-title,
.md-typeset details.bug > summary,
.md-typeset .admonition.error > .admonition-title,
.md-typeset details.error > summary {
  background: var(--syn-danger-bg);
  color: var(--syn-danger);
}

/* ===================================================================
   Code
   =================================================================== */

.md-typeset code {
  border-radius: var(--syn-radius-small);
  font-size: .86em;
}

.md-typeset pre > code,
.md-typeset .highlight {
  border-radius: var(--syn-radius);
}

/* Die Codefläche hebt sich von der Fläche kaum ab; die Kante grenzt sie ab. */
.md-typeset pre > code {
  border: 1px solid var(--syn-line);
}

/* ===================================================================
   Bilder und Diagramme
   =================================================================== */

/* Screenshots und Diagramme sind für weißen Grund gemacht. Die Kante setzt sie
   hell von der weißen Fläche ab, dunkel vom Grafit; der weiße Grund trägt
   transparente Stellen in beiden Darstellungen. */
.md-typeset a.glightbox > img,
.md-typeset .geDiagramContainer {
  border: 1px solid var(--syn-line-strong);
  border-radius: var(--syn-radius);
  background-color: #fff;
}

/* Der DrawIO-Viewer setzt die Breite genau auf das Diagramm; die Kante gehört
   außen herum, sonst schneidet overflow: hidden zwei Pixel ab. */
.md-typeset .geDiagramContainer {
  box-sizing: content-box;
}

/* ===================================================================
   Startseite: Kopfblock und Karten
   =================================================================== */

/* Der Markenverlauf liegt schon unter dem ganzen Rahmen. Der Kopfblock der
   Startseite nimmt deshalb die ruhige Mintfläche des Portals, nicht ein
   zweites Mal den Verlauf. */
.syn-hero {
  background: var(--syn-bg-muted);
  border: 1px solid var(--syn-primary-tint);
  border-left: 4px solid var(--syn-primary);
  border-radius: var(--syn-radius-large);
  padding: 2.4rem 2rem 2.2rem;
  margin: 0 0 2.4rem;
}

/* Dunkel ist die Mintfläche Petrol; auf der grafitgrauen Fläche trägt die
   Kante deshalb die Linienfarbe. */
[data-md-color-scheme="slate"] .syn-hero {
  border-color: var(--syn-line);
  border-left-color: var(--syn-primary);
}

.syn-hero__eyebrow {
  font-family: var(--syn-font-display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--syn-primary-ink);
  margin: 0 0 .5rem;
}

.md-typeset .syn-hero h1 {
  /* Mitskalierend statt in Stufen: auf 375px brach „Documentation" sonst
     mitten im Wort um. clamp faengt jede Breite dazwischen ab, ohne dass es
     dafuer eigene Haltepunkte braucht. */
  font-size: clamp(1.15rem, 5.5vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--syn-text);
  margin: 0 0 .6rem;
  /* Lange Fachwoerter duerfen umbrechen, aber nicht innerhalb des Wortes. */
  overflow-wrap: normal;
}

.md-typeset .syn-hero p {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--syn-text-secondary);
  max-width: 40em;
  margin: 0 !important;
}

.syn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
}

.md-typeset .syn-hero__actions .md-button {
  margin: 0;
}

/* Karten in der Formensprache der Portal-Karten. Die Mindestbreite rechnet
   mit Materials Wurzelschriftgröße von 20px — mit den üblichen 16rem bliebe
   der Inhaltsbereich einspaltig. */
.syn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 2.4rem;
}

.md-typeset .syn-card {
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.3rem 1.1rem;
  background: var(--syn-surface);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-radius-large);
  box-shadow: var(--syn-shadow-card);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.md-typeset .syn-card:hover {
  border-color: var(--syn-primary-strong);
  box-shadow: var(--syn-shadow-menu);
}

.md-typeset .syn-card > :first-child { margin-top: 0; }
.md-typeset .syn-card > :last-child { margin-bottom: 0; }

.md-typeset .syn-card h3 {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 .45rem;
}

.md-typeset .syn-card h3 a {
  color: var(--syn-text);
}

.md-typeset .syn-card h3 a:hover {
  color: var(--syn-primary-ink);
  text-decoration: none;
}

.md-typeset .syn-card p {
  font-size: .74rem;
  line-height: 1.55;
  color: var(--syn-text-secondary);
  margin: 0 0 .5rem;
}

.md-typeset .syn-card__links {
  margin-top: auto;
  padding-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  font-size: .68rem;
}

.md-typeset .syn-card__links a {
  font-weight: 500;
}

.md-typeset .syn-tag {
  display: inline-block;
  padding: .12em .6em;
  border-radius: var(--syn-radius-pill);
  border: 1px solid var(--syn-line-strong);
  background: var(--syn-surface-sunken);
  color: var(--syn-text-muted);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .03em;
}

.md-typeset .syn-section-title {
  margin-top: 2.6rem;
  padding-top: 0;
  border-top: 0;
  font-size: 1.15rem;
}

.md-typeset .syn-section-title + p {
  color: var(--syn-text-secondary);
  margin-top: -.3rem;
}

/* ===================================================================
   Fuß — auf dem Rahmen unter der Fläche
   =================================================================== */

.md-footer,
.md-footer-meta {
  background: transparent;
  color: var(--syn-bar-ink);
}

#CIGrid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: .5rem;
  margin-top: 2.5rem;
  padding-top: .8rem;
  border-top: 1px solid var(--syn-line);
  color: var(--syn-text-muted);
}

#CIGrid a {
  color: var(--syn-text-muted);
}

/* ===================================================================
   Schmale Fenster
   =================================================================== */

/* Auf dem Telefon füllt die Fläche die Breite; der Rahmen bleibt im Kopf. */
@media screen and (max-width: 44.9375em) {
  .md-main__inner {
    margin: 0;
    border-width: 0;
    border-radius: 0;
  }

  .syn-hero {
    padding: 1.8rem 1.2rem 1.6rem;
  }

  .syn-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .md-typeset .syn-hero__actions .md-button {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .syn-card,
  .md-typeset .md-button,
  .md-search__form,
  .md-sidebar--primary .md-nav__link {
    transition: none;
  }
}

@media print {
  body {
    background: none;
  }

  .md-main__inner {
    border: 0;
    box-shadow: none;
  }

  .md-main__inner::before {
    display: none;
  }

  .syn-hero {
    background: none;
    border: none;
    border-left: 3px solid var(--syn-primary);
    padding: 0 0 0 1rem;
    margin-bottom: 1.5rem;
  }

  .syn-hero__actions {
    display: none;
  }

  .md-typeset .syn-card {
    box-shadow: none;
    break-inside: avoid;
  }
}