/*
 *  Silberhirt -- "Stahl & Kreide"
 *  ---------------------------------------------------------------------------
 *  Gestaltungsschicht des Kind-Themes. Wird im Head NACH Portos Konfig-CSS
 *  (design_default.css, settings_default.css) geladen und gewinnt deshalb
 *  bei gleicher Spezifitaet. Bewusst reines CSS, kein LESS: der Compiler
 *  wuerde calc()/clamp() und "a / b" sonst ausrechnen.
 *
 *  Bild: ein Hantelraum bei Nacht. Gummiboden schwarz, Licht von oben,
 *  Stahl in Grau-Stufen, Kreide als einzige helle Farbe. Produktfotos stehen
 *  auf hellen Stahl-Plinthen. Farbe gibt es nur fuer Zustaende.
 *
 *  Abschnitte
 *    1  Schriften und Tokens         9  Produktseite
 *    2  Grundlagen                  10  Warenkorb, Minicart
 *    3  Knoepfe                     11  Checkout
 *    4  Formulare                   12  Konto, Meldungen, Dialoge
 *    5  Kopfzeile                   13  Fusszeile
 *    6  Navigation                  14  Startseite
 *    7  Brotkrumen, Seitentitel     15  Bewegung
 *    8  Produktkarten, Liste
 */


/* 1  Schriften und Tokens ================================================= */

@font-face {
    font-family: "Big Shoulders Display";
    src: url("../fonts/big-shoulders-display.woff2") format("woff2");
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Gummiboden, von tief nach erhaben */
    --ink:        #0c0d0e;
    --ink-2:      #131517;
    --ink-3:      #1b1e21;
    --ink-4:      #262a2e;

    /* Stahl */
    --steel-1:    #5d646a;
    --steel-2:    #8f969c;
    --steel-3:    #b9bfc4;

    /* Kreide */
    --chalk:      #ecebe6;
    --chalk-dim:  #d6d5cf;
    --plinth:     #e5e6e3;

    --rule:       rgba(236, 235, 230, .12);
    --rule-2:     rgba(236, 235, 230, .24);

    /* Nur fuer Zustaende */
    --signal:     #ff6b4a;
    --ok:         #7ccf9b;

    --display:    "Big Shoulders Display", "Archivo", "Arial Narrow", sans-serif;
    --text:       "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --r-s: 4px;
    --r-m: 10px;
    --r-l: 14px;

    --gutter: clamp(16px, 4vw, 48px);
    --wrap:   1320px;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-io:  cubic-bezier(.65, 0, .35, 1);
    --t-fast: 160ms;
    --t-med:  320ms;
    --t-slow: 900ms;

    --shadow-lift: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);

    color-scheme: dark;
    accent-color: var(--chalk);
}


/* 2  Grundlagen =========================================================== */

html {
    background: var(--ink);
    scrollbar-color: var(--steel-1) var(--ink);
    -webkit-text-size-adjust: 100%;
}

html body,
html body .page-wrapper {
    background: var(--ink);
    color: var(--chalk);
    font-family: var(--text);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body { overflow-x: clip; }

::selection { background: var(--chalk); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink-4); border: 2px solid var(--ink); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--steel-1); }

html body a,
html body .alink,
html body a:visited {
    color: var(--chalk);
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
    transition: color var(--t-fast) ease, opacity var(--t-fast) ease;
}
html body a:hover { color: #fff; }

:focus { outline: none; }
html body :focus-visible,
html body a:focus-visible,
html body button:focus-visible {
    outline: 2px solid var(--chalk);
    outline-offset: 3px;
    border-radius: 2px;
    box-shadow: none;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
    color: var(--chalk);
    font-family: var(--text);
    font-weight: 700;
    letter-spacing: -.01em;
    text-wrap: balance;
}

html body h1,
html body .page-title-wrapper .page-title {
    font-family: var(--display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.005em;
    line-height: .95;
}

p { text-wrap: pretty; }

html body hr { border-color: var(--rule); }

html body img { image-rendering: auto; }

/* Portos Seitenbreite (layout-1140) wird weiter, der Rand atmet */
html body .page-main,
html body .container,
html body .page-header .header.content,
html body .footer .container {
    max-width: var(--wrap);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
@media (min-width: 1200px) {
    html body .container { width: auto; }
}

html body .page-main { padding-top: 32px; padding-bottom: 64px; }

/* Tabellen, Zahlen */
html body table { color: var(--chalk); }
html body .price,
html body .price-wrapper,
html body .qty,
html body .counter-number,
html body td.amount,
html body .totals .amount { font-variant-numeric: tabular-nums lining-nums; }

/* Sterne ohne Bewertung: im ganzen Shop gibt es keine, die leere Reihe
   sagt nur "niemand hat bewertet". Ausgeblendet, wo sie nichts traegt. */
html body .product-item .product-reviews-summary.short,
html body .product-item .product-reviews-summary.empty,
html body .sh-card .product-reviews-summary { display: none; }


/* 3  Knoepfe ============================================================== */

html body .action.primary,
html body button.action.primary,
html body .btn-primary,
html body .action.primary.tocart,
html body button.tocart,
html body #product-addtocart-button,
html body .action.primary.checkout,
html body .sh-btn-chalk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid var(--chalk);
    border-radius: var(--r-s);
    background: var(--chalk);
    color: var(--ink);
    font-family: var(--text);
    font-size: 13px;
    font-weight: 700;
    font-stretch: 88%;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background var(--t-fast) ease, color var(--t-fast) ease,
                transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
html body .action.primary:hover,
html body button.action.primary:hover,
html body .btn-primary:hover,
html body button.tocart:hover,
html body #product-addtocart-button:hover,
html body .sh-btn-chalk:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
    box-shadow: 0 10px 30px -12px rgba(236, 235, 230, .45);
}
html body .action.primary:active,
html body button.tocart:active,
html body .sh-btn:active { transform: scale(.98); }

html body .action.primary span,
html body button.tocart span { color: inherit; }

html body .action.primary[disabled],
html body .action.primary.disabled {
    background: var(--ink-4);
    border-color: var(--ink-4);
    color: var(--steel-2);
    cursor: not-allowed;
    box-shadow: none;
}

/* Zweitrangig: Linie statt Flaeche */
html body .action.secondary,
html body button.action:not(.primary):not(.nav-toggle):not(.search):not(.close):not(.action-close):not(.tocart):not(.towishlist):not(.tocompare):not(.delete):not(.edit),
html body .btn-default,
html body .btn.btn-default,
html body .sh-btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-s);
    background: transparent;
    color: var(--chalk);
    font-family: var(--text);
    font-size: 13px;
    font-weight: 700;
    font-stretch: 88%;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
html body .action.secondary:hover,
html body .btn-default:hover,
html body .sh-btn-line:hover {
    border-color: var(--chalk);
    background: rgba(236, 235, 230, .06);
    color: var(--chalk);
}

.sh-btn { white-space: nowrap; }


/* 4  Formulare ============================================================
   Felder sind Kreide auf Schwarz: hell und gut lesbar, und PayPals
   Kartenfelder (iframes mit dunkler Schrift) passen ohne Sonderweg dazu. */

html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="search"],
html body input[type="url"],
html body input[type="date"],
html body select,
html body textarea,
html body .input-text {
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-s);
    background-color: var(--chalk);
    color: var(--ink);
    font-family: var(--text);
    font-size: 15px;
    line-height: 1.3;
    box-shadow: none;
    transition: box-shadow var(--t-fast) ease, background-color var(--t-fast) ease;
}
html body textarea { min-height: 120px; }
html body input::placeholder,
html body textarea::placeholder { color: #565c62; opacity: 1; }

html body input:focus,
html body select:focus,
html body textarea:focus,
html body .input-text:focus {
    border-color: transparent;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(236, 235, 230, .35);
    outline: none;
}

html body select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230c0d0e' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

html body .field .label,
html body .fieldset > .field > .label,
html body .fieldset > .fields > .field > .label,
html body label.label {
    color: var(--steel-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}
html body .field.required > .label:after,
html body ._required > .label:after { color: var(--steel-2); }

html body div.mage-error,
html body .field-error,
html body .mage-error[generated] {
    color: var(--signal);
    font-size: 13px;
    margin-top: 6px;
}
html body input.mage-error,
html body select.mage-error,
html body textarea.mage-error { box-shadow: 0 0 0 2px var(--signal); }

html body input[type="checkbox"],
html body input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--chalk);
}

html body .fieldset > .legend,
html body legend { color: var(--chalk); border-color: var(--rule); }


/* 5  Kopfzeile ============================================================ */

html body .page-header,
html body .page-header.type1 {
    position: relative;
    z-index: 100;
    border: 0;
    background: var(--ink);
    color: var(--chalk);
}

/* Die Textleiste ueber dem Kopf ("Willkommen", "Anmelden", "Kontaktieren
   Sie uns") doppelt Konto- und Kontaktsymbol. Sie entfaellt. */
html body .page-header .main-panel-top { display: none; }

html body .page-header .header-main {
    background: transparent;
    border: 0;
}
html body .page-header .header.content,
html body .page-header .header-main .header.content {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 76px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
}
html body .page-header .header-left { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
html body .page-header .header-center { flex: 1 1 auto; display: flex; justify-content: center; }
html body .page-header .header-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }

/* Logo: dunkelgraues PNG, auf Schwarz zu Kreide umgekehrt */
html body .page-header .logo,
html body .page-header .header .logo {
    margin: 0;
    max-width: none;
}
html body .page-header .logo img {
    width: auto;
    height: 52px;
    max-width: none;
    filter: invert(1) brightness(1.7) contrast(.92);
}

/* Suche als ruhiges Feld in der Mitte */
html body .page-header .search-area { width: 100%; max-width: 440px; }
html body .page-header .block-search { width: 100%; margin: 0; float: none; }
html body .page-header .block-search .control { padding: 0; border: 0; }
html body .page-header .block-search input#search,
html body .page-header .block-search input {
    width: 100%;
    min-height: 42px;
    height: 42px;
    padding: 0 44px 0 16px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--ink-2);
    color: var(--chalk);
    font-size: 14px;
    position: static;
    margin: 0;
}
html body .page-header .block-search input::placeholder { color: var(--steel-2); }
html body .page-header .block-search input:focus {
    background: var(--ink-3);
    border-color: var(--rule-2);
    box-shadow: 0 0 0 3px rgba(236, 235, 230, .08);
}
html body .page-header .block-search .action.search {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--steel-3);
    opacity: 1;
}
html body .page-header .block-search .action.search:before { color: var(--steel-3); font-size: 16px; line-height: 34px; }
html body .page-header .block-search .action.search:hover:before { color: var(--chalk); }
html body .page-header .block-search .nested { display: none; }
html body .page-header .block-search .field.search { margin: 0; }
html body .page-header .block-search form { position: relative; }

/* Suchvorschlaege */
html body .search-autocomplete {
    margin-top: 6px;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--ink-2);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
}
html body .search-autocomplete ul li {
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
    color: var(--chalk);
    padding: 10px 16px;
}
html body .search-autocomplete ul li:hover,
html body .search-autocomplete ul li.selected { background: var(--ink-3); color: #fff; }
html body .search-autocomplete ul li .amount { color: var(--steel-2); }

/* Kontaktzeile neben den Symbolen: Mail-Adresse und "Kontakt" sind schon im
   Fuss und im Menue. Nur die Symbole bleiben. */
html body .page-header .header-contact .custom-block { display: none; }

html body .page-header .header-contact { display: flex; align-items: center; gap: 2px; margin: 0; }
html body .page-header .header-contact a,
html body .page-header .minicart-wrapper .action.showcart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    color: var(--chalk);
    transition: background var(--t-fast) ease;
}
html body .page-header .header-contact a:hover,
html body .page-header .minicart-wrapper .action.showcart:hover { background: var(--ink-3); }
html body .page-header .header-contact a i,
html body .page-header .header-contact a i:before,
html body .page-header .minicart-wrapper .minicart-icon,
html body .page-header .minicart-wrapper .minicart-icon:before {
    color: var(--chalk);
    font-size: 21px;
    line-height: 1;
    margin: 0;
}
html body .page-header .minicart-wrapper { margin: 0 0 0 2px; float: none; }
html body .page-header .minicart-wrapper .action.showcart .text { display: none; }
html body .page-header .minicart-wrapper .action.showcart:after { display: none; }
html body .page-header .minicart-wrapper .action.showcart .counter.qty {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--chalk);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
html body .page-header .minicart-wrapper .action.showcart .counter.qty.empty { display: none; }
html body .page-header .minicart-wrapper .action.showcart .counter-label { display: none; }
html body .page-header .minicart-wrapper .action-subtotal { display: none !important; }

/* Mobil: Menueknopf */
html body .page-header .nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    margin: 0 4px 0 -8px;
    align-items: center;
    justify-content: center;
    color: var(--chalk);
    cursor: pointer;
}
html body .page-header .nav-toggle:before { color: var(--chalk); font-size: 22px; }
html body .page-header .nav-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 991px) {
    html body .page-header .nav-toggle { display: inline-flex; }
    html body .page-header .header.content { gap: 8px; min-height: 64px; }
    html body .page-header .logo img { height: 40px; }
    html body .page-header .header-center { position: static; flex: 0 0 auto; order: 3; }
    html body .page-header .search-area { width: auto; max-width: none; }
    html body .page-header .search-toggle-icon {
        display: inline-flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        color: var(--chalk);
    }
    html body .page-header .search-toggle-icon i { color: var(--chalk); font-size: 19px; }
    html body .page-header .search-area .block-search {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        padding: 10px var(--gutter) 14px;
        background: var(--ink);
        border-bottom: 1px solid var(--rule);
    }
    html body .page-header .header-right { order: 4; margin-left: 0; }
    html body .page-header .header-left { margin-right: auto; }
    html body .page-header .header-contact .wishlist { display: none; }
}

/* Haftende Kopfzeile: Portos Klasse .sticky-header, dazu ein Material aus
   abgedunkeltem Glas, damit Produktfotos darunter nicht hart abreissen. */
html body .page-header.sticky-header,
html body .page-header.sticky-header .header-main,
html body .page-header.sticky-header .nav-sections {
    background: rgba(12, 13, 14, .82);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    backdrop-filter: saturate(140%) blur(18px);
    box-shadow: none;
}
html body .page-header.sticky-header { border-bottom: 1px solid var(--rule); }
html body .page-header.sticky-header .header-main { display: none; }
html body .page-header.sticky-header .sticky-logo img { filter: invert(1) brightness(1.7); height: 32px; width: auto; }


/* 6  Navigation =========================================================== */

html body .nav-sections,
html body .page-header .nav-sections,
html body .page-header.type1 .nav-sections {
    margin: 0;
    background: var(--ink);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
html body .navigation,
html body .page-header .navigation {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
    background: transparent;
}
html body .navigation.sw-megamenu > ul { display: flex; flex-wrap: wrap; gap: 0 4px; }
html body .navigation.sw-megamenu > ul > li.level0 { margin: 0; }
html body .navigation.sw-megamenu > ul > li.level0 > a.level-top,
html body .page-header .navigation .level0 > .level-top {
    position: relative;
    padding: 0 14px;
    line-height: 50px;
    height: 50px;
    color: var(--steel-3);
    font-family: var(--text);
    font-size: 13px;
    font-weight: 600;
    font-stretch: 88%;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: transparent;
}
html body .navigation.sw-megamenu > ul > li.level0:first-child > a.level-top { padding-left: 0; }
html body .navigation.sw-megamenu > ul > li.level0 > a.level-top:after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    background: var(--chalk);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med) var(--ease-out);
}
html body .navigation.sw-megamenu > ul > li.level0:first-child > a.level-top:after { left: 0; }
html body .navigation.sw-megamenu > ul > li.level0:hover > a.level-top,
html body .navigation.sw-megamenu > ul > li.level0.active > a.level-top,
html body .navigation.sw-megamenu > ul > li.level0 > a.level-top.ui-state-active { color: var(--chalk); }
html body .navigation.sw-megamenu > ul > li.level0:hover > a.level-top:after,
html body .navigation.sw-megamenu > ul > li.level0.active > a.level-top:after { transform: scaleX(1); }
html body .navigation.sw-megamenu > ul > li.level0.parent > a.level-top > span:after { color: var(--steel-2); }

/* "Home" im Menue ist das Logo -- doppelt */
html body .navigation.sw-megamenu > ul > li.level0:first-child:has(> a[href$=".de/"]) { display: none; }
html body .navigation.sw-megamenu > ul > li.level0:nth-child(2) > a.level-top { padding-left: 0; }
html body .navigation.sw-megamenu > ul > li.level0:nth-child(2) > a.level-top:after { left: 0; }

/* Untermenues */
html body .navigation.sw-megamenu li.level0 .submenu,
html body .navigation .level0 .submenu {
    border: 1px solid var(--rule);
    border-top: 0;
    border-radius: 0 0 var(--r-m) var(--r-m);
    background: var(--ink-2);
    color: var(--chalk);
    box-shadow: var(--shadow-lift);
}
html body .navigation.sw-megamenu li.level0.fullwidth .submenu { padding: 18px 0 22px; }
html body .navigation.sw-megamenu li.level0 .submenu a,
html body .navigation .submenu a,
html body .navigation.sw-megamenu li.level1 > a {
    color: var(--steel-3);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    background: transparent;
}
html body .navigation.sw-megamenu li.level0 .submenu a:hover,
html body .navigation .submenu a:hover { color: var(--chalk); background: transparent; }
html body .navigation.sw-megamenu li.level0.classic .submenu,
html body .navigation.sw-megamenu .level0.classic .subchildmenu { background: var(--ink-2); }

/* Mobiles Menue (Porto schiebt .nav-sections seitlich herein) */
@media (max-width: 991px) {
    html body .nav-sections,
    html body .page-header .nav-sections {
        border: 0;
        background: var(--ink);
    }
    html body .nav-sections .nav-sections-item-title {
        background: var(--ink-2);
        border-color: var(--rule);
    }
    html body .nav-sections .nav-sections-item-title a,
    html body .nav-sections .nav-sections-item-switch { color: var(--chalk); }
    html body .nav-sections-item-content { background: var(--ink); }
    html body .navigation.sw-megamenu > ul { display: block; }
    html body .navigation,
    html body .page-header .navigation { padding: 0; }
    html body .navigation.sw-megamenu li.ui-menu-item,
    html body .navigation li.level0 { border-top: 1px solid var(--rule); }
    html body .navigation.sw-megamenu > ul > li.level0 > a.level-top,
    html body .navigation.sw-megamenu > ul > li.level0:nth-child(2) > a.level-top {
        display: block;
        height: auto;
        padding: 16px 20px;
        line-height: 1.2;
        color: var(--chalk);
        font-family: var(--display);
        font-size: 28px;
        font-weight: 800;
        letter-spacing: 0;
    }
    html body .navigation.sw-megamenu > ul > li.level0 > a.level-top:after { display: none; }
    html body .navigation.sw-megamenu li.level0 .submenu {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--ink-2);
    }
    html body .navigation .open-children-toggle { color: var(--chalk); }
    html body .navigation .open-children-toggle:before { color: var(--steel-3); }
    html body .navigation.sw-megamenu li.level1 > a { padding: 12px 20px; font-size: 16px; color: var(--steel-3); }
    html body .nav-open .nav-toggle:after { background: rgba(0, 0, 0, .6); }
}


/* 7  Brotkrumen, Seitentitel ============================================== */

html body .page-wrapper > .breadcrumbs,
html body .breadcrumbs {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
html body .page-wrapper > .breadcrumbs { margin-bottom: 8px; }
html body .breadcrumbs .items {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 18px var(--gutter) 0;
    color: var(--steel-2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}
html body .breadcrumbs .items > li { color: var(--steel-2); }
html body .breadcrumbs a,
html body .breadcrumbs a:visited { color: var(--steel-2); text-decoration: none; }
html body .breadcrumbs a:hover { color: var(--chalk); }
html body .breadcrumbs strong { color: var(--chalk); font-weight: 600; }
html body .breadcrumbs .item:not(:last-child):after { color: var(--steel-1); }
html body .breadcrumbs .item.home a:before,
html body .breadcrumbs .item.home a { color: var(--steel-2); }

html body .page-title-wrapper { margin: 0 0 28px; }
html body .page-title-wrapper .page-title {
    margin: 0;
    color: var(--chalk);
    font-size: clamp(44px, 7vw, 96px);
}
html body .catalog-category-view .page-title-wrapper .page-title { font-size: clamp(56px, 9vw, 128px); }

html body .category-description,
html body .category-view .category-description {
    max-width: 68ch;
    color: var(--steel-3);
    font-size: 16px;
}


/* 8  Produktkarten, Liste ================================================= */

/* Die Plinthe: heller Stahl, Fotos mit weissem Grund verschmelzen ueber
   multiply, Fotos mit schwarzem Grund bleiben als dunkles Bild stehen. */
html body .products-grid .product-item .product-item-photo,
html body .products-grid .product-item .product-image,
html body .sh-card-plinth {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-l);
    background: var(--plinth);
    aspect-ratio: 4 / 5;
    isolation: isolate;
}
html body .products-grid .product-item .product-item-photo img,
html body .products-grid .product-item .product-image-photo,
html body .sh-card-plinth img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform var(--t-slow) var(--ease-out);
}
html body .products-grid .product-item:hover .product-item-photo img,
html body .sh-card:hover .sh-card-plinth img { transform: scale(1.045); }

/* Porto legt um das Bild zwei Huellen (.porto-tb-featured-image > a). Ohne
   eigene Hoehe waeren sie 0 px hoch und das absolut gesetzte Bild unsichtbar. */
html body .products-grid .product-item .product-item-photo .porto-tb-featured-image,
html body .products-grid .product-item .product-item-photo .porto-tb-featured-image > a,
html body .products-grid .product-item .product-item-photo > a,
html body .products-grid .product-item .product-item-photo .product-image-container,
html body .products-grid .product-item .product-item-photo .product-image-wrapper {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
}


html body .products-grid .product-item-info,
html body .products-grid .product-item-info.type1,
html body .products-grid .product-item-info.type3,
html body .products-grid .product-item-info.type11 {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    text-align: left;
}
html body .products-grid .product-item-info:hover { box-shadow: none; }

html body .products-grid .product-item-details,
html body .sh-card-body {
    padding: 14px 2px 0;
    text-align: left;
}
html body .product-item-name,
html body .product-item .product-item-name,
html body .products-grid .product-item-name {
    display: block;
    margin: 0 0 6px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
html body .product-item-name a,
html body .product-item-link,
html body .sh-card-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--chalk);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    white-space: normal;
}
html body .product-item-name a:hover,
html body .sh-card-name:hover { color: #fff; text-decoration: underline; }

html body .product-item .price-box,
html body .sh-card .price-box { margin: 4px 0 2px; }
html body .product-item .price-box .price,
html body .sh-card .price-box .price {
    color: var(--chalk);
    font-family: var(--text);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
}
html body .old-price .price { color: var(--steel-2) !important; font-weight: 400 !important; text-decoration: line-through; }
html body .special-price .price { color: var(--chalk); }

/* FireGento-Pflichthinweis: muss dastehen, darf leise sein */
html body .price-details,
html body .price-details .tax-details,
html body .price-details .shipping-cost-details {
    color: var(--steel-2);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}
html body .price-details a { color: var(--steel-2); text-decoration: underline; }
html body .price-details a:hover { color: var(--chalk); }

/* Kartenaktionen: unter dem Text, kompakt, beim Zeigen hervorgehoben */
html body .products-grid .product-item-inner,
html body .products-grid .product-item .product-item-inner {
    position: static;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
}
html body .products-grid .product-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    position: static;
    opacity: 1;
}
html body .products-grid .product-item-actions .actions-primary { flex: 1 1 auto; display: block; }
html body .products-grid .product-item-actions .action.tocart,
html body .products-grid .product-item-actions button.tocart {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--rule-2);
    color: var(--chalk);
    font-size: 12px;
}
html body .products-grid .product-item-actions .action.tocart:before,
html body .products-grid .product-item-actions button.tocart:before { color: inherit; margin-right: 6px; }
html body .products-grid .product-item:hover .product-item-actions .action.tocart,
html body .products-grid .product-item-actions .action.tocart:focus-visible {
    background: var(--chalk);
    border-color: var(--chalk);
    color: var(--ink);
}
html body .products-grid .product-item-actions .action.towishlist,
html body .products-grid .product-item-actions .action.tocompare,
html body .products-grid .product-item-actions .actions-secondary {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    background: transparent;
    color: var(--steel-3);
    position: static;
    opacity: 1;
    visibility: visible;
}
html body .products-grid .product-item-actions .action.tocompare { display: none; }
html body .products-grid .product-item-actions .action.towishlist:hover { border-color: var(--chalk); color: var(--chalk); }
html body .products-grid .product-item-actions .action.towishlist:before { color: inherit; }

/* Raster */
html body .products-grid .product-items,
html body .products-grid ol.product-items,
html body .products.wrapper.grid .product-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 16px;
    margin: 0;
    padding: 0;
}
@media (min-width: 768px) {
    html body .products-grid .product-items,
    html body .products.wrapper.grid .product-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 22px; }
}
@media (min-width: 1200px) {
    html body .page-layout-1column .products-grid .product-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
html body .products-grid .product-item,
html body .products-grid .product-items > .product-item,
html body .products.wrapper.grid .product-items > li.product-item {
    width: auto !important;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    float: none;
}
html body .products.wrapper,
html body .products.wrapper.grid { margin-left: 0; margin-right: 0; }
html body .products-grid .product-items:before,
html body .products-grid .product-items:after { display: none; }

/* Listenansicht */
html body .products-list .product-item-info { gap: 24px; }
html body .products-list .product-item-photo { border-radius: var(--r-l); overflow: hidden; background: var(--plinth); }
html body .products-list .product-item-photo img { mix-blend-mode: multiply; }

/* Werkzeugleiste: sortieren, Anzahl, Ansicht */
html body .toolbar,
html body .toolbar-products {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 0 0 28px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--rule);
    color: var(--steel-2);
    font-size: 13px;
}
html body .toolbar .sorter,
html body .toolbar .limiter,
html body .toolbar .modes { float: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
html body .toolbar .toolbar-amount { position: static; margin: 0 auto 0 0; padding: 0; color: var(--steel-2); line-height: 1; }
html body .toolbar select,
html body .toolbar .sorter-options,
html body .toolbar .limiter-options {
    min-height: 38px;
    height: 38px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--rule);
    background-color: var(--ink-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b9bfc4' stroke-width='1.6'/%3E%3C/svg%3E");
    background-size: 12px 8px;
    background-position: right 12px center;
    background-repeat: no-repeat;
    color: var(--chalk);
    font-size: 13px;
}
html body .toolbar .sorter-label,
html body .toolbar .limiter-label,
html body .toolbar .limiter-text { color: var(--steel-2); font-size: 13px; font-weight: 500; }
html body .toolbar .sorter-action:before,
html body .toolbar .modes-mode:before { color: var(--steel-3); }
html body .toolbar .modes-mode { border: 0; background: transparent; }
html body .toolbar .modes-mode.active:before { color: var(--chalk); }
/* Nach den Produkten nur noch die Seitenzahlen */
html body .products.wrapper ~ .toolbar { border: 0; border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 48px; }
html body .products.wrapper ~ .toolbar .toolbar-amount,
html body .products.wrapper ~ .toolbar .sorter,
html body .products.wrapper ~ .toolbar .modes { display: none; }
html body .toolbar-products:not(.products.wrapper ~ .toolbar) .pages { display: none; }

html body .pages .items { display: flex; gap: 6px; }
html body .pages .item { margin: 0; }
html body .pages .item a.page,
html body .pages .item strong.page,
html body .pages .action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    background: transparent;
    color: var(--steel-3);
    font-weight: 600;
    line-height: 1;
}
html body .pages .item.current strong.page { background: var(--chalk); border-color: var(--chalk); color: var(--ink); }
html body .pages .item a.page:hover,
html body .pages .action:hover { border-color: var(--chalk); color: var(--chalk); }
html body .pages .action:before { color: inherit; }

html body .porto-product-filters-toggle,
html body .sidebar-toggle { color: var(--chalk); }
html body .porto-product-filters-toggle svg line,
html body .porto-product-filters-toggle svg path { stroke: var(--chalk); }

/* Seitenleiste: Filter und "Empfohlen" */
html body .sidebar .block,
html body .sidebar .block-title,
html body .sidebar .filter-options-title,
html body .block.filter .filter-title { border-color: var(--rule); background: transparent; color: var(--chalk); }
html body .sidebar .block-title strong,
html body .block.filter .filter-title strong,
html body .sidebar-title,
html body .sidebar .filter-options-title {
    color: var(--chalk);
    font-family: var(--text);
    font-size: 12px;
    font-weight: 700;
    font-stretch: 88%;
    letter-spacing: .1em;
    text-transform: uppercase;
}
html body .block.filter .filter-subtitle,
html body .filter-options-title { color: var(--steel-2); }
html body .filter-options-content a,
html body .sidebar .block a { color: var(--steel-3); text-decoration: none; }
html body .filter-options-content a:hover,
html body .sidebar .block a:hover { color: var(--chalk); background: transparent; }
html body .filter-options-content .count,
html body .filter-options-content .count:before,
html body .filter-options-content .count:after { color: var(--steel-1); }
html body .sidebar .product-items .product-item { border-color: var(--rule); }
html body .sidebar .product-item-photo,
html body .sidebar .product-image-container { background: var(--plinth); border-radius: var(--r-s); overflow: hidden; }
html body .sidebar .product-item-photo img { mix-blend-mode: multiply; }
html body .sidebar .owl-nav button,
html body .sidebar .owl-nav [class*="owl-"] { color: var(--steel-3); background: transparent; }

@media (min-width: 992px) {
    html body .page-layout-2columns-left .sidebar-main { padding-right: 40px; }
    html body .page-layout-2columns-left .column.main { padding-left: 0; }
}

/* Mobiles Filterfenster */
html body .mobile-sidebar,
html body .sidebar.sidebar-main.mobile-sidebar { background: var(--ink); }


/* 9  Produktseite ========================================================= */

html body .catalog-product-view .page-main { padding-top: 16px; }

/* Galerie auf der Plinthe */
html body .product.media .gallery-placeholder,
html body .product.media .fotorama__stage,
html body .product.media .fotorama__wrap {
    border-radius: var(--r-l);
    overflow: hidden;
}
html body .product.media .fotorama__stage,
html body .product.media .gallery-placeholder { background: var(--plinth); }
/* Die Rahmen sind per transform eigene Ebenen; multiply mischt nur mit dem
   Grund INNERHALB der Ebene. Deshalb bekommt jeder Rahmen selbst die Plinthe. */
html body .product.media .fotorama__stage__frame { background: var(--plinth); }
html body .product.media .fotorama__stage__shaft { background: transparent; }
html body .product.media .fotorama__img,
html body .product.media .gallery-placeholder__image { mix-blend-mode: multiply; }
html body .fotorama__nav-wrap { margin-top: 12px; }
html body .fotorama__nav,
html body .fotorama__nav__shaft { background: transparent; }
html body .fotorama__nav__frame { padding: 4px; }
html body .fotorama__nav__frame .fotorama__thumb {
    border-radius: var(--r-s);
    background: var(--plinth);
}
html body .fotorama__nav__frame .fotorama__thumb img { mix-blend-mode: multiply; }
html body .fotorama__thumb-border { border: 2px solid var(--chalk); border-radius: var(--r-s); }
html body .product.media .fotorama__arr {
    width: 56px;
    background: transparent;
    border: 0;
    border-radius: 0;
}
html body .product.media .fotorama__arr .fotorama__arr__arr {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background-color: rgba(12, 13, 14, .7);
}
html body .product.media .fotorama__arr:before,
html body .product.media .fotorama__arr .fotorama__arr__arr:before { color: var(--chalk); }
html body .fotorama__dot { border-color: var(--steel-2); }
html body .fotorama__active .fotorama__dot { background: var(--chalk); border-color: var(--chalk); }
html body .fotorama--fullscreen,
html body .fotorama--fullscreen .fotorama__stage { background: var(--plinth); }

@media (min-width: 992px) {
    html body .catalog-product-view .product.media { width: 52%; padding-right: 48px; }
    html body .catalog-product-view .product-info-main { width: 48%; }
    html body .page-layout-2columns-right.catalog-product-view .product.media { width: 50%; }
    html body .page-layout-2columns-right.catalog-product-view .product-info-main { width: 50%; }
}

html body .product-info-main .page-title-wrapper { margin: 0 0 14px; padding-right: 40px; }
html body .product-info-main .page-title-wrapper .page-title,
html body .catalog-product-view .page-title-wrapper.product .page-title {
    font-size: clamp(36px, 3.6vw, 54px);
    line-height: .95;
    letter-spacing: 0;
}

html body .product-info-main .product.attribute.delivery_time {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    margin: 0 0 18px;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--steel-3);
    font-size: 13px;
}
html body .product-info-main .product.attribute.delivery_time .type { color: var(--steel-2); font-weight: 500; }
html body .product-info-main .product.attribute.delivery_time .value { color: var(--chalk); font-weight: 600; }

html body .product-info-main .product-reviews-summary.empty { display: none; }

html body .product-info-main .product-info-price {
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}
html body .product-info-main .price-box .price,
html body .product-info-main .price-box .price-wrapper .price {
    color: var(--chalk);
    font-family: var(--display);
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}
html body .product-info-main .price-details { margin-top: 8px; }

html body .product-info-main .product.attribute.overview {
    max-width: 58ch;
    margin: 0 0 24px;
    color: var(--steel-3);
    font-size: 17px;
    line-height: 1.6;
}

html body .product-info-main .product-info-stock-sku {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 22px;
    padding: 0;
    color: var(--steel-2);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
html body .product-info-main .product-info-stock-sku .stock { display: inline-flex; align-items: center; gap: 6px; color: var(--chalk); font-weight: 600; }
html body .product-info-main .product-info-stock-sku .stock.available:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(124, 207, 155, .18);
}
html body .product-info-main .product-info-stock-sku .stock.unavailable { color: var(--signal); }
html body .product-info-main .product.attribute.sku { display: inline-flex; gap: 6px; }
html body .product-info-main .product.attribute.sku .type { font-weight: 500; }
html body .product-info-main .product.attribute.sku .value { color: var(--steel-3); }

/* Menge und Warenkorbknopf in einer Zeile */
html body .product-info-main .product-add-form { padding: 22px 0 0; margin: 0; }
html body .box-tocart { margin: 0; }
html body .box-tocart .fieldset { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; }
html body .box-tocart .field.qty { margin: 0; padding: 0; }
html body .box-tocart .field.qty .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html body .box-tocart .field.qty .control {
    display: flex;
    align-items: stretch;
    height: 56px;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-s);
    overflow: hidden;
}
html body .box-tocart .input-text.qty,
html body .box-tocart input.qty {
    width: 56px;
    height: 54px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--chalk);
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}
html body .box-tocart input.qty:focus { box-shadow: none; background: var(--ink-3); }
html body .box-tocart .qty-changer { display: contents; }
html body .product-info-main .box-tocart .field.qty .control input#qty,
html body .cart.table-wrapper .col.qty .control input.qty {
    color: var(--chalk) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html body .product-info-main .box-tocart .field.qty .qty-changer a,
html body .cart.table-wrapper .col.qty .qty-changer a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--steel-3) !important;
    position: relative !important;
}
html body .product-info-main .box-tocart .field.qty .qty-changer a:hover,
html body .cart.table-wrapper .col.qty .qty-changer a:hover { background: var(--ink-3) !important; color: var(--chalk) !important; }
html body .box-tocart .qty-changer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border: 0;
    background: transparent;
    color: var(--steel-3);
    font-size: 14px;
}
html body .box-tocart .qty-changer a:hover { background: var(--ink-3); color: var(--chalk); }
html body .box-tocart .qty-changer .qty-dec { order: -1; }
html body .box-tocart .actions { flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; }
html body .box-tocart #product-addtocart-button { width: 100%; min-height: 56px; font-size: 14px; }
html body .box-tocart #product-addtocart-button:before { color: inherit; }
html body .ppcp-express-payments-pdp { margin-top: 2px; }

/* Teilen, Merken */
html body .product-social-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 22px 0 0; }
html body .product-social-links .share-links a,
html body .product-social-links .product-addto-links a {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: transparent;
    color: var(--steel-3);
}
html body .product-social-links .share-links a:hover,
html body .product-social-links .product-addto-links a:hover { border-color: var(--chalk); color: var(--chalk); background: transparent; }
html body .product-social-links a:before { color: inherit; }
html body .product-social-links .action.tocompare { display: none; }

/* Vor/Zurueck */
html body .prev-next-products .product-nav > a {
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--steel-3);
}
html body .prev-next-products .product-pop {
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--ink-2);
    color: var(--chalk);
    box-shadow: var(--shadow-lift);
}
html body .prev-next-products .product-pop .product-name { color: var(--chalk); }

/* Reiter: Details, Mehr Informationen, Bewertungen */
html body .product.info.detailed { margin-top: 72px; clear: both; }
html body .product.data.items { border: 0; }
html body .product.data.items > .item.title > .switch,
html body .product.data.items > .item.title > a.data.switch {
    height: auto;
    padding: 14px 0;
    margin-right: 28px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--steel-2);
    font-family: var(--text);
    font-size: 13px;
    font-weight: 700;
    font-stretch: 88%;
    letter-spacing: .1em;
    text-transform: uppercase;
}
html body .product.info.detailed .product.data.items > .item.title.active > .switch,
html body .product.data.items > .item.title.active > .switch,
html body .product.data.items > .item.title > .switch:hover { color: var(--chalk); border-bottom-color: var(--chalk); background: transparent; }
html body .product.info.detailed .product.data.items > .item.content {
    padding: 36px 0 0;
    border: 0;
    border-top: 1px solid var(--rule);
    background: transparent;
    color: var(--steel-3);
    margin-top: -1px;
}
html body .product.attribute.description,
html body .product.attribute.description .value,
html body .product.attribute.description .value p { max-width: 70ch; font-size: 16px; line-height: 1.7; color: var(--steel-3); }
html body .product.attribute.description h3 {
    margin: 0 0 14px;
    color: var(--chalk);
    font-family: var(--display);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
html body .product.attribute.description p { margin: 0 0 16px; }
html body .product.attribute.description .sh-daten-titel { color: var(--steel-2); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
html body .product.attribute.description .sh-daten { border-top-color: var(--rule); }
html body .product.attribute.description .sh-daten > li {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--chalk);
    font-variant-numeric: tabular-nums;
}
html body .product.attribute.description .sh-daten > li > strong { min-width: 0; padding: 0; color: var(--steel-2); font-weight: 500; }

html body .additional-attributes-wrapper table,
html body .additional-attributes { width: 100%; max-width: 70ch; }
html body .additional-attributes th,
html body .additional-attributes td {
    padding: 12px 12px 12px 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
    color: var(--chalk);
    font-weight: 400;
}
html body .additional-attributes th { color: var(--steel-2); font-weight: 500; width: 34%; }

html body .review-form,
html body #product-review-container { color: var(--steel-3); }
html body .review-legend,
html body .review-legend strong,
html body .block-reviews-summary .block-title strong { color: var(--chalk); }
html body .review-control-vote label:before { color: var(--ink-4); }
html body .review-control-vote input:checked + label:before,
html body .review-control-vote label:hover:before { color: var(--chalk); }
html body .review-form .action.submit.primary { background: var(--chalk); border-color: var(--chalk); color: var(--ink); }

/* Seitenleiste der Produktseite: Hinweiskaesten */
html body .custom-block.custom-block-1 > div { padding: 18px 0; }
html body .custom-block.custom-block-1 > div + div { border-top-color: var(--rule); }
html body .custom-block.custom-block-1 > div > em { color: var(--steel-3); opacity: 1; }
html body .custom-block.custom-block-1 h3 {
    color: var(--chalk);
    font-size: 13px;
    font-weight: 700;
    font-stretch: 88%;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html body .custom-block.custom-block-1 p { color: var(--steel-2); opacity: 1; }
html body .sh-hinweis {
    border: 1px solid var(--rule);
    border-radius: var(--r-l);
    background: var(--ink-2);
    color: var(--steel-3);
}
html body .sh-hinweis .sh-hinweis-kopf { color: var(--chalk); font-size: 13px; letter-spacing: .08em; }
html body .sh-hinweis .sh-hinweis-fuss { border-top-color: var(--rule); color: var(--steel-2); opacity: 1; }

/* Upsell, Cross-Sell, Verwandte */
html body .block.upsell .block-title strong,
html body .block.related .block-title strong,
html body .block.crosssell .block-title strong,
html body .filterproduct-title,
html body .filterproduct-title .content,
html body .filterproduct-title strong {
    background: transparent;
    color: var(--chalk);
    font-family: var(--display);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
html body .filterproduct-title { border: 0; margin-bottom: 24px; }
html body .filterproduct-title:before,
html body .filterproduct-title:after { display: none; }

/* Owl-Pfeile und -Punkte */
html body .owl-carousel .owl-nav button,
html body .owl-theme .owl-nav [class*="owl-"],
html body .owl-carousel .owl-nav .owl-prev,
html body .owl-carousel .owl-nav .owl-next {
    color: var(--chalk);
    background: rgba(12, 13, 14, .6);
    border: 1px solid var(--rule);
    border-radius: 50%;
}
html body .owl-carousel .owl-nav .owl-prev:before,
html body .owl-carousel .owl-nav .owl-next:before { color: var(--chalk); }
html body .owl-theme .owl-dots .owl-dot span { background: var(--ink-4); }
html body .owl-theme .owl-dots .owl-dot.active span,
html body .owl-theme .owl-dots .owl-dot:hover span { background: var(--chalk); }


/* 10  Warenkorb, Minicart ================================================= */

html body .block-minicart,
html body .minicart-wrapper .block-minicart {
    border: 1px solid var(--rule);
    border-radius: var(--r-l);
    background: var(--ink-2);
    color: var(--chalk);
    box-shadow: var(--shadow-lift);
    padding: 22px;
}
html body .minicart-wrapper .block-minicart:before,
html body .minicart-wrapper .block-minicart:after { display: none; }
html body .block-minicart .block-title,
html body .block-minicart .block-title strong,
html body .block-minicart .subtitle,
html body .block-minicart .subtitle.empty { color: var(--chalk); font-weight: 600; }
html body .block-minicart .items-total,
html body .block-minicart .subtotal .label { color: var(--steel-2); }
html body .block-minicart .subtotal .price { color: var(--chalk); font-size: 18px; font-weight: 700; }
html body .minicart-items .product-item { border-color: var(--rule); }
html body .minicart-items .product-item-name a { color: var(--chalk); }
html body .minicart-items .product-image-container,
html body .minicart-items .product-item-photo { background: var(--plinth); border-radius: var(--r-s); overflow: hidden; }
html body .minicart-items .product-image-photo { mix-blend-mode: multiply; }
html body .minicart-items .details-qty .label,
html body .minicart-items .product .toggle { color: var(--steel-2); }
html body .minicart-items .details-qty input.item-qty { width: 52px; min-height: 36px; }
html body .minicart-items .action.delete:before,
html body .minicart-items .action.edit:before { color: var(--steel-3); }
html body .block-minicart .action.viewcart { color: var(--chalk); }
html body .block-minicart .actions .primary .action.primary { width: 100%; }
html body .block-minicart .action.close:before { color: var(--steel-3); }

html body .cart-container .cart.table-wrapper,
html body .cart.table-wrapper .items { border-color: var(--rule); }
html body .cart.table-wrapper .items thead th,
html body .cart.table-wrapper .col {
    border-color: var(--rule);
    background: transparent;
    color: var(--steel-2);
}
html body .cart.table-wrapper .items thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
html body .cart.table-wrapper .item-info td,
html body .cart.table-wrapper .item-actions td { border-color: var(--rule); color: var(--chalk); }
html body .cart.table-wrapper .product-item-photo,
html body .cart.table-wrapper .product-image-container {
    background: var(--plinth);
    border-radius: var(--r-m);
    overflow: hidden;
}
html body .cart.table-wrapper .product-image-photo { mix-blend-mode: multiply; }
html body .cart.table-wrapper .product-item-name a { color: var(--chalk); font-weight: 600; }
html body .cart.table-wrapper .col.price .price,
html body .cart.table-wrapper .col.subtotal .price { color: var(--chalk); font-weight: 700; }
html body .cart.table-wrapper .actions-toolbar > .action,
html body .cart.table-wrapper .action-delete,
html body .cart.table-wrapper .action-edit { color: var(--steel-3); }

html body .cart-summary,
html body .opc-block-summary,
html body .checkout-container .opc-block-summary {
    border: 1px solid var(--rule);
    border-radius: var(--r-l);
    background: var(--ink-2);
    color: var(--chalk);
    padding: 26px;
}
html body .cart-summary > .title,
html body .opc-block-summary > .title,
html body .cart-summary .summary.title {
    color: var(--chalk);
    font-family: var(--display);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
html body .cart-summary .block > .title,
html body .cart-summary .block .title strong { color: var(--steel-3); border-color: var(--rule); }
html body .cart-totals,
html body .opc-block-summary .table-totals { border-color: var(--rule); }
html body .cart-totals th,
html body .cart-totals td,
html body .table-totals th,
html body .table-totals td { color: var(--steel-3); border-color: var(--rule); background: transparent; }
html body .cart-totals .grand th,
html body .cart-totals .grand td,
html body .table-totals .grand th,
html body .table-totals .grand td,
html body .cart-totals .grand .price,
html body .table-totals .grand .price {
    color: var(--chalk);
    font-size: 20px;
    font-weight: 700;
    border-top: 1px solid var(--rule-2);
}
html body .cart-summary .checkout-methods-items .action.primary { width: 100%; min-height: 56px; font-size: 14px; }
html body .cart-empty { color: var(--steel-3); font-size: 16px; }


/* 11  Checkout ============================================================
   Nur Farbe, Flaechen und Schrift -- keine Umbauten an Anordnung oder
   Sichtbarkeit, damit der Ablauf funktional bleibt, wie er ist. */

html body.checkout-index-index .page-header,
html body.onepage-index-index .page-header { border-bottom: 1px solid var(--rule); }

html body .opc-wrapper .step-title,
html body .checkout-container .step-title,
html body .onepage-index-index .step-title,
html body .opc-wrapper .step-title span {
    border-color: var(--rule);
    color: var(--chalk);
    font-family: var(--display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
html body .opc-progress-bar-item > span { color: var(--steel-2); }
html body .opc-progress-bar-item._active > span { color: var(--chalk); }
html body .opc-progress-bar-item:before { background: var(--ink-4); }
html body .opc-progress-bar-item._active:before { background: var(--chalk); }
html body .opc-progress-bar-item > span:before { background: var(--ink-4); }
html body .opc-progress-bar-item._active > span:before { background: var(--chalk); }

html body .checkout-container,
html body .onepage-index-index .page-main { color: var(--chalk); }
html body .checkout-container .fieldset,
html body .checkout-container .step-content,
html body .onepage-index-index .step-content,
html body .onepage-index-index .opc-wrapper > .opc > li { background: transparent; border-color: var(--rule); }

html body .table-checkout-shipping-method td,
html body .table-checkout-shipping-method th { border-color: var(--rule); color: var(--chalk); background: transparent; }

html body .payment-method,
html body .checkout-payment-method .payment-method,
html body .payment-methods .payment-method {
    border-color: var(--rule);
    background: transparent;
}
html body .payment-method-title,
html body .checkout-payment-method .payment-method-title {
    border-color: var(--rule);
    color: var(--chalk);
}
html body .payment-method-title label,
html body .payment-method-title .label { color: var(--chalk); font-weight: 600; }
html body .payment-method._active .payment-method-title { background: var(--ink-2); }
html body .payment-method-content { color: var(--steel-3); }
html body .payment-method-billing-address,
html body .checkout-billing-address .billing-address-details { color: var(--steel-3); }

html body .opc-block-summary .items-in-cart > .title strong,
html body .opc-block-summary .product-item-name { color: var(--chalk); }
html body .opc-block-summary .product-image-container { background: var(--plinth); border-radius: var(--r-s); overflow: hidden; }
html body .opc-block-summary .product-image-container img { mix-blend-mode: multiply; }
html body .checkout-agreements-block,
html body .checkout-agreement label { color: var(--steel-3); }
html body .checkout-agreement label a,
html body .checkout-agreements-block a { color: var(--chalk); text-decoration: underline; }

html body .action-auth-toggle,
html body .action.action-show-popup,
html body .action.action-edit-address { color: var(--chalk); }

/* PayPal-Kartenfelder: das Element um den iframe wird zum Kreidefeld */
html body .payment-method-ppcp_card .hosted-field,
html body .payment-method-ppcp_card .control > div[id*="card"],
html body .payment-method-ppcp_card .field .control > div:not(.hosted-error) {
    min-height: 48px;
    border-radius: var(--r-s);
    background: var(--chalk);
}

/* Kopfzeile im Checkout: nur Logo, schlank */
html body.checkout-index-index .page-header .header-center,
html body.onepage-index-index .page-header .header-center { visibility: hidden; }


/* 12  Konto, Meldungen, Dialoge =========================================== */

html body .account .sidebar-main .block,
html body .block-collapsible-nav {
    border: 1px solid var(--rule);
    border-radius: var(--r-l);
    background: var(--ink-2);
}
html body .block-collapsible-nav .content { background: transparent; padding: 10px 0; }
html body .block-collapsible-nav .item a,
html body .block-collapsible-nav .item > strong { color: var(--steel-3); border-left-color: transparent; padding: 8px 20px; }
html body .block-collapsible-nav .item a:hover { color: var(--chalk); background: var(--ink-3); }
html body .block-collapsible-nav .item.current a,
html body .block-collapsible-nav .item.current > strong { color: var(--chalk); border-left: 2px solid var(--chalk); font-weight: 600; }

html body .block-dashboard-info .block-title,
html body .block-dashboard-addresses .block-title,
html body .account .block-title,
html body .account .block-title strong { color: var(--chalk); border-color: var(--rule); }
html body .box-title,
html body .box-title > span { color: var(--chalk); }
html body .box-content { color: var(--steel-3); }

html body .data.table,
html body .table-wrapper .data.table { color: var(--chalk); }
html body .data.table th,
html body .data.table td { border-color: var(--rule); background: transparent; }
html body .data.table thead th { color: var(--steel-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Anmelden / Registrieren */
html body .login-container .block,
html body .form-create-account,
html body .form.password.forget,
html body .customer-account-create .form.create.account {
    border: 1px solid var(--rule);
    border-radius: var(--r-l);
    background: var(--ink-2);
    padding: 28px;
}
html body .login-container .block .block-title,
html body .login-container .block .block-title strong {
    border: 0;
    color: var(--chalk);
    font-family: var(--display);
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
}
html body .login-container .block-new-customer .block-content p { color: var(--steel-3); }

/* Meldungen: nur hier gibt es Farbe -- als Kante und Symbol, nicht als Flaeche */
html body .message,
html body .message.info,
html body .message.success,
html body .message.error,
html body .message.warning,
html body .message.notice,
html body div.message {
    position: relative;
    padding: 14px 18px 14px 46px;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-m);
    background: var(--ink-2);
    color: var(--chalk);
    font-size: 14px;
    box-shadow: none;
}
html body .message a { color: var(--chalk); text-decoration: underline; }
html body .message > *:first-child:before,
html body .message:before {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    color: var(--steel-3);
}
html body .message.success { border-color: rgba(124, 207, 155, .5); }
html body .message.success > *:first-child:before { color: var(--ok); }
html body .message.error { border-color: rgba(255, 107, 74, .55); }
html body .message.error > *:first-child:before { color: var(--signal); }
html body .message.warning,
html body .message.notice { border-color: rgba(236, 200, 120, .45); }

/* Modale und Popups (Anmeldung, Newsletter, Quickview) */
html body .modal-popup .modal-inner-wrap,
html body .modal-slide .modal-inner-wrap,
html body .fancybox-skin,
html body .fancybox-wrap .fancybox-inner {
    background: var(--ink-2);
    color: var(--chalk);
    border-radius: var(--r-l);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
html body .modal-popup .modal-title,
html body .modal-slide .modal-title { color: var(--chalk); border-color: var(--rule); font-weight: 700; }
html body .modal-header,
html body .modal-footer { border-color: var(--rule); }
html body .modal-popup .action-close:before,
html body .modal-slide .action-close:before { color: var(--steel-3); }
html body .modals-overlay,
html body ._has-modal .modals-overlay { background: rgba(5, 6, 7, .72); }

/* Ladeanzeige */
html body .loading-mask { background: rgba(12, 13, 14, .55); }

/* Cookie-Hinweis */
html body .message.global.cookie {
    border: 1px solid var(--rule);
    border-radius: var(--r-l);
    background: var(--ink-2);
    color: var(--chalk);
    box-shadow: var(--shadow-lift);
}

/* CMS-Seiten (Lieferung, AGB, Widerruf ...) */
html body.cms-page-view:not(.sh-about-page) .column.main {
    max-width: 72ch;
    color: var(--steel-3);
    font-size: 16px;
    line-height: 1.7;
}
html body.cms-page-view:not(.sh-about-page) .column.main h2,
html body.cms-page-view:not(.sh-about-page) .column.main h3 { margin: 40px 0 12px; color: var(--chalk); }
html body.cms-page-view:not(.sh-about-page) .column.main a { color: var(--chalk); text-decoration: underline; }
html body.cms-page-view:not(.sh-about-page) .column.main strong { color: var(--chalk); }


/* 13  Fusszeile =========================================================== */

html body .page-footer,
html body .footer,
html body .footer-middle,
html body .footer-bottom,
html body .page-footer .footer-middle,
html body .page-footer .footer-bottom {
    background: var(--ink);
    color: var(--steel-2);
    border: 0;
}
html body .page-footer { margin-top: 0; border-top: 1px solid var(--rule); }
html body .footer-middle { padding: 72px 0 40px; }
html body .footer .block-title,
html body .footer .block-title strong,
html body .footer h4,
html body .footer .footer-middle h2,
html body .footer-middle .block .block-title {
    margin-bottom: 18px;
    color: var(--chalk);
    font-family: var(--text);
    font-size: 12px;
    font-weight: 700;
    font-stretch: 88%;
    letter-spacing: .12em;
    text-transform: uppercase;
}
html body .footer a,
html body .footer-middle a,
html body .footer .links a { color: var(--steel-3); text-decoration: none; }
html body .footer a:hover,
html body .footer-middle a:hover { color: var(--chalk); }
html body .footer ul.links li,
html body .footer .features li,
html body .footer-middle ul li { padding: 4px 0; }
html body .footer-middle ul li:before,
html body .footer .links li:before,
html body .footer .features li:before { color: var(--steel-1); }
html body .footer p,
html body .footer .contact-info p,
html body .footer span { color: var(--steel-2); }
html body .footer .contact-info em { color: var(--steel-3); }
html body .footer .contact-info b,
html body .footer .contact-info strong { color: var(--steel-3); }

/* Newsletter: Kreidefeld plus Knopf als ein Bauteil */
html body .footer .block.newsletter,
html body .footer .newsletter { max-width: 420px; }
html body .footer .block.newsletter .form.subscribe { display: flex; gap: 0; }
html body .footer .block.newsletter .field { flex: 1 1 auto; margin: 0; }
html body .footer .block.newsletter .control:before { display: none; }
html body .footer .block.newsletter input {
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0 16px;
    border-radius: var(--r-s) 0 0 var(--r-s);
    background: var(--chalk);
    color: var(--ink);
}
html body .footer .block.newsletter .actions { display: block; margin: 0; width: auto; }
html body .footer .block.newsletter .action.subscribe {
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid var(--chalk);
    border-radius: 0 var(--r-s) var(--r-s) 0;
    background: var(--ink);
    color: var(--chalk);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html body .footer .block.newsletter .action.subscribe:hover { background: var(--chalk); color: var(--ink); }

/* Band "Deutschlands Original -- seit 10 Jahren": statt Handschrift auf
   Schraegband ein gestempeltes Etikett in der Hausschrift */
html body .footer-ribbon,
html body .footer .footer-ribbon {
    position: static;
    display: inline-block;
    margin: 0 0 36px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}
html body .footer-ribbon:before,
html body .footer-ribbon:after { display: none; }
html body .footer-ribbon span,
html body .footer-ribbon a {
    display: inline-block;
    color: var(--chalk);
    font-family: var(--display);
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: 0;
    text-transform: uppercase;
}

html body .footer-bottom {
    padding: 22px 0 28px;
    border-top: 1px solid var(--rule);
    color: var(--steel-2);
    font-size: 12px;
}
html body .footer-bottom address { color: var(--steel-2); }
html body .footer-bottom .social-icons a {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--steel-3);
}
html body .footer-bottom .social-icons a:hover { background: transparent; border-color: var(--chalk); color: var(--chalk); }
html body .footer-bottom .social-icons a em,
html body .footer-bottom .social-icons a i { color: inherit; }
/* Zahlungslogos: farbig auf Weiss -- in einer ruhigen Reihe als Stahlplatten */
html body .footer-bottom .custom-block img {
    max-height: 30px;
    border-radius: 4px;
    filter: grayscale(1) contrast(1.05);
    opacity: .85;
    transition: filter var(--t-med) ease, opacity var(--t-med) ease;
}
html body .footer-bottom .custom-block img:hover { filter: none; opacity: 1; }

/* Nach-oben-Knopf */
html body #totop {
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    background: rgba(12, 13, 14, .7);
    color: var(--chalk);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


/* 14  Startseite ========================================================== */

html body.sh-home .page-main { max-width: none; padding: 0 0 40px; }
html body.sh-home .column.main { padding: 0; float: none; width: 100%; }
html body.sh-home .page-wrapper > .breadcrumbs { display: none; }

.sh-home-root {
    --sh-wrap: var(--wrap);
    color: var(--chalk);
}
.sh-home-root > * {
    max-width: var(--sh-wrap);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Hero ---------------------------------------------------------------- */
.sh-home-root > .sh-hero {
    position: relative;
    display: grid;
    align-items: end;
    max-width: none;
    min-height: min(88svh, 860px);
    padding-top: 0;
    padding-bottom: clamp(40px, 7vh, 88px);
    overflow: hidden;
    isolation: isolate;
    background: var(--ink);
}
.sh-hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.sh-hero-media picture { display: contents; }
/* Hochformat-Foto rechts; zur Schrift hin laeuft es ueber eine Maske ins
   Schwarz aus -- der Text steht nie auf hellen Bildstellen (Haar, Arme). */
.sh-hero-media img {
    position: absolute;
    right: 0;
    top: 0;
    width: min(56%, 900px);
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 18%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
    animation: sh-hero-img 1600ms var(--ease-out) both;
}
/* Boden: unten laeuft das Bild in den Seitengrund aus */
.sh-hero-media:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--ink) 0%, rgba(12, 13, 14, 0) 30%);
}
.sh-hero-copy {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.sh-hero-title {
    margin: 0 0 22px;
    color: var(--chalk);
    font-family: var(--display);
    font-size: clamp(60px, 13vw, 168px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
/* Maske fuer das Einblenden. Oben Luft fuer Umlaut-Punkte (Ü), die ueber
   die Versalhoehe hinausragen -- sonst schnitte die Maske sie ab. */
.sh-line { display: block; overflow: hidden; padding: .1em 0 .02em; margin-top: -.1em; }
.sh-line > span { display: inline-block; animation: sh-rise 1100ms var(--ease-out) both; }
.sh-line:nth-child(2) > span { animation-delay: 90ms; }
.sh-line:nth-child(3) > span { animation-delay: 180ms; }
.sh-hero-lede {
    max-width: 34ch;
    margin: 0 0 30px;
    color: var(--steel-3);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.55;
    animation: sh-fade 900ms 380ms var(--ease-out) both;
}
.sh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    animation: sh-fade 900ms 480ms var(--ease-out) both;
}
html body .sh-hero-actions .sh-btn { min-height: 54px; padding: 0 28px; }

@media (max-width: 767px) {
    /* Mobil: Bild und Text gestapelt. Der Text greift nur in den unteren,
       bereits ins Schwarz ausgeblendeten Teil des Bildes. */
    .sh-home-root > .sh-hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 0 0 36px;
    }
    .sh-hero-media {
        position: relative;
        inset: auto;
        z-index: 0;
        height: min(64svh, 560px);
    }
    .sh-hero-media img {
        width: 100%;
        height: 100%;
        object-position: 50% 14%;
        -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    }
    .sh-hero-copy { position: relative; z-index: 1; margin-top: -64px; }
    .sh-hero-media:after { background: none; }
    .sh-hero-title { font-size: clamp(56px, 16.5vw, 96px); }
    .sh-hero-actions .sh-btn { flex: 1 1 auto; }
}

/* Faktenleiste: feste Zellen, Linien sind die Komposition ------------- */
.sh-home-root > .sh-facts {
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--wrap) - 2 * var(--gutter));
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding-top: 0;
    padding-bottom: 0;
}
.sh-facts > li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 22px 0 22px 22px;
    border-left: 1px solid var(--rule);
}
.sh-facts > li:first-child { border-left: 0; padding-left: 0; }
.sh-fact-key {
    color: var(--steel-2);
    font-size: 11px;
    font-weight: 600;
    font-stretch: 88%;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sh-fact-val {
    color: var(--chalk);
    font-family: var(--display);
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
@media (max-width: 767px) {
    .sh-home-root > .sh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-facts > li:nth-child(3) { border-left: 0; padding-left: 0; }
    .sh-facts > li:nth-child(n+3) { border-top: 1px solid var(--rule); }
    .sh-facts > li { padding: 18px 0 18px 18px; }
}

/* Abschnitte ---------------------------------------------------------- */
.sh-home-root > .sh-section { padding-top: clamp(72px, 10vw, 128px); }
.sh-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}
html body .sh-h2 {
    margin: 0;
    color: var(--chalk);
    font-family: var(--display);
    font-size: clamp(52px, 8vw, 112px);
    font-weight: 900;
    line-height: .85;
    letter-spacing: -.005em;
    text-transform: uppercase;
}
html body a.sh-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    color: var(--steel-3);
    font-size: 13px;
    font-weight: 600;
    font-stretch: 88%;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
html body a.sh-more:after {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    transform-origin: left;
    transition: transform var(--t-med) var(--ease-out);
}
html body a.sh-more:hover { color: var(--chalk); }
html body a.sh-more:hover:after { transform: scaleX(1.65); }

/* Produktraster und Karten -------------------------------------------- */
.sh-grid,
.sh-rail { list-style: none; margin: 0; padding: 0; }
.sh-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 14px;
}
@media (min-width: 768px) { .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 20px; } }
@media (min-width: 1100px) { .sh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sh-card { margin: 0; min-width: 0; }

/* Schiene "Neu": seitlich, einrastend */
.sh-home-root > .sh-section:has(.sh-rail) { max-width: none; padding-right: 0; }
.sh-home-root > .sh-section:has(.sh-rail) { padding-left: 0; }
.sh-home-root > .sh-section:has(.sh-rail) > .sh-section-head {
    max-width: var(--wrap);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--gutter);
}
.sh-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(220px, 26vw, 320px);
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    padding-bottom: 18px;
    padding-right: var(--gutter);
    scrollbar-width: thin;
}
.sh-rail > .sh-card { scroll-snap-align: start; }
.sh-rail .sh-card-plinth { aspect-ratio: 3 / 4; }
@media (max-width: 767px) {
    .sh-rail { grid-auto-columns: 62vw; gap: 12px; }
}

/* Trinity: ein Feld Farbe, aus dem Foto, nicht aus der Palette -------- */
.sh-home-root > .sh-feature {
    position: relative;
    display: grid;
    align-items: center;
    max-width: none;
    min-height: clamp(460px, 62vw, 720px);
    margin-top: clamp(72px, 10vw, 128px);
    padding-top: 64px;
    padding-bottom: 64px;
    overflow: hidden;
    isolation: isolate;
}
.sh-feature-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 72% 50%;
}
.sh-feature:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(12, 13, 14, .78) 0%, rgba(12, 13, 14, .35) 42%, rgba(12, 13, 14, 0) 64%);
}
.sh-feature-copy {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
html body .sh-feature-title {
    margin: 0 0 10px;
    color: var(--chalk);
    font-family: var(--display);
    font-size: clamp(80px, 14vw, 200px);
    font-weight: 900;
    line-height: .82;
    text-transform: uppercase;
}
.sh-feature-copy p {
    margin: 0 0 28px;
    color: var(--chalk);
    font-size: 18px;
    max-width: 30ch;
}
@media (max-width: 767px) {
    .sh-home-root > .sh-feature { align-items: end; }
    .sh-feature:after { background: linear-gradient(0deg, rgba(12, 13, 14, .85) 0%, rgba(12, 13, 14, .2) 55%, rgba(12, 13, 14, 0) 75%); }
    .sh-feature-img { object-position: 78% 50%; }
}

/* Sortiment: eine Tafel aus Zeilen wie die Ablage im Hantelregal ------
   Schrift in Kreide, rechts ein festes Vorschaubild je Zeile. Kein Bild
   folgt dem Zeiger, nichts liegt ueber der Schrift. */
.sh-rack {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.sh-rack-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto clamp(72px, 8vw, 104px);
    align-items: center;
    gap: 12px 28px;
    margin: 0;
    padding: clamp(12px, 1.6vw, 18px) 0;
    border-bottom: 1px solid var(--rule);
}
html body .sh-rack-link {
    display: inline-flex;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    min-width: 0;
    color: var(--chalk);
    text-decoration: none;
}
.sh-rack-label {
    font-family: var(--display);
    font-size: clamp(44px, 6.4vw, 96px);
    font-weight: 900;
    line-height: .9;
    text-transform: uppercase;
    transition: transform var(--t-med) var(--ease-out);
}
.sh-rack-arrow {
    flex: 0 0 auto;
    width: clamp(24px, 2.6vw, 36px);
    height: auto;
    color: var(--steel-2);
    transform: translateX(-6px);
    opacity: 0;
    transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) ease, color var(--t-fast) ease;
}
html body .sh-rack-link:hover .sh-rack-label,
html body .sh-rack-link:focus-visible .sh-rack-label { transform: translateX(8px); }
html body .sh-rack-link:hover .sh-rack-arrow,
html body .sh-rack-link:focus-visible .sh-rack-arrow { opacity: 1; transform: translateX(8px); color: var(--chalk); }
.sh-rack-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sh-rack-sub li { margin: 0; }
html body .sh-rack-sub a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    color: var(--chalk);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
html body .sh-rack-sub a:hover { border-color: var(--chalk); background: rgba(236, 235, 230, .06); color: var(--chalk); }
html body .sh-rack-thumb {
    grid-column: 3;
    display: block;
    overflow: hidden;
    border-radius: var(--r-m);
    background: var(--plinth);
    aspect-ratio: 1;
}
.sh-rack-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform var(--t-slow) var(--ease-out);
}
.sh-rack-row:hover .sh-rack-thumb img { transform: scale(1.08); }
@media (max-width: 767px) {
    .sh-rack-row {
        grid-template-columns: minmax(0, 1fr) 64px;
        grid-template-areas: "label thumb" "sub sub";
        gap: 10px 14px;
        padding: 16px 0 18px;
    }
    html body .sh-rack-link { grid-area: label; }
    .sh-rack-sub { grid-area: sub; justify-content: flex-start; }
    html body .sh-rack-thumb { grid-area: thumb; grid-column: auto; }
    .sh-rack-arrow { opacity: 1; transform: none; width: 22px; }
    .sh-rack-label { font-size: clamp(36px, 11vw, 52px); }
}

/* Instagram ----------------------------------------------------------- */
.sh-home-root > .sh-insta { padding-top: clamp(72px, 10vw, 128px); }
.sh-insta-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sh-insta-grid li { margin: 0; }
.sh-insta-grid a {
    display: block;
    overflow: hidden;
    border-radius: var(--r-m);
    background: var(--ink-3);
    aspect-ratio: 1;
}
.sh-insta-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.85) contrast(1.05);
    transition: filter var(--t-med) ease, transform var(--t-slow) var(--ease-out);
}
.sh-insta-grid a:hover img,
.sh-insta-grid a:focus-visible img { filter: none; transform: scale(1.05); }
@media (max-width: 767px) {
    .sh-insta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}

/* Fuss der Startseite ohne Doppelabstand */
html body.sh-home .page-footer { margin-top: clamp(72px, 10vw, 128px); }



/* 15a  Portos Farbreste ===================================================
   Porto setzt Text an vielen Stellen fest auf #222529/#000 -- mit Selektoren,
   die tiefer verschachtelt sind als alles hier. Statt jede Kette
   nachzubauen, gewinnen diese Farben gezielt mit !important. Nur Farbe,
   keine Masse. */

html body .cart.table-wrapper .items thead th,
html body .cart.table-wrapper .items thead th span { color: var(--steel-2) !important; }
html body .cart.table-wrapper .price,
html body .cart.table-wrapper .cart-price .price,
html body .cart-totals .price,
html body .cart-totals th,
html body .cart-totals th strong,
html body .cart-totals td,
html body .cart-totals .grand strong,
html body .table-totals .price,
html body .table-totals th,
html body .table-totals td,
html body .opc-block-summary .price,
html body .minicart-items .price { color: var(--chalk) !important; }
html body .cart-totals tr:not(.grand) th,
html body .cart-totals tr:not(.grand) td .price { color: var(--steel-3) !important; font-size: 14px; }

html body .cart-summary .checkout-methods-items .action.primary.checkout,
html body .cart-summary .action.primary.checkout {
    background: var(--chalk) !important;
    border-color: var(--chalk) !important;
    color: var(--ink) !important;
}
html body .cart-summary .action.primary.checkout:hover { background: #fff !important; }
html body .cart-summary .action.primary.checkout span,
html body .cart-summary .action.primary.checkout:after,
html body .cart-summary .action.primary.checkout:before { color: inherit !important; }
html body .cart-summary .action.multicheckout { color: var(--steel-3); font-size: 13px; }

html body .block.discount .action.apply,
html body .block.discount .action.apply.primary,
html body .block.discount .action.cancel {
    background: transparent !important;
    border: 1px solid var(--rule-2) !important;
    color: var(--chalk) !important;
}
html body .block.discount .action.apply:hover { border-color: var(--chalk) !important; }
html body .block.discount .fieldset.coupon { display: flex; gap: 8px; align-items: stretch; }
html body .block.discount .fieldset.coupon .field { flex: 1 1 auto; margin: 0; }
html body .cart-discount { border: 0; }
html body .cart-discount .block > .title,
html body .cart-discount .block > .title strong { color: var(--steel-3); border: 0; }

/* Mengenfeld im Warenkorb: Feld und Pfeile sind Geschwister */
html body .cart.table-wrapper .col.qty .field.qty {
    display: inline-flex;
    align-items: stretch;
    height: 46px;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-s);
    overflow: hidden;
}
html body .cart.table-wrapper .col.qty .field.qty .control.qty { order: 2; display: block; height: 100%; }
html body .cart.table-wrapper .col.qty .control input.qty { width: 46px; height: 44px; min-height: 0; padding: 0; text-align: center; font-weight: 700; }
html body .cart.table-wrapper .col.qty .qty-changer { display: contents; }
html body .cart.table-wrapper .col.qty .qty-changer .qty-dec { order: 1; }
html body .cart.table-wrapper .col.qty .qty-changer .qty-inc { order: 3; }
html body .cart.table-wrapper .item-actions .action:before,
html body .cart.table-wrapper .action-towishlist:before { color: var(--steel-3) !important; }

html body .message a,
html body .messages .message a { color: var(--chalk) !important; text-decoration: underline; }

/* Seitenleiste */
html body .sidebar .block-title strong,
html body .sidebar .filter-title strong,
html body .sidebar .block.filter .block-title strong,
html body .sidebar .filter-options-title,
html body .sidebar .filter-subtitle { color: var(--chalk) !important; }
html body .sidebar .block.filter .block-title strong {
    font-family: var(--display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
html body .sidebar .product-item-details a,
html body .sidebar .product-item-details .product-item-link,
html body .sidebar .product.name a { color: var(--chalk) !important; font-size: 14px; }
html body .sidebar .price,
html body .sidebar .price-box .price { color: var(--chalk) !important; font-size: 15px !important; font-weight: 700; }
html body .sidebar .filter-options-content .item a,
html body .sidebar .filter-options-content a { color: var(--steel-3) !important; }
html body .sidebar .filter-options-content a:hover { color: var(--chalk) !important; }

/* Fusszeile: Porto setzt die Spaltenkoepfe mit eigener Laufweite */
html body .page-footer .footer-middle .block .block-title,
html body .page-footer .footer-middle .block .block-title strong {
    color: var(--chalk) !important;
    font-family: var(--text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-stretch: 88%;
    letter-spacing: .12em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}
html body .page-footer .footer-middle .block { margin-bottom: 36px; }

/* Produktseite: Teilen-Symbole etwas heller, Reiter-Abstand */
html body .product-social-links .share-links a:before,
html body .product-social-links .product-addto-links a:before { color: var(--chalk-dim) !important; }


/* 15b  Kleine Liste "Empfohlen" in der Seitenleiste =======================
   Porto baut sie als .products-grid.small-list in ein Owl-Karussell. Die
   Raster- und Plinthenregeln oben gelten ihr nicht: Bild links, Text rechts. */

html body .products-grid.small-list .product-items { display: block; gap: 0; }
html body .products-grid.small-list .product-item { margin: 0 0 14px !important; }
html body .products-grid.small-list .product-item-info {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 14px;
    align-items: center;
}
html body .products-grid.small-list .product-item .product-item-photo {
    width: 76px;
    aspect-ratio: 1;
    border-radius: var(--r-m);
}
html body .products-grid.small-list .product-item-details { padding: 0; }
html body .products-grid.small-list .product-item-details > a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--chalk) !important;
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
}
html body .products-grid.small-list .price-box { margin: 4px 0 0; }
html body .products-grid.small-list .price-details,
html body .products-grid.small-list .product-reviews-summary { display: none !important; }
html body .sidebar strong,
html body .sidebar .block.filter > .title strong { color: var(--chalk) !important; }
html body .sidebar .block.filter > .title strong {
    font-family: var(--display);
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
}
html body .sidebar .block.filter .content .subtitle,
html body .sidebar .block.filter .filter-subtitle { color: var(--steel-2) !important; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* Mengenfelder: Porto setzt die Pfeilgruppe als Block -- sie wird aufgeloest */
html body .product-info-main .box-tocart .field.qty .qty-changer,
html body .cart.table-wrapper .col.qty .qty-changer { display: contents !important; }
html body .product-info-main .box-tocart .field.qty .control { display: flex !important; }
html body .product-info-main .box-tocart .field.qty .control input#qty { order: 2; }
html body .product-info-main .box-tocart .field.qty .qty-changer .qty-dec { order: 1; }
html body .product-info-main .box-tocart .field.qty .qty-changer .qty-inc { order: 3; }
html body .cart.table-wrapper .col.subtotal .cart-price .price,
html body .cart.table-wrapper .col.price .cart-price .price { color: var(--chalk) !important; }


/* 15c  IWD-Checkout ========================================================
   Das Modul faerbt fast jeden Text fest #1c1c1c und laesst Felder
   durchsichtig mit schwarzer Schrift -- auf Schwarz unlesbar. Text erbt hier
   die Kreide, Felder werden wie ueberall Kreidefelder. Anordnung und
   Verhalten bleiben unberuehrt. */

html body .iwd_opc_wrapper { color: var(--chalk); }
html body .iwd_opc_wrapper :is(span, div, p, label, strong, b, em, td, th, li, h1, h2, h3, h4, legend, dt, dd) { color: inherit !important; }
html body .iwd_opc_wrapper a:not(.action) { color: var(--chalk) !important; text-decoration: underline; text-underline-offset: .2em; }
html body .iwd_opc_wrapper .label,
html body .iwd_opc_wrapper label.label,
html body .iwd_opc_wrapper .iwd_opc_column_title,
html body .iwd_opc_wrapper .shipping-method .col-carrier,
html body .iwd_opc_wrapper .checkout-agreement label { color: var(--steel-3) !important; }

html body .iwd_opc_wrapper .iwd_opc_column_name,
html body .iwd_opc_wrapper .secure-title > span,
html body .iwd_opc_wrapper .opc-block-summary .title {
    color: var(--chalk) !important;
    font-family: var(--display) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

html body .iwd_opc_wrapper input.input-text,
html body .iwd_opc_wrapper input[type="text"],
html body .iwd_opc_wrapper input[type="email"],
html body .iwd_opc_wrapper input[type="tel"],
html body .iwd_opc_wrapper input[type="password"],
html body .iwd_opc_wrapper select,
html body .iwd_opc_wrapper textarea {
    border: 1px solid transparent !important;
    border-radius: var(--r-s) !important;
    background-color: var(--chalk) !important;
    color: var(--ink) !important;
}
html body .iwd_opc_wrapper input::placeholder,
html body .iwd_opc_wrapper textarea::placeholder { color: #565c62 !important; }
html body .iwd_opc_wrapper input:focus,
html body .iwd_opc_wrapper select:focus,
html body .iwd_opc_wrapper textarea:focus {
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(236, 235, 230, .35) !important;
}
html body .iwd_opc_wrapper .field .label + .control input.input-text { margin-top: 0; }

html body .iwd_opc_wrapper .action.primary.checkout,
html body .iwd_opc_wrapper button.action.primary {
    background: var(--chalk) !important;
    border-color: var(--chalk) !important;
    color: var(--ink) !important;
}
html body .iwd_opc_wrapper .action.primary.checkout:hover { background: #fff !important; }
html body .iwd_opc_wrapper .action.primary.checkout :is(span, em, i),
html body .iwd_opc_wrapper .action.primary.checkout:before { color: var(--ink) !important; }

html body .iwd_opc_wrapper .info-block { background: transparent !important; }
html body .iwd_opc_wrapper .payment-method,
html body .iwd_opc_wrapper .shipping-method,
html body .iwd_opc_wrapper .iwd_opc_shipping_method,
html body .iwd_opc_wrapper .payment-method-title { border-color: var(--rule-2) !important; background: transparent !important; }
html body .iwd_opc_wrapper .payment-method._active,
html body .iwd_opc_wrapper .payment-method._active .payment-method-title { border-color: var(--chalk) !important; }
html body .iwd_opc_wrapper .opc-block-summary { background: var(--ink-2) !important; }
html body .iwd_opc_wrapper .opc-block-summary .product-item-name { color: var(--chalk) !important; }


/* IWD-Feinheiten: Platzhalter, Selectize-Laenderfeld, aktive Kacheln.
   Das Modul setzt hier Selektoren ueber #checkout -- daher dieselbe ID. */
html body #checkout input::placeholder,
html body #checkout textarea::placeholder { color: #61676d !important; opacity: 1 !important; }
html body #checkout input::-webkit-input-placeholder { color: #61676d !important; opacity: 1 !important; }

html body #checkout .selectize-control .selectize-input,
html body #checkout .selectize-control .selectize-input.full,
html body #checkout .selectize-control .selectize-input.input-active {
    min-height: 48px;
    border: 1px solid transparent !important;
    border-radius: var(--r-s) !important;
    background: var(--chalk) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}
html body #checkout .selectize-control .selectize-input .item { color: var(--ink) !important; }
html body #checkout .selectize-dropdown {
    border: 0 !important;
    border-radius: var(--r-s) !important;
    background: var(--chalk) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-lift) !important;
}
html body #checkout .selectize-dropdown .option { color: var(--ink) !important; }
html body #checkout .selectize-dropdown .option.active { background: #fff !important; }

html body #checkout button.action.primary,
html body #checkout button.action.primary.checkout,
html body #checkout .payment-method-content .actions-toolbar .primary button.action.primary.checkout {
    background: var(--chalk) !important;
    background-image: none !important;
    border: 1px solid var(--chalk) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}
html body #checkout button.action.primary:hover { background: #fff !important; }
html body #checkout button.action.primary :is(span, i, em),
html body #checkout button.action.primary:before,
html body #checkout button.action.primary:after { color: var(--ink) !important; }

html body #checkout .table-checkout-shipping-method tbody,
html body #checkout .table-checkout-shipping-method tbody._active { border-color: var(--rule-2) !important; }
html body #checkout .table-checkout-shipping-method tbody._active { border-color: var(--chalk) !important; }
html body #checkout input[type="radio"],
html body #checkout input[type="checkbox"] { accent-color: var(--chalk); }


/* Schwebende Beschriftungen: IWD legt sie als span.floating-span UNTER das
   Feld (das Feld hat z-index 1). Bei deckenden Kreidefeldern waeren sie
   verdeckt -- sie wandern nach oben und lassen Klicks durch. */
html body #checkout .field .control .floating-span {
    z-index: 2 !important;
    pointer-events: none;
    color: #5d646a !important;
}

/* Bestellknopf des Moduls (eigene Klasse, nicht .action.primary) */
html body #checkout .iwd_opc_place_order_button,
html body #checkout button.iwd_opc_button.active.primary {
    background: var(--chalk) !important;
    border: 1px solid var(--chalk) !important;
    border-radius: var(--r-s) !important;
    color: var(--ink) !important;
    font-family: var(--text) !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    box-shadow: none !important;
}
html body #checkout .iwd_opc_place_order_button:hover { background: #fff !important; }
html body #checkout .iwd_opc_place_order_button :is(span, i, em),
html body #checkout .iwd_opc_place_order_button:before,
html body #checkout .iwd_opc_place_order_button:after { color: var(--ink) !important; }

/* Aktive Versandart: Rahmen liegt auf tbody und tr */
html body #checkout .table-checkout-shipping-method tbody._active,
html body #checkout .table-checkout-shipping-method tbody._active tr { border-color: var(--chalk) !important; }
html body #checkout .table-checkout-shipping-method tbody,
html body #checkout .table-checkout-shipping-method tbody tr { border-color: var(--rule-2) !important; }

/* Mengen-Stepper: Porto blendet seine Pfeil-Icons aus; Plus und Minus
   werden als zwei feine Balken gezeichnet */
html body .box-tocart .field.qty .qty-changer a,
html body .cart.table-wrapper .col.qty .qty-changer a { position: relative !important; font-size: 0 !important; }
html body .box-tocart .field.qty .qty-changer a:before,
html body .box-tocart .field.qty .qty-changer a.qty-inc:after,
html body .cart.table-wrapper .col.qty .qty-changer a:before,
html body .cart.table-wrapper .col.qty .qty-changer a.qty-inc:after {
    content: "" !important;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.5px;
    margin: 0;
    border: 0;
    background: currentColor;
    transform: translate(-50%, -50%);
}
html body .box-tocart .field.qty .qty-changer a.qty-inc:after,
html body .cart.table-wrapper .col.qty .qty-changer a.qty-inc:after { transform: translate(-50%, -50%) rotate(90deg); }
html body .box-tocart .field.qty .qty-changer a.qty-dec:after,
html body .cart.table-wrapper .col.qty .qty-changer a.qty-dec:after { content: none !important; }
html body .box-tocart .field.qty .control input#qty { flex: 1 1 auto; min-width: 40px; }
html body .box-tocart .field.qty .control { width: 136px; }

/* Werkzeugleiste mobil: Porto hinterlegt sie hellgrau */
html body .toolbar.toolbar-products,
html body .page-products .toolbar.toolbar-products { background: transparent !important; }
html body .porto-product-filters-toggle,
html body .toolbar .porto-product-filters-toggle {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--rule-2) !important;
    border-radius: var(--r-s);
    background: transparent !important;
    color: var(--chalk) !important;
    font-size: 13px;
    font-weight: 600;
    align-items: center;
    gap: 6px;
}
html body .porto-product-filters-toggle span { color: var(--chalk) !important; }
html body .porto-product-filters-toggle svg { width: 20px; height: 20px; }
html body .porto-product-filters-toggle svg * { stroke: var(--chalk) !important; fill: none; }
html body .porto-product-filters-toggle svg .cls-3 { fill: var(--chalk) !important; stroke: none !important; }


/* Laenderfeld (Selectize): die schwebende Beschriftung weicht, sobald ein
   Land gewaehlt ist -- sonst laegen "Land" und "Deutschland" uebereinander */
html body #checkout .field:has(.selectize-input.has-items) .floating-span { display: none !important; }
html body #checkout.iwd_opc_wrapper #checkout-shipping-method-load .table-checkout-shipping-method tbody,
html body #checkout.iwd_opc_wrapper #checkout-shipping-method-load .table-checkout-shipping-method tbody tr { border-color: var(--rule-2) !important; }
html body #checkout.iwd_opc_wrapper #checkout-shipping-method-load .table-checkout-shipping-method tbody._active,
html body #checkout.iwd_opc_wrapper #checkout-shipping-method-load .table-checkout-shipping-method tbody._active tr { border-color: var(--chalk) !important; }


/* Newsletter-Popup: Porto hinterlegt ein helles Demofoto. Auf dem Foto
   waere Kreideschrift unsichtbar -- das Popup wird Teil der dunklen Welt. */
html body #newsletter_popup {
    max-width: calc(100vw - 32px);
    padding: 40px 36px !important;
    border-radius: var(--r-l);
    background: var(--ink-2) !important;
    background-image: none !important;
    color: var(--steel-3);
}
html body #newsletter_popup > [class*="col-"] { flex: 1 1 100%; max-width: 100%; padding: 0; }
html body #newsletter_popup img { height: 56px; width: auto; filter: invert(1) brightness(1.7); }
html body #newsletter_popup h2 {
    margin: 0 0 10px;
    color: var(--chalk) !important;
    font-family: var(--display) !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    line-height: .9 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
}
html body #newsletter_popup p,
html body #newsletter_popup label { color: var(--steel-3) !important; font-size: 15px; line-height: 1.55; }
html body #newsletter_popup .form.subscribe { display: flex; gap: 0; margin: 22px 0 14px; }
html body #newsletter_popup .field.newsletter { flex: 1 1 auto; margin: 0; }
html body #newsletter_popup input[type="email"] {
    width: 100%;
    height: 52px;
    border-radius: var(--r-s) 0 0 var(--r-s) !important;
    background: var(--chalk) !important;
    color: var(--ink) !important;
}
html body #newsletter_popup .action.subscribe {
    height: 52px;
    min-height: 52px;
    border-radius: 0 var(--r-s) var(--r-s) 0 !important;
}
html body #newsletter_popup .checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13px !important; }
html body .fancybox-skin { padding: 0 !important; background: var(--ink-2) !important; }
html body .fancybox-close,
html body .fancybox-item.fancybox-close { filter: invert(1); opacity: .8; }


/* Haftende Kopfzeile. Portos eigene ist in der Konfiguration aus; hier
   bleibt der Kopf stehen und wird beim Scrollen schlanker (silberhirt.js
   setzt .sh-scrolled). Im Checkout bleibt er, wie er ist. */
html body:not(.onepage-index-index):not(.checkout-index-index) .page-header {
    position: sticky;
    top: 0;
    transition: background var(--t-med) ease, box-shadow var(--t-med) ease;
}
html.sh-scrolled body:not(.onepage-index-index):not(.checkout-index-index) .page-header {
    background: rgba(12, 13, 14, .86);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    backdrop-filter: saturate(140%) blur(18px);
    box-shadow: 0 1px 0 var(--rule);
}
html.sh-scrolled body .page-header .nav-sections { background: transparent; }
@media (min-width: 992px) {
    html.sh-scrolled body:not(.onepage-index-index) .page-header .header.content { min-height: 58px; padding-top: 6px; padding-bottom: 6px; }
    html.sh-scrolled body:not(.onepage-index-index) .page-header .logo img { height: 36px; }
}
html body.sh-home .page-header { margin-bottom: 0; }

/* Mobiles Menue: Reiter "Menue" / "Konto" */
@media (max-width: 991px) {
    html body .nav-sections .nav-sections-item-title {
        background: var(--ink-2) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--rule) !important;
    }
    html body .nav-sections .nav-sections-item-title.active {
        background: var(--ink) !important;
        border-bottom: 2px solid var(--chalk) !important;
    }
    html body .nav-sections .nav-sections-item-title a,
    html body .nav-sections .nav-sections-item-title .nav-sections-item-switch {
        color: var(--steel-3) !important;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    html body .nav-sections .nav-sections-item-title.active a { color: var(--chalk) !important; }
    html body .nav-sections .nav-sections-item-title a:before { color: inherit !important; }
    html body .nav-sections .header.links a,
    html body .nav-sections .header.links li { color: var(--chalk) !important; border-color: var(--rule) !important; background: transparent; }
}

/* Popup: Feld und Knopf als eine Zeile */
html body #newsletter_popup .form.subscribe { align-items: stretch; }
html body #newsletter_popup .field.newsletter,
html body #newsletter_popup .field.newsletter .control,
html body #newsletter_popup .actions { margin: 0 !important; padding: 0 !important; }
html body #newsletter_popup input[type="email"] { margin: 0 !important; display: block; }
html body #newsletter_popup input::placeholder { color: #61676d !important; }
html body #newsletter_popup .actions .action.subscribe { margin: 0 !important; height: 52px !important; }


/* Dunkle Plinthe fuer Fotos mit schwarzem Grund (silberhirt.js misst) */
html body .sh-plinth-dark,
html body .products-grid .product-item .product-item-photo.sh-plinth-dark { background: #000; }
html body .sh-plinth-dark img,
html body .products-grid .product-item .product-item-photo.sh-plinth-dark img {
    mix-blend-mode: normal;
    transform: scale(1.2);
}
html body .sh-card:hover .sh-plinth-dark img,
html body .products-grid .product-item:hover .product-item-photo.sh-plinth-dark img { transform: scale(1.25); }

/* Partnerset mit Video ---------------------------------------------- */
.sh-duo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(28px, 6vw, 96px);
    align-items: center;
}
.sh-duo-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-l);
    background: #0f2a3d;
    aspect-ratio: 562 / 748;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.sh-duo-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sh-duo-copy p {
    max-width: 34ch;
    margin: 18px 0 30px;
    color: var(--steel-3);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.55;
}
.sh-duo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
@media (max-width: 767px) {
    .sh-duo { grid-template-columns: 1fr; }
    .sh-duo-media { max-width: 420px; }
}

/* Gemischte Symbolsysteme: Portos gefuellte Font-Glyphen (Haken, Dreiecke,
   LKW, "$") neben den feinen Liniensymbolen im Kopf -- sie entfallen */
html body .footer-middle ul li:before,
html body .footer-middle ul li > em,
html body .footer-middle ul li > i,
html body .footer .features li:before,
html body .footer .features li > em,
html body .footer .features li > i,
html body .footer .links li:before { display: none !important; }
html body .footer-middle ul li,
html body .footer .features li { padding-left: 0 !important; margin-left: 0 !important; }
html body .custom-block.custom-block-1 > div > em { display: none; }
html body .custom-block.custom-block-1 > div { grid-template-columns: 1fr; }
html body .custom-block.custom-block-1 > div > h3,
html body .custom-block.custom-block-1 > div > p { grid-column: 1; }
/* "Kostenloser Versand" stand doppelt -- als Zeile und als Kasten */
html body.catalog-product-view .sh-hinweis { display: none; }

/* Platzhalter auf Kreidefeldern: mindestens 4.5:1 */
html body input::placeholder,
html body textarea::placeholder { color: #565c62 !important; opacity: 1 !important; }
html body .page-header .block-search input::placeholder { color: var(--steel-2) !important; }

/* Galerie: Vollbild-Knopf von Fotorama war eine weisse Kachel */
html body .product.media .fotorama__fullscreen-icon {
    background-color: rgba(12, 13, 14, .6) !important;
    border-radius: 50%;
    filter: none;
}


/* Adresszeile Land / Ort / PLZ: dem Ort-Feld fehlt bei IWD die Lueck
   (Klasse mr4 = 4 %), dadurch ragte PLZ ueber die Spalte hinaus */
@media (min-width: 768px) {
    html body #checkout .field.wd30-66[name$=".city"] { margin-right: 4% !important; }
    html body #checkout .field.wd30-66[name$=".postcode"] { margin-right: 0 !important; }
}


/* Lesbarkeit -- Funde aus dem Kontrast-Audit (02.10.2026) =============== */

/* "Empfohlen" in der Seitenleiste: die Rasterregel fuer Produktlisten
   (3 Spalten) traf auch das Owl-Karussell und machte es 82 px schmal */
html body .products.wrapper.grid.small-list .product-items,
html body .products-grid.small-list .product-items.owl-carousel {
    display: block !important;
    grid-template-columns: none !important;
}
html body .products-grid.small-list .product-item-info { display: flex !important; gap: 14px; align-items: center; }
html body .products-grid.small-list .product-item .product-item-photo { flex: 0 0 76px; width: 76px !important; height: 76px; }
html body .products-grid.small-list .product-item-details { flex: 1 1 auto; min-width: 0; }
html body .products-grid.small-list .price-box .price { font-size: 15px !important; }

/* Login, Registrieren, Passwort vergessen: Porto setzt #333/#222529 */
html body .login-container .label,
html body .login-container .label span,
html body .form-create-account .label,
html body .form-create-account .label span,
html body .form.password.forget .label,
html body .form.password.forget .label span,
html body .fieldset > .field > .label span { color: var(--steel-3) !important; }
html body .login-container .action.remind,
html body .login-container .action.remind span,
html body .login-container a:not(.action.primary) { color: var(--chalk) !important; text-decoration: underline; text-underline-offset: .2em; }
html body .login-container .block-new-customer .block-content,
html body .login-container .block-customer-login .block-content,
html body .login-container .field.note,
html body .fieldset > .legend span,
html body .field-recaptcha,
html body .login-container p { color: var(--steel-3) !important; }

/* Seitentitel, die Porto dunkel setzt (Suche, Konto, CMS) */
html body .page-title-wrapper .page-title,
html body .page-title-wrapper .page-title .base { color: var(--chalk) !important; }
html body .search.results .message.notice,
html body .search.found,
html body .toolbar-amount .toolbar-number { color: var(--steel-3); }

/* Teilen-Links auf der Produktseite: Symbolknoepfe, der Text ist nur fuer
   Screenreader */
html body .product-social-links .share-links a {
    position: relative;
    font-size: 0 !important;
    color: var(--chalk-dim) !important;
}
html body .product-social-links .share-links a:before { font-size: 14px !important; }

/* Kleine Stahl-Texte etwas heller und groesser */
html body .filter-options-content .count,
html body .filter-options-content .count:before,
html body .filter-options-content .count:after { color: var(--steel-2) !important; }
.sh-fact-key { color: var(--steel-3); font-size: 12px; }
html body .breadcrumbs .items { font-size: 13px; color: var(--steel-3); }
html body .breadcrumbs a,
html body .breadcrumbs .items > li { color: var(--steel-3) !important; }
html body .price-details,
html body .price-details .tax-details,
html body .price-details .shipping-cost-details,
html body .price-details a { color: var(--steel-3) !important; }
html body .footer p,
html body .footer .contact-info p,
html body .footer span,
html body .footer-bottom,
html body .footer-bottom address { color: var(--steel-3) !important; }
html body .toolbar,
html body .toolbar .sorter-label,
html body .toolbar .limiter-label,
html body .toolbar .limiter-text,
html body .toolbar .toolbar-amount { color: var(--steel-3); }

/* Zahlungslogos im Fuss: ein Bild aus dem CMS (mit "Rechnung"). Ersetzt
   durch denselben Streifen ohne die Rechnung-Kachel. */
html body .footer-bottom img[src*="footer/payments.png"] { content: url("../images/payments.png"); width: auto; }

html body .footer .footer-ribbon span,
html body .footer .footer-ribbon a { color: var(--chalk) !important; }


/* Abschluss-Audit 02.10.2026 (Hover, Icons, offene Menues, Popups) ======= */

/* Megamenue: Porto setzt die Untermenue-Texte auf #333 */
html body .navigation .submenu a,
html body .navigation .submenu a span,
html body .navigation.sw-megamenu li.level1 > a,
html body .navigation.sw-megamenu li.level1 > a span,
html body .navigation.sw-megamenu .subchildmenu a span { color: var(--steel-3) !important; }
html body .navigation .submenu a:hover,
html body .navigation .submenu a:hover span { color: var(--chalk) !important; }
html body .navigation.sw-megamenu li.level0.fullwidth .submenu li.level1 > a {
    font-size: 13px;
    font-weight: 700;
    font-stretch: 88%;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Owl-Pfeile (Seitenleiste "Empfohlen" u. a.): Icon-Glyphen in #222529 */
html body .owl-carousel .owl-nav button,
html body .owl-carousel .owl-nav button em,
html body .owl-carousel .owl-nav button span,
html body .owl-carousel .owl-nav [class*="owl-"] em { color: var(--chalk) !important; }
html body .owl-carousel .owl-nav button.disabled,
html body .owl-carousel .owl-nav button.disabled em { color: var(--steel-2) !important; opacity: 1 !important; }
html body .sidebar .owl-carousel .owl-nav button,
html body .sidebar .owl-carousel .owl-nav [class*="owl-"] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    background: transparent !important;
}

/* Suchknopf: Porto hinterlegt Knopf/Huelle weiss */
html body .page-header .block-search .actions,
html body .page-header .block-search .action.search,
html body .page-header .block-search .action.search:hover,
html body .page-header .block-search .action.search:focus { background: transparent !important; box-shadow: none !important; }
html body .page-header .block-search .action.search:hover:before { color: var(--chalk) !important; }

/* Galerie: Vollbild-Symbol */
html body .product.media .fotorama__fullscreen-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(12, 13, 14, .7) !important;
    color: var(--chalk) !important;
}
html body .product.media .fotorama__fullscreen-icon:before,
html body .product.media .fotorama__fullscreen-icon:after { color: var(--chalk) !important; }

/* Schliessen-X (Newsletter-Popup, Fancybox): eigenes Kreuz statt Sprite */
html body .fancybox-close,
html body .fancybox-item.fancybox-close {
    top: 14px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    background: transparent none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
html body .fancybox-close:before,
html body .fancybox-close:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1.6px;
    border-radius: 1px;
    background: var(--chalk);
    transform: translate(-50%, -50%) rotate(45deg) !important;
    rotate: none !important;
    margin: 0 !important;
}
html body .fancybox-close:after { transform: translate(-50%, -50%) rotate(-45deg) !important; }
html body .fancybox-close:hover { border-color: var(--chalk); background: rgba(236, 235, 230, .08) !important; }
/* Modale von Magento (Anmelden, Hinweise): gleiches Kreuz */
html body .modal-popup .action-close,
html body .modal-slide .action-close { color: var(--chalk); }
html body .modal-popup .action-close:before,
html body .modal-slide .action-close:before { color: var(--chalk) !important; }


/* Konto-Seiten: Porto legt den Seitentitel auf ein hellgraues Band */
html body .page-title-wrapper,
html body .page-wrapper > .page-title-wrapper { background: transparent !important; border: 0 !important; }
html body .page-wrapper > .page-title-wrapper {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 32px var(--gutter) 8px;
}

/* Primaerknoepfe ueberall Kreide -- Porto faerbt manche (.action.submit)
   dunkel mit hoeherer Spezifitaet */
html body button.action.primary,
html body button.action.submit.primary,
html body .action.primary,
html body a.btn-primary,
html body .btn.btn-primary {
    background-color: var(--chalk) !important;
    border-color: var(--chalk) !important;
    color: var(--ink) !important;
}
html body button.action.primary:hover,
html body .action.primary:hover,
html body .btn.btn-primary:hover { background-color: #fff !important; border-color: #fff !important; color: var(--ink) !important; }
html body button.action.primary span,
html body .action.primary span,
html body .btn.btn-primary span { color: inherit !important; }
/* Deaktiviert: klar als "noch nicht" erkennbar, aber lesbar */
html body .action.primary[disabled],
html body .action.primary.disabled,
html body button.action.primary:disabled {
    background-color: transparent !important;
    border: 1px dashed var(--rule-2) !important;
    color: var(--steel-3) !important;
    cursor: not-allowed;
}
/* Ausnahmen mit eigener Gestaltung bleiben, wie sie oben definiert sind */
html body .page-header .block-search .action.search,
html body .footer .block.newsletter .action.subscribe { background-color: transparent !important; color: var(--chalk) !important; }
html body .footer .block.newsletter .action.subscribe { background-color: var(--ink) !important; border-color: var(--chalk) !important; }
html body .footer .block.newsletter .action.subscribe:hover { background-color: var(--chalk) !important; color: var(--ink) !important; }
html body .products-grid .product-item-actions .action.tocart:not(:hover):not(:focus-visible) {
    background-color: transparent !important;
    border-color: var(--rule-2) !important;
    color: var(--chalk) !important;
}
html body .block.discount .action.apply.primary { background-color: transparent !important; color: var(--chalk) !important; border-color: var(--rule-2) !important; }

/* Express-Zahlknoepfe (PayPal, Google Pay): die iframes sind rund, ihr
   Grund weiss -- ohne Zuschnitt blitzen weisse Ecken */
html body .paypal-button-container,
html body [id$="-container-paypal"],
html body .ppcp-googlepay-pdp,
html body .ppcp-googlepay-pdp > div,
html body [class*="ppcp-express"] iframe,
html body .paypal-buttons {
    border-radius: 4px;
    overflow: hidden;
}
html body .ppcp-express-payments-pdp { display: flex; flex-direction: column; gap: 10px; }

/* Checkout mobil: "Bestelluebersicht anzeigen" lag hellgrau hinter Kreide */
html body #checkout .opc-block-summary-manage-button-wrapper,
html body #checkout .opc-block-summary-manage-button {
    background: var(--ink-2) !important;
    border: 1px solid var(--rule-2) !important;
    border-radius: var(--r-m);
    color: var(--chalk) !important;
}

/* Checkout: Beschriftung des E-Mail-Felds sass halb ueber der Feldkante */
html body #checkout #iwd_opc_login .control { position: relative; }
html body #checkout #iwd_opc_login .control .floating-span {
    top: 50% !important;
    left: 15px !important;
    transform: translateY(-50%);
    color: #5d646a !important;
    z-index: 2 !important;
    pointer-events: none;
    font-size: 15px;
}
html body #checkout #iwd_opc_login .control.focus .floating-span {
    top: 6px !important;
    transform: none;
    font-size: 11px;
}
html body #checkout #iwd_opc_login .control.focus input { padding-top: 16px; }

/* DHL-Block: Knopf "Standorte finden" */
html body #checkout #showLocationfinder,
html body #checkout #showLocationfinder span { color: #3d4246 !important; }

/* Porto-Demoseite "Ueber uns" (CMS): Demo-Farben neutralisieren */
html body .alternative-font { color: var(--chalk) !important; }

/* Suchfeld: Porto legt hinter die runde Pille eine eckige weisse Flaeche
   (.block-search) -- daher weisse Ecken */
html body .page-header .block-search,
html body .page-header .block-search .block-content,
html body .page-header .block-search form { background: transparent !important; }

html body #newsletter_popup .checkbox { margin-top: 6px; }

/* E-Mail im Checkout: ein loser Textknoten " * " stand ueber dem Feld.
   Er verschwindet (font-size 0 im Container), das Sternchen haengt an der
   Beschriftung wie bei allen anderen Pflichtfeldern. */
html body #checkout #iwd_opc_login form > .control:first-child { font-size: 0; }
html body #checkout #iwd_opc_login form > .control:first-child input { font-size: 15px; }
html body #checkout #iwd_opc_login form > .control:first-child .floating-span:after { content: " *"; }


/* Produktkarte: das Herz der Wunschliste ist bei Porto ein absolut
   gesetztes ::before (top/right 0). Ohne positionierten Knopf landete es an
   der Ecke des Detailblocks neben dem Namen, der Knopf blieb leer. */
html body .products-grid .product-item-actions .action.towishlist { position: relative !important; }
html body .products-grid .product-item-actions .action.towishlist:before,
html body .products-grid .product-item-actions .action.tocompare:before {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: var(--steel-3) !important;
}
html body .products-grid .product-item-actions .action.towishlist:hover:before { color: var(--chalk) !important; }
html body .products-grid .product-item-actions .action.towishlist > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Minicart: Porto setzt Zahl, "Zum Warenkorb", Name und Preis dunkel,
   stellt das Bild rechts und laesst den Namen ueber die Spalte laufen */
html body .block-minicart .total-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--rule) !important;
    color: var(--chalk) !important;
}
html body .block-minicart .total-count .items-total,
html body .block-minicart .total-count .items-total span { color: var(--steel-3) !important; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
html body .block-minicart .total-count .items-total .count { color: var(--chalk) !important; font-weight: 700; }
html body .block-minicart .total-count .action.viewcart,
html body .block-minicart .total-count .action.viewcart span {
    color: var(--chalk) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
    text-transform: none;
    letter-spacing: 0;
}
html body .block-minicart .minicart-items-wrapper { overflow-x: hidden !important; margin: 0; padding: 0; border: 0; }
html body .block-minicart .minicart-items .product-item { padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--rule); }
html body .block-minicart .minicart-items .product-item > .product {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 14px;
    position: relative;
}
html body .block-minicart .minicart-items .product-item-photo {
    order: -1;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    float: none;
    position: static;
}
html body .block-minicart .minicart-items .product-item-photo .product-image-container { width: 72px !important; }
html body .block-minicart .minicart-items .product-item-details {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 24px 0 0;
    display: block;
}
html body .block-minicart .minicart-items .product-item-name,
html body .block-minicart .minicart-items .product-item-name a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: auto !important;
    max-width: 100%;
    white-space: normal !important;
    color: var(--chalk) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}
html body .block-minicart .minicart-items .price,
html body .block-minicart .minicart-items .price-including-tax,
html body .block-minicart .minicart-items .price-excluding-tax { color: var(--chalk) !important; font-size: 15px; font-weight: 700; }
html body .block-minicart .minicart-items .details-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
html body .block-minicart .minicart-items .details-qty .label { color: var(--steel-3) !important; margin: 0; }
html body .block-minicart .minicart-items .item-qty { color: var(--ink) !important; width: 52px; min-height: 34px; height: 34px; text-align: center; }
html body .block-minicart .minicart-items .update-cart-item { min-height: 34px; padding: 0 10px; font-size: 11px; }
html body .block-minicart .minicart-items .product.actions { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; gap: 8px; margin: 0; }
html body .block-minicart .minicart-items .product.actions .primary,
html body .block-minicart .minicart-items .product.actions .secondary {
    position: static;
    display: block;
    margin: 0;
    background: transparent !important;
}
html body .block-minicart .minicart-items .action.edit,
html body .block-minicart .minicart-items .action.delete {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}
html body .block-minicart .minicart-items .action.edit:before,
html body .block-minicart .minicart-items .action.delete:before { color: var(--steel-3) !important; font-size: 14px; }
html body .block-minicart .minicart-items .action.edit:hover:before,
html body .block-minicart .minicart-items .action.delete:hover:before { color: var(--chalk) !important; }
html body .block-minicart .subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}
html body .block-minicart .subtotal .label,
html body .block-minicart .subtotal .label span { color: var(--steel-3) !important; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
html body .block-minicart .subtotal .label:after { content: none !important; }
html body .block-minicart .subtotal .price { color: var(--chalk) !important; font-size: 18px; font-weight: 700; }

/* Kartenaktionen: Herz immer sichtbar, Herz + Warenkorb fuellen die Breite */
html body .products-grid .product-item .product-item-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box;
}
html body .products-grid .product-item .product-item-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}
html body .products-grid .product-item .product-item-actions .action.tocompare { display: none !important; }
html body .products-grid .product-item .product-item-actions .action.towishlist {
    order: 2;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
html body .products-grid .product-item .product-item-actions .actions-primary { order: 1; min-width: 0; width: auto !important; margin: 0 !important; }
html body .products-grid .product-item .product-item-actions .actions-primary form { display: block !important; width: 100%; }
html body .products-grid .product-item .product-item-actions .action.tocart { width: 100% !important; min-width: 0 !important; padding: 0 10px !important; }
html body .products-grid .product-item .product-item-actions .action.towishlist { margin: 0 !important; width: 42px !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; }


/* Rechtsleiste (jede Seite) ============================================= */
.sh-legal {
    background: var(--ink);
    border-top: 1px solid var(--rule);
}
.sh-legal-nav {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 16px var(--gutter) 22px;
}
.sh-legal-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sh-legal-nav li { margin: 0; }
html body .sh-legal-nav a,
html body .sh-legal-nav .sh-legal-consent {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--steel-3);
    font-family: var(--text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
}
html body .sh-legal-nav a:hover,
html body .sh-legal-nav .sh-legal-consent:hover { color: var(--chalk); text-decoration: underline; text-underline-offset: .2em; }


/* Cookie-Hinweis ======================================================== */
.sh-consent[hidden] { display: none !important; }
.sh-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 100000;
    max-width: 460px;
    padding: 22px 22px 20px;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-l);
    background: var(--ink-2);
    color: var(--steel-3);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85);
    animation: sh-fade 400ms var(--ease-out) both;
}
@media (min-width: 768px) { .sh-consent { left: 24px; right: auto; bottom: 24px; } }
.sh-consent-title {
    margin: 0 0 8px;
    color: var(--chalk);
    font-family: var(--display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
.sh-consent-text { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--steel-3); }
html body .sh-consent-text a { color: var(--chalk); text-decoration: underline; text-underline-offset: .2em; }
.sh-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Ablehnen und Zustimmen gleichrangig: gleiche Groesse, gleiche Form */
html body .sh-consent-btn {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--chalk);
    border-radius: var(--r-s);
    background: transparent;
    color: var(--chalk);
    font-family: var(--text);
    font-size: 13px;
    font-weight: 700;
    font-stretch: 88%;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
html body .sh-consent-btn:hover { background: var(--chalk); color: var(--ink); }
@media (max-width: 380px) { .sh-consent-actions { grid-template-columns: 1fr; } }

/* "Empfohlen": Porto legt Vor/Zurueck absolut auf dieselbe Stelle -- die
   beiden Pfeile ergaben zusammen ein X. Jetzt nebeneinander. */
html body .sidebar .owl-carousel .owl-nav {
    display: flex !important;
    gap: 6px;
    position: absolute !important;
    top: -44px !important;
    right: 0 !important;
    left: auto !important;
    margin: 0 !important;
    width: auto !important;
}
html body .sidebar .owl-carousel .owl-nav button,
html body .sidebar .owl-carousel .owl-nav [class*="owl-"] {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    transform: none !important;
}
html body .sidebar .owl-carousel .owl-nav button em { font-size: 12px; }


/* Ueber uns ============================================================== */
.sh-home-root > .sh-about-hero {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: end;
    padding-top: clamp(32px, 5vw, 72px);
}
.sh-about-title { font-size: clamp(56px, 10vw, 150px); }
.sh-about-hero-media {
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-l);
    aspect-ratio: 4 / 5;
    background: var(--ink-2);
}
.sh-about-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.sh-home-root > .sh-chapter {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(28px, 6vw, 96px);
    align-items: center;
    padding-top: clamp(72px, 10vw, 136px);
}
.sh-chapter--flip .sh-chapter-copy { order: 2; }
html body .sh-chapter-title {
    margin: 0 0 22px;
    color: var(--chalk);
    font-family: var(--display);
    font-size: clamp(40px, 5.4vw, 76px);
    font-weight: 900;
    line-height: .95;
    text-transform: uppercase;
}
.sh-chapter-copy p {
    max-width: 52ch;
    margin: 0 0 16px;
    color: var(--steel-3);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.65;
}
.sh-chapter-copy .sh-more { margin-top: 10px; }
.sh-chapter-media { margin: 0; }
.sh-chapter-media.sh-card-plinth { aspect-ratio: 1; }
.sh-home-root > .sh-about-facts { margin-top: clamp(72px, 10vw, 136px); }
.sh-home-root > .sh-about-close {
    padding-top: clamp(80px, 11vw, 150px);
    text-align: left;
}
.sh-about-close p { margin: 14px 0 28px; color: var(--steel-3); font-size: 18px; }
@media (max-width: 767px) {
    .sh-home-root > .sh-about-hero,
    .sh-home-root > .sh-chapter { grid-template-columns: 1fr; }
    .sh-chapter--flip .sh-chapter-copy { order: 0; }
    .sh-about-hero-media { aspect-ratio: 4 / 4.4; }
}

/* 15  Bewegung ============================================================ */

@keyframes sh-rise {
    from { transform: translateY(105%); }
    to   { transform: translateY(0); }
}
@keyframes sh-fade {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sh-hero-img {
    from { opacity: 0; transform: scale(1.06); filter: brightness(.4); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* Einblenden beim Scrollen (silberhirt.js setzt .sh-pre nur auf Elemente
   unterhalb des Sichtfelds und nimmt sie beim Erreichen wieder weg) */
.sh-js .sh-pre {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
}
.sh-js [data-sh-reveal],
.sh-js .sh-section-head,
.sh-js .sh-feature,
.sh-js .sh-insta-grid {
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out);
}

/* Reduzierte Bewegung: keine Wege, keine Zooms, keine Unschaerfe.
   Was bleibt, sind kurze Ueberblendungen -- Zustandswechsel sind weiter
   sichtbar, nur ohne Bewegung im Raum. */
@media (prefers-reduced-motion: reduce) {
    .sh-line > span,
    .sh-hero-media img { animation: none; }
    .sh-hero-lede,
    .sh-hero-actions { animation: sh-fade-still 400ms ease both; }
    .sh-js .sh-pre { transform: none; filter: none; }
    .sh-js [data-sh-reveal],
    .sh-js .sh-section-head,
    .sh-js .sh-feature,
    .sh-js .sh-insta-grid { transition: opacity 400ms ease; }
    html body .products-grid .product-item:hover .product-item-photo img,
    html body .sh-card:hover .sh-card-plinth img,
    .sh-rack-row:hover .sh-rack-thumb img,
    .sh-insta-grid a:hover img,
    html body .sh-rack-link:hover .sh-rack-label,
    html body .sh-rack-link:hover .sh-rack-arrow { transform: none; }
    html body .action.primary:active,
    html body .sh-btn:active { transform: none; }
    html { scroll-behavior: auto; }
}
@keyframes sh-fade-still { from { opacity: 0; } to { opacity: 1; } }
}