.display, .B2bSlider-welcome-section {
    max-width: 100rem;
    margin:0 auto;

}
.B2BSection {width: 100%}
.ContentSection {margin-bottom:50px;}
.B2BWrapper {max-width: 100rem; margin:0 auto;}
.HeaderWelcomeSection {position: absolute; z-index: 9;}
.HeaderWelcomeSection, .HeaderWelcomeSection h1 { width: 100%; max-width: 600px}
.HeaderWelcomeSection h1{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 4%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px 40px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.5); /
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    color: black;
}
.HeroIcon {
    display:block;
    margin-bottom: 0;
    width: 100%;
}
section.product_listing.HistoryMainContentView {margin-top: 50px;}
#TrustBar {margin:20px 0;}
#TrustBar .TrustElement {padding:20px 15px}
.display {
    margin: 1rem 2rem;
}

a {
    position: relative; /* Wichtig für die Positionierung des Unterstrichs */
    text-decoration: none; /* Standard-Unterstrich entfernen */
    color: #30608a; /* Oder deine normale Linkfarbe */
    /* ... andere Link-Stile ... */
}

a:not(:has(img))::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0); /* Startet unsichtbar (0% Breite) */
    height: 1px; /* Dicke des Unterstrichs */
    bottom: -3px; /* Abstand zum Text */
    left: 0;
    background-color:#30608a; /* Deine Highlight-Farbe */
    transform-origin: bottom left; /* Animation startet von links */
    transition: transform 0.25s ease-out; /* Sanfte Animation */
}
footer a:not(:has(img))::after,#categorie_listing .cat_box .CatBoxTitle a:not(:has(img))::after {background-color:#ffffff}

/* Animation für Buttons deaktivieren */
.NoAni::after,
.btn::after,
.button::after,
.cta-button::after,
.canvas_wk_button::after,
.canvas_kasse_button::after,
[class*="button"]::after,
.CheckoutAdressBox a::after
{
    display: none !important;
    content: none !important;
    width: 0 !important;
}

#attributes_selection_container,
#properties_selection_container {
    max-width: 100%;
    margin: 0 auto;
}


#categorie_listing .cat_box .CatBoxTitle a {display:block}
#categorie_listing .CatSubCats .teaser {max-width:300px }
.ProductOptionsBox {margin-bottom: 20px; border-bottom: 1px #ccc solid}
a:hover {text-decoration: none}
a:hover:not(:has(img))::after, #categorie_listing .cat_box:hover .CatBoxTitle a:not(:has(img))::after {
    transform: scaleX(1); /* Wird sichtbar (100% Breite) */
}
/* B2BWeb: Unterstrich-Animation nur für Links OHNE Bild */

.NaviflexBox a::after, a.button_add_wishlist::after, a.cta-button::after, .button a:after  {display: none}

#B2BMegaNav {padding-bottom: 5px}
#B2BMegaNav .B2BMegaNavParentLink {padding:5px 20px;}
#B2BMegaNav .B2BMegaNavParentLink a {font-size: 1.2rem}

/* Basis-Zustand: Versteckt */
.B2BMegaNavFirst {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Leicht nach unten verschoben */
    transition: all 0.3s ease-in-out; /* Sanfte Animation */
    transition-delay: 0.1s; /* B2BWeb: Kurze Verzögerung beim Schließen */
    display: block; /* Muss block sein, damit transform wirkt */
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding-top:5px;
}
#B2BMegaNav .B2BMegaNavFirstSub {
    max-width:100rem;
    margin:0 auto;
    border-top:4px var(--AccentColor2) solid;
    padding:20px 0;
}
/* Hover-Zustand: Sichtbar */
.B2BMegaNavParent:hover .B2BMegaNavFirst {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Fährt sanft nach oben an die richtige Position */
    transition-delay: 0.2s; /* B2BWeb: Verzögerung beim Öffnen (Hover Intent) */
}
.B2BMegaNavFirstSub {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 Spalten */
    gap: 5px 30px;  /* Abstand */
}
#B2BMegaNav .img-fluid {
    max-width: 100%;
    max-height: 100%;
    margin-bottom: initial;
    object-fit: contain;
    display:flex;
    align-items: center;
    justify-content: center;
}
#B2BMegaNav .mega-menu-image {
    width: 65px;
    height: 65px;
    margin-right: 10px;
}
#B2BMegaNav .mega-menu-link {
    display:flex;
}
#B2BMegaNav .mega-menu-item {
    border-radius: 4px;
    padding:5px;
}
#B2BMegaNav .mega-menu-item:hover {
    background: var(--ParentBackground);
    box-shadow: none;
    transform: translateY(1px);
}
#ParentHeadLine {
    background: var(--Headlines);
    color:#ffffff;
    letter-spacing: 1px;
    padding:4px 0;
}
#ParentHeadLine > div {padding:0 20px;}
#ParentHeadLine a {color:#ffffff;}

/* --- Desktop Header Search --- */
.header-search-wrapper {
    flex: 1; /* Nimmt Platz im Flex-Header ein */
    max-width: 600px; /* Nicht zu breit */
    margin: 0 30px; /* Abstand zu Logo/Icons */
    position: relative; /* Für Suggest-Dropdown */
}

.header-search-inner {
    display: flex;
    align-items: center;
    background: #f5f5f5; /* Hellgrau, modern */
    border-radius: 50px; /* Pillen-Form */
    padding: 5px 15px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Fokus-Effekt */
.header-search-inner:focus-within {
    background: #fff;
    border-color: #458a6e; /* Deine Farbe */
    box-shadow: 0 4px 12px rgba(69, 138, 110, 0.15);
}

/* Das Input-Feld */
.search-input-container {
    flex: 1;
}

.search-input-container input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    outline: none;
    color: #333;
    padding: 15px 18px;
}

/* Der Button */
.search-submit-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.search-submit-btn:hover {
    transform: scale(1.1);
}

/* Suggest Dropdown (Live-Suche) */
#search_suggest {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 1000;
    margin-top: 10px;
    overflow: hidden;
    /* Styles für den Inhalt kommen oft vom Plugin, aber Container steht */
}
.search-submit-btn.btn { /* Spezifischer Selektor gewinnt */
    background: transparent !important; /* Blau weg */
    color: #458a6e !important; /* Dein Grün */
    padding: 0 10px !important; /* Standard-Padding weg */
    margin: 0 !important;
    border-radius: 0; /* Ecken weg (falls vorhanden) */
    box-shadow: none;
    min-width: auto;
    border:none;
}
.search-submit-btn.btn:hover {box-shadow: none}
.search-input-container input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* --- Live Search Container --- */
#B2BWebHeaderSearch #live_search {
    width: 100%;
    background: #fff;
    border-radius: 0 0 20px 20px; /* Unten rund, passend zur Pille */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 15px;
    margin-top: 5px;
    border: 1px solid #eee;
    border-top: none;
}

/* --- Überschrift "Vorschläge" --- */
#B2BWebHeaderSearch #live_search b {
    display: block;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Produkt-Zeile --- */
#B2BWebHeaderSearch #live_search .canvas_wk {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
    border-radius: 8px;
    margin-bottom: 5px;
}

#B2BWebHeaderSearch #live_search .canvas_wk:hover {
    background-color: #f2fcf9; /* Dein Mint! */
    text-decoration: none;
}

/* --- Bild --- */
#B2BWebHeaderSearch #live_search .canvas_wk img {
    width: 50px; /* Kleiner als im Mega-Menü */
    height: 50px;
    object-fit: contain;
    border-radius: 4px;
    margin-right: 15px;
    background: #fff;
    border: 1px solid #eee;
}

/* --- Text --- */
#B2BWebHeaderSearch #live_search .canvas_wk:last-child a {color: #ffffff}

#B2BWebHeaderSearch #live_search .canvas_wk a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    display: block;
}

/* --- Footer (Buttons) --- */
#B2BWebHeaderSearch #live_search .container-flex:last-child {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

#B2BWebHeaderSearch #live_search .btn {
    padding: 5px 15px;
    font-size: 0.85rem;
    border-radius: 20px; /* Kleine Pillen */
}
#B2BWebHeaderSearch #live_search .flex-item:nth-child(1) {flex: 1;}
#B2BWebHeaderSearch #live_search .flex-item:nth-child(2) {flex: 3;}
/* Container */
#UserTopNav .UserTopNavBox {
    margin-left: 25px; /* Abstand zwischen den Icons */
    text-align: center;
    position: relative;
}

#UserTopNav a {
    text-decoration: none;
    color: #333;
    font-size: 0.8rem; /* Kleiner Text */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: color 0.2s;
}

#UserTopNav a:hover {
    color: #458a6e; /* Dein Grün */
}

/* Icons */
#UserTopNav svg {
    width: 26px;
    height: 26px;
    margin-bottom: 3px;
    fill: currentColor; /* Erbt Farbe vom Link (auch Hover!) */
}

/* Badges (Zahlen) */
.anzahl_artikel {
    position: absolute;
    top: -5px;
    right: 5px; /* Je nach Icon anpassen */
    background-color: #e74c3c; /* Rot für Aufmerksamkeit */
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff; /* Weißer Rand zur Abgrenzung */
}

/* Warenkorb Badge Position */
#cart_count {
    right: 0; /* Feintuning */
}
/* Sticky Menü */
#B2BMegaNav {
    width: 100%;
    z-index: 999;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.megamenu-stuck {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.megamenu-hidden {
    transform: translateY(-100%);
}

.ProductsListingGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
    gap:30px 5px; /* Schön viel Luft */
}

.ProductBox .pimg {background: #f9f9f9; padding:15px}
.ProductBox:hover, .HubCard:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
}
.ProductBoxBottom {padding-bottom: 20px}
.ProductsListingBox .ProductBoxPos .ProductBox {margin:15px;}
/* --- Sektion Abstände --- */
.category-grid-section {
    padding: 60px 0;
    background-color: #fff; /* Oder transparent */
}

.section-title {
    margin-bottom: 40px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #333;
}

/* --- Das Grid --- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Spalten Desktop */
    gap: 20px;
}

/* --- Die Karte --- */
.category-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px; /* Runde Ecken */
    text-decoration: none;
    color: #fff; /* Textfarbe auf dem Bild */
    aspect-ratio: 3/4; /* Hochformat (Portrait) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Bild Container & Zoom */
.cat-image-wrapper {
    width: 100%;
    height: 100%;
    background: #000; /* Fallback Farbe */
}

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    opacity: 0.9; /* Leicht abdunkeln für Text-Lesbarkeit */
}

/* Hover Effekt: Zoom */
.category-card:hover img {
    transform: scale(1.1);
    opacity: 0.8; /* Etwas dunkler beim Hover */
}

/* --- Text Overlay (Unten) --- */
.cat-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); /* Verlauf für Lesbarkeit */
    transform: translateY(0);
    transition: all 0.3s ease;
}

.category-card h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.btn-text {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0; /* Erst unsichtbar */
    transform: translateY(10px);
    transition: all 0.3s ease;
    color: #f2fcf9; /* Mint Akzent */
}

/* Hover: Text rutscht hoch, Button erscheint */
.category-card:hover .btn-text {
    opacity: 1;
    transform: translateY(0);
}
.HubPageContainer h1 {font-size: 1.6rem}
.HubPageContainer h3 {font-size: 1.2rem}
.HubPageContainer .BoxList {margin: 50px 0}
.HubPageContainer .BoxList > div {
    margin: 30px;
    background:var(--ParentBackground);
    padding:15px;
}



.HubContent h2 {font-size: 1.52rem}
.HubContent .TrustImg {padding-left:50px}


.AzFilterBtn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-weight: bold;
    color: #555;
    transition: all 0.2s;
}
.AzFilterBtn:hover, .AzFilterBtn.active {
    background: var(--AccentColor2);
    color: #fff;
    border-color: var(--AccentColor2);
}

.AzGrid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Kleiner als Hubs */
    gap: 15px;
}
.AzGrid .HubImageWrapper {
    height: 120px;
    padding: 10px;
    display: flex;
    align-items: initial;
    justify-content: center;
}

.AzGrid .HubContent {
    padding: 10px;
}
.AzGrid h2 {
    font-size: 1rem;
    margin: 0;
}
.CatHeader .CatHeadImg img {
    width: auto;
    height: auto;
}
.CatHeader  {
    padding: 20px 0;
}

.display.breadcrumb-section {margin-top:10px; text-align: right}
.breadcrumb-section ul {display: flex}
.breadcrumb-section li {padding-right: 15px}
#product_info {margin-top:1rem}

.ProductHeadline {margin-top:1rem}
.quantity_container_input {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #E5E5E5;
    border-radius: 0;
}
#gm_attr_calc_qty,
.gm_cart_data {
    padding: 0;
    color: #000;
    text-align: center;
    border: none;
    border-radius: 0;

}
a.value-decrement,
button.value-decrement,
a.value-increment,
button.value-increment {
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
}
.WkButtonNumber {width:180px}
.value-decrement, .value-increment {width:50px;}
#gm_attr_calc_qty {width:80px!important;}
.ProductPrice,.productOldPrice  {
    font-size: 1.8rem;
}
.productOldPrice {display:block;}
.ProductPriceBox br  {display:none;}
#product_images {padding-right:50px}
.CatFooterDescriptionBox  {padding:50px 0;}
.CatFooterDescription  {padding:0 50px;}
.expert-layout {padding:50px;}
.BoxList3 > div {padding:0 20px;}
#offcanvas_cart .canvas_kasse_button {margin-bottom: 15px}



#product_info2 #desc {
    background-color: #fcfdfc;
    padding:20px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}
#product_info2 .AuraPrdDescr h2,
#product_info2 .AuraPrdDescr h3,
#product_info2 .AuraFAQ h2,
#product_info2 .AuraFAQ h3 {color: #458a6e;font-weight: 300;}
#product_info2 .AuraFAQ hr {display:none}
#product_info2 .AuraPrdDescr #AuraPrdDescrTitle {
    color: #458a6e;
    font-weight: 300;
    font-size: 28px;
}
#product_info2 .AuraPrdDescr .ListItem {
    display: flex;
    flex-flow: wrap;
    margin:20px 0;
}
#product_info2 .AuraPrdDescr .ListItem li {
    list-style: none;
    flex:1;
    text-align: center;
    margin: 20px;
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #f0f4f0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);

}
#product_info2 .AuraPrdDescr .ListItem li strong {display: block; color:#458a6e}
#attributes_selection_container legend {width: 100%}
.SelectOptionsFieldset input[type=radio] {align-self:center }
fieldset.SelectOptionsFieldset {
    border: 1px #ccc solid;
    padding: 20px;
}
#product_details legend {background: transparent; width: initial}
#product_details {flex-direction: column}
.option-items-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Spalten nebeneinander */
    gap: 15px;
}
.ProductPriceBox > div, .ProductPriceBox > span, #details_cart_part > div {text-align: right; justify-content: flex-end}
#product_info .ProductTrustBar {margin-top: 20px}
#shopping_cart h1 {margin-bottom: 15px}
.is-checkout legend{
    background: transparent;
    text-align: center;
    font-size: 23px;}


.AboutUsSection .plbox {padding:15px 70px 30px 70px;}
.AuraFAQ .faq-item{
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    border-left: 4px solid #b2d3c2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    margin-bottom: 20px;

}
#AuraPrdDescrTitle {text-align: center; margin: 50px 0; position: relative}
#AuraPrdDescrTitle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%); /* Exakt zentrieren */
    width: 50px;
    height: 1px;
    background-color: #4f7963;
}
.AuraPrdDescr p {margin: 0 auto}
.AuraPrdDescr h3 {text-align: center; margin: 50px 0 20px 0; position: relative}

.AuraFAQ #AuraFAQTitle {text-align: center; margin: 50px 0; position: relative}
.AuraFAQ .faq-item strong {color:#458a6e }
.AuraFAQ .faq-item {margin:0 auto; margin-bottom:30px}
.AuraProductMantra {
    border-radius: 20px;
    text-align: center;
    max-width: 80%;
    margin: 0 auto;
    padding:10px;
    background:#f2fcf9;
    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}
.AuraProductMantra p {padding:10px; margin: 0}
.AuraLegal {margin:0 auto; margin-top:50px;}
.AuraLegal > div {margin-bottom: 50px;}
.AuraLegal details {margin-bottom: 20px; position: relative; border-radius: 10px}
.AuraLegal summary {padding:15px;}
.AuraLegal details  {
    background: linear-gradient(135deg, #f9fbf9 0%, #f0f4f0 100%);
}
.AuraLegal details:hover {cursor: pointer}
.AuraLegal .details-content {padding: 20px}
.AuraLegal .Greeting {text-align: center}

.AuraPrdDescr #MasterContent {
    background: linear-gradient(135deg, #f9fbf9 0%, #f0f4f0 100%);
    padding: 10px 35px 35px 35px;
    border-radius: 20px;
    margin: 0 auto;
}
.AuraPrdDescr #MasterContent,
.AuraLegal,
.AuraProductMantra,
.AuraFAQ .faq-item,
.AuraPrdDescr p {
    max-width: 80%;
}
.is-product-page .produkttext details {
    padding: 15px;
    background-color: #ffffff;
    transition: all 0.3s ease;
     border: 1px #4a6b5d solid;
    border-radius: 10px;
}
.info-accordion summary::after{content: '+'}
.info-accordion[open] summary::after{content: '-'}
.is-product-page .info-accordion {margin-bottom: 20px; border-radius: 20px}
.is-product-page .produkttext summary {
    font-weight: 600;
    color: #4a6b5d;
    font-size: 0.95rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.is-product-page hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.is-product-page .info-accordion .details-content {
    background: #ffffff;
    padding:20px;
}
.is-product-page .info-accordion strong {
    font-weight: 600;
}

#breadcrumb_payment, .CheckoutAdressBox {background:var(--BgWhite)}
.CheckoutAdressBox {padding:20px; margin: 10px 20px;}
.CheckoutAdressBox h4 {font-size: 1.6rem}
#logoff > div {padding:50px;}
.payment-group-head {background-color: #ffffff;}
.payment-group-head img {width: auto; height: 68px}
h2.payment-group-title {
    align-content: center;
    padding-left: 15px;
}
.checkout_table .payment-group div.checkout_table_inner:nth-of-type(odd) {
    background-color: #ffffff;
}
.checkout_table .payment-group div.checkout_table_inner:nth-of-type(even) {
    background-color: #f9f9f9;
}
.checkout_table .payment_item, .checkout_table .shipping_item {
    padding: 1rem;
}
#module_checkout_shipping {
    max-width: 800px;
    margin:0 auto;
}
ul.HubGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 160px);
    gap: 10px 30px;
    justify-content: center;
}

ul.CatHubGrid {
    display: grid;
    /* Wir nehmen 240px statt 1fr, damit die Boxen nicht "wachsen" */
    grid-template-columns: repeat(auto-fit, 180px);
    gap: 10px 30px;
    justify-content: center; /* Das zentriert jetzt die 240px-Blöcke */
    padding: 0;
    margin: 0;
    list-style: none;
}


.HubImageWrapper {height: 180px;}
.HubPageContainer {
    padding: 40px 20px;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}
.HubContentSection .HubContent {padding:50px}
.HubContent h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}
.ProductBoxPos .ProductBox .ProductBoxTop .H3Name {display: inline-block; padding:0 15px}
.preisline {
    padding: 0 1.0625rem 0;
    min-height: 3.125rem;
}






footer {
    padding: 2.5rem 3.125rem 3.75rem;
    color: rgba(0, 0, 0, 0.55);
    background: #f4f4f4;
    margin-top: 80px;
}


/* minimal Checkout */
#checkout_payment {max-width: 1200px;margin:0 auto;}
.is-checkout .box_content ul {display: flex; flex-flow: wrap}
.is-checkout .box_content li {margin-right: 25px}
.is-checkout footer {padding: 0.5rem}
.is-checkout footer .copy {margin-top:  0.5rem;padding-top: 0.5rem;}
.is-checkout #logo img {max-width: 135px;}

.CheckoutTotal .approval {width:100%; max-width: 500px; margin:initial;}
#module_checkout_confirmation_products {padding: 20px; font-size: 18px!important;}
#module_checkout_confirmation_products > div:nth-of-type(odd){background: var(--HighlightBackground3)!important;}
#module_checkout_confirmation_products img {padding-left: 20px}

#account .smartphone-out {background: #ffffff; padding: 20px;}
#checkout_payment_block .payment-group {margin: 20px}
.CheckoutNavButton > div {margin: 0 20px}
#breadcrumb_payment .CheckoutBreadcrumb {justify-content: center;}
#breadcrumb_payment .CheckoutBreadcrumb .flex1 {flex:initial; padding: 5px 30px;}
#breadcrumb_payment .CheckoutBreadcrumb .BreadcrumbCeckoutIcon svg {width: 30px; height:30px;}
.BreadcrumbCeckoutStep1,.BreadcrumbCeckoutStep2, .BreadcrumbCeckoutStep3 {font-size: 1.1rem;}
#breadcrumb_payment .CheckoutBreadcrumb .BreadcrumbCeckoutIcon + div { margin-left: 10px}
#checkout_payment textarea.input-textarea {
    border: 0;
    border-radius: 0;
    padding: 0.625rem;
}
.HubTitle {font-size: 2.5rem;}
.HubHeader {margin-bottom: 50px;}








.CatDescription .stone-wrapper {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    color: #444;
    margin: 10px auto;
    line-height: 1.6;
    background-color: #fff;
    }

.CatDescription .stone-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 25px;
    padding: 10px;
}

.CatDescription .stone-img {
    width: auto!important;
    height:auto!important;
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(165, 214, 167, 0.2);
}

.CatDescription .stone-intro-text h2 {
    color: #7a9180;
    margin: 0 0 15px 0;
    font-size: 1.45rem;
    line-height: 1.3;
}

.CatDescription .intro-p {
    margin: 0;
    font-size: 1rem;
}

.CatDescription .acc-container {
    margin-top: 20px;
}

.CatDescription .acc-item {
    margin-bottom: 8px;
    border: 1px solid #d5e6de;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.CatDescription input.acc-input {
    display: none !important;
}

.CatDescription .acc-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #fff;
    color: #7a9180;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.3s;
}

.CatDescription .acc-label:hover {
    background: #f0f7f4;
}

.CatDescription .acc-label::after {
    content: "+";
    color: #a3b8aa;
    font-size: 1.4rem;
    transition: transform 0.3s;
}

.CatDescription .acc-body {
    max-height: 0;
    overflow: hidden;
    background: #fdfdfd;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 20px;
}

.CatDescription .acc-input:checked ~ .acc-body {
    max-height: 2000px;
    padding: 20px;
    border-top: 1px solid #d5e6de;
}

.CatDescription .acc-input:checked ~ .acc-label {
    background: #f0f7f4;
    color: #5a6d60;
}

.CatDescription .acc-input:checked ~ .acc-label::after {
    content: "−";
}

.CatDescription .fazit {
    background-color: #f9fbf9;
    padding: 20px;
    border-left: 5px solid #7a9180;
    font-style: italic;
    margin-top: 25px;
    border-radius: 0 8px 8px 0;
    color:#7a9180;
}
.CatDescription .display > section {padding: 50px}
.CatDescription img {max-width: 300px}


:root {
    --mint-light: #f2f9f8;
    --mint-soft: #daeeeb;
    --mint-accent: #76b5a9;
    --mint-deep: #3d6b62;
    --stone-grey: #5a6365;
    --text-dark: #333333;
    --white: #ffffff;
}

.AboutUsSection .logo-figure {
    margin: 0 auto 25px;
    opacity: 0.9;
}

.AboutUsSection .header-content {
    text-align: center;
    padding: 80px 20px;
}
.AboutUsSection .logo-main {
    width: 150px;
    height: auto;
}
.AboutUsSection h1 {
    color: var(--mint-deep);
    font-size: 2.5rem;
}
.AboutUsSection .header-content h2 {
    font-size: 2rem;
    color: var(--mint-deep);
    margin-bottom: 20px;
    font-weight: 700;
}
.AboutUsSection .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-top: 50px;
}
.AboutUsSection .team-card {
    text-align: center;
    padding: 20px;
}
.AboutUsSection .team-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.AboutUsSection .team-card figure {
    margin: 0 0 20px 0;
}
.AboutUsSection .team-card .role {
    color: var(--mint-accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}
.AboutUsSection .quote-block {
    padding: 60px;
    margin: 60px 0;
    background: var(--white);
    border: 1px solid var(--mint-soft);
    border-radius: 4px;
    text-align: center;
}
.AboutUsSection .quote-block p {
    font-size: 1.2rem;
    line-height: 1.8;
}
.AboutUsSection .site-footer {
    text-align: center;
    padding: 60px;
    background: var(--mint-light);
    color: var(--stone-grey);
    font-size: 0.9rem;
}
.AboutUsSection .image-wrapper img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 60% 40% 70% 30% / 40% 50% 50% 60%;
    border: 12px solid var(--mint-light);
    transition: transform 0.5s ease;
}
.AboutUsSection .container {
    padding: 0 30px;
}
.AboutUsSection .manifest-banner {
    background-color: var(--mint-light);
    border-radius: 40px;
    padding: 60px 40px;
    text-align: center;
    margin: 40px 0;
    position: relative;
}
.AboutUsSection .manifest-banner h2 {
    font-size: 2rem;
    color: var(--mint-accent);
    margin-bottom: 15px;
}
.expert-link {color: var(--AccentColor2)}


.box_shopt_voting_new {width: 100%}






/* 1. Container-Fix */
.rf-bage.rf-bage--light {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* Wir definieren 3 Zeilen mit gleicher Höhe oder Auto-Anpassung */
    grid-template-rows: 0px auto auto auto !important;
    column-gap: 40px !important;
    row-gap: 20px !important; /* Etwas mehr Abstand zwischen den Zeilen */
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important; /* Zentriert die Icons/Inhalte vertikal in ihrer Zeile */

}

/* 2. LINKE SEITE (Google) */
.rf-bage__title:not(.rf-bage__counter *) {
    grid-column: 1 !important;
    grid-row: 2 !important; /* Gleiche Zeile wie die 4.8 */
    display: block !important;
    width: auto !important;
    height: auto !important; /* Verhindert die 0px Höhe */
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
}
/* Das G-Logo (In der App oft ein Title ohne Counter-Klasse) */
.rf-bage__title:not(.rf-bage__counter *) img,
.rf-bage__title:not(.rf-bage__counter *) svg {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    vertical-align: middle !important;
}

/* Die Sterne - Wir suchen das Rating, das NICHT im Counter liegt */
.rf-bage__score:not(.rf-bage__counter + .rf-bage__score) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    /* Wir rücken den Text ein, damit das Logo Platz hat */
    padding-left: 35px !important;
}

/* Beschreibung Google */
.rf-bage__description:not(.rf-bage__counter ~ .rf-bage__description) {
    grid-column: 1 !important;
    grid-row: 3 !important;
}


/* 3. RECHTE SEITE (ReviewForest) */

/* ReviewForest Logo */
.rf-bage__counter {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/* Die 155 & Baum - Das Score-Element, das direkt nach dem Counter kommt */
.rf-bage__counter + .rf-bage__score {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Beschreibung Bäume */
.rf-bage__counter ~ .rf-bage__description {
    grid-column: 2 !important;
    grid-row: 3 !important;
}

.rf-bage__footer {
    grid-column: 1 / span 2 !important;
    grid-row: 4 !important;
    margin-top: 20px !important;
}
#ProductValues {width:100%; margin-top:20px}
#ProductValues > div {width:50%;margin-left: auto}

#ProductValues .ProductValuesLeft, #ProductValues .ProductValuesLeft + div  {width:50%}
#ProductValues .ProductValuesLeft + div {text-align:left}
#ProductMiniPicturesBox .ProductMiniPictures {max-width: 150px; margin-right: 5px}