.offene-stellen-titel-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Abstand zwischen den Titeln */
    margin: 0;
    padding: 0;
}

.offene-stellen-titel-item h1 {
    font-size: 35px; /* Passe die Schriftgröße an die auf dem Screenshot an */
    font-weight: bold;
    line-height: 1.2;
    color: #FFFFFF; /* Weiße Schrift, wie auf dem Screenshot */
    margin-left: 20px;
    top: 150px;
    text-transform: uppercase;
}

.offene-stellen-titel-item h1 a {
    text-decoration: none; /* Entfernt die Unterstreichung bei Links */
    color: inherit; /* Erbt die Farbe von h1, also weiß */
}
.portfolio-slider {
    position: relative;
}
.portfolio-slider {
    height: 500px; /* oder eine Höhe, die zu deinem Layout passt */
}

.slick-slide {
    height: auto !important;
}

.portfolio-item {
    margin-bottom: 40px; /* Abstand zwischen den einzelnen Portfolio-Items */
}

/* Titel des Portfolio-Posts spezifisch gestalten */
.portfolio-slider .portfolio-item h3 {
    font-size: 27px; /* Stellen sicher, dass der Titel immer vollständig sichtbar ist */
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase; /* Titel großgeschrieben */
}

.post-content {
    max-height: 325; /* Höhe des Containers für den Text, anpassbar nach Bedarf */
    overflow: hidden;
    text-overflow: ellipsis; /* Zeigt "..." an, wenn der Text zu lang ist */
    display: -webkit-box;
    -webkit-line-clamp: 10; /* Begrenze die Anzahl der sichtbaren Zeilen (optional) */
    -webkit-box-orient: vertical;
    font-size: 16px;
    line-height: 1.6;
    color: #333; /* Farbe des Inhalts */
    margin-top: 15px;
    max-width: 400px;
}
/* Container für Dots */
.slick-dots {
    position: absolute;
    left: -30px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 2px;
    padding-bottom: 2px;
    bottom: 300px !important;
    width: auto !important;
    background: #D9D9D9 !important;
    border-radius: 20px !important;
}

/* Aktiver Punkt: größerer Kreis */
.slick-dots li.slick-active {
    background: #B338A3;
    border-radius: 100px;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    
   
}
.slick-dots li.slick-active button{
    display: none; /* Punkt komplett ausblenden */
}


/* Nicht aktive Punkte: kleine Kreise */
.slick-dots li {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

   
}

.slick-dots li div {
    width: 3px;
    height: 3px;
    background: #B338A3; /* Schwarzer Punkt */
    border-radius: 100px;
    border: 1px solid #B338A3;
    justify-content: center;
}
/* Button Container Styling */
.more-info-button-container {
    margin-top: 20px; /* Abstand zum oberen Inhalt */
}
.slick-dots li button::before {
    font-family: "slick";
    font-size: 6px;
    line-height: 15px;
    top: ;
    left: ;
    width: 16px;
    height: 15px;
    content: "•";
    text-align: center;
    opacity: 5.25;
    color: #B338A3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: ;
    margin: 2px;
  }
.more-info-button {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}

.arrow-box {
    width: 38px;
    height: 28px;
    padding: 5px;
    background: #B338A3;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.arrow {
    color: white;
    font-size: 22px;
    font-weight: bold;
    transform: rotate(-45deg); /* Standardzustand: 45 Grad nach oben */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

/* Pfeil in die normale horizontale Position bei Hover */
.arrow-box:hover .arrow {
    transform: rotate(0deg); /* Pfeil zurück in horizontale Position */
    background: white !important;
    color: #B338A3;
    font-size: 30px;
}
.arrow-box:hover {
    background: white !important;
}
/* Effekt für den Pfeil bei Hover auf der Pfeil-Box */
.more-info-button:hover .arrow,
.arrow-box:hover .arrow {
transform: rotate(0deg); /* Pfeil zurück in horizontale Position */
background: white !important;
color: #B338A3;
font-size: 30px;
transition: transform 0.3s ease; /* Weicher Übergang für Animation */
}

/* Effekt für die Pfeil-Box bei Hover */
.more-info-button:hover .arrow-box,
.arrow-box:hover {
background: white !important;

}

/* Button-Text Styling */
.button-text {
color: #B338A3;
font-size: 20.2px;
font-family: "Inter", sans-serif;
font-weight: 800;
text-transform: uppercase;
line-height: 27.58px;
word-wrap: break-word;
}

.button-text {
    color: #B338A3;
    font-size: 20.2px;
    font-family: "Inter", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 27.58px;
    word-wrap: break-word;
}
.slick-prev { 
    display: none !important;
}
.slick-next { 
    display: none !important;
}

.arrow{
    border-radius: 50%;
}