/* ===================
   Schriftarten
   =================== */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/Cormorant_Garamond/CormorantGaramond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/Cormorant_Garamond/CormorantGaramond-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ===================
   Grundstruktur
   =================== */
body {
  font-family: 'Carlito', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background-color: #fff8f1;
  color: #2e2a28;
  margin: 0;
  padding: 0;
}


/* ===================
   Überschriften
   =================== */
h1, h2 {
  font-family: 'Carlito', sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}


/* ===================
   Erzähltext
   =================== */
.legende {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 0.5em 0 1.5em 0;
}

.text {
  font-family: 'Carlito', sans-serif;
  font-size: 1.125rem;
  line-height: 1.2;
  margin: 0 auto 2em auto;
}

.text,
.legende {
  padding: 0 1em;
}


/* ===================
   Buchcover
   =================== */

 .bildblock {
  display: block;
  margin: 2em auto 1em auto;
  max-width: 150px; /* oder 120px – je nach gewünschter Größe */
  height: auto;
  text-align: center;
} 


.bildblock img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2); /* etwas kräftigerer Schatten */
}


/* ===================
   Abschlussbild (Logo)
   =================== */
.abschlussbild {
  text-align: center;
  margin: 2em auto;
}

.abschlussbild img {
  display: block;
  margin: 0 auto;
  width: 25vw; /* Dynamische Skalierung */
  max-width: 150px; /* Verhindert zu große Darstellung */
  height: auto;
  opacity: 0.9;
}


/* ===================
   Leseprobe-Layout für große Bildschirme
   =================== */
@media screen and (min-width: 1024px) {
  .leseprobe {
    max-width: 700px;
    margin: 3em auto;
    padding: 3em 2em;
    background-color: #fffdf8; /* leichtes Papierweiß */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); /* zarter Schatten */
    border: 1px solid #e0dccc; /* optionaler Rahmen */
    border-radius: 8px;
  }
}

/* ===================
   Leseprobe-Layout für img's Brauni
   =================== */
.lese-img {
  display: block;
  margin: 1.5em auto;
  max-width: 80%;
  width: 70%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}


/* ===================
   Responsive-Anpassung
   =================== */
@media screen and (max-width: 768px) {
  main {
    padding: 1em;
  }

  .text,
  .legende {
    padding: 0 0em;
  }

  .legende {
    font-size: 1rem;
    line-height: 1.3;
    margin: 0.5em 0 1.5em 0;
  }

  .text {
    font-size: 1.2rem;
    line-height: 1.1;
    margin: 0 auto 2em auto;
  }
}


/* Für kleinere Bildschirme inkl. Mobil 
@media screen and (max-width: 1023px) {
  .abschlussbild img {
    width: 20vw; 
    min-width: 80px;
  }
}
*/