/* Stylesheet für die "Spielstadt"-Website */


:root {
  --bg-color: rgb(136, 215, 248);		/* hellblau */
  --tx-color: rgb(102,  81,  84);		/* dunkler */
  --darker:   rgb( 52,  31,  64);		/* noch dunkler */
  
}

*         {
            box-sizing: border-box;
          }

body		{	background-color: #A4D0DC ;
				font-family: Montserrat, Tahoma, sans serif ;
				color: var(--tx-color) ;
				padding: 1em ;
				line-height: 1.5 ;
			}
body.start	{	background-image: url(plakat.jpg) ;
				background-repeat: no-repeat ;
				background-size: cover ;
			}
p.clr		{	clear: both }
img.right	{	float: right ; margin-left: 1em ; margin-bottom: 1em ; width: 160px }
img.illu	{	float: right ; margin-left: 1em ; margin-bottom: 1em }
img.logo	{	display: block ; box-shadow: 10px 10px 5px silver ; margin-bottom: 1em ; width: 200px ; background: white }
img.resiz	{	max-width: 100% ; height: auto }

header    	{
				font-size: 32px ;
				color: blue ;
/*				text-align: center ; */
				margin-bottom: 2em ;
			}
header a.h	{	display: block ; padding: 3px ; text-decoration: none }
header a:link		{	color: var(--tx-color) ; text-decoration: none }
header a:visited	{	color: var(--tx-color) ; text-decoration: none }
header a:hover		{	color: var(--darker) ; text-decoration: none }
			
header > label { display: block ; float:right }            /* das ist der Whopper rechts aussen fürs Menü */

/* Aufbau der Navigation                                                */
/* =====================                                                */
/* Die Navigation ist als verschachtelte <ul> gestaltet.                */
/* Für die einzelnen <li> gilt dann jeweils:                            */
/* - entweder enthalten sie einen Link zu einer neuen Seite.            */
/* - oder sie repräsentieren ein Untermenü. In diesem Fall bestehen     */
/*   sie aus drei Elementen:                                            */
/*   1. einem Label:    <label for="hm...">Menu-Name</label>            */
/*   2. einer Checkbox: <input type="checkbox" id="hm3" />              */
/*   3. der <ul> mit den Menü-Einträgen.                                */

nav       { position: relative ;
            font-family: Arial, sans-serif ;
			font-size: 16px ;
			text-align: left ;
			background-color: transparent ;
          }

/* hier kommt das Hauptmenu */
/* ======================== */
/* Zunächst mal: wir erlauben hier drei Stufen, die werden mittels    */
/* verschachtelter <ul>s gemacht, und die sind alle ausgeblendet.     */
nav ul  { display: none ; }
nav ul ul { display: none ; }
nav ul ul ul { display: none ; }

/* Ein- und Ausblenden des ganzen Menübaums wird über eine unsicht-   */
/* bare Checkbox gesteuert, die als erstes - also noch vor den        */
/* einzelnen Menu-Einträgen - in der <nav>-Sektion steht:             */
/* <input type="checkbox" id="hauptmenu" />                           */
/* Damit sie nicht stört, blenden wir sie aus.                        */
input#hauptmenu { display: none }
input#hauptmenu:checked + ul { display: block }
/* Wie man sieht, wird die danach folgende <ul> eingeblendet, wenn    */
/* die "hauptmenu"-Checkbox gewählt ist - ansonsten bleibt sie        */
/* unsichtbar.                                                        */
/* Wie aber wähle ich die "hauptmenu"-Checkbox aus, wenn sie ja       */
/* ausgeblendet ist? Nun, zu dem Zweck haben wir einen <label> für    */
/* sie gemacht, den man anklicken kann. Und der ist als Whopper zu    */
/* sehen.                                                             */
  
/* die einzelnen Menü-Einträge belegen je eine Zeile.                 */
/* Wenn's nicht ein Menü-Eintrag ist, sondern ein Knotenpunkt für ein */
/* Sub-Menü, dann ist es ein Label und hat dieselbe Darstellung wie   */
/* ein Menü-Eintrag.                                                  */
/* Menüs erster Stufe:                                                */


nav > ul { padding-right: 2px ; padding-left: 0 ; list-style-type: none }
nav > ul > li  { padding: 0px }
nav > ul > li > a  {
              display: inline-block ;
              border: solid 2px var(--tx-color) ;
			  border-right-color: var(--darker) ;
			  border-bottom-color: var(--darker) ;
			  border-radius: 5px;
              height: 32px ; width: 160px ;
              padding: 2px ;
              margin: 2px ;
              text-align: center ;
              text-decoration: none ;
            }

nav > ul > li > label {
              display: inline-block ;
			  position: relative ;
              border: outset 2px rgb(185, 145, 0) ;
              background-color: rgb(235, 195, 0) ;
              height: 27px ; width: 160px ;
              padding: 2px ;
              margin: 2px ;
              text-align: center ;
            }

/* Menüs zweiter Stufe:                                               */
nav > ul > li > ul { padding-left: 16px ; list-style-type: none }
nav > ul > li > ul > li a {
              display: inline-block ;
              border: outset 2px rgb(185, 145, 0) ;
              background-color: rgb(235, 195, 0) ;
              width: 144px ; min-height: 20px ;
              padding: 2px ;
              margin: 2px ;
              text-align: center ;
              text-decoration: none ;
              color: black ;
            }
nav > ul > li > ul > li > label {
              display: inline-block ;
              border: outset 2px rgb(185, 145, 0) ;
              background-color: rgb(235, 195, 0) ;
              width: 144px ; min-height: 20px ;
              padding: 2px ;
              margin: 2px ;
              text-align: center ;
              text-decoration: none ;
              color: black ;
            }
/* Wenn sich hier eine Checkbox befindet, und wenn die "checked" ist, */
/* dann soll die dahinterfolgende <ul> angezeigt werden.              */
nav > ul > li > input[type=checkbox]:checked + ul { display: block }

/* Menüs dritter Stufe:                                               */
nav > ul > li > ul > li > ul { padding-left: 16px ; list-style-type: none }
nav > ul > li > ul > li > ul > li > a {
              display: inline-block ;
              border: outset 2px rgb(185, 145, 0) ;
              background-color: rgb(235, 195, 0) ;
              width: 128px ; min-height: 20px ;
              padding: 2px ;
              margin: 2px ;
              text-align: center ;
              text-decoration: none ;
              color: black ;
            }
nav > ul > li > ul > li > ul > li > label {
              display: inline-block ;
              border: outset 2px rgb(185, 145, 0) ;
              background-color: rgb(235, 195, 0) ;
              width: 128px ; min-height: 20px ;
              padding: 2px ;
              margin: 2px ;
              text-align: center ;
              text-decoration: none ;
              color: black ;
            }
/* Wenn sich hier eine Checkbox befindet, und wenn die "checked" ist, */
/* dann soll die dahinterfolgende <ul> angezeigt werden.              */
nav > ul > li > ul > li > input[type=checkbox]:checked + ul { display: block }
/* Die Checkboxes selber müssen aber nicht angezeigt werden.          */
nav input[type=checkbox] { display: none }

/* einige besondere Elemente */
div#daten		{	background: #A3EAF8 ;
					padding: 1em ;
					border: 3px solid #83CAE8 ;
					border-radius: 1em ;
					box-shadow: 10px 10px 5px #73BaD8 ;
					float: left ;
					margin-bottom: 1.5em ;
				}


/********************************/
/* Definitionen für Desktops    */
/********************************/

@media all and (min-width: 800px) {
  body 			{ 	/* width: 100% ; */
					z-index: 1 ;
					max-width: 1024px ; margin: auto ;
				}
  header		{	position: relative ;
					height: 3em ;
				}

  header label	{ display: none }          /* das ist der Whopper rechts aussen fürs Menü */
                                           /* den brauchts bei der Desktop-Version nicht, */
                                           /* weil die Navigation immer sichtbar ist.     */

  nav           {	z-index: 2 ;
					font-size: 50% ;
					/* background: lime ; 
					position: absolute ; top: 37px ; left: 0 ;*/
                }
  /* das Hauptmenu ist immer sichtbar                                   */
  nav ul        { 	margin: 0px;
					padding: 0px;
					display: block ;
                }
  /* die Items des Hauptmenüs stehen nebeneinander                      */
  nav ul li     { 	list-style-type: none;
					float: left;
/*					border: solid 2px #84B0BC ;
					border-radius: 5px; */
					position: relative;
					z-index: 2 ;
                }
  /* die Items der Untermenüs stehen untereinander                      */
  nav ul li ul li  		{ 	list-style-type: none;
							float: none ;
							position: relative ;
						}
  /* aber Menüpunkte dritter Stufe stehen rechts neben denen 2. Stufe   */
  nav ul li ul li ul    {	position: absolute ;
							top: 0 ; left: 100% ;
						}
  /* wenn man über einen Hauptmenüpunkt hovert, wird das Untermenü      */
  /* angezeigt                                                          */
  nav>ul>li:hover       { background-color: transparent }
  nav>ul>li:hover>label { float: none }
  nav>ul>li:hover>ul    {
                          display: block;
         				  background-color: transparent ;
                        }
  nav>ul>li:hover>ul>li>label       { float: none }
  /* und dasselbe fürs Hovern über einem Untermenüpunkt                 */
  nav>ul>li>ul>li:hover			{ background-color: transparent }
  nav>ul>li>ul>li:hover>label	{ float: none }
  nav>ul>li>ul>li:hover>ul      {
									display: block;
									background-color: transparent ;
								}

  section		{	margin-top: 64px }
  
  /* Stichwort-Anzeige */
  /* Für Updates */
  table.updt		{	border: none ; border-collapse: collapse ; background: lightyellow }
  table.updt th		{	text-align: left ;
						vertical-align: top ;
						border: 2px solid white ;
						padding: 2px 4px ;
					}
  table.updt td		{	border: 2px solid white ;
						padding: 2px 4px ;
					}
  textarea			{ width: 600px ; height: 200px }
  input				{ width: 600px ; }
  /* für die Anzeige */
  .stichwort p		{	margin: 2px 0 0 10px }
  .stichwort h3		{	border-top: none ;
						padding: 2px 2px 2px 4px ;
						background: #ccc ;
						margin: 1em 0 0 0 ;
					}
  .stichwort h4		{	margin: 4px 0 0 10px }
  

  /* Für die Rechnungs-Tabelle */
  table#whrechnung	{	border-collapse: collapse ; font-family: Verdana, Arial, sans-serif }
  table#whrechnung tr 					{	background-color: #ffffff; }
  table#whrechnung tr:nth-child(even)	{	background-color: #f2f2f2 ; }
  table#whrechnung td					{	border: 1px solid #f2f2f2 ; padding: 2px 4px ; vertical-align: top }
  table#whrechnung th					{	border: 1px solid #f2f2f2 ; padding: 2px 4px ; text-align: left }
  table#whrechnung td.whein				{	text-align: right }
  table#whrechnung td.whaus				{	text-align: right ; color: red }
  table#whrechnung td.nob				{	border: none }
  table#whrechnung th.nob				{	border: none }
  table#whrechnung .c					{	text-align: center }

  table#whformular						{	border: none ; border-collapse: collapse }
  table#whformular td					{	border: 3px solid white }
  table#whformular th					{	border: 3px solid white ; text-align: right ; padding: 2px 4px }
  table#whformular input[type=date]		{	width: 16ch }
  table#whformular input[type=number]	{	width: 4em }
  table#whformular input[type=text]		{	width: 24em }
  table#whformular input#ein			{	width: 16ch }
  table#whformular input#aus			{	width: 16ch }
  form#whformular						{	background: #ccccff ; padding: 0 1em ; border: 4px outset #aaaaff ; float: left }
  p#buchungsid							{	size: 200% }

  div#saldi								{	float: right ; border: 1px solid black ; background: #ddffdd ; padding: 4px }
  div#saldi h3							{	margin: 0 0 2px 0 ; border-top: none }
  table.grid							{	border: none }
  table.grid td							{	border: none ; padding: 0 4px }
  table.grid td.r						{	text-align: right }

  
  table.steuertab						{	border: none ; border-collapse: collapse}
  table.steuertab td					{	border: 1px solid black ; padding: .3em 1em }
  table.steuertab td.r					{	text-align: right }
  table.steuertab td.komm				{	border: none }
  table.steuertab tr.zwi				{	font-weight: bold }
  
  table.aufwandtab						{	border: none ; border-collapse: collapse}
  table.aufwandtab td					{	border: 1px solid black ; padding: .1em 1em }
  table.aufwandtab td.r					{	text-align: right }
  table.aufwandtab tr.zwi				{	font-weight: bold }
  table.aufwandtab th					{	border: 1px solid black ; padding: .1em 1em ; background: #ddd }
  table.aufwandtab th.r					{	text-align: right }
  table.aufwandtab td.nob				{	border: none }

  table.over							{	border: none ; border-collapse: collapse}
  table.over td							{	border: 1px solid black ;
											vertical-align: top ;
											padding: 2px 4px ;
										}
  table.over td.nob						{	border: none ; padding-right: 10px ; cursor: pointer }
  table.over th							{	border: 1px solid black ;
											vertical-align: top ;
											padding: 2px 4px ;
										}
  table.details							{	border: none ; border-collapse: collapse }
  table.details td						{	border: 1px solid black }
  table.details th						{	border: 1px solid black ; text-align: right ; padding: 2px 4px }
  table.details input[type=date]		{	width: 16ch }
  table.details input[type=number]		{	width: 4em }
  table.details input[type=text]		{	width: 24em }
  table.details input#ein				{	width: 16ch }
  table.details input#aus				{	width: 16ch }
  
  table.details div#text				{	margin: 1em ; padding: .5em ; background-color: lightyellow }
}


/******************
 Spezialfälle für Handhelds
*******************/
@media all and (max-width: 800px) {
	img.full { width: 95% }
}

div#debugtxt	{	clear: both ;
					margin-top: 2em ;
					border-top: 4px solid silver ;
					font-family: Georgia ;
				}