:root {
  color-scheme: light;
  --heading-primary: #800020;
  --heading-secondary: #6a5f5a;
  --text-secondary: #6a5f5a;
  --text-muted-light: #726762;
  --accent-warning: #b08968;
  --accent-success: #9c8b7f;
  --surface-elevated: #f2ece1;
  --text-content: #2a1f1f;
  --text-meta: #6a5f5a;
  --text-placeholder: #726762;
  --text-heading-main: #3a2929;
  --text-description: #6a5f5a;
  --text-strong: #1f2937;
  --text-gray-700: #374151;
  --text-gray-900: #111827;
  --surface-white: #ffffff;
  --text-gray-600: #4b5563;
  --text-gray-500: #6e635e;
  --text-gray-400: #726762;
  --bg-gray-100: #f3f4f6;
  --bg-gray-50: #fafafa;
  --border-gray-200: #e5e7eb;
  --color-background: #f7f3ea;
  --color-foreground: #2a1f1f;
  --color-primary: #800020;
  --color-primary-foreground: #fffaf3;
  --color-secondary: #e9e2d5;
  --color-secondary-foreground: #2a1f1f;
  --color-muted: #efe8dc;
  --color-muted-foreground: #6a5f5a;
  --color-border: #e3d9c9;
  --color-card: #fffaf3;
  --color-card-foreground: #322626;
  --color-accent: #b08968;
  --color-accent-foreground: #1f1414;
  --color-input: #e7ded0;
  --color-ring: #800020;
  --color-destructive-foreground: #ffffff;
  --shadow-rgb: 42 31 31;
  --image-filter-grayscale: 10%;
  --image-filter-hue-rotate: 0deg;
  --image-filter-opacity: 100%;
  --image-filter-saturate: 105%;
  --image-filter-brightness: 102%;
  --image-filter-contrast: 105%;
  --radius: 0.75rem;
  --radius-button: 999px;
  --radius-card: 1rem;
  --radius-input: 0.75rem;
  --radius-dialog: 1.25rem;
  --background-texture: radial-gradient(rgba(0,0,0,0.015) 1px, transparent 1px), radial-gradient(rgba(0,0,0,0.01) 1px, transparent 1px), linear-gradient(180deg, rgba(255,250,243,0.75) 0%, rgba(247,243,234,0.85) 100%);
  --background-texture-size: 8px 8px, 13px 13px, auto;
  --background-texture-repeat: repeat, repeat, no-repeat;
  --background-texture-attachment: fixed;
  --background-blend-mode: normal, normal, multiply;
  --font-family-base: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-size-base: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --heading-primary: #d4ab3c;
    --heading-secondary: #b3a49a;
    --text-secondary: #b3a49a;
    --text-muted-light: #90827b;
    --accent-warning: #d4ab3c;
    --accent-success: #a98d6f;
    --surface-elevated: #2b2124;
    --text-content: #efe6da;
    --text-meta: #b3a49a;
    --text-placeholder: #90827b;
    --text-heading-main: #f3ece2;
    --text-description: #b3a49a;
    --text-strong: #f3ece2;
    --text-gray-700: #e2d8cc;
    --text-gray-900: #efe6da;
    --surface-white: #221a1c;
    --text-gray-600: #b3a49a;
    --text-gray-500: #a4958b;
    --text-gray-400: #90827b;
    --bg-gray-100: #2b2124;
    --bg-gray-50: #221a1c;
    --border-gray-200: #3c3033;
    --color-background: #181113;
    --color-foreground: #efe6da;
    --color-primary: #d4ab3c;
    --color-primary-foreground: #20160a;
    --color-secondary: #2e2426;
    --color-secondary-foreground: #efe6da;
    --color-muted: #241b1d;
    --color-muted-foreground: #b3a49a;
    --color-border: #3c3033;
    --color-card: #221a1c;
    --color-card-foreground: #efe6da;
    --color-accent: #c9697d;
    --color-accent-foreground: #20160a;
    --color-input: #3c3033;
    --color-ring: #d4ab3c;
    --color-destructive-foreground: #20160a;
    --shadow-rgb: 5 3 4;
    --image-filter-grayscale: 10%;
    --image-filter-hue-rotate: 0deg;
    --image-filter-opacity: 100%;
    --image-filter-saturate: 105%;
    --image-filter-brightness: 102%;
    --image-filter-contrast: 105%;
    --radius: 0.75rem;
    --radius-button: 999px;
    --radius-card: 1rem;
    --radius-input: 0.75rem;
    --radius-dialog: 1.25rem;
    --background-texture: radial-gradient(rgba(239,230,218,0.02) 1px, transparent 1px), radial-gradient(rgba(239,230,218,0.015) 1px, transparent 1px), linear-gradient(180deg, rgba(34,26,28,0.75) 0%, rgba(24,17,19,0.9) 100%);
    --background-texture-size: 8px 8px, 13px 13px, auto;
    --background-texture-repeat: repeat, repeat, no-repeat;
    --background-texture-attachment: fixed;
    --background-blend-mode: normal, normal, normal;
    --font-family-base: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-size-base: 16px;
    --color-destructive: #e5484d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --heading-primary: #d4ab3c;
  --heading-secondary: #b3a49a;
  --text-secondary: #b3a49a;
  --text-muted-light: #90827b;
  --accent-warning: #d4ab3c;
  --accent-success: #a98d6f;
  --surface-elevated: #2b2124;
  --text-content: #efe6da;
  --text-meta: #b3a49a;
  --text-placeholder: #90827b;
  --text-heading-main: #f3ece2;
  --text-description: #b3a49a;
  --text-strong: #f3ece2;
  --text-gray-700: #e2d8cc;
  --text-gray-900: #efe6da;
  --surface-white: #221a1c;
  --text-gray-600: #b3a49a;
  --text-gray-500: #a4958b;
  --text-gray-400: #90827b;
  --bg-gray-100: #2b2124;
  --bg-gray-50: #221a1c;
  --border-gray-200: #3c3033;
  --color-background: #181113;
  --color-foreground: #efe6da;
  --color-primary: #d4ab3c;
  --color-primary-foreground: #20160a;
  --color-secondary: #2e2426;
  --color-secondary-foreground: #efe6da;
  --color-muted: #241b1d;
  --color-muted-foreground: #b3a49a;
  --color-border: #3c3033;
  --color-card: #221a1c;
  --color-card-foreground: #efe6da;
  --color-accent: #c9697d;
  --color-accent-foreground: #20160a;
  --color-input: #3c3033;
  --color-ring: #d4ab3c;
  --color-destructive-foreground: #20160a;
  --shadow-rgb: 5 3 4;
  --image-filter-grayscale: 10%;
  --image-filter-hue-rotate: 0deg;
  --image-filter-opacity: 100%;
  --image-filter-saturate: 105%;
  --image-filter-brightness: 102%;
  --image-filter-contrast: 105%;
  --radius: 0.75rem;
  --radius-button: 999px;
  --radius-card: 1rem;
  --radius-input: 0.75rem;
  --radius-dialog: 1.25rem;
  --background-texture: radial-gradient(rgba(239,230,218,0.02) 1px, transparent 1px), radial-gradient(rgba(239,230,218,0.015) 1px, transparent 1px), linear-gradient(180deg, rgba(34,26,28,0.75) 0%, rgba(24,17,19,0.9) 100%);
  --background-texture-size: 8px 8px, 13px 13px, auto;
  --background-texture-repeat: repeat, repeat, no-repeat;
  --background-texture-attachment: fixed;
  --background-blend-mode: normal, normal, normal;
  --font-family-base: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-size-base: 16px;
  --color-destructive: #e5484d;
}

/* ------------------------------------------------------- Schriften
   Selbst ausgeliefert, nicht von Google: ein Verweis auf fonts.googleapis.com
   schickt die IP-Adresse jedes Besuchers dorthin. Die oeffentliche Ansicht
   dieses Dienstes kommt sonst ohne eine einzige fremde Anfrage aus, und das
   soll so bleiben.

   ⚠️ Bis zum 29.08.2026 nannten die Farbprofile 'Fraunces' und
   'EB Garamond', ohne dass irgendetwas geladen wurde — gezeigt wurde der
   naechste Eintrag im Stapel (Iowan Old Style, Palatino, Georgia). Gemessen
   per Breitenvergleich: dieselbe Zeichenkette in `"Fraunces", monospace` war
   exakt so breit wie in `monospace`.
   ⚠️ `document.fonts.check()` taugt dafuer NICHT — sie liefert auch fuer
   fehlende Schriften true.

   Der Weg fuehrt ueber /schriften/, nicht ueber static/: der
   PublicPageController bildet /** ab und verschluckt jeden Pfad.

   Alle drei stehen unter der SIL Open Font License, lateinischer Zeichensatz.
   Herkunft und Lizenz je Datei: static/schriften/LIZENZ.txt */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    /* swap: lieber sofort im Rueckfall lesen als drei Sekunden nichts sehen. */
    font-display: swap;
    src: url('/schriften/fraunces-600.woff2') format('woff2');
}
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    /* Lateinischer Zeichensatz: deutsche Umlaute und ß liegen darin. Osteuropa
       braeuchte latin-ext, Griechisch und Kyrillisch eigene Dateien — die holt
       man dann dazu, statt heute 200 KB fuer nichts auszuliefern. */
    src: url('/schriften/eb-garamond-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/schriften/source-sans-3.woff2') format('woff2');
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/schriften/source-sans-3.woff2') format('woff2');
}

/* GAIAs Website-Baukasten — Grundgestaltung.
 *
 * Handgeschrieben auf Design-Tokens, ohne Tailwind (E5): ein Farbschema, das
 * nur Variablen tauscht, ist genau das, was einen Baukasten austauschbar haelt.
 * Tailwind gilt in web-admin/, nicht hier.
 *
 * Alle --color-* und --font-* kommen aus theme_var der jeweiligen Site und
 * stehen vor dieser Datei in derselben Antwort (StyleController).
 * Rueckfallwerte stehen trotzdem ueberall: eine Site ohne Profil soll
 * schlicht aussehen, nicht unlesbar.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: var(--font-size-base, 17px);
}

body {
    margin: 0;
    background: var(--color-background, #ffffff);
    color: var(--color-foreground, #1a1a1a);
    font-family: var(--font-family-base, Georgia, 'Times New Roman', serif);
    line-height: var(--line-height-base, 1.65);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
    font-family: var(--font-family-heading, var(--font-family-base, Georgia, serif));
    /* ⚠️ --heading-primary und NICHT --color-primary: sonst haben
       Ueberschriften zwangslaeufig dieselbe Farbe wie Verweise. Bei Cognitio
       Temporis sind Verweise Zinnober und Ueberschriften Tinte — mit einer
       gemeinsamen Variablen liesse sich das gar nicht einstellen. */
    color: var(--heading-primary, var(--color-primary, #1a1a1a));
    line-height: 1.25;
    margin: 2.2rem 0 0.8rem;
    text-wrap: balance;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; }

p, ul, ol, blockquote, figure, table { margin: 0 0 1.1rem; }

a {
    color: var(--color-primary, #7a1020);
    /* Farbe ist nie das einzige Unterscheidungsmerkmal — Verweise sind
       zusaetzlich unterstrichen (Barrierefreiheit, Design-System). */
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
a:hover, a:focus-visible { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid var(--color-ring, var(--color-primary, #7a1020));
    outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------- Grundraster */

.kopf, main, .fusszeile {
    max-width: 46rem;
    margin-inline: auto;
    padding-inline: 1.2rem;
}

main { padding-block: 1rem 3rem; }

/* Der Sprung zum Inhalt ist unsichtbar, bis jemand mit der Tastatur
   hinkommt — dann steht er ganz oben. */
.zum-inhalt {
    position: absolute;
    left: -9999px;
}
.zum-inhalt:focus {
    position: static;
    display: inline-block;
    margin: 0.5rem 1.2rem;
}

/* --------------------------------------------------------------- Kopfleiste
   Ein durchgehendes Band ueber die ganze Breite, dessen INHALT auf die
   Textbreite eingemittet bleibt. Der max()-Trick spart einen zusaetzlichen
   Wrapper — sonst muesste jede Vorlage ein <div> mehr tragen, nur damit der
   Hintergrund weiter reicht als der Text. */
.kopf {
    max-width: none;
    padding-inline: max(1.2rem, calc((100% - 46rem) / 2));
    padding-block: 1.7rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.4rem;
    /* Eigene Flaeche, nicht die Kartenfarbe: im Original ist der Kopf eine
       Tinte-Flaeche mit Gold-Haarlinie, unabhaengig davon, ob die Seite hell
       oder dunkel ist. Der Rueckfall haelt die uebrigen Farbprofile heil,
       die diese Werte (noch) nicht kennen. */
    background: var(--color-header, var(--color-card, #fff));
    color: var(--color-header-foreground, var(--color-foreground, #1a1a1a));
    border-bottom: 2px solid var(--color-accent, var(--color-border, #ddd));
    /* Bleibt beim Blaettern oben stehen. Auf langen Texten wie
       „Tafelmalerei" ist der Weg zurueck ins Menue sonst ein Bildschirmmeter
       Scrollen. */
    position: sticky;
    top: 0;
    z-index: 10;
}

.marke {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-family-heading, Georgia, serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: inherit;
    font-style: italic;
    text-decoration: none;
    margin-right: auto;
    padding-block: 0.2rem;
}

/* Das Medaillon. Rund, weil die Vorlage rund ist — die Datei selbst ist
   nahezu quadratisch (2616x2464), also beschneidet object-fit statt zu
   verzerren.
   ⚠️ Feste Breite UND Hoehe im Markup und hier: ohne beides springt der
   Kopf beim Laden, weil der Platz erst mit dem Bild entsteht. */
.marke-bild {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

/* ------------------------------------------------------------------ Menue
   Oberste Ebene als Zeile im Kopfband; Unterebenen als Klappbox beim
   Schweben — wie im Original.

   ⚠️ ALLE Ebenen stehen im Markup (siehe rahmen.html). Ohne JavaScript gibt
   es keinen Weg, sie spaeter nachzuladen; sichtbar macht sie allein dieses
   Stylesheet. Und weil es auf dem Telefon kein Schweben gibt, steht dort
   statt der Klappbox der aktive Zweig in der Zeile. */
.hauptmenue {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.3rem;
}

.menue-band {
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 1.5rem;
}
.hauptmenue > .menue-band > li { position: relative; }

.menue-band li ul { list-style: none; margin: 0; padding: 0; }

/* Schlichte Verweise in der Ueberschriftenserife — keine gefuellten Pillen.
   Im Original traegt das Kopfband nur Schrift; hervorgehoben wird in Gold. */
.menue-band a {
    display: block;
    padding: 0.35rem 0.2rem;
    font-family: var(--font-family-heading, Georgia, serif);
    font-size: 1.02rem;
    line-height: 1.25;
    text-decoration: none;
    color: inherit;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
/* ⚠️ Die oberste Ebene wird ueber die ELTERNSCHAFT angesprochen, nicht ueber
   die Klasse: das Fragment ist rekursiv, also traegt JEDE Ebene die Klasse
   `menue-band`. Mit `.menue-band > li` traefe die Regel auch die Punkte in
   der Klappbox — und dort waere Gold auf Pergament mit 2,48:1 unlesbar.
   Genau das ist am 2026-08-26 passiert. */
.hauptmenue > .menue-band > li > a { white-space: nowrap; }
.hauptmenue > .menue-band > li > a:hover,
.hauptmenue > .menue-band > li > a:focus-visible { color: var(--color-accent, #b8912f); }
.hauptmenue > .menue-band > li.aktiv > a {
    color: var(--color-accent, #b8912f);
    border-bottom-color: var(--color-accent, #b8912f);
}

@media (min-width: 48rem) {
    /* Die Klappbox: Pergamentflaeche mit Tinte-Schrift, wie im Original. */
    .hauptmenue .menue-band li > ul {
        position: absolute;
        top: 100%;
        left: -0.7rem;
        z-index: 20;
        display: none;
        min-width: 12.5rem;
        padding: 0.35rem 0;
        background: var(--color-background, #f3ebd8);
        color: var(--color-foreground, #1c1a17);
        border: 1px solid var(--color-border, #ddd);
        border-radius: var(--radius-card, 0.25rem);
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
    }
    /* :focus-within ist kein Beiwerk — ohne das kommt niemand mit der
       Tastatur in die Klappbox hinein. */
    .hauptmenue .menue-band li:hover > ul,
    .hauptmenue .menue-band li:focus-within > ul { display: block; }

    /* Dritte Ebene oeffnet zur Seite statt nach unten. */
    .hauptmenue .menue-band li li > ul { top: -0.4rem; left: 100%; }

    /* Punkte IN der Klappbox: Tinte auf Pergament (14,6:1).
       ⚠️ AUSDRUECKLICH und nicht per `inherit`. Die Vererbungskette laeuft
       hier durch vier Ebenen (Kopfband parchment -> ul -> li -> Box ink ->
       li -> a), und am 2026-08-26 kam am Ende Pergament auf Pergament heraus
       — Kontrast 1:1, der Text war schlicht unsichtbar. Bei einem rekursiven
       Fragment, in dem jede Ebene dieselbe Klasse traegt, ist `inherit` eine
       Einladung an genau diesen Fehler. */
    .hauptmenue .menue-band ul a {
        color: var(--color-foreground, #1c1a17);
        padding: 0.34rem 0.9rem;
        white-space: nowrap;
        border-bottom: none;
        border-left: 3px solid transparent;
    }
    .hauptmenue .menue-band ul a:hover,
    .hauptmenue .menue-band ul a:focus-visible {
        background: var(--color-muted, #eadfc6);
        color: var(--color-foreground, #1c1a17);
    }

    /* ⚠️ In der Box KEIN Gold: die Flaeche ist Pergament, und Gold darauf
       ergibt nur rund 2,4:1 — unlesbar. Der aktive Punkt wird deshalb durch
       Fettung und einen Goldbalken links gekennzeichnet, waehrend die Schrift
       Tinte bleibt (14,6:1). */
    .hauptmenue .menue-band ul li.aktiv > a {
        color: var(--color-foreground, #1c1a17);
        font-weight: 600;
        border-left-color: var(--color-accent, #b8912f);
    }
}

/* Ohne Mauszeiger gibt es kein Schweben. Dort steht der aktive Zweig
   eingerueckt in der Zeile, alles andere bleibt zu — sonst haette man
   wieder alle Punkte gleichzeitig vor sich. */
@media (max-width: 47.999rem) {
    .hauptmenue .menue-band li > ul { display: none; }
    .hauptmenue .menue-band li.aktiv > ul {
        display: block;
        padding-left: 1rem;
        margin-top: 0.1rem;
    }
    .hauptmenue .menue-band ul a { font-size: 0.92rem; padding: 0.24rem 0.2rem; opacity: 0.85; }
    .hauptmenue .menue-band ul li.aktiv > a { opacity: 1; font-weight: 600; }
}

/* Fusszeile und Sprachwahl bleiben flache Listen — dort gibt es keine
   Ebenen und nichts hervorzuheben. */
.fusszeile ul, .sprachen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}
/* Sprachumschaltung: Flagge und Eigenname, wie in der Academy. */
.sprachen {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}
.sprachen a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius-button, 0.25rem);
    white-space: nowrap;
}
.sprachen a:hover,
.sprachen a:focus-visible { color: var(--color-accent, #b8912f); }
.sprachen li.aktiv a { font-weight: 600; }
/* Die Flagge etwas groesser — als Schriftzeichen wirkt sie sonst zu klein
   neben dem Namen. */
.sprachen .flagge { font-size: 1.1em; line-height: 1; }

/* ⚠️ Diese Liste sieht nur ohne JavaScript jemand: das Skript ersetzt sie
   durch ein Klappmenue (wie in der Academy). Sie muss trotzdem ordentlich
   aussehen — ohne Skript ist sie die einzige Sprachumschaltung.
   Auf schmalen Geraeten traegt dann die Flagge allein; der Name bleibt im
   title-Attribut und fuer Vorleseprogramme erhalten. */
@media (max-width: 40rem) {
    .sprachen .sprachname { display: none; }
}

.hauptmenue a { color: inherit; }

/* Fusszeile: im Original ebenfalls Tinte-Flaeche, Verweise in Silber.
   Wie beim Kopf spannt der Hintergrund ueber die volle Breite, waehrend der
   Inhalt auf Textbreite bleibt. */
.fusszeile {
    max-width: none;
    padding-inline: max(1.2rem, calc((100% - 46rem) / 2));
    padding-block: 1.6rem 2.6rem;
    font-size: 0.92rem;
    background: var(--color-footer, transparent);
    color: var(--color-footer-foreground, var(--color-muted-foreground, #555));
    border-top: 2px solid var(--color-accent, var(--color-border, #ddd));
}
.fusszeile a { color: inherit; }
.fusszeile a:hover { color: var(--color-accent, #b8912f); }
.fusszeile-name { margin-top: 0.6rem; }

/* ----------------------------------------------------------------- Bausteine */

.baustein { margin-block: 1.6rem; }

.hero {
    position: relative;
    margin-block: 0 2rem;
    padding-block: 2.4rem;
    background: var(--color-muted, #f4f4f4);
    border-radius: var(--radius-card, 0.5rem);
    overflow: hidden;
}
.hero-bild {
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
    display: block;
    margin-bottom: 1.2rem;
}
.hero-text { padding-inline: 1.4rem; }
.hero h1 { margin-top: 0; }
.hero-unterzeile {
    font-size: 1.1rem;
    color: var(--color-muted-foreground, #555);
}

.knopf {
    display: inline-block;
    padding: 0.55rem 1.2rem;
    background: var(--color-primary, #7a1020);
    color: var(--color-primary-foreground, #fff);
    border-radius: var(--radius-button, 0.4rem);
    text-decoration: none;
    font-weight: 600;
}
.knopf:hover, .knopf:focus-visible { text-decoration: underline; }

.richtext > :first-child { margin-top: 0; }
.richtext img { border-radius: var(--radius, 0.3rem); }

.bild figcaption, .galerie figcaption {
    font-size: 0.88rem;
    color: var(--color-muted-foreground, #555);
    margin-top: 0.4rem;
}
.bild .nachweis { display: block; font-style: italic; }
.bild.ausrichtung-links { float: left; max-width: 50%; margin: 0 1.2rem 1rem 0; }
.bild.ausrichtung-rechts { float: right; max-width: 50%; margin: 0 0 1rem 1.2rem; }
.bild.ausrichtung-mitte { clear: both; }

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.9rem;
}
.galerie figure { margin: 0; }

.zitat {
    border-left: 4px solid var(--color-quote, var(--color-accent, #c9a227));
    margin-inline: 0;
    padding: 0.4rem 0 0.4rem 1.1rem;
    font-size: 1.08rem;
}
.zitat cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-style: normal;
    color: var(--color-muted-foreground, #555);
}

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.2rem;
}
.kachel {
    background: var(--color-card, #fafafa);
    border: 1px solid var(--color-border, #e4e4e4);
    border-radius: var(--radius-card, 0.5rem);
    padding: 1rem;
}
.kachel h3 { margin-top: 0.6rem; }
.kachel img { border-radius: var(--radius, 0.3rem); }

.beitragsliste ol, .archiv {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1.4rem;
}
.beitragsliste time, .beitrag-daten {
    display: block;
    font-size: 0.88rem;
    color: var(--color-muted-foreground, #555);
}
.beitrag-daten span + span::before { content: " · "; }

.archiv > li {
    border-bottom: 1px solid var(--color-border, #e4e4e4);
    padding-bottom: 1.2rem;
}
.archiv h2 { margin-top: 0.3rem; }
.archiv-leer { color: var(--color-muted-foreground, #555); }

.aufklapper details {
    border-bottom: 1px solid var(--color-border, #e4e4e4);
    padding: 0.7rem 0;
}
.aufklapper summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-foreground, #1a1a1a);
}
.aufklapper summary:focus-visible { outline-offset: 4px; }

.aufruf {
    background: var(--color-secondary, #f0f0f0);
    color: var(--color-secondary-foreground, #1a1a1a);
    border-radius: var(--radius-card, 0.5rem);
    padding: 1.4rem;
    text-align: center;
}

.trenner {
    border: 0;
    border-top: 1px solid var(--color-border, #ddd);
    margin-block: 2.4rem;
}
.trenner-zart { opacity: 0.5; margin-block: 1.4rem; }
.trenner-kraeftig { border-top-width: 3px; }

.fehlerseite { padding-block: 4rem; }

/* ------------------------------------------------------------------- Ausgabe */

@media print {
    .kopf nav, .fusszeile nav, .zum-inhalt { display: none; }
    body { background: #fff; color: #000; }
}


/* ------------------------------------------------- Schmuck des Originals
   Drei Kleinigkeiten aus cognitio-temporis/theme-custom.css, die den
   Charakter ausmachen. Alle drei haengen an Theme-Variablen und sind damit
   im Farb-Editor zu aendern. */

/* Verweise im Fliesstext in der Leitfarbe, mit zurueckhaltender
   Unterstreichung.
   ⚠️ `:not(.knopf)` ist Pflicht: ohne das faerbt diese Regel auch die
   Schrift auf Knoepfen, denn sie ist mit (0,2,1) spezifischer als `.knopf`
   mit (0,1,0). Ein Knopf traegt die Leitfarbe als FLAECHE — die Schrift
   bekaeme damit dieselbe Farbe wie ihr Grund und waere unsichtbar. Genau so
   am 2026-08-27 auf der Produktseite passiert: der Knopf war da, sein Text
   auch, gemessener Kontrast 1:1. */
main .baustein a:not(.knopf) {
    color: var(--color-primary, #a42a28);
    text-decoration-color: color-mix(in srgb, var(--color-primary, #a42a28) 45%, transparent);
    text-underline-offset: 2px;
}

/* Gold-Haarlinie ueber jeder Zwischenueberschrift. */
main .baustein h2::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 0 0 0.4em;
    background: var(--color-accent, #b8912f);
}

/* Zier-Initiale im ersten Absatz.
   ⚠️ Sie steht NICHT im Inhalt — die Sicherung enthaelt keine
   has-drop-cap-Klasse. Im Original ist sie reine Darstellung, und hier
   ebenso: ::first-letter des ersten Absatzes.
   ⚠️ JEDE Eigenschaft hat einen neutralen Rueckfallwert, nicht nur die
   Groesse. Beim zweiten Anlauf stand nur `--initiale-groesse` auf 1em — das
   Zeichen war dann zwar klein, aber weiterhin gefaerbt, fett und links
   umflossen, und fiel entsprechend auf. Ein Ornament ist erst dann aus, wenn
   es in JEDER Hinsicht aus ist.

   ⚠️ Der Rueckfallwert ist neutral, also KEINE Initiale. Sie ist damit ein
   Zusatz, den ein Farbprofil ausdruecklich bestellt, und nicht die Vorgabe
   fuer alle. Beim ersten Anlauf stand hier 3.4em als Rueckfall — damit
   bekam jeder Auftritt eine Zier-Initiale, auch die Produktseite des
   Baukastens, wo sie nichts zu suchen hat. Ein Rueckfallwert ist eine
   Entscheidung fuer alle, die den Wert nicht setzen. */
main article > .baustein.richtext:first-of-type > p:first-of-type::first-letter {
    font-family: var(--initiale-schrift, inherit);
    font-size: var(--initiale-groesse, 1em);
    line-height: var(--initiale-zeile, inherit);
    float: var(--initiale-umfluss, none);
    padding: var(--initiale-abstand, 0);
    color: var(--initiale-farbe, inherit);
    font-weight: var(--initiale-fett, inherit);
}


/* Der Seitentitel als Ueberschrift. Bis zum 2026-08-26 gab es ihn nur fuer
   Beitraege — jede Seite lief ohne ihren Titel, er stand nur im Register des
   Browsers. Die Haarlinie darunter nimmt das Original auf. */
.seiten-kopf, .beitrag-kopf {
    margin-block: 0.6rem 1.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border, #ddd);
}
.seiten-kopf h1, .beitrag-kopf h1 {
    font-family: var(--font-family-heading, Georgia, serif);
    /* Die Sperrung stammt aus theme-custom.css des Originals. */
    letter-spacing: 0.005em;
    font-weight: 400;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.12;
    margin: 0;
}


/* --------------------------------------------------------- Produktleiste
   Nur auf Seiten mit layout_key = 'produkt' (E46). Schmal und ueber dem
   Kopfband — sie gehoert zum Werkzeug, nicht zum Inhalt. */
/* ------------------------------------------------- Werkzeuge im Kopf
   Rechte Seite der Kopfleiste: Sprache, Darstellung, Konto — dieselbe
   Anordnung wie in der Academy. `.marke` traegt margin-right:auto und
   schiebt diese Gruppe von allein nach rechts. */
.kopf-rechts {
    display: flex;
    align-items: center;
    gap: 0.4rem 0.9rem;
    flex-wrap: wrap;
    padding-block: 0.2rem;
}
.kopf-werkzeuge {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.kw-anmelden {
    color: inherit;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-button, 0.25rem);
}
.kw-anmelden:hover,
.kw-anmelden:focus-visible { color: var(--color-accent, #b8912f); }

.kw-menue { position: relative; }

.kw-knopf {
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--radius-button, 0.25rem);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    white-space: nowrap;
}
.kw-knopf:hover,
.kw-knopf:focus-visible { color: var(--color-accent, #b8912f); }

/* Symbole aus lucide, wie in der Academy. currentColor, damit sie die Farbe
   des Kopfes bzw. des Klappmenues erben — sonst haette man zwei Stellen zu
   pflegen und eine davon vergisst man. */
.kw-symbol {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    display: block;
}
.kw-vorn {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.kw-flagge { font-size: 1.15em; line-height: 1; }
/* Der Eintrag setzt seine eigene Anzeigeart weiter unten — hier nur der Knopf,
   sonst stehen zwei Regeln fuer dasselbe an zwei Stellen. */
.kw-knopf { display: inline-flex; align-items: center; gap: 0.45rem; }
.kw-text { white-space: nowrap; }

/* Auf schmalen Geraeten traegt das Symbol allein — im Klappmenue bleibt der
   Text, dort ist Platz. */
@media (max-width: 40rem) {
    .kw-knopf > .kw-text { display: none; }
}

/* ⚠️ Farben hier AUSDRUECKLICH, nicht geerbt. Der Kopf ist im Original eine
   Tinte-Flaeche; ein geerbtes `color` liefe von dort in die Klappbox und
   ergaebe Pergament auf Pergament — am 2026-08-26 gemessener Kontrast 1:1,
   der Text war da und unsichtbar. */
.kw-box {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 20;
    min-width: 12rem;
    padding: 0.35rem;
    background: var(--color-card, #fff);
    color: var(--color-foreground, #1a1a1a);
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius-card, 0.4rem);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.kw-titel {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.7;
}
.kw-trenner {
    height: 1px;
    margin: 0.3rem 0;
    background: var(--color-border, #ddd);
}
.kw-eintrag {
    /* ⚠️ flex, nicht block: `gap` wirkt bei Block-Elementen NICHT. Diese Regel
       steht nach der gemeinsamen weiter oben und gewinnt — mit `display:block`
       wurde der Abstand zwischen Symbol und Text zwar berechnet (7,65 px) und
       dann verworfen. Sichtbar nur beim Nachmessen, nicht im Quelltext. */
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-button, 0.25rem);
    color: var(--color-foreground, #1a1a1a);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
}
.kw-eintrag:hover,
.kw-eintrag:focus-visible {
    background: var(--color-muted, #f0f0f0);
    color: var(--color-foreground, #1a1a1a);
}
.kw-gewaehlt { font-weight: 600; }

/* Auf schmalen Geraeten rutscht die Gruppe unter die Marke; die Klappbox darf
   dann nicht ueber den rechten Rand hinauslaufen. */
@media (max-width: 32rem) {
    .kw-box { right: auto; left: 0; }
}