body {
font-family: monospace;
font-weight: lighter;
}
body {
/*background: white;*/
background: #0FF;/*cyan*/
}
html {
  /*background: white;*/
background: #F0F;/*magenta*/
}

html.nacht{
  filter: invert(1);
  min-height: 100vh;
  min-width: 100vw;
}

html.nacht img.original {
  filter: invert(1); /* hebt die Invertierung wieder auf */
}

p {
text-align: center;
}

img {
width: auto;
height: 100%;
}
* { box-sizing: border-box; }



	
	article {
  width: 320px;
  height: 440px;
  margin-top: 2em;
  margin-right: auto;
  margin-left: auto;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
}

article.horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

article.vertikal {
  display: block;
  overflow-x: hidden;
  overflow-y: scroll;
}

article.vertikal img {
  width: 360px;
  height: auto;
  display: block;
}
	
	    .screen {
      /* Spielfläche overflow funktioniert nicht, checken*/
      width: 320px;
     /* height: 568px;*/
     height: 620px;
      /*overflow: visible;
      /*overflow-x: scroll;*/
      /*overflow-y: scroll;*/
	/*overflow: scroll;
      overflow-x: visible;*/  
	overflow: hidden;
      display: grid;
      border: 3px dashed #00f;
      grid-template-rows: 20px 450px 1fr auto;
      /*background: white;*/
     background: #FF0;/*yellow*/
	margin: auto;
	margin-top: 50px;/*120*/
    }
	
	    .statusleiste {
      display: flex;
      border: 2px dotted cyan;
      width: 320px;      
      align-items: center;
      justify-content: space-between;
      padding: 0 8px;
      color: #333;
      font-size: 10px;
      font-weight: lighter;
      background: rgba(255,255,255,0.8);
      margin: auto;
        position: sticky;
  top: 0;
  z-index: 10;
    }
	
	

    .appraster {
      display: grid;
      border: 2px dotted red;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      padding: 8px 4px;
    }
	

    .menue {
      /*background: transparent;*/
      background: rgba(0,0,0,0.2);
      display: grid;
      border: 2px dotted magenta;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr;
      padding: 4px 12px;
      width: 320px;
      margin: auto;
    }	
  /* zentrieren funktioniert nicht*/  
    .home {
    display: flex;
    width: 320px;
   /* text-align: center;*/
    font-size: 15px;
    /*grid-column-start: 1;
	grid-column-end: 5;*/
	grid-row-start: 4;
	grid-row-end: 4;
	border: 2px dotted purple;
    }
    
	.apprahmen {
      display: flex;
      border: 1px dashed orange;
      background: rgbs(127,127,127,0.2);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      cursor: pointer;
      padding: 4px 2px;
    }

    .app-icon {
    /*background: orange;*/
    border: 1px dotted orange;
      width: 50px;
      height: 50px;
      border-radius: 12px;
      box-shadow: 0 0 3px rgba(0,0,0,0.1);

    }
    
    .app-unterschrift {
	border: 1px dotted orange;
      font-size: 8px;
      color: #333;
      text-align: center;
      font-weight: 300;
    }
    
    .iconleer {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      box-shadow: 0 0 3px rgba(0,0,0,0);
      background: rgba(0,0,0,0.1);
    }
    .app-icon:hover {
    transform: scale(1.1);
    /*width:55px;
    height:55px;*/
    }

    .app-icon img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }



    .menue .app-icon {
      width: 44px;
      height: 44px;
    }
    .menue .app-icon:hover {
    transform: scale(1.09);
      /*width: 48px;
      height: 48px;*/
    }  
 
 /*Darkmodesymbole*/
 #nacht-toggle {
  font-size: 12px;
  display: inline-block;
  transition: transform 0.1s;
}

#nacht-toggle:hover {
  transform: scale(1.3);
}
    
/* unvisited link */
a:link {
color: black;
text-decoration: none;
}

/* visited link */
a:visited {
color: black;
}

/* mouse over link */
a:hover {
transform: scale(1.1);
  display: inline-block; /* nötig damit transform auf inline-Elemente wirkt */
color: black;
} 

a footer{
text-align: center;
}

    /* Handy */
@media (max-width: 720px)
{
    .screen {

	margin-top: 20px;
    }
 }

@media (max-width: 390px)
	{
		.screen {
			width: 100vw;
			height: 100vh;
			transform: scale(0.8);
			transform-origin: top center;
			/*margin-top: 0;*/
		
		}
		.statusleiste{
			width: 100vw;
		}	
		.menue{
			width: 100vw;
		}	
		article{
			width: 100vw;
		}
		article.vertical img {
			width: 100vw;
		}
	}