/**
 * ============================================================================
 * NVIBE BAITS - NATURAL CARPBAITS
 * Custom CSS for JTL-Shop 5 / NOVA Template
 * ============================================================================
 *
 * Author: Markus Theisen
 * Version: 2.0 (RESTRUCTURED & ORGANIZED)
 * Date: February 2025
 *
 * This file overrides default NOVA template styles.
 * Based on: JTL-Shop 5.6.1 / NOVA Template 5.6.0
 *
 * Location (NOVAChild):
 * templates/NOVAChild/themes/base/sass/custom.css
 *
 * ============================================================================
 * RESTRUCTURING NOTES
 * ============================================================================
 *
 * - NO CODE WAS CHANGED OR DELETED
 * - All code only REORGANIZED for better structure
 * - All comments translated to English
 * - Logical grouping by functionality
 * - Complete Table of Contents added
 *
 * ============================================================================
 * TABLE OF CONTENTS
 * ============================================================================
 *
 * 1. IMPORTS & FONTS
 *    - Google Fonts (Kanit)
 *
 * 2. CSS VARIABLES
 *    - Empty (Reserved for future use)
 *
 * 3. GLOBAL OVERRIDES
 *    3.1 Primary Color Override (#40eadc replaces #f8bf00)
 *    3.2 Typography & Fonts
 *
 * 4. HEADER & NAVIGATION
 *    4.1 Header Top Bar
 *    4.2 Logo Styling
 *    4.3 Navigation Bar (Custom Dark Wrapper)
 *    4.4 Header Icons (Icon above Label Layout)
 *    4.5 Search Bar
 *    4.6 Logo & Icons Positioning (Desktop)
 *
 * 5. PRODUCT LIST
 *    5.1 Product Box Styling (Rounded)
 *    5.2 Product Quantity & Add to Cart
 *    5.3 Product Variation Swatches (Circular)
 *    5.4 Price Slider (noUi)
 *
 * 6. PRODUCT DETAILS
 *    6.1 Product Info Card (Right Side)
 *    6.2 Product Variations
 *    6.3 Product Price Display
 *    6.4 Add to Cart Area
 *    6.5 Hidden Elements
 *
 * 7. FOOTER
 *    7.1 Main Footer Styling
 *    7.2 Copyright Bar (3-Column Layout)
 *    7.3 Payment & Shipping Provider Bar
 *
 * 8. LEGAL PAGES
 *    8.1 Shipping Information (Versandinformationen)
 *    8.2 Terms & Conditions (AGB)
 *    8.3 Privacy Policy (Datenschutz)
 *    8.4 Right of Withdrawal (Widerrufsbelehrung)
 *    8.5 Imprint (Impressum)
 *    8.6 Payment Information (Zahlungsinformationen)
 *
 * 9. MISCELLANEOUS
 *    9.1 Imprint Logo
 *
 * 10. RESPONSIVE BREAKPOINTS
 *     10.1 Desktop Specific (992px+)
 *     10.2 Mobile Specific (max-width)
 *
 * ============================================================================
 */


/* ============================================================================
   1. IMPORTS & FONTS
   ============================================================================ */

/* Google Fonts - Kanit (All weights) */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* ============================================================================
   2. CSS VARIABLES
   Define colors, fonts and other values centrally here
   ============================================================================ */

/* Empty - Reserved for future use */


/* ============================================================================
   3. GLOBAL OVERRIDES
   ============================================================================ */

/* ----------------------------------------------------------------------------
   3.1 Primary Color Override
   Replaces #f8bf00 with #40eadc throughout the entire template
   ---------------------------------------------------------------------------- */

/* Bootstrap Primary Button */
.btn-primary {
    background-color: #666 !important;
    border-color: #666 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #25d4c5 !important;
    border-color: #25d4c5 !important;
    color: #ffffff !important;
}

/* Outline Primary Button */
.btn-outline-primary {
    color: #40eadc !important;
    border-color: #40eadc !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #40eadc !important;
    border-color: #40eadc !important;
    color: #ffffff !important;
}

/* Links Hover */
a:hover,
a:focus {
    color: #40eadc !important;
}

/* Navigation Hover Underline */
header .navbar-nav>.nav-item>.nav-link::before {
    border-color: #40eadc !important;
}

header .navbar-nav>.nav-item.active>.nav-link::before,
header .navbar-nav>.nav-item:hover>.nav-link::before {
    border-color: #40eadc !important;
}

/* Active Nav Tab / Filter */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-bottom-color: #40eadc !important;
    color: #40eadc !important;
}

/* Input Focus Border */
.form-control:focus {
    border-color: #40eadc !important;
    box-shadow: 0 0 0 0.2rem rgba(64, 234, 220, 0.25) !important;
}

/* Active Filter Items */
.filter-item.active,
.filter-item:active {
    color: #40eadc !important;
}

.filter-item.active .filter-img {
    border-color: #40eadc !important;
}

/* Pagination */
.page-link:hover,
.page-link:focus {
    color: #40eadc !important;
}

.pagination .page-item.active .page-link {
    color: #40eadc !important;
}

/* Breadcrumb Active */
.breadcrumb-item.active {
    color: #40eadc !important;
}

/* Product Details - Active Tab */
#tabAccordion .nav-link.active,
.tab-navigation .nav-link.active {
    border-bottom-color: #40eadc !important;
    color: #40eadc !important;
}

/* Delivery Status - In Stock */
.delivery-status .status-2,
.signal_image .status-2 {
    color: #1C871E !important;
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Rating Stars */
.rating .fas.fa-star,
.star-rating .fas {
    color: #40eadc !important;
}

/* Badge / Ribbon Primary */
.badge-primary,
.ribbon-primary {
    background-color: #40eadc !important;
    color: #ffffff !important;
}

/* Checkbox / Radio checked */
.custom-control-input:checked~.custom-control-label::before {
    background-color: #40eadc !important;
    border-color: #40eadc !important;
}

/* Focus Outline */
.btn:focus-visible,
:focus-visible {
    outline-color: #40eadc !important;
}

/* Cart / Wishlist Icon Hover */
#shop-nav .nav-link:hover {
    color: #40eadc !important;
}

/* Search Button */
.btn-search,
#searchSubmit {
    background-color: #40eadc !important;
    border-color: #40eadc !important;
    color: #ffffff !important;
}

/* Progress Bar */
.progress-bar {
    background-color: #40eadc !important;
}

/* Productlist Filter Active Border */
.productlist-filter-categories>.nav-item>.nav-link::before {
    border-color: #40eadc !important;
}

/* Active nav panel underline */
.nav-panel>.nav>.active>.nav-link {
    border-bottom-color: #40eadc !important;
}

/* Stepper Links */
.stepper a:focus {
    color: #40eadc !important;
}

/* ----------------------------------------------------------------------------
   3.2 Typography & Fonts
   ---------------------------------------------------------------------------- */

/* Nav Mobile Heading */
.nav-scrollbar-item .nav-mobile-heading {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Text Truncate */
.text-truncate {
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
}


/* ============================================================================
   4. HEADER & NAVIGATION
   ============================================================================ */

/* ----------------------------------------------------------------------------
   4.1 Header Top Bar
   ---------------------------------------------------------------------------- */

div#header-top-bar {
    background-color: #f8f8f8;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #636363;
}

/* ----------------------------------------------------------------------------
   4.2 Logo Styling
   ---------------------------------------------------------------------------- */

@media (min-width: 992px) {
    header .navbar-brand img {
        height: 85px;
        margin-bottom: 20px;
    }
}

/* ----------------------------------------------------------------------------
   4.3 Navigation Bar - Custom Dark Wrapper
   Full width dark navigation bar (#343637)
   ---------------------------------------------------------------------------- */

/* Navigation Wrapper - Full Width */
.custom-navigation-wrapper {
    background-color: #343637;
    width: 100vw;
    /* Full Viewport Width */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Navigation Container - Centered */
.custom-navigation-wrapper #mainNavigation {
    max-width: 1250px;
    /* Same max-width as Container */
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Navigation Links - White Text */
.custom-navigation-wrapper .nav-link {
    color: #ffffff !important;
}

/* Navigation Links Hover */
.custom-navigation-wrapper .nav-link:hover {
    color: #40eadc !important;
}

/* Active Menu Item */
.custom-navigation-wrapper .nav-item.active>.nav-link {
    color: #40eadc !important;
}

/* Dropdown Menu Text Color Adjustment */
.custom-navigation-wrapper .dropdown-menu {
    background-color: #ffffff;
}

.custom-navigation-wrapper .dropdown-item {
    color: #ffffff !important;
}

.custom-navigation-wrapper .dropdown-item:hover {
    background-color: #ffffff;
    color: #40eadc !important;
}

/* ----------------------------------------------------------------------------
   4.4 Header Icons - Icon above Label Layout
   ---------------------------------------------------------------------------- */

#shop-nav .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    padding: 0.75rem 1rem;
}

#shop-nav .nav-link i,
#shop-nav .nav-link svg,
#shop-nav .nav-link .fas,
#shop-nav .nav-link .far {
    font-size: 1.6rem;
    display: block;
}

.nav-icon-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    line-height: 1;
}

/* Separator Line between Icons */
#shop-nav .nav-item:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* ----------------------------------------------------------------------------
   4.5 Search Bar
   ---------------------------------------------------------------------------- */

#search {
    max-width: 500px;
    margin: 0 auto;
}

/* ----------------------------------------------------------------------------
   4.6 Logo & Icons Positioning - Desktop Only
   Moves logo and icons closer to center
   ---------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .navbar-brand {
        margin-left: 8rem !important;
    }

    #shop-nav {
        margin-right: 8rem !important;
    }
}


/* ============================================================================
   5. PRODUCT LIST
   ============================================================================ */

/* ----------------------------------------------------------------------------
   5.1 Product Box Styling
   Rounded corners, shadow, modern design
   ---------------------------------------------------------------------------- */

/* Product Box - Rounded Corners */
.productbox {
    /* border-radius: 16px; */
    overflow: visible !important;
    background: #fff;
    /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); */
    display: flex;
    flex-direction: column;
}

/* Image Wrapper - Overflow hidden to keep rounded corners */
.productbox .productbox-images {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

/* Product Name */
.productbox-title a {
    font-size: 1rem;
    font-weight: 500;
    color: #636363 !important;
    text-decoration: none !important;
    line-height: 1.4;
    font-family: 'Kanit', sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Price - Large and Anthracite */
.productbox .price {
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    color: #66acaf !important;
    font-family: 'Kanit', sans-serif;
}

/* Base Price - Small below */
.productbox .base-price,
.productbox .per-unit {
    font-size: 0.8rem !important;
    color: #888 !important;
}

/* IN STOCK (IMMEDIATELY AVAILABLE) */
.productbox .delivery-status .status-2 {
    color: #00a650 !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em;
}

/* Delivery Time Text */
.productbox .delivery-status small,
.productbox .delivery-status span:not(.status-2) {
    font-size: 0.8rem;
    color: #888;
}

/* Inner Container grows with content - Padding for text contents */
.productbox-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 0.75rem;
}

/* Variations don't push button out */
.productbox-variations {
    overflow: visible !important;
}

.productbox-onhover.collapse.show {
    overflow: visible !important;
}


/* ----------------------------------------------------------------------------
   5.3 Product Variation Swatches (Circular)
   ---------------------------------------------------------------------------- */

/* Slider Container: Circles next to each other without overlap */
.productbox .form-row.swatches {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

.productbox .form-row.swatches .col-auto,
.productbox .form-row.swatches .js-slider-item {
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
}

/* Label - Round Circle */
.productbox label.swatches-text {
    width: 52px;
    height: 52px;
    border-radius: 50% !important;
    border: 2px solid #eee !important;
    background: #fff;
    color: #777;
    font-size: 13px;
    font-weight: 600;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
    padding: 0;
    margin: 0;
    font-family: 'Kanit', sans-serif;
}

/* Radio Input Hide */
.productbox label.swatches-text input[type="radio"] {
    display: none !important;
}

/* Hover */
.productbox label.swatches-text:hover {
    background: #40eadc !important;
    border-color: #40eadc !important;
    color: #fff !important;
}

/* Active / Selected */
.productbox label.swatches-text.active {
    background: #40eadc !important;
    border-color: #40eadc !important;
    color: #fff !important;
}

/* ----------------------------------------------------------------------------
   5.4 Price Slider (noUi)
   ---------------------------------------------------------------------------- */

.noUi-horizontal .noUi-connect {
    background: #40eadc;
}

/* ========================================
   5.5 PRODUCT LIST TITLE - Only HEADLINE
   ======================================== */

/* Nur die Überschrift in Produktlisten/Kategorien */
#result-wrapper .title {
    text-align: center;
    padding: 2rem 0;
}

#result-wrapper .title h1,
#result-wrapper .title .h2 {
    font-family: 'Kanit', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1.2;
}

/* Türkiser Unterstrich */
#result-wrapper .title h1::after,
#result-wrapper .title .h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #40eadc;
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* Responsive */
@media (max-width: 768px) {

    #result-wrapper .title h1,
    #result-wrapper .title .h2 {
        font-size: 1.8rem;
    }
}


/* ============================================================================
   6. PRODUCT DETAILS
   ============================================================================ */

/* ----------------------------------------------------------------------------
   6.1 Product Info Card (Right Side)
   ---------------------------------------------------------------------------- */

#product-offer .product-info {
    border: 1px solid #40eadc;
    background-color: #fcfcfc;
    border-radius: 10px;
    padding: 20px;
}

#product-offer .product-info ul.info-essential {
    margin: 2rem 0;
    padding-left: 0;
    list-style: none;
    font-family: 'Kanit', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
}

.estimated-delivery {
    font-weight: 500;
    color: #707070;
    font-size: 0.7rem;
    font-family: 'Kanit', sans-serif;
    text-transform: uppercase;
}

#product-offer .product-info .shortdesc {
    margin-bottom: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.7;
    color: #666;
    border: none;
    border-left: 3px solid #40eadc;
    background: #f8f9fa;
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
}

/* ----------------------------------------------------------------------------
   6.2 Product Variations
   ---------------------------------------------------------------------------- */

.variations dt {
    margin-bottom: 8px;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.1rem;
}

/* Slider Container */
#product-offer .form-row.swatches {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 0;
    margin: 0 -2px;
}

#product-offer .form-row.swatches .col-auto,
#product-offer .form-row.swatches .js-slider-item {
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
}

/* Label - Round Circle */
#product-offer label.swatches-text {
    width: 70px;
    height: 70px;
    border-radius: 50% !important;
    border: 1px solid #aaaaaa !important;
    color: #666666;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
    padding: 0;
    margin: 0;
    font-family: 'Kanit', sans-serif;
}

/* Radio Input Hide */
#product-offer label.swatches-text input[type="radio"] {
    display: none !important;
}

/* Hover */
#product-offer label.swatches-text:hover {
    background: #40eadc !important;
    border-color: #40eadc !important;
    color: #fff !important;
}

/* Active / Chosen */
#product-offer label.swatches-text.active {
    background: #40eadc !important;
    border-color: #40eadc !important;
    color: #666 !important;
}

/* ----------------------------------------------------------------------------
   6.3 Product Price Display
   ---------------------------------------------------------------------------- */

/* Main Price on Product Detail Page - independent H1 */
#product-offer .price.h1,
#product-offer .price.h1 span {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #1fc7b9 !important;
    line-height: 1.2;
    font-family: 'Kanit', sans-serif;
    margin-bottom: 5px;
}

/* ----------------------------------------------------------------------------
   6.4 Add to Cart Area
   ---------------------------------------------------------------------------- */

/* Remove Border on Product Detail */
#product-offer .form-counter {
    border: none !important;
    border-radius: 8px !important;
    max-height: none !important;
}

/* Container - Side by Side */
#product-offer .basket-form-inline {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap !important;
}

/* Left Block: Quantity Selection */
#product-offer .basket-form-inline .form-counter {
    flex: 0 0 180px;
    max-width: 180px;
}

#product-offer .basket-form-inline .form-counter .input-group {
    display: flex;
    align-items: center;
    background: #f0f0f0;
    border: none !important;
    border-radius: 8px;
    height: 56px;
    padding: 0 8px;
    box-shadow: none !important;
}

#product-offer .basket-form-inline .form-counter .btn {
    background: transparent;
    border: none !important;
    box-shadow: none !important;
    color: #343637;
    font-size: 20px;
    font-weight: 300;
    padding: 0 12px;
    height: 56px;
}

#product-offer .basket-form-inline .form-counter input[type="number"] {
    background: #f0f0f0;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #343637;
    width: 30px;
    height: 50px;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

#product-offer .basket-form-inline .form-counter input[type="number"]::-webkit-outer-spin-button,
#product-offer .basket-form-inline .form-counter input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Right Block: Cart Button */
#product-offer .basket-form-inline .btn-primary {
    flex: 1 1 auto;
    min-width: 0;
    background: #343637 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.2s ease;
}

#product-offer .basket-form-inline .btn-primary:hover {
    background: #1a1c1d !important;
}

#product-offer .basket-form-inline .btn-primary i {
    font-size: 20px;
}

/* ----------------------------------------------------------------------------
   6.5 Hidden Elements
   ---------------------------------------------------------------------------- */

.product-manufacturer {
    display: none;
}

.product-category {
    display: none;
}

.product-sku {
    display: none;
}


/* ============================================================================
   7. FOOTER
   ============================================================================ */

/* ----------------------------------------------------------------------------
   7.1 Main Footer Styling
   ---------------------------------------------------------------------------- */

#footer {
    background-color: #343637;
    color: #f6f5f5;
}

#footer a:not(.btn),
#footer .productlist-filter-headline,
#footer .newsletter-footer-heading,
#footer .btn-outline-primary {

    color: #ffffff;
}

/* ----------------------------------------------------------------------------
   7.2 Copyright Bar (3-Column Layout)
   ---------------------------------------------------------------------------- */

#copyright {
    background-color: #222;
    color: #fff;
    padding: 0;
    margin: 0;
}

.copyright-custom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 4rem;
    /* Increased from 2rem to 4rem */
    gap: 2rem;
}

/* Left: Copyright */
.copyright-left {
    flex: 0 0 auto;
    font-size: 14px;
}

.copyright-left span {
    color: #fff;
}

/* Center: Price Notice */
.copyright-center {
    flex: 1 1 auto;
    text-align: center;
    font-size: 13px;
}

.copyright-center span {
    color: #f0f0f0;
}

.copyright-center a {
    color: #40eadc;
    text-decoration: underline;
}

.copyright-center a:hover {
    color: #25d4c5;
}

/* Right: Design Credit */
.copyright-right {
    flex: 0 0 auto;
    font-size: 14px;
}

.copyright-right span {
    color: #fff;
}

/* Pulsing Heart Animation */
.heart-pulse {
    color: #ff4757;
    animation: heartPulse 1.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes heartPulse {

    0%,
    100% {
        transform: scale(1);
    }

    10%,
    30% {
        transform: scale(1.2);
    }

    20%,
    40% {
        transform: scale(1);
    }
}

/* Responsive Copyright Bar */
@media (max-width: 992px) {
    .copyright-custom-bar {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        text-align: center;
    }

    .copyright-left,
    .copyright-right {
        width: 100%;
    }

    .copyright-center {
        order: -1;
    }
}

/* ----------------------------------------------------------------------------
   7.3 Payment & Shipping Provider Bar
   ---------------------------------------------------------------------------- */

.payment-shipping-bar {
    background: #343637;
    padding: 1.25rem 0;
}

.payment-shipping-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 0 4rem;
}

/* Labels */
.payment-shipping-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Provider Icons Container */
.provider-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Shipping Icons */
.shipping-providers {
    flex: 0 0 auto;
}

/* Payment Icons */
.payment-providers {
    flex: 1 1 auto;
    text-align: right;
}

.payment-providers .provider-icons {
    justify-content: flex-end;
}

.payment-icon {
    font-size: 28px;
    color: #fff;
    transition: color 0.2s ease, transform 0.2s ease;
}

.payment-icon:hover {
    color: #40eadc;
    transform: translateY(-3px);
}

/* Responsive Payment & Shipping Bar */
@media (max-width: 1200px) {
    .payment-shipping-wrapper {
        padding: 0 2rem;
        gap: 2rem;
    }
}

@media (max-width: 992px) {
    .payment-shipping-wrapper {
        flex-direction: column;
        gap: 2rem;
        padding: 0 2rem;
    }

    .shipping-providers,
    .payment-providers {
        width: 100%;
        text-align: center;
    }

    .payment-providers .provider-icons {
        justify-content: center;
    }

    .payment-shipping-label {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .payment-icon {
        font-size: 24px;
    }

    .shipping-icon {
        height: 30px;
    }

    .provider-icons {
        gap: 0.75rem;
    }

    .payment-shipping-wrapper {
        padding: 0 1rem;
    }
}

/* ========================================
   SECTION 7.4: FOOTER MODIFICATIONS
   ======================================== */

/* ✅ Footer Column Dividers - Hauchdünne vertikale Linien */
#footer .row>div[class*='col-'] {
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    /* Sehr dünne helle Linie */
}

/* Letzte Spalte hat keine Linie rechts */
#footer .row>div[class*='col-']:last-child {
    border-right: none;
}

/* ✅ Footer Überschriften in UPPERCASE */
#footer .card-title,
#footer .productlist-filter-headline {
    text-transform: uppercase !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    padding-bottom: 10px;
}

/* Optional: Mehr Abstand zwischen Spalten */
#footer .row>div[class*='col-'] {
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (max-width: 991px) {
    #footer .row>div[class*='col-'] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 2rem;
        margin-bottom: 2rem;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #footer .row>div[class*='col-']:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    /* Footer-boxes Spalten überschreiben */
    #footer-boxes .col-lg-3,
    #footer-boxes .col-lg-3:last-child,
    #footer-boxes .col-lg-3:not(:last-child) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   BENEFITS BAR - Über dem Footer
   ======================================== */

.benefits-bar {
    background: #fcfcfc;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    padding: 2rem 0;
    margin-bottom: 0;
}

.benefits-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ✅ BENEFIT ITEM mit Hover-Effekt */
.benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* ✅ HOVER: Zoom + Farbwechsel */
.benefit-item:hover {
    transform: scale(1.1);
    background-color: rgba(102, 172, 175, 0.08);
    /* Leichter #66acaf Hintergrund */
}

.benefit-item:hover .benefit-icon i {
    color: #66acaf;
    /* Icon wird türkis */
    transition: color 0.3s ease;
}

.benefit-item:hover .benefit-title {
    color: #66acaf;
    /* Titel wird türkis */
    transition: color 0.3s ease;
}

/* Smooth Transition für Icon */
.benefit-icon i {
    transition: color 0.3s ease;
}

/* Smooth Transition für Titel */
.benefit-title {
    transition: color 0.3s ease;
}

.benefit-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon i {
    font-size: 2rem;
    color: #999999;
    /* Grau wie im Nautika Beispiel */
}

.benefit-text {
    flex: 1;
}

.benefit-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #343637;
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.benefit-subtitle {
    font-size: 0.75rem;
    color: #999999;
    margin: 0;
    line-height: 1.3;
}

/* Responsive - Mobile */
@media (max-width: 991px) {
    .benefits-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 576px) {
    .benefits-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .benefit-item {
        justify-content: flex-start;
    }
}

/* ========================================
   FOOTER NAVIGATION - Arrow Slide Effect (Ultra Precise)
   ======================================== */

/* NUR die nav-links IN den Dropdown-Menüs */
#footer .collapse .nav-link,
#footer .card-body a:not(.btn),
#footer .list-group-item a:not(.btn) {
    position: relative;
    display: inline-block;
    padding-left: 0;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
}

#footer .collapse .nav-link::before,
#footer .card-body a:not(.btn)::before,
#footer .list-group-item a:not(.btn)::before {
    content: '→';
    position: absolute;
    left: -20px;
    opacity: 0;
    color: #40eadc;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
}

#footer .collapse .nav-link:hover,
#footer .card-body a:not(.btn):hover,
#footer .list-group-item a:not(.btn):hover {
    padding-left: 1.5rem;
    color: #40eadc !important;
}

#footer .collapse .nav-link:hover::before,
#footer .card-body a:not(.btn):hover::before,
#footer .list-group-item a:not(.btn):hover::before {
    left: 0;
    opacity: 1;
}

/* Alle Überschriften-Elemente ausschließen */
#footer .card-header *::before,
#footer .card-title::before,
#footer h2::before,
#footer h3::before,
#footer h4::before,
#footer [data-toggle]::before {
    display: none !important;
}

/* ============================================================================
   8. LEGAL PAGES
   Professional design for all legal pages
   ============================================================================ */

/* ----------------------------------------------------------------------------
   8.1 Shipping Information (Versandinformationen)
   ---------------------------------------------------------------------------- */

.versandkosten-seite {
    color: #525252;
    line-height: 1.6;
}

.versandkosten-seite .intro-text {
    margin-bottom: 2rem;
}

.versandkosten-seite h2 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: #343637;
}

/* Shipping Cost Table */
.versand-tabelle {
    width: 100%;
    margin: 2rem 0;
    border-collapse: separate;
    border-spacing: 0 1rem;
}

.versand-tabelle tr {
    background: #f8f8f8;
    border-radius: 8px;
}

.versand-tabelle td {
    padding: 1.5rem;
    vertical-align: middle;
}

.versand-tabelle td:first-child {
    border-radius: 8px 0 0 8px;
}

.versand-tabelle td:last-child {
    border-radius: 0 8px 8px 0;
}

.versand-tabelle .land-flagge {
    width: 180px;
    text-align: center;
}

.versand-tabelle .land-flagge img {
    height: 100px;
    width: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.versand-tabelle .land-info h3 {
    margin: 0 0 0.75rem 0;
    color: #343637;
    font-size: 1.25rem;
}

.versand-tabelle .land-info p {
    margin: 0;
}

.versand-tabelle .highlight {
    color: #333333;
    font-size: 18px;
    font-weight: 700;
}

/* USP Benefits */
.usp-benefits-versand {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0 2.5rem 0;
}

.usp-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: #f8f8f8;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.usp-benefit-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.usp-benefit-item i {
    font-size: 28px;
    color: #40eadc;
    flex-shrink: 0;
    margin-top: 2px;
}

.usp-benefit-text strong {
    display: block;
    color: #343637;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.usp-benefit-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #808080;
}

/* Contact Box */
.kontakt-box {
    margin-top: 3rem;
    padding: 0;
    background: linear-gradient(135deg, #f8f8f8 0%, #efefef 100%);
    border-radius: 8px;
    border-left: 4px solid #40eadc;
    overflow: hidden;
}

.kontakt-box-header {
    background: #343637;
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kontakt-box-header i {
    font-size: 20px;
    color: #40eadc;
}

.kontakt-box-header strong {
    font-size: 1.1rem;
}

.kontakt-box-content {
    padding: 1.5rem;
}

.kontakt-box-content p {
    margin: 0 0 1rem 0;
}

.kontakt-box-content p:last-child {
    margin-bottom: 0;
}

.kontakt-box-content i {
    color: #40eadc;
    width: 20px;
    margin-right: 0.5rem;
}

.kontakt-box-content a {
    color: #343637;
    text-decoration: none;
}

.kontakt-box-content a:hover {
    color: #40eadc;
}

/* Shipping Notice */
.versand-hinweis {
    margin-top: 2rem;
    padding: 1rem;
    background: #fff4e6;
    border-left: 3px solid #ffa726;
    border-radius: 4px;
}

.versand-hinweis small {
    color: #666;
}

/* Responsive Shipping Page */
@media (max-width: 768px) {
    .versand-tabelle .land-flagge {
        display: none;
    }

    .versand-tabelle td:first-child,
    .versand-tabelle td:last-child {
        border-radius: 8px;
    }

    .usp-benefits-versand {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------------
   8.2 Terms & Conditions (AGB)
   ---------------------------------------------------------------------------- */

.agb-seite {
    max-width: 900px;
    margin: 0 auto;
    color: #525252;
    line-height: 1.7;
}

.agb-intro {
    background: linear-gradient(135deg, #333333 0%, #25d4c5 100%);
    color: #fff;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
}

.agb-intro p:first-child {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.agb-intro p:last-child {
    margin: 0;
    opacity: 0.95;
}

/* T&C Sections */
.agb-section {
    margin-bottom: 2rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.agb-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.agb-section-header {
    background: #f8f8f8;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid #40eadc;
}

.agb-section-header i {
    font-size: 22px;
    color: #40eadc;
    flex-shrink: 0;
}

.agb-section-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #343637;
    font-weight: 600;
}

.agb-section-content {
    padding: 1.5rem;
}

.agb-section-content p {
    margin: 0 0 1rem 0;
}

.agb-section-content p:last-child {
    margin-bottom: 0;
}

.agb-section-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.agb-section-content li {
    margin-bottom: 0.5rem;
}

/* Highlight Boxes */
.agb-highlight-box {
    background: #fff4e6;
    border-left: 3px solid #ffa726;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.agb-highlight-box p {
    margin: 0 0 0.75rem 0;
    font-weight: 600;
    color: #343637;
}

.agb-highlight-box ul {
    margin: 0;
    padding-left: 1.25rem;
}

.agb-highlight-box li {
    margin-bottom: 0.5rem;
}

.agb-highlight-box li:last-child {
    margin-bottom: 0;
}

/* Payment Methods */
.payment-method {
    background: #f8f8f8;
    padding: 1.25rem;
    margin: 1rem 0;
    border-radius: 6px;
}

.payment-method h4 {
    margin: 0 0 0.75rem 0;
    color: #343637;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.payment-method h4 i {
    color: #40eadc;
    font-size: 18px;
}

.payment-method p {
    margin: 0;
    font-size: 0.95rem;
}

/* T&C Footer */
.agb-footer {
    margin-top: 3rem;
    padding: 2rem;
    background: #f8f8f8;
    border-radius: 8px;
    text-align: center;
    border-top: 3px solid #40eadc;
}

.agb-footer p {
    margin: 0.5rem 0;
}

.agb-footer a {
    color: #333333;
    text-decoration: none;
}

.agb-footer a:hover {
    text-decoration: underline;
}

/* T&C Links */
.agb-section-content a {
    color: #333333;
    text-decoration: none;
}

.agb-section-content a:hover {
    text-decoration: underline;
}

/* Responsive T&C */
@media (max-width: 768px) {
    .agb-intro {
        padding: 1.5rem;
    }

    .agb-section-header {
        padding: 1rem 1.25rem;
    }

    .agb-section-header h3 {
        font-size: 1rem;
    }

    .agb-section-content {
        padding: 1.25rem;
    }
}

/* ----------------------------------------------------------------------------
   8.3 Privacy Policy (Datenschutz)
   ---------------------------------------------------------------------------- */

.datenschutz-seite {
    max-width: 1000px;
    margin: 0 auto;
    color: #525252;
    line-height: 1.7;
}

.datenschutz-intro {
    background: linear-gradient(135deg, #333333 0%, #25d4c5 100%);
    color: #fff;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
}

.datenschutz-intro p:first-child {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.datenschutz-intro p:last-child {
    margin: 0;
    opacity: 0.95;
}

/* Privacy Sections */
.datenschutz-section {
    margin-bottom: 2rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.datenschutz-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.datenschutz-section-header {
    background: #f8f8f8;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid #40eadc;
}

.datenschutz-section-header i {
    font-size: 22px;
    color: #40eadc;
    flex-shrink: 0;
}

.datenschutz-section-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #343637;
    font-weight: 600;
}

.datenschutz-section-content {
    padding: 1.5rem;
}

.datenschutz-section-content p {
    margin: 0 0 1rem 0;
}

.datenschutz-section-content p:last-child {
    margin-bottom: 0;
}

.datenschutz-section-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.datenschutz-section-content li {
    margin-bottom: 0.5rem;
}

/* Info Boxes */
.info-box {
    background: #f8f8f8;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border-radius: 6px;
    border-left: 3px solid #40eadc;
}

.info-box-success {
    background: #f6fff6;
    border-left-color: #1C871E;
}

.info-box h4 {
    margin: 0 0 0.75rem 0;
    color: #343637;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-box h4 i {
    color: #40eadc;
    font-size: 18px;
}

.info-box-success h4 i {
    color: #1C871E;
}

.info-box p {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
}

.info-box p:last-child {
    margin-bottom: 0;
}

.info-box ul {
    margin: 0.75rem 0 0 0;
    padding-left: 1.25rem;
}

.info-box li {
    margin-bottom: 0.5rem;
}

.info-box .small-text {
    font-size: 0.85rem;
    color: #808080;
    font-style: italic;
}

/* Browser List */
.browser-list {
    list-style: none;
    padding-left: 0;
}

.browser-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e8e8e8;
}

.browser-list li:last-child {
    border-bottom: none;
}

.browser-list a {
    color: #40eadc;
    text-decoration: none;
}

.browser-list a:hover {
    text-decoration: underline;
}

/* Rights Grid */
.rechte-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.recht-item {
    background: #f8f8f8;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recht-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recht-item i {
    font-size: 32px;
    color: #40eadc;
    margin-bottom: 1rem;
    display: block;
}

.recht-item h4 {
    margin: 0 0 0.5rem 0;
    color: #343637;
    font-size: 1rem;
}

.recht-item p {
    margin: 0;
    font-size: 0.9rem;
    color: #808080;
}

/* Right of Objection Box */
.widerspruchsrecht-box {
    margin: 3rem 0;
    background: #fff4e6;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #ffa726;
}

.widerspruchsrecht-header {
    background: #ffa726;
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.widerspruchsrecht-header i {
    font-size: 24px;
}

.widerspruchsrecht-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.widerspruchsrecht-content {
    padding: 1.5rem;
}

.widerspruchsrecht-content p {
    margin: 0 0 1rem 0;
}

.widerspruchsrecht-content p:last-child {
    margin-bottom: 0;
}

/* Privacy Footer */
.datenschutz-footer {
    margin-top: 3rem;
    padding: 2rem;
    background: #f8f8f8;
    border-radius: 8px;
    text-align: center;
    border-top: 3px solid #40eadc;
}

.datenschutz-footer p {
    margin: 0.5rem 0;
}

.datenschutz-footer a {
    color: #40eadc;
    text-decoration: none;
}

.datenschutz-footer a:hover {
    text-decoration: underline;
}

/* Privacy Links */
.datenschutz-section-content a {
    color: #40eadc;
    text-decoration: none;
}

.datenschutz-section-content a:hover {
    text-decoration: underline;
}

/* Responsive Privacy */
@media (max-width: 768px) {
    .datenschutz-intro {
        padding: 1.5rem;
    }

    .datenschutz-section-header {
        padding: 1rem 1.25rem;
    }

    .datenschutz-section-header h3 {
        font-size: 1rem;
    }

    .datenschutz-section-content {
        padding: 1.25rem;
    }

    .rechte-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------------
   8.4 Right of Withdrawal (Widerrufsbelehrung)
   ---------------------------------------------------------------------------- */

.widerrufsbelehrung-seite {
    max-width: 1000px;
    margin: 0 auto;
    color: #525252;
    line-height: 1.7;
}

.widerrufsbelehrung-intro {
    background: linear-gradient(135deg, #333333 0%, #25d4c5 100%);
    color: #fff;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    text-align: center;
}

.widerrufsbelehrung-intro h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
    color: #fff;
}

.widerrufsbelehrung-intro p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.95;
}

/* Withdrawal Sections */
.widerrufsbelehrung-section {
    margin-bottom: 2rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.widerrufsbelehrung-section-header {
    background: #f8f8f8;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid #40eadc;
}

.widerrufsbelehrung-section-header i {
    font-size: 22px;
    color: #40eadc;
}

.widerrufsbelehrung-section-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #343637;
}

.widerrufsbelehrung-section-content {
    padding: 1.5rem;
}

.widerrufsbelehrung-section-content p {
    margin: 0 0 1rem 0;
}

.widerrufsbelehrung-section-content h4 {
    margin: 1.5rem 0 0.75rem 0;
    color: #343637;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.widerrufsbelehrung-section-content h4 i {
    color: #40eadc;
    font-size: 18px;
}

/* Info Highlight */
.info-highlight {
    background: #f0fffe;
    border-left: 4px solid #40eadc;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border-radius: 6px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.info-highlight i {
    font-size: 28px;
    color: #40eadc;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.info-highlight h4 {
    margin: 0 0 0.5rem 0;
    color: #343637;
}

.info-highlight p {
    margin: 0;
}

/* Withdrawal Contact */
.kontakt-widerruf {
    background: #f8f8f8;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border-radius: 6px;
}

.kontakt-widerruf h4 {
    margin: 0 0 1rem 0;
    display: block;
}

.kontakt-widerruf ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kontakt-widerruf li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kontakt-widerruf li i {
    color: #40eadc;
    width: 20px;
    text-align: center;
}

.kontakt-widerruf a {
    color: #40eadc;
    text-decoration: none;
}

.kontakt-widerruf a:hover {
    text-decoration: underline;
}

/* Info Box (Reused from Privacy) */
.info-box {
    background: #f6fff6;
    border-left: 4px solid #1C871E;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border-radius: 6px;
}

.info-box p {
    margin: 0;
}

.info-box i {
    color: #1C871E;
}

/* Consequences Grid */
.folgen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.folge-item {
    background: #f8f8f8;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.folge-item i {
    font-size: 32px;
    color: #40eadc;
    margin-bottom: 1rem;
    display: block;
}

.folge-item h4 {
    margin: 0 0 0.75rem 0;
    color: #343637;
    font-size: 1rem;
    display: block;
}

.folge-item p {
    margin: 0;
    font-size: 0.9rem;
    color: #808080;
}

/* Timeline */
.timeline-widerruf {
    margin: 2.5rem 0 1.5rem 0;
    position: relative;
}

.timeline-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 50px;
    width: 2px;
    height: calc(100% + 1rem);
    background: #e8e8e8;
}

.timeline-dot {
    width: 45px;
    height: 45px;
    background: #40eadc;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-content h4 {
    margin: 0 0 0.5rem 0;
    color: #343637;
    display: block;
}

.timeline-content p {
    margin: 0;
    color: #808080;
}

/* Sample Form */
.muster-formular-box {
    margin: 3rem 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 2px solid #40eadc;
}

.muster-formular-header {
    background: #40eadc;
    color: #fff;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.muster-formular-header i {
    font-size: 24px;
}

.muster-formular-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.muster-formular-content {
    padding: 2rem;
}

.formular-hinweis {
    font-style: italic;
    color: #808080;
    margin-bottom: 1.5rem;
}

.formular-text {
    background: #f8f8f8;
    padding: 1.5rem;
    border-radius: 6px;
    border: 1px dashed #ccc;
    margin-bottom: 1.5rem;
}

.formular-text p {
    margin: 0 0 1rem 0;
}

.formular-text a {
    color: #40eadc;
    text-decoration: none;
}

.formular-text a:hover {
    text-decoration: underline;
}

.formular-line {
    min-height: 40px;
    border-bottom: 1px solid #e8e8e8;
    padding: 0.75rem 0;
}

.formular-line:last-of-type {
    border-bottom: none;
}

.formular-download {
    text-align: center;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: #40eadc;
    color: #fff;
    padding: 0.875rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease;
}

.btn-download:hover {
    background: #25d4c5;
}

.btn-download i {
    font-size: 18px;
}

/* Withdrawal Footer */
.widerrufsbelehrung-footer {
    margin-top: 3rem;
    padding: 2rem;
    background: #f8f8f8;
    border-radius: 8px;
    text-align: center;
    border-top: 3px solid #40eadc;
}

.widerrufsbelehrung-footer p {
    margin: 0.5rem 0;
}

.widerrufsbelehrung-footer a {
    color: #333333;
    text-decoration: none;
}

.widerrufsbelehrung-footer a:hover {
    text-decoration: underline;
}

/* Responsive Withdrawal */
@media (max-width: 768px) {
    .widerrufsbelehrung-intro {
        padding: 1.5rem;
    }

    .widerrufsbelehrung-intro h2 {
        font-size: 1.5rem;
    }

    .folgen-grid {
        grid-template-columns: 1fr;
    }

    .timeline-item {
        gap: 1rem;
    }

    .timeline-dot {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .muster-formular-content {
        padding: 1.5rem;
    }
}

/* ----------------------------------------------------------------------------
   8.5 Imprint (Impressum)
   ---------------------------------------------------------------------------- */

.impressum-seite {
    max-width: 1000px;
    margin: 0 auto;
    color: #525252;
    line-height: 1.7;
}

.impressum-intro {
    background: linear-gradient(135deg, #333333 0%, #25d4c5 100%);
    color: #fff;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    text-align: center;
}

.impressum-intro h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
    color: #fff;
}

.impressum-intro p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.95;
}

/* Imprint Grid */
.impressum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.impressum-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.impressum-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.impressum-card-header {
    background: #f8f8f8;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-left: 4px solid #40eadc;
}

.impressum-card-header i {
    font-size: 20px;
    color: #40eadc;
}

.impressum-card-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #343637;
}

.impressum-card-content {
    padding: 1.5rem 1.25rem;
}

.impressum-card-content p {
    margin: 0 0 0.75rem 0;
}

.impressum-card-content p:last-child {
    margin-bottom: 0;
}

.impressum-card-content a {
    color: #333333;
    text-decoration: none;
}

.impressum-card-content a:hover {
    text-decoration: underline;
}

.impressum-card-content i {
    color: #40eadc;
    width: 20px;
    margin-right: 0.5rem;
}

.ust-id {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333333;
    background: #f0fffe;
    padding: 0.75rem;
    border-radius: 4px;
    text-align: center;
    letter-spacing: 1px;
}

/* Imprint Sections */
.impressum-section {
    margin-bottom: 2rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.impressum-section-header {
    background: #f8f8f8;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid #40eadc;
}

.impressum-section-header i {
    font-size: 22px;
    color: #40eadc;
}

.impressum-section-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #343637;
}

.impressum-section-content {
    padding: 1.5rem;
}

.impressum-section-content p {
    margin: 0 0 1rem 0;
}

.impressum-section-content p:last-child {
    margin-bottom: 0;
}

.impressum-section-content a {
    color: #333333;
    text-decoration: none;
}

.impressum-section-content a:hover {
    text-decoration: underline;
}

/* Bank Details */
.bank-hinweis {
    font-weight: 600;
    color: #343637;
    margin-bottom: 1.5rem !important;
}

.bank-details {
    background: #f8f8f8;
    border-radius: 6px;
    padding: 1.25rem;
    border-left: 3px solid #40eadc;
}

.bank-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e8e8e8;
}

.bank-detail-row:last-child {
    border-bottom: none;
}

.bank-label {
    font-weight: 600;
    color: #343637;
    min-width: 120px;
}

.bank-value {
    color: #525252;
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

/* Info Box (Reused) */
.info-box {
    background: #fff4e6;
    border-left: 3px solid #ffa726;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 0 0;
    border-radius: 4px;
}

.info-box p {
    margin: 0;
}

/* Imprint Footer */
.impressum-footer {
    margin-top: 3rem;
    padding: 2rem;
    background: #f8f8f8;
    border-radius: 8px;
    text-align: center;
    border-top: 3px solid #40eadc;
}

.impressum-footer p {
    margin: 0.5rem 0;
}

.impressum-footer a {
    color: #333333;
    text-decoration: none;
}

.impressum-footer a:hover {
    text-decoration: underline;
}

/* Responsive Imprint */
@media (max-width: 768px) {
    .impressum-intro {
        padding: 1.5rem;
    }

    .impressum-intro h2 {
        font-size: 1.5rem;
    }

    .impressum-grid {
        grid-template-columns: 1fr;
    }

    .bank-detail-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .bank-value {
        text-align: left;
    }
}

/* ----------------------------------------------------------------------------
   8.6 Payment Information (Zahlungsinformationen)
   ---------------------------------------------------------------------------- */

.zahlungsinfo-seite {
    max-width: 1100px;
    margin: 0 auto;
    color: #525252;
    line-height: 1.7;
}

.zahlungsinfo-intro {
    background: linear-gradient(135deg, #333333 0%, #25d4c5 100%);
    color: #fff;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    text-align: center;
}

.zahlungsinfo-intro h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
    color: #fff;
}

.zahlungsinfo-intro p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.95;
}

/* Payment Info Sections */
.zahlungsinfo-section {
    margin-bottom: 2rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.zahlungsinfo-section-header {
    background: #f8f8f8;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid #40eadc;
}

.zahlungsinfo-section-header i {
    font-size: 22px;
    color: #40eadc;
}

.zahlungsinfo-section-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #343637;
}

.zahlungsinfo-section-content {
    padding: 1.5rem;
}

.zahlungsinfo-section-content p {
    margin: 0 0 1rem 0;
}

.zahlungsinfo-section-content h4 {
    margin: 1.5rem 0 0.75rem 0;
    color: #343637;
    font-size: 1.05rem;
}

/* Payment Methods Grid */
.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.payment-method-card {
    background: #f8f8f8;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.payment-method-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.payment-method-icon {
    font-size: 40px;
    color: #40eadc;
    margin-bottom: 1rem;
    display: block;
}

.payment-method-card h4 {
    margin: 0 0 0.5rem 0;
    color: #343637;
    font-size: 1rem;
}

.payment-method-card p {
    margin: 0;
    font-size: 0.9rem;
    color: #808080;
}

/* Payment Process Boxes */
.payment-process-box {
    background: #f8f8f8;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    border-left: 4px solid #40eadc;
}

.payment-process-vorkasse {
    border-left-color: #ffa726;
}

.payment-process-box h4 {
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #343637;
}

.payment-process-box h4 i {
    color: #40eadc;
    font-size: 20px;
}

.process-steps {
    display: grid;
    gap: 1rem;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #40eadc;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.process-step p {
    margin: 0;
    padding-top: 4px;
}

/* Warning Box */
.warning-box {
    background: #fff4e6;
    border-left: 3px solid #ffa726;
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.warning-box i {
    color: #ffa726;
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.warning-box p {
    margin: 0;
}

/* Security Grid */
.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.security-item {
    text-align: center;
}

.security-item i {
    font-size: 40px;
    color: #1C871E;
    margin-bottom: 1rem;
    display: block;
}

.security-item h4 {
    margin: 0 0 0.5rem 0;
    color: #343637;
}

.security-item p {
    margin: 0;
    font-size: 0.9rem;
}

/* Debit Timing Boxes */
.abbuchung-box {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
}

.abbuchung-item {
    background: #f8f8f8;
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    gap: 1.5rem;
    border-left: 4px solid #40eadc;
}

.abbuchung-vorkasse {
    border-left-color: #ffa726;
}

.abbuchung-icon {
    font-size: 32px;
    color: #40eadc;
    flex-shrink: 0;
}

.abbuchung-vorkasse .abbuchung-icon {
    color: #ffa726;
}

.abbuchung-content h4 {
    margin: 0 0 0.5rem 0;
}

.abbuchung-content p {
    margin: 0 0 0.75rem 0;
}

.abbuchung-content p:last-child {
    margin-bottom: 0;
}

.info-highlight {
    background: #fff4e6;
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.info-highlight i {
    color: #ffa726;
    margin-top: 2px;
    flex-shrink: 0;
}

.info-highlight p {
    margin: 0;
}

/* Bank Details Card */
.bank-details-card {
    background: #f8f8f8;
    border-radius: 6px;
    padding: 1.5rem;
    border-left: 4px solid #40eadc;
    margin: 2rem 0;
}

.bank-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e8e8e8;
}

.bank-detail-row:last-child {
    border-bottom: none;
}

.bank-detail-wichtig {
    background: #fff4e6;
    margin: 0 -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
    border-top: 2px solid #ffa726;
}

.bank-label {
    font-weight: 600;
    color: #343637;
    min-width: 150px;
}

.bank-value {
    color: #525252;
    font-family: 'Courier New', monospace;
    font-weight: 500;
    text-align: right;
}

.bank-detail-wichtig .bank-value {
    color: #ffa726;
    font-weight: 700;
}

/* Info Box Important */
.info-box-important {
    background: #fff4e6;
    border-left: 3px solid #ffa726;
    padding: 1.25rem;
    margin: 2rem 0;
    border-radius: 4px;
}

.info-box-important p {
    margin: 0 0 0.5rem 0;
}

.info-box-important p:last-child {
    margin-bottom: 0;
}

/* FAQ Items */
.faq-item {
    background: #f8f8f8;
    padding: 1.25rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    border-left: 3px solid #40eadc;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-item h4 {
    margin: 0 0 0.75rem 0;
    color: #343637;
}

.faq-item p {
    margin: 0;
}

/* Payment Info Footer */
.zahlungsinfo-footer {
    margin-top: 3rem;
}

.kontakt-support {
    background: linear-gradient(135deg, #343637 0%, #2a2c2d 100%);
    color: #fff;
    padding: 2rem;
    border-radius: 8px;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.kontakt-support i {
    font-size: 48px;
    color: #40eadc;
    flex-shrink: 0;
}

.kontakt-support h4 {
    margin: 0 0 0.5rem 0;
    color: #fff;
}

.kontakt-support p {
    margin: 0 0 0.5rem 0;
}

.kontakt-support p:last-child {
    margin-bottom: 0;
}

.kontakt-support a {
    color: #40eadc;
    text-decoration: none;
}

.kontakt-support a:hover {
    text-decoration: underline;
}

/* Responsive Payment Info */
@media (max-width: 768px) {
    .zahlungsinfo-intro {
        padding: 1.5rem;
    }

    .zahlungsinfo-intro h2 {
        font-size: 1.5rem;
    }

    .payment-methods-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    .security-grid {
        grid-template-columns: 1fr;
    }

    .abbuchung-item {
        flex-direction: column;
        text-align: center;
    }

    .bank-detail-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .bank-value {
        text-align: left;
    }

    .kontakt-support {
        flex-direction: column;
        text-align: center;
    }
}


/* ============================================================================
   9. MISCELLANEOUS
   ============================================================================ */

/* ----------------------------------------------------------------------------
   9.1 Imprint Logo
   ---------------------------------------------------------------------------- */

.imp-logo {
    width: 400px;
    display: block;
    margin: 0;
}


/* ============================================================================
   10. RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* ----------------------------------------------------------------------------
   10.1 Desktop Specific (992px and up)
   ---------------------------------------------------------------------------- */

/* Empty Section - Rules at start of file (Header, Logo etc.) */

/* ----------------------------------------------------------------------------
   10.2 Mobile Specific (max-width)
   ---------------------------------------------------------------------------- */

/* Small Devices (Landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium Devices (Tablets, 768px and up) */
@media (min-width: 768px) {}

/* Large Devices (Desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra Large Devices (Large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* Mobile-First: Max-Width Queries */
@media (max-width: 767px) {}

/* Print Styles */
@media print {}

/* =========================== */
/* MAIN PAGE CHANGES */
.welcome-text {
    font-family: 'Kanit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #666666 !important;
    text-transform: uppercase;
    margin-top: 50px;
    margin-bottom: 50px;
}

/* ==============================================
 ADDITIONAL CHANGES
============================================== */
.btn-link:hover {
    color: #66acaf;
}

/* ========================================
   SIDEBAR FILTER - Alle Texte UPPERCASE
   ======================================== */

/* Filter Buttons (Verfügbarkeit, Besondere Artikel) */
.btn-filter-box,
.btn-filter-box .text-truncate,
.btn-filter-box span {
    text-transform: uppercase !important;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Optional: Auch die Überschriften */
#sidepanel_left .productlist-filter-headline,
#sidepanel_left .box-normal-link {
    text-transform: uppercase !important;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ========================================
   PREIS-SLIDER - Korrekt zentriert
   ======================================== */

.noUi-handle {
    background: #40eadc !important;
    border: 0 !important;
    box-shadow: 0 0 0 6px rgba(64, 234, 220, 0.3) !important;
}

.noUi-connect {
    background: #40eadc !important;
}

/* ========================================
   FILTER - Keine Rahmen
   ======================================== */

.btn-filter-box:focus,
.btn-filter-box:hover,
.btn-filter-box:active,
.btn-filter-box[aria-expanded="true"],
[data-toggle="collapse"]:focus,
[data-toggle="collapse"]:hover,
[data-toggle="collapse"]:active {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================================================
    ABOUT US SECTION
=============================================================================*/
/* ========================================
   ABOUT TEXT - CLEAN
   ======================================== */

.about-text {
    padding-left: 3rem !important;
    padding-top: 1rem !important;
}

.about-headline {
    padding: 0rem 3rem !important;
    font-family: 'Kanit', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
}

.about-text p {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    color: #777 !important;
    margin-bottom: 1.5rem !important;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
}

.about-image {
    border-radius: 15px;
    margin-bottom: 50px;
}

/* ============================================================
   Kontaktseite - 2-Spalten-Layout
   ============================================================ */
.contact-two-col {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    overflow: visible;
}

.contact-two-col__left {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    overflow: visible;
    min-width: 0;
}

.contact-two-col__right {
    flex: 0 0 calc(49% - 20px);
    max-width: calc(49% - 20px);
    min-width: 0;
}

/* Button und Datenschutz-Link am Formular ausrichten */
.contact-two-col__left .contact-form-privacy,
.contact-two-col__left .col.offset-lg-4.col-lg-8.col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.contact-two-col__left .col.ml-auto-util {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: right;
}

.contact-two-col__left .btn-block {
    width: auto !important;
    min-width: 180px;
}

@media (max-width: 991px) {
    .contact-two-col {
        flex-direction: column;
    }
    .contact-two-col__left,
    .contact-two-col__right {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* Button-Fix Kontaktformular */
.contact-submit-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-top: 16px;
}

.contact-submit-wrapper a {
    font-size: 0.8rem;
    color: #999;
    text-decoration: underline;
}

.contact-submit-wrapper .btn {
    min-width: 180px;
}

/* ============================================================
   Kontakt FAQ Akkordeon
   ============================================================ */
.contact-faq .opc-Accordion {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-faq .opc-Accordion-group {
    background: #fff;
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease;
}

.contact-faq .opc-Accordion-group:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.contact-faq .card-header {
    background: #f8f8f8;
    border: none !important;
    padding: 0;
    border-left: 4px solid #40eadc !important;
}

.contact-faq .opc-Accordion-head {
    width: 100%;
    text-align: left;
    padding: 16px 20px;
    font-family: 'Kanit', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: #343637;
    text-decoration: none;
    position: relative;
    white-space: normal;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* OPC eigene Pfeile/Icons verstecken */
.contact-faq .opc-Accordion-head i,
.contact-faq .opc-Accordion-head .fa,
.contact-faq .opc-Accordion-head .fas,
.contact-faq .opc-Accordion-head .far,
.contact-faq .opc-Accordion-head svg {
    display: none !important;
}

/* Pfeil immer rechts via margin-left: auto */
.contact-faq .opc-Accordion-head::after {
    content: '';
    flex-shrink: 0;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid #40eadc;
    border-bottom: 2px solid #40eadc;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    position: static;
}

.contact-faq .opc-Accordion-head[aria-expanded="true"] {
    color: #40eadc;
}

.contact-faq .opc-Accordion-head[aria-expanded="true"]::after {
    transform: rotate(-135deg);
}

.contact-faq .opc-Accordion-head:hover {
    color: #40eadc;
}

.contact-faq .card-body {
    padding: 16px 20px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #707070;
    line-height: 1.7;
    border-left: 4px solid #40eadc;
}

.contact-faq .card-body p:last-child,
.contact-faq .card-body ul:last-child {
    margin-bottom: 0;
}
/* ============================================================================
   END OF FILE
   ============================================================================

   Version: 2.0 (RESTRUCTURED)
   Date: February 2026
   Author: Markus T.
   Project: NVIBE BAITS - NATURAL CARPBAITS

   ============================================================================ */


/* ========================================
   PRODUKTKARTEN - Gleiche Höhe Fix
   ======================================== */

/* Grid Container */
#result-wrapper .row,
.productlist .row {
    align-items: start !important;
}

/* Produktbox gleiche Höhe */
.productbox {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Inner Container wächst */
.productbox-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* Produktname: Max 2 Zeilen */
.productbox-title {
    min-height: 3rem;
}

.productbox-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Preis nach unten */
.productbox .price-wrapper {
    margin-top: auto !important;
}

.account-head-data .account-head-data-credit {
    border: 1px solid #40eadc;
}

.stepper .step-active .step-content::after {

    background: #40eadc;
}

.checkout-steps .step-check {
    color: #40eadc;
}

.btn-outline-primary {
    color: #636363 !important;
    border-color: #636363 !important;
}

/* ========================================
   CHECKOUT - ZAHLUNGSARTEN FINALE VERSION
   ======================================== */

/* Überschrift */
#fieldset-payment .h2 {
    font-family: 'Kanit', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #343637;
    margin-bottom: 2rem;
}

/* Grid */
.checkout-payment-options {
    display: grid;
    gap: 1rem;
}

/* Karte */
.checkout-payment-method {
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.checkout-payment-method:hover {
    border-color: #40eadc;
    box-shadow: 0 4px 12px rgba(64, 234, 220, 0.15);
}

.checkout-payment-method:has(input:checked) {
    border-color: #40eadc;
    background: #f0fffe;
}

/* Layout FIX */
.checkout-payment-method .custom-control-inline {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.checkout-payment-method .custom-control-label {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* Radio Button */
.checkout-payment-method .custom-control-input {
    position: absolute;
    opacity: 0;
}

.checkout-payment-method .custom-control-label::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

.checkout-payment-method .custom-control-input:checked~.custom-control-label::before {
    border-color: #40eadc;
    border-width: 6px;
}

.checkout-payment-method .custom-control-label::after {
    display: none;
}

/* Logo Container */
.checkout-payment-method img {
    max-height: 32px;
    width: auto;
}

/* Text */
.checkout-payment-method .title,
.checkout-payment-method .funding-name {
    font-weight: 600;
    color: #343637;
    font-size: 1rem;
}

/* Untertitel UNTEN */
.checkout-payment-method-note {
    display: block;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.checkout-payment-method-note small {
    color: #808080;
    font-size: 0.85rem;
}

.cart-icon-dropdown-icon .fa-sup {
    background-color: #40eadc;
}

.tab-navigation .nav-link::after {
    border-color: #40eadc;
}

/* ADDITIONAL CHANGES */
#result-wrapper .desc {
    margin-bottom: 2rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #888;
}

.contact-item {
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.contact-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 14px;
}

.contact-text {
    gap: 0.15rem;
}

.contact-label {
    font-size: 11px;
}

.contact-value {
    font-size: 13px;
}

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

/* Footer Container auf 1600px */
#footer>.container {
    max-width: 1600px !important;
}

/* Kontakt-Spalte etwas mehr Platz */
#footer-boxes .col-lg-3:last-child {
    flex: 0 0 28%;
    max-width: 28%;
}

/* Andere Spalten anpassen */
#footer-boxes .col-lg-3:not(:last-child) {
    flex: 0 0 24%;
    max-width: 24%;
}

/* ============================================================================
   KONTAKT INFO - ICONS ZENTRIERT
   ============================================================================ */

.contact-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-item {
    display: flex;
    align-items: center;
    /* ← GEÄNDERT von flex-start zu center */
    gap: 1rem;
    padding: 0;
    transition: all 0.3s ease;
}

.contact-item:hover {
    transform: translateX(5px);
}

.contact-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(64, 234, 220, 0.8);
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.contact-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}

.contact-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.5px;
}

.contact-value {
    font-size: 14px;
    color: #fff;
    /* ← Weiße Schrift für dunklen Footer */
    line-height: 1.5;
}

.contact-link {
    color: #40eadc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* =====================================================
    1. FOOTER BLOCK
======================================================*/
.first-footer-block {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
}

/* ============================================================================
   SOCIAL MEDIA ICONS - WARUM NVIBE BLOCK
   ============================================================================ */

.social-icon-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #999;
    border-radius: 8px;
    /* Abgerundete Ecken */
    color: #999;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon-footer:hover {
    border-color: #40eadc;
    color: #40eadc;
    transform: translateY(-2px);
}

/* Original Social Media Block verstecken */
.footer-social-media {
    display: none !important;
}

.payment-icon-svg {
    height: 32px;
    width: auto;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.payment-icon-svg:hover {
    transform: scale(1.2);
    opacity: 0.85;
}

.shipping-icon {
    height: 32px;
    width: auto;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.shipping-icon:hover {
    transform: scale(1.2);
    opacity: 0.85;
}

@media (max-width: 991px) {
    .shipping-providers {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .shipping-providers .provider-icons {
        justify-content: center;
    }
}

@media (max-width: 991px) {

    #footer .box-normal-link.dropdown-toggle .text-truncate,
    #footer .productlist-filter-headline {
        font-size: 0.9rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        font-family: 'Inter', sans-serif !important;
        font-weight: 700 !important;
    }
}

/* ============================================================================
   MOBILE HEADER - KOMPLETTE NEUSTRUKTURIERUNG
   ============================================================================ */

@media (max-width: 991px) {

    header .navbar {
        flex-wrap: wrap !important;
        padding: 0.5rem 1rem !important;
    }

    .toggler-logo-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem;
        flex: 1 1 auto;
    }

    #shop-logo,
    .navbar-brand img {
        height: 55px !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }

    .navbar-brand {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    #burger-menu {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.4rem !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    #shop-nav {
        margin-right: 0 !important;
        flex: 0 0 auto !important;
        order: 2;
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
    }

    #shop-nav .nav-link i,
    #shop-nav .nav-link svg,
    #shop-nav .nav-link .fas,
    #shop-nav .nav-link .far {
        font-size: 1.2rem !important;
    }

    #shop-nav .nav-icon-label {
        display: none !important;
    }

    #shop-nav .nav-link {
        padding: 0.4rem 0.6rem !important;
        gap: 0 !important;
    }

    /* Suchleiste direkt unter der Icon-Zeile, kein großer Abstand */
    .search-form-wrapper-fixed {
        order: 3;
        width: 100% !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 991px) {

    /* Mobile Burger-Menü - dunkle Schrift auf weißem Hintergrund */
    #mainNavigation .nav-link,
    #mainNavigation .nav-item>a,
    #mainNavigation .box-normal-link,
    #mainNavigation .dropdown-item {
        color: #343637 !important;
    }

    #mainNavigation .nav-link:hover,
    #mainNavigation .nav-item>a:hover {
        color: #40eadc !important;
    }
}

@media (max-width: 991px) {

    /* Produktdetail - volle Breite, keine 2 Spalten */
    #product-offer .row {
        flex-direction: column !important;
    }

    #product-offer .col-md-6,
    #product-offer .col-lg-6,
    #product-offer [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Warenkorb-Button nicht fixed/sticky auf Mobile */
    #product-offer .basket-form-inline,
    .sticky-add-to-cart {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: auto !important;
    }

    /* Mobil: Menge + Warenkorb nebeneinander */
    #add-to-cart .basket-form-inline {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
    }

    #add-to-cart .basket-form-inline .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #add-to-cart .basket-form-inline .col-sm-6,
    #add-to-cart .basket-form-inline .col-12,
    #add-to-cart .basket-form-inline .col,
    #add-to-cart .basket-form-inline [class*="col-"] {
        flex: unset !important;
        max-width: unset !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #add-to-cart .basket-form-inline .col:first-child,
    #add-to-cart .basket-form-inline [class*="col-"]:first-child {
        flex: 0 0 35% !important;
        max-width: 35% !important;
    }

    #add-to-cart .basket-form-inline .col:last-child,
    #add-to-cart .basket-form-inline [class*="col-"]:last-child {
        flex: 1 1 auto !important;
        max-width: unset !important;
        margin-left: auto !important;
    }

    #add-to-cart .basket-form-inline .input-group,
    #add-to-cart .basket-form-inline .form-counter {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    #add-to-cart .basket-form-inline .form-counter .form-control {
        display: block !important;
        width: 40px !important;
        min-width: 40px !important;
        text-align: center !important;
    }

    #add-to-cart .basket-form-inline .btn-primary {
        width: 100% !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 8px !important;
    }

    #add-to-cart .btn-primary .btn-basket-check span {
        display: inline !important;
    }

    #add-to-cart .btn-primary .btn-basket-check i {
        display: inline-block !important;
        font-size: 1.2rem !important;
    }
}

/* ============================================================================
   FLIP CARDS - Startseite
   ============================================================================ */

.flip-cards-section {
    padding: 4rem 0;
    background: #f8f8f8;
}

.flip-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 1rem;
}

.flip-card {
    height: 280px;
    perspective: 1000px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

/* Vorderseite */
.flip-card-front {
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.flip-card-front i {
    font-size: 3rem;
    color: #40eadc;
    margin-bottom: 1.25rem;
    transition: color 0.3s ease;
}

.flip-card-front h3 {
    font-family: 'Kanit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #343637;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
}

.flip-card-front p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #999;
    margin: 0;
    line-height: 1.5;
}

/* Rückseite */
.flip-card-back {
    background: #343637;
    transform: rotateY(180deg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.flip-card-back h3 {
    font-family: 'Kanit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #40eadc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem 0;
}

.flip-card-back p {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #f0f0f0;
    margin: 0;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 991px) {
    .flip-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .flip-cards-container {
        grid-template-columns: 1fr;
    }

    .flip-card {
        height: 240px;
    }
}

/* ==============================================================
                        HEADLINE STARTPAGE
===============================================================*/
.headline-startpage {
    color: #40eadc;
    font-size: 1.75rem;
    line-height: 1.3em;
    font-weight: 700;
    font-family: "Kanit", sans-serif;
    letter-spacing: 0px;
    font-style: normal;
    padding: 0px 0px 30px 0px;
}

.small-headline-startpage {
    color: #838383;
    font-size: 1.125rem;
    line-height: 1.4em;
    font-weight: 300;
    font-family: "Kanit", sans-serif;
    letter-spacing: 0px;
    font-style: normal;
    text-transform: uppercase;
}

.headline-startpage span.subline-startpage {
    color: #838383;
    font-size: 1.125rem;
    line-height: 1.4em;
    font-weight: 300;
    font-family: "Kanit", sans-serif;
    letter-spacing: 0px;
    font-style: normal;
    text-transform: uppercase;
}

.square-image .inner img {
    border-radius: 10px;
}


/* ============================================================================
   PRODUKTKARTEN REDESIGN - Lieferstatus + Warenkorb Flucht
   Datum: 2025-02-21
   ============================================================================ */

/* Lieferstatus in Produktkarte */
.productbox-delivery-status {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    min-height: 2.5rem;
}

.productbox-delivery-status .delivery-status {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.productbox-delivery-status .delivery-status .status-2 {
    color: #1C871E !important;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: 'Kanit', sans-serif;
}

.productbox-delivery-status .delivery-status .status-1 {
    color: #a56823 !important;
    font-weight: 600;
    font-size: 0.8rem;
}

.productbox-delivery-status .delivery-status .status-0 {
    color: #b90000 !important;
    font-weight: 600;
    font-size: 0.8rem;
}

.productbox-delivery-time {
    display: block;
    color: #888;
    font-size: 0.75rem;
    line-height: 1.3;
}

/* ============================================================================
   Warenkorb - Exakte Flucht (Quantity + Button)
   ============================================================================ */

.productbox-basket {
    margin-top: auto !important;
    padding: 0 0 0.75rem 0 !important;
}

/* HOVER EFFEKT */
.productbox-basket {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.productbox:hover .productbox-basket,
.productbox:focus-within .productbox-basket {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Row: Exakte Flucht */
.productbox-basket .row,
.productbox-basket .row.align-items-center {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    margin: 0 !important;
    gap: 0 !important;
}

/* Links: Quantity - 38% */
.productbox-basket .row>div:first-child {
    flex: 0 0 38% !important;
    max-width: 38% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Rechts: Button - 62% */
.productbox-basket .row>div:last-child {
    flex: 0 0 62% !important;
    max-width: 62% !important;
    padding: 0 !important;
    padding-left: 4px !important;
    margin: 0 !important;
}

/* Form Counter Container */
.productbox-basket .form-counter,
.productbox-basket .form-counter .input-group,
.productbox-basket .form-counter .input-group.input-group-sm {
    height: 48px !important;
    max-height: 48px !important;
    min-height: 48px !important;
    border: 1px solid #e0e0e0 !important;
    border-right: none !important;
    border-radius: 0 !important;
    background: #f5f5f5 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    font-size: 15px !important;
}

/* Alle inneren Schatten und Borders entfernen */
.productbox-basket .form-counter *,
.productbox-basket .form-counter .input-group-prepend,
.productbox-basket .form-counter .input-group-append,
.productbox-basket .form-counter .input-group-prepend .btn,
.productbox-basket .form-counter .input-group-append .btn,
.productbox-basket .form-counter .form-control {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Minus & Plus Buttons */
.productbox-basket .form-counter .btn,
.productbox-basket .form-counter .btn.btn-outline-secondary {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #555 !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px !important;
    flex: 0 0 auto !important;
    border-radius: 0 !important;
}

.productbox-basket .form-counter .btn:hover {
    color: #000 !important;
}

/* Input Feld */
.productbox-basket .form-counter input[type="number"] {
    background: #f5f5f5 !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #343637 !important;
    height: 48px !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.productbox-basket .form-counter input[type="number"]::-webkit-outer-spin-button,
.productbox-basket .form-counter input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Input-Group Prepend/Append */
.productbox-basket .input-group-prepend,
.productbox-basket .input-group-append {
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    margin: 0 !important;
}

/* Input Group Text ausblenden */
.productbox-basket .input-group-text {
    display: none !important;
}

/* Warenkorb Button */
.productbox-basket .btn-buy {
    width: 100% !important;
    height: 48px !important;
    background: #66acaf !important;
    border: none !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
    padding: 0 !important;
}

.productbox-basket .btn-buy:hover {
    background: #559a9d !important;
}

/* Nur Icon, kein Text */
.productbox-basket .btn-buy .d-none,
.productbox-basket .btn-buy .d-lg-inline {
    display: none !important;
}

/* ============================================================================
   Quick Actions - Vergleichen & Wunschliste Icons
   ============================================================================ */

.productbox-quick-actions {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.productbox-quick-actions .btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    color: #888 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.productbox-quick-actions .btn:hover {
    background: #40eadc !important;
    color: #fff !important;
}

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


/* Grundpreis Label vor dem Wert */
.productbox .base-price .value::before {
    content: 'Grundpreis: ';
}

/* ================================================
                   RIBBONS
================================================*/
.ribbon-1 {
    background-color: #31aba1;
    color: #fff;
    border: #fff;
    margin-left: 20px;
    border-radius: 5px;
}

.ribbon-1::before {
    border-right-color: #31aba1;
    display: none;
}



.ribbon-3 {
    background-color: #ff0000;
    color: #e1e7f0;
    margin-left: 20px;
    border-radius: 5px;
}

.ribbon-3::before {
    border-right-color: #ff0000;
    display: none;
}

.ribbon-4 {
    background-color: #ff00d9;
    color: #e1e7f0;
    margin-left: 20px;
    border-radius: 5px;
}

.ribbon-4::before {
    border-right-color: #ff0000;
    display: none;
}

.ribbon {
    padding: 0.25rem 0.5rem;
}

/* ================================================
            HOVER RIBBONS POSITION FIX
================================================*/
@media (min-width: 768px) {

    .productbox.productbox-hover:hover .productbox-ribbon.ribbon,
    .productbox.productbox-hover:focus .productbox-ribbon.ribbon,
    .productbox.productbox-hover.focus .productbox-ribbon.ribbon {
        top: 1rem;
        left: -0.5rem;
    }
}

/* Input Number native Browser-Styles entfernen */
.productbox-basket input[type="number"] {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    border: 0 solid transparent !important;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-box-shadow: inset 0 0 0 0 transparent !important;
    outline: 0 !important;
    background-color: #f5f5f5 !important;
}

.productbox-basket .input-group-prepend,
.productbox-basket .input-group-append {
    border: 0 solid transparent !important;
    background: #f5f5f5 !important;
    box-shadow: inset 0 0 0 0 transparent !important;
}

.productbox-basket .form-control:focus {
    box-shadow: none !important;
    border: none !important;
}

/* Linker Rand am Minus-Button entfernen */
.productbox-basket .input-group-prepend .btn:first-child,
.productbox-basket .form-counter .btn-decrement,
.productbox-basket .form-counter .btn.btn-outline-secondary:first-of-type {
    border-left: 0 !important;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-box-shadow: inset 0 0 0 0 transparent !important;
}

/* Form Counter - keinen Border links */
.productbox-basket .form-counter,
.productbox-basket .form-counter .input-group,
.productbox-basket .form-counter .input-group.input-group-sm {
    border-left: none !important;
}

@media (min-width: 768px) {

    .productbox.productbox-hover:focus-visible .productbox-inner::before,
    .productbox.productbox-hover:focus-within .productbox-inner::before {
        outline: 2px solid #ffda5f;
        border-radius: 0.125rem;
    }
}

/* Produktbox Focus-Outline türkis */
.productbox.productbox-hover:focus-visible .productbox-inner::before,
.productbox.productbox-hover:focus-within .productbox-inner::before {
    outline-color: #40eadc !important;
}

/* Produktbox komplett klickbar machen */
.productbox .productbox-title a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.productbox .productbox-inner {
    position: relative;
}

/* Warenkorb-Buttons über dem Overlay */
.productbox-basket {
    position: relative;
    z-index: 2;
}

.productbox-quick-actions {
    z-index: 6 !important;
}

/* MOBILE: Produktkarten Fix */
@media (max-width: 575px) {

    /* Zwei Spalten mit mehr Platz */
    .product-wrapper {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Preis einzeilig */
    .productbox .price {
        font-size: 1.5rem !important;
    }

    /* Grundpreis einzeilig */
    .productbox .base-price {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }

    /* Lieferstatus einzeilig */
    .productbox-delivery-status .delivery-status .status-0,
    .productbox-delivery-status .delivery-status .status-1,
    .productbox-delivery-status .delivery-status .status-2 {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
    }

    .productbox-delivery-time {
        font-size: 0.6rem !important;
        white-space: nowrap !important;
    }

    /* Warenkorb: immer sichtbar auf Mobile */
    .productbox-basket {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    /* Quantity / Button Split - mehr Platz für Quantity */
    .productbox-basket .row>div:first-child {
        flex: 0 0 45% !important;
        max-width: 45% !important;
    }

    .productbox-basket .row>div:last-child {
        flex: 0 0 53% !important;
        max-width: 53% !important;
        padding-left: 4px !important;
    }

    /* Icons kleiner */
    .productbox-quick-actions .btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        font-size: 12px !important;
    }

    /* Alle Elemente: 36px Höhe */
    .productbox-basket .form-counter,
    .productbox-basket .form-counter .input-group,
    .productbox-basket .form-counter .input-group.input-group-sm,
    .productbox-basket .form-counter .btn,
    .productbox-basket .form-counter input[type="number"],
    .productbox-basket .input-group-prepend,
    .productbox-basket .input-group-append,
    .productbox-basket .btn-buy {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        line-height: 36px !important;
    }

    /* Form Counter: Overflow verhindern */
    .productbox-basket .form-counter,
    .productbox-basket .form-counter .input-group,
    .productbox-basket .form-counter .input-group.input-group-sm {
        overflow: hidden !important;
    }

    /* Minus/Plus Buttons */
    .productbox-basket .form-counter .btn {
        padding: 0 !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        flex: 0 0 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        text-align: center !important;
    }

    /* Input: WICHTIG flex: 1 1 0% (nicht auto!) */
    .productbox-basket .form-counter input[type="number"] {
        font-size: 14px !important;
        font-weight: 600 !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    .productbox-basket .btn-buy {
        font-size: 16px !important;
    }

    /* Sternchen auf gleicher Zeile wie Preis */
    .productbox .footnote-reference {
        font-size: 0.8rem !important;
    }

    /* Produktname kleiner */
    .productbox-title a {
        font-size: 0.85rem !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

.gpsr-info {
    background: #f8f9fa;
    border: none;
    border-radius: 15px;
    padding: 0.5rem 2rem 0.25rem;
    margin: 2rem 0 0;
    text-align: center;
}


.gpsr-headline-nvibe {
    font-family: 'Kanit', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
    display: inline-block;
    padding-bottom: 0.75rem;
}

.gpsr-headline-nvibe::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #40eadc;
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

.gpsr-main {
    background: #f8f9fa;
    border-radius: 0 0 8px 8px;
    margin: 0 0 1.5rem;
    padding: 0.75rem 2rem 1.25rem;
    list-style: none;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    color: #666;
    line-height: 2.2;
    text-align: left;
}

/* DESKTOP: Einheit (z.B. Dose) hinter das Plus-Zeichen schieben */
@media (min-width: 992px) {

    /* 1. Die harte 180px-Grenze aufbrechen, sonst hat "Dose" keinen Platz! */
    #product-offer .basket-form-inline .form-counter,
    #add-to-cart .basket-form-inline .form-counter {
        flex: 0 0 auto !important;
        max-width: none !important;
        padding-right: 15px !important;
        /* Abstand zum Warenkorb Button */
    }

    /* 2. Zeilenumbruch rigoros verbieten */
    #add-to-cart .form-counter .input-group {
        flex-wrap: nowrap !important;
    }

    /* 3. Container für Plus und Einheit aktivieren */
    #add-to-cart .form-counter .input-group-append {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    /* 4. Tauschen: Plus nach links (1), Dose nach rechts (2) */
    #add-to-cart .form-counter .input-group-append .btn-increment {
        order: 1 !important;
    }

    #add-to-cart .form-counter .input-group-append .input-group-text {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 12px !important;
        /* HIER Abstand zwischen + und Dose ändern */
        padding-right: 0 !important;
        background: transparent !important;
        border: none !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #525252 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        padding-top: 18px !important;
        /* Verhindert das Umbrechen des Wortes zwingend */
    }
}



/* MOBILE: Produktdetail - Quantity + Warenkorb in eine Zeile */
@media (max-width: 991px) {

    #add-to-cart .basket-form-inline {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        padding-bottom: 10px !important;
    }

    #add-to-cart .basket-form-inline .row {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    /* Linker Teil (Menge): Bekommt jetzt feste 45% für mehr "Atmenraum" */
    #add-to-cart .basket-form-inline .form-counter,
    #add-to-cart .basket-form-inline .col:first-child,
    #add-to-cart .basket-form-inline .row>div:first-child {
        flex: 0 0 45% !important;
        max-width: 45% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Damit das Eingabefeld den neuen Platz auch nutzt und breiter wird */
    #add-to-cart .form-counter .input-group {
        width: 100% !important;
        display: flex !important;
    }

    #add-to-cart .form-counter input[type="number"] {
        flex: 1 1 auto !important;
        /* Streckt das graue Feld */
        width: 100% !important;
    }

    #add-to-cart .form-counter .input-group-append {
        display: flex !important;
    }

    #add-to-cart .form-counter .input-group-append .btn-increment {
        order: 1 !important;
    }

    #add-to-cart .form-counter .input-group-append .input-group-text {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important;
        border: none !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        padding-top: 20px !important;
    }

    /* Rechter Teil (Button): Füllt automatisch den exakten Restplatz auf */
    #add-to-cart .basket-form-inline .btn-primary,
    #add-to-cart .basket-form-inline .col:last-child,
    #add-to-cart .basket-form-inline .row>div:last-child {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #add-to-cart .btn-primary {
        width: 100% !important;
        height: 48px !important;
        border-radius: 8px !important;
        margin-bottom: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* Original-Text ausblenden */
    #add-to-cart .btn-primary .btn-basket-check span {
        display: none !important;
    }

    /* Neuen Text exklusiv für Mobile davor setzen */
    #add-to-cart .btn-primary .btn-basket-check::before {
        content: "ZUM WARENKORB" !important;
        display: inline-block !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-right: 8px !important;
        /* Abstand zum Icon */
    }

    #add-to-cart .btn-primary .btn-basket-check i {
        font-size: 18px !important;
    }

    #product-offer .basket-form-inline .form-counter .input-group {
        height: 48px !important;
    }
}


@media (max-width: 991px) {

    /* Spricht exakt das Minus und Plus im Mengenfeld an */
    #add-to-cart .form-counter .btn .fa-minus,
    #add-to-cart .form-counter .btn .fa-plus {
        font-size: 12px !important;
        padding-bottom: 10px !important;
        /* Hier deine Wunschgröße eintragen */
    }

    /* DESKTOP: Größe von Plus und Minus separat anpassen */
    @media (min-width: 992px) {

        #add-to-cart .form-counter .btn .fa-minus,
        #add-to-cart .form-counter .btn .fa-plus {
            font-size: 12px !important;
            /* Deine Wunschgröße für den Desktop */
            padding-bottom: 0 !important;
            /* Wert nach Bedarf anpassen oder die Zeile ganz löschen */
        }
    }



}

.basket-form-inline {
    margin-bottom: 0.3rem !important;
}

/* ===========================================================
                        PRODUCT STREAMS
============================================================*/

.product-stream-headline {
    font-family: 'Kanit', sans-serif;
    font-size: 2rem;
    color: #40eadc;
    text-transform: uppercase;
    line-height: 1.3em;
    font-weight: 700;
}

.product-stream-subline {
    color: #838383;
    font-size: 1.125rem;
    line-height: 1.4em;
    font-weight: 300;
    font-family: "Kanit", sans-serif;
    letter-spacing: 0px;
    font-style: normal;
}

/* PRODUCT STREAM SLIDER: Article Title Modifications */
.item-slider-desc.text-clamp-2 {
    font-size: 1.1rem !important;
    /* Macht die Schrift etwas kleiner */
    text-decoration: none !important;
    /* Entfernt den Unterstrich (falls vorhanden) */
    font-weight: 700 !important;
    /* Macht die Schrift einen Tick dünner (vorher 700) */
    color: #9e9f9f !important;
    /* Die gewünschte Textfarbe */
    padding-top: 15px !important;
    /* Nimmt unnötigen Abstand nach oben weg */
    font-family: 'Kanit', sans-serif;
}

/* Optional: Article Title Hover */
.item-slider-desc.text-clamp-2:hover {
    color: #40eadc !important;
    /* Wird türkis beim Hovern */
}

/* ============================================================
   OPC Product Stream - Arrows außerhalb des Sliders
   ============================================================ */

.opc-product-slider .slick-prev,
.opc-product-slider .slick-next {
    display: none !important;
}

.nvibe-external-arrows {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
}

.nvibe-external-arrows button {
    background: #f1f1f1;
    border: none;
    color: #525252;
    width: 38px;
    height: 50px;
    border-radius: 0.1875rem;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
}

.nvibe-external-arrows button:hover {
    background: #e0e0e0;
    color: #40eadc;
}

.nvibe-arrow-icon {
    width: 30px;
    height: 30px;
    color: #999;
}

.nvibe-grid-limited {
    max-width: 500px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}