* {
  	margin: 0;
  	padding: 0;
  }

  html,
  body {
  	height: 100%;
  }

  body {
  	background-color: #f0f0f0;
  	text-align: center;
  	font-family: 'Nunito', century, arial, bahnschrift, sans-serife;
  	/* fuer sticky footer */
  	display: table;
  	width: 100%;
  	line-height: 1.5em;
  }

  .tabellen_zelle {
  	display: table-row;
  }

  .maximale_hoehe {
  	height: 100%;
  }

  #wrapper {
  	background-image: url(bilder/links-steuerung.jpg);
  	position: relative;
  	min-height: 100%;
  	width: 1000px;
  	/*  	width: 50vw;*/
  	margin: 0 auto;
  	text-align: left;
  	border-right: 2px solid black;
  	border-left: 2px solid black;
  }

  article {
  	margin: 0px 40px 0px 300px;
  	padding-left: 1em;
  	padding-right: 1em;
  }

  .oben {
  	width: 1500px;
  	height: 3.5px;
  }

  header {
  	background-color: white;
  	background-image: url(bilder/logo_links.jpg), url(bilder/logo_mitte.jpg);
  	background-repeat: no-repeat, repeat-x;
  	height: 250px;
  	margin-top: 0.5em;
  	margin-right: 2.5em;
  	margin-left: 1.5em;
  }

  header p {
  	text-align: right;
  	color: #d14444;
  	text-shadow: 1px 1px 1px #6f0e0e;
  	font-size: 1.6em;
  	/*  	font-weight:500;*/
  	padding: 1.8em 0.5em 0 0;
  }

  nav {
  	width: 206.4px;
  	float: left;
  	margin-left: 1.25em;
  	margin-top: 1.2em;
  	font-size: 150%;
  }

  nav a {
  	color: white;
  	text-decoration: none;
  	width: 100%;
  	display: inline-block;
  	box-sizing: border-box;
  	line-height: 1.7em;
  }

  nav a:hover {
  	text-decoration: underline;
  	cursor: pointer;
  	background: url(bilder/pfeil.gif) bottom right no-repeat;
  }

  nav li.aktiv a {
  	background-color: #d14444;
  	width: 8.6em;
  	text-decoration: none;
  	cursor: default;
  	background-image: none;
  }

  nav ul {
  	list-style-type: none;
  	color: white;

  }

  #steuerung {
  	display: block;
  	margin-top: 2em;
  }

  .menue-button {
  	display: none;
  }

  #textbereich {
  	padding-right: 2em;
  	padding-left: 0em;
  	font-size: 100%;
  }

  /* Seitenhoehe 100%, noetige Hoehe mitgeben */
  .tabellen_zelle {
  	display: table-row;
  	width: 1000px;
  }


  h1.a {
  	font-size: 190%;
  	color: #d14444;
  	font-size: 1.5em;
  	font-weight: bold;
  	padding-top: 1em;
  	margin-bottom: 1em;
  }

  h1.b {
  	/*  	font-weight: 400;*/
  	font-size: 220%;
  	padding-top: 0.5em;
  	margin-bottom: 1em;
  	color: #cc0000;
  }

  h2.a {
  	font-size: 120%;
  	font-weight: 300;
  	line-height: 1.5em;
  	margin-bottom: 12px;
  }

  h2.b {
  	font-weight: 800;
  	color: #d14444;
  	font-size: 150%;
  	margin-bottom: 1em;
  	line-height: 2em;
  }

  h2.c {
  	margin-bottom: 1.2em;
  	line-height: 1.4em;
  	font-size: 130%;
  	font-weight: 300;
  }

  h2.first::first-letter {
  	font-size: 115%;
  	color: #e22b39;
  	/*  	font-weight: bold;*/
  }

  h2.first {
  	font-size: 120%;
  	font-weight: 300;
  	line-height: 1.5em;
  	margin-bottom: 12px;
  }

  h3.first::first-letter {
  	font-size: 110%;
  	color: #e22b39;
  	/*  	font-weight: 300;*/
  }

  h3.first {
  	font-size: 125%;
  	font-weight: 300;
  	line-height: 1.4em;
  	margin-bottom: 12px;
  }

  h3.a {
  	margin-bottom: 12px;
  	font-size: 130%;
  	line-height: 1.4em;
  	font-weight: 400;
  }

  h3.b {
  	/*  	font-weight: 800;*/
  	color: #d14444;
  	text-shadow: 1px 1px 1px black;
  	font-size: 150%;
  	padding-right: 2em;
  	padding-bottom: 0em;
  	margin-top: 65px;
  	margin-bottom: 12px;
  }

  h3.f {
  	padding-bottom: 2em;
  	margin-bottom: 12px;
  	font-size: 150%;
  }

  h3.m {
  	/*  	font-weight: 800;*/
  	color: #d14444;
  	font-size: 100%;
  	padding: 1em;
  	text-align: center;
  	line-height: 1.8em;
  }

  h4,
  h5 {
  	padding: 0.5em 0;
  	font-size: 110%;
  	font-weight: 300;

  }

  p {
  	font-size: 120%;
  }

  p.gross {
  	display: block;
  	font-size: 150%
  }

  p.klein {
  	display: none
  }

  p.ds {
  	padding-top: 0.5em;
  	padding-bottom: 0.5em;
  	color: darkblue;
  	font-size: 120%;
  	/*  	font-weight: 600;*/
  }

  hr.blank {
  	color: white;
  	width: 0.1px;
  	padding-bottom: 2em;
  	opacity: 0;
  }

  hr.absatz {
  	width: 100%;
  	height: 5px;
  	margin: 0 0;
  	color: #d14444;
  	background-color: #e26b6b;
  }

  .abstand_bild {
  	margin-top: 5em;
  }

  #bild {
  	background-image: url(bilder/foto_klein.jpg);
  	background-repeat: no-repeat;
  	height: 186px;
  	width: 144px;
  	float: left;
  	margin-top: 6px;
  	padding-right: 1em;
  }

  #lampion {
  	background-image: url(bilder/lampion.jpg);
  	background-repeat: no-repeat;
  	height: 720px;
  	width: 532px;
  	float: left;
  	margin-top: 5em;
  	padding-right: 1em;
  }

  .rahmen {
  	background-color: white;
  	border: groove 0.5em lightgrey;
  	padding: 1em 0.5em 1em 2em;
  	margin: 1em 0 1em 0;
  	line-height: 1.4em;
  	display: inline-block;
  }

  .rahmen2 {
  	background-color: white;
  	border: groove 0.4em #e87f59;
  	padding: 1em 0.5em 1em 2em;
  	margin: 1em 0 1em 0;
  	line-height: 1.4em;
  	display: inline-block;
  }

  .rahmen3 {
  	background-color: white;
  	border: 0.4em white;
  	padding: 1em 0.5em 1em 2em;
  	margin: 1em 0 1em 0;
  	line-height: 1.4em;
  	display: inline-block;
  }

  .farbe1 {
  	color: #cc2323;
  	/*  	font-weight: bolder;*/
  	font-size: 140%;
  	text-decoration: underline;
  	padding-top: 1em;
  	padding-bottom: 1em;
  }

  p.links a {
  	display: inline-block;
  	padding-bottom: 1em;
  	font-weight: bolder;
  	color: #6c9f3a;
  }

  .kontakt {
  	width: 600px;
  	height: 260px;
  	background-color: #f2f2f2;
  	border: 2px solid #8e8e8e;
  	margin: 4em auto 0em auto;
  }

  #deko {
  	background-image: url(bilder/telefon.webp);
  	background-repeat: no-repeat;
  	margin: 2em auto 5em auto;
  	height: 399px;
  	width: 600px;
  	border: none;
  }

  /*  aktuell für Termine */

  #nachtcafe {
  	height: 288px;
  	width: 512px;
  	margin-bottom: 5em;
  }

  #nachtcafe p {
  	font-size: 80%;
  	background-color: #edece4;
  	margin: 0;
  	padding: 0;
  }


  #virus {
  	background-image: url(bilder/virus.png);
  	background-repeat: no-repeat;
  	height: 100px;
  	width: 97px;
  	float: right;
  	transition: transform 30s;
  	cursor: pointer;
  	clear: both
  }



  #virus:hover {
  	transform: rotate(360deg)
  }

  /*  Ende termine -----*/

  footer {
  	margin-top: 5px;
  	position: absolute;
  	width: 100%;
  	bottom: 0;
  	background-color: #d14444;
  	color: white;
  	text-align: center;
  	height: 2.0em;
  	line-height: 1.8em;
  	font-size: 70%;
  	padding: 0.5em 0 0.5em 0;
  	border-top: 1px solid black;
  	border-bottom: 1px solid black;
  }

  /*------------ MITTEL ---------------------------*/
  /* fuer Tabletts und Co. - unter 900px (56,25em) */
  @media only screen and (max-width: 56.25em) {

  	body {
  		height: 100%;
  		width: 100%;
  		background-image: none;
  		background-color: white;
  	}

  	#wrapper {
  		width: 100%;
  		background-image: none;
  		background-color: white;
  		border: none;
  	}

  	#steuerung {
  		width: 100%;
  		margin-left: 0em;
  		float: none;
  		background: #fafafa;
  		display: none;
  	}

  	#steuerung li a {
  		padding-left: 1em;
  		font-weight: bolder
  	}

  	#steuerung li {
  		border: 1px solid black;
  		line-height: 2em;
  	}

  	/* zeigen der Steuerung nur wenn menue-button gedrückt */
  	#steuerung li.aktiv a {
  		background-color: #db4d4d;
  		color: white;
  		width: 100%;
  		text-decoration: none;
  		cursor: default;
  		background-image: none;
  		line-height: 1.5em;
  	}

  	.menue-button {
  		display: block;
  		background-color: #ce5050;
  		border: 2px solid black;
  		color: white;
  		font-weight: 800;
  		font-size: 130%;
  		position: absolute;
  		top: 3.5em;
  		left: 60em;
  		padding: 0.1em 0.3em 0.1em 0.3em;
  		text-decoration: none;
  		cursor: pointer;
  	}

  	.menue-button:hover {
  		background-color: #903939;
  		color: black;
  		font-weight: 800;
  	}

  	/* Steuerung einblenden bei Handys */
  	#nav-menue:target #steuerung {
  		display: block;
  	}

  	header {
  		background-image: url(bilder/logo_links_klein.jpg),
  			url(bilder/logo_mitte.jpg);
  		background-repeat: no-repeat,
  			repeat-x;
  	}

  	header p {
  		width: 100%;
  		height: 8em;
  		font-size: 180%;
  		text-align: left;
  		padding: 1.8em 0.5em 0 2em;
  	}

  	nav {
  		background-color: #cccccc;
  	}

  	nav li a {
  		text-decoration: none;
  		cursor: default;
  		background-image: none;
  		line-height: 2em;
  		padding-left: 5em;
  		font-size: 150%;
  	}

  	#steuerung li.aktiv a {
  		line-height: 2.0em;
  		font-size: 150%;
  	}

  	#nav-menue {
  		width: 100%;
  	}

  	#nav-menue:target #steuerung {
  		display: block;
  	}

  	#nav-menue:target .menue-button-beschr-open {
  		display: none;
  	}

  	nav li a:hover {
  		color: #d14444;
  		background: url(bilder/pfeil.gif) bottom left no-repeat;
  		cursor: pointer;
  	}

  	nav li.aktiv a {
  		background-color: lightgray;
  		width: 100%;
  		text-decoration: none;
  		cursor: default;
  	}

  	li a {
  		color: black;
  	}

  	article {
  		margin: 1em 2em;
  	}

  	article div {
  		margin: 0 0 1em 1em;
  	}

  	header p {
  		text-align: left;
  		padding-top: 1em;
  		font-size: 250%;
  	}

  	h1 {
  		font-size: 190%;
  	}

  	h1.a {
  		font-size: 220%;
  		line-height: 1.5em;
  	}

  	h1.b {
  		font-size: 250%;
  		line-height: 1.4em;
  	}

  	h2.a {
  		margin-bottom: 1em;
  		font-size: 205%;
  		font-weight: 400;
  	}

  	h2.b {
  		font-size: 200%;
  		margin-bottom: 1.5em;
  		letter-spacing: 0.2em;
  	}

  	h2.first::first-letter {
  		font-size: 135%;
  		color: #e22b39;
  	}

  	h2.first {
  		padding-top: 1em;
  		font-size: 200%;
  		margin-bottom: 12px;
  	}

  	h3.a {
  		margin-bottom: 2em;
  		font-size: 250%;
  	}

  	h3.first::first-letter {
  		font-size: 140%;
  		color: #e22b39;
  		/*  		font-weight: bold;*/
  	}

  	h3.first {
  		font-size: 250%;
  		line-height: 1.4em;
  		margin-bottom: 12px;
  	}

  	h3.m {
  		font-weight: 800;
  		color: #d14444;
  		font-size: 250%;
  		padding: 1em;
  		text-align: center;
  		line-height: 1.8em;
  	}

  	p.ds {
  		font-size: 160%;
  	}

  	p.links a {
  		padding-top: 1em;
  		font-size: 180%;
  		font-weight: bolder;
  		color: #6c9f3a;
  	}

  	h4,
  	h5 {
  		font-size: 170%;
  		line-height: 2em;
  	}

  	.farbe1 {
  		font-size: 280%;
  		text-decoration: underline;
  		padding-top: 1em;
  		padding-bottom: 1em;
  	}

  	h3.m {
  		font-weight: 800;
  		color: #d14444;
  		font-size: 180%;
  		padding: 1em;
  		text-align: center;
  		line-height: 1.2em;
  	}


  	.mittig {
  		text-align: center;
  		font-size: 6px;
  		background-color: red;
  		color: green;
  	}


  	.mitte_img {
  		display: flex;
  		justify-content: center;
  		align-items: center;
  	}

  	.abstand_bild {
  		margin-top: 3em;
  	}

  	.kontakt {
  		width: 100%;
  		height: auto;
  		background-color: #f2f2f2;
  		border: 2px solid #8e8e8e;
  		margin: 3em auto 10em auto;
  		padding: 0.5em;
  	}

  	#deko {
  		display: none;
  	}

  	/* breite des Footers */
  	.tabellen_zelle {
  		width: 100%;
  		margin-left: 4.5px;
  	}

  	footer {
  		background-color: #ebebeb;
  		color: #b42626;
  		font-weight: bolder;
  		border: none;
  		border-top: 1px solid black;
  	}

  	footer p {
  		font-size: 190%;
  		margin-bottom: 1em;
  		margin-left: -9.5em;
  	}
  }


  /*--------------------------------------*/
  /* fuer kleine Handys - unter 500px (31,23em) */
  @media only screen and (max-width: 31.23em) {
  	#wrapper {
  		width: 100%;
  	}

  	.oben {
  		height: 10em;
  	}

  	header {
  		max-width: 100%;
  		background-image: none;
  		border-bottom: 1em solid #d14444;
  	}

  	header p {
  		position: absolute;
  		top: 1em;
  		left: 1em;
  		color: #791f1f;
  		text-shadow: none;
  		font-weight: bolder;
  		font-size: 330%;
  		line-height: 2em;
  	}

  	.menue-button {
  		right: 3.6em;
  		top: 6.5em;
  		left: auto;
  		font-size: 200%;
  		padding: 0.5em;
  	}

  	nav li a {
  		line-height: 3.5em;
  		font-size: 250%;
  	}


  	#steuerung li.aktiv a {
  		line-height: 3.5em;
  		font-size: 250%;
  	}

  	article {
  		padding: 0.5em;
  		margin-bottom: 25px;
  		font-size: 220%;
  	}

  	h1 {
  		padding-top: 2em;
  		margin-bottom: 25px;
  		font-size: 220%;
  	}

  	h1.b {
  		font-size: 200%;
  		font-weight: 800;
  		padding-bottom: 3em;
  		color: #cc0000;
  	}

  	h2.a {
  		margin-bottom: 1em;
  		font-size: 160%;
  		padding-top: 2em;
  	}

  	h2.b {
  		font-size: 200%;
  		margin-bottom: 1.5em;
  	}

  	h3.first::first-letter {
  		font-size: 105%;
  		color: #e22b39;
  		font-weight: bold;
  	}

  	h3.first {
  		font-size: 190%;
  		line-height: 1.4em;
  		margin-bottom: 12px;
  	}

  	p.gross {
  		display: none;
  	}

  	p.klein {
  		display: block;
  		font-size: 300%;
  	}

  	p.ds {
  		font-size: 150%;
  	}

  	p.links a {
  		padding-top: 1em;
  		font-size: 100%;
  		font-weight: bolder;
  		color: #6c9f3a;
  		line-height: 1.2em;
  	}

  	.farbe1 {
  		font-size: 190%;
  		text-decoration: underline;
  		padding-top: 1em;
  		padding-bottom: 1em;
  	}

  	h3.a {
  		margin-bottom: 0.8em;
  		font-size: 200%;
  		letter-spacing: 0.02em;
  	}

  	h3.b {
  		font-weight: 800;
  		color: #d14444;
  		font-size: 220%;
  		padding-right: 2em;
  		padding-bottom: 0em;
  		margin-top: 65px;
  		margin-bottom: 12px;
  	}

  	h3.f {
  		padding-bottom: 2em;
  		margin-bottom: 12px;
  		font-size: 200%;
  	}

  	h3.m {
  		font-weight: 800;
  		color: #d14444;
  		font-size: 200%;

  	}

  	h4,
  	h5 {
  		padding: 0.5em 0;
  		font-size: 160%;
  	}

  	p {
  		font-size: 200%;
  	}

  	#bild {
  		background-image: url(bilder/foto_gross.jpg);
  		background-repeat: no-repeat;
  		height: 372px;
  		width: 288px;
  	}

  	.rahmen {
  		max-width: 100%;
  		margin-left: 0em;
  	}

  	.rahmen2 {
  		max-width: 100%;
  		margin-left: 0em;
  	}


  	/*  aktuell speziell für Termine */

  	#nachtcafe {
  		/*
  		height: 200%;
  		width: auto%;
*/
  		margin-top: 3em;
  	}
  }









  /*--------------------------------------*/
  /* fuer ganz kleine Handys - unter 400px (25em) */
  @media only screen and (max-width: 25em) {


  	nav li a {
  		line-height: 2.5em;
  		font-size: 250%;
  	}


  	#steuerung li.aktiv a {
  		line-height: 2.5em;
  		font-size: 250%;
  	}

  	article {
  		padding: 0.5em;
  		margin-bottom: 25px;
  		font-size: 200%;
  	}

  	h1 {
  		padding-top: 2em;
  		margin-bottom: 25px;
  		font-size: 200%;
  	}

  	h1.b {
  		font-size: 200%;
  		font-weight: 800;
  		padding-bottom: 3em;
  		color: #cc0000;
  	}

  	h2.a {
  		margin-bottom: 1em;
  		font-size: 200%;
  	}

  	h2.b {
  		font-size: 200%;
  		margin-bottom: 1.5em;
  	}

  	h3.first::first-letter {
  		font-size: 100%;
  	}

  	h3.first {
  		font-size: 180%;
  		line-height: 1.4em;
  		margin-bottom: 12px;
  	}

  	p.klein {
  		display: block;
  		font-size: 285%;
  	}

  	p.ds {
  		font-size: 150%;
  	}

  	p.links a {
  		padding-top: 1em;
  		font-size: 100%;
  		font-weight: bolder;
  		color: #6c9f3a;
  		line-height: 1.2em;
  	}

  	.kontakt {
  		width: auto;
  		height: 800px;
  	}

  	.farbe1 {
  		font-size: 190%;
  		text-decoration: underline;
  		padding-top: 1em;
  		padding-bottom: 1em;
  	}

  	h3.a,
  	h3.b,
  	h3.f,
  	p {
  		font-size: 190%;
  		letter-spacing: 0.02em;
  	}

  	h3.m {
  		font-size: 160%;

  	}

  	footer {
  		text-align: center;
  	}

  	footer p {
  		font-size: 180%;
  		margin-left: 0.5px;
  	}

  	#bild {
  		background-image: url(bilder/foto_gross.jpg);
  		background-repeat: no-repeat;
  		height: 372px;
  		width: 288px;
  	}
  }