/* ============================================================
   Randori-Pro · GLOBALE SITE-CHROME (Header + Footer)
   Eine Quelle der Wahrheit, auf jeder Seite identisch.
   Wird per js/mobile-nav.js injiziert; ersetzt die alten
   per-Seite-Header/Footer. Dropdowns (Standorte-Mega, Kurse),
   Mobile-Drawer, scroll-to-glass. Desktop ab 981px.
   Ausnahmen (Probetraining-Landing, Danke) bekommen keine
   globale Chrome – ihre fokussierten Funnel-Leisten bleiben.
   ============================================================ */

:root { --gnav-h: 84px; }

/* ============================================================
   HEADER
   ============================================================ */
.rp-gnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .36s var(--ease-standard, ease), box-shadow .36s var(--ease-standard, ease), backdrop-filter .36s;
  /* Glasleiste abgedunkelt (01.08.2026): der alte Verlauf (0.55/0.18/0) ließ die
     Menüpunkte über hellen Hero-Bildern auf 4,5:1 absacken. Jetzt 6,5:1 an der
     hellsten Stelle der Leiste. Farben und Typo unverändert. */
  background: linear-gradient(180deg, rgba(20,16,15,0.72) 0%, rgba(20,16,15,0.40) 55%, rgba(20,16,15,0.08) 100%);
  /* Erbfarbe der Kopfleiste. Nötig, weil .s-page a { color: inherit } (Spezifität
     0-1-1, css/standort.css) die Regel .rp-gnav__link (0-1-0) schlägt: ruhende
     Menüpunkte erbten sonst #575E62 vom Body und lagen bei 1,0–2,9:1. */
  color: rgba(255,255,255,0.97);
}
.rp-gnav[data-state="scrolled"] {
  background: rgba(20,16,15,0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px -18px rgba(0,0,0,0.6);
}

/* ── Helle Chrome-Variante · für Seiten mit hellem Hero ───────
   Opt-in per <body data-nav-theme="light">. Logo ohne Invert,
   dunkle Links, helle Glasleiste; Megas/Drawer bleiben dunkel. */
.rp-gnav[data-theme="light"] {
  background: linear-gradient(180deg, rgba(250,246,238,0.92) 0%, rgba(250,246,238,0.35) 55%, transparent 100%);
  color: rgba(26,20,20,0.78);
}
.rp-gnav[data-theme="light"] .rp-gnav__logo img { filter: none; }
.rp-gnav[data-theme="light"] .rp-gnav__link { color: rgba(26,20,20,0.78); }
.rp-gnav[data-theme="light"] .rp-gnav__link:hover,
.rp-gnav[data-theme="light"] .rp-gnav__item:hover .rp-gnav__link,
.rp-gnav[data-theme="light"] .rp-gnav__item:focus-within .rp-gnav__link,
.rp-gnav[data-theme="light"] .rp-gnav__link[aria-current="page"] { color: var(--rp-tiefschwarz, #1A1414); }
.rp-gnav[data-theme="light"] .rp-burger { color: var(--rp-tiefschwarz, #1A1414); }
.rp-gnav[data-theme="light"][data-state="scrolled"] {
  background: rgba(250,247,238,0.86);
  box-shadow: 0 1px 0 rgba(26,20,20,0.06), 0 12px 40px -20px rgba(26,20,20,0.18);
}
.rp-gnav__inner {
  max-width: 1480px; margin: 0 auto; padding: 0 40px;
  height: var(--gnav-h);
  display: flex; align-items: center; gap: 28px;
}
.rp-gnav__logo { flex: 0 0 auto; display: flex; align-items: center; }
.rp-gnav__logo img {
  height: 40px; width: auto; display: block;
  filter: brightness(0) invert(1);
  transition: height .36s var(--ease-standard, ease);
}
.rp-gnav[data-state="scrolled"] .rp-gnav__logo img { height: 32px; }

.rp-gnav__menu { display: flex; align-items: center; gap: 4px; margin-left: 0; }
.rp-gnav__item { position: relative; }
.rp-gnav__link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 8px;
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: 500; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255,255,255,0.97); text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 1px 14px rgba(0,0,0,0.45); white-space: nowrap; cursor: pointer;
  background: transparent; border: 0;
  transition: color .2s ease, background .2s ease;
}
.rp-gnav__link:hover, .rp-gnav__item:hover .rp-gnav__link,
.rp-gnav__item:focus-within .rp-gnav__link { color: #fff; }
.rp-gnav__link[aria-current="page"] { color: #fff; }
.rp-caret {
  width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform .25s ease; opacity: .75;
}
.rp-gnav__item:hover .rp-caret, .rp-gnav__item:focus-within .rp-caret { transform: rotate(225deg) translateY(-1px); }

.rp-gnav__spacer { flex: 1 1 auto; }
.rp-gnav__cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rp-rot-akzent, #DC0D1D); color: #fff;
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 22px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(220,13,29,0.6);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rp-gnav__cta:hover { background: #c40b1a; transform: translateY(-1px); box-shadow: 0 14px 32px -12px rgba(220,13,29,0.7); }

/* ── Mega / Dropdown ──────────────────────────────────────── */
.rp-mega {
  position: absolute; top: calc(100% - 6px); left: 50%; transform: translateX(-50%) translateY(8px);
  /* Deckend, nicht durchscheinend (11.08.2026).
     Vorher: rgba(22,17,16,0.80) plus backdrop-filter blur(22px) — als Glas
     gedacht, das den Hintergrund weichzeichnet. Das kann hier nicht
     funktionieren: sobald die Seite gescrollt ist, bekommt die Kopfleiste
     selbst einen backdrop-filter, und die wird damit zur Bezugsfläche für
     alles darin. Der Weichzeichner des Menüs hat dann nichts mehr zu
     zeichnen — übrig blieben 20 % Durchsicht auf den scharfen Seiteninhalt,
     also Text auf Text. Genau das war im Menü "Standorte" zu sehen.
     Der Verlauf davor (0.66 → 0.80 am 01.08.2026) war schon ein Versuch,
     das über mehr Deckkraft zu retten. Jetzt deckend, damit ist es weg. */
  background: #191312;
  color: #fff;
  border-radius: 16px; padding: 18px;
  box-shadow: 0 28px 64px -30px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.08) inset;
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease-standard, ease), transform .22s var(--ease-standard, ease), visibility 0s linear .22s;
  z-index: 5;
}
.rp-gnav__item:hover .rp-mega, .rp-gnav__item:focus-within .rp-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .22s var(--ease-standard, ease), transform .22s var(--ease-standard, ease);
}
/* Hover-Brücke, damit der Weg zur Karte nicht abbricht */
.rp-gnav__item.has-mega::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px;
}

/* Standorte-Mega · Kachelraster */
.rp-mega--standorte { width: min(680px, calc(100vw - 48px)); }
.rp-mega__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.rp-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 15px; border-radius: 11px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.rp-tile:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.14); transform: translateY(-2px); }
.rp-tile__name {
  font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 15px;
  color: #fff; letter-spacing: -0.01em;
}
.rp-tile__meta {
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.72);
}

/* Kurse-Mega · Spalten nach Kategorie */
.rp-mega--kurse { width: min(760px, calc(100vw - 48px)); }
.rp-mega__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 24px; }
.rp-mega__col h4 {
  margin: 4px 0 10px; font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rp-beige, #D4C9B5);
}
.rp-mega__col a {
  display: block; padding: 7px 8px; margin: 0 -8px; border-radius: 7px;
  font-family: var(--font-body, sans-serif); font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.82); line-height: 1.3;
  transition: background .15s ease, color .15s ease;
}
.rp-mega__col a:hover { background: rgba(255,255,255,0.08); color: #fff; }

.rp-mega__foot {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12);
}
.rp-mega__foot a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--rp-rot-akzent, #DC0D1D);
}
.rp-mega__foot a:hover { color: var(--rp-rot-anker, #6D1723); }

/* ============================================================
   BURGER  (≤980px)
   ============================================================ */
.rp-burger {
  display: none; flex: 0 0 auto;
  width: 46px; height: 46px; margin-left: 6px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 11px;
  color: #fff; -webkit-tap-highlight-color: transparent;
}
.rp-burger__box { position: relative; width: 24px; height: 16px; }
.rp-burger__box span {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease-standard, ease), opacity .2s ease, top .3s ease;
}
.rp-burger__box span:nth-child(1) { top: 0; }
.rp-burger__box span:nth-child(2) { top: 7px; }
.rp-burger__box span:nth-child(3) { top: 14px; }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.rp-drawer {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--rp-tiefschwarz, #1A1414);
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
  background-size: 26px 26px;
  display: flex; flex-direction: column;
  padding: 18px clamp(20px, 6vw, 40px) max(28px, env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .34s var(--ease-standard, ease), transform .34s var(--ease-standard, ease), visibility 0s linear .34s;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-y: auto;
}
.rp-drawer.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .34s var(--ease-standard, ease), transform .34s var(--ease-standard, ease);
}
html.rp-menu-lock, body.rp-menu-lock { overflow: hidden; }

.rp-drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 46px; margin-bottom: clamp(16px, 4vh, 36px); }
.rp-drawer__top img { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.rp-drawer__close {
  width: 46px; height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 0; border-radius: 50%; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s ease; -webkit-tap-highlight-color: transparent;
}
.rp-drawer__close:hover { background: rgba(255,255,255,0.13); }

.rp-drawer__nav { display: flex; flex-direction: column; }
/* Top-Level Zeile (Link oder Accordion-Toggle) */
.rp-acc { border-bottom: 1px solid rgba(255,255,255,0.10); }
.rp-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  padding: 16px 2px; min-height: 58px; background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display, sans-serif); font-weight: 600; font-size: clamp(23px, 6vw, 32px);
  letter-spacing: -0.015em; color: #fff; -webkit-tap-highlight-color: transparent;
}
a.rp-acc__head { text-decoration: none; }
/* Standorte/Sportarten: Link links, Aufklapp-Knopf rechts (seit 16.10.2026) */
.rp-acc__row { display: flex; align-items: center; gap: 10px; }
.rp-acc__row .rp-acc__head { flex: 1 1 auto; width: auto; min-width: 0; justify-content: flex-start; }
.rp-acc__toggle {
  flex: 0 0 auto; width: 52px; height: 52px; margin-right: -2px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 0; border-radius: 50%; cursor: pointer;
  transition: background .2s ease; -webkit-tap-highlight-color: transparent;
}
.rp-acc__toggle:hover, .rp-acc__toggle:focus-visible { background: rgba(255,255,255,0.13); }
.rp-acc__toggle:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
.rp-acc__head .rp-acc__chev, .rp-acc__toggle .rp-acc__chev {
  width: 12px; height: 12px; border-right: 2px solid rgba(255,255,255,0.6); border-bottom: 2px solid rgba(255,255,255,0.6);
  transform: rotate(45deg); transition: transform .28s var(--ease-standard, ease); flex: 0 0 auto; margin-right: 4px;
}
.rp-acc.is-open .rp-acc__chev { transform: rotate(225deg); }
/* Pfeil im runden Knopf optisch mittig (die Drehung verschiebt ihn) */
.rp-acc__toggle .rp-acc__chev { margin: -5px 0 0; }
.rp-acc.is-open .rp-acc__toggle .rp-acc__chev { margin: 5px 0 0; }
.rp-acc__head .rp-acc__go { color: var(--rp-rot-akzent, #DC0D1D); font-size: 0.62em; opacity: .8; }

.rp-acc__panel { max-height: 0; overflow: hidden; transition: max-height .34s var(--ease-standard, ease); }
.rp-acc.is-open .rp-acc__panel { max-height: 1400px; }
.rp-acc__panel-inner { padding: 4px 2px 16px; }
.rp-sub-h {
  margin: 12px 0 4px; font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-rot-akzent, #DC0D1D);
}
.rp-acc__panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 2px; min-height: 44px;
  font-family: var(--font-body, sans-serif); font-size: 16px; font-weight: 500;
  color: rgba(255,255,255,0.82); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rp-acc__panel a:hover { color: #fff; }
.rp-acc__panel a::after { content: "→"; color: rgba(255,255,255,0.3); font-size: 0.85em; }

.rp-drawer__cta { margin-top: auto; padding-top: 22px; }
.rp-drawer__cta a {
  display: flex; align-items: center; justify-content: center;
  background: var(--rp-rot-akzent, #DC0D1D); color: #fff;
  font-family: var(--font-display, sans-serif); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 15px; padding: 20px; border-radius: 8px; min-height: 56px; text-decoration: none;
  transition: background .2s ease;
}
.rp-drawer__cta a:hover { background: #c40b1a; }
.rp-drawer__meta { margin: 14px 0 0; text-align: center; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); }

@media (prefers-reduced-motion: reduce) {
  .rp-drawer, .rp-acc__panel { transition-duration: .01ms !important; }
}

/* ── Sichtbarkeit Desktop ↔ Mobile ────────────────────────── */
@media (max-width: 980px) {
  .rp-gnav__menu, .rp-gnav__cta { display: none !important; }
  .rp-burger { display: inline-flex !important; }
  .rp-gnav__inner { gap: 0; justify-content: space-between; }
}
@media (min-width: 981px) {
  .rp-burger { display: none !important; }
  .rp-drawer { display: none !important; }
}
/* Sechs Menüpunkte seit „Ausbildung" (Masterbriefing 5.1): zwischen Burger-Grenze
   und 1280 px enger setzen, sonst ragt der Knopf rechts aus dem Bild. (Bis zum
   16.10.2026 waren es mit „Karriere" sieben.) */
@media (min-width: 981px) and (max-width: 1279px) {
  .rp-gnav__inner { padding: 0 24px; gap: 14px; }
  .rp-gnav__link { padding: 10px 9px; letter-spacing: 0.04em; }
  .rp-gnav__cta { padding: 11px 16px; }
}
@media (min-width: 981px) and (max-width: 1099px) {
  .rp-gnav__link { padding: 10px 7px; font-size: 12px; letter-spacing: 0.03em; }
  .rp-gnav__cta { font-size: 11.5px; letter-spacing: 0.05em; }
}

/* ============================================================
   GLOBALER FOOTER
   ============================================================ */
.rp-gfoot {
  background: #0d0a0a; color: #8b8483;
  padding: clamp(48px, 6vw, 72px) 0 26px;
  font-family: var(--font-body, sans-serif);
}
.rp-gfoot__inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.rp-gfoot__grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px;
}
.rp-gfoot__col h4 {
  margin: 0 0 16px; font-family: var(--font-display, sans-serif); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-beige, #D4C9B5);
}
.rp-gfoot__col ul { list-style: none; margin: 0; padding: 0; }
.rp-gfoot__col li { margin: 0 0 2px; }
.rp-gfoot__col a {
  display: inline-block; padding: 5px 0; font-size: 13.5px; line-height: 1.45; color: #8b8483; text-decoration: none;
  transition: color .2s ease;
}
.rp-gfoot__col a:hover { color: var(--rp-beige, #D4C9B5); }
.rp-gfoot__plain { display: inline-block; padding: 5px 0; font-size: 13.5px; line-height: 1.45; color: #8b8483; }
/* Fließtext-Links (Teil 6): dezent, palettenneutral, brand-roter Unterstrich */
a[data-il] { color: inherit; text-decoration: underline; text-decoration-color: rgba(220,13,29,0.5); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
a[data-il]:hover { text-decoration-color: var(--rp-rot-akzent, #DC0D1D); }
.rp-usa {
  display: inline-block; margin-left: 7px; vertical-align: middle;
  background: rgba(220,13,29,0.18); color: var(--rp-rot-akzent, #DC0D1D);
  font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 500;
  letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px;
}
.rp-gfoot__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 56px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08);
  /* #6c6664 lag auf #0d0a0a bei 3,50:1 — auf den bereits verwendeten Footer-Ton
     #8b8483 angehoben (5,38:1). Kein neuer Farbwert. */
  font-size: 11.5px; color: #8b8483;
}
.rp-gfoot__social { display: flex; gap: 20px; }
.rp-gfoot__social a { color: #8b8483; font-size: 12px; letter-spacing: 0.04em; transition: color .2s ease; text-decoration: none; }
.rp-gfoot__social a:hover { color: var(--rp-beige, #D4C9B5); }

@media (max-width: 860px) {
  .rp-gfoot__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 520px) {
  .rp-gfoot__grid { grid-template-columns: 1fr; gap: 28px; }
  .rp-gfoot__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}
.rp-gfoot__inner { overflow-wrap: break-word; }

/* ============================================================
   SCHWEBENDER PROBETRAINING-BUTTON · vereinheitlichte Pillenform
   Eine Quelle der Wahrheit (zuletzt geladen, daher autoritativ).
   Macht BEIDE Sticky-Systeme (.sticky-cta + .s-sticky) auf ALLEN
   Seiten und ALLEN Breiten zur gleichen, rund abgerundeten,
   schwebenden Pille. Ersetzt die alten „Vollbreit-Banner am
   unteren Rand"-Mobilregeln.

   STAND 04.08.2026 · Feedback Dominik:
   · Desktop: mehr Abstand zum rechten Rand
       right  20px → clamp(24px, 3vw, 48px)
       bottom 20px → clamp(24px, 3vw, 40px)
   · Mobil (≤720px): unten MITTIG statt rechts unten.
       Zentriert über left:0 / right:0 + margin-inline:auto und
       width:max-content — bewusst NICHT über transform, weil die
       Aus-Zustände der Seiten-Stylesheets (.sticky-cta.hidden,
       .s-sticky) transform: translateY(...) für die Animation
       benutzen; ein transform zum Zentrieren würde davon
       überschrieben und der Button beim Ein-/Ausblenden nach
       rechts springen.

   Diese Datei ist der einzige Ort, an dem die Positionierung
   greift: von den 18 Seiten mit Sticky-Button laden nur 4
   überhaupt css/site.css, und dieser Block wird auf allen 18
   zuletzt geladen. Die .sticky-cta-Regeln in den Seiten-
   Stylesheets (boxen, grappling, mma, krav-maga, kickboxen,
   ktr, personal-training, judo, kung-fu, taekwondo, hapkido)
   setzen zwar eigene right/bottom-Werte, werden hier aber
   durchweg überstimmt.
   ============================================================ */
.sticky-cta,
.s-sticky { left: auto !important; right: clamp(24px, 3vw, 48px) !important; bottom: clamp(24px, 3vw, 40px) !important; width: auto !important; }

/* .s-sticky-Mechanik global mitliefern (Seiten ohne standort.css) */
.s-sticky { position: fixed !important; z-index: 70; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 280ms var(--ease-standard), transform 280ms var(--ease-standard); }
.s-sticky.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.s-sticky a { display: inline-flex; }

/* Drawer: direkte Ziele („Über uns", „FAQ") nicht vom Seiten-Style
   (.s-page a { color: inherit }) ausgrauen lassen — gleiche Helligkeit
   wie die Akkordeon-Köpfe „Standorte"/„Kurse". */
.rp-drawer { color: #fff; }
.rp-drawer a.rp-acc__head { color: #fff; }
@media (prefers-reduced-motion: reduce){ .s-sticky { transition: none; } }

.sticky-cta,
.s-sticky a {
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto !important;
  max-width: calc(100vw - 40px);
  border-radius: 999px !important;
  padding: 15px 26px !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--rp-rot-akzent) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,0.45) !important;
  text-align: center;
}
.sticky-cta:hover,
.s-sticky a:hover { background: #c40b1a !important; }

/* Mobil · schwebende Pille unten MITTIG (04.08.2026).
   left/right auf 0 plus margin-inline:auto zentriert das fixierte
   Element; width:max-content hält es auf Textbreite. min-height:44px
   sichert die Trefferfläche (Padding-Höhe wäre 15+16+~16 = 47px, der
   Wert ist die Untergrenze für den Fall kleinerer Schrift).
   Der untere Abstand bleibt bewusst ein fester Wert: die iPhone-
   Home-Indicator-Zone deckt bereits css/polish.css über
   padding-bottom: max(16px, env(safe-area-inset-bottom)) ab. Beides
   zugleich würde den Abstand doppelt zählen. */
@media (max-width: 720px) {
  .sticky-cta,
  .s-sticky {
    left: 0 !important;
    right: 0 !important;
    bottom: 16px !important;
    margin-inline: auto !important;
    width: max-content !important;
    max-width: calc(100vw - 32px) !important;
    /* box-sizing MUSS hier mit, sonst rechnet min-height auf den
       Seiten ohne css/site.css (Krav Maga, Boxen, MMA, Grappling …)
       gegen content-box: 44px Inhalt + 15px + 16px Padding = 75px
       hohe Pille, während sie auf den site.css-Seiten 51px hoch
       bliebe. Gemessen 04.08.2026. */
    box-sizing: border-box !important;
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .sticky-cta,
  .s-sticky { bottom: 12px !important; }
  .sticky-cta,
  .s-sticky a { padding: 15px 22px !important; font-size: 12px !important; }
}