:root {
    --Hauptfarbe: #00486C; /* blau */
    --Zweitfarbe: #CE3C97; /* pink */
} 

/* Allgemeines und HTML-Tags direkt */
body, ul, li, a {
    font-family: 'Montserrat', 'Calibri', Arial, 'sans serif', Courier, monospace;	
}
h1, h2, h3,h4, h5 {	  
	color:var(--Hauptfarbe);
	font-family: 'MontserratBold', 'Montserrat', 'Calibri', Arial, 'sans serif', Courier, monospace;	
}


body {
    padding: 0px;
    margin: 0px;
    position: relative;
	background-color: white;
	/*background-image: url('img/Hintergrund.png');
	background-repeat: no-repeat;
	background-size: cover; */
	/*margin-bottom: 4.3cm;*/
	justify-content: center; 
}

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

h1{
	right: 0;
    text-align: center;
    font-size: 45px;
    min-height: 80px;
	height: auto; /*Important on mobile if a headline becomes multiline */
    margin-top: 2cm;
	line-height: 120%;  /* when it gets broken into multiple lines on mobile */
}

h2{
	text-align: center;
	font-size: 30px;
	margin-top: 20px;
}

h2.mediumCaption {
	text-align:left;
	font-weight:normal;
	font-size:30px;
	margin-top:34px;
	margin-bottom:27px;
	line-height: 40px;
}

h5 {               
    min-height: 15px;   
	height: auto;
    width: 60px;
    white-space: nowrap;            
}

header{
    display: sticky;
    top: 15px;
    justify-content: space-between;
    align-items: center;
    padding: 18px 10%;
	/* border-bottom: 5px solid var(--Zweitfarbe);*/
}

/* Flexboxen - allgemeine Skalierung */
.flex { 
    width: auto;
    height: auto;
    /* background-color: var(--Hauptfarbe);*/
    padding: 2,5em;
    padding: 2,5em;
	display: flex; 
	justify-content: center; 
	align-items: center;
}
.flexSeasonalSticker { 
	flex-wrap: wrap; 
	text-align: center;
	font-weight: bold;
	font-size: 22px;
	margin-left: 300px;
	margin-top:10px;
}
.bannerNoImage{
	 background-color: var(--Hauptfarbe);
}
.bannerImage{
	background-image: url('/img/Allgemein/Header_Banner.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}
.bannerTitel{
	background-image: url('/img/Allgemein/Regentropfen_Banner.png');
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 220px;
	/* no, will set opacity for title text as well and cant be overwritten */
	/* opacity: 0.5;*/
}

td.tdLeftCol{
	min-width: 75px;
}
.bannerTitel H2, .bannerTitel H1{
	margin-top: 80px;
}

/*standard boxen und pinke Boxen*/
.box { 
  width: auto;
  color: white;
  background-color: var(--Zweitfarbe);
  border-radius: 0em 0em 0em 0em;
  margin:  10px auto;
  padding: 0.3em;
}
.boxPink, .boxPinkTilted { /* zentriert */

	font-weight:bold;
	font-size:20px;
	line-height:25px;
	background-color:transparent;
	margin:30px auto;
	padding:12px;
	border:2px solid var(--Zweitfarbe);
	color:	var(--Zweitfarbe);
}

.boxPinkTilted {
	max-width:300px;
	margin-right:30px;
	margin-top:15px;
	transform:rotate(-10deg);
	/* for real boldness */
	font-family: 'MontserratBold', 'Montserrat', 'Calibri', Arial, 'sans serif', Courier, monospace;
}

		
/* Footer Hintergrundfarbe */

.div-footer { 
    width: auto;
    color: white;
    background-color: rgb(172, 170, 167);
    margin-top: 88px; /*abstand der Div (grau) nach oben zum Text */
    padding: 2em;
    display: bottom;
  }

/* Navigation oben und im Footer */

.nav_links li, .nav_links a, .nav_links button, .nav_links_footer li, .nav_links_footer a, .nav_links_footer button{ /* weiße schrift darf nur navigation betreffen */
    color:white;
    font-weight: 500;
    font-size: 19px;
    text-decoration: none;
	letter-spacing: 1px;
	border: solid;
    border-color: transparent; /*transparente border damit sich der Text beim drüberfahren nicht verschiebt */
}
.nav_links{
    position: sticky;
    top: 15px;
    width: auto; 
    font-size: 20px;
    text-transform: uppercase;
    display: flex; 
    justify-content: center; 
    padding-left: 255px, auto;
    padding-right:255px, auto ;  
	flex-wrap: wrap;
}
.nav_links ul{
	list-style: none;
	display: flex;
	align-items: center; /* this makes the navlinks vertical center next to the logo */
}
.nav_links li {
    display: flex; /*inline-block;*/
    padding: 0px 5px; 
    width: auto;
	height: 39px;
}
.nav_links li a, .nav_links_footer li a{
    transition: all 0.3s ease 0s;
    width: auto;
	padding: 3px;
}
.nav_links li a:hover{
    animation: reverse;
    border: solid;
    border-color: white;
}
.nav_links_footer{ 
    display: flex;  
    margin-left: 40%;
    margin-right:40%;
    width: auto;
    font-size: 20px;
    text-transform: uppercase;
    justify-content: center; 
} 
.nav_links_footer li {
    display: inline-block;
    padding: 0px 20px;     
    justify-content: center; 
}

.nav_links_footer li a:hover{
    border: solid;
    border-color: white;
}

/* Inhalt  */
.Content{
    text-align: left;
	min-height: 400px;
	max-width: 1000px;
	/* links und rechts Abstand auto = zentriert */
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	line-height: 150%;
	font-size: 20px;
}
.textBlau{
    color:var(--Hauptfarbe);	
}

.textPink{
    color:var(--Zweitfarbe);	
}
.textFett{
    font-size: 20px;
	font-weight: bold;
}

.textSmalInfo{
    font-size: 17px;
	font-weight: normal;
	color: #333333;
	font-stype: italic;
}

.flexTextBox{
    /*margin-top: 20px; */
	 margin-right: 20px;
    /* margin-left: 200px; */
    justify-content: center; 
    
}

ul.ulIndent{
	padding-left: 20px;
}

/* Flexboxen - kleine Boxen mit Rahmen */
.bulletpointsVertikal, .bulletpointsHorizontal{
	display: flex;
	flex-wrap: wrap; /* in nächste Zeile wenn nicht in eine Zeile passt */
    text-align: left;
    position: relative;
    justify-content: center; 
    /*margin: 20px; */ /* would override centering via margin-left: auto; */
    /* margin-top: 20px;  now set in .content instead */
}
.bulletpointsVertikal{
	flex-direction: column;
}
.bulletpointsHorizontal{
	flex-direction: row;
}
.bulletpointsHorizontal p, .bulletpointsVertikal p, {
	padding: 5px;
}
.bildRahmen{ /* box mit bild und text darunter */
	min-width: 200px;
	max-width: 600px;
	min-height: 200px;
	text-align: center;
	margin: 15px;
	padding: 5px;
	line-height: 150%;
}
.bildContainer{ /* box für bild dass unterschiedl. große bilder gleiches padding haben */
	height: auto;
	max-height: 200px;
	width: 300px;
}
.bildRahmenLinks { /* box mit bild links und text rechts */
	/* min-width: 200px;
	max-width: 600px;
	min-height: 200px; */
	text-align: left;
	margin: 15px;
	padding: 5px;
	display: flex; /* inline-flex would put different boxes next to each other if space is available even though we want them online beneath each other*/
}

.bildRahmenLinks .bildContainer{
	height: auto;
	max-height: 300px;
	min-width: 300px; /* somehow choosing min-width instead of width makes the column the same size even if there is no image present, whereas fixed width doesnt work */
	margin: 8px 50px 0px 0px;
}

.bilderAngebote{
	min-width:880px;
}
.bildRahmenLinks .bildContainer img{
	max-width: 300px;
	max-height: 250px;
}
.bildRahmen h3{
	text-align: center;
}
img.bildPlakat {
	width:400px;
	margin: 5px 20px 5px 5px;
}	
img.partnerLogo {
	max-width:300px;
	max-height:60px;
	margin:20px 0px;
}

img.mediumImage{
	height: 250px;
}

/* mobile settings */
@media only screen and (max-width: 1000px) {
	.nav_links, .nav_links_footer{
		display: block; /* instead of flex, all menu points vertically stacked, none of them next to each other */
		margin-left: 0px;
	}
	.bildRahmenLinks, .bildRahmen , .bildRahmenLinks .bildContainer{
		flex-wrap: wrap;
		margin: 5px 0px;
		margin-right: 0px;
	}
	/*.bildRahmenLinks .bildContainer{
		margin: 5px 0px 0px 0px;
	} */
	.Content{
		padding: 0px 5px; /* small padding left and right everywhere */
	}
	.bulletpointsHorizontal{
		display: block;
	}
	.bilderAngebote, img.bildPlakat{
		min-width: 0px; /*re-moving wide pc min-width */
		/* width: auto; */ /* big nope, makes max width */
		width: auto;
		max-width: 350px;
		margin: auto; /* für gleiche Abstände links und rechts */
		object-fit: contain; /* doesnt work well enough with padding & margin, image will be too big */
		
	}

	.bilderAngebote > a{ /* removing links on mobile because they're just direct image links */
		pointer-events: none;
		cursor: default;
	}	
	img.mediumImage{
		max-height: none;
		max-width: 350px;
		object-fit: contain;		
	}
	.bildRahmenLinks  img, .bildRahmenLinks .bildContainer img{ /* merge with above doesnt work */
		max-width: 350px;
	}
	
	h1{
		font-size: 30px; /* headline words too long for page otherwise */
	}
	h2, h2.mediumCaption{
		font-size: 27px; /* headline words too long for page otherwise */
	}
	.flexSeasonalSticker { 
		margin: 0px;
	}
}