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

:root {
  --hellblau: #a1daf8;
  --hellhellblau: #d3ecfc;
  --beige: #ab901c;
  --schrift: #000;
  --grau: #e7e6e6;
  --breite: 63rem;
}

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

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


#kopfzeile {width: 100vw; position: fixed; background-color: #fff; z-index: 100;  padding-top: 2rem;   top: 0;  }
.header-container {width: var(--breite); display: flex; justify-content: space-between; margin: 0 auto;}
.logo {}
.logo img {width: 14.7rem; margin-left: 0;}



.menue { width: 47rem; padding-left: 5rem; text-transform: uppercase; font-weight: 600; font-size: .85rem; letter-spacing: .05rem; flex-grow: 1; color: var(--beige); margin-top: 3.2rem; height: 5.7rem;}
.menue > ul {list-style: none;  margin: 0; padding: 0; display: flex; }
.menue > ul li {   height: 2.4rem; line-height: 1.2rem;}
.menue > ul > li:nth-child(1) {width: 6rem; border-right: var(--hellblau) .2rem solid; padding: 0 .8rem 0 1rem;}
.menue.de > ul > li:nth-child(2) { width: 13rem; border-right: var(--hellblau) .2rem solid; padding: 0 .8rem 0 1rem;}
.menue.en > ul > li:nth-child(2) {width: 7rem; border-right: var(--hellblau) .2rem solid; padding: 0 .8rem 0 1rem;}
.menue.de > ul > li:nth-child(3) {  width: 15.3rem;  padding: 0 0 0 1rem;}
.menue.en > ul > li:nth-child(3) {  width: 16.3rem;  padding: 0 .8rem 0 1rem;}
.menue.de > ul > li:nth-child(4) { width: 8rem; padding: 0 1rem;}
.menue.en > ul > li:nth-child(4) { width: 11rem; padding: 0 1rem;}

.menue li ul {visibility: hidden; opacity: 0; overflow: hidden; height: 0; list-style: none;  margin: 0; padding: 0; padding-top: 1rem; cursor: pointer; margin-top: -.4rem; position: absolute; transition: all .8s ease;}
.menue li:hover ul { visibility: visible; opacity: 1; height: auto;}
.menue > ul ul  li { padding: 0 0 0 .5rem; background-color: #fff; border: solid #fff .3rem; margin-left: -.3rem; font-weight: 300; font-style: normal; height: auto;} 

.menue ul ul li:hover {font-weight: 500; font-style: italic;}
.menue ul ul li.aktiv {font-weight: 500; font-style: italic;}

.menue .aktiv { font-weight: 700; color: inherit;}

.sprache { width: 5rem; color: var(--hellblau); z-index: 500; text-transform: uppercase; font-weight: 500; font-size: .9rem; height: 2.4rem; line-height: 1.2rem; margin-top: 3.2rem; text-align: right;}
.sprache span a {margin-top: -1em; display: inline-block;}
.sprache span:first-of-type::after{content: '|'; }
.sprache .active {font-weight: 700}

#hauptseite { width: 100vw; }
.unterseite {width: var(--breite); margin: 11rem auto 10rem auto; justify-content: space-between; align-items:flex-start; font-size: 1.3rem; line-height: 1.3em;  scroll-margin-top: 10rem;}
#hauptseite .abschnitt {display: flex; gap: 3rem; margin-bottom: 10rem; scroll-margin-top: 14rem;}
#hauptseite .abschnitt:last-of-type {padding-bottom: 20rem;}
.anchor {display: block; padding-top: 10em;}
.unterseite li {list-style-type: '→ '; padding-left: .5rem; margin-bottom: .5rem; margin-left: 1.6rem;}

.block-links, .block-rechts { flex-grow: 1; width: 50%; align-self: flex-start; height: auto;}
.block-links { position: sticky;  position: -webkit-sticky; top: 11rem;}
.block-links figure {margin: 0;}
.block-links img {width: 100%;}
.block-links ul, .block-links p { border: solid var(--hellblau) .75rem; padding: .5rem !important; padding-left: 1rem !important;}
.block-links ul {margin: 0;   padding: 0; list-style: outside; color: var(--beige); }
.block-links li {margin-bottom: 0;;}
.block-links .aktiv {font-weight: 700; color: var(--schrift);}

.block-rechts a { color: var(--beige); cursor: pointer; font-weight: 500;}
.block-rechts p {margin-top: 0; margin-bottom: 1rem; }
.block-rechts strong, .block-rechts b {font-weight: 500; color: var(--beige);}
.block-rechts h2 {color: var(--schrift); margin: 2rem 0 .5rem 0; font-weight: 500;}
.block-rechts h2 strong { font-weight: 700; color: var(--schrift); }
.block-rechts h2.aktiv {color: var(--schrift); font-weight: 700;}
.block-rechts h2.aktiv strong {font-weight: 800;}
.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-rechts ul { padding: 0;}

.block-pfeil {background-color:  var(--hellblau); padding: 0; 
	clip-path: polygon(0% 0%, 93.3% 0%, 100% 50%, 93.3% 100%, 0% 100%); margin-top: .2em; margin-bottom: 1.5rem;}
.block-pfeil-innen {background-color: #fff; padding: 1.25rem 1rem 1.25rem 1.25rem; color: var(--beige);
	clip-path: polygon(.75rem .75rem, calc(93.3% - 0.5rem) .75rem, calc(100% - 1rem) 50%, calc(93.3% - .5rem) calc(100% - .75rem), 0.75rem calc(100% - .75rem)); }
.block-pfeil-innen h1 {font-weight: 500; font-size: 2rem; line-height: 1em; letter-spacing: 0.03em ; text-transform: uppercase; margin: 0;}
.block-pfeil-innen span {font-size: 1rem; display: block; line-height: 1.4em; }

.aufklapp {}
.aufklapp .aufklapp-header { margin: 1rem 0; cursor: pointer;  padding-left: 1.8rem;}
.aufklapp .aufklapp-header:hover {opacity: .7;}
.aufklapp .aufklapp-header::before {content: '→ '; margin-left: -1.8rem;}
.aufklapp .aufklapp-header.open::before {content: '← ';}
.aufklapp .aufklapp-innen {display: none; padding-left: 1.8rem;}

#mehr-referenzen {padding-top: 0;}

#fusszeile {position: fixed; bottom: 0; width: 100vw;   font-weight: 600;}
#fusszeile nav { width: var(--breite); margin: 0 auto;  padding: 0 .05rem; background-color: var(--hellhellblau); height: 2.5rem;}
#fusszeile nav ul {list-style: none; margin: .7rem 0 0 0rem; padding: 0; display: flex; justify-content: space-between;}

#fusszeile nav li img { position: relative; display: block; height:1.5rem; width: auto;}
#fusszeile nav li {  text-transform: uppercase; font-size: .85rem;  letter-spacing: .05rem; color: var(--beige); padding: 0 1rem; margin-top: .5rem;}
#fusszeile nav li:first-child {margin-right: 16.2em;}
#fusszeile nav li:nth-child(5) {width: 11rem;}
#fusszeile nav li span { font-size: .6em; margin-left: .2rem;}
#fusszeile nav li a { cursor: pointer;}
#fusszeile nav .aktiv { font-weight: 700; }


#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: inline-block; }

@media screen and (max-width: 700px) and (orientation: portrait)
{
	:root {--breite: 94vw;}
	html, body  {font-size: 3.5vw;}
	#kopfzeile {padding-top: 1rem; left: 0; height: 8rem;}
	#kopfzeile .header-container {flex-wrap: wrap; gap: 0rem; margin-bottom: 0em;}
	.logo {width: auto; margin: 0;}
	.logo img {margin: 0;}
	.menue { width: 20vw; margin: 0; padding-left: 4vw; font-size: 1rem;}
	.menue .knopf {display: block; background-image: url(../images/menue_zu.svg); background-repeat: no-repeat; width: 20vw; height: 20vw;}
	.menue .knopf.open {background-image: url(../images/menue_offen.svg); }
	.menue > ul {display: none; width: 50vw; background-color: #fff; padding: .5rem; margin-left: -1rem; position: absolute; right: 1rem; top: 8rem;}
	.menue > ul li {text-align: right; line-height: 1.2rem; margin-bottom: .5rem;}
	.menue > ul > li { line-height: 1.2rem;}
	.menue.de > ul > li:nth-child(1) { width: 100%; border-right: none; padding: 0; }
	.menue.en > ul > li:nth-child(1) {width: 100%; border-right: none; padding: 0;}
	.menue.de > ul > li:nth-child(2) { width: 100%; border-right: none; padding: 0;}
	.menue.en > ul > li:nth-child(2) {width: 100%; border-right: none; padding: 0;}
	.menue.de > ul > li:nth-child(3) {  width: 100%; border-right: none; padding: 0;}
	.menue.en > ul > li:nth-child(3) {  width: 100%; border-right: none; padding: 0;}
	.menue.de > ul > li:nth-child(4) { width: 100%; padding: 0 1rem;}
	.menue.en > ul > li:nth-child(4) { width: 100%; padding: 0 1rem;}
	.menue > ul .aktiv > ul {display: block;}
	.menue ul ul { position: relative; padding: 0 0 0 .5rem; margin: 0 0 .5rem 0;}
	.menue ul li {height: auto; margin-bottom: .25rem;}
	.menue ul ul li {border: none; margin: .2rem 0 0 0 ; height: auto;}
	.sprache {margin-top: 0; line-height: .7}

	#hauptseite {width: 100vw;}
	#hauptseite .unterseite { width: var(--breite);  margin: 0 auto; padding-top: 10rem;}
	#hauptseite .abschnitt { flex-direction: column;}
	.block-links, .block-rechts {width: 100%;  }
	.block-links { position: sticky; position: -webkit-sticky; top: 8.9rem; background-color: #fff; padding-bottom: 1rem;}

	#fusszeile {width: 100vw; position: fixed; bottom: 0; background-color: transparent;}
	#fusszeile nav {width: var(--breite); padding: 0 .1rem; height: 100%; margin: 0 auto; position: relative; background-color: var(--hellhellblau);}
	#fusszeile nav ul {list-style: none; text-align: center; margin: 0; padding: 0;}
	#fusszeile nav li {padding: 0 .36rem; margin-top: .5rem;}
	#fusszeile nav li span {display: none;}	
  #fusszeile nav li:first-child { margin-right: 0;}
  #fusszeile nav li img { height: 1.3rem; margin-bottom: .5rem;}
	
}