/*
============================================================
DAS MASSBAND - STYLE 2026
============================================================

[00] Variablen / Grundwerte
[01] Reset / Basis
[02] Layout / Container
[03] Header / Logo
[04] Suche / Tools
[05] Menü / Navigation
[06] Content
[07] Teaser / Kategorie-Karten
[08] Produktlisten
[09] Produktkarten
[10] Formulare / Buttons
[11] Tabellen
[12] Fußnoten / Seitenhinweise
[13] Bilder
[14] Footer
[15] Hilfsklassen
[16] Suche / Suchergebnisse
[17] Breadcrumbs / Brotkrümel
[18] Produktdetailseite
[19] Kategorie-Intro
[20] Garn-Compact
[21] Herstellerangaben auf Produktgruppenseiten
[22] Header-Warenkorb
[23] Garnvarianten nach Farbe
[23a] Farbkarte in Garnvarianten-Werkzeugkasten
[23b] Schnellbestellung Garnvarianten
[23c] PC-Korrektur Variantenliste
[23d] Farbkarte-Warenkorb-Hinweis
[23e] Allgemeine dynamische Schnellbestellung
[23f] Farbkarte-Nicht-bestellbar-Hinweis
[90] Responsive / Media Queries

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

/* ============================================================
   [00] Variablen / Grundwerte
   ============================================================ */
:root {
    --color-text: #333;
    --color-muted: #666;
    --color-soft: #f5f5f5;
    --color-soft-2: #fafafa;
    --color-border: #ddd;
    --color-border-soft: #eee;
    --color-link: #333;
    --color-accent: #444;
    --color-bg: #fff;
    --color-danger: #b00020;

    --space-xs: 0.35rem;
    --space-s: 0.55rem;
    --space-m: 0.85rem;
    --space-l: 1.2rem;
    --space-xl: 1.7rem;

    --container-width: 1100px;
    --radius-small: 7px;
    --radius-card: 11px;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.09);
}

/* ============================================================
   [01] Reset / Basis
   ============================================================ */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
}

a {
    color: var(--color-link);
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* ============================================================
   [02] Layout / Container
   ============================================================ */
.site-grid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.site-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.site-main {
    padding-bottom: 2rem;
}

.site-layout {
    display: block;
}

.site-content {
    min-width: 0;
}

/* ============================================================
   [03] Header / Logo
   ============================================================ */
.site-header {
    border-bottom: 1px solid var(--color-border-soft);
    background: #fff;
}

.site-header__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    color: var(--color-text);
    font-size: 1.35rem;
    font-weight: 700;
    text-decoration: none;
}

.site-logo,
.site-logo:hover,
.site-logo:focus,
.site-logo:visited {
    text-decoration: none;
}

.site-logo__image {
    display: block;
    width: 170px;
    height: auto;
}

/* ============================================================
   [04] Suche / Tools
   ============================================================ */
.site-search {
    width: 100%;
    order: 3;
}

.site-search__input {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font-size: 1rem;
}

.site-tools {
    font-size: 1.35rem;
}

/* ============================================================
   [05] Menü / Navigation
   ============================================================ */
.shop-menu {
    margin: 0 0 1.2rem 0;
    font-family: Arial, Helvetica, sans-serif;
}

.shop-menu__trigger {
    width: 100%;
    padding: 0.95rem;
    background: var(--color-accent);
    color: #fff;
    border: 0;
    border-radius: var(--radius-small);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
}

.shop-menu__nav {
    display: none;
    margin-top: 0.45rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.shop-menu__nav.is-open {
    display: block;
}

.shop-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-menu__item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.shop-menu__item:last-child {
    border-bottom: 0;
}

.shop-menu__link {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--color-text);
    text-decoration: none;
}

/*
 * Die Menüebenen bekommen jeweils eine eigene Grundfläche.
 * Die Fläche selbst rückt links mit der Hierarchie ein.
 * Die sichtbare Textposition bleibt dabei ungefähr wie bisher.
 */
.shop-menu__link--level-0 {
    margin-left: 0;
    padding: 0.78rem 3.1rem 0.78rem 0.95rem;
    font-size: 0.96rem;
    font-weight: 700;
    background: #ffffff;
}

.shop-menu__link--level-1 {
    margin-left: 0.55rem;
    padding: 0.72rem 3.1rem 0.72rem 1.55rem;
    font-size: 0.94rem;
    font-weight: 700;
    color: #444;
    background: #f3f3f3;
}

.shop-menu__link--level-2 {
    margin-left: 1.10rem;
    padding: 0.66rem 0.9rem 0.66rem 2.15rem;
    font-size: 0.94rem;
    font-weight: 400;
    color: #555;
    background: #e9e9e9;
}

.shop-menu__link--level-0:hover,
.shop-menu__link--level-0:focus {
    background: #f8f8f8;
}

.shop-menu__link--level-1:hover,
.shop-menu__link--level-1:focus {
    background: #ececec;
}

.shop-menu__link--level-2:hover,
.shop-menu__link--level-2:focus {
    background: #e2e2e2;
}

.shop-menu__submenu {
    grid-column: 1 / -1;
    display: none;
    background: #fff;
    border-top: 1px solid var(--color-border-soft);
}

.shop-menu__toggle {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    background: #ffffff;
    border: 0;
    border-left: 1px solid var(--color-border);
    cursor: pointer;
    font-size: 1.2rem;
    color: #777;
}

/* Toggle auf einer Ebene übernimmt die Grundfarbe des zugehörigen Menüpunktes. */
.shop-menu__toggle--level-2 {
    background: #f3f3f3;
}

/* ============================================================
   [05c] Vier Menüebenen: Ebene 3 (vierte sichtbare Ebene)
   ============================================================ */
.shop-menu__link--level-3 {
    margin-left: 1.65rem;
    padding: 0.66rem 0.75rem 0.66rem 1.8rem;
    font-size: 0.91rem;
    font-weight: 400;
    color: #555;
    background: #dedede;
    overflow-wrap: anywhere;
}

.shop-menu__link--level-3:hover,
.shop-menu__link--level-3:focus {
    background: #d5d5d5;
}

/* In der dritten sichtbaren Ebene Platz für den Aufklapp-Button lassen. */
.shop-menu__link--level-2 {
    padding-right: 3.1rem;
}

.shop-menu__toggle--level-3 {
    background: #e9e9e9;
}

.shop-menu__link--current-path.shop-menu__link--level-3:hover,
.shop-menu__link--current-path.shop-menu__link--level-3:focus {
    background: #d5d5d5;
}

/* Menü-Kategorien ohne eigene Zielseite sind Text, keine kaputten Links. */
.shop-menu__link--without-url {
    cursor: default;
}

/* Menü soll selbst scrollen, wenn es höher als der sichtbare Bereich ist */
@media screen and (max-width: 800px) {
    .shop-menu__nav.is-open {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }
}

@media screen and (min-width: 801px) {
    .shop-menu__nav {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }
}

/* ============================================================
   [06] Content
   ============================================================ */
.site-content h1 {
    margin-top: 0;
    line-height: 1.25;
}

/* ============================================================
   [07] Teaser / Kategorie-Karten
   ============================================================ */
.teaser-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.teaser-card {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.teaser-card,
.teaser-card:hover,
.teaser-card:focus,
.teaser-card:visited,
.teaser-card * {
    text-decoration: none;
}

.teaser-card:hover,
.teaser-card:focus {
    border-color: #aaa;
    box-shadow: var(--shadow-card-hover);
}

.teaser-card__media {
    display: grid;
    gap: 4px;
    background: #f4f4f4;
    overflow: hidden;
}

.teaser-card__media--1 {
    grid-template-columns: 1fr;
    aspect-ratio: 16 / 9;
}

.teaser-card__media--2 {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 16 / 9;
}

.teaser-card__media--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 16 / 9;
}

.teaser-card__media--3 .teaser-card__image-wrap:first-child {
    grid-row: 1 / 3;
}

.teaser-card__image-wrap {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.teaser-card__image,
.teaser-card__small-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teaser-card__body {
    display: block;
    padding: 0.9rem 1rem 1rem 1rem;
}

.teaser-card__title {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.teaser-card__text {
    display: block;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.45;
}

/* Kleine Teaser */
.teaser-card--small {
    display: grid;
    grid-template-columns: 96px 1fr;
    min-height: 96px;
}

.teaser-card__small-media {
    display: block;
    width: 96px;
    height: 96px;
    overflow: hidden;
    background: #f4f4f4;
}

.teaser-card--small .teaser-card__body {
    padding: 0.65rem 0.8rem;
}

.teaser-card--small .teaser-card__title {
    font-size: 0.98rem;
    margin-bottom: 0.2rem;
}

.teaser-card--small .teaser-card__text {
    font-size: 0.9rem;
}

/* ============================================================
   [08] Produktlisten
   ============================================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 1.2rem 0;
    align-items: stretch;
}

.product-grid--related {
    margin-top: 1rem;
}

/* ============================================================
   [09] Produktkarten
   ============================================================ */

/*
   Grundidee:
   - Die Produktkarte ist eine Flex-Spalte.
   - Bild, Titel und Beschreibung stehen oben.
   - Preisbox und Kaufbereich werden zusammen nach unten geschoben.
   - Freiraum entsteht oberhalb der UVP-Zeile, nicht unter der Lieferzeit.
*/

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    overflow: hidden;
    scroll-margin-top: 1rem;
}

.product-card:hover,
.product-card:focus-within {
    border-color: #bbb;
    box-shadow: var(--shadow-card-hover);
}

.product-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    padding: 0.55rem;
    background: #fff;
    border-bottom: 1px solid var(--color-border-soft);
    text-decoration: none;
}

.product-card__image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: 150px;
    margin: 0.5rem;
    padding: 0.3rem;
    border-radius: var(--radius-card);
    background: #fff;
    border-bottom: 0;
    overflow: hidden;
    text-decoration: none;
}

.product-card__media a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    border-radius: 0;
}

.product-card__body {
    display: block;
    flex: 0 0 auto;
    padding: 0.48rem;
}

.product-card__title {
    display: block;
    margin: 0 0 0.45rem 0;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.25;
}

.product-card__title:hover,
.product-card__title:focus {
    text-decoration: underline;
}

.product-card__title h2,
.product-card__title h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

.product-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 0.65rem 0;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.42;
}

.product-card__description p {
    margin: 0;
}

.product-card__pricebox {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 0.48rem 0.48rem 0 0.48rem;
}

.product-card__price {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "label label"
        "amount discount";
    align-items: center;
    column-gap: 0.35rem;
    row-gap: 0.12rem;
    margin: 0 0 0.08rem 0;
    overflow: visible;
}

.product-card__price-label-main {
    grid-area: label;
    color: #555;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.product-card__price-amount {
    grid-area: amount;
    white-space: nowrap;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.15;
}

.product-card__discount {
    grid-area: discount;
    justify-self: start;
    align-self: center;
    display: inline-block;
    max-width: 100%;
    padding: 0.04rem 0.26rem;
    border-radius: 999px;
    background: #cf0000;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
}


.product-card__tax,
.product-card__baseprice,
.product-card__stock,
.product-card__cartinfo,
.product-card__sale-note {
    display: block;
    color: #555;
    font-size: 0.78rem;
    line-height: 1.35;
}

.product-card__baseprice {
    min-height: 2.7em;
}
.product-card__stock {
    min-height: 4.05em;
}
.product-card__tax a,
.product-card__cartinfo a {
    color: inherit;
    text-decoration: underline;
}

.product-card__actions {
    flex: 0 0 auto;
    padding: 0.48rem;
}

.product-card__details,
.product-card__more {
    display: inline-block;
    align-self: flex-start;
    margin: 0.1rem 0 0.6rem 0;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-soft);
    color: var(--color-text);
    font-size: 0.85rem;
    text-decoration: none;
}

.product-card__details:hover,
.product-card__details:focus,
.product-card__more:hover,
.product-card__more:focus {
    background: #eee;
    text-decoration: none;
}

.product-card__manufacturer {
    min-height: 2.6em;
    margin: 0 0 0.45rem 0;
    color: #666;
    font-size: 0.78rem;
    line-height: 1.3;
}

.product-card__form {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.55rem;
}

.product-card__form--placeholder {
    visibility: hidden;
}

.product-card__qty-label {
    display: none;
}

.product-card__qty {
    width: 4rem;
    min-width: 0;
    padding: 0.45rem 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    text-align: center;
    font-size: 0.95rem;
}

.product-card__cart-button {
    width: 100%;
    min-width: 0;
    padding: 0.48rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-soft);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.product-card__cart-button:hover,
.product-card__cart-button:focus {
    background: #eee;
    border-color: #aaa;
}

.product-card__notice {
    margin: 0.45rem 0 0 0;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-small);
    background: #eef8ee;
    color: #225522;
    font-size: 0.82rem;
    line-height: 1.35;
}

.product-card__not-orderable {
    margin: 0.55rem 0 0 0;
    color: #666;
    font-size: 0.85rem;
    font-weight: 700;
}
.product-card__uvp {
    min-height: 1.35em;
    margin-top: 0.08rem;
    color: #666;
    font-size: 0.78rem;
    line-height: 1.3;
}

.product-card__uvp--empty {
    visibility: hidden;
}

/* Reserviert für mögliche ältere Preis-Tabellen in übernommenem Code. */
.product-card__price-table {
    width: 100%;
    margin: 0 0 0.3rem 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.product-card__price-table td {
    padding: 0.05rem 0;
    vertical-align: baseline;
}

.product-card__price-label {
    color: #555;
    font-size: 0.82rem;
}

.product-card__price-value {
    text-align: right;
    white-space: nowrap;
}

.product-card__price-value--main {
    font-weight: 700;
    font-size: 1.05rem;
}

.product-card__discount-placeholder {
    display: none;
}

@media screen and (max-width: 420px) {
    .product-card__price {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "amount"
            "discount";
        row-gap: 0.1rem;
    }

    .product-card__price-amount {
        font-size: 1.08rem;
    }

    .product-card__discount {
        justify-self: start;
        font-size: 0.56rem;
        margin-top: 0.05rem;
        padding-left: 0.24rem;
        padding-right: 0.24rem;
    }
}


/* Gemeinsame Mengenanzeige im Warenkorb-Button */
.product-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
}

.product-cart-button__label {
    display: inline-block;
}

.product-cart-button__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #c80000;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

/* ============================================================
   [10] Formulare / Buttons
   ============================================================ */
/* Reserviert für weitere Formular- und Button-Regeln. */

/* ============================================================
   [11] Tabellen
   ============================================================ */
table {
    border-collapse: collapse;
}

/* ============================================================
   [12] Fußnoten / Seitenhinweise
   ============================================================ */
.page-notes {
    margin: 2rem 0 1rem 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-soft-2);
    font-size: 0.9rem;
}

.page-notes__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.7rem;
    margin: 0;
}

.page-notes__term {
    font-weight: 700;
    white-space: nowrap;
}

.page-notes__desc {
    margin: 0;
}

.page-notes__color {
    margin: 0.9rem 0 0 0;
    color: #555;
}

.product-footnote-ref {
    font-size: 0.85em;
    white-space: nowrap;
}

/* ============================================================
   [13] Bilder
   ============================================================ */
.mb-img.left {
    float: left;
    margin: 0 1.5rem 1rem 0;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-small);
}

/* ============================================================
   [14] Footer
   ============================================================ */
.site-footer {
    margin-top: 2rem;
    padding: 1.5rem 0 2rem 0;
    background: #f4f4f4;
    border-top: 1px solid var(--color-border);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.footer-panel {
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius: var(--radius-card);
    padding: 1rem;
}

.footer-panel__title {
    margin: 0 0 0.8rem 0;
    font-size: 1.15rem;
}

.footer-panel__subtitle {
    margin: 1rem 0 0.5rem 0;
    font-size: 1rem;
}

.footer-button {
    display: block;
    width: 100%;
    margin-top: 0.45rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid #d6d6d6;
    border-radius: var(--radius-small);
    background: #f7f7f7;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    line-height: 1.35;
}

.footer-button:hover,
.footer-button:focus {
    background: #eee;
    border-color: #aaa;
    text-decoration: none;
}

/* Google-Bewertungen: ausreichend grosse Touch-Flaechen auf Smartphones */
.footer-google-rating__links {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.footer-google-rating__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-soft);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.35;
}

.footer-google-rating__links a:hover,
.footer-google-rating__links a:focus-visible {
    background: #eee;
    border-color: #aaa;
}

.footer-button--important {
    border-color: var(--color-danger);
    border-width: 2px;
    font-weight: 700;
}

.footer-button--image {
    text-align: center;
}

.footer-button--image img {
    max-width: 100%;
    height: auto;
}

.footer-hours {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.footer-hours th,
.footer-hours td {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: top;
    text-align: left;
}

.footer-hours th {
    width: 5.5rem;
    font-weight: 700;
}

.site-footer__copy {
    margin: 1rem 0 0 0;
    font-size: 0.85rem;
    color: #555;
}

/* ============================================================
   [15] Hilfsklassen
   ============================================================ */
.Hersteller {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--color-soft);
    font-size: 0.9rem;
}

.spacer {
    clear: both;
}

.visually-hidden {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ============================================================
   [16] Suche / Suchergebnisse
   ============================================================ */

.search-page-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin: 1rem 0 1.4rem 0;
}

.search-page-form__input {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font-size: 1rem;
}

.search-page-form__button {
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-small);
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.search-result-count {
    margin: 0 0 1rem 0;
    color: var(--color-muted);
}

.search-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0 2rem 0;
}

.search-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: #fff;
    overflow: hidden;
}

.search-card__link {
    display: grid;
    grid-template-columns: 104px 1fr;
    color: var(--color-text);
    text-decoration: none;
}

.search-card__link:hover,
.search-card__link:focus {
    background: var(--color-soft-2);
    text-decoration: none;
}

.search-card__media {
    display: block;
    width: 104px;
    height: 104px;
    background: var(--color-soft);
    overflow: hidden;
}

.search-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-card__body {
    display: block;
    padding: 0.75rem 0.85rem;
    min-width: 0;
}

.search-card__title {
    display: block;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}

.search-card__title strong {
    font-weight: 800;
    background: #fff3b0;
    padding: 0 0.08em;
}

.search-card__group,
.search-card__score {
    display: block;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

.notice {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-soft-2);
}

.notice--error {
    border-color: #e0b4b4;
    background: #fff7f7;
}

.notice--suggestion {
    border-color: #e4d27a;
    background: #fffbe6;
}

/* ============================================================
   [17] Breadcrumbs / Brotkrümel
   ============================================================ */

.breadcrumbs {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    color: var(--color-text-soft, #666);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "›";
    margin: 0 0.45rem;
    color: var(--color-text-soft, #777);
}

.breadcrumbs a {
    color: var(--color-text-soft, #666);
    text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
    color: var(--color-text, #222);
    text-decoration: underline;
}

.breadcrumbs span[aria-current="page"] {
    color: var(--color-text, #222);
    font-weight: 600;
}

@media screen and (max-width: 600px) {
    .breadcrumbs {
        font-size: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .breadcrumbs__list {
        row-gap: 0.15rem;
    }
}

/* ============================================================
   [90] Responsive / Media Queries
   ============================================================ */
@media screen and (max-width: 420px) {
    .product-grid {
        gap: 0.5rem;
    }

    .product-card__body,
    .product-card__pricebox,
    .product-card__actions {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .product-card__image-link {
        height: 125px;
        margin: 0.5rem;
        padding: 0.25rem;
    }

    .product-card__image {
        height: 100%;
    }

    .product-card__form {
        grid-template-columns: 3.6rem minmax(0, 1fr);
    }

    .product-card__qty {
        width: 3.6rem;
    }

    .product-card__cart-button {
        font-size: 0.85rem;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
}

@media screen and (max-width: 600px) {
    .site-logo__image {
        width: 150px;
    }
}

@media screen and (min-width: 768px) {
    .search-page-form {
        grid-template-columns: 1fr auto;
        align-items: stretch;
    }

    .site-search {
        order: 2;
        flex: 1 1 260px;
        max-width: 420px;
    }

    .site-tools {
        order: 3;
    }

    .teaser-grid--large,
    .teaser-grid--small {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (min-width: 801px) {
    .site-layout {
        display: flex;
        align-items: flex-start;
        gap: 1.35rem;
    }

    .shop-menu {
        width: 260px;
        flex-shrink: 0;
        position: sticky;
        top: 10px;
    }

    .shop-menu__trigger {
        display: none;
    }

    .shop-menu__nav {
        display: block;
        margin-top: 0;
    }

    .site-content {
        flex: 1 1 auto;
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-panel--wide {
        grid-column: span 2;
    }
}

@media screen and (min-width: 1100px) {
    .search-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teaser-grid--small {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .site-footer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .footer-panel--wide {
        grid-column: span 2;
    }
}

/* ============================================================
   [18] Produktdetailseite
   ============================================================ */
.product-detail {
    margin: 1.5rem 0 2rem 0;
}

.product-detail__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    align-items: start;
}

.product-detail__media {
    background: #fff;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    padding: 0.9rem;
    text-align: center;
}

.product-detail__image,
.product-detail__media img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-small);
}

.product-detail__image--archived,
.product-detail--archive .product-detail__media img {
    opacity: 0.55;
}

.product-detail__content {
    min-width: 0;
}

.product-detail__title {
    margin: 0 0 0.9rem 0;
    line-height: 1.2;
}

.product-detail__description {
    margin: 0 0 1rem 0;
}

.product-detail__description p:first-child {
    margin-top: 0;
}

.product-detail__compatibility,
.product-detail__color-number {
    margin: 0.8rem 0;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.product-detail__manufacturer {
    margin: 1.2rem 0;
    padding: 0.9rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    background: var(--color-soft-2);
    font-size: 0.88rem;
}

.product-detail__subheading {
    margin: 0 0 0.6rem 0;
    font-size: 1rem;
}

.gpsr-data__list {
    margin: 0;
}

.gpsr-data__row {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.gpsr-data__row:last-child {
    margin-bottom: 0;
}

.gpsr-data__row dt {
    font-weight: 700;
    color: var(--color-text);
}

.gpsr-data__row dd {
    margin: 0;
    min-width: 0;
    word-break: break-word;
}

.product-detail__buybox {
    margin: 1.2rem 0 0 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: #fff;
}

.product-detail__pricebox {
    margin-bottom: 0.9rem;
}

.product-detail__tax,
.product-detail__baseprice,
.product-detail__guarantee,
.product-detail__stock,
.product-detail__cartinfo,
.product-detail__not-available,
.product-detail__not-online {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.4;
}

.product-detail__uvp {
    color: #666;
    font-size: 0.82rem;
    line-height: 1.35;
}

.product-detail__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    margin: 0.25rem 0;
}

.product-detail__price-label {
    font-weight: 700;
}

.product-detail__price-amount {
    font-size: 1.35rem;
    white-space: nowrap;
}

.product-detail__discount {
    display: inline-block;
    padding: 0.06rem 0.28rem;
    border-radius: 999px;
    background: #c80000;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    border: 0;
}

.product-detail__form {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 12rem);
    gap: 0.55rem;
    align-items: center;
    margin: 0.9rem 0;
}

.product-detail__qty-label {
    display: none;
}

.product-detail__qty {
    width: 4.5rem;
    min-width: 0;
    padding: 0.5rem 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    text-align: center;
}

.product-detail__cart-button {
    width: 100%;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-soft);
    color: var(--color-text);
    cursor: pointer;
    font-weight: 700;
    white-space: nowrap;
}

.product-detail__cart-button:hover,
.product-detail__cart-button:focus {
    background: #eee;
    border-color: #aaa;
}

.product-detail__gallery,
.product-detail__videos,
.product-detail__backlinks {
    margin-top: 1.5rem;
}

.product-detail-extra {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.2rem 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--color-border-soft);
}

.product-detail-extra__image {
    text-align: center;
}

.product-detail-extra__img,
.product-detail-extra__image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-small);
}

.product-detail__video {
    margin: 1rem 0;
}

.product-detail__backlinks {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-soft);
    color: var(--color-muted);
}

.product-detail__archive-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 1rem;
}

@media screen and (max-width: 520px) {
    .gpsr-data__row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .product-detail__form {
        grid-template-columns: 4.2rem minmax(0, 1fr);
    }

    .product-detail__qty {
        width: 4.2rem;
    }
}

@media screen and (min-width: 801px) {
    .product-detail__main {
        grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
        gap: 1.6rem;
    }

    .product-detail-extra {
        grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
        align-items: start;
    }
}


/* ============================================================
   [18b] Produktdetailseite: Bestelldaten vor Herstellerinfo
   ============================================================ */

.product-detail__buybox {
    margin: 1.1rem 0 1rem 0;
}

.product-detail__manufacturer {
    margin: 0.9rem 0 0 0;
    padding: 0.7rem 0.8rem;
    border-color: var(--color-border-soft);
    background: var(--color-soft-2);
    color: #555;
    font-size: 0.82rem;
    line-height: 1.35;
}

.product-detail__subheading--manufacturer,
.product-detail__manufacturer .product-detail__subheading {
    margin: 0 0 0.45rem 0;
    color: #555;
    font-size: 0.88rem;
    font-weight: 700;
}

.gpsr-data__row {
    grid-template-columns: 6.8rem 1fr;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

.gpsr-data__row dt {
    color: #555;
    font-weight: 700;
}

.gpsr-data__row dd {
    color: #555;
}

@media screen and (max-width: 520px) {
    .product-detail__manufacturer {
        padding: 0.65rem;
        font-size: 0.8rem;
    }

    .gpsr-data__row {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}
/* ============================================================
   [18c] Mobile-Fix Detailseite: harte Begrenzung gegen Rechts-Überlauf
   ============================================================ */
.product-detail,
.product-detail *,
.product-detail *::before,
.product-detail *::after {
    box-sizing: border-box;
}

.product-detail,
.product-detail__main,
.product-detail__content,
.product-detail__media,
.product-detail__buybox,
.product-detail__manufacturer,
.product-detail__gallery,
.product-detail__videos,
.product-detail__backlinks,
.product-detail-extra,
.product-detail-extra__image,
.product-detail-extra__text {
    max-width: 100%;
    min-width: 0;
}

/* embed_image3() erzeugt einen span mit Inline-Breite. Auf Mobil darf dieser nie breiter als der Viewport werden. */
.product-detail__media > span,
.product-detail-extra__image > span,
.product-detail__media img,
.product-detail-extra__image img {
    max-width: 100% !important;
}

.product-detail__media > span,
.product-detail-extra__image > span {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.product-detail__media img,
.product-detail-extra__image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

/* Videos/iframes sind häufig die versteckte Ursache für horizontales Scrollen. */
.product-detail iframe,
.product-detail object,
.product-detail embed,
.video-container-wrapper,
.video-container-wrapper iframe {
    max-width: 100% !important;
}

.video-container-wrapper {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    overflow: hidden;
}

.video-container-wrapper iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Alte Tabellen oder lange Inhalte in Beschreibungen sollen nicht die ganze Seite verbreitern. */
.product-detail table {
    max-width: 100%;
}

.product-detail__description,
.product-detail__description * {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 600px) {
    .product-detail {
        width: 100%;
        overflow: hidden;
        margin-top: 0.8rem;
    }

    .product-detail__main {
        display: block;
        width: 100%;
    }

    .product-detail__media {
        width: 100%;
        margin: 0 0 0.9rem 0;
        padding: 0.5rem;
    }

    .product-detail__content,
    .product-detail__buybox,
    .product-detail__manufacturer {
        width: 100%;
    }

    .product-detail__title {
        max-width: 100%;
        font-size: 1.25rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .product-detail__price {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.15rem 0.35rem;
        align-items: baseline;
    }

    .product-detail__price-label {
        grid-column: 1 / 3;
    }

    .product-detail__price-amount {
        grid-column: 1 / 2;
        min-width: 0;
        font-size: 1.18rem;
    }

    .product-detail__discount {
        grid-column: 2 / 3;
        justify-self: end;
        font-size: 0.76rem;
    }

    .product-detail__form {
        width: 100%;
        grid-template-columns: 3.8rem minmax(0, 1fr);
        gap: 0.4rem;
    }

    .product-detail__qty {
        width: 3.8rem;
    }

    .product-detail__cart-button {
        width: 100%;
        white-space: normal;
        line-height: 1.25;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .gpsr-data__row {
        grid-template-columns: 1fr;
    }
}

/* Link unter langen Produktlisten: zurück zum Seitenanfang */
.product-list-toplink {
    margin: 1rem 0 1.5rem 0;
    text-align: center;
}

.product-list-toplink a {
    display: inline-block;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-soft);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.product-list-toplink a:hover,
.product-list-toplink a:focus {
    background: #eee;
    border-color: #aaa;
    text-decoration: none;
}

/* Detailseite: Links unten wie der Zurück-nach-oben-Link formatieren */
.product-detail__backlinks--buttons {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-soft);
}

.product-detail__backlink-button {
    margin: 0.65rem 0;
}

/* ============================================================
   [19] Kategorie-Intro
   ============================================================ */

.category-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
    margin: 1rem 0 1.5rem 0;
    max-width: 100%;
    min-width: 0;
}

.category-intro,
.category-intro *,
.category-intro *::before,
.category-intro *::after {
    box-sizing: border-box;
}

.category-intro__image,
.category-intro__text {
    max-width: 100%;
    min-width: 0;
}

.category-intro__image {
    text-align: center;
}

.category-intro__image > span {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.category-intro__image img,
.category-intro__img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    border-radius: var(--radius-small);
}

.category-intro__text {
    overflow-wrap: anywhere;
}

.category-intro__text p:first-child {
    margin-top: 0;
}

.category-intro--text-only {
    display: block;
}

.category-intro--text-only .category-intro__text {
    max-width: 100%;
}

.category-intro--text-only h1 {
    overflow-wrap: normal;
}

@media screen and (max-width: 600px) {
    .category-intro {
        width: 100%;
        overflow: hidden;
    }

    .category-intro__image {
        width: 100%;
    }

    .category-intro__image > span,
    .category-intro__image img {
        max-width: 100% !important;
    }
}

@media screen and (min-width: 700px) {
    .category-intro {
        grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
        gap: 1.4rem;
    }
}


.product-grid--garn-compact {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.45rem;
}

.yarn-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-soft, #ddd);
    border-radius: var(--radius-card);
    padding: 0.6rem;
    background: #fff;
}

.yarn-card__notice {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.yarn-card__image-link {
    display: block;
    text-align: center;
}

.yarn-card__image {
    width: 100%;
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

.yarn-card__body {
    margin-top: 0.5rem;
}

.yarn-card__title {
    display: block;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 0.4rem;
}

.yarn-card__facts {
    font-size: 0.92rem;
    line-height: 1.35;
}

.yarn-card__pricebox {
    margin-top: auto;
    padding-top: 0.5rem;
}

.yarn-card__tax,
.yarn-card__baseprice,
.yarn-card__stock,
.yarn-card__cartinfo {
    font-size: 0.85rem;
}

.yarn-card__uvp {
    margin-top: 0.08rem;
    color: #666;
    font-size: 0.78rem;
    line-height: 1.3;
}

.yarn-card__uvp--empty,
.yarn-card__baseprice--empty {
    visibility: hidden;
}

.yarn-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.12rem 0.38rem;
    margin: 0 0 0.08rem 0;
}

.yarn-card__price-label-main {
    flex-basis: 100%;
    color: #555;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

.yarn-card__price-amount {
    white-space: nowrap;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.15;
}

.yarn-card__discount {
    display: inline-block;
    padding: 0.04rem 0.26rem;
    border-radius: 999px;
    background: #cf0000;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    border: 0;
}

.yarn-card__form {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.5rem;
}

.yarn-card__qty {
    width: 3.4rem;
}

.yarn-card__cart-button {
    flex: 1;
}

.yarn-card__stock {
    margin-top: 0.4rem;
    min-height: 2.7em;
}


.product-page-note--manufacturer {
    margin: 1rem 0 0.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border-soft, #ddd);
    border-radius: 0.5rem;
    font-size: 0.86rem;
    line-height: 1.35;
    color: #555;
    background: #fafafa;
}

.product-page-note--manufacturer h2 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    line-height: 1.25;
}

.product-page-note--manufacturer p {
    margin: 0 0 0.4rem;
}

.product-page-note--manufacturer dl {
    margin: 0;
}

.product-page-note--manufacturer dt {
    font-weight: 700;
    margin-top: 0.45rem;
}

.product-page-note--manufacturer dd {
    margin: 0.15rem 0 0;
}

.product-page-note--manufacturer br {
    line-height: 1.2;
}

/* Kompakte Garnkarten: Warenkorb-Button mit Mengen-Badge */
.yarn-card__cart-button.product-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

/* ============================================================
   [05b] Menü / aktueller Menüpunkt
   ============================================================ */

.shop-menu__link--current-path {
    color: var(--color-text);
}

/* Nur die tatsächlich aktuelle Seite zusätzlich hervorheben. */
.shop-menu__link--current,
.shop-menu__link[aria-current="page"] {
    color: var(--color-text);
    font-weight: 700;
}

/*
 * Aktueller Menüpfad:
 * Keine andere Hintergrundfarbe.
 * Stattdessen ein keilförmiger Marker links an jeder aktiven Ebene.
 * 1.1rem entspricht auf einem üblichen Bildschirm ungefähr 5 mm.
 */
.shop-menu__link--current-path::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.55rem;
    background: #666;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    pointer-events: none;
}

/* Hover behält weiterhin ausschließlich die Farbe der jeweiligen Menüebene. */
.shop-menu__link--current-path.shop-menu__link--level-0:hover,
.shop-menu__link--current-path.shop-menu__link--level-0:focus {
    background: #f8f8f8;
}

.shop-menu__link--current-path.shop-menu__link--level-1:hover,
.shop-menu__link--current-path.shop-menu__link--level-1:focus {
    background: #ececec;
}

.shop-menu__link--current-path.shop-menu__link--level-2:hover,
.shop-menu__link--current-path.shop-menu__link--level-2:focus {
    background: #e2e2e2;
}


/* ============================================================
   [22] Header-Warenkorb
[23] Garnvarianten nach Farbe
[23a] Farbkarte in Garnvarianten-Werkzeugkasten
[23b] Schnellbestellung Garnvarianten mit Anzahl und Warenwert
   ============================================================ */
.site-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.1;
}

.site-cart-link:hover,
.site-cart-link:focus {
    text-decoration: none;
}

.site-cart-link__icon {
    display: block;
    line-height: 1;
    font-size: 1.35rem;
}

.site-cart-link__summary {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    font-size: 0.78rem;
    line-height: 1.1;
    white-space: nowrap;
}

.site-cart-link__count {
    font-weight: 700;
}

.site-cart-link__value {
    color: var(--color-muted);
}

.site-cart-link__summary--empty {
    font-weight: 700;
}

@media screen and (max-width: 420px) {
    .site-cart-link__summary {
        font-size: 0.72rem;
    }
}


/* Quelle: style_neu_thread_variants_formatiert_1783974981.css */
/* ============================================================
   [23] Garnvarianten nach Farbe
   ============================================================ */

/* Seitenwerkzeuge: Farbkarte und Schnellbestellung */
.thread-page-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.2rem 0;
}

.thread-page-tool {
    padding: 0.85rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    background: var(--color-soft-2);
}

.thread-page-tool h2 {
    margin-top: 0;
}

/* Schnellbestellung nach Farbnummer */
.thread-quick-order {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}

.thread-quick-order label {
    font-weight: 700;
    font-size: 0.9rem;
}

.thread-quick-order__select,
.thread-quick-order__color,
.thread-quick-order__qty {
    width: 100%;
    padding: 0.52rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #fff;
}

.thread-quick-order__button {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-soft);
    cursor: pointer;
    font-weight: 700;
}

.thread-quick-order__button:hover,
.thread-quick-order__button:focus {
    background: #eee;
    border-color: #aaa;
}

.thread-quick-order__hint {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

/* Liste aller Farben */
.thread-variant-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 1.2rem 0;
}

/* Eine Farbkarte: Farbe links, Varianten rechts */
.thread-color-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.65rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    background: #fff;
}

.thread-color-card__media {
    min-width: 0;
}

.thread-color-card__image {
    display: block;
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: var(--radius-small);
    background: #fff;
}

.thread-color-card__body {
    min-width: 0;
}

.thread-color-card__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

.thread-color-card__title span {
    font-weight: 800;
}

.thread-color-card__name {
    margin: 0.15rem 0 0.55rem 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.thread-color-card__variants {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}

/* Einzelne Variante innerhalb einer Farbe */
.thread-variant {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(8.5rem, 1fr) minmax(8rem, 0.9fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    background: var(--color-soft-2);
}

.thread-variant__head {
    min-width: 0;
}

.thread-variant__title {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
    line-height: 1.25;
}

.thread-variant__title:hover,
.thread-variant__title:focus {
    text-decoration: underline;
}

.thread-variant__material {
    display: block;
    margin-top: 0.15rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.25;
}

/* Preisblock */
.thread-variant__pricebox {
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.3;
}

.thread-variant__tax,
.thread-variant__baseprice,
.thread-variant__stock {
    color: var(--color-muted);
}

.thread-variant__uvp {
    margin-top: 0.08rem;
    color: var(--color-muted);
    font-size: 0.76rem;
    line-height: 1.25;
}

.thread-variant__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.3rem;
}

.thread-variant__price-label-main {
    flex-basis: 100%;
    color: var(--color-muted);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
}

.thread-variant__price-amount,
.thread-variant__price strong {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.thread-variant__discount {
    display: inline-block;
    padding: 0.04rem 0.24rem;
    border-radius: 999px;
    background: #cf0000;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
}

/* Warenkorb */
.thread-variant__form {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 0.35rem;
    align-items: center;
}

.thread-variant__qty {
    width: 3.4rem;
    min-width: 0;
    padding: 0.42rem 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    text-align: center;
}

.thread-variant__cart-button {
    width: 100%;
    min-width: 0;
    padding: 0.42rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-soft);
    cursor: pointer;
    font-weight: 700;
    white-space: nowrap;
}

.thread-variant__cart-button:hover,
.thread-variant__cart-button:focus {
    background: #eee;
    border-color: #aaa;
}

.thread-variant__stock {
    grid-column: 1 / 4;
    font-size: 0.78rem;
    line-height: 1.25;
}

.thread-variant__not-orderable {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

/* Desktop: Schnellbestellung in einer Zeile */
@media screen and (min-width: 760px) {
    .thread-page-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .thread-quick-order {
        grid-template-columns: 1fr 7rem 4.5rem auto;
        align-items: end;
    }

    .thread-quick-order label {
        grid-row: 1;
    }

    .thread-quick-order__select,
    .thread-quick-order__color,
    .thread-quick-order__qty,
    .thread-quick-order__button {
        grid-row: 2;
    }
}

/* Smartphone: Varianten untereinander */
@media screen and (max-width: 700px) {
    .thread-color-card {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 0.55rem;
        padding: 0.55rem;
    }

    .thread-color-card__image {
        width: 72px;
        height: 72px;
    }

    .thread-variant {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .thread-variant__stock {
        grid-column: auto;
    }

    .thread-variant__form {
        grid-template-columns: 3.6rem minmax(0, 1fr);
    }

    .thread-variant__qty {
        width: 3.6rem;
    }
}


/* Quelle: style_neu_thread_farbkarte_fix_1783975711.css */
/* ============================================================
   [23a] Korrektur: Einzelprodukt in Garnvarianten-Werkzeugkasten
   ============================================================ */

/*
   MB_List_Single_Product() gibt intern .related-products und .product-grid aus.
   Im schmalen Kasten "Farbkarte bestellen" darf daraus kein normales
   mehrspaltiges Produktgrid werden.
*/

.thread-page-tool .related-products {
    margin: 0.6rem 0 0 0;
}

.thread-page-tool .related-products__title {
    margin: 0 0 0.55rem 0;
    font-size: 1rem;
}

.thread-page-tool .product-grid--related {
    display: block;
    margin: 0;
}

.thread-page-tool .product-grid--related .product-card {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 0.65rem;
    height: auto;
    padding: 0.55rem;
}

.thread-page-tool .product-grid--related .product-card__image-link {
    grid-row: 1 / 4;
    width: 90px;
    height: 90px;
    margin: 0;
    padding: 0.2rem;
}

.thread-page-tool .product-grid--related .product-card__body {
    padding: 0;
}

.thread-page-tool .product-grid--related .product-card__description {
    display: none;
}

.thread-page-tool .product-grid--related .product-card__pricebox {
    margin-top: 0;
    padding: 0;
    border-top: 0;
}

.thread-page-tool .product-grid--related .product-card__actions {
    padding: 0;
}

.thread-page-tool .product-grid--related .product-card__details,
.thread-page-tool .product-grid--related .product-card__stock {
    display: none;
}

.thread-page-tool .product-grid--related .product-card__form {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    margin-top: 0.45rem;
}

.thread-page-tool .product-grid--related .product-card__qty {
    width: 3.5rem;
}

.thread-page-tool .product-grid--related .product-card__cart-button {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

@media screen and (max-width: 480px) {
    .thread-page-tool .product-grid--related .product-card {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 0.55rem;
        padding: 0.5rem;
    }

    .thread-page-tool .product-grid--related .product-card__image-link {
        width: 72px;
        height: 72px;
    }

    .thread-page-tool .product-grid--related .product-card__price {
        grid-template-columns: 1fr auto;
    }
}


/* ============================================================
   [23b] Schnellbestellung Garnvarianten dynamisch
   ============================================================ */

/*
   Mobil bleibt einspaltig.
   Desktop:
   1. Farbnummer
   2. Ausführung mit Preis/Grundpreis
   3. Preisinfo
   4. Menge + Warenkorb
*/

.thread-quick-order__priceinfo {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    background: #fff;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

.thread-quick-order__button:disabled,
.thread-quick-order__select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

@media screen and (min-width: 760px) {
    .thread-quick-order {
        grid-template-columns: 6.2rem 4.5rem minmax(9rem, auto);
        gap: 0.45rem 0.55rem;
        align-items: end;
        max-width: 28rem;
    }

    .thread-quick-order label[for="aerofil-farbe"] {
        grid-column: 1 / 4;
        grid-row: 1;
    }

    .thread-quick-order__color {
        grid-column: 1 / 2;
        grid-row: 2;
        width: 6.2rem;
        max-width: 6.2rem;
    }

    .thread-quick-order label[for="aerofil-variante"] {
        grid-column: 1 / 4;
        grid-row: 3;
    }

    .thread-quick-order__select {
        grid-column: 1 / 4;
        grid-row: 4;
        width: 100%;
        min-width: 0;
    }

    .thread-quick-order__priceinfo {
        grid-column: 1 / 4;
        grid-row: 5;
    }

    .thread-quick-order label[for="aerofil-menge"] {
        grid-column: 1 / 2;
        grid-row: 6;
    }

    .thread-quick-order__qty {
        grid-column: 1 / 2;
        grid-row: 7;
        width: 4.5rem;
        max-width: 4.5rem;
    }

    .thread-quick-order__button {
        grid-column: 2 / 4;
        grid-row: 7;
        white-space: nowrap;
    }
}

/* ============================================================
   [23c] PC-Korrektur: Lieferzeit in Garnvarianten kompakter
   ============================================================ */

/*
   Diese Korrektur betrifft nur die Variantenliste unten.
   Die Schnellbestellung oben bleibt unverändert.

   Desktop:
   - Bezeichnung links
   - Preis/Grundpreis in der Mitte
   - Menge/Button rechts
   - Lieferzeit direkt unter Menge/Button

   Smartphone:
   - bleibt unverändert einspaltig
*/

@media screen and (min-width: 701px) {
    .thread-color-card__variants .thread-variant {
        grid-template-columns: minmax(0, 1.2fr) minmax(8.5rem, 1fr) minmax(8rem, 0.9fr);
        grid-template-rows: auto auto;
        align-items: start;
    }

    .thread-color-card__variants .thread-variant__head {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .thread-color-card__variants .thread-variant__pricebox {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .thread-color-card__variants .thread-variant__form {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    .thread-color-card__variants .thread-variant__stock {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        margin-top: 0.25rem;
    }
}

/* ============================================================
   [23d] Farbkarte: Warenkorb-Hinweis im Werkzeugkasten
   ============================================================ */

/*
   Wenn bei der Farbkarte "Im Warenkorb aktualisiert" erscheint,
   darf der zusätzliche Hinweis nicht unter die Abbildung rutschen.
   Alle Inhalte außer dem Bild bleiben in der rechten Textspalte.
   Gilt für PC und Smartphone.
*/

.thread-page-tool .product-grid--related .product-card > * {
    min-width: 0;
}

.thread-page-tool .product-grid--related .product-card__media,
.thread-page-tool .product-grid--related .product-card__image-link {
    grid-column: 1 / 2;
}

.thread-page-tool .product-grid--related .product-card__body,
.thread-page-tool .product-grid--related .product-card__pricebox,
.thread-page-tool .product-grid--related .product-card__actions,
.thread-page-tool .product-grid--related .product-card__notice,
.thread-page-tool .product-grid--related .product-card__not-orderable {
    grid-column: 2 / 3;
}

.thread-page-tool .product-grid--related .product-card__notice {
    margin: 0.4rem 0 0 0;
    padding: 0.3rem 0.45rem;
    font-size: 0.78rem;
    line-height: 1.25;
}

.thread-page-tool .product-grid--related .product-card__actions {
    align-self: start;
}

.thread-page-tool .product-grid--related .product-card__form {
    width: 100%;
}

.thread-page-tool .product-grid--related .product-card__cart-button {
    width: 100%;
    min-width: 0;
}

/* ============================================================
   [23e] Allgemeine dynamische Schnellbestellung
   ============================================================ */

/*
   Die ursprünglichen Desktop-Regeln waren auf Aerofil-IDs beschränkt.
   Diese allgemeineren Regeln greifen für Aerofil und Rayon.
   Sie stehen absichtlich später im Stylesheet und überschreiben [23b].
*/

@media screen and (min-width: 760px) {
    .thread-quick-order--dynamic {
        grid-template-columns: 6.2rem 4.5rem minmax(9rem, auto);
        gap: 0.45rem 0.55rem;
        align-items: end;
        max-width: 28rem;
    }

    .thread-quick-order--dynamic label[for$="-farbe"] {
        grid-column: 1 / 4;
        grid-row: 1;
    }

    .thread-quick-order--dynamic .thread-quick-order__color {
        grid-column: 1 / 2;
        grid-row: 2;
        width: 6.2rem;
        max-width: 6.2rem;
    }

    .thread-quick-order--dynamic label[for$="-variante"] {
        grid-column: 1 / 4;
        grid-row: 3;
    }

    .thread-quick-order--dynamic .thread-quick-order__select {
        grid-column: 1 / 4;
        grid-row: 4;
        width: 100%;
        min-width: 0;
    }

    .thread-quick-order--dynamic .thread-quick-order__priceinfo {
        grid-column: 1 / 4;
        grid-row: 5;
    }

    .thread-quick-order--dynamic label[for$="-menge"] {
        grid-column: 1 / 2;
        grid-row: 6;
    }

    .thread-quick-order--dynamic .thread-quick-order__qty {
        grid-column: 1 / 2;
        grid-row: 7;
        width: 4.5rem;
        max-width: 4.5rem;
    }

    .thread-quick-order--dynamic .thread-quick-order__button {
        grid-column: 2 / 4;
        grid-row: 7;
        white-space: nowrap;
    }
}

/* ============================================================
   [23f] Farbkarte: Nicht-bestellbar-Hinweis im Werkzeugkasten
   ============================================================ */

/*
   Die Produktkarte blendet in der kompakten Farbkarte-Box einige
   normale Kartenelemente aus. Der Liefer-/Bestellstatus muss aber
   sichtbar bleiben, wenn kein Warenkorbformular ausgegeben wird.

   Beispiel:
   - Ausverkauft
   - zurzeit nicht lieferbar
   - nicht online bestellbar
*/

.thread-page-tool .product-grid--related .product-card__actions {
    grid-column: 2 / 3;
    min-width: 0;
}

.thread-page-tool .product-grid--related .product-card__stock,
.thread-page-tool .product-grid--related .product-card__not-orderable {
    display: block;
    visibility: visible;
    grid-column: 2 / 3;
    margin: 0.45rem 0 0 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    background: #fff;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.thread-page-tool .product-grid--related .product-card__form--placeholder {
    display: none;
}


/* ============================================================
   [24] Schwebende Schaltfläche: zurück nach oben
   ============================================================ */
.scroll-top-button {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.8rem;
    height: 2.8rem;
    padding: 0;

    border: 1px solid #bbb;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-text);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    cursor: pointer;

    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.35rem);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
}

.scroll-top-button.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-button:hover,
.scroll-top-button:focus-visible {
    background: #f2f2f2;
    border-color: #888;
}

@media screen and (max-width: 600px) {
    .scroll-top-button {
        top: 0.75rem;
        right: 0.75rem;
        width: 2.65rem;
        height: 2.65rem;
        font-size: 1.4rem;
    }
}

/* ============================================================
   [25] Sprungnavigation / Abschnitts-Shortcuts
   ============================================================ */

.Sprung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 1rem 0 1.5rem 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    background: var(--color-soft-2);
}

.Sprung > span:first-child {
    margin-right: 0.15rem;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.mb-sprung {
    display: inline-block;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #fff;
    color: var(--color-text);
    font-size: 0.88rem;
    line-height: 1.25;
    text-decoration: none;
}

.mb-sprung:hover,
.mb-sprung:focus {
    background: #eee;
    border-color: #aaa;
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    .Sprung {
        gap: 0.4rem;
        padding: 0.65rem;
    }

    .Sprung > span:first-child {
        flex: 0 0 100%;
        margin: 0 0 0.1rem 0;
    }

    .mb-sprung {
        font-size: 0.85rem;
    }
}