@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:200,400,500);




/* ---------------------------------------------------------------------------- */
/* ------------------------------------Reset----------------------------------- */
/* ---------------------------------------------------------------------------- */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
blockquote,
big,
body,
center,
canvas,
caption,
cite,
code,
command,
datalist,
dd,
del,
details,
dfn,
dl,
div,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
keygen,
label,
legend,
li,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
s,
samp,
section,
small,
span,
source,
strike,
strong,
sub,
sup,
table,
tbody,
tfoot,
thead,
th,
tr,
tdvideo,
tt,
u,
ul,
var {
 background: transparent;
 border: 0 none;
 font-size: 100%;
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 vertical-align: top;
}
ol,
ul {
 list-style: none;
}

ul.normal {
 list-style-type: disc; text-align: left; margin-left: 16px;
}

blockquote {
		font-style: italic; font-weight: bold; font-size: 20px;
		color: #9e9e9e;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 20px;
		padding-left: 15px;
		border-left: 3px solid #ccc;
}

blockquote p {
		font-style: normal; color: crimson; font-size: smaller;
}

img {
 vertical-align: top;
}
embed {
 vertical-align: top;
}
article,
aside,
audio,
canvas,
command,
datalist,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
keygen,
meter,
nav,
output,
progress,
section,
source,
video {
 display: block;
}
mark,
rp,
rt,
ruby,
summary,
time {
 display: inline;
}
input,
textarea {
 border: 0;
 padding: 0;
 margin: 0;
 outline: 0;
}
iframe {
 border: 0;
 margin: 0;
 padding: 0;
}
input,
textarea,
select {
 margin: 0;
 padding: 0px;
}
@font-face {
 font-family: "ArmyChalk";
 src: url("../media/fonts/armychalk.ttf");
}
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
html {
 -webkit-text-size-adjust: none;
}
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
 -moz-user-select: none;
 -khtml-user-select: none;
 -webkit-user-select: none;
 user-select: none;
 /* Required to make elements draggable in old WebKit */
 -khtml-user-drag: element;
 -webkit-user-drag: element;
 cursor: move;
}
.video embed,
.video object,
.video iframe {
 width: 100%;
 height: auto;
}
img, iframe {
 max-width: 100%;
 height: auto;
 width: 100%;
 /* ie8 */
}
img.karte {
 margin-top: 24px;
 margin-bottom: 24px;
}
.kartenausschnitt {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 273px;
	border-left: 4px solid white;
	z-index: 150;
}
a {
 color: black;
 text-decoration: none;
 border-bottom: 1px black dotted;
}
a:hover {
 color: black;
 text-decoration: none;
 border-bottom: 1px crimson solid;
}
a[data-href]:hover {
    cursor: pointer;
}
a[disabled="disabled"],
a[disabled="true"],
a[enabled="false"] {
 pointer-events: none;
 cursor: default;
}
div.artificiallink {
 position: relative;
}
div.artificiallink a {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 text-decoration: none; /* No underlines on the link */
 z-index: 10; /* Places the link above everything else in the div */
 background-color: #FFF; /* Fix to make div clickable in IE */
 opacity: 0; /* Fix to make div clickable in IE */
 filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
.no-underline,
.no-underline:hover {
 text-decoration: none;
 border-bottom: 0px;
}
div.outdooractive,
div.outdooractive a {
 text-decoration: none;
 display: flex; 
 justify-content: center; 
 align-items: center;
 margin-bottom: 8px;
}
div.360cities,
div.360cities a {
 text-decoration: none;
 display: flex;
 height: 36px;
 justify-content: center; 
 align-items: center;
}
h1 {
 font-size: 36px;
 letter-spacing: 2px;
 margin-bottom: 24px;
 margin-right: 36px;
 font-family: Georgia, Baskerville, "Times New Roman", serif;
}
h1.eq  {
	line-height: 1.2em; font-size: 2em; margin-top:12px; color: rgb(88, 110, 117); font-family: Helvetica, Arial, sans-serif;
	font-variant-ligatures: normal; letter-spacing: -0.01em; text-align: left;"
}

h2 {
 font-size: 20px;
 margin-top:-12px;
 color: crimson;
 font-family: Georgia, Baskerville, "Times New Roman", serif;
 text-align: left;
}

p {
 -moz-hyphens: auto;
 -o-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
 margin: 4px 0;
 hyphenate-limit-chars: 6 3 3;
  -ms-hyphenate-limit-lines: 2; -webkit-hyphenate-limit-lines: 2; hyphenate-limit-lines: 2;
}
p.tab {
 font-size: 14px;
 line-height: 1.4;
 padding: 2px;
 text-align: left;
 }
p.teaser {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 22px;
 font-style: italic;
 margin-top: 12px;
 margin-bottom: 18px;
 }
span.karte1 {
 font-size: 18px;
 }
span.karte2 {
 font-size: 26px;
 color: crimson;
 }
span.karte3 {
 font-size: 22px;
 color: white;
 background-color: crimson;
 padding: 3px;
 }
div.karte {
 text-align:right;
 margin-top: -54px;
 position: absolute;
 right: 12px;
 z-index: 5;
 letter-spacing: 0.02em;
 }
 
div.banner {
 width:98%; margin-left: 2%; margin-top:20px; margin-bottom:24px;
 box-shadow: 8px 16px 24px grey;
}

hr.linie {
 height: 24px;
 margin: 5px;
 color: crimson;
 background: crimson;
 border-radius: 0px
}
.clear {
 content: "\0020";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix:after,
.clearfix:before {
 clear: both;
 content: '\0020';
 display: block;
 visibility: hidden;
 width: 0;
 height: 0;
}
.display-flex {
 display: flex;
}
 
.embed-container {
 position: relative;
 padding-bottom: 56.25%; /* 16/9 ratio */
 padding-top: 30px; /* IE6 workaround*/
 height: 0;
 overflow: hidden;
}
 
.embed-container iframe,
.embed-container object,
.embed-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.maps iframe{
 height:199px;
 pointer-events: none;
}


/* ---------------------------------------------------------------------------- */
/* ------------------------------------Html-Body------------------------------- */
/* ---------------------------------------------------------------------------- */
html, body {
 width: 100%;
 padding: 0;
 margin: 0;
}
body {
 background: rgba(230, 231, 232, 1);
 color: #3F3F3F;
 font: 16px/25px Trebuchet, Arial, Helvetica, sans-serif;
 line-height: 1.4;
}


/* ---------------------------------------------------------------------------- */
/* -------------------------------------Container------------------------------ */
/* ---------------------------------------------------------------------------- */
#container {}
#container .wrap-container {}
/* ---MainContent-Article--- */
.main-content {
 max-width: 940px;

 padding: 0px 18px;
  margin-left: 28px
}
.main-content .wrap-content {
 /*padding: 0px 10px 0px 10px;*/

 position: relative;
}
.main-content .wrap-content h2 {
 margin: 0px 0 12px;
}
.zerogrid .col-full h2 {
 margin-top: 5px;
}
#sources a {
 line-height: 110%;
 /*color: rgb(90,90,90);*/
 
 border-bottom: 1px black dotted;
}
#sources a:hover {
 text-decoration: none;
 border-bottom: 1px crimson solid;
}
.header, .footer {
 overflow: hidden;
}
p {
 text-align: left;
}
.nowrap { 
white-space: nowrap; 
-webkit-hyphens: none; 
-ms-hyphens: none; 
hyphens: none;
}

		.topbar {
 			 position: fixed; top: 0; z-index: 1; width: 100%; background-color: #f1f1f1;
		}

		.progress-container {
  			width: 100%; height: 8px; background: #ccc;
		}

		.progress-bar {
  			height: 4px; background: crimson; width: 0%;
		}

.header { 
 background-image: url(../media/wand.jpg);
 background-size:  auto 124px;
 background-position: left top;
 /*background-repeat: no-repeat;*/
 min-height: 6.5rem;
 color: rgb(242, 242, 242);

}
.header h1 {
 font-family: ArmyChalk;
 font-size: calc(14px + 2vw);
 display: inline-block; white-space: normal;
 position: relative;
 left: 4%; top: 24px;
 margin-right: 204px;
}
.blutige-hand {
 width: 59px;
 height: auto;
 position: relative;
 left: 25%;
 top: 35px;
}
.blutspritzer {
 width: 55px;
 height: auto;
 position: relative;
 left: 45%;
 top: 30px;
}
.blutige-hand2 {
 width: 48px;
 height: auto;
 position: relative;
 left: 6px;
 top: 16px;
}
.blutspritzer2 {
 width: 55px;
 height: auto;
 position: relative;
 right: -12px;
 top: 2px;
}
.blutspritzer3 {
 float: left;
 position: absolute: margin-top: -12px; margin-bottom: 8px; margin-left: -24px;
 height: 52px; width: 45px;
 z-index: 20;
}

.tatortschild {
 float:right; position:absolut; z-index:40; margin-top: -92px; height: 92px; width: auto; margin-right:6%;
 transition: 1s ease-in-out;
}

img.tatortschild:hover {
  transform: perspective(200px) rotateY(-30deg);
}

.tatortschild1 {
 float:right; position:absolut; z-index:40; margin-top: -92px; height: 160px; width: auto; margin-right:4%;
 transition: 1s ease-in-out;
}

img.tatortschild1:hover {
  transform: perspective(200px) rotateY(-30deg);
}

.quelle {
 float:right; position:absolut; height: 52px; width: auto; margin-top:6px; margin-right:6%;
}

.lupe {
 filter: invert(100%); -webkit-filter:invert(100%);
 width:32px; 
 transition: 0.5s ease-in-out;
}
img.lupe:hover {
 transform: scale(1.5)
}
.lupe2 {
  position: absolute;
  bottom: 12px;
  right: 24px;
}

.header .title {
 max-width: 928px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: -24px;
 white-space: nowrap; /*Zeilenumbruch verhindern */ 
 padding: 0px 12px;
}

.footer {
 position: fixed;
 z-index: 20;
 bottom: 0px;
 left: 0px;
 right: 0px;
}

p.absatz {
	padding-top:24px;
	margin-top: 12px;
	margin-left: -10px;
	margin-right: -10px;
	background-color:#e6e7e8;
}
hr.trennlinie {
	border: 0; height: 2px; margin-top:24px; margin-bottom:24px;
    background-image: linear-gradient(to right, rgba(25, 0, 0, 0), rgba(0,0,0,15), rgba(25, 0, 0, 0));
}
hr.location{
 background-color: #d1d2d3;
 border: 0px;
 height: 4px;
 margin-top: 24px;
 margin-bottom: 12px;
}
 hr.darsteller {
 background-color: #7B634C;
 border: 0px;
 height: 8px;
 margin-top: 24px;
 margin-bottom: 12px;
}
	
/* =-=-=-=-=-=-=-Navigation Fußleiste-=-=-=-=-=-=-=- */
div.fussleiste {
	overflow-x: scroll; overflow-y: hidden; white-space: nowrap;
	scroll-behavior: smooth;
	scrollbar-width: none;  /* Firefox */
	cursor: pointer;
}

div.fussleiste li {
  display: inline-block;

}

div.fussleiste::-webkit-scrollbar {
    display: none;
}

ul.navleiste {
 list-style-type: none;
 width: 100%; height: 50px; overflow: hidden;
 cursor: pointer;
 margin-bottom: -4px;
}

li.navleiste {
 text-align: center;
 padding: 12px 6px;

 border-right: 1px solid darkgrey;
 
 overflow-x: scroll; overflow-y: hidden; white-space: nowrap;
	scroll-behavior: smooth;
	scrollbar-width: none;  /* Firefox */
	list-style: none;
}
li.navleiste a {
 text-decoration: none;
 border-bottom: none;
}
li.navleiste:hover {
  background-color: rgba(230, 231, 232, 1);
}
li.spalte { 
 text-align: left;
 padding: 4px 2px;
}

/* ---------------------------------------------------------------------------- */
/* -------------------------------Item-Effect---------------------------------- */
/* ---------------------------------------------------------------------------- */
.item-container {
 position: relative;
 overflow: hidden;
 display: inline-block;
 text-align: center;
 vertical-align: top;
 margin-bottom: 20px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-shadow: 2px 2px 4px silver;
 
 padding-left:8px; width:100%; font-size: 90%;
}
.item-container img {
 display: block;
 width: 100%;
 height: auto;
 padding-bottom: 2px;
 -webkit-transition: all .5s ease;
 /* Safari and Chrome */
 
 -moz-transition: all .5s ease;
 /* Firefox */
 
 -ms-transition: all .5s ease;
 /* IE 9 */
 
 -o-transition: all .5s ease;
 /* Opera */
 
 transition: all .5s ease;
}
.col-full .item-container img {
 display: inline-block;
 max-width: 100px;
 height: auto;
 padding-bottom: 0px;
}
.item-container .item-caption {
 /*position: relative;*/
 /*top: 100;
 right: 0;
 bottom: 20;
 left: 0;*/
 
 z-index: 1;
 background: white;
 width: 100%;
 height: 100%;
 -webkit-transition: all .5s ease;
 /* Safari and Chrome */
 
 -moz-transition: all .5s ease;
 /* Firefox */
 
 -ms-transition: all .5s ease;
 /* IE 9 */
 
 -o-transition: all .5s ease;
 /* Opera */
 
 transition: all .5s ease;
 }
 
img.highlight:hover { opacity:1; transition: all 500ms ease-in-out; -webkit-filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
 filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));}

img.highlight { opacity:0.85; max-width: 45%; min-width: 180px; }
.item-container .item-caption p {
 font-size: 14px;
 text-align: center:
}
.responsiveContainer {
 position: relative;
 padding-bottom: 80%;
 height: 0;
 overflow: hidden;
}
.responsiveContainer iframe,
.responsiveContainer object,
.responsiveContainer embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%; 
}
.mapsTextBlock {
 position: absolute;
 z-index: 2;
 height: 15px;
 width: 100%;
 bottom: 26px;
 right: 0px;
 background: rgba(255,255,255,1);
}
.container-reddot {
 position: absolute;
 top: 96px;
 right: 0%;
 height: 16px;
 width: 16px;
 transition: all .5s ease;
}
.move-left {
 transform: translate(100px, 0);
}
 
/* =-=-=-=-=-=-=-Einblendmenue rechts-=-=-=-=-=-=-=- */
.sidenav {
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 100;
 top: 0px;
 right: 0;
 background-color: #eadfd5;
 overflow-x: hidden;
 transition: 0.5s;
}
.sidenav a {
 padding: 4px 4px 4px 16px;
 text-decoration: none;
 border-bottom: 0px;
 font-size: 16px;
 color: #818181;
 display: block;
 transition: 0.5s;
}
.sidenav a:hover {
 color: black;
}
.sidenav .closebtn {
 position: -webkit-sticky;
 position: sticky;
 bottom: 0;
 color:white; background-color: #DFB38A;
 font-size: 16px; font-weight: bold;
 padding-top: 6px; padding-bottom: 6px;
 border-bottom: 3px solid white; border-top: 3px solid white;
}

.sidenav .closebtn a {
 text-decoration: none;
 border-bottom: 0px;
 color: white;
 display: inline;
 transition: 0.5s;
}

.sidenav .closebtn a:hover {
 color: black;
}

#mySidenav-eifelkrimis {
    transition: width 1.5s; /* Übergangsdauer von 2 Sekunden */
}

#mySidenav-darsteller {
    transition: width 1.5s; /* Übergangsdauer von 2 Sekunden */
}

#mySidenav-eifel {
    transition: width 1.5s; /* Übergangsdauer von 2 Sekunden */
}

#mySidenav-historie {
    transition: width 1.5s; /* Übergangsdauer von 2 Sekunden */
}

#mySidenav-filme {
    transition: width 1.5s; /* Übergangsdauer von 2 Sekunden */
}

#mySidenav-stars {
    transition: width 1.5s; /* Übergangsdauer von 2 Sekunden */
}


#mySidenav-mediathek {
    transition: width 1.5s; /* Übergangsdauer von 2 Sekunden */
}

#mySidenav-autoren {
    transition: width 1.5s; /* Übergangsdauer von 2 Sekunden */
}

#mySidenav-autoren {
    transition: width 1.5s; /* Übergangsdauer von 2 Sekunden */
}

#mySidenav-events {
    transition: width 1.5s; /* Übergangsdauer von 2 Sekunden */
}

	.a-z {
		background-color: #7B634C;
		font-size: 1.2em; line-height: 1.4em; color: white;
 		font-family: monospace; font-weight: normal;
 		border: 0px;
 		padding: 8px;
		position: relative;
  		top: 10px; /* Standard-Abstand, der sich anpassen lässt */
	}
		
	.a-z a {
 		color: white;  font-weight: bold;
 		display: inline; padding: 0px;
 		border-bottom: 1px dotted;
	}
	
	.a-z a:hover {
 		color: gold;
	}
	
	.autor {
 		padding-left: 12px; padding-right: 12px;
	}
	
#topstar {
    margin-left: 6px; margin-top: 12px; text-align: center; font-weight: bold; font-size: 120%; color: #7B634C;
}

#topstar a {
    text-decoration: none; color: #7B634C; line-height: 1.4em; border-bottom: 1px dotted;
	transition: 0.5s;
}

#topstar a:hover {
 color: black;
}

#topautor {
    margin-left: 6px; margin-top: 12px; text-align: center; font-weight: bold; font-size: 125%;
}

#topautor a {
    text-decoration: none; color: #7B634C; line-height: 1.4em; border-bottom: 1px dotted;
	transition: 0.5s;
}

#topautor a:hover {
 color: black;
}



@media screen and (max-height: 450px) {
 .sidenav {padding-top: 15px;}
 .sidenav a {font-size: 18px;}
}

/* =-=-=-=-=-=-=-Pfeil zum Seitenanfang-=-=-=-=-=-=-=- */
		#toplink {
			position: fixed;
			z-index: 20;
			bottom: 64px; right: 12px;
		}
		
/* =-=-=-=-=-=-=-Pfeil zur Einführungsseite-=-=-=-=-=-=-=- */
		#back {
			position: fixed; z-index: 20;
			bottom: 16px; left: 12px;
			width:48px; border-right: 2px dotted white; 
			padding-right: 18px;
		}
		
		#back a {
			border-bottom: 0px;
		}
/* =-=-=-=-=-=-=-Icon Darsteller-=-=-=-=-=-=-=- */
		#darsteller {
			position: fixed; z-index: 20;
			bottom: 12px; left: 12px;
			width:56px; border-right: 2px dotted white; 
			padding-right: 12px;
			transition: 1s ease-in-out;
		}
				
		#darsteller a {
			filter: invert(50%) sepia(50%) saturate(4800%) hue-rotate(320deg) brightness(90%) contrast(100%);
		}
/* =-=-=-=-=-=-=Icon Übersichtskarte-=-=-=-=-=-=-=- */
		#karte {
			position: fixed;
			z-index: 20;
			bottom: 16px; right: 12px;
			width:46px;
			border-left: 2px dotted white; padding-left: 12px;
		}
		
		#toplink a {
			border-bottom: 0px;
		}
/* =-=-=-=-=-=-=-Absatzinitiale-=-=-=-=-=-=-=- */
		span.ai {
			padding: 0px 0.6rem 0.6rem 0px;
			font-size: 5rem; line-height: 3.125rem;
			float: left; color: crimson;
		}

/* =-=-=-=-=-=-=-Portraits zoomen-=-=-=-=-=-=-=- */
		
		.zoom {
			width: 112px; margin-bottom: 8px;
			transition: transform 0.8s;
			-moz-transition: transform 0.8s;
			-webkit-transition: transform 0.8s;
			-o-transition: transform 0.8s;
			-ms-transition: transform 0.8s;
		}
		
		.zoom:hover {
			cursor: zoom-in; 
			cursor: -moz-zoom-in;
			cursor: -webkit-zoom-in;
			transform: scale(2.5, 2.5);
			-moz-transform: scale(2.5, 2.5);
			-webkit-transform: scale(2.5, 2.5);
			-o-transform: scale(2.5, 2.5);
			-ms-transform: scale(2.5, 2.5);
			position: relative; z-index: 120;
		}
		
/* ---------------------------------------------------------------------------- */
/* -------------------------------Fußleiste für Handys (Ziehharmonika)--------- */
/* ---------------------------------------------------------------------------- */

    div.table { 
      display: table; 
      border-collapse:collapse; 
    }
    div.tr { 
      display:table-row;
      cursor: pointer;
    }
    div.td { 
      display:table-cell; 
      border:thin dotted white; 
      padding:5px;
      width:250px;
      text-align: center;
    }
    
	div.td2 { 
      display:table-cell; 
      padding:5px;
      width: 200px;
      text-align: center;
    }
    
    div.td a {
 		text-decoration: none;
		border-bottom: none;
	}

	div.td:hover {
  		background-color: rgba(230, 231, 232, 1);
	}
	
	details {background: #eee; }
	summary {background: #666; color: #fff; cursor: pointer; padding-top: 0.5rem; padding-bottom: 0.2rem;}
	.akkordeon-inhalt {padding: 0.2rem 0.2rem 0.2rem 0.2rem;}

	/* Der Verzögerungseffekt */
	details[open] summary ~ * {animation: sweep .7s ease-in-out;}

	@keyframes sweep {
  		0%    {opacity: 0; margin-left: -20px}
  		100%  {opacity: 1; margin-left: 0px}
	}
		
/* ---------------------------------------------------------------------------- */
/* ---------------------CSS-Slider (Mord mit Aussicht)------------------------- */
/* ---------------------------------------------------------------------------- */

		.sliderElements,
		.sliderElements figure,
		.sliderControls {
    		margin: 0;
		}
 
.sliderElements:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}
 
.cssSlider {
    overflow-x: hidden;
    margin-top: 24px;
    margin-bottom: 24px;
}
 
.sliderElements {
    list-style: none;
    position: relative;
    left: 0;
    width: 400%;
    margin-bottom: .8em;
    padding: 0;
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s ease-in-out;
}
 
.sliderElements > li {
    float: left;
    width: 25%;
    position: relative;
}
 
#slide02:checked ~ .sliderElements {
    left: -100%;
}
 
 
/* Bildunterschrift auf dem Bild positionieren */
.sliderElements figcaption {
    display: block;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 1em;
    padding: .4em;
    background: rgba(0,0,0,.5);
}
 
/* Bilder responsive */
.sliderElements img {
    width: 100%;
    height: auto;
}
 
 /* inputs aus dem Blickfeld schieben */
.cssSlider input {
    position: absolute;
    left: -99999px;
}
 
/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.sliderControls {
    text-align: center;
}
 
/* Controls nebeneinander bringen */
.sliderControls li {
    display: inline-block;
}
 
/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.sliderControls label {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    background: #dc143c;
    color: white;
}
 
/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.sliderControls label:hover,
#slide01:checked ~ .sliderControls label[for="slide01"],
#slide02:checked ~ .sliderControls label[for="slide02"]
{
    background: #ddd;
    color: #ddd;
}

/* =-=-=-=-=-=-=-Icon-Leiste am linken unteren Seitenrand-=-=-=-=-=-=-=- */

        .icon-bar {
            width: 36px;
            /* Adjust the width as needed */
            background-color: slategrey;
            position: fixed; left: 0px; bottom: 0px; z-index: 50;
        }

        .icon-bar a {
            display: block;
            text-align: center;
			height: 40px; padding: 4px;
            /* Adjust padding as needed */
            transition: all 0.3s ease;
            color: white;
            font-size: 20px;
        }
        .icon-bar a:hover {
            background-color: #000;
        }


/* =-=-=-=-=-=-=-Spalte am rechten Seitenrand-=-=-=-=-=-=-=- */
			div.rechts {
				float:right;
				width:280px; margin-left:12px;
				background-color:white; font-size:0.9em;
			}
		
		/* =-=-=-=-=-=-=-Bilder am Seitenrand-=-=-=-=-=-=-=- */
		
			figure {
				margin-top: 18px; margin-bottom: 12px;
			}
			
			
			.links {
				border: 0px; border-bottom: darkgrey 1px solid;
				padding-bottom: 12px; margin: 8px 16px 12px -42px;
				width: 280px; clear: left; float: left;
			}
			
			img.zoom {
				
				width: 280px;
			}
			
			.links:hover .zoom {
				cursor: zoom-in;
				cursor: -moz-zoom-in;
				cursor: -webkit-zoom-in;
				
				transition: transform 0.8s;
				-moz-transition: transform 0.8s;
				-webkit-transition: transform 0.8s;
				-o-transition: transform 0.8s;
				-ms-transition: transform 0.8s;
				
				transform: translate(80px) scale(2.0, 2.0) ;
				-moz-transform: translate(80px) scale(2.0, 2.0) ;
				-webkit-transform: translate(80px) scale(2.0, 2.0) ;
				-o-transform: translate(80px) scale(2.0, 2.0) ;
				-ms-transform: translate(80px) scale(2.0, 2.0) ;
			}
			
			.rechts {
				border: 0px; border-bottom: darkgrey 1px solid;
				padding-bottom: 12px; margin: 12px -42px 24px 16px;
				width: 280px; clear: right; float: right;
			}

			.rechts:hover .zoom {
				cursor: zoom-in;
				cursor: -moz-zoom-in;
				cursor: -webkit-zoom-in;
				
				transition: transform 0.8s;
				-moz-transition: transform 0.8s;
				-webkit-transition: transform 0.8s;
				-o-transition: transform 0.8s;
				-ms-transition: transform 0.8s;
				
				transform: translate(-80px) scale(2.0, 2.0) ;
				-moz-transform: translate(-80px) scale(2.0, 2.0) ;
				-webkit-transform: translate(-80px) scale(2.0, 2.0) ;
				-o-transform: translate(-80px) scale(2.0, 2.0) ;
				-ms-transform: translate(-80px) scale(2.0, 2.0) ;
			}

			figcaption {
				font-style: italic; text-align: left; font-size: 1em; padding: 8px;
			}

		/* =-=-=-=-=-=-=-Bilder und Tabellen über ide gesamte Seitenbreite-=-=-=-=-=-=-=- */
				
		.fenster  {
			overflow-x:scroll;
			margin-left: -14%; margin-right: -14%;  margin-top: 32px;  margin-bottom: 0px;
		}
		
		.fenster::-webkit-scrollbar  {
		-webkit-appearance: none;
		width:0px; height 0px;
		}
		
		.fenster::-webkit-scrollbar-thumb  {
		border-radius: 8px;
		border: 4px solid #fff;
		background-color: gray;
		}
		
		figcaption.fenster {
		margin-left: 11%; margin-right: 11%; margin-top: -8px;
		padding-left: 12px; padding-right: 12px; padding-top: 12px;
		font-style: italic;  background-color:FloralWhite;
		}
		
		div.bu {
			padding: 16px 16px 8px 16px; font-style: italic; font-size: 94%; background-color:FloralWhite;
			margin-bottom: 24px;
		}

		/* =-=-=-=-=-=-=-Tabellen-=-=-=-=-=-=-=- */
		table {
  			border-collapse: collapse;
  			border-spacing: 0;
  			width: 100%;
  			border: 1px solid #ddd;
  			
		}

		th, td {
  			text-align: left; vertical-align: top; 
  			padding: 8px; hyphens: none;
		}

		tr:nth-child(even){background-color: #f2f2f2}


		
/* ------------------------------------------------ */
/* =-=-=-=-=-=-=-Responsive Design-=-=-=-=-=-=-=- */

		@media screen and (min-width: 781px) {
			span.schmal {
				display: none
			}
			span.handy {
				display: none
			}
			div.handy {
				display: none
			}
		}

		@media screen and (max-width: 780px) {
			span.breit {
				display: none
			}
			span.handy {
				display: none
			}
			p {
				text-align: left
			}
			#toplink {
				bottom: 64px;
			}
			span.karte1 {
 				font-size: 14px;
 			}
			span.karte2 {
 				font-size: 18px;
		 	}
			span.karte3 {
 				font-size: 14px;
 		 	}
 		 	div.karte {
 				margin-top: -36px;
 			}
 			#darsteller {
				width:48px; bottom: 8px;
			}
			div.handy {
				display: none
			}
		}		

		@media screen and (max-width: 520px) {
			div.footer {
				display: none
			}
			span.breit {
				display: none
			}
			span.schmal {
				display: none
			}
			span.handy {
				display: inline
			}
			div.handy {
				display: inline
			}
			class.blutige-hand2 {
				display: none
			}
			img.tatortschild {
				display: none
			}
			.header h1 {
				margin-right: 24px
			}
			figure.links {
        		display: block; float: none; margin: 0px; margin-top: 16px; width: 96%; 
    		}
    		figure.rechts {
        		display: block; float: none; margin: 0px; margin-top: 16px; width: 96%; 
    		}
    		div.rechts {
				display: block; float: none;
        		width: 96%; margin: 0px; margin-top: 16px; 
    		}
    		img.quelle {
				 height: 36px; width: auto; max-width: 92%; margin-top:12px; 
    		}
		}
		
		@media screen and (max-width: 420px) {
			.parallax {
				 display: none;
    		}
    		img.tatortschild1 {
				 display: none;
    		}
    		.tatortschild2 {
				 display: block;
    		}
		}
		
-----------------


div.container {
  display: flex;
  flex: auto;
  flex-direction: column;
  max-height: 100%;
}

#tab-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.5s ease-out;
}

div.header3 {
  height: auto;
  text-align: left; 
  font-size: 1.2em;
  background: slategrey; 
  cursor: pointer;
  color: ghostwhite;
  padding: 0.1rem 0.1rem 0.1rem;/* Anpassung des Padding für oben und unten */
  position: -webkit-sticky; 
  position: sticky; 
  top: 0;
  z-index: 10;
}

.closebtn2 {
 position: -webkit-sticky;
 position: sticky;
 bottom: 0; width: 100%; z-index:450;
 color: white; background-color: slategrey;
 font-size: 1em; text-align: center; font-weight: 500;
 padding: 6px
}

div.topleiste {
  height: auto;
  text-align: center;
  background: slategrey;
  color: ghostwhite;
  padding: 0.1rem 0.1rem 0.1rem 0.1rem;
  position: -webkit-sticky; position: sticky; top: 0; width: 100%; z-index:150;
   margin-top: 0rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 1.2em;
  letter-spacing: 0.02rem;
  font-family: 'Fira Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div.topleiste a {
text-decoration: none; line-height: 1.4em;
 color: #818181; border-bottom: 1.5px dotted;
 transition: 0.5s;
 
  margin-top: 0.8rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 1.2em;
  color: ghostwhite;
  letter-spacing: 0rem;
  font-family: 'Fira Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.div.topleiste a:hover {
 text-decoration: none;
  background-color: #abb5bf;
 transition: 0.5s;
}

div.topleiste:after {
  content: "";
  position: absolute;
  bottom: -5rem;
  left: 0rem;
  height: 5.1rem;
  display: block;
  width: 100%;
  z-index: 100;
  background: linear-gradient(to bottom, white 20%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


div.topleiste h2 {
  font-size: 1.1em;
  font-weight: 400;
  color: #cfd7de;
  max-width: 30rem;
  margin: auto;
}

div.item {
	height: auto;
	overflow: hidden;
    transition: max-height 2s ease-out;
	padding: 0rem 1rem 0rem 1rem;
  	border-left: 4px solid slategrey; font-family: 'Fira Sans', sans-serif;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

div.table-head {
	position: relative;
}

#timeline {
  position: relative;
  display: table;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.8rem;
  
  line-height: 1.2em;
}
#timeline div:after {
  content: "";
  width: 2px;
  position: absolute;
  top: 0.5rem;
  bottom: 0rem;
  left: 60px;
  z-index: 1;
  background: #C5C5C5;
}
#timeline h3 {
  position: -webkit-sticky;
  position: sticky;
  top: 5rem;
  color: #888;
  margin: 0;
  font-size: 1em;
  font-weight: 600;
}
@media (min-width: 62em) {
  #timeline h3 {
    font-size: 1.1em;
  }
}
#timeline section.year {
  position: relative;
}
#timeline section.year:first-child section {
  margin-top: -1.0em;
  padding-bottom: 0px;
}
#timeline section.year section {
  position: relative;
  padding-bottom: 1.25em;
  margin-bottom: 2.2em;
}
#timeline section.year section h4 {
  position: absolute;
  bottom: 0;
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0;
  padding: 0 0 0 89px;
  color: #C5C5C5;
}
@media (min-width: 62em) {
  #timeline section.year section h4 {
    font-size: 1em;
  }
}
#timeline section.year section ul {
  list-style-type: none;
  padding: 0 0 0 75px;
  margin: -1.35rem 0 1em;
  max-width: 32rem;
  font-size: 0.9em;
}
@media (min-width: 62em) {
  #timeline section.year section ul {
    font-size: 1em;
    padding: 0 0 0 81px;
  }
}
#timeline section.year section ul:last-child {
  margin-bottom: 0;
}
#timeline section.year section ul:first-of-type:after {
  content: "";
  width: 10px;
  height: 10px;
  background: #C5C5C5;
  border: 2px solid #FFFFFF;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 54px;
  top: 3px;
  z-index: 2;
}

#timeline a {
 text-decoration: none; line-height: 1.4em;
 color: #818181; border-bottom: 1px dotted;
 transition: 0.5s;
}
#timeline a:hover {
 color: black;
}
.closebtn2 {
 position: -webkit-sticky;
 position: sticky;
 bottom: 0; width: 100%; z-index:450;
 color: white; background-color: slategrey;
 font-size: 1em; text-align: center; font-weight: 500;
 padding: 6px
}

.closebtn2 a:hover {
 text-decoration: none;
  background-color: #abb5bf;
 transition: 0.5s;
}

 .zeitleiste {
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 100;
 top: 0px;
 right: 0;
 background-color: white;
 overflow-x: hidden;
 transition: 0.5s;
}
.zeitleiste a {
 padding: 4px 4px 4px 16px;
 text-decoration: none;
 border-bottom: 0px;
 font-size: 16px;
 color: #818181;
 display: block;
 transition: 0.5s;
}
.zeitleiste a:hover {
 color: black;
}
.zeitleiste .closebtn {
 position: -webkit-sticky;
 position: sticky;
 bottom: 0;
 color:white; background-color: #DFB38A;
 font-size: 16px; font-weight: bold;
 padding-top: 6px; padding-bottom: 6px;
 border-bottom: 3px solid white; border-top: 3px solid white;
}

 div.timelines-years {
  clear: both;
  position: relative; z-index: 20; left: 0; top: -148px; width: 100%; height: 200px;
  margin-bottom: -160px; padding-top: 40px;
  overflow-x: scroll; white-space: nowrap;
  scroll-behavior: smooth;
  scrollbar-width: none;  /* Firefox */
  list-style: none;
  font-size: 0;  /* Fix display: inline-block spacing issue */
}

div.timelines-years::-webkit-scrollbar {
    display: none;
}

.timelines-years:hover {
 opacity: 0.9;
}

.timelines-years li {
  position: relative;
  padding-top: 8px;
  padding-bottom: 2px;
  display: inline-block;
  width: 100px;
  color: #D8D8D8;
  font-size: 16px;
  line-height: 11px;
  text-indent: -12px;
}


img.miniportrait {
	height:64px; width: auto; margin-top:-6px; margin-left:-24px;
}

.eifelkrimi {
	height:64px; width: auto; margin-top:-6px; margin-left:-24px; border: solid 1px white;
}

.eifelkrimi:hover {
		cursor: zoom-in; 
		cursor: -moz-zoom-in;
		cursor: -webkit-zoom-in;
		transform: scale(2.2, 2.2);
		-moz-transform: scale(2.2, 2.2);
		-webkit-transform: scale(2.2, 2.2);
		-o-transform: scale(2.2, 2.2);
		-ms-transform: scale(2.2, 2.2);
		
		transition: 1s ease-in-out;
		.eifelkrimi span display:block;
	}		

.weiss {
	z-index: 20;
  	font-size: x-large;
  	margin-left: 12px;
  	color:white;
  	text-shadow: 1px  1px 1px #000, 1px -1px 1px #000, -1px  1px 1px #000,-1px -1px 1px #000;
}	
	
@-moz-document url-prefix() {
    .weiss {
        font-size: medium;
    }
}

.rot {
  	z-index: 20;
  	font-size: xx-large;
  	margin-left: 22px;
  	color:red;
  	text-shadow: 1px  1px 1px #FFF, 1px -1px 1px #FFF, -1px  1px 1px #FFF,-1px -1px 1px #FFF;
}

@-moz-document url-prefix() {
    .rot {
        font-size: large;
    }
}

/* Icon-Leiste links unten */

	ul.icon-bar-l{
    	width: 36px;
        background-color: slategrey;
        position: fixed; left: 0px; bottom: 6px; z-index: 50;
    }
        
    li.icon-bar-l {
		padding: 8px 4px 8px 4px;
        text-align: center; border-top: 1px solid white;
    }
        
    li.icon-bar-l:hover {
        background-color: navy;
    }
    
    li.icon-bar-l a {
    	text-decoration: none;
    		border-bottom: 0px crimson dotted;
	}
	
	li.icon-bar-l:hover img {
    	filter: sepia(100%);
	}
	

/* =-=-=-=--=-Suche in eifelkrimi.de-=-=-=-=-=-- */

#overlay { /* Abdunkeln des Bildschirms */
    position: fixed; top: 0; left: 0; right: 0;bottom: 0;
    background-color: rgba(0,0,0,0.3); /* Abdunklung */
    opacity: 0; /* Starte unsichtbar */
    transition: opacity 1s; /* Animiere die Opacity */
    z-index: 49;
	pointer-events: none; /* Erlaube Klicks durch das Overlay hindurch */
}

#suchfenster {
    display: flex; /* oder 'none', je nachdem, wie du die Initialsichtbarkeit handhaben möchtest */
    opacity: 0; /* Starte unsichtbar für die Animation */
    position: fixed; bottom: 16px;
    left: -100%; /* Startposition außerhalb des Bildschirms */
    transform: translateX(-50%);
    transition: opacity 1s, left 1.5s; /* Animiere die Opacity und die left Position */
    z-index: 150;
    width: 300px; height: 170px;
    background-color: white;
    box-shadow: 10px 10px 10px DimGrey;
}

#suchleiste {
    position: absolute;
    bottom: 16px; left: 4px; 
}

#search-input {
    width: 210px; height: 40px; padding-bottom: 14px; border: 0px; font-size: 18px; background-color: transparent;
}

#search-btn {
    position: absolute;
    bottom: -24px; /* Angepasst nach Bedarf */
    right: -100px; /* Angepasst nach Bedarf */
    z-index: 40;
    width: 82px; 
    height: 82px; /* Angepasst für bessere Integration */
    font-size: 0px; 
    padding: 0px;
    border: 0px dotted white; /* Änderung vorgeschlagen */
    background-color: transparent; 
    cursor: pointer;
}

#closeBtn {
    float: right; position: absolute; z-index: 60;
    top: 0px;
    margin-right: 0x;
    font-size: 32px; color: red;
    cursor: pointer;
}


/* =-=-=-=-=-=-=-Zeitleiste Film & TV-=-=-=-=-=-=-=- */

		li:hover .tv {
			cursor: zoom-in; 
			cursor: -moz-zoom-in;
			cursor: -webkit-zoom-in;
			transform: scale(1.3, 1.3);
			transition: 1s ease-in-out;
		}		

		img.tv {
			height:84px; width: auto; margin-top:-16px; margin-left:-24px;
		}

		figure.tv {
			margin-top:-2px; text-align: center;
			z-index: 50; width:120px;  padding-left: 16px;  margin-bottom: -36px;
		}
		
		figcaption.tv {
			font-family: Helvetica Neue, sans-serif;
			color: white; background-color: grey;
			font-style: normal; text-align: center; font-size: 12px; padding-left: 6px;
		 	position: relative; top: 20px; padding:4px; width: max-content;
		 	opacity: 0; transition: opacity 1s; 
		 	
		 	-moz-hyphens: none;
		 	-o-hyphens: none;
			-webkit-hyphens: none;
			-ms-hyphens: none;
			hyphens: none;
		}
			
		figure:hover .tv {
			opacity:1; 
		}