/* Optional: Rotating arrow left/right based on Scroll Direction */

.marquee__advanced__arrow-svg,
[data-marquee-direction="right"][data-marquee-status="inverted"] .marquee__advanced__arrow-svg {
  transition: 0.5s cubic-bezier(0.625, 0.05, 0, 1);
  transform: rotate(-180deg);
}

[data-marquee-status="inverted"] .marquee__advanced__arrow-svg,
[data-marquee-direction="right"][data-marquee-status="normal"] .marquee__advanced__arrow-svg {
  transform: rotate(-359.999deg);
}

[data-logo-wall-list] [data-logo-wall-item]:nth-child(n+9) {
  display: none;
}

@media screen and (max-width: 991px) {
  [data-logo-wall-list] [data-logo-wall-item]:nth-child(n+7) {
    display: none;
  }
}

.preview-follower__inner,
.preview-follower__label {
  transition: opacity 0.1s ease, transform 0.6s cubic-bezier(0.65, 0.1, 0, 1);
}

/* html:not(.wf-design-mode) */
.preview-follower__inner {
  opacity: 0;
  transform: scale(0);
}

/* html:not(.wf-design-mode) */
.preview-follower__label {
  opacity: 0;
  transform: translate(0px, 100%);
}

.preview-follower [data-follower-visual] {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}

@media screen and (min-width: 992px) {
  .preview-item:last-of-type {
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  }
}

@media (hover: hover) and (min-width: 992px) {
  body:has([data-follower-collection]:hover) .preview-follower__inner {
    opacity: 1;
    transform: scale(1);
  }

  body:has([data-follower-collection]:hover) .preview-follower__label {
    opacity: 1;
    transform: translate(0px, 0%);
  }

  body:has(.preview-item:hover) .preview-item:not(:hover) {
    opacity: 0.5;
  }
}

.text-line-mask {
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

/* Note: Both of the sets of CSS are not needed for the parallax effect */

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16;
  /* body font-size in design - no px */
  --size-container-ideal: 1440;
  /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390;
    /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/* ------------------------- Underline Link [https://osmo.supply/] -------------------------  */

[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {

  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}

.btn-magnetic__click .btn-magnetic__text-p {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translateY(0%) rotate(0.001deg);
}

.btn-magnetic__click:hover .btn-magnetic__text-p {
  transform: translateY(-100%) rotate(0.001deg);
}

:root {
  --button-097-color: #131313;
  --button-097-color-background: #fff;
  --button-097-hover-color: #fff;
  --button-097-hover-color-background: #131313;
  --button-097-color-focus: #131313;
  --button-097-border-radius: 1.5em;
  --button-097-dot-border-radius: 0.25em;
  --button-097-padding-right: 0.75em;
  --button-097-padding-left: 1em;
  --button-097-gap: 0.375em;
  --button-097-dot-size: 0.5em;
  --button-097-focus-inset: -0.125em;
  --button-097-ease-hover: cubic-bezier(0.32, 0.72, 0, 1);
  --button-097-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button-097 {
  --button-097-padding: 0.75em calc(var(--button-097-padding-right) + var(--button-097-gap) + var(--button-097-dot-size)) 0.75em var(--button-097-padding-left);
  --button-097-offset: calc((var(--button-097-padding-right) + var(--button-097-gap) + var(--button-097-dot-size) - var(--button-097-padding-left)) / 2);
  -webkit-tap-highlight-color: transparent;
}

.button-097:is(:focus-visible)::after {
  box-shadow: 0 0 0 0.125em var(--button-097-color-focus);
}

.button-097::after {
  content: '';
  display: block;
  position: absolute;
  inset: var(--button-097-focus-inset);
  border-radius: var(--button-097-border-radius);
  transition: box-shadow 0.3s var(--button-097-ease-focus);
  pointer-events: none;
  z-index: 1;
}

.button-097__text {
  will-change: transform;
  transition: translate 0.55s var(--button-097-ease-hover);
}

.button-097__hover {
  clip-path: inset(calc(50% - var(--button-097-dot-size) * 0.5) var(--button-097-padding-right) calc(50% - var(--button-097-dot-size) * 0.5) calc(100% - (var(--button-097-dot-size) + var(--button-097-padding-right))) round var(--button-097-dot-border-radius));
  transition: clip-path 0.55s var(--button-097-ease-hover);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  .button-097:is(:hover, :focus-visible) .button-097__hover,
  [data-hover]:is(:hover, :focus-visible) .button-097 .button-097__hover {
    clip-path: inset(0% 0% 0% 0% round var(--button-097-border-radius));
    transition-delay: 0.05s;
  }

  .button-097:is(:hover, :focus-visible) .button-097__text,
  [data-hover]:is(:hover, :focus-visible) .button-097 .button-097__text {
    translate: var(--button-097-offset) 0 0;
    transition-delay: 0.05s;
  }
}

.parallax-slider__group {
  width: auto;
  /* WICHTIG: hebt width:100% auf, sonst wird margin-right ignoriert */
  margin-right: calc(50% - 50vw);
}

[data-layout-status="large"] {
  --columns: 2;
  --column-gap: 1.5em;
}

[data-layout-status="small"] {
  --columns: 4;
  --column-gap: 1em;
}

[data-layout-grid-item] {
  width: calc((100% - (var(--columns) - 1) * var(--column-gap)) / var(--columns));
}

[data-layout-grid-item-title] {
  transition: all 0.8s cubic-bezier(0.65, 0, 0.1, 1);
}

/* Change card layout while we're in grid mode */
[data-layout-status="large"] [data-layout-grid-item] .layout-grid__card-sub {
  transition-delay: 0.6s;
}

/* Change card layout while we're in list mode */
[data-layout-status="small"] [data-layout-grid-item] .layout-grid__card-title {
  font-size: 1em;
}

[data-layout-status="small"] [data-layout-grid-item] .layout-grid__card-sub {
  opacity: 0;
  pointer-events: none;
}

/* Define layout sizes per breakpoint */
@media screen and (max-width: 767px) {
  [data-layout-status="large"] {
    --columns: 1;
    --column-gap: 0em;
  }

  [data-layout-status="small"] {
    --columns: 2;
    --column-gap: 1em;
  }
}

[data-directional-hover-tile] {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(-100%);
  will-change: transform;
}

/* ---- Directional List: Light-Theme Farben ---- */

/* Text im Default dunkel (statt weiß/unsichtbar) – sanfter Übergang */
.directional-list__item .direcitonal-list__p {
  color: #000;
  transition: color 0.4s ease;
}

/* Header-Eyebrow (Award / Client / Year) ebenfalls dunkel */
.direcitonal-list__eyebrow {
  color: #000;
}

/* Auf Hover: Text weiß, damit er auf dem dunklen Balken lesbar bleibt */
.directional-list__item:hover .direcitonal-list__p {
  color: #fff;
}

/* Trennlinien im Default leicht grau */
.directional-list__border {
  background-color: #eee;
}

/* ===== Navbar-Feinschliff (komplett & sauber) ===== */

/* 1) Labels + Social nur im mobilen Menü */
@media screen and (min-width: 992px) {

  [data-nav-mobile-label],
  .nav-link-social {
    display: none;
  }
}

/* 2) Mobiles Menü – Aussehen (Slide macht Webflow nativ) */
@media screen and (max-width: 991px) {

  .nav-link-wrap,
  .w-nav-overlay {
    background-color: #000;
  }

  .nav-link-wrap {
    padding: 2rem 5vw 2.5rem;
  }

  /* Balken beim Öffnen schwarz → Logo/X sichtbar + durchgehende Fläche */
  .navbar {
    transition: background-color 0.55s ease-in-out;
  }

  .navbar:has(.w--open) {
    background-color: #000;
  }

  .navbar .nav-logo,
  .navbar .menu-button {
    position: relative;
    z-index: 60;
  }
}

/* FIX: Nav-Links IMMER sichtbar (überschreibt das Reveal-JS, das sie versteckt) */
.nav-link,
.nav-link-list,
.nav-link-social,
[data-nav-mobile-label] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Logo + Hamburger hell im offenen Zustand */
.navbar:has(.w--open) .nav-logo,
.navbar:has(.w--open) .menu-button,
.navbar:has(.w--open) .menu-button .w-icon-nav-menu {
  color: #fff;
}

/* 3) Hamburger → X */
@media screen and (max-width: 991px) {
  .menu-button {
    position: relative;
  }

  .menu-button .w-icon-nav-menu {
    font-size: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease;
  }

  .menu-button::before,
  .menu-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background-color: currentColor;
    transition: transform 0.3s ease;
  }

  .menu-button::before {
    transform: translate(-50%, -50%) translateY(-7px);
  }

  .menu-button::after {
    transform: translate(-50%, -50%) translateY(7px);
  }

  .navbar:has(.w--open) .menu-button .w-icon-nav-menu {
    opacity: 0;
  }

  .navbar:has(.w--open) .menu-button::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .navbar:has(.w--open) .menu-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* ============================================
   A11Y: Sichtbarer Tastatur-Fokus (WCAG 2.4.7)
   ============================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn-magnetic__click:focus-visible,
.menu-button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
  /* weißer Halo → sichtbar auf hellem UND dunklem Grund */
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .9);
  border-radius: 3px;
}

/* Maus-Klick/Tap zeigt KEINEN Ring – nur echte Tastatur-Navigation */
:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   A11Y: Skip-Link „Zum Inhalt springen"
   ============================================ */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transform: translateY(-120%);
  padding: .75rem 1.25rem;
  background: #000;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.wf-design-mode .loader {
  display: none;
}

[data-load-reset] {
  opacity: 0;
}

.wf-design-mode .loader {
  display: none;
}

[data-load-reset] {
  opacity: 0;
}