/*
 * othg.css
 * Spezifische Styles für die Heißgetränke-Landing-Page
 * Pfad: Around_Selbach/heissgetraenke/css/othg.css
 *
 * Einbindung in index.html, anfrage.html, inspektion.html:
 * <link rel="stylesheet" href="css/othg.css">
 * (nach theme.min.css und selbach.css)
 *
 * Akzentfarbe: Weinrot #8a2d35
 */


/* ============================================================
   NAVBAR-LINKS
   ============================================================ */

.navbar {
  --ar-nav-link-active-color: #8a2d35;
  --ar-nav-link-hover-color: #8a2d35;
}

.navbar .navbar-nav .nav-link {
  color: #364153;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: #8a2d35 !important;
}
.navbar .navbar-nav .nav-link.active {
  color: #8a2d35 !important;
  font-weight: 600;
}

[data-bs-theme="dark"] .navbar .navbar-nav .nav-link {
  color: #fff;
}
[data-bs-theme="dark"] .navbar .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .navbar .navbar-nav .nav-link:focus {
  color: #b83840 !important;
}
[data-bs-theme="dark"] .navbar .navbar-nav .nav-link.active {
  color: #b83840 !important;
  font-weight: 600;
}

/* ============================================================
   Text colours
   ============================================================ */

.text-othg {
  --ar-text-opacity: 1;
  color: #8a2d35 !important
}

/* ============================================================
   Header-Verlauf OTHG (Anfrage, Inspektion)
   ============================================================ */

.hero-bg-othg {
  background:
    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)),
    linear-gradient(to right bottom, #4a0d11 0%, #6e1a20 50%, #8a2d35 100%);
}
@supports (background: linear-gradient(in oklch, oklch(0 0 0), oklch(1 0 0))) {
  .hero-bg-othg {
    background:
      linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)),
      linear-gradient(
        to right bottom in oklch,
        oklch(0.2500 0.0900 15.00) 0%,
        oklch(0.3200 0.1050 14.50) 50%,
        oklch(0.4000 0.1200 14.00) 100%
      );
  }
}

.hero-bg-othg .breadcrumb-item a,
.hero-bg-othnet .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.65);
}

.hero-bg-othg .breadcrumb-item a:hover {
  color: rgba(255, 255, 255, 1);
}

.hero-bg-othg .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.65);
}

.hero-bg-othg .breadcrumb-item.active {
  color: #d14551;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-othg {
  --ar-btn-color: #fff;
  --ar-btn-bg: #8a2d35;
  --ar-btn-border-color: #8a2d35;
  --ar-btn-hover-color: #fff;
  --ar-btn-hover-bg: #6e2229;
  --ar-btn-hover-border-color: #6e2229;
}

.btn-outline-primary {
  --ar-btn-color: #8a2d35;
  --ar-btn-border-color: #8a2d35;
  --ar-btn-hover-color: #fff;
  --ar-btn-hover-bg: #8a2d35;
  --ar-btn-hover-border-color: #8a2d35;
  --ar-btn-active-color: #fff;
  --ar-btn-active-bg: #8a2d35;
  --ar-btn-active-border-color: #8a2d35;
  --ar-btn-disabled-color: #8a2d35;
  --ar-btn-disabled-bg: transparent;
  --ar-btn-disabled-border-color: #8a2d35;
}

/* btn-light Textfarbe Normalzustand auf farbigen Hintergründen */
.bg-othg .btn-light,
.bg-dark .btn-light {
  color: #6e2229 !important;
}

/* btn-light und btn-outline-light auf bg-othg */
.bg-othg .btn-light:hover,
.bg-othg .btn-light:focus {
  background-color: #fdf0f1 !important;
  border-color: #fdf0f1 !important;
  color: #6e2229 !important;
}

.bg-dark .btn-light:hover,
.bg-dark .btn-light:focus {
  background-color: #fdf0f1 !important;
  border-color: #fdf0f1 !important;
  color: #6e2229 !important;
}

.bg-othg .btn-outline-light:hover,
.bg-othg .btn-outline-light:focus {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #8a2d35 !important;
}

.bg-othg-gradient {
    background: linear-gradient(135deg, #8a2d35 0%, #140608 100%);
}

.bg-othg-gradient .btn-light {
    color: #6e2229 !important;
}

.bg-othg-gradient .btn-light:hover,
.bg-othg-gradient .btn-light:focus {
    background-color: #fdf0f1 !important;
    border-color: #fdf0f1 !important;
    color: #6e2229 !important;
}


/* ============================================================
   BORDER-PRIMARY → weinrot überschreiben
   ============================================================ */

.border-primary {
  border-color: #8a2d35 !important;
}

/* ============================================================
   BADGE
   ============================================================ */
.bg-othg {
  background-color: #8a2d35 !important;
  color: #fff !important;
}

.bg-othg-subtle {
    background-color: rgba(138, 45, 53, 0.10);
}


/* ============================================================
   ACCORDION – weinroter Pfeil (überschreibt selbach.css blau)
   ============================================================ */

.accordion {
  --ar-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a2d35'%3e%3cpath d='M.5 6.3c.6-.6 1.6-.6 2.3 0l9.3 9.3 9.3-9.3c.6-.6 1.6-.6 2.3 0 .6.6.6 1.6 0 2.3L13.3 18.8c-.6.6-1.6.6-2.3 0L.8 8.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
  --ar-accordion-active-color: #8a2d35;
}

[data-bs-theme=dark] .accordion-button::after {
  --ar-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba%28255%2C 255%2C 255%2C 0.9%29'%3e%3cpath d='M.5 6.3c.6-.6 1.6-.6 2.3 0l9.3 9.3 9.3-9.3c.6-.6 1.6-.6 2.3 0 .6.6.6 1.6 0 2.3L13.3 18.8c-.6.6-1.6.6-2.3 0L.8 8.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
  --ar-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a2d35'%3e%3cpath d='M.5 6.3c.6-.6 1.6-.6 2.3 0l9.3 9.3 9.3-9.3c.6-.6 1.6-.6 2.3 0 .6.6.6 1.6 0 2.3L13.3 18.8c-.6.6-1.6.6-2.3 0L.8 8.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
}


/* ============================================================
   LIGHTGALLERY Z-INDEX FIX
   ============================================================ */

.lg-backdrop {
  z-index: 10000 !important;
}
.lg-outer {
  z-index: 10010 !important;
}


/* ============================================================
   HERO / SWIPER FIX FINAL
   ============================================================ */

/* Hero-Höhe + doppelte Navbar */
.hero-othg-adjust {
  height: calc(100vh - 110px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Swiper korrekt innerhalb halten */
.hero-othg-adjust .swiper,
.hero-othg-adjust .swiper-wrapper,
.hero-othg-adjust .swiper-slide,
.hero-othg-adjust .swiper-slide-cover {
  height: 100%;
}

/* Swiper unter Content */
.hero-othg-adjust .swiper {
  z-index: 1;
}

/* Content über dem Bild, blockiert aber NICHT die Pagination */
.hero-othg-adjust .container {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* nur Buttons/Links bleiben klickbar */
.hero-othg-adjust .container a,
.hero-othg-adjust .container button {
  pointer-events: auto;
}

/* Pagination sichtbar und klickbar */
.hero-othg-adjust .swiper-pagination {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 60px !important;
  z-index: 10 !important;
  pointer-events: all !important;	
}

/* Pagination-Farbe (Weinrot statt Blau) */
/* Inaktive Punkte (Outline) */
.hero-othg-adjust .swiper-pagination-bullet {
  background-color: transparent;
  border: 2px solid #8a2d35;
  opacity: 1;
}

/* Aktiver Punkt */
.hero-othg-adjust .swiper-pagination-bullet-active {
  background-color: #8a2d35;
  border-color: #8a2d35;
}

/* Mobile */
@media (max-width: 768px) {
  .hero-othg-adjust {
    height: calc(100vh - 220px);   /* weniger Höhe → keine Scroll nötig */
  }

  .hero-othg-adjust .swiper-pagination {
    bottom: 15px !important;
    z-index: 10 !important;
  }
}