/* Kierer Core: Widget „Kierer Schritt-Assistent" (kierer_steps).
 *
 * Übernommen am 14.09.2026 aus dem Child-Theme (kierer-child/custom-steps.php), wo der
 * Assistent als HTML-Block auf der Wärmepumpen-Seite lief. Regeln und Werte sind unverändert,
 * auch offensichtliche Tippfehler (z. B. „width: 80x"), damit das Aussehen 1:1 gleich bleibt.
 *
 * Geändert sind nur die Selektoren:
 * - .custom-step-container heißt hier .kierer-steps. Die alte Klasse bleibt dem Theme, sonst
 *   würde dessen Skript zusätzlich am Widget ziehen.
 * - Regeln, die im Theme ohne Container für die ganze Website galten (.icon-gif, .elementor-icon,
 *   .elementor-icon-box-description a ...), gelten hier nur im Assistenten: :where(.kierer-steps)
 *   zählt bei der Spezifität nicht mit, die Regeln setzen sich also genau so durch wie vorher.
 * - Seit 1.4.12 heißen die Symbol-Klassen ks-icon-… statt icon-…. Elementor Pro gibt allen Klassen,
 *   die mit „icon-“ beginnen, die Symbolschrift icomoon (testimonials-carousel.css, !important), die
 *   Titel neben den Symbolen standen dadurch in einer Ersatzschrift mit Serifen. Was die Regel sonst
 *   setzte, gilt am Titel weiter ausdrücklich (siehe „Symbol-Titel" unten), damit sich nur die Schrift ändert.
 */
/* Bereich 1 =================== Desktop Ansicht (größer als 1086px) =================== */
.kierer-steps {
    font-family: Arial, sans-serif;
    margin-bottom: 50px;
    padding-top: 50px;
}

.kierer-steps .step-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    position: relative;
}

.kierer-steps .progress-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin-bottom: 20px;
    position: relative;
}

.kierer-steps .progress-bar .step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: lightgray;
    color: white;
    font-size: 18px;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.kierer-steps .progress-bar .step.active {
    background-color: #E64515;
}

.kierer-steps .progress-bar .step.current {
    transform: scale(1.2);
}

.kierer-steps .progress-bar .line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background-color: lightgray;
    z-index: 0;
    transform: translateY(-50%);
}

.kierer-steps .progress-bar .line .progress {
    height: 100%;
    background-color: #E64515;
    width: 0;
    transition: width 0.6s ease;
}

.kierer-steps .step-label-container {
    display: flex;
    justify-content: space-between;
    width: 80%;
    position: relative;
}

.kierer-steps .step-label {
    text-align: center;
    color: gray;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    transition: color 0.3s ease;
}

.kierer-steps .step-label.active {
    color: #E64515;
}

/* Bereich 2 =================== Textbereich anpassen =================== */
.kierer-steps .step-content {
    text-align: left; /* Linksbündig */
    width: 80%;
    margin: 0 auto;
    position: relative;
    opacity: 0;
    transition: opacity 0.6s ease;
    display: none;
}

.kierer-steps .step-content.active {
    display: block;
    opacity: 1;
}

.kierer-steps .content-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-top: 20px;
    position: relative;
    padding-top: 20px;
}

/* =================== Großer Titel =================== */
.kierer-steps .content-container h2.main-title {
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3em;
    letter-spacing: -0.02em;
}

/* =================== Haupttext =================== */
.kierer-steps .content-container p.main-text {
    font-size: 16px;
    line-height: 1.6em;
    margin-bottom: 30px;
}

/* =================== Kleiner Titel =================== */
.kierer-steps .content-container h3.sub-title {
    font-size: 20px;
    font-weight: 650;
    margin-bottom: 15px;
}

/* =================== Untertext =================== */
.kierer-steps .content-container p.sub-text {
    font-size: 16px;
    line-height: 1.6em;
    margin-bottom: 30px;
}

.kierer-steps .content-container img {
    width: 700px;
    height: auto;
}

.kierer-steps .text-content {
    width: 45%;
    padding-left: 30px;
    margin-top: 30px;
    box-sizing: border-box;
    text-align: left;
}

/* =================== Gif-Icon + Text Bereich =================== */
:where(.kierer-steps) .ks-icon-text-container {
    display: flex;
    align-items: center;
    margin-top: 20px;
    max-width: 40%; /* Begrenzt den Textbereich auf 100% der Gesamtbreite */
}

/* ===== Icon GIF Styling (Größe angepasst) ===== */
:where(.kierer-steps) .ks-icon-gif {
    width: 80x !important; /* Breite auf 120px erhöht */
    height: auto !important;
    max-width: 80px !important; /* Maximalbreite festgelegt */
    object-fit: contain !important; /* Verhindert Verzerrungen */
    margin-right: 0px; /* Abstand zum Text */
}

/* ===== Icon Titel Styling (angepasst) ===== */
:where(.kierer-steps) .ks-icon-title {
    font-size: 20px; /* Titel Größe (nicht zu groß) */
    font-weight: 550; /* Etwas leichter, ähnlich wie im 2. Absatz */
    margin-bottom: 10px; /* Ähnlicher Abstand wie im 2. Absatz */
    color: #333; /* Gleiche Farbe wie der Text im 2. Absatz */
}

/* ===== Icon Beschreibung Styling ===== */
/* Symbol-Titel (1.4.12): Werte der früheren icomoon-Regel außer der Schrift. Die Schrift kommt jetzt wie
   bei den übrigen Überschriften aus dem Elementor-Kit (Plus Jakarta Sans). */
:where(.kierer-steps) .ks-icon-title {
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

:where(.kierer-steps) .ks-icon-description {
    font-size: 16px; /* Textgröße */
    line-height: 1.6em;
    max-width: 100%; /* Text innerhalb des neuen Containers */
}



/* =================== Step-1 Anfrage Icon  =================== */
:where(.kierer-steps) .anfrage-icon-text-container {
    display: flex;
    flex-direction: row;
    gap: 40px; /* Abstand zwischen den Icon-Text-Blöcken */
}

:where(.kierer-steps) .elementor-icon-box-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Icon und Text */
}

:where(.kierer-steps) .elementor-icon {
    font-size: 25px; /* Kleinere Icon-Größe */
    color: #E64515; /* Standardfarbe des Icons */
    transition: color 0.3s ease; /* Übergang für Farbänderung */
}

:where(.kierer-steps) .elementor-icon:hover {
    color: #E64515 !important; /* Orangener Farbton auf Hover */
}

:where(.kierer-steps) .elementor-icon-box-description a {
    color: #333;
    text-decoration: none; /* Entfernt die Unterstreichung */
    font-size: 18px;
    transition: color 0.3s ease; /* Übergang für die Farbänderung auf Hover */
}

:where(.kierer-steps) .elementor-icon-box-description a:hover {
    color: #E64515; /* Orangener Farbton auf Hover */
    text-decoration: none; /* Keine Unterstreichung auf Hover */
}



/* =================== Buttons Bereich =================== */

.kierer-steps .button-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-right: 30px;
    margin-top: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    gap: 10px;
}

/* Buttons Styling */
.kierer-steps .next-btn, .kierer-steps .prev-btn {
    display: inline-block;
    padding: 18px 38px;
    background-color: #333;
    color: white;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    line-height: 1.5;
    border: none;
}

/* Hover-Effekt */
.kierer-steps .next-btn:hover, .kierer-steps .prev-btn:hover {
    background-color: #E64515;
    border-color: #E64515;
}

.kierer-steps .header-box {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 10;
    background-color: #E64515;
    color: white;
    padding: 10px 20px;
    font-size: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.8s ease, opacity 0.8s ease;
}

.kierer-steps .header-box.visible {
    transform: translateX(0);
    opacity: 1;
}


/* Bereich 3 =========================== */
/* Standardbild-Einstellungen für Bildschirme über 1550px */
.kierer-steps .content-container img {
    width: 700px;
    max-width: 700px; /* Verhindert, dass das Bild größer als 700px wird */
    height: auto;
    transition: width 0.5s ease; /* Angepasste Übergangsgeschwindigkeit (z.B. 0.5s) */
}

/* Bereich 3.1 =================== Skalierung des Bildes ab 1550px bis 1201px =================== */
@media (max-width: 1900px) and (min-width: 1201px) {
    .kierer-steps .content-container img {
        width: 55%; /* Angepasste Breite, damit Bild + Text 100% nicht überschreiten */
        height: auto; /* Höhe proportional skalieren */
    }
}

	    /* Titel kleiner machen ab 1550px */
@media (max-width: 1550px) and (min-width: 1201px) {
    .kierer-steps .content-container h2.main-title {
        font-size: 35px; /* Feste, kleinere Schriftgröße */
    }
}

/* Bereich 3.2 =================== Weitere Verkleinerung ab 1200px =================== */
@media (max-width: 1200px) {
    .kierer-steps .content-container img {
        width: 80%; /* Bild weiter auf 80% verkleinern */
    }
}

/* Bereich 3.3 =================== Buttons Positionierung =================== */
/* Standard-Stil (ohne Media Queries) */
.kierer-steps .button-container {
    bottom: 0px; /* Standard-Abstand */
}

	/* Für alle Bildschirmgrößen über 1900px (also ab 1901px) */
@media (min-width: 1901px) {
    .kierer-steps .button-container {
        bottom: 0px; /* Setzt die Buttons auf 0px */
    }
}

/* Von 1899px bis 1850px Bildschirmbreite */
@media (max-width: 1899px) and (min-width: 1850px) {
    .kierer-steps .button-container {
        bottom: -5px; /* Verschiebt die Buttons um -5px */
    }
}

/* Von 1849px bis 1800px Bildschirmbreite */
@media (max-width: 1880px) and (min-width: 1809px) {
    .kierer-steps .button-container {
        bottom: -20px; /* Verschiebt die Buttons um -10px */
    }
}

/* Von 1799px bis 1750px Bildschirmbreite */
@media (max-width: 1810px) and (min-width: 1750px) {
    .kierer-steps .button-container {
        bottom: -30px; /* Verschiebt die Buttons um -15px */
    }
}

/* Von 1749px bis 1700px Bildschirmbreite */
@media (max-width: 1749px) and (min-width: 1700px) {
    .kierer-steps .button-container {
        bottom: -30px; /* Verschiebt die Buttons um -20px */
    }
}

	/* Von 1749px bis 1700px Bildschirmbreite */
@media (max-width: 1599px) and (min-width: 1400px) {
    .kierer-steps .button-container {
        bottom: -40px; /* Verschiebt die Buttons um -20px */
    }
}

		/* Von 1749px bis 1700px Bildschirmbreite */
@media (max-width: 1399px) and (min-width: 1200px) {
    .kierer-steps .button-container {
        bottom: -50px; /* Verschiebt die Buttons um -20px */
    }
}

/* Anpassung der Icon-Abstände */
.kierer-steps .ks-icon-text-container {
    margin-top: 10px; /* Abstand oben */
    margin-bottom: 20px; /* Abstand unten */
}

/* Sicherstellen, dass die Icons sichtbar sind */
.kierer-steps .ks-icon-text-container {
    display: block; /* Stellen Sie sicher, dass der Container angezeigt wird */
    visibility: visible; /* Stellen Sie sicher, dass der Container sichtbar ist */
    opacity: 1; /* Stellen Sie sicher, dass der Container nicht transparent ist */
    z-index: 999; /* Sollte unter den Buttons liegen */
}

/* Sicherstellen, dass die GIF-Icons korrekt angezeigt werden */
.kierer-steps .ks-icon-text-container img.ks-icon-gif {
    display: inline-block; /* Stellen Sie sicher, dass die Icons angezeigt werden */
    visibility: visible; /* Stellen Sie sicher, dass die Icons sichtbar sind */
    opacity: 1; /* Stellen Sie sicher, dass die Icons nicht transparent sind */
    width: auto; /* Größe nach Bedarf anpassen */
    height: auto; /* Größe nach Bedarf anpassen */
}

/* ==================================== */
/* Bereich 4 - Anpassungen ab 1200px */
/* ==================================== */
@media (max-width: 1200px) {
    .kierer-steps .content-container {
        display: block;
        width: 100%;
        text-align: left; /* Links bündig */
    }

    .kierer-steps .content-container img {
        width: 80%; /* Bild nimmt die volle Breite des Containers ein */
        margin: 0 0 20px 0; /* Abstand nur unten */
        display: block;
    }

    .kierer-steps .text-content {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        text-align: left; /* Text linksbündig */
    }

    /* Fortschrittsleiste: Labels ausblenden */
    .kierer-steps .progress-bar .step-label {
        display: none;
    }

    /* Buttons ausblenden */
    .kierer-steps .button-container {
        display: none;
    }

    /* Weniger Abstand zwischen Fortschrittsleiste und Inhalt */
    .kierer-steps .progress-bar {
        margin-bottom: 10px;
    }
}

@media (max-width: 1200px) and (min-width: 481px) {
    /* Bereich 4.1 =================== Titelanpassung in der Tablet-Ansicht =================== */
    .kierer-steps .content-container h2.main-title {
        font-size: 40px; /* Feste, kleinere Schriftgröße für Tablet */
    }
}


/* Bereich 4.2 =================== Anordnung der GIF-Icons unter 550px =================== */
@media (max-width: 550px) {
    .kierer-steps .ks-icon-text-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Beibehaltung der Ausrichtung */
        gap: 0px; /* Verringert den generellen Abstand zwischen den Elementen */
    }

    /* Sicherstellen, dass die Icons ihre Größe beibehalten */
    .kierer-steps .ks-icon-text-container img.ks-icon-gif {
        /* Keine Änderungen an width oder height, um die Größe beizubehalten */
        /* Entfernen oder Minimieren von margin-bottom */
        margin-bottom: 0px; /* Reduziert den Abstand unter den Icons */
    }

    /* Sicherstellen, dass die Titel nicht beeinflusst werden */
    .kierer-steps .ks-icon-text-container .ks-icon-title {
        /* Keine Änderungen an font-size oder anderen Eigenschaften */
        margin-bottom: 0px; /* Reduziert den Abstand unter den Titeln */
        text-align: left; /* Optional: Text linksbündig ausrichten */
    }
}


/* ==================================== */
/* Bereich 5 - Handy-Ansicht (max-width: 480px) */
/* ==================================== */

/* Handy-Ansicht (max-width: 480px) */
@media (max-width: 480px) {

    /* Fortschrittsleiste */
    .kierer-steps .progress-bar {
        display: flex;
        margin-bottom: 0; /* Abstand zur Fortschrittsleiste verringern */
    }

    /* Schritt Kreise (Zahlen) */
    .kierer-steps .progress-bar .step {
        margin-bottom: 0; /* Entfernt unnötigen Abstand unter den Kreisen */
    }

    /* Orange Kästchen */
    .kierer-steps .header-box {
        font-size: 18px;
        padding: 8px 12px; /* Padding verringern für kompaktere Darstellung */
        margin-top: -10px; /* Abstand zum Fortschrittsbalken verringern */
    }

    /* Bild */
    .kierer-steps .content-container img {
        width: 100%;
        margin-top: 0; /* Kein zusätzlicher Abstand über dem Bild */
        margin-bottom: 15px; /* Minimaler Abstand unter dem Bild */
    }

    /* Text */
    .kierer-steps .text-content {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        padding-top: 10px;
        text-align: left;
    }

    /* Entferne die Buttons */
    .kierer-steps .button-container {
        display: none;
    }

    /* Entferne die Schritt-Labels */
    .kierer-steps .step-label {
        display: none;
    }
}

@media (max-width: 650px) {
    /* Bereich 5.1 =================== Titelanpassung in der Handy-Ansicht =================== */
    .kierer-steps .content-container h2.main-title {
        font-size: 28px; /* Feste, kleinere Schriftgröße für Handy */
    }
}


/* Bereich 5.2 =================== Step 1 Icons ab 400px =================== */
@media (max-width: 400px) {
    /* Container bleibt horizontal */
    :where(.kierer-steps) .anfrage-icon-text-container {
        display: flex;
        flex-direction: row; /* Beibehaltung der horizontalen Anordnung */
        justify-content: space-between; /* Verteilt die Icon-Blöcke gleichmäßig */
        align-items: flex-start; /* Links ausrichten */
        gap: 10px; /* Anpassung des Abstands zwischen den Icon-Blöcken */
    }

    /* Innerhalb jedes Icon-Text-Blocks: Icon und Text vertikal stapeln */
    :where(.kierer-steps) .anfrage-icon-text-container .elementor-icon-box-wrapper {
        display: flex;
        flex-direction: column; /* Stapelt Icon und Text vertikal */
        align-items: flex-start; /* Links ausrichten */
        gap: 5px; /* Reduziert den Abstand zwischen Icon und Text */
    }

    /* Optional: Entfernen von zusätzlichen Abständen um die Texte */
    :where(.kierer-steps) .elementor-icon-box-description a {
        margin: 0;
        padding: 0;
    }
}

/* Bereich 9 =================== Bildformat (seit 1.4.16) =================== */
/* Die Bilder der Schritte werden immer im selben Format gezeigt, 1200 zu 1000 (Verhältnis 6:5),
   egal wie die hochgeladene Datei aussieht. Abweichende Bilder werden mittig beschnitten, statt
   den Schritt unterschiedlich hoch zu machen. Format und Ausschnitt lassen sich im Widget unter
   Stil → Bilder ändern (CSS-Variablen --ks-bildformat und --ks-bildausschnitt).
   Nur das große Bild des Schrittes (direktes Kind), nicht die kleinen Symbole darunter. */
.kierer-steps .content-container > img {
    aspect-ratio: var(--ks-bildformat, 6 / 5);
    height: auto;
    object-fit: cover;
    object-position: var(--ks-bildausschnitt, center center);
}