/* ==========================================================================
   SwiftStop Refresh  |  Child-Theme betheme-child  |  22.10.2026
   Basis: Designkonzept /konzept/swiftstop-global.css, gegen echtes Staging-HTML
   geprüft und angepasst.

   Grundregeln (BeBuilder bleibt voll bearbeitbar):
   - Nur globale Regeln: CSS-Variablen + Betheme/WooCommerce-Klassen.
   - Niedrige Spezifität (:where(), Element-/Einzelklassen). Alles, was im
     BeBuilder pro Element gesetzt wird (.mcb-item-xxxx, Inline-Styles), ist
     spezifischer und gewinnt weiter.
   - Kein !important, ausser im prefers-reduced-motion-Block.
   - Buchen-Zeile (.quantity, .single_add_to_cart_button), Apple/Google-Pay
     (#wcpay-express-checkout-*) und das Kennzeichen-Formular (.ssck-*) werden
     in Maßen NICHT angefasst.
   Entfernen = Datei löschen bzw. Enqueue in functions.php (Abschnitt 9) raus.
   ========================================================================== */

/* 1) Design-Tokens ------------------------------------------------------- */
:root{
  --ss-green:#027B35;
  --ss-green-dark:#01602A;
  --ss-green-tint:#EAF3EC;
  --ss-yellow:#DDD40E;
  --ss-yellow-dark:#C9C10C;
  --ss-dark:#252525;
  --ss-surface:#F6F8F6;
  --ss-border:#E2E7E3;
  --ss-border-strong:#C9D1CB;
  --ss-text:#252525;
  --ss-text-muted:#5C635E;
  --ss-radius-sm:8px;
  --ss-radius-md:12px;
  --ss-radius-lg:16px;
  --ss-radius-pill:999px;
  --ss-space-2:8px; --ss-space-3:12px; --ss-space-4:16px; --ss-space-5:24px; --ss-space-6:32px;
  --ss-section-y:clamp(48px, 6vw, 96px);
  --ss-shadow-1:0 1px 2px rgba(37,37,37,.04), 0 4px 14px rgba(37,37,37,.06);
  --ss-shadow-2:0 2px 4px rgba(37,37,37,.05), 0 10px 28px rgba(37,37,37,.10);
  --ss-shadow-3:0 4px 8px rgba(37,37,37,.06), 0 20px 48px rgba(37,37,37,.14);
  --ss-focus-color:rgba(2,123,53,.55);
  --ss-h1:clamp(2rem, 1.3rem + 2.8vw, 3.25rem);    /* 32 -> 52px */
  --ss-h2:clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); /* 26 -> 40px */
  --ss-h3:clamp(1.25rem, 1.05rem + .8vw, 1.625rem);/* 20 -> 26px */
  --ss-body:clamp(1rem, .97rem + .12vw, 1.0625rem);/* 16 -> 17px */
  --ss-small:.875rem;
}

/* 2) Betheme-Button-Variablen (globale Theme-Optionen).
      Betheme setzt sie auf "body" (mfn-dynamic-inline-css); "html body" gewinnt
      unabhängig von der Ladereihenfolge (Seraphinite), Element-Einstellungen
      aus dem BeBuilder gewinnen weiterhin.
      Vorher: gelbe Schrift auf Grün (3.47:1, fällt durch WCAG AA).
      Rahmenbreite bleibt (3px transparent), damit die Buchen-Zeile nicht springt. */
html body{
  --mfn-button-color:#FFFFFF;
  --mfn-button-color-hover:#FFFFFF;
  --mfn-button-icon-color:#FFFFFF;
  --mfn-button-icon-color-hover:#FFFFFF;
  --mfn-button-bg:#027B35;
  --mfn-button-bg-hover:#01602A;
  --mfn-button-font-weight:600;
  --mfn-button-padding:14px 28px;
  --mfn-button-border-radius:8px;
  --mfn-button-transition:.18s;
  --mfn-button-shop-color:#FFFFFF;
  --mfn-button-shop-color-hover:#FFFFFF;
  --mfn-button-shop-bg:#027B35;
  --mfn-button-shop-bg-hover:#01602A;
  /* "Theme"-Buttons (u. a. Kontaktformular-Senden, vorher #252525) */
  --mfn-button-theme-color:#FFFFFF;
  --mfn-button-theme-color-hover:#FFFFFF;
  --mfn-button-theme-bg:#027B35;
  --mfn-button-theme-bg-hover:#01602A;
  --mfn-button-theme-border-color:transparent;
  --mfn-button-theme-border-color-hover:transparent;
}

/* 3) Typografie ---------------------------------------------------------- */
:where(body){font-size:var(--ss-body);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* H1/H2/H3 bleiben die Betheme-Optionen. Nicht überschreiben. */
/* text-wrap:balance entfernt (Hotfix 22.10.): brach den Betheme-Highlight-
   Unterstrich (.highlight-border, absolut im Inline-Span) in Chrome. */
:where(.woocommerce .price del,.post-meta,.date_label){font-size:var(--ss-small);color:var(--ss-text-muted)}
:where(a){text-underline-offset:3px}
:where(.column_attr,.the_content_wrapper,.woocommerce-product-details__short-description) a:not(.button):hover{color:var(--ss-green-dark)}

/* 4) Buttons -------------------------------------------------------------
   Hotfix 22.10.: KEINE Hover-Bewegung (kein transform/translate/scale) an
   Buttons und Karten -> kein Flackern. Hover = nur Farbe + Schatten.
   Slider-Revolution-Layer (sr7-module, rs-layer, .rev-btn) bleiben unberührt. */
:where(.button,button,input[type=submit],.wp-block-button__link):not(:where(sr7-module *, rs-module *, .rev-btn)){
  transition:background-color .18s, color .18s, box-shadow .18s, border-color .18s;
}
:where(.button:not(.single_add_to_cart_button):not(.footer_button):not(#place_order):not(.disabled)):not(:where(sr7-module *, rs-module *, .rev-btn)):hover{
  box-shadow:var(--ss-shadow-1);
}

/* Fokus sichtbar für Tastatur (outline statt box-shadow, damit Builder-Schatten bleiben) */
:where(a,button,.button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ss-focus-color);outline-offset:2px;
}

/* Footer-Suche: grau -> Marken-Grün */
.wp-block-search .wp-block-search__button{background-color:var(--ss-green);color:#FFFFFF;border-radius:var(--ss-radius-sm)}
.wp-block-search .wp-block-search__button:hover{background-color:var(--ss-green-dark)}
.wp-block-search .wp-block-search__input{border-radius:var(--ss-radius-sm)}

/* Opt-in-Klassen für den BeBuilder (Feld "Custom class"):
   .ss-btn-accent    = gelber Button mit dunkler Schrift (8.1:1)
   .ss-btn-secondary = weißer Button mit grünem Rahmen
   Über Variablen, also ohne !important. */
.ss-btn-accent{
  --mfn-button-bg:var(--ss-yellow);--mfn-button-bg-hover:var(--ss-yellow-dark);
  --mfn-button-color:var(--ss-dark);--mfn-button-color-hover:var(--ss-dark);
  --mfn-button-icon-color:var(--ss-dark);--mfn-button-icon-color-hover:var(--ss-dark);
}
.ss-btn-secondary{
  --mfn-button-bg:#FFFFFF;--mfn-button-bg-hover:var(--ss-green-tint);
  --mfn-button-color:var(--ss-green);--mfn-button-color-hover:var(--ss-green-dark);
  --mfn-button-icon-color:var(--ss-green);--mfn-button-icon-color-hover:var(--ss-green-dark);
  --mfn-button-border-color:var(--ss-green);--mfn-button-border-color-hover:var(--ss-green-dark);
}

/* Grüne Label-Pille (Additional CSS .agency7-heading): Gelb auf Grün (3.5:1)
   -> Weiß auf Grün (5.3:1), Radius an Karten angeglichen. */
html .agency7-heading{color:#FFFFFF;border-radius:var(--ss-radius-pill);letter-spacing:.06em}

/* 5) Header -------------------------------------------------------------- */
:where(#Top_bar.is-sticky){box-shadow:0 1px 0 rgba(37,37,37,.06), 0 6px 20px rgba(37,37,37,.08)}

/* 6) Sektionen & Karten (alles opt-in oder Woo/Betheme-Komponenten) ------ */
/* Opt-in: im BeBuilder Section > Custom class "ss-section" bzw. "ss-section-surface" */
:where(.mcb-section).ss-section{padding-top:var(--ss-section-y);padding-bottom:var(--ss-section-y)}
:where(.mcb-section).ss-section-surface{background-color:var(--ss-surface)}
.ss-card{background:#FFFFFF;border:1px solid var(--ss-border);border-radius:var(--ss-radius-md);box-shadow:var(--ss-shadow-1);padding:var(--ss-space-5)}

/* Standort-/Produkt-Karten im Woo-Raster (Shop, Kategorien, "Neu im Shop") */
:where(ul.products) > li.product{
  background:#FFFFFF;border:1px solid var(--ss-border);border-radius:var(--ss-radius-md);
  box-shadow:var(--ss-shadow-1);overflow:hidden;padding-bottom:var(--ss-space-4);
  transition:box-shadow .2s, border-color .2s;
}
:where(ul.products) > li.product:hover{box-shadow:var(--ss-shadow-2);border-color:#D3DCD5}
:where(ul.products > li.product) .mfn-li-product-row:not(.mfn-li-product-row-image){padding-left:var(--ss-space-4);padding-right:var(--ss-space-4)}
:where(ul.products > li.product) .price{color:var(--ss-text);font-weight:700}

/* Preis-/Ausstattungsbox auf den Standortseiten (Betheme "Pricing item") */
:where(.pricing-box){
  background:#FFFFFF;border:1px solid var(--ss-border);border-radius:var(--ss-radius-md);
  box-shadow:var(--ss-shadow-1);overflow:hidden;
}
:where(.pricing-box) .plan-header .price{color:var(--ss-green)}
:where(.pricing-box) .plan-inside ul li{padding-top:10px;padding-bottom:10px;border-color:var(--ss-border)}

/* Icon-Boxen ("Ankommen / Zahlen / Camp & Relax") nur Bild-Rundung */
:where(.icon_box) .image_wrapper img{border-radius:var(--ss-radius-md)}

/* Blog / News: Beitragsbilder gerundet */
:where(.post-item,.posts_group .post) .image_frame{border-radius:var(--ss-radius-md);overflow:hidden}

/* 7) Formulare ----------------------------------------------------------- */
:where(input[type=text],input[type=email],input[type=tel],input[type=password],input[type=url],
input[type=number],input[type=date],input[type=search],select,textarea){
  transition:border-color .15s, box-shadow .15s;
}
:where(input,textarea)::placeholder{color:var(--ss-text-muted);opacity:1}
/* Kontaktformular: getippter Text war hellgrau (#A4A4A4, 2.4:1) */
.wpcf7 :where(input[type=text],input[type=email],input[type=tel],textarea){color:var(--ss-text)}

/* WooCommerce-Formular-Variablen (Woo setzt sie auf :root; "html:root" gewinnt
   ohne !important): Rahmen ruhiger, Radius 8 wie Buttons/Kennzeichen-Feld. */
html:root{
  --wc-form-border-color:#C9D1CB;
  --wc-form-border-radius:8px;
  --wc-form-border-width:1px;
}

/* Kasse & Konto: Felder 48px, Radius 8, ruhiger Rahmen
   (nicht auf der Produktseite -> Kennzeichen/Personen-Felder unberührt) */
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-account .form-row .input-text{
  min-height:48px;padding:12px 14px;font-size:16px;color:var(--ss-text);
  background-color:#FFFFFF;border:1px solid var(--ss-border-strong);border-radius:var(--ss-radius-sm);
}
.woocommerce-checkout .form-row textarea.input-text{min-height:110px}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-account .form-row .input-text:focus{border-color:var(--ss-green);box-shadow:0 0 0 3px rgba(2,123,53,.18);outline:none}
.woocommerce-checkout .select2-container .select2-selection--single{
  height:48px;border:1px solid var(--ss-border-strong);border-radius:var(--ss-radius-sm);
  display:flex;align-items:center;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered{line-height:46px;padding-left:14px;color:var(--ss-text)}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow{height:46px}
.woocommerce form .form-row label{font-weight:600;color:var(--ss-text);margin-bottom:6px}
.woocommerce form .form-row.woocommerce-invalid .input-text{border-color:#C62828}

/* Kasse: Bestellübersicht und Zahlungsbereich als Karten */
.woocommerce-checkout #order_review{
  background:#FFFFFF;border:1px solid var(--ss-border);border-radius:var(--ss-radius-md);
  box-shadow:var(--ss-shadow-1);padding:clamp(16px, 2.2vw, 28px);
}
.woocommerce-checkout #payment{border-radius:var(--ss-radius-md)}
.woocommerce-checkout #payment ul.payment_methods > li{border-radius:var(--ss-radius-sm)}
.woocommerce-checkout #place_order{min-height:52px;font-size:17px;border-radius:var(--ss-radius-sm)}

/* Hinweise: nur Rundung, Farben (rote SwiftStop-Meldungen) bleiben wie sie sind */
:where(.woocommerce-error,.woocommerce-message,.woocommerce-info,.wc-block-components-notice-banner){border-radius:var(--ss-radius-md)}

/* Block-Warenkorb (/cart/) */
:where(.wp-block-woocommerce-cart) .wc-block-cart__totals-title{font-weight:700}
:where(.wp-block-woocommerce-cart) .wc-block-components-sidebar{
  background:#FFFFFF;border:1px solid var(--ss-border);border-radius:var(--ss-radius-md);
  box-shadow:var(--ss-shadow-1);padding:clamp(16px, 2.2vw, 24px);
}

/* 8) Produktseite: nur Farben/Typo, keine Maße an Buchen-Zeile/Express --- */
:where(.single-product .summary) .price{color:var(--ss-green);font-weight:700}

/* 9) Mobil ---------------------------------------------------------------- */
@media (max-width:767px){
  :where(body){line-height:1.6}
  :where(.column_attr) p{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}

/* 11) Icons --------------------------------------------------------------
   Tabler Icons v3.49 (MIT-Lizenz, https://tabler.io/icons), Outline,
   Strichstärke 2, als data-URI-Masken (keine Dateien/Requests, keine externen
   Skripte; SVG-Quellen + Lizenz liegen in icons/). Ersetzt werden NUR
   eindeutig zuordenbare Glyphen der Betheme-Iconschrift (mfn-icons) bzw.
   fa-check in Listen. Farbe folgt currentColor (also auch Builder-Farben). */
:root{
  --ss-ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
  --ss-ico-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
  --ss-ico-message:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1'/%3E%3C/svg%3E");
  --ss-ico-chevron-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6 -6l6 6'/%3E%3C/svg%3E");
  --ss-ico-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  --ss-ico-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l16 0'/%3E%3Cpath d='M4 12l16 0'/%3E%3Cpath d='M4 18l16 0'/%3E%3C/svg%3E");
  --ss-ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
  --ss-ico-map-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0'/%3E%3C/svg%3E");
  --ss-ico-qrcode:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4'/%3E%3Cpath d='M7 17l0 .01'/%3E%3Cpath d='M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4'/%3E%3Cpath d='M7 7l0 .01'/%3E%3Cpath d='M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4'/%3E%3Cpath d='M17 7l0 .01'/%3E%3Cpath d='M14 14l3 0'/%3E%3Cpath d='M20 14l0 .01'/%3E%3Cpath d='M14 14l0 3'/%3E%3Cpath d='M14 20l3 0'/%3E%3Cpath d='M17 17l3 0'/%3E%3Cpath d='M20 17l0 3'/%3E%3C/svg%3E");
  --ss-ico-camper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M15 18a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M5 18h-1a1 1 0 0 1 -1 -1v-11a2 2 0 0 1 2 -2h12a4 4 0 0 1 4 4h-18'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M19 18h1a1 1 0 0 0 1 -1v-4l-3 -5'/%3E%3Cpath d='M21 13h-7'/%3E%3Cpath d='M14 8v10'/%3E%3C/svg%3E");
  --ss-ico-circle-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3C/svg%3E");
  --ss-ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E");
  --ss-ico-receipt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2'/%3E%3Cpath d='M14 8h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5m2 0v1.5m0 -9v1.5'/%3E%3C/svg%3E");
  --ss-ico-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.46 20.846a12 12 0 0 1 -7.96 -14.846a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 -.09 7.06'/%3E%3Cpath d='M15 19l2 2l4 -4'/%3E%3C/svg%3E");
  --ss-ico-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -8'/%3E%3Cpath d='M3 10l18 0'/%3E%3Cpath d='M7 15l.01 0'/%3E%3Cpath d='M11 15l2 0'/%3E%3C/svg%3E");
}
html .icon-clock::before,
html .icon-comment-empty-fa::before,
html .icon-up-open-big::before,
html .icon-down-open-mini::before,
html .icon-menu-fine::before,
html .icon-cancel-fine::before{
  content:"";width:1em;height:1em;vertical-align:-.125em;
  background-color:currentColor;
  -webkit-mask:var(--ss-ico) center/contain no-repeat;mask:var(--ss-ico) center/contain no-repeat;
}
.icon-clock{--ss-ico:var(--ss-ico-clock)}
.icon-comment-empty-fa{--ss-ico:var(--ss-ico-message)}
.icon-up-open-big{--ss-ico:var(--ss-ico-chevron-up)}
.icon-down-open-mini{--ss-ico:var(--ss-ico-chevron-down)}
.icon-menu-fine{--ss-ico:var(--ss-ico-menu)}
.icon-cancel-fine{--ss-ico:var(--ss-ico-x)}

/* Häkchen-Listen (BeBuilder-Spalte mit <i class="fas fa-check">):
   einheitlich als grüner Kreis mit weißem Haken. Die im Builder gesetzte
   Inline-Farbe (color:#0da122) bleibt im HTML unverändert; ausgegeben wird
   die Markenfarbe als Hintergrund. */
html ul.list_custom li > i.fa-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.375em;height:1.375em;margin-right:.5em;vertical-align:-.3em;
  border-radius:var(--ss-radius-pill);background-color:var(--ss-green-tint);
}
html ul.list_custom li > i.fa-check::before{
  content:"";width:.875em;height:.875em;background-color:var(--ss-green);
  -webkit-mask:var(--ss-ico-check) center/contain no-repeat;mask:var(--ss-ico-check) center/contain no-repeat;
}
/* Spiegelstrich-Listen (icon-minus) nur in Markenfarbe */
:where(ul.list_custom li) > i.icon-minus{color:var(--ss-green)}

/* Zurück-nach-oben: rund statt eckig */
:where(#back_to_top.footer_button){border-radius:var(--ss-radius-pill)}

/* 12) Header: sticky mit leichtem Weiß + Blur ----------------------------
   Schlägt nur die Theme-Option "Sticky-Hintergrund"; Builder-Header bleiben. */
/* QA 23.10.: Blur entfernt (Containing Block für fixed-Kinder) */
body.sticky-header #Top_bar.is-sticky{background-color:#FFFFFF}
:where(#Top_bar) .menu > li > a{transition:color .15s}

/* 13) Footer ---------------------------------------------------------------- */
:where(#Footer){border-top:1px solid var(--ss-border)}
:where(#Footer) .widget_nav_menu ul.menu{border-radius:var(--ss-radius-md);overflow:hidden}
:where(#Footer) a:not(.button):hover{color:var(--ss-green)}
:where(#Footer) .footer_copy{border-top:1px solid var(--ss-border)}
:where(#Footer) .footer_copy .copyright{font-size:var(--ss-small);color:var(--ss-text-muted)}

/* 14) Hero-Overlay (opt-in): im BeBuilder Section > Custom class
   "ss-hero-overlay" bei Sektionen mit Hintergrundbild. */
:where(.mcb-section).ss-hero-overlay{position:relative;isolation:isolate}
:where(.mcb-section).ss-hero-overlay::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.05) 100%);
}
:where(.mcb-section).ss-hero-overlay :where(h1,h2,h3,p,.column_attr){color:#FFFFFF}

/* 10) Bewegung reduzieren ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}