/* ==========================================================================
   1. GLOBALE VARIABLEN (Best Practice: Mobile First)
   ========================================================================== */
:root {
  /* Trage hier die exakte Pixel-Höhe deines Sticky-Headers ein (du hattest z.B. mal 55px in der custom-2.css) */
  --header-height: 55px;

  /* Die Sektion füllt jetzt exakt den Rest des Bildschirms, nicht mehr und nicht weniger */
  --height-fullscreen: calc(100dvh - var(--header-height));
  /* Mobile Abstände (Standard) */
  --spacing-section-mobile-y: 2rem; /* ca. 32px oben/unten */
  --spacing-section-mobile-x: 1rem; /* ca. 16px links/rechts */

  /* Tablet Abstände (ab 768px) */
  --spacing-section-tablet-y: 3rem; /* ca. 48px oben/unten */
  --spacing-section-tablet-x: 1.5rem; /* ca. 24px links/rechts */

  /* Desktop Abstände (ab 992px) */
  --spacing-section-desktop-y: 5rem; /* ca. 80px oben/unten */
  --spacing-section-desktop-x: 2rem; /* ca. 32px links/rechts */

  /* Mobile Abstände (Standard) - Mach sie hier gerne kleiner! */
  --spacing-section-mobile-y: 1.5rem; /* Etwas weniger hoch */
  --spacing-section-mobile-x: 0.5rem; /* Deutlich schmalerer Rand für Handys */
}

/* ==========================================================================
   2. UTILITY KLASSEN FÜR ABSTÄNDE (Im Astroid-Backend zuzuweisen)
   ========================================================================== */

/* A. .spacing-standard (Für Partner, Countdown, News, Inhalt etc.) */
.spacing-standard {
  padding: var(--spacing-section-mobile-y) var(--spacing-section-mobile-x) !important;
}

/* B. .spacing-compact (Für Breadcrumbs, Footer, etc.) */
.spacing-compact {
  padding: 1rem 1rem !important;
}

/* C. .spacing-none (Für Leinwand, Panorama, Galerie) */
.spacing-none {
  padding: 0 !important;
  margin: 0 !important;
}

/* D. .spacing-mobile-compact (Normale Desktop-Ränder, aber eng zusammen auf Handy/Tablet) */
.spacing-mobile-compact {
  padding: 1rem 0.5rem !important; /* Sehr eng auf kleinen Geräten */
}

/* E. .spacing-stack-mobile Zweck: Fügt NUR auf Tablet/Handy einen vertikalen Puffer hinzu, 
   damit gestapelte Blöcke (Bild + Text) nicht aneinander kleben.
   Auf dem Desktop bleibt der Wert bei 0, da dort die Flexbox-Row genutzt wird. */
.spacing-stack-mobile {
  padding: 1.5rem 0 !important; /* Dein gewünschter Puffer oben/unten */
}

/* B. Volle Breite (Ausbrechen aus dem Astroid-Container, ohne horizontales Scrollen) */
.w-fullscreen {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Verhindert den horizontalen Scrollbalken auf der Joomla-Ebene, 
   lässt aber vertikales Scrollen auf dem Handy (Body) zu */
#astroid-wrapper {
  overflow-x: hidden;
}

/* ==========================================================================
   3. UTILITY KLASSEN FÜR HÖHEN UND BREITEN
   ========================================================================== */

/* A. Bildschirmfüllende Höhe (Für Slideshow, Leinwand) */
.h-fullscreen {
  height: var(
    --height-fullscreen
  ) !important; /* Erzwingt exakte Höhe statt "mindestens" */
  max-height: var(
    --height-fullscreen
  ) !important; /* Sicherheitsnetz gegen den "Nachwachs-Effekt" beim Scrollen */
  overflow: hidden; /* Verhindert, dass Inhalt die Box sprengt, falls doch mehr Platz gebraucht wird */
}

/* B. Volle Breite (Erzwingt 100% Breite, z.B. für Galerien) */
.w-fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(
    50% - 50vw
  ) !important; /* Bricht aus dem Astroid-Container aus */
}

/* ==========================================================================
   4. MEDIA QUERIES FÜR RESPONSIVE ABSTÄNDE
   ========================================================================== */

/* Tablet (ab 768px) */
@media (min-width: 768px) {
  .spacing-standard {
    padding: var(--spacing-section-tablet-y) var(--spacing-section-tablet-x) !important;
  }
}

/* Desktop (ab 992px) */
@media (min-width: 992px) {
  .spacing-standard {
    padding: var(--spacing-section-desktop-y) var(--spacing-section-desktop-x) !important;
  }

  .spacing-stack-mobile {
    padding: 0 !important; /* Dein gewünschter Puffer oben/unten */
  }
}

/* ==========================================================================
   5. AUSNAHMEN FÜR DIE STARTSEITE (Über Joomla Page Class)
   ========================================================================== */
/* Voraussetzung: Im Joomla Menü der Startseite unter "Seitenanzeige" 
   den Wert " startseite" (mit Leerzeichen davor!) eintragen. */

/* Beispiel: Astroid Header auf der Startseite transparent machen, 
   auf Unterseiten normal (weiß) lassen */
.startseite #astroid-header {
}

/* Beispiel: Sticky Menu auf der Startseite erst später einblenden */
.startseite .ast-sticky-header {
  /* Deine spezifischen Anpassungen hier */
}