/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */
h5, h5 a {
  color: #9B2020 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Cormorant Garamond', Helvetica, Arial, sans-serif !important;
}
h5 a:hover {
  opacity: 0.7 !important;
}
.av-subheading_above p {
  color: #9B2020 !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  font-family: 'Cormorant Garamond', Helvetica, Arial, sans-serif !important;
  margin-bottom: 10px !important;
}

/* Abstand über dem ersten Block (Slider) entfernen */
.home #main .container_wrap_first {
    padding-top: 0 !important;
    margin-top: -50px !important;
}

/* WIRKUNG – Abstand und Boxen */
.column-top-margin {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#zum-shop {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Abstand links im LayerSlider */
.ls-inner {
    padding-left: 180px !important;
}

/* WIRKUNG – Boxen Abstand */
.flex_column.av_one_third {
  margin-left: 4px !important;
}
.avia-animated-number {
  background: #ffffff !important;
  padding: 20px !important;
  height: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* BRANCHEN SEKTION */
.rd-branchen-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-top: 32px !important;
}
.rd-bcard {
  background: #e8e8e8 !important;
  padding: 35px 22px !important;
  position: relative !important;
  border-top: 3px solid #9B2020 !important;
}
.rd-bcard:hover {
  background: #f0f0f0 !important;
}
.rd-bnum {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 48px !important;
  color: rgba(155,32,32,0.15) !important;
  position: absolute !important;
  top: 10px !important;
  right: 16px !important;
  line-height: 1 !important;
}
.rd-bcard h3 {
  font-size: 22px !important;
  color: #1a1a1a !important;
  margin: 0 0 10px !important;
  font-weight: 600 !important;
  padding-top: 4px !important;
}
.rd-bcard p {
  font-size: 12px !important;
  color: #444 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  font-weight: 300 !important;
}
.rd-branchen-cta {
  text-align: center !important;
  margin-top: 32px !important;
}
.rd-btn-outline-dark {
  border: 1px solid rgba(255,255,255,0.5) !important;
  color: #fff !important;
  padding: 11px 28px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.rd-btn-outline-dark:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* BRANCHEN – Label (rosa auf dunklem Hintergrund) */
h6.rd-sec-label {
  color: #e8a0a0 !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

/* BRANCHEN – Haupttitel weiss */
h2.rd-sec-title {
  color: #ffffff !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-bottom: 10px !important;
}

/* BRANCHEN – Subtext grau */
p.rd-sec-sub {
  color: #cccccc !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  margin-bottom: 36px !important;
  max-width: 540px !important;
}

/* LIEFERBOXEN */
.usp-dot {
  width: 8px !important;
  height: 8px !important;
  background: #9B2020 !important;
  margin-bottom: 12px !important;
}
.usp-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  margin: 0 0 6px !important;
}
.usp-text {
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* CTA-Bar */
.av-mpzhuplw-1478b4a82baae2b297b603168d6dc76c h2 {
  color: #ffffff !important;
}
.av-mpzhuplw-1478b4a82baae2b297b603168d6dc76c .avia-button {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
}
.avia-section.av-mpzhuplw-1478b4a82baae2b297b603168d6dc76c {
  background-color: #9B2020 !important;
}

/* Gefahrenbuttons auf 30px setzen */
img[src*="woocommerce-gefahrensymbole"] {
    width: 25px !important;
    margin-right: 6px !important;
}

/* ================================================
   ZIELGRUPPEN TABS – Für Unternehmen / Für Zuhause
   ================================================ */

#top .rd-zielgruppen-tabs {
    display: flex !important;
    gap: 0 !important;
    margin: 24px 0 28px 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

#top .rd-zielgruppe-btn {
    flex: 1 !important;
    padding: 12px 16px !important;
    text-align: center !important;
    font-size: 12px !important;
    cursor: pointer !important;
    background: #fff !important;
    border: none !important;
    border-right: 1px solid #ddd !important;
    color: #555 !important;
    font-family: 'Open Sans', sans-serif !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
    border-radius: 0 !important;
    width: auto !important;
    float: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    transition: all 0.2s !important;
}
#top .rd-zielgruppe-btn:last-child {
    border-right: none !important;
}
#top .rd-zielgruppe-btn small {
    display: block !important;
    font-size: 10px !important;
    color: #aaa !important;
    margin-top: 2px !important;
}
#top .rd-zielgruppe-btn:hover {
    background: #f5f5f5 !important;
    color: #555 !important;
}
#top .rd-zielgruppe-btn.active {
    background: #9B2020 !important;
    color: #fff !important;
    font-weight: 600 !important;
}
#top .rd-zielgruppe-btn.active small {
    color: rgba(255,255,255,0.75) !important;
}

/* Produkt ausgeblendet durch Tab-Filter */
.rd-produkt-hidden {
    display: none !important;
}


/* ================================================
   ZIELGRUPPEN BADGES auf Produktkarten
   ================================================ */

.rd-badge-wrap {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 10 !important;
}
.rd-badge {
    display: inline-block !important;
    font-size: 9px !important;
    padding: 3px 7px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    font-family: 'Open Sans', sans-serif !important;
}
.rd-badge-unternehmen {
    background: rgba(155, 32, 32, 0.85) !important;
    color: #fff !important;
}
.rd-badge-zuhause {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
}
.woocommerce ul.products li.product .inner_product .product_image_container {
    position: relative !important;
}

/* Grid-Fix NUR wenn gefiltert ist */
.woocommerce ul.products.rd-filtered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.woocommerce ul.products.rd-filtered li.product.rd-produkt-hidden {
    display: none !important;
}
.woocommerce ul.products.rd-filtered li.product:not(.rd-produkt-hidden) {
    width: calc(33.333% - 6.67px) !important;
    margin: 0 0 10px 0 !important;
}

/* ================================================
   PRODUKTKARTEN
   ================================================ */
.woocommerce ul.products li.product .inner_product {
    border: 1px solid #e8e8e8 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s, border-color 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    text-align: left !important;
}
.woocommerce ul.products li.product .inner_product:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
    border-color: #ccc !important;
}
.woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}
.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
}
.woocommerce ul.products li.product .inner_product .product_item_description,
.woocommerce ul.products li.product .inner_product h2,
.woocommerce ul.products li.product .inner_product .price,
.woocommerce ul.products li.product .inner_product .wc-gzd-additional-info {
    padding-left: 12px !important;
    padding-right: 12px !important;
}


/* ================================================
   SIDEBAR – Produktkategorien Hierarchie
   ================================================ */

.widget_product_categories > ul > li > a {
    font-weight: 400 !important;
    color: #1a1a1a !important;
}

.widget_product_categories ul.children {
    margin-left: 16px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
}
.widget_product_categories ul.children li a {
    font-weight: 400 !important;
    color: #666 !important;
}

.widget_product_categories > ul > li {
    margin-bottom: 6px !important;
}

.widget_product_categories li a {
    display: inline-block !important;
    width: auto !important;
    float: none !important;
}
.widget_product_categories li {
    text-align: left !important;
}

/* Widget-Titel "Produktkategorien" nach links ausrichten */
.widget_product_categories .widgettitle {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ================================================
   ANGEBOT-BADGE als rechteckiges Label im Bild
   ================================================ */

/* Den bestehenden runden Sale-Sticker ausblenden */
.woocommerce ul.products li.product .onsale {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    display: inline-block !important;
    background: #9B2020 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 3px 7px !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    z-index: 11 !important;
    font-family: 'Open Sans', sans-serif !important;
}


.rd-intro-title.av-special-heading-tag {
  font-size: 50px !important;
  line-height: 1.2 !important;
}


/*
Desktop Styles
================================================== */
@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
}

/* ================================================
   SLIDER TEXTE – Desktop/Tablet-Grössen
   (per eigener CSS-Klasse gesetzt, damit Editor-Werte
   nicht mehr vom Theme überschrieben werden)
   ================================================ */
.rd-headline.ls-text-layer.ls-layer {
  font-size: 42px !important;
  line-height: 48px !important;
}
.rd-subtitle.ls-text-layer.ls-layer {
  font-size: 24px !important;
}
.rd-kicker.ls-text-layer.ls-layer {
  font-size: 18px !important;
}
.rd-slider-btn.ls-button-layer.ls-layer {
  font-size: 14px !important;
}

/* ================================================
   SLIDER TEXTE – Tablet-Zwischenstufe (768–1024px)
   Grund: Bei fixer grosser Desktop-Schrift, aber
   schmalerer Text-Box auf Tablet, bricht der Text in
   mehr Zeilen um als vorgesehen -> Headline wird höher
   -> Trennlinie/Buttons (feste Position) kollidieren
   mit dem Text darüber. Etwas kleinere Schrift hier
   verhindert den zusätzlichen Zeilenumbruch.
   ================================================ */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rd-headline.ls-text-layer.ls-layer {
    font-size: 32px !important;
    line-height: 38px !important;
  }
  .rd-subtitle.ls-text-layer.ls-layer {
    font-size: 19px !important;
  }
  .rd-kicker.ls-text-layer {
    font-size: 15px !important;
  }

/* Footer: 4-Spalter auf iPad-Breiten (768–1024px) reparieren –
   Spalte 1 (Adresse/Kontakt) zu schmal */

  #footer .container {
    display: grid !important;
    grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
    gap: 20px !important;
  }
  #footer .container > .flex_column {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
  }

}


/* ================================================
   Header-Bild in den Unterseiten
   ================================================ */

@media (min-width: 1200px) {
  .avia-section.av-parallax-section.av-minimum-height.av-height-percent {
    max-height: 500px !important;
  }
}

/*
Mobile Styles
================================================== */
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */


    /* Headline im Slider – bleibt sichtbar, nur kleiner */
    .rd-headline.ls-text-layer.ls-layer {
    font-size: 23px !important;
    line-height: 1.3 !important;
  }

  /* Slider auf Mobile höher machen (Bild wirkte zu schmal/gestaucht) 
  #top .ls-container,
  #top .ls-wrapper {
    min-height: 420px !important;
  }
    */

  /* Vorsorglich: Thumbnail-Vorschau, die beim Hovern über die Pfeile
     erscheint (Desktop-Feature von LayerSlider), auf Mobile ausblenden.
     Ist normalerweise per Voreinstellung display:none und erscheint nur
     bei echtem Maus-Hover über den Pfeilen (kein Touch-Feature) – auf
     einem echten Handy sollte das nie auftauchen, hier trotzdem als
     Sicherheitsnetz. */
  .ls-thumbnail-hover {
    display: none !important;
  }

  /* Abstand der Boxen auf der Home-Seite */
 .rd-bcard {
  padding: 30px 12px !important;
}
  /* BRANCHEN – auf Mobile Zweispalter statt Dreispalter */
  .rd-branchen-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
     /* Badge ausblenden im Shop */
    .rd-badge-wrap {
    display: none !important;
  }

  /* Untertitel/Kicker/Trennlinie/Buttons ausblenden (nur auf Mobile).
     WICHTIG: alle 3 Klassen des jeweiligen Layers zusammen angeben
     (rd-*, ls-text-layer/ls-button-layer, ls-layer) – nicht nur rd-*!
     Ursache des hartnäckigen Mobile-Bugs gefunden: LayerSlider selbst hat
     im eigenen Plugin-CSS die Regel
       .ls-wrapper > .ls-layer { display: block !important; }
     Das sind 2 Klassen in einem Selektor = höhere Spezifität als unser
     bisheriges ".rd-divider" bzw. ".rd-slider-btn" mit nur 1 Klasse –
     bei gleicher !important-Priorität gewinnt die höhere Spezifität, egal
     in welcher Reihenfolge die Stylesheets geladen werden. Darum blieben
     Trennlinie und Buttons auf Mobile sichtbar, während Untertitel/Kicker
     (die zufällig schon mehrere Klassen im Selektor hatten) korrekt
     verschwanden. Fix: unsere Selektoren auf 3 Klassen bringen, damit wir
     die höhere Spezifität haben. */
  .rd-subtitle.ls-text-layer.ls-layer {
    display: none !important;
  }
  .rd-kicker.ls-text-layer.ls-layer {
    display: none !important;
  }
  .rd-divider.ls-text-layer.ls-layer {
    display: none !important;
  }
  .rd-slider-btn.ls-button-layer.ls-layer {
    display: none !important;
  }
}