/*
Theme Name: Kierer Child
Theme URI: https://kierer.at/
Description: Child Theme für Kierer, entwickelt von Life Design
Author: Life Design
Author URI: https://lifedesign.at/
Template: kitchor
Version: 1.0.0
*/



/*------------------------Setzt Hintergrundfarbe auf weiß-------------------------*/

html, body {
    background-color: #FFFFFF !important;
}


/*------------------------Links-entferenen-Projekt-Seite----------------------*/

.project-content-category a {
    pointer-events: none; /* Verhindert das Klicken */
    cursor: default; /* Standard-Cursor */
    color: inherit; /* Übernimmt die Textfarbe des umgebenden Elements */
    text-decoration: none; /* Entfernt die Unterstreichung */
}

.project-content-category a::before {
    content: attr(title); /* Zeigt den Text des Links an */
}

.project-content-category a {
    color: transparent; /* Versteckt den Originaltext */
}


/* Entfernt die Links bei Objektbau, Privat und Gewerbe */
.woocommerce-breadcrumb a[href*="project-cat/objektbau"],
.woocommerce-breadcrumb a[href*="project-cat/privat"],
.woocommerce-breadcrumb a[href*="project-cat/gewerbe"] {
    pointer-events: none; /* Verhindert das Klicken */
    cursor: default; /* Standard-Cursor */
    color: inherit; /* Übernimmt die Textfarbe des umgebenden Elements */
    text-decoration: none; /* Entfernt die Unterstreichung */
}

/*-------------------Deaktiviert-Produkt-Links----------------------------*/

/* Deaktiviert nur die Links innerhalb der Produktboxen */
.column-item.elementor-categories-item .product-cat a {
    pointer-events: none; /* Verhindert das Klicken */
    cursor: default; /* Standard-Cursor */
    color: inherit; /* Übernimmt die Textfarbe des umgebenden Elements */
    text-decoration: none; /* Entfernt die Unterstreichung */
}


/*----------------------Footer-Leiste-ausblenden-------------------*/

/* Blendet nur die spezifische Menüleiste im Footer aus */
.elementor-top-section.elementor-element-8ac9f39 {
    display: none;
}

/*------------------------Produkt-Titel-dauerhaft-an--------------------*/
.product-cat .product-cat-caption {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

.product-cat .product-cat-caption .cat-title {
    display: block;
    font-size: 1.2em; /* Anpassen nach Bedarf */
    font-weight: bold;
    color: #000; /* Anpassen nach Bedarf */
}

.product-cat .category-product-img {
    position: relative;
}

.product-cat .product-cat-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Hintergrundfarbe des Titels */
    padding: 10px;
    box-sizing: border-box;
}

/*-----------------------------------Service-Hover-schlagschatten---------------------------*/

.service-style-2 .item-inner {
    transition: box-shadow 0.3s ease !important;
}

.service-style-2 .item-inner:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Milderer Schlagschatten beim Hover */
}

.service-style-2 .item-inner:hover .entry-title {
    color: #E64515 !important; /* Titel-Farbe beim Hover */
}

/*----------------------------------Förderungen-Icon-Animation------------------------------*/

/* Grundlegender Stil für das Icon, den Titel, die Beschreibung und den Button innerhalb der speziellen Icon-Box */
.spezielle-icon-box .elementor-icon-box-icon,
.spezielle-icon-box .elementor-icon-box-title,
.spezielle-icon-box .elementor-icon-box-description,
.spezielle-icon-box .elementor-button {
    transition: transform 0.3s ease-in-out;
}

/* Hover-Effekt für die Verschiebung des Icons innerhalb der speziellen Icon-Box */
.spezielle-icon-box:hover .elementor-icon-box-icon {
    transform: translateY(-15px); /* Verschiebt das SVG-Icon um 15 Pixel nach oben */
    transition-delay: 0s; /* Keine Verzögerung für das Icon */
}

/* Hover-Effekt für die Verschiebung des Titels, der Beschreibung und des Buttons mit Verzögerungen innerhalb der speziellen Icon-Box */
.spezielle-icon-box:hover .elementor-icon-box-title {
    transform: translateY(-15px); /* Verschiebt den Titel um 15 Pixel nach oben */
    transition-delay: 0.1s; /* Verzögerung für den Titel */
}

.spezielle-icon-box:hover .elementor-icon-box-description {
    transform: translateY(-15px); /* Verschiebt die Beschreibung um 15 Pixel nach oben */
    transition-delay: 0.2s; /* Verzögerung für die Beschreibung */
}

.spezielle-icon-box:hover .elementor-button {
    transform: translateY(-15px); /* Verschiebt den Button um 15 Pixel nach oben */
    transition-delay: 0.3s; /* Verzögerung für den Button */
}

/*--------------------------------Iframe-Container-Wärmepumpen-----------------------*/

#iframe-container {
    width: 100%;
    overflow: hidden;
}

#iframe-container iframe {
    width: 100%;
    border: none;
}


/*---------------------------------Icons Animation----------------------------------*/

/* Alternativ: Hintergrund der Spalte weiß machen */
.elementor-element-7027b97f {
    background-color: white !important;
}


/*--------------------------------404-Seite-Anpassungen--------------------------------*/
.error-404,
.error-404 .site-main,
.error-404 .page-content {
    background-image: none !important; /* Alle Hintergrundbilder entfernen */
    background: none !important; /* Eventuell durch `background` gesetzte Bilder entfernen */
}

body.error404 {
    background-image: none !important; /* Entfernt das Hintergrundbild für den gesamten Body der 404-Seite */
    background: none !important;
}

/*----------------------------------Menü-Punkt-ausblenden-----------------------------*/

/* Menüpunkt "Mein Heizungstausch" auf dem Desktop (über 1400px) ausblenden */
@media (min-width: 1400px) {
    #menu-item-19955 {
        display: none;
    }
}

/* Optional: Menüpunkt ab 1400px wieder anzeigen */
@media (max-width: 1399px) {
    #menu-item-19955 {
        display: block;
    }
}


/*---------------------------------------Footer-Menü-----------------------------------*/

/* Setze die Farbe des aktiven Links im Footer (Direkt Links) */
footer .elementor-element-60afbac .hfe-nav-menu .current-menu-item a,
footer .elementor-element-60afbac .hfe-nav-menu .current_page_item a {
    color: #9B9B9B !important; /* Setzt die Farbe auf #9B9B9B */
}

/* Fügt den Hover-Effekt hinzu */
footer .elementor-element-60afbac .hfe-nav-menu a:hover {
    color: #E64515 !important; /* Setzt die Hover-Farbe auf #E64515 */
}



/*--------------------------------------Förderungen - Ablauf------------------------------------*/

/* === STEPPER: Settings === */
.kierer-stepper {
  position: relative;

  --badge: 92px;                 
  --icon: 60px;                  

  --line: 1px;                   
  --line-color: rgba(0,0,0,.22);

  --line-offset: 10px;            

  --num: 34px;                   
  --orange: #E64515;
}

/* =========================================================
   LAYOUT & RESET (Angepasst für BOXED)
   ========================================================= */
/* Wir erzwingen Flexbox auch für den inneren Wrapper, 
   den Elementor bei "Boxed" erstellt */
.kierer-stepper,
.kierer-stepper > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  width: 100%; /* Sicherstellen, dass die Breite da ist */
}

/* HIER GEÄNDERT: ">" entfernt, damit es auch in Boxed greift */
.kierer-stepper .e-con.e-child {
  flex: 1 1 0 !important;
  width: 0 !important;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: 0; 
}

/* Container-Inneres sicherstellen */
.kierer-stepper .e-con.e-child > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
}

/* =========================================================
   ICON-KREIS
   ========================================================= */
.kierer-stepper .elementor-widget-image {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 5; 
}

.kierer-stepper .elementor-widget-image .elementor-widget-container {
  width: var(--badge) !important;
  height: var(--badge) !important;
  border-radius: 999px !important;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center center;
}

/* ICON IM KREIS */
.kierer-stepper .elementor-widget-image img {
  width: var(--icon) !important;
  height: var(--icon) !important;
  object-fit: contain;
}

/* =========================================================
   HOVER EFFEKT
   ========================================================= */
/* HIER GEÄNDERT: ">" entfernt */
.kierer-stepper .e-con.e-child:hover .elementor-widget-image .elementor-widget-container {
  transform: scale(1.10); 
}

/* =========================================================
   LINIE: Verbindung von Icon zu Icon
   ========================================================= */
/* Alte Linien entfernen */
.kierer-stepper::before { display: none !important; }

/* HIER GEÄNDERT: ">" entfernt */
.kierer-stepper .e-con.e-child::before {
  content: "";
  position: absolute;
  
  top: calc( (var(--badge) / 2) + var(--line-offset) );
  
  left: 50%;
  width: 100%;
  
  height: var(--line);
  background: var(--line-color);
  z-index: 1; 
  pointer-events: none;
  transform: translateY(-50%); 
}

/* Letzte Linie ausblenden - HIER GEÄNDERT: ">" entfernt */
.kierer-stepper .e-con.e-child:last-child::before {
  display: none;
}

/* =========================================================
   ZAHLEN & TEXT
   ========================================================= */
.kierer-stepper .infobox-icon-wrap {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.kierer-stepper .infobox-icon-number {
  width: var(--num);
  height: var(--num);
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.kierer-stepper .eael-infobox .title {
  margin-top: 10px;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 1024px) {
  /* Boxed Wrapper auf Mobile resetten (Spalte statt Zeile) */
  .kierer-stepper,
  .kierer-stepper > .e-con-inner {
      flex-direction: column !important;
  }

  /* HIER GEÄNDERT: ">" entfernt */
  .kierer-stepper .e-con.e-child::before { display: none; }
  
  .kierer-stepper .e-con.e-child {
    margin-bottom: 40px;
    width: 100% !important; /* Volle Breite auf Handy zurück */
  }
}



/*--------------------Startseite- Video Button------------------------*/

.kitchor-video-popup .elementor-video-icon{
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}