/* ============================================================
   Universelle Mobile/Tablet-Optimierungen – GPS-Ortung24
   Wird in jeder Seite nach den eigenen Styles geladen.
   ============================================================ */

/* ---- Accessibility & Performance ---- */

/* Reduced-Motion-User komplett ruhigstellen */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* iOS-Tap-Highlight in Markenfarbe statt grau */
a,button,input[type=submit],input[type=button]{
  -webkit-tap-highlight-color:rgba(245,158,11,.18);
}

/* Verhindert das iOS-Auto-Zoom-In bei Input-Focus (font ≥16px nötig) */
@media(max-width:640px){
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea{font-size:16px !important}
}

/* ---- Performance auf Mobile ---- */

/* Schwere Blur-Orbs auf Mobile/Tablet abschalten (GPU-Schonung + Overflow-Schutz).
   Auf iPad-Portrait (≤900px) sind sie ohnehin oft fehl am Platz und verursachen
   horizontalen Overflow durch ihre negativen Offsets. */
@media(max-width:900px){
  .hero-orb,
  .hero-orb-1,
  .hero-orb-2,
  .tracker-halo{display:none !important}
}
@media(max-width:640px){
  body::after{opacity:.4}
}

/* ---- Touch-Targets vergrößern ---- */

/* Footer-Links: bessere Tap-Targets auf Mobile */
@media(max-width:640px){
  footer .footer-col a{padding:.55rem 0;font-size:.95rem}
  footer .footer-col .footer-col-title{margin-bottom:.6rem}
  .nav-toggle{min-width:44px;min-height:44px}
  .faq-btn{min-height:52px}
}

/* ---- Formulare ---- */

/* Form-Rows früher einspaltig (statt erst bei 480px) */
@media(max-width:600px){
  .cf-row,
  .form-row{grid-template-columns:1fr !important;gap:.85rem !important}
}

/* ---- Footer für sehr kleine Phones ---- */

/* Footer einspaltig auf sehr kleinen Geräten (≤ 420px) */
@media(max-width:420px){
  footer .footer-grid{grid-template-columns:1fr !important;gap:1.6rem !important}
  footer .container{padding:0 1.1rem}
}

/* ---- Allgemeine Section-Padding-Reduktion ---- */

/* Reduziert übertriebene Section-Paddings auf Mobile.
   Greift universell - falls Seiten bewusst andere Werte brauchen,
   können sie ihn mit eigenem MQ überschreiben. */
/* Hero-Padding: nutzt :where() (0 Spezifität) damit jede Seiten-spezifische
   .hero{padding:...}-Regel immer Vorrang hat. Greift nur, wenn die Seite
   selbst keinen eigenen Mobile-Hero-Padding gesetzt hat. */
@media(max-width:640px){
  :where(.hero,.sw-hero,.about-hero,.hero-compact,.page-hero){
    padding-top:3rem;padding-bottom:2rem;min-height:auto
  }
}

/* Section-Paddings: ebenfalls 0-Spezifität via :where(). Sicheres Fallback
   für Sektionen ohne eigene Mobile-Regeln. */
@media(max-width:900px){
  :where(.section,.solutions,.cta,.compare,.warum,.praxis,.premium,
  .modelle,.usecases-section,.faq-section,.partner-section,
  .cta-banner,.trust-bar,.sw-walk,.sw-showcase,.matrix,
  .trust-sec,.platforms,.sw-cta,.story-section,.facts-section,
  .values-section,.order,.faq,.flow,.why,.showcase,.testimonials,
  .steps-section){
    padding-top:4rem;padding-bottom:4rem
  }
}
@media(max-width:640px){
  :where(.section,.solutions,.cta,.compare,.warum,.praxis,.premium,
  .modelle,.usecases-section,.faq-section,.partner-section,
  .cta-banner,.trust-bar,.sw-walk,.sw-showcase,.matrix,
  .trust-sec,.platforms,.sw-cta,.story-section,.facts-section,
  .values-section,.order,.faq,.flow,.why,.showcase,.testimonials,
  .steps-section){
    padding-top:3rem;padding-bottom:3rem
  }
  :where(.hero p,.hero-sub,.sw-hero p,.about-hero-sub,.hero-compact-sub,
  .page-hero-sub){font-size:.98rem;line-height:1.5}
}

/* Tablet-Verbesserung: 3-spaltige Grids bekommen 2-Spalten als Zwischenstufe */
@media(max-width:900px){
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid > *:last-child:nth-child(2n+1){
    grid-column:1/-1;max-width:calc(50% - .7rem);margin:0 auto
  }
}
@media(max-width:640px){
  .values-grid{grid-template-columns:1fr}
  .values-grid > *:last-child:nth-child(2n+1){max-width:none;grid-column:auto}
  /* Facts-Grid früher 1-spaltig (statt erst bei 480px) */
  .facts-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .facts-grid{grid-template-columns:1fr}
}

/* ---- Bilder & Overflow-Schutz ---- */

/* Verhindert horizontalen Scroll durch zu breite Inline-Elemente.
   SVG wird ABSICHTLICH ausgespart, da viele Icons feste width/height haben. */
img,video{max-width:100%;height:auto}
@media(max-width:640px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* HARTER Overflow-Schutz: html+body dürfen NIE horizontal scrollen.
   overflow:clip ist stärker als overflow:hidden (kein neuer Scroll-Container,
   keine Positioning-Auswirkung, einfach knallhartes Clipping).
   Fallback overflow-x:hidden für ältere Browser. */
html,body{overflow-x:hidden}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}

/* Wichtige Container mit absolut positionierten Kindern (Orbs, Halos, Marquees)
   MÜSSEN clippen, sonst leakt der inner content trotz body-overflow-x:clip. */
@media(max-width:1024px){
  .hero,.sw-hero,.about-hero,.hero-compact,.page-hero,
  .showcase,.showcase-visual,.hero-right,.tracker-stage,
  .marquee,.usecases-section,.modelle,
  .partner-section,.cta-banner,.warum{overflow:hidden}
}

/* ---- Tab-Buttons (software.html) ---- */
/* Auf Mobile/Tablet schmaler, damit Tablist nicht überläuft (auch wenn
   .tablist {overflow-x:auto} hat - schöner ohne Scrollbar). */
@media(max-width:900px){
  .tablist .tab{min-width:auto !important;padding:.7rem .8rem !important;font-size:.78rem}
  .tablist .tab .tab-num{font-size:.6rem}
  .tablist .tab .tab-name{font-size:.78rem}
}
@media(max-width:640px){
  .tablist{gap:.25rem;padding:.3rem}
  .tablist .tab{padding:.55rem .55rem !important;font-size:.7rem;gap:.15rem}
  .tablist .tab .tab-num{font-size:.55rem;display:none}
  .tablist .tab .tab-name{font-size:.7rem}
}

/* ---- Minimale Textgrößen ---- */
/* Verhindert Schriften unter 11px auf Mobile/Tablet (Lesbarkeit + a11y).
   .72rem = 11.52px. Greift bis 1024px (Tablet inklusive). */
@media(max-width:1024px){
  /* Klassische Tags/Labels/Kicker (alle mono-Font, oft sehr klein) */
  .uc-tag,.sol-tag,.tracker-tag,.order-head-kicker,.side-cta-eyebrow,
  .modell-kicker,.hero-stat-lbl,.panel-thumb-cap,.platform-meta span,
  .tracker-hint,.tb-foot,.trust-item em,.eyebrow,.cf-note,.cart-legal,
  .footer-bottom,.fact-todo,.praxis-stat-todo,.sw-tag,
  .price-tag,.testi-meta em,.spec-card em,.flow-step-time,
  .tab-num,.tab-name,.bm-url,.badge,.badge-free,.badge-pro,
  .badge-premium,.cart-tax-row-label,.sound-toggle,.hero-badge,
  .hero-compact-badge,.page-hero-badge,.cinema-sound,.usecase-branche,
  .co-eyebrow,.cmp-group,.cinema-chip,.spec-dot+span,
  .nav-cta,.tracker-meta,.sw-card .sw-tag,.matrix-th-basic,
  .matrix-th-pro,.matrix-th-premium,.order-table .pt-hint,
  .modell-price span,.contact-form label,.usecase-chip,
  .browser-status,.partner-logo-sub,.spec-card,.gen-status,
  .premium-tags span,.specs-hl strong,.modell-specs li,
  .price-features li,.timeline-year,.uc-tag,.matrix-row .lbl small,
  .order-table thead th,.order-table thead th span,.matrix-row .val.partial,
  .cmp-head-feature,.cmp-head-plan small,.matrix-table tbody td:first-child small,
  .matrix-table thead th,.matrix-text,.co-summary-price small,
  .co-consent,.co-error,.flow-step-time,.testi-meta em{
    font-size:.72rem !important;letter-spacing:.05em
  }
  /* Universelle Regel: Mono-Font-Spans dürfen nicht unter 11px */
  span[class*="kicker"],span[class*="-tag"],span[class*="-lbl"],
  span[class*="-meta"],span[class*="-time"],
  div[class*="kicker"],div[class*="-lbl"],div[class*="-time"]{
    font-size:.72rem !important
  }
  /* Software-Panel-Mini-Pills (MapLibre, PDF+Excel, etc.) */
  .panel-mini span{font-size:.72rem !important}
}

/* ---- Tap-Targets ---- */
/* Mindest-Tap-Größe für a11y: 32px Höhe minimum auf Mobile.
   WCAG 2.5.5 empfiehlt 44×44, aber 32px ist akzeptabler Mittelweg. */
@media(max-width:640px){
  .sol-link,.testi-link,.flow-step-link,
  .hero-story,.modell-cta{min-height:32px;padding-top:.45rem;padding-bottom:.45rem}
  .sol-link{padding:.4rem .2rem}
  .partner-link{min-height:32px;padding:.4rem 0}
  /* Sound-Toggle in Tracker-Phone-Mockup: kompensiert die transform:scale(.78)
     des umgebenden .phone-Wrappers, damit das visuelle Tap-Target ≥ 44px bleibt. */
  .sound-toggle,.cinema-sound{
    height:56px !important;min-width:90px !important;
    padding:0 1.3rem !important;
    font-size:.85rem !important;
    line-height:56px !important
  }
  .sound-toggle svg,.cinema-sound svg{vertical-align:middle}
}
/* Bei ≤480px scale(.7) → noch größer machen, damit visuell ≥44px */
@media(max-width:480px){
  .sound-toggle,.cinema-sound{
    height:64px !important;font-size:.95rem !important;line-height:64px !important
  }
}
@media(max-width:640px){
  /* leerer Block, schließt das offene MQ unten - bewusst */
  /* Cookie-Banner Links auch tap-bar */
  .go24-cb a{padding:.5rem .25rem;display:inline-block}
  /* Footer-Links bekommen ohnehin Padding via .footer .footer-col a */
}

/* ---- Software-Panel-Bilder ---- */
/* .bm Browser-Mockups dürfen nicht überlaufen */
@media(max-width:1024px){
  .panel-shot,.panel-shot .bm,.bm-img,.panel-text{
    max-width:100% !important;
    overflow:hidden
  }
  .panel-grid{padding:0 .5rem}
}

/* ---- Hero-Buttons-Verhalten ---- */

/* Hero-Action-Buttons auf Mobile vollbreit wrappen */
@media(max-width:640px){
  .hero-actions .btn,
  .cta-banner-actions .btn{flex:1 1 200px;justify-content:center}
}

/* ---- Modal-Verbesserungen ---- */

/* Kontakt-Modal auf Mobile mit besserer Höhen-Nutzung */
@media(max-width:640px){
  .contact-modal-content{margin:1rem auto !important;padding:2rem 1.4rem 1.6rem !important;width:calc(100% - 1.4rem) !important}
  .contact-modal-head h3{font-size:1.35rem !important}
}

/* ---- Typografie-Komfort ---- */

/* Bessere Lesbarkeit auf Mobile: Zeilenabstand und Wortumbruch */
body{text-rendering:optimizeLegibility}
@media(max-width:640px){
  p,li{hyphens:auto;-webkit-hyphens:auto;word-break:break-word}
  h1,h2,h3{hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word}
}