/* ============================================
   MOBILE-FIXES — gezielte Korrekturen für ≤768px
   Ergänzt components.css / seo.css / karriere.css
   ============================================ */

/* === 1. MOBILE-CTA verdeckt Content → Body-Padding für sticky Bottom-Bar === */
@media (max-width: 767px) {
  body { padding-bottom: 64px; } /* Höhe der mobile-cta */
  .mobile-cta a { min-height: 56px; }
}

/* === 2. COOKIE-BANNER über Mobile-CTA positionieren === */
@media (max-width: 767px) {
  .cookie-banner {
    bottom: 72px; /* sitzt über mobile-cta */
    left: var(--space-2);
    right: var(--space-2);
    padding: var(--space-4);
  }
  .cookie-banner h3 { font-size: var(--text-base); }
  .cookie-banner__actions { flex-direction: column; gap: var(--space-2); }
  .cookie-banner__actions .cookie-btn { width: 100%; min-height: 44px; }
}

/* === 3. HEADER auf sehr kleinem Viewport === */
@media (max-width: 380px) {
  .site-header__inner { gap: var(--space-3); padding-block: var(--space-2); }
  .site-header__cta { gap: var(--space-1); }
  .site-header__cta .btn-sm { padding-inline: var(--space-3); font-size: 0.8125rem; }
  .menu-toggle { width: 40px; height: 40px; }
}

/* === 4. CALC__LIVE Sticky korrigieren — exakt unter Header === */
@media (max-width: 640px) {
  .calc__live { top: 60px; }
}

/* === 5. HERO-Padding mobil reduzieren (mehr Inhalt above-the-fold) === */
@media (max-width: 540px) {
  .hero { padding-block: var(--space-7); }
  .hero__headline { font-size: clamp(2.25rem, 8vw, 3rem); }
  .hero__sub { font-size: var(--text-base); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__trust { gap: var(--space-3) var(--space-4); font-size: 0.8125rem; }
}

/* === 6. CTA-Buttons grundsätzlich min-height auf Mobile === */
@media (max-width: 640px) {
  .btn { min-height: 48px; }
  .btn-sm { min-height: 40px; }
}

/* === 7. APPLY-MODAL mobil: Close 44px + safe-area === */
@media (max-width: 640px) {
  .apply-modal { padding: 0; }
  .apply-modal__content {
    max-height: 100vh; max-height: 100dvh;
    border-radius: 0;
    width: 100%;
  }
  .apply-modal__close { width: 44px; height: 44px; top: var(--space-2); right: var(--space-2); }
}

/* === 8. SECTION-TITLE & SEO-Hero mobil knapper === */
@media (max-width: 540px) {
  .section-title { margin-bottom: var(--space-5); }
  .section-title p { font-size: var(--text-base); }
  .seo-hero { padding-block: var(--space-7); }
  .seo-hero h1 { font-size: clamp(1.875rem, 7vw, 2.5rem); }
  .seo-hero__lead { font-size: var(--text-base); }
}

/* === 9. ARTICLE Typo knapper auf Mobile === */
@media (max-width: 540px) {
  .article h2 { font-size: var(--text-2xl); margin-top: var(--space-7); }
  .article h3 { font-size: var(--text-lg); margin-top: var(--space-5); }
  .article p { font-size: 0.9375rem; line-height: 1.65; }
  .toc { padding: var(--space-4); }
  .quick-answer p { font-size: var(--text-base); }
  .stat-card__num { font-size: var(--text-2xl); }
  .inline-cta { padding: var(--space-5); }
}

/* === 10. STANDORTE/JOB-Cards Padding mobil === */
@media (max-width: 540px) {
  .job-card { padding: var(--space-5); }
  .job-card h3 { font-size: var(--text-lg); }
  .career-hero { padding-block: var(--space-7); }
  .career-hero__headline { font-size: clamp(1.875rem, 7vw, 2.5rem); }
  .career-hero__cta { flex-direction: column; align-items: stretch; }
  .career-hero__cta .btn { width: 100%; }
}

/* === 11. CALC mobil: Tabs-Text knapper, Panel-Padding === */
@media (max-width: 480px) {
  .calc__tab { padding: var(--space-3) var(--space-2); font-size: 0.8125rem; gap: var(--space-1); }
  .calc__panel { padding: var(--space-4); }
  .calc__title { font-size: var(--text-xl); }
  .calc__intro { font-size: var(--text-base); margin-bottom: var(--space-5); }
  .calc__step-question { font-size: var(--text-xl); }
  .calc__step-options .option-pill { padding: var(--space-3); min-height: 64px; font-size: 0.9375rem; }
}

/* === 12. FUNNEL mobil === */
@media (max-width: 540px) {
  .funnel__body { padding: var(--space-5); }
  .funnel__question { font-size: var(--text-2xl); }
  .funnel__option { padding: var(--space-3) var(--space-4); }
  .funnel__option-icon { width: 36px; height: 36px; }
}

/* === 13. FOOTER mobil: Logo + Spacing === */
@media (max-width: 540px) {
  .site-footer { padding-block: var(--space-6); }
  .site-footer__brand img { height: 48px; }
  .site-footer h4 { font-size: 0.9375rem; }
  .site-footer__legal { gap: var(--space-3); }
}

/* === 14. CONTACT-BAND mobil padding === */
@media (max-width: 540px) {
  .contact-band { padding: var(--space-6) var(--space-5); }
  .contact-band__cta { flex-direction: column; }
  .contact-band__cta .btn { width: 100%; }
}

/* === 15. CAREER-TEASER mobil: Bild knapper === */
@media (max-width: 640px) {
  .career-teaser { gap: var(--space-5); }
  .career-teaser__img { aspect-ratio: 4/3; }
}

/* === 16. NAV LINK Tap-Targets === */
.nav__link { padding-block: var(--space-2); display: inline-flex; align-items: center; min-height: 40px; }
.mobile-menu__link { min-height: 56px; display: flex; align-items: center; }

/* === 17. REGION-LIST tap-target === */
.region-list a { min-height: 44px; display: flex; align-items: center; }

/* === 18. iOS-Safe-Area Bottom-Padding === */
.mobile-cta { padding-bottom: env(safe-area-inset-bottom); }
.cookie-banner { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }

/* === 19. ABOUT-Bild auf Mobile cropped === */
@media (max-width: 899px) {
  .about__media { aspect-ratio: 4/5; max-height: 60vh; overflow: hidden; }
  .about__media img { width: 100%; height: 100%; object-fit: cover; }
}

/* === 20. INPUT-Zoom auf iOS verhindern (font-size ≥16px) === */
.field input, .field select, .field textarea { font-size: 16px; }
@media (min-width: 768px) {
  .field input, .field select, .field textarea { font-size: var(--text-base); }
}

/* === 21. SCROLL-PADDING für Anchor-Links unter sticky Header === */
html { scroll-padding-top: 80px; }
@media (max-width: 767px) { html { scroll-padding-top: 70px; } }

/* === 22. STANDORTE-INDEX job-card als Block-Link mobil === */
@media (max-width: 540px) {
  .standorte .job-card .btn-block { width: 100%; }
}

/* === 23. FAQ summary mobile === */
@media (max-width: 540px) {
  .faq__item summary { font-size: var(--text-base); }
}

/* === 24. Word-break long URLs/E-Mails in legal-pages === */
.legal a { word-break: break-word; overflow-wrap: anywhere; }