/* ── STW Custom Preloader ── */
.stw-preloader-ui {
  display: grid;
  place-items: center;
  gap: 18px;
  text-align: center;
}
.stw-loader-orbit {
  position: relative;
  width: 168px;
  height: 168px;
  animation: stw-loader-spin 12s linear infinite;
}
.stw-loader-orbit svg:first-child {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.stw-loader-orbit text {
  fill: var(--stw-red, #c91624);
  letter-spacing: 2px;
  font-size: 9px;
  font-family: 'BDO Grotesk', sans-serif;
  text-transform: uppercase;
}
.stw-loader-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
}
.stw-loader-core svg {
  width: 52px;
  height: auto;
}
.stw-home:not(.dark) .stw-loader-core {
  color: #1d1d1b;
}
.stw-loader-progress {
  color: #ffffff;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  font-family: 'BDO Grotesk', sans-serif;
}
.stw-home:not(.dark) .stw-loader-progress {
  color: #1d1d1b;
}
.stw-loader-subline {
  margin-top: -6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'BDO Grotesk', sans-serif;
}
.stw-home:not(.dark) .stw-loader-subline {
  color: rgba(29, 29, 27, 0.55);
}
@keyframes stw-loader-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Steppenwolf phase-1 homepage */
:root {
  --stw-paper: #f4f2ec;
  --stw-paper-2: #ebe7dd;
  --stw-ink: #1d1d1b;
  --stw-muted: #67645d;
  --stw-line: rgba(29, 29, 27, 0.14);
  --stw-red: #c91624;
  --stw-red-dark: #9f1420;
  --stw-steel: #d7dde0;
  --stw-forest: #293e38;
  --stw-dark: #111312;
  --stw-dark-2: #191c1b;
  --stw-dark-muted: #b6b3aa;
  --stw-font-body: "BDOGrotesk-Regular", "Neue Kabel", "Instrument Sans", Arial, sans-serif;
  --stw-font-display: "Thunder", "Meursault VF", "BDOGrotesk-Regular", Arial, sans-serif;
  --stw-sticky-offset: 122px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--stw-sticky-offset);
}

body.stw-home {
  color: var(--stw-ink);
  background: var(--stw-paper);
  font-family: var(--stw-font-body);
  --stw-brand-reveal-target: var(--stw-ink);
}

body.stw-home.dark {
  color: #f4f2ec;
  background: var(--stw-dark);
  --stw-brand-reveal-target: #f4f2ec;
}

.stw-home a {
  color: inherit;
}

/* a-elements with .stw-btn must override the color:inherit above (specificity 0,1,1 tie → later rule wins) */
.stw-home a.stw-btn {
  color: var(--stw-paper);
  text-decoration: none;
}
.stw-home a.stw-btn.is-ghost {
  color: var(--stw-ink);
  text-decoration: none;
}
/* hover: needs even higher specificity (0,3,2) to beat the base rules above */
.stw-home a.stw-btn:hover {
  color: #fff;
}
.stw-home a.stw-btn.is-ghost:hover {
  color: var(--stw-paper);
}
.stw-home.dark a.stw-btn {
  color: var(--stw-dark);
}
.stw-home.dark a.stw-btn.is-ghost {
  color: #f4f2ec;
}
.stw-home.dark a.stw-btn:hover,
.stw-home.dark a.stw-btn.is-ghost:hover {
  color: #fff;
}

.stw-home img,
.stw-home video {
  max-width: 100%;
}

/* Multiply blend: weißer Bildhintergrund wird transparent im Light Mode */
/* client-box img ausgenommen – hat eigenes filter:invert und darf kein multiply bekommen */
.stw-home:not(.dark) .stw-bike-card__img,
.stw-home:not(.dark) .stw-alt-card img,
.stw-home:not(.dark) .stw-detail-card__image-wrap img,
.stw-home:not(.dark) .stw-feature-block__image img,
.stw-home:not(.dark) .stw-gallery-swiper img,
.stw-home:not(.dark) .stw-model-card img,
.stw-home:not(.dark) .stw-card-video {
  mix-blend-mode: multiply;
}

.stw-home .rr-bg-light,
.stw-home main {
  background: var(--stw-paper);
  color: var(--stw-ink);
  transition: background 0.35s ease, color 0.35s ease;
}

.stw-home.dark .rr-bg-light,
.stw-home.dark main {
  background: var(--stw-dark);
  color: #f4f2ec;
}

.stw-container {
  width: min(100% - 40px, 1680px);
  margin: 0 auto;
}

.stw-section {
  position: relative;
  padding: clamp(84px, 12vw, 190px) 0;
  overflow: hidden;
}

.stw-section.is-tight {
  padding: clamp(56px, 8vw, 120px) 0;
}

.stw-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--stw-red);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.stw-kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: currentColor;
}

.stw-display {
  margin: 0;
  color: currentColor;
  font-family: var(--stw-font-display);
  font-size: clamp(58px, 12vw, 190px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.82;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 200px;
}

/* ── Scramble Headline ── */
.stw-scramble .stw-char {
  display: inline-block;
}
.stw-scramble .stw-char--space {
  display: inline-block;
  width: 0.28em;
}

.stw-headline {
  margin: 0;
  color: currentColor;
  font-size: clamp(40px, 7vw, 112px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.94;
  text-wrap: balance;
}

.stw-copy {
  margin: 0;
  max-width: 66ch;
  color: var(--stw-muted);
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.45;
}

.stw-home.dark .stw-copy {
  color: var(--stw-dark-muted);
}

.stw-small {
  color: var(--stw-muted);
  font-size: 14px;
  line-height: 1.5;
}

.stw-home.dark .stw-small {
  color: var(--stw-dark-muted);
}

.stw-btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid var(--stw-ink);
  border-radius: 0;
  background: var(--stw-ink);
  color: var(--stw-paper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease, border-color 0.24s ease;
}

.stw-hero .stw-btn {
  color: #f4f2ec !important;
}

.stw-hero .stw-btn.is-ghost {
  color: var(--stw-ink) !important;
}

.stw-hero .stw-btn.is-ghost:hover,
.stw-hero .stw-btn.is-ghost:focus {
  color: #f4f2ec !important;
  background: var(--stw-ink) !important;
  border-color: var(--stw-ink) !important;
}

.stw-btn:hover {
  transform: translateY(-2px);
  background: var(--stw-red);
  border-color: var(--stw-red);
  color: #fff;
}

.stw-btn:active {
  transform: translateY(0) scale(0.98);
}

.stw-btn.is-ghost {
  background: transparent;
  color: var(--stw-ink);
}

.stw-btn.is-ghost:hover {
  background: var(--stw-ink);
  color: var(--stw-paper);
}

.stw-home.dark .stw-btn {
  border-color: #f4f2ec;
  background: #f4f2ec;
  color: var(--stw-dark);
}

/* Hero overrides cream text with !important – fix for dark mode */
.stw-home.dark .stw-hero .stw-btn {
  color: var(--stw-dark) !important;
}

.stw-home.dark .stw-btn.is-ghost {
  background: transparent;
  color: #f4f2ec;
  border-color: #f4f2ec;
}

.stw-home.dark .stw-hero .stw-btn.is-ghost {
  background: transparent;
  color: #f4f2ec !important;
  border-color: #f4f2ec;
}

.stw-home.dark .stw-btn:hover,
.stw-home.dark .stw-btn.is-ghost:hover {
  border-color: var(--stw-red);
  background: var(--stw-red);
  color: #fff;
}

.stw-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(244, 242, 236, 0.82);
  backdrop-filter: blur(18px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* At-top state: transparent header over dark hero video */
.stw-header.stw-at-top {
  background: rgba(17, 19, 18, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

.stw-home.dark .stw-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: rgba(17, 19, 18, 0.78);
}

.stw-header .header-area-8__inner {
  min-height: 82px;
}

.stw-header .header__logo img {
  width: min(230px, 44vw);
  height: auto;
  max-height: 42px;
}

.stw-logo-invert {
  filter: invert(1) brightness(1.15);
}

.stw-header .main-menu > ul {
  gap: clamp(18px, 2.5vw, 36px);
}

.stw-header .main-menu li a {
  color: var(--stw-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stw-home.dark .stw-header .main-menu li a {
  color: #f4f2ec;
}

.stw-nav-cta {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid currentColor;
  background: transparent !important;
  color: var(--stw-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stw-home.dark .stw-nav-cta {
  background: transparent !important;
  color: #f4f2ec;
}

.stw-nav-cta:hover,
.stw-nav-cta:focus {
  background: var(--stw-ink) !important;
  border-color: var(--stw-ink);
  color: var(--stw-paper);
}

.stw-home.dark .stw-nav-cta:hover,
.stw-home.dark .stw-nav-cta:focus {
  background: #f4f2ec !important;
  border-color: #f4f2ec;
  color: var(--stw-dark);
}

.stw-mobile-menu {
  color: var(--stw-ink);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stw-home.dark .stw-mobile-menu {
  color: #f4f2ec;
}

.stw-hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  padding: 116px 0 42px;
  overflow: hidden;
  background: var(--stw-paper);
}

.stw-home.dark .stw-hero {
  background: var(--stw-dark);
}

.stw-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.stw-hero__media img,
.stw-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  transform: scale(1.04);
  filter: saturate(0.92) contrast(1.03);
}

.stw-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(244, 242, 236, 0.98) 0%, rgba(244, 242, 236, 0.76) 34%, rgba(244, 242, 236, 0.16) 72%),
    linear-gradient(0deg, rgba(244, 242, 236, 0.92), rgba(244, 242, 236, 0.04) 44%);
}

.stw-home.dark .stw-hero__shade {
  background:
    linear-gradient(90deg, rgba(17, 19, 18, 0.96) 0%, rgba(17, 19, 18, 0.74) 38%, rgba(17, 19, 18, 0.12) 78%),
    linear-gradient(0deg, rgba(17, 19, 18, 0.98), rgba(17, 19, 18, 0.02) 48%);
}

.stw-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(300px, 0.38fr);
  gap: clamp(32px, 8vw, 120px);
  align-items: end;
}

.stw-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--stw-red);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stw-hero__copy {
  align-self: end;
  padding: 24px 0 8px;
}

.stw-hero__copy p {
  color: var(--stw-muted);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.25;
}

.stw-home.dark .stw-hero__copy p {
  color: var(--stw-dark-muted);
}

.stw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.stw-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(52px, 10vh, 110px);
  border: 1px solid var(--stw-line);
  background: var(--stw-line);
}

.stw-metric {
  min-height: 122px;
  padding: 22px;
  background: rgba(244, 242, 236, 0.82);
}

.stw-home.dark .stw-metric {
  background: rgba(17, 19, 18, 0.8);
}

.stw-metric strong {
  display: block;
  margin-bottom: 12px;
  font-family: var(--stw-font-display);
  font-size: clamp(38px, 6vw, 82px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.82;
  text-transform: uppercase;
}

.stw-metric span {
  color: var(--stw-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.stw-home.dark .stw-metric span {
  color: var(--stw-dark-muted);
}

.stw-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(320px, 0.42fr);
  gap: clamp(40px, 8vw, 130px);
  align-items: start;
}

.stw-intro-copy {
  display: grid;
  gap: 24px;
}

.stw-statement {
  max-width: 980px;
  font-size: clamp(28px, 4.2vw, 70px);
  font-weight: 500;
  line-height: 1.02;
  text-wrap: balance;
}

.stw-statement em {
  color: var(--stw-red);
  font-style: normal;
}

.stw-brand-reveal {
  position: relative;
}

.stw-brand-reveal .stw-brand-reveal-line {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.stw-brand-reveal .stw-brand-reveal-line.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: saturate(1);
}

.stw-brand-reveal .stw-reveal-line {
  display: block;
  opacity: 0;
  transform: translateY(48px);
  filter: blur(6px);
  color: color-mix(in srgb, var(--stw-muted) 30%, transparent);
  will-change: opacity, transform, filter, color;
}

.stw-home.dark .stw-brand-reveal .stw-reveal-line {
  opacity: 0;
  color: color-mix(in srgb, #f4f2ec 20%, var(--stw-dark-muted) 80%);
  filter: blur(5px);
}

.stw-dealer .stw-brand-reveal .stw-reveal-line {
  opacity: 0.28;
  color: rgba(244, 242, 236, 0.6);
  filter: blur(1.4px);
}

.stw-dealer .stw-brand-reveal .stw-reveal-line.is-visible {
  color: #f4f2ec;
}

.stw-home.dark .stw-dealer .stw-brand-reveal .stw-reveal-line {
  opacity: 0.34;
  color: color-mix(in srgb, #f4f2ec 58%, var(--stw-dark-muted) 42%);
}

.stw-media-stack {
  display: grid;
  gap: 18px;
}

.stw-media-card {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  background: var(--stw-paper-2);
}

.stw-media-card.is-tall {
  min-height: 540px;
}

.stw-media-card img,
.stw-media-card video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
}

/* Images with data-speed need extra height so ScrollSmoother
   parallax translation never exposes the card background.
   Use 400px buffer per side to cover any viewport size */
.stw-media-card img[data-speed],
.stw-media-card video[data-speed] {
  height: calc(100% + 800px);
  margin-top: -400px;
  min-height: unset;
}

.stw-media-card figcaption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 8px 10px;
  background: rgba(244, 242, 236, 0.84);
  color: var(--stw-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stw-home.dark .stw-media-card figcaption {
  background: rgba(17, 19, 18, 0.82);
  color: #f4f2ec;
}

.stw-carbon {
  background:
    linear-gradient(180deg, var(--stw-paper) 0%, var(--stw-paper-2) 100%);
}

.stw-home.dark .stw-carbon {
  background:
    linear-gradient(180deg, var(--stw-dark) 0%, var(--stw-dark-2) 100%);
}

.stw-carbon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: stretch;
}

.stw-carbon-panel {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 620px;
  padding: clamp(26px, 5vw, 70px);
  background: var(--stw-ink);
  color: #f4f2ec;
  overflow: hidden;
}

.stw-carbon-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}

.stw-carbon-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 19, 18, 0.08), rgba(17, 19, 18, 0.82));
}

.stw-carbon-panel > *:not(video) {
  position: relative;
  z-index: 1;
}

.stw-carbon-side {
  display: grid;
  gap: 18px;
}

.stw-tech-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 172px;
  padding: 24px;
  border-top: 1px solid var(--stw-line);
  position: relative;
  overflow: hidden;
  transition: background 0.35s ease;
  cursor: default;

  /* Einblend-Animation */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.35s ease;
}
.stw-tech-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.stw-carbon-side .stw-tech-card:nth-child(2).is-visible { transition-delay: 0.1s; }
.stw-carbon-side .stw-tech-card:nth-child(3).is-visible { transition-delay: 0.2s; }

/* Roter Akzentbalken */
.stw-tech-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px;
  height: 100%;
  background: var(--stw-red, #c91624);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stw-tech-card:hover::before {
  transform: scaleY(1);
}
.stw-tech-card:hover {
  background: rgba(201, 22, 36, 0.04);
}
.stw-home.dark .stw-tech-card:hover {
  background: rgba(201, 22, 36, 0.08);
}

.stw-tech-card img {
  width: 120px;
  aspect-ratio: 1 / 0.74;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}
.stw-tech-card:hover img {
  transform: scale(1.06);
  opacity: 0.85;
}

.stw-home.dark .stw-tech-card img {
  mix-blend-mode: normal;
  background: #f4f2ec;
}

.stw-tech-card h3,
.stw-model-card h3,
.stw-service-card h3 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 600;
  line-height: 1;
}
.stw-tech-card h3 {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}
.stw-tech-card:hover h3 {
  transform: translateX(6px);
  color: var(--stw-red, #c91624);
}

.stw-tech-card p,
.stw-model-card p,
.stw-service-card p {
  margin: 0;
  color: var(--stw-muted);
  line-height: 1.45;
}

.stw-home.dark .stw-tech-card p,
.stw-home.dark .stw-model-card p,
.stw-home.dark .stw-service-card p {
  color: var(--stw-dark-muted);
}

.stw-carousel-lead {
  display: grid;
  grid-template-columns: minmax(0, 0.48fr) minmax(320px, 0.52fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: end;
  margin-bottom: 40px;
}

.stw-carousel-lead__right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stw-carousel-lead__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.stw-home .parallax-slider-wrapper {
  height: 100dvh;
  margin-left: 0;
  border-top: 1px solid var(--stw-line);
  border-bottom: 1px solid var(--stw-line);
  position: relative;
  cursor: grab;
}

.stw-home .parallax-slider-wrapper.is-dragging {
  cursor: grabbing;
}

.stw-home .parallax-slider-inner {
  height: 100dvh;
  gap: 14px;
  padding-top: 84px;
}

.stw-home .parallax-slider-item {
  width: clamp(330px, 34vw, 620px);
  display: grid;
  grid-template-rows: 1fr auto;
  height: min(100%, 900px);
  background: var(--stw-paper-2);
  overflow: hidden;
}

.stw-home .parallax-slider-item > a {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: inherit;
}

.stw-home .parallax-slider-item img {
  display: block;
  width: calc(100% + 22vw);
  min-width: calc(100% + 22vw);
  max-width: none;
  height: 100%;
  margin-left: -11vw;
  object-fit: cover;
  object-position: center center;
}

.stw-home .parallax-slider-item .content {
  padding: 14px 8px 0;
}

.stw-home .parallax-slider-item .title {
  margin: 0;
  color: var(--stw-ink);
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.95;
  text-transform: uppercase;
}

.stw-home.dark .parallax-slider-item .title {
  color: #f4f2ec;
}

.stw-home .parallax-slider-item .tag,
.stw-home .parallax-slider-item .date {
  color: var(--stw-red);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.stw-home.dark .parallax-slider-item {
  background: var(--stw-dark-2);
}

.stw-model-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 18px;
  margin-top: 46px;
}

.stw-model-card {
  display: grid;
  min-height: 560px;
  align-content: end;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--stw-line);
  background: var(--stw-paper-2);
  overflow: hidden;
}

.stw-model-card img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
  transform: scale(1.08);
  transition: transform 0.45s ease;
}

.stw-model-card:hover img {
  transform: scale(1.12) translateY(-4px);
}

/* ── Card Hover Video ── */
.stw-model-card > a {
  position: relative;
}
.stw-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  border-radius: inherit;
}
.stw-model-card:hover .stw-card-video {
  opacity: 1;
}
.stw-model-card:hover img {
  opacity: 0;
}

.stw-home.dark .stw-model-card {
  background: var(--stw-dark-2);
}

/* In dark mode: give the image link a cream backdrop so multiply-blend
   erases the JPG's cream background — same seamless float as light mode */
.stw-home.dark .stw-model-card > a {
  display: block;
  background: #f4f2ec;
  margin: calc(-1 * clamp(22px, 3vw, 40px));
  margin-bottom: 0;
  padding: clamp(22px, 3vw, 40px);
  padding-bottom: clamp(16px, 2.5vw, 28px);
}

.stw-home.dark .stw-model-card img {
  mix-blend-mode: multiply;
  background: unset;
}

.stw-model-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 16px;
}

.stw-chip {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--stw-line);
  color: var(--stw-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stw-home.dark .stw-chip {
  color: var(--stw-dark-muted);
}

.stw-dealer {
  position: relative;
  background: var(--stw-ink);
  color: #f4f2ec;
  padding-top: clamp(116px, 14vw, 210px);
  overflow: hidden;
}

.stw-dealer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../steppenwolf/lifestyle/tao-light-mood.jpg');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.12;
  z-index: 1;
}

/* Video background inside dealer section */
.stw-dealer__video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}

/* Dark gradient overlay over video for text readability */
.stw-dealer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14,12,10,0.78) 0%, rgba(14,12,10,0.52) 100%);
  z-index: 3;
  pointer-events: none;
}

.stw-dealer .stw-container {
  position: relative;
  z-index: 4;
}

/* Bayern Rauten-Muster statt rotem Strich beim Dealer-Kicker */
.stw-dealer .stw-kicker {
  color: #fff;
}
.stw-dealer .stw-kicker::before {
  width: 36px;
  height: 14px;
  background:
    linear-gradient(45deg, #009BD4 25%, #fff 25%, #fff 75%, #009BD4 75%) 0 0 / 7px 7px,
    linear-gradient(45deg, #009BD4 25%, #fff 25%, #fff 75%, #009BD4 75%) 3.5px 3.5px / 7px 7px;
  background-color: #009BD4;
  border-radius: 1px;
}

.stw-home.dark .stw-dealer {
  background: #090a0a;
}

#haendler,
#dealer-map-anchor {
  scroll-margin-top: var(--stw-sticky-offset);
}

#dealer-map-anchor {
  display: block;
  position: relative;
  height: 1px;
  margin-top: calc(var(--stw-sticky-offset) * -1);
  padding-top: var(--stw-sticky-offset);
  pointer-events: none;
}

.stw-dealer .stw-btn {
  border-color: rgba(244, 242, 236, 0.85);
  color: #111312;
  background: #f4f2ec;
}

.stw-dealer .stw-btn.is-ghost {
  border-color: rgba(244, 242, 236, 0.95);
  color: #f4f2ec;
  background: transparent;
}

.stw-dealer .stw-btn.is-ghost:hover {
  border-color: var(--stw-red);
  background: var(--stw-red);
  color: #ffffff;
}

/* Dealer section buttons – specificity (0,3,1) beats .stw-home a.stw-btn (0,2,1) */
.stw-dealer a.stw-dealer-cta {
  color: #111312 !important;
  background: #f4f2ec !important;
  border-color: rgba(244, 242, 236, 0.85) !important;
  text-decoration: none;
}

.stw-dealer a.stw-dealer-cta.is-ghost {
  color: #f4f2ec !important;
  background: transparent !important;
  border-color: rgba(244, 242, 236, 0.95) !important;
}

.stw-dealer a.stw-dealer-cta:hover,
.stw-dealer a.stw-dealer-cta.is-ghost:hover {
  color: #ffffff !important;
  background: var(--stw-red) !important;
  border-color: var(--stw-red) !important;
  transform: translateY(-2px);
}

.stw-dealer .stw-copy,
.stw-dealer .stw-small {
  color: #d5d1c6;
}

.stw-dealer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.stw-dealer-note {
  max-width: 70ch;
}

.stw-dealer-map-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid rgba(244, 242, 236, 0.2);
  border-bottom: 1px solid rgba(244, 242, 236, 0.2);
}

.stw-dealer-map {
  width: 100%;
  height: clamp(520px, 74vh, 860px);
  background: #f4f2ec;
}

.stw-dealer-map iframe,
.stw-dealer-map > div,
.stw-dealer-map [data-locafy-directory] {
  width: 100% !important;
  height: 100% !important;
}

.stw-reveal-wrap {
  position: relative;
  overflow: hidden;
}

.stw-cta-reveal {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--stw-paper);
}

.stw-home.dark .stw-cta-reveal {
  background: var(--stw-dark);
}

.stw-cta-reveal__inner {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.stw-cta-reveal__bg {
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, #009BD4 25%, #fff 25%, #fff 75%, #009BD4 75%) 0 0 / 28px 28px,
    linear-gradient(45deg, #009BD4 25%, #fff 25%, #fff 75%, #009BD4 75%) 14px 14px / 28px 28px;
  background-color: #009BD4;
  z-index: -1;
}

.stw-cta-reveal__content {
  text-align: center;
  width: min(100% - 40px, 1600px);
  overflow: hidden;
}

.stw-cta-reveal__title {
  margin: 0;
  color: var(--stw-ink);
  font-family: var(--stw-font-display);
  font-size: clamp(58px, 13vw, 220px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.82;
  text-transform: uppercase;
  white-space: normal;
  text-align: center;
  transform-origin: center center;
}

.stw-home.dark .stw-cta-reveal__title {
  color: #f4f2ec;
}

.stw-cta-reveal__overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0;
  border: none;
  background: transparent;
}

.stw-home.dark .stw-cta-reveal__overlay {
  background: transparent;
}

.stw-cta-reveal__panel {
  width: min(100% - 40px, 980px);
  border: 1px solid rgba(244, 242, 236, 0.2);
  background: rgba(244, 242, 236, 0.04);
  padding: clamp(24px, 4vw, 54px);
}

.stw-cta-reveal__map-frame {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.stw-cta-reveal__map-head {
  padding: 16px 18px;
  background: rgba(9, 10, 10, 0.85);
  border-bottom: 1px solid rgba(244, 242, 236, 0.2);
}

.stw-cta-reveal__map-head h3 {
  margin: 0 0 20px;
  color: #f4f2ec;
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1;
  text-transform: uppercase;
}

.stw-cta-reveal__map {
  width: 100%;
  height: 100% !important;
  background: #f4f2ec;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

.stw-cta-reveal__map iframe,
.stw-cta-reveal__map > div,
.stw-cta-reveal__map [data-locafy-directory] {
  width: 100% !important;
  height: 100% !important;
}

.stw-cta-reveal__map .locafy-directory-shell {
  height: 100% !important;
  overflow: hidden !important;
}

.stw-dealer-form {
  display: grid;
  gap: 12px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(244, 242, 236, 0.22);
  background: rgba(244, 242, 236, 0.06);
}

.stw-field {
  display: grid;
  gap: 8px;
}

.stw-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stw-field input,
.stw-field select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(244, 242, 236, 0.26);
  border-radius: 0;
  background: rgba(244, 242, 236, 0.08);
  color: #f4f2ec;
  outline: none;
}

.stw-field input::placeholder {
  color: rgba(244, 242, 236, 0.58);
}

.stw-field input:focus,
.stw-field select:focus {
  border-color: var(--stw-red);
}

.stw-field select option {
  color: var(--stw-ink);
}

.stw-supplier-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr);
  gap: clamp(34px, 6vw, 90px);
  align-items: start;
}

.stw-logo-cloud {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--stw-line);
  background: var(--stw-line);
  gap: 1px;
}

.stw-logo-tile {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 28px 36px;
  background: var(--stw-paper);
  overflow: hidden;
  /* initial state for entrance animation */
  opacity: 0;
  transform: translateY(18px);
}

/* PNG logos — silhouette in ink color so they always read */
.stw-logo-tile img {
  max-width: 210px;
  max-height: 78px;
  width: 100%;
  object-fit: contain;
  display: block;
  /* force to --stw-ink (#1d1d1b ≈ brightness(0)) */
  filter: brightness(0) opacity(0.80);
  /* CSS handles filter shift on hover; anime.js handles scale */
  transition: filter 0.32s ease;
  will-change: transform;
}

/* Hover: reveal original brand colors */
.stw-logo-tile:hover img {
  filter: brightness(1) opacity(1) saturate(1.2);
}

/* Dark mode: invert silhouette to near-white */
.stw-home.dark .stw-logo-tile {
  background: var(--stw-dark-2);
}
.stw-home.dark .stw-logo-tile img {
  filter: brightness(0) invert(1) opacity(0.82);
}
.stw-home.dark .stw-logo-tile:hover img {
  filter: brightness(1) invert(0) opacity(1) saturate(1.2);
}

.stw-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 44px;
  border: 1px solid var(--stw-line);
  background: var(--stw-line);
}

.stw-service-card {
  min-height: 260px;
  padding: clamp(24px, 3vw, 38px);
  background: var(--stw-paper);
}

.stw-home.dark .stw-service-card {
  background: var(--stw-dark-2);
}

.stw-warning {
  border-top: 1px solid var(--stw-line);
  border-bottom: 1px solid var(--stw-line);
}

.stw-warning-inner {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.stw-warning strong {
  color: var(--stw-red);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stw-footer {
  padding: 70px 0 38px;
  background: var(--stw-paper-2);
}

.stw-home.dark .stw-footer {
  background: #0d0f0e;
}

.stw-footer-grid {
  display: grid;
  grid-template-columns: 1fr repeat(3, minmax(150px, 0.22fr));
  gap: 34px;
}

.stw-footer img {
  width: min(320px, 60vw);
}

.stw-home.dark .stw-footer img {
  filter: invert(1) brightness(1.15);
}

.stw-footer h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stw-footer a,
.stw-footer p {
  color: var(--stw-muted);
}

.stw-home.dark .stw-footer a,
.stw-home.dark .stw-footer p {
  color: var(--stw-dark-muted);
}

.stw-footer-list {
  display: grid;
  gap: 8px;
}

.stw-footer-list a {
  position: relative;
  transition: color 0.3s ease;
}

.stw-footer-list a:hover {
  color: var(--stw-red);
}

.stw-copyright {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 66px;
  padding-top: 24px;
  border-top: 1px solid var(--stw-line);
  color: var(--stw-muted);
  font-size: 13px;
}

.stw-home.dark .stw-copyright {
  color: var(--stw-dark-muted);
}

.stw-home .switcher-button {
  width: 52px;
  height: 52px;
  border-radius: 0;
  border-color: var(--stw-line);
  box-shadow: 0 18px 40px rgba(29, 29, 27, 0.16);
}

.stw-home .switcher-button.light-mode {
  background: var(--stw-paper);
}

.stw-home .switcher-button.dark-mode {
  background: var(--stw-dark-2);
}

.stw-home .switcher-button-inner i.icon-light {
  color: var(--stw-red);
}

@media (max-width: 1199px) {
  :root {
    --stw-sticky-offset: 102px;
  }

  .stw-header .header__nav {
    display: none;
  }

  .stw-hero__content,
  .stw-intro-grid,
  .stw-carbon-grid,
  .stw-carousel-lead,
  .stw-supplier-grid {
    grid-template-columns: 1fr;
  }

  .stw-hero {
    align-items: end;
  }

  .stw-hero__copy {
    max-width: 620px;
  }

  .stw-model-grid {
    grid-template-columns: 1fr;
  }

  .stw-model-card:nth-child(3) {
    margin-top: 0;
  }

  .stw-cta-reveal__bg {
    width: 300px;
    height: 300px;
  }

  .stw-cta-reveal__overlay {
    left: 24px;
    right: 24px;
    top: 56px;
    bottom: 36px;
  }
}

@media (max-width: 767px) {
  :root {
    --stw-sticky-offset: 86px;
  }

  .stw-container {
    width: min(100% - 28px, 1680px);
  }

  .stw-section {
    padding: 72px 0;
  }

  .stw-header .header-area-8__inner {
    min-height: 68px;
  }

  .stw-hero {
    min-height: 92dvh;
    padding-top: 92px;
  }

  .stw-hero__media img {
    object-position: 70% center;
  }

  .stw-hero__shade {
    background:
      linear-gradient(180deg, rgba(244, 242, 236, 0.94) 0%, rgba(244, 242, 236, 0.76) 42%, rgba(244, 242, 236, 0.96) 100%),
      linear-gradient(90deg, rgba(244, 242, 236, 0.88), rgba(244, 242, 236, 0.2));
  }

  .stw-home.dark .stw-hero__shade {
    background:
      linear-gradient(180deg, rgba(17, 19, 18, 0.94) 0%, rgba(17, 19, 18, 0.68) 42%, rgba(17, 19, 18, 0.98) 100%),
      linear-gradient(90deg, rgba(17, 19, 18, 0.86), rgba(17, 19, 18, 0.2));
  }

  .stw-metrics,
  .stw-service-grid,
  .stw-footer-grid,
  .stw-warning-inner {
    grid-template-columns: 1fr;
  }

  .stw-metric {
    min-height: 98px;
  }

  .stw-carbon-panel {
    min-height: 480px;
  }

  .stw-tech-card {
    grid-template-columns: 86px minmax(0, 1fr);
    padding: 18px 0;
  }

  .stw-tech-card img {
    width: 86px;
  }

  .stw-dealer-map {
    height: min(72vh, 640px);
  }

  .stw-cta-reveal__bg {
    width: 200px;
    height: 200px;
  }

  .stw-cta-reveal__title {
    font-size: clamp(46px, 12vw, 94px);
    white-space: nowrap;
  }

  .stw-cta-reveal__overlay {
    left: 14px;
    right: 14px;
    top: 36px;
    bottom: 20px;
  }

  .stw-cta-reveal__map-head {
    padding: 12px;
  }

  .stw-home .parallax-slider-wrapper,
  .stw-home .parallax-slider-inner {
    height: auto;
    min-height: 0;
  }

  .stw-home .parallax-slider-wrapper {
    overflow-x: auto;
    padding: 20px 0 34px;
  }

  .stw-home .parallax-slider-inner {
    width: max-content;
    padding-top: 0;
  }

  .stw-home .parallax-slider-item {
    width: min(82vw, 360px);
    height: 560px;
  }

  .stw-home .parallax-slider-item img {
    width: calc(100% + 14vw);
    min-width: calc(100% + 14vw);
    height: 72%;
    margin-left: -7vw;
  }

  .stw-logo-cloud {
    grid-template-columns: 1fr;
  }

  .stw-copyright {
    display: grid;
  }

  .stw-instagram-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ── Instagram Section ──────────────────────────────────── */
.stw-instagram {
  background: var(--stw-paper-2);
  border-top: 1px solid var(--stw-line);
}

.stw-home.dark .stw-instagram {
  background: var(--stw-dark-2);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.stw-instagram-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.stw-instagram-head .stw-headline a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.stw-instagram-head .stw-headline a:hover {
  color: var(--stw-red);
}

.stw-instagram-follow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stw-instagram-feed {
  width: 100%;
  min-height: 280px;
}

/* ── Instagram Grid Simulation ── */
.stw-ig-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
}

.stw-ig-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stw-line);
  cursor: pointer;
}

.stw-ig-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stw-ig-item:hover img,
.stw-ig-item:focus-visible img {
  transform: scale(1.06);
}

.stw-ig-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(12px, 2vw, 22px);
  background: linear-gradient(180deg, transparent 30%, rgba(17, 19, 18, 0.82) 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.stw-ig-item:hover .stw-ig-overlay,
.stw-ig-item:focus-visible .stw-ig-overlay {
  opacity: 1;
}

.stw-ig-tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  background: var(--stw-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: flex-start;
}

.stw-ig-caption {
  color: #f4f2ec;
  font-size: clamp(11px, 1.1vw, 13px);
  line-height: 1.5;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stw-ig-stats {
  display: flex;
  gap: 16px;
  color: rgba(244, 242, 236, 0.9);
  font-size: 12px;
  font-weight: 600;
}

.stw-ig-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 767px) {
  .stw-ig-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .stw-ig-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stw-home *,
  .stw-home *::before,
  .stw-home *::after {
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   Language Switcher
   ========================================================= */
.stw-lang-switcher {
  position: relative;
  list-style: none;
  display: flex;
  align-items: center;
}

.stw-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--stw-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
  font-family: var(--stw-font-body);
}

.stw-lang-btn:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.2);
}

.stw-home.dark .stw-lang-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.25);
}

.stw-lang-chevron {
  transition: transform 0.22s ease;
  opacity: 0.6;
}

.stw-lang-btn[aria-expanded="true"] .stw-lang-chevron {
  transform: rotate(180deg);
}

.stw-lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 164px;
  background: var(--stw-paper);
  border: 1px solid var(--stw-line);
  border-radius: 14px;
  list-style: none;
  margin: 0;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9999;
}

.stw-home.dark .stw-lang-dropdown {
  background: var(--stw-dark-2);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

.stw-lang-btn[aria-expanded="true"] + .stw-lang-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.stw-lang-dropdown li {
  list-style: none;
}

.stw-lang-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease;
  font-family: var(--stw-font-body);
}

.stw-lang-opt span {
  font-weight: 400;
  letter-spacing: 0;
  color: var(--stw-muted);
  font-size: 12px;
}

.stw-home.dark .stw-lang-opt span {
  color: var(--stw-dark-muted);
}

.stw-lang-opt:hover,
.stw-lang-opt:focus {
  background: var(--stw-paper-2);
  outline: none;
}

.stw-home.dark .stw-lang-opt:hover,
.stw-home.dark .stw-lang-opt:focus {
  background: rgba(255,255,255,0.08);
}

.stw-lang-opt.is-active {
  background: var(--stw-paper-2);
}

.stw-home.dark .stw-lang-opt.is-active {
  background: rgba(255,255,255,0.1);
}

.stw-lang-opt.is-active::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stw-red);
  margin-left: auto;
  flex-shrink: 0;
}

/* =====================================================
   Orbit Button — B2B Support Portal
   ===================================================== */

/* ─── Orbit Button — über Hero-Video (absolut positioniert) ─── */
.stw-orbit-btn {
  position: absolute;
  bottom: 52px;
  right: clamp(24px, 4vw, 72px);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  text-decoration: none;
  /* immer hell auf dem dunklen Video-Hintergrund */
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.25s ease;
}

.stw-orbit-btn:hover {
  color: var(--stw-red);
}

/* Rotating text ring */
.stw-orbit-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: stw-orbit-spin 12s linear infinite;
  will-change: transform;
}

.stw-orbit-ring text {
  font-family: inherit;
  font-size: 9.6px;
  font-weight: 800;
  letter-spacing: 0.14em;
  fill: currentColor;
  text-transform: uppercase;
}

/* Wolf head icon centered */
.stw-orbit-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  pointer-events: none;
}

.stw-orbit-icon svg {
  width: 100%;
  height: 100%;
}

/* Spin animation — pause on hover */
@keyframes stw-orbit-spin {
  to { transform: rotate(360deg); }
}

.stw-orbit-btn:hover .stw-orbit-ring {
  animation-play-state: paused;
}

@media (max-width: 1200px) {
  .stw-orbit-btn {
    width: 76px;
    height: 76px;
    bottom: 40px;
  }
  .stw-orbit-icon {
    width: 30px;
    height: 30px;
  }
  .stw-orbit-ring text {
    font-size: 8.2px;
  }
}

@media (max-width: 768px) {
  .stw-orbit-btn {
    width: 62px;
    height: 62px;
    bottom: 28px;
    right: 20px;
  }
  .stw-orbit-icon {
    width: 24px;
    height: 24px;
  }
  .stw-orbit-ring text {
    font-size: 6.8px;
  }
}


/* ══════════════════════════════════════════════
   Events & Messen — Inner Pages
   ══════════════════════════════════════════════ */

/* ── Page hero (slim, für Inner Pages) ── */
.stw-page-hero {
  padding: clamp(110px, 14vw, 160px) 0 clamp(44px, 5.5vw, 68px);
  border-bottom: 1px solid var(--stw-line);
}

.stw-page-hero .stw-kicker {
  margin-bottom: 18px;
}

.stw-page-hero .stw-headline {
  font-size: clamp(52px, 8.5vw, 124px);
  margin-bottom: 24px;
}

.stw-page-hero__body {
  max-width: 580px;
  opacity: 0.68;
}

/* ── Events grid ── */
.stw-events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--stw-line);
  background: var(--stw-line);
  margin-top: 52px;
}

/* ── Event card ── */
.stw-event-card {
  background: var(--stw-paper);
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  min-height: 400px;
  text-decoration: none;
  color: inherit;
  transition: background 0.22s ease;
}

.stw-event-card.is-featured {
  grid-template-columns: 1fr 0.58fr;
  min-height: 500px;
}

.stw-event-card:not(.is-placeholder):hover {
  background: var(--stw-paper-2);
}

.stw-home.dark .stw-event-card {
  background: var(--stw-dark-2);
}

.stw-home.dark .stw-event-card:not(.is-placeholder):hover {
  background: #0d0f0e;
}

.stw-event-card__image {
  overflow: hidden;
}

.stw-event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.55s ease;
  display: block;
}

.stw-event-card:hover .stw-event-card__image img {
  transform: scale(1.04);
}

.stw-event-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 3.5vw, 54px);
  gap: 24px;
}

/* ── Event tag / status badge ── */
.stw-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stw-red);
}

.stw-event-tag::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: stw-pulse 2s ease-in-out infinite;
}

@keyframes stw-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

.stw-event-tag.is-past {
  color: var(--stw-dark-muted);
}

.stw-event-tag.is-past::before {
  animation: none;
}

/* ── Event meta ── */
.stw-event-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stw-event-date {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.55;
  text-transform: uppercase;
}

.stw-event-card__title {
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.01em;
  margin: 0;
}

.stw-event-card.is-featured .stw-event-card__title {
  font-size: clamp(40px, 6vw, 80px);
}

.stw-event-location {
  font-size: 12px;
  opacity: 0.48;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.stw-event-card__desc {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.7;
  opacity: 0.68;
  flex-grow: 1;
}

/* ── CTA row inside card ── */
.stw-event-card__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 22px;
  border-top: 1px solid var(--stw-line);
}

.stw-event-card__cta svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.stw-event-card:hover .stw-event-card__cta svg {
  transform: translateX(5px);
}

/* ── Placeholder card ── */
.stw-event-card.is-placeholder {
  grid-template-columns: 1fr;
  min-height: 120px;
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
}

.stw-event-card.is-placeholder .stw-event-card__body {
  justify-content: center;
  align-items: center;
}

/* ── nav active state ── */
.stw-header .main-menu > ul > li.current > a {
  opacity: 1;
  color: var(--stw-red);
}

/* ══════════════════════════════════════════════
   Event Detail Page
   ══════════════════════════════════════════════ */

/* ── Hero banner ── */
.stw-event-hero {
  position: relative;
  margin-top: 82px; /* header height offset */
  line-height: 0;
}

.stw-event-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.stw-event-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.68) 100%);
}

.stw-event-hero__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(28px, 4vw, 60px) clamp(20px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 2;
}

.stw-event-hero__title {
  color: #fff;
  font-size: clamp(52px, 7.5vw, 112px);
  line-height: 1;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Detail head section ── */
.stw-event-detail-head {
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(36px, 4vw, 52px);
  border-bottom: 1px solid var(--stw-line);
}

.stw-event-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  margin-bottom: 28px;
}

.stw-event-back-link:hover {
  opacity: 1;
  color: inherit;
}

.stw-event-detail-head .stw-kicker {
  margin-bottom: 14px;
}

.stw-event-detail-head .stw-headline {
  font-size: clamp(52px, 9vw, 130px);
  margin-bottom: 0;
}

/* ── Info grid (3 boxes: Datum / Ort / Stand) ── */
.stw-event-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--stw-line);
  background: var(--stw-line);
  margin-top: 44px;
}

.stw-event-info-box {
  background: var(--stw-paper);
  padding: clamp(18px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stw-home.dark .stw-event-info-box {
  background: var(--stw-dark-2);
}

.stw-event-info-box__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
}

.stw-event-info-box__value {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.25;
}

.stw-event-info-box__sub {
  font-size: 12px;
  opacity: 0.5;
  line-height: 1.5;
}

/* ── Event body 2-column grid ── */
.stw-event-body-grid {
  display: grid;
  grid-template-columns: 1fr 0.44fr;
  gap: clamp(36px, 6vw, 88px);
  padding: clamp(44px, 5.5vw, 72px) 0;
  align-items: start;
}

.stw-event-body-text {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.stw-event-body-text p {
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.78;
  opacity: 0.78;
  margin: 0;
}

.stw-event-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 8px;
}

/* ── Sidebar ── */
.stw-event-sidebar {
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: sticky;
  top: calc(var(--stw-sticky-offset, 100px) + 24px);
}

.stw-event-sidebar h4 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
  margin: 0 0 14px;
}

.stw-event-sidebar__block {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--stw-line);
  padding-top: 28px;
}

/* ── Highlights list ── */
.stw-event-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stw-event-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.5;
  opacity: 0.82;
}

.stw-event-highlights li::before {
  content: '—';
  color: var(--stw-red);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 12px;
}

/* ══ Responsive ════════════════════════════════ */
@media (max-width: 1024px) {
  .stw-event-card,
  .stw-event-card.is-featured {
    grid-template-columns: 1fr;
  }

  .stw-event-card__image {
    min-height: 280px;
    max-height: 380px;
  }

  .stw-event-body-grid {
    grid-template-columns: 1fr;
  }

  .stw-event-sidebar {
    position: static;
    border-top: 1px solid var(--stw-line);
    padding-top: 36px;
  }

  .stw-event-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .stw-event-hero {
    margin-top: 68px;
    min-height: 200px;
  }

  .stw-events-grid {
    margin-top: 32px;
  }

  .stw-event-cta-row {
    flex-direction: column;
  }
}

/* ════════════════════════════════════════════
   CONTACT – MOOD STRIP
   ════════════════════════════════════════════ */

.stw-mood-strip {
  padding: clamp(72px, 10vw, 120px) 0 0;
  overflow: hidden;
}

/* Brand-Statement */
.stw-mood-claim {
  text-align: center;
  padding-bottom: clamp(48px, 7vw, 88px);
}

.stw-mood-claim__line {
  font-size: clamp(32px, 5.5vw, 80px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  opacity: 0;
  transform: translateY(40px);
}

.stw-mood-claim__line--red {
  color: var(--stw-red);
}

.stw-home.dark .stw-mood-claim__line {
  color: #f4f2ec;
}
.stw-home.dark .stw-mood-claim__line--red {
  color: var(--stw-red);
}

/* Image Reel */
.stw-reel {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.stw-reel__track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: stw-reel-scroll 34s linear infinite;
}

.stw-reel__track:hover {
  animation-play-state: paused;
}

.stw-reel__track img {
  height: clamp(180px, 22vw, 320px);
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border-radius: 2px;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: saturate(0.88);
}

.stw-reel__track img:hover {
  transform: scale(1.03);
  filter: saturate(1.1);
  z-index: 1;
  position: relative;
}

@keyframes stw-reel-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .stw-reel__track {
    animation: none;
  }
}

@media (max-width: 767px) {
  .stw-mood-claim__line {
    font-size: clamp(26px, 7vw, 44px);
  }
  .stw-reel__track img {
    height: 160px;
  }
}

/* ── Parallax Slider Cursor: rot mit weißer Schrift ── */
.cb-cursor.-red:before {
  background: var(--stw-red, #c91624) !important;
}
.cb-cursor.-red .cb-cursor-text {
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 11px;
}