:root{
	--body-background: #faf9f8;
	--header-footer: #ffffcc;
	--link: #00248f;
	--box-shadow: #f0f0f0;
	--button-blue: #3498db;
	--black: #36383f;
	--white: #ffffff;
	--blue: #0000ff;
	--green: #00ff00;

	--bright-gray: #ededed;

	--medium-gray: #dddddd;

	--dark-gray: #9c9c9c;
	--dark-red: #800000;
	--dark-blue: #0000ff;
	--dark-green: #008800;

	--gray94: #f0f0f0;
}

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

body, html {font: Helvetica, Verdana, serif; hyphens: auto; background-color: var(--body-background); scroll-behavior: smooth;}

h1, h2, h3, h4 {color: var(--dark-red); padding-bottom: 10px;}
h1 {text-align: center;}
h2, h3, h4 {text-align: left;}

p {font-size: 18px; line-height: 1.4em; padding-bottom: 18px;}
ul {font-size: 18px; padding-bottom: 18px;}
ul {padding-left: 50px;}

a {text-decoration: none; color: var(--link); font-weight: bold;}
a:hover {color: var(--dark-red);}

hr {border: 1px solid var(--dark-red);}
.dotted {border: 1px dotted var(--dark-red);}

.top-logo img {height: 90px; padding: 10px 0 5px 35px;}

.header {background-color: var(--header-footer); box-shadow: 1px 1px 1px 4px var(--box-shadow); width: 100%; z-index: -1; border-bottom: 2px solid var(--dark-red);}
.header ul {margin: 0; padding: 0; list-style: none; overflow: hidden;}
.header ul a {display: block; padding: 10px; text-decoration: none; font-size: 19px; color: var(--link);}
.header ul a:hover {background-color: var(--medium-gray); color: var(--dark-red);}
.header a.active {height: 50px; background-color: var(--bright-gray); color: var(--black);}
.header ul li {min-width: 140px; text-align: center;}

.header .menu {clear: both; max-height: 0; transition: max-height .5s ease-out;}
.header .menu-icon {margin: 5px 5px 0 0; padding: 37px 20px; position: relative; float: right; cursor: pointer; border: 3px solid var(--dark-gray); border-radius: 10px;}
.header .menu-icon:hover {background-color: var(--bright-gray);}
.header .menu-icon .nav-icon {background: var(--black); display: block; height: 2px; width: 30px; position: relative; transition: background .2s ease-out;}
.header .menu-icon .nav-icon:before {background: var(--black); content: ""; display: block; height: 100%; width: 100%; position: absolute; transition: all .2s ease-out; top: 5px;}
.header .menu-icon .nav-icon:after {background: var(--black); content: ""; display: block; height: 100%; width: 100%; position: absolute; transition: all .2s ease-out; top: -5px;}
.header .menu-btn {display: none;}

.header .menu-btn:checked ~ .menu {max-height: 340px;}
.header .menu-btn:checked ~ .menu-icon .nav-icon {background: transparent;}
.header .menu-btn:checked ~ .menu-icon .nav-icon:before {transform:rotate(-45deg); top: 0;}
.header .menu-btn:checked ~ .menu-icon .nav-icon:after {transform:rotate(45deg); top: 0;}

.back-to-top {position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background-color: #5dd39e; border-radius: 50%; font-size: 12px; display: flex; align-items: center;
	justify-content: center; color: #000000; z-index: 1000; animation: bounce 1.5s infinite;
	}
@keyframes bounce {0%, 100% { transform: translateY(0);} 50% { transform: translateY(-10px);}}

.main {max-width: 90%; margin-left: auto; margin-right: auto;}

.container {display: flex; flex-wrap: wrap;}
.containerbild {min-width: 50%; max-width: 75%; height: auto; display: block; margin: 0 auto;}
.one, .two, .three, .four {flex: 100%; margin: 1% 1%; padding: 1% 1%;}
.two_not_visible, .three_not_visible, .four_not_visible {opacity: 0;}

.laenderwappen, .stadtflaggen {max-height: 150px; text-align: center;}
.containerbild, .stadtflaggen {box-shadow: 10px 10px 10px grey; margin-bottom: 25px;}

.fcc {max-width: 150px;}
.stoll {max-width: 300px;}
.schupp {max-width: 250px;}

.center {text-align: center;}

form {border: 1px solid black; max-width: 1000px; background-color: whitesmoke; margin: 25px auto; padding: 1em;}
form label {display: block; font-size: 0.8em; color: darkslategrey; padding-left: 3px;}
input, textarea {width: 100%; font-size: 1.1em; padding: 4px; font-family: inherit; font-weight: lighter; border:1px solid gray; outline: none; border-radius: 0.3em;}
input:focus, textarea:focus {border:1px solid var(--dark-green);}
input[type=submit] {width: 300px; background-color: var(--button-blue); border: none; color: var(--white); padding: 1.5% 1.5%; text-align: center; text-decoration: none;
	display: inline-block; font-size: 22px; margin: 4px 2px; cursor: pointer; border-radius: 10px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); font-weight: bold;}
input[type=submit]:hover {background-color: var(--dark-green); box-shadow: 2px 2px 2px grey;}

.form-row {display: flex; gap: 20px;}
.form-group {flex: 1;}
.form-group label {display: block; margin-bottom: 5px;}

select {width: 200px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; background-color: white; font-size: 16px;}
select:focus {outline: none; border-color: var(--dark-green);}

.radio {width:22px; height: 22px;}

.box {display: flex; flex-wrap: wrap;}
.box > * {padding: 1em; flex: 1 1 300px;}

.widerruf {max-width: 100%;}

.button_blue {min-width: 300px; max-width: 301px; background-color: var(--button-blue); border: none; color: var(--white); padding: 1.5% 1.5%; text-align: center; text-decoration: none;
	display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; border-radius: 10px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.button_blue:hover {background-color: var(--dark-green); box-shadow: 2px 2px 2px grey;}
.button_blue a {color: var(--white);}

.footer {background-color: var(--header-footer); margin-bottom: 55px; border-top: 2px solid var(--dark-red);}

.notice-container {position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--gray94); padding: 10px; text-align: center; font-size: 14px; border-top: 2px solid var(--dark-red);}

.to-top-button {position: fixed; bottom: 100px; right: 20px; padding: 10px 15px; text-align: center; text-decoration: none; font-weight: bolder; background-color: var(--body-background); color: var(--dark-blue);
	display: inline-block; font-size: 20px; cursor: pointer; border: 2px solid var(--black); border-radius: 5px; transition: background-color 0.3s ease; border-top-left-radius: 50px; border-bottom-left-radius: 50px;}
.to-top-button:hover {background-color: var(--header-footer); color: var(--dark-red); border: 2px solid var(--black);}

@media (min-width: 931px) {
.header {height: 98px;}
.header li {float: left;}
.header li a {padding: 37px 30px; font-size: 20px; border-style: none none none solid; border-color: var(--dark-gray); border-width: 2px;}
.header .menu {clear: none; float: right; max-height: none;}
.header .menu-icon {display: none;}
.header .menu-btn:checked ~ .menu {border-bottom: 0px;}
.header ul a:hover {height: 96px;}
.header a.active {height: 96px;}

p, ul {font-size: 20px; padding-bottom: 20px;}

.containerbild {min-width: 70%; max-width: 95%; height: auto;}

.footer {margin-bottom: 39px;}
}

@media (min-width: 1150px) {
.logo {width:auto; float:left;}

nav {float:right; width:auto; height:100px; display:block !important;}
nav li {width:auto; padding:0;}
nav a {height:100px; }

.nav-toggle {display:none !important;}

.two {flex: 48%;}
.three {flex: 18%;}
.four {flex: 18%;}
}

@media (max-width: 1200px) {
.bundeslaender {max-width: 50%; margin-left: auto; margin-right: auto;}
}

@media (max-width: 1600px) {
.four {flex: 48%;}
}