:root {
  --max-width: 820px;
  --link-shade: #ca8ab2;
  --link-main: #f9f1f1;
  --link-shade: #ca8ab2;
  --font-size-panel: calc(12px + 0.4vw);
  --main-font-color: red;



}
html {
  scroll-behavior: smooth;
  width: 100%;
}


  /* work-sans Light - latin */
  @font-face {
  font-family: 'Work Sans Light';
  font-style: normal;
  font-weight: 300;
  src: local(''),
  url('fonts/WorkSans-Light.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('fonts/WorkSans-Light.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('fonts/work-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/work-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
font-family: 'Work Sans Medium';
font-style: normal;
font-weight: 500;
src: local(''),
url('fonts/WorkSans-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/WorkSans-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* work-sans-800 - latin */
@font-face {
font-family: 'Work Sans Bold';
font-style: normal;
font-weight: 800;
src: local(''),
url('fonts/work-sans-v18-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/work-sans-v18-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
  font-family: GentiumPlusW;
  src: url('fonts/GentiumPlus-Regular.woff2');
}
/* use Gentium Plus - Italic in .woff2 format */
@font-face {
  font-family: GentiumPlusW;
  font-style: italic;
  src: url('fonts:GentiumPlus-Italic.woff2');
}

   body {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: "Work Sans", sans-serif;
font-size: calc(10px + 1.2vw);
font-weight: 400;
letter-spacing: 0.1vw;
text-align: center;
color: var(--main-font-color);
}


.mySlides {display: none}
img {vertical-align: middle;}


.text {
font-family: "GentiumPlusW", serif;
font-weight: 400;
font-size: clamp(1.3em, 1.2vw, 1.8em);
letter-spacing: 0.01em;
text-align: left;
padding-left: 1.8vw;
padding-right: 1.2vw;
color: var(--main-font-color);
}


/*menu links*/
a.link {
  font-family: "Work Sans Bold", sans-serif;
  font-weight: 800;
line-height: 0.6em;
letter-spacing: 0.04em;
text-decoration: none;
font-size: calc(18px + 9vw);
text-align: right;
text-shadow: -2px -2px #ffffff;

color: black;
}

a.link:hover {
text-decoration: underline;
/*color: #f7f7da;*/
color: var(--link-main);
transition: 0.4s;
text-shadow: 0px 0px;
}

/*links in den Beschreibungen*/
a.lowlink {
font-weight: 600;
text-decoration: none;
font-size: 1em;
text-align: left;
letter-spacing: 0.07em;
color: rosybrown;
}

a.lowlink:hover {
color: var(--link-main);
}

/* nur für link zu ruine u. vague_ip*/
a.exlink {
font-weight: 400;
text-decoration: none;
font-size: calc(12px + 4.0vw);
text-align: left;
letter-spacing: 0.07em;
color: black;
}

a.exlink:hover {
text-decoration: underline;
color: var(--link-main);
transition: 0.4s;
}

/* überschriften arbeiten accordeon*/
.accordion {
background-color: #fff;
hyphens: auto;
color: var(--main-font-color);
cursor: pointer;
padding: 1.8vw;
border: none;
font-family: "Work Sans Bold", sans-serif;
font-weight: 800;
/*line-height: calc(12px + 2.6vw);*/
line-height: 0.7em;
letter-spacing: 0.01em;
text-align: center;
font-size: calc(18px + 4.0vw);
padding-left: 0px;
transition: 0.4s;
}

.accordion:hover {
background-color: #fff;
text-decoration: underline;
color: var(--link-main);
/*text-shadow: 3px 0px var(--link-shade);*/
}

.active {
*background-color: #fff;
text-decoration: underline;
}

/*inhalt accordeon*/
.panel {
padding-left: 10px;
padding-right: 10px;
background-color: #fff;
max-height: 0;
min-width: 400px;
max-width: 820px;
overflow: hidden;
color: var(--main-font-color);
transition: max-height 0.2s ease-out;
font-family: "Work Sans", sans-serif;
font-size: var(--font-size-panel);
font-weight: 400;
letter-spacing: 0.04vw;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

/*Ausstellungstexte*/
.exhibition-text {
font-family: "Work Sans Light", sans-serif;
font-size: var(--font-size-panel);
font-weight: 300;
letter-spacing: 0.04vw;
color: var(--main-font-color);
}

small {
font-family: "Work Sans Light", sans-serif;
font-size: calc(10px + 0.3vw);
font-weight: 300;
letter-spacing: 0.04vw;
color: var(--main-font-color);
}

.slideshow-container {
display: block;
width: 100%;
max-width: 666px;
position: relative;
margin: auto;
text-align: left;
}

.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: 300;
padding: 16px;
margin-top: -22px;
color: #000;
font-weight: bold;
font-size: 34px;
transition: 0.6s ease;
border-radius: 0px 3px 3px 0px;
user-select: none;
}

  /* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
/*background-color:rgba(133,224,221,0.4);*/
color: #fff;
}

/* Caption text */
.caption {
color: #000;
padding: 8px 12px;
position: absolute;
top: 24px;
width: 100%;
text-align: center;

font-family: "Work Sans", sans-serif;
font-size: calc(12px + 1.4vw);
font-weight: 400;
letter-spacing: 0.1vw;
text-align: center;
color: pink;
}

}




/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next {font-size: 11px}
}

#topBtn {
  display: none;
  position: fixed;
  bottom: -3px;
  left: calc(50% - 100px);
  align: center;
  z-index: 99;
  font-family: "Work Sans", sans-serif;
  font-size: calc(12px + 0.4vw);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: center;
  outline: 1px;
  border: none;
  outline: none;
  background: none;
  color: #000;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 15px;
  width:200px;
  transition: 0.3s;
}
#topBtn:hover {
  background: #fff;
  color: #000;
  border: 2px solid #000;
}