/* Invicta Media – mobile Korrekturen für alle öffentlichen Seiten.
   Als letztes Stylesheet laden. Desktop ab 761px bleibt unberührt. */
@media (max-width:760px) {
  html { overflow-x:hidden; }
  body { overflow-x:clip; }
  body *,body *::before,body *::after { box-sizing:border-box; }
  main { min-width:0; overflow-x:clip; }
  main :is(h1,h2,h3,p,a,li,label,strong,span) { overflow-wrap:break-word; }
  main h1 { font-size:clamp(34px,9.5vw,50px)!important; line-height:1.06!important; }
  .programming-hero h1 { font-size:clamp(30px,8.4vw,42px)!important; overflow-wrap:normal; word-break:normal; }
  main h2 { font-size:clamp(28px,7.5vw,38px)!important; line-height:1.14!important; }
  main h3 { line-height:1.3; }
  main p,main li { line-height:1.55; }
  .invicta-builder-design p:not(.eyebrow),.invicta-builder-design li {
    font-size:15px!important;
  }
  .invicta-builder-design small { font-size:12px!important; line-height:1.45; }
  main .eyebrow { font-size:11px!important; line-height:1.5; letter-spacing:.07em; }
  main .button { min-height:48px; padding:13px 18px; font-size:14px!important; line-height:1.35; white-space:normal; text-align:center; }
  main .actions { display:flex; flex-wrap:wrap; gap:12px; }

  /* Auf Inhaltsseiten wird das vorhandene Hero-Motiv unter den Text gesetzt. */
  :is(.home-page .hero,.hosting-hero,.marketing-hero,.seo-hero,.shops-hero,
      .customer-hero,.webdesign-hero,.programming-hero,.brands-hero,
      .social-hero,.about-hero,.references-hero,.career-hero) {
    display:flex!important; flex-direction:column!important; height:auto!important;
    min-height:0!important; padding:40px 20px!important; background-size:0 0!important;
    background-repeat:no-repeat!important; background-color:#f4f6f8;
  }
  :is(.home-page .hero,.hosting-hero,.marketing-hero,.seo-hero,.shops-hero,
      .customer-hero,.webdesign-hero,.programming-hero,.brands-hero,
      .social-hero,.about-hero,.references-hero,.career-hero)::before { content:none!important; }
  :is(.home-page .hero,.hosting-hero,.marketing-hero,.seo-hero,.shops-hero,
      .customer-hero,.webdesign-hero,.programming-hero,.brands-hero,
      .social-hero,.about-hero,.references-hero,.career-hero)::after {
    content:''!important; display:block!important; position:static!important;
    inset:auto!important; width:100%!important; aspect-ratio:16/9;
    flex:none; margin:28px 0 0!important; border-radius:12px;
    background-image:inherit!important; background-size:cover!important;
    background-position:center!important; background-repeat:no-repeat!important;
    opacity:1!important; transform:none!important; pointer-events:none;
  }
  :is(.hero-copy,.hosting-hero-copy,.marketing-hero-copy,.seo-hero-copy,
      .customer-hero-copy,.webdesign-hero-copy,.programming-hero-copy,
      .brands-hero-copy,.social-hero-copy,.about-hero-copy,
      .references-hero-copy,.career-hero-copy) {
    position:relative; z-index:1; width:100%!important; max-width:none!important;
    padding:0!important;
  }
  :is(.hero-copy,.hosting-hero-copy,.marketing-hero-copy,.seo-hero-copy,
      .customer-hero-copy,.webdesign-hero-copy,.programming-hero-copy,
      .brands-hero-copy,.social-hero-copy,.about-hero-copy,
      .references-hero-copy,.career-hero-copy) > p:not(.eyebrow) {
    max-width:none!important; font-size:16px!important; line-height:1.6!important;
  }
  :is(.hero-benefits,.career-hero-benefits,.checks) {
    display:grid!important; grid-template-columns:1fr!important; gap:10px!important;
    font-size:14px!important;
  }

  /* Bild-Text-Bühnen innerhalb der betroffenen Seiten ebenfalls trennen. */
  :is(.strong-service,.customer-final,.brands-identity,.brands-final,
      .social-content,.social-final,.about-philosophy,.about-knowledge,
      .about-final,.career-final) {
    display:flex!important; flex-direction:column!important; align-items:stretch!important;
    justify-content:flex-start!important; height:auto!important; min-height:0!important;
    padding:38px 20px!important; color:#111820!important;
    background-color:#f4f6f8!important; background-size:0 0!important;
    background-repeat:no-repeat!important;
  }
  :is(.strong-service,.customer-final,.brands-identity,.brands-final,
      .social-content,.social-final,.about-philosophy,.about-knowledge,
      .about-final,.career-final)::before { content:none!important; }
  :is(.strong-service,.customer-final,.brands-identity,.brands-final,
      .social-content,.social-final,.about-philosophy,.about-knowledge,
      .about-final,.career-final)::after {
    content:''!important; display:block!important; position:static!important;
    inset:auto!important; order:20; width:100%!important; aspect-ratio:16/9;
    flex:none; margin:28px 0 0!important; border-radius:12px;
    background-image:inherit!important; background-size:cover!important;
    background-position:center!important; background-repeat:no-repeat!important;
    opacity:1!important; transform:none!important; pointer-events:none;
  }
  :is(.strong-service,.customer-final,.brands-identity,.brands-final,
      .social-content,.social-final,.about-philosophy,.about-knowledge,
      .about-final,.career-final) > * {
    position:relative; z-index:1; width:100%!important; max-width:none!important;
    margin-left:0!important; margin-right:0!important;
  }
  :is(.strong-service,.customer-final,.brands-identity,.brands-final,
      .social-content,.social-final,.about-philosophy,.about-knowledge,
      .about-final,.career-final) :is(p,li) { color:#44515d!important; }
  :is(.strong-service,.customer-final,.brands-identity,.brands-final,
      .social-content,.social-final,.about-philosophy,.about-knowledge,
      .about-final,.career-final) .eyebrow { color:#d72940!important; }

  /* Gemeinsame Inhaltsabstände und lesbare Karten. */
  .invicta-builder-design > section:not([class*="hero"]) { padding:38px 20px!important; }
  :is(.section-heading,.hosting-plans>header,.marketing-services>header,
      .seo-services>header,.customer-services>header) { margin-inline:0!important; }
  :is(.section-heading,.contact) { display:block!important; }
  .section-heading>p { width:100%!important; margin-top:16px!important; font-size:16px!important; }
  :is(.service-grid,.plan-grid,.marketing-card-grid,.marketing-benefit-grid,
      .seo-why-grid,.seo-result-grid,.customer-card-grid,.customer-step-grid,
      .webdesign-facet-grid,.webdesign-process-grid,.programming-service-grid,
      .programming-process-grid,.brands-benefits,.social-service-grid,
      .about-values,.references-project-grid,.career-job-grid,.career-perks-grid,
      .benefit-grid,.adv-grid,.card-grid,.number-grid,.steps-grid,.system-grid,
      .integration-grid) { gap:20px!important; }
  :is(.service-grid,.marketing-card-grid,.customer-card-grid,.webdesign-facet-grid,
      .programming-service-grid,.social-service-grid,.references-project-grid,
      .career-job-grid) article { min-width:0; border-radius:12px; overflow:hidden; }
  :is(.service-grid,.marketing-card-grid,.customer-card-grid,.webdesign-facet-grid,
      .programming-service-grid,.social-service-grid) p { font-size:16px!important; line-height:1.55!important; }
  .picture img { max-width:100%; }

  /* Startseite */
  .home-page .service-grid .picture { aspect-ratio:16/9; border:0; background:#fff; }
  .home-page .service-grid .picture img { width:100%;height:100%;object-fit:contain; }
  .home-page .card-copy { padding:16px 18px 20px; }
  .home-page .card-copy a { min-height:44px; align-items:center; font-size:15px; }
  .home-page .projects { display:grid!important; grid-template-columns:1fr!important; gap:24px!important; }
  .home-page .project-grid { grid-template-columns:1fr!important; gap:20px!important; }
  .home-page .project-grid article { display:block!important; }
  .home-page .project-grid .picture { aspect-ratio:16/10; }
  .home-page .project-grid .picture img { object-fit:contain; }
  .home-page .project-grid article>div+div { padding:18px; }
  .home-page .stats { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:28px 20px!important; }
  .home-page .stats p { font-size:14px!important; }
  .home-page .process { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:28px!important; }
  .home-page .process>div:first-child { grid-column:1/-1; }
  .home-page .process article p { font-size:16px!important; }
  .home-page .contact { position:relative; isolation:isolate; }
  .home-page .contact::before { content:''; position:absolute; inset:0; z-index:-1; background:rgba(247,249,251,.94); }

  /* Referenzen, Kontakt, Rechtstexte und Konfigurator. */
  .references-filters { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
  .references-filters span { flex:0 0 auto; }
  .references-project-grid article { display:block!important; min-height:0!important; }
  .references-project-grid .reference-copy { width:100%!important; min-height:310px; padding:24px 20px!important; }
  .contact-page { padding-inline:20px!important; }
  .contact-shell { grid-template-columns:1fr!important; gap:24px!important; }
  .contact-fields,.career-application-grid { grid-template-columns:1fr!important; }
  .contact-form label,.contact-form p,.contact-info p { font-size:14px!important; line-height:1.55; }
  .contact-form .contact-privacy,.contact-form .contact-privacy a { font-size:12px!important; }
  :is(.imprint-page,.privacy-page,.agb-page) { padding:36px 20px!important; }
  :is(.imprint-page,.privacy-page,.agb-page) :is(p,li,a) { font-size:15px; line-height:1.65; }
  .cfg-progress { max-width:100%; overflow-x:auto!important; overscroll-behavior-inline:contain; }
  .cfg-progress-track { width:max-content; min-width:100%; }
  .cfg-layout,.cfg-form-grid { grid-template-columns:1fr!important; }
  .cfg-option p,.cfg-summary,.cfg-trust { font-size:14px!important; }
  .cfg-option-media { height:auto!important; aspect-ratio:3/1; }
  .cfg-option-media img { object-fit:contain!important; }

  /* Gemeinsamer Footer */
  .footer { padding:36px 20px 82px!important; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:28px 18px!important; font-size:14px!important; }
  .footer-grid>div:first-child,.footer-grid>div:last-child { grid-column:1/-1; }
  .footer-grid a:not(.logo) { min-height:40px; padding-block:8px; overflow-wrap:anywhere; }
  .footer-grid p { font-size:14px!important; overflow-wrap:anywhere; }
  .legal { flex-direction:column!important; font-size:12px!important; line-height:1.6; }
}

@media (max-width:480px) {
  main .actions { flex-direction:column; }
  main .actions .button { width:100%; justify-content:center; }
  :is(.service-grid,.plan-grid,.marketing-card-grid,.marketing-benefit-grid,
      .seo-why-grid,.seo-result-grid,.customer-card-grid,.customer-step-grid,
      .webdesign-facet-grid,.webdesign-process-grid,.programming-service-grid,
      .programming-process-grid,.brands-benefits,.social-service-grid,
      .about-values,.career-job-grid,.career-perks-grid,.benefit-grid,.adv-grid,
      .card-grid,.number-grid,.steps-grid,.system-grid,.integration-grid) {
    grid-template-columns:1fr!important;
  }
  .home-page .stats,.home-page .process { grid-template-columns:1fr!important; }
  .footer-grid { grid-template-columns:1fr!important; }
  .footer-grid>div { grid-column:auto!important; }
}