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

/*//Farben
//ROT:  #F20D0D
//Hellgrau: #B9BBC1
//dunkelgrau: #3C3C3C*
//black
//white/


//bildgrößen: breite 670px/

h1 18px noto
h2 32px (worte) ubuntu
h3 14/18 700 noto
h4 18/22 300 noto
h5 12/20 500 noto sans hk
h6 10     noto
p  14/18 700


/* Reset * * * * * * * * */
*{
	margin: 0;
	padding: 0;	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}



html{	
	font-size: 100%; /* Browserstandard: 16px */
	height:100%;
	}


img{
	max-width:100%;

	}


body{
	font-family: 'Noto', 'Helvetica', 'Arial', sans-serif;
	line-height: 1.3;
	text-transform: lowercase;
	color:black;
	height:100%;
	background:white;
	}

#wrapper{
	width:100%;
	height:100%;
	margin:0 auto;
	background:white;
	}
	
#wrapper-wort{
	width:100%;
	height:100%;
	margin:0 auto;
	background:white;

}



#overlay-background{
position:fixed;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.5);
opacity:0.9;
}


#overlay{
position:absolute;
top: 20%;
left: 10%;
width:80%;
height:60%;
text-align:left;
background: black;
padding:7%;
}

.overlay-text{
font-family: 'Noto Sans HK', 'helvetica', 'Arial', sans-serif;
font-weight:300;
font-size:24px;
font-size:1.5em;
font-size:150%;
color:white;
text-transform: lowercase;
letter-spacing:0.5px;
word-spacing:1px;
}



.overlay-text a{
color:white;
text-decoration:none;

}




.closebtn a{
font-family: 'Noto Sans', 'helvetica', sans-serif;
font-weight:200;
color: white;
float: right;
font-size:30px;
font-size:1.876em;
font-size:187.6%;
line-height:20px;
line-height:1.25em;
line-height:125%;
cursor: pointer;
z-index: 0;
position:absolute;
right:30px;
top:20px;
text-decoration:none;
  
}




/* typografie* * * * * * * * */

h1{
font-family: 'Noto Sans', 'helvetica', sans-serif;
font-weight:700;
text-transform:lowercase;
letter-spacing: 2px;
word-spacing: 2px;
font-size: 18px;
font-size: 1.125rem;
font-size: 125%;
color:black;
z-index:1!important;
}


h1 a{color:black;
text-decoration: none;}
h1 a:hover{color:#B9BBC1}


.h1-alt{
font-size:16px;
font-size:1em;
font-size:100%;
text-transform:uppercase;
letter-spacing: 2px;



}

h2{
	font-family: 'Ubuntu Mono', monospace;
	font-size: 32px;
	font-size: 2rem;
	font-size: 200%;
	text-transform:uppercase;
	letter-spacing: 10px;
	color:black;
	text-decoration:none;
	}
	
	
.wort a{
text-decoration: none;
}

.wort h2 a:hover{
color:#B9BBC1;
text-decoration:none;
}


h2 a:hover{
color:#B9BBC1;
text-decoration: none;
letter-spacing: 10px;
}




h2 a:visited{ 
color:#F20D0D;
}



h3{
	font-family: 'Noto Sans', helvetica, sans-serif;
	font-weight:700;
	font-size: 14px;
	font-size: 0.875rem;
	font-size: 87.5%;
	line-height:18px;
	line-height:1.125rem;
	line-height:112.5%;
	text-transform:lowercase;
	}


.fragen{

color:red;
letter-spacing:0px;
font-weight:700;
	
}


#text-03 h3{

padding-bottom:3px;


}

#text-06 h3{

padding-bottom:3px;
line-height:125%;

}

h4{
	font-family: 'Noto Sans', 'helvetica', sans-serif;
	font-weight:300;
	font-size: 18px;
	font-size: 1.125rem;
	font-size: 112.5%;		
	line-height:22px;
	line-height:1.375em;
	line-height:137.5%;
	text-transform:lowercase;
	padding-top: 2px;
	padding-bottom: 3px;

	}


h4 a{
text-decoration:underline;
}



h5{	
font-family: 'Noto Sans HK', 'helvetica', sans-serif;
font-weight:500;
letter-spacing:0.5px;
font-size:12px;
font-size:0.75em;
font-size:75%;
line-height:20px;
line-height:1.25em;
line-height:125%;

}


.grau{
color:#3C3C3C;
}

.grau a{
color:#3C3C3C;
}

.grau a:hover{
color:red;
}

h6{
	color:black;
	font-family: 'Noto Sans', 'helvetica', sans-serif;
	font-size:10px;
	font-size:0.625em;
	font-size:62.5%;
	}


h6 a{color:black; 
text-decoration:underline;
}

h6 a:hover{color:#F20D0D;}


p{
	font-family: 'Noto Sans', 'helvetica', sans-serif;
	font-weight:700;
	font-size: 14px;
	font-size: 0.875rem;
	font-size: 87.5%;
line-height:20px;
line-height:1.25em;
line-height:125%;

	text-transform:lowercase;
	}


/* links * * * * * * * * */
a {
  color: black;
  text-decoration: underline;
  }

a:hover{
color:#B9BBC1;
}





/*                                L A Y O U T            * * * * * * * * */
/* header* * * * * * * * */

header{
	width:100%;
	height:10%;
	margin:0 2% 0 25px;
	padding:14px 0 0 0px;
	z-index: 1!important

	}

#header-mobile{
display:none;
}

#header-screen{
display:block;
}

#menu{
	position:fixed;
	top:10px;
	right:2%;
	cursor: pointer;
	z-index: 1;
	}

#menu .material-icons{
color:black;
font-size: 52px;
font-size: 3.25em;
}

#menu .material-icons:hover{
color:#B9BBC1;
}

#close{
	position:fixed;
	top:12px;
	right:2%;
	cursor: pointer;
	z-index: 1;
	color:white;
	}
	
#close:hover{
color:#B9BBC1;
}

#close-wort a{
	position:absolute;
	top:12px;
	right:2%;
	cursor: pointer;
	z-index: 1;
	text-decoration:none;

	}




/* navigation* * * * * * * * */
#navigation{
	display:none;
	background:#F20D0D;
	z-index: 1000 !important;
	width:100%;
	height:100%;
	margin:0 auto;
	position:absolute;
	top:0%;
	left:0%;
	}
	
	nav ul{
	margin:40px 0 0 0;
	}


nav ul li:hover {
	background:#B9BBC1;
	width:100%;
	margin:0 auto;
		border-bottom:solid 1px #F20D0D;
	border-top:solid 1px #B9BBC1;
	}

nav ul a{
text-decoration:none;
}

/* navigation punkte* * * * * * * * */

li{
	font-family: 'Noto Sans', 'helvetica', sans-serif;
	font-weight:500;
	text-transform:lowercase;
	letter-spacing: 0px;
	word-spacing: 0px;
	font-size: 18px;
	padding:20px 20px 20px 5%;
	border-bottom:solid 1px #B9BBC1;
	list-style:none;
	
	
	
	}	


li a{
	padding:0px 40% 0 0 ;
	color:white;


	}

li a:hover{
	font-weight: 500;
	color:white;
	margin:0 auto;

	}





/* section allgemein * * * * * * * * */

section{
	width:100%;
	background:white;
	margin:0 0%;
	margin-top:30px;
	}

#leerraum{
height:200px;
background:white;
}



#white-space{
height:50px;
}

.white-space{
height:25px;
}

.top{
width:100%;
height:40px;
background:white;

position:fixed;
bottom:0px;
margin:0px;
padding: 2px 0 0 8px;
opacity: 1;
z-index: 1;

}


.nachoben h6{
color:black;
padding:4px 0 0 0;
text-align: center;
font-size:14px;
font-size:0.875em;
font-size:87.5%;

}


.nachoben a{
text-decoration:none;
}


/* section indexseite * * * * * * * * */


/*.wort{
	width:125px;
	height:70px;
	padding:0px 0 0px 0px;
	margin:0 auto;
	background-color:white;
	display:inline-block;
	}*/
	
	.wort{
	width:145px;
	height:70px;
	padding:0px 0 0px 0px;
	margin:0 1%;
	background-color:white;
	display:inline-block;

	}
	
	
	.wort h2{
	font-size: 40px;
	font-size: 2.5rem;
	font-size: 250%;
		letter-spacing:10px;
		text-align:center;
	
	}
	
	
	.wort a:hover{
	-webkit-column-rule: #B9BBC1;
	-moz-column-rule: #B9BBC1;
	-o-column-rule: #B9BBC1;
	column-rule: #B9BBC1;
	}


/* seiten WORTE * * * * * * * * */


.bilder{
	background:none;
	width:90%;
	float: right;
	text-align:right;
	position:absolute;
	top:0px;
	right:8%;
	
}



#legende{
	width:230px;
	height:auto;
	background:none;
	display:inline;
	position:fixed;
	top: 14px;
	left:5%;
	z-index: 1;

}


/* Plus-Legende Normal, sieben Zeilen Textlegende* * * * * * * * */

#legende-plus{
display:none;
	width:230px;
	height:auto;
	background:none;
	position:fixed;
	top: 160px;
	left:5%;
	z-index: 1;
}


.plus{
color:black;
padding:5px 0 0 0;
animation: pulse 5s infinite;
}




@keyframes pulse {
  0% {
    color: #B9BBC1;
  }
  
  
   25% {
    color: black;
  }

  50% {
    color: #B9BBC1;
  }
 
  
   75% {
    color: black;
  }

  100% {
    color: #B9BBC1;
  }


}

.plus:hover{
color:#B9BBC1;}


.minus{
display:none;
color:black;
padding:5px 0 0 0;

}

/* Plus-Legende vier Zeilen * * * * * * * * */

#legende-plus-oben{
display:none;
	width:230px;
	height:auto;
	background:none;
	position:fixed;
	top: 125px;
	left:5%;
	z-index: 1;
}




.plus-oben{
color:black;
padding:5px 0 0 0;
animation: pulse 5s infinite;
}



@keyframes pulse {
  0% {
    color: #B9BBC1;
  }
  
  
   25% {
    color: black;
  }

  50% {
    color: #B9BBC1;
  }
 
  
   75% {
    color: black;
  }

  100% {
    color: #B9BBC1;
  }

}

.plus-oben:hover{
color:#B9BBC1;}


.minus-oben{
display:none;
color:black;
padding:5px 0 0 0;

}


/* Plus-Legende fünf Zeilen * * * * * * * * */

#legende-plus-fuenf{
display:none;
	width:230px;
	height:auto;
	background:none;
	position:fixed;
	top: 130px;
	left:5%;
	z-index: 1;
}




.plus-fuenf{
color:black;
padding:5px 0 0 0;
animation: pulse 5s infinite;
}



@keyframes pulse {
  0% {
    color: #B9BBC1;
  }
  
  
   25% {
    color: black;
  }

  50% {
    color: #B9BBC1;
  }
 
  
   75% {
    color: black;
  }

  100% {
    color: #B9BBC1;
  }

}

.plus-fuenf:hover{
color:#B9BBC1;}


.minus-fuenf{
display:none;
color:black;
padding:5px 0 0 0;

}


/* Plus-Legende sechs Zeilen * * * * * * * * */

#legende-plus-sechs{
display:none;
	width:230px;
	height:auto;
	background:none;
	position:fixed;
	top: 145px;
	left:5%;
	z-index: 1;
}




.plus-sechs{
color:black;
padding:5px 0 0 0;
animation: pulse 5s infinite;
}



@keyframes pulse {
  0% {
    color: #B9BBC1;
  }
  
  
   25% {
    color: black;
  }

  50% {
    color: #B9BBC1;
  }
 
  
   75% {
    color: black;
  }

  100% {
    color: #B9BBC1;
  }

}

.plus-sechs:hover{
color:#B9BBC1;}


.minus-sechs{
display:none;
color:black;
padding:5px 0 0 0;

}




/* Seite Veröffentlichungen * * * * * * * * */


.test a{
  scroll-behavior: smooth;
}



#publikationen{
padding:0 0 0 25px;
}


#texte{
padding:0 0 0 25px;
float:left;
}


hr{
background:black;
height:5px;
border: none;
position:absolute;
left:25px;
right:2.5%;
}



.alles-oeffnen{
margin:18px 0 0 0;
display:block;
float:left;
}

.alles-schliessen{
margin:18px 0 0 0;
display:none;
float:left;




}
.manuskript{
float:right;
text-align:left;
width: 70%;
padding:20px 7% 0 0;
}

.manuskript hr{
float:right;
height:1px;
margin:-10px 0 20px 0;
}

	/*//fortführende texte*/
#text-01{	
display:none;
}


.btn-weiterlesen{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}


.btn-schliessen{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}

	/*//fortführender text 02  bitte folgenden abschnitt kopieren und weiter nummerieren*/


#text-02{
display:none;
}


.btn-weiterlesen-text-02{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}



.btn-schliessen-text-02{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}




#text-03{
display:none;
}

.btn-weiterlesen-text-03{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}



.btn-schliessen-text-03{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}


#text-04{
display:none;
}

.btn-weiterlesen-text-04{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}



.btn-schliessen-text-04{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}


#text-05{
display:none;
}

.btn-weiterlesen-text-05{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}



.btn-schliessen-text-05{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}




#text-06{
display:none;
}

.btn-weiterlesen-text-06{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}



.btn-schliessen-text-06{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}




#text-07{
display:none;
}

.btn-weiterlesen-text-07{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}



.btn-schliessen-text-07{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}




#text-08{
display:none;
}

.btn-weiterlesen-text-08{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}



.btn-schliessen-text-08{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}



#text-10{
display:none;
}

.btn-weiterlesen-text-10{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}



.btn-schliessen-text-10{
color:#F20D0D;
font-family: 'Ubuntu Mono', monospace;
font-size:13px;
font-size:0.813em;
font-size:81.3%;
padding:10px 0 0 0;

}



/* section victor malsy portraitseite * * * * * * * * */




#portrait{
height:100%;
width:100%;
position:absolute;
left:0;	



}


#legende-portrait{
	width:45%;
	height:auto;
	background:white;
	opacity:0.9;
	display:inline;
	position:absolute;
	top:1%;
	left:-0px;
	padding:2% 2% 2% 25px;
	z-index: 1;
}






/*

#legende-portrait{
	width:96%;
	margin:10px 0 0 0;
	display:block;
	position:absolute;
	left:2%;
	right:2%;
}
	
	*/
	



#legende-portrait h3{
	font-size:18px;
	line-height:24px;
	font-weight:300;


}

#legende-portrait p{
	font-family: 'Noto Sans', 'helvetica', sans-serif;
	font-weight:700;
	font-size: 14px;
	line-height:18px;
	text-transform:lowercase;
	}





/* section seite kontakt * * * * * * * * */


#kontakt{
background:none;
margin:30px 0% 0 25px;
}




/* footer * * * * * * * * */

footer{
	width:90%;
	height:22px;
	margin:0 auto;

	}


#impressum{
display:none;
	transform:rotate(270deg);
	transform-origin: left bottom;
	position:fixed;
	left:2%;
	bottom:20%;

}


#impressum h6 a{
	color:#3C3C3C;
	text-decoration: none;
	font-size:9px;
	letter-spacing: 15px;
	text-transform:uppercase;
}


#impressum h6 a:hover{
	color:#B9BBC1;
		font-weight:700;

	
	}



/* section seite impressum datenschutz * * * * * * * * */



#impressum-datenschutz{
background:none;
margin:30px 0% 0 25px;
width:480px;
}



.test {
}
.grau {
}