/* ===================================
   RAGGLFILM - MAIN STYLESHEET
   Modern CSS Architecture 2025

   Design: Minimalist & Clean
   Theme: Dark
   Tech: CSS Grid & Flexbox
   =================================== */

/* ===========================
   CORE - Foundation
   =========================== */

/* Design Tokens - MUST BE FIRST */
@import url('core/variables.css');

/* Modern CSS Reset */
@import url('core/reset.css');

/* Typography & Fonts */
@import url('core/typography.css');

/* Utility Classes */
@import url('core/utilities.css');


/* ===========================
   LAYOUT - Structure
   =========================== */

/* Grid System & Container */
@import url('layout/grid.css');


/* ===========================
   COMPONENTS - UI Elements
   ✅ Phase 2 COMPLETED
   =========================== */

/* Navigation */
@import url('components/navigation.css');

/* Footer */
@import url('components/footer.css');

/* Buttons */
@import url('components/buttons.css');

/* Cards (Bildcontainer) */
@import url('components/cards.css');

/* Hero Backgrounds */
@import url('components/hero.css');

/* Forms */
@import url('components/forms.css');


/* ===========================
   PAGES - Page-specific styles
   (To be created in Phase 3)
   =========================== */

/* Home */
/* @import url('pages/home.css'); */

/* Portfolio */
/* @import url('pages/portfolio.css'); */

/* Legal */
/* @import url('pages/legal.css'); */

/* Contact */
/* @import url('pages/contact.css'); */


/* ===========================
   TEMPORARY COMPATIBILITY
   Legacy styles during migration
   =========================== */

/* 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;
  }
}


/* ===========================
   NOTES
   =========================== */

/*
MIGRATION CHECKLIST:
□ Phase 1: Foundation ✓ COMPLETED
  ✓ variables.css - Design Tokens
  ✓ reset.css - Browser normalization
  ✓ typography.css - Fonts
  ✓ utilities.css - Helper classes
  ✓ grid.css - Layout system
  ✓ main.css - Master import

□ Phase 2: Components (NEXT)
  - navigation.css
  - footer.css
  - buttons.css
  - cards.css
  - hero.css
  - forms.css

□ Phase 3: Page Migration
  - index.html
  - portfolio.html
  - web.html
  - film.html
  - preise.html
  - ueberuns.html
  - kontakt.php
  - hochzeit.html
  - event.html
  - sport.html
  - portrait.html
  - impressum.html
  - agb.html
  - daten.html

□ Phase 4: Optimization
  - Remove legacy styles
  - Minify CSS
  - Performance audit
  - Accessibility audit
*/