@charset "UTF-8";
/* CSS Document */

:root {
  --hellblau: #a1daf8;
  --beige: #ab901c;
  --schrift: #000;
}

a {color: inherit; text-decoration: none; transition: opacity .5s ease-out;}
a:hover {opacity: .5;}
b, strong {font-weight: 700;}
.test {color: crimson;}

html, body { font-family: gill-sans-nova, sans-serif; font-size: 1.3vw; font-weight: 500;  color: var(--schrift); margin: 0; padding: 0;}


#kopfzeile { width: 100vw; background-color: #fff; z-index: 100; position: fixed; top: 0; padding-top: 2rem; left: -.5rem;}
#kopfzeile .header-container{ width: 50rem; margin: 0 auto 2rem auto; display: flex; justify-content: space-between; gap: 1.5rem; }
.logo {width: 50%;}
.logo .logobild {position: absolute; margin-left: -3.72rem; width: 3.749rem; }
.logo .kopf {width: 100%;}
.navigation {width: 50%; display: flex; justify-content: space-between;}
.sprache {color: var(--hellblau); z-index: 500;}
.sprache span {text-transform: uppercase;}
.sprache span a {margin-top: -1em; display: inline-block;}
.sprache span:first-of-type::after{content: '|'; }
.sprache .active {font-weight: 700}
.menue {text-align: right; font-variant: small-caps; text-transform: lowercase; font-size: 1.1rem; letter-spacing: .03rem; flex-grow: 1; }
.menue .knopf {width: 100%; height: 5em; background-image: url(../images/menue_zu.svg); background-repeat: no-repeat; background-position: right; cursor: pointer;}
.menue .knopf:hover {opacity: .7;}
.menue .knopf.open {background-image: url(../images/menue_offen.svg);}
.menue ul {list-style: none; line-height: 1rem; margin: 0; padding: 0; display: none;}
.aktiv {font-weight: 700; color: var(--hellblau); }

#hauptseite { width: 50rem; margin: 2rem auto 30rem auto; justify-content: space-between; align-items:flex-start; line-height: 1.2rem; }
.unterseite {padding-top: 10em; scroll-margin-top: 9rem;}
.unterseite:first-of-type {padding-top: 18.3rem;}
#hauptseite .abschnitt {display: flex; gap: 1.5rem; margin-bottom: 2rem; scroll-margin-top: 9rem;}
.anchor {display: block; padding-top: 5em;}

#hauptseite ul {margin: 0;   padding: 0; list-style: outside; }
#hauptseite li {list-style-type: '→ '; padding-left: .5rem; margin-bottom: .5rem; margin-left: 1.3rem;}

.block-links, .block-rechts { flex-grow: 1; width: 50%; align-self: flex-start; height: auto;}
.block-links { position: sticky;  position: -webkit-sticky; top: 18.3rem;}
.block-links figure {margin: 0;}
.block-links img {width: calc(100% - 1.5rem); background-color: var(--hellblau); padding: .75rem;}
.block-links ul, .block-links p { border: solid var(--hellblau) .75rem; padding: .5rem !important;}


.block-rechts p {margin-top: 0; margin-bottom: 1rem; }
.block-rechts figure {margin: 0;}
.block-rechts img { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; border: solid .6em var(--hellblau); margin-bottom: 1em;}
.absatzlinie { height: 1.5rem; background-color: var(--hellblau); margin: 1.2rem 0 1.2rem 0; border: none; }

.block-pfeil {background-color:  var(--hellblau); padding: .75em; clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%); margin-top: .2em; margin-bottom: 1.5rem;}
.block-pfeil-innen {background-color: #fff; padding: .5rem .5rem .6rem .5rem; clip-path: polygon(0% 0%, 91% 0%, 98% 50%, 91% 100%, 0% 100%); font-weight: 700; font-size: 1.5rem; text-transform: uppercase;}

.aufklapp {}
.aufklapp .aufklapp-header { font-weight: 700; margin: 1rem 0; cursor: pointer;}
.aufklapp .aufklapp-header:hover {opacity: .7;}
.aufklapp .aufklapp-header span::after {content: '→ ';}
.aufklapp .aufklapp-header.open span::after {content: '← ';}
.aufklapp .aufklapp-innen {display: none;}



#fusszeile { position: fixed; bottom: 1rem; width: 100%;}
#fusszeile .backtotop { width: 50rem; margin: 0 auto; height: 4rem; text-align: right;}
#fusszeile .backtotop a {height: 4rem}
#fusszeile .backtotop a img { height: 4rem; transition: margin .3s ease-out;}
#fusszeile .backtotop a:hover img {margin: -.5rem 0 0 0 ;}

#mobile-indicator { display: none; }

@media screen and (max-width: 700px) and (orientation: portrait)
{
	html, body  {font-size: 4.3vw;}
	#kopfzeile {padding-top: 1rem; left: 0;}
	#kopfzeile .header-container {width: 90vw; flex-wrap: wrap; gap: 0rem; margin-bottom: 0em;}
	#hauptseite {width: 90vw; flex-wrap: wrap; gap: 0rem; }
	.logo {flex: 0 0 100%;}
	.logo .logobild { width: 2.73rem;  display: inline; margin-left: 0;}
	.logo .kopf {width: 18.27rem; display: inline; margin-left: 2.73rem; }
	.navigation {flex: 0 0 100%; margin-top: -.5rem;}
	.menue {order:1; text-align: left; padding-bottom: .5rem; font-size: 1.5rem;}
	.menue ul { line-height: 1.7rem;}
	.menue .knopf {background-position: left; height: 4em;}
	
	#hauptseite .abschnitt {flex-wrap: wrap;}
	.sprache {order:2;}
	.block-links, .block-rechts  {flex: 0 0 100%;}
	.block-links {position: relative; top: 0;}
	.unterseite:first-of-type { padding-top: 15.3rem; }
	.unterseite { padding-top: 4em; scroll-margin-top: 14rem;}
	#fusszeile .backtotop { width: 90vw;}
	#mobile-indicator { display: block; }
}