/* =====================================================================
   MAGLANO GO – MOBILE FINAL
   Zielgeräte:
   - iPhone 11       414 × 896
   - iPhone mini     375 × 812
   - iPhone SE       375 × 667

   Diese Datei wird NACH allen bisherigen Styles geladen.
   Desktop > 680 px wird hier bewusst nicht verändert.
   ===================================================================== */


/* ---------------------------------------------------------------------
   BASIS
   --------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}


/* =====================================================================
   MOBILE BASIS ≤ 680 px
   ===================================================================== */

@media (max-width: 680px) {


  /* -------------------------------------------------------------------
     ALLGEMEINE TOUCH-ZIELE
     ------------------------------------------------------------------- */

  a,
  button,
  summary {
    -webkit-tap-highlight-color: transparent;
  }


  /* ===================================================================
     HERO
     =================================================================== */

  .hero {
    min-height: 0 !important;
    height: auto !important;

    padding-bottom: 0 !important;

    overflow: visible !important;
  }


  .hero-grid {
    grid-template-columns: 1fr !important;

    gap: 12px !important;

    align-items: start !important;
  }


  .hero-copy {
    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;
  }


  .hero h1 {
    max-width: 100% !important;

    margin-bottom: 14px !important;

    font-size:
      clamp(
        2.15rem,
        10vw,
        2.68rem
      ) !important;

    line-height: 1.01 !important;

    letter-spacing: -0.04em !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
  }


  .hero-copy > .hero-lead,
  .hero-lead {
    width: 100% !important;
    max-width: 36rem !important;

    margin-top: 0 !important;
    margin-bottom: 16px !important;

    font-size: 0.98rem !important;
    line-height: 1.48 !important;
  }


  /*
    Store-Badges bewusst nebeneinander.
    Auf 375 px passen 140 + 152 px inkl. Abstand sauber.
  */

  .hero-copy > .store-links,
  .store-links {
    width: 100% !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }


  .store-links .store-item,
  .store-links .store-link,
  .store-links > * {
    min-width: 0 !important;
  }


  /*
    Bereits freigegebene mobile Badge-Grössen beibehalten.
  */

  .store-links img {
    height: auto !important;
  }


  /*
    Bildszene:
    keine alte 440/500px-Höhe mehr.
    Inhalt bleibt sichtbar, Hero wird deutlich kompakter.
  */

  .hero-visual {
    width: 100% !important;

    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;

    margin-top: 2px !important;
    margin-bottom: 0 !important;

    overflow: visible !important;
  }


  .hero-visual__scene {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;

    overflow: visible !important;
  }


  /*
    WELLE:
    SVG / Form / Position wird NICHT geändert.
    Nur keine zusätzliche künstliche Höhe.
  */

  .hero-wave {
    margin-top: 0 !important;
  }


  /* ===================================================================
     SECOND STAGE / SEKTIONSABSTÄNDE
     =================================================================== */

  .section-two,
  .second-stage,
  .second-stage-shell {
    overflow-x: hidden;
  }


  /*
    Überschriften auf 375–414 px nicht unnötig riesig.
  */

  .section-heading h2,
  .section-title,
  .audience-section-heading h2 {
    font-size:
      clamp(
        1.9rem,
        8.3vw,
        2.35rem
      ) !important;

    line-height: 1.08 !important;

    letter-spacing: -0.03em !important;
  }


  .section-heading p,
  .section-subtitle,
  .audience-section-heading p {
    font-size: 0.98rem !important;

    line-height: 1.45 !important;
  }


  /* ===================================================================
     3 SCHRITTE
     =================================================================== */

  .steps-grid {
    grid-template-columns: 1fr !important;

    gap: 18px !important;

    margin-bottom: 30px !important;
  }


  .steps-grid .step-card {
    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    padding:
      20px
      18px
      21px !important;

    overflow: hidden !important;
  }


  /*
    Desktop-Pfeile auf Mobile aus.
  */

  .steps-grid .step-card::after {
    display: none !important;
    content: none !important;
  }


  .steps-grid .step-number {
    width: 38px !important;
    height: 38px !important;

    margin-bottom: 8px !important;
  }


  .steps-grid .step-card h3 {
    margin-top: 0 !important;
    margin-bottom: 2px !important;

    line-height: 1.15 !important;
  }


  .steps-grid .step-card .step-visual {
    height: 108px !important;
    min-height: 108px !important;

    margin-top: 0 !important;
    margin-bottom: 2px !important;

    overflow: visible !important;
  }


  .steps-grid .step-card > p {
    margin-top: 2px !important;
    margin-bottom: 0 !important;

    line-height: 1.48 !important;
  }


  /* ===================================================================
     SO NUTZT DU MAGLANO GO
     =================================================================== */

  .audience-section-heading {
    margin-top: 4px !important;
    margin-bottom: 20px !important;

    padding-inline: 6px !important;
  }


  .audience-section-heading p {
    margin-top: 7px !important;
  }


  /* ===================================================================
     AUFTRAGGEBER / FAHRER
     =================================================================== */

  .audience-grid {
    grid-template-columns: 1fr !important;

    gap: 18px !important;

    margin-top: 0 !important;
    margin-bottom: 30px !important;
  }


  .audience-grid .audience-card {
    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    padding:
      20px
      18px
      21px !important;

    overflow: hidden !important;
  }


  .audience-grid .audience-card h3 {
    margin:
      0
      0
      2px !important;

    line-height: 1.15 !important;
  }


  .audience-inline-visual {
    height: 104px !important;
    min-height: 104px !important;

    margin:
      0
      auto
      3px !important;

    overflow: visible !important;
  }


  .audience-grid .audience-intro {
    margin:
      0
      0
      12px !important;

    line-height: 1.48 !important;
  }


  .audience-grid .audience-list {
    margin:
      12px
      0
      0 !important;

    padding-bottom: 0 !important;
  }


  .audience-grid .audience-list li {
    line-height: 1.42 !important;
  }


  .audience-grid .audience-list li + li {
    margin-top: 6px !important;
  }


  /* ===================================================================
     PASSENDE WEGE
     =================================================================== */

  .impact-card {
    grid-template-columns: 1fr !important;

    min-height: 0 !important;
    height: auto !important;

    gap: 8px !important;

    padding:
      22px
      18px
      20px !important;
  }


  .impact-card > * {
    min-width: 0 !important;
  }


  .impact-visual {
    width: 100% !important;

    height: 150px !important;
    min-height: 150px !important;

    margin:
      0
      auto !important;

    transform: none !important;

    overflow: visible !important;
  }


  .impact-illustration {
    width: 100% !important;
    max-width: 430px !important;

    height: auto !important;

    transform: none !important;
  }


  /* ===================================================================
     FAQ
     =================================================================== */

  .faq-final-grid {
    grid-template-columns: 1fr !important;

    gap: 18px !important;
  }


  .faq-final-grid details,
  .faq-final-grid .faq-item {
    width: 100% !important;
  }


  .faq-final-grid summary {
    min-height: 52px !important;

    padding:
      13px
      4px !important;

    line-height: 1.35 !important;

    cursor: pointer;
  }


  /* ===================================================================
     FOOTER CTA
     =================================================================== */

  .footer-cta {
    overflow: hidden !important;
  }


  .footer-cta-copy h2 {
    font-size:
      clamp(
        1.65rem,
        7.7vw,
        2rem
      ) !important;

    line-height: 1.08 !important;
  }


  .footer-cta-copy p {
    max-width: 32rem !important;

    font-size: 0.94rem !important;
  }


  /*
    Store-Badges im CTA ebenfalls nicht quetschen.
  */

  .footer-store-links,
  .footer-store-row,
  .footer-store-badges {
    max-width: 100% !important;

    flex-wrap: wrap !important;

    gap:
      12px
      14px !important;
  }


  /* ===================================================================
     FOOTER
     =================================================================== */

  .footer-grid,
  .site-footer .footer-grid,
  .footer .footer-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    column-gap: 24px !important;
    row-gap: 28px !important;

    align-items: start !important;
  }


  /*
    Logo/Brand nimmt mobile ganze Breite ein.
  */

  .footer-brand,
  .footer-brand-column {
    grid-column:
      1
      /
      -1 !important;
  }


  .footer-column {
    min-width: 0 !important;
  }


  .footer-column h3 {
    margin-bottom: 8px !important;
  }


  .footer-column a,
  .footer-link-placeholder {
    overflow-wrap: anywhere;
  }


  .footer-socials {
    gap: 10px !important;
  }


  .footer-social-link {
    width: 46px !important;
    height: 46px !important;

    border-radius: 12px !important;
  }


  .footer-social-link svg {
    width: 23px !important;
    height: 23px !important;
  }


  .footer-bottom {
    width:
      calc(
        100%
        -
        36px
      ) !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 6px !important;

    padding:
      16px
      0
      20px !important;

    text-align: left !important;
  }


  /* ===================================================================
     KONTAKT
     =================================================================== */

  .contact-main {
    width:
      calc(
        100%
        -
        24px
      ) !important;
  }


  .contact-grid,
  .contact-grid--combined {
    grid-template-columns: 1fr !important;

    gap: 18px !important;
  }


  .contact-grid--combined .contact-card,
  .contact-card--combined,
  .contact-card--address {
    min-height: 0 !important;
    height: auto !important;

    padding:
      24px
      20px !important;
  }


  .contact-card h2,
  .support-info h2 {
    font-size:
      clamp(
        1.45rem,
        7vw,
        1.85rem
      ) !important;
  }


  .contact-email {
    overflow-wrap: anywhere;
  }


  .support-topics {
    grid-template-columns: 1fr !important;

    gap: 11px !important;
  }


  /* ===================================================================
     RECHTLICHES + KONTAKT TOPBAR
     =================================================================== */

  .legal-topbar {
    min-height: 66px !important;

    padding:
      10px
      16px !important;

    align-items: center !important;

    gap: 12px !important;
  }


  .legal-brand img {
    width: 118px !important;
    height: auto !important;
  }


  .legal-back {
    max-width: none !important;

    flex: 0 1 auto !important;

    justify-content: flex-end !important;

    font-size: 12.5px !important;

    line-height: 1.25 !important;

    text-align: right !important;
  }


  .legal-main {
    width:
      calc(
        100%
        -
        24px
      ) !important;

    margin:
      22px
      auto
      40px !important;
  }


  .legal-hero {
    padding:
      24px
      20px !important;

    border-radius: 21px !important;
  }


  .legal-hero h1 {
    font-size:
      clamp(
        2rem,
        10vw,
        2.65rem
      ) !important;

    line-height: 1.03 !important;

    overflow-wrap: anywhere;
  }


  .legal-document {
    padding:
      24px
      19px !important;

    border-radius: 21px !important;
  }


  .legal-section {
    margin-top: 32px !important;
  }


  .legal-section h2 {
    gap: 10px !important;

    font-size:
      clamp(
        1.18rem,
        5.2vw,
        1.45rem
      ) !important;
  }


  .legal-section h2 > span {
    min-width: 35px !important;
    height: 35px !important;

    padding:
      0
      8px !important;

    font-size: 12.5px !important;
  }


  .legal-paragraph,
  .legal-list li {
    font-size: 15px !important;

    line-height: 1.58 !important;

    overflow-wrap: anywhere;
  }


  .legal-footer {
    grid-template-columns: 1fr !important;

    gap: 14px !important;

    padding:
      24px
      18px !important;

    text-align: center !important;
  }


  .legal-footer > :last-child {
    text-align: center !important;
  }

}


/* =====================================================================
   KLEINERE BREITE ≤ 390 px
   iPhone mini + iPhone SE
   ===================================================================== */

@media (max-width: 390px) {

  .hero h1 {
    font-size:
      clamp(
        2.05rem,
        10.5vw,
        2.48rem
      ) !important;
  }


  .hero-copy > .hero-lead,
  .hero-lead {
    font-size: 0.94rem !important;
  }


  .hero-visual {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }


  .steps-grid {
    gap: 16px !important;
  }


  .steps-grid .step-card {
    padding:
      18px
      16px
      19px !important;
  }


  .steps-grid .step-card .step-visual {
    height: 102px !important;
    min-height: 102px !important;
  }


  .audience-grid {
    gap: 16px !important;
  }


  .audience-grid .audience-card {
    padding:
      18px
      16px
      19px !important;
  }


  .audience-inline-visual {
    height: 98px !important;
    min-height: 98px !important;
  }


  .impact-card {
    padding:
      20px
      16px
      18px !important;
  }


  .impact-visual {
    height: 138px !important;
    min-height: 138px !important;
  }


  /*
    Footer auf 375 px weiterhin 2-spaltig.
    Das hält ihn wesentlich kompakter.
  */

  .footer-grid,
  .site-footer .footer-grid,
  .footer .footer-grid {
    column-gap: 18px !important;
    row-gap: 24px !important;
  }


  .footer-social-link {
    width: 44px !important;
    height: 44px !important;
  }


  .legal-topbar {
    padding:
      9px
      12px !important;
  }


  .legal-brand img {
    width: 108px !important;
  }


  .legal-main {
    width:
      calc(
        100%
        -
        18px
      ) !important;
  }

}


/* =====================================================================
   IPHONE SE – KURZES DISPLAY
   375 × 667

   mini hat ebenfalls 375 px Breite, aber 812 px Höhe.
   Deshalb zusätzliche HEIGHT-Abfrage.
   ===================================================================== */

@media
  (max-width: 390px)
  and
  (max-height: 700px) {

  /*
    Nur vertikale Räume reduzieren.
    Keine kleinere Schrift erzwingen.
  */

  .hero h1 {
    margin-bottom: 10px !important;
  }


  .hero-copy > .hero-lead,
  .hero-lead {
    margin-bottom: 12px !important;
  }


  .hero-copy > .store-links,
  .store-links {
    margin-bottom: 4px !important;
  }


  .hero-visual {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
  }


  .steps-grid {
    margin-bottom: 25px !important;
  }


  .audience-section-heading {
    margin-bottom: 17px !important;
  }


  .audience-grid {
    margin-bottom: 25px !important;
  }


  .steps-grid .step-card {
    padding-top: 17px !important;
    padding-bottom: 18px !important;
  }


  .steps-grid .step-card .step-visual {
    height: 96px !important;
    min-height: 96px !important;
  }


  .audience-grid .audience-card {
    padding-top: 17px !important;
    padding-bottom: 18px !important;
  }


  .audience-inline-visual {
    height: 92px !important;
    min-height: 92px !important;
  }


  .impact-visual {
    height: 128px !important;
    min-height: 128px !important;
  }


  .footer-grid,
  .site-footer .footer-grid,
  .footer .footer-grid {
    row-gap: 21px !important;
  }

}


/* =====================================================================
   ENDE MOBILE FINAL
   ===================================================================== */

/* MAGLANO-HORIZONTAL-OVERFLOW-FIX-20260809
   Verhindert horizontales Root-Scrolling.
   Die sichtbare Hero-Gestaltung innerhalb des Viewports bleibt unverändert. */

html,
body {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

@media (max-width: 680px) {
  @supports (overflow: clip) {
    .hero {
      overflow-x: clip !important;
    }
  }
}