/*
INFO zu Versionen ******************************************************************* 

**************************************************************************************
 */
@media all{
	body {
		font-family: 'Muli',sans-serif;
		font-size: 16px;
		line-height: 1.5;
		margin: 0;
		/*background:black;*/
		width: 100%;
		color: #444444;
		height: 100%;
		overflow-x: hidden; /* Hide horizontal scrollbar */
	}
	h1{font-size: 1.6em;
		font-weight: bold;
		text-align: right;
	}
	h2{font-size: 1.4em;
		font-weight: normal;
	}
	#text-titel{font-size: 1.4em;
		font-weight: normal;
	}
	#h1center{font-size: 1.6em;
		font-weight: bold;
		text-align: center;
	}
	#titelPortfolio{font-size: 1.8em;
		font-weight: normal;
	}

	a{color:#444444; text-decoration:none;}
	a:hover{color:#ff5252; text-decoration:underline;}
	.textlink{color:#ff5252;}
	.textlink:hover{text-decoration:underline;}

	/*Klasse für toTop auf Portfolioseiten*/
	#toTop{
	  display: none;
	  position: fixed;
	  bottom: 20px;
	  right: 30px;
	  z-index: 99;
	  border: 3px solid;
	  border-color:  #ff5252;
	  cursor: pointer;
	  padding: 11px 15px 2px 15px;
	  border-radius: 10px;
	  font-size: 1.6em;
	  background: transparent;
	  color: #ff5252;
	}
	#toTop:hover{
	  background-color: #ff5252;
	  color: white;
	}
	span.stretch{
	    display:inline-block;
	    -webkit-transform:scale(2,1); /* Safari and Chrome */
	    -moz-transform:scale(2,1); /* Firefox */
	    -ms-transform:scale(2,1); /* IE 9 */
	    -o-transform:scale(2,1); /* Opera */
	    transform:scale(2,1); /* W3C */
	}
	/*ENDE Klasse für toTop auf Portfolioseiten*/

	/*Klasse für zurückBTN auf Portfolioseiten*/
	#zurückBTN{
		display: none;
		position: fixed;
		bottom: 20px;
		left: 30px;
		z-index: 98;
		border: 3px solid;
		border-color:  #ff5252;
		background: transparent;
		color: #ff5252;
		cursor: pointer;
		padding: 11px 15px 2px 15px;
		border-radius: 10px;
		font-size: 1.6em;
		text-decoration: none;
		-webkit-transform: rotate(270deg); /* Safari and Chrome */
	    -moz-transform: rotate(270deg); /* Firefox */
	    -ms-transform: rotate(270deg); /* IE 9 */
	    -o-transform: rotate(270deg); /* Opera */
	    transform: rotate(270deg); /* W3C */
	}
	#zurückBTN:hover{
	  background-color: #ff5252;
	  color: white;
	}
	/*ENDE Klasse für zurückBTN auf Portfolioseiten*/

	/*Links als Button im Text*/
	.button {
		width: 100%;
		color: #444444; 
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 20px;
		text-align: left;
	}
	a.btn {
		color: #444444;
		text-decoration: none;
		text-align: center;
		padding: 7px;
		border: 1px solid #444444;
	}
	a.btn:hover {text-decoration:underline;}

/*Navigations-Menü*/
	#mainNav{text-align:center;}
	#mainNav li{
		display:inline-block;
		margin:0 7px;
	}
	#mainNav a{
		color:#FFFFFF;
		position:relative;
		display:inline-block;
		padding:0.278em;
		text-decoration:none;
		font-size:1.214em;
		line-height:2.35em;
		/*background:#2d3239;*/
		font-weight:bold;
	}
	#mainNav a span{
		color:#FFFFFF;
		text-decoration:none;
		padding:0 1.25em;
		display:block;
		font-weight:bold;
	}
	#mainNav a:active{
		color:#2d3239;
	}
	#mainNav a:hover span {
		text-decoration: underline;
	}
	#mainNav li.active span {
		color:#2d3239;
		text-decoration: underline;
	}

/*Haupt Layout*/
	section,header,footer,nav { display:block;}

	.HGRcontainer{
		background-image: url("../bilder/hgr/cocteau01.jpg");
		min-height: 100%; /* 100% funktioniert nicht*/
		width: 100%;
		background-attachment: fixed;
    	background-position: center;
    	background-repeat: no-repeat;
    	background-size: cover;
	}
	.VideoHGR {
		position: absolute;
		margin:0;
/*		top: 0;
		left: 0;*/
		min-width: 100%;
		min-height: 100%;
		/*width: 100%;*/
		/*height: auto;*/
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.VideoTXT {
		color: white;
		font-size: 3em;
		font-weight: bold;
		text-align: left;
		position: relative;
		padding-top: 30%;
		/*padding-top: 200px;*/
		padding-left: 30px;
		padding-right: 30px;
		/*		top: 50%;
		left: 50%;*/
		/*transform: translate(-50%, -50%);*/
	}
	#header{
		position: fixed;
		z-index:100;
		left: 0;
		top: 0;
		height:49px;
		width:100%;
		overflow:hidden;
		padding:1.143em 0;
		/*background:#999999;*/
	}
	.onlyMOB{display: none; height: 0px;}
	.content{
		padding-top:100%!important;/*damit zu Beginn nur der 
		HGR erscheint*/
	}
	.contentVideo{
		padding-top:80%!important;/*damit zu Beginn nur der 
		HGR erscheint*/
	}
	.content_port_VS{ /* für Porfolio-Seiten */
		padding-top:0px;
	}
	.ebene{
		width:100%;
		padding-top:90px!important;
	}
	.ebene:after{
		content:"";
		display:block;
		clear:both;
	}
	.center {
		max-width:960px; /*Bestimmung der max Breite*/
		width:100%;
		background-color: white;
		margin: auto; /*auto ist wichtig, damit das Feld in der Mitte steht!*/
		padding:0 10px;
		border-radius: 50px 0 0 0;
	}
	.footer{
		padding:0.2em 0;
		text-align: center;
	}

/*Klassen für Reihen und Spalten :::::::::::::::::::::::::::::*/
	.reihen{width:100%;}
	.reihen:after{
		content:"";
		display:block;
		clear:both;
	}
	.reihen > div,
	.reihen > article{
		float:left;
		vertical-align:top;
	}
	.reihen4h1{ /*spalte für Überschriften*/
		text-align:right;
		border-bottom: 1px solid grey;
	}
	.halb{
		width:48.0%;
		margin:1.3%;
	}
	.halb4bild{
		width:49.0%;
		margin:1%;
	}
	.halb4BmU{ /*Bild mit Bildunterschrift*/
		width:48.0%;
		margin:1.3%;
		font-size: 1.4em;
		background: silver;
		color: white; 
		text-align: right;
		padding: 0;
	}
	.drittel{
		width:32%;
		/*margin:1%;*/
	}
	.zweidrittel{
		width:64%;
		margin:1%;
	}
	.drittel4bild{
		width:33.33333%;
		margin:0;
	}
	.reihen > div:first-child,
	.reihen > article:first-child{margin-left:0;}
	.fixed{
		position: fixed;
		/*height: 320px;*/
		height: auto; /*schaut beim Scrollen besser aus*/
		width:320px; /* %-Angabe funktioniert bei fixed nicht
		daher Pixel (.center hat 960 PX 1/3 davon = 320) */
		padding-top: 20px;
		border-radius: 50px 0 0 0;
		background-color: white;
		/*background-color: yellow; */
	}
	.nachfixed{
		margin-top: 320px; /*muss bleiben, da sonst der Text unter fixed verschwindet*/
		padding-left: 35px;
	}
	/*Berechnungen für Aufteilungen wichtig wegen float - nur halb und drittel fertig*/
	.drittel +.drittel +.drittel,
	.drittel4bild +.drittel4bild +.drittel4bild,
	.drittel +.zweidrittel,
	.dreiviertel + .viertel,
	.viertel + .halb,
	.halb + .halb,
	.halb4bild + .halb4bild,
	.halb4BmU + .halb4BmU,
	.vsSpalte + .vsSpalte,
	.halb + .viertel + .viertel,
	.last{
		float:right;
		margin-right:0;
	}
	.viertel{width:25%;}
	.dreiviertel{width:74.5%;}

	/*Klassen für Vorschau-STAGE aus portfolio css angepasst*/
		.vsReihe {margin-bottom: 8px}

		.vsReihe > .portSpalte {
		  padding: 0;
		}

		.vsReihe:after {
		  content: "";
		  display: table;
		  clear: both;
		}
		.vsSpalte {
		  float: left;
		}
		.vsSpalteLined {
		  float: left;
		  border-bottom: 1px solid grey;
		}
		/*NEU 2023 media*/
		.vsSpalteSub {
		  float: left;
		  margin-top: -10px;
		}
		.vsSpalteSub2 {
		  float: left;
		  margin-top: -10px;
		  width: 100%;
		}
		.vsSpalte2 {
		  float: left;
		  width: 100%;
		  margin-top: 10px;
		}
		/*ENDE NEU 2023 media*/
		

	/*ENDE: Klassen für VS-STAGE*/
	.vsBild{
		width: 100%;
		margin-top: 10px;
		cursor: pointer
	}
	/*Klassen für portfolio-Seiten*/
	.reihen4portR { /*Spalte rechtsbündig*/
		text-align: right;
		border-bottom: 1px solid grey;
		width: 100%;
	}
	.reihen4portL { /*Spalte linksbündig*/
		text-align: left;
		border-bottom: 1px solid grey;
		width: 100%;
	}
	/*ENDE: Klassen für portfolio-Seiten*/

/*ENDE: Klassen für Reihen und Spalten :::::::::::::::::::::::::::::*/


/*Teiler - zum Abstandhalten zwischen Texten - Inhalt = dypol in Morsealphabeth*/
	.teiler {
		width: 100%;
		margin-top: 50px;
		margin-bottom: 50px;
		text-align: center;
	}
	.bildunterschrift {
		margin-right: 0.3em;
	}
	.line {
		width: 100%;
		margin: 0;
		text-align: center;
		border-bottom: 1px solid grey;
	}
	.lineTop {
		width: 100%;
		margin: 0;
		text-align: center;
		border-top: 1px solid grey;
		background-color: white;
	}
	/*ENDE Teiler*/


/*Angaben für Toggle Menue +++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
	#nav-menue4index {
		position: fixed;
		z-index: 100;
		left: 0;
		top: 0;
		height: 90px;
		/*height war auto, auf 90px angepasst = Abstand, der bei
		padding-top für .ebene angegeben ist -> Effekt mit 
		eingebundenem HGR-Bild ist der, dass bem scrollen der
		Inhalt nicht durch das obere Menü fährt*/
		width: 100%;
		overflow: hidden;
		padding: 0;
		/*background: black;  /* Farbe für oberes Toggle Menü */
		background-image: url("../bilder/hgr/cocteau01.jpg");
		width: 100%;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		/*2025 für Vorschau-Video hier die background-size vorerst auf 0 stellen
			wird im unteren Script im index je nach Scrollhöhe wieder auf cover geändert,
			wenn das Video aus dem Bild gescrollt ist ;-)
		*/
		background-size: 0;
	}
	#nav-menue {
		position: fixed;
		z-index: 100;
		left: 0;
		top: 0;
		height: 90px;
		/* 90px  = Abstand, der bei
		padding-top für .ebene angegeben ist -> Effekt mit 
		eingebundenem HGR-Bild ist der, dass bem scrollen der
		Inhalt nicht durch das obere Menü fährt*/
		width: 100%;
		overflow: hidden;
		padding: 0;
		/*background: black;  /* Farbe für oberes Toggle Menü */
		background-image: url("../bilder/hgr/cocteau01.jpg");
		width: 100%;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#logo {
		color: white;
		font-size: 2em;
		/*background-color: limegreen;*/		
		display: block;
		padding-top: 0.5em;
		padding-left: 0.5em;
		text-decoration: none;
		float: left;	
	}
	/*Weite für logo extra schreiben, da sie in der Anpassung für 
	das Menü kleiner als 600 px auf 100% angepasst wird*/
	#logo {
		width: auto;
	}
	#logo2 {
		color: white;
		background-color: silver;	
		text-align: right;	
		display: block;
		height: 1.2em;
		padding: 0 1em 0 1em;
		margin: 0;
		text-decoration: none;
		float: right;	
		width: 100%;
	}
	.logoBild {
		color: white;
		background-color: grey;	
		display: block;
		width: 20px;
		float: left;
		padding: 0 1em 0 1em;
	}
	#steuerung {
		float: right;
		text-align:center;
	}
	#steuerung li {
		display:inline-block;
		/*margin:0 7px;
		list-style: none;*/
		float: left;
	}
	#steuerung a {
		color:black;
		position:relative;
		display: inline-block;
		padding:0.5em;
		text-decoration:none;
		font-size:1.2em;
		/*font-size:1.214em;
		line-height:2.35em;
		font-weight:bold;
		height: 100%;
		width: 100%;
		padding: 0.5em;*/
		background-color: white;
	}
	#steuerung a span{
		/*color:white;*/
		text-decoration:none;
		/*padding:0 1.25em;
		display:block;
		font-weight:bold;*/
	}	
	#steuerung  a:active{
		color:#2d3239;
	}
	#steuerung a:hover span {
		text-decoration: underline;
	}
	#steuerung li.active span {
		/*text-decoration: line-through;*/
	}
	.menue-button {
		display: none;
	}		
	
/* Ende Angaben für Toggle Menue +++++++++++++++++++++++++++++++++++++++*/



/*für portfolio-seiten +++++++++++++++++++++++++++++++++++++++++++++++++*/
	#portfolio-close{
		/*übernommen von #nav-menue*/
		height:40px;
		width:100%;
		overflow:hidden;
		padding:1.2em;
		background: red;
		text-align: right;
	}

/*ENDE für portfolio-seiten +++++++++++++++++++++++++++++++++++++++++++++++++*/



/* Hover-Effekt aus portfolio +++++++++++++++++++++++++++++++++++++*/
.vsSpalte {
    position: relative;
}
.vsSpalte:hover .hoverBild {
  /*cursor: pointer;*/
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.vsSpalte:hover .hoverBox {
  opacity: 0.9;
}
.hoverBild {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.hoverBox {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  background-color: white;
  top: 50%;
  left: 50%;
  width: 92%;
  height: 92%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  cursor: pointer;
  text-align: center;
}
.hoverBoxLink {
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  cursor: pointer;
  /*background-color: blue;*/
}
.hoverTXT {
  color: black;
  font-size: 16px;
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 100%;
  height: auto;
  /*cursor: pointer;*/
  text-align: center;
}
/* ENDE: Hover-Effekt +++++++++++++++++++++++++++++++++*/



}
@media all and (max-width: 1024px){
}

/*für Seitenbreite mit max 980 Pixeln; zum Testen: SCHRIFTFARBE=orange*/
/*Tablets und Handy im Hochformat*/
@media all and (max-width: 980px){
	/*.content{
		padding-top: 0%!important;
		margin-top: 0%!important;
	}*/
	.center{width:auto;}
	.fixed{width:33%;}
	#toTop{background-color: white;}
}

/*=Navigation springt in zweite Zeile; zum Testen: SCHRIFTFARBE=blau*/
@media all and (max-width: 806px){
	/*von max width 980 übernommen*/
	.center{width:auto;}
	.fixed{width:33%;}
	#toTop{background-color: white;}
	/*Ende*/
	#nav-menue{height:160px;}
	#nav-menue4index {
		height: 160px;
	}
	.ebene{padding-top: 30px;}
	/*.reihen4h1{margin-top: 110px;}*/
	.reihen4h1{margin-top: 0%!important;}
	.hoverTXT {font-size: 11px; }
	/*dazu für Vorschau-Portfolio*/
	/*.content_port_VS{padding-top: 90px;}*/
	.content_port_VS{margin-top: 0%!important;}
	.drittel, .zweidrittel{
		float:none;
		margin-left: 0; 
		margin-right: 0;
		width:100%;
	}
	/*.backlink{
		width: 100%; 
		background-color: white; 
		bottom: 0; 
		padding: 5px 0;
	}*/
	.fixed{
		position: relative;
		float: none;
		width: 100%;
		height: auto;
		padding-top: 0;
	}
	.nachfixed{
		float: none;
		width: 100%;
		margin-top: 0;
		padding-top: 0;
		padding-left: 0px;
	}
	.onlyMOB {
		display: block;
	    background-image: url("../bilder/hgr/cocteau01.jpg");
	    /* volle Höhe: height: 100%; funktioniert nicht */
	    height: 590px; 
	    background-attachment: fixed;
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: cover;
	    padding-top:100%!important;/*damit zu Beginn nur der 
		HGR erscheint*/
	}
	/*body{color: blue;}*/
}


/*Toggle Menue*/
/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 650px 
Schriftfarbe rot*/
/*@media only screen and (max-width:650px) { ... 10/2018 Wert für Breite erhöht*/
@media only screen and (max-width:806px) {	
	.menue-button {
		display: block;
	}
	#nav-menue{
		height: auto;
		/*min-height: 20px;*/
		background-color: black;
		background-image: none;
	}
	#nav-menue4index {
		height: auto;
		/*min-height: 20px;*/
		background-color: black;
		background-image: none;
	}
	.HGRcontainer{
		background-image: none;
	}
	.onlyMOB {
		display: block;
	    background-image: url("../bilder/hgr/cocteau01.jpg");
	    /* volle Höhe: height: 100%; funktioniert nicht */
	    height: 590px; 
	    background-attachment: fixed;
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: cover;
	    padding-top:100%!important;/*damit zu Beginn nur der 
		HGR erscheint*/
	}

	.content{
		padding-top: 0%!important;
	}

	.menue-button {
		background-color: black;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		padding: 1em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}
	.menue-button:hover {
		color: black;
		background: #444444;
	}
	#logo {
		width: 100%;
	/* 	color: red; */
	}
	#logo {
		padding: 0 0.5em;	
	}
	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}
	#steuerung a {
		color:white;
		background-color: transparent;
	}	
	#steuerung li {
		width: 100%;
		text-align: left;
		border-bottom: 1px solid silver;
	}	
	/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
	#nav-menue:target #steuerung {
		display: block;
		background: black;
	}
	#nav-menue4index:target #steuerung {
		display: block;
		background: black;
	}
	/* ausblenden des Menü-Buttons zum Öffnen - somit wird der zum Schließen sichtbar */
	#nav-menue:target .menue-button-beschr-open {
		display: none ; 
	}
	#nav-menue4index:target .menue-button-beschr-open {
		display: none;
	}
	/*Ende css Toggle Menue*/
}



/* 4 mobiles: Navigation verschwindet und wird zum Toggle Menue; 
zum Testen: SCHRIFTFARBE=grün*/
@media all and (max-width: 550px){ 
	.onlyMOB {
	    background-image: url("../bilder/hgr/cocteau01.jpg");
	    height: 590px; 
	    padding-top:0%!important;/*damit der HGR richtig erscheint*/
	}
	.content{
		padding-top: 0%!important;
	}
	.content_port_VS{padding-top: 0px;}
	#nav-menue{
		min-height: 80px; 
		background-color: black;
		background-image: none;
	}
	nav-menue4index {
		min-height: 80px;
		background-color: black;
		background-image: none;
	}
	/*
	#logo {
		color: blue;
	}  */
	/*nur noch eine spalte*/
	.reihen > div, .reihen > article {
		float: none;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
	.reihen4h1{
		margin-top: 30px;
	}
	.halb4BmU{ /*Bild mit Bildunterschrift*/
		margin-bottom: 30px;
	}
	.hoverTXT {font-size: 16px; }
	/*Links als Button im Text*/
	/*.hoverBoxLink{display: none;}*/
	.button {
		margin-top: 20px;
		margin-bottom: 20px;
		text-align: center;
	}

	#zurückBTN {
	  bottom: 10px;
	  left: 10px;
	}
	#toTop {
	  bottom: 10px;
	  right: 10px;
	}
}