/* ============================================================================
   Mobile Optimization CSS
   Ultra-kompakte, mobile-first Optimierungen
   ============================================================================ */

@media (max-width: 768px) {
    /* ===== Mobile Spacing Overrides ===== */
    :root {
        --spacing-xs: 0.375rem;
        --spacing-sm: 0.625rem;
        --spacing-md: 0.875rem;
        --spacing-lg: 1.25rem;
        --spacing-xl: 1.75rem;
        --spacing-xxl: 2.5rem;
    }

    /* ===== Footer Kompakt ===== */
    .footer {
        padding: 0.75rem var(--spacing-md) 0.5rem;
    }

    .footer-content {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .footer-nav ul,
    .footer-legal ul {
        gap: 0.375rem;
        font-size: 0.6875rem; /* 11px */
    }

    .footer-bottom p {
        font-size: 0.625rem; /* 10px */
        margin-bottom: 0.25rem;
    }

    .footer-credit {
        font-size: 0.625rem; /* 10px */
    }

    /* ===== Sections Ultra-Kompakt ===== */
    .services-preview,
    .why-us,
    .process-home,
    .testimonials-teaser {
        padding: 2rem var(--spacing-md);
    }

    .intro {
        padding: 1.75rem var(--spacing-md);
    }

    .trust {
        padding: 1.5rem var(--spacing-md);
    }

    .cta-section {
        padding: 2rem var(--spacing-md);
    }

    /* ===== Headings Kompakt ===== */
    .services-preview h2,
    .why-us h2,
    .process-home h2,
    .testimonials-teaser h2 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .intro h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem;
    }
    
    .intro-content p {
        font-size: 1rem !important;
        line-height: 1.6;
    }
    
    /* Team Section Überschrift kleiner */
    .team-modern h2 {
        font-size: 1.5rem !important;
    }
    
    /* CTA Section Button kompakt */
    .cta-section .btn,
    .cta-section .btn-primary {
        padding: 8px 16px !important;
        font-size: 0.8125rem !important;
        white-space: nowrap;
        width: auto !important;
        display: inline-block !important;
    }
    


    /* ===== Trust Section Mobile ===== */
    .trust-grid {
        gap: 1rem;
    }

    .trust-item {
        padding: 1rem;
    }

    .trust-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 0.75rem;
        font-size: 1.5rem;
    }

    .trust-item h3 {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }

    .trust-item p {
        font-size: 0.875rem;
    }

    /* ===== Service Cards Mobile ===== */
    .service-preview-card {
        padding: 1.25rem;
    }

    .service-preview-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .service-preview-card h3 {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .service-benefits {
        margin: 0.75rem 0;
    }

    .service-benefits li {
        font-size: 0.875rem;
        padding: 0.25rem 0;
    }

    .service-link {
        padding-top: 0.75rem;
        font-size: 0.875rem;
    }

    /* ===== Why Us Mobile ===== */
    .why-us-grid {
        gap: 1.5rem;
    }

    .why-us-card {
        padding: 1.25rem;
        padding-top: 2rem;
    }

    .why-us-number {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
        top: -15px;
        left: 1.25rem;
    }

    .why-us-card h3 {
        font-size: 1.125rem;
        margin: 0.5rem 0;
    }

    .why-us-card p {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
    }

    .feature-list {
        margin-top: 0.75rem;
    }

    .feature-list li {
        font-size: 0.8125rem;
        padding: 0.25rem 0;
    }

    /* ===== Process Timeline Mobile ===== */
    .process-timeline {
        margin-top: 1.5rem;
    }

    .process-step {
        margin-bottom: 1.5rem;
    }

    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .step-content {
        padding: 0 0.5rem;
    }

    .step-content h3 {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }

    .step-content p {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* ===== Testimonials Mobile ===== */
    .testimonials-grid {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .testimonial-card {
        padding: 1.25rem;
    }

    .testimonial-stars {
        font-size: 1.125rem;
        margin-bottom: 0.75rem;
    }

    .testimonial-card p {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
    }

    .testimonial-card cite {
        font-size: 0.8125rem;
    }

    /* ===== CTA Section Mobile ===== */
    .cta-content h2 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .cta-content p {
        font-size: 0.9375rem;
        margin-bottom: 1.25rem;
    }

    /* ===== Section Intro Mobile ===== */
    .section-intro {
        font-size: 0.9375rem;
        margin-bottom: 1.5rem;
    }

    .intro-lead {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    /* ===== Buttons Mobile ===== */
    .btn {
        padding: 12px 24px;
        font-size: 0.9375rem;
    }

    .btn-secondary {
        padding: 12px 24px;
        font-size: 0.9375rem;
    }
    
    /* Hero Buttons kompakter - beide Buttons */
    .hero-cta .btn,
    .hero-cta .btn-primary,
    .hero-cta .btn-link {
        padding: 8px 16px !important;
        font-size: 0.8125rem !important;
        white-space: nowrap;
        width: auto !important;
        display: inline-block !important;
    }
}

@media (max-width: 480px) {
    /* ===== Extra Small Mobile ===== */
    .footer-nav ul,
    .footer-legal ul {
        font-size: 0.625rem; /* 10px */
    }

    .footer-bottom p,
    .footer-credit {
        font-size: 0.5625rem; /* 9px */
    }

    .services-preview h2,
    .why-us h2,
    .process-home h2,
    .testimonials-teaser h2 {
        font-size: 1.5rem;
    }

    .trust-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .service-preview-icon {
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
    }

    .step-number {
        width: 45px;
        height: 45px;
        font-size: 1.125rem;
    }

    .why-us-number {
        width: 35px;
        height: 35px;
        font-size: 1.125rem;
    }
}

@media (max-width: 768px) {
  header, .header {
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-header,
  .hero,
  section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Hero-Sektion für mobile Ansicht anpassen */
@media (max-width: 768px) {
  .hero {
    height: 60vh !important; /* Höhe: 60% der Bildschirmhöhe */
    min-height: 400px !important; /* Mindesthöhe, damit es gut aussieht */
    background-size: cover !important;
    background-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero h1,
  .hero p {
    margin: 0 20px !important;
    text-align: center !important;
  }
}

/* ===========================
   MOBILE ANPASSUNGEN
   =========================== */
@media (max-width: 768px) {

  /* Weißer Balken oben entfernen */
  header, .header {
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-header,
  .hero,
  section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hero-Sektion Höhe + Schriftgrößen */
  .hero {
    height: 60vh !important;
    min-height: 400px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .hero h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .hero h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .hero p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .hero a,
  .hero button {
    font-size: 16px !important;
    padding: 10px 20px !important;
  }
}

/* ===========================
   ALLE HERO-SEKTIONEN - EINHEITLICH & ZENTRIERT
   =========================== */

/* ALLE Hero-Content Container zentrieren */
.hero-content,
.story-hero-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
}

/* Startseite - Extra Padding damit Schrift nicht abgeschnitten wird */
body.homepage .hero-content {
  padding: 6rem 2rem 2rem 2rem !important;
}

/* Über Uns - Extra Padding nach oben */
body.ueber-uns-page .story-hero-content {
  padding: 8rem 2rem 2rem 2rem !important;
}

/* ALLE Hero Titles - Desktop */
.hero-title,
.story-hero-title,
body.homepage .hero-title,
body.leistungen-page .hero-title,
body.kontakt-page .hero-title,
body.ueber-uns-page .story-hero-title {
  font-size: 1.75rem !important;
  line-height: 1.3 !important;
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
}

/* ALLE Hero Subtitles - Desktop */
.hero-subtitle,
.story-hero-subtitle,
body.homepage .hero-subtitle,
body.leistungen-page .hero-subtitle,
body.kontakt-page .hero-subtitle,
body.ueber-uns-page .story-hero-subtitle {
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
}

/* ALLE Hero CTAs */
.hero-cta {
  margin-top: 1.5rem !important;
}

/* Über Uns - Button weiter nach unten */
body.ueber-uns-page .hero-cta {
  margin-top: 3rem !important;
}

/* ===== MOBILE - ALLE HERO-SEKTIONEN ===== */
@media (max-width: 768px) {
  .hero-content,
  .story-hero-content {
    padding: 0 1.5rem !important;
  }

  /* Startseite Mobile - Extra Padding */
  body.homepage .hero-content {
    padding: 4.5rem 1.5rem 1.5rem 1.5rem !important;
  }

  /* Über Uns Mobile - Extra Padding */
  body.ueber-uns-page .story-hero-content {
    padding: 6rem 1.5rem 1.5rem 1.5rem !important;
  }

  /* ALLE Hero Titles - Mobile */
  .hero-title,
  .story-hero-title,
  body.homepage .hero-title,
  body.leistungen-page .hero-title,
  body.kontakt-page .hero-title,
  body.ueber-uns-page .story-hero-title {
    font-size: 1.35rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.25rem !important;
    margin-top: 0 !important;
  }

  /* ALLE Hero Subtitles - Mobile */
  .hero-subtitle,
  .story-hero-subtitle,
  body.homepage .hero-subtitle,
  body.leistungen-page .hero-subtitle,
  body.kontakt-page .hero-subtitle,
  body.ueber-uns-page .story-hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
    margin-top: 0 !important;
  }

  .hero-cta {
    margin-top: 1.25rem !important;
  }

  /* Über Uns Mobile - Button weiter nach unten */
  body.ueber-uns-page .hero-cta {
    margin-top: 2.5rem !important;
  }
}