/* ==========================================================================
Design System 2.0 — Dein Gesundheitsmanager
Stylesheet V3 (Warm Graphite, Signal Gold, Prata Serif & Satoshi Grotesk)
========================================================================== */
/* Schriften und Tokens werden im verlinkt, nicht hier importiert.
In v2 standen hier drei @import-Regeln. Das erzeugte eine Wasserfallkette
(HTML → style.css → Google/Fontshare) ohne preconnect und lud tokens.css
ein zweites Mal, obwohl index.html es bereits verlinkte. Ausserdem
uebertraegt die Auslieferung von Google Fonts ueber Googles CDN die IP
jeder Besucherin an Google — bei einer deutschen Seite mit Cookie-Banner
und Datenschutzerklaerung ein Widerspruch (LG Muenchen I, 2022).
Reihenfolge im :
*/
/* --------------------------------------------------------------------------
1. Reset & Global Base
-------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
background-color: var(--bg);
color: var(--text);
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-ui);
font-size: var(--fs-body);
line-height: var(--lh-body);
background-color: var(--bg);
color: var(--text);
/* clip statt hidden (13. September 2026) — der wichtigste Eingriff.
Steht an body ein overflow ungleich `visible`, setzt der Browser die
ANDERE Achse automatisch auf `auto`. Am Live-Stand ausgelesen:
body overflow-x: hidden → body overflow-y: AUTO
Damit war der Body ein eigener Scrollbereich statt des Dokuments.
Folge auf dem Handy: iOS Safari und der Google-Browser klappen ihre
Leisten nur beim Scrollen im DOKUMENT ein, nicht in einem
verschachtelten Scrollbereich. Sie blieben deshalb dauerhaft stehen,
und die Fläche, die sie belegen, zeigte den dunklen Seitengrund — der
"schwarze Balken" unter dem Hero. Auf Seiten wie apple.com klappen die
Leisten ein, weil dort das Dokument scrollt.
`clip` beschneidet waagerechten Überlauf genauso, erzeugt aber keinen
Scrollbereich; es wurde genau dafür eingeführt. Gemessen nach der
Änderung: overflow-y wieder `visible`, kein Querscrollen. `hidden`
bleibt als Rückfall für alte Browser davor stehen. */
/* KEIN overflow mehr (13. September 2026).
Zwischenschritt war `clip` statt `hidden` — das hat bewirkt, dass die
Browserleisten beim Scrollen wieder einklappen (vorher machte `hidden`
den Body zu einem eigenen Scrollbereich, overflow-y wurde automatisch
`auto`). Aber auch `clip` erzeugt einen Clip-Kontext.
Apple hat an derselben Konstruktion `overflow-x: visible`. Der Grund,
warum hier überhaupt etwas stehen musste, war der Überlauf durch
`width: 100vw` an der Hero-Bühne — der ist jetzt weg (siehe dort).
Damit kann auch diese Regel entfallen. */
position: relative;
}
img, picture, svg, video, canvas {
display: block;
max-width: 100%;
}
/* hat sonst keine eigene Höhe (auto), wodurch das img-Kind
height:100% als "auto" behandelt und nach seinem eigenen Bildseiten-
verhältnis skaliert statt den Kasten wirklich zu füllen — object-fit:cover
kommt dann nie zum Tragen. Sichtbar als dunkler Rand am Kastenrand
(Fallback-Hintergrund lugt hervor), am deutlichsten wo das echte
Bildformat vom deklarierten aspect-ratio abweicht (z. B. Experten-Porträt:
480×560 vs. deklariertem 4:5). Nur relevant, wo picture in einer Box mit
definierter Höhe (aspect-ratio) sitzt — sonst inert. */
picture {
height: 100%;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--t-fast) var(--ease-out);
}
button, input, textarea, select {
font: inherit;
color: inherit;
background: transparent;
border: 0;
}
button {
cursor: pointer;
}
ul, ol {
list-style: none;
}
/* --------------------------------------------------------------------------
2. Typography System
-------------------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: var(--tracking-display);
color: var(--text);
}
h1 {
font-size: var(--fs-display);
line-height: var(--lh-display);
text-transform: uppercase;
}
h2 {
font-size: var(--fs-h2);
line-height: var(--lh-heading);
}
h3 {
/* Fix (Befund H1): In v2 fehlte jeder Abstand nach unten, wodurch alle
Kartentitel unmittelbar auf dem Fliesstext sassen. Bei der Prata
verstaerkt sich das, weil die Unterlaengen fast in die erste Textzeile
stossen. */
margin-block-end: var(--s-3);
font-size: var(--fs-h3);
line-height: var(--lh-heading);
}
p {
max-width: var(--measure);
}
.eyebrow {
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: var(--s-2);
display: inline-block;
}
/* Pill-Badge in der See-Farbe statt Gold — ursprünglich das Kennzeichen von
expertise.html ("Nachweise & Fachliches"), jetzt geteilt mit dem Magazin
(index.html #magazin, blog.html), da beide wissensbasierten statt
handlungsauffordernden Inhalt tragen. Von expertise.css hierher verschoben,
damit auch Seiten ohne expertise.css sie nutzen können. */
.badge-tag-lake {
display: inline-block;
padding: 5px 12px;
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--info-text);
background-color: color-mix(in srgb, var(--info) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--info) 45%, transparent);
}
/* Gedämpfte zweite Zeile in zweizeiligen Überschriften (H1/H2), damit die
Aussage eine Reihenfolge bekommt statt zwei gleich lauten Zeilen. */
.hero-heading-accent { color: var(--text-subtle); }
.article-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
font-size: var(--fs-small);
color: var(--text-subtle);
padding-block-end: var(--s-6);
}
.article-breadcrumbs a { color: var(--text-subtle); text-decoration: none; }
.article-breadcrumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.article-breadcrumbs span { color: var(--border); }
/* --------------------------------------------------------------------------
3. Container & Layout
-------------------------------------------------------------------------- */
.container {
width: min(var(--container), calc(100% - (var(--pad-inline) * 2)));
max-width: var(--container);
margin-inline: auto;
padding-inline: 0;
}
.section-block {
padding-block: var(--section-y);
position: relative;
}
/* Feine Trennlinie zwischen zwei Sektionen (14. September 2026).
Sitzt an der Oberkante der jeweils zweiten Sektion und damit genau in der
Mitte der Lücke, weil oben und unten derselbe --section-y gilt. Nur so
breit wie der Inhalt, neutral statt Gold — mehrere Sektionen enden mit
einer Karte mit goldener Ecke, eine goldene Linie darunter wirkte doppelt.
Nicht zwischen Hero und Partnern: Dort übernimmt der Bildverlauf. */
.section-block + .section-block::before,
.partners-wrap + .section-block::before,
.expertise-section + .expertise-section::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(var(--container), calc(100% - (var(--pad-inline) * 2)));
height: 1px;
background: var(--border);
transform: translateX(-50%);
pointer-events: none;
}
.section-header {
margin-bottom: var(--s-7);
}
/* Headline als Zitat (z. B. „Ausgewogene Ernährung“): Das öffnende
Anführungszeichen hängt links in den Rand, damit die Textkante bündig mit
Eyebrow und Beschreibung bleibt. text-indent statt hanging-punctuation,
weil Letzteres nur Safari kann.
Breite (16. September 2026): 26ch → 40ch. Bei 26ch brach das Zitat auf
dem Desktop nach gut der halben Spaltenbreite in drei Zeilen um, während
die Beschreibung darunter über die volle Breite lief. */
.section-title--quote {
text-indent: -0.42em;
max-width: 40ch;
text-wrap: balance; /* gleichmäßige Zeilen, kein einzelnes Wort am Ende */
}
/* Leitzitat zwischen Partnern und Schnellfinder (#leitzitat) */
.lead-quote {
margin: 0;
text-align: center;
}
.lead-quote-text {
margin: 0 auto;
max-width: var(--leadquote-max-width, 22ch);
font-family: var(--font-display);
font-weight: 400;
font-size: var(--leadquote-size, clamp(1.75rem, 0.87rem + 3.76vw, 4.25rem)); /* 28px auf 375px (5 Zeilen), 68px auf Desktop */
line-height: 1.22;
letter-spacing: var(--tracking-display);
color: var(--text);
text-wrap: balance;
transition: font-size 0.2s ease, max-width 0.2s ease;
}
.lead-quote-author {
display: block;
margin-top: var(--s-5);
line-height: 1.9;
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent-text);
}
.section-header .section-title {
margin-top: var(--s-2);
margin-bottom: var(--s-4);
}
.section-header .section-lead {
/* Breiter als die globale p-Grenze (62ch), damit die Beschreibung nicht
schon bei gut der halben Breite unter der Headline abbricht. */
max-width: 85ch;
font-size: 1.125rem;
color: var(--text-muted);
line-height: 1.6;
}
/* --------------------------------------------------------------------------
4. Buttons & Interaction Points
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: 13px 13px 13px 26px;
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--tracking-btn);
line-height: 1;
transition: background-color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
position: relative;
user-select: none;
}
/* Arrow Circle: Circular 50% interaction beacon */
.btn-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
flex-shrink: 0;
transition: transform var(--t-fast) var(--ease-out),
background-color var(--t-fast) var(--ease-out);
}
.btn-circle svg {
width: 13px;
height: 13px;
transition: transform var(--t-fast) var(--ease-out);
}
/* Primary Button: Gold-500, Text Ink-900, 11px Fase */
.btn-primary {
background-color: var(--accent);
color: var(--text-on-accent);
}
.btn-primary .btn-circle {
background-color: var(--bg);
color: var(--accent-text);
}
.btn-primary:hover {
background-color: var(--accent-pressed);
}
.btn-primary:hover .btn-circle svg {
transform: rotate(45deg);
}
/* Secondary Button: Glass, Border Ink-600, Text Bone-100 */
.btn-secondary {
background-color: var(--glass);
border: 1px solid var(--border);
color: var(--text);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.btn-secondary .btn-circle {
/* Ueber die semantische Ebene statt fest cremefarben: auf Dunkel ergibt
das den cremefarbenen Kreis von v2, auf Licht einen dunklen. */
background-color: var(--text);
color: var(--bg);
}
.btn-secondary:hover {
border-color: var(--accent-line);
}
.btn-secondary:hover .btn-circle svg {
transform: rotate(45deg);
}
/* Ghost Button: Transparent, Hairline Border, 11px Fase */
.btn-ghost {
background-color: transparent;
border: 1px solid rgba(195, 189, 178, 0.28);
color: var(--text);
transition: border-color var(--t-fast) var(--ease-out),
background-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
}
.btn-ghost .btn-circle {
background-color: rgba(242, 237, 227, 0.12);
color: var(--text);
transition: background-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
}
.btn-ghost:hover {
border-color: var(--accent-line);
background-color: rgba(198, 169, 107, 0.12);
color: var(--accent-text);
}
.btn-ghost:hover .btn-circle {
background-color: var(--accent);
color: var(--text-on-accent);
}
.btn-ghost:hover .btn-circle svg {
transform: rotate(45deg);
}
/* --------------------------------------------------------------------------
5. Architectural Smart Navigation Header (Scroll-Up Reveal, Fixed)
-------------------------------------------------------------------------- */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 900;
/* Seit viewport-fit=cover läuft der Inhalt bis an die physischen
Bildschirmkanten — auch unter die Statusleiste. Die Kopfzeile braucht
deshalb deren Höhe als zusätzlichen Abstand, sonst rutschen Logo und
Menü darunter. Auf Geräten ohne Aussparung ist env() null, dort ändert
sich nichts. */
padding-inline: calc(var(--pad-inline) + env(safe-area-inset-left, 0px));
padding-right: calc(var(--pad-inline) + env(safe-area-inset-right, 0px));
padding-top: calc(clamp(10px, 1.5vh, 16px) + env(safe-area-inset-top, 0px));
padding-bottom: clamp(10px, 1.5vh, 16px);
background-color: transparent;
border-bottom: 1px solid transparent;
box-shadow: none;
pointer-events: auto;
/* Kein will-change und keine Glasfläche direkt auf dem Header: Auf iOS
(WebKit) zeichnete ein Element mit backdrop-filter plus eigener
Compositing-Ebene nach längerem Scrollen nur noch die Unschärfe, Logo
und Menü blieben unsichtbar (15. September 2026). Die Glasfläche liegt
deshalb auf ::after hinter dem Inhalt. */
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.35s ease,
background-color 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
.site-header .header-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
/* --container-wide statt --container: bleibt auf der Hero-Spur, damit
Logo/Menü exakt über Headline/Vcard stehen (siehe tokens.css). */
max-width: var(--container-wide);
height: clamp(52px, 6.5vh, 60px);
margin-inline: auto;
position: relative;
}
/* Hidden state: when scrolling down past hero */
.site-header.header--hidden {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
/* Revealed state: smart slide-in with luxury glassmorphism when scrolling up in content.
Below the hero the page stands on light ground, so this uses the light glass tokens;
.header--in-hero.header--revealed further down overrides it back to transparent
whenever the header is still floating over the hero photo. */
.site-header.header--revealed {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.site-header.header--revealed::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: var(--glass);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid rgba(107, 90, 46, 0.18);
box-shadow: var(--shadow-overlay);
}
/* Über dem Hero-Foto keine Glasfläche, dort übernimmt der Verlauf in ::before */
.site-header.header--in-hero.header--revealed::after {
content: none;
}
/* When header is in the hero section at the top (not revealed), keep it completely transparent */
.site-header.header--in-hero:not(.header--revealed) {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
/* When header is smart-revealed during upscroll inside the hero section:
Feathered ambient photographic scrim without hard box boundary, hard blur cutoffs, or horizontal lines */
.site-header.header--in-hero.header--revealed {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.site-header.header--in-hero.header--revealed::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 180px;
pointer-events: none;
z-index: -1;
background: linear-gradient(
180deg,
rgba(5, 5, 6, 0.82) 0%,
rgba(5, 5, 6, 0.55) 30%,
rgba(5, 5, 6, 0.28) 55%,
rgba(5, 5, 6, 0.10) 75%,
rgba(5, 5, 6, 0.02) 90%,
transparent 100%
);
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
}
/* Subpages (e.g. Impressum) without hero canvas: permanently fixed sleek luxury header.
No hero photo behind it, so it stands on the same light glass as header--revealed. */
.site-header.site-header--subpage {
background-color: var(--glass) !important;
backdrop-filter: blur(24px) saturate(180%) !important;
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
border-bottom: 1px solid rgba(107, 90, 46, 0.18) !important;
box-shadow: var(--shadow-overlay) !important;
transform: translateY(0) !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.header-brand {
display: flex;
align-items: center;
text-decoration: none;
line-height: 1;
}
.header-brand-logo {
height: clamp(30px, 3.8vw, 38px);
width: auto;
display: block;
}
/* Only over the hero photo does the gold mark need lift against busy image
content; on the light glass header below it the same dark blur just reads
as a smudge, so it's added back solely for that context. */
.site-header.header--in-hero .header-brand-logo {
filter: drop-shadow(0 2px 10px rgba(5, 5, 6, 0.6));
}
.header-nav {
display: none;
align-items: center;
gap: clamp(24px, 2.8vw, 42px);
}
@media (min-width: 960px) {
.header-nav {
display: flex;
}
}
.header-link {
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--tracking-nav);
text-transform: uppercase;
color: var(--text);
position: relative;
padding-block: 6px;
transition: color var(--t-fast) var(--ease-out);
}
/* Only over the hero photo does the nav text need a legibility shadow against
varying image content; on the light glass header below it would just muddy
the dark ink text, so it's added back solely for that context. */
.site-header.header--in-hero .header-link,
.site-header.header--in-hero .lang-btn {
text-shadow: 0 1px 2px rgba(5, 5, 6, 0.95), 0 0 1px rgba(5, 5, 6, 0.9);
}
.header-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 1.5px;
background-color: var(--accent);
transition: width var(--t-fast) var(--ease-out);
}
.header-link:hover,
.header-link.active {
color: var(--accent-text);
text-shadow: 0 0 12px rgba(198, 169, 107, 0.4);
}
.header-link:hover::after,
.header-link.active::after {
width: 100%;
}
.header-actions {
display: flex;
align-items: center;
gap: clamp(14px, 1.8vw, 24px);
}
.lang-switcher {
display: flex;
align-items: center;
gap: 5px;
background: transparent;
border: none;
padding: 0;
font-family: var(--font-ui);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
}
.lang-btn {
background: transparent;
border: none;
color: var(--text-muted);
font-weight: 500;
cursor: pointer;
padding: 4px 2px;
transition: color var(--t-fast) var(--ease-out);
}
.lang-btn.active {
color: var(--accent-text);
font-weight: 600;
}
.lang-btn:hover:not(.active) {
color: var(--text);
}
.lang-divider {
color: var(--border);
font-weight: 300;
user-select: none;
}
.header-menu-btn {
display: inline-flex;
align-items: center;
gap: var(--s-3);
padding: 9px 14px 9px 18px;
font-size: var(--fs-label);
letter-spacing: var(--tracking-btn);
cursor: pointer;
border-color: rgba(226, 203, 150, 0.4);
}
.header-menu-btn .menu-icon {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 18px;
height: 18px;
}
.header-menu-btn .menu-bar {
display: block;
width: 100%;
height: 1.5px;
/* --accent-text statt --accent-strong: Letzteres ist fest helles Gold
(nur für dunklen Grund gedacht) und würde auf der hellen Kopfzeile
fast unsichtbar. --accent-text passt sich dem Kontext an. */
background-color: var(--accent-text);
transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.header-menu-btn:hover .menu-bar {
background-color: var(--accent-text);
}
.header-menu-btn[aria-expanded="true"] .menu-bar:first-child {
transform: translateY(3.25px) rotate(45deg);
}
.header-menu-btn[aria-expanded="true"] .menu-bar:last-child {
transform: translateY(-3.25px) rotate(-45deg);
}
@media (max-width: 540px) {
.header-brand-logo {
height: 28px;
}
.header-menu-btn {
padding: 8px 12px;
}
.header-menu-btn .menu-label {
display: none;
}
}
/* --------------------------------------------------------------------------
6. Hero Runway & Canvas Scroll Stage (Preserved Mechanics)
-------------------------------------------------------------------------- */
.hero-scroll-track {
/* Entschlackt (12. September 2026): 400vh → 250vh. Der Vorspann kostete
drei volle Bildschirmhöhen Scrollweg, bevor der erste Inhaltsblock
(#partner-section) überhaupt in Sicht kam — für eine
Ernährungsberatung zu viel Vorrede. Jetzt 1,5 Bildschirmhöhen.
Warum nicht kürzer: Bei 250vh laufen die 40 Frames über ~1,5
Viewport-Höhen, also grob 34 px Scrollweg pro Frame — dicht genug,
dass der Lerp (0.085, main.js) die Stufen verschleift. Bei 200vh
wären es 22 px/Frame; dort wird die Stufigkeit sichtbar.
Die Fortschritts-Schwellwerte in main.js (Header-/Headline-Fade
0.20–0.38, Zitat ab 0.485, Scrim ab 0.06) sind auf den normierten
Fortschritt bezogen und bleiben dadurch unverändert gültig — sie
treten nur bei weniger absolutem Scrollweg ein. */
position: relative;
/* Der Track bleibt bewusst bei der STABILEN Einheit, anders als die
Bühne. Er ist kein bildschirmfüllender Behälter, sondern die
Scrollstrecke — würde seine Höhe bei jeder Leistenbewegung um
3 × 120px springen, verschöbe sich die Scrollposition sichtbar.
Für Safaris Leistenverhalten zählt der bildschirmfüllende Behälter,
und das ist die Bühne. */
height: 250vh;
height: 250lvh;
/* Bewusst der HELLE Seitengrund, nicht var(--bg) (13. September 2026).
.hero-scroll-track steht in tokens.css in der Liste der dunklen Inseln
und bekommt dort --bg: var(--ink-900). Das ist für Text und Rahmen im
Hero auch richtig — aber nicht für diese eine Fläche.
Denn der Track ist das ERSTE Element im Dokument, und Safari nimmt
dessen Hintergrundfarbe für die Fläche hinter der unteren Leiste.
Ergebnis war ein fast schwarzer Balken über die gesamte Seitenlänge,
auf jeder Scrollposition. Nachgewiesen mit einer Testfassung, in der
der Track signalrot eingefärbt war: Der Balken wurde rot.
Sichtbar ändert sich nichts. Während der Klebephase deckt die Bühne
den Track vollständig ab, und danach übernimmt ohnehin der helle
Verlauf am Hero-Ausgang (.hero-bottom-blend). */
background-color: var(--lift-100);
}
.hero-sticky-viewport.stage {
position: sticky;
top: 0;
left: 0;
/* 100% statt 100vw (13. September 2026).
100vw ist die Breite EINSCHLIESSLICH Scrollbalken und damit auf vielen
Geräten breiter als der verfügbare Platz. Gemessen: ein Kind der Bühne
kam auf 413px bei 393px Viewport. Dieser Überlauf war der Grund, warum
am body überhaupt ein overflow stehen musste — und dieses overflow
erzeugt einen Clip-Kontext, den Apple an derselben Konstruktion nicht
hat. Mit 100% entfällt beides.
Zum Vergleich ausgelesen, apple.com/de/airpods-pro:
.sticky-element { position: sticky; top: 0; height: 100lvh;
overflow: hidden; }
Also dieselbe Bauweise wie hier, aber ohne 100vw und ohne
Clip-Kontext am body. */
width: 100%;
/* dvh (13. September 2026, dritte und letzte Korrektur).
Entscheidend ist nicht die Farbe der Fläche hinter der Leiste, sondern
dass Safari seine Leisten NUR dann schweben lässt, wenn die Seite mit
der DYNAMISCHEN Viewport-Einheit gebaut ist. Bei einer statischen
Einheit legt es stattdessen eine massive Fläche darunter.
vh und lvh sind BEIDE statisch. Ich hatte zwischenzeitlich lvh
eingesetzt und damit den Fehler nur durch eine andere Variante
desselben Fehlers ersetzt — deshalb hat es nichts geändert.
Warum ich dvh zuvor verworfen hatte: Es flackerte stark. Die Ursache
dafür war aber ein ZWEITER, unabhängiger Fehler — resizeCanvas() hat
den Canvas bei jedem Aufruf neu dimensioniert und damit geleert. Das
ist in main.js seit v31 behoben (Zuweisung nur bei echter Änderung,
gemessen 0 Zuweisungen bei 50 Scrollschritten). Das damalige Urteil
über dvh stammt also aus einer verfälschten Messung. */
height: 100vh;
/* Zurückgenommen (13. September 2026, spät abends).
Ich hatte hier einen Zuschlag eingebaut, damit die Bühne über den
Bildschirmrand hinausragt. Das war falsch: Ist der Canvas höher als
der Bildschirm, liegt sein unterer Teil außerhalb — und genau dort
steht die Figur im Höhlenausgang. Sie wurde dadurch an den Knien
abgeschnitten. Den Balken hat es zudem nicht beseitigt, der Zuschlag
war also auch noch zu klein.
Ein Canvas, der größer ist als der sichtbare Bereich, verschiebt
immer den Bildausschnitt. Der richtige Weg führt über
position: fixed am Canvas — nur damit deckt er die volle
Bildschirmfläche einschließlich der Bereiche hinter den Leisten ab,
ohne dass sich der Ausschnitt verschiebt. Das ist der nächste
Schritt, siehe Notiz am Ende dieser Regel. */
height: 100lvh;
box-sizing: border-box;
padding: clamp(10px, 1.5vh, 16px) var(--pad-inline) clamp(1rem, 3vh, 2.5rem);
/* MUSS nach der Kurzform stehen, sonst überschreibt sie diesen Wert.
Seit viewport-fit=cover läuft das Bild unter die Statusleiste — der Text
darin soll das nicht. Der Canvas bedeckt mit inset:0 weiterhin die volle
Fläche einschließlich Aussparung. */
padding-top: calc(clamp(10px, 1.5vh, 16px) + env(safe-area-inset-top, 0px));
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--s-4);
will-change: transform;
}
.hero-scroll-canvas.seq {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -3;
display: block;
background: var(--bg);
pointer-events: none;
}
/* Scrim overlay: horizontal gradient protecting headline readability on left, plus top vignette for header legibility */
.hero-sticky-viewport .backdrop {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
will-change: opacity;
}
.hero-sticky-viewport .backdrop::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: clamp(100px, 14vh, 150px);
background: linear-gradient(to bottom, rgba(5, 5, 6, 0.75) 0%, rgba(5, 5, 6, 0.25) 55%, rgba(5, 5, 6, 0) 100%);
pointer-events: none;
}
.hero-sticky-viewport .backdrop::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(5, 5, 6, 0.84) 0%, rgba(5, 5, 6, 0.44) 34%, rgba(5, 5, 6, 0) 58%);
}
/* Subtle bottom feather blend */
/* --------------------------------------------------------------------------
DIE NAHT AM HERO-AUSGANG
Ausgangslage, am gerenderten Canvas gemessen (1400x900, Ende des Tracks):
Die Sequenz endet nicht am Himmel, sondern am Waldboden. Die unterste
Pixelzeile mittelt auf #453F34 — gegen den Seitengrund sind das 7,38:1.
Ein direkter Stoss waere eine sichtbare Kante quer ueber den Bildschirm,
genau dort, wo die Dramaturgie ihren Hoehepunkt hat.
ZWEI REGELN, die zusammengehoeren:
1. Der Verlauf ist LANG — bis auf rund 70 % Bildhoehe hinauf.
2. Er ist NUR am Austritt sichtbar.
Beides nur gemeinsam. Ein langer Verlauf, den man nur im richtigen Moment
sieht, ist weich; derselbe Verlauf dauerhaft sichtbar ist Schmutz, der
ueber der ganzen Sequenz liegt — am schlimmsten am Anfang, in der dunklen
Hoehle, wo er nichts nuetzt und am meisten auffaellt.
Stuetzstellen gegen die gemessenen Bildzeilen gerechnet, ease-in: oben
extrem flach, damit der Verlaufsanfang keine eigene Kante bildet. Ueber
die ersten 67 px aendert sich die Luminanz um 5,3 Punkte (0,08 je Pixel,
nicht wahrnehmbar); im unteren Teil rund 30 Punkte je Stufe, also eine
gleichmaessige Rampe statt eines Sprungs am Schluss.
Motivisch traegt es: die Sequenz hat Nebel an der Baumgrenze. Ein Dunst,
der nach unten dichter wird, ist im Bild bereits angelegt.
-------------------------------------------------------------------------- */
.hero-bottom-blend {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: clamp(200px, 30vh, 380px);
/* --lift-100 statt var(--bg): Der Hero traegt den Hoehlenkontext, dort
waere --bg schwarz. Der Verlauf muss aber auf dem Grund der SEITE
enden, nicht auf dem des Heros. Eine der wenigen Stellen, an denen ein
Rohwert richtig ist. */
background: linear-gradient(to bottom,
rgba(241, 241, 235, 0.000) 0%,
rgba(241, 241, 235, 0.015) 20%,
rgba(241, 241, 235, 0.06) 35%,
rgba(241, 241, 235, 0.13) 48%,
rgba(241, 241, 235, 0.22) 60%,
rgba(241, 241, 235, 0.38) 72%,
rgba(241, 241, 235, 0.56) 82%,
rgba(241, 241, 235, 0.74) 90%,
rgba(241, 241, 235, 0.90) 96%,
var(--lift-100) 100%);
opacity: 0;
z-index: -1;
pointer-events: none;
}
/* Einblendung ueber den Dokument-Scroll.
Warum nicht view()? Eine view()-Timeline misst die GESAMTE Reise des
Elements durch den Viewport. Der Track steht aber schon bei Scroll 0 im
Bild, die erste Haelfte dieser Reise findet nie statt — gemessen stand
die Timeline bei 44 %, wo 97 % erwartet waren.
Der Dokument-Scroll ist hier das ehrlichere Mass, weil die Geometrie fest
ist: Track 250vh, Sticky 100vh, also loest der Hero bei genau 150vh ab
(bis 11. September 2026: 400vh / 300vh).
Die Werte stehen als --hero-exit-* in tokens.css und muessen bei einer
Aenderung der Track-Hoehe mitgefuehrt werden.
animation-duration MUSS auto sein. Die Kurzform "animation: name linear
both" setzt sie implizit auf 0s; die Timeline laeuft dann, die Animation
tut aber nichts. */
@supports (animation-timeline: scroll()) {
.hero-bottom-blend {
animation-name: naht-einblenden;
animation-duration: auto;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: var(--hero-exit-start) var(--hero-exit-end);
}
@keyframes naht-einblenden {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Hairline loader progress */
.hero-loader-progress {
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, var(--accent-pressed), var(--accent), var(--accent-strong));
z-index: 101;
transition: width 0.15s ease-out;
}
/* Stage Top Row: Spacer to preserve identical 3-row grid layout.
--container-wide wie .header-inner, sonst stimmt die Spacer-Breite nicht
mehr mit dem echten Header überein. */
.hero-stage-header-spacer {
width: 100%;
max-width: var(--container-wide);
height: clamp(52px, 6.5vh, 60px);
margin-inline: auto;
pointer-events: none;
visibility: hidden;
}
/* Hero Middle Row Content Staging.
--container-wide statt --container: die Headline behält damit ihren
Abstand zur Höhlenöffnung im Bild, unabhängig von der Inhaltsbreite der
Sektionen darunter (siehe tokens.css). */
.hero-stage-row {
width: 100%;
max-width: var(--container-wide);
margin-inline: auto;
/* Oben statt mittig — Begründung bei .hero-content margin-top. */
align-self: start;
display: flex;
align-items: center;
justify-content: flex-start;
z-index: 10;
pointer-events: none;
}
.hero-content {
max-width: min(58ch, 54vw);
text-align: left;
pointer-events: auto;
/* Abstand von der Oberkante der mittleren Bühnenzeile.
NEU EINGEMESSEN (12. September 2026): war clamp(3.2rem, 7.5vh, 5.8rem),
solange der Block in der Zeile zentriert stand und die Visitenkarte die
dritte Zeile auf Höhe hielt. Mit dem Wegfall der Karte schrumpfte diese
Zeile von rund 240px auf 29px, die mittlere 1fr-Zeile schluckte den
Rest und die Headline rutschte gemessene 86px nach unten (244 → 330).
Statt weiter zu zentrieren steht der Block jetzt oben (.hero-stage-row:
align-self: start) und dieser Abstand setzt die Höhe. Das ist auch
robuster: Die Position hängt nicht mehr davon ab, wie hoch der Inhalt
darunter gerade ist.
Gemessen bei 1440x900: 123,5px treffen die alten 244px exakt.
Das sind 13,72vh — die Eckwerte sind im selben Verhältnis
mitgewachsen wie der alte Wert (Faktor 1,83). */
margin-top: clamp(5.85rem, 13.72vh, 10.6rem);
will-change: opacity, transform;
}
/* Die Eyebrow im Hero ist die einzige der Seite ohne Versalien.
"Dipl. oec. troph." ist die konventionelle Schreibweise des Grades, und
in Großbuchstaben wirken die drei Punkte unruhig.
Die Regel stand vorher an .eyebrow--compact, also an der reinen
Mobil-Fassung. Beim Zusammenlegen der beiden Fassungen zu einer (die
Visitenkarte entfiel auch auf Desktop) ging sie verloren, und die
Basisregel .eyebrow mit ihrem text-transform: uppercase griff wieder
durch. Deshalb hängt sie jetzt an der Klasse, die immer da ist. */
.hero-content .hero-eyebrow {
text-transform: none;
}
.hero-h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5.8vw, 5.8rem);
/* Zeilenhöhe hier NICHT --lh-display (0,94), sondern 1,1 — und zwar
zwingend, seit die Headline gemischt statt in Versalien steht
(12. September 2026).
0,94 funktionierte nur mit Großbuchstaben, weil die keine Unterlängen
haben. Gemessen bei 1440px (83,5px Schriftgröße) stößt die g-Unterlänge
von "Ernährung." sonst 10px in die Oberlängen von "Deine Regeln." —
die Zeilen überlagern sich sichtbar. Auf Mobil dasselbe in klein: bei
1,02 waren es -2px.
Gemessener Abstand zwischen g-Unterlänge und den Oberlängen darunter:
0,94 → -10px 1,04 → -1px
1,00 → -5px 1,08 → +2px
1,10 → +4px ← gewählt, knappster sauberer Wert
Das Token --lh-display bleibt bei 0,94. Es hängt an der generischen
h1-Regel weiter oben (die auch das seitenweite text-transform setzt)
und gilt damit für die Überschriften der Unterseiten — die stehen
weiterhin in Versalien. Nur der Hero weicht ab. */
line-height: 1.1;
letter-spacing: var(--tracking-display);
/* Versalien abgelegt (12. September 2026): wirkten laut und klinisch.
Die Prata trägt gemischte Schrift deutlich wärmer. */
text-transform: none;
color: var(--text);
margin-bottom: var(--s-5);
}
.hero-h1 span {
display: block;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
}
/* Center Revealed Statement (Frame 117) */
.hero-quote-stage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 1100px;
text-align: center;
z-index: 12;
opacity: 0;
pointer-events: none;
will-change: opacity, transform;
}
.hero-quote-title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5.6vw, 5.8rem);
/* Zeilenhöhe von 0,98 angehoben — derselbe Grund wie bei .hero-h1:
Ohne Versalien kommen Unterlängen ins Spiel.
Maßgeblich ist hier das ENGLISCHE. Im Deutschen hängt nur ein Komma
unter der Grundlinie ("Weil nur zählt,"), das wäre schon bei 0,98
gerade eben gutgegangen (+1px). Die englische Fassung lautet
"Because only what / feels good to you matters." — das y in "only"
ist eine echte Unterlänge und stieß bei 0,98 zehn Pixel in die
Oberlängen darunter.
Gemessener Abstand bei 1440px, englische Fassung:
0,98 → -10px 1,12 → +1px
1,06 → -3px 1,14 → +3px
1,10 → 0px 1,16 → +5px ← gewählt
Bewusst rein vertikal gerechnet, ohne auszunutzen, dass Unter- und
Oberlänge vielleicht nebeneinander statt übereinander stehen: Der
Satz bricht auf schmalen Geräten anders um, damit verschieben sich
die Buchstaben gegeneinander. Deshalb der Wert, der unabhängig vom
Umbruch trägt.
Etwas luftiger als die Headline (1,1) — das verträgt der zentrierte
Zweizeiler gut, er ist kein gestapelter Block. */
line-height: 1.16;
letter-spacing: var(--tracking-display);
/* Versalien abgelegt (12. September 2026), zusammen mit .hero-h1.
Bei diesem Satz wog es schwerer als bei der Headline: Er ist der
leise Schlusspunkt der Dramaturgie, und in Versalien las er sich
lauter als die Headline darüber. Auf Mobil kam dazu, dass die
breiten Versalien ihn ungünstig umbrachen. */
text-transform: none;
color: var(--text);
text-shadow: 0 4px 50px rgba(5, 5, 6, 0.95);
}
/* Footrow: nur noch der Scroll-Hinweis, horizontal zentriert.
Bis zum 12. September 2026 standen hier zwei Dinge nebeneinander (Hinweis
links, Visitenkarte rechts), daher space-between. Die Karte ist ersatzlos
entfallen — auf Mobil verdeckte sie die Figur im Höhlenausgang, auf
Desktop war sie nicht mehr gewollt.
Der Hinweis bleibt auf Desktop LINKS. Zentriert getestet und wieder
verworfen: Gemessen bei 1440x900 steht die Figur im Höhlenausgang bei
x≈656 / y 743–859, der zentrierte Hinweis lag bei x 574–866 / y 844–873
— also mit 15px Überlappung genau auf ihren Füßen. Das ist derselbe
Fehler, den die Visitenkarte gemacht hat, nur kleiner. Links (x 56–320)
ist die Fläche frei.
Auf Mobil wird er dagegen zentriert (siehe Mobilblock): Dort ist die
Figur mittig, aber der Hinweis sitzt tiefer als ihre Füße. */
.hero-footrow {
display: flex;
align-items: flex-end;
justify-content: flex-start;
width: 100%;
max-width: var(--container-wide);
margin-inline: auto;
gap: var(--s-4);
z-index: 20;
pointer-events: none;
}
.hero-scroll-indicator {
display: flex;
align-items: center;
gap: var(--s-3);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-subtle);
pointer-events: auto;
padding-bottom: var(--s-2);
}
.hero-scroll-line {
width: 32px;
height: 1px;
background: var(--accent);
}
/* Pfeil nach unten, ruhig auf und ab.
Der Hero ist eine Scroll-Sequenz: Wer nicht scrollt, sieht ein Standbild
und nie die Auflösung. Der Pfeil sagt das ohne Worte — deshalb steht er
auch auf Mobil, wo der Hinweis vorher ganz ausgeblendet war.
4px Weg und 2,4s Dauer sind bewusst zurückhaltend: Es soll ein Hinweis
sein, kein Blickfang, der mit der Figur im Bild konkurriert. Die globale
prefers-reduced-motion-Regel (Abschnitt 15) setzt die Dauer auf 0,01ms
und hält den Pfeil damit still. */
.hero-scroll-arrow {
width: 16px;
height: 16px;
flex: none;
color: var(--accent);
animation: hero-scroll-hint 2.4s var(--ease-out) infinite;
}
@keyframes hero-scroll-hint {
0%, 100% { transform: translateY(0); opacity: 0.55; }
50% { transform: translateY(4px); opacity: 1; }
}
/* Mobile Adjustments for Hero */
@media (max-width: 900px) {
.hero-sticky-viewport.stage {
padding: clamp(10px, 1.5vh, 16px) var(--pad-inline) clamp(0.75rem, 3vw, 1.25rem);
/* Beide MÜSSEN nach der Kurzform stehen, sonst setzt sie die Werte
zurück — dieselbe Falle wie in der Grundregel. */
padding-top: calc(clamp(10px, 1.5vh, 16px) + env(safe-area-inset-top, 0px));
/* Mit dvh endet die Bühne exakt am sichtbaren Rand. Auf Geräten mit
Hausbalken säße der Scroll-Hinweis sonst direkt darauf. */
padding-bottom: calc(clamp(0.75rem, 3vw, 1.25rem)
+ env(safe-area-inset-bottom, 0px));
grid-template-rows: auto 1fr auto;
gap: 0.75rem;
}
/* Der Hero-Textblock steht auf Mobil ZENTRIERT (13. September 2026).
Warum, obwohl Desktop linksbündig bleibt: Das Bild ist achsensymmetrisch
— Höhlenöffnung, Weg, Figur und der Scroll-Hinweis unten liegen alle auf
der Mittelachse. Linksbündig war der Text das einzige Element, das
ausbrach.
Die Zentrierung setzt die Zweizeiligkeit voraus (siehe .hero-h1). Mit
drei sehr ungleich langen Zeilen (144/270/330px) wurde daraus eine
Keilform, und die kurze Zeile rutschte in den hellen Bildbereich —
gemessener Kontrast dort nur 6,2 gegen 13,6 linksbündig. Zweizeilig
sind beide Zeilen breit (345 und 260px), bleiben im abgedunkelten
Bereich und ergeben einen geschlossenen Block. */
.hero-content {
width: 100%;
max-width: none;
text-align: center;
/* Abstand nach oben, eingemessen an der Zone zwischen Header und Figur.
Gemessen bei 393x852: Zwischen Unterkante Header (82) und Oberkante
der Figur (704) liegen 622px. Der Block (Eyebrow bis Buttonunterkante,
180px hoch) stand mit dem vorherigen Wert bei 239 — 157px Luft oben
gegen 285px unten, also spürbar zu hoch. 219px Abstand stellen ihn auf
303 und damit optisch mittig (je 221px).
Bezugsgröße ist bewusst die Figur, nicht das Fenster: Sie ist der
Fixpunkt, den der Block nicht erreichen darf. */
margin-top: clamp(7.71rem, 25.7vh, 16.1rem);
}
/* Der Textblock füllt die Bühnenzeile, damit die Zeilen zueinander
zentriert sind und nicht nur der Block als Ganzes. */
.hero-stage-row {
justify-content: center;
}
/* Die Zeile muss auf einer Zeile bleiben — ein Umbruch ließe den
zweiten Teil allein darunter stehen.
Maßgeblich ist NICHT das Deutsche, sondern das Englische:
"Dipl. oec. troph. Anne Krenzin" passt bei 360px sogar in voller
Designgröße und Standard-Laufweite (276 von 307px). Die englische
Fassung "Anne Krenzin · Nutrition Scientist" braucht dort 310px und
läuft damit genau über.
Gemessen bei 360px, englische Fassung:
0,16em / 13px (Standard) → 310px, passt nicht
0,14em / 13px → 302px, passt nicht
0,13em / 12,4px → 283px, 17px Reserve ← gewählt
Die Laufweite geht deshalb leicht zurück (0,16em → 0,13em, im direkten
Vergleich kaum zu sehen), die Größe schrumpft erst unterhalb von rund
377px Fensterbreite. Auf den verbreiteten Geräten (393px und breiter)
steht damit die volle Label-Größe. */
.hero-content .hero-eyebrow {
font-size: clamp(0.68rem, 3.45vw, var(--fs-label));
letter-spacing: 0.13em;
/* Ausgleich der Laufweite: Nach dem letzten Zeichen steht noch ein
Buchstabenabstand, der die Zeile beim Zentrieren optisch nach links
versetzt. */
margin-right: -0.13em;
}
.hero-h1 {
/* Echte dynamische Größe statt fester Stufen: Schriftgröße direkt aus
der verfügbaren Breite berechnet (100vw minus beidseitigem
Innenabstand von 24px, minus 8px Sicherheitsspanne), geteilt durch
den gemessenen Zeichenbreiten-Faktor der längsten Zeile
"Deine Regeln.". Dadurch wächst der Text bei jeder Breite bis knapp
an den rechten Rand, statt zwischen festen Stufen zu springen.
GEEICHT auf gemischte Schrift (12. September 2026). Gemessen bei
32px Referenzgröße:
Versalien "DEINE REGELN." 271,3px → Faktor 8,478 (gerundet 8,6)
Gemischt "Deine Regeln." 215,0px → Faktor 6,719 (gerundet 6,85)
Die Rundung trägt dieselbe Sicherheitsspanne wie zuvor (Faktor 1,014).
Die Zeilenhöhe steht nicht hier: Sie ist mit 1,1 in der Basisregel
geregelt und gilt für beide Breiten (Begründung dort).
ACHTUNG, diese Regel ging schon einmal verloren: Sie stand zwischen
den Eyebrow-Regeln und .hero-actions und wurde bei einer
Bereichsersetzung mitgelöscht. Fällt sie weg, greift die
Desktop-Regel mit ihrem Minimum von 2,5rem — die Headline steht dann
auf Mobil bei 40px statt 49px, ohne dass irgendetwas kaputt aussieht.
Wer hier etwas ersetzt: den Bereich eng fassen. */
/* ZWEIZEILIG seit 13. September 2026: "Deine" und "Ernährung." stehen
in einer Zeile (die Spans dafür unten inline gestellt), "Deine
Regeln." darunter. Das ergibt einen kompakteren, symmetrischen Block
und ist die Voraussetzung für die Zentrierung (siehe .hero-content).
Der Faktor musste dafür neu geeicht werden, weil die längste Zeile
wechselt. Gemessen bei 32px Referenzgröße:
dreizeilig längste "Deine Regeln." 212,9px → Faktor 6,65
zweizeilig längste "Deine Ernährung." 274,8px → Faktor 8,59
8,7 trägt dieselbe Sicherheitsspanne wie zuvor.
Preis: Bei 393px sind das 38,7px statt 50,7px, die Headline wird also
rund ein Viertel kleiner. Das ist keine Einstellungssache, sondern die
Folge längerer Zeilen bei gleicher Fensterbreite.
Maßgeblich ist wie üblich das Deutsche; Englisch käme zweizeilig mit
Faktor 7,09 aus ("Your Nutrition."). */
font-size: clamp(1.6rem, calc((100vw - 56px) / 8.7), 3.4rem);
/* Doppelter Abstand zum Button (war var(--s-4)). */
margin-bottom: calc(var(--s-4) * 2);
}
/* Die ersten beiden Spans in eine Zeile. Der Zwischenraum kommt als
margin, nicht als eingefügtes Leerzeichen — so bleibt ein Umbruch
zwischen ihnen möglich, falls es doch einmal eng wird. */
.hero-h1 span:nth-child(1),
.hero-h1 span:nth-child(2) {
display: inline;
}
.hero-h1 span:nth-child(1) {
margin-right: 0.26em;
}
.hero-quote-title {
/* Bewusst GENAU derselbe Ausdruck wie .hero-h1 — nicht ein eigener
Faktor. Nur so sind Headline und Zitat auf jedem Gerät exakt gleich
groß. Ein aus der Zitatbreite abgeleiteter Faktor würde das Zitat
seine eigene, breitere Bühne (90vw) ausfüllen lassen und es damit
wieder leicht abweichen lassen.
Vorgeschichte: Das Zitat hatte hier nie eine eigene Regel und fiel
auf den unteren Anschlag der Desktop-Angabe zurück, feste 2,4rem =
38,4px. Solange die Headline mit dem alten Versalien-Faktor 8,6
gerechnet wurde, ergab die 39,2px — beide waren damit zufällig fast
gleich groß. Mit der Umeichung wuchs die Headline auf 49,2px, das
Zitat blieb stehen, und das Verhältnis kippte auf 0,78. Auf Desktop
stehen die beiden bei 0,97, also praktisch gleich; inhaltlich ist
das Zitat der Schlusspunkt der Dramaturgie und darf nicht kleiner
sein als die Eingangs-Headline.
Die englische Fassung wurde dafür gekürzt ("Only what does you good
counts.", 31 statt 44 Zeichen) und bleibt bis hinunter auf 320px bei
drei Zeilen. Ein zwischenzeitlicher Deckel von 45px nur fürs
Englische ist dadurch entfallen.
Diese Regel ging zusammen mit .hero-h1 schon einmal verloren —
siehe Warnung dort. */
/* Gleichgezogen mit .hero-h1 — wörtlich derselbe Ausdruck, damit beide
auf jedem Gerät exakt gleich groß sind. Mit der Umstellung der
Headline auf zweizeilig wechselt der Faktor von 6,85 auf 8,7; das
Zitat geht mit, obwohl es selbst kürzer ist. Andernfalls wäre es
größer als die Headline gewesen (Verhältnis 1,27).
Auf Desktop stehen die beiden bei 0,97, also ebenfalls praktisch
gleich — dort über die jeweiligen Desktop-Regeln. */
font-size: clamp(1.6rem, calc((100vw - 56px) / 8.7), 3.4rem);
}
.hero-actions {
/* Nebeneinander soll bleiben (Stapeln verdeckt mehr vom Hero-Bild).
flex-wrap bleibt "wrap" als Sicherheitsnetz für sehr schmale Displays. */
gap: clamp(6px, 1.8vw, 12px);
/* Der Button ist Flex-Kind und folgt text-align nicht — er braucht die
Zentrierung eigens. */
justify-content: center;
}
.hero-actions .btn {
/* em-basiert statt fester Pixelwerte: Innenabstand/Lücke skalieren
automatisch mit der Schriftgröße mit, die selbst mit der
Fensterbreite wächst — dadurch wirken die Buttons auf einem
breiteren Handy (z. B. iPhone Pro Max) nicht mehr unproportional
klein wie bei fixen Werten, bleiben aber auf den schmalsten Displays
(360px, per Messung verifiziert) noch nebeneinander. */
font-size: clamp(0.58rem, 2.6vw, 0.85rem);
padding: 0.75em 0.75em 0.75em 1.1em;
gap: 0.55em;
letter-spacing: 0.06em;
}
.hero-actions .btn-circle {
width: 1.9em;
height: 1.9em;
}
.hero-actions .btn-circle svg {
width: 0.95em;
height: 0.95em;
}
/* Nur noch ein Kind in der Footrow — die Spaltenaufteilung von früher
(Hinweis links, Visitenkarte rechts) entfällt. */
.hero-footrow {
justify-content: center;
}
/* Der Scroll-Hinweis war hier bis zum 12. September 2026 mit
display: none abgeschaltet. Das war auf einer Seite, deren Hero eine
Scroll-Sequenz IST, die falsche Entscheidung: Ohne Scrollen sieht man
ein Standbild und nie die Auflösung.
Er steht bewusst mittig am unteren Rand und kompakt: Die Figur im
Höhlenausgang steht auf dem iPhone 15 bei y 704–814 von 852, der
Hinweis muss darunter bleiben. Deshalb hier kleinere Schrift, engere
Laufweite und die kurze Linie ausgeblendet — sie kostet nur Breite. */
.hero-scroll-indicator {
display: flex;
justify-content: center;
gap: var(--s-2);
font-size: clamp(0.6rem, 2.6vw, 0.72rem);
letter-spacing: 0.1em;
padding-bottom: 0;
/* Lesbarkeit über dem hellen Weg.
Gemessen an dieser Stelle: Der Bildhintergrund hinter dem Hinweis
reicht von Luminanz 5 bis 226 (dunkler Fels bis heller Sandweg),
im Mittel 78. Die gedeckte Standardfarbe --text-subtle kam dort auf
einen Kontrast von 2,25 — WCAG AA verlangt 4,5 für kleinen Text.
Eine andere Textfarbe allein löst das nicht: Dunkel scheitert am
hellen Sand, hell am dunklen Fels. Deshalb helle Schrift plus
dunkler Schein — dasselbe Mittel, mit dem .hero-quote-title über
dem Panorama steht. Der Schein bringt den Kontrast lokal mit,
unabhängig davon, was im Bild gerade darunter liegt. */
color: var(--text);
text-shadow: 0 1px 3px rgba(5, 5, 6, 0.95),
0 0 14px rgba(5, 5, 6, 0.85);
}
.hero-scroll-arrow {
filter: drop-shadow(0 1px 3px rgba(5, 5, 6, 0.95));
width: 13px;
height: 13px;
}
.hero-scroll-line {
display: none;
}
/* Kräftigerer Schleier hinter der Headline: Auf Mobil nimmt der helle
Landschaftsteil des Bildausschnitts anteilig mehr Platz ein als auf
Desktop, und die Zeilen laufen fast über die volle Breite — der
Desktop-Verlauf (dunkel nur bis 58%) reicht dafür nicht mehr. */
.hero-sticky-viewport .backdrop::after {
background: linear-gradient(100deg,
rgba(5, 5, 6, 0.88) 0%,
rgba(5, 5, 6, 0.6) 45%,
rgba(5, 5, 6, 0.2) 75%,
rgba(5, 5, 6, 0) 100%);
}
}
/* --------------------------------------------------------------------------
7. Partner & Kooperationen Section (Centered & Pure Card Gold)
-------------------------------------------------------------------------- */
/* Das Partnerband ist eine BOX, kein zweiter Hintergrund.
Verworfen wurde eine Leiter aus drei gestaffelten Grundtoenen (Schwelle →
Aufstieg → Plateau), die den Aufstieg ins Licht fortsetzen sollte. Am
Geraet liest sich das nicht als Aufstieg, sondern als Streifen: zwei eng
benachbarte Graustufen uebereinander wirken wie zwei Hintergruende, die
nicht zusammengehoeren.
Die ganze Seite unter dem Hero steht deshalb auf EINEM Grund. Das
Partnerband bekommt eine eigene Flaeche im Container — abgesetzt durch
eine leicht vertiefte Fuellung und die Fase, nicht durch einen zweiten
vollflaechigen Hintergrund. Es liest sich als Objekt auf der Seite. */
.partners-wrap {
padding-block: var(--s-8) var(--section-y); /* unten wie jede Sektion, damit die Trennlinie mittig sitzt */
background-color: transparent;
}
/* Überschrift sitzt jetzt wie bei jeder anderen Sektion ÜBER der Fläche,
nicht darin — vorher stand die Eyebrow innerhalb derselben Box wie die
Logos, uneinheitlich zum Rest der Seite. */
.partners-header {
text-align: center;
margin-bottom: var(--s-7);
}
/* .fase-rahmen übernimmt Rahmen/Fläche/Eckenschnitt (goldener Verlauf wie
bei jeder anderen Karte) — vorher hatte die Box nur eine schlichte
border + clip-path ohne den goldenen Rand. */
.partners-box {
padding: var(--s-6) var(--s-5);
}
.partners-eyebrow {
text-align: center;
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent-text);
margin-inline: auto;
display: inline-block;
}
.partners-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--s-6) var(--s-8);
margin-inline: auto;
}
.partner-item {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 640px) {
/* Flex-wrap zentriert jede Zeile für sich — bei unterschiedlich breiten
Logos (z. B. "AFBB Akademie..." vs. "teachers→xplore") stehen die
Zeilenanfänge dadurch nicht untereinander, wirkt unruhig. Echtes
2-Spalten-Raster: linke Spalte bündig links, rechte bündig rechts,
je drei Logos sauber untereinander. */
.partners-grid {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: stretch;
gap: var(--s-6) var(--s-4);
}
.partner-item {
justify-content: flex-start;
min-width: 0;
}
.partner-item:nth-child(even) {
justify-content: flex-end;
}
}
/* Logos rendered in exact card gold (Gold-500 #C6A96B / Gold-400 #E2CB96) */
.partner-logo {
display: inline-block;
max-width: 100%;
/* --accent-line statt --accent: Die Logos sind CSS-Masken. Als Flaeche
(Gold) hielten sie auf hellem Grund nur 1,8:1. Sie sind bedeutungs-
tragende Grafik und brauchen 3:1; in der Linienfarbe sind es 4,75:1. */
background-color: var(--accent-line);
-webkit-mask: var(--mask) no-repeat center / contain;
mask: var(--mask) no-repeat center / contain;
opacity: 0.85;
transition: opacity var(--t-fast) var(--ease-out),
background-color var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
}
.partner-item:hover .partner-logo {
opacity: 1;
background-color: var(--accent-pressed);
transform: translateY(-2px);
}
/* --------------------------------------------------------------------------
7b. 30-Sekunden Schnellfinder (Volle Container-Breite wie #angebote)
-------------------------------------------------------------------------- */
#quiz-finder {
position: relative;
z-index: 10;
}
#quiz-finder .quiz-step-progress {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: var(--s-5);
}
#quiz-finder .quiz-dot {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 0.85rem;
font-weight: 600;
color: var(--text-subtle);
background: rgba(255, 255, 255, 0.03);
transition: all var(--t-fast) var(--ease-out);
}
#quiz-finder .quiz-dot.active {
background: var(--accent-strong);
border-color: var(--accent-line);
color: var(--text-on-accent);
font-weight: 700;
box-shadow: 0 0 16px rgba(198, 169, 107, 0.45);
}
#quiz-finder .quiz-step-line {
width: 44px;
height: 2px;
background: var(--border);
transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
#quiz-finder .quiz-step-line.active {
background: var(--accent-strong);
box-shadow: 0 0 8px rgba(198, 169, 107, 0.4);
}
/* Question Title */
#quiz-finder .quiz-question-title {
font-family: var(--font-display);
font-size: clamp(1.35rem, 1.8vw, 1.75rem);
color: var(--text);
text-align: left;
margin-bottom: var(--s-5);
font-weight: 400;
}
/* Options Grid: Volle Container-Breite (analog zur Bento-Grid in #angebote) */
#quiz-finder .quiz-options-grid {
display: grid;
gap: clamp(16px, 2vw, 24px);
width: 100%;
}
/* Step 1: 2 Karten pro Reihe wie vom User gewünscht */
#quiz-finder #quiz-step-1 .quiz-options-grid {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
#quiz-finder #quiz-step-1 .quiz-options-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Step 2: 4 Karten im 2×2-Raster (seit 14. September 2026, vorher 3) */
#quiz-finder #quiz-step-2-grid {
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
#quiz-finder #quiz-step-2-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Option Card: Bento-Design abwechselnd Signal Gold & Dark Graphite Surface.
Kompakte Zeile statt hoher Kachel: Icon | Titel+Text | Pfeil nebeneinander
statt Icon-Zeile oben + Textblock darunter gestapelt — spart auf allen
vier Optionen zusammen deutlich Scroll-Strecke. */
#quiz-finder .quiz-opt-card {
position: relative;
isolation: isolate;
padding: clamp(1.1rem, 1.8vw, 1.5rem);
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
gap: var(--s-4);
text-align: left;
border-radius: 0;
border: 0;
transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
#quiz-finder .quiz-opt-card:hover {
transform: translateY(-4px);
}
/* --- 1. GOLD CARDS: Box 1 (Für mich persönlich), Box 4 (Wissen & Inspiration) & Step 2 Odd --- */
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(1),
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(4),
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(odd) {
background: var(--accent);
color: var(--text-on-accent);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg, 32px)),
calc(100% - var(--cut-lg, 32px)) 100%, 0 100%);
filter: drop-shadow(0 6px 20px rgba(198, 169, 107, 0.28));
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(1):hover,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(4):hover,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(odd):hover {
background: #D4B97B;
filter: drop-shadow(0 14px 32px rgba(198, 169, 107, 0.45));
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(1) .quiz-opt-title,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(4) .quiz-opt-title,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(odd) .quiz-opt-title {
color: var(--text-on-accent);
font-weight: 700;
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(1) .quiz-opt-desc,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(4) .quiz-opt-desc,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(odd) .quiz-opt-desc {
color: rgba(5, 5, 6, 0.82);
font-weight: 500;
line-height: 1.6;
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(1) .quiz-opt-icon-wrap,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(4) .quiz-opt-icon-wrap,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(odd) .quiz-opt-icon-wrap {
background: rgba(5, 5, 6, 0.08);
border: 1px solid rgba(5, 5, 6, 0.16);
color: var(--text-on-accent);
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(1):hover .quiz-opt-icon-wrap,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(4):hover .quiz-opt-icon-wrap,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(odd):hover .quiz-opt-icon-wrap {
background: var(--bg);
border-color: var(--bg);
color: var(--accent-text);
transform: scale(1.06);
box-shadow: 0 4px 14px rgba(5, 5, 6, 0.35);
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(1) .card-circle-link,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(4) .card-circle-link,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(odd) .card-circle-link {
background: var(--bg);
color: var(--accent-text);
border: 0;
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(1):hover .card-circle-link,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(4):hover .card-circle-link,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(odd):hover .card-circle-link {
background: #000;
color: #fff;
transform: translateX(3px);
}
/* --- 2. GRAPHITE CARDS: Box 2 (Familie & Kinder), Box 3 (Schule & Lehrkräfte) & Step 2 Even --- */
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2),
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3),
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even) {
background: transparent;
color: var(--text);
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2)::before,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3)::before,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even)::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(226, 203, 150, 0.16) 70%, var(--accent) 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg, 32px)),
calc(100% - var(--cut-lg, 32px)) 100%, 0 100%);
transition: background var(--t-base) var(--ease-out), filter var(--t-base) var(--ease-out);
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2)::after,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3)::after,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even)::after {
--cut-in: calc(var(--cut-lg, 32px) - var(--cut-inset, 0.586px));
content: "";
position: absolute;
inset: 1px;
z-index: -1;
background: var(--surface);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-in)),
calc(100% - var(--cut-in)) 100%, 0 100%);
transition: background-color var(--t-base) var(--ease-out);
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2):hover::before,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3):hover::before,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even):hover::before {
background: linear-gradient(135deg, rgba(226, 203, 150, 0.35) 0%, var(--accent-strong) 70%, var(--accent) 100%);
filter: drop-shadow(0 0 14px rgba(198, 169, 107, 0.35));
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2):hover::after,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3):hover::after,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even):hover::after {
background: rgba(255, 255, 255, 0.035);
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2) .quiz-opt-title,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3) .quiz-opt-title,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even) .quiz-opt-title {
color: var(--text);
font-weight: 600;
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2):hover .quiz-opt-title,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3):hover .quiz-opt-title,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even):hover .quiz-opt-title {
color: var(--accent-text);
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2) .quiz-opt-desc,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3) .quiz-opt-desc,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even) .quiz-opt-desc {
color: var(--text-subtle);
line-height: 1.6;
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2) .quiz-opt-icon-wrap,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3) .quiz-opt-icon-wrap,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even) .quiz-opt-icon-wrap {
background: var(--surface-hover);
border: 1px solid var(--border);
color: var(--accent-text);
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2):hover .quiz-opt-icon-wrap,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3):hover .quiz-opt-icon-wrap,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even):hover .quiz-opt-icon-wrap {
background: rgba(198, 169, 107, 0.15);
border-color: var(--accent-line);
color: var(--accent-text);
transform: scale(1.06);
box-shadow: 0 0 20px rgba(198, 169, 107, 0.25);
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2) .card-circle-link,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3) .card-circle-link,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even) .card-circle-link {
color: var(--text-subtle);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
}
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(2):hover .card-circle-link,
#quiz-finder #quiz-step-1 .quiz-opt-card:nth-child(3):hover .card-circle-link,
#quiz-finder #quiz-step-2 .quiz-opt-card:nth-child(even):hover .card-circle-link {
background: var(--accent-strong);
color: var(--text-on-accent);
border-color: var(--accent-line);
transform: translateX(3px);
}
/* Shared Micro-Element Styles */
.quiz-opt-icon-wrap {
width: 44px;
height: 44px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--t-fast) var(--ease-out);
flex-shrink: 0;
}
.quiz-opt-icon-wrap.quiz-opt-icon-sm {
width: 38px;
height: 38px;
border-radius: 9px;
}
.quiz-opt-svg {
width: 24px;
height: 24px;
display: block;
transition: transform var(--t-fast) var(--ease-out);
}
.quiz-opt-icon-sm .quiz-opt-svg {
width: 20px;
height: 20px;
}
.quiz-opt-card .card-circle-link {
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--t-fast) var(--ease-out);
}
.quiz-opt-card-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex-grow: 1;
min-width: 0;
}
#quiz-finder .quiz-opt-title {
font-family: var(--font-ui);
font-size: clamp(1rem, 1.2vw, 1.1rem);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
transition: color var(--t-fast) var(--ease-out);
}
#quiz-finder .quiz-opt-desc {
font-size: clamp(0.82rem, 0.95vw, 0.9rem);
line-height: 1.4;
}
/* Result Card: Breites Bento Element in Dark Graphite Surface mit 45°-Fase */
#quiz-finder .quiz-result-card {
width: 100%;
position: relative;
isolation: isolate;
background: transparent;
border: 0;
border-radius: 0;
padding: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 3.5vw, 3rem);
text-align: center;
}
#quiz-finder .quiz-result-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(226, 203, 150, 0.22) 70%, var(--accent) 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg, 32px)),
calc(100% - var(--cut-lg, 32px)) 100%, 0 100%);
}
#quiz-finder .quiz-result-card::after {
--cut-in: calc(var(--cut-lg, 32px) - var(--cut-inset, 0.586px));
content: "";
position: absolute;
inset: 1px;
z-index: -1;
background: var(--surface);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-in)),
calc(100% - var(--cut-in)) 100%, 0 100%);
}
#quiz-finder .quiz-result-header {
margin-bottom: var(--s-3);
}
#quiz-finder .quiz-result-badge {
color: var(--accent-text);
font-family: var(--font-ui);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
#quiz-finder .quiz-result-title {
font-family: var(--font-display);
font-size: clamp(1.85rem, 2.8vw, 2.6rem);
color: var(--text);
margin-bottom: var(--s-3);
line-height: 1.2;
}
#quiz-finder .quiz-result-desc {
color: var(--text-muted);
font-size: 1.05rem;
max-width: 680px;
margin: 0 auto clamp(1.75rem, 2.5vw, 2.5rem);
line-height: 1.65;
}
#quiz-finder .quiz-result-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.quiz-result-header {
margin-bottom: var(--s-3);
}
.quiz-result-badge {
color: var(--accent-text);
font-family: var(--font-ui);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.quiz-result-title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 2.5vw, 2.35rem);
color: var(--text);
margin-bottom: var(--s-3);
line-height: 1.2;
}
.quiz-result-desc {
color: var(--text-muted);
font-size: 1rem;
max-width: 580px;
margin: 0 auto clamp(1.75rem, 2.5vw, 2.25rem);
line-height: 1.65;
}
.quiz-result-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
/* --------------------------------------------------------------------------
7b-2. Schnellfinder — Absender der Frage (Portrait, Name, Qualifikation)
Formvokabular: Fase, keine Rundungen. Nur bestehende Tokens.
-------------------------------------------------------------------------- */
.quiz-asker {
display: flex;
align-items: center;
gap: var(--s-5);
margin-bottom: var(--s-6);
}
/* Portrait. Kein Kreis: das Formvokabular der Seite ist die Fase. */
.quiz-asker__portrait {
flex: 0 0 auto;
width: 88px;
height: 88px;
position: relative;
overflow: hidden;
}
.quiz-asker__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
/* Bildmitte sitzt ueber der Dateimitte — sonst schneidet der Rahmen
das Kinn an. */
object-position: 50% 30%;
display: block;
}
/* Fase: derselbe Eckenschnitt wie an Karten und Buttons, im kleinen Mass.
Bewusst keine Rundung — das Formvokabular der Seite ist die Fase. */
.quiz-asker__portrait--fase {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)),
calc(100% - var(--cut-sm)) 100%, 0 100%);
}
.quiz-asker__text {
min-width: 0;
}
.quiz-asker__name {
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1.2;
margin: 0 0 var(--s-1);
color: var(--text);
}
.quiz-asker__role {
font-family: var(--font-ui);
font-size: var(--fs-small, .9rem);
color: var(--text-muted);
margin: 0 0 var(--s-2);
line-height: 1.45;
}
.quiz-asker__proof {
--proof-cut: 8px;
position: relative;
display: inline-flex;
align-items: center;
/* Umbruch zwischen Jahresangabe und Bezeichnung erlauben — sonst schiebt
die Plakette auf schmalen Geraeten ueber den Rand. */
flex-wrap: wrap;
gap: var(--s-2);
padding: 4px 11px 4px 9px;
font-family: var(--font-ui);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent-text);
white-space: nowrap;
}
/* Rahmen als zwei geschnittene Ebenen: ein border wuerde die Fase
nicht mitgehen und an der Schnittkante offen stehen. */
.quiz-asker__proof::before,
.quiz-asker__proof::after {
content: "";
position: absolute;
z-index: -1;
}
.quiz-asker__proof::before {
inset: 0;
background: var(--border);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--proof-cut)),
calc(100% - var(--proof-cut)) 100%, 0 100%);
}
.quiz-asker__proof::after {
--cut-in: calc(var(--proof-cut) - var(--cut-inset));
inset: 1px;
background: var(--bg);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-in)),
calc(100% - var(--cut-in)) 100%, 0 100%);
}
.quiz-asker__proof svg {
flex: 0 0 auto;
width: 13px;
height: 13px;
}
/* Jahresangabe und Bezeichnung bleiben je fuer sich zusammen — umbrochen
wird nur zwischen ihnen, nie mitten in "15+ Jahre". */
.quiz-asker__proof > span {
white-space: nowrap;
}
/* Mobil: gleiche Zeile, nur enger. Untereinander wirkt das Portrait
wie ein zweiter Sektionskopf und kostet eine halbe Bildschirmhoehe. */
@media (max-width: 560px) {
.quiz-asker {
gap: var(--s-4);
margin-bottom: var(--s-5);
}
.quiz-asker__portrait {
width: 64px;
height: 64px;
}
.quiz-asker__name { font-size: 1.15rem; }
.quiz-asker__role {
font-size: .82rem;
margin-bottom: var(--s-1);
}
.quiz-asker__proof {
--proof-cut: 7px;
font-size: .66rem;
padding: 3px 9px 3px 7px;
/* Auf schmalen Geraeten umbrechen statt an den Rand stossen:
bei 320 px lag die rechte Kante sonst exakt auf dem Viewport. */
white-space: normal;
max-width: 100%;
}
}
/* --- Position: an der Frage ----------------------------------------------
Die Kopfzeile sitzt nicht am Sektionskopf, sondern direkt ueber
"Wonach suchst du?" — damit liest sich die Frage als gestellt.
-------------------------------------------------------------------------- */
.quiz-asker--inline {
margin-bottom: var(--s-4);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--border);
}
/* Zurueck-Weg in Schritt 2. Bewusst leise: ein Button in Kartenoptik wuerde
mit den Antwortkarten darueber konkurrieren. */
.quiz-back {
display: inline-flex;
align-items: center;
gap: var(--s-2);
margin-top: var(--s-5);
padding: 6px 2px;
background: none;
border: 0;
cursor: pointer;
font-family: var(--font-ui);
font-size: var(--fs-small, .9rem);
color: var(--text-muted);
transition: color var(--t-base) var(--ease-out);
}
.quiz-back svg {
width: 16px;
height: 16px;
transition: transform var(--t-base) var(--ease-out);
}
.quiz-back:hover {
color: var(--accent-text);
}
.quiz-back:hover svg {
transform: translateX(-3px);
}
.quiz-back:focus-visible {
outline: var(--focus-ring);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
7b. Ausgewogene Ernährung (1:1 Beratung & Workbook Cards)
-------------------------------------------------------------------------- */
#ausgewogene-ernaehrung .offering-card {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#ausgewogene-ernaehrung .offering-card-cover-wrap {
aspect-ratio: 16 / 10;
margin-bottom: var(--s-4);
position: relative;
overflow: hidden;
border-radius: 2px;
}
#ausgewogene-ernaehrung .offering-card-cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--tr-smooth);
}
#ausgewogene-ernaehrung .offering-card:hover .offering-card-cover {
transform: scale(1.03);
}
/* Reused identically in #ausgewogene-ernaehrung and #digitales-lehrbuch —
war zuvor an die erste Section gebunden und blieb dort im Lehrbuch-Bereich
unstyled (reine Textzeile statt Badge über dem Bild). */
.offering-status-badge {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
/* --gold-400 statt --accent-text: fester Hintergrund unabhängig vom
Kartenkontext — zwei der drei Karten mit diesem Badge sind mittlerweile
hell (.card--bone), --accent-text würde dort auf dunkles Gold kippen. */
color: var(--gold-400);
background: rgba(14, 13, 12, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(198, 169, 107, 0.35);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
#ausgewogene-ernaehrung .offering-list {
margin-top: var(--s-4);
display: flex;
flex-direction: column;
gap: var(--s-2);
}
#ausgewogene-ernaehrung .offering-list li {
display: flex;
align-items: center;
gap: var(--s-3);
font-size: var(--fs-small);
color: var(--text-subtle);
}
#ausgewogene-ernaehrung .offering-list li svg {
width: 18px;
height: 18px;
color: var(--accent-text);
flex-shrink: 0;
}
#ausgewogene-ernaehrung .offering-price-item {
/* !important entfernt: Es stammte aus v2, wo die Farbe auf das
undefinierte --sand-100 zeigte. Die Deklaration gewann dadurch zwar die
Kaskade, fiel danach aber als ungueltig auf Vererbung zurueck — die
Hervorhebung hob nichts hervor. */
color: var(--text);
font-size: 1.05rem;
}
#ausgewogene-ernaehrung .offering-price-value {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-text);
letter-spacing: 0.02em;
}
/* Wie .offering-status-badge: auch in #digitales-lehrbuch (textbook-pricing-card)
wiederverwendet, war dort aber unstyled. */
.offering-highlight-item {
color: var(--text);
font-weight: 600;
}
.offering-card-action {
margin-top: var(--s-5);
display: flex;
}
.offering-card-action .btn {
width: 100%;
justify-content: space-between;
}
/* --------------------------------------------------------------------------
7c. Digitales Lehrbuch (Schulen & Bildungseinrichtungen)
-------------------------------------------------------------------------- */
#digitales-lehrbuch .textbook-showcase-card,
#digitales-lehrbuch .textbook-pricing-card {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#digitales-lehrbuch .textbook-cover-wrap {
aspect-ratio: 16 / 10;
margin-bottom: var(--s-4);
position: relative;
overflow: hidden;
border-radius: 2px;
}
#digitales-lehrbuch .textbook-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--tr-smooth);
}
#digitales-lehrbuch .textbook-showcase-card:hover .textbook-cover-img {
transform: scale(1.03);
}
#digitales-lehrbuch .textbook-pricing-box {
margin: var(--s-4) 0 var(--s-5) 0;
padding: var(--s-4);
background: rgba(198, 169, 107, 0.05);
border: 1px solid rgba(198, 169, 107, 0.22);
border-radius: 2px;
}
#digitales-lehrbuch .textbook-price-line {
display: flex;
flex-wrap: wrap; /* reicht der Platz nicht, rutscht „pro Zugang“ */
align-items: baseline; /* als Ganzes unter den Preis statt in sich */
gap: var(--s-1) var(--s-2); /* umzubrechen (kleine Handys, 14.09.2026) */
}
#digitales-lehrbuch .textbook-price-amount,
#digitales-lehrbuch .textbook-price-unit {
white-space: nowrap;
}
/* Kleine Handys: Eyebrow „Konditionen & Schullizenz“ neben dem Symbol war
5px zu breit und brach um. Etwas engere Sperrung reicht. */
@media (max-width: 420px) {
#digitales-lehrbuch .textbook-pricing-card .card-top .eyebrow {
letter-spacing: 0.1em;
}
}
#digitales-lehrbuch .textbook-price-amount {
font-family: var(--font-display);
font-size: clamp(2.2rem, 3.2vw, 3rem);
font-weight: 800;
color: var(--text);
line-height: 1;
letter-spacing: -0.01em;
}
#digitales-lehrbuch .textbook-price-unit {
font-family: var(--font-ui);
font-size: 1.05rem;
font-weight: 500;
color: var(--accent-text);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
}
#digitales-lehrbuch .textbook-price-validity {
color: var(--accent-text);
font-weight: 600;
font-size: 0.95rem;
margin-top: var(--s-2);
font-family: var(--font-ui);
}
/* 8 Modules Grid Overview */
.textbook-modules-section {
margin-top: var(--s-6);
}
.textbook-modules-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-3);
margin-top: var(--s-4);
}
@media (max-width: 1024px) {
.textbook-modules-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 580px) {
.textbook-modules-grid {
grid-template-columns: 1fr;
}
}
.module-card {
background: var(--surface);
padding: clamp(1.2rem, 1.8vw, 1.5rem);
display: flex;
flex-direction: column;
transition: transform var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out);
position: relative;
}
/* Kein translateY/box-shadow: widersprach der Elevation-Regel
"Flächenkontrast statt Schatten" (tokens.css) und riss an der
Schnittecke eine sichtbare Naht auf. .fase-rahmen:hover übernimmt die
Fläche/Rahmenfarbe bereits — das reicht als Hover-Feedback. */
.module-number {
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 600;
/* See statt Gold: Curriculum-Fakten, keine Handlung. */
color: var(--info-text);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
margin-bottom: var(--s-2);
display: inline-block;
}
.module-title {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
margin-bottom: var(--s-2);
line-height: 1.25;
}
.module-desc {
font-size: var(--fs-small);
color: var(--text-subtle);
line-height: 1.55;
margin: 0;
}
/* ==========================================================================
7d. Bücher für Kinder (Emily & Purple)
========================================================================== */
.books-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
margin-top: var(--s-6);
}
.book-card {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--s-5);
background: var(--surface, #0B1113);
border: 1px solid rgba(198, 169, 107, 0.22);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
/* Wie .module-card: kein translateY/box-shadow mehr, siehe dort. */
.book-card-cover-wrap {
position: relative;
border-radius: var(--r-md, 8px);
overflow: hidden;
margin-bottom: var(--s-4);
aspect-ratio: 3 / 4;
background: #070B0C;
border: 1px solid rgba(198, 169, 107, 0.15);
}
.book-card-cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.book-card:hover .book-card-cover {
transform: scale(1.04);
}
.book-card-status-badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(8, 14, 16, 0.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* --gold-400 statt --accent-text: fester Hintergrund unabhängig vom
Kartenkontext (Buchkarten sind jetzt hell), --accent-text würde dort
auf dunkles Gold kippen — dunkel auf dunkel. Die Pillenform (border-
radius:9999px) passte auch nicht zum sonst eckigen Fase-System. */
color: var(--gold-400);
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.32rem 0.75rem;
border: 1px solid rgba(198, 169, 107, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
z-index: 2;
}
.book-card-tag {
display: inline-block;
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: var(--s-2);
}
.book-card-title {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.35vw, 1.35rem);
font-weight: 600;
line-height: 1.3;
color: var(--text);
margin-bottom: var(--s-3);
}
.book-card-desc {
font-family: var(--font-ui);
font-size: 0.92rem;
line-height: 1.6;
color: var(--text-subtle);
}
.book-card-bottom {
margin-top: var(--s-5);
padding-top: var(--s-4);
border-top: 1px solid rgba(198, 169, 107, 0.12);
}
.book-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-ui);
font-size: 0.85rem;
color: var(--text-muted);
}
.book-card-meta svg {
width: 16px;
height: 16px;
color: var(--accent-text);
flex-shrink: 0;
}
@media (max-width: 1024px) {
.books-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
/* Drei volle Buchkarten untereinander sind auf Mobil sehr viel
Scrollarbeit. Statt zu stapeln: horizontales Swipe-Karussell mit
nativem CSS scroll-snap (kein JS für die Wischgeste nötig) plus
Punkt-Navigation (.books-carousel-dots) — Karten bleiben in voller
Größe, nur anders angeordnet. */
.books-grid {
display: flex;
grid-template-columns: unset;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline-start: var(--pad-inline);
gap: var(--s-4);
margin-inline: calc(var(--pad-inline) * -1);
padding-inline: var(--pad-inline);
padding-bottom: var(--s-2);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.books-grid::-webkit-scrollbar {
display: none;
}
.book-card {
flex: 0 0 82%;
scroll-snap-align: start;
}
}
.books-carousel-dots {
display: none;
justify-content: center;
/* Die Knöpfe sind 24px groß (Mindestmaß für Touch-Ziele), der sichtbare
Punkt bleibt 8px. Die negativen 8px oben und unten gleichen den
unsichtbaren Rand aus, damit der Punkt an derselben Stelle sitzt. */
margin-top: calc(var(--s-4) - 8px);
margin-bottom: -8px;
}
@media (max-width: 640px) {
.books-carousel-dots {
display: flex;
}
}
/* Hinweis unter den Buchkarten, ersetzt die drei Buttons */
.books-note {
margin: var(--s-6) auto 0;
max-width: 60ch;
text-align: center;
font-size: var(--fs-small);
line-height: 1.6;
color: var(--text-muted);
text-wrap: balance;
}
.books-carousel-dot {
display: grid;
place-items: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.books-carousel-dot::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border-strong);
opacity: 0.4;
transition: opacity var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.books-carousel-dot.is-active::before {
background: var(--accent);
opacity: 1;
}
/* ==========================================================================
7e. Über Deine Expertin (Anne Krenzin)
========================================================================== */
/* Sektionen, deren .section-header nur die Eyebrow enthält (der eigentliche
Titel sitzt weiter unten im jeweiligen Zwei-Spalten-Layout, nicht hier —
#podcast seit dem Umbau ebenfalls, siehe 7f). Der site-weite
margin-bottom:var(--s-7) ist für einen vollen Eyebrow+H2+Lead-Block
bemessen — nach einer einzelnen Zeile wirkt er wie eine unbeabsichtigte
Lücke vor dem Bild. */
#ueber-anne .section-header,
#podcast .section-header {
margin-bottom: var(--s-5);
}
.expert-profile-layout {
display: grid;
grid-template-columns: 440px 1fr;
gap: var(--s-6);
/* Statt "start": Titel+Zitat+Bio+Facts sind länger als das Bild bei
aspect-ratio 4:5 — mit "start" endet das Bild weit über den Buttons,
nichts auf einer Höhe. "stretch" lässt die Bildspalte die Höhe der
Textspalte annehmen, object-fit:cover übernimmt den Rest. */
align-items: stretch;
margin-top: var(--s-5);
}
/* Trägt gleichzeitig .fase-rahmen (Eckenschnitt über Pseudo-Elemente) — das
Bild braucht denselben diagonalen Schnitt direkt, sonst bleibt es eckig
während der Rahmen dahinter schräg zuläuft: zwei Silhouetten am selben
Kasten. clip-path statt border-radius+overflow löst beides zugleich.
Kein aspect-ratio hier: height:100% füllt die per align-items:stretch
vorgegebene Zeilenhöhe (= Höhe der Textspalte). Auf Mobil (gestapelt,
siehe Media Query unten) gibt es keine Nachbarspalte zum Angleichen —
dort wieder aspect-ratio: 4/5. */
.expert-image-wrap {
position: relative;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)),
calc(100% - var(--cut-lg)) 100%, 0 100%);
height: 100%;
background: #070B0C;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}
.expert-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.expert-image-badge {
position: absolute;
bottom: 1.25rem;
left: 1.25rem;
background: rgba(8, 14, 16, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(198, 169, 107, 0.3);
padding: 0.75rem 1.15rem;
border-radius: var(--r-md, 8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.expert-badge-years {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--accent-text);
line-height: 1;
}
.expert-badge-text {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.expert-title {
font-family: var(--font-display);
font-size: clamp(2rem, 2.5vw, 2.75rem);
font-weight: 600;
line-height: 1.15;
color: var(--text);
margin-bottom: var(--s-2);
}
.expert-subtitle {
font-family: var(--font-ui);
font-size: 1.05rem;
font-weight: 500;
color: var(--accent-text);
margin-bottom: var(--s-4);
}
.expert-quote {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.4vw, 1.35rem);
font-style: italic;
line-height: 1.45;
color: var(--accent-text, #E2D6BD);
border-left: 2px solid var(--accent-line);
padding-left: var(--s-4);
margin: var(--s-4) 0;
}
.expert-bio {
font-family: var(--font-ui);
font-size: 0.96rem;
line-height: 1.7;
color: var(--text-subtle);
margin-bottom: var(--s-5);
}
.expert-facts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-4);
margin-bottom: var(--s-6);
}
.expert-fact-chip {
background: var(--surface, #0B1113);
border: 1px solid rgba(198, 169, 107, 0.18);
padding: var(--s-4);
border-radius: var(--r-md, 6px);
transition: transform 0.25s ease, border-color 0.25s ease;
}
/* Wie .module-card: kein translateY mehr, siehe dort. */
.expert-fact-header {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: var(--s-2);
}
/* See statt Gold: Nachweise/Zertifizierung, keine Handlung. */
.expert-fact-icon {
color: var(--info-text);
display: flex;
align-items: center;
justify-content: center;
}
.expert-fact-title {
font-family: var(--font-ui);
font-size: 0.92rem;
font-weight: 700;
color: var(--text);
}
.expert-fact-desc {
display: block;
font-family: var(--font-ui);
font-size: 0.82rem;
line-height: 1.5;
color: var(--text-subtle);
}
/* Zwei gleich breite Buttons, links und rechts bündig mit den Fakten-Boxen
darüber (gleiche Spalten und gleicher Abstand wie .expert-facts-grid).
Wird die Spalte schmal, brechen sie untereinander um. */
.expert-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--s-4);
}
.expert-actions .btn {
width: 100%;
line-height: 1.3; /* zweizeilige Beschriftung (EN, schmale Spalte) nicht gequetscht */
}
@media (max-width: 1024px) {
.expert-profile-layout {
grid-template-columns: 1fr;
gap: var(--s-5);
}
.expert-image-wrap {
max-width: 440px;
aspect-ratio: 4 / 5;
height: auto;
margin: 0 auto;
}
}
@media (max-width: 640px) {
.expert-facts-grid {
grid-template-columns: 1fr;
}
.expert-actions {
flex-direction: column;
width: 100%;
}
.expert-actions .btn {
width: 100%;
justify-content: center;
}
}
/* --------------------------------------------------------------------------
7f. Podcast
Exakt dasselbe Baumuster wie .expert-profile-layout (Bild trägt seinen
Fase-Rahmen direkt, Textspalte inkl. H2 steht frei daneben, Bild-Spalte
per align-items:stretch + height:100% auf die volle Höhe der Textspalte
gezogen) — nur spiegelverkehrt (Bild rechts statt links). Titel+Lead
sitzen bewusst NICHT mehr im .section-header (der hier wie bei
"Über Deine Expertin" nur die Eyebrow trägt), sondern in der Textspalte,
damit die Bildoberkante exakt auf Höhe der Überschrift beginnt.
-------------------------------------------------------------------------- */
.podcast-layout {
display: grid;
grid-template-columns: 1fr minmax(280px, 360px);
gap: var(--s-7);
align-items: stretch;
margin-top: var(--s-5);
}
.podcast-visual {
position: relative;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)),
calc(100% - var(--cut-lg)) 100%, 0 100%);
height: 100%;
background: #070B0C;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}
.podcast-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
}
.podcast-play-btn {
position: absolute;
inset: 0;
margin: auto;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--accent);
color: var(--text-on-accent);
box-shadow: 0 8px 24px rgba(5, 5, 6, 0.35);
transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.podcast-play-btn svg {
margin-left: 3px; /* optisch zentrieren: Dreieck-Spitze zeigt nach rechts */
}
.podcast-play-btn:hover {
background: var(--accent-pressed);
transform: scale(1.06);
}
.podcast-title {
margin: var(--s-2) 0 var(--s-3);
}
.podcast-title-accent {
color: var(--text-muted);
font-style: italic;
}
.podcast-platforms {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
margin-top: var(--s-5); /* Abstand zum Text, früher durch die entfernte Host-Zeile gegeben */
}
/* Gleiche Optik wie die Info-Kacheln bei "Über Deine Expertin"
(.expert-fact-chip/-header/-icon/-title/-desc werden hier direkt
wiederverwendet, siehe Markup) — nur als Link statt als div, deshalb
noch display:block + text-decoration:none obendrauf. */
.podcast-platform-link {
display: block;
text-decoration: none;
color: inherit;
}
@media (max-width: 900px) {
.podcast-layout {
grid-template-columns: 1fr;
}
/* Bild bleibt auf Mobil oben (wie bei "Über Deine Expertin"), obwohl es
im Markup nach der Textspalte steht (dort sitzt es auf Desktop rechts). */
.podcast-image-col {
order: -1;
}
/* Ohne Nachbarspalte zum Strecken (siehe .expert-image-wrap-Pendant):
hier wieder aspect-ratio statt height:100%. */
.podcast-visual {
width: 100%;
max-width: 380px;
aspect-ratio: 16 / 10;
height: auto;
margin-inline: auto;
}
}
@media (max-width: 480px) {
.podcast-platforms {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
7g. Lifestyle-Magazin & Ratgeber (Startseiten-Teaser, #magazin)
-------------------------------------------------------------------------- */
/* Zweite Titelzeile gedämpft wie .hero-heading-accent in den anderen
Sektionen — nicht mehr kursiv in See-Farbe (16. September 2026). */
.magazin-title-accent {
color: var(--text-subtle);
}
/* Themen-Chips: führen direkt in den gefilterten Blog. Gold-Umriss mit
kleiner Fase wie die übrigen Handlungselemente. */
.magazin-more {
margin-top: var(--s-7);
text-align: center;
}
.magazin-more-label {
margin: 0 auto var(--s-3);
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent-text);
}
.magazin-topics {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-2);
}
.magazin-topic {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--s-4);
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
white-space: nowrap;
color: var(--text);
text-decoration: none;
border: 1px solid var(--accent-line);
transition: background-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
}
.magazin-topic:hover,
.magazin-topic:focus-visible {
background-color: rgba(198, 169, 107, 0.14);
color: var(--accent-text);
}
/* Editorial-Raster: Leseempfehlung links über drei Zeilen, drei Artikel
rechts, Beratungsband über die volle Breite darunter. */
.magazin-feed {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--s-5);
}
.magazin-post {
display: flex;
flex-direction: column;
gap: var(--s-4);
padding: var(--s-4);
}
.magazin-post--featured {
grid-row: span 3;
padding: var(--s-5);
}
/* Kleine Artikel am Desktop quer: Bild links, Text rechts */
.magazin-post:not(.magazin-post--featured):not(.magazin-post--cta) {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
align-items: center;
}
.magazin-post-media {
position: relative;
overflow: hidden;
/* Breite und Schrumpfsperre ausdrücklich: Im waagerechten Wischband
berechnete Safari die Breite sonst gelegentlich vor dem Laden des Bildes
und zeichnete die Kachel zu klein (16. September 2026). */
width: 100%;
flex: 0 0 auto;
aspect-ratio: 3 / 2;
background: #070B0C;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)),
calc(100% - var(--cut-sm)) 100%, 0 100%);
}
.magazin-post--featured .magazin-post-media {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)),
calc(100% - var(--cut-lg)) 100%, 0 100%);
}
.magazin-post-img {
width: 100%;
min-width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s var(--ease-out);
}
.magazin-post:hover .magazin-post-img {
transform: scale(1.04);
}
/* Wie .book-card-status-badge: fester dunkler Grund unabhängig vom Kontext */
.magazin-post-pick {
position: absolute;
top: 0.75rem;
left: 0.75rem;
background: rgba(8, 14, 16, 0.88);
color: var(--gold-400);
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.32rem 0.75rem;
border: 1px solid rgba(198, 169, 107, 0.3);
}
.magazin-post-body {
display: flex;
flex-direction: column;
gap: var(--s-2);
min-width: 0;
}
.magazin-post-meta {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.04em;
color: var(--text-subtle);
}
.magazin-post-tag {
color: var(--accent-text);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
}
.magazin-post-title {
margin: 0;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 500;
line-height: 1.25;
text-wrap: balance;
}
.magazin-post--featured .magazin-post-title {
font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
}
/* Die ganze Karte ist klickbar: der Titel-Link spannt sich über die Karte */
.magazin-post-link {
color: inherit;
text-decoration: none;
}
.magazin-post-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.magazin-post:focus-within {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.magazin-post:has(.magazin-post-link:focus:not(:focus-visible)) {
outline: none;
}
.magazin-post-excerpt {
margin: 0;
font-size: var(--fs-small);
line-height: 1.6;
color: var(--text-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.magazin-post:not(.magazin-post--featured) .magazin-post-excerpt {
display: none;
}
.magazin-post-more {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: var(--s-2);
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 600;
color: var(--accent-text);
}
.magazin-post-more svg {
width: 14px;
height: 14px;
transition: transform var(--t-fast) var(--ease-out);
}
.magazin-post:hover .magazin-post-more svg {
transform: translateX(3px);
}
.magazin-post-time {
white-space: nowrap;
}
/* Beratungsband: am Desktop quer über beide Spalten. Mit .magazin-feed
davor, weil .card--ink weiter unten flex-direction/padding sonst
wieder überschreibt. */
.magazin-feed .magazin-post--cta {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
padding: var(--s-5) var(--s-6);
}
.magazin-post--cta .magazin-post-title {
margin-block: var(--s-2);
}
.magazin-post--cta p {
margin: 0;
}
.magazin-post--cta .btn {
flex-shrink: 0;
}
.magazin-cta-group {
display: flex;
justify-content: center;
margin-top: var(--s-5);
}
/* Punkte nur im Karussell. Nutzt die Optik der Buch-Punkte, aber einen
eigenen Umbruchpunkt (900px statt 640px). */
.books-carousel-dots.magazin-dots {
display: none;
}
@media (max-width: 900px) {
/* Chips brechen um statt zu wischen: zwei Karussells übereinander
(Chips und Artikel) wären verwirrend (16. September 2026). */
.magazin-more {
margin-top: var(--s-6);
}
.magazin-topics {
display: grid;
grid-template-columns: 1fr 1fr;
}
.magazin-topic {
justify-content: center;
min-height: 52px;
padding: var(--s-2) var(--s-3);
letter-spacing: 0.06em;
white-space: normal;
text-align: center;
line-height: 1.3;
}
.magazin-feed {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline-start: var(--pad-inline);
gap: var(--s-4);
margin-inline: calc(var(--pad-inline) * -1);
padding-inline: var(--pad-inline);
padding-bottom: var(--s-2);
scrollbar-width: none;
}
.magazin-feed::-webkit-scrollbar {
display: none;
}
/* Nächste Karte ragt sichtbar herein, damit klar ist: hier geht es weiter */
.magazin-post,
.magazin-post--featured,
.magazin-post:not(.magazin-post--featured):not(.magazin-post--cta) {
display: flex;
flex-direction: column;
flex: 0 0 min(82%, 380px);
scroll-snap-align: start;
padding: var(--s-4);
}
.magazin-post:not(.magazin-post--featured) .magazin-post-excerpt {
display: -webkit-box;
}
.magazin-post-media,
.magazin-post--featured .magazin-post-media {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)),
calc(100% - var(--cut-sm)) 100%, 0 100%);
}
.magazin-post--featured .magazin-post-title {
font-size: 1.2rem;
}
.magazin-feed .magazin-post--cta {
flex-direction: column;
justify-content: space-between;
align-items: stretch;
padding: var(--s-5);
}
.magazin-post--cta .btn {
width: 100%;
}
.books-carousel-dots.magazin-dots {
display: flex;
}
.magazin-cta-group {
margin-top: var(--s-4);
}
.magazin-cta-group .btn {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.card-magazine-thumb,
.magazin-post-img,
.magazin-post-more svg {
transition: none;
}
.magazin-post:hover .magazin-post-img,
.card-magazine-post:hover .card-magazine-thumb {
transform: none;
}
}
/* --------------------------------------------------------------------------
7h. Magazin-Übersicht (blog.html)
Klassennamen hier sind an main.js gebunden (Abschnitt 6, "Magazine/Blog
Live Filter & Search Engine") — dort bereits fertig verdrahtet, nur nie
mit Markup/CSS bedient. .card-magazine-post, .card-magazine-title,
.card-magazine-excerpt, .magazine-featured-card, .magazine-featured-title,
.magazine-featured-excerpt, #blogSearchInput, .blog-filter-chip (+ die
von main.js gesetzte Klasse .active, NICHT .is-active), #blogEmptyState
(+ .visible, NICHT .is-visible) sind deshalb wörtlich zu übernehmen.
-------------------------------------------------------------------------- */
.blog-hero-controls {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
align-items: center;
justify-content: space-between;
margin-bottom: var(--s-7);
}
.blog-search-wrap {
position: relative;
flex: 1 1 320px;
max-width: 420px;
}
.blog-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--text-muted);
pointer-events: none;
}
.blog-search-input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 2.5rem;
background-color: var(--surface);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--font-ui);
font-size: 0.9rem;
}
.blog-search-input::placeholder {
color: var(--text-muted);
}
.blog-filter-chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
}
.blog-filter-chip {
padding: 0.55rem 1.1rem;
background-color: transparent;
border: 1px solid var(--border);
color: var(--text-subtle);
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
}
.blog-filter-chip:hover {
border-color: var(--accent-line);
color: var(--accent-text);
}
/* Gold markiert im System das Anklickbare (16. September 2026) — vorher war
der aktive Chip die einzige vollflächig blaugrüne Fläche der Seite. */
.blog-filter-chip.active {
background-color: var(--accent);
border-color: var(--accent);
color: var(--text-on-accent);
}
/* Fase wie bei allen Bedienelementen der Seite */
.blog-filter-chip,
.blog-search-input {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)),
calc(100% - var(--cut-sm)) 100%, 0 100%);
}
.blog-search-input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Neutrale Pillen-Variante für die Kategorie-Angabe auf der Highlight-Karte
(dort steht .badge-tag-lake bereits für "Highlight des Monats"). */
.badge-tag {
display: inline-block;
padding: 5px 12px;
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-subtle);
background-color: var(--surface-hover);
}
.magazine-meta-reading {
display: inline-flex;
align-items: center;
/* "6 Min." darf nicht zwischen Zahl und Einheit umbrechen */
white-space: nowrap;
gap: 0.35rem;
font-size: 0.82rem;
color: var(--text-muted);
}
.magazine-meta-reading svg {
width: 14px;
height: 14px;
}
.magazine-featured-card,
.magazine-featured-card.card--bone {
display: grid;
grid-template-columns: minmax(280px, 46%) 1fr;
gap: var(--s-7);
align-items: center;
padding: var(--card-pad);
margin-bottom: var(--s-8);
}
.magazine-featured-img-wrap {
position: relative;
min-width: 0;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)),
calc(100% - var(--cut-lg)) 100%, 0 100%);
aspect-ratio: 4 / 3;
background: #070B0C;
}
.magazine-featured-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.magazine-featured-meta .badge-tag {
padding-inline: 0;
background-color: transparent;
color: var(--accent-text);
}
.magazine-featured-meta {
display: flex;
align-items: center;
gap: var(--s-3);
flex-wrap: wrap;
margin-bottom: var(--s-3);
}
.magazine-featured-title {
margin-bottom: var(--s-3);
}
.magazine-featured-excerpt {
color: var(--text-subtle);
line-height: 1.6;
}
/* Grid der 10 Kurzbeiträge */
.magazine-post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
}
/* .fase-rahmen wird in der HTML ergänzt (liefert Gold-Rahmen + Fase +
Flächenfüllung über ::before/::after) — hier nur noch Layout, kein
eigener background/border mehr (würde von .fase-rahmen ohnehin
überschrieben, siehe dessen background:transparent/border:0). */
/* Gleiche Bauart wie .magazin-post auf der Startseite (16. September 2026):
Innenabstand, Bildzoom beim Überfahren, ganze Karte klickbar. */
.card-magazine-post {
display: flex;
flex-direction: column;
position: relative;
gap: var(--s-4);
padding: var(--s-4);
}
.card-magazine-post:focus-within {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.card-magazine-post:has(.card-magazine-footer:focus:not(:focus-visible)) {
outline: none;
}
.card-magazine-thumb-wrap {
position: relative;
overflow: hidden;
width: 100%;
flex: 0 0 auto;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)),
calc(100% - var(--cut-sm)) 100%, 0 100%);
aspect-ratio: 3 / 2;
background: #070B0C;
}
.card-magazine-thumb {
width: 100%;
min-width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s var(--ease-out);
}
.card-magazine-post:hover .card-magazine-thumb {
transform: scale(1.04);
}
.card-magazine-content {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
}
/* Kategorie auf den Karten wie im Magazin-Teaser der Startseite: goldene
Zeile statt blauer Pille. Blaugrün bleibt für Lesezeit, "Auf einen Blick",
Zitatstrich und das Monats-Highlight. */
.card-magazine-meta-row .badge-tag-lake,
.article-category-badge {
padding-inline: 0;
background-color: transparent;
border: 0;
color: var(--accent-text);
}
.card-magazine-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
margin-bottom: var(--s-3);
}
.card-magazine-title {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 500;
line-height: 1.25;
color: var(--text);
margin-bottom: var(--s-2);
text-wrap: balance;
}
.card-magazine-excerpt {
font-size: var(--fs-small);
line-height: 1.6;
color: var(--text-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-magazine-footer {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: var(--s-4);
font-size: 0.85rem;
font-weight: 600;
color: var(--accent-text);
text-decoration: none;
}
.card-magazine-footer::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.card-magazine-footer svg {
width: 14px;
height: 14px;
transition: transform var(--t-fast) var(--ease-out);
}
.card-magazine-post:hover .card-magazine-footer svg {
transform: translateX(3px);
}
#blogEmptyState {
display: none;
text-align: center;
padding: var(--s-8) 0;
color: var(--text-muted);
}
#blogEmptyState.visible {
display: block;
}
#blogResetBtn {
margin-top: var(--s-4);
}
/* Band statt mittig gesetztem Block (16. September 2026): gleiche Form wie
das Beratungsband im Magazin-Teaser der Startseite. Die .card--ink-Regel
weiter unten setzt flex-direction:column, deshalb hier zwei Klassen. */
.magazin-cta-box,
.magazin-cta-box.card--ink,
.magazin-cta-box.card--bone,
.magazin-cta-box.card--lake,
.magazin-cta-box.card--merlot,
.magazin-cta-box.card--pine,
.magazin-cta-box.card--midnight {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
text-align: left;
padding: var(--s-5) var(--s-6);
margin-top: var(--s-8);
}
.magazin-cta-text {
flex: 1 1 420px;
min-width: 0;
}
.magazin-cta-box h2 {
margin: var(--s-2) 0 var(--s-3);
font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem);
}
.magazin-cta-box p {
margin: 0;
max-width: 60ch;
}
/* Die beiden Buttons stehen rechts untereinander, sonst quetschen die
langen Beschriftungen den Text zusammen. */
.magazin-cta-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--s-3);
flex-shrink: 0;
}
.magazin-cta-actions .btn {
justify-content: space-between;
}
@media (max-width: 860px) {
.magazin-cta-box,
.magazin-cta-box.card--ink,
.magazin-cta-box.card--bone,
.magazin-cta-box.card--lake,
.magazin-cta-box.card--merlot,
.magazin-cta-box.card--pine,
.magazin-cta-box.card--midnight {
flex-direction: column;
align-items: stretch;
/* ohne dies zieht space-between aus der Desktop-Reihe die Buttons
an den unteren Rand und reißt eine Lücke auf */
justify-content: flex-start;
padding: var(--s-5);
}
/* In der Spalte wirkt die Flex-Basis als Mindesthöhe und riss eine
Lücke zwischen Text und Buttons auf */
.magazin-cta-text {
flex: 0 0 auto;
}
.magazin-cta-actions {
margin-top: var(--s-5);
}
.magazin-cta-actions .btn {
width: 100%;
}
}
@media (max-width: 900px) {
/* Gleiche Spezifität wie die Zwei-Spalten-Regel oben, sonst gewinnt die
und die Karte läuft seitlich aus dem Bild (16. September 2026). */
.magazine-featured-card,
.magazine-featured-card.card--bone {
grid-template-columns: minmax(0, 1fr);
}
.magazine-post-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.magazine-post-grid {
grid-template-columns: 1fr;
}
.blog-hero-controls {
flex-direction: column;
align-items: stretch;
}
/* Vorher brauchte jeder Chip eine eigene Zeile — der Nutzer scrollte lange,
bevor der erste Beitrag kam (16. September 2026). */
.blog-filter-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-2);
}
.blog-filter-chip {
padding: 0.5rem 0.7rem;
font-size: 0.75rem;
line-height: 1.25;
text-align: center;
}
.blog-search-input {
font-size: 0.82rem;
padding-right: 0.75rem;
}
.blog-search-wrap {
/* flex:1 1 320px setzt in Zeilen-Richtung die Breite, im column-Layout
hier aber die HÖHE (flex-basis folgt der Hauptachse) — ohne Reset
wuchs das Suchfeld auf 320px Höhe statt Breite. */
flex: none;
max-width: none;
}
}
/* --------------------------------------------------------------------------
8. Bento Grid System & Cards
-------------------------------------------------------------------------- */
.bento-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gutter);
}
@media (min-width: 768px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(12, 1fr);
}
}
/* Spans */
@media (min-width: 1024px) {
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
}
/* Three Card Fills */
/* 1. Bone Card: Cremeweiß, Standard, Mehrheit */
.card--bone {
background-color: var(--bone-100);
color: var(--text-on-accent);
padding: var(--card-pad);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card--bone h3, .card--bone h2, .card--bone h4 {
color: var(--text-on-accent);
}
.card--bone p {
color: var(--text-on-bone);
}
.card--bone .eyebrow {
color: var(--accent-pressed);
}
/* 2. Gold Card: Signal, Max 1 pro Reihe */
.card--gold {
background-color: var(--accent);
color: var(--text-on-accent);
padding: var(--card-pad);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card--gold h3, .card--gold h2, .card--gold h4 {
color: var(--text-on-accent);
}
.card--gold p {
color: rgba(3, 7, 17, 0.76);
}
.card--gold .eyebrow {
color: var(--text-on-accent);
}
/* See statt Gold: für Eyebrows auf fachlichem/institutionellem Inhalt
(Schulen, Zertifizierung) statt auf primären Handlungen. Braucht die
doppelte Klasse, um Kartenvarianten wie .card--bone .eyebrow zu schlagen. */
.eyebrow.eyebrow--info {
color: var(--info-text);
}
/* 3. Ink Card: die dritte feste Füllung, immer dunkel (siehe tokens.css,
Abschnitt 3 — .card--ink ist dort als Höhlen-Kontext gelistet). */
.card--ink {
background-color: var(--surface);
color: var(--text);
padding: var(--card-pad);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card--ink h3, .card--ink h2, .card--ink h4 {
color: var(--text);
}
.card--ink p {
color: var(--text-muted);
}
/* Empty / Quote Statement Card for Bento Asymmetry */
.card--statement {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: var(--card-pad);
}
.statement-text {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.2vw, 2.25rem);
line-height: 1.15;
color: var(--text-muted);
}
.statement-author {
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent-text);
margin-top: var(--s-4);
}
/* Card Interactive Link Top/Bottom Row */
.card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-3);
margin-bottom: var(--s-4);
}
.card-circle-link {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform var(--t-base) var(--ease-out),
background-color var(--t-base) var(--ease-out);
}
.card--bone .card-circle-link {
background: var(--bg);
color: var(--text);
}
.card--gold .card-circle-link {
background: var(--bg);
color: var(--accent-text);
}
.card--ink .card-circle-link {
background: var(--border);
color: var(--accent-text);
}
a.card--bone:hover .card-circle-link,
a.card--gold:hover .card-circle-link,
a.card--ink:hover .card-circle-link {
transform: rotate(45deg);
}
a.card--ink:hover .card-circle-link {
background: var(--accent);
color: var(--text-on-accent);
}
/* Image Media within Cards with warm blend filter */
.media-wrap {
position: relative;
overflow: hidden;
margin-bottom: var(--s-4);
}
.media-wrap img {
width: 100%;
height: auto;
object-fit: cover;
filter: var(--media-filter);
}
.media-wrap::after {
content: "";
position: absolute;
inset: 0;
background: var(--media-veil);
mix-blend-mode: var(--media-veil-blend);
pointer-events: none;
}
/* List Items inside Cards */
.card-list {
margin-top: var(--s-4);
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.card-list li {
display: flex;
align-items: center;
gap: var(--s-2);
font-size: var(--fs-small);
}
.card-list li svg {
width: 16px;
height: 16px;
color: var(--accent-text);
flex-shrink: 0;
}
/* --------------------------------------------------------------------------
9. FAQ Section Accordion
-------------------------------------------------------------------------- */
.faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
border-bottom: 1px solid var(--border);
padding-block: var(--s-4);
}
.faq-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--text);
padding-block: var(--s-2);
transition: color var(--t-fast) var(--ease-out);
}
.faq-trigger:hover {
color: var(--accent-text);
}
.faq-icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
color: var(--accent-text);
flex-shrink: 0;
transition: transform var(--t-base) var(--ease-out);
}
.faq-item[open] .faq-icon {
transform: rotate(45deg);
}
.faq-content {
padding-block: var(--s-3) var(--s-2);
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.6;
}
/* --------------------------------------------------------------------------
10. Booking Modal Dialog
-------------------------------------------------------------------------- */
dialog#booking-modal {
margin: auto;
padding: 0;
background: transparent;
border: 0;
max-width: 580px;
width: 92%;
box-shadow: var(--shadow-overlay);
}
dialog#booking-modal::backdrop {
background: rgba(5, 5, 6, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.modal-inner {
padding: var(--s-7) var(--s-6);
background: var(--surface);
color: var(--text);
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--s-5);
}
.modal-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.modal-close:hover {
border-color: var(--accent-line);
color: var(--accent-text);
}
/* Senden-Zustand und Bestätigungsansicht im Anfrage-Dialog (main.js:
setSending / showSuccess). Die Bestätigung ersetzt das Formular und wird
nur per Button geschlossen. */
#booking-form[hidden] { display: none; }
#booking-form.is-sending .form-group {
opacity: 0.45;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease-out);
}
.btn-spinner {
width: 16px;
height: 16px;
margin-right: 10px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
flex: none;
animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.booking-success {
text-align: center;
padding: var(--s-4) 0 var(--s-2);
outline: none;
animation: booking-success-in 0.45s var(--ease-out) both;
}
.booking-success-mark {
width: 72px;
height: 72px;
margin: 0 auto var(--s-5);
border: 1px solid var(--gold-500);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-500);
background: rgba(198, 169, 107, 0.12);
}
.booking-success-mark svg { width: 34px; height: 34px; }
.booking-success-mark path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: booking-check 0.5s 0.2s var(--ease-out) forwards;
}
.booking-success-title {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--text);
margin: 0 0 var(--s-3);
}
.booking-success-text {
color: var(--text-muted);
margin: 0 auto var(--s-5);
max-width: 38ch;
}
.booking-success-sum {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--s-2) var(--s-4);
text-align: left;
margin: 0 0 var(--s-6);
padding: var(--s-4);
background: var(--surface-hover);
border: 1px solid var(--border);
font-size: 0.92rem;
}
.booking-success-sum dt {
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-muted);
align-self: center;
}
.booking-success-sum dd {
margin: 0;
color: var(--text);
overflow-wrap: break-word;
hyphens: auto;
}
/* Schmal: Beschriftung über dem Wert, damit lange Themen nicht mitten im Wort brechen. */
@media (max-width: 480px) {
.booking-success-sum { grid-template-columns: 1fr; gap: 0; }
.booking-success-sum dt { margin-top: var(--s-3); }
.booking-success-sum dt:first-child { margin-top: 0; }
}
@keyframes booking-success-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@keyframes booking-check { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
.booking-success, .booking-success-mark path, .btn-spinner { animation: none; }
.booking-success-mark path { stroke-dashoffset: 0; }
}
.form-group {
margin-bottom: var(--s-4);
}
.form-label {
display: block;
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--s-2);
}
.form-input, .form-textarea, .form-select {
width: 100%;
padding: 12px 16px;
background: var(--surface-hover);
border: 1px solid var(--border);
color: var(--text);
border-radius: 0;
font-size: var(--fs-small);
transition: border-color var(--t-fast) var(--ease-out);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
border-color: var(--accent-line);
outline: none;
}
/* --------------------------------------------------------------------------
11. Footer
-------------------------------------------------------------------------- */
.footer {
border-top: 1px solid var(--border);
padding-block: var(--s-8) var(--s-6);
margin-top: var(--section-y);
background: var(--bg);
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
margin-bottom: var(--s-7);
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: 2fr 1fr 1fr;
}
}
.footer-brand-logo,
.footer-brand img {
display: block;
height: clamp(32px, 3.8vw, 38px);
width: auto;
margin-left: calc(-2 / 38 * clamp(32px, 3.8vw, 38px));
}
.footer-brand p {
color: var(--text-subtle);
font-size: var(--fs-small);
margin-top: var(--s-3);
max-width: 440px;
line-height: 1.6;
}
.footer-social {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: var(--s-5);
}
.footer-social-link {
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
color: var(--text-muted);
text-decoration: none;
transition: all var(--t-fast) var(--ease-out);
position: relative;
}
.footer-social-link svg {
width: 17px;
height: 17px;
transition: transform var(--t-fast) var(--ease-out);
}
.footer-social-link:hover {
color: var(--accent-text);
border-color: var(--accent-line);
background: rgba(198, 169, 107, 0.12);
box-shadow: 0 0 16px rgba(198, 169, 107, 0.25);
transform: translateY(-2px);
}
.footer-social-link:hover svg {
transform: scale(1.08);
}
.footer-col h4 {
font-family: var(--font-ui);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: var(--s-3);
}
.footer-links {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.footer-link {
font-size: var(--fs-small);
color: var(--text-muted);
transition: color var(--t-fast) var(--ease-out);
}
.footer-link:hover {
color: var(--accent-text);
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: var(--s-5);
border-top: 1px solid var(--border);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-subtle);
gap: var(--s-2) var(--s-5);
}
.footer-bottom > span {
white-space: nowrap;
}
/* Handy: eine Zeile wie auf Desktop, links und rechts bündig
(14. September 2026). In Versalien mit Sperrung bräuchte die Zeile 470px
bei 327px Platz — deshalb hier im Stil der Footer-Links: normale
Schreibung, keine Sperrung, 14px. Die Schrift schrumpft nur auf sehr
schmalen Geräten: Beide Angaben zusammen sind gemessen 24,1 Schriftgrößen
breit (englische Fassung, die längere), 16px Mindestabstand dazwischen. */
@media (max-width: 767px) {
.footer-bottom {
flex-wrap: nowrap;
gap: 16px;
text-transform: none;
letter-spacing: normal;
font-size: min(var(--fs-small), calc((100vw - (var(--pad-inline) * 2) - 16px) / 24.4));
}
}
/* --------------------------------------------------------------------------
12. Cookie Consent Badge, Banner & Settings Modal (Design Tokens v2.0)
-------------------------------------------------------------------------- */
/* Layer 1: Floating Bottom Banner */
.dgm-cookie-banner {
position: fixed;
bottom: var(--s-5);
left: 50%;
transform: translate(-50%, 150%);
transition: transform 0.4s var(--ease-out), opacity 0.3s ease;
opacity: 0;
pointer-events: none;
z-index: 9999;
width: calc(100% - (var(--pad-inline) * 2));
max-width: 960px;
}
.dgm-cookie-banner.visible {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
.dgm-cookie-banner-inner {
background: rgba(14, 13, 12, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
box-shadow: var(--shadow-overlay);
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.dgm-cookie-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent-text);
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
margin-bottom: var(--s-1);
}
.dgm-cookie-eyebrow svg {
color: var(--accent-text);
}
.dgm-cookie-title {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 400;
color: var(--text);
margin-bottom: var(--s-2);
line-height: var(--lh-heading);
}
.dgm-cookie-desc {
font-family: var(--font-ui);
font-size: var(--fs-small);
color: var(--text-muted);
line-height: var(--lh-body);
margin: 0;
max-width: none;
}
.cookie-inline-link {
color: var(--accent-text);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
transition: color var(--t-fast) var(--ease-out);
}
.cookie-inline-link:hover {
color: var(--text);
}
.dgm-cookie-banner-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
padding-top: var(--s-2);
}
/* Cookie Button Variants */
.dgm-cookie-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: var(--fs-label);
letter-spacing: var(--tracking-btn);
text-transform: uppercase;
font-weight: 500;
padding: 10px 18px;
cursor: pointer;
transition: all var(--t-fast) var(--ease-out);
line-height: 1;
}
.dgm-cookie-btn-primary {
background: var(--accent);
color: var(--text-on-accent);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
}
.dgm-cookie-btn-primary:hover {
background: var(--accent-pressed);
}
.dgm-cookie-btn-tertiary {
background: transparent;
color: var(--text-subtle);
border: 1px solid transparent;
}
.dgm-cookie-btn-tertiary:hover {
color: var(--text);
}
/* Layer 2: Settings Modal */
body.dgm-cookie-modal-open {
overflow: hidden;
}
.dgm-cookie-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(5, 5, 6, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
padding: var(--s-4);
}
.dgm-cookie-modal-backdrop.visible {
opacity: 1;
pointer-events: auto;
}
.dgm-cookie-modal-card {
background: var(--surface);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
max-width: 720px;
width: 100%;
max-height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--shadow-overlay);
border: 1px solid var(--border);
transform: translateY(20px) scale(0.98);
transition: transform 0.3s var(--ease-out);
color: var(--text);
}
.dgm-cookie-modal-backdrop.visible .dgm-cookie-modal-card {
transform: translateY(0) scale(1);
}
.dgm-cookie-modal-header {
padding: 24px 28px 18px 28px;
display: flex;
align-items: flex-start;
justify-content: space-between;
border-bottom: 1px solid var(--border);
background: var(--surface-hover);
}
.dgm-cookie-modal-title {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 400;
color: var(--text);
margin-bottom: var(--s-1);
}
.dgm-cookie-modal-subtitle {
font-family: var(--font-ui);
font-size: var(--fs-small);
color: var(--text-muted);
margin: 0;
line-height: 1.45;
}
.dgm-cookie-modal-close {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
cursor: pointer;
transition: all var(--t-fast) var(--ease-out);
flex-shrink: 0;
}
.dgm-cookie-modal-close:hover {
border-color: var(--accent-line);
color: var(--accent-text);
}
.dgm-cookie-modal-body {
padding: 20px 28px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--s-4);
}
/* Category Cards in Modal */
.dgm-cookie-cat-card {
background: var(--surface-hover);
border: 1px solid var(--border);
padding: 16px 20px;
transition: border-color var(--t-fast) var(--ease-out);
}
.dgm-cookie-cat-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
margin-bottom: var(--s-2);
}
.dgm-cookie-cat-info {
display: flex;
align-items: center;
gap: var(--s-3);
flex-wrap: wrap;
}
.dgm-cookie-cat-title {
font-family: var(--font-ui);
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
margin: 0;
}
.dgm-cookie-badge-always {
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
background: rgba(198, 169, 107, 0.15);
color: var(--accent-text);
padding: 2px 8px;
}
/* Schalter für die Kategorie Statistik (Google Analytics, 15.09.2026). */
.dgm-cookie-switch {
position: relative;
flex-shrink: 0;
display: inline-flex;
cursor: pointer;
}
.dgm-cookie-switch input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.dgm-cookie-switch-track {
position: relative;
width: 44px;
height: 24px;
border-radius: 12px;
background: var(--border);
transition: background var(--t-fast) var(--ease-out);
}
.dgm-cookie-switch-track::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--surface);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform var(--t-fast) var(--ease-out);
}
.dgm-cookie-switch input:checked + .dgm-cookie-switch-track {
background: var(--accent);
}
.dgm-cookie-switch input:checked + .dgm-cookie-switch-track::after {
transform: translateX(20px);
}
.dgm-cookie-switch input:focus-visible + .dgm-cookie-switch-track {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.dgm-cookie-cat-desc {
font-family: var(--font-ui);
font-size: var(--fs-small);
color: var(--text-muted);
line-height: 1.5;
margin: 0 0 var(--s-2) 0;
}
.dgm-cookie-details {
font-family: var(--font-ui);
font-size: 0.78rem;
color: var(--accent-text);
margin-top: var(--s-2);
}
.dgm-cookie-details summary {
cursor: pointer;
font-weight: 500;
user-select: none;
}
.dgm-cookie-details-table {
margin-top: var(--s-2);
padding: 10px 14px;
background: var(--bg);
border: 1px solid var(--border);
font-size: 0.76rem;
color: var(--text-muted);
line-height: 1.4;
display: flex;
flex-direction: column;
gap: 6px;
}
/* iOS Toggle Switch */
.dgm-cookie-modal-footer {
padding: 18px 28px 24px 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--s-3);
border-top: 1px solid var(--border);
background: var(--surface-hover);
}
/* ==========================================================================
13. FASE — Utility (Must be at the very bottom per Design Guide v2.0)
========================================================================== */
/* Flächen ohne Rahmen: ein Clip genügt. */
.fase {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)),
calc(100% - var(--cut-lg)) 100%, 0 100%);
}
/* Flächen mit Rahmen: zwei gestapelte Ebenen erzeugen die 1px-Linie mit
der 0,586-px-Geometriekorrektur.
Die äußere Ebene nutzt einen subtilen Gradienten, der die diagonale 45°-Fase
mit feinem Champagner/Gold-Schimmer präzise hervorhebt. */
.fase-rahmen {
position: relative;
isolation: isolate;
background: transparent;
border: 0;
}
.fase-rahmen::before,
.fase-rahmen::after {
content: "";
position: absolute;
}
.fase-rahmen::before {
inset: 0;
z-index: -2;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(226, 203, 150, 0.16) 70%, var(--accent) 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)),
calc(100% - var(--cut-lg)) 100%, 0 100%);
transition: background var(--t-base) var(--ease-out), filter var(--t-base) var(--ease-out);
}
.fase-rahmen::after {
--cut-in: calc(var(--cut-lg) - var(--cut-inset));
inset: 1px;
z-index: -1;
background: var(--surface);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-in)),
calc(100% - var(--cut-in)) 100%, 0 100%);
transition: background-color var(--t-base) var(--ease-out);
}
/* Kein drop-shadow hier: ein Weichzeichner-Filter auf einer diagonal
geschnittenen, dünnen Rahmenform rundet sich an der Schnittecke zu einem
sichtbaren kreisförmigen Klecks — der Farbwechsel allein reicht als
Hover-Feedback. */
a.fase-rahmen:hover::before,
.fase-rahmen:hover::before {
background: linear-gradient(135deg, rgba(226, 203, 150, 0.3) 0%, var(--accent-strong) 70%, var(--accent) 100%);
}
a.fase-rahmen:hover::after,
.fase-rahmen:hover::after {
background: var(--surface-hover);
}
/* Buttons tragen dieselbe Fase im kleinen Maß (11px) */
.fase-sm {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)),
calc(100% - var(--cut-sm)) 100%, 0 100%);
}
/* ==========================================================================
13. Fullscreen Glassmorphism Navigation Menu (Nomada Luxury Aesthetic)
========================================================================== */
body.nav-open {
overflow: hidden !important;
touch-action: none;
}
body.nav-open .site-header {
opacity: 0 !important;
pointer-events: none !important;
}
.luxury-nav-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.45s;
}
.luxury-nav-overlay.is-active {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.luxury-nav-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(circle at 85% 15%, rgba(198, 169, 107, 0.09) 0%, transparent 60%),
radial-gradient(circle at 15% 85%, rgba(198, 169, 107, 0.05) 0%, transparent 50%),
rgba(5, 5, 6, 0.94);
backdrop-filter: blur(36px) saturate(180%);
-webkit-backdrop-filter: blur(36px) saturate(180%);
}
.luxury-nav-container {
position: relative;
width: 100%;
max-width: var(--container);
height: 100%;
margin-inline: auto;
padding: clamp(1.2rem, 3.5vh, 2.5rem) var(--pad-inline);
display: flex;
flex-direction: column;
z-index: 2;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.luxury-nav-topbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding-bottom: var(--s-5);
border-bottom: 1px solid rgba(226, 203, 150, 0.15);
margin-bottom: clamp(1.5rem, 3.5vh, 3rem);
}
.luxury-nav-brand {
display: flex;
align-items: center;
line-height: 1;
}
.luxury-nav-brand img {
height: clamp(30px, 3.8vw, 38px);
width: auto;
display: block;
filter: drop-shadow(0 2px 10px rgba(5, 5, 6, 0.6));
}
.luxury-nav-close {
display: inline-flex;
align-items: center;
gap: var(--s-3);
padding: 8px 12px 8px 16px;
font-size: var(--fs-label);
letter-spacing: var(--tracking-btn);
cursor: pointer;
border-color: rgba(226, 203, 150, 0.4);
}
.luxury-nav-close .btn-circle {
width: 24px;
height: 24px;
}
.luxury-nav-close .btn-circle svg {
width: 12px;
height: 12px;
}
.luxury-nav-grid {
/* Eine Spalte (14. September 2026): Die Kontakt-Box rechts ist entfallen.
Die Liste ist in der Breite begrenzt, damit die Zusatzzeilen rechts auf
großen Bildschirmen nicht bis an den Rand auseinanderlaufen. flex: 1
schiebt die Fußzeile an den unteren Rand. */
flex: 1 0 auto;
width: 100%;
max-width: 56rem;
box-sizing: border-box;
}
.luxury-nav-links {
display: flex;
flex-direction: column;
gap: clamp(0.6rem, 1.6vh, 1.25rem);
min-width: 0;
}
.luxury-nav-link {
display: flex;
align-items: center;
gap: clamp(14px, 1.6vw, 22px);
text-decoration: none;
padding: 8px 12px;
margin-left: -12px;
border-radius: 4px;
position: relative;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.3s ease;
transform: translateY(16px);
opacity: 0;
}
.luxury-nav-overlay.is-active .luxury-nav-link {
transform: translateY(0);
opacity: 1;
}
/* Stagger animation on open */
.luxury-nav-overlay.is-active .luxury-nav-link:nth-child(1) { transition-delay: 0.05s; }
.luxury-nav-overlay.is-active .luxury-nav-link:nth-child(2) { transition-delay: 0.09s; }
.luxury-nav-overlay.is-active .luxury-nav-link:nth-child(3) { transition-delay: 0.13s; }
.luxury-nav-overlay.is-active .luxury-nav-link:nth-child(4) { transition-delay: 0.17s; }
.luxury-nav-overlay.is-active .luxury-nav-link:nth-child(5) { transition-delay: 0.21s; }
.luxury-nav-overlay.is-active .luxury-nav-link:nth-child(6) { transition-delay: 0.25s; }
.luxury-nav-overlay.is-active .luxury-nav-link:nth-child(7) { transition-delay: 0.29s; }
.luxury-nav-overlay.is-active .luxury-nav-link:nth-child(8) { transition-delay: 0.33s; }
.luxury-nav-overlay.is-active .luxury-nav-link:nth-child(9) { transition-delay: 0.37s; }
.nav-link-num {
font-family: var(--font-ui);
font-size: clamp(0.75rem, 1vw, 0.9rem);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--accent-text);
opacity: 0.8;
width: 24px;
flex-shrink: 0;
}
.nav-link-title {
font-family: var(--font-display);
font-size: clamp(1.35rem, 2.1vw, 2.15rem);
line-height: 1.15;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
white-space: nowrap;
color: var(--text);
transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.nav-link-tag {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-subtle);
margin-left: auto;
white-space: nowrap;
flex-shrink: 0;
opacity: 0.5;
transform: translateX(-4px);
transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.luxury-nav-link:hover .nav-link-title {
color: var(--accent-text);
transform: translateX(6px);
}
.luxury-nav-link:hover .nav-link-num {
color: var(--accent-text);
opacity: 1;
}
.luxury-nav-link:hover .nav-link-tag {
opacity: 1;
color: var(--accent-text);
transform: translateX(0);
}
.luxury-nav-footer-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
margin-top: clamp(1.5rem, 4vh, 3rem);
padding-top: var(--s-5);
border-top: 1px solid rgba(226, 203, 150, 0.15); /* wie unter der Topbar */
opacity: 0;
transition: opacity 0.4s ease 0.42s;
}
.luxury-nav-overlay.is-active .luxury-nav-footer-links {
opacity: 1;
}
.nav-sublink {
background: transparent;
border: none;
padding: 0;
font-family: var(--font-ui);
font-size: var(--fs-small);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-subtle);
text-decoration: none;
cursor: pointer;
transition: color var(--t-fast) var(--ease-out);
}
.nav-sublink:hover {
color: var(--accent-text);
}
.nav-sublink-divider {
color: var(--border);
}
@media (max-width: 960px) {
.luxury-nav-container {
padding: clamp(1rem, 2.5vh, 1.5rem) var(--pad-inline);
}
.luxury-nav-links {
/* Der Platz der entfallenen Box geht in den Zeilenabstand: Die Liste
verteilt sich über die Höhe, statt oben gedrängt zu stehen. */
gap: clamp(0.35rem, 2.4vh, 1.5rem);
}
.luxury-nav-link {
padding: 6px 6px;
margin-left: -6px;
gap: 12px;
}
.nav-link-num {
font-size: 0.75rem;
width: 20px;
flex-shrink: 0;
}
.nav-link-title {
/* Nach der Breite gerechnet: Der längste Punkt („AUSGEWOGENE ERNÄHRUNG“)
ist gemessen 16,0 Schriftgrößen breit und muss in eine Zeile passen.
36px sind Nummer und Abstand davor (gemessen: Titel beginnt 56px vom
Rand bei 24px Seitenabstand), 16,3 lässt etwas Luft. */
font-size: min(1.75rem, calc((100vw - 2 * var(--pad-inline) - 36px) / 16.3));
white-space: nowrap;
line-height: 1.2;
}
.nav-link-tag {
display: none;
}
}
/* ==========================================================================
14. Accessibility & Motion Preferences
========================================================================== */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
16. Legal & Impressum Page (Nomada Luxury Dark Aesthetic)
========================================================================== */
.legal-main {
padding-top: clamp(120px, 15vh, 160px);
padding-bottom: clamp(60px, 10vh, 100px);
position: relative;
z-index: 10;
}
.legal-back-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
@media (max-width: 640px) {
.legal-back-btn {
display: none !important;
}
}
.legal-page-header {
margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.legal-page-title {
font-family: var(--font-display);
font-size: clamp(2.6rem, 6vw, 4.2rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--text);
margin-top: 0.75rem;
margin-bottom: 1.25rem;
}
/* „Datenschutzerklärung“ ist in Versalien ein einziges, sehr langes Wort
(14,4 em breit) und lief unter ~650px über den Rand. Die Schriftgröße
richtet sich deshalb zusätzlich nach der Bildschirmbreite. */
.legal-page-title--lang {
font-size: min(clamp(2.6rem, 6vw, 4.2rem), calc((100vw - 3.5rem) / 14.8));
}
.legal-page-lead {
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
line-height: 1.65;
color: var(--text-muted);
max-width: 820px;
margin: 0;
}
.legal-card {
/* v3: siehe .faq-content — dieselbe Ursache. Kein box-shadow mehr:
widersprach "Flächenkontrast statt Schatten" (tokens.css) und wirkte
auf hellem Grund als schwerer, dunkler Schlagschatten. */
background: var(--surface);
border: 1px solid rgba(198, 169, 107, 0.2);
border-radius: var(--r-lg);
padding: clamp(1.75rem, 3.5vw, 2.75rem);
margin-bottom: 2rem;
position: relative;
/* Schlicht (14. September 2026): kein Blur, kein Hover, keine Boxen in
der Box. Die Karte liegt auf ruhigem Grund, der Blur hatte nichts zu
verwischen und kostete nur Rechenzeit. */
}
.legal-section-title {
font-family: var(--font-display);
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
font-weight: 600;
color: var(--accent-text);
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1.75rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(198, 169, 107, 0.16);
}
.legal-section-title svg {
color: var(--accent-text);
flex-shrink: 0;
}
.legal-text-block {
font-size: 0.95rem;
line-height: 1.72;
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.legal-text-block:last-child {
margin-bottom: 0;
}
.legal-text-block strong {
color: var(--text);
}
.legal-text-block a {
color: var(--accent-text);
text-decoration: underline;
text-underline-offset: 3px;
word-break: break-all;
}
.legal-text-block a:hover {
color: var(--accent-text);
}
/* Während main.js auf Englisch übersetzt, bleibt die Seite kurz verborgen
(Klasse setzt das Inline-Skript im , main.js entfernt sie). */
html.i18n-pending body {
visibility: hidden;
}
/* Zweisprachige Rechtstexte (impressum.html, datenschutz.html): Beide
Fassungen stehen im HTML, sichtbar ist die zur Sprache des Dokuments.
html[lang] setzt main.js beim Umschalten, ein kleines Skript im
schon vor dem ersten Zeichnen. Die Übersetzungen stehen bewusst NICHT in
i18n.js — das wird auf jeder Seite geladen. */
html[lang="en"] [data-lang-block="de"],
html:not([lang="en"]) [data-lang-block="en"] {
display: none;
}
.legal-lang-note {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 1.5rem;
}
/* Datenschutzerklärung (datenschutz.html): Fließtext aus dem Generator mit
Absätzen, Listen und Links — dieselbe Typografie wie .legal-text-block. */
.legal-card[id],
#workbook {
scroll-margin-top: 110px; /* Sprungziele nicht unter der festen Kopfzeile */
}
.legal-prose {
font-size: 0.95rem;
line-height: 1.72;
color: var(--text-muted);
}
.legal-prose p,
.legal-prose ul {
margin: 0 0 1.1rem;
}
.legal-prose > :last-child {
margin-bottom: 0;
}
.legal-prose ul {
list-style: disc;
padding-left: 1.25rem;
}
.legal-prose li {
margin-bottom: 0.5rem;
}
.legal-prose li::marker {
color: var(--accent-text);
}
.legal-prose strong {
color: var(--text);
}
.legal-prose a {
color: var(--accent-text);
text-decoration: underline;
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
.legal-prose .legal-toc {
columns: 2 280px;
column-gap: 2rem;
}
.legal-prose .legal-toc li {
break-inside: avoid;
}
.legal-social-list {
/* Raster statt frei umbrechender Chips (14. September 2026): Auf dem
Handy standen die sechs Chips vorher in unterschiedlichen Breiten
treppenartig untereinander. Jetzt gleich breite Spalten — zwei auf dem
Handy, drei ab Tablet-Breite. */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.25rem), 1fr));
gap: 0.6rem;
margin-top: 1.25rem;
}
.legal-social-chip {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
padding: 0.6rem 0.8rem;
background: var(--surface-hover);
border: 1px solid rgba(198, 169, 107, 0.2);
border-radius: var(--r-md);
color: var(--text);
font-size: 0.82rem;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
.legal-social-chip:hover {
border-color: var(--accent-line);
color: var(--accent-text);
}
.legal-social-chip svg {
width: 16px;
height: 16px;
color: var(--accent-text);
flex-shrink: 0;
}
/* ==========================================================================
17. Magazin-Übersicht — Seiten-Wrapper (blog.html)
Wie .legal-main bei impressum.html: eigene Unterseite ohne Hero-Bild,
braucht nur Abstand zur fixen Kopfzeile plus Breitenbegrenzung.
========================================================================== */
.magazin-main h1.section-title {
text-transform: none;
}
.magazin-main {
padding-top: clamp(120px, 15vh, 160px);
padding-bottom: clamp(60px, 10vh, 100px);
}
/* ==========================================================================
18. Magazin-Artikel (article-*.html)
Ein Template für alle 10 Artikel: schmale Lesespalte (article-body), mit
Bildbreite, Zitat und Feature-Box auf volle Spaltenbreite. Nutzt
.article-container/.article-breadcrumbs (bereits geteilt) für den
Seitenrahmen wie expertise.html.
========================================================================== */
/* Lesespalte der Artikel (16. September 2026): Der Fließtext lag mit der
globalen Grenze von 62ch bei nur 56 % der 1280px-Spalte, während Bild,
Takeaways und Zitat die volle Breite nutzten — das wirkte wie ein Fehler.
Jetzt: Spalte etwas schmaler, Text deutlich breiter, beides fast bündig. */
.article-page .container {
max-width: 1040px;
}
.article-page p {
max-width: 80ch;
}
/* Kein eigenes .article-body-container mehr: Artikelseiten nutzen jetzt
einfach .container (var(--container), 1280px) wie die Hauptseite auch —
1080px (der vorherige Wert, an expertise.html angelehnt) war selbst schon
schmaler als der Inhaltsbereich der Hauptseite. Fließtext (p) bleibt
trotzdem gut lesbar, weil die globale Regel "p { max-width: var(--measure) }"
(62ch) ihn unabhängig von der Spaltenbreite begrenzt — Bild, Takeaways-
und Feature-Box nutzen dagegen die volle Spaltenbreite. */
.article-category-badge {
margin-bottom: var(--s-3);
}
.article-title {
/* Im Magazin gemischte Schreibweise wie in allen Sektionen der Startseite;
die globale h1-Regel setzt sonst Großbuchstaben (16. September 2026). */
text-transform: none;
font-family: var(--font-display);
font-size: clamp(1.9rem, 4vw, 2.75rem);
line-height: 1.2;
font-weight: 700;
margin-bottom: var(--s-4);
}
.article-lead {
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: var(--s-5);
}
.article-meta-row {
display: flex;
align-items: center;
gap: var(--s-3);
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--text-subtle);
padding-bottom: var(--s-6);
margin-bottom: var(--s-6);
border-bottom: 1px solid var(--border);
}
.article-meta-row strong {
color: var(--text);
font-weight: 600;
}
.article-hero-img-wrap {
position: relative;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)),
calc(100% - var(--cut-lg)) 100%, 0 100%);
aspect-ratio: 16 / 9;
background: #070B0C;
margin-bottom: var(--s-7);
}
.article-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.article-takeaways {
padding: var(--card-pad);
margin-bottom: var(--s-7);
}
.article-takeaways-title {
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--info-text);
margin-bottom: var(--s-4);
}
.article-takeaways ul {
display: flex;
flex-direction: column;
gap: var(--s-3);
list-style: none;
}
.article-takeaways li {
display: flex;
align-items: flex-start;
gap: var(--s-3);
font-size: 0.98rem;
line-height: 1.55;
color: var(--text);
}
.article-takeaways li svg {
width: 18px;
height: 18px;
color: var(--info-text);
flex-shrink: 0;
margin-top: 0.2em;
}
.article-body h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.5vw, 2.05rem);
font-weight: 700;
line-height: 1.3;
color: var(--accent);
margin: var(--s-8) 0 var(--s-4);
}
.article-body h3 {
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.8vw, 1.45rem);
font-weight: 600;
line-height: 1.35;
color: var(--text);
margin: var(--s-7) 0 var(--s-3);
}
.article-body h4 {
font-family: var(--font-ui);
font-size: 1.08rem;
font-weight: 600;
line-height: 1.4;
color: var(--text);
margin: var(--s-6) 0 var(--s-2);
}
.article-body p {
font-size: 1.05rem;
line-height: 1.75;
color: var(--text-subtle);
margin-bottom: var(--s-5);
}
.article-body ul {
list-style: disc outside;
padding-left: 1.5rem;
margin: var(--s-4) 0 var(--s-6);
color: var(--text-subtle);
}
.article-body ol {
list-style: decimal outside;
padding-left: 1.5rem;
margin: var(--s-4) 0 var(--s-6);
color: var(--text-subtle);
}
.article-body li {
margin-bottom: 0.5rem;
line-height: 1.7;
font-size: 1.05rem;
}
.article-body li::marker {
color: var(--gold-500);
}
.article-body li p {
display: inline;
margin: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.article-tip-box {
background: rgba(58, 97, 102, 0.08);
background: color-mix(in srgb, var(--info-text) 8%, var(--surface));
border-left: 3.5px solid var(--info-text);
padding: 1.15rem 1.5rem;
border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
margin: var(--s-7, 2rem) 0;
color: var(--text);
font-size: 1.02rem;
line-height: 1.65;
}
.article-tip-box strong {
color: var(--info-text);
font-weight: 700;
margin-right: 0.35rem;
}
.article-tip-box p {
display: inline;
margin: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.article-closing-heading {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.6vw, 1.95rem);
font-weight: 600;
font-style: italic;
line-height: 1.35;
color: var(--info-text);
margin: var(--s-8) 0 var(--s-6);
}
.article-quote {
border-left: 3px solid var(--accent);
padding-left: var(--s-6);
margin: var(--s-8) 0;
}
.article-quote p {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
line-height: 1.45;
font-style: italic;
color: var(--text);
margin-bottom: var(--s-3);
}
.article-quote cite {
font-family: var(--font-ui);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent);
font-style: normal;
}
.article-body .article-feature-box,
.article-feature-box {
display: block;
padding: var(--card-pad);
margin: var(--s-8) 0;
}
.card--bone .article-feature-title,
.article-feature-box .article-feature-title,
.article-feature-title {
font-family: var(--font-display);
font-size: clamp(1.2rem, 1.8vw, 1.35rem);
font-weight: 600;
color: var(--gold-600) !important;
margin-bottom: var(--s-4);
line-height: 1.35;
}
.article-feature-box p {
color: var(--text-on-bone);
font-size: 1rem;
line-height: 1.65;
margin-bottom: var(--s-3);
}
.article-feature-box b,
.article-feature-box strong {
color: var(--text-on-accent);
font-weight: 700;
}
.article-feature-box ul {
list-style: disc outside;
padding-left: 1.4rem;
margin: 0.5rem 0 1.25rem;
}
.article-feature-box ul li {
margin-bottom: 0.45rem;
line-height: 1.6;
font-size: 0.98rem;
color: var(--text-on-bone);
}
.article-feature-box ul li::marker {
color: var(--gold-500);
}
.article-feature-box ul li p {
display: inline;
margin: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.article-feature-list {
display: flex;
flex-direction: column;
gap: var(--s-5);
}
.article-feature-item {
display: flex;
align-items: flex-start;
gap: var(--s-4);
}
.article-feature-item > div {
flex: 1;
min-width: 0;
}
.article-feature-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
background: var(--accent);
color: #0B0E14;
font-family: var(--font-ui);
font-weight: 700;
font-size: 0.92rem;
margin-top: 1px;
}
.article-feature-item h4 {
font-family: var(--font-ui);
font-size: 1.05rem;
font-weight: 600;
color: var(--text);
margin: 0 0 0.35rem 0 !important;
line-height: 1.35;
}
.article-feature-item p {
font-size: 0.95rem;
line-height: 1.55;
color: var(--text-on-bone);
margin: 0;
max-width: none !important;
}
/* Inline & Bottom Product Boxes (Dark Aura Quiet Luxury) */
.article-product-box {
padding: 1.85rem 2.2rem;
margin: var(--s-8) 0;
display: block;
}
.article-product-box .eyebrow,
.magazin-cta-box .eyebrow {
color: var(--gold-400);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
display: block;
}
.article-product-box h3 {
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.8vw, 1.55rem);
font-weight: 600;
line-height: 1.35;
color: var(--bone-100) !important;
margin: var(--s-2) 0 var(--s-3);
}
.article-product-box p {
color: var(--bone-200);
font-size: 1.02rem;
line-height: 1.65;
margin-bottom: var(--s-5);
}
.article-product-box .btn {
display: inline-flex;
text-decoration: none;
}
.magazin-cta-box h2 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.3;
color: var(--bone-100);
}
/* =============================================================================
Magazin CTA Box Themes (6 kuratierte DGM-Farbwelten)
============================================================================= */
/* 1. Dark Aura (card--ink) */
.magazin-cta-box.card--ink::after {
background: #0E0D0C !important;
}
/* 2. Velvet Merlot (card--merlot) - Weihnachten & Festtage */
.magazin-cta-box.card--merlot::before {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(220, 60, 95, 0.45) 70%, var(--accent) 100%);
}
.magazin-cta-box.card--merlot::after {
background: #4E1422 !important;
}
.magazin-cta-box.card--merlot {
color: var(--bone-100);
}
.magazin-cta-box.card--merlot h2 {
color: var(--bone-100);
}
.magazin-cta-box.card--merlot p {
color: #F0DADE;
}
/* 3. Alpine Pine (card--pine) - Tanne, Natur & Vitalität */
.magazin-cta-box.card--pine::before {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(55, 160, 95, 0.45) 70%, var(--accent) 100%);
}
.magazin-cta-box.card--pine::after {
background: #163A26 !important;
}
.magazin-cta-box.card--pine {
color: var(--bone-100);
}
.magazin-cta-box.card--pine h2 {
color: var(--bone-100);
}
.magazin-cta-box.card--pine p {
color: #D6E4D9;
}
/* 4. Nordic Lake (card--lake) - Tiefsee, Wissen & Balance */
.magazin-cta-box.card--lake::before {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(50, 175, 190, 0.5) 70%, var(--accent) 100%);
}
.magazin-cta-box.card--lake::after {
background: #16424A !important;
}
.magazin-cta-box.card--lake {
color: var(--bone-100);
}
.magazin-cta-box.card--lake h2 {
color: var(--bone-100);
}
.magazin-cta-box.card--lake p {
color: #D2E4E8;
}
/* 5. Royal Midnight (card--midnight) - Mitternachtsblau, Regeneration */
.magazin-cta-box.card--midnight::before {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(75, 120, 220, 0.45) 70%, var(--accent) 100%);
}
.magazin-cta-box.card--midnight::after {
background: #162848 !important;
}
.magazin-cta-box.card--midnight {
color: var(--bone-100);
}
.magazin-cta-box.card--midnight h2 {
color: var(--bone-100);
}
.magazin-cta-box.card--midnight p {
color: #D6E0F2;
}
/* 6. Klassisch Creme (card--bone) - Helle Champagner-Fläche */
.magazin-cta-box.card--bone::before {
background: linear-gradient(135deg, rgba(22, 19, 17, 0.15) 0%, rgba(198, 169, 107, 0.4) 100%);
}
.magazin-cta-box.card--bone::after {
background: #F2EDE3 !important;
}
.magazin-cta-box.card--bone h2 {
color: #161311 !important;
}
.magazin-cta-box.card--bone p {
color: #5A5449 !important;
}
.magazin-cta-box.card--bone .btn-ghost {
border-color: rgba(22, 19, 17, 0.25);
color: #161311;
}
.article-author-box {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1.4rem;
padding: 1.6rem;
margin-top: var(--s-8);
}
.article-author-info {
flex: 1;
min-width: 0;
}
.article-author-eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.35rem;
}
.article-author-box h4,
.article-author-name {
font-family: var(--font-display);
font-size: 1.18rem;
font-weight: 600;
color: var(--text-base);
margin: 0 0 0.45rem;
line-height: 1.3;
}
.article-author-box p {
font-size: 0.92rem;
line-height: 1.62;
color: var(--text-subtle);
margin: 0;
}
.article-author-avatar {
width: 78px;
height: 78px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--accent);
box-shadow: 0 4px 14px rgba(198, 169, 107, 0.25);
background: var(--sand-100);
}
@media (max-width: 640px) {
.article-author-box {
gap: 1.1rem;
padding: 1.25rem;
}
.article-author-avatar {
width: 64px;
height: 64px;
}
.article-author-box h4,
.article-author-name {
font-size: 1.05rem;
}
.article-author-box p {
font-size: 0.88rem;
line-height: 1.55;
}
}
/* Checklisten-Variante der Feature-Box (art4: 4 einzeilige Kriterien statt
Titel+Beschreibung-Paaren). */
.article-checklist {
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.article-checklist li {
display: flex;
align-items: flex-start;
gap: var(--s-3);
font-size: 0.98rem;
line-height: 1.55;
color: var(--text);
}
.article-checklist svg {
width: 20px;
height: 20px;
color: var(--info-text);
flex-shrink: 0;
margin-top: 0.15em;
}
/* Skalen-Variante der Feature-Box (art7: Stufe + Beschreibung + Status). */
.article-scale-row {
display: flex;
align-items: center;
gap: var(--s-4);
padding-block: var(--s-3);
}
.article-scale-row + .article-scale-row {
border-top: 1px solid var(--border);
}
.article-scale-num {
font-family: var(--font-ui);
font-weight: 700;
font-size: 0.85rem;
color: var(--info-text);
flex-shrink: 0;
width: 90px;
}
.article-scale-desc {
flex-grow: 1;
font-size: 0.92rem;
color: var(--text-subtle);
}
.article-scale-status {
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
color: var(--text-muted);
}
/* Bildunterschriften-Stil (art9: zwei erklärende Zwischentexte statt echter
Bilder — als kleine, zentrierte Legende gesetzt). */
.article-fig-caption {
font-size: 0.88rem;
font-style: italic;
color: var(--text-muted);
text-align: center;
max-width: 520px;
margin: var(--s-6) auto;
line-height: 1.6;
}
/* ==========================================================================
HERO OHNE KLEBENDES ELEMENT — Lösung für den Streifen unter Safaris Leiste
(14. September 2026, am iPhone bestätigt)
Die Ursache, per Gerätetest eingegrenzt (test-leiste.html, Varianten A–F):
Safari 26 legt eine DECKENDE Farbfläche hinter seine schwebende untere
Leiste, sobald ein position: sticky- oder fixed-Element den unteren
Bildschirmrand berührt. Das war die klebende Hero-Bühne. Es lag weder an
Farben noch an Viewport-Einheiten noch an fehlender Bildhöhe — mehr Bild
unter die Bühne zu legen blieb wirkungslos, weil Safari darübermalt.
Deshalb klebt die Bühne hier nicht mehr. Sie steht absolut im Track und
wird per CSS-Scroll-Animation exakt um den Scrollweg mitgeschoben. Das
rechnet der Browser selbst im Takt des Scrollens.
NICHT per Skript: Das war am Gerät optisch korrekt, ruckelte aber stark,
weil ein Skript dem Scrollen auf iOS immer einen Frame hinterherläuft.
Geometrie: Track 250lvh, Bühne 100lvh → Mitführen über 150lvh. Ändert
sich die Track-Höhe, muss dieser Wert mit (siehe auch --hero-exit-* in
tokens.css).
Browser ohne Scroll-Animationen behalten die klebende Bühne von oben. */
@supports (animation-timeline: scroll()) {
.hero-scroll-track {
/* Hier unbedenklich, weil nichts mehr klebt. Schneidet den Überhang des
Canvas am Ende des Tracks ab. */
overflow: hidden;
}
.hero-sticky-viewport.stage {
position: absolute;
top: 0;
left: 0;
animation-name: hero-mitfuehren;
animation-duration: auto;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: 0px 150lvh;
}
@keyframes hero-mitfuehren {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, 150lvh, 0); }
}
/* Überhang: Die Bühne endet bei 100lvh, der Bildschirm unter Safaris
Leiste geht weiter. Der Canvas ragt deshalb 240px darunter. Das Bild
wird in main.js (drawFrame) weiter nur auf die Bühnenfläche eingepasst
— der Ausschnitt bleibt gleich, im Überhang steht der untere Bildrand
gespiegelt und abgedunkelt. */
.hero-scroll-canvas.seq {
height: calc(100% + 240px);
}
.hero-sticky-viewport .backdrop {
bottom: -240px;
}
/* Setzt den hellen Verlauf am Hero-Ausgang im Überhang fort. */
.hero-bottom-blend::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 240px;
background: var(--lift-100);
}
@media (max-width: 900px) {
/* Das Bild läuft jetzt unter die Leiste — der Scroll-Hinweis rückt
darüber, sonst verschwindet er hinter den Buttons. */
.hero-sticky-viewport.stage {
padding-bottom: calc(clamp(0.75rem, 3vw, 1.25rem) + 3.5rem);
}
}
}