*{
    margin:0;
    box-sizing:border-box;
    font-size: 1rem;   /* em basiert auf Schriftgr Elternelement , rem basiert auf Root-Element,      */
    
}

:root{
    --col_backgr_normal:RGB(50,50,70);
    --col_white: RGB(255, 255,255);
    --col_orange:RGB(190,80,20);
    --col_white2: rgba(255, 255,255, 0.75);    
    
    --col_backgr_dark:RGB(79,96,109);
    --col_lightblue:#41DCE1;

    --transp1: 0.2;

    --hoheHead: 15vh;
    --hoheTab:400px;
    --hohe_BalkRahmenPX: calc(0.3 * var(--hoheHead) - 0px);
}

@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');
  }


/*  -----------------------  ENDE ALLGEMEINE EINSTELLUNGEN ------------------------    */

 @media (max-width: 950px) {

        .a_hamb{
                    font-size: 14px;
        }

        .D_Hamb_list {
            height: 60px;
        }

        .D_myHead  .D_myHead_text2{
            display:none;
        }

 }


.knopf_Mail{

    position:fixed;
    top: 50%;
    /* background-color:gray;  */
    width:5vw;
    height:5vw;
    border-radius: 50%; 
    opacity:0.6;
    right:2px;
    z-index:5000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);

                background-image: url("Pict/Icons/mail_002.png");
                background-size:contain;                      /*  contain;    */
                background-repeat: no-repeat; 
                background-position: center;
}
.knopf_Mail:hover{
    cursor:pointer;
    opacity:1;
}


.D_myHead{

    /* border: 5px solid var(--col_backgr_normal);  */
    border-bottom: 1px solid white;
    height: var(--hoheHead);
    width: 100vw;
    background-color: var(--col_backgr_normal);
    z-index: 50;
    opacity:1;
    
    position:fixed;
    top:1px;

    display:flex;
    align-items:center;     /* vertical  */
    justify-content:space-around;    /* horizontal  */
    
}

 .D_myHead .D_myHead_picture{
                width:10%;
                height:80%;
                background-color:var(--col_backgr_normal);
        
                background-image: url("Pict/Logos/LOGO2_Transp_400x400.png");
                background-size:contain;  
                background-repeat: no-repeat; 
                background-position: center;
 }

.D_myHead  .D_myHead_text{
                width:30%;
                height:80%;
                background-color:var(--col_backgr_normal);
                color:var(--col_orange);
                font-size: 3.5vw;
                font-weight: bold;
                text-align: left;
                line-height: calc(0.8 * 15vh - 10px);   /* das ist - 2*border v D_myHead    vh = visualport Height
                                                            im Gegensatz zu vw = visualports width*/
               border: 2px solid var(--col_backgr_normal);
               font-family: Thin;
               
 }

 .D_myHead  .D_myHead_text2{
                width:35%;
                height:80%;
                background-color:var(--col_backgr_normal);
                color:var(--col_orange);
                font-size: 2.0vw;
                font-weight: bold;
                text-align: left;
                line-height: calc(0.8 * 15vh - 10px);   /* das ist - 2*border v D_myHead    vh = visualport Height
                                                            im Gegensatz zu vw = visualports width*/
               border: 2px solid var(--col_backgr_normal);
               padding-left:10px;
               font-family: Thin;
               
 }

 /*    ================================   START MENUE ==================================== */

.D_myHead_Menue{                            /*   für HAMBURGER MENU  */
                
                width:25%;
                height: 80%;
                background-color:var(--col_backgr_normal);
                color:lightblue; 
                border: 2px solid var(--col_backgr_normal);
                display:flex;       /* wenn aktiv dann muss display auf none gesetzt werden */
                flex-direction: row;
                align-items:center;
                justify-content:left; 
                padding-left: 10%;             
 }

#click {
    display:none;
}



.strich:hover{
    cursor:pointer;
}

.D_RahmenBalken:hover{
    cursor:pointer;
}


.D_RahmenBalken{
                height:var(--hohe_BalkRahmenPX);    /*basiert auf den 15vh des D_myHead  */
                width:var(--hohe_BalkRahmenPX);
                background-color:var(--col_backgr_normal);
                border: 2px solid var(--col_backgr_normal);
                display:flex;
                flex-direction: column;
                align-items:center;
                justify-content:center; 
                padding-left: 0px;

}

 .strich {
                width: calc(0.8 * var(--hohe_BalkRahmenPX));
                height: 5px;
                margin-top: 3px;
                margin-bottom:3px;
                /* margin-left: 5px;  */
                background-color:  var(--col_orange);
                padding:0px;
                transform-origin: left;
                transition: all 250ms ease-in-out;
}

.D_Hamb_list {
            transform: translateY(0) ;  
            background-color:lightblue;
            opacity: 0.8;
            margin-left:  calc(-1 * var(--hohe_BalkRahmenPX)); 
            margin-top:  calc(1 * var(--hoheHead));
            height:calc( 2.5 * var(--hohe_BalkRahmenPX));
            width: calc(2.5 * var(--hohe_BalkRahmenPX));

            /*height:150px;  
            width:15%;  */
            z-index:1;            
            display: flex;
            justify-content: center;
            align-items: left;
            flex-direction: column;      
            
            display:none;
}

.menueItem {
            margin: 3px;           
            height: 1.5vw;
             min-height: 15px;              
            /* font-size: 1.0vw;  */
         }

.a_hamb{
            text-decoration:none;
            color:black;          
            /* font-size: 1.0vw; */
            padding:3px;
            font-size: 1.0vw;
}

.cross {
            background-color:var(--col_backgr_normal);           
         }
.cross2 {
          display:none;  
          /* opacity: 0;   */
}


/*
 .schatten{
    z-index: 1;
    position:fixed;
    background-color:var(--col_backgr_normal);  
    top: var(--hoheHead);
    height:6vh;
    opacity:0.8;  
    width: 100%;
 }   */

  .einfuehr{
    /* border: solid 20px  green;   */

    position:static;

    color:black;   
    background-color:var(--col_backgr_normal);
    /* border: 5px solid green; */

    bottom:0;
    margin-top:15vh;
    margin-bottom: 0;
    width: 100%;
    padding:30px;
    color:white;
    font-family: thin;
    font-size:1.5em;

 }

 .einfuehr .p1 {
    font-family: Thin;
    font-size:1em;
    color:white;
    padding: 3% 10% 3% 10%;

 }

  .einfuehr .p2{
    font-family: thin;
    font-size:1em;
    color:white;
    text-indent: -20px;
    
    padding: 0% 10% 0% 15%;
 }

.testP1{
	 font-family: Thin;
    font-size:1em;
    color:red !important;
    padding: 3% 10% 3% 10%;
}


 /*   =======================================     HAUPT TEIL =================================================*/

.haupt{

display:grid;
/* grid-template-columns: 200px 200px 200px 200px 200px ;  /* ds 5 Spalten*/
/* grid-template-columns: 20% 40% 25% 10% 5%; /* ds 5 Spalten  */
/* grid-template-rows:200px 200px;   /* ds 2 Zeilen    */

/*  -----------------ab hier Responsibilität ohne media query ------------------- */
grid-template-columns: repeat(auto-fit, minmax(360px, 500px));
grid-template-rows: repeat(auto-fit,var(--hoheTab));
    
    justify-content: center;
    /* border:1px solid green;  */
    /* grid-gap: 1em;  */
    row-gap: 3em;
    column-gap: 1em;

    position:static;
    /* margin-top: var(--hoheHead); */
    /*margin-top:15vh;      /*  urspr mit Schatten 21vh */
    
    background-color:var(--col_backgr_normal);  
    /*background-color: var(--col_orange);  */
    opacity:1;

    z-index: 0;
    padding-bottom: 3vh;
     

}


.tab {
    border: 6px solid rgb(190,80,20) ;
    background-color:white;
    height:var(--hoheTab);
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.tab:hover{
cursor:pointer;
}

.tab2{
    /* margin-left: 50%;
    margin-top:20px;
    font-size: 8em;  */
}

.tab1_Foto{

    height: 40%;
    /* border: 2px solid green;  */
    /* background-image: url("Bild1.png");
    background-size:contain; 
                /*background-size:cover; */
    /* background-repeat: no-repeat; 
    background-position: center;  */
}

.tab1_1_Foto{
    background-image: url("Pict/Icons/Budget_neu4.png");
    background-size:contain; 
    background-repeat: no-repeat; 
    background-position: center;
    background-color:var(--col_backgr_normal);
    opacity:1;
    padding:0px;
   
    
}

.tab2_1_Foto{
    background-image: url("Pict/Icons/projektkalk3.png");
    background-size:contain; 
    background-repeat: no-repeat; 
    background-position: center;
    background-color:var(--col_backgr_normal);
    opacity:1;
}

.tab3_1_Foto{
    background-image: url("Pict/Icons/Organisationsablauf4.png");
    background-size:contain; 
    background-repeat: no-repeat; 
    background-position: center;
    background-color:var(--col_backgr_normal);
    opacity:1;
}

.tab4_1_Foto{
    background-image: url("Pict/Icons/ressourcen2.png");
    background-size:contain; 
    background-repeat: no-repeat; 
    background-position: center;
    background-color:var(--col_backgr_normal);
    opacity:1;
}

.tab5_1_Foto{
    background-image: url("Pict/Icons/Methoden3.png");
    background-size:contain; 
    background-repeat: no-repeat; 
    background-position: center;
    background-color:var(--col_backgr_normal);
    opacity:1;
}

.tab6_1_Foto{
    background-image: url("Pict/Icons/referenz4.png");
    background-size:contain; 
    background-repeat: no-repeat; 
    background-position: center;
    background-color:var(--col_backgr_normal);
    opacity:1;
}

.tab1_US{
    height: 10%;
    font-family: Thin;
    font-size:2em;
    /* align-items:center;
    justify-content: center; */
    background-color:gray;
    display:flex;
    text-align: center;
    text-justify: center;

    
}

.tab_ustxt{
    font-family: Bold;
    font-size:0.8em;
    width:100%;
    color: var(--col_backgr_normal);
    background-color: var(--col_orange);
    line-height: 1.5em;
}


.tab1Text{
    height: 50%;
    /* border: 2px solid green;  */
    background-color: var(--col_backgr_normal);
    color: var(--col_white);
    overflow: auto;
    font-family: Thin;
    font-size: 1em;
    padding: 20px;

}


.tab1Text .tabtext{
list-style-image: url("Pict/Logos/LOGO4_Transp_9x9.png");
margin-left:3%;
}

 /* =========================================   START OVERLAY     ================================================*/


 
 
 .close-btn{
        position:fixed;
        top:10%;
        height:40px;
        cursor: pointer; 
        border-radius: 20px;
        border: none;
        background-color:lightblue;
 }

 .close-btn:hover {
        background-color:var(--col_orange); /* Dunkleres Blau beim Hover */
}




 .overlay {
            position: fixed;
            top: 10%;
            /* left: 10%;       ALT     */
            left: 100% ;        /*  NEU EINSCHUB */
            
            width: 80%;
            height: 80%;
            
            background-color: var(--col_backgr_normal); /* Dunkler Hintergrund */
            color: white;
            /*  display: none;                   /*  ALT   Startet unsichtbar */
            justify-content: center; 
            /* align-items: center;  */
            z-index: 1000; /* Überlagert andere Elemente */
            overflow: auto;
            /* overflow-y: scroll;  */
            transition: left 0.5s ease; /* Animation für das Einschieben */
        }

.overlay.active {
            left: 10%; /* Bewegt das Overlay in den sichtbaren Bereich */
        }


.D_Artikelteil{
    padding: 30px 50px 10px 50px;
    /*background-color:var(--col_backgr_normal);*/
    background-color:var(--col_backgr_normal);
    /* overflow: auto;  */
    
}

.D_Artikelteil H2{
    color:var(--col_orange);
    text-align: center;
    margin-top: 20px; 
    font-family: Bold;
    font-size: 2rem;
}

.D_Artikelteil p {
    color:var(--col_white);
    text-align: left;
    margin-top: 20px;
    font-family: Thin;
    font-size: 1.5rem;
}

.D_Artikelteil li{
    font-family: Bold;
    list-style-type: none;   
    list-style-image: url("Pict/Logos/LOGO3_Transp_9x9.png");
    font-size: 1.5rem;
    /* color:var(--col_white);  */
     color:var(--col_orange);
}

.D_Artikelteil .innerlist{
    list-style-type: none; 
    list-style-image: url("Pict/Logos/LOGO4_Transp_9x9.png");
    font-size: 1.3rem;
    color:var(--col_white);
    margin-left:20px;
    padding-top:10px;
    font-family: Thin;

}

.D_Artikelteil p::first-letter{
    font-size: 1.8rem;
    font-family:Bold;   /* bold */
    color:var(--col_orange);
}

.D_Artikelteil ul {
    color:var(--col_white);
    text-align: left;
    margin-top: 30px;
    font-family: Thin;
    font-size: 1.5rem;
}

.D_Artikelteil .innerText{
    font-size: 1.3rem;
}


/* =========================================    EMAIL Hamburger   ================================================*/



 .ButtonKontakt  {
            position: fixed;
            top: 10%;
            /* left: 10%;       ALT     */
            left: 100% ;        /*  NEU EINSCHUB */
            
            width: 50%;
            height: 50%;

            background-color: var(--col_backgr_normal); /* Dunkler Hintergrund */
            color: white;
            /*  display: none;                   /*  ALT   Startet unsichtbar */
            justify-content: center; 
            /* align-items: center;  */
            z-index: 1000; /* Überlagert andere Elemente */
            overflow: auto;
            /* overflow-y: scroll;  */
            transition: left 0.3s ease; /* Animation für das Einschieben */

            font-family: Bold;
            font-size:2rem;


            text-align: center;
            justify-items: center;

        }

.ButtonKontakt span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Bold;
    font-size:2rem;
}

.ButtonKontakt.active {
            left: 25%; /* Bewegt das Overlay in den sichtbaren Bereich */
}

.F_email  {
            position: fixed;
            top: 10%;
            left: 100% ;        /*  NEU EINSCHUB */
            
            width: 50%;
            height: 80%;

            background-color: var(--col_backgr_normal); /* Dunkler Hintergrund */
            color: white;
            
            z-index: 1000; /* Überlagert andere Elemente */
            overflow: auto;
            /* overflow-y: scroll;  */
            transition: left 0.3s ease; /* Animation für das Einschieben */

            font-family: Bold;
            font-size:2rem;

            text-align: center;
            justify-items: center;
            
        }
.F_email.active {
            left: 25%; /* Bewegt das Overlay in den sichtbaren Bereich */
}

.email-bild{
    height:10%;
    padding:2%;
    margin-top:20px;
    background-image: url("Pict/Logos/LOGO2_Transp_400x400.png");
    background-size:contain;  
    background-repeat: no-repeat; 
    background-position: center;
}

.F_email h1{
    margin-top: 10%;
    font-family: bold;
    color:var(--col_orange);
    font-size: 1.5em;
}
.close-btn1{
        /* position:fixed;  */
        top:10%;
        height:40px;
        cursor: pointer; 
        border-radius: 20px;
        border: none;
        background-color:lightblue;
        align-items: left;
 }

.email_bez{
        font-size: 1.2em;  
        font-family: bold;
        color:var(--col_orange);
}
 .email_feld{
    
        width:350px;
        text-align: center; 
        font-size: 1em;  
        font-family: thin;
        color:var(--col_orange);
}

/* =========================================   ENDE EMAIL Hamburger   ================================================*/
/*

 @media (max-width: 850px) {

      .D_myHead .D_myHead_Menu{
      display:none;                           
      }

      .media_D_myHEad_Menue{
        
        display:flex;
        align-items:last baseline;
        justify-content:space-around;    
        border: 2px solid green;  
      }

 }
*/