/* ═══════════════════════════════════════════════════════════════════
   MASTER VISUAL FIXES – test.ruskinemezfrinds.ru
   Stand: 2026-03-08 | Übergabereif
   Gold: #C4A35A (Markenfarbe) / Accessible: #7A6115
   ═══════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   FIX 1: MOBILES MENÜ – Goldenen Balken-Bug entfernen
   Problem: border-left oder ::before/::after erzeugt goldenen
   vertikalen Balken wenn .nav-mobile geöffnet wird.
   ──────────────────────────────────────────────────────────────── */

.nav-mobile::before,
.nav-mobile::after,
.nav-overlay::before,
.nav-overlay::after,
.navbar::before,
.nav-mobile-close::before {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
}

@media (max-width: 768px) {
  .nav-mobile {
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
  }

  .nav-toggle {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .nav-toggle::before,
  .nav-toggle::after {
    border: none !important;
  }

  /* Overlay – kein border */
  .nav-overlay {
    border: none !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   FIX 2: CAROUSEL PAGINATION DOTS – Elegant & konsistent
   System: .grid-2 / .grid-3 → .carousel-dots → .carousel-dot
   Auch: .kb-dots → .kb-dot / .pathway-dots → .pathway-dot
   ──────────────────────────────────────────────────────────────── */

/* Inaktive Dots – kompakt & rund */
.carousel-dot,
.kb-dot,
.pathway-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  border-radius: 50% !important;
  background: rgba(100, 100, 100, 0.3) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: width 0.3s ease, border-radius 0.3s ease, background 0.3s ease !important;
  flex-shrink: 0 !important;
}

/* Aktiver Dot – Pill-Form in Brand-Gold */
.carousel-dot.active,
.kb-dot.active,
.pathway-dot.active {
  width: 24px !important;
  max-width: 24px !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: #C4A35A !important;
}

/* Dots-Container – zentriert */
.carousel-dots,
.kb-dots,
.pathway-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}


/* ────────────────────────────────────────────────────────────────
   FIX 3: KARTEN – Hover konsistent, kein permanenter Gold-Rahmen
   Problem: .card erste Variante hat immer Gold-Border, andere nicht
   ──────────────────────────────────────────────────────────────── */

.card,
.why-card,
.card-glass,
.card-glass-bare,
.card-glass-xl,
.card-white-mb,
.card-news {
  border: 1px solid transparent !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.card:hover,
.why-card:hover,
.card-glass:hover,
.card-white-mb:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(196, 163, 90, 0.45) !important;
}

/* Kein permanenter aktiver Rahmen (nicht hover, nicht selected) */
.card:not(:hover):not(.selected):not(.featured):not(.active),
.why-card:not(:hover) {
  border-color: transparent !important;
}


/* ────────────────────────────────────────────────────────────────
   FIX 4: MOBILE CAROUSEL PEEK
   Problem: Kein visueller Hinweis dass weitergescrollt werden kann
   System: .grid-2 / .grid-3 scrollbar auf Mobile
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 14px !important;
    padding: 8px 16px 16px !important;
  }

  .grid-2::-webkit-scrollbar,
  .grid-3::-webkit-scrollbar {
    display: none !important;
  }

  .grid-2 > *,
  .grid-3 > * {
    scroll-snap-align: start !important;
    min-width: 82% !important;
    flex-shrink: 0 !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   FIX 5: HORIZONTALEN SCROLL BLOCKIEREN
   ──────────────────────────────────────────────────────────────── */

html {
  overflow-x: hidden !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}


/* ────────────────────────────────────────────────────────────────
   FIX 6: BUTTON TOUCH-TARGETS (min 44px)
   ──────────────────────────────────────────────────────────────── */

button,
[role="button"],
input[type="submit"],
input[type="button"],
.btn,
.btn-gold-border,
.btn-dark-bg {
  min-height: 44px !important;
  cursor: pointer !important;
}

@media (max-width: 768px) {
  button,
  [role="button"],
  input[type="submit"],
  .btn,
  .btn-gold-border,
  .btn-dark-bg {
    min-height: 48px !important;
    min-width: 48px !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   FIX 7: BILDER – Kein Stretching, leere src verstecken
   ──────────────────────────────────────────────────────────────── */

img {
  max-width: 100% !important;
  height: auto !important;
}

img[src=""],
img:not([src]) {
  display: none !important;
}


/* ────────────────────────────────────────────────────────────────
   FIX 8: FOCUS-STATES – Barrierefreiheit (Gold-Outline)
   ──────────────────────────────────────────────────────────────── */

*:focus-visible {
  outline: 2px solid #C4A35A !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

*:focus:not(:focus-visible) {
  outline: none !important;
}


/* ────────────────────────────────────────────────────────────────
   FIX 9: GLOBAL TRANSITIONS – Micro-Interactions
   ──────────────────────────────────────────────────────────────── */

a,
button,
[role="button"],
.btn,
.btn-gold-border,
.btn-dark-bg {
  transition: opacity 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}


/* ────────────────────────────────────────────────────────────────
   FIX 10: SCROLL-TO-TOP – sauber und zugänglich
   ──────────────────────────────────────────────────────────────── */

[class*="scroll-top"],
[class*="back-to-top"],
[class*="to-top"] {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}