body { /* seitenspezifische Anpassung von <body> */    
    overflow-y: auto;
    overflow-x: hidden;
	background-color: #FAF3D2; /* damit wird die Farbe des Seiteninhalts definiert */
}

/* Utility: für unsichtbare, aber screenreader-sichtbare Überschriften */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden; white-space: nowrap;
}

/* Grundlayout für den Shop-Bereich */

p.zentriert { text-align: center; }

main.Seitenmitte {
    min-height: calc(100vh - 180px);
    display: flex;
    justify-content: center;
    padding: 140px 0 40px;  /* oben 140 px, links/rechts 0, unten 40 px */
}

#Shop {
  display: grid;
  grid-auto-rows: auto;
  gap: 30px;                 /* Abstand zwischen Artikeln */
  max-width: 70%;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
}

/* Artikel (ein Produkt) */
article.Buecherliste {
  display: grid;
  grid-template-columns: 84px 3fr 2fr 180px;
  grid-template-areas: "bild titel besch preis_btn";
  align-items: center;
  gap: 1em;
  padding: 20px;
  border: 1px solid #1a1a1a;
  border-radius: 12px;
  background-color: #FFF4B0;
  color: #090907;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
article.Buecherliste:hover { background-color: #FCD355; transform: scale(1.01); }

/* Grid-Areas */
.Bildcontainer { grid-area: bild; width: 84px; display: flex; justify-content: center; align-items: center;} /* 84 px entspricht Bildbreite */
.Bildcontainer img { max-width: 100%; height: auto; }

.Buchtitel { grid-area: titel; }
.Buchtitel h2 { line-height: 1.4em; margin: 0 0 8px; font-size: 1.8em; }
.Buchtitel p  { line-height: 1.4em; color: #090907; margin: 0; }

.Infobereich { grid-area: besch; }
.Infobereich h3 { margin: 0 0 8px; } /* line-height und font-size variabel */
.Infobereich p  { line-height: 1.4em; color: #090907; margin: 0; }
.Infobereich p span { white-space: nowrap; }

/* Preis + Button zusammen */
.Preis_Button {
  grid-area: preis_btn;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  font-size: 1.5em;
  color: #090907;
}

.Preis_Button form { border: none; }

/* Button (einheitliche Version) */
.Bestellbutton {
  background-color: #090907;
  color: #FAF3D2;
  border: none;
  border-radius: 10px;
  padding: 0.5em 1em;
  cursor: pointer;
}
.Bestellbutton:hover,
.Bestellbutton:focus-visible { color: #FCD355; outline: none; }

img.Info {cursor: help;}

span.Inforahmen {
    display: inline-block;
    position: fixed;

    top: 20px;
    left: 20%;
    width: 60%;

    z-index: 2000;

    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 200;
    padding: 0.5em;
    text-align: center;

    color: #090907;
    background-color: #FAF3D2;
    border: 5px solid #FCD355;

    /* Animation */
    visibility: hidden;
    opacity: 0;
    transform: translateX(-200px);
    transition: opacity 1s ease, transform 2s ease;
}

/* Sichtbar-Zustand */
span.Inforahmen.sichtbar {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

/* ============================= */
/*       RESPONSIVE DESIGN      */
/* ============================= */

@media (max-width: 400px) { /* Smartphone: Mindestbreite 360px  */
  #Shop { max-width: 96%; padding: 24px 12px; }
  article.Buecherliste {
    grid-template-columns: 1fr;
    grid-template-areas: "bild" "titel" "besch" "preis_btn";
    text-align: center;
    gap: 1rem;
  }
  .Bildcontainer { width: 100%; display: flex; justify-content: center; }
  .Bildcontainer img { max-width: 50px; height: auto; }
  .Buchtitel h2 { font-size: 1.2em; line-height: 1.1; margin: 0 0 .2em; }
  .Buchtitel p  { font-size: 0.9em; line-height: 1.4; }
  .Infobereich h3 { font-size: 1.1em; line-height: 1.3; margin: .4em 0; }
  .Infobereich p  { font-size: 1em; line-height: 1.2; }
  .Bestellbutton { width: 100%; padding: 0.3em 0.8em; font-size: 0.7em; }
  article.Buecherliste:hover { transform: none; }
  span.Inforahmen {font-size: 1rem; line-height: 1.1;  left: 5%; width: 90%;}
}

/* ========== 400–900 px: Smartphone quer / Tablet aufrecht ========== */
@media (min-width: 400px) and (max-width: 900px) { /* Tablet aufrecht */
  #Shop { max-width: 96%; padding: 24px 12px; }
  article.Buecherliste {
    grid-template-columns: 1fr;
    grid-template-areas: "bild" "titel" "besch" "preis_btn";
    text-align: center;
    gap: 1rem;
  }
  .Bildcontainer { width: 100%; display: flex; justify-content: center; }
  .Bildcontainer img { max-width: 50px; height: auto; }
  .Buchtitel h2 { font-size: 1.4em; line-height: 1.2; margin: 0 0 .4em; }
  .Buchtitel p  { font-size: 1em; line-height: 1.4; }
  .Infobereich h3 { font-size: 1.1em; line-height: 1.3; margin: .4em 0; }
  .Infobereich p  { font-size: 1em; line-height: 1.4; }
  .Bestellbutton { width: 100%; padding: 0.5em 1em; font-size: 0.8em; }
  article.Buecherliste:hover { transform: none; }
  span.Inforahmen {font-size: 1.2rem; line-height: 1.2;  left: 5%; width: 90%;}
}

/* --- ≥ 900 px --- */
@media (min-width: 900px) { /* Tablet quer */
  #Shop { max-width: 90%;}
  .Buchtitel h2  { line-height: 1em; margin: 0 0 4px; font-size: 1.2em; }
  .Infobereich h3 { line-height: 0.9em; margin: 0 0 4px; font-size: 0.9em; }
  .Buchtitel p, .Infobereich p { line-height: 1em; font-size: 0.9em;}
  .Bestellbutton { padding: 0.5em 1.1em; font-size: 0.8em; }
  span.Inforahmen {font-size: 1.3rem; line-height: 1.3;  left: 10%; width: 80%;}
}

/* --- ≥ 1200 px --- */
@media (min-width: 1200px) { /* kleiner Bildschirm */
  #Shop { max-width: 96%; }
  .Buchtitel h2  { line-height: 1.2em; margin: 0 0 6px; font-size: 1.5em; }
  .Infobereich h3 { line-height: 1.1em; margin: 0 0 6px; font-size: 1.1em; }
  .Buchtitel p, .Infobereich p { line-height: 1.2em; font-size: 1em; }
  .Bestellbutton { padding: 0.6em 1.3em; font-size: 1em; } /* größerer Button ab 1200px */
  span.Inforahmen {font-size: 1.4rem; line-height: 1.4; left: 15%; width: 70%;}
}

/* --- ≥ 1400 px --- */
@media screen and (min-width: 1400px) { /* breiter Bildschirm */
  #Shop { max-width: 80%;}
  .Buchtitel h2  { line-height: 1.4em; margin: 0 0 8px; font-size: 1.6em; }
  .Infobereich h3 { line-height: 1em; font-size: 1.2em; }
  .Buchtitel p, .Infobereich p { line-height: 1.3em; font-size: 1.1em; }
  span.Inforahmen {font-size: 1.5rem; line-height: 1.5; left: 20%; width: 60%;}
}