/* Basis: Seite zentrieren, max. Breite wie Buchseite */
body {
  display: flex;
  justify-content: center;
  align-items: start;
  min-height: 100vh;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
}

main {
  width: 100%;
  max-width: 500px;  /* Anpassbar je nach Design */
  padding: 1rem;
  box-sizing: border-box;
}

/* Hinweistext für Querformat */
#rotate-hint {
  display: none;
  position: fixed;
  top: 40%;
  width: 100%;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 2rem;
  font-size: 1.2rem;
  z-index: 9999;
}

/* Querformat auf kleinen Geräten blockieren */
@media screen and (orientation: landscape) and (max-height: 500px) {
  #rotate-hint {
    display: block;
  }

  main {
    display: none;
  }
}


./* ########################
 Hintergrundfarbe der Seite
########################### */ 

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  overflow: hidden; 
  /* keine Scrollbalken */
}

/* ###################################
                  Logo 
#####################################
*/

/* Ausrichtung*/
.symbol-logo {
  position: fixed;
  top: 2vh; 
  bottom:0vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: auto;
}
/* Größe*/
.logo-img {
  width: 60px; 
  height: auto;
  opacity: 0.9;
  /*1.0 für volle Sichtbarkeit */
}

/* ###################################
     Einstellungen zu den Links re.
######################################*/ 
.top-links {
  position: fixed;
  top: 22vh; 
  /* etwas weiter unter dem Logo */
  right: 15vw; 
  /* Abstand vom rechten Rand */
  font-size: 0.8rem;
  color: #C1A37A;
  z-index: 1100;
}

.top-links a {
  text-decoration: none;
  color: inherit;
  padding: 0 0.5rem;
}

.top-links a:hover {
  text-decoration: underline;
}

.back-link {
  display: block;
  text-align: center;
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-decoration: none;
  color: #C1A37A;
  font-size: 1.1em;
}

.ul {
  list-style-type: disc;
  padding-left: 0rem;
  font-size: 0.9em;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
  text-decoration: none;
  color: inherit;
}
.ul a,
.ul a:visited,
.ul a:hover,
.ul a:active {
  color: inherit;
  text-decoration: none;
}

.li {
  margin-bottom: 0.7em;
  text-decoration: none;
  color: inherit;
}


 /* hier Einstellung zum language-link */
#language-container{
  pointer-events: auto; 
  display: block;
  position: absolute;
  top: 25vh; /* ggf. anpassen */
  right: 5vw;
  background-color: #f8f8f8;
  padding: 2px;
  border-radius: 7px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  z-index: 1100;
}

#language-dropdown {
 /*appearance: none; war mal drin
  margin-top: 1%;
  font-size: 15px;     
  /* Schriftgröße */
  padding: 10px 12px;    
  /* Innenabstand */
  border-radius: 6px;   
  /* Abgerundete Ecken */
  border: 1.3px solid #ccc;
  background-color: #f8f8f8;
  font-family: "calibri", serif;
  color: #2a3b6d;
}


/* ###################################
               Ebene I:
             blaue Rahmen  
######################################

1. Container für die Seite*/
.seiten-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* macht ihn "durchlässig" für späteren Textcontainer */
  z-index: 0;
/* 1. Ebene Hilfsrahmen 
 /* border: 4px solid royalblue;
  box-sizing: border-box;*/
}

/* 2. #########################
          gestrichelte linie
ist das Bild innerhalb des Containers
=##################################*/
.seitenbild {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Hilfs-Rahmen */
  /*border: 2px dashed #888;*/
}

/* ###################################
                 Ebene II:
                rosa Rahmen 
    beachte verschiedene Seitenarten -        verschiedene Klassen
######################################
Klassen zur STARTSEITE
####################################*/

/* 1. Der Textcontainer */
  
.textcontainer {
  height: 50vh;
  position: relative;
  z-index: 1;
  max-width: 90vw;
  margin: 25vh 7vh auto 6vh;
  /* oben, rechts, unten, links */
  overflow-y: auto;
  
   /*hier Abstände innen einstellen */
  padding-top: 0vh;
  padding-bottom: 0;

/* 2. Sichtbarkeit & Kontrolle */
  background-color: rgba(255, 255, 255, 0); 
 /* transparent, wenn gewünscht */
  
 /* border: 4px solid hotpink;*/ 
/* 3. Hilfsrahmen */
 
  box-sizing: border-box;
  color: #1a1a1a;
  font-family: "calibri", serif;
}

/*4. Optional für Textinhalte */
.textcontainer h1 {
  font-family: "didot", sans-serif;
  font-size: 1.6rem;
  color: #2a3b6d;
  text-align: center;
  margin: 2.8vh;
/* oben, rechts, unten, links */
}
.textcontainerstart h1 {
  font-family: "didot", sans-serif;
  font-size: 1.4rem;
  color: #2a3b6d;
  text-align: center;
  margin: 0vh;
/* oben, rechts, unten, links */
}

.textcontainer p {
  font-size: 0.8rem;
  color: #2a3b6d;
  line-height: 1.5;
} 
.textcontainer-story {
  position:relative;
  margin: auto 2vh auto 2vh;
  text-align: justify;
  font-size: 0.8rem;
  color: #2a3b6d;
  line-height: 1.5; 
  top: 0%;  
  /* Bildabhängig anpassen */
  left: 0%;
  /* Abstand vom linken Rand des Blattes */
  text-justify: inter-word;  /* Verteilt den Leerraum zwischen den Wörtern */
  right: 5%;
  bottom: 18%;
  overflow-y: auto;
  font-family: 'Calibri', serif;
  text-decoration: none;  
}

/*##############################
ES FOLGEN NUN DIE KLASSEN ZU ERSTESEITE
##############################*/

/* 1. Der Textcontainer */
.textcontainer.ersteseite {
  height: 50vh;
  position: relative;
  z-index: 1;
  max-width: 70vw;
  margin: 25vh 7vh auto 6vh;
  /* oben, rechts, unten, links */
  overflow-y: auto;
  
   /*hier Abstände innen einstellen */
  padding-top: 0rem;
  padding-bottom: 0rem;

/* 2. Sichtbarkeit & Kontrolle */
  background-color: rgba(255, 255, 255, 0); 
 /* transparent, wenn gewünscht */
  
 /* border: 4px solid hotpink;*/ 
/* 3. Hilfsrahmen */
 
  box-sizing: border-box;
  color: #1a1a1a;
  font-family: "calibri", serif;
}

.textcontainer.waldzimmerwesen {
  height: 50vh;
  position: relative;
  z-index: 1;
  max-width: 70vw;
  margin: 25vh 7vh auto 6vh;
  /* oben, rechts, unten, links */
  overflow-y: auto;
  
   /*hier Abstände innen einstellen */
  padding-top: 0rem;
  padding-bottom: 0rem;

/* 2. Sichtbarkeit & Kontrolle */
  background-color: rgba(255, 255, 255, 0); 
 /* transparent, wenn gewünscht */
 /* border: 4px solid hotpink;*/ 
/* 3. Hilfsrahmen */
 
  box-sizing: border-box;
  color: #1a1a1a;
  font-family: "calibri", serif;
}


/*4. Optional für Textinhalte */
.textcontainer h1.ersteseite{
  font-family: "didot", sans-serif;
  font-size: 1.4rem;
  color: #2a3b6d;
  text-align: center;
  margin: 0vh;
/* oben, rechts, unten, links */
}

.textcontainer p.ersteseite {
  font-size: 0.8rem;
  color: #2a3b6d;
  line-height: 1.5;
} 
.textcontainer-story ersteseite{
  position:relative;
  margin: auto 2vh auto 2vh;
  text-align: justify;
  font-size: 0.8rem;
  color: #2a3b6d;
  line-height: 1.5; 
  top: 0%;  
  /* Bildabhängig anpassen */
  left: 0%;
  /* Abstand vom linken Rand des Blattes */
  text-justify: inter-word;  /* Verteilt den Leerraum zwischen den Wörtern */
  right: 5%;
  bottom: 18%;
  overflow-y: auto;
  font-family: 'Calibri', serif;
  text-decoration: none;  
}
#phaseText {
  text-align: justify;
  white-space: pre-line; /* damit Zeilenumbrüche aus dem JS beachtet werden */
  margin: auto 2vh auto 2vh;
}
#phaseImage {
  margin-top: 2rem; /* oder z. B. 40px */
}

/*##############################
ES FOLGEN NUN DIE KLASSEN ZUR POSTSEITE
##############################*/

/* 1. Der Textcontainer */

.textcontainer.POST {
  height: 50vh;
  position: fixed;
  z-index: 1;
  width: 70vw;
  margin: 25vh 2vh auto 1vh;
  /* oben, rechts, unten, links */
  overflow-y: auto;
  
   /*hier Abstände innen einstellen */
  padding-top: 1vh;
  padding-bottom: 1vh;

/* 2. Sichtbarkeit & Kontrolle */
  background-color: rgba(255, 255, 255, 0); 
 /* transparent, wenn gewünscht */
  
 /* border: 4px solid hotpink;*/ 
/* 3. Hilfsrahmen */
 
  box-sizing: border-box;
  color: #1a1a1a;
  font-family: "calibri", serif;
}

/*4. Optional für Textinhalte */
.textcontainerpost h1 {
  font-family: "didot", sans-serif;
  font-size: 1.6rem;
  color: #2a3b6d;
  text-align: center;
  margin: 1.8vh;
/* oben, rechts, unten, links */
}

.textcontainer p.POST {
  font-size: 0.8rem;
  color: #2a3b6d;
  line-height: 1.5;
} 
.textcontainer-story.POST{
  position:relative;
  margin: auto 2vh auto 2vh;
  text-align: justify;
  font-size: 0.8rem;
  color: #2a3b6d;
  line-height: 1.5; 
  top: 0%;  
  /* Bildabhängig anpassen */
  left: 0%;
  /* Abstand vom linken Rand des Blattes */
  text-justify: inter-word;  /* Verteilt den Leerraum zwischen den Wörtern */
  right: 5%;
  bottom: 18%;
  overflow-y: auto;
  font-family: 'Calibri', serif;
  text-decoration: none;  
}

/*##############################
ES FOLGEN NUN DIE KLASSEN ZUM INHALTSVERZEICHNIS
##############################*/

/* 1. Der Textcontainer */
.textcontainer.inhalt {
  height: 50vh;
  position: relative;
  z-index: 1;
  max-width: 90vw;
  margin: 25vh 7vh auto 6vh;
  /* oben, rechts, unten, links */
  overflow-y: auto;
  
   /*hier Abstände innen einstellen */
  padding-top: 0vh;
  padding-bottom: 0;

/* 2. Sichtbarkeit & Kontrolle */
  background-color: rgba(255, 255, 255, 0); 
 /* transparent, wenn gewünscht */
  
  border: 4px solid hotpink; 
/* 3. Hilfsrahmen */
 
  box-sizing: border-box;
  color: #1a1a1a;
  font-family: "calibri", serif;
}

/*4. Optional für Textinhalte */
.textcontainer h1.inhalt {
  font-family: "didot", sans-serif;
  font-size: 1.4rem;
  color: #2a3b6d;
  text-align: center;
  margin: 0vh;
/* oben, rechts, unten, links */
}

.textcontainer p.inhalt {
  font-size: 0.8rem;
  color: #2a3b6d;
  line-height: 1.5;
} 
.textcontainer-story.inhalt {
  position:relative;
  margin: auto 2vh auto 2vh;
  text-align: justify;
  font-size: 0.8rem;
  color: #2a3b6d;
  line-height: 1.5; 
  top: 0%;  
  /* Bildabhängig anpassen */
  left: 0%;
  /* Abstand vom linken Rand des Blattes */
  text-justify: inter-word;  /* Verteilt den Leerraum zwischen den Wörtern */
  right: 5%;
  bottom: 18%;
  overflow-y: auto;
  font-family: 'Calibri', serif;
  text-decoration: none;  
}


/*##############################
ES FOLGEN NUN DIE ALLGEMEINEN KLASSEN 
##############################*/

/*5. Das Bild auf der Startseite */
.main-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 100vw;
  height: 100vh;
  pointer-events: none; 
  /* verhindert, dass der Container   
  Klicks blockiert */
}
 /* hier der angerundete Rahmen für das Bild */
.bildrahmen {
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: inline-block;
  padding: 0vh;
  border-radius: 2vmin;
  /* hier die Höhe einstellen */
  margin: 1vh 1vh 4vh 2vh;
  /* oben, rechts, unten, links */
  width: fit-content;
  max-width: 90vw;
  background-color: transparent;
}
/* Bild explizit fürs Startbild */
.startbild {
  display: block;
  max-width: 65vw;
  height: auto;
  border-radius: 1.3vmin;
  margin: auto auto auto auto;
  margin-top: 0vh;  
  /* oder z. B. 60px */
  padding: 0vmin;
}
 /* der anklickbare Link für das Start-Seiten-Bild */
.main-img-link {
  max-width: 60vmin;
  height: auto;
  display: block;
  margin: 0 auto;
  pointer-events: auto; 
  /* erlaubt Klick auf das Bild */
  cursor: pointer;
}

.story-image-mini {
  width: 42%;
  max-width: 300px;
  display: block;
  margin: 4rem auto ;
}

.story-image-small {
  width: 90%;
  max-width: 600px;
  display: block;
  margin: 2rem auto;
}
}