/*  C a s c a d e - M e n u e 
 * Hier nichts ändern, ich steuere die Funktion
 * des Handy - Menues (Hamburgermenu) und beinhalte 
 * Informationen zu Schriftbild und Farben. 
 * Ich werde vom Generator jedesmal neu erzeugt 
 * ---------------------------------------------- */

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

html, body{ 
  min-height: 100vh;
  overflow: auto;
}


html {
	background-color: white;
}


body {
	font-family: Arial, Helvetica, sans-serif;
	margin-left:0px;
	background-color:#eeeeee;
	max-width:1150px;
	/* max-width:max-content; */

}



  /* Einstellungen fuer fsm == 0 -> Big Footer - nicht fixiert */
  /*  html, body { height: 100%;}	-> nur html */
  html { height: 100%;}

  body > footer {
    position: sticky;
    top: 100vh;
    }




body#formular {background-color:white; width:100%;font-family:DejaVu,monospace; font-style:normal; font-weight:600; max-width:830px; font-size:20px;}

.show_broad {display:block;}
.show_small {display:none;}


#Gen_Header {background-color:RGB(86,126,182); height:100px;}
#Gen_logo   {width:100px; height:100px; padding: 5px; border-style:solid; border-width:10px; border-color:red;font-size:35px; font-weight:600;}
#Gen_h3     {float:right; padding-top:10px; color:white; background-color:inherit; margin-right:20px; font-size:30px;}


/* für 2 oder mehrere <div> nebeneinander */
.divbox {
 padding:5px;
 float:left;
 position:relative;
 width:100%;
 min-width:120px;
 margin-top:5px;
}


.radio-inline { width:20px; height:20px;}
.check-inline { width:20px;}

img {
 width:100%;
 height:auto;
 border-radius:15px;
} 

hr {
  background-color:darkblue;
  color:darkblue;
  border:darkblue;
  height:3px;
  margin-top:5px; 
}

hr.gray {
  background-color: #aaaaaa;
  color: #aaaaaa;
  border: #aaaaaa;
  height:5px;
}

hr.red {
  background-color: red;
  color: red;
  border: red;
  height:5px;
}



iframe {
 width:100%;
 max-width:1150px;
}

a  {color:darkblue; }
li {background-color:white;
    margin-top:8px;
   }


/* CSS für die Formulare */
br { clear:left; }

textarea	{ height:125px; width:95vw; max-width:800px; background-color:rgb(230,247,213);float:left;
			color:blue; padding:5px 5px 0px 10px;margin-left:5px;font-size:inherit;  font-weight:600;}
/* M e l d u n g  F e h l e r */
.meldung 	{background-color:#efefef; border-width:10px;}
textarea#fehler{ color:red; font-size:20px; font-weight:600;border-color:red;}
textarea.MenueGen:read-only{background-color:inherit ; color:darkblue; float:left;position:relative;}

label 		{display:block;width:300px;float:left;text-align:left;font-family:inherit; margin-left:5px;font-size:inherit;
		}

input 		{width:150px; min-height:21px; border:1px solid #006;color:#00008B; background-color:#E6F7D5;
		 font-family:inherit;font-size:inherit;font-weight:inherit;padding-left:5px;}
input:read-only	{background-color:white;}

.btn-link	{border:none; outline:none; background:none; cursor:pointer; color:#0000EE; 
		padding:0; text-decoration:underline; font-family:inherit;font-size:inherit;width:450px;
		}


h1 {text-align:left; font-weight:600; font-family:Tahoma,Arial,sans-serif;
              font-style:normal;color:darkblue; font-size:23px; margin-top:1px;margin-left:3px;}

h2 {text-align:left; font-weight:bold; font-family:Tahoma,Arial,sans-serif;
              font-style:normal;color:darkblue; font-size:19px; margin-top:2px;margin-left:3px;}

h3 { color:darkred; font-size:19px;}

h4 { color:darkblue; font-size:18px; font-style:italic;}

h5 { color:darkblue; text-align:left; font-weight:bold; font-family:"Courier New",Monospace;
               font-style:normal; font-size:18px; line-height:10pt; margin-top:1px;}

h6 { font-size:14px; color:darkblue;}


/* zur erklärenden Darstellung der spitzen Klammern siehe test80.php */

#h1x::before {content:"<h1>";}
#h1x::after {content:"</h1>";}

#h2x::before {content:"<h2>";}
#h2x::after {content:"</h2>";}

#h3x::before {content:"<h3>";}
#h3x::after {content:"</h3>";}

#h4x::before {content:"<h4>";}
#h4x::after {content:"</h4>";}

#h5x::before {content:"<h5>";}
#h5x::after {content:"</h5>";}

#h6x::before {content:"<h6>";}
#h6x::after {content:"</h6>";}

q::before {content: "<";}
q::after { content: ">";}




/* Menuetaste Handy Hamburger-Menue 3 Streifen */
.fa {
  display:none;
}

/* logo und Titel */
#headerX {
  background-image:url('https://neuhardt.at/images/header02.jpg');
  background-color:rgb(0,28,51);
  background-size:cover;
  color:white;
  max-width:1150px;
  height:130px;
  position:relative;
  padding:5px;
  white-space: normal;
  min-height:48px;
  z-index: 10;	/*in den Vordergrund*/
}


/* Breite für URL-Eingabefeld Hintergrundbild */
#hgb1 {width: 750px; }

.flex-container {
  display: flex;
align-items: flex-start;
}


#logoDiv {
  float:left;
  padding:0;
}


/* Standard 100px x 100px */
#logoX {
  width:110px;
  height:110px;
}


/* Titelzeile im Header */
#titel1Div  {float:right; width:100%; padding-right:20px;margin-left:5px;}
#h1_titel1Div  {font-family:Tahoma, sans-serif,Arial,sans-serif;color:white;font-size:25px;
		font-style:normal;font-weight:600;float:right; text-align:right; text-indent:6px;}


/* MenueAnzeige myLinks PC-Ansicht */
.topnav #myLinks {
 border:5px solid red;
 border-color:gray;
 border-radius: 10px;
 background-color:#eeeeee;
 color:black;
 top:138px;
 margin-bottom:100%;
 display:flex;
 padding-top:7px;
 padding-left:4px;
 padding-bottom:4px;
 padding-right:4px;
 z-index:1;
 position:absolute;
 float:left;
 min-width:200px;
 width:calc(100% - 10px);
 overflow-y: auto;
 max-height:80px;
 min-height:80px;
}

/* <select> Menueanzeige */
 .topnav select {
  background-color:inherit;
  border: none;
  border-radius:8px; 
  width:100%;
  height:40px;  
  white-space:break-spaces;
  font-size:inherit;
  margin-left:-3px;
  color:darkblue;
  cursor:pointer;
}


/* ersten Eintrag nur 1x anzeigen */
select option:first-child {
display: none;
}

span {white-space: nowrap;}
.formulartext { 
 display:inline-block; 
 background-color:darkgreen; 
 color:white; font-size:18px; 
 width:100vw; max-width:815px;
 padding-left:7px;
}

main.mainFormular {
width:820px; 
background-color:#eeeeee;
padding:5px 15px 15px 5px;
}

.MenueGen {display:block; background-color:#eeeeee;}


li {background-color:inherit;
   padding-left:15px;
  }


#uMenu {padding:20px 20px 20px;}

#uMenu a {display:list-item; }

/*#myLinks a,#uMenu a  {*/

#myLinks a,#myLinks label,#uMenu a  {
 color:darkblue;
 background-color: #eeeeee;
 text-decoration:none;
 flex-grow: 1;
 flex-basis:0;
 text-align:center;
}


/* M e n u e   A n i m a t i o n 
   Animation: Unterstrich - Linie */

/* Neuhardt 
https://www.tutorialspoint.com/Create-a-link-button-with-borders-using-CSS */

#myLinks a,#myLinks label{
            border-top: 2px solid darkblue;
            border-left: 2px solid darkblue;
            padding: 5px 5px 0px 5px;
            /*border: 2px solid darkblue;*/
            /*padding: 1px 5px;*/
            /*border-radius:8px;*/
            text-align: center;
            text-decoration: none;
	    text-align:center;
	    line-height:1;
         }


#myLinks a,#myLinks label {
  position: relative;
  padding-bottom: 3px;
  margin: 0px 3px 3px 3px;
  overflow:hidden;
}

#uMenu a {text-align:left;}

#myLinks a:after,#myLinks label:after,#uMenu a:after {
  content: "";
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
#myLinks a:hover:after,#myLinks label:hover:after,#uMenu a:hover:after {
  width: 100%;
  background: darkblue;
}



/* Symbole AUF / AB  DEL  einfügen etc:. */
a.symbols {
 font-size:30px;
 padding-top:30px;
 padding-right:40px;
 padding-bottom:30px;
 color:darkred;
}


ul {
 /*list-style-type: none;*/
 margin-left:15px;
 padding:0;
 max-width:300px;
/* display:0;*/
}

li {/*display:0;*/}

/* Haupt-Textblock */
#textX {
 background-color:#eeeeee;
 color:darkblue;
 margin-top: 0px;
 /* padding-top:    30px; geändert für Big Footer */
 padding-top:    105px; /* 35px Menue Oben:105px */
 padding-left:     15px;
 padding-bottom: 0px;
 padding-right:    15px;
 position:		 sticky;
 /* Wenn Menue links steht, nach rechts rücken */ 
 /*margin-right:0;*/
 /*margin-left:auto;*/

 width:calc(100% - 0px);
 max-width	:1150px; 
/* top:138px;*/
 top:225px; 
 left:0px;
 /* min-height:100vh; weg für Big Footer */
}

#Menue-Text-File {max-width:100%;}

/* n i c h t    i n   G e b r a u c h */
.box { 
   background-color:#eeeeee;
   color:darkblue;
   margin-top: 20px;
   padding:15px;
   box-sizing:border-box; 
   width: inherit;
   border:4px solid blue; 
   padding-bottom:200px;
}


#div_footer{padding:7px 12px 10px 12px;}

footer { 
  bottom:0; 
  /* position:fixed; für Big Footer geändert auf sticky + nun auf inherit float:left */
  /*position:sticky / inherit -> für Footer small/Footer big ;*/
  position:	inherit;
  float:left;
  width:100%;
  max-width:1150px;
  margin:auto;	
}

.footer_white_line {
  position: absolute;
  background-color: white;
  color: white;
  border: white;
  min-height:7px;
  width:100%;  
}

.footerX {
  background-color:rgb(0,28,51);
  color:white;
  font-size:16px;
  width:100%;
  text-align:right;
  padding: 8px;  
  white-space: normal;
  min-height:30px;
}



/* Handymenue Schalter */
.topnav {background-color:white;}
.topnav a {
  background-color:white;
  color:white;
  text-decoration:none;
  font-size:17px;
  display:block;
}



/* h a m b u g e r */
 input#hamburg  {display:none}
 label.hamburg  {display:none}
 label.hamburgX {display:none}



/* ---------------------------------------------------------------------*/
/* Hier kommen die CSS - Einstellungen fürs Handy nun 768, bisher 550px */
/* ---------------------------------------------------------------------*/
 @media screen and (max-width: 768px) {

.flex-container { display: inline-flex;}

/* logo und Titel */
#headerX {
 height:unset; 
 width:100%;
}

/* Haupt-Textblock 550px */
#textX {
 /*position:static  geändert Big Footer*/
 position:sticky;
 left:0;
 padding:3px 2px 20px 5px;
 width:100%;
 padding-bottom: 0px;
 padding-top:    105px; /* 35px Menue Oben:105px */
 /* margin-bottom:40px; */
}

#Menue-Text-File {max-width:95%;}


#logoX {
width: 55px;
height:55px;
max-width:70px;
max-height:70px;
}


/* Breite für URL-Eingabefeld Hintergrundbild */
#hgb1 { max-width: 290px; }

input {margin-left: 15px; /*margin-top:15px;*/ margin-bottom:15px; padding-top:10px; padding-bottom:10px;}
a.symbols {padding-bottom:10px;margin-bottom:10px;}

/* Titelzeile im Header */
#titel1Div  {float:right; width:100%; padding-right:10px; height: fit-content;}
#h1_titel1Div  {font-size:22px; font-weight:600;}

#Gen_Header {height:50px;}
#Gen_logo   {max-width:48px; max-height:48px; padding:2px; font-size:20px; border-width:3px;}
#Gen_h3     {font-size:20px;}

/* am Handy als unsichtbare Klasse */
.u { display:none }

.btn-link{max-width:200px;}

.show_broad {display:none;}
.show_small {display:block;}


/* für 2 und mehrere <div> untereinander */
.divbox {
 padding:5px;
 float:none;
 min-width:100%;
}

/* F o r m u l a r t e x t e */
span {white-space: normal;}
.formulartext {display:block; background-color:darkgreen; color:white; font-size:25px; font-weight:400; }
.MenueGen {display:none;}
main.mainFormular {max-width:100vw; padding:unset;}

/* wenn Handyansicht */

body {
 /* max-width:480px; */
}  

.mobile-container {
 /* max-width:480px;*/
  margin:auto;
  background-color:white;
  color:black;
  border-radius:10px;
}

#div_footer {padding:7px 0px 10px 0px;}

footer {
   /*max-width:480px;*/
   float:unset;
}

.topnav {
  overflow:hidden;
  background-color:white;
  position:relative;
  width:100%;
  float:left;
  padding:0px;
  margin-bottom:15px;
}

/* Standardmenue ausblenden */
.topnav #myLinks {
  display:none;
  position:fixed;
  top:60px;
  background-color:#eeeeee;
  border-color:gray;
  width:95%;
  max-height:80%;
  z-index:1;
  left:5px;
}


#myLinks a,#myLinks label,#uMenu a {line-height:200%;
   		text-align:left;
}
 

/* h a m b u r g e r
   hamburgX -> statisch */
label.hamburg,label.hamburgX { 
   display: block;
   background: #555;
   position: relative; 
   border-radius: 4px; 
   float:right; margin-top:3px;
   text-align:center; 
   /*font-size:35px;*/
   height: 50px;
   max-width:75px;
   color:white;
}

/* Hamburger mit Cross-Bar-Animation */

label.hamburgX:hover,label.hamburg:hover {
  background-color: #656565;
  color: white;
}


.line { 
   position: absolute; 
   left:10px;
   height: 4px; width: 55px; 
   background: #fff; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}


.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

input#hamburg:checked  ~  #myLinks {
   display:block;
}

/* <select> Options - Menue Handy */
.topnav select {
  margin-left:-5px;
  margin-top:0px;
  margin-bottom:7px;
  font-size:17px; 
  width:100%;
  height:inherit; 
}

/* end hamburger */



/* header Farben */
.active {
  background-color:rgb(0,28,51);
  color:white;
}


.footerX {
 /* display:none; */
 font-size:16px;
 left:1px;
 padding-bottom:10px;
}

#goTop {position:relative;  min-height:25px; }


img {
 border-radius:5px;
} 



} /* end max 550px */

/* ----------------------------------------------- max 360px --------------- */
@media screen and (max-width: 360px) {
/* - Cyrus CM17 (320x480px) + Xiaomi MI4 - */
body   {
 /*font-family:'Arial Narrow';*/
 /*font-size:12px;*/
}

#headerX {height:unset;}

#textX {
 padding:3px 2px 20px 5px;
 padding-bottom: 0px;
 padding-top:    105px; /* 35px Menue Oben:105px */
}

#logoX {
width: 44px;
height:44px;
max-width:50px;
max-height:50px;
}

/* Titelzeile im Header */
#titel1Div {
  padding-right: 10px;
}
#h1_titel1Div	{font-size:18px;}

label.hamburg	{transform:scale(0.7);}

} /* end max 360px */

@media screen and (max-width: 240px) {
/* -----  CAT B35 (240x320px ----- */
h1            	{font-weight:600; font-size:18px; }
h2            	{font-weight:600; font-size:16px; }
h3            	{font-weight:600; font-size:16px; }
h4            	{font-weight:400; font-size:16px; }
h5 	      	{font-weight:300; font-size:16px; }
h6 	      	{font-weight:300; font-size:14px; }


#h1_titel1Div 	{font-size:16px;}
.btn-link     	{max-width:100px;}
body	      	/*{font-size:12px;}*/
body#formular 	{background-color:white;font-family:DejaVu,monospace; font-style:normal; font-weight:600; font-size:12px;}
.formulartext 	{font-size:15px; font-weight:400;}
#Gen_Header   	{max-height:30px;}
#Gen_logo     	{max-width:43px; max-height:28px; padding:2px;font-size:15px;}
#Gen_h3       	{color:white;background-color:inherit; font-family:Arial,sans-serif; padding-top:0px;/*display: inline-block;*/ font-size:15px;}
#logoX 		{
		 width: 33px;
		 height:33px;
		 max-width:35px;
		 max-height:35px;
		}

.topnav a 	{font-size:14px;}
.topnav #myLinks{position:fixed; left:1px; height:170px;} 
a.symbols	{font-size:16px;}
#textX		{margin-bottom:0px; padding-bottom:40px;}	/*wenn footer none*/
footer		{/* display:none; */   float:unset;}
label.hamburg,label.hamburgX	{transform:scale(0.6);float:right;top:-8px; right:-8px;}
.line 		{width:35px}

 } /* end max 240px */