.transparent .bg-white{background-color;transparent!important;}

#flyout {
top: 25%;z-index: 1;
}
header{padding-top: 72px;}
@media (min-width:769px ){

header{padding-top: 0;}
#flyoutModal .modal-header:before{    content: url(../img/bg-visual-menue.svg);  width:100%;max-width:1720px;
   display:block;margin:auto;
    z-index: 1;}
}
@media (min-height:750px) and (min-width:768px ){
#flyout-wrapper{
align-items: center;
}
}
#flyoutModal a{text-decoration:none;border:0;}

#flyout h4 {
position: relative;
}

#flyout hr {
color: #87a3cf;
opacity: 1;
border: solid 1px;
}

#flyout .hover-underline-animation {
padding-left: 0 !important;
}

#flyout .cat-primary hr {
color: #87a3cf;

}

#flyout .cat-primary .hover-underline-animation::after {
background-color: #87a3cf;
}

#flyout .cat-warning hr {
color: #f0d908;
}

#flyout .cat-warning .hover-underline-animation::after {
background-color: #f0d908;
}

#flyout .cat-info hr {
color: #40a0d8;
}

#flyout .cat-info .hover-underline-animation::after {
background-color: #40a0d8;
}

#flyout .cat-tertiary hr {
color: #ba3a41;
}

#flyout .cat-tertiary .hover-underline-animation::after {
background-color: #ba3a41;
}

#flyout .cat-success hr {
color: #92c141;
}

#flyout .cat-success .hover-underline-animation::after {
background-color: #92c141;
}

#flyout a {
color: #000;
}
header{background-color:#FFF!important;}

#myBtn {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #D42F35;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
line-height:1;
font-size:2rem;
opacity:.8;
}

@media (min-width:1024px ){
.skg-menu-icon{width: 100px;}
}
@media (min-width:1224px ){
.skg-menu-icon{width: 150px;}
}
@media (min-width:571px){
#myBtn {
font-size:3rem;
    bottom: 20px;
    right: 30px;
    padding: 15px;opacity:1;
   
}
}
#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
.swiper-slide .col{
hyphens: auto;
}

.card-container {
perspective: 1000px; /* Gibt Tiefe für die 3D-Drehung */
}

				.card-container {
					perspective: 1000px;
					/* Gibt Tiefe für die 3D-Drehung */
				}

				.flipcard {
					/* width: 200px; Breite der Karte */
					height: 300px;
					/* Höhe der Karte */
					position: relative;
					transition: transform 0.6s;
					/* Dauer der Drehung */
					transform-style: preserve-3d;
					/* Bewahrt 3D-Raum für Kinder */
				}

				.flipcard h4 {
					font-size: 1.25rem;
				}

				.flipcard img {
					padding: 0 2rem;
					max-width: 300px;
				}

				.card-container:hover .flipcard {
					transform: rotateY(180deg);
					/* Dreht die Karte bei Hover */
				}

				.card-front,
				.card-back {
					width: 100%;
					height: 100%;
					position: absolute;
					backface-visibility: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #ccc;
					border-radius: 2rem;
				}

				.card-front flex-column {
					/* Vorderseitenspezifische Styles */
				}

				.card-back {
					transform: rotateY(180deg);

				}