body {
      background-color: #EFECE9;
      font-family: "Georgia", serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start; 
      /* vorher center;*/
      height: auto; /* vorher100vh*/
      margin: 0;
      text-align: center;
      padding-top: 9vh; /* war vorher nicht da - experimentierbar */
      }
     .story-image-small {
  width: 90%;
  max-width: 600px;
  display: block;
  margin: 2rem auto;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fdfbf8; /* dein heller Seitenhintergrund */
  text-align: center;
  font-size: 0.5rem;
  color: #8b7c6d; /* dezentes Braun/Beige wie dein Text */
  padding: 0.4rem 0;
  border-top: 1px solid #e0d8d0; /* hauchzarte Linie oben */
  font-family: "calibri", sans-serif;
}

@media (max-width: 400px){
  body {
    font-size: 85%;   /* alles etwas kleiner */
  }
  .scroll-box {
    padding: 0.5rem;  /* engerer Rand */
  }
   .card {
    padding: 0.5rem;  /* engerer Rand */
  }
  img {
    max-width: 100%;  /* Bilder passen sich an */
    height: auto;
  }
}
 
  @media (orientation: landscape) {
      body {
      background-color: #f8f5f2;
      font-family: "Georgia", serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start; 
      /* vorher center;*/
      height: auto; /* vorher100vh*/
      margin: 0;
      text-align: center;
      padding-top: 12vh; /* war vorher nicht da - experimentierbar */
      }
    }
  
      .card {
    background: /*#F2EFEA;*/ url('Startbild.png') no-repeat center center;
  background-size: contain;
  background-attachment: fixed;
  margin-top: 0vh;
  padding: 2rem;
  border-radius: 25px; /* stärker abgerundet */
  box-shadow:
  -3px -3px 5px rgba(0, 0, 0, 0.05),  
  /* sanftes Licht von links oben */
   6px  6px 10px rgba(0, 0, 0, 0.15); 
   /* starker Schatten rechts unten */
  height: 65vh;
  width: 70%;
  margin: 0 auto;
}
     @media (orientation: landscape) {
  .card {
   background: /*#F2EFEA;*/ url('Startbild.png') no-repeat center center;
    background-size: contain;
    background-attachment: fixed;
    margin-top: 0vh;
    padding: 2rem;
    border-radius: 10px;
    box-shadow:
     -3px -3px 5px rgba(0, 0, 0, 0.05),  
  /* sanftes Licht von links oben */
   6px  6px 10px rgba(0, 0, 0, 0.15); 
   /* starker Schatten rechts unten */
    height: auto;
    width: 35%;            /* zarter */
    margin: 10vh auto;  
  }
} 
.story-image-gross {
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 2rem auto;
  align-items: center;
}
   h1 {
      color: #4b3c39;
      font-size: 1.7em;
      margin-bottom: 0.1em;
      margin-top: 1em;
      line-height: 1.2em;
    }
    h2 {
      color: #4b3c39;
      font-size: 2.1em;
      margin-bottom: 0.5em;
      margin-top: 0.5em;
      line-height: 1.2em;
    }
    h5 {
      color: #4b3c39;
      font-size: 2.1em;
      margin-bottom: 0.1em;
      margin-top: 0.2em;
      line-height: 1.2em;
    }
    p {
     
      /*max-width: 400px;*/
      font-size: 0.8em;
      font-family: "Calibri", sans-serif;
      text-align: justify;
      color: #5f4c45;
      line-height: 1.2em;
      /*background-color: #fffaf6;
      padding: 1.5em;
      /*border-radius: 10px;*/
      /*border: 1px solid #dcd2c8;*/
      /*box-shadow: 0 0 8px rgba(100, 80, 70, 0.08);*/
      margin-bottom: 1em;
      margin-top: 2em;
    }
     p3 {
     /*max-width: 400px;*/
      font-size: 0.8em;
      text-align: center;
      color: #5f4c45;
      line-height: 1.2em;
      /*background-color: #fffaf6;
      padding: 1.5em;
      /*border-radius: 10px;*/
      /*border: 1px solid #dcd2c8;*/
      /*box-shadow: 0 0 8px rgba(100, 80, 70, 0.08);*/
      margin-bottom: 0.3em;
      margin-top: 1em;
    } 
     p5 {
     /*max-width: 400px;*/
      font-size: 0.8em;
      text-align: center;
      color: #5f4c45;
      line-height: 1em;
      /*background-color: #fffaf6;
      padding: 1.5em;
      /*border-radius: 10px;*/
      /*border: 1px solid #dcd2c8;*/
      /*box-shadow: 0 0 8px rgba(100, 80, 70, 0.08);*/
      margin-bottom: 4em;
      margin-top: 0.3em;
      top: 0.2em;
    } 
    
      p2 {
     /*max-width: 400px;*/
      font-size: 0.8em;
      text-align: justify;
      color: #5f4c45;
      line-height: 0.3em;
      /*background-color: #fffaf6;
      padding: 1.5em;
      /*border-radius: 10px;*/
      /*border: 1px solid #dcd2c8;*/
      /*box-shadow: 0 0 8px rgba(100, 80, 70, 0.08);*/
      margin-bottom: 1em;
      margin-top: 3.5em;
    } 
    
     p4 {
     /*max-width: 400px;*/
      font-size: 1em;
      text-align: justify;
      color: #5f4c45;
      line-height: 1em;
      /*background-color: #fffaf6;
      padding: 1.5em;
      /*border-radius: 10px;*/
      /*border: 1px solid #dcd2c8;*/
      /*box-shadow: 0 0 8px rgba(100, 80, 70, 0.08);*/
      margin-bottom: 1em;
      margin-top: 2.5em;
    } 
   .weiter {
  letter-spacing: 0.3em; /* erzeugt die weite Wirkung */
  display: inline-block;
  text-transform: lowercase; /* optional */
  text-align: center;     /* oder left/right, je nach Wunsch */
color: #2F5E4E;
  box-shadow: 0 0 8px rgba(100, 80, 70, 0.08);
  padding: 0.5em;
    background-color: rgba(240, 236, 228, 0.65);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* für Safari */
}
  
  /* der Kasten indem sich der p Text befindet */
  .scroll-box {
  position: relative;   
  max-width: 500px;
  max-height: 420px; 
  /* oder eine andere feste Höhe */
  overflow-y: auto;
  padding: 2em;
  border-radius: 10px;
  /*border: 1px solid #dcd2c8;
  /*box-shadow: 0 0 8px rgba(100, 80, 70, 0.08);*/
  color: #5f4c45;
  line-height: 1.5;
  margin-top:-3vh;
  overflow-x: hidden;       /* verhindert horizontales Scrollen */
  word-wrap: break-word;    /* bricht lange Wörter um */
  white-space: normal;      /* verhindert, dass Inhalte in einer Zeile bleiben */
 background-color: rgba(240, 236, 228, 0.65);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* für Safari */
  
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.scroll-box ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.scroll-box li {
  list-style: none;         /* keine Punkte */
  text-align: left;         /* linksbündig */
  padding-left: 0.5em;      /* sanfter Abstand vom Rand */
  margin-bottom: 0.6em;     /* etwas Luft nach unten */
  line-height: 1.5;
}
.ul a,
.ul a:visited,
.ul a:hover,
.ul a:active {
  color: #4b3c39; /* z. B. ein warmer Braunton */
  text-decoration: none;
}

@media (orientation: landscape) {
  /* der Kasten indem sich der p Text befindet */
    .scroll-box {
  max-width: 450px;
  max-height: 450px; 
  /* oder eine andere feste Höhe */
  overflow-y: auto;
  padding: 1em;
  border-radius: 10px;
  /*border: 1px solid #dcd2c8;
  /*box-shadow: 0 0 8px rgba(100, 80, 70, 0.08);*/
  color: #5f4c45;
  line-height: 1.5;
  margin-top:-5vh;
  background-color: rgba(240, 236, 228, 0.65);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* für Safari */
  }
  .scroll-box {
  position: relative;
  /* … dein bestehender Code … */
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.scroll-box ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.scroll-box li {
  list-style: none;         /* keine Punkte */
  text-align: left;         /* linksbündig */
  padding-left: 0.5em;      /* sanfter Abstand vom Rand */
  margin-bottom: 0.6em;     /* etwas Luft nach unten */
  line-height: 1.5;
}
.ul a,
.ul a:visited,
.ul a:hover,
.ul a:active {
  color: #4b3c39; /* z. B. ein warmer Braunton */
  text-decoration: none;
}
}   
    a {
      margin-top: 1em;
      text-decoration: none;
      font-size: 1em;
      color: #2F5E4E;
      /*border-bottom: 1px dotted
      #6a5a50;*/
    }
    a:hover {
      color: #8a7b70;
    }
    
   /* ###################################
                  slider 
#####################################
*/
    .image-slider {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 10px 0;
  -webkit-overflow-scrolling: touch; /* weiches Scrollen auf iOS */
}

.slider-track {
  display: inline-flex;
  gap: 15px; /* Abstand zwischen den Bildern */
}

.image-slider img {
  height: 130px; /* gewünschte Höhe */
  width: auto;
  display: block;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-bottom: 5px;
}

.image-slider img:hover {
  transform: scale(1.05);
}
 /* ###################################
                  Logo 
#####################################
*/

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

  @media (orientation: landscape) {     
  /* Ausrichtung*/
.symbol-logo {
  position: fixed;
  top: 3vh; 
  bottom:5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: auto;
}
/* Größe*/
.logo-img {
  width: 40px; 
  height: auto;
  opacity: 0.5;
  /*1.0 für volle Sichtbarkeit */
}
}

/* ###################################
     Einstellungen zu den Links im Inhaltsverzeichnis quer
######################################*/
  @media (orientation: landscape) {  
.top-links-projekt {
  position: fixed;
  top: 21vh; 
  /* etwas weiter unter dem Logo */
  right: 30vw; 
  /* Abstand vom rechten Rand */
  font-size: 1.1rem;
  font-family: "Georgia", serif;
  color: #C1A37A;
  z-index: 1100;
}
.top-links-projekt a {
  text-decoration: none;
  color: inherit;
  padding: 0 0.9rem;
}
.top-links-projekt a:hover {
  text-decoration: underline;
}
/* hier Einstellung zum language-link */
#projekt-container{
  pointer-events: auto; 
  display: block;
  position: absolute;
  top: 18vh; /* ggf. anpassen */
  right: 20vw;
  background-color: #f8f8f8;
  padding: 2px;
  border-radius: 7px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  z-index: 1100;
}
#projekt-dropdown {
 /*appearance: none; war mal drin
  margin-top: 1%;*/
  font-size: 14px;
  /* 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;
 }
}
/* ###################################
     Einstellungen zu den Links re.
######################################*/ 
.top-links {
  position: fixed;
  top: 11vh; 
  /* etwas weiter unter dem Logo */
  right: 23vw; 
  /* Abstand vom rechten Rand */
  font-size: 1.1rem;
  font-family: "Georgia", serif;
  color: #2F5E4E;
  z-index: 1100;
}

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

.top-links a:hover {
  text-decoration: underline;
}
/* hier Einstellung zum language-link */
#language-container{
  pointer-events: auto; 
  display: block;
  position: absolute;
  top: 14vh; /* ggf. anpassen */
  right: 20vw;
  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: 13px;
  /* 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;
}
/* ###################################
     Einstellungen zu den Links mittig. im Quermodus
######################################*/ 

@media (orientation: landscape) {
.top-links {
  position: fixed;
  top: 25vh; 
  /* etwas weiter unter dem Logo */
  right: 36vw; 
  /* Abstand vom rechten Rand */
  font-size: 1.2rem;
  font-family: "Georgia", serif;
  color: #C1A37A;
  z-index: 1100;
}

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

.top-links a:hover {
  text-decoration: underline;
}
/* hier Einstellung zum language-link */
#language-container{
  pointer-events: auto; 
  display: block;
  position: absolute;
  top: 33vh; /* ggf. anpassen */
  right: 36vw;
  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: 14px;     
  /* 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;
 }
}