/* ==========================================================================
   VETSICHT | Komponenten
   Haarlinien statt Schatten. Kleine Radien. Magenta sparsam.
   Klassen werden in Elementor über "CSS-Klassen" vergeben.
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */

a.vs-button,
button.vs-button,
.elementor .vs-button .elementor-button,
.vs-button.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--vs-r-button);
  font-family: var(--vs-font-body);
  font-size: var(--vs-fs-ui);
  font-weight: var(--vs-w-ui);
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--vs-t-fast) var(--vs-ease),
    border-color var(--vs-t-fast) var(--vs-ease),
    color var(--vs-t-fast) var(--vs-ease);
}

/* --- Primär: Magenta, dunkler Text (4,50:1, WCAG AA) -------------------- */
a.vs-button--primary,
button.vs-button--primary,
.vs-button--primary.elementor-button,
.vs-button--primary .elementor-button {
  background: var(--vs-primary-dark);
  color: var(--vs-white);
  border-color: var(--vs-primary-dark);
}
a.vs-button--primary:hover,
a.vs-button--primary:focus-visible,
.vs-button--primary.elementor-button:hover,
.vs-button--primary .elementor-button:hover {
  background: var(--vs-primary-deep);
  border-color: var(--vs-primary-deep);
  color: var(--vs-white);
}

/* --- Sekundär: nur Haarlinie ------------------------------------------- */
a.vs-button--secondary,
button.vs-button--secondary,
.vs-button--secondary.elementor-button,
.vs-button--secondary .elementor-button {
  background: transparent;
  color: var(--vs-dark);
  border-color: var(--vs-hairline-strong);
}
a.vs-button--secondary:hover,
a.vs-button--secondary:focus-visible,
.vs-button--secondary.elementor-button:hover,
.vs-button--secondary .elementor-button:hover {
  color: var(--vs-dark);
  border-color: var(--vs-dark);
  background: transparent;
}

/* --- Auf dunklem Grund --------------------------------------------------- */
.vs-section--dark .vs-button--secondary,
.vs-section--dark .vs-button--secondary .elementor-button,
.vs-cta-band .vs-button--secondary,
.vs-cta-band .vs-button--secondary .elementor-button {
  background: transparent;
  color: var(--vs-white);
  border-color: rgba(255, 255, 255, .24);
}
.vs-section--dark .vs-button--secondary:hover,
.vs-section--dark .vs-button--secondary .elementor-button:hover,
.vs-cta-band .vs-button--secondary:hover,
.vs-cta-band .vs-button--secondary .elementor-button:hover {
  border-color: rgba(255, 255, 255, .6);
  color: var(--vs-white);
}

/* --- Text-CTA ----------------------------------------------------------- */
a.vs-button--text,
button.vs-button--text,
.vs-button--text.elementor-button,
.vs-button--text .elementor-button {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--vs-dark);
  font-weight: var(--vs-w-ui);
  gap: 8px;
}
a.vs-button--text::after { content: '→'; transition: transform var(--vs-t-fast) var(--vs-ease); }
a.vs-button--text:hover,
.vs-button--text .elementor-button:hover { color: var(--vs-primary-dark); background: none; }
a.vs-button--text:hover::after { transform: translateX(3px); }

.vs-button--text .elementor-button-icon svg,
.vs-button--text .elementor-button-icon i { transition: transform var(--vs-t-fast) var(--vs-ease); }
.vs-button--text .elementor-button:hover .elementor-button-icon svg { transform: translateX(3px); }

/* Icon in Buttons dezent halten */
.vs-button .elementor-button-icon svg { width: 12px; height: 12px; }

.vs-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vs-space-3);
  margin-top: var(--vs-gap-cta);
}

/* ==========================================================================
   Badges
   ========================================================================== */

.vs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--vs-r-pill);
  background: var(--vs-warm-white);
  border: 1px solid var(--vs-hairline);
  color: var(--vs-body);
  font-size: var(--vs-fs-eyebrow);
  font-weight: 500;
  line-height: 1.4;
}

.vs-badge--brand { background: var(--vs-soft-pink); border-color: transparent; color: var(--vs-primary-dark); }

/* ==========================================================================
   Cards
   ========================================================================== */

.vs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vs-white);
  border: 1px solid var(--vs-hairline);
  border-radius: var(--vs-r-card);
  box-shadow: none;
  transition:
    border-color var(--vs-t-base) var(--vs-ease),
    background-color var(--vs-t-base) var(--vs-ease);
}

.vs-card h3,
.vs-card .elementor-heading-title { margin-bottom: 0; }

.vs-card--link:hover,
.vs-card--link:focus-within { border-color: var(--vs-hairline-strong); }

.vs-card--feature {
  background: var(--vs-warm-white);
  border-color: transparent;
  border-radius: var(--vs-r-card-feature);
}

/* Eine gefüllte Karte pro Reihe: der Akzent, nicht die Regel */
.vs-card--dark {
  background: var(--vs-dark);
  border-color: var(--vs-dark);
  color: rgba(255, 255, 255, .74);
}
.vs-card--dark h3,
.vs-card--dark h4,
.vs-card--dark .elementor-heading-title { color: var(--vs-white); }
.vs-card--dark .elementor-widget-text-editor,
.vs-card--dark p { color: rgba(255, 255, 255, .74); }
.vs-card--dark .elementor-icon-list-text { color: rgba(255, 255, 255, .74); }
.vs-card--dark .elementor-icon-list-icon svg { color: var(--vs-primary); }
.vs-card--dark .vs-button--text .elementor-button { color: var(--vs-white); }
.vs-card--dark .vs-button--text .elementor-button:hover { color: var(--vs-primary); }
.vs-card--dark:hover { border-color: var(--vs-dark-soft); background: var(--vs-dark-soft); }

.vs-card__overlay-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ==========================================================================
   Glass (Navbar, Mega-Menü)
   ========================================================================== */

.vs-glass {
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--vs-hairline);
}

@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .vs-glass {
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

/* ==========================================================================
   CTA-Band
   ========================================================================== */

.vs-cta-band {
  position: relative;
  background: var(--vs-dark);
  border-radius: var(--vs-r-cta);
  color: rgba(255, 255, 255, .76);
  overflow: hidden;
}

.vs-cta-band h2,
.vs-cta-band h3,
.vs-cta-band .elementor-heading-title { color: var(--vs-white); }
.vs-cta-band .vs-eyebrow { color: rgba(255, 255, 255, .5); }
.vs-cta-band .vs-accent { color: var(--vs-primary); font-style: normal; }
.vs-cta-band a:not(.vs-button) { color: var(--vs-white); }

/* ==========================================================================
   Grid
   ========================================================================== */

.vs-grid { display: grid; gap: var(--vs-gap-cards); }
.vs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

/* ==========================================================================
   Sichtmotiv: Fokusrahmen
   ========================================================================== */

.vs-focus-frame { position: relative; border-radius: var(--vs-r-card-feature); overflow: hidden; }
.vs-focus-frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: calc(var(--vs-r-card-feature) - 12px);
  pointer-events: none;
}