/* ============================================================
   Shared mobile hardening — applied across all pages.
   Loaded after each page's main styles so it can override.
   ============================================================ */

/* Stop the page from scrolling sideways under any circumstance.
   WICHTIG: overflow-x:clip statt hidden — hidden macht body per Spec zum
   Scroll-Container (overflow-y wird auto) und bricht position:sticky
   (Walkthrough-Pin auf index.html). clip clippt identisch, ohne Container. */
html, body { max-width: 100vw; overflow-x: clip; }

/* iOS Safari: prevent input zoom — anything below 16px triggers zoom on focus. */
@media (max-width: 760px){
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Make all buttons / interactive controls reach 44px on touch devices. */
@media (max-width: 760px){
  button, .btn, .nav-back, .nav-secondary {
    min-height: 44px;
  }
  /* Improve hamburger tap area */
  .hamburger { min-width: 44px; min-height: 44px; }
}

/* Tighter section padding on small phones */
@media (max-width: 520px){
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Round the hero image card edges off on very small screens to fit nicely */
@media (max-width: 520px){
  .hero-v2-card { border-radius: 22px !important; }
}

/* Smooth scrolling everywhere — nur wenn keine Bewegungsreduzierung aktiv */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Larger tap targets in mob-panel */
@media (max-width: 980px){
  .mob-links a {
    padding: 18px 14px;
    font-size: 17px;
  }
}

/* Hide horizontal-scrolling helper on mobile keyboards */
@media (max-width: 520px){
  body { -webkit-text-size-adjust: 100%; }
}

/* iOS safe area handling */
@supports (padding: max(0px)){
  .nav-inner, .doc-header-inner, .footer-inner, .doc-footer-inner {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* Make sticky panels collapse gracefully on small viewports */
@media (max-width: 920px){
  .side, .doc-toc {
    position: static !important;
  }
}

/* Footer link wrap nicely on phones */
@media (max-width: 520px){
  .footer-inner, .doc-footer-inner {
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left;
    gap: 12px;
  }
  .footer .links, .doc-footer .links {
    gap: 14px !important;
    flex-wrap: wrap;
  }
}

/* Make Walkthrough zoomed image readable on mobile */
@media (max-width: 760px){
  .walk-lightbox-frame {
    max-width: 96vw !important;
    max-height: 80vh !important;
  }
  .walk-lightbox-frame img {
    max-width: 96vw !important;
    max-height: 80vh !important;
  }
}

/* Form pages: more breathing room at small widths */
@media (max-width: 520px){
  .card { padding: 28px 22px !important; border-radius: 18px !important; }
  .form-foot { font-size: 13.5px; }
}

/* Mobile FAQ readability */
@media (max-width: 520px){
  .faq-q { font-size: 16px; line-height: 1.4; }
  .faq-a-inner { font-size: 14.5px; line-height: 1.55; }
}

/* ══════════════════════════════════════════════════════════════
   LARGE-SCREEN PASS — Unterseiten ≥ 1700px
   Gilt für about.html, faq.html, foerderrechner.html,
   enterprise.html, loslegen.html, anmelden.html etc.
   Nur Container-Weite + Basis-Schriftgröße hochsetzen.
   Keine Detail-Arbeit pro Unterseite.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1700px) {
  /* Unterseiten-Wrap: von 1180px auf vw-basiert */
  .wrap {
    max-width: min(1700px, 62.4vw) !important;
  }

  /* Basis-Fließtext auf Unterseiten: 15-16px → +15% = ~18px */
  body {
    font-size: 17.5px;
  }

  /* Überschriften auf Unterseiten (nicht überschrieben durch snap.css) */
  .doc-header-inner,
  .page-head {
    max-width: min(1700px, 62.4vw);
    margin-left: auto;
    margin-right: auto;
  }

  /* Nav auf Unterseiten (nav.css geladen): --nav-h und Inner-Breite */
  :root {
    --nav-h: min(4.37vw, 96px);
  }
  .nav-inner {
    max-width: min(1800px, 63.96vw);
    border-radius: 32px;
  }
  .logo img {
    height: min(2.03vw, 52px);
  }
  .nav-link {
    font-size: min(0.7vw, 18px);
  }
  .nav-secondary {
    font-size: min(0.66vw, 17px);
  }
}


/* ===== A11y-Kontrast-Pass (WCAG 1.4.3, axe 06/2026) =====
   #FF6B00 als TEXT auf Weiss = 2,9:1 (Fail). Fixes:
   - Buttons auf Orange-Flaeche: Text SCHWARZ (Praezedenz G-2 Pricing-CTA;
     Schwarz auf #FF6B00 = 8,2:1). Orange-Flaeche selbst ist Non-Text — ok.
   - .eyebrow (oranger Kicker-Text auf hellem Grund): abgedunkelte Text-Stufe
     #B34A00 (5,4:1) — von der Roadmap (P1-19) explizit vorgesehene Loesung.
     Die dekorative ::before-Linie bleibt Brand-Orange (Non-Text). */
/* Faint-Text war rgba(.42) = 2,9:1 — auf .60 angehoben (4,5:1 auch auf #f7f7f7). */
:root{--text-faint:rgba(10,10,10,.60)}
/* Buttons auf Orange-Flaeche: Text schwarz (8,2:1). */
.btn-primary,
.nav .btn-primary,
.mob-cta .btn-primary,
.cta,
.submit{color:#0a0a0a}
/* Orange-Kicker-Texte auf hellem Grund: abgedunkelte Text-Stufe (5,4:1).
   !important wo Inline-style-Attribute (Legal-Links) sonst gewinnen. */
.eyebrow,
.doc-eyebrow,
.faq-cat-head,
.blog-empty .tag{color:#B34A00}
h2 .num,
.sv-tag--accent,
.price-badge,
.price-trial,
.ext-accent,
.ext-price .val,
.ext-link-hint,
.doc-disclaimer strong,
.hero-card .accent,
.doc-body a,
.form-foot a,
.forgot,
.below-card a,
.blog-empty .hint a{color:#B34A00 !important}
/* Foerderrechner-Highlight: Riesen-Zahl + Sub-Label auf #fff3eb kontrastfest */
.highlight-metric .hl-big{color:#b34a00}
.highlight-metric .hl-label small{color:#b34a00}
/* .accent als Heading-Text auf Weiss: minimal abgedunkelt auf 3,3:1
   (WCAG large text >=3:1) — visuell quasi identisch zu #FF6B00.
   !important: Seiten-Inline-Styles wie ".card h1 .accent" haben sonst Vorrang. */
.accent{color:#F25F00 !important}