/* ================================================================
   MOBILE-FIXES V2 — 2026-05-12
   Behebt: Touch-Targets <44px, Schrift <14px, Honeypot sichtbar,
   bundle-rechner Kontrast (weiß/weiß), iOS-Zoom, Range-Slider,
   Cookie-Banner-Buttons, Phone/WhatsApp Mini-FABs, Senior-Fonts.
   Specificity: bewusst hoch (html body…) und !important wo Inline-Styles
   überschrieben werden müssen. Lädt NACH allen anderen Mobile-CSS.
   ================================================================ */

/* ───────────────────────────────────────────────────────────────
   1. HONEYPOT — input[name="website"] global off-screen verstecken
   Spam-Schutz: NICHT type=hidden (defeats Honeypot) sondern visuell weg.
   Audit fand 7 Seiten mit sichtbarem 28-30px Honeypot.
   ─────────────────────────────────────────────────────────────── */
input[name="website"],
.hp-label,
.hp-field,
label.hp-label,
form label[aria-hidden="true"]:has(input[name="website"]) {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

/* ───────────────────────────────────────────────────────────────
   2. iOS-INPUT-ZOOM-FIX — global, alle interaktiven Felder ≥16px
   Verhindert Auto-Zoom auf iOS Safari beim Fokus eines Inputs.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([name="website"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   3. RANGE-SLIDER — min-height 44px, größerer Thumb (Daumen-tauglich)
   Audit: dach-analyse hatte input[type=range] mit 6px Höhe (unbedienbar).
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (hover: none),
       (max-width: 1024px) and (pointer: coarse) {
  input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 44px !important;
    height: 44px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 12px 0 !important;
    cursor: pointer !important;
    touch-action: pan-x !important;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.85), rgba(56, 189, 248, 0.55));
  }
  input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.85), rgba(56, 189, 248, 0.55));
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #00D4FF;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    cursor: grab;
    margin-top: -12px; /* (track 8 - thumb 32) / 2 */
  }
  input[type="range"]::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #00D4FF;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    cursor: grab;
  }
  input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); }
  input[type="range"]:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.08); }
  input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.3), 0 4px 12px rgba(0, 212, 255, 0.5);
  }
}

/* ───────────────────────────────────────────────────────────────
   4. CHECKBOXES / RADIOS — 44x44 Touch-Area via Padding-Wrapper
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (hover: none),
       (max-width: 1024px) and (pointer: coarse) {
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 22px !important;
    min-height: 22px !important;
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: #00D4FF;
  }
  /* Label das Input enthält → 44x44 Hit-Area */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 10px 4px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   5. TOUCH-TARGETS ≥44x44 — Footer-Links, Top-Bar, Phone-Mini, Nav
   Audit fand 6-28 zu kleine Touch-Targets pro Top-Seite.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Footer-Links (audit: index 20-27px Höhe, alle anderen 25-32px) */
  html body footer a,
  html body .site-footer a,
  html body .footer a,
  html body .footer-links a,
  html body .footer-bottom a,
  html body .footer-legal a {
    min-height: 44px !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 8px !important;
    touch-action: manipulation !important;
  }
  /* Top-Bar CTA (Audit: foerderung "Jetzt sichern" 114x28) */
  html body .stb-bar,
  html body .stb-inner,
  html body .stb-cta,
  html body .stb-bar a,
  html body .stb-bar button,
  html body .promo-banner a,
  html body .announcement-bar a,
  html body .sticky-top-bar a {
    min-height: 44px !important;
  }
  html body .stb-cta,
  html body a.stb-cta {
    min-height: 44px !important;
    padding: 10px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Phone/WhatsApp Mini-Buttons in Top-Nav */
  html body .phone-mini,
  html body .wa-mini,
  html body .topbar .phone,
  html body .topbar .wa,
  html body .topbar a,
  html body a.phone-link,
  html body a.whatsapp-link,
  html body a.nav-phone,
  html body a.nav-whatsapp {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  /* Nav-Links (Audit: nav-cta 12.2px height teils <44) */
  html body .nav a,
  html body .nav-cta,
  html body a.nav-cta,
  html body .nav-links a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
  }
  /* Mobile Menu Toggle */
  html body .nav-burger,
  html body .menu-toggle,
  html body .burger,
  html body button[aria-label*="enü" i],
  html body button[aria-label*="enu" i] {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 12px !important;
  }
  /* Alle Buttons / CTAs / generic */
  html body button:not([hidden]):not([disabled]),
  html body .btn,
  html body .button,
  html body .cta,
  html body [role="button"],
  html body input[type="submit"],
  html body input[type="button"],
  html body input[type="reset"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  /* Datenschutz/Widerruf/AGB-Links im Footer mit Höhe 20-27 */
  html body a[href*="datenschutz"],
  html body a[href*="widerruf"],
  html body a[href*="impressum"],
  html body a[href*="agb"],
  html body a[href*="account-deletion"],
  html body a[href*="konto"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 8px !important;
  }
  /* Float-Action-Buttons (Audit: Anrufen 44x40, 💬 44x40 → 56x56 FAB) */
  html body a.fab,
  html body a.fab-phone,
  html body a.fab-wa,
  html body .float-cta,
  html body .wa-float,
  html body .float-tel,
  html body button.float-cta {
    min-height: 56px !important;
    min-width: 56px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   6. FONT-SIZES — Mindestens 14px Body, 12px Disclaimer
   Audit: 47/50 Seiten hatten >5 Elemente <14px.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Body / Standard-Text → 16px */
  html body {
    font-size: 16px !important;
  }
  html body p,
  html body li,
  html body span:not([class*="icon"]):not([class*="emoji"]):not([class*="badge"]):not([class*="tag"]):not(.kf-bundle-card__check):not(.kf-bundle-card__icon),
  html body td,
  html body th,
  html body a,
  html body button,
  html body div:not([class*="icon"]):not([class*="emoji"]) {
    font-size: max(14px, 1em) !important;
  }
  /* nav-logo-sub aktuell 9.3px → 12px (oder ganz aus auf sehr kleinen Screens) */
  html body .nav-logo-sub {
    font-size: 12px !important;
    letter-spacing: 0.15em !important;
    font-weight: 600 !important;
  }
  /* Top-Bar / Sticky-Top-Bar (12.2-12.8px → 14px) */
  html body .stb-bar,
  html body .stb-inner,
  html body .stb-bar *,
  html body .stb-inner *,
  html body .stb-cta,
  html body a.stb-cta,
  html body .promo-banner,
  html body .announcement-bar {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  /* Section-Label (12.8px → 14px) */
  html body .section-label,
  html body .eyebrow,
  html body .label-eyebrow,
  html body div.section-label,
  html body span.section-label {
    font-size: 14px !important;
    letter-spacing: 0.14em !important;
  }
  /* Trust-Badge / CRO-Trust-Badge (11.7px → 14px) */
  html body .cro-trust-badge,
  html body .trust-badge,
  html body .trust-badge-strip,
  html body .trust-list {
    font-size: 14px !important;
  }
  /* SGB-Promo-Pill (12px → 14px) */
  html body .sgb-text,
  html body .sgb-cta,
  html body span.sgb-text,
  html body span.sgb-cta {
    font-size: 14px !important;
  }
  /* Hero-Badges (Audit: 12.2-13.3px → 14px) */
  html body .hero-badge,
  html body .hero .badge,
  html body [class*="hero-badge"] {
    font-size: 14px !important;
  }
  /* Glas/Glas-Pill (13.6px → 14px) */
  html body .glass,
  html body .glass-pill,
  html body span.glass {
    font-size: 14px !important;
  }
  /* Stat-Label / Result-Caption (13.3px → 14px) */
  html body .stat-label,
  html body .kf-result__caption,
  html body p.kf-result__caption,
  html body .kf-disclaimer {
    font-size: 14px !important;
  }
  /* Footer-Disclaimer (9.35px → 14px) */
  html body .footer-disclaimer,
  html body .footer-legal,
  html body .footer-bottom,
  html body .footer-bottom *,
  html body .footer .legal {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  /* Cookie-Consent-Banner (cc-text, cc-btn 12-13px) */
  html body .cc-text,
  html body .cc-banner,
  html body #cookieBanner,
  html body .cookie-banner p,
  html body .cookie-banner span {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  html body .cc-btn,
  html body button.cc-btn,
  html body .cookie-banner button {
    font-size: 14px !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
  /* Scroll-Hint, SMH-Scroll (10.5-11.1px → 12px) */
  html body .smh-scroll-hint,
  html body .scroll-hint,
  html body p.scroll-hint {
    font-size: 12px !important;
  }
  /* Nav-Logo-Text (13.9px → 14px) */
  html body .nav-logo-text,
  html body span.nav-logo-text {
    font-size: 14px !important;
  }
}

/* Auf sehr kleinen Screens (≤360px) nav-logo-sub komplett ausblenden */
@media (max-width: 360px) {
  html body .nav-logo-sub {
    display: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   7. WCAG-AA-KONTRAST — bundle-rechner section-light Fix
   Inline color:#fff auf cream-Hintergrund = WCAG-Fail.
   ─────────────────────────────────────────────────────────────── */
/* Bundle-Rechner: USP-Reihe in section-light → text dunkel */
.section-light[data-scope="light"] strong,
.section-light strong,
section.section-light strong,
section[data-scope="light"] strong,
section.section-light h1,
section.section-light h2,
section.section-light h3,
section.section-light h4,
section.section-light p {
  color: #0F172A !important;
}
.section-light[data-scope="light"] strong[style*="color:#fff"],
.section-light[data-scope="light"] strong[style*="color: #fff"],
section.section-light strong[style*="color:#fff"] {
  color: #0F172A !important;
}
.section-light[data-scope="light"] p[style*="rgba(232,240,248"],
.section-light[data-scope="light"] p[style*="rgba(232, 240, 248"],
section.section-light p[style*="rgba(232,240,248"] {
  color: #475569 !important;
}
/* Cards mit weißem Border + transparentem BG auf cream → dunkler Border + Card-BG */
.section-light[data-scope="light"] [style*="border:1px solid rgba(255,255,255"],
section.section-light [style*="border:1px solid rgba(255,255,255"] {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

/* Fallback: alle cream-Backgrounds → dunkler Text */
section[style*="#F4F1EB"] h1,
section[style*="#F4F1EB"] h2,
section[style*="#F4F1EB"] h3,
section[style*="#F4F1EB"] p,
section[style*="#F5F1E8"] h1,
section[style*="#F5F1E8"] h2,
section[style*="#F5F1E8"] h3,
section[style*="#F5F1E8"] p,
section[style*="background:#FAF8F4"] h3,
section[style*="background:#FAF8F4"] p {
  color: #0F172A !important;
}

/* Text-secondary auf cream/light Section → mittel-grau statt halb-transparent-weiß */
section.section-light .text-secondary,
section.section-light .text-muted,
section[data-scope="light"] .text-secondary,
section[data-scope="light"] .text-muted {
  color: #475569 !important;
}

/* ───────────────────────────────────────────────────────────────
   8. CONTRAST — generische Min-Anforderungen für sekundären Text
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Auf dunklem Hintergrund: rgba weiß 0.5x → 0.78x mindestens */
  html body [style*="rgba(232,244,255,0.4"],
  html body [style*="rgba(232,244,255,0.5"],
  html body [style*="rgba(232,244,255,0.55"],
  html body [style*="rgba(232,244,255,0.6"],
  html body [style*="rgba(232,240,248,0.55"],
  html body [style*="rgba(232,240,248,0.6"] {
    color: rgba(232, 244, 255, 0.85) !important;
  }
  html body [style*="rgba(255,255,255,0.5"],
  html body [style*="rgba(255,255,255,0.55"],
  html body [style*="rgba(255,255,255,0.6"] {
    color: rgba(255, 255, 255, 0.82) !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   9. STICKY MOBILE CTA — Polish, Auto-Show nach Scroll
   Existiert via JS (sticky-mobile-cta.js). Hier nur Refinements.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #autark-sticky-mobile {
    max-height: 68px !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(120%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  html.asm-visible #autark-sticky-mobile,
  body.asm-visible #autark-sticky-mobile,
  #autark-sticky-mobile.is-visible {
    transform: translateY(0);
  }
  /* Fallback: ohne JS-Klasse trotzdem sichtbar */
  @supports not selector(:has(*)) {
    #autark-sticky-mobile { transform: translateY(0); }
  }
  /* Sicherstellen dass die CTAs ≥44px sind */
  #autark-sticky-mobile .asm-cta {
    min-height: 44px !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
  }
  #autark-sticky-mobile .asm-tel {
    min-height: 48px !important;
    min-width: 48px !important;
  }
}

/* Falls JS noch nicht den :has-Selektor genutzt hat: */
@media (max-width: 768px) {
  body:not(.no-sticky-cta) #autark-sticky-mobile {
    transform: translateY(0);
  }
}

/* ───────────────────────────────────────────────────────────────
   10. FORM-FIELDS Mindesthöhe 48px (dach-analyse 6px Bug)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([name="website"]),
  html body select,
  html body textarea {
    min-height: 48px !important;
    padding: 12px 14px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }
  html body textarea {
    min-height: 96px !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   11. FAQ / Details-Summary — Custom-Caret-Padding
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html body details summary,
  html body .faq summary,
  html body .accordion-header,
  html body .accordion-trigger {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   12. Tabular-Nums für Preise (Premium-Touch)
   ─────────────────────────────────────────────────────────────── */
.kf-result__big,
.kf-bundle-card__price,
.price,
.metric,
[data-tabular] {
  font-variant-numeric: tabular-nums !important;
}

/* ───────────────────────────────────────────────────────────────
   13. Focus-Visible Outline für Tastatur-Nutzer
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html body *:focus-visible {
    outline: 2px solid #00D4FF !important;
    outline-offset: 2px !important;
    border-radius: 6px !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   14. Tablet-Range (769-1024px) — defensive Mindesthöhen
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  html body a.btn,
  html body button,
  html body .cta {
    min-height: 44px !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   15. Sticky-CTA mit Footer ausblenden (Cleanup)
   ─────────────────────────────────────────────────────────────── */
html.footer-visible #autark-sticky-mobile {
  transform: translateY(120%) !important;
  pointer-events: none !important;
}
html.cc-banner-active #autark-sticky-mobile,
html.cc-banner-active #autark-tel-banner-mobile {
  display: none !important;
}

/* ── END mobile-fixes-v2.css ── */