/*
CSS STRUCTURE:
- root
- Elements
	- body
	- containers
	- html tags
- Classes
	- utility classes
	- order of first use in html
- IDs
	- order of first use in html
- media queries

https://www.altmann.de/en/blog-en/code-snippet-consent-for-external-content/
*/

:root{
	--clr-white: #FFF;
	--clr-gray: #a2a2a2;
	--clr-black: #333;
	--clr-blue: #00B7C5;
	--clr-pink: #E54C7B;
}

@font-face {
	font-family: "Lato";
	src: url(media/Lato-Regular.ttf) format("truetype");
	font-weight: normal;
}
@font-face {
	font-family: "Lato";
	src: url(media/Lato-Bold.ttf) format("truetype");
	font-weight: bold;
}
@font-face {
	font-family: "Lato";
	src: url(media/Lato-Italic.ttf) format("truetype");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: "Lato";
	src: url(media/Lato-Light.ttf) format("truetype");
	font-weight: lighter;
}

header{
	width: 100vw;
	background-color: var(--clr-secondary);
}

body{
  --clr-bg: var(--clr-white);
  --clr-fg: var(--clr-black);
  --clr-secondary: var(--clr-blue);
  --clr-accent: var(--clr-pink);

  color: var(--clr-fg);
  background-color: var(--clr-bg);
  font-family: Lato, monospace;

	padding: 0;
	border: none;
  margin: -0.25rem;

	overflow-x: hidden;
}

img{
	max-width: 100vw;
}

/*Headline Elements' Styling*/
h1{color: var(--clr-secondary);}
h1, h2, h3, h4, h5, h6{
    font-size: 1.5rem;
    line-height: 1.3;
}

p, ul{
	line-height: 1.6;
}
hr{
	background-color: var(--clr-gray);
	color: var(--clr-gray);
	height: 1px;
	border: none;
	margin: 1rem 0;
}
footer{
	width: 100vw;
	padding: 0.2rem 0;
  text-align: center;
  background-color: var(--clr-gray);
  color: var(--clr-bg);
}
.flex{
	display: flex;
}
.logo-block{
  background-color: var(--clr-secondary);
	display: grid;
	place-items: center;
}
.logo{
	padding: 1rem 0;
	color: var(--clr-bg);
	text-align: center;
}
.slideshow{
	width: 100vw;
	//max-height: 1600px;
	padding: 0;
	margin: 0;
	justify-content: center;
  text-align: center;
	overflow-x: hidden;
}
.slides_index_banner, .slides_generic_banner, .slides_index_content, .slides_generic_content, .slides_angst_content, .slides_angst_banner{
	width: 100%;
}
.mobile-nav-toggle{
	display: none;
}
.nav-bar{
	justify-content: space-around;
}
.primary-navigation a{
	text-decoration: none;
	gap: var(--gap, 1em);
	color: var(--clr-bg);
	text-align: center;
}
.primary-navigation{
	list-style: none;
	gap: var(--gap, 2em);
	padding: 1.25rem;
	margin: 0;
	text-align: center;
	font-size: 1.25em;
}
.primary-navigation a:hover{
	color: var(--clr-black);
	transition: color 200ms;
}
.dropdown{
	display: none;
	margin: 0 -5rem;
	padding: 0;
	padding-top: 0.5em;
	gap: var(--gap, 0.2em);
	flex-direction: column;
}
.nav-item{
	padding: 0.5em;
}
#Kompetenzen:hover .dropdown{
	display: flex;
	position: relative;
}
.wrapper{
	max-width: 80vw;
	padding: 3rem 3rem;
	margin: 0 auto;
  flex-direction: row;
}
.main{
}
.empty-space{
	background-color: var(--clr-gray);
	border: 1px solid var(--clr-gray);
	margin: 0 2rem;
}
.aside{
}
.sidebar ul{
	list-style-image: url(media/000_checkmark-svgrepo-com.svg);
	padding: 0;
	padding-left: 1rem;
}
.slideshow-block{
  background-color: var(--clr-accent);
}
.leistungen{
	columns: 2 190px;
	gap: 1.5eem;
}
.portraits{
	flex-direction: column;
	width: 90%;
	justify-content: center;
}
.portrait{
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: 0;
}
.portrait-img{
	padding: 1rem;
	height: auto;
	max-width: 35%;
	margin: 2rem;
}
/*Custom Text Elements*/
.custom-text--blue{
	color: var(--clr-bg);
	background-color: var(--clr-secondary);
	padding: 15px;
	text-align: center;
}
.custom-text--pink{
	padding: 15px;
	border-style: solid;
	border-color: var(--clr-accent);
  text-align: center;
}
button{
	background-color: var(--clr-bg);
	color: var(--clr-accent);
	padding: 0.5rem 0;
	border: 2px solid var(--clr-accent);
	width: 100%;
	cursor: pointer;
}
button:hover:not(.mobile-nav-toggle){
	background-color: var(--clr-accent);
	color: var(--clr-bg);
	transition: background-color 350ms;
	transition: color 350ms;
}
.mapouter{
	display: block;
	padding: 0;
	margin: 0;
	min-height: 10rem;
  text-align: center;
	//background-color: var(--clr-gray);
	//background-color: red;
}
#gmap_canvas{
	width:100vw;
	min-height:20rem;
	overflow: hidden;
}
#telNr{
	color: var(--clr-accent);
}
#name, #tel, #email, #msg{
	width: 100%;
	font-size: 1.2rem;
}
#submit{
	background-color: var(--clr-accent);
	color: var(--clr-bg);
	padding: 0.5rem 0;
	border: 2px solid var(--clr-accent);
	width: 100%;
	cursor: pointer;
}
#submit:hover{
	background-color: var(--clr-secondary);
	border-color: var(--clr-secondary);
	transition: background-color 350ms;
	transition: border-color 350ms;
}
@media (max-width: 840px){
	.logo{
		transform: scale(65%);
		display: block;
		position: absolute;
		left: 0;
	}
	.logo-block{
		height: 7rem;
	}
	.slideshow{
		display: none;
	}
	.primary-navigation{
		--gap: 1.5em;
		font-size: 1.5rem;

		position: fixed;
		z-index: 1000;
		inset: 0 0 0 30%;
		padding: min(30vh, 10rem) 2em;

		background: var(--clr-accent);

		flex-direction: column;

		transform: translateX(100%);
		transition: transform 300ms ease-out;
	}
	.primary-navigation[data-visible="true"]{
		transform: translateX(0%);
	}
	.dropdown{
		padding: 1em 0 0 0;
		--gap: 1em;
	}
	.mobile-nav-toggle{
		display: block;
		position: absolute;
		z-index: 9999;

		background-color: transparent;
		background-image: url(/media/000_logo-hamburger.svg);
		background-repeat: no-repeat;
		width: 3rem;
		aspect-ratio: 1;
		top: 2rem;
		right: 2rem;
		border: none;
	}
}
@media (max-width: 1100px){
	.wrapper{
		flex-direction: column;
	}
	.empty-space{
		display: none;
	}
}