/* =====================================================================
   LT Intelligence – Responsive Polish Layer
   ---------------------------------------------------------------------
   Loaded AFTER lt-intelligence.webflow.css so it overrides cleanly.
   Pure responsive corrections — no design / brand / color / font changes.
   Safe to delete the <link> and this file to fully revert.
   ===================================================================== */

/* ---------- 1. Defensive viewport reset (kills horizontal scroll) ---- */
html,
body {
  max-width: 100%;
  overflow-x: clip;            /* `clip` allows position:sticky inside; falls back to hidden in unsupported browsers */
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------- 2. Media elements never break their parent --------------- */
img,
video,
canvas,
iframe,
svg,
picture,
object,
embed {
  max-width: 100%;
}
img,
video {
  height: auto;
}
/* canvas keeps explicit aspect-ratio set by JS (flow_field), but never wider than viewport */
.lt-hero-canvas {
  max-width: 100%;
}

/* Iframes that are explicitly embedded full-width */
.lt-calendly-wrap iframe,
.lt-sv-mount iframe {
  width: 100% !important;
  max-width: 100%;
}

/* ---------- 3. Long words / emails / URLs wrap instead of overflow --- */
.lt-info-grid a,
.lt-info-grid p,
.lt-info-grid span,
.lt-sec-info a,
.lt-sec-info p,
.lt-feat-desc,
.lt-timeline-desc,
.lt-sec-sub,
.lt-pp-card p,
footer a,
footer p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =====================================================================
   4. Tablet navigation fix (768–991px)
   Currently the hamburger only appears at ≤767px, so tablets see a
   crowded 6-link nav + lang switcher + CTA. Switch to hamburger earlier.
   ===================================================================== */
@media (max-width: 991px) {
  .lt-hdr-desktop { display: none !important; }
  .lt-hdr-toggle  { display: inline-flex !important; }

  /* Shrink the navbar's own vertical padding so the logo gets the room it needs */
  .lt-nav-wrap {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Minimal navbar padding — logo sits close to the left edge */
  html body .lt-nav-wrap {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  html body .lt-nav-wrap .lt-hdr-bar {
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 56px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  html body .lt-hdr-toggle {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }
  html body .lt-hdr-toggle-bar {
    width: 16px !important;
  }

  /* Logo sized to roughly match the hamburger icon (38px) — aspect 4:1 so
     ~180px wide × 45px tall keeps proportional balance with the menu icon. */
  html body .lt-nav-wrap .lt-hdr-bar .lt-hdr-logo {
    display: block !important;
    width: 180px !important;
    max-width: 180px !important;
    min-width: 180px !important;
    height: auto !important;
    margin: 0 !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
  }
  html body .lt-hdr-logo .lt-hdr-logo-img,
  html body img.lt-hdr-logo-img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 1 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Drawer: pill matching the navbar, uniform 12px padding on all sides
     for a balanced/homogeneous look. */
  html body .lt-hdr-mobile {
    inset: 72px 12px 12px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px solid #4c6fff2e !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
    backdrop-filter: saturate(160%) blur(14px) !important;
    box-shadow: 0 18px 44px -20px #0a122638 !important;
  }
}

/* === Menu open: navbar adopts the drawer's exact appearance === */
.lt-nav-wrap.lt-nav-wrap-open {
  background-color: rgba(255, 255, 255, 0.96) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
  backdrop-filter: saturate(160%) blur(14px) !important;
  border: 1px solid #4c6fff2e !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px -20px #0a122638 !important;
}

/* Mobile drawer: prevent inner overflow, comfortable touch targets */
.lt-hdr-mobile {
  max-width: 100%;
}
.lt-hdr-mlink {
  min-height: 44px;            /* WCAG / Apple HIG touch target */
}

/* ---- Mobile drawer action order: language switcher goes to bottom -- */
.lt-hdr-mactions {
  display: flex;
  flex-direction: column;
}
.lt-hdr-mactions .lt-hdr-mlang {
  order: 99;                   /* push DE/FR/EN below Kontakt + Termin */
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #4c6fff1a;
}

/* Phone: same compact logo size, just tighter drawer inset */
@media (max-width: 479px) {
  html body .lt-nav-wrap .lt-hdr-bar .lt-hdr-logo {
    width: 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
  }
  html body .lt-nav-wrap .lt-hdr-bar {
    min-height: 50px !important;
  }
  /* Phone drawer: uniform 10px padding for balanced look */
  html body .lt-hdr-mobile {
    inset: 66px 12px 8px 12px !important;
    padding: 10px !important;
  }
  .lt-hdr-mlink {
    height: 46px;
    font-size: 15px;
  }
}

/* =====================================================================
  4b. iPad / desktop language switcher: anchor to viewport bottom-right
   cookie-banner.js injects a floating `.lt-lang-floating` pill (appended
   to <body>) that defaults to top:18px right:24px — it's NOT a child of
   `.lt-nav-wrap`, so position:fixed works fine against the viewport. We
   just need to flip top → bottom across all viewports ≥992px so it sits
   at the bottom-right corner where the user expects it.
   ===================================================================== */
@media (min-width: 992px) {
  .lt-lang-floating {
    top: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
  }
  /* Keep the desktop nav on a single row (no second row wrapping into the
     header). The inline-header `.lt-hdr-lang` itself is already hidden by
     cookie-banner.js — we don't fight that any more. */
  .lt-hdr-bar .lt-hdr-desktop {
    flex-wrap: nowrap !important;
  }

  /* Logo: base webflow CSS sets it to 251px × 166px which is too tall for
     the navbar on desktop + iPad-landscape. The native image aspect is
     ~2.67:1 (800×300), so use width + auto height to keep proportions. */
  html body .lt-hdr-logo-img,
  html body img.lt-hdr-logo-img {
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    aspect-ratio: 800 / 300 !important;
    object-fit: contain !important;
    margin-bottom: 0 !important;
  }
  html body .lt-hdr-logo {
    height: auto !important;
  }
}

/* Slightly larger logo on big desktop screens — still well under the 251px
   webflow default. */
@media (min-width: 1200px) {
  html body .lt-hdr-logo-img,
  html body img.lt-hdr-logo-img {
    width: 200px !important;
    max-width: 200px !important;
  }
}

/* =====================================================================
   5. ROI Calculator – collapse two-column grids on mobile
   The grids `lt-roi-grid` and `lt-roi-t2-grid` stay 1fr 1fr without a
   single-column fallback. On phones the right column overflows.
   ===================================================================== */
@media (max-width: 767px) {
  .lt-roi-grid,
  .lt-roi-t2-grid,
  .lt-roi-grid-1 {
    grid-template-columns: 1fr !important;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .lt-roi-main-num,
  .lt-roi-t2-num {
    font-size: 30px;             /* down from 36/40 — keeps proportion */
  }
  .lt-roi-main-pct,
  .lt-roi-t2-pct {
    font-size: 16px;
  }
  .lt-roi-field,
  .lt-roi-t2-box {
    padding: 16px;
  }
  .lt-sec-roi-wrap,
  .lt-roi-t2 {
    padding: 56px 0;             /* down from 80px */
  }
}

/* Touch targets for ROI step buttons (lti-{calls,conv,cval}-{minus,plus}) */
.lt-roi-btn,
[id$="-minus"],
[id$="-plus"] {
  min-width: 44px;
  min-height: 44px;
}

/* =====================================================================
   6. Calendly embed – responsive height
   The inline style sets min-height:780px which is too tall on phones
   (Calendly's own widget already handles internal scroll).
   ===================================================================== */
@media (max-width: 767px) {
  .lt-calendly-wrap[style*="min-height"],
  .lt-calendly-wrap {
    min-height: 1100px !important;   /* Calendly stacks its UI vertically on mobile */
  }
  .lt-calendly-wrap iframe {
    min-height: 1100px;
  }
}
@media (max-width: 479px) {
  .lt-calendly-wrap[style*="min-height"],
  .lt-calendly-wrap {
    min-height: 1180px !important;
    border-radius: 14px;
  }
}

/* =====================================================================
   7. Hero / above-the-fold tweaks
   Avoid sub-text and pill-row pushing horizontal scroll on small phones.
   ===================================================================== */
.lt-hero-inner {
  max-width: 100%;
}
.lt-cta-row,
.lt-trust-row,
.lt-cta-row-2,
.lt-stats-row {
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .lt-h1 {
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1.15;
  }
  .lt-sub {
    font-size: clamp(15px, 4.2vw, 18px);
  }
  .lt-cta-row .lt-btn,
  .lt-cta-row-2 .lt-btn {
    width: 100%;                 /* full-width buttons stack cleanly */
    justify-content: center;
  }
  .lt-trust-pill {
    font-size: 13px;
  }
}

/* =====================================================================
   8. Section spacing / container fluid padding
   Many `.lt-sec-*` use fixed paddings. Cap them with viewport-aware
   side padding so content never touches the edge on phones.
   ===================================================================== */
.lt-sec,
.lt-sec-inner,
.lt-hero-inner,
.lt-info-sec,
.lt-sec-feat,
.lt-sec-cta,
.lt-sec-faq,
.lt-sec-demo,
.lt-sec-pricing-hero,
.lt-sec-pricing-grid,
.lt-sec-pricing-compare,
.lt-sec-contact-hero,
.lt-sec-form,
.lt-sec-story,
.lt-sec-values,
.lt-sec-values-1,
.lt-sec-roi-wrap,
.lt-roi-t2,
.lt-sec-calc {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* On very wide viewports we still want centered content */
@media (min-width: 1200px) {
  .lt-sec,
  .lt-sec-inner,
  .lt-hero-inner,
  .lt-info-sec {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Ultra-wide screens (≥1800px): cap content widths so text stays readable */
@media (min-width: 1800px) {
  .lt-sec-inner,
  .lt-hero-inner {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =====================================================================
   9. Heading scale – fluid typography across breakpoints
   Keeps the same look on desktop, prevents oversized headings on mobile.
   ===================================================================== */
.lt-sec-h2 {
  font-size: clamp(24px, 4.2vw, 44px);
  line-height: 1.18;
}
.lt-pp-h1,
.lt-h1 {
  line-height: 1.1;
}
.lt-eyebrow,
.lt-badge {
  white-space: normal;          /* let long German labels wrap */
}

/* =====================================================================
  10. Feature/Info/Step grids – sane collapse on small viewports
   These grids use repeat(3, 1fr), repeat(4, 1fr), repeat(6, 1fr) without
   always providing single-column fallback for the smallest screens.
   ===================================================================== */
@media (max-width: 991px) {
  .lt-feat-grid,
  .lt-info-grid,
  .lt-feat-grid.lt-feat-grid-4,
  .lt-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lt-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .lt-feat-grid,
  .lt-info-grid,
  .lt-feat-grid.lt-feat-grid-4,
  .lt-values-grid,
  .lt-step-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Prevent grid item overflow when content has long words */
.lt-feat-grid > *,
.lt-info-grid > *,
.lt-values-grid > *,
.lt-step-grid > *,
.lt-timeline > * {
  min-width: 0;
}

/* =====================================================================
  11. Forms – kontakt.html / newsletter style touch + width
   ===================================================================== */
input,
textarea,
select,
button {
  max-width: 100%;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-size: 16px;              /* prevents iOS Safari zoom-on-focus */
}
.lt-form-stack input,
.lt-form-stack textarea,
.lt-form-stack select {
  width: 100%;
  min-height: 48px;
}
.lt-form-stack textarea {
  min-height: 140px;
}

/* =====================================================================
  12. Buttons – consistent mobile touch height
   ===================================================================== */
.lt-btn,
.lt-btn-primary,
.lt-btn-ghost,
.lt-demo-cta,
.lt-pill-cta,
.w-button {
  min-height: 44px;
}

/* =====================================================================
  13. Footer / .lt-info-sec – memory note says <footer> is nested INSIDE
   the last .lt-info-sec, which can cause bottom-padding to land after
   the footer block. Guarantee sensible bottom spacing.
   ===================================================================== */
.lt-info-sec > footer,
.lt-sec.lt-info-sec > footer {
  margin-top: 24px;
}
@media (max-width: 767px) {
  .lt-info-sec,
  .lt-sec.lt-info-sec {
    padding-top: 48px;
    padding-bottom: 64px;
  }
}

/* =====================================================================
  14. Cookie banner / sticky widgets – never block content fully on phones
   ===================================================================== */
@media (max-width: 479px) {
  .lt-cookie-banner,
  [data-lt-cookie] {
    max-width: calc(100% - 16px) !important;
    left: 8px !important;
    right: 8px !important;
  }
}

/* =====================================================================
  15. Tables – allow horizontal scroll instead of breaking layout
   ===================================================================== */
.lt-sec table,
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =====================================================================
  16. Ultra-wide / hi-res displays: prevent extreme line lengths
   ===================================================================== */
@media (min-width: 2200px) {
  .lt-sec-sub,
  .lt-sub,
  .lt-feat-desc,
  .lt-timeline-desc,
  .lt-pp-card p {
    max-width: 70ch;
  }
}

/* =====================================================================
  17. Reduced motion – respect OS preference for all custom animations
  (Inline keyframes already handle this for .lt-h1 etc.; cover the rest.)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .lt-hero-canvas { opacity: 0.5; } /* flow field still draws but quieter */
}