/* ==========================================================================
   1. LOKALE ROBOTO SCHRIFTARTEN EINBINDEN (@font-face)
   ========================================================================== */

/* Roboto Regular (Standardtext) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-v51-latin-regular.woff2') format('woff2');
}

/* Roboto Italic (Echtes Kursiv) */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-v51-latin-italic.woff2') format('woff2');
}

/* Roboto Bold (Fett) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-v51-latin-700.woff2') format('woff2');
}

/* Roboto Bold (Fett/Kursiv) */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-v51-latin-700italic.woff2') format('woff2');
}

/* ==========================================================================
   2. SCHRIFTART AUF DIE GRAPHENE- / QUARK2-ELEMENTE ANWENDEN
   ========================================================================== */

/* Globaler Standardtext (Markdown-Absätze, Listen, etc.) */
body, html, p, li, span, a {
  font-family: 'Roboto', sans-serif !important;
}

/* Markdown-Überschriften und fettgedruckter Text */
h1, h2, h3, h4, h5, h6, strong, b {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
}

/* ==========================================================================
   3. PHOTOSWIPE TITEL LINKBÜNDIG AUSRICHTEN
   ========================================================================== */

/* Verhindert, dass der Titel wie ein Galerie-Bild behandelt wird */
.grav-photoswipe-gallery h1,
.grav-photoswipe-gallery h2,
.grav-photoswipe-gallery h3,
.grav-photoswipe-gallery h4,
.grav-photoswipe-gallery p.gallery-desc,
.photoswipe-gallery-title {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  clear: both !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  /* Stellt sicher, dass nachfolgende Bilder in eine neue Zeile brechen */
  flex-basis: 100% !important; 
}

/* ==========================================================================
   4. PHOTOSWIPE TITEL UND BILDER AUSRICHTEN
   ========================================================================== */

/* 1. Die Box des h1-Titels linksbündig ausrichten und Abstände entfernen */
.grav-photoswipe-gallery h1,
#body h1,
.main-content h1 {
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 2. Den umschliessenden Galerie-Container auf die gleiche linke Kante zwingen */
.grav-photoswipe-gallery,
.photoswipe-gallery {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important; /* Richtet Bilder linksbündig aus */
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}

/* 3. Falls der Text innerhalb der h1-Box noch verschoben ist */
h1 {
  text-indent: 0 !important;
}

/* ==========================================================================
   5. SPEZIFISCHES PHOTOSWIPE-TEMPLATE REINIGEN (default.md)
   ========================================================================== */

/* Setzt alle potenziellen Quark-Container-Klassen innerhalb des Templates zurück */
#body-wrapper,
.main-content,
.photoswipe-container,
.grav-photoswipe,
section.section {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Richtet das Markdown-#-H1-Element direkt auf der äussersten linken Kante aus */
#body-wrapper h1,
.main-content h1,
.photoswipe-container h1,
#body h1 {
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  display: block !important;
  width: 100% !important;
}

/* Erzwingt, dass die Bilderreihe bündig mit der H1-Überschrift abschliesst */
.grav-photoswipe-gallery,
.my-gallery {
  margin-left: 0 !important;
  padding-left: 0 !important;
  justify-content: flex-start !important;
}

/* ==========================================================================
   6. BILDERGALERIE AUF EXAKT 4 BILDER PRO REIHE SETZEN
   ========================================================================== */

/* Definiert den Container als Flex-Grid */
.grav-photoswipe-gallery, 
.gallery,
[id^="shortcode-gallery"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important; /* Abstand zwischen den Bildern */
  justify-content: flex-start !important;
}

/* Berechnet die Breite für exakt 4 Bilder unter Abzug des Abstands */
.grav-photoswipe-gallery a,
.gallery a,
.grav-photoswipe-gallery img,
.gallery img {
  width: calc(25% - 12px) !important; 
  max-width: calc(25% - 12px) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

/* Optionale Anpassung für Mobilgeräte (2 Bilder nebeneinander auf Smartphones) */
@media (max-width: 600px) {
  .grav-photoswipe-gallery a,
  .gallery a {
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
}