/* ===================================
   RAGGLFILM - MAIN STYLESHEET
   =================================== */

/* Foundation: Design Tokens, Reset, Typography, Utilities, Grid */
@import url('foundation.css');

/* Components: Navigation, Footer, Buttons, Cards, Hero, Forms */
@import url('components.css');

/* Pages: Home, DVD, Event, Hochzeit, Sport, Web, Film, Portfolio, Portrait, Preise, Über uns */
@import url('pages.css');


/* ===========================
   LEGACY COMPATIBILITY
   =========================== */

/* Keep existing components working during gradual migration */
/* These will be removed once all pages are migrated */

/* Intro Container (from format.css) */
.intro-container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* Text Container */
.text-container {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}

/* Medien Bereich */
.medien-bereich {
  width: 90%;
  padding-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

/* Section Padding */
section {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

/* Abstand Classes (Spacing) */
.abstand {
  margin-bottom: 8rem;
}

.abstand2 {
  margin-top: 0;
}

@media (max-width: 1900px) {
  .abstand {
    margin-bottom: 8rem;
  }
}

@media (max-width: 1440px) {
  .abstand {
    margin-bottom: 8rem;
  }
}

@media (max-width: 1200px) {
  .intro-container,
  .text-container {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .abstand {
    margin-bottom: 8rem;
  }
}

@media (max-width: 768px) {
  .abstand {
    margin-bottom: 8rem;
  }

  .abstand2 {
    margin-top: 4rem;
  }
}

@media (max-width: 425px) {
  .abstand {
    margin-bottom: 8rem;
  }
}

@media (max-width: 375px) {
  .abstand {
    margin-bottom: 8rem;
  }
}

@media (max-width: 320px) {
  .abstand {
    margin-bottom: 8rem;
  }
}