/* Marketing Schmiede V232
   Ausschließlich mobile Korrekturen. Ab 761px greifen keinerlei Regeln aus dieser Datei.
   Desktop und größere Tablet-/Laptop-Ansichten bleiben exakt im V227-Originalzustand. */

@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  /* Allgemeiner Schutz gegen horizontales Abschneiden auf schmalen Smartphones. */
  main,
  section,
  header,
  footer,
  .wrap,
  .section-wrap,
  .hero-inner,
  .hero-center,
  .card,
  .form-card,
  .form-layout,
  .form-grid,
  .cta-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100% !important;
  }

  /* Header: Logo/Schrift und Menü bekommen feste, getrennte Bereiche. */
  .msu-header {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .msu-nav {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    gap: 8px !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .msu-brand {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 128px) !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  .msu-brand img {
    flex: 0 0 auto !important;
    width: clamp(43px, 13vw, 51px) !important;
    height: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }

  .msu-brand-type {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 108px !important;
    overflow: hidden !important;
    line-height: .82 !important;
  }

  .msu-brand-type strong {
    display: block !important;
    max-width: 100% !important;
    font-size: clamp(12px, 3.9vw, 15px) !important;
    line-height: .82 !important;
    letter-spacing: -.035em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .msu-brand-type small {
    display: block !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    font-size: clamp(6px, 1.8vw, 7px) !important;
    line-height: 1 !important;
    letter-spacing: clamp(.13em, .55vw, .22em) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .msu-mobile {
    display: block !important;
    flex: 0 0 clamp(116px, 35vw, 128px) !important;
    width: clamp(116px, 35vw, 128px) !important;
    min-width: 0 !important;
    max-width: 128px !important;
  }

  .msu-mobile summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 10px 13px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .msu-mobile summary > span:first-child {
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .msu-mobile summary .msu-mobile-plus {
    flex: 0 0 auto !important;
    font-size: 24px !important;
  }

  .msu-mobile-panel {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 92px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    overscroll-behavior: contain !important;
  }

  .msu-mobile-panel a {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Startseiten-Hero: keine abgeschnittenen Wörter oder überbreiten Zeilen. */
  body.meta-home #start.hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body.meta-home #start .hero-inner {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.meta-home #start .hero-center,
  body.meta-home #start .hero-center > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.meta-home #start .hero-contact-compact {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.meta-home #start .hero-contact-compact a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    font-size: clamp(9.5px, 2.8vw, 11.5px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  body.meta-home #start h1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: clamp(28px, 8.55vw, 34px) !important;
    line-height: .91 !important;
    letter-spacing: -.052em !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  body.meta-home #start h1 .v202-hero-line,
  body.meta-home #start h1 .v202-hero-line-primary,
  body.meta-home #start h1 .v202-hero-line-secondary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  body.meta-home #start .mobile-line-break,
  body.meta-home #start .mobile-break-word {
    display: block !important;
  }

  body.meta-home #start .mobile-break-word {
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  body.meta-home #start .v202-hero-line-secondary {
    margin-top: 6px !important;
  }

  body.meta-home #start .v202-hero-line-secondary .mobile-break-word {
    font-size: .86em !important;
    letter-spacing: -.04em !important;
  }

  body.meta-home #start .hero-video-card,
  body.meta-home #start .hero-video-top,
  body.meta-home #start .ms-vimeo-wrap,
  body.meta-home #start .hero-video-caption,
  body.meta-home #start .hero-copy,
  body.meta-home #start .hero-offer-note,
  body.meta-home #start .micro {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.meta-home #start .hero-video-top {
    gap: 8px !important;
  }

  body.meta-home #start .hero-video-top small,
  body.meta-home #start .hero-video-top b {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Formulare und Buttons bleiben innerhalb der Smartphone-Breite. */
  .form-layout,
  .form-grid,
  .form-row,
  .field {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  input,
  select,
  textarea,
  button,
  a.btn,
  .btn {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  a.btn,
  button.btn,
  input[type="submit"].btn {
    height: auto !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  /* Fix nur mobil: die Danke-Seite darf nicht in mehrere schmale Spalten gepresst werden. */
  body.ms-thankyou-page {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    padding: 0 !important;
    min-height: 100vh !important;
  }

  body.ms-thankyou-page > main.wrap {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 20px auto !important;
  }

  /* Untere mobile CTA berücksichtigt iPhone-Safe-Areas. */
  .sticky-mobile {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .sticky-mobile .btn {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 340px) {
  .msu-nav {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 6px !important;
  }

  .msu-brand {
    max-width: calc(100% - 116px) !important;
    gap: 5px !important;
  }

  .msu-brand img {
    width: 40px !important;
    height: 41px !important;
  }

  .msu-brand-type strong {
    font-size: 11.5px !important;
  }

  .msu-mobile {
    flex-basis: 110px !important;
    width: 110px !important;
  }

  .msu-mobile summary {
    padding-left: 11px !important;
    padding-right: 11px !important;
    font-size: 13px !important;
  }

  body.meta-home #start h1 {
    font-size: clamp(26px, 8.45vw, 29px) !important;
  }
}

/* V232: Nur extrem schmale Smartphone-Displays (z. B. 280 px).
   Verhindert, dass „Mehr Abschlüsse.“ rechts abgeschnitten wird. */
@media (max-width: 300px) {
  body.meta-home #start .v202-hero-line-secondary .mobile-break-word {
    font-size: clamp(18px, 7vw, 20px) !important;
    letter-spacing: -.055em !important;
  }
}

/* V232 QA 1: Die mobile Abschlussleiste bleibt innerhalb der Displayränder.
   Die ursprüngliche Polish-Datei setzt sie global auf position:relative;
   dieser Fix stellt nur auf Smartphones die vorgesehene feste Leiste wieder her. */
@media (max-width: 760px) {
  body .sticky-mobile {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;
  }
}

/* V232 QA 2: FAQ-Raster darf auf sehr schmalen Smartphones nicht durch
   die Mindestbreite langer Überschriften oder Fragen verbreitert werden. */
@media (max-width: 340px) {
  body .faq-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .faq-layout > *,
  body .faq-layout details,
  body .faq-layout summary,
  body .faq-layout h2,
  body .faq-layout p {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* V232 QA 3: Paketkarten dürfen auf 280–340 px nicht durch intrinsische
   Mindestbreiten breiter als der sichtbare Inhaltsbereich werden. */
@media (max-width: 340px) {
  body.meta-home .v95-pricing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.meta-home .v95-price-card,
  body.meta-home .v95-price-card > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.meta-home .v95-price-card {
    width: 100% !important;
  }
}

/* V232 QA 4: Der Instagram-Kopf bleibt auch auf 280–340 px innerhalb
   des Inhaltsbereichs; die bestehende Einzeilen-Regel wird dort aufgehoben. */
@media (max-width: 340px) {
  body.meta-home .v209-instagram-shell,
  body.meta-home .v209-instagram-head {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.meta-home .v209-instagram-head > *,
  body.meta-home .v209-instagram-head h2,
  body.meta-home .v209-instagram-head p,
  body.meta-home .v209-instagram-head .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.meta-home .v209-instagram-head h2 {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* V232 QA 5: Zweispaltige Statement-Blöcke werden auf sehr schmalen
   Geräten als wirklich schrumpfbare Einspalte geführt. */
@media (max-width: 340px) {
  body .statement {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .statement > *,
  body .statement h2,
  body .statement .statement-copy,
  body .statement .statement-copy p,
  body .statement .statement-copy strong {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* V232 QA 6: Servicekarten behalten auf extrem schmalen Displays keine
   durch Text erzwungene Mindestspaltenbreite. */
@media (max-width: 340px) {
  body .services {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .services > *,
  body .services .service,
  body .services .service > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* V232 QA 7: Der Statement-Block nutzt auf allen Smartphonebreiten eine
   schrumpfbare Einzelspalte. Dies erweitert ausschließlich den mobilen Fix. */
@media (max-width: 760px) {
  body .statement {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .statement > *,
  body .statement h2,
  body .statement .statement-copy,
  body .statement .statement-copy p,
  body .statement .statement-copy strong {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* V232 QA 8: Rechtliche Seiten bleiben auch auf kleinen Handys im
   Querformat vollständig sichtbar. Das dekorative Wappen wird dort kleiner,
   ohne die Desktop- oder normale Tabletansicht anzutasten. */
@media (max-width: 620px) and (orientation: landscape) {
  body .legal-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 112px) !important;
    gap: 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .legal-hero .hero-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .legal-hero .hero-mark {
    width: 112px !important;
    max-width: 100% !important;
    height: auto !important;
    justify-self: end !important;
  }
}

/* V232 QA 9: Das absolut positionierte Wappen der Rechtsseiten hatte im
   kleinen Querformat einen negativen rechten Versatz. */
@media (max-width: 620px) and (orientation: landscape) {
  body .legal-hero .hero-mark {
    left: auto !important;
    right: 0 !important;
  }
}

/* V232 QA 10: Derselbe negative Versatz trat auch auf größeren Handys im
   Querformat auf. Der Fix bleibt bis 760 px vollständig mobil gekapselt. */
@media (max-width: 760px) and (orientation: landscape) {
  body .legal-hero .hero-mark {
    left: auto !important;
    right: 0 !important;
    width: clamp(96px, 18vw, 150px) !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* V232 QA 11: Auch bei 760 px im Hochformat lag das dekorative Wappen
   durch den ursprünglichen negativen Versatz außerhalb des Viewports. */
@media (max-width: 760px) {
  body .legal-hero .hero-mark {
    left: auto !important;
    right: 0 !important;
    width: clamp(96px, 18vw, 150px) !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* V232 QA 12: Höhere Spezifität als die nachgeladene Original-Polish-Datei,
   damit „Mehr Abschlüsse.“ auf 280-px-Geräten tatsächlich vollständig passt. */
@media (max-width: 300px) {
  html body.meta-home.v202 #start.hero .hero-inner .hero-center h1
  span.v202-hero-line.v202-hero-line-secondary span.mobile-break-word {
    font-size: clamp(22px, 8vw, 24px) !important;
    letter-spacing: -.055em !important;
    white-space: nowrap !important;
  }
}

/* V232 QA 13: Auch 320-px-Geräte benötigen für die Abschlusszeile eine
   leicht reduzierte, aber weiterhin deutlich hervorgehobene Schriftgröße. */
@media (max-width: 340px) {
  html body.meta-home.v202 #start.hero .hero-inner .hero-center h1
  span.v202-hero-line.v202-hero-line-secondary span.mobile-break-word {
    font-size: clamp(22px, 8.5vw, 28px) !important;
    letter-spacing: -.055em !important;
    white-space: nowrap !important;
  }
}