/* css/screen.css Standart Styles für Bildschirmdarstellung*/ 
/* ----- Index -----
 - Dokument
 - Typo
 - Spalte 1
    - Video
    - Kontaktdaten
    - Name / Überschrift
 - Spalte 2
    - Kurzprofil
    - Berufspraxis / Schulbildung
 - Spalte 3
    - Kreisbalken
    - Führerschein
 - Popups und Detailtexte
*/

/* ----- Dokument -----*/
/* Hintergrund und Standart Schrift festlegen */
body{
  min-height: 100%;
  background: #216477;
  background-image: url("../img/bg.png");
  background-size: 1000px 1000px;
  color: #fff;
  font: clamp(8px, 1.083vw, 13px) Helvetica, Arial, sans-serif;  
}
/* Hauptframe positionieren und Schatten anlegen */
#main{
    position: absolute;
    background:#333 bottom left no-repeat;
    -webkit-box-shadow: inset clamp(96px, 24.166vw, 290px) 0px 0px 0px rgba(0,0,0,1), clamp(9px, 2.5vw, 30px) clamp(9px, 2.5vw, 30px) clamp(9px, 2.5vw, 30px) #147;
    -moz-box-shadow: inset clamp(96px, 24.166vw, 290px) 0px 0px 0px rgba(0,0,0,1), clamp(9px, 2.5vw, 30px) clamp(9px, 2.5vw, 30px) clamp(9px, 2.5vw, 30px) #147;
    box-shadow: inset clamp(96px, 24.166vw, 290px) 0px 0px 0px rgba(0,0,0,1), clamp(9px, 2.5vw, 30px) clamp(9px, 2.5vw, 30px) clamp(9px, 2.5vw, 30px) #147;      
}

/* -----Typo ----- */
/*Schriftart für Überschriften laden*/
@font-face { 
font-family: "Mouse"; 
src: url("../font/MouseMemoirs-Regular.ttf"); 
}

/*Überschrift für den Namen*/
h1 {
    font-family: Mouse, Helvetica, Arial, sans-serif;
    font-size: clamp(25px, 4.583vw, 55px);
    font-weight:bold;
    margin-bottom: 0px;    
}
/*Überschrift mit Mouse Font*/ 
h2 {
  font-family: Mouse, Helvetica, Arial, sans-serif;
  text-align:left;
  font-size: clamp(15px, 2.083vw, 25px);
  margin-bottom:-0px;
  margin-top: clamp(3px, 0.833vw, 10px);
}
/*Namen von Arbeitgebern und Schulen*/
h3 {
  margin-bottom: clamp(-18px, -1.5vw, -5px);
}
/*Berufsbezeichnungen*/
h4 {
  margin-top: clamp(5px, 1.5vw, 18px);
  margin-bottom: clamp(1px, 0.333vw, 4px);
}
/*Links*/
a:link, a:active, a:visited{
 text-decoration: none;
 font-weight:bold;
 color:#fff;
}

a:hover{
 color:#216477;
 text-decoration: underline;
}
/*Absätze*/
p {
  margin: clamp(13px, 3.333vw, 40px) 0;
}

/* ----- Spalte 1 ----- */
/*Linke Spalte*/

/* Video */
#video{
    object-fit: cover;
    width: clamp(96px, 24.166vw, 290px);
    height: clamp(243px, 61.25vw, 735px);
    position: absolute; 
    top: 0; 
    left: 0;
    z-index: 0;     
}
/* Rauschen Overlay beim Zurückspulen über das Video legen*/
#distortionEffect{
    position:absolute;        
    width: clamp(96px, 24.166vw, 290px);
    height: clamp(243px, 61.25vw, 735px);
    top: 0; 
    left: 0;
    z-index: 1;
    background: rgba(0,0,0,0.3);
    background-image: url('../img/distortioneffect.png');
    background-position: 0% 0%;
    background-repeat: repeat;  
    visibility:hidden;
}
/* Rückspuleffekt Overlay über dem Video, 
mit Schatten als Vignette und transparentem weißem Hintergrund als Entsättigung für das Video*/
#rewindEffect{
    position:absolute;
    width: clamp(96px, 24.166vw, 290px);
    height: clamp(243px, 61.25vw, 735px);
    top: 0; 
    left: 0;
    z-index: 2;
    background: rgba(255,255,255,0.2);
    background-image: url('../img/rewindeffect.png');
    background-position: 0% 100%;
    -webkit-box-shadow: inset 0px 0px clamp(8px, 2.083vw, 25px) clamp(8px, 2.083vw, 25px) rgba(0,0,0,0.9); 
    box-shadow: inset 0px 0px clamp(8px, 2.083vw, 25px) clamp(8px, 2.083vw, 25px) rgba(0,0,0,0.9);      
    visibility:hidden;     
}
/* Rückspulicon*/
#rewindEffect img{
    position:absolute;
    opacity: 0;
    visibility:visible;
    top: clamp(115px, 29.166vw, 350px); 
    left: clamp(39px, 10vw, 120px);
    width: clamp(19px, 5vw, 60px);    
}
/* Foto für Druckversion ausblenden */
.photo, .photo img{
 display:none;
}
/*Kontaktdaten positionieren*/
.contactbox{
 text-shadow:none;
 color:#000;
 visibility:visible;
 opacity: 0;  /*durchsichtig, für Animation durch JS */ 
}

/*Icons vor Kontaktdaten*/
.contacttext img{
 height: clamp(10px, 1.25vw, 15px);
 width: clamp(10px, 1.25vw, 15px); 
 margin-top:clamp(2px, 0.416vw, 5px); 
}

/*Text für Kontaktdaten*/
.contacttext div{
    margin-top:clamp(-20px, -1.666vw, -12px);
    padding-left:clamp(9px, 2.333vw, 28px);
    white-space: nowrap;
    hyphens: none;
}

/* Links als Text stylen */
.contacttext a:link, .contacttext a:active, .contacttext a:visited{
 text-decoration: none;
 color:#000;
}
/*Link hover */
.contacttext a:hover{
 color:#216477;
 text-decoration: none;
}

/*Name positionieren*/
.namebox{
 text-align:center;
}
/*Titel*/
.worktitle{
 font-size: clamp(8px, 1.5vw, 18px);
}
/*Pik Zeichen vor und nach dem Titel*/
.worktitle:before{
 content: "♠";
 padding-right:clamp(2px, 0.416vw, 5px);
 font-size: clamp(8px, 1.5vw, 18px);
 color:#fff;
}

.worktitle:after{
 content: "♠";
 padding-left:clamp(2px, 0.416vw, 5px);
 font-size: clamp(8px, 1.5vw, 18px);
 color:#fff;
}

#column2{
    display:none; /*ausblenden, für Animation durch JS */ 
}
/*Kurzprofil*/
.textbox{
 margin-bottom:clamp(13px, 3.333vw, 40px);
 text-align:justify;
}

.textbox h2 {
  margin-bottom: clamp(5px, 1.25vw, 15px);
}

/*Berufspraxis / Schulbildung*/
.tablebox{
 margin-bottom:clamp(12px, 3.333vw, 40px); 
}

.table{
 margin-bottom:clamp(6px, 1.666vw, 20px);
}
/*Datumsfeld*/
.tabledate{
float:left;
width: clamp(18px, 4.1666vw, 50px);
height:100%
border-top:1px solid #444;
border-bottom:1px solid #444;
text-align:center;
vertical-align:center;

}
/*Text hinter Datum eingerückt um die Breite des Datums */
.tabletext{
    text-align:justify;
    margin-left: clamp(27px, 6.666vw, 80px); 
}

/* ----- Spalte 3 ----- */
/*Kreisbalken und Führerschein positionieren*/
#column3{
    display:none; /*ausblenden, für Animation durch JS */   
}
/*Anordnung der einzelnen Kreisbalken*/
.circle{
  width: clamp(33px, 8.333vw, 100px);
  height: clamp(16px, 4.166vw, 50px);
  margin: clamp(1px, 0.5vw, 6px) clamp(1px, 0.5vw, 6px) clamp(6px, 1.666vw, 20px);  
  display: inline-block;
  position: relative;
  text-align: center;
}
/* Canvas für die eigentlichen Balken */
.circle canvas {
  vertical-align: middle;
}
/*Namenstag der Kreisbalken positionieren und formatieren */
.circle a, .circle a:hover, .circle a:active, .circle a:visited  {
  position: absolute;
  top: 50%;
  left: calc(50% - clamp(1px, 0.5vw, 6px));  
  transform: translate(calc(-50% + clamp(1px, 0.5vw, 6px)), -50%);  
  width: clamp(37px, 9.333vw, 112px);
  line-height:clamp(8px, 1.166vw, 14px);  
  text-align: center;
  font-size: clamp(8px, 1.166vw, 14px);
  font-weight:bold;
  color:#fff;
  text-decoration:none;
  background:rgba(51, 51, 51, 0.75); /*Texthintergrund für bessere Lesbarkeit */
  text-shadow:
       1px 1px 0 #333,
     -1px -1px 0 #333,  
      1px -1px 0 #333,
      -1px 1px 0 #333,
       1px 1px 0 #333; /*Außenlinie für bessere Lesbarkeit*/ 
}

.circle div{
    hyphens: auto;
    padding: clamp(3px, 0.833vw, 10px);
    background:#333;
    text-align:justify;
    border:1px solid #000; 
    display:none;
    position:absolute;
    z-index:10000;
    box-shadow: clamp(3px, 0.833vw, 10px) clamp(3px, 0.833vw, 10px) clamp(3px, 0.833vw, 10px) #000;
    font-weight:normal;
    color:#fff;
    line-height: clamp(8px, 1.166vw, 14px);
    font-size: clamp(8px, 1.166vw, 14px); 
}
/*Führerschein */
.licence{
  text-align:justify;
}

/* ----- Popups mit Detailtexten ----- */

/* Webseite ausblenden */
#popoverblock {
    background: rgba(0,0,0,0.75);
    width: 100%;
    height: 100%;
    margin:0 auto;
    position: fixed;     
    top: 0px;
    bottom: 0px;
    left: 0px;
    right:0px; 
}
/* Ladeanimation für Preload */
#preload{
    position: absolute;     
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);    
    display:block;
    font-family: Mouse, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 7.5vw, 90px);
    font-weight:bold;
    text-align:center; 
}
/* Pop Up Div */
#popover{
    hyphens: auto;
    background:#333;
    position: absolute;
    width: clamp(360px, 66.666vw, 800px);     
    left:50%; 
    border: 1px solid #000;
    display:none; 
    box-shadow: clamp(3px, 0.833vw, 10px) clamp(3px, 0.833vw, 10px) clamp(3px, 0.833vw, 10px) #000;
    padding: clamp(8px, 2.083vw, 25px);
    padding-top: clamp(4px, 1.25vw, 15px);
}
/* X zum Schließen des Popups */
#closepop{
    position: absolute;
    right:clamp(3px, 0.833vw, 10px);
    top:clamp(1px,0.416vw, 5px);
}

#closepop a:hover{
 color:#216477;
 text-decoration: none;
}
/* Inhalt des Popup */ 
.popcont{
    display:none;
    text-align:justify;
}
/*Aktiver Popuptext */
.popcontactive{
    display:block;
}
/* Hashtags */
.hashtags{
    color:#ddd;
    font-style:italic;
}