body {
  margin: 0;
  padding-top: 0;
  font-family: Times New Roman, Times, serif;
 }
 
 h1 {
  
  text-shadow: 0 0 5px black;
  color: white; font-size: calc(20px + 2vw); font-weight: bold; margin-bottom: 2px;
 }
 
 h2 {
  font-size: calc(8px + 2vw);
  background-color: red;
  padding: 1%;
  float: right;
  margin-top: 0px;
 }
 
 p {
 	margin-top: 8px; margin-bottom: 8px;
 }
 	p.ort {
 	font-size: 16px; font-weight: bold;
 	text-align: center;
 	margin-top: 16px; margin-bottom: 24px; margin-left: 4px; margin-right: 4px;
 }
 a {
 	text-decoration: none; color: white;
 }
 
p.autor {
  	text-align:left; margin: 12px; font-size: 15px;
  	hyphens: auto; -moz-hyphens: auto;
 -o-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 	}
 p.portrait {
 	hover: background-color: #8FBC8F;
 	font-style: italic;
 	text-decoration: underline red;
 	text-align: center;
	}
p:portrait:hover {
 	color: crimson;
 	text-decoration: none;
 	border-bottom: 1px crimson solid;
	}
p.ortpin {
  	position: absolute; margin-top:-6px; font-family: Sans-Serif; font-size: 1.5vw; font-stretch: ultra-condensed; line-height: 1;
  	color:#000; text-shadow: 2px  2px 2px #FFF, 1px -1px 1px #FFF, -1px  1px 1px #FFF, -1px -1px 1px #FFF;
 	}
 	
 .pin {
  height:2.6vw;
 }
 .pin:hover {
  filter: hue-rotate(180deg);
  transition-duration: 2s;
 }
 
 div.krimi {
 	background-image: url("../media/logos/krimi.png");
 	
 }
 .top-container {
  position: relative;
  overflow: hidden;
  text-align: right;
  color: white;
 }
  
 .iconmap-container {
  font-family:sans-serif; font-size: 120%;
  background-color: #F2F3E6;
  position: fixed; left:0px; bottom: 0px; padding: 6px; border-top: black solid 1px;
 }
  
  .such-taste {
  font-family:sans-serif; font-size: 120%;
  background-color: crimson; color: white;
  position: fixed; left:0px; bottom: 65px; padding: 4px; width: 150px;
  text-align; left;
  transition: 1s ease-in-out;
  cursor: pointer;
 }
 
 .such-taste:hover {
  transform:translate(-38px,0px); 
 }
 
 .darsteller-taste {
  font-family:sans-serif; font-size: 120%;
  background-color: darkgreen; color: white;
  position: fixed; left:0px; bottom: 104px; padding: 4px;
  transition: 1s ease-in-out;
  cursor: pointer;
 }
 
 .darsteller-taste:hover {
  transform:translate(-38px,0px); 
 }
  
  .autoren-taste {
  font-family:sans-serif; font-size: 120%;
  background-color: #0174DF; color: white;
  position: fixed; left:0px; bottom: 142px; padding: 4px;
  transition: 1s ease-in-out;
  cursor: pointer;
 }
 
 .autoren-taste:hover {
  transform:translate(-38px,0px); 
 }
 
 .inhalt-taste {
  font-family:sans-serif; font-size: 120%;
  background-color: orange; color: white;
  position: fixed; left:0px; bottom: 180px; padding: 4px;
  transition: 1s ease-in-out;
  cursor: pointer;
 }
 
 .inhalt-taste:hover {
  transform:translate(-38px,0px); 
 }
 
 .karten-container {
  position: relative;
  overflow: hidden;
 }
 
 .top {
  position: absolute; right: 4%; bottom: -16px;
 }
 
 img.mapsicon:hover {
	transform: perspective(100px) rotateY(-45deg);
  	transition: 1s;
 }	

/* =-=-=-=-=-=-=-Positionierung der Autoren-=-=-=-=-=-=-=- */

  .dreis { position: absolute;
 		 bottom: 46%; left: 61%; 
 }
 
  .schelhove { position: absolute;
 		 top: 21%; left: 42%;
 }
 
  .engels { position: absolute;
 		 top: 19%; left: 42%;
 }
 
 .barz { position: absolute;
 		 top: 19.5%; left: 44%; 
 }
 .astor { position: absolute;
 		 bottom: 57%; left: 94.5%; 
 }
 .mtheisen { position: absolute;
 		 bottom: 57%; left: 96%; 
 }
 .everling { position: absolute;
 		 top: 25%; left: 39%;
 }
 .faheinen { position: absolute;
 		 top: 27%; left: 39%;
 }
 
 .schulte { position: absolute;
 		 bottom: 61%; left: 97%; 
 }
		
 .schier { position: absolute;
 		 bottom: 75%; left: 84%; 
 }
 
 .joachim { position: absolute;
 		 bottom: 70%; left: 80%; 
 }
 
 .pistor { position: absolute;
 		 bottom: 75%; left: 37%; 
 }
 .dalmolin { position: absolute;
 		 bottom: 62%; right: 0.3%; 
 }
 .kramp { position: absolute;
 		 bottom: 53%; left: 52%; 
 }
.revers { position: absolute;
 		 bottom: 54%; left: 54%; 
 }
 .hergarten { position: absolute;
 		 top: 25%; left: 37.5%; 
 }
  .eversheim { position: absolute;
 		 bottom: 73%; left: 89%; 
 }
 .pracht { position: absolute;
 		 bottom: 75%; left: 80%; 
 }
 .koenen { position: absolute;
 		 top: 18%; left: 47%; 
 }
 .fockenbrock { position: absolute;
 		top: 2%; right: 29%; 
 }
 .henn { position: absolute;
 		 top: 0.4%; right: 34%; 
 }
 .jagusch { position: absolute;
 		 top: 4%; right: 31%; 
 }
 .sittig { position: absolute;
 		top: 0.2%; left: 60%; 
 }
 .kaes { position: absolute;
 		bottom: 89%; left: 79%; 
 }
 .breuer { position: absolute;
 		bottom: 89%; left: 77%; 
 }
 .rbruehl { position: absolute;
 		bottom: 78%; left: 57%; 
 }
 .jschmidt { position: absolute;
 		bottom: 78%; left: 59%; 
 }
 .izquierdo { position: absolute;
 		bottom: 85%; left: 53%; 
 }
 .huemmel { position: absolute;
 		 top: 35%; left: 58%; 
 }
 
  .scheuer { position: absolute;
 		 top: 23%; left: 41%; 
 }
  .kempff { position: absolute;
 		 bottom: 54%; left: 29%; 
 }
  .mueller { position: absolute;
 		 top: 1%; left: 32%; 
 }
  .pelzer { position: absolute;
 		 top: 1%; left: 40%; 
 }
 .boell { position: absolute;
 		 top: 7%; left: 34%; 
 }
 .westmann { position: absolute;
 		 bottom: 53%; left: 90.5%; 
 }
 .wirtz-m { position: absolute;
 		top: 27%; left: 49%; 
 }
 .wirtz-w { position: absolute;
 		 top: 27%; left: 51%; 
 }
 .marx { position: absolute;
 		 bottom: 4%; left: 45%; 
 }
 .viebig { position: absolute;
 		 bottom: 3%; left: 43%; 
 }
 
 .kleiker { position: absolute;
 		 top: 2%; left: 19%; 
 }
.caspari { position: absolute;
 		 bottom: 77%; left: 28%; 
}
.glineur { position: absolute;
 		 bottom: 83.5%; left: 20%; 
}
.humberg { position: absolute;
 		 bottom: 44%; left: 46%; 
}
.mainz { position: absolute;
 		 bottom: 73%; left: 16%; 
}
.angelikakoch { position: absolute;
 		 bottom: 39%; left: 72%; 
}
.lano { position: absolute;
 		 bottom: 25%; left: 44%; 
}
.siefener { position: absolute;
 		 bottom: 73%; left: 16%; 
}
.weyermann { position: absolute;
 		top: 4%; left: 33%; 
}
.krieger { position: absolute;
 		 top: 1.5%; left: 30%; 
}
.tillmanns { position: absolute;
 		 top: 0.1%; left: 37%; 
}
 .reuter { position: absolute;
 		 bottom: 43%; left: 34%; 
}

 
/* =-=-=-=-=-=-=-Positionierung der Orts-Pins-=-=-=-=-=-=-=- */
  .beilstein { position: absolute;
 		 bottom: 32%; left: 90%;
 }
 
  .berndorf { position: absolute;
 		 bottom: 51%; left: 50%; 
 }
 
 .bitburg { position: absolute;
 		 bottom: 17%; left: 40%; 
 }

.blankenheim { position: absolute;
 		 top: 35%; left: 48%; 
 }

.buerresheim { position: absolute;
 		 bottom: 54%; left: 84%; 
 }
 .daun { position: absolute;
 		 bottom: 42%; left: 60%; 
 }
 
 .dernau { position: absolute;
 		 bottom: 70%; left: 77%; 
 }
 
 .duettling { position: absolute;
 		 bottom: 80%; left: 40%; 
 }
 
 .dreiborn { position: absolute;
 		 bottom: 75%; left: 35%; 
 }
 .dueren { position: absolute;
 		top: 0.3%; left: 35%; 
 }
 .eltz { position: absolute;
 		 bottom: 40%; left: 92%; 
 }
 .euskirchen { position: absolute;
 		 bottom: 84%; left: 54%; 
 }
 .frauenkron { position: absolute;
 		 bottom: 56%; left: 29%; 
 }
 
 .freilingersee { position: absolute;
 		 top: 38%; left: 55%; 
 }
 
 .gerolstein { position: absolute;
 		 bottom: 44%; left: 48%; 
 }
 
 .goloring { position: absolute;
 		 bottom: 50%; left: 96%; 
 }

.heimbach { position: absolute;
 		bottom: 81%; left: 33%; 
 }

 .hellenthal { position: absolute;
 		top: 27%; left: 33%; 
 }
 
.huertgenwald { position: absolute;
 		 bottom: 89%; left: 30%; 
 }
 
.kall { position: absolute;
 		 top: 23%; left: 42%; 
 }
 
.kehr { position: absolute;
 		 bottom: 54%; left: 30%; 
 }
 
 .kempenich { position: absolute;
 		 bottom: 61%; left: 82%; 
 }
 
 .kommern { position: absolute;
 		 top: 20%; left: 48%; 
 }

 .kornelimuenster { position: absolute;
 		 top: 8%; left: 14%; 
 }

 .marialaach { position: absolute;
 		 bottom: 60%; left: 91%; 
 }

 .mayen { position: absolute;
 		 bottom: 53%; left: 88%; 
 }
 .mechernich { position: absolute;
 		top: 19%; left: 46%; 
 }
 
 .mehren { position: absolute;
 		 bottom: 39%; left: 64%; 
 }
 .mendig { position: absolute;
 		 bottom: 57%; left: 92%; 
 }
 .monreal { position: absolute;
 		 bottom: 49%; left: 87%; 
 }
 
 .monschau { position: absolute;
 		 bottom: 73%; left: 18%; 
 }
 
 .muenstereifel { position: absolute;
 		 bottom: 78%; left: 54%; 
 }
 
 .nettersheim { position: absolute;
 		 top: 28%; left: 46%; 
 }
  
 .nideggen { position: absolute;
 		 bottom: 88%; left: 33%; 
 }
 
 .neuerburg { position: absolute;
 		 bottom: 25%; left: 20%; 
 }

 .nuerburgring { position: absolute;
 		 bottom:52%; left: 67%; 
 }
 
 .pruem { position: absolute;
 		 bottom: 43%; left: 31%; 
 }
 
 .schleiden { position: absolute;
 		 bottom: 72%; left: 35%; 
 }
 
 .soetenich { position: absolute;
 		 top: 25%; left: 42%; 
 }
 .schmidtheim { position: absolute;
 		 top: 41%; left: 37%; 
 }
 
 .stadtkyll { position: absolute;
 		 top: 43%; left: 38%; 
 }
 
 .stolberg { position: absolute;
 		 top: 3%; left: 17%; 
 }
 
.teufelsschlucht { position: absolute;
 		 bottom: 9%; left: 32%; 
 }
.trier { position: absolute;
 		 bottom: 4%; left: 47%; 
}
.traben { position: absolute;
 		 bottom: 19%; left: 81%; 
 }

.urfttalsperre { position: absolute;
 		 bottom: 77%; left: 30%; 
}
 .vogelsang { position: absolute;
 		 bottom: 77%; left: 35%; 
 }
  .winterscheid { position: absolute;
 		 bottom: 46%; left: 20%; 
 }
 
 .woffelsbach { position: absolute;
 		 bottom: 81.5%; left: 29.5%; 
 }
 
 .zuelpich { position: absolute;
 		 bottom: 87%; left: 44%; 
 }
 
 
/* =-=-=-=-=-=-=-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;
 font-family: 'Fira Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.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: medium;
 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;
  		margin-top: -24px; margin-bottom: 24px;
	}
		
	.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-family: sans-serif; font-weight: bold; font-size: 1.4em; 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-family: sans-serif; font-weight: bold; font-size: 1.4em; color: #7B634C;
}

#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;
		}

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

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0; /* Starte unsichtbar */
    transition: opacity 1s; /* Animiere die Opacity */
    z-index: 49;
    display: none; /* Nur anzeigen, wenn aktiv */
}

#suchfenster {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateX(-100%);
  width: 300px;
  height: 170px;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 10px 10px 10px DimGrey;
  z-index: 150;
  display: none; /* Sorgt dafŸr, dass es komplett unsichtbar ist, bis es aktiviert wird */
  opacity: 0; /* Start-Transparenz */
}

#suchfenster img {
  max-width: 100%;
  height: auto;
  display: block;
}


#suchleiste {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

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


#search-btn {
    position: absolute;
    top: -4px; right: -4px;
    width: 40px; height: 90px;
    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;
}