/**
 * Miasanrot Club: Overview-Page Styling (Weg A, scoped).
 *
 * Restyled die vorhandenen Gutenberg-Bloecke (genesis-blocks Pricing-Tables +
 * stackable Accordions + Core-Bloecke) in den modernen Taktik-Tafel-Look, OHNE
 * das Markup zu aendern - du pflegst die Seite weiter normal in Gutenberg.
 *
 * Aktivierung: den gesamten Seiteninhalt in einen Group-Block packen und diesem
 * die zusaetzliche CSS-Klasse "msr-club" geben (Block-Einstellungen -> Erweitert
 * -> Zusaetzliche CSS-Klasse). Alle Regeln unten sind darunter gescoped.
 *
 * Fein-Tuning-Loop: Inhalt dieser Datei nach Design -> Customizer ->
 * "Zusaetzliches CSS" pasten (kein Deploy noetig). Wenn final, sauber ins Theme
 * enqueuen.
 */

.msr-club {
  --rot: #bf000c;
  --rot-glut: #e2101f;
  --kohle: #241b17;
  --kohle-glanz: rgba(191, 0, 12, 0.14);
  --tinte: #1b1512;
  --nebel: #6f6660;
  --kreide: #ece5dd;
  --kreide-2: #b8ada4;
  --linie: rgba(27, 21, 18, 0.12);
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

/* ---------------------------------------------------------------------------
   Intro-Text
   --------------------------------------------------------------------------- */
/* Direkte Absaetze - deckt Group mit UND ohne inner-container ab. */
.msr-club > p,
.msr-club > .wp-block-paragraph,
.msr-club > .wp-block-group__inner-container > p {
  max-width: 68ch;
  font-family: var(--serif);
  line-height: 1.62;
}
/* Erster (fett gesetzter) Absatz = Lead */
.msr-club > p:first-of-type,
.msr-club > .wp-block-group__inner-container > p:first-of-type {
  font-size: 1.28rem;
  line-height: 1.5;
}
.msr-club > p:first-of-type strong,
.msr-club > .wp-block-group__inner-container > p:first-of-type strong { font-weight: 700; }

/* ---------------------------------------------------------------------------
   Hero: dunkler Intro-Block (Wrapper .msr-club-hero um die Intro-Absaetze),
   geht nahtlos in das Pricing-Panel ueber.
   --------------------------------------------------------------------------- */
.msr-club .msr-club-hero {
  position: relative;
  overflow: hidden;
  background: var(--kohle);
  color: var(--kreide);
  padding: 60px 40px 44px;
  border-radius: 12px 12px 0 0;
  margin-top: 24px;
}
.msr-club .msr-club-hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(85% 80% at 18% 0%, rgba(191, 0, 12, 0.28), transparent 58%);
}
.msr-club .msr-club-hero > * { position: relative; z-index: 1; }
.msr-club .msr-club-hero p {
  color: var(--kreide-2);
  max-width: 60ch;
  font-family: var(--serif);
  line-height: 1.6;
}
.msr-club .msr-club-hero p:first-of-type {
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.5;
}
.msr-club .msr-club-hero em { color: var(--kreide-2); }

/* Pricing-Panel schliesst direkt an den Hero an (ein durchgehender Block). */
.msr-club .msr-club-hero + .wp-block-genesis-blocks-gb-pricing {
  margin-top: 0;
  border-radius: 0 0 12px 12px;
}

/* ---------------------------------------------------------------------------
   Pricing: dunkles Panel + moderne Karten
   --------------------------------------------------------------------------- */
.msr-club .wp-block-genesis-blocks-gb-pricing {
  position: relative;
  background: var(--kohle);
  border-radius: 12px;
  padding: 52px 34px 44px;
  margin-block: 40px;
  overflow: hidden;
}
/* dezenter roter Lichtschein (Zone-14-Anmutung) hinter der Mitte */
.msr-club .wp-block-genesis-blocks-gb-pricing::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, var(--kohle-glanz), transparent 60%);
}

.msr-club .gb-pricing-table-wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
  float: none;
}
.msr-club .wp-block-genesis-blocks-gb-pricing-table {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.msr-club .gb-block-pricing-table-inside {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-width: 1px !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.msr-club .gb-block-pricing-table-inside:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

/* Featured = mittlere Karte (Zone 14) */
.msr-club .gb-pricing-table-wrap > .wp-block-genesis-blocks-gb-pricing-table:nth-child(2) .gb-block-pricing-table-inside {
  position: relative;
  border-width: 2px !important;
  border-color: var(--rot) !important;
  box-shadow: 0 28px 70px -26px rgba(191, 0, 12, 0.6), 0 0 0 6px rgba(191, 0, 12, 0.10);
}
.msr-club .gb-pricing-table-wrap > .wp-block-genesis-blocks-gb-pricing-table:nth-child(2) .gb-block-pricing-table-inside::before {
  content: "Beliebteste Wahl";
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--rot); color: #fff;
  font-family: var(--sans); font-weight: 800; font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 2px; white-space: nowrap; z-index: 2;
}
@media (min-width: 901px) {
  .msr-club .gb-pricing-table-wrap > .wp-block-genesis-blocks-gb-pricing-table:nth-child(2) .gb-block-pricing-table-inside {
    transform: translateY(-14px);
  }
  .msr-club .gb-pricing-table-wrap > .wp-block-genesis-blocks-gb-pricing-table:nth-child(2) .gb-block-pricing-table-inside:hover {
    transform: translateY(-18px);
  }
}

/* Titel / Preis / Untertitel */
.msr-club .gb-pricing-table-title {
  font-family: var(--sans) !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
  color: var(--tinte);
  padding-bottom: 4px !important;
}
.msr-club .gb-pricing-table-price-wrap { padding-top: 6px !important; }
.msr-club .gb-pricing-table-price {
  font-family: var(--sans) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}
.msr-club .gb-pricing-table-currency,
.msr-club .gb-pricing-table-term {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  color: var(--nebel) !important;
}
.msr-club .gb-pricing-table-subtitle {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  color: var(--rot) !important;
}

/* Features: linksbuendig + rote Checkmarks statt Bullets */
.msr-club ul.gb-pricing-table-features {
  list-style: none !important;
  margin: 0 !important;
  border-top: 1px solid var(--linie);
  margin-top: 6px !important;
  flex: 1;
}
.msr-club ul.gb-pricing-table-features li {
  position: relative;
  padding-left: 30px !important;
  margin: 13px 0 0 !important;
  text-align: left !important;
  font-family: var(--sans);
  font-size: 0.98rem !important;
  line-height: 1.42;
  list-style: none !important;
}
.msr-club ul.gb-pricing-table-features li::marker { content: ""; }
.msr-club ul.gb-pricing-table-features li::before {
  content: "";
  position: absolute; left: 0; top: 0.18em;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf000c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Button */
.msr-club .gb-button {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  border-radius: 2px !important;
  padding: 14px 24px !important;
  box-shadow: 0 8px 22px -12px rgba(191, 0, 12, 0.8);
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.msr-club .gb-button:hover {
  background-color: var(--rot-glut) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(226, 16, 31, 0.85);
}
.msr-club .gb-block-button { margin-top: auto; }

/* ---------------------------------------------------------------------------
   Sektions-Ueberschriften (Callouts + Q&A)
   --------------------------------------------------------------------------- */
.msr-club h2.wp-block-heading {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--rot);
  letter-spacing: -0.01em;
  margin-top: 2.2em;
}
.msr-club h2.wp-block-heading.has-text-align-center { margin-top: 2.6em; }

/* zentrierte Info-Absaetze etwas ruhiger */
.msr-club p.has-text-align-center {
  max-width: 62ch;
  margin-inline: auto;
  color: #38302a;
}

/* ---------------------------------------------------------------------------
   Q&A: stackable Accordions als moderne Karten
   --------------------------------------------------------------------------- */
.msr-club details.stk-block-accordion {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px !important;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.msr-club details.stk-block-accordion[open] {
  border-color: rgba(191, 0, 12, 0.35);
  box-shadow: 0 16px 40px -28px rgba(191, 0, 12, 0.5);
}
.msr-club details.stk-block-accordion > summary { cursor: pointer; }
.msr-club .stk-block-accordion__heading .stk-block-heading__text {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.35;
  color: var(--tinte);
}
.msr-club .stk-block-accordion__content .stk-block-text__text {
  font-family: var(--serif);
  font-size: 1.04rem;
  line-height: 1.68;
  color: #38302a;
  max-width: 68ch;
}
/* Chevron rot einfaerben (Rotation uebernimmt stackable selbst) */
.msr-club details.stk-block-accordion .stk-block-icon svg path { fill: var(--rot) !important; }
.msr-club details.stk-block-accordion .stk-block-icon svg { color: var(--rot) !important; }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .msr-club .gb-pricing-table-wrap {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
  .msr-club .wp-block-genesis-blocks-gb-pricing { padding: 44px 18px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .msr-club * { transition: none !important; }
}