/* ==========================================================================
ÜBEROPTIMIERT – style.css
Reines Custom-CSS, kein Framework. Mobile-first. Keine Third-Party-Requests
(keine Google Fonts – alle Schriften kommen aus System-Stacks).
Aufbau:
1. Design-Tokens (CSS Custom Properties)
2. Reset & Basis
3. Typografie
4. Layout-Utilities (container, section, grid)
5. Buttons, Badges, Evidenz-Marker
6. Header / Navigation
7. Footer
8. Komponenten (Hero, Trust-Bar, Sponsoren, Cards, Pillars, Pain,
Pricing, FAQ, CTA-Band, Plattformen)
9. Seiten-spezifisch (Blog-Index, Artikel-Layout, About, Legal)
10. (frei – hier lag der Cookie-Banner, siehe Tag v0-vollversion)
11. Animationen
12. Responsive (Breakpoints)
TYPO-KONZEPT (bewusst dreiteilig – das ist der "nerdig, aber lesbar"-Trick):
--font-sans Interface: Navigation, Buttons, Landingpage-Headlines
--font-serif Lesetext: Artikel-Body. Serifen + 19px + hohe Zeilenhöhe,
damit auch ältere Leser lange Texte gut lesen können.
--font-mono Metadaten: Datum, Kategorie, Fußnoten-Nummern, Kicker,
Abschnittsnummern. Das ist die gesamte "Nerd"-Dosis –
sie steckt in kleinen Labels, nie im Fließtext.
========================================================================== */
/* 1. ====================== DESIGN-TOKENS ================================== */
:root {
/* --- Farben: Flächen --- */
--color-bg: #0D0D0D; /* Haupt-Hintergrund (tiefes Schwarz) */
--color-bg-alt: #131317; /* Abwechselnder Section-Hintergrund */
--color-surface: #191A1E; /* Karten / erhöhte Flächen */
--color-surface-2: #212228; /* Hover / verschachtelte Flächen */
--color-border: #2A2B32; /* dezente Rahmen */
--color-border-soft: #1F2026; /* Haarlinien in Listen */
/* --- Farben: Marke --- */
/* AKZENTFARBE = der Logo-Verlauf, Gelb → Grüngelb → Türkis.
Das flache #F5C518 wirkte zu orange. Es kommt jetzt nirgends mehr
als Fläche vor, sondern nur noch als Startpunkt des Verlaufs.
--gradient-primary liegt auf allen Akzent-FLÄCHEN (Buttons, Chips,
Flags) UND als Verlaufsschrift auf hervorgehobenem
TEXT (Headline-Wort, Preis, Labels).
--color-primary einzelne Volltonfarbe für Stellen, an denen ein
Verlauf technisch nicht geht: 1px-Linien und
Hover-Zustände von Fließtext-Links. Aus der Mitte
des Verlaufs entnommen, damit es dazu passt.
Willst du die Farbe verschieben, reichen diese vier Zeilen. */
--color-primary: #C9D45C; /* Grüngelb aus der Verlaufsmitte */
--color-primary-700: #B6C449; /* eine Stufe kräftiger */
--color-primary-deep:#F5C518; /* Startpunkt des Verlaufs */
--color-accent: #2DD4F0; /* Türkis (aufgehellt für AA-Kontrast) */
--color-accent-600: #00B4D8; /* Türkis Original (Flächen/Verläufe) */
/* --- Farben: Text --- */
--color-text: #FFFFFF; /* Headlines, UI */
--color-text-read: #E3E5EA; /* Fließtext in Artikeln. Bewusst KEIN reines
Weiß: reduziert das Flimmern (Halation)
bei langen Texten auf dunklem Grund. */
--color-text-muted: #A8ACB6; /* sekundärer Text */
--color-text-faint: #71757F; /* Metadaten, Fußzeilen */
--color-text-dark: #0D0D0D; /* Text auf hellen Buttons */
/* --- Farben: Status / Evidenzstufen --- */
--color-success: #34D399; /* belastbar / Meta-Analyse */
--color-warn: #E4CE45; /* eingeschränkt / präklinisch */
--color-danger: #F87171; /* Abgrenzung, "keine Daten" */
/* --- Verläufe & Texturen --- */
/* Marken-Verlauf Gelb → Türkis: Logo, CTA-Band, Fortschrittsbalken */
--gradient-brand: linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-accent-600) 100%);
/* Identisch zum Logo-Verlauf – liegt auf Flächen und auf Verlaufsschrift */
--gradient-primary: var(--gradient-brand);
--gradient-primary-hover: linear-gradient(135deg, #FFD84A 0%, #22C3E6 100%);
--gradient-glow: radial-gradient(70% 60% at 50% 0%, rgba(45,212,240,0.13) 0%, rgba(13,13,13,0) 70%);
/* Punktraster – dezente "Millimeterpapier"-Textur für Header-Bereiche */
--texture-dots: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
--texture-dots-size: 22px 22px;
/* --- Typo: Familien --- */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif;
--font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Charter", Georgia, "Nimbus Roman No9 L", serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
/* --- Typo: Größen --- */
--fs-xs: 0.8125rem; /* 13px – Metadaten */
--fs-sm: 0.9375rem; /* 15px – UI-Sekundärtext */
--fs-base: 1.0625rem; /* 17px – UI-Fließtext */
--fs-read: 1.1875rem; /* 19px – Artikel-Fließtext (Lesegröße) */
--fs-lg: 1.25rem; /* 20px */
--fs-xl: 1.5rem; /* 24px */
--fs-2xl: 2rem; /* 32px */
--fs-3xl: 2.75rem; /* 44px */
--fs-4xl: 3.75rem; /* 60px */
--lh-tight: 1.1;
--lh-snug: 1.35;
--lh-base: 1.65;
--lh-read: 1.75; /* Artikel: großzügig für lange Texte */
/* --- Spacing --- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
/* --- Radius / Schatten --- */
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
--shadow: 0 10px 30px rgba(0,0,0,0.35);
--shadow-lg: 0 20px 50px rgba(0,0,0,0.5);
--shadow-glow: 0 0 0 1px rgba(201,212,92,0.28), 0 12px 40px rgba(201,212,92,0.14);
/* --- Layout --- */
--container: 1180px;
--container-narrow: 760px;
--container-read: 700px; /* Artikel-Textspalte ≈ 68 Zeichen */
--header-h: 72px;
/* --- Transitions --- */
--t-fast: 0.15s ease;
--t: 0.25s ease;
}
/* 2. ====================== RESET & BASIS ================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 24px); /* Anchor-Offset unter Sticky-Header */
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Body-Scroll-Lock wenn mobiles Menü offen ist (per JS gesetzt) */
body.nav-open { overflow: hidden; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--color-primary); }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
border-radius: 4px;
}
::selection { background: rgba(201,212,92,0.3); color: #fff; }
/* Skip-Link für Tastatur/Screenreader */
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--gradient-primary);
color: var(--color-text-dark);
padding: var(--space-3) var(--space-5);
font-weight: 700;
z-index: 1000;
border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
/* Visuell versteckt, aber für Screenreader lesbar */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 3. ====================== TYPOGRAFIE ==================================== */
h1, h2, h3, h4 {
margin: 0 0 var(--space-4);
line-height: var(--lh-tight);
font-weight: 800;
letter-spacing: -0.022em;
text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
/* Der Türkis-Schimmer liegt jetzt NUR noch auf Hero-Headlines (Opt-in),
nicht mehr global auf jedem h1/h2 – das war im Lesefluss unruhig. */
.glow { text-shadow: 0 6px 40px rgba(45,212,240,0.22); }
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.text-accent { color: var(--color-accent); }
/* Verlaufsschrift. Wichtig: text-shadow muss aus, sonst schimmert er durch
die transparent gesetzte Schrift. */
.text-gradient,
.mark,
.pricing__price strong,
.trustbar__value,
.pain-item__mark,
.callout--warn .callout__title {
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: none;
}
/* Hervorgehobenes Schlüsselwort in Headlines. Den Verlauf liefert die
Regel darüber; hier muss nur der geerbte Hero-Glow weg, sonst schimmert
er durch die transparent gesetzte Schrift. */
.mark {
text-shadow: none;
}
/* --- Kicker / Eyebrow: mono + Marker. Trägt den "Labor"-Look. --- */
.kicker {
display: inline-flex;
align-items: center;
gap: 0.6em;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-3);
}
.kicker::before {
content: "";
width: 6px; height: 6px;
background: currentColor;
flex-shrink: 0;
}
.section-head--center .kicker { justify-content: center; }
/* --- Abschnittsnummer (01, 02, 03 …) --- */
.section-num {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-text-faint);
letter-spacing: 0.1em;
}
/* --- PLATZHALTER -------------------------------------------------------
Text, der noch geschrieben werden muss. Bewusst als Lücke erkennbar,
aber ohne geschweifte Klammern im Layout.
Alle Fundstellen finden: grep -rn 'class="ph' --include='*.html' .
Vor dem Livegang muss dieser Grep leer sein.
---------------------------------------------------------------------- */
.ph {
color: var(--color-text-faint);
border-bottom: 1px dashed rgba(255,255,255,0.22);
font-style: italic;
font-weight: 400;
}
.ph-block {
display: block;
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-4);
color: var(--color-text-faint);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-style: italic;
line-height: var(--lh-base);
}
/* Mono-Utility für Zahlen, Daten, Codes */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* 4. ====================== LAYOUT-UTILITIES ============================== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }
.container--read { max-width: var(--container-read); }
.section { padding-block: var(--space-8); position: relative; }
.section--alt { background: var(--color-bg-alt); }
.section--tight { padding-block: var(--space-7); }
/* Haarlinie statt Flächenwechsel – ruhiger als abwechselnde Hintergründe */
.section--ruled { border-top: 1px solid var(--color-border-soft); }
.section-head { max-width: 680px; margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--color-text-muted); font-size: var(--fs-lg); }
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
/* --- Kachelraster der Tool-Übersicht (tools.html) ---------------------
⚠️ FESTGELEGTE REGEL: höchstens DREI Kacheln nebeneinander, danach
beginnt eine neue Reihe. Kommt ein viertes Tool dazu, passiert das
von allein – hier ist nichts nachzutragen.
Warum auto-fit und nicht einfach .grid-3 mit drei festen Spalten:
feste 3 Spalten → bei nur zwei Tools bleibt rechts eine leere
Spalte stehen, die Kacheln wirken verrutscht
auto-fit → leere Spalten fallen in sich zusammen, zwei
Tools teilen sich die volle Breite; ab dem
dritten wird es dreispaltig, ab dem vierten
bricht die Reihe um
Die Obergrenze von drei ist gerechnet, nicht geraten:
3 Spalten = 3 × 300 px + 2 × 2 rem Abstand = ca. 948 px → passt
4 Spalten = 4 × 300 px + 3 × 2 rem Abstand = ca. 1272 px → passt
nicht in den Container (1180 px minus Innenabstand)
Wer --container vergrößert, muss die 300 px hier mitheben, sonst
rutscht stillschweigend eine vierte Spalte in die Reihe.
Das min(100%, 300px) ist kein Zierrat: Ohne es wäre die Mindestbreite
auf sehr schmalen Geräten breiter als der Container, und das Raster
würde seitlich überlaufen. */
.tool-grid {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.center { text-align: center; }
.stack-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.stack-actions--center { justify-content: center; }
[data-supplement-finder] [hidden] { display: none !important; }
/* 5. ====================== BUTTONS & MARKER ============================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-size: var(--fs-base);
font-weight: 700;
font-family: var(--font-sans);
line-height: 1;
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
transition: transform var(--t-fast), background var(--t), box-shadow var(--t), color var(--t);
text-align: center;
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--gradient-primary);
color: var(--color-text-dark);
box-shadow: 0 12px 40px rgba(201,212,92,0.14);
}
.btn--primary:hover {
background: var(--gradient-primary-hover);
color: var(--color-text-dark);
box-shadow: 0 16px 40px -8px rgba(201,212,92,0.35);
}
.btn--accent { background: var(--color-accent-600); color: var(--color-text-dark); }
.btn--accent:hover {
background: var(--color-accent);
color: var(--color-text-dark);
box-shadow: 0 16px 40px -8px rgba(45,212,240,0.4);
}
.btn--ghost { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 2px var(--color-border); }
.btn--ghost:hover {
color: var(--color-accent);
background: rgba(45,212,240,0.08);
box-shadow: inset 0 0 0 2px var(--color-accent), 0 12px 32px -10px rgba(45,212,240,0.3);
}
.btn--block { width: 100%; }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.btn--lg { padding: var(--space-4) var(--space-7); font-size: var(--fs-lg); }
/* --- Badge / Tag / Pill --- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.04em;
border-radius: var(--radius-pill);
background: rgba(45,212,240,0.12);
color: var(--color-accent);
border: 1px solid rgba(45,212,240,0.25);
}
.badge--soon {
background: rgba(201,212,92,0.12);
color: var(--color-primary);
border-color: rgba(201,212,92,0.35);
}
.badge--unavailable {
background: var(--color-danger);
color: var(--color-text-dark);
border-color: var(--color-danger);
font-weight: 700;
}
/* --- EVIDENZ-MARKER ---------------------------------------------------
Kernstück der Positionierung: Jeder Artikel bekommt sichtbar dazu, auf
welcher Datengrundlage er steht. Nerdig UND für Laien sofort verständlich.
Verwendung: Tier-/Zellstudien
Stufen (von stark nach schwach):
ev--meta Meta-Analysen / systematische Reviews
ev--rct Randomisierte kontrollierte Studien am Menschen
ev--observ Beobachtungsstudien / Kohorten
ev--preclinical Tier-, Zell- und Modellstudien
ev--none Keine belastbaren Daten / Hypothese
---------------------------------------------------------------------- */
.ev {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.2em 0.7em;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.02em;
border-radius: var(--radius-sm);
border: 1px solid currentColor;
background: rgba(255,255,255,0.03);
white-space: nowrap;
}
.ev::before {
content: "";
width: 7px; height: 7px;
border-radius: 2px;
background: currentColor;
flex-shrink: 0;
}
.ev--meta { color: var(--color-success); }
.ev--rct { color: var(--color-accent); }
.ev--observ { color: #9CA9F5; }
.ev--preclinical { color: var(--color-warn); }
.ev--none { color: var(--color-danger); }
/* Kategorie-Tag (mono, dezent) */
.tag {
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-faint);
}
/* 6. ====================== HEADER / NAV ================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--color-border);
isolation: isolate;
}
/* Der Filter liegt bewusst auf einem separaten Pseudo-Element: Ein
backdrop-filter auf .site-header selbst macht diesen in Safari zum
Bezugselement für das feste Mobile-Menü und staucht dessen Höhe auf die
Header-Höhe zusammen. */
.site-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(13,13,13,0.82);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-h);
}
.nav__logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 800;
font-size: var(--fs-lg);
color: var(--color-text);
letter-spacing: -0.02em;
}
.nav__logo:hover { color: var(--color-text); }
.nav__logo-mark {
width: 28px; height: 28px;
border-radius: 8px;
background: var(--gradient-brand);
display: grid; place-items: center;
color: var(--color-text-dark);
font-weight: 900;
font-size: 1rem;
flex-shrink: 0;
}
.nav__links { display: none; } /* mobil ausgeblendet, per Burger eingeblendet */
.nav__links a {
position: relative;
color: var(--color-text-muted);
font-weight: 600;
font-size: var(--fs-sm);
padding-block: var(--space-2);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--color-text); }
/* aktive Seite bekommt einen kurzen Unterstrich statt nur Farbe */
.nav__links a[aria-current="page"]::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--gradient-primary);
border-radius: 2px;
}
/* --- Aufklappmenü "Tools" ---------------------------------------------
Nur ab 960px relevant: darunter ist .nav__links komplett ausgeblendet
(siehe oben), und die Unterseiten stehen im Burger-Panel als
.nav__panel-sub.
Öffnet per :hover UND :focus-within. Das :focus-within ist nicht
optional – ohne es wäre das Untermenü per Tastatur nicht erreichbar,
weil :hover allein auf eine Maus angewiesen ist.
Die Sichtbarkeit läuft über opacity + visibility statt über display,
damit der Übergang animiert werden kann; display: none ist nicht
animierbar. visibility gehört zwingend dazu, sonst bleiben die Links
unsichtbar anklickbar und fangen Klicks ab, die dem Inhalt gelten.
---------------------------------------------------------------------- */
.nav__has-sub { position: relative; }
.nav__sub { display: none; }
@media (min-width: 960px) {
.nav__sub {
display: block;
position: absolute;
top: 100%;
/* Rechtsbündig am Nav-Punkt, NICHT unter ihm zentriert.
"Tools" ist der letzte Punkt der Navigation und sitzt damit am
rechten Rand; ein zentriertes Menü von 244 px Breite ragte zur
Hälfte aus dem Fenster und die Einträge waren abgeschnitten.
Kommt jemals ein Nav-Punkt rechts neben "Tools", darf das hier
wieder zentriert werden. */
right: 0;
left: auto;
transform: translateY(6px);
min-width: 244px;
padding: var(--space-2);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
z-index: 120; /* über .site-header (100), sonst schneidet der Header ab */
}
/* Unsichtbare Brücke zwischen Nav-Punkt und Klappmenü. Ohne sie
schließt das Menü, sobald der Mauszeiger den Spalt überquert –
der klassische Grund, warum solche Menüs sich "zickig" anfühlen. */
.nav__has-sub::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 14px;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub {
opacity: 1;
visibility: visible;
transform: translateY(2px);
}
.nav__sub li { display: block; }
.nav__sub a {
display: block;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: var(--fs-sm);
white-space: nowrap;
}
.nav__sub a:hover { background: var(--color-surface-2); color: var(--color-text); }
.nav__sub a[aria-current="page"] { background: var(--color-surface-2); color: var(--color-text); }
/* Der Unterstrich für die aktive Seite ist für die waagerechte
Hauptnavigation gedacht und sieht im Klappmenü wie ein Fehler aus. */
.nav__sub a[aria-current="page"]::after { display: none; }
}
/* Unterpunkte im mobilen Burger-Panel: eingerückt und leiser als die
Hauptpunkte, damit die Hierarchie ohne Aufklappen erkennbar ist. */
.nav__panel-sub {
padding-left: var(--space-6) !important;
font-size: var(--fs-base) !important;
font-weight: 600 !important;
color: var(--color-text-muted) !important;
}
.nav__panel-sub[aria-current="page"] { color: var(--color-primary) !important; }
.nav__cta { display: none; }
/* Hamburger-Button */
.nav__toggle {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px; height: 44px;
padding: 10px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
}
.nav__toggle span {
display: block;
height: 2px;
width: 100%;
background: var(--color-text);
border-radius: 2px;
transition: transform var(--t), opacity var(--t);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile-Menü-Panel */
.nav__panel {
position: fixed;
inset: var(--header-h) 0 0 0;
background: var(--color-bg);
padding: var(--space-6) var(--space-5) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-2);
transform: translateX(100%);
transition: transform var(--t);
overflow-y: auto;
z-index: 99;
}
.nav__panel.is-open { transform: translateX(0); }
.nav__panel a {
display: block;
padding: var(--space-4) var(--space-3);
font-size: var(--fs-lg);
font-weight: 700;
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
}
.nav__panel a[aria-current="page"] { color: var(--color-primary); }
.nav__panel .btn { margin-top: var(--space-5); }
/* --- Lesefortschritt (nur auf Artikelseiten, per JS gefüllt) --- */
.progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 200;
background: transparent;
pointer-events: none;
}
.progress__bar {
height: 100%;
width: 100%;
background: var(--gradient-brand);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.1s linear;
}
/* 7. ====================== FOOTER ======================================== */
.site-footer {
background: var(--color-bg-alt);
border-top: 1px solid var(--color-border);
padding-block: var(--space-8) var(--space-6);
margin-top: var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
margin-bottom: var(--space-7);
}
.footer__brand p { color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 320px; }
.footer__col h4 {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-faint);
}
.footer__col ul li { margin-bottom: var(--space-2); }
.footer__col a { color: var(--color-text); font-size: var(--fs-sm); font-weight: 500; }
.footer__col a:hover { color: var(--color-primary); }
.footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer__social a {
width: 42px; height: 42px;
display: grid; place-items: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
transition: border-color var(--t), color var(--t), transform var(--t);
}
.footer__social a:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }
.footer__bottom {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
color: var(--color-text-faint);
font-size: var(--fs-xs);
}
.footer__bottom a { color: var(--color-text-faint); }
.footer__legal { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
/* Datenschutz-Signal in der Fußzeile.
Sichtbarer Hinweis, dass die Seite ohne Cookies und Tracking auskommt –
verlinkt auf § 6 der Datenschutzerklärung, der die Aussage belegt.
⚠️ Kommt jemals ein Cookie, ein Tracking-Tool oder ein Third-Party-Embed
dazu, muss dieser Hinweis raus (sonst ist er eine falsche Zusage) – und
das Consent-Banner samt datenschutz.html-Abschnitt kommt zurück. */
.footer__privacy {
display: inline-flex;
align-items: center;
gap: 0.55em;
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-decoration: none;
}
.footer__privacy::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-success);
flex-shrink: 0;
}
.footer__privacy:hover { color: var(--color-text-muted); }
/* 8. ====================== KOMPONENTEN =================================== */
/* --- Hero ------------------------------------------------------------- */
.hero {
position: relative;
padding-block: var(--space-8);
background: var(--gradient-glow), var(--color-bg);
overflow: hidden;
}
/* Punktraster über dem Hero – dezente Labor-/Millimeterpapier-Anmutung */
.hero::before {
content: "";
position: absolute; inset: 0;
background-image: var(--texture-dots);
background-size: var(--texture-dots-size);
-webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 75%);
mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 75%);
pointer-events: none;
}
.hero > * { position: relative; }
.hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
align-items: center;
}
/* Themenzeile über die volle Containerbreite (über Text und Bild).
Die Groesse ist an die Zeichenzahl gekoppelt statt an Token-Stufen: Bei
3.7vw bleibt "Performance-Optimierung und Cognitive Enhancement" ab etwa
780px Fensterbreite auf EINER Zeile, gedeckelt bei 44px, weil der Container
bei 1180px endet. Unter ~780px bricht die Zeile zwangslaeufig um – bei 48
Zeichen waere eine einzeilige Darstellung dort nur mit unlesbaren 14px
moeglich. text-wrap: balance verteilt die Zeilen dann gleichmaessig. */
.hero__headline {
font-size: clamp(1.75rem, 3.7vw, 2.75rem);
text-wrap: balance;
margin-bottom: var(--space-7);
}
/* Namenszeile direkt unter der H1: Die H1 nennt seit 2026-08-20 das Thema,
nicht die Person – der Name steht deshalb als eigene Zeile darunter. */
.hero__author {
font-family: var(--font-mono);
font-size: var(--fs-base);
letter-spacing: 0.02em;
color: var(--color-text);
margin-bottom: var(--space-6);
}
.hero__sub {
/* Die Vorstellung ist bewusst ausführlich. Etwas kleinere Schrift,
engere Zeilen und weniger Absatzabstand halten sie neben dem Porträt
auf großen Bildschirmen dennoch kompakt. */
font-size: 0.98rem;
line-height: 1.28;
color: var(--color-text-muted);
margin-bottom: var(--space-3);
max-width: 34em;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.hero__note {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-text-faint);
}
/* Portrait mit dünnem "technischen" Rahmen */
.hero__media { position: relative; max-width: 340px; margin-inline: auto; }
.hero__media img {
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
}
.hero__media::after {
content: "";
position: absolute;
inset: -10px;
border-radius: calc(var(--radius-lg) + 10px);
border: 1px dashed rgba(45,212,240,0.22);
pointer-events: none;
}
/* Kleines Bild-Label unten links, mono */
.hero__caption {
position: absolute;
left: var(--space-4);
bottom: var(--space-4);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-text);
background: rgba(13,13,13,0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3);
}
/* --- Partner ---------------------------------------------------------- */
.partners {
margin-top: var(--space-9);
text-align: center;
}
.partners__title { margin-bottom: var(--space-6); }
.partners__disclosure {
max-width: none;
margin: calc(-1 * var(--space-3)) auto var(--space-6);
font-size: 0.75rem;
}
.partners__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
max-width: 760px;
margin-inline: auto;
}
.partner {
display: grid;
gap: var(--space-3);
}
.partner__logo {
position: relative;
display: block;
aspect-ratio: 16 / 9;
padding: 0;
background: transparent;
border: 0;
border-radius: var(--radius);
overflow: hidden;
transition: border-color var(--t), box-shadow var(--t), transform var(--t-fast);
}
.partner__logo:hover {
box-shadow: var(--shadow-glow);
transform: translateY(-2px);
}
.partner__logo--white { background: #fff; }
.partner__logo--borderless,
.partner__logo--borderless:hover {
background: transparent;
}
.partner__logo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: inherit;
}
.partner__discount {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-2);
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
.partner__code {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-3);
color: var(--color-text-dark);
background: var(--gradient-primary);
border: 0;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.partner__code:hover {
background: var(--gradient-primary-hover);
box-shadow: var(--shadow-glow);
transform: translateY(-1px);
}
.partner__code strong { font-size: var(--fs-sm); }
.partner__code.is-copied { background: var(--color-success); }
.partner__supplements-link { justify-self: center; }
/* --- Trust-Bar: harte Zahlen direkt unter dem Hero -------------------- */
.trustbar {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--color-border-soft);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
overflow: hidden;
}
.trustbar__item {
background: var(--color-bg);
padding: var(--space-5) var(--space-4);
text-align: center;
}
.trustbar__value {
display: block;
font-family: var(--font-mono);
font-size: var(--fs-xl);
font-weight: 700;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.trustbar__label {
font-size: var(--fs-xs);
color: var(--color-text-faint);
letter-spacing: 0.02em;
}
/* --- Sponsoren- / Partner-Leiste -------------------------------------- */
.logo-strip {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
align-items: stretch;
}
.logo-strip__item {
display: grid;
place-items: center;
min-height: 84px;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text-muted);
font-weight: 700;
text-align: center;
transition: border-color var(--t), color var(--t), transform var(--t);
}
.logo-strip__item:hover { border-color: var(--color-accent); color: var(--color-text); transform: translateY(-2px); }
/* Platzhalter-Variante, solange es keine echten Sponsoren gibt */
.logo-strip__item--placeholder {
border-style: dashed;
background: transparent;
color: var(--color-text-faint);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0.06em;
}
.logo-strip__item--placeholder:hover { transform: none; border-color: var(--color-border); color: var(--color-text-faint); }
/* --- Generische Karte -------------------------------------------------- */
.card {
background: rgba(25,26,30,0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-6);
transition: transform var(--t), border-color var(--t), box-shadow var(--t);
height: 100%;
}
.card:hover {
transform: translateY(-6px);
border-color: rgba(45,212,240,0.4);
box-shadow: 0 24px 50px -12px rgba(45,212,240,0.22), 0 0 40px rgba(45,212,240,0.1);
}
.card__icon {
width: 52px; height: 52px;
border-radius: var(--radius-sm);
background: rgba(45,212,240,0.1);
display: grid; place-items: center;
margin-bottom: var(--space-4);
font-size: 1.5rem;
transition: transform var(--t);
}
.card:hover .card__icon { transform: scale(1.12); }
/* Bild statt Emoji im Kachel-Icon.
Der globale Reset setzt img { height: auto } – das würde die feste
Höhe des Icons aushebeln, deshalb hier ausdrücklich 100 %.
Die Bilder sind quadratisch zugeschnitten, object-fit: cover ist nur
die Absicherung, falls doch mal ein unquadratisches dazukommt. */
.card__icon--bild { background: none; padding: 0; overflow: hidden; }
.card__icon--bild img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--color-text-muted); font-size: var(--fs-sm); }
.card--unavailable {
background: linear-gradient(rgba(248,113,113,0.06), rgba(248,113,113,0.06)), rgba(25,26,30,0.6);
border-color: rgba(248,113,113,0.2);
}
.card--unavailable:hover {
border-color: rgba(248,113,113,0.35);
box-shadow: 0 24px 50px -12px rgba(248,113,113,0.18), 0 0 40px rgba(248,113,113,0.08);
}
.card__features { font-size: var(--fs-sm); color: var(--color-text-muted); }
.card__features li { position: relative; padding-left: 1.6em; margin-bottom: var(--space-2); }
.card__features li::before {
content: "✓";
position: absolute; left: 0;
color: var(--color-success);
font-weight: 700;
}
.card__features li:last-child { margin-bottom: 0; }
.card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
font-weight: 700;
font-size: var(--fs-sm);
}
/* --- Säulen / "Mein System" ------------------------------------------- */
.pillar {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
transition: border-color var(--t), transform var(--t), background var(--t);
height: 100%;
}
.pillar:hover { border-color: rgba(45,212,240,0.4); transform: translateY(-4px); background: var(--color-surface-2); }
.pillar__num {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-text-faint);
letter-spacing: 0.12em;
}
.pillar__icon { font-size: 1.75rem; line-height: 1; }
.pillar h3 { font-size: var(--fs-lg); margin: 0; }
.pillar p { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
/* --- YouTube-Videokarten (Startseite) ----------------------------------
Bewusst kein eingebetteter Player: Thumbnail liegt lokal im Repo, der
Klick verlinkt einfach auf youtube.com. Keine Google-Anfrage beim
Seitenaufruf, keine Cookies, keine Aenderung an datenschutz.html noetig. */
.video-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
overflow: hidden;
transition: border-color var(--t), transform var(--t), background var(--t);
}
.video-card:hover { border-color: rgba(45,212,240,0.4); transform: translateY(-4px); background: var(--color-surface-2); }
.video-card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t); }
.video-card:hover .video-card__thumb img { transform: scale(1.04); }
.video-card__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
}
.video-card__play::before {
content: "▶";
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(13,13,13,0.55);
backdrop-filter: blur(2px);
color: #fff;
font-size: 1.1rem;
transition: background var(--t), transform var(--t);
}
.video-card:hover .video-card__play::before { background: var(--color-accent-600); transform: scale(1.08); }
.video-card h3 {
font-size: var(--fs-base);
line-height: var(--lh-snug);
margin: 0 var(--space-5) var(--space-5);
color: var(--color-text);
}
/* --- Problem / "Kennst du das?" --------------------------------------- */
.pain-list { display: grid; gap: var(--space-4); }
.pain-item {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius);
}
.pain-item__mark {
font-family: var(--font-mono);
font-size: var(--fs-sm);
flex-shrink: 0;
padding-top: 0.15em;
}
.pain-item h4 { margin-bottom: var(--space-1); font-size: var(--fs-base); }
.pain-item p { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
/* Gegenüberstellung "so nicht / so schon" */
.compare { display: grid; gap: var(--space-5); }
.compare__col {
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
}
.compare__col--no { border-color: rgba(248,113,113,0.25); }
.compare__col--yes { border-color: rgba(52,211,153,0.3); }
.compare__col h3 { font-size: var(--fs-lg); }
.compare__col ul { display: grid; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.compare__col li { display: flex; gap: var(--space-3); align-items: flex-start; }
.compare__col li::before { flex-shrink: 0; font-weight: 800; font-family: var(--font-mono); }
.compare__col--no li::before { content: "✕"; color: var(--color-danger); }
.compare__col--yes li::before { content: "✓"; color: var(--color-success); }
/* --- Plattform-Logos --------------------------------------------------- */
.platforms {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-6);
}
.platforms a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-muted);
font-weight: 700;
font-size: var(--fs-lg);
opacity: 0.8;
transition: opacity var(--t), color var(--t);
}
.platforms a:hover { opacity: 1; color: var(--color-text); }
/* --- FAQ (natives , kein JS nötig) --------------------------- */
.faq { display: grid; gap: var(--space-3); }
.faq__item {
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
overflow: hidden;
}
.faq__item[open] { border-color: rgba(45,212,240,0.35); }
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5);
font-weight: 700;
font-size: var(--fs-base);
cursor: pointer;
list-style: none;
transition: background var(--t);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: var(--color-surface-2); }
.faq__item summary::after {
content: "+";
font-family: var(--font-mono);
font-size: var(--fs-xl);
line-height: 1;
color: var(--color-accent);
flex-shrink: 0;
}
.faq__item[open] summary::after { content: "−"; }
.faq__answer {
padding: 0 var(--space-5) var(--space-5);
color: var(--color-text-muted);
font-size: var(--fs-sm);
line-height: var(--lh-base);
}
/* --- Newsletter / hervorgehobene Box ---------------------------------- */
.newsletter {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-8) var(--space-6);
text-align: center;
position: relative;
overflow: hidden;
}
.newsletter::before {
content: "";
position: absolute; inset: 0;
background: var(--gradient-glow);
pointer-events: none;
}
.newsletter > * { position: relative; }
.newsletter h2 { margin-bottom: var(--space-3); }
.newsletter p { color: var(--color-text-muted); max-width: 480px; margin: 0 auto var(--space-6); }
/* --- CTA-Band ---------------------------------------------------------- */
.cta-band {
background: var(--gradient-brand);
border-radius: var(--radius-lg);
padding: var(--space-8) var(--space-6);
text-align: center;
color: var(--color-text-dark);
}
.cta-band h2 { color: var(--color-text-dark); }
.cta-band p { color: rgba(13,13,13,0.82); max-width: 520px; margin: 0 auto var(--space-6); font-weight: 500; }
.cta-band .btn--primary { background: var(--color-text-dark); color: var(--color-text); box-shadow: none; }
.cta-band .btn--primary:hover { background: #000; color: #fff; }
.cta-band .btn--ghost { box-shadow: inset 0 0 0 2px rgba(13,13,13,0.35); color: var(--color-text-dark); }
.cta-band .btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--color-text-dark); background: rgba(13,13,13,0.08); color: var(--color-text-dark); }
/* 9. ====================== SEITEN-SPEZIFISCH ============================= */
/* --- Generischer Seiten-Header (Subpages) ----------------------------- */
.page-header {
position: relative;
padding-block: var(--space-8) var(--space-7);
background: var(--gradient-glow), var(--color-bg);
border-bottom: 1px solid var(--color-border-soft);
overflow: hidden;
}
.page-header::before {
content: "";
position: absolute; inset: 0;
background-image: var(--texture-dots);
background-size: var(--texture-dots-size);
-webkit-mask-image: radial-gradient(75% 100% at 50% 0%, #000 0%, transparent 80%);
mask-image: radial-gradient(75% 100% at 50% 0%, #000 0%, transparent 80%);
pointer-events: none;
}
.page-header > * { position: relative; }
.page-header h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); }
.page-header p { color: var(--color-text-muted); font-size: var(--fs-lg); max-width: 62ch; }
.page-header--center { text-align: center; }
.page-header--center p { margin-inline: auto; }
/* --- About ------------------------------------------------------------- */
.about-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; }
.about-hero img { border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.values-list { display: grid; gap: var(--space-4); }
.value-item { display: flex; gap: var(--space-4); }
.value-item .check,
.value-item .cross {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: var(--radius-pill);
background: rgba(52,211,153,0.15);
color: var(--color-success);
display: grid; place-items: center;
font-weight: 900;
font-size: var(--fs-sm);
}
.value-item .cross { background: rgba(248,113,113,0.15); color: var(--color-danger); }
.value-item h4 { margin-bottom: var(--space-1); font-size: var(--fs-base); }
.value-item p { font-size: var(--fs-sm); margin: 0; }
/* Faktenliste im mono-Look ("Datenblatt" zur Person) */
.factsheet {
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
}
.factsheet__row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-1);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border-soft);
}
.factsheet__row:last-child { border-bottom: 0; }
.factsheet__key {
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-faint);
}
.factsheet__val { font-size: var(--fs-sm); color: var(--color-text); }
/* --- Angebote / Pricing ------------------------------------------------ */
.pricing {
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
height: 100%;
position: relative;
}
.pricing--featured { border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
.pricing__flag {
position: absolute;
top: calc(-1 * var(--space-3));
left: var(--space-6);
background: var(--gradient-primary);
color: var(--color-text-dark);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 700;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
}
.pricing__name { font-size: var(--fs-xl); font-weight: 800; margin-bottom: var(--space-2); }
.pricing__price { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
.pricing__price strong {
font-size: var(--fs-3xl);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.pricing__price strong.is-text { font-size: var(--fs-xl); }
.pricing__price span { color: var(--color-text-muted); font-size: var(--fs-sm); }
.pricing__tax { font-size: var(--fs-xs); color: var(--color-text-faint); margin-bottom: var(--space-5); }
.pricing__desc { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.pricing__features { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); flex-grow: 1; }
.pricing__features li { display: flex; gap: var(--space-3); font-size: var(--fs-sm); align-items: flex-start; }
.pricing__features li::before { content: "✓"; color: var(--color-success); font-weight: 900; flex-shrink: 0; }
.pricing .btn { margin-top: auto; }
/* --- BLOG-INDEX -------------------------------------------------------
Bewusst KEINE Bildkacheln mehr, sondern eine Index-Liste wie in einem
Fachjournal: Datum (mono) · Titel · Anriss · Evidenzstufe.
Das ist der "nerdige" Teil – bleibt aber durch große Titel und viel
Zeilenabstand für Ungeübte gut scanbar.
---------------------------------------------------------------------- */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.filter-btn {
padding: var(--space-2) var(--space-4);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: 0.04em;
color: var(--color-text-muted);
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
cursor: pointer;
transition: all var(--t-fast);
}
.filter-btn:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.filter-btn.is-active {
background: var(--gradient-primary);
color: var(--color-text-dark);
border-color: transparent;
font-weight: 600;
}
.post-index { border-top: 1px solid var(--color-border-soft); }
.recommendation-groups {
display: grid;
gap: var(--space-8);
}
.recommendation-category {
display: grid;
gap: var(--space-4);
}
.recommendation-category__head {
display: grid;
gap: var(--space-2);
padding-left: var(--space-4);
border-left: 2px solid var(--color-primary);
}
.recommendation-category__label {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-primary);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.recommendation-category__head h2 {
margin: 0;
font-size: var(--fs-2xl);
}
.recommendation-category__items {
border-top-color: var(--color-border);
}
.recommendation-product__media {
align-self: start;
display: grid;
place-items: center;
width: min(100%, 180px);
aspect-ratio: 1;
margin: 0;
padding: var(--space-3);
background: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-sm);
overflow: hidden;
}
.recommendation-product__media img {
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
object-fit: contain;
}
/* Für Logos, die auf Transparenz/Weiß ausgelegt sind und auf der dunklen
--color-surface sonst kaum zu erkennen wären (z.B. Vitaminversand24). */
.recommendation-product__media--white-bg {
background: #fff;
}
/* Das Brain.fm-Motiv füllt den Rahmen bis an die seitlichen Ränder aus. */
.recommendation-product__media--brain-fm {
padding: 0;
}
.recommendation-product__media--brain-fm img {
object-fit: cover;
}
/* Ganze Karte klickbar über .post-row h3 a::after (inset:0 auf das
position:relative .post-row) – Bild und Beschreibung liegen automatisch
mit im Overlay. Der Button bleibt trotzdem eigenständig klickbar, weil er
einen eigenen Stacking-Context über dem Overlay bekommt. */
.recommendation-category__items .stack-actions {
position: relative;
z-index: 1;
}
.post-row {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
padding: var(--space-6) 0 var(--space-6) var(--space-4);
border-bottom: 1px solid var(--color-border-soft);
border-left: 2px solid transparent;
transition: border-color var(--t), background var(--t);
}
.post-row:hover {
border-left-color: var(--color-primary);
background: linear-gradient(90deg, rgba(201,212,92,0.06), transparent 60%);
}
.post-row__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-text-faint);
}
.post-row__meta-label {
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.post-row__meta time { font-variant-numeric: tabular-nums; }
.post-row__sep { opacity: 0.4; }
.post-row h3 { font-size: var(--fs-xl); margin: 0; }
.post-row h3 a { color: var(--color-text); }
.post-row h3 a:hover { color: var(--color-primary); }
/* ganze Zeile klickbar machen, ohne die Semantik zu zerstören */
.post-row h3 a::after { content: ""; position: absolute; inset: 0; }
.post-row p { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; max-width: 68ch; }
.post-row__more {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-accent);
letter-spacing: 0.04em;
}
/* Kompakte Variante für die Startseite (neueste Artikel) */
.post-row--compact { padding-block: var(--space-5); }
.post-row--compact h3 { font-size: var(--fs-lg); }
.is-hidden { display: none !important; }
/* --- ARTIKEL-LAYOUT ---------------------------------------------------- */
/* Zweispaltig ab Desktop: Inhaltsverzeichnis links, Text rechts */
.article-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
align-items: start;
}
.article { max-width: var(--container-read); min-width: 0; }
.article__back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: 0.06em;
color: var(--color-text-faint);
margin-bottom: var(--space-5);
}
.article__back:hover { color: var(--color-primary); }
.article__header { margin-bottom: var(--space-6); }
.article__header h1 {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: 700;
letter-spacing: -0.015em;
margin: var(--space-4) 0;
}
.article__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-text-faint);
}
.article__meta time { font-variant-numeric: tabular-nums; }
.article__lead {
font-family: var(--font-serif);
font-size: var(--fs-lg);
line-height: 1.55;
color: var(--color-text-read);
margin-top: var(--space-5);
}
.article__cover {
width: 100%;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
margin-bottom: var(--space-6);
}
/* --- "Auf einen Blick" – Kurzfassung ganz oben ------------------------- */
/* Wichtigstes Element für Leser, die nicht 15 Minuten Zeit haben. */
.keyfacts {
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius);
background: var(--color-surface);
padding: var(--space-5);
margin-bottom: var(--space-7);
}
.keyfacts__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-accent);
margin-bottom: var(--space-4);
}
.keyfacts ul { display: grid; gap: var(--space-3); }
.keyfacts li {
display: flex;
gap: var(--space-3);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--color-text-read);
}
.keyfacts li::before {
content: "→";
font-family: var(--font-mono);
color: var(--color-accent);
flex-shrink: 0;
}
/* --- Inhaltsverzeichnis (sticky, Desktop) ----------------------------- */
.toc {
display: none; /* mobil: siehe .toc--inline */
position: sticky;
top: calc(var(--header-h) + var(--space-5));
font-size: var(--fs-sm);
max-height: calc(100vh - var(--header-h) - var(--space-8));
overflow-y: auto;
}
.toc__title {
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-faint);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border-soft);
}
.toc ol { display: grid; gap: var(--space-1); counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
display: flex;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-left: 2px solid transparent;
color: var(--color-text-muted);
font-size: var(--fs-sm);
line-height: 1.4;
transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.toc a::before {
content: counter(toc, decimal-leading-zero);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-text-faint);
flex-shrink: 0;
}
.toc a:hover { color: var(--color-text); background: rgba(255,255,255,0.03); }
.toc a.is-current {
color: var(--color-primary);
border-left-color: var(--color-primary);
background: rgba(201,212,92,0.07);
}
.toc a.is-current::before { color: var(--color-primary); }
/* Mobile: aufklappbares Inhaltsverzeichnis über dem Text */
.toc--inline {
display: block;
position: static;
max-height: none;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
margin-bottom: var(--space-6);
overflow: hidden;
}
.toc--inline > summary {
padding: var(--space-4) var(--space-5);
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-muted);
cursor: pointer;
list-style: none;
}
.toc--inline > summary::-webkit-details-marker { display: none; }
.toc--inline ol { padding: 0 var(--space-4) var(--space-4); }
/* --- Lese-Typografie für den Artikel-Body ----------------------------- */
.prose {
font-family: var(--font-serif);
font-size: var(--fs-read);
line-height: var(--lh-read);
color: var(--color-text-read);
}
.prose > * + * { margin-top: var(--space-5); }
/* Überschriften bleiben in der Sans – klarer Kontrast zum Serifen-Fließtext */
.prose h2, .prose h3 {
font-family: var(--font-sans);
color: var(--color-text);
scroll-margin-top: calc(var(--header-h) + var(--space-6));
}
.prose h2 {
font-size: var(--fs-2xl);
margin-top: var(--space-8);
margin-bottom: var(--space-3);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border-soft);
}
.prose h3 { font-size: var(--fs-xl); margin-top: var(--space-7); margin-bottom: var(--space-2); }
.prose p { color: var(--color-text-read); }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--color-primary); }
.prose strong { color: var(--color-text); font-weight: 700; }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li { margin-top: var(--space-2); }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose ul li::marker { color: var(--color-text-faint); }
.prose ol li::marker { color: var(--color-text-faint); }
.prose blockquote {
border-left: 3px solid var(--color-primary);
background: var(--color-surface);
border-radius: 0 var(--radius) var(--radius) 0;
padding: var(--space-4) var(--space-5);
color: var(--color-text);
font-style: italic;
}
.prose figure { margin: var(--space-6) 0; }
.prose figure img { border-radius: var(--radius); border: 1px solid var(--color-border); }
.prose figcaption {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-text-faint);
text-align: center;
margin-top: var(--space-3);
line-height: 1.5;
}
.prose hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }
.prose code {
font-family: var(--font-mono);
font-size: 0.85em;
background: var(--color-surface-2);
padding: 0.15em 0.4em;
border-radius: 6px;
}
.prose pre {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-5);
overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }
/* Datentabelle (Studienübersichten) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: var(--fs-sm);
line-height: var(--lh-base);
}
.prose th, .prose td {
text-align: left;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-soft);
vertical-align: top;
}
.prose th {
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-faint);
border-bottom-color: var(--color-border);
white-space: nowrap;
}
.prose td { color: var(--color-text-muted); }
.prose tbody tr:hover td { background: rgba(255,255,255,0.02); }
/* --- Callouts / Hinweisboxen im Artikel -------------------------------- */
.callout {
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius);
background: var(--color-surface);
padding: var(--space-5);
color: var(--color-text-muted);
}
.callout__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: var(--space-3);
}
.callout p:last-child { margin-bottom: 0; }
.callout--warn { border-left-color: var(--color-warn); }
.callout--warn .callout__title { /* Verlaufsschrift, siehe Abschnitt 3 */ }
.callout--stop { border-left-color: var(--color-danger); background: linear-gradient(rgba(248,113,113,0.05), rgba(248,113,113,0.05)), var(--color-surface); }
.callout--stop .callout__title { color: var(--color-danger); }
.callout--disclaimer {
border-left-color: var(--color-warn);
background: linear-gradient(rgba(228,206,69,0.06), rgba(228,206,69,0.06)), var(--color-surface);
padding: var(--space-3) var(--space-4);
font-size: var(--fs-sm);
line-height: 1.55;
}
.callout--disclaimer .callout__title {
color: var(--color-warn);
margin-bottom: var(--space-2);
}
.callout--disclaimer p { margin: 0; }
.callout--disclaimer p + p { margin-top: var(--space-2); }
.callout--intro-disclaimer { margin-bottom: var(--space-7); }
.callout--check { border-left-color: var(--color-success); }
.callout--check .callout__title { color: var(--color-success); }
/* Kurzer Partnerhinweis auf der Supplement-Seite: sichtbar vor der Liste,
aber bewusst deutlich zurückhaltender als ein inhaltlicher Warnhinweis. */
.supplements-disclosure {
padding-block: var(--space-2);
border-block: 1px solid var(--color-border-soft);
}
.supplements-disclosure p {
margin: 0;
color: var(--color-text-faint);
font-size: var(--fs-xs);
}
.supplements-disclosure strong:first-child {
color: var(--color-text-muted);
font-family: var(--font-mono);
font-size: 0.95em;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.supplements-disclosure a { color: var(--color-text-muted); }
.supplements-disclosure a:hover { color: var(--color-primary); }
/* Bestehende .disclosure-Klasse verhält sich wie ein Callout */
.disclosure {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius);
padding: var(--space-5);
font-family: var(--font-sans);
font-size: var(--fs-sm);
line-height: var(--lh-base);
color: var(--color-text-muted);
margin-bottom: var(--space-7);
}
/* --- Fußnoten & Quellenverzeichnis ------------------------------------ */
/* Verwendung im Text: 1 */
.ref { font-family: var(--font-mono); font-size: 0.62em; line-height: 0; }
.ref a {
text-decoration: none;
color: var(--color-accent);
padding: 0.2em 0.4em;
border-radius: 4px;
background: rgba(45,212,240,0.1);
transition: background var(--t-fast);
}
.ref a:hover { background: rgba(45,212,240,0.25); color: var(--color-text); }
/* Angesprungene Quelle kurz hervorheben */
.sources li:target { background: rgba(201,212,92,0.09); border-radius: var(--radius-sm); }
.sources {
font-family: var(--font-sans);
font-size: var(--fs-sm);
line-height: 1.6;
counter-reset: src;
display: grid;
gap: var(--space-3);
padding-left: 0 !important;
}
.sources li {
counter-increment: src;
position: relative;
color: var(--color-text-muted);
padding: var(--space-2) var(--space-2) var(--space-2) calc(2.4em + var(--space-2));
list-style: none !important;
margin-top: 0;
}
/* Nummer per absoluter Position aus dem Fluss genommen: Zitationstext und
der abschließende .backref-Link bleiben dadurch EIN normaler Inline-Fluss
(kein Grid mit nur 2 Spalten für eigentlich 3 Items – Text-Knoten und der
zählten als separate Grid-Items und der Link wurde in
eine neue Zeile in die 2,4em breite erste Spalte gezwungen und dort
Wort für Wort umgebrochen). */
.sources li::before {
content: "[" counter(src) "]";
position: absolute;
left: var(--space-2);
top: var(--space-2);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-text-faint);
}
.sources a { word-break: break-word; }
.sources .backref { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-faint); margin-left: var(--space-2); }
/* CTA-Block am Artikel-Ende */
.article__cta {
margin-top: var(--space-8);
padding-top: var(--space-7);
border-top: 1px solid var(--color-border);
}
/* --- Legal (Impressum / Datenschutz) ---------------------------------- */
.legal { max-width: var(--container-narrow); }
.legal h2 { margin-top: var(--space-7); font-size: var(--fs-xl); }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { margin-top: var(--space-5); font-size: var(--fs-lg); }
.legal p, .legal li { color: var(--color-text-muted); font-size: var(--fs-sm); }
.legal ul { list-style: disc; padding-left: var(--space-5); margin-bottom: var(--space-4); }
.legal address { font-style: normal; color: var(--color-text); margin-bottom: var(--space-4); }
.legal .notice {
background: rgba(201,212,92,0.09);
border: 1px solid rgba(201,212,92,0.28);
border-radius: var(--radius);
padding: var(--space-5);
color: var(--color-text);
margin-bottom: var(--space-6);
}
/* --- Kontaktformular (Netlify Forms) ----------------------------------- */
.form-field { margin-bottom: var(--space-5); }
.form-field label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--color-text);
}
.form-field input,
.form-field textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-base);
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--color-accent); }
.form-field textarea { resize: vertical; min-height: 9rem; }
.form-field--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Datenschutzhinweis direkt über dem Absenden-Button (Art. 13 DSGVO). */
.form-hint {
margin-bottom: var(--space-5);
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.form-status {
margin-top: var(--space-5);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius);
background: rgba(52,211,153,0.1);
border: 1px solid rgba(52,211,153,0.3);
color: var(--color-text);
}
/* --- Rechner (rechner.html) -------------------------------------------
Die Formularelemente hier (select, number, checkbox) kamen auf der
Seite vorher nicht vor – das Kontaktformular nutzt nur text/email/
textarea. Ohne diese Regeln rendert der Browser sie in Systemfarben,
und auf dem dunklen Hintergrund wird ein Select dann weiß auf weiß.
Deshalb ist appearance: none plus eigener Pfeil nötig, nicht Kosmetik.
---------------------------------------------------------------------- */
.calc {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-6);
}
/* Umschalter direkt vor dem Plotter: zwei gleichwertige Ansichten mit
einer wandernden, klar abgegrenzten aktiven Fläche. */
.plotter-mode {
display: flex;
justify-content: center;
margin: calc(var(--space-5) * -1) 0 var(--space-5);
}
.plotter-mode__buttons {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
width: min(100%, 28rem);
padding: 0.2rem;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-bg-alt);
}
.plotter-mode__buttons::before {
position: absolute;
inset: 0.2rem auto 0.2rem 0.2rem;
width: calc(50% - 0.2rem);
border-radius: 999px;
background: linear-gradient(135deg, rgba(245, 197, 24, 0.3) 0%, rgba(201, 212, 92, 0.28) 100%);
box-shadow: inset 0 0 0 1px rgba(201, 212, 92, 0.32), 0 1px 3px rgba(0, 0, 0, 0.28);
content: "";
transition: transform 180ms ease;
}
.plotter-mode__buttons.is-vergleich::before { transform: translateX(100%); }
.plotter-mode__buttons::after {
position: absolute;
z-index: 1;
top: 0.6rem;
bottom: 0.6rem;
left: 50%;
width: 1px;
background: var(--color-border);
content: "";
}
.plotter-mode__buttons .btn {
position: relative;
z-index: 2;
min-width: 0;
padding: 0.65rem var(--space-4);
border: 0;
border-radius: 999px;
background: transparent;
color: var(--color-text-muted);
font-size: var(--fs-sm);
text-align: center;
box-shadow: none;
}
.plotter-mode__buttons .btn:hover { background: transparent; color: var(--color-text); }
.plotter-mode__buttons .btn.is-active {
color: var(--color-text);
font-weight: 700;
pointer-events: none;
}
.plotter-mode__label--compact { display: none; }
/* Auf schmalen Handys bleiben die beiden Optionen gleich breit und gut
antippbar. Die kurzen Labels verhindern ein Überlappen der langen Begriffe. */
@media (max-width: 480px) {
.plotter-mode__buttons .btn {
min-height: 2.8rem;
padding-inline: var(--space-2);
}
.plotter-mode__label--wide { display: none; }
.plotter-mode__label--compact { display: inline; }
}
.profile-tool__step {
position: relative;
padding: var(--space-5) 0;
border-bottom: 1px solid var(--color-border-soft);
}
.profile-tool__step:first-child { padding-top: 0; }
.profile-tool__step--context { border-bottom: 0; }
.profile-tool__stephead {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.profile-tool__number {
display: grid;
flex: 0 0 1.6rem;
width: 1.6rem;
height: 1.6rem;
place-items: center;
border-radius: 50%;
background: rgba(181, 221, 92, 0.14);
color: var(--color-primary);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 700;
}
.profile-tool__stephead h2 {
margin: 0 0 0.15rem;
font-size: var(--fs-base);
line-height: var(--lh-tight);
}
.profile-tool__stephead p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
.profile-tool__step .calc__controls { margin-bottom: 0; }
.profile-tool__disclaimer {
margin: var(--space-5) 0 0;
padding: var(--space-3) var(--space-4);
border-left: 2px solid var(--color-border);
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
.profile-tool__step--context > .calc__note { margin-bottom: var(--space-3); }
.profile-tool__step--context .switch {
margin-bottom: var(--space-2);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
}
.profile-tool__step--context .switch:last-child { margin-bottom: 0; }
.vergleich-profil {
margin: 0 0 var(--space-5);
padding: var(--space-4);
border: 1px solid var(--color-border-soft);
border-left: 3px solid var(--profil-farbe, var(--color-accent));
border-radius: var(--radius);
background: linear-gradient(90deg, color-mix(in srgb, var(--profil-farbe, var(--color-accent)) 7%, transparent), var(--color-bg-alt) 34%);
}
.vergleich-profil__head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.vergleich-profil__marker {
flex: 0 0 auto;
padding: 0.25rem 0.45rem;
border-radius: 999px;
color: #0d0d0d;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.03em;
}
.vergleich-profil__wahl { flex: 1 1 14rem; }
.vergleich-profil__label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--color-text);
}
.vergleich-profil__name {
margin: 0;
color: var(--color-text-muted);
font-weight: 600;
}
.vergleich-profil .dose-row { margin-bottom: var(--space-3); }
.vergleich-profil__details {
margin: 0 0 var(--space-4);
border-top: 1px solid var(--color-border-soft);
}
.vergleich-profil__details summary {
padding: var(--space-3) 0;
color: var(--color-text-muted);
font-size: var(--fs-sm);
cursor: pointer;
}
.vergleich-profil__details .calc__note { margin: 0 0 var(--space-3); }
.vergleich-interpretation {
margin: var(--space-5) 0;
padding: 0 var(--space-4);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
}
.vergleich-interpretation .factsheet { margin-bottom: var(--space-4); }
.calc__controls { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); }
.calc__progress {
margin-bottom: var(--space-5);
font-family: var(--font-mono);
font-size: var(--fs-xl);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-primary);
}
.calc__question {
grid-column: 1 / -1;
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.calc__question legend {
width: 100%;
margin-bottom: var(--space-4);
padding: 0;
font-family: var(--font-sans);
font-size: var(--fs-xl);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: -0.02em;
color: var(--color-text-read);
}
.calc__answers { display: grid; gap: var(--space-3); }
.calc__answer {
width: 100%;
min-height: 3.5rem;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--fs-base);
font-weight: 600;
line-height: var(--lh-base);
text-align: left;
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.calc__answer:hover { border-color: var(--color-primary); background: var(--color-surface-2); color: var(--color-text); }
.calc__answer.is-selected { border-color: var(--color-primary); background: rgba(181, 221, 92, 0.1); color: var(--color-primary); }
.calc__answer:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.calc__field label,
.calc__legend {
display: block;
margin-bottom: var(--space-2);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--color-text);
}
/* Die Einheit gehört zur Halbwertszeit-Beschriftung und darf nicht allein
in eine zweite Zeile rutschen. */
label[for="p-hwz"] { white-space: nowrap; }
.calc__field select,
.calc__field input[type="number"],
.calc__field input[type="text"][inputmode="decimal"],
.dose-row input[type="number"],
.dose-row input[type="text"][inputmode="decimal"] {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-base);
font-variant-numeric: tabular-nums;
}
.calc__field select {
appearance: none;
-webkit-appearance: none;
padding-right: var(--space-7);
/* Pfeil als data-URI: netlify.toml erlaubt img-src 'self' data:,
externe Bilder waeren stumm blockiert. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A8ACB6' stroke-width='2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
}
.calc__field select:focus,
.calc__field input:focus,
.dose-row input:focus { outline: none; border-color: var(--color-accent); }
.calc__field option { background: var(--color-surface); color: var(--color-text); }
.calc__subhead {
margin-top: var(--space-6);
margin-bottom: var(--space-3);
font-size: var(--fs-lg);
}
.calc__result-title {
margin-top: 0;
margin-bottom: var(--space-4);
font-size: var(--fs-2xl);
color: var(--color-primary);
}
.calc__note {
font-size: var(--fs-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-4);
max-width: 68ch;
}
.calc__affiliate-note {
margin-bottom: var(--space-5);
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--color-text-faint);
}
.calc__affiliate-code {
display: inline-flex;
align-items: center;
margin-inline: 0.15em;
padding: 0.12em 0.45em;
border: 1px solid rgba(201, 212, 92, 0.7);
border-radius: var(--radius-sm);
background: rgba(201, 212, 92, 0.08);
color: var(--color-primary);
font-family: var(--font-mono);
font-size: inherit;
line-height: 1.2;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.calc__affiliate-code:hover,
.calc__affiliate-code:focus-visible {
border-color: var(--color-primary);
background: rgba(201, 212, 92, 0.16);
color: var(--color-text);
}
.calc__affiliate-code.is-copied { border-color: var(--color-success); background: rgba(52, 211, 153, 0.12); color: var(--color-success); }
.calc__result {
padding: var(--space-5);
background: var(--color-bg-alt);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
margin-bottom: var(--space-5);
}
.calc__result--product { padding: 0; overflow: hidden; }
.calc__product-link {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: var(--space-4);
align-items: center;
padding: var(--space-4);
color: var(--color-text);
text-decoration: none;
}
.calc__product-link:hover { color: var(--color-text); background: var(--color-surface); }
.calc__product-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.calc__product-image {
width: 96px;
height: 96px;
object-fit: contain;
}
.calc__product-content { min-width: 0; }
.calc__product-title { font-size: var(--fs-lg); margin: 0; }
.calc__product-cta {
display: inline-block;
margin-top: var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-primary);
}
.calc__result-key {
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-faint);
margin-bottom: var(--space-2);
}
.calc__result-value {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--fs-2xl);
line-height: var(--lh-tight);
color: var(--color-text);
}
.calc__result-sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.calc__result .calc__note { margin-top: var(--space-4); margin-bottom: 0; }
.calc__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.calc__table th {
text-align: left;
padding: var(--space-3);
border-bottom: 1px solid var(--color-border);
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-faint);
font-weight: 400;
}
.calc__table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border-soft); vertical-align: top; }
.calc__table tr:last-child td { border-bottom: 0; }
.calc__table-sub { font-size: var(--fs-xs); color: var(--color-text-faint); margin-top: 2px; }
/* --- Schalter mit Evidenz-Kennzeichnung --- */
.switch {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-2) var(--space-3);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-border-soft);
}
.switch:last-child { border-bottom: 0; }
.switch input[type="checkbox"] {
width: 1.15rem;
height: 1.15rem;
margin-top: 0.15rem;
accent-color: var(--color-primary);
cursor: pointer;
}
.switch label { font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); cursor: pointer; }
.switch__evidenz {
display: inline-block;
margin-left: var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 400;
color: var(--color-success);
}
.switch__evidenz--schwach { color: var(--color-warn); }
.switch__hilfe {
grid-column: 2;
font-size: var(--fs-sm);
color: var(--color-text-muted);
margin: 0;
max-width: 68ch;
}
/* --- Einnahme-Zeilen --- */
.dose-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.dose-row__label { grid-column: 1 / -1; font-size: var(--fs-sm); font-weight: 700; }
.dose-row__field { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.dose-row__field > label { font-size: var(--fs-sm); color: var(--color-text-muted); }
.dose-row__unit { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-text-faint); }
.dose-row__remove {
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
width: 2.2rem;
height: 2.2rem;
font-size: var(--fs-lg);
line-height: 1;
cursor: pointer;
}
.dose-row__remove:hover { color: var(--color-danger); border-color: var(--color-danger); }
.dose-row__remove-spacer { width: 2.2rem; }
/* --- Plot ---
Das SVG hat width="100%" und ein viewBox; die globale Regel
img, svg { height: auto } uebernimmt dann das Seitenverhaeltnis. */
.plot {
background: var(--color-bg-alt);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
padding: var(--space-4) var(--space-3) var(--space-3);
margin-bottom: var(--space-4);
}
.plot__svg { touch-action: pan-y; }
.plot__grid { stroke: var(--color-border-soft); stroke-width: 1; }
.plot__axis { stroke: var(--color-border); stroke-width: 1; }
.plot__area { fill: rgba(45,212,240,0.10); stroke: none; }
.plot__line { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linejoin: round; }
.plot__line--vergleich { stroke-width: 2.75; }
.plot__dose { stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.7; }
.plot__cursor { stroke: var(--color-text-muted); stroke-width: 1; }
.plot__cursor-dot { fill: var(--color-primary); }
.plot__tick {
fill: var(--color-text-faint);
font-family: var(--font-mono);
font-size: 12px;
text-anchor: middle;
}
.plot__tick--y { text-anchor: end; }
.plot__axis-label {
fill: var(--color-text-faint);
font-family: var(--font-mono);
font-size: 11px;
text-anchor: middle;
}
.plot__ablesen {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--fs-sm);
color: var(--color-primary);
min-height: 1.5em;
text-align: center;
}
.plot__legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin: var(--space-3) var(--space-2) 0;
padding: 0;
list-style: none;
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
.plot__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.plot__legend-swatch { width: 0.9rem; height: 0.2rem; border-radius: 999px; }
.calc details summary {
cursor: pointer;
font-size: var(--fs-sm);
color: var(--color-text-muted);
padding: var(--space-3) 0;
}
.calc details[open] summary { margin-bottom: var(--space-3); }
@media (min-width: 640px) {
.calc { padding: var(--space-6); }
.calc__controls { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); }
.calc__answers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc__controls--drei { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr); }
.dose-row { grid-template-columns: 160px 1fr 1fr auto; align-items: center; }
.dose-row__label { grid-column: auto; margin: 0; }
.dose-row__field { flex-direction: row; align-items: center; }
}
/* 11. ====================== ANIMATIONEN ================================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
will-change: opacity, transform;
}
.fade-in.is-visible { opacity: 1; transform: none; }
.fade-in[data-delay="1"] { transition-delay: 0.07s; }
.fade-in[data-delay="2"] { transition-delay: 0.14s; }
.fade-in[data-delay="3"] { transition-delay: 0.21s; }
.fade-in[data-delay="4"] { transition-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.fade-in { opacity: 1; transform: none; transition: none; }
.btn:hover, .card:hover, .pillar:hover, .logo-strip__item:hover { transform: none; }
* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* 12. ====================== RESPONSIVE =================================== */
/* ≥ 560px */
@media (min-width: 560px) {
.trustbar { grid-template-columns: repeat(4, 1fr); }
.factsheet__row { grid-template-columns: 180px 1fr; gap: var(--space-4); align-items: baseline; }
}
/* ≥ 640px – Tablets / große Phones */
@media (min-width: 640px) {
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.compare { grid-template-columns: repeat(2, 1fr); }
.logo-strip { grid-template-columns: repeat(3, 1fr); }
.footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
.footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
.partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ≥ 960px – Desktop: echte Navi sichtbar, Burger weg */
@media (min-width: 960px) {
:root { --fs-3xl: 3.25rem; }
.nav__toggle { display: none; }
.nav__panel { display: none; }
.nav__links { display: flex; align-items: center; gap: var(--space-5); }
.nav__cta { display: inline-flex; }
.nav__right { display: flex; align-items: center; gap: var(--space-6); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.logo-strip { grid-template-columns: repeat(5, 1fr); }
.hero__grid { grid-template-columns: 1.4fr 0.6fr; gap: var(--space-5); }
.hero__media { justify-self: end; }
.hero__sub { max-width: 46em; }
.partners__disclosure { white-space: nowrap; }
.about-hero { grid-template-columns: 0.85fr 1.15fr; }
.footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
.section { padding-block: var(--space-9); }
/* Artikel: Inhaltsverzeichnis links neben den Text */
.article-layout { grid-template-columns: 230px minmax(0, 1fr); gap: var(--space-8); }
.toc { display: block; }
.toc--inline { display: none; }
/* Blog-Index: Datum links, Inhalt rechts */
.post-row { grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-6); padding-left: var(--space-5); }
.post-row__meta { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-top: 0.35em; }
.post-row__sep { display: none; }
.post-row__body { display: grid; gap: var(--space-3); }
}
/* ≥ 1200px – Großbild Feinschliff */
@media (min-width: 1200px) {
.hero { padding-block: var(--space-9); }
.article-layout { grid-template-columns: 250px minmax(0, 1fr); }
}
/* ============================================================
SOFT-LAUNCH 2026-08-20 – temporäre Korrekturen
Der Footer hat aktuell nur drei Spalten (Marke, Seiten,
Rechtliches); die Spalte „Angebot“ ist geparkt. Ohne diese
Regel bliebe auf dem Desktop eine leere vierte Spalte stehen.
Beim Wiederherstellen der Angebote diesen Block komplett
löschen – siehe SOFT-LAUNCH.md.
============================================================ */
@media (min-width: 960px) {
.footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}