@font-face { font-family: 'Pacifico';
             src: url('../fonts/pacifico/Pacifico-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans';
             src: url('../fonts/open-sans/OpenSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiBold';
             src: url('../fonts/open-sans/OpenSans-SemiBold.ttf') format('truetype'); }

/* This class is added on scroll */
.fixed {
	position: fixed; 
	top: 0; 
	height: 8vh;
        min-height: 1.7em;
	z-index: 1;
}

body #screen{          
        
    
        height: 100vh;
        background:  url("../img/hof.jpg");  
        background-position-x: center;




        /*center: no-repeat; */
        background-size: cover; 
        background-attachment:fixed;
}
    
    
    
body{    
    
    
     
      
	color:  #222;
        font-family: 'Open Sans', sans-serif;
	font-weight: 400;
        
	font-size: 18px;
	text-align: center;
}
 

.blackboxtext{
    
        color: #333333;
        font-family: 'Open Sans';
        margin: 10px;
        font-size: 80%;
        padding: 0px 0px 10px 0px;
        hyphens: auto;
        text-align: justify;
        hyphens: auto;

        
	
    
} 



pre {
    
    
    position:  relative;  top: 40px;   
     z-index: 98;
  background: #333333;opacity: 0.9;
  color: #ff9933;
  width: 40%;
  padding: 30px 0;
  text-align: left;
  }


                /* Neue Navsettingsv  */
/* Footer */
.site-footer {
  position: relative;
  border-top: 1px solid #EEE;
  color: #999;
  padding: 10px;
  font-size: 0.8em;
  text-align: center;
}



.site-header {
  /* position: fixed;
  background: #000;*/
  color: #FFF;
  width: 100%;
  padding: 0px 0;
  /*text-align: center;*/
  z-index: 95;
}

.conten_ {
    
    	position: fixed;
	top: 0px;
        }


/* ------  Flexbox  Header--------------*/

header  {
	position: absolute;
        
	bottom: 0;
	width: 100%;
	height: 8vh;/*height: 11vh; marquee*/
        min-height: 1.7em;
	background: #fff;
}



.flex-container {
        max-width: 1000px;
        margin: auto;     
            
        display: -webkit-flex ;
        display: flex;        
        flex-direction: row;    
     position: relative;
     

     
}

.flex-box{
    display: table-cell;
    
        text-align: right;
        vertical-align:  middle;
        -webkit-flex-basis: 15%;
        flex-basis: 15%; 

        
       
        min-height: 1.7em; 
        
    display: flex;
    align-items: center;
    justify-content: center;     
        
      
}     
    



.flex-box:nth-child(2) {
    
    bottom: 0;
    flex-basis: 70%;
            height: 8vh;
        min-height: 1.7em; 
    
    
    
    left: 0;
    margin: auto;
    
    right: 0;
    text-align: center;
    top: 0;      
}








             /* -----    Menu Button   --------*/
            
.menu-btn {
    
    background-image: url("../img/goetheButton.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size:   contain;
    	border: none;  
	border-style: none;     
    
    overflow:  visible;
   /* border: medium none;*/
    
    height: 4.2vh;    
    padding-left: 30px;
    margin:  auto;    
    cursor: pointer;
    z-index: 3;    
}

#Logo{
    
   font-size: 1.1em;
   font-family: 'Open Sans SemiBold', sans-serif;
   font-weight:400;
   width: 60%;
/*    margin: auto !important;*/
   color: #C28E43;
    
}

.menu-btn:hover {
  opacity: 0.6;
     -moz-transform: rotate(180deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform: rotate(180deg); /* Safari */
-o-transform: rotate(180deg); /* Opera */
-ms-transform: rotate(180deg); /* IE9 */
transform: rotate(180deg); /* W3C */
transition-duration:1s;  

}




.Abmelde-btn {
    background-color: transparent;
    background-image: url("../img/logout.svg");
    background-position: center center;
    background-repeat: no-repeat;
    
    	border: none;  
	border-style: none;  
    
    
    
    
   /* border: medium none;*/
    cursor: pointer;
    height: 6vh;
    padding-left: 30px;
    margin:  auto; 

    cursor: pointer;
  

    z-index: 3;    
    
}








/* -----------------Screen Settings------------------------------ */

section {
	/*height: 100vh;*/
}



#screen1 {	
    height: 92vh;
    position: relative;
    overflow: hidden;
  
    background: url(../img/header.jpg) center no-repeat;  
    background-size:  cover;
}

p {

}





#screen2 { 
    
    height:100%;
   
    
    

}

#screen3 {
/* background-color: whitesmoke; */
    
}

#screenidx {  
        height: 100vh;
        background: url(../img/2024-12-28.jpg) center no-repeat;
        background-position-x: center;  
        background-size: cover; 
        background-attachment:fixed;
        }
 

#screencont   {

        
        background-color: whitesmoke;
        }
    



@media (max-width: 520px) {



}


/* ------------FLEXBOX ----  Contentboxen -------------------------------  */

#container {
 
 
    max-width: 90%;
    margin:auto;
    
  position: relative;
  padding-top: 60px;
  overflow:   auto;


  
  
}
.contFlexbox{
    display: -webkit-flex; 
    display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content:flex-end;
      align-items: flex-start;
      
      
    /*border: solid red;*/
    max-width: 100%;
    padding: 50px 0px 10px;
    padding-top: 60px;
    margin: auto;
}

.contFlInnenbox{
    
    
    
    flex-basis: 450px;
    
    width: 100%;
    padding: 0px;
    
    margin: 10px;
    
    
    
    
    
}




/* -----  tafelblock    ---------------------------------*/




.tafelblock{
    
    

    background: rgba(255, 255, 255, 1);        
    text-align:left; 
    padding:  0px ;
    
  
    
}




.tafelblock p { 
        margin:10px;
        font-size:  0.9em;
        padding:  10px 30px 10px 20px ;
        hyphens:  auto;
        
        text-align:  justify;
        cursor: default;
        
}   

div .imtafelblock {
    
        margin:10px;
       
       
        padding:  10px 30px 10px 20px ;
        hyphens:  auto;
        
        text-align:  justify;
        cursor: default;    
    
    
    
    
    
    
    
}






.tafelblock fieldset{ 
        margin: 10px;
        font-size:  80%;
      /*  padding:  10px 10px 10px 10px ;*/
        hyphens:  auto;
        
      /*  text-align:  justify;*/
        
        
}   

/*  Label mit Icon für Check/RadioBox -------*/

.tafelblock label{
    display:  flex;    
    vertical-align:  middle;  
    height: 2em;
      /*  display:table-cell;*/
  
 
}

.tafelblock p label{display: block;}




.tafelblock label span{
    line-height: 2em;
    display: inline-block;
   /* margin-top: 8px;*/
}




 /*---  Upload ------*/ 


 input.inputfile {
                display: none;
            }
label.uploadfile  {
                cursor: pointer;
                background: url(../img/ico/pdfupload.svg)  left no-repeat; 
                
                overflow: visible;
                background-size:   contain;
                margin:auto;  
 
                height: 20px;
                

            }
            
label.uploadfile span{
                display: flex;
                        flex-direction: column; 
                        justify-content:center;
                        margin-top:0; font-size: 70%;
                        margin-left: 35px;
                        word-wrap: break-word; word-break: break-all;
                }
          
 /*---  Upload ------*/                
                
                
                
                
                
                
                



 
                
.textins {
   background-image: url(../img/ico/checkunchecked.svg);
   background-repeat: no-repeat;
   vertical-align:middle;
   min-width: 30px; height: 25px;
   display:    inline-block;
   
    
   margin-right: 12px; cursor: pointer;
}


.icomeins_un
            {
            background-image: url(../img/ico/check_checked2.svg);
            background-repeat: no-repeat;
            vertical-align:middle;
            min-width: 30px; height: 25px;
            display:    inline-block;
             }     

         
                
/*--    icomeins:   1. Fallgruppen Radio, checkbox.  
                --  2. standarticon:display:none bzw inomeins:display:inline-block   --*/

  input[type="checkbox"],input[type="radio"]
            {
              display: none;
            } 
 

.icomeins {

    display: block;
    background-image: url(../img/ico/checkunchecked.svg);
    background-repeat: no-repeat;
    
    min-width: 35px;
    height: 25px;

    
    cursor: pointer;

}                
                
       





input[type="checkbox"]:checked + .icomeins
            {
            
            width: 30px; height: 25px;background-repeat: no-repeat;
            display:    inline-block;
            background-image: url(../img/ico/check_checked1.svg);
             }
             
             
input[type="radio"]:checked + .icomeins
            {
            
            width: 30px; height: 25px;background-repeat: no-repeat;
            display:    inline-block;
            background-image: url(../img/ico/check_checked1.svg);
             }            
             
        
             
             
             
      




.inputbox_flu select, fieldset:disabled .icomeins 
            {display: none;}

            
           
            
            
            
            
/* --- hochgestellt NAV Menue pna ------------------------------------------- */           
            
/* ----   label  fußlabel ------------------------------- */

label.fußlabeltext{
    box-sizing: border-box;
    display:   block;
    float:right;
    margin: 20px 15px 25px 15px;
    opacity: 0.8;
}

label.fußlabeltext:hover   {
    color: black;
    cursor:  pointer;
    box-shadow: 0 0 2px rgba(102, 102, 102, 1);
    border: 0px solid rgba(81, 203, 238, 1);
    border-collapse:  collapse;        

}

label.fußlabeltext input{display: none;}

label img { height: 20px; width: 30px;}               

span.fußlabeltext{position: relative; 
    bottom:3px;
    color:  #333;
    font-size: 50%;

}
span.fußlabeltext:hover {color:   orangered;} 

span.Meldebox{ 
        
    
    float:right;
    font-family:  sans-serif;
font-size: 60%;
color: #3807a3;
line-height: 1.3em;
    
    }

    
/* Teilt send-bottons auf    */
div.fußflex {
        
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: center;
padding: 1.2em 1.2em 0.2em 1.2em;
font-size:70%;font-family: sans-serif;
color: grey;  
border:0;     
        
        
        
    }    
    
    
    
 
/* --- hochgestellt NAV Menue  ------------------------------------------- */   
    
    
div.hochgestellt {display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 1.7em; width: 1.7em;
    /*background-image: url(../img/ico/ring.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;*/

    position: relative;
    bottom: 0.7em;
    }    
    
div.inlinehochgestellt, div.inlinehochgestellt :hover {
    position: relative;
    bottom:  0.2em;
    
    font-style:normal;
    font-size:   medium;   
    color:   #ff6600;text-shadow: 1px 1px 3px #666666;  
    }
        
    
.pushy-submenu-open button span.hochgestellt,
.pushy-submenu-open button div.hochgestellt{
        
    visibility: hidden;  
        
    }   
    
    
    
    

 

              
              
              
              
              

.tafelblockheader {
    

margin: 10px;
hyphens: auto;
padding: 30px 30px 14px 30px;
border-collapse: collapse;
border-spacing: 0;
margin: 0px;
line-height: 1.2em;
text-align: left;
font-size: 1.0em;
font-family: sans-serif;
color: #5e4f49;

position: relative;
z-index: 1;
    
}


/* --- Links  - href ---------------------------------*/

tafelblockheader a:hover{
    color: #ff6d18;
    font-style:  italic  ;
}


.tafelblock a{
	color: #006666;
        text-decoration: none;
        
       
}

  ul a:hover {
	color: #333333;
        font-style:  italic  ;
        font-weight: bold;
}




.Meldung {
      display: inline;
       /*   float: right;*/
        color: burlywood;  
    font-size: 60%;
}



/*--------- Tabellen  ------------*/



                  






        
.tafelblock table {
	border-collapse: collapse;  border-spacing: 0;

        width: 90%;
	font-size: 0.8em;
        margin:auto;
	
       
}

.tafelblock fieldset table {

        margin: 0px -0px 0px -00px;
        width: 100%;
        background:  rgba(232, 192, 179, 0.4) ;
        
        font-size: 1em;
        
        color: transparent; /* optional */

	text-shadow: 0 0 0 rgba(0,0,0,1);

	-webkit-transition: text-shadow 2s;  /* Einstellung der Dauer fuer Safari und ähnliche Browser */

	-moz-transition: text-shadow 2s; /* Einstellung der Dauer fuer Firefox und ähnliche Browser */
        
        
        
        
        
}

.tafelblock fieldset:disabled table {

        
        margin: 0px -0px 0px -00px;
        width: 100%;
        background:  rgba(232, 192, 179, 0.3) ;
        color:  rgba(121, 101, 94, 0.29);
        font-size: 1em;
        color:transparent;
        text-shadow: 0 0 5px rgba(0,0,0,0.3);
        
        	-webkit-transition: text-shadow 1s; /* Einstellung der Dauer fuer Safari und ähnliche Browser */

	-moz-transition: text-shadow 1s; /* Einstellung der Dauer fuer Firefox und ähnliche Browser */
        
}

.tafelblock tr {
	border-top: 0px solid;
	border-bottom: 0px solid;
}

.tafelblock tr:first-child {
	border-top: 0 none;
       
}



.tafelblock th, td {
        border: 0px solid #999999  ;
        font-size: 1.0em;

        padding-left: 0.5em;
}


.tafelblock thead th :first-child{
  
    
}


.tafelblock thead tr, tr:nth-child(odd) {
	background: rgba(236, 236, 236, 1);
}
.tafelblock thead tr, tr:nth-child(even) {
	background: rgba(255, 255, 255, 1);
}

.tafelblock th {
    font-size: 0.8em;
    

}

.tafelblock tbody th {
    
	text-align: left;
         hyphens: auto;
}


.tafelblock td:nth-last-child(2),td:last-child{
	min-width: 136px;
	
     
}

.tafelblock img:not(:first-child) {
	margin-left: 25px;
}

.tafelblock ul {
    margin-left: 0.3em;
    list-style-type:circle;
    margin-right: 2em;
    font-size: 80%;
    cursor: default;

}

.tafelblock .center{

text-align: center;
padding-top: 1em;
padding-bottom: 1em;
    
    
}


/* -- Abmeldebutton    --------------------------------------------------*/
.move-l {
    
    display:  inline-block;
    background-position: center center;
        }    
.move-r {display:   none;}


.ulclass p{ 
                     
                       
                        margin:-8px 0px 15px 0px;                      
                        font-size: 0.8em;
                        color:#c74d0c ;
                        word-break: break-all;
                   
                }
                      

/*  -------------   Formfelder    formgroup   ---------------------*/
   

div.inneroac{       /*ohne Acordeon*/
                    margin-top: 1.5em;
                    padding: 1em;
                    overflow: hidden;          
                    font-size: 80%;
    
}    


.inneroac p{
    font-size: 90%;    
    padding: 0.0em 0.8em 1.5em 0.8em;
}








.form-group input, .form-group span {
                        display: inline-block;
                        box-sizing : border-box;
                        background:  transparent;
                        color:   #7e182a;
                        letter-spacing: 0.05em;
                        border: 0;
                        width:100%;
                        border-bottom: 1px solid #ff9933;
                        
                        padding:.9em 0.5em 0.1em 0.8em;
  
                        outline: none;
                        cursor: pointer;
                        position: relative; z-index: 15;
  
  
     
}         

.form-group select  {
    
                            -moz-appearance: none;
                            -webkit-appearance: none;
                            appearance: none;  
                            border: 0;   

                         
                          border-bottom: 1px solid #ff9933;
                          background:  transparent; 
                         
                          color:#7e182a;   
                          padding:.75em 0.9em -0.0em 0.5em;  
                          width:100%;


 
}        

.form-group textarea { border:  none;
                        color:#7e182a;  
                        border: 0;
                        width: 100%;
                        border-bottom: 2px solid #999999;
                        background-color:    #ffffff;

                    height: 150px;
                          
                        caret-color:  red ;
  
}



           
.form-group {
                width:95%;  
                position: relative;

                margin:  auto;
                margin-bottom: 1.3em; /*Abstand der Felder*/
                
                font-size: 85%;
                color: #0a6c3e;
                
}


.form-group-flex {
       display: flex;
       flex-wrap:wrap; 
    
                width:95%;  
                position: relative;

                margin:  auto;
                margin-bottom: 1.3em; /*Abstand der Felder*/
}







.form-control-placeholder {
  position: absolute;
  
  /*Pos placeholder */
  top: 0px; left:10px;     
  
  transition: all 400ms;
  opacity: 0.7;
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder

{
  font-size: 80%;
  transform: translate3d(0, -60%, 0);  
  
  opacity: 0.7;
} 

.form-nurtext{  font-size: 80%;
                position: absolute;
                bottom:1.5em; left:10px;  
                opacity: 0.7; 
                

}
/*    -----       2 col  flex    ------------------------------------------------*/


.form-2col-flex {    
    
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        align-content: center;
        padding: 0.2em 1.2em 1.2em 0.2em;
        border:0;
    
}



      
                
/*   ---------------      RESPONSVE   -----------------------------*/






@media screen and (max-width: 538px) {
    
        body{ font-size: 12px;}
        
        
        
        
        
        
        
        
        
        
        
        
        .tafelblock p{ 
                        text-align:  left;
                        font-size: 0.9em;
                        padding:  10px 0px 10px 0px ;
                        hyphens:  auto;
                }
                
                
                
     
                
   
        .tafelblock  table {
                            width: 92%;       
                }
   
    
        .tafelblock	tr, 	th,	td {
                        display: block;
                }
        .tafelblock	tr {
                 /*  padding-left:  1.5em;*/
                        border-top: 2 none;
                }

        .tafelblock	td {
                        padding:  0.3em 0.5em 0.5em 0.5em;
                }
                
                
        .tafelblock	td:first-child { text-align: center;
                        
                }       
                
         .tafelblock	td:only-child { text-align: left;
                        
                }          
                
         
        .tafelblock tbody {   
                     /*   text-align: center;*/
                       
                }
       
            
               
        .tafelblock tr:nth-child(2n) {   
                        background: rgb(222, 150, 113); 
                        border-width:  thin;
                        border-color:  #198d8d ;
                }
             
         .tafelblock tr:nth-child(2n+1) {   
                        background: rgb(229, 174, 127); 
                }
                
        .tafelblock	thead th {
                        text-align:left;
                        font-size: 0.9em;
                        font-style: italic;
                        color:rgb(229, 174, 127);
                        background: rgb(102, 102, 102); 

                }   
                
        .tafelblock	thead tr {
                        border-bottom-color:  #006666;
                        border-bottom-width: 1px;
                }
          
                
                
                
                
        .tafelblock li {
                        margin-left: -1.6em;



                        }
                        
                        
                        
                        
                        
                        
                        
        /*------------------ kpflos --------------------------*/
                        
        
        
        .kpflos table, tr, td {          

	}

	.kpflos table {
		border:none;
                width: 100%;
	}

	.kpflos th {
		display:none;
	}

	.kpflos tr {
		float: left;
		width: 100%;
		
	}

	.kpflos td {
		float: left;
		width: 89%;
		padding:0.1em;
                padding-left: 0px;
                text-align: center;                
	}
        
        .kpflos td:first-child{
                font-style:  italic;
                font-weight:  bold;                
	}
        
        
        

	.kpflos td::before {
		content:attr(data-label);
		word-wrap: break-word;
		background: #514d4d;
                border-right:2px solid #302f2f;
                border-left:1px solid #302f2f;
                
		width: 25%;
		float:left;
		padding: 0.3em;
		font-weight:  lighter;
		
                color: beige;
                text-align: center;
                margin-top: -0.1em;
                margin-bottom: -0.1em;
	}
        
        
 
        
        
        
        
        
        
        
        
        
                        
                        
                        
                  
                        
        
}





     /*  ------     Bilder     ------- */         


.bild   {
           /* width : 100%;*/
           
           
           
            text-align:center;  
            margin: auto;
              position: relative;
              z-index: 0;
            
        }


.bild_center {     
            width: 100%;
            height: auto;
          
        }

.bild_links {
            float:left;
            border:none;
            margin-left:0px;margin-top:8px;margin-bottom:10px;margin-right:16px;
            text-align:center;



             max-width: 150px;
                height: auto;

}

.bild_rechts {
            float:  right;
              border:none;
            margin-left:16px;margin-top:1em;margin-bottom:0.5em;margin-right:0px;
            text-align:center;



             /*max-width: 150px;*/
                height: auto;

}


fieldset#ickbuche input{

visibility:  visible;  
transition:  ease-out 2.5s;
transition-delay: 0.8s;
 
}
fieldset#ickbuche:disabled input{

visibility: hidden;  
transition: all ease 0.3s;

 
}



input.button  {
    display: inline; /* Kein Umbruch */

    margin-left:7px; 

    
    font-size: 13px;
    color:#b1221c;height: 20px;
    line-height: 20px;
    letter-spacing:1px;
    text-decoration:none;
    text-transform:uppercase;
    border-style:solid; border-width:0px; padding:0px; text-decoration:none;  background-color:transparent;}

    input.button:link    {color:#00ff40;  background-color:transparent; }
    input.button:visited {  background-color:transparent; }
    input.button:hover   {color:#ff6600; background-color:transparent; }
    input.button:active  { color:#ff0; background-color:#a03; 
    }


.inputbox {
    
        font-family: 'Open Sans';
	font-weight: 400;
        
	
    
        width:  98%; 
        text-align:  left;
     

}



.inputbox_flu {
    
    
    background-color:  rgba(255,217,178,.1);
    border: 0;
    
    color: #006666;  
    text-align:right;width:2em;
    border-bottom: 1px solid #ff9933;
}

select.inputbox_flu {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        border: none; 
                                          
    
        width: 10em;
        text-align: center;
}

input.inputbox_flu {text-align:left;width:10em;}


form { 
    
    
}

div.backbutton{
    
       position: fixed;
       top: 150px;
       left: 8%;
       
       z-index: 10;
    
} 		


    
    
    
    
hr {

    
    border-top: 1px solid #999999;
    color: #f2e3c6;
    background-color: #FFFFFF;
    height: 1px;
    margin: 5px 10px 5px 10px;
    max-width: 100%;
    }
    

    
    
    
    
    
iframe {position: relative;
        top: 8vh;
     margin: auto;
     width: 100%;  
      
        
        
    }   
    
    
    
/*----- Accordion -----*/

 
 .toggle { 
     
     -webkit-box-sizing:border-box; 
	-moz-box-sizing:border-box; 
	box-sizing:border-box;
     
 } 
 
.toggle.tafelblockheader{
        cursor: pointer;
        width:100%;
	padding: 5px 30px 5px 27px;
        font-size: 1.0em;
	display:inline-block;
	border-bottom:1px solid #cccccc;	
	transition:all linear 0.15s;	
	border-radius: 0px;
    
 }
 
 .toggle.tafelblockheader:hover{
       
	font-style:  italic  ;}
 
 .round {
     
        overflow: hidden; 
        }
 
 
.inner {
        padding: 0em 0.5em 0em 0.5em;
        overflow: hidden;
        display: none;
      

    }
    
.inner .tafelblockheader{   
    color: #2a2a2a;
    border: 1px solid #9f763e24;
    font-family: 'Open Sans';
    font-size: 80%;

}



.inner .tafelblockheader:hover{  
       /* color: beige;*/
        }

    
    
    
    
    
    
    

/*-- Autocomplete -----*/

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
    font-size: 0.8em;
}

.autocomplete-items div {
  padding: 2px 10px 2px 10px;
  cursor: pointer;
  background-color: #ffffff;
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e59175; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: #c74d0c !important ; 
  color: #ffffff; }