:root{
	--txtColor: #a7b6be;
	--txtHColor: #eee;
	--lnkColor: #b0e42e;
	
	--hlColor: #0bf0f8;
	--secColor: #66bee3;
	--bgColor1: #eee;
	--bgColor2: #3F3F70;

	--siteMarginXXL: 19vw;
	--siteMarginXL: 9vw;
	--siteMarginL: 5vw;
	--siteMarginS: 3vw;
/*
	--bgColor1: #B8C0CB;
	--bgColor2: #c2c9d2;


	--overlay1: #6ae9ff;
	--overlay2: rgba(76, 140, 170, 0.1);
	--overlay3: rgba(89, 236, 255, 0.2);
	--overlay4: rgba(133, 84, 112, .3);
	--overlay5: rgb(239, 255, 15);


	--shadow1: 1px 1px 11px #33333355;
	--shadow2: 7px 7px 17px #000000;*/
}

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

html{ 
	font-size: 100%;
	scroll-behavior: smooth;
}

body{
	font-family: 'fira-sans';
	font-size: 1.2rem;
	color: var(--txtColor);
	font-weight: 200;
	line-height: 1.2;
	min-height: 100vh;
	background: #1F2439;
	background: linear-gradient(65deg, rgba(31, 36, 57, 1) 0%, rgba(51, 53, 85, 1) 100%);
}

ul{
	list-style-type: none;
	padding:0;
}

main, header, footer, nav, aside, figure, figcaption, section, article{
	display: block;
	padding: 0;
}
h1,h2,h3,h4,h5,h6{
	color: var(--txtHColor);
}

p{
	margin: 0 0 1rem 0;
}

strong{
	color: var(--txtHColor);
	font-weight: 500;
}

hr{
	margin-top: 1rem;
	margin-bottom: 1rem;
	border-style: solid;
	border-color: var(--bgColor2);
}

.hor{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap:1rem;
}

.flex100{
	flex-basis: 100%;
}

.flex50{
	flex-basis: 49%;
}

.flex60{
	flex-basis: 59%;
}
.flex40{
	flex-basis: 39%;
}

a{
	color: var(--lnkColor);
	text-decoration: none;
}

.aAbschnitt{
	color: var(--txtColor);
	align-self: flex-end;
	padding: 0.5rem;
	margin: 1rem 0 1rem 0;
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 7px;
	background-color:var(--bgColor2);
	transition: padding-left 0.3s cubic-bezier(0.31, -0.105, 0.43, 1.4) 0.5s;
}
.aAbschnitt::before {
  content: "➽";
  font-size: 2rem;
  transform: rotate(-90deg);
  font-weight: 900;
  color: #f3c83b;
  position: absolute;

  top: 0;
  left: -15%;
  transition: 0.3s left cubic-bezier(0.31, -0.105, 0.43, 1.4) 0.2s;
}

.aAbschnitt:hover{
	padding-left: 3rem;
	transition: padding-left 0.3s;
}
.aAbschnitt:hover::before {
  left: 3%;
}
/*****/

#lang{
	padding: 0.5rem var(--siteMarginXXL) 0.5rem var(--siteMarginXXL);
	margin-bottom: 5rem;
	background-color: #1F2439;
	display: flex;
	justify-content: flex-end;
}
#lang li{
	margin: 0.3rem;
}

#lang a{
	text-align: center;
	width:4vw;
	
	display: block;
	border-bottom: 3px #eece1b solid;
}

header figure, header h1, header p, #pSection{
	margin-left: var(--siteMarginXXL);
	margin-right: var(--siteMarginXXL);
}

header figure{
	width: 13vw;
}

header figure img {
  max-width: 100%;
  height: auto;
  padding: 6px;
  border: 1px var(--hlColor) solid;
  border-radius: 50%;
}

header h1{
	margin-top: 3rem;
	font-weight: 500;
}

header p{
	color: var(--secColor);
	font-weight: 400;
}

#pSection{
	font-size: 1rem;
	margin-top: 3rem;
	display: flex;
	flex-flow: row wrap;
}

#pSection li{
	margin: 0.5rem;
	/*background-color: #070553;*/
	padding: 0.5rem 0 0.5rem 0;
	position: relative;
	border-left: 2px var(--bgColor1) dotted;
	overflow: hidden;
}

#pSection a{
	display: block;
	padding-left: 0.75rem;
	position:relative;
	/*border: 1px #66bee3 solid;*/
	transition: 0.42s padding-left cubic-bezier(.29,1.53,.54,.88) 0.5s;

}

#pSection li::before{
	content: "➤";/*➼*/
	font-size: 1rem;
	transform: rotate(90deg);
	font-weight: 900;
	color: var(--hlColor);
	position: absolute;	
	top: -77%;
	left: 5%;
	transition: 0.42s top cubic-bezier(0.31, -0.105, 0.43, 1.4) 0.2s;

}
#pSection li:hover::before{
	top:25%;
	transition: 0.42s top cubic-bezier(.29,1.53,.54,.88) 0.2s;
	
	/*margin-right:2rem;*/
}
#pSection li:hover a{
	color:var(--txtHColor);
	padding-left: 2rem;
	transition: 0.42s padding-left cubic-bezier(.29,1.53,.54,.88);

	/*font-weight: 500;*/
}

section{
	/*padding-top: 2rem;*/
	padding-bottom: 2rem;
	border-bottom: 5px var(--bgColor1) dotted;
}

article{
	margin-top: 5rem;
	margin-left: var(--siteMarginXXL);
	margin-right: var(--siteMarginXXL);
	display: flex;
	flex-direction: column;
}

article figure{
	width: 100%;
}

article figure img{
	max-width: 100%;
	height: auto;
	display: block;
}

h2{
	font-size: 5rem;
	font-style: italic;
	font-weight: 100;
	margin-left: var(--siteMarginXXL);

}

h3{
	font-size: 3rem;
	font-weight: 400;
	padding-top: 0.5rem;
	margin-bottom: 0.75rem;
	border-top: 2px var(--secColor) dotted;
}

h2 + article h3{
	border:0;
}

h3 span{
	color: var(--secColor);
	font-size: 2.5rem;
	font-style: italic;
	font-weight: 700;
	display: block;
	
}

span.anmerkung{
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: 1rem;
}

h4{
	font-size: 1.1rem;
	color: var(--secColor);
	font-weight: 200;
	margin-bottom: 3rem;
}

h5{
	color: var(--secColor);
	font-size: 2rem;
	font-style: italic;
	font-weight: 100;
	margin-bottom: 3rem;
}

.gallery img{
	border-radius: 7px;
}

/*** video player ***/
.videoPlayer{
	margin-top: 1rem;
	border-radius: 7px;
	overflow: hidden;
	height: auto;
}

.videoBar{
	background-color: var(--bgColor2);
	padding: 0.3rem 1rem;
	border-bottom: 1px var(--secColor) solid;
	display: flex;
	align-items: center;
}
.videoBar p{
	margin: 0;
	padding: 0;
}

.videoContainer{
	position: relative;
}
video{
	width: 100%;
	display: block;
	outline: none;
}

/*** YT Play ***/
.ytPoster {
	color: var(--lnkColor);
	text-decoration: none;
	margin: 1rem 0;
	display: block;
	position: relative;
	background: var(--bgColor2);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 7px;
}

.ytPoster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ytOverlay {
	padding: 2rem;
	border-radius: 3rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;	
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(5px);
	transition: background 0.5s ease, backdrop-filter 0.5s ease;

}

.ytPlay {
	color: var(--txtHColor);
	transform: rotate(0deg);
	transition: transform 0.5s ease, color 0.5s ease, backdrop-filter 0.5s ease;
}

.ytText {
  font-size: 1rem;
  font-weight: 500;
}

.ytPoster:hover .ytOverlay {
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(1px);
	transition:  background 0.5s ease, backdrop-filter 0.5s ease;
}
.ytPoster:hover .ytPlay{
	color: var(--hlColor);
	transform: rotate(360deg);
	transition: transform 0.5s ease, color 0.5s ease;

}


footer{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #0f0f0f;
}

#fLinks{
	margin: 3rem 0 3rem 0;
	display: flex;
	flex-flow: row wrap;
	justify-content:center;
	flex-basis: 50%;
}

#fLinks li{
	display: block;
	width: 5rem;
	height: 5rem;
	padding: 1.3rem;
	margin: 1rem;
	background-color: var(--secColor);
	border-radius: 50%;
	transition: background-color 0.5s ease, padding 0.3s cubic-bezier(0.31, -0.105, 0.43, 1.4) 0.2s;

}
#fLinks li:hover{
	background-color: var(--lnkColor);
	padding: 1rem;
	transition: background-color 0.5s ease, padding 0.3s cubic-bezier(0.31, -0.105, 0.43, 1.4) 0.2s;

}

#fLinks img{
	max-width: 100%;
	height: auto;
}



#toTop{
	position: fixed;
	width: 4.2rem;
	height: 4.2rem;
	background: var(--secColor);
	border-radius: 50%;
	right: 2rem;
	bottom: 2rem;
	display: flex;
	align-items: stretch;
	justify-content: center;
	transform: rotate(-99deg);
	transition: background .5s ease, transform .5s ease-in .1s;
}
#toTop a{
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 2rem;
	padding: 1rem;
}

#toTop:hover {
	background: var(--lnkColor);
	transform: rotate(270deg);
	transition: transform .5s ease-in .1s, background 0.5s ease;

}


/*** Slider v1 ***/
.sContainer{
	padding: 0;

}
.wrapSlide{
	position: relative;
	max-width: 100%;
	margin: 0 auto;
}

.sSlider{
	display: flex;
	overflow-x: auto;
	aspect-ratio: 16 / 9;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overflow: hidden;
}
.sSlider figure{
	flex: 1 0 100%;
	scroll-snap-align: start;
	object-fit: cover;
	position: relative;
}
.sSlider img{
  width: 100%;
  height: auto;
  /*opacity: 0.3;*/
}

.sSlider figcaption{
	width: 100%;
	padding: 1em 0 3.5em 0;
	background-color: rgba(0, 0, 0, 0.75);
	position: absolute;
	bottom:0;
	display: flex;
	flex-direction: column;
}
.sSlider h5, .sSlider figcaption p{
	/*border: 2px #0bf0f8 solid;*/
	margin-left: auto;
	margin-right: auto;
}

.sNav{
	display: flex;
	column-gap: 1rem;
	position: absolute;
	bottom: 1em;
	z-index: 1;
	left: 50%;
	transform: translatex(-50%);
}
.sNav a{
	width: 1.5rem;
	height: 1.5rem;
	background-color: #fff;
	border-radius: 50%;
	opacity: 0.75;
	transition: opacity ease 500ms;
}

.sNav a:hover{
	opacity: 1;
}

/*** End Slider v1 ***/