.tma-cart-threshold-progress {
    /* Balkenhoehe, Breite der Schrägkante und der sichtbare Spalt dazwischen.
       --tma-gap muss kleiner als --tma-slant bleiben, sonst ueberlappen die
       Segmente lueckenlos und die Trennlinie verschwindet. */
    --tma-bar-height: 18px;
    --tma-slant: 16px;
    --tma-gap: 6px;
    margin: 0 0 1.5rem;
    color: #fff;
}

.tma-cart-threshold-progress[hidden],
.tma-cart-threshold-progress--empty {
    display: none;
}

.tma-cart-threshold-progress__track {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.tma-cart-threshold-progress__stage {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 0;
}

.tma-cart-threshold-progress__bar {
    position: relative;
    height: var(--tma-bar-height);
    background: #f4f1ea;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - var(--tma-slant)) 0, 100% 100%, 0 100%);
}

.tma-cart-threshold-progress__stage:not(:first-child) .tma-cart-threshold-progress__bar {
    margin-left: calc(var(--tma-gap) - var(--tma-slant));
    clip-path: polygon(0 0, calc(100% - var(--tma-slant)) 0, 100% 100%, var(--tma-slant) 100%);
}

.tma-cart-threshold-progress__stage:last-child .tma-cart-threshold-progress__bar {
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--tma-slant) 100%);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.tma-cart-threshold-progress__stage:first-child .tma-cart-threshold-progress__bar {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.tma-cart-threshold-progress__stage:only-child .tma-cart-threshold-progress__bar {
    clip-path: none;
    border-radius: 3px;
}

.woocommerce .tma-cart-threshold-progress__fill,
.tma-cart-threshold-progress__fill {
    display: block !important;
    height: 100%;
    width: 0;
    max-width: 100%;
    background: #c4ae78;
    transition: width 0.35s ease;
}

/* Jede Caption steht unter dem Segment, zu dem sie gehoert: die erste linksbuendig
   am Anfang der Leiste, die letzte rechtsbuendig am Ende, dazwischen zentriert. */

.tma-cart-threshold-progress__caption {
    margin: 0.55rem 0 0;
    padding-right: 0.9rem;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #fff;
    text-align: left;
}

.tma-cart-threshold-progress__stage:not(:first-child):not(:last-child) .tma-cart-threshold-progress__caption {
    padding: 0 0.45rem;
    text-align: center;
}

.tma-cart-threshold-progress__stage:last-child:not(:only-child) .tma-cart-threshold-progress__caption {
    padding-right: 0;
    padding-left: 0.9rem;
    text-align: right;
}

.tma-cart-threshold-progress__caption strong {
    font-weight: 700;
}

/* Streifen auf Shop-, Kategorie- und Inhaltsseiten */

/* Breite und seitliche Rinnen kommen aus der Theme-Klasse "container" am selben
   Element, deshalb hier nur die senkrechten Abstaende als Einzelwerte setzen.
   Sie sitzen bewusst am Streifen und nicht am __inner: das Mega-Menu-CSS der
   Navigation greift sonst in den oberen Abstand hinein. Oben und unten
   derselbe Wert, damit der Balken mittig in der Flaeche steht. */

/* Der Theme-Header ist position:fixed, den Platz dafuer haelt .wrapper mit
   einem festen padding-top frei. Dieser Wert ist eine Naeherung und faellt je
   nach Breite bis zu 18px zu knapp aus. Die Theme-Sektionen faellt das nicht
   auf, weil ihr erster Inhalt eigene obere Abstaende mitbringt - die Leiste
   sitzt dagegen buendig am Anfang des Inhaltsflusses und verschwindet sonst
   teilweise hinter der Navigation. --tma-header-shortfall deckt den groessten
   gemessenen Fehlbetrag ab; der sichtbare Abstand liegt damit je nach Breite
   zwischen 1rem und gut 2rem, aber nie mehr im Minus. */

.tma-cart-threshold-progress--storefront {
    --tma-header-shortfall: 18px;
    margin: 0 auto;
    padding-top: calc(var(--tma-header-shortfall) + 1rem);
    padding-bottom: 1rem;
    color: #fff;
}

.tma-cart-threshold-progress--storefront .tma-cart-threshold-progress__caption {
    margin-top: 0.6rem;
}

@media (max-width: 767px) {
    .tma-cart-threshold-progress--storefront {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        /* Der fixierte Balken laeuft ueber die volle Breite, die Container-
           Begrenzung gilt hier also nicht. */
        max-width: none;
        margin: 0;
        /* Der fixierte Balken liegt ueber dem Seiteninhalt und braucht deshalb
           eine deckende Flaeche, anders als die Variante im Seitenfluss. */
        background: #2b2b2b;
        border-top: 1px solid #3a3a3a;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
        padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    }

    .tma-cart-threshold-progress--storefront .tma-cart-threshold-progress__caption {
        margin-top: 0.5rem;
        font-size: 0.88rem;
    }
}