/* ==========================================================================
   0. SCHRIFTARTEN (NUR PLUS JAKARTA SANS)
   ========================================================================== */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   1. FARB-VARIABLEN & GRUNDSTELLUNG
   ========================================================================== */
:root {
    --bg-room: #e6e2d8;          
    --bg-page: #e6e2d8;          
    --text-main: #2C3034;        
    --accent-blue: #1B2A4A;      
    --accent-gray: #7A7570;      
    
    --font-main: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-room); 
  font-family: var(--font-main);   
  /* Ein Tick kompakter/kleiner gemacht */
  font-size: clamp(14px, 1.0vw + 10px, 17px); 
  line-height: 1.7;
  color: var(--text-main);
}


/* ==========================================================================
   2. DER GESAMT-CONTAINER
   ========================================================================== */
.book-container {
  max-width: 820px; 
  margin: 0 auto; 
  padding: 40px 15px; 
  text-align: left;
}


/* ==========================================================================
   3. DIE EINZELNEN BUCHSEITEN
   ========================================================================== */

/*  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08); */

.book-page {
  background-color: var(--bg-page); 
  padding: clamp(40px, 8vw, 90px) clamp(30px, 7vw, 80px);
  margin-bottom: 50px; 
  border-radius: 2px; 
}

.book-page:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   4. ÜBERSCHRIFTEN (JETZT GEWICHTET IN JAKARTA)
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-main);
  color: var(--accent-blue);
  font-weight: 700;
}

h1 {
  font-size: clamp(1.6rem, 2.2vw + 0.9rem, 2.1rem);
  text-align: center;
  margin-bottom: clamp(30px, 6vw, 60px);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

h1 .subtitle {
  display: block;  
  margin-top: clamp(6px, 1.2vw, 12px);         
  font-size: clamp(0.95rem, 0.9vw + 0.75rem, 1.1rem);      
  color: var(--accent-gray);            
  font-weight: 400; /* Subtiler im Regular-Schnitt */
  letter-spacing: 0.01em;
}

h2 {
  font-size: clamp(1.3rem, 1.3vw + 0.9rem, 1.55rem);
  font-weight: 700;
  text-align: center;
  margin-top: clamp(40px, 8vw, 80px); 
  margin-bottom: clamp(25px, 4vw, 40px); 
  letter-spacing: 0.01em;
}

h3 { font-size: clamp(1.1rem, 0.7vw + 0.85rem, 1.25rem); text-align: left; margin-top: 35px; margin-bottom: 15px; font-weight: 700; }
h4 { font-size: clamp(1.0rem, 0.5vw + 0.8rem, 1.1rem); text-align: left; margin-top: 30px; margin-bottom: 12px; font-weight: 700; }
h5 { font-size: clamp(0.9rem, 0.3vw + 0.8rem, 1.0rem); text-align: left; margin-top: 25px; margin-bottom: 10px; font-weight: 700; }


/* ==========================================================================
   5. TEXTPARAGRAPHEN & ELEMENTE
   ========================================================================== */
p {
  margin-top: 0;
  margin-bottom: 22px; 
  text-align: left;
  hyphens: auto; 
  font-weight: 400;
}

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

.separator {
  text-align: center;
  margin: 15px 0;
  font-size: 1.4rem;
  color: var(--accent-gray);
}

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

.chapter-nav a {
  color: var(--accent-gray);         
  text-decoration: none;   
  font-style: normal;        
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.chapter-nav a:hover {
  color: var(--text-main);          
}

.book-page > h1:first-child,
.book-page > h2:first-child {
  margin-top: 0; 
}

/* Buch-Zitat */
blockquote.book-quote {
  margin: 30px 0 !important;
  padding: 0 20px !important;
  border-left: 2px solid var(--accent-gray) !important; 
  font-style: normal !important;
  color: var(--accent-gray) !important;
  background: transparent !important;
}

blockquote.book-quote p {
  font-style: normal !important;
  font-weight: 500; /* Ein Hauch kräftiger für Zitate */
  color: var(--text-main) !important;
}

blockquote.book-quote footer {
  margin-top: 8px !important;
  font-size: 0.85rem !important;
  font-style: normal !important;
  text-align: right !important;
  color: var(--accent-gray) !important;
}




/* ==========================================================================
   6. WISSENSCHAFTLICHE MARGINALIEN / RANDNOTIZEN
   ========================================================================== */
.text-with-margin {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 950px) {
    .text-with-margin {
        grid-template-columns: 1fr 220px;
        align-items: start;
    }
}

.marginalia {
    font-family: var(--font-main);
    font-size: 0.8rem; /* Schön dezent am Rand */
    color: var(--accent-gray);
    line-height: 1.5;
    border-left: 1px solid var(--accent-gray);
    padding-left: 12px;
    margin-bottom: 20px;
}