@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MYRIADPRO-REGULAR.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: 'IcoMoon-Free';
    src: url('../fonts/icomoon_free/IcoMoon-Free.ttf?-b7qzp2') format('truetype');
    font-weight: normal;
    font-style: normal;
}


html, body {
    background-image: url('../images/background_mcs.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: right top;
    min-height: 100vh;
    height: 100%;
    font-family: 'Open Sans' !important;
    font-size: 14px;
    background-color:#f7f9f3;
}
button {
    height: unset;
}

h1, h2, h3, .text-2xl, .text-3xl, .text-lg {
    font-family: 'Myriad Pro';
}
h1 {
    font-size:20px !important;
}


@media (max-width: 768px) {
    body {
        background-size: 100%; /* Sie können diesen Wert anpassen, um die gewünschte Größe zu erreichen */
        background-position: right top; /* Dies positioniert das Bild etwas von der oberen und rechten Ecke entfernt */
    }
    h3 {
	font-size:19px;
    }
    h1 {
	font-size:16px !important;
	line-height:0px;
	margin-top:3px;
    }
}

.bg-gray-100 {
    background-color:#f7f9f3;
}

.text-custom-yellow {
    color: #fcbb55;
}
.text-custom-yellow:hover {
    color: darken(#fcbb55, 10%); /* Ein wenig dunkler beim Hover */
}
.bg-custom-yellow:hover {
    background-color: #fcbb55;
    color:#484c52;
}

.bg-custom-yellow_hover {
    background-color: #fcbb55;
    color:#484c52;
}

input, select, textarea {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: none;
    background:#ffffff;
    border-radius: 6px;
}
input:focus {
    border-color: #000000 !important;
}



/**************************************************************************************/
/*   Elemente für Sprachauswahl
/**************************************************************************************/

.skiptranslate {
    display: none !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.dropdown-content a {
    background-repeat: no-repeat;
    background-size: 24px 24px; /* Größe der Flaggen */
    padding-left: 30px; /* Platz für die Flagge lassen */
    line-height: 24px; /* Höhe der Flaggen */
}

/**************************************************************************************/
/*   Elemente für Loading Spinner
/**************************************************************************************/

.spinner-container {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    z-index: 9999;
}

.spinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #93ccb8; /* First color */
    border-right: 16px solid #bbcf64; /* Second color */
    border-bottom: 16px solid #fcbb55; /* Third color */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}



/**************************************************************************************/
/*   Header
/**************************************************************************************/

.w-full.bg-white.p-4.fixed.top-0.z-50 {
    background-color: rgba(255, 255, 255, 1);
}
.w-full.bg-white.p-4.fixed.top-0.z-50 h1,
.w-full.bg-white.p-4.fixed.top-0.z-50 button {
    color: #000; /* Schwarz */
}
.w-full.bg-white.p-4.fixed.top-0.z-50 {
    border-bottom: 1px solid #e5e7eb; /* Leichtes Grau */
}
.header_logo {
    height:40px;
    margin-right: 10px;
}
@media (max-width: 640px) {
    .w-full.bg-white.p-4.fixed.top-0.z-50 {
        padding: 15px 12px !important;
    }
    .header_logo {
        height: 30px;
        width: auto;
        margin-right: 5px;
    }
    .w-full.bg-white.p-4.fixed.top-0.z-50 h1 {
        font-size: 1rem;
    }
}



/**************************************************************************************/
/*   Stepper Navigation
/**************************************************************************************/

.navigation-success-color {
    background-color: #81ce63;
}
.navigation-active-color {
    background-color: #fabb54;
}
.booking_navigation a:hover {
    text-decoration: underline;
}
.navigation-success-color:hover {
    text-decoration: none !important;
}


/**************************************************************************************/
/*   Footer
/**************************************************************************************/

.mycampsoft_footer {
    margin-top: auto; /* Schiebt den Footer nach unten, wenn darüberliegender Inhalt nicht den ganzen Platz einnimmt */
}



/**************************************************************************************/
/*   Hauptinhalt Step 1
/**************************************************************************************/

.icon-calendar:before {
    font-family: 'IcoMoon-Free';
    content: "\e953"; /* Ersetzen Sie dies durch den tatsächlichen Unicode-Wert des Kalender-Icons aus Ihrer IcoMoon-Auswahl */
    speak: none;
    color:#000000;
    font-size:23px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Größere Schrift für die Tage */
.daterangepicker * {
    font-family: 'Open Sans' !important;
    font-size: 14px !important;
}

.daterangepicker td.in-range {
    background-color: #93CCB8 !important;
}

.daterange-container {
    max-width: 600px;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #93ccb8 !important;
}
.cmpboxrecall {
    left: unset !important;
    right: 20px !important;
    bottom: 20px !important;
}
@media (max-width: 768px) {
    input[name="daterange"] {
        font-size: 16px; /* Sie können diesen Wert anpassen, bis er für Ihr Design geeignet ist */
    }
    .icon-calendar:before {
        /*display: none;*/
    }

    .flex-1 {
        display: flex;
        flex-direction: column;
    }
    .daterange-container {
	max-width: 100%;
	width:100%;
	margin-top: auto;
    }

    .daterange-container {
        order: 2;
    }
    .flex-1.container {
        padding-bottom: 0;
	margin-bottom: 0;
    }

}

input[type="checkbox"]:checked ~ .dot {
    transform: translateX(100%);
    transition: transform 0.3s ease, background-color 0.3s ease;
}
#unverbindlichLabel, #festLabel {
    transition: color 0.3s ease, opacity 0.3s ease;
}
#unverbindlichCheck, #festCheck {
    color: #34D399; /* Farbe des Häkchen-Symbols (Grün) */
}



/**************************************************************************************/
/*   Hauptinhalt Step 2
/**************************************************************************************/

.category-box {
    position: relative;
    overflow: hidden;
    width: 120px;
    height: 120px;
    font-size:14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    z-index: 1;
}

@media (max-width: 768px) {
    .category-box {
        width: 120px;
        height: 120px;
    }
}


.category-box::before {
    content: "";    /* Erforderlich für das Pseudoelement */
    position: absolute;   /* Absolute Positionierung innerhalb des relativen Kreises */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 0;
}
.text-content {
    position: relative;
    z-index: 3;
    line-height: 1.5;
    padding: 0 10px;
    max-width: 90%;
    hyphens: auto;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.no-image-bg {
    background-color: #f5f5f5 !important;
    color:#000000;
}
.no-image-bg .text-content {
    text-shadow: none !important;
}
.no-image-bg::before {
    background: none !important;
}


.availability-label {
    background-color: #81ce63;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: bold;
    margin-left: 8px;
}
.unavailability-label {
    background-color: #f24141;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: bold;
    margin-left: 8px;
}

.delete-housing-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.5em;
    color: #FF4D4D !important;
    transition: 0.3s;
}

.delete-housing-icon:hover {
    color: #D43F3F !important;
}

.flex-column {
  flex-direction: column;
}
.container-housing {
    max-width:1000px;
}
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.swiper-slide img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
    max-width: 100%;
}
.swiper-container {
    min-width:40%;
    width: 40%;
    height: 400px;
    position: relative;
	padding-bottom:15px;
}
@media (max-width: 768px) {
    .swiper-container {
        width: 100%;
        height: 200px;
    }
}

.swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 44px;
    background-size: 27px 44px;
}
.swiper-button-prev {
    left: 10px;
}
.swiper-button-next {
    right: 10px;
}
.swiper-button-prev, .swiper-button-next {
    filter: brightness(0) invert(1);
    top: 55% !important;

    background: radial-gradient(circle, rgba(0, 0, 0, 0.3), transparent);
    border-radius: 50%;
    padding: 35px;
}
.swiper-pagination-bullet {
    background: white !important;
    opacity: 0.8;
}



.min-h-1000 {
    min-height:1000px;
}



.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

.feature-list, .housing_details ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
}

.feature-list li, .housing_details ul li {
    flex: 0 1 auto;
    padding: 6px 1rem;
    border-radius: 8px;
    background-color: #e8f5e9;
    color: #228855;
    margin: 5px 5px 10px 5px;
    text-align: left;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 100px;
}

.housing_details ul li.warning {
    background-color: #eae6c4;
    color:#7b7458;
}

.feature-icon {
    margin-right: 0.5rem;
    vertical-align: middle;
}

i.fas {
    color: #228855;
    margin-right: 0.5rem;
}

.housing_details ul li.warning  i.fas {
    color: #7b7458;
    margin-right: 0.5rem;
}


.button-container {
    position: relative;
}
.button-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 140px;
    height: 32px;
    cursor: pointer;
}



@media (max-width: 768px) {
    .container .pt-8 {
	padding: 0 !important;
    }
    .container .p-6 {
	padding: 1.0rem 0.5rem 2.5rem 0.5rem ;
    }
    .container .ml-4 {
	margin-right:1rem;
    }
    .feature-list li {
        font-size: 14px;
        padding: 4px 10px;
	margin: 1px 1px 5px 1px;
    }
    .feature-list {
	margin-bottom:10px;
    }
}


.person-count-block, .additional-articles {
    max-width: 600px;
}
@media (max-width: 768px) {
    .person-count-block, .additional-articles {
	max-width: 100%;
    }
    .person-count-block h1, .additional-articles h1 {
	font-size: 20px !important;
	line-height: 2rem;
    }
}
.bg-gray-200 {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    border: none;
}

.article-item {
    max-width: 600px;
    display: flex;
    justify-content: space-between;
}
@media (max-width: 768px) {
    .article-item {
	max-width: 100%;
    }
}



/* Erstelle eine neue Checkbox */
.checkbox {
    position: absolute;
    top: 0;
    right: -30px;
    display: inline-block;
    width: 30px;
    height: 30px;
    background: white;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
}

/* Erstelle das Häkchen für die neue Checkbox */
.checkbox::after {
    content: "";
    position: absolute;
    display: none;
    left: 8px;
    top: 2px;
    width: 9px;
    height: 20px;
    border: solid black;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Zeige das Häkchen, wenn die Checkbox geprüft wird */
.custom-checkbox input[type="checkbox"]:checked ~ .checkbox::after {
    display: block;
}

.control_text_checkbox {
    margin-left: 40px;
}

/* Neuer Code: Positioniert die Checkbox relativ zum Container */
.checkbox-container {
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
}



/**************************************************************************************/
/*   Hauptinhalt Step 3
/**************************************************************************************/

/* Platzmerkmale-Box (Features) */
#featuresControl {
    position: relative; /* Anpassung: Innerhalb des Containers bleiben */
    width: 100%; /* Passt sich vollständig an den Container an */
    max-height: 200px; /* Begrenze Höhe */
    overflow-y: auto; /* Scrollen bei Überlängen erlauben */
    border-radius: 5px;
}

@media screen and (min-width: 600px) {
    #featuresCheckboxes {
        display: flex;
        flex-wrap: wrap;
        gap: 5px; /* optional: Abstand zwischen den Elementen */
    }

    .feature-checkbox-container {
        flex: 0 0 calc(50% - 10px); /* 50% Breite minus eventuelle gap-Anpassung */
        display: flex;
        align-items: center;
    }
}




#map {
    position: relative; /* Innerhalb des Containers bleiben */
    width: 100%;
    margin-top: 1rem; /* Platz nach unten */
}


.feature-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    z-index: -1;
}

.feature-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-checkbox {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: white;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
}

.feature-checkbox::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.feature-checkbox-input:checked + .feature-checkbox::after {
    display: block;
}

.feature-checkbox-label {
    font-size: 16px;
    color: #333;
    cursor: pointer;
}

.feature-checkbox-container {
    display: flex;
    align-items: center;
    margin-top: 5px;
    gap: 10px;
}


.lageplan-main {
    position: relative;
}
.lageplan-main > .hidden {
    display:none !important;
}
#closeMapButton {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background-color: #f44336; /* Rot */
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10; /* Damit der Button über anderen Elementen liegt */
    transition: background-color 0.2s;
}

#closeMapButton:hover {
    background-color: #d32f2f; /* Dunkleres Rot beim Hover */
}



#tooltip-container {
    z-index: 1000; /* Stellen Sie sicher, dass es über anderen Inhalten liegt */
    position: fixed; /* Überlagerung des gesamten Bildschirms */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Klicks passieren durch das Overlay */
    background: rgba(0, 0, 0, 0.5); /* Halbtransparentes schwarzes Overlay */
    opacity: 0;
    transition: opacity 0.3s ease; /* Transition nur für das Overlay */
}

#tooltip-container.show {
    pointer-events: auto;
    opacity: 1;
}

#tooltip-container.hide {
    pointer-events: none;
    opacity: 0;
}

#tooltip-content {
    position: absolute;
    width: 50%;
    max-width: 800px;
    height: auto; /* Oder setzen Sie eine feste Höhe */
    overflow: hidden;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1); /* Anfangsposition und Skalierung */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Übergangsanimation */
    pointer-events: auto; /* Klicks auf das Tooltip ermöglichen */
}

/* Mobile Ansicht (Media Query) */
@media screen and (max-width: 768px) {
    #tooltip-content {
        width: 95%; /* Weniger Platz lassen */
        max-width: 100%; /* Begrenzung entfernen */
        height: auto; /* Tooltip wächst mit Inhalt */
    }

    #tooltip-container {
        align-items: flex-start; /* Oben zentrieren */
        padding-top: 50px; /* Abstand von oben */
    }
}


.selected_place {
	background-color: #81ce63;
	color: black;
	padding: 2px 8px;
	font-weight: bold;
	margin-left: 8px;
}

#tooltip-content h3, #platzmerkmale_title {
	font-size:19px !important;
	padding: 5px 0px 5px 0px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 10px;
    flex-grow: 1;
    align-content: center;
    display: flex;
    justify-content: left;
    align-items: center;
	font-family: 'Myriad Pro';
}

#platzmerkmale_title {
	padding: 0px 0px 5px 0px !important;
    border-bottom: 0px solid #dbdbdb !important;
	margin-bottom: 0px !important;
}

#tooltip-content ul.features_booking li {
	line-height:20px;
}




@media (max-width: 768px) {
	.ui-dialog-content h3 {
		font-size:20px !important;
	}
	ul.features_booking li {
		line-height: 18px !important;
	}
	.swiper-container {
		padding-top:15px;
		max-height:300px;
	}
}



ul.features_booking {
	padding-left:15px;
	list-style-type: none;
}
ul.features_booking li {
	text-align:left;
	overflow: visible;
	padding-left: 15px;
	line-height:16px;
	position: relative;
	padding-top:5px;
}

ul.features_booking.popup {
	margin-left:-15px;
}
ul.features_booking.popup li {
	padding-top:0px;
}

ul.features_booking li:before {
	content: "\2713";
	left: 0;
	position: absolute;
}

ul.features_not_allowed li:before {
	content: "\01F6AB";
	left: 0;
	position: absolute;
}

ul.features_booking li.attention:before {
	content: "\203C";
	color:#ff0000;
	left: 0;
	position: absolute;
}
ul.features_booking li.attention {
	color:#ff0000;
}



ul.features_booking_1_column {
	margin-left:0px;
	list-style-type: none;
}
ul.features_booking_1_column li {
	text-align:left;
	overflow: visible;
	padding-left: 17px;
	line-height:14px;
	position: relative;
	padding-top:5px;
}

ul.features_booking_1_column.popup {
	margin-left:-10px;
}
ul.features_booking_1_column.popup li {
	padding-top:0px;
}

ul.features_booking_1_column li:before {
	content: "\2713";
	left: 0;
	position: absolute;
}
ul.features_booking_1_column li.attention:before {
	content: "\203C";
	color:#ff0000;
	left: 0;
	position: absolute;
}

#closeMapModal {
	z-index:999 !important;
}

/**********/
/* Slider
/**********/

.swiper-container {
    width: 100%;
    height: 400px; /* Passe die Höhe an */
	overflow: hidden;
}

.swiper-wrapper {
    display: flex;
    transition: transform 0.3s ease; /* Animation für Slide-Wechsel */
    transform: translate3d(0, 0, 0); /* Fix für saubere Übergänge */
}

.swiper-slide {
    width: 100%; /* Stellt sicher, dass jedes Bild 100% des Containers einnimmt */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Beachtet Padding/Borders für die Breite */
}

.swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Stellt sicher, dass das Bild innerhalb des Containers bleibt */
    display: block; /* Verhindert Inline-Element-Probleme */
}

.swiper-button-next, .swiper-button-prev {
    color: rgba(31, 41, 55, 1); /* Pfeilfarbe */
    font-size: 24px; /* Pfeilgröße */
    transition: transform 0.3s;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: rgba(31, 41, 55, 0.1); /* Leichter Hintergrund beim Hover */
    color: rgba(31, 41, 55, 0.8); /* Helle Pfeilfarbe beim Hover */
}



/**************************************************************************************/
/*   Hauptinhalt Step 4
/**************************************************************************************/

copy
.summary {
    margin-left:0px;
}
.card {
    margin-right:0px;
}


@media (max-width: 768px) {
    .summary, .main > .card {
		margin:0px !important;
    }
}

.no_title {
    padding: 23px 0px 5px 0px;
    border-bottom: 0px solid #dbdbdb;
    margin-bottom: 10px;
    flex-grow: 1;
    align-content: center;
    display: flex;
    justify-content: left;
    align-items: center;
}



.anrede-row {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
}

.anrede-input {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.anrede-input label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 17px;
    pointer-events: none;
    transition: 0.3s;
}

.anrede-input-field, .address-input-field {
    width: 100%;
    position: relative;
}

.anrede-input-field input {
    width: 100%;
    height: 60px;
    border-radius: 6px;
    font-size: 16px;
    padding: 0 15px;
    border: 2px solid #fff;
    background: transparent;
    outline: none;
}

.anrede-input-field label, .address-input-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 17px;
    pointer-events: none;
    transition: 0.3s;
}

.anrede-input-field input:focus {
    border: 2px solid #18ffff;
}

.anrede-input-field input:focus ~ label,
.anrede-input-field input[data-required="true"]:valid ~ label {
    top: 0;
    left: 15px;
    font-size: 14px;
    padding: 0 2px;
    color: #000000;
    background: #ffffff;
}

.anrede-input select ~ label {
    top: 0;
    left: 15px;
    font-size: 14px;
    padding: 0 2px;
    color: #000000;
    background: #ffffff;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
    .anrede-input {
        flex-basis: 100%;
        margin-bottom: 15px;
    }

    .anrede-names {
        display: flex;
        flex-direction: row;
	gap: 15px;
    }

    .anrede-input-field {
        flex-basis: 50%;
    }
}

/* Desktop Ansicht */
@media (min-width: 769px) {
    .anrede-input {
        flex-basis: 19%;
        max-width: 20%;
	margin-right:15px;
    }

    .anrede-names {
        flex-basis: 78%;
        display: flex;
	gap: 15px;
    }

    .anrede-input-field {
        flex-basis: 50%;
    }
}





.address-row {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
}

.input-style {
    width: 100%;
    height: 60px;
    border-radius: 6px;
    font-size: 18px;
    padding: 0 15px;
    border: 2px solid #fff;
    background: transparent;
    color: #000000;
    outline: none;
}

.input-style:focus {
    border: 2px solid #18ffff;
}

.input-style:focus ~ label,
.input-style[data-required="true"]:valid ~ label,
.input-style:not(:placeholder-shown) ~ label {
    top: 0;
    left: 15px;
    font-size: 14px;
    padding: 0 2px;
    color: #000000;
    background: #ffffff;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
    .street-input {
        flex-basis: 65%;
	display:flex;
    }
    .house-number-input {
        flex-basis: 25%;
	display:flex;
    }
}

/* Desktop Ansicht */
@media (min-width: 769px) {
    .street-input {
        display:flex;
    }
    .house-number-input {
        display:flex;
    }
}






.location-row {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
}

.plz-field, .city-field {
    position: relative;
    display: flex;
    flex-direction: column;
}

.plz-field {
    flex-basis: auto;
    margin-right: 10px;
    flex-grow: 0;
}

.city-field {
    flex-grow: 1;
}

.plz-field label, .city-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 17px;
    pointer-events: none;
    transition: 0.3s;
}

.plz-field input:focus, .city-field input:focus {
    border: 2px solid #18ffff;
}

.plz-field input:focus ~ label,
.city-field input:focus ~ label,
.plz-field[data-required="true"]:valid ~ label,
.city-field[data-required="true"]:valid ~ label {
    top: 0;
    left: 15px;
    font-size: 14px;
    padding: 0 2px;
    color: #000000;
    background: #ffffff;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
    .plz-field {
	flex-basis: 35%;
	display: flex;
    }
    .city-field {
	flex-basis: 30%;
	display: flex;
    }
}








.country-row {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
}

.country-field {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.country-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 17px;
    pointer-events: none;
    transition: 0.3s;
}

.country-field input:focus {
    border: 2px solid #18ffff;
}

.country-field input:focus ~ label,
.country-field input:valid ~ label {
    top: 0;
    left: 15px;
    font-size: 14px;
    padding: 0 2px;
    color: #000000;
    background: #ffffff;
}
.country-field select ~ label {
    top: 0;
    left: 15px;
    font-size: 14px;
    padding: 0 2px;
    color: #000000;
    background: #ffffff;
}



.email-row, .email-repeat-row {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
}

.email-field, .email-repeat-field {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.email-field label, .email-repeat-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 17px;
    pointer-events: none;
    transition: 0.3s;
}

.email-field input:focus, .email-repeat-field input:focus {
    border: 2px solid #18ffff;
}

.email-field input:focus ~ label, .email-repeat-field input:focus ~ label,
.email-field[data-required="true"]:valid ~ label, .email-repeat-field[data-required="true"]:valid ~ label {
    top: 0;
    left: 15px;
    font-size: 14px;
    padding: 0 2px;
    color: #000000;
    background: #ffffff;
}




.phone-row {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
}

.phone-field {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.phone-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 17px;
    pointer-events: none;
    transition: 0.3s;
}

.phone-field input:focus {
    border: 2px solid #18ffff;
}

.phone-field input:focus ~ label,
.phone-field[data-required="true"]:valid ~ label {
    top: 0;
    left: 15px;
    font-size: 14px;
    padding: 0 2px;
    color: #000000;
    background: #ffffff;
}



.custom-row {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
}

.custom-field {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.custom-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 17px;
    pointer-events: none;
    transition: 0.3s;
}

.custom-field input:focus {
    border: 2px solid #18ffff;
}

/* Verhalten, wenn das Eingabefeld den Fokus hat, gültigen Inhalt enthält oder der Platzhalter nicht angezeigt wird */
.custom-field input:focus ~ label,
.custom-field[data-required="true"]:valid ~ label {
    top: 0;
    left: 15px;
    font-size: 14px;
    padding: 0 2px;
    color: #000000;
    background: #ffffff;
}




/**************************************************************************************/
/*   Preistabelle
/**************************************************************************************/

.form .row {
    padding:0;
}

/* Basisstil für die Tabelle */
.partial_payment_table {
    width: 100%;
    border-collapse: collapse;
}

.partial_payment_table td, .partial_payment_table th {
    padding: 0.5rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e5e7eb;
}

/* Zellen, die rechtsbündig ausgerichtet sein sollen */
.partial_payment_table td[style*="text-align:right;"], .partial_payment_table th[style*="text-align:right;"] {
    text-align: right;
}

/* Top-Zellen-Styling */
.partial_payment_table .artikel_top {
    background-color: #f9fafb; /* bg-gray-100 */
    font-weight: 500; /* font-semibold */
}

/* Spezielles Styling für die letzte Zeile vor dem Gesamtpreis */
.partial_payment_table tr:nth-last-child(1) td {
    border-bottom: 2px solid #e5e7eb; /* border-b-2 border-gray-300 */
}

.partial_payment_table td:last-child {
    width: 70px !important;
    text-align: right !important;
}


.payment_info_text {
    background-color: #f7f7f7;
    padding:8px;
    white-space: normal;
}

.iban-highlight {
    font-weight: bold;
    background-color: #f9fafb;  /* Ein heller Hintergrund */
    padding: 8px;
    padding-left:0px;
    margin-top: 8px;  /* Ein bisschen Abstand nach oben */
    border-radius: 4px;  /* Abgerundete Ecken */
}

.payment_info img {
    max-width:400px;
}

/* Mobiler Stil */
@media (max-width: 640px) {
    .partial_payment_table td, .partial_payment_table th {
        padding: 0.25rem; /* padding-1 */
    }
    .payment_info img {
	width:250px;
	float:right;
    }
}



.vehicle-title h3 {
    font-size: 24px;
    margin-bottom: 10px;
    text-align: left;
    color: #333;
}

.vehicle-row {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
    margin-top: 10px;
}

.vehicle-field {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.vehicle-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 17px;
    pointer-events: none;
    transition: 0.3s;
}

.vehicle-field .vehicle-input {
    width: 100%;
    padding: 15px 15px 15px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    font-size: 17px;
}

.vehicle-field .vehicle-input:focus {
    border-color: #18ffff;
    outline: none;
}

.vehicle-field .vehicle-input:focus ~ label,
.vehicle-field .vehicle-input:valid ~ label {
    top: 0;
    left: 15px;
    font-size: 16px;
    padding: 0 2px;
    color: #000000;
    background: #ffffff;
}

.vehicle-field .vehicle-input:placeholder-shown ~ label {
    font-size: 17px;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}



.plate-row {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
}

.plate-row .label {
    padding-right: 0px;
}

/* Mobiler Stil */
@media (max-width: 640px) {
    .plate-row {
	display: block;
    }
}

.firstTimeLabel {
    max-width:500px;
}

i.fas {
    font-size:20px;
}





.textarea-container {
    position: relative;
    top:10px;
    display:flex !important;
}

.textarea-container .input {
    position: relative;
}

.textarea-container textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    padding-top:10px;
}

.textarea-container > .label {
    width: 100%;
    flex: auto;
    padding:0;
}

.textarea-container label {
    position: absolute;
    top: -10px;
    left: 15px;
    pointer-events: none;
    transition: 0.3s;
    background-color: #ffffff;
    padding: 0 2px;
}


.container_agb_step1 {
    padding:0;
}

.container_agb, .container_datenschutz {
    width:100%;
    text-align:left;
}
.container_datenschutz .datenschutz {
    padding-left:10px;
    position:relative;
    top:3px;
}

/* Mobiler Stil */
@media (max-width: 640px) {
    .confirm_agb {
	float:none;
    }
}