: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 {
    /* Handschriftliche Auszeichnungsschrift von The WEAVING (druidry-weaving).
       Nur fuer Ueberschriften gedacht — als Fliesstext ist sie zu duenn. */
    font-family: 'Pompiere';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/schriften/pompiere-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;
}
/* 🚨 Kacheln, die nur Angemeldeten gelten (GS0060, 19.09.2026). Der Server
   gibt sie `hidden` aus, das Skript in seite.html deckt sie auf.

   Die Zeile mit `!important` ist NICHT Vorsicht auf Verdacht: `hidden` hat
   die niedrigste Rangfolge und verliert gegen jede Klassenregel mit
   `display`. Genau daran stand am 10.09.2026 „Anmelden" neben dem
   Kontomenue „Stefan" (siehe .kw-gast weiter unten). `.kachel` setzt heute
   kein display — aber ein Theme oder die naechste Zeile kann das aendern,
   und der Fehler waere wieder lautlos: die Kachel stuende einfach da. */
.kachel[hidden],
[data-nur-angemeldet][hidden] { display: none !important; }
.kachel h3 { margin-top: 0.6rem; }
.kachel img { border-radius: var(--radius, 0.3rem); }

/* Baustein module: Produktkacheln mit Zustand (E50). data-zustand ist der
   Vertrag mit Server und Skript — bereit | gestoert | unbekannt |
   vorbereitung | nicht-gebucht. Ausgegraut wird, was nicht benutzbar ist;
   kein ZUSTAND blendet je eine Kachel aus („Ich will Fehler sehen").

   ⚠️ Ausgeblendet wird seit dem 19.09.2026 allein nach ZIELGRUPPE
   (data-nur-angemeldet, s. o.) — nie nach Zustand. Wer die Kachel sieht,
   sieht ihren Zustand vollstaendig. */
.module .kacheln { margin-top: 1.2rem; }
.module-einleitung { color: var(--color-muted-foreground, #555); }
.module-gast {
    font-size: 0.9rem;
    color: var(--color-muted-foreground, #555);
    max-width: 46rem;
}
.modul h3 { margin-top: 0; font-size: 1.15rem; }
.modul .modul-ziel { text-decoration: none; color: inherit; }
.modul a.modul-ziel:hover,
.modul a.modul-ziel:focus-visible { color: var(--color-accent, #b8912f); text-decoration: underline; }
.modul p { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--color-muted-foreground, #555); }
.modul .modul-hinweis { font-size: 0.85rem; }
.modul .modul-status { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; }
/* ⚠️ `hidden` verliert gegen jede Klassenregel mit display — dieselbe Falle
   wie bei .kw-gast am 10.09.2026: der Verweis stand trotz Attribut da. */
.module [hidden] { display: none !important; }
.modul[data-zustand="gestoert"],
.modul[data-zustand="unbekannt"],
.modul[data-zustand="vorbereitung"],
.modul[data-zustand="nicht-gebucht"] { opacity: 0.65; }
.modul[data-zustand="bereit"]:hover { border-color: var(--color-primary, #6b4f2a); }
.modul[data-zustand="gestoert"] .modul-hinweis { color: var(--color-destructive, #a33); }

.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; }
}

/* ---------------------------------------------- Der einzeilige Kopf (E46)
   Auf Seiten mit layout_key = 'produkt' steht der Kopf in EINER Zeile, wie in
   der Academy (Layout.tsx): links Logo und Name, in der Mitte die Navigation
   mit Symbolen, rechts die Werkzeuge. Die Klasse setzt seite.html unter
   derselben Bedingung wie die Werkzeuge — Cognitio und die Inhaltsseiten des
   Baukastens behalten das zweizeilige Kopfband oben.

   ⚠️ `.hauptmenue { flex-basis: 100% }` weiter oben ist der Grund, warum das
   Band zweizeilig ist: es zwingt die Navigation in eine eigene Flex-Zeile.
   Hier wird genau das aufgehoben. Der Kopf braucht dafuer mehr Breite als der
   Text (80rem wie max-w-7xl in der Academy, statt 46rem): Marke, fuenf Punkte
   mit Symbol und die Werkzeuge messen zusammen rund 1150 px — gemessen am
   09.09.2026, bei 72rem brach die Zeile noch um. */
.kopf-produkt {
    padding-inline: max(1.2rem, calc((100% - 80rem) / 2));
    padding-block: 0.55rem;
    align-items: center;
    gap: 0.5rem 1.2rem;
}
.kopf-produkt .marke {
    font-style: normal;
    font-size: 1.3rem;
    margin-right: 0;
    padding-block: 0;
    white-space: nowrap;
}
.kopf-produkt .marke-bild { width: 40px; height: 40px; }
.kopf-produkt .hauptmenue {
    flex: 1 1 auto;
    flex-basis: auto;
    flex-direction: row;
    justify-content: center;
    margin-top: 0;
    min-width: 0;
}
.kopf-produkt > .hauptmenue > .menue-band {
    padding: 0;
    gap: 0.15rem 0.25rem;
    justify-content: center;
}
/* Pillen wie in der Academy: gefuellt in der Primaerfarbe fuer den aktiven
   Punkt (im Dunkeln Gold auf Tinte, siehe Farbprofil), sonst nur Schrift.
   In der Grundschrift, nicht in der Ueberschriftenserife — das Band ist hier
   Werkzeug, kein Titel. */
.kopf-produkt > .hauptmenue > .menue-band > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-button, 0.5rem);
    border-bottom: 0;
    font-family: var(--font-family-base, inherit);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.2;
}
.kopf-produkt > .hauptmenue > .menue-band > li > a:hover,
.kopf-produkt > .hauptmenue > .menue-band > li > a:focus-visible {
    color: var(--color-foreground, #1a1a1a);
    background: var(--color-muted, #f0f0f0);
}
.kopf-produkt > .hauptmenue > .menue-band > li.aktiv > a {
    color: var(--color-primary-foreground, #fff);
    background: var(--color-primary, #800020);
    border-bottom-color: transparent;
}
/* Das Symbol vor der Beschriftung — 1em, damit es mit der Schrift waechst. */
.menue-symbol {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -0.15em;
}
.kopf-produkt .kopf-rechts {
    margin-left: auto;
    flex-wrap: nowrap;
    padding-block: 0;
}

/* Gast: „Anmelden oder Konto erstellen" — Anmelden mit Symbol wie in der
   Academy, „Konto erstellen" in der Primaerfarbe ohne Symbol. */
.kw-gast {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
/* 🚨 Das Skript verbirgt die Gastgruppe per `hidden`, sobald jemand
   angemeldet ist. Die Browser-Vorgabe fuer [hidden] ist display:none — aber
   mit der NIEDRIGSTEN Rangfolge, und das `display: inline-flex` darueber
   gewinnt dagegen. Am 10.09.2026 stand deshalb „Anmelden" neben dem
   Kontomenue „Stefan". Der alte Verweis hatte keine eigene display-Regel,
   darum fiel es vorher nie auf. Jede Klasse, die display setzt UND per
   hidden verschwinden soll, braucht diese Zeile. */
.kw-gast[hidden] { display: none; }
.kw-anmelden {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.kw-oder { font-size: 0.95rem; opacity: 0.8; }
.kw-registrieren {
    color: var(--color-primary, #800020);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-button, 0.25rem);
}
.kw-registrieren:hover,
.kw-registrieren:focus-visible { text-decoration: underline; }

/* Schmaler als 78rem: Marke und Werkzeuge bleiben oben in einer Zeile, die
   Navigation rueckt darunter — die Academy nimmt hier ein Klappmenue, das
   braeuchte Skript auf jeder Seite (E2). Die Schwelle ist die gemessene
   Breite der einen Zeile plus Rand; darunter wuerde sonst NUR die rechte
   Gruppe umbrechen, und das sieht nach Fehler aus. Unter 40rem traegt
   „Anmelden" das Symbol allein, wie die uebrigen Werkzeuge. */
@media (max-width: 77.999rem) {
    .kopf-produkt .hauptmenue { flex-basis: 100%; order: 3; }
    .kopf-produkt .kopf-rechts { flex-wrap: wrap; }
}
@media (max-width: 40rem) {
    .kw-anmelden > .kw-text, .kw-oder { display: none; }
}

/* Bild-Baustein als Verweis (Palast-Plan, Abschnitt 10): der Link umschliesst
   die ganze Figur; kein Unterstrich unter der Bildunterschrift, dafuer ein
   leichter Hebe-Effekt beim Zeigen. */
.bild-verweis { display: block; color: inherit; text-decoration: none; }
.bild-verweis .baustein.bild { transition: transform 0.15s ease; }
.bild-verweis:hover .baustein.bild, .bild-verweis:focus-visible .baustein.bild { transform: translateY(-2px); }