/**
 * Layout CSS - Flexbox & CSS Grid Layouts
 *
 * Dieses File definiert:
 * - Container & Wrapper Systeme
 * - Grid-Layouts (CSS Grid)
 * - Flexbox Utilities
 * - Responsive Spacing
 * - Section-Layouts
 */

/* ============================================
   CONTAINER SYSTEM
   ============================================ */

/**
 * Haupt-Container
 * Zentriert Inhalt und begrenzt maximale Breite
 * Verwendet Design-Tokens aus theme.json
 */
.container {
  width: 100%;
  max-width: var(--slv-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--slv-space-s);
  padding-right: var(--slv-space-s);
}

/**
 * Wide Container
 * F�r breitere Layouts (z.B. Hero-Bereiche)
 */
.container-wide {
  width: 100%;
  max-width: var(--slv-wide-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--slv-space-s);
  padding-right: var(--slv-space-s);
}

/**
 * Full Width Container
 * Kein max-width, nur Padding
 */
.container-full {
  width: 100%;
  padding-left: var(--slv-space-s);
  padding-right: var(--slv-space-s);
}

/**
 * Responsive Container Padding
 * Vergr��ert Padding auf gr��eren Bildschirmen
 */
@media (min-width: 768px) {
  .container,
  .container-wide,
  .container-full {
    padding-left: var(--slv-space-m);
    padding-right: var(--slv-space-m);
  }
}

/* ============================================
   SECTION LAYOUTS
   ============================================ */

/**
 * Standard Section
 * Vertikal Spacing f�r Content-Bereiche
 */
.section {
  padding-top: var(--slv-space-m);
  padding-bottom: var(--slv-space-m);
}

/**
 * Section Varianten - Gr��eres Spacing
 */
.section--large {
  padding-top: var(--slv-space-l);
  padding-bottom: var(--slv-space-l);
}

.section--xl {
  padding-top: var(--slv-space-xl);
  padding-bottom: var(--slv-space-xl);
}

/**
 * Section mit Hintergrundfarben
 */
.section--bg-light {
  background-color: var(--slv-bg-light);
}

.section--bg-white {
  background-color: var(--slv-bg-white);
}

.section--bg-blue {
  background-color: var(--slv-primary-blue);
  color: var(--slv-bg-white);
}

.section--bg-yellow {
  background-color: var(--slv-primary-yellow);
}

/**
 * Responsive Section Padding
 * Vergr��ert Padding auf Tablet und Desktop
 */
@media (min-width: 768px) {
  .section {
    padding-top: var(--slv-space-l);
    padding-bottom: var(--slv-space-l);
  }

  .section--large {
    padding-top: var(--slv-space-xl);
    padding-bottom: var(--slv-space-xl);
  }
}

/* ============================================
   CSS GRID SYSTEM
   ============================================ */

/**
 * Basis Grid Container
 * 12-Spalten Grid mit Gap
 */
.grid {
  display: grid;
  gap: var(--slv-space-m);
}

/**
 * Grid mit kleinerem Gap
 */
.grid--gap-s {
  gap: var(--slv-space-s);
}

.grid--gap-l {
  gap: var(--slv-space-l);
}

/**
 * Responsive Grid - 2 Spalten
 * Mobile: 1 Spalte, Tablet+: 2 Spalten
 */
.grid--2-cols {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/**
 * Responsive Grid - 3 Spalten
 * Mobile: 1 Spalte, Tablet: 2 Spalten, Desktop: 3 Spalten
 */
.grid--3-cols {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--3-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--3-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/**
 * Responsive Grid - 4 Spalten
 * Mobile: 1 Spalte, Tablet: 2 Spalten, Desktop: 4 Spalten
 */
.grid--4-cols {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--4-cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

/**
 * Auto-Fit Grid
 * Spalten passen sich automatisch an verf�gbaren Platz an
 */
.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/**
 * Sidebar Layout (Content + Sidebar)
 * Mobile: gestapelt, Desktop: 2/3 Content + 1/3 Sidebar
 */
.grid--sidebar {
  grid-template-columns: 1fr;
  gap: var(--slv-space-m);
}

@media (min-width: 1024px) {
  .grid--sidebar {
    grid-template-columns: 2fr 1fr;
  }
}

/**
 * Feature Grid (gro�es Element + kleine Elemente)
 * Asymmetrisches Grid f�r Hero/Feature Sections
 */
.grid--feature {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .grid--feature {
    grid-template-columns: 1.5fr 1fr;
  }
}

/* ============================================
   FLEXBOX UTILITIES
   ============================================ */

/**
 * Flex Container - Horizontal
 */
.flex {
  display: flex;
  gap: var(--slv-space-s);
}

/**
 * Flex - Vertical (Column)
 */
.flex--col {
  flex-direction: column;
}

/**
 * Flex Gap Varianten
 */
.flex--gap-xs {
  gap: var(--slv-space-xs);
}

.flex--gap-m {
  gap: var(--slv-space-m);
}

.flex--gap-l {
  gap: var(--slv-space-l);
}

/**
 * Flex Alignment - Horizontal
 */
.flex--center {
  justify-content: center;
}

.flex--between {
  justify-content: space-between;
}

.flex--around {
  justify-content: space-around;
}

.flex--end {
  justify-content: flex-end;
}

/**
 * Flex Alignment - Vertical
 */
.flex--items-center {
  align-items: center;
}

.flex--items-start {
  align-items: flex-start;
}

.flex--items-end {
  align-items: flex-end;
}

.flex--items-stretch {
  align-items: stretch;
}

/**
 * Flex Wrap
 */
.flex--wrap {
  flex-wrap: wrap;
}

/**
 * Responsive Flex
 * Stapelt Elemente auf Mobile
 */
.flex--responsive {
  flex-direction: column;
}

@media (min-width: 768px) {
  .flex--responsive {
    flex-direction: row;
  }
}

/**
 * Flex Item - Grow
 */
.flex-grow {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* ============================================
   WORDPRESS ALIGNMENT CLASSES
   ============================================ */

/**
 * WordPress Block Alignments
 * Integration mit Gutenberg Editor
 */
.alignwide {
  max-width: var(--slv-wide-width);
  margin-left: auto;
  margin-right: auto;
}

/**
 * Full-Width Alignment
 * Funktioniert nur wenn KEIN Parent-Container die Breite begrenzt
 * Nutzt 100vw für echte Vollbreite über den gesamten Viewport
 */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
}

/**
 * Cover Block - Full Width ohne oberen Abstand
 * Entfernt Margin wenn Cover-Block als erstes Element nach Header kommt
 */
.front-page > .wp-block-cover:first-child,
.front-page > .alignfull:first-child {
  margin-top: 0 !important;
}

.alignleft {
  float: left;
  margin-right: var(--slv-space-m);
  margin-bottom: var(--slv-space-s);
}

.alignright {
  float: right;
  margin-left: var(--slv-space-m);
  margin-bottom: var(--slv-space-s);
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/**
 * Clear Floats nach WordPress Alignment
 */
.alignleft::after,
.alignright::after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */

/**
 * Margin Utilities
 * Verwendet Design-Token Spacing
 */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--slv-space-xs); }
.mt-s { margin-top: var(--slv-space-s); }
.mt-m { margin-top: var(--slv-space-m); }
.mt-l { margin-top: var(--slv-space-l); }
.mt-xl { margin-top: var(--slv-space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--slv-space-xs); }
.mb-s { margin-bottom: var(--slv-space-s); }
.mb-m { margin-bottom: var(--slv-space-m); }
.mb-l { margin-bottom: var(--slv-space-l); }
.mb-xl { margin-bottom: var(--slv-space-xl); }

/**
 * Padding Utilities
 */
.p-0 { padding: 0; }
.p-xs { padding: var(--slv-space-xs); }
.p-s { padding: var(--slv-space-s); }
.p-m { padding: var(--slv-space-m); }
.p-l { padding: var(--slv-space-l); }
.p-xl { padding: var(--slv-space-xl); }

/* ============================================
   RESPONSIVE VISIBILITY
   ============================================ */

/**
 * Zeige/Verstecke Elemente basierend auf Bildschirmgr��e
 */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

.hide-tablet {
  display: block;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet {
    display: none;
  }
}

.hide-desktop {
  display: block;
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: none;
  }
}

/**
 * Nur auf Mobile sichtbar
 */
.show-mobile-only {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile-only {
    display: none;
  }
}

/* ============================================
   SEMANTIC SECTIONS (Sprint 2, Task 2.1)
   ============================================ */

/**
 * Basis-Styling für Semantic Sections
 * Funktioniert mit neuen Gutenberg Patterns
 *
 * Diese Sections verbessern:
 * - SEO (semantische HTML-Elemente)
 * - Accessibility (ARIA-Labels, Landmarks)
 * - Screenreader-Navigation
 */

.semantic-section {
  position: relative;
  width: 100%;
}

/* Hero Section */
.hero-section.semantic-section {
  margin-bottom: var(--slv-space-xl, 64px);
}

/* Services Section */
.services-section.semantic-section {
  /* SPACING FIX: Asymmetrisches Padding (!important für Cache-Override) */
  padding-top: 80px !important;     /* 80px oben */
  padding-bottom: 32px !important;  /* 32px unten (REDUZIERT von 80px!) */
  background: var(--slv-bg-light, #f8f9fa);
}

.services-section.semantic-section .container {
  max-width: var(--slv-content-width, 1200px);
  margin: 0 auto;
  padding: 0 var(--slv-space-m, 24px);
}

/* CTA Section */
.cta-section.semantic-section {
  /* Asymmetrisches Padding: Oben groß (80px), Unten reduziert (32px) */
  /* Grund: Reduziert Abstand zur folgenden Gradient Divider (war 128px, jetzt 48px) */
  padding-top: var(--slv-space-xl, 64px);     /* 80px - Abstand nach oben */
  padding-bottom: var(--slv-space-m, 32px);   /* 32px - Abstand nach unten (war 80px) */
  background: linear-gradient(135deg, var(--slv-primary-blue, #5cb8e9) 0%, var(--slv-blue-dark, #2c3e50) 100%);
  color: var(--slv-bg-white, #ffffff);
}

.cta-section.semantic-section h2,
.cta-section.semantic-section p {
  color: var(--slv-bg-white, #ffffff);
}

/* Responsive */
@media (max-width: 767px) {
  .services-section.semantic-section {
    /* SPACING FIX: Asymmetrisches Padding auf Mobile (!important) */
    padding-top: 60px !important;     /* 60px oben */
    padding-bottom: 16px !important;  /* 16px unten (REDUZIERT von 60px!) */
  }

  /* CTA Section: Mobile - Noch kompakteres Spacing */
  .cta-section.semantic-section {
    padding-top: var(--slv-space-l, 48px);     /* 48px - Abstand nach oben */
    padding-bottom: var(--slv-space-s, 16px);  /* 16px - Abstand nach unten (sehr kompakt) */
  }
}

/* ===========================================
   SECTION HEADINGS SCROLL ANIMATION
   Sanftes Einblenden der Überschriften
   @since 1.2.0 - Animation Enhancement Phase 3
   =========================================== */

/**
 * H2 Überschriften Initial State
 * Fade + leichte Bewegung nach oben für eleganten Effekt
 * Wird durch scroll-animations.js aktiviert
 */
h2.wp-block-heading.scroll-reveal {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/**
 * H2 Überschriften Visible State
 * Eingeblendet und an Position
 */
h2.wp-block-heading.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/**
 * Accessibility: Reduced Motion
 * Deaktiviert Animation für Nutzer mit Bewegungsempfindlichkeit
 */
@media (prefers-reduced-motion: reduce) {
    h2.wp-block-heading.scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}