:root{

	--background-color: #faf9f8;
	--header-footer-color: #ffffcc;
	--box-shadow: #800000;
	
	--linie: #fab80a;
	
	--black: #000000;
	--white: #ffffff;
	--green: #008800;
	--dark-red: #800000;
	--faq: #666666;
	
	--hover: #daa520;
}

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

body, html {background-color: var(--background-color); color: var(--black); font-family: "Helvetica Neue", "Helvetica", "Lucida Sans", "sans-serif";
		hyphens: auto; hyphenate-limit-chars: auto 3; hyphenate-limit-lines: 4; height: 100%; scroll-behavior: smooth;}

.header {background-color: var(--header-footer-color); box-shadow: 1px 1px 5px 0px var(--box-shadow); position: fixed; top: 0; padding-right: 10px; width: 100%; height: 110px; z-index: 1;}
.top-logo img{margin: 1% 0 0.5% 3%;}

nav {width: 100%; height: min-content; position: fixed; margin-right: 5%; background-color: var(--header-footer-color);
	overflow: hidden; padding-top: 15px; max-height: 0; transition: max-height .5s ease-out;}
.menu {list-style: none;}
.menu a{text-decoration: none; display: block; padding: 30px 20px; color: var(--black);}
.menu a:hover{background-color: var(--hover); color: var(--dark-red);}

.hamb {cursor: pointer; float: right; padding: 40px 20px;}
.hamb-line {background: var(--black); display: block; height: 2px; position: relative; width: 24px;}
.hamb-line::before, .hamb-line::after{background: var(--black); content: ''; display: block; height: 100%;
	position: absolute; transition: all .2s ease-out; width: 100%;}
.hamb-line::before {top: 5px;}
.hamb-line::after {top: -5px;}

.side-menu {display: none;}
.side-menu:checked ~ nav{max-height: 100%;}
.side-menu:checked ~ .hamb .hamb-line {background: transparent;}
.side-menu:checked ~ .hamb .hamb-line::before {transform: rotate(-45deg); top:0;}
.side-menu:checked ~ .hamb .hamb-line::after {transform: rotate(45deg); top:0;}

.bg {position: relative; background-attachment: fixed; background-position: center;
	background-repeat: no-repeat; background-size: cover; height: 100vh;}
.bg-img-1 {background-image: url(../images/aufbauseminar-fuer-fahrnfaenger-in-karlsruhe.png);}
.bg-img-2 {background-image: url(../images/medien-service-busch-datenschutz.jpg);}
.bg-img-3 {background-image: url(../images/medien-service-busch-impressum.jpg);}
.bg-img-4 {background-image: url(../images/404-site.jpg);}
.bg-img-5 {background-image: url(../images/silvester-bild-medien-service-busch.jpg);}


.caption {background: var(--header-footer-color); border-style: solid; border-radius: 15px; border-color: var(--box-shadow); position: absolute;
	left: 4%; top: 50%; text-align: center; text-transform: uppercase; width: 90%; min-height: 70px; padding-top: 0.9%; opacity: 0.8;}
.caption span.border {color: var(--black); font-size: 20px; font-weight: 900;}

main {margin: auto auto; max-width: 95%;}

.row::after {content: ""; clear: both; display: table;}
[class*="col-"]{float: left; padding: 15px;}

p {padding: 1% 0 0 0;}
h1, h2, h3, h4, h5 {color: var(--dark-red); padding: 1% 0;}
h1 {font-size: 22px;}
h2 {font-size: 20px;}
h3 {font-size: 18px; margin-bottom: 3%;}
h4 {font-size: 18px;}

ol {padding-left: 30px;}

hr{border-color: var(--dark-red); border-width: 1px; margin: 0;}
.intermediate-line {border-color: var(--linie); margin: 1% 0;}

.border-gelb {border-style: dotted; border-width: 5px; border-color: #fab80a; border-radius: 5px; margin: 30px 0 0 10px; padding: 1%;}
.border-green {border-style: dotted; border-width: 3px;border-color: var(--green); border-radius: 5px;  padding: 0 1%;}

.abstand-top {padding-top: 3%; max-width: 100%;}
.abstand-bottom {padding-bottom: 1%;}
.jump {visibility: hidden; height: 0px !important; position: absolute; margin: -100px;}

.dark-red-bold {color: var(--dark-red); font-weight: bold;}

.fahrschulimage_stoll {max-width: 75%; padding-top: 2%;}
.fahrschulimage_fcc {max-width: 75%; padding-top: 2%;}

.center {text-align: center;}

.button_anmelden, input.button {background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color: #ffec64; border-radius: 6px; display: inline-block; cursor: pointer;
	color: var(--dark-grey); font-family: poppins; font-size: 15px; font-weight: bold; right: 1%; padding: 1% 3%;
	text-decoration: none; text-shadow: 0px 1px 0px #ffee66;}
.button_anmelden:hover, input.button:hover {background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%); background-color: #ffab23;}
.button_anmelden:active {position: relative; top: 1px;}

details {background: #eee; border: 1px solid #666; border-radius: 3px; margin: 2% 0;}
summary {background: var(--faq); color: var(--white); cursor: pointer; padding: 1rem;}
.akkordeon-inhalt {padding: 1rem 1rem 1px 1rem;}
details[open] summary ~ * {animation: sweep .7s ease-in-out;}
@keyframes sweep {
0%    {opacity: 0; margin-left: -20px}
100%  {opacity: 1; margin-left: 0px}
}
.aufzaehlung {list-style-type: disc; padding-left: 4%;}

footer{background-color: var(--header-footer-color); padding: 0 0 1% 2%;}
.footer-border-top{border-top: 2px solid var(--dark-red);}

@media (max-width: 380px) {	
	.bg {position: relative; background-attachment: scroll; height: 100%; background-position: center}
}

@media (min-width: 681px) {
	.col-1 {width: 100%; border: var(--border-color);}
	.col-2 {width: 50%;}
	.col-3 {width: 33%;}
	.col-4 {width: 50%;}
	.col-5 {width: 35%;}
	.col-6 {width: 65%;}
	.fahrschulimage_fcc {max-width: 55%; padding-top: 2%;}
}

@media (max-width : 780px){
[class*="col-"] {width: 100%;}
}

@media (min-width: 950px) {
	nav {max-height: none; top: 0; margin-right: 0px; position: relative; float: right; width: fit-content; background-color: transparent;}
	.menu li{float: left;}
	.menu a:hover{background-color: var(--hover); color: var(--dark-red);}
	.hamb{display: none;}
}

@media (min-width: 1035px) {
	.caption {top: 50%; min-height: 120px;}
	.caption span.border {font-size: 30px; letter-spacing: 10px;}
}

@media (min-width: 1340px) {
	.col-4 {width: 25%;}	
}