/* site-fixes.css – technical layout, responsiveness and accessibility fixes (2026-10-20).
   Loaded after layout-overrides.css on every page. No content changes. */

/* ---------- Accessibility: visible keyboard focus ---------- */
html body a:focus-visible,
html body button:focus-visible,
html body select:focus-visible,
html body input:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible,
html body [tabindex]:focus-visible {
  outline: 2px solid #ff5a00 !important;
  outline-offset: 3px !important;
}
html body .contact a:focus-visible,
html body .contact button:focus-visible,
html body .contact input:focus-visible,
html body .contact textarea:focus-visible,
html body .cta a:focus-visible {
  outline-color: #111 !important;
}

/* ---------- Respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Media never wider than its container ---------- */
html body img,
html body video { max-width: 100%; }

/* ---------- Tablet / iPad portrait (761–1100px): compact header with menu button ----------
   The full desktop navigation does not fit below ~1100px: links wrapped and the
   DE/EN switch was pushed outside the viewport. */
@media (min-width: 761px) and (max-width: 1100px) {
  html body .header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    grid-template-columns: none !important;
    height: 84px !important;
    min-height: 84px !important;
  }
  html body .header .wordmark { margin-right: auto !important; }
  html body .header .language-switch {
    order: 3 !important;
    margin: 0 !important;
    justify-self: auto !important;
  }
  html body .header .menu-toggle {
    order: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
  }
  html body .header .menu-toggle i {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    border-radius: 2px;
    background: #111 !important;
  }
  html body .header .nav:not(#_x) {
    display: none !important;
    position: absolute !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    justify-self: stretch !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 8px 28px 14px !important;
    background: #faf9f6 !important;
    border: 1px solid rgba(17, 17, 16, .10) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 44px rgba(17, 17, 16, .12) !important;
  }
  html body .header .nav.is-open:not(#_x) { display: flex !important; }
  html body .header .nav > a,
  html body .header .nav a {
    display: block !important;
    padding: 16px 0 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(17, 17, 16, .10);
  }
  html body .header .nav > a:last-child { border-bottom: 0; }
}

/* ---------- Footer: tablet (761–1100px) – wrap instead of overflowing ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  html body .site-footer.site-footer .site-footer-mid {
    flex-wrap: wrap !important;
    row-gap: 22px !important;
  }
  html body .site-footer-bottom {
    flex-wrap: wrap !important;
    row-gap: 18px !important;
  }
  html body .site-footer-brand { gap: 24px !important; }
  html body .site-footer-right { width: auto !important; margin-left: auto !important; }
  html body .site-footer-bottom nav {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 10px 18px !important;
  }
}
/* Payment badges: never break the label onto two lines */
html body .payment-icons > span { white-space: nowrap !important; }

/* ---------- Contact section on tablets (761–1100px): stack text and form, no overflowing columns ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  html body section.contact.section-pad:not(#_x) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 36px !important;
  }
  html body section.contact.section-pad > div:not(#_x),
  html body section.contact.section-pad > form.project-form:not(#_x) {
    width: 100% !important;
    max-width: none !important;
  }
  html body section.contact .project-form:not(#_x) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body section.contact .project-form > label:not(#_x) { width: auto !important; min-width: 0 !important; }
}

/* ---------- Large screens (≥1800px): keep the hero aligned with the header width ---------- */
@media (min-width: 1800px) {
  html body .hero:not(.wrap) {
    padding-left: max(84px, calc(50vw - 840px)) !important;
    padding-right: max(84px, calc(50vw - 840px)) !important;
  }
}

/* ---------- Mobile (≤760px): touch targets and minimum readable sizes ---------- */
@media (max-width: 760px) {
  /* Language switch & logo: at least 44px tall touch area */
  html body .language-switch button:not(#_x):not(#_y),
  html body .language-switch-injected button:not(#_x):not(#_y) {
    min-width: 36px !important;
    min-height: 44px !important;
  }
  html body .header .wordmark:not(#_x):not(#_y) { min-height: 44px !important; align-items: center !important; }

  /* Form fields: 44px touch height */
  html body .project-form input:not([type=hidden]):not([type=checkbox]):not(#_x):not(#_y),
  html body .project-form select:not(#_x):not(#_y) { min-height: 44px !important; }

  /* Footer legal links: wrap with comfortable touch height instead of 10px single line */
  html body .site-footer-right:not(#_x):not(#_y) { overflow-x: visible !important; }
  html body .site-footer-bottom nav:not(#_x):not(#_y) {
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 0 18px !important;
    font-size: 12px !important;
  }
  html body .site-footer-bottom nav > *:not(#_x):not(#_y) {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
  }
  html body .site-footer-logo:not(#_x):not(#_y) { min-height: 40px !important; align-items: center !important; }

  /* Minimum font sizes (previously 8–10px) */
  html body .hero-copy .button:not(#_x):not(#_y),
  html body .price-partners .button:not(#_x):not(#_y),
  html body section.cta a:not(#_x):not(#_y) { font-size: 12px !important; }
  html body .price-tag:not(#_x):not(#_y),
  html body .steps article > span:not(#_x):not(#_y),
  html body .eyebrow:not(#_x):not(#_y),
  html body .section-side:not(#_x):not(#_y),
  html body .group-count:not(#_x):not(#_y),
  html body .site-footer-brand > span:not(#_x):not(#_y) { font-size: 11px !important; }
  html body .card-body > span:not(#_x):not(#_y),
  html body figure > figcaption > span:not(#_x):not(#_y) { font-size: 10.5px !important; }
  html body .hero-note:not(#_x):not(#_y),
  html body .hero-note a:not(#_x):not(#_y) { font-size: 12px !important; line-height: 1.5 !important; }
  html body .project-form label:not(#_x):not(#_y) { font-size: 11.5px !important; }
  html body .project-form small:not(#_x):not(#_y) { font-size: 11.5px !important; }
  html body .lang-switch a:not(#_x):not(#_y) { font-size: 12px !important; display: inline-block; padding: 10px 0; }
  html body a.back:not(#_x):not(#_y) { display: inline-block; padding: 12px 0; }
}

/* ---------- Desktop: larger click area for the DE/EN switch without visual change ---------- */
@media (min-width: 761px) {
  html body .header .language-switch button:not(#_x):not(#_y) { padding: 10px 4px !important; margin: -8px 0 !important; }
}

/* ---------- preise.html: heading hierarchy fix (H1 -> H3 skip) -----------
   The three intro price cards were <h3> directly under the page's only <h1>,
   with no <h2> in between. They are now <h2> in the HTML; these rules
   reproduce the exact previous h3 styling so nothing looks different. */
html body .price-card h2:not(#_x):not(#_y) { font: 500 33px var(--display); margin: 38px 0 8px; }
@media (max-width: 760px) {
  html body .price-card h2:not(#_x):not(#_y) { margin: 28px 0 8px; }
  html body .pricing-page .price-card h2:not(#_x):not(#_y) { font-size: 30px !important; margin-top: 10px !important; }
}

/* ---------- Startseite: YouTube-Kanalzeile – Schrift rechts grösser ----------
   "VIRTUAL AI ADS" in derselben Grösse wie das "YouTube"-Wortzeichen (30px). */
html body .youtube-channel-copy strong:not(#_x):not(#_y) { font-size: 30px !important; line-height: 1 !important; }
html body .youtube-channel-copy span:not(#_x):not(#_y) { font-size: clamp(16px, 1.5vw, 21px) !important; margin-top: 8px !important; }