/* ============================================================================
Schritt für Schritt fit — Stylesheet der Coming-soon-Seite
============================================================================
AUFBAU DIESER DATEI (in dieser Reihenfolge, weil später Stehendes gewinnt)
BLOCK 1 Schriften lokal eingebunden, nichts von Google
BLOCK 2 Farben 1:1 aus dem Design-System
BLOCK 3 Schrift & Maße Größen, Abstände, Ecken, Bewegung
BLOCK 4 Grundregeln Element-Vorgaben + Hilfsklassen (u-...)
BLOCK 5 Bausteine Knopf, Karte, Formularfeld (sfsf-...)
BLOCK 6 Seiten-Abschnitte die Abschnitte dieser Seite (cs-...)
BLOCK 7 Rechtsseiten Impressum und Datenschutz
Blöcke 2 bis 5 stammen unverändert aus dem Design-System
(Ordner "Design/Schritt für Schritt fit — Design System"). Wenn dort etwas
geändert wird, gehört es auch hier herein. Der Ordner wird nur gelesen.
ZWEI REGELN, DIE SCHON EINMAL WEHGETAN HABEN
1. Schriftfarben von Knöpfen NIE über verschachtelte Variablen setzen.
Reißt die Kette beim Neuzeichnen, erbt der Text Weiß — weiß auf rot ist
dann kaum lesbar. Deshalb steht die Farbe unten direkt als #F5F5F5 da,
plus -webkit-text-fill-color als zweite Absicherung, und "color" ist
aus der transition-Liste heraus.
2. Farben immer über Klassen setzen, nie über Element-Namen wie "div span".
Sonst überschreiben allgemeine Regeln später die genauen.
========================================================================= */
/* ==========================================================================
BLOCK 1 — SCHRIFTEN (lokal)
--------------------------------------------------------------------------
Beide Schriften liegen als Datei in assets/fonts/ und werden NICHT von
Google nachgeladen. Grund: Beim Nachladen wandert die IP-Adresse jedes
Besuchers zu Google — in Österreich datenschutzrechtlich heikel.
Je Schrift gibt es zwei Dateien: "latin" (normale Zeichen inkl. Umlauten)
und "latin-ext" (seltene Sonderzeichen). Der Browser lädt nur, was er
tatsächlich braucht.
Montserrat ist eine "variable" Schrift: EINE Datei deckt alle Stärken von
400 bis 700 ab. Deshalb steht dort "font-weight: 400 700" statt einer Zahl.
Bangers gibt es nur in einer einzigen Stärke.
========================================================================== */
@font-face {
font-family: 'Bangers';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/bangers-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bangers';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/bangers-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../assets/fonts/montserrat-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../assets/fonts/montserrat-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==========================================================================
BLOCK 2 — FARBEN
--------------------------------------------------------------------------
Aus "Design System/tokens/colors.css", Wert für Wert übernommen.
Grundsatz der Marke: NIE reines Schwarz, NIE reines Weiß.
Der Hintergrund ist #0B0B0B, die Schrift #F5F5F5. Das wirkt weicher
und hochwertiger als 000 auf FFF.
Es gibt genau EINE Akzentfarbe: Blut-Rot #C1121F. Sie ist ausschließlich
für Knöpfe, aktive Zustände und Hervorhebungen da — nie flächig.
Das "Silber" der Marke sind die Grautöne --gray-400 und --gray-500.
========================================================================== */
:root {
/* --- Dunkle Flächen ------------------------------------------------- */
--ink-900: #0B0B0B; /* Seitenhintergrund */
--ink-850: #121212; /* abgesetztes Band, Footer */
--ink-800: #161616; /* Kartenfläche */
--ink-750: #1C1C1C; /* Kartenfläche, zweite Variante */
--ink-700: #242424; /* Fläche beim Drüberfahren, Eingabefelder */
--ink-600: #333333; /* feine Trennlinie */
--ink-500: #444444; /* kräftige Linie, Rahmen */
/* --- Helle Flächen und Text ---------------------------------------- */
--paper-100: #F5F5F5; /* Schriftfarbe auf Dunkel, heller Bandhintergrund */
--paper-200: #ECECEC;
--paper-300: #DEDEDE;
--paper-400: #CFCFCF;
/* --- Silbertöne ----------------------------------------------------- */
--gray-400: #B4B4B4; /* gedämpfter Text — das "Silber" der Marke */
--gray-500: #8A8A8A; /* schwacher Text, Platzhalter im Formular */
--gray-600: #6E6E6E; /* deaktiviert */
--gray-700: #555555; /* gedämpfter Text auf hellem Grund */
/* --- Akzent: Blut-Rot ----------------------------------------------- */
--red-500: #C1121F; /* Knöpfe, Hervorhebungen */
--red-600: #E4002B; /* beim Drüberfahren */
--red-700: #A80F1A; /* beim Drücken */
--red-text: #FF5244; /* roter KLEIN-Text auf Dunkel, kontraststark */
--red-100: rgba(193, 18, 31, 0.16); /* zarte rote Füllung */
--on-red: #F5F5F5; /* Schrift AUF dem Rot */
/* --- Rückmeldungen (sparsam) ---------------------------------------- */
--success: #63D48A;
--warning: #F5B23C;
--danger: #F0503C;
--danger-tint: rgba(240, 80, 60, 0.14);
/* --- Sprechende Namen ------------------------------------------------
Ab hier wird im Rest der Datei nur noch mit diesen Namen gearbeitet.
Wer die Seite umfärben will, ändert nur hier etwas. */
--bg: var(--ink-900);
--bg-raised: var(--ink-850);
--surface: var(--ink-800);
--surface-alt: var(--ink-750);
--surface-hover: var(--ink-700);
--border: var(--ink-600);
--border-strong: var(--ink-500);
--text: var(--paper-100);
--text-muted: var(--paper-100); /* Schriftfarben-Regel 02.09.2026: lesbarer Text ist weiß, nie grau */
--text-faint: var(--paper-100);
--text-disabled: var(--gray-600);
--accent: var(--red-500);
--accent-hover: var(--red-600);
--accent-active: var(--red-700);
--accent-tint: var(--red-100);
--accent-ink: var(--on-red);
--accent-text: var(--red-text);
--focus-ring: var(--red-500);
}
/* ==========================================================================
BLOCK 3 — SCHRIFT UND MASSE
--------------------------------------------------------------------------
Aus "tokens/typography.css" und "tokens/spacing.css".
ZWEI SCHRIFTEN, KLARE AUFGABENTEILUNG:
Bangers nur Überschriften, Abschnitts-Titel, große Zahlen.
Immer GROSSBUCHSTABEN, immer gesperrt, nie unter 24 px,
nie für Fließtext und nie für Knöpfe.
Montserrat alles andere. 600 für Navigation, Knöpfe, Beschriftungen.
500 für längere Absätze (600 liest sich über mehrere
Zeilen zu schwer).
========================================================================== */
:root {
--font-display: 'Bangers', 'Impact', system-ui, sans-serif;
--font-sans: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Bangers-Größen (Computer) */
--fs-display: 96px; --lh-display: 0.92; --ls-display: 0.02em;
--fs-h1: 64px; --lh-h1: 0.96; --ls-h1: 0.02em;
--fs-h2: 48px; --lh-h2: 1; --ls-h2: 0.02em;
--fs-h3: 34px; --lh-h3: 1.05; --ls-h3: 0.015em;
--fs-h4: 26px; --lh-h4: 1.1; --ls-h4: 0.01em;
--fs-stat: 72px; --lh-stat: 0.9; --ls-stat: 0.01em;
/* Montserrat-Größen */
--fs-lead: 20px; --lh-lead: 1.55;
--fs-body: 16px; --lh-body: 1.65;
--fs-body-sm: 14px; --lh-body-sm: 1.6;
--fs-caption: 12px; --lh-caption: 1.4;
--ls-label: 0.14em; /* Beschriftungen in Großbuchstaben */
--ls-button: 0.04em; /* Knöpfe */
/* Abstände — alles ein Vielfaches von 4 */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
--sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
--section-y: 96px; /* Luft zwischen den Abschnitten */
--gutter: 24px; /* Abstand zum Bildschirmrand */
--container: 1200px; /* größte Inhaltsbreite */
--container-narrow: 760px; /* Lesebreite für Textseiten */
/* Ecken — die Marke ist kantig, deshalb sehr wenig Rundung */
--radius-sm: 2px;
--radius-md: 4px; /* Standard: Knöpfe, Karten, Eingabefelder */
--radius-lg: 8px; /* Bilder, größere Karten */
--radius-pill: 999px;
--border-hairline: 1px;
--border-thick: 2px;
--shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
--shadow-accent: 0 8px 28px rgba(193, 18, 31, 0.35); /* roter Schein */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 120ms;
--dur: 180ms;
}
/* Am Handy werden die großen Schriften kleiner. Die Werte stehen so im
Design-System — nicht selbst ausgedacht. */
@media (max-width: 640px) {
:root {
--fs-display: 56px;
--fs-h1: 44px;
--fs-h2: 34px;
--fs-h3: 26px;
--fs-h4: 22px;
--fs-stat: 52px;
--fs-lead: 18px;
--section-y: 64px;
}
}
/* ==========================================================================
BLOCK 4 — GRUNDREGELN UND HILFSKLASSEN
========================================================================== */
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Damit Sprungziele nicht direkt am oberen Rand kleben */
/* Muss mindestens so hoch sein wie die Kopfleiste, sonst verdeckt sie
das Sprungziel. 64 px Leiste plus etwas Luft. */
scroll-padding-top: 84px;
}
/* Wer am Rechner "weniger Bewegung" eingestellt hat, bekommt keine
Animationen — Barrierefreiheit, kostet nichts. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-weight: var(--fw-medium);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Fängt seitliches Verrutschen am Handy ab.
ACHTUNG bei künftigen Änderungen: Diese Zeile ist nur ein Sicherheitsnetz.
Sie VERSTECKT zu breite Inhalte, statt sie zu beheben — und macht damit
auch die übliche Prüfung "scrollWidth größer als Fensterbreite" blind.
Wer etwas Neues einbaut, muss trotzdem bei 320 px nachsehen, ob rechts
etwas abgeschnitten wird. */
overflow-x: hidden;
}
/* Überschriften sind immer Bangers, groß und gesperrt */
h1, h2, h3, h4, .u-display {
font-family: var(--font-display);
font-weight: 400;
margin: 0;
text-transform: uppercase;
letter-spacing: var(--ls-h2);
line-height: var(--lh-h2);
color: var(--text);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a {
color: var(--accent-text);
text-decoration: none;
transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }
/* Sichtbarer Rahmen beim Durchtabben — wichtig für Tastaturbedienung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: var(--border-thick) solid var(--focus-ring);
outline-offset: 2px;
}
/* --- Hilfsklassen ------------------------------------------------------ */
.u-container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.u-narrow { max-width: var(--container-narrow); }
.u-display-xl {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
margin: 0;
}
.u-lead {
font-size: var(--fs-lead);
line-height: var(--lh-lead);
font-weight: var(--fw-medium);
color: var(--text-muted);
max-width: 60ch;
}
.u-body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 64ch; }
.u-small { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.u-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-faint); }
.u-label {
font-family: var(--font-sans);
font-weight: var(--fw-semibold);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: var(--ls-label);
color: var(--text-muted);
}
.u-eyebrow {
font-family: var(--font-sans);
font-weight: var(--fw-bold);
font-size: 13px;
text-transform: uppercase;
letter-spacing: var(--ls-label);
color: var(--accent-text);
margin: 0 0 var(--sp-3);
}
.u-accent { color: var(--accent-text); }
.u-muted { color: var(--text-muted); }
/* Zeilenumbruch NUR auf schmalen Bildschirmen.
Wird als
in eine Ueberschrift gesetzt: am Handy
bricht die Zeile genau dort um (z. B. nach dem Gedankenstrich), am
grossen Bildschirm verschwindet der Umbruch und der Satz bleibt in
einer Zeile. Ein ausgeblendetes
erzeugt keinen Umbruch. */
.u-br-eng { display: inline; }
@media (min-width: 640px) { .u-br-eng { display: none; } }
/* Der Slogan ist bewusst KEIN Teil der Bildmarke. Er wird eigenständig
gesetzt, mit anderer Größe und Sperrung — so schreibt es das
Design-System vor. */
.u-slogan {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.u-slogan-sub {
font-family: var(--font-sans);
font-weight: var(--fw-semibold);
letter-spacing: 0.02em;
color: var(--text-muted);
}
/* Nur für Screenreader sichtbar — steht im Text, aber nicht auf dem Bild */
.u-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Sprung-Link ganz oben, erscheint erst beim Tabben */
.u-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 999;
background: var(--accent);
color: #F5F5F5;
padding: var(--sp-3) var(--sp-4);
font-weight: var(--fw-semibold);
}
.u-skip:focus {
left: var(--sp-4);
top: var(--sp-4);
color: #F5F5F5;
}
/* ==========================================================================
BLOCK 5 — BAUSTEINE
--------------------------------------------------------------------------
Knopf, Karte und Formularfeld, übernommen aus den Komponenten des
Design-Systems (components/actions/Button.jsx, components/forms/Input.jsx).
========================================================================== */
/* --- Knopf -------------------------------------------------------------
ACHTUNG: Die Schriftfarbe steht hier ABSICHTLICH direkt als Hex-Wert und
nicht als Variable. Über eine Variablenkette ist genau das schon einmal
gerissen — dann erbte der Text Weiß und der Knopf sah leer aus. Nur in
iPhone-Safari, und erst nach dem Antippen. */
.sfsf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
font-family: var(--font-sans);
font-weight: var(--fw-semibold);
font-size: 14px;
letter-spacing: var(--ls-button);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: var(--border-hairline) solid transparent;
border-radius: var(--radius-md);
padding: 12px 22px;
/* Mindestens 44 px hoch — kleine Ziele sind am Handy kaum zu treffen */
min-height: 46px;
transition: background var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur) var(--ease-out);
}
.sfsf-btn:active { transform: translateY(1px); }
.sfsf-btn--lg { font-size: 16px; padding: 16px 30px; min-height: 54px; }
.sfsf-btn--sm { font-size: 12px; padding: 8px 14px; min-height: 44px; }
.sfsf-btn--block { display: flex; width: 100%; }
/* Roter Hauptknopf */
.sfsf-btn--primary {
background: var(--accent);
color: #F5F5F5;
-webkit-text-fill-color: #F5F5F5; /* zweite Absicherung, siehe oben */
}
.sfsf-btn--primary:hover {
background: var(--accent-hover);
color: #F5F5F5;
box-shadow: var(--shadow-accent);
}
.sfsf-btn--primary:active { background: var(--accent-active); }
/* Knopf mit Rahmen */
.sfsf-btn--secondary {
background: transparent;
color: #F5F5F5;
-webkit-text-fill-color: #F5F5F5;
border-color: var(--border-strong);
}
.sfsf-btn--secondary:hover {
border-color: #F5F5F5;
background: var(--surface-hover);
color: #F5F5F5;
}
.sfsf-btn:disabled,
.sfsf-btn[aria-disabled='true'] {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
transform: none;
pointer-events: none;
}
/* --- Karte -------------------------------------------------------------- */
.sfsf-card {
background: var(--surface);
border: var(--border-hairline) solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-5);
}
.sfsf-card--accent { border-color: var(--accent); }
/* --- Formular ----------------------------------------------------------- */
.sfsf-field { display: block; margin-bottom: var(--sp-4); }
.sfsf-field__label {
display: block;
font-family: var(--font-sans);
font-weight: var(--fw-semibold);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: var(--ls-label);
color: var(--text-muted);
margin-bottom: var(--sp-2);
}
.sfsf-field__label .req { color: var(--accent-text); }
.sfsf-control {
display: block;
width: 100%;
font-family: var(--font-sans);
font-weight: var(--fw-medium);
font-size: 16px; /* 16 px verhindert, dass das iPhone beim Tippen zoomt */
line-height: 1.4;
color: var(--text);
background: var(--surface);
border: var(--border-hairline) solid var(--border);
border-radius: var(--radius-md);
padding: 13px 14px;
transition: border-color var(--dur) var(--ease-out),
background var(--dur) var(--ease-out);
}
.sfsf-control::placeholder { color: var(--text-faint); }
.sfsf-control:hover { border-color: var(--border-strong); }
.sfsf-control:focus {
outline: none;
border-color: var(--accent);
background: var(--bg-raised);
}
textarea.sfsf-control { min-height: 130px; resize: vertical; }
/* Einwilligungs-Häkchen. Die ganze Zeile ist anklickbar, damit man am
Handy nicht das winzige Kästchen treffen muss. */
.sfsf-check {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
cursor: pointer;
font-size: var(--fs-body-sm);
line-height: 1.5;
color: var(--text-muted);
padding: var(--sp-2) 0;
}
.sfsf-check input {
flex: none;
appearance: none;
-webkit-appearance: none;
width: 24px;
height: 24px;
margin: 0;
border: var(--border-thick) solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
transition: background var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.sfsf-check input:checked {
background: var(--accent);
border-color: var(--accent);
/* Das Häkchen ist ein eingebettetes Bild — lädt nichts nach */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
/* Rückmeldung nach dem Absenden */
.sfsf-hinweis {
margin-top: var(--sp-4);
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius-md);
font-size: var(--fs-body-sm);
line-height: 1.5;
border: var(--border-hairline) solid var(--border);
background: var(--bg-raised);
color: var(--text-muted);
}
.sfsf-hinweis[hidden] { display: none; }
.sfsf-hinweis--ok { border-color: rgba(99, 212, 138, 0.4); color: var(--success); }
.sfsf-hinweis--fehler { border-color: rgba(240, 80, 60, 0.4); color: var(--danger); }
/* ==========================================================================
BLOCK 6 — DIE ABSCHNITTE DIESER SEITE
========================================================================== */
.cs-section { padding: var(--section-y) 0; }
/* --- 0 Kopfleiste (bleibt beim Scrollen immer oben) --------------------
Links Kettlebell, Markenname und Descriptor, ein Klick fuehrt zurueck an
den Seitenanfang. Rechts der Knopf zum Anfrageformular.
Schrift ist Bangers, genau wie im grossen Kopfbereich darunter - Roberts
Wunsch vom 20.08.2026, damit die Leiste zur Marke passt. Erster Entwurf
war Montserrat, weil das Design-System Bangers nie unter 24 px erlaubt.
Deshalb steht der Name hier bei 26 px und der Descriptor bei 13 px:
Der Descriptor ist eine Beischrift, keine Ueberschrift. */
.cs-topbar {
position: sticky;
top: 0;
z-index: 50;
/* Leicht durchscheinend mit Weichzeichner: Der Inhalt darunter bleibt
erahnbar. Kann ein Browser das nicht, wirkt einfach die Farbe. */
background: rgba(11, 11, 11, 0.88);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--ink-600);
}
.cs-topbar__in {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
height: 64px;
width: 100%;
max-width: var(--container);
margin-inline: auto;
/* env(safe-area-inset) haelt die Leiste am iPhone im Querformat von der
abgerundeten Bildschirmecke weg. */
padding-left: max(var(--gutter), env(safe-area-inset-left));
padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.cs-topbar__marke {
display: flex;
align-items: center;
gap: var(--sp-3);
text-decoration: none;
color: var(--paper-100);
min-width: 0; /* erlaubt dem Text zu schrumpfen statt ueberzulaufen */
}
.cs-topbar__marke:hover .cs-topbar__name,
.cs-topbar__marke:focus-visible .cs-topbar__name { color: var(--accent); }
.cs-topbar__symbol {
width: 34px;
height: 34px;
flex: 0 0 auto;
/* Das Wasserzeichen im Kopfblock setzt max-width: none. Hier ausdruecklich
wieder begrenzen, damit das Bild nicht auseinanderlaeuft. */
max-width: 34px;
}
.cs-topbar__woerter {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
/* KEIN overflow: hidden hier. Es wurde am 20.08.2026 kurz als
Sicherheitsnetz eingebaut und hat prompt die Punkte ueber dem "Ü" von
"FÜR" abgeschnitten. Gegen Ueberlaufen schuetzt stattdessen der
Zeilenumbruch (white-space: normal) im Handy-Bereich. */
}
.cs-topbar__name {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
font-size: 26px;
/* 1.05 statt der sonst ueblichen 0.95: Bei zwei Zeilen braucht die obere
Luft nach oben, sonst werden die Punkte auf Ä, Ö und Ü abgeschnitten. */
line-height: 1.05;
letter-spacing: 0.02em;
color: var(--paper-100);
white-space: nowrap;
transition: color 0.18s ease;
}
.cs-topbar__descriptor {
font-family: var(--font-display);
font-weight: 400;
font-size: 13px;
line-height: 1.15;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
}
.cs-topbar__knopf { flex: 0 0 auto; }
/* Handys: Der Descriptor muss weichen, sonst wird es neben dem Knopf zu eng.
WICHTIG - hier ist am 20.08.2026 ein Fehler passiert: Der Umbruch des
Markennamens war erst ab 380 px eingeschaltet. Auf Roberts iPhone (390 px)
griff die Regel deshalb nicht, der Name blieb einzeilig bei 24 px und
schob sich sichtbar UNTER den Knopf.
Deshalb gilt jetzt im gesamten Handy-Bereich: white-space: normal.
Der Name bricht dann nur um, wenn der Platz wirklich nicht reicht - passt
er in eine Zeile, bleibt er einzeilig. Das ist die sichere Richtung:
nowrap kann ueberlaufen, normal nie. */
@media (max-width: 560px) {
.cs-topbar__in { height: 58px; }
.cs-topbar__symbol { width: 30px; height: 30px; max-width: 30px; }
.cs-topbar__name {
font-size: 21px;
white-space: normal;
line-height: 1.05;
/* Verteilt die Wörter gleichmäßig auf beide Zeilen, statt "FIT" allein
in die zweite fallen zu lassen. */
text-wrap: balance;
}
.cs-topbar__descriptor { display: none; }
}
/* Sehr schmale Geraete (iPhone SE, 320 px): zusaetzlich engere Raender und
ein kompakterer Knopf, damit der Name genug Platz behaelt. */
@media (max-width: 380px) {
.cs-topbar__in {
gap: var(--sp-2);
padding-left: max(var(--sp-4), env(safe-area-inset-left));
padding-right: max(var(--sp-4), env(safe-area-inset-right));
}
.cs-topbar__marke { gap: var(--sp-2); }
.cs-topbar__knopf { padding-left: 12px; padding-right: 12px; }
}
/* --- 1+2 Kopfbereich und Hero -----------------------------------------
Beides liegt in einem gemeinsamen dunklen Block mit einem sehr weichen
Lichtschein oben rechts. Dahinter steht die Kettlebell riesengroß als
Wasserzeichen — kaum sichtbar (5 %), aber sie gibt Tiefe. */
.cs-kopfblock {
position: relative;
overflow: hidden;
background: radial-gradient(120% 90% at 80% 0%, #1a1a1a 0%, #0B0B0B 60%);
border-bottom: var(--border-hairline) solid var(--border);
padding: var(--sp-8) 0 var(--sp-9);
}
/* Die Kettlebell riesengroß und fast unsichtbar im Hintergrund. Sie gibt
Tiefe, darf aber nie mit dem Text konkurrieren.
Am Handy ist der Block schmal und hoch — eine Kettlebell mit voller
Blockhöhe wäre dort breiter als der Bildschirm und würde alles zukleistern.
Deshalb wird sie hier über die BREITE bemessen und nach rechts unten
geschoben, weg vom Text. Auf breiten Bildschirmen (weiter unten in
Block 8) darf sie dann groß werden. */
.cs-kopfblock__wasserzeichen {
position: absolute;
right: -22%;
bottom: -8%;
width: 92%;
height: auto;
/* Ohne diese Höhengrenze wächst die Kettlebell auf mittelbreiten
Bildschirmen (Tablet, kleines Fenster) über den ganzen Block und legt
sich als Klotz hinter den Text. "object-fit: contain" sorgt dabei
dafür, dass sie beim Verkleinern nie verzerrt wird. */
max-height: 46%;
object-fit: contain;
object-position: right bottom;
opacity: 0.035;
pointer-events: none;
user-select: none;
/* WICHTIG: Ohne das hier greift die allgemeine Regel "img { max-width:
100% }" von weiter oben. Sie würde die Breite deckeln, während die
Höhe frei weiterläuft — die Kettlebell wäre dann in die Länge gezogen
und sähe aus wie ein grauer Balken. Genau das ist zuerst passiert. */
max-width: none;
}
.cs-kopfblock__inhalt { position: relative; z-index: 1; }
/* Die Markensperrung: Kettlebell, Name, dann beide Claims.
Sie ist NICHT das Logo-Bild, sondern echter Text — dadurch am Handy
gestochen scharf und beliebig skalierbar. Die Bildmarke selbst
(die Kettlebell) bleibt unverändert das Original-PNG. */
.cs-marke { text-align: center; margin-bottom: var(--sp-8); }
.cs-marke__symbol {
width: 92px;
height: 92px;
margin: 0 auto var(--sp-4);
}
.cs-marke__name {
font-size: var(--fs-h1);
line-height: 0.95;
letter-spacing: 0.02em;
margin: 0;
/* Verteilt die Wörter gleichmäßig auf die Zeilen, statt ein einzelnes
Wort allein in die letzte Zeile fallen zu lassen. */
text-wrap: balance;
}
.cs-marke__descriptor {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 0.04em;
line-height: 1.15;
color: var(--text-muted);
margin: var(--sp-3) 0 0;
}
/* Feine Linie links und rechts vom Slogan */
.cs-marke__slogan {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
margin: var(--sp-4) auto 0;
max-width: 420px;
font-size: 15px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: var(--fw-semibold);
color: var(--accent-text);
}
.cs-marke__slogan::before,
.cs-marke__slogan::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-strong);
}
.cs-hero { text-align: center; }
.cs-hero__titel { margin: 0 auto; max-width: 15ch; text-wrap: balance; }
/* Im Fließtext ist Rot immer das helle #FF5244. In einer riesigen
Überschrift darf es das satte Marken-Rot sein — große Flächen brauchen
keinen aufgehellten Ton, um lesbar zu bleiben. */
.cs-hero__titel .u-accent { color: var(--accent); }
.cs-hero__text {
margin: var(--sp-5) auto 0;
max-width: 54ch;
text-align: left;
}
/* Der Hinweis, dass die Seite gerade entsteht. Bewusst dezent, ohne Datum
und ohne Countdown. Der Punkt links pulsiert ganz leicht. */
.cs-baustelle {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-6);
padding: 10px 18px;
border: var(--border-hairline) solid var(--border-strong);
border-radius: var(--radius-pill);
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
color: var(--text-muted);
background: rgba(11, 11, 11, 0.5);
}
.cs-baustelle__punkt {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent);
flex: none;
animation: cs-puls 2.4s var(--ease-out) infinite;
}
@keyframes cs-puls {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* --- 3 Über mich ------------------------------------------------------- */
.cs-ueber__raster {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-7);
align-items: center;
}
.cs-ueber__bild {
width: 100%;
max-width: 340px;
margin: 0 auto;
border-radius: var(--radius-lg);
border: var(--border-hairline) solid var(--border-strong);
/* Das Foto hat einen hellen Hintergrund. Ohne diese leichte Abdunklung
bildet es auf der schwarzen Seite einen harten weißen Kasten. */
filter: brightness(0.92) contrast(1.04);
aspect-ratio: 3 / 4;
object-fit: cover;
}
/* --- 4 Hauptangebote --------------------------------------------------- */
.cs-angebote__raster {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
margin-top: var(--sp-7);
}
.cs-angebot { display: flex; flex-direction: column; gap: var(--sp-3); }
.cs-angebot__symbol {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-lg);
background: var(--accent-tint);
color: var(--accent-text);
flex: none;
}
/* Titel und Text stehen zusammen in einem div, deshalb greift das "gap"
der Karte hier nicht — der Abstand muss am Titel selbst hängen. */
.cs-angebot__titel { font-size: var(--fs-h4); margin: 0 0 var(--sp-3); }
.cs-angebot__text { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: 1.6; margin: 0; }
/* Der Vereins-Hinweis ist die EINE bewusste Hervorhebung auf der Seite */
.cs-angebot__jetzt {
margin-top: var(--sp-2);
padding-top: var(--sp-3);
border-top: var(--border-hairline) solid var(--border);
}
.cs-angebot__jetzt-label {
display: block;
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--ls-label);
color: var(--accent-text);
margin-bottom: var(--sp-2);
}
/* --- 5 Weitere Angebote ------------------------------------------------ */
.cs-weitere { background: var(--bg-raised); }
.cs-weitere__liste {
list-style: none;
margin: var(--sp-7) 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-1);
}
.cs-weitere__eintrag {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-3) 0;
border-bottom: var(--border-hairline) solid var(--border);
}
.cs-weitere__haken { color: var(--accent-text); flex: none; margin-top: 3px; }
.cs-weitere__titel { font-weight: var(--fw-semibold); color: var(--text); }
.cs-weitere__zusatz { color: var(--text-muted); }
/* --- 6 Geräte und Supplements ------------------------------------------ */
.cs-geraete__box {
border-left: 3px solid var(--accent);
padding-left: var(--sp-5);
max-width: 62ch;
}
/* --- 7 Die beiden Formulare -------------------------------------------- */
.cs-formulare { background: var(--bg-raised); }
.cs-formulare__raster {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-5);
margin-top: var(--sp-7);
align-items: start;
}
.cs-form { display: flex; flex-direction: column; }
.cs-form__titel { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.cs-form__untertitel {
color: var(--text-muted);
font-size: var(--fs-body-sm);
line-height: 1.55;
margin: 0 0 var(--sp-5);
}
/* Die Direktanfrage ist der Hauptweg — sie bekommt den roten Rahmen */
.cs-form--anfrage { border-color: var(--accent); }
/* Telefon-Feld unter dem Anfrageformular: bewusst groß und gut treffbar */
.cs-form__telefon {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
margin-top: var(--sp-4);
min-height: 52px;
padding: var(--sp-3) var(--sp-4);
border: var(--border-hairline) solid var(--border);
border-radius: var(--radius-md);
color: var(--text-muted);
font-size: var(--fs-body-sm);
text-align: center;
transition: border-color var(--dur) var(--ease-out),
background var(--dur) var(--ease-out);
}
.cs-form__telefon strong { color: var(--text); font-weight: var(--fw-semibold); }
.cs-form__telefon:hover {
border-color: var(--border-strong);
background: var(--surface-hover);
color: var(--text-muted);
}
/* --- Bestätigungsseite der Warteliste (danke.html) ----------------------
Hierher kommt jemand, der in der Bestätigungsmail auf den Link geklickt
hat. Die Seite nutzt denselben Kopfblock wie die Startseite, ist aber
kürzer und mittig gesetzt. */
.cs-danke { display: flex; align-items: center; min-height: 88vh; }
.cs-danke__inhalt { text-align: center; max-width: 620px; margin: 0 auto; }
/* Diese Seite ist kürzer als die Startseite — dieselbe Kettlebell wirkt hier
deshalb viel größer und drängt sich in den Vordergrund. Auf der
Bestätigungsseite darf sie kaum mehr als eine Ahnung sein. */
.cs-danke .cs-kopfblock__wasserzeichen { opacity: 0.022; }
/* Der grüne Haken ist die einzige Stelle im ganzen Auftritt, an der eine
andere Farbe als Rot vorkommt. Hier ist sie richtig: Grün heißt
"erledigt", und genau das ist die Botschaft dieser Seite. */
.cs-danke__haken {
display: inline-flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
border-radius: 50%;
background: rgba(99, 212, 138, 0.14);
color: var(--success);
margin-bottom: var(--sp-5);
}
.cs-danke__titel {
font-size: var(--fs-h1);
line-height: 0.96;
letter-spacing: var(--ls-h1);
margin: 0 0 var(--sp-5);
}
.cs-danke__text { margin-left: auto; margin-right: auto; }
.cs-danke__box {
margin-top: var(--sp-7);
padding: var(--sp-5);
background: var(--surface);
border: var(--border-hairline) solid var(--accent);
border-radius: var(--radius-lg);
text-align: left;
}
.cs-danke__box-label {
font-family: var(--font-sans);
font-weight: var(--fw-bold);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: var(--ls-label);
color: var(--accent-text);
margin: 0 0 var(--sp-2);
}
.cs-danke__knoepfe { display: flex; flex-direction: column; gap: var(--sp-3); }
.cs-danke__telefon { margin-top: 0; }
.cs-danke__zurueck {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
min-height: 44px;
margin-top: var(--sp-6);
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
color: var(--text-muted);
}
.cs-danke__zurueck:hover { color: var(--text); }
@media (min-width: 600px) {
.cs-danke__knoepfe { flex-direction: row; align-items: stretch; }
.cs-danke__knoepfe > * { flex: 1; }
}
/* --- 8 Fußzeile -------------------------------------------------------- */
.cs-footer {
background: var(--ink-850);
border-top: var(--border-hairline) solid var(--border);
padding: var(--sp-8) 0 var(--sp-5);
}
.cs-footer__oben {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-7);
padding-bottom: var(--sp-7);
border-bottom: var(--border-hairline) solid var(--border);
}
.cs-footer__marke {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.cs-footer__markenname {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
font-size: 27px;
line-height: 1;
letter-spacing: 0.02em;
color: var(--text);
}
.cs-footer__h {
font-family: var(--font-sans);
font-weight: var(--fw-bold);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: var(--ls-label);
color: var(--text-faint);
margin: 0 0 var(--sp-3);
}
.cs-footer__liste { list-style: none; margin: 0; padding: 0; }
.cs-footer__liste li { margin-bottom: var(--sp-1); }
.cs-footer__link {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
color: var(--text-muted);
font-size: var(--fs-body-sm);
/* 44 px Mindesthöhe, damit die Links am Handy gut zu treffen sind */
min-height: 44px;
padding: var(--sp-1) 0;
}
.cs-footer__link:hover { color: var(--text); }
.cs-footer__social {
display: flex;
gap: var(--sp-3);
margin-top: var(--sp-3);
/* Am Handy stehen die Symbole mittig unter dem Text, ab Tablet links
buendig zur Spalte (dort ist der Fussbereich dreispaltig). */
justify-content: center;
}
.cs-footer__social-link {
width: 54px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
border: var(--border-hairline) solid var(--border);
border-radius: var(--radius-md);
color: var(--text-muted);
transition: border-color var(--dur) var(--ease-out),
color var(--dur) var(--ease-out),
background var(--dur) var(--ease-out);
}
.cs-footer__social-link:hover {
border-color: var(--border-strong);
background: var(--surface-hover);
color: var(--text);
}
.cs-footer__unten {
padding-top: var(--sp-5);
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-5);
justify-content: space-between;
font-size: var(--fs-caption);
color: var(--text-faint);
}
/* ==========================================================================
BLOCK 7 — RECHTSSEITEN (Impressum, Datenschutz)
========================================================================== */
.rechts { padding: var(--sp-7) 0 var(--sp-9); }
.rechts__zurueck {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
min-height: 44px;
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
color: var(--text-muted);
margin-bottom: var(--sp-6);
}
.rechts__zurueck:hover { color: var(--text); }
.rechts h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-5); }
.rechts h2 {
font-size: var(--fs-h4);
margin: var(--sp-7) 0 var(--sp-3);
padding-top: var(--sp-5);
border-top: var(--border-hairline) solid var(--border);
}
.rechts h2:first-of-type { border-top: 0; padding-top: 0; }
.rechts h3 { font-size: 22px; margin: var(--sp-5) 0 var(--sp-2); }
.rechts p,
.rechts li { color: var(--text-muted); max-width: 68ch; }
.rechts ul { padding-left: var(--sp-5); }
.rechts li { margin-bottom: var(--sp-2); }
.rechts strong { color: var(--text); font-weight: var(--fw-semibold); }
/* Kasten für den Datenblock am Ende — nach Roberts Anschrift-Regel stehen
die persönlichen Daten immer ganz unten, nie oben. */
.rechts__anbieter {
background: var(--surface);
border: var(--border-hairline) solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-5);
margin-top: var(--sp-4);
}
.rechts__anbieter dl {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-1) var(--sp-5);
margin: 0;
}
.rechts__anbieter dt {
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: var(--ls-label);
font-weight: var(--fw-semibold);
color: var(--text-faint);
margin-top: var(--sp-3);
min-width: 0;
overflow-wrap: anywhere; /* lange Begriffe brechen um statt in die rechte Spalte zu laufen */
}
.rechts__anbieter dd { margin: 0; color: var(--text); }
.rechts__stand {
margin-top: var(--sp-7);
font-size: var(--fs-caption);
color: var(--text-faint);
}
/* Auffälliger Kasten für Punkte, die vor dem Veröffentlichen noch geklärt
werden müssen. Er ist ABSICHTLICH gut sichtbar — er soll auffallen und
dann aus dem HTML gelöscht werden. Im Kasten steht auch drin, wie. */
.rechts__pruefen {
border: var(--border-thick) dashed var(--warning);
border-radius: var(--radius-md);
padding: var(--sp-4);
margin: var(--sp-5) 0;
background: rgba(245, 178, 60, 0.08);
}
.rechts__pruefen p { color: var(--warning); margin: 0; }
/* ==========================================================================
BLOCK 8 — GRÖSSERE BILDSCHIRME
--------------------------------------------------------------------------
Gebaut wurde zuerst fürs Handy. Ab hier kommt schrittweise dazu, was auf
breiteren Bildschirmen besser aussieht. So bleibt die Handy-Ansicht
immer die einfachste — und die wird am häufigsten benutzt.
========================================================================== */
@media (min-width: 600px) {
.cs-weitere__liste { grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-6); }
.rechts__anbieter dl { grid-template-columns: 190px 1fr; }
.rechts__anbieter dt { margin-top: 0; }
.rechts__anbieter dd { margin-bottom: var(--sp-3); }
}
@media (min-width: 760px) {
.cs-marke__symbol { width: 112px; height: 112px; }
.cs-marke__descriptor { font-size: 26px; }
.cs-hero__text { text-align: center; }
/* Tablet: zwei Spalten. Die Vereins-Karte (dritte) und die Trainingspläne
(sechste) laufen über die volle Breite, damit keine Karte allein
in einer halben Reihe stehen bleibt. */
.cs-angebote__raster { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.cs-angebote__raster > :nth-child(3),
.cs-angebote__raster > :nth-child(6) { grid-column: span 2; }
.cs-formulare__raster { grid-template-columns: 1fr 1fr; }
.cs-footer__oben { grid-template-columns: 1.3fr 1fr 1fr; }
.cs-footer__social { justify-content: flex-start; }
}
@media (min-width: 1000px) {
.cs-kopfblock { padding: var(--sp-9) 0 var(--sp-10); }
/* Auf breiten Bildschirmen darf die Kettlebell größer werden und mittig
rechts stehen — aber nicht über den ganzen Block. Wird sie zu groß,
sieht man nur noch einen Ausschnitt und sie wirkt wie ein grauer
Klotz statt wie die Marke. Deshalb bleibt sie ganz im Bild. */
.cs-kopfblock__wasserzeichen {
right: 2%;
bottom: auto;
top: 50%;
transform: translateY(-50%);
width: auto;
height: 78%;
max-height: none;
object-position: center;
opacity: 0.045;
}
.cs-ueber__raster { grid-template-columns: minmax(240px, 0.85fr) 1.4fr; gap: var(--sp-8); }
.cs-ueber__bild { max-width: 100%; }
/* Sechs Karten, aufgeteilt über ein 6-Spalten-Raster. Sechs Spalten
deshalb, weil sich damit sowohl Hälften (3) als auch Drittel (2)
sauber bilden lassen:
Reihe 1 Personal Training | Im Fitnessstudio je halbe Breite
Reihe 2 Vereinstraining volle Breite
Reihe 3 Gruppe | zu Hause | Pläne je ein Drittel
Die ersten drei sind die wichtigsten Angebote und bekommen deshalb
mehr Platz. */
.cs-angebote__raster { grid-template-columns: repeat(6, 1fr); }
.cs-angebote__raster > :nth-child(1),
.cs-angebote__raster > :nth-child(2) { grid-column: span 3; }
.cs-angebote__raster > :nth-child(3) { grid-column: span 6; }
.cs-angebote__raster > :nth-child(n+4) { grid-column: span 2; }
/* Nur die Karte über die volle Breite bekommt das Symbol neben den Text.
Bei halber Breite wäre das zu gedrängt. */
.cs-angebote__raster > :nth-child(3).cs-angebot--gross {
flex-direction: row;
align-items: flex-start;
gap: var(--sp-5);
}
.cs-weitere__liste { grid-template-columns: 1fr 1fr 1fr; }
}
/* ==========================================================================
BLOCK 7 — PRODUKTSEITEN (Geräte und Supplements)
--------------------------------------------------------------------------
Wird von geraete.html und supplements.html verwendet. Kürzel "pk" steht
für Produktkarte.
========================================================================== */
/* --- Kopf der Produktseiten -------------------------------------------- */
.pk-hero { padding-bottom: var(--sp-7); }
.pk-hero h1 { margin-top: var(--sp-3); }
/* --- Raster der Karten --------------------------------------------------
Zwei Spalten ab Tablet, darunter eine. Kein Zwang zu drei Spalten - bei
drei wird der Text zu schmal und die Karten wirken wie Werbekacheln. */
.pk-raster {
display: grid;
gap: var(--sp-5);
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.pk-raster { grid-template-columns: repeat(2, 1fr); }
}
/* --- Eine Produktkarte -------------------------------------------------- */
.pk {
display: flex;
flex-direction: column;
padding: var(--sp-5);
}
.pk__kopf {
display: flex;
align-items: flex-start;
gap: var(--sp-4);
margin-bottom: var(--sp-4);
}
/* Das Symbol ist bewusst ein Schriftzeichen und kein Bild: Amazon-Produkt-
fotos duerfen nicht einfach kopiert werden, und eigene Fotos hat Robert
noch nicht. Sobald es welche gibt, ersetzt ein ![]()
diesen Block. */
.pk__symbol {
flex: 0 0 auto;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: var(--accent);
background: var(--ink-700);
border: 1px solid var(--ink-600);
border-radius: 4px;
line-height: 1;
}
.pk__titel {
font-size: var(--fs-h4);
line-height: 1.1;
margin: 0 0 var(--sp-1);
}
.pk__wofuer {
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
margin: 0;
}
.pk__text {
font-size: 16px;
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 var(--sp-5);
flex: 1 1 auto; /* schiebt den Knopf aller Karten auf dieselbe Höhe */
}
.pk__fuss {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
flex-wrap: wrap;
}
/* Die Kennzeichnung muss lesbar sein, nicht versteckt. Grau ist erlaubt,
winzig und kontrastarm waere es nicht. */
.pk__anzeige {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
}
/* --- Der Rahmen-Kasten oben auf der Supplement-Seite -------------------- */
.pk-rahmen {
padding: var(--sp-6);
border-left: 3px solid var(--accent);
}
.pk-rahmen__titel {
font-size: var(--fs-h3);
margin: 0 0 var(--sp-4);
}
.pk-rahmen p + p { margin-top: var(--sp-4); }
/* --- Abgesetztes Band (Hausbesuch, Abschluss) --------------------------- */
.pk-band { background: var(--ink-850); }
.pk-band__box { padding: var(--sp-6); }
.pk-band__knoepfe {
display: flex;
align-items: center;
gap: var(--sp-4);
flex-wrap: wrap;
margin-top: var(--sp-6);
}
/* --- Pflichthinweis zu den Amazon-Links --------------------------------- */
.pk-hinweis {
margin-top: var(--sp-7);
padding: var(--sp-4) var(--sp-5);
background: var(--ink-800);
border: 1px solid var(--ink-600);
border-radius: 4px;
}
.pk-hinweis p { margin: 0; color: var(--text); }
/* ==========================================================================
BLOCK 8 — BLOGARTIKEL
--------------------------------------------------------------------------
Für lange Lesetexte. Schmalere Spalte als der Rest der Seite, weil zu
lange Zeilen beim Lesen ermüden.
========================================================================== */
.blog { padding-top: var(--sp-7); }
.blog__titel {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
font-size: var(--fs-h1);
line-height: 1.0;
letter-spacing: 0.02em;
margin: var(--sp-3) 0 var(--sp-5);
}
/* Der Werbehinweis steht bewusst ganz oben. Er darf nicht wie Kleingedrucktes
aussehen - sonst erfuellt er seinen Zweck nicht. */
.blog__werbung {
font-size: 15px;
line-height: 1.6;
color: var(--text);
padding: var(--sp-3) var(--sp-4);
border-left: 3px solid var(--ink-500);
margin: 0 0 var(--sp-6);
}
/* Produktzeile unter jeder Überschrift */
.blog__produkt {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--text);
margin: calc(var(--sp-3) * -1) 0 var(--sp-5);
}
/* Kasten für zugelassene Formulierungen und Warnhinweise */
.blog__kasten {
background: var(--ink-800);
border: 1px solid var(--ink-600);
border-radius: 6px;
padding: var(--sp-5);
margin: var(--sp-6) 0;
}
.blog__kasten--wichtig {
border-color: rgba(193, 18, 31, 0.45);
border-left: 3px solid var(--accent);
}
.blog__kasten-titel {
font-family: var(--font-sans);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
margin: 0 0 var(--sp-3);
}
.blog__kasten--wichtig .blog__kasten-titel { color: var(--red-text); }
.blog__kasten p { margin: 0 0 var(--sp-3); }
.blog__kasten p:last-child { margin-bottom: 0; }
.blog__kasten-fuss {
font-size: 14px;
color: var(--text);
padding-top: var(--sp-3);
border-top: 1px solid var(--ink-600);
}
/* Platzhalter für den Produktlink. Die Kennzeichnung steht daneben, nicht
darunter - sie muss zusammen mit dem Link wahrgenommen werden. */
.blog__link {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
padding: var(--sp-4) 0 var(--sp-7);
border-bottom: 1px solid var(--ink-600);
margin-bottom: var(--sp-7);
}
.blog__anzeige {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
}
/* Tabelle: auf schmalen Bildschirmen seitlich scrollbar, damit die Seite
selbst nie horizontal laeuft. */
.blog__tabelle {
overflow-x: auto;
margin: var(--sp-5) 0 var(--sp-7);
border: 1px solid var(--ink-600);
border-radius: 6px;
}
.blog__tabelle table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
min-width: 560px;
}
.blog__tabelle th,
.blog__tabelle td {
text-align: left;
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--ink-600);
vertical-align: top;
}
.blog__tabelle th {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
background: var(--ink-800);
}
.blog__tabelle tr:last-child td { border-bottom: 0; }
/* Pflichthinweise am Artikelende */
.blog__pflicht {
margin-top: var(--sp-8);
padding: var(--sp-5);
background: var(--ink-850);
border: 1px solid var(--ink-600);
border-radius: 6px;
font-size: 14px;
line-height: 1.6;
color: var(--text);
}
.blog__pflicht p { margin: 0 0 var(--sp-3); }
.blog__pflicht p:last-child { margin-bottom: 0; }
.blog__pflicht strong { color: var(--text); }
.blog h2 { margin-top: var(--sp-8); }
.blog h3 { margin-top: var(--sp-6); }
.blog ul { margin: var(--sp-4) 0; padding-left: var(--sp-5); }
.blog li { margin-bottom: var(--sp-2); color: var(--text-muted); }