@charset "UTF-8";
/*variablen*/
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-ExtraLight.woff2') format('woff2'),
      url('../fonts/Manrope-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Medium.woff2') format('woff2'),
      url('../fonts/Manrope-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-SemiBold.woff2') format('woff2'),
      url('../fonts/Manrope-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Regular.woff2') format('woff2'),
      url('../fonts/Manrope-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-ExtraBold.woff2') format('woff2'),
      url('../fonts/Manrope-ExtraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Bold.woff2') format('woff2'),
      url('../fonts/Manrope-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-ExtraLight.woff2') format('woff2'),
      url('../fonts/Manrope-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Light.woff2') format('woff2'),
      url('../fonts/Manrope-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}






html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  vertical-align: baseline;
  
}

/* ::-webkit-scrollbar {
  width: 40px;
} */

svg {
  vertical-align: bottom;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

* {
  box-sizing: border-box;
}

/* clearfix */
.clearfix:after, .grid:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix, .grid {
  display: block;
}

/* general */
a {
/*  text-decoration: underline;*/
  color: #000;
}

a:hover {
/*  text-decoration: underline;*/
  color: #999;
  outline: none;
}

a:focus {
  outline: none;
}

.grid-item a:hover {
  color: #fff;
}

p {
  margin: 0;
  padding: 0;
}

strong, b {
  font-weight: 600;
}

italic, i, em {
  font-style: italic;
}

img {
  max-width: 100%;
  max-height: 100%;
  outline: none;
  vertical-align: bottom;
}

* {
  font-family: "Manrope";
}

body {
/*  word-break: break-word;*/
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;

  font-family: "Manrope";
  font-weight: 200;
  font-size: 190%;
  line-height: 1.2em;
  color: transparent !important;
  margin: 0;
  overflow: hidden;
  max-width: 1980px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  min-height: 100vh;  
  min-width: 100vw;

  scrollbar-color: #142638 transparent;
}

body.greyscale {
  filter: grayscale(1);
}

h1 {
  font-weight: 300;
  font-size: 1.1em;
  line-height: 1em;
  background-color: #000;
  color: #fff;
  display: inline-block;
  padding: 0.3em 0.3em 0.2em 0.3em;
  margin: 0 0 0.6em 0;
/*  text-transform: uppercase;*/
  letter-spacing: 0.033em;
}

h2 {
  font-weight: 300;
  font-size: 3.25em;
  line-height: 1em;
  margin: 0 0 0.2em 0;
/*  text-transform: uppercase;*/
  display: block;
  letter-spacing: 0.02em;
}

h3 {
  font-weight: 200;
  font-size: 1.08em;
  line-height: 1em;
  margin: 0 0 0 0;
  display: block;
  letter-spacing: 0.02em;
}

h4 {
  font-weight: 300;
  font-size: 1.08em;
  line-height: 1em;
  margin: 0 0 0 0;
  text-transform: uppercase;
  display: block;
  letter-spacing: 0.02em;
}

h5 {
  font-weight: 300;
  font-size: 1.1em;
  line-height: 0.8em;
  margin: 0 0 0.2em 0;
  text-transform: uppercase;
  display: block;
  letter-spacing: 0.01em;
}

h6 {
  font-weight: 300;
  font-size: 1em;
  line-height: 0.8em;
  margin: 0 0 0.2em 0;
  text-transform: uppercase;
  display: block;
  letter-spacing: 0.01em;
}

p {
  display: block;
}

table, tr, td {
  border: none;
  padding: 0;
  margin: 0;
}

td {
  padding: 0.3em 0.2em;
}

thead td, tfoot td {
  padding: 0.5em 0.2em;
}

thead {
  border-bottom: 2px solid #000;
  border-top: 2px solid #000;
  font-weight: 300;
  text-transform: uppercase;
}

tfoot {
  border-bottom: 2px solid #000;
  border-top: 2px solid #000;
  font-weight: 300;
  text-transform: uppercase;
}

.floatLeft, .rechtsUmfliessen, .rechtsumfliessen {
  clear: left;
  float: left;
  margin: 0 1em 0.6em 0;
}

.floatRight, .linksUmfliessen, .linksumfliessen {
  clear: left;
  float: right;
  margin: 5px 0 0.6em 1em;
  text-align: right;
}

.kacheln {
  padding-bottom: 3em;
}

footer {
 /* position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99996;
  display: none;*/
}

.fancybox-active footer {
  display: block;
}

.footer {
  padding: 20px 40px;
  background-color: #fff;
}

.footer .sp {
  display: inline-block;
  margin-right: 1em;
}

.footer .start a {
  padding: 10px 0;
  margin: 0;
  display: block;
}

.footer .lang {
  font-weight: 300;
  margin: -20px 0;
}

.footer .lang a {
  text-decoration: none;
  color: #cfd0d0;
}

.footer .lang .de {
  padding: 10px 5px;
  display: inline-block;
}

.footer .lang .en {
  padding: 10px 5px;
  display: inline-block;
}

.footer .subtitle {
  margin-left: 160px;
  cursor: pointer;
}

.footer .impr {
  float: right;
  margin: 0;
}

.footer .impr a {
  padding: 20px 40px;
  margin: -20px -40px -20px 0;
}

.bg {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.bg svg {
  transform: translate(-50%, 0);
  left: 50%;
  position: relative;
}

.contenttext { 
  color: #161C15;
  padding: 0px;
  width:  100%;
  height: 100%;
  margin: 0;
  font-size: 0.7em;
  position: relative;
  overflow: auto;

}

.contenttext .closesubtitle {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 45;
  padding: 10px;
  width: 43px;
  height: 43px;
  cursor: pointer;
}

.sp1 {
  float: left;
  width: 49%;
}

.sp2 {
  float: right;
  width: 49%;
}

.contenttext h1, .contenttext h3, .contenttext h4, .contenttext h5, .contenttext h6 {
  font-size: 1.1em;
  line-height: 1.2em;
  color: #000;
  background: none;
  padding: 0;
  margin: 0 0 0.2em 0;
}

.contenttext h1 {
  margin-bottom: 1.5em;
}

.contenttext h2, .contenttext p {
  font-size: 1.05em;
  line-height: 1.2em;
  padding: 0;
  margin: 0 0 0.2em 0;
  font-weight: 200;
}

.contenttext p {
  padding: 0 0 0.8em 0;
}

.contenttext p + h2 {
  margin-top: 1em;
}

.absatz {
  margin: 0 auto;
  padding: 0 0 2.6em 0;
  max-width: 46em;
  font-size: 0.7em;
  line-height: 1.3em;
  position: relative;
}

.absatz h1 {
  background-color: #fff;
  color: #068A45;
  font-size: 2.3rem;
  padding: 0.1em 0.3em 0.1em 0.3em;
  letter-spacing: 0;
}

.absatz h2 {
  font-size: 2rem;
  margin: 0 0 0.4em 0;
}

.absatz h3 {
  font-size: 1.9rem;
  margin: 0 0 0.4em 0;
}

.absatz h4 {
  text-transform: none;
  margin: 0 0 0.4em 0;
}

.absatz p {
  margin: 0 0 0.7em 0;
}

.absatz p + h1, .absatz p + h2, .absatz p + h3, .absatz p + h4 {
  margin-top: 1em;
}

.absatz .bild {
  max-width: 100%;
}

.absatz .bild-untertitel {
  font-size: 0.9em;
  line-height: 1.1em;
  padding: 0.3em 0 0 0;
  color: #aaa;
}

.absatz .tab-bild {
  max-width: 80%;
}

.absatz .tab-text {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #068A45;
  max-width: 100%;
  width: 15em;
  padding: 1.5em 1.5em 0.7em 1.5em;
}

.absatz .tab-text a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.absatz .tab-text a:hover, .absatz .tab-text a:focus {
  color: #000;
}

.absatz .tab-text h3 {
  margin-bottom: 1.3em;
}


@keyframes fadeIn {
  0% {
    opacity: 0.1;
  }
  80% {
    opacity: 0.2;
  }

  90% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn-animation_ {
  animation: fadeIn 6s ease 1;
}


.fade-2 {
  animation: fadeIn 2s linear 1;
}

.fade-1 {
  animation: fadeIn .5s linear 1;
}


.pre-h1 {
  font-size: 200px;
  line-height: 155px;
  margin-left: -9px;
}
.pre-text {
  font-weight: 700;
  text-align: left;
  font-size: 65px;
  font-family: Manrope, sans-serif;
  background: linear-gradient(90deg, #142638, #B1B1B1, #142638);
  letter-spacing: 5px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 80%;
  animation: shine 6s linear 1;
  position: absolute;
  top: 38vh;
  left: 38%;
  width: 1000px;
  height: 1000px;
  line-height: 55px;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }
  100% {
    background-position-x: 500%;
  }
}

.rnav {
  margin-left: 2.1vh;
  position: absolute;
  z-index: 4;
  right: 3.65%;
  top: 14.8vh;
  flex-direction: column;
  gap: 20.5vh;
  display: flex;
  width: 1.58%;
}

  .lnav {
    position: absolute;
    z-index: 4;
    left: 3.7%;
    top: 14.7%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 170px;
  }
  
  .button-en,
  .button-de
  {
    /* display: none; */
  }
  
  .button-plus.nav-button {
    margin-bottom: 1.9vh;
  }

  .mainstyle11 .fb_impressum {
      width: 30% !important;
      height: 70% !important;
  }
  .mainstyle11 .fb_impressum > * {
    border-radius: 7px !important;
}
 
fancybox-slide.fancybox-slide--current.fancybox-slide--html.fancybox-slide--complete {
  border-radius: 7px;
}
#impressum-1 {
  border-radius: 7px;
}

  .startpage .startbox {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #161C15;  
}

.nav-button {
  width: 100%;
  margin-bottom: 3.6vh;
}
.button-kontakt.nav-button {
  margin-bottom: 1.8vh;
}

.metainfo-container, 
.fancybox-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 20%;
    left: 35%;
    font-family: "Manrope", sans-serif;
    color: #F4F4F4;
/*    background-color: rgba(45, 45, 45, 0.99);*/
    background-color: transparent;
    opacity: 1;
    height: 74%;
    width: 100%;
/*    pointer-events: none;*/
}

#poi-teaser-close,
#poi-Main-Modal-close,
#poi-Main-Modal-2-close,
#poi-quiz-Modal-close {
  display: flex;
  justify-content: flex-end;
  float: right;
}

#poi-teaser_img_sig {
  /* display: none; */
  font-size: .1em;
  line-height: 1;
  margin-top: 7%;
}


#map {
  height: 100%;
  width: 100%;
  z-index: 1;
}

.poi-div-icon .greycircle {
  background-color: #aaa;
  border-radius: 50%;
  margin-top: 5px;
  margin-left: 5px;
  width: 20px;
  height: 20px;
}

.cluster-icon {
  background-color: #c6c6c5;
  color: #294e6d;
  border-radius: 50%;
  border: 1px solid #636c6f;
  width: 30px;
  height: 30px;
  font-size: 1rem;
  line-height: 28px;
  text-align: center;
}

.leaflet-div-icon {
  background: transparent !important;
  border: none !important;
}

#poi-teaser {
  display: none;
  color: black;
  z-index: 5;
  position: absolute;
  top: 5.9vh;
  right: 24.5vh;
  max-width: 21.7%;
  min-height: 50%;
  padding: 0.9% 1.1% 2.5% 1.5%;
}

#poi-teaser_img_url {
  /* max-width: 62%; */
  margin-top: 10%;
  min-width: 40%;
  max-height: 40vh;
}

.frontmedia, .middlemedia {
  display: none;
}

.poi-teaser-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.poi-teaser_img_wrap {
  display: flex;
  align-items: flex-end;
}

#poi-teaser_img_text {
  font-size: 0.5em;
  line-height: 13px;
  /* margin-left: 5.5%; */
  font-weight: 500;
  font-family: Manrope;
  line-height: 1em;
}
.poi-teaser-Modal_img_text_wrap {
  padding: 0 4%;
  display: none;
}

#poi-teaser_text_k {
  font-size: .65em;
  line-height: 1.11;
  font-weight: 500;
  font-family: Manrope;
  margin-top: 1.5%;
}

#poi-teaser_h1 {
  margin-top: 7.5%;
  font-weight: 600;
  font-size: .9em;
  font-family: Manrope;
  line-height: 1em;
}

#poi-teaser_h2 {
  font-size: 0.6em;
  font-family: Manrope;
  font-weight: 600;
  margin-top: 6.1%;
  line-height: 1.4em;
}


#poi-Main-Modal,
#poi-Main-Modal-2,
#poi-quiz-Modal {
  display: none;
  color: #161C15;
  z-index: 5;
  position: absolute !important;
  padding: 1.8vh 1.9vh 4.5vh 3.8vh;
  list-style: none;
  top: 2vh;
  left: 54vh;
  overflow: hidden;
  height: 95%;
  width: 40%;
  max-width: 64%;
  max-height: 80%;  
  /* opacity: .7; */
  
}

#poi-Main-Modal-2-wrap {
  padding: content-box;
  width: 94%;
  margin-left: 3%;
}


.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius,10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color,rgba(0,0,0,1));
}


#poi-Main-Modal-wrap-0,
#poi-Main-Modal-2-wrap-0,
#poi-quiz-Modal-wrap-0 {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  margin-top: 1%;
}

#poi-Main-Modal-wrap,
#poi-Main-Modal-2-wrap {
  height: 90%;
  width: 100%;
  padding: 0 3% 0 0;
}
.swiper_.mileySwiper_ {
  height: 90%;
  overflow: auto;
  position: relative;
  /* scrollbar-width: none; */
}
#scrollbar-handle {
  /* display: none; */
}


#poi-Main-Modal-wrap,
#poi-Main-Modal-2-wrap {
  /* -ms-overflow-style: none;  
  scrollbar-width: none;  */
}
#poi-Main-Modal-wrap::-webkit-scrollbar,
#poi-Main-Modal-2-wrap::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}

#poi-Main-Modal_nav {
  width: 19px;
  margin-top: 11%;
  padding: 2%;
}


.round-corner {
  border-radius: 5px;
  -moz-border-radius: 5px;
}
.round-corner-r {
  border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
}
.gradient-bg {
  background-image: linear-gradient(
    90deg,
    hsl(210deg 7% 48%) 0%,
    hsl(208deg 6% 56%) 0%,
    hsl(206deg 6% 66%) 3%,
    hsl(202deg 5% 78%) 10%,
    hsl(200deg 3% 87%) 21%,
    hsl(200deg 1% 93%) 37%,
    hsl(344deg 0% 95%) 60%,
    hsl(0deg 0% 96%) 100%
  );
}

.drop-shaddow {
  box-shadow: 4px 4px 12px 1px #000000;
}

.overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

#close-button-impressum {
  position: absolute;
  top: 2.9%;
  left: 90%;
  z-index: 30;
}


.leaflet-pane.leaflet-overlay-pane > :first-child {
  opacity: 0.68;
}

button-home.nav-button {
  margin-bottom: 5vh;
}
.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  }

  #poi-teaser_article_url,
  #poi-menu_article_url,
  #poi-menu-2_article_url {
    margin-top: 9%;
    text-align: center;
    font-size: 25px;
    height: 100%;
  }

  #menu-2-quiz {
    margin-top: 9%;
  }

.poi-Main-Modal-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.leaflet-tile.leaflet-tile-loaded {
  /* filter: sepia(100%) hue-rotate(190deg) saturate(500%); */
  /* filter: sepia(0%) hue-rotate(110deg) saturate(28%); */
  filter: url(#filter);
  filter: url(#filter-blue) saturate(10%);  
}



#poi-Main-Modal_h1,
#poi-Main-Modal_h1-slide-2,
#poi-Main-Modal-2_h1 {
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.2em;
  margin-bottom: .4%;
  /* margin-top: -1.7%; */
  max-width: 98%;
}

#poi-Main-Modal_h2,
#poi-Main-Modal-2_h2,
#poi-Main-Modal_h2-slide-2 {
  font-size: .8em;
  font-weight: 500;
  line-height: 1.5rem;
  margin-bottom: 4%;
}

#poi-Main-Modal_h3,
#poi-Main-Modal-2_h3 {
  font-size: .62em;
  font-weight: 700;
  line-height: 2.2em;
  /* margin-bottom: 6%; */
}

#poi-Main-Modal_text_l,
#poi-Main-Modal-2_text_l {
  font-size: .6em;
  font-weight: 500;
  line-height: 1.3em;
  /* width: 20vw; */
  /* overflow: scroll; */
  height: 100%;
  letter-spacing: .8px;
  scrollbar-width: none;
}

.poi-Main-Modal_text_img_wrap {
  display: flex;
  margin-top: 1%;
  gap: 2vw;
}

.swiper-slide_.slide-01 .poi-Main-Modal-inner:nth-child(2) .poi-Main-Modal_text_img_wrap{
      flex-direction: column;
}

.swiper-slide_.slide-01 .poi-Main-Modal-inner:nth-child(2) .poi-Main-Modal_text_img_wrap img{
      width: 100%;
}


.poi-Main-Modal_img_wrap {
  max-width: 100%;
  /* min-width: 20.1vw; */
  max-height: 100vh;
}

.poi-quiz-Modal_antwort {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4%;
}
.poi-quiz_img_url {
  width: 7vh;
}

#poi-menu-2_article_url img {
  margin-top: 13%;
}
#poi-quiz-Modal_feedback {
  margin-top: 5%;
  font-size: 1em;
  margin-left: 4%;
}
.poi-main-Modal_img_wrap img {
  width: 100%;
}

.poi-quiz-Modal_antwort {
  font-size: .9em;
  line-height: 1.3;
  align-items: center;
  margin-top: 3%;
}
#poi-quiz-Modal_img_text {
  font-size: 0.5em;
  font-weight: 400;
  line-height: 1.3;
  margin-top: 5%;
}

#poi-quiz-Modal_nav {
  display: flex;
  margin-top: 15vh;
  justify-content: center;
  flex-direction: column;
  width: 1%;
}

.poi-main-Modal_img_wrap {
  width: 35vw;
  max-width: 30%;
}

.poi-Main-Modal_steck_text_wrap {
  font-size: .65em;
  font-weight: 700;
  margin-bottom: 4%;
  margin-top: 0%;
  line-height: 1.4em;
  width: 45%;
  flex-basis: 100%;
}
#poi-Main-Modal_steck_steck {
  margin-bottom: 4%;
  margin-top: -1%;
  font-variant: small-caps;  
  font-weight: 900;
  letter-spacing: 3px;
}

#poi-Main-Modal-inner-overview-hist-text {
  margin-bottom: 1%;
  margin-top: 0%;
  font-variant: small-caps;   
  font-weight: 900;
  letter-spacing: 3px;
  font-size: .65em ;
}

#poi-Main-Modal_steck_adresse_data,
#poi-Main-Modal_steck_bau_data,
#poi-Main-Modal_steck_gut_data {
  padding-left: 4%;
  width: 80%;
  font-weight: 500;
  line-height: 1.2em;
}

#poi-Main-Modal_steck_bau,
#poi-Main-Modal_steck_gut {
  margin-top: 3%;
}

#poi-Main-Modal_steck_epoche {
  margin-top: 3%;
}

#poi-Main-Modal_steck_kategorie,
#poi-Main-Modal_steck_epoche_data,
#poi-Main-Modal_steck_kategorie_data {
  margin-top: 3%;
  margin-bottom: 3%;
}

#poi-Main-Modal_steck_kategorie_data img {
    margin-bottom: 5px;
}

#poi-Main-Modal_steck_DemokratieURL a {
    text-decoration: none;
}

#poi-Main-Modal_img_url {
  /* width: fit-content; */

}

#poi-Main-Modal_steck_DemokratieURL {
    margin-top: 35px;
}

#poi-Main-Modal_img_text,
#poi-Main-Modal_img_text-haupt,
#poi-Main-Modal_img_text-haupt-2,
#poi-Main-Modal_img_text-haupt-3 {
  font-size: 0.5em;
  font-weight: 500;
  margin-bottom: 1%;
  line-height: 1.1em;
  margin-top: 1.5%;
}

#poi-Main-Modal_img_sig,
#poi-Main-Modal_img_sig-haupt,
#poi-Main-Modal_img_sig-haupt-2,
#poi-Main-Modal_img_sig-haupt-3 {  
  font-size: 0.4em;
  font-weight: 500;
  line-height: 1.3em;
  margin-bottom: 5%;
}


.poi-Main-Modal_text_wrap {
  width: 100%;
}


#scroll_bar {
  /* display: none; */
}

#poi-Main-Modal_nav {

  display: flex;
  flex-direction: column;  
  height: 85%;
  margin-top: 0;
  justify-content: space-between;
  position: absolute;
  right: 44px;
  top: 12%;
  display: none;
}

#poi-Main-Modal-2 #poi-Main-Modal_nav {
  top: 10%;
}


.swiper-slide:nth-child(2),
.swiper-slide:nth-child(3){
  /* display: none; */
}

.filter-wrap {
  position: absolute;
  bottom: 5%;
  left: 0;
  z-index: 4;
  width: 100%;
  display: flex;
  justify-content: center;
}

.test-layout {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: .9;
  z-index: 2;
}

#overlay {
  /* position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  z-index: 2; */
}
::-webkit-scrollbar {
  /* width: 2em; */
}


::-webkit-scrollbar-button {

}

.nav-menu {
  width: 57%;
  margin-top: 20%;
}
.button-close.modal-button {
  width: auto;
}
.button-close.modal-button {
  height: 1em;
  margin: 0em 0em;
}

.hovergroup:hover .hover {
  fill: #F5F5F5;
}


#vor-1918.select .active *{
  fill: #0F1D2A;
}
#Y1989-2009.select  .active *{
  fill: #0F1D2A;
}
#Y1945-1989.select .active *{
  fill: #0F1D2A;
}
#Y1918-1945.select .active *{
  fill: #0F1D2A;
}


#vor-1918.select .select{
  fill: #F5F5F5;
}
#Y1989-2009.select  .select{
  fill: #F5F5F5;
}
#Y1945-1989.select .select{
  fill: #F5F5F5;
}
#Y1918-1945.select .select{
  fill: #F5F5F5;
}





#Mit:hover .hover *,
#Mit:hover .hover{
  fill: #E56538;
}
#Gleich:hover .hover *,
#Gleich:hover .hover{
  fill: #ac0000;
}
#Frei:hover .hover *{
  fill: #FEC700;
}
#Wehr:hover .hover *,
#Wehr:hover .hover{
  fill: #C6559E;
}
#Recht:hover .hover *,
#Recht:hover .hover{
  fill: #609B5E;
}
#Zivil:hover .hover *,
#Zivil:hover .hover{
  fill: #009BA4;
}

#Mit.select .select{
  fill: #E56538;
}
#Gleich.select  .select{
  fill: #ac0000;
}
#Frei.select .select{
  fill: #FEC700;
}
#Wehr.select .select{
  fill: #C6559E;
}
#Recht.select .select{
  fill: #609B5E;
}
#Zivil.select .select{
  fill: #009BA4;
}


#Mit.select .active * { 
  fill: #0F1D2A;
}
#Gleich.select .active * {
  fill: #0F1D2A;
}
#Frei.select .active * {
  fill: #0F1D2A;
}
#Wehr.select .active * {
  fill: #0F1D2A;
}
#Recht.select .active * {
  fill: #0F1D2A;
}
#Zivil.select .active * {
  fill: #0F1D2A;
}

a {
  color: #161C15 !important;
}
.line:after {
  content: url(../images/line_short.png);
  
}

#contact-form {
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 20px;
}

form {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
input,
#message {
  background: #a4a0a0b5;
  border: transparent;
  padding: 10px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 19px;
}

#contact-form button {
     background: radial-gradient(#c6c6c6, transparent);
    border-radius: 5px;
    font-size: 1em;
}
/*      */
/* Menu */
/*      */

#menu {
  position: absolute;
  left: -40%;
  top: 28.3%;
  width: 37.5%;
  height: 55.4%;
  z-index: 6;
  line-height: 1em;
}

.menu {
  position: absolute;
  width: 50%;
  height: 100%;
  /* opacity: .6; */
  padding: 4.3% 2% 0 9.7%;
  font-size: .67em;
  font-weight: 500;
}
#menu-1 {
  z-index: 5;
  font-size: .67em;
  font-weight: 500;
  height: auto;
}

#menu-2 {
  height: auto;
  max-height: 100%;
  top: 1%;
  z-index: 4;
  min-width: 50%;
  padding: 1.55% 1.7% 4% 9.5%;
  
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  }
  @keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
  } 


#poi-Main-Modal_nav svg {
  /* display: none; */
}

#menu-2-h1,
#menu-2-h1-2 {
  margin-top: 10.1%;
  line-height: 1.24em;
  font-size: 1.5em;
  font-weight: 600;
}


#menu-2-text, 
.menu-2-text {
  margin: 9.3% 0 10%;
  line-height: 1.24em;
  padding-right: 14%;
}

#menu-close-1,
#menu-close-2 {
  display: flex;
  justify-content: end;
  height: 1.5em;
}

.menu-2 #menu-close-1 .button-close {
  display: none;
}

.button-close {
  height: 1.5em;
  margin: 0 0.5em 0 0;
}
#menu-artikel-epochen,
#menu-artikel-kategorie {
  color: #6F6F6E;
}

#menu-artikel-Zivilgesellschaft {
  margin-bottom: 8%;
}

div#rex-article-wrap {
    width: 93%;
}


/*      */
/* Menu END */
/*      */


.swiper-button-prev, 
.swiper-button-next {
  /* display: none  !important; */
}
.swiper {
  margin-top: 1%;
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
  right: auto !important;
  color: inherit !important;
}

.swiper-button-prev {
  rotate: 90deg;
  right: 3% !important;
  left: auto !important;
  top: 25% !important;
  color: inherit !important;
  display: none !important;
}

.swiper-button-next {
  rotate: 90deg;
  right: 3% !important;
  left: auto !important;
  margin-top: 17% !important;
  color: inherit !important;
  display: none !important;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  display: none;
}


#post-151 p {
  margin: 2% 0;
}

#poi-quiz-Modal_nav svg {
  rotate: -90deg;
}

#poi-quiz-Modal #scroll_wrap_up {
  display: none;
}

.swiper-wrapper_ {
  padding-right: 5%;
  /* height: 90%; */
}
#poi-quiz-Modal-wrap {
  height: 100%;
  overflow: hidden;
}
#poi-quiz-Modal_h1 {
  font-weight: 600;
  font-size: 1.2em;
}

.result .poi-quiz-Modal_antwort div {
  opacity: .3;
}
.result .poi-quiz-Modal_antwort div[data-correct="true"]{
  opacity: 1;
}






@media only screen and (max-height: 1000px) {
  #menu {
    top: 4%;
    height: 92%;
  }

  #poi-teaser {
    top: 2%;
  }
  #poi-Main-Modal {
    top: 2%;
  }
  .poi-Main-Modal_steck_text_wrap {
    font-size: 0.5em;
  }

  #poi-teaser_text_k {
    font-size: .45em;
  }
  #poi-teaser_img_text {
    font-size: 0.3em;
    line-height: 1.2em;
  }


}










/*.einleitung {
  background-color: #fff !important;
  border-bottom: 5px solid #000 !important;
  border-right: 5px solid #000 !important;
}*/



.more-button {
  background-image: url(../images/mehr-button.svg);
  background-repeat: no-repeat;
  width: 365px;
  height: 80px;
  display: block;
  margin: 49px 0 50px 0;
}




.hide,
.hide-date {
  display: none;
}




@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}



.slidecontent.sc_char.zitat_sc_char .sc_title span::after {
    background-image: url(../images/anfuehrungszeichen.svg);
    background-repeat: no-repeat;
    background-position: center;
    content: " ";
    position: absolute;
    /* display: block; */
    bottom: 80px;
    right: -60px;
    width: 150px;
    height: 150px;
}


#Quiz-Pfeil-rechts {
  fill: #ECECEC;
   -webkit-transition: fill-opacity 1s;
    transition: fill-opacity 1s;
}


/** {cursor: none;}*/


@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 3s 2;
   -moz-animation: flickerAnimation 3s 2;
   -o-animation: flickerAnimation 3s 2;
    animation: flickerAnimation 3s 2;
}


.inner a.active h3 {
  color: #ECECEC;
}

.gallery-meta-wrap p,
.gallery-meta-wrap .gallery-image-subtitle,
.einleitung,
.ui-tooltip {
  hyphens: auto;
}

.no-hyphens {
  hyphens: none;
}


.button {
  position: absolute;
  padding: 8px 16px;
  background: rgba(1, 1, 1, .5);
  border: none;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
  top: 0%;
  left: 0%;
  z-index: 11111111;
  width: 100%;
  height: 100%;
   pointer-events: none;
}



.button--loading::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;

}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

.thumb_ {
  width: 68px;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/cat.gif"),
    linear-gradient(
      90deg,
      transparent,
      magenta,
      red,
      yellow,
      limegreen,
      turquoise,
      blue,
      magenta,
      transparent
    );
  background-position: center bottom, center -40px;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
}


















.startpage .backmedia {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  overflow: hidden;
}

.startpage .backmedia video {
  width: auto;
  height: auto;
  max-height: 200%;
  max-width: 200%;
  min-width: 100%;
  min-height: 100%;
}

.startpage .backmedia picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: hidden;
  object-position: right;
}

.startpage .middlemedia {
  position: absolute;
  z-index: 8;
  top: 0;
  left: -50px;
  right: 0;
  bottom: 0;
}

.startpage .regionen {
  top: 20%;
  bottom: 0;
}

.startpage .regioneninner {
  margin: 0;
}

.startpage .regionen .regionen_areas, .startpage .regionen .regionen_areas .regionen_areas_inner {
  left: 0;
  right: auto;
}

.startpage .frontmedia {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&1+41,0+61 */
  background: -moz-linear-gradient(45deg, black 0%, black 41%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, black 0%, black 41%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, black 0%, black 41%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#00000000",GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}

.startpage .frontmedia picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: hidden;
  object-position: left;
}

/*.startpage .frontmedia .logo-big {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../images/logo-zweizeilig.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}*/

.startpage .frontmedia .logo-koop {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 3%;
  right: 3%;
  bottom: 7%;
  background-image: url(../images/kooperation.png);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: bottom center;
}


.backmedia {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  overflow: hidden;
}

/* scrollbar */

.ssb_down {
  background-color: #161C15;
  bottom:0;
  cursor:pointer;
  position:absolute;
  right:0;
  border-radius: 1px;
}

.ssb_sb {
  background-color: #161C15;
  cursor:pointer;
  position:absolute;
  right:0;
  border-radius: 10px;
  height: 100%;
}

.ssb_sb_down {
  background-color: 161C15;
}

.ssb_sb_over {
  background-color: #161C15;
}

.ssb_st {
  background-color: transparent;
  cursor:pointer;
  height:100%;
  position:absolute;
  right:0;
  top:0;
  border-radius: 10px;
}

.ssb_up {
  background-color: #161C15;
  cursor:pointer;
  position:absolute;
  right:0;
  top:0;
  border-radius: 1px;
}

/* END - scrollbar */












/* ---- grid for firefox, ausgabe3 = online version der anwendung ---- */


@media only screen and (max-height: 800px) {
  body {
    font-size: 150%;
  }
  .poi-quiz_img_url {
    width: 7vh;
  }

  #poi-quiz-Modal {
    padding: 1.8vh 1.9vh 4.5vh 3.8vh;
    top: 10vh;
    left: 39.8vh;
    overflow: hidden;
    height: 80%;
    max-width: 65%;
    max-height: 75%;
    width: 100%;
    opacity: 1;
  }

  #poi-Main-Modal_nav {    
    /* right: 2.5vw; */
    top: 15%;
  }

  .swiper_.mileySwiper_ {
    height: 65%;
  }

  .swiper-wrapper_ {
    padding-right: 8%;
  }

  .filter-wrap {
      bottom: 12%;
    
  }


}


@media only screen and (min-height: 2000px) {
  body {
    font-size: 370%;
  }
  .poi-quiz_img_url {
    width: 7vh;
  }
  #poi-teaser_img_sig {
    /* display: none; */
    font-size: 0.2em;
    line-height: 1.3;
    margin-top: 7%;
}

  #poi-quiz-Modal {
    padding: 1.8vh 1.9vh 4.5vh 3.8vh;
    top: 10vh;
    left: 39.8vh;
    overflow: hidden;
    height: 80%;
    max-width: 65%;
    max-height: 75%;
    width: 100%;
    opacity: 1;
  }

  #poi-Main-Modal_nav {    
    right: 2.5vw;
    top: 15%;
  }

  .swiper_.mileySwiper_ {
    height: 65%;
  }

  .swiper-wrapper_ {
    padding-right: 8%;
  }

  .filter-wrap {
      bottom: 12%;
    
  }


}

@media only screen and (max-width: 1090px) {
  
  #poi-Main-Modal, #poi-Main-Modal-2, #poi-quiz-Modal {

    padding: 1.8vh 40px 4.5vh 3.8vh;
    list-style: none;
    top: 10.9vh;
    left: 2.8vh;
    overflow: hidden;
    height: 80%;
    max-width: 90%;
    max-height: 90%;
    width: 80%;
    font-size: 90%;
}

#poi-teaser {
  top: 10.9vh;
  left: 3.5vh;
  max-width: 50%;
  min-height: 30%;
  padding: 0.9% 1.1% 2.5% 1.5%;
  width: 45%;
}
#poi-Main-Modal_nav {
  display: none;
  height: 85%;
  /* right: 4.7vw; */
}

.rnav {
  width: 7.5%;
  top: 5%;
}

#poi-teaser {   
    top: 3.9vh;
}

}

@media only screen and (orientation: portrait) and (max-width: 900px) {
  #poi-Main-Modal_nav {
    height: 85%;
    /* right: 4.7vw; */
    display: none;
  }
  #menu {
    font-size: 70% !important;
  }
  
}
@media only screen and (orientation: portrait) and (max-width: 550px) {
  #menu {
    position: absolute;
    left: -40%;
    top: 28.3%;
    /* width: 94.5%; */
    height: 55.4%;
    z-index: 6;
    line-height: 1em;
    font-size: 51% !important;
  }
  #poi-Main-Modal_nav {
    display: none;
    height: 85%;
    /* right: 8.9vw; */
  }
  body {
    font-size: 140%;  
}

.poi-Main-Modal_text_img_wrap {
  display: flex;
  margin-top: 4%;
  gap: 2vw;
  flex-direction: column-reverse;
}
.poi-quiz_img_url {
  width: 5vh;
}
.poi-Main-Modal_steck_text_wrap {
  font-size: .9em;
  font-weight: 700;
  margin-bottom: 15%;
  margin-top: 0%;
  line-height: 1.4em;
  width: 100%;
}
.poi-main-Modal_img_wrap {
  width: 50vw;
  max-width: 90%;
}
#poi-quiz-Modal_nav {
  display: flex;
  margin-top: 1vh;
  justify-content: center;
  flex-direction: row-reverse;
  width: 100%;
  height: 4vh;
}
#poi-quiz-Modal_frage {
  font-size: 73%;
  line-height: 110%;
}
#poi-quiz-Modal_feedback {
  margin-top: 5%;
  font-size: 67%;
  margin-left: 1%;
  line-height: 120%;
}

#poi-Main-Modal, #poi-Main-Modal-2, #poi-quiz-Modal {
  padding: 1.8vh 40px 4.5vh 3.8vh;
  list-style: none;
  top: 1.9vh;
  left: 1vh;
  overflow: hidden;
  height: 95%;
  max-width: 90%;
  max-height: 95%;
  width: 80%;
  font-size: 90%;
  z-index: 5;
}
.rnav {
  width: 11.5%;
  top: 5%;
  gap: 9.5vh;
}


  
}

@media only screen and (max-height: 520px) {
  body {
    font-size: 130%;
  }

  #poi-Main-Modal_nav {    
    /* right: 3.5vw; */
    display: none;
    top: 15%;
  }
 
}


/* BACKEND   */

.line-top {
  border-top: 1px solid rgba(156, 165, 178, 0.3);
}


.miley-POI {
    transform: scale(1);
}

.miley-POI.white {
    background: white;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    animation: pulse-white 3s infinite;
}

@keyframes pulse-white {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.miley-POI.red-poi {
    background: rgba(172, 0, 0, 1);
    box-shadow: 0 0 0 0 rgba(172, 0, 0, 1);
    animation: pulse-red 3s infinite;
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(172, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(172, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(172, 0, 0, 0);
    }
}

.miley-POI.orange-poi {
    background: rgba(255, 121, 63, 1);
    box-shadow: 0 0 0 0 rgba(255, 121, 63, 1);
    animation: pulse-orange 3s infinite;
}

@keyframes pulse-orange {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 121, 63, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 121, 63, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 121, 63, 0);
    }
}

.miley-POI.yellow-poi {
    background: rgba(254, 199, 0, 1);
    box-shadow: 0 0 0 0 rgba(254, 199, 0, 1);;
    animation: pulse-yellow 3s infinite;
}

@keyframes pulse-yellow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(254, 199, 0, 0.7);;
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(254, 199, 0, 0);;
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(254, 199, 0, 0);;
    }
}

.miley-POI.blue-poi {
    background: rgba(52, 172, 224, 1);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
    animation: pulse-blue 3s infinite;
}

@keyframes pulse-blue {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
    }
}

.miley-POI.green-poi {
    background: rgba(51, 217, 178, 1);
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
    animation: pulse-green 3s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
    }
}

.miley-POI.pink-poi {
    background: rgba(142, 68, 173, 1);
    box-shadow: 0 0 0 0 rgba(142, 68, 173, 1);
    animation: pulse-purple 3s infinite;
}

@keyframes pulse-purple {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(142, 68, 173, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(142, 68, 173, 0);
    }
}