/* ============================================================
   RANDORI-PRO · MMA (High End)
   Sportartenseite · Template B „Ergebnis-Fokus" + Stimmung 3
   „Dunkel & Intensiv". Additiv zu tokens.css; teilt die
   bv3-Mechaniken (Progress, Glas-Header, [data-rv]-Reveals,
   Button-Glanz) mit bold-v3.css.

   Layout-Kanon (verbindlich):
   · Standard-Karten-Radius (16–24px), KEINE asymmetrischen Radien.
   · Hero-Bild = rechteckiges Bild-Card mit Standard-Radius.
   · Farbrhythmus: 6 DUNKLE Sektionen, 3 HELLE Relief-Inseln.
   · Akzentrot nur für CTAs/Links/Highlights, nie als Fläche.
   · GENAU EIN Signatur-Element: die Die drei Distanzen (§3).
   Aktiv ausschließlich unter body.bv3.mma.
   ============================================================ */

:root {
  --mma-dark:       #1A1414;  /* Tiefschwarz */
  --mma-rot-anker:  #6D1723;  /* Dunkelrot-Anker */
  --mma-rot-akzent: #DC0D1D;  /* Akzentrot */
  --mma-beige:      #faf6ee;  /* Relief hell, warm */
  --mma-grey:       #f3f3f3;  /* Relief hell, neutral (FAQ) */
  --mma-ink:        #1A1414;
  --mma-body:       #575E62;
  --mma-ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Page-Grundlage ────────────────────────────────────────── */
body.bv3.mma { background: var(--mma-dark); color: var(--mma-body); font-family: var(--font-body); margin: 0; -webkit-font-smoothing: antialiased; }
.mma a { color: inherit; text-decoration: none; }
.mma img { max-width: 100%; display: block; }

.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; } }

/* ── Randabstand · Angleichung an die Jiu-Jitsu-Budokai-Seite ──
   Die JJB-Seite lädt css/site.css mit einer globalen Regel
   `* { box-sizing: border-box }`. Diese Seite lädt site.css NICHT,
   deshalb rechnet ihr identisch deklarierter .b-wrap als content-box:
   1480px Inhalt PLUS 2×40px Innenabstand = 1560px Außenbreite. Der
   Text startet dadurch ab 1560px Fensterbreite 40px weiter links als
   auf der JJB-Seite (1920px: 220px statt 260px). Die Umstellung auf
   border-box gleicht das exakt an — seitenlokal, ohne site.css zu
   verlinken. Die globale Kopf-/Fußzeile (mobile-nav.js) wird
   mitgezogen, sonst stünde das Logo nicht mehr über dem Text.
   Unter 1560px Fensterbreite ändert sich nichts (Rand bleibt 40px
   bzw. 24px mobil). */
body.bv3.mma :is(.b-wrap, .rp-gnav__inner, .rp-gfoot__inner) { box-sizing: border-box; }

/* ── Kicker ────────────────────────────────────────────────── */
.b-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mma-rot-akzent); margin: 0 0 28px; display: flex; align-items: center; gap: 16px; }
.b-kicker::before { content:""; width: 40px; height: 1px; background: var(--mma-rot-akzent); flex-shrink: 0; }
.b-kicker--beige { color: var(--rp-beige); }
.b-kicker--beige::before { background: var(--rp-beige); }
.b-kicker--anker { color: var(--mma-rot-anker); }
.b-kicker--anker::before { background: var(--mma-rot-anker); }
.b-kicker--center { justify-content: center; }

/* ── Buttons ───────────────────────────────────────────────── */
.b-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--mma-rot-akzent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; padding: 22px 40px; border-radius: 999px; transition: background 200ms, transform 200ms, box-shadow 300ms; white-space: nowrap; }
.b-btn:hover { background: #c40b1a; transform: translateY(-2px); }
.b-btn--big { padding: 26px 52px; font-size: 15px; }

/* Schmale Phones: Haupt-CTAs voll­breit statt Pfeil-Umbruch
   (Gegenstück zu css/hapkido.css, damit der größere JJB-Button
   auf dem Handy nicht aus dem Container läuft). */
@media (max-width: 480px){
  .b-btn--big { width: 100%; justify-content: center; text-align: center; padding: 20px 24px; font-size: 13px; }
  /* white-space: nowrap der Basisregel bleibt fuer Desktop erhalten, wuerde
     hier aber ueber den vollbreiten Button hinauslaufen (gemessen bei 375px). */
  .b-btn--big { white-space: normal; }
}
.b-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--mma-rot-akzent); border-bottom: 1px solid transparent; transition: border-color 200ms; white-space: nowrap; }
.b-link:hover { border-color: var(--mma-rot-akzent); }
.b-link--beige { color: var(--mma-rot-anker); }
.b-link--beige:hover { border-color: var(--mma-rot-anker); }

/* ── Striped Foto-/Video-Platzhalter ───────────────────────── */
.mma-ph { position: relative; border-radius: 24px; overflow: hidden; background: repeating-linear-gradient(135deg, #2a1418 0 16px, #241115 16px 32px); border: 1px solid rgba(212,201,181,0.16); }
.mma-ph__note { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(560px, 84%); text-align: center; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; color: rgba(212,201,181,0.78); margin: 0; }
.mma-ph__tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(212,201,181,0.9); background: rgba(20,8,8,0.55); border: 1px solid rgba(212,201,181,0.28); padding: 8px 13px; border-radius: 999px; }
.mma-ph--beige { background: repeating-linear-gradient(135deg, #e9e0d0 0 16px, #e2d8c5 16px 32px); border-color: rgba(74,58,40,0.18); }
.mma-ph--beige .mma-ph__note { color: #6a5c44; }
.mma-ph--beige .mma-ph__tag { color: #4a3a28; background: rgba(237,228,210,0.85); border-color: rgba(74,58,40,0.22); }

/* ============================================================
   HEADER · fix, Glas-Verhalten via bold-v3.css (.is-scrolled)
   ============================================================ */
.b-header { position: absolute; inset: 0 0 auto 0; z-index: 50; padding: 26px 0; }
.b-header__inner { max-width: 1480px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }
.b-header img.b-logo { height: 38px; filter: brightness(0) invert(1); display: block; }
.b-nav { display: flex; gap: 34px; align-items: center; font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.b-nav a { color: rgba(255,255,255,0.85); transition: color 200ms; }
.b-nav a:hover { color: #fff; }
.b-nav .b-nav-cta { border: 1px solid rgba(255,255,255,0.55); padding: 11px 22px; border-radius: 999px; font-weight: 700; letter-spacing: 0.1em; transition: background 200ms, color 200ms, border-color 200ms; }
.b-nav .b-nav-cta:hover { background: var(--mma-rot-akzent); color: #fff; border-color: var(--mma-rot-akzent); }
@media (max-width: 980px){ .b-nav a:not(.b-nav-cta){ display:none; } .b-header__inner{ padding: 0 24px; } }

/* ============================================================
   1 · HERO · Tiefschwarz + roter Glow · rechteckiges Bild-Card
   ============================================================ */
/* Hero niedriger (Feedback 01.08.2026): Vollbild-Höhe war für den
   Inhalt zu hoch, nach dem Wegfall des Bild-Tags zusätzlich unten
   luftig. Oben bleibt genug Reserve, damit die fixe Kopfzeile den
   Kicker nicht überdeckt. */
.mma-hero { position: relative; background: var(--mma-dark); color: #fff; overflow: hidden; min-height: clamp(560px, 82svh, 780px); display: flex; align-items: flex-end; padding: clamp(112px, 13vh, 150px) 0 clamp(48px, 6vw, 80px); box-sizing: border-box; }
.mma-hero__bg { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; }
.mma-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 32%; will-change: transform; }
/* Scrim nachgezogen (Feedback 01.08.2026): Der niedrigere Hero
   schneidet das Foto anders an, dadurch lag der Kicker mit 4,17:1
   unter WCAG AA (vorher 4,00:1 — der Wert war also schon zu niedrig).
   Die linke Flanke ist von 0,88/0,55/0,14 auf 0,90/0,62/0,16 gesetzt:
   Kicker 4,95:1, H1 3,75:1, Fließtext 5,47:1 — alle über AA, das Foto
   bleibt rechts unverändert offen. */
.mma-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(26,20,20,0.90) 0%, rgba(26,20,20,0.62) 44%, rgba(26,20,20,0.16) 80%),
    linear-gradient(180deg, rgba(26,20,20,0.55), transparent 30%, transparent 56%, rgba(26,20,20,0.94)),
    radial-gradient(ellipse 70% 80% at 88% 8%, rgba(220,13,29,0.20), transparent 56%); }
.mma-hero .b-wrap { position: relative; z-index: 2; width: 100%; }
.mma-hero__inner { position: relative; display: block; max-width: 820px; }
/* Der Hero-Tag „Pratzenarbeit · Standkampf" ist entfallen (Feedback
   01.08.2026); die zugehörigen Positionsregeln liefen danach ins
   Leere. Die Basisklasse .mma-media__tag bleibt — sie trägt weiterhin
   die Bildunterschrift in §5 (.mma-diff__media). */
.mma-hero .b-kicker { color: var(--rp-beige); }
.mma-hero .b-kicker::before { background: var(--rp-beige); }
.mma-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.6vw, 86px); line-height: 1.0; letter-spacing: -0.035em; color: #fff; margin: 0 0 28px; max-width: 16ch; text-wrap: balance; hyphens: none; -webkit-hyphens: none; }
.mma-hero__h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.mma-hero__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.86); margin: 0 0 36px; max-width: 56ch; }
/* CTA-Block: Button und Microcopy stehen als schmale Spalte, damit die
   Zeile „Kostenlos & unverbindlich" mittig unter dem Button sitzt und
   nicht linksbündig unter dem ganzen Textblock (Feedback 01.08.2026).
   width:max-content zieht den Block auf Buttonbreite zusammen; der
   Zweitlink „Mehr erfahren" ist entfallen, seine Hero-Überschreibungen
   damit ebenfalls. */
.mma-hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: max-content; max-width: 100%; }
.mma-hero__cta .b-btn { justify-content: center; }
.mma-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.72); }
.mma-hero__trust { margin: clamp(36px, 4vw, 52px) 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(212,201,181,0.82); line-height: 1.9; }
/* Echtes Hochkant-Foto (Oktober 2026): Über die volle Desktop-Breite
   gezogen läge das Gesicht des Trainers unter Headline und Scrim. Ab
   1101 px steht das Foto deshalb als rechte Bildfläche mit weicher
   Kante — Trainer und Kämpfer bleiben beide sichtbar. Tablet/Mobil
   wie bisher vollflächig. */
@media (min-width: 1101px){
  .mma-hero__bg { left: auto; right: 0; width: min(62%, 1000px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28%); }
}
/* Tablet quer 941–1100 px: Das Foto liegt vollflächig hinter dem Text, der
   Fließtext lief über die roten Handschuhe und den hellen Unterarm des
   Trainers (3,0:1). Die linke Flanke deckt jetzt dichter ab: Fließtext
   gemessen 6,5–6,6:1, Kicker 6,9:1 und mehr, der Kämpfer bleibt sichtbar. */
@media (min-width: 941px) and (max-width: 1100px){
  .mma-hero::before { background:
    linear-gradient(90deg, rgba(26,20,20,0.92) 0%, rgba(26,20,20,0.80) 50%, rgba(26,20,20,0.58) 72%, rgba(26,20,20,0.16) 92%),
    linear-gradient(180deg, rgba(26,20,20,0.55), transparent 30%, transparent 56%, rgba(26,20,20,0.94)),
    radial-gradient(ellipse 70% 80% at 88% 8%, rgba(220,13,29,0.20), transparent 56%); }
}
/* Schmale Desktops 1101–1279 px: Der Fließtext ragte in die rechte
   Bildfläche (2,6–2,8:1). Er endet jetzt vor der weichen Bildkante
   (gemessen 8,8:1 und mehr); der Hero wird dadurch etwa 30 px höher. */
@media (min-width: 1101px) and (max-width: 1279px){
  .mma-hero__sub { max-width: 30em; }
}
/* Mobil: Vollbild bleibt, Bildausschnitt rückt Richtung Action, Gradient trägt die Lesbarkeit */
@media (max-width: 940px){
  .mma-hero { min-height: clamp(500px, 80svh, 680px); }
  .mma-hero__bg img { object-position: 52% 30%; }
  /* Mobil trägt allein der vertikale Verlauf die Lesbarkeit. Gemessen
     lag der Hero hier schon vor dieser Überarbeitung deutlich unter
     WCAG AA (Kicker 2,30:1 · H1 1,38:1 · Fließtext 2,52:1). Die
     Stützstellen sind von 0,62/0,30/0,55/0,96 auf 0,74/0,70/0,86/0,97
     angehoben: Kicker 4,59:1 · H1 4,34:1 · Fließtext 7,03:1 — alle
     über AA. Das Foto liegt dadurch mobil spürbar ruhiger hinter dem
     Text; bewusst zugunsten der Lesbarkeit. */
  .mma-hero::before { background:
    linear-gradient(180deg, rgba(26,20,20,0.74), rgba(26,20,20,0.70) 34%, rgba(26,20,20,0.86) 62%, rgba(26,20,20,0.97)),
    radial-gradient(ellipse 70% 80% at 88% 8%, rgba(220,13,29,0.20), transparent 56%); }
}

/* ============================================================
   2 · WAS IST KRAV MAGA? · DUNKELROT · weiße Schrift · Prosa
   ============================================================ */
.mma-def { background: var(--mma-rot-anker); color: #fff; padding: clamp(96px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.mma-def::before { content:""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 84% 4%, rgba(220,13,29,0.24), transparent 56%); }
.mma-def__inner { position: relative; z-index: 1; }
.mma-def__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 60px); }
.mma-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: 18ch; text-wrap: balance; }
.mma-def__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.mma-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: 54ch; }
.mma-def__body { columns: 2; column-gap: clamp(40px, 5vw, 72px); max-width: 1180px; }
.mma-def__body p { font-size: 17px; line-height: 1.74; color: rgba(255,255,255,0.9); margin: 0 0 22px; break-inside: avoid; }
.mma-def__body p:last-child { margin-bottom: 0; }
.mma-def__body strong { color: #fff; font-weight: 700; }
.mma-def__body em { font-style: normal; color: var(--rp-beige); font-weight: 600; }
@media (max-width: 820px){ .mma-def__body{ columns: 1; } }

/* §2 · „Mehr lesen" — Historie/Verband nur mobil einklappen (Desktop: display:contents, voll sichtbar) */
.mma-more { display: contents; }
.mma-more__btn { display: none; }
@media (max-width: 820px){
  .mma-more { display: block; max-height: 0; overflow: hidden; transition: max-height 480ms var(--mma-ease); }
  .mma-more.is-open { max-height: 1600px; }
  .mma-more > p:first-child { margin-top: 0; }
  .mma-more__btn { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--rp-beige); -webkit-tap-highlight-color: transparent; }
  .mma-more__btn::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 300ms var(--mma-ease); }
  .mma-more__btn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(1px); }
}

/* ============================================================
   3 · WAS LERNST DU? · HELL Beige · trägt die Die drei Distanzen
   ============================================================ */
.mma-learn { background: var(--mma-beige); color: var(--mma-body); padding: clamp(96px, 12vw, 152px) 0; }
.mma-learn__head { max-width: 820px; margin-bottom: clamp(36px, 4vw, 52px); }
.mma-learn__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: var(--mma-rot-anker); margin: 0 0 24px; max-width: 16ch; text-wrap: balance; }
.mma-learn__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--mma-rot-akzent); }
.mma-learn__body { columns: 2; column-gap: clamp(40px, 5vw, 72px); max-width: 1180px; }
.mma-learn__body p { font-size: 17px; line-height: 1.74; color: var(--mma-ink); margin: 0 0 22px; break-inside: avoid; }
.mma-learn__body p:last-child { margin-bottom: 0; }
.mma-learn__body strong { color: var(--mma-rot-anker); font-weight: 700; }
@media (max-width: 820px){ .mma-learn__body{ columns: 1; } }

/* ── SIGNATUR · Die drei Distanzen · Stand → Clinch → Boden ─── */
/* Boxen kompakter statt randfüllend (Feedback 01.08.2026): auf das
   Textmaß der Sektion (1180px) begrenzt, damit Fließtext und Grafik
   dieselbe Spaltenkante teilen. */
.mma-dist { margin-top: clamp(56px, 7vw, 92px); max-width: 1180px; }
.mma-dist__intro { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mma-rot-akzent); margin: 0 0 8px; display: flex; align-items: center; gap: 14px; }
.mma-dist__intro::before { content:""; width: 40px; height: 1px; background: var(--mma-rot-akzent); flex-shrink: 0; }
.mma-dist__sub { font-size: 16px; line-height: 1.6; color: var(--mma-body); margin: 0 0 52px; max-width: 64ch; }
.mma-dist__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mma-phase { position: relative; padding-top: 56px; }
.mma-phase__line { position: absolute; top: 15px; left: 0; height: 3px; width: calc(100% + 24px); background: var(--mma-rot-akzent); transform-origin: 0 50%; z-index: 1; }
.mma-phase:last-child .mma-phase__line { width: 100%; }
.mma-phase__line::after { content:""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 9px solid var(--mma-rot-akzent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.mma-phase:last-child .mma-phase__line::after { display: none; }
.mma-phase__node { position: absolute; top: 0; left: 0; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; background: var(--mma-dark); border: 3px solid var(--mma-dark); z-index: 2; display: flex; align-items: center; justify-content: center; }
.mma-phase__node::after { content:""; width: 9px; height: 9px; border-radius: 50%; background: var(--mma-rot-akzent); }
.mma-phase__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--mma-body); display: block; margin-bottom: 8px; }
.mma-phase__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 42px); line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--mma-rot-anker); text-transform: uppercase; }
.mma-phase__range { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mma-rot-akzent); display: block; margin-bottom: 16px; }
.mma-phase__p { font-size: 15px; line-height: 1.6; color: var(--mma-body); margin: 0; max-width: 34ch; }
.mma-dist__foot { margin: clamp(40px, 5vw, 60px) 0 0; padding-top: 30px; border-top: 1px solid rgba(74,58,40,0.2); font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2.3vw, 30px); line-height: 1.38; color: var(--mma-rot-anker); max-width: 36ch; text-wrap: balance; }
.mma-dist__foot em { font-style: italic; color: var(--mma-rot-akzent); }
@media (max-width: 820px){
  .mma-dist__track { grid-template-columns: 1fr; gap: 48px; }
  .mma-phase__line { width: 100% !important; }
  .mma-phase__line::after { display: none; }
}

/* ============================================================
   4 · FÜR WEN? · DUNKEL Tiefschwarz · weiße Schrift · Standard
   ============================================================ */
.mma-fit { background: var(--mma-dark); color: #fff; padding: clamp(96px, 12vw, 152px) 0; }
.mma-fit__head { max-width: 860px; margin-bottom: clamp(44px, 5vw, 64px); }
.mma-fit__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; max-width: 18ch; text-wrap: balance; }
.mma-fit__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.mma-fit__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mma-fit__card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; padding: clamp(28px, 3vw, 40px); transition: border-color 320ms, transform 520ms var(--mma-ease), box-shadow 520ms; }
.mma-fit__card:hover { border-color: rgba(220,13,29,0.6); transform: translateY(-4px); box-shadow: 0 30px 64px -38px rgba(0,0,0,0.7); }
.mma-fit__card--no { background: rgba(20,8,8,0.4); }
.mma-fit__lead { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.18; letter-spacing: -0.015em; color: var(--rp-beige); margin: 0 0 16px; }
.mma-fit__card--no .mma-fit__lead { color: rgba(255,255,255,0.92); }
.mma-fit__p { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0; }
.mma-fit__p + .mma-fit__p { margin-top: 14px; }
.mma-fit__p a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); font-weight: 700; transition: border-color 200ms; }
.mma-fit__p a:hover { border-color: #fff; }
@media (max-width: 820px){ .mma-fit__grid{ grid-template-columns: 1fr; } }

/* ============================================================
   5 · DAS UNTERSCHEIDET UNS · DUNKELROT · weiße Schrift
   ============================================================ */
.mma-diff { background: var(--mma-rot-anker); color: #fff; padding: clamp(96px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.mma-diff::before { content:""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 12% 8%, rgba(220,13,29,0.26), transparent 56%); }
.mma-diff__inner { position: relative; z-index: 1; }
.mma-diff__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 56px); }
.mma-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: 16ch; text-wrap: balance; }
.mma-diff__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.mma-diff__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0; max-width: 58ch; }
.mma-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mma-point { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: 22px; padding: clamp(26px, 2.8vw, 38px); transition: border-color 320ms, transform 520ms var(--mma-ease); }
.mma-point:hover { border-color: rgba(255,255,255,0.34); transform: translateY(-3px); }
.mma-point__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.16; letter-spacing: -0.015em; color: var(--rp-beige); margin: 0 0 12px; }
.mma-point__p { font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.84); margin: 0; }
.mma-point__p + .mma-point__p { margin-top: 14px; }
.mma-point__flag { margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; line-height: 1.65; color: var(--mma-rot-akzent); border-left: 2px solid rgba(220,13,29,0.5); padding-left: 14px; }
@media (max-width: 820px){ .mma-points{ grid-template-columns: 1fr; } }

.mma-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; }
.mma-stat__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 4.4vw, 64px); line-height: 0.92; letter-spacing: -0.03em; color: var(--rp-beige); font-variant-numeric: tabular-nums; }
.mma-stat__n .pre { font-family: var(--font-mono); font-weight: 500; font-size: 0.3em; letter-spacing: 0.06em; vertical-align: 0.55em; margin-right: 0.2em; color: rgba(255,255,255,0.7); text-transform: uppercase; }
.mma-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.66); line-height: 1.5; }
@media (max-width: 900px){ .mma-stats{ grid-template-columns: 1fr 1fr; gap: 40px 20px; } }

/* ============================================================
   6 · STIMMEN · HELL Beige · Karten-Stapel (mehrere Zitate)
   Zuvor: EIN Zitat in einem 1.25fr/0.75fr-Grid (.mma-quote__inner),
   dessen zweite Spalte für ein Bild gedacht war, das im Markup nie
   existierte — dadurch saß das Zitat in der linken Hälfte statt
   mittig. Grid und Bildspalte sind mit dem Umbau entfallen.
   ============================================================ */
.mma-quote { background: var(--mma-beige); color: var(--mma-ink); padding: clamp(100px, 13vw, 160px) 0 0; }
.mma-quote__mark { font-family: var(--font-serif); font-size: 110px; line-height: 0.6; color: rgba(109,23,35,0.32); display: block; text-align: center; }
.mma-quote__q { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.1vw, 31px); line-height: 1.34; letter-spacing: -0.01em; color: var(--mma-rot-anker); margin: 0 0 30px; text-wrap: pretty; }
.mma-quote__q .s-ph { color: var(--mma-rot-akzent); font-family: var(--font-mono); font-style: normal; font-size: 0.5em; line-height: 1.7; }
.mma-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(--mma-rot-anker); margin: 0; padding-top: 22px; border-top: 1px solid var(--rp-border-soft); }
.mma-quote__attr::before { content:""; width: 40px; height: 1px; background: var(--mma-rot-anker); flex-shrink: 0; }
.mma-quote__attr .s-ph { color: var(--mma-rot-akzent); }
.mma-quote__note { margin: 14px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; line-height: 1.7; color: #8a7e66; max-width: 60ch; }

/* ── Karten-Stapel ──────────────────────────────────────────
   Portiert aus css/kids-scroll-v3.css (.kv3-stack / .kv3-card),
   damit diese Seite KEIN kinder-spezifisches Stylesheet einbinden
   muss — dieselbe Vorgehensweise wie in css/wilmersdorf.css.
   Jede Karte klebt mittig im Viewport; die nächste schiebt sich
   darüber, die darunterliegende tritt per JS zurück.
   box-sizing ist hier explizit gesetzt, weil die Seite sonst
   content-box rechnet und die Karte um die Innenabstände breiter
   als min(…) wäre. */
.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(68ch, 94vw); border-radius: 24px;
  padding: clamp(32px, 5vw, 68px); background: var(--rp-white);
  border-top: 4px solid var(--mma-rot-akzent);
  box-shadow: 0 40px 90px -36px rgba(26,20,20,0.45); 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(--rp-beige-deep); }
.kv3-card--anker { background: var(--mma-rot-anker); border-top-color: var(--rp-beige); }
.kv3-card--anker .mma-quote__q { color: #fff; }
.kv3-card--anker .mma-quote__attr { color: var(--rp-beige); border-top-color: rgba(255,255,255,0.24); }
.kv3-card--anker .mma-quote__attr::before { background: var(--rp-beige); }
.kv3-card--anker .mma-quote__note { color: rgba(255,255,255,0.66); }
.kv3-card--anker .kv3-card__num { color: rgba(237,228,210,0.72); }
@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; }
}

/* ============================================================
   7 · FAQ · HELL Hellgrau · Akkordeon (b-q)
   ============================================================ */
.b-faq { background: var(--mma-grey); color: var(--mma-body); padding: clamp(96px, 12vw, 152px) 0; }
.b-faq__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 52px; }
.b-faq__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 78px); line-height: 0.98; letter-spacing: -0.03em; color: var(--mma-rot-anker); margin: 0; max-width: 14ch; }
.b-faq__sub { font-size: 16px; line-height: 1.55; color: var(--mma-body); max-width: 46ch; margin: 0; }
.b-faq__list { border-top: 1px solid rgba(26,20,20,0.14); }
.b-q { border-bottom: 1px solid rgba(26,20,20,0.14); }
.b-q__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 0; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 26px); letter-spacing: -0.01em; color: var(--mma-ink); background: none; border: 0; cursor: pointer; transition: color 200ms; }
.b-q__btn h3 { font: inherit; margin: 0; }
.b-q__btn:hover h3 { color: var(--mma-rot-akzent); }
.b-q__plus { flex-shrink: 0; width: 30px; height: 30px; position: relative; }
.b-q__plus::before, .b-q__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--mma-rot-akzent); transition: transform 250ms; }
.b-q__plus::before { width: 20px; height: 2px; transform: translate(-50%, -50%); }
.b-q__plus::after { width: 2px; height: 20px; 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 400ms var(--ease-standard); }
.b-q__a-inner { padding: 0 64px 28px 0; font-size: 16px; line-height: 1.68; color: var(--mma-body); max-width: 80ch; }
.b-q__a-inner .s-ph { color: var(--mma-rot-akzent); font-family: var(--font-mono); font-size: 0.85em; }
.b-q.is-open .b-q__a { max-height: 640px; }
.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; } }

/* ============================================================
   8 · STANDORTE · DUNKEL Tiefschwarz · 3-Spalten-Raster
   ============================================================ */
.mma-loc { background: var(--mma-dark); color: #fff; padding: clamp(96px, 12vw, 152px) 0; }
.mma-loc__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 56px); }
.mma-loc__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.03em; color: #fff; margin: 0 0 24px; max-width: 16ch; text-wrap: balance; }
.mma-loc__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.mma-loc__lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.84); margin: 0; max-width: 60ch; }
.mma-loc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mma-loc-card { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 320ms, transform 520ms var(--mma-ease), box-shadow 520ms; }
.mma-loc-card:hover { border-color: rgba(220,13,29,0.6); transform: translateY(-5px); box-shadow: 0 30px 64px -36px rgba(0,0,0,0.7); }
.mma-loc-card__photo { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: #241115; flex-shrink: 0; }
.mma-loc-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--mma-ease); }
.mma-loc-card:hover .mma-loc-card__photo img { transform: scale(1.06); }
.mma-loc-card__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 56%, rgba(26,20,20,0.5)); }
.mma-loc-card__photo--ph { background: repeating-linear-gradient(135deg, #2a1418 0 16px, #241115 16px 32px); }
.mma-loc-card__photo--ph::after { display: none; }
.mma-loc-card__ph-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 86%; text-align: center; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: 0.04em; color: rgba(212,201,181,0.75); }
.mma-loc-card__ph-note .s-ph { color: var(--mma-rot-akzent); }
.mma-loc-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 26px 22px; min-height: 150px; box-sizing: border-box; }
.mma-loc-card__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--mma-rot-akzent); }
.mma-loc-card__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 31px); letter-spacing: -0.015em; color: #fff; margin: 14px 0 6px; }
.mma-loc-card__region { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0; }
.mma-loc-card__meta { margin: 18px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.6; color: rgba(255,255,255,0.55); }
.mma-loc-card__meta .s-ph { color: var(--mma-rot-akzent); }
.mma-loc-card__arrow { margin-top: auto; align-self: flex-end; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.24); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; transition: background 220ms, border-color 220ms, color 220ms, transform 320ms var(--mma-ease); }
.mma-loc-card:hover .mma-loc-card__arrow { background: var(--mma-rot-akzent); border-color: var(--mma-rot-akzent); transform: translate(2px,-2px); }
.mma-loc__close { margin: clamp(40px, 5vw, 56px) 0 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 80ch; }
.mma-loc__note { margin: 18px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 1.7; color: var(--mma-rot-akzent); max-width: 80ch; }
@media (max-width: 980px){ .mma-loc__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mma-loc__grid{ grid-template-columns: 1fr; } .mma-loc-card{ min-height: 0; } }

/* ============================================================
   9 · FINALER CTA · DUNKEL Tiefschwarz + roter Glow
   ============================================================ */
.mma-final { background: var(--mma-dark); color: #fff; padding: clamp(120px, 15vw, 188px) 24px; position: relative; overflow: hidden; text-align: center; }
.mma-final::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(220,13,29,0.4), rgba(109,23,35,0.28) 36%, transparent 64%); }
.mma-final__inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
.mma-final__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -0.03em; margin: 26px 0; text-wrap: balance; }
.mma-final__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.mma-final__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0 auto 40px; max-width: 52ch; }
.mma-final__row { display: flex; justify-content: center; }
.mma-final .b-btn--big { box-shadow: 0 22px 60px -18px rgba(220,13,29,0.6); }
.mma-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.58); }
.mma-final__price { margin: 30px 0 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--rp-beige); }
.mma-final__price + .mma-final__foot { margin-top: 16px; }

/* ============================================================
   FOOTER (b-foot) · systemweit
   ============================================================ */
.b-foot { background: #0a0808; color: #888; padding: 80px 0 40px; font-size: 12px; }
.b-foot__top { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 48px; padding-bottom: 64px; border-bottom: 1px solid #1f1818; }
.b-foot__brand img { height: 38px; filter: brightness(0) invert(1); opacity: 0.9; margin-bottom: 24px; }
.b-foot__brand p { color: #777; font-size: 13px; line-height: 1.55; max-width: 32ch; margin: 0; }
.b-foot__col h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-beige); margin: 0 0 18px; }
.b-foot__col ul { list-style: none; margin: 0; padding: 0; }
.b-foot__col li { line-height: 2; }
.b-foot__col a { color: #888; transition: color 200ms; }
.b-foot__col a:hover { color: #fff; }
.b-foot__bot { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: #555; }
.b-foot__bot a { color: #777; }
.b-foot__bot a:hover { color: #fff; }
@media (max-width: 900px){ .b-foot__top{ grid-template-columns: 1fr 1fr; gap: 32px; } .b-foot__bot{ flex-direction: column; gap: 12px; text-align: center; } }

/* ============================================================
   STICKY-CTA · mobil vollbreit unten, Desktop schwebend
   ============================================================ */
.sticky-cta { position: fixed; z-index: 80; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--mma-rot-akzent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; box-shadow: 0 18px 44px -16px rgba(220,13,29,0.6); transition: opacity 300ms, transform 300ms; }
@media (min-width: 721px){
  .sticky-cta { right: 28px; bottom: 28px; padding: 16px 28px; border-radius: 999px; }
}
@media (max-width: 720px){
  .sticky-cta { left: 0; right: 0; bottom: 0; padding: 18px 24px; border-radius: 0; }
}
.sticky-cta.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* ============================================================
   ECHTE BILDER + VISUALISIERUNGEN (additiv)
   Foto sparsam & gezielt (Hero, Stimmen), Verständnis trägt die
   Grafik. Standard-Radius, Akzentrot bleibt Akzent. .bv3.mma.
   ============================================================ */
/* Floating Probetraining-Button: Textfarbe gegen .mma a{color:inherit} sichern */
.bv3.mma a.sticky-cta { color: #fff; }

/* Bild-Tag · trägt die Bildunterschrift in §5 (.mma-diff__media) */
.mma-media__tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,246,238,0.94); background: rgba(20,8,8,0.55); border: 1px solid rgba(212,201,181,0.28); padding: 8px 13px; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* §2 · Visualisierung „Was MMA vereint" — vier Disziplinen → MMA */
/* Boxen kompakter statt randfüllend (Feedback 01.08.2026) — gleiche
   Spaltenkante wie .mma-def__body. */
.mma-mix { margin-top: clamp(48px, 6vw, 76px); max-width: 1180px; }
.mma-mix__cap { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-beige); margin: 0 0 26px; display: flex; align-items: center; gap: 14px; }
.mma-mix__cap::before { content: ""; width: 40px; height: 1px; background: var(--rp-beige); flex-shrink: 0; }
.mma-mix__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mma-mix__cell { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 24px 22px; transition: border-color 320ms, transform 520ms var(--mma-ease); }
.mma-mix__cell:hover { border-color: rgba(255,255,255,0.32); transform: translateY(-3px); }
.mma-mix__cell .src { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.12; letter-spacing: -0.01em; color: #fff; margin: 0 0 10px; }
.mma-mix__cell .tech { display: block; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; letter-spacing: 0.03em; color: rgba(255,255,255,0.64); }
.mma-mix__sum { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.18); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mma-mix__sum .eq { font-family: var(--font-mono); font-size: 22px; line-height: 1; color: var(--mma-rot-akzent); }
.mma-mix__sum .res { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 3vw, 40px); letter-spacing: 0.01em; color: var(--rp-beige); line-height: 1; }
.mma-mix__sum .note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: rgba(255,255,255,0.62); }
@media (max-width: 820px){ .mma-mix__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .mma-mix__grid { grid-template-columns: 1fr; } }

/* §3b · BILD-BAND · full-bleed · Parallax via JS-Transform auf __fig */
.mma-band { position: relative; height: clamp(300px, 54vh, 600px); overflow: hidden; background: var(--mma-dark); }
.mma-band__fig { position: absolute; inset: -12% 0; margin: 0; will-change: transform; }
.mma-band__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 10%; }
.mma-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(26,20,20,0.18), transparent 26%, transparent 70%, rgba(26,20,20,0.5)); }
.mma-band__tag { position: absolute; left: clamp(24px, 4vw, 48px); bottom: 26px; z-index: 2; margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,246,238,0.94); background: rgba(20,8,8,0.55); border: 1px solid rgba(212,201,181,0.28); padding: 8px 13px; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@media (max-width: 720px){ .mma-band { height: clamp(240px, 44vh, 420px); } }
/* Echtes Foto „Wettkampf · Team an deiner Seite" (Oktober 2026) liegt nur
   in 1080 × 1080 vor. Über die volle Breite gezogen würde es unscharf —
   ab Tablet steht es deshalb als halbe Fläche neben einem zweiten
   Trainingsfoto, mobil allein. */
.mma-band__fig--duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 3px; background: var(--mma-dark); }
.mma-band__fig--duo img { display: block; min-width: 0; min-height: 0; }
@media (max-width: 768px){
  .mma-band__fig--duo { grid-template-columns: minmax(0, 1fr); }
  .mma-band__fig--duo .mma-band__zweit { display: none; }
}

/* §5 · Schul-Bild · breites Bild-Card zwischen Punkten und Kennzahlen */
.mma-diff__media { position: relative; margin: clamp(44px, 5vw, 68px) 0 0; border-radius: 24px; overflow: hidden; aspect-ratio: 21/9; box-shadow: 0 44px 96px -52px rgba(0,0,0,0.75); }
.mma-diff__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
@media (max-width: 820px){ .mma-diff__media { aspect-ratio: 16/10; } }