@charset "iso-8859-1";
@import url('https://fonts.googleapis.com/css2?family=Carattere&display=swap');
/*************************************************************************************************************************************************************************************************
copyright Vifu Webdesign & Grafik, Leimen; erstellt Dezember 2021
*************************************************************************************************************************************************************************************************/
/* @media (min-width: 576px) {} /* Handy alt quer */ 
/* @media (min-width: 768px) and (orientation:portrait) {} /* Tablet hoch */ 
/* @media (min-width: 768px) {} /* Handy neu quer */
/* @media (min-width: 992px) { } /* kleine Bildschirme */
/* @media (min-width: 1200px) {} /* Tablet quer / Laptop */
/* @media (min-width: 1600px) {} /* mega screens such as iMac's, 27" PC monitors */

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*
************** ALLGEMEINE SEITENSTILE **************
*/ 
body { margin: 0; background-color: #ffe2c0; }
strong { font-weight: 500; color: #ae5163; }
#box { background-color: #fff; -webkit-box-shadow: 5px 5px 5px 0px #979797; box-shadow: 5px 5px 5px 0px #979797; -moz-box-shadow: 5px 5px 5px 0px #979797; padding: 15px; width: 82%; float: left; height: auto; margin-right: 5%; margin-left: 5%; }
#box-popup { background-color: #fff; -webkit-box-shadow: 5px 5px 5px 0px #979797; box-shadow: 5px 5px 5px 0px #979797; -moz-box-shadow: 5px 5px 5px 0px #979797; padding: 15px; width: 80%; margin-right: 10%; margin-left: 10%; display: block; float: left; }
header, main, footer { display: block; width: 100%; float: left; }
header { text-align: center; }
header .h-box-left { width: 100%; float: left; text-align: center; display: block; }
header .h-box-left img { height: auto; height: 175px; /* je nach dem */ width: 175px; /* je nach dem */ width: auto; border: 0px none #000; vertical-align: middle; }
header .h-box-right { width: 100%; float: left; height: 175px; align-items: center; justify-content: center; display: flex; }
header h1 { font-family: 'Carattere', cursive; font-size: 3rem; font-style: normal; font-weight: 500; font-variant: normal; color: #ae5163; letter-spacing: 2px; line-height: 0.5rem; }
header h2 { font-family: Verdana, sans-serif; font-size: 1rem; font-style: normal; font-weight: 400; font-variant: normal; color: #333; line-height: 0.5rem; }
main { font-family: Verdana, sans-serif; font-size: 1rem; line-height: 1.75rem; font-weight: 400; color: #333; font-style: normal; font-variant: normal; margin: 0px; padding-top: 1rem; padding-bottom: 3rem; }
main a { font-family: Verdana, sans-serif; font-size: 1rem; line-height: 1.75rem; font-weight: 400; color: #ae5163; font-style: normal; font-variant: normal; text-decoration: none; }
main a:hover { color: #333; }
main h1 { font-family: Verdana, sans-serif; font-size: 1.5rem; font-style: normal; font-weight: 700; font-variant: normal; color: #ae5163; line-height: 0.5rem; margin-bottom: 1rem; }
main h2 { font-family: Verdana, sans-serif; font-size: 1.25rem; font-style: normal; font-weight: 300; font-variant: normal; color: #333; line-height: 0.5rem; }
main h3 { font-family: Verdana, sans-serif; font-size: 1rem; font-style: normal; font-weight: 300; font-variant: normal; color: #333; line-height: 0.5rem; }
footer .container { display: block; padding: 0px; float: left; height: auto; width: 100%; border: 0px none #000; margin-bottom: 2rem; }
footer .f-box-left { width: 100%; float: left; text-align: center; display: block; margin-bottom: 1rem; }
footer .f-box-left img { height: auto; height: 175px; /* je nach dem */ width: 175px; /* je nach dem */ width: auto; border: 1px solid #CCC; padding: 3px; }
footer .f-box-right { width: 100%; float: left; text-align: center; font-family: Verdana, sans-serif; font-size: 1rem; font-style: normal; line-height: 1.75rem; font-weight: 400; font-variant: normal; color: #000; }
footer .f-box-right a { font-family: Verdana, sans-serif; font-size: 1rem; font-style: normal; line-height: 1.75rem; font-weight: 400; font-variant: normal; color: #000; text-decoration: none; }
footer .f-box-right a:hover { font-family: Verdana, sans-serif; font-size: 1rem; font-style: normal; line-height: 1.75rem; font-weight: 400; font-variant: normal; color: #ae5163; text-decoration: none; }
footer .f-box-bottom { width: 100%; float: left; text-align: center; font-family: Verdana, sans-serif; font-size: 0.75rem; font-style: normal; line-height: 1.5rem; font-weight: 400; font-variant: normal; color: #000; }
footer .f-box-bottom a { font-family: Verdana, sans-serif; font-size: 0.75rem; font-style: normal; line-height: 1.5rem; font-weight: 400; font-variant: normal; color: #000; text-decoration: none; }
footer .f-box-bottom a:hover { font-family: Verdana, sans-serif; font-size: 0.75rem; font-style: normal; line-height: 1.5rem; font-weight: 400; font-variant: normal; color: #ae5163; text-decoration: none; }

@media (min-width: 768px) and (orientation:portrait) {} /* Tablet hoch */ 
@media (min-width: 576px) { 
	
} /* Handy alt quer */ 
@media (min-width: 768px) {
	footer .f-box-left { max-width: 40%; text-align: left; width: auto;  margin-right: 1.5rem; margin-bottom: auto; }
	footer .f-box-left img { height: auto; max-height: 200px; /* je nach dem */ max-width: 200px; /* je nach dem */ width: auto; }
	footer .f-box-right { max-width: 60%; float: right; text-align: left; width: auto; }
} /* Handy neu quer */
@media (min-width: 992px) {
	
	#box-popup { background-color: #fff; -webkit-box-shadow: 5px 5px 5px 0px #979797; box-shadow: 5px 5px 5px 0px #979797; -moz-box-shadow: 5px 5px 5px 0px #979797; width: 80%; margin-right: 10%; margin-left: 10%; }
	header h1 { font-size: 4rem; font-weight: 700; }
	header h2 { font-size: 1rem; font-weight: 300; }
	header .h-box-left { width: 35%; }
	header .h-box-left img { height: auto; height: 175px; /* je nach dem */ width: 175px; /* je nach dem */ width: auto; border: 0px none #000; vertical-align: middle; }
	header .h-box-right { width: 65%; float: right; height: 175px; align-items: center; justify-content: center; display: flex; }
	main { padding-top: 3rem; padding-bottom: 3rem; }
	footer .f-box-left { max-width: 35%; text-align: left; width: auto;  margin-right: 1.5rem; margin-bottom: auto; }
	footer .f-box-left img { height: auto; max-height: 175px; /* je nach dem */ max-width: 175px; /* je nach dem */ width: auto; }
	footer .f-box-right { max-width: 65%; float: left; text-align: left; width: auto; }
	
} /* kleine Bildschirme */
@media (min-width: 1200px) {
	
} /* Tablet quer / Laptop */