/* ========================================================================= Pro Vitess Leonberg — Designsystem des Neuentwurfs ========================================================================= Angelegt am 22.09.2026 auf Ansage von Julian: „Du baust die gesamte Pro Vitess Seite neugestaltet nach. Gleiche Inhalte, gleiche Bilder. Was wichtig ist, ist dass diese geisteskrank gut wird. Hangel dich an der Fortschritt und Kurpark Seite entlang." WARUM EINE ZWEITE DATEI UND NICHT EIN ANBAU AN style.css -------------------------------------------------------------------------- `style.css` ist in vier Korrekturrunden aus gemessenen Elementor-Werten der Altseite gewachsen: 3852 Zeilen, Typo-Skala aus Quellmesswerten, Standard- radius 3 px, 91 Radius-Stellen, ein Schatten. Sie ist gut gepflegt — aber sie ist die Handschrift der ALTEN Seite. Ein Neuentwurf, der darin weiterschreibt, erbt genau die Flachheit, die er ablösen soll, und jede neue Regel müsste gegen zwei bis drei Klassen Spezifität ankämpfen. Deshalb: ein eigenes System, seitenweise umgestellt. Eine Seite lädt ENTWEDER `style.css` ODER diese Datei, nie beides — zwei Fundamente nebeneinander wären genau der Fehler, vor dem der Redesign-Skill warnt. Solange nicht alle Seiten umgestellt sind, laufen beide Systeme nebeneinander, aber nie auf derselben Seite. WAS AUS DEM BESTAND UNVERÄNDERT ÜBERNOMMEN IST (Sperrliste des Plans) -------------------------------------------------------------------------- Marken-Rot #AC003A · der Wortlaut sämtlicher Inhalte · Rechtstexte · alle Slugs · die Bilder. Neu sind Raster, Typo-Skala, Flächen, Formsprache und die Dramaturgie der Seite. AUFBAU (wie bei FORTSCHRITT, damit sich beide Projekte gleich lesen) -------------------------------------------------------------------------- 1 · Tokens 7 · Karten 13 · Klick-zum-Laden 2 · Basis 8 · Zahlen & Laufband 14 · Fußzeile 3 · Layout 9 · Listen 15 · Bewegung 4 · Kopfleiste 10 · Split 16 · Responsive 5 · Hero 11 · Bewertungen 6 · Knöpfe 12 · Formulare ========================================================================= */ /* ========================================================= 1 · Tokens ========================================================= */ :root { /* --- Marke ------------------------------------------------------------ #AC003A ist gesetzt und steht in der Sperrliste. Die übrigen Töne sind daraus abgeleitet, nicht dazuerfunden: --rot-tief dunklere Stufe für Hover auf hellem Grund --rot-licht aufgehellt für Schrift auf dunklem Grund. Reines #AC003A trägt auf #121212 nur 2,9:1 — zu wenig für Text. #FF6E96 wurde am 18.09.2026 für Block C1 gerechnet: 7,4:1. --rot-tint sehr helle Fläche für Hinweiskästen auf Weiß Gemessen: Weiß auf #AC003A = 7,46:1 · #AC003A auf Weiß = 7,46:1. */ --rot: #AC003A; --rot-tief: #8A002F; --rot-licht: #FF6E96; --rot-tint: #FDECEC; /* --- Fundament dunkel ------------------------------------------------- Vier Stufen statt einer. #121212 war im Bestand der einzige dunkle Ton; er bleibt als --tief-3 die Kartenfläche, damit Bestandsbausteine beim Umstellen nicht springen. Die übrigen Stufen sind neu und geben der dunklen Seite Tiefe, statt sie flach schwarz zu lassen. */ --tief: #0B0B0D; /* Seitengrund dunkel */ --tief-2: #121214; /* dunkle Sektion, eine Stufe heller */ --tief-3: #1A1A1D; /* Karten auf Dunkel */ --tief-rand: #2A2A2E; /* Linien auf Dunkel */ /* --- Helle Flächen --- */ --weiss: #FFFFFF; --flaeche: #F5F5F4; /* helle Sektion */ --flaeche-2: #EDEDEB; /* zweite helle Stufe */ --linie: #E3E3E0; --feldrand: #C4C4C0; /* --- Text ------------------------------------------------------------- Der Bestand führte #000 als Fließtextfarbe. Reines Schwarz auf Weiß ist hart; #17171A trägt 17,9:1 und liest sich ruhiger. Das ist keine Abweichung von der Sperrliste: Dort steht der GEMESSENE GRUNDTON der Altseite, und der galt für den Rebuild. Im Neuentwurf zählt die Lesbarkeit. */ --text: #17171A; --text-leise: #5E5E63; --text-hell: rgba(240, 240, 242, .94); --text-hell-leise: rgba(240, 240, 242, .62); /* --- Zustände (aus dem Bestand übernommen, dort gerechnet) --- */ --fehler: #AC003A; --fehler-hell: #FDECEC; --ok: #146B3A; --ok-hell: #EEF6F1; --sterne: #F5B301; /* --- Glas & Schleier --- */ --glas: rgba(255, 255, 255, .06); --glas-rand: rgba(255, 255, 255, .12); --overlay: rgba(8, 8, 10, .58); /* --- Schrift ---------------------------------------------------------- Beide Familien liegen seit dem 18.09.2026 lokal im Projekt. Sora wurde damals am Vergleich mit der Original-Wortmarke gewählt: eine breite geometrische Grotesk mit fast kreisrundem O. */ --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Sora", "Lato", system-ui, Arial, sans-serif; /* Typo-Skala: mobile first, wächst per clamp mit. Bewusst GRÖSSER als im Bestand — dort kam die Skala aus den gemessenen Werten der Elementor-Altseite und deckelte H1 bei 70 px. Eine Überschrift, die die Seite tragen soll, braucht mehr Raum. Sora läuft 14,5 % breiter als Lato (gemessen 18.09.2026); die Mobilwerte sind deshalb bewusst zurückhaltend gesetzt. */ --t-riesig: clamp(2.625rem, 11.5vw, 5.25rem); /* 42 → 84 px, Hero */ --t-gross: clamp(1.875rem, 5.2vw, 3.25rem); /* 30 → 52 px, Sektions-H2 */ --t-mittel: clamp(1.5rem, 3.8vw, 2.25rem); /* 24 → 36 px */ --t-klein: clamp(1.1875rem, 2.1vw, 1.4375rem); /* 19 → 23 px, Kartentitel */ --t-lese: clamp(1.0625rem, 1rem + .4vw, 1.1875rem); --t-text: clamp(1rem, .96rem + .24vw, 1.0625rem); --t-mini: .9375rem; --t-winzig: .8125rem; --lh-display: 1.05; --lh-titel: 1.15; --lh-text: 1.65; --lh-eng: 1.45; /* Zeilenlänge: 45 bis 75 Zeichen sind lesbar. */ --mass: 68ch; --mass-eng: 54ch; /* --- Form ------------------------------------------------------------- Der Bestand hatte 3 px als Standardradius — die harte Kante der Elementor-Quelle. Hier vier abgestufte Radien plus die Pille. */ --r-karte: 18px; --r-klein: 10px; --r-gross: 28px; --r-pille: 999px; --schatten: 0 8px 26px rgba(11, 11, 13, .07); --schatten-hoch: 0 18px 44px rgba(11, 11, 13, .14); --schatten-tief: 0 26px 64px rgba(11, 11, 13, .22); --schatten-dunkel:0 26px 64px rgba(0, 0, 0, .5); --container: 1220px; --container-schmal: 780px; --container-weit: 1480px; --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --sektion: clamp(4rem, 9vw, 7.5rem); --kopf-hoehe: 76px; --kopf-hoehe-klein: 60px; } /* ========================================================= 2 · Basis ========================================================= */ @font-face { font-family: 'Lato'; src: url('/assets/fonts/Lato-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap } @font-face { font-family: 'Lato'; src: url('/assets/fonts/Lato-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap } @font-face { font-family: 'Lato'; src: url('/assets/fonts/Lato-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap } @font-face { font-family: 'Lato'; src: url('/assets/fonts/Lato-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap } /* Sora ist ein Variable Font (Achse 100–800) — eine Datei für alle Schnitte. */ @font-face { font-family: 'Sora'; src: url('/assets/fonts/Sora-Variable.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap } *, *::before, *::after { box-sizing: border-box } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } } body { margin: 0; background: var(--weiss); color: var(--text); font-family: var(--font); font-size: var(--t-text); line-height: var(--lh-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility } img, picture, video, svg { max-width: 100%; height: auto; display: block } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-titel); letter-spacing: -.02em; margin: 0 0 var(--s2); /* Ohne das brechen lange Fachwörter wie „Vibrationstraining" auf schmalen Schirmen aus der Spalte statt umzubrechen. */ overflow-wrap: break-word } h1 { font-size: var(--t-riesig); line-height: var(--lh-display) } h2 { font-size: var(--t-gross) } h3 { font-size: var(--t-klein) } h4 { font-size: var(--t-text) } p, li { overflow-wrap: break-word } p { margin: 0 0 var(--s2); max-width: var(--mass) } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .18em } a:hover { text-decoration-color: currentColor } :focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; border-radius: 4px } .section--dunkel :focus-visible, .hero :focus-visible { outline-color: var(--rot-licht) } /* Der Sprunglink liegt außerhalb des Blattes und kommt bei Fokus herein. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--rot); color: #fff; padding: var(--s1) var(--s2); border-radius: 0 0 var(--r-klein) 0; font-weight: 700 } .skip-link:focus { left: 0 } .nur-fuer-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 } /* ========================================================= 3 · Layout ========================================================= */ .container { width: min(100% - 2 * var(--s3), var(--container)); margin-inline: auto } .container--schmal { width: min(100% - 2 * var(--s3), var(--container-schmal)) } .container--weit { width: min(100% - 2 * var(--s3), var(--container-weit)) } .section { padding-block: var(--sektion); position: relative } .section--eng { padding-block: clamp(2.5rem, 5vw, 4rem) } .section--flaeche{ background: var(--flaeche) } .section--flaeche-2 { background: var(--flaeche-2) } .section--dunkel { background: var(--tief-2); color: var(--text-hell) } .section--dunkel h1, .section--dunkel h2, .section--dunkel h3, .section--dunkel h4 { color: #fff } /* Eine Dunkelzone fasst mehrere Abschnitte zu EINER Fläche zusammen. Getrennt hätte jeder seinen eigenen Lichtkegel, und dazwischen stünde eine sichtbare Naht — derselbe Befund wie bei FORTSCHRITT am 18.09.2026. */ .dunkelzone { background: var(--tief-2); color: var(--text-hell); position: relative; isolation: isolate } .dunkelzone > .section { background: transparent } .dunkelzone h1, .dunkelzone h2, .dunkelzone h3, .dunkelzone h4 { color: #fff } /* Lichtkegel auf dunklen Flächen: nimmt der großen schwarzen Fläche die Leblosigkeit, ohne ein Bild zu brauchen. Rein dekorativ. */ [data-glanz]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 12% 0%, rgba(172, 0, 58, .22) 0%, transparent 70%), radial-gradient(45% 45% at 92% 18%, rgba(172, 0, 58, .12) 0%, transparent 72%) } /* Breite in rem, nicht in ch — dieselbe Falle wie im Hero: `ch` misst die Nullbreite der EIGENEN Schrift (hier Fliesstext), waehrend die H2 mit bis zu 52 px darin steht. 34ch ergaben rund 290 px, und „Trainieren Sie, wie es zu Ihnen passt" lief vierzeilig (gemessen 22.09.2026). Faustregel fuer diese Datei: `ch` nur an dem Element, dessen Schriftgroesse auch gemeint ist — also an

, nie an einem Container mit grossen Kindern. */ .section__kopf { margin-bottom: var(--s4); max-width: 46rem } .section__kopf p { color: var(--text-leise); font-size: var(--t-lese); max-width: var(--mass) } .section--dunkel .section__kopf p, .dunkelzone .section__kopf p { color: var(--text-hell-leise) } .section__kopf--weit { max-width: none } .section__kopf--mitte { margin-inline: auto; text-align: center } .section__kopf--mitte p { margin-inline: auto } /* Der Kicker sagt, wo man ist. Das Pfeil-Zeichen ist dasselbe Signal wie im Logo-Winkel der Marke und ersetzt den Zierstrich der Altseite. */ .kicker { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 700; font-size: var(--t-winzig); letter-spacing: .16em; text-transform: uppercase; color: var(--rot); margin-bottom: var(--s2) } .kicker::before { content: "›"; font-size: 1.35em; line-height: 0; transform: translateY(.05em) } .section--dunkel .kicker, .dunkelzone .kicker { color: var(--rot-licht) } /* Im Hero WEISS, nicht im aufgehellten Rot: #FF6E96 hat eine Leuchtdichte von 0,33 und braucht eine verlaesslich dunkle Flaeche. Ueber bewegtem Video gibt es die nicht — gemessen 1,62:1 bei Soll 4,5. Weiss traegt ueberall, und der Schatten faengt die letzten hellen Reststellen ab. Das Pfeil-Zeichen bleibt rot: Es ist Zierat, kein Text, und faellt damit nicht unter 1.4.3. */ .hero .kicker { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .6) } .hero .kicker::before { color: var(--rot-licht) } /* Der zweifarbige Teil einer Überschrift. Er trägt die Aussage, nicht nur Farbe: „Zielgerecht trainieren" hebt sich vom Ort ab. */ .akzent { color: var(--rot) } .section--dunkel .akzent, .dunkelzone .akzent, .hero .akzent { color: var(--rot-licht) } .grid { display: grid; gap: var(--s3) } @media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 1040px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media (min-width: 720px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2) } } /* ========================================================= 4 · Kopfleiste ========================================================= */ .kopf { position: sticky; top: 0; z-index: 900; background: color-mix(in srgb, var(--weiss) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--linie); transition: min-height .22s ease, background .22s ease, box-shadow .22s ease } .kopf__inner { display: flex; align-items: center; gap: var(--s3); min-height: var(--kopf-hoehe) } .kopf__logo { display: flex; align-items: center; flex: 0 0 auto } .kopf__logo img { width: 116px; height: auto; transition: width .22s ease } .kopf__nav { margin-left: auto } /* Der Kopf über einem randlosen Hero: durchsichtig, bis gescrollt wird. Das Bild läuft dann unter die Leiste und der Hero beginnt ganz oben. */ /* GEMESSEN an der Glyphenflaeche (22.09.2026): Die weisse Navigation stand auf hellen Stellen des Hero-Videos bei 1,71 bis 3,92:1, Soll 4,5. Ein durchsichtiger Kopf auf bewegtem Bild kann das nicht anders loesen — das Motiv wechselt staendig die Helligkeit. Deshalb liegt hinter der Leiste ein eigener Verlauf: oben deckend genug fuer Schrift, nach unten auslaufend, damit das Bild offen bleibt. Er sitzt am KOPF und nicht am Hero, weil er mit der Leiste verschwinden muss, sobald diese ihre eigene Flaeche bekommt. */ .kopf--auf-bild { background: transparent; backdrop-filter: none; border-bottom-color: transparent; color: #fff; position: sticky; isolation: isolate } .kopf--auf-bild::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1; height: calc(var(--kopf-hoehe) + 3.5rem); pointer-events: none; background: linear-gradient(180deg, rgba(8, 8, 10, .82) 0%, rgba(8, 8, 10, .62) 45%, rgba(8, 8, 10, 0) 100%); transition: opacity .22s ease } .kopf--auf-bild.ist-klein::before { opacity: 0 } /* Die Wortmarke ist grau und rot auf WEISSEM, undurchsichtigem Grund (nachgesehen: 622x348, Eckpixel deckend weiss). Eine Farbumkehr macht daraus einen weissen Block, und Grau auf Dunkel waere ohnehin kaum lesbar. Deshalb bekommt sie auf dem Bild eine eigene weisse Flaeche — dieselbe Loesung, die das Partnerlogo im Fuss seit dem 01.09.2026 traegt. Die Marke bleibt damit unveraendert; umgefaerbt wird nichts. */ .kopf--auf-bild .kopf__logo { background: #fff; border-radius: var(--r-klein); padding: .45rem .7rem; box-shadow: 0 6px 20px rgba(0,0,0,.25) } .kopf--auf-bild.ist-klein .kopf__logo { box-shadow: none; padding: .3rem .5rem } .kopf--auf-bild .nav__link { color: #fff } .kopf.ist-klein { min-height: 0; box-shadow: 0 2px 14px rgba(11, 11, 13, .08) } .kopf.ist-klein .kopf__inner { min-height: var(--kopf-hoehe-klein) } .kopf.ist-klein .kopf__logo img { width: 92px } /* Sobald der Kopf schrumpft, steht er auf Inhalt statt auf dem Hero — dann braucht er wieder seine Fläche, auch in der Bild-Variante. */ .kopf--auf-bild.ist-klein { background: color-mix(in srgb, var(--weiss) 92%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom-color: var(--linie); color: var(--text) } .kopf--auf-bild.ist-klein .kopf__logo img { filter: none } .kopf--auf-bild.ist-klein .nav__link { color: var(--text) } .nav__liste { display: flex; align-items: center; gap: clamp(.9rem, 1.7vw, 1.75rem); list-style: none; margin: 0; padding: 0 } .nav__link { font-family: var(--font-display); font-weight: 600; font-size: var(--t-mini); letter-spacing: .01em; text-decoration: none; padding-block: .5rem; position: relative; white-space: nowrap } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rot); transform: scaleX(0); transform-origin: left; transition: transform .22s ease } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1) } .kopf--auf-bild:not(.ist-klein) .nav__link::after { background: #fff } /* Sprungziele: --anker-abstand geht mit dem schrumpfenden Kopf mit. Ohne das stehen Anker hinter der Leiste — der Fehler, der im Bestand zweimal auflief. */ /* GEMESSEN am 22.09.2026, nachdem die Leiste auf dem Bild Polster bekommen hat: Der Kopf steht am Handy dann 96 px hoch, der Ankerabstand rechnete mit 92 — Sprungziele lagen vier Pixel hinter der Leiste. Vier Pixel sieht niemand als Fehler, aber der erste Buchstabe der Ueberschrift ist weg. Der Abstand ist deshalb bewusst grosszuegig: Ein Anker, der zu tief springt, faellt niemandem auf; einer, der zu hoch springt, verschluckt Text. Der geschrumpfte Wert ist der wichtigere — beim Klick auf einen Anker wird gescrollt, und dann ist die Leiste klein. */ :root { --anker-abstand: calc(var(--kopf-ist, calc(var(--kopf-hoehe) + var(--kopf-luft))) + 1.5rem) } :root.kopf-klein { --anker-abstand: calc(var(--kopf-hoehe-klein) + 1.25rem) } [id] { scroll-margin-top: var(--anker-abstand) } /* --- Burger und Schublade --- */ .burger { display: none; margin-left: auto; width: 46px; height: 46px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; color: inherit } .burger span, .burger span::before, .burger span::after { content: ""; position: absolute; left: 11px; width: 24px; height: 2px; background: currentColor; transition: transform .22s ease, opacity .18s ease } .burger span { top: 22px } .burger span::before { top: -7px; left: 0 } .burger span::after { top: 7px; left: 0 } .burger[aria-expanded="true"] span { background: transparent } .burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg) } .burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg) } .schublade { position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); z-index: 950; background: var(--tief); color: var(--text-hell); padding: calc(var(--kopf-hoehe) + var(--s3)) var(--s3) var(--s4); transform: translateX(100%); transition: transform .26s ease; overflow-y: auto; overscroll-behavior: contain } .schublade[data-offen="true"] { transform: none } .schublade__liste { list-style: none; margin: 0; padding: 0 } .schublade__liste a { display: block; padding: .9rem 0; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--t-lese); color: #fff; border-bottom: 1px solid var(--tief-rand) } .schublade__liste a:hover { color: var(--rot-licht) } .schleier { position: fixed; inset: 0; z-index: 940; background: rgba(8, 8, 10, .6); opacity: 0; pointer-events: none; transition: opacity .26s ease } .schleier[data-offen="true"] { opacity: 1; pointer-events: auto } /* ========================================================= 5 · Hero ========================================================= */ .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--tief); color: #fff; display: flex; align-items: flex-end; min-height: clamp(520px, 92svh, 860px); /* Der Inhalt beginnt unter der Kopfleiste, das BILD läuft darunter durch. */ padding-top: calc(var(--kopf-ist, calc(var(--kopf-hoehe) + var(--kopf-luft))) + var(--s4)); padding-bottom: clamp(var(--s4), 7vw, var(--s5)); /* Um die VOLLE Hoehe der Leiste nach oben. `--kopf-ist` ist die GEMESSENE Hoehe, die neu.js einmal setzt. Gerechnet stimmt sie naemlich nicht: Die Leiste ist so hoch wie ihr Inhalt, und das Logo auf seiner weissen Karte kommt auf 79 px — vier mehr als die Mindesthoehe von 76. Genau diese vier Pixel blieben als heller Streifen ueber dem Bild stehen. Der Rueckfallwert gilt ohne JavaScript und liegt nah genug. */ margin-top: calc(-1 * var(--kopf-ist, calc(var(--kopf-hoehe) + var(--kopf-luft)))) } .hero--mittel { min-height: clamp(420px, 64svh, 620px) } .hero--kompakt { min-height: 0; padding-block: calc(var(--kopf-hoehe) + var(--s4)) var(--s4); align-items: center } .hero__media { position: absolute; inset: 0; z-index: -2 } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover } .hero__media--personen img, .hero__media--personen video { object-position: center 28% } /* Der Schleier trägt die Schrift. Er ist ein VERLAUF und keine flache Abdunklung: Ein Video wechselt ständig die Helligkeit, eine feste Deckung kann das nicht auffangen. Das Plateau liegt dort, wo der Text steht — unten —, oben bleibt das Bild offen. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; /* GEMESSEN: Mit dem alten Verlauf lag „Leonberg" in --rot-licht bei 2,41:1 (Soll 3 fuer grosse Schrift). Der Titel beginnt bei rund 48 Prozent der Bandhoehe, das dunkle Plateau begann aber erst bei 78 — die Ueberschrift stand also im aufhellenden Teil. Das Plateau beginnt jetzt bei 46 Prozent und laeuft bis zur Unterkante. Oben bleiben 34 Prozent des Bildes offen. */ background: linear-gradient(180deg, rgba(8, 8, 10, .18) 0%, rgba(8, 8, 10, .26) 30%, rgba(8, 8, 10, .78) 46%, rgba(8, 8, 10, .90) 100%) } /* Ein Foto ohne Bewegung braucht etwas weniger Schleier als ein Video — aber nur etwas. GEMESSEN am 22.09.2026 auf den Leistungsseiten: Mit dem ersten, deutlich schwaecheren Verlauf lag die H1 auf `bild-egym1.jpg` bei 1,82:1 und der Akzentteil bei 1,00:1 (Soll 3). Das Bild zeigt eine Trainingsflaeche mit Fenstern — heller geht es kaum. Der Grund war die Rechnung: Ein `hero--mittel` ist rund 576 px hoch, der Titel steht bei etwa 60 Prozent der Bandhoehe, und dort deckte der alte Verlauf erst 0,47. Das Plateau beginnt jetzt bei 42 Prozent. Oben bleiben 30 Prozent des Bildes offen. */ .hero--ruhig::after { background: linear-gradient(180deg, rgba(8, 8, 10, .16) 0%, rgba(8, 8, 10, .28) 30%, rgba(8, 8, 10, .74) 42%, rgba(8, 8, 10, .88) 100%) } /* Breite in rem, NICHT in ch. `ch` misst die Nullbreite der EIGENEN Schriftgroesse — die ist hier der Fliesstext mit 17 px, waehrend die H1 mit 84 px darin steht. 30ch ergaben so 255 px, und „Leonberg" brach mitten im Wort (gemessen 22.09.2026). */ .hero__inhalt { position: relative; max-width: 40rem } .hero__inhalt--weit { max-width: 56rem } .hero h1 { color: #fff; margin-bottom: var(--s2); max-width: none; text-shadow: 0 2px 22px rgba(0, 0, 0, .45) } /* Eigennamen brechen nicht mitten im Wort. Ohne das kappt die Zeile „Leonberg" zu „Leonb / erg", sobald der Platz knapp wird. */ .hero h1 { overflow-wrap: normal; word-break: keep-all; hyphens: none } .hero__unterzeile { font-family: var(--font-display); font-weight: 600; font-size: var(--t-klein); color: var(--rot-licht); margin: 0 0 var(--s2); max-width: none; text-shadow: 0 2px 14px rgba(0, 0, 0, .5) } .hero__text { color: rgba(255, 255, 255, .92); font-size: var(--t-lese); max-width: 44ch; margin-bottom: var(--s3); text-shadow: 0 1px 12px rgba(0, 0, 0, .5) } .hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--s2) } /* Scroll-Hinweis: sagt, dass es weitergeht. Er verschwindet, sobald gescrollt wird — sonst steht er auf halber Seite im Weg. */ .hero__weiter { position: absolute; left: 50%; bottom: var(--s3); transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: .35rem; font-family: var(--font-display); font-weight: 700; font-size: var(--t-winzig); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8); text-decoration: none; transition: opacity .3s ease } .hero__weiter::after { content: ""; width: 1px; height: 26px; background: linear-gradient(180deg, rgba(255,255,255,.75), transparent) } .kopf-klein ~ * .hero__weiter, .hero__weiter[hidden] { opacity: 0 } /* Die soziale Leiste der Altseite bleibt, aber als ruhige Spalte am Rand statt als roter Kasten im Bild. */ .hero__social { position: absolute; left: 0; bottom: clamp(3rem, 12vh, 7rem); z-index: 1; display: flex; flex-direction: column; gap: 2px; background: var(--rot); border-radius: 0 var(--r-klein) var(--r-klein) 0; padding: .4rem .3rem } .hero__social a { display: grid; place-items: center; width: 42px; height: 42px; color: #fff } .hero__social a:hover { color: rgba(255, 255, 255, .75) } /* ========================================================= 6 · Knoepfe ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .75rem 1.6rem; font-family: var(--font-display); font-weight: 700; font-size: var(--t-mini); line-height: 1.2; text-decoration: none; cursor: pointer; border: 2px solid transparent; border-radius: var(--r-pille); transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .18s ease, box-shadow .22s ease } .btn:hover { transform: translateY(-2px) } .btn:active { transform: translateY(0) } .btn--rot { background: var(--rot); color: #fff } .btn--rot:hover { background: var(--rot-tief); box-shadow: 0 10px 26px rgba(172, 0, 58, .34) } .btn--weiss { background: #fff; color: var(--rot) } .btn--weiss:hover { background: var(--flaeche) } /* Umriss-Knopf: der zweite Weg. Auf hellem Grund in Markenfarbe, auf dunklem Grund und auf Bild weiss. ACHTUNG, hier lag ein Fehler: Die erste Fassung schaltete ueber `.section:not(.section--dunkel)` auf Rot um. In einer `.dunkelzone` traegt die Sektion die Klasse `section--dunkel` aber NICHT — die Zone traegt sie. Der Knopf stand dadurch rot auf fast schwarzem Grund (gesehen 22.09.2026 im Bildschirmfoto, kein Pruefer meldet so etwas). Die Regel geht deshalb vom hellen Grund als Normalfall aus und hellt dort auf, wo es dunkel IST — das ist die Richtung, die sich nicht verrechnet. */ .btn--umriss { background: transparent; color: var(--rot); border-color: var(--rot) } .btn--umriss:hover { background: var(--rot); color: #fff; border-color: var(--rot) } .section--dunkel .btn--umriss, .dunkelzone .btn--umriss, .hero .btn--umriss, .schlussband .btn--umriss { color: #fff; border-color: rgba(255, 255, 255, .65) } .section--dunkel .btn--umriss:hover, .dunkelzone .btn--umriss:hover, .hero .btn--umriss:hover, .schlussband .btn--umriss:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff } .btn--gross { min-height: 54px; padding: .9rem 2rem; font-size: var(--t-text) } /* Textlink mit Pfeil — für „Mehr erfahren" in Karten und Fließtext. 44 px Trefferfläche nach WCAG 2.5.5, ohne das Layout zu verschieben. */ .mehr { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font-family: var(--font-display); font-weight: 700; font-size: var(--t-mini); letter-spacing: .04em; text-decoration: none; color: var(--rot) } .mehr::after { content: "›"; font-size: 1.3em; line-height: 0; transition: transform .22s ease } .mehr:hover::after { transform: translateX(3px) } .section--dunkel .mehr, .dunkelzone .mehr { color: var(--rot-licht) } /* ========================================================= 7 · Karten ========================================================= */ .karte { display: flex; flex-direction: column; overflow: hidden; background: var(--weiss); color: var(--text); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); text-decoration: none; transition: box-shadow .26s ease, transform .26s ease, border-color .26s ease } a.karte:hover { box-shadow: var(--schatten-hoch); transform: translateY(-4px); border-color: color-mix(in srgb, var(--rot) 35%, var(--linie)) } .section--dunkel .karte, .dunkelzone .karte { background: var(--tief-3); color: var(--text-hell); border-color: var(--tief-rand); box-shadow: none } .section--dunkel a.karte:hover, .dunkelzone a.karte:hover { border-color: color-mix(in srgb, var(--rot-licht) 45%, var(--tief-rand)); box-shadow: var(--schatten-dunkel) } /* Das Bild sitzt oben in eigener Fläche, der Text darunter auf DECKENDEM Grund. Das ist die Lehre aus Block E (21.09.2026): Steht die Schrift auf dem Foto, hängt ihr Kontrast am Motiv, und kein Prüfer meldet es. */ .karte__bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--flaeche-2) } .karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease } a.karte:hover .karte__bild img { transform: scale(1.04) } /* Nur der Übergang zur Textfläche, keine Schriftabsicherung. */ .karte__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .22) 100%) } /* Die Nummer auf dem Bild ordnet, wo eine Reihenfolge Inhalt ist. */ .karte__nr { position: absolute; top: var(--s2); left: var(--s2); z-index: 1; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .5rem; background: rgba(8, 8, 10, .68); backdrop-filter: blur(6px); color: #fff; border-radius: var(--r-pille); font-family: var(--font-display); font-weight: 700; font-size: var(--t-winzig) } .karte__inhalt { display: flex; flex-direction: column; flex: 1; padding: var(--s3) var(--s3) var(--s3) } .karte__inhalt > :last-child { margin-bottom: 0 } .karte h3 { margin-bottom: .5rem } .karte p { color: var(--text-leise); font-size: var(--t-mini); max-width: none } .section--dunkel .karte p, .dunkelzone .karte p { color: var(--text-hell-leise) } /* Der Weiterlink sitzt in jeder Karte im gleichen Abstand zur Unterkante, egal wie viele Zeilen darüber stehen. */ .karte .mehr { margin-top: auto } /* Die ganze Karte ist klickbar, ohne den Weiterlink zu verdoppeln. */ .karte--ganz { position: relative } .karte--ganz .mehr::before { content: ""; position: absolute; inset: 0 } /* ========================================================= 8 · Zahlen & Laufband ========================================================= */ .zahlen { display: grid; gap: var(--s3) var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)) } @media (min-width: 900px) { .zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)) } } .zahl { position: relative; padding-left: var(--s3) } .zahl::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 2px; background: linear-gradient(180deg, var(--rot), transparent) } .zahl__wert { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 5.5vw, 3.5rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.03em } .zahl__label { display: block; margin-top: .5rem; font-size: var(--t-mini); color: var(--text-hell-leise); max-width: 26ch } /* Auf hellem Grund dreht sich die Farbgebung um. */ .section:not(.section--dunkel) .zahl__wert { color: var(--rot) } .section:not(.section--dunkel) .zahl__label { color: var(--text-leise) } /* Laufband: der Inhalt steht zweimal identisch im Markup, die Spur verschiebt sich um genau 50 % — dadurch ist der Übergang nahtlos. Hält bei Hover an, steht bei abbestellter Bewegung still. */ /* DIE MASKE LIEGT AUF DER SPUR, NICHT AUF DEM BAND. Zuerst stand sie am Band — damit wurde an den Raendern die ganze Flaeche durchsichtig, und die weisse Schrift stand dort auf dem WEISSEN Seitengrund. Gemessen an der Glyphenflaeche: 1,01:1. Ein Wert, den kein Pruefer meldet, weil die Schrift ja „nur" ausblendet. Jetzt bleibt der dunkle Bandgrund deckend stehen, und nur der Text laeuft weich aus — optisch dasselbe, aber der Grund hinter der Schrift ist immer die Bandfarbe. */ .laufband { background: var(--tief); color: #fff; padding-block: var(--s3); border-block: 1px solid var(--tief-rand); overflow: hidden } .laufband__spur { display: flex; width: max-content; animation: laufband 46s linear infinite; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent) } .laufband__gruppe { display: flex; align-items: center; gap: var(--s4); list-style: none; margin: 0; padding: 0 calc(var(--s4) / 2) } .laufband__gruppe li { display: inline-flex; align-items: center; gap: var(--s4); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.0625rem, 2.1vw, 1.5rem); white-space: nowrap; color: rgba(255, 255, 255, .92) } .laufband__gruppe li::after { content: "›"; color: var(--rot-licht); font-size: 1.2em; line-height: 0 } .laufband:hover .laufband__spur, .laufband:focus-within .laufband__spur { animation-play-state: paused } @keyframes laufband { from { transform: translateX(0) } to { transform: translateX(-50%) } } /* ========================================================= 9 · Listen ========================================================= */ /* Trennlinien-Liste: die Hausform seit Block C1. Kein Aufzählungszeichen, Linie oben, roter Punkt. */ .liste { list-style: none; padding: 0; margin: 0 0 var(--s3) } .liste li { position: relative; margin: 0; padding: .8rem 0 .8rem 1.5rem; border-top: 1px solid var(--linie); font-size: var(--t-text); line-height: var(--lh-eng) } .liste li:last-child { border-bottom: 1px solid var(--linie) } .liste li::before { content: ""; position: absolute; left: 0; top: 1.45em; width: 8px; height: 8px; border-radius: 50%; background: var(--rot) } .section--dunkel .liste li, .dunkelzone .liste li { border-color: var(--tief-rand) } .section--dunkel .liste li::before, .dunkelzone .liste li::before { background: var(--rot-licht) } @media (min-width: 760px) { .liste--2 { columns: 2; column-gap: var(--s4) } .liste--2 li { break-inside: avoid } } /* Häkchen-Liste für Vorteile, ohne Trennlinien. */ .haken { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: .6rem } .haken li { position: relative; padding-left: 1.9rem; font-size: var(--t-text) } .haken li::before { content: ""; position: absolute; left: 0; top: .34em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--rot); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat } .section--dunkel .haken li::before, .dunkelzone .haken li::before { background: var(--rot-licht) } @media (min-width: 760px) { .haken--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem var(--s4) } } /* ========================================================= 10 · Split (Text neben Bild) ========================================================= */ .split { display: grid; gap: var(--s4); align-items: center } @media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(var(--s4), 6vw, var(--s5)) } .split--breit { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) } .split--schmal { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) } /* Bild rechts statt links, ohne die Lesereihenfolge im Markup zu drehen — ein Screenreader liest weiter Text vor Bild. */ .split--gedreht > :first-child { order: 2 } } .split__bild { position: relative; border-radius: var(--r-karte); overflow: hidden; box-shadow: var(--schatten-hoch) } .split__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover } .split__bild--hoch img { aspect-ratio: 3 / 4 } .split__bild--frei img { aspect-ratio: auto } /* Eckklammern: sparsam, ein Element je Seite. Sie greifen den Winkel des Hauslogos auf, aus dem auch das Reiterzeichen gebaut ist. */ .klammern { position: relative } .klammern::before, .klammern::after { content: ""; position: absolute; width: 2.2rem; height: 2.2rem; border: 3px solid var(--rot); pointer-events: none } .klammern::before { top: -.7rem; left: -.7rem; border-right: 0; border-bottom: 0 } .klammern::after { bottom: -.7rem; right: -.7rem; border-left: 0; border-top: 0 } /* Großes Zitat: der stärkste Satz der Marke. */ .zitat { margin: 0; max-width: 20rem } .zitat p { font-family: var(--font-display); font-weight: 700; font-size: var(--t-mittel); line-height: var(--lh-titel); letter-spacing: -.02em; color: #fff; max-width: none } .zitat footer { margin-top: var(--s2); font-size: var(--t-mini); color: var(--text-hell-leise); font-family: var(--font) } /* ========================================================= 11 · Bewertungen ========================================================= */ .note { display: flex; align-items: baseline; justify-content: center; gap: .6rem; margin-bottom: .4rem } .note__wert { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1 } .sterne { color: var(--sterne); letter-spacing: .1em; font-size: var(--t-lese) } .note__quelle { text-align: center; font-size: var(--t-mini); color: var(--text-leise) } /* ========================================================= 12 · Formulare ========================================================= */ .feld { display: grid; gap: .4rem; margin-bottom: var(--s2) } .feld > label { font-family: var(--font-display); font-weight: 600; font-size: var(--t-mini) } .feld input, .feld select, .feld textarea { width: 100%; padding: .8rem 1rem; font: inherit; color: inherit; background: var(--weiss); border: 1px solid var(--feldrand); border-radius: var(--r-klein); transition: border-color .2s ease, box-shadow .2s ease } .feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 22%, transparent) } .feld--fehler input, .feld--fehler select, .feld--fehler textarea { border-color: var(--fehler) } .feld__fehler { color: var(--fehler); font-size: var(--t-mini) } .hinweis--ok { background: var(--ok-hell); color: var(--ok); border-radius: var(--r-klein); padding: var(--s2) } .hinweis--err { background: var(--fehler-hell); color: var(--fehler); border-radius: var(--r-klein); padding: var(--s2) } /* ========================================================= 13 · Klick-zum-Laden (YouTube, Karte) ========================================================= */ /* Null Fremdserver, bis jemand klickt. Die Fassade zeigt das Standbild und sagt vorher, was beim Klick passiert. */ .fassade { position: relative; border-radius: var(--r-karte); overflow: hidden; background: var(--tief-3); box-shadow: var(--schatten-tief) } .fassade__start { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; color: #fff; text-align: left } .fassade__start img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover } .fassade__start::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,.15) 0%, rgba(8,8,10,.72) 100%) } .fassade__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--rot); box-shadow: 0 12px 34px rgba(172, 0, 58, .5); transition: transform .24s ease } .fassade__play::before { content: ""; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #fff; margin-left: 5px } .fassade__start:hover .fassade__play { transform: translate(-50%, -50%) scale(1.07) } .fassade__text { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 2 } .fassade__text h3 { color: #fff; margin: 0 0 .2rem } .fassade__text p { color: rgba(255,255,255,.8); font-size: var(--t-mini); margin: 0 } .fassade__marke { display: inline-block; margin-bottom: .6rem; padding: .3rem .8rem; background: var(--rot); color: #fff; border-radius: var(--r-pille); font-family: var(--font-display); font-weight: 700; font-size: var(--t-winzig); letter-spacing: .12em; text-transform: uppercase } .fassade iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block } .fassade__recht { font-size: var(--t-winzig); color: var(--text-leise); margin-top: .6rem } /* GEMESSEN 2,90:1 (Soll 4,5): --text-leise ist fuer hellen Grund gerechnet. Auf der dunklen Sektion braucht der Hinweis den hellen Ton — und er ist ein Pflichthinweis nach DSGVO, also nichts, was man leise stellen darf. */ .section--dunkel .fassade__recht, .dunkelzone .fassade__recht { color: var(--text-hell-leise) } .section--dunkel .fassade__recht a, .dunkelzone .fassade__recht a { color: #fff } /* ========================================================= 14 · Fusszeile ========================================================= */ .fuss { background: var(--tief); color: var(--text-hell); padding-block: var(--s5) var(--s3) } .fuss__grid { display: grid; gap: var(--s4) } @media (min-width: 760px) { .fuss__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 1040px) { .fuss__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s5) } } .fuss h2 { font-size: var(--t-klein); color: #fff; margin-bottom: var(--s2); padding-bottom: .6rem; position: relative } .fuss h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; background: var(--rot) } .fuss p, .fuss li { font-size: var(--t-mini); color: var(--text-hell-leise) } .fuss a { color: var(--text-hell); text-decoration: none } .fuss a:hover { color: var(--rot-licht) } .fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem } .fuss__liste a { display: inline-flex; align-items: center; gap: .45em; min-height: 32px } .fuss__liste a::before { content: "›"; color: var(--rot-licht); font-size: 1.15em; line-height: 0 } /* Öffnungszeiten als Label über Wert: Tag und Uhrzeit nebeneinander passen in eine Fußspalte nicht (gemessen im Bestand: 311 px gebraucht, 278 vorhanden). */ .zeit { display: grid; gap: .1rem; margin-bottom: .9rem } .zeit__tag { font-family: var(--font-display); font-weight: 600; font-size: var(--t-winzig); letter-spacing: .06em; text-transform: uppercase; color: var(--rot-licht) } .fuss__social { display: flex; gap: .6rem; margin-top: var(--s2) } .fuss__social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--tief-rand); border-radius: 50%; color: #fff } .fuss__social a:hover { background: var(--rot); border-color: var(--rot); color: #fff } .fuss__schluss { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--tief-rand); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); justify-content: space-between; align-items: center; font-size: var(--t-winzig); color: var(--text-hell-leise) } /* Abschlussband über dem Fuß: der letzte Eindruck auf jeder Seite. */ .schlussband { position: relative; isolation: isolate; overflow: hidden; background: var(--tief-2); color: #fff; text-align: center; padding-block: var(--sektion) } .schlussband__media { position: absolute; inset: 0; z-index: -2 } .schlussband__media img { width: 100%; height: 100%; object-fit: cover } .schlussband::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 8, 10, .74) } /* Wie im Hero: Der Kicker steht hier auf einem Foto. Das aufgehellte Rot kam auf 2,64:1 (Soll 4,5), weil das Overlay mit .74 nicht ueberall reicht. */ .schlussband .kicker { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .6) } .schlussband .kicker::before { color: var(--rot-licht) } .schlussband h2 { color: #fff; margin-inline: auto; max-width: 48rem } .schlussband p { margin-inline: auto; color: rgba(255,255,255,.85) } .schlussband__aktionen { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s3) } /* Zweiter Weg als Textlink daneben, damit der Knopf der Hauptweg bleibt. */ .schlussband__tel { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: var(--t-text); text-decoration: underline; text-underline-offset: 4px } /* ========================================================= 15 · Bewegung ========================================================= Alles hier ist Zugabe: Ohne JavaScript und bei abbestellter Bewegung bleibt jeder Inhalt vollständig sichtbar und an seinem Platz. Das ist keine Annahme — es wird nach jedem Block gemessen (REDESIGN-PLAN Abschnitt 9). */ .js .auf { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1) } .js .auf.ist-da { opacity: 1; transform: none } /* Gestaffelt, wo mehrere Karten nebeneinander stehen. */ .js .auf--2 { transition-delay: .09s } .js .auf--3 { transition-delay: .18s } .js .auf--4 { transition-delay: .27s } @media (prefers-reduced-motion: reduce) { .js .auf, .js .auf.ist-da { opacity: 1; transform: none; transition: none } .laufband__spur { animation: none; -webkit-mask-image: none; mask-image: none } .laufband { overflow-x: auto } .karte, a.karte:hover, .btn, .btn:hover, .btn:active { transition: none; transform: none } a.karte:hover .karte__bild img { transform: none } .kopf, .kopf__logo img, .schublade { transition: none } } /* ========================================================= 16 · Responsive ========================================================= */ @media (max-width: 1039px) { .nav__liste { display: none } .burger { display: block } } @media (min-width: 1040px) { .schublade, .schleier { display: none } } @media (max-width: 719px) { .hero__social { display: none } .hero__inhalt { max-width: none } .karte__inhalt { padding: var(--s2) var(--s3) var(--s3) } .zitat { max-width: none } } /* ========================================================= 17 · Nachtrag: Untermenues und Fuss-Partner ========================================================= */ /* Untermenue am Zeigegeraet. Es oeffnet auch bei Tastaturfokus (`:focus-within`) — sonst ist die halbe Navigation ohne Maus unerreichbar. */ .nav__punkt { position: relative } .nav__pfeil { display: inline-block; margin-left: .35em; font-size: 1.15em; line-height: 0; transform: translateY(.06em) rotate(90deg) } .nav__unter { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 250px; margin: 0; padding: .5rem; list-style: none; z-index: 20; background: var(--tief); border: 1px solid var(--tief-rand); border-radius: var(--r-klein); box-shadow: var(--schatten-dunkel); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s } .nav__punkt:hover .nav__unter, .nav__punkt:focus-within .nav__unter { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) } .nav__unter a { display: block; padding: .55rem .8rem; border-radius: 6px; font-size: var(--t-mini); color: var(--text-hell); text-decoration: none } .nav__unter a:hover { background: var(--glas); color: #fff } /* Die Lücke zwischen Punkt und Klappe darf den Zeiger nicht verlieren. */ .nav__punkt::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px } .schublade__unter { padding-left: var(--s2) !important; font-size: var(--t-mini) !important; color: var(--text-hell-leise) !important } /* Partnerhinweis im Fuß: Logo auf weißer Karte, damit die graue Wortmarke auf dunklem Grund überhaupt lesbar ist. */ .fuss__partner { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3) } .fuss__partner a { background: #fff; border-radius: var(--r-klein); padding: .6rem .8rem; flex: 0 0 auto } .fuss__partner img { width: 116px; height: auto } .fuss__partner span { font-size: var(--t-winzig); color: var(--text-hell-leise) } /* --- Videofassade am Handy: Text unter das Bild -------------------------- GEMESSEN bei 390 px: Die Fassade ist dort nur 342x192 px gross. Play-Knopf, Marke, Titel und Hinweis draengen sich auf 192 px Hoehe, und der Titel landet auf halber Bildhoehe — genau dort, wo das Teamfoto weisse Shirts zeigt. Weiss auf Weiss: 1,00:1. Der untere Verlauf kann das nicht auffangen, er deckt die unteren 45 Prozent. Statt ihn hochzuziehen und das Motiv zuzudecken, steht der Text unterhalb von 720 px unter dem Bild auf deckendem Grund — dieselbe Entscheidung wie bei den Kacheln in Block E. */ @media (max-width: 719px) { .fassade__start { display: flex; flex-direction: column } .fassade__start::after { inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(8,8,10,.55)) } .fassade__text { position: static; padding: var(--s2) var(--s3) var(--s3); background: var(--tief-3) } .fassade__play { top: auto; bottom: calc(100% - 56.25vw + 2.6rem); } .fassade__play { width: 64px; height: 64px } .fassade__play::before { border-width: 11px 0 11px 18px; margin-left: 4px } } /* ========================================================= 18 · Kopfleiste tiefer, Navigation praegnanter (Julian, 22.09.2026) ========================================================= „Das Logo soll nicht direkt unter dem Header des Browsers sitzen. Die Menuepunkte koennten ein bisschen weisser, also praegnanter." Ueber einem randlosen Hero schwebt die Leiste im Bild — dort bekommt sie Luft nach oben, damit Logo und Menue nicht an der Fensterkante kleben. Sobald sie beim Scrollen ihre eigene Flaeche bekommt, faellt die Luft weg: eine klebende Leiste, die dauerhaft 24 px Polster mitschleppt, kostet auf einem 844-px-Handybild nur Platz. */ /* Die Luft ueber Logo und Menue steht als Variable am , nicht als fester Wert an der Leiste. Grund: Der Hero zieht sich um die KOPFHOEHE nach oben, damit das Bild unter der Leiste durchlaeuft. Rechnet er das Polster nicht mit, bleibt genau dieses Polster als heller Streifen ueber dem Bild stehen — gemessen am 22.09.2026: 32 px bei 1440, 20 px bei 390. */ :root { --kopf-luft: 0px } body.kopf-schwebt { --kopf-luft: clamp(1rem, 2.6vw, 1.75rem) } .kopf--auf-bild .kopf__inner { padding-top: var(--kopf-luft) } .kopf--auf-bild.ist-klein .kopf__inner { padding-top: 0 } /* Der Verlauf hinter der Leiste waechst mit, sonst endet er ueber dem Menue. */ .kopf--auf-bild::before { height: calc(var(--kopf-hoehe) + 5.5rem) } /* Praegnanter heisst hier: schwerer, etwas groesser, heller — und mit einem Schatten, der auf bewegtem Bild die Reststellen traegt. Reines Weiss statt des geerbten Tons; gemessen an der Glyphenflaeche liegt die Navigation damit auch auf den hellsten Videobildern ueber 4,5:1. */ .kopf--auf-bild .nav__link { color: #fff; font-weight: 700; font-size: var(--t-text); letter-spacing: .005em; text-shadow: 0 1px 10px rgba(0, 0, 0, .55) } .kopf--auf-bild .nav__link::after { height: 2.5px } /* Auf eigener Flaeche braucht die Schrift keinen Schatten mehr. */ .kopf--auf-bild.ist-klein .nav__link { text-shadow: none; color: var(--text) } .burger { color: #fff } .kopf--auf-bild.ist-klein .burger, .kopf:not(.kopf--auf-bild) .burger { color: var(--text) } /* ========================================================= 19 · Aktionsleiste — die schnellen Wege, immer erreichbar ========================================================= „Links im Hero haben wir die drei Zeichen mit Instagram, Termin machen und anrufen. Das haette ich gerne sticky, dass es mit runtergeht." MOBILE FIRST: Am Handy ist die Leiste KEINE Spalte am Rand — dort waere sie ein Daumenhindernis quer ueber dem Inhalt. Sie liegt unten, waagerecht, mit den zwei Wegen, die am Handy zaehlen: anrufen und Termin. Die sozialen Netze stehen dort im Fuss, wo sie hingehoeren. Ab 900 px wird daraus die senkrechte Spalte links, die der Auftrag meint. Sie ist `fixed`, nicht `sticky`: Eine klebende Leiste braucht einen Elternbereich, an dem sie haften kann, und wuerde am Ende des Heros stehen bleiben. Gewuenscht ist, dass sie ueber die ganze Seite mitgeht. */ .aktionen { position: fixed; z-index: 880; display: flex; /* Handy: unten, volle Breite, ueber dem Inhalt schwebend */ left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--tief) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--tief-rand); padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom, 0px)); gap: .5rem } .aktionen__punkt { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .5rem .75rem; border-radius: var(--r-klein); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--t-mini); color: #fff; background: var(--glas); border: 1px solid var(--glas-rand); transition: background-color .22s ease, transform .18s ease } .aktionen__punkt:hover { background: rgba(255, 255, 255, .16) } .aktionen__punkt:active { transform: scale(.97) } .aktionen__punkt--stark { background: var(--rot); border-color: var(--rot) } .aktionen__punkt--stark:hover { background: var(--rot-tief) } .aktionen__punkt svg { flex: 0 0 auto } /* Am Handy zaehlen nur die zwei Wege — die sozialen Netze stehen im Fuss. */ .aktionen__punkt--sozial { display: none } /* Die Rufnummer nur dort, wo Platz ist. GEMESSEN bei 390 px: mit Nummer im Knopf brach „Anrufen: 07152 902 700" zweizeilig und die Leiste wuchs auf 85 px — ein Fuenftel des Daumenbereichs fuer eine Information, die auf einem Telefon ohnehin niemand abliest, sondern antippt. */ .aktionen__nummer { display: none } @media (min-width: 420px) and (max-width: 899px) { .aktionen__nummer { display: inline; font-weight: 400; opacity: .8 } } /* Damit die untere Leiste nichts verdeckt, bekommt die Seite unten Platz. Ohne das liegt sie auf der Fusszeile und auf dem letzten Knopf. */ @media (max-width: 899px) { body { padding-bottom: 68px } } @media (min-width: 900px) { /* Senkrechte Spalte links, mittig — der Platz, den der Auftrag meint. */ .aktionen { left: 0; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; gap: 2px; width: auto; padding: .45rem .4rem; border: 1px solid var(--glas-rand); border-left: 0; border-radius: 0 var(--r-klein) var(--r-klein) 0 } .aktionen__punkt { flex: 0 0 auto; width: 46px; height: 46px; min-height: 0; padding: 0; border: 0; background: transparent; border-radius: 8px } .aktionen__punkt:hover { background: rgba(255, 255, 255, .16) } .aktionen__punkt--stark { background: var(--rot) } .aktionen__punkt--sozial { display: inline-flex } /* Die Beschriftung traegt der Screenreader, im Bild steht nur das Zeichen. */ .aktionen__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 } /* Bei sehr flachen Fenstern nach oben ausweichen, sonst ragt sie hinaus. */ @media (max-height: 560px) { .aktionen { top: var(--kopf-hoehe); transform: none } } } /* Sie erscheint erst, wenn der Hero angeschnitten ist — im Hero selbst steht sie sonst doppelt neben den Knoepfen. Ohne JavaScript ist sie sofort da. */ .js .aktionen { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s } .js .aktionen.ist-da { opacity: 1; visibility: visible } @media (prefers-reduced-motion: reduce) { .js .aktionen { transition: none } } /* ========================================================= 20 · Swipe — waagerecht wischbare Reihen (mobile first) ========================================================= Neun Angebotskacheln untereinander sind am Handy ein 4000 px langer Wurm. Als wischbare Reihe bleiben sie eine Geste weit auseinander. Reines CSS mit Scroll-Snap: kein Karussell-Skript, keine Abhaengigkeit, und die Tastatur kann die Reihe ohnehin scrollen. Ab 720 px wird daraus wieder das normale Raster — auf breiten Schirmen ist Wischen keine natuerliche Geste. */ @media (max-width: 719px) { .swipe { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* Die Reihe laeuft bis an den Bildschirmrand, damit sichtbar ist, dass es weitergeht — der Container-Rand wird dafuer aufgehoben und als Innenabstand zurueckgegeben. */ margin-inline: calc(-1 * var(--s3)); padding-inline: var(--s3); padding-bottom: .4rem; scrollbar-width: none } .swipe::-webkit-scrollbar { display: none } .swipe > * { scroll-snap-align: start } /* Die letzte Karte soll bis zum Rand schnappen koennen. */ .swipe::after { content: ""; width: 1px } } /* Punkte unter der Reihe: sie sagen, wie viele es sind und wo man ist. */ .swipe-punkte { display: none } @media (max-width: 719px) { .swipe-punkte { display: flex; justify-content: center; gap: .4rem; margin-top: var(--s2) } .swipe-punkte span { width: 7px; height: 7px; border-radius: 50%; background: var(--linie); transition: background-color .25s ease, transform .25s ease } .swipe-punkte span.ist-da { background: var(--rot); transform: scale(1.35) } .section--dunkel .swipe-punkte span, .dunkelzone .swipe-punkte span { background: var(--tief-rand) } .section--dunkel .swipe-punkte span.ist-da, .dunkelzone .swipe-punkte span.ist-da { background: var(--rot-licht) } } /* ========================================================= 21 · Mehr Scroll-Reaktion ========================================================= „Damit das Ganze noch ein bisschen reaktiver wirkt." Vier Zugaben, alle ohne Layout-Einfluss und alle bei abbestellter Bewegung still. Was sich bewegt, bewegt sich EINMAL und bleibt dann stehen — eine Seite, auf der dauernd etwas zuckt, liest sich schlechter, nicht besser. */ /* a) Richtungen fuer das Einblenden. Bisher kam alles von unten. */ .js .auf--links { transform: translateX(-28px) } .js .auf--rechts { transform: translateX(28px) } .js .auf--gross { transform: scale(.965) } .js .auf--links.ist-da, .js .auf--rechts.ist-da, .js .auf--gross.ist-da { transform: none } /* b) Lesefortschritt am oberen Rand. Er sagt, wie weit die Seite noch geht — auf einer 8000 px langen Startseite ist das eine echte Auskunft. */ .fortschritt { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 950; background: transparent; pointer-events: none } .fortschritt__balken { height: 100%; width: 0; background: linear-gradient(90deg, var(--rot), var(--rot-licht)); transform-origin: left; transition: width .1s linear } /* c) Das Hero-Bild wandert beim Scrollen langsamer als der Text (Parallaxe). Sehr zurueckhaltend: 12 Prozent, mehr wirkt wie ein Wackeln. */ .js .hero__media { will-change: transform } /* d) Zahlen und Karten heben sich beim Darueberfahren leicht. */ .karte { will-change: transform } .zahl { transition: transform .3s ease } @media (hover: hover) { .zahl:hover { transform: translateY(-3px) } } @media (prefers-reduced-motion: reduce) { .js .auf--links, .js .auf--rechts, .js .auf--gross, .js .auf--links.ist-da, .js .auf--rechts.ist-da, .js .auf--gross.ist-da { transform: none } .fortschritt { display: none } .js .hero__media { transform: none !important } .zahl, .zahl:hover { transition: none; transform: none } .swipe-punkte span { transition: none } } /* ========================================================= 22 · Nachtraege vom 22.09.2026 (Ansage Julian) ========================================================= */ /* Ein zentrierter Absatz braucht beides: mittigen Text UND eine mittige Box. `p { max-width: var(--mass) }` macht ihn sonst 68 Zeichen breit und laesst ihn links stehen — der Knopf stand dadurch linksbuendig in der Mitte einer schmalen Box statt in der Mitte der Seite. */ .mitte { text-align: center; max-width: none; margin-inline: auto } .mitte > .btn { margin-inline: auto } /* Der Weg zu allen Leistungen, unter der Dreierreihe. */ .mehr-zeile { display: flex; justify-content: center; margin-top: var(--s4) } /* ========================================================= 23 · Unterseiten: Lesespalte, Infokarte, Videoband ========================================================= Der Aufbau der Leistungsseiten stammt aus Block C1 (18.09.2026) und hat sich bewährt: eine ruhige Lesespalte links, daneben eine haftende Karte mit dem, was ohnehin bekannt ist. Neu ist die Formsprache, nicht die Idee. */ /* `align-items: start` ist Pflicht, nicht Geschmack: Ein gestrecktes Rasterfeld ist so hoch wie die Zeile, und ein haftendes Element darin hätte keinen Weg zum Haften. */ .lese { display: grid; gap: var(--s4); align-items: start } .lese__text { min-width: 0 } .lese__text > :last-child { margin-bottom: 0 } .lese__text p { font-size: var(--t-lese); line-height: var(--lh-text) } .lese__text h2 { max-width: 22ch } @media (min-width: 1024px) { .lese { grid-template-columns: minmax(0, 1fr) 340px; column-gap: clamp(var(--s4), 5vw, var(--s5)) } } .infokarte { position: sticky; top: calc(var(--anker-abstand) + 12px); background: var(--tief-3); color: var(--text-hell); border-radius: var(--r-karte); border-top: 4px solid var(--rot); padding: var(--s3) var(--s3) var(--s4); box-shadow: var(--schatten-hoch) } .infokarte .kicker { color: var(--rot-licht); margin-bottom: var(--s2) } .infokarte__liste { margin: 0 } .infokarte__zeile { display: grid; gap: .15rem; padding: .8rem 0; border-top: 1px solid rgba(255, 255, 255, .13) } .infokarte__zeile:last-child { border-bottom: 1px solid rgba(255, 255, 255, .13) } /* Kontrast auf #1A1A1D nachgerechnet: --grau-ton 8,1:1, --text-hell 15,4:1. */ .infokarte dt { font-family: var(--font-display); font-weight: 600; font-size: var(--t-winzig); letter-spacing: .06em; text-transform: uppercase; color: var(--text-hell-leise) } .infokarte dd { margin: 0; font-size: var(--t-mini); line-height: var(--lh-eng); color: var(--text-hell) } .infokarte dd a { color: #fff; text-decoration: underline; text-underline-offset: .15em; /* 44 px Trefferfläche, ohne das Layout zu verschieben — im Bestand war die Nummer hier nur 20 px hoch. */ display: inline-block; padding-block: .7rem; margin-block: -.7rem } .infokarte dd a:hover { color: var(--rot-licht) } .infokarte__zeit { display: flex; justify-content: space-between; gap: 1rem } .infokarte__zeit + .infokarte__zeit { margin-top: .2rem } .infokarte__knopf { display: flex; width: 100%; margin-top: var(--s3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26) } @media (max-width: 1023px) { .infokarte { position: static } } /* Abspiel-Zeichen auf einem verlinkten Bild (Videoband der Unterseiten). */ .split__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--rot); box-shadow: 0 12px 30px rgba(172, 0, 58, .45); transition: transform .24s ease } .split__play::before { content: ""; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; margin-left: 4px } a.split__bild { display: block; position: relative } a.split__bild:hover .split__play { transform: translate(-50%, -50%) scale(1.08) } @media (prefers-reduced-motion: reduce) { .split__play, a.split__bild:hover .split__play { transition: none; transform: translate(-50%, -50%) } } /* Zwischenüberschriften und Listen in der Lesespalte. */ .lese__text h3 { margin-top: var(--s4); color: var(--rot) } .lese__text .liste { margin-block: var(--s3) } /* --- Kartenreihe und Zwischenüberschrift im Fließtext ------------------- Beide kommen aus dem Bestand: `grau-karten` fasst auf drei Leistungsseiten gleichrangige Bausteine zusammen, `leistung-text__zwischen` gliedert lange Texte. Sie heißen jetzt anders und sehen anders aus, tragen aber denselben Inhalt an derselben Stelle. */ .info-kacheln { display: grid; gap: var(--s2); margin: var(--s3) 0 } @media (min-width: 720px) { .info-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)) } } .info-kachel { background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--rot); border-radius: var(--r-klein); padding: var(--s3) } .info-kachel h3 { margin: 0 0 .5rem; font-size: var(--t-klein); color: var(--text) } .info-kachel p { margin: 0; font-size: var(--t-mini); color: var(--text-leise); max-width: none } .lese__zwischen { margin-top: var(--s4); font-family: var(--font-display); font-weight: 700; font-size: var(--t-klein); color: var(--rot) }