/* Basis-Layout
   ================================================== */

header {
  width: 100%;
  background: #fafbfc;
  border-bottom: 1px solid #e5e5e5;
}

.header-bar {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.header-image-row {
  width: 100%;
  height: 12rem;
  overflow: hidden;
  position: relative;
  background: var(--bg-hover);
  border-bottom: 1px solid #e5e5e5;
}

.header-image-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

main {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

/* Standard: Sections untereinander, volle Breite */
main > section {
  margin-block: 1rem;
}

/* Inhalt in Sections */
section > div,
section > h2,
section > h3 {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Footer
   ================================================== */

footer {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;  /* beide Blöcke zusammen horizontal zentrieren */
  align-items: center;      /* vertikal mittig im Footer */
  gap: 2rem;                /* Abstand zwischen Text und Menü */
  padding: 0.75rem 1rem;
}

/* optional: Textzentrierung innerhalb der Blöcke */
footer > div,
footer > nav {
  text-align: center;
}

/* Footer-Menü-Links etwas Abstand geben */
.footer-menu a {
  margin: 0 0.5rem;
  text-decoration: none;
}

/* Generische Thumbnails (z.B. für die anderen Sections)
   ================================================== */

.thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;      /* Quadrat */
  overflow: hidden;         /* Überstände vom Bild abschneiden */
}

.thumbnail > img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* Bild so zuschneiden, dass das Quadrat gefüllt ist */
  display: block;
}

/* Flip-Karte (z.B. für #buchdruck)
   ================================================== */

/* Grundlayout Section mit Flip */
.flip-section {
  text-align: center;
}

/* Checkbox unsichtbar, aber fokussierbar */
.flip-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Label als Klickfläche, füllt die ganze Spalte */
.flip-label {
  display: block;
  cursor: pointer;
  perspective: 1000px; /* 3D-Effekt */
}

/* Flip-Container füllt die Spaltenbreite und ist quadratisch */
.flip-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;       /* Quadrat */
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  margin: 0 auto 0.5rem;
}

/* Vorder- und Rückseite */
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

/* Vorderseite: Thumbnail füllt die Karte */
.flip-front .thumbnail {
  width: 100%;
  height: 100%;
}

.flip-front .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rückseite: Content füllt die Karte */
.flip-back {
  transform: rotateY(180deg);
  background: #f5f5f5;     /* Hintergrund für Rückseite */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.flip-back .content {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

/* Flip-Effekt: wenn Checkbox angeklickt ist, Karte drehen */
.flip-toggle:checked + .flip-label .flip-card {
  transform: rotateY(180deg);
}

/* Optional: Hover unterstützt den Eindruck, klickbar */
.flip-label:hover .flip-card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Grid-Layout ab 576px
   ================================================== */

@media (min-width: 576px) {
  main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 Spalten */
    gap: 1.5rem;
    align-items: start;
  }

  /* Die Überschrift soll über dem Grid über beide Spalten gehen */
  main > h1 {
    grid-column: 1 / -1;
    padding-top: 2rem;
  }

  /* Sections sind dann die Grid-Items */
  main > section {
    margin: 0; /* Margin aus dem Standard-Layout entfernen */
  }
}