/* dieses Stylesheet wird nur in index_neon.htm aktiviert */

/* standard font size*/
html {
	font-size: 1em;
}


body {
  margin: 0;
  padding: 0;
  font-size: 16;
  overflow-x: hidden;

  @font-face {
  font-family: serif;
}
}

/* Hintergrund: Ziegelmauer bg-color = Fuge, linear-gradient = Ziegel*/

body {
  background-color: #332F2C;
  background-image: linear-gradient(335deg, black 23px, transparent 23px),
    linear-gradient(155deg, black 23px, transparent 23px),
    linear-gradient(335deg, black 23px, transparent 23px),
    linear-gradient(155deg, black 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}


/* page structur definition (grid model)*/

/* 
Mit der align-items-Eigenschaft erhält ein Grid Container eine Festlegung über die vertikale Ausrichtung aller Kindelemente 

Mit der align-self-Eigenschaft werden einzelne Rasterelemente vertikal am Raster ausgerichtet

Mit der justify-items-Eigenschaft erhält ein Grid Container eine Festlegung über die horizontale Ausrichtung aller Kindelemente

Mit der justify-self-Eigenschaft werden einzelne Rasterelemente horizontal am Raster ausgerichtet
*/

div, span, p {
	margin: 0;
	padding: 0;
}

.container {
	font-family: serif;	
	font-weight: bold;
	color: whitesmoke; 
}

.container {
	height: 100vh; 
	display: grid; 
	grid-template-rows: 4fr 4fr 2fr; 
	grid-template-columns: 1fr 3fr 1fr;
	justify-items: center;/* horizontale Ausrichtung der Kindelemente start/end/center*/
	align-items: center;  /* vertikale Ausrichtung der Kindelemente start/end/center*/
}

@media screen and (max-width: 760px) and (display-mode: landscape) {
/* Landscape-Format für mobil phones */
.container {
	height: 100vh; 
	display: grid; 
	grid-template-rows: 4fr 4fr 2fr; 
	grid-template-columns: 1fr 3fr 1fr;
	justify-items: center;/* horizontale Ausrichtung der Kindelemente start/end/center*/
	align-items: center;  /* vertikale Ausrichtung der Kindelemente start/end/center*/
}
}




.sign {
	grid-column-start:1; 
	grid-column-end:4; 
	grid-row-start:1; 
	grid-row-end:2;
	border: 0px white dotted;  
}

.logo {
	grid-column-start:2; 
	grid-column-end:3; 
	grid-row-start:2; 
	grid-row-end:3;
	margin: auto;
	border: 0px white dotted;
}

.menuToggle_container {
	grid-column-start:1; 
	grid-column-end:2; 
	grid-row-start:3; 
	grid-row-end:4;
	justify-self: center;
	align-self: center;
	border: 0px yellow dotted;

	position: relative;/* wird damit zum referenzpunkt für das toggle menü */  
}


.date {
	grid-column-start:2; 
	grid-column-end:3; 
	grid-row-start:3; 
	grid-row-end:4;
	justify-self: center;
	align-self: center;
	border: 0px green dotted;
	font-size: 6vw;
}

.button {
	grid-column-start:3; 
	grid-column-end:4; 
	grid-row-start:3; 
	grid-row-end:4;
	justify-self: end;
	align-self: center;
	border: 0px white dotted;
	font-size: 7vw;
}




/* ende der struktur definition */



	
	

/* "sign display: flex;" als Flex-Container muss hier sein, damit die Leuchtbuchstaben bündig stehen */

.sign {
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: radial-gradient(ellipse 50% 35% at 50% 80%, #06f, transparent);
	letter-spacing: 2;
	color: #cff;
	text-shadow: 0 0 0.6rem #cff, 0 0 1.5rem #00FFFF,
    -0.2rem 0.1rem 1rem #00FFFF, 0.2rem 0.1rem 1rem #00FFFF,
    0 -0.5rem 2rem #00BFFF, 0 0.5rem 3rem #00BFFF;
	animation: shine 2s forwards, flicker 3s infinite;
}



/* Herzog Logo */
.logo {
	text-align: center;
}

.logo img {

	object-fit: contain;
	max-width: 192px;
}

@media screen and (max-width: 800px) and (display-mode: landscape) {
/* Landscape-Format für mobil phones */
.logo img {
		object-fit: contain;
		max-width: 100px;
}
}


.button {
	padding: 0 1px;
}


/* damit der Link nicht blau dargestellt wird */
.button a {
	color: whitesmoke;
	text-decoration: none;
}

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #cff;
    text-shadow: 0 0 0.6rem #cff, 0 0 1.5rem #00FFFF,
      -0.2rem 0.1rem 1rem #00FFFF, 0.2rem 0.1rem 1rem #00FFFF,
      0 -0.5rem 2rem #00BFFF, 0 0.5rem 3rem #00BFFF;
  }
  28%,
  33% {
    color: #00FFFF;
    text-shadow: none;
  }
  82%,
  97% {
    color: #00BFFF;
    text-shadow: none;
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}

@keyframes shine {
  0% {
    color: #06f;
    text-shadow: none;
  }
  100% {
    color: #cff;
    text-shadow: 0 0 0.6rem #cff, 0 0 1.5rem #00FFFF,
      -0.2rem 0.1rem 1rem #00FFFF, 0.2rem 0.1rem 1rem #00FFFF,
      0 -0.5rem 2rem #00BFFF, 0 0.5rem 3rem #00BFFF;
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}


/* NAVIGATION*/



/* Sandwich Position */
.menuToggle
{
  position: absolute;
  top: 0;
  left: -9vw;/* damit ist das Menü ausser Sicht geparkt*/
  border: 0px green dotted;
  -webkit-user-select: none;
  user-select: none;
}

.menuToggle a
{
  text-decoration: none;
  color: #232323;
  transition: color 0.7s ease;
}

.menuToggle a:hover
{
  color: darkred;
}


.menuToggle input
{
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  position: absolute;
  top: -0.1rem;
  left: -0.5rem;

  cursor: pointer;
  
  
  opacity: 0; /* verbergen */
  z-index: 2; /* über dem Hamburger Menü platzieren */
  
  -webkit-touch-callout: none;
}

/*
 * Hamburger Menü
 */
.menuToggle span
{
  display: block;
  width: 3.1rem;
  height: 0.4rem;
  margin: 0.2rem 0 0 0.9rem;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 0.5rem;
  
  z-index: 1;
  
  transform-origin: 0.8rem 0;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

.menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

.menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Alle Hamburger Scheiben in Kreuz konvertieren */
.menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-.4rem, -.2rem);
  background: #232323;
}

/*
 * den Mittleren verbergen.
 */
.menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * den letzten in die andere Richtung biegen
 */
.menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -.2rem);
}

/*
 * Navigation unten links am Bildschirm platzieren */
.menu
{
  position: absolute;
  bottom: -10px;
  font-size: 1.1rem;
  
  width: 10rem;
  margin: -250px 0 0 -30px;
  padding: 15px 20px 65px 35px;
  
 
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.menu li
{
  padding: 2px 0;
}

/*
 * von links reinschieben
 */
.menuToggle input:checked ~ ul
{
  transform: none;
}


/*
 * Reserve
 */