/* Grundlegendes Styling für alle Icons */
.juv {
    display: inline-block;
    width: 24px; /* Icon-Größe – falls anpassbar */
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Check Icon */
.juv.juv-check.juv-primary {
    background-image: url('../icons/Blau/IOS/1x/Check.png');
}

.juv.juv-check.juv-secondary {
    background-image: url('../icons/Orange/IOS/1x/Check.png');
}

.juv.juv-check.juv-black {
    background-image: url('../icons/Schwarz/IOS/1x/Check.png');
}

/* Graphic Icon */
.juv.juv-grafic.juv-primary {
    background-image: url('../icons/Blau/IOS/1x/Grafik.png');
}

.juv.juv-grafic.juv-secondary {
    background-image: url('../icons/Orange/IOS/1x/Grafik.png');
}

.juv.juv-grafic.juv-black {
    background-image: url('../icons/Schwarz/IOS/1x/Grafik.png');
}

/* Idea Icon */
.juv.juv-idea.juv-primary {
    background-image: url('../icons/Blau/IOS/1x/Idee.png');
}

.juv.juv-idea.juv-secondary {
    background-image: url('../icons/Orange/IOS/1x/Idee.png');
}

.juv.juv-idea.juv-black {
    background-image: url('../icons/Schwarz/IOS/1x/Idee.png');
}

/* Mail Icon */
.juv.juv-mail.juv-primary {
    background-image: url('../icons/Blau/IOS/1x/Mail.png');
}

.juv.juv-mail.juv-secondary {
    background-image: url('../icons/Orange/IOS/1x/Mail.png');
}

.juv.juv-mail.juv-black {
    background-image: url('../icons/Schwarz/IOS/1x/Mail.png');
}

/* Marketing Icon */
.juv.juv-marketing.juv-primary {
    background-image: url('../icons/Blau/IOS/1x/Marketing.png');
}

.juv.juv-marketing.juv-secondary {
    background-image: url('../icons/Orange/IOS/1x/Marketing.png');
}

.juv.juv-marketing.juv-black {
    background-image: url('../icons/Schwarz/IOS/1x/Marketing.png');
}

/* Pin Icon */
.juv.juv-pin.juv-primary {
    background-image: url('../icons/Blau/IOS/1x/Ort.png');
}

.juv.juv-pin.juv-secondary {
    background-image: url('../icons/Orange/IOS/1x/Ort.png');
}

.juv.juv-pin.juv-black {
    background-image: url('../icons/Schwarz/IOS/1x/Ort.png');
}

/* Phone Icon */
.juv.juv-phone.juv-primary {
    background-image: url('../icons/Blau/IOS/1x/Telefon.png');
}

.juv.juv-phone.juv-secondary {
    background-image: url('../icons/Orange/IOS/1x/Telefon.png');
}

.juv.juv-phone.juv-black {
    background-image: url('../icons/Schwarz/IOS/1x/Telefon.png');
}

/* Design Icon */
.juv.juv-design.juv-primary {
    background-image: url('../icons/Blau/IOS/1x/Webdesign.png');
}

.juv.juv-design.juv-secondary {
    background-image: url('../icons/Orange/IOS/1x/Webdesign.png');
}

.juv.juv-design.juv-black {
    background-image: url('../icons/Schwarz/IOS/1x/Webdesign.png');
}

/* Arrow Icon */
.juv.juv-arrow.juv-primary {
    background-image: url('../icons/Blau/IOS/1x/Webpfeil.png');
}

.juv.juv-arrow.juv-secondary {
    background-image: url('../icons/Orange/IOS/1x/Webpfeil.png');
}

.juv.juv-arrow.juv-black {
    background-image: url('../icons/Schwarz/IOS/1x/Webpfeil.png');
}

/* Icon-Grundrotationen */
.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}


.serv_con .arrow-bg {
    position: absolute; /* Positioniert den Pfeil relativ zum Container */
    left: -60px; /* Abstand links vom Bild */
    top: 50%; /* Vertikal zentriert */
    transform: translateY(-50%) rotate(90deg); /* Vertikale Drehung des Pfeils */
    z-index: 2; /* Damit der Pfeil hinter dem Bild liegt */
  }
  
  .arrow-bg img {
    width: 80px; /* Pfeilbreite */
    height: auto; /* Automatische Höhe beibehalten */
  }
  
   .serv_con .arrow-middle::before {
    background-image: url(../icons/Pfeile/IOS/1x/PfeilMitte.png);
    top: -63px;
    left: -23px;
    width: 26%;
  }