/* ==========================================================================
klartext.css · Designsystem der Klartext-Familie · Version 3.3 (2026-09-04)
3.3: Schrift auf Nunito umgestellt (wie die Mindo-Familie). Vorher Fraunces für
Überschriften und Inter für den Text. Grund: teachymindo ist das Muster, und
awork setzt eine geometrische Groteske, keine Serifenschrift.
3.2: Stufe 2 und Stufe 3 nachgezogen (Abschnitt 12 am Dateiende): getönter
Seitenuntergrund, weichere Karten, volle Farbfläche, Farbbänder,
Verlaufsknopf, mehrfarbige Überschriften, schwebende Kachel, sehr dunkler
Abschnitt, gekippter Rahmen, freigestellte Objekte, Einblenden beim Scrollen.
Fließtext und Menü bleiben bei --fs-2 = 14,2 px.
2.0: (2026-09-03)
2.0: Drei Gestaltungsprinzipien nachgezogen (Vorbild awork nur als Prinzip, kein Code,
keine Schriften, keine Illustrationen übernommen):
a) Überschriften selbstbewusster: --fs-5 (h1) 32–48 → 33,6–49,6 px, --fs-4 (h2)
24–33,6 → 25,6–36,8 px, --fs-6 (Hero-h1) Untergrenze 38,4 → 41,6 px
(Obergrenze bleibt 57,6 px, sie lag schon über der Zielmarke 3,1rem und wird
nach der Regel „keine Verkleinerung“ nicht gesenkt). Zeilenhöhe --lh-display
1.08 und Laufweite -.02em für h1/Hero (Fraunces verträgt weniger Enge als eine
Grotesk). Neue Hilfsklasse .akzentwort für ein farbiges Wort in einer Überschrift.
b) Abschnittsflächen leicht in der Markenfarbe getönt: .section-soft ist jetzt
--tint-1 (10 % Akzent auf Papier) statt reinweiß, neu dazu .section-tint mit
--tint-2 (16 %) für einzelne Höhepunkte.
c) Knöpfe vollrund: neues Token --r-btn (999px) nur für .btn, weicher Schatten
--shadow-btn, beim Überfahren Anhebung um 2 px, Mindesthöhe 44 px,
Fokusrahmen unverändert deutlich. --r-pill (8px) bleibt für Chips und Badges.
Fließtext und Menüschrift bleiben unverändert groß.
1.9: .checklist-nein (Kreuz statt Haken) und .list-plain (schlichte Punktliste)
ergänzt; bisher gab es nur die Haken-Variante.
1.8: [hidden] schlägt jetzt die display-Angaben der Bausteine (versteckte Kästen
blieben sichtbar), .form > .btn wird nicht mehr auf volle Breite gezogen,
.check hält sich auch innerhalb von .field.
1.7: .breadcrumb war auf dunklen Grund gebaut und auf Papier praktisch unlesbar
(1,5:1); jetzt --ink-3/--ink-2 mit eigener Fassung für dunkle Abschnitte.
1.6: Chips und Badges richten sich auch in .tile links aus.
1.5: Abstandsregeln zwischen Blockbausteinen und Überschriften ergänzt (Hinweise,
Tabellen und Raster klebten an der nächsten Überschrift).
1.4: .chip-warn ergänzt (Gegenstück zu .notice-warn).
1.3: Überschriften-Links in .card/.tile/.price-card erben die Textfarbe (kein blaues
Unterstreichen mehr), .tile-more auch außerhalb von .tile verwendbar.
1.2: Menüschrift auf 1.125rem, .steps-Regeln nur noch auf direkte Kinder (.steps > li).
1.1: --brand-deep im Dunkelmodus auf den hellen Akzent gelegt (Kontrast AA), .figure-leer ergänzt,
Ghost-Buttons und Links im .cta-band und .page-head lesbar gemacht.
Gilt für: Klartext Auswandern (Basis), Klartext Liebe (rosé/warm), Klartext Bordleben (maritim).
Einbinden:
Marke wählen: (nur Akzent-Tokens ändern sich)
Dunkel: oder class="dark" (optional)
Schrift: Fraunces (Überschriften) + Inter (Text) – Google Fonts oder /fonts/klartext-schriften.css.
Grundsatz: Gleiche Klassennamen wie mindo.css (Header, Hero, Karten, Preise, Formulare, FAQ, Footer …),
damit Vorlagen und Werkzeuge für beide Familien funktionieren. Nur Tokens und Tonalität unterscheiden sich.
Kontrast: node werkzeuge/kontrast-pruefen.mjs → alle Paare WCAG AA.
========================================================================== */
/* --------------------------------------------------------------------------
1. Familien-Tokens
-------------------------------------------------------------------------- */
:root {
/* Neutral: Papier statt Weiß, Tinte statt Schwarz */
--k-white: #FFFFFF;
--k-paper: #FAF7F2;
--k-paper-2: #F2EDE4;
--k-line: #DDD6C9;
--k-line-strong: #CBC2B4;
--k-ink: #22303A;
--k-ink-2: #54636E;
--k-ink-3: #57646E; /* 2.0: von #5F6E79 abgedunkelt, damit Hinweistext auch auf den Toenungen AA erreicht */
/* Familie: Navy als Konstante */
--k-navy: #10334A;
--k-navy-2: #0B2435;
--k-navy-text: #C3D0DA;
--k-link: #1C5C82;
--k-ok: #2F6B4F;
--k-ok-soft: #E4EFE8;
--k-warn: #9D3B30;
--k-warn-soft: #F7E6E2;
/* Akzente je Marke: Fläche (accent), Schrift darauf (ink), Textvariante (deep), Tönung (soft) */
--k-accent-auswandern: #E8A13D; --k-accent-auswandern-ink: #10334A; --k-accent-auswandern-deep: #9A5D14; --k-accent-auswandern-soft: #FBF1DF;
--k-accent-liebe: #DD7F86; --k-accent-liebe-ink: #10334A; --k-accent-liebe-deep: #A5464D; --k-accent-liebe-soft: #FBEBEC;
--k-accent-bordleben: #D68F4E; --k-accent-bordleben-ink: #10334A; --k-accent-bordleben-deep: #8A4F1B; --k-accent-bordleben-soft: #F3E6D8;
/* Abschnitts-Tönungen je Marke (2.0): tint-1 = 10 % Akzent auf Papier (ruhige
Wechselfläche statt Reinweiß), tint-2 = 16 % Akzent auf Papier (Höhepunkt).
Kontrast von Fließ-, Sekundär- und Hinweistext darauf: kontrast-pruefen.mjs */
--tint-auswandern-1: #F8EEE0; --tint-auswandern-2: #F7E9D5;
--tint-liebe-1: #F7EBE7; --tint-liebe-2: #F5E4E1;
--tint-bordleben-1: #F6EDE2; --tint-bordleben-2: #F4E6D8;
/* Typografie: Serife für Haltung, Grotesk für Lesbarkeit */
/* 3.3 (04.09.2026): Die Klartext-Familie traegt jetzt dieselbe Schrift wie die
Mindo-Familie. Monika: "Ich finde schon, dass man teachymindo als Muster nehmen
koennte, vom Design und von der Schrift her." Das trifft sich mit dem Vorbild:
awork setzt Sofia Pro, eine geometrische Groteske - Nunito liegt dort deutlich
naeher als eine Serifenschrift.
--font-serif zeigt bewusst auf dieselbe Schrift, damit alle bestehenden Regeln
(Ueberschriften, Marke, Zitat, Preise, Schrittzahlen) ohne Aenderung mitziehen.
Zurueckholen: die beiden alten Zeilen wieder einsetzen und in den Projekten
klartext-schriften.css statt mindo-schriften.css laden.
alt: --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
alt: --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; */
--font-sans: "Nunito", "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
--font-serif: var(--font-sans);
--font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
--fs-0: 0.875rem;
--fs-1: 1rem;
--fs-2: 0.889rem; /* 14,2 Fließtext, Vorgabe Monika 03.09.2026 (vorher 17) */
--fs-3: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
/* 3.4 (04.09.2026): an den bei awork gemessenen Werten ausgerichtet. Dort tragen die
Abschnittsueberschriften bei 1440 px 56 px bei Zeilenhoehe 1,0 und Gewicht 800;
die Klartext-Familie lag bei 36,8 px. Die Mindo-Familie war schon angehoben,
Klartext nicht - daher der sichtbare Unterschied zu teachymindo.
alt: --fs-4: clamp(1.6rem, 1.28rem + 1.5vw, 2.3rem); 25,6–36,8 h2
alt: --fs-5: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem); 33,6–49,6 h1
alt: --fs-6: clamp(2.6rem, 1.8rem + 3.2vw, 3.6rem); 41,6–57,6 Hero-h1 */
--fs-4: clamp(1.75rem, 1.1rem + 3.2vw, 3.5rem); /* 28–56 h2 (awork: 56) */
--fs-5: clamp(2.375rem, 1.7rem + 3vw, 3.6rem); /* 38–57,6 h1 */
--fs-6: clamp(2.75rem, 1.8rem + 4.2vw, 4.2rem); /* 44–67,2 Hero-h1 */
--lh-tight: 1.15;
--lh-display: 1.08; /* h1/Hero: enger als der Rest (2.0) */
--lh-body: 1.65;
--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
--s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
/* alt: clamp(3rem, 2rem + 3.5vw, 5rem) = 48–80 px. awork setzt 120–136 px. */
--section-y: clamp(4.2rem, 2.8rem + 5.6vw, 7.7rem); /* 67–123 px */
--wrap: 1120px;
--wrap-narrow: 740px;
--r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 8px; /* Chips und Badges bleiben eckig */
--r-btn: 999px; /* Knöpfe vollrund (2.0, vorher --r-pill = 8px) */
--shadow-btn: 0 1px 2px rgba(16, 51, 74, .10), 0 4px 12px rgba(16, 51, 74, .10);
--shadow-btn-hover: 0 2px 4px rgba(16, 51, 74, .12), 0 10px 22px rgba(16, 51, 74, .16);
--shadow-sm: 0 1px 2px rgba(16, 51, 74, .06), 0 2px 8px rgba(16, 51, 74, .05);
--shadow-md: 0 2px 4px rgba(16, 51, 74, .05), 0 10px 28px rgba(16, 51, 74, .09);
--shadow-lg: 0 4px 8px rgba(16, 51, 74, .06), 0 20px 48px rgba(16, 51, 74, .12);
--motion: 160ms ease;
/* Semantische Tokens */
--bg: var(--k-paper);
--bg-soft: var(--k-paper-2);
--surface: var(--k-white);
--line: var(--k-line);
--line-strong: var(--k-line-strong);
--ink: var(--k-ink);
--ink-2: var(--k-ink-2);
--ink-3: var(--k-ink-3);
--link: var(--k-link);
--dark: var(--k-navy);
--dark-2: var(--k-navy-2);
--dark-text: var(--k-navy-text);
--stark: var(--k-navy); /* kräftige Textfarbe auf hellem Grund: Überschriften, Ghost-Button, Zahlen */
--brand: var(--k-accent-auswandern);
--brand-ink: var(--k-accent-auswandern-ink);
--brand-deep: var(--k-accent-auswandern-deep);
--brand-soft: var(--k-accent-auswandern-soft);
--tint-1: var(--tint-auswandern-1);
--tint-2: var(--tint-auswandern-2);
--cta: var(--brand);
--cta-ink: var(--brand-ink);
--cta-hover: color-mix(in srgb, var(--brand) 88%, #000);
--cta-text: var(--brand-deep);
--cta-soft: var(--brand-soft);
--ok: var(--k-ok); --ok-soft: var(--k-ok-soft);
--warn: var(--k-warn); --warn-soft: var(--k-warn-soft);
color-scheme: light;
}
[data-brand="auswandern"] { --brand: var(--k-accent-auswandern); --brand-ink: var(--k-accent-auswandern-ink); --brand-deep: var(--k-accent-auswandern-deep); --brand-soft: var(--k-accent-auswandern-soft); --tint-1: var(--tint-auswandern-1); --tint-2: var(--tint-auswandern-2); }
[data-brand="liebe"] { --brand: var(--k-accent-liebe); --brand-ink: var(--k-accent-liebe-ink); --brand-deep: var(--k-accent-liebe-deep); --brand-soft: var(--k-accent-liebe-soft); --tint-1: var(--tint-liebe-1); --tint-2: var(--tint-liebe-2); }
/* Grund-Alternativen (per Attribut wählbar; Standard = A: Papier) */
[data-grund="weiss"] { --bg: var(--k-white); --bg-soft: var(--k-paper); } /* B: Weiß als Grund, Papier als Wechselfläche */
[data-kopf="dunkel"] .site-header { background: color-mix(in srgb, var(--dark) 94%, transparent); border-color: rgba(255,255,255,.1); }
[data-kopf="dunkel"] .site-header .brand, [data-kopf="dunkel"] .main-nav a, [data-kopf="dunkel"] .nav-toggle { color: #fff; }
[data-kopf="dunkel"] .site-header .brand .brand-sub { color: var(--brand); }
[data-kopf="dunkel"] .main-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
[data-kopf="dunkel"] .main-nav a[aria-current="page"], [data-kopf="dunkel"] .main-nav a.active { color: #fff; }
@media (max-width: 1024px) { [data-kopf="dunkel"] .main-nav { background: var(--dark); } [data-kopf="dunkel"] .main-nav a { border-color: rgba(255,255,255,.1); } }
[data-kopf="dunkel"] .nav-toggle { border-color: rgba(255,255,255,.4); } /* C: dunkler Kopf wie bei Bordleben/Peter */
/* Auf dunklem Kopf gilt dieselbe Logo-Regel wie auf Fotos: nur die helle Fassung (LOGOS.md) */
[data-kopf="dunkel"] .site-header .brand .logo-standard { display: none; }
[data-kopf="dunkel"] .site-header .brand .logo-invers { display: block; }
[data-brand="bordleben"] { --brand: var(--k-accent-bordleben); --brand-ink: var(--k-accent-bordleben-ink); --brand-deep: var(--k-accent-bordleben-deep); --brand-soft: var(--k-accent-bordleben-soft); --tint-1: var(--tint-bordleben-1); --tint-2: var(--tint-bordleben-2); }
.dark, [data-theme="dark"] {
--bg: #0E1B26; --bg-soft: #142433; --surface: #182B3B;
--line: #27404F; --line-strong: #36526A;
--ink: #EEF1F3; --ink-2: #B6C3CC; --ink-3: #93A3AE;
--link: #8FC2E6;
--dark: #081521; --dark-2: #050E17; --dark-text: #B6C3CC;
--stark: #EEF1F3;
/* --brand-deep ist die dunkle Textvariante des Akzents; auf dunklem Grund käme sie nur auf
1,9–3,3:1. Im Dunkelmodus übernimmt der helle Akzent selbst diese Rolle (4,8–6,2:1 auf
--brand-soft). Geprüft mit: node werkzeuge/kontrast-pruefen.mjs */
--brand-deep: var(--brand);
--brand-soft: #26303C; --ok-soft: #14301F; --warn-soft: #3A1E1A;
/* Gegenstücke zu den Tönungen (2.0): im Dunkelmodus leicht angehoben statt aufgehellt. */
--tint-1: #13202C; --tint-2: #1A2C3B;
--shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 10px 28px rgba(0,0,0,.45); --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
color-scheme: dark;
}
/* --------------------------------------------------------------------------
2. Basis-Reset
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-2); line-height: var(--lh-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video, picture { max-width: 100%; height: auto; display: block; }
img { font-style: italic; }
/* alt (bis 3.2): font-weight: 600 und font-variation-settings: "opsz" 144, "SOFT" 30 -
das waren die Achsen von Fraunces und wirken bei Nunito nicht. Gewicht 700 wie in
der Mindo-Familie, damit teachymindo und Klartext gleich wirken. */
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; margin: 0 0 .5em; line-height: var(--lh-tight); letter-spacing: -.015em; color: var(--stark); text-wrap: balance; }
h1 { font-size: var(--fs-5); line-height: var(--lh-display); letter-spacing: -.02em; }
/* alt: line-height 1.12, Gewicht aus der h-Regel (700). awork faehrt 1,0 und 800. */
h2 { font-size: var(--fs-4); font-weight: 800; line-height: 1.04; letter-spacing: -.022em; }
h3 { font-size: var(--fs-3); }
h4 { font-size: var(--fs-2); font-family: var(--font-sans); font-weight: 700; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li { margin: .3em 0; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }
strong, b { font-weight: 600; }
small, .small { font-size: var(--fs-0); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
code, kbd, pre { font-family: var(--font-mono); font-size: .92em; }
pre { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-4); overflow-x: auto; }
blockquote { font-family: var(--font-sans); font-size: var(--fs-3); font-weight: 600; border-left: 3px solid var(--brand); padding: .2em 0 .2em 1.1em; color: var(--stark); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brand-soft); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: var(--s-2); z-index: 1000; background: var(--dark); color: #fff; padding: .6em 1em; border-radius: var(--r-sm); text-decoration: none; }
.skip-link:focus { left: var(--s-2); }
/* --------------------------------------------------------------------------
3. Layout
-------------------------------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.wrap-narrow { width: min(var(--wrap-narrow), 100% - 2.5rem); margin-inline: auto; }
.section { padding-block: var(--section-y); }
/* Tönung statt Reinweiß (2.0): .section-soft ist die ruhige Wechselfläche (10 % Akzent),
.section-tint der Höhepunkt (22 %). Alte Fassung: background: var(--surface). */
.section-soft { background: var(--tint-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-tint { background: var(--tint-2); }
/* Auf der kräftigeren Tönung liegt der Akzent-Textton als 14-px-Kicker knapp unter AA
(4,45:1 bei auswandern); dort trägt der kräftige Textton. Große Schrift bleibt beim
Akzent (.akzentwort, Überschriften) – dafür genügen nach WCAG 3:1. */
.section-tint .kicker { color: var(--stark); }
.section-dark { background: var(--dark); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p, .section-dark li { color: var(--dark-text); }
.section-dark a:not(.btn) { color: #fff; }
.section-brand { background: var(--brand-soft); }
.section-head { max-width: 680px; margin: 0 0 var(--s-7); } /* Klartext: linksbündig, ruhiger */
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-2); font-size: var(--fs-2); }
.grid { display: grid; gap: var(--s-5); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-7); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } }
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.text-center { text-align: center; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.kicker { display: inline-block; font-size: var(--fs-0); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: var(--s-3); }
.lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); color: var(--ink-2); max-width: 62ch; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose img, .prose .figure { margin-block: var(--s-6); }
/* Ueberschriftengroesse unabhaengig von der Gliederungsebene (z. B. ein h2 in einer Karte) */
.as-h2 { font-size: var(--fs-4); }
.as-h3 { font-size: var(--fs-3); }
.as-h4 { font-size: var(--fs-2); font-family: var(--font-sans); font-weight: 700; }
/* Ein einzelnes Wort in einer Überschrift in der Markenfarbe (2.0).
Nur für Überschriften gedacht (große Schrift), nicht für Fließtext.
Auf hellem Grund die dunkle Textvariante --brand-deep, auf dunklem Grund der
helle Akzent selbst. Wir gehen wirklich …
*/
.akzentwort { color: var(--brand-deep); }
.section-dark .akzentwort, .hero-dark .akzentwort, .cta-band .akzentwort,
.page-head .akzentwort, .site-footer .akzentwort { color: var(--brand); }
/* --------------------------------------------------------------------------
4. Buttons
-------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .8em 1.5em; border-radius: var(--r-btn); border: 1.5px solid transparent; min-height: 2.75rem; font-weight: 600; font-size: var(--fs-1); line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-btn); transition: background var(--motion), color var(--motion), border-color var(--motion), transform var(--motion), box-shadow var(--motion); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-btn); }
/* Fokusrahmen bleibt deutlich sichtbar und wird vom Schatten nicht verdeckt. */
.btn:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 3px; }
.section-dark .btn:focus-visible, .hero-dark .btn:focus-visible, .cta-band .btn:focus-visible,
.page-head .btn:focus-visible, .site-footer .btn:focus-visible { outline-color: #fff; }
.btn-primary { background: var(--dark); color: #fff; } /* Klartext: Navy handelt, Akzent hebt hervor */
.btn-primary:hover { background: var(--dark-2); color: #fff; }
.btn-accent { background: var(--brand); color: var(--brand-ink); }
.btn-accent:hover { background: var(--cta-hover); color: var(--brand-ink); }
.btn-secondary { background: var(--surface); color: var(--stark); border-color: var(--stark); }
.btn-secondary:hover { background: var(--stark); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--stark); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--stark); }
.section-dark .btn-primary, .hero-dark .btn-primary, .cta-band .btn-primary { background: var(--brand); color: var(--brand-ink); }
.section-dark .btn-primary:hover, .hero-dark .btn-primary:hover, .cta-band .btn-primary:hover { background: var(--cta-hover); }
.section-dark .btn-ghost, .hero-dark .btn-ghost, .cta-band .btn-ghost, .page-head .btn-ghost, .site-footer .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.section-dark .btn-ghost:hover, .hero-dark .btn-ghost:hover, .cta-band .btn-ghost:hover, .page-head .btn-ghost:hover { border-color: #fff; color: #fff; }
.btn-sm { padding: .5em 1em; font-size: var(--fs-0); min-height: 2.25rem; }
.btn-lg { padding: 1em 2em; font-size: var(--fs-2); min-height: 3.25rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
/* --------------------------------------------------------------------------
5. Header
-------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 68px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--stark); font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1; }
.brand img, .brand svg { height: 44px; width: auto; }
.brand .brand-sub { font-family: var(--font-sans); font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep); display: block; margin-top: .3em; }
.dark .brand .brand-sub, [data-theme="dark"] .brand .brand-sub { color: var(--brand); }
/* Zwei Logo-Dateien im Kopf: Farbversion hell, einfarbig hell im Dunkelmodus. */
.brand .logo-invers { display: none; }
.dark .brand .logo-standard, [data-theme="dark"] .brand .logo-standard { display: none; }
.dark .brand .logo-invers, [data-theme="dark"] .brand .logo-invers { display: block; }
.main-nav { display: flex; align-items: center; gap: .15rem; }
.main-nav a { position: relative; display: inline-block; padding: .55rem .7rem; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; font-size: var(--fs-2); text-decoration: none; white-space: nowrap; }
.main-nav a:hover { color: var(--stark); background: var(--bg-soft); }
.main-nav a[aria-current="page"], .main-nav a.active, .main-nav a.aktiv { color: var(--stark); font-weight: 600; }
.main-nav a[aria-current="page"]::after, .main-nav a.active::after, .main-nav a.aktiv::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px; background: var(--brand); }
.main-nav .btn { margin-left: .5rem; border-radius: var(--r-btn); } /* 2.0: .main-nav a hatte den Knopf eckig gemacht */
.main-nav .btn::after { display: none; }
.main-nav a.btn-primary { color: #fff; }
.main-nav a.btn-secondary { color: #fff; }
.main-nav a.btn-accent { color: var(--brand-ink); }
.main-nav a.btn-ghost { color: var(--stark); }
.main-nav a.btn-primary:hover { background: var(--dark-2); }
.main-nav a.btn-accent:hover { background: var(--cta-hover); }
.nav-toggle { display: none; align-items: center; gap: .5em; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .5rem .8rem; font-weight: 600; font-size: var(--fs-2); color: var(--stark); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle[aria-expanded="true"] .ico-open, .nav-toggle:not([aria-expanded="true"]) .ico-close { display: none; }
@media (max-width: 1024px) {
.nav-toggle { display: inline-flex; }
.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: .5rem 0 1rem; max-height: calc(100vh - 68px); overflow-y: auto; }
.main-nav.open { display: flex; }
.main-nav a { padding: .9rem 1.25rem; font-size: var(--fs-2); border-radius: 0; border-bottom: 1px solid var(--line); }
.main-nav a[aria-current="page"]::after, .main-nav a.active::after, .main-nav a.aktiv::after { left: 0; right: auto; top: 0; bottom: 0; height: auto; width: 4px; }
.main-nav .btn { margin: 1rem 1.25rem 0; border-radius: var(--r-btn); border-bottom: 0; }
}
.main-nav details { position: relative; }
.main-nav summary { list-style: none; cursor: pointer; padding: .55rem .7rem; border-radius: var(--r-sm); font-weight: 500; font-size: var(--fs-2); color: var(--ink-2); }
.main-nav summary::-webkit-details-marker { display: none; }
.main-nav summary::after { content: " ▾"; font-size: .8em; }
.main-nav details[open] > div { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: .4rem; display: grid; }
@media (max-width: 1024px) { .main-nav details[open] > div { position: static; box-shadow: none; border: 0; padding-left: 1rem; } }
/* --------------------------------------------------------------------------
6. Hero, Seitenkopf, Kacheln
-------------------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); background: var(--bg); }
.hero h1 { font-size: var(--fs-6); margin-bottom: .4em; line-height: var(--lh-display); letter-spacing: -.022em; }
.hero .lead { margin-bottom: var(--s-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.hero-note { margin-top: var(--s-4); font-size: var(--fs-0); color: var(--ink-3); }
.hero-soft { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero-dark { background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%); color: #fff; }
.hero-dark h1 { color: #fff; }
.hero-dark .lead, .hero-dark .hero-note { color: var(--dark-text); }
.hero-dark .kicker { color: var(--brand); }
.hero-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.facts strong { display: block; font-family: var(--font-serif); font-size: 1.9rem; font-weight: 600; color: var(--stark); line-height: 1.1; }
.facts span { font-size: var(--fs-0); color: var(--ink-2); }
.hero-dark .facts { border-color: rgba(255,255,255,.18); }
.hero-dark .facts strong { color: var(--brand); }
.hero-dark .facts span { color: var(--dark-text); }
.page-head { background: var(--dark); color: #fff; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.page-head h1 { color: #fff; margin-bottom: .3em; line-height: var(--lh-display); letter-spacing: -.022em; }
.page-head .lead { color: var(--dark-text); margin: 0; }
.page-head .kicker { color: var(--brand); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; padding: 0; margin: 0 0 var(--s-4); font-size: var(--fs-0); color: var(--ink-3); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-deep); text-decoration: underline; }
.section-dark .breadcrumb, .hero-dark .breadcrumb, .page-head.dunkel .breadcrumb { color: var(--dark-text); }
.section-dark .breadcrumb a, .hero-dark .breadcrumb a, .page-head.dunkel .breadcrumb a { color: #fff; }
.breadcrumb li + li::before { content: "›"; margin-right: .4em; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.tile { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: border-color var(--motion), transform var(--motion), box-shadow var(--motion); }
.tile:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.tile .tile-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-deep); }
.tile .tile-icon svg { width: 22px; height: 22px; }
.tile h3 { margin: 0; }
.tile p { margin: 0; color: var(--ink-2); font-size: var(--fs-1); }
.tile-more { margin-top: auto; font-weight: 600; color: var(--brand-deep); font-size: var(--fs-1); text-decoration: none; }
.tile-more::after { content: " →"; }
a.tile-more:hover { text-decoration: underline; }
/* --------------------------------------------------------------------------
7. Karten, Chips, Schritte, Bild-Container
-------------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.card-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card-body > :last-child { margin-bottom: 0; }
.card h3 { margin: 0; }
.card h3 a, .tile h3 a, .price-card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover, .tile h3 a:hover, .price-card h3 a:hover { color: var(--brand-deep); text-decoration: underline; }
.card p { margin: 0; color: var(--ink-2); font-size: var(--fs-1); }
.card .meta { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-0); color: var(--ink-3); }
.card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card.link:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border-radius: var(--r-sm); font-size: var(--fs-0); font-weight: 600; background: var(--brand-soft); color: var(--brand-deep); }
.chip-neutral { background: var(--bg-soft); color: var(--ink-2); }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.badge { display: inline-block; padding: .2em .6em; border-radius: var(--r-sm); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--brand); color: var(--brand-ink); }
/* Chips und Badges sind Flex-Kinder in .card-body / .price-card und wuerden sonst auf volle Breite gezogen */
.card-body > .chip, .card-body > .badge, .price-card > .chip, .card-body > .cluster,
.tile > .chip, .tile > .badge, .tile > .cluster { align-self: start; }
.steps { counter-reset: step; display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
.steps > li { counter-increment: step; position: relative; padding: var(--s-6); padding-top: calc(var(--s-6) + 2.2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin: 0; }
.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; top: var(--s-5); left: var(--s-6); font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--brand-deep); }
.steps > li > h3 { margin: 0 0 .3em; font-size: var(--fs-2); font-family: var(--font-sans); font-weight: 600; }
.steps > li > p { margin: 0; color: var(--ink-2); font-size: var(--fs-1); }
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 1.8em; margin: .5em 0; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .4em; width: 1em; height: 1em; border: 1.5px solid var(--brand-deep); border-radius: 3px; }
.checklist li::after { content: ""; position: absolute; left: .32em; top: .5em; width: .3em; height: .55em; border: solid var(--brand-deep); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Kreuz-Variante der Prüfliste (was etwas NICHT leistet) und schlichte Punktliste. */
.checklist-nein li::before { background: var(--warn-soft); }
.checklist-nein li::after { content: "×"; left: 0; top: .3em; width: 1.15em; height: 1.15em; border: 0; transform: none; display: grid; place-items: center; color: var(--warn); font-weight: 800; line-height: 1; }
.list-plain { list-style: none; padding: 0; }
.list-plain li { position: relative; padding-left: 1.9em; margin: .5em 0; }
.list-plain li::before { content: ""; position: absolute; left: .42em; top: .62em; width: .45em; height: .45em; border-radius: 50%; background: var(--brand); }
.figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-soft); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.figure figcaption { padding: var(--s-3) var(--s-4); font-size: var(--fs-0); color: var(--ink-3); background: var(--surface); }
.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
/* Platzhalter statt falschem Bild (bilder/REGELWERK.md, Abschnitt 1, Punkt 3):
ruhige Fläche in --bg-soft mit Inline-SVG-Symbol und einer Zeile, was hier hingehört.
…
*/
.figure-leer { display: grid; place-items: center; align-content: center; gap: var(--s-3); padding: var(--s-5); text-align: center; background: var(--bg-soft); color: var(--ink-3); font-size: var(--fs-0); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.figure-leer svg { width: 40px; height: 40px; opacity: .75; }
.figure-leer span { max-width: 32ch; }
.figure > .figure-leer { border: 0; border-radius: 0; }
/* --------------------------------------------------------------------------
8. Preistabellen
-------------------------------------------------------------------------- */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.price-card.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-md); }
.price-card .badge { position: absolute; top: -0.8rem; left: var(--s-6); }
.price-card h3 { margin: 0; }
.price-card .price-desc { color: var(--ink-2); font-size: var(--fs-1); margin: 0; }
.price { display: flex; align-items: baseline; gap: .3em; font-family: var(--font-serif); font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--stark); }
.price small { font-family: var(--font-sans); font-size: var(--fs-0); font-weight: 500; color: var(--ink-3); }
.price-card .checklist { margin: 0; flex: 1; font-size: var(--fs-1); }
.price-card .btn { margin-top: var(--s-2); }
.price-note { font-size: var(--fs-0); color: var(--ink-3); }
/* --------------------------------------------------------------------------
9. Formulare
-------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); }
.form > .btn { justify-self: start; }
.form > .btn.btn-block { justify-self: stretch; }
.field { display: grid; gap: .4rem; }
.field label, .field > span { font-weight: 600; font-size: var(--fs-1); color: var(--stark); }
.field .hint { font-size: var(--fs-0); color: var(--ink-3); font-weight: 400; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; padding: .75rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-1); transition: border-color var(--motion), box-shadow var(--motion); }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-deep); box-shadow: 0 0 0 3px var(--brand-soft); }
.field [aria-invalid="true"] { border-color: var(--warn) !important; }
.field .error { font-size: var(--fs-0); color: var(--warn); font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.check, .field .check { display: block; position: relative; padding-left: 1.9rem; font-weight: 400; font-size: var(--fs-1); color: var(--ink-2); }
.check input { position: absolute; left: 0; top: .3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--dark); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.form-note { font-size: var(--fs-0); color: var(--ink-3); }
fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin: 0; }
legend { font-weight: 600; padding: 0 .4em; }
/* --------------------------------------------------------------------------
10. FAQ, Hinweisboxen, Tabellen
-------------------------------------------------------------------------- */
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 var(--s-5); margin-bottom: var(--s-3); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-4) 0; font-weight: 600; font-size: var(--fs-2); color: var(--stark); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-serif); font-size: 1.5rem; color: var(--brand-deep); }
.faq details[open] summary::after { content: "–"; }
.faq details > :not(summary) { color: var(--ink-2); font-size: var(--fs-1); }
.faq details > :last-child { padding-bottom: var(--s-4); }
/* [hidden] muss die display-Angaben der Bausteine schlagen, sonst bleiben
versteckte Meldungen sichtbar (Formular-Fehlerkasten). */
[hidden] { display: none !important; }
.notice { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-md); border: 1px solid var(--line); border-left: 4px solid var(--brand); background: var(--surface); font-size: var(--fs-1); }
.notice > svg { width: 22px; height: 22px; margin-top: .15em; color: var(--brand-deep); }
.notice p:last-child { margin: 0; }
.notice strong { display: block; margin-bottom: .2em; color: var(--stark); }
.notice-brand { background: var(--brand-soft); border-color: transparent; border-left-color: var(--brand); }
.notice-ok { background: var(--ok-soft); border-color: transparent; border-left-color: var(--ok); }
.notice-ok > svg { color: var(--ok); }
.notice-warn { background: var(--warn-soft); border-color: transparent; border-left-color: var(--warn); }
.notice-warn > svg { color: var(--warn); }
.notice-plain { grid-template-columns: 1fr; }
/* Rhythmus zwischen Blockbausteinen und Überschriften, wenn sie ohne .prose oder .stack
direkt in einem .wrap stehen (sonst kleben Hinweis, Tabelle oder Raster an der nächsten
Überschrift). Innerhalb von .prose gilt weiterhin der dortige Abstand. */
:is(.notice, .table-wrap, .figure, .grid, .tiles, .pricing, .steps, .faq, .facts, .form-box, .split, .cluster, .checklist) + :is(h2, h3, h4) { margin-top: var(--s-7); }
:is(h2, h3, h4) + :is(.notice, .table-wrap, .figure, .grid, .tiles, .pricing, .steps, .faq, .form-box, .split) { margin-top: var(--s-5); }
:is(.notice, .table-wrap, .figure, .grid, .tiles, .pricing, .steps, .faq, .form-box, .split) + :is(p, ul, ol) { margin-top: var(--s-5); }
:is(.notice, .table-wrap, .figure, .grid, .tiles, .pricing, .steps, .faq, .form-box, .split) + :is(.notice, .table-wrap, .figure, .grid, .tiles, .pricing, .steps, .faq, .form-box, .split) { margin-top: var(--s-6); }
:is(p, ul, ol) + :is(.notice, .table-wrap, .figure, .grid, .tiles, .pricing, .steps, .faq, .form-box, .split) { margin-top: var(--s-5); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); min-width: 560px; }
.table th, .table td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table thead th { background: var(--dark); color: #fff; font-weight: 600; font-size: var(--fs-0); letter-spacing: .02em; }
.table thead th.highlight { background: var(--brand); color: var(--brand-ink); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .yes { color: var(--ok); font-weight: 700; }
.table .no { color: var(--ink-3); }
/* --------------------------------------------------------------------------
11. Abschluss-CTA und Footer
-------------------------------------------------------------------------- */
.cta-band { background: var(--dark); color: #fff; padding-block: var(--section-y); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--dark-text); max-width: 56ch; }
.cta-band a:not(.btn), .page-head a:not(.btn) { color: #fff; }
.cta-band .hero-actions { margin-top: var(--s-5); }
.cta-band.center { text-align: center; }
.cta-band.center p { margin-inline: auto; }
.cta-band.center .hero-actions { justify-content: center; }
/* Inhalt, der ohne section direkt in main steht, braucht unten Luft vor der Fussleiste (03.09.2026) */
main > .wrap, main > .wrap-narrow, main > .wrap-wide { padding-bottom: var(--s-8); }
.site-footer { background: var(--dark-2); color: var(--dark-text); padding: var(--s-8) 0 var(--s-6); font-size: var(--fs-1); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s-7) var(--s-6); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand { color: #fff; }
.footer-brand .brand .brand-sub { color: var(--brand); }
.footer-brand p { max-width: 34ch; margin: var(--s-4) 0 0; line-height: 1.55; }
.footer-col h4 { color: #fff; font-family: var(--font-sans); font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0 0 .5em; }
.footer-col a { color: var(--dark-text); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-family { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-0); }
.footer-family ul { list-style: none; padding: 0; margin: .5em 0 0; display: flex; flex-wrap: wrap; gap: .4em 1.4em; }
.footer-family a { color: var(--dark-text); text-decoration: none; }
.footer-family a:hover { color: #fff; }
.footer-legal { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); font-size: var(--fs-0); }
.footer-legal ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4em 1.2em; }
.footer-legal a { color: var(--dark-text); text-decoration: none; }
.footer-legal a:hover { color: #fff; text-decoration: underline; }
/* --------------------------------------------------------------------------
12. Druck
-------------------------------------------------------------------------- */
@media print {
.site-header, .site-footer, .nav-toggle, .hero-actions, .cta-band, .btn, .skip-link, .noprint { display: none !important; }
body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
.section, .hero, .page-head { padding-block: 12pt; background: none !important; color: #000 !important; }
.page-head h1, .page-head .lead { color: #000; }
.card, .tile, .price-card, .notice, .faq details, .table-wrap { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
.faq summary::after { display: none; }
a { color: #000; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
h1, h2, h3 { color: #000; break-after: avoid; }
img { max-height: 60vh; }
}
/* ==========================================================================
Abschnitt 12: Stufe 2 und Stufe 3 (Fassung 3.2, 2026-09-04)
--------------------------------------------------------------------------
Die Klartext-Familie zieht nach, was mindo.css in den Fassungen 3.1 und 3.2
bekommen hat. Vorbild bleibt awork.com/de, weiterhin ausschliesslich als
Gestaltungsprinzip: kein Code, keine Texte, keine Illustrationen, keine
Schriften und keine 3D-Objekte von dort. Jedes SVG hier ist selbst gezeichnet.
Stufe 2:
- getoenter Seitenuntergrund (--tint-0, 5 % Akzent auf Papier) statt Papier pur
- weichere Karten: --r-card 20 px, --card-line statt harter Linie,
mehrschichtiger Schatten --shadow-card
- .section-akzent: eine volle Farbflaeche als Hoehepunkt
Stufe 3:
a) .band-flaeche / .band / .band-warm / .band-kuehl - geschwungene Farbbaender
b) .btn-primary mit Farbverlauf und farbigem Schein
c) .akzentwort-2 / .akzentwort-3 - zweite und dritte Farbe in einer Ueberschrift
d) .hero-kachel - kleine Karte zwischen den Woertern der Ueberschrift
e) .section-dunkel - sehr dunkler Abschnitt mit leuchtenden Kartenraendern
f) .mockup - gekippter, abgerundeter Rahmen
g) .objekt - freigestelltes Objekt, schwebend
h) .einblenden - sanftes Einblenden beim Scrollen (klartext-bewegung.js)
Fliesstext und Menue bleiben bei --fs-2 = 0.889rem = 14,2 px (Vorgabe Monika).
Radius 20 px statt 24 px wie bei Mindo: die Klartext-Familie ist ruhiger.
Kontrast: node werkzeuge/kontrast-pruefen.mjs - alle Paare WCAG AA.
========================================================================== */
:root {
/* Seitenuntergrund je Marke: 5 % Akzent auf Papier. */
--tint-auswandern-0: #F9F3E9;
--tint-liebe-0: #F9F1ED;
--tint-bordleben-0: #F8F2EA;
--tint-0: var(--tint-auswandern-0);
/* Karten (Stufe 2). Alte Fassung: border 1px solid var(--line), radius --r-lg. */
--r-card: 20px;
--card-line: rgba(16, 51, 74, .07);
--shadow-card: 0 1px 2px rgba(16, 51, 74, .04), 0 6px 16px rgba(16, 51, 74, .06), 0 16px 36px rgba(16, 51, 74, .06);
--shadow-card-hover: 0 2px 4px rgba(16, 51, 74, .06), 0 12px 26px rgba(16, 51, 74, .10), 0 26px 52px rgba(16, 51, 74, .10);
/* Zweite und dritte Ueberschriftenfarbe. Nur fuer Ueberschriften gedacht
(grosse Schrift, AA ab 3:1); beide liegen weit darueber: Navy 12,32:1 und
Pflaume 7,20:1 auf Papier. Pflaume statt des Mindo-Violetts, weil die
Klartext-Familie warm ist. Tuerkis ist in allen Marken verboten. */
--akzent-2: var(--k-navy);
--akzent-3: #7B3F62;
--akzent-2-hell: #9CC3DE; /* 9,52:1 auf --dunkel-tief */
--akzent-3-hell: #E2A8C8; /* 9,00:1 auf --dunkel-tief */
/* Sehr dunkler Abschnitt (.section-dunkel), Navy-Familie statt Blauschwarz.
Weiss auf Grund 17,72:1 - Nebentext auf Grund 11,46:1 - auf Karte 8,86:1. */
--dunkel-tief: #071A26;
--dunkel-tief-2: #123044;
--dunkel-tief-text: #C3D2DC;
/* Aufgehellte Marken-Akzente fuer dunkle Flaechen. */
--k-accent-auswandern-hell: #F0B45F;
--k-accent-liebe-hell: #EDA3AA;
--k-accent-bordleben-hell: #E3A56A;
--brand-hell: var(--k-accent-auswandern-hell);
/* Volle Farbflaeche (.section-akzent). Bei Klartext Liebe traegt sie Navy statt
Rose: eine ganze Bildschirmbreite Rose wirkt suess statt ernst; ausdrueckliche
Vorgabe von Monika am 04.09.2026. */
--flaeche: var(--brand);
--flaeche-ink: var(--brand-ink);
/* Deckkraft der Farbbaender. Nicht frei waehlbar: der Text liegt darueber, das
Band verschiebt also den Untergrund. Geprueft wurde die schlechteste
Kombination aus allen drei Marken-Toenungen und allen Bandfarben; bei .16
bleibt der schwaechste Wert bei 5,03:1 und damit ueber AA. Moeglich ist das
nur, weil auf Bandflaechen die kraeftigeren --band-*-Werte gelten. Nicht
erhoehen, ohne kontrast-pruefen.mjs erneut laufen zu lassen. */
--band-deckkraft: .16;
--band-ink-2: #3A4750; /* 9,56:1 auf Weiss */
--band-ink-3: #3A4750;
--band-link: #0F4468; /* 10,26:1 */
--band-cta-text: #7A3F0B; /* 8,26:1 */
--band-ok: #12523A; /* 9,16:1 */
--band-warn: #7E2A21; /* 9,37:1 */
--band-ink-2-dunkel: #C6D2DC;
--band-link-dunkel: #A9C6FF;
--band-cta-text-dunkel: #F0B45F;
}
[data-brand="auswandern"] { --tint-0: var(--tint-auswandern-0); --brand-hell: var(--k-accent-auswandern-hell); }
[data-brand="liebe"] { --tint-0: var(--tint-liebe-0); --brand-hell: var(--k-accent-liebe-hell);
/* volle Flaeche in Navy, nicht in Rose */
--flaeche: var(--k-navy); --flaeche-ink: #FFFFFF; }
[data-brand="bordleben"] { --tint-0: var(--tint-bordleben-0); --brand-hell: var(--k-accent-bordleben-hell); }
.dark, [data-theme="dark"] {
--tint-0: #0C1922;
--card-line: rgba(255, 255, 255, .07);
--shadow-card: 0 2px 6px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
--shadow-card-hover: 0 4px 10px rgba(0,0,0,.40), 0 24px 56px rgba(0,0,0,.55);
--band-deckkraft: .18;
--akzent-2: var(--akzent-2-hell);
--akzent-3: var(--akzent-3-hell);
--flaeche: var(--brand); --flaeche-ink: var(--brand-ink);
}
.dark [data-brand="liebe"], [data-theme="dark"][data-brand="liebe"] { --flaeche: #0B2435; --flaeche-ink: #FFFFFF; }
/* Der ganze Seitengrund traegt jetzt die Toenung; Karten stehen weiss darauf. */
body { background: var(--tint-0); }
/* Karten weicher (Stufe 2). Alte Fassung stand mit --r-lg und 1px --line. */
.card, .tile, .price-card, .form-box, .table-wrap {
border-radius: var(--r-card); border-color: var(--card-line); box-shadow: var(--shadow-card);
}
.card:hover, .price-card:hover { box-shadow: var(--shadow-card-hover); }
.tile:hover { box-shadow: var(--shadow-card-hover); }
.steps > li { border-radius: var(--r-card); border-color: var(--card-line); box-shadow: var(--shadow-card); }
.faq details, .notice { border-color: var(--card-line); }
/* --- Volle Farbflaeche als Hoehepunkt (Stufe 2) ---------------------------- */
.section-akzent { background: var(--flaeche); color: var(--flaeche-ink); }
/* Alle Texte auf der Farbflaeche tragen die Schriftfarbe der Flaeche - ausser sie
stehen in einem eigenen Baustein (Karte, Hinweis, Tabelle, Formular), der seine
eigene helle Flaeche mitbringt.
Die frueheren Regeln fassten nur direkte Kinder von .wrap; Text in einem
Zwischen-Container behielt --ink-2 und kam auf der Bernsteinflaeche nur auf
2,83:1. Mit --flaeche-ink sind es 6,02:1 (Bernstein), 4,95:1 (Messing),
4,68:1 (Rose) und 12,32:1 (Navy bei Klartext Liebe).
alt: .section-akzent :is(...) :not(...) { color: inherit; }
alt: .section-akzent > .wrap :is(h1, h2, h3, h4) { color: var(--flaeche-ink); }
alt: .section-akzent > .wrap > :is(p, .lead, .kicker, .muted) { color: var(--flaeche-ink); } */
.section-akzent :is(h1, h2, h3, h4, p, li, dt, dd, strong, em, blockquote, figcaption,
.lead, .kicker, .muted, .small, .section-title, .section-sub):not(:is(.card, .tile, .price-card,
.notice, .faq, .table-wrap, .form-box, .figure, .steps) *) { color: var(--flaeche-ink); }
.section-akzent a:not(.btn):not(:is(.card, .tile, .price-card, .notice, .faq, .table-wrap, .form-box) *) { color: var(--flaeche-ink); }
.section-akzent hr { border-color: color-mix(in srgb, var(--flaeche-ink) 30%, transparent); }
.section-akzent .btn-primary { background: var(--flaeche-ink); background-image: none; color: var(--flaeche); box-shadow: none; }
.section-akzent .btn-primary:hover { background: var(--flaeche-ink); color: var(--flaeche); filter: brightness(.94); }
.section-akzent .btn-ghost { color: var(--flaeche-ink); border-color: color-mix(in srgb, var(--flaeche-ink) 55%, transparent); }
.section-akzent .btn-ghost:hover { border-color: var(--flaeche-ink); color: var(--flaeche-ink); }
.section-akzent .btn:focus-visible { outline-color: var(--flaeche-ink); }
/* Bausteine auf der Flaeche behalten ihre eigenen Farben. */
.section-akzent :is(.card, .tile, .price-card, .notice, .faq details, .table-wrap, .form-box, .figure, .steps > li) { color: var(--ink); }
.section-akzent .card p, .section-akzent .tile p { color: var(--ink-2); }
.section-akzent .card :is(h2, h3, h4), .section-akzent .tile h3, .section-akzent .price-card h3 { color: var(--stark); }
.section-akzent .facts { border-color: color-mix(in srgb, var(--flaeche-ink) 30%, transparent); }
.section-akzent .facts strong, .section-akzent .facts span { color: var(--flaeche-ink); }
/* --- a) Geschwungene Farbbaender ------------------------------------------
Die Verlaufs-IDs muessen je Seite eindeutig sein. Das Band liegt immer hinter
dem Inhalt und ist aria-hidden. -------------------------------------------- */
.band-flaeche { position: relative; overflow: hidden; }
.band-flaeche > :not(.band) { position: relative; z-index: 1; }
.band { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--band-deckkraft); }
.band .b1 { stop-color: var(--band-1); }
.band .b2 { stop-color: var(--band-2); }
.band .b3 { stop-color: var(--band-3); }
/* Warm: Markenfarbe, Bernstein, helles Bernstein. */
.band-warm { --band-1: var(--brand); --band-2: var(--k-accent-auswandern); --band-3: #F6CB8A; }
/* Kuehl: Navy, Pflaume, helles Blau. */
.band-kuehl { --band-1: var(--k-navy); --band-2: var(--akzent-3); --band-3: #8FB4FF; }
.hero-dark .band-warm, .section-dark .band-warm, .cta-band .band-warm,
.page-head.dunkel .band-warm, .section-dunkel .band-warm { --band-1: var(--brand-hell); }
.hero-dark .band-kuehl, .section-dark .band-kuehl, .cta-band .band-kuehl,
.page-head.dunkel .band-kuehl, .section-dunkel .band-kuehl { --band-1: #3C6E93; }
.hero-dark .band, .section-dark .band, .cta-band .band,
.page-head.dunkel .band, .section-dunkel .band { opacity: .18; }
.section-akzent .band { opacity: .10; }
@keyframes band-schimmer {
from { transform: translate3d(-1.6%, .5%, 0) scale(1.02); }
to { transform: translate3d(1.6%, -.5%, 0) scale(1.05); }
}
.band > g { transform-origin: 50% 50%; animation: band-schimmer 28s ease-in-out infinite alternate; }
/* Unter dem Band verschiebt sich der Untergrund. Damit kleine Schrift sicher ueber
AA bleibt, tragen helle Bandflaechen die kraeftigeren Textwerte; der Kicker
wechselt (wie bei .section-tint) auf die kraeftige Textfarbe. */
.band-flaeche:where(:not(.hero-dark):not(.section-dark):not(.cta-band):not(.section-dunkel):not(.section-akzent):not(.page-head)) {
--ink-2: var(--band-ink-2);
--ink-3: var(--band-ink-3);
--link: var(--band-link);
--cta-text: var(--band-cta-text);
--ok: var(--band-ok);
--warn: var(--band-warn);
}
.band-flaeche:where(:not(.hero-dark):not(.section-dark):not(.cta-band):not(.section-dunkel):not(.section-akzent):not(.page-head)) .kicker { color: var(--stark); }
.dark .band-flaeche, [data-theme="dark"] .band-flaeche {
--ink-2: var(--band-ink-2-dunkel); --ink-3: var(--band-ink-2-dunkel);
--link: var(--band-link-dunkel); --cta-text: var(--band-cta-text-dunkel);
}
.hero-dark.band-flaeche, .section-dark.band-flaeche, .cta-band.band-flaeche,
.page-head.band-flaeche, .section-dunkel.band-flaeche {
--link: var(--band-link-dunkel); --cta-text: var(--band-cta-text-dunkel);
}
/* --- b) Knopf mit Farbverlauf und Schein ----------------------------------
Alte Fassung 2.0 (bleibt zur Nachvollziehbarkeit stehen):
.btn-primary { background: var(--dark); color: #fff; }
Klartext handelt in Navy, der Akzent hebt hervor. Der Verlauf laeuft von einer
leicht aufgehellten zu einer abgedunkelten Fassung; das hellste Ende traegt die
weisse Schrift und liegt bei 11,7:1. */
.btn-primary {
background-image: linear-gradient(135deg,
color-mix(in srgb, var(--dark) 88%, #FFFFFF) 0%,
var(--dark) 52%,
color-mix(in srgb, var(--dark) 88%, #000000) 100%);
box-shadow: var(--shadow-btn), 0 10px 24px color-mix(in srgb, var(--dark) 32%, transparent);
}
.btn-primary:hover { box-shadow: var(--shadow-btn-hover), 0 16px 34px color-mix(in srgb, var(--dark) 42%, transparent); }
.btn-primary:active { box-shadow: var(--shadow-btn), 0 8px 18px color-mix(in srgb, var(--dark) 30%, transparent); }
/* Auf dunklen Flaechen traegt der Knopf die Markenfarbe; dort ohne Verlauf. */
.section-dark .btn-primary, .hero-dark .btn-primary, .cta-band .btn-primary,
.page-head.dunkel .btn-primary, .section-dunkel .btn-primary { background-image: none; }
/* --- c) Mehrfarbige Ueberschriften ---------------------------------------- */
.akzentwort-2 { color: var(--akzent-2); }
.akzentwort-3 { color: var(--akzent-3); }
.section-dark .akzentwort-2, .hero-dark .akzentwort-2, .cta-band .akzentwort-2,
.page-head.dunkel .akzentwort-2, .site-footer .akzentwort-2, .section-dunkel .akzentwort-2 { color: var(--akzent-2-hell); }
.section-dark .akzentwort-3, .hero-dark .akzentwort-3, .cta-band .akzentwort-3,
.page-head.dunkel .akzentwort-3, .site-footer .akzentwort-3, .section-dunkel .akzentwort-3 { color: var(--akzent-3-hell); }
.section-dunkel .akzentwort { color: var(--brand-hell); }
.section-akzent .akzentwort, .section-akzent .akzentwort-2, .section-akzent .akzentwort-3 { color: var(--flaeche-ink); }
/* --- d) Schwebende Kachel in der Ueberschrift ------------------------------
Auswandern 10 Laender ohne Illusionen
Schriftgroesse max(1rem, .4em): nie kleiner als 16 px. Auf schmalen Schirmen
ausgeblendet, damit die Ueberschrift nicht bricht. */
.hero-kachel {
display: inline-flex; align-items: center; gap: .45em;
padding: .3em .72em; margin-inline: .14em;
background: var(--surface); color: var(--ink);
border: 1px solid var(--card-line); border-radius: var(--r-md);
box-shadow: var(--shadow-card);
font-family: var(--font-sans);
font-size: max(1rem, .4em); font-weight: 700; letter-spacing: -.01em;
line-height: 1.3; vertical-align: middle; white-space: nowrap;
transform: rotate(-2.2deg);
}
.hero-kachel-rechts { transform: rotate(2deg); }
.hero-kachel .punkt { width: .55em; height: .55em; border-radius: 999px; background: var(--brand); flex: none; }
@media (max-width: 860px) { .hero-kachel { display: none; } }
/* --- e) Sehr dunkler Abschnitt mit leuchtenden Kartenraendern -------------- */
.section-dunkel {
position: relative; overflow: hidden;
background: var(--dunkel-tief); color: #fff;
padding-block: var(--section-y);
--ink: #FFFFFF;
--ink-2: var(--dunkel-tief-text);
--ink-3: var(--dunkel-tief-text);
--stark: #FFFFFF;
--link: #FFFFFF;
--surface: var(--dunkel-tief-2);
--bg-soft: #0E2434;
--card-line: rgba(255, 255, 255, .14);
--line: rgba(255, 255, 255, .16);
--line-strong: rgba(255, 255, 255, .30);
--brand: var(--brand-hell);
--brand-deep: var(--brand-hell);
--brand-soft: rgba(255, 255, 255, .10);
--shadow-card: 0 2px 8px rgba(0, 0, 0, .45), 0 20px 48px rgba(0, 0, 0, .55);
--shadow-card-hover: 0 4px 14px rgba(0, 0, 0, .5), 0 28px 64px rgba(0, 0, 0, .65);
}
.section-dunkel > :not(.band) { position: relative; z-index: 1; }
.section-dunkel :is(h1, h2, h3, h4) { color: #fff; }
.section-dunkel :is(p, li, dd) { color: var(--dunkel-tief-text); }
.section-dunkel .section-head p, .section-dunkel .lead { color: var(--dunkel-tief-text); }
.section-dunkel .kicker { color: var(--brand-hell); }
.section-dunkel::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(60% 55% at 12% 0%, color-mix(in srgb, var(--brand-hell) 26%, transparent) 0%, transparent 70%),
radial-gradient(55% 60% at 92% 100%, color-mix(in srgb, var(--akzent-3-hell) 26%, transparent) 0%, transparent 72%);
opacity: .45;
}
.section-dunkel :is(.card, .tile, .price-card, .notice, .table-wrap, .form-box, .faq details) { position: relative; }
.section-dunkel :is(.card, .tile, .price-card)::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(145deg,
color-mix(in srgb, var(--brand-hell) 80%, transparent) 0%,
color-mix(in srgb, #FFFFFF 16%, transparent) 44%,
color-mix(in srgb, var(--akzent-3-hell) 66%, transparent) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .5; transition: opacity var(--motion);
}
.section-dunkel :is(.card, .tile, .price-card):hover::after { opacity: .85; }
.section-dunkel .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.section-dunkel .btn-ghost:hover { border-color: #fff; color: #fff; }
.section-dunkel .btn-secondary { background: #FFFFFF; color: var(--dunkel-tief); }
.section-dunkel .btn-secondary:hover { background: #E6EDF2; color: var(--dunkel-tief); }
.section-dunkel .btn:focus-visible { outline-color: #fff; }
.section-dunkel .chip { background: rgba(255,255,255,.10); color: #fff; }
.section-dunkel .checklist li::before { background: rgba(255,255,255,.18); }
.section-dunkel .checklist li::after { border-color: var(--brand-hell); }
.section-dunkel .facts { border-color: rgba(255,255,255,.18); }
.section-dunkel .facts strong { color: var(--brand-hell); }
.section-dunkel .facts span { color: var(--dunkel-tief-text); }
.section-dunkel .tile-more { color: var(--brand-hell); }
.section-dunkel table th { color: #fff; }
.section-dunkel hr { border-color: rgba(255,255,255,.18); }
/* --- f) Gekippter Bildrahmen ---------------------------------------------- */
.mockup {
position: relative; border-radius: 26px; overflow: hidden; background: var(--surface);
box-shadow: 0 0 0 1px var(--card-line), 0 0 0 10px color-mix(in srgb, var(--surface) 62%, transparent), var(--shadow-lg);
transform: rotate(-1.6deg); transition: transform var(--motion), box-shadow var(--motion);
}
.mockup > svg, .mockup > img { display: block; width: 100%; height: auto; }
.mockup-figur { margin: 0; }
.mockup:hover { transform: rotate(-.8deg) translateY(-4px); }
.mockup-rechts { transform: rotate(1.6deg); }
.mockup-rechts:hover { transform: rotate(.8deg) translateY(-4px); }
.mockup-gerade { transform: none; }
.mockup-hinweis { margin: var(--s-4) 0 0; font-size: var(--fs-0); color: var(--ink-3); text-align: center; }
@media (max-width: 860px) {
.mockup, .mockup-rechts { transform: none; }
.mockup:hover, .mockup-rechts:hover { transform: translateY(-3px); }
}
/* --- g) Freigestellte Objekte ---------------------------------------------
*/
.objekt {
display: block; width: clamp(84px, 10vw, 148px); height: auto;
filter: drop-shadow(0 16px 26px rgba(16, 51, 74, .20));
animation: objekt-schweben 8s ease-in-out infinite alternate;
}
.objekt-klein { width: clamp(56px, 6vw, 92px); }
.objekt-gross { width: clamp(120px, 16vw, 240px); }
.objekt-frei { position: absolute; z-index: 2; pointer-events: none; }
.objekt-langsam { animation-duration: 12s; }
@keyframes objekt-schweben {
from { transform: translateY(0) rotate(-1.4deg); }
to { transform: translateY(-11px) rotate(1.8deg); }
}
.dark .objekt, [data-theme="dark"] .objekt { filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
@media (max-width: 860px) { .objekt-frei { display: none; } }
/* --- h) Sanftes Einblenden beim Scrollen -----------------------------------
klartext-bewegung.js setzt data-bewegung="an" am . Ohne Skript, ohne
IntersectionObserver oder bei "Bewegung reduzieren" bleibt alles sichtbar. */
.einblenden { transition: opacity 620ms ease, transform 620ms ease; }
[data-bewegung="an"] .einblenden { opacity: 0; transform: translateY(16px); }
[data-bewegung="an"] .einblenden.sichtbar { opacity: 1; transform: none; }
/* Rasterkinder duerfen nicht ueber ihre Spalte hinauswachsen (breite Tabellen
haben sonst auf dem Telefon die Seite quer geschoben). */
.grid > *, .split > * { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
.band > g, .objekt { animation: none; }
[data-bewegung="an"] .einblenden { opacity: 1; transform: none; }
.mockup, .mockup-rechts { transform: none; }
}
@media print {
.band, .objekt { display: none !important; }
.section-akzent, .section-dunkel { background: none !important; color: #000 !important; padding-block: 12pt; }
.section-dunkel::before { display: none !important; }
.section-dunkel :is(h1, h2, h3, p, li), .section-akzent :is(h1, h2, h3, p, li) { color: #000 !important; }
.section-dunkel :is(.card, .tile, .price-card)::after { display: none !important; }
.hero-kachel { box-shadow: none; border: 1px solid #999; transform: none; }
.mockup, .mockup-rechts { transform: none; box-shadow: none; border: 1px solid #999; }
.einblenden { opacity: 1 !important; transform: none !important; }
.btn-primary { background-image: none !important; box-shadow: none !important; }
}