/* Die zwei Zeichen von 崩し (Kuzushi) — als Ausschnitt aus Noto Serif JP, ausgeliefert von unserem eigenen Server statt von Google. 1,2 KB, weil nur diese beiden Zeichen drinstehen. */ @font-face { font-family: 'Noto Serif JP'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/noto-serif-jp-600-kuzushi.woff2') format('woff2'); unicode-range: U+3057, U+5D29; } /* ============================================================ RANDORI-PRO · Sportartenseite „Judo" (kombiniert: Kinder + Erwachsene) Template B-Basis · Stimmung 4 „Traditionell & Ruhig" — erdig, würdevoll, ruhig. Eine olympische Budō-Kampfkunst. Zwei Tonlagen auf einer Seite: Kinder-Sektion wärmer und an Eltern gerichtet, Erwachsenen-Sektion sachlich-respektvoll. Basisschicht (ohne Motion). Baut auf tokens.css auf und übernimmt das b-*-Komponentensystem (Header, Hero-Bausteine, Kicker, Buttons, Link, FAQ, Footer, Sticky-CTA) der Karate/Hapkido-Seiten — keine neuen Farben, Schriften oder Komponenten. Seitenspezifische Sektionen tragen das Präfix .ju-. Farbrhythmus (Drei-Anker, Stimmung 4) — HELL-dominant auf warmem Beige, drei dunkle Anker: 1 Hero (warmes Beige #ede4d2) · HELL 2 Was ist Judo? (Dunkelrot, Anker 1) · DUNKEL · Gleichgewicht 3 Judo für Kinder (helles Beige #faf6ee) · HELL · wärmstes Modul 4 Judo für Erwachsene (Beige #D4C9B5) · HELL · geerdet 5 Das unterscheidet uns (Dunkelrot, A2) · DUNKEL 6 Stimmen (Beige #D4C9B5, schmaler Slot) · HELL 7 FAQ (Beige #ede4d2) · HELL 8 Standorte (Beige #D4C9B5) · HELL · Karten-PAAR 9 Finaler CTA (Tiefschwarz, Anker 3) · DUNKEL ============================================================ */ :root { --ju-rot-anker: var(--rp-rot-anker); /* #6D1723 dunkelrote Anker */ --ju-beige-warm: #D4C9B5; /* bg-2 warm, geerdet */ --ju-beige-light: #ede4d2; /* bg-3 hell */ --ju-beige-kids: #faf6ee; /* wärmstes/hellstes Kinder-Modul */ --ju-warm-deep: #241410; /* erdiges Tiefbraun */ --font-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; } /* Helle, erdige Grundbühne */ html { margin: 0; } body.ju { margin: 0; background: var(--ju-beige-light); color: var(--rp-grau-7012); font-family: var(--font-body); } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } img { display: block; max-width: 100%; height: auto; } .b-wrap { max-width: 1480px; margin: 0 auto; padding: 0 40px; } .b-wrap--narrow { max-width: 1080px; } @media (max-width: 720px){ .b-wrap{ padding: 0 24px; } } /* Seitlicher Randabstand · an „Jiu-Jitsu Budokai Erwachsene" angeglichen ----------------------------------------------------------------- Feedback Dominik 04.08.2026: Inhalt steht zu dicht am Bildschirmrand. Ursache identisch zu css/boxen.css und css/krav-maga.css: .b-wrap rechnet hier content-box, die Gesamtbreite ist also 1480 + 2x40 = 1560. JJB lädt css/site.css mit globalem border-box und kommt damit auf 1480 gesamt — der Inhalt sitzt dort auf jeder Breite 40px weiter innen (bei 1512px 16px). Gemessen VOR der Änderung (Abstand Fensterkante → Inhaltskante, links wie rechts identisch): 2560px JJB 580 · Judo 540 1920px JJB 260 · Judo 220 1512px JJB 56 · Judo 40 1440px JJB 40 · Judo 40 Gescopet auf .ju — gleiche Schreibweise wie in css/boxen.css und css/krav-maga.css, damit das Muster über die Seiten hinweg wiedererkennbar bleibt. Unter 720px greift weiter padding: 0 24px — dort ändert sich nichts, weil der Wrap ohnehin schmaler als max-width ist. */ .ju .b-wrap { box-sizing: border-box; } /* ── Kicker (Drei-Anker-Rhythmus) ──────────────────────────── */ .b-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rp-rot-akzent); margin: 0 0 28px; display: flex; align-items: center; gap: 14px; } .b-kicker::before { content:""; width: 40px; height: 1px; background: var(--rp-rot-akzent); flex-shrink: 0; } .b-kicker--anker { color: var(--rp-rot-anker); } .b-kicker--anker::before { background: var(--rp-rot-anker); } .b-kicker--beige { color: var(--rp-beige); } .b-kicker--beige::before { background: var(--rp-beige); } .b-kicker--center { justify-content: center; } /* ── Buttons ───────────────────────────────────────────────── */ .b-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--rp-rot-akzent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; padding: 22px 40px; border-radius: 999px; transition: background 220ms var(--ease-standard), transform 220ms var(--ease-standard); } .b-btn:hover { background: #c40b1a; transform: translateY(-2px); } .b-btn--big { padding: 26px 52px; font-size: 15px; } @media (max-width: 480px){ .b-btn--big { padding: 19px 30px; font-size: 13px; letter-spacing: 0.08em; } } .b-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,0.55); color: #fff; padding: 21px 40px; } .b-btn--ghost:hover { background: #fff; color: var(--rp-tiefschwarz); border-color: #fff; } /* ── Textlink ──────────────────────────────────────────────── */ .b-link { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-rot-akzent); display: inline-flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--rp-rot-akzent); padding-bottom: 6px; } .b-link::after { content: "→"; transition: transform 220ms var(--ease-standard); } .b-link:hover::after { transform: translateX(6px); } .b-link--anker { color: var(--rp-rot-anker); border-color: var(--rp-rot-anker); } /* Platzhalter-Marker (sichtbar, kontrastsicher) ───────────── */ .ju .s-ph { color: var(--rp-rot-akzent); font-style: normal; } /* ── Foto-/Bild-Platzhalter (warm, hell · reines CSS) ───────── */ .s-ph-photo { --st-a: #e7ddc8; --st-b: #ddd0b6; position: relative; overflow: hidden; background: repeating-linear-gradient(135deg, var(--st-a) 0 18px, var(--st-b) 18px 36px); border: 1px solid rgba(109,23,35,0.14); } .s-ph-photo__note { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(82%, 460px); text-align: center; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; letter-spacing: 0.03em; color: #6a5c44; margin: 0; } .s-ph-photo__tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ju-rot-anker); background: rgba(237,228,210,0.82); border: 1px solid rgba(109,23,35,0.2); backdrop-filter: blur(4px); padding: 8px 13px; border-radius: 999px; } .s-ph-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Header & Footer: globale Site-Chrome (rp-gnav / rp-gfoot) via js/mobile-nav.js — das alte b-header/b-foot-Markup wurde entfernt. */ /* ============================================================ 1 · HERO · VOLLBILD (DUNKEL) · Foto randlos, Text darüber ----------------------------------------------------------------- Umgebaut 04.08.2026 (Feedback Dominik). Vorher: heller Hero auf --ju-beige-light, zweispaltiges Grid (1.05fr/0.95fr) mit dunklem Text links und dem Foto als gerahmte 4:5-Kachel rechts (.ju-hero__media + .s-ph-photo). Jetzt: das Foto liegt als .ju-hero__bg vollflächig hinter der Sektion, darüber ein Scrim, der Text steht in weißer Schrift darauf — Muster von .grap-hero__bg / .km-hero__bg / .box-hero__bg. Das ist ein bewusster Stilwechsel von HELL auf DUNKEL; der Rückweg liegt im Backup. Weil der Hero jetzt dunkel ist, wurde am zusätzlich data-nav-theme="light" entfernt — die globale Navigation stünde sonst mit dunkler Schrift auf dunklem Grund. Die Referenzseiten (Krav Maga, Grappling, Boxen, MMA) tragen das Attribut ebenfalls nicht. Paddings und min-height sind von .km-hero übernommen: oben clamp(118px, 15vh, 160px) hält den Kicker unter dem 90px hohen Header frei, unten clamp(56px, 7vw, 92px). Damit passt der komplette Hero-Inhalt auf einem 1440x900-Laptop ohne Scrollen. ============================================================ */ .ju-hero { position: relative; background: var(--ju-warm-deep); color: #fff; overflow: hidden; padding: clamp(118px, 15vh, 160px) 0 clamp(56px, 7vw, 92px); } /* object-position 50% 8%: Der Bildausschnitt wird im Breitformat oben beschnitten. 8% hält die Köpfe und den Griffkampf beider Judoka im Bild, während der Text links auf der ruhigen Wand- und Anzugfläche liegt statt auf dem Gesicht. */ .ju-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; z-index: 0; } .ju-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(28,17,13,0.95) 0%, rgba(28,17,13,0.9) 32%, rgba(28,17,13,0.56) 58%, rgba(28,17,13,0.18) 80%, transparent 96%), radial-gradient(ellipse 70% 80% at 88% 6%, rgba(109,23,35,0.34), transparent 56%), radial-gradient(ellipse 90% 70% at 8% 100%, rgba(36,20,16,0.55), transparent 62%); } .ju-hero .b-wrap { position: relative; z-index: 2; width: 100%; } .ju-hero__inner { display: block; } /* 780px statt der 640px der Referenzseiten: Der Judo-Kicker trägt mit „Judo in Berlin · Für Kinder ab 5 und Erwachsene jeden Alters" zwei Flex-Items und braucht rund 770px. Bei 640px brach jedes Item für sich um und riss durch den 14px-Gap ein sichtbares Loch in die Zeile; die Trust-Zeile lief ebenfalls zweizeilig. Die H1 bleibt über ihre eigene max-width von 16ch schmal, der Fließtext über 56ch — die Blockform des Heros ändert sich dadurch nicht. */ .ju-hero__text { max-width: 780px; } .ju-hero .b-kicker { color: var(--rp-beige); } .ju-hero .b-kicker::before { background: var(--rp-beige); } /* H1 von clamp(38px, 5.4vw, 78px) auf clamp(36px, 4.4vw, 62px) zurückgenommen — im auf 640px begrenzten Textblock lief die alte Größe auf fünf Zeilen und drückte den Hero über die Falz. Farbe: vorher var(--ju-rot-anker) auf Beige, jetzt Weiß auf Bild; das „sanfte" vorher var(--rp-rot-akzent), jetzt --rp-beige, weil Akzentrot auf dem dunklen Grund unter AA fällt. */ .ju-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.05; letter-spacing: -0.03em; color: #fff; margin: 0 0 28px; max-width: 16ch; text-wrap: balance; } .ju-hero__h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); } .ju-hero__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0 0 36px; max-width: 56ch; } /* CTA-Block · Button plus Micro-Zeile, untereinander. Der Block schrumpft über width: max-content auf Buttonbreite, die Micro-Zeile zentriert sich dadurch exakt zum Button (Muster wie .km-hero__cta / .box-hero__cta). Der Sekundärlink „Mehr erfahren ↓" ist am 04.08.2026 entfallen — er sprang nur auf die direkt darunterliegende Sektion. Die zugehörige Regel .ju-hero__more ist damit ersatzlos weggefallen; der Anker id="was-ist" bleibt erhalten. */ .ju-hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: max-content; max-width: 100%; } .ju-hero__cta .b-btn { justify-content: center; } .ju-hero__micro { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212,201,181,0.92); } .ju-hero__trust { margin: clamp(36px, 4vw, 52px) 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.16); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(212,201,181,0.88); line-height: 1.9; } /* Umschaltpunkt Lang-/Kurzfassung des Kickers am 04.08.2026 von 600px auf 900px hochgezogen. Der Kicker besteht aus zwei Flex-Items („Judo in Berlin ·" plus ) und braucht in der Langfassung rund 770px. Unterhalb von etwa 830px Fensterbreite brach deshalb jedes Item für sich um, und der 14px-Gap dazwischen riss ein sichtbares Loch in die Zeile. Ab 900px trägt der 780px breite Textblock die Langfassung einzeilig. */ /* Echtes Hero-Foto (Oktober 2026, Querformat): Die beiden Judoka stehen in der Bildmitte. Vollflächig lag die Trainingspartnerin komplett unter dem dunklen Schleier links. Am Desktop sitzt das Foto deshalb als rechte Bildfläche ab 34 %; der Schleier blendet die linke Kante weich in das Tiefbraun ein, der Text bleibt auf ruhigem Grund. */ @media (min-width: 941px){ .ju-hero__bg { left: 34%; width: 66%; } .ju-hero__scrim { background: linear-gradient(90deg, rgba(36,20,16,1) 0%, rgba(36,20,16,1) 34%, rgba(28,17,13,0.72) 40%, rgba(28,17,13,0.34) 52%, rgba(28,17,13,0.08) 66%, transparent 80%), linear-gradient(180deg, rgba(28,17,13,0.35) 0%, transparent 22%, transparent 78%, rgba(28,17,13,0.4) 100%), radial-gradient(ellipse 70% 80% at 88% 6%, rgba(109,23,35,0.24), transparent 56%); } } /* Tablet quer: Der Textblock ist relativ breiter → Bildfläche ab 42 %. Kicker und Fließtext reichen hier bis gut 735px und liefen über das helle Fenster und den Unterarm der Partnerin. Der Schleier bleibt deshalb bis zum Textende kräftig (Stopps in px, weil der Textblock fest breit ist) und öffnet sich erst danach; das Gesicht des Trainierenden rechts bleibt frei. Gemessen 960–1100px: mind. 4,6:1. */ @media (min-width: 941px) and (max-width: 1100px){ .ju-hero__bg { left: 42%; width: 58%; } .ju-hero__scrim { background: linear-gradient(90deg, rgba(36,20,16,1) 0%, rgba(36,20,16,1) 42%, rgba(28,17,13,0.86) 540px, rgba(28,17,13,0.72) 680px, rgba(28,17,13,0.5) 750px, rgba(28,17,13,0.18) 850px, transparent 930px), linear-gradient(180deg, rgba(28,17,13,0.55) 0%, rgba(28,17,13,0.2) 18%, transparent 30%, transparent 78%, rgba(28,17,13,0.4) 100%); } } .ju-kick-s { display: none; } @media (max-width: 900px){ .ju-kick-l { display: none; } .ju-kick-s { display: inline; } } /* Bei 375px braucht die Kurzfassung 333px, verfügbar sind 327px. Der Kicker-Strich und das Sperrsatz-Maß werden deshalb auf schmalen Phones leicht zurückgenommen, statt die Zeile brechen zu lassen. */ @media (max-width: 420px){ .ju-hero .b-kicker { letter-spacing: 0.16em; gap: 10px; } .ju-hero .b-kicker::before { width: 24px; } } @media (max-width: 940px){ /* Die Zweispaltigkeit ist entfallen; hier bleibt nur die Anpassung von Bildausschnitt und Scrim für das Hochformat. */ .ju-hero__text { max-width: none; } .ju-hero__bg { object-position: 44% 16%; } /* Scrim im Hochformat vertikal statt diagonal — gemessen bei 375px auf dem tatsächlich gerenderten Grund, damit Kicker (Beige, 12px) und Micro-Zeile über 4,5:1 bleiben. */ .ju-hero__scrim { background: linear-gradient(180deg, rgba(28,17,13,0.78) 0%, rgba(28,17,13,0.52) 40%, rgba(28,17,13,0.95) 100%), radial-gradient(ellipse 70% 80% at 88% 6%, rgba(109,23,35,0.24), transparent 56%); } } /* Handy hochkant (Oktober 2026): Vollflächig lag das Querformat-Foto gedimmt hinter dem Text, die Trainingspartnerin fiel aus dem Bild, unten blieben nur Anzüge und Gürtel. Der Text steht hier oben und endet nach gut 540px; darunter ist Platz. Das Foto beginnt deshalb erst unter der Trust-Zeile, der Schleier blendet seine Oberkante weich ein, und beide lachenden Gesichter samt Griff stehen frei. Erst ab 740px Höhe; auf kürzeren Handys bleibt das vollflächige Foto. */ @media (max-width: 600px) and (min-height: 740px) and (orientation: portrait){ .ju-hero .ju-hero__bg.fp { top: 480px; bottom: auto; height: 600px; object-position: 26% 0 !important; } .ju-hero__scrim { background: radial-gradient(ellipse 70% 50% at 88% 4%, rgba(109,23,35,0.24), transparent 56%), linear-gradient(180deg, rgba(28,17,13,0.55) 0px, rgba(28,17,13,0.55) 440px, rgba(28,17,13,0.97) 480px, rgba(28,17,13,0.92) 530px, rgba(28,17,13,0.5) 580px, rgba(28,17,13,0.12) 640px, rgba(28,17,13,0.1) 78%, rgba(28,17,13,0.6) 100%); } } /* Schmale Handys: Der Fließtext bricht hier eine Zeile tiefer um; der Ausschnitt rückt etwas nach rechts, damit das Gesicht rechts ganz bleibt. */ @media (max-width: 370px) and (min-height: 740px) and (orientation: portrait){ .ju-hero .ju-hero__bg.fp { top: 500px; object-position: 31% 0 !important; } .ju-hero__scrim { background: radial-gradient(ellipse 70% 50% at 88% 4%, rgba(109,23,35,0.24), transparent 56%), linear-gradient(180deg, rgba(28,17,13,0.55) 0px, rgba(28,17,13,0.55) 460px, rgba(28,17,13,0.97) 500px, rgba(28,17,13,0.92) 555px, rgba(28,17,13,0.5) 600px, rgba(28,17,13,0.12) 660px, rgba(28,17,13,0.1) 80%, rgba(28,17,13,0.6) 100%); } } /* Aufgeklappter Hero-Text („Mehr lesen"): Der Rest des Absatzes schiebt Probetraining-Knopf und Trust-Zeile um 60–90px nach unten. Ohne eigenen Zustand lag die zweite Trust-Zeile dann auf dem hellen Fensterband. Foto und Schleier rücken deshalb mit nach unten; die Bildhöhe schrumpft mit dem verbleibenden Platz, damit beide Gesichter auch auf kürzeren Handys (375×740) ganz im Bild bleiben. Gemessen 360×740 bis 600×1000. */ @media (max-width: 600px) and (min-height: 740px) and (orientation: portrait){ .ju-hero:has(.rp-mehr.is-open) .ju-hero__bg.fp { top: 570px; height: min(600px, max(300px, calc((100% - 570px) * 2.3))); } .ju-hero:has(.rp-mehr.is-open) .ju-hero__scrim { background: radial-gradient(ellipse 70% 50% at 88% 4%, rgba(109,23,35,0.24), transparent 56%), linear-gradient(180deg, rgba(28,17,13,0.55) 0px, rgba(28,17,13,0.55) 530px, rgba(28,17,13,0.97) 570px, rgba(28,17,13,0.92) 620px, rgba(28,17,13,0.5) 670px, rgba(28,17,13,0.12) 730px, rgba(28,17,13,0.1) 85%, rgba(28,17,13,0.6) 100%); } } @media (max-width: 370px) and (min-height: 740px) and (orientation: portrait){ .ju-hero:has(.rp-mehr.is-open) .ju-hero__bg.fp { top: 590px; height: max(300px, calc((100% - 590px) * 2.3)); } .ju-hero:has(.rp-mehr.is-open) .ju-hero__scrim { background: radial-gradient(ellipse 70% 50% at 88% 4%, rgba(109,23,35,0.24), transparent 56%), linear-gradient(180deg, rgba(28,17,13,0.55) 0px, rgba(28,17,13,0.55) 550px, rgba(28,17,13,0.97) 590px, rgba(28,17,13,0.92) 650px, rgba(28,17,13,0.4) 685px, rgba(28,17,13,0.1) 720px, rgba(28,17,13,0.1) 92%, rgba(28,17,13,0.55) 100%); } } /* ============================================================ 2 · WAS IST JUDO? · ANKER 1 · Dunkelrot · Editorial-Prosa + Signatur „Siegen durch Nachgeben" (Gleichgewicht / Kuzushi) ============================================================ */ .ju-def { background: var(--ju-rot-anker); color: #fff; padding: clamp(100px, 13vw, 160px) 0; position: relative; overflow: hidden; } .ju-def::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 84% 4%, rgba(220,13,29,0.24), transparent 56%); pointer-events: none; } .ju-def__inner { position: relative; z-index: 1; } .ju-def__head { max-width: 880px; margin-bottom: clamp(44px, 5vw, 64px); } .ju-def__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.8vw, 66px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; margin: 0 0 24px; max-width: 20ch; text-wrap: balance; } .ju-def__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); } .ju-def__lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.1vw, 27px); line-height: 1.5; color: var(--rp-beige); margin: 0; max-width: 56ch; } .ju-def__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: start; } .ju-def__body p { font-size: 17px; line-height: 1.74; color: rgba(255,255,255,0.9); margin: 0 0 22px; max-width: 60ch; } .ju-def__body p:last-child { margin-bottom: 0; } .ju-def__body strong { color: #fff; font-weight: 700; } .ju-def__body em { font-style: normal; color: var(--rp-beige); font-weight: 600; } .ju-def__name { font-family: var(--font-serif); font-style: italic; } .ju-def__morebtn { display: none; } @media (max-width: 940px){ .ju-def__grid{ grid-template-columns: 1fr; gap: 16px; } .ju-def__body--more.is-collapsible { display: none; } .ju-def__body--more.is-collapsible.is-open { display: block; } .ju-def__morebtn { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-beige); border-bottom: 1px solid rgba(237,228,210,0.4); padding: 6px 0; } .ju-def__morebtn[hidden] { display: none; } } /* ── SIGNATUR · SIEGEN DURCH NACHGEBEN (Gleichgewicht / Kuzushi) ─ Eine Figur an ihrem Schwerpunkt. Beim Scrollen genügt ein kleiner, getimter Impuls, um sie aus dem Gleichgewicht zu kippen. Steuerung: js/judo-v3.js. Ohne JS / reduced motion statisch & lesbar (Figur im Gleichgewicht). */ .ju-balance { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 4.5vw, 72px); align-items: center; } .ju-balance__stage { position: relative; width: 100%; aspect-ratio: 500/292; } .ju-balance__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ju-balance__ground { stroke: rgba(237,228,210,0.42); stroke-width: 1.5; } /* Kuzushi · technisches Diagramm — Schwerpunkt, Lot, Stützfläche, Happō-Rosette, Drehpunkt, Wurfkreis. Beige = Struktur, Rot ausschließlich für Richtung, Maß und Wirkung. */ .ju-kz__base { stroke: rgba(237,228,210,0.72); stroke-width: 2.5; } .ju-kz__foot { stroke: rgba(237,228,210,0.72); stroke-width: 2; } .ju-kz__ray { stroke: var(--rp-beige); stroke-width: 1.5; stroke-linecap: round; opacity: 0.28; } .ju-kz__ray--active { stroke: var(--rp-rot-akzent); opacity: 0.9; } .ju-kz__axis { stroke: var(--rp-beige); stroke-width: 3; stroke-linecap: round; opacity: 0.92; } .ju-kz__tick { stroke: var(--rp-beige); stroke-width: 2; stroke-linecap: round; opacity: 0.75; } .ju-kz__mass { fill: var(--rp-rot-akzent); filter: drop-shadow(0 0 8px rgba(220,13,29,0.55)); } .ju-kz__plumb { stroke: rgba(237,228,210,0.5); stroke-width: 1.5; stroke-dasharray: 4 6; } .ju-kz__plumbfoot { stroke: rgba(237,228,210,0.45); stroke-width: 2; } .ju-kz__gap { stroke: var(--rp-rot-akzent); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(220,13,29,0.5)); } .ju-kz__angle { stroke: rgba(220,13,29,0.75); stroke-width: 1.75; fill: none; } .ju-kz__pivot { fill: var(--rp-beige); } .ju-kz__pivotring { stroke: rgba(237,228,210,0.5); stroke-width: 1.5; fill: none; } .ju-kz__circle { stroke: rgba(237,228,210,0.3); stroke-width: 1.5; fill: none; } .ju-kz__trail { stroke: var(--rp-rot-akzent); stroke-width: 2.75; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 9px rgba(220,13,29,0.6)); } .ju-kz__impact { stroke: var(--rp-rot-akzent); stroke-width: 2.5; stroke-linecap: round; } .ju-kz__note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: rgba(237,228,210,0.72); } .ju-kz__noteline { stroke: rgba(237,228,210,0.5); stroke-width: 1; } .ju-balance__label { font-family: var(--font-jp, var(--font-mono)); font-size: 26px; fill: rgba(237,228,210,0.52); text-anchor: middle; } @media (max-width: 600px){ .ju-kz__note, .ju-kz__noteline { display: none; } } .ju-balance__aside { display: flex; flex-direction: column; gap: 18px; } .ju-balance__term { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.01em; color: var(--rp-beige); margin: 0; display: flex; flex-direction: column; gap: 6px; } .ju-balance__term span { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Noto Serif JP", monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(237,228,210,0.55); } .ju-balance__lede { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.82); margin: 0; max-width: 46ch; } .ju-balance__steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } /* Übergang 04.08.2026 von 400 auf 250 ms — proportional zum auf 7500 ms verkürzten Zyklus in js/judo-v3.js (7500/12000 × 400 = 250). Sonst hinge das Aufleuchten der Schritt-Texte dem schnelleren Bewegungsablauf spürbar hinterher. */ .ju-balance__steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.78); transition: color 250ms var(--ease-standard); } .ju-balance__steps li span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: rgba(237,228,210,0.5); transition: color 250ms var(--ease-standard); } .ju-balance__steps li.is-on { color: #fff; } .ju-balance__steps li.is-on span { color: var(--rp-rot-akzent); } .ju-balance__msg { grid-column: 1 / -1; margin: clamp(32px, 4vw, 52px) 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.4; color: var(--rp-beige); max-width: 34ch; text-wrap: balance; } @media (max-width: 900px){ .ju-balance{ grid-template-columns: 1fr; gap: 32px; } } /* ============================================================ 3 · JUDO FÜR KINDER · helles, freundliches Beige (wärmstes Modul) ============================================================ */ .ju-kids { background: var(--ju-beige-kids); color: var(--rp-tiefschwarz); padding: clamp(96px, 12vw, 152px) 0; } .ju-kids__inner { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(44px, 5vw, 84px); align-items: center; } .ju-kids__head { margin-bottom: 28px; } .ju-kids__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ju-rot-anker); margin: 0; max-width: 16ch; text-wrap: balance; } .ju-kids__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); } .ju-kids__body p { font-size: 17px; line-height: 1.74; color: var(--rp-tiefschwarz); margin: 0 0 20px; max-width: 60ch; } .ju-kids__body p:last-of-type { margin-bottom: 0; } .ju-kids__body strong { color: var(--ju-rot-anker); font-weight: 700; } .ju-kids__body em { font-style: normal; color: var(--rp-rot-akzent); font-weight: 600; } .ju-kids__body .s-ph { color: var(--rp-rot-akzent); font-family: var(--font-mono); font-size: 0.86em; } .ju-kids__hint { position: relative; display: block; margin: 28px 0 0; padding: 20px 24px 20px 48px; background: #fff; border: 1px solid rgba(109,23,35,0.12); border-radius: 18px; font-size: 15px; line-height: 1.6; color: var(--rp-grau-7012); box-shadow: var(--shadow-sm); } .ju-kids__hint::before { content: ""; position: absolute; left: 24px; top: 27px; width: 10px; height: 10px; border-radius: 50%; background: var(--rp-rot-akzent); } .ju-kids__hint strong { color: var(--ju-rot-anker); font-weight: 700; } .ju-kids__media { position: relative; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px -54px rgba(45,26,18,0.5); } .ju-kids__media .s-ph-photo { position: absolute; inset: 0; --st-a: #f1e9d8; --st-b: #e8dcc4; } /* Alterstufen-Streifen */ .ju-kids__ages { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; } .ju-kids__age { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ju-rot-anker); background: #fff; border: 1px solid rgba(109,23,35,0.14); border-radius: 999px; padding: 9px 16px; } .ju-kids__age b { font-weight: 700; } @media (max-width: 940px){ .ju-kids__inner{ grid-template-columns: 1fr; gap: 40px; } .ju-kids__media{ aspect-ratio: 16/11; order: -1; } } /* ============================================================ 4 · JUDO FÜR ERWACHSENE · Beige warm geerdet · sachlicher Ton ============================================================ */ .ju-adult { background: var(--ju-beige-warm); color: var(--rp-tiefschwarz); padding: clamp(96px, 12vw, 152px) 0; } .ju-adult__head { max-width: 880px; margin-bottom: clamp(40px, 5vw, 56px); } .ju-adult__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ju-rot-anker); margin: 0; max-width: 18ch; text-wrap: balance; } .ju-adult__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); } .ju-adult__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ju-block { background: var(--rp-white); border: 1px solid var(--rp-border); border-radius: 20px; padding: clamp(30px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; } .ju-block__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-rot-akzent); margin: 0; display: flex; align-items: center; gap: 12px; } .ju-block__tag::before { content: ""; width: 26px; height: 1px; background: var(--rp-rot-akzent); } .ju-block__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.14; letter-spacing: -0.015em; color: var(--ju-rot-anker); margin: 0; } .ju-block__p { font-size: 16px; line-height: 1.7; color: var(--rp-grau-7012); margin: 0; } .ju-block__p + .ju-block__p { margin-top: -2px; } .ju-block__p strong { color: var(--ju-rot-anker); font-weight: 700; } .ju-block__p em { font-style: normal; color: var(--rp-rot-akzent); font-weight: 600; } .ju-adult__close { margin: clamp(40px, 5vw, 60px) 0 0; max-width: 58ch; } .ju-adult__close p { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.1vw, 27px); line-height: 1.5; color: var(--ju-rot-anker); margin: 0; text-wrap: balance; } .ju-adult__close p + p { margin-top: 0.9em; } /* zweiter Absatz „Im Judo gibt es immer ein nächstes Ziel“ (07.10.) */ .ju-adult__close strong { color: var(--ju-rot-anker); font-weight: 700; font-style: normal; } .ju-adult__close em { color: var(--rp-rot-akzent); } @media (max-width: 820px){ .ju-adult__grid{ grid-template-columns: 1fr; } } /* ============================================================ 5 · DAS UNTERSCHEIDET UNS · ANKER 2 · Dunkelrot · Prosa + Count-up ============================================================ */ .ju-diff { background: var(--ju-rot-anker); color: #fff; padding: clamp(100px, 13vw, 160px) 0; position: relative; overflow: hidden; } .ju-diff::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 16% 8%, rgba(220,13,29,0.26), transparent 56%); pointer-events: none; } .ju-diff__inner { position: relative; z-index: 1; } .ju-diff__head { max-width: 880px; margin-bottom: clamp(44px, 5vw, 60px); } .ju-diff__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.8vw, 66px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; margin: 0 0 24px; max-width: 17ch; text-wrap: balance; } .ju-diff__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); } .ju-diff__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.86); margin: 0; max-width: 64ch; } .ju-diff__list { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); max-width: 980px; margin-top: clamp(40px, 5vw, 56px); } .ju-diff__item { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid rgba(255,255,255,0.14); } .ju-diff__item:last-child { border-bottom: 0; padding-bottom: 0; } .ju-diff__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--rp-beige); padding-top: 6px; } .ju-diff__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.18; letter-spacing: -0.015em; color: #fff; margin: 0 0 10px; } .ju-diff__d { font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.84); margin: 0; max-width: 74ch; } .ju-diff__d strong { color: #fff; font-weight: 700; } .ju-diff__close { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2.3vw, 30px); line-height: 1.4; color: var(--rp-beige); margin: clamp(36px, 4vw, 52px) 0 0; max-width: 48ch; text-wrap: balance; } .ju-diff__close strong { font-style: normal; color: #fff; font-weight: 700; } .ju-stats { margin-top: clamp(56px, 6vw, 84px); padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.18); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .ju-stat__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(38px, 4.4vw, 62px); line-height: 0.92; letter-spacing: -0.03em; color: var(--rp-beige); font-variant-numeric: tabular-nums; } .ju-stat__n .pre { font-family: var(--font-mono); font-weight: 500; font-size: 0.26em; letter-spacing: 0.06em; vertical-align: 0.55em; margin-right: 0.18em; color: rgba(237,228,210,0.75); text-transform: uppercase; } .ju-stat__n .suf { font-family: var(--font-mono); font-weight: 500; font-size: 0.3em; letter-spacing: 0.04em; vertical-align: 0.4em; margin-left: 0.14em; color: rgba(237,228,210,0.75); } .ju-stat__l { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); line-height: 1.5; } @media (max-width: 900px){ .ju-stats{ grid-template-columns: 1fr 1fr; gap: 40px 20px; } .ju-diff__item{ grid-template-columns: 1fr; gap: 8px; } } /* ============================================================ 6 · STIMMEN AUS DER COMMUNITY · Beige warm · Karten-Stapel ----------------------------------------------------------------- Aufgebaut 04.08.2026. Vorher enthielt die Sektion KEIN Zitat, nur den schmalen Hinweis-Slot .ju-quote__slim. Der bleibt erhalten und rutscht als Beleg für die 4,7 unter die Karten. ============================================================ */ .ju-quote { background: var(--ju-beige-warm); color: var(--rp-tiefschwarz); padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 88px); } .ju-quote__head { max-width: 760px; margin: 0 auto clamp(28px, 3.5vw, 44px); text-align: center; } .ju-quote__head .b-kicker { justify-content: center; } .ju-quote__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.0; letter-spacing: -0.03em; color: var(--ju-rot-anker); margin: 0; text-wrap: balance; } .ju-quote__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); } /* ── Karten-Stapel ────────────────────────────────────────── Portiert aus css/kids-scroll-v3.css (.kv3-stack / .kv3-card) über die bereits auf eine Sportartenseite angepasste Fassung in css/krav-maga.css, damit diese Seite KEIN kinder-spezifisches Stylesheet einbinden muss. Jede Karte klebt mittig im Viewport; die nächste schiebt sich darüber, die darunterliegende tritt per JS zurück (js/judo-v3.js). Farben sind auf Judo umgestellt: Akzentrot als Oberkante, warmes Beige für jede zweite Karte, der Anker-Ton --ju-rot-anker für die letzte. Keine Kinderseiten-Farben. box-sizing ist hier explizit gesetzt: .ju .b-wrap ist zwar auf border-box umgestellt, die Karte liegt aber außerhalb des Wraps. */ .kv3-stack { position: relative; padding-bottom: 9vh; } .kv3-stack__wrap { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; padding: 0 20px; } .kv3-card { box-sizing: border-box; position: relative; width: min(64ch, 94vw); border-radius: 24px; padding: clamp(32px, 5vw, 64px); background: var(--rp-white); border-top: 4px solid var(--rp-rot-akzent); box-shadow: 0 40px 90px -36px rgba(45,26,18,0.5); will-change: transform; } .kv3-card__num { position: absolute; top: 26px; right: 30px; margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rp-grau-muted); } .kv3-card--beige { background: var(--ju-beige-kids); } .kv3-card--anker { background: var(--ju-rot-anker); border-top-color: var(--rp-beige); } .kv3-card--anker .ju-quote__q { color: #fff; } .kv3-card--anker .ju-quote__attr { color: var(--rp-beige); border-top-color: rgba(255,255,255,0.24); } .kv3-card--anker .ju-quote__attr::before { background: var(--rp-beige); } .kv3-card--anker .ju-quote__note { color: rgba(255,255,255,0.74); } .kv3-card--anker .kv3-card__num { color: rgba(237,228,210,0.78); } .ju-quote__q { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(19px, 2vw, 29px); line-height: 1.36; letter-spacing: -0.01em; color: var(--ju-rot-anker); margin: 0 0 30px; text-wrap: pretty; } .ju-quote__attr { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ju-rot-anker); margin: 0; padding-top: 22px; border-top: 1px solid var(--rp-border); } .ju-quote__attr::before { content:""; width: 40px; height: 1px; background: var(--ju-rot-anker); flex-shrink: 0; } .ju-quote__note { margin: 14px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; line-height: 1.7; color: #7a6d55; max-width: 60ch; } @media (max-width: 900px){ .kv3-card { padding: 30px 24px 28px; } .kv3-card__num { position: static; display: block; margin: 0 0 16px; } } /* Reduzierte Bewegung: keine Sticky-Bühne, alle Karten stehen vollständig lesbar untereinander (das JS steigt zusätzlich aus). */ @media (prefers-reduced-motion: reduce){ .kv3-stack { padding-bottom: 48px; } .kv3-stack__wrap { position: static; height: auto; padding: 14px 20px; } } /* Beleg-Slot · rutscht unter die Karten */ .ju-quote__slim { max-width: 880px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; border: 1px dashed rgba(109,23,35,0.32); border-radius: 18px; padding: clamp(24px, 3vw, 36px) clamp(20px, 3.4vw, 44px); background: rgba(255,255,255,0.35); } .ju-quote__slimlabel { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ju-rot-anker); margin: 0 0 12px; } .ju-quote__slimtext { font-family: var(--font-mono); font-size: 12px; line-height: 1.75; letter-spacing: 0.03em; color: var(--rp-rot-akzent); margin: 0; } /* ============================================================ 7 · FAQ (b-faq / b-q) · helle Variante (Beige hell) ============================================================ */ .b-faq { background: var(--rp-tiefschwarz); color: #fff; padding: clamp(96px, 12vw, 152px) 0; } .b-faq__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; } .b-faq__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5.2vw, 80px); line-height: 0.98; letter-spacing: -0.03em; margin: 0; max-width: 16ch; } .b-faq__sub { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.7); max-width: 44ch; margin: 0; } .b-faq__list { border-top: 1px solid rgba(255,255,255,0.14); } .b-q { border-bottom: 1px solid rgba(255,255,255,0.14); } .b-q__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 0; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.1vw, 26px); letter-spacing: -0.01em; color: #fff; background: none; border: 0; cursor: pointer; } .b-q__btn h3 { font: inherit; margin: 0; } .b-q__plus { flex-shrink: 0; width: 32px; height: 32px; position: relative; } .b-q__plus::before, .b-q__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--rp-rot-akzent); transition: transform 250ms; } .b-q__plus::before { width: 22px; height: 2px; transform: translate(-50%, -50%); } .b-q__plus::after { width: 2px; height: 22px; transform: translate(-50%, -50%); } .b-q.is-open .b-q__plus::after { transform: translate(-50%, -50%) scaleY(0); } .b-q__a { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease-standard); } .b-q__a-inner { padding: 0 64px 30px 0; font-size: 16px; line-height: 1.68; color: rgba(255,255,255,0.78); max-width: 80ch; } .b-q.is-open .b-q__a { max-height: 680px; } .b-faq__foot { margin-top: 40px; } @media (max-width: 900px){ .b-faq__head{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; } .b-q__a-inner{ padding-right: 0; } } /* helle FAQ-Variante (Beige hell) */ .b-faq--light { background: var(--ju-beige-light); color: var(--rp-grau-7012); } .b-faq--light .b-faq__h { color: var(--ju-rot-anker); } .b-faq--light .b-faq__sub { color: var(--rp-grau-7012); } .b-faq--light .b-faq__list { border-top-color: var(--rp-border); } .b-faq--light .b-q { border-bottom-color: var(--rp-border); } .b-faq--light .b-q__btn { color: var(--rp-tiefschwarz); } .b-faq--light .b-q__a-inner { color: var(--rp-grau-7012); } .b-faq--light .b-q__a-inner .s-ph { color: var(--rp-rot-akzent); } /* ============================================================ 8 · WO DU JUDO TRAINIERST · Beige warm · zentriertes Karten-PAAR ============================================================ */ .ju-loc { background: var(--ju-beige-warm); color: var(--rp-tiefschwarz); padding: clamp(96px, 12vw, 152px) 0; } .ju-loc__head { max-width: 760px; margin: 0 auto clamp(44px, 5vw, 60px); text-align: center; } .ju-loc__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.0; letter-spacing: -0.03em; color: var(--ju-rot-anker); margin: 0 0 24px; text-wrap: balance; } .ju-loc__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); } .ju-loc__lede { font-size: 17px; line-height: 1.68; color: var(--rp-tiefschwarz); margin: 0; } /* Karten-PAAR · zentriert, keine leere dritte Spalte ----------------------------------------------------------------- Umgebaut 04.08.2026 nach dem Muster von .grap-loc-card / .km-loc-card: Foto oben, darunter der Body-Wrapper. Die Karte ist jetzt ein statt
und damit ganzflächig klickbar; der frühere Textlink (.ju-loc__card .b-link) ist dadurch entfallen. Die Grid-Begrenzung max-width: 920px ist durch dieselbe Spur- Definition wie auf Grappling und Krav Maga ersetzt — repeat(2, minmax(0, 360px)) mit justify-content: center. Beide Seiten haben ebenfalls nur zwei Karten und verteilen sie so. .ju-loc__pill bleibt unverändert bestehen und wird weiterverwendet. */ .ju-loc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 20px; justify-content: center; } .ju-loc-card { background: var(--rp-white); border: 1px solid var(--rp-border); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px -56px rgba(45,26,18,0.5); transition: border-color 320ms var(--ease-standard), transform 520ms var(--ease-standard), box-shadow 520ms var(--ease-standard); } .ju-loc-card:hover { border-color: var(--rp-rot-akzent); transform: translateY(-4px); box-shadow: 0 34px 70px -40px rgba(45,26,18,0.55); } .ju-loc-card__photo { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--ju-beige-light); flex-shrink: 0; } .ju-loc-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-standard); } .ju-loc-card:hover .ju-loc-card__photo img { transform: scale(1.06); } .ju-loc-card__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 58%, rgba(45,26,18,0.28)); } .ju-loc-card__body { display: flex; flex-direction: column; flex: 1; padding: 28px 30px 24px; box-sizing: border-box; } .ju-loc-card__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--rp-rot-akzent); } .ju-loc-card__badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-rot-akzent); margin: 14px 0 0; display: inline-flex; align-items: center; gap: 10px; } .ju-loc-card__badge::before { content: ""; width: 22px; height: 1px; background: rgba(220,13,29,0.5); flex-shrink: 0; } .ju-loc-card__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.02; letter-spacing: -0.02em; color: var(--ju-rot-anker); margin: 10px 0 6px; } .ju-loc-card__region { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-grau-muted); margin: 0; } .ju-loc-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; } .ju-loc__pill { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ju-rot-anker); background: var(--ju-beige-light); border: 1px solid var(--rp-border); border-radius: 999px; padding: 8px 14px; } .ju-loc-card__arrow { margin-top: auto; align-self: flex-end; width: 44px; height: 44px; border: 1px solid var(--rp-border); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ju-rot-anker); transition: background 220ms var(--ease-standard), border-color 220ms var(--ease-standard), color 220ms var(--ease-standard), transform 320ms var(--ease-standard); } .ju-loc-card:hover .ju-loc-card__arrow { background: var(--rp-rot-akzent); border-color: var(--rp-rot-akzent); color: #fff; transform: translate(2px,-2px); } .ju-loc__foot { margin: clamp(28px, 3vw, 40px) auto 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.7; letter-spacing: 0.04em; color: var(--rp-rot-akzent); max-width: 80ch; text-align: center; } @media (max-width: 760px){ .ju-loc__grid{ grid-template-columns: minmax(0, 420px); } } /* ============================================================ 9 · FINALER CTA · ANKER 3 · Tiefschwarz · Kante zu Kante ============================================================ */ .ju-final { background: var(--rp-tiefschwarz); color: #fff; padding: clamp(120px, 15vw, 184px) 24px; position: relative; overflow: hidden; text-align: center; } .ju-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(109,23,35,0.6), transparent 62%); pointer-events: none; } .ju-final__inner { max-width: 940px; margin: 0 auto; position: relative; z-index: 1; } .ju-final__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 6.2vw, 92px); line-height: 0.98; letter-spacing: -0.035em; margin: 28px 0; text-wrap: balance; } .ju-final__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); } .ju-final__sub { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.88); margin: 0 auto 44px; max-width: 58ch; } .ju-final__row { display: flex; justify-content: center; } .ju-final__btn { box-shadow: 0 22px 60px -18px rgba(220,13,29,0.6); } .ju-final__foot { margin-top: 40px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); } /* ============================================================ STICKY-CTA · Desktop im Header → Floating nur mobil ============================================================ */ .sticky-cta { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--rp-rot-akzent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 18px 24px; border-radius: 999px; box-shadow: 0 20px 50px -16px rgba(220,13,29,0.6); transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard); } .sticky-cta.hidden { opacity: 0; transform: translateY(120%); pointer-events: none; } @media (min-width: 721px){ body.ju .sticky-cta { left: auto; right: 24px; bottom: 24px; width: auto; } }