/* ═══════════════════════════════════════════════════════════════════════
   Werthandel · Rechner-Harmonisierung (Shared-Layer)
   ─────────────────────────────────────────────────────
   Bringt Brand-Rechner + Wasser-Rechner auf den Cockpit-Stil für:
     · Eyebrow-Pill (gold mit Border)
     · H2 + Lead-Block
     · Disclaimer-Box
     · CTA-Buttons (gold-Gradient mit Navy-Text)
   Naming-Präfixe (brechner-/rechner-/cockpit-) bleiben unverändert.
   Stand: 2026-05-31
   ═══════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   1. SECTION-EYEBROW (gold-Pill mit Border) — Cockpit-Stil
   ──────────────────────────────────────────────────────────────────────
   Brand:  .brechner-service-eyebrow
   Cockpit: .cockpit-section__eyebrow  (Master)
   ════════════════════════════════════════════════════════════════════════ */
.brechner-service-eyebrow,
.cockpit-section__eyebrow {
  display: inline-block !important;
  font-family: var(--mainFont, 'Montserrat', sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #6B5530 !important;
  background: rgba(184,153,104,0.10) !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
  border-radius: 50px !important;
  padding: 6px 18px !important;
  margin-bottom: 14px !important;
  text-align: center;
}
/* Reset für Brand-Rechner-Spezialitäten */
.brechner-service-eyebrow {
  margin-left: 0 !important;
  transform: none !important;
}
.brechner-service-eyebrow::before { display: none !important; }


/* ════════════════════════════════════════════════════════════════════════
   2. H2 + LEAD-BLOCK — Cockpit-Stil
   ──────────────────────────────────────────────────────────────────────
   Brand: .brechner-section .section__header h2 + .lead
   Wasser: .rechner-section .section__header h2 + .lead
   Cockpit: .cockpit-section h2 + .lead  (Master)
   ════════════════════════════════════════════════════════════════════════ */
.brechner-section .section__header h2,
.brechner-section h2,
.rechner-section .section__header h2,
.rechner-section h2,
.cockpit-section h2 {
  font-family: var(--headline, 'Mosafin', serif) !important;
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem) !important;
  color: var(--secondColor, #1A2433) !important;
  margin-bottom: 14px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

.brechner-section .lead,
.brechner-section .section__header .lead,
.rechner-section .lead,
.rechner-section .section__header .lead,
.cockpit-section .lead {
  font-size: 1.05rem !important;
  color: var(--text-soft, #4A5468) !important;
  max-width: 740px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.55 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   3. DISCLAIMER-BOX — Cockpit-Stil (Gold-Border-Left, Cream-BG, kompakt)
   ──────────────────────────────────────────────────────────────────────
   Brand: .brechner-disclaimer, .brechner-vers-info
   Wasser: .rechner-disclaimer
   Cockpit: .cockpit-disclaimer  (Master)
   ════════════════════════════════════════════════════════════════════════ */
.brechner-disclaimer,
.brechner-vers-info,
.rechner-disclaimer,
.cockpit-disclaimer {
  background: rgba(184,153,104,0.06) !important;
  border-left: 3px solid var(--highlight, #B89968) !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 12px 16px !important;
  margin-top: 18px !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  color: var(--text-soft, #4A5468) !important;
  font-style: normal !important;
}
.brechner-disclaimer strong,
.brechner-vers-info strong,
.rechner-disclaimer strong,
.cockpit-disclaimer strong {
  color: var(--secondColor, #1A2433) !important;
  font-weight: 700 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   4. CTA-BUTTONS — Gold-Gradient mit Navy-Text (Werthandel-Standard)
   ──────────────────────────────────────────────────────────────────────
   Brand: .brechner-final-cta  (war schon gold→navy — beibehalten)
   Wasser: .rechner-cta-primary, .rechner-streit-cta, .rechner-climax-cta
   Cockpit: .cockpit-lead__cta  (Master — gold-Gradient, Navy-Text)
   ════════════════════════════════════════════════════════════════════════ */
.brechner-final-cta,
.rechner-cta-primary,
.rechner-streit-cta,
.rechner-climax-cta,
.cockpit-lead__cta {
  background: linear-gradient(135deg, #B89968, #D4B47F) !important;
  color: var(--secondColor, #1A2433) !important;
  border: none !important;
  font-family: var(--mainFont, 'Montserrat', sans-serif) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  padding: 14px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 6px 18px rgba(184,153,104,0.30) !important;
}
.brechner-final-cta:hover,
.rechner-cta-primary:hover,
.rechner-streit-cta:hover,
.rechner-climax-cta:hover,
.cockpit-lead__cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(184,153,104,0.45) !important;
  color: var(--secondColor, #1A2433) !important;
  background: linear-gradient(135deg, #B89968, #D4B47F) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   5. SECTION-BACKGROUND vereinheitlichen (sanftes weiß→cream Gradient)
   Cockpit-Master.
   ════════════════════════════════════════════════════════════════════════ */
.brechner-section,
.rechner-section,
.cockpit-section {
  background: linear-gradient(180deg, #fff 0%, #FAF7F0 100%) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   6. WASSER-RECHNER section__label → Pill-Stil (scoped, kein Site-Wide-Override)
   ──────────────────────────────────────────────────────────────────────
   Wasser hat <div class="section__label">Interaktive Berechnung</div>
   als Eyebrow-Äquivalent. Nur innerhalb rechner-section überschreiben.
   ════════════════════════════════════════════════════════════════════════ */
.rechner-section .section__header .section__label {
  display: inline-block !important;
  font-family: var(--mainFont, 'Montserrat', sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #6B5530 !important;
  background: rgba(184,153,104,0.10) !important;
  border: 1px solid rgba(184,153,104,0.3) !important;
  border-radius: 50px !important;
  padding: 6px 18px !important;
  margin-bottom: 14px !important;
  /* Reset Live-Site-Stil */
  border-bottom: 1px solid rgba(184,153,104,0.3) !important;
}
.rechner-section .section__header { text-align: center; }
.rechner-section .section__header h2 { text-align: center; }
.rechner-section .section__header p { text-align: center; }

/* Brand-Page section__header analog */
.brechner-section .section__header { text-align: center; }
.brechner-section .section__header h2 { text-align: center; }
.brechner-section .section__header p { text-align: center; }


/* ════════════════════════════════════════════════════════════════════════
   7. ACTIVE-STATE der AUSWAHL-CARDS → Cockpit-Gold-Tinted
   ──────────────────────────────────────────────────────────────────────
   Vorher (Brand+Wasser): navy bg + weiße Schrift  (harter Block-Look)
   Nachher: sanfter gold-tinted bg + navy Schrift + gold border
   Klassen:
     · .brechner-typ-card    (5 große Objekttyp-Cards)
     · .brechner-kat-card    (Kategorie-Cards Brand-Rechner Frage 1)
     · .rechner-typ-card     (Wasser-Rechner Typ-Auswahl)
   ════════════════════════════════════════════════════════════════════════ */

/* Default-Border auf goldtransparent bringen */
.brechner-typ-card,
.brechner-kat-card,
.rechner-typ-card {
  background: #fff !important;
  border: 2px solid rgba(184,153,104,0.3) !important;
  color: var(--secondColor, #1A2433) !important;
  transition: all 0.2s ease !important;
}
.brechner-typ-card:hover,
.brechner-kat-card:hover,
.rechner-typ-card:hover {
  border-color: var(--highlight, #B89968) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(184,153,104,0.18) !important;
}

/* Active-State: gold-tinted */
.brechner-typ-card.active,
.brechner-kat-card.active,
.rechner-typ-card.active {
  background: linear-gradient(180deg, rgba(184,153,104,0.14), rgba(184,153,104,0.04)) !important;
  border-color: var(--highlight, #B89968) !important;
  color: var(--secondColor, #1A2433) !important;
  box-shadow: 0 6px 16px rgba(184,153,104,0.22) !important;
}
/* SVG-Strokes + Labels im aktiven State auf Navy halten (war vorher weiß) */
.brechner-typ-card.active svg,
.brechner-kat-card.active svg,
.rechner-typ-card.active svg,
.brechner-typ-card.active *,
.brechner-kat-card.active *,
.rechner-typ-card.active * {
  color: var(--secondColor, #1A2433) !important;
  stroke: var(--secondColor, #1A2433) !important;
}
.brechner-typ-card.active .brechner-typ-card__sub {
  color: var(--text-soft, #4A5468) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   8. PILL-OPTIONEN (Brand + Wasser) → Cockpit-Gold-Tinted
   ──────────────────────────────────────────────────────────────────────
   Vorher: navy bg + weiße Schrift
   Nachher: gold-tinted bg + navy Schrift + gold border
   Klassen: .brechner-pill, .rechner-pill
   ════════════════════════════════════════════════════════════════════════ */
.brechner-pill,
.rechner-pill {
  background: #fff !important;
  border: 2px solid rgba(184,153,104,0.3) !important;
  color: var(--secondColor, #1A2433) !important;
  transition: all 0.2s ease !important;
}
.brechner-pill:hover,
.rechner-pill:hover {
  border-color: var(--highlight, #B89968) !important;
  transform: translateY(-1px) !important;
}
.brechner-pill.active,
.rechner-pill.active {
  background: linear-gradient(180deg, rgba(184,153,104,0.14), rgba(184,153,104,0.04)) !important;
  border-color: var(--highlight, #B89968) !important;
  color: var(--secondColor, #1A2433) !important;
  box-shadow: 0 4px 12px rgba(184,153,104,0.20) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   9. FAQ-DROPDOWNS auf Erbe + Scheidung → 1:1 Original-Accordion-Look
   ──────────────────────────────────────────────────────────────────────
   Erbe-Page nutzt:    <details class="erbe-block"><summary>...</summary>
                       <div class="erbe-block__body">...</div></details>
   Scheidungs-Page:    <details class="scheidung-block">... analog ...
   Ziel:               EXAKT wie .accordion auf der Startseite (navy summary,
                       weiße Schrift, arrow.svg-Icon, cream Content, gold-
                       Hover/Open). Wir bauen den Look auf <details>/<summary>
                       nach, weil das die semantisch sauberere Variante ist.
   ════════════════════════════════════════════════════════════════════════ */

/* Wrapper: gleiche Gap wie .ce-accordion-inner */
.erbe-block,
.scheidung-block {
  width: 100% !important;
  overflow: hidden !important;
  border-radius: var(--borderRadius, 10px) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Default-Marker des <details>-Elements abschalten */
.erbe-block > summary,
.scheidung-block > summary {
  list-style: none !important;
}
.erbe-block > summary::-webkit-details-marker,
.scheidung-block > summary::-webkit-details-marker {
  display: none !important;
}
.erbe-block > summary::marker,
.scheidung-block > summary::marker {
  display: none !important;
  content: '' !important;
}

/* Summary == .accordion-label (1:1) */
.erbe-block > summary,
.scheidung-block > summary {
  display: block !important;
  width: 100% !important;
  padding: 20px 60px 20px 30px !important;
  font-weight: 700 !important;
  font-family: var(--headline, 'Mosafin', serif) !important;
  font-size: 17px !important;
  cursor: pointer !important;
  position: relative !important;
  box-sizing: border-box !important;
  background: var(--mainColor, #2A3140) !important;
  color: var(--contrastColorInverted, #fff) !important;
  border-radius: var(--borderRadius, 10px) !important;
  transition: var(--baseTransition, all .25s ease) !important;
  /* Reset: kein H3-Margin innerhalb summary */
  margin: 0 !important;
}
.erbe-block > summary h3,
.scheidung-block > summary h3 {
  font: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Arrow-Icon rechts (1:1 von .accordion-label::after) */
.erbe-block > summary::after,
.scheidung-block > summary::after {
  content: '' !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  background-color: #fff !important;
  -webkit-mask: url('Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat center / 14px auto !important;
          mask: url('Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat center / 14px auto !important;
  position: absolute !important;
  top: 50% !important;
  right: 30px !important;
  transform: translateY(-50%) rotate(90deg) !important;
  transition: var(--baseTransition, all .25s ease) !important;
}

/* Hover: heller Navy (wie .accordion-label:hover) */
.erbe-block > summary:hover,
.scheidung-block > summary:hover {
  background: var(--mainColorLight, #3A4358) !important;
}

/* Body == .accordion-content (geöffnet) */
.erbe-block .erbe-block__body,
.scheidung-block .scheidung-block__body {
  background: var(--greyVeryLight, #F8F4ED) !important;
  color: #53556D !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  padding: 20px 30px !important;
  border-radius: 0 0 var(--borderRadius, 10px) var(--borderRadius, 10px) !important;
  margin: 0 !important;
}
.erbe-block .erbe-block__body p,
.scheidung-block .scheidung-block__body p {
  margin: 0 0 12px 0 !important;
  color: #53556D !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.erbe-block .erbe-block__body p:last-of-type,
.scheidung-block .scheidung-block__body p:last-of-type {
  margin-bottom: 0 !important;
}
.erbe-block .erbe-block__body strong,
.scheidung-block .scheidung-block__body strong {
  color: var(--secondColor, #1A2433) !important;
  font-weight: 700 !important;
}

/* Open-State: secondColor + Pfeil rotiert + Label-Rundung oben */
.erbe-block[open] > summary,
.scheidung-block[open] > summary {
  background: var(--secondColor, #1A2433) !important;
  border-radius: var(--borderRadius, 10px) var(--borderRadius, 10px) 0 0 !important;
}
.erbe-block[open] > summary::after,
.scheidung-block[open] > summary::after {
  transform: translateY(-50%) rotate(270deg) !important;
}