/*
 Theme Name:   Strompilot
 Author:       Life Design
 Template:     sierra
 Version:      1.0.0
 Text Domain:  strompilot
*/



/*--------------------------------Handy Menü Anpassungen-----------------------*/

/* "Kontakt" ab 1025px Bildschirmbreite ausblenden */
@media (min-width: 1025px) {
  #menu-item-24336 {
    display: none !important;
  }
}

/*--------------------------------------Bilder Schwebeanimation--------------------------*/

/* alle Pseudo-Unterstriche anvisieren */
.ekit-menu-nav-link::after {
  background-color: #F1C401 !important;
}

/* falls es einen eigenen Style für den aktiven Zustand gibt */
.ekit-menu-nav-link.active::after {
  background-color: #F1C401 !important;
}



/*----------------------------------WP-Forms Formular-------------------------------------*/

/* ----- Globale Anpassungen für WPForms IDs #22066 & #22419 ----- */

/* LINIE ENTFERNEN */
#wpforms-22066 .wpforms-page.wpforms-page-1,
#wpforms-23907 .wpforms-page.wpforms-page-1 {
    border-top: none !important;
    box-shadow: none !important;
    background: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#wpforms-22066 #wpforms-22066-field_20-container.wpforms-field-layout,
#wpforms-22066 #wpforms-22066-field_70-container.wpforms-field-layout,
#wpforms-23907 #wpforms-22419-field_20-container.wpforms-field-layout,
#wpforms-23907 #wpforms-22419-field_70-container.wpforms-field-layout {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#wpforms-22066 .wpforms-page.wpforms-page-1 .wpforms-field-layout::before,
#wpforms-22066 .wpforms-page.wpforms-page-1 .wpforms-field-layout::after,
#wpforms-23907 .wpforms-page.wpforms-page-1 .wpforms-field-layout::before,
#wpforms-23907 .wpforms-page.wpforms-page-1 .wpforms-field-layout::after {
    display: none !important;
}

#wpforms-22066 .wpforms-field-layout > h3.wpforms-field-label,
#wpforms-23907 .wpforms-field-layout > h3.wpforms-field-label {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding-top: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    color: #444444 !important;
}

#wpforms-22066 .wpforms-field-container,
#wpforms-23907 .wpforms-field-container {
    border-top: none !important;
}

#wpforms-22066.wpforms-container,
#wpforms-23907.wpforms-container {
    border-top: none !important;
}



/* --- Eingabefelder, Selects, Dropdown --- */
#wpforms-22066 .wpforms-field-container .wpforms-field input[type="text"],
#wpforms-22066 .wpforms-field-container .wpforms-field input[type="number"],
#wpforms-22066 .wpforms-field-container .wpforms-field input[type="email"],
#wpforms-22066 .wpforms-field-container .wpforms-field input[type="tel"],
#wpforms-22066 .wpforms-field-container .wpforms-field textarea,
#wpforms-23907 .wpforms-field-container .wpforms-field input[type="text"],
#wpforms-23907 .wpforms-field-container .wpforms-field input[type="number"],
#wpforms-23907 .wpforms-field-container .wpforms-field input[type="email"],
#wpforms-23907 .wpforms-field-container .wpforms-field input[type="tel"],
#wpforms-23907 .wpforms-field-container .wpforms-field textarea {
    border-radius: 50px !important;
    padding: 12px 20px !important;
    border: 1px solid #dddddd !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    height: auto;
    color: #333333 !important;
    background-color: #ffffff !important;
}


/* Wir fügen einen neuen Block hinzu, der NUR das klassische <select>-Feld im neuen Formular stylt */
#wpforms-23907 .wpforms-field-container select.wpforms-field-large {
    border-radius: 50px !important;
    padding: 12px 20px !important;
    border: 1px solid #dddddd !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    height: 50px !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888888' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.2rem center !important;
    background-size: 1em !important;
    padding-right: 2.5rem !important;
}
/* --------------------------------------------------------------------- */

#wpforms-22066 .wpforms-field-container .choices__inner,
#wpforms-23907 .wpforms-field-container .choices__inner {
    border-radius: 50px !important;
    border: 1px solid #dddddd !important;
    padding-left: 20px !important;
    padding-right: 35px !important;
    min-height: 50px !important;
    background-color: #ffffff !important;
    font-size: 15px !important;
    color: #333333;
    display: flex;
    align-items: center;
    position: relative;
}

#wpforms-22066 .wpforms-field-container .choices__list--single .choices__item,
#wpforms-23907 .wpforms-field-container .choices__list--single .choices__item {
    font-size: 15px !important;
    color: #333333 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

#wpforms-22066 .choices__list--dropdown,
#wpforms-23907 .choices__list--dropdown {
    border-radius: 8px !important;
    border: 1px solid #c8c8c8 !important;
    margin-top: 3px !important;
    background-color: #ffffff !important;
    z-index: 999999 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.18) !important;
}

#wpforms-22066 .choices__list--dropdown .choices__list,
#wpforms-23907 .choices__list--dropdown .choices__list {
    max-height: 170px !important;
    overflow-y: auto !important;
    padding-top: 4px !important;
    padding-bottom: 18px !important;
    position: relative;
    background-color: #ffffff !important;
}

#wpforms-22066 .choices__list--dropdown .choices__item--choice,
#wpforms-23907 .choices__list--dropdown .choices__item--choice {
    padding: 10px 15px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f5f5f5;
    background-color: #fff !important;
    color: #333 !important;
}

#wpforms-22066 .choices__list--dropdown .choices__item--choice:last-child,
#wpforms-23907 .choices__list--dropdown .choices__item--choice:last-child {
    border-bottom: none !important;
}

#wpforms-22066 .choices__list--dropdown .choices__item--choice.is-highlighted,
#wpforms-23907 .choices__list--dropdown .choices__item--choice.is-highlighted {
    background-color: #0D4F78 !important;
    color: #ffffff !important;
}

#wpforms-22066 .wpforms-field-container .wpforms-field input[type="text"]:focus,
#wpforms-22066 .wpforms-field-container .wpforms-field input[type="number"]:focus,
#wpforms-22066 .wpforms-field-container .wpforms-field input[type="email"]:focus,
#wpforms-22066 .wpforms-field-container .wpforms-field input[type="tel"]:focus,
#wpforms-22066 .wpforms-field-container .wpforms-field textarea:focus,
#wpforms-22066 .wpforms-field-container .choices.is-focused .choices__inner,
#wpforms-23907 .wpforms-field-container .wpforms-field input[type="text"]:focus,
#wpforms-23907 .wpforms-field-container .wpforms-field input[type="number"]:focus,
#wpforms-23907 .wpforms-field-container .wpforms-field input[type="email"]:focus,
#wpforms-23907 .wpforms-field-container .wpforms-field input[type="tel"]:focus,
#wpforms-23907 .wpforms-field-container .wpforms-field textarea:focus,
#wpforms-23907 .wpforms-field-container .choices.is-focused .choices__inner,
/* --- WIR FÜGEN EINEN SELEKTOR FÜR DEN FOKUS DES KLASSISCHEN DROPDOWNS HINZU --- */
#wpforms-23907 .wpforms-field-container select.wpforms-field-large:focus {
    border-color: #0D4F78 !important;
    box-shadow: 0 0 0 3px rgba(13, 79, 120, 0.15) !important;
    background-color: #ffffff !important;
}

/* --- BUTTON STYLING --- */
#wpforms-22066 .wpforms-pagebreak-center,
#wpforms-23907 .wpforms-pagebreak-center {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 8px !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
}

#wpforms-22066 .wpforms-page-button,
#wpforms-22066 .wpforms-submit,
#wpforms-23907 .wpforms-page-button,
#wpforms-23907 .wpforms-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #0D4F78 !important;
    color: #FFFFFF !important;
    padding: 1.5em 3em !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    text-transform: none !important;
    transition: background-color 0.2s ease-in-out !important;
}

#wpforms-22066 .wpforms-page-button:hover,
#wpforms-22066 .wpforms-submit:hover,
#wpforms-23907 .wpforms-page-button:hover,
#wpforms-23907 .wpforms-submit:hover {
    background-color: #0f567f !important;
    color: #FFFFFF !important;
}

#wpforms-22066 .wpforms-page-button.wpforms-page-prev,
#wpforms-23907 .wpforms-page-button.wpforms-page-prev {
    background-color: #D1D1D1 !important;
    color: #FFFF !important;
}

#wpforms-22066 .wpforms-page-button.wpforms-page-prev:hover,
#wpforms-23907 .wpforms-page-button.wpforms-page-prev:hover {
    background-color: #c1bfbf !important;
    color: #FFFF !important;
}



/* --- ANPASSUNGEN FÜR RADIO-BUTTONS UNTER DEN TARIFKARTEN (Feld-ID #63) --- */
#wpforms-22066 #wpforms-22066-field_63-container,
#wpforms-23907 #wpforms-22419-field_63-container {
    margin-top: 5px !important;
    padding-top: 10px !important;
    border-top: none !important;
}

#wpforms-22066 #wpforms-22066-field_63-container .wpforms-field-label.wpforms-label-hide,
#wpforms-22066 #wpforms-22066-field_63-container > legend.wpforms-field-label,
#wpforms-22419 #wpforms-22419-field_63-container .wpforms-field-label.wpforms-label-hide,
#wpforms-22419 #wpforms-22419-field_63-container > legend.wpforms-field-label {
    display: none !important;
}

#wpforms-22066 #wpforms-22066-field_63-container ul.wpforms-field-required,
#wpforms-22419 #wpforms-22419-field_63-container ul.wpforms-field-required {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
}

#wpforms-22066 #wpforms-22066-field_63-container ul.wpforms-field-required > li,
#wpforms-22419 #wpforms-22419-field_63-container ul.wpforms-field-required > li {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-basis: calc(33.333% - 10px) !important;
    min-width: 120px !important;
    padding: 5px !important;
    box-sizing: border-box !important;
}

#wpforms-22066 #wpforms-22066-field_63-container input[type="radio"],
#wpforms-22419 #wpforms-22419-field_63-container input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

#wpforms-22066 #wpforms-22066-field_63-container label.wpforms-field-label-inline,
#wpforms-22419 #wpforms-22419-field_63-container label.wpforms-field-label-inline {
    font-size: 15px !important;
    color: #333333 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    padding-left: 0 !important;
    vertical-align: middle !important;
}

/* Fortschrittsbalken */
#wpforms-22066 .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap,
#wpforms-22419 .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
    height: 10px !important;
    border-radius: 5px !important;
    background-color: #e9ecef !important;
}

#wpforms-22066 .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress,
#wpforms-22419 .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
    height: 100% !important;
    border-radius: 5px !important;
    background-color: #f1c401 !important;
}

/* Feld-Labels */
#wpforms-22066 .wpforms-field-label,
#wpforms-22419 .wpforms-field-label {
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
    color: #444444 !important;
    background-color: transparent !important;
}

#wpforms-22066 .wpforms-field-layout > h3.wpforms-field-label,
#wpforms-22419 .wpforms-field-layout > h3.wpforms-field-label {
    padding-top: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/*---------------------------------------Wechselservice Tabelle----------------------------------*/

/* Hauptcontainer für die Servicegebühr-Tabelle */
.service-fee-container {
    max-width: 100%;
    overflow-x: auto; /* Erzeugt den horizontalen Schieberegler auf kleinen Bildschirmen */
    border-radius: 30px;
    background-color: #ffffff;
    padding: 0;
    border: none;
    box-sizing: border-box;
    /* Kein box-shadow, wie gewünscht */
}

/* Grundlegende Tabellen-Stile */
.service-fee-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    border-style: hidden; /* Verhindert doppelte Ränder an den Ecken */
}

/* Allgemeine Stile für alle Zellen (Kopf- und Datenzellen) */
.service-fee-table th,
.service-fee-table td {
    padding: 15px 10px;
    border: 1px solid #e9e9e9;
    text-align: center;
}

/* Spezifische Stile für die Kopfzeile (kWh-Werte) */
.service-fee-table thead th {
    font-weight: normal;
    color: #555;
    background-color: #ffffff; /* Weißer Hintergrund, wie gewünscht */
}

/* Stile für die kWh-Werte und das "kWh"-Label */
.service-fee-table thead .kwh-value {
    font-weight: 600;
    display: block;
}

.service-fee-table thead .kwh-label {
    font-size: 0.75em;
    display: block;
    line-height: 1.2;
    color: #888;
}

/* Spezifische Stile für die Zeilen-Überschriften "STROM" und "GAS" */
.service-fee-table tbody th {
    font-weight: bold;
    color: #333;
    background-color: #ffffff;
    text-align: center; /* Zentriert, wie gewünscht */
    vertical-align: middle; /* Zusätzlich vertikal zentriert */
}

/* Spezifische Stile für die Datenzellen (Preise) */
.service-fee-table tbody td {
    color: #333;
    background-color: #ffffff;
}


/* Der Container für die beiden Info-Texte */
.fee-details-footer {
    display: flex;
    justify-content: space-between; /* Drückt die Elemente auseinander */
    align-items: center;
    padding: 20px 25px;
    background-color: transparent !important; /* KEIN HINTERGRUND */
    border-top: 1px solid #dee2e6; /* Eine saubere Trennlinie, die zu Ihrer Tabelle passt */
    font-size: 1em;
    color: #495057; /* Passt zur Schriftfarbe Ihrer Tabelle */
}

.fee-details-footer strong {
    color: #212529; /* Passt zur Schriftfarbe Ihrer Tabellen-Header */
}

/* Responsive Anpassung für Mobilgeräte */
@media (max-width: 768px) {
    .fee-details-footer {
        flex-direction: column; /* Stapelt die Texte untereinander */
        align-items: center;
        gap: 15px; /* Abstand zwischen den beiden Texten */
        text-align: center;
    }
}




/*----------------------Vertrag abschließen button------------------*/

/* bis 1925px: 90% skalieren, -30px verschieben */
@media (max-width: 1925px) {
  .scale-down-large img {
    transform-origin: bottom center !important;
    transform: scale(0.9) translateX(-30px) !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* bis 1760px: 80% skalieren, -70px verschieben */
@media (max-width: 1760px) {
  .scale-down-large img {
    transform-origin: bottom center !important;
    transform: scale(0.8) translateX(-70px) !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* bis 1650px: 60% skalieren, -70px verschieben */
@media (max-width: 1650px) {
  .scale-down-large img {
    transform-origin: bottom center !important;
    transform: scale(0.7) translateX(-120px) !important;
    display: block !important;
    margin: 0 auto !important;
  }
}


/* bis 1925px: 90% skalieren, +30px nach rechts */
@media (max-width: 1925px) {
  .scale-down-large-right img {
    transform-origin: bottom center !important;
    transform: scale(0.9) translateX(50px) !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* bis 1760px: 80% skalieren, +70px nach rechts */
@media (max-width: 1760px) {
  .scale-down-large-right img {
    transform-origin: bottom center !important;
    transform: scale(0.9) translateX(150px) !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* bis 1650px: 60% skalieren, +70px nach rechts */
@media (max-width: 1550px) {
  .scale-down-large-right img {
    transform-origin: bottom center !important;
    transform: scale(0.9) translateX(200px) !important;
    display: block !important;
    margin: 0 auto !important;
  }
}


/* bis 1650px: 60% skalieren, +70px nach rechts */
@media (max-width: 1550px) {
  .scale-down-large-right-2 img {
    transform-origin: bottom center !important;
    transform: scale(0.9) translateX(35px) translateY(35px) !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* bis 1650px: 60% skalieren, +70px nach rechts */
@media (max-width: 1650px) {
  .scale-down-large-right-2 img {
    transform-origin: bottom center !important;
    transform: scale(0.9) translateX(35px) translateY(35px) !important;
    display: block !important;
    margin: 0 auto !important;
  }
}


/* bis 1650px: 60% skalieren, +70px nach rechts */
@media (max-width: 1760px) {
  .scale-down-large-right-2 img {
    transform-origin: bottom center !important;
    transform: scale(0.9) translateX(35px) translateY(35px) !important;
    display: block !important;
    margin: 0 auto !important;
  }
}



/*-------------------------------------------Footer Hintergrund Banner---------------------------------*/

/* 1) Footer-Grundfarbe bewusst setzen (statt Template-Fallback) */
#site-footer {
  background-color: #fff !important; /* oder deine gewünschte Footer-Hintergrundfarbe */
}