/* ===================================================================== FREEFIGHT-FITNESS – BASIS (Design-Staging) Fonts (lokal, WOFF2), Mini-Reset, Typografie, Layout-Primitive, Buttons, A11y-Grundgerüst (Skip-Link, Fokus, reduced-motion). Block-förmig gebaut: alles hier landet später in theme.json/style.css. ===================================================================== */ /* ---- Fonts: 100 % lokal (Alt-Fehler D1: Google-Fonts remote) ---- */ @font-face { font-family: "Interstate"; src: url("../assets/fonts/interstate-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Interstate"; src: url("../assets/fonts/interstate-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Interstate"; src: url("../assets/fonts/interstate-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Interstate"; src: url("../assets/fonts/interstate-blackitalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "Interstate Black Cond"; src: url("../assets/fonts/interstate-blackcond.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } /* ---- Mini-Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* 🚨 `scroll-padding-top` fehlte bisher ganz: der Seitenkopf klebt oben, also landete jedes Sprungziel (#anfrage, #preise, #anmeldung …) TEILWEISE DAHINTER. Mit der Topbar ist der Kopf 104 px hoch und es fiel auf. Eine Zeile, wirkt auf alle Anker der Seite. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 0.5rem); } img, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } /* ---- Grundtypografie ---- */ body { font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink); background: var(--c-paper); } /* 🚨 Überschriften sind auf dieser Marke KURSIV und CONDENSED – und zwar alle. Gemessen im Webflow-Export: `body { font-family: Interstate cond }`, und die Headline-Klassen setzten darauf nur noch `font-style: italic` (.heading-7, .heading-uu, .heading-voranmeldungen, .heading-medium…, .hero-h1 – 20+ Stellen auf 8 Seiten). Deshalb steht die Regel hier an der Wurzel und nicht in Einzelklassen: Kursiv ist der Normalfall, nicht die Ausnahme. Wie bei der Hero-Wortmarke ist die Kursive SYNTHETISCH (es gibt keine Condensed-Italic-Datei) – das ist der Marken-Look, nicht ein Mangel. Die zweite Ebene der Alt-Seite (Karten-/Akzenttitel in Interstate kursiv, NICHT condensed) ist unsere Klasse .kicker-italic in site.css. */ h1, h2, h3, h4 { font-family: var(--f-display); font-style: italic; font-weight: 900; line-height: var(--lh-head); text-wrap: balance; /* Lange deutsche Komposita (z. B. "Datenschutzerklaerung") sprengen sonst schmale Viewports: gemessen 383 px Wortbreite bei 358 px Spalte auf 390 px Mobil. Trennung braucht lang="de" am (ist auf allen Seiten gesetzt). Gilt fuer alle Ueberschriften, nicht nur die eine Seite - die Betreiber tippen spaeter selbst deutsche Komposita ein. Muss ins WP-Theme uebernommen werden. */ overflow-wrap: break-word; hyphens: auto; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { max-width: 65ch; } a { color: inherit; } /* Browser setzen
kursiv. Das ist hier nie gewollt: die Kursive ist der Marken-Look der Display-Schrift, nicht die Auszeichnung einer Anschrift. Stand bisher als Inline-Style auf der Kontaktseite. */ address { font-style: normal; } /* --------------------------------------------------------------------------- VERTIKALER RHYTHMUS (Phase 0, 16.09.2026) Ursache der 13 Inline-`margin-top`: Zeile 42 setzt `* { margin: 0 }`, und es gab KEINE Regel, die den Abstand wieder vergibt. Also musste ihn jedes Element einzeln im Markup mitbringen. --------------------------------------------------------------------------- */ /* Absatz direkt nach einer Ueberschrift. Gemessen ueber alle 12 Seiten: 64 solche Paare, davon 31 mit genau diesem Wert. Das ist der Standardfall. 🚨 `:where()` druckt die Spezifitaet auf 0,0,1, damit JEDE Komponentenregel (0,1,1) weiterhin gewinnt: die 11 px in `.kurs-karte__karte` und die 24 px in den zentrierten Sektionskoepfen bleiben unangetastet. */ :where(h1, h2, h3, h4) + p { margin-top: var(--sp-2); } /* ⚠️ Die beiden Karten-Bausteine wollen den Text DIREKT unter der Zeile. Gemessen: 14 Paare mit 0 px, alle in `.num-block` oder `.glow-karte`. Ohne diese Ausnahme haette die Regel oben sie alle aufgerissen. 🚨 Auch hier der Kontext in `:where()`: sonst 0,1,1 und damit staerker als jede Komponentenklasse. Eine Ausnahme soll die Basis korrigieren, nicht spaetere Bausteine aussperren. */ :where(.num-block, .glow-karte) :where(h1, h2, h3, h4) + p { margin-top: 0; } /* --------------------------------------------------------------------------- LESEBREITE Stand 8× als Inline-`max-width` im Markup, in vier verschiedenen Werten (46/44/42/40 rem). 🚨 Bei 1440 px nachgemessen: ALLE acht Absaetze brechen bei 46rem exakt gleich um wie bei ihrem Einzelwert, die Unterschiede waren also folgenlos. Deshalb ein Wert, ohne jede sichtbare Aenderung. Auf Mobil greift keiner davon: bei 390 px ist die Spalte 340 px breit. Die Basis `p { max-width: 65ch }` (634 px) ist hier zu schmal, drei Absaetze wuerden damit eine Zeile mehr brauchen. --------------------------------------------------------------------------- */ .lesebreite { max-width: 46rem; } .lesebreite--mitte { max-width: 46rem; margin-inline: auto; } /* --------------------------------------------------------------------------- FARB-BASIS für Fliesstext (Phase 0, 16.09.2026) Vorher stand beides 18× als Inline-Style im Markup. Das waren keine 18 Einzelfaelle, sondern zwei fehlende Regeln. --------------------------------------------------------------------------- */ /* Hervorhebung ist immer kraeftiger als ihr Absatz. Noetig, weil Fliesstext teils --c-on-dark-dim traegt und die Daempfung sonst erbt (D-024). Spezifitaet 0,0,1: jede Komponentenregel (z.B. `.kurs-karte__gruppen strong`) gewinnt weiterhin. */ strong { color: var(--c-paper); } /* Die einzige helle Insel im Projekt. Gemessen am 16.09.2026: nur `.section--paper` traegt einen hellen Grund, dort erbt korrekt die dunkle Textfarbe. Weiss waere hier unsichtbar. 🚨 `:where()` um den Kontext: ohne das haette der Selektor 0,1,1 und laege damit UEBER jeder Komponentenklasse (0,1,0) – genau die Falle aus P-006, die wir gerade abgeraeumt haben. So bleibt er bei 0,0,1 und gewinnt allein durch seine spaetere Position gegen die Basis darueber. */ :where(.section--paper) strong { color: inherit; } /* Fettdruck INNERHALB eines Fliesstext-Links bleibt Linkfarbe. ⚠️ Der Fall existiert heute auf keiner der 12 Seiten (nachgemessen), wird im Editor aber entstehen, sobald jemand ein Wort in einem Link fett setzt: `

Jetzt Probetraining buchen

`. Ohne diese Zeile faerbt `strong` das Wort weiss mitten in den gruenen Link hinein, denn eine direkt gesetzte Farbe verdraengt die geerbte. Ein Link ist eine Einheit, also erbt der Fettdruck. */ p a :where(strong) { color: inherit; } /* Link im Fliesstext ist gruen. Nur `p a`, NICHT `a` global und NICHT `li a`: Buttons, Kurskacheln (ganze
  • verlinkt), Pfeillinks und Kontaktkacheln sind bewusst nicht gruen. 🚨 Spezifitaet 0,0,2 ist Absicht. Komponentenregeln wie `.pt__direkt a` (0,1,1) gewinnen dagegen, und genau das soll so sein: Telefon und E-Mail bleiben weiss, weil gruen auf gruen nicht lesbar war (Patrick, 16.09.). */ p a { color: var(--c-brand); } /* ---- Layout-Primitive (= künftige Group/Container-Blöcke) ---- */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--section-y); } .section--dark { background: var(--c-bg-dark); color: var(--c-paper); } .section--dark p { color: var(--c-on-dark-dim); } /* ---- Buttons (Optik wie Original: weiß auf Grün-Verlauf – D-007; Kontrast-Variante wird in der Design-Abstimmung gezeigt) ---- */ .btn { display: inline-block; /* Manrope, nicht Interstate: Interstate ist die Display-Schrift fuer Headlines. In Button-Beschriftungen wirkt sie fremd (Patrick, 15.09.). Entspricht D-002, wo Manrope fuer „Body/Formulare/Footer" vorgesehen war. */ font-family: var(--f-body); font-weight: 700; font-size: var(--fs-body); color: var(--c-paper); background-image: linear-gradient(49deg, var(--c-brand), var(--c-brand-deep)); border: 0; border-radius: var(--radius-sm); padding: 0.9em 1.6em; text-decoration: none; cursor: pointer; transition: transform var(--speed), box-shadow var(--speed); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px var(--c-brand); } /* ---- A11y-Grundgerüst (Alt-Fehler R6) ---- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--c-ink); color: var(--c-paper); padding: var(--sp-1) var(--sp-2); } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Kein Scroll-Reveal (D-007): Inhalte sind IMMER sofort sichtbar. Bewegung nur als sanfte Zutat – und respektiert Nutzer-Präferenz. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }