/* =========================================================
   /de/preise + /ru/preise-ru — Figma Variant E adaptation
   Loaded at DOM position 4 (last in cascade on price pages).
   Inherits CSS variables from design-system.css (:root).
   Critical CSS overrides work by cascade position (pos 4 >
   pos 1) at equal specificity; no !important needed except
   for inline DB styles on price elements.
   ========================================================= */

/* ── 1. Price category cards ───────────────────────────── */
.item-block-wrap {
  background:    #ffffff;
  border-radius: var(--pa-radius-card);
  border:        1px solid var(--pa-border);
  box-shadow:    var(--pa-shadow-card);
  padding:       28px 20px !important;
  transition:    box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/*
  Override style.min.css hover rule: { background-color: #ddd; border-radius: 40px }
  Re-assert background and border-radius so the global grey-pill never applies.
*/
.item-block-wrap:hover,
.item-block-wrap:focus {
  background:    #ffffff;
  border-radius: var(--pa-radius-card);
  border-color:  var(--pa-accent);
  box-shadow:    0 4px 16px rgba(0, 0, 0, .10);
  transform:     translateY(-2px);
}

.item-block-wrap:active {
  background:    #ffffff;
  border-radius: var(--pa-radius-card);
  border-color:  var(--pa-accent);
  box-shadow:    var(--pa-shadow-card);
  transform:     translateY(0);
}

.item-block-title {
  color:         var(--pa-primary);
  font-size:     20px !important;
  font-weight:   700;
  margin-bottom: 10px;
}

/* Description row */
.item-block-wrap .item-block-row:not(:last-child) {
  font-size:   14px !important;
  color:       var(--pa-text-muted) !important;
  font-weight: 400 !important;
  padding:     8px 0 !important;
  line-height: 22px !important;
}

/* Price row: override inline DB colors (#4f84e5 / #9357cc / #2cc99d)
   and inline font-size/weight */
.item-block-wrap .item-block-row:last-child {
  color:       var(--pa-accent) !important;
  font-size:   26px !important;
  font-weight: 700 !important;
}

/* ── 2. Trust strip — icon + text badges ───────────────── */

/*
  Suppress .page-title's border-bottom on preise pages so both dividers
  (top + bottom) live on .trust-strip and always share identical width.
  preise-anthracite.css loads at cascade position 4 → overrides style.min.css.
*/
.page-title { border-bottom: none; }

.trust-strip {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     center;
  gap:             6px 20px;
  font-size:       13px;
  color:           var(--pa-text-muted);
  border-top:      1px solid var(--pa-border);
  border-bottom:   1px solid var(--pa-border);
  padding-top:     14px;
  padding-bottom:  14px;
  margin-top:      18px;
  margin-bottom:   18px;
  /* remove inherited p margins */
  padding-left:    0;
  list-style:      none;
}

.trust-item {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  white-space: nowrap;
}

.trust-item .fa {
  color:     var(--pa-accent);
  font-size: 13px;
}

/* ── Mobile marquee (≤767 px) ──────────────────────────── */
@keyframes pa-trust-scroll {
  to { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  /* Fallback: horizontal scroll (no-JS or prefers-reduced-motion) */
  .trust-strip {
    flex-wrap:          nowrap;
    overflow-x:         auto;
    overflow-y:         hidden;
    justify-content:    flex-start;
    gap:                0 22px;
    scrollbar-width:    none;
    -ms-overflow-style: none;
    padding-left:       2px;
    padding-right:      2px;
  }
  .trust-strip::-webkit-scrollbar { display: none; }

  /* When JS creates .trust-track: switch to marquee */
  .trust-strip:has(.trust-track) {
    overflow: hidden;
    gap:      0;
  }
  .trust-track {
    display:     flex;
    align-items: center;
    gap:         0 28px;
    width:       max-content;
    flex-shrink: 0;
    animation:   pa-trust-scroll 24s linear infinite;
    will-change: transform;
  }
}

/* Reduced motion: kill animation, let strip scroll */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .trust-strip:has(.trust-track) { overflow-x: auto; }
  .trust-track                   { animation: none; }
}

/* ── 3. Calculator wrapper ─────────────────────────────── */

/*
  style.min.css: .calc-wrap { max-width:570px; background:#eee; padding:25px }
  Override: wider, white, generous inner spacing.
*/
.calc-wrap {
  background:    #ffffff;
  border:        2px solid var(--pa-accent);
  border-radius: var(--pa-radius-card);
  max-width:     none;
  width:         100%;
  box-sizing:    border-box;
  padding:       32px 36px;
}

/* Tighten form row spacing (style.min.css: padding:0 10px; margin:10px 0) */
.calc-wrap .form-group {
  margin:  10px 0;
  padding: 0;
}

/* Labels: slightly smaller than 16px global rule, bolder, anthracite */
.calc-wrap .form-group-row label {
  font-size:   15px;
  font-weight: 600;
  color:       var(--pa-primary);
}

/*
  Inputs: style.min.css .calc-form input { height:35px; border-radius:3px; border:#b5b5b5 }
  Override to taller, rounded, gold focus ring.
*/
.calc-wrap .calc-form input {
  height:        46px;
  background:    #f3f4f6;
  border:        1px solid var(--pa-border);
  border-radius: var(--pa-radius-card);
  font-size:     15px;
  box-sizing:    border-box;
  transition:    border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.calc-wrap .calc-form input:focus {
  border-color: var(--pa-accent);
  background:   #ffffff;
  outline:      0;
  box-shadow:   0 0 0 3px rgba(201, 166, 102, .18);
}

/* Select dropdown — consistent with inputs */
.calc-wrap .calc-form .select {
  height:        46px;
  background:    #f3f4f6;
  border:        1px solid var(--pa-border);
  border-radius: var(--pa-radius-card);
  font-size:     15px;
  color:         var(--pa-primary);
  box-sizing:    border-box;
  cursor:        pointer;
  transition:    border-color .15s ease, background .15s ease;
}

.calc-wrap .calc-form .select:focus {
  border-color: var(--pa-accent);
  background:   #ffffff;
  outline:      0;
  box-shadow:   0 0 0 3px rgba(201, 166, 102, .18);
}

/* Unit label (m², St.): muted, small, vertically aligned with 46px input */
.calc-wrap .form-right {
  font-size:   13px;
  font-weight: 500;
  color:       var(--pa-text-muted);
  line-height: 46px;
  width:       40px;
}

/* Fix oversized 69 × 29 px global checkbox rule */
.calc-wrap input[type="checkbox"] {
  width:        20px;
  height:       20px;
  margin-right: 8px;
  cursor:       pointer;
}

/* ── 4. Result display ─────────────────────────────────── */

/*
  style.min.css: .cal-results-wrap { font-size:20px; color:#09ac3f }
  Specificity (1,1,0) here beats (0,1,0) there.
*/
.cal-results-wrap:not(#additional-label) {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  background:     var(--pa-primary);
  border:         none;
  border-radius:  var(--pa-radius-card);
  padding:        24px 20px;
  font-size:      32px;
  font-weight:    700;
  color:          #ffffff;
  margin-top:     20px;
}

/* Eyebrow label above price — JS now outputs only the numeric value */
html[lang="de"] .cal-results-wrap:not(#additional-label)::before { content: 'Geschätzter Preis'; }
html[lang="ru"] .cal-results-wrap:not(#additional-label)::before { content: 'Ориентировочная цена'; }

.cal-results-wrap:not(#additional-label)::before {
  display:        block;
  font-size:      11px;
  font-weight:    600;
  color:          rgba(255, 255, 255, .75);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom:  8px;
}

/* MwSt. secondary note below result */
div#additional-label {
  font-size:   12px;
  font-weight: 400;
  color:       var(--pa-text-muted);
  background:  transparent;
  border:      0;
  padding:     4px 0 0;
  text-align:  center;
  margin-top:  8px;
}

/* ── 5. Endverbraucher brutto box (shown via JS) ───────── */
#brutto-result {
  background:   var(--pa-primary) !important;
  border-color: transparent !important;
  color:        #ffffff !important;
}

/* ── 6. Alert / footnote block ─────────────────────────── */
.alert-block { background: var(--pa-bg-alt); }

.alert-block .calc-notes-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        8px;
}

.alert-block .calc-notes-list li {
  position:    relative;
  padding-left: 1.4em;
  line-height: 1.55;
  font-size:   0.95em;
  color:       var(--pa-text, #263445);
}

.alert-block .calc-notes-list li::before {
  content:  '●';
  position: absolute;
  left:     0;
  top:      0;
  color:    var(--pa-accent, #D0AB62);
  font-size: 0.65em;
  line-height: 2.4;
}

.alert-block .calc-notes-list li strong {
  font-weight: 700;
  color:       var(--pa-primary, #263445);
}

/* ── 6b. "Fragen zum Rechner?" — merged with alert-block ── */
/* Targets the .text-content immediately after .alert-block.
   Overrides the white-bg rule from ⑤ via cascade position.   */
html:has(.calculator-layout) .alert-block + .text-content {
  background: var(--pa-bg-alt);
  border-top: none;
}

html:has(.calculator-layout) .alert-block + .text-content .uibox-container {
  border-bottom: none !important;
  padding-top:    16px;
  padding-bottom: 20px;
}

html:has(.calculator-layout) .alert-block + .text-content p {
  margin:      0;
  font-size:   0.875em;
  line-height: 1.75;
  color:       var(--pa-text, #263445);
}

html:has(.calculator-layout) .alert-block + .text-content strong {
  font-size:   1em;
  font-weight: 600;
  color:       var(--pa-primary, #263445);
}

html:has(.calculator-layout) .alert-block + .text-content .fa {
  font-size:    0.85em;
  margin-right: 4px;
  color:        var(--pa-accent, #D0AB62);
}

html:has(.calculator-layout) .alert-block + .text-content a {
  color:           var(--pa-primary, #263445);
  text-decoration: none;
}

html:has(.calculator-layout) .alert-block + .text-content a:hover {
  color:           var(--pa-accent, #D0AB62);
  text-decoration: underline;
}

/* ── 7. Calc offer CTA — right-column panel ────────────────
   Single-column card: heading + body text above form.
   Sits in the right grid column of .calc-layout on desktop.
   style.min.css also defines .calc-offer-cta* rules — cascade
   position (this file loads last) gives us the override without
   !important except for the purple box-shadow on .btn.
   ─────────────────────────────────────────────────────── */

.calc-offer-cta__phone,
.calc-offer-cta__divider { display: none !important; }

/* Outer wrapper — grid item in .calc-layout right column */
.calc-offer-cta {
  width:      100%;
  max-width:  none;
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

/* Card body: single-column vertical stack (right-side panel) */
.calc-offer-cta__body {
  display:        flex;
  flex-direction: column;
  gap:            20px;
  align-items:    stretch;
  background:     #ffffff;
  border:         2px solid var(--pa-accent);
  border-radius:  var(--pa-radius-card);
  box-shadow:     none;
  padding:        28px 24px;
  height:         100%;
  box-sizing:     border-box;
}

/* Left: headline + body text, naturally centered by grid align-items */
.calc-offer-cta__col-text {
  display: block;
}

/* Right: form column */
.calc-offer-cta__col-form {
  display: block;
}

/* Heading: warm gold */
.calc-offer-cta__heading {
  font-size:   20px;
  font-weight: 700;
  line-height: 1.3;
  color:       var(--pa-accent);
  margin:      0 0 14px;
}

/* Body text */
.calc-offer-cta__text {
  font-size:   14px;
  line-height: 1.7;
  color:       var(--pa-text-muted);
  margin:      0;
}

/* Legacy selector from old markup — zeroed defensively */
.calc-offer-cta__content {
  flex:       none;
  padding:    0;
  background: none;
  border:     none;
  box-shadow: none;
}

/* Form: vertical block */
.calc-offer-cta__form {
  margin:  0;
  display: block;
}

/* Each field: label stacked above input */
.calc-offer-cta__row {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  margin:         0 0 12px;
}

/* Visible label above input */
.calc-offer-cta__label {
  display:     block;
  font-size:   13px;
  font-weight: 600;
  color:       var(--pa-text);
  line-height: 1.3;
}

/* Input fields: light gray bg, subtle border */
.calc-offer-cta__form input[type="text"],
.calc-offer-cta__form input[type="tel"],
.calc-offer-cta__form input[type="email"] {
  width:         100%;
  height:        42px;
  padding:       0 13px;
  border:        1px solid #e2e3e5;
  border-radius: var(--pa-radius-btn);
  background:    #f3f4f6;
  color:         var(--pa-text);
  font-size:     14px;
  font-family:   inherit;
  box-sizing:    border-box;
  transition:    border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.calc-offer-cta__form input:focus {
  border-color: var(--pa-accent);
  background:   #fff;
  outline:      0;
  box-shadow:   0 0 0 3px rgba(201, 166, 102, .15);
}

/* Submit button.
   style.min.css: background: purple-gradient; box-shadow: 0 10px 22px rgba(139,87,212,.2);
   max-width: 390px; margin: 14px auto 0 — all overridden here. */
.calc-offer-cta__btn {
  display:            block;
  width:              100%;
  max-width:          none;
  margin:             16px 0 0;
  padding:            12px 18px;
  background:         var(--pa-accent);
  border:             0;
  border-radius:      var(--pa-radius-btn);
  color:              #fff !important;
  font-size:          15px;
  font-weight:        700;
  font-family:        inherit;
  text-align:         center;
  text-shadow:        none;
  box-shadow:         none;
  filter:             none;
  cursor:             pointer;
  transition:         background .2s ease;
  -webkit-appearance: none;
  appearance:         none;
}

.calc-offer-cta__btn:hover,
.calc-offer-cta__btn:focus,
.calc-offer-cta__btn:active {
  background:  var(--pa-accent-dark);
  box-shadow:  none;
  filter:      none;
  transform:   none;
  outline:     none;
  text-shadow: none;
}

/* Note — not in DE markup; hidden for RU */
.calc-offer-cta__note { display: none; }

/* Error */
.calc-offer-cta__error { color: #c92a2a; font-size: 14px; margin-top: 8px; }

/* Success box */
.offer-success-box { max-width: none; margin: 8px 0 0; }

.offer-success-box__inner {
  position:       relative;
  border-radius:  var(--pa-radius-card);
  background:     #ffffff;
  border:         1px solid var(--pa-border);
  padding:        28px 24px;
  box-shadow:     0 2px 12px rgba(0, 0, 0, .07);
  text-shadow:    none;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            14px;
}

/* close button is position:absolute → out of flex flow */
.offer-success-box__close {
  position:      absolute;
  top:           10px;
  right:         10px;
  background:    transparent;
  border:        0;
  color:         var(--pa-text-muted);
  font-size:     20px;
  line-height:   1;
  cursor:        pointer;
  width:         28px;
  height:        28px;
  padding:       0;
  border-radius: 50%;
}

.offer-success-box__close:hover {
  background: var(--pa-bg-alt);
  color:      var(--pa-text);
}

/* DOM order: title(1) → text(2) → icon(3); flex reorders to 1 → 3 → 2 */
.offer-success-box__title {
  font-size:    20px;
  font-weight:  700;
  color:        var(--pa-accent);
  text-shadow:  none;
  order:        1;
  margin:       0;
}

.offer-success-box__icon {
  width:           54px;
  height:          54px;
  font-size:       28px;
  border:          2px solid var(--pa-accent);
  border-radius:   50%;
  color:           var(--pa-accent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  order:           2;
}

.offer-success-box__text {
  font-size:    16px;
  color:        var(--pa-text-muted);
  order:        3;
  margin:       0;
  word-spacing: normal;
}

/* ── 9. Room diagram (SVG replacement) ─────────────────── */
.room-diagram {
  margin:  16px 0;
  display: block;
}

.room-diagram svg {
  max-width: 100%;
  height:    auto;
}

.room-diagram figcaption {
  font-size:  13px;
  color:      var(--pa-text-muted);
  margin-top: 8px;
  text-align: center;
}

/* ── 10. Reviews section (Figma Variant E) ─────────────── */
.section-reviews-pa {
  background: var(--pa-bg-alt);
  padding:    48px 0;
}

.section-reviews-pa__title {
  font-size:     26px;
  font-weight:   700;
  color:         var(--pa-text);
  margin:        0 0 28px;
  text-align:    left;
}

.section-reviews-pa__list {
  align-items: stretch !important;
  margin:      0 0 20px;
}

.section-review-pa-item { padding: 0 8px 16px; }

.section-review-pa-card {
  background:    #fff;
  border:        1px solid var(--pa-border);
  border-radius: var(--pa-radius-card);
  box-shadow:    var(--pa-shadow-card);
  padding:       20px;
  height:        100%;
  display:       flex;
  flex-direction: column;
  gap:           8px;
}

.review-pa-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             8px;
  flex-wrap:       wrap;
}

.review-pa-author {
  font-weight: 600;
  font-size:   15px;
  color:       var(--pa-text);
}

.review-pa-stars { display: flex; gap: 2px; }

.review-pa-star {
  font-size: 16px;
  color:     var(--pa-border);
}

.review-pa-star--gold { color: var(--pa-accent); }

.review-pa-date {
  font-size: 12px;
  color:     var(--pa-text-muted);
}

.review-pa-text {
  font-size:   14px;
  color:       var(--pa-text-muted);
  line-height: 22px;
  flex:        1;
  white-space: pre-line;
}

.section-reviews-pa__meta {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            16px;
  padding-top:    16px;
  border-top:     1px solid var(--pa-border);
}

.section-reviews-pa__aggregate {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   15px;
  color:       var(--pa-text);
}

.section-reviews-pa__aggregate .review-pa-star { font-size: 22px; }
.section-reviews-pa__aggregate strong          { font-size: 20px; font-weight: 700; }

.review-pa-meta-label { color: var(--pa-text-muted); font-size: 14px; }

.section-reviews-pa__btns {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
}

.section-reviews-pa__btns .link-btn {
  padding:   10px 24px;
  font-size: 15px;
}

/* ── 11. Contact CTA (Figma du() section) ───────────────── */
.preise-contact-cta {
  background: var(--pa-bg-alt);
  padding:    48px 0;
  border-top: 1px solid var(--pa-border);
}

.preise-contact-cta__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   24px;
}

.preise-contact-cta__card {
  background:    var(--pa-bg);
  border:        1px solid var(--pa-border);
  border-radius: var(--pa-radius-card);
  box-shadow:    var(--pa-shadow-card);
  padding:       28px 24px;
  display:       flex;
  flex-direction: column;
  gap:           12px;
}

.preise-contact-cta__title {
  font-size:   20px;
  font-weight: 700;
  color:       var(--pa-primary);
  margin:      0;
  text-align:  left;
}

.preise-contact-cta__text {
  font-size:   15px;
  color:       var(--pa-text-muted);
  line-height: 24px;
  margin:      0;
  flex:        1;
}

/* Mobile breakpoint blocks moved to section 17 (end of file)
   so they appear AFTER all desktop rules they override. */

/* ── 12. Calculator heading ─────────────────────────────── */
.calc-heading {
  font-size:      20px;
  font-weight:    700;
  color:          var(--pa-primary);
  text-align:     center;
  margin:         0 0 20px;
  padding-bottom: 16px;
  border-bottom:  1px solid var(--pa-border);
  letter-spacing: -0.01em;
}

/* ── 13. Calculator outer two-column layout (desktop ≥ 992px) ── */
/* .calc-layout = grid item wrapper inside .uibox-container;
   left: .calc-wrap (form), right: .calc-offer-cta (CTA).        */
.calc-layout {
  max-width: 1160px;
  margin:    0 auto;
}

@media (min-width: 992px) {
  .calc-layout {
    display:               grid;
    grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.6fr);
    gap:                   44px;
    align-items:           start;
  }
}

/* ── 13b. Calculator input grid — one column ───────────── */
.calc-fields-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   16px;
  margin-bottom:         20px;
}

.calc-field-item {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.calc-field-item > label,
.calc-field-item .calc-checkbox-text {
  font-size:   14px;
  font-weight: 600;
  color:       var(--pa-primary);
  margin:      0;
  line-height: 1.4;
}

/* Align checkbox item vertically to center of its half-row */
.calc-field-item--checkbox {
  justify-content: center;
}

/* Input + unit side by side */
.calc-input-row {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.calc-input-row .calc-input { flex: 1; min-width: 0; }

.calc-unit {
  font-size:   13px;
  font-weight: 500;
  color:       var(--pa-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width:   28px;
}

.calc-hint {
  display:     block;
  font-size:   12px;
  color:       var(--pa-text-muted);
  margin:      0;
  line-height: 1.4;
}

/* Checkbox row */
.calc-checkbox-label {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  cursor:      pointer;
  margin:      0;
  padding-top: 4px;
}

.calc-checkbox-label small { font-size: 12px; color: var(--pa-text-muted); }

/* Select full-width inside grid cell */
.calc-field-item .custom-select { width: 100%; position: relative; }

.calc-field-item .custom-select .select { width: 100%; padding: 0 36px 0 12px; }

/* Center the dropdown chevron for the taller 46px field
   (critical CSS locks top:5px !important — override it here) */
.calc-field-item .custom-select .fa {
  top:       50% !important;
  transform: translateY(-50%);
}

/* ── 16. Page background — Figma Variant E warm off-white ── */

/*
  .calculator-layout only exists on /de/preise and /ru/preise-ru.
  Using :has() here safely scopes the background to those pages only,
  with no impact on any other page that also loads this stylesheet.
  White card elements (.calc-wrap, .item-block-wrap, review cards, etc.)
  already have explicit background: #fff set above — they float correctly
  on the warm off-white body.
*/
html:has(.calculator-layout) body {
  background: var(--pa-bg-alt);
}

/* ── 18. Page-wide section background rhythm — Figma Var E ──
   html:has(.calculator-layout) scopes every rule to
   /de/preise + /ru/preise-ru only — unaffected on all others.

   Rhythm (top → bottom):
     ①  Hero / intro  (trust-strip section)     → #fff
     ②  Category cards  (.section-blocks)        → --pa-bg-alt ✓
     ③  Calculator section                       → #fff
     ④  Alert / footnote  (.alert-block)         → --pa-bg-alt ✓
     ⑤  Main SEO text  (.text-content)           → #fff
     ⑥  Reviews                                  → --pa-bg-alt ✓
     ⑦⑧ Sub-content sections (.section-text)    → #fff
     ⑨  Contact CTA  (.preise-contact-cta)       → --pa-bg-alt ✓
     ⑩  Share row                                → #fff
     ⑪  Action CTA  (.action-section)            → --pa-bg-alt ✓
     ⑫  Contact form  (.feedback-section)        → --pa-bg-alt ✓
   ─────────────────────────────────────────────────────────── */

/* ① Hero / intro — white panel */
html:has(.calculator-layout) .content-section:has(.trust-strip) {
  background: #ffffff;
}

/* ③ Calculator — white panel; calc-wrap stands out via gold border */
html:has(.calculator-layout) .content-section:has(.calculator-layout) {
  background:  #ffffff;
  border-top:  1px solid var(--pa-border);
}

/* ⑤ Main SEO text block (standalone .text-content, not the alert) */
html:has(.calculator-layout) .text-content:not(.alert-block) {
  background:  #ffffff;
  border-top:  1px solid var(--pa-border);
}

/* ④b "Fragen zum Rechner?" — directly after alert-block ④,
   must share --pa-bg-alt. Placed AFTER rule ⑤ (same specificity
   → later position wins the cascade). */
html:has(.calculator-layout) .alert-block + .text-content {
  background: var(--pa-bg-alt);
  border-top: none;
}

html:has(.calculator-layout) .alert-block + .text-content .uibox-container {
  border-bottom: none !important;
  padding-top:    16px;
  padding-bottom: 20px;
}

/* ⑦⑧ Content-sections enclosing SEO text sub-sections */
html:has(.calculator-layout) .content-section:has(.section-text) {
  background:  #ffffff;
  border-top:  1px solid var(--pa-border);
}

/* ⑥ Reviews: add top border so white-to-off-white is clean */
html:has(.calculator-layout) .section-reviews-pa {
  border-top: 1px solid var(--pa-border);
}

/* ⑨ Contact CTA already has border-top in preise-anthracite.css ✓ */

/* ⑩ Share row — white strip with top/bottom borders */
html:has(.calculator-layout) .share-layout {
  background:    #ffffff;
  padding:       24px 0;
  border-top:    1px solid var(--pa-border);
  border-bottom: 1px solid var(--pa-border);
}

/* ── 16b. Was ist im Preis enthalten? — two-card layout ──────
   Block lives in DB (resource id=3) for both DE and RU.
   Two-column card grid on desktop; stacks on mobile ≤640px.
   pa-section.pa-section-white wraps the block — selectors scoped
   to avoid .text-content cascade conflicts from section 6b.
   ─────────────────────────────────────────────────────────── */

.price-includes-block {
  padding: 0;
}

/* Eyebrow / overline label */
.price-includes__eyebrow {
  text-align:     center;
  font-size:      0.70rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--pa-accent);
  margin:         0 0 10px;
}

.price-includes__heading {
  text-align:    center;
  margin-top:    0;
  margin-bottom: 0;
  color:         var(--pa-text);
}

/* ── Two-card grid ── */
.price-includes__cards {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   24px;
  margin-top:            28px;
}

/* Individual card */
.price-includes__card {
  background:    #ffffff;
  border:        1px solid #dcd5c8;
  border-radius: 12px;
  box-shadow:    0 2px 14px rgba(0, 0, 0, .09);
  padding:       28px 24px;
}

/* Card title row (icon + text) */
.price-includes__card-title {
  display:       flex;
  align-items:   center;
  gap:           10px;
  font-size:     1rem;
  font-weight:   700;
  color:         var(--pa-primary);
  margin:        0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pa-border);
}

/* Title icon — included (green) */
.pa-section .price-includes__card-icon .fa {
  font-size:    18px;
  color:        #10b981;
  margin-right: 0;
}

/* Title icon — excluded (muted) */
.pa-section .price-includes__card-icon--excluded .fa {
  font-size:    18px;
  color:        var(--pa-text-muted);
  opacity:      0.7;
  margin-right: 0;
}

/* Excluded item: minus icon muted */
.pa-section .price-includes__check-icon--excluded .fa {
  color:        var(--pa-text-muted);
  font-size:    14px;
  opacity:      0.60;
  margin-right: 0;
}

/* Inline note (small muted parenthetical) */
.price-includes__note {
  font-size:   0.85em;
  color:       var(--pa-text-muted);
  font-weight: 400;
}

.price-includes__list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap: 13px;
}

.price-includes__item {
  display:               grid;
  grid-template-columns: 24px 1fr;
  column-gap:            14px;
  align-items:           start;
}

/* Override section-6b .fa color (gold) — green checkmarks */
.text-content .price-includes__check-icon .fa {
  color:       #10b981;
  font-size:   14px;
  margin-right: 0;
}

.price-includes__check-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  min-width:       24px;
  height:          1.5em;
  line-height:     1;
  padding-top:     0.10em;
  margin-top:      0;
}

/* Reset <p> margin for all contexts (pa-section cards + text-content fallback).
   Browser default <p> top-margin was pushing text below the icon. */
.price-includes__item p {
  margin:      0;
  line-height: 1.55;
  font-size:   0.975em;
  color:       var(--pa-text);
}

/* Override section-6b p font-size (0.875em → normal) — kept for cascade safety */
.text-content .price-includes__item p {
  margin:      0;
  line-height: 1.55;
  font-size:   0.975em;
  color:       var(--pa-text);
}

/* "Nicht enthalten" separator row */
.price-not-included {
  display:               grid;
  grid-template-columns: 24px 1fr;
  column-gap:            14px;
  align-items:           start;
  margin-top:            16px;
  padding-top:           14px;
  border-top:            1px solid var(--pa-border);
}

.text-content .price-not-included__icon .fa {
  color:       var(--pa-text-muted);
  font-size:   14px;
  margin-right: 0;
  opacity:     0.55;
}

.price-not-included__icon {
  width:           24px;
  height:          24px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-top:      1px;
}

.text-content .price-not-included p {
  margin:      0;
  line-height: 1.55;
  font-size:   0.875em;
  color:       var(--pa-text-muted);
}

/* ── 16b responsive ─────────────────────────────────────────── */

/* Tablet narrow (≤900px): reduce card gap */
@media (max-width: 900px) {
  .price-includes__cards {
    gap: 16px;
  }
}

/* Mobile (≤640px): stack cards */
@media (max-width: 640px) {
  .price-includes__cards {
    grid-template-columns: 1fr;
    gap:                   16px;
    margin-top:            20px;
  }
  .price-includes__card {
    padding: 22px 18px;
  }
}

/* Mobile small (≤480px): tighter icon gap in lists */
@media (max-width: 480px) {
  .price-includes__item {
    grid-template-columns: 22px 1fr;
    column-gap:            10px;
  }
}

/* ── 16c. Price callout box (Section 2) ─────────────────────
   Off-white highlight box for the avg. price range statement.
   Scoped to pages that carry .calculator-layout (price pages).
   ─────────────────────────────────────────────────────────── */
.price-callout {
  background:    #f8f6f2;
  border:        1px solid #e8e0d0;
  border-left:   3px solid var(--pa-accent);
  border-radius: 6px;
  padding:       18px 22px;
  margin:        20px 0;
}

.price-callout p {
  margin:      0;
  font-size:   1em;
  line-height: 1.65;
  color:       var(--pa-text);
}

/* Override the .text-content p font-size shrink rule from section 6b */
html:has(.calculator-layout) .text-content .price-callout p {
  font-size:   0.975em;
  line-height: 1.65;
}

/* ── 19. Warum Kunden – Figma feature grid (Variant E) ──────
   2×2 icon-feature grid with anthracite/gold icon badges,
   two-tone CTA buttons, no heavy shadows, no blue headings.
   Scoped via .warum-kunden-block so it can sit inside any
   existing .text-content / .section-text wrapper.
   ─────────────────────────────────────────────────────────── */

.warum-kunden-block {
  padding: 8px 0 4px;
}

.warum-kunden-block__heading {
  font-size:     26px;
  font-weight:   700;
  color:         var(--pa-primary);
  margin:        0 0 28px;
  line-height:   1.25;
  letter-spacing: -0.01em;
}

/* ── Feature grid: 2 columns desktop ── */
.warum-kunden-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   22px 32px;
  margin-bottom:         28px;
}

/* ── Feature item: icon left + body right ── */
.warum-kunden-item {
  display:     flex;
  align-items: flex-start;
  gap:         15px;
}

/* ── Circular icon badge ── */
.warum-kunden-icon {
  flex-shrink:     0;
  width:           46px;
  height:          46px;
  border-radius:   50%;
  background:      #f3f0eb;
  border:          1px solid #e8e0d0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-top:      1px;
}

/* Override any ancestor .fa gold rule — keep consistent accent */
.warum-kunden-icon .fa {
  font-size:    18px;
  color:        var(--pa-accent);
  margin-right: 0 !important;  /* kill global .fa margin-right if set */
}

/* ── Feature copy ── */
.warum-kunden-item__body {
  flex: 1;
  min-width: 0;
}

.warum-kunden-item__title {
  font-size:     16px;
  font-weight:   700;
  color:         var(--pa-primary);
  margin:        0 0 5px;
  line-height:   1.3;
}

.warum-kunden-item__text {
  font-size:   14px;
  line-height: 1.65;
  color:       var(--pa-text-muted);
  margin:      0;
}

/* Override the 0.875em shrink that .text-content applies to all <p> */
html:has(.calculator-layout) .text-content .warum-kunden-item__text {
  font-size:   14px;
  line-height: 1.65;
}

/* ── Prose below the grid ── */
.warum-kunden-text {
  margin-bottom: 24px;
}

.warum-kunden-text p {
  font-size:   15px;
  line-height: 1.72;
  color:       var(--pa-text-muted);
  margin:      0 0 10px;
}

html:has(.calculator-layout) .text-content .warum-kunden-text p {
  font-size:   0.9375em;  /* ~15px at 16px base, matching visual */
  line-height: 1.72;
}

.warum-kunden-text p:last-child { margin-bottom: 0; }

/* ── CTA button row ── */
.warum-kunden-cta {
  display:     flex;
  gap:         12px;
  flex-wrap:   wrap;
  align-items: center;
  margin-top:  4px;
}

.warum-kunden-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         11px 24px;
  border-radius:   var(--pa-radius-btn, 6px);
  font-size:       14px;
  font-weight:     600;
  font-family:     inherit;
  line-height:     1.3;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background .18s ease, color .18s ease, border-color .18s ease;
  cursor:          pointer;
}

/* Button 1: dark anthracite fill, white text */
.warum-kunden-btn--primary {
  background:   var(--pa-primary, #263445);
  color:        #ffffff !important;
  border:       2px solid var(--pa-primary, #263445);
}

.warum-kunden-btn--primary:hover,
.warum-kunden-btn--primary:focus {
  background:   #1a2535;
  border-color: #1a2535;
  color:        #ffffff !important;
  text-decoration: none;
}

/* Button 2: white fill, anthracite border + text */
.warum-kunden-btn--secondary {
  background:   #ffffff;
  color:        var(--pa-primary, #263445) !important;
  border:       2px solid var(--pa-primary, #263445);
}

.warum-kunden-btn--secondary:hover,
.warum-kunden-btn--secondary:focus {
  background:   var(--pa-bg-alt, #f7f5f1);
  color:        var(--pa-primary, #263445) !important;
  border-color: var(--pa-primary, #263445);
  text-decoration: none;
}

/* ── 20. Raumgröße-Preis infographic figure ─────────────────── */
.price-room-diagram {
  margin:  24px 0 20px;
  padding: 0;
}

.price-room-diagram img {
  display:       block;
  max-width:     100%;
  height:        auto;
  margin:        0 auto;
  border-radius: 6px;
}

.price-room-diagram-caption {
  background:    #f8f6f2;
  border:        1px solid #e8e0d0;
  border-left:   3px solid var(--pa-accent, #D0AB62);
  border-radius: 6px;
  padding:       14px 18px;
  margin-top:    12px;
  font-size:     14px;
  line-height:   1.65;
  color:         var(--pa-text, #263445);
}

html:has(.calculator-layout) .text-content .price-room-diagram-caption {
  font-size:   0.9em;
  line-height: 1.65;
}

/* ── 17. Responsive breakpoints ─────────────────────────────
   All blocks sit AFTER their desktop counterparts.
   Equal-specificity rules later in source order win; placing
   media queries before desktop declarations would let the
   unconditional rule silently override the mobile one.
   ─────────────────────────────────────────────────────────── */

/* ── ≤ 767 px (mobile + small tablet) ─────────────────────── */
@media (max-width: 767px) {

  /* Calculator card: full-width with comfortable padding.
     72 px bottom clears the fixed WhatsApp button
     (position:fixed; bottom:65px; right:10px; 50×50 px). */
  .calc-wrap {
    padding:    20px 16px 72px;
    max-width:  100%;
    width:      100%;
    box-sizing: border-box;
  }

  /* Single-column grid — overrides desktop "1fr 1fr".
     MUST appear after the desktop .calc-fields-grid rule. */
  .calc-fields-grid {
    grid-template-columns: 1fr;
    gap:                   14px;
  }

  /* Every field item fills full card width */
  .calc-field-item {
    width: 100%;
  }

  /* Select wrapper and element: full width */
  .calc-field-item .custom-select {
    width: 100%;
  }
  .calc-field-item .custom-select .select {
    width:      100%;
    box-sizing: border-box;
  }

  /* Input row: container full width; input takes the flex remainder */
  .calc-input-row {
    width: 100%;
  }
  .calc-input-row .calc-input {
    flex:       1;
    min-width:  0;
    width:      100%;
    box-sizing: border-box;
  }

  /* Result box: slightly smaller font, full width */
  .cal-results-wrap:not(#additional-label) {
    font-size:  26px;
    padding:    18px 14px;
    width:      100%;
    box-sizing: border-box;
    margin-top: 16px;
  }

  /* Offer CTA: compact padding on mobile; stacked below calc-wrap.
     style.min.css mobile rule may add text-align:center + align-items:center
     — override both so content stays left-aligned. */
  .calc-offer-cta {
    margin-top: 24px;
  }

  .calc-offer-cta__body {
    gap:        16px;
    padding:    20px 16px;
    text-align: left;
    align-items: stretch;
    height:     auto;
  }

  .calc-offer-cta__heading,
  .calc-offer-cta__text,
  .calc-offer-cta__label {
    text-align: left;
  }

  /* Button text stays centered inside the full-width button */
  .calc-offer-cta__btn {
    text-align: center;
  }
}

/* ── Warum Kunden: tablet 768–900 px ───────────────────────── */
@media (min-width: 768px) and (max-width: 900px) {
  .warum-kunden-grid {
    gap: 18px 20px;
  }
  .warum-kunden-icon {
    width:  40px;
    height: 40px;
  }
  .warum-kunden-icon .fa { font-size: 16px; }
}

/* ── Warum Kunden: mobile ≤ 767 px ─────────────────────────── */
@media (max-width: 767px) {
  .warum-kunden-grid {
    grid-template-columns: 1fr;
    gap:                   18px;
  }
  .warum-kunden-cta {
    flex-direction: column;
    align-items:    stretch;
  }
  .warum-kunden-btn {
    width:      100%;
    text-align: center;
  }
}

/* ── Figure: mobile ≤ 767 px ───────────────────────────────── */
@media (max-width: 767px) {
  .price-room-diagram          { margin: 20px 0 16px; }
  .price-room-diagram-caption  { padding: 12px 14px; font-size: 13px; }
}

/* ── ≤ 900 px (tablet): 2-column review cards ──────────────── */
@media (max-width: 900px) {
  .section-reviews-pa__list .section-review-pa-item { width: 50%; }
}

/* ── ≤ 700 px (mobile phone) ────────────────────────────────── */
@media (max-width: 700px) {
  .preise-contact-cta__grid  { grid-template-columns: 1fr; }
  .section-reviews-pa        { padding: 32px 0; }
  .section-reviews-pa__title { font-size: 22px; margin: 0 0 20px; }
  .section-reviews-pa__list .section-review-pa-item { width: 100%; padding: 0 0 12px; }
  .section-reviews-pa__btns  { flex-direction: column; }
  .section-reviews-pa__btns .link-btn { width: 100%; text-align: center; box-sizing: border-box; }
  .trust-strip                { gap: 4px 14px; font-size: 12px; }
}

/* ── Rechenbeispiel-Section ──────────────────────────────────── */
.rechenbeispiel-section {
  margin: 36px 0 28px;
}

.rechenbeispiel-section__heading {
  font-size:   24px;
  font-weight: 700;
  color:       var(--pa-primary);
  margin:      0 0 14px;
}

.rechenbeispiel-section__intro {
  color:   var(--pa-text-muted);
  margin:  0 0 18px;
  font-size: 15px;
}

/* Card wrapper for the table */
.rechenbeispiel-table-wrap {
  background:    #ffffff;
  border:        1px solid var(--pa-border);
  border-radius: var(--pa-radius-card);
  box-shadow:    var(--pa-shadow-card);
  overflow:      hidden;         /* clip radius on table corners */
  overflow-x:    auto;           /* horizontal scroll inside card only on mobile */
}

.rechenbeispiel-table {
  width:           100%;
  border-collapse: collapse;
  min-width:       360px;        /* prevents text squish below this width */
  font-size:       15px;
}

/* Header row */
.rechenbeispiel-table thead tr {
  background: var(--pa-primary);
}

.rechenbeispiel-table thead th {
  color:       #ffffff;
  font-weight: 600;
  padding:     12px 16px;
  text-align:  left;
  white-space: nowrap;
}

.rechenbeispiel-table__col-price {
  text-align: right !important;
  white-space: nowrap;
}

/* Body rows */
.rechenbeispiel-table tbody tr {
  border-bottom: 1px solid var(--pa-border);
}

.rechenbeispiel-table tbody tr:last-child {
  border-bottom: none;
}

.rechenbeispiel-table tbody td {
  padding:    11px 16px;
  color:      var(--pa-text);
  vertical-align: middle;
}

.rechenbeispiel-table tbody td:last-child {
  text-align:  right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Total rows — bold, slightly tinted */
.rechenbeispiel-table__total td {
  font-weight: 700;
  color:       var(--pa-primary-dark) !important;
  background:  #f9fafb;
}

/* Tip text below table */
.rechenbeispiel-section__tip {
  margin:    14px 0 0;
  font-size: 14px;
  color:     var(--pa-text-muted);
  line-height: 1.55;
}

/* ── Rechenbeispiel: tablet ≤ 900 px ────────────────────────── */
@media (max-width: 900px) {
  .rechenbeispiel-section__heading { font-size: 21px; }
}

/* ── Rechenbeispiel: mobile ≤ 600 px ────────────────────────── */
@media (max-width: 600px) {
  .rechenbeispiel-section          { margin: 24px 0 20px; }
  .rechenbeispiel-section__heading { font-size: 19px; }
  .rechenbeispiel-table            { font-size: 14px; }
  .rechenbeispiel-table thead th,
  .rechenbeispiel-table tbody td   { padding: 9px 12px; }
}

/* ── 21. FAQ / Misconceptions Accordion — Figma Variant E ───────
   Scoped to .faq-accordion-block so these rules override the
   global details/summary rules in design-system.css (section 11)
   without affecting any other accordion on the site.
   Cascade position (this file loads last) ensures the override.
   ─────────────────────────────────────────────────────────── */

/* Section wrapper */
.faq-accordion-block {
  padding: 8px 0 4px;
}

/* Section heading */
.faq-accordion__heading {
  font-size:      26px;
  font-weight:    700;
  color:          var(--pa-primary);
  margin:         0 0 24px;
  line-height:    1.25;
  letter-spacing: -0.01em;
}

/* Items list: vertical stack with gap between cards */
.faq-accordion__items {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

/* Each item: white card, border, rounded — override global border-bottom */
.faq-accordion-block details.faq-accordion__item {
  background:    #ffffff;
  border:        1px solid #d9dee7;
  border-bottom: 1px solid #d9dee7;   /* override global border-bottom rule */
  border-radius: var(--pa-radius-card);
  overflow:      hidden;
  box-shadow:    none;
  transition:    border-color .15s ease;
}

.faq-accordion-block details.faq-accordion__item[open] {
  border-color: var(--pa-accent);
}

/* Summary row: horizontal flex, comfortable tap target.
   Overrides global padding:13px 0 and adds horizontal padding. */
.faq-accordion-block details.faq-accordion__item > summary {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             16px;
  padding:         17px 20px;
  font-size:       15px;
  font-weight:     600;
  color:           var(--pa-primary);
  line-height:     1.4;
  list-style:      none;
  cursor:          pointer;
  user-select:     none;
  border-radius:   var(--pa-radius-card);
  transition:      background .12s ease;
}

.faq-accordion-block details.faq-accordion__item > summary::-webkit-details-marker {
  display: none;
}

.faq-accordion-block details.faq-accordion__item > summary:hover {
  background: #f9f8f6;
}

/* Plus icon: scoped override of global ::after */
.faq-accordion-block details.faq-accordion__item > summary::after {
  content:     '+';
  flex-shrink: 0;
  font-size:   22px;
  font-weight: 300;
  line-height: 1;
  color:       var(--pa-accent);
  width:       22px;
  text-align:  center;
  transition:  transform .2s ease;
}

.faq-accordion-block details.faq-accordion__item[open] > summary {
  color:         var(--pa-primary);
  border-radius: var(--pa-radius-card) var(--pa-radius-card) 0 0;
}

.faq-accordion-block details.faq-accordion__item[open] > summary::after {
  content:   '−';
  transform: none;
}

/* Answer area: padding + top separator line */
.faq-accordion__answer {
  padding:    0 20px 18px;
  border-top: 1px solid #e9ecf1;
}

.faq-accordion__answer p,
.faq-accordion__answer ul,
.faq-accordion__answer ol {
  margin:      14px 0 0;
  font-size:   14px;
  line-height: 1.7;
  color:       var(--pa-text-muted);
}

.faq-accordion__answer p:last-child { margin-bottom: 0; }

/* Override the .text-content p size shrink (0.875em) and .fa gold from section 6b */
html:has(.calculator-layout) .text-content .faq-accordion__answer p {
  font-size:   14px;
  line-height: 1.7;
  color:       var(--pa-text-muted);
}

/* Links inside answers */
.faq-accordion__answer a {
  color:           var(--pa-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-accordion__answer a:hover {
  color: var(--pa-accent);
}

/* ── FAQ accordion: tablet 768–900 px ─────────────────────── */
@media (min-width: 768px) and (max-width: 900px) {
  .faq-accordion__heading { font-size: 22px; }
  .faq-accordion-block details.faq-accordion__item > summary { font-size: 14px; }
}

/* ── FAQ accordion: mobile ≤ 767 px ──────────────────────── */
@media (max-width: 767px) {
  .faq-accordion__heading {
    font-size:    20px;
    margin-bottom: 18px;
  }

  .faq-accordion-block details.faq-accordion__item > summary {
    padding:   14px 16px;
    font-size: 14px;
    gap:       12px;
  }

  .faq-accordion-block details.faq-accordion__item > summary::after {
    font-size: 20px;
    width:     20px;
  }

  .faq-accordion__answer {
    padding: 0 16px 16px;
  }

  .faq-accordion__items {
    gap: 6px;
  }
}

/* ── 22. Section background rhythm — pa-section-* utility classes ──────
   Used in de_content / ru_content for /de/preise + /ru/preise-ru.
   html:has(.calculator-layout) scopes every rule to price pages only.
   The page body is warm off-white (var(--pa-bg-alt) = #f9f8f6).
   pa-section divs replace the old monolithic .text-content block.

   Background rhythm:
     calc notes + contact     → #f9f8f6  (existing alert-block rule)
     pa-section-white         → #ffffff  (price-includes, warum-kunden)
     pa-section-soft          → #f9f8f6  (price text, warum-kunden)
     pa-section-accent-soft   → #fbf7ef  (rechenbeispiel table)
     FAQ (content-section)    → #ffffff  (existing :has(.section-text) rule)
     reviews (rfig-section)   → #f9f8f6  (existing rfig-section rule)
   ─────────────────────────────────────────────────────────────────── */

/* Base: full-width, vertical padding, top border between sections */
html:has(.calculator-layout) .pa-section {
  width:         100%;
  box-sizing:    border-box;
  padding:       48px 0;
  border-top:    1px solid var(--pa-border);
}

/* White section — warm off-white so white cards read against it */
html:has(.calculator-layout) .pa-section-white {
  background: #f8f6f2;
}

/* Warm off-white section (same as --pa-bg-alt, blends with body) */
html:has(.calculator-layout) .pa-section-soft {
  background: var(--pa-bg-alt);
}

/* Subtle gold-tinted section (rechenbeispiel highlight) */
html:has(.calculator-layout) .pa-section-accent-soft {
  background: #fbf7ef;
}

/* CTA utility (reserved) */
html:has(.calculator-layout) .pa-section-cta {
  background: var(--pa-bg-alt);
}

/* ── pa-section inner element overrides ────────────────────────────────
   The old .text-content parent context no longer wraps these elements.
   Re-establish specific styles that require an explicit parent selector.
   ─────────────────────────────────────────────────────────────────── */

/* Green check icons in price-includes list */
.pa-section .price-includes__check-icon .fa {
  color:        #10b981;
  font-size:    14px;
  margin-right: 0;
}

/* Override: excluded (minus) icons → muted, not green */
.pa-section .price-includes__check-icon--excluded .fa {
  color:        var(--pa-text-muted);
  font-size:    14px;
  opacity:      0.60;
  margin-right: 0;
}

/* Muted minus icon for "Nicht enthalten" row */
.pa-section .price-not-included__icon .fa {
  color:        var(--pa-text-muted);
  font-size:    14px;
  margin-right: 0;
  opacity:      0.55;
}

/* "Nicht enthalten" text: slightly smaller, muted */
.pa-section .price-not-included p {
  margin:      0;
  font-size:   0.875em;
  line-height: 1.55;
  color:       var(--pa-text-muted);
}

/* ── pa-section responsive padding ────────────────────────────────── */
@media (max-width: 767px) {
  html:has(.calculator-layout) .pa-section {
    padding: 32px 0;
  }
}

@media (max-width: 480px) {
  html:has(.calculator-layout) .pa-section {
    padding: 24px 0;
  }
}

/* ── Price factor section: two-column grid + category table ─────────────
   FIX: sidebar was position:sticky — now static (scrolls with block).
   Desktop ≥901px : 1fr + 360px table, gap 48px.
   Narrow tablet 641-900px : 1fr + 280px table, gap 24px.
   Mobile ≤640px  : single column, table below text.
   ─────────────────────────────────────────────────────────────────────── */

/* Section background — slightly warmer than pa-section-soft neighbors
   (#f8f6f2 before / #fbf7ef after) to make it visually distinct.
   Cascade position (after line ~1803) wins at equal specificity. */
html:has(.calculator-layout) .price-factor-section {
  background: #ede9df;
}

/* Two-column grid — desktop default */
.price-factor-grid {
  display:               grid;
  grid-template-columns: 1fr 360px;
  gap:                   48px;
  align-items:           start;
}

/* Right column — plain flow element, no sticky */
.price-factor-sidebar {
  position: static;
}

/* ── Category card ──────────────────────────────────────── */
.price-category-card {
  border-radius: var(--pa-radius-card);
  border:        1px solid var(--pa-border);
  overflow:      hidden;
  box-shadow:    var(--pa-shadow-card);
}

/* Dark anthracite header bar */
.price-category-header {
  background:     var(--pa-primary);
  color:          #ffffff;
  padding:        14px 18px;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Each A / B / C row */
.price-category-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     14px 18px;
  background:  var(--pa-bg-alt);
  border-top:  1px solid var(--pa-border);
}

/* A / B / C badge */
.price-category-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  flex-shrink:     0;
  background:      #ffffff;
  border:          1px solid var(--pa-border);
  border-radius:   5px;
  font-size:       12px;
  font-weight:     700;
  color:           var(--pa-primary);
}

/* Category description */
.price-category-title {
  flex:        1;
  font-size:   14px;
  line-height: 1.4;
  color:       var(--pa-text);
}

/* Price on the right */
.price-category-price {
  font-size:   14px;
  font-weight: 700;
  color:       var(--pa-primary);
  white-space: nowrap;
}

/* Footnote */
.price-category-note {
  margin:      0;
  padding:     10px 18px;
  background:  #ffffff;
  border-top:  1px solid var(--pa-border);
  font-size:   12px;
  line-height: 1.45;
  color:       var(--pa-text-muted);
}

/* ── Narrow tablet 641–900px: narrower table, tighter gap ─── */
@media screen and (max-width: 900px) {
  .price-factor-grid {
    grid-template-columns: 1fr 280px;
    gap:                   24px;
  }
}

/* ── Mobile ≤640px: single column, table full width ─────── */
@media screen and (max-width: 640px) {
  .price-factor-grid {
    grid-template-columns: 1fr;
    gap:                   20px;
  }

  .price-category-card {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Price Montage Section — card grid
   .price-montage-section
   ═══════════════════════════════════════════════════════════════ */

/* Section uses pa-section-soft background — no override needed */
html:has(.calculator-layout) .price-montage-section {
  background: var(--pa-bg-alt);
}

/* Overline label */
.price-montage__eyebrow {
  margin:          0 0 10px;
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           var(--pa-accent);
}

/* Section heading */
.price-montage__title {
  margin:      0 0 20px;
  font-size:   clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color:       var(--pa-primary);
  line-height: 1.25;
}

/* price-callout sits between title and grid */
.price-montage-section .price-callout {
  margin-bottom: 32px;
}

/* 2-column card grid */
.price-montage__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   20px;
}

/* Individual card */
.price-montage__card {
  background:    #ffffff;
  border:        1px solid var(--pa-border);
  border-radius: var(--pa-radius-card);
  box-shadow:    var(--pa-shadow-card);
  padding:       24px 22px;
  transition:    box-shadow .2s ease, border-color .2s ease;
}

.price-montage__card:hover {
  border-color: var(--pa-accent);
  box-shadow:   0 4px 14px rgba(0, 0, 0, .09);
}

/* Icon */
.price-montage__icon {
  margin-bottom: 14px;
  font-size:     22px;
  color:         var(--pa-accent);
  line-height:   1;
}

/* Card heading */
.price-montage__card-title {
  margin:      0 0 8px;
  font-size:   16px;
  font-weight: 700;
  color:       var(--pa-primary);
  line-height: 1.3;
}

/* Card body text */
.price-montage__text {
  margin:      0;
  font-size:   14px;
  line-height: 1.6;
  color:       var(--pa-text);
}

/* ── Tablet ≤900px: keep 2 columns but tighter gap ───────────── */
@media screen and (max-width: 900px) {
  .price-montage__grid {
    gap: 14px;
  }
  .price-montage__card {
    padding: 20px 18px;
  }
}

/* ── Mobile ≤640px: single column ────────────────────────────── */
@media screen and (max-width: 640px) {
  .price-montage__grid {
    grid-template-columns: 1fr;
    gap:                   14px;
  }
  .price-montage__title {
    font-size: 20px;
  }
}

/* ══════════════════════════════════════════════════════════
   RU PREISE-RU — Intro / Hero block
   Scoped to html[lang="ru"] so DE /de/preise is unaffected.
   Selectors inside .ru-preise-intro target the new classes
   added to the DB markup.
   ══════════════════════════════════════════════════════════ */

/* ── Intro wrapper ─────────────────────────────────────── */
.ru-preise-intro {
  width:      100%;
  margin:     0;
  padding:    44px 0 28px;
  text-align: left;
}

/* ── Overline badge ────────────────────────────────────── */
.ru-preise-overline {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color:          var(--pa-accent);
  margin:         0 0 14px;
  padding:        0;
  line-height:    1;
}

/* ── H1: large, left-aligned, dark anthracite ──────────── */
.ru-preise-intro h1 {
  width:       100%;
  max-width:   760px;
  text-align:  left;
  font-size:   40px;
  line-height: 1.15;
  font-weight: 800;
  color:       var(--pa-text);
  padding:     0;
  margin:      0 0 22px;
  letter-spacing: -0.02em;
}

/* Remove link styling inside h1 — smooth-scroll anchor */
.ru-preise-intro h1 a,
.ru-preise-intro h1 a:hover,
.ru-preise-intro h1 a:visited {
  color:           inherit;
  text-decoration: none;
}

/* Gold "цены 2026" span */
.ru-preise-intro .text-accent {
  color: var(--pa-accent);
}

/* ── Paragraphs ────────────────────────────────────────── */

/* Lead paragraph — larger, prominent */
.ru-preise-intro .intro-lead {
  font-size:   17px;
  line-height: 1.75;
  color:       var(--pa-text);
  max-width:   700px;
  margin:      0 0 14px;
  padding:     0;
}

/* Body paragraph (second p — no extra class) */
.ru-preise-intro p:not(.ru-preise-overline):not(.intro-lead):not(.intro-note) {
  font-size:   15px;
  line-height: 1.7;
  color:       var(--pa-text-muted);
  max-width:   700px;
  margin:      0 0 12px;
  padding:     0;
}

/* Disclaimer/note paragraph — quieter */
.ru-preise-intro .intro-note {
  font-size:   13px;
  line-height: 1.6;
  color:       var(--pa-text-muted);
  max-width:   640px;
  margin:      0;
  padding:     0;
  opacity:     0.85;
}

/* ── Mobile ≤767px ─────────────────────────────────────── */
@media (max-width: 767px) {
  .ru-preise-intro {
    padding: 28px 0 20px;
  }

  .ru-preise-intro h1 {
    font-size:   26px;
    line-height: 1.2;
    margin:      0 0 16px;
  }

  .ru-preise-intro .intro-lead {
    font-size: 15px;
  }
}

/* ── Tablet 768–1024px ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .ru-preise-intro h1 {
    font-size: 32px;
  }
}