/* CSS Document für hks-seite*/

/*header und footer definieren*/
header {
	background: #ffebe6;
	padding: 0.1em;
    margin: 0.1em;                           
}

header p {
	font-size: 1.5em;
	color: #c32e04;
}

footer {
	background: #e6f2f7;
}
/*header - footer definition ende*/

/*navigationsmenue einrichten*/
nav > ul {
	list-style: none;   /*kein listen-aufzählungszeichen*/
	margin: 0;
	padding: 0;
	display: flex;   /*Eltern-element wird zum flexiblen container; inhalte nebeneinander aufgereiht; ihre breite flexibel vom browser festgelegt */
	flex-direction: column; /*hauptachse der inhalte senkrecht zur schreibrichtung*/
}

nav li {
	margin: 0.5em;
	padding: 0;
	font-size: 0.5em;
	flex: 1 1 0%;
}

@media (min-width: 45em) {
	nav > ul {
		flex-direction: row;
	}
	nav li {
		flex: 1;
		font-size: 1em;
	}

nav > ul.subsubmenu {
		flex-direction: row;
	}
	nav li {
		flex: 1;
		font-size: 1em;
	}

}


nav button {
    width: 20em;
	display: block;
	padding: 0.4em;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	border: 1px solid darkblue;
	border-radius: 10px;
	box-shadow: 0 5px 10px white inset;
	color: gold;
	background-color: darkblue;
	transition: all .25s ease-in;
}

nav button.auto {
    width:15em;
	display: block;
	padding: 0.4em;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	border: 1px solid darkblue;
	border-radius: 10px;
	box-shadow: 0 5px 10px white inset;
	color: gold;
	background-color: darkblue;
	transition: all .25s ease-in;
}


nav a {
	display: block;
	padding: 0.4em;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	border: 1px solid darkblue;
	border-radius: 10px;
	box-shadow: 0 5px 10px white inset;
	color: gold;
	background-color: darkblue;
	transition: all .25s ease-in;
}

nav li[aria-current] a {
	background-color: firebrick;
	color: gold;
}

nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
	color: darkblue;
	background-color: gold;
}

nav button:focus,
nav button:hover,
nav li[aria-current] button:focus,
nav li[aria-current] button:hover {
	color: darkblue;
	background-color: gold;
}





    
/*     submenu navigation links      */
nav .submenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
}
nav .submenu li { 
  display: block; 
  width: 15em;
}
 
/**     Show the submenu on hover, focus     **/
nav li:hover  .submenu,
nav li:active  .submenu, 
nav li:focus  .submenu { 
  visibility: visible;
  height: auto;
}

/* subsubmenu navigation links */
nav .subsubmenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000;
 
}
nav .subsubmenu li { 
  display: block; 
  width: 15em;
}
 
/**     Show the subsubmenu on hover, focus     **/
nav li.subsub:hover  .subsubmenu,
nav li.subsub:active  .subsubmenu, 
nav li.subsub:focus  .subsubmenu { 
  visibility: visible;
  height: auto;
 
}

/*Navigationsmenueeinrichtung ende*/




/*Schriftart*/
 body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-color : rgb(255,204,51);
 }
 span.einsfuenf{
 font-size: 1.5em
 }
 span.aq{
 color:#CC33FF;
 }
 
 /*Absätze, DIVs, Listen, Formulare in 12 Punkt*/ 
 p, div, li, form {
 font-size: 12pt;
 }
 
div.kurs {
background-color:white;
max-width: 850px;
border-radius: 10px;
}
 
 div.quiz {
background-color:white;
max-width: 450px;
border-radius: 10px;
}
 
input.quiz[type="submit"] {
 font-size: 20pt;
 width: 420px;
 height: 50px;
 border-radius: 5px;
 box-shadow:5px 5px #CECECE; 
 }
div.gruen {
background-color:#CCFF99;
border-radius:1rem;
}
div.rot {
background-color: #FFCCCC;
border-radius:1rem;
}
span.gruen {
background-color:#CCFF99;
border-radius:1rem;
}
span.rot {
background-color: #FFCCCC;
border-radius:1rem;
}

div.emp {
background-color:white;
max-width: 500px;
border-radius: 10px;
}

/*text-input innerhalb von tabellenzellen*/
input.tab[type="text"] {      /*einfache ziffernbreite*/
font-size: 1.5rem;
width: 1rem;
}
input.smalltab[type="text"] {      /*kleinere ziffern*/
font-size: 0.7rem;
width: 1rem;
}

input.doubtab[type="text"] {  /*doppelte ziffernbreite*/
font-size: 1.2rem;
width: 1.3rem;
}

/* 
input.emp[type="submit"] {
 font-size: 20pt;
 max-width: 450px;
 height: 50px;
 border-radius: 5px;
 box-shadow:5px 5px #CECECE; 
 }
*/ 

input[type="text"],
input[type="email"],
input[type="search"],
textarea { 
   font-size: 1.2em; 
   border: 1px solid gainsboro;
   color: teal;
   font-family: inherit;
   font-weight:300; 
}	
table {
font-size: 22pt; 
 }
 
 /*Überschrift 1 grauer Hintergrund mit weißer Schrift*/
 h1 {
 background-color: gray;
 color: white;
 }
 
 /*Überschriften 2 und 3 blau*/
 h2 {
 color: blue;
 }
 
 /*fette Passagen rot*/
 b {
 color: red;
 }
 
 /*kursives grün*/
 i {
 color: green;
 }
 .dopp {
 font-size: 2em;
 }
 .gr {
 text-align:right; 
 width:0.8em; 
 height:0.8em;
 }
 .rueckwaerts {
 direction:rtl; 
 unicode-bidi:bidi-override;
 }
 .emp {
 font-size: 1.6rem;
 max-width: 450px;
 height: 3rem;
 border-radius: 0.4rem;
 box-shadow:0.5rem 0.4rem #CECECE; 
 }