style.css

#overlay {
  display: none; /* Standardmäßig ausgeblendet */
  position: fixed; /* Fixiert, damit es immer den Bildschirm abdeckt */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Halbtransparentes Schwarz */
  z-index: 99; /* Unter der login-container, aber über anderen Elementen */
}

:root {
  --background-color: #f3e1a9; /* sanftes Beige */
  --background-color-section: #f5f5dc; /* sanftes Beige */
  --accent-color: #f9e79f; /* weiches Gelb */
  --text-color: #5c4033; /* dunkelbrauner Text */
  --button-bg-color: #f9e79f; /* gelber Button-Hintergrund */
  --button-hover-color: #f7d794; /* intensiveres Gelb beim Hover */
  --border-color: #d2b48c; /* helles Braun für Rahmen */

  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Für sanftes Scrollen */
  scroll-padding-top: 150px; /* Abstand von oben, z.B. 100px */
}

/* Allgemeines Layout */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
}

/* Überschriften */
h1,
h2,
h3 {
  color: var(--text-color);
  font-family: "Playfair Display", serif;

  word-wrap: break-word; /* für ältere Browser */
  overflow-wrap: break-word; /* moderne Browser */
  white-space: normal; /* Zeilenumbruch erlauben */
}

/* input */
input {
  font-size: 16px;
  padding: 8px;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid var(--border-color);
}

/* textarea */
textarea {
  width: 100%;
  height: 100px;
  font-size: 16px;
  padding: 8px;
  border: 2px solid var(--border-color);
  border-radius: 5px;
  box-sizing: border-box;
  resize: vertical;
}

textarea:focus {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Links */
a {
  color: var(--text-color);
  text-decoration: none;
}

a:hover {
  background-color: var(--button-hover-color);
}

/* Buttons */
button {
  background-color: var(--button-bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: var(--button-hover-color);
}

#deleteButton {
  padding: 10px 20px; /* Innenabstand */
  border: none; /* Rahmen entfernen */
  border-radius: 5px; /* Abgerundete Ecken */
  background-color: #ff5733; /* Hintergrundfarbe (rot-orange) */
  color: white; /* Schriftfarbe */
  font-size: 16px; /* Schriftgröße */
  cursor: pointer; /* Zeigt, dass der Button klickbar ist */
  transition: background-color 0.3s; /* Übergangseffekt für den Hintergrund */
}

#deleteButton:hover {
  background-color: #c70039; /* Dunklerer Farbton beim Hover */
}

#apiAddBookBtn,
#submitBtn {
  background-color: var(--button-bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}

#menu-button {
  font-size: large;
  right: 20px;
  padding: 10px 20px;
  background-color: var(--background-color-section);
  color: var(--text-color);
  border: none;
  cursor: pointer;
  z-index: 1000;
}

/* Seitenmenü - unsichtbar, bevor es geöffnet wird */
#side-menu {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;
  width: 300px;
  background-color: var(--background-color);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
  z-index: 999;
}

#side-menu ul {
  list-style: none;
  padding: 20px;
  margin: 0;
}

#side-menu ul li {
  margin: 20px 0;
}

#side-menu ul li a {
  text-decoration: none;
  font-size: 18px;
  color: var(--text-color);
  display: block;
}

#side-menu a:hover {
  background-color: transparent;
}

/* Link unten im Menü */
#bottom-link {
  padding: 20px;
  text-align: center;
}

/* Menü geöffnet */
#side-menu.open {
  right: 0;
}

/* Section */
section {
  margin: 20px 20px 0px;
  padding: 20px;
  background-color: var(--background-color-section);
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Verhindert ungewolltes Überlaufen */
  /* overflow-x: auto; */
}

/* Container */

.head-section {
  margin-top: 0;
  position: sticky;
  top: 0px;
  z-index: 99;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.head-section h1 {
  margin: 7px 0;
}

.head-container {
  display: flex;
  justify-content: space-between; /* Verteilt den Inhalt mit Abstand */
  align-items: center; /* Vertikale Ausrichtung der Elemente */
}

.login-container {
  margin: 0;
  display: none;
  flex-direction: column; /* Elemente untereinander anordnen */
  align-items: center; /* Elemente zentrieren */
  z-index: 1000;
  position: fixed;
  left: 50%;
  top: 50%;
  overflow: auto;
  transform: translate(-50%, -50%);
  min-width: 300px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.login-container label,
.login-container input,
.login-container button {
  display: block; /* Block-Elemente für jedes Item */
  margin: 10px 0; /* Abstand zwischen den Elementen */
  width: 100%; /* Breite anpassen */
  box-sizing: border-box; /* Padding in die Breite einbeziehen */
}

.login-container a {
  text-decoration: underline;
}

#searchForm {
  display: flex;
  flex-direction: column; /* Elemente untereinander anordnen */
  align-items: center; /* Elemente zentrieren */
  margin: 20px 0; /* Abstand oben und unten */
}

#searchForm input {
  width: 100%; /* Input-Feld auf volle Breite */
  max-width: 600px; /* Maximale Breite */
  margin-bottom: 10px; /* Abstand unter dem Input-Feld */
  box-sizing: border-box; /* Padding in die Breite einbeziehen */
}

#searchForm .button-container {
  display: flex; /* Flexbox für die Button- und Select-Elemente aktivieren */
  justify-content: center; /* Elemente horizontal zentrieren */
  width: 100%; /* Volle Breite der Container */
}

#searchForm select,
#searchForm button {
  width: 100%;
  max-width: 200px;
  margin: 0 5px; /* Abstand zwischen den Elementen */
  box-sizing: border-box; /* Padding in die Breite einbeziehen */
}

/* add Book Container */
.addBuch-container {
  margin: 20px;
}

.edit-book .button-container {
  display: flex;
  justify-content: flex-end; /* Button nach rechts ausrichten */
  margin-top: 20px; /* Optional: Abstand oben */
}

.input-container {
  display: block; /* Standardmäßig untereinander anzeigen */
  margin-bottom: 15px;
}

.input-container label {
  display: block; /* Label über dem Eingabefeld anzeigen */
  margin-bottom: 5px;
  width: 100%; /* Volle Breite auf mobilen Geräten */
  text-align: left; /* Linksbündig für mobile Geräte */
}

.input-container input,
.input-container textarea {
  width: 100%; /* Input-Felder nehmen die volle Breite ein */
  box-sizing: border-box; /* Padding in die Breite einbeziehen */
}

.season-volume-container {
  display: block;
}

@media (min-width: 700px) {
  .input-container {
    display: flex; /* Flexbox aktivieren für größere Bildschirme */
    align-items: center; /* Vertikale Ausrichtung */
  }

  .input-container label {
    width: 130px; /* Feste Breite für Labels auf größeren Bildschirmen */
    margin-right: 15px;
    margin-bottom: 0;
    text-align: right;
  }

  .input-container input,
  .input-container textarea {
    flex: 1; /* Input-Felder füllen den verfügbaren Platz */
  }

  .season-volume-container {
    display: flex;
    gap: 15px; /* Optional: Abstand zwischen den beiden Items */
  }

  .season-volume-container .input-container {
    flex: 1; /* Beide Input-Container nehmen gleichmäßig Platz ein */
  }
}

.checkbox-container {
  display: grid;
  gap: 10px; /* Abstand zwischen den Checkbox-Elementen */
  grid-template-columns: repeat(
    auto-fill,
    minmax(150px, 1fr)
  ); /* Flexible Spalten */
  margin: 10px 0;
}

.checkbox-item {
  display: flex;
  align-items: center; /* Checkbox und Label nebeneinander */
}

.checkbox-item input {
  width: 20px;
  height: 20px;
  transform: scale(1.5); /* Größe der Checkbox anpassen */
  margin-right: 5px;
}

#apiAddBookBtn {
  margin-bottom: 5px; /* Abstand zwischen den Buttons */
}

/* Show content containder */
#book-details .blurb {
  max-width: 600px; /* Maximale Breite des Textes */
  margin: 0 auto; /* Zentriert den Text */
  text-align: center; /* Zentriert den Text */
  display: block; /* Stellt sicher, dass der Text blockweise angezeigt wird */
}

.title-container {
  display: flex;
  align-items: center; /* Vertikale Ausrichtung */
  flex-wrap: wrap;
}

.title-container h1 {
  margin-right: 10px; /* Abstand zwischen Titel und Subtitle */
}

.title-container h2 {
  margin: 0; /* Keine Margen für Subtitle */
  font-size: 1.5em; /* Schriftgröße für Subtitle */
  color: gray; /* Graue Farbe für Subtitle */
}

.book-details-container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 0; /* Abstand zwischen den Sektionen */
}

.book-pic-container {
  flex: 1; /* Erlaubt dem Bildcontainer zu wachsen */
  min-width: 300px; /* Maximale Breite für das Bildcontainer */
}

.book-details-container img {
  display: block;
  margin: 0 auto;
  width: 100%; /* Setzt die Breite des Bildes auf 100% des Containers */
  height: auto;
  border-radius: 10px;
}

#readStatusForm {
  display: flex; /* Aktiviert Flexbox für das Formular */
  justify-content: flex-end; /* Elemente nach rechts ausrichten */
  align-items: center; /* Vertikal zentrieren */
  margin-left: auto; /* Schiebt das Formular nach rechts */
  margin-bottom: -20px;
}

#readStatusForm label {
  display: flex; /* Flexbox aktivieren für das Label */
  align-items: center; /* Vertikal zentrieren */
}

#readStatusForm input {
  width: 20px;
  height: 20px;
  transform: scale(1.5); /* Größe der Checkbox anpassen */
  margin-left: 10px; /* Abstand zwischen Label und Checkbox */
}

/* commentsContainer */
#commentsContainer {
  margin-top: 20px;
}

.comments-list {
  list-style-type: none; /* Keine Aufzählungszeichen */
  padding: 0; /* Kein Padding für die Liste */
}

.comments-list li {
  margin: 10px 0; /* Abstand zwischen den Kommentaren */
  padding: 8px; /* Innenabstand für die Kommentare */
  background-color: var(--background-color); /* Weißer Hintergrund für jeden Kommentar */
  border-radius: 5px; /* Abgerundete Ecken */
  transition: background-color 0.3s; /* Weiche Übergänge */
}

.comments-list li:hover {
  background-color: var(--button-hover-color); /* Helle Hintergrundfarbe beim Hover */
}

.comments-list li .comment-author {
  font-weight: bold; /* Fetter Text für den Autor */
  color: var(--text-color); /* Dunkelgraue Farbe */
}

.comments-list li .comment-date {
  font-size: 0.9em; /* Kleinere Schriftgröße für das Datum */
  color: #888; /* Hellgraue Farbe */
  margin-top: 5px; /* Abstand über dem Datum */
}

.dash-additionaldata {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* select */
select {
  padding: 10px 15px; /* Padding an den Button anpassen */
  border: 1px solid var(--border-color); /* Gleicher Rahmen wie beim Button */
  border-radius: 5px; /* Gleiche abgerundete Ecken */
  background-color: var(--button-bg-color); /* Hintergrundfarbe anpassen */
  color: var(--text-color); /* Schriftfarbe anpassen */
  box-sizing: border-box; /* Padding in die Breite einbeziehen */
}

/* Datenbank */
.db-table {
  overflow-x: auto;
}
/* Tabellendesign */
table {
  width: 100%;
  border-collapse: collapse; /* Verhindert doppelte Ränder */
  margin: 20px 0; /* Abstand nach oben und unten */
  table-layout: auto;
}

th,
td {
  padding: 12px; /* Innenabstand für Zellen */
  text-align: left; /* Text linksbündig */
  border: 1px solid var(--border-color); /* Rahmen für Zellen */
}

th {
  max-width: 250px; /* Setze die maximale Breite für die Kopfzeilen */
  overflow: hidden; /* Verhindert Überlauf */
  text-overflow: ellipsis; /* Fügt '...' hinzu, wenn der Text abgeschnitten wird */
  white-space: nowrap; /* Verhindert Zeilenumbruch */
  word-wrap: break-word; /* Aktiviert das Umbrechen von langen Wörtern */
  text-align: center;
}

tr:nth-child(even) {
  background-color: rgba(
    249,
    231,
    159,
    0.5
  ); /* Abwechselndes leichtes Gelb für gerade Zeilen */
}

tr:hover {
  background-color: var(--button-hover-color); /* Hover-Effekt für Zeilen */
  color: var(--text-color); /* Textfarbe beim Hover */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #2c2c2c; /* dunkles Grau */
    --background-color-section: #3d3d3d;
    --accent-color: #ffd700; /* kräftiges Goldgelb für Akzente */
    --text-color: #e0e0e0; /* hellgrauer Text */
    --button-bg-color: #444444; /* dunkelgrauer Button-Hintergrund */
    --button-hover-color: #666666; /* etwas helleres Grau beim Hover */
    --border-color: #888888; /* hellgrauer Rahmen */
  }

  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }

  #apiAddBookBtn,
  #submitBtn {
    background-color: var(--button-bg-color);
    color: var(--accent-color);
    border: 1px solid var(--border-color);
  }

  button {
    background-color: var(--button-bg-color);
    color: var(--accent-color);
    border: 1px solid var(--border-color);
  }

  button:hover {
    background-color: var(--button-hover-color);
  }

  a {
    color: var(--accent-color);
  }

  hr {
    border-top: 1px solid var(--border-color);
  }

  input {
    border-color: var(--border-color);
  }

  table {
    border: 1px solid var(--border-color); /* Dunkler Rahmen für die Tabelle */
  }

  th {
    background-color: #444444; /* Dunkler Hintergrund für Kopfzeilen im Darkmode */
    color: var(--accent-color); /* Helle Akzentfarbe für Kopfzeilen */
  }

  tr:nth-child(even) {
    background-color: rgba(
      255,
      215,
      0,
      0.1
    ); /* Abwechselndes leichtes Gold für gerade Zeilen im Darkmode */
  }

  tr:hover {
    background-color: var(--button-hover-color); /* Hover-Effekt für Zeilen */
    color: var(--text-color); /* Textfarbe beim Hover */
  }

  select {
    border: 1px solid var(--border-color); /* Gleicher Rahmen wie beim Button */
    background-color: var(--button-bg-color); /* Hintergrundfarbe anpassen */
    color: var(--accent-color); /* Schriftfarbe anpassen */
  }
}