@charset "utf-8";
/* CSS Document */

   
    
	/* Stil für den überlagerten Abschnitt */
    .overlay {
        /* gibt die Position absolut auf der Seite an */
        position: absolute;
        top: 14vh;
        left: 25vh;
        right: 25vh;

        background: rgba(255, 255, 255, 0.8); /* Hintergrund mit Transparenz */
        /* margin-top: 10vh; /* Abstand vom oberen Rand */
        /* margin-bottom: 10vh; /* Abstand vom unteren Rand */
        
        flex-direction: row;
        /* flex-wrap: wrap; */
        display: flex;
        
        justify-content: center;
        
        z-index: 3; /* Über dem Bildkarussell positionieren */
        width: auto; /* Die Breite wird automatisch an den Inhalt angepasst */
        height: auto; /* Die Höhe wird automatisch an den Inhalt angepasst */
        box-sizing: border-box; /* Berücksichtigt Padding und Border in der Gesamtgröße */
        border: 2px solid rgb(180, 180, 180); /* Äußerer Rand von 2 Pixeln in Schwarz */
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding: 20px;
    }
    .overlay a.btn {
        margin-right: 10px; /* Fügt einen Abstand von 10 Pixeln zwischen den Schaltflächen hinzu */

    }

    @media only screen and (min-width: 1501px) {
        .kfh-margin-top-box {
          margin-top: 25rem;
        }
      }
      
    
    /* Formular-Stil für kleine Bildschirme (mobil) */
    @media (max-width: 1200px) {
        .overlay {
            flex-direction: column; /* Ändere die Richtung zu vertikal (untereinander) */
            align-items: stretch; /* Strecke die Elemente vertikal */
            top: 12vh;
            position: static;
        }

        .overlay input,
        .overlay select,
        .overlay a.btn {
            margin-right: 0px; /* Entferne den rechten Abstand zwischen den Feldern */
            margin-left: 0px;
            margin-bottom: 10px; /* Füge vertikalen Abstand zwischen den Feldern hinzu */
            width: 100%;
        }
    }

    :root {
        --kfh-main: #368cdb;
        --kfh-main-dark: #0b699e;
        --kfh-main-white: #ffffff; 
        --kfh-green: #8e9458;
        --kfh-orange: #ff9900;
        --kfh-darkGreen: #8e9458;
        --kfh-lightgreen: #92a500;
        --kfh-tuerkis: #73c3c4db;
    }
    
    .schnellsuche{
    margin-top:10px;
    }
    
    #searchOrtTop{
    min-width:100px;
    }
    
    .searchDatumAbstand {width:210px;margin-right:-40px}
    
    .bg-kfh-footer {
        background-color: #73c3c4db;
    }
    .bg-kfh-tuerkis {
        background-color: #73c3c4db;
    }
    .bg-kfh-main {
        background-color: var(--kfh-main);
    }
    .bg-kfh-main-dark {
        background-color: var(--kfh-main-dark);
    }
    .bg-kfh-green {
        background-color: var(--kfh-green);
    }
    .bg-kfh-lightgreen {
        background-color: var(--kfh-lightgreen);
    }
    .bg-kfh-orange {
        background-color: var(--kfh-orange);
    }
    .bg-kfh-menue { 
        background-color: rgba(255, 255, 255, 0.74);
    }
    .bg-kfh-search { 
        background-color: #368bdbd3;
    }

    .navbar .navbar-nav .nav-item{
        background-color: transparent;
    }
    
    .nav-item.active {
        background-color: rgba(0, 0, 0, 0.2);
        cursor: default;
    }

    .nav-link {
        color: #000;
    }
    .nav-link:hover {
        color: #ccc;
    }


    @media (min-width: 991.98px) {

          
        #logo {max-width:200px}
    
        #search-offcanvas > ul > li {
            width:20%!important;
        }
        
        #search-offcanvas input {
            width:64%!important;
        }
        
        .navbar-default .navbar-toggle .icon-bar {
          background-color: #000; /* Changes regular toggle color */
        }
        .navbar-default .navbar-toggle .icon-bar:hover {
          background-color: #000; /* Changes toggle color on hover */
        }
        .kfh-margin-top-box {
            /* Abstand nach dem Menue */
            margin-top: 5rem;
        }
     
    }


    
    #searchContainer {
    width:200px;
    margin-top:20px;
    
    }
    
    #headerSucheButton {
    float:left;
        }
    
    #headerSucheButton:hover{
    background:grey;
    }
    
    #headerResetButton {
    float:left;
    }
    
    #headerResetButton:hover{
    background:grey;
    }
    
    
    .villTravelink {
    position: absolute;
    background: #368cdb;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    color: white;
    text-transform: uppercase;
    padding: 2.4rem 1rem 1rem;
    z-index: 2;
    width: 125px;
    height: 125px;
    top: 20%;
    left: 5%;
    display: flex;
    justify-content: center;
    align-self: center;
    text-align: center;
    transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    font-weight: 700;
    text-decoration: none;
    outline: none;
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
    line-height: 1;
    }
    
    .villTravelink:hover {
    background: grey;
    cursor: pointer;
    text-decoration: none;
    color: white;
    }
    
    .popupdot {
    position: absolute;
    background: var(--kfh-tuerkis);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    color: white;
    text-transform: uppercase;
    padding: 2.4rem 1rem 1rem;
    z-index: 2;
    width: 125px;
    height: 125px;
    top: 60%;
    left: 5%;
    display: flex;
    justify-content: center;
    align-self: center;
    text-align: center;
    transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    font-weight: 700;
    text-decoration: none;
    outline: none;
    margin-top: 10px;
    font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
    line-height: 1;
    }
    
    .popupdot:hover {
    background: grey;
    cursor: pointer;
    text-decoration: none;
    color: white;
    }

    .font-kfh-big {
    color: white; /* Textfarbe */
    font-size: 48px;
      font-weight: 300;
      line-height: 1.2;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
    }		
    .font-kfh-medium {
        color: black; /* Textfarbe */
        font-size: 30px;
          font-weight: 300;
          line-height: 1.2;
        }
    .font-kfh-small {
            color: black; /* Textfarbe */
            font-size: 25px;
              font-weight: 300;
              line-height: 1.2;
            }
    
    .font-onpic {
        display: block !important; /* Auf kleinen Bildschirmen anzeigen */
    }

    .cropped-image {
       display: block; /* Das Bild wird als Blockelement gerendert */
        object-fit: cover; /* Das Bild wird proportioniert und zugeschnitten, um den Container zu füllen */
       height: 100%; /* Das Bild wird die volle Höhe des Containers einnehmen */
       width: 100%; /* Das Bild wird die volle Breite des Containers einnehmen */
    }
    .kfh-shadowbox {
        box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.1);
    }

    .card-image {
        object-fit: contain;
      } 
    
    @media (max-width: 1449px) {
        nav {
            display: inline-block!important;
            width: 100vw;
        }

        .font-kfh-big { font-size:30px;}
        .font-kfh-medium { font-size:20px;}
        .font-kfh-small { font-size:15px;}

        .popupdot {
            left:3%;
        }
        
        .villTravelink{
            left:3%;
        }
    
        .navbar-default .navbar-toggle .icon-bar {
          background-color: #000; /* Changes regular toggle color */
        }
        .navbar-default .navbar-toggle .icon-bar:hover {
          background-color: #000; /* Changes toggle color on hover */
        }

        #nav-offcanvas {
            position: fixed;
            top: 60px;
            bottom: 0;
            right: 100%;
            width: 100%;
            padding-right: 1rem;
            padding-left: 1rem;
            background-color: var(--kfh-main-white);
            transition: transform .3s ease-in-out, visibility .3s ease-in-out;
            z-index: 3;
            overflow-y:auto;
        }

        #search-offcanvas {
            position: fixed;
            top: 60px;
            bottom: 0;
            right: 100%;
            width: 100%;
            padding-top:2rem;
            padding-left: 2rem;
            padding-right: 2rem;
            background-color: var(--kfh-main-white);
            overflow-y: auto;
            transition: transform .3s ease-in-out, visibility .3s ease-in-out;
            z-index: 2;
            line-height:2;
        }

        #search-offcanvas > ul > li > div {
            width: 20%;
        }
        
        #my_date_inputKalender{width:88%}
        #my_date_input2Kalender{width:88%}
        #searchUnterkunftsartTop{width:100%}
        #searchRegionTop{width:100%;margin-right:80px}
        #searchOrtTop{width:100%;margin-right:80px}
        #searchKapazitaetTop{margin-right:80px}
        #searchContainer{width:300px;clear:both}
        .searchAbstand{margin-right:20px}
        .searchDatumAbstand{margin-right:20px;}

        #nav-offcanvas.open,
        #search-offcanvas.open {
            visibility: visible;
            transform: translateX(100%);
        }
    
        #logo {max-width:150px}
        #tree {
            position: fixed;
            top: 48px;
            bottom: 0;
            right: 100%;
            width: 100%;
            padding-right: 1rem;
            padding-left: 1rem;
            background-color: #fff;
            overflow-y: auto;
            transition: transform .3s ease-in-out, visibility .3s ease-in-out;
            z-index: 1;
            height: 100%;
            border-radius: 0;
            padding-top: 20px;
        }
        
        #unterkuenfte {
            width:100%;
        }
        
        .img-fluid{height: 100%;max-height: 300px;}
    
        .kfh-margin-top-box {
            /* Abstand nach dem Menue */
            margin-top: 4.5rem;
        }
    }
    
    @media (min-width: 600px) {
        .carousel-item img{height:61vh;}
        .searchAbstand {padding-right:30px;}
    }
    
    @media (max-width: 599px) {
        .carousel-item img{height:55vh;}
                    
        .font-kfh-big { font-size:20px;}
        .font-kfh-medium { font-size:15px;}
        .font-kfh-small { font-size:12px;}
        
        .popupdot { 
            /* display: none; */
            width: 80px; 
            height: 80px;
            font-size:10px; 
            padding: 1.4rem 1rem 1rem;
            top: 18%;
            left: 25%;
        }
        .villTravelink { 
            /* display: none; */
            width: 80px; 
            height: 80px;
            font-size:10px; 
            padding: 1.4rem 1rem 1rem;
            top: 20%;
            left: 3%;
        }
        #logo {max-width:150px}

        .kfh-margin-top-box {
            /* Abstand nach dem Menue */
            margin-top: 4.5rem;
        }
    }