:root {
  --progress-bar: rgba(255, 255, 255, 0.15); /* sichtbarer "Track" */
   --progress-barglow: 0 0 4px rgba(240, 234, 243, 0.4); 
   --progress-fill: linear-gradient(90deg, gold, goldenrod); /* leuchtende Farbe */
   --progress-fillglow: 0 0 8px rgba(255, 215, 0, 0.6);
   --progress-webkitfill: linear-gradient(180deg, #ffd700, #ff69b4);
   --progress-webkithover: linear-gradient(180deg, #ffdd55, #ff99cc);
  --progress-fill2: linear-gradient(90deg, #ffd700, #ff69b4);
  --klick-shadow: 0 0 6px silver;
}

/* für slide Effekt anfang*/
.blaettern {
  animation: slide-left 0.4s ease-in-out;
}

@keyframes slide-left {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
/* für slide Effekt ende, teil 2 im .js*/



body {
  padding: 1rem;
  text-align: center;
}

/* Neue responsive Anpassung */
#buch-wrapper {
  max-width: 800px;
  width: 100%;
  margin: auto;
  padding: 1rem;
  box-sizing: border-box;

}

#buch-start img {
  cursor: pointer;
  max-width: 300px;
  margin: 2rem auto;
  transition: transform 0.3s ease;
  background-color: var(--book-back); 
  border-radius: 12px;
  display: inline-block;
  box-shadow: var(--glow-shadow);
}
#buch-start img:hover {
  transform: scale(1.05);  
}

.buch-einband{
  height: 30rem;
  background-image: var(--buch-einband);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
  padding: 1.5rem;
  
} 

.seite-wrapper {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;

}

.klickzone-links {
  position: relative;
  top: 0;
  left: -1rem;
  width: 2rem;
  height: 100%;
  z-index: 3;
  border-radius: 1rem;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--light-text);
  user-select: none;
  text-shadow: var(--klick-shadow);
}
.klickzone-links:hover {
  background: var(--section-background);
}

#textfeld {
  max-height: 20rem;
  overflow-y: auto;
  cursor: default;/* kein "Klick-Effekt" */
  position: relative;
  z-index: 2;
  padding: 1rem;
  padding-left: 0;
  border-radius: 1rem;
  scrollbar-width: thin;
  scrollbar-color: #ffd700 #1e1e1e;
 /*Daumenfarbe, Hintergrund für Firefoxbrowser */
}
/*Webkit für Chrome, Opera*/
#textfeld::-webkit-scrollbar {
  width: 10px;
}
#textfeld::-webkit-scrollbar-track {
  background: var(--dark-bg);
  border-radius: 6px;
}
#textfeld::-webkit-scrollbar-thumb {
  background: var(--progress-webkitfill);
  border-radius: 6px;
  box-shadow: var(--progress-barglow);
}
#textfeld::-webkit-scrollbar-thumb:hover {
  background: var(--progress-webkithover);
}

#bildfeld {
  position: relative;
  z-index: 1;
  cursor: grab;
  width: 100%;
  height: 100%;
  object-fit: cover;
  align-content: center;/* Bild wird bei Bedarf zugeschnitten */
}

.buch-description {
  font-family: Sylvar, cursive;
  font-weight: 400;
  font-size: 1.4rem;
  max-width: auto;
  margin-bottom: 1rem;
  color: var(--lumatitle);
  animation: none;
}
.seite-links, .seite-rechts {
  max-height: 24rem;
  margin-top: 2rem;
  display: inline-flex;
  /*vertical-align: top;*/
  width: 38%; 
  height: auto;
  box-sizing: border-box;
  background-color: none;
  border-radius: 1rem;
 } 
.seite-links {  
  font-family: var(--buch-font); 
  font-size: var(--font-size);
  vertical-align: top;
  border: 1.2rem solid transparent; 
  border-image: var(--rahmen-img); 
  
}
.seite-rechts {
  border: 0.3rem solid var(--site-color);
  overflow: hidden;  
}

#buch-inhalt {
  transition: transform 0.4s ease-in-out;
}

#progress-container {
  width: 100%;
  height: 0.8rem;
  background-color: var(--progress-bar);
  border-radius: 0.4rem;
  overflow: hidden;
  margin: 1rem;
  position: relative;
  cursor: pointer;
  margin-left: 0;
  box-shadow: var(--progress-barglow);/* optional glow um den Container */ 
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--progress-fill2); /* leuchtende Farbe */
  transition: width 0.3s ease;
  box-shadow: var(--progress-fillglow);; /* sanftes Leuchten */ 
  cursor: pointer;
}

/* Smartphone */ 
@media (max-width: 480px) { 
  
#buch-start img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 3rem auto;
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 12px;
  }
}
/*Kein buch an kleinen Geräten*/
@media (max-width: 799px) { 
.buch-einband{
  display: unset;
  padding: 0;
  height: unset;
  }   
  
.seite-links, .seite-rechts {
    width: 100%;
    font-size: var(--font-responsive);
    line-height: var(--line-responsive);
  max-height: unset;
  margin-top: 0;
  background-color: var(--site-color);
  }  
} 
/* Tablets */
@media (min-width: 481px) and (max-width: 799px) {  
.seite-links, .seite-rechts {
    max-width: 25rem; 
  }
}
/* Desktop */  
@media (min-width: 900px) {  }