@font-face {
  font-family: "Hokkien";
  src: url("fonts/Hokkien_MAS_03-Cond.otf") format("opentype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Hokkien";
  src: url("fonts/Hokkien_MAS_03-CondItalic.otf") format("opentype");
  font-style: italic;
  font-weight: normal;
}

@font-face {
  font-family: "CenturySchoolbook";
  src: url("fonts/C059-Roman.otf") format("opentype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "CenturySchoolbook";
  src: url("fonts/C059-Italic.otf") format("opentype");
  font-style: italic;
  font-weight: normal;
}

@font-face {
  font-family: "CenturySchoolbookMono";
  src: url("fonts/Century-Schoolbook-Monospace-BT.otf") format("opentype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "GTAlpina";
  src: url("fonts/GT-Alpina-Fine-Standard-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "GTAlpina";
  src: url("fonts/GT-Alpina-Fine-Standard-Regular-Italic.otf") format("opentype");
  font-style: italic;
  font-weight: normal;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{
  cursor: pointer;
  color: currentColor;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 3px; 
  text-underline-offset: 4px;
}

html { 
  margin: 0;
  padding: 0;
  overflow: hidden;  /*vorher auto */
}

body {
  margin: 1rem;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

#shutdown_screen {
  display: none;
  position: fixed;
  inset: 0;
  background-color: black;
  z-index: 9999;
}

.navigation {
  position: fixed;
  font-family: 'Hokkien';
  font-size: 1.5rem;
  text-decoration: none;
  z-index: 1000; 
}

#navigation_name { 
  top: 1rem; 
  left: 1rem; 
  margin-right: 3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 20002;
  visibility: visible !important;
}
.navigation_top {
  top: 1rem; 
  left: 1rem; 
}

.meta {
  position: fixed;
  font-family: 'Hokkien';
  font-size: 1.5rem;
  top: 1rem; 
  left: 1rem; 
  margin-right: 3rem;
}

.message_hidden_text {
  width: calc(100% - 4rem);
  margin-right: auto;
  margin-left: auto;
  font-family: 'Hokkien';
  line-height: 140%;
  text-transform: none;
  letter-spacing: 0;
  visibility: hidden;
  z-index: 2000;
}

.message_hidden_box {
  position: fixed;             /* Überlagert das ganze Fenster */
  top: 1rem;
  left: 1rem;
  width: calc(100% - 3.5rem);                 /*Volle Breite des Viewports */
  height: 100%;               /* Volle Höhe des Viewports */
  margin-top: auto;
  margin-right: auto;
; /* Vollflächiger weißer Hintergrund */
  visibility: hidden;         /* Anfangszustand: versteckt */
  z-index: 1999;              /* Über der Seite, aber unter .message_hidden_text */
  pointer-events: none; 
  transition: opacity 0.3s ease;
  background-color:white
}

#navigation_name:hover .message_hidden_text {
  visibility: visible;
}

#navigation_name:hover .message_hidden_box {
  visibility: visible;
}

/*#time_left {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
  color: black;
}*/


#navigation_exit { 
  top: 1rem; 
  right: 1rem; 
}

#navigation_exit_1{ 
  top: 1rem; 
  right: 1rem; 
}

#navigation_next {
  bottom: 1rem; 
  right: 1rem;
}

.textpage_chapter {
  font-family: 'CenturySchoolbookMono';
  text-transform: uppercase; 
  letter-spacing: 1px;
  font-size:1rem; 
  margin-bottom: 0.3rem;
  margin-bottom: 1rem
}

.textpage_paragraphe {
  font-family: 'Hokkien';
  font-size: 1.5rem;
  line-height: 140%;
  margin-bottom: 2.3rem;
}

.centered{
  text-align: center;
}

.textpage_field {
  font-family: 'Hokkien';
  font-size: 1.5rem;
  line-height: 140%;
  margin-bottom: 0.3rem;
  cursor: pointer;
}

.textpage_field_open {
  display: none;
  transition: all 0.3s ease;
}

.textpage_field_open.open {
  display: block;
  margin-bottom: 2.3em;
}

.expl {
  padding-left: 1em;
  font-family: 'Hokkien';
  font-size: 1.5rem;
  line-height: 140%;
  /*background-color: rosybrown;*/
}
.nav {
  font-family: 'Hokkien';
  font-size: 1.5rem;
  line-height: 140%;
}

.content {
  width: 100%;
  height: 100%;
  margin-top: 3rem;
  display: block;
  align-items: center;
}

.content_textpage {
  height: 100%;
  width: 60%;
  margin-top: 10rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
  align-items: center;
  z-index: 3000;
  padding:  1em;
  border: solid 2px black;
  color: black;
}

.content_collection {
  width: 100%;
  height: auto;
  display: block;
  align-items: center;
  /*background: orange;*/
}

.responsive_box.image {
  height: calc(100vh - 4rem);
  text-align: center;
  /*background-color: blue;*/
}

.responsive_box.image img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}

.responsive_box.text {
  width: 60%;
  height: 90vh;
  max-height: auto;
  margin-top: 5em;
  margin-left: auto;
  margin-right: auto;
  padding-right: 1rem; /* für scrollen?*/
  display: block;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  /*background-color: blanchedalmond;*/
}

.responsive_box.text h1 {
  margin-top: 1.6rem; 
  margin-bottom: 1.6rem;
  text-align: center;
  font-family: 'CenturySchoolbookMono';
  font-size: 1.5rem;
  line-height: 140%;
  text-transform: uppercase; 
  letter-spacing: 1px;
}

.responsive_box.text p {
  font-family: 'CenturySchoolbook';
  font-size: 1.3rem;
  line-height: 140%;
  margin-bottom: 1.6rem;
}

.responsive_box.text em {
  font-family: 'CenturySchoolbook';
  font-size: 1.3rem;
  line-height: 140%;
  font-variant: italic;
}

.responsive_box.text ul, ol, li{
  font-family: 'CenturySchoolbook';
  font-size: 1.3rem;
  line-height: 140%;
  padding-left: 2rem; /* Einzug für gesamte Liste */
  margin-left: 0;
}

.responsive_box.text hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: none;
  border-top: 3px dotted rgba(0, 0, 0);
  margin-left: auto;
  margin-right: auto;
}

.responsive_box.text a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 3px; 
  text-underline-offset: 4px;
}

.responsive_box.text a.footnote-ref,
.responsive_box.text .footnotes a.footnote-backref {
  text-decoration: none;
  font-weight: 600;
  line-height: 140%;
  font-size: 0.9rem;
  vertical-align: super;
  position: relative;
  top: 0.3em;
}

.filter_bar {
  width: calc(100% - 1rem);
  top: 0;
  padding-top: 1rem;
  margin-right: auto;
  margin-left: auto;
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Hokkien';
  font-size: 1.5rem;
  background-color: white;
}

.filter_bar > a.filter_dropdown {
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 1rem;
  padding-right: 1rem;
  font-family: 'Hokkien';
  font-size: 1.5rem;
  color: inherit;
  cursor: pointer;
  z-index: 1100;
}

.filter_dropdown {
  display: flex;
  flex-direction: column;
}

.filter_select_field {
  border: 0px;
  border-radius: 0px,;
  font-family: 'Hokkien';
  font-size: 1.5rem;
  background-color: white;
}

.gallery_grid {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  padding-top: 2.5rem; /* noch nachrechnen */
  z-index: 90;
  text-decoration: none !important;
}

.gallery_item {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-right: 0.2rem;     /* vorher 0.5rem*/
  margin-bottom: 0.2rem;
  background-size: 100% 100%;
  text-decoration: none !important;
}

.gallery_item .text{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; 
  left: 0;
  object-fit: cover;
}

.gallery_item img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; 
  left: 0;
  object-fit: cover;
  background-color: var(--color_accent);
}

.text_box {
  padding: 0.5rem;
  height: 100%;
  width: 100%;
  word-wrap: break-word;
  white-space: normal;
  position: relative;
  background-color: whitesmoke;
}

.text_box {
  text-decoration: none !important;
  cursor: pointer; /* Wenn du möchtest, dass der Cursor Pointer bleibt */
  color: inherit;  /* Damit die Linkfarbe gleich bleibt */
}

.text_box_text {
  font-family: 'CenturySchoolbook';
  font-size: 1rem;
  line-height: 140%;
}

.hidden {
  display: none !important;
}

img.lazy {
  opacity: 0;
  transition: opacity 0.5s ease;
}

img.lazy.loaded {
  opacity: 1;
}
@media (max-width: 600px) {
  .filter_bar {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    font-size: 1rem;
    padding-bottom: 0.3rem;
    gap: 0.3rem;
  }
  .filter_dropdown {
    font-size: 1rem;
  }
  .filter_select_field {
    font-size: 1rem;
  }
  .gallery_grid{
    padding-top: 7rem;
  }
  .filter_bar > a.filter_dropdown{
    font-size: 1rem;
    right: 1rem;
  }
  .meta{
    font-size: 1rem;
  }
  #navigation_exit_1{ 
    font-size: 1rem;
}
}
@media (max-width: 1000px) {
  .content_textpage {
    height: 100%;
    width: 93vw;
    margin-top: 3rem;
    margin-bottom: 3rem;
    /*margin-right: 3rem;*/
    margin-right: auto;
    margin-left: auto;
  }
  .responsive_box.text {
    width: 100%;
    height: 85vh;
    max-height: auto;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .responsive_box.image img {
    max-width: 100%;
    max-height: auto;
  }
  .message_hidden_box {
    max-width: 100%;
}