/* 1. GRUNDSTELLUNG & PAPIER-HINTERGRUND DES GESAMTRAUMS */

html, body {
  margin: 0;
  padding: 0;
  /* Der Raum "hinter" dem Buch (etwas dunkler/ruhiger, damit der Schatten wirkt) */
  background-color: #e6e2d8; 
  font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
  
  /* Angepasste fluide Schriftgröße: min. 14px (Mobil), max. 17px (PC) */
  font-size: clamp(14px, 1.1vw + 10.5px, 17px);
  
  line-height: 1.65;
  color: #1a1a1a;
}

/* 2. DER GESAMT-CONTAINER (ZENTRIERUNG & BREITE) */

.book-container {
  max-width: 820px; /* Breiterer Container für mehr Rand links/rechts */
  margin: 0 auto; 
  padding: 40px 15px; /* Außenabstand oben/unten für den Scroll-Komfort */
  text-align: left;
}

/* 3. DIE EINZELNEN BUCHSEITEN (DER PDF-READER-EFFEKT) */

.book-page {
  /* Das Papier der "Einzelseite" */
  background-color: #f4f1ea; 
  
  /* Der Schatten rundherum (erzeugt den echten Buch-Körper-Effekt) */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  
  /* Großzügiger Buchseiten-Innenrand (Padings), der das Buch "luftig" macht */
  padding: clamp(40px, 8vw, 90px) clamp(30px, 7vw, 80px);
  
  /* Der Abstand zwischen den einzelnen virtuellen Buchseiten beim Scrollen */
  margin-bottom: 50px; 
  
  /* Optional: Leichte abgerundete Ecken für den Touch von Realismus (kann auch auf 0px gelassen werden) */
  border-radius: 2px; 
}

/* Letzte Seite braucht keinen Abstand nach unten mehr */
.book-page:last-child {
  margin-bottom: 0;
}

/* 4. TITEL DES GESAMTWERKS (GANZ OBEN) */

h1 {
  font-size: clamp(1.7rem, 2.5vw + 1rem, 2.1rem);
  font-weight: normal;
  text-align: center;
  margin-bottom: clamp(30px, 6vw, 60px);
  letter-spacing: 0.1em;
  line-height: 1.1;
}

h1 .subtitle {
  display: inline-block;  
  /* Fluid: Startet mobil bei minimal 15px und wächst bis maximal 20px auf dem PC */
  margin-top: clamp(6px, 1.5vw, 20px);        
  font-size: clamp(1rem, 1vw + 0.8rem, 1.1rem);      
  color: #333;           
  letter-spacing: 0.03em;
}

/* 5. KAPITELÜBERSCHRIFTEN (MITTIG) */

h2 {
  font-size: clamp(1.3rem, 1.5vw + 1rem, 1.6rem);
  font-weight: normal;
  text-align: center;
  margin-top: clamp(40px, 8vw, 80px); 
  margin-bottom: clamp(25px, 4vw, 40px); 
  letter-spacing: 0.02em;
}

/* 6. UNTERÜBERSCHRIFTEN (LINKS) */

h3 {
  font-size: clamp(1.1rem, 0.8vw + 0.9rem, 1.2rem);
  font-weight: bold;
  text-align: left;
  margin-top: clamp(25px, 4vw, 40px);
  margin-bottom: clamp(12px, 2vw, 20px);
}

h4 {
  font-size: clamp(1.0rem, 0.6vw + 0.85rem, 1.1rem);
  font-weight: bold;
  text-align: left;
  margin-top: clamp(25px, 4vw, 40px);
  margin-bottom: clamp(12px, 2vw, 20px);
}

h5 {
  font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.0rem);
  font-weight: bold;
  text-align: left;
  margin-top: clamp(25px, 4vw, 40px);
  margin-bottom: clamp(12px, 2vw, 20px);
}

/* 7. TEXTPARAGRAPHEN */

p {
  margin-top: 0;
  margin-bottom: 24px; 
  text-align: left;
  hyphens: auto; 
}

.speziell-h2 {
  margin-top: clamp(30px, 5vw, 50px);
}

.separator {
  text-align: center;
  margin: 10px 0;
  font-size: 1.5rem;
  color: #706e6b;
}

.chapter-nav {
  text-align: center;
  margin-top: clamp(25px, 4vw, 40px);
  font-size: 0.95rem;
}

.chapter-nav a {
  color: #706e6b;         
  text-decoration: none;   
  font-style: italic;       
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}

.chapter-nav a:hover {
  color: #1a1a1a;          
}

/* Wenn eine Überschrift ganz oben auf einer Buchseite steht, 
   wird ihr oberes Margin automatisch reduziert, damit es kompakt bleibt */
.book-page > h1:first-child,
.book-page > h2:first-child {
  margin-top: 0; 
}

/* Erzwungener Stil für das Buch-Zitat */
blockquote.book-quote {
  margin: 30px 0 !important;
  padding: 0 20px !important;
  border-left: 2px solid #888 !important; /* Ein dezenter Buch-Randstrich links */
  font-style: italic !important;
  color: #666 !important;
  background: transparent !important;
}

blockquote.book-quote p {
  font-style: italic !important;
  color: #4a453e !important;
}

blockquote.book-quote footer {
  margin-top: 8px !important;
  font-size: 0.9em !important;
  font-style: normal !important;
  text-align: right !important;
  color: #666 !important;
}