/* css/screen_responsive.css Styles für variable Bildschirmdarstellung im Hochformat oder bei geringer Auflösung*/ 
/* ----- Index -----
 - Dokument
 - 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 { 
  overflow:auto;        
}

/* Hauptframe positionieren und Schatten anlegen */
#main {
    width: clamp(384px, 96.666vw, 1160px);        
    min-height: clamp(243px, 50vw, 95vh);   
    top: 2vw;
    margin: auto;
}

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

#column1{    
    float:left; 
    width: clamp(96px, 24.166vw, 290px);
    height: clamp(243px, 61.25vw, 735px);
    display:none;
    z-index: 3;
    position:relative;    
    cursor:pointer;    
    -webkit-box-shadow: inset 0px clamp(-200px, 16.666vw, -66px) clamp(33px, 8.333vw, 100px) clamp(-100px, -8.333vw, -33px) rgba(0,0,0,0.6);
    -moz-box-shadow: inset 0px clamp(-200px, 16.666vw, -66px) clamp(33px, 8.333vw, 100px) clamp(-100px, -8.333vw, -33px) rgba(0,0,0,0.6);
    box-shadow: inset 0px clamp(-200px, 16.666vw, -66px) clamp(33px, 8.333vw, 100px) clamp(-100px, -8.333vw, -33px) rgba(0,0,0,0.6);         
}
 /*Kontaktbox*/
.contactbox{
 left: clamp(9px, 2.5vw, 30px);
 position: absolute;
}


/* Namen positionieren */
.namebox{
 position:absolute;
 top: clamp(188px, 47.5vw, 570px);
 width:100%;
 left:50%;         
 transform: translate(-50%);
}
/* ----- Spalte 2 ----- */
/*Hauptteil positionieren*/
#column2{
    width: clamp(268px, 67.5vw, 810px);    
    float:left;
    margin-left: clamp(9px, 2.5vw, 30px);
    margin-right: clamp(9px, 2.5vw, 30px);
}

/* ----- Spalte 3 ----- */
/*Kreisbalken und Führerschein positionieren*/
#column3{
    position:static;    
    width: clamp(288px, 72.5vw, 870px);  
    float:right;    
}
/*Block für Kreisbalken - Breite ist Grundlage für die Größe der Kreisbalken*/
.circleblock{
    float:left;    
    width: clamp(96px, 24.166vw, 290px); 
}
/*Titel für Kreisbalken einrücken*/
.circletitle{
    padding-left: clamp(9px, 2.5vw, 30px);
}

.circletitle h2{
    margin-top:0px;
}
/*Feld für die Anordnung Kreisbalken*/ 
.circles {
  margin-top:clamp(3px, 0.833vw, 10px);
  width: clamp(100px, 19.5vw, 234px);
  margin-left: (9px, 2.333vw, 28px);
  margin-right: (9px, 2.333vw, 28px);    
}
/*Kreisbalken Linksbündig */
.circle {
  float:left;
}
/*Namenstag der Kreisbalken Umbruch verhindern */
.circle a, .circle a:hover, .circle a:active, .circle a:visited  {
  hyphens: auto;
}
/*Tooltipp */
.circle div{
    width: clamp(115px, 29.166vw, 350px);
}
/*Tooltipps links oben positionieren*/
.cirle_1 div{
    margin-left: clamp(-90px, -7.5vw, -29px);
    margin-top:clamp(-70px, -5.833vw, -23px);
}
/*Tooltipps rechts oben positionieren*/
.cirle_2 div{
    margin-left: clamp(-210px, -17.5vw, -69px);
    margin-top:clamp(-70px, -5.833vw, -23px);
}
/*Tooltipps links unten positionieren*/
.cirle_3 div{
    margin-left: clamp(-90px, -7.5vw, -29px);
    margin-top:clamp(-70px, -5.833vw, -23px);
}
/*Tooltipps rechts unten positionieren*/
.cirle_4 div{
    margin-left: clamp(-210px, -17.5vw, -69px);
    margin-top:clamp(-70px, -5.833vw, -23px);   
}
/*Führerschein */
.licence{ 
 margin-top: clamp(82px, 16vw, 180px);
 margin-left: clamp(9px, 2.5vw, 30px);
 margin-bottom: clamp(9px, 2.5vw, 30px);
 font-size: clamp(8px, 1.083vw, 13px);
}
/*Popup Position*/
#popover {  
    top: clamp(25px, 10vh, 375px);         
    transform: translate(-50%);     
}