:root {
    --primary: #cf051c;
}

@font-face {
    font-family: 'Montserrat-Regular';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
}

body {
    font-family: Montserrat-Regular, sans-serif;
}


h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}



#brandlogode {
    background: url(../images/LogoDE.png) left no-repeat;
    background-size: auto;
    height: 100px;
    overflow: hidden;
}

#brandlogofr {
    background: url(../images/LogoFR.png) left no-repeat;
    background-size: auto;
    height: 100px;
    overflow: hidden;
}

#brandlogoit {
    background: url(../images/LogoIT.png) left no-repeat;
    background-size: auto;
    height: 100px;
    overflow: hidden;
}


.topbanner {
    height: 400px;
    position: absolute;
    left: auto;
    right: auto;
    top: 0;
}

.footer {
    background-color: #423E3B !important;
    padding-bottom:2rem;
}

.footercontact, .footercontact a {
    color: #ffffff !important;
    font-size: 0.8rem;
}


/* slider */
/*.slide0XBeispiel {
    background-size: auto;
    height: 400px;
    overflow: hidden;
    background: url('../images/slider/slide_02.jpg') center center no-repeat;
}*/


.slide01 {
    height: 100%;
    background-size: cover;  
    overflow: hidden;    
    background-image: url('../images/slider/slide_01.jpg');
    background-position-y: center;
}

.slide02 {
    height: 100%;
    background-size: cover;
    overflow: hidden;
    background-image: url('../images/slider/slide_02.jpg');
    background-position-y: center;
}

.slide03 {
    height: 100%;
    background-size: cover;
    overflow: hidden;
    background-image: url('../images/slider/slide_03.jpg');
    background-position-y: center;
}

.slide04 {
    height: 100%;
    background-size: cover;
    overflow: hidden;
    background-image: url('../images/slider/slide_04.jpg');
    background-position-y: center;
}

.slide05 {
    height: 100%;
    background-size: cover;
    overflow: hidden;
    background-image: url('../images/slider/slide_05.jpg');
    background-position-y: top;
}

.slide06 {
    height: 100%;
    background-size: cover;
    overflow: hidden;
    background-image: url('../images/slider/slide_06.jpg');
    background-position-y: center;
}

.slide07 {
    height: 100%;
    background-size: cover;
    overflow: hidden;
    background-image: url('../images/slider/slide_07.jpg');
    background-position-y: bottom;
}

.slide08 {
    height: 100%;
    background-size: cover;
    overflow: hidden;
    background-image: url('../images/slider/slide_08.jpg');
    background-position-y: center;
}

.suche, .sucheextend {
    position: absolute;
    width: 40%;
    left: 30%;
    top: 50px;
    z-index: 100;
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(15px);
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
    padding: 30px;
}

.sucheextend {
    width: 70%;
    left: 15%;
    background-color: rgb(180, 180, 180, 0.20);
    top: 20px;
}

.Searchbar, .SearchbarExtend {
    position: relative;
    top: -30px; /*-30 wg. container und padding*/
    left: 0;
    overflow: hidden;
    height: 550px;    
    margin-bottom: -30px;
}

.SearchbarExtend {
    height: 160px;
}

@media (max-width: 1103px) {
    .SearchbarExtend {
        height: 200px;
    }
}

@media (max-width: 960px) {
    
    .suche {
        width: 60%;
        left: 20%;
    }
}

@media (max-width: 630px) {
    .SearchbarExtend {
        height: 250px;
    }

    .suche {
        width: 80%;
        left: 10%;
    }
}

@media (max-width: 500px) {
    .SearchbarExtend {
        height: 320px;
    }
}

.SearchbarFields {
    background: rgb(255,255,255);
    /*background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(241,241,241,0) 72%);*/
}

strong {
    color: var(--primary);
    line-height: 1.5625rem;
}

.ergebnis strong {
    color: #000000;
}

strong.block {
    display: block;
    color: var(--primary);
    line-height: 1.5625rem;
    text-transform: uppercase;
}



.trenn1 {
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #2a2929;
    margin-bottom: 1.5rem;
}

.trenn2 {
    margin-top: 1rem;
    border-bottom: 1px solid rgb(212, 212, 212);
    margin-bottom: 1rem;
}

table.KatalogDetails td {
    vertical-align: text-top;
}

    table.KatalogDetails td:first-child {
        padding-right: 8px;
    }

.mud-main-content {
    padding-top: 30px !important;
}


/* Sofortkontakt + Slide-Effekt */
@media (max-width: 991px) {
    .sofortkontakt {
        display: none;
    }
}



.sofortkontakt {
    display: block;
    -webkit-box-shadow: 0px 0px 29px -13px rgba(18,18,18,1);
    -moz-box-shadow: 0px 0px 29px -13px rgba(18,18,18,1);
    box-shadow: 0px 0px 29px -13px rgba(18,18,18,1);
    padding: 5px;
    transition: 0.8s;
    max-width: 400px;
}

    .sofortkontakt:hover {
        -webkit-box-shadow: 0px 0px 47px -13px rgba(18,18,18,1);
        -moz-box-shadow: 0px 0px 47px -13px rgba(18,18,18,1);
        box-shadow: 0px 0px 47px -13px rgba(18,18,18,1);
    }

    .sofortkontakt strong {
        color: rgba(18,18,18,1);
        padding-bottom: 3px;
    }


    .sofortkontakt .info {
        background: url('../images/sofortkontakt.png') no-repeat right top #fff;
        background-size: auto;
        background-size: auto 100%;
        min-height: 200px;
    }


    .sofortkontakt .titel {
        font-size: 1.3rem;
        background-color: var(--primary);
        padding: 5px;
        color: #ffffff;
    }

    .sofortkontakt .telefon {
        color: var(--primary);
        font-weight: 600;
    }


@media (max-width: 1260px) {
    .sofortkontakt {
        display: none;
    }

    #index .sofortkontakt {
        display: block;
    }
}

.sofortkontaktcard {
    position: absolute;
    min-width: 400px;
    max-width: 400px;
    right: 15px;
    bottom: 15px;
    z-index: 100;
}

    .sofortkontaktcard strong {
        color: rgba(18,18,18,1);
        padding-bottom: 3px;
    }


    .sofortkontaktcard .info {
        background: url('../images/sofortkontakt.png') no-repeat right top #fff;
        background-size: auto;
        background-size: auto 100%;
        min-height: 200px;
        padding: 15px;
    }


    .sofortkontaktcard .titel {
        font-size: 1.3rem;
        background-color: var(--primary);
        padding: 5px;
        color: #ffffff;
    }

    .sofortkontaktcard .telefon {
        color: var(--primary);
        font-weight: 600;
    }

#map {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    min-height: 300px;
    min-width: 300px;
    position: sticky !important;
    top: 0;
}

#mapfull {
    width: 100%;
    min-height: 700px;
    min-width: 300px;
}

@media (max-width: 991px) {
    #mapfull {
        min-height: 500px;
    }
}

#slider {
    position: absolute;
    width: 400px;
    height: auto;
    transform: translateX(+100%);
    -webkit-transform: translateX(+100%);
}

.slide-in {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in {
    100% {
        -webkit-transform: translateX(0%);
    }
}

/* Darstellung von Musterfotos + Premium*/
.imagecontainer {
    position: relative;
}

.musterfoto {
    position: absolute;
    left: 0;
    top: 0;
}

    .musterfoto img {
        max-height: 140px;
    }

.imglogin {
    margin-bottom: 15px;
}

.premium {
    position: absolute;
    top: -20px;
    left: -20px;
}

.premiumdetails {
    position: absolute;
    top: -12px;
    right: 0;
}

.toolbar-px0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/*Leaflet Popop-CSS*/
.leaflet-popup-content h2 {
    font-size: 0.9rem;
}

#geoinfo {
    font-size: 0.8rem;
    text-align: center;
    position: sticky !important;
    top: 400px;
}

ul.disc {
    list-style: disc;
    margin-left: 18px;
}

/* Marker Cluster-CSS*/
.marker-cluster-small {
    background-color: rgba(205, 5, 28, 0.7) !important;
}

    .marker-cluster-small div {
        background-color: rgba(212, 212, 212, 0.5) !important;
    }

.marker-cluster-medium {
    background-color: rgba(205, 5, 28, 0.7) !important;
}

    .marker-cluster-medium div {
        background-color: rgba(212, 212, 212, 0.5) !important;
    }

.marker-cluster-large {
    background-color: rgba(205, 5, 28, 0.7) !important;
}

    .marker-cluster-large div {
        background-color: rgba(212, 212, 212, 0.5) !important;
    }

.infos ol {
    list-style-type: disc;
}

.nomobile {
    display: block;
}

@media all and (max-width: 960px) {
    .nomobile {
        display: none;
    }
}