/*
Theme Name: Shoptimizer Child Theme
Theme URI: 
Description: Child theme of Shoptimizer
Author: CommerceGurus
Author URI: 
Template: shoptimizer
Version: 1.2.2
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/


/* Stellt sicher, dass der Inhaltsbereich von Elementor auf volle Breite geht */
.elementor-page .shoptimizer-archive {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Entfernt eventuell gesetzte Begrenzungen des Hauptcontainers */
.elementor-page #content.site-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Setzt alle Elementor-Sektionen auf die volle Bildschirmbreite */
.elementor-section {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Anpassungen Frontend Upload Datenblätter, Matrix, Katalog */
/* Box für jedes Produkt */
.acf-repeater > .acf-row {
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

/* Produkt Dropdown */
.acf-field[data-name="produkte"] {
    width: 100%;
    max-width: 400px;
}

/* Datei Upload Feld */
.acf-field[data-name="produkt_datenblatt"] {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Hochgeladene Datei anzeigen */
.acf-file-uploader {
    display: flex;
    align-items: center;
    gap: 10px;
}

.acf-file-uploader img {
    max-width: 50px;
    height: auto;
}

.acf-file-uploader .acf-button {
    background: #0073aa;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
}

.acf-file-uploader .acf-button:hover {
    background: #005b8c;
}

/* Button für Datei hochladen */
.acf-form-submit input {
    background: #28a745 !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    font-size: 16px !important;
}

.acf-form-submit input:hover {
    background: #218838 !important;
}

/* Überschrift für Dateien */
h2 {
    border-bottom: 0px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

/* Liste der hochgeladenen Dateien */
.uploaded-files ul {
    list-style: none;
    padding: 0;
}

.uploaded-files li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.uploaded-files li a {
    color: #0073aa;
    font-weight: bold;
}

.uploaded-files li a:hover {
    text-decoration: underline;
}
/* =========================================================
   Landingpage «Kostenloser Boiler-Check» – Custom CSS
   Einfügen unter: Seite bearbeiten (Elementor)
   → Einstellungen → Erweitert → Benutzerdefiniertes CSS
   Dadurch bleibt das CSS auf diese Seite beschränkt.
   ========================================================= */

/* --- 1. Sanftes Scrollen zum Formular (CTA-Anker) --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.boiler-anchor, #boiler-check-formular { scroll-margin-top: 24px; }

/* --- 2. Karten-Raster
   Elementor-Bordmittel (Flex + prozentuale Breiten + Gap) ergeben bei
   3er-/4er-Rastern Rundungsfehler und ungewollte Umbrüche. Deshalb hier
   CSS Grid. Spaltenzahl bei Bedarf einfach hier anpassen. --- */
.boiler-benefit-grid.e-con,
.boiler-process-grid.e-con,
.boiler-trust-grid.e-con,
.boiler-check-list-grid.e-con,
.boiler-testimonial-grid.e-con { display: grid; align-items: stretch; }

.boiler-benefit-grid.e-con     { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.boiler-process-grid.e-con     { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.boiler-trust-grid.e-con       { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.boiler-check-list-grid.e-con  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; align-items: start; }
.boiler-testimonial-grid.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

@media (max-width: 1024px) {
  .boiler-benefit-grid.e-con,
  .boiler-process-grid.e-con,
  .boiler-trust-grid.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .boiler-process-grid.e-con,
  .boiler-check-list-grid.e-con,
  .boiler-testimonial-grid.e-con { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .boiler-benefit-grid.e-con,
  .boiler-trust-grid.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 479px) {
  .boiler-benefit-grid.e-con,
  .boiler-trust-grid.e-con { grid-template-columns: minmax(0, 1fr); }
}

/* --- 3. Karten: dezenter Hover, gleiche Höhe --- */
.boiler-benefit-card.e-con,
.boiler-trust-card.e-con,
.boiler-testimonial-card.e-con {
  height: 100%;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.boiler-benefit-card.e-con:hover,
.boiler-trust-card.e-con:hover {
  border-color: #C3D2D5;
  box-shadow: 0 6px 20px rgba(53, 88, 96, .08);
}

/* --- 4. Prozess: Nummernkreis + dezente Verbindungslinie --- */
.boiler-step-number .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #355860;
  color: #FFFFFF;
  font-weight: 700;
}
.boiler-process-step.e-con { position: relative; }
@media (min-width: 1025px) {
  .boiler-process-step.e-con:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 60px;
    right: -24px;
    height: 1px;
    background: #DDE4E5;
  }
}

/* --- 5. Buttons: Hover, Mindesthöhe, sichtbarer Tastatur-Fokus --- */
.boiler-primary-button .elementor-button,
.boiler-form .elementor-button[type="submit"] {
  min-height: 54px;
  transition: background-color .2s ease, transform .2s ease;
}
.boiler-primary-button .elementor-button:hover,
.boiler-form .elementor-button[type="submit"]:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .boiler-primary-button .elementor-button:hover,
  .boiler-form .elementor-button[type="submit"]:hover { transform: none; }
}
.boiler-header-cta .elementor-button { min-height: 46px; }

.boiler-primary-button .elementor-button:focus-visible,
.boiler-phone .elementor-button:focus-visible,
.boiler-form .elementor-button:focus-visible,
.boiler-form input:focus-visible,
.boiler-form select:focus-visible,
.boiler-form textarea:focus-visible,
.boiler-header a:focus-visible,
.boiler-footer a:focus-visible,
.boiler-form-note a:focus-visible {
  outline: 3px solid rgba(200, 104, 46, .3);
  outline-offset: 3px;
}
.boiler-form input:focus,
.boiler-form select:focus,
.boiler-form textarea:focus { border-color: #355860; }

/* --- 6. Mobile: CTA über volle Breite, Touch-Ziele --- */
@media (max-width: 767px) {
  .boiler-primary-button .elementor-button { width: 100%; justify-content: center; min-height: 52px; }
  .boiler-header-cta .elementor-button { width: auto; min-height: 44px; }
  .boiler-hero-image img { max-height: 320px; width: auto; }
}

/* --- 7. Hero-Bild --- */
.boiler-hero-image img {
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(53, 88, 96, .10);
}

/* --- 8. Formularbereich auf dunklem Petrol --- */
.boiler-form-usp .elementor-icon-list-icon i { color: #E4A57C; }
.boiler-form-usp .elementor-icon-list-text { color: #FFFFFF; }
.boiler-form .elementor-field-group > label { font-weight: 600; }
.boiler-form .elementor-field-required .elementor-field-label::after { color: #C8682E; }
.boiler-form .elementor-message.elementor-message-success {
  background: #EEF4F1;
  border: 1px solid #C6DACD;
  color: #1F4A34;
  padding: 14px 16px;
  border-radius: 6px;
}
.boiler-form .elementor-message.elementor-message-danger { color: #A32020; }
.boiler-form-note a { color: #355860; text-decoration: underline; }

/* --- 9. Select-Felder: nur EIN Pfeil
   Elementor rendert den Caret als SVG in .select-caret-down-wrapper.
   Zusaetzlich koennen ein eicon-Pfeil ueber ::before (aeltere/gecachte
   Elementor-CSS) und der native Browser-Pfeil sichtbar bleiben.
   Hier bleibt bewusst nur der SVG-Caret uebrig. --- */
.boiler-form .elementor-field-group .elementor-select-wrapper select,
.boiler-form select.elementor-field-textual {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  padding-inline-end: 40px;
}
.boiler-form .elementor-field-group .elementor-select-wrapper::before,
.boiler-form .elementor-field-group .elementor-select-wrapper::after {
  content: none !important;
  display: none !important;
}
.boiler-form .elementor-field-group .elementor-select-wrapper .select-caret-down-wrapper {
  display: flex !important;
  inset-inline-end: 14px;
  pointer-events: none;
}
.boiler-form .elementor-field-group .elementor-select-wrapper .e-font-icon-svg,
.boiler-form .elementor-field-group .elementor-select-wrapper svg {
  fill: #355860;
  width: 14px;
  height: 14px;
}
/* Internet-Explorer-Altlast: nativer Pfeil in Edge-Legacy */
.boiler-form select::-ms-expand { display: none; }

/* --- 10. Keine horizontale Scrollbar --- */
.boiler-hero, .boiler-benefits, .boiler-process, .boiler-trust, .boiler-form-section { overflow-x: clip; }