@import url('./assets/vendor/googlefonts/anton/anton.css');

:root {
  --black: #000;
  --white: #fff;
  --red: #c80000;
  --red-hover: #8c0100;
  --grey-dark: #808080;
  --grey-light: #666;
}
body{
    color:var(--black) !important;
    position:relative;
}
header .navbar-toggler {
    margin-right: .5rem;
    margin-left: .5rem;
    color:var(--red);
}

@media (max-width: 991.98px) {
    header .navbar-brand img {
        max-width: 50vw;
        height:auto;
    }
}

 h1, h2, h3, .h1, .h2, .h3
,.product-matrix .product-matrix-title
,.sidepanel-left .box-normal .box-normal-link
,.productlist-filter-headline
{
    font-family: Anton, sans-serif;
    letter-spacing: .02em;
    color:#111;
}
.productlist-filter-headline {
    font-size:1.5em;
}
 .content-cats-small .sub-categories
,.content-cats-small .sub-categories a
,.content-cats-small .sub-categories .subcategories-image
{
    font-family: Anton, sans-serif;
    letter-spacing: .02em;
    font-size:1.2em;
    color:#111;
    text-decoration:none;
    transition:all .2s ease;
}
.content-cats-small .sub-categories a {
    text-decoration:none;
}
.content-cats-small .sub-categories .subcategories-image picture {
    transform:scale(1);
    transition:all .2s ease;
}
.content-cats-small .sub-categories:hover .subcategories-image picture {
    transform:scale(1.05);
}
.content-cats-small .sub-categories:hover a {
    color:var(--red);
    letter-spacing:.06em;
}
.productbox-inner .productbox-title {
    font-family: Anton, sans-serif;
    letter-spacing: .02em;
    font-size:1.2em;
}
.productbox-inner .productbox-title a {
    text-decoration:none;
}
.productbox-inner .productbox-title:hover a { }
 .productbox-inner .productbox-title
,.productbox-inner .price_wrapper {
    text-align:center;
}



/*Buttons*/
.btn-primary {
    color: var(--white);
    background-color: var(--red);
    border-color: var(--red);
    box-shadow: none;
    &:hover {
      color: var(--white);
      background-color: var(--red-hover) !important;
      border-color: var(--red-hover);
    }
}
/*Links*/
a {
  color: var(--red);
  &:hover {
    color: var(--red-hover)
  }
}
a.breadcrumb-link {
  color: var(--black);
  &:hover {
    color: var(--red);
    text-decoration: underline;
  }
}
#jtl-nav-wrapper > #header-top-bar,
#jtl-nav-wrapper > #header-top-bar a{
    color:var(--white);
}
.btn-link:hover,
#header-top-bar a:not(.dropdown-item):not(.btn):hover,
header a:not(.dropdown-item):not(.btn):hover {
  color: var(--red);
}
header .hide-navbar,
  color: var(--black);
}
.product-list a {
  color: var(--black);
  font-weight: 700;
  &:hover {
    color: var(--red);
    text-decoration: underline;
  }
}

/*Seitenleiste Kategorien*/
#sidepanel_left {
  .nav-item {
    background-color: var(--black);
    padding: .5rem 1rem;
    &.active,
    &:hover {
      background-color: var(--grey-light);
    }
    a {
      color: var(--white);
    }
  }
  ul {
    gap: .25rem;
  }
  .nav-panel .nav .nav {
    padding: 0;
  }
}

aside .nav-panel > .nav > .active > .nav-link {
  border-bottom: none;
}



/* 2025-09 */
body {
    background:#888 url(images/body_background.jpg) repeat;
}

@media (min-width: 992px) {
  header .navbar-brand img {
    height: 160px;
  }
}
header .navbar-brand img {
    padding-left:15px;
}

#mainNavigation {
    background-color: var(--black);
    color: var(--white);
    a {
        color: var(--white);
        text-decoration: none;
    }
}
#header-top-bar, header {
    background:transparent;
}
#jtl-nav-wrapper > #header-top-bar {
    background-color:var(--black);
}
#main-wrapper {
    background:transparent;
}
#content::after {
    content: "";
    position: fixed;
    background-color: #fffa;
    height: 100000vh;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    box-shadow: 0 0 10px var(--black);
    width: 1250px;
    width: 103.125rem /* fluid */
}
#header-top-bar > div.container-fluid {
    background-color:var(--black);
}
#header-top-bar a:not(.dropdown-item):not(.btn),
header a:not(.dropdown-item):not(.btn) {
    color:var(--black);
}
header#jtl-nav-wrapper > div.container-fluid {
    color:var(--black);
    background:var(--white);
    /* border-bottom:2px solid var(--black); */
    border-bottom:none;
    padding-right:0;
    padding-left:0;

}
@media (min-width: 992px) {
  header #mainNavigation {
    margin-right: 0;
  }
}

@media (min-width: 992px) {
  header .navbar-nav > .nav-item.dropdown-full .dropdown-menu {
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
    left:0;
    right:0;
    max-width: 103.125rem /* fluid */
  }
}

#shop-nav-wish .fas.fa-heart {
    color:var(--red);
}
#shop-nav-wish .fas.fa-heart::before {
    content:"\f1e2"; /* bomb */
}
.product-actions .btn.wishlist > span::before {
    content:"\f1e2"; /* bomb */
    font-weight: 900;
}

/* TODO check side effects */
TODO .form-control {
    border:1px solid #333;
    background-color:#fefefe;
}
/* TODO change back bg */
TODO header .form-control, header .form-control:focus {
    color:var(--black);
    border-color:var(--black);
}
TODO header .form-control.form-control.ac_input.tt-hint {
    background:#999 !important;
}
TODO header .search-wrapper .input-group-append .btn-secondary{
    border-top:1px solid var(--black);
    border-right:1px solid var(--black);
    border-bottom:1px solid var(--black);
}

/* scroll to top icon bottom left */
.smoothscroll-top {
    padding:0;
    border-radius:0;
    width: 85px;
    height: 85px;
    line-height: 85px;
    background-color:transparent;
    box-shadow:none;
    transform:scale(1);
    transition:all .1s ease;
    opacity:1;
}
.smoothscroll-top:hover {
    transform:scale(1.1);
}
.smoothscroll-top .scroll-top-inner {
    display:block;
    height:85px;
    width:85px;
    background:transparent url(./images/bombup.svg) no-repeat center center;
    background-size:85px;
}
.scroll-top-inner > i {
    display:none;
}
.scroll-top-inner > i:before {
    content:none;
}
/* end scroll to top icon bottom left */
.ribbon-3 {
    background-color:var(--red);
}
#product-list .product-wrapper .list-gallery {
    padding:15px;
}
#product-list .productbox-inner .productbox-title {
    padding: 0 10px;
}
#product-list .productbox-inner div[itemprop="offers"] {
    padding: 0 10px;
}
/* @media (min-width: 768px) { */
    .productbox.productbox-hover .productbox-inner::before {
        background-color:rgba(255,255,255,.4) !important;
        border: 3px solid transparent;
        border-radius: 10px;
    }
    .productbox.productbox-hover:hover .productbox-inner::before {
        background-color:var(--white) !important;
        box-shadow:0 0 1.5rem rgba(0, 0, 0, .4);
        left: -.5rem;
        right: -.5rem;
        top: -.5rem;
        bottom: -.5rem;
        border: 3px solid var(--black);
        border-radius: 10px;
    }
/* } */
.productbox-inner .productbox-title
, .productbox-inner .price_wrapper {
    padding-right:5px;
    padding-left:5px;
}
.productbox-images {
    margin-bottom:15px;
}
.productbox-images .inner picture {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse:hover {
    background:none;
    box-shadow:none;
    border:none;
    border-radius: 10px;
}
#product-list.layout-gallery .productbox-hover.productbox-show-variations.transition
,#product-list.layout-gallery .productbox-hover.productbox-show-variations:hover {
    padding: .5rem .5rem 0;
}
.productbox.productbox-hover:hover .productbox-ribbon.ribbon {
    top:-3px;
    left:calc(-1.0em - 4px);

}
#footer {
    padding-top:2rem;
}
@media (min-width: 768px) {
    #footer > .container {
        position:relative;
    }
    #footer > .container:after {
        pointer-events:none;
        content:"";
        position:absolute;
        display:block;
        width:100vw;
        top:-2rem;
        bottom:-15px;
        left:calc( ( 100vw - 1250px ) / 2 * -1 );
        background:transparent;
        box-shadow: 0 0 15px var(--white), 0 0 20px var(--black);
    }
}
#footer #copyright {
    padding-top:5px; /* make room for glow effect above */
    background: #888 url(./images/body_background.jpg) repeat;
}
#footer .footer-social-media a {
    border-color:var(--white);
    color:var(--white);
}

body.is-checkout #shop-logo {
    max-height:63px;
}

.btn-outline-primary {
    background-color:#0008;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='4' fill='%23ffff00'/%3e%3c/svg%3e");
}
/*29.09. Kniep*/
/*Checkbox*/
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--red);
    background-color: var(--red);
}


/*Suche aktiv, Text weiß*/
header .form-control:focus {
    color:#fff;
    border-color:#000;
}
#tabAccordion > .card, #tab-downloads .card {
    background-color:initial;
}
#tabAccordion > .card .card-header {
    background-color:initial;
    color:var(--red);
    font-weight:bold;
    font-size:1.2rem;
}
mark, .mark {
    display:inline-block;
    padding:5px;
}

/* Fancy text highlighter effect
mark, .mark {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-weight: 700;
  background: linear-gradient(104deg, rgba(255,255,64,0) .9%, #ffff40 2.4%, rgba(255,255,64,0.5) 5.8%, rgba(255,255,64,0.1) 93%, rgba(255,255,64,0.7) 96%, rgba(255,255,255,0) 98%),linear-gradient(183deg, rgba(255,255,64,0) 0%, rgba(255,255,64,0.3) 7.9%, rgba(255,255,64,0) 15%);
  text-shadow: -12px 12px 9.8px rgba(255,255,64,0.7),21px -18.1px 7.3px #fff,-18.1px -27.3px 30px #fff;
  padding: .4em 1em .4em .5em;
  box-decoration-break: clone;
  margin-left: .1em;
  border-radius: 7.5px;
}
*/

/* Temporäre Info */
body.is-checkout .row.checkout-payment-options.form-group::after {
    content:"Falls Du bisher per Lastschrift bezahlen konntest, schreib uns bitte einen kurzen Hinweis in den Bestellkommentar.";
    display:block;
    margin: 15px 0 15px 20px;
    padding:5px;
    background-color:#fcf8e3;
    border-left:2px solid var(--red);
}

/* Info Abo-Versand */
body.is-checkout .checkout-shipping-form-options #del9 + label .title > div {
    color:var(--red);
}

/*Login Dropdown Header*/
.account-icon-dropdown .dropdown-footer
 {
    background-color: var(--red);
    a:hover {
        color: var(--white);
    }
}
/*-angemeldet*/
header .dropdown-item:hover {
    background-color: var(--grey-light);
    color: var(--black);
}
/*Warenkorb Dropdown Header*/
.dropdown-cart-items {
    a {
        color: var(--red) !important;
        text-decoration: underline !important;
        &:hover {
            color: var(--red-hover) !important;
            text-decoration: none !important;
        }
    }
}
.cart-dropdown .cart-dropdown-total-item {
    color: var(--white);
}
.cart-dropdown-shipping-notice {
    color: var(--white);
}
a.shipment.popup {
    color: var(--red) !important;
    text-decoration: underline !important;
    &:hover {
        color: var(--red-hover) !important;
        text-decoration: none !important;
    }
}

/*Button Versandkosten ermitteln*/
button.btn.btn-outline-primary.btn-block,
a.btn.btn-outline-primary.btn-block {
    color: var(--white);
     &:hover {
        color: #525252;
    }
}


/*Suchleiste schwarz auf weiss*/
/* input.form-control.ac_input.tt-hint 
{
    background-color: var(--white) !important;
}
#search-header {
    color: var(--black);
}
 */
/*Login Header schwarz auf weiss*/
/* header .form-control, header .form-control:focus  {
    background-color: var(--white) !important;
    color: var(--black);
}
#jtl-nav-wrapper .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label {
    background: var(--white);
    color: var(--black);
} */