/* KP Token-Retrofit — Phase 3 (rev5) */

/* ====== header-footer.css ====== */
/* =====================================================================
   Token-Retrofit — Header #44 + Footer #732 (GLOBAL, jede Seite)
   Scope: header#brx-header  /  footer#brx-footer
   Nur var()/rem/%/em/clamp — keine px (Ausnahme: 1px Hairline).
   Mobile-first; Hochskalieren via min-width (em). !important nur dort,
   wo Bricks inline-ID-Styles / _cssCustom sonst gewinnen.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HEADER — Topbar + Hauptleiste
   --------------------------------------------------------------------- */

/* Topbar bg #212121 -> --c-ink */
header#brx-header #brxe-bqkpzd {
  background-color: var(--c-ink) !important;
}

/* Hauptleiste bg #b80000 -> --c-red */
header#brx-header #brxe-gpiuui {
  background-color: var(--c-red) !important;
}

/* Eyebrow h6 #ce0000 -> --c-red, Mindestgröße, kein 12px-Crash */
header#brx-header #brxe-nlnjdv {
  color: var(--c-red) !important;
  font-size: var(--fs-sm) !important;
  line-height: var(--lh-snug);
  margin-bottom: 0;
}

/* Container-Paddings: %-VW-Werte -> Token (mobile-first) */
header#brx-header #brxe-tmviaz {
  min-height: 2.75rem;            /* war 50px */
  padding-inline: var(--container-pad);
  padding-block: 0;
}
header#brx-header #brxe-ngnqfo {
  padding-inline: var(--container-pad);
  padding-block: var(--space-sm) !important;   /* war 1%/3%/4% */
}
@media (min-width: 48em) {
  header#brx-header #brxe-ngnqfo {
    padding-block: var(--space-xs) !important;
  }
}

/* Nav-Links: weiß (on-dark), Mindesthöhe als Tap-Target, Spacing via Token.
   _cssCustom setzt color:white inline -> Override braucht !important. */
/* NUR Farbe/Hover — KEIN display/min-height (würde die Desktop-Nav-Bar
   auf 44px aufblasen; Live-Layout behalten). */
header#brx-header .bricks-nav-menu > li > a,
header#brx-header .bricks-nav-menu .menu-item-has-children > div > a {
  color: var(--c-text-on-dark) !important;
  transition: color var(--dur) var(--ease);
}

/* Hover/Active: dunkles Ink auf rotem Grund (red-tint wäre fast unsichtbar) */
header#brx-header .bricks-nav-menu > li:hover > a,
header#brx-header .bricks-nav-menu > li.current-menu-item > a {
  color: var(--c-ink) !important;
}

/* Nav-Spacing: menuMargin 1.5em / margin-right 2em -> Token */
header#brx-header #brxe-idhsza {
  margin-right: var(--space-sm);
}
header#brx-header .bricks-nav-menu {
  gap: var(--gap-sm);
}

/* Submenu (Dropdown) bg #111111 -> --c-ink, hover #bc0000 -> --c-red,
   Schrift mind. --fs-sm (war 10px) */
header#brx-header .bricks-nav-menu ul.sub-menu {
  background-color: var(--c-ink) !important;
}
header#brx-header .bricks-nav-menu .sub-menu a {
  color: var(--c-text-on-dark) !important;
  font-size: var(--fs-sm) !important;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
header#brx-header .bricks-nav-menu .sub-menu li:hover > a {
  background-color: var(--c-red) !important;
  color: var(--c-white) !important;
}

/* Mobile-Menu: Off-canvas-Links + Toggle lesbar/groß genug */
header#brx-header .bricks-mobile-menu a {
  color: var(--c-text-on-dark) !important;
  font-size: var(--fs-sm) !important;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
/* KEIN display-Override — Bricks blendet den Toggle auf Desktop selbst aus
   (display:none); inline-flex hier hätte ihn auf Desktop sichtbar gemacht.
   Nur Tap-Größe (greift nur wenn Bricks ihn auf Mobile einblendet) + Farbe. */
header#brx-header .bricks-mobile-menu-toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--c-text-on-dark) !important;
}

/* Logo: max-width in rem (war px), responsiv klein -> groß */
header#brx-header .my-logo,
header#brx-header .my-logo img {
  max-width: 100%;
  height: auto;
}
header#brx-header .my-logo {
  width: clamp(8.75rem, 18vw, 13.75rem);  /* ~140px -> ~220px */
}

/* ---------------------------------------------------------------------
   FOOTER — Hauptzeile + Sub-Footer
   --------------------------------------------------------------------- */

/* Sections bg #111111 -> --c-ink */
footer#brx-footer #brxe-inxbcc,
footer#brx-footer #brxe-jeubuj {
  background-color: var(--c-ink) !important;
}

/* Sub-Footer-Leiste bg #1d1d1d -> --c-ink-2 */
footer#brx-footer #brxe-chcwil {
  background-color: var(--c-ink-2) !important;
  padding-block: var(--space-sm) !important;   /* war 1% */
  padding-inline: var(--container-pad);
}

/* Footer-Container: nur Spaltenabstand (KEIN section-y-Padding-Override,
   Live-Footer hat 0 Section-Padding) */
footer#brx-footer #brxe-kxurge {
  gap: var(--gap);
}

/* KRITISCH F1: #333333 auf dunklem Grund -> lesbarer Token.
   Imprint / Privacy / "Design by" + generischer Footer-Text. */
footer#brx-footer #brxe-ywxuhv,
footer#brx-footer #brxe-qwupso,
footer#brx-footer #brxe-offbdj,
footer#brx-footer .brxe-text-link {
  color: var(--c-muted-on-dark) !important;
  font-size: var(--fs-sm) !important;
}

/* Footer-Link Tap-Targets + Hover (weiß) */
footer#brx-footer a.brxe-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  transition: color var(--dur) var(--ease);
}
footer#brx-footer a.brxe-text-link:hover {
  color: var(--c-text-on-dark) !important;
}

/* Adresse / generischer Footer-Text on-dark lesbar */
footer#brx-footer #brxe-ftwdvt,
footer#brx-footer .brxe-text-basic {
  color: var(--c-text-on-dark);
}

/* Footer-Logo: px-Breite -> rem, Margins tokenisiert */
footer#brx-footer #brxe-rteujh,
footer#brx-footer #brxe-rteujh img {
  max-width: 100%;
  height: auto;
}
footer#brx-footer #brxe-rteujh {
  width: clamp(8.75rem, 30%, 12.5rem);   /* ~200px max */
  margin-bottom: var(--space-md);        /* war 2em */
}
footer#brx-footer #brxe-beentq {
  margin-bottom: 0;                      /* war -5px */
}

/* GF Submit-Button #b80000 -> --c-red + Tap-Target */
footer#brx-footer #brxe-reroxl .gform_button,
footer#brx-footer #brxe-reroxl button[type="submit"] {
  background-color: var(--c-red) !important;
  min-height: 2.75rem;
  border-radius: var(--radius);
}
footer#brx-footer #brxe-reroxl .gform_button:hover,
footer#brx-footer #brxe-reroxl button[type="submit"]:hover {
  background-color: var(--c-red-dark) !important;
}

/* Mobile Stack: 25/25/50-Spalten unter 48em untereinander */
@media (max-width: 47.99em) {
  footer#brx-footer #brxe-kxurge {
    flex-direction: column;
  }
  footer#brx-footer #brxe-msfweu,
  footer#brx-footer #brxe-upkwlr,
  footer#brx-footer #brxe-fsviju {
    width: 100%;
  }
}

/* ====== home.css ====== */
/* ============================================================
   Home / Front-Page (Post-ID 27, Slug "/") — Token-Retrofit
   Scope: body.page-id-27  (Hero-Section #brxe-khxecf, CTAs .brxe-button)
   Nur var()/rem/%/em/clamp() — keine px (Ausnahme: 1px-Hairline).
   Mobile-first; Hochskalierung via min-width in em.
   Tokens via uploads/kp/tokens.css site-weit geladen.
   ============================================================ */

/* ---- Overflow-Guard (Off-canvas-Menü + Reviews-Slider) -----
   Nur Outer-Clip; .rpi-* Innenbreiten bleiben unberührt. */
body.page-id-27 {
  overflow-x: clip;
}
body.page-id-27 img,
body.page-id-27 video {
  max-width: 100%;
  height: auto;
}

/* HINWEIS: KEINE Section-/Container-/Hero-Paddings hier — die Live-Seite
   hat 0 Section-Padding, Abstände kommen aus den inneren Containern.
   (Frühere padding-block:var(--section-y)-Regeln entfernt: erzeugten
   doppelte Abstände + trafen sogar die Header-Leisten.) */

/* Eyebrow-Label (H6) auf lesbares, getracktes Mini-Heading */
body.page-id-27 #brxe-nlnjdv {
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--c-red);
}

/* Hero-Headline (H1): lebt in schmaler ~373px-Spalte über dunklem
   Trainer-Bild -> KEIN --fs-display (würde 100 Zeichen auf ~13 Zeilen
   brechen), sondern contained-fluide + heller Text auf Dunkel. */
body.page-id-27 #brxe-tyfuia {
  font-size: clamp(var(--fs-h4), 3vw, var(--fs-h2));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking);
  color: var(--c-text-on-dark);
}

/* Hero-Bild-Container: cover ohne Tiling (war background-repeat:repeat) */
body.page-id-27 #brxe-nljncn {
  background-repeat: no-repeat;
}

/* ============================================================
   HEADINGS — Farben & Größen auf Tokens
   ============================================================ */
/* H2 vweami: clamp(px) -> Token, #111 -> --c-ink */
body.page-id-27 #brxe-vweami {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

/* xbzilb: Legacy-Vars --h1-size/--h1-lh -> Tokens */
body.page-id-27 #brxe-xbzilb {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

/* Roten Akzent-Headings (H3 / Programm-Titel) -> --c-red */
body.page-id-27 #brxe-cqtvlz,
body.page-id-27 #brxe-tbhgdf,
body.page-id-27 #brxe-ncckua,
body.page-id-27 #brxe-ohkngj,
body.page-id-27 #brxe-qpowzv,
body.page-id-27 #brxe-zuokxy {
  color: var(--c-red);
}

/* Große Nummern 01/02/03: 5em -> fluides --fs-display, rot */
body.page-id-27 #brxe-dmrhme,
body.page-id-27 #brxe-dgjwja,
body.page-id-27 #brxe-sisivd {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--c-red);
}

/* ============================================================
   CTAs  .brxe-button  (8 Stück, alle font-size:12px inline via Bricks-ID)
   -> Button-Tokens + min-height. !important nötig, weil Bricks
      ID-Inline-Style (#brxe-…{font-size:12px}) sonst gewinnt.
   ============================================================ */
body.page-id-27 .brxe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--fs-sm) !important;   /* war 12px inline */
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  background-color: var(--c-red);
  color: var(--c-text-on-dark);
  border-radius: var(--radius-pill);
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
body.page-id-27 .brxe-button:hover,
body.page-id-27 .brxe-button:focus-visible {
  background-color: var(--c-red-dark);
}

/* ============================================================
   Dunkle Sektionen: hardcodiertes #1d1d1d -> --c-ink
   Helle Sektionen: #e0e0e0 -> --c-paper-2
   ============================================================ */
body.page-id-27 #brxe-jrltcm,
body.page-id-27 #brxe-ktokqg {
  background-color: var(--c-ink);
}
body.page-id-27 #brxe-vurxuh,
body.page-id-27 #brxe-dysuvm {
  background-color: var(--c-paper-2);
}

/* ====== concept-news.css ====== */
/* =====================================================================
   Token-Retrofit — new.karatepraxis.com
   Scopes: body.page-id-30 (Concept) + body.page-id-83 (News)
   Nur var(--…)/rem/em/%/clamp. Keine px (Ausnahme: 1px-Hairline).
   Mobile-first; Hochskalieren via min-width in em.
   !important nur gegen Bricks-Inline-ID-Styles (Schlüsselstellen).
   ===================================================================== */


/* =====================================================================
   SCOPE 1 — CONCEPT  (body.page-id-30)
   ===================================================================== */

/* KEINE Section-/Container-Paddings — Live hat 0 Section-Padding. */

/* Section-Hintergründe hart→Token (#1d1d1d / #111 → --c-ink) */
body.page-id-30 #brxe-aoirrj,
body.page-id-30 #brxe-ngnkwz,
body.page-id-30 #brxe-vrmgdo,
body.page-id-30 #brxe-dloomi {
  background-color: var(--c-ink);
}

/* Fließtext: Token + Prose-Lesebreite ~65ch, zentriert */
body.page-id-30 .brxe-text,
body.page-id-30 .brxe-text-basic,
body.page-id-30 .brxe-rich-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
body.page-id-30 #brxe-buqvuv,
body.page-id-30 #brxe-daqlqz {
  max-width: 65ch;
  margin-inline: auto;
}

/* Überschriften fluide */
body.page-id-30 h1.brxe-heading { font-size: var(--fs-h1); line-height: var(--lh-tight); }
body.page-id-30 h2.brxe-heading { font-size: var(--fs-h2); line-height: var(--lh-snug); }
body.page-id-30 h3.brxe-heading { font-size: var(--fs-h3); line-height: var(--lh-snug); }
body.page-id-30 h4.brxe-heading { font-size: var(--fs-h4); line-height: var(--lh-snug); }

/* Eyebrow-Heading #b80000 → --c-red */
body.page-id-30 #brxe-boniea { color: var(--c-red) !important; }

/* Listen-Icon #ce0000 → --c-red */
body.page-id-30 #brxe-plohjp .brxe-list-item i,
body.page-id-30 #brxe-plohjp svg { color: var(--c-red) !important; }

/* CTA-Button: rot-BG, heller Text, Mindest-Tap, Schrift-Floor */
body.page-id-30 #brxe-eddtls,
body.page-id-30 #brxe-eddtls a {
  background-color: var(--c-red) !important;
  color: var(--c-text-on-dark) !important;
  font-size: var(--fs-sm) !important;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

/* Trainer-Karten: #dddddd Fläche → --c-line, #b80000 → --c-red */
body.page-id-30 #brxe-txiopy { background-color: var(--c-red); }
body.page-id-30 #brxe-empkvf,
body.page-id-30 #brxe-efdphc,
body.page-id-30 #brxe-lomvew,
body.page-id-30 #brxe-wsixzk,
body.page-id-30 #brxe-jhhshq,
body.page-id-30 #brxe-tasfgw,
body.page-id-30 #brxe-hhktqx,
body.page-id-30 #brxe-hqcjsn { background-color: var(--c-line); }

/* Trainer-Name (#000 16px ls2px) → Token; Rang (0.6em) → --fs-sm Floor. */
body.page-id-30 #brxe-inlsbk,
body.page-id-30 #brxe-bzacuy,
body.page-id-30 #brxe-bpjekc,
body.page-id-30 #brxe-obzngc,
body.page-id-30 #brxe-wonlyy,
body.page-id-30 #brxe-gtxgmf,
body.page-id-30 #brxe-eancoy,
body.page-id-30 #brxe-tqqdec {
  color: var(--c-text) !important;
  font-size: var(--fs-body) !important;
  letter-spacing: var(--tracking-wide) !important;
}
body.page-id-30 #brxe-gyiapc,
body.page-id-30 #brxe-osvfjc,
body.page-id-30 #brxe-wccnlk,
body.page-id-30 #brxe-ucwvcp,
body.page-id-30 #brxe-apmxkk,
body.page-id-30 #brxe-prxbvn,
body.page-id-30 #brxe-ppurnr,
body.page-id-30 #brxe-hihlge,
body.page-id-30 #brxe-juteaj {
  color: var(--c-text) !important;
  font-size: var(--fs-sm) !important;
  line-height: var(--lh-snug);
}

/* Sektions-Label #ffffff 12px → Token + Floor */
body.page-id-30 #brxe-fkwwfb {
  color: var(--c-text-on-dark) !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: var(--tracking-wide);
}

/* progress-bar Label/Prozent + ALLE Spans drin (8px-Labels) → weiß, Floor */
body.page-id-30 #brxe-cfsezd .bricks-progress-line-text,
body.page-id-30 #brxe-cfsezd .bricks-progress-percentage,
body.page-id-30 #brxe-cfsezd span {
  color: var(--c-white) !important;
  font-size: var(--fs-sm) !important;
}

/* Medien-Guard (kein Full-Bleed-Bruch: nur max-width) */
body.page-id-30 img { max-width: 100%; height: auto; }

/* Tap-Targets */
body.page-id-30 a.button,
body.page-id-30 button,
body.page-id-30 .brxe-button a,
body.page-id-30 .brxe-social-icons a { min-height: 2.75rem; }


/* =====================================================================
   SCOPE 2 — NEWS  (body.page-id-83)
   ===================================================================== */

/* KEINE Section-/Container-Paddings — Live hat 0 Section-Padding. */

/* Section-BG #212121 → --c-ink */
body.page-id-83 #brxe-alcore { background-color: var(--c-ink); }

/* Überschriften fluide */
body.page-id-83 h1.brxe-heading { font-size: var(--fs-h1); line-height: var(--lh-tight); }
body.page-id-83 h2.brxe-heading { font-size: var(--fs-h2); line-height: var(--lh-snug); }

/* News-Karte: #f7f7f7 → --c-paper, fluide Breite statt px */
body.page-id-83 #brxe-zcytsp {
  background-color: var(--c-paper) !important;
  width: 100% !important;
  max-width: min(100%, 22rem);
}

/* Karten-Titel {post_title}: #212121 16px ls1.5 → Token */
body.page-id-83 #brxe-fjfrvy {
  color: var(--c-text) !important;
  font-size: var(--fs-body) !important;
  letter-spacing: var(--tracking-wide) !important;
}

/* Excerpt {post_excerpt}: 0.8em weight200 → --fs-body, lesbares Gewicht, Prose-Breite */
body.page-id-83 #brxe-tnivad {
  color: var(--c-text) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  font-weight: 400 !important;
  max-width: 65ch;
}

/* GRÖSSTE SÜNDE: Caption 8.4px (#888) → --fs-sm Floor + --c-muted.
   Inline-Style am Element selbst → !important nötig. */
body.page-id-83 #brxe-gywoci,
body.page-id-83 #brxe-gywoci p {
  font-size: var(--fs-sm) !important;
  color: var(--c-muted) !important;
}

/* Read-more-Icon #b80000 → --c-red */
body.page-id-83 #brxe-yjrgbh i,
body.page-id-83 #brxe-yjrgbh svg { color: var(--c-red) !important; }

/* Karten-Bild Guard */
body.page-id-83 #brxe-jxcwsf img,
body.page-id-83 img { max-width: 100%; height: auto; }

/* Tap-Targets */
body.page-id-83 a.button,
body.page-id-83 button,
body.page-id-83 .brxe-button a { min-height: 2.75rem; }

/* ====== selfdefense-bunkai.css ====== */
/* =====================================================================
   Token-Retrofit — Karate-Self-Defense (Post-ID 1415) + Bunkai (Post-ID 50)
   Scopes: body.page-id-1415 / body.page-id-50
   Nur var(--token) / rem / % / em / clamp(). Keine px (außer 1px-Hairline).
   Bricks-Inline-Styles sind #brxe-ID-spezifisch → Font-Size-Overrides mit
   moderatem !important, sonst gewinnt die Bricks-ID-Regel.
   ===================================================================== */

/* ---------------------------------------------------------------------
   GEMEINSAM (beide Seiten) — Mobile-first Basis
   --------------------------------------------------------------------- */

/* Bild-/SVG-Guard (kein Full-Bleed kaputt machen) */
body.page-id-1415 :is(img, svg),
body.page-id-50  :is(img, svg) {
  max-width: 100%;
  height: auto;
}

/* Mindest-Lesbarkeit: jeder Textknoten im Inhalt >= --fs-sm.
   Hebt die 5px/10px/11px/12px-Minis flächig an (Hauptbefund Bunkai). */
body.page-id-1415 :is(p, li, span, a, label, .brxe-text, .brxe-text-basic),
body.page-id-50  :is(p, li, span, a, label, .brxe-text, .brxe-text-basic) {
  font-size: max(var(--fs-sm), 1em);
  line-height: var(--lh-body);
}

/* Buttons: Token-Schrift + Tap-Target 2.75rem, fluide Breite statt fixer px */
body.page-id-1415 :is(a.button, button, .brxe-button a, .brxe-button button, .brxe-button > *),
body.page-id-50  :is(a.button, button, .brxe-button a, .brxe-button button, .brxe-button > *) {
  font-size: var(--fs-sm) !important;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

/* Heading-Skala vereinheitlichen (Token-Stufen statt willkürlicher px) */
body.page-id-1415 :is(h1, .brxe-heading.h1),
body.page-id-50  :is(h1, .brxe-heading.h1) { font-size: var(--fs-h1); line-height: var(--lh-tight); }
body.page-id-1415 h2, body.page-id-50 h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
body.page-id-1415 h3, body.page-id-50 h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
body.page-id-1415 h4, body.page-id-50 h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
body.page-id-1415 :is(h5, h6),
body.page-id-50  :is(h5, h6) { font-size: var(--fs-h5); line-height: var(--lh-snug); }

/* ---------------------------------------------------------------------
   SELF-DEFENSE (body.page-id-1415) — ID-spezifische Mini-Schriften
   abe3a2/defdqe = Buttons 12px; yampep = 11/12/13; tadtkq/sekqrs = 5/10px
   --------------------------------------------------------------------- */
body.page-id-1415 #brxe-abe3a2,
body.page-id-1415 #brxe-defdqe {
  font-size: var(--fs-sm) !important;
  width: auto;          /* fixe 150px-Breite lösen */
  max-width: 100%;
}

body.page-id-1415 #brxe-yampep,
body.page-id-1415 #brxe-yampep * {
  font-size: clamp(var(--fs-sm), 2.5vw, var(--fs-body)) !important;
}

/* Datepicker-Trigger: 5px/10px → lesbar */
body.page-id-1415 #brxe-tadtkq,
body.page-id-1415 #brxe-sekqrs,
body.page-id-1415 #brxe-tadtkq *,
body.page-id-1415 #brxe-sekqrs * {
  font-size: var(--fs-sm) !important;
}

/* ---------------------------------------------------------------------
   BUNKAI (body.page-id-50) — HAUPTBEFUND: 142 Mini-Schriften <13px
   Buttons blbeok/zixjbx/mexbxo 12px; bcavln Label 12px (transparent);
   imhwix Datepicker 5px; girqyo 10px (Hauptquelle Mobile-Minis); kynxea 25-28px
   --------------------------------------------------------------------- */

/* Buttons + Labels auf --fs-sm */
body.page-id-50 #brxe-blbeok,
body.page-id-50 #brxe-zixjbx,
body.page-id-50 #brxe-mexbxo,
body.page-id-50 #brxe-bcavln {
  font-size: var(--fs-sm) !important;
}

/* Datepicker-Trigger 5px → lesbar */
body.page-id-50 #brxe-imhwix,
body.page-id-50 #brxe-imhwix * {
  font-size: var(--fs-sm) !important;
}

/* girqyo: 10px@≤991 / 12px@≤478 → fluide ab --fs-sm.
   Eigene ID-Regel + a-Nachfahren, da Bricks beide separat setzt. */
body.page-id-50 #brxe-girqyo,
body.page-id-50 #brxe-girqyo a,
body.page-id-50 #brxe-girqyo * {
  font-size: clamp(var(--fs-sm), 2.8vw, var(--fs-body)) !important;
}

/* Sub-Heading kynxea (25-28px) in Token-Skala (--fs-h4) einreihen */
body.page-id-50 #brxe-kynxea {
  font-size: var(--fs-h4) !important;
  line-height: var(--lh-snug);
}

/* Event-Datum-Liste: ~20 H4-Termine optisch vereinheitlichen.
   Auf --fs-h5-Niveau eindämmen + min --fs-sm Garantie für Meta-Zeilen. */
body.page-id-50 .brxe-heading:is(h4) {
  font-size: clamp(var(--fs-sm), 2.5vw, var(--fs-h5)) !important;
  line-height: var(--lh-snug);
}

/* Event-Listen-Meta: Ort (.location) + Info-Zeilen + rpi-Zeit waren 9–12.48px
   -> Lesbarkeits-Floor --fs-sm. */
body.page-id-50 .location,
body.page-id-50 .rpi-time,
body.page-id-50 .rpi-text,
body.page-id-50 .rpi-name {
  font-size: var(--fs-sm) !important;
}
/* rote Info-Zeile ("Nur für angemeldete Teilnehmer", 12.48px) -> Floor */
body.page-id-50 .brxe-text p,
body.page-id-50 p.brxe-text {
  font-size: max(var(--fs-sm), 1em) !important;
}

/* ---------------------------------------------------------------------
   Hochskalieren ab Tablet/Desktop (Breakpoints in em)
   --------------------------------------------------------------------- */
@media (min-width: 48em) {
  body.page-id-50 #brxe-girqyo,
  body.page-id-50 #brxe-girqyo a,
  body.page-id-50 #brxe-girqyo * {
    font-size: var(--fs-sm) !important;
  }
}

@media (min-width: 64em) {
  body.page-id-1415 :is(h1, .brxe-heading.h1),
  body.page-id-50  :is(h1, .brxe-heading.h1) { line-height: var(--lh-tight); }
}

/* ====== castle.css ====== */
/* ============================================================
   Token-Retrofit — Castle-Retreat-Seminar (Post-ID 55)
   Scope: body.page-id-55
   Regeln: nur var(--…)/rem/%/em/clamp; keine px (außer 1px-Hairline).
   Mobile-first; Hochskalieren via @media (min-width: …em).
   SureCart (sc-*) ist KOMPLETT ausgespart — kein sc-* Selektor hier.
   ============================================================ */

/* --- Globale Sicherung: Schrift-Stack + Medien-Guard --------- */
body.page-id-55 {
  font-family: var(--font-sans);
}
body.page-id-55 img,
body.page-id-55 video {
  max-width: 100%;
  height: auto;
}

/* KEINE Section-Paddings — Live hat 0 Section-Padding. */

/* Section-Hintergründe → Tokens (1d1d1d → ink, f5f5f5 → paper-2) */
body.page-id-55 #brxe-bawnfa,
body.page-id-55 #brxe-aveaba {
  background-color: var(--c-ink);
  color: var(--c-text-on-dark);
}
body.page-id-55 #brxe-gaylgs {
  background-color: var(--c-paper-2);
  color: var(--c-text);
}

/* Container-Breite/-Padding NICHT überschreiben (Live-Layout behalten) */
/* breiter Reviews-/Galerie-Container darf wide nutzen */
body.page-id-55 #brxe-jjhkft {
  column-gap: var(--gap);
  row-gap: var(--gap);
}

/* --- Fluide Headings ---------------------------------------- */
body.page-id-55 .brxe-heading {
  line-height: var(--lh-tight);
}
/* Beide H1 fluide (Markup-2×H1 bleibt SEO-Befund; Typo wird hier nur tokenisiert) */
body.page-id-55 #brxe-mpdggv,
body.page-id-55 #brxe-cpxfhb {
  font-size: clamp(var(--fs-h2), 4vw + 1rem, var(--fs-h1));
  line-height: var(--lh-tight);
}

/* Review-Karten-Headings (14px, weiß) → Floor --fs-sm + Token */
body.page-id-55 #brxe-dkluuz,
body.page-id-55 #brxe-jcsxpr,
body.page-id-55 #brxe-yoamwj,
body.page-id-55 #brxe-ztkxcb,
body.page-id-55 #brxe-jjmmxu,
body.page-id-55 #brxe-xnlmlb,
body.page-id-55 #brxe-mldrlw {
  font-size: var(--fs-sm) !important;        /* schlägt 14px Inline */
  line-height: var(--lh-body);
  color: var(--c-text-on-dark) !important;   /* schlägt #ffffff Inline */
}

/* dunkler Heading #gworgi (#1d1d1d) → Text-Token */
body.page-id-55 #brxe-gworgi {
  color: var(--c-text);
}

/* --- text-basic: Lesbarkeits-Floor (0.8em konnte < --fs-sm) -- */
body.page-id-55 .brxe-text-basic {
  font-size: max(0.8em, var(--fs-sm));
  line-height: var(--lh-body);
}

/* --- CTAs (Bricks-Buttons) — Button-Tokens + Tap-Target ------ */
/* Inline-IDs gewinnen sonst → gezieltes !important an Schlüsselstellen */
body.page-id-55 #brxe-bqcboq,
body.page-id-55 #brxe-mycodq,
body.page-id-55 #brxe-krlwyu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem !important;            /* schlägt _height:40 (=2.5rem) */
  height: auto !important;
  padding-inline: var(--space-md);
  font-size: var(--fs-sm) !important;        /* schlägt 12px Inline */
  font-family: var(--font-sans);
  line-height: var(--lh-snug);
  background-color: var(--c-red) !important; /* schlägt #b80000 */
  color: var(--c-paper) !important;          /* schlägt #f5f5f5 */
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease);
}
body.page-id-55 #brxe-bqcboq:hover,
body.page-id-55 #brxe-mycodq:hover,
body.page-id-55 #brxe-krlwyu:hover {
  background-color: var(--c-red-dark) !important;
}

/* --- Overflow-Guard: Reviews-Slider läuft horizontal aus ----- */
/* Nur am Slider-Wrapper; Hero/Full-Bleed + Off-canvas-Menü bleiben unberührt */
body.page-id-55 .brxe-slider-nested,
body.page-id-55 .brxe-slider-nested .splide,
body.page-id-55 .brxe-slider-nested .splide__track {
  overflow-x: clip;
  max-width: 100%;
}

/* ============================================================
   Tablet/Desktop-Hochskalierung (mobile-first Basis oben)
   ============================================================ */
@media (min-width: 64em) {
  /* breiter Reviews-Container auf Wide-Maß */
  body.page-id-55 #brxe-jjhkft {
    max-width: var(--container-wide);
  }
}

/* ====== shop.css ====== */
/* ============================================================
   Shop — Token-Retrofit (Post-ID 15869, /shop)
   Scope: body.page-id-15869
   Mobile-first. Nur var()/rem/%/em/clamp. Keine px (außer 1px-Hairline).
   WICHTIG: Seite ist Gutenberg + SureCart-Pattern (KEIN Bricks).
            Alle sc-* Web-Components bleiben UNANGETASTET (späterer Schritt).
            Nur die Gutenberg-Layout-Wrapper drumherum werden tokenisiert.
   ============================================================ */

/* ---- Content-Wrapper: Container/Section-Rhythmus + Overflow-Guard ---- */
body.page-id-15869 #brx-content > article.post-15869 {
  overflow-x: clip;                 /* Guard ggn. Off-Canvas-Menü; bricht align:wide nicht */
}

/* H1 "Shop" (bare Theme-Title) auf Tokens */
body.page-id-15869 #brx-content > article.post-15869 > h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0 0 var(--space-md);
}

/* Outer product-list (align:wide) — Breite über Token, nicht hart begrenzen */
body.page-id-15869 .wp-block-surecart-product-list {
  max-width: var(--container-wide);
  margin-inline: auto;
}

/* Medien-Schutz */
body.page-id-15869 #brx-content img {
  max-width: 100%;
  height: auto;
}

/* ---- Produktraster ----------------------------------------------------
   Gutenberg generiert minimum-column-width:225px + gap:30px als
   ID-spezifischen wp-container-Inline-Style → !important nötig. */
body.page-id-15869 .wp-block-surecart-product-template.is-layout-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) !important;
  gap: var(--gap) !important;
}

/* ---- Produktkarte (Gutenberg-Wrapper, KEINE sc-*-Komponente) ---- */
/* Outer-Box mit Hintergrund + Radius */
body.page-id-15869 .wp-block-surecart-product-template .wp-block-group.has-background {
  border-radius: var(--radius-lg) !important;
  background-color: var(--c-paper-2) !important;
}

/* Karten-Bild (Cover) — Radius + Abstand auf Tokens */
body.page-id-15869 .wp-block-surecart-product-template .wp-block-cover {
  border-radius: var(--radius-lg) !important;
  margin-bottom: var(--space-2xs);
}

/* Produkt-Titel (H2) */
body.page-id-15869 .wp-block-surecart-product-template h2 {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

/* Preis-Zeile: Größe tokenisieren, Gewicht (600) von SureCart unangetastet */
body.page-id-15869 .wp-block-surecart-product-list-price,
body.page-id-15869 .wp-block-surecart-product-scratch-price {
  font-size: var(--fs-md);
}

/* Pill-Radien (Quick-View-Button-Wrapper, Sale-Badge-Wrapper) */
body.page-id-15869 .wp-block-surecart-product-quick-view-button,
body.page-id-15869 .wp-block-surecart-product-sale-badge {
  border-radius: var(--radius-pill);
}

/* ---- Mindest-Tap-Target — nur generische (nicht-sc-*) Buttons/Links ----
   sc-* Web-Components bewusst ausgenommen. */
body.page-id-15869 #brx-content .wp-block-button__link,
body.page-id-15869 #brx-content .wp-block-surecart-product-pagination a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ====== reviews.css ====== */
/* ============================================================
   Reviews — Post-ID 81 (/reviews) — Token-Retrofit
   Scope: body.page-id-81  (rein CSS-Override, kein Bricks-Tree-Eingriff)
   Mobile-first; Breakpoints in em (48em / 64em).
   Nur var()/rem/%/em/clamp — keine px (außer 1px-Hairline).
   HINWEIS: Die Legacy-WP-Kommentare (.comment-*, 796 Kommentare,
   Kommentarnavigation) sind GEWOLLTER Alt-Restbestand neben dem neuen
   Google-Widget (.rpi). Hier nur Lesbarkeit/Tap/Token, nichts entfernt.
   ============================================================ */

/* --- Section-Farben → Tokens (KEIN Padding-Override, Live behält Abstände) --- */
body.page-id-81 #brxe-mphevh { background-color: var(--c-ink); }
body.page-id-81 #brxe-okgptb { background-color: var(--c-paper-2); }

/* --- Overflow-Guard (defensiv; Off-Canvas-Menü nicht brechen) --- */
body.page-id-81 .brxe-container,
body.page-id-81 .brxe-section { overflow-x: clip; }
body.page-id-81 img,
body.page-id-81 video,
body.page-id-81 table { max-width: 100%; }

/* --- Hero-H1 fluide --- */
body.page-id-81 #brxe-tescjg {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--c-text-on-dark);
}

/* --- "GOOGLE RATINGS"-Button: fixe px → Tokens + Tap-Target --- */
/* Bricks-Inline-ID-Style (width/height/font-size px) → !important nötig */
body.page-id-81 #brxe-rwxojb {
  background-color: var(--c-red) !important;
  color: var(--c-text-on-dark) !important;
  font-size: var(--fs-sm) !important;
  width: auto !important;
  min-width: 11.25rem;            /* ~180px Wirkung, fluide statt fix */
  height: auto !important;
  min-height: 2.75rem !important; /* Tap-Target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-md);
  border-radius: var(--radius);
}

/* ============================================================
   Neu: Google-Reviews-Widget (.rpi) — Karten-Grid + Tokens
   ============================================================ */
body.page-id-81 .rpi .rpi-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 48em) {
  body.page-id-81 .rpi .rpi-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  body.page-id-81 .rpi .rpi-cards { grid-template-columns: repeat(4, 1fr); }
}
body.page-id-81 .rpi .rpi-card,
body.page-id-81 .rpi .rpi-card-inner {
  border-radius: var(--radius);
}
body.page-id-81 .rpi .rpi-card-inner {
  padding: var(--space-sm);
  background-color: var(--c-white);
}
body.page-id-81 .rpi .rpi-name { font-size: var(--fs-sm); color: var(--c-text); }
body.page-id-81 .rpi .rpi-time { font-size: var(--fs-sm); color: var(--c-muted); }
body.page-id-81 .rpi .rpi-text { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text); }
body.page-id-81 .rpi .rpi-stars { color: var(--c-red); }
/* Tap-Target für Karten-Links im Widget */
body.page-id-81 .rpi a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   Alt (gewollt): WP-Kommentare — nur Lesbarkeit/Tap/Token,
   bewusst nicht kaschiert oder entfernt
   ============================================================ */
body.page-id-81 .comments-title,
body.page-id-81 .comment-list { padding-inline: 0; }

/* Heading-Größen der Kommentar-Sektion fluide (Tags bleiben unverändert) */
body.page-id-81 .comments-title { font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--c-text); }
body.page-id-81 .comment-author .fn { font-size: var(--fs-h5); line-height: var(--lh-snug); margin: 0; }

/* Kommentar-Karten: Trenner/Spacing → Tokens */
body.page-id-81 .comment-list { list-style: none; margin: 0; }
body.page-id-81 .comment-body {
  padding-block: var(--space-sm);
  border-bottom: var(--border-w, 1px) solid var(--c-line);
}
body.page-id-81 .comment-data { display: flex; flex-direction: column; gap: var(--gap-sm); }
body.page-id-81 .comment-content { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); }
body.page-id-81 .comment-content p { margin-block: var(--space-2xs); }

/* Meta/Datum: Min-Font + Tap-Target */
body.page-id-81 .comment-meta { font-size: var(--fs-sm); color: var(--c-muted); }
body.page-id-81 .comment-author .fn > a,
body.page-id-81 .comment-meta > a {
  color: var(--c-muted);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-2xs);
}
body.page-id-81 .comment-author .fn > a { color: var(--c-text); }

/* Kommentar-Navigation: Tap-Targets + Tokens */
body.page-id-81 .comment-navigation .nav-links { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: space-between; }
body.page-id-81 .comment-navigation .nav-links a {
  font-size: var(--fs-sm);
  color: var(--c-red);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-xs);
}

/* Globaler Lesbarkeits-Floor im Seiten-Scope: nichts unter --fs-sm
   (greift NICHT in Header/Footer/Mobile-Submenu — die sind global gescopt) */
body.page-id-81 .comment-content,
body.page-id-81 .comment-meta,
body.page-id-81 .rpi { font-size: max(var(--fs-sm), 0.875rem); }