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

/*CSS Variablen */
        :root {
            /*Farbdefinitionen gesamte Website*/
            --hellgrau:rgba(243,243,244,1.00);
            --dunkelgrau:rgba(128,128,128,1.00);
            --gruen:rgba(188,224,167,1.00);
			--gelb:rgba(252,245,169,1.00);
			
			--gruen_transparent:rgba(188,224,167,0.50);
        }

/*CSS reset*/
*{
		padding:0;
		margin:0;
		box-sizing:border-box;
	}

/*allgemeine HTML-Elemente*/

body {
	font-family: "Arial", "sans-serif";
	font-weight: 400;
	text-align: center;
	display:flex;
}

html, body {
    scroll-behavior: smooth;
}

img {
	width:100%;
}

icon img {
	width:1.5rem;
}

hr {
	margin:2rem 0rem 1.5rem;
}

ul {
	margin-left:2rem;
	padding-top:1rem;
	line-height:1.5rem;
}

/* ============= Typografie =============== */

/* Schriften */

h1 {
	font-weight: 550;
	font-size:2rem;
	padding-top:2rem;
	padding-bottom:1rem;
}

h2 {
	font-weight: 600;
	font-size:1.25rem;
	padding-top:1.5rem;
	padding-bottom:0.75rem;
}

h3 {
	font-weight:600;
	font-size:1rem;
	padding-top:1.5rem;
	padding-bottom:0.5rem;
}

p {
	line-height:1.5rem;
}

/* Haupt-Container */
#container {
	max-width: 1440px;
	margin:auto;
	text-align:left;
	aspect-ratio:auto;
	padding: 1rem 1rem 1rem 1rem;
}

/* Header */

header {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	min-height: 4.5rem;
	align-items:center;
	justify-content:space-between;
}

.logo {
	height:4.5rem;
	width:auto;
}

#header_rechts {
	display:flex;
	flex-direction:row;
	left:0;
	top:0;
}

/* Navigation */
nav {
	padding:0;
	margin:0;
}

#hauptmenu {
	list-style-type:none;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	height:4.5rem;
	align-items:center;
	margin:0;
	padding:0;
}

#hauptmenu li {
	padding-right:0.5rem;
}

#hauptmenu li a {
	color:black;
	text-decoration:none;
	padding:1rem 1rem 1rem 0rem;
}

#hauptmenu li a:first-child {
	margin-left:0rem;
}


#hauptmenu li a:hover {
	text-decoration:underline;
}


.aktiv {
	font-weight:600;
	text-decoration:underline !important;
}

#hamburger {
	display:none;
	top: 1rem;
	left: 1rem;
}

#symbol {
	height:2rem;
	z-index:43;
}

.nav_open {
	left:0rem;
	display:flex !important; /* Klasse ist offenbar stärker als ID, deshalb übersteuern */
}

#notfallbutton {
	margin-right:2rem;
	align-self:center;
}

#notfallbutton a {
	color:black;
	text-decoration:none;
	padding:1rem;
}

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

/* Footer */

footer {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
}


/* Links stylen */

a {
	color:inherit;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

/* Hero-Section */
#hero {
	display:flex;
	align-items:center;
	position:relative;
	margin:1rem 0rem;
	
}

#hero_bild {
	width:65%;
}

#hero_text {
	color:var(--dunkelgrau);
	font-size:clamp(1rem,4vw,3rem);
	font-weight:500;
	position:absolute;
	right:0rem;
	text-align:right;
}

#hero_text p {
	line-height:clamp(1.5rem,4vw,3.5rem);
}

.cta_button {
	margin-top:1rem;
}

.cta_button a {
	color:black;
	padding:0.75rem 4rem;
	background-color:var(--gruen);
	border-radius:0.5rem;	
	width: fit-content;
  	white-space: nowrap;
	margin-left:auto;
	font-size:1rem;
	box-shadow:-1px 1px 3px rgba(0,0,0,0.2);
}

/*==============	Formular 		================*/

input, select, textarea {
	border:none;
	background-color:var(--hellgrau);
	width:100%;
	padding:0.75rem 0.5rem;
	font-size:1rem;
	margin:0.5rem 0rem;
}

::placeholder {
	color:black;
	opacity:1; /*Firefox*/
}

input[type=radio]{
	width:2rem;
}

.anrede {
	margin-right:3rem;
}

textarea {
	height:10rem;
	font-family: "Arial", "sans-serif";
}

input[type=submit]{
	background-color:var(--gruen);
	width:40%;
	display:block;
	margin:auto;
	border-radius:0.5rem;
}

input[type=submit]:hover{
	text-decoration:underline;
}


.kontakt {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

.kontakt p {
	width: calc(50% - 1rem);
}

.kontakt p:first-child {
	border-right: 1px solid black;
	margin-right:1rem;
}



/*==============	Inhaltselemente 		================*/


.content_sidebar {
	display:flex;
	gap:1.5rem;
}

.main_content {
	width:75%;
}

.sidebar_schmal {
	width:25%;
}

.sidebar_schmal h2 {
	background-color:var(--hellgrau);
	padding:1rem;
	margin-top:2rem;
}

.sidebar_schmal p {
	background-color:var(--gelb);
	padding:1rem;
}

.button {
	background-color:var(--gruen);
	display:block;
	border-radius:0.5rem;
	padding:0.75rem 3rem;
	margin:0 auto;
	width:90%;
	font-size:1rem;
	text-align:center;
}


.button_schmal {
	background-color:var(--gruen);
	display:block;
	border-radius:0.5rem;
	padding:0.75rem 3rem;
	max-width:15rem;
	margin: 0 auto;
	font-size:1rem;
	text-align:center;
}

/* Flexbox */

.flex_container {
	display:flex;
	flex-direction:row;
	gap:1.5rem;
	margin-top:2rem;
}

.fbox_3 {
	width:33.333333333333333%;
	display:flex;
	flex-direction:column;
	flex-grow:1;
}

.fbox_3 h2 {
	background-color:var(--hellgrau);
	padding:1rem;
	margin-top:2rem;
	color:black;
}

.fbox_3 h2 a {
	text-decoration:none;
}

.fbox_3 h2 a:hover {
	text-decoration:underline;
}

.fbox_3 p {
	background-color:var(--gelb);
	padding:1rem;
	flex:1;
}

/* Galerie */
.bildergalerie {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:1.5rem;
	margin-top:0.5rem;
	max-width:100%;
}

.text_bild_box {
	width: calc(33.33% - 1rem);
}

.galerie_bild {
	position:relative;
	flex-grow:1;
	aspect-ratio:16/9;
	justify-content:center;
}

.galerie_bild img {
	aspect-ratio:4/3;
	object-fit:cover;
}

.bildlegende {
	position:absolute;
	background-color:var(--gruen_transparent);
	bottom:0.25rem;
	width:100%;
	padding:1rem;
	z-index:55;
}

.bildlegende h3:hover {
	text-decoration:underline !important;
}

.bildlegende h3 {
	padding-top:0rem;
	padding-bottom:0rem;
}

.portrait_box {
	width: calc(33.33% - 1rem);
}

.portrait_box {
	margin-top:-1rem;
}

.portrait_bild {
	aspect-ratio:3/4;
	object-fit:cover;
	position:relative;
}

.portrait_legende {
	position:absolute;
	background-color:var(--gruen_transparent);
	bottom:0.25rem;
	width:100%;
	padding:1rem;
	z-index:55;
}

.portrait_legende h3 {
	padding-top:0rem;
	padding-bottom:0rem;
}

/* Stelleninserat */

.stelleninserat {
	display:flex;
	flex-direction:row;
	align-content:center;
}

.stelleninserat img {
	width:2rem;
	height:2rem;
	margin-left:1rem;
}

.stelleninserat a {
	margin-right:1rem;
	font-weight:bold;
}

/* nützliche Klassen */

.gelb {
	background-color:var(--gelb);
	padding-bottom:1rem;
}

.kein_abstand {
	padding-bottom:0rem;
}

.zentriert {
	margin:0 auto;
	text-align:center;
}


/*==========================================================*/
/*================		Media Queries: 		================*/
/*==========================================================*/

@media screen and (max-width:812px) {
	
	/* mobile Navigation mit Hamburger */
	
	header {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	min-height: 4.5rem;
	align-items:center;
	justify-content:space-between;
}


	#hauptmenu {
		display: none; /* Navigationsliste ausblenden */
		flex-direction: column; /* Links untereinander anordnen */
		position: fixed;
		top: 4.5rem; /* Unterhalb der Navigation */
		left: 0;
		height: 100%;
		width:30%;
		background-color: rgba(255,255,255,0.8); /* Hintergrundfarbe für das Menü */
		z-index: 42; /* Stellen Sie sicher, dass es über anderen Inhalten liegt */
		align-items:flex-start;
		justify-content:flex-start;
		padding-top:1rem;
	}
	
	#hauptmenu li {
    	padding-left:1rem;
		padding-top: 0.5rem;
  	}

  	#hamburger {
    	display: block; /* Hamburger-Symbol anzeigen */
		position:fixed;
		top:2rem;
		z-index:500;
		background:rgba(255,255,255,0.8);
  	}
	
	#notfallbutton {
		margin:0rem;
		align-self:center;
	}
	
	.content_sidebar {
		display:flex;
		flex-direction:column;
		gap:1.5rem;
	}

	.main_content {
		width:100%;
	}

	.sidebar_schmal {
		width:100%;
	}
	
	.sidebar_schmal h2 {
		margin-top:0rem;
	}

	
}/* Hier endet @media screen and (max-width:812px)*/

@media screen and (max-width:660px) {

	.sidebar_schmal h2 {
		padding:0.5rem 1rem;
	}
	
	.flex_container {
		display:flex;
		flex-direction:column;
		gap:none;
		margin-top:none;
	}

	.fbox_3 {
		width:100%;
		display:flex;
		flex-direction:column;
		margin:0;
	}
	
	.fbox_3 h2 {
		padding:0.5rem 1rem;
		margin-top:0rem;
		color:black;
	}
	
	span {
		display:flex;
		flex-direction:column;
	}
	
	.hidden {
	display:none;
	}
	
	.bildergalerie {
		display:flex;
		flex-direction:column;
		gap:none;
		margin-top:none;
	}

	.text_bild_box {
		width:100%;
	}

	.galerie_bild {
		position:relative;
		justify-content:center;
		width:100%
	}

	.galerie_bild img {
		aspect-ratio:16/9;
		object-fit:cover;
		width:100%;
	}

	.bildlegende {
		position:absolute;
		background-color:var(--gruen_transparent);
		bottom:0.25rem;
		width:100%;
		padding:1rem;
		z-index:55;
	}
	
	.portrait_box {
		width: 100%;
		}

	.portrait_bild {
		aspect-ratio:3/4;
		object-fit:cover;
		position:relative;
	}

	.portrait_legende {
		position:absolute;
		background-color:var(--gruen_transparent);
		bottom:0.25rem;
		width:100%;
		padding:1rem;
		z-index:55;
	}
	
	.kontakt {
	flex-direction:column;
	}

	.kontakt p {
		width: 100%;
	}

	.kontakt p:first-child {
		border-right: none;
		border-bottom: 1px solid black;
		margin:1rem 0rem;
		padding:1rem 0rem;
	}
	
}/* Hier endet @media screen and (max-width:660px)*/

@media screen and (max-width:420px) {
	
	header {
		flex-direction:column-reverse;
	}
	
	#hamburger {
		margin:2rem 0rem 1rem 0rem;
	}
	
	#hauptmenu {
		display: none; /* Navigationsliste ausblenden */
		top: 0rem; /* Unterhalb der Navigation */
		left: 0;
		height: 100%;
		width:100%;
		background-color: rgba(255,255,255,0.8); /* Hintergrundfarbe für das Menü */
		z-index: 100; /* Stellen Sie sicher, dass es über anderen Inhalten liegt */
		align-items:center;
		padding:5rem 1rem 1rem 1rem;
		justify-content:flex-start;
	}
	
	#hauptmenu li {
    	padding-left:none;
		margin:0.5rem 0rem;
  	}
	
	#header_rechts {
		flex-direction:column-reverse;
	}
	
} /* Hier endet @media screen and (max-width:420px)*/