/********************************************
        Laufschrift für Editorvorlage 
 ********************************************/
.marquee { /* Hier wird der eigentliche Text formatiert */
	position:relative;
	max-width: 90vw; /* iOS braucht das */
	white-space: nowrap;
	overflow: hidden;
	/* hier evtl. noch font-size, color usw. */
	margin:auto;
	width:100%;
	font-style: italic;
	font-variant:small-caps;
	font-size: 1.2em;
	background-color:yellow;
	color:#444400;
	border-radius:250px;
	box-shadow: 2px 3px 5px 0px red, 2px 5px 5px 0px gold inset;
}
#marquee .schrift { /* spezielle SChriftformatierung */
    font-weight: bold;
    text-shadow:   0px   0px 10px white,
                   5px  -5px 10px #F8FF9D,
                 -10px -10px 20px #F5FE5C,
                  10px -15px 20px #FDDB33,
                 -10px -20px 20px #FFC126,
                  10px -25px 20px #FF7808,
                 -10px -30px 20px #F95801,
                  15px -35px 20px #FE7606,
                 -15px -40px 20px #FD5C01,
                  15px -45px 15px #E54600,
                 -20px -50px 15px #D23700,
                  20px -55px 15px #B82B00,
                 -20px -60px 15px #A11301,
                  20px -65px 15px #981D01,
                 -25px -70px 10px #851200,
                  25px -75px 10px #690D00,
                 -25px -80px 10px #3E0600
	        ;
}
.marquee span {/* Angaben zum eigentlichen Textfeld */
	display: inline-block;
	padding:3px;
	padding-left: 100% ; 
	text-decoration:none;
	animation: marquee 20s 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: translateX(0); }
	100% { transform: translateX(-100%); }
}
.marquee .vor { /* HIntergrundfarbe der einfahrenden Laufschrift*/
	width:30%;
	z-index:1;
	height:100%;
	position:absolute;
	background-image: linear-gradient(to right,darkred ,transparent);
}
.marquee .nach { /* HIntergrundfarbe der ausfahrenden Laufschrift*/
	right:0px;top: 0px;
	background-image: linear-gradient(to left, darkred, transparent);
}
.marquee img { /*eventuelle Bilder im Lauftext formatieren und psositioniern */
	vertical-align:-20px;
	width: auto !important;
	height: 80px !important;
}

/********************************************
         Vorlage für die Speisekarte
 ********************************************/
div.vorlage_1 {
	positon:relative;
	width:95%;
	height:auto;
	margin:auto;
	margin-bottom:10px;
	border-bottom:1px solid;
}
div.vorlage_1 p:nth-child(2){
	font-size:1.2em;
	font-style:italic;
}
div.vorlage_1 p:nth-child(1){
	font-size:1.2em;
	float:right;
	max-width: 150px;
	text-align: right;
}
div.vorlage_1 p:nth-child(3){
	font-size:1em;
}

/********************************************
      Vorlage für Starwars Lauftext
 ********************************************/
.starwars_container {
  width: 100%;
  margin:auto;
  height: 300px;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
}
.fade {
  position: relative;
  width: 100%;
  min-height: 45vh;
  top: -105px;
  background-image: linear-gradient(0deg, transparent, black);
  z-index: 1;
}
.star_wars {
  display: flex;
  justify-content: center;
  position: relative;
  height: 200px;
  color: #feda4a;
  font-size: 300%;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 150%;
  perspective: 400px;
  text-align: justify;
  hyphens: auto;
}
.crawl {
  position: relative;
  transform-origin: 50% 100%;
  animation: crawl 60s linear infinite;
}
#sidebar .star_wars {
  font-size: 150%;
  height: 400px;
}
@keyframes crawl {
  0% {
    top: -100px;
    transform: rotateX(20deg)  translateZ(0);
  }
  100% { 
    top: -6500px;
    transform: rotateX(25deg) translateZ(-2500px);
  }
}
@media screen and (max-width:1024px) {
	.marquee img {
			vertical-align:-20px;
			max-height: 60px !important;
			width:auto !important;
	}
	.crawl {
		transform-origin: 50% 300%;
	}
	.star_wars {
  font-size: 250%;
  font-weight: 500;
  }
  div.vorlage_1 img {
	  width: 100% !important;
	  height: auto !important;
  }
  div.vorlage_1 p:nth-child(1){
	float:none;
	max-width: 100%;
	text-align: left;
 }
}