/* Custom CSS for Elians Fadenzauber */
:root {
    --primary-color: #E4405F; 
    --white-color: #fbfbfa; 

  }

.hp-content {
    margin-top: -90px !important;
}

.woocommerce-Price-amount::after {
    content: '*'; /* Add an asterisk after the price */
    font-size: 0.8em;
    color: #888;
    margin-left: 5px;
}


.flex-control-nav.flex-control-thumbs {
    display: flex; /* Stellt sicher, dass die Thumbnails in einer Zeile angezeigt werden */
    gap: 10px; /* Fügt Abstand zwischen den Thumbnails hinzu */
    list-style: none; /* Entfernt die Aufzählungspunkte */
    margin-top: 10px !important; /* Alternativ: Abstand oberhalb der Thumbnail-Liste */
}

.flex-control-nav.flex-control-thumbs li {
display: inline-block; /* Stellt sicher, dass jedes Thumbnail korrekt angezeigt wird */
}
  

  
a {
    text-decoration: none; /* Entfernt die Unterstreichung im Normalzustand */
    color: inherit; /* Die Farbe des Links übernimmt die aktuelle Textfarbe */
    transition: color 0.3s ease; /* Sanfte Übergangsanimation für die Farbe */
    font-weight: 600 !important;
}

a:hover {
    color: var(--primary-color); /* Ändert die Farbe beim Hover */
    text-decoration: none; 
}

  
.wp-block-button a:hover{
    color: var(--white-color);
}


a.wp-block-navigation-item__content:hover {
    color: var(--primary-color) !important;
    text-decoration: none !important; 
}


.site-logo-area {
    padding-left: 0px !important;
    padding-top: 0px !important;
} 

.wp-block-navigation__responsive-container-open svg {
    width: 48px;
    height: 48px;
}
  
.wp-block-navigation__responsive-container-close svg {
    width: 48px;
    height: 48px;
}
  

.price-box {
    padding-top: 10px;
}

.woocommerce-product-gallery__wrapper img {
    border-radius: 10px;
}

.woocommerce-product-gallery__wrapper {
    overflow: hidden; /* Wichtig, um zu vermeiden, dass Ecken abgeschnitten werden */
}

.flex-control-nav.flex-control-thumbs img {
    border-radius: 10px;
    overflow: hidden;
}


.request-now .wp-block-button__link {
    display: inline-flex; /* Flexbox für Icon und Text */
    align-items: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
    text-decoration: none; /* Unterstreichung entfernen */
    color: white; /* Textfarbe */
    background-color: #25D366; /* Hintergrundfarbe des Buttons */
    border-radius: 50px; /* Abgerundete Ecken */
    padding: 10px 20px; /* Innenabstand */
    font-size: 16px;
}

.request-now .wp-block-button__link::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12.011719 2C6.5057187 2 2.0234844 6.478375 2.0214844 11.984375C2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562L2 22L7.2324219 20.763672C8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516L12.009766 21.978516C17.514766 21.978516 21.995047 17.499141 21.998047 11.994141C22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344C17.190172 3.0407344 14.683719 2.001 12.011719 2zM12.009766 4C14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969C19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188C19.996047 16.396187 16.413812 19.978516 12.007812 19.978516C10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812L7.5175781 18.640625L6.7734375 18.816406L4.8046875 19.28125L5.2851562 17.496094L5.5019531 16.695312L5.0878906 15.976562C4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375C4.0234844 7.582375 7.6067656 4 12.009766 4zM8.4765625 7.375C8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875C7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781C6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609C8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234C14.32675 16.946234 14.754891 16.782234 15.212891 16.740234C15.670891 16.699234 16.690438 16.137687 16.898438 15.554688C17.106437 14.971687 17.106922 14.470187 17.044922 14.367188C16.982922 14.263188 16.816406 14.201172 16.566406 14.076172C16.317406 13.951172 15.090328 13.348625 14.861328 13.265625C14.632328 13.182625 14.464828 13.140625 14.298828 13.390625C14.132828 13.640625 13.655766 14.201187 13.509766 14.367188C13.363766 14.534188 13.21875 14.556641 12.96875 14.431641C12.71875 14.305641 11.914938 14.041406 10.960938 13.191406C10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844C9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078C9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578C10.180641 10.371578 10.223641 10.267562 10.306641 10.101562C10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625C10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125C9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594C8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



/* Burger-Menü-Schließen-Button anpassen */
.wp-block-navigation__responsive-container-close {
  background-color: transparent !important; /* entfernt den grauen Kreis */
  width: 32px !important;  /* kleiner machen */
  height: 32px !important;
  right: 10px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.wp-block-navigation__responsive-container-close svg {
  width: 20px !important;  /* kleineres X */
  height: 20px !important;
  stroke: #333 !important; /* dunkles Grau statt Schwarz */
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.wp-block-navigation__responsive-container-close:hover svg {
  opacity: 1;
}

.wp-block-woocommerce-product-image {
    border-radius: 10px;
}


.ef-main-menu a {
    font-size: medium;
    font-weight: 400 !important;
}





















/* --- Walk Banner Hauptcontainer (Overflow sichtbar für Bild-Überstand) --- */
.walk-banner-main-row {
  background-color: #fde7d7;
  border-radius: 10px;
  overflow: visible;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  margin-bottom: 16em;
}

/* Textbereich links */
.walk-banner-main-row .wp-block-column:first-child {
  padding-left: 1.5rem;
}

/* Container für Bilder (rechte Spalte) */
.walk-banner-main-row .wp-block-column:last-child {
  position: relative;
  width: 40%;           /* relativ – nimmt 40 % der Bannerbreite ein */
  min-height: 40vh;     /* dynamisch zur Bildschirmhöhe, damit vertikale Positionierung funktioniert */
  display: block;
  margin-right: 2rem;
  overflow: visible;
}

/* Layer: responsive Größe, Seitenverhältnis bleibt */
.walk-banner-main-row .walk-layer {
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  width: 30%;  /* Breite relativ zum Container */
  aspect-ratio: 3 / 4;          /* behält Seitenverhältnis bei */
}

/* Bild füllt Layer */
.walk-banner-main-row .walk-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Positionierung jetzt prozentual (relativ zur Containerhöhe und -breite) */
.walk-banner-main-row .walk-layer.back {
  top: -15%;
  left: 5%;
  transform: rotate(-8deg);
  z-index: 1;
}

.walk-banner-main-row .walk-layer.mid {
  top: -5%;
  left: 40%;
  transform: rotate(5deg);
  z-index: 2;
}

.walk-banner-main-row .walk-layer.front {
  top: 5%;
  left: 70%;
  transform: rotate(-5deg);
  z-index: 3;
}

/* Hover-Effekt */
.walk-banner-main-row .walk-layer:hover {
  transform: translateY(-4%) scale(1.04);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  z-index: 10;
}

/* --- Responsive: tablet groß horizontal Darstellung --- */
@media (min-width: 1500px) and (max-width: 2000px) {
    .walk-banner-main-row {
        padding: 2rem;
        gap: 2rem;
    }

        /* Textbereich links */
    .walk-banner-main-row .wp-block-column:first-child {
        padding-left: 2rem;
    }

        /* Layer: responsive Größe, Seitenverhältnis bleibt */
    .walk-banner-main-row .walk-layer {
        width: 40%;  /* Breite relativ zum Container */
    }


    /* Positionierung jetzt prozentual (relativ zur Containerhöhe und -breite) */
    .walk-banner-main-row .walk-layer.back {
        top: -15%;
        left: 0%;
        transform: rotate(-8deg);
        z-index: 1;
    }

    .walk-banner-main-row .walk-layer.mid {
        top: -5%;
        left: 35%;
        transform: rotate(5deg);
        z-index: 2;
    }

    .walk-banner-main-row .walk-layer.front {
        top: 5%;
        left: 75%;
        transform: rotate(-5deg);
        z-index: 3;
    }
}


/* --- Responsive: tablet groß horizontal Darstellung --- */
@media (min-width: 1156px) and (max-width: 1500px) {
    .walk-banner-main-row {
        padding: 1.5rem;
        gap: 1.5rem;
    }

        /* Textbereich links */
    .walk-banner-main-row .wp-block-column:first-child {
        padding-left: 1.5rem;
    }

        /* Layer: responsive Größe, Seitenverhältnis bleibt */
    .walk-banner-main-row .walk-layer {
        width: 45%;  /* Breite relativ zum Container */
    }


    /* Positionierung jetzt prozentual (relativ zur Containerhöhe und -breite) */
    .walk-banner-main-row .walk-layer.back {
        top: -10%;
        left: 0%;
        transform: rotate(-8deg);
        z-index: 1;
    }

    .walk-banner-main-row .walk-layer.mid {
        top: 10%;
        left: 35%;
        transform: rotate(5deg);
        z-index: 2;
    }

    .walk-banner-main-row .walk-layer.front {
        top: 30%;
        left: 75%;
        transform: rotate(-5deg);
        z-index: 3;
    }
}


/* --- Responsive: tablet groß horizontal Darstellung --- */
@media (min-width: 782px) and (max-width: 1156px) {
    .walk-banner-main-row {
        padding: 1.5rem;
        gap: 1.5rem;
    }

        /* Textbereich links */
    .walk-banner-main-row .wp-block-column:first-child {
        padding-left: 1.5rem;
    }

        /* Layer: responsive Größe, Seitenverhältnis bleibt */
    .walk-banner-main-row .walk-layer {
        width: 50%;  /* Breite relativ zum Container */
    }


    /* Positionierung jetzt prozentual (relativ zur Containerhöhe und -breite) */
    .walk-banner-main-row .walk-layer.back {
        top: -10%;
        left: 0%;
        transform: rotate(-8deg);
        z-index: 1;
    }

    .walk-banner-main-row .walk-layer.mid {
        top: 20%;
        left: 35%;
        transform: rotate(5deg);
        z-index: 2;
    }

    .walk-banner-main-row .walk-layer.front {
        top: 40%;
        left: 75%;
        transform: rotate(-5deg);
        z-index: 3;
    }
}


/* --- Responsive: tablet small horizontal Darstellung --- */
@media (min-width: 559px) and (max-width: 782px) {
    .walk-banner-main-row {
        padding: 1.5rem;
        gap: 1.5rem;
    }

        /* Textbereich links */
    .walk-banner-main-row .wp-block-column:first-child {
        padding-left: 1.5rem;
    }

        /* Layer: responsive Größe, Seitenverhältnis bleibt */
    .walk-banner-main-row .walk-layer {
        width: 40%;  /* Breite relativ zum Container */
    }


    /* Positionierung jetzt prozentual (relativ zur Containerhöhe und -breite) */
    .walk-banner-main-row .walk-layer.back {
        top: 0%;
        left: 0%;
        transform: rotate(-8deg);
        z-index: 1;
    }

    .walk-banner-main-row .walk-layer.mid {
        top: 15%;
        left: 35%;
        transform: rotate(5deg);
        z-index: 2;
    }

    .walk-banner-main-row .walk-layer.front {
        top: 20%;
        left: 75%;
        transform: rotate(-5deg);
        z-index: 3;
    }
}



/* --- Responsive: tablet small vertikal Darstellung --- */
@media (min-width: 386px) and (max-width: 559px) {
    .walk-banner-main-row {
        padding: 1rem;
        gap: 1rem;
    }

        /* Textbereich links */
    .walk-banner-main-row .wp-block-column:first-child {
        padding-left: 1rem;
    }

        /* Layer: responsive Größe, Seitenverhältnis bleibt */
    .walk-banner-main-row .walk-layer {
        width: 50%;  /* Breite relativ zum Container */
    }


    /* Positionierung jetzt prozentual (relativ zur Containerhöhe und -breite) */
    .walk-banner-main-row .walk-layer.back {
        top: 0%;
        left: -10%;
        transform: rotate(-8deg);
        z-index: 1;
    }

    .walk-banner-main-row .walk-layer.mid {
        top: 15%;
        left: 35%;
        transform: rotate(5deg);
        z-index: 2;
    }

    .walk-banner-main-row .walk-layer.front {
        top: 45%;
        left: 75%;
        transform: rotate(-5deg);
        z-index: 3;
    }
}

@media (max-width: 386px) {
    .walk-banner-main-row {
        padding: 1rem;
        gap: 1rem;
    }

        /* Textbereich links */
    .walk-banner-main-row .wp-block-column:first-child {
        padding-left: 1rem;
    }

        /* Layer: responsive Größe, Seitenverhältnis bleibt */
    .walk-banner-main-row .walk-layer {
        width: 60%;  /* Breite relativ zum Container */
    }


    /* Positionierung jetzt prozentual (relativ zur Containerhöhe und -breite) */
    .walk-banner-main-row .walk-layer.back {
        top: 0%;
        left: -20%;
        transform: rotate(-8deg);
        z-index: 1;
    }

    .walk-banner-main-row .walk-layer.mid {
        top: 15%;
        left: 35%;
        transform: rotate(5deg);
        z-index: 2;
    }

    .walk-banner-main-row .walk-layer.front {
        top: 45%;
        left: 75%;
        transform: rotate(-5deg);
        z-index: 3;
    }

    /* <386 386-558 559-733 733-*/
}