@font-face {
    font-family: 'Roboto Medium';
    src: url('includes/Roboto-Medium.ttf') format('truetype'); /* Pfad zur Schriftart-Datei */
    font-weight: 500; /* Hier muss das Gewicht übereinstimmen */
}

@font-face {
    font-family: 'Roboto Black';
    src: url('includes/Roboto-Black.ttf') format('truetype'); /* Pfad zur Schriftart-Datei */
    font-weight: 900; /* Hier muss das Gewicht übereinstimmen */
}

@font-face {
    font-family: 'Rubik Doodle Shadow';
    src: url('includes/RubikDoodleShadow-Regular.ttf') format('truetype'); /* Pfad zur Schriftart-Datei */
    font-weight: 400; /* Hier muss das Gewicht übereinstimmen */
}

html {
height:				100%;
}

body {
font-family:		"Roboto Medium", sans-serif;
font-size:			12pt;
width:				100%;
margin:				0;
padding:			0;
}

#wrapper {
width:				100%;
}

#clear_div {
clear:				both;
height:				70px;
}

#header {
position:			relative;
}

#header img {
max-width:			100%;
}

.titelbild {
width:				100%;
}

#header_navi {
background-color:	#e30613;
}

#header_navi_streifen {
background:			#c3d561;
height:				30px;
width:				100%;
}

#header_navi_inhalt {
max-width:			1110px;
margin:				0 auto;
padding:			15px 0;
}

@media screen and (max-width:1260px) {
	#header_navi_inhalt {
		max-width:			90%;
	}
}

#header_navi_inhalt_logo {
width:				60%;
float:				left;
}

#header_navi_inhalt_logo img {
width:				302px;
max-width:			100%;
display:			block;
}

#menu_icon {
position:			relative;
cursor:				pointer;
height:				70px;
fill:				white;
background:			#B8D66E;
}

#icon_menu_icon_wrap {
display:			inline-block;
}

#icon_anmeldemaske_wrap {
display:			inline-block;
margin-right:		20px;
}

#icon_anmeldemaske {
fill:				white;
background:			#B8D66E;
height:				70px;
}

#icon_anmeldemaske {
    display: inline;
    border: none;
    outline: none;
}

@media screen and (max-width:520px) {
	#menu_icon, #icon_anmeldemaske {
		height:				45px;
		width:				auto;
		display:			inline;
	}
}

#header_navi_inhalt_navi {
width:				40%;
position:			relative;
float:				right;
text-align:			right;
}

@media screen and (max-width:520px) {
	#header_navi_inhalt_logo {
		float:				none;
		margin-bottom:		15px;
		text-align:			left;
		width:				100%;
	}
	#header_navi_inhalt_navi {
		float:				none;
		text-align:			right;
		width:				100%;
	}
}

#header_banderole {
max-width:			1110px;
margin:				0 auto;
}

@media screen and (max-width:1260px) {
	#header_banderole {
		max-width:			90%;
	}
}

#navigation_inhalt {
position:			absolute;
display:			inline-block; /* Immer inline-block */
opacity:			0;            /* Standardmäßig unsichtbar */
pointer-events:		none; /* Keine Interaktion, wenn unsichtbar */
transition:			opacity 0.5s ease; /* Weicher Übergang für Opazität */
background:			#c3d561;
top:				0;
right:				0;
width:				300px;
max-width:			340%;
padding-top:		15px;
padding-bottom:		15px;
font-size:			13pt;
}

@media screen and (max-width:520px) {
	#navigation_inhalt {
		max-width:			100%;
	}
}

#navigation_inhalt.visible, #navigation_schliessen.visible {
opacity:			1;
pointer-events:		auto; /* Erlaubt Interaktion, wenn sichtbar */
}

.navigation, .navigation_inhalt {
margin-bottom:		15px;
}

.navigation a, .navigation_inhalt a {
text-decoration:	none;
}

#navigation_schliessen {
cursor:				pointer;
z-index:			99;
position:			absolute;
width:				20px;
top:				20px;
right:				20px;
display:			inline-block; /* Immer inline-block */
opacity:			0;            /* Standardmäßig unsichtbar */
pointer-events:		none; /* Keine Interaktion, wenn unsichtbar */
transition:			opacity 0.5s ease; /* Weicher Übergang für Opazität */
}

.navipunkt {
display:			block;
text-align:			left;
margin:				0 60px 0 22px;
padding:			10px 0;
}

.navipunkt a {
text-decoration:	none;
}

.navipunkt a {
color:				white;
}

.navipunkt a:hover, .navipunkt:hover {
color:				#575756;
}

.navipunkt_aktiv a {
color:				#575756;
}

.navipunkt_linie {
border-right:		3px solid white;
}

#content_wrap {
width:				1110px;
margin:				0 auto;
margin-top:			50px;
min-height:			350px;
}

@media screen and (max-width:1260px) {
	#content_wrap {
		max-width:			90%;
	}
}

#content {
margin:				20px 0;
}

#content a {
color:				#16a2dd;
text-decoration:	none;
}

#content a:hover {
text-decoration:	underline;
}

#footer_wrap {
background-color:	#c3d561;
width:				100%;
color:				white;
padding:			50px 0 50px 0;
display:			flex;
justify-content:	center;
align-items:		center;
}

#footer_content {
display:			flex;
justify-content:	space-between;
width:				1110px;
}

@media screen and (max-width:1260px) {
	#footer_content {
		max-width:			90%;
	}
}

#footer_content a, #footer_content a:visited {
color:				white;
text-decoration:	none;
}

#footer_content a:hover {
text-decoration:	underline;
}

#footer_content img {
max-width:			90%;
}

#footer_adresse, #footer_informationen, #footer_logo {
flex-basis:			calc(33.33% - 13.33px);
}

#footer_logo {
text-align:			right;
}

@media screen and (max-width: 700px) {
	#footer_wrap {
		padding:			50px 0 0 0;
	}
    #footer_content {
        flex-direction:		column;
    }
    #footer_adresse, #footer_informationen, #footer_logo {
        flex-basis:			100%;
        margin-bottom:		35px;
    }
    #footer_logo {
        margin-bottom:		0;
		text-align:			left;
    }
}

.footer_titel {
font-family:		"Roboto Black", sans-serif;
margin-bottom:		15px;
text-transform:		uppercase;
}

#footer_logo img {
width:				200px;
max-width:			100%;
}

@media screen and (max-width:885px) {
	#footer_content {
		width:				90%;
	}
	#footer_adresse, #footer_informationen, #footer_logo {
		float:				none;
		width:				100%;
		margin-right:		0;
	}
}

#freitext_wrap {
margin-bottom:		60px;
}

#textbild_wrap {
margin-bottom:		30px;
}

#textbild_einleitung {
margin-bottom:		30px;
}

.textbild_bild {
text-align:			right;
margin-bottom:		40px;
width:				55%;
float:				right;
}

.textbild_bild img {
max-width:			90%;
}

@media screen and (max-width:770px) {
	.textbild_text, .textbild_bild {
		width:			100%;
		float:			none;
		margin-bottom:	20px;
	}
	.textbild_text {
		text-align:		left;
	}
	.textbild_bild {
		text-align:		center;
	}
	.textbild_bild img {
		max-width:		100%;
	}
}

.pfeil_link {
width:				60px;
cursor:				pointer;
}

@media (max-width: 768px) {
    #textbild_wrap {
		flex-direction:		column;
		align-items:		stretch;
    }
}

.fett {
font-weight:		bold;
}

.fett_rot {
font-weight:		bold;
color:				#e30613;
}

.formularfelder {
font-size:			0.9em;
}

.formfield, .formfield_fehler {
height:				25px;
}

.formfield_select, .formfield_select_fehler {
height:				30px;
}

.formfield_textarea, .formfield_textarea_fehler {
height:				120px;	
}

.formfield, .formfield_fehler,
.formfield_select, .formfield_select_fehler,
.formfield_textarea, .formfield_textarea_fehler {
font-family:		"Roboto Medium", sans-serif;
font-size:			0.9em;
width:				100%;
max-width:			300px;
border:				1px solid #16a2dd;
}

.formfield_fehler, .formfield_select_fehler, .formfield_textarea_fehler {
background:			#FE797B;
}

.formfield_filter {
height:				25px;
font-family:		"Roboto Medium", sans-serif;
font-size:			0.9em;
border:				1px solid lightgrey;
}

.formfield_filter_select {
height:				27px;
font-family:		"Roboto Medium", sans-serif;
font-size:			0.9em;
border:				1px solid lightgrey;
}

.form_kontakt {
margin-bottom:		10px;
}

.formmeldung_fehler {
padding:			10px 20px;
margin-bottom:		25px;
background:			#e30613;
color:				white;
font-weight:		bold;
}

.formular_datenschutz {
margin:				15px 0 20px 0;
}

.formular_datenschutz_box {
float:				left;
margin-right:		10px;
}

.formular_datenschutz_text {
overflow:			hidden;
}

.form_anmeldung {
float:				left;
width:				calc(50% - 20px);
margin-right:		20px;
margin-bottom:		20px;
}

@media screen and (max-width:885px) {
	.form_anmeldung {
		float:				none;
		width:				100%;
		margin-right:		0;
	}
}

input[type=submit] {
background:			#16a2dd;
border:				none;
color:				white;
padding:			8px 16px;
text-decoration:	none;
cursor:				pointer;
}

#button_anmelden, #button_senden {
background:			#c3d561;	
}

.df_field {
display:			none;
}

.titel {
float:				left;
width:				100%;
width:				100%;
margin-bottom:		30px;
}

.userangabe_titel {
font-weight:		bold;
font-size:			0.8em;
}

.userangabe {
font-size:			0.8em;
}

.seitentitel {
font-weight:		bold;
font-size:			12pt;
}

.youtube {
max-width:			100%;
}

.youtube_boxen {
max-width:			80%;
}

.clear_both {
clear:				both;
}

.clear_left {
clear:				left;
}

h1 {
font-size:			45pt;
font-family:		"Rubik Doodle Shadow", sans-serif;
color:				#16a2dd;
margin-bottom:		30px;
text-transform:		uppercase;
hyphens:			auto;
word-wrap:			break-word;
-webkit-hyphens:	auto;
-moz-hyphens:		auto;
-ms-hyphens:		auto;
hyphens:			auto;
language:			de;
}

h2 {
font-size:			28pt;
font-family:		"Rubik Doodle Shadow", sans-serif;
color:				#16a2dd;
margin-bottom:		30px;
text-transform:		uppercase;
}

@media screen and (max-width:885px) {
	h1 {
		font-size:			24pt;
	}
	h2 {
		font-size:			18pt;
	}
}

#boxen_home_wrap {
margin-bottom:		60px;
}

.boxen_home {
float:				left;
color:				white;
width:				calc(50% - 7.5px);
box-sizing:			border-box;
margin-right:		15px;
text-align:			right;
background:			#c3d561;
}

.boxen_home2 {
margin-right:		0;
}

.boxen_home_row {
margin-bottom:		45px;
overflow:			hidden;
}

.boxen_home_bild img {
width:				100%;
}

.boxen_home_inhalt {
text-align:			left;
padding:			10px 15px 50px 15px;
}

.boxen_home_titel {
font-size:			16pt;
color:				#16a2dd;
font-family:		"Roboto Medium", sans-serif;
margin-bottom:		10px;
}

.boxen_home_button {
background:			#16a2dd;
color:				white;
padding:			15px 20px;
display:			inline-block;
}

.boxen_home_button a,
.boxen_home_button a:hover,
.boxen_home_button a:visited,
.boxen_home_button a:active {
    color: white !important;
    text-decoration: none !important;
}

@media screen and (max-width:700px) {
	#boxen_home_wrap {
		margin-bottom:		15px;
	}
	.boxen_home_row {
		margin-bottom:		0;
	}
	.boxen_home {
		width:				100%;
		margin-right:		0;
		margin-bottom:		30px;
	}
}

#anlaesse_einleitung {
margin-bottom:		20px;
}

#anlaesse_wrap {
margin-bottom:		60px;
}

.anlaesse {
background:			#c3d561;
text-align:			right;
color:				white;
box-sizing:			border-box;
float:				left;
width:				calc(33.333% - 10px);
margin-right:		15px;
}

.anlaesse3 {
margin-right:		0;
}

.anlaesse_row {
margin-bottom:		15px;
overflow:			hidden;
}

.anlaesse_bild img {
width:				100%;
}

.anlaesse_inhalt {
text-align:			left;
padding:			10px 25px 20px 25px;
}

.anlaesse_titel {
font-size:			16pt;
color:				#16a2dd;
font-family:		"Roboto Medium", sans-serif;
margin-bottom:		10px;
}

.anlaesse_abgesagt {
text-transform:		uppercase;
color:				red;
margin-top:			20px;
}

.anlaesse_button {
background:			#16a2dd;
color:				white;
padding:			15px 20px;
display:			inline-block;
}

.anlaesse_button a,
.anlaesse_button a:hover,
.anlaesse_button a:visited,
.anlaesse_button a:active {
    color: white !important;
    text-decoration: none !important;
}

@media screen and (max-width:800px) {
	#anlaesse_wrap {
		margin-bottom:		15px;
	}
	.anlaesse_row {
		margin-bottom:		0;
	}
	.anlaesse {
		width:				100%;
		margin-right:		0;
		margin-bottom:		30px;
	}
}

#anlaesse_filter_wrap {
margin-bottom:		15px;
padding-bottom:		15px;
border-bottom:		1px solid #c3d561;
}

.anlaesse_filter_box {
background:			lightgrey;
box-sizing:			border-box;
float:				left;
width:				calc(33.333% - 10px);
padding:			20px;
margin-right:		15px;
}

.anlaesse_filter_box3 {
margin-right:				0;
}

@media screen and (max-width:965px) {
	.anlaesse_filter_box {
		float:						none;
		width:						100%;
		margin-right:				0;
		margin-bottom:				15px;
	}
}

.anlaesse_filter_label {
margin-bottom:		10px;
}

.anlaesse_filter_reset {
margin-top:			10px;
display:			inline-block;
color:				#16a2dd;
text-decoration:	none;
cursor:				pointer;
}

.anlaesse_filter_reset:hover {
text-decoration:	underline;
}

#ferienpass_detail_bild, #ferienpass_detail_beschreibung {
margin-bottom:		30px;
}

#ferienpass_detail_absage {
color:				red;
margin-bottom:		30px;
}

#ferienpass_detail_bild img {
width:				100%;
}

#ferienpass_detail_tabelle {
margin-bottom:		45px;
}

.ferienpass_detail_tabelle_row {
padding:			10px 0;
border-bottom:		1px solid #c3d561;
overflow:			hidden;
}

.ferienpass_detail_tabelle_links {
float:				left;
width:				270px;
}

.ferienpass_detail_tabelle_links_icon {
float:				left;
margin-right:		15px;
}

.ferienpass_detail_tabelle_links_icon img {
width:				40px;
}

.ferienpass_detail_tabelle_links_text {
font-weight:		bold;
padding-top:		11px;
}

.ferienpass_detail_tabelle_rechts {
overflow:			hidden;
padding:			11px 0;
}

@media (max-width: 800px) {
	.ferienpass_detail_tabelle_links {
		float:				none;
		width:				100%;
	}
}

#ferienpass_detail_button_wrap {
text-align:			center;
}

.ferienpass_detail_button_anmeldung {
background:			#c3d561;
color:				white;
padding:			20px 30px;
margin-bottom:		20px;
display:			inline-block;
cursor:				pointer;
}

.ferienpass_detail_button_sonstige {
background:			#16a2dd;
padding:			20px 30px;
color:				white;
margin-bottom:		20px;	
display:			inline-block;
}

@media screen and (max-width:475px) {
	.ferienpass_detail_button_anmeldung,
	.ferienpass_detail_button_sonstige {
		padding:			20px 15px;
	}
}

#link_googlemaps {
margin-top:			15px;	
}

.videobox_links, .videobox_rechts {
float:				left;
width:				47%;
text-align:			center;
margin-bottom:		40px;
}

.videobox_links {
padding-right:		3%;
}

.videobox_rechts {
padding-left:		3%;
}

.videoboxen_titel {
color:				#e30613;
font-family:		"Roboto Black", sans-serif;
margin-bottom:		10px;
}

.videoboxen_video {
position:			relative;
width:				100%;
padding-bottom:		56.25%; /* 16:9 Aspect Ratio (Höhe/Breite) */
margin-bottom:		20px;
}

.videoboxen_video iframe {
position:			absolute;
top:				0;
left:				0;
width:				100%;
height:				100%;
}

@media (max-width: 768px) {
	.videobox_links, .videobox_rechts {
		float:				none;
		width:				100%;
		padding:			0;
	}
}

ul {
margin-left:		20px;
}

#breadcrumb_wrap {
font-size:			8pt;
display:			none;
}

#breadcrumb {
margin-bottom:		12px;
}

#breadcrumb a {
color:				black;
}

.breadcrumb_divider {
color:				#e30613;
}

.kontakt_links {
float:				left;
width:				40%;
margin-right:		10%;
margin-bottom:		45px;
}

.kontakt_rechts {
margin-bottom:		45px;
overflow:			hidden;
}

.kontakt_rechts_beschreibung {
margin-bottom:		60px;
}

@media screen and (max-width:885px) {
	.kontakt_links {
		float:				none;
		width:				100%;
		margin-right:		0;
		margin-bottom:		60px;
	}
}

.flohmi_detail_tabelle_row {
padding:			10px 0;
overflow:			hidden;
}

.flohmi_detail_tabelle_links {
float:				left;
width:				270px;
}

.flohmi_detail_tabelle_links_icon {
float:				left;
margin-right:		15px;
}

.flohmi_detail_tabelle_links_icon img {
width:				40px;
}

.flohmi_detail_tabelle_links_text {
font-weight:		bold;
padding-top:		11px;
}

.flohmi_detail_tabelle_rechts {
overflow:			hidden;
padding:			11px 0;
}

@media (max-width: 500px) {
	.flohmi_detail_tabelle_links {
		float:				none;
		width:				100%;
	}
}

#text_links {
margin-right:		260px;
margin-bottom:		40px;
}

#text_rechts {
margin-bottom:		40px;
width:				230px;
float:				right;
}

#text_rechts a {
color:				black;
text-decoration:	none;
}

#text_rechts a:hover {
text-decoration:	underline;
}

@media screen and (max-width:640px) {
	#text_links {
		margin-right:		0;
		margin-bottom:		0;
	}
	#text_rechts {
		margin-bottom:		25px;
		width:				100%;
		float:				none;
		display:			inline-block;
	}	
}

.referenzen_wrap {
margin-bottom:		60px;	
}

.referenzen_block {
margin-bottom:		25px;
}

blockquote {
background: url(./images/quote.png) left 4px no-repeat;
padding-left: 55px;
font-size: var(--wpex-text-lg);
color: var(--wpex-text-4);
}

.home_einleitung {
margin-bottom:		45px;	
}

.anmeldung_beschreibung {
margin-bottom:		20px;
}

.anmeldung_formular_wrap {
margin-bottom:		30px;
}

.anmeldung_formular_row {
padding:			20px 0;
border-bottom:		1px solid #c3d561;
}

.anmeldung_formular_spalte1, .anmeldung_formular_spalte2, .anmeldung_formular_spalte3,
.anmeldung_formular_spalte4, .anmeldung_formular_spalte5 {
float:				left;
}

.anmeldung_formular_spalte1 {
width:				11%;
margin-right:		2%;
font-weight:		bold;
}

.anmeldung_formular_spalte2 {
width:				9%;
margin-right:		2%;
text-align:			center;
}

.anmeldung_formular_spalte3 {
width:				12%;
margin-right:		2%;
text-align:			center;
}

.anmeldung_formular_spalte4 {
width:				48%;
margin-right:		2%;
}

.anmeldung_formular_spalte5 {
width:				12%;
text-align:			right;
}

.anmeldung_formular_zeile1 {
margin-bottom:		8px;
}

.anmeldung_formular_zeile2.zentriert {
display:			flex;
justify-content:	center;
align-items:		center;
}

.anmeldung_formular_zeile2.linksbuendig {
display:			flex;
align-items:		center;
}

@media screen and (max-width:800px) {
	.anmeldung_formular_spalte1, .anmeldung_formular_spalte2, .anmeldung_formular_spalte3,
	.anmeldung_formular_spalte4, .anmeldung_formular_spalte5 {
		float:				none;
		width:				100%;
		margin:				0 0 10px 0;
		text-align:			left;
	}
	.anmeldung_formular_zeile1.float {
		float:				left;
		width:				100px;
	}
	.anmeldung_formular_zeile2.zentriert,
	.anmeldung_formular_zeile2.linksbuendig {
		display:			inline;
	}
}

.anmeldung_formular_button_loeschen {
background:			#c3d561;
color:				white;
padding:			5px 10px;
display:			inline-block;
cursor:				pointer;
}

.anmeldung_formular_hinweis {
margin-bottom:		80px;	
}

.anmeldung_formular_submit {
text-align:			left;
margin-top:			20px;
margin-bottom:		35px;
}

#anmeldung_formular_kontaktdaten_meldung {
padding:			20px;
background:			red;
color:				white;
border:				1px solid #575756;
margin-bottom:		20px;
}

.anmeldung_formular_kontaktdaten_wrap {
display:			flex;
margin-bottom:		50px;
}

.anmeldung_formular_kontaktdaten_links {
flex-grow:			1;
display:			flex;
padding-right:		20px;
}

.anmeldung_formular_kontaktdaten_rechts {
flex:				0 0 300px;
padding:			20px;
box-sizing:			border-box;
background:			lightgrey;
align-self:			flex-start;
}

@media screen and (max-width:800px) {
	.anmeldung_formular_kontaktdaten_wrap {
		display:			block;
	}
	.anmeldung_formular_kontaktdaten_links {
		padding-right:		0;
	}
	.anmeldung_formular_kontaktdaten_links,
	.anmeldung_formular_kontaktdaten_rechts	{
		flex-basis:			auto;
		flex-grow:			0;
		flex-shrink:		1;
		width:				100%;
		align-self:			auto;
    }
}

.anmeldung_formular_kontaktdaten_rechts_titel {
font-weight:		bold;
margin-bottom:		15px;
}

.anmeldung_formular_kontaktdaten_rechts_text {
margin-bottom:		15px;
}

.anmeldung_formular_kontaktdaten_rechts_bedingungen_box {
float:				left;
margin-right:		10px;
}

.anmeldung_formular_kontaktdaten_rechts_bedingungen_text {
overflow:			hidden;
}

#anmeldung_passwort_text {
margin-bottom:		20px;
color:				red;
font-weight:		bold;
}

.custom-checkbox-label {
display:			flex;
align-items:		center;
}

.anmeldung_checkbox {
display:			none;
}

.custom-checkbox-label .checkbox-mark {
display:			inline-block;
width:				20px;
height:				20px;
border:				1px solid #16a2dd;
background-color:	white;
margin-right:		5px;
}

.anmeldung_checkbox:checked + .checkbox-mark {
background-color:	#16a2dd;
}

.mitfahrgelegenheit-container {
display:			flex;
align-items:		left;
flex-wrap:			nowrap;
}

.custom-radio-label {
display:			flex;
align-items:		center;
margin-right:		10px;
}

.anmeldung_radio {
display:			none;
}

.custom-radio-label .radio-mark {
display:			inline-block;
width:				20px;
height:				20px;
border:				1px solid #16a2dd;
background-color:	white;
border-radius:		50%;
margin:				0 10px;
}

.anmeldung_radio:checked + .radio-mark {
background-color:	#16a2dd;
}

        .buchungsstand_wrap {
            display: flex;
        }

        .buchungsstand_bar {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            background-color: #ddd;
        }

        .buchungsstand_bar_colored {
            background-color: #16a2dd;
        }

* {
margin:				0;
padding:			0;
}

p {
margin:				15px 0;
}