/* Eigene Anpassungen über dem Webflow-CSS. */

/* Hero-Slider: Endlosband im Compositor statt per Webflow-JS (Interaction "Header 78 image top [Loop]":
   0 -> -50 %, 50 s linear, Endlosschleife). Die Animation überschreibt das Inline-Transform von IX2,
   das Band ruckelt so nicht mehr, wenn der Haupt-Thread beim Laden kurz blockiert. */
/* Ende = genau eine Liste + Abstand (2 x 2600 px + 16 px gap): -50 % allein waren 8 px zu kurz, das Band sprang
   bei jedem Durchlauf (alle 50 s) 8 px zurück (auch schon auf der Webflow-Seite). */
@keyframes sk-hero-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - 8px), 0, 0); }
}
.header78_image-list-top {
  animation: sk-hero-marquee 50s linear infinite;
  will-change: transform;
}

/* Services-Überschrift (Handy-Variante): optisch wie H2, aber keine zweite Überschrift im HTML (SEO). */
.sk-h2 {
  font-family: var(--_typography---font-styles--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 120%;
}

/* Startfarbe für die Browser-Leisten (iOS-Safari liest die body-Farbe): dunkel wie der Kopf.
   Unsichtbar, weil Verlauf und Sektionen darüber liegen. site.js passt sie beim Scrollen an. */
html, body, body[class] { background-color: #111; }

/* Service-Tabs sind klickbar (site.js). */
.services-nav-text[role="button"] { cursor: pointer; pointer-events: auto; }
.services-nav-text[role="button"]:focus-visible { outline: 2px solid #2b9eff; outline-offset: 4px; border-radius: 4px; }

/* Klebende Elemente per scrollgesteuerter Animation statt position: sticky (site.js, Abschnitt 4).
   Grund: iOS-Safari 26+ zeigt sonst undurchsichtige Leisten oben/unten in der Farbe des sticky-Elements. */
@supports (animation-timeline: scroll()) {
  .sk-pin {
    position: relative !important;
    top: auto !important;
    animation: sk-pin linear both;
    animation-timeline: scroll(root block);
    animation-range: var(--sk-pin-start) var(--sk-pin-end);
    will-change: transform;
  }
  .sk-pin-measure .sk-pin,
  .sk-pin-measure .padding-global.is-statement-section.is-sticky,
  .sk-pin-measure .services-sticky,
  .sk-pin-measure .packages-section { position: relative !important; top: auto !important; animation: none !important; }
  @keyframes sk-pin {
    from { transform: translateY(0); }
    to { transform: translateY(var(--sk-pin-dist)); }
  }
}

/* Desktop: Weißer Verlauf über den Service-Karten. Obere Kante in Pixeln direkt unter den Tabs (Tabs und iPhone stehen in
   jedem Fenster fest bei 220 px): in % rutschte sie in hohen Fenstern (z. B. 2000x1640) 200 px unter die iPhone-Oberkante.
   Untere Kante bleibt bei 92-99 % der Höhe (in Pixeln schnitt sie in hohen Fenstern alles unter dem iPhone hart ab).
   Werte in site.js Abschnitt 5 gespiegelt. */
@media screen and (min-width: 992px) {
  .services-left-overlay {
    background-image: linear-gradient(#fff 144px, rgba(255, 255, 255, 0) 168px, rgba(255, 255, 255, 0) 92%, #fff 99%);
  }
}

/* Desktop: Pakete-Bereich mindestens einen Bildschirm hoch, damit „You bring the mission“ auf hohen Monitoren
   nicht schon im Pakete-Screen auftaucht (vorher fest bei 912 px, auch auf der Webflow-Seite). */
@media screen and (min-width: 992px) {
  .packages-section .packages-desktop { min-height: calc(100vh - 223px); box-sizing: border-box; }
  /* Validate/Grow/Integrate + Karte saßen mittig im Raum UNTER der Überschrift, in hohen Fenstern also tief.
     Jetzt bildschirmmittig, aber nie näher an der Überschrift als bei 1440x900 (112 px Abstand):
     Versatz 0 px bei 912 px Fensterhöhe, wächst mit der Höhe bis max. 111 px (ab ~1135 px = genau bildschirmmittig).
     Nur transform: Layout und Höhe bleiben gleich, die Sektion darunter bewegt sich nicht. */
  .packages-section .packages-desktop > .max-width-large { transform: translateY(calc(-1 * clamp(0px, (100vh - 912px) / 2, 111px))); }
}

/* Seitennavigation (Results, Our Mission …) startet unsichtbar. Webflow blendet sie per Scroll-Animation ein
   (Inline-Opacity überschreibt das hier). Vorher blitzte sie beim Laden 1-2 s über dem Hero auf. */
.side-nav-container { opacity: 0; }

/* Hero-Hintergrund in hohen Fenstern dunkel halten (site.js Abschnitt 6). !important schlägt Webflows Inline-Farbe. */
.hero-background-color-change.sk-bg-hold { background-color: var(--sk-hero-bg, #111) !important; }

/* Hochzählende Kennzahlen (site.js Abschnitt 7): Ziffern gleich breit, damit der Text beim Zählen nicht wackelt. */
.results-pullout.sk-count { font-variant-numeric: tabular-nums; }

/* Schwere PNG-Hintergründe der Service-Bilder/iPhone als WebP (2,4 MB + 584 KB + 225 KB -> 40 + 80 + 23 KB).
   Gleiche Selektoren und Breakpoints wie im Webflow-CSS, nur die Datei getauscht. */
.iphone-video-01 { background-image: url("/assets/skalory/media/services-social-ad.webp"); }
.services-image { background-image: url("/assets/skalory/media/services-motion-blur.webp"); }
@media screen and (max-width: 767px) { .services-image.is-social-ad { background-image: url("/assets/skalory/media/services-social-ad.webp"); } }
@media screen and (max-width: 767px) { .services-image.is-performance { background-image: url("/assets/skalory/media/services-performance.webp"); } }
@media screen and (max-width: 479px) { .services-image { background-image: url("/assets/skalory/media/services-social-ad.webp"); } }
@media screen and (max-width: 479px) { .services-image.is-search-ads { background-image: url("/assets/skalory/media/services-motion-blur.webp"); } }

/* Service-Tabs: aktiver Tab per site.js (Abschnitt 10) statt Webflow-Scroll-Prozenten. Farben wie bei Webflow. */
.sk-tabs .services-nav-text { color: #afafaf !important; transition: color .25s ease; }
@media screen and (max-width: 767px) { .sk-tabs .services-nav-text { color: #fff !important; } }
.sk-tabs .services-nav-text.sk-tab-on { color: #fc7043 !important; }

/* UX 4: Einstieg. Überschrift gleitet hoch (bleibt sichtbar, zählt sofort als gezeichnet), Text und Button blenden
   gestaffelt ein. Das Bildband erscheint ohne Verzögerung: ein Einblenden ließ das Hero-Bild am Handy erst nach 5,8 s
   als "geladen" zählen (ohne: 1,6 s). */
@keyframes sk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sk-lift { from { transform: translateY(16px); } to { transform: none; } }
.max-width-large.hero h1 { animation: sk-lift .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-cta-container > p { animation: sk-rise .7s cubic-bezier(.2, .7, .2, 1) .12s both; }
.hero-cta-container > .button { animation: sk-rise .7s cubic-bezier(.2, .7, .2, 1) .24s both; }
@media (prefers-reduced-motion: reduce) { .max-width-large.hero h1, .hero-cta-container > p, .hero-cta-container > .button { animation: none; } }

/* UX 5: weicher Seitenwechsel zwischen Startseite und Kontakt, das Logo bleibt stehen */
@view-transition { navigation: auto; }
.navbar1_logo { view-transition-name: sk-logo; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* UX 8: Seitennavigation links (site.js Abschnitt 11): erst ab 1200 px und ab "Results", ein aktiver Punkt,
   Textfarbe nach dem Hintergrund darunter (hell/dunkel) statt Webflows fester Farbwechsel */
@media screen and (max-width: 1199px) { .side-nav-container { display: none !important; } }
.sk-snav .side-nav-container { opacity: 0 !important; pointer-events: none; transition: opacity .35s ease; }
.sk-snav .side-nav-container.sk-show { opacity: 1 !important; pointer-events: auto; }
.sk-snav .side-nav-list-item .pulse-container { opacity: 0 !important; transition: opacity .25s; }
.sk-snav .side-nav-list-item.sk-on .pulse-container { opacity: 1 !important; }
.sk-snav .side-nav-text { color: rgba(255, 255, 255, .45) !important; transition: color .25s; }
.sk-snav .side-nav-list-item.sk-on .side-nav-text { color: #fff !important; }
.sk-snav .side-nav-container.sk-light .side-nav-text { color: #9a9a9a !important; }
.sk-snav .side-nav-container.sk-light .side-nav-list-item.sk-on .side-nav-text { color: #111 !important; }

/* UX 9: FAQ per Tastatur bedienbar (site.js Abschnitt 12) */
.faq4_question[role="button"] { cursor: pointer; }
.faq4_question[role="button"]:focus-visible { outline: 2px solid #fc7043; outline-offset: 4px; border-radius: 6px; }

/* Footer: Link zur Schwestermarke farla (13.10.2026) */
.sk-sister{display:block;margin-top:14px;font-size:14px;line-height:1.4;color:#7e7e7e;text-decoration:none;max-width:280px}
.sk-sister:hover{color:#111;text-decoration:underline}
.sk-sister b{font-weight:600;color:#111}