/* Öffentliche Seiten: Bio-Seite, Startseite, Rechtstexte, 404.
 *
 * Bewusst eine eigene Datei statt der Verwaltungs-CSS: Was ein Besucher
 * lädt, soll nur enthalten, was ein Besucher sieht. Keine Schriftdatei von
 * einem fremden Server — der Aufruf allein würde die IP-Adresse des
 * Besuchers dorthin übertragen, und genau das soll dieses Projekt nicht tun.
 * Manrope liegt deshalb unter /fremd/manrope/ auf dem eigenen Host.
 *
 * Dieselbe Terrakotta/Creme-Farbwelt wie oeffentlich/verwaltung.css (eigene
 * Token-Kopie statt eines gemeinsamen Imports — diese Datei bleibt bewusst
 * unabhängig). Alle Kontrastwerte nachgerechnet (WCAG-Luminanz, Stand
 * 04.09.2026), nicht geschätzt:
 *   --text        auf --grund     hell 14,92:1  dunkel 15,49:1
 *   --text-leise  auf --grund     hell  5,97:1  dunkel  7,89:1
 *   --text-leise  auf --flaeche   hell  6,28:1  dunkel  7,12:1
 *   --text-dim    auf --grund     hell  4,63:1  dunkel  4,70:1
 *   --akzent-fest auf --grund     hell  5,50:1  dunkel  7,10:1   (Links, aktiver Menüpunkt)
 *   --auf-akzent  auf --akzent-fest hell 5,61:1 dunkel  6,94:1   (gefüllte Knöpfe)
 *   --rand-stark  auf --grund     hell  3,22:1  dunkel  3,62:1   (Umrisse bedienbarer Elemente, WCAG 1.4.11)
 *   --rand-stark  auf --flaeche   hell  3,38:1  dunkel  3,26:1   (Knöpfe: Umriss gegen die EIGENE Füllung,
 *                                 --flaeche als rgba über --grund zusammengesetzt: hell #fefcfb, dunkel #211c18)
 *   --akzent (#c1603f) auf --grund hell nur 3,89:1 — deshalb NUR für große
 *   Schrift (.akzent-wort in Überschriften) und Zierde, nie für Fließtext.
 *
 * Nachbesserung nach Prüfung (05.09.2026): Der dunkle --rand-stark war mit
 * #786250 gegen --grund in Ordnung (3,26:1), gegen die zusammengesetzte
 * Knopffläche aber nur 2,94:1 — der Umriss eines Knopfes steht auf SEINER
 * Füllung, nicht auf dem Seitengrund. Jetzt #7f6957 (3,62 / 3,26); Salbei
 * und Ozean ebenso eine Stufe heller (siehe Schemata unten). Rechenweg:
 * WCAG-Luminanz, rgba(255,255,255,.045) bzw. .05 über --grund komponiert.
 */

/* --- Schrift: Manrope, selbst gehostet (OFL, siehe fremd/LIESMICH.md) ----
 * Nur latin, nur die drei Gewichte, die gebraucht werden. `font-display:
 * swap`: Text erscheint sofort in der Systemschrift und wechselt, sobald
 * die Datei da ist — auf einer Weiterleitungs-Domain darf nichts auf eine
 * Schrift warten. Fließtext bleibt Systemschrift (--sans); Manrope trägt
 * nur, was Charakter braucht: Überschriften, Marke, Kennzahlen, Knöpfe.
 */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fremd/manrope/manrope-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fremd/manrope/manrope-latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fremd/manrope/manrope-latin-800-normal.woff2") format("woff2");
}

:root {
    --grund:        #faf6f1;
    --grund-weich:  #f2ebe3;
    --flaeche:      rgba(255, 255, 255, .70);
    --flaeche-fest: #ffffff;
    --rand-leise:   rgba(46, 32, 26, .07);
    --rand:         rgba(46, 32, 26, .12);
    --text:         #2a1f19;
    --text-leise:   #6b5c50;
    --text-dim:     #7c6d61;
    --akzent:       #c1603f;
    --akzent-fest:  #a8452b;
    --auf-akzent:   #fdf8f4;
    --gold:         #a9803f;
    --akzent-soft:  rgba(193, 96, 63, .12);
    --akzent-line:  rgba(193, 96, 63, .38);
    --glow-warm:    rgba(193, 96, 63, .16);
    --glow-cool:    rgba(120, 132, 168, .10);
    --schatten: 0 30px 70px -34px rgba(42, 31, 25, .35);

    /* Umrisse bedienbarer Elemente brauchen 3:1 zum Hintergrund (WCAG
       1.4.11) — siehe Kopfkommentar; `--rand`/`--rand-leise` bleiben Zierde. */
    --rand-stark: #9c8672;

    /* Körnung für den Hero: SVG-Rauschen als data:-URI (die CSP erlaubt
       img-src data:). Hell: schwarze Körner mit 6 % Deckung; dunkel (unten):
       weiße. Eine Bilddatei wäre eine zweite Anfrage für 160×160 Pixel. */
    --koernung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* Der Glow-/Mesh-Hintergrund (body::before) als EIN Token, damit jedes
       Farbschema unten seinen eigenen mitbringt statt nur die Fleckfarben
       zu tauschen. Creme: warmer Fleck rechts oben, kühler links. */
    --mesh:
        radial-gradient(56rem 38rem at 82% -10%, var(--glow-warm), transparent 62%),
        radial-gradient(46rem 36rem at 8% 10%, var(--glow-cool), transparent 60%),
        linear-gradient(180deg, var(--grund-weich), var(--grund));

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --display: "Manrope", var(--sans);
    --kurve: cubic-bezier(.22, .8, .3, 1);

    color-scheme: light dark;
}

/* Dunkles Thema — zweimal dieselben Werte, bewusst:
 *  1. `[data-theme="dark"]`: thema.js hat entschieden (Sonnenstand oder
 *     Handwahl), unabhängig vom Systemthema.
 *  2. `@media (prefers-color-scheme: dark)`: Rückfall, falls kein Skript
 *     läuft. NUR für :root OHNE data-theme="light" — sonst würde eine per
 *     Knopf erzwungene Hellansicht auf einem dunkel eingestellten System
 *     wieder dunkel (die @media-Regel überschriebe die Token). Vorher stand
 *     hier ein nacktes :root, das war genau dieser Fehler. */
[data-theme="dark"] {
    --grund:        #17110d;
    --grund-weich:  #1d1512;
    --flaeche:      rgba(255, 255, 255, .045);
    --flaeche-fest: #221a15;
    --rand-leise:   rgba(255, 255, 255, .06);
    --rand:         rgba(255, 255, 255, .11);
    --text:         #f2e8df;
    --text-leise:   #b8a596;
    --text-dim:     #8f7c6d;
    --akzent:       #e08a5f;
    --akzent-fest:  #e08a5f;
    --auf-akzent:   #1c130d;
    --gold:         #d4af78;
    --akzent-soft:  rgba(224, 138, 95, .14);
    --akzent-line:  rgba(224, 138, 95, .36);
    --glow-warm:    rgba(224, 138, 95, .19);
    --glow-cool:    rgba(110, 128, 168, .12);
    --schatten: 0 30px 80px -30px rgba(0, 0, 0, .82);
    --rand-stark: #7f6957;
    --koernung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: dark;
}
[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --grund:        #17110d;
        --grund-weich:  #1d1512;
        --flaeche:      rgba(255, 255, 255, .045);
        --flaeche-fest: #221a15;
        --rand-leise:   rgba(255, 255, 255, .06);
        --rand:         rgba(255, 255, 255, .11);
        --text:         #f2e8df;
        --text-leise:   #b8a596;
        --text-dim:     #8f7c6d;
        --akzent:       #e08a5f;
        --akzent-fest:  #e08a5f;
        --auf-akzent:   #1c130d;
        --gold:         #d4af78;
        --akzent-soft:  rgba(224, 138, 95, .14);
        --akzent-line:  rgba(224, 138, 95, .36);
        --glow-warm:    rgba(224, 138, 95, .19);
        --glow-cool:    rgba(110, 128, 168, .12);
        --schatten: 0 30px 80px -30px rgba(0, 0, 0, .82);
        --rand-stark: #7f6957;
        --koernung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
}

/* =========================================================================
 * Farbschemata je Bio-Seite (zweiter Umbau, Baustein 3)
 *
 * `data-schema` steht auf <html> (aus bio_seite.farbschema, Whitelist in
 * BioSeiten::SCHEMATA); „creme" ist der Standard und braucht keinen Block —
 * das sind die Token oben. Jedes weitere Schema überschreibt NUR die Token,
 * der Rest der Datei bleibt. Je Schema drei Blöcke, aus demselben Grund wie
 * beim Dunkelthema oben:
 *   1. [data-schema="x"]                       — helle Fassung
 *   2. [data-schema="x"][data-theme="dark"]    — dunkle Fassung (thema.js)
 *   3. @media dark: :root[data-schema="x"]:not([data-theme="light"])
 *      — dunkle Fassung als Rückfall ohne Skript; :root hebt die Spezifität
 *      über [data-theme="dark"] der Creme-Fassung, sonst gewänne die.
 *
 * Seit Baustein 4 trägt auch ein ELEMENT im Seitenfluss data-schema: die
 * Bio-Demo der Startseite (.mini-vorschau). Die helle Fassung greift dort
 * von selbst ([data-schema="x"] ist nicht an :root gebunden); für die dunkle
 * steht in Block 2 und 3 je ein zweiter Selektor mit Nachfahren-Kombinator
 * (`[data-theme="dark"] [data-schema="x"]`). Ohne den bliebe die Demo bei
 * Nacht hell, während die Seite um sie herum dunkel ist.
 *
 * Kontraste nachgerechnet (WCAG-Luminanz, 04.09.2026; Rechenweg wie im
 * Kopf dieser Datei). Text ≥ 4,5:1, Umrisse bedienbarer Elemente
 * (--rand-stark) ≥ 3:1 — gegen --grund UND gegen die zusammengesetzte
 * Knopffläche (--flaeche über --grund, Wert in Klammern; Nachbesserung
 * 05.09.2026: Salbei und Ozean dunkel waren dagegen unter 3:1 und sind eine
 * Stufe heller); --akzent bleibt wie bei Creme nur großer Schrift und
 * Zierde vorbehalten (hell unter 4,5:1).
 *
 *   nacht     hell: text 16,46 · leise 6,22 (auf --flaeche 6,71) · dim 4,74 · akzent-fest 5,74 · auf-akzent 5,90 · rand-stark 3,34 (3,61)
 *             dunkel: text 17,27 · leise 9,51 (8,66) · dim 6,50 · akzent-fest 10,14 · auf-akzent 9,71 · rand-stark 3,29 (3,00)
 *   salbei    hell: text 13,43 · leise 5,62 (6,07) · dim 4,84 · akzent-fest 6,28 · auf-akzent 6,44 · rand-stark 3,24 (3,50)
 *             dunkel: text 14,99 · leise 8,54 (7,50) · dim 6,09 · akzent-fest 7,30 · auf-akzent 7,51 · rand-stark #637266: 3,54 (3,10)
 *   ozean     hell: text 14,34 · leise 6,00 (6,47) · dim 4,72 · akzent-fest 5,62 · auf-akzent 5,93 · rand-stark 3,31 (3,57)
 *             dunkel: text 15,75 · leise 8,99 (7,97) · dim 6,39 · akzent-fest 9,96 · auf-akzent 8,77 · rand-stark #577180: 3,56 (3,15)
 *   abendrot  hell: text 14,79 · leise 6,15 (6,65) · dim 4,83 · akzent-fest 5,53 · auf-akzent 5,74 · rand-stark 3,13 (3,38)
 *             dunkel: text 15,72 · leise 8,64 (7,71) · dim 5,50 · akzent-fest 8,43 · auf-akzent 8,24 · rand-stark 3,39 (3,03)
 *
 * Die hellen Werte je Schema stehen auch in quelle/OgBild.php (Vorschaubild)
 * — wer hier eine Farbe ändert, zieht sie dort nach.
 * ========================================================================= */

/* --- Nacht: tiefes Blauschwarz mit Gold — die vanheek.biz-Welt ---------- */
[data-schema="nacht"] {
    --grund:        #f2f3f8;
    --grund-weich:  #e8eaf2;
    --flaeche:      rgba(255, 255, 255, .72);
    --flaeche-fest: #ffffff;
    --rand-leise:   rgba(16, 21, 33, .07);
    --rand:         rgba(16, 21, 33, .12);
    --rand-stark:   #7f849a;
    --text:         #101521;
    --text-leise:   #525a6e;
    --text-dim:     #646c80;
    --akzent:       #a67c2a;
    --akzent-fest:  #7a5a14;
    --auf-akzent:   #fbf6ea;
    --gold:         #a67c2a;
    --akzent-soft:  rgba(166, 124, 42, .12);
    --akzent-line:  rgba(166, 124, 42, .40);
    --glow-warm:    rgba(227, 178, 100, .22);
    --glow-cool:    rgba(58, 72, 120, .14);
    --schatten: 0 30px 70px -34px rgba(16, 21, 33, .35);
    --mesh:
        radial-gradient(52rem 34rem at 88% -6%, var(--glow-warm), transparent 60%),
        radial-gradient(60rem 40rem at 0% 100%, var(--glow-cool), transparent 62%),
        linear-gradient(180deg, var(--grund-weich), var(--grund));
}
[data-schema="nacht"][data-theme="dark"],
[data-theme="dark"] [data-schema="nacht"] {
    --grund:        #090b10;
    --grund-weich:  #0e1118;
    --flaeche:      rgba(255, 255, 255, .05);
    --flaeche-fest: #141821;
    --rand-leise:   rgba(255, 255, 255, .06);
    --rand:         rgba(255, 255, 255, .11);
    --rand-stark:   #5c6378;
    --text:         #eef0f6;
    --text-leise:   #aeb4c6;
    --text-dim:     #8d94a8;
    --akzent:       #e3b264;
    --akzent-fest:  #e3b264;
    --auf-akzent:   #14110a;
    --gold:         #e3b264;
    --akzent-soft:  rgba(227, 178, 100, .14);
    --akzent-line:  rgba(227, 178, 100, .38);
    --glow-warm:    rgba(227, 178, 100, .16);
    --glow-cool:    rgba(70, 90, 160, .16);
    --schatten: 0 30px 80px -30px rgba(0, 0, 0, .85);
    --mesh:
        radial-gradient(52rem 34rem at 88% -6%, var(--glow-warm), transparent 60%),
        radial-gradient(60rem 40rem at 0% 100%, var(--glow-cool), transparent 62%),
        linear-gradient(180deg, var(--grund-weich), var(--grund));
}
@media (prefers-color-scheme: dark) {
    :root[data-schema="nacht"]:not([data-theme="light"]),
    :root:not([data-theme="light"]) [data-schema="nacht"] {
        --grund:        #090b10;
        --grund-weich:  #0e1118;
        --flaeche:      rgba(255, 255, 255, .05);
        --flaeche-fest: #141821;
        --rand-leise:   rgba(255, 255, 255, .06);
        --rand:         rgba(255, 255, 255, .11);
        --rand-stark:   #5c6378;
        --text:         #eef0f6;
        --text-leise:   #aeb4c6;
        --text-dim:     #8d94a8;
        --akzent:       #e3b264;
        --akzent-fest:  #e3b264;
        --auf-akzent:   #14110a;
        --gold:         #e3b264;
        --akzent-soft:  rgba(227, 178, 100, .14);
        --akzent-line:  rgba(227, 178, 100, .38);
        --glow-warm:    rgba(227, 178, 100, .16);
        --glow-cool:    rgba(70, 90, 160, .16);
        --schatten: 0 30px 80px -30px rgba(0, 0, 0, .85);
        --mesh:
            radial-gradient(52rem 34rem at 88% -6%, var(--glow-warm), transparent 60%),
            radial-gradient(60rem 40rem at 0% 100%, var(--glow-cool), transparent 62%),
            linear-gradient(180deg, var(--grund-weich), var(--grund));
    }
}

/* --- Salbei: gedämpftes Grün-Grau mit Bronze ---------------------------- */
[data-schema="salbei"] {
    --grund:        #f1f4ef;
    --grund-weich:  #e6ece3;
    --flaeche:      rgba(255, 255, 255, .72);
    --flaeche-fest: #ffffff;
    --rand-leise:   rgba(30, 42, 34, .07);
    --rand:         rgba(30, 42, 34, .12);
    --rand-stark:   #7e8a80;
    --text:         #1e2a22;
    --text-leise:   #56645a;
    --text-dim:     #5f6e66;
    --akzent:       #9a6a38;
    --akzent-fest:  #7d4f22;
    --auf-akzent:   #fbf5ee;
    --gold:         #9a6a38;
    --akzent-soft:  rgba(154, 106, 56, .12);
    --akzent-line:  rgba(154, 106, 56, .40);
    --glow-warm:    rgba(154, 106, 56, .16);
    --glow-cool:    rgba(96, 132, 104, .18);
    --schatten: 0 30px 70px -34px rgba(30, 42, 34, .32);
    --mesh:
        radial-gradient(50rem 36rem at 12% -8%, var(--glow-cool), transparent 62%),
        radial-gradient(44rem 34rem at 95% 30%, var(--glow-warm), transparent 60%),
        linear-gradient(180deg, var(--grund-weich), var(--grund));
}
[data-schema="salbei"][data-theme="dark"],
[data-theme="dark"] [data-schema="salbei"] {
    --grund:        #121816;
    --grund-weich:  #171e1b;
    --flaeche:      rgba(255, 255, 255, .05);
    --flaeche-fest: #1c2421;
    --rand-leise:   rgba(255, 255, 255, .06);
    --rand:         rgba(255, 255, 255, .11);
    --rand-stark:   #637266;
    --text:         #e6ece6;
    --text-leise:   #a9b6ac;
    --text-dim:     #8b9a8f;
    --akzent:       #d19a66;
    --akzent-fest:  #d19a66;
    --auf-akzent:   #1a120a;
    --gold:         #d19a66;
    --akzent-soft:  rgba(209, 154, 102, .14);
    --akzent-line:  rgba(209, 154, 102, .38);
    --glow-warm:    rgba(209, 154, 102, .14);
    --glow-cool:    rgba(96, 150, 118, .16);
    --schatten: 0 30px 80px -30px rgba(0, 0, 0, .82);
    --mesh:
        radial-gradient(50rem 36rem at 12% -8%, var(--glow-cool), transparent 62%),
        radial-gradient(44rem 34rem at 95% 30%, var(--glow-warm), transparent 60%),
        linear-gradient(180deg, var(--grund-weich), var(--grund));
}
@media (prefers-color-scheme: dark) {
    :root[data-schema="salbei"]:not([data-theme="light"]),
    :root:not([data-theme="light"]) [data-schema="salbei"] {
        --grund:        #121816;
        --grund-weich:  #171e1b;
        --flaeche:      rgba(255, 255, 255, .05);
        --flaeche-fest: #1c2421;
        --rand-leise:   rgba(255, 255, 255, .06);
        --rand:         rgba(255, 255, 255, .11);
        --rand-stark:   #637266;
        --text:         #e6ece6;
        --text-leise:   #a9b6ac;
        --text-dim:     #8b9a8f;
        --akzent:       #d19a66;
        --akzent-fest:  #d19a66;
        --auf-akzent:   #1a120a;
        --gold:         #d19a66;
        --akzent-soft:  rgba(209, 154, 102, .14);
        --akzent-line:  rgba(209, 154, 102, .38);
        --glow-warm:    rgba(209, 154, 102, .14);
        --glow-cool:    rgba(96, 150, 118, .16);
        --schatten: 0 30px 80px -30px rgba(0, 0, 0, .82);
        --mesh:
            radial-gradient(50rem 36rem at 12% -8%, var(--glow-cool), transparent 62%),
            radial-gradient(44rem 34rem at 95% 30%, var(--glow-warm), transparent 60%),
            linear-gradient(180deg, var(--grund-weich), var(--grund));
    }
}

/* --- Ozean: tiefes Blau mit Türkis --------------------------------------- */
[data-schema="ozean"] {
    --grund:        #eef4f8;
    --grund-weich:  #e2ecf3;
    --flaeche:      rgba(255, 255, 255, .72);
    --flaeche-fest: #ffffff;
    --rand-leise:   rgba(15, 36, 51, .07);
    --rand:         rgba(15, 36, 51, .12);
    --rand-stark:   #748897;
    --text:         #0f2433;
    --text-leise:   #4a5f6e;
    --text-dim:     #5a6f7e;
    --akzent:       #1a8b93;
    --akzent-fest:  #0b6b74;
    --auf-akzent:   #eefcfc;
    --gold:         #1a8b93;
    --akzent-soft:  rgba(26, 139, 147, .12);
    --akzent-line:  rgba(26, 139, 147, .40);
    --glow-warm:    rgba(79, 209, 214, .22);
    --glow-cool:    rgba(30, 80, 140, .14);
    --schatten: 0 30px 70px -34px rgba(15, 36, 51, .32);
    --mesh:
        radial-gradient(60rem 40rem at 50% -20%, var(--glow-warm), transparent 60%),
        radial-gradient(50rem 40rem at 100% 90%, var(--glow-cool), transparent 60%),
        linear-gradient(180deg, var(--grund-weich), var(--grund));
}
[data-schema="ozean"][data-theme="dark"],
[data-theme="dark"] [data-schema="ozean"] {
    --grund:        #071622;
    --grund-weich:  #0b1d2b;
    --flaeche:      rgba(255, 255, 255, .05);
    --flaeche-fest: #10222f;
    --rand-leise:   rgba(255, 255, 255, .06);
    --rand:         rgba(255, 255, 255, .11);
    --rand-stark:   #577180;
    --text:         #e3f0f6;
    --text-leise:   #a3b9c6;
    --text-dim:     #849cab;
    --akzent:       #4fd1d6;
    --akzent-fest:  #4fd1d6;
    --auf-akzent:   #04252a;
    --gold:         #4fd1d6;
    --akzent-soft:  rgba(79, 209, 214, .14);
    --akzent-line:  rgba(79, 209, 214, .36);
    --glow-warm:    rgba(79, 209, 214, .16);
    --glow-cool:    rgba(40, 90, 170, .20);
    --schatten: 0 30px 80px -30px rgba(0, 0, 0, .85);
    --mesh:
        radial-gradient(60rem 40rem at 50% -20%, var(--glow-warm), transparent 60%),
        radial-gradient(50rem 40rem at 100% 90%, var(--glow-cool), transparent 60%),
        linear-gradient(180deg, var(--grund-weich), var(--grund));
}
@media (prefers-color-scheme: dark) {
    :root[data-schema="ozean"]:not([data-theme="light"]),
    :root:not([data-theme="light"]) [data-schema="ozean"] {
        --grund:        #071622;
        --grund-weich:  #0b1d2b;
        --flaeche:      rgba(255, 255, 255, .05);
        --flaeche-fest: #10222f;
        --rand-leise:   rgba(255, 255, 255, .06);
        --rand:         rgba(255, 255, 255, .11);
        --rand-stark:   #577180;
        --text:         #e3f0f6;
        --text-leise:   #a3b9c6;
        --text-dim:     #849cab;
        --akzent:       #4fd1d6;
        --akzent-fest:  #4fd1d6;
        --auf-akzent:   #04252a;
        --gold:         #4fd1d6;
        --akzent-soft:  rgba(79, 209, 214, .14);
        --akzent-line:  rgba(79, 209, 214, .36);
        --glow-warm:    rgba(79, 209, 214, .16);
        --glow-cool:    rgba(40, 90, 170, .20);
        --schatten: 0 30px 80px -30px rgba(0, 0, 0, .85);
        --mesh:
            radial-gradient(60rem 40rem at 50% -20%, var(--glow-warm), transparent 60%),
            radial-gradient(50rem 40rem at 100% 90%, var(--glow-cool), transparent 60%),
            linear-gradient(180deg, var(--grund-weich), var(--grund));
    }
}

/* --- Abendrot: Aubergine mit Koralle ------------------------------------- */
[data-schema="abendrot"] {
    --grund:        #f8f1f3;
    --grund-weich:  #f1e6ea;
    --flaeche:      rgba(255, 255, 255, .72);
    --flaeche-fest: #ffffff;
    --rand-leise:   rgba(43, 26, 36, .07);
    --rand:         rgba(43, 26, 36, .12);
    --rand-stark:   #9a8390;
    --text:         #2b1a24;
    --text-leise:   #6b5461;
    --text-dim:     #7b6471;
    --akzent:       #d4515b;
    --akzent-fest:  #b0343f;
    --auf-akzent:   #fef5f4;
    --gold:         #c98a4a;
    --akzent-soft:  rgba(212, 81, 91, .12);
    --akzent-line:  rgba(212, 81, 91, .40);
    --glow-warm:    rgba(255, 143, 128, .26);
    --glow-cool:    rgba(120, 60, 110, .14);
    --schatten: 0 30px 70px -34px rgba(43, 26, 36, .35);
    --mesh:
        radial-gradient(56rem 36rem at 100% 0%, var(--glow-warm), transparent 60%),
        radial-gradient(50rem 40rem at -10% 60%, var(--glow-cool), transparent 62%),
        linear-gradient(180deg, var(--grund-weich), var(--grund));
}
[data-schema="abendrot"][data-theme="dark"],
[data-theme="dark"] [data-schema="abendrot"] {
    --grund:        #1a0f18;
    --grund-weich:  #22141f;
    --flaeche:      rgba(255, 255, 255, .05);
    --flaeche-fest: #271a25;
    --rand-leise:   rgba(255, 255, 255, .06);
    --rand:         rgba(255, 255, 255, .11);
    --rand-stark:   #7a6272;
    --text:         #f6e8ee;
    --text-leise:   #c2aab6;
    --text-dim:     #9c8593;
    --akzent:       #ff8f80;
    --akzent-fest:  #ff8f80;
    --auf-akzent:   #23100e;
    --gold:         #e0a86a;
    --akzent-soft:  rgba(255, 143, 128, .14);
    --akzent-line:  rgba(255, 143, 128, .36);
    --glow-warm:    rgba(255, 143, 128, .18);
    --glow-cool:    rgba(150, 70, 140, .18);
    --schatten: 0 30px 80px -30px rgba(0, 0, 0, .85);
    --mesh:
        radial-gradient(56rem 36rem at 100% 0%, var(--glow-warm), transparent 60%),
        radial-gradient(50rem 40rem at -10% 60%, var(--glow-cool), transparent 62%),
        linear-gradient(180deg, var(--grund-weich), var(--grund));
}
@media (prefers-color-scheme: dark) {
    :root[data-schema="abendrot"]:not([data-theme="light"]),
    :root:not([data-theme="light"]) [data-schema="abendrot"] {
        --grund:        #1a0f18;
        --grund-weich:  #22141f;
        --flaeche:      rgba(255, 255, 255, .05);
        --flaeche-fest: #271a25;
        --rand-leise:   rgba(255, 255, 255, .06);
        --rand:         rgba(255, 255, 255, .11);
        --rand-stark:   #7a6272;
        --text:         #f6e8ee;
        --text-leise:   #c2aab6;
        --text-dim:     #9c8593;
        --akzent:       #ff8f80;
        --akzent-fest:  #ff8f80;
        --auf-akzent:   #23100e;
        --gold:         #e0a86a;
        --akzent-soft:  rgba(255, 143, 128, .14);
        --akzent-line:  rgba(255, 143, 128, .36);
        --glow-warm:    rgba(255, 143, 128, .18);
        --glow-cool:    rgba(150, 70, 140, .18);
        --schatten: 0 30px 80px -30px rgba(0, 0, 0, .85);
        --mesh:
            radial-gradient(56rem 36rem at 100% 0%, var(--glow-warm), transparent 60%),
            radial-gradient(50rem 40rem at -10% 60%, var(--glow-cool), transparent 62%),
            linear-gradient(180deg, var(--grund-weich), var(--grund));
    }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.55;
    /* Fußzeile unten halten, auch auf kurzen Seiten (404, leere Bio). */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
main { flex: 1 0 auto; width: 100%; }

/* --- Hintergrund: zwei Glow-Flecken + feines Raster --------------------
 * Dieselbe Bauweise wie oeffentlich/verwaltung.css (siehe dort für die
 * ausführliche Begründung).
 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--mesh);   /* je Farbschema eigener Verlauf, siehe Token oben */
    pointer-events: none;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, var(--rand-leise) 1px, transparent 1px),
        linear-gradient(to bottom, var(--rand-leise) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
    opacity: .7;
    pointer-events: none;
}

/* --- Typografie ---------------------------------------------------------
 * Überschriften in Manrope, größer und enger als vorher — das ist der
 * sichtbarste Unterschied zu „Systemschrift überall". */
h1, h2, h3 {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    text-wrap: balance;
}
h1 {
    margin: 1rem 0 .25rem;
    font-size: 1.9rem;
    overflow-wrap: anywhere;   /* lange Namen ohne Leerzeichen */
}
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }

a { color: var(--akzent-fest); }

/* Kursiver Akzent auf einem einzelnen Wort in einer Hauptüberschrift
   (Vorbild: vanheek.biz .accent-word) — sparsam eingesetzt. Nur in großer
   Schrift (siehe Kopfkommentar zu --akzent). */
.akzent-wort {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--akzent);
}

/* --- Scroll-Reveal (oeffentlich.js) ------------------------------------
 * Ohne JavaScript ist nichts versteckt: Die Regel greift nur unter
 * :root.reveal-aktiv — und DIESE Klasse setzt erst oeffentlich.js selbst,
 * im selben Zug, in dem es alles schon Sichtbare als .is-visible markiert
 * (20.09.2026: vorher hing sie an :root.js-aktiv aus dem blockierenden
 * thema.js — dadurch stand jede Seite erst leer da und „blitzte" dann
 * auf, sobald das deferte Skript nachkam). Mit JavaScript blendet
 * oeffentlich.js jedes .reveal unterhalb des ersten Bildschirms per
 * IntersectionObserver ein (.is-visible), gestaffelt über --verzug. Fällt
 * das deferte Skript aus oder braucht es auf einer langsamen Verbindung
 * lange (thema.js hat die Klasse schon gesetzt, bevor irgendetwas
 * gezeichnet ist), macht die Rückfallanimation nach 1,2 s alles von selbst
 * sichtbar — nichts bleibt je dauerhaft unsichtbar. Bewusst kein Träges
 * dieser Grenze: Der erste Bildschirm (.hero) trägt diese Klasse deshalb gar
 * nicht mehr (Sichtprüfung 05.09.2026 auf einer gedrosselten Verbindung:
 * bis zu 3 s leerer erster Bildschirm, wenn das deferte Skript hinter
 * Schriften und Stylesheet in der Warteschlange hing) — .reveal bleibt für
 * Abschnitte reserviert, die man ohnehin erst beim Herunterscrollen sieht.
 * `translate` statt `transform`, damit sich die Karten-Neigung (.karte,
 * transform) und das Einblenden nicht überschreiben.
 */
:root.reveal-aktiv .reveal {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .7s var(--kurve) var(--verzug, 0ms),
                translate .7s var(--kurve) var(--verzug, 0ms);
    animation: reveal-rueckfall 0s 1.2s forwards;
}
:root.reveal-aktiv .reveal.is-visible { opacity: 1; translate: none; }
@keyframes reveal-rueckfall { to { opacity: 1; translate: none; } }

/* --- Karten mit Neigung (oeffentlich.js setzt --rx/--ry) ----------------
 * Nur die Werte kommen aus dem Skript; wie sich die Karte bewegt, steht
 * hier. Ohne Skript stehen --rx/--ry auf 0 — eine normale Karte. */
.karte {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--hub, 0));
    transition: transform .3s var(--kurve), border-color .3s var(--kurve), box-shadow .3s var(--kurve);
    will-change: transform;
}
.karte:hover { --hub: -4px; }

/* --- Bio-Seite ---------------------------------------------------------- */
.bio {
    max-width: 32rem;
    margin: 0 auto;
    padding: 3.5rem 1.25rem 2rem;
    text-align: center;
}

.bio-bild {
    width: 8rem;
    height: 8rem;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--flaeche-fest);
    box-shadow: 0 2px 12px rgb(0 0 0 / 0.12);
}

/* Avatar-Ring (Baustein 3): ein Verlauf aus Akzent und Gold, der leise um
   das Bild kreist — der ::before ist um 5px größer als das Bild und dreht
   sich als Ganzes; das Bild darüber bleibt still. Ein einziges Element mit
   Animation, keine Bibliothek. Unter „weniger Bewegung" steht der Ring. */
.bio-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    padding: 5px;
    border-radius: 50%;
    isolation: isolate;
}
.bio-avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 0turn, var(--akzent), var(--gold), var(--akzent-line), var(--akzent));
    animation: ring-kreisen 9s linear infinite;
}
.bio-avatar::after {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--akzent-soft), transparent);
}
.bio-avatar .bio-bild { display: block; position: relative; }
@keyframes ring-kreisen { to { transform: rotate(1turn); } }

.beschreibung {
    margin: 0 0 2rem;
    color: var(--text-leise);
}

/* --- Landingpage-Vorlage für Kurzlinks ohne Bio-Seite (Plugin-Baukasten) -
 * Dieselbe schmale, mittige Bühne wie eine Bio-Seite (.bio, oben gesetzt
 * über die zweite Klasse "bio landingpage" auf <main>) — nur mit EINEM
 * Ziel statt einer Liste von Einträgen, deshalb kein eigenes Layout,
 * nur das Symbol und der Knopf. */
.landing-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    color: var(--text-leise);
}
.landing-symbol-bild { border-radius: 50%; }
.landing-text { margin: -0.5rem 0 1.5rem; color: var(--text-leise); }
.landing-weiter { margin-top: 0.25rem; }

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

/* Der ganze Streifen ist die Schaltfläche, nicht nur der Text: Auf dem
   Handy wird hier mit dem Daumen getroffen, nicht mit einem Mauszeiger.
   .eintrag-demo ist derselbe Streifen als <span> — die Bio-Demo der
   Startseite (BioAnsicht::eintraegeFragment mit demo: true): gleiche Optik,
   aber kein Ziel, kein Fokus. */
nav a,
.eintrag-demo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    background: var(--flaeche);
    color: var(--text);
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    overflow-wrap: anywhere;
    transition: border-color .22s var(--kurve), transform .22s var(--kurve);
}

/* Das Symbol zeigt nur die ART des Ziels (Video, Netzwerk, …), keine
   Marke — siehe quelle/Symbole.php. Feste Breite, damit die Beschriftungen
   aller Knöpfe an derselben Stelle beginnen. */
.eintrag-symbol {
    flex: none;
    display: inline-flex;
    color: var(--text-leise);
    transition: color .22s var(--kurve);
}
/* Markenglyphen (Simple Icons, gefüllt) wirken bei gleicher Kantenlänge
   schwerer als die Strichzeichnungen — einen Hauch kleiner, damit beide
   Sorten in einer Liste gleich stark auftreten. */
.eintrag-symbol svg[data-marke] { width: 18px; height: 18px; }
/* Favicon der Zielseite (Plugin-Baukasten) — nur der generische Rückfall
   (keine bekannte Plattform, siehe BioSeiten::mitErkennung()) zeigt hier
   ein <img> statt einer Strichzeichnung. */
.eintrag-favicon { display: block; width: 18px; height: 18px; border-radius: 4px; object-fit: contain; }
.eintrag-text {
    flex: 1;
    text-align: left;
}
/* Pfeil rechts: liegt unsichtbar ein Stück links, läuft beim Hover/Fokus
   nach rechts ein — der Knopf sagt damit „hier geht's weiter", ohne Text. */
.eintrag-pfeil {
    flex: none;
    color: var(--akzent-fest);
    opacity: 0;
    translate: -8px 0;
    transition: opacity .25s var(--kurve), translate .25s var(--kurve);
}
nav a:hover .eintrag-pfeil,
nav a:focus-visible .eintrag-pfeil { opacity: 1; translate: 0 0; }
nav a:hover .eintrag-symbol,
nav a:focus-visible .eintrag-symbol { color: var(--akzent-fest); }

/* Baustein 10: Anzeige-Kennzeichnung (Provisionslink) — steht IM Knopf,
   schon VOR dem Klick sichtbar. Auf einem Touchscreen gibt es kein Hover
   für ein Tooltip, deshalb reicht ein title-Attribut allein nicht. */
.eintrag-anzeige {
    flex: none;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-leise);
}

/* Plugin-Baukasten, erste Welle: reine Inhalts-Bausteine (Überschrift,
   Text, Trennlinie) stehen zwischen den Knöpfen, sehen aber bewusst NICHT
   wie ein Knopf aus — kein Rahmen, kein Grund, kein Pfeil, nichts Klickbares. */
.eintrag-inhalt {
    padding: 0.2rem 0.2rem;
    text-align: left;
}
.eintrag-inhalt h2 {
    margin: 0.6rem 0 0;
    font-size: 1.15rem;
}
.eintrag-inhalt p {
    margin: 0;
    color: var(--text-leise);
    overflow-wrap: anywhere;
}
.eintrag-inhalt-trennlinie {
    padding: 0.4rem 0;
}
.eintrag-inhalt-trennlinie hr {
    margin: 0;
    border: none;
    border-top: 1px solid var(--rand-stark);
}
/* Tagline: eine kurze, einzeilige Zeile — bewusst kleiner und leiser als
   Überschrift und Fließtext, damit sie sich wie ein Untertitel liest. */
.eintrag-tagline {
    font-size: 0.85rem;
    font-style: italic;
}

/* Hervorgehobener Link: dasselbe Knopf-Grundgerüst wie ein normaler Link
   (nav a, oben) — nur mit Bild statt Symbol, mehr Innenabstand und einer
   größeren Bildkachel, damit er sich sichtbar vom Rest abhebt. */
.eintrag-hervorgehoben {
    padding: 0.6rem 1.1rem 0.6rem 0.6rem;
}
.eintrag-hervorgehoben-bild {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--flaeche-fest);
    color: var(--text-leise);
}
.eintrag-hervorgehoben-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Produkt: dieselbe Bild+Titel-Zeile wie der Hervorgehobene Link
   (.eintrag-hervorgehoben), zusätzlich Beschreibung und Preis
   untereinander statt eines einzelnen .eintrag-text. */
.eintrag-produkt-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    text-align: left;
    min-width: 0;
}
.eintrag-produkt-beschreibung {
    font-size: .8rem;
    font-weight: 400;
    color: var(--text-leise);
    overflow-wrap: anywhere;
}
.eintrag-produkt-preis {
    font-size: .85rem;
    color: var(--akzent-fest);
}

/* Karussell: waagerechter Streifen eigener Bilder, per CSS scroll-snap
   wischbar — kein JavaScript, keine Bibliothek. */
.eintrag-karussell {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .2rem;
}
.eintrag-karussell img {
    flex: none;
    scroll-snap-align: start;
    width: 70%;
    max-width: 16rem;
    aspect-ratio: 1;
    border-radius: 12px;
    object-fit: cover;
    background: var(--flaeche-fest);
}

/* Datei-Baustein: Bild/PDF/Audio/Video. Bild und Video zeigen sich selbst
   in voller Breite, PDF bleibt ein Knopf wie ein normaler Link (siehe
   .eintrag-hervorgehoben-bild u.ä., oben), Audio bekommt nur die native
   Zeile des Browsers — keine eigene Gestaltung nötig. */
.eintrag-datei-titel {
    margin: 0 0 .3rem;
    font-size: .85rem;
    color: var(--text-leise);
}
.eintrag-datei-bild,
.eintrag-datei-video {
    display: block;
    width: 100%;
    max-height: 26rem;
    border-radius: 12px;
    object-fit: cover;
}
.eintrag-datei-audio {
    display: block;
    width: 100%;
}

/* Countdown: eine ruhige Zahl, kein Knopf — dieselbe Textfarbe wie die
   übrigen Inhalts-Bausteine (.eintrag-inhalt, weiter oben). */
.eintrag-countdown-label {
    margin: 0 0 .15rem;
    font-size: .85rem;
    color: var(--text-leise);
}
.eintrag-countdown-text {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.anzeige-hinweis {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rand);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-leise);
    text-align: left;
}
.anzeige-hinweis p { margin: 0; }
nav a:hover,
nav a:focus-visible {
    border-color: var(--akzent);
    transform: translateY(-1px);
}
nav a:focus-visible,
.knopf:focus-visible,
.knopf-thema:focus-visible,
.nav-summary:focus-visible,
.marke:focus-visible,
.badge-erstellt:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}

/* Baustein 11: nur in der Vorschau des Editors sichtbar (BioAnsicht::html
   mit $vorschau=true) — auf der echten Bio-Seite gibt es dieses Element
   nicht. */
.vorschau-balken {
    margin: 0;
    /* Rechts Platz für den absolut gesetzten Themenknopf (.bio-kopf), der
       sonst auf dem Text läge — im eingebetteten Rahmen des Editors gesehen. */
    padding: 0.6rem 3.4rem 0.6rem 1rem;
    /* --akzent-fest/--auf-akzent statt einer festen Schriftfarbe: Mit fünf
       Schemata ist ein fester dunkler Ton auf --akzent nicht mehr überall
       lesbar (Ozean hell z. B.). Das Paar ist in jedem Schema gemessen. */
    background: var(--akzent-fest);
    color: var(--auf-akzent);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.leer {
    color: var(--text-leise);
    font-size: 0.85rem;
}

/* --- Teilen/Kopieren (Baustein 3) ----------------------------------------
 * Ohne JavaScript `hidden` (oeffentlich.js blendet ein, was der Browser
 * wirklich kann). Kleine, ruhige Knöpfe unter der Linkliste — Zusatz, kein
 * Hauptelement. Die Ansage („Adresse kopiert.") ist eine aria-live-Region. */
.bio-teilen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem .6rem;
    margin: 1.4rem 0 0;
}
.bio-teilen[hidden] { display: none; }
.knopf-klein {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    background: var(--flaeche);
    color: var(--text-leise);
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    font: inherit;
    font-size: .85rem;
    font-family: var(--display);
    font-weight: 700;
    cursor: pointer;
    transition: color .2s, border-color .2s, transform .22s var(--kurve);
}
.knopf-klein:hover,
.knopf-klein:focus-visible { color: var(--akzent-fest); border-color: var(--akzent); transform: translateY(-1px); }
.knopf-klein:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.bio-ansage {
    flex-basis: 100%;
    min-height: 1.2em;
    color: var(--text-leise);
    font-size: .82rem;
}
.bio-ansage:empty { display: none; }

/* --- QR-Code der Bio-Adresse (Baustein 3) -------------------------------
 * <details>, ohne JS aufklappbar. Der Code bringt seinen weißen Grund selbst
 * mit (QrCode::hintergrundEinsetzen) — auf dunklem Grund liegt er deshalb
 * als helle Kachel, genau so muss ein Scanner ihn haben. */
.bio-qr {
    margin: 1.25rem auto 0;
    max-width: 18rem;
    text-align: center;
}
.bio-qr summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    list-style: none;
    padding: .45rem .95rem;
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--text-leise);
    font-family: var(--display);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    user-select: none;
    transition: color .2s, border-color .2s;
}
.bio-qr summary::-webkit-details-marker { display: none; }
.bio-qr summary::marker { content: ""; }
.bio-qr summary::before {
    content: "";
    width: .9rem;
    height: .9rem;
    /* Vier Quadrate als QR-Andeutung — reines CSS-Raster. */
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 40% 40% no-repeat,
        linear-gradient(currentColor, currentColor) 100% 0 / 40% 40% no-repeat,
        linear-gradient(currentColor, currentColor) 0 100% / 40% 40% no-repeat,
        linear-gradient(currentColor, currentColor) 100% 100% / 40% 40% no-repeat;
    opacity: .8;
}
.bio-qr summary:hover,
.bio-qr summary:focus-visible { color: var(--akzent-fest); border-color: var(--akzent); }
.bio-qr summary:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.bio-qr[open] summary { color: var(--akzent-fest); border-color: var(--akzent-line); }
.bio-qr-code {
    margin: .9rem auto 0;
    padding: .6rem;
    width: min(13rem, 70vw);
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 14px;
    box-shadow: var(--schatten);
    animation: qr-aufklappen .35s var(--kurve);
}
.bio-qr-code svg { display: block; width: 100%; height: auto; }
.bio-qr-adresse {
    margin: .5rem 0 0;
    color: var(--text-leise);
    font-size: .8rem;
    overflow-wrap: anywhere;
}
@keyframes qr-aufklappen { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/* Kopf der Bio-Seite: NUR der Themenknopf, klein, oben rechts — keine
   Marke, keine Navigation (siehe OeffentlicheSeite::kopf, art 'bio'). */
.bio-kopf {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 5;
}
.knopf-thema-klein { width: 2.1rem; height: 2.1rem; }

/* --- Schwebende Kopfzeile (Kapsel) ---------------------------------------
 * Startseite, Rechtstexte, 404. Marke links, Navigation in der Mitte, rechts
 * Themenknopf und Anmelden. Impressum/Datenschutz stehen hier NICHT mehr —
 * die gehören in die Fußzeile, und nur dorthin. */
.marken-kopf {
    position: sticky;
    top: .75rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .75rem 1rem;
    max-width: 56rem;
    margin: .9rem auto 0;
    padding: .55rem .7rem .55rem 1rem;
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--flaeche);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--schatten);
}
@media (max-width: 58rem) { .marken-kopf { margin-left: 1rem; margin-right: 1rem; } }

.marke {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-right: auto;
    color: inherit;
    text-decoration: none;
    font-family: var(--display);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.marke-zeichen { flex: none; transition: transform .35s var(--kurve); }
.marke:hover .marke-zeichen,
.marke:focus-visible .marke-zeichen { transform: rotate(-9deg) scale(1.08); }

/* Navigation in der Kapsel: <details open> — am Desktop ohne <summary>,
   die Liste steht offen; unter 40rem wird die <summary> zum Menü-Knopf und
   die Liste zum Ausklappfeld unter der Kapsel (oeffentlich.js klappt beim
   Start zu). Die allgemeine `nav a`-Knopfgestaltung oben (für die
   Bio-Streifen) wird hier zurückgesetzt: Textlinks, keine zweite Reihe
   Knöpfe neben der Marke. */
.nav-menue { position: relative; }
.nav-summary {
    display: none;
    list-style: none;
    align-items: center;
    gap: .35rem;
    padding: .45rem .7rem;
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    color: var(--text-leise);
    font-size: .85rem;
    cursor: pointer;
    user-select: none;
}
.nav-summary::-webkit-details-marker { display: none; }
.nav-summary::marker { content: ""; }
.nav-summary-text { display: none; }
.nav-liste ul { display: flex; gap: .15rem; }
.nav-liste a {
    display: inline-block;
    padding: .4rem .75rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--display);
    font-weight: 700;
    font-size: .86rem;
    color: var(--text-leise);
    transition: color .2s, background-color .2s, border-color .2s;
}
.nav-liste a:hover,
.nav-liste a:focus-visible {
    color: var(--akzent-fest);
    background: var(--akzent-soft);
    transform: none;
}
.nav-liste a[aria-current] {
    color: var(--akzent-fest);
    border-color: var(--akzent-line);
}

.kopf-rechts { display: flex; align-items: center; gap: .5rem; }

@media (max-width: 40rem) {
    .marken-kopf { padding-right: .55rem; }
    .nav-summary { display: inline-flex; }
    .nav-menue[open] .nav-summary { color: var(--akzent-fest); border-color: var(--akzent); }
    .nav-liste {
        position: absolute;
        top: calc(100% + .6rem);
        right: 0;
        min-width: 13rem;
        padding: .5rem;
        background: var(--flaeche-fest);
        border: 1px solid var(--rand);
        border-radius: 18px;
        box-shadow: var(--schatten);
    }
    .nav-liste ul { display: grid; gap: .15rem; }
    .nav-liste a { display: block; padding: .6rem .9rem; font-size: .95rem; }
    .knopf-anmelden { padding: .45rem .8rem; font-size: .8rem; }
}

/* --- Themenknopf: Sonne ↔ Mond als ein einziges, morphendes Zeichen ------
 * Die Scheibe bekommt über eine SVG-Maske einen „Biss" (.thema-biss), der im
 * Dunkelthema in die Scheibe fährt — aus der Sonne wird ein Mond; die
 * Strahlen drehen dabei weg und blenden aus. cx/cy/r sind in modernen
 * Browsern CSS-Eigenschaften und lassen sich mit Übergang animieren.
 * Ohne JavaScript ist der Knopf nicht da (:root:not(.js-aktiv)) — ein Knopf,
 * der nichts tut, ist schlechter als kein Knopf. */
.knopf-thema {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--text-leise);
    cursor: pointer;
    transition: color .2s, border-color .2s, transform .3s var(--kurve);
}
.knopf-thema:hover { color: var(--akzent-fest); border-color: var(--akzent); transform: rotate(-15deg); }
:root:not(.js-aktiv) .knopf-thema { display: none; }
.thema-zeichen { width: 1.1rem; height: 1.1rem; overflow: visible; }
.thema-biss, .thema-scheibe, .thema-strahlen {
    transition: cx .5s var(--kurve), cy .5s var(--kurve), r .5s var(--kurve),
                opacity .3s var(--kurve), transform .5s var(--kurve);
}
/* Beide Endlagen ausdrücklich als CSS-Werte, nicht nur die dunkle: Fällt die
   [data-theme="dark"]-Regel weg, fiel Chrome sonst NICHT auf die
   SVG-Attribute zurück und das Zeichen blieb ein Mond (im Browser
   nachgesehen, 04.09.2026). */
.thema-biss { cx: 26px; cy: 4px; }
.thema-scheibe { r: 4.4px; }
.thema-strahlen { transform-origin: 12px 12px; opacity: 1; transform: none; }
[data-theme="dark"] .thema-biss { cx: 16.5px; cy: 7.5px; }
[data-theme="dark"] .thema-scheibe { r: 7.5px; }
[data-theme="dark"] .thema-strahlen { opacity: 0; transform: rotate(60deg) scale(.5); }

/* --- Knöpfe ------------------------------------------------------------ */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 0.7rem 1.15rem;
    background: var(--flaeche);
    color: var(--text);
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -.01em;
    transition: border-color .22s var(--kurve), transform .22s var(--kurve), box-shadow .22s var(--kurve), filter .22s;
}
.knopf:hover { border-color: var(--akzent); transform: translateY(-2px); }
.knopf-voll {
    background: var(--akzent-fest);
    color: var(--auf-akzent);
    border-color: var(--akzent-fest);
}
.knopf-voll:hover { filter: brightness(1.06); box-shadow: 0 12px 28px -14px var(--akzent); }
.knopf-anmelden { padding: .5rem .95rem; font-size: .86rem; }

/* --- Startseite --------------------------------------------------------- */
.start {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2rem;
}

/* Hero: große Überschrift, Zeiger-Glow (--mx/--my aus oeffentlich.js) und
   Körnung. Der Leuchtfleck ist ein eigener ::before, damit sich die
   Körnung (::after) nicht mitbewegt. */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
    border: 1px solid var(--rand);
    border-radius: 28px;
    background: var(--flaeche);
    text-align: center;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background: radial-gradient(28rem 20rem at var(--mx, 70%) var(--my, 20%), var(--glow-warm), transparent 65%);
    transition: opacity .4s;
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--koernung);
    pointer-events: none;
}
.hero h1 {
    margin: 0 auto .9rem;
    max-width: 14ch;
    font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.035em;
}
.hero .beschreibung {
    max-width: 34rem;
    margin: 0 auto 1.6rem;
    font-size: 1.08rem;
}
.hero-zeile {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 0;
}
.hero-marke {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1.4rem;
    padding: .35rem .85rem .35rem .5rem;
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--grund);
    font-family: var(--display);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .02em;
    color: var(--text-leise);
}

.frage {
    margin: 3.5rem 0 1.25rem;
    text-align: center;
}

/* Die drei Abschnitte (Link kürzen, Bio-Seite, QR-Code) — jeweils Ziel
   eines Navigationsankers. Nebeneinander, sobald Platz ist. */
.tueren {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    text-align: left;
}
.tuer {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 22px;
    scroll-margin-top: 6rem;
}
/* Leuchtfleck oben rechts, blendet per Opazität ein (vanheek.biz .card::after). */
.tuer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(22rem 12rem at 85% -15%, var(--akzent-soft), transparent 70%);
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
}
.tuer:hover { border-color: var(--akzent-line); box-shadow: var(--schatten); }
.tuer:hover::after { opacity: 1; }
.tuer h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.tuer > p { margin: 0 0 1rem; color: var(--text-leise); font-size: 0.94rem; }
.tuer .knopf { margin-top: auto; align-self: flex-start; }
.tuer-nummer {
    display: inline-block;
    margin-bottom: .8rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .12em;
    color: var(--akzent-fest);
}

/* =========================================================================
 * Startseite 2.0 (Baustein 4) — Werkbank im Hero, Kennzahlen, drei Türen als
 * Erlebnisse, Vergleichsraster, Schritte, FAQ.
 *
 * Keine neuen Farben: alles aus den Token oben. Zwei neue KOMBINATIONEN sind
 * nachgerechnet (WCAG-Luminanz, 04.09.2026):
 *   --akzent-fest auf --akzent-soft über --flaeche (Spalte „SHORT&BIO" im
 *   Vergleichsraster)                         hell 4,65:1   dunkel 5,10:1
 *   --text-dim auf --flaeche-fest (Visitenkarte, Werkbank) hell 4,98:1 dunkel 4,30:1
 *   --text-leise auf --flaeche-fest                        hell 6,42:1 dunkel 7,22:1
 *   → deshalb steht in der Visitenkarte UND in der Werkbank (.werkbank-beispiel,
 *   .hero-qr-module — Nachbesserung 05.09.2026, dort stand noch --text-dim)
 *   --text-leise, nicht --text-dim: Die Werkbank liegt auf --flaeche-fest, und
 *   4,30:1 verfehlt die 4,5:1 für normalen Text.
 * ========================================================================= */

/* --- Werkbank im Hero: Feld links, QR-Code rechts ---------------------
 * Ohne JavaScript verschwinden Feld und Beschriftung (ein Feld, das nichts
 * tut, ist schlechter als keins) und der Erklärsatz .werkbank-ohne-js bleibt
 * stehen; der QR-Code ist dann der serverseitige der Basisadresse. */
.werkbank {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem 2.5rem;
    align-items: center;
    max-width: 46rem;
    margin: 2.2rem auto 0;
    padding: 1.5rem 1.6rem;
    text-align: left;
    background: var(--flaeche-fest);
    border: 1px solid var(--rand);
    border-radius: 24px;
    box-shadow: var(--schatten);
}
.werkbank-label,
.demo-label,
.schema-wahl legend {
    display: block;
    margin: 0 0 .4rem;
    padding: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-leise);
}
.werkbank-feld,
.demo-feld {
    width: 100%;
    padding: .85rem 1rem;
    font: inherit;
    color: var(--text);
    background: var(--grund);
    border: 1px solid var(--rand-stark);
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s;
}
.werkbank-feld { font-size: 1.05rem; }
.werkbank-feld:focus,
.demo-feld:focus {
    outline: none;
    border-color: var(--akzent);
    box-shadow: 0 0 0 4px var(--akzent-soft);
}
.werkbank-feld::placeholder,
.demo-feld::placeholder { color: var(--text-dim); }
.werkbank-fehler .werkbank-feld { border-color: var(--akzent); }
/* Feld und Beschriftung erst, wenn oeffentlich.js die QR-Bibliothek gefunden
   hat (.werkbank-aktiv am Hero) — nicht schon bei „JS läuft": Fällt allein
   qrcode.js aus, stünde sonst ein Feld da, das nichts tut. */
.werkbank-ohne-js { margin: 0; font-size: .9rem; color: var(--text-leise); }
.werkbank-aktiv .werkbank-ohne-js { display: none; }
.hero:not(.werkbank-aktiv) .werkbank-feld,
.hero:not(.werkbank-aktiv) .werkbank-label { display: none; }

.werkbank-kurz { display: grid; gap: .15rem; margin: 1.1rem 0 0; }
.werkbank-kurz-label { font-size: .78rem; color: var(--text-leise); }
.werkbank-adresse {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.werkbank-host { color: var(--text-leise); font-weight: 500; }
.werkbank-kuerzel { color: var(--akzent-fest); }
.werkbank-beispiel { font-size: .78rem; color: var(--text-leise); }
.werkbank .hero-zeile { margin-top: 1.1rem; justify-content: flex-start; }
.werkbank-hinweis {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .8rem 0 0;
    font-size: .82rem;
    color: var(--text-leise);
}
/* Kleiner leuchtender Punkt vor „Nichts davon verlässt deinen Browser." —
   Zierde mit Puls, unter „weniger Bewegung" steht er. */
.werkbank-hinweis::before {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--akzent);
    box-shadow: 0 0 0 4px var(--akzent-soft);
    animation: punkt-puls 2.6s ease-in-out infinite;
}
@keyframes punkt-puls { 50% { box-shadow: 0 0 0 7px var(--akzent-soft); } }

.werkbank-rechts { display: grid; justify-items: center; gap: .5rem; }
/* Der QR-Code bringt seinen weißen Grund mit (QrCode::hintergrundEinsetzen
   bzw. qrcode.js: <rect fill="white">) — die Kachel darum bleibt trotzdem
   weiß, auch bei Nacht: Scanner brauchen Kontrast, keine Themen. */
.hero-qr {
    width: min(13rem, 60vw);
    aspect-ratio: 1;
    padding: .6rem;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 18px;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35);
    transition: opacity .25s;
}
.hero-qr svg { display: block; width: 100%; height: 100%; animation: qr-erscheinen .35s var(--kurve); }
@keyframes qr-erscheinen { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
.werkbank-fehler .hero-qr { opacity: .35; }
.hero-qr-text,
.hero-qr-module {
    margin: 0;
    max-width: 14rem;
    text-align: center;
    overflow-wrap: anywhere;
}
.hero-qr-text { font-size: .8rem; color: var(--text-leise); }
.hero-qr-module { font-size: .75rem; color: var(--text-leise); }

@media (max-width: 40rem) {
    .werkbank { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1.2rem 1.1rem; }
    .werkbank-links { width: 100%; }
    .werkbank .hero-zeile, .werkbank-hinweis { justify-content: center; }
}

/* --- Kennzahlen-Streifen: zwei Zahlen aus der Datenbank -------------- */
.zahlen {
    max-width: 46rem;
    margin: 1.4rem auto 0;
    padding: .75rem 1.25rem;
    text-align: center;
    font-size: .95rem;
    color: var(--text-leise);
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--flaeche);
}
.zahl {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.25em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.zahlen .trenner { margin: 0 .5em; color: var(--rand-stark); }
.zahlen-zusatz { display: inline-block; }

/* --- Bio-Tür: Demo-Steuerung + Handy-Vorschau ---------------------------
 * Die Steuerung braucht JavaScript (Name → textContent, Schema →
 * data-schema auf .mini-vorschau) und ist ohne Skript nicht da. */
.demo-steuerung { display: grid; gap: .7rem; margin: 0 0 1rem; }
:root:not(.js-aktiv) .demo-steuerung { display: none; }
.demo-feld { padding: .6rem .85rem; border-radius: 12px; }
.schema-wahl { margin: 0; padding: 0; border: 0; min-width: 0; }
.schema-kacheln { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Kachel = Pille mit zweifarbigem Punkt (Grund/Akzent des Schemas). Die
   Farben sind die hellen Schema-Werte aus den Token oben — als Kopie in
   --k-*, weil die Kachel selbst NICHT data-schema tragen darf (sonst griffe
   der Nachfahren-Selektor der dunklen Schemata auf sie durch). */
.schema-kachel {
    --k-grund:  #faf6f1;
    --k-akzent: #a8452b;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem .3rem .35rem;
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    background: var(--flaeche);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-leise);
    cursor: pointer;
    transition: border-color .2s, color .2s, box-shadow .2s, transform .2s var(--kurve);
}
.schema-kachel::before {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 1px solid var(--rand);
    background: linear-gradient(135deg, var(--k-grund) 0 50%, var(--k-akzent) 50%);
}
.schema-kachel[data-kachel="nacht"]    { --k-grund: #f2f3f8; --k-akzent: #7a5a14; }
.schema-kachel[data-kachel="salbei"]   { --k-grund: #f1f4ef; --k-akzent: #7d4f22; }
.schema-kachel[data-kachel="ozean"]    { --k-grund: #eef4f8; --k-akzent: #0b6b74; }
.schema-kachel[data-kachel="abendrot"] { --k-grund: #f8f1f3; --k-akzent: #b0343f; }
.schema-kachel:hover { border-color: var(--akzent-line); transform: translateY(-1px); }
.schema-kachel input { width: auto; margin: 0; }
@supports selector(:has(a)) {
    /* Mit :has() verschwindet das rohe Radio — die Pille zeigt den Zustand.
       Der Fokusring bleibt. Ohne :has() steht das Radio sichtbar davor. */
    .schema-kachel input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
    .schema-kachel:has(input:checked) { border-color: var(--akzent-fest); color: var(--text); box-shadow: 0 0 0 3px var(--akzent-soft); }
    .schema-kachel:has(input:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 2px; }
}

/* Die Vorschau ist ein kleines Handy: gerundeter Rahmen, Lautsprecherschlitz
   oben, darin dieselben Klassen wie auf der echten Bio-Seite (nav/ul/li,
   .eintrag-symbol, .eintrag-text) — so sieht sie automatisch genauso aus.
   data-schema am Container färbt sie mit den Schema-Token um (siehe oben). */
.mini-vorschau {
    position: relative;
    width: min(100%, 17rem);
    margin: 0 auto 1rem;
    padding: 1.2rem .9rem .9rem;
    border: 1px solid var(--rand-stark);
    border-radius: 26px;
    background:
        radial-gradient(16rem 9rem at 85% -10%, var(--glow-warm), transparent 60%),
        var(--grund);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--rand-leise), 0 16px 34px -24px rgba(0, 0, 0, .45);
}
.mini-vorschau::before {
    content: "";
    position: absolute;
    top: .5rem;
    left: 50%;
    translate: -50% 0;
    width: 2.4rem;
    height: .28rem;
    border-radius: 999px;
    background: var(--rand-stark);
    opacity: .55;
}
.mini-vorschau .mini-titel {
    margin: .5rem 0 .65rem;
    font-family: var(--display);
    font-weight: 800;
    text-align: center;
    overflow-wrap: anywhere;
}
.mini-vorschau nav ul { gap: .45rem; }
.mini-vorschau nav a,
.mini-vorschau .eintrag-demo { padding: .55rem .75rem; font-size: .84rem; cursor: default; }
/* In der schmalen Vorschau kein Platz für den einlaufenden Pfeil; das
   Anzeige-Etikett eine Stufe kleiner, sonst bricht „Zum Shop" um. */
.mini-vorschau .eintrag-pfeil { display: none; }
.mini-vorschau .eintrag-anzeige { padding: .1rem .35rem; font-size: .58rem; }
.mini-vorschau .anzeige-hinweis { margin-top: .7rem; padding: .5rem .7rem; font-size: .72rem; }
/* Beim Schemawechsel einmal kurz „atmen" (oeffentlich.js setzt .ist-neu neu). */
.mini-vorschau.ist-neu { animation: vorschau-wechsel .45s var(--kurve); }
@keyframes vorschau-wechsel { 30% { scale: .985; } }

/* --- QR-Tür: Visitenkarte mit vCard-Code --------------------------------- */
/* Flex mit Umbruch statt zweispaltigem Raster: In der Drei-Türen-Reihe sind
   rund 11rem Innenbreite übrig — Text neben dem Code bräche dort Wort für
   Wort. Reicht der Platz nicht für 9rem Text neben dem Code, rutscht der
   Code unter den Text, rechts wie auf einer gedruckten Karte. */
.visitenkarte {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: 1rem 1rem 1rem 1.25rem;
    background: var(--flaeche-fest);
    border: 1px solid var(--rand);
    border-radius: 14px;
    box-shadow: 0 16px 34px -24px rgba(0, 0, 0, .45);
    font-size: .82rem;
    color: var(--text-leise);
}
/* Farbkante links wie bei einer gedruckten Karte. */
.visitenkarte::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(var(--akzent), var(--gold));
}
.visitenkarte-text { flex: 1 1 9rem; display: grid; gap: .1rem; min-width: 0; overflow-wrap: break-word; }
.visitenkarte-etikett {
    justify-self: start;
    margin-bottom: .3rem;
    padding: .1rem .5rem;
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.visitenkarte-name { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--text); }
.visitenkarte-leise { color: var(--text-leise); }
.qr-beispiel { flex: none; display: flex; justify-content: center; margin-left: auto; }
.qr-beispiel svg { width: 6.5rem; height: 6.5rem; border-radius: 8px; }

/* --- Statistik-Tür: die Sparkline der Verwaltung, zeichnet sich beim
   Erscheinen der Karte ---------------------------------------------------
   Statistik::alsSparkline() liefert Linie, Fläche und Endpunkt in
   currentColor mit denselben Klassen wie in verwaltung.css; die Regeln
   stehen hier noch einmal, weil bio.css bewusst unabhängig bleibt. Statt
   einer Animation ab Laden (Verwaltung) ein Übergang, der mit .is-visible
   der .reveal-Karte startet: pathLength="1" am <polyline> lässt die Linie
   von stroke-dashoffset 1 auf 0 „schreiben", ohne ihre Länge zu kennen.
   Ohne JS steht die Kurve einfach da (Nachbesserung 05.09.2026: vorher
   Balken — die Verwaltung zeigt seit Baustein 5 keine mehr). */
.statistik-beispiel {
    margin: 0 0 1rem;
    padding: .9rem .9rem .6rem;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: 14px;
}
.statistik-beispiel .sparkline { display: block; width: 100%; height: auto; overflow: visible; color: var(--akzent-fest); }
.sparkline-linie {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.1s var(--kurve);
}
.sparkline-flaeche { fill: currentColor; opacity: .14; transition: opacity 1.1s var(--kurve); }
.sparkline-punkt { fill: currentColor; stroke: var(--grund); stroke-width: 2; vector-effect: non-scaling-stroke; }
:root.js-aktiv .tuer .sparkline-linie { stroke-dashoffset: 1; }
:root.js-aktiv .tuer .sparkline-flaeche { opacity: 0; }
:root.js-aktiv .tuer.is-visible .sparkline-linie { stroke-dashoffset: 0; }
:root.js-aktiv .tuer.is-visible .sparkline-flaeche { opacity: .14; }
.statistik-beispiel figcaption { margin-top: .5rem; font-size: .72rem; color: var(--text-dim); text-align: right; }

/* --- Vergleichsraster ---------------------------------------------------- */
.vergleich, .so-abschnitt, .faq { margin-top: 3.5rem; scroll-margin-top: 6rem; }
.vergleich .frage, .so-abschnitt .frage, .faq .frage { margin-top: 0; }
.vergleich-vorwort {
    max-width: 34rem;
    margin: -.4rem auto 1.4rem;
    text-align: center;
    color: var(--text-leise);
}
/* Breite Tabellen scrollen in ihrem Rahmen, nie die Seite. */
.vergleich-rahmen {
    overflow-x: auto;
    border: 1px solid var(--rand);
    border-radius: 22px;
    background: var(--flaeche);
}
.vergleich-tabelle { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: .92rem; }
.vergleich-tabelle th,
.vergleich-tabelle td {
    padding: .9rem 1.1rem;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--rand-leise);
}
.vergleich-tabelle thead th {
    border-top: 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-leise);
}
.vergleich-tabelle thead th.wir { color: var(--akzent-fest); }
.vergleich-tabelle .wir .marke-zeichen { vertical-align: -3px; margin-right: .3rem; }
.vergleich-tabelle tbody th { width: 21%; font-family: var(--display); font-weight: 700; color: var(--text); }
.vergleich-tabelle td { color: var(--text-leise); }
.vergleich-tabelle td.wir { color: var(--text); background: var(--akzent-soft); }
.vergleich-tabelle td.wir strong { font-family: var(--display); color: var(--akzent-fest); }
.vergleich-pruefung { margin: .9rem 0 0; text-align: center; font-size: .82rem; color: var(--text-dim); }
/* Schmale Bildschirme: Karten statt Spalten. Mit drei Spalten rutschte die
 * SHORT&BIO-Spalte — der eigentliche Grund der Tabelle — aus dem Bild und
 * war nur per Seitwaertsrollen zu finden (Sichtpruefung Handy, 390 px). Die
 * Spaltennamen kommen als ::before-Beschriftung je Zelle; der thead ist
 * dann ueberfluessig, weil display:block ohnehin keine Tabelle mehr ist. */
@media (max-width: 40rem) {
    .vergleich-rahmen { overflow: visible; border: 0; border-radius: 0; background: none; }
    .vergleich-tabelle { display: block; min-width: 0; }
    .vergleich-tabelle thead { display: none; }
    .vergleich-tabelle tbody { display: grid; gap: .8rem; }
    .vergleich-tabelle tr {
        display: block;
        overflow: hidden;
        border: 1px solid var(--rand);
        border-radius: 18px;
        background: var(--flaeche);
    }
    .vergleich-tabelle th,
    .vergleich-tabelle td { display: block; border-top: 0; padding: .75rem 1rem; }
    .vergleich-tabelle tbody th { width: auto; padding-bottom: .15rem; font-size: 1rem; }
    .vergleich-tabelle td::before {
        display: block;
        margin-bottom: .2rem;
        font-family: var(--display);
        font-weight: 800;
        font-size: .68rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--text-leise);
    }
    .vergleich-tabelle td:not(.wir)::before { content: "Typische Anbieter"; }
    .vergleich-tabelle td.wir { border-top: 1px solid var(--rand-leise); }
    .vergleich-tabelle td.wir::before { content: "SHORT&BIO"; color: var(--akzent-fest); }
}
/* Nur für Vorleseprogramme: die leere Kopfzelle bekommt so einen Namen. */
.nur-lesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- FAQ als <details> --------------------------------------------------- */
.faq { max-width: 44rem; margin-left: auto; margin-right: auto; }
.faq-liste { display: grid; gap: .5rem; }
.faq-eintrag {
    border: 1px solid var(--rand);
    border-radius: 16px;
    background: var(--flaeche);
    transition: border-color .2s;
}
.faq-eintrag[open] { border-color: var(--akzent-line); }
.faq-eintrag summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.1rem;
    list-style: none;
    cursor: pointer;
    font-family: var(--display);
    font-weight: 700;
    color: var(--text);
    border-radius: 16px;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::marker { content: ""; }
/* Winkel rechts, dreht sich beim Öffnen. */
.faq-eintrag summary::after {
    content: "";
    flex: none;
    width: .6rem;
    height: .6rem;
    margin-right: .2rem;
    border-right: 2px solid var(--akzent-fest);
    border-bottom: 2px solid var(--akzent-fest);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .3s var(--kurve);
}
.faq-eintrag[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-eintrag summary:hover { color: var(--akzent-fest); }
.faq-eintrag summary:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.faq-eintrag p {
    margin: 0;
    padding: 0 1.1rem 1.05rem;
    color: var(--text-leise);
    animation: faq-auf .3s var(--kurve);
}
.faq-eintrag code {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
                 "DejaVu Sans Mono", "Liberation Mono", monospace;
    font-size: .92em;
}
@keyframes faq-auf { from { opacity: 0; translate: 0 -4px; } }

/* „So funktioniert's": vier nummerierte Schritte als Raster. */
.schritte {
    counter-reset: schritt;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-margin-top: 6rem;
}
.schritte li {
    counter-increment: schritt;
    padding: 1.1rem 1.1rem 1.1rem 3.4rem;
    position: relative;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 16px;
    font-size: .95rem;
}
.schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 1rem;
    top: .95rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--akzent-fest);
    color: var(--auf-akzent);
    font-family: var(--display);
    font-weight: 800;
    font-size: .85rem;
}
.schritte li strong { font-family: var(--display); color: var(--text); }
/* Der frühere Vertrauensblock (.vertrauen) ist seit Baustein 4 im
   Vergleichsraster aufgegangen; die Fußzeile trägt die Kurzfassung. */

/* --- Rechtstexte (Impressum, Datenschutz) ---------------------------- */
.rechtstext {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
    text-align: left;
}
.rechtstext h1 { margin-bottom: 1.5rem; font-size: 2.2rem; }
.rechtstext h2 {
    margin: 2.5rem 0 0.75rem;
    padding-top: 1.75rem;
    font-size: 1.2rem;
    /* Haarlinie je Abschnitt statt einer Karte je Abschnitt — bei 15+
       Überschriften wäre eine Karte je Abschnitt unruhig. */
    border-top: 1px solid var(--rand-leise);
    break-after: avoid;
}
.rechtstext h1 + h2,
.rechtstext .warnung + h2 { border-top: none; padding-top: 0; margin-top: 1.75rem; }
.rechtstext p, .rechtstext li { max-width: 38rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: 0.35rem; }
.rechtstext code {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
                 "DejaVu Sans Mono", "Liberation Mono", monospace;
    font-size: 0.92em;
    overflow-wrap: anywhere;
}

.anschrift { line-height: 1.7; }

.stand { color: var(--text-leise); font-size: 0.85rem; }

/* Fehlen Pflichtangaben, muss das ins Auge springen - ein uebersehener
   Hinweis waere hier so schlecht wie gar keiner. */
.warnung {
    padding: 0.9rem 1.1rem;
    border-left: 4px solid var(--akzent);
    background: var(--flaeche);
    border-radius: 8px;
}

/* --- 404 ----------------------------------------------------------------- */
.fehler {
    max-width: 34rem;
    margin: 0 auto;
    padding: 4rem 1.25rem 3rem;
    text-align: center;
}
.fehler-bild {
    width: min(16rem, 70vw);
    height: auto;
    margin: 0 auto 1.5rem;
    display: block;
    color: var(--akzent-fest);
}
.fehler h1 { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.6rem); }
.fehler p { color: var(--text-leise); }
.fehler .knopf { margin-top: .5rem; }
/* Das lose Kettenglied pendelt leise — reine Zierde, unter „weniger
   Bewegung" steht es still. */
.fehler-lose { transform-origin: 122px 40px; animation: fehler-pendeln 3.2s ease-in-out infinite alternate; }
@keyframes fehler-pendeln { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }

/* --- Fußzeile: die EINZIGE Stelle mit Impressum und Datenschutz ----------- */
.seiten-fuss {
    max-width: 56rem;
    width: 100%;
    margin: 3rem auto 0;
    padding: 1.5rem 1.25rem 2rem;
    border-top: 1px solid var(--rand);
    text-align: center;
    color: var(--text-leise);
    font-size: 0.85rem;
}
.seiten-fuss p { margin: 0 0 .5rem; }
.fuss-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 .6rem; }
.fuss-nav a {
    display: inline;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-weight: 500;
    color: var(--text-leise);
    text-decoration: underline;
    text-decoration-color: var(--rand-stark);
    text-underline-offset: .2em;
}
.fuss-nav a:hover, .fuss-nav a:focus-visible { color: var(--akzent-fest); transform: none; text-decoration-color: currentColor; }
.fuss-jahr { color: var(--text-dim); font-size: .78rem; }
.badge-erstellt {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    padding: .35rem .8rem .35rem .45rem;
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--text-leise);
    text-decoration: none;
    font-size: .78rem;
    transition: border-color .2s, color .2s;
}
.badge-erstellt strong { font-family: var(--display); font-weight: 800; color: var(--text); }
.badge-erstellt:hover { border-color: var(--akzent-line); color: var(--text); }

/* --- Wer „weniger Bewegung" eingestellt hat, bekommt keine. ------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    :root.reveal-aktiv .reveal { opacity: 1; translate: none; }
    .karte, .karte:hover { transform: none; --hub: 0; }
    nav a:hover, nav a:focus-visible, .knopf:hover, .knopf-thema:hover, .knopf-klein:hover { transform: none; }
    .marke:hover .marke-zeichen { transform: none; }
    /* Pfeil ohne Einlaufen: einfach da, sobald der Zeiger drüber ist. */
    .eintrag-pfeil { translate: 0 0; }
    .bio-avatar::before { animation: none; }
    /* Startseite: die Kurve steht fertig da, QR-Code und Vorschau erscheinen
       ohne Bewegung, der Punkt vor dem Hinweis pulst nicht. */
    :root.js-aktiv .tuer .sparkline-linie { stroke-dashoffset: 0; }
    :root.js-aktiv .tuer .sparkline-flaeche { opacity: .14; }
    .hero-qr svg, .mini-vorschau.ist-neu, .werkbank-hinweis::before, .faq-eintrag p { animation: none; }
    .schema-kachel:hover { transform: none; }
}

/* --- Tippziele auf Touch-Geräten (Nachbesserung 05.09.2026) --------------
 * Bei 360 px gemessen: Themenknopf 37 px, kleiner Themenknopf 33,6 px,
 * Menü-Summary 42×34, Anmelden 98×39, Schema-Kachel 80×31, Teilen-Knöpfe und
 * QR-Summary rund 33 px — alles unter den 44 px, die Apple und Google für
 * den Finger empfehlen (WCAG 2.5.8 verlangt 24). Nur dort, wo wirklich
 * getippt wird (pointer: coarse), bekommen diese Pillen eine Mindestfläche
 * von 2.75rem = 44 px; am Desktop bleibt der Rahmen schlank. Kein ::before
 * mit negativem inset: Schema-Kachel und QR-Summary brauchen ihr ::before
 * schon für Farbpunkt und QR-Zeichen. */
@media (pointer: coarse) {
    .knopf-thema, .knopf-thema-klein, .nav-summary, .knopf-anmelden,
    .schema-kachel, .knopf-klein, .bio-qr summary {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }
}

/* --- Druck (Nachbesserung 05.09.2026) ---------------------------------------
 * Beim Drucken einer Bio-Seite oder eines Rechtstexts zählen Inhalt und
 * Adressen — nicht Mesh (body::before), Raster (body::after), Hero-Glow und
 * Körnung, Schatten, Themenknopf, Kapsel-Navigation, Anmelden und die
 * Teilen-Knöpfe; die fixen Hintergründe wiederholten sich sonst auf jeder
 * Seite. Bio-Links bekommen ihre Adresse als Text dazu: Ein gedruckter Knopf
 * ohne Ziel ist wertlos. Das QR-<details> bleibt, wie es ist — ein offenes
 * druckt sich mit, ein geschlossenes kann kein Stylesheet öffnen. .reveal-
 * Elemente, die noch nicht im Sichtbereich waren, stehen sonst mit opacity 0
 * im Ausdruck. */
@media print {
    body::before, body::after, .hero::before, .hero::after,
    .marken-kopf, .bio-kopf, .knopf-thema, .knopf-thema-klein,
    .bio-teilen, .knopf-anmelden, .nav-menue { display: none !important; }
    * { box-shadow: none !important; background-image: none !important; }
    body { background: #fff; color: #000; }
    :root.reveal-aktiv .reveal { opacity: 1; translate: none; }
    .bio nav a::after { content: " (" attr(href) ")"; font-size: .8em; font-weight: 400; }
}