/*

    BODY-DATA-ATTRIBUT-SELECTOREN

    data-page       = (Seiten-Typ ID)
        0 -
        1 -  Detailseite
        2 -  Kategorie, Hersteller - Artikellisting
        3 -
        5 -  Kontakt
        7 -  Newsarchiv Ãœbersicht
        14 - Newsmonat
        10 - Registrieren
        18 - Startseite
        19 - Versandinformationen
        20 - AGB
        21 - Datenschutz
        24 - BRANDS
        25 - Sitemap
        27 - Widerrufsbelehrung
     >> 31 - JTL-Seiten - siehe nachfolgend "data-pageid"
        36 - 404
        41 - Newsdetail

        ?? - Zahlung original
        ?? - Warenkorb
        ?? - Checkout
        ?? - Passwort vergessen
        ?? - Newsletteranmeldung

    data-pageid     = (JTL-Seiten ID)
        0 - Kategorie, Hersteller - Artikellisting oder Detailseite
        1 -
        2 -
        3 - Startseite
        49 - Impressum
        50 - Versandinformationen
        59 - Sitemap
        61 - Kontakt
        64 - Newsarchiv Ãœbersicht & Newsmonat, Newsdetail
        67 - AGB
        69 - Datenschutz
        71 - Zahlungsmöglichkeiten ("/Zahlung" Link im Footer wurde nicht gefunden > 404)
        72 - 404
        74 - Widerrufsbelehrung
        78 - Registrieren
        83 - BRANDS
        111 - Aktuelle Angebote
        
    data-maincatname  = (HAUPT-KATEGORIENAME)
        - GROW SHOP
        - PFLANZEN
        - HANFSAMEN
        - SERVICE
        - CBD SHOP
        - HEAD SHOP
        - BRANDS
        - Dashboard (Mitarbeiter)
        - 404
        - News

    data-catname      = (KATEGORIENAME)
        - Beispiele: "Produkte von 2Beees", "Dab-Equipment"

    data-catid      = (KATEGORIEID)

    data-prodid     = (PRODUKTNAME) Existiert nur auf Produkt-Detailseiten




    BEISPIEL:
    body[data-page="1"] .breadcrumb-wrapper .breadcrumb-item.last {
    display: none;
}


*/






/* ########## GLOBALE STYLES ########## */

:root {
    --grey100: #f8f8f8;
    --grey300: #e0e0e0;
    --grey800: #555555;
    --grey900: #434343;
    --greyish: linear-gradient(49deg, #aaaaaa 0%, #cccccc 100%);
    --goldish: linear-gradient(49deg, #FFD700 0%, #f4cf00 100%);
    --dggreen: #99cc33;
    --dggreenlight: #b3d966;
    --dggreendark: #70912d;
    --dgviolet: #6633cc;
    --dggold: #ffbc00;
}

.ov-t {
    display:none;
}

*:focus {
    outline:none!important;
}

#stck-bskt {display: none;}

footer {
    background:black!important;
    border-top:solid 5px var(--dggreen)
}

.boxed {
    background-color: #ffffff!important;
    border: solid 1px #ccc !important;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)!important;
}


.panel, .boxed, .p-c.thumbnail, .tab-content, .dg-variation, .card, .tab-content,
/*.basket-well, -- ganzes Panel im Warenkorb */
.bskt.itms {
    background: #ffffff!important;
    border: 5px solid #ededed!important;
}

    .bskt.itms{
        margin-bottom:1em;
        padding:1em;
    }

       .row.bskt.flx-nw:first-of-type {   /*  Tabellenheader der Warenkorbübersicht/Tabelle der Produkte im Warenkorb  */
            display: none;
        }


@media (min-width: 1200px) {
    #prevNextRow {
        background: #ffffff!important;
        border: 5px solid #ededed!important;
    }
}

.box.box-filter-characteristics.panel,
.box.box-categories.panel{
    border:none!important;
}

/* --- HEADER --- */
header {
    border-bottom:solid 5px var(--dggreen)!important;
}

    /* Language Dropdown (Fahne) im Header */
    .dropdown.lng-dd {
        margin-right:2em;
    }


#consent-manager {
    z-index: 998;
}

body {
    background: linear-gradient(90deg, var(--grey100) 0%, var(--grey300) 100%)!important;
}

body > p {
    display: none;
}

a {
    text-decoration:none!important;
}

/* BLOG */
article p, article ul {
    margin: .6rem 0 2rem 0!important;
}

article p a, article ul li a, .dg-hersteller-teaser-detailseite p a {
    color: black !important;
    text-decoration: underline!important;
    text-decoration-color: #FFD700!important;
    text-decoration-thickness: 2px!important;
}

#toc {
    margin: 30px 0;
}

#toc ul li a {
    font-weight:800!important;
    color:black!important;
    text-decoration:none!important;
    
}

#toc ul  {
    margin-bottom:0!important;
}

#toc li {
    border-top:solid 1px #ddd;
    padding: 5px;
}


/* ENDE */

/*.card, .tab-content { 
    background-color: #ffffff!important;
    border: solid 1px #ccc !important;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)!important;
}*/

.tab-content {
    border-top-left-radius: 0;
    padding:15px;
}


#shop-nav > div {
    justify-content: space-between!important;
}

.nav-tabs .nav-link.active{
    font-weight:700;
}

.card-header {
    background-color: var(--grey300);
}

hr {
    border:1px solid #cbcbcb!important;
}

h2 {
  position: relative;            /* Referenz für ::before */
  padding-left: 1rem;            /* Platz für den Balken */
  /* optional: damit z-index:-1 richtig wirkt */
  z-index: 1;
  margin-top: 1.5rem!important;                    
}

h2::before {
  content: '';                   
  position: absolute;            
  top: 0;                        
  left: 0;                       
  width: 5px;                    
  height: 100%;                  
  background: var(--dggreen)!important;
  border-radius: 5px;            
  z-index: 0;                    /* Liegt unter dem Text, aber über dem Hintergrund */
}

.btn-primary, .payship-option .badge {
    background: var(--goldish)!important;
}


.btn-secondary {
    background: var(--greyish)!important;
    color: #000!important;
    border: solid 1px #acacac!important;
}


/* ########## MENU ########## */

/* Warenkorb symbol - Artikelanzahl im Warenkorb */
#shop-nav > div > div:nth-child(4) > div > div.cart-menu.dropdown.items > a > sup {
    color:#000;
}


/* ########## WARENKORB ########## */
/* Abstand h5 im Summen Panel */
.cart-sum > h2.h5{
	margin-top:0!important;
}




/* ########## BILDER ########## */

/* Artikel Thumbnail */
.thumbnail .img-ct, .img-ct {
    background: transparent !important;
}

/* ########## PFLANZENLISTE ########## */

#plantListDiv > div.filter-container{
    display:none;
}

#plantListDiv > div.date-filter-container{
    border:none;
}
.plant-row {
    background: white!important;
    margin:1rem 0;
    padding: 1rem;
}

.plant-row.highlight-strain {
    border: solid #FFD700 10px!important;
}

   .plant-row.highlight-strain::after{
       content:'Highlight-Strain';
       position: relative;
       top: 12px;
       background: #ffd700;
       padding: 5px;
       color: #ffffff;
       font-weight: 800;
       font-size: 1.4rem;
}

.plant-row:hover {
    background: #ffffaf;
    transition: 1s;
}

.plant-list {
    background: #ff000000 !important;
    border: none!important;
    box-shadow:none!important
}
.plantlist-top-separate-header {
    font-size:1.5rem;
    color:var(--dggreen)
}

.plantlist-top-separate-header:nth-last-of-type(1) {
    margin-top: 4rem!important;
}

.plant-name {
    font-size:1.5rem;
}

.plant-lineage > small {
    background: #dddddd;
    padding: 2px 5px;
    border-radius:1rem;
}

.plant-amount {
    font-size:1.5rem;
    font-weight:700;
}

.plant-pic {
    text-align:center;
}


/* ########## STARTSEITE ########## */

.card.start-cat-box {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 300px;
}

/* ########## ARTIKELLISTE ########## */

.thumbnail .img-ct, .img-ct {
    background: white;
}

.img-ct.icon {
    background:transparent;
}

.thumbnail > .title {
    text-align:center;
}

.p-c.thumbnail .img-w {
    border-bottom: var(--dggreen) solid 5px;
}

.box-filter-characteristics,
.box-filter-availability,
.box-categories {
    background: #ffffff!important;
    border: solid 1px #ddd!important;
}

.status-0 {
    color: var(--dggold) !important;
    font-weight:900!important;
}

.old-price, .discount {
    font-size: 1.3em;
}

.old-price {
    margin-top:1em;
}


.discount {
    font-weight: bold!important;
    color: #ffffff !important;
    padding: 3px;
    background: #ca0000fc;
    text-align: center;
    border-radius: 0.5em;
    width:80%!important;
    margin:1rem auto;
}



/* ----------------------------- Variation (Varkombi) ----------------------------- */


/* -------- Banner "Variation wählen" -------- */

.choose-variations {
    font-size: 1.2em !important;
    text-align: center;
    font-weight: 800 !important;
    background: #ffee8a!important;
    border: solid 3px #ffce10!important;
  }


dt.var-head {
    text-align:center;
    font-size:1.2em;
    text-transform:uppercase;
}

.var-it label[data-type=radio] {
    margin:0!important;
    padding: 0!important;
    width:100%;
}

/* 1. Radio-Input unsichtbar, aber klickbar halten */
.variation input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    opacity: 0.2;        /* 20% Deckkraft */
    position: absolute;
    cursor: pointer;
  }
  
  /* 2. Container für jedes Label-Element */
  .variation .dg-variation {
    position: relative;
    display: inline-block;    /* damit width wirkt */
    width: 100%;
    max-width:400px;
    margin: 5px auto;       /* zentriert, mit Abstand oben/unten */
    padding: 1em;        /* Innenabstand oben/unten und links/rechts */
    text-align: center;
    font-weight: 500;
    background: #ffffff;
    border: 1px solid #b5b5b5;
    border-radius:5px;
    opacity: 0.75;            
    transition: 
      background-color 0.3s, 
      border-color 0.3s, 
      opacity 0.3s;
    padding-left: 2.5em;       /* extra Platz links für Icon */
  }
  
  /* 3. Checked-Zustand: Container hervorheben */
.variation input[type="radio"]:checked + .dg-variation {
    background-color: rgba(76, 175, 80, 0.1);
    border: 1px solid #4caf50;
    opacity: 1;   
    color:black;/* volle Deckkraft */
  }
  
  /* 4. Pseudo-Element für das Font-Awesome Häkchen */

.variation input[type="radio"] + .dg-variation::after {
    content: "\f111";                     /* FontAwesome-Code für check */
    font-family: "Font Awesome 5 Free";   /* oder z.B. "Font Awesome 6 Free" */
    position: absolute;
    left: 0.75em;                         /* Abstand vom linken Rand */
    top: 50%;                             /* vertikal zentrieren */
    transform: translateY(-50%);
    font-size: 1.4em;
 
  }
  .variation input[type="radio"]:checked + .dg-variation::after {
    content: "\f00c";                     /* FontAwesome-Code für check */
    font-weight: 900;    
    color: #4caf50;
  }

  .label-variation {
      font-size:1.5em;
      font-weight: 800;
  }
  
  .label-variation-stock {
      font-size:0.9em;
      font-weight:600;
  }
  

.btn-store-availability {
    display:none;
}

div.delivery-status.small > span {
    width: 100%;
    background: #ffffff;
    display: inline-block;
    text-align: center;
    border-radius:0.5em;
    font-size:1.2em;
    padding:5px;
}

    




/* ########## ARTIKELLISTE Listenansicht ##########  */

.img-ct { border-radius: 0!important;}

.img-ct:not(.icon) img {
    border-radius: 0.5rem;
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
}

.img-ct img {
                object-fit: cover!important;
                object-position: top center;
            }

/* .img-ct img.product-image {
    object-fit:contain!important;
}*/

.p-c.thumbnail {
    background: #ffffff;
    border-radius: var(--img-rnd);
    border: solid 1px #e6e6e6;
}

    .p-c.thumbnail > .caption{
        padding:0 1em 0.5em 1em;
        
    }

    .p-c.thumbnail > form{
        padding:10px;
        text-align:center;
        border-top:solid 1px #e6e6e6;
    }

    .p-c.thumbnail > .caption .price_wrapper {
        text-align:right;
        border-top:solid 1px #e9e9e9;
        margin-top:0.5rem;
        padding-top:0.5rem;
    }


/* ########## DETAILSEITE ########## */

.mw-container {
    width: 100%;
}

.buy-wrapper {
    text-align: right;
    height: fit-content;
    align-self: flex-start;
}

.status-2 {
    font-weight: bold!important;
}

#article-tab-nav {
    margin-bottom:0!important;
}

.payship-option .badge {
    font-size: 110%!important;
    color: #000!important;
}

.alert-info {
    text-align:center;
    background: #ceffb1 !important;
    border: none!important;
}

/* Zoom deaktivieren, wenn man im Desktop über das Bild fährt */
img.zoomImg,
.zoomContainer,
.zoomLens,
.zoomWindow {
  display: none !important;
}

/* ########## ARTIKELLISTE Kategorien ##########  */

.sc-w .thumbnail .img-ct {
    height: 150px;
    background: white!important;
}

.sc-w .thumbnail .img-ct img{
    object-fit: contain!important;
}

.img-w:hover .img-ct {
    transform: translateY(0px)!important;
}

/* Anzeige .. (Anzahl) Artikel */

#ftr-tp > div.flx-ac.flx-jb > div:nth-child(2)

{
    background:#ffd700;
    border-radius:15px;
    font-weight:800;
    padding: 5px 15px;
    color:black;
    
}

/* ############## BREAKER ############## */

.breaker {
    width: calc(100% - 2em);
    margin-left: 1em;
    min-height: 50px;
    height: auto;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: block;
}

.breaker-p {
    position: relative;
    display: inline-block;
    font-size: 1.5em;
    font-weight: 900;
    padding: 0 15px;
    height: auto;
    top: 10px;
    max-width: 100%;
}
@media (max-width: 768px) {
    .breaker-p > span {
        display: block;
        width: 100%;
    }
}

.breaker-p:before,
.breaker-p:after {
    content: ' ';
    height: 1px;
    background: #ababab;
    width: 100vw;
    position: absolute;
    top: calc(50% - .5px);
    right: 100%;
}
.breaker-p:after {
    left: 100%;
    right: auto;
}

/* ############## DROPPER ############## */
/* ######## Startseite - Newsbeiträge ######## */

.kk-news-box-abs-link {display: none;}

.kk-news-box-item-link {
    text-align:center;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

/* ######## FAQ Accordion ######## */

.kk-accordeon-tab.card {
    border:none!important;
    box-shadow:none!important;
}

.card-header.kk-accordeon-tab-title {
    background:none
}

.kk-accordeon-tab-title {
    font-weight:800;
    text-decoration:underline;
}


/* Nur solange noch kein Bild oder Video im firstview ist */
#km-fw {
    height: auto!important;
    margin-bottom: 0!important;
}

#content-wrapper {
    margin-top:0!important;
}


/* Hintergrund der Herstellerlogos auf der Startseite */
#man-sl .img-ct {
    background: white !important;
}

/* Hintergrund der Herstellerlogos auf der Startseite */
.kk-popup-modal--custom-width .modal-dialog {
    background: 0 0;
    background:#00000073!important;
}


.sf_seed_attrs {
    border-top: solid 1px #e6e6e6;
    margin-top:0.5rem;
    padding-top:0.5rem;
}

    .sf_seed_attrs p {
    font-size:0.7rem;
    margin:0;
    text-align:center;
    }

.sf_listing_hersteller_logo {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 1px;
    background: #ffffff;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    width: 75px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .sf_listing_hersteller_logo {
        width: 50px;
        height: 30px;
    }
}

.sf_listing_hersteller_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sf_right_top_attrs {
    position: absolute;
    right: 0;
    top: 100px;
    text-align: right;
    pointer-events: none;
}

.sf_right_top_attrs {
    display: flex;
    flex-direction: column; /* macht aus der Zeile eine Spalte */
    align-items: flex-end;  /* sorgt dafür, dass die Texte rechtsbündig bleiben */

}

.sf_attr_label {
    display: block;         /* stellt sicher, dass jedes Label eine eigene Zeile bekommt */
    text-align: right;      /* Text rechts ausrichten */
}

.sf_attr_label {
    background: rgb(209 78 125 / 90%);
    padding: 2px 5px;
    font-size: 0.8rem;
    margin-bottom: 5px;
    display: inline-block;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    pointer-events: none;
    color: white;
    font-weight: 900;
}

@media (max-width: 768px) {

    .sf_right_top_attrs {
    top: 60px;
    }
    
    .sf_attr_label {
    font-size: 0.65rem;
    font-weight:400;
    }
}

/* ===================================
   PDF-Angebote Modul
   =================================== */

.pdf-angebote-section {
    padding: 2rem 1rem;
    border-radius: 12px;
}

.pdf-angebote-header h2 {
    color: #333;
    font-weight: 600;
}

.pdf-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 120px;
}

.pdf-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.pdf-card:hover .pdf-icon svg {
    transform: scale(1.1);
}

.pdf-icon svg {
    transition: transform 0.2s ease;
}

.pdf-name {
    font-size: 0.85rem;
    color: #444;
    font-weight: 500;
    line-height: 1.3;
}

.pdf-card:hover .pdf-name {
    color: #198754; /* drgreen Farbe */
}

/* Responsive Anpassungen */
@media (max-width: 576px) {
    .pdf-angebote-section {
        padding: 1.5rem 0.75rem;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        border-radius: 0;
    }
    
    .pdf-icon svg {
        width: 48px;
        height: 48px;
    }
    
    .pdf-name {
        font-size: 0.75rem;
    }
    
    .pdf-card {
        min-height: 100px;
        padding: 0.75rem !important;
    }
}

/* ============================================
   STARTSEITEN ACCORDION
   ============================================ */

#startseitenAccordion {
    max-width: 600px;
    margin: 0 auto;
}

#startseitenAccordion .card {
    border: none;
    margin-bottom: 1rem;
}

#startseitenAccordion .card-header {
    border: none;
    background: transparent;
    text-align: center;
}

#startseitenAccordion .card-header .btn {
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    justify-content: center;
}

#startseitenAccordion .card-header .btn:focus,
#startseitenAccordion .card-header .btn:active {
    box-shadow: none;
    outline: none;
}

#startseitenAccordion .card-header .btn::before,
#startseitenAccordion .card-header .btn::after {
    display: none !important;
}

#startseitenAccordion .badge-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* ============================================
   STICKY FOOTER - Seite füllt Viewport
   ============================================ */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content-wrapper,
.main-wrapper,
main {
    flex: 1 0 auto;
}