/*
 * Vollmer CI-Anpassungen (wird nach der Webflow-CSS geladen)
 *
 * Buttons sind eckig und rechts angeschrägt, passend zum roten Balken und zur
 * kursiven Schrift im Logo. Die Schräge entsteht per clip-path. Bei umrandeten
 * Buttons zeichnet ein Verlauf die Rahmenlinie an der schrägen Kante nach
 * (--ci-edge = Rahmenfarbe), sonst wäre die Form dort offen.
 */

:root {
  --ci-slant: 10px; /* ≈ 12° bei 46 px Buttonhöhe */
  --ci-join-gap: 3px; /* Spalt zwischen verzahnten Buttons */
}

/* Keine abgerundeten Ecken – auf der ganzen Website, passend zum eckigen Logo.
   !important, weil Webflow Radien in vielen Kombinations- und ID-Regeln setzt. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

.is-button-large {
  --ci-slant: 13px;
}

.tab-link-tab-1,
.tab-link-tab-2,
.tab-link-tab-3 {
  --ci-slant: 8px;
}

/* Alle Buttons: eckig + Schräge rechts */
.karriere-button,
.vollmer-fahrzeugbau-kontakt-button,
.vollmer-adventure-kontakt-button,
.button-secondary,
.button-produkte-service,
.button-produkte-service-copy,
.button-produkte-service-copy-copy,
.karriere-button-rahmen,
.uui-button-6,
.uui-button-12,
.uui-button-13,
.uui-button-17,
.uui-button-17-round-modern,
.uui-button-18,
.uui-button-link-10,
.uui-button-secondary-gray-9,
.uui-button-secondary-gray-10,
.uui-button-secondary-gray-13,
.uui-button-secondary-gray-14,
.copy-lb,
.link-block-13,
.tab-link-tab-1,
.tab-link-tab-2,
.tab-link-tab-3,
.w-button,
.div-block-15,
.vc-btn {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--ci-slant)) 100%, 0 100%);
}

/* „Deine Karriere“ in der Navigation: dauerhaft grau statt nur beim Hover */
.karriere-button.hide-tablet {
  background-color: var(--untitled-ui-gray100, #f2f4f7);
  color: var(--untitled-ui-gray700, #344054);
}

.karriere-button.hide-tablet:hover {
  background-color: #e4e7ec;
}

/* Umrandete Buttons: Rahmenlinie an der schrägen Kante */
.button-secondary,
.karriere-button-rahmen,
.uui-button-17-round-modern,
.uui-button-secondary-gray-9,
.uui-button-secondary-gray-10,
.uui-button-secondary-gray-13,
.uui-button-secondary-gray-14,
.copy-lb,
.link-block-13,
.div-block-15,
.vc-btn-secondary {
  --ci-edge: var(--untitled-ui-gray300, #d0d5dd);
  border-right-color: transparent !important;
  background-image: linear-gradient(to bottom right,
    transparent calc(50% - 1.5px),
    var(--ci-edge) calc(50% - 1px),
    var(--ci-edge) 50%,
    transparent 50%);
  background-origin: border-box;
  background-size: var(--ci-slant) 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}

.karriere-button-rahmen {
  --ci-edge: var(--black-cupra, #1b1b1b);
}

.div-block-15 {
  --ci-edge: #fff;
}

.vc-btn-secondary {
  --ci-edge: var(--vollmer-blau, #005091);
}

/* In dieser Kombination ist der Button gefüllt, die Kante braucht keine Linie. */
.uui-button-17-round-modern.is-button-large {
  --ci-edge: transparent;
}

/* clip-path schneidet einen außen liegenden Fokusrahmen ab, daher nach innen legen. */
.karriere-button:focus-visible,
.vollmer-fahrzeugbau-kontakt-button:focus-visible,
.vollmer-adventure-kontakt-button:focus-visible,
.button-secondary:focus-visible,
.button-produkte-service:focus-visible,
.button-produkte-service-copy:focus-visible,
.button-produkte-service-copy-copy:focus-visible,
.karriere-button-rahmen:focus-visible,
.uui-button-6:focus-visible,
.uui-button-12:focus-visible,
.uui-button-13:focus-visible,
.uui-button-17:focus-visible,
.uui-button-17-round-modern:focus-visible,
.uui-button-18:focus-visible,
.uui-button-link-10:focus-visible,
.uui-button-secondary-gray-9:focus-visible,
.uui-button-secondary-gray-10:focus-visible,
.uui-button-secondary-gray-13:focus-visible,
.uui-button-secondary-gray-14:focus-visible,
.copy-lb:focus-visible,
.link-block-13:focus-visible,
.tab-link-tab-1:focus-visible,
.tab-link-tab-2:focus-visible,
.tab-link-tab-3:focus-visible,
.w-button:focus-visible,
.vc-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}

/* Nebeneinanderliegende Buttons verzahnen sich an der Schräge (wie die Bereichs-Leiste):
   Der folgende Button bekommt links dieselbe Schräge und rückt bis auf --ci-join-gap heran.
   Nur dort, wo die Buttons tatsächlich nebeneinander stehen – gestapelt bleibt alles normal. */
.tabs-menu > .w-tab-link {
  margin-right: 0;
}

.tabs-menu > .w-tab-link + .w-tab-link {
  margin-left: calc(var(--ci-join-gap) - var(--ci-slant));
  clip-path: polygon(var(--ci-slant) 0, 100% 0, calc(100% - var(--ci-slant)) 100%, 0 100%);
}

/* Button-Reihen stehen erst unter 768 px untereinander */
@media screen and (min-width: 768px) {
  [class*="button-row"] {
    column-gap: 0;
  }

  [class*="button-row"] > [class*="button-wrapper"] + [class*="button-wrapper"] > a {
    margin-left: calc(var(--ci-join-gap) - var(--ci-slant));
    clip-path: polygon(var(--ci-slant) 0, 100% 0, calc(100% - var(--ci-slant)) 100%, 0 100%);
  }
}

/* Navigation: „Deine Karriere“ + „Kontakt“ (unter 992 px stehen sie im Menü untereinander) */
@media screen and (min-width: 992px) {
  .navbar-button-wrapper {
    column-gap: 0;
  }

  .navbar-button-wrapper > [class*="karriere-button"] + a {
    margin-left: calc(var(--ci-join-gap) - var(--ci-slant));
    clip-path: polygon(var(--ci-slant) 0, 100% 0, calc(100% - var(--ci-slant)) 100%, 0 100%);
  }
}

/* Fahrzeugtyp-Buttons (nur ab 992 px sichtbar): füllen weiter die ganze Zeile */
@media screen and (min-width: 992px) {
  .container-7 {
    grid-column-gap: 0;
  }

  .container-7 > .link-block-13 + .link-block-13 {
    width: calc(100% + var(--ci-slant) - var(--ci-join-gap));
    max-width: none; /* Webflow begrenzt .w-inline-block auf 100 % */
    margin-left: calc(var(--ci-join-gap) - var(--ci-slant));
    clip-path: polygon(var(--ci-slant) 0, 100% 0, calc(100% - var(--ci-slant)) 100%, 0 100%);
  }
}

/* Cookie-Banner und Video-Hinweis: unter 640 px brechen die Buttons um bzw. stapeln sich */
@media screen and (min-width: 640px) {
  .vc-card .vc-actions {
    column-gap: 0;
  }

  .vc-card .vc-actions > .vc-btn + .vc-btn {
    margin-left: calc(var(--ci-join-gap) - var(--ci-slant));
    clip-path: polygon(var(--ci-slant) 0, 100% 0, calc(100% - var(--ci-slant)) 100%, 0 100%);
  }
}

/* Umrandete Folge-Buttons: Rahmenlinie auch an der linken Schräge */
@media screen and (min-width: 640px) {
  .vc-card .vc-actions > .vc-btn + .vc-btn-secondary {
    border-left-color: transparent !important;
    background-image:
      linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--ci-edge) calc(50% - 1px), var(--ci-edge) 50%, transparent 50%),
      linear-gradient(to bottom right, transparent 50%, var(--ci-edge) 50%, var(--ci-edge) calc(50% + 1px), transparent calc(50% + 1.5px));
    background-size: var(--ci-slant) 100%, var(--ci-slant) 100%;
    background-position: 100% 0, 0 0;
  }
}

@media screen and (min-width: 992px) {
  .container-7 > .link-block-13 + .link-block-13 {
    border-left-color: transparent !important;
    background-image:
      linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--ci-edge) calc(50% - 1px), var(--ci-edge) 50%, transparent 50%),
      linear-gradient(to bottom right, transparent 50%, var(--ci-edge) 50%, var(--ci-edge) calc(50% + 1px), transparent calc(50% + 1.5px));
    background-size: var(--ci-slant) 100%, var(--ci-slant) 100%;
    background-position: 100% 0, 0 0;
  }
}

/* Kontaktkarten mit drei Personen (Adventure-Startseite, Abschnitt „Kontakt“).
   Tablet und Handy übernehmen die Webflow-Regeln (2 bzw. 1 Spalte). */
.uui-team01_list.is-3-columns .uui-team01_item {
  background-color: var(--untitled-ui-white, #fff); /* Abschnitt ist grau hinterlegt */
}

@media screen and (min-width: 992px) {
  .uui-team01_list.is-3-columns {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Bereichs-Leiste ganz oben: drei gleich breite Felder über die volle Breite,
   an den Berührungskanten angeschrägt. Hintergrund ist das Bild der jeweiligen
   Kachel von der Einstiegsseite, eingefärbt in der Logo-Farbe des Bereichs.
   Über dem aktuellen Bereich liegt der Balken aus dem Logo. */
.vollmer-areas {
  --area-slant: 12px; /* ≈ 12° bei 56 px Höhe */
  --area-gap: 3px;
  display: flex;
  width: 100%;
  background-color: #fff;
}

.vollmer-area {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-left: calc(var(--area-gap) - var(--area-slant));
  padding: 0 calc(var(--area-slant) + 8px);
  background: var(--area-image) 50% 50% / cover no-repeat, var(--area-color);
  box-shadow: inset 0 0 0 100vmax var(--area-tint);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  clip-path: polygon(var(--area-slant) 0, 100% 0, calc(100% - var(--area-slant)) 100%, 0 100%);
  transition: box-shadow 0.25s;
}

.vollmer-area:first-child {
  margin-left: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--area-slant)) 100%, 0 100%);
}

.vollmer-area:last-child {
  clip-path: polygon(var(--area-slant) 0, 100% 0, 100% 100%, 0 100%);
}

.vollmer-area:hover {
  color: #fff;
  box-shadow: inset 0 0 0 100vmax var(--area-tint-hover);
}

.vollmer-area[aria-current] {
  font-weight: 700;
  box-shadow: inset 0 4px 0 var(--area-accent), inset 0 0 0 100vmax var(--area-tint);
}

.vollmer-area[aria-current]:hover {
  box-shadow: inset 0 4px 0 var(--area-accent), inset 0 0 0 100vmax var(--area-tint-hover);
}

.vollmer-area:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
}

.vollmer-area.is-fahrzeugbau {
  --area-image: url("../vollmer-area-fahrzeugbau.webp");
  --area-color: #005091;
  --area-tint: rgba(0, 80, 145, 0.8);
  --area-tint-hover: rgba(0, 80, 145, 0.6);
  --area-accent: var(--red, #d20a0f);
}

.vollmer-area.is-adventure {
  --area-image: url("../vollmer-area-adventure.webp");
  --area-color: #02695b;
  --area-tint: rgba(2, 105, 91, 0.8);
  --area-tint-hover: rgba(2, 105, 91, 0.6);
  --area-accent: #8b3a3a;
}

.vollmer-area.is-tyreservice {
  --area-image: url("../vollmer-area-tyreservice.webp");
  --area-color: #1b1b1b;
  --area-tint: rgba(27, 27, 27, 0.72);
  --area-tint-hover: rgba(27, 27, 27, 0.5);
  --area-accent: #f86400;
}

@media screen and (max-width: 479px) {
  .vollmer-areas {
    --area-slant: 9px;
  }

  .vollmer-area {
    min-height: 44px;
    padding: 0 calc(var(--area-slant) + 2px);
    font-size: 0.8125rem;
  }
}


/* Mega-Menü der Fahrzeugbau-Navigation: Produkt-Karten mit Bild.
   Desktop: Panel über die volle Breite, bündig an der Unterkante der Navigation.
   Handy/Tablet (aufgeklapptes Menü): Karten zweispaltig im Menüfluss. */
.vollmer-mega-list.w-dropdown-list {
  background-color: #fff;
}

.vollmer-mega-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.vollmer-mega-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--untitled-ui-gray900, #101828);
  text-decoration: none;
}

.vollmer-mega-image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--untitled-ui-gray100, #f2f4f7);
}

.vollmer-mega-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.vollmer-mega-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.vollmer-mega-title::after {
  content: "›";
  flex: none;
  color: var(--vollmer-blau, #005091);
  transition: transform 0.2s;
}

.vollmer-mega-ext {
  margin-left: auto;
  color: var(--untitled-ui-gray500, #667085);
  font-weight: 400;
}

.vollmer-mega-card:hover {
  color: var(--vollmer-blau, #005091);
}

.vollmer-mega-card:hover img {
  transform: scale(1.05);
}

.vollmer-mega-card:hover .vollmer-mega-title::after {
  transform: translateX(3px);
}

.vollmer-mega-card.w--current .vollmer-mega-title {
  color: var(--vollmer-blau, #005091);
  box-shadow: inset 0 3px 0 var(--red, #d20a0f);
  padding-top: 0.5rem;
}

.vollmer-mega-card:focus-visible {
  outline: 2px solid var(--vollmer-blau, #005091);
  outline-offset: 4px;
}

@media screen and (min-width: 992px) {
  /* Das Panel richtet sich an der ganzen Navigationsleiste aus, nicht am Menüpunkt. */
  .header-vollmer-fahrzeugbau .dropdown.w-dropdown {
    position: static;
  }

  /* Menüpunkt so hoch wie die Leiste: Der Weg der Maus nach unten bleibt im Menü. */
  .header-vollmer-fahrzeugbau .dropdown-toggle {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .vollmer-mega-list.w-dropdown-list {
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    border-top: 1px solid var(--untitled-ui-gray100, #f2f4f7);
    box-shadow: 0 24px 32px -12px rgba(16, 24, 40, 0.18);
  }

  .vollmer-mega {
    max-width: calc(80rem + 4rem);
    margin: 0 auto;
    padding: 2rem 2rem 2.5rem;
  }
}

@media screen and (max-width: 991px) {
  .vollmer-mega-list.w-dropdown-list {
    position: static;
    background-color: transparent;
  }

  .vollmer-mega {
    padding: 0.25rem 0 1rem;
  }

  .vollmer-mega-grid {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0.75rem;
  }

  .vollmer-mega-card {
    gap: 0.5rem;
  }

  .vollmer-mega-title {
    font-size: 0.875rem;
  }
}

/* Startseite: Hero direkt unter der Navigation */
.display-video {
  padding-top: 0;
}

/* Hero-Tabs: Überblendung per CSS – Webflows eigene Überblendung setzt den Fokus um
   (siehe vollmer-tabs-autoplay.js). */
.tabs[data-autoplay] .w-tab-pane.w--tab-active {
  animation: vollmer-fade-in 0.4s ease;
}

@keyframes vollmer-fade-in {
  from {
    opacity: 0;
  }
}

/* Partner-Logos als Laufband unter dem Hero, links und rechts weich ausgeblendet.
   Die Liste steht doppelt im HTML, damit die Schleife nahtlos ist. */
.vollmer-logos {
  overflow: hidden;
  padding: 2.5rem 0;
  background-color: #fff;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.vollmer-logos-track {
  display: flex;
  width: max-content;
  animation: vollmer-marquee 60s linear infinite;
}

.vollmer-logos:hover .vollmer-logos-track {
  animation-play-state: paused;
}

.vollmer-logos-list {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 0;
  padding: 0 3rem 0 0;
  list-style: none;
}

.vollmer-logos-list img {
  display: block;
  width: auto;
  height: 72px;
}

@keyframes vollmer-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 479px) {
  .vollmer-logos {
    padding: 1.5rem 0;
  }

  .vollmer-logos-list {
    gap: 1.5rem;
    padding-right: 1.5rem;
  }

  .vollmer-logos-list img {
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vollmer-logos-track,
  .tabs[data-autoplay] .w-tab-pane.w--tab-active {
    animation: none;
  }

  .vollmer-logos {
    overflow-x: auto;
  }
}

/* Startseite, Service-Übersicht: ohne die frühere Logo-Box passen die vier Karten in eine Reihe */
@media screen and (min-width: 992px) {
  .service-bersicht .layout-component {
    grid-template-columns: repeat(4, 1fr);
  }
}