/* ============================================================
   OFFSET Studio – Produktions-Overrides
   Separate CSS-Datei, damit offset-alternative.webflow.css
   unverändert bleibt. Wird nach dem Webflow-CSS geladen.
   ============================================================ */

/* ----------------------------------------------------------
   1. DESIGN TOKENS / CSS-VARIABLEN
   ---------------------------------------------------------- */
:root {
  /* Farben */
  --os-orange:        #ff4601;
  --os-dark:          #0e0e0e;
  --os-white:         #ffffff;
  --os-text-light:    #d8d8d8;
  --os-text-muted:    #a5a5a5;

  /* Layout */
  --os-nav-height:    72px;
  --os-container-max: 1600px;
  --os-gap-sm:        8px;
  --os-gap-md:        24px;
  --os-gap-lg:        48px;
  --os-gap-xl:        96px;

  /* Schrift */
  --os-font-primary:  'Roboto', sans-serif;
  --os-font-display:  'Google Sans', sans-serif;

  /* Animationen */
  --os-duration-fast: 0.2s;
  --os-duration-med:  0.4s;
  --os-ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ----------------------------------------------------------
   2. SMOOTH SCROLL & OVERFLOW
   ---------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* iOS Safari: overflow-x auf body allein reicht nicht */
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Navbar: 100vw schließt Scrollbar-Breite ein (~17px auf Desktop) → Overflow.
   width:100% bezieht sich auf den containing block, nie auf die Scrollbar. */
.navbar-logo-left-container.shadow-three {
  width: 100%;
}

/* Footer: negatives Margin-Muster (Parent -20px / Kind +20px für Gutter-Ausgleich)
   überläuft auf schmalen Mobile-Screens, weil kein Parent overflow:hidden hat.
   Auf Mobile einfach auf 0 zurücksetzen – Layout ist dort sowieso column. */
@media screen and (max-width: 767px) {
  .footer-block-three {
    margin-left: 0;
    margin-right: 0;
  }

  .footer-social-block-three {
    margin-left: 0;
  }
}

@media screen and (max-width: 479px) {
  .footer-legal-block {
    margin-left: 0;
  }
}

/* ----------------------------------------------------------
   3. SCROLL-MARGIN-TOP für Fixed-Nav (Anchor-Links)
   ---------------------------------------------------------- */
#sec_hero,
#sec_services,
#sec_secret,
#sec_uebermich,
#sec_bewertungen,
#sec_kontakt,
#sec_faq {
  scroll-margin-top: var(--os-nav-height);
}

/* ----------------------------------------------------------
   4. HERO-BEREICH: Overflow + Gallery-Ticker-Animation
      + Flex-Layout-Fix (kein Überlappen auf kleinen Viewports)
   ---------------------------------------------------------- */

/* Gallery-Ticker bleibt position:absolute — er ist mehrere tausend Pixel breit
   (width:max-content) und darf daher NICHT im Dokumentfluss sein, sonst
   berechnet der Browser die Seite als breiter als den Viewport → Overflow →
   horizontales Scrollen / Rauszoomen auf Mobile.
   Stattdessen: padding-bottom auf der Section reserviert den Platz unten,
   justify-content:center zentriert den Text im verbleibenden Bereich. */
.section_hero_new {
  overflow: hidden;
  position: relative;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  transform: translateZ(0); /* promoted GPU-Layer: verhindert Software-Compositing des animierten Kindes */
  /* Reserviert exakt so viel Platz unten wie die Bilder hoch sind (+20px Puffer) */
  padding-bottom: calc(clamp(200px, 44vh, 500px) + 20px);
}

/* Text-Block: top%-Offset entfernen, Rest übernimmt justify-content:center */
.flex-block-7 {
  position: relative !important;
  top: auto !important;
  flex: 0 0 auto;
}

/* Gallery Ticker – endlose CSS-Scroll-Animation als Basis.
   Falls Webflow IX2/GSAP ebenfalls animiert, gewinnt GSAP
   (Inline-Style überschreibt CSS-Animation) – kein Konflikt. */
@keyframes gallery-ticker-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-20%, 0, 0); } /* translate3d: expliziter GPU-Pfad, kein Layout-Recalc */
}

.gallery-ticker {
  width: max-content !important;
  right: auto !important;
  will-change: transform;
  animation: gallery-ticker-scroll 28s linear infinite;
  /* Viewport-relatives Padding unten (ersetzt hardcoded 39px) */
  padding-bottom: clamp(12px, 2.5vh, 39px);
}

/* Bilder viewport-relativ skalieren – Seitenverhältnis w:h ≈ 0,45 bleibt erhalten.
   44vh ergibt ~500px bei 1080px, ~396px bei 900px, ~338px bei 768px. */
.gallery-image-2 {
  height: clamp(200px, 44vh, 500px) !important;
  width:  clamp(90px,  20vh, 225px) !important;
}

/* Pause beim Hover */
.gallery-ticker:hover {
  animation-play-state: paused;
}

/* IX2-Opacity-Fallback: Wenn JS nicht feuert, nach 1,5s sichtbar machen */
@keyframes os-fadein-fallback {
  to { opacity: 1; }
}

/* ----------------------------------------------------------
   5. MOBILE: Overflow-Prävention kritischer Elemente
   ---------------------------------------------------------- */

/* Die alte .flex-block mit width:1600px ist nur in unsichtbaren
   Sections (.section_hero → display:none), daher kein Handlungsbedarf.
   Trotzdem absichern: */
.flex-block {
  max-width: 100%;
}

/* Bilder nie breiter als Container */
img {
  max-width: 100%;
  height: auto;
}

/* Kein horizontaler Overflow in Sektionen */
section {
  max-width: 100vw;
}

/* ----------------------------------------------------------
   6. MOBILE BREAKPOINTS – kritische Korrekturen
   ---------------------------------------------------------- */

/* Tablet (≤ 991px) */
@media screen and (max-width: 991px) {
  .section_hero_new {
    background-size: auto, auto, cover;
    padding-bottom: calc(clamp(160px, 40vh, 420px) + 20px);
  }

  .gallery-image-2 {
    height: clamp(160px, 40vh, 420px) !important;
    width:  clamp(72px,  18vh, 189px) !important;
  }
}

/* Mobile (≤ 767px) */
@media screen and (max-width: 767px) {
  :root {
    --os-nav-height: 64px;
  }

  .section_hero_new {
    padding-bottom: calc(clamp(150px, 38vh, 340px) + 20px);
  }

  .gallery-ticker {
    animation-duration: 20s;
  }

  .h1hero,
  .heading-12 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .gallery-image-2 {
    height: clamp(150px, 38vh, 340px) !important;
    width:  clamp(68px,  17vh, 153px) !important;
  }
}

/* Klein-Mobile (≤ 479px) */
@media screen and (max-width: 479px) {
  .section_hero_new {
    padding-bottom: calc(clamp(130px, 33vh, 280px) + 20px);
  }

  .gallery-ticker {
    animation-duration: 16s;
  }

  .gallery-image-2 {
    height: clamp(130px, 33vh, 280px) !important;
    width:  clamp(59px,  15vh, 126px) !important;
  }
}

/* ----------------------------------------------------------
   7. SMOOTH SCROLLING für Lenis (Fallback-Sicherung)
   ---------------------------------------------------------- */

/* Verhindert, dass Lenis den body-scroll versteckt */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ----------------------------------------------------------
   8. ACCESSIBILITY: Fokus-Sichtbarkeit
   ---------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--os-orange);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ----------------------------------------------------------
   9. FORMULAR: Erfolgsmeldung-Styles verbessern
   ---------------------------------------------------------- */
.w-form-done,
.success-message {
  background-color: #f0fdf4;
  border: 1px solid #22c55e;
  border-radius: 8px;
  padding: 16px 20px;
  color: #15803d;
  display: none;
}

.w-form-fail,
.error-message {
  background-color: #fef2f2;
  border: 1px solid #ef4444;
  border-radius: 8px;
  padding: 16px 20px;
  color: #dc2626;
  display: none;
}

/* ----------------------------------------------------------
   10. PERFORMANCE – Safari iOS Rendering-Fixes
   ---------------------------------------------------------- */

/* backdrop-filter:blur() ist der teuerste GPU-Effekt auf iOS Safari.
   Jedes blur-Element erzwingt ein separates Compositing-Layer +
   Gauß-Shader auf alles dahinter → Framerate bricht auf 20-30fps ein.
   Ersetzt durch äquivalente semi-transparente Hintergründe. */

.chip {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(42, 42, 42, 0.85) !important;
}

.chip-copy {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  /* background-color: #ffffffb0 bleibt – bereits gut sichtbar */
}

.button_leistungenerforschen {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(20, 20, 20, 0.72) !important;
}

.button_leistungenerforschen.ctaextra.ctaservice,
.button_leistungenerforschen.ctaextra.ctaservice-copy {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
}

/* transition:all überwacht jede CSS-Property – auch teure wie width/height.
   Auf spezifische Eigenschaften einschränken. */
.chip,
.chip-copy {
  transition: background-color .5s, border-color .5s, opacity .5s !important;
}

.button_leistungenerforschen.ctaextra.ctaservice,
.button_leistungenerforschen.ctaextra.ctaservice-copy {
  transition: border-color .4s, background-color .4s, color .4s, box-shadow .4s !important;
}

/* gallery-image-2: transition:all → nur tatsächlich animierte Properties */
.gallery-image-2 {
  transition: transform .325s cubic-bezier(.645, .045, .355, 1),
              margin-left .325s cubic-bezier(.645, .045, .355, 1),
              margin-right .325s cubic-bezier(.645, .045, .355, 1) !important;
}

/* ----------------------------------------------------------
   11. PRINT: Unnötige Animationen deaktivieren
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gallery-ticker {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}