* {  
    font-family: "Rajdhani", sans-serif;
    font-weight: 400;
 /* font-size: 18px;   */
    text-decoration: none;
    box-sizing: border-box;
    color: #000000;
}  
body {
    /* oberer rand bis top ganz oben */
    margin-top: 0px;
}

/*----------------------- new menu -----------------------*/
/**********************************************************/

.active {
	background-color: 	rgb(30, 65, 95);
    background-color: transparent;  /*provi*/
    text-decoration: underline;
    text-decoration-color: rgb(0, 0, 0);
    text-underline-position: under; 
}
header {
    /* HAUPTMENUFENSTER */
    background: rgb(255, 255, 143);             /* gelb */
    background: rgba(224, 224, 224, 0.8);       /* grau */
    border: 1px solid rgb(154, 154, 154);
    background: rgba(245, 245, 245, 0.8);       /* ganz hell grauu */
    border: 1px solid rgb(235, 235, 235);





    /* https://www.w3schools.com/cssref/playdemo.php?filename=playcss_display&preval=block */
    display: block;
    /* https://www.w3schools.com/css/css_positioning.asp  */
    /* Menu bleibt oben, wie sticky */
    position: fixed;
    /* bei kleiner 100 bleibt rechts frei */
    width: 100%;
    /* Höhe Menuzeile */
    height: 41px;
    /* margin no uewen bei 3 zeilen */
    margin-top: 0px;
    z-index: 1000;
    /* linker rand Hauptfenster bis fest links */
    margin-left: -8px;
}
header > nav > ul {
    /* MENUPUNKTE ZUSAMMEN */  
    /* nebeneinander */
    display: flex;  
    /* nowrap -> kein umbruck */
    flex-wrap: wrap;
    /* flex-start -> alle elemente linksbündig */
    /* flex-end  -> rechtsbündig */
    justify-content: flex-start;
    /* keine zeichen vor dem Menüpunkt */
    list-style: none;
    /* text no uewen */
    margin-top: 7px;
    /* all menupunkten abstand lenks */
 /*   padding-left: 20px;   */
}
header > nav > ul > li {
    /* EINZELNE MENUPUNKTE */
    /* abstand menupunkte */
    padding-left: 7px;
    padding-right: 7px;
    font-style: normal;
}
header > nav > ul > li:hover {
    /* hover über hauptmenu zeile */
    background: rgb(201, 201, 201);
    color: white !important;
    height: 39px;
    margin-top: -7px;
    padding-top: 7px;
}   
/*------------ UNTERMENU -------------*/
header > nav > ul > li a + div {   
    /* Untermenu */  
    background-color: rgb(104, 104, 104);
    /* unterer rand des untermenu */
    border-radius: 0 0 15px 15px;  /* 0 0 2px 2px */ 
    display: none;
    font-size: 1rem;
    position: absolute;
    /* ganze breite untermenu */
    width: 180px;
    /* unterer rand untermenu */
    padding-bottom: 6px;
    padding-top: 3px;
    padding-right: 0px;
}   
header > nav > ul > li:hover a + div {   
    /* ouni geht untermenu net */
    display: block;
    /*padding-left: 5px; /* no reaktion */
    background-color: rgb(104, 104, 104);
    padding-bottom: 12px;
    padding-left: 1px;
    padding-right: 6px;
    /* border bis oben */
    padding-top: 10px;
    /* abstand ganzer block bis oben */
    margin-top: 10px;
}
header > nav > ul > li a + div > ul {
    /* ein hintergrund submenu lenk seit */
    background-color: rgb(104, 104, 104);
    padding-left: 4px;
    list-style-type: none;  
}
header > nav > ul > li a + div > ul > li {
    /* ein hintergrund submenu unter text */
    margin: 0;
    padding: 0;
    background-color: rgb(104, 104, 104);
}
header > nav > ul > li a + div > ul > li > a {
    /* Untermenu text*/
    color: rgba(255, 255, 255, 0.9);        
    display: block; 
    /* bereich anklickbar grösser */
    line-height: 1.8;       /**/
    border-top: 10px;       /**/
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    /* untermenu padding der zeilen */
    padding: 2px 0px 2px 0px;  /* .25 1.5rem */
    text-decoration: none;
    text-transform: uppercase;
}
header > nav > ul > li a + div > ul > li:hover > a {
    /* hover text submenu */
    background-color: #e1e1e1;
    color: #000000;
}
/*-------------------------------------------*/

@media (width>451px) {
    header > nav > ul > li {
            font-size: 17px !important;
    }
    header > nav > ul {
padding-left: 10px;
    }  
}
@media (width<451px) and (width>400px) {
    header > nav > ul > li {
            font-size: 16px !important;
    }
    header > nav > ul {
padding-left: 6px;
    }  
}
@media (width<401px) and (width>300px) {
    header > nav > ul > li {
            font-size: 15px !important;
    }
    header > nav > ul {
padding-left: 4px;
    }  
}
@media (width<301px) and (width>200px) {
    header > nav > ul > li {
            font-size: 13px !important;
    }
    header > nav > ul {
padding-left: 2px;
    }    
}
@media (width<301px) and (width>200px) {
    header > nav > ul > li {
            font-size: 12px !important;
    }
    header > nav > ul {
padding-left: 1px;
    }    
}
@media (width<201px) {
    header > nav > ul > li {
            font-size: 10px !important;
    }
    header > nav > ul {
padding-left: 0px;
    }    
}


/*----------------- upload von saisie --------------------*/
/**********************************************************/


#echotest {
    color: #006411;
    font-size: 17px;
    font-style: italic;
    font-weight: 600;
    padding-left: 26px;
}
#kreis_upload {
    height: 16px;
    width: 15px;
}
#messageAlert_upload {
    color: rgb(0, 0, 0);
    padding-left: 40px;
    font-style: italic;
    padding-top: 15px;
}
#form01S32_upload {
    /* grauer rahmen upload.php */
    background-color: rgb(226, 226, 226);
    margin-top: 54px;
    padding-left: 0px;
    padding-top: 40px;
    padding-bottom: 15px;
    border: 0.8px solid black; 
    border-radius: 10px; 
    width: 360px;
    margin-left: 20px;
    margin-bottom: 22px;
    font-weight: 500;
}

#form01S32x_upload,
#form01S32y_upload { 
    /* retour knopf     uploadseite:   upload.php */
    background-color: #73c265;   
    color: black;
    font-size: 1.2em;
    font-weight: 400;
    margin-top: 25px;
    margin-left: 20px;
    height: 34px;
    width: 360px;
    border-radius: 10px;
    padding-top: 5px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 4px;
    /* punkt vor menu verstecken */
    list-style-type: none;
    border: 1px solid black; 
    font-size: 17px;
}
#form01S32y_upload {   
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    background-color: #d3d3d3;   
    color: #666;
    border-color: #858585;
}
#form01S32x_upload:hover {
    background-color: #006411;     
    /* punkt vor menu verstecken */
    color: white;
}
#form01S32y_upload:hover {
    background-color: #959595;     
    /* punkt vor menu verstecken */
    color: white;
}

/*----------------------- a_login ------------------------*/
/**********************************************************/

.bj1_login {
    text-align: center;
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 17px;
}
#tabelle2_login {
    width: 310px !important;
    border-collapse: collapse;
    border: 0px solid rgb(90, 8, 8);
    background-color: #dbdbdb;
    width: 60%;
    margin-left: auto; 
    margin-right: auto;
}
#t3_login {
    /* 3 untere rechtecke - (login bis retour) */
    text-align: center;
    border-collapse: collapse;
    padding-top: 20px;
    padding-bottom: 7px;
    padding-left: 16px;
    border: 2px solid white;
    background-color: rgb(255, 255, 255) !important;
}
#t2A_login {
    /* rechteck von utili.. und mot de p.. */
    text-align: center;
    border-collapse: collapse;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 16px;
    border: 2px solid #dbdbdb;
}
#t2B_login {
    /* rechteck rechts von von utili.. und mot de p.. */
    text-align: center;
    border-collapse: collapse;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 16px;
    border: 2px solid #dbdbdb;
}
#infeld_login {
    /* eingabefelder */
    font-size: 0.9em;
    padding-right: 9px;
    margin-right: 22px;
}
#logbut_login {     
    /* login knopf */
    background-color:  #8eb3cb ;
    color: rgb(0, 0, 0);
    /*  top/right/bottom/left  */               
    border-radius: 10px;              
    font-size: 1em;
    height: auto;
    padding: 5px 25px 5px 25px;
    border: 1px ridge black; 
    text-decoration: none;
}  
#logbut3_login {   
    /* retour homepage */           
    background-color:  #8ecbb2 ;
    color: rgb(0, 0, 0);
    /*  top/right/bottom/left  */               
    border-radius: 10px;              
    font-size: 1em;
    height: auto;
    padding: 8px 25px 8px 25px;
    border: 1px ridge black; 
    text-decoration: none;
}  
#tabelleG2_login {
    /* graues fenster */
    width: 310px !important;
    border-collapse: collapse;
    border: 1px solid rgb(82, 82, 82);
    background-color: #d2d1d1;
    width: 60%;
    margin-left: auto; 
    margin-right: auto;
    font-size: 15px;
}

/*------------------ form4 (supp) ------------------------*/
/**********************************************************/

#form1_form4 {
    /*-- Höhe des grauen Rahmens oben --*/
    height: 14em;  /* 14em  34em als mySQL Kontrolle */
    background: #d8d8d8;
    margin: 0 auto;
    border: 1px solid black;  
    /*  text    normal Texter */          
    margin-top:  0px;
    width: 27em; 
    padding: 14px;
    font-size: 16px;
    }

/*----------------- form3 (modif) ------------------------*/
/**********************************************************/

#form1_form3 {
    /*-- Höhe des grauen Rahmens oben --*/
    height: 19em;  /* 14em  34em als mySQL Kontrolle */
    background: #d8d8d8;
    margin: 0 auto;
    /*  border: 1px solid black;   */
    border: 1px solid black;
    /*  text    normal Texter */
    font-size: 1em;            
    margin-top:  13px;
    width: 27em; 
    padding: 14px;
    font-size: 17px;
    }

/*----------------- form2 (saisie) -----------------------*/
/**********************************************************/

#form2S_form2 {
    /*-- Höhe des grauen Rahmens oben --*/
    height: 30em;  
    background: #e7e7e7;
    margin: 0 auto;
    border: 1px solid black;
    font-size: 1em;            
    margin-top:  13px;
    width: 31em; 
    padding: 14px;   
    font-size: 17px;            
}

/*--------------------- index ----------------------------*/
/**********************************************************/


#F2024_index {
    color: black;
    font-family: "Rajdhani", sans-serif;
    font-weight: 200;
    font-style: normal;
}
.progTH_index {
    font-family: "Rajdhani", sans-serif;
    font-weight: 200;
    font-style: normal;
}
#lgi2_index {
    /* zentrieren Button logout home */   
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    margin-top: 2px;
    background-color: rgb(163, 226, 159);
    border-radius: 10px;
    padding-top: 2px;
    width: 110px !important;
    /* zentrieren */
    width: 50%; 
    margin: 0 auto; 
    text-align: center;
}
#lgi_index {
    /* zentrieren logout home */
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin-top: -2px;
}
.rajdhani-regular {
    font-family: "Rajdhani", sans-serif;
    font-weight: 200;
    font-style: normal;
    text-align: center;
    font-size: 22px;
  }
.rajdhani-light {
    font-family: "Rajdhani", sans-serif;
    font-weight: 200;
    font-style: normal;
    text-align: center;
    font-size: 44px;
  }

/*--------------------- a_saisie3 ------------------------*/
/**********************************************************/

#tit_saisie {
    font-size: 18px;  
    color:#066326;
    padding-left: 125px;
    border-top: 222px;
}
#form01S3_saisie {
    /*--   Höhe/Breite des grauen Rahmens  oben  --*/
    height: 230px;             /* 200px altes menu */
    width: 400px;   /*360*/
    padding-left: 22px;
    padding-top: 0px;          /* 7px altes menu */
    background: #ccc;
    border: 1px solid black;
    font-size: 1em;      
    margin-left: 33px;
    /* abstand nach oben */
    margin-top: 5px;    /* wegen neuem menu auf 0 gesetzt war 11 */
}
#form2_saisie input  {
    /*  Höhe der Eingabefelder  */ 
    padding: 6px 6px 6px 6px;
    border-radius: 10px;
    border: 1px ridge black;
    /*  eingabefelder unten */ 
    font-size: 1em;
    /*   0.9   felder ok  */
    height: 0.9em;      
}
#UpBild1_saisie,
#UpBild2_saisie {
    border: 0px solid rgb(120, 120, 120); 
    padding: 3px;
    margin-left: 12px;
    margin-top: 7px;
    height: 88px; 
}
#texter2_saisie {
    /* background-color: rgb(255, 255, 255);   */
    border-top: 10px;
    font-style: italic;
    padding-top: 0px;
    padding-bottom: 5px;
}
#flag2N_saisie {
    margin-left: 0px;  /*114*/ 
    border: thin solid #666;
    margin-bottom: 1px;
    font-size: 0.9em;   
}
#saveresetS_saisie {
    height:30px !important;     
    font-size: 18px !important;                     
    /* abstand der beiden knöppfe */ 
    margin-left: 12px;                       
    margin-top: 0px;
    border-radius: 10px !important;
    padding-top: 5px !important;   
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 233px;                       
    color: black !important;
    width: 200px;
    /*  Farbe der Knöpfe */
    background-color: #73c265;   
    padding-top: 1px !important;
    border: 1px solid black;
}      
#saveresetS_saisie:hover  {   
    padding-top: 1px !important;
    /*  top/right/bottom/left  */
    /*  Hintergrund Knapp Save an Resert   */                      
    color: white !important;
    padding-left: 10px !important;
    padding-right: 15px !important;
    border-radius: 10px !important;
    font-size: 1em;
    background-color: #307524;  
}
#unten2N_saisie {
    /*  buttons save reset  */
    /*  abstand der buttons save reset nach oben*/
    margin-top:  5px;  
    height: 22px;
    font-size: 0.8em;
}
#form2_saisie input  {
    /*  Höhe der Eingabefelder  */ 
    padding: 6px 6px 6px 6px;
    border-radius: 10px;
    border: 1px ridge black;
    /*  eingabefelder unten */ 
    font-size: 1em;
    /*   0.9   felder ok  */
    height: 0.9em;                
}
#form2_saisie {
    /*-- Höhe des grauen Rahmens unten --*/
    height: 26em;  /* 20em */
    background: #ccc; 
    margin:  auto;
    /*-- bis zum oberen strich --*/
    padding-top: 1em;
    padding-left: 1em;
    /*  border: 1px solid black;   zwischenstrich  */
    border: 1px solid black;
    /*  text    normal Texter */
    font-size: 1em;            
    /* form 2 nach oben oder unten  -32px*/
    margin-top:  -32px;  
    margin-left: 20px;
    margin-right: 20px;
    /* jetzt unterer Abstand ok */
    padding-bottom: 22px;
}
#form2N_saisie {
    /* unterer Block saisie3 */
    height: 30.5em;  /* 30em */   
    /* Strich zwischen Form1 und Form 2 verstecken */
    /* -18*/
    margin-top: -18px;
    /*-- Höhe des grauen Rahmens unten--*/
    background-color: #cccccc;           
    /*  top/right/bottom/left  */         
    /*  top ass abstand tabelle bis trennung graue felder */   
    padding: 30px 12.6px 5px 20px;
    /*  Border das ganzen Kastens    */
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    /*  text    normal Texter */
    font-size: 1em;     
    color: black;       
    width: 400px;   /* 448    319.5 */    
    margin-left: 33px;  
}

#form02S3_txt_ob_saisie { 
    /* infotext 2x unter langer grüner zeile dateiauswahl */
    padding-bottom: 0px;
    padding-left: 14px;
    font-size: 0.9em;
    /* abstand tableau agrandi -> Dateiwahl 2 */
    margin-bottom: -12px;
}
#form02S3_txt_saisie { 
    /* infotext 2x unter langer grüner zeile dateiauswahl */
    /* abstand table pour gal -> Upload grün */
    padding-bottom: 0px;
    padding-left: 14px;
    font-size: 0.9em;
}

#form01S3button_saisie {
    /* uploadKNOPF 2 tableaux button */
    color: black;
    padding-left: 2px;
    padding-top: 1px;
    padding-bottom: 0px;
    background-color:#73c265 !important;
    border: 1px solid black; 
    width: 83px; 
    height: 30px; 
    border-radius: 10px; 
    font-size: 1em;   
    margin-top: 20px;
    margin-left: 7px;
}
#form01S3button_saisie:hover {
    background-color:#2f8226 !important;
    color: white;
}

/*--------------------- a_statis -------------------------*/
/**********************************************************/

#t1_statis {
    text-align: center;
    border-collapse: collapse;
    padding: 2px;
    border: 1px solid white;
    font-family: "Rajdhani", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
}
#t1BB_statis {
    text-align: center;
    border-collapse: collapse;
    padding: 2px;
    border: 1px solid white;
    font-family: "Rajdhani", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 17px;
    color: darkgreen;
}
#tabelle1_statis {
    /*  border-collapse: collapse;   */
      width: 60%;
      margin-top: 20px;
      margin-left: auto; 
      margin-right: auto;
      border: 2px solid rgb(165, 165, 165);
      background-color: #dfdfdf;  
  }

/*--------------------- a_supp ---------------------------*/
/**********************************************************/

#savereset2_supp {
    /* button suppression */
    height: 29px !important;
    padding-top: 5px !important;
    padding-left: 12px !important;
    padding-right: 13px !important;
    border-radius: 10px !important;
    display: inline-block;
    text-decoration: none;
    background-color: rgb(215, 74, 74);
    border: 1px solid black;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 1em; 
    /* Abstand button text */
    margin-top: 13px !important;
    margin-left: 3px !important;
    /* Text mittig im roten Feld */
    padding-top: 2px !important;
}
#savereset2_supp:hover  {   
    /*  top/right/bottom/left  */
    /*  Hintergrund Knapp Save an Resert   */
    background-color:  #7b3737 !important;    
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 1em; 
    /* Abstand button text */
    margin-top: 13px !important;
    margin-left: 3px !important;
    /* Text mittig im roten Feld */
    padding-top: 3px !important;    
}
#su1_supp {
    font-size: 1em;   
    margin-left: -4.8px;
    background: #ccc;
    border: 0px solid black;
    color: black;
}
#su2_supp {
    font-size: 1em;   
    background: #ccc;
    border: 0px solid black;
}
#su3_supp {
    /* versteckte strings bildname 2x */
    color: transparent; 
    background: transparent;
    border-color: transparent;
}
#nrTab3_supp {
    /* text tableau nr */
    width: 80px;
    margin-right: 12px;
    margin-left: 22px;
    font-size: 16px;
    border: 1px solid black;
}
#idSubmit2_supp {
    height: 29px !important;
    color: darkblue;  
    margin-top: 0px !important;
    padding-top: 4px !important;
    padding-left: 12px !important;
    padding-right: 13px !important;
    border-radius: 10px !important;
    background-color: #73c265 !important;  
    font-size: 0.9em; 
    border: none;
    border: 1px solid black;
}
#idSubmit2_supp:hover  {   
    /*  top/right/bottom/left  */
    background-color: #45763c !important;    
    color: white;
}
#form_supp {
    /*-- Höhe des grauen Rahmens oben --*/
    /* form bei modif und supp */
    height: 16em;  /* 13em */
    width: 360px;
    background: #ccc;     
    margin:  auto;   
    padding-top: 1em;
    padding-left: 1em;
    /*  border: 1px solid black;   */
    border: 1px solid black;
    /*  text    normal Texter */
    font-size: 1em;      
    margin-top:  5px;
    margin-left: 20px;
    margin-right: 20px;
}
#form2x_supp {
    /* form suppression  */
    /*-- Höhe des grauen Rahmens unten --*/
    height: 24em;  /* 20em */
    width: 360px;
    background: #ccc;
    margin:  auto;
    /*-- bis zum oberen strich --*/
    padding-top: 1em;
    padding-left: 1em;
    /*  border: 1px solid black;   zwischenstrich  */
    border: 1px solid black;
    /*  text    normal Texter */
    font-size: 1em;            
    /* form 2 nach oben oder unten */
    margin-top:  -30px;  
    margin-left: 20px;
    margin-right: 20px;
}

/*-------------------- a_modif ---------------------------*/
/**********************************************************/

#form_modif {
    /*-- Höhe des grauen Rahmens oben --*/
    /* form bei modif und supp */
    height: 16em;  /* 13em */
    width: 360px;
    background: #ccc;     
    margin:  auto;   
    padding-top: 1em;
    padding-left: 1em;
    /*  border: 1px solid black;   */
    border: 1px solid black;
    /*  text    normal Texter */
    font-size: 1em;      
    margin-top:  5px;
    margin-left: 20px;
    margin-right: 20px;
}
#form2_modif {
    /*-- Höhe des grauen Rahmens unten --*/
    height: 27em;  /* 20em */
    width: 360px;
    background: #ccc; 
    margin:  auto;
    /*-- bis zum oberen strich --*/
    padding-top: 1em;
    padding-left: 1em;
    /*  border: 1px solid black;   zwischenstrich  */
    border: 1px solid black;
    /*  text    normal Texter */
    font-size: 1em;            
    /* form 2 nach oben oder unten  -32px*/
    margin-top:  -32px;  
    margin-left: 20px;
    margin-right: 20px;
    /* jetzt unterer Abstand ok */
    padding-bottom: 22px;
}
#nrTab_modif {
    /* text tableau nr auswählen */
    width: 80px;
    margin-right: 12px;
    margin-left: 22px;
}
#saveresetMo_modif {
    /*  34px  */
    height:30px !important;       
    /*  Farbe der Knöpfe */
    background-color: #73c265 !important;  
    margin-top: 27px !important;
    margin-left: 80px !important;
    border-radius: 10px !important;
    font-size: 1em !important;  
    padding-top: 3px;
    padding-left: 15px;
    padding-right: 15px;
    color: rgb(0, 0, 0);
    border: 1px solid black;
}
#saveresetMo_modif:hover  {   
    height:30px !important;       
    /*  Farbe der Knöpfe */
    background-color:  #006411 !important;  
    margin-top: 27px !important;
    margin-left: 80px !important;
    border-radius: 10px !important;
    font-size: 1em !important;  
    padding-top: 3px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
}
#idSubmit_modif {
    height: 29px !important;
    color: rgb(0, 0, 0);  
    margin-top: 0px !important;
    padding-top: 2.8px !important;
    padding-left: 18px !important;
    padding-right: 19px !important;
    border-radius: 10px !important;
    background-color: #73c265 !important;  
    font-size: 1em; 
    border: 1px solid black;
}
#idSubmit_modif:hover  {   
    /*  top/right/bottom/left  */
    color: white;
    height: 29px !important;
    margin-top: 0px !important;
    padding-top: 2px !important;
    padding-left: 18px !important;
    padding-right: 19px !important;
    border-radius: 10px !important;
    background-color:  #006411 !important;   
    font-size: 1em; 
}

/*------------------ a_galerie ---------------------------*/
/**********************************************************/

#gallery-fullview_galerie {
    /* Fullview seite ohne bild, text und button */
    box-shadow: 5px 7px 12px rgb(173, 173, 173);
    padding-top: 40px;
    /* abstand unterseite button bis unten */
    padding-bottom: 30px;
    /* Hintergrund */
    width: 100vw; height: 100%; 
    overflow: hidden;   /* Hide scrollbars */
    /* ganz äussere Rand   */  
    border-radius: 10px;
    border-color:  rgb(147, 151, 149);
    background-color: rgb(255, 255, 255);    
    margin-left: 21px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 0px;
    & backdrop { 
        /* hintergrund flu */
        backdrop-filter: blur(100%);
    }      
    & figure {   
        /* unterer rand unter texter */ 
        margin: -10px;
        margin-left: 1px;
        /*  box-sizing: border-box;   */
        width: 100%;
        height: 100%;  /*80%*/
        background: rgb(197, 217, 223);
        background-color: white;  
    }    
    & img {
        /*   keen afloss      */
        /*   display: block;   */
        /* ohne margin fehlt text zeile unten */
        margin: auto ;     
        padding-left: 4px;
        width: 100%;  
        /* 91% soss ennen keng Platz vir info zeil */
        height: 85%; 
        /*  wichteg, soss get Bild verzerrt */
        object-fit: contain;  
        /* background zwischen Bild und Text (thumb) und ganz oben*/
        background-color: white;        
        /*   background-color:  green;  */
        /* 0 soss schwarze border lengs an ennen */
        border: 12px;  
        /* oberer rand */ 
        padding-top: 40px;    
    } 
    & figcaption {
        /* schmale Zeile mit Grandeur usw...   */
        font-style: italic;
        text-align: center;
        font-size: 1em;
        margin-top: 10px;
        margin-right: -13px;
        margin-left: -5px;        
        border: 32px; 
        /*  border: 1px solid blue;  */
        font-family: Verdana, Geneva, sans-serif;
        font-size: 15px;  
        /*   farbe für hell und dunkel  */
        color: rgb(163, 167, 174);   
        /* auto */
        height: auto;
        word-wrap: break-word;
    }
}
#test02_galerie {
    /* grosses bild mit rand ?! */
    vertical-align: bottom !important;
    padding: 0 !important;
}
#test04_galerie {
    /* fullview  */
    /* kleine Zeile über Grössenangabe */ 
    border-radius: 5px;
    border: 0px;
    padding: 0px;
}
.button-39_galerie, 
.button-39_2_galerie {
    background-color: #ffffff;
    border: 1px solid rgb(209,213,219);
    border-radius: 10px;
    box-sizing: border-box;
    color: #111827;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
    padding: .3rem 1.5rem;
    /* unter text bis rand button */
    padding-bottom: 3.5px;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    text-decoration-thickness: auto;
    box-shadow: 1px 1px 12px rgb(173, 173, 173);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin-left: 31px;
    margin-bottom: 55px;
    /* entfernt den blauen focus Ring */
    outline: none;
}
.flexbox_galerie {
    /* flexbox ass dei ganz Galerie vun de Biller */
    padding: 2px;
    background-color: rgb(255, 255, 255);
    margin-bottom: 50px;
}
#vend1_galerie {  
    /* vom text vendu bis oberer rand */
    margin-top:  30px;   
    /* vom text bis oberer rand bild */ 
    margin-bottom: -55px;
    text-align: center;
    color: red;
}
.container_galerie {
    /* mit flex nebeneinander */
    display: grid;
    /* baseline ass wei center zentriert vertical */
    align-items: center;
    /* zentrierte items horizontal */
    justify-content: center; 
    align-content: center;
    background-color: rgb(255, 255, 255);
    /*mit width =  breite fest*/
    /* platz über bild */
    padding-top: 55px;
  }
#BillerTexter_galerie {
    margin-top:  6px;
    background-color: rgb(255, 255, 255);
    /* row=bin einer zeile */
    display: flex;
    flex-direction: row;
    justify-content: center; 
}
.icon2a_galerie {
    /* icon nom bild */
    height: 30px;
    padding-left: 6.5px;
    vertical-align: middle;
    padding-bottom: 4px;
    padding-top: 0px;
    padding-right: 5px;
}
.icon3_galerie {
    /* kleines bild */   
    height:30px;  
    padding-left: 6px;
    vertical-align: middle;  
    padding-top: 0px;
}
#bild33_galerie {
    /*  weisser rahmen  */
    padding: 2px; 
    padding-top: 0px;
    /* border bild */
    margin: 0;
    /* 1: nach rechts 2: nach unten */
    box-shadow: 5px 7px 12px rgb(173, 173, 173);
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxx media xxxxxxxxxxxxxxxxxxxxxx*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/* 1   1000 -    */
@media (width>999px) {
    #bild33_galerie {
       width: 400px;  
    }
    .flex-item {
        padding: 0 3em 0 3em;
    }
    .flex-container {
        flex-direction: row;  
        justify-content: center;
        flex-wrap: nowrap;
    }
    .i1,
    .i2, 
    .i3 {  display: initial;  }
}

/* 2    801 - 999  */
@media (width<1000px) and (width>800px) {
    #bild33_galerie {
        width: 400px;
    }
    .flex-item {
        padding: 0 2em 0 2em;
    }
    .flex-container {
        flex-direction: row;  
        justify-content: center;
        flex-wrap: nowrap;
    }
    .i1,
    .i2, 
    .i3 {  display: initial;   }
}
/* 3   701 - 800 */
@media (width<801px) and (width>700px) {
    #bild33_galerie {
        width: 400px;       
    }
    .flex-item {
        padding: 0 1em 0 1em;
    }
    .flex-container {
        flex-direction: row;  
        justify-content: center;
        flex-wrap: nowrap;
    }
    .i1,
    .i2, 
    .i3 {  display: initial;   }
}
/* 4   601 - 700 */
@media (width<701px) and (width>600px) {
    #bild33_galerie {
        width: 400px;
    } 
    .flex-item {
        padding: 0 1.2em 0 1.2em;
    }
    .flex-container {
        flex-direction: row;  
        justify-content: center;
        flex-wrap: nowrap;
    }
    .i2,
    .i3 {  display: initial;   }
    .i1 {  display: none;      }
}
/* 5   501 - 600 */
@media (width<601px) and (width>500px) {
    #BillerTexter_galerie {      
        /* flex=breit    grid=untereinander */
        flex-direction: row;      
    }
    #bild33_galerie {
        width: 400px;
    }
    .flex-item {
        padding: 0 1em 0 1em;
    }
    .flex-container {
        flex-direction: row;  
        justify-content: center;
        flex-wrap: nowrap;
    }
    .i2,
    .i3 {  display: initial;  }
    .i1 {  display: none;     }
}

/* 6   301 - 500 */
@media (width<501px) and (width>300px) {
    #BillerTexter_galerie {
        flex-direction: column;      
        text-align: center;
    }
    #bild33_galerie {
        width: 280px;
    }
    .flex-item {
        padding: 0 1em 0 1em;
    }
    .flex-container {
        flex-direction: column;  
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
    }
    .i2,
    .i3 {  display: initial;   }
    .i1 {  display: none;      }
}

/* 7    < 301 */
@media (width<301px) {  
    #BillerTexter_galerie {
        flex-direction: column;  
        text-align: center;
    } 
    #bild33_galerie {
        /* Hauptbild / Thumb */
         width: 240px; 
    }    
    .flex-item {
        padding: 0 1em 0 1em;
    }
    .flex-container {
        flex-direction: column;  
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
    }
    .i2,
    .i3 {   display: initial;   }
    .i1 {   display: none;      }
}

/*------------------------------------------*/
/*   Mac       574=kleng                    */
/*   händy pol 430 - landscape 814          */
/*   händy mir 393 - landscape 734          */
/*------------------------------------------*/


/*------------------ a_fichier ---------------------------*/
/**********************************************************/

#txtven {
    background-color: gray;
    color: white;    
    width: 100%;
    margin-left: 0px; 
    font-size: 16px;
    font-weight: 600;
    height: 26px;
    padding-top: 3.5px;
    padding-bottom: 1px;
    padding-left: 11px;
    padding-right: 11px;
}
input[type="radio"] {
    /* hamburgermenu wird versteckt wenn normales menu sichtbar */
    display: none;
}
/* 3 Knöpfe für filter vendu ...                  */ 
/* Versteckt den Standard-Radio-Button            */
/* Erstellt den benutzerdefinierten Radio-Button  */
.custom-radio {
    /* setztdie buttons nebeneinander */
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    margin-left: 20px;
    /* oberer rand bis hauptmenu*/
    padding-top: 14px;
  }
  .radio-button {
    width: 12px; /* Breite des Knopfes */
    height: 12px; /* Höhe des Knopfes */
    border: 1px solid black;
    border-radius: 50%; /* Rundung für Radio-Button */
    margin-right: 3px;  /* Abstand zum Text */
    display: inline-block;
    position: relative;
    margin-bottom: 2px;
}
  /* Innerer Punkt, der erscheint, wenn der Radio-Button ausgewählt ist */
  input[type="radio"]:checked + .radio-button::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

#filter_fichier {
    width: 95%;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 2px;
    background-color: rgb(226, 226, 226);
    margin-left: 10px;
    margin-right: 40px;
    color: rgb(0, 0, 0);
    transform: scale(1.0);
    border: 1px solid rgb(184, 184, 184);
    border-radius: 0px;
    font-size: 16px;
}     
#tbtabelle_fichier {
    /* haupttabelle */
    table-layout: fixed;
    border: 0px;   
    border-radius: 0px;         
    width: 95%; /* 94%   28.10 */ 
    margin-top: 1px;
    margin-left: 10px; 
    margin-right: 140px !important;  
    border: 1px solid rgb(165, 165, 165);
    background-color: #dfdfdf;  
    margin-bottom: 30px;
    z-index: 2;
}
.colTh_fichier {
    /* text der (überschrift) kolonne */
    color: white;
    background-color: green;
    font-size: 16px;
    z-index: 2;
}
.td_fichier {
    text-align: center;
    border-collapse: collapse;
    padding: 1px;
    border: 1px solid white;
    font-size: 16px;
}
.th_fichier {
    /* hintergrund von kollonnenüberschrift */
    overflow-x: auto;
    /* ouni ass d'Iwerschreft net uklickbar wann kleng */
    position: relative;
    /* sonst scrolleiste wenn klein */
    overflow-x: hidden;
    background-color: green;
    z-index: 2;
}

/*--------------------- a_faq ----------------------------*/
/**********************************************************/

#tab_faq {
    /* Haupttabelle */
    display: flex;
    align-items: center;
    justify-content: center;   
}
#fragez_faq {
    border-collapse: collapse;
    text-align: center;
    padding-top: 18px;
    padding-bottom: 0px;
}
.tdFa_faq {
    width: 80%;
    text-align: left;
    border-collapse: collapse;
    padding: 4px;
}
.tdFa2_faq {
    width: 80%;
    text-align: left;
    border-collapse: collapse;
    padding-left: 44px;
    border-bottom: 2px solid rgb(211, 211, 211);   
}
.tdFa0_faq {
    width: 80%;
    text-align: left;
    padding-bottom: 0px;
    padding-left: 44px; 
    border-bottom: 0px;
    border-top: 0px;
}

/*----------------- a_contact ----------------------------*/
/**********************************************************/

.text_contact {
    text-align: center;
}
.tbtr_contact {
    text-align: center;
    z-index: 10;
}
#tb_contact {
    /* tabelle auf der seite zentrieren */
    margin-left: auto;
    margin-right: auto;  
}
#instaBild_contact {    
    height: 32px;   
    padding-right: 12px;
}

/*----------------- a_about ------------------------------*/
/**********************************************************/

#film_about {
    /* Video */
    margin-top: 2px;
    background-color: rgb(215, 215, 215);
    border-radius: 10px;
    padding-top: 2px;
    /* Bild zentrieren */
    display: block;
    margin: 0 auto;
}
#text_about {
    text-align: center;
}
#tbtr_about {
    text-align: center;
    z-index: 10;
}
#table_about {
    margin-left: auto;
    margin-right: auto;
}

/*------------------- scrollbar grün ------------------------------*/

*::-webkit-scrollbar {
    /* breite scrollbalken */
    width: 17px;
}
*::-webkit-scrollbar-track {
    background: rgb(220, 220, 220);
    border: 1px solid rgb(188, 188, 188);
}
*::-webkit-scrollbar-thumb {
    background-color: rgb(122, 122, 122);
    border-radius: 10px;
    border: 1px solid rgb(255, 255, 255);
    height: 72px;
}