/*
 * selbach.css
 * Selbach-spezifische Anpassungen des Around-Themes
 * Wird NACH theme.min.css eingebunden: <link rel="stylesheet" href="assets/css/selbach.css">
 */

/* ============================================================
   1. WEBFONTS (lokal, kein Google Fonts)
   Fonts liegen unter: /fonts/  (Stammverzeichnis, nicht in assets!)
   Pfad relativ von assets/css/: ../../fonts/
   ============================================================ */

/* Heebo v27 – alle Gewichte */
@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100;
  src: url('../../fonts/heebo-v27-latin-100.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 200;
  src: url('../../fonts/heebo-v27-latin-200.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url('../../fonts/heebo-v27-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/heebo-v27-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url('../../fonts/heebo-v27-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 600;
  src: url('../../fonts/heebo-v27-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: url('../../fonts/heebo-v27-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 800;
  src: url('../../fonts/heebo-v27-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 900;
  src: url('../../fonts/heebo-v27-latin-900.woff2') format('woff2');
}

/* Lexend Deca v24 – alle Gewichte */
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 100;
  src: url('../../fonts/lexend-deca-v24-latin-100.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 200;
  src: url('../../fonts/lexend-deca-v24-latin-200.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 300;
  src: url('../../fonts/lexend-deca-v24-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/lexend-deca-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 500;
  src: url('../../fonts/lexend-deca-v24-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 600;
  src: url('../../fonts/lexend-deca-v24-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 700;
  src: url('../../fonts/lexend-deca-v24-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 800;
  src: url('../../fonts/lexend-deca-v24-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 900;
  src: url('../../fonts/lexend-deca-v24-latin-900.woff2') format('woff2');
}


/* ============================================================
   2. CSS-VARIABLEN / DESIGN-TOKENS
   Primärfarbe: Selbach-Blau #00a6d6 (statt Original-Grün #448c74)
   ============================================================ */
:root,
[data-bs-theme=light] {
  /* Primärfarbe */
  --ar-primary: #00a6d6;
  --ar-primary-rgb: 0, 166, 214;
  --ar-primary-text-emphasis: #008eb5;

  /* Warnfarbe angepasst */
  --ar-warning-rgb: 223, 140, 3;

  /* Neue Farben */
  --ar-orange: #f54a00;
  --ar-orange-rgb: 245, 74, 3;
  --ar-orange-text-emphasis: #f54a00;
  --ar-orange-bg-subtle: #fceded;

  /* Kategorie-Farben (RGB-Werte für rgba()-Nutzung) */
  --ar-bier-rgb: 214, 106, 18;
  --ar-afg-rgb: 31, 9, 9;
  --ar-wasser-rgb: 36, 129, 194;
  --ar-wein-rgb: 141, 65, 69;
  --ar-othg-rgb: 138, 45, 53;
  --ar-curry-rgb: 143, 25, 19;
  --ar-industry-rgb: 40, 65, 88;
  --ar-blech-rgb: 171, 174, 178;
  --ar-inno-rgb: 93, 189, 217;
  --ar-hygie-rgb: 66, 97, 110;

  /* Footer-Grau */
  --ar-gray-footer: #1e2939;

  /* Body */
  --ar-body-font-size: 1.1rem;
  --ar-body-color: #364153;

  /* Schrift: Heebo für Fließtext – Inter komplett verdrängen */
  --ar-font-sans-serif: "Heebo", sans-serif;
  --ar-body-font-family: "Heebo", sans-serif;

  /* Links */
  --ar-link-color: #00a6d6;
  --ar-link-color-rgb: 0, 166, 214;
  --ar-link-hover-color: #0095ba;

  /* Focus-Ring */
  --ar-focus-ring-color: rgba(0, 166, 214, 0.25);
}

/* *** FIX Dark-Mode: Andere Schrift verdrängen *** */
[data-bs-theme=dark] {
  --ar-primary-text-emphasis: #0096bf;
  --ar-primary-border-subtle: #00485c;
  --ar-orange-text-emphasis: #f54a00;
  --ar-link-color: #5ab2cc;
  --ar-link-hover-color: #7cc0d4;
  --ar-link-color-rgb: 90, 178, 204;
  --ar-link-hover-color-rgb: 124, 192, 212;

  /* Body-Textfarbe im Dark Mode – überschreibt das #364153 aus :root */
  --ar-body-color: rgba(255, 255, 255, 0.7);
  --ar-body-color-rgb: 255, 255, 255;

  /* Schrift auch im Dark Mode explizit auf Heebo setzen */
  --ar-font-sans-serif: "Heebo", sans-serif;
  --ar-body-font-family: "Heebo", sans-serif;
}

[data-bs-theme=dark] .bg-footer {
  background-color: #1a2d3d !important;
}


/* ============================================================
   3. TYPOGRAFIE
   body und Überschriften explizit setzen – auch im Dark Mode
   ============================================================ */
body,
[data-bs-theme=dark] body {
  font-family: "Heebo", sans-serif;
  font-weight: 400;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: "Lexend Deca", sans-serif;
  font-weight: 400;
}

/* Kleine h6 in Navbar/Header etwas fetter */
.navbar h6 {
  font-weight: 600;
}


/* ============================================================
   4. FARB-UTILITY-KLASSEN (neue Selbach-Farben)
   ============================================================ */

/* Text-Farben */
.text-primary-dark  { color: #00628b; }
.text-primary-gray  { color: #969491; }
.text-purple        { color: #9810fa; }
.text-orange        { color: #f54a00; }
.text-green         { color: #00a63e; }
.text-turkis        { color: #00cccc; }

/* Hintergründe */
.bg-bier    { background-color: #d66a12 !important; }
.bg-afg     { background-color: #1f0909 !important; }
.bg-wasser  { background-color: #2481c2 !important; }
.bg-wein    { background-color: #8d4145 !important; }
.bg-othg    { background-color: #8a2d35 !important; }
.bg-cws     { background-color: #8f1913 !important; }
.bg-footer  { background-color: var(--ar-gray-footer) !important; }
.bg-industry {
  background-image: url(../img/produkte/industry.jpg);
  background-size: cover;
  background-position: center;
}

/* Rahmen mit Kategoriefarben (2 px) */
.border-bier     { border-color: rgba(var(--ar-bier-rgb),     1) !important; border-width: 2px; }
.border-afg      { border-color: rgba(var(--ar-afg-rgb),      1) !important; border-width: 2px; }
.border-wasser   { border-color: rgba(var(--ar-wasser-rgb),   1) !important; border-width: 2px; }
.border-wein     { border-color: rgba(var(--ar-wein-rgb),     1) !important; border-width: 2px; }
.border-othg     { border-color: rgba(var(--ar-othg-rgb),     1) !important; border-width: 2px; }
.border-curry    { border-color: rgba(var(--ar-curry-rgb),    1) !important; border-width: 2px; }
.border-industry { border-color: rgba(var(--ar-industry-rgb), 1) !important; border-width: 2px; }
.border-blech    { border-color: rgba(var(--ar-blech-rgb),    1) !important; border-width: 2px; }
.border-inno     { border-color: rgba(var(--ar-inno-rgb),     1) !important; border-width: 2px; }
.border-hygie    { border-color: rgba(var(--ar-hygie-rgb),    1) !important; border-width: 2px; }


/* ============================================================
   5. ICON-BADGE-KLASSEN (farbige Icon-Quadrate in der Topbar)
   ============================================================ */
.text-bg-primary-square {
  color: #fff !important;
  background-color: #00a6d6 !important;
  border-radius: 0.3rem;
  padding: 5px;
}
.text-bg-green-square {
  color: #fff !important;
  background-color: #00a63e !important;
  border-radius: 0.3rem;
  padding: 5px;
}
.text-bg-purple-square {
  color: #fff !important;
  background-color: #9810fa !important;
  border-radius: 0.3rem;
  padding: 5px;
}
.text-bg-orange-square {
  color: #fff !important;
  background-color: #f54a00 !important;
  border-radius: 0.3rem;
  padding: 5px;
}


/* ============================================================
   6. BUTTONS
   Primärfarbe & Hover-Farben auf Selbach-Blau umgestellt
   ============================================================ */
.btn-primary {
  --ar-btn-bg: #00a6d6;
  --ar-btn-border-color: #00a6d6;
  --ar-btn-hover-bg: #0095ba;
  --ar-btn-hover-border-color: #0092ba;
  --ar-btn-active-bg: #0092ba;
  --ar-btn-active-border-color: #008cb3;
  --ar-btn-disabled-bg: #00a6d6;
  --ar-btn-disabled-border-color: #00a6d6;
}

.btn-outline-primary {
  --ar-btn-color: #00a6d6;
  --ar-btn-border-color: #00a6d6;
  --ar-btn-hover-bg: #00a6d6;
  --ar-btn-hover-border-color: #00a6d6;
  --ar-btn-active-bg: #00a6d6;
  --ar-btn-active-border-color: #00a6d6;
  --ar-btn-disabled-color: #00a6d6;
  --ar-btn-disabled-border-color: #00a6d6;
}

/* Neuer Hertig-Button (Bernstein-Orange) */
.btn-hertig {
  --ar-btn-color: #fff;
  --ar-btn-bg: #dd753b;
  --ar-btn-border-color: #dd753b;
  --ar-btn-hover-color: #fff;
  --ar-btn-hover-bg: #ac4c18;
  --ar-btn-hover-border-color: #ac4c18;
  --ar-btn-active-bg: #ac4c18;
  --ar-btn-active-border-color: #ac4c18;
  --ar-btn-disabled-bg: #dd753b;
  --ar-btn-disabled-border-color: #dd753b;
}

/* btn-light und btn-outline-light */
.bg-primary .btn-light:hover,
.bg-primary .btn-light:focus {
  background-color: #e8f6fb !important;
  border-color: #e8f6fb !important;
  color: #00628b !important;
}

.bg-primary .btn-outline-light:hover,
.bg-primary .btn-outline-light:focus {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #00628b !important;
}

.hero-bg .btn-light:hover,
.hero-bg .btn-light:focus,
.bg-dark .btn-light:hover,
.bg-dark .btn-light:focus {
  background-color: #e8f6fb !important;
  border-color: #e8f6fb !important;
  color: #00628b !important;
}

.hero-bg .btn-outline-light:hover,
.hero-bg .btn-outline-light:focus {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #00628b !important;
}

/* Checkbox im Primary-Kontext */
.bg-primary .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2300A6d6' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/* Indeterminate Checkbox */
.form-check-input[type=checkbox]:indeterminate {
  background-color: #00a6d6;
  border-color: #00a6d6;
}

/* Instagram-Button Hover mit originalem Radial-Verlauf
   border-width: 0 verhindert den weißen Blitzrand beim Hover */
.btn-instagram:hover,
.btn-instagram:focus,
.btn-instagram:active {
  color: #fff !important;
  background: radial-gradient(circle at 33% 100%, rgb(254, 211, 115) 4%, rgb(241, 82, 69) 30%, rgb(217, 46, 127) 62%, rgb(155, 54, 183) 85%, rgb(81, 94, 207)) !important;
  border-width: 0 !important;
  box-shadow: none !important;
}


/* ============================================================
   7. ACCORDION
      ============================================================ */

.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='%2300A6d6'%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");
}

[data-bs-theme=dark] .accordion-button::after {
  --ar-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300A6d6'%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");
}


/* ============================================================
   8. PAGINATION
   Aktiver Rahmen auf Selbach-Blau
   ============================================================ */
.pagination {
  --ar-pagination-active-border-color: #00a6d6;
}

/* Flatpickr: Schatten-Box beim Range-Ende */
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange  + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #00a6d6;
}


/* ============================================================
   9. DROPDOWN-ITEM Schriftgröße
   ============================================================ */
.dropdown-item {
  font-size: 1rem;
}


/* ============================================================
   10. NAV-LINK Schriftgröße und Umfärbung
   ============================================================ */
.nav-link {
  font-size: 1rem;
  font-weight: 500;
}

.nav-link-active-parent {
    color: var(--ar-primary) !important;
}

/* ============================================================
   11. NAVBAR
   Mega-Dropdown-Spaltenbreite auf 18 rem vergrößert (Original 14 rem)
   ============================================================ */
.navbar-nav {
  --ar-mega-dropdown-column-width: 18rem;
}


/* ============================================================
   12. ALERT: neuer Orange-Alert-Typ
   ============================================================ */
.alert-orange {
  --ar-alert-color: var(--ar-orange-text-emphasis);
  --ar-alert-bg: var(--ar-orange-bg-subtle);
  --ar-alert-border-color: var(--ar-danger-border-subtle);
  --ar-alert-link-color: var(--ar-orange-text-emphasis);
}


/* ============================================================
   13. FONT-SIZE UTILITIES (neue Klassen)
   ============================================================ */
.fs-smb { font-size: calc(var(--ar-body-font-size) * 0.975) !important; }


/* ============================================================
   14. SPACING UTILITIES (neue Klassen)
   ============================================================ */
.px-6 { padding-right: 5rem !important; padding-left: 5rem !important; }
.pb-6 { padding-bottom: 5rem !important; }

@media (min-width: 992px) {
  .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}


/* ============================================================
   15. DD-ICON (Dropdown-Icons)
   ============================================================ */
.dd-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex: 0 0 24px;
  vertical-align: middle;
  margin-right: 6px;
}
.dd-icon .cls-2 { fill: currentColor; }


/* ============================================================
   16. HINTERGRUND-VERLAUF & HERO
   ============================================================ */
.bg-primary-verlauf-blau {
  background-image: linear-gradient(
    156deg,
    rgba(12,  74, 110, 1.00)  0%,
    rgba(11,  69, 103, 1.00) 51.24%,
    rgba(4,  128, 174, 1.00) 76.82%,
    rgba(0,  166, 214, 1.00) 100%
  );
  overflow: hidden;
}

.hero-bg {
  background:
    linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)),
    linear-gradient(to right bottom, #0c4a6e 0%, #075985 50%, #00a6d6 100%);
}
@supports (background: linear-gradient(in oklch, oklch(0 0 0), oklch(1 0 0))) {
  .hero-bg {
    background:
      linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)),
      linear-gradient(
        to right bottom in oklch,
        oklch(0.3912 0.0845 240.88) 0%,
        oklch(0.4434 0.1000 240.79) 50%,
        oklch(0.6767 0.1313 227.53) 100%
      );
  }
}


/* ============================================================
   17. VIDEO-BANNER
   ============================================================ */
.video-banner {
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
  background: #000;
}
.video-banner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.08);
}
.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,  0,  0, 0.70),
    rgba(8, 40, 60, 0.70),
    rgba(0,  0,  0, 0.60)
  );
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .video-none { display: none; }
}


/* ============================================================
   18. OVERLAY-HELFER
   ============================================================ */
.g-bg-cover { position: relative; }
.g-bg-cover::after { content: ""; position: absolute; inset: 0; }

.g-bg-black-opacity-0_6               { background-color: rgba(0,0,0,0.6) !important; }
.g-bg-black-opacity-0_6--hover:hover  { background-color: rgba(0,0,0,0.7) !important; }
.g-bg-black-opacity-0_6--after::after { background-color: rgba(0,0,0,0.6) !important; }

.g-bg-black-opacity-0_5               { background-color: rgba(0,0,0,0.5) !important; }
.g-bg-black-opacity-0_5--hover:hover  { background-color: rgba(0,0,0,0.5) !important; }
.g-bg-black-opacity-0_5--after::after { background-color: rgba(0,0,0,0.5) !important; }

.g-bg-black-opacity-0_4               { background-color: rgba(0,0,0,0.4) !important; }
.g-bg-black-opacity-0_4--after::after { background-color: rgba(0,0,0,0.4) !important; }


/* ============================================================
   19. LAYOUT-HELFER
   ============================================================ */
.g-min-height-450 { min-height: 450px; }
.g-min-height-550 { min-height: 550px; }

.g-flex-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}
.g-pos-rel { position: relative !important; }
.g-pos-abs { position: absolute !important; }
.g-z-index-1 { z-index: 1; }
.g-bg-home-inspire-video { width: 100%; height: 200%; }

.h-90 {
  height: 90% !important
}


/* ============================================================
   20. MISC / SONSTIGES
   ============================================================ */
section.testfix { background: #0b0b0b !important; }