/* ERZEUGT aus scss/. Die Typografie ist gueltiges CSS und wurde 1:1
   uebernommen; die uebrigen Teile stammen aus dem letzten sass-Lauf. */
@layer versatile {

  :root {
    /* Neutrale Vorgaben, damit das Theme auch ohne Konfiguration rendert.
       Sobald ein Projekt etwas einstellt, ueberschreibt der <head> das hier:
       sein Block steht in KEINER Schicht und schlaegt deshalb jede. */
    --font-serif: ui-serif, Georgia, "Times New Roman", serif;
    --font-sans:  ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* Script kam am 2. 9. dazu. Es gibt kein ui-cursive, deshalb zwei Namen
       vor der generischen Familie: sonst waehlt Windows meist Comic Sans. */
    --font-script: "Segoe Script", "Snell Roundhand", cursive;

    --body-size: 17px;
    --body-leading: 1.5rem;
    --body-weight: 400;
    --body-font: var(--font-sans);

    --code-font: var(--font-mono);
    --code-size: .875em; --code-leading: 1.5; --code-tracking: 0; --code-weight: 400;

    /* Der senkrechte Rhythmus: EINE Zeile Laufschrift. Aus ihr leitet sich die
       gesamte senkrechte Abstandsskala ab (_raum.scss), damit Schrift und
       Abstand nicht zwei getrennte Systeme sind. Waechst die Laufschrift auf
       einer Stufe, waechst der Rhythmus mit — ohne dass es zweimal steht. */
    /* --body-leading ist seit dem 4. 9. eine LAENGE (Tokens.php, siehe dort):
       `size * leading` waere px mal px und damit ungueltig. Der Rhythmus IST
       die Zeilenhoehe. Tokens.php setzt beides selbst; diese Zeile gilt nur,
       solange das Theme-Config noch nichts geliefert hat. */
    --rhythm: var(--body-leading);

    --measure:        65ch;   /* Obergrenze fuer Laufschrift, keine Einstellung */
    --measure-narrow: 45ch;
  }

  /* == Die Rollen ===========================================================
     Jede Rolle ist ein Buendel aus fuenf Custom Properties. Ein Block schreibt
     class="rolle--h1" und weiss nichts von Gattungen oder Groessen.
     Die Rueckfaelle greifen, wenn ein Projekt eine Rolle nicht definiert. */
  .rolle--display { font-family: var(--display-font, var(--font-sans)); font-size: var(--display-size, 2.6em); line-height: var(--display-leading, 1.05); letter-spacing: var(--display-tracking, 0); font-weight: var(--display-weight, 300); font-style: var(--display-style, normal);  --stark: var(--display-weight-stark, bolder); }
  .rolle--h1      { font-family: var(--h1-font, var(--font-sans));      font-size: var(--h1-size, 2.1em);      line-height: var(--h1-leading, 1.15);      letter-spacing: var(--h1-tracking, 0);      font-weight: var(--h1-weight, 400); font-style: var(--h1-style, normal);  --stark: var(--h1-weight-stark, bolder); }
  .rolle--h2      { font-family: var(--h2-font, var(--font-sans));      font-size: var(--h2-size, 1.5em);      line-height: var(--h2-leading, 1.25);      letter-spacing: var(--h2-tracking, 0);      font-weight: var(--h2-weight, 500); font-style: var(--h2-style, normal);  --stark: var(--h2-weight-stark, bolder); }
  .rolle--h3      { font-family: var(--h3-font, var(--font-sans));      font-size: var(--h3-size, 1.2em);      line-height: var(--h3-leading, 1.3);       letter-spacing: var(--h3-tracking, 0);      font-weight: var(--h3-weight, 500); font-style: var(--h3-style, normal);  --stark: var(--h3-weight-stark, bolder); }
  .rolle--lead    { font-family: var(--lead-font, var(--font-sans));    font-size: var(--lead-size, 1.15em);   line-height: var(--lead-leading, 1.5);     letter-spacing: var(--lead-tracking, 0);    font-weight: var(--lead-weight, 400); font-style: var(--lead-style, normal);  --stark: var(--lead-weight-stark, bolder); }
  .rolle--meta    { font-family: var(--meta-font, var(--font-sans));    font-size: var(--meta-size, .85em);    line-height: var(--meta-leading, 1.4);     letter-spacing: var(--meta-tracking, 0);    font-weight: var(--meta-weight, 400); font-style: var(--meta-style, normal);  --stark: var(--meta-weight-stark, bolder); }
  .rolle--caption { font-family: var(--caption-font, var(--font-sans)); font-size: var(--caption-size, .8em);  line-height: var(--caption-leading, 1.4);  letter-spacing: var(--caption-tracking, 0); font-weight: var(--caption-weight, 400); font-style: var(--caption-style, normal);  --stark: var(--caption-weight-stark, bolder); }
  .rolle--label   { font-family: var(--label-font, var(--font-sans));   font-size: var(--label-size, .75em);   line-height: var(--label-leading, 1.2);    letter-spacing: var(--label-tracking, 0);   font-weight: var(--label-weight, 500); font-style: var(--label-style, normal);  --stark: var(--label-weight-stark, bolder); }

  /* DER FETTE SCHNITT DER ROLLE (J. S., 24. 9.): Jede Rollenklasse legt
     `--stark` an — den naechsthoeheren Schnitt, den die Gattung wirklich
     laedt. Ohne diese Regel bliebe der Wert ungenutzt und ein <strong> stuende
     weiter auf 700, auch wenn die Gattung nur 200/400/500 fuehrt.
     `bolder` als Rueckfall: Wo keine Rolle gilt, entscheidet der Browser wie
     bisher. Die Klasse `rolle--stark` traegt dasselbe fuer Stellen ohne
     eigenes Element — etwa eine Kennzahl, die kein <strong> ist. */
  strong, b, .rolle--stark { font-weight: var(--stark, bolder); }
  .rolle--code    { font-family: var(--code-font);                      font-size: var(--code-size);           line-height: var(--code-leading);          letter-spacing: var(--code-tracking);       font-weight: var(--code-weight); }

  /* Die uebliche Zuordnung. :where(), damit ein Block sie ohne Kampf
     ueberschreiben kann. */
  :where(body) {
    font-family: var(--body-font);
    font-size: var(--body-size);
    line-height: var(--body-leading);
    font-weight: var(--body-weight);
  }
  /* Laufschrift NEU HOLEN an jedem Container.
     Ohne diese Regel erbt ein Absatz seine Groesse von <body> — und <body>
     steht in keinem Container, misst also das FENSTER. Die Variable allein
     genuegt nicht: sie wird zwar richtig gesetzt, aber niemand liest sie.
     GEMESSEN 30. 8.: h1 skalierte mit der Spaltenbreite, der Fliesstext nicht.

     Alles in :where(), damit die Spezifitaet 0 bleibt. Dadurch gewinnt jede
     Rolle darunter — die drei Zeilen danach genauso wie jedes .rolle--*.
     Die Reihenfolge ist deshalb Teil der Regel: Diese Zeile MUSS vor den
     Rollenzuordnungen stehen. */
  :where(.cq) > :where(*) {
    font-size: var(--body-size);
    line-height: var(--body-leading);
  }

  :where(h1) { font-family: var(--h1-font, var(--font-sans)); font-size: var(--h1-size, 2.1em); line-height: var(--h1-leading, 1.15); letter-spacing: var(--h1-tracking, 0); font-weight: var(--h1-weight, 400); font-style: var(--h1-style, normal); }
  :where(h2) { font-family: var(--h2-font, var(--font-sans)); font-size: var(--h2-size, 1.5em); line-height: var(--h2-leading, 1.25); letter-spacing: var(--h2-tracking, 0); font-weight: var(--h2-weight, 500); font-style: var(--h2-style, normal); }
  :where(h3) { font-family: var(--h3-font, var(--font-sans)); font-size: var(--h3-size, 1.2em); line-height: var(--h3-leading, 1.3);  letter-spacing: var(--h3-tracking, 0); font-weight: var(--h3-weight, 500); font-style: var(--h3-style, normal); }
  :where(code, pre, kbd, samp) { font-family: var(--code-font); font-size: var(--code-size); }

  /* == Container ============================================================
     `cq` sagt: hier beginnt ein neuer Bezug fuer die Schrift. Der NAME steht
     getrennt davon — Mechanik und Identitaet sind zwei Dinge.

     Jedes Element, das die verfuegbare Breite veraendert, traegt `cq`:
     Seite, Band, Spalte, Blockhuelle, Behaeltereintrag. Dann sieht ein Text
     immer die Breite, die er wirklich hat — auch beliebig tief in einem
     Akkordeon.

     ZWEI FALLSTRICKE, beide gemessen (30. 8., fallstricke.md):
     1. Ein Element sieht seinen EIGENEN Container nicht. Deshalb stehen die
        Werte auf `.cq > *`, nicht auf `.cq`.
     2. `cq` NIE auf etwas, dessen Breite vom Inhalt kommt (inline-block,
        max-content, float) — solche Elemente fallen auf 0 px zusammen. */
  .cq     { container-type: inline-size; }
  .seite  { container-name: seite; }
  .huelle { container-name: feld; }

  /* == Satzfeinheiten =======================================================
     Keine Tokens, aber Pflicht. Ohne sie hat man Schusterjungen auf 200 Seiten
     und im Deutschen Zweibuchstaben-Reste bei der Silbentrennung. */
  :where(h1, h2, h3, .aussage) { text-wrap: balance; }

  :where(p, li, dd) {
    text-wrap: pretty;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }

  :where(dl, table) { font-variant-numeric: tabular-nums; }
}
@layer versatile {
  :root {
    --gap: var(--gutter);
    --gap-tight: calc(var(--gutter) / 2);
    --gap-loose: calc(var(--gutter) * 2);
    --flow: var(--rhythm);
    --flow-tight: calc(var(--rhythm) * .5);
    --flow-loose: calc(var(--rhythm) * 2);
  }
  .stack > * + * {
    margin-block-start: var(--flow);
  }
  .stack > * + h2,
  .stack > * + h3 {
    margin-block-start: var(--flow-loose);
  }
  .stack > h2 + *,
  .stack > h3 + * {
    margin-block-start: var(--flow-tight);
  }
}
@layer versatile {
  .stack {
    display: flex;
    flex-direction: column;
  }
  .raster {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 20rem), 100%), 1fr));
  }
  .einzeilig {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }
  .einzeilig > * {
    flex-grow: 1;
    flex-basis: calc((var(--schwelle, 30rem) - 100%) * 999);
  }
  .umbrechend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-tight);
  }
  .center {
    max-inline-size: var(--mass, var(--measure));
  }
  .frame {
    aspect-ratio: var(--verhaeltnis, 16/9);
  }
  .frame > * {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}
@layer versatile {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  :where(body, .abschnitt, .liste, .eintrag) {
    --on-surface-muted: color-mix(in oklab, currentColor 68%, transparent);
    --underline: color-mix(in oklab, currentColor var(--underline-weight, 55%), transparent);
    --on-surface-faint: color-mix(in oklab, currentColor 48%, transparent);
    --line-strong: color-mix(in oklab, currentColor 40%, transparent);
    --line: color-mix(in oklab, currentColor 18%, transparent);
    --line-subtle: color-mix(in oklab, currentColor 10%, transparent);
  }
  body {
    margin: 0;
    --surface: var(--surface-default);
    --on-surface: var(--on-surface-default);
    background: var(--surface);
    color: var(--on-surface);
    font-family: var(--body-font);
    font-size: var(--body-size);
    font-weight: var(--body-weight, 400); font-style: var(--body-style, normal);
    line-height: var(--body-leading);
    -webkit-font-smoothing: antialiased;
  }
  h1 {
    font-family: var(--h1-font);
    font-size: var(--h1-size);
    line-height: var(--h1-leading);
    letter-spacing: var(--h1-tracking);
    font-weight: var(--h1-weight);
    font-style: var(--h1-style, normal);
    margin: 0;
  }
  h2 {
    font-family: var(--h2-font);
    font-size: var(--h2-size);
    line-height: var(--h2-leading);
    letter-spacing: var(--h2-tracking);
    font-weight: var(--h2-weight);
    font-style: var(--h2-style, normal);
    margin: 0;
  }
  h3 {
    font-family: var(--h3-font);
    font-size: var(--h3-size);
    line-height: var(--h3-leading);
    letter-spacing: var(--h3-tracking);
    font-weight: var(--h3-weight);
    font-style: var(--h3-style, normal);
    margin: 0;
  }
  p, ul, ol, dl, figure {
    margin: 0;
  }
  p {
    max-inline-size: var(--measure);
  }
  a {
    color: var(--link, currentColor);
    text-decoration-line: underline;
    text-decoration-color: var(--underline);
    text-decoration-thickness: var(--link-thickness, 1px);
    text-underline-offset: var(--link-offset, 0.15em);
    text-decoration-skip-ink: auto;
  }
  a:hover {
    text-decoration-color: currentColor;
  }
  /* Rueckfall zu `format-detection` im Kopf: Setzt iOS trotzdem einen eigenen
     Link, traegt er die Auszeichnung der Seite und nicht die des Systems. */
  a[x-apple-data-detectors] {
    color: inherit !important;
    font: inherit !important;
    text-decoration: inherit !important;
  }
  :focus-visible {
    outline: var(--border-width-strong, 2px) solid var(--focus, currentColor);
    outline-offset: 2px;
  }
  /* DER SCHLEIER STEHT IM BLOCKBUENDEL, NICHT HIER (3. 9. abends).
     Hier stand dieselbe Regel ein zweites Mal — mit `var(--scrim,
     var(--surface))` als Farbe. `--scrim` gibt es nicht, also griff
     `--surface`: auf einer hellen Seite WEISS. Beide Regeln hatten dieselbe
     Spezifitaet, diese stand spaeter und gewann; ein von Hand gesetztes
     `schleier: { farbe: '#000' }` kam nie an.

     Nur das Grundgeruest bleibt — Lage und Durchlaessigkeit sind unabhaengig
     davon, wie der Schleier aussieht. Was er faerbt, sagt liste.css. */
  .medium--schleier::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-tight);
    font-family: var(--label-font);
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    font-weight: var(--button-weight, 500); font-style: var(--button-style, normal);
    line-height: var(--label-leading, 1.2);
    padding: var(--button-padding, 10px 20px);
    border-radius: var(--radius-button);
    border: var(--button-border, 1px) solid var(--line-strong);
    color: currentColor;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
  }
  .knopf:hover {
    border-color: currentColor;
  }
  .knopf--primaer {
    --surface: var(--surface-accent);
    --on-surface: var(--on-surface-accent);
    background: var(--surface);
    color: var(--on-surface);
    border-color: transparent;
  }
  svg {
    fill: currentColor;
    stroke: currentColor;
  }
  img, video {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}
@layer versatile {
  .tokenseite {
    max-inline-size: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: var(--band);
    display: flex;
    flex-direction: column;
    gap: var(--flow-loose);
  }
  .marke {
    font-family: var(--label-font);
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    font-weight: var(--label-weight);
    font-style: var(--label-style, normal);
    text-transform: uppercase;
    color: var(--on-surface-muted, currentColor);
    opacity: 0.6;
  }
  .lead {
    font-family: var(--lead-font);
    font-size: var(--lead-size);
    line-height: var(--lead-leading);
  }
  .meta {
    font-family: var(--meta-font);
    font-size: var(--meta-size);
    line-height: var(--meta-leading);
    opacity: 0.7;
  }
  .gruppe {
    display: flex;
    flex-direction: column;
    gap: var(--flow);
    padding-block-start: var(--flow-loose);
    border-block-start: 1px solid color-mix(in oklab, currentColor 15%, transparent);
  }
  .proben {
    display: flex;
    flex-direction: column;
    gap: var(--flow);
  }
  .probe__name {
    font-family: var(--label-font);
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    opacity: 0.5;
  }
  .probe__zeile {
    max-inline-size: none;
    margin: 0;
  }
  .flaechen {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }
  .flaeche {
    /* Grund, Schrift, Rahmen kommen aus .flaeche--<schluessel> (Tokens.php,
       surfaceRules) — die Tokenseite baut sie nicht nach, sie prueft sie. */
    /* UNTEN DIE HAELFTE MEHR (J. S., 4. 9.), wie beim gepolsterten Eintrag im
       Buendel: optischer Ausgleich, `--polster-unten: 1` dreht ihn zurueck. */
    --polster: var(--card-padding, var(--padding));
    padding: var(--polster) var(--polster)
             calc(var(--polster) * var(--polster-unten, 1.5));
    border-radius: var(--card-radius, 0);
  }
  .flaeche__name {
    font-family: var(--label-font);
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    opacity: 0.6;
    margin-block-end: var(--flow-tight);
  }
  .rasterprobe {
    display: grid;
    grid-template-columns: repeat(var(--columns, 12), 1fr);
    gap: var(--gutter);
  }
  .rasterprobe i {
    display: block;
    block-size: 3rem;
    background: color-mix(in oklab, currentColor 10%, transparent);
  }
}
/* DIE RANGZEILE STAND HIER WIRKUNGSLOS (gefunden 4. 9.): Eine
   `@layer a, b, c;`-Zeile legt den Rang nur fest, wenn sie VOR den Bloecken
   steht — diese kam nach fuenfen davon und tat nichts. Sie hat eine
   Absicherung vorgetaeuscht, die es nicht gab.

   Wirksam ist allein die Zeile in `theme/versatile.php:59`, die den Rang mit
   dem Inline-CSS ganz oben ausgibt. Dort gehoert sie hin: Ein Stylesheet
   kann nicht garantieren, dass es das erste ist. */