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

/*google fonts*/

@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*CSS Variablen */
        :root {
            /*Farbdefinitionen gesamte Website*/
            --milchglas:rgba(255,255,255,0.60);
            --rauchglas:rgba(0,0,0,0.6);
            --rauch:rgba(60,60,60,1.00);
			--link:rgba(33,33,33,1.00);
			--weiss:rgba(255,255,255,1.0);
			--schwarz:rgba(0,0,0,1.0);
			--grau:rgba(0,0,0,0.1);
			
			/*Gestaltungselemente*/
            --abrunden:0.5rem;
            
            --transition_in:all ease-in-out 0.3s;
            --transition_out:all ease-in-out 0.5s;
        }

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

/*allgemeine HTML-Elemente*/

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

html, body {
            scroll-behavior: smooth;
        }

img {
	width:100%;
}



/* ======== Navigation ======== */

nav {
	font-family: "Baskervville", "serif";
	text-align: center;
	justify-content:inline;
    flex-wrap:wrap;
	flex-direction:row;
	margin-bottom:1rem;
}

.aktiv {
	font-style:italic;
} 

#hauptmenu {
	list-style-type:none;
	display:flex;
	flex-wrap:wrap;
	max-width:500px;
	margin:0 auto;
}

#hauptmenu li {
	margin:0 auto;
}

#hauptmenu li a {
	padding: 0rem 0.5rem 0rem 0.5rem;
}
#hauptmenu li a:link {
    color:var(--schwarz);
    text-decoration:none;
}
#hauptmenu li a:visited {
	color:var(--schwarz);
}

#hauptmenu li a:hover {
    color:var(--link);
	text-decoration:underline;
}

.submenu {
	display:block;
	height:0;
	overflow:hidden;
	padding-bottom: 0;
	margin-top:0.5rem;
	list-style-type:none;
	text-align:center;
	transition: height 0.5s ease-in-out;
}

.submenu.show {
	max-height:500px;
	transition: height 0.3s ease-in-out;
}

.submenu li {
	display:block;
	margin:0 auto;
	padding:0;
}

.submenu li a {
	font-size:.9rem
}


/* Hamburger-Menu für die mobile Version */
        
#hamburger {
	padding:0.25rem;
	display:none; /* Hamburger in der Desktop-Version verstecken */
	margin:0 auto; /* damit der Hamburger zentriert über dem Menü steht */
}

#hamburger_symbol {
	width:3rem;
	margin:0 auto;
}

.nav_open {
	left:0rem;
	transition:all ease-in-out 0.5s;
	display:flex !important; /* Klasse ist offenbar stärker als ID, deshalb übersteuern */
}


/* ======== Links ======== */

a:link {
    color:var(--schwarz);
	transition:var(--transition_out);
}
a:visited {
	color:var(--link);
}
a:hover {
    color:var(--link);
	text-decoration:underline;
	transition:var(--transition_in);
}


/* ======== Haupt-Container ======== */

#container {
	max-width:50rem;
	margin:auto;
	text-align:left;
	aspect-ratio:auto;
	padding: 1rem 1rem 1rem 1rem;
}


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

h1, h2, h3 {
	font-family: "Baskervville", "serif";
	font-weight: 400;
}

h1 {
	padding-top:1rem;
	padding-bottom: 0.5rem;
}

h2 {
	padding-top:1rem;
	padding-bottom: 0.5rem;
}

h3 {
	padding-top: .75rem;
	padding-bottom: 0.25rem;
}

p {
	line-height:1.35rem;
}

.zitat {
	font-style: italic;
	padding-bottom:0.5rem;
}

/* Fluide Typografie */

.typo_fluid_zitat {
	font-size:clamp(1rem,4vw,2.5rem);
}


/* ======== Design-Elemente ======== */

hr {
	margin:1rem 0rem 1rem 0rem;
}

/* ======== Listen ======== */

li {
	margin-left: 1rem;
	padding-bottom:0.25rem;
}

/* ======== Header ======== */
.img_zentriert {
	display:block;
	margin:0 auto;
}

#logo_animation {
	width:9rem;
	padding: 0.5rem 0rem 0.5rem 0rem;
}

.wit_logo {
	fill: #1d1d1b;
}

.wit_rahmen_1 {
	fill: none;
	stroke: var(--schwarz);
	stroke-miterlimit: 10;

	stroke-dasharray:122.59999084472656; /* Länge vom Pfad */
	stroke-dashoffset:122.59999084472656; 
	animation:wachse_1 3s linear forwards;
}

	@keyframes wachse_1 {
		to {
			stroke-dashoffset:0;
		}
}

.wit_rahmen_2 {
	fill: none;
	stroke: var(--schwarz);
	stroke-miterlimit: 10;

	stroke-dasharray:299.20001220703125; /* Länge vom Pfad */
	stroke-dashoffset:299.20001220703125; 
	animation:wachse_2 3s linear forwards;
}

	@keyframes wachse_2 {
		to {
			stroke-dashoffset:0;
		}
}

/* ======== Footer ======== */

.umbruch {
	display:none;
}

/* ======== Hero-Section ======== */

.hero {
	margin-top:2rem;
	position:relative;
}

.hero img {
	object-fit:cover;
}

.hero_zitat {
	position:absolute;
	width:50%;
	top:3rem;
	right:1.5rem;
}

.hero h2 {
	color:var(--weiss);
	padding:0.75rem;
	padding-right:0.5rem;
}

/* ======== Bild-Textboxen ======== */

.bild_textbox {
	border:none;
	position:relative;
}

.bild_textbox_schmal_links {
	position:relative;
}

.bild_textbox_schmal_rechts {
	border:none;
	position:relative;
}

.bild_textbox_breit {
	position:relative;
}

/*Textelemente in Bild-Textboxen*/
.textbox_rechts {
	border: none;
	background-color: var(--rauchglas);
	color:var(--weiss);
	width:66%;
	padding:2rem;
	position:absolute;
	top:3rem;
	right:0rem;
	border-radius:var(--abrunden);
}

.textbox_links {
	border: none;
	background-color: var(--rauchglas);
	color:var(--weiss);
	width:66%;
	padding:2rem;
	border-radius:var(--abrunden);
	position:absolute;
	top:3rem;
	left:0rem;
}

.textbox_zentriert {
	color:var(--weiss);
	background-color: var(--rauchglas);
	padding:1rem;
	margin:0rem 1rem;
	position:absolute;
	top:1rem;
	border-radius:var(--abrunden);
}

.referenzen_webdesign {
	position:relative;
}

.referenzen_webdesign .textbox_rechts {
	margin-top:-2rem;
}

/*Bildelemente in Bild-Textboxen*/
.img_halbseitig_links {
	width:50%;
	padding:1rem 1rem 1rem 0rem;
}

.img_schmal_links {
	width:50%;
	height: 19rem;
	padding:1rem 1rem 1rem 0rem;
	object-fit:cover;
	object-position:center;
}

.referenzen_webdesign .img_schmal_links {
	object-position: left !important;
	margin-top:-2rem;
}

.img_schmal_rechts {
	width:50%;
	height: 19rem;
	padding:1rem 0rem 1rem 1rem;
	object-fit:cover;
	object-position:center;
	margin-left:50%;
}

/* Spezielle Titel in Bild-Textboxen */
.textbox_rechts h1 {
	padding-top:0rem;
}

.textbox_rechts h2 {
	padding-top:0rem;
}

.textbox_links h2 {
	padding-top:0rem;
}

/* ======== Flexboxen ======== */

.flex_container {
    display: flex;
    flex-direction: row;
	gap:1rem;
	margin-bottom:2rem;
   }

.fbox2 {
	width:50%;
	padding:0rem 2rem 1rem 2rem;
}

.fbox2:first-child {
	padding-left:2rem;
}

.fbox3 { 
	border: none;
	width:33%;
}

.fbox3 h2 {
	padding-top:0.5rem;
}

.img_fbox {
	width:100%;
}

.img_fbox_schmal {
	width:100%;
	height:10rem;
	background-color: var(--rauchglas);
	object-fit:contain;
	object-position:center;
}

/* ======== Kontakt-Box ======== */

.bild_breit {
	width:100%;
	height:auto;
	aspect-ratio:16/5.5;
	object-fit:cover;
	object-position:bottom;
}

.kontakt_box {
	position:relative;
}

.linientitel {
	border:none;
	background-color:var(--weiss);
	padding: 1rem;
	position:absolute;
	top:0.25rem;
	left:3rem;
}

.zentriert {
	text-align:center;
}

/* ======== Buttons ======== */

.button_container {
	color:var(--weiss) !important;
	text-decoration:none;
	font-family: "baskervville", "serif";
	text-align:center;
	display:block;
	margin: 0 auto;
	margin-top: 1rem;
	padding: 0.5rem 0rem .5rem 0rem;
	background-color:var(--rauch);
	border-radius:var(--abrunden);
	width: 20rem;
}
.button_container:hover {
	text-decoration:underline;
}

.textbox_rechts .button_container {
	margin-bottom: -1rem;
}

.textbox_links .button_container {
	margin-bottom: -1rem;
}

/* ======== Bildergalerie ======== */

.bildergalerie {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	max-width:100%;
	margin: 0 auto;
}

.bildcontainer {
	with:33.33333333333%;
	overflow:hidden;
	position:relative;
	height:15rem;
	margin:0.25rem;
}

.bildcontainer img {
	width:100%;
	height:100%;
	object-fit:cover;
	aspect-ratio:1/1;
}

.bildlegende {
	color:var(--weiss);
	font-weight:300;
	width:100%;
	height:100%;
	background-color:var(--rauchglas);
	position:absolute;
	top: 0rem;
	left: 0rem;
	text-align:center;
	display: flex;
    justify-content:center;
    align-items: center;
	transition:var(--transition_out);
}

.bildcontainer:hover .bildlegende {
	opacity:0;
	transition:var(--transition_in);
}

.legende_galerie {
	color:var(--weiss);
	font-weight:500;
}

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

#formcontainer {
	padding: 1rem;
	margin:0rem 2rem 2rem 2rem;
	/*background-color:var(--rauchglas);
	border:1px solid var(--rauchglas);
	border-radius:var(--abrunden);*/
}

#danke {
	padding: 2rem;
	margin:3rem 2rem;
	background:var(--grau);
	border-radius:var(--abrunden);
}

#danke .flex_container {
	gap:none !important;
}

#danke h1 {
	margin-top:-1rem;
}

#danke .fbox2 {
	padding:0rem 1rem 1rem 1rem;
}

input, select, textarea {
	border:none;
	background-color:var(--grau);
	padding:0.5rem;
	font-size:1rem;
	font-family: "Roboto", "sans-serif";
	font-weight:200;
	margin:0.25rem 2rem;
	width:90%;
	border-radius:var(--abrunden);
}

input[type=radio]{
	width:2rem;
	padding:0.25rem 0.25rem 0.25rem 0rem;
	margin:1rem 0.25rem 0.75rem 2rem;
}

textarea {
	height:10rem;
}

input[type=submit]{
	background-color:var(--rauchglas);
	color:var(--weiss);
	font-family:"Baskervville", "serif";
	width:50%;
	display:block;
	margin:auto;
}

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

.anrede {
	color:var(--schwarz);
}


::placeholder {
	color:var(--link);
	font-weight:200;
	opacity:1; /*Firefox*/
}


/************** Breakpoint für Responsive-Design in verschiedenen Breiten ************/

/* ======== Bildschirmbreite unter 45rem ======== */

@media screen and (max-width:45rem) {
	
	.hero_zitat {
		width:50%;
		top:2rem;
		right:2rem;
	}
	
	.img_halbseitig_links {
		width:100%;
		margin:1rem 0 0 0;
		padding:0rem;
	}
	
	.img_schmal_rechts {
		width:100%;
		margin:1rem 0 0 0;
		padding:0rem;
	}
	
	.img_schmal_links {
		width:100%;
		margin:1rem 0 0 0;
		padding:0rem;
	}

	.bild_textbox {
		align-content:center;
	}
	
	.textbox_rechts {
		border: none;
		background-color: var(--rauchglas);
		color:var(--weiss);
		width:100%;
		padding:2rem;
		border-radius:var(--abrunden);
	}
	
	.textbox_links {
		border: none;
		background-color: var(--rauchglas);
		color:var(--weiss);
		width:100%;
		padding:2rem;
		border-radius:var(--abrunden);
	}
	
	.referenzen_webdesign .textbox_rechts {
		position:static;
		background-color:var(--weiss);
		color:var(--schwarz);
		margin-top:-1rem;
	}
	
	.referenzen_webdesign .img_schmal_links {
		margin-top:0rem;
	}
} /*hier enden die Spezifikationen für Browser-Fenster mit weniger als 45rem Breite*/


/* ======== Bildschirmbreite unter 500px ======== */

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

	
	span {
		display:flex;
		flex-direction:column;
	}
	
	/* mobile Navigation mit Hamburger */
	nav {
		margin:0 auto;
	}
	
	#hauptmenu {
		display:none;
		flex-direction:column;
	}

	#hauptmenu li {
		position:inherit;
	}
	
	.submenu {
		display:block;
		height:auto;
		background:none;
		position:inherit;
		padding: 0rem 0rem 0.25rem 0rem;
	}

	
	.submenu li {
		background:none;
		display:block;
		flex-direction:column;
		margin:0 auto;
	}
	
	.submenu li:first-child {
		padding-top:0.15rem;
	}
	
	.submenu li:last-child {
		padding-bottom:0.2rem;
	}

	
	.hidden {
		display:none;
	}
	
	.umbruch {
		display:inherit;
	}
	
	#hamburger {
		display:flex;
	}

	/* Hero-Section */

	.hero_zitat {
		position:absolute;
		width:60%;
		top:0.75rem;
		right:0rem;
	}

	/*Flex-Container*/
	.flex_container {
		flex-direction: column;
   	}
	
	.fbox2 { 
		width:100%;
	}
	
	.fbox3 { 
		width:100%;
	}
	
	.img_fbox {
		height:10rem;
		object-fit:cover;
		object-position:center;
	}
	
	.button_container {
		width:15rem;
	}
	
	/* Formular */
	#formcontainer {
	padding: none;
	margin: 1rem 0rem 1rem 0rem;
	}
	
	input, select, textarea {
	border:none;
	padding:none;
	font-size:1rem;
	font-family: "Roboto", "sans-serif";
	font-weight:200;
	margin:0.25rem;
	width:100%;
	border-radius:var(--abrunden);
	}

	input[type=radio]{
	width:2rem;
	padding:0.25rem 0.25rem 0.25rem 0rem;
	margin:1rem 0.25rem 0.5rem 0rem;
	flex-direction:column;
	}
	
	/*Bildergalerie*/

	.bildcontainer img {
		width:100%;
		height:100%;
		object-fit:cover;
		aspect-ratio:2/1;
	}
	
	.textbox_zentriert {
	color:var(--schwarz);
	background-color:var(--weiss);
	padding:0rem 0rem 1rem 0rem;
	margin:0rem;
	position:inherit;
	}
	
	.referenzen_webdesign .img_schmal_links {
	object-position: center;
	height:100%;
}

} /*hier enden die Spezifikationen für Bildschirme mit weniger als 500px Breite*/

/* ======== Bildschirmbreite unter 430px ======== */

@media screen and (max-width:430px) {
	
	.img_halbseitig_links {
	width:100%;
	padding:0rem;
	height:10rem;
	object-fit:cover;
	object-position:center;
	}
	
	.bild_textbox .textbox_rechts {
	background-color:var(--weiss);
	color:var(--schwarz);
	position:inherit;
	top:0rem;
	padding:0.5rem 0rem 1rem 0rem;
	}
	
	.bild_textbox_breit .textbox_zentriert {
	background-color:var(--weiss);
	color:var(--schwarz);
	position:inherit;
	top:0rem;
	padding:0.5rem 0rem 1rem 0rem;	
	}
} /*Hier enden die Spezifikationen für Bildschirme mit weniger als 430px Breite*/


/* ======== Bildschirmbreite unter 380px ======== */

@media screen and (max-width:380px) {
	
	.abstand {
		margin:1rem;
	}
	
}

/*Hier enden die Spezifikationen für Bildschirme mit weniger als 430px Breite*/