/* =========================================================================
Dominic Kutschki — Personal Training
Plain CSS, no build step. Edit, save, refresh.
HOW THIS FILE IS ORGANIZED:
1. Design tokens (colors, spacing) as variables — change these to re-theme.
2. Base + typography.
3. Each section, top to bottom, matching the HTML order.
========================================================================= */
/* --- 0. SCHRIFTEN (selbst gehostet) ------------------------------------
Vorher von Google-Servern geladen — das schickt beim Seitenaufruf die
IP-Adresse jedes Besuchers an Google, ohne Einwilligung, ein bekannter
Abmahngrund in Deutschland. Jetzt liegen die Dateien in fonts/, keine
externe Verbindung mehr nötig. Nur der lateinische Zeichensatz (deckt
auch ä/ö/ü/ß ab) — Kyrillisch, Griechisch etc. werden nicht gebraucht.
Archivo ist eine Variable-Font-Datei: eine Datei deckt alle vier
genutzten Schnitte (400–700) ab, statt vier einzelne laden zu müssen. */
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/anton-400.woff2") format("woff2");
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("fonts/archivo-normal.woff2") format("woff2");
}
@font-face {
font-family: "Archivo";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("fonts/archivo-italic.woff2") format("woff2");
}
/* --- 1. DESIGN TOKENS -------------------------------------------------- */
:root {
/* Markenpalette Unbreakable PT & Diagnostik — Waldgrün-Petrol als Anker,
Erdtöne als Umfeld, Ocker als einziger Handlungsimpuls. Grün und Erdtöne
tragen Sicherheit, Fachkompetenz und Verbindlichkeit; das grenzt bewusst
vom Grau-Rot des früheren Arbeitgebers ab. */
--petrol: #14403B; /* Ankerfarbe: tiefes Petrol/Waldgrün — Vertrauen und Kompetenz */
--petrol-deep: #0E2E2A; /* dunkelste Stufe — Flächen, Verläufe, Foto-Scrims */
--moss: #6E7A54; /* gedämpftes Moosgrün — Linien und kleine Signale */
--sand: #F4EFE6; /* Pergament/Sand — der warme, helle Seitenhintergrund */
--sand-deep: #EAE2D4; /* eine Stufe tiefer, damit abgesetzte Flächen sichtbar bleiben */
--amber: #C8853B; /* „warmes Ocker" — Handlungsfarbe der Buttons */
--amber-lift: #D3934A; /* Button-Hover: heller, nicht dunkler (Begründung bei .btn-primary) */
/* Rollen-Tokens — hierüber greift das restliche Stylesheet zu */
--ground: var(--sand); /* Seitenhintergrund */
--surface: #ffffff; /* Karten und Panels */
--surface-2:var(--sand-deep);
--paper: #22201C; /* Fließtext */
--ink: #22201C;
--muted: #4A4740; /* Sekundärtext */
/* Haarlinien in Moos — direkt aus --moss abgeleitet, damit die Farbe nur an
einer Stelle steht. Moos als Textfarbe wäre auf Sand zu schwach (4,0:1),
als Linie reicht es. */
--line: color-mix(in srgb, var(--moss) 30%, transparent);
/* Ocker ist die Handlungsfarbe (löst Petrol aus ADR 0009 ab): ein warmer
Impuls, damit Klicks auffallen, ohne die ruhige Premium-Anmutung zu stören.
Petrol trägt weiter die Marke selbst — Eyebrows, Hover, Häkchen. */
--action: var(--amber);
--action-hover:var(--amber-lift);
--support: var(--petrol); /* Leitfarbe der Marke — trägt Eyebrows, Karten-Hover, Checkmarks, Preis-Akzente */
--maxw: 1200px;
--pad: clamp(1.25rem, 5vw, 4rem);
--radius: 4px;
--font-display: "Anton", Impact, sans-serif;
--font-body: "Archivo", system-ui, sans-serif;
}
/* --- 2. BASE + TYPE ---------------------------------------------------- */
* { box-sizing: border-box; }
/* Einseiter (ADR 0015): Die Navigation springt per Anker zu Abschnitten auf
derselben Seite. Ohne scroll-padding-top verschwindet die Abschnitts-
Ueberschrift hinter dem klebenden Header. Wert = Headerhoehe + etwas Luft. */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
margin: 0;
background: var(--ground);
color: var(--paper);
font-family: var(--font-body);
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400;
/* NICHT unter 1.14 setzen. Anton hat sehr hohe Umlautpunkte: Ein grosses Ö/Ä/Ü
ragt 1.053em ueber die Grundlinie, die Punkte allein sitzen 0.194em ueber der
Versalhoehe (beides nachgemessen). Bei der frueheren 0.95 ragten sie sichtbar
in die Zeile darueber; selbst bei 1.08 blieben am Hero nur 2.4px Abstand, was
optisch weiter wie Kleben aussah. 1.15 gibt den Punkten eine eigene Zone.
Betrifft u. a. "…deinen KÖRPER." und "…den KÖRPER, den du heute hast." */
line-height: 1.15;
letter-spacing: 0.01em;
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); letter-spacing: 0.02em; }
/* Ocker statt Petrol: Das hervorgehobene Wort sitzt auf dem dunklen Foto-Scrim
im Hero, wo Petrol-Text mit dem Hintergrund verschmelzen würde. */
h1 em {
font-style: normal;
color: var(--amber);
}
p { margin: 0 0 1rem; max-width: 62ch; }
a { color: inherit; text-decoration: none; }
.eyebrow {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 1rem;
}
.eyebrow-red { color: var(--support); }
/* Buttons */
.btn {
display: inline-block;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.85rem 1.6rem;
border-radius: var(--radius);
border: 1.5px solid transparent;
background: none;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
/* Fokusring in Petrol statt Ocker: Ocker auf hellem Sand hat nur 2,7:1 und
wäre als Umrandung kaum zu sehen — Petrol liegt bei 10:1. */
.btn:focus-visible { outline: 3px solid var(--support); outline-offset: 3px; }
/* Dunkler Text auf dem Ocker-Button, nicht weißer: Weiß auf #C8853B ergibt nur
3,05:1 und fällt durch WCAG AA. Mit #22201C sind es 5,3:1.
Der Hover wird deshalb heller statt dunkler — abdunkeln würde den dunklen
Text wieder unter 4,5:1 drücken. */
.btn-primary { background: var(--action); color: var(--ink); }
.btn-primary:hover { background: var(--action-hover); color: var(--ink); }
.btn-ghost { border-color: var(--line); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); }
/* --- HEADER ------------------------------------------------------------ */
.site-header {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem var(--pad);
background: color-mix(in srgb, var(--ground) 85%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark-name {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 0.04em;
}
.wordmark-tag {
font-size: 0.65rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
margin-top: 3px;
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.nav a { font-size: 0.9rem; font-weight: 500; color: var(--muted); transition: color 0.15s; }
.nav a:hover { color: var(--paper); }
/* Einseiter: markiert den Abschnitt, in dem man gerade steht (gesetzt von
main.js). Ohne das weiss man auf einer langen Scrollseite nicht, wo man ist. */
.nav a.is-active:not(.nav-cta) {
color: var(--paper);
font-weight: 600;
box-shadow: inset 0 -2px 0 var(--support);
}
.nav-cta {
color: var(--paper) !important;
border: 1.5px solid var(--support);
border-radius: var(--radius);
padding: 0.5rem 1rem;
}
.nav-cta:hover { background: var(--support); color: #fff !important; }
.nav a:not(.nav-cta) { display: none; }
@media (min-width: 720px) {
.nav a:not(.nav-cta) { display: inline; }
}
/* --- HERO -------------------------------------------------------------- */
.hero {
position: relative;
min-height: min(88vh, 820px);
display: flex;
align-items: flex-end;
padding: var(--pad);
overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* Dark scrim so the (light) hero text stays legible over the photo,
fading into the ivory page at the bottom. */
.hero-media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to top, var(--ground) 3%, transparent 45%),
linear-gradient(to right, rgba(14,46,42,0.86) 0%, rgba(14,46,42,0.30) 55%, transparent 100%);
}
/* Hero text sits on the darkened photo, so it stays light regardless of theme. */
.hero-copy { position: relative; z-index: 1; max-width: 40rem; color: #f7f4ef; }
/* Volle Deckkraft, nicht 0.85: Die Kopfzeile ist mit 12,8px Kleintext und braucht
damit 4,5:1. Auf dem hellen Laufbahn-Foto kam sie mit 0.85 auf nachgemessene
4,60:1 — bestanden, aber ohne jede Reserve. Ohne die Abschwaechung sind es 6,2:1.
Wer hier wieder abschwaecht, muss gegen das dann aktuelle Titelbild nachmessen. */
.hero-copy .eyebrow { color: #f7f4ef; }
.hero-copy h1 { color: #f7f4ef; }
.hero-copy .lede { font-size: 1.15rem; color: #f7f4ef; opacity: 0.94; margin: 1.5rem 0 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
/* Eine zweispaltige Hero-Fassung (.hero-split mit .hero-portraet) stand hier am
03.08.2026 kurzzeitig, als das Titelbild Dominics Portraet war. Sie wurde mit
dem Wechsel auf das Laufbahn-Motiv wieder entfernt, statt ungenutzt liegen zu
bleiben. Der Grund fuer ihre Existenz ist trotzdem festgehalten, weil er beim
naechsten Hochformat-Titelbild sofort wieder gilt: Ein Hochformat (1626x1934)
skaliert im vollflaechigen Hero bei 1600px Breite auf 1903px Hoehe, sichtbar
bleiben davon rund 820px, und ein Kopf fuellt allein etwa 36 Prozent der
Bildhoehe. Es entsteht zwangslaeufig ein Gesichts-Close-up. Wer wieder ein
Hochformat oben haben will, braucht den Text NEBEN dem Bild — und muss dann
auch die Schrift von hell auf dunkel drehen und das hervorgehobene Wort von
Ocker auf Petrol (Ocker hat auf Sand nur 2,67:1). Im git-Verlauf steht die
Fassung vollstaendig. */
/* --- STATS BAND -------------------------------------------------------- */
/* Wieder vier Kennzahlen (siehe Kommentar in index.html) — 2x2 auf schmalen
Screens, eine Zeile zu vier ab Desktop-Breite. */
.stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--line);
border-block: 1px solid var(--line);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
background: var(--ground);
padding: 2rem var(--pad);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.stat-num {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 3.5rem);
line-height: 1;
color: var(--paper);
font-variant-numeric: tabular-nums;
}
.stat-unit { color: var(--support); font-size: 0.5em; margin-left: 2px; }
.stat-label { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.02em; }
/* --- GENERIC SECTION --------------------------------------------------- */
.section { padding: clamp(4rem, 10vw, 7rem) var(--pad); max-width: var(--maxw); margin-inline: auto; }
.section-head { margin-bottom: 3rem; }
.section-lede { color: var(--muted); font-size: 0.9rem; margin: 0.75rem 0 0; }
/* --- ABLAUF-ZEITSTRAHL --------------------------------------------------- */
/* Schmal senkrecht, ab 62rem waagerecht von links nach rechts.
Die durchgehende Linie entsteht aus den Rahmen der : Sie beruehren
sich (gap: 0 in der Laufrichtung), deshalb ergibt border-top bzw.
border-left eine ungebrochene Linie. Ein eigenes Linien-Element waere
zusaetzliches Markup, das beim Umbruch nicht mitwandert.
Die Ziffern stehen in PETROL, nicht in Ocker. Ocker auf hellem Grund ist
Textfarbe unterhalb der Kontrastschwelle (ADR 0009). */
.ablauf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ablauf-steps li {
position: relative;
border-left: 1px solid var(--line);
padding: 0 0 2rem 1.5rem;
}
.ablauf-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
/* Der Punkt sitzt mittig auf der Linie: halbe Punktbreite nach aussen. */
.ablauf-steps li::before {
content: "";
position: absolute;
left: -5px;
top: 0.35rem;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--support);
}
.ab-num { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.1em; color: var(--support); }
.ablauf-steps h3 { font-size: 1.15rem; margin: 0.35rem 0 0.5rem; text-transform: none; letter-spacing: 0; }
.ablauf-steps p { color: var(--muted); font-size: 0.95rem; margin: 0; max-width: 34ch; }
@media (min-width: 62rem) {
.ablauf-steps { grid-template-columns: repeat(6, 1fr); }
.ablauf-steps li {
border-left: 0;
border-top: 1px solid var(--line);
padding: 1.75rem 1.25rem 0 0;
}
.ablauf-steps li:last-child { border-top-color: var(--line); padding-bottom: 0; }
.ablauf-steps li::before { left: 0; top: -5px; }
.ablauf-steps p { max-width: none; }
}
/* --- ANGEBOTS-KACHELN --------------------------------------------------- */
/* Vier große Kacheln mit Foto-Hintergrund. Die Preise liegen als Panel
darunter und fahren bei Hover (Zeigegerät), Fokus (Tastatur) oder Tap auf
den Button (Touch) hoch. Gefüllt aus pricing.json, siehe pricing.js. */
.offer-tiles { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .offer-tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--radius);
/* Höhe richtet sich nach dem höchsten Preis-Panel (derzeit Assessment) —
so muss in keiner Kachel gescrollt werden. Beim Ändern der Preisdaten
gegenprüfen, ob der Inhalt noch passt.
36rem -> 38rem am 03.08.2026: Das Performance-Assessment hat eine vierte
Umfangszeile bekommen, danach blieben in der Assessment-Kachel nur noch 6px
Luft (nachgemessen bei 1440px und 900px). Mit 38rem sind es rund 38px.
Wer hier weitere Zeilen ergaenzt, misst nach: scrollHeight des
.tile-prices-inner gegen die Kachelhoehe. */
min-height: 38rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: var(--petrol-deep);
}
.tile-media { position: absolute; inset: 0; z-index: 0; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim: hält den hellen Kacheltext über jedem Foto lesbar. */
.tile-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(14, 46, 42, 0.94) 20%,
rgba(14, 46, 42, 0.60) 65%,
rgba(14, 46, 42, 0.35) 100%
);
}
.tile-body {
position: relative;
z-index: 1;
padding: 2rem 1.75rem;
color: #f7f4ef;
}
.tile-index { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.1em; color: var(--amber); }
.tile-body h3 { margin: 0.5rem 0 0.75rem; color: #fff; }
.tile-body p { color: rgba(247, 244, 239, 0.88); font-size: 0.96rem; margin: 0; max-width: 42ch; }
.tile-toggle {
margin-top: 1.5rem;
background: none;
border: none;
padding: 0;
font: inherit;
font-size: 0.85rem;
font-weight: 700;
color: var(--amber);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.tile-toggle:hover { text-decoration: underline; }
.tile-toggle[disabled] { color: rgba(247,244,239,0.6); cursor: default; text-decoration: none; }
.tile-prices {
position: absolute;
inset: 0;
z-index: 2;
background: var(--petrol-deep);
color: #f7f4ef;
overflow-y: auto;
transform: translateY(101%);
transition: transform 0.35s ease;
}
/* Kein :focus-within — der Button behält nach dem Klick den Fokus, das Panel
bliebe also offen, obwohl aria-expanded schon "false" meldet. Tastatur läuft
über den Button (Enter/Space = click), das reicht. */
.tile:hover .tile-prices,
.tile.is-open .tile-prices { transform: translateY(0); }
/* Bis 900px gibt es entweder kein Hover (Touch) oder die Kachel wird so schmal,
dass die Preisliste nicht mehr in ein Overlay fester Höhe passt — sie müsste
scrollen, und ein Hover-Panel schließt sich beim Wegbewegen der Maus wieder.
Darunter wächst die Kachel stattdessen auf, wenn man sie antippt
(Akkordeon statt Overlay). Die Grenze ist bewusst dieselbe wie bei
.tile-prices-inner.is-dense weiter unten: Zweispaltigkeit existiert nur,
um das Overlay zu füllen. */
@media (max-width: 899px) {
/* Ohne Overlay braucht die Kachel die Panel-Höhe nicht vorzuhalten. */
.tile { min-height: 22rem; }
.tile-prices {
position: static;
transform: none;
overflow: hidden;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.tile.is-open .tile-prices { grid-template-rows: 1fr; }
.tile-prices-inner { min-height: 0; overflow: hidden; }
.tile:hover .tile-prices { grid-template-rows: 0fr; }
.tile.is-open:hover .tile-prices { grid-template-rows: 1fr; }
}
.tile-prices-inner { padding: 1.35rem 1.6rem; display: grid; gap: 0.7rem; }
/* Dichte Panels (ab 4 Einträgen) zweispaltig; Titel, Flaggschiff und Bundles
bleiben über die volle Breite, damit sie ihre Prominenz behalten.
Erst ab 900px — davor ist die Kachel ein Akkordeon, das mitwächst, und dort
liest sich eine Spalte besser als zwei sehr schmale. */
@media (min-width: 900px) {
/* minmax(0,…) statt 1fr: sonst zwingt langer Text die Spalten aus der Balance. */
.tile-prices-inner.is-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; align-content: start; }
/* .tp-row-wide kommt aus dem Feld "wide": true in pricing-data.js. Damit steht
die 10er-Karte im Personal-Training-Panel oben ueber die volle Breite, und die
beiden Abos liegen darunter nebeneinander auf gleicher Hoehe. */
.tile-prices-inner.is-dense > .tp-title,
.tile-prices-inner.is-dense > .tp-row-wide,
.tile-prices-inner.is-dense > .tp-row-featured,
.tile-prices-inner.is-dense > .tp-row-bundle { grid-column: 1 / -1; }
}
.tp-title { color: #fff; margin: 0; font-size: 1.1rem; }
.tp-row { display: grid; gap: 0.15rem; padding-top: 0.85rem; border-top: 1px solid rgba(247,244,239,0.18); }
.tp-row:first-of-type { padding-top: 0; border-top: none; }
.tp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.tp-name { font-weight: 600; font-size: 0.94rem; color: #fff; }
.tp-price {
font-family: var(--font-display);
font-size: 1.25rem;
color: #fff;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.tp-price-custom { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; }
.tp-unit { display: block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 400; color: rgba(247,244,239,0.6); text-align: right; }
.tp-strike { opacity: 0.5; font-size: 0.65em; margin-right: 0.35rem; font-family: var(--font-body); }
.tp-meta { font-size: 0.8rem; color: rgba(247,244,239,0.6); margin: 0; }
.tp-savings { color: var(--amber); font-weight: 600; }
.tp-addon { font-size: 0.82rem; color: rgba(247,244,239,0.7); margin: 0.15rem 0 0; }
.tp-includes {
font-size: 0.8rem;
color: rgba(247, 244, 239, 0.72);
line-height: 1.45;
margin: 0.1rem 0 0;
max-width: 44ch;
}
/* Hinweis, der fuer eine ganze Kategorie gilt, aus dem Feld "note" in
pricing-data.js. Steht einmal unter den Produkten des Panels, statt als
"term" an jedem einzelnen Abo zu kleben.
Im zweispaltigen Panel muss er ueber beide Spalten laufen, sonst haengt er
unter der linken und sieht aus, als gehoerte er nur dorthin. */
.tp-note {
font-size: 0.75rem;
color: rgba(247, 244, 239, 0.6);
margin: 0.5rem 0 0;
padding-top: 0.6rem;
border-top: 1px solid rgba(247, 244, 239, 0.18);
}
@media (min-width: 64rem) {
.tile-prices-inner.is-dense > .tp-note { grid-column: 1 / -1; }
}
.tp-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin: 0; }
.tp-row-featured, .tp-row-bundle {
background: rgba(247, 244, 239, 0.07);
border: 1px solid rgba(200, 133, 59, 0.45);
border-radius: var(--radius);
padding: 1rem;
}
.tp-row-featured:first-of-type, .tp-row-bundle:first-of-type { padding: 1rem; }
.pricing-notes { font-size: 0.85rem; color: var(--muted); margin-top: 2rem; max-width: 62ch; }
/* Platzhalter für fehlende Fotos — wiederverwendet von .tile-media, .portrait
und .hero-media, solange die echten Fotos (neuer Shoot) noch nicht da sind. */
.ph-label {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.3rem;
text-align: center;
padding: 1rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--muted);
background:
repeating-linear-gradient(45deg, rgba(20,64,59,0.06), rgba(20,64,59,0.06) 12px, transparent 12px, transparent 24px),
var(--surface-2);
border: 1px dashed var(--line);
}
.empty .ph-label { display: flex; }
.ph-file { opacity: 0.7; font-weight: 400; }
/* Hero-Bereiche brauchen einen dunklen Platzhalter statt des hellen
Karten-Musters, sonst verliert der weiße Hero-Text seinen Kontrast. */
.hero-media.empty { background: var(--petrol-deep); }
.hero-media .ph-label {
color: rgba(247,244,239,0.75);
background: none;
border: 1px dashed rgba(247,244,239,0.3);
margin: 1.5rem;
inset: 0;
}
.hero-media .ph-file { opacity: 0.6; }
/* Kachel-Platzhalter ebenfalls dunkel — der Kacheltext ist hell. */
.tile-media.empty { background: var(--petrol-deep); }
.tile-media .ph-label {
color: rgba(247,244,239,0.75);
background: none;
border: 1px dashed rgba(247,244,239,0.3);
margin: 1.25rem;
inset: 0;
}
.tile-media .ph-file { opacity: 0.6; }
/* --- APPROACH (split) -------------------------------------------------- */
.approach {
display: grid;
gap: clamp(2.5rem, 6vw, 5rem);
grid-template-columns: 1fr;
padding: clamp(4rem, 10vw, 7rem) var(--pad);
max-width: var(--maxw);
margin-inline: auto;
align-items: center;
}
@media (min-width: 900px) { .approach { grid-template-columns: 1.1fr 0.9fr; } }
.approach-copy p { color: var(--paper); opacity: 0.85; margin-top: 1.25rem; }
.approach-copy h2 { margin-bottom: 0.5rem; }
.pull {
margin: 2rem 0 0;
padding-left: 1.5rem;
border-left: 3px solid var(--support);
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
line-height: 1.15;
text-transform: uppercase;
color: var(--paper);
}
.approach-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.approach-list li { background: var(--surface); padding: 1.5rem; display: grid; gap: 0.4rem; }
.al-k { font-family: var(--font-display); font-size: 1.25rem; color: var(--support); letter-spacing: 0.03em; }
.al-v { color: var(--muted); font-size: 0.95rem; }
/* --- LEISTUNGEN (ADR 0017, Hierarchie nach ADR 0018) --------------------
Vier gleich grosse Kacheln lasen sich wie ein Katalog. Jetzt fuehrt eine
Leistung (volle Breite, mit Foto), die drei anderen stehen gleichrangig
darunter. Damit sagt die Darstellung dasselbe wie das Geschaeftsmodell:
Personal Training traegt, der Rest ergaenzt.
UMKEHRBAR: Soll eine andere Leistung fuehren, wird nur das mit
.lst-featured im HTML an die erste Stelle geschoben — hier ist nichts
auf "Personal Training" festgeschrieben. */
.leistungen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* Zwei Spalten, nicht drei (ADR 0019, Nachtrag vom 03.08.2026): Oben stehen die
beiden Hauptleistungen nebeneinander, darunter die beiden ergaenzenden. Die
Hierarchie traegt jetzt die POSITION, nicht mehr die Groesse — vorher fuehrte
eine Kachel ueber die volle Breite. Soll sich die Reihenfolge aendern, werden
die im HTML umsortiert und die Nummern 01-04 mitgezogen; im CSS ist nichts
auf eine bestimmte Leistung festgeschrieben. */
@media (min-width: 760px) { .leistungen { grid-template-columns: repeat(2, 1fr); } }
/* Seit ADR 0019 tragen ALLE vier Kacheln ein Foto, nicht mehr nur die fuehrende.
Deshalb liegt das padding jetzt einheitlich im .lst-text-Block statt im li —
sonst saesse das Bild in jeder Kachel eingerueckt statt randlos. */
/* "> li" statt "li": Seit die Kacheln eine eigene Punkteliste enthalten, gibt es
verschachtelte . Ohne den Kindselektor wuerden die Kachel-Regeln (weisser
Hintergrund, display:grid, padding 0) auch auf die Listenpunkte durchschlagen.
Gilt genauso fuer die Reveal-Auswahl in main.js. */
.leistungen > li { background: var(--surface); padding: 0; display: grid; gap: 0; align-content: start; }
.lst-text { padding: 1.75rem; display: grid; gap: 0.5rem; align-content: start; }
/* Die drei Punkte je Leistung: fette Ergebniszeile, darunter die Erklaerung.
Bewusst keine Aufzaehlungszeichen des Browsers, sondern ein kleiner Punkt in
Petrol, damit die Liste ruhig bleibt und nicht wie eine Checkliste wirkt. */
.lst-punkte { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1.1rem; }
.lst-punkte li { position: relative; padding-left: 1.15rem; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.lst-punkte li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--support);
}
.lst-punkte strong { display: block; margin-bottom: 0.15rem; color: var(--paper); font-weight: 700; }
.lst-num { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.1em; color: var(--amber); }
.lst-k { font-family: var(--font-display); font-size: 1.35rem; color: var(--support); letter-spacing: 0.03em; text-transform: uppercase; }
.lst-v { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
/* Bildkasten, in allen vier Kacheln gleich aufgebaut. Das feste
Seitenverhaeltnis sorgt dafuer, dass die drei kleinen Kacheln unabhaengig von
den Bildmassen (zwei Hochformate, zwei Querformate) gleich hoch bleiben. */
.lst-foto { position: relative; overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 10; }
.lst-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bildausschnitt je Motiv. Wichtig bei den beiden Hochformaten (724x1086): Ohne
eigene Werte schneidet der Standard 50%/50% den Kopf ab. */
.lst-foto-diagnostik img { object-position: 50% 50%; }
/* Handstand: etwas links und hoch, damit Dominic (rechts im Bild) und der
gesicherte Handstand beide sichtbar bleiben. */
.lst-foto-pt img { object-position: 55% 32%; }
.lst-foto-assessment img { object-position: 50% 38%; }
.lst-foto-online img { object-position: 55% 55%; }
/* Die Sonderbehandlung einer fuehrenden Kachel (.lst-featured: volle Breite, Foto
links, Text rechts, eigene Mindesthoehe) stand hier bis zum 03.08.2026 und ist
mit dem Wechsel auf das 2x2-Raster entfernt worden, statt ungenutzt liegen zu
bleiben. Alle vier Kacheln sind jetzt gleich aufgebaut.
Was dabei zu lernen war, falls je wieder eine Kachel herausgehoben werden soll:
Die Schreibweise muss "li.lst-featured" lauten, nicht ".lst-featured" allein —
".leistungen li" weiter oben ist spezifischer und dreht padding und gap sonst
zurueck. Und eine feste Mindesthoehe fuer die fuehrende Kachel haengt immer an
der Textlaenge der uebrigen: Wird dort laenger geschrieben, ist die fuehrende
Kachel ploetzlich die flachste, was wie ein Versehen aussieht. Im git-Verlauf
steht die vollstaendige Fassung. */
/* Ein Pull-Quote, das nicht in einer Textspalte steht, sondern allein im
Abschnitt — braucht eine eigene Breitenbegrenzung, sonst laeuft es ueber die
volle Sektionsbreite und liest sich schlecht. */
.pull-standalone { max-width: 40ch; margin-top: 3rem; }
/* Zwischenüberschrift innerhalb eines Abschnitts (z. B. "Werdegang",
"Qualifikationen" unter "Über mich") — kleiner als die Abschnitts-h2. */
.subhead { margin: 3rem 0 1.25rem; font-size: clamp(1.2rem, 2vw, 1.5rem); }
/* "Alle Artikel ansehen" unter einer gekürzten Auswahl. */
.section-more { margin: 1.75rem 0 0; }
.section-more a { color: var(--support); font-weight: 600; font-size: 0.92rem; }
.section-more a:hover { text-decoration: underline; }
/* PersonalFitness-Bewertungssiegel. Bewusst schlicht: Das Siegel bringt seinen
eigenen Rahmen mit, ein zweiter Rahmen von uns wuerde doppelt wirken. */
/* PersonalFitness-Bewertungswidget. Es bringt sein eigenes Aussehen mit — wir
geben ihm nur Abstand und eine Breitenbegrenzung, damit es auf grossen
Bildschirmen nicht ueber die ganze Sektionsbreite laeuft. */
/* Keine eigene Breitenbegrenzung mehr: Das Widget bringt eine Breit-Variante mit
(.pf-w2--wide) und setzt intern max-width: none, lief aber gegen unsere frühere
Deckelung von 46rem und stand deshalb schmal in einem 1200px breiten Abschnitt.
Jetzt nutzt es die volle Sektionsbreite wie die Qualifikations-Tabelle darüber,
damit beide Belege gleich breit untereinander stehen. */
.bewertungen { margin-top: 2.5rem; }
.bewertungen img { max-width: 100%; height: auto; }
/* --- UEBER-MICH SEITE ---------------------------------------------------
Wiederverwendet Tokens und Komponenten der Startseite, damit beide Seiten
wie ein Stück wirken statt wie zwei getrennt gebaute. */
.story-split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .story-split { grid-template-columns: 1fr 1.3fr; } }
.portrait { aspect-ratio: 4 / 5; max-width: 22rem; border-radius: var(--radius); overflow: hidden; position: relative; background: var(--surface-2); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-copy p { color: var(--paper); opacity: 0.85; margin-top: 1.25rem; }
.story-copy h2 { margin-bottom: 0.5rem; }
/* Die Werdegang-Zeitleiste (.timeline/.tl-item) wurde am 02.08.2026 entfernt,
weil der Abschnitt sie inhaltlich doppelt hatte — Regeln hier mit geloescht,
damit kein totes CSS liegen bleibt. Im git-Verlauf jederzeit auffindbar. */
.quals { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .quals { grid-template-columns: repeat(2, 1fr); } }
.quals li { background: var(--surface); padding: 1.25rem 1.5rem; font-size: 0.95rem; color: var(--paper); }
/* Laufende Ausbildungen ehrlich kennzeichnen, statt sie als abgeschlossen
auszugeben — irrefuehrende Qualifikationsangaben sind wettbewerbsrechtlich
riskant, unabhaengig von der Absicht. */
.qual-status { display: block; margin-top: 0.2rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
/* --- LEGAL (Impressum / Datenschutz / AGB / Einverständniserklärung) ---- */
.legal-body { max-width: 68ch; display: grid; gap: 0.5rem; }
.legal-body h3 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; margin: 1.75rem 0 0.5rem; }
.legal-body h3:first-child { margin-top: 0; }
.legal-body h4 { font-size: 0.95rem; text-transform: none; letter-spacing: 0; margin: 1.25rem 0 0.25rem; color: var(--paper); }
.legal-body p { color: var(--paper); opacity: 0.85; font-size: 0.95rem; line-height: 1.7; }
.legal-body a { color: var(--support); text-decoration: underline; }
.legal-meta { font-size: 0.88rem; opacity: 0.7; }
.legal-note { font-size: 0.85rem; opacity: 0.65; font-style: italic; }
.legal-table { border-collapse: collapse; width: 100%; max-width: 42rem; margin: 0.5rem 0 1rem; }
.legal-table th, .legal-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; font-weight: 400; color: var(--paper); }
.legal-table th { width: 40%; opacity: 0.7; font-weight: 600; }
.fill-line { border-bottom: 1px solid var(--muted); }
.fill-line-inline { display: inline-block; min-width: 8rem; border-bottom: 1px solid var(--muted); }
.fill-line-inline.long { min-width: 14rem; }
.legal-checklist { list-style: none; padding: 0; margin: 0.75rem 0; display: grid; gap: 0.6rem; }
.legal-checklist li { color: var(--paper); opacity: 0.85; font-size: 0.95rem; line-height: 1.6; }
.legal-checklist-single { font-size: 0.95rem; }
.print-btn { margin-top: 1.5rem; }
/* Diese Rechtsdokumente sind teils zum Ausdrucken gedacht (Einverständniserklärung).
Beim Drucken faellt die Website-Chrome weg, nur der Inhalt bleibt. */
@media print {
.no-print { display: none !important; }
body { background: #fff; }
.legal-body p,
.legal-body h3,
.legal-body h4,
.legal-table th,
.legal-table td,
.legal-meta,
.legal-note,
.legal-checklist li,
.legal-checklist-single { opacity: 1; color: #000; }
}
/* --- WISSEN (Übersicht + Artikel, ADR 0014) -----------------------------
Redaktionelle Inhalte, die Fachwissen zeigen und Vertrauen aufbauen.
Zwischenüberschriften in einem langen Artikel bekommen bewusst NICHT die
riesige Anton-Grossschrift der Seiten-h2 (.section h2 etc.) — bei fünf
Abschnitten in Folge wäre das zu laut. Eigene, ruhigere Skala hier. */
.wissen-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 2rem; }
.wissen-card { background: var(--surface); padding: 1.75rem; display: grid; gap: 0.6rem; }
.wissen-card-meta { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.wissen-card h3 { font-size: 1.3rem; margin: 0; text-transform: none; letter-spacing: 0; }
.wissen-card p { color: var(--paper); opacity: 0.85; margin: 0; max-width: 60ch; }
.wissen-card-link { color: var(--support); font-weight: 600; font-size: 0.92rem; }
.wissen-card-link:hover { text-decoration: underline; }
/* Artikel-Titel sind ganze Sätze, keine kurzen Marketing-Zeilen wie
"Training rund um deinen Körper" — die globale h1-Grösse (bis 5.5rem) ist
dafür gebaut und würde einen 13-Wörter-Titel über den ganzen Bildschirm
ziehen, bevor der erste Absatz sichtbar ist. Eigene, kleinere Skala. */
.article-head { max-width: 68ch; }
.article-head h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.05; }
.article-meta { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.03em; text-transform: uppercase; margin: 0.75rem 0 0; }
.article-lede { font-size: 1.15rem; color: var(--paper); opacity: 0.92; margin: 1.5rem 0 0; max-width: 62ch; }
.article-body { max-width: 68ch; margin-top: 2.5rem; display: grid; gap: 1.1rem; }
.article-body p { color: var(--paper); opacity: 0.85; line-height: 1.75; }
.article-body h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); text-transform: none; letter-spacing: 0; margin: 2rem 0 0.25rem; }
.article-body h2:first-child { margin-top: 0; }
/* Fragen (FAQ-Block) sind lesbare Sätze, keine Grossschrift-Schlagzeile. */
.article-body h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 1.5rem 0 0.1rem; }
.article-body ul { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.6rem; }
.article-body li { color: var(--paper); opacity: 0.85; line-height: 1.65; }
.article-body strong { color: var(--paper); opacity: 1; }
.article-body a { color: var(--support); text-decoration: underline; }
/* Direktzitate aus der Studie/Pressemitteilung — kursiv statt Grossschrift,
damit ein ganzer Satz lesbar bleibt (anders als .pull, das für kurze
Slogans gedacht ist). */
.article-quote { margin: 0.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--support); font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--paper); }
.article-quote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.85rem; color: var(--muted); }
/* Das CSS fuer Artikelgrafiken (.artikel-grafik und Verwandte) stand bis zum
06.08.2026 hier, ungenutzt. Es ist entfernt; HTML-Muster, CSS und die vier
nicht verhandelbaren Regeln stehen vollstaendig in ADR 0020, dritte Revision. */
.study-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 1.5rem 1.75rem; margin: 0.5rem 0; display: grid; gap: 0.5rem; }
.study-card-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--support); margin: 0; }
.study-card p { color: var(--paper); opacity: 0.85; font-size: 0.92rem; line-height: 1.6; margin: 0; }
.study-card a { color: var(--support); text-decoration: underline; }
.article-sources { max-width: 68ch; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: 0.6rem; }
.article-sources p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin: 0; }
.article-sources a { color: var(--support); }
/* Manche Artikel zaehlen mehrere gleichrangige Quellen auf (statt einer
Studien-Box) — Liste statt Absaetze, gleiche Schriftgroesse wie die p's. */
.article-sources ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.article-sources li { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
/* --- CTA --------------------------------------------------------------- */
/* Das CTA-Band trägt die Markenfarbe, nicht den Akzent: Petrol mit weißer
Schrift ist kontraststark, Amber wäre es nicht. */
.cta {
background: var(--petrol-deep);
color: #fff;
padding: clamp(4rem, 10vw, 7rem) var(--pad);
}
.cta-inner { max-width: var(--maxw); margin-inline: auto; text-align: center; }
.cta .eyebrow { color: rgba(255,255,255,0.8); }
.cta h2 { color: #fff; }
.cta-lede { color: rgba(255,255,255,0.92); margin: 1rem auto 2rem; max-width: 44ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.cta .btn-primary { background: var(--sand); color: var(--petrol-deep); }
.cta .btn-primary:hover { background: #fff; color: var(--petrol-deep); }
.cta .btn-ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.cta .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
/* Antwortzusage unter den Knoepfen. Sie beantwortet die Frage, die jeder stellt,
bevor er eine Mail schreibt: wie lange warte ich? Steht bewusst NACH den
Knoepfen und kleiner, damit sie den Blick nicht vom Klick wegzieht.
Deckkraft 0.88 statt 1.0: nachgemessen 11,56:1 auf Petrol dunkel (#0E2E2A) bei
14,4 px, also weit ueber der Schwelle. Wer sie weiter abschwaecht, misst nach
(ADR 0019). */
.cta-note { margin: 1.25rem auto 0; font-size: 0.9rem; color: rgba(255,255,255,0.88); }
/* --- SCROLL REVEAL (added by main.js) ---------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* --- FOOTER ------------------------------------------------------------ */
.site-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
padding: 2rem var(--pad);
font-size: 0.85rem;
color: var(--muted);
border-top: 1px solid var(--line);
align-items: center;
}
.footer-legal a:hover { color: var(--paper); text-decoration: underline; }
/* Siegel von personalfitness.de (ADR 0016), vierter Eintrag der Fusszeile.
line-height: 0 am Link, damit unter dem Bild kein Zeilenrest steht und der
Link genau so hoch ist wie das Siegel.
height: auto ueberschreibt das height-Attribut am Element. Das Attribut ist
nur zum Platzhalten vor dem Laden da; die Proportion soll das Bild selbst
bestimmen, falls personalfitness.de das Siegel je anders zuschneidet. */
.footer-siegel { line-height: 0; }
/* ORIGINALGROESSE 240 px, bewusst nicht kleiner (06.08.2026).
Vorher stand hier 120 px, also die Haelfte. Damit lief die Zeile
"7 Kundenbewertungen" auf rund 6 px Hoehe, und Dominic hat seine eigene
Bewertungszahl als 5 gelesen. Wenn der Betreiber sie falsch liest, liest sie
jeder Besucher falsch. Ein Siegel, das die Leistung kleiner erscheinen laesst,
als sie ist, richtet mehr Schaden an als gar keins.
Wer es wieder verkleinern will, prueft vorher am Bildschirm, ob die Zahl
lesbar bleibt. Messen reicht hier nicht, ansehen ist noetig. */
.footer-siegel img { display: block; width: 240px; height: auto; }