/* ==========================================================
 
TIMELINE NAVIGATION – PAGE-LEVEL HOTFIX
 
========================================================== */
 

 

 
/* ----------------------------------------------------------
 
1. INFORMATIONSELEMENT AUSBLENDEN
 
---------------------------------------------------------- */
 

 
.info-wrap {
 
display: none;
 
}
 

 

 
/* ----------------------------------------------------------
 
2. HINTERGRUNDFARBE DER GRAUEN CONTENT-CONTAINER
 
---------------------------------------------------------- */
 

 
.container-box--background-gray,
 
.container-box--background-gray .container-box__inner,
 
.container-box--background-gray .m-stage-hero__additional-teasers-container {
 
background-color: #DDE7ED;
 
}
 

 

 
/* ----------------------------------------------------------
 
3. NAVIGATIONSRAHMEN
 
---------------------------------------------------------- */
 

 
.timeLine .swiper-navigation {
 
height: auto;
 
margin-bottom: 25px;
 
padding-right: 0;
 
padding-left: 0;
 

 
border-top: none !important;
 
border-bottom: none !important;
 
}
 

 

 
/* ----------------------------------------------------------
 
4. WRAPPER DER AUSWAHLBUTTONS
 
---------------------------------------------------------- */
 

 
.timeLine .swiper-navigation .swiper-wrapper {
 
display: flex;
 
justify-content: center;
 
align-items: stretch;
 
align-content: stretch;
 

 
height: 8rem !important;
 
margin-left: -2rem;
 
}
 

 

 
/* ----------------------------------------------------------
 
5. AUSWAHLBUTTONS – NICHT AUSGEWÄHLT
 
---------------------------------------------------------- */
 

 
.timeLine .swiper-navigation .swiper-slide {
 
box-sizing: border-box;
 

 
display: flex;
 
flex: 0 0 50%;
 
justify-content: center;
 
align-items: center;
 

 
width: 50% !important;
 
height: 100%;
 
margin: 0;
 
padding: 0;
 

 
color: #313A3D !important;
 
background-color: #E5E5E5 !important;
 

 
border: 0;
 
line-height: normal;
 
text-align: center;
 
cursor: pointer;
 

 
transition:
 
background-color 0.2s ease,
 
color 0.2s ease;
 
}
 

 

 
/* ----------------------------------------------------------
 
6. AUSGEWÄHLTER BUTTON
 
---------------------------------------------------------- */
 

 
.timeLine .swiper-navigation .swiper-slide.activeSlide {
 
color: #FFFFFF !important;
 
background-color: #E1251B !important;
 
}
 

 

 
/* ----------------------------------------------------------
 
7. TEXT INNERHALB DER BUTTONS
 
---------------------------------------------------------- */
 

 
.timeLine .swiper-navigation .swiper-slide span {
 
box-sizing: border-box;
 

 
display: flex;
 
justify-content: center;
 
align-items: center;
 

 
width: 100%;
 
height: 100%;
 
padding: 0.5em 1em;
 

 
color: inherit !important;
 
background-color: transparent !important;
 

 
font-size: 3rem !important;
 
font-weight: 700 !important;
 
line-height: 1.2;
 

 
text-decoration: none !important;
 
}
 

 

 
/* Aktiver Text bleibt weiß und ohne Unterstreichung */
 

 
.timeLine .swiper-navigation .swiper-slide.activeSlide span {
 
color: #FFFFFF !important;
 
text-decoration: none !important;
 
}
 

 

 
/* ----------------------------------------------------------
 
8. HOVER-ZUSTAND NUR FÜR NICHT AUSGEWÄHLTE BUTTONS
 
---------------------------------------------------------- */
 

 
.timeLine .swiper-navigation .swiper-slide:not(.activeSlide):hover {
 
color: #313A3D !important;
 
background-color: #D5D5D5 !important;
 
}
 

 
.timeLine .swiper-navigation .swiper-slide:not(.activeSlide):hover span {
 
color: inherit !important;
 
text-decoration: none !important;
 
}
 

 

 
/* ----------------------------------------------------------
 
9. SICHTBARER TASTATURFOKUS
 
---------------------------------------------------------- */
 

 
.timeLine .swiper-navigation .swiper-slide:focus-visible {
 
position: relative;
 
z-index: 2;
 

 
outline: 3px solid #000000;
 
outline-offset: -3px;
 
}
 

 

 
/* ----------------------------------------------------------
 
10. ÜBERSCHRIFTEN INNERHALB DES SWIPER-WRAPPERS
 
---------------------------------------------------------- */
 

 
.timeLine .swiper-navigation .swiper-wrapper h3 {
 
margin-bottom: 0;
 

 
color: inherit !important;
 
font-size: 3rem !important;
 
font-weight: 700 !important;
 
line-height: 1.2;
 
text-decoration: none !important;
 
}
 

 

 
/* ----------------------------------------------------------
 
11. MOBILE UND TABLET
 
---------------------------------------------------------- */
 

 
@media (max-width: 1249px) {
 

 
.timeLine .swiper-navigation .arrow-navigation .arrow-left::before {
 
position: absolute;
 
top: -13px;
 
left: -34px;
 

 
color: #313A3D;
 
background-color: #FBF9F9;
 

 
font-size: 3em !important;
 
font-weight: 700 !important;
 
}
 

 
.timeLine .swiper-navigation .arrow-navigation .arrow-right::before {
 
position: absolute;
 
top: -13px;
 
right: -34px;
 

 
color: #313A3D;
 
background-color: #FBF9F9;
 

 
font-size: 3em !important;
 
font-weight: 700 !important;
 
}
 

 
}
 

 

 
/* ----------------------------------------------------------
 
12. DESKTOP
 
---------------------------------------------------------- */
 

 
@media (min-width: 1250px) {
 

 
.timeLine .swiper-navigation .swiper-wrapper {
 
margin-left: 0;
 
}
 

 
.timeLine .swiper-navigation .arrow-navigation .arrow-left::before,
 
.timeLine .swiper-navigation .arrow-navigation .arrow-right::before {
 
display: none;
 
}
 

 
}