/*
 * Turicum Cloud — turicum_shop.css
 * Design-System fuer Onlineshop, Merkliste, Warenkorb, Checkout und
 * Bestellbestaetigung. Ersetzt die frueheren Shop-Designs (Minimal Grid,
 * Warm Commerce, Luxury Jewelry) und die DogCare-Orange-Palette.
 *
 * Reihenfolge im base.html:
 *   1. base.css   (Tokens + Typografie-Basis)
 *   2. styles.css (Komponenten + Legacy-Layer)
 *   3. turicum_shop.css (diese Datei)
 *   4. _shop_css.html (optionale Farb-Overrides aus CssSettings)
 *
 * Die --shop-* Variablen sind bewusst als eigene Ebene definiert: das
 * Include layouts/includes/_shop_css.html darf sie pro Mandant
 * ueberschreiben, ohne den Rest des Design-Systems zu beruehren.
 */

/* ------------------------------------------------------------------ */
/* 1. Shop-Tokens — abgeleitet aus base.css                            */
/* ------------------------------------------------------------------ */
.modern-shop,
.merkliste-hero,
.cart-container,
.checkout-container,
.confirmation-container,
/* .tc-detail ist die Produktdetailseite. Hier stand frueher
   .product-details — eine Klasse, die kein Template mehr traegt. Damit
   griff auf der Detailseite keine einzige --shop-Variable: kein
   Signal-Blau, keine Space Grotesk, alles fiel auf Browser-Vorgaben
   zurueck. */
.tc-detail {
    --shop-primary: var(--tc-blue, #1a5cf5);
    --shop-primary-hover: var(--tc-blue-hover, #0f3fb8);
    --shop-primary-text: #ffffff;
    --shop-secondary: var(--tc-navy-soft, #3d75f7);
    --shop-light-bg: var(--tc-blue-tint, #eef3ff);
    --shop-surface: var(--tc-bg, #f7f7f5);
    --shop-card-bg: var(--tc-surface, #ffffff);
    --shop-border: var(--tc-line, #e6e6e3);
    --shop-border-strong: var(--tc-line-strong, #cfcfca);
    --shop-dark-text: var(--tc-ink, #0a1f44);
    --shop-muted-text: var(--tc-ink-2, #505d78);

    --shop-font-display: var(--tc-font-display, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
    --shop-font-text: var(--tc-font-text, "Instrument Sans", ui-sans-serif, system-ui, sans-serif);

    --shop-radius: 14px;
    --shop-radius-sm: 10px;
    --shop-radius-pill: 999px;

    --shop-shadow-sm: 0 1px 2px rgba(10, 31, 68, 0.05);
    --shop-shadow-md: 0 4px 16px rgba(10, 31, 68, 0.07);
    --shop-shadow-lg: 0 14px 38px rgba(10, 31, 68, 0.10);
    --shop-shadow-hover: 0 18px 46px rgba(10, 31, 68, 0.14);

    --shop-gradient-primary: linear-gradient(135deg, var(--shop-primary) 0%, var(--shop-primary-hover) 100%);
    --shop-gradient-hero: linear-gradient(160deg, #ffffff 0%, var(--shop-light-bg) 55%, var(--shop-surface) 100%);
}

/* ------------------------------------------------------------------ */
/* 2. Shop-Rahmen                                                      */
/* ------------------------------------------------------------------ */
.modern-shop {
    background: var(--shop-surface);
    color: var(--shop-dark-text);
    font-family: var(--shop-font-text);
    min-height: 60vh;
    padding-bottom: 4rem;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.modern-shop__hero {
    position: relative;
    background: var(--shop-gradient-hero);
    border-bottom: 1px solid var(--shop-border);
    /* Mehr Luft oben: ein Laden empfaengt nicht in einem Korridor. */
    padding: 4.5rem 0 3.5rem;
    overflow: hidden;
}

.modern-shop__hero::before {
    content: "";
    position: absolute;
    inset: auto -10% -60% auto;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 92, 245, 0.10) 0%, rgba(26, 92, 245, 0) 70%);
    pointer-events: none;
}

.modern-shop__hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Wortmarke und das Wort "Shop" sind zwei verschiedene Dinge: die Marke
   traegt den Auftritt, "Shop" sagt nur, wo man gelandet ist.

   Die Marke gross, eng gesetzt und mit der .ch in Signalblau; "Shop"
   nicht als graues Anhaengsel hinter einem Haarstrich, sondern als
   Pille in derselben Sprache wie die Typ-Pillen auf den Produktkarten.
   Damit gehoert der Zusatz sichtbar zum Laden statt danebenzustehen. */
.modern-shop__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.9rem;
    row-gap: 0.6rem;
    font-family: var(--shop-font-display);
    font-size: clamp(2.3rem, 5.8vw, 4rem);
    font-weight: 700;
    /* Der Tracking-Boden des Design-Systems; enger wuerde die Domain
       zusammenkleben. */
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0 0 1.1rem;
    color: var(--shop-dark-text);
}

.modern-shop__wortmarke {
    /* Die Ziffern und Punkte der Domain sollen nicht auseinanderfallen. */
    white-space: nowrap;
}

.modern-shop__wortmarke-tld {
    color: var(--shop-primary);
}

.modern-shop__title-suffix {
    display: inline-flex;
    align-items: center;
    align-self: center;
    padding: 0.34rem 0.95rem;
    border: 1px solid rgba(26, 92, 245, 0.2);
    border-radius: var(--shop-radius-pill);
    background: var(--shop-light-bg);
    color: var(--shop-primary);
    font-family: var(--shop-font-text);
    font-size: clamp(0.72rem, 0.95vw, 0.86rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    /* Die Sperrung haengt hinter dem letzten Buchstaben nach — ohne die
       Korrektur sitzt der Text sichtbar links in der Pille. */
    text-indent: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* Der Satz, der sagt, was es hier gibt, stand als kleine graue Zeile da
   und las sich wie eine Bildunterschrift. Er ist das Einladende an der
   Seite und darf entsprechend auftreten. */
.modern-shop__subtitle {
    /* Breit genug, dass der Satz auf dem Schirm in eine Zeile faellt —
       bei 46ch brach er nach "aus" um und zerriss die Aussage. */
    max-width: 58ch;
    margin: 0 auto;
    font-size: clamp(1.08rem, 1.7vw, 1.3rem);
    line-height: 1.45;
    font-weight: 500;
    color: var(--shop-muted-text);
    text-wrap: balance;
}

/* ── Zierleiste unter dem Hero ─────────────────────────────────────
   Die beiden Schwingen aus dem Banner-Entwurf: zwei gespiegelte Bögen
   mit Raute und Strichen. Sie schliessen den Hero ab, statt ihn mit
   einer geraden Linie abzuschneiden.

   Rein schmückend — darum aria-hidden und keine eigene Bedeutung.

   Bemasst in cqw, also in Prozent der eigenen Breite: damit sieht die
   Leiste bei 520 px genauso aus wie bei 832 px, ohne dass für jede
   Stufe Zahlen nachgeführt werden müssten. Der Container ist die
   Leiste selbst; die Schwingen darin rechnen dagegen. */
.modern-shop__zierleiste {
    container-type: inline-size;
    /* 52rem entspricht ungefähr der Breite, für die die Proportionen
       im Entwurf gesetzt wurden (811 px). Die 94 % greifen darunter und
       halten die Schwingen von den Rändern weg — sonst laufen sie bei
       mittleren Breiten in die Kante. */
    width: min(94%, 52rem);
    margin: 1.9rem auto 0;
}

.modern-shop__zierleiste-reihe {
    display: flex;
    align-items: center;
    gap: 2cqw;
}

.modern-shop__fluegel {
    flex: 1;
    position: relative;
    height: 3cqw;
    border-top: 0.15cqw solid var(--shop-primary);
    border-radius: 50%;
    transform: rotate(2deg);
}

/* Die zweite, hellere Linie darunter — sie gibt dem Bogen Tiefe. */
.modern-shop__fluegel::before {
    content: "";
    position: absolute;
    width: 85%;
    height: 1.8cqw;
    top: 0.65cqw;
    left: 5%;
    border-top: 0.1cqw solid #86b5dc;
    border-radius: 50%;
}

/* Der kleine Ring am inneren Ende. */
.modern-shop__fluegel::after {
    content: "";
    position: absolute;
    width: 2.5cqw;
    height: 1.5cqw;
    border: 0.14cqw solid var(--shop-primary);
    border-radius: 50%;
    right: -0.1cqw;
    top: -0.8cqw;
    transform: rotate(-25deg);
}

.modern-shop__fluegel--rechts {
    transform: scaleX(-1) rotate(2deg);
}

.modern-shop__raute {
    position: absolute;
    width: 0.65cqw;
    height: 0.65cqw;
    border: 0.12cqw solid var(--shop-primary);
    transform: rotate(45deg);
    top: -1.1cqw;
    left: 20%;
}

.modern-shop__striche {
    position: absolute;
    left: 12%;
    bottom: -0.15cqw;
    width: 3.2cqw;
    height: 0.12cqw;
    background: #86a8d9;
    transform: rotate(-12deg);
}

.modern-shop__striche::after {
    content: "";
    position: absolute;
    left: 1cqw;
    top: 0.55cqw;
    width: 2cqw;
    height: 0.12cqw;
    background: #86a8d9;
}

/* Wer Animationen abbestellt hat, meint meist auch Zierrat. Die Leiste
   bleibt, aber ohne die schiefen Winkel, die sie unruhig machen. */
@media (prefers-reduced-motion: reduce) {
    .modern-shop__fluegel { transform: none; }
    .modern-shop__fluegel--rechts { transform: scaleX(-1); }
    .modern-shop__striche { transform: none; }
}

/* ── Filterleiste ─────────────────────────────────────────────────── */
.modern-shop__filter-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--shop-border);
    padding: 0.85rem 0;
}

.modern-shop__filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.modern-shop__filter-row + .modern-shop__filter-row {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--shop-border);
}

.modern-shop__filter-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shop-muted-text);
    margin-right: 0.35rem;
}

/* ── Regionswechsel Schweiz / EU ──────────────────────────────────── */
/* Bewusst kein Chip: die Region entscheidet ueber das ganze Sortiment,
   die Chips nur ueber einen Ausschnitt davon. Ein Segmentschalter zeigt
   beide Laeden nebeneinander und macht sichtbar, in welchem man steht. */
.modern-shop__region-row {
    justify-content: flex-start;
}

.modern-shop__region-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--shop-border-strong);
    border-radius: var(--shop-radius-pill);
    background: var(--shop-surface);
}

.modern-shop__region-option {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.36rem 0.85rem;
    border-radius: var(--shop-radius-pill);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--shop-muted-text);
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.modern-shop__region-option:hover {
    background: var(--shop-light-bg);
    color: var(--shop-primary);
    text-decoration: none;
}

.modern-shop__region-option.is-active {
    background: var(--shop-card-bg);
    color: var(--shop-dark-text);
    box-shadow: 0 1px 3px rgba(10, 31, 68, 0.14);
}

.modern-shop__region-option:focus-visible {
    outline: 2px solid var(--shop-primary);
    outline-offset: 2px;
}

/* Die Flagge des Ladens, in dem man gerade nicht steht, tritt zurueck —
   sie ist dort ein Angebot, kein Zustand. */
.modern-shop__region-flagge {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 4.5px;
    filter: saturate(0.45);
    opacity: 0.85;
    transition: filter 0.16s ease, opacity 0.16s ease;
}

.modern-shop__region-option.is-active .modern-shop__region-flagge,
.modern-shop__region-option:hover .modern-shop__region-flagge {
    filter: none;
    opacity: 1;
}

.modern-shop__region-anzahl {
    min-width: 1.45rem;
    padding: 0 0.38rem;
    border-radius: var(--shop-radius-pill);
    background: var(--tc-neutral-bg, #eceae5);
    color: var(--shop-muted-text);
    font-family: var(--shop-font-text);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.55;
    text-align: center;
}

.modern-shop__region-option.is-active .modern-shop__region-anzahl {
    background: var(--shop-primary);
    color: var(--shop-primary-text);
}

.modern-shop__filter-chip,
.modern-shop__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.95rem;
    border: 1px solid var(--shop-border-strong);
    border-radius: var(--shop-radius-pill);
    background: var(--shop-card-bg);
    color: var(--shop-muted-text);
    font-family: var(--shop-font-text);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.modern-shop__filter-chip i {
    font-size: 0.78rem;
    opacity: 0.7;
}

.modern-shop__filter-chip:hover,
.modern-shop__filter-btn:hover {
    background: var(--shop-light-bg);
    border-color: var(--shop-primary);
    color: var(--shop-primary);
}

.modern-shop__filter-chip--active,
.modern-shop__filter-btn.active {
    background: var(--shop-primary);
    border-color: var(--shop-primary);
    color: var(--shop-primary-text);
}

.modern-shop__filter-chip--active i {
    opacity: 1;
}

.modern-shop__filter-chip--active:hover {
    background: var(--shop-primary-hover);
    border-color: var(--shop-primary-hover);
    color: var(--shop-primary-text);
}

/* ── Aktionen in der Leiste ───────────────────────────────────────── */
.modern-shop__bar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.modern-shop__bar-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: var(--shop-radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.modern-shop__bar-action--merkliste {
    background: var(--shop-card-bg);
    border: 1px solid var(--shop-border-strong);
    color: var(--shop-muted-text);
}

.modern-shop__bar-action--merkliste:hover {
    background: var(--shop-light-bg);
    border-color: var(--shop-primary);
    color: var(--shop-primary);
}

.modern-shop__bar-action--merkliste i {
    font-size: 0.8rem;
}

.modern-shop__bar-action--cart {
    background: var(--shop-primary);
    border: 1px solid var(--shop-primary);
    color: var(--shop-primary-text);
}

.modern-shop__bar-action--cart:hover {
    background: var(--shop-primary-hover);
    border-color: var(--shop-primary-hover);
    color: var(--shop-primary-text);
    filter: brightness(0.94);
}

.modern-shop__bar-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--shop-radius-pill);
    background: var(--tc-dot-orange, #ea580c);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* 3. Produktbereich                                                   */
/* ------------------------------------------------------------------ */
.modern-shop__main {
    padding: 2.75rem 0 0;
}

.modern-shop__products-header {
    margin-bottom: 2rem;
}

.modern-shop__products-title {
    position: relative;
    font-family: var(--shop-font-display);
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--shop-dark-text);
    margin: 0 0 0.6rem;
}

.modern-shop__products-title::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin-top: 0.7rem;
    border-radius: 2px;
    background: var(--shop-primary);
}

.modern-shop__products-subtitle {
    font-size: 0.98rem;
    color: var(--shop-muted-text);
    margin: 0;
}

.modern-shop__product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 1.5rem;
}

/* ── Produktkarte ─────────────────────────────────────────────────── */
.modern-shop__product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--shop-card-bg);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.modern-shop__product-card:hover {
    transform: translateY(-4px);
    border-color: var(--shop-primary);
    box-shadow: var(--shop-shadow-hover);
}

.modern-shop__product-image-container {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--shop-surface);
    overflow: hidden;
}

.modern-shop__product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.85rem;
    transition: transform 0.3s ease;
}

.modern-shop__product-card:hover .modern-shop__product-image {
    transform: scale(1.04);
}

.modern-shop__product-link {
    color: inherit;
    text-decoration: none;
}

.modern-shop__product-link:hover {
    text-decoration: none;
}

.modern-shop__product-link:hover .modern-shop__product-title {
    color: var(--shop-primary);
}

/* ── Merkliste-Herz auf dem Bild ──────────────────────────────────── */
.modern-shop__wishlist-form {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    margin: 0;
}

.modern-shop__wishlist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--shop-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--shop-muted-text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.modern-shop__wishlist-btn:hover {
    background: var(--shop-primary);
    border-color: var(--shop-primary);
    color: var(--shop-primary-text);
}

/* ── Overlay / Quick View ─────────────────────────────────────────── */
.modern-shop__product-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 31, 68, 0.32);
    opacity: 0;
    transition: opacity 0.2s ease;
    text-decoration: none;
    z-index: 2;
}

.modern-shop__product-card:hover .modern-shop__product-overlay {
    opacity: 1;
}

.modern-shop__quick-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--shop-card-bg);
    color: var(--shop-primary);
    font-size: 1rem;
    box-shadow: var(--shop-shadow-md);
    transform: translateY(10px);
    transition: transform 0.22s ease;
}

.modern-shop__product-card:hover .modern-shop__quick-view {
    transform: translateY(0);
}

/* ── Lagerbestand-Badge ───────────────────────────────────────────── */
.modern-shop__stock-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    border-radius: var(--shop-radius-pill);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.modern-shop__stock-badge i {
    font-size: 0.6rem;
}

.modern-shop__stock-badge--high {
    background: var(--tc-ok-bg, #dcfce7);
    color: var(--tc-ok-ink, #15803d);
    border: 1px solid rgba(21, 128, 61, 0.18);
}

.modern-shop__stock-badge--medium {
    background: var(--tc-warn-bg, #fef3c7);
    color: var(--tc-warn-ink, #92400e);
    border: 1px solid rgba(146, 64, 14, 0.18);
}

.modern-shop__stock-badge--low {
    background: var(--tc-block-bg, #fee2e2);
    color: var(--tc-block-ink, #991b1b);
    border: 1px solid rgba(153, 27, 27, 0.18);
}

/* ── Karteninhalt ─────────────────────────────────────────────────── */
.modern-shop__product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.05rem 1.15rem 1.15rem;
}

.modern-shop__product-title {
    font-family: var(--shop-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--shop-dark-text);
    margin: 0 0 0.45rem;
    transition: color 0.16s ease;
}

.modern-shop__product-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.87rem;
    line-height: 1.5;
    color: var(--shop-muted-text);
    margin: 0 0 1rem;
}

.modern-shop__product-footer {
    /* Preis und Aktionen stehen untereinander: nebeneinander lief der
       "In den Warenkorb"-Button (white-space: nowrap) in schmalen
       Rasterspalten aus der Karte heraus und wurde von deren
       overflow: hidden abgeschnitten. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--shop-border);
}

.modern-shop__preis-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.modern-shop__product-price {
    font-family: var(--shop-font-display);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--shop-dark-text);
}
.modern-shop__product-price--sale { color: #c0392b; }

.modern-shop__product-price-alt {
    font-size: 0.8rem;
    color: var(--shop-muted-text);
    text-decoration: line-through;
}

/* Ohne diese Zeile steht auf der Karte nur eine Zahl und der Kunde raet,
   ob er monatlich oder jaehrlich zahlt. */
.modern-shop__preis-intervall {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--shop-muted-text);
}

.modern-shop__product-actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

/* Das Merklisten-Formular ist ein reiner Wrapper — es darf nicht wachsen. */
.modern-shop__product-actions > form {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
}

.modern-shop__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: auto;
    align-self: stretch;
    border: 1px solid var(--shop-border-strong);
    border-radius: var(--shop-radius-sm);
    background: var(--shop-card-bg);
    color: var(--shop-muted-text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.modern-shop__action-btn:hover,
.modern-shop__action-btn--wish:hover {
    background: var(--shop-light-bg);
    border-color: var(--shop-primary);
    color: var(--shop-primary);
}

.modern-shop__add-to-cart {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--shop-primary);
    border-radius: var(--shop-radius-sm);
    background: var(--shop-primary);
    color: var(--shop-primary-text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.modern-shop__add-to-cart > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-shop__add-to-cart > i {
    flex: 0 0 auto;
}

.modern-shop__add-to-cart:hover {
    background: var(--shop-primary-hover);
    border-color: var(--shop-primary-hover);
    color: var(--shop-primary-text);
    filter: brightness(0.94);
}

/* ── "Mehr erfahren" ──────────────────────────────────────────────── */
.modern-shop__mehr-erfahren {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: center;
    padding: 0.15rem 0;
    color: var(--shop-primary);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: gap 0.16s ease, border-color 0.16s ease;
}
.modern-shop__mehr-erfahren i {
    font-size: 0.72rem;
    transition: transform 0.16s ease;
}
.modern-shop__mehr-erfahren:hover {
    color: var(--shop-primary-hover);
    border-bottom-color: currentColor;
}
.modern-shop__mehr-erfahren:hover i {
    transform: translateX(2px);
}

/* ── Typ-Pille auf dem Produktbild ────────────────────────────────── */
/* Oben mittig, ueber dem Bild: sie beantwortet die erste Frage vor dem
   Namen — was ist das ueberhaupt? Die Farbe trennt die beiden Welten:
   Blau fuer alles, was auf unseren Servern laeuft, Gruen fuer Arbeit,
   die Menschen leisten. */
.modern-shop__typ-badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.25rem 0.85rem;
    border-radius: var(--shop-radius-pill);
    color: #ffffff;
    font-family: var(--shop-font-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

.modern-shop__typ-badge i {
    font-size: 0.78rem;
}

/* Dasselbe Blau wie der aktive Filter-Chip und der Warenkorb-Knopf. */
.modern-shop__typ-badge--hosting {
    background: var(--shop-gradient-primary);
    box-shadow: 0 2px 6px rgba(26, 92, 245, 0.35);
}

.modern-shop__typ-badge--service {
    background: linear-gradient(135deg, #166534, #15803d);
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.35);
}

.modern-shop__typ-badge--sale {
    background: linear-gradient(135deg, #dc3545, #c0392b);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.45);
}

/* ── Standort-Flagge auf dem Produktbild ──────────────────────────── */
/* Unten rechts: oben mittig sitzt die Dienstleistungs-/Sale-Pille, oben
   rechts das Merklisten-Herz und unten links der Lagerstatus. */
.modern-shop__standort-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.7rem;
    border-radius: var(--shop-radius-pill);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--shop-border);
    box-shadow: var(--shop-shadow-sm);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--shop-dark-text);
    line-height: 1.4;
}

/* ── Leerzustand ──────────────────────────────────────────────────── */
.modern-shop__empty {
    padding: 4rem 1rem;
    text-align: center;
    color: var(--shop-muted-text);
}

.modern-shop__empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.9rem;
    color: var(--shop-border-strong);
}

.modern-shop__empty p {
    margin: 0;
    font-size: 0.98rem;
}

.modern-shop__empty-aktion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.4rem;
    padding: 0.62rem 1.3rem;
    border-radius: var(--shop-radius-pill);
    background: var(--shop-primary);
    color: var(--shop-primary-text);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shop-shadow-md);
    transition: background 0.16s ease, transform 0.16s ease;
}

.modern-shop__empty-aktion:hover {
    background: var(--shop-primary-hover);
    color: var(--shop-primary-text);
    transform: translateY(-1px);
    text-decoration: none;
}

.modern-shop__empty-aktion i {
    display: inline;
    font-size: 0.8rem;
    margin: 0;
    color: currentColor;
    transition: transform 0.16s ease;
}

.modern-shop__empty-aktion:hover i {
    transform: translateX(2px);
}

/* Der zweite und jeder weitere Weg hinueber: derselbe Knopf, nur leiser.
   Dieselbe Sprache wie der Merklisten-Knopf in der Filterleiste. */
.modern-shop__empty-aktion--leise {
    background: var(--shop-card-bg);
    border: 1px solid var(--shop-border-strong);
    color: var(--shop-dark-text);
    box-shadow: var(--shop-shadow-sm);
}

.modern-shop__empty-aktion--leise:hover {
    background: var(--shop-light-bg);
    border-color: var(--shop-primary);
    color: var(--shop-primary);
}

@keyframes shopFadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 575.98px) {
    .modern-shop__product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }

    /* Linksbuendig wie die Filter-Chips darueber: rechts aussen
       wirkten die beiden Knoepfe auf dem Telefon wie verrutscht. */
    .modern-shop__bar-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    /* Auf dem Telefon frisst die sticky Leiste sonst den halben Schirm:
       der Schalter nimmt die volle Breite, beide Laeden je die Haelfte. */
    .modern-shop__region-switch {
        width: 100%;
    }

    .modern-shop__region-option {
        flex: 1 1 0;
        justify-content: center;
        padding: 0.4rem 0.6rem;
    }

    .modern-shop__hero {
        padding: 2.5rem 0 2.25rem;
    }

    /* Unter 576px sind die Schwingen nur noch ein paar Pixel hoch und
       werden zu Krümeln. Lieber weg als undeutlich. */
    .modern-shop__zierleiste {
        display: none;
    }


    /* Zwei Karten nebeneinander lassen rund 145px Inhalt uebrig: die
       beiden Bildpillen und der Warenkorb-Knopf muessen darunter noch
       ihren ganzen Text zeigen statt abzuschneiden. */
    .modern-shop__stock-badge,
    .modern-shop__standort-badge {
        bottom: 6px;
        padding: 0.16rem 0.5rem;
        font-size: 0.63rem;
    }

    .modern-shop__stock-badge {
        left: 6px;
        gap: 0.22rem;
    }

    .modern-shop__standort-badge {
        right: 6px;
    }

    /* Rueckt mit, damit die Pille oben links die gewonnenen Pixel auch
       bekommt; 30px bleiben als Ziel gross genug fuer den Daumen. */
    .modern-shop__wishlist-form {
        top: 6px;
        right: 6px;
    }

    .modern-shop__wishlist-btn {
        width: 30px;
        height: 30px;
    }

    /* Dieselben 145px treffen die Pille oben. Mittig zentriert stiess
       sie links ueber die Karte hinaus und rechts unter das Merklisten-
       Herz, sobald die Beschriftung laenger wurde als "MAIL". Sie steht
       darum links und endet vor dem Herz.

       Und sie legt hier die Versalien ab. Gemessen bei 390px: die
       Bildflaeche ist 163px breit, das Herz nimmt rechts 38px, es
       bleiben 117px — "DIENSTLEISTUNG" braucht davon in Versalien 132px
       und in gemischter Schreibung 103px. Kleiner setzen waere der
       andere Weg gewesen, aber unter 11px ist so eine Beschriftung auf
       dem Telefon nicht mehr lesbar. Gemischt steht sie ausserdem
       gleich wie die beiden anderen Pillen auf derselben Karte
       ("Verfügbar", "Schweiz"). */
    .modern-shop__typ-badge {
        left: 6px;
        top: 6px;
        max-width: calc(100% - 44px);
        transform: none;
        padding: 0.2rem 0.5rem;
        /* 11.2px — der Lesbarkeitsboden fuer funktionalen Text liegt bei
           11px, darunter geht die Pille nicht. */
        font-size: 0.7rem;
        letter-spacing: 0.01em;
        line-height: 1.3;
        text-align: center;
        text-transform: none;
        white-space: normal;
        /* Reserve bleibt knapp; laedt die Schrift einmal nicht und faellt
           eine breitere ein, soll die Pille sauber abschneiden statt
           ueber das Herz zu laufen. */
        overflow: hidden;
    }

    /* Zwei Karten nebeneinander lassen dem Knopf rund 110px: "In den
       Warenkorb" passt dort auf keiner Schriftgroesse in eine Zeile. Er
       bricht darum um, statt den Text abzuschneiden — das haelt auch
       laengere Beschriftungen aus. */
    .modern-shop__add-to-cart {
        gap: 0;
        padding: 0.5rem 0.5rem;
        font-size: 0.78rem;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }

    .modern-shop__add-to-cart > span {
        overflow: visible;
        text-overflow: clip;
    }

    /* Die Tasche kostet den Platz, den die Beschriftung braucht. */
    .modern-shop__add-to-cart > i {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* 4. Merkliste                                                        */
/* ------------------------------------------------------------------ */
.merkliste-hero {
    background: var(--shop-surface);
    color: var(--shop-dark-text);
    font-family: var(--shop-font-text);
    padding: 3rem 0 4rem;
    min-height: 60vh;
}

.merkliste-hero .section-title {
    font-family: var(--shop-font-display);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--shop-dark-text);
    margin: 0 0 1.75rem;
}

.merkliste-card {
    background: var(--shop-card-bg);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow-sm);
    overflow: hidden;
}

.merkliste-table {
    margin: 0;
    vertical-align: middle;
}

.merkliste-table > :not(caption) > * > * {
    padding: 0.9rem 1rem;
}

.merkliste-table thead th {
    background: var(--shop-light-bg);
    border-bottom: 1px solid var(--shop-border);
    color: var(--shop-dark-text);
    font-family: var(--shop-font-display);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.merkliste-table tbody td {
    border-bottom: 1px solid var(--shop-line-soft, var(--shop-border));
    color: var(--shop-dark-text);
    font-size: 0.9rem;
    vertical-align: middle;
}

.merkliste-table tbody tr:last-child td {
    border-bottom: none;
}

.merkliste-img-container,
.merkliste-mobile-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    overflow: hidden;
}

.merkliste-img-container {
    width: 84px;
    height: 84px;
}

.merkliste-mobile-img-container {
    aspect-ratio: 4 / 3;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--shop-border);
    border-radius: 0;
}

.merkliste-img,
.merkliste-mobile-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 0.35rem;
}

.merkliste-product-card {
    height: 100%;
    background: var(--shop-card-bg);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.merkliste-product-card:hover {
    border-color: var(--shop-primary);
    box-shadow: var(--shop-shadow-md);
}

.merkliste-product-card .card-title {
    font-family: var(--shop-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--shop-dark-text);
}

.merkliste-product-card .card-text {
    font-size: 0.86rem;
    color: var(--shop-muted-text);
}

.merkliste-empty-card {
    padding: 3rem 1.5rem;
    background: var(--shop-card-bg);
    border: 1px dashed var(--shop-border-strong);
    border-radius: var(--shop-radius);
    text-align: center;
    color: var(--shop-muted-text);
}

.merkliste-empty-card i {
    display: block;
    color: var(--shop-border-strong);
}

.merkliste-hero .custom-dark-text {
    color: var(--shop-dark-text);
}

/* ------------------------------------------------------------------ */
/* 5. Gemeinsame Bausteine (Warenkorb / Checkout / Bestaetigung)        */
/* ------------------------------------------------------------------ */
.merkliste-hero .btn-primary,
.cart-container .btn-primary,
.checkout-container .btn-primary,
.confirmation-container .btn-primary,
.product-details .btn-primary {
    background: var(--shop-primary);
    border-color: var(--shop-primary);
    color: var(--shop-primary-text);
    font-weight: 600;
}

.merkliste-hero .btn-primary:hover,
.cart-container .btn-primary:hover,
.checkout-container .btn-primary:hover,
.confirmation-container .btn-primary:hover,
.product-details .btn-primary:hover {
    background: var(--shop-primary-hover);
    border-color: var(--shop-primary-hover);
    color: var(--shop-primary-text);
    filter: brightness(0.94);
}

/* ══════════════════════════════════════════════════════════════════════
   5. Produkt-Detailseite
   Gleiche Token-Ebene wie der Shop; die Seite laedt keine eigene
   Bibliothek, der Bildwechsel ist reines JavaScript im Template.
   ══════════════════════════════════════════════════════════════════════ */

.tc-detail {
    background: var(--shop-surface);
    color: var(--shop-dark-text);
    font-family: var(--shop-font-text);
    padding: 2.5rem 0 4rem;
    min-height: 70vh;
}

.tc-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.5rem;
    color: var(--shop-muted-text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.tc-detail__back i { transition: transform 0.16s ease; }
.tc-detail__back:hover { color: var(--shop-primary); }
.tc-detail__back:hover i { transform: translateX(-2px); }

.tc-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 2.5rem;
    align-items: start;
}

/* ── Bildbereich ─────────────────────────────────────────────────── */
.tc-detail__bild {
    position: relative;
    aspect-ratio: 4 / 3;
    /* Derselbe helle Blauverlauf wie der Shop-Hero: ein Produktbild auf
       reinem Weiss steht sonst in einem unsichtbaren Rahmen. */
    background: var(--shop-gradient-hero);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tc-detail__bild img {
    width: 100%;
    height: 100%;
    /* Wie auf der Produktkarte: ganz zeigen statt beschneiden. Ein
       Paket-Bild ist kein Foto, dem man die Raender nehmen darf. */
    object-fit: contain;
    padding: 1.5rem;
    display: block;
}
.tc-detail__bild-leer {
    color: var(--shop-border-strong);
    font-size: 3.5rem;
}

.tc-detail__standort {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.8rem;
    border-radius: var(--shop-radius-pill);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--shop-border);
    box-shadow: var(--shop-shadow-sm);
    font-size: 0.78rem;
    font-weight: 600;
}


.tc-detail__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.tc-detail__thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    background: var(--shop-card-bg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.16s ease;
}
.tc-detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-detail__thumb:hover { border-color: var(--shop-border-strong); }
.tc-detail__thumb.is-active { border-color: var(--shop-primary); border-width: 2px; }

/* ── Infobereich ─────────────────────────────────────────────────── */
.tc-detail__typ {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.85rem;
    border-radius: var(--shop-radius-pill);
    background: var(--shop-light-bg);
    border: 1px solid rgba(26, 92, 245, 0.18);
    color: var(--shop-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tc-detail__titel {
    font-family: var(--shop-font-display);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    text-wrap: balance;
    margin: 0.85rem 0 0.6rem;
}

.tc-detail__lead {
    max-width: 62ch;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--shop-muted-text);
    margin: 0 0 1.4rem;
}

.tc-detail__hinweis {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    border-radius: var(--shop-radius-sm);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}
.tc-detail__hinweis--warn {
    background: #fff4e5;
    border: 1px solid #d68910;
    color: #7a4f01;
}

/* Der Preis ist die Stelle, an der entschieden wird — er bekommt die
   Signalfarbe und einen eigenen Grund, statt weiss auf weiss zu stehen. */
.tc-detail__preisbox {
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(26, 92, 245, 0.16);
    border-radius: var(--shop-radius);
    background: var(--shop-light-bg);
    margin-bottom: 1.4rem;
}
.tc-detail__preis-zeile {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.tc-detail__preis {
    font-family: var(--shop-font-display);
    font-size: clamp(2rem, 3.2vw, 2.45rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--shop-primary);
    font-variant-numeric: tabular-nums;
}
.tc-detail__preis--sale { color: #c0392b; }
.tc-detail__preis-alt {
    font-size: 1rem;
    color: var(--shop-muted-text);
    text-decoration: line-through;
}
.tc-detail__sale-badge {
    padding: 0.2rem 0.65rem;
    border-radius: var(--shop-radius-pill);
    background: #fbe2df;
    color: #a02c1e;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tc-detail__preis-meta {
    margin-top: 0.35rem;
    font-size: 0.83rem;
    color: var(--shop-muted-text);
}
.tc-detail__rabatt {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.8rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--shop-radius-sm);
    background: var(--shop-card-bg);
    border: 1px solid rgba(26, 92, 245, 0.2);
    color: var(--shop-primary);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Die Kaufargumente als Faktenchips statt als graue Liste: sie werden
   ueberflogen, nicht gelesen. */
.tc-detail__trust {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.tc-detail__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.36rem 0.8rem;
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-pill);
    background: var(--shop-card-bg);
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--shop-dark-text);
}
.tc-detail__trust i { color: var(--shop-primary); font-size: 0.8rem; }

.tc-detail__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.tc-detail__aktionen form { margin: 0; }
/* Derselbe Knopf wie auf der Produktkarte — Radius, Schriftgroesse und
   das leichte Abdunkeln beim Hover inklusive. Wer von der Karte hierher
   klickt, soll denselben Knopf wiederfinden. */
.tc-detail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.72rem 1.35rem;
    border-radius: var(--shop-radius-sm);
    font-family: var(--shop-font-text);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
}
.tc-detail__btn--primary {
    background: var(--shop-primary);
    border-color: var(--shop-primary);
    color: var(--shop-primary-text);
    box-shadow: 0 2px 8px rgba(26, 92, 245, 0.22);
}
.tc-detail__btn--primary:hover:not(:disabled) {
    background: var(--shop-primary-hover);
    border-color: var(--shop-primary-hover);
    color: var(--shop-primary-text);
    filter: brightness(0.94);
}
.tc-detail__btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.tc-detail__btn--ghost {
    background: var(--shop-card-bg);
    border-color: var(--shop-border-strong);
    color: var(--shop-muted-text);
}
.tc-detail__btn--ghost:hover {
    border-color: var(--shop-primary);
    color: var(--shop-primary);
}

.tc-detail__fussnote {
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--shop-muted-text);
}

/* ── Spezifikationen ─────────────────────────────────────────────── */
.tc-detail__specs { margin-top: 3.25rem; }

/* Derselbe blaue Balken wie ueber den Kategorien im Shop. */
.tc-detail__specs-titel {
    font-family: var(--shop-font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
    color: var(--shop-dark-text);
}
.tc-detail__specs-titel::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin-top: 0.7rem;
    border-radius: 2px;
    background: var(--shop-primary);
}

/* ── Beschrieb und Zielgruppe ─────────────────────────────────────── */
.tc-detail__text {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 2.5rem;
    align-items: start;
    margin-top: 3.25rem;
}

.tc-detail__beschrieb p {
    max-width: 68ch;
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--shop-muted-text);
}
.tc-detail__beschrieb p:last-child { margin-bottom: 0; }

.tc-detail__zielgruppe {
    padding: 1.5rem 1.6rem;
    border-radius: var(--shop-radius);
    background: var(--shop-light-bg);
    border: 1px solid rgba(26, 92, 245, 0.16);
}

.tc-detail__zielgruppe-titel {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
    font-family: var(--shop-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--shop-dark-text);
}
.tc-detail__zielgruppe-titel i {
    flex: 0 0 auto;
    margin-top: 0.15em;
    font-size: 0.9rem;
    color: var(--shop-primary);
}

.tc-detail__zielgruppe p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--shop-muted-text);
}

.tc-detail__zielgruppe-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.tc-detail__zielgruppe-liste li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--shop-muted-text);
}
/* Gezeichneter Haken statt Listenpunkt — dieselbe Signalfarbe wie die
   Kaufargumente darueber. */
.tc-detail__zielgruppe-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.62rem;
    height: 0.34rem;
    border-left: 2px solid var(--shop-primary);
    border-bottom: 2px solid var(--shop-primary);
    transform: rotate(-45deg);
}
.tc-detail__specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.tc-spec-karte {
    background: var(--shop-card-bg);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow-sm);
    padding: 1.1rem 1.25rem;
}
.tc-spec-karte h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shop-primary);
}
.tc-spec-karte dl { margin: 0; }
.tc-spec-zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--shop-border);
    font-size: 0.87rem;
}
.tc-spec-zeile:last-child { border-bottom: none; }
.tc-spec-zeile dt { color: var(--shop-muted-text); margin: 0; font-weight: 400; }
.tc-spec-zeile dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 860px) {
    .tc-detail__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .tc-detail__text { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2.5rem; }
}

/* ── Kategorie-Abschnitte im Shop ─────────────────────────────────── */
.modern-shop__kategorie { margin-bottom: 3rem; }
.modern-shop__kategorie:last-of-type { margin-bottom: 0; }

.modern-shop__kategorie .modern-shop__products-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    padding-bottom: 0.7rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--shop-border);
}
.modern-shop__kategorie .modern-shop__products-title { margin: 0; }
.modern-shop__kategorie .modern-shop__products-subtitle { flex: 1 1 100%; margin: 0; }

.modern-shop__kategorie-anzahl {
    margin-left: auto;
    padding: 0.15rem 0.65rem;
    border-radius: var(--shop-radius-pill);
    background: var(--shop-light-bg);
    color: var(--shop-primary);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Zusatzlizenzen auf der Produktseite ──────────────────────────────
   Die Mengenwahl steht zwischen Vertrauenszeile und Kaufknopf, weil
   sie den Preis aendert: wer sie uebersieht, bestellt etwas anderes,
   als er wollte. Eigener Grund und eigene Linie, damit sie nicht als
   Teil der Aufzaehlung darueber gelesen wird. */
.tc-detail__lizenzen {
    width: 100%;
    margin-bottom: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(26, 92, 245, 0.16);
    border-radius: var(--shop-radius-sm);
    background: var(--shop-light-bg);
}
.tc-detail__lizenzen-label {
    display: block;
    font-family: var(--shop-font-text);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--shop-dark-text);
    margin-bottom: 0.55rem;
}
.tc-detail__lizenzen-inkl {
    display: block;
    font-weight: 400;
    font-size: 0.79rem;
    color: var(--shop-muted-text);
    margin-top: 0.15rem;
}
.tc-detail__lizenzen-zeile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.tc-detail__lizenzen-feld {
    width: 5.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    background: var(--shop-card-bg);
    font-family: var(--shop-font-text);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--shop-dark-text);
}
.tc-detail__lizenzen-feld:focus {
    outline: none;
    border-color: var(--shop-primary);
    box-shadow: 0 0 0 3px rgba(26, 92, 245, 0.14);
}
.tc-detail__lizenzen-satz,
.tc-detail__lizenzen-hinweis {
    font-size: 0.81rem;
    color: var(--shop-muted-text);
}
.tc-detail__lizenzen-hinweis { margin-top: 0.4rem; }
.tc-detail__lizenzen-total {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(26, 92, 245, 0.14);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--shop-primary);
    font-variant-numeric: tabular-nums;
}
/* Die Nachbestellung ist ein anderer Kauf als der daneben: derselbe
   Knopf, aber nur die Plaetze werden verrechnet. Das muss dastehen,
   bevor jemand drueckt — darum eine eigene Zeile und nicht der
   Hilfetext unter dem Feld. */
.tc-detail__lizenzen-abo {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(26, 92, 245, 0.14);
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--shop-dark-text);
}
.tc-detail__lizenzen-abo i {
    color: var(--shop-primary);
    margin-top: 0.15rem;
}

/* ── Laufzeitwahl ─────────────────────────────────────────────────────
   Die Laufzeit aendert den Preis, also steht sie ueber dem Kaufknopf
   und nicht in der Merkmalsliste. Jede Option zeigt ihren Preis: eine
   Prozentangabe allein zwingt den Kunden zum Kopfrechnen. */
.tc-detail__laufzeiten {
    width: 100%;
    margin-bottom: 0.9rem;
}
.tc-detail__laufzeiten-titel {
    font-family: var(--shop-font-text);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--shop-dark-text);
    margin-bottom: 0.55rem;
}
.tc-detail__laufzeit {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-sm);
    background: var(--shop-card-bg);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}
.tc-detail__laufzeit:hover { border-color: var(--shop-border-strong); }
.tc-detail__laufzeit:has(input:checked) {
    border-color: var(--shop-primary);
    background: var(--shop-light-bg);
}
.tc-detail__laufzeit input {
    width: 16px;
    height: 16px;
    accent-color: var(--shop-primary);
    flex: none;
}
.tc-detail__laufzeit-monate {
    font-family: var(--shop-font-text);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--shop-dark-text);
}
.tc-detail__laufzeit-preis {
    margin-left: auto;
    font-size: 0.86rem;
    color: var(--shop-dark-text);
    font-variant-numeric: tabular-nums;
}
.tc-detail__laufzeit-satz {
    padding: 0.1rem 0.45rem;
    border-radius: var(--shop-radius-pill);
    background: var(--shop-light-bg);
    border: 1px solid rgba(26, 92, 245, 0.2);
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--shop-primary);
}
.tc-detail__laufzeit:has(input:checked) .tc-detail__laufzeit-satz {
    background: var(--shop-card-bg);
}
.tc-detail__laufzeiten-hinweis {
    font-size: 0.81rem;
    line-height: 1.5;
    color: var(--shop-muted-text);
    margin-top: 0.4rem;
}

/* ── Vorlaufzeit ──────────────────────────────────────────────────────
   Eigener Block mit eigener Farbe: wann etwas bereitsteht, entscheidet
   mit ueber den Kauf. In der Merkmalsliste daneben ginge die Angabe
   zwischen acht Haekchen unter.

   Bernstein statt Blau, weil es kein Verkaufsargument ist, sondern
   eine Einschraenkung — und weil Blau hier schon der Preis traegt. */
.tc-detail__vorlauf {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.4rem;
    padding: 0.85rem 1rem;
    border: 1px solid #f0d8a8;
    border-left: 3px solid #d99a2b;
    border-radius: var(--shop-radius-sm);
    background: #fdf6e8;
}
.tc-detail__vorlauf i {
    color: #b57812;
    font-size: 0.95rem;
    margin-top: 0.15rem;
}
.tc-detail__vorlauf-titel {
    font-family: var(--shop-font-text);
    font-size: 0.92rem;
    font-weight: 600;
    color: #7a4f01;
}
.tc-detail__vorlauf-text {
    margin-top: 0.15rem;
    font-size: 0.83rem;
    line-height: 1.5;
    color: #8a6420;
}

/* Weitere Preisangaben, direkt unter dem Preis. */
.tc-detail__preisarten {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0.7rem 0 0;
    border-top: 1px solid rgba(26, 92, 245, 0.14);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}
.tc-detail__preisarten li {
    font-family: var(--shop-font-text);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--shop-dark-text);
    font-variant-numeric: tabular-nums;
}
/* "ab" vor dem Preis: kleiner als die Zahl, aber auf derselben
   Grundlinie — es gehoert zum Preis und ist keine Fussnote. */
.tc-detail__preis-ab {
    font-family: var(--shop-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--shop-muted-text);
    align-self: baseline;
}