@font-face { font-family: 'Single Sleeve Regular'; src: local('Single Sleeve Regular'),url(sing_14l.woff) format('woff') }

html { height: 100%; -webkit-text-size-adjust: none; overflow:hidden; }
body { height: 100%; top: 0px; margin: 0px; padding: 0px; border: 0px; text-align: center; display: flex; align-items: center; flex-direction: column; font-family: 'Single Sleeve Regular', Arial, Helvetica; font-size:2rem; letter-spacing: 1px; font-display: swap; overflow:auto; scrollbar-width: none;}
@media only screen and (orientation: portrait) {
 body { transform: rotate(90deg) translateY(-100%); transform-origin:top left; height: 100vw; width: 100vh; overflow-x: hidden;	position: absolute;	top: 0px; left: 0px; }
}
a:link {color: #dc0032}
a:active,a:hover,a:visited {color: #dc0032}
.abstand1 {margin:0.4em 0 0.1em 0}
#autostart:checked,#autostart:target,#autostart:visited+a:visited { opacity: 0;display: none;visibility: hidden }
#kopf, #fuss { flex:1; width: 100%;  min-height:11%; max-height: 11%; margin: 0px; padding: 0px; background-color:#000; z-index: 2; }
#vmitte { display:block; margin: 0px; justify-content: Center; align-items: inherit; overflow:auto;  height:74% !important; }
/* #vmitte > div.Normal { overflow: auto; } */
.mitRamen { margin: 0 3rem 3rem 3rem; }
.vmitte2 { display: block; margin: 0px; padding: 0px 80px 0px 80px; overflow: auto; overflow-x: hidden; height:74% !important; scrollbar-width: none;	}
.bottomMMAbstand { min-height:11%; max-height:11%; margin: 0px; padding: 0px; }
.bottomMainMenue { display: flex; width:100% !important; min-height:12%; max-height:12%; margin: 0px; padding: 0px; justify-content: center; align-items: center; position: fixed; bottom: 0px; left:0px; background-color:#000; z-index: 2; }


/* Schrift Formatierung !Basis im BODY */
h1 {font-size: 4vw; font-weight: bold; letter-spacing: 6px; text-decoration: underline; text-shadow: 2px 2px #C0C0C0; margin: 0.5em 0px 0em 0px; }
h2 {letter-spacing: 3px; text-decoration: underline; text-shadow: 2px 2px #C0C0C0; margin: 0.4em 0px 0.3em 0px; }
h3 {letter-spacing: 3px; text-decoration: underline; text-shadow: 2px 2px #C0C0C0; margin: 0.4em 0px 0.3em 0px; }
p.Datum { padding: 0px; margin: -10px -10px -15px 0px; border: 0px; text-align: left;}
.Datum {color: rgb(239, 0, 41); font-size: 2rem; letter-spacing: 2px; font-weight: bold; }
.Normal { font-family: Verdana, Arial, Helvetica; font-size:0.9rem; letter-spacing: 0px; text-align: left;}
.Klein {text-shadow: 2px 1px #C0C0C0; text-align: left;}
.red {color:red;}
.abgesagt {text-decoration: line-through;text-decoration-thickness: 6px;}


/* Bilder */

/* img {width:50%;height:50%;} */

*.transition {
	-webkit-transition: all 0.8s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.5s linear;
}

*.rotate {
	-moz-transform:  scale(1) rotate(8deg);
	-ms-transform: scale(1) rotate(8deg);
	-o-transform: scale(1) rotate(8deg);
	-webkit-transform: scale(1) rotate(8deg);
	transform: scale(1) rotate(8deg);
}
*.rotate:hover {
	-moz-transform: scale(2.1) rotate(0deg);
	-ms-transform: scale(2.1) rotate(0deg);
	-o-transform: scale(2.1) rotate(0deg);
	-webkit-transform: scale(2.1) rotate(0deg);
	transform: scale(2.1) rotate(0deg);
	margin-top: 76px;
}

div.ima-wrapper {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	overflow: hidden;
}
div.ima-wrapper div.ima {
	margin: 0 20px 0 20px;
	padding: 10px 0 0 0;
	width: 15%;
	height: auto;
	overflow: hidden;
	position: inherit;
}
div.ima-wrapper div.ima:hover {
	z-index: 999;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
div.ima img {
	width: 100%;
	height: auto;
}



@media only screen and (max-width: 1090px)  {
body { font-size:1.1rem;}
div.text {padding: 0px 11% 0px 11%;}
p { margin-bottom:0px;}
#kopf, #fuss { flex:1; width:100%; min-height: 5%; max-height: 5%; margin: 0px; padding: 3% 0 0 0; background-color:#000; z-index: 2; }
.bottomMainMenue, img { width:440px; }

/* Schrift Formatierung !Basis im BODY */
h1 {font-size: 5vw; font-weight: bold; letter-spacing: 4px; line-height: 60%; margin: 0.4em 0px 0.4em 0px; }
h2 { margin: 0px; }
p.Datum { padding: 0px; margin: -10px -10px -15px 0px; border: 0px; text-align: left;}
.Datum {color: rgb(239, 0, 41); font-size: 1.7rem; letter-spacing: 2px; font-weight: bold; }
.Normal {font-family: Verdana, Arial, Helvetica; font-size:0.7rem; letter-spacing: 0px; text-align: left;}
.Klein {text-shadow: 2px 1px #C0C0C0; text-align: left;}
.red {color:red;}
}

@media only screen and (max-width: 820px)  {
body { font-size:1.1rem;}
#kopf, #fuss { flex:1; width:100%; min-height: 4%; max-height: 4%; margin: 0px; padding: 3% 0 0 0; background-color:#000; z-index: 2; }
.bottomMainMenue, img { width:390px; }

h1 {font-size: 4.5vw; letter-spacing: 2px; text-shadow: 2px 2px #C0C0C0; line-height: 50%; margin: 0.4em  0px 0.6em 0px; }
h2 { margin: 0px; }
p.Datum { padding: 0px; margin: -10px -10px -15px 0px; border: 0px; text-align: left;}
.Datum {color: rgb(239, 0, 41); font-size: 1.6rem; letter-spacing: 2px; font-weight: bold; }
.Normal {font-family: Verdana, Arial, Helvetica; font-size:0.7rem; letter-spacing: 0px; text-align: left;}
.Klein {text-shadow: 2px 1px #C0C0C0; text-align: left;}
.red {color:red;}
}

@media only screen and (max-width: 420px)  {
body { font-size:0.8rem;}
#kopf, #fuss { flex:1; width:100%; min-height: 4%; max-height: 4%; margin: 0px; padding: 3% 0 0 0; background-color:#000; z-index: 2; }
#vmitte { display: grid; gap:0px 0px; margin: 0px; justify-content: stretch; align-items: center; }
.bottomMainMenue, img { width:380px; }
}