/* ============================================================
   LETTRA DESIGN
   PRESTASHOP 9 CHILD THEME
   ============================================================ */

/* ============================================================
   LETTRA FARBEN
   ============================================================ */

:root {
    --bs-primary: #284c96;
    --bs-primary-rgb: 40, 76, 150;
    --lettra-blue: #284c96;
    --lettra-black: #000000;
    --lettra-white: #ffffff;
}

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

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #284c96 !important;
    border-color: #284c96 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ============================================================
   PRIMARY HELPERS
   ============================================================ */

.text-primary {
    color: #284c96 !important;
}

.bg-primary {
    background-color: #284c96 !important;
}

.border-primary {
    border-color: #284c96 !important;
}

/* ============================================================
   HEADER
   ============================================================ */

/* ------------------------------------------------------------
   TELEFON IM HEADER
   ------------------------------------------------------------ */

#header .header-nav #contact-link a:hover,
#header .header-nav #contact-link a:focus,
#header .header-nav #contact-link a:focus-visible,
#header .header-nav #contact-link a:active,
#header #contact-link a:hover,
#header #contact-link a:focus,
#header #contact-link a:focus-visible,
#header #contact-link a:active,
#contact-link a:hover,
#contact-link a:focus,
#contact-link a:focus-visible,
#contact-link a:active,
.header-nav .contact-link:hover,
.header-nav .contact-link:focus,
.header-nav .contact-link:focus-visible,
.header-nav .contact-link:active,
.header-nav .contact-link a:hover,
.header-nav .contact-link a:focus,
.header-nav .contact-link a:focus-visible,
.header-nav .contact-link a:active {
    color: #284c96 !important;
}

/* ------------------------------------------------------------
   SPRACHAUSWAHL
   ------------------------------------------------------------ */

#header .language-selector a:hover,
#header .language-selector a:focus,
#header .language-selector a:focus-visible,
#header .language-selector a:active,
#header .language-selector .dropdown-item:hover,
#header .language-selector .dropdown-item:focus {
    color: #284c96 !important;
}

/* ------------------------------------------------------------
   BENUTZER / LOGIN / LOGOUT
   ------------------------------------------------------------ */

#header .user-info a:hover,
#header .user-info a:focus,
#header .user-info a:focus-visible,
#header .user-info a:active {
    color: #284c96 !important;
}

/* ============================================================
   HEADER WARENKORB
   ============================================================ */

#header .header-nav .cart-preview.active,
#header .header-nav .cart-preview.active:hover,
#header .header-nav .cart-preview.active:focus,
#header .header-nav .cart-preview.active:focus-within {
    background-color: #284c96 !important;
}

#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active a:hover,
#header .header-nav .cart-preview.active a:focus,
#header .header-nav .cart-preview.active a:focus-visible,
#header .header-nav .cart-preview.active a:active,
#header .header-nav .cart-preview.active .shopping-cart,
#header .header-nav .cart-preview.active .cart-products-count {
    color: #ffffff !important;
}

/* ============================================================
   HAUPTMENUE
   ============================================================ */

#header .header-top #top-menu > li > a:hover,
#header .header-top #top-menu > li > a:focus,
#header .header-top #top-menu > li > a:focus-visible,
#header .header-top #top-menu > li > a:active,
#top-menu > li > a:hover,
#top-menu > li > a:focus,
#top-menu > li > a:focus-visible,
#top-menu > li > a:active {
    color: #284c96 !important;
}

/* Aktuelle Hauptkategorie */

#top-menu > li.current > a,
#top-menu > li.active > a,
#top-menu > li > a.current,
#top-menu > li > a.active,
#top-menu > li.current > a:hover,
#top-menu > li.active > a:hover {
    color: #284c96 !important;
}

#top-menu > li > a:focus-visible {
    outline-color: #284c96 !important;
}

#top-menu > li {
    position: relative;
}

#top-menu > li > a.dropdown-item {
    cursor: pointer;
}

/* ============================================================
   HAUPTMENUE OHNE UNTERMENUES
   ============================================================ */

#top-menu > li > .sub-menu,
#top-menu > li > .js-sub-menu,
#top-menu > li > .popover,
#top-menu > li > .collapse,
#top-menu > li > div[class*="sub-menu"],
#top-menu > li > div[id^="top_sub_menu_"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
}

#top-menu > li:hover > .sub-menu,
#top-menu > li:hover > .js-sub-menu,
#top-menu > li:hover > .popover,
#top-menu > li:hover > .collapse,
#top-menu > li:focus > .sub-menu,
#top-menu > li:focus > .js-sub-menu,
#top-menu > li:focus > .popover,
#top-menu > li:focus > .collapse,
#top-menu > li:focus-within > .sub-menu,
#top-menu > li:focus-within > .js-sub-menu,
#top-menu > li:focus-within > .popover,
#top-menu > li:focus-within > .collapse {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    left: -99999px !important;
    top: -99999px !important;
}

#top-menu > li > .collapse,
#top-menu > li > .collapse.show,
#top-menu > li > .collapsing,
#top-menu > li > .sub-menu.collapse,
#top-menu > li > .sub-menu.collapse.show {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

/* Dropdown-Pfeile entfernen */

#top-menu > li > a > .float-xs-right,
#top-menu > li > a .navbar-toggler,
#top-menu > li > a .collapse-icons {
    display: none !important;
}

/* ============================================================
   GENERISCHE LINKS
   ============================================================ */

a:hover,
a:focus,
a:focus-visible,
a:active {
    color: #284c96;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb a:hover,
.breadcrumb a:focus,
.breadcrumb a:focus-visible,
.breadcrumb a:active {
    color: #284c96 !important;
}

/* ============================================================
   LINKE KATEGORIE-NAVIGATION
   ============================================================ */

.category-top-menu > li > a.text-uppercase.h6 {
    display: block;

    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;

    text-transform: none !important;

    white-space: normal;
    overflow-wrap: break-word;
}

.category-top-menu > li > a:hover,
.category-top-menu > li > a:focus,
.category-top-menu > li > a:focus-visible,
.category-top-menu > li > a:active,
.category-sub-menu li > a:hover,
.category-sub-menu li > a:focus,
.category-sub-menu li > a:focus-visible,
.category-sub-menu li > a:active {
    color: #284c96 !important;
}

/* ============================================================
   UNTERKATEGORIEN
   ============================================================ */

#subcategories .subcategory-name,
#subcategories ul li .subcategory-name,
#subcategories .subcategories-list li .subcategory-name {
    color: #000000 !important;
}

#subcategories .subcategory-name:hover,
#subcategories .subcategory-name:focus,
#subcategories .subcategory-name:focus-visible,
#subcategories .subcategory-name:active,
#subcategories ul li:hover .subcategory-name,
#subcategories ul li:focus-within .subcategory-name,
#subcategories .subcategories-list li:hover .subcategory-name,
#subcategories .subcategories-list li:focus-within .subcategory-name {
    color: #284c96 !important;
}

#subcategories ul li .subcategory-image a {
    border-color: transparent;
}

#subcategories ul li .subcategory-image a:hover,
#subcategories ul li .subcategory-image a:focus,
#subcategories ul li .subcategory-image a:focus-visible,
#subcategories ul li .subcategory-image a:active,
#subcategories ul li:hover .subcategory-image a,
#subcategories ul li:focus-within .subcategory-image a {
    border-color: #284c96 !important;
}

/* ============================================================
   PRODUKTPREISE
   ============================================================ */

.product-price,
.current-price,
.current-price span,
.product-price-and-shipping .price {
    color: #284c96 !important;
}

/* ============================================================
   PRODUKTBILDER / THUMBNAILS
   ============================================================ */

.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover,
.product-images > li.thumb-container > .thumb:focus,
.product-images > li.thumb-container > .thumb:focus-visible,
.product-images .thumb.selected,
.product-images .thumb:hover,
.product-images .thumb:focus,
.product-images .thumb:focus-visible {
    border-color: #284c96 !important;
}

/* ============================================================
   PRODUKT-TABS
   ============================================================ */

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible,
.nav-tabs .nav-link:active,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #284c96 !important;
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover,
.tabs .nav-tabs .nav-link:focus,
.tabs .nav-tabs .nav-link:focus-visible {
    border-color: #284c96 !important;
}

/* ============================================================
   FORMULARE
   ============================================================ */

.form-control:focus,
.form-control:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    border-color: #284c96 !important;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:focus-visible,
.dropdown-item.active,
.dropdown-item:active {
    color: #284c96 !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination .current a,
.pagination a:hover,
.pagination a:focus,
.pagination a:focus-visible,
.pagination a:active {
    color: #284c96 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer-container .block-contact a,
.footer-container .block-contact #contact-infos a,
.footer-container #contact-infos a {
    color: inherit !important;
    text-decoration: none;
}

.footer-container .block-contact a:hover,
.footer-container .block-contact a:focus,
.footer-container .block-contact a:focus-visible,
.footer-container .block-contact a:active,
.footer-container .block-contact #contact-infos a:hover,
.footer-container .block-contact #contact-infos a:focus,
.footer-container .block-contact #contact-infos a:focus-visible,
.footer-container .block-contact #contact-infos a:active,
.footer-container #contact-infos a:hover,
.footer-container #contact-infos a:focus,
.footer-container #contact-infos a:focus-visible,
.footer-container #contact-infos a:active {
    color: #284c96 !important;
}

.footer-container .links a:hover,
.footer-container .links a:focus,
.footer-container .links a:focus-visible,
.footer-container .links a:active {
    color: #284c96 !important;
}

/* ============================================================
   STARTSEITE
   ============================================================ */

.post-manual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding: 20px;
}

.post-manual-card {
    display: flex;
    flex-direction: column;

    width: 100%;

    overflow: hidden;

    background-color: #ffcc00;

    color: #ffffff;
    text-decoration: none !important;

    box-shadow: 0 3px 10px rgb(0 0 0 / 15%);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.post-manual-card:hover,
.post-manual-card:focus,
.post-manual-card:focus-visible {
    color: #ffffff;
    text-decoration: none !important;

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
}

.post-manual-card img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    object-fit: cover;
}

.post-manual-card span {
    display: block;

    width: 100%;

    margin: 0;
    padding: 6px 12px;

    background-color: #284c96;

    color: #ffffff;

    text-align: center;

    font-size: clamp(24px, 3vw, 46px);
    font-weight: 700;
    line-height: 1.05;

    text-decoration: none;
}

.post-manual-card:hover span,
.post-manual-card:focus span,
.post-manual-card:focus-visible span,
.post-manual-card:active span {
    background-color: #284c96;
    color: #ffffff;
    text-decoration: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    .post-manual-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 12px;
    }

    .post-manual-card span {
        padding: 8px 10px;
        font-size: 26px;
    }
}

@media (max-width: 420px) {

    .post-manual-grid {
        gap: 12px;
        padding: 8px;
    }

    .post-manual-card span {
        font-size: 22px;
    }
}