/*{{{ schmale Displays */

body {
  height:100vh;
  grid-template-rows:1.2em 6.2em auto;
  display:grid;
}

footer {
  grid-row:1;
}

navA {
  grid-row:2;
}

navB {
  display:none;
}

article {
  display:none;
}

news {
  display:block;
  grid-row:3;
}

linkerRand {
  display:none;
}

rechterRand {
  display:none;
}

/*}}}*/

/*{{{ ab 48 em */
@media (min-width: 48em)  {

  body {
    height: 100vh;
    grid-template-rows: 5.8em auto 2.8em;
    grid-template-columns: 2fr 1fr;
  }

  navA {
    display: none;
  }

  navB {
    grid-row: 1;
    grid-column: 1 / 3;
    display: block;
    background-color: rgb(245,245,245);
  }

  article {
    display: block;
    grid-row: 2;
    grid-column: 1 / 3;
  }

  news {
    display: block;
    grid-row: 2;
    grid-column: 2 / 3;
  }

  footer {
    grid-row: 3;
    grid-column: 1 / 3;
  }
}
/*}}}*/

/*{{{ ab 76 em */
@media (min-width: 76em)  {

  .marquee {
    width:72%;
  }

  body {
    grid-template-columns: auto 50em 23em auto;
  }

  header {
    grid-column: 2 / 4;
  }
  
  article {
    grid-column: 2 / 4;
  }

  news {
    display: block;
    grid-column: 3;
    grid-row: 2;
  }

  navB {
    grid-column: 2 / 4;
  }

  footer {
    grid-column: 2 / 4;
  }

  linkerRand {
    grid-row: 1 / 4;
    grid-column: 1;
    display: block;
  }

  rechterRand {
    grid-row: 1 / 4;
    grid-column: 1;
    display: block;
  }

/*}}}*/

/*{{{ 85 em und mehr */

@media (min-width: 85em)  {
  body {
    grid-template-columns: auto 55em 30em auto;
  }

@media (min-width: 100em)  {
  body {
    grid-template-columns: auto 55em 35em auto;
  }

@media (min-width: 140em)  {
  body {
    grid-template-columns: auto 65em 40em auto;
  }

/*}}}*/

/*{{{ Marquee

  .marquee {
	z-index:1;
	position:relative;
	top:2em;
	left:-2em;
	width:100vw;
	max-width:100vw; /* iOS braucht das */
	padding:0.3em;
	white-space:nowrap;
	overflow:hidden;
	/* hier evtl. noch font-size, color usw. */
	background-color:lightblue;
	opacity:0.5;
	font-size:18pt;
	font-weight:800;
  }

  .marquee a {
	  color:darkred;
  }

  .marquee span {
	display:inline-block;
	padding-left:105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
	animation:marquee 25s linear infinite;
  }

  /* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
  .marquee span:hover {
	animation-play-state: paused; 
  }

  /* Make it move */
  @keyframes marquee {
    0%   {transform: translate3d(0,0,0);}
    100% {transform: translate3d(-100%,0,0);}
  }

}}} */

/* vim:set lines=64 columns=54: */