
* {
    box-sizing: border-box;
}

@font-face {
    font-family: "ExtraLight";
    src: url(Schriften/MADECarvingSoftPERSONALUSE-ExtraLight.ttf) format('truetype'),
         url(Schriften/MADECarvingSoftPERSONALUSE-ExtraLight.woff) format('woff'),
         url(Schriften/MADECarvingSoftPERSONALUSE-ExtraLight.woff2) format('woff2');
  }
  @font-face {
    font-family: "Light";
    src: url(Schriften/MADECarvingSoftPERSONALUSE-Light.ttf) format('truetype'),
         url(Schriften/MADECarvingSoftPERSONALUSE-Light.woff) format('woff'),
         url(Schriften/MADECarvingSoftPERSONALUSE-Light.woff2) format('woff2');
  }
  @font-face {
    font-family: "Bold";
    src: url(Schriften/MADECarvingSoftPERSONALUSE-Bold.ttf) format('truetype'),
         url(Schriften/MADECarvingSoftPERSONALUSE-Bold.woff) format('woff'),
         url(Schriften/MADECarvingSoftPERSONALUSE-Bold.woff2) format('woff2');
  }
  
  @font-face {
    font-family: "Thin";
    src: url(Schriften/MADECarvingSoftPERSONALUSE-Thin.ttf) format('truetype'),
         url(Schriften/MADECarvingSoftPERSONALUSE-Thin.woff) format('woff'),
         url(Schriften/MADECarvingSoftPERSONALUSE-Thin.woff2) format('woff2');
  }

:root {
    --Anz_Cells: 9;
    --Anz_Col: 2;
    --Anz_Row: calc(--Anz_cells / --Anz_Col);

    --col_backgr_normal:RGB(50,50,70);
    --col_backgr_dark:#243848;
    --col_lightblue:#41DCE1;
    --col_white:#FFFFFF;  
    --col_orange:RGB(190,80,20);
    --col_white2: rgba(255, 255,255, 0.75);
}

 @media (max-width: 1150px) {

    
        .IT{
            display:none !important;
        }

        .Sprachen{
        display:none !important;
        }
    
    .Absender {
        display:flex;
        flex-direction: column !important;
    }

 }

/* Fixierter Header */
.fixed-header {
    position: fixed; /* Fixiert den Header */
    display:flex;
    flex-direction: row;
    justify-content:space-around;
    align-items: center;
    top: 0px; /* Startet oben */
    margin-left: 5%; /* Links ausgerichtet */
    width: 90%; /* Volle Breite */

    height:420px; 

    padding: 5x; /* Innenabstand */
    /* padding-left: 40px;  */

    background-color:var(--col_backgr_normal); /* Hintergrundfarbe */
    color: var(--col_white); /* Textfarbe */

    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Schatten */
    z-index: 2; /* Über anderen Elementen */

    border: 3px solid var(--col_white);
}

.kopf{
    display:flex;
}


.headerWright {
    background-color:var(--col_backgr_normal);
    height:calc(var(--hoheHead) - 4px);

    /*  width: 50%;  */
    /*background-color:red;*/
    text-align: center;

}

.Pfeil_Foto {
    display:block;  
    /* max-width: 50%;  */
    /* max-height: 60px;  */
    height:100%;
    padding: 10% 10% 10% 10%;
    object-fit: contain;    /*contain  , alternativ cover, da schneidet er aber ab   */ 
}

.Pfeil_Foto:hover {
    cursor: pointer;
}

.headerFoto2 {
    position:fixed;
    display:flex;
    top:var(--hoheHead);
    /*  width: 50%;  */
    background-color:var(--col_backgr_normal);
    height:15vh; 
    width:100%;   
    text-align: left;

}

.CV_Foto {

    display:block;  
    /* max-width: 50%;  */
    /* max-height: 60px;  */
    margin-top: 0px;
    margin-left:10px;
    height:100%;
    width:15%;

    background-color:yellow;
}
.CV_Foto2{
    background-color:var(--col_backgr_normal);
    height:100%;
    width:100%;
    margin-left:0px;
    
    object-fit: contain;    /*contain  , alternativ cover, da schneidet er aber ab   */ 
}


.auswahl1 {
margin-top:0px;
height:100%;
width:100%;

background-color:var(--col_backgr_normal);
align-content: center;
color:white;
}

.lab_1 {
    font-size: 24px; 
    /*
    text-align: center;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    justify-self: center;
    align-self: center;
    */
}

.select1 {
    font-size: 24px;   
}

.FinCon1{
    /* position:absolute;  */
    z-index: 2;
    /*margin-left:30%; */
    /* margin-top:30px;  */
    color:var(--col_orange);
    /* background-color:var(--col_backgr_normal);  */
    font-size:70px;
    font-family: Bold;
    /* text-align: center;  */
}

.main-content {
    margin-top:30vh;  /* 450px  */
    padding: 40px; /* Zusätzlicher Innenabstand */
    /*background-color: #534b4b; /* Beispiel-Hintergrundfarbe */
    background-color:var(--col_backgr_dark);
    /*box-sizing: border-box; /* Verhindert unerwünschte Größenprobleme */
    margin-left: 5%; /* Links ausgerichtet */
    width: 90.5%; /* Volle Breite */

}





.Absender {

        display:flex;
        justify-content:space-around;
        gap: 5px;
        /* background-color:yellow;  */
        height: 220px;
        /* border: 5px solid black;   */
}

.Adresse {

    display:grid;
    /* grid-template-rows: 20px 20px;  */
    grid-template-columns: 30% 70%;
    background-color:var(--col_backgr_normal);
    color:white;
    border: 5px solid gray;
    flex: 1;    
    align-content: center;   /*  vertikal  */
    justify-content: start;   /*  horizontal  */

}

.Ausbildung {
    display:grid;
    /* grid-template-rows: 20px 20px 20 px;  */
    grid-template-columns: 30% 50% 20%;
    background-color:var(--col_backgr_normal);
    color:white;
    border: 5px solid gray;
    flex:2;
    align-content: center;   /*  vertikal  */
    justify-content: start;   /*  horizontal  */
    
}
.IT {
    display:grid;
    grid-template-columns: 60%  40% ;
    background-color: var(--col_backgr_normal);
    color:white;
    border: 5px solid gray;
    flex:1.3;
    align-content:space-around;   /*  vertikal  */
    justify-content: center;   /*  horizontal  */
}

.grid_US {
    grid-row: 1 / 2;
    /*grid-row-end: 1; */
    grid-column: 1 / 2;
    background-color: var(--col_backgr_normal);
    padding-top: 10px;
    padding-left: 10px;
    color:var(--col_orange);
    font-family: Bold;

}

.myPunkt1 {
    grid-row: 2 / 2;
    grid-column: 1 / 2;
    /*grid-row: span 1;
    grid-column: span 2; */
    background-color:var(--col_backgr_normal);
}

.myPunkt2 {
    grid-row: 2 / 2;
    grid-column: 2 / 3;
    background-color:var(--col_backgr_normal);
}

ul {
   text-align: left;
}


li {
    text-decoration:none; 
    font-family: Thin;   
    margin-bottom:10px;
    padding-left: 10px;
    list-style-image: url('Fotos2/Punkt_leer_9x9.png');


}

.Sprachen {
    display:grid;
    grid-template-columns: 100% ;
    background-color: var(--col_backgr_normal);
    color:white;
    border: 5px solid gray;
    flex:1.4;
    align-content:space-around;   /*  vertikal  */
    justify-content:center;   /*  horizontal  */
    
}

.Pos1 {
    color:var(--col_orange);
    font-family: Bold;
    
       /*border-bottom:3px solid lightgrey;  */
       margin-bottom: 15px;
       padding-left: 10px;
}

.Pos2 {
       /*border-bottom:3px solid lightgrey;  */
       margin-bottom: 15px;
       font-family: Thin;  
}

.Pos3 {
        /*border-bottom:3px solid lightgrey;  */
       margin-bottom: 15px;
       font-family: Thin;       
}

.Pos4 {
        /*border-bottom:3px solid lightgrey;  */ 
       grid-row: 3 / 4;
       grid-column: 1 / 3;
        margin-bottom: 15px;
       font-family: Thin;   
       padding-left: 10px;    
}

.Pos5 {
        /*border-bottom:3px solid lightgrey;  */ 
       grid-row: 4 / 5;
       grid-column: 1 / 3;
        margin-bottom: 15px;
       font-family: Thin;       
       padding-left: 10px;
}




/*   ======================  ENDE KOPFBEREICH ============================================*/




.main-content_old {
    margin-top:30vh;  /* 450px  */
    padding: 40px; /* Zusätzlicher Innenabstand */
    /*background-color: #534b4b; /* Beispiel-Hintergrundfarbe */
    background-color:var(--col_backgr_dark);
    /*box-sizing: border-box; /* Verhindert unerwünschte Größenprobleme */
    margin-left: 5%; /* Links ausgerichtet */
    width: 90.5%; /* Volle Breite */

}

.mygrid {
    /*height: 500px;  */
    color:blue;
    display:grid;
    /*grid-template-rows:    repeat(var(--Anz_Row), 1fr);*/
    /*grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));  */
    grid-template-columns: repeat(auto-fit, 350px);       /* passt die Anzahl der Cols an und macht sie aber 350px breit */
    /*grid-template-rows: 50px 50px ;  */
    
    gap: 1rem;    /* zwischenraum zwischen den einzelnen boxes innerhalb des mygrid   */
    margin-top: 5rem;    /* Rand overhalb des mygrid  */
    background-color:var(--col_backgr_dark);
    /* border: 5px solid red;  */
    justify-content: center;
    
} 

.box {
    /*   border: 1px solid var(--col_white);   */
    border: 5px solid gray;
    padding: 5px;
    align-items: center;
    text-align: center;
    display:grid;
    grid-template-rows: subgrid; 
    grid-row:  span 4;    /* Anzahl der Bereiche innerhab box     */
    background-color:var(--col_backgr_normal);
    color: white;


}

.vonbis {
    display:flex;
    justify-content:space-around;
    align-items: center;
    
    background-color:var(--col_backgr_normal);
    height:60px;
    font-family: Bold ;
    color: var(--col_white);
    
}

.box_text0 {
    background-color:var(--col_backgr_normal);
    font-size: 14px;
    font-family: Thin ;
}

.box_text1 {
    background-color:var(--col_backgr_normal);
    font-size: 26px;
    font-family: Bold ;
}

.box_text2 {
    /* background-color: var(--col_orange);  */
    background-color:var(--col_backgr_normal);
    font-family: Thin ;
}

.logos {
    display:block;
    max-width: 50%;
    /* max-height: 60px;  */
    height:100%;
    object-fit: contain;    /*alternativ cover, da schneidet er aber ab   */

}




