/* Allgemeine Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #fff; /* Weißer Hintergrund für alle Seiten */
}

/* Seiten-spezifische Klassen */
body.startseite {
  color: #000;  /* Schwarzer Text */
}

body.impressum {
  color: #000;  /* Schwarzer Text */
}

/* Header, Navigation und Footer */
header, footer {
  background-color: #f0f0f0;  /* Helles Grau als Nuance */
  padding: 20px;
  text-align: center;
}

/* Navigation im Footer */
.footer-nav {
  margin-bottom: 10px;
}

.footer-nav a {
  color: inherit;
  text-decoration: none;
  margin: 0 10px;
}

/* Logo-Platzhalter */
.logo-container {
  margin-bottom: 10px;
}

.logo-container img {
  max-width: 150px;  /* Passen Sie die Größe nach Bedarf an */
  height: auto;
}

/* Weitere allgemeine Styles */
main {
  padding: 20px;
}

/* Willkommenstext zentrieren */
.welcome {
  text-align: center;
  margin-bottom: 20px; /* Abstand zum nächsten Element */
  font-size: 1.2em;    /* optional: etwas größere Schrift */
  line-height: 1.5;    /* optional: Zeilenhöhe für bessere Lesbarkeit */
}
/* Buchstyles */

/* Container für die Buchliste */
.book-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  justify-content: center; /* Zentriert die Buchartikel */
}

/* Einzelner Buch-Artikel */
.book {
  background: #fff;
  border: 1px solid #ddd;
  padding: 35px; /* Erhöhter Innenabstand */
  width: 300px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); /* Größerer Schlagschatten */
  text-align: center;
}

/* Befehl für ausblenden * -  dazu in HTML folgendes eingeben: <div class="hidden">Dieser Text wird nicht angezeigt.</div> */
.hidden {
  display: none;
}


/* Bild des Buches */
.book img {
  width: 100%;
  height: auto;
}

/* Buchtitel */
.book h2 {
  font-size: 1.2em;
  margin: 10px 0;
}

/* Buchbeschreibung */
.book p {
  font-size: 0.9em;
  margin: 10px 0;
}

/* Link zu Amazon */
.book a {
  display: inline-block;
  background: #f5ce00;
  color: #000000;
  text-decoration-color: rgba(0, 102, 204, 0.7); /* 70 % Deckkraft */
  padding: 8px 12px;
 text-decoration: underline; /* Unterstreicht den Text */
  text-decoration-skip-ink: auto; /* Standardwert, der das Überspringen von Unterlängen ermöglicht */
  border-radius: 4px;
  font-family: 'Frutiger 57 Condensed', Arial, sans-serif; /* Fallback-Schriftarten */
  font-size: 11.5pt; /* oder 14pt für größere Anwendungen */
}

/* Das details-Element erhält einen oberen Randabstand, um es von den vorherigen Inhalten zu trennen.
Das summary-Element wird als klickbarer Bereich mit fetter Schrift und einem unteren Randabstand gestaltet.
Wenn das details-Element geöffnet ist ([open]), wird der untere Randabstand des summary-Elements vergrößert, um den Abstand zu den angezeigten Details zu erhöhen.*/
details {
  margin-top: 10px;
}

summary {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 5px;
}

details[open] summary {
  margin-bottom: 10px;
}


/* instagram - link */

.instagram-link {
  text-align: center;
  margin-top: 20px;
}

.instagram-link p {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.instagram-link img {
  width: 50px !important;  /* Standardgröße erzwingen */
  height: 50px !important;
  display: inline-block !important;
}




/* BOOK-HEADER - für Titel, Untertitel und Band*/

.book-header {
  text-align: center;
  margin-bottom: 1.5em; /* Abstand zu Beschreibung/Text danach */
}

.book-title,
.book-title-line-2 {
  font-size: 1.4em;
  line-height: 0.95;  /* Enger! */
  margin: 0;
  font-weight: bold;
  text-align: center;
}




.book-subtitle {
  font-size: 1.1em;
  color: #444; /* Etwas dunkler als vorher (#666) */
  font-style: italic; /* Oder: font-weight: 500; */
  margin: 0.2em 0;
  font-weight: bold;
  text-align: center;
}


.book-band {
  font-size: 0.95em;
  font-style: italic;
  margin: 0.2em 0 0.8em;
  color: #888;
}