/* =========================================================
   Premium Anthracite — Global Design System
   Loads after style.min.css on all pages (cascade position
   guarantees these overrides win without !important).
   Hero section is explicitly shielded at the bottom.
   ========================================================= */

/* ── 1. Design tokens ──────────────────────────────────── */
:root {
  --pa-primary:      #374151;
  --pa-primary-dark: #1f2937;
  --pa-accent:       #c9a666;
  --pa-accent-dark:  #b8935a;
  --pa-text:         #1f2937;
  --pa-text-muted:   #6b7280;
  --pa-bg:           #ffffff;
  --pa-bg-alt:       #f9f8f6;
  --pa-border:       #e5e7eb;
  --pa-radius-btn:   6px;
  --pa-radius-card:  8px;
  --pa-shadow-card:  0 1px 6px rgba(0, 0, 0, .07);
}

/* ── 2. Typography ─────────────────────────────────────── */
:root {
  --pa-font: Inter, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
}

body {
  font-family:              var(--pa-font);
  color:                    var(--pa-text);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}

/* Override explicit Dax declarations in critical CSS / style.min.css.
   design-system.css loads after both, so equal specificity wins here. */
p, li, a, h1, h2, h3, h4, h5, h6 { font-family: var(--pa-font); }

.btn, .link-btn,
.calc-form input,
.calc-form .select { font-family: var(--pa-font); }

h1, h2, h3, h4 { letter-spacing: -0.01em; }
h2              { color: var(--pa-text); }

.text-content a,
.content-section a       { color: var(--pa-primary); }

.text-content a:hover,
.content-section a:hover { color: var(--pa-accent); }

/* ── 3. Buttons ────────────────────────────────────────── */
.btn,
.link-btn {
  background:    var(--pa-primary);
  border-radius: var(--pa-radius-btn);
  text-shadow:   none;
}
.btn:hover,
.link-btn:hover { background: var(--pa-primary-dark); }

.callback-btn        { background: var(--pa-primary); }
.callback-btn:hover  { background: var(--pa-primary-dark); }

.calc-link           { background: var(--pa-accent); }
.calc-link:hover     { background: var(--pa-accent-dark); }

.reviews-link        { background: var(--pa-primary); }
.reviews-link:hover  { background: var(--pa-primary-dark); }

/* ── 4. Mobile header call button ──────────────────────── */
.mobile-call-btn { background: var(--pa-primary); }

/* Hover/active: fix green fallback from style.min.css — use anthracite-dark */
.mobile-call-btn:hover,
.mobile-call-btn:active  { background: var(--pa-primary-dark); }

/* ── 4a. Logo — new 800×288 asset (ratio 2.78:1).
   style.min.css forces height:64px !important → distorts new logo → override.
   Width increased ~20% vs style.min.css defaults for better header readability. */
.logo-wrap img {
  height:    auto !important;
  width:     200px !important;
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  .logo-wrap img { width: 165px !important; }
}

@media screen and (max-width: 600px) {
  .logo-wrap img {
    width:     auto !important;
    max-width: 150px !important;
  }
}

/* ── 5. Desktop nav ────────────────────────────────────── */
.nav li a:hover,
.nav li.active a { color: var(--pa-primary); }

.nav li a::after,
.nav li:hover a::after,
.nav li.active a::after { background: var(--pa-accent); }

/* ── 6. Off-canvas nav ─────────────────────────────────── */
.nav-offcanvas-close:hover,
.nav-offcanvas-close:focus {
  background: var(--pa-bg-alt);
  color:      var(--pa-primary);
}

.nav-offcanvas-list li a:hover,
.nav-offcanvas-list li a:focus {
  color:      var(--pa-accent);
  background: var(--pa-bg-alt);
}

.nav-offcanvas-list li.active a {
  color: var(--pa-accent);
}

.nav-offcanvas-list li.active a::after {
  color: var(--pa-accent);
}

.nav-offcanvas-list li a:hover::after,
.nav-offcanvas-list li a:focus::after {
  color: var(--pa-accent);
}

.nav-offcanvas-cta-price {
  background:   var(--pa-accent);
  border-color: var(--pa-accent);
  color:        #fff;
}
.nav-offcanvas-cta-price:hover,
.nav-offcanvas-cta-price:focus {
  background:   var(--pa-accent-dark);
  border-color: var(--pa-accent-dark);
}

.nav-offcanvas-cta-phone {
  background:   var(--pa-primary);
  border-color: var(--pa-primary);
  color:        #ffffff !important;
}
.nav-offcanvas-cta-phone:hover,
.nav-offcanvas-cta-phone:focus {
  background:   var(--pa-primary-dark);
  border-color: var(--pa-primary-dark);
  color:        #ffffff !important;
}

/* ── 7. Breadcrumbs ────────────────────────────────────── */
.crumbs                 { background: var(--pa-bg-alt); }
.crumbs-list li a:hover { color: var(--pa-accent); }

/* ── 8. Section backgrounds ────────────────────────────── */
.grey-bg { background: var(--pa-bg-alt); }

.action-section {
  background:    var(--pa-bg-alt);
  border-top:    1px solid var(--pa-border);
  border-bottom: 1px solid var(--pa-border);
}

.subtitle::after { background: var(--pa-accent); }

/* ── 8b. Action CTA block — Premium Anthracite refinement ──
   Overrides the old style.css values:
     .subtitle       { font-size:28px }
     .action-descr   { padding: 18px 0 18px 70px; font-size:18px }
     .callback-descr { background: url(callback-icon.png) … }
     .calc-descr     { background: url(calc-icon.png) … }
     .callback-btn   { width:312px; font-size:22px }
     .calc-link      { width:312px; font-size:22px }
   design-system.css loads after style.min.css (cascade position),
   so same-specificity rules here win without !important.
   ─────────────────────────────────────────────────────────── */

/* Section: slightly tighter vertical rhythm */
.action-section { padding: 28px 0; }

/* Block centering */
.action-block {
  max-width:  480px;
  text-align: center;
}

/* Gold FA icon centered above each subtitle */
.action-layout .subtitle::before,
.callback-layout .subtitle::before {
  display:     block;
  font-family: FontAwesome;
  font-style:  normal;
  font-weight: normal;
  font-size:   22px;
  color:       var(--pa-accent);
  margin:      0 0 6px;
}
.action-layout   .subtitle::before { content: "\f095"; } /* phone */
.callback-layout .subtitle::before { content: "\f1ec"; } /* calculator */

/* Subtitle: smaller, anthracite */
.subtitle {
  font-size:      20px;
  color:          var(--pa-primary);
  padding-top:    0;
  padding-bottom: 10px;
}

/* Remove PNG background icons; clear the 70px indent */
.callback-descr,
.calc-descr   { background: none; }

.action-descr {
  font-size:   15px;
  line-height: 1.65;
  color:       var(--pa-text-muted);
  padding:     8px 0 14px;
}

/* Buttons: drop the 22px/312px values, use site-standard size */
.callback-btn,
.calc-link {
  font-size:   14px;
  font-weight: 600;
  padding:     10px 26px;
  width:       auto;
  max-width:   none;
  min-width:   0;
  line-height: 1.2;
}

/* Mobile/tablet: stretch to comfortable touch width */
@media (max-width: 1024px) {
  .callback-btn,
  .calc-link {
    width:     100%;
    max-width: 280px;
  }
}

/* ── 9. Contact form section: rainbow gradient → neutral ─ */
.feedback-section {
  background: var(--pa-bg-alt);
  filter:     none;
}

/* ── 10. Reviews ───────────────────────────────────────── */
.section-review-item-body {
  border:     1px solid var(--pa-border);
  box-shadow: var(--pa-shadow-card);
}

/* ── 11. FAQ / accordion ───────────────────────────────── */
details { border-bottom: 1px solid var(--pa-border); }

details summary {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             12px;
  cursor:          pointer;
  padding:         13px 0;
  font-weight:     700;
  font-size:       17px;
  color:           var(--pa-text);
  list-style:      none;
}

details summary::-webkit-details-marker { display: none; }

details summary::after {
  content:     '+';
  flex-shrink: 0;
  font-size:   20px;
  font-weight: 300;
  color:       var(--pa-accent);
  line-height: 1;
}

details[open] > summary        { color: var(--pa-primary); }
details[open] > summary::after { content: '−'; }

details > p,
details > ul,
details > ol { color: var(--pa-text-muted); padding-bottom: 10px; }

/* ── 12. Tables (CMS content areas only) ───────────────── */
.text-content table th,
.content-section table th {
  background:   var(--pa-bg-alt);
  color:        var(--pa-text);
  text-align:   left;
  padding:      10px 12px;
  border-color: var(--pa-border);
}

.text-content table td,
.content-section table td {
  padding:      10px 12px;
  border-color: var(--pa-border);
  color:        var(--pa-text);
}

.text-content table tr:nth-child(even) td,
.content-section table tr:nth-child(even) td { background: var(--pa-bg-alt); }

/* ── 13. Footer ────────────────────────────────────────── */
.main-footer         { background: var(--pa-primary); }
.main-footer li,
.main-footer a       { color: #d1d5db; }
.main-footer a:hover { color: var(--pa-accent); }

.footer-soc-list a       { background: rgba(255, 255, 255, .10); }
.footer-soc-list a:hover { background: var(--pa-accent); color: #fff; }

.cpr-block   { background: var(--pa-primary-dark); }
.cpr,
.cpr a       { color: #9ca3af; }
.cpr a:hover { color: var(--pa-accent); }

/* ── Footer brand logo ─────────────────────────────────── */
/* Desktop default: right-align to match footer-contacts text-align:right */
.footer-brand-logo {
  display:         flex;
  justify-content: flex-end;
  margin-top:      20px;
  width:           100%;
}

.footer-brand-logo img {
  display:   block;
  max-width: 180px;
  width:     100%;
  height:    auto;
  opacity:   0.9;
}

.footer-brand-logo img:hover {
  opacity: 1;
}

/* Mobile/tablet: footer collapses to 100% width + centered at ≤1024px */
@media screen and (max-width: 1024px) {
  .footer-brand-logo {
    justify-content: center;
    margin:          22px auto 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   14. Reviews component — rfig-* (global, all pages)
   ══════════════════════════════════════════════════════════════ */

.rfig-section {
  background: var(--pa-bg-alt);
  padding:    56px 0;
}

.rfig-heading {
  font-size:      28px;
  font-weight:    700;
  color:          var(--pa-text);
  text-align:     center;
  margin:         0 0 36px;
  letter-spacing: -0.01em;
}

/* ── Star atoms ── */
.rv-star         { font-size: 15px; color: var(--pa-border); line-height: 1; }
.rv-star--gold   { color: var(--pa-accent); }

/* ── Card track ── */
.rfig-outer { overflow: hidden; }

.rfig-track {
  display:     flex;
  align-items: stretch;
  gap:         20px;
}

.rfig-card {
  flex:           1 1 0;
  min-width:      0;
  background:     #fff;
  border:         1px solid var(--pa-border);
  border-radius:  var(--pa-radius-card);
  box-shadow:     0 2px 8px rgba(0, 0, 0, .06);
  padding:        22px 20px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  box-sizing:     border-box;
}

.rfig-card--clone { display: none; }

.rfig-card__top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             8px;
}

.rfig-card__meta {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  min-width:      0;
}

.rfig-card__name {
  font-weight:   700;
  font-size:     15px;
  color:         var(--pa-text);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

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

.rfig-card__stars { display: flex; gap: 2px; flex-shrink: 0; }

.rfig-card__text {
  font-size:   14px;
  color:       var(--pa-text-muted);
  line-height: 1.6;
  margin:      0;
  flex:        1;
  white-space: pre-line;
}

/* ── Meta row (aggregate + buttons) ── */
.rfig-meta {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            20px;
  margin-top:     28px;
  padding-top:    24px;
  border-top:     1px solid var(--pa-border);
  text-align:     center;
}

.rfig-aggregate {
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             6px;
  font-size:       15px;
  color:           var(--pa-text);
  margin:          0;
}

.rfig-aggregate .rv-star--gold { font-size: 22px; }

.rfig-aggregate strong {
  font-size:   17px;
  font-weight: 700;
  color:       var(--pa-text);
}

/* ── Buttons ── */
.rfig-btns {
  display:         flex;
  gap:             12px;
  flex-wrap:       wrap;
  justify-content: center;
}

.rfig-btns--top {
  justify-content: flex-start;
  margin:          0 0 28px;
}

.rfig-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         11px 26px;
  font-size:       15px;
  font-family:     var(--pa-font);
  font-weight:     600;
  border-radius:   6px;
  text-decoration: none;
  cursor:          pointer;
  transition:      background .2s ease, border-color .2s ease, color .2s ease;
  line-height:     1.2;
  white-space:     nowrap;
  border:          1.5px solid transparent;
}

.rfig-btn--outline             { background: #fff; border-color: var(--pa-primary); color: var(--pa-primary); }
.rfig-btn--outline:hover       { background: var(--pa-primary); color: #fff; }
.rfig-btn--gold                { background: var(--pa-accent); border-color: var(--pa-accent); color: #fff; }
.rfig-btn--gold:hover          { background: var(--pa-accent-dark); border-color: var(--pa-accent-dark); color: #fff; }

/* ── Full list variant (bewertungen) — wrap grid, no marquee ── */
.rfig-section--list .rfig-outer  { overflow: visible; }
.rfig-section--list .rfig-track  { flex-wrap: wrap; animation: none !important; width: auto; }
.rfig-section--list .rfig-card   { flex: 1 1 280px; margin-right: 0; }
.rfig-section--list .rfig-card--clone { display: none !important; }

/* List variant — restore gap + 2-col grid at tablet, 1-col on phone */
@media (max-width: 900px) {
  .rfig-section--list .rfig-track { gap: 20px; }
  .rfig-section--list .rfig-card  { flex: 1 1 calc(50% - 10px); min-width: 0; margin-right: 0; }
}
@media (max-width: 560px) {
  .rfig-section--list .rfig-card  { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════
   Responsive: marquee when 3 cards no longer fit (≤ 900 px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .rfig-card--clone { display: flex; }

  .rfig-track {
    gap:       0;
    animation: rfig-scroll 28s linear infinite;
    width:     max-content;
  }

  .rfig-card {
    flex:         0 0 270px;
    min-width:    270px;
    margin-right: 20px;
  }

  .rfig-outer:hover .rfig-track,
  .rfig-outer:focus-within .rfig-track { animation-play-state: paused; }
}

@keyframes rfig-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-870px); }
}

@media (prefers-reduced-motion: reduce) {
  .rfig-track                { animation: none !important; flex-wrap: wrap; }
  .rfig-card                 { flex: 1 1 240px; margin-right: 0; }
  .rfig-card--clone          { display: none !important; }
}

@media (max-width: 700px) {
  .rfig-section              { padding: 36px 0; }
  .rfig-heading              { font-size: 22px; margin: 0 0 24px; }
  .rfig-btns                 { flex-direction: column; }
  .rfig-btn                  { width: 100%; box-sizing: border-box; }
  .rfig-aggregate            { font-size: 14px; }
  .rfig-aggregate__sub       { display: block; }
  .rfig-btns--top            { justify-content: center; }
}

/* ── 15. Pagination — anthracite style ──────────────────── */
.pagination-layout {
  padding: 16px 0 28px;
}

.pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  flex-wrap:       wrap;
}

/* ul dissolves into the flex row so li and pagin-control share one line */
.pagination ul {
  display:     contents;
  list-style:  none;
  padding:     0;
  margin:      0;
}

.pagination li {
  list-style: none;
  margin:     0;
}

.pagination li a,
.pagin-control {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       36px;
  height:          36px;
  padding:         0 10px;
  border-radius:   6px;
  background:      #f3f4f6;
  color:           var(--pa-text);
  font-size:       14px;
  font-weight:     500;
  font-family:     var(--pa-font);
  border:          1px solid var(--pa-border);
  text-decoration: none;
  transition:      background .15s, color .15s, border-color .15s;
  line-height:     1;
  box-sizing:      border-box;
}

.pagination li.active a {
  background:   var(--pa-primary);
  border-color: var(--pa-primary);
  color:        #fff;
  font-weight:  700;
}

.pagination li a:hover {
  background:   var(--pa-bg-alt);
  border-color: var(--pa-primary);
  color:        var(--pa-primary);
}

.pagin-control {
  font-size: 18px;
  padding:   0 12px;
}

.pagin-control:hover {
  background:   var(--pa-primary);
  border-color: var(--pa-primary);
  color:        #fff;
}

@media (max-width: 560px) {
  .pagination li a,
  .pagin-control {
    min-width: 32px;
    height:    32px;
    font-size: 13px;
  }
}

/* ── 16. Form inputs ───────────────────────────────────── */
.text-input { border-color: var(--pa-border); }

.text-input:focus {
  outline:        2px solid var(--pa-accent);
  outline-offset: 1px;
  border-color:   var(--pa-accent);
}

/* ── 15. Hero Premium Upgrade ────────────────────────────
   Base hero layout in style.min.css (compiled from hero-mini-calc.css).
   This block: upgrades visual design to match /de/preise premium style.
   ─────────────────────────────────────────────────────────────────── */

/* Deeper, more dramatic overlay */
.hero-section .hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(12, 17, 27, .78) 0%,
    rgba(12, 17, 27, .48) 48%,
    rgba(12, 17, 27, .16) 100%
  );
}

/* Larger, bolder title — visually headline but NOT h1 */
.hero-section .hero-title {
  font-size:      clamp(28px, 3.4vw, 48px);
  font-weight:    900;
  line-height:    1.05;
  letter-spacing: -0.02em;
  text-shadow:    0 2px 14px rgba(0, 0, 0, .38);
  margin-bottom:  10px;
}

/* Subtitle */
.hero-section .hero-sub {
  font-size:   15px;
  font-weight: 400;
  opacity:     .92;
  margin-bottom: 16px;
}

/* Gold checkmark bullets */
.hero-section .hero-points {
  list-style:   none;
  padding-left: 0;
}
.hero-section .hero-points li {
  position:    relative;
  padding-left: 22px;
  font-weight:  500;
  font-size:    15px;
  margin:       7px 0;
}
.hero-section .hero-points li::before {
  content:     '✓';
  position:    absolute;
  left:        0;
  color:       var(--pa-accent);
  font-weight: 700;
}

/* Premium card: white on dark, accent top-border, deep shadow */
.hero-section .hero-mini-card {
  background:    #ffffff;
  border-radius: 16px;
  border-top:    3px solid var(--pa-accent);
  box-shadow:    0 20px 56px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .12);
  padding:       22px 20px;
}

/* Card heading */
.hero-section .hero-mini-title {
  font-size:      17px;
  font-weight:    800;
  color:          var(--pa-text);
  margin-bottom:  14px;
  padding-bottom: 10px;
  border-bottom:  1px solid var(--pa-border);
}

/* Input label */
.hero-section .hero-mini-grid .field label {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--pa-text-muted);
  margin-bottom:  5px;
}

/* Input field */
.hero-section .hero-mini-grid input {
  border:        1.5px solid var(--pa-border);
  border-radius: 8px;
  padding:       11px 14px;
  font-size:     16px;
  transition:    border-color .15s, box-shadow .15s;
}
.hero-section .hero-mini-grid input:focus {
  border-color: var(--pa-accent);
  outline:      none;
  box-shadow:   0 0 0 3px rgba(201, 166, 102, .18);
}

/* Gold CTA button */
.hero-section .hero-mini-actions .btn,
.hero-section .btn,
.hero-section .link-btn {
  background:     var(--pa-accent);
  text-shadow:    none;
  font-weight:    700;
  font-size:      16px;
  letter-spacing: 0.01em;
  border-radius:  999px;
}
.hero-section .hero-mini-actions .btn:hover,
.hero-section .btn:hover,
.hero-section .link-btn:hover {
  background: var(--pa-accent-dark);
}

/* Note text */
.hero-section .hero-mini-note {
  font-size:  11px;
  color:      var(--pa-text-muted);
  margin-top: 8px;
  line-height: 1.4;
}

/* Mobile overlay: top-to-bottom gradient */
@media (max-width: 992px) {
  .hero-section .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(12, 17, 27, .80) 0%,
      rgba(12, 17, 27, .54) 50%,
      rgba(12, 17, 27, .22) 100%
    );
  }
  .hero-section .hero-title {
    font-size: clamp(24px, 6vw, 34px);
  }
}

/* Small phones */
@media (max-width: 480px) {
  .hero-section .hero-title { font-size: 24px; }
  .hero-section .hero-mini-card {
    padding:       18px 16px;
    border-radius: 14px;
  }
}

/* ── 16. Header CTA buttons — Figma Variant E ────────────────
   style.min.css: .header-btn { width:194px; font-size:18px → 14px }
   Overriding width → auto, size → compact, adding secondary style.
   Both buttons are .link-btn.header-btn; secondary = last-child.
   ─────────────────────────────────────────────────────────── */

.header-btn {
  width:          auto;
  min-width:      0;
  font-size:      14px;
  font-weight:    600;
  padding:        7px 18px;
  line-height:    1.4;
  letter-spacing: 0.01em;
  white-space:    nowrap;
}

/* Primary CTA hover: gold */
.header-btn:hover,
.header-btn:active {
  background:   var(--pa-accent);
  border-color: var(--pa-accent);
  color:        var(--pa-text) !important;
}

/* Secondary CTA (Vorher-Nachher = last .header-btn):
   white fill, anthracite border + text, same outer height as primary */
.header-r-center .header-btn:last-child {
  margin-left:  8px;
  background:   #ffffff;
  border:       1px solid var(--pa-primary);
  color:        var(--pa-primary) !important;
}

/* Outline CTA hover: gold fill */
.header-r-center .header-btn:last-child:hover,
.header-r-center .header-btn:last-child:active {
  background:   var(--pa-accent);
  border-color: var(--pa-accent);
  color:        var(--pa-text) !important;
}

/* ── 17a. Desktop phone consultation pill ────────────────────
   .col.s4.header-l-center is display:none on ≤1024px (style.min.css),
   so these rules only render on desktop.
   ─────────────────────────────────────────────────────────── */
.hotline {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.header-phone-pill {
  display:         inline-flex;
  align-items:     center;
  gap:             12px;
  background:      var(--pa-primary);
  color:           #ffffff !important;
  text-decoration: none !important;
  border-radius:   50px;
  padding:         10px 20px 10px 16px;
  transition:      background .2s ease;
  white-space:     nowrap;
}

.header-phone-pill:hover,
.header-phone-pill:active {
  background: var(--pa-accent);
  color:      var(--pa-text) !important;
}

.header-phone-pill:hover .header-phone-pill-label,
.header-phone-pill:active .header-phone-pill-label {
  color: var(--pa-primary);
}

.header-phone-pill:hover .header-phone-pill-number,
.header-phone-pill:active .header-phone-pill-number {
  color: var(--pa-text);
}

.header-phone-pill .fa-phone {
  font-size:   20px;
  flex-shrink: 0;
}

.header-phone-pill-texts {
  display:        flex;
  flex-direction: column;
  line-height:    1.2;
  gap:            2px;
}

.header-phone-pill-label {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--pa-accent);
}

.header-phone-pill-number {
  font-size:   15px;
  font-weight: 600;
  color:       #ffffff;
  letter-spacing: 0.01em;
}

/* ── 17. Language flags — Figma Variant E ────────────────────
   New rectangular flag PNGs (de-flag-rect.png / ru-flag-rect.png):
   32×22px RGB, no alpha. Explicit !important guards against any
   global img rules in style.min.css that force width/height.
   ─────────────────────────────────────────────────────────── */

.langs-list li a {
  display:       inline-block;
  line-height:   0;
  border-radius: 3px;
}

.langs-list li a img,
.nav-offcanvas-lang-btn img {
  display:       block !important;
  width:         32px !important;
  height:        22px !important;
  object-fit:    fill;
  border-radius: 3px !important;
  clip-path:     none !important;
  mask-image:    none !important;
  transition:    opacity .2s ease;
}

/* Active language: full opacity, no border/ring */
html[lang="de"] .langs-list li:first-child a img,
html[lang="ru"] .langs-list li:last-child  a img {
  opacity: 1;
}

/* Inactive language: muted */
html[lang="de"] .langs-list li:last-child  a img,
html[lang="ru"] .langs-list li:first-child a img {
  opacity: 0.58;
}

html[lang="de"] .langs-list li:last-child  a:hover img,
html[lang="ru"] .langs-list li:first-child a:hover img {
  opacity: 0.82;
}

/* ── 18. Off-canvas nav: icon hover color — follow text (gold, not blue) ─ */
.nav-offcanvas-icon {
  color: var(--pa-text-muted);
}

.nav-offcanvas-list li a:hover .nav-offcanvas-icon,
.nav-offcanvas-list li a:focus .nav-offcanvas-icon,
.nav-offcanvas-list li.active a .nav-offcanvas-icon {
  color: currentColor;
}

/* ── 19. Off-canvas language switcher — flag-only, match desktop ─────────
   Text labels "DE"/"RU" are wrapped in .nav-lang-label (Blade) and hidden.
   Only flags visible. Active = full opacity + gold border.
   Inactive = muted opacity. style.css blue overridden (no !important there).
   ─────────────────────────────────────────────────────────────────────── */

/* Hide "DE"/"RU" text labels — wrapped in span by Blade template */
.nav-lang-label {
  display: none;
}

.nav-offcanvas-lang-btn {
  background:   transparent;
  border:       1px solid var(--pa-border);
  color:        var(--pa-text-muted);
  opacity:      0.60;
  gap:          0;
  padding:      8px 12px;
}

.nav-offcanvas-lang-btn.is-active {
  border-color: var(--pa-accent);
  background:   transparent;
  color:        var(--pa-text);
  opacity:      1;
}

.nav-offcanvas-lang-btn:hover,
.nav-offcanvas-lang-btn:focus {
  border-color: var(--pa-primary);
  background:   var(--pa-bg-alt);
  color:        var(--pa-text);
  opacity:      0.88;
  outline:      none;
}

/* flag img dimensions shared with .langs-list li a img above (section 17) */

/* ── 20. Form success / error messages — Premium Anthracite ─────────
   style.min.css defines these with purple/pink gradients and green SVGs.
   This section overrides all three message UI types site-wide:
   1. .success-modal  — callback + shared calc-offer modal (purple gradient)
   2. .success-msg    — feedback/contact/review/faq overlay (green + rotation)
   3. SVG checkmarks  — re-colored to gold (were white or lime-green)
   4. .offer-success-box overrides live in preise-anthracite.css (page-scoped)
   ─────────────────────────────────────────────────────────────────── */

/* ── 1. Callback modal success panel ────────────────────────────────
   style.min.css: background: linear-gradient(45deg, #543093 32%, #d960ae 100%)
   DOM order is h2 → text → icon; flex order: h2(1) → icon(2) → text(3). */
.success-modal {
  background:     #ffffff;
  color:          var(--pa-text);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            16px;
  padding:        8px 8px 4px;
}

.success-modal .h2 {
  color:       var(--pa-accent);
  text-shadow: none;
  order:       1;
  margin:      0;
}

/* Icon container sits between headline and text */
.success-modal .center {
  order: 2;
}

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

/* SVG checkmark was fill:#ffffff (invisible on white bg) → gold */
#modal-feedback-success-icon path { fill: var(--pa-accent); }

/* ── 2. Full-page success overlay (.success-msg) ────────────────────
   style.min.css: color:#80d72f; transform:rotate(180→360deg); position:fixed
   Keep the fixed-overlay approach but remove the rotation and use clean card. */
.success-msg {
  transform:     none;
  color:         var(--pa-text);
  border-radius: var(--pa-radius-card);
  box-shadow:    0 4px 24px rgba(0, 0, 0, .13);
  background:    #ffffff;
}

/* Override both specificity levels from style.min.css */
.success-msg.active,
.default-form-layout .success-msg.active {
  width:      min(480px, calc(100% - 32px));
  height:     auto;
  max-height: 90vh;
  padding:    40px 28px;
  top:        50%;
  left:       50%;
  right:      auto;
  bottom:     auto;
  margin:     0;
  transform:  translate(-50%, -50%);
  overflow-y: auto;
}

.success-msg .h2        { color: var(--pa-accent); text-shadow: none; }
.success-msg .success-text { color: var(--pa-text-muted); font-size: 15px; }

/* ── 3. SVG checkmarks → gold (were lime-green #80d72f) ── */
#footer-feedback-success-icon path,
#contacts-feedback-success-icon path,
#reviews-success-icon path,
#faq-success-icon path { fill: var(--pa-accent); }

/* ── 4. Close button (.success-remove-btn) ─── */
.success-remove-btn {
  background:    transparent;
  border:        0;
  color:         var(--pa-text-muted);
  font-size:     18px;
  line-height:   1;
  cursor:        pointer;
  position:      absolute;
  top:           10px;
  right:         10px;
  width:         30px;
  height:        30px;
  padding:       0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: 50%;
}

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

/* ── 21. Mobile header divider ─────────────────────────────
   On ≤600px the .header-r-center (CTA buttons) wraps to a
   second row below logo + mobile-contact-bar. A 1px top
   border visually separates both rows without adding weight. */
@media screen and (max-width: 600px) {
  .header-r-center {
    border-top:  1px solid var(--pa-border);
    padding-top: 8px;
  }
}

/* ── 22. Header height — ~20% taller across all breakpoints ──
   Applies consistently to mobile, tablet, and desktop.

   Mobile  (≤600px):   page-header 13/8 → 18/12, gap 4→8,
                        buttons 36px circles → 42px circles.
   Tablet  (601–1024px): page-header 6/6 → 12/10, gap 8 kept,
                        WA/call pills 36→42px h, burger 44×36→48×42.
   Desktop (>1024px):  page-header 13/8 → 17/13
                        (mobile buttons hidden on desktop).
   ─────────────────────────────────────────────────────────── */

/* — Mobile ≤600px — */
@media screen and (max-width: 600px) {
  .page-header {
    padding-top:    18px;
    padding-bottom: 12px;
  }

  .header-row {
    gap: 8px;
  }

  /* WA + call: keep perfect circles at new size */
  .mobile-wa-btn,
  .mobile-call-btn {
    width:  42px;
    height: 42px;
    flex:   0 0 42px;
  }

  /* Burger: wider rectangle, same height */
  .mobile-nav-btn {
    width:  48px;
    height: 42px;
    flex:   0 0 48px;
  }
}

/* — Tablet 601–1024px — */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .page-header {
    padding-top:    12px;
    padding-bottom: 10px;
  }

  /* WA + call are pills on tablet — height only */
  .mobile-wa-btn,
  .mobile-call-btn {
    height: 42px;
  }

  .mobile-nav-btn {
    width:  48px;
    height: 42px;
    flex:   0 0 48px;
  }
}

/* — Desktop >1024px — */
@media screen and (min-width: 1025px) {
  .page-header {
    padding-top:    17px;
    padding-bottom: 13px;
  }

  /* Logo left, CTA group + language flags right ──────────────
     .col.s4.header-l-center gets margin-left:auto which absorbs
     all remaining space and pushes the right cluster to the edge.
     width:auto overrides the default col.s4 (33.33%) fixed width. */
  .header-row {
    align-items: center;
  }

  .col.s2.header-left {
    flex:  0 0 auto;
    width: auto;
  }

  .col.s4.header-l-center.hotline {
    width:       auto;
    flex:        0 0 auto;
    margin-left: auto;
  }

  .header-r-center {
    width:       auto;
    flex:        0 0 auto;
    margin-left: 10px;
    padding:     0;
  }

  /* Avoid double gap (gap + margin-left on outline btn) */
  .header-r-center .header-btn:last-child {
    margin-left: 0;
  }

  .header-r-center .uibox-row {
    flex-wrap: nowrap;
    gap:       10px;
  }

  .header-right {
    flex:        0 0 auto;
    width:       auto;
    margin-left: 32px;
  }
}

/* ── 21. Offer / contact form — Premium Anthracite visual refresh ──
   CSS-only. All field names, actions, AJAX selectors, and mail logic
   are untouched. Targets the sitewide #feedback-form card and the
   contact-page #contact-form card.
   ───────────────────────────────────────────────────────────────── */

/* Input background, border radius, transition
   (overrides style.css border: 1px solid #ccc / border-radius: 3px) */
.text-input {
  background:    #f3f4f6;
  border-radius: var(--pa-radius-btn);
  transition:    border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Focus: replace browser outline with gold glow ring
   (overrides existing .text-input:focus rule at line ~565) */
.text-input:focus {
  outline:    0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201, 166, 102, .15);
}

/* ── Footer #feedback-form card — border matches .calc-wrap ── */
.feedback-form-layout {
  border-radius: var(--pa-radius-card);
  border:        2px solid var(--pa-accent);
  box-shadow:    0 2px 12px rgba(0, 0, 0, .06);
}

/* Select and textarea: same light-bg / subtle-border as inputs */
.feedback-form-layout .select,
.feedback-form-layout textarea {
  background:    #f3f4f6;
  border:        1px solid var(--pa-border) !important;
  border-radius: var(--pa-radius-btn);
  transition:    border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.feedback-form-layout .select:focus,
.feedback-form-layout textarea:focus {
  border-color: var(--pa-accent) !important;
  background:   #fff;
  outline:      0;
  box-shadow:   0 0 0 3px rgba(201, 166, 102, .15);
}

/* Labels: tighter, cleaner weight */
.feedback-form-layout label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--pa-text);
}

/* Send button: modern sizing, keeps .btn color from section 3 */
.send-btn {
  font-size:     16px;
  font-weight:   700;
  border-radius: var(--pa-radius-btn);
  width:         auto;
  min-width:     220px;
  max-width:     100%;
  padding:       12px 28px;
  letter-spacing: 0.01em;
}

/* ── Contact-page #contact-form card — border matches .calc-wrap ── */
.contact-form-block {
  background:    #fff;
  border-radius: var(--pa-radius-card);
  border:        2px solid var(--pa-accent);
  box-shadow:    0 2px 12px rgba(0, 0, 0, .06);
  padding:       20px;
}

/* Contact form select and textarea */
.contact-form-block .select,
.contact-form-block textarea {
  background:    #f3f4f6;
  border:        1px solid var(--pa-border) !important;
  border-radius: var(--pa-radius-btn);
  transition:    border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.contact-form-block .select:focus,
.contact-form-block textarea:focus {
  border-color: var(--pa-accent) !important;
  background:   #fff;
  outline:      0;
  box-shadow:   0 0 0 3px rgba(201, 166, 102, .15);
}

.contact-form-block label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--pa-text);
}

/* Contact form send button */
.default-send-btn {
  font-size:     16px;
  font-weight:   700;
  border-radius: var(--pa-radius-btn);
  padding:       12px 28px;
}