/* ============================================================================
   mobile.css - odstepy na telefonie, naprawa poziomego suwaka, animacja wejscia
   ============================================================================

   DLACZEGO OSOBNY PLIK, A NIE DOPISEK DO ISTNIEJACYCH:
   113 stron angielskich laduje gerber-transport.webflow.shared.*.min.css
   z atrybutem integrity (SRI). Zmiana jednego bajtu w tamtym pliku sprawia,
   ze przegladarka blokuje CALY arkusz i strona zostaje bez stylow. Ten plik
   nie ma atrybutu integrity, wiec nic nie trzeba przeliczac.

   DLACZEGO PODWOJONE KLASY (.x.x):
   strony przebudowane trzymaja swoje style w blokach <style> w <body>,
   czyli ZA wszystkimi linkami do arkuszy. Przy rownej swoistosci wygrywalyby
   one. Podwojenie klasy podnosi swoistosc do (0,2,0) i kolejnosc przestaje
   mie znaczenie - bez uciekania sie do !important.

   DLACZEGO NIGDY SKROT padding/margin:
   te klasy maja tez odstepy poziome (np. padding: 52px 20px). Skrot by je
   wyzerowal i tresc przykleilaby sie do krawedzi ekranu.

   Skala "mocno" (decyzja 29.10.2026):
     >=100px  ->  36px      42-48px  ->  20px
      70-80px ->  32px      34-40px  ->  24px (wnetrze boksow)
      52-56px ->  28px      34-40px  ->  16px (marginesy naglowkow)
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. POZIOMY SUWAK  (wszystkie szerokosci)

   80 z 238 stron dalo sie przesuwac w bok na telefonie: 46 regionalnych
   (znaczek .gt-cta-badge-w wystawal o 8px) i 32 wpisy bloga (blok tresci
   .w-richtext byl szerszy od swojego kontenera - 424px przy 351px miejsca,
   czyli tekst byl realnie przycinany).

   overflow-x: clip, a nie hidden - hidden tworzy kontener przewijania
   i zabija position:sticky w rodzicach. clip nie.
   ------------------------------------------------------------------------ */
html,
body {
  overflow-x: clip;
}

.w-richtext,
.w-richtext > * {
  max-width: 100%;
}

.w-richtext img,
.w-richtext iframe,
.w-richtext video {
  max-width: 100%;
  height: auto;
}

/* dlugie slowa i adresy nie rozpychaja kolumny */
.w-richtext p,
.w-richtext li,
.w-richtext h2,
.w-richtext h3 {
  overflow-wrap: break-word;
}

/* PRAWDZIWA przyczyna rozciagania strony w bok.

   Przycisk CTA ma efekt przejezdzajacego swiatla: .gt-cta-w::before jedzie
   animacja od left:-100% do left:100%. Taki efekt musi byc przyciety do
   przycisku, a .gt-cta-w nie ma overflow - wiec swiatlo wyjezdza poza
   przycisk i poszerza dokument.

   To blad ZASTANY, nie skutek sciecia odstepow, i widac go na kazdej
   szerokosci: 387px nadmiaru przy 390, 198 przy 768, 247 przy 1280.
   Dopiero przy 1920 jest dosc miejsca, zeby nikt tego nie zauwazyl.

   Nie przycinamy rodzica, bo plakietka "GRATIS" siedzi WEWNATRZ przycisku,
   a pigulka ma border-radius 60px - naroznik obcialby plakietke. Zamiast
   tego zatrzymujemy sam efekt. Podwojona klasa, bo regula w <style> strony
   ma ta sama swoistosc i stoi pozniej.                                     */
.gt-cta-w.gt-cta-w::before {
  display: none;
}

/* Plakietka "GRATIS" siedzi na right:-8px, czyli celowo wystaje poza
   przycisk, i do tego pulsuje. Na waskim ekranie w szczycie animacji
   dotykala krawedzi - przesuwamy ja do srodka i kazemy skalowac sie
   w lewo. Jest POZA przyciskiem, wiec overflow wyzej jej nie tnie.         */
@media (max-width: 767px) {
  .gt-cta-badge-w.gt-cta-badge-w {
    right: 2px;
    transform-origin: right center;
  }
}


/* ---------------------------------------------------------------------------
   2. ANIMACJA WEJSCIA OD DOLU  (telefon i desktop)

   Klase js-reveal doklada js/reveal.js jako PIERWSZA rzecz, jaka robi.
   Dzieki temu, jesli skrypt sie nie zaladuje, nic nie jest ukryte -
   strona po prostu stoi w miejscu zamiast zniknac.
   ------------------------------------------------------------------------ */
.js-reveal .gt-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1),
              transform .5s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.js-reveal .gt-rv.gt-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* na duzym ekranie ruch jest delikatniejszy - tam widac wiecej naraz */
@media (min-width: 768px) {
  .js-reveal .gt-rv {
    transform: translateY(10px);
    transition-duration: .42s;
  }
}

/* kto prosil o mniej ruchu, dostaje sama zmiane przezroczystosci */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .gt-rv {
    transform: none;
    transition: opacity .2s linear;
  }
}

/* wydruk zawsze pelny */
@media print {
  .js-reveal .gt-rv {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ---------------------------------------------------------------------------
   3. ODSTEPY NA TELEFONIE
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {

  /* --- 3a. Wrappery sekcji i hero: 100-160px -> 36px -------------------- */

  .p-xl-start.p-xl-start {
    padding-top: 36px;
  }

  .hero-section-new.hero-section-new {
    padding-top: 36px;
  }

  /* HERO - tu odstep gory NIE jest ozdoba.
     Naglowek strony ma position:absolute i siega okolo 96px w dol, wiec
     lezy NA hero. Odstep gorny hero jest jedynym, co trzyma tresc ponizej.
     Pierwsza wersja scinala go do 40px i naglowek wchodzil na H1 - stad te
     wartosci sa wyraznie wieksze od reszty skali i tak maja zostac.       */
  .hero-inner.hero-inner[class] {
    padding-top: 136px;
    padding-bottom: 32px;
  }

  /* Hero strony glownej. Nad H1 jest jeszcze baner promocyjny, wiec to on,
     a nie naglowek sekcji, decyduje o tym, ile miejsca trzeba zostawic.
     Przy 84px wchodzil pod logo (-2px przeswitu).                         */
  .gh.gh {
    padding-top: 116px;
    padding-bottom: 20px;
  }

  .city-hero-section.city-hero-section {
    padding-top: 88px;
    padding-bottom: 32px;
  }

  /* Strony, ktore nie maja hero, tylko od razu tresc: blog, sklep, lista
     aktualnosci, strony prawne. Tam pierwszy blok tresci jest JEDYNYM, co
     trzyma tekst ponizej naglowka - ogolna skala odstepow go na to za
     bardzo scinala i tytul wpisu chowal sie pod logo.
     Te klasy wystepuja raz na stronie, na jej poczatku, wiec mozna im dac
     wiecej bez wplywu na reszte ukladu.

     Padding, nie margines: sekcje nadrzedne nie maja ani obramowania, ani
     wlasnego paddingu, wiec margines gorny dziecka ZWIJA SIE z nimi i nie
     przesuwa niczego w dol (na blogu dawalo to -4px zamiast 128).

     108px, a nie 128: te bloki dostaja jeszcze 36px marginesu
     z .gutter-outside (regula nizej), wiec 128 dawalo w sumie WIECEJ
     miejsca niz bylo w oryginale - tytul wpisu schodzil o 20px nizej.     */
  .blog-post-wrapper.blog-post-wrapper,
  .shop.shop,
  .news-wrapper.news-wrapper {
    padding-top: 108px;
    margin-top: 0;
  }

  /* .shop-wrapper siedzi w .shop - gdyby dostal to samo, odstep bylby
     policzony dwa razy (wyszlo 232px zamiast 128).                       */
  .shop-wrapper.shop-wrapper {
    padding-top: 0;
    margin-top: 0;
  }

  /* te niosa odstep marginesem, nie paddingiem */
  .about-wrapper.about-wrapper,
  .landing-content-1-wrapper.landing-content-1-wrapper,
  .landing-service-wrapper.landing-service-wrapper,
  .landing-process-wrapper.landing-process-wrapper,
  .blog-wrapper.blog-wrapper,
  .service-bild-wrapper.service-bild-wrapper,
  .service-benefit-wrapper.service-benefit-wrapper,
  .service-last-wrapper.service-last-wrapper,
  .contact-wrapper.contact-wrapper,
  .contact-paragraph.contact-paragraph,
  .w-layout-layout.w-layout-layout {
    margin-top: 36px;
  }

  /* mieszane: duzy padding + duzy margines */
  .datenschutz-wrapper.datenschutz-wrapper {
    padding-top: 128px;
    margin-top: 0;
  }

  .paragraph-6.paragraph-6 {
    padding-bottom: 24px;
    margin-top: 24px;
  }

  .section-landing-cta.section-landing-cta,
  .section-callback-cta.section-callback-cta {
    padding-top: 36px;
    padding-bottom: 36px;
  }


  /* --- 3b. Sekcje 70-80px -> 32px --------------------------------------- */

  .city-section-white.city-section-white,
  .city-section-dark.city-section-dark,
  .city-section-photo.city-section-photo,
  .city-final-cta.city-final-cta {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* Stopka - jest na kazdej ze 238 stron.
     Dol wiekszy niz gora celowo: przyklejony przycisk "Expressanfrage"
     ma position:fixed i przy koncu strony lezal na linijce z kredytem
     (zmierzone: przycisk 784-828px, kredyt 771-786px przy ekranie 844).
     Ten zapas pozwala przewinac tresc ponad niego.                       */
  .ley-section-1.ley-section-1 {
    padding-top: 36px;
    padding-bottom: 104px;
  }

  /* Wpisy bloga maja wlasna stopke - <div class="footer">, nie znacznik
     <footer> i nie .ley-section-1 - wiec zapas trzeba dolozyc osobno.
     Bez tego kredyt konczyl sie 8px nad dolem ekranu, czyli dokladnie
     pod przyklejonym przyciskiem.                                        */
  .footer.footer {
    padding-bottom: 104px;
  }

  .ley-wrap-2.ley-wrap-2 {
    padding-top: 28px;
    padding-bottom: 36px;
  }

  .p-md-start.p-md-start {
    padding-top: 28px;
    margin-bottom: 16px;
  }

  .gf.gf {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .gf-card-m.gf-card-m {
    padding-bottom: 28px;
  }


  /* --- 3c. Sekcje stron przebudowanych 52px -> 28px --------------------- */

  .sen-facts.sen-facts,
  .lag-mist.lag-mist,
  .lag-dark.lag-dark,
  .aus-dark.aus-dark,
  .pv-soft.pv-soft,
  .en-soft.en-soft,
  .gr-soft.gr-soft,
  .bu-soft.bu-soft,
  .facts-section.facts-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* Sekcje stron przebudowanych nie maja wlasnej klasy - inline CSS stylu
     ".aus section{padding:52px 0}" trafia w nie przez wrapper. Musimy wiec
     przejsc ta sama droga, tyle ze z podwojona klasa rodzica.             */
  .sen.sen > section,
  .aus.aus > section,
  .lag.lag > section,
  .bu.bu > section,
  .en.en > section,
  .gr.gr > section,
  .pv.pv > section {
    padding-top: 28px;
    padding-bottom: 28px;
  }


  /* --- 3d. Bloki wewnatrz sekcji 42-48px -> 20px ------------------------ */

  .ley-wrap-1-2.ley-wrap-1-2,
  .ley-wrap-3.ley-wrap-3 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .city-section-header.city-section-header,
  .facts-subtitle.facts-subtitle {
    margin-bottom: 20px;
  }


  /* --- 3e. Wnetrze boksow 34-40px -> 24px ------------------------------- */
  /* tu padding jest wyscielka karty, a nie odstepem miedzy sekcjami -
     sciecie do 16px zrobiloby z nich ciasne pudelka                        */

  .city-cta-box.city-cta-box,
  .sen-cta.sen-cta,
  .sen-box.sen-box,
  .lag-cta.lag-cta,
  .aus-cta.aus-cta,
  .pv-cta.pv-cta,
  .en-cta.en-cta,
  .gr-cta.gr-cta,
  .bu-cta.bu-cta {
    padding-top: 24px;
    padding-bottom: 24px;
  }


  /* --- 3f. Marginesy naglowkow i drobiazgi 34-40px -> 16px -------------- */

  .city-h2-navy.city-h2-navy,
  .city-h2-white.city-h2-white,
  .city-h2-navy-copy.city-h2-navy-copy,
  .div-block-5-copy.div-block-5-copy,
  .heading-25.heading-25 {
    margin-bottom: 16px;
  }

  /* .brix---header-wrapper celowo NIE RUSZANE: to naglowek nawigacji,
     a jego margines gorny rozni sie miedzy stronami. Ujednolicenie go na
     16px przesunelo naglowek w dol o 16px tam, gdzie mial 0 - i zaczal
     zachodzic na hero. Chrome nawigacji zostawiamy w spokoju.            */
  .w-pagination-wrapper.w-pagination-wrapper {
    margin-top: 16px;
  }

  .digital-cell-wrapper.digital-cell-wrapper {
    padding-top: 12px;
    padding-bottom: 16px;
  }

  .p-sm-start.p-sm-start {
    padding-top: 16px;
  }

  .service-grid-last-wrapper.service-grid-last-wrapper {
    margin-bottom: 16px;
  }


  /* --- 3g. Reguly, ktore wygrywaly ze zwyklym podwojeniem klasy --------- */

  /* Zrodlo wiekszosci stupikselowych odstepow nad blokami tresci to jedno
     utility Webflow, a nie klasy poszczegolnych sekcji. Taniej sciac tutaj
     niz gonic kazda klase z osobna - stad ta regula stoi na koncu.        */
  .gutter-outside.gutter-outside {
    margin-top: 36px;
  }

  /* Reguly strukturalne Webflow maja swoistosc (0,2,1) i bily podwojona
     klase (0,2,0). Powtarzamy ich ksztalt z podwojeniem.                  */
  section.datenschutz.datenschutz > .datenschutz-wrapper {
    padding-top: 128px;
  }

  section.impressum.impressum > div,
  section.section-contact.section-contact > .p-xl-start {
    padding-top: 128px;
  }

  /* Ta przegrywala z regula z bloku <style> w <body> przy rownej swoistosci
     (tam wygrywa kolejnosc). [class] podnosi ja o stopien - czysciej niz
     !important, ktore psuje kazda pozniejsza poprawke.                    */
  .gf-card-m.gf-card-m[class] {
    padding-bottom: 28px;
  }


  /* --- 3h. Kafelki News na stronie glownej ------------------------------ */
  /* Pudelko zdjecia ma sztywne 285px wysokosci, a zdjecia z CMS maja
     proporcje 2,08 (1800x867), czyli przy szerokosci 351px zajmuja 169px.
     Z object-fit: scale-down zostawalo 116px martwego bialego miejsca pod
     kazdym zdjeciem - to ta "wolna przestrzen pod News".
     Blad zastany, nie skutek sciecia odstepow.
     Na telefonie kafelki stoja jeden pod drugim, wiec rowna wysokosc nie
     jest do niczego potrzebna i pudelko moze isc za zdjeciem.             */
  .image-19.image-19 {
    height: auto;
  }


  /* --- 3i. Puste akapity z richtextu ------------------------------------ */
  /* Webflow zostawia <p> z samym znakiem zerowej szerokosci jako separator.
     Na 238 stronach jest ich 3786 i kazdy doklada pelna wysokosc wiersza.
     Klase gt-empty doklada reveal.js - CSS nie umie wybrac po tresci.       */

  .gt-empty {
    display: none;
  }
}