/* ============================================================
MOBIL-V4 · Globale Mobil-Schicht
Briefing „Randori-Pro Website – Mobile-Optimierung", 08/2026.
WIRD ALS LETZTES STYLESHEET GELADEN und ist damit für die hier
geregelten Eigenschaften die autoritative Quelle. Wer eine Regel
sucht, die auf allen Seiten gleich aussieht, sucht sie hier.
ARBEITSREGELN (Teil 0 des Briefings)
1. Alles steht in `@media (max-width: …)`. Die Desktop-Ansicht
bleibt unangetastet. Die drei ausdrücklich freigegebenen
Desktop-Ausnahmen sind unten einzeln markiert („AUCH DESKTOP").
2. Breakpoint für die Mobil-Regeln ist 768px — so steht es im
Briefing (Teil 4, Button-Label). Die bestehenden Seiten-
Stylesheets schalten bei 720px. Wo eine Regel eine bestehende
Regel korrigieren muss, sitzt sie deshalb ebenfalls auf 720px,
damit kein Band zwischen 721 und 768px entsteht, in dem die
halbe Korrektur greift. Solche Stellen sind kommentiert.
3. Animationen nur über transform/opacity, immer mit
prefers-reduced-motion-Rückfallebene.
============================================================ */
/* ============================================================
1 · PROBETRAINING-BUTTON · die eine Komponente (Briefing 1.1)
============================================================
Markup (überall identisch):
Zwei gepflegte Labels, kein CSS-Textbeschnitt: Desktop zeigt
`__lang`, Mobil `__kurz`. Weil immer genau eines auf
`display:none` steht, liegt auch immer nur eines im
Accessibility-Baum — der Link hat auf jeder Breite genau einen
Namen. Das Leerzeichen vor `__pfeil` steht bewusst im Markup und
nicht als margin: so rendert die Desktop-Fassung zeichengleich
wie vorher.
Die bestehenden Button-Klassen (.b-btn, .s-btn …) bleiben am
Element. Diese Komponente regelt nur Label, Umbruch, Größe und
Ausrichtung — nicht Farbe oder Form. */
.rp-cta__kurz { display: none; }
/* Einzeilig auf allen Breiten (Briefing 1.1). Der Pfeil kann damit
nicht mehr in die zweite Zeile rutschen. */
.rp-cta { white-space: nowrap; }
@media (max-width: 768px) {
.rp-cta__lang { display: none; }
.rp-cta__kurz { display: inline; }
/* Schrift und Padding zurücknehmen, damit das kurze Label auch
auf 320px-Geräten einzeilig in die Breite passt. */
.rp-cta {
font-size: clamp(13px, 3.5vw, 15px) !important;
letter-spacing: 0.04em;
padding: 15px 24px !important;
max-width: calc(100vw - 40px);
box-sizing: border-box;
}
/* Button horizontal zentriert, Subline exakt mittig darunter.
`align-items:center` auf dem Wrapper zentriert den Button auch
dann, wenn er als inline-flex mit eigener Breite sitzt. */
/* `width:100%` und `align-self:stretch` sind nötig, weil mehrere
Heros die CTA in einen Flex- oder Grid-Elternteil setzen, der
seine Kinder auf Inhaltsbreite schrumpfen lässt. Ohne beides
zentriert der Wrapper zwar korrekt — aber nur innerhalb seiner
schmalen Box, die selbst links klebt (gemessen auf Taekwondo:
Wrapper 204px breit, linksbündig ab 24px).
`!important` steht hier, weil einzelne Heros die CTA-Zeile mit
höherer Spezifität als Grid setzen (z. B. `.bv3.ff .ff-hero__cta`).
Die Ausrichtung ist der Kern dieser Komponente — sie darf nicht
davon abhängen, wie spezifisch das Seiten-Stylesheet formuliert.
Und weil auf einigen Seiten der Button eine Ebene tiefer sitzt
(Spandau, Steglitz, Lübars, Mariendorf: .c-hero__cta-row
zwischen Wrapper und Button), zentriert die Regel darunter auch
die Zwischenebene. */
.rp-cta-wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center;
gap: 12px;
width: 100%;
align-self: stretch;
}
.rp-cta-wrap > * { margin-left: 0; margin-right: 0; }
/* Zwischenebene zwischen Wrapper und Button mitzentrieren. */
.rp-cta-wrap > div {
display: flex;
justify-content: center;
width: 100%;
}
/* `display:block` ist nötig, weil die Subline auf einigen Seiten
ein ist (Startseite, Spandau, Steglitz, Lübars). Inline
ignoriert width und ließe sich nicht mittig setzen. */
.rp-cta-note {
display: block;
width: 100%;
text-align: center;
margin: 0;
}
/* Sehr schmale Geräte: lieber das Icon opfern als umbrechen. */
@media (max-width: 360px) {
.rp-cta__pfeil { display: none; }
.rp-cta { padding: 14px 20px !important; }
}
}
/* AUCH DESKTOP · Hinweis mittig unter dem Button (Übergabe 06.10.2026, A6:
„auf allen Seiten mittig unter dem Button").
Auf elf Seiten stand „Kostenlos & unverbindlich" am Desktop linksbündig
unter oder neben dem Button, teils außerhalb der Button-Gruppe. Dort sitzt
der Hinweis jetzt in der Button-Gruppe, und die Gruppe trägt
`.rp-cta-raster`: ein Raster, dessen erste Spalte genau so breit ist wie
der Button. Der Hinweis steht in Zeile 2 dieser Spalte, also exakt mittig
unter dem Button. Ein Nebenlink („Mehr erfahren") bleibt in Zeile 1 neben
dem Button und damit dort, wo er vorher war. */
@media (min-width: 769px) {
.rp-cta-raster {
display: grid !important;
grid-template-columns: max-content max-content;
justify-content: start;
align-items: center;
row-gap: 14px !important;
}
.rp-cta-raster > .rp-cta { grid-column: 1; grid-row: 1; justify-self: center; }
.rp-cta-raster > .rp-cta-note {
grid-column: 1;
grid-row: 2;
justify-self: center;
text-align: center;
margin: 0 !important;
display: block;
}
}
/* Handy: die Gruppe ist ohnehin eine zentrierte Spalte (s. o.). Der Hinweis
steht direkt unter dem Button, ein sichtbarer Nebenlink danach. Die
Regel für Zwischenebenen (`.rp-cta-wrap > div`) würde die Gruppe sonst
zur Zeile machen, wo sie selbst eine Zwischenebene ist (Spandau). */
@media (max-width: 768px) {
.rp-cta-wrap > .rp-cta-raster,
.rp-cta-raster {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 12px;
width: 100%;
}
.rp-cta-raster > .rp-cta { order: 0; }
.rp-cta-raster > .rp-cta-note { order: 1; margin: 0; }
.rp-cta-raster > :not(.rp-cta):not(.rp-cta-note) { order: 2; }
}
/* Einzige erlaubte Abweichung an der Subline ist ihre Farbe
(Briefing 1.1): hell auf dunklem Grund, dunkel auf hellem.
Die beiden Modifier setzen den Kontrast dort, wo die Erbfarbe
nicht trägt. */
.rp-cta-note--hell { color: rgba(255,255,255,0.86) !important; }
.rp-cta-note--dunkel { color: rgba(26,20,20,0.72) !important; }
/* ============================================================
2 · SCHWEBENDER PROBETRAINING-BUTTON (Briefing 1.2)
============================================================
Fehlerbild: beim Scrollen nach unten — wenn Safari auf dem iPhone
die Browserleiste einklappt — sitzt der Text im Button oben und
unten bleibt eine leere Fläche. Beim Scrollen nach oben ist es
richtig.
Ursache: css/polish.css setzt
.sticky-cta { padding-bottom: max(16px, env(safe-area-inset-bottom)) }
.s-sticky a { padding-bottom: max(20px, env(safe-area-inset-bottom)) }
`env(safe-area-inset-bottom)` ist auf dem iPhone nicht konstant.
Mit eingeblendeter Browserleiste liegt der Wert bei 0, weil die
Leiste die Home-Indicator-Zone schon abdeckt; klappt sie beim
Scrollen ein, springt er auf ~34px. Das Padding steckte in der
BUTTONHÖHE — also wuchs der Button unten um 34px und der Text
rutschte nach oben.
Korrektur: die Sicherheitszone wandert aus dem Padding in den
Abstand zum unteren Rand. Die Buttonhöhe ist damit von der
Adressleiste unabhängig, der Text bleibt mittig — der Button
rückt beim Einklappen lediglich ein Stück hoch, was richtig ist.
Breakpoint 720px, nicht 768px: die Regeln, die hier korrigiert
werden, sitzen in mobile-nav.css und polish.css auf 720px. */
@media (max-width: 720px) {
.sticky-cta,
.s-sticky a {
padding-top: 15px !important;
padding-bottom: 15px !important;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.1;
box-sizing: border-box;
}
.sticky-cta,
.s-sticky {
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
}
@media (max-width: 380px) {
.sticky-cta,
.s-sticky {
bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ============================================================
3 · HERO MOBIL · Grundregeln (Briefing 1.3)
============================================================
Die Hero füllt auf dem Handy genau einen Viewport. `dvh` statt
`vh`: `100vh` ist auf iOS die Höhe MIT eingeklappter Browser-
leiste, die Hero ragte dadurch immer ein Stück über den
sichtbaren Bereich hinaus und der Probetraining-Button lag
unter der Kante.
Impressum, Datenschutz und Danke stehen bewusst nicht in der
Liste — sie gehören nicht zum Umfang des Briefings. */
@supports (height: 100dvh) {
@media (max-width: 768px) {
.b-hero, .s-hero, .c-hero, .w-hero, .k-hero, .kb-hero, .kk-hero,
.tk-hero, .sp-hero, .pt-hero, .mma-hero, .lp-hero, .ktr-hero,
.km-hero, .kf-hero, .ju-hero, .hap-hero, .h-hero, .grap-hero,
.ff-hero, .box-hero, .a-hero, .kar-hero {
min-height: 100dvh;
}
}
}
/* Abstand erste Textzeile → oberer Rand deutlich reduzieren
(Briefing 1.3; ausdrücklich genannt: Wilmersdorf, Mariendorf,
Standortübersicht, Taekwondo, Kung Fu).
Der Abstand entsteht doppelt: einmal an der Hero-Sektion, einmal
am inneren Wrapper. Auf Grappling gemessen 132px + 104px = 236px
über der ersten Zeile, auf Wilmersdorf 114px am Panel. 76px
lassen den eingeblendeten Kopfbereich frei und sonst nichts. */
@media (max-width: 768px) {
/* `box-sizing` muss mit: die Heros rechnen content-box, dann
legt sich das Padding OBEN AUF die `min-height: 100dvh` und die
Hero wird 812 + 76 + 44 = 932px hoch — gemessen auf 14 Seiten,
alle exakt bei 932. Mit border-box füllt sie den Viewport
genau, wie im Briefing verlangt. */
[class$="-hero"],
[class*="-hero "] {
box-sizing: border-box;
padding-top: 76px !important;
padding-bottom: 44px !important;
}
.b-hero__inner, .s-hero__inner, .c-hero__inner, .w-hero__inner,
.k-hero__inner, .kb-hero__text, .tk-hero__inner, .hap-hero__inner,
.ff-hero__inner, .grap-hero__inner, .kf-hero__inner,
.w-hero__panel, .c-hero__panel, .s-hero__panel {
padding-top: 16px !important;
padding-bottom: 24px !important;
/* Wilmersdorf setzt zusätzlich `min-height: 100vh` auf das
Panel. Zusammen mit der Hero darüber ergibt das zwei volle
Viewports übereinander — die Hero maß 972px statt 812. Die
Höhe gehört an die Hero, nicht an ihren Inhalt. */
min-height: 0 !important;
}
}
/* Verdichtung, damit die Hero samt Probetraining-Button auf einen
Blick sichtbar ist. Gemessen bei 375×812: vor dieser Regel lagen
22 von 33 Heros über einem Viewport, auf vier Seiten stand der
Button unterhalb der Kante (Über uns, Wilmersdorf, Kickboxen,
Taekwondo).
Die Überschrift ist dabei der größte Posten — die Seiten-
Stylesheets skalieren sie mit `clamp(…, 5–8vw, …)` bis über 40px.
Auf dem Telefon kostet jede Zeile 44px Höhe. Der gemeinsame
Deckel bringt die vier- bis fünfzeiligen H1 auf drei bis vier
Zeilen, ohne dass die Hierarchie leidet. */
@media (max-width: 768px) {
[class$="-hero"] h1,
[class*="-hero "] h1,
.hero h1 {
font-size: clamp(28px, 7.4vw, 37px) !important;
line-height: 1.06;
letter-spacing: -0.02em;
}
/* Vertrauenszeilen unter dem Button: die tragen mobil bis zu vier
Zeilen Kleinschrift und schieben die Hero auseinander. */
[class*="hero__trust"] {
font-size: 10px;
gap: 6px 16px;
margin-top: 24px;
padding-top: 18px;
}
/* Kicker enger an die Überschrift. */
[class*="hero__kicker"],
[class*="-hero"] .s-kicker,
[class*="-hero"] .b-kicker {
margin-bottom: 14px;
}
}
/* Overlay-Deckkraft mobil zurücknehmen, damit vom Hintergrundbild
etwas übrig bleibt. Wirkt auf die Verlaufs-/Scrim-Ebenen, nicht
auf das Bild selbst. */
@media (max-width: 768px) {
.b-hero__scrim, .kb-hero__scrim, .k-hero__scrim, .s-hero__scrim,
.c-hero__scrim, .hero__scrim {
opacity: 0.72;
}
}
/* ============================================================
4 · AUFKLAPP-MUSTER · „Mehr lesen" (Briefing 1.3 + 1.6)
============================================================
Referenz ist die Karate-Seite. Zwei Bauformen:
a) `.rp-fold` — Überschrift als Schalter, Text darunter.
Für Sektionen mit mehreren Blöcken (Grundlagen, Substanz …).
b) `.rp-mehr` — Fließtext, der nach den ersten Zeilen mit einem
dezenten Textlink „Mehr lesen" weitergeht. Für Hero-Sublines
und einzelne lange Absätze.
SUCHMASCHINEN · Beide Bauformen halten den vollständigen Text im
HTML und machen ihn mobil per Klick erreichbar. Das ist der Fall,
den Google für Mobile-First ausdrücklich voll wertet, weil
Einklappen auf dem Handy UX-Standard ist. Bewusst NICHT gemacht:
Text mobil per `display:none` entfernen (wird gelesen, aber
niedriger gewichtet) oder mobil gar nicht erst ausliefern (zählt
für Google überhaupt nicht).
OHNE JAVASCRIPT ist alles offen und vollständig lesbar. Erst
js/mobil-v4.js setzt `.is-enhanced` und schließt die Panels —
genau wie beim Karate-Vorbild. */
/* ── a) Benannte Ausklappbereiche ─────────────────────────── */
.rp-fold__btn {
display: block;
width: 100%;
text-align: left;
background: none;
border: 0;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
.rp-fold__btn:focus-visible {
outline: 3px solid var(--rp-rot-akzent);
outline-offset: 3px;
border-radius: 4px;
}
/* Vor der JS-Übernahme kein Plus-Zeichen zeigen — es gäbe nichts
zu klappen. */
.rp-folds.is-enhanced .rp-fold__btn {
position: relative;
padding-right: 40px;
}
.rp-folds.is-enhanced .rp-fold__btn::after {
content: "";
position: absolute;
right: 6px;
top: 50%;
width: 15px;
height: 15px;
margin-top: -7px;
background:
linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
opacity: 0.55;
transition: transform 220ms var(--ease-standard), opacity 220ms var(--ease-standard);
}
.rp-folds.is-enhanced .rp-fold__btn[aria-expanded="true"]::after {
transform: rotate(45deg);
opacity: 0.8;
}
.rp-folds.is-enhanced .rp-fold__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 260ms var(--ease-standard);
}
.rp-folds.is-enhanced .rp-fold__panel > * {
overflow: hidden;
min-height: 0;
}
.rp-folds.is-enhanced .rp-fold__panel.is-open {
grid-template-rows: 1fr;
}
/* Eingeklappt heißt: keine Höhe. Sitzt die Panel-Klasse auf einem
Element, das schon eigene Innenabstände mitbringt — auf „Worauf es
ankommt" ist das eine Tabellenzelle —, bleibt sonst deren Padding
als sichtbarer Streifen stehen (gemessen: vier offene Panels statt
null). */
.rp-folds.is-enhanced .rp-fold__panel:not(.is-open) {
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom-width: 0;
}
/* ── b) „Mehr lesen" im Fließtext ─────────────────────────── */
/* Der Schalter existiert nur, solange JS ihn eingehängt hat. */
.rp-mehr__btn { display: none; }
.rp-mehr.is-enhanced .rp-mehr__btn {
display: inline;
background: none;
border: 0;
padding: 0;
margin-left: 0.35em;
font: inherit;
font-size: 0.94em;
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
opacity: 0.78;
cursor: pointer;
}
.rp-mehr.is-enhanced .rp-mehr__btn:hover { opacity: 1; }
.rp-mehr.is-enhanced .rp-mehr__btn:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
border-radius: 3px;
}
/* Der eingeklappte Rest. `display:none` wäre hier falsch: der Text
muss aufklappbar bleiben, sonst wandert er in den Graubereich. */
.rp-mehr.is-enhanced .rp-mehr__rest {
display: none;
}
.rp-mehr.is-enhanced.is-open .rp-mehr__rest {
display: inline;
}
.rp-mehr.is-enhanced.is-open .rp-mehr__btn { display: none; }
/* Block-Variante: wo der eingeklappte Teil aus ganzen Absätzen
besteht (Hapkido, Taekwondo, Judo), nicht aus dem Rest eines
Satzes. `display: inline` wäre dort falsch. */
.rp-mehr.is-enhanced.is-open .rp-mehr__rest--block { display: block; }
.rp-mehr .rp-mehr__rest--block > :first-child { margin-top: 0; }
.rp-mehr.is-enhanced .rp-mehr__btn--block {
display: block;
margin: 10px 0 0;
text-align: left;
}
/* Auf dem Desktop bleibt alles offen — dort ist Platz genug
(Briefing 1.6). JS klappt oberhalb von 768px gar nicht erst ein,
diese Regel ist die Absicherung. */
@media (min-width: 769px) {
.rp-mehr .rp-mehr__rest { display: inline !important; }
.rp-mehr .rp-mehr__btn { display: none !important; }
.rp-folds .rp-fold__panel { display: block !important; }
.rp-folds .rp-fold__panel > * { overflow: visible !important; }
.rp-folds .rp-fold__btn { padding-right: 0; }
.rp-folds .rp-fold__btn::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.rp-folds.is-enhanced .rp-fold__panel,
.rp-folds.is-enhanced .rp-fold__btn::after { transition: none; }
}
/* ============================================================
5 · ZITAT-STAPEL MOBIL EINSCHALTEN (Briefing 1.4)
============================================================
Befund: der Stapel ist mobil nicht kaputt, er ist ABGESCHALTET.
Alle neun Seiten-Stylesheets mit kv3-Stapel enthalten dieselbe
Regel —
@media (max-width: 720px) — auf zwei Seiten 940px
.kv3-stack__wrap { position: static; height: auto; }
— und zwei der Skripte steigen bei derselben Breite zusätzlich
aus. Deshalb stehen die Karten mobil untereinander: genau so war
es gebaut. Das Briefing dreht diese Entscheidung um.
`!important` ist hier nicht Bequemlichkeit: die abschaltenden
Regeln sind mit `.bv3.kbf …` bis zu dreifach klassenspezifisch.
Ein Gegenstück ohne `!important` müsste diese Spezifität auf
jeder Seite einzeln nachbauen — dann läge die Mechanik wieder
neunmal verteilt statt einmal hier.
`100svh` statt `100dvh`: die Karte soll auch dann vollständig im
Bild stehen, wenn die Browserleiste ausgeklappt ist. Bei `dvh`
würde sie beim Einklappen der Leiste nachwachsen und der Stapel
ruckeln.
Ohne JS und bei reduzierter Bewegung bleibt es beim statischen
Untereinander — vollständig lesbar. */
@media (max-width: 768px) {
.kv3-stack {
padding-bottom: 6vh !important;
}
.kv3-stack__wrap {
position: sticky !important;
top: 0 !important;
height: 100svh !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 18px !important;
}
.kv3-card {
transform-origin: 50% 0%;
will-change: transform;
max-height: 84svh;
overflow-y: auto;
}
}
/* ── Standortseiten · vom Slider zum Stapel ───────────────────
Lübars, Mariendorf, Spandau und Steglitz hatten ein Links-Rechts-
Karussell mit Drag, Punkten und Pfeilen. Das Briefing nennt es
unzuverlässig und will überall den Stapel.
Das Markup passte schon: ist die klebende
Ebene, .c-voice__body darin die Karte. Der Slider selbst steigt
mobil im Seitenskript aus, sonst würde er den Track per transform
verschieben und dem Stapel den Boden entziehen.
Der Viewport muss seinen Beschnitt aufgeben: `position: sticky`
wirkt nicht, solange ein Vorfahre den Überlauf abschneidet. */
@media (max-width: 768px) {
.c-voices__viewport {
overflow: visible !important;
}
.c-voices__track {
display: block !important;
transform: none !important;
transition: none !important;
cursor: auto !important;
}
.c-voice.kv3-stack__wrap {
display: flex !important;
width: auto !important;
flex: none !important;
padding: 0 18px !important;
}
.c-voice__body {
width: 100%;
max-height: 84svh;
overflow-y: auto;
transform-origin: 50% 0%;
will-change: transform;
}
/* Punkte und Pfeile gehören zum Slider — der läuft hier nicht mehr. */
.c-voices__nav,
.c-voices__dots { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.c-voices__viewport { overflow: hidden !important; }
.c-voice__body { transform: none !important; filter: none !important; max-height: none; }
.kv3-stack__wrap {
position: static !important;
height: auto !important;
padding: 14px 20px !important;
}
.kv3-card {
transform: none !important;
filter: none !important;
max-height: none;
overflow-y: visible;
}
}
/* Einzelne Zitate mittig ausrichten (Briefing 1.4, letzter Punkt:
Jiu-Jitsu Kids, MMA Kinder, Kickboxen Erwachsene). */
@media (max-width: 768px) {
.rp-zitat--mitte,
.rp-zitat--mitte blockquote,
.rp-zitat--mitte figcaption,
.rp-zitat--mitte p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
/* ============================================================
6 · SPORTART-KACHELN UND SCROLLER (Briefing 1.7)
============================================================ */
@media (max-width: 768px) {
/* Horizontale Scroller: einheitliche Kachelbreite, sauberes
Einrasten, keine halb angeschnittene erste Kachel. Das
`scroll-padding` sorgt dafür, dass die erste Kachel bündig am
linken Rand einrastet statt angeschnitten zu starten. */
.rp-scroller {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 20px;
padding-left: 20px;
padding-right: 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.rp-scroller::-webkit-scrollbar { display: none; }
.rp-scroller > * {
flex: 0 0 auto;
width: min(78vw, 300px);
scroll-snap-align: start;
}
/* Overlay auf den Kachelbildern dezenter (Tegel, Lübars,
Spandau waren zu dunkel). */
.rp-kachel__overlay,
.rp-kachel::before {
opacity: 0.55;
}
}
/* ============================================================
7 · MOBIL AUSGEBLENDETE DEKORATION
============================================================
`.rp-nur-desktop` ist ausschließlich für Dekoration gedacht —
Hintergrund-Schriftzeichen, Zierbilder, Puls-Animationen. Für
Text gilt Abschnitt 4: aufklappen statt ausblenden. */
@media (max-width: 768px) {
.rp-nur-desktop { display: none !important; }
}
/* ============================================================
8 · SEITENSPEZIFISCHE NACHJUSTIERUNG
============================================================
Nur was sich nicht sinnvoll global regeln lässt. Jede Regel
nennt den Punkt aus dem Briefing, auf den sie zurückgeht. */
/* Frühförderung · der Pfeil rutschte in die zweite Zeile, und die
Subline stand hell auf hellem Grund (Teil 2, Frühförderung). */
@media (max-width: 768px) {
body.ff .rp-cta__pfeil { display: none; }
}
/* Tegel · Sektion „Sportarten am Standort": die Meta-Zeile ist eine
Flex-Reihe mit „·" als Trenner. Bricht sie mobil um, landet der
zweite Eintrag („Taekwondo schon ab den Minis") hinter einem
Trennzeichen und wirkt eingerückt (Teil 2, Tegel). Mobil
untereinander, Trenner weg. */
@media (max-width: 768px) {
.s-sports__metaline {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
text-align: left;
}
.s-sports__metaline > i { display: none; }
.s-sports__metaline > span { display: block; text-indent: 0; padding-left: 0; }
}
/* Sportart-Kacheln · Overlay dezenter (Briefing 1.7, genannt sind
Tegel, Lübars, Spandau). Der Verlauf deckt unten mit 95 % ab —
auf dem Handy, wo die Kachel kleiner ist, bleibt vom Bild kaum
etwas übrig. Mobil auf zwei Drittel zurückgenommen; die Schrift
im Kachelfuß steht weiterhin auf abgedunkeltem Grund. */
@media (max-width: 768px) {
.v3 .tg-tile--big::after {
background: linear-gradient(to top,
rgba(20,8,11,0.86) 0px, rgba(20,8,11,0.70) 90px, rgba(20,8,11,0.44) 150px,
rgba(20,8,11,0.14) 240px, rgba(20,8,11,0.02) 100%);
}
.c-sports__tile::after,
.c-tile::after,
.s-sport-tile::after {
opacity: 0.72;
}
}
/* Einzelne Zitate mittig (Briefing 1.4, letzter Punkt). Betrifft
Jiu-Jitsu Kids (.s-quote), MMA Kinder (.kk-voice) und Kickboxen
Erwachsene (.kb-quote) — dort steht jeweils nur ein Zitat, kein
Stapel. */
@media (max-width: 768px) {
.s-quote__inner,
.kk-voice,
.kb-quote__inner,
.kb-quote__text {
text-align: center;
align-items: center;
justify-items: center;
}
.s-quote__inner blockquote, .s-quote__inner p,
.kk-voice__q, .kk-voice p,
.kb-quote__text blockquote, .kb-quote__text p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.s-quote__mark, .kb-quote__mark { display: block; text-align: center; }
}
/* Karate · „Was du mitnimmst": die beiden Bilder (Kihon und
kontrolliertes Kumite) landen mobil beide unter dem letzten Punkt
(Teil 2, Karate). Grund ist die Reihenfolge im Dokument — der
Bildblock steht als Ganzes hinter der Timeline, und sobald die
Timeline einspaltig wird, hängen beide Bilder hinten dran.
`display: contents` löst die drei Zwischenebenen auf, sodass
Phasen und Bilder Geschwister in einer Spalte werden. Danach
sortiert `order` sie so, wie sie inhaltlich zusammengehören:
Kihon-Bild hinter die Kihon-Phase, Kumite-Bild hinter Kumite.
Greift nur mobil — am Computer bleibt das Diptychon, wie es ist. */
@media (max-width: 768px) {
.kar-learn .b-wrap { display: flex; flex-direction: column; }
.kar-learn .kar-path,
.kar-learn .kar-phases,
.kar-learn .kar-duo { display: contents; }
.kar-learn .kar-learn__head { order: 1; }
.kar-learn .kar-gains { order: 2; }
.kar-learn .kar-learn__flow { order: 3; }
.kar-learn .kar-path__intro { order: 4; }
.kar-learn .kar-phase:nth-child(1) { order: 5; } /* Aufwärmen */
.kar-learn .kar-phase:nth-child(2) { order: 6; } /* Kihon */
.kar-learn .kar-duo figure:nth-child(1) { order: 7; }
.kar-learn .kar-phase:nth-child(3) { order: 8; } /* Kata */
.kar-learn .kar-phase:nth-child(4) { order: 9; } /* Kumite */
.kar-learn .kar-duo figure:nth-child(2) { order: 10; }
.kar-learn .kar-duo figure {
aspect-ratio: 4 / 3;
margin: 4px 0 28px;
}
/* Die Pfadlinie verbindet nichts mehr, wenn Bilder dazwischen
stehen. */
.kar-learn .kar-phase__line { display: none; }
}
/* Sportarten-Übersicht · scrollbare Kacheln (Teil 2). Gemeldet:
unterschiedliche Größen, und beim Scrollen sitzt die erste Kachel
linksbündig, während rechts nur ein Rest angeschnitten ist.
Beides steckt in denselben zwei Werten: die Feature-Kachel war
88 % breit, die übrigen 79 %, und ohne `scroll-padding` rastet
die erste Kachel nicht am Innenrand ein. */
@media (max-width: 768px) {
.bento:not(.bento--duo) {
scroll-padding-left: 24px;
}
.bento:not(.bento--duo) > .btile,
.bento:not(.bento--duo) > .btile--feature {
flex: 0 0 82%;
min-height: 380px;
}
/* Kacheltexte in Selbstverteidigung und Fitness kürzen — über die
Zeilenzahl, der Text bleibt im HTML. */
.btile__sub {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Warum Randori-Pro · „Sechs Gründe, warum Menschen bei uns bleiben"
als horizontaler Scroller mit gleich großen Kacheln, damit man sie
Stück für Stück durchlesen kann (Teil 2, Warum Randori-Pro). */
@media (max-width: 768px) {
#gruende .w-bento {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
/* 18px, nicht 20: so viel Innenabstand hat .b-wrap bei dieser
Breite. Zwei Pixel mehr, und die Reihe ragt heraus. */
scroll-padding-left: 18px;
margin-left: -18px;
margin-right: -18px;
padding: 4px 18px 14px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
#gruende .w-bento::-webkit-scrollbar { display: none; }
#gruende .w-bento > * {
flex: 0 0 82%;
scroll-snap-align: start;
min-height: 0;
}
}
/* Lübars · 2–3 große Kacheln plus Rest klein, Referenz Wilmersdorf
(Teil 2, Lübars). Vorhanden war eine große Kachel plus lauter
gleich kleine. Die beiden Kernsportarten des Standorts rücken
mobil eine Stufe hoch. */
@media (max-width: 768px) {
body.s-page .c-tilegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.s-page .c-tilegrid > .c-tile:nth-child(1),
body.s-page .c-tilegrid > .c-tile:nth-child(2) {
grid-column: 1 / -1;
padding-top: 22px;
padding-bottom: 22px;
}
body.s-page .c-tilegrid > .c-tile:nth-child(1) .c-tile__name,
body.s-page .c-tilegrid > .c-tile:nth-child(2) .c-tile__name {
font-size: 19px;
}
}
/* Sehr schmale Handys (unter 360px): zwei Spalten ließen jeder Kachel
rund 80px für Text — der Pfeil lag über dem Namen, Altersangaben
liefen aus der Kachel (gemessen 07.10.2026 bei 320px). Dort eine
Spalte, alle Kacheln gleich breit. */
@media (max-width: 359px) {
body.s-page .c-tilegrid { grid-template-columns: 1fr; }
}
/* Steglitz baut seine drei Kacheln quer (Foto links, Text rechts) und
stellt sie in css/steglitz.css untereinander. Die Zwei-Spalten-Regel
oben griff trotzdem und quetschte die dritte Kachel (Kickbox-Fitness)
auf halbe Breite — Name und Altersangabe waren abgeschnitten. */
@media (max-width: 768px) {
body.s-page .c-tilegrid--steglitz { grid-template-columns: 1fr; }
}
/* Spandau · Sportart-Kacheln mobil kleiner, analog Wilmersdorf
(Teil 2, Spandau). */
@media (max-width: 768px) {
/* Kein `aspect-ratio` hier: zusammen mit der Mindesthöhe der Kachel
rechnet der Browser die BREITE aus der Höhe zurück — gemessen 560px
statt 351. Derselbe Fehler wie beim Kung-Fu-Foto-Band. Kleiner wird
die Kachel über Innenabstand und Schriftgrad. */
.c-sports__grid--spandau .c-feature__body { padding: 18px 18px 20px; }
.c-sports__grid--spandau .c-feature__name { font-size: 19px; }
.c-sports__grid--spandau .c-feature__sub { font-size: 13px; }
.c-sports__grid--spandau .c-tilegrid > .c-tile {
padding-top: 14px;
padding-bottom: 14px;
}
.c-sports__grid--spandau .c-tile__name { font-size: 15px; }
.c-sports__grid--spandau .c-tile__sub { font-size: 12.5px; }
}
/* Spandau · „Momente": der Aufbau-Effekt ruckelte mobil (Teil 2,
Spandau — laut Teil 4 reparieren, nicht abschalten).
Ursache ist eine Einheiten-Verwechslung: die Bühne ist `300vh`
hoch, die klebende Ebene darin `100svh`. Auf dem iPhone sind das
zwei verschiedene Höhen — `vh` rechnet mit eingeklappter
Browserleiste, `svh` mit ausgeklappter. Das Skript rechnet den
Fortschritt aus `Bühnenhöhe minus window.innerHeight`, und
innerHeight wechselt beim Ein- und Ausklappen der Leiste. Damit
springt der Fortschritt genau dann, wenn man scrollt.
Beide auf dieselbe Einheit gestellt, und die Bühne etwas kürzer:
260svh statt 300vh sind mobil ein sinnvollerer Weg. */
@media (max-width: 768px) {
.s-gal__stage { height: 260svh; }
.s-gal__sticky { height: 100svh; }
}
/* Spandau · das Jiu-Jitsu-Bild wird oben abgeschnitten, beide
Trainingspartner sollen im Gesicht erkennbar bleiben
(Teil 2, Spandau). Ausschnitt nach oben. */
.c-sports__grid--spandau img[src*="budokai-waffenabwehr"],
img[src*="budokai-waffenabwehr"] { object-position: center 22%; }
/* Kickboxen Kinder · „Die ersten Wochen und Monate": die
Verbindungslinie zwischen den Punkten 1–2–3–4 war unterbrochen
(Teil 2, Kickboxen Kinder).
Gemessen: die Liniensegmente sind exakt 0px hoch, die Lücke zum
nächsten Punkt beträgt 236 bis 275px. Ursache ist
`height: calc(100% + …)` auf einem Element, dessen Elternteil
keine feste Höhe hat — ein Prozentwert gegen eine unbestimmte
Höhe ist selbst unbestimmt, der ganze calc-Ausdruck fällt auf
`auto` zurück und der leere Streifen bleibt bei null.
Statt einer Höhe spannt die Linie jetzt zwischen `top` und
`bottom` der Stufe selbst — die hat eine echte Höhe, und ihr
unterer Rand liegt genau dort, wo der nächste Punkt beginnt. */
@media (max-width: 768px) {
.kk-stair__seg { display: none; }
.kk-stair:not(:last-child)::after {
content: "";
position: absolute;
left: 22px; /* Mitte der 44px-Spalte */
top: 44px; /* Unterkante des Punkts */
/* Etwas unter die Stufenkante hinaus: zwischen zwei Stufen liegen
gemessen 13px, die sonst als Lücke stehen blieben. Der Überstand
verschwindet hinter dem nächsten Punkt, der deckend ist. */
bottom: -16px;
width: 3px;
margin-left: -1.5px;
border-radius: 3px;
background: var(--rp-rot-akzent);
}
}
/* Spandau · „Spandau in Zahlen": der Inhalt saß zu weit links
(Teil 2, Spandau). Mobil mittig. */
@media (max-width: 768px) {
.c-stat__head { max-width: none; text-align: center; }
.c-stat__h { max-width: none; margin-left: auto; margin-right: auto; }
.c-stat__head .s-kicker { justify-content: center; }
.c-stat__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
.c-stat__cell { text-align: center; }
}
/* Waltersdorf · „Sportarten am Standort": in den oberen Kacheln
steht zu viel Text auf dem Bild (Teil 2, Waltersdorf, genannt sind
Krav Maga, Hapkido, Frühförderung und Jiu-Jitsu).
Gekürzt wird über die Zeilenzahl, nicht über das Löschen von Text
— der volle Satz bleibt im HTML. */
@media (max-width: 768px) {
.wal-tile__sub {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Startseite · das große runde Bildfenster sitzt direkt unter der
Kachel „Wettkampf und Leistung" und wirkt dort mobil deplatziert
(Teil 2, Startseite). Desktop unverändert. */
@media (max-width: 768px) {
.b-moment { display: none; }
}
/* Boxen · „So läuft eine typische Einheit ab": die vier Punkte sind
eine Flex-Reihe mit `min-width: 130px`. Auf 375px passen zwei
nebeneinander, der Rest bricht um — es sieht aus wie eine Tabelle,
die verrutscht (Teil 2, Boxen). Mobil untereinander. */
@media (max-width: 768px) {
.box-flow__row {
flex-direction: column;
gap: 18px;
}
.box-flow__step {
min-width: 0;
padding-bottom: 16px;
border-bottom: 1px solid rgba(74, 58, 40, 0.12);
}
.box-flow__step:last-child { padding-bottom: 0; border-bottom: 0; }
}
/* Tegel · „So läuft dein erstes Training": der rote Farbfleck ist ein
640px großer Verlaufskreis in der Ecke. Auf dem Handy nimmt er die
halbe Sektion ein (Teil 2, Tegel). Ohne „auch Desktop"-Markierung
im Briefing greift die Regel nur mobil. */
@media (max-width: 768px) {
body.s-page .v3 .hy-steps::before,
.v3 .hy-steps:not(.s-steps--steglitz)::before { display: none; }
}
/* Kickbox-Fitness · Pulsanimation im Kennzahlen-Bereich entfernen
(Teil 2, Kickbox-Fitness: „ist hier zu viel"). */
.bv3.kbf.js-motion .kbf-energy.is-lit .kbf-kcal__dot {
animation: none !important;
}
/* Grappling · der Button im Kinder-Abschnitt einzeilig, und die
Subline unter dem Button im Abschnitt „Substanz" mittig
(Teil 2, Grappling). */
@media (max-width: 768px) {
.grap-kids__cta,
.grap-diff__cta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.grap-kids__cta .b-btn,
.grap-diff__cta .b-btn {
white-space: nowrap;
font-size: clamp(13px, 3.5vw, 15px);
padding: 15px 24px;
}
.grap-kids__cta-note,
.grap-diff__cta-note {
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
/* Fitness · Sektion „Finde dein Format" (Teil 2, Fitness).
Die Auswahlknöpfe sollen flacher werden — nicht schmaler —, damit
der Text darunter beim Auswählen gleich mitlesbar ist. */
@media (max-width: 768px) {
.bv3.fh .fh-goal {
padding-top: 11px;
padding-bottom: 11px;
min-height: 0;
}
/* „Zu diesem Format" ist zu dominant und beißt sich mit dem
schwebenden Probetraining-Button. Heller Rahmen statt Rotfläche,
Text zentriert. */
.bv3.fh .fh-result__link {
align-self: center;
justify-content: center;
background: transparent;
color: var(--kb-rot-akzent, var(--rp-rot-akzent));
border: 1px solid currentColor;
padding: 11px 20px;
font-size: 13px;
}
.bv3.fh .fh-result__link:hover {
background: rgba(220, 13, 29, 0.08);
transform: none;
}
/* Box „Fitness — eigenes Programm": der Button lief nach rechts aus
der Box heraus. */
.bv3.fh .fh-kbf__cta {
display: inline-block;
max-width: 100%;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
}
}
/* Tegel · Trainerbereich (Teil 2, Tegel). Vorher hatte jeder der acht
Trainer eine eigene Bildkachel, sieben davon leer. Jetzt ein Foto
plus Namensliste. Die Liste gilt auf beiden Breiten — sie ersetzt
Kacheln, die auch am Computer leer standen. */
.s-trainers__grid--eins {
grid-template-columns: minmax(0, 280px) !important;
}
.s-trainers__liste {
list-style: none;
margin: clamp(28px, 4vw, 40px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 2px;
}
.s-trainers__liste li {
padding: 13px 0;
border-top: 1px solid rgba(255, 255, 255, 0.13);
display: flex;
flex-direction: column;
gap: 3px;
}
.s-trainers__liste strong {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.005em;
}
.s-trainers__liste span {
font-size: 13.5px;
line-height: 1.4;
opacity: 0.7;
}
@media (max-width: 768px) {
.s-trainers__grid--eins { grid-template-columns: minmax(0, 1fr) !important; }
.s-trainers__liste { grid-template-columns: 1fr; margin-top: 26px; }
}
/* FAQ · der rote Pfeil am Hero-Scroller verschwand hinter dem
Verlauf (Teil 2, FAQ-Seite: „Z-Index und Innenabstand
korrigieren"). Der Verlauf ist ein ::after des Wrappers und damit
das letzte Kind — er malt über den Pfeil, weil beide ohne z-index
positioniert sind. Dazu mehr Innenabstand rechts, damit die letzte
Kachel nicht unter dem Pfeil klebt. */
@media (max-width: 900px) {
.jump-wrap::after { z-index: 1; }
.jump__hint { z-index: 2; right: 8px; }
.jump { padding-right: 64px; }
}
/* FAQ · das Lamellen-Bild besteht aus neun Streifen, die per Scroll
hochfahren. Mobil bleibt davon ein Bild mit Streifen übrig
(Teil 2, FAQ-Seite). Statt der neun Segmente ein ruhiges,
durchgehendes Bild — dieselbe Datei, nur ungeteilt. */
@media (max-width: 768px) {
.v3 .fq-slab__frame {
display: block;
gap: 0;
background: url("../assets/fotos/sportarten-mich-verteidigen-koennen-m.webp") center / cover no-repeat;
}
.v3 .fq-slab__frame span { display: none; }
}
/* Jiu-Jitsu Kids · das Hero-Video mobil rechtsbündiger ausrichten,
damit das Geschehen im Bild bleibt (Teil 4, getroffene
Entscheidung: bleibt Video, nur der Ausschnitt wandert). */
@media (max-width: 768px) {
.k-hero__bg { object-position: 72% center; }
}
/* Personal Training · „Das Prinzip": die fünf Elemente sitzen schon
auf einem gleichmäßigen Fünfeck (0°, 72°, 144°, 216°, 288°). Das
Problem ist mobil die Breite — die Beschriftungen der äußeren
Punkte ragten links und rechts über den Kreis hinaus (gemessen
−34px und 386px). Der Kreis rückt enger, damit die Namen Platz
haben und das Fünfeck symmetrisch bleibt.
Nachtrag 07.10.2026: Mit 72 % Breite wurde der Kreis auf dem Handy
so klein (196–264px), dass die Namen das Zentrum und einander
überdeckten. Volle Spaltenbreite, die seitlichen Namen rücken nur
so weit nach innen, wie der Rand es verlangt (personal-training.css). */
@media (max-width: 768px) {
.pt-orbit { width: min(100%, 480px); margin-left: auto; margin-right: auto; }
.pt-sat__name { font-size: 11px; padding: 4px 9px; white-space: nowrap; }
.pt-sat__dot { transform: scale(0.85); }
}
/* FAQ · die Sprechblase ragte links und rechts aus dem Bildschirm
(Teil 2, FAQ-Seite). */
@media (max-width: 768px) {
.fq-slab__cap {
max-width: calc(100vw - 40px);
left: 50%;
right: auto;
transform: translateX(-50%);
white-space: normal;
text-align: center;
box-sizing: border-box;
}
}
/* Nachtrag 07.10.2026: Die Regel oben verlor gegen „.v3 .fq-slab__cap"
(nowrap) — die Bildunterschrift lief rechts aus dem Bild. Nur Umbruch
und Breite nachziehen; Lage und Verschiebung regelt faq-v3.css. */
@media (max-width: 768px) {
.v3 .fq-slab__cap { white-space: normal; text-align: center; max-width: calc(100vw - 40px); box-sizing: border-box; }
}
/* Über uns · „Warum Randori-Pro — der ganze Unterschied" lief rechts
aus dem Bild (Teil 2, Über uns, Sektion „Unsere Geschichte").
Gemessen bei 375px: 438px breit, also 63px über die Kante.
Ursache ist `white-space: nowrap` auf .a-link — sinnvoll für die
kurzen Links („Mehr erfahren"), nicht für diesen langen Satz. */
@media (max-width: 768px) {
.a-link {
white-space: normal;
max-width: 100%;
}
.a-hero__cta-row .a-link { white-space: nowrap; } /* der bleibt kurz */
}
/* Über uns · „Der Weg zum Schwarzgurt" soll mobil umbrechen, damit
die Überschrift nicht von Rand zu Rand läuft (Teil 2, Über uns). */
@media (max-width: 768px) {
.a-xbelt .a-h2 { text-wrap: balance; max-width: 12ch; }
}
/* ── Standortübersicht · Karte und Punkte ─────────────────────
(Teil 2, Standortübersicht)
Zwei Meldungen, eine Ursache. css/standorte.css zwingt der Karte
unterhalb 900px `aspect-ratio: 3/4` auf, das Kartenbild ist aber
1920×1122, also 1,71:1. Bei `object-fit: cover` bleibt vom Bild
nur der mittlere Streifen stehen — deshalb wirkt Berlin gestaucht.
Und die sieben Pins sitzen in Prozent des CONTAINERS. Solange
Container und Bild dasselbe Verhältnis haben, treffen sie; sobald
der Container beschnitten wird, wandern sie. Genau das ist die
zweite Meldung.
Das native Verhältnis erzwingen behebt beides in einem Zug: kein
Beschnitt, und die Prozentwerte stimmen wieder — ohne dass eine
einzige Koordinate angefasst werden muss. */
@media (max-width: 900px) {
.h-map {
aspect-ratio: 1920 / 1122;
}
.h-map__img {
object-fit: contain;
object-position: center center;
}
}
/* Punkte mobil kleiner, damit sie sich nicht überlagern. Der
Puls-Ring ist dabei der eigentliche Platzfresser: er läuft bis
16px über den Punkt hinaus, bei sieben Punkten auf 375px Breite
überlappen sich vor allem Steglitz, Wilmersdorf und Mariendorf.
Mobil bleibt der Punkt, der Ring geht. */
@media (max-width: 768px) {
.h-map .s-pin {
width: 15px; height: 15px; border-width: 2px;
animation: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.h-map .s-pin::before { width: 30px; height: 30px; } /* Trefferfläche */
.h-map .s-pin__tip {
font-size: 9px; padding: 3px 7px; letter-spacing: 0.02em;
top: calc(100% + 6px);
}
.h-map .s-pin--n .s-pin__tip { bottom: calc(100% + 6px); }
/* Das Label lag mitten in den Punkten. Es wiederholt ohnehin nur,
was die Überschrift darüber schon sagt — mobil an den unteren
Rand, wo die Karte frei ist. */
.h-map__label {
top: auto;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
letter-spacing: 0.14em;
white-space: nowrap;
}
}
/* Zahlenleiste unter der Hero: vollständig lesbar halten, nichts
ausblenden (Teil 4, getroffene Entscheidung). Zwei Spalten sind
auf 375px zu eng für „Standorte in Berlin & Brandenburg" — mobil
untereinander, dafür kompakter gesetzt. */
@media (max-width: 560px) {
.h-hero__stats {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 40px;
padding-top: 28px;
}
.h-stat-inline {
flex-direction: row;
align-items: baseline;
gap: 14px;
}
.h-stat-inline__n { font-size: 34px; flex: 0 0 auto; }
.h-stat-inline__l { font-size: 10px; letter-spacing: 0.12em; }
}
/* Kung Fu · das Foto-Band war mobil 735px breit statt 375
(gemessen). `aspect-ratio: 21/8` zusammen mit `min-height: 280px`
rechnet die Breite aus der Mindesthöhe zurück, sobald das Seiten-
verhältnis die Höhe nicht mehr hergibt. Auf dem Handy ist ein
21:8-Band ohnehin ein Schlitz — hier ein ruhigeres Verhältnis
ohne Mindesthöhe. */
@media (max-width: 768px) {
.kf-photo {
aspect-ratio: 4 / 3;
min-height: 0;
width: 100%;
max-width: 100%;
}
}
/* Startseite · Stimmen als Stapel statt Wisch-Karussell (Briefing 1.4).
Das Karussell zog sich außerdem mit `margin: 0 -24px` bis an den
Bildschirmrand, während der umgebende .b-wrap nur 18px Innenabstand
hat — 6px je Seite wurden abgeschnitten. Beides erledigt sich mit
dem Stapel, weil die Reihe mobil wieder ein normaler Block wird. */
@media (max-width: 768px) {
.b-voices__row {
display: block !important;
overflow: visible !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.b-voices__row > .kv3-stack__wrap { padding: 0 4px !important; }
.b-voice {
width: 100%;
max-height: 84svh;
overflow-y: auto;
transform-origin: 50% 0%;
will-change: transform;
flex: none !important;
}
}
/* Auf dem Desktop verschwindet die Zwischenebene, damit das
Drei-Spalten-Raster genau wie vorher greift. */
@media (min-width: 769px) {
.b-voices__row > .kv3-stack__wrap { display: contents; }
}
/* Probetraining-Seite · Cloudflare-Bestätigung ragt rechts heraus
(Teil 2, Probetraining — „Hohe Priorität").
Rechnung zum Fehlerbild: das Turnstile-Widget ist in der
Normalgröße feste 300px breit. Auf der Karte blieben mobil
375px Viewport − 2×16px Sektion − 2×22px Karte = 299px
also ein Pixel zu wenig, auf 360px-Geräten 16px zu wenig. Genau
das schaut rechts heraus.
Das Widget selbst sitzt im Formular-Iframe von
wpforms.randori-pro.de und ist von hier aus nicht erreichbar —
fremde Herkunft, kein CSS-Durchgriff. Was hier geht: dem Iframe
den Platz verschaffen. Der Einbettungs-Block nimmt das
Kartenpadding zurück und läuft über die volle Kartenbreite; auf
sehr schmalen Geräten wird zusätzlich die Sektion schmaler
gefasst. Damit stehen ab 360px 328px zur Verfügung, ab 320px
genau 300px.
`overflow-x: auto` ist die Rückfallebene, falls das Formular
später doch etwas Breiteres einsetzt: dann lässt es sich
schieben. `hidden` wäre hier falsch — es würde die Bestätigung
abschneiden und das Formular unabschickbar machen.
Die saubere Lösung bleibt die Compact- oder Flexible-Variante
des Widgets; die gehört ins Repo Randori-Pro/wordpress-forms. */
@media (max-width: 600px) {
.lp-embed {
margin-left: -22px;
margin-right: -22px;
width: auto;
max-width: none;
overflow-x: auto;
}
.lp-embed > iframe {
max-width: 100%;
}
}
@media (max-width: 360px) {
.lp-formsec { padding-left: 10px; padding-right: 10px; }
.lp-card { padding-left: 16px; padding-right: 16px; }
.lp-embed { margin-left: -16px; margin-right: -16px; }
}
/* Personal Training · Sonderfall aus Briefing 1.1. Der Button ist
mobil zu dominant. Das lange Label „Unverbindliches Erstgespräch
vereinbaren" passt auf keinem Telefon einzeilig — deshalb greift
hier dasselbe Zwei-Label-Prinzip wie überall, nur mit „Erstgespräch"
als Kurzform. Dazu eine Stufe kleiner und als Umriss statt als
gefüllte Fläche: die Seite verkauft ein Gespräch, kein
Probetraining, das darf ruhiger auftreten. */
@media (max-width: 768px) {
body.pt .rp-cta {
font-size: 13px !important;
padding: 13px 22px !important;
background: transparent !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.55) !important;
box-shadow: none !important;
}
body.pt .rp-cta:hover,
body.pt .rp-cta:focus-visible {
background: rgba(255,255,255,0.10) !important;
border-color: #fff !important;
}
}
/* Sicherheitsnetz große Buttons auf schmalen Handys (07.10.2026).
Gemessen bei 320–390px: Buttons mit festem einzeiligem Text wurden
in ihrer Kachel abgeschnitten (Pfeil oder halbes Wort weg) oder
ragten über den Rand (Schlussaufruf der Standortseiten, Judo, FAQ,
Stimmen-Karten Waltersdorf/Wilmersdorf, Krav Maga, KTR). Hier dürfen
sie umbrechen statt abzuschneiden und bleiben in ihrer Spalte.
Die einzeiligen Hauptbuttons (.rp-cta, Briefing 1.1) sind ausgenommen —
sie haben mobil ihr kurzes Label. */
@media (max-width: 480px) {
.b-btn:not(.rp-cta), .s-btn:not(.rp-cta), .btn:not(.rp-cta) {
box-sizing: border-box; max-width: 100%;
white-space: normal; text-wrap: balance; /* bricht nur um, wenn es nicht passt */
}
.b-btn--big:not(.rp-cta), .s-btn--big:not(.rp-cta), .btn--big:not(.rp-cta),
.kv3-card .s-btn:not(.rp-cta), .ktr-loc__cta .b-btn:not(.rp-cta),
.grap-kids__cta .b-btn:not(.rp-cta), .grap-diff__cta .b-btn:not(.rp-cta) {
white-space: normal; text-wrap: balance; text-align: center; justify-content: center;
letter-spacing: 0.06em; padding-left: 24px; padding-right: 24px;
}
}
/* Kleine Abschnitts-Labels (Großbuchstaben, Schreibmaschinenschrift,
z. B. „HÄUFIGE FRAGEN", „LÜBARS IN ZAHLEN") auf allen Seiten etwas
größer und fetter — Übergabe 07.10.2026, G1. Vorher überall 12px/400.
!important, weil die Seiten-Stylesheets die Labels mit höherer
Spezifität setzen; Farbe, Abstand und Linie bleiben wie sie sind. */
.b-kicker, .s-kicker, .a-kicker, .kicker, .kr-kicker, .eyebrow, .lp-kicker,
.hy-kicker, .dk-kicker, .rp-eyebrow, .az-kicker, .rp-ausb__kicker {
font-size: 13px !important;
font-weight: 500 !important;
}
/* Hero: Probetraining-Button und „Kostenlos & unverbindlich" auf allen
Seiten im gleichen Design — Übergabe 07.10.2026, G2 (ergänzt A6).
Gemessen vorher: Höhe 71–77px am Desktop, 45–53px mobil, Zeichenabstand
0,9–1,5px, mobil mal 190px, mal volle Breite; zwei Rottöne. Der Hinweis
stand mal in Schreibmaschinenschrift in Großbuchstaben (11–12px), mal
in der Fließtextschrift (16–17px). Jetzt überall gleich; nur die Farbe
des Hinweises richtet sich weiter nach dem Hintergrund (hell/dunkel).
Ausnahme bleibt Personal Training (Umriss-Button, s. o., Briefing 1.1). */
.rp-cta {
background-color: var(--rp-rot-akzent, #DC0D1D) !important;
color: #fff !important;
border-radius: 999px !important;
font-family: var(--font-display) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
}
.rp-cta:hover, .rp-cta:focus-visible { background-color: #c40b1a !important; }
@media (min-width: 769px) {
.rp-cta { font-size: 15px !important; letter-spacing: 0.1em !important; padding: 26px 52px !important; }
}
@media (max-width: 768px) {
.rp-cta { width: auto !important; flex: 0 0 auto !important; align-self: center !important; letter-spacing: 0.04em !important; }
}
.rp-cta-note {
font-family: var(--font-mono) !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
line-height: 1.4 !important;
}
.rp-cta-note::before { display: none !important; } /* Mariendorf setzte einen Punkt davor */