/* =============================================================================
   verAIficATor-Dokumentation: Layout der App auf Material for MkDocs.

   Tokens (Papier, Navy, Blau, Inter, Dunkelmodus) kommen aus tokens.css –
   eine 1:1-Kopie von app/static/css/tokens.css (build.sh prüft, dass beide
   Dateien gleich sind). Kopf- und Fußzeile folgen app/static/css/veraificator.css
   (Abschnitte wordmark, header, footer, buttons; Stand 2026-09-29).
   Dunkelmodus automatisch per prefers-color-scheme, kein Umschalter.
   Keine externen Quellen, keine Inline-Styles (CSP).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Material rechnet mit 20 px Grundschrift (html { font-size: 125% }); die
   rem-basierten Tokens der App gelten für 16 px. Hier in Pixel umgerechnet,
   damit Kopfzeile, Fußzeile und Schaltflächen exakt so groß sind wie in der
   App. (Materials eigene Maße bleiben in rem.)
   ------------------------------------------------------------------------ */
:root {
  --step--2: clamp(12.16px, 11.84px + 0.08vw, 12.8px);
  --step--1: clamp(14.08px, 13.76px + 0.1vw, 14.88px);
  --step-0:  clamp(16px, 15.52px + 0.15vw, 17.2px);
  --step-1:  clamp(18.4px, 17.6px + 0.25vw, 20.8px);
  --step-2:  clamp(21.6px, 20px + 0.5vw, 26.4px);
  --step-3:  clamp(25.6px, 22.72px + 0.9vw, 34.4px);
  --step-4:  clamp(31.2px, 25.6px + 1.6vw, 46.4px);
  --step-5:  clamp(36.8px, 28.8px + 2.4vw, 59.2px);
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  20px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: clamp(56px, 44.8px + 3vw, 88px);
  --gutter: clamp(16px, 4vw, 32px);
  --touch: 44px;
}

/* --------------------------------------------------------------------------
   Material-Variablen auf die Tokens abbilden. Alles über var(), deshalb
   genügt für den Dunkelmodus die Token-Umschaltung in tokens.css.
   ------------------------------------------------------------------------ */
:root,
[data-md-color-scheme="default"] {
  --md-text-font: "Inter var";
  --md-code-font: ui-monospace;
  --md-text-font-family: var(--font);
  --md-code-font-family: var(--font-mono);

  --md-default-bg-color: var(--paper);
  --md-default-bg-color--light: var(--paper);
  --md-default-bg-color--lighter: var(--paper);
  --md-default-bg-color--lightest: var(--paper);
  --md-default-fg-color: var(--ink-2);
  --md-default-fg-color--light: var(--muted);
  --md-default-fg-color--lighter: var(--faint);
  --md-default-fg-color--lightest: var(--surface-3);

  --md-primary-fg-color: var(--navy);
  --md-primary-fg-color--light: var(--blue);
  --md-primary-fg-color--dark: var(--navy);
  --md-primary-bg-color: var(--text-on-navy);
  --md-primary-bg-color--light: var(--muted-on-navy);

  --md-accent-fg-color: var(--blue-600);
  --md-accent-fg-color--transparent: var(--blue-50);
  --md-accent-bg-color: var(--text-on-accent);
  --md-accent-bg-color--light: var(--text-on-accent);

  --md-typeset-color: var(--ink-2);
  --md-typeset-a-color: var(--blue);
  --md-typeset-mark-color: var(--blue-100);
  --md-typeset-kbd-color: var(--surface-2);
  --md-typeset-kbd-accent-color: var(--surface);
  --md-typeset-kbd-border-color: var(--line-strong);
  --md-typeset-table-color: var(--line);
  --md-typeset-table-color--light: var(--surface-2);

  --md-code-bg-color: var(--surface-2);
  --md-code-bg-color--light: var(--surface-2);
  --md-code-bg-color--lighter: var(--surface-2);
  --md-code-fg-color: var(--ink);
  --md-code-hl-color: var(--blue-100);
  --md-code-hl-color--light: var(--blue-50);

  --md-admonition-fg-color: var(--ink-2);
  --md-admonition-bg-color: var(--surface);

  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;
  --md-footer-fg-color: var(--ink-2);
  --md-footer-fg-color--light: var(--muted);
  --md-footer-fg-color--lighter: var(--faint);

  --md-shadow-z1: var(--shadow-sm);
  --md-shadow-z2: var(--shadow);
  --md-shadow-z3: var(--shadow-lg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) [data-md-color-scheme="default"] {
    /* Syntaxfarben wie Materials „slate“-Schema */
    --md-code-hl-number-color: #e6695b;
    --md-code-hl-special-color: #f06090;
    --md-code-hl-function-color: #c973d9;
    --md-code-hl-constant-color: #9383e2;
    --md-code-hl-keyword-color: #6791e0;
    --md-code-hl-string-color: #2fb170;
    --md-code-hl-name-color: var(--md-code-fg-color);
    --md-code-hl-operator-color: var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
    --md-code-hl-comment-color: var(--md-default-fg-color--light);
    --md-code-hl-generic-color: var(--md-default-fg-color--light);
    --md-code-hl-variable-color: var(--md-default-fg-color--light);
  }
}

/* --------------------------------------------------------------------------
   Grundfläche, Breite (App: Container 1200 px + Gutter), Typografie
   ------------------------------------------------------------------------ */
html { background: var(--paper); scroll-padding-top: calc(var(--header-h) + 1rem); }
body { background: var(--paper); color: var(--ink-2); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.md-grid { max-width: calc(var(--container) + 2 * var(--gutter)); }
.md-main__inner { margin-top: 1.2rem; }
.md-content__inner { max-width: var(--container-text); }
.md-typeset { font-size: .8rem; line-height: 1.6; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { color: var(--ink); line-height: 1.18; letter-spacing: -0.012em; text-wrap: balance; overflow-wrap: break-word; }
/* Öffentliche Seiten der App: Serifen-Überschriften h1/h2, sonst Inter. */
.md-typeset h1, .md-typeset h2 { font-family: var(--font-serif); font-weight: 600; }
.md-typeset h1 { font-size: var(--step-4); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1rem; }
.md-typeset h2 { font-size: var(--step-3); }
.md-typeset h3 { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.005em; }
.md-typeset h4 { font-size: var(--step-0); font-weight: 650; }
.md-typeset a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.md-typeset a:hover, .md-typeset a:focus-visible { color: var(--blue-600); }
.md-typeset strong { color: var(--ink); font-weight: 650; }
.md-typeset code { font-size: .92em; border-radius: 4px; }
.md-typeset pre > code { border: 1px solid var(--line); border-radius: var(--radius); }
.md-typeset table:not([class]) { font-size: .7rem; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.md-typeset table:not([class]) th { background: var(--surface-2); color: var(--ink); font-weight: 650; }
.md-typeset hr { border-color: var(--line); }
.md-typeset .admonition, .md-typeset details { border-radius: var(--radius); box-shadow: none; border-width: 1px; border-color: var(--line); border-left-width: 3px; font-size: .72rem; background: var(--blue-50); }
.md-typeset .admonition-title, .md-typeset summary { color: var(--ink); }
.md-typeset .admonition.note, .md-typeset details.note { border-left-color: var(--blue); }
.md-typeset .admonition.warning, .md-typeset details.warning { border-left-color: var(--warn); background: var(--warn-50); }
.md-typeset .admonition.danger, .md-typeset details.danger { border-left-color: var(--danger); background: var(--danger-50); }
.md-typeset .headerlink { color: var(--faint); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--blue-100); color: var(--ink); }

/* Kennzeichen wie in der App: Stufen neutral in Monospace, VERIFIED als
   einzige farbige Ausnahme (Verifiziert-Kennzeichen). */
.md-typeset .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; line-height: 1.4; vertical-align: middle; }
.md-typeset .badge--level { font-family: var(--font-mono); border-radius: 5px; min-width: 2.3rem; justify-content: center; background: var(--surface-2); }
.md-typeset .badge--verified { border-color: var(--ok); color: var(--ok); background: var(--ok-50); font-weight: 750; letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   Schaltflächen (App: .btn)
   ------------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); padding: 9.6px 18.4px;
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-size: var(--step--1); font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn:hover { --btn-bd: var(--blue); color: var(--btn-fg); box-shadow: var(--shadow-sm); }
.btn--primary { --btn-bg: var(--blue); --btn-fg: var(--text-on-accent); --btn-bd: var(--blue); }
.btn--primary:hover { --btn-bg: var(--blue-600); --btn-bd: var(--blue-600); color: var(--text-on-accent); }
.btn--ghost { --btn-bg: transparent; }
.btn--sm { min-height: 38.4px; padding: 6.4px 14.4px; }

/* --------------------------------------------------------------------------
   Wortmarke (App: .wordmark, .brand)
   ------------------------------------------------------------------------ */
.wordmark { font-family: var(--font); font-weight: 600; letter-spacing: -0.015em; color: var(--navy); white-space: nowrap; }
.wordmark .wm-em { color: var(--blue); font-weight: 800; letter-spacing: -0.005em; }
.brand { display: inline-flex; align-items: center; gap: 9.6px; text-decoration: none; color: inherit; min-width: 0; flex: 0 0 auto; }
/* Die Doku-Kopfzeile trägt zusätzlich das Suchfeld: der Zusatz unter der
   Wortmarke bekommt erst ab 84rem Platz neben Navigation und Suche. */
@media (min-width: 75rem) and (max-width: 83.99rem) { .site-header .brand__descriptor { display: none; } }
.brand__mark { width: auto; height: 40px; flex: 0 0 auto; }
.brand__text { display: grid; line-height: 1.1; min-width: 0; }
.brand .wordmark { font-size: 21.6px; }
.brand__descriptor { margin-top: 3.2px; font-size: 11.2px; font-weight: 500; color: var(--faint); letter-spacing: 0.01em; line-height: 1.3; max-width: 248px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 30rem) {
  .brand__mark { height: 32px; }
  .brand .wordmark { font-size: 18.4px; }
  .brand__descriptor { display: none; }
}
.brand--negative .wordmark { color: var(--text-on-navy); }
.brand--negative .wordmark .wm-em { color: #8fc0f4; }
.brand--negative .brand__descriptor { color: var(--muted-on-navy); }

/* --------------------------------------------------------------------------
   Kopfzeile (App: .site-header) auf Basis von Materials .md-header, damit
   Suche und Menü erhalten bleiben. Kein backdrop-filter: er würde die
   fixierte mobile Suche (.md-search__inner) auf die Kopfzeile beschränken.
   ------------------------------------------------------------------------ */
.md-header { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
.md-header, .md-header--shadow { box-shadow: none; }
.md-header__inner { min-height: var(--header-h); gap: 8px; padding: 0 var(--gutter); }
.md-header__button { margin: 0; padding: 0; color: var(--ink); }
.md-header__button:hover { opacity: 1; color: var(--blue); }
.md-header__button.md-logo { display: none; }
.site-header__spacer { flex: 1 1 auto; min-width: 8px; }

.nav-primary { display: none; }
.nav-primary .menu { display: flex; gap: 2.4px; list-style: none; margin: 0; padding: 0; }
.nav-primary li { margin: 0; }
.nav-primary a { display: flex; align-items: center; min-height: var(--touch); padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-size: var(--step--1); font-weight: 550; text-decoration: none; white-space: nowrap; }
.nav-primary a:hover { color: var(--blue); background: var(--blue-50); }
.nav-primary a[aria-current="page"] { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); border-radius: 8px 8px 0 0; }
.nav-cta { display: none; }
.nav-login { display: inline-flex; align-items: center; gap: 6.4px; }
.nav-login__icon { display: none; width: 18.4px; height: 18.4px; }
@media (max-width: 40rem) {
  .nav-login { width: var(--touch); padding-inline: 0; justify-content: center; }
  .nav-login__icon { display: block; }
  .nav-login__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 75rem) {
  .nav-primary { display: block; }
  .nav-cta { display: inline-flex; }
}
/* Geöffnete Suche liegt über der Navigation: diese so lange ausblenden. */
[data-md-toggle="search"]:checked ~ .md-header .nav-primary { visibility: hidden; }

/* Burger (App: .nav-toggle); öffnet Materials Seitenleiste mit Doku- und
   Plattform-Navigation. Material blendet ihn ab 76.25em aus. */
.nav-toggle { display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.nav-toggle:hover { border-color: var(--blue); }
.nav-toggle__bars, .nav-toggle__bars i, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
.nav-toggle__bars { position: relative; background: transparent; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
[data-md-toggle="drawer"]:checked ~ .md-header .nav-toggle__bars i { opacity: 0; }
[data-md-toggle="drawer"]:checked ~ .md-header .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
[data-md-toggle="drawer"]:checked ~ .md-header .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Suchknopf (nur mobil, Material blendet ihn ab 60em aus) im selben Ring */
.docs-search-toggle { display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.docs-search-toggle:hover { border-color: var(--blue); }
.docs-search-toggle svg { width: 20px; height: 20px; }

/* Suche im hellen Header: kompakt, weitet sich beim Tippen wie bei Material */
.md-header__inner .md-search { margin-left: 0; }
@media screen and (min-width: 60em) {
  .md-search__inner { width: 8rem; }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__inner { width: 34.4rem; }
}
.md-search__form { background: var(--surface-2); color: var(--ink); border-radius: var(--radius); box-shadow: none; border: 1px solid var(--line); }
.md-search__form:hover { background: var(--surface); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { background: var(--surface); border-color: var(--line-strong); border-radius: var(--radius) var(--radius) 0 0; box-shadow: none; }
.md-search__input { color: var(--ink); }
.md-search__input::placeholder, .md-search__input + .md-search__icon { color: var(--muted); }
.md-search__input:hover::placeholder { color: var(--ink-2); }
.md-search__output { border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--md-shadow-z3); }
.md-search__scrollwrap, .md-search-result__meta { background: var(--surface); }
.md-search-result__meta { color: var(--muted); border-bottom: 1px solid var(--line); }
.md-search-result__link:hover, .md-search-result__link:focus { background: var(--blue-50); }
.md-search-result__article { color: var(--ink-2); }
.md-search-result mark { color: var(--blue-600); background: var(--blue-100); }
@media screen and (max-width: 59.984375em) {
  .md-search__overlay { background: var(--paper); }
  .md-search__inner { background: var(--paper); }
  .md-search__form { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-radius: 0; }
}

/* --------------------------------------------------------------------------
   Seitenleisten (Doku-Navigation, Inhaltsverzeichnis, mobiles Menü)
   ------------------------------------------------------------------------ */
.md-sidebar--primary { background: var(--paper); }
.md-nav--primary .md-nav__title[for="__drawer"] { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); font-weight: 700; }
.md-nav--primary .md-nav__title { background: var(--paper); box-shadow: none; }
.md-nav__link { color: var(--ink-2); }
.md-nav__link:hover, .md-nav__link:focus-visible { color: var(--blue); }
.md-nav__item .md-nav__link--active, .md-nav__link--active { color: var(--blue); font-weight: 600; }
.md-nav--secondary .md-nav__title { color: var(--muted); }
.md-nav__item--app-first { margin-top: 1rem; padding-top: .8rem !important; border-top: 1px solid var(--line-strong); }
.md-nav__item--app-title { display: block; padding: 0 0 .2rem; font-size: var(--step--2); font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.md-nav--primary .md-nav__item--app-cta { display: grid; gap: var(--space-sm); padding-top: var(--space-md); }
.md-nav--primary .md-nav__item--app-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: var(--space-md); font-size: var(--step--1); }
.md-nav--primary .md-nav__item--app-meta a { color: var(--muted); display: inline-flex; align-items: center; min-height: var(--touch); text-decoration: none; }
@media screen and (min-width: 76.25em) { .md-nav__item--app { display: none; } }
.md-top { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.md-top:hover { background: var(--blue-50); color: var(--blue); }
.md-clipboard { color: var(--faint); }
.md-clipboard:hover { color: var(--blue); }

/* --------------------------------------------------------------------------
   Fußzeile: Materials Vor/Zurück-Navigation, darunter die Fußzeile der App
   (.site-footer, Navy, drei Spalten)
   ------------------------------------------------------------------------ */
.md-footer { background: transparent; color: var(--ink-2); }
.md-footer__inner { padding: 0 var(--gutter); }
.md-footer__link { color: var(--ink-2); }
.md-footer__link:hover, .md-footer__link:focus { color: var(--blue); opacity: 1; }
.md-footer__direction { color: var(--muted); }
.site-footer { background: var(--navy); color: var(--muted-on-navy); margin-top: var(--space-2xl); padding-block: var(--space-2xl) var(--space-lg); font-size: var(--step--1); line-height: 1.6; }
.site-footer__inner { padding: 0 var(--gutter); }
.site-footer a { color: #d9e6f5; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer p { margin: 0; max-width: none; }
.footer__top { display: grid; gap: var(--space-xl); }
@media (min-width: 56rem) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand .brand__mark { height: 44px; }
.footer__claim { margin-top: var(--space-md); font-family: var(--font-serif); font-size: var(--step-1); color: var(--text-on-navy); font-style: italic; }
.footer__operator { margin-top: var(--space-sm); color: var(--muted-on-navy); }
.footer__address { margin-top: var(--space-sm); font-style: normal; line-height: 1.5; color: var(--muted-on-navy); }
.footer__col h2 { font-family: var(--font); font-size: var(--step--2); font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint-on-navy); margin: 0 0 var(--space-sm); }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.4px; }
.footer__col li { margin: 0; }
.footer__col a { display: inline-flex; align-items: center; min-height: var(--touch); }
@media (min-width: 56rem) { .footer__col a { min-height: 32px; } }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); justify-content: space-between; align-items: center; margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--line-on-navy); color: var(--faint-on-navy); font-size: var(--step--2); }
.footer__bottom .mono { font-family: var(--font-mono); color: var(--muted-on-navy); }
.footer__license { margin-top: var(--space-sm) !important; color: var(--faint-on-navy); font-size: var(--step--2); }
.footer__license a { text-decoration: underline; }